/* Cockpit J.K.N. 2000. Opbouw volgens de schets (25-10-2026): vaste navy zijbalk met de onderdelen, rechts het werkvlak;
   op de telefoon wordt de zijbalk een balk bovenaan. Kleuren en lettertypes uit de live stylesheet van klein-nijenhuis.nl
   (ook de donkere varianten); lettertypes staan op deze server (OFL), niets wordt extern geladen.
   Donkere modus volgt alleen de systeeminstelling (geen wisselknop: geen JavaScript). */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-400-700-latin.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/space-grotesk-400-700-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#F5F3EE; --paneel:#FFFFFF; --tekst:#1B2333; --stil:#5A6272; --lijn:rgba(27,35,51,.14); --veld:#F5F3EE;
  --navy:#1B2333; --navy-2:#242D3F; --navy-tekst:#F5F3EE; --navy-stil:#AEB4C0;
  --oranje:#FF7A3D; --oranje-tekst:#B5461A; --op-oranje:#1B2333;
  --goed:#2E6B4F; --goed-bg:#DCEBE2; --let:#B5461A; --let-bg:#FFE4D6; --fout:#A23B2A; --fout-bg:#F6DAD4;
  --wacht:#242D3F; --wacht-bg:#ECE8DF;
  --f-body:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#121823; --paneel:#1B2333; --tekst:#F5F3EE; --stil:#AEB4C0; --lijn:rgba(245,243,238,.16); --veld:#121823;
  --navy:#0D121B; --navy-2:#242D3F; --oranje-tekst:#FF8D57;
  --goed:#8FD3B0; --goed-bg:#1D3A2E; --let:#FF8D57; --let-bg:#3A2418; --fout:#F2A091; --fout-bg:#42201A;
  --wacht:#DDD7CA; --wacht-bg:#242D3F;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tekst);font:15px/1.55 var(--f-body)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:1.9rem;letter-spacing:-.01em} h2{font-size:1.2rem} h3{font-size:1rem}
a{color:var(--oranje-tekst)} a:hover{color:var(--tekst)}
code,.mono{font-family:var(--f-mono);font-size:.84em}
.stil{color:var(--stil)} .klein{font-size:.84rem} .breek{word-break:break-all}
:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}

/* opbouw */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.zij{background:var(--navy);color:var(--navy-tekst);padding:24px 16px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.merk{color:var(--navy-tekst);text-decoration:none;font:600 1.15rem/1.2 var(--f-display)}
.merk i{color:var(--oranje);font-style:normal}
.merk small{display:block;font:500 .72rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-stil);margin-top:4px}
.merk-donker{color:var(--tekst);margin-bottom:8px} .merk-donker small{color:var(--stil)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--navy-stil);text-decoration:none;padding:10px 12px;border-radius:6px;font-weight:500}
.nav a:hover{color:var(--navy-tekst);background:rgba(245,243,238,.07)}
.nav a[aria-current="page"]{color:var(--navy-tekst);background:rgba(245,243,238,.12);box-shadow:inset 3px 0 0 var(--oranje)}
.teller{background:var(--oranje);color:var(--op-oranje);border-radius:99px;font:600 .72rem/1.6 var(--f-mono);padding:0 8px}
.zij-voet{margin-top:auto;font-size:.8rem;color:var(--navy-stil);display:flex;flex-direction:column;gap:6px}
.zij-voet form{margin:4px 0 0}
.werk{padding:32px 28px 48px;display:flex;flex-direction:column;gap:22px;min-width:0;max-width:1240px}
.werk-los{max-width:460px;margin:48px auto;padding:0 16px}

