.mp3-tag-select{height:24px;line-height:24px;border:1px solid #cbd5e1;border-radius:4px;padding:0 .35rem;font:inherit;font-size:12px;color:#111;background:#fff}
.file-input-hidden{position:absolute;left:-9999px;}
.file-input-button{display:flex;align-items:center;justify-content:center;padding:.4rem .8rem;border:1px solid #ccc;border-radius:6px;background:#f5f5f5;cursor:pointer;text-align:center;width:100%;height:42px;font:inherit}
.file-input-button:hover{background:#eee;border-color:#bbb}
/* Band Selector */
.band-selector {
    background: #f8f9fa;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.band-selector label {
    font-weight: bold;
    color: #495057;
}

.band-selector select {
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    min-width: 200px;
}

.band-selector button {
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.band-selector button:hover {
    background: #0056b3;
}

.band-selector button#settingsBtn {
    padding: 0.5rem;
    background: transparent;
    font-size: 1.2rem;
}

.band-selector button#settingsBtn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Settings Modal */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
}

.btnrow {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btnrow button {
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    font-size: 1.6rem; /* larger icons */
}

body{font-family:system-ui,Arial,sans-serif;margin:1rem 2rem;}
h1{margin:0 0 1rem;}
.topnav{display:flex;align-items:center;gap:1rem;justify-content:space-between;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:.5rem .75rem;margin-bottom:1rem}
.topnav .nav-link{color:#007bff;text-decoration:none;padding:.25rem .4rem;border-radius:4px}
.topnav .nav-link:hover{background:rgba(0,123,255,.1)}
.topnav .nav-link.active{font-weight:700;color:#0b5ed7}
.topnav .settings-btn{padding:.25rem .5rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;text-decoration:none}
.topnav .settings-btn:hover{background:#eef6ff;border-color:#0077ff;color:#0b5ed7}
.topnav .version-text{font-size:.8rem;color:#64748b;margin-right:.5rem}
.grid{display:flex;gap:1rem;align-items:flex-start;}
.left-column{flex:0 0 220px;display:flex;flex-direction:column;gap:0.6rem;}
/* Laat asides automatisch op content-hoogte i.p.v. vaste 180px */
aside{flex:0 0 auto}
.details-panel{flex:0 0 220px;max-width:220px;border:1px solid #ccc;border-radius:8px;padding:0.75rem;background:#fff;}
.band-block{padding:.5rem}
.band-block .header-row{margin-bottom:.25rem}
.band-block select{height:32px}
.band-block.compact{padding:.3rem .5rem}
.band-block.compact .header-row{margin-bottom:.15rem}
.band-block.compact select{height:28px;margin-bottom:0}

/* Historie compactness */
.history-block.compact{padding:.3rem .5rem}
.history-block.compact .header-row{margin-bottom:.15rem}
.history-block.compact .show-history-btn{margin-bottom:.25rem}
/* halve hoogte t.o.v. eerdere waarde */
.history{max-height:140px; overflow:auto}
.history li{padding:.25rem}

/* Songlist instruction subtle */
.songblock .instructions small{color:#6b7280; font-size:.85em}

/* Hover highlight and full-row clickability already present via li:hover; keep subtle */
li.song-item:hover{background:#f2f7ff;border-color:#bcd7ff}

/* Setlist buttons visual weights */
.setblock .iconrow button#save{background:#0b5ed7;color:#fff;border:1px solid #0b5ed7;border-radius:6px;padding:.25rem .6rem}
.setblock .iconrow button#save:hover{background:#0a53be}
.setblock .iconrow button#reset{border:1px solid #cbd5e1;border-radius:6px;padding:.25rem .6rem;color:#334155;background:#fff}
.setblock .iconrow button#reset:hover{border-color:#94a3b8;background:#f8fafc}
.setblock .iconrow button#print{border:1px solid #e2e8f0;border-radius:6px;padding:.25rem .6rem;background:#fff}

/* Autosetlist tooltip affordance */
#autoSetlistBtn{position:relative}
#autoSetlistBtn::after{content:""; position:absolute; inset:auto auto -2px 0; height:2px; width:100%; background:transparent}

/* Song Details compact form controls */
.details-panel input,.details-panel textarea,.details-panel select{height:32px; padding:.25rem .45rem}
.details-panel #editMin,
.details-panel #editSec,
.details-panel #editBpm,
.details-panel #editKey{height:16px; padding:.1rem .3rem}
.details-panel textarea{min-height:48px}
.details-panel .form-row,.details-panel .form-row-two{margin-bottom:.35rem}

/* Focus visible outlines */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid rgba(11,94,215,.5);
  outline-offset:2px;
}

/* Settings icon hook - allow custom icon via background-image */
.topnav .settings-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:32px}
.songblock{flex:0 0 300px}
.setblock{flex:0 0 300px}
section,aside{border:1px solid #ccc;border-radius:8px;padding:0.75rem;background:#fff}

.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.iconrow{display:flex;gap:.4rem;align-items:center}
.iconrow button,select{font-size:1em;border:none;background:transparent;cursor:pointer;padding:0 .3rem}
select{border:1px solid #bbb;border-radius:6px;padding:.15rem .4rem;font:inherit}
.iconrow button:hover{color:#0077ff}
.iconrow #autoSetlistBtn{border:1px solid #94a3b8;border-radius:6px;padding:.25rem .6rem;font-size:.85em;color:#334155;background:#f8fafc;cursor:pointer}
.iconrow #autoSetlistBtn:hover{background:#eef6ff;border-color:#0077ff;color:#0b5ed7}

.search-container{position:relative;margin:.3rem 0;padding:.4rem;border:1px solid #c6c6c6;border-radius:8px;background:#fafafa;transition:all 0.2s ease;display:flex;align-items:center;gap:.5rem;}
.search-container:hover{background:#f0f0f0;border-color:#999;}
.searchbox{flex:1;border:none;background:none;padding:0;font-size:.9em;outline:none;}
.searchbox:focus{outline:none;}
.clear-btn{background:none;border:none;cursor:pointer;color:#999;font-size:.8rem;padding:.2rem;border-radius:3px;display:none;flex-shrink:0;}
.clear-btn:hover{color:#666;background:#e0e0e0;}
.clear-btn:active{color:#333;}
.history-instruction{text-align:left;margin-bottom:.5rem;color:#666;font-style:italic;font-size:0.9rem;}
.show-history-btn{width:50%;padding:.3rem;border:1px solid #999;border-radius:4px;background:#f5f5f5;color:#666;cursor:pointer;font-size:0.8rem;margin-bottom:.5rem;}
.show-history-btn:hover{background:#e0e0e0;border-color:#777;color:#555;}
.show-history-btn:active{background:#d0d0d0;}
.targetbar{display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem}
.targetbar input{width:4rem;padding:.25rem .45rem;border:1px solid #ccc;border-radius:6px}
.targetbar span{font-weight:bold}

ul,ol{list-style:none;margin:0;padding:0}
li{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;padding:.55rem;
   border:1px solid #c6c6c6;border-radius:8px;background:#fafafa;cursor:grab;font-size:.9em;
   transition:all 0.2s ease;}
li:active{cursor:grabbing;}
li.setitem{background:#fffaf3}
li.ghost{background:#d8ebff;border-style:dashed;opacity:0.6;}
li.chosen{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:1000;}
li:hover{background:#f0f0f0;border-color:#999;}
li.selected{background:#e3f2fd;border-color:#2196f3;box-shadow:0 2px 8px rgba(33,150,243,.3);transform:scale(1.02);}
li.dragging{opacity:0.8;transform:rotate(2deg) scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:1001;}
li.song-item{cursor:pointer;justify-content:flex-start;}

/* Compact Details Panel Styling */
.placeholder{text-align:center;color:#999;font-style:italic;margin:1rem 0;font-size:0.9rem;}
.details-panel label{display:block;margin-bottom:.3rem;font-weight:bold;font-size:0.9rem;}
.details-panel input{width:100%;padding:.25rem;border:1px solid #ccc;border-radius:3px;margin-bottom:.3rem;font-size:0.9rem;}
.details-panel textarea{width:100%;padding:.25rem;border:1px solid #ccc;border-radius:3px;margin-bottom:.3rem;font-size:0.9rem;resize:vertical;min-height:2.5rem;font-family:inherit;}
.details-panel .form-row{margin-bottom:.4rem;}
.details-panel .form-row-two{display:flex;gap:.3rem;margin-bottom:.4rem;}
.details-panel .form-row-two label{flex:1;}
.details-panel .btnrow{display:flex;gap:.3rem;margin-top:.6rem;}
.details-panel button{flex:1;padding:.4rem;border:1px solid #ccc;border-radius:3px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;background:#f9f9f9;}
.details-panel button:hover{background:#f0f0f0;border-color:#999;}
#saveChanges{position:relative;}
#saveChanges.unsaved{animation:pulse 2s infinite;}
#saveChanges.unsaved::after{content:'*';position:absolute;right:4px;top:2px;font-size:0.8em;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}

/* Add song button styling */
.add-song-btn{width:100%;padding:.5rem;margin-bottom:.5rem;border:1px solid #4caf50;border-radius:4px;background:#4caf50;color:white;cursor:pointer;font-size:0.9rem;font-weight:500;}
.add-song-btn:hover{background:#45a049;border-color:#45a049;}
.add-song-btn:active{background:#3d8b40;}

/* New song mode styling - only light green background */
.details-panel.new-song-mode{background:#e8f5e8;border-color:#4caf50;}
.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;position:relative;}
#closeDetails{position:absolute;top:-0.2rem;right:-0.2rem;background:#666;color:white;padding:.2rem .3rem;border-radius:50%;font-size:0.7rem;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;}
#closeDetails:hover{background:#555;transform:scale(1.1);}

/* Verbeterde drop zone feedback */
.sortable-swap-highlight{
  background:#e8f5e8 !important;
  border:2px dashed #4caf50 !important;
  transform:scale(1.02);
}

/* Drop zone indicators */
#songs.sortable-drag-over{
  background:#f0f8ff;
  border:2px dashed #0077ff;
  border-radius:8px;
}

#setlist.sortable-drag-over{
  background:#fff8f0;
  border:2px dashed #ff9800;
  border-radius:8px;
}

/* Verbeterde ghost styling */
li.ghost{
  background:#e3f2fd;
  border:2px dashed #2196f3;
  opacity:0.7;
  transform:scale(0.95);
}

/* "Gooi" effect styling */
li.dragging{
  opacity:0.8;
  transform:rotate(2deg) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  z-index:1001;
  transition:none; /* Geen transition tijdens slepen voor directe feedback */
}

/* Extra feedback voor gooi actie */
#setlist li.dragging{
  box-shadow:0 12px 25px rgba(255,152,0,.3);
}

#songs li.dragging{
  box-shadow:0 12px 25px rgba(33,150,243,.3);
}
li small{margin-left:auto;font-size:.8em;color:#555}
#setlist{padding-bottom:50px;position:relative}
#setlist::after{content:'';position:absolute;left:0;right:0;bottom:0;height:50px}

button{border:none;background:transparent;font:inherit;cursor:pointer}
.del:hover,.remove:hover,.delset:hover{color:red}

.history{font-size:.85em}
.history li{display:flex;gap:.4rem;margin:.4rem 0;padding:.4rem;border:1px solid #ddd;border-radius:6px}
.history a{flex:1;text-decoration:none;color:#000}

dialog{border:0;border-radius:10px;padding:1rem;box-shadow:0 4px 18px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.3)}
.btnrow{display:flex;gap:.6rem;margin-top:.8rem}
.snackbar{position:fixed;bottom:1rem;right:1rem;background:#333;color:#fff;padding:.5rem .9rem;border-radius:6px;font-size:.8em}

/* Responsive Design */
@media (max-width: 1200px) {
  .grid { gap: 0.5rem; }
  aside { flex: 0 0 180px; }
  .songblock, .setblock { flex: 0 0 280px; }
}

@media (max-width: 768px) {
  body { margin: 0.5rem; }
  .grid { 
    flex-direction: column; 
    gap: 1rem;
  }
  aside, .songblock, .setblock { 
    flex: 1; 
    width: 100%;
  }
  .header-row { 
    flex-direction: column; 
    gap: 0.5rem; 
    align-items: stretch;
  }
  .iconrow { 
    justify-content: center; 
    flex-wrap: wrap;
  }
  li { 
    padding: 0.4rem; 
    font-size: 0.85em;
  }
  .targetbar { 
    flex-direction: column; 
    gap: 0.3rem; 
    align-items: stretch;
  }
  .targetbar input { 
    width: 100%; 
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .searchbox { 
    font-size: 16px; /* Voorkom zoom op iOS */
  }
  dialog { 
    margin: 1rem; 
    width: calc(100% - 2rem);
  }
}

/* Loading States */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0077ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Error States */
.error {
  color: #d32f2f;
  background: #ffebee;
  border: 1px solid #ffcdd2;
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}

.success {
  color: #2e7d32;
  background: #e8f5e8;
  border: 1px solid #c8e6c9;
  padding: 0.5rem;
  border-radius: 4px;
  margin: 0.5rem 0;
}

@media print{
  aside,.songblock,button,select,.iconrow,dialog,.snackbar{display:none}
  .setblock{border:0;padding:0}
}

/* Multiple sets layout */
.sets-container{display:flex;gap:1rem;margin-top:.5rem;align-items:stretch;}
.set-column{
  flex:none;
  width:300px;
  border:1px solid #ccc;
  border-radius:8px;
  padding:.5rem;
  background:#fafafa;
  transition:all 0.2s ease;
  display:flex;
  flex-direction:column;
  min-height:600px; /* Increased height for better dropzone coverage */
}
.set-column.selected{border-color:#2196f3;background:#e3f2fd;box-shadow:0 2px 4px rgba(33,150,243,0.3);}
.set-column h4{margin:0 0 .5rem 0;padding:.3rem;background:#e0e0e0;border-radius:4px;text-align:center;font-size:0.9rem;color:#666;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.2s ease;}
.set-column.selected h4{background:#2196f3;color:white;}
.set-column h4:hover{background:#d0d0d0;}
.set-column.selected h4:hover{background:#1976d2;}
.set-column .set-time{font-weight:bold;color:#333;font-size:0.8rem;}
.set-column .setlist{
  min-height:500px; /* Increased height to match column */
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
  flex:1; /* Take remaining space in flex column */
  height:100%; /* Force full height */
  /* Prevent visual overflow */
  box-sizing:border-box;
  overflow:hidden;
  /* Remove display:flex to allow SortableJS to work properly */
}
.set-column .setlist.sortable-drag-over{
  border:2px dashed #2196f3;
  border-radius:8px;
  background:rgba(33,150,243,0.1);
  /* Ensure the entire area is draggable but contained */
  min-height:100%;
  height:100%; /* Force full height */
  flex:1; /* Take all available space */
  /* Prevent visual overflow */
  box-sizing:border-box;
  overflow:hidden;
}
.set-column .setlist li{margin:.3rem 0;padding:.4rem;border:1px solid #c6c6c6;border-radius:8px;background:#fff;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.set-column .setlist li:hover{background:#f0f0f0;border-color:#999;}
.set-column .setlist li.selected{background:#e3f2fd;border-color:#2196f3;box-shadow:0 2px 4px rgba(33,150,243,0.3);}
.set-column .setlist-placeholder{text-align:center;color:#999;font-style:italic;padding:2rem 1rem;margin:1rem 0;border:2px dashed #ccc;border-radius:8px;background:#f9f9f9;list-style:none;cursor:default;}

/* Single set layout - full width */
.sets-container.single-set .set-column{flex:none;width:100%;max-width:none;}

/* Responsive sets */
@media (max-width: 1200px) {
  .sets-container{flex-wrap:wrap;}
  .set-column{width:280px;min-height:500px;}
  .set-column .setlist{min-height:400px;}
}

@media (max-width: 768px) {
  .sets-container{flex-direction:column;}
  .set-column{width:100%;max-width:none;min-height:300px;}
  .set-column .setlist{min-height:250px;}
}

/* MP3 Upload Styling */
.mp3-section {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
}

.mp3-section h4 {
    margin: 0 0 1rem 0;
    color: #495057;
}

.mp3-files {
    margin-bottom: 1rem;
}

.mp3-empty {
    font-size: 0.95rem;
    color: #666;
    padding: 8px 0 12px;
}

/* Index details panel: compact MP3 list met SongEdit-stijl binnen smalle breedte */
.mp3-mini{border:1px solid #e5e7eb;border-radius:8px;background:#fff;padding:.35rem;cursor:default;display:grid;grid-template-columns:1fr var(--timeW,54px);grid-auto-rows:26px;gap:.35rem;align-items:center}
.mp3-mini .mp3-name{height:26px;line-height:26px;font-size:10px;cursor:default;width:100%;background-image:linear-gradient(to right, #dbeafe 0 var(--prog,0%), transparent var(--prog,0%));background-repeat:no-repeat;background-size:100% 100%}
.mini-top{display:contents}
.mini-top .mp3-name{grid-column:1}
.mini-top .se-play-btn{grid-column:2;width:var(--timeW,54px);height:26px;border:1px solid #e5e7eb;border-radius:6px;background:#f1f5f9;color:#374151;display:inline-flex;align-items:center;justify-content:center}
.mini-controls{display:contents}
.mini-controls .tag-chip{grid-column:1;height:26px;line-height:26px;padding:0 .5rem;white-space:nowrap;display:block;width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
.mini-controls .mp3-duration{grid-column:2;height:26px;line-height:26px;padding:0 .4rem;text-align:right;width:var(--timeW,54px)}
.mini-controls .se-play-btn{display:none}
.mini-controls .mp3-delete-btn{width:28px;height:26px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#6b7280}
.mini-controls .mp3-delete-btn:hover{background:#f8fafc;color:#374151}

.mp3-file .play-btn{
    background: transparent;
    color: #555;
    border: none;
    width: 28px; height: 28px;
    display:flex;align-items:center;justify-content:center;
    padding: 0;
    cursor: pointer;
    font-size: 1.1rem;
}

.mp3-file .play-btn.paused { color: #28a745; }

.mp3-file-info {
    flex: 1;
}

.mp3-file-name {
    font-weight: 400; /* niet vet */
    color: #333;
    font-size: .9rem; /* gelijk aan song-item */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* twee regels */
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: calc(1.2em * 2);
    font-stretch: condensed;
    font-family: "Arial Narrow", "Roboto Condensed", system-ui, Arial, sans-serif;
}

.mp3-file-size { display:none }

.mp3-file-tag {
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 12px;
    color: #fff;
    margin-left: 0;
}

.mp3-delete-btn{background:transparent;border:none;color:#777;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer}
.mp3-delete-btn:hover{color:#333;background:transparent}

.mp3-upload-form {
    display: none; /* Hidden by default, shown when song is selected */
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    margin-top: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #eceff1; /* 10% donkerder */
}

.mp3-upload-form[style*="block"] {
    display: flex !important;
}

.mp3-grid{display:grid;grid-template-columns:1fr;gap:8px;width:100%;align-items:stretch}
.mp3-grid select,.mp3-grid .mp3-box,.mp3-grid .file-input-button{width:100%;box-sizing:border-box}
.mp3-box{display:flex;align-items:center;justify-content:center;height:42px;border:1px solid #ccc;border-radius:6px;background:#fff;font:inherit}
.mp3-dropzone{height:60px}

.mp3-upload-form input[type="file"] {
    flex: 1;
}

/* Show chosen filename below the file input */
#mp3FileInput + .file-name { display:block; font-size:.85rem; color:#666; }

.mp3-upload-form select {
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.upload-icon-btn{background:transparent;border:none;color:#111;border-radius:6px;font:inherit;height:42px}
.upload-icon-btn:disabled{opacity:.6}
.upload-icon-btn:hover{background:transparent}

.mp3-dropzone {
    width: 100%;
    padding: 12px;
    border: 1px dashed #bbb; /* gelijk aan randdikte van andere vakken */
    border-radius: 6px;
    color: #666;
    text-align: center;
    background: #fff;
}

.mp3-dropzone.dragover {
    border-color: #007bff;
    background: #eef6ff;
    color: #0056b3;
}

.upload-progress {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.upload-progress .progress-fill {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width .2s ease;
}

/* MP3 Tags Management */
#mp3TagsContainer {
    margin-top: 0.5rem;
}

.tags-list {
    margin-bottom: 1rem;
}

.tag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.tag-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.tag-name {
    flex: 1;
    font-weight: bold;
}

.tag-actions {
    display: flex;
    gap: 0.5rem;
}

.tag-edit-btn, .tag-delete-btn {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.tag-edit-btn {
    background: #ffc107;
    color: #212529;
}

.tag-delete-btn {
    background: #dc3545;
    color: white;
}

.add-tag-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-tag-form input[type="text"] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.add-tag-form input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.add-tag-form button {
    padding: 0.5rem 1rem;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.add-tag-form button:hover {
    background: #218838;
}

/* Playlist Styling */
.playlist-container { max-width: 980px; margin: 0 auto; padding: 2rem; }

.playlist-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #007bff;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.empty-message {
    text-align: center;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.empty-message h3 {
    color: #6c757d;
    margin-bottom: 1rem;
}

.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 1rem;
}

.btn-primary:hover {
    background: #0056b3;
}

.global-tag-selector {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.global-tag-selector label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.global-tag-selector select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
}

.playlist-songs {
    margin-bottom: 2rem;
}

.set-header{border:1px solid #cbd5e1;background:#f1f5f9;border-radius:6px;margin:.6rem 0;padding:.4rem .6rem}
.set-header .set-title{font-weight:700;color:#0f172a}

.playlist-row{display:grid;grid-template-columns:48px 36px minmax(120px,1fr) minmax(140px,180px) 48px 72px 40px;gap:.5rem;align-items:center}
.playlist-head{position:sticky;top:0;z-index:5;font-weight:700;color:#334155;padding:.5rem .75rem;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;margin-bottom:.5rem;backdrop-filter:saturate(140%) blur(4px)}
.playlist-song{display:grid;grid-template-columns:48px 36px minmax(120px,1fr) minmax(140px,180px) 48px 72px 40px;gap:.5rem;align-items:center;padding:.55rem .75rem;margin-bottom:.45rem;background:#fff;border:1px solid #dee2e6;border-radius:8px;transition:all .2s ease;min-height:52px}

.playlist-song:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.col-num{ text-align:center; font-weight:700; color:#64748b;font-variant-numeric:tabular-nums }
.col-play .player-btn.mini{width:34px;height:34px;padding:0;border-radius:50%;font-size:.95rem;background:#e2e8f0;color:#334155}
.col-play .player-btn.mini:hover{background:#cbd5e1}
.col-duration{font-variant-numeric:tabular-nums;text-align:right;color:#334155;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;gap:2px}
.col-duration .dur-mp3{font-weight:600;color:#334155}
.col-duration .dur-song{font-size:11px;color:#94a3b8}
.set-header .set-duration .dur-mp3{font-weight:700}
.col-dl{text-align:center}
.song-title{font-weight:700;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.song-tag-selector{margin:0;min-width:0}
.song-tag-selector select{padding:.4rem .5rem;border:1px solid #ced4da;border-radius:6px;width:100%;max-width:100%;font-size:13px}
.song-download-btn{width:34px;height:34px;padding:0;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#334155;cursor:pointer;font-size:15px;line-height:1}
.song-download-btn:hover:not(:disabled){background:#f1f5f9;border-color:#cbd5e1}
.song-download-btn:disabled{opacity:.35;cursor:not-allowed}
.playlist-download-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 1rem;padding:12px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}
.playlist-download-field{display:flex;flex-direction:column;gap:4px;min-width:160px}
.playlist-download-field label{font-size:12px;font-weight:600;color:#64748b}
.playlist-download-field select{height:36px}
.playlist-download-actions{margin-left:auto}

.play-song-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.play-song-btn:hover {
    background: #0056b3;
}

.audio-player {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.75rem; /* kleine witruimte boven tag-selectie */
}

.player-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.player-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-btn:hover {
    background: #0056b3;
}

.player-info {
    text-align: center;
}

.player-song-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #495057;
}

.player-song-tag {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    display: inline-block;
    color: white;
}

.player-progress {
    margin-top: 1rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width 0.1s ease;
}

.time-display {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Playlist Link */
.playlist-link {
    display: inline-block;
    padding: 0.5rem;
    font-size: 1.2rem;
    text-decoration: none;
    color: #007bff;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.playlist-link:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Artist/Title display helpers in playlist */
.t-lg{font-size:1em; font-weight:inherit; font-family:inherit;}
.t-md{font-size:.95em; font-weight:inherit; font-family:inherit;}
.a-sm{font-size:.85em; font-weight:inherit; font-family:inherit;}
.a-md{font-size:.95em; font-weight:inherit; font-family:inherit;}
.sep{color:#94a3b8; margin:0 .25rem;}
.muted{color:#64748b;}

/* SongEdit page */
.songedit-container{max-width:1100px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1.2rem}
.songedit-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem}
.songedit-head,.songedit-row{display:grid;grid-template-columns:110px 1.8fr 1fr 8ch 8ch 8ch 1fr 32px 54px 40px;gap:.5rem;align-items:center}
.songedit-row.mp3-only{grid-template-columns:1fr 4fr 1fr 10fr !important;align-items:flex-start}
.songedit-row.mp3-only .col-title,.songedit-row.mp3-only .col-time{align-self:start}
.songedit-row.mp3-only .col-mp3stack{align-self:start}
.songedit-row.mp3-only .col-mp3stack{margin-top:0}
.songedit-row.mp3-only .col-actions,
.songedit-row.mp3-only .col-title,
.songedit-row.mp3-only .col-time{align-self:start}
.songedit-head.mp3-head-mode{display:grid;grid-template-columns:1fr 4fr 1fr 10fr;align-items:flex-start}
.songedit-head.mp3-head-mode{display:grid;grid-template-columns:1fr 4fr 1fr 10fr}
.mp3-head-grid{display:grid;grid-template-columns:12px 0.9fr 42px 36px 50px 100px 28px 28px;gap:.5rem;align-items:center}
/* Reset fine alignment: nieuwe kolombreedtes */
.mp3-head-grid span:nth-child(2){margin-left:0}
.mp3-head-grid span:nth-child(3){padding-left:0}
.mp3-head-grid span:nth-child(4){padding-left:0}
.songedit-row.mp3-only .col-artist,.songedit-row.mp3-only .col-bpm,.songedit-row.mp3-only .col-key,.songedit-row.mp3-only .col-tags,.songedit-row.mp3-only .col-vis,.songedit-row.mp3-only .col-mp3,.songedit-row.mp3-only .col-del{display:none}
.songedit-row.mp3-only .col-mp3stack{display:block; grid-column:4 / -1}
.songedit-row.mp3-only .col-mp3stack .mp3-list{position:relative}
.songedit-row.mp3-only .col-mp3stack .mp3-row{position:relative}
.mp3-list{display:flex;flex-direction:column;gap:.25rem;margin-left:0}
.mp3-row{display:grid;grid-template-columns:12px 0.9fr 42px 36px 50px 100px 28px 28px;align-items:center;gap:.5rem;border-bottom:1px dashed #e2e8f0;padding:.2rem 0}
.mp3-row > .mp3-offset{grid-column:1}
.mp3-name{width:100%;box-sizing:border-box;min-height:27px;height:27px;padding:0 .5rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;font-family:Arial, sans-serif;font-size:13.3333px;line-height:27px;color:#111;display:inline-block;background-image:linear-gradient(to right, #dbeafe 0 var(--prog,0%), transparent var(--prog,0%));background-repeat:no-repeat;background-size:100% 100%}
.mp3-name.seekable{cursor:pointer}
.mp3-row .mp3-name{grid-column:2}
.se-play-btn{grid-column:3;background:#f1f5f9;color:#374151;border:1px solid #e5e7eb;width:36px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.fav-btn{grid-column:4;background:#fff;color:#9ca3af;border:1px solid #e5e7eb;width:28px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.fav-btn.active{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.mp3-duration{grid-column:5;text-align:left;min-height:27px;height:27px;display:flex;align-items:center;justify-content:flex-start;background:#fff;border:1px solid #cbd5e1;border-radius:4px;padding:0 .5rem;box-sizing:border-box;font-family:Arial, sans-serif;font-size:13.3333px;line-height:27px;color:#111}
.mp3-row .tag-chip{grid-column:6}
.mp3-move-btn{grid-column:7;background:transparent;border:none;color:#64748b;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;border-radius:6px}
.mp3-move-btn:hover{color:#0A84FF;background:#eff6ff}
.mp3-delete-btn{grid-column:8}

/* Align MP3 part vertically with left part */
.songedit-row.mp3-only .col-mp3stack{display:flex;align-items:flex-start;align-self:start}
.songedit-row.mp3-only .col-mp3stack .mp3-list{margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.songedit-row.mp3-only .mp3-row{padding:0;min-height:27px}
.mp3-duration{height:27px;display:flex;align-items:center;justify-content:flex-start;color:#334155;font-variant-numeric:tabular-nums}
.mp3-tag-select{min-width:96px}
.tag-chip{display:inline-block;height:27px;line-height:27px;box-sizing:border-box;border-radius:4px;padding:0 .5rem;border:1px solid #cbd5e1;color:#111;background:#fff;font-family:Arial, sans-serif;font-size:13.3333px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-chip.clickable{cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.05) inset}
.mp3-actions{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.mp3-actions .mp3-tag-select{min-width:180px}
.tag-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.2);margin-right:.3rem}
.songedit-head{font-weight:400;color:#111;margin-bottom:.5rem;padding:.35rem;border:1px solid transparent;border-radius:6px}
.songedit-head .col-mp3stack{display:none}
.songedit-list{display:flex;flex-direction:column;gap:.4rem}
.songedit-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:.35rem}
.songedit-row input{width:100%;box-sizing:border-box;height:27px;padding:0 .5rem;border:1px solid #cbd5e1;border-radius:4px}
.songedit-row .btn-primary{height:27px;min-height:27px;line-height:27px;padding:0 .6rem;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:13px;box-shadow:none;width:auto;margin:0;box-sizing:border-box}
/* hard override any global spacing on primary buttons inside SongEdit */
.songedit-section .btn-primary{margin:0 !important;padding:0 .6rem !important;height:27px !important;line-height:27px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:4px !important}
.songedit-row .col-actions{display:flex;align-items:center;justify-content:center}
.songedit-row.saved{outline:2px solid #22c55e}
.mp3-badge{display:inline-block;min-width:30px;text-align:center;background:#e2e8f0;border-radius:999px;padding:.2rem .5rem;color:#334155}
/* constrain small fields to ~4 characters */
.songedit-row .col-time input,.songedit-row .col-bpm input,.songedit-row .col-key input{width:8ch}
/* left align tiny columns to match input start */
.songedit-head .col-time,.songedit-head .col-bpm,.songedit-head .col-key,.songedit-head .col-mp3,.songedit-row .col-time,.songedit-row .col-bpm,.songedit-row .col-key,.songedit-row .col-mp3{text-align:left}
/* add same left inset as inputs so header text aligns with input text */
.songedit-head .col-title,.songedit-head .col-artist,.songedit-head .col-time,.songedit-head .col-bpm,.songedit-head .col-key,.songedit-head .col-tags{padding-left:.5rem}
/* flags in tags column */
.songedit-row .col-tags{position:relative}
.flag-btn{border:1px solid #cbd5e1;border-radius:4px;background:#fff;color:#334155;height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;font-size:.9rem}
.flag-btn:hover{background:#f8fafc}
.vis-btn.muted{opacity:.6}
/* tools */
.songedit-tools{display:flex;justify-content:flex-start;gap:.5rem;margin-bottom:.35rem}
.ai-panel{display:flex;align-items:center;gap:.5rem;margin-left:.5rem}
.ai-status{font-size:.85em;color:#64748b}
.ai-topbar{border:1px solid #e2e8f0;background:#f8fafc;border-radius:6px;padding:.15rem .3rem;margin:.25rem 0;display:flex;justify-content:flex-start;align-items:center}
.ai-topbar .btn-primary{height:24px;line-height:24px;padding:0 .6rem;font-size:13px}
.ai-topbar .ai-status{font-size:.8em;max-width:48ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songedit-tools .btn-primary{height:27px;line-height:27px;padding:0 .7rem}
/* delete button */
.del-btn{width:28px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:4px;background:#fff;color:#dc2626}
.del-btn:hover{background:#fee2e2}
/* enable/disable save */
.songedit-row .btn-primary:disabled{background:#e2e8f0;color:#64748b;cursor:default}
/* generic disabled look for primary buttons (e.g., AI buttons) */
.btn-primary:disabled{background:#e2e8f0 !important;color:#64748b !important;cursor:default !important}
/* AI suggestion styling */
.ai-suggested{color:#1d4ed8}
.ai-old{color:#64748b;font-size:.8em;margin-top:.2rem}
.ai-badge{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:10px;padding:0 .4rem;font-size:.75em;margin-left:.3rem}

/* Autofill panel */
#autofill-section{border-color:#cbd5e1;background:#f8fafc}
.autofill-controls{display:flex;flex-direction:column;gap:.5rem}
.autofill-controls textarea{width:100%;min-height:120px;resize:vertical;border:1px solid #cbd5e1;border-radius:6px;padding:.5rem;font:inherit}
.autofill-options{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;color:#334155}
.autofill-buttons{display:flex;gap:.5rem;align-items:center}
.autofill-preview{margin-top:.5rem;border:1px dashed #cbd5e1;border-radius:6px;padding:.5rem;background:#fff}
.autofill-table{width:100%;border-collapse:separate;border-spacing:0 .35rem}
.autofill-table th,.autofill-table td{padding:.4rem .5rem;border:1px solid #e2e8f0;background:#fff}
.autofill-table th{background:#f1f5f9;text-align:left;font-weight:600;color:#334155}
.af-warn{color:#b45309}
.af-bad{color:#b91c1c}
.af-muted{color:#64748b}
/* make all text inside skip rows gray */
.autofill-table tr.af-muted td{color:#64748b}
.autofill-table tr.af-muted input{color:#64748b}
.autofill-table tr.af-muted input::placeholder{color:#94a3b8}

/* MP3 version rating (shared picker + playlist rows) */
.mp3-rating-cell{display:inline-flex;align-items:center;max-width:100%}
.mp3-rating-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:28px;padding:0 .15rem;
  font-size:16px;line-height:1;letter-spacing:.5px;
  background:transparent;border:1px solid transparent;border-radius:6px;
  cursor:pointer;
}
.mp3-rating-btn:hover{border-color:#e5e7eb;background:#f8fafc}
.mp3-rating-btn.mp3-rating-empty{color:#94a3b8}
.mp3-rating-btn.mp3-rating-filled{color:#d97706}
.playlist-row .col-rating{text-align:left;overflow:hidden}
#playlistRaterSelect.rater-required{outline:2px solid #f59e0b;outline-offset:2px}
.mp3-rating-picker{
  position:fixed;z-index:10000;
  display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 6px 5px;
  background:#1f2937;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  white-space:nowrap;
}
.mp3-rating-picker-label{font-size:12px;font-weight:700;color:#fbbf24;text-align:center;padding:0 4px 2px;line-height:1.2}
.mp3-rating-picker-options{display:flex;gap:4px}
.mp3-rating-picker button{
  min-width:40px;min-height:36px;padding:0 6px;border:none;border-radius:8px;
  background:#374151;color:#fbbf24;font-size:17px;letter-spacing:.5px;cursor:pointer;
}
.mp3-rating-picker button[data-rating="0"]{color:#9ca3af;font-size:18px}
.mp3-rating-picker button.active{background:#1DB954;color:#111}
.mp3-rating-picker button:hover{background:#4b5563}