/* ===========================================================================
   Elements Sync — dashboard.

   Richting: "editorial control room". Dit is een sale-day-instrument waar je
   lang naar kijkt terwijl er geld binnenkomt, dus rust en precisie boven
   spektakel — maar het staat bij een agency waar design telt, dus geen
   standaard bootstrap-look.

   - Warm botpapier in plaats van steriel wit; de achtergrond heeft textuur.
   - Diepte uit gelaagde schaduwen + een lichtrand bovenop, niet uit één
     platte box-shadow.
   - Fraunces (display-serif) voor koppen en cijfers, Archivo voor UI-tekst,
     JetBrains Mono voor referenties en bedragen.
   - Petrol als merkaccent: botst met geen enkele statuskleur (groen, rood,
     amber, blauw), en past bij een festival dat "Elements" heet.

   Fonts staan lokaal in assets/fonts/ — een dashboard dat op sale-day van
   Google's CDN afhangt, wil je niet. Geen build-stap, platte CSS.
   =========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces.woff2') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/jetbrains-mono.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  /* --- papier en inkt ------------------------------------------------ */
  --paper:#f6f2ec;          /* pagina */
  --paper-deep:#efe9e0;     /* ingezonken vlakken */
  --card:#fffdfa;           /* opstaande vlakken */
  --ink:#171310;            /* tekst */
  --ink-soft:#5f574e;       /* secundaire tekst */
  /* Was #938a7e en dat haalt 3,35:1 op de kaart — onder de WCAG-norm van 4,5,
     terwijl juist deze kleur alle labels, tabelkoppen en onderschriften draagt.
     Nu 5,5:1. Het scheelt ook gewoon leesbaarheid op een scherm in een kantoor
     met de zon erop. */
  --ink-faint:#6f665c;      /* labels, placeholders — 5,5:1 op --card */
  /* Randen op 1,38 tegen de kaart waren er nauwelijks; op 1,56 leest een tabel
     als een tabel en een kaart als een kaart. */
  --rule:#d8ccb8;           /* hairlines */
  --rule-soft:#e8dfd2;

  /* --- accent -------------------------------------------------------- */
  --petrol:#0d5450;
  --petrol-deep:#0a423f;
  --petrol-tint:#e3efed;
  --on-petrol:#f6f2ec;
  --ember:#b8501f;          /* spaarzaam, voor nadruk */
  --ember-tint:#fbeee6;

  /* --- status -------------------------------------------------------- */
  --ok:#2f6b41;      --ok-bg:#eaf3ec;      --ok-line:#c3ddca;
  --bad:#a32b25;     --bad-bg:#fbeceb;     --bad-line:#eec9c6;
  --warn:#8a5a10;    --warn-bg:#fbf1df;    --warn-line:#ecd9ae;
  --info:#1f4e79;    --info-bg:#e9f0f7;    --info-line:#c4d8ea;

  --r:10px;
  --r-lg:14px;

  /* Gelaagde schaduw + lichtrand bovenop: dát haalt het platte eruit. */
  --lift:
    0 1px 1px rgba(23,19,16,.04),
    0 3px 6px -2px rgba(23,19,16,.05),
    0 10px 24px -8px rgba(23,19,16,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  --lift-hi:
    0 2px 3px rgba(23,19,16,.05),
    0 8px 16px -4px rgba(23,19,16,.07),
    0 24px 48px -12px rgba(23,19,16,.11),
    inset 0 1px 0 rgba(255,255,255,.95);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:400 14.5px/1.6 'Archivo',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Twee zachte lichtbronnen + fijne ruis. Zonder textuur oogt een licht
     dashboard al snel als een leeg Word-document. */
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(13,84,80,.055), transparent 60%),
    radial-gradient(900px 500px at 96% 0%, rgba(184,80,31,.045), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed;
}

a{color:inherit}

code,.mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.855em;
  font-variant-ligatures:none;
}
code{
  background:var(--paper-deep);
  border:1px solid var(--rule-soft);
  padding:.1em .4em;
  border-radius:5px;
  color:var(--ink-soft);
}
pre{
  white-space:pre-wrap;word-break:break-word;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.76rem;line-height:1.55;color:var(--ink-soft);
  margin:.6rem 0 0;padding:.75rem .85rem;
  background:var(--paper-deep);border:1px solid var(--rule-soft);
  border-radius:var(--r);
}

/* --- typografische toon ---------------------------------------------- */
h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 40,'SOFT' 0,'WONK' 1;
  font-weight:600;
  letter-spacing:-.012em;
  margin:0;
}

