/* Naar de tekening in ontwerp/. Maten, kleuren en afstanden komen daaruit;
   waar mijn eerdere keuze en de tekening verschilden, wint de tekening. */
:root{
  --inkt:#1a1d22; --inkt-700:#3d4250; --inkt-500:#6a7280; --inkt-300:#b8bcc4;
  --inkt-100:#eceef2; --room:#f5f1eb; --room-licht:#faf7f2; --kaart:#fff;
  --navy:#081521; --oranje:#e8622a; --gevaar:#b0413c; --gevaar-zacht:#f8e3e1;
  --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--room);color:var(--inkt);
     font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}

/* ---------- kop ---------- */
header{background:var(--navy);color:var(--room);
       padding:calc(14px + env(safe-area-inset-top,0)) 16px 0;
       display:flex;flex-direction:column;gap:10px;position:sticky;top:0;z-index:5}
.koprij{display:flex;align-items:center;justify-content:space-between;gap:12px}
.merk{font-weight:700;font-size:17px;letter-spacing:-.01em}
.wie{background:none;border:0;color:var(--inkt-300);font-size:13px;padding:6px 0}
.tabs{display:flex;gap:2px;padding-bottom:8px}
.tabs button{background:none;border:0;color:var(--inkt-300);padding:9px 12px;
             border-radius:8px;font-size:15px;font-weight:500;min-height:40px}
.tabs button[aria-current="true"]{background:rgba(255,255,255,.1);color:var(--room)}
.maandnav{display:flex;align-items:center;gap:4px}
.maandnav button{width:34px;height:34px;display:flex;align-items:center;
                 justify-content:center;font-size:17px;background:none;border:0;color:var(--room)}
.maandtitel{font-size:15px;font-weight:600;min-width:8.6em;text-align:center}
.terug{background:none;border:0;color:var(--inkt-300);font-size:15px;padding:6px 0}

main{padding:14px 16px 24px;display:flex;flex-direction:column;gap:10px}
main>*{min-width:0}

/* ---------- Nu: dagkaarten ---------- */
.dagkaart{background:var(--kaart);border-radius:var(--radius);padding:12px 14px;
          box-shadow:0 1px 2px rgba(26,29,34,.05);display:flex;flex-direction:column;gap:8px;
          border:0;text-align:left;width:100%}
.dagkaart.alarm{border-left:4px solid var(--gevaar)}
.dagkaart.rustdag{opacity:.85}
.datumrij{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.datum{font-weight:650;font-size:17px}
.rustdag .datum{color:var(--inkt-500)}
.vandaag{font-size:12px;color:var(--inkt-500);text-transform:uppercase;letter-spacing:.06em}
.alarmbalk{background:var(--gevaar-zacht);color:var(--gevaar);border-radius:8px;
           padding:8px 10px;font-weight:600;font-size:14px}
.pRegel{display:flex;align-items:center;gap:10px}
.bol{width:10px;height:10px;border-radius:5px;flex:none}
.pTekst{flex:1;color:var(--inkt-700)}
.pRegel.hoofd .pTekst{font-weight:600;color:var(--inkt)}
.pRegel.uit .pTekst{color:var(--inkt);font-weight:600}
.pTag{font-size:12px;color:var(--inkt-500)}
.pTijd{font-variant-numeric:tabular-nums;font-size:14px;color:var(--inkt-700)}
.pot{width:14px;height:14px;border-radius:4px;flex:none}
.potnaam{font-size:13px;color:var(--inkt-500)}
.activiteit{display:flex;align-items:center;gap:10px;padding-left:20px}
.activiteit .tijd{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.activiteit .wat{flex:1;color:var(--inkt-700);font-size:14px}

.onderbalk{position:sticky;bottom:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0));
           background:linear-gradient(to top,var(--room) 70%,rgba(245,241,235,0))}
.onderbalk button{background:var(--oranje);color:#fff;border:0;border-radius:var(--radius);
                  padding:14px;text-align:center;font-weight:600;font-size:16px;width:100%}

/* ---------- Dag ---------- */
.blokAlarm{background:var(--gevaar-zacht);border-radius:var(--radius);padding:12px 14px;
           display:flex;flex-direction:column;gap:4px}
.blokAlarm b{color:var(--gevaar);font-weight:700;font-size:15px}
.blokAlarm span{color:var(--inkt-700);font-size:14px}
.blok{background:var(--kaart);border-radius:var(--radius);padding:14px;
      box-shadow:0 1px 2px rgba(26,29,34,.05);display:flex;flex-direction:column;gap:10px}
.bloklabel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
           letter-spacing:.06em;text-transform:uppercase;color:var(--inkt-500)}
.blokwaarde{font-size:17px;font-weight:600;display:flex;justify-content:space-between;
            align-items:baseline;gap:8px}
.blokwaarde em{font-style:normal;font-weight:400;color:var(--inkt-500);font-size:14px}
.blokbron{font-size:14px;color:var(--inkt-500)}
.keuzes{display:flex;gap:6px}
.keuzes button{flex:1;border:1px solid var(--inkt-100);background:var(--room-licht);
               border-radius:9px;padding:9px 4px;font-size:13px;font-weight:550;
               color:var(--inkt-500);text-align:center;min-height:40px}
