/* Kleuren, maten en font uit demo/index.html, zodat het platform en de demo
naast elkaar niet uit de toon vallen.
Donker is de standaard, want dat is de huisstijl. De lichte weergave staat
hieronder en wordt gekozen met de knop rechtsboven; die keuze blijft bewaard
onder dezelfde sleutel als in de demo, zodat hij meeverhuist. */
:root{
--bg:#000; --panel:#0d0d0f; --panel-2:#141417; --grey:#313335;
--line:#26262a; --line-soft:#1b1b1e; --line-strong:#45454c;
--text:#fff; --muted:#8d8d95; --nav-text:#d5d5da;
--accent:#FFED00;
/* Geel leest niet op wit. Voor vlakken en balken gebruiken wij --accent,
voor tekst en iconen --accent-text, dat in de lichte weergave donker wordt. */
--accent-text:#FFED00;
--ok:#3FB950; --bad:#F0503A; --waarschuwing:#E3A008;
--vlag-bg:rgba(227,160,8,.16); --vlag-tekst:#F5C451;
--vlag-ok-bg:rgba(63,185,80,.16); --vlag-ok-tekst:#7EE787;
--fout-tekst:#ffb4a8;
--schaduw:rgba(0,0,0,.6);
--nav-w:264px;
--font:"Brutal Type","Helvetica Neue",Helvetica,Arial,sans-serif;
}
:root[data-thema="licht"]{
--bg:#f4f4f6; --panel:#fff; --panel-2:#f0f0f3; --grey:#dcdce1;
--line:#d7d7dd; --line-soft:#e7e7ec; --line-strong:#b6b6bf;
--text:#0b0b0d; --muted:#63636c; --nav-text:#2c2c33;
--accent-text:#6f6400;
--ok:#1B7B33; --bad:#C0341F; --waarschuwing:#8a6100;
--vlag-bg:#fdf3d0; --vlag-tekst:#6f4e00;
--vlag-ok-bg:#dcf3e1; --vlag-ok-tekst:#12622a;
--fout-tekst:#8f2313;
--schaduw:rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);
-webkit-font-smoothing:antialiased;line-height:1.5;font-size:15px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:23px} h2{font-size:17px;margin:30px 0 12px} h3{font-size:15px}
a{color:inherit}
.muted{color:var(--muted)}
.klein{font-size:13px}
.inleiding{color:var(--muted);font-size:13px;margin-top:6px}
/* --- knoppen en velden ---------------------------------------------------- */
button{font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;
border:0;border-radius:9px;padding:11px 17px;background:var(--accent);color:#000}
button:disabled{opacity:.5;cursor:default}
button.stil{background:transparent;color:var(--nav-text);border:1px solid var(--line);
font-weight:400;font-size:13px;padding:8px 13px}
button.stil:hover{border-color:var(--accent);color:var(--text)}
input[type=email],select{width:100%;padding:11px 13px;border-radius:9px;
border:1px solid var(--line);background:var(--panel-2);color:var(--text);
font-family:var(--font);font-size:15px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
/* --- inlogscherm ---------------------------------------------------------- */
.midden{min-height:100vh;display:grid;place-items:center;padding:24px}
.kaart{background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:30px;width:100%;max-width:440px}
.merk{display:flex;align-items:center;gap:10px}
.merk b{font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.streep{width:32px;height:3px;background:var(--accent);flex:0 0 auto}
.melding{margin-top:16px;padding:12px 14px;border-radius:9px;font-size:14px;
border:1px solid var(--line);background:var(--panel-2)}
.melding.fout{border-color:var(--bad);color:var(--fout-tekst)}
.melding.goed{border-color:var(--ok)}
/* --- indeling ------------------------------------------------------------- */
.raam{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}
nav.zij{background:var(--panel);border-right:1px solid var(--line);padding:20px 0;
position:sticky;top:0;height:100vh;overflow-y:auto}
nav.zij .kop{padding:0 20px 20px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
nav.zij .groep{padding:16px 20px 6px;font-size:11px;text-transform:uppercase;
letter-spacing:.08em;color:var(--muted)}
nav.zij a{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 20px;color:var(--nav-text);text-decoration:none;font-size:14px;
border-left:3px solid transparent}
nav.zij a:hover{background:var(--panel-2);color:var(--text)}
nav.zij a.aan{border-left-color:var(--accent);background:var(--panel-2);color:var(--text);font-weight:700}
nav.zij a .stip{width:7px;height:7px;border-radius:50%;background:var(--waarschuwing);flex:0 0 auto}
main{padding:28px 34px 70px;max-width:1180px}
header.balk{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 34px;border-bottom:1px solid var(--line);position:sticky;top:0;
background:var(--bg);z-index:5;flex-wrap:wrap}
/* --- tegels --------------------------------------------------------------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:13px;margin:20px 0 8px}
.tegel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px}
.tegel .getal{font-size:29px;font-weight:700;line-height:1.15;margin-top:3px}
.tegel .bij{font-size:12px;color:var(--muted);margin-top:5px}
/* --- eventblokken --------------------------------------------------------- */
/* De rest van het platform is bewust rustig: het zijn tabellen met aantallen en
die moet je kunnen lezen. De events zijn de uitzondering, want daar draait
alles om, en daar mag het merk spreken. Zwart vlak, het merkteken en de
plaatsnaam groot.
Het kopvlak blijft zwart in beide weergaven. Zwart met geel is de huisstijl;
dat hoort niet mee te veranderen met de voorkeur van de kijker. Daarom staan
de kleuren hier vast en niet in variabelen. */
.blokken{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
gap:16px;margin-top:20px}
.blok{display:flex;flex-direction:column;background:var(--panel);
border:1px solid var(--line);border-radius:12px;overflow:hidden;
text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.blok:hover{border-color:var(--accent);transform:translateY(-2px)}
.blok:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Wat geweest is mag naar de achtergrond. Niet door het hele vlak door te laten
schijnen, want op wit wordt dat een vale grijze vlek; wel door het geel en de
plaatsnaam te temperen. Het vlak zelf blijft gewoon zwart. */
.blok.voorbij .teken{color:#57575e}
.blok.voorbij .plaats{color:#9a9aa2}
.kopvlak{position:relative;display:flex;background:#000;color:#fff;
padding:16px 18px;overflow:hidden}
.blok .kopvlak{min-height:138px}
/* Een eigen foto ligt onder de tekst. Wat voor foto het wordt weten wij niet,
dus vertrouwen wij niet op de foto zelf: er gaat een donker verloop overheen
dat naar onderen dichttrekt, precies waar de plaatsnaam staat. Zo blijft die
ook op een lichte foto leesbaar. Zonder foto is het vlak gewoon zwart. */
.kopvlak .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.kopvlak.metfoto::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85) 100%)}
/* Het watermerk hoeft er niet ook nog bij; dan wordt het vlak te druk. */
.kopvlak.metfoto .waas{display:none}
/* Hetzelfde merkteken, ver uitvergroot en net iets lichter dan zwart. Het geeft
het vlak textuur; blijft het te klein of te licht, dan leest het als een
tweede logo in plaats van als achtergrond. */
.kopvlak .waas{position:absolute;right:-54px;bottom:-52px;width:270px;color:#141417;
pointer-events:none;line-height:0}
.kopvlak .waas svg{width:100%;height:auto;display:block}
/* z-index 1: de tekst hoort boven de foto en boven het verloop te liggen, en
dat verloop is een ::after en komt in de tekenvolgorde dus na deze laag. */
.kopvlak .laag{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
justify-content:space-between;gap:16px}
.kopvlak .bovenin{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kopvlak .teken{width:46px;color:var(--accent);flex:0 0 auto;line-height:0}
.kopvlak .teken svg{width:100%;height:auto;display:block}
.kopvlak .jaar{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:#b6b6be;font-weight:700;margin-bottom:5px}
.kopvlak .plaats{margin:0;font-size:27px;font-weight:700;line-height:1;
text-transform:uppercase;letter-spacing:-.01em}
.kopvlak .naam{font-size:12px;color:#b6b6be;margin-top:7px}
/* Waar het event staat: geweest, bezig, of hoe lang nog. */
.stand{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
padding:5px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.3);
color:#fff;white-space:nowrap;flex:0 0 auto}
.stand.nu{background:var(--accent);border-color:var(--accent);color:#000}
.stand.bijna{border-color:var(--accent);color:#FFED00}
.stand.voorbij{color:#96969e;border-color:rgba(255,255,255,.18)}
.blok .onder{display:flex;flex-direction:column;gap:12px;padding:16px 18px;flex:1}
.blok .wanneer{font-weight:700;font-size:14px}
.blok .waar{margin-top:-9px}
.blok .cijfers{display:flex;gap:20px;flex-wrap:wrap;margin-top:auto}
.blok .cijfers b{display:block;font-size:18px;line-height:1.2}
.blok .cijfers em{font-style:normal;font-weight:400;font-size:13px;color:var(--muted)}
.blok .cijfers span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.blok .meer{font-size:12px;font-weight:700;color:var(--accent-text)}
/* Hetzelfde vlak, maar dan als kop van één event. In de donkere weergave is de
achtergrond van de pagina ook zwart, dus zonder rand loopt het vlak erin over;
de gele kant links geeft het de kop die het hoort te hebben. */
.eventkop{border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:12px;padding:26px 28px;margin-top:14px}
.eventkop .plaats{font-size:clamp(30px,5vw,44px)}
.eventkop .teken{width:58px}
.eventkop .waas{width:420px;right:-80px;bottom:-96px}
.terug{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);text-decoration:none}
.terug:hover{color:var(--accent-text)}
/* --- wat er nog te doen is ------------------------------------------------- */
/* De kleur van de rand links zegt hoe dringend het is: grijs is gewoon open,
geel is binnen een week, rood is over de datum en groen is niets meer te
doen. Dat is dezelfde volgorde als in de herinneringen die uitgaan. */
.takenlijst{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.taak{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
background:var(--panel);border:1px solid var(--line);
border-left:3px solid var(--line-strong);border-radius:12px;padding:15px 17px}
.taak.urgent{border-left-color:var(--accent)}
.taak.verlopen{border-left-color:var(--bad)}
.taak.klaar{border-left-color:var(--ok)}
.taak .tekst{flex:1;min-width:200px}
.taak .tekst b{display:block;font-size:15px}
.taak .hoe{font-size:13px;color:var(--muted);margin-top:3px}
.taak .bij{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px}
.taak .waar{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.taak .termijn{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--muted)}
.taak .termijn.urgent{color:var(--accent-text)}
.taak .termijn.verlopen{color:var(--bad)}
.taak .geenknop{max-width:190px;text-align:right}
/* De knop die je meteen brengt waar het gebeurt. */
.doeknop{display:inline-flex;align-items:center;flex:0 0 auto;border:0;cursor:pointer;
background:var(--accent);color:#000;border-radius:9px;padding:10px 15px;
font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;text-decoration:none;white-space:nowrap}
.doeknop:hover{filter:brightness(1.08)}
/* Het getal achter de kop op het dashboard. */
.teller{display:inline-block;margin-left:9px;padding:2px 9px;border-radius:99px;
background:var(--accent);color:#000;font-size:12px;font-weight:700;vertical-align:middle}
/* --- venster over het scherm ----------------------------------------------- */
.overlaag{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
background:rgba(0,0,0,.74);animation:opdoemen .16s ease-out}
.venster{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
background:var(--panel);border:1px solid var(--line);border-radius:14px;
box-shadow:0 26px 70px var(--schaduw);animation:omhoog .22s cubic-bezier(.2,.8,.3,1)}
.venster:focus{outline:none}
/* Blijft staan als de lijst langer is dan het venster, zodat je bij het
scrollen blijft zien waar je naar kijkt en de sluitknop binnen bereik is. */
.vensterkop{position:sticky;top:0;z-index:2;
border-radius:13px 13px 0 0;border-bottom:3px solid var(--accent);padding:20px 22px}
.vensterkop .plaats{font-size:30px}
.vensterinhoud{padding:20px 22px 22px}
.sluit{background:transparent;border:0;color:#b6b6be;font-size:25px;line-height:1;
padding:0 4px;cursor:pointer}
.sluit:hover{color:#fff}
body.vast{overflow:hidden}
@keyframes opdoemen{from{opacity:0}to{opacity:1}}
@keyframes omhoog{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* Wie beweging heeft uitgezet in zijn systeem, krijgt het venster zonder. */
@media (prefers-reduced-motion:reduce){.overlaag,.venster{animation:none}}
/* --- tabellen ------------------------------------------------------------- */
.tabelrand{border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:var(--panel)}
/* Geen vaste minimumbreedte: de tabel past zich aan het scherm aan, zodat je
niet hoeft te schuiven. Tekstkolommen mogen afbreken, getallen niet, want
een getal dat over twee regels valt is niet meer te lezen. */
table{border-collapse:collapse;width:100%;font-size:14px;table-layout:auto}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:normal}
td.getal,th.getal,th.sorteer.getal{white-space:nowrap}
/* Getalkolommen zo smal mogelijk, zodat de ruimte naar de namen gaat. */
th.getal{width:1%}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:400}
tr:last-child td{border-bottom:0}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}
.balkje{height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:80px}
.balkje i{display:block;height:100%;background:var(--accent)}
/* --- merktekens ----------------------------------------------------------- */
.vlag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;
background:var(--vlag-bg);color:var(--vlag-tekst);margin-left:7px;white-space:nowrap}
.vlag.ok{background:var(--vlag-ok-bg);color:var(--vlag-ok-tekst)}
.vlag.uit{background:var(--panel-2);color:var(--muted)}
/* --- wachtend op aanlevering ---------------------------------------------- */
.wacht{border:1px dashed var(--line-strong);border-radius:12px;padding:26px;
background:var(--panel);margin-top:18px}
.wacht h3{margin-bottom:8px}
.wacht .bron{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
font-size:13px;color:var(--muted)}
.wacht ul{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:14px}
.wacht li{margin:4px 0}
/* --- demopaneel ----------------------------------------------------------- */
.lokaal{position:fixed;right:18px;bottom:18px;z-index:20;background:var(--panel);
border:1px solid var(--accent);border-radius:12px;padding:14px;width:290px;
box-shadow:0 10px 34px var(--schaduw)}
.lokaal h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:var(--accent-text);margin-bottom:10px}
.lokaal select{margin-bottom:9px;font-size:14px;padding:9px 11px}
.lokaal .weg{position:absolute;top:9px;right:11px;color:var(--muted);cursor:pointer;
font-size:17px;line-height:1;background:none;border:0;padding:0}
.lokaal-open{position:fixed;right:18px;bottom:18px;z-index:20}
@media (max-width:900px){
/* De knop valt onder de tekst; dan hoort de uitleg ernaast dat ook te doen
en niet rechts uitgelijnd te blijven staan. */
.taak .geenknop{max-width:none;text-align:left}
.raam{grid-template-columns:1fr}
nav.zij{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
main{padding:22px 18px 60px}
header.balk{padding:14px 18px}
}
/* --- weergave wisselen ----------------------------------------------------- */
button.thema{background:transparent;border:1px solid var(--line);color:var(--nav-text);
padding:7px 10px;font-size:14px;line-height:1;border-radius:9px}
button.thema:hover{border-color:var(--accent);color:var(--text)}
/* --- sorteerbare koppen ---------------------------------------------------- */
th.sorteer{cursor:pointer;user-select:none}
th.sorteer:hover{color:var(--text)}
th.sorteer.aan{color:var(--text)}
th .pijl{display:inline-block;width:11px;color:var(--accent-text)}
/* --- beheerknoppen en meldingen -------------------------------------------- */
button.mini{padding:4px 9px;font-size:12px;margin-left:5px}
button.gevaar{color:var(--bad);border-color:var(--line)}
button.gevaar:hover{border-color:var(--bad);color:var(--bad)}
tr.uit td{opacity:.5}
td.tekort{color:var(--bad);font-weight:700}
/* --- formulieren ----------------------------------------------------------- */
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.velden input,.velden select{width:100%;padding:10px 12px;border-radius:9px;
border:1px solid var(--line);background:var(--panel-2);color:var(--text);
font-family:var(--font);font-size:14px}
.velden input[readonly]{opacity:.6;cursor:not-allowed}
.velden input[type=checkbox]{width:auto;accent-color:var(--accent)}