/* ───────────────────────────────────────────────────────────────
   0) Micro-reset
──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input,select{font:inherit}
img{max-width:100%;display:block}

/* ───────────────────────────────────────────────────────────────
   1) Design-tokens
──────────────────────────────────────────────────────────────── */
:root{
  --clr-bg        : #ffffff;
  --clr-text      : #151515;
  --clr-text-sec  : #444;
  --clr-text-head : #6d6d6d;
  --clr-primary   : #0070f3;
  --clr-border    : #c8c8c8;
  --clr-row-sep   : #e1e1e1;
  --clr-completed : #f5fff5;

  --wrapper-max   : 1400px;

  --fz-xs         : 0.72rem; /* ≈ 11.5 px */
  --ff-base       : -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ───────────────────────────────────────────────────────────────
   2) Basis-opmaak
──────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-base);
  font-size:15px;
  line-height:1.4;
  color:var(--clr-text);
  background:var(--clr-bg);
}

.page-wrapper{
  width:92%;
  max-width:var(--wrapper-max);
  margin:24px auto 80px;
}

/* ───────────────────────────────────────────────────────────────
   3) Sticky top-nav
──────────────────────────────────────────────────────────────── */
.top-nav{
  position:sticky;top:0;z-index:100;
  height:48px;
  background:#f3f3f3;
  border-bottom:1px solid #dadada;
}
.nav-wrapper{
  width:92%;max-width:var(--wrapper-max);
  margin:0 auto;
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{font-size:17px;font-weight:600;}
.main-menu a{
  font-size:15px;color:#555;text-decoration:none;margin-left:24px;
  transition:color .15s;
}
.main-menu a:hover,
.main-menu a.active{color:#111}

.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:#555;margin:4px 0}

/* ───────────────────────────────────────────────────────────────
   4) Tabel – layout & rijen
──────────────────────────────────────────────────────────────── */
#eventBandTable{
  width:75%;
  border-collapse:collapse;
  table-layout:fixed;
}
#eventBandTable thead th{
  font-size:var(--fz-xs);font-weight:700;letter-spacing:.04em;
  color:var(--clr-text-head);
  text-align:left;padding:0 6px 12px 0;
  border-bottom:1px solid var(--clr-row-sep);
}
#eventBandTable tbody td{
  padding:18px 6px 16px 0;
  vertical-align:top;
  border-bottom:1px solid var(--clr-row-sep);
}
#eventBandTable tbody tr.completed{
  background:var(--clr-completed);
  opacity:.8;
}

/* vaste breedte linker­kolom desktop */
#eventBandTable tbody td.left-block{width:200px}

/* ───────────────────────────────────────────────────────────────
   5) Linkerblok  – datum / Poster- & Film-knoppen / locatie
──────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────
   Linkerblok – datum | Poster-/-Film knoppen
──────────────────────────────────────────────────────────────── */

/* flex-rij: datumcluster + knopcluster */
.date-btn-row{
  display:grid;                       /* ipv flex */
  grid-template-columns: 120px auto;   /* 90 px = kolombreedte datum+jaar  */
  align-items:flex-start;
  column-gap:28px;                    /* identieke ruimte als voorheen   */
}

/* datumcluster (stack) */
.date-stack{display:flex;flex-direction:column}
.date{font:700 24px/1.2 var(--ff-base);color:var(--clr-text)}
.year{font:400 13px/1.2 var(--ff-base);color:var(--clr-text);margin-top:2px}

/* knopcluster (horizontaal) */
.status-wrap{display:flex;gap:12px}

/* knoppen zelf */
.status-button{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 14px/1 var(--ff-base);
  height:45px;width:100px;padding:0 12px;
  border:1px solid var(--clr-border);border-radius:4px;
  background:#fff;cursor:pointer;
  transition:background .15s,color .15s,opacity .15s;
}
/* -----------------------------------------------------------
   Geselecteerde knop – zelfde lichte groen, máár rand zichtbaar
----------------------------------------------------------- */
.status-button.done{
  background:var(--clr-completed);
  color:var(--clr-text);
  border:1px solid var(--clr-border);
}

/* <-- voeg HIERNA dit toe */
tr.completed .status-button.done{
  border-color:#888;
}

/* optioneel: korte flits tijdens indrukken */
.status-button:not(.done):active{
  background:#f6f6f6;
}
/* 2. Locatie en artiesten – dichter op datum/knoppen */
.locatie{
  margin-top:8px;                   /* halve witruimte                    */
  font:700 17px/1.3 var(--ff-base);
  color:var(--clr-text);
  max-width:500px;                  /* vaste breedte → wrapt indien te lang*/
}
.artiesten{
  margin-top:2px;
  font:300 13px/1.3 var(--ff-base);
  color:var(--clr-text-sec);
  max-width:500px;
}



/* ───────────────────────────────────────────────────────────────
   6) Rechterblok – muziekkeuze
──────────────────────────────────────────────────────────────── */
.band-row-container{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:nowrap;overflow-x:visible
}
/* invoerkaart */
.band-block{
  min-width:170px;
  background:transparent;
  border:none;
  padding:0;
  display:flex;
  flex-direction:column;
}
.band-block select,
.band-block input{height:28px;font:400 14px/1.2 var(--ff-base);
  border:1px solid var(--clr-border);border-radius:4px;padding:0 8px;margin-top:6px}