/* Kleine labels in kapitalen met lucht ertussen — leest als een instrument. */
.eyebrow,.card-h,th{
  font-family:'Archivo',sans-serif;
  font-size:.685rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============================================================== login === */
.login-body{
  display:grid;place-items:center;min-height:100vh;padding:1.5rem;
}
.login-card{
  background:var(--card);
  padding:2.25rem 2rem;
  border-radius:var(--r-lg);
  width:min(400px,100%);
  border:1px solid var(--rule);
  box-shadow:var(--lift-hi);
  display:grid;gap:1.1rem;
  position:relative;
  animation:rise .5s cubic-bezier(.2,.7,.3,1) both;
}
/* Dun petrolstreepje bovenaan de kaart — één detail dat het merk vasthoudt. */
.login-card::before{
  content:'';position:absolute;inset:0 auto auto 0;height:3px;width:100%;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--petrol),var(--ember) 85%);
  opacity:.9;
}
.login-card h1{font-size:1.6rem;font-variation-settings:'opsz' 60,'WONK' 1}
.login-card label{display:grid;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.login-card input{width:100%}
.login-logo{height:1.6rem;margin-bottom:.15rem}

/* ============================================================= chrome === */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:.85rem 1.75rem;
  background:rgba(255,253,250,.82);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:600;letter-spacing:-.01em}
.pb-logo{height:1.05rem;width:auto;filter:invert(1);opacity:.82;display:block}
/* Het Elements-logo is wit met een regenboogstreep, gemaakt voor de donkere
   fan-kant. `invert` zou die streep in zijn complementaire kleuren zetten;
   `brightness(0)` maakt er één inktkleur van, wat op botpapier wél klopt. */
.el-logo{height:1.7rem;width:auto;filter:brightness(0);opacity:.86;display:block}
.el-logo.login-logo{height:2.6rem;margin-bottom:.35rem}
.brand-sep{width:1px;height:1.1rem;background:var(--rule);display:block}
.tag{
  color:var(--ink-faint);font-weight:400;font-size:.75rem;margin-left:.45rem;
  letter-spacing:.02em;
}

.top nav{display:flex;gap:.15rem;flex-wrap:wrap;align-items:center;flex:1}
.top nav a{
  position:relative;
  padding:.45rem .8rem;
  text-decoration:none;font-size:.83rem;font-weight:500;
  color:var(--ink-soft);border-radius:7px;
  transition:color .18s ease,background .18s ease;
}
.top nav a:hover:not(.on){background:var(--paper-deep);color:var(--ink)}
.top nav a.on{color:var(--petrol);font-weight:600}
/* Actieve tab als onderstreping in plaats van een gevulde pil: rustiger,
   en het accent blijft daarmee voorbehouden aan knoppen. */
.top nav a.on::after{
  content:'';position:absolute;left:.8rem;right:.8rem;bottom:-.86rem;height:2px;
  background:var(--petrol);border-radius:2px 2px 0 0;
  animation:slide-in .24s cubic-bezier(.2,.7,.3,1) both;
}
.top nav a[href$="settings"]{margin-left:auto}
.top nav a.out{color:var(--ink-faint)}

main{
  padding:1.85rem 1.75rem 4rem;
  max-width:none;margin:0 auto;
  display:grid;gap:1.15rem;
}
@media (min-width:2000px){ main{max-width:1900px} }

/* ============================================================== cards === */
.grid{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:1.15rem 1.25rem 1.25rem;
  box-shadow:var(--lift);
  position:relative;
  transition:box-shadow .25s ease,transform .25s ease;
}
.card:hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}

.card-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem}

/* Het getal is het hoofdpunt van een kaart — dus in de display-serif. */
.big{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 72,'WONK' 1;
  font-weight:500;
  font-size:2.35rem;line-height:1.05;
  letter-spacing:-.02em;
  margin-top:.5rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.card .muted{font-size:.78rem;margin-top:.3rem}

/* Statusstip met zachte halo — leesbaarder dan een kale punt. */
.dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;
  background:var(--ink-faint);
  box-shadow:0 0 0 3px rgba(147,138,126,.16);
}
.status-ok  .dot{background:var(--ok); box-shadow:0 0 0 3px rgba(47,107,65,.16)}
.status-err .dot{background:var(--bad);box-shadow:0 0 0 3px rgba(163,43,37,.16)}
.status-off .dot{background:#c3b9ab;box-shadow:0 0 0 3px rgba(195,185,171,.18)}

/* Randkleur subtiel, plus een gekleurd streepje links: statusinfo zonder
   dat de hele kaart schreeuwt. */
.status-ok,.status-err{position:relative;overflow:hidden}
.status-ok::before,.status-err::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
}
.status-ok::before{background:var(--ok)}
.status-err::before{background:var(--bad)}
.status-ok{border-color:var(--ok-line)}
.status-err{border-color:var(--bad-line)}