.keuzes button[aria-pressed="true"]{border-color:var(--gekozen,#2b6b7a);
               background:var(--gekozenZacht,#e3eef0);color:var(--gekozen,#2b6b7a)}
.voetnoot{font-size:13px;color:var(--inkt-500)}
.stippel{border:1px dashed var(--inkt-300);border-radius:9px;padding:10px;text-align:center;
         color:var(--inkt-500);font-size:14px;background:none;width:100%}
.veld{font:inherit;padding:10px;border:1px solid var(--inkt-100);border-radius:9px;
      min-height:44px;width:100%;background:var(--room-licht)}

/* ---------- Maand ---------- */
.legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--inkt-500);padding:0 2px}
.legenda span{display:flex;align-items:center;gap:5px}
.legenda i{width:8px;height:8px;border-radius:4px;display:block}
.maandkaart{background:var(--kaart);border-radius:var(--radius);padding:12px 10px;
            box-shadow:0 1px 2px rgba(26,29,34,.05);display:flex;flex-direction:column;gap:6px}
.dagkop,.rooster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dagkop{font-size:11px;color:var(--inkt-500);text-transform:uppercase;text-align:center}
.vak{min-height:58px;border-radius:8px;background:var(--room-licht);padding:5px;
     display:flex;flex-direction:column;gap:3px;border:0;text-align:left;align-items:stretch}
.vak.weekend{background:var(--inkt-100)}
.vak.alarm{background:var(--gevaar-zacht)}
.vak.nu{outline:2px solid var(--oranje)}
.vak .nr{font-size:12px;font-weight:600}
.vak.buiten .nr{color:var(--inkt-300)}
.vak.weekend .nr{color:var(--inkt-500)}
.vak.alarm .nr{font-weight:700;color:var(--gevaar)}
.streep{height:5px;border-radius:3px}
.woord{font-size:10px;color:var(--inkt-700);line-height:1.2;overflow:hidden;
       text-overflow:ellipsis;white-space:nowrap}
.uitleg{font-size:13px;color:var(--inkt-500);padding:0 2px;line-height:1.5}

/* ---------- verlof (blijft, maar in de nieuwe schil) ---------- */
.regels{font-size:.9rem;display:grid;gap:.2rem;margin:0}
.regels p{margin:0}
.jaren{display:flex;gap:.3rem}
.jaren button{border:1px solid var(--inkt-100);background:var(--kaart);border-radius:999px;
              padding:.35rem .75rem;min-height:40px}
.jaren button[aria-current="true"]{background:var(--inkt);color:var(--kaart);border-color:var(--inkt)}
.subtabs{display:flex;gap:.3rem}
.subtabs button{flex:1;padding:.4rem;min-height:40px;border:1px solid var(--inkt-100);
                border-radius:8px;background:var(--kaart)}
.subtabs button[aria-current="true"]{background:var(--inkt);color:var(--kaart);border-color:var(--inkt)}
.knoppen{display:flex;gap:.5rem}
.knoppen button{flex:1;padding:.4rem .7rem;min-height:40px;border:1px solid var(--inkt-100);
                border-radius:8px;background:var(--kaart)}
.knoppen button[aria-pressed="true"]{background:var(--inkt);color:var(--kaart)}
.kaart{background:var(--kaart);border:1px solid var(--inkt-100);border-radius:var(--radius);
       padding:.7rem;min-width:0}
.kaart h2{margin:0 0 .5rem;font-size:1rem;display:flex;justify-content:space-between;align-items:baseline}
.kaart h2 span{font-weight:400;color:var(--inkt-500);font-size:.85rem}
.maand.voorstart{opacity:.55}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{padding:.35rem .3rem;text-align:right;border-bottom:1px solid var(--inkt-100)}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--inkt-500);font-weight:500;font-size:.75rem}
.schuif{overflow-x:auto;min-width:0}
.schuif table{min-width:22rem}
td.let{color:#b35c00;font-weight:600}
td.goed{color:#2d7a3e;font-weight:600}
td.mis{color:var(--gevaar);font-weight:600}
.slot,.nogniet{font-size:.8rem;color:var(--inkt-500);margin:.4rem 0 0}
.melding{padding:.5rem .6rem;background:#fdf6e3;border:1px solid #e8d9a8;border-radius:8px;
         font-size:.9rem;white-space:pre-line;margin:0}
.rooster.verlof{gap:3px}
.dag{aspect-ratio:1;border:0;border-radius:7px;background:var(--kaart);font-size:.8rem;
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     padding:0;min-height:40px}
.rooster>*{min-width:0}
.dag.leegvak{background:transparent}
.dag.open{border:1px solid var(--inkt-100)}
.dag.dicht{background:#D9D9D9;color:#555}
.dag.nogniet{background:transparent;color:var(--inkt-300);border:1px dashed var(--inkt-100)}
.dag.zonderpot{background:#F8CBAD}
.dag .feest{font-size:.5rem;line-height:1;max-width:100%;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap;color:#444}
.kop{text-align:center;font-size:.7rem;color:var(--inkt-500)}
.stip{display:inline-block;width:.9rem;height:.9rem;border-radius:3px;margin-right:.5rem;
      vertical-align:-2px;border:1px solid rgba(0,0,0,.15)}

/* ---------- blad ---------- */
.sluier{position:fixed;inset:0;background:rgba(8,21,33,.4);z-index:9}
.blad{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--kaart);
      border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0));
      display:grid;gap:8px;max-height:82vh;overflow:auto}
.blad h2{margin:0;font-size:15px;font-weight:700}
.blad button{padding:12px;border-radius:10px;border:1px solid var(--inkt-100);
             text-align:left;min-height:48px;background:var(--kaart)}
.blad .af{text-align:center;color:var(--inkt-500)}
.blad .hoofd{background:var(--oranje);color:#fff;border-color:var(--oranje);
             text-align:center;font-weight:600}