.band-block select:first-child{margin-top:0}

/* pijl ≡ save-trigger */
.arrow-block, .reorder-toggle-btn{
  width:60px;align-self:stretch;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--clr-border);
  border-radius:4px;background:#fff;cursor:pointer;user-select:none
}
.arrow-block{font:700 24px/1 var(--ff-base);color:#555}
.reorder-toggle-btn{font:700 12px/1.25 var(--ff-base);text-align:center}
.reorder-btn-on{background:var(--clr-primary);color:#fff;border-color:var(--clr-primary)}
.reorder-btn-off{background:#fafafa}

/* kaarten */
.readonly-block{min-width:195px;min-height:100px;position:relative;
  border:1px solid var(--clr-border);border-radius:4px;background:#fff;
  padding:10px 12px 12px;display:flex;flex-direction:column}
.rb-band{font:700 14px/1.25 var(--ff-base)}
.rb-song{font:400 13px/1.25 var(--ff-base);margin-top:2px}
.rb-comment{font:400 11px/1.25 var(--ff-base);margin-top:2px;color:#777}
.trash-btn{position:absolute;top:6px;right:6px;background:none;border:0;
  font-size:18px;color:#999;cursor:pointer;transition:color .15s}
.trash-btn:hover{color:#c00}

/* completed → alleen kaarten & invoer groen */
tr.completed .readonly-block,
tr.completed .band-block{background:var(--clr-completed);opacity:.8}

/* extra afstand ( +2 px ) tussen select / input velden               */
.band-block select + select,
.band-block input{margin-top:8px;}        /* was 6 px */


/* kleine prullenbak rechts-boven (blijft)                           */
.trash-btn{
  position:absolute;            /* zodat ’ie in de hoek plakt  */
  top:6px; right:6px;
  background:none; border:0;
  font-size:18px; color:#999;
  cursor:pointer; transition:color .15s;
}
.trash-btn:hover{ color:#c00; }


/* ───────────────────────────────────────────────────────────────
   7) Footer ­– beheerdersbalk
──────────────────────────────────────────────────────────────── */
footer.beheerbalk{border-top:2px solid #c0c0c0;padding:18px 0}
.beheer-wrapper{
  width:92%;max-width:var(--wrapper-max);
  margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;font-size:12.5px
}
.beheer-col a{color:var(--clr-primary);text-decoration:none;margin-right:12px}
.beheer-col a:hover{text-decoration:underline}

/* ───────────────────────────────────────────────────────────────
   8) Responsiviteit
──────────────────────────────────────────────────────────────── */
/* tablets <992 px: linker­kolom wordt flexibel */
@media(max-width:991.98px){
  #eventBandTable tbody td.left-block{
    width:5px;     /* b.v. 40 px verder naar rechts */
}
}
/* mobiel <600 px: hamburger, verticale stacking kaarten */
@media(max-width:599.98px){
  .main-menu{display:none}
  .hamburger{display:block}
  .band-row-container{flex-wrap:wrap;overflow-x:visible}
  .band-block,
  .readonly-block{min-width:100%}
  .arrow-block,.shuffle-block{display:none}
}

/* ---- Debug-console ------------------------------------------------ */
.debug-console{
  white-space:pre-wrap;
  font-family:monospace;
  font-size:12px;
  line-height:1.35;
  background:#f9f9f9;
  border:1px solid #ccc;
  padding:6px 8px;
  margin-top:24px;
  max-height:220px;
  overflow:auto;
}


/* ─────────────────────────────────────────────────────
   Knoppenrij boven de tabel
─────────────────────────────────────────────────────── */
.table-controls{
  display:flex;
  gap:16px;
  justify-content:flex-end;
  margin-bottom:12px;           /* ruimte boven de tabel-head  */
}

.table-btn{
  min-width:180px;
  height:34px;
  padding:0 16px;
  font:600 14px/1 var(--ff-base);
  border:1px solid var(--clr-border);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  transition:background .15s, color .15s, opacity .15s;
}
.table-btn:hover{opacity:.85;}

/* plus-icoon toont ‘+’ */
/* dashboard.css */
/* …boven je andere button‐definities…  */
/* dashboard.css */

/* vervang je oude .plus-button definitie door: */
.plus-button{
    border-radius: .5rem;                /* zelfde hoek */
    border: 2px dashed var(--accent);    /* lijnstijl mag je aanpassen */
    background: transparent;
    width: 120px;                        /* zelfde maat als de andere */
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.plus-button .big   { font-size: 1.5rem; line-height: 1; }
.plus-button small  { font-size: .7rem;  line-height: 1; }



/* dashboard.css */
.status-button{
    position: relative;   /* maakt absolute children mogelijk */
    /* je bestaande regels… */
}

.status-button .close{
    position: absolute;
    top: -6px;            /* een klein beetje buiten de hoek */
    right: -6px;
    background: #fff;     /* witte cirkel – valt op bij groene “done” */
    border: 1px solid #999;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    color: #666;
}

/* optioneel hover-effect */
.status-button .close:hover{
    background: #e33;
    border-color:#e33;
    color:#fff;
}

/* algemene status-knoppen (Poster, Film, Shorts) */
.status-button,
.plus-button {
  transform: scale(0.9);     /* verkleint alles: tekst & padding */
  transform-origin: center;  /* centreert de schaal */
}