/* ============================================================= panels === */
.panel{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:1.4rem 1.5rem 1.5rem;
  box-shadow:var(--lift);
  overflow-x:auto;
}
.panel h2{
  font-size:1.14rem;
  font-variation-settings:'opsz' 48,'WONK' 1;
  margin-bottom:.15rem;
}
/* Introzin direct onder een kop mag dichterbij staan. */
.panel h2 + .muted{margin-top:.1rem}
.panel h2 .muted{
  font-family:'Archivo',sans-serif;font-size:.82rem;font-weight:400;
  letter-spacing:0;
}

.muted{color:var(--ink-soft)}
.small{font-size:.79rem}
.err{color:var(--bad)}
.req{color:var(--ember);font-size:.7rem;font-weight:600;letter-spacing:.04em}
.nowrap{white-space:nowrap}
.row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:.85rem}
.row.between{justify-content:space-between;align-items:center;gap:1rem}
/* De kop-met-zoekbalk staat bovenaan een paneel — geen extra marge, en de
   twee helften netjes op één lijn. */
.panel > .row.between:first-child{margin-top:0}
.row.between > .row{margin-top:0}
.row.between h2{margin-bottom:0}
.check{font-size:.83rem;color:var(--ink-soft);display:flex;gap:.45rem;align-items:center}
.status-refresh{margin-top:-.2rem;justify-content:flex-end}
/* Verticale veldenstapel. Stond wel in de markup van de admin (het formulier
   voor de segmentregels) maar nergens in deze stylesheet, dus viel het terug
   op de standaardmarges van de browser — daarom liep de afstand daar uit de
   pas met de rest. */
.stack{display:grid;gap:1rem}
.stack > *{margin-top:0}
/* Code plus kopieerknop, zelfde idioom als op de ambassadeurskant. */
.voucher-cell{display:inline-flex;align-items:center;gap:.5rem}
.voucher-cell button{height:1.7rem;padding:0 .6rem;font-size:.72rem;flex:0 0 auto}
button.copied{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}