.kopregel{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.kopregel p{margin:6px 0 0}
.tag{font:500 .72rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--let);background:var(--let-bg);padding:4px 10px;border-radius:4px}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tegel{background:var(--paneel);border:1px solid var(--lijn);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tegel b{font:600 1.6rem var(--f-display);font-variant-numeric:tabular-nums}
.tegel span{color:var(--stil);font-size:.84rem}
.kolommen{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start}
.paneel{background:var(--paneel);border:1px solid var(--lijn);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rij{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rij-kop{flex-wrap:wrap}
.leeg{padding:24px 8px;text-align:center;color:var(--stil);margin:0}

/* rondes */
.rondes{display:flex;flex-direction:column;gap:8px}
.ronde{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--lijn);border-radius:6px;color:var(--tekst);text-decoration:none}
.ronde:hover{border-color:var(--oranje);color:var(--tekst)}
.ronde[aria-current="true"]{border-color:var(--oranje);box-shadow:inset 3px 0 0 var(--oranje)}

.pil{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.pil::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-goed{color:var(--goed);background:var(--goed-bg)} .p-fout{color:var(--fout);background:var(--fout-bg)}
.p-let{color:var(--let);background:var(--let-bg)} .p-wacht{color:var(--wacht);background:var(--wacht-bg)}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.beeld{border:1px solid var(--lijn);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.vlak{background:repeating-linear-gradient(135deg,var(--wacht-bg) 0 10px,transparent 10px 20px);display:grid;place-items:center;color:var(--stil);font:500 .78rem var(--f-mono);text-align:center;padding:0 8px}
.vlak img{width:100%;height:100%;object-fit:cover;display:block}
.verhouding-1x1{aspect-ratio:1/1} .verhouding-4x5{aspect-ratio:4/5}
.meta{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.controles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.controles label{display:flex;gap:8px;align-items:flex-start}
.controles input{accent-color:var(--oranje);width:16px;height:16px;margin:2px 0 0;flex:none}
.knoppen{display:flex;gap:8px;flex-wrap:wrap}
details summary{cursor:pointer;color:var(--oranje-tekst);font-weight:500;font-size:.88rem}
details p{margin:6px 0 0}

.knop{display:inline-flex;justify-content:center;align-items:center;font:600 .88rem var(--f-body);border-radius:6px;padding:8px 14px;cursor:pointer;border:1px solid var(--lijn);background:var(--paneel);color:var(--tekst);text-decoration:none}
.knop:hover{border-color:var(--oranje);color:var(--tekst)}
.knop-oranje{background:var(--oranje);color:var(--op-oranje);border-color:var(--oranje)}
.knop-oranje:hover{background:var(--navy);border-color:var(--navy);color:var(--navy-tekst)}
.knop-oranje[aria-current="true"]{box-shadow:0 0 0 2px var(--paneel),0 0 0 4px var(--oranje)}
.knop-lijn{background:transparent}
.knop-zij{background:transparent;color:var(--navy-tekst);border-color:rgba(245,243,238,.25)}
.knop[disabled]{opacity:.5;cursor:not-allowed}

.notitie{font-size:.86rem;padding:10px 12px;border-radius:6px;background:var(--wacht-bg);color:var(--tekst);margin:0}
.notitie-fout{background:var(--fout-bg);color:var(--fout)} .notitie-let{background:var(--let-bg);color:var(--let)}
.reken{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.88rem;font-variant-numeric:tabular-nums;margin:0}
.reken dt{color:var(--stil)} .reken dd{margin:0;text-align:right;font-family:var(--f-mono)}

/* formulieren */
.formulier{display:grid;gap:12px}
.formulier label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;font-weight:600;min-width:0}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select,textarea{font:inherit;font-weight:400;color:var(--tekst);background:var(--veld);border:1px solid var(--lijn);border-radius:6px;padding:8px 10px;width:100%}
textarea{min-height:92px;resize:vertical}
input[disabled],select[disabled],textarea[disabled]{opacity:.75}
.inlog{gap:16px}
.datumkeuze{display:flex;gap:8px;align-items:center;margin:0}
.datumkeuze label{display:flex;gap:8px;align-items:center;font-size:.84rem}
.datumkeuze select{width:auto}

/* tabellen, lijsten, log */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--stil);text-align:left}
th,td{padding:8px;border-bottom:1px solid var(--lijn)} tr:last-child td{border-bottom:0}
.getal{text-align:right} .schuif{overflow-x:auto}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.stappen li{border:1px solid var(--lijn);border-left:3px solid var(--wacht-bg);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:.84rem;min-width:0;word-break:break-word}
.stappen li b{font-family:var(--f-display);font-size:.92rem}
.stap-goed{border-left-color:var(--goed)!important} .stap-let{border-left-color:var(--oranje)!important}
.fotos{display:flex;flex-wrap:wrap;gap:12px}
.fotos figure{margin:0;width:130px}
.fotos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--wacht-bg);display:block}
figcaption{font-size:.72rem;color:var(--stil);margin-top:4px;word-break:break-all}
.lijst{display:flex;flex-direction:column}
.item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--lijn);flex-wrap:wrap}
.item:first-child{border-top:0}
.log{list-style:none;margin:0;padding:0;font:400 .82rem/1.6 var(--f-mono)}
.log li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:6px 0;border-top:1px solid var(--lijn)}
.log li:first-child{border-top:0}
.commit{background:var(--wacht-bg);border-radius:4px;padding:0 5px}

/* overzicht */
.stand{margin:0}
.kolommen-breed{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.kolommen-half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lijst-items{display:flex;flex-direction:column;gap:8px}
.aandacht,.profiel{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--lijn);border-radius:6px;color:var(--tekst);text-decoration:none}
.aandacht:hover,.profiel:hover{border-color:var(--oranje);color:var(--tekst)}
.gekozen{border-color:var(--oranje);box-shadow:inset 3px 0 0 var(--oranje)}
.reken-links dd{text-align:left;font-family:var(--f-body)}
.stromen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.stroom{border:1px solid var(--lijn);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.stroom p{margin:0}
.aantallen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0}
.aantallen div{background:var(--veld);border-radius:6px;padding:6px;display:flex;flex-direction:column-reverse;gap:2px;min-width:0}
.aantallen dt{font-size:.7rem;color:var(--stil);line-height:1.2}
.aantallen dd{margin:0;font:600 1.1rem var(--f-mono);font-variant-numeric:tabular-nums}
.regels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.regels li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--lijn)}
.regels li:first-child{border-top:0}
pre.ruw{white-space:pre-wrap;word-break:break-all;font:400 .76rem/1.5 var(--f-mono);background:var(--veld);padding:8px;border-radius:6px;margin:6px 0 0;max-height:240px;overflow:auto}
th[scope="row"]{width:150px;vertical-align:top}