/* =========================================================== controls === */
button{
  font-family:'Archivo',sans-serif;
  background:var(--petrol);
  color:var(--on-petrol);
  border:1px solid var(--petrol-deep);
  border-radius:8px;
  padding:0 1.05rem;height:2.3rem;
  font-weight:600;font-size:.83rem;letter-spacing:.01em;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(23,19,16,.12), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease;
}
button:hover{background:var(--petrol-deep);box-shadow:0 3px 8px -2px rgba(13,84,80,.35), inset 0 1px 0 rgba(255,255,255,.18)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

button.ghost{
  background:var(--card);color:var(--ink);border-color:var(--rule);
  box-shadow:0 1px 2px rgba(23,19,16,.05), inset 0 1px 0 rgba(255,255,255,.9);
}
button.ghost:hover{background:var(--paper-deep);border-color:var(--ink-faint);box-shadow:var(--lift)}
button.small{height:2rem;padding:0 .8rem;font-size:.78rem}

input,select{
  font-family:'Archivo',sans-serif;
  height:2.3rem;padding:0 .75rem;
  border-radius:8px;
  border:1px solid var(--rule);
  background:var(--card);color:var(--ink);
  font-size:.85rem;
  box-shadow:inset 0 1px 2px rgba(23,19,16,.045);
  transition:border-color .18s ease,box-shadow .18s ease;
}
input:focus,select:focus{
  outline:none;border-color:var(--petrol);
  box-shadow:0 0 0 3px var(--petrol-tint), inset 0 1px 2px rgba(23,19,16,.04);
}
input::placeholder{color:var(--ink-faint)}
input[type=file]{padding:.42rem .6rem;height:auto;background:var(--paper-deep)}

/* ============================================================= tables === */
table{width:100%;border-collapse:collapse;margin-top:1.15rem;font-size:.85rem}
.data{min-width:900px}

th{
  text-align:left;padding:.6rem .75rem;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
  position:sticky;top:0;z-index:1;
  background:var(--card);
}
td{
  padding:.72rem .75rem;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  font-variant-numeric:tabular-nums;
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s ease}
tbody tr:hover td{background:var(--paper-deep)}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--petrol-tint)}
.data td.clip{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Referenties en bedragen in mono: scant veel sneller in een lange lijst. */
.data td code{background:none;border:0;padding:0;color:var(--ink-soft)}

.kv{min-width:0;font-size:.86rem}
.kv td{border-bottom:1px solid var(--rule-soft);padding:.6rem .1rem}
.kv td:first-child{color:var(--ink-faint);width:210px;font-weight:500}
.kv tr:last-child td{border-bottom:0}

/* ============================================================= pills ==== */
.pill{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.16rem .55rem;
  border-radius:999px;
  font-size:.71rem;font-weight:600;letter-spacing:.02em;
  line-height:1.35;
  text-decoration:none;
  border:1px solid var(--rule);
  background:var(--paper-deep);color:var(--ink-soft);
}
.pill.g{background:var(--ok-bg);  color:var(--ok);  border-color:var(--ok-line)}
.pill.r{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.pill.y{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.b{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.pill.on{background:var(--petrol);color:var(--on-petrol);border-color:var(--petrol-deep)}
a.pill{transition:transform .14s ease,box-shadow .14s ease}
a.pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px -1px rgba(23,19,16,.14)}

/* ============================================================ alerts ==== */
.alert-ok,.alert-err,.alert-warn{
  padding:.8rem 1rem .8rem 1.05rem;
  border-radius:var(--r);
  font-size:.85rem;
  border:1px solid;
  position:relative;
  box-shadow:var(--lift);
  animation:rise .4s cubic-bezier(.2,.7,.3,1) both;
}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#22492f}
.alert-err{background:var(--bad-bg);border-color:var(--bad-line);color:#7d201c}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#6b460c}
.alert-warn.compact{padding:.55rem .9rem;font-size:.8rem}

.lvl-error td{background:var(--bad-bg)}
details summary{
  cursor:pointer;color:var(--ink-faint);font-size:.77rem;
  padding:.25rem 0;user-select:none;
}
details summary:hover{color:var(--ink)}

/* ============================================================= modal ==== */
.clickable{cursor:pointer}
.modal{
  border:1px solid var(--rule);border-radius:var(--r-lg);padding:0;
  width:min(680px,92vw);max-height:86vh;
  background:var(--card);color:var(--ink);
  box-shadow:0 24px 60px -12px rgba(23,19,16,.3), 0 8px 20px -8px rgba(23,19,16,.2);
  overflow:hidden;
}
/* Alleen open flex worden — anders overschrijft display:flex de display:none
   die een gesloten <dialog> van de browser krijgt. */
.modal[open]{display:flex;flex-direction:column;animation:pop .26s cubic-bezier(.2,.8,.3,1) both}
.modal::backdrop{background:rgba(23,19,16,.42);backdrop-filter:blur(3px)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;border-bottom:1px solid var(--rule);flex:none;
  background:linear-gradient(180deg,var(--card),var(--paper));
}
.modal-head h2{
  font-size:1.06rem;font-variation-settings:'opsz' 44,'WONK' 1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modal-body{padding:.4rem 1.4rem 1.4rem;overflow-y:auto}
.modal-body table{margin-top:0}
.modal-body .kv td:first-child{width:190px}
.modal-body td{word-break:break-word}
.modal-sep{
  padding-top:1.35rem!important;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-faint);border-bottom:0!important;
}
.raw-row td{color:var(--ink-faint);font-size:.79rem}

.btn-link{text-decoration:none;display:inline-block}
.modal-actions{margin-top:0;flex:none}

/* ============================================================ motion ==== */
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.975) translateY(6px)}to{opacity:1;transform:none}}
@keyframes slide-in{from{transform:scaleX(.3);opacity:0}to{transform:none;opacity:1}}

/* Eén rustige, getrapte opkomst bij het laden. Meer beweging dan dit wordt
   irritant op een scherm waar je uren naar kijkt. */
main > *{animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
main > *:nth-child(1){animation-delay:.02s}
main > *:nth-child(2){animation-delay:.06s}
main > *:nth-child(3){animation-delay:.10s}
main > *:nth-child(4){animation-delay:.14s}
main > *:nth-child(5){animation-delay:.18s}
main > *:nth-child(n+6){animation-delay:.22s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media (max-width:640px){
  main{padding:1.15rem 1rem 3rem}
  .top{padding:.7rem 1rem}
  .panel{padding:1.1rem 1.1rem 1.2rem}
  .big{font-size:1.75rem}
}

/* ========================================================== analytics ====
   Grafiekkleuren zijn NIET de UI-accenten. Petrol #0d5450 is als vlak te
   donker en te grijs (valt buiten de lightness-band en onder de chroma-floor);
   deze twee zijn gevalideerd op CVD-scheiding, contrast en chroma. */
:root{
  --c-sales:#159a92;
  --c-carts:#d4692b;
  --c-track:#efe9e0;
}

.stat-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:1.1rem 1.2rem;box-shadow:var(--lift)}
.stat .n{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 72,'WONK' 1;
  font-weight:500;font-size:1.9rem;line-height:1.05;letter-spacing:-.02em;
  margin-top:.3rem;font-variant-numeric:tabular-nums lining-nums}
.stat .sub{color:var(--ink-faint);font-size:.78rem;margin-top:.2rem}

/* --- horizontale balken: magnitude per categorie --- */
.bars{display:grid;gap:.55rem;margin-top:1rem}
.bar-row{display:grid;grid-template-columns:minmax(0,15rem) 1fr auto;gap:.75rem;align-items:center}
.bar-label{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.bar-track{background:var(--c-track);border-radius:4px;height:.65rem;overflow:hidden}
.bar-fill{height:100%;border-radius:0 4px 4px 0;background:var(--c-sales);min-width:2px}
.bar-fill.carts{background:var(--c-carts)}
.bar-val{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- verticale balken: verloop over tijd --- */
.timechart{display:flex;align-items:flex-end;gap:2px;height:9rem;margin-top:1rem;
  padding-bottom:1.4rem;position:relative;overflow-x:auto}
.tc-col{flex:1 0 .6rem;min-width:.6rem;display:flex;flex-direction:column;
  justify-content:flex-end;height:100%;position:relative}
.tc-bar{background:var(--c-sales);border-radius:4px 4px 0 0;min-height:2px;
  transition:opacity .15s}
.tc-bar.carts{background:var(--c-carts)}
.tc-col:hover .tc-bar{opacity:.75}
.tc-col::after{content:attr(data-day);position:absolute;bottom:-1.25rem;left:50%;
  transform:translateX(-50%);font-size:.62rem;color:var(--ink-faint);white-space:nowrap}
/* Alleen elke zoveelste dag labelen, anders lopen ze in elkaar. */
.tc-col:not(.tick)::after{content:''}

.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.85rem;font-size:.79rem;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:.7rem;height:.7rem;border-radius:3px;display:block}

.empty{color:var(--ink-faint);font-size:.85rem;padding:1.25rem 0}

/* ===================================================== admin-verfijning ===
   De admin blijft bewust licht en zakelijk — het is een werkbank, geen
   festivalpagina, en hij deelt die taal met de sync-tool waar hetzelfde team
   in werkt. Wat eraan ontbrak was reliëf: vier identieke witte dozen op een
   rij, cijfers die niet zwaarder wogen dan hun label, en tabellen zonder
   ritme. Dit voegt geen kleur toe, alleen hiërarchie.
   =========================================================================*/

/* Elke statkaart een eigen haarlijn bovenaan. Vier dezelfde vlakken lezen als
   één blok; een streepje geeft ze een kop en maakt de rij scanbaar. */
.stat{position:relative;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.stat::before{
  content:'';position:absolute;inset:0 auto auto 0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--petrol),transparent 70%);
  opacity:.55;
}
.stat:hover{box-shadow:var(--lift-hi);transform:translateY(-1px)}
.stat .n{font-size:2.15rem}
.stat .card-h{letter-spacing:.13em}

/* Het derde en vierde kengetal gaan over geld en werkvoorraad; die krijgen
   ember in plaats van petrol, zodat je in één oogopslag ziet welke twee
   kaarten over de programmakosten gaan. */
.stat-row > .stat:nth-child(3)::before,
.stat-row > .stat:nth-child(4)::before{
  background:linear-gradient(90deg,var(--ember),transparent 70%);
}

/* Tabellen: kopregel steviger, cijfers uitlijnen op de komma. Een kolom
   bedragen die niet uitlijnt kun je niet vergelijken, en vergelijken is het
   enige wat je met zo'n kolom doet. */
.data th{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;padding-bottom:.55rem;
}
.data td.num,.data .num{font-variant-numeric:tabular-nums lining-nums}

/* Paneelkop met een lijn die uitdooft — zelfde idee als aan de fankant, maar
   in de lichte taal van deze kant. */
.panel > h2{
  display:flex;align-items:baseline;gap:.9rem;
}
.panel > h2::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--rule),transparent);
}

/* Pillen iets rustiger: ze stonden even zwaar als de knoppen. */
.pill{font-size:.68rem;letter-spacing:.09em}