/* team: schema met Jij in het midden, afdelingen eromheen, kennisbank als basis */
.schema{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"a1 a2 a3" "a4 jij a5" "a7 a6 a6"}
.schema-jij{grid-area:jij;background:var(--navy);color:var(--navy-tekst);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px}
.schema-jij p{margin:0;color:var(--navy-stil)} .schema-jij .stil{color:var(--navy-stil)}
.poorten{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.poort{display:flex;flex-direction:column;gap:2px;border:1px solid var(--oranje);border-radius:6px;padding:8px;color:var(--navy-tekst);text-decoration:none;font-size:.82rem}
.poort b{font-family:var(--f-display);color:var(--oranje)} .poort:hover{background:rgba(245,243,238,.07);color:var(--navy-tekst)}
.afdeling{border:1px solid var(--lijn);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.afdeling .profiel{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
.plek-a1{grid-area:a1} .plek-a2{grid-area:a2} .plek-a3{grid-area:a3} .plek-a4{grid-area:a4} .plek-a5{grid-area:a5}
.plek-a6{grid-area:a6;background:var(--wacht-bg)} .plek-a7{grid-area:a7}
.stapjes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.stapjes a{display:block;padding:8px;border:1px solid var(--lijn);border-radius:6px;color:var(--tekst);text-decoration:none;font-size:.84rem;height:100%}
.stapjes a:hover{border-color:var(--oranje);color:var(--tekst)}
.stapjes a[aria-current="step"]{border-color:var(--oranje);box-shadow:inset 0 -3px 0 var(--oranje)}
.stapjes .poortstap{border-color:var(--oranje)}
.stapdetail{display:flex;flex-direction:column;gap:8px} .stapdetail p{margin:0}

/* werkstroom: vijf kolommen, scrollen binnen het eigen vak; op de telefoon onder elkaar */
.filters{display:flex;flex-direction:column;gap:8px}
.filters div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter{font-size:.84rem;padding:4px 10px;border:1px solid var(--lijn);border-radius:99px;color:var(--tekst);text-decoration:none;background:var(--paneel)}
.filter:hover{border-color:var(--oranje);color:var(--tekst)}
.filter[aria-current="true"]{background:var(--navy);color:var(--navy-tekst);border-color:var(--navy)}
.bord{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px;align-items:start}
.kolom{background:var(--paneel);border:1px solid var(--lijn);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.kolom h2{font-size:1rem}
.kolom-wacht{border-top:3px solid var(--oranje)} .kolom-mislukt{border-top:3px solid var(--fout)} .kolom-opgeleverd{border-top:3px solid var(--goed)}
.kaart{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--lijn);border-radius:6px;color:var(--tekst);text-decoration:none;background:var(--bg)}
a.kaart:hover{border-color:var(--oranje);color:var(--tekst)}
.kaart-verlopen{border-style:dashed}
.leeg-uitleg{margin:0;padding:10px;border:1px dashed var(--lijn);border-radius:6px;color:var(--stil)}

.aanzet strong{font-weight:600} .profiel .vol{flex-basis:100%}
/* documenten */
.doclijst{display:flex;flex-direction:column;gap:6px} .doclijst h3{margin-top:8px}
pre.document{white-space:pre-wrap;word-break:break-word;font:400 .9rem/1.6 var(--f-body);background:var(--veld);padding:14px;border-radius:6px;margin:0;max-height:70vh;overflow:auto}
/* planning */
.gekozen-rij td{background:var(--let-bg)}
td details summary{font-size:.84rem} td details p{margin:4px 0}
td{vertical-align:top}

@media (max-width:1100px){.stapjes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .zij{position:static;height:auto;padding:14px 16px;gap:12px}
  .nav{flex-direction:row;overflow-x:auto}
  .nav a{white-space:nowrap}
  .nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--oranje)}
  .zij-voet{margin:0;flex-direction:row;align-items:center} .zij-voet span{display:none} .zij-voet form{margin:0}
  .werk{padding:20px 16px 40px}
  .kolommen,.twee{grid-template-columns:minmax(0,1fr)}
  h1{font-size:1.5rem}
  .log li{grid-template-columns:minmax(0,1fr);gap:2px}
  .kolommen-breed,.kolommen-half{grid-template-columns:minmax(0,1fr)}
  .schema{grid-template-columns:minmax(0,1fr);grid-template-areas:"jij" "a1" "a2" "a3" "a4" "a5" "a7" "a6"}
  .stapjes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bord{grid-template-columns:minmax(0,1fr);overflow-x:visible}
  .aantallen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){.ronde,.knop{transition:border-color .15s,background .15s}}