/* Horecast console — design tokens + shell.
   De identiteit is die van de Streamlit-console (app/Home.py, owner-palet
   2026-07-08, Roboto Condensed 2026-07-08): zandgrond, crème kaarten,
   messing accent, haarlijn-structuur. De HTML-site volgt Streamlit
   pixel-nabij (owner 2026-09-03: "layout exact als Streamlit"); tokens
   dragen de namen van die wereld, componenten binden enkel aan tokens. */

/* Roboto Condensed — zelf gehost (CSP font-src 'self'); variabel font */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/roboto-condensed-var.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url("../fonts/roboto-condensed-var-italic.woff2") format("woff2"); }

/* De tokens (kleur, type, ruimte, radius, schaduw, beweging) staan sinds UX fase 4 (20/10/2026) in tokens.css,
   dat als eerste geladen wordt. Hier alleen nog de basis en de componenten. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

/* scrollbalken (owner 3/09): overal dun en pas zichtbaar als de muis op het
   scrollende blok staat — zoals de zijbalk. Geldt voor de pagina, tabellen,
   panelen en elk ander overflow-blok. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
*:hover::-webkit-scrollbar-thumb { background: var(--line-strong); }
*::-webkit-scrollbar-corner { background: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-base)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---- typografie: Streamlit-maten (1rem = 16px) ---- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; color: var(--text); font-weight: 600; letter-spacing: .2px; }
h1 { font-size:var(--t-2xl); }
h2 { font-size:var(--t-l); }
h3 { font-size:var(--t-base); }
p  { text-wrap: pretty; }
.t-sub  { color: var(--text-2); font-size:var(--t-ml); }
.t-meta { color: var(--text-3); font-size:var(--t-s); }
.t-label {
  font-size:var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.num { font-variant-numeric: tabular-nums; }
code, pre, .mono { font-family: "Roboto Mono", ui-monospace, Consolas, monospace; }

/* ---- iconen (Material Symbols Rounded, inline svg via THEO.icon) ---- */
svg.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.2em; }

/* ---- shell ---- */
#shell { display: none; min-height: 100vh; }
#shell.on { display: block; }

/* kopband: enkel boven de inhoud — de zijbalk loopt eróverheen (owner 3/09) */
.topbar {
  position: fixed; top: 0; right: 0; left: var(--sidebar-w); height: var(--header-h); z-index: 30;
  background: var(--chrome); border-bottom: 1px solid var(--band-line);
  box-shadow: 0 2px 10px rgba(110, 98, 68, .14);
  display: flex; align-items: center; justify-content: center;
  transition: left .2s var(--ease);
}
.topbar img { height: 40px; width: auto; }
body.nav-closed .topbar { left: 0; }

/* zijbalk: volle hoogte, crème, geen rand; pijl + scroller alleen bij hover */
.sidenav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: var(--sidebar-w); overflow-y: auto; overflow-x: hidden;
  background: var(--surface);
  box-shadow: 1px 0 0 rgba(110, 98, 68, .10);
  padding: 74px 22px 26px 30px;
  display: flex; flex-direction: column;
  scrollbar-width: none;
  transition: transform .2s var(--ease);
}
.sidenav::-webkit-scrollbar { width: 6px; }
body.nav-closed .sidenav { transform: translateX(-100%); }

#navclose {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 34px; height: 34px; min-height: 0; padding: 0;
  border: 0; background: transparent; color: var(--text); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s var(--ease), background .15s var(--ease);
}
#navclose svg.ic { width: 22px; height: 22px; }
.sidenav:hover #navclose, #navclose:focus-visible { opacity: 1; }
#navclose:hover { background: var(--inset); }

#navopen {
  position: fixed; top: 14px; left: 14px; z-index: 50;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  border: 0; background: transparent; color: var(--text); border-radius: 6px;
  display: none; align-items: center; justify-content: center;
}
#navopen svg.ic { width: 22px; height: 22px; }
#navopen:hover { background: rgba(255, 255, 255, .35); }
body.nav-closed #navopen { display: inline-flex; }

.sidenav .sec {
  margin: 14px 8px 3px;
  font-size:var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-olijf);
}
.sidenav .sec:first-child { margin-top: 0; }
.sidenav a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; margin: 1px 0; border-radius: var(--r-s);
  color: var(--text); text-decoration: none; font-weight: 500; font-size:var(--t-base);
  line-height: 1.5; white-space: nowrap;
  transition: background .15s var(--ease);
}
.sidenav a:hover { background: var(--surface-3); }
.sidenav a.active { background: var(--brand); font-weight: 600; }
.sidenav a svg.ic { width: 18px; height: 18px; opacity: .9; }
.sidenav a .wip {
  margin-left: auto; font-size:var(--t-xs); font-weight: 700;
  color: var(--text-faint); letter-spacing: .06em;
}
.sidenav .navfoot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--text-3); font-size:var(--t-m);
}
.sidenav .navfoot button { min-height: 34px; padding: 4px 12px; font-size:var(--t-m); }

main {
  margin: 0 0 0 var(--sidebar-w);
  padding: calc(var(--header-h) + 18px) 5rem 60px;
  max-width: min(98.5vw, 1900px);
  transition: margin-left .2s var(--ease);
}
body.nav-closed main { margin-left: 0; }

/* paginakop: titel 1.4rem + ⓘ, subtitel, gouden streep 64×3 (_theme.header) */
.page-head { margin: .2rem 0 .9rem; }
.page-head h1 { display: flex; align-items: center; gap: 8px; }
.page-head .t-sub { margin-top: .15rem; }
.page-head::after {
  content: ""; display: block; width: 64px; height: 3px;
  background: var(--brand); margin-top: .35rem; border-radius: 2px;
}
/* verticale ritmiek zoals Streamlit: 1rem tussen blokken */
.view > * + * { margin-top: 1rem; }
.stack > * + * { margin-top: 1rem; }

/* ---- kaarten (st.container key=card_*) ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: .75rem 1.1rem .9rem;
  box-shadow: var(--shadow-card);
}
/* ritme (owner 3/09): tussen élk blok — kaart, tegelrij, rij van kaarten,
   melding — altijd dezelfde 1rem; kaarten naast elkaar altijd even hoog */
.view .card + *, .view .row + *, .view .note + *, .view .tblwrap + *, .view details.exp + *,
.view * + .card, .view * + .row, .view * + .note, .view * + details.exp { margin-top: 1rem; }
.row > * { margin-top: 0 !important; }            /* rasterkinderen: geen ritme-marge */
.row { align-items: stretch; }
.row > .card, .row > .tile, .row > .metric { height: 100%; }
.row > div:not(.card):not(.tile):not(.metric) { display: flex; flex-direction: column; }
.row > div:not(.card):not(.tile):not(.metric) > .card { flex: 1; }
.ct {            /* kaarttitel: vet, kapitaal, met ⓘ (owner-regel: één symbool) */
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size:var(--t-base); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  color: var(--text); margin: 0 0 .55rem;
}
.ct .spacer { flex: 1; }
/* korte melding rechts in de kaarttitel (i.p.v. een .note die de kaart hoger maakt) */
.ct .ct-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size:var(--t-m); color: var(--text-2); }
/* kaarten van de andere tabs (aanvulling, bestellingen, social) openen met een
   .t-label: zelfde titelgewicht als de Streamlit-kaartkop, zodat élke kaart
   dezelfde taal spreekt (inhoud van die tabs blijft van Arthur) */
.card > .t-label:first-child, .card > div:first-child > .t-label:first-child {
  font-size:var(--t-base); letter-spacing: .01em; color: var(--text); margin-bottom: .5rem;
}
.row { display: grid; gap: 1rem; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr !important; } }

/* ⓘ-tooltip: gethemede hover-popup (identiek aan .theo-tip in Home.py) */
.theo-tip { position: relative; cursor: help; color: var(--text-olijf); font-weight: 400;
            font-size:var(--t-ml); line-height: 1; }
/* De bel zelf tekent niets meer: de uitleg loopt via de zwevende .hintbox
   (app.js). Die meet zichzelf, hugt korte tekst en klemt zich binnen het
   venster — een absolute ::after met vaste breedte deed geen van drieën en werd
   bovendien afgeknipt door elke ouder met overflow (owner 9/09). */
/* waarschuwingsvariant (owner 4/09, aanvulling): een oranje uitroepteken-icoon
   met dezelfde hover-uitleg — voor "let op"-toestanden die anders als losse
   regels de kaart hoog maakten */
.theo-tip.warn { color: var(--oranje-fel); display: inline-flex; align-items: center; }
.theo-tip.warn svg.ic { width: 20px; height: 20px; }

/* ⓘ in een kolomkop (owner 4/09, aanvulling): de tabelkop knipt overtollige
   inhoud af, dus de hover-tekst wordt vast gepositioneerd (ontsnapt aan
   overflow:hidden) en valt net onder het symbool */
th .theo-tip { font-size:var(--t-m); margin-left: 4px; text-transform: none; letter-spacing: 0; }


/* tegel in een kaart (_tile): linnen, donkerbruine linkerbalk */
.tile {
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-left: .45rem solid var(--text-2); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 8px 12px;
}
.tile .t-label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size:var(--t-m); color: var(--text-2); display: flex; align-items: center; gap: 6px;
}
.tile .v { font-size:var(--t-xl); font-weight: 600; color: var(--text); line-height: 1.35; }
.tile .d { font-size:var(--t-s); color: var(--text-3); margin-top: 2px; }
.tile .d.up { color: var(--ok); } .tile .d.down { color: var(--err-ink); }
/* pagina-KPI (st.metric): crème, dunne gouden balk, groter cijfer */
.metric {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 12px 14px; box-shadow: 0 1px 4px rgba(110, 98, 68, .10);
}
.metric .t-label { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size:var(--t-m); color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.metric .v { font-size:var(--t-2xl); font-weight: 600; color: var(--text); }
.metric .d { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metric .dchip, .hero .dchip { border-radius: 999px; padding: 2px 10px; white-space: nowrap; font-size:var(--t-s); font-weight: 700; }
.metric .dchip.up, .hero .dchip.up { background: var(--ok-bg); color: var(--ok); }
.metric .dchip.down, .hero .dchip.down { background: var(--err-bg); color: var(--err-ink); }
.metric .dlab { color: var(--text-3); font-size:var(--t-s); }

/* ---- chips / legende ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size:var(--t-s); font-weight: 600; border-radius: 999px; padding: 2px 10px;
}
.chip.ok   { background: var(--ok-bg);  color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--brand-ink-2); }
.chip.err  { background: var(--err-bg); color: var(--err-ink); }
.chip.idle { background: var(--inset);      color: var(--text-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px;
          font-size:var(--t-s); color: var(--text-2); font-weight: 400; text-transform: none;
          letter-spacing: 0; }

/* ---- tabellen (st.dataframe-kaartlook; owner 3/09: kop vult de bovenkant,
        scroller onder de kop, inhoud nooit boven de kop) ---- */
/* De kaart knipt haar eigen inhoud, zodat de hoeken rond blijven en een brede
   kopbalk er niet uitsteekt (owner 7/09). Een keuzelijst ín de tabelkop zou daar
   normaal door weggeknipt worden; die krijgt daarom in app.js een zwevende positie
   buiten de kaart (wirePops). */
.tblwrap {
  overflow: hidden; border: 1px solid var(--p-olijf); border-radius: var(--r-l);
  background: var(--surface); box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
}
.tblwrap .tbl-h { background: var(--surface-2); border-bottom: 1px solid var(--line);
  overflow: hidden; position: relative; z-index: 3; }
.tblwrap .tbl-b { overflow: auto; max-height: 70vh; }
table { border-collapse: collapse; width: 100%; font-size:var(--t-m); }
th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-size:var(--t-s); font-weight: 700; color: var(--text-2);
  background: var(--surface-2);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th .sortic { display: inline-block; width: 1.1em; margin-left: 4px; font-size:var(--t-xs); color: var(--brand-deep); }
th.sortable.on { color: var(--brand-deep); }   /* kolom die de volgorde bepaalt: zelfde kleur als het pijltje */
/* zoekveld in de kolomkop (proef owner 3/09) + de ruimte ervoor in de meetrij */
th .th-q { width: 170px; margin-left: 10px; padding: 3px 8px; font-size:var(--t-m); font-weight: 400;
  vertical-align: middle; border-radius: 6px; }
tr.measure .th-q-sp { display: inline-block; width: 180px; }
/* totaalrij onderaan een tabel */
tr.total td { font-weight: 700; border-top: 2px solid var(--line); background: var(--surface-2); }
tbody tr.total:hover td { background: var(--surface-2); }
td { padding: 7px 12px; border-bottom: 1px solid var(--surface-3);
     white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.measure { visibility: collapse; }
tr.measure td { font-weight: 700; font-size:var(--t-s); padding: 0 12px; border: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(212, 175, 55, .07); }
td.hi { font-weight: 700; background: var(--warn-bg); color: var(--bruin-donker); }
td.r, th.r { text-align: right; }
.tbl-search { margin-bottom: 8px; }
.tbl-search input { width: 100%; max-width: 360px; }

/* ---- knoppen (st.button) ---- */
button, .btn {
  font: 400 var(--t-base) var(--font); color: var(--text);
  background: var(--surface); border: 1.5px solid var(--p-olijf);
  border-radius: var(--r-s); padding: .375rem .75rem; cursor: pointer;
  min-height: 40px; line-height: 1.6;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}
button:hover, .btn:hover { background: var(--brand); color: var(--wit); border-color: var(--brand); }
button:active, .btn:active { transform: scale(.97); }
button.primary { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2); font-weight: 600; }
button.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--wit); }
button:disabled, button:disabled:hover {
  color: var(--text-faint); border-color: var(--line); background: var(--surface);
  cursor: not-allowed; transform: none;
}
button.stretch { width: 100%; }
button.quiet { border-color: transparent; background: transparent; min-height: 32px; padding: 2px 8px; }
button.quiet:hover { background: var(--inset); color: var(--text); }
input, select, textarea {
  font: 400 var(--t-base) var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-s); padding: .45rem .75rem; min-height: 40px;
}
/* keuzerondjes en vinkjes in één huisstijl-kleur (owner 3/09): olijfrand,
   goud gevuld als gekozen — geen zwart/twee kleuren van de browser */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; min-height: 0; width: 17px; height: 17px; margin: 0; padding: 0; border-radius: 0;
  border: 1.5px solid var(--p-olijf); background: var(--surface); cursor: pointer; flex: none;
  display: inline-grid; place-content: center; transition: background .12s var(--ease), border-color .12s var(--ease);
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--brand-deep); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--brand); border-color: var(--brand); }
/* het vinkje en het bolletje als achtergrond, niet met ::before: de schermafdruk bij een ticket
   (html2canvas) breekt op een ::before in een invoerveld (Bart 2/10, maandoverzicht) */
input[type="checkbox"]:checked { background-repeat: no-repeat; background-position: center; background-size: 72% 72%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.4 5.1-5.3' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type="radio"]:checked { background-repeat: no-repeat; background-position: center; background-size: 46% 46%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E"); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; }

/* segmented control (st.segmented_control) */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; }
.seg button { min-height: 36px; padding: 2px 18px; border: 0; border-radius: 0; background: var(--surface);
  font-size:var(--t-ml); border-right: 1px solid var(--line-strong); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface-3); color: var(--text); }
.seg button.on { background: rgba(212, 175, 55, .28); color: var(--brand-ink-2); font-weight: 600; }
/* compacte variant: datakeuze in een kaartkop of detailpaneel */
.seg.sm button { min-height: 30px; padding: 2px 12px; font-size:var(--t-m); }
.pop-panel label, .pop-panel .lbl { display: block; margin: 8px 0 4px; font-size:var(--t-ml); color: var(--text); }

/* popover (st.popover): knop + zwevend paneel */
.pop { position: relative; display: inline-block; }
.pop .pop-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 300px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 14px 16px; box-shadow: var(--shadow-pop);
}
.pop.open .pop-panel { display: block; animation: viewin .16s var(--ease); }
.pop.right .pop-panel { left: auto; right: 0; }
.pop-panel .stack > * + * { margin-top: .6rem; }

/* uitklapper (st.expander) */
details.exp { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
details.exp > summary { cursor: pointer; padding: .6rem 1rem; list-style: none; font-weight: 500;
  display: flex; align-items: center; gap: 8px; }
details.exp > summary::-webkit-details-marker { display: none; }
details.exp > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg); transition: transform .15s var(--ease); }
details.exp[open] > summary::after { transform: rotate(-135deg); }
details.exp > .exp-body { padding: .2rem 1rem 1rem; }

/* melding (st.warning/st.info in kaartdracht) */
.note {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: .55rem .85rem; color: var(--text); font-size:var(--t-ml);
  display: flex; gap: 10px; align-items: flex-start;
}
.note.warn { border-left-color: var(--warn); }
.note.err  { border-left-color: var(--p-rood-inkt); }
/* codeblok (st.code) met kopieerknop */
.codebox { position: relative; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: .7rem 2.8rem .7rem .9rem; }
.codebox pre { margin: 0; white-space: pre-wrap; font: 400 var(--t-m)/1.45 var(--font); color: var(--text); }
.codebox .copy { position: absolute; top: 6px; right: 6px; }

/* ---- login ---- */
#login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
#login[hidden] { display: none; }
#login form {
  width: 360px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 32px 28px; text-align: center;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 12px;
}
#login form[hidden] { display: none; }
#login img { width: 180px; margin: 0 auto 4px; }
#login .rule { width: 50px; height: 2px; background: var(--brand); margin: 0 auto 10px; border-radius: 1px; }
#login input { width: 100%; }
/* 'Ingelogd blijven op dit toestel' (Arthur 29/09) */
#login .login-keep { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size:var(--t-m);
  color: var(--text-2); cursor: pointer; text-align: left; }
#login .login-keep input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--brand-deep); }
#login .err { color: var(--err-ink); font-size:var(--t-m); min-height: 18px; margin: 0; }
#login .t-meta a { color: var(--brand-deep); }

/* ---- paginawissel (gevoeld, niet bekeken) ---- */
.view { animation: viewin .22s var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: viewin .25s var(--ease) backwards; }
.stagger > *:nth-child(2) { animation-delay: .04s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .view, .stagger > * { animation: none; }
  * { transition: none !important; }
}

/* ---- toestanden ---- */
.empty { text-align: center; color: var(--text-3); padding: 42px 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.loading { color: var(--text-3); padding: 30px; text-align: center; }
.wip-note { background: var(--surface-3); border: 1px solid var(--line);
  border-left: 3px solid var(--p-olijf); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 14px 18px; color: var(--text-2); max-width: 68ch; }

/* markdown (voorwaarden, handboek) */
.md { max-width: 80ch; }
.md h1 { font-size:var(--t-xl); margin: 22px 0 8px; }
.md h2 { font-size:var(--t-l); margin: 20px 0 6px; }
.md h3 { font-size:var(--t-base); margin: 16px 0 4px; }
.md table { font-size:var(--t-m); margin: 0; border-collapse: collapse; }
.md .tbl-x { overflow-x: auto; max-width: 100%; margin: 10px 0; }   /* tabel blijft binnen de kaart */
.md code { background: var(--inset); border-radius: 4px; padding: 1px 5px; font-size: .88em; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; white-space: normal; vertical-align: top; text-align: left; }
.md th { background: var(--surface-3); font-weight: 600; }
.md p, .md li { line-height: 1.55; }
.md li { margin: 4px 0; }
.md a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; }
.md a:hover { color: var(--brand-deep); }

/* merk-hero op Start (Home.py .theo-hero): logo, gouden streep, script-tagline, links */
.theo-hero { text-align: center; padding: .5rem 0 .1rem; margin: 0 0 1rem;
  display: flex; flex-direction: column; align-items: center; }
.theo-hero img { width: 210px; max-width: 60vw; display: block; }
.theo-hero-rule { width: 58px; height: 2px; background: var(--brand); margin: 12px auto 8px; border-radius: 1px; }
.theo-tagline { font-family: "Segoe Script", "Brush Script MT", cursive; color: var(--text-olijf);
  font-size:var(--t-base); line-height: 1.3; display: block; margin-top: 2px; }
.theo-links { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 12px; }
.theo-links a { color: var(--text-2); text-decoration: none; font-weight: 700; font-size:var(--t-m);
  letter-spacing: .03em; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.theo-links a:hover { color: var(--text); }
.theo-links svg { width: 18px; height: 18px; flex: none; }
/* paginalink-regel (st.page_link): icoon + tekst, rij licht op bij hover */
.pagelink { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 2px -8px;
  border-radius: var(--r-s); color: var(--text); text-decoration: none; font-size:var(--t-ml); }
.pagelink:hover { background: var(--surface-3); }
.pagelink svg.ic { width: 18px; height: 18px; opacity: .85; }

/* gouden puntjeslijn (menukaart-lijst, Start) */
.leader { display: flex; align-items: baseline; gap: .5rem; padding: .16rem 0; }
.leader .n { font-weight: 700; white-space: nowrap; }
.leader .fill { flex: 1; height: 2px; min-width: 14px; transform: translateY(-3px);
  background-image: radial-gradient(circle, rgba(201, 162, 39, .55) 1.1px, transparent 1.3px);
  background-size: 7px 2px; background-repeat: repeat-x; }
.leader .v { font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- analyse: st.tabs, st.pills, st.radio, hero-KPI, legende met puntjes ---- */
/* HIËRARCHIE (owner 4/09) — vier niveaus, vier verschillende vormen, zodat je
   in één oogopslag ziet wat wat verandert:
     1 · scherm   → .screen-tabs: teksttabs naast de paginatitel, gouden
                    onderlijn op één doorlopende haarlijn (verandert de PAGINA)
     2 · periode  → .ctl-bar: één omkaderde balk zoals in de planner
                    (geldt voor ELK scherm van de analyse)
     3 · weergave → .tabs: pil-tabs, gevuld goud (binnen één scherm)
     4 · datakeuze→ .seg: segment-schakelaar, licht goud (binnen één weergave)
   .pills blijft voorbehouden aan chips: filterwaarden die met de data
   meebewegen (categorie-chips, gekozen artikelen) — geen niveau. */
.page-head.tabbed { display: flex; align-items: flex-end; gap: 8px 32px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin: .2rem 0 .55rem; }
.page-head.tabbed::after { display: none; }
.page-head.tabbed h1 { padding-bottom: .5rem; }
.screen-tabs { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: -1px; }
.screen-tabs button { background: none; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; padding: 0 1px .48rem; min-height: 0; font-size:var(--t-base); color: var(--text-2); }
.screen-tabs button:hover { background: none; color: var(--text); border-bottom-color: var(--line-strong); }
.screen-tabs button.on { color: var(--text); font-weight: 700; border-bottom-color: var(--brand); }
.ctl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: .5rem .8rem; box-shadow: var(--shadow-card); }
.ctl-bar .ctl-lbl { font-size:var(--t-m); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.ctl-bar .spacer { flex: 1 1 10px; }
/* meerdere kaders naast elkaar (Periode · Zone), elk zo breed als zijn inhoud */
.ctl-bars { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.ctl-bars > .ctl-bar, .ctl-bars > div > .ctl-bar { flex: 0 0 auto; }
.ctl-bars > div:empty { display: none; }
.ctl-bar .pnav .plabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-bar .pnav .dp-nav { width: 28px; }
/* uitklaplijst (dropdown) in huisstijl: knop met ▾, paneel = lijst */
.pop-btn.dd-btn { min-height: 32px; padding: 2px 10px 2px 14px; font-size:var(--t-ml); }
.pop .pop-panel:has(.dd-list) { min-width: 0; padding: 6px; }
.dd-list { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.dd-list button { justify-content: flex-start; border-color: transparent; background: transparent; min-height: 34px; padding: 2px 12px; border-radius: 6px; font-size:var(--t-ml); white-space: nowrap; }
.dd-list button:hover { background: var(--surface-3); color: var(--text); }
.dd-list button.on { background: rgba(212, 175, 55, .28); color: var(--brand-ink-2); font-weight: 600; }
/* omzet als tegel (owner 4/09): dezelfde kaart als de drie ernaast, groter cijfer */
.metric.hero-metric .v { font-size:var(--t-4xl); line-height: 1.1; }
.metric.hero-metric .d { margin-top: 6px; }
.lbl-sm { font-size:var(--t-m); color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pnav { display: inline-flex; align-items: center; gap: 2px; }
.pnav .plabel { min-width: 152px; text-align: center; font-size:var(--t-ml); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 20px; min-height: 38px; font-size:var(--t-ml); color: var(--text); }
.tabs button:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
.tabs button.on { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2);
  font-weight: 600; box-shadow: 0 1px 4px rgba(184, 149, 44, .35); }
/* rij met datakeuzes onder een pil-tab of in een kaartkop */
.ctl-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.ctl-row .ctl-lbl { font-size:var(--t-m); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.ctl-row label.chk { display: inline-flex; align-items: center; gap: 8px; font-size:var(--t-ml); cursor: pointer; }
/* groei-chip los van tegel/hero (bv. "▲ 18,6% vs 1 jaar terug" in een kaartkop) */
.dchip { border-radius: 999px; padding: 2px 10px; white-space: nowrap; font-size:var(--t-s); font-weight: 700; }
.dchip.up { background: var(--ok-bg); color: var(--ok); }
.dchip.down { background: var(--err-bg); color: var(--err-ink); }
.dlab { color: var(--text-3); font-size:var(--t-s); }
/* grafiek met ‹ › aan weerszijden (zoals de maandkalender in de planner) */
.chart-nav { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 2px; }
.chart-nav .chart { min-width: 0; }
/* data-invoer (owner 5/09, blok G): grote aanraakvriendelijke kaarten voor de tablet */
.di-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.di-grid > .card { margin-top: 0 !important; }
.di-card .ct { margin-bottom: 8px; }
.di-card .di-form { display: grid; gap: 10px; }
.di-card input, .di-card textarea, .di-card select { width: 100%; box-sizing: border-box; font-size:var(--t-base); min-height: 46px; }
.di-card .seg { flex-wrap: wrap; }
.di-card.di-terug { box-shadow: inset 0 0 0 2px var(--brand-deep); }   /* invoer voor een vorige dag (27/09) */
.di-card .seg button { min-height: 48px; padding: 4px 14px; font-size:var(--t-base); }
/* hoeveelheid + eenheid: één hoogte, getal links, pijltjes rechts (owner 7/09) */
.di-qty { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 10px; align-items: end; }
.di-num { display: flex; align-items: stretch; height: 48px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; }
.di-card .di-num input { flex: 1; min-width: 0; min-height: 0; height: 100%; border: 0; background: transparent;
  font-size:var(--t-xl); font-weight: 600; text-align: left; padding: 0 10px; }
.di-num-btns { display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); }
.di-card .di-num-btns button { flex: 1 1 0; width: 44px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.di-card .di-num-btns button:hover { background: var(--surface-3); }
.di-num-btns button + button { border-top: 1px solid var(--line); }
.di-num-btns button:first-child svg { transform: rotate(180deg); }
.di-num-btns svg { width: 18px; height: 18px; }
.di-card .seg.di-units button { min-height: 46px; }   /* 46 + 1px rand boven en onder = 48, gelijk aan het getalveld */
/* zoekveld met icoon i.p.v. een kale lijn */
.di-search { position: relative; }
.di-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .5; pointer-events: none; }
.di-card .di-search input { padding-left: 38px; }
/* de suggestielijst is een flex-kolom en negeerde daardoor [hidden]: een lege
   beige balk onder het zoekveld (owner 7/09) */
.dd-list[hidden] { display: none !important; }
/* dagdelen met hun uren eronder */
.di-card .seg.di-grid-seg button { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.15; min-height: 44px; font-size:var(--t-base); }
.di-card .seg.di-grid-seg button small { font-size:var(--t-xs); font-weight: 400; color: var(--text-3); }
.di-card .seg.di-grid-seg button.on small { color: inherit; opacity: .8; }
/* dagdelen en werkposten altijd 2x2 — dat leest rustiger dan 3 + 1 (owner 7/09) */
.seg.di-shifts, .di-card .seg.di-grid-seg { grid-template-columns: repeat(2, 1fr); }
/* hoe haalbaar was het: vijf gezichtjes, groen in het midden */
.di-card .seg.di-lvl { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; border: 0; gap: 6px; overflow: visible; }
.di-card .seg.di-lvl button { border: 1px solid var(--line-strong); border-radius: var(--r-s); min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--t-s); font-weight: 600; padding: 4px 2px; color: var(--lv); line-height: 1.15; text-align: center; }
/* het gezichtje is getekend met lijnen, niet gevuld — de algemene icoonregel
   (fill: currentColor) maakte er anders een bol van (owner 7/09) */
.di-card .seg.di-lvl button:hover { background: var(--surface-3); }
.di-card .seg.di-lvl button.on { border-color: var(--lv); box-shadow: inset 0 0 0 2px var(--lv); background: var(--surface-3); }
/* eigen tijdkiezer */
.di-time { display: flex; align-items: center; gap: 6px; }
.di-time .di-tsep { font-weight: 700; color: var(--text-2); }
.di-time .pop-btn { min-height: 48px; }
.di-card button.primary.di-save { min-height: 54px; font-size:var(--t-base); width: 100%; }
.di-sug { position: relative; }
.di-sug .dd-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 240px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.di-sug .dd-list button { width: 100%; text-align: left; min-height: 44px; }
.di-sug .dd-list button small { color: var(--text-3); margin-left: 6px; }
.di-recent { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.di-recent .li { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size:var(--t-ml); }
.di-recent .li .t-meta { white-space: nowrap; }
.di-recent .li .spacer { flex: 1; }
.di-ok { color: var(--ok); font-weight: 600; }
/* icoontjes in de kaarttitel even groot (owner 6/09: ze verschilden per icoon) */
.di-card .ct > svg, .di-card .ct svg.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
/* segment dat over meerdere rijen mag lopen: even brede knoppen, elke cel omkaderd */
.seg.di-grid-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); width: 100%;
  border: 0; gap: 6px; overflow: visible; }
.seg.di-grid-seg button { border: 1px solid var(--line-strong); border-radius: var(--r-s); }
/* CSV-knop: huisstijl i.p.v. een blauwe link */
a.btn.dl-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface);
  color: var(--text); text-decoration: none; font-size:var(--t-ml); font-weight: 600; }
a.btn.dl-btn:hover { background: var(--surface-3); }
a.btn.dl-btn svg { width: 17px; height: 17px; }
/* beheer: nieuw invoerpunt */
.di-newform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.di-newform .di-fieldrow { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 150px 2fr; gap: 10px; align-items: center; }
.di-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.di-icons button { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); }
.di-icons button svg { width: 20px; height: 20px; }
.di-icons button:hover { background: var(--surface-3); }
.di-icons button.on { background: rgba(212, 175, 55, .28); border-color: var(--brand); }
@media (max-width: 760px) { .di-grid { grid-template-columns: 1fr; }
  .di-newform, .di-newform .di-fieldrow { grid-template-columns: 1fr; } }

/* actieknoppen in de accounttabel (maat in CSS zodat de telefoon ze kan vergroten) */
.acc-act { min-height: 30px; padding: 3px 10px; }
@media (max-width: 760px) { .acc-act { min-height: 36px; padding: 4px 12px; } }

/* accountformulieren: twee kolommen, op de telefoon één (owner 6/09) */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.acc-grid > * { min-width: 0; }
@media (max-width: 760px) { .acc-grid { grid-template-columns: 1fr; } }

/* hulpkaart op Account (owner 6/09) */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.help-card { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; background: var(--inset); }
.help-card .hn { font-weight: 700; color: var(--text); }
.help-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; font-size:var(--t-ml); }
.help-link:hover { color: var(--brand-deep); }
.help-link svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.help-card .help-link { display: flex; }

/* meldingen in de zijbalk (owner 6/09): nette regel, paneel zweeft ernaast */
.navalert { margin: 0 0 10px; }   /* zelfde breedte als de links eronder (owner 7/09) */
.na-head { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; min-height: 40px;
  font-size:var(--t-s); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); cursor: pointer; }
.na-head:hover, .navalert.open .na-head { background: var(--surface-3); border-color: var(--line-strong); }
.na-head svg { width: 16px; height: 16px; flex: none; }
.na-head > span:first-of-type { flex: 1; text-align: left; }
.na-n { background: var(--p-rood-inkt); color: var(--wit); border-radius: 999px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-size:var(--t-xs); line-height: 1;
  padding: 0 5px; flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.na-n:has(+ *), .na-n { text-indent: 0; }
/* ===== meldingencentrum (Arthur 1/10): de knop hierboven opent een pagina; het zwevende paneel
   dat hier stond, viel met veel meldingen van het scherm. Bovenaan 'Te doen', daaronder de
   berichten per dag met een keuze per soort. ===== */
.mc-taak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
/* elke soort heeft een vaste kleur, zoals in de Mailbox (Arthur 1/10: het centrum was te droog) */
.mc-s-post    { --mc-k: var(--p-petrol); }   /* blauwgroen: de Mailbox; een bericht neemt de kleur van zijn soort daar over */
.mc-s-rooster { --mc-k: var(--brand-deep); }   /* goud: het rooster */
.mc-s-uitval  { --mc-k: var(--p-baksteen); }   /* rood: uitval en wat achterloopt */
.mc-s-besch   { --mc-k: var(--p-olijfgroen); }   /* olijfgroen: beschikbaarheid */
.mc-s-klok    { --mc-k: var(--p-indigo); }   /* indigo: de prikklok */
.mc-s-dimona  { --mc-k: var(--p-roze); }   /* magenta: Dimona */
.mc-s-ticket  { --mc-k: var(--p-bruin); }   /* bruin: aanvragen aan Horecast */
.mc-s-aanvul  { --mc-k: var(--p-messing-donker); }   /* brons: aanvullen */
.mc-s-social  { --mc-k: var(--p-petrol); }   /* blauwgroen: sociale media */
.mc-s-overig  { --mc-k: var(--p-olijf); }
.mc-rij[class*="po-s-"] { --mc-k: var(--po-k); }
/* Arthur 16/10: de kleur van het pushbericht (melding_profiel.py) gaat voor die van de soort.
   De planning (📅) houdt de kleur van haar soort: goud voor het rooster, rood voor uitval. */
.mc-rij.mc-p-rood   { --mc-k: var(--p-baksteen); }   /* 🔴 niet uitgeklokt */
.mc-rij.mc-p-oranje { --mc-k: var(--p-oranje); }   /* 🟠 niet ingeklokt, te laat */
.mc-rij.mc-p-groen  { --mc-k: var(--p-blad-mid); }   /* 🟢 dagoverzicht in orde */
.mc-rij.mc-p-geel   { --mc-k: var(--brand-deep); }   /* 🟡 dagoverzicht met punten */
.mc-rij.mc-p-alarm  { --mc-k: var(--p-wijn); }   /* 🚨 Dimona-fout */
.mc-rij.mc-p-prijzen { --mc-k: var(--p-petrol-2); }  /* 📈 prijsstijgingen (16/10) */
.mc-taak { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-left: 5px solid var(--mc-k, var(--warn));
  border-radius: var(--r-s); background: var(--surface-2); color: var(--text); text-decoration: none; font-size:var(--t-ml); line-height: 1.3; }
.mc-taak:hover { border-color: var(--line-strong); border-left-color: var(--mc-k, var(--warn)); background: var(--surface-3); }
.mc-taak span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.mc-taak > svg { width: 18px; height: 18px; flex: none; opacity: .45; }
.mc-balk { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mc-filters { margin: 4px 0 6px; }
.mc-filters button { display: inline-flex; align-items: center; gap: 6px; }
.mc-bol { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--mc-k, var(--p-olijf)); }
.mc-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 10px; background: var(--inset); color: var(--text-2);
  font-size:var(--t-xs); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.mc-n.fel { background: var(--p-rood-inkt); color: var(--wit); }
.mc-dag { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size:var(--t-s); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.mc-dag b { font-weight: 700; }
.mc-dag span { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--inset); font-weight: 700; text-align: center; letter-spacing: 0; }
.mc-lijst { border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.mc-rij { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px 11px 10px; border-top: 1px solid var(--line); border-left: 6px solid var(--mc-k, var(--p-olijf));
  color: var(--text); text-decoration: none; background: var(--surface); }
.mc-rij:first-child { border-top: 0; }
.mc-rij:hover { background: var(--surface-3); }
.mc-rij.nieuw { background: var(--surface); }
.mc-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mc-k, var(--p-olijf)); color: var(--wit); display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.mc-ic svg { width: 18px; height: 18px; fill: currentColor; opacity: 1; }
.mc-rij > svg { width: 18px; height: 18px; flex: none; opacity: .4; align-self: center; }
.mc-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size:var(--t-xs); color: var(--text-3); }
.mc-soort { display: inline-block; padding: 1px 9px; border-radius: 10px; background: var(--mc-k, var(--p-olijf)); color: var(--wit); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.mc-uur { font-variant-numeric: tabular-nums; margin-left: 2px; }
.mc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 10px; font-weight: 700; white-space: nowrap; background: var(--inset); color: var(--text-2); }
.mc-chip svg { width: 13px; height: 13px; fill: currentColor; }
.mc-chip.donker { background: var(--chrome-2); color: var(--wit); }
.mc-chip.fel { background: var(--err-bg); color: var(--err-ink); }
.mc-chip.ok { background: var(--ok-bg); color: var(--groen-donker); }
.mc-chip.nieuw { background: var(--warn-bg); color: var(--brand-ink); }
.mc-zin { font-size:var(--t-ml); line-height: 1.4; overflow-wrap: anywhere; color: var(--text-2); }
.mc-rij.nieuw .mc-zin { color: var(--text); font-weight: 500; }
.mc-leeg { display: flex; align-items: center; gap: 8px; padding: 18px 4px 6px; color: var(--text-2); }
.mc-leeg svg { width: 18px; height: 18px; fill: var(--ok); }
.mc-meer { text-align: center; margin-top: 14px; }
/* het actiescherm van één melding, #/melding?id=... (Arthur 16/10, iPhone: geen knoppen in het
   pushbericht, dus hier groot). De kleur van het profiel bovenaan de kaart. */
.ma-scherm { --ma-k: var(--p-olijf); max-width: 560px; margin: 0 auto; min-height: calc(100dvh - var(--header-h) - 48px); display: flex; flex-direction: column; gap: 10px; }
.ma-p-rood { --ma-k: var(--p-baksteen); } .ma-p-oranje { --ma-k: var(--p-oranje); } .ma-p-groen { --ma-k: var(--p-blad-mid); }
.ma-p-geel { --ma-k: var(--brand-deep); } .ma-p-alarm { --ma-k: var(--p-wijn); } .ma-p-planning { --ma-k: var(--brand-deep); }
.ma-terug { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 44px; padding: 0 6px 0 0; color: var(--text-2); text-decoration: none; font-weight: 700; }
.ma-terug svg { width: 22px; height: 22px; fill: currentColor; }
.ma-kaart { flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; border-top: 8px solid var(--ma-k); text-align: center; padding: 24px 18px 20px; }
.ma-emoji { font-size:var(--t-4xl); line-height: 1; }
.ma-emoji svg { width: 54px; height: 54px; fill: var(--ma-k); }
.ma-titel { margin: 4px 0 0; font-size:var(--t-3xl); line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.ma-wie { font-size:var(--t-l); font-weight: 700; color: var(--ma-k); overflow-wrap: anywhere; }
.ma-tekst { margin: 6px 0 0; font-size:var(--t-l); line-height: 1.45; color: var(--text-2); text-align: left; overflow-wrap: anywhere; white-space: pre-line; }
.ma-regels { margin: 10px 0 0; padding-left: 1.2em; text-align: left; font-size:var(--t-base); line-height: 1.45; color: var(--ink); }
.ma-regels li + li { margin-top: 4px; }
.ma-uur { text-align: left; }
.ma-knoppen { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ma-knop { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 16px; border: 2px solid var(--p-olijf);
  border-radius: var(--r-l); background: var(--surface); color: var(--text); font: inherit; font-size:var(--t-l); font-weight: 700; text-decoration: none; cursor: pointer; }
.ma-knop svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.ma-knop:hover { background: var(--surface-3); }
.ma-knop.primary { background: var(--ma-k); border-color: var(--ma-k); color: var(--wit); }
.ma-knop.primary:hover { filter: brightness(.95); background: var(--ma-k); }
.ma-knop.ma-wa { background: var(--p-groen-fel); border-color: var(--p-groen-fel); color: var(--wit); }
.ma-knop:disabled { opacity: .55; cursor: default; background: var(--inset); }
/* voorstel bij vergeten uitklokken (16/10): het uur uit de kassa met de reden, boven de knoppen */
.ma-voorstel { text-align: left; border-left: 4px solid var(--ma-k); background: var(--surface-3); border-radius: var(--r-m, 8px); padding: 10px 12px; overflow-wrap: anywhere; }
.ma-voorstel-kop { font-size:var(--t-l); }
.ma-voorstel-reden { font-weight: 700; margin-top: 2px; }
.ma-voorstel-bewijs { margin: 6px 0 0; padding-left: 18px; }
.kl-voorstel { margin-top: 5px; font-size:var(--t-m); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kl-voorstel .t-meta { flex-basis: 100%; }
/* shiften ruilen (Arthur 16/10): hoe het aanbod nu staat, en een fout na Goedkeuren / Weigeren / Ik neem over */
.ma-stand { text-align: left; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--inset); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.ma-fout { text-align: left; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--err-bg); color: var(--wijn); font-weight: 700; overflow-wrap: anywhere; }
/* Klok > Codes > Kassagebruikers (16/10): een blok per kassagebruiker, ook op 390 px zonder scrollen opzij */
.kl-kg { border-top: 1px solid var(--line); padding: 10px 0; overflow-wrap: anywhere; min-width: 0; }
.kl-kg-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kl-kg-kop .chip { margin-left: auto; }
.kl-kg-voor { margin-top: 4px; font-weight: 600; }
.kl-kg-red { margin: 4px 0 0; padding-left: 18px; font-size:var(--t-m); }
.kl-kg-knop, .kl-kg-kies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kl-kg-kies[hidden] { display: none; }
.kl-kg-kies select { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.kl-kg-msg:empty { display: none; }
/* de knop + (een aanvraag) zweeft rechtsonder op de gsm: de laatste knop blijft er vrij van */
@media (max-width: 760px) { .ma-scherm { padding-bottom: 64px; min-height: calc(100dvh - var(--header-h) - 24px); } }
/* de dagbriefing #/briefing en het weekrapport #/rapport (Arthur 16/10): gsm eerst, een kolom kaarten;
   vanaf 900 px twee kolommen. Afdrukken: zonder zijbalk en knoppen. */
.bf-scherm { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bf-hoofd { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bf-hoofd h1 { margin: 2px 0 0; font-size:var(--t-2xl); line-height: 1.15; color: var(--text); }
.bf-dagen { display: flex; gap: 6px; }
.bf-dagen .btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; justify-content: center; }
.bf-dagen svg { width: 20px; height: 20px; fill: currentColor; }
.bf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .bf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf-blok { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-left: 5px solid var(--ok); padding: 14px 16px; }
.bf-blok.bf-let { border-left-color: var(--p-oranje); }
.bf-kop { display: flex; align-items: center; gap: 8px; }
.bf-kop svg { width: 20px; height: 20px; fill: var(--p-olijf); flex: none; }
.bf-kop h2 { margin: 0; font-size:var(--t-base); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.bf-groot { font-size:var(--t-3xl); font-weight: 800; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.bf-groot small { font-size:var(--t-ml); font-weight: 600; color: var(--text-2); }
.bf-sub { margin: 0; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
.bf-lijst { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.bf-lijst a { color: var(--text); text-decoration-color: var(--p-olijf); }
.bf-naar { align-self: flex-start; margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; color: var(--text-olijf); text-decoration: none; }
.bf-naar svg { width: 18px; height: 18px; fill: currentColor; }
.bf-posten { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bf-post { border-top: 1px solid var(--inset); padding-top: 6px; }
.bf-postkop { display: flex; justify-content: space-between; gap: 8px; }
.bf-post.bf-tekort .bf-postkop span { color: var(--baksteen); font-weight: 700; }
.bf-mensen { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.bf-mens { background: var(--surface-3); border-radius: 999px; padding: 2px 9px; font-size:var(--t-ml); white-space: nowrap; }
.bf-mens small { color: var(--text-2); }
.bf-mens.bf-open { background: var(--warn-bg); color: var(--oranje-nacht); font-weight: 700; }
.bf-uren { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bf-uren span { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 3px 5px; border-radius: 6px; background: var(--surface-3); font-size:var(--t-m); }
.bf-uren span.bf-nat { background: var(--info-bg); }
.bf-err { color: var(--baksteen); font-weight: 700; } .bf-warn { color: var(--oranje-nacht); font-weight: 700; } .bf-info { font-weight: 700; }
.bf-plus { color: var(--blad-mid); } .bf-min { color: var(--baksteen); }
.bf-tabel { width: 100%; border-collapse: collapse; font-size:var(--t-ml); table-layout: fixed; }
.bf-tabel th, .bf-tabel td { text-align: left; padding: 4px 4px; border-bottom: 1px solid var(--inset); overflow-wrap: anywhere; }
.bf-tabel th:first-child, .bf-tabel td:first-child { width: 28%; }
.bf-tabel td:nth-child(2) { position: relative; }
.bf-balk { position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w); background: rgba(212,175,55,.22); border-radius: 3px; z-index: 0; }
.bf-tabel tr.bf-beste td { font-weight: 700; color: var(--blad-mid); } .bf-tabel tr.bf-slechtste td { color: var(--baksteen); }
.bf-voet { margin: 0; }
@media (max-width: 760px) { .bf-scherm { padding-bottom: 64px; } .bf-hoofd h1 { font-size:var(--t-xl); } }
@media print {
  body:has(.bf-scherm) .sidenav, body:has(.bf-scherm) #navopen, body:has(.bf-scherm) .topbar,
  body:has(.bf-scherm) .bf-dagen, body:has(.bf-scherm) .tk-fab, body:has(.bf-scherm) .bf-naar { display: none !important; }
  body:has(.bf-scherm) #shell, body:has(.bf-scherm) #main { display: block; margin: 0; padding: 0; }
  .bf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-blok { break-inside: avoid; box-shadow: none; }
}
/* het maandoverzicht #/maandoverzicht (Arthur 16/10): dezelfde kaarten als de briefing (bf-*), met per blok
   de tijd bespaard en haar aanname, de bron achter ⓘ en een tabel tegenover de vorige maand */
.mo-links { transform: rotate(180deg); }
.mo-totaal { border-left: 5px solid var(--p-olijf); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.mo-vergelijk, .mo-geen, .mo-aannames { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.mo-klein { font-size:var(--t-m); }
.mo-tijd { list-style: none; margin: 4px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--inset); display: flex; flex-direction: column; gap: 3px; }
.mo-tijd li { overflow-wrap: anywhere; line-height: 1.35; }
.mo-tijd strong { color: var(--blad-mid); }
.mo-tijd span { color: var(--text-2); font-size:var(--t-m); }
.mo-bron { font-size:var(--t-m); color: var(--text-2); }
.mo-bron summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; list-style: none; }
.mo-bron summary::-webkit-details-marker { display: none; }
.mo-bron summary svg { width: 16px; height: 16px; fill: currentColor; }
.mo-bron p { margin: 2px 0 0; line-height: 1.4; overflow-wrap: anywhere; }
.mo-tabel th:first-child, .mo-tabel td:first-child { width: 52%; }
.mo-tabel td:nth-child(n+2), .mo-tabel th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.mo-op, .mo-neer { font-weight: 700; }   /* neutraal: meer correcties of een hogere loonkost is niet "goed" */
.mo-aannames code { overflow-wrap: anywhere; }
@media print { .mo-blok, .mo-totaal, .mo-vergelijk, .mo-geen, .mo-aannames { break-inside: avoid; box-shadow: none; } }
/* ingeklapte zijbalk: enkel het belletje met de teller */
.nav-closed .navalert { margin: 0 6px 8px; }
.nav-closed .na-head { justify-content: center; padding: 8px 4px; }
.nav-closed .na-head > span:first-of-type { display: none; }

/* patroonkaarten in het persoonsdossier: even hoog, grafieken op dezelfde lijn
   (owner 6/09: een titel die omsloeg duwde zijn grafiek naar beneden) */
.pat-row > .card { display: flex; flex-direction: column; }
.pat-row > .card .ct { min-height: 2.2em; align-items: flex-start; }
.pat-row > .card .chart { margin-top: auto; }

/* kaart Wijzigingen: telling per soort + drie ranglijstjes (owner 6/09) */
.mod-kinds { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 14px; }
.mod-kind { display: inline-flex; align-items: center; gap: 7px; font-size:var(--t-m); color: var(--text-2);
  background: var(--inset); border-radius: 999px; padding: 4px 13px; }
.mod-kind i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mod-kind strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mod-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; }
.mod-h { font-weight: 700; color: var(--text); margin-bottom: 8px; font-size:var(--t-ml); }
.mod-row { display: grid; grid-template-columns: minmax(80px, 1fr) 84px 40px; gap: 8px; align-items: center;
  min-height: 26px; font-size:var(--t-ml); }
.mod-row .nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-row .bar { background: var(--inset); border-radius: 999px; height: 8px; overflow: hidden; }
.mod-row .bar i { display: block; height: 100%; border-radius: 999px; }
.mod-row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* aandeel per contracttype als chips i.p.v. een lange zin (owner 6/09) */
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; justify-content: center; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); color: var(--text-2);
  background: var(--inset); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.ct-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ct-chip strong { color: var(--text); font-weight: 600; }

/* keuzelijst met zoekveld (persoonsdossier, owner 6/09) */
.dd-pick { min-width: 260px; }
.dd-pick .dd-q { width: 100%; box-sizing: border-box; margin-bottom: 6px; min-height: 34px; }
.dd-pick .dd-list { max-height: 300px; }

/* legenderegel die naar de bol springt (owner 6/09) */
.leglist .li.clickable { cursor: pointer; border-radius: var(--r-s); padding: 0 4px; margin: 0 -4px; }
.leglist .li.clickable:hover { background: var(--surface-3); }

/* knopgroep rechts in een kaarttitel (patroon TOON/TOP, owner 6/09) */
.ct .ct-tools { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ct .ct-tools .ctl-lbl { font-size:var(--t-m); color: var(--text-2); letter-spacing: 0; display: inline-flex; align-items: center; gap: 6px; }
/* "Zo werkt het": icoon + kop + uitleg i.p.v. een blok tekst */
.vm-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 22px; }
.vm-how-item { display: flex; gap: 12px; align-items: flex-start; }
.vm-how-item svg { width: 22px; height: 22px; flex: none; margin-top: 2px; opacity: .8; }
.vm-how-item strong { display: block; color: var(--text); margin-bottom: 2px; }
.vm-how-item p { margin: 0; color: var(--text-2); line-height: 1.5; font-size:var(--t-ml); }

/* legende onder een grafiek: bolletje + tekst, gecentreerd */
.chart-legend { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 4px; font-size:var(--t-s); color: var(--text); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills button { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 2px 14px; min-height: 32px; font-size:var(--t-m); color: var(--text); }
.pills button:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
.pills button.on { border-color: var(--brand); color: var(--brand-ink-2); background: var(--surface); font-weight: 500; }
.radio { display: inline-flex; gap: 22px; align-items: center; font-size:var(--t-ml); }
.radio label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio input[type="radio"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--brand-deep); margin: 0; }
.hero .t-label { color: var(--text-2); }
.hero .big { font-size:var(--t-4xl); font-weight: 700; line-height: 1.08; color: var(--text-zacht); font-variant-numeric: tabular-nums; }
.hero .chips { margin-top: 3px; min-height: 1.3em; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.hero .dchip { border-radius: 999px; padding: 2px 10px; white-space: nowrap; font-size:var(--t-s); font-weight: 700; }
.hero .dchip.up { background: var(--ok-bg); color: var(--ok); } .hero .dchip.down { background: var(--err-bg); color: var(--err-ink); }
.hero .dlab { color: var(--text-3); font-size:var(--t-s); }
.leglist { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.leglist .li { display: flex; align-items: center; gap: 6px; line-height: 1.25; font-size:var(--t-xs); color: var(--text-zacht); }
.leglist .li .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
.leglist .li .dots { flex: 1; border-bottom: 1px dotted var(--creme-mat); margin: 0 2px; }
.leglist .li .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chart { width: 100%; }
.itx-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; justify-content: flex-start;
  border-left: 5px solid var(--brand); background: var(--surface-2); border-radius: 6px; border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 44px; padding: 8px 14px;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.itx-pane { border: 1px solid var(--line); border-radius: var(--r-m); padding: .75rem 1.1rem; background: var(--surface); }
/* artikelverkenner (owner 4/09): zoekbalk + categorie-chips + sorteerbare tabel */
.itx-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); padding: 0 12px; margin-bottom: 10px; color: var(--text-3); }
.itx-search input { flex: 1; border: 0; background: transparent; padding-left: 0; min-height: 42px; font-size:var(--t-base); }
.itx-search input:focus-visible { outline: none; }
.itx-search:focus-within { border-color: var(--brand-deep); box-shadow: 0 0 0 2px rgba(212, 175, 55, .25); }
.chip-rows { display: flex; flex-direction: column; gap: 6px; }
.chip-rows .pills button .t-meta { font-size:var(--t-xs); margin-left: 2px; }
.itx-tools { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 10px 0; }
.itx-tools .spacer { flex: 1; }
#itx-table tbody tr { cursor: pointer; }
#itx-table th.itx-tick svg.ic { width: 18px; height: 18px; vertical-align: -4px; }
#itx-table td.itx-tick input { width: 18px; height: 18px; min-height: 0; margin: 0; }
#itx-table tbody tr.sel td { background: rgba(212, 175, 55, .18); }
#itx-table td.itx-name { font-weight: 500; }
/* het actieve chip van het diepste niveau: gevuld goud, zodat je ziet in welke tak je zit (owner 4/09) */
.pills button.on.leaf { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2); font-weight: 600; }
.pills button.on.leaf .t-meta { color: var(--text); opacity: .8; }
.sec-title { font-family: var(--font); font-size:var(--t-base); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-zacht); border-left: .45rem solid var(--brand); border-bottom: 1.2px solid var(--brand);
  background: linear-gradient(90deg, var(--inset) 0%, transparent 85%); padding: .22rem 0 .22rem .6rem; margin: .55rem 0 .7rem; }
.range-in { display: inline-flex; align-items: center; gap: 10px; font-size:var(--t-ml); }
.range-in input[type="range"] { accent-color: var(--p-wijn); min-height: 0; width: 220px; }
.avatar { border-radius: 50%; color: var(--wit); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---- personeelsplanner ---- */
.pl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-bar .spacer { flex: 1; }
/* Importeer + Exporteer blijven één blok, uiterst rechts; past het niet meer naast de
   kiezer, dan springt het blok als geheel naar de volgende regel (owner 10/09: op een
   toekomstige dag viel 'Exporteer' alleen onder de kalenderknop) */
.pl-bar .pl-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 760px) { .pl-bar .pl-right { flex-wrap: wrap; margin-left: 0; max-width: 100%; } .pl-bar .pop-btn { min-width: 0; } }
.pl-bar .pl-pick > .pop-btn { min-width: 0; }
.pl-bar .pop-btn { min-width: 238px; }
.pl-bar .pl-imp.warn .pop-btn { border: 1.5px solid var(--p-rood-inkt); color: var(--wijn); font-weight: 600; }
.pl-bar .warnmark { color: var(--err-ink); display: inline-flex; }
.pl-bar .pl-imp.warn .pop-btn:hover { color: var(--wit); }
.pl-bar a.btn { text-decoration: none; }
.pl-bar a.btn.disabled { color: var(--text-faint); border-color: var(--line); pointer-events: none; }
.pl-bar .pop-panel { min-width: 340px; }
/* elke kalender-popover (planner, analyse) even breed en met dezelfde dagcellen */
.pop .pop-panel:has(.dp) { min-width: 340px; }
/* de kiezer (popover): dag-/weekraster en maandenlijst in de huisstijl */
.dp { width: 100%; }
.dp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.dp-head .spacer { flex: 1; }
.dp-title { font-weight: 600; font-size:var(--t-ml); }
.dp-nav { width: 32px; padding: 0; }
.dp-nav svg.ic { width: 20px; height: 20px; }
.dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size:var(--t-xs); font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-radius: 8px; }
.dp-day { appearance: none; border: 0; background: transparent; border-radius: 6px; min-height: 34px; padding: 0;
  font: 500 var(--t-m) var(--font); color: var(--text); cursor: pointer; }
.dp-day.out { color: var(--text-faint); }
.dp-day:disabled { color: var(--text-faint); opacity: .45; cursor: default; }
.dp-day:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--brand-deep); }
.dp-day.sel { background: var(--brand); color: var(--p-inkt-2); font-weight: 700; }
/* weekkeuze: de hele rij is één doorlopende rechthoek (owner 3/09) */
.dp-week.pick { cursor: pointer; }
.dp-week.pick:hover { background: var(--surface-3); }
.dp-week.pick:hover .dp-day { background: transparent; }
.dp-week.sel { background: rgba(212, 175, 55, .35); }
.dp-week.sel .dp-day { background: transparent; font-weight: 600; }
.dp-week.sel:hover { background: rgba(212, 175, 55, .5); }
/* maandkeuze: 12 maanden van één jaar in een raster; zonder rooster = gedempt */
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dp-m { appearance: none; border: 0; background: transparent; text-align: center; border-radius: 6px; min-height: 38px;
  padding: 4px 8px; font: 400 var(--t-ml) var(--font); color: var(--text); justify-content: center; }
.dp-m:hover { background: var(--surface-3); color: var(--text); }
.dp-m.out { color: var(--text-faint); }
.dp-m.sel { background: var(--brand); color: var(--p-inkt-2); font-weight: 600; }
.dp-m:disabled { opacity: .35; cursor: default; }
/* analyse-kiezer (owner 4/09): kwartalen 2×2, tussenliggende dagen van een aangepast bereik */
.dp-months.dp-q { grid-template-columns: repeat(2, 1fr); }
.dp-months.dp-q .dp-m { flex-direction: column; gap: 0; line-height: 1.15; min-height: 46px; }
.dp-day.mid { background: rgba(212, 175, 55, .35); font-weight: 500; }
.pop-panel .seg button { padding: 2px 11px; font-size:var(--t-m); min-height: 32px; }
/* import-knop: rood + ⚠ zolang de maand geen beschikbaarheden heeft, daarna gewoon met groen vinkje */
.pl-bar .pl-imp.ok .okmark { color: var(--ok); display: inline-flex; }
.pl-bar .pl-imp .theo-tip { cursor: help; }
.filebtn { cursor: pointer; }
/* maandkalender: pijlen links/rechts van het raster, legende gecentreerd eronder */
.cal-wrap { display: flex; align-items: center; gap: 10px; }
.cal-nav { width: 34px; padding: 0; flex: none; }
.cal-nav svg.ic { width: 22px; height: 22px; }
.cal-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 4px; margin-top: 12px; }
.cal-legend .legend { margin-left: 8px; }

.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center;
  font-size:var(--t-xs); font-weight: 600; color: var(--text); margin: 4px 0 4px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
/* de middenkolom van .cal-wrap is een flex-item zonder klasse: zonder flex:1
   krijgt ze haar inhoudsbreedte en loopt het raster op smalle schermen uit de
   kaart (iPhone 7/09: raster 232 px in een kaart van 328 px, zondagkolom en de
   pijl naar rechts vielen weg). minmax(0,1fr) laat de cellen ook echt krimpen. */
.cal-wrap > div { flex: 1 1 auto; min-width: 0; }
.cal-cell { appearance: none; border: 0; border-radius: 8px; min-height: 68px; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  font: inherit; cursor: pointer; transition: transform .1s var(--ease), filter .15s var(--ease); }
.cal-cell:hover { filter: brightness(.96); }
.cal-cell:active { transform: scale(.98); }
.cal-cell:disabled { cursor: default; filter: none; }
.cal-cell.out { background: transparent; border: 1px solid var(--surface-4); color: var(--p-grijs); cursor: default; }
.cal-cell.out .dn { font-weight: 500; }
/* dagnummer echt in het midden van de cel; het weer blijft rechtsboven en het
   tekort onderaan, allebei zwevend zodat ze het cijfer niet uit het midden duwen
   (owner 7/09). Niet voor de socialemedia-agenda, die deelt enkel de klasse. */
.cal-cell:not(.soc-day) { justify-content: center; }
.cal-cell .dn { font-weight: 600; font-size:var(--t-ml); line-height: 1; }
.cal-cell:not(.soc-day) .dn { margin: 0; }
.cal-cell .ks { font-size:var(--t-xs); line-height: 1; min-height: .7rem; }
.cal-cell:not(.soc-day) .ks { position: absolute; left: 8px; right: 8px; bottom: 6px; text-align: center; min-height: 0; }
/* sociale media (owner 4/09, avond): zelfde raster als de planner; dagen zonder
   post = alleen een randje, dagen mét iets = ingekleurd */
.cal-cell.soc-day { border: 1px solid var(--line); background: transparent; color: var(--text); text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.cal-cell.soc-day .ks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 1rem; font-size:var(--t-xs); color: var(--text-2); white-space: nowrap; }
.cal-cell.soc-day .ks .hol { font-style: normal; font-size:var(--t-xs); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 5px; color: var(--text-3); }
.cal-cell.soc-day.posted { background: var(--ok-bg); border-color: var(--ok); }
.cal-cell.soc-day.planned { background: var(--warn-bg); border-color: var(--warn); }
.cal-cell.soc-day.rhythm { background: var(--surface-3); border-color: var(--line-3); }
.cal-cell.soc-day.today { box-shadow: inset 0 0 0 2px var(--brand-deep); }
.cal-cell.soc-day:hover { background: var(--surface-3); filter: none; }
/* instelling-tegel (bv. "Post elke … dagen"): valt op als iets dat Bart invult */
.tile.setting { background: var(--inset); border-left-color: var(--brand); }
/* stepper (owner 4/09): getal met − en + ernaast — instelling-tegel, werkposten min/max */
.stepper { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; }
.stepper input { width: 64px; text-align: center; min-height: 36px; padding: 2px 6px; font-weight: 600; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.stepper button { width: 32px; min-height: 36px; padding: 0; font-size:var(--t-l); }
/* werkposten: het speelbord — knopen zijn klikbaar */
.ws-map .ws-node { cursor: pointer; }
.ws-map .ws-node:hover rect { filter: brightness(.95); }
.ws-map .ws-node[data-st]:hover rect { stroke-width: 3.5; }
/* weekrooster zoals INDII's weekscherm (owner 27/09): afdeling links, dagen boven,
   groen = beschikbaar gegeven, rood = kan niet, blok = ingepland */
/* vastzetten (Arthur 29/09, 1/10): de dagkop, de rij 'Nog open' en het totaal blijven in
   beeld als je door de ploeg scrolt. De tabel scrolt in haar EIGEN kader ('in de witte
   rechthoek scrollen in plaats van de hele pagina'): de kop plakt bovenaan dat kader, het
   totaal onderaan. De hoogte van het kader zet staffing.js (--wk-max-h: tot de onderrand
   van het venster); zonder script geldt het venster min de kopband. Randen los van elkaar
   (separate): samengevoegde randen reizen niet mee met een vastgezette cel. */
.tblwrap.wk-wrap { overflow: auto; max-height: min(var(--wk-max-h, 100vh), calc(100vh - var(--header-h) - 20px)); --wk-top: 0px; --wk-lijn: var(--text-2); overscroll-behavior: auto; scrollbar-gutter: stable; }
@media (max-width: 1180px) {
  .wk-tbl { min-width: 900px; }
}
.wk-tbl { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size:var(--t-s); }
.wk-tbl th, .wk-tbl td { border: 0 solid var(--line); border-width: 0 1px 1px 0; vertical-align: top; }
.wk-tbl tr > :last-child { border-right-width: 0; }
.wk-tbl thead th { text-align: center; padding: 8px 6px; font-weight: 700; background: var(--inset); position: sticky; top: var(--wk-top); z-index: 6; }
/* dikke lijn tussen de afdelingen (Arthur 29/09) en onder de vastgezette rijen */
.wk-tbl tbody tr.wk-g-last > *, .wk-tbl tbody th.wk-afd, .wk-tbl tr.wk-open-row > * { border-bottom: 3px solid var(--wk-lijn); }
.wk-tbl tr.wk-total > * { border-bottom-width: 0; position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 0 var(--wk-lijn); }
.wk-tbl thead th.vandaag { box-shadow: inset 0 -3px 0 var(--brand-deep); }
.wk-tbl thead th.wk-afd svg.ic { width: 20px; height: 20px; color: var(--text-2); }
.wk-tbl .wk-dd { font-weight: 600; color: var(--text-2); font-size:var(--t-xs); }
.wk-tbl .wk-wx { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size:var(--t-xs); color: var(--text-2); background: var(--paper); border-radius: 10px; padding: 1px 7px; }
.wk-tbl .wk-wx .wx-ic { width: 16px; height: 16px; }
/* het weer in een oogopslag (Bart 30/09 'zie app weer', Arthur 1/10): het icoontje en zijn
   etiket krijgen de kleur van het weer, klein gehouden. Zon goud, wolken grijs, regen blauw,
   onweer paars, sneeuw ijsblauw. */
.wk-wx { --wx-k: var(--text-2); --wx-bg: var(--paper); }
.wk-wx.wxk-zon { --wx-k: var(--p-oranje-fel); --wx-bg: var(--p-messing-tint); }
.wk-wx.wxk-halfbewolkt { --wx-k: var(--p-messing-donker); --wx-bg: var(--p-zand); }
.wk-wx.wxk-bewolkt, .wk-wx.wxk-mist { --wx-k: var(--p-leisteen); --wx-bg: var(--p-steen-licht); }
.wk-wx.wxk-regen, .wk-wx.wxk-buien { --wx-k: var(--p-blauw-mid); --wx-bg: var(--p-blauw-tint-2); }
.wk-wx.wxk-onweer { --wx-k: var(--p-paars-donker); --wx-bg: var(--p-paars-tint); }
.wk-wx.wxk-sneeuw { --wx-k: var(--p-hemel); --wx-bg: var(--p-blauw-tint); }
.wk-tbl .wk-wx[class*="wxk-"], .wk-legend .wk-wx { background: var(--wx-bg); color: var(--text); font-weight: 600; }
.wk-wx[class*="wxk-"] .wx-ic { color: var(--wx-k); stroke-width: 1.9; }
.wk-legend .wk-wx { display: inline-flex; align-items: center; border-radius: 10px; padding: 1px 6px; margin-right: 5px; }
.wk-legend .wk-wx .wx-ic { width: 15px; height: 15px; }
.wk-tbl tbody th { font-weight: 600; }
.wk-tbl .wk-afd { text-align: center; vertical-align: middle; font-weight: 700; width: 84px; background: var(--inset); }
.wk-tbl .wk-naam { text-align: left; padding: 6px 8px; width: 150px; white-space: nowrap; vertical-align: middle; }
.wk-tbl .wk-naam small { display: block; font-weight: 400; color: var(--text-2); font-size:var(--t-xs); white-space: normal; line-height: 1.25; }
.wk-tbl td.wk-cell { padding: 0; height: 56px; }
.wk-tbl td.wk-cell.ja { background: var(--p-blad-licht); }
.wk-tbl td.wk-cell.nee { background: var(--p-baksteen); color: var(--wit); }
.wk-open { appearance: none; border: 0; background: transparent; width: 100%; height: 100%; min-height: 60px; padding: 4px 5px; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-radius: 0; }
.wk-open:hover { background: rgba(0, 0, 0, .05); }
.wk-blk { background: rgba(255, 255, 255, .88); border-radius: 4px; padding: 3px 5px; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.wk-blk.wijz { box-shadow: inset 0 0 0 1.5px var(--brand-deep); }
.wk-blk.open { background: var(--warn-bg); }
.wk-t { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; flex-wrap: wrap; }
.wk-t svg.ic { width: 13px; height: 13px; color: var(--text-2); }
.wk-t i { font-style: normal; color: var(--text-2); font-weight: 400; }
.wk-e { display: flex; justify-content: space-between; gap: 6px; color: var(--text-2); font-size:var(--t-xs); }
.wk-e b { color: var(--text); display: inline-flex; align-items: center; gap: 3px; }
.wk-e b svg.ic, .wk-tot b svg.ic, .wk-total b svg.ic { width: 12px; height: 12px; color: var(--text-2); }
/* beschikbaar voor een deel van de dag (Arthur 21/10): 'kan 11–22' met een vinkje, geen kaart, dus
   geen verwarring met een shift. Vaste inkt: de groene grond van het vak is in beide thema's licht. */
.wk-vrij { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font-size:var(--t-xs); font-weight: 600;
  color: var(--p-inkt-2); border: 1px dashed rgba(34, 29, 23, .45); border-radius: 999px; padding: 1px 7px 1px 4px; }
.wk-vrij svg.ic { width: 12px; height: 12px; }
/* zei 'ik kan niet' en staat toch op het rooster (usability-test 4/11): een rode pil boven het blok */
.wk-kanniet { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; font-size:var(--t-xs); font-weight: 700;
  background: var(--err); color: var(--on-solid); border-radius: 999px; padding: 1px 7px 1px 4px; }
.wk-kanniet svg.ic { width: 12px; height: 12px; }
.wk-lg-vrij { background: var(--p-blad-licht); }       /* in de legende: op de groene grond, zoals in het vak */.wk-tbl td.wk-tot { text-align: right; padding: 6px 8px; vertical-align: middle; white-space: nowrap; width: 96px; }
.wk-tbl td.wk-tot span { color: var(--text-2); }
.wk-tbl td.wk-tot b, .wk-tbl tr.wk-total b { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.wk-tbl tr.wk-total th, .wk-tbl tr.wk-total td { background: var(--inset); font-weight: 700; text-align: right; padding: 8px; white-space: nowrap; vertical-align: middle; }
.wk-tbl tr.wk-total th { text-align: left; }
.wk-tbl tr.wk-total td span { color: var(--text-2); font-weight: 600; }
.wk-tbl tr.wk-open-row > * { position: sticky; top: calc(var(--wk-top) + var(--wk-head-h, 84px)); z-index: 5; background: var(--surface); }
.wk-tbl tr.wk-open-row th.wk-nogopen { background: var(--warn-bg); text-align: left; padding: 6px 10px; vertical-align: middle; }
.wk-tbl tr.wk-open-row th.wk-nogopen span { display: block; font-weight: 700; }
.wk-tbl tr.wk-open-row th.wk-nogopen small { display: block; font-weight: 400; color: var(--text-2); font-size:var(--t-xs); line-height: 1.25; white-space: normal; }
.wk-tbl tr.wk-open-row td.vol, .wk-tbl tr.wk-open-row td.wk-tot { background: var(--warn-bg); }
.wk-tbl tr.wk-open-row td.wk-cell { height: auto; }
.wk-tbl tr.wk-open-row .wk-open { min-height: 44px; gap: 1px; justify-content: flex-start; align-items: stretch; padding: 5px 6px; white-space: normal; text-align: left; }
.wk-tbl tr.wk-open-row td.vol .wk-open:hover { background: rgba(0, 0, 0, .06); }
.wk-ob { font-size:var(--t-xs); line-height: 1.35; color: var(--text); white-space: normal; text-align: left; }
.wk-ob b { font-weight: 700; margin-right: 5px; }
.wk-ob span { display: inline-block; margin-right: 6px; white-space: nowrap; }
.wk-ob i { font-style: normal; color: var(--text-2); margin-left: 2px; }
.wk-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size:var(--t-s); color: var(--text-2); }
/* weekrooster, tickets van Bart 30/09 (Arthur 1/10) ---------------------------------------- */
/* kleur per afdeling: keuken groen, zaal vast fel geel, bar bruin, zaal extra zacht geel, kuis
   blauw (Barts keuze), afwas grijs. Alleen het vak van de afdeling links krijgt de kleur
   (Arthur 1/10); de naamcel en de dagcellen blijven vrij, daar betekent kleur al
   beschikbaar of niet. */
.wk-tbl { --afd-keu: var(--p-groen-terras); --afd-zv: var(--p-geel); --afd-bar: var(--p-bruin); --afd-afw: var(--p-steen); --afd-ze: var(--p-messing-tint); --afd-sch: var(--p-blauw-mid); }
.wk-tbl th.wk-afd.afd-keu { background: var(--afd-keu); color: var(--wit); }
.wk-tbl th.wk-afd.afd-zv { background: var(--afd-zv); color: var(--messing-nacht); }
.wk-tbl th.wk-afd.afd-bar { background: var(--afd-bar); color: var(--wit); }
.wk-tbl th.wk-afd.afd-afw { background: var(--afd-afw); color: var(--wit); }
.wk-tbl th.wk-afd.afd-ze { background: var(--afd-ze); color: var(--messing-nacht); }
.wk-tbl th.wk-afd.afd-sch { background: var(--afd-sch); color: var(--wit); }
.wk-tbl tbody th.wk-naam { position: relative; padding-right: 26px; }
/* contracttype: een bolletje voor de korte naam, met legende onder de tabel */
.wk-type { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--p-olijf-licht); vertical-align: 1px; }
.wk-type.t-vast { background: var(--p-blauw-donker); }
.wk-type.t-flexi { background: var(--p-paars); }
.wk-type.t-student { background: var(--p-oranje-2); }
.wk-type.t-extra { background: var(--p-petrol); }
.wk-type.t-zelf { background: var(--p-antraciet); }
.wk-type.t-dagc { background: var(--p-messing-donker); }
/* de naam in de kleur van het contract (ticket Bart 2/10); donker genoeg als tekst op het lichte en het groene vak */
.wk-tbl .wk-naam .wk-nm.t-vast { color: var(--blauw-donker); }
.wk-tbl .wk-naam .wk-nm.t-flexi { color: var(--paars-donker); }
.wk-tbl .wk-naam .wk-nm.t-student { color: var(--oranje-donker); }
.wk-tbl .wk-naam .wk-nm.t-extra { color: var(--petrol-donker); }
.wk-tbl .wk-naam .wk-nm.t-zelf { color: var(--text-zacht); }
.wk-tbl .wk-naam .wk-nm.t-dagc { color: var(--brand-ink); }
.wk-tbl .wk-naam small.wk-mu b { font-weight: 800; margin-left: 5px; }
.ct .wk-nav { display: inline-flex; gap: 2px; margin-left: 10px; vertical-align: middle; }
.ct .wk-nav button.quiet { font-size:var(--t-2xl); font-weight: 800; line-height: 1; padding: 0 10px; min-height: 0; height: 28px; color: var(--ink); }
.wk-legend-type { margin-top: 6px; align-items: center; }
.wk-legend-type .legend { display: inline-flex; align-items: center; }
.wk-tbl .wk-naam small.wk-geen-type { color: var(--err-ink); font-style: italic; }
.wk-tbl .wk-naam small.wk-mu { color: var(--text); font-weight: 600; }
/* de naam van de afdeling blijft in beeld als je door een lange groep scrolt: ze plakt onder
   de vastgezette rijen en boven het totaal, binnen haar eigen gekleurde vak */
.wk-afd-lbl { display: block; position: sticky; top: calc(var(--wk-head-h, 84px) + var(--wk-open-h, 60px) + 10px); bottom: 50px; padding: 4px 2px; }
.wk-wrap.laag .wk-tbl tr.wk-open-row > * { position: static; }
.wk-wrap.laag .wk-afd-lbl { top: calc(var(--wk-head-h, 84px) + 10px); }
a.pl-lnk { color: var(--brand-deep); }
/* beschikbaarheid aanpassen in het weekrooster (Bart, Arthur 1/10) */
.wk-acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.cal-wrap.av-mode .wk-tbl td.wk-cell:not(.vol) .wk-open:not(:disabled) { cursor: cell; outline: 1px dashed var(--brand-deep); outline-offset: -3px; }
.cal-wrap.av-mode .wk-tbl td.wk-cell .wk-open:disabled { cursor: not-allowed; opacity: .55; }
.cal-wrap.av-mode .wk-tbl td.wk-cell.bezig { opacity: .6; }
/* volgorde van de afdelingen (Arthur 1/10): knopje in de hoek, lijst met pijltjes in het venster */
.wk-tbl thead th.wk-afd { white-space: nowrap; }
.wk-volg { display: inline-flex; padding: 2px; margin-left: 2px; min-width: 0; min-height: 0; border: 0; background: transparent; color: var(--text-2); vertical-align: -4px; cursor: pointer; }
.wk-volg:hover, .wk-volg:focus-visible { color: var(--brand-deep); background: transparent; }
.wk-tbl thead th.wk-afd .wk-volg svg.ic { width: 16px; height: 16px; fill: none; }
.pl-volg { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; --afd-keu: var(--p-groen-terras); --afd-zv: var(--p-geel); --afd-bar: var(--p-bruin); --afd-afw: var(--p-steen); --afd-ze: var(--p-messing-tint); --afd-sch: var(--p-blauw-mid); }
.pl-volg li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.pl-volg li .spacer { flex: 1; }
.pl-volg-nr { width: 1.2em; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-volg-stip { width: 14px; height: 14px; border-radius: 4px; background: var(--inset); flex: none; }
.pl-volg-stip.afd-keu { background: var(--afd-keu); } .pl-volg-stip.afd-zv { background: var(--afd-zv); }
.pl-volg-stip.afd-bar { background: var(--afd-bar); } .pl-volg-stip.afd-afw { background: var(--afd-afw); }
.pl-volg-stip.afd-ze { background: var(--afd-ze); } .pl-volg-stip.afd-sch { background: var(--afd-sch); }
.pl-volg button { min-width: 34px; min-height: 30px; padding: 2px 6px; font-size:var(--t-s); line-height: 1; }
/* vuilbak naast de naam: de persoon voor de hele week of voor gekozen dagen van het rooster halen */
.wk-weg { position: absolute; top: 3px; right: 2px; padding: 3px; min-width: 0; border: 0; background: transparent; color: var(--text-2); opacity: .55; cursor: pointer; }
.wk-weg:hover, .wk-weg:focus-visible { opacity: 1; color: var(--err-ink); background: transparent; }
.wk-weg svg.ic { width: 15px; height: 15px; }
.pl-ov { position: fixed; inset: 0; background: rgba(40, 34, 20, .45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pl-dlg { background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); padding: 18px 20px; width: min(460px, 100%); max-height: 90vh; overflow: auto; }
.pl-dlg-kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pl-dlg .t-sub { margin: 0 0 10px; }
.pl-dlg-dagen { display: grid; gap: 6px; margin-bottom: 12px; }
.pl-dlg-dagen label { display: grid; grid-template-columns: 20px 130px 1fr; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.pl-dlg-dagen input { width: 16px; height: 16px; margin: 0; }
.pl-dlg-knoppen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-dlg-knoppen .spacer { flex: 1; }
/* feestdag of brugdag: de dagkop kleurt mee (het kan drukker zijn) */
.wk-tbl thead th.wk-d.feest, .wk-tbl thead th.wk-d.brug { background: var(--oranje-tint); }
.wk-tbl thead th.wk-d.brug { background: var(--warn-bg); }
.wk-fd { display: flex; align-items: center; justify-content: center; gap: 3px; font-size:var(--t-xs); font-weight: 600; color: var(--oranje-nacht); margin-top: 2px; white-space: normal; line-height: 1.2; }
.wk-fd .wx-ic { width: 14px; height: 14px; flex: none; }
.wk-lg-feest { background: var(--oranje-tint); }
/* knop en paneel 'Vast uurrooster' in de balk van de planner (Bart 1/10) */
.pl-vastknop { display: inline-flex; align-items: center; gap: 6px; }
.pl-vastknop.on { background: var(--brand); border-color: var(--brand-deep); color: var(--p-inkt-2); font-weight: 600; }
/* paneel Vast uurrooster (Arthur 1/10): een weekraster, een rij per persoon en een vak per
   weekdag. Groen vak = vaste werkdag met zijn uren, gestippeld vak = vrij; een klik opent de
   uren van die dag in een regel onder de persoon. */
.pl-vr-wrap { overflow-x: auto; }
.pl-vr { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; font-size:var(--t-m); }
.pl-vr thead th { padding: 0 4px; text-align: center; font-size:var(--t-xs); font-weight: 700; color: var(--text-2); text-transform: capitalize; }
.pl-vr thead th:first-child { text-align: left; width: 220px; }
.pl-vr thead th:last-child { width: 38px; }
.pl-vr tbody th { text-align: left; padding: 2px 10px 2px 0; font-weight: 700; vertical-align: middle; }
.pl-vr tbody th span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-vr tbody th small { display: block; font-weight: 400; font-size:var(--t-xs); color: var(--text-2); }
.pl-vr td { padding: 0 3px; vertical-align: middle; }
.pl-vr-dag { width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px;
  border: 1px dashed var(--line-strong); border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.pl-vr-dag:hover, .pl-vr-dag:focus-visible { border-color: var(--brand-deep); border-style: solid; background: var(--surface-3); color: var(--text); }
.pl-vr-dag.aan { border: 1px solid var(--p-salie); background: var(--blad-tint-2); color: var(--text); }
.pl-vr-dag.aan:hover, .pl-vr-dag.aan:focus-visible { background: var(--blad-tint-2); border-color: var(--p-blad-mid); }
.pl-vr-dag b { font-weight: 700; white-space: nowrap; }
.pl-vr-dag small { font-size:var(--t-xs); color: var(--text-2); }
.pl-vr-dag.kies { outline: 2px solid var(--brand-deep); outline-offset: 1px; }
.pl-vr-plus { font-size:var(--t-l); line-height: 1; opacity: .7; }
.pl-vr-eind { text-align: center; }
.pl-vr-uit { padding: 4px; min-width: 0; min-height: 0; border: 0; background: transparent; color: var(--text-2); opacity: .55; cursor: pointer; }
.pl-vr-uit:hover, .pl-vr-uit:focus-visible { opacity: 1; color: var(--err-ink); background: transparent; }
.pl-vr-uit svg.ic { width: 16px; height: 16px; }
.pl-vr th { background: transparent; border: 0; }
#pl-vr-edithost:not(:empty) { margin-top: 6px; }
.pl-vr-edit .pop-panel { max-height: 264px; overflow-y: auto; }
.pl-vr-edit .pl-vr-snel { min-height: 0; padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: 14px; background: transparent; color: var(--text-2); font-size:var(--t-m); cursor: pointer; }
.pl-vr-edit .pl-vr-snel:hover { border-color: var(--brand-deep); color: var(--text); }
.pl-vr-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; border: 1.5px solid var(--brand-deep); border-radius: 10px; background: var(--surface-3); }
.pl-vr-edit strong { min-width: 150px; }
.pl-vr-edit label { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); color: var(--text-2); }
.pl-vr-ook, .pl-vr-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex-basis: 100%; }
.pl-vr-edit .pl-vr-chip { gap: 5px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; text-transform: capitalize; }
.pl-vr-chip input { width: 15px; height: 15px; margin: 0; }
.pl-vr-chip:has(input:checked) { border-color: var(--p-blad-mid); background: var(--blad-tint-2); }
/* keuzeshift (Arthur/Bart 10/10): een dag 'ochtend óf avond' */
.pl-vr-of { font-style: normal; font-size:var(--t-xs); font-weight: 700; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .04em; }
.pl-vr-edit .pl-vr-keuze { flex-basis: 100%; gap: 8px; padding: 6px 10px; border: 1px dashed var(--warn); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.pl-vr-edit .pl-vr-keuze[hidden] { display: none; }
.pl-vr-keuze input { width: 16px; height: 16px; margin: 0; }
.pl-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: var(--surface-2); color: var(--messing-nacht); font-size:var(--t-s); }
.pl-keuze.vast { background: var(--inset); color: var(--text-2); }
.pl-keuze-t { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pl-keuze-t svg.ic { width: 14px; height: 14px; }
.pl-keuze small { color: inherit; opacity: .85; }
.pl-keuze-k { display: inline-flex; gap: 4px; }
.pl-keuze .pl-keuzepin { min-height: 0; padding: 2px 8px; border: 1px solid var(--warn); border-radius: 12px; background: var(--raised); color: var(--messing-nacht); font-size:var(--t-xs); cursor: pointer; }
.pl-keuze .pl-keuzepin svg.ic { width: 13px; height: 13px; }
.pl-keuze .pl-keuzepin:hover { background: var(--surface-3); }
.pld-meta .pl-keuze { flex-basis: 100%; }
/* keuzeshift in een smalle plek (weekcel, gsm-kaart, tabel): elke mogelijkheid op een eigen regel */
.kz-r { display: block; white-space: nowrap; }
.kz-rs { display: inline-flex; flex-direction: column; }
.pl-vr-nieuw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-vr-nieuw .spacer { flex: 1; }
/* personeel bewerken onder de ploegtabel (owner 27/09) */
.pl-ppl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; }
.pl-ppl-grid label { display: flex; flex-direction: column; gap: 4px; font-size:var(--t-s); color: var(--text-2); }
.pl-ppl-grid input, .pl-ppl-grid select { width: 100%; min-width: 0; }
.pl-ppl-grid label[hidden] { display: none; }   /* € per uur of € per maand, naar het kostmodel */
.pl-ppl-wide { grid-column: 1 / -1; }
.pl-posten { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 4px; }
/* vast uurrooster per medewerker (Arthur 30/09) */
.pl-vast-rijen { display: grid; gap: 4px 0; margin-top: 4px; }
/* de rij is een label in .pl-ppl-grid (daar staat flex-column en width 100% op de velden): specifieker */
.pl-ppl-grid .pl-vast-rij { display: grid; grid-template-columns: 18px 84px 100px max-content 100px 110px; gap: 6px; align-items: center; font-size:var(--t-s); color: var(--text); }
.pl-ppl-grid .pl-vast-rij input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.pl-ppl-grid .pl-vast-rij input[type=time], .pl-ppl-grid .pl-vast-rij select { width: 100%; min-width: 0; padding: 3px 6px; font-size:var(--t-s); }
.pl-ppl-grid .pl-vast-rij :disabled { opacity: .45; }
/* het vaste uurrooster in het formulier staat nu in Ploeg (tabs/ploeg.js), met dezelfde klassen */
.pl-vast-tag { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--inset); color: var(--antraciet); font-size:var(--t-xs); white-space: nowrap; }
@media (max-width: 640px) { .pl-ppl-grid .pl-vast-rij { grid-template-columns: 18px 70px 1fr max-content 1fr; } .pl-ppl-grid .pl-vast-rij select { grid-column: 2 / -1; } }
.pl-post { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-s); color: var(--text); }
.pl-ppl-knoppen { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wk-grid { display: grid; gap: 3px; align-items: stretch; }
.wk-h { text-align: center; font-size:var(--t-xs); font-weight: 600; padding-bottom: 4px; }
.wk-u { font-size:var(--t-xs); color: var(--text-2); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.wk-c { appearance: none; border: 0; border-radius: 4px; min-height: 34px; padding: 0; font: 600 var(--t-xs) var(--font); cursor: pointer; }
.wk-c:hover { filter: brightness(.94); }
.ctx { background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px; min-height: 56px; }
.ctx-ic svg.ic { width: 22px; height: 22px; color: var(--text-2); }
/* dagpagina: uurpatroon van het weer 9-19 u (owner 10/09) */
.ctx.wx-card { flex-direction: column; align-items: stretch; gap: 8px; }
.wx-kop { display: flex; align-items: center; gap: 14px; }
.wxh-strip { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; }
.wxh-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 6px;
  font-size:var(--t-xs); line-height: 1.15; min-width: 0; text-align: center; }
.wxh-cell > * { display: block; width: 100%; text-align: center; margin: 0 auto; }
.wxh-cell > svg { width: 22px; }
/* weer en evenementen even hoog (owner 11/09) */
.ctx-row { align-items: stretch; }
.ctx-row > .ctx { height: 100%; }
.ctx-row > #pl-ev { display: flex; }
.ctx-row > #pl-ev > .ctx { flex: 1; }
.wx-kop-txt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wx-kop-txt .wx-sub { font-size:var(--t-s); color: var(--text-2); }
.ev-card.ev-leeg { justify-content: center; }
.wxh-cell:hover { background: var(--line-2); }
.wxh-cell .wx-ic { width: 22px; height: 24px; }
.wxh-cell .wxh-h { color: var(--text-2); font-size:var(--t-xs); }
.wxh-cell b { font-size:var(--t-s); }
.wxh-cell small { color: var(--text-2); font-size:var(--t-xs); }
/* evenementen: koptekst met ‹ › om te bladeren */
.ev-kop { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.ev-kop .ev-nav { min-height: 24px; min-width: 24px; padding: 0 2px; margin-left: auto; }
.ev-kop .ev-nav + .t-meta + .ev-nav { margin-left: 0; }
.ev-kop .t-meta { font-size:var(--t-xs); }
/* maandcel: minimum na de slash, lichter */
.cal-cell .wx b i, .cal-cell .wx.fc b i { font-style: normal; font-weight: 500; opacity: .8; }
/* KMI-waarschuwing: symbool in de kleur van het niveau (derde ronde, 11/09) */
.wx-alarm { display: inline-flex; align-items: center; }
.wx-alarm svg.ic { width: 15px; height: 15px; }
.wx-alarm.lvl2 { color: var(--oranje-fel); } .wx-alarm.lvl3 { color: var(--oranje); } .wx-alarm.lvl4 { color: var(--baksteen); }
.cal-cell .wx.fc .wx-alarm.lvl2 { color: var(--brand-2); } .cal-cell .wx.fc .wx-alarm.lvl3 { color: var(--oranje-zacht); } .cal-cell .wx.fc .wx-alarm.lvl4 { color: var(--rood-zacht); }
.wx-alarm-line { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size:var(--t-m); line-height: 1.3; }
.wx-alarm-line svg.ic { width: 18px; height: 18px; flex: none; }
.wx-alarm-line.lvl2 { background: var(--line); color: var(--brand-ink); }
.wx-alarm-line.lvl3 { background: var(--oranje-tint); color: var(--oranje-nacht); }
.wx-alarm-line.lvl4 { background: var(--rood-tint-2); color: var(--rood-nacht); }

/* telefoon */
/* ===== responsive (owner 4/09, avond): drie varianten van dezelfde site =====
   laptop/desktop (> 1200 px): zijbalk vast open;
   tablet (≤ 1200 px, iPad staand én liggend): zijbalk dicht, » opent hem als
   overlay boven de inhoud, kaarten in twee kolommen;
   telefoon (≤ 760 px, iPhone): alles in één kolom, controlebalken wrappen,
   ‹ label › op een eigen regel, tabellen scrollen zijwaarts als geheel,
   grotere aanraakdoelen. */
@media (max-width: 1200px) {
  .sidenav { transform: translateX(-100%); }
  body.nav-open-phone .sidenav { transform: none; width: 320px; box-shadow: var(--shadow-pop); }
  body.nav-open-phone::before { content: ""; position: fixed; inset: 0; background: rgba(43, 37, 25, .28); z-index: 35; }
  .topbar { left: 0; }
  main { margin-left: 0; padding: calc(var(--header-h) + 16px) 2rem 50px; max-width: none; }
  #navopen { display: inline-flex; }
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ctl-bars { gap: 10px; }
  .pop .pop-panel { max-width: calc(100vw - 32px); }
  .soc-grid { grid-template-columns: 1fr !important; }
  .ws-map-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ws-map-wrap svg.ws-map { min-width: 760px; }
  .mk-design { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* R1 (handover-QA 7/09): op tablet (iPad portret, 834 px) waren tabellen
     breder dan het scherm zonder scroller — de rechterkolommen (werkposten:
     Warme dranken/Afwas/Koude dranken/Zaal) waren onbereikbaar. Dezelfde regel
     als op de telefoon: de tabel schuift als geheel zijwaarts. */
  .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tblwrap .tbl-b { max-height: none !important; overflow: visible; }
  .tblwrap .tbl-h { overflow: visible; }
}
@media (max-width: 760px) {
  /* dezelfde breedte open en dicht (Arthur 2/11): breedte en schuifbeweging veranderden tegelijk, waarna
     Safari het menu soms halverwege liet staan; de grijze laag is klikbaar (Safari stuurt anders geen tik) */
  /* zonder will-change (Bart 5/11): daarmee tekende Safari het open menu na een tel niet meer */
  .sidenav, body.nav-open-phone .sidenav { width: 82vw; }
  body.nav-open-phone::before { cursor: pointer; }
  main { padding: calc(var(--header-h) + 12px) 14px 50px; }
  .row { grid-template-columns: 1fr !important; }
  .page-head.tabbed { gap: 2px 18px; }
  .screen-tabs { gap: 16px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .screen-tabs button { white-space: nowrap; font-size:var(--t-base); }
  .ctl-bars > .ctl-bar, .ctl-bars > div > .ctl-bar { flex: 1 1 100%; }
  .ctl-bar { padding: .45rem .6rem; gap: 8px 10px; }
  .ctl-bar .pnav { flex: 1 1 100%; justify-content: space-between; }
  .ctl-bar .pnav .plabel { width: auto !important; flex: 1; }
  .ctl-bar .pop-btn { max-width: 100%; }
  /* Data Invoer, Periode: vijf knoppen liepen op 390 px 24 px buiten het scherm (vangnet 9/10) */
  .seg.di-periode { display: flex; width: 100%; }
  .seg.di-periode button { flex: 1 1 auto; padding: 2px 6px; white-space: nowrap; }
  /* Account & Gegevens, de rolkeuze in het formulier: was op 390 px 26 px te breed (vangnet 9/10) */
  .seg[data-roleseg] { display: flex; width: 100%; }
  .seg[data-roleseg] button { flex: 1 1 auto; padding: 2px 6px; }
  .ctl-row { gap: 8px 12px; }
  .chart-nav { grid-template-columns: 22px 1fr 22px; }
  .chart-nav .dp-nav { width: 22px; }
  /* kalender op telefoon (iPhone-QA 7/09): de twee pijlen zijn aanraakdoelen van
     44 px en knepen het raster tot 232 px in een kaart van 328 px — zeven kolommen
     van 30 px, met de zondagkolom half weg. Nu staan de pijlen op een eigen regel
     boven de kalender en krijgt het raster de volle breedte (cellen ~44 px). */
  .cal-wrap { gap: 2px 4px; flex-wrap: wrap; }
  .cal-wrap > div { flex: 1 1 100% !important; order: 3; }   /* de middendiv draagt een inline flex:1 */
  .cal-wrap > .cal-nav { order: 1; }
  .cal-wrap > .cal-nav + .cal-nav, .cal-wrap > .cal-nav:last-of-type { order: 2; margin-left: auto; }
  .cal { gap: 3px; } .cal-cell { min-height: 44px; padding: 5px 4px; } .cal-cell .dn { font-size:var(--t-xs); margin-top: 2px; }
  .cal-cell.soc-day .ks { display: none; }
  .dp-months { grid-template-columns: repeat(3, 1fr); }
  .pop .pop-panel { min-width: 0; width: calc(100vw - 28px); left: 0; }
  .pop.right .pop-panel { right: auto; left: 0; }
  .pop .pop-panel:has(.dp) { min-width: 0; }
  .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tblwrap .tbl-b { max-height: none !important; overflow: visible; }
  .tblwrap .tbl-h { overflow: visible; }
  th, td { padding: 6px 8px; }
  .metric.hero-metric .v { font-size:var(--t-3xl); }
  .hero .big { font-size:var(--t-3xl); }

  .mk-design { grid-template-columns: 1fr; }
  /* raakvlakken op telefoonformaat: ook zonder aanraakdetectie minstens 44 px
     (de browser meldt niet altijd pointer:coarse) — owner 6/09 */
  button, .btn, a.btn, .pop-btn, .screen-tabs button, .pagelink { min-height: 44px; }
  .pop-btn.dd-btn { min-height: 44px; padding: 2px 12px 2px 16px; }
  .seg button, .tabs button, .pills button, .dp-day { min-height: 44px; }
  button.quiet { min-height: 44px; min-width: 44px; }
  .sidenav a { min-height: 46px; }
  .na-head, .na-item { min-height: 46px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  /* dichte beheertabellen (scores 0-5, menu-editor): 44 px zou zes knoppen naast
     elkaar onwerkbaar maken, 36 px is met de duim nog te raken */
  td button, th button { min-height: 40px; }
  .seg.sm button { min-height: 36px; min-width: 36px; }
  .mk-tbl button, .mk-tbl .seg button { min-height: 36px; }
  .soc-photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .chip-rows .pills button { padding: 2px 10px; min-height: 30px; font-size:var(--t-m); }
  .itx-tools { gap: 6px 10px; }
  footer { flex-direction: column; gap: 4px; }
  /* meldingen (.note) zijn flexrijen: elk stuk tekst en elke <strong>/<span>
     wordt een eigen flex-item en dus een eigen kolom. Op een breed scherm valt
     dat niet op, op de iPhone breekt de zin in drie smalle kolommen (Analyse ›
     Personeel, 7/09). Op telefoonformaat dus gewoon een alinea met het icoon
     ernaast. */
  .note { display: block; }
  .note > svg { float: left; margin: 1px 8px 0 0; }
  .rf-cards { display: none; } .rf-strip { display: block; }
}
@media (pointer: coarse) {
  /* raakvlakken minstens 44 px (owner 6/09, handover-eis) */
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  .dp-day { min-height: 44px; }
  .seg button, .tabs button, .pills button { min-height: 44px; }
  button, .btn, a.btn, .pop-btn { min-height: 44px; }
  .pop-btn.dd-btn { min-height: 44px; }
  button.quiet { min-height: 44px; min-width: 44px; }
  .sidenav a { min-height: 46px; }
  .screen-tabs button { min-height: 44px; }
  .na-head, .na-item { min-height: 46px; }
  .pagelink { min-height: 44px; }
  td button, th button { min-height: 40px; }   /* in tabelcellen iets compacter */
}

footer {
  margin: 2.2rem 0 0; padding-top: .8rem; border-top: 2px solid var(--brand);
  color: var(--text-3); font-size:var(--t-s);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* totaal-chip van de omzetgrafiek (owner 4/09, avond): één afgerond vlak, tekst erin,
   rood bij daling en groen bij stijging, uitgelijnd op de rechterrand van de grafiek */
.dchip.big { padding: 4px 12px; font-size:var(--t-m); display: inline-flex; align-items: center; gap: 6px; }
.dchip.big .dl { font-weight: 500; opacity: .9; }
/* werkposten: slepen van een bestelgroep naar een station (owner 4/09, avond) */
.ws-map .ws-grab { cursor: grab; }
.ws-map.dragging { cursor: grabbing; }
.ws-map.dragging .ws-grab { cursor: grabbing; }
.ws-map [data-st].drop rect { stroke-width: 4; filter: brightness(.93); }
.ws-map .ws-dragline { pointer-events: none; opacity: .8; }
/* stille knop met dun randje in de tekstkleur (owner 5/09: Analyseer …, wis selectie) */
button.quiet.line { border: 1px solid currentColor; opacity: .9; }
button.quiet.line:hover { opacity: 1; }
/* analyse › klanten: zeven mini-grafieken (één per weekdag) op één rij (owner 5/09) */
.mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1200px) { .mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* lange uitklaplijst (bv. artikelkeuze): scrolt binnen het paneel */
.pop.dd-scroll .dd-list { max-height: 320px; overflow-y: auto; }
/* waarschuwingsmarkering (owner 5/09): rood uitroepteken bij "nog te koppelen" e.d. */
.warnmark { color: var(--err-ink); display: inline-flex; align-items: center; }
.tile.alert { border-left-color: var(--p-rood-inkt); }
.tabs button.alert { border-color: var(--p-rood-inkt); color: var(--wijn); }
.tabs button.alert.on { background: var(--err-bg); }
/* keuzefilter in een kolomkop: lijstje met vinkjes */
th .th-pick { margin-left: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
th .th-pick .pop-btn { min-height: 30px; padding: 2px 8px 2px 10px; font-size:var(--t-m); }
th .th-pick .pop-panel { text-align: left; }
.dd-chk { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size:var(--t-ml); cursor: pointer; white-space: nowrap; }
.dd-chk:hover { background: var(--surface-3); border-radius: 6px; }
/* werkposten: huisstijl-tooltip op het speelbord (owner 5/09) */
#ws-map { position: relative; }
.ws-tip { position: absolute; z-index: 20; max-width: 320px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0 var(--r-s) var(--r-s) 0;
  box-shadow: var(--shadow-pop); padding: .45rem .7rem; font-size:var(--t-m); line-height: 1.35; pointer-events: none; }
/* sociale media: gemiste ritme-dag (owner 5/09) */
.cal-cell.soc-day.missed { background: var(--err-bg); border-color: var(--p-rood-inkt); }
/* sociale media: beide kaarten in het raster even hoog (de ritme-marge van .view * + .card gold hier niet) */
.soc-grid > .card { margin-top: 0 !important; }
/* start (owner 5/09, schets): hero links, de twee kaarten rechts */
/* Start, ronde 2 (owner 5/09 avond): merkkaart bovenaan met de begroeting rechts,
   vijf klikbare tegels, daaronder komende week + versheid */
.start-hero-card { display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: center; padding: 1.1rem 1.8rem; }
.start-hero-card .theo-hero { margin: 0; padding: .3rem 1rem .2rem; }
.start-hero-card .theo-hero img { width: 170px; }
.start-hero-card .theo-hero-rule { margin: 8px auto 6px; }
.start-hero-card .theo-links { margin-top: 8px; }
.start-greet { border-left: 1px solid var(--line); padding-left: 2.2rem; }
.start-greet .g { font-size:var(--t-3xl); font-weight: 700; color: var(--text); line-height: 1.15; }
.start-greet .g .naam { color: var(--brand-deep); }   /* de naam in het goud (owner 6/09) */
.start-greet .t-meta { margin-top: 4px; }
.start-greet p { margin: 10px 0 0; color: var(--text-2); max-width: 60ch; line-height: 1.5; }
.start-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1rem; }
.start-bottom { grid-template-columns: 1.35fr 1fr; margin-top: 1rem; }
.start-bottom.single { grid-template-columns: 1fr; }
.tile-link { display: block; text-decoration: none; color: inherit; transition: background .15s, transform .15s; }
.tile-link:hover { background: var(--surface-3); transform: translateY(-1px); }
.tile-link .d .up { color: var(--ok); font-weight: 700; }
.tile-link .d .down { color: var(--err-ink); font-weight: 700; }
@media (max-width: 1200px) { .start-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .start-bottom { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .start-hero-card { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
  .start-greet { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .start-tiles { grid-template-columns: 1fr; } }

/* ---- telefoon: raakvlakken in dichte beheertabellen (owner 6/09) ----
   Helemaal achteraan omdat de basisregels van Werkposten en Menu verderop in dit
   bestand staan en anders winnen. 44 px is hier onwerkbaar (zes scoreknoppen naast
   elkaar), 36 px is met de duim nog te raken. */
@media (max-width: 760px) {
  .mk-tbl button, .mk-tbl .seg button, .mk-tbl select, .mk-tbl input { min-height: 36px; }
  .tblwrap td button, .tblwrap th button { min-height: 36px; }
}

/* beschikbaarheden in Data invoer (owner 6/09): kalender + formulier + team-matrix */
.av-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; }
.av-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.av-title { font-size:var(--t-base); min-width: 150px; text-align: center; }
.av-tool { min-height: 30px; padding: 2px 10px; font-size:var(--t-m); }
.av-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.av-wd { text-align: center; font-size:var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); padding: 4px 0; }
.av-day { position: relative; min-height: 58px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6px 7px; gap: 2px; cursor: pointer; text-align: left; }
.av-day .n { font-weight: 700; font-size:var(--t-ml); }
.av-day .st { font-size:var(--t-xs); color: var(--text-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.av-day .nt { position: absolute; right: 4px; top: 4px; opacity: .6; } .av-day .nt svg { width: 14px; height: 14px; }
.av-day.ja { background: var(--ok-bg); border-color: var(--blad-licht); } .av-day.ja .st { color: var(--ok); }
.av-day.nee { background: var(--err-bg); border-color: var(--rood-licht); } .av-day.nee .st { color: var(--err-ink); }
.av-day.today .n { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.av-day.sel { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--inset); }
.av-day.past { opacity: .4; cursor: default; }
.av-legend { display: flex; gap: 14px; margin-top: 8px; font-size:var(--t-s); color: var(--text-2); flex-wrap: wrap; }
.av-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); }
.av-legend i.ja { background: var(--ok-bg); border-color: var(--blad-licht); } .av-legend i.nee { background: var(--err-bg); border-color: var(--rood-licht); } .av-legend i.sel { background: var(--inset); border: 2px solid var(--brand); }
.av-form { border-left: 1px solid var(--line); padding-left: 18px; }
.av-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; margin-top: 4px; }
.av-times { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .av-times label { display: flex; align-items: center; gap: 6px; }
.av-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.av-stats { margin: 4px 0 10px; color: var(--text-2); }
.av-matrix-wrap { overflow-x: auto; }
.av-matrix { border-collapse: collapse; font-size:var(--t-s); }
.av-matrix th, .av-matrix td { border: 1px solid var(--line); padding: 3px 4px; text-align: center; min-width: 26px; white-space: nowrap; }
.av-matrix th:first-child, .av-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); min-width: 150px; }
.av-matrix th.we { background: var(--inset); }
.av-matrix td.ja { background: var(--ok-bg); color: var(--ok); font-weight: 700; } .av-matrix td.nee { background: var(--err-bg); color: var(--err-ink); font-weight: 700; }
.av-matrix tfoot td { font-weight: 700; color: var(--text-2); }
@media (max-width: 760px) {
  .av-wrap { grid-template-columns: 1fr; }
  .av-form { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .av-day { min-height: 52px; padding: 4px 4px; } .av-day .st { font-size:var(--t-xs); letter-spacing: -.02em; }
  .av-title { min-width: 120px; }
}

/* invoerkaarten op een telefoon: dagdelen 2x2, gezichtjes compacter (owner 7/09) */
@media (max-width: 620px) {
  .di-card .seg.di-lvl { grid-template-columns: repeat(2, 1fr); }
  .di-card .seg.di-lvl button { font-size:var(--t-s); }
  .di-qty { grid-template-columns: 1fr; }
}

/* Gebruik zet zijn inhoud in een eigen omhulsel (#gb), waardoor het verticale
   ritme van .view wegviel: de tegels plakten tegen de filterbalken (owner 7/09).
   Zelfde 1rem als bij Analyse. */
#gb > *:first-child { margin-top: 1rem; }

/* wachtwoordveld met oogje (owner 7/09): klikken toont wat je typt */
.pw-field { position: relative; }
.pw-field input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.pw-eye:hover { background: var(--surface-3); color: var(--text); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
svg.pw-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
svg.pw-ic .pupil { fill: currentColor; stroke: none; }
@media (max-width: 760px) { .pw-eye { width: 44px; height: 44px; } }

/* keuzelijst in een invoerkaart: even hoog als het getalveld, volle breedte */
.di-card .di-dd { display: block; }
.di-card .di-dd .pop { display: block; }
.di-card .di-dd .pop-btn { width: 100%; justify-content: space-between; min-height: 48px; font-size:var(--t-base); }
.di-card .dd-list button { justify-content: flex-start; gap: 8px; }
.di-card .dd-list button .theo-tip { margin-left: auto; }
/* twee velden naast elkaar (personen + uur) */
.di-row2 { display: grid; grid-template-columns: minmax(120px, .8fr) 1fr; gap: 10px; align-items: end; }
@media (max-width: 620px) { .di-row2 { grid-template-columns: 1fr; } }

/* weer in de agenda van de planner (Victor 7/09): symbool + maximumtemperatuur */
.cal-cell { position: relative; }
.cal-cell .wx { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px;
  font-size:var(--t-xs); font-weight: 600; opacity: .85; }
/* nog te gebeuren = licht beige, al gebeurd = de gewone tekstkleur */
.cal-cell .wx.fc { color: var(--on-chrome); opacity: .95; text-shadow: 0 0 2px rgba(70, 62, 40, .35); }
.cal-cell .wx b { font-weight: 600; }
svg.wx-ic { width: 17px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .cal-cell .wx { position: static; margin-top: 2px; font-size:var(--t-xs); }
  svg.wx-ic { width: 15px; height: 16px; }
}

/* paneel dat uit een geknipte tabelkop moet ontsnappen: js zet top/left en deze
   klasse (owner 7/09) */
.pop.open .pop-panel.pop-vrij { position: fixed; top: auto; left: auto; z-index: 70; }

/* ================= werkpost-tablet + medewerkerschermen (owner 7/09) =========
   Een iPad per werkpost, de hele dag open: alles groot genoeg om met natte of
   volle handen te bedienen en van een stap afstand leesbaar. Ontworpen op
   1024x768 (liggend) en 834x1194 (staand). */
.ws-scherm { display: flex; flex-direction: column; gap: 18px; }
.ws-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ws-post { font-size:var(--t-3xl); font-weight: 700; color: var(--text); line-height: 1.1; }
.ws-dag { color: var(--text-2); font-size:var(--t-base); margin-top: 2px; }
.ws-uur { text-align: right; border-radius: var(--r-l); padding: 10px 16px; background: var(--surface);
  border: 1px solid var(--line); min-width: 190px; }
.ws-uur-t { font-size:var(--t-2xl); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ws-uur-s { font-size:var(--t-ml); color: var(--text-2); }
.ws-uur.ok { border-color: var(--ok); background: var(--ok-bg); }
.ws-uur.ok .ws-uur-s { color: var(--ok-ink); }
.ws-uur.vraag { border-color: var(--brand); background: var(--surface-2); animation: ws-klop 2.2s ease-in-out infinite; }
@keyframes ws-klop { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 130, 43, .35); } 50% { box-shadow: 0 0 0 10px rgba(201, 130, 43, 0); } }
.ws-vraag { font-size:var(--t-xl); font-weight: 600; color: var(--text); }
.ws-melding { border-radius: var(--r-s); padding: 10px 14px; font-size:var(--t-base); }
.ws-melding.goed { background: var(--ok-bg); color: var(--groen-nacht); border: 1px solid var(--blad-licht); }
.ws-melding.fout { background: var(--err-bg); color: var(--wijn-rood); border: 1px solid var(--rood-licht); }
.ws-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ws-lvl { appearance: none; border: 2px solid var(--kl); background: var(--surface); color: var(--kl);
  border-radius: var(--r-l); padding: 22px 8px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; font: inherit; font-size:var(--t-l); font-weight: 600; cursor: pointer; min-height: 168px;
  transition: transform .1s var(--ease), background .15s var(--ease); }
.ws-lvl:active { transform: scale(.97); }
.ws-sm { width: 66px; height: 66px; }
.ws-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-h { flex: 1 1 auto; min-width: 44px; text-align: center; border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 6px 2px 8px; background: var(--surface); }
.ws-h.nu { border-color: var(--brand); border-width: 2px; }
button.ws-h { font: inherit; color: inherit; background: transparent; cursor: pointer; }
.ws-h.kies { background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); border-width: 2px; }
.ws-terug { margin-left: 10px; font-size:var(--t-m); }
.ws-h-u { display: block; font-size:var(--t-m); color: var(--text-2); }
.ws-h-d { display: block; width: 18px; height: 18px; border-radius: 50%; margin: 5px auto 0;
  border: 1px solid var(--line); }
/* owner 7/09: op de liggende tablet staan de blokken onder elkaar, niet naast
   elkaar — eerst de drukteknoppen, dan wat weggegooid is, dan het logje. */
.ws-onder { display: flex; flex-direction: column; gap: 16px; }
.ws-extra, .ws-log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; }
.ws-extra-kop { font-weight: 700; color: var(--text); margin-bottom: 10px; font-size:var(--t-l); }
.ws-vorm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-in { flex: 1 1 200px; min-height: 52px; font-size:var(--t-base); padding: 8px 14px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--raised); }
.ws-in.ws-kort { flex: 0 0 120px; }
.ws-seg { display: flex; gap: 6px; }
.ws-seg.wrap { flex-wrap: wrap; }
.ws-seg button { min-height: 52px; padding: 0 16px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--raised); font: inherit; font-size:var(--t-base); cursor: pointer; }
.ws-seg button.on { background: var(--brand); border-color: var(--brand); color: var(--wit); font-weight: 600; }
.ws-bewaar { min-height: 52px; font-size:var(--t-base); padding: 0 22px; }
.ws-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-log li { font-size:var(--t-base); color: var(--text); }
.ws-log li.leeg { color: var(--text-2); }
.ws-log-t { color: var(--text-2); font-variant-numeric: tabular-nums; margin-right: 8px; }
.ws-over { position: fixed; inset: 0; background: rgba(43, 37, 25, .45); z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.ws-kaart { background: var(--surface-2); border-radius: var(--r-l); padding: 24px; max-width: 760px; width: 100%;
  max-height: 90vh; overflow: auto; box-shadow: var(--shadow-pop); }
.ws-over-kop { font-size:var(--t-2xl); font-weight: 700; color: var(--text); }
.ws-over-sub { color: var(--text-2); margin: 2px 0 16px; font-size:var(--t-base); }
.ws-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ws-naam { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-l);
  padding: 14px 16px; text-align: left; font: inherit; font-size:var(--t-l); font-weight: 600; color: var(--text);
  cursor: pointer; min-height: 64px; display: flex; flex-direction: column; gap: 2px; }
.ws-naam.last { border-color: var(--brand); }
.ws-naam-s { font-weight: 400; font-size:var(--t-m); color: var(--text-2); }
.ws-anders { display: flex; gap: 10px; margin: 16px 0 10px; }
.ws-kaart .leeg { color: var(--text-2); }
.mp-cal .mp-cel { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
  min-height: 62px; padding: 6px 4px; font: inherit; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; }
.mp-cel.out { visibility: hidden; }
.mp-cel.ja { background: var(--ok-bg); border-color: var(--blad-licht); }
.mp-cel.nee { background: var(--err-bg); border-color: var(--rood-licht); }
.mp-cel.kies { outline: 3px solid var(--brand); outline-offset: -3px; }
.mp-cel .dn { font-weight: 600; }
.mp-acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.mp-tel { color: var(--text-2); margin-right: auto; }
.mp-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--text-2); font-size:var(--t-m); }
.mp-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line);
  background: var(--surface); margin-right: 6px; vertical-align: -1px; }
.mp-legende i.ja { background: var(--ok-bg); border-color: var(--blad-licht); }
.mp-legende i.nee { background: var(--err-bg); border-color: var(--rood-licht); }
.md-rij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  border-bottom: 1px solid var(--surface-3); padding: 8px 0; }
.md-lvl { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--kl);
  border-radius: 10px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; }
@media (max-width: 980px) {    /* tablet STAAND: drie op een rij, twee eronder (liggend blijven het er vijf) */
  .ws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ws-post { font-size:var(--t-2xl); }
  .ws-lvl { min-height: 132px; font-size:var(--t-base); }
  .ws-sm { width: 52px; height: 52px; }
}

/* accounttabel: acties als icoon, naam verschijnt bij hover of focus (owner 7/09) */
.acc-act { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 38px; padding: 0; }
.acc-act .ic { width: 20px; height: 20px; }
/* De naam staat GECENTREERD BOVEN de knop (owner 8/09). Hij stond even links
   ernaast omdat de scroller hem afknipte, maar dan bedekte hij de andere twee
   iconen. Nu de accounttabel binnen haar kaart past, hoeft die niet meer te
   schuiven (zie #acc-tbl) en kan de tip vrij boven de knop uitsteken — met een
   z-index boven de plakkende tabelkop, zodat hij nooit erachter verdwijnt. */
.acc-act .acc-act-t { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  right: auto; top: auto; z-index: 40;
  background: var(--chrome-2); color: var(--on-chrome); font-size:var(--t-xs); white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s var(--ease); }
.acc-act:hover, .acc-act:focus-visible { z-index: 40; }
@media (pointer: coarse) {   /* op een tablet is er geen hover: naam eronder tonen */
  .acc-act { width: auto; padding: 0 10px; gap: 6px; }
  .acc-act .acc-act-t { position: static; transform: none; opacity: 1; background: transparent;
    color: inherit; padding: 0; font-size:var(--t-m); }
}

/* zaal-tablet: welke delen van de zaal en het terras open zijn (owner 7/09) */
.ws-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ws-zone-t { font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.ws-secties { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-sectie { appearance: none; border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-l);
  padding: 12px 16px; font: inherit; cursor: pointer; text-align: left; min-height: 68px; min-width: 170px;
  display: flex; flex-direction: column; gap: 3px; }
.ws-sectie-n { font-size:var(--t-l); font-weight: 700; color: var(--text); }
.ws-sectie-s { font-size:var(--t-m); color: var(--text-2); }
.ws-sectie.open { border-color: var(--blad-licht); background: var(--ok-bg); }
.ws-sectie.dicht { border-color: var(--rood-licht); background: var(--err-bg); }
.ws-sectie.dicht .ws-sectie-n { color: var(--wijn-rood); }
@media (max-width: 700px) { .ws-zones { grid-template-columns: 1fr; } }

/* reservaties op de plannerpagina (owner 7/09) */
.rs-lijst { display: flex; flex-direction: column; gap: 8px; }
.rs-r { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px; }
.rs-r.groep { border-color: var(--brand); background: var(--surface); }
.rs-u { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; color: var(--text); }
.rs-m { min-width: 0; flex: 1; }
.rs-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-v { display: flex; gap: 8px; margin-top: 6px; color: var(--text-2); font-size:var(--t-m); }
.rs-v svg.ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.rs-mrk { display: inline-flex; align-items: center; gap: 2px; font-size:var(--t-xs); font-weight: 600;
  line-height: 1; opacity: .85; }
.rs-mrk svg.ic { width: 13px; height: 13px; }

/* eigen rooster van een medewerker (owner 7/09) */
.mp-cel.gepland { box-shadow: inset 0 -3px 0 var(--brand); }
.mp-lijst { display: flex; flex-direction: column; gap: 6px; }
.mp-rij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: baseline;
  padding: 8px 12px; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 8px; }
.mp-rij .mp-u { font-variant-numeric: tabular-nums; font-weight: 600; }
.mp-rij .mp-z { color: var(--text-2); font-size:var(--t-m); }
.mp-rij .mp-h { font-variant-numeric: tabular-nums; color: var(--text-3); min-width: 34px; text-align: right; }
@media (max-width: 560px) { .mp-rij { grid-template-columns: 1fr auto; row-gap: 2px; } }

/* ===================== openingsscherm (owner 7/09, v2) =====================
   Wie theo.horecast.be opent, ziet een lichtpunt de forecastlijn trekken; de
   punten veren op op het moment dat het licht ze raakt, het vlak onder de lijn
   loopt vol, en HORECAST komt uit de bloei aan het einde van de lijn omhoog.
   Een tik opent het scherm ALS EEN CIRKEL VANAF JE VINGER: waar je duwt, gaat
   de deur open. Bewegingsregels: reageren op de druk en niet op het loslaten,
   en het inlogscherm materialiseren (blur + schaal samen) in plaats van kaal
   faden. Wie prefers-reduced-motion aan heeft, ziet dit scherm niet - dat
   regelt app.js; de regels onderaan zijn het vangnet. */
/* Het openingsscherm blijft na de tik in de laag liggen als we het niet echt
   wegzetten: `hidden` verliest van de display-regel hieronder (een id-selector
   wint van de standaardregel van de browser), en dan vangt een onzichtbaar vlak
   op z-index 80 elke tik — je kon niet meer in de inlogvelden typen (Victor 8/09,
   op gsm, waar hij na de sessiewijziging opnieuw moest inloggen). */
#splash[hidden] { display: none !important; }
/* tweede slot: zolang het scherm niet ECHT aan staat, vangt het niets af. Zo kan
   een half afgebroken animatie of een browser die het hidden-attribuut anders
   behandelt nooit de inlogvelden blokkeren (Victor 8/09, iPhone). */
#splash { pointer-events: none; }
#splash.aan { pointer-events: auto; }
#splash.uit { pointer-events: none; }
#splash {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background:
    radial-gradient(115% 85% at 50% 4%, var(--surface-2) 0%, var(--surface-2) 44%, var(--line) 100%);
  opacity: 0; cursor: pointer; padding: 24px; overflow: hidden;
  transition: opacity .45s var(--ease);
  --cx: 50%; --cy: 50%; --px: 0; --py: 0;
}
#splash.aan { opacity: 1; }
#splash:not(.uit) { clip-path: circle(150% at var(--cx) var(--cy)); }
/* de tik: het scherm krimpt weg naar het punt waar de vinger stond */
#splash.uit {
  clip-path: circle(0% at var(--cx) var(--cy)); opacity: .85;
  transition: clip-path .7s cubic-bezier(.62, 0, .2, 1), opacity .7s ease-in .2s;
}
/* warme gloed die met de lijn meegroeit; groot en traag, dus halfdoorzichtig */
.sp-veld { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(26% 34% at 66% 34%, rgba(212, 175, 55, .26), transparent 70%); }
#splash.aan .sp-veld { animation: sp-veld 2.4s var(--ease) .5s forwards; }
/* diepte: de hoeken zakken weg, het midden blijft licht */
.sp-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 68% at 50% 46%, transparent 55%, rgba(94, 84, 58, .16) 100%); }

.sp-inner { width: min(620px, 100%); text-align: center; position: relative; }
.sp-viz { position: relative; }
.sp-curve { width: 100%; height: auto; display: block; margin: 0 auto 8px; overflow: visible;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.sp-grid { stroke: url(#spr); stroke-width: 1; opacity: 0; }
#splash.aan .sp-grid { animation: sp-grid .9s var(--ease) .1s forwards; }
.sp-band { fill: url(#spb); opacity: 0; }
#splash.aan .sp-band { animation: sp-band 1.2s var(--ease) 1.45s forwards; }
.sp-line { stroke: url(#spg); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 980; stroke-dashoffset: 980;
  filter: drop-shadow(0 2px 7px rgba(184, 149, 44, .28)); }
#splash.aan .sp-line { animation: sp-draw 1.4s cubic-bezier(.5, .05, .2, 1) .2s forwards; }
/* het lichtpunt loopt over exact hetzelfde pad als de lijn */
.sp-head { fill: var(--p-linnen); filter: url(#spf); opacity: 0;
  offset-path: path("M20 130 C 80 124, 114 106, 152 102 S 224 114, 262 82 S 342 26, 382 50 S 462 106, 540 34");
  offset-distance: 0%; offset-rotate: 0deg; }
#splash.aan .sp-head { animation: sp-head 1.4s cubic-bezier(.5, .05, .2, 1) .2s forwards; }
/* de bloei op het eindpunt: het licht komt aan, en daaruit stapt de naam */
.sp-bloei { position: absolute; left: 96%; top: 20%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 250, 226, 1) 0%, rgba(232, 200, 96, .7) 35%, rgba(212, 175, 55, .22) 60%, transparent 72%); }
#splash.aan .sp-bloei { animation: sp-bloei 1.3s cubic-bezier(.2, .7, .3, 1) 1.5s forwards; }
.sp-dot { fill: var(--brand-deep); opacity: 0; transform-origin: center; transform-box: fill-box; }
#splash.aan .sp-dot { animation: sp-pop .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
#splash.aan .sp-dot.d1 { animation-delay: .58s; }
#splash.aan .sp-dot.d2 { animation-delay: .86s; }
#splash.aan .sp-dot.d3 { animation-delay: 1.14s; }
#splash.aan .sp-dot.d4 { animation-delay: 1.50s; }

/* de naam komt omhoog uit de bloei: letters veren na, de spatiering trekt samen
   (grote tekst wil krappere spatiering; ze staat wijd terwijl ze wazig
   binnenkomt, en zet zich strak wanneer ze scherp staat) */
.sp-word { display: flex; justify-content: center; margin-top: 2px;
  font-size: clamp(2.2rem, 8.6vw, 3.9rem); font-weight: 700; line-height: 1.04;
  letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--text);
  transform: translate3d(calc(var(--px) * -5px), calc(var(--py) * -4px), 0);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
#splash.aan .sp-word { animation: sp-track 1s cubic-bezier(.22, 1, .3, 1) 1.62s forwards; }
.sp-word span { opacity: 0; transform: translateY(24px); filter: blur(7px); }
#splash.aan .sp-word span { animation: sp-letter .7s cubic-bezier(.22, 1, .3, 1) forwards,
                                       sp-glans .9s ease-in-out 1; }
#splash.aan .sp-word span:nth-child(1) { animation-delay: 1.62s, 2.50s; }
#splash.aan .sp-word span:nth-child(2) { animation-delay: 1.68s, 2.55s; }
#splash.aan .sp-word span:nth-child(3) { animation-delay: 1.74s, 2.60s; }
#splash.aan .sp-word span:nth-child(4) { animation-delay: 1.80s, 2.65s; }
#splash.aan .sp-word span:nth-child(5) { animation-delay: 1.86s, 2.70s; }
#splash.aan .sp-word span:nth-child(6) { animation-delay: 1.92s, 2.75s; }
#splash.aan .sp-word span:nth-child(7) { animation-delay: 1.98s, 2.80s; }
#splash.aan .sp-word span:nth-child(8) { animation-delay: 2.04s, 2.85s; }

.sp-rule { height: 2px; width: 0; margin: 16px auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); }
#splash.aan .sp-rule { animation: sp-rule .75s cubic-bezier(.22, 1, .3, 1) 2.2s forwards; }
.sp-sub { margin-top: 12px; color: var(--text-2); font-size: clamp(.92rem, 1.6vw, 1.05rem);
  letter-spacing: .05em; opacity: 0; }
.sp-go { margin-top: 26px; appearance: none; border: 1px solid var(--p-olijf); background: transparent;
  color: var(--text-2); font: inherit; font-size:var(--t-ml); letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; opacity: 0;
  transition: transform .1s ease-out, background .2s var(--ease); }
#splash.aan .sp-go { animation: sp-rise .6s cubic-bezier(.22, 1, .3, 1) 2.75s forwards,
                                sp-adem 3s ease-in-out 3.5s infinite; }
.sp-go:active { transform: scale(.96); }   /* feedback op de druk, niet op het loslaten */

@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-head { 0% { opacity: 0; offset-distance: 0%; } 7% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes sp-grid { to { opacity: .55; } }
@keyframes sp-band { to { opacity: .5; } }
@keyframes sp-veld { 0% { opacity: 0; } 65% { opacity: 1; } 100% { opacity: .8; } }
@keyframes sp-bloei { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; transform: scale(6); } 100% { opacity: 0; transform: scale(22); } }
@keyframes sp-pop { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sp-letter { to { opacity: 1; transform: none; filter: none; } }
@keyframes sp-glans { 0%, 100% { color: var(--text); text-shadow: none; }
                      45% { color: var(--brand-ink-2); text-shadow: 0 0 18px rgba(212, 175, 55, .55); } }
@keyframes sp-track { to { letter-spacing: .14em; text-indent: .14em; } }
@keyframes sp-rule { to { width: 150px; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp-adem { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 149, 44, 0); } 50% { box-shadow: 0 0 0 10px rgba(184, 149, 44, .10); } }

/* het inlogscherm materialiseert: blur en schaal samen, geen kale fade */
#login.binnen form { animation: sp-inlog .6s cubic-bezier(.22, 1, .3, 1) both; }
@keyframes sp-inlog { from { opacity: 0; transform: translateY(20px) scale(.94); filter: blur(9px); }
                      to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  #splash, #splash * { animation: none !important; transition: opacity .2s linear !important; }
  #splash.uit { clip-path: none; opacity: 0; }
  #splash .sp-curve, #splash .sp-word { transform: none; }
  #login.binnen form { animation: none; }
}

/* ===== aanraakschermen: geen hover, geen dubbele tik (Victor 8/09) =====
   Op een gsm en tablet bestaat hover niet. Safari lost dat op door de EERSTE tik
   als hover te behandelen en pas de tweede als klik, zodra er hoverstijlen op het
   element staan — vandaar dat een tab in de zijbalk twee tikken kostte. Hieronder
   krijgt hover op zulke toestellen dezelfde opmaak als de ruststand, zodat er niets
   meer te 'hoveren' valt en de eerste tik meteen telt. touch-action: manipulation
   haalt daarbovenop de wachttijd voor dubbeltik-zoomen weg. */
@media (hover: none) {
  .sidenav a, .na-item, .pills button, .seg button, .btn, button, .cal-cell, .wk-c,
  .mp-cel, th.sortable { touch-action: manipulation; }
  button:hover, .btn:hover { background: var(--surface); color: var(--text); border-color: var(--p-olijf); }
  button.primary:hover { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2); }
  .mp-cel:hover { background: var(--surface); color: var(--text); }
  .mp-cel.ja:hover { background: var(--ok-bg); } .mp-cel.nee:hover { background: var(--err-bg); }
  .mp-cel.kies:hover { background: var(--surface-2); }
  .sidenav a:hover { background: transparent; }
  .sidenav a.active:hover { background: var(--brand); }
  .na-item:hover { background: transparent; }
  .pills button:hover { background: var(--surface); color: inherit; border-color: var(--line-strong); }
  .pills button.on:hover { border-color: var(--brand); color: var(--brand-ink-2); }
  th.sortable:hover { background: inherit; }
}

/* de tip van de site (owner 8/09) — vervangt het grijze systeemvenster van het
   title-attribuut; zweeft op het scherm, dus niets kan hem afknippen.
   Tekst --on-chrome (21/10): met de tokens (fase 4) stond de tekst in dezelfde inkt als
   de grond, en zag Arthur in de Planner een lege zwarte balk */
.hintbox { position: fixed; z-index: 9999; pointer-events: none;
  width: max-content; max-width: min(340px, calc(100vw - 24px));
  background: var(--chrome-2); color: var(--on-chrome); font-size:var(--t-xs); line-height: 1.3;
  padding: 5px 9px; border-radius: 6px; box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .12s var(--ease); }
.hintbox.aan { opacity: 1; }

/* reservaties in de maandagenda (owner 8/09): rechtsonder in de cel, zodat het
   dagcijfer in het midden blijft staan. Een dag die nog moet komen krijgt wit,
   net als de weersvoorspelling ernaast; gisteren en vandaag blijven donker. */
.cal-cell .rs-mrk { position: absolute; right: 6px; bottom: 6px; }
/* linksboven de feest- of brugdag, linksonder de evenementen (owner 8/09) */
.cal-cell .hd-mrk { position: absolute; left: 6px; top: 6px; display: inline-flex; }
.cal-cell .ev-mrk { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 1px;
  font-size:var(--t-xs); font-weight: 600; line-height: 1; }
.cal-cell .hd-mrk .wx-ic { width: 16px; height: 17px; stroke-width: 1.7; }
.cal-cell .ev-mrk svg.ic { width: 14px; height: 14px; }
/* op een lichte cel blijven de hoeken leesbaar in de gewone inktkleur */
/* alle vier de hoeken volgen de tekstkleur van de cel (owner 8/09): weer en
   reservaties deden dat al, feestdag en evenement stonden op een vaste bruine
   kleur en vielen daardoor weg op een donkere cel */
.cal-cell .hd-mrk, .cal-cell .ev-mrk { color: currentColor; opacity: .85; }
.cal-cell .hd-mrk.fc, .cal-cell .ev-mrk.fc { color: var(--on-chrome); opacity: .95; text-shadow: 0 0 2px rgba(70, 62, 40, .35); }
.cal-cell.evt .ks { left: 32px; }
.cal-cell .rs-mrk.fc { color: var(--on-chrome); opacity: .95; text-shadow: 0 0 2px rgba(70, 62, 40, .35); }
.cal-cell.mrk .ks { right: 42px; }

/* personeel op de telefoon (owner 8/09): beschikbaarheid met uren en opmerking,
   eigen rooster met vervangingen, meldingen met leesstatus */
.mp-cal .mp-cel { position: relative; }
.mp-cel:disabled:not(.out) { opacity: .45; cursor: default; }
.mp-cel .mp-n { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-deep); }
.mp-legende i.nt { position: relative; }
.mp-legende i.nt::after { content: ""; position: absolute; top: 1px; right: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-deep); }
.mp-paneel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); display: grid; gap: 10px; }
.mp-paneel .seg { display: inline-flex; }
.mp-paneel .seg button { min-height: 40px; padding: 0 14px; }
.mp-tijd { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--text-2); }
.mp-tijd input[type=time] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--raised); color: var(--text); margin-left: 6px; }
.mp-paneel input[type=text] { width: 100%; box-sizing: border-box; }
.mp-samen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--text-2); font-size:var(--t-m); }
.mp-verv { grid-column: 1 / -1; font-size:var(--t-s); color: var(--brand-ink-2); display: inline-flex; gap: 4px; align-items: center; }
.mp-verv .ic { width: 14px; height: 14px; }
/* shiften ruilen in Mijn rooster (Arthur 16/10, shiftruil.py): de knop onder de dag, het paneel, de kaart */
.mr-rij { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.mr-rij .mp-knop-link, .mr-item .mp-knop-link { gap: 6px; min-height: 40px; padding: 4px 14px; font: inherit; font-size:var(--t-m); font-weight: 700; cursor: pointer; }
.mr-rij svg, .mr-chip svg { width: 16px; height: 16px; fill: currentColor; }
.mr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size:var(--t-m); font-weight: 700; background: var(--inset); color: var(--text-2); overflow-wrap: anywhere; }
.mr-chip.open, .mr-chip.kandidaat { background: var(--surface-3); color: var(--brand-ink); }
.mr-chip.goedgekeurd { background: var(--ok-bg); color: var(--groen-nacht); }
.mr-chip.geweigerd, .mr-chip.verlopen { background: var(--err-bg); color: var(--wijn); }
.mr-paneel { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 8px; padding: 14px; border: 2px solid var(--brand-deep); border-radius: var(--r-l); background: var(--surface); }
.mr-p-t { font-weight: 700; }
.mr-keuze { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size:var(--t-base); }
.mr-keuze input { width: 22px; height: 22px; flex: none; }
.mr-met, .mr-notitie { width: 100%; min-height: 44px; box-sizing: border-box; font: inherit; }
.mr-uitleg { font-size:var(--t-m); color: var(--text-2); }
.mr-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-knoppen .btn { min-height: 44px; flex: 1 1 140px; }
.mr-sub { margin: 14px 0 6px; font-weight: 700; color: var(--text-2); font-size:var(--t-m); text-transform: uppercase; letter-spacing: .04em; }
.mr-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line, var(--steen-licht)); border-radius: var(--r-m, 10px); margin-bottom: 6px; }
.mr-item.nu { border-color: var(--brand-deep); box-shadow: 0 0 0 2px var(--surface-3); }
.mr-i-t { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mr-i-s { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; overflow-wrap: anywhere; }
.mr-i-s .btn { min-height: 44px; }
/* shiftmarkt (Arthur 24/10, SHIFT_MARKT): wie die dag kan, met een WhatsApp-knop */
.mr-markt { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--inset); }
.mr-m-t { font-weight: 700; }
.mr-m-n { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface); text-align: center; font-size: var(--t-s); }
.mr-m-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mr-m-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.mr-m-naam { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mr-m-naam small { display: block; }
.mr-m-naam small, .mr-m-geen { color: var(--text-2); font-size: var(--t-s); font-weight: 400; }
.mr-wa { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.mr-wa svg { width: 16px; height: 16px; fill: currentColor; }
/* ploegrooster: Mijn rooster | Hele ploeg (Arthur 19/10) */
.pr-schakel { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; margin: 0 0 14px; }
.pr-schakel button { min-height: 44px; font-size:var(--t-base); }
.pr-met { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 2px 10px 2px 8px; margin: 0 -2px; border: 0; border-radius: 999px; background: transparent; font: inherit;
  font-size:var(--t-m); color: var(--text-2); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.pr-met:hover, .pr-met:active { background: var(--surface-2); color: var(--text); }
.pr-met svg.ic { width: 16px; height: 16px; flex: none; fill: currentColor; opacity: .75; }
.pr-weekkaart .mp-maand { margin-bottom: 6px; }
.pr-uitleg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  color: var(--text-2); font-size:var(--t-m); }
.pr-uitleg .pr-nu { min-height: 36px; padding: 2px 14px; font: inherit; font-size:var(--t-m); font-weight: 700; cursor: pointer; }
.pr-dag { padding-top: 0; padding-bottom: 0; scroll-margin-top: 84px; }
.pr-dag .pr-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  min-height: 52px; padding: 8px 0; list-style: none; cursor: pointer; }
.pr-dag .pr-kop::-webkit-details-marker { display: none; }
.pr-dag.dicht .pr-kop { cursor: default; min-height: 46px; }
.pr-dag.dicht { opacity: .72; }
.pr-dn { font-weight: 700; color: var(--text); }
.pr-dag.nu .pr-dn { color: var(--brand-ink-2); }
.pr-dag.nu { border-color: var(--brand-deep); box-shadow: 0 0 0 2px rgba(212, 175, 55, .25); }
.pr-dag.focus { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.pr-tel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-3); font-size:var(--t-m); }
.pr-jij-chip { padding: 2px 10px; border-radius: 999px; background: var(--surface-3); color: var(--brand-ink); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.pr-post { padding: 8px 0 10px; border-top: 1px solid var(--line); }
.pr-post-t { margin-bottom: 4px; font-size:var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.pr-mensen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 10px; border-radius: 8px; }
.pr-p + .pr-p { border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.pr-p.jij + .pr-p, .pr-p + .pr-p.jij { border-top-color: transparent; }
.pr-p.jij { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--brand-deep); font-weight: 700; }
.pr-n { overflow-wrap: anywhere; }
.pr-u { flex: 0 1 auto; font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.pr-p.jij .pr-u { color: var(--brand-ink); }
.pr-jij, .pr-keuze { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size:var(--t-xs);
  font-weight: 700; vertical-align: 1px; background: var(--brand-deep); color: var(--wit); }
.pr-keuze { background: var(--inset); color: var(--text-2); }
@media (max-width: 560px) { .pr-u { font-size:var(--t-m); } .pr-p { padding: 6px 8px; } }
/* op een breed scherm de posten naast elkaar: Keuken | Bar | Zaal */
@media (min-width: 900px) {
  .pr-dag .pr-posten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
  .pr-dag .pr-posten .pr-post { border-top: 0; }
}
/* prikklok, het scherm van de manager (Arthur 1/10) */
.kl-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kl-balk .spacer { flex: 1; }
.kl-balk label { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); color: var(--text-2); }
.kl-balk input[type=date] { font: inherit; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--text); }
.kl-balk a.btn { text-decoration: none; }
.kl-dag { font-size:var(--t-l); min-width: 250px; text-align: center; }
.kl-tbl th { text-align: left; }
.kl-tbl tbody th { font-weight: 600; white-space: nowrap; }
.kl-tbl td, .kl-tbl tbody th { vertical-align: top; }
.kl-tbl tr.let-op > th { box-shadow: inset 4px 0 0 var(--p-rood-inkt); }
.kl-geen-code { display: block; font-weight: 400; font-size:var(--t-xs); color: var(--text-2); }
.kl-vlag { color: var(--wijn-rood); font-size:var(--t-m); display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; }
.kl-vlag svg.ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* blad Schaduw: wat Horecast zou aangeven naast wat INDII aangaf (Arthur 1/10) */
.sc-klein { font-size:var(--t-s); font-weight: 400; color: var(--text-2); margin-left: 6px; }
.sc-tbl td { white-space: normal; vertical-align: top; }
.sc-tbl tr.sc-open td:first-child { box-shadow: inset 4px 0 0 var(--p-rood-inkt); }
.sc-oordeel .t-meta { max-width: 44ch; margin-top: 3px; }
.sc-reden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size:var(--t-m); }
.sc-reden button { min-height: 28px; padding: 0 8px; font-size:var(--t-s); }
.sc-reden button svg.ic { width: 14px; height: 14px; }
tr.sc-dagrij { cursor: pointer; }
/* een aangifte met de hand wijzigen (alleen wie op naam toegelaten is) */
.sc-wz { border-left: 5px solid var(--brand); }
.sc-wz-rij { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 10px; }
.sc-wz-rij label { display: inline-flex; align-items: center; gap: 6px; }
.sc-wz-rij input[type=time], .sc-wz-rij input[type=number], .sc-wz-rij input[type=text], .sc-wz-rij input[type=password] {
  font: inherit; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--text); }
.sc-wz-breed { flex: 1 1 320px; }
.sc-wz-breed input { flex: 1 1 auto; min-width: 0; }
.sc-wz-stap { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); }
.sc-wz-stap p { margin: 0 0 10px; }
tr.sc-dagrij.on td { background: var(--surface-3); font-weight: 700; }
td > span.kl-vlag { display: inline; }
.kl-detail > td { background: var(--surface-3); padding: 0; }
/* de persoon uit een melding (Open Klok): onder de vaste kop in beeld, met een gouden rand */
tr.kl-gezocht { scroll-margin-top: calc(var(--header-h) + 16px); }
tr.kl-gezocht > th, tr.kl-gezocht > td { background: var(--warn-bg); }
tr.kl-gezocht > th { box-shadow: inset 4px 0 0 var(--brand); }
.kl-detail-in { padding: 12px 14px 14px; display: grid; gap: 10px; }
.kl-detail-kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kl-detail tr.kl-weg td { color: var(--text-2); text-decoration: line-through; }
.kl-detail tr.kl-weg td:nth-child(4), .kl-detail tr.kl-weg td:last-child { text-decoration: none; }
.kl-nieuw { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.kl-nieuw label { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); color: var(--text-2); }
.kl-nieuw select, .kl-nieuw input { font: inherit; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--text); }
.kl-nieuw .kl-reden { flex: 1 1 320px; }
.kl-nieuw .kl-reden input { flex: 1; min-width: 0; }
/* Arthur 22/10: een begin kan alleen nu; de regel staat erbij als 'begin' gekozen is of de dag voorbij is */
.kl-nieuw .kl-regel { flex: 1 0 100%; margin: 0; display: none; align-items: center; gap: 6px; color: var(--text-2); }
.kl-nieuw.kl-nieuw-in .kl-regel, .kl-nieuw.kl-nieuw-verleden .kl-regel { display: flex; }
.kl-nieuw input[readonly] { background: var(--surface-2, var(--surface)); color: var(--text-2); }
.kl-geen-inklok { white-space: nowrap; text-decoration: underline dotted; cursor: help; }
/* op de gsm staat de detailrij in een tabel die breder is dan het scherm: het vak blijft in beeld */
@media (max-width: 600px) { .kl-nieuw { max-width: calc(100vw - 48px); } .kl-nieuw .kl-reden { flex-basis: 100%; } }
/* prikklok op de tablet (Arthur 1/10): grote knop bovenaan, namen, cijfertoetsen, acties */
.ws-klok { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ws-klok-knop { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 72px; padding: 12px 26px;
  border: 2px solid var(--chrome-2); border-radius: var(--r-l); background: var(--chrome-2); color: var(--on-chrome); cursor: pointer; font: inherit; }
.ws-klok-knop:active { transform: scale(.98); }
.ws-klok-t { font-size:var(--t-xl); font-weight: 700; }
.ws-klok-s { font-size:var(--t-ml); opacity: .85; }
.ws-klok-wacht { padding: 8px 14px; border-radius: var(--r-s); background: var(--warn-bg); border: 1px solid var(--messing-licht); color: var(--brand-ink); font-size:var(--t-base); }
/* noodmodus (16/10): geen internet, klokken gaat in de wachtrij */
.kl-offline { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--info-bg); color: var(--blauw-nacht); border: 1px solid var(--blauw-tint-2); font-size:var(--t-s); font-weight: 600; }
.kl-bevestig-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--err-bg); color: var(--wijn-rood); border: 1px solid var(--rood-licht); font-size:var(--t-s); font-weight: 600; }
.ws-nood { padding: 12px 16px; border-radius: var(--r-s); background: var(--err-bg); border: 1px solid var(--rood-licht); border-left: 6px solid var(--p-baksteen); color: var(--wijn); font-size:var(--t-base); font-weight: 600; line-height: 1.4; }
.ws-klok-mislukt { padding: 10px 14px; border-radius: var(--r-s); background: var(--err-bg); border: 1px solid var(--rood-licht); color: var(--wijn-rood); font-size:var(--t-base); }
.ws-klok-mislukt ul { margin: 6px 0 8px 18px; padding: 0; }
.ws-klok-klaar.wacht .ws-klok-vink { background: var(--warn-bg); color: var(--brand-ink); }
.ws-klok-code { padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--line-strong); color: var(--text-2); font-size:var(--t-base); }
.ws-klok-code b { font-size:var(--t-2xl); letter-spacing: .14em; color: var(--text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.ws-klok-kaart { max-width: 980px; width: 100%; max-height: 92vh; overflow: auto; }
/* klokken op het eigen toestel (Arthur 1/10): kaart bovenaan Mijn beschikbaarheid en Mijn rooster */
.mk-klok-host:empty { display: none; }
.mk-klok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mk-klok-chip { font-size:var(--t-m); color: var(--text-2); }
.mk-klok-chip.in { color: var(--groen-donker); font-weight: 600; }
.mk-klok-chip.pauze { color: var(--brand-ink-2); font-weight: 600; }
.mk-klok-zin { color: var(--text-2); margin: 2px 0 8px; }
.mk-klok-plaats { margin: 8px 0 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--warn-bg); border: 1px solid var(--messing-licht); color: var(--brand-ink); font-size:var(--t-ml); line-height: 1.45; }
.mk-klok-plaats.ok { background: var(--ok-bg); border-color: var(--blad-licht); color: var(--groen-donker); display: flex; align-items: center; gap: 6px; }
.mk-klok-plaats .ic { width: 16px; height: 16px; fill: currentColor; }
.mk-klok-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mk-klok-rij label { font-weight: 600; }
.mk-klok-rij input { width: 5.2em; font: 700 var(--t-xl) var(--font); letter-spacing: .18em; text-align: center; padding: 6px 8px; border: 1px solid var(--warn); border-radius: var(--r-s);
  background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.mk-klok-rij .quiet { display: inline-flex; align-items: center; gap: 4px; }
.mk-klok-acties { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mk-klok-actie { appearance: none; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-l);
  border: 2px solid var(--kl, var(--text)); background: var(--surface); color: var(--kl, var(--text)); cursor: pointer; font: inherit; }
.mk-klok-actie b { font-size:var(--t-xl); }
.mk-klok-actie span { font-size:var(--t-m); color: var(--text-2); }
.mk-klok-actie:active { transform: scale(.98); }
.mk-klok-actie:disabled { opacity: .5; }
.mk-klok-actie.a-in, .mk-klok-actie.a-hervat { --kl: var(--groen-donker); background: var(--ok-bg); }
.mk-klok-actie.a-pauze { --kl: var(--brand-ink-2); background: var(--inset); }
.mk-klok-actie.a-uit { --kl: var(--wijn-rood); background: var(--err-bg); }
.mk-klok-bericht { min-height: 1.3em; margin-top: 10px; font-size:var(--t-ml); }
.mk-klok-bericht:empty { display: none; }
.mk-klok-bericht.goed { color: var(--groen-donker); font-weight: 600; }
.mk-klok-bericht.fout { color: var(--wijn-rood); }
.kl-schakel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.kl-later > summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.wk-eigen { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 10px; border-radius: var(--r-s); background: var(--ok-bg); color: var(--groen-donker); font-size:var(--t-m); }
.wk-eigen .ic { width: 15px; height: 15px; fill: currentColor; flex: none; }
/* het voorstel van het model naast het rooster (Arthur 1/10) */
.wk-tbl tr.wk-total .wk-model { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; font-size:var(--t-xs); font-weight: 400; color: var(--text-2); }
.wk-tbl tr.wk-total .wk-rest { display: block; margin-top: 3px; font-size:var(--t-xs); font-weight: 400; color: var(--text-2); white-space: normal; line-height: 1.25; }
.wk-tbl tr.wk-total .wk-rest + .wk-rest { margin-top: 0; }
.wk-tbl tr.wk-total .wk-model { flex-wrap: wrap; }
.wk-model i, .pl-model-v { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ok-bg); color: var(--groen-donker); white-space: nowrap; }
.wk-model.meer i, .pl-model.meer .pl-model-v { background: var(--warn-bg); color: var(--brand-ink); }
.wk-model.minder i, .pl-model.minder .pl-model-v { background: var(--info-bg); color: var(--blauw-nacht); }
.wk-tbl tr.wk-total th .wk-model-uitleg { display: block; font-size:var(--t-xs); font-weight: 400; color: var(--text-2); white-space: normal; line-height: 1.25; margin-top: 2px; max-width: 34ch; }
.pl-model { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--line); border-left: 4px solid var(--ok); background: var(--surface); line-height: 1.5; }
.pl-model.meer { border-left-color: var(--warn); }
.pl-model.minder { border-left-color: var(--p-blauw); }
.pl-model b { font-weight: 700; }
/* dagscherm: per uur het rooster naast het model (Arthur 1/10) */
.tblwrap.pu-wrap { overflow-x: auto; }
.pu-tbl th[rowspan] { vertical-align: middle; background: var(--surface); color: var(--text); font-size:var(--t-m); border-bottom: 1px solid var(--line); }
.pu-tbl thead th { border-bottom: 1px solid var(--line); }
.pu-tbl .pu-c, .pu-tbl .pu-u { text-align: center; }
.pu-tbl .pu-bron { color: var(--text-2); font-size:var(--t-s); }
.pu-tbl tr.pu-r td { font-weight: 700; border-bottom: none; padding-bottom: 3px; }
.pu-tbl tr.pu-r .pu-bron { font-weight: 400; }
.pu-tbl tr.pu-m td { color: var(--text-2); padding-top: 3px; border-bottom: 1px solid var(--line); }
.pu-tbl tbody tr:last-child td { border-bottom: none; }
.pu-tbl td.pu-c.meer { background: var(--warn-bg); color: var(--brand-ink); }
.pu-tbl td.pu-c.minder { background: var(--info-bg); color: var(--blauw-nacht); }
.pu-legende { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pu-legende .dot.pu-d-meer { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--messing-licht); }
.pu-legende .dot.pu-d-minder { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--blauw-licht); }
.pu-nota { margin-top: 6px; }
.kl-schakel input { width: 18px; height: 18px; }
.ws-klok-groep { font-weight: 700; color: var(--text-2); margin: 12px 0 8px; font-size:var(--t-ml); text-transform: uppercase; letter-spacing: .04em; }
.ws-klok-naam { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ws-klok-naam.in { border-color: var(--p-blad-mid); background: var(--ok-bg); }
.ws-klok-naam.pauze { border-color: var(--warn); background: var(--inset); }
.ws-klok-chip { font-weight: 400; font-size:var(--t-m); color: var(--text-2); }
.ws-klok-chip.in { color: var(--groen-donker); font-weight: 600; }
.ws-klok-chip.pauze { color: var(--brand-ink-2); font-weight: 600; }
.ws-klok-uitleg { color: var(--text-2); font-size:var(--t-base); max-width: 46ch; margin: 0 auto 6px; text-align: center; }
.ws-klok-stippen { display: flex; justify-content: center; gap: 16px; margin: 14px 0 6px; }
.ws-klok-stippen i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text); }
.ws-klok-stippen i.vol { background: var(--chrome-2); }
.ws-klok-fout { min-height: 1.4em; text-align: center; color: var(--wijn-rood); font-size:var(--t-base); margin: 4px 0; }
.ws-klok-fout.ws-zp { color: var(--text); } /* niet gepland: een stap, geen alarm (Arthur 23/10) */
.ws-klok-toetsen { display: grid; grid-template-columns: repeat(3, 92px); gap: 12px; justify-content: center; margin: 6px auto 4px; }
.ws-klok-toetsen button { appearance: none; height: 76px; border-radius: var(--r-l); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 700 var(--t-3xl) var(--font); cursor: pointer; }
.ws-klok-toetsen button:active { background: var(--surface-2); transform: scale(.97); }
.ws-klok-toetsen button.stil { font-size:var(--t-base); font-weight: 500; color: var(--text-2); border-color: transparent; background: transparent; }
.ws-klok-acties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 6px; }
.ws-klok-actie { appearance: none; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-l);
  border: 2px solid var(--kl, var(--text)); background: var(--surface); color: var(--kl, var(--text)); cursor: pointer; font: inherit; }
.ws-klok-actie b { font-size:var(--t-3xl); }
.ws-klok-actie span { font-size:var(--t-base); color: var(--text-2); }
.ws-klok-actie:active { transform: scale(.98); }
.ws-klok-actie:disabled { opacity: .5; }
.ws-klok-actie.a-in, .ws-klok-actie.a-hervat { --kl: var(--groen-donker); background: var(--ok-bg); }
.ws-klok-actie.a-pauze { --kl: var(--brand-ink-2); background: var(--inset); }
.ws-klok-actie.a-uit { --kl: var(--wijn-rood); background: var(--err-bg); }
.ws-klok-klaar { text-align: center; padding: 26px 10px; }
.ws-klok-vink { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; background: var(--p-groen-donker); color: var(--wit); font-size:var(--t-4xl); line-height: 84px; }
.ws-klok-zin { font-size:var(--t-xl); color: var(--text); margin-top: 8px; }
.ws-melding.info { background: var(--info-bg); color: var(--blauw-nacht); border-left: 4px solid var(--p-blauw); line-height: 1.5; }
.navalert.stil .na-n { background: var(--text-faint); }
.pl-verv { color: var(--brand-ink-2); display: inline-flex; gap: 4px; align-items: center; }
.pl-verv .ic { width: 13px; height: 13px; }
.pl-undo { font-size:var(--t-s); padding: 4px 8px; display: inline-flex; gap: 4px; align-items: center; }
.acc-rap { display: grid; gap: 6px; margin-top: 12px; }
.acc-rap .r { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: baseline; font-size:var(--t-ml); }
.acc-rap .r .k { color: var(--text-2); }
@media (max-width: 760px) { .acc-rap .r { grid-template-columns: 1fr; gap: 2px; } }

/* accounttabel binnen de kaart houden (owner 8/09): compactere cellen, namen mogen
   afbreken, en als het toch te breed wordt schuift ze binnen haar eigen kader i.p.v.
   dat de actie-iconen buiten de tabel vallen */
/* pc (het doelapparaat voor beheer): de tabel past, dus niets knipt en de tip mag
   boven de knop uitsteken. Wordt het venster toch smal, dan schuift ze alsnog. */
/* de tabel moet PASSEN op een pc-scherm: de drie actie-iconen horen zichtbaar te
   zijn zonder horizontaal te schuiven. Het zoekveld in de kop is hier smaller dan
   elders, want de kolom Naam draagt het (owner 9/09). De standaard .tbl-b blijft
   als vangnet horizontaal schuiven op een smal venster. */
#acc-tbl .th-q { width: 128px; }
#acc-tbl .th-pick .dd-btn { padding: 2px 8px; font-size:var(--t-s); }
#acc-tbl table { font-size:var(--t-ml); }
#acc-tbl th, #acc-tbl td { padding: 8px 10px; }
#acc-tbl td:first-child, #acc-tbl th:first-child { word-break: break-word; }
#acc-tbl td:nth-child(2) { word-break: break-word; }
#acc-tbl .chip { font-size:var(--t-xs); padding: 1px 8px; }
#acc-tbl td:last-child, #acc-tbl th:last-child { white-space: nowrap; text-align: right; width: 1%; }
/* e-mail is de breedste kolom (lang adres + chip): laten afbreken i.p.v. de tabel
   171 px buiten de kaart duwen, waardoor het derde actie-icoon wegviel */
#acc-tbl td:nth-child(4) { white-space: normal; max-width: 230px; word-break: break-word; line-height: 1.35; }
#acc-tbl .acc-act { width: 34px; }

/* wie een artikel bijvulde en wanneer, naast het vinkje (owner 8/09) */
.rf-wie { display: block; font-size:var(--t-xs); color: var(--text-3); line-height: 1.2; margin-top: 2px; white-space: nowrap; }

/* vandaag en voorbije dagen in de plannerkalender (owner 8/09) */
.cal-cell.vandaag { box-shadow: inset 0 0 0 3px var(--brand); }
.cal-cell.voorbij { opacity: .82; box-shadow: inset 3px 0 0 var(--line-strong); }
.cal-cell.voorbij:hover { opacity: 1; }
.legend .dot.lg-vandaag { background: transparent; box-shadow: inset 0 0 0 3px var(--brand); }
.legend .dot.lg-voorbij { background: var(--bg); box-shadow: inset 3px 0 0 var(--line-strong); }

/* elk zoekveld krijgt een vergrootglas links (owner 8/09) */
th .th-q, .tbl-search input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F66' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 8px 50%; background-size: 14px 14px;
  padding-left: 28px;
}

/* ===== personeel op telefoon: beschikbaarheid en rooster (owner 8/09) =====
   Maand gecentreerd bovenaan met twee duidelijke pijlen ernaast; het raster is
   altijd zes rijen hoog, ook als de maand er minder nodig heeft, zodat het beeld
   niet springt bij het bladeren. Dagen van een andere maand blijven een leeg
   kader: het raster blijft kloppen zonder cijfers die verwarren. */
.mp-kaart { padding-top: 10px; }
.mp-maand { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 2px 0 12px; }
.mp-maand-t { text-align: center; font-weight: 600; font-size:var(--t-base); color: var(--text);
  text-transform: capitalize; letter-spacing: .01em; }
.mp-pijl { appearance: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--p-olijf); border-radius: 10px; background: var(--surface-3); color: var(--text); cursor: pointer;
  transition: background .15s var(--ease); }
.mp-pijl svg.ic { width: 22px; height: 22px; }
.mp-pijl:active { background: var(--surface-2); }
.mp-head { text-align: center; color: var(--text-3); font-size:var(--t-xs); letter-spacing: .06em; text-transform: uppercase; }

/* een dag buiten de maand: enkel een kader, geen cijfer */
.mp-cel.leeg { border: 1px dashed var(--line); border-radius: 8px; background: transparent; opacity: .45; min-height: 46px; }
/* voorbije dagen blijven leesbaar maar vaag */
.mp-cel.voorbij { opacity: .45; }
/* vandaag: gouden rand, ook als er niets is doorgegeven */
.mp-cel.nu { border-color: var(--brand); border-width: 2px; }
.mp-cel.nu .dn { color: var(--brand-deep); }
/* alleen-lezen cel in Mijn rooster */
.mp-cel.toon { cursor: default; }

.mp-tel { text-align: center; color: var(--text-2); margin: 12px 0 0; }
/* twee even brede knoppen naast elkaar; 'wissen' eronder over de volle breedte */
.mp-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mp-acties .btn { width: 100%; min-height: 48px; justify-content: center; }
.mp-acties #mp-wis { grid-column: 1 / -1; }
.mp-acties .btn:disabled { opacity: .55; cursor: default; }
/* legende in twee kolommen: uitgelijnd in plaats van wat er toevallig past */
.mp-legende { display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
  gap: 6px 20px; text-align: left; }
.mp-legende span { display: inline-flex; align-items: center; gap: 7px; }
.mp-samen { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 10px;
  color: var(--text-2); font-size:var(--t-m); }
.mp-uitleg { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); line-height: 1.65; }
.mp-uitleg li + li { margin-top: 6px; }
/* een verwijzing naar een andere tab is een knop in onze stijl, geen blauwe link */
.mp-knop-link { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--p-olijf); background: var(--surface-3); color: var(--text); text-decoration: none;
  font-weight: 500; white-space: nowrap; }
.mp-knop-link:hover { background: var(--surface-2); }

@media (max-width: 760px) {
  .mp-cal .mp-cel, .mp-cel.leeg { min-height: 52px; }
  .mp-acties .btn { flex: 1 1 100%; max-width: none; }
  .mp-rij { grid-template-columns: 1fr auto; row-gap: 2px; }
}

/* wachtwoord wijzigen: de velden zaten tegen de rand van het uitklappaneel en er
   was geen manier om te zien wat je typt (owner 8/09) */
.acc-pw .acc-pw-in { margin: 10px 2px 4px; padding: 14px; background: var(--surface-3);
  border: 1px solid var(--line-2); border-radius: 10px; }
.acc-pw .pw-field { width: 100%; }

/* ===== personeel, tweede ronde (owner 9/09) =====
   De kalender mag niet van hoogte veranderen zodra er uren in een dag staan: elke
   cel is even hoog, het dagcijfer staat altijd bovenaan en eronder zit een vaste
   strook voor de uren. Zo springt er niets bij het bladeren tussen maanden. */
.mp-cal .mp-cel, .mp-cel.leeg { height: 64px; min-height: 0; }
.mp-cal .mp-cel { justify-content: flex-start; padding: 7px 3px 5px; gap: 3px; }
.mp-cel .dn { line-height: 1; font-size:var(--t-base); }
.mp-cel .mp-sub { display: block; height: 26px; line-height: 1.15; font-size:var(--t-xs); font-weight: 600;
  color: var(--text-2); overflow: hidden; }
.mp-cel.gepland .mp-sub { color: var(--brand-ink-2); }
/* een gekozen dag: zachte beige met een stevige rand — het cijfer blijft leesbaar */
.mp-cel.kies { outline: none; background: var(--surface-2); border-color: var(--brand); border-width: 2px; }
.mp-cel.kies .dn { color: var(--text); }
.mp-cel.ja.kies { background: var(--blad-tint-2); } .mp-cel.nee.kies { background: var(--rood-tint-2); }

/* meldingen en samenvatting krijgen dezelfde lucht als de rest */
.mp-kaart .ws-melding { margin-top: 16px; }
.mp-legende { margin-top: 16px; }
.mp-samen { margin-top: 14px; }

/* hele dag / van–tot en de uren op één lijn */
.mp-wanneer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-wanneer .seg { flex: 0 0 auto; }
.mp-tijd { display: flex; align-items: center; gap: 8px; }
.mp-tijd input[type=time] { min-height: 42px; }
/* display:flex hierboven negeerde [hidden]: de uren bleven staan terwijl 'Hele dag'
   gekozen was, en dan weet niemand welke van de twee geldt (gezien 29/09) */
.mp-tijd[hidden] { display: none !important; }
.mp-tot { color: var(--text-2); }

/* de verwijzing naar het andere scherm staat rechtsonder in de kaart */
.mp-naar { display: flex; justify-content: flex-end; margin-top: 12px; }
.mp-naar .mp-knop-link { gap: 6px; padding: 6px 14px; }
.mp-naar svg.ic { width: 16px; height: 16px; }

/* in de lijst van Mijn rooster: wat nog moet komen krijgt een groene toon */
.mp-rij.komt { background: var(--ok-bg); border-color: var(--blad-licht); }

/* op een telefoon neemt het zwevende venster de uitleg van de ⓘ over: het
   CSS-venster hing vast onder het symbool en liep het scherm uit (owner 9/09) */
@media (max-width: 760px) {
  .theo-tip:hover::after, .theo-tip:focus::after { display: none !important; }
  .theo-tip { cursor: pointer; }
  .hintbox { max-width: calc(100vw - 24px); }
}

/* ⓘ-uitleg in de zwevende bak: crème, zoals de tip er altijd uitzag */
.hintbox.tip { background: var(--surface); color: var(--text-zacht); border: 1px solid var(--line);
  font-size:var(--t-m); line-height: 1.35; padding: .55rem .75rem; text-align: left; }

/* zolang de zijbalk openstaat hoort er maar één pijl te zijn: de « om te sluiten.
   De » stond er nog overheen (owner 9/09). */
@media (max-width: 1200px) { body.nav-open-phone #navopen { display: none; } }

/* icoonknop die op bevestiging wacht (owner 9/09): rode rand, icoon blijft staan;
   de vraag zelf staat in de zwevende tip zodat niets de rij uitloopt */
.acc-act.arm { border-color: var(--p-rood-inkt); color: var(--err-ink); box-shadow: inset 0 0 0 1px var(--p-rood-inkt); }

/* Dagrooster dat Bart zelf bewerkt (owner 14/09). Een blok dat van het voorstel
   afwijkt kleurt amber; ligt de dag binnen zeven dagen, dan is het geen voorstel
   meer maar de planning die het personeel al ziet — dan kleurt het steenrood. */
tr.pl-wijz > td { background: var(--warn-bg); }
tr.pl-wijz > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.pl-nabij > td { background: var(--err-bg); }
tr.pl-nabij > td:first-child { box-shadow: inset 3px 0 0 var(--p-rood-inkt); }
.pl-shift { font-variant-numeric: tabular-nums; }
.pl-uren { padding: 2px 6px; margin-left: 6px; line-height: 1; opacity: .55; }
tr:hover .pl-uren, .pl-uren:focus-visible { opacity: 1; }
.pl-uren .ic { width: 15px; height: 15px; }
.pl-uurbew { display: inline-flex; gap: 4px; align-items: center; }
.pl-uurbew input { width: 62px; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.pl-uurbew button { padding: 3px 6px; line-height: 1; }
/* de rij 'blok toevoegen' onder de tabel: één regel op een pc, wikkelt op smal */
.pl-nieuw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-uurveld { display: inline-flex; gap: 4px; align-items: center;
  color: var(--text-2); font-size:var(--t-m); }
.pl-uurveld input { width: 66px; padding: 4px 6px; font-variant-numeric: tabular-nums; }
#pl-n-err { color: var(--err-ink); }
#pl-herstel { display: inline-flex; gap: 4px; align-items: center; font-size:var(--t-m); }
#pl-herstel .ic { width: 15px; height: 15px; }

/* vinkje naast 'Terug naar het voorstel': de keuzelijst verruimen tot iedereen
   die de werkpost kan, ook wie zich niet opgaf (owner 14/09) */
.pl-ruim { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px;
  font-size:var(--t-m); color: var(--text-2); cursor: pointer; }
.pl-ruim input { margin: 0; accent-color: var(--p-wijn); }

/* ---- Aanvraag aan Horecast: ronde knop rechtsonder + ticketvenster (owner 26/09, assets/js/tickets.js) ---- */
.tk-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--brand-deep); background: var(--brand); color: var(--p-inkt-2); box-shadow: var(--shadow-pop);
  cursor: pointer; display: grid; place-items: center; padding: 0; min-height: 0; }
.tk-fab .tk-plus { font-size:var(--t-4xl); line-height: 1; font-weight: 600; transform: translateY(-2px); }
.tk-fab:hover { background: var(--brand-deep); color: var(--wit); border-color: var(--brand-deep); }
.tk-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.tk-fab:disabled { opacity: .6; cursor: progress; }
.tk-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(43, 37, 25, .45); display: grid; place-items: center; padding: 16px; }
.tk-panel { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
  width: min(1180px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 22px 20px; display: grid; gap: 14px; align-content: start; }
.tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tk-head h2 { margin: 0 0 2px; font-size:var(--t-xl); }
.tk-kies { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tk-kaart { text-align: left; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 16px 18px; cursor: pointer; display: grid; gap: 6px; color: var(--text); min-height: 0; }
.tk-kaart:hover, .tk-kaart:focus-visible { border-color: var(--brand-deep); background: var(--surface-2); color: var(--text); }
.tk-kaart b { font-size:var(--t-l); }
.tk-kaart span { color: var(--text-2); font-size:var(--t-ml); font-weight: 400; }
.tk-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 20px; align-items: start; }
.tk-teken { display: grid; gap: 8px; min-width: 0; }
.tk-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-tools button.on { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.tk-tools .kleur { width: 28px; height: 28px; min-height: 0; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.tk-tools .kleur.on { border-color: var(--text); }
.tk-tools .tk-sep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 4px; }
.tk-canvas { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: auto; background: var(--bg); }
.tk-blad { position: relative; width: 100%; margin: 0 auto; }
.tk-canvas canvas { display: block; width: 100%; height: auto; }
.tk-canvas canvas.teken { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.tk-canvas.hand canvas.teken { cursor: grab; }
.tk-canvas.hand canvas.teken:active { cursor: grabbing; }
.tk-tools .tk-zoomknop { padding-left: 8px; padding-right: 8px; min-width: 0; }
.tk-zoom-pct { min-width: 3.2em; text-align: center; font-size:var(--t-m); font-variant-numeric: tabular-nums; color: var(--text-2); }
/* 'Vergroten' (Bart 30/09): de afdruk over het hele venster, het formulier even weg */
.tk-overlay.groot { padding: 6px; }
.tk-panel.groot { width: 100%; height: 100%; max-height: none; overflow: hidden; padding: 10px 12px 12px; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.tk-panel.groot .tk-head h2 { font-size:var(--t-base); }
.tk-panel.groot .tk-body { grid-template-columns: minmax(0, 1fr); min-height: 0; height: 100%; }
.tk-panel.groot .tk-form, .tk-panel.groot .tk-check, .tk-panel.groot .tk-teken > .t-meta { display: none; }
.tk-panel.groot .tk-teken { grid-template-rows: auto minmax(0, 1fr); min-height: 0; height: 100%; }
.tk-panel.groot .tk-canvas { height: 100%; min-height: 0; }
.tk-check { display: flex; gap: 8px; align-items: center; font-size:var(--t-ml); flex-wrap: wrap; }
.tk-form { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tk-form label { display: grid; gap: 4px; font-size:var(--t-ml); color: var(--text-2); }
.tk-form input[type=text], .tk-form textarea, .tk-form select { font: inherit; padding: 7px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--r-s); background: var(--inset); color: var(--text); width: 100%; box-sizing: border-box; }
.tk-form textarea { min-height: 68px; resize: vertical; }
.tk-acties { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.tk-err { color: var(--wijn); font-size:var(--t-m); margin-right: auto; }
.tk-klaar p { max-width: 60ch; }
.tk-nr { font-size:var(--t-2xl); font-weight: 700; }
@media (max-width: 960px) { .tk-body { grid-template-columns: 1fr; } }
/* lijst met aanvragen in Hulp */
.tk-lijst { display: grid; gap: 8px; }
.tk-rij { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: start; padding: 10px 12px;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-s); }
.tk-rij .soort { font-size:var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-olijf); padding-top: 3px; white-space: nowrap; }
.tk-rij .antwoord { grid-column: 1 / -1; font-size:var(--t-ml); color: var(--text-2); white-space: pre-line; }
.tk-rij .status { font-size:var(--t-s); padding: 2px 9px; border-radius: 999px; background: var(--inset); color: var(--text); white-space: nowrap; }
.tk-rij .status.nieuw { background: var(--warn-bg); } .tk-rij .status.beoordeeld { background: var(--ok-bg); }
.tk-rij .status.gedaan { background: var(--ok-bg); } .tk-rij .status.wacht, .tk-rij .status.afgewezen { background: var(--err-bg); }
/* stappenplan in het paneel 'Gewerkte uren uit INDII' (planner, owner 26/09) */
.pl-stappen { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size:var(--t-ml); color: var(--text); }

/* ---- Horecast als app op het beginscherm (Arthur 29/09): uitleg, affiche, tip ---- */
.ai-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(43, 37, 25, .45); display: grid; place-items: center; padding: 16px; overflow: auto; }
.ai-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  width: min(100%, 460px); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 20px; }
.ai-groot .ai-box { width: min(100%, 780px); }
.ai-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-titel { font-size:var(--t-xl); font-weight: 700; }
.ai-x { width: 38px; min-width: 38px; height: 38px; min-height: 0; padding: 0; flex: none; }
.ai-tabs { display: flex; margin: 0 0 12px; }
.ai-tabs button { flex: 1 1 0; }
.ai-stappen { margin: 0; padding: 0; list-style: none; counter-reset: ai; display: grid; gap: 10px; }
.ai-stappen li { counter-increment: ai; position: relative; padding: 2px 0 2px 42px; min-height: 30px; line-height: 1.45; }
.ai-stappen li::before { content: counter(ai); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--p-inkt-2); font-weight: 700; display: grid; place-items: center; }
.ai-ic { display: inline-flex; vertical-align: -5px; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--raised); margin: 0 2px; }
.ai-ic svg.ic { width: 18px; height: 18px; }
.ai-dots { font-size:var(--t-xl); font-weight: 700; line-height: 1; }
.ai-nu { width: 100%; margin: 0 0 8px; }
.ai-of { margin: 0 0 10px; }
.ai-intro { margin: 0 0 12px; }
.ai-qr { width: 220px; max-width: 70%; margin: 0 auto; background: var(--wit); border-radius: 8px; padding: 6px; }
.ai-qr svg { display: block; width: 100%; height: auto; }
.ai-qr.groot { width: 260px; }
.ai-adres { text-align: center; font-weight: 700; font-size:var(--t-l); letter-spacing: .02em; margin: 8px 0 0; }
.ai-affiche { text-align: center; padding: 6px 4px 0; }
.ai-affiche .ai-logo { width: 150px; height: auto; margin: 0 auto 2px; display: block; }
.ai-affiche h1 { font-size:var(--t-3xl); margin: 0 0 4px; }
.ai-affiche h2 { font-size:var(--t-base); margin: 0 0 8px; }
.ai-sub { margin: 0 0 14px; color: var(--text-2); }
.ai-scan { margin: 2px 0 16px; color: var(--text-2); font-size:var(--t-m); }
.ai-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.ai-twee > div, .ai-inlog { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--raised); }
.ai-twee .ai-stappen { font-size:var(--t-m); gap: 8px; }
.ai-inlog { text-align: left; margin-top: 14px; }
.ai-inlog p { margin: 0; line-height: 1.6; }
.ai-knoppen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
@media (max-width: 640px) { .ai-twee { grid-template-columns: 1fr; } }
.ai-tip { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 65;
  display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-l); box-shadow: 0 6px 22px rgba(0, 0, 0, .22); font-size:var(--t-m); }
.ai-tip span { flex: 1 1 auto; line-height: 1.3; }
.ai-tip .primary { flex: none; min-height: 38px; padding: 0 14px; white-space: nowrap; }
body.ai-tip-aan main { padding-bottom: 130px; }
@page { margin: 12mm; }
@media print {
  body.ai-print { background: var(--wit); }
  body.ai-print > *:not(.ai-overlay) { display: none !important; }
  body.ai-print .ai-overlay { position: static; display: block; background: none; padding: 0; overflow: visible; }
  body.ai-print .ai-box { width: auto; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: 0; background: var(--wit); }
  body.ai-print .ai-noprint { display: none !important; }
  /* alles op één blad A4 */
  body.ai-print .ai-affiche .ai-logo { width: 110px; }
  body.ai-print .ai-affiche h1 { font-size:var(--t-3xl); }
  body.ai-print .ai-sub { margin-bottom: 8px; }
  body.ai-print .ai-qr.groot { width: 215px; }
  body.ai-print .ai-scan { margin-bottom: 10px; }
  body.ai-print .ai-twee { gap: 12px; }
  body.ai-print .ai-twee > div, body.ai-print .ai-inlog { break-inside: avoid; padding: 10px 12px; }
  body.ai-print .ai-inlog { margin-top: 10px; }
  body.ai-print .ai-stappen li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* links in de samenvatting van de beschikbaarheidstabel (29/09) */
#pl-hc .t-meta a, .av-stats a { color: var(--brand-deep); }

/* ---- 'Open in WhatsApp' bij een kant-en-klaar bericht (Arthur 29/09) ---- */
.wa-open { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 10px; padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--p-olijf); border-radius: var(--r-s); background: var(--surface); color: var(--text);
  font-weight: 600; font-size:var(--t-m); text-decoration: none; }
.wa-open:hover { background: var(--surface-2); border-color: var(--brand-deep); }
.wa-open svg.ic { width: 18px; height: 18px; }

/* ---- Mailbox: de mailbox van de zaak (Arthur 29/09) ---- */
.po-tabs { display: flex; flex-wrap: wrap; margin: 0 0 12px; }
.po-tabs button { flex: 1 1 auto; white-space: nowrap; }
.po-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--inset);
  font-size:var(--t-xs); font-weight: 700; line-height: 20px; text-align: center; color: var(--text); }
.po-n.fel { background: var(--p-rood-inkt); color: var(--wit); }
.po-over { display: inline-block; max-width: 46ch; white-space: normal; line-height: 1.35; }
.po-act { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.po-act button { min-height: 32px; padding: 0 10px; font-size:var(--t-s); }
.po-act select.po-cat { min-height: 32px; max-width: 130px; font-size:var(--t-s); padding: 2px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--text-2); }
.po-pdf { display: inline-flex; color: var(--err-ink); }
.po-pdf svg.ic { width: 22px; height: 22px; }
.po-klaar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.po-klaar input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--brand-deep); }
.po-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.po-tegels .kpi { background: var(--surface-2); border: 1px solid var(--line); border-left: 5px solid var(--p-olijf);
  border-radius: var(--r-m); padding: 10px 14px; }
.po-tegels .kpi .num { font-size:var(--t-xl); font-weight: 700; }
.po-tegels .up { color: var(--groen-donker); } .po-tegels .down { color: var(--err-ink); }
.po-maand { width: auto; min-width: 420px; margin: 0 0 8px; font-size:var(--t-m); }
.po-maand th, .po-maand td { padding: 5px 14px 5px 0; text-align: right; border-bottom: 1px solid var(--line); }
.po-maand th:first-child, .po-maand td:first-child { text-align: left; }
.po-maand .up { color: var(--groen-donker); } .po-maand .down { color: var(--err-ink); }
@media (max-width: 640px) { .po-tegels { grid-template-columns: 1fr; } .po-maand { min-width: 0; width: 100%; } }

/* ---- Mailbox: kleurcode, afzenders en 'antwoord nodig' (Arthur 29/09) ----
   Elke soort een vaste kleur (facturen rood); elke afzender een eigen kleur op het ronde
   vakje met letters (de kleur zelf komt uit post.js of uit de keuze van Bart). */
.po-s-factuur    { --po-k: var(--p-baksteen); }   /* rood: facturen, het belangrijkste */
.po-s-ebox       { --po-k: var(--p-paars); }   /* paars: e-Box en overheid */
.po-s-klacht     { --po-k: var(--p-oranje-2); }   /* oranje: klachten */
.po-s-reservatie { --po-k: var(--p-groen-terras); }   /* groen: reservaties */
.po-s-bestelling { --po-k: var(--p-blauw-mid); }   /* blauw: bestellingen bij leveranciers */
.po-s-777        { --po-k: var(--p-antraciet); }   /* antraciet: 777 (privé) */
.po-s-ander      { --po-k: var(--p-petrol); }   /* blauwgroen: andere post van wie je bijhoudt */
.po-balk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin: 0 0 14px; }
.po-groep { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.po-groep .po-tabs { margin: 0; }
.po-groep .t-label { display: inline-flex; align-items: center; gap: 4px; }
.po-rechts { margin-left: auto; }
.po-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 14px; }
.po-tabs button svg.ic { width: 17px; height: 17px; }
.po-sub { margin: 0 0 8px; }
.po-stip { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--po-k, var(--p-olijf)); }
.po-soort { display: inline-block; padding: 1px 9px; border-radius: 10px; background: var(--po-k, var(--p-olijf)); color: var(--wit);
  font-size:var(--t-xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
tr.po-rij > td:first-child { box-shadow: inset 6px 0 0 var(--po-k, var(--p-olijf)); padding-left: 16px; }
.po-afz { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.po-afz-t { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.25; }
.po-afz-t .t-meta { font-size:var(--t-xs); }
.po-naam { font-weight: 600; white-space: normal; }
.po-merken { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.po-bol { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; font-size:var(--t-xs); font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(47, 42, 34, .18); }
.po-bol.groot { width: 36px; height: 36px; font-size:var(--t-s); }
.po-antw { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 10px;
  background: var(--chrome-2); color: var(--wit); font-size:var(--t-xs); font-weight: 700; line-height: 20px; white-space: nowrap; }
.po-antw svg.ic { width: 15px; height: 15px; }
.po-antw.klaar { background: var(--ok-bg); color: var(--groen-donker); font-weight: 600; }
.po-mailto { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border-radius: var(--r-s);
  background: var(--chrome-2); border: 1px solid var(--chrome-2); color: var(--wit); font-size:var(--t-s); font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.po-mailto:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.po-mailto svg.ic { width: 16px; height: 16px; }
.po-act button.po-antw-knop { padding: 0 6px; color: var(--text-faint); }
.po-act button.po-antw-knop.aan { color: var(--text); background: var(--inset); }
.po-act button.po-antw-knop svg.ic { width: 18px; height: 18px; }
.po-janee { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.po-janee button { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; font-size:var(--t-m); font-weight: 600; }
.po-janee button svg.ic { width: 16px; height: 16px; }
.po-janee button.ja.on, .po-janee button.ja.on:hover { background: var(--p-groen-terras); border-color: var(--p-groen-terras); color: var(--wit); }
.po-janee button.nee.on, .po-janee button.nee.on:hover { background: var(--p-rood-inkt); border-color: var(--p-rood-inkt); color: var(--wit); }
.po-kleur { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; border-radius: 50%; }
.po-kleur input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.po-kleur:hover .po-bol, .po-kleur:focus-within .po-bol { box-shadow: 0 0 0 3px var(--brand); }
select.po-vast { min-height: 34px; max-width: 170px; font-size:var(--t-s); padding: 2px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--surface); color: var(--text); }
.po-vraag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--brand-deep); border-left: 6px solid var(--brand); border-radius: var(--r-m); background: var(--warn-bg); }
.po-vraag > span:nth-child(2) { flex: 1 1 260px; line-height: 1.5; }
.po-vraag-k { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.po-vraag-k button { min-height: 36px; }
.po-wenk { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.po-wenk svg.ic { width: 17px; height: 17px; }
.po-wenk a { color: var(--brand-deep); font-weight: 600; }
@media (max-width: 900px) { .po-rechts { margin-left: 0; } .po-groep { width: 100%; } }
@media (max-width: 640px) {
  .po-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); }
  .po-tabs button, .po-tabs button:last-child { border: 0; min-height: 44px; padding: 2px 6px; font-size:var(--t-m); }
  .po-tabs button.on { background: var(--line); }
  .po-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* een werkpost-tablet logt niet zelf uit (Arthur 1/10): een manager doet dat op afstand */
body.rol-station #logout { display: none; }

/* vast uurrooster: meer blokken per dag (Arthur 1/10) */
.pl-vr-blokken { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.pl-vr-blok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-vr-dag b + small + b { margin-top: 4px; }

/* prikklok, blad Maand (Arthur 1/10) */
.kl-log { margin: 0; padding-left: 18px; font-size:var(--t-m); color: var(--text-2); }

/* de volledige mailbox (Arthur 2/10): mappen | lijst | lezer; smal = een kolom */
.mx { display: grid; grid-template-columns: 200px minmax(260px, 380px) 1fr; gap: 14px; min-height: 560px; }
.mx-mappen { display: flex; flex-direction: column; gap: 8px; }
.mx-mlijst { display: flex; flex-direction: column; gap: 2px; }
.mx-map { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.mx-map span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-map b { font-size:var(--t-s); padding: 0 7px; border-radius: 10px; background: var(--brand); color: var(--wit); }
.mx-map:hover { background: var(--inset); }
.mx-map.on { background: color-mix(in srgb, var(--brand) 20%, transparent); font-weight: 600; }
.mx-lijst { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); padding-right: 12px; }
.mx-zoek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mx-zoek input[type=search] { flex: 1 1 100%; min-width: 0; }
.mx-filter button { font-size:var(--t-s); }
.mx-rijen { display: flex; flex-direction: column; overflow-y: auto; max-height: 70vh; }
.mx-rij { display: flex; gap: 6px; align-items: flex-start; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.mx-rij:hover { background: var(--inset); }
.mx-rij.on { background: color-mix(in srgb, var(--brand) 14%, transparent); border-left-color: var(--brand); }
.mx-rij.nieuw .mx-wie, .mx-rij.nieuw .mx-rij-2 { font-weight: 700; }
.mx-rij-t { flex: 1; min-width: 0; }
.mx-rij-1 { display: flex; justify-content: space-between; gap: 8px; }
.mx-wie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tijd { flex: none; font-size:var(--t-s); color: var(--text-2); }
.mx-rij-2 { font-size:var(--t-m); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-antw svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.mx-ster { border: 0; background: transparent; font-size:var(--t-l); line-height: 1; color: var(--text-2); cursor: pointer; padding: 2px; min-height: 0; }
.mx-ster.aan { color: var(--oranje-fel); }
.mx-pag { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
.mx-leeg { padding: 20px 6px; }
.mx-lees { min-width: 0; }
.mx-niets { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 80px 0; }
.mx-acties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.mx-acties .mx-terug { display: none; }
.mx-schrijf .mx-acties .mx-terug { display: inline-flex; }
.mx-verplaats { min-height: 34px; max-width: 160px; }
.mx-onderwerp { margin: 4px 0 8px; font-size:var(--t-l); overflow-wrap: anywhere; }
.mx-kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size:var(--t-m); }
.mx-kop-r { display: flex; gap: 10px; }
.mx-kop-r .t-label { flex: none; width: 52px; }
.mx-kop-r > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mx-bijl { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.mx-bijlage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size:var(--t-m); color: var(--text); text-decoration: none; max-width: 100%; overflow: hidden; }
.mx-bijlage small { color: var(--text-2); }
.mx-weergave { margin-bottom: 8px; }
.mx-html { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.mx-tekst { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-height: 62vh; overflow-y: auto; }
.mx-schrijf { display: flex; flex-direction: column; gap: 8px; }
.mx-veld { display: flex; align-items: center; gap: 8px; }
.mx-veld span { flex: none; width: 76px; font-size:var(--t-m); color: var(--text-2); }
.mx-veld input { flex: 1; min-width: 0; }
.mx-bccknop { align-self: flex-start; font-size:var(--t-m); }
#mx-tekst { width: 100%; min-height: 260px; font: inherit; line-height: 1.5; padding: 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; box-sizing: border-box; }
.mx-orig { font-size:var(--t-m); color: var(--text-2); }
.mx-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mx-bestand { cursor: pointer; }
.mx-melding { margin: 0 0 8px; }
.mx-melding[hidden], .mx-veld[hidden] { display: none; }
@media (max-width: 1100px) {
  .mx { grid-template-columns: 1fr; min-height: 0; }
  .mx-mappen { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mx-mlijst { flex-direction: row; overflow-x: auto; flex: 1 1 100%; }
  .mx-map { width: auto; flex: none; }
  .mx-lijst { border-right: 0; padding-right: 0; }
  .mx.lezen .mx-lijst, .mx.lezen .mx-mappen { display: none; }
  .mx:not(.lezen) .mx-lees { display: none; }
  .mx-acties .mx-terug { display: inline-flex; }
}

/* XLS: Barts werkboek (Arthur 2/10) */
.xl-kaart h3 { margin: 14px 0 8px; font-size:var(--t-base); }
.xl-kiezer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.xl-titel { font-size:var(--t-l); min-width: 150px; text-align: center; }
.xl-kiezer .xl-titel:first-child { text-align: left; min-width: 0; }
.xl-mkies { min-height: 34px; max-width: 170px; }
.xl-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.xl-alle { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); color: var(--text-2); }
.xl-kern { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.xl-kern > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.xl-kern strong { font-size:var(--t-base); }
.xl-kern small { color: var(--text-2); font-weight: 400; }
.xl-uitleg { margin: 4px 0 8px; }
.xl-wrap { max-height: 72vh; overflow: auto; }
.xl-tabel { border-collapse: separate; border-spacing: 0; font-size:var(--t-m); }
.xl-tabel thead th { position: sticky; top: 0; z-index: 2; background: var(--paper, var(--bg)); white-space: nowrap; padding: 6px 4px; font-size:var(--t-xs); }
.xl-tabel thead tr.xl-tot th, .xl-tabel thead tr.xl-tot td { position: sticky; top: 29px; z-index: 2; background: var(--inset); padding: 4px; }
.xl-tabel th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper, var(--bg)); text-align: left; white-space: nowrap; }
.xl-tabel thead th:first-child { z-index: 3; }
.xl-tabel tbody tr.xl-we th:first-child { background: var(--inset); }
.xl-tabel tbody tr.xl-nu th:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.xl-tabel td { padding: 1px 2px; border-bottom: 1px solid var(--line); }
.xl-tabel thead th:not(:first-child) { text-align: right; }
.xl-tabel input.xl-cel { height: 28px; min-height: 0; }
.xl-cel { width: 78px; min-height: 28px; padding: 3px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; font: inherit; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.xl-cel:hover:not(:disabled) { border-color: var(--line); }
.xl-cel:focus { outline: none; border-color: var(--brand); background: var(--raised); }
.xl-cel::placeholder { color: var(--text-2); font-style: italic; opacity: .85; }
.xl-cel.xl-b-kassa { color: var(--info-ink); }
.xl-cel.xl-b-telling { color: var(--plant-donker); }
.xl-cel.xl-b-viva { color: var(--info-ink); }
td.xl-sel { box-shadow: inset 0 0 0 2px var(--p-blauw-mid); background-color: rgba(42, 110, 187, .14) !important; }
.xl-cel.xl-fout { border-color: var(--p-rood-inkt); background: var(--err-bg); }
.xl-fitk { font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 6px !important; background: color-mix(in srgb, var(--inset) 60%, transparent); }
.xl-ok { color: var(--text-2); }
.xl-geel { background: var(--warn-bg) !important; color: var(--brand-ink-2); }
.xl-rood { background: var(--err-bg) !important; color: var(--err-ink); font-weight: 600; }
.xl-rood-t { color: var(--err-ink); }
.xl-dagknop { border: 0; background: transparent; padding: 2px 4px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 0; }
.xl-dagknop:hover { text-decoration: underline; }
.xl-noti svg, .xl-noti .ms { width: 14px; height: 14px; vertical-align: -2px; color: var(--brand); }
.xl-g-uitgave { color: var(--brand-ink-2); }
.xl-g-kas { color: var(--err-ink); }
.xl-msg { min-height: 1.3em; margin-top: 6px; }
.xl-dagkop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.xl-dagkop h3 { margin: 0; min-width: 230px; text-align: center; }
.xl-dagfit { padding: 4px 10px; border-radius: 14px; }
.xl-dag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; }
.xl-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-content: start; }
.xl-velden fieldset, .xl-zij fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 10px; min-width: 0; }
.xl-velden legend, .xl-zij legend { font-size:var(--t-s); font-weight: 600; color: var(--text-2); padding: 0 4px; }
.xl-veld { display: grid; grid-template-columns: 1fr 110px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; margin: 4px 0; }
.xl-veld > span { font-size:var(--t-m); }
.xl-veld > small { grid-column: 2; text-align: right; font-size:var(--t-xs); min-height: 0; }
.xl-veld .xl-cel { width: 100%; border-color: var(--line); background: var(--raised); min-height: 34px; }
.xl-coup { display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; gap: 8px; align-items: center; margin: 4px 0; }
.xl-coup input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 34px; text-align: right; }
.xl-coup small { text-align: right; }
.xl-teltot { display: flex; justify-content: space-between; margin: 8px 0; padding-top: 6px; border-top: 1px solid var(--line); }
.xl-notitie { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.xl-kas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.xl-saldo { width: 100%; max-width: 480px; border-collapse: collapse; }
.xl-saldo td { padding: 4px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.xl-saldo tr.xl-tot td, .xl-jaar tr.xl-tot th, .xl-jaar tr.xl-tot td { border-top: 2px solid var(--text-2); }
.xl-kluis { max-width: 420px; }
.xl-keten th, .xl-keten td, .xl-jaar th, .xl-jaar td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.xl-keten tr.on { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.xl-mlink { border: 0; background: transparent; padding: 0; font: inherit; color: var(--ink); cursor: pointer; min-height: 0; text-decoration: underline dotted; }
.xl-mlink.on { font-weight: 700; }
.xl-jaar small { font-size:var(--t-xs); }
.xl-pos { color: var(--ok); }
.xl-neg { color: var(--err-ink); }
/* Kasboek > Records (Arthur 25/10) */
.xl-rec-nieuw { white-space: nowrap; }
.xl-rec-kern > div { position: relative; }
.xl-rec-kern > div.xl-rec-on { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.xl-rec-kern .xl-rec-nieuw { align-self: flex-start; margin-top: 4px; }
.xl-rec-nu { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 14px; }
.xl-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 8px 24px; align-items: start; }
.xl-rec-grid section { min-width: 0; }
.xl-rec-grid h3 { margin: 10px 0 2px; }
.xl-rec-grid h4 { margin: 10px 0 4px; }
.xl-rec-tab { width: 100%; border-collapse: collapse; }
.xl-rec-tab th, .xl-rec-tab td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.xl-rec-tab .r { text-align: right; }
.xl-rec-tab tbody th { font-weight: 600; }
.xl-rec-tab tr.on { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.xl-rec-tab tr.on th, .xl-rec-tab tr.on td { font-weight: 700; }
.xl-rec-tab .chip { font-size: var(--t-xs); padding: 0 6px; min-height: 0; }
.xl-rec-zoek { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.xl-rec-zoek input { flex: 1 1 120px; min-width: 0; min-height: 36px; }
@media (max-width: 480px) {
  .xl-rec-kern { grid-template-columns: 1fr 1fr; }
  .xl-rec-tab th, .xl-rec-tab td { padding: 4px 3px; font-size: var(--t-s); }
}
@media (max-width: 900px) {
  .xl-dag, .xl-kas { grid-template-columns: 1fr; }
  .xl-acties { margin-left: 0; }
}

/* adresboek in de mailbox (Arthur 2/10) */
.mx-veld { position: relative; }
.mx-adressen { position: absolute; left: 84px; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); overflow: hidden; }
.mx-adressen button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; font: inherit; cursor: pointer; min-height: 0; color: var(--ink); }
.mx-adressen button small { color: var(--text-2); }
.mx-adressen button.on, .mx-adressen button:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.mx-contacten { align-self: flex-start; font-size:var(--t-m); cursor: pointer; }

/* XLS: Barts kleuren en volledig scherm (Arthur 2/10) */
.xl-tabel thead { position: sticky; top: 0; z-index: 3; }
.xl-tabel thead th, .xl-tabel thead tr.xl-tot th, .xl-tabel thead tr.xl-tot td { position: static; }
.xl-tabel thead th:first-child { position: sticky; left: 0; z-index: 4; }
.xl-tabel th.xk { background: var(--xk); color: var(--text-strong); border-right: 1px solid rgba(0,0,0,.08); }
.xl-tabel th.xk.xl-wit { color: var(--wit); }
.xl-tabel tr.xl-groep th { font-size:var(--t-xs); font-weight: 600; text-align: center !important; padding: 3px 4px; white-space: nowrap; }
.xl-tabel tr.xl-deel th { background: var(--paper, var(--bg)); font-size:var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); text-align: left !important; padding: 2px 6px; }
.xl-tabel td.xk { background: color-mix(in srgb, var(--xk) 70%, var(--raised)); }
.xl-tabel tr.xl-tot td.xk { background: var(--xk); }
.xl-tabel tbody tr.xl-we td.xk { background: color-mix(in srgb, var(--xk) 85%, var(--p-olijf)); }
.xl-tabel .xl-scheid { border-left: 3px solid var(--text-strong) !important; }
/* duidelijke kolommen en gecentreerde titels (Arthur 2/10) */
.xl-tabel th, .xl-tabel td { border-right: 1px solid rgba(29, 29, 27, .22); }
.xl-tabel thead tr.xl-kop th { text-align: center !important; border-bottom: 2px solid var(--text-strong); vertical-align: bottom; }
.xl-tabel tbody td { border-bottom: 1px solid rgba(29, 29, 27, .12); }
.xl-tabel .xl-cel { box-sizing: border-box; padding: 2px 3px; }
.xl-tabel .xl-cel.xl-n { text-align: center; }
.xl-tabel tr.xl-stand th, .xl-tabel tr.xl-begin th { font-size:var(--t-xs); font-weight: 600; color: var(--text-2); }
.xl-tabel tr.xl-stand td, .xl-tabel tr.xl-begin td { padding: 1px 2px; background: var(--paper, var(--bg)); }
.xl-tabel tr.xl-stand td.xk, .xl-tabel tr.xl-begin td.xk { background: color-mix(in srgb, var(--xk) 85%, var(--raised)); }
.xl-tabel tr.xl-begin td { border-bottom: 2px solid var(--text-strong); }
.xl-tellertab input.xl-nu { width: 64px; text-align: right; }
/* opmaak zoals in Excel (Arthur 2/10): kolombreedte en rijhoogte slepen, menu per kolom en rij */
.xl-tabel th.xl-kolkop { position: relative; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.xl-tabel th.xl-kolkop:hover .xl-klbl { text-decoration: underline dotted; }
.xl-greep { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.xl-greep:hover { background: rgba(29, 29, 27, .25); }
.xl-tabel tr.xl-groep th, .xl-tabel tr.xl-deel th { max-width: 1px; overflow: hidden; text-overflow: ellipsis; }
.xl-tabel tbody th[data-rij], .xl-tabel thead th[data-rij] { padding-right: 18px; }
.xl-rgreep { position: absolute; left: 0; right: 0; bottom: -3px; height: 7px; cursor: row-resize; z-index: 2; touch-action: none; }
.xl-rgreep:hover { background: rgba(29, 29, 27, .25); }
.xl-rmenu { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: 0 3px; min-height: 0; font-size:var(--t-m); line-height: 1; color: var(--text-2); cursor: pointer; opacity: 0; }
.xl-tabel tr:hover .xl-rmenu, .xl-rmenu:focus { opacity: 1; }
.xl-tabel tr.xl-rk > td, .xl-tabel tr.xl-rk > th { background: color-mix(in srgb, var(--xr) 45%, var(--raised)) !important; }
.xl-tabel tr[style*="height"] .xl-cel { height: 100%; }
.xl-menu { position: fixed; z-index: 2000; min-width: 190px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.xl-menu > button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; font: inherit; text-align: left; min-height: 0; cursor: pointer; }
.xl-menu > button:hover:not(:disabled), .xl-menu > button:focus { background: var(--bg); outline: none; }
.xl-menu > button:disabled { opacity: .4; cursor: default; }
.xl-menu-t { font-size:var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 4px 8px 2px; }
.xl-palet { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; padding: 4px 8px 6px; }
.xl-sw { width: 22px; height: 22px; min-height: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .25); border-radius: 4px; cursor: pointer; }
.xl-opmaak { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.xl-opm-rij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xl-opmaakknop.on { background: var(--bg); }
/* blad Personeel (Arthur 2/10) */
.xl-ptab { border-collapse: collapse; font-size:var(--t-m); }
.xl-ptab th, .xl-ptab td { padding: 3px 6px; border-bottom: 1px solid var(--line); border-right: 1px solid rgba(29, 29, 27, .12); white-space: nowrap; }
.xl-ptab thead th { text-align: center; border-bottom: 2px solid var(--text-strong); font-size:var(--t-s); }
.xl-ptab tbody th { text-align: left; font-weight: 600; }
.xl-ptab .xl-cel { border-color: var(--line); background: var(--raised); }
.xl-ptab td.c { text-align: center; }
.xl-plast { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-width: 800px; }
.xl-pdag { margin-top: 14px; }
.xl-pdag summary { cursor: pointer; font-weight: 600; }
.xl-pdagtab td, .xl-pdagtab th { padding: 1px 6px; }
.xl-pdagtab .xl-dcel { width: calc(5ch + 8px); text-align: right; }
.xl-dcel.xl-typ { font-weight: 700; background: var(--surface-3); }
.xl-pregels { margin: 10px 0 14px; border: 1px solid var(--line, var(--line-2)); border-radius: 8px; padding: 8px 12px; }
.xl-pregels summary { cursor: pointer; font-weight: 600; }
.xl-pregels summary small { font-weight: 400; margin-left: 6px; }
.xl-regels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 6px; max-width: 1000px; }
.xl-regels select, .xl-regels input { width: 100%; }
.xl-rvb { font-style: italic; }
.xl-rknop { display: flex; gap: 8px; flex-wrap: wrap; }
.xl-week { margin: 6px 0 18px; }
.xl-weeknav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xl-weeknav h3 { margin: 0; min-width: 210px; text-align: center; }
.xl-wktab th, .xl-wktab td { vertical-align: top; }
.xl-wktab thead th { text-align: center; }
.xl-wktab th small { display: block; font-weight: 400; }
.xl-wkd { min-width: 84px; text-align: center; padding: 3px 3px; }
.xl-wkd.xl-nu, .xl-wktab th.xl-nu { background: rgba(212, 167, 44, .14); }
.xl-wk-t { font-size:var(--t-xs); white-space: nowrap; }
.xl-wk-p { font-size:var(--t-xs); color: var(--text-olijf); white-space: nowrap; }
.xl-wk-mis .xl-wk-t { color: var(--baksteen); font-style: italic; }
/* niet of laat uitgeklokt, nog te bevestigen (Arthur 16/10) */
.xl-wk-tb { font-size:var(--t-xs); font-weight: 600; color: var(--err-ink); white-space: nowrap; }
.xl-wktab td.xl-wk-tbc, .xl-pm-tab tr.xl-wk-tbc > * { background: var(--err-bg); }
/* Arthur 23/10: laat uitgeklokt = geel (nakijken), niet uitgeklokt blijft rood */
.xl-wktab td.xl-wk-tbc.xl-wk-laat, .xl-pm-tab tr.xl-wk-tbc.xl-wk-laat > * { background: var(--warn-bg); }
.xl-wk-tb[data-laat] { color: var(--warn-ink); }
/* Bart 29/10: in de cel alleen een klein teken; de uitleg staat in de legende en bij aanwijzen */
.xl-wk-tb .ms, .xl-wk-tb .material-symbols-outlined { font-size: var(--t-s); vertical-align: middle; }
.xl-legende { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.xl-legende summary { cursor: pointer; font-weight: 700; }
.xl-legende ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 4px; padding: 0; list-style: none; font-size: var(--t-s); }
.xl-legende li { display: flex; align-items: center; gap: 6px; }
.xl-leg-staal { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 4px; border: 1px solid var(--line); border-radius: 5px; font-size: var(--t-xs); background: var(--surface); }
.xl-leg-laat { background: var(--warn-bg); color: var(--warn-ink); }
.xl-leg-niet { background: var(--err-bg); color: var(--err-ink); }
.xl-leg-mis { background: var(--err-bg); box-shadow: inset 0 0 0 2px var(--baksteen); }
.xl-leg-650 { background: var(--oranje-tint); color: var(--oranje-donker); border-color: var(--oranje); font-weight: 700; }
.xl-leg-weg { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .08) 0 6px, transparent 6px 12px); }
.xl-leg-typ { font-weight: 700; background: var(--surface-3); }
.xl-leg-grijs { color: var(--text-2); }
.xl-leg-plan { color: var(--text-2); font-size: var(--t-xs); }
.xl-leg-nu { background: rgba(212, 167, 44, .14); }
/* Bart 29/10: een geplande dag zonder tik (niet getikt) is helemaal rood, niet alleen de tekst */
.xl-wktab td.xl-wk-mis, .xl-pm-tab tr.xl-wk-mis > * { background: var(--err-bg); }
.xl-wktab td.xl-wk-mis { box-shadow: inset 0 0 0 2px var(--baksteen); }
/* luiken (Arthur 23/10): een statuut of een persoon dichtklappen tot een smalle strook */
.xl-wktab .xl-luik { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0 2px; font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.xl-wktab .xl-luik .ic { width: 14px; height: 14px; }
.xl-wktab .xl-luik:hover { color: var(--brand-ink); }
.xl-wktab .xl-luik-p { opacity: .35; margin-left: 1px; }
.xl-wktab th:hover > .xl-luik-p, .xl-wktab .xl-luik-p:focus-visible { opacity: 1; }
.xl-wktab .xl-wk-strook { width: 30px; min-width: 30px; max-width: 30px; padding: 2px 0 !important; text-align: center; font-size: var(--t-xs); color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .035) 6px 12px); cursor: pointer; }
.xl-wktab thead tr.xl-wk-groep th.xl-wk-strookkop { padding: 2px 0; }
.xl-wktab .xl-luik-v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: var(--t-xs); font-weight: 700; max-height: 140px; overflow: hidden; text-overflow: ellipsis; }
.xl-wktab .xl-luik-alles { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); padding: 1px 8px; font-size: var(--t-xs); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
/* de kolom waar je naar kijkt, groot (ticket Bart 5/10) */
.xl-wktab .xl-wk-groot { min-width: 150px !important; background: rgba(212, 167, 44, .10); }
.xl-wktab thead th.xl-wk-groot { max-width: none !important; font-size:var(--t-ml); white-space: nowrap; }
.xl-wktab .xl-wk-groot .xl-wk-t { font-size:var(--t-m); }
.xl-wktab .xl-wk-groot .xl-wk-p { font-size:var(--t-s); }
.xl-wktab .xl-wk-groot .xl-wcel { width: 70px; font-size:var(--t-ml); }
/* de volgorde van het personeel slepen (Bart 29/10): grijpen op de kolomkop, de gesleepte kolom half
   doorzichtig, een verticale lijn waar ze terechtkomt; de naam zelf blijft een knop (klik = de persoon) */
/* Bart 1/11: ook een statuut (de kop erboven) versleept; op de koppen scrollt de vinger niet, zodat slepen
   op een tablet werkt (over de cellen scrollt het raster wel); de knop in de kop krimpt niet bij het grijpen */
.xl-wktab thead th.xl-psleep, .xl-wktab thead th.xl-gsleep { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.xl-wktab thead th.xl-psleep button:active, .xl-wktab thead th.xl-gsleep button:active { transform: none; }
body.xl-psleep-bezig, body.xl-psleep-bezig * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.xl-wktab th.xl-psleep-bron, .xl-wktab td.xl-psleep-bron { opacity: .45 !important; }
.xl-wktab .xl-psleep-voor { box-shadow: inset 3px 0 0 var(--text-strong); }
.xl-wktab .xl-psleep-na { box-shadow: inset -3px 0 0 var(--text-strong); }
/* studenten boven hun 650 uur (Bart 29/10, 30/10): een eigen groep met een eigen tint (oranje, naast het geel
   van de studenten en het rood van de meldingen) en een merkje 650+ bij de naam */
.xl-wktab thead tr.xl-wk-groep th.xl-st650 { background: var(--oranje-tint); color: var(--oranje-donker); }
.xl-wktab thead th.xl-p650 { border-bottom: 4px solid var(--oranje); }
.xl-650 { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--oranje); border-radius: 999px; background: var(--oranje-tint); color: var(--oranje-donker); font-size: var(--t-xs); font-weight: 700; line-height: 1.4; vertical-align: middle; }
.xl-weeknav .xl-volgorde-weg { border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.xl-groot { font-size:var(--t-xl); font-weight: 800; }
.xl-wk-fix { display: block; margin: 2px auto; padding: 1px 8px; min-height: 0; font-size:var(--t-xs); border-radius: 10px; border: 1px dashed var(--p-baksteen); background: var(--raised); color: var(--baksteen); cursor: pointer; }
/* Arthur 22/10: een voorbije dag zonder tik kan niet meer achteraf ingeklokt worden: alleen de uitleg */
.xl-wk-nee { display: block; margin: 2px auto; font-size: var(--t-xs); color: var(--text-2); text-align: center; text-decoration: underline dotted; cursor: help; }
/* een dag schrappen en de tijden aanpassen (Arthur 19/10) */
.xl-wkd { position: relative; }
.xl-wk-meer { position: absolute; top: 1px; right: 1px; min-height: 0; min-width: 0; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-olijf); font-size:var(--t-s); line-height: 1; cursor: pointer; opacity: .6; }
.xl-wkd:hover .xl-wk-meer, .xl-wk-meer:focus-visible, .xl-pm-tab .xl-wk-meer { opacity: 1; }
.xl-wk-meer:hover, .xl-wk-meer:focus-visible { background: var(--bg); color: var(--ink); }
.xl-pm-tab .xl-wk-meer { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; border: 1px solid var(--line-strong); }
/* Arthur 21/10: het vuilbakje (dag schrappen) en Terugzetten in plaats van de drie puntjes */
.xl-wk-meer { display: inline-flex; align-items: center; justify-content: center; }
.xl-wk-meer svg { width: 14px; height: 14px; }
.xl-wk-schrap:hover, .xl-wk-schrap:focus-visible { color: var(--err-ink); }
.xl-tijd-knop { display: inline-block; min-height: 0; padding: 0 3px; border: 0; border-bottom: 1px dashed var(--p-olijf); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size:var(--t-xs); cursor: pointer; }
.xl-tijd-knop:hover, .xl-tijd-knop:focus-visible { background: var(--bg); }
.xl-wktab td.xl-wk-weg, .xl-pm-tab tr.xl-wk-weg > * { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .035) 0 6px, transparent 6px 12px); color: var(--text-olijf); }
.xl-wk-geschrapt { display: inline-block; font-size:var(--t-xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-olijf); text-decoration: line-through; cursor: help; }
.xl-wk-weg .xl-wk-u, .xl-pm-weg { color: var(--text-olijf); text-decoration: line-through; }
/* Bart 29/10: de reden onder 'geschrapt', klein; de volledige tekst bij aanwijzen */
.xl-wk-reden { max-width: 14ch; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--text-olijf); cursor: help; }
.mp-rij.mp-geschrapt { opacity: .7; }
.mp-rij.mp-geschrapt .mp-u { text-decoration: line-through; }
.xl-wcel { width: calc(6ch + 10px); text-align: center; margin: 2px 0; }
.xl-wcel.xl-typ { font-weight: 700; background: var(--surface-3); }
.xl-wk-groep th { background: rgba(0, 0, 0, .05); text-align: left; font-size:var(--t-xs); letter-spacing: .04em; text-transform: uppercase; }
.xl-tabel td.xl-geel { background: var(--warn-bg) !important; }
.xl-tabel td.xl-rood { background: var(--err-bg) !important; }
.xl-tellertab input { width: 52px; padding: 2px 4px; min-height: 30px; text-align: right; }
.xl-knoprij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.xl-vol { position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; overflow: auto; display: flex; flex-direction: column; }
.xl-vol .xl-wrap { flex: 1; max-height: none; min-height: 0; }
.xl-vol .xl-tabel { font-size:var(--t-s); }
.xl-vol .xl-cel { width: 60px; padding: 2px 3px; }
.xl-vol .xl-tabel tbody td, .xl-vol .xl-tabel tbody th { padding-top: 0; padding-bottom: 0; }
body.xl-vol-open { overflow: hidden; }

/* dagcontracten (Arthur 2/10): tekenvlak, tablet, blad Contracten */
.tv { display: flex; flex-direction: column; gap: 4px; }
.tv-doek { width: 100%; height: 160px; background: var(--wit); border: 1px dashed var(--text-2); border-radius: 8px; touch-action: none; cursor: crosshair; }
.tv-onder { display: flex; justify-content: space-between; align-items: center; font-size:var(--t-s); color: var(--text-2); }
.ws-ct-kern { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--inset); text-align: left; }
.ws-ct-kern div { display: flex; justify-content: space-between; gap: 12px; }
.ws-ct-kern span { color: var(--text-2); }
.ws-ct-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ws-ct-form label { display: flex; flex-direction: column; gap: 4px; font-size:var(--t-ml); }
.ws-ct-form input:not([type=checkbox]) { min-height: 44px; font-size:var(--t-base); }
.ws-ct-akkoord { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size:var(--t-m) !important; color: var(--text-2); }
.ws-ct-akkoord input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.ws-ct-knoppen { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.ws-ct-knoppen .btn { min-height: 52px; padding: 0 22px; font-size:var(--t-base); }
.ws-klok-kaart { max-height: 92vh; overflow-y: auto; }
.ct-dag { margin-bottom: 12px; }
.ct-dag h4 { margin: 8px 0 4px; }
.ct-mist { color: var(--err-ink); font-size:var(--t-m); }
.ct-wg { max-width: 520px; }
.ws-ct-uren { font-size:var(--t-4xl); font-weight: 700; margin: 14px 0 6px; letter-spacing: .02em; }
.mc-lijst { display: flex; flex-direction: column; gap: 8px; }
.mc-rij { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: var(--surface); }
.mc-rij span { display: flex; flex-direction: column; }
.mc-rij small { color: var(--text-2); }

/* XLS: de bladen links onder elkaar, Kasboek en Personeel groot (Arthur 2/10) */
.page-head.xl-kop-verborgen .screen-tabs { display: none; }
.xl-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
.xl-zij { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.xl-zij button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--paper, var(--bg)); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--text); cursor: pointer; }
.xl-zij button:hover { border-color: var(--brand); }
.xl-zij button.on { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2); font-weight: 700; }
.xl-zij-groot { padding: 14px 12px !important; }
.xl-zij-groot .ic { width: 26px; height: 26px; flex: none; }
.xl-zij-groot strong { display: block; font-size:var(--t-l); }
.xl-zij-groot small { display: block; font-size:var(--t-xs); font-weight: 400; opacity: .8; line-height: 1.25; }
.xl-zij-rest { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.xl-zij-rest button { padding: 6px 12px; font-size:var(--t-ml); }
@media (max-width: 900px) {
  .xl-layout { grid-template-columns: minmax(0, 1fr); }
  .xl-zij { position: static; flex-direction: row; flex-wrap: wrap; }
  .xl-zij-groot { flex: 1 1 160px; }
  .xl-zij-rest { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .xl-zij-rest button { width: auto; }
}
/* het rooster goedkeuren (Arthur 4/10) */
.note.pl-goed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-goed-t { flex: 1 1 320px; min-width: 0; }
.pl-goed-k { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.xl-fitvs { color: var(--text-olijf); font-style: italic; }
/* XLS: neon zoals in Barts werkboek (Arthur 4/10) */
.xl-tabel td.xk input.xl-cel { background: rgba(255, 255, 255, .55); }
/* Barts kleuren zijn licht (Excel): tekst altijd inkt, ook in het donkere thema (Bart 3/11) */
th.xl-pkleur { background: var(--pk) !important; color: var(--p-inkt) !important; }
th.xl-pkleur small, th.xl-pkleur .xl-pnaam { color: var(--p-inkt-2) !important; opacity: 1; }
/* planner als tabel, zoals het kasboek (Arthur 4/10) */
.pt-wrap { max-height: 75vh; overflow: auto; }
.pt-tbl { border-collapse: separate; border-spacing: 0; font-size:var(--t-m); }
.pt-tbl th, .pt-tbl td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }
.pt-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-3); text-align: center; }
.pt-tbl th.pt-naam small { display: block; font-weight: 400; font-size:var(--t-xs); opacity: .75; }
.pt-tbl th.pt-dag { position: sticky; left: 0; z-index: 1; background: var(--surface-2); text-align: left; cursor: pointer; }
.pt-tbl thead th.pt-dag { z-index: 3; }
.pt-tbl th.pt-dag .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pt-tbl th.pt-dag:hover { text-decoration: underline; }
.pt-tbl .pt-ok .ic { width: 14px; height: 14px; color: var(--groen-fel); vertical-align: -2px; }
.pt-tbl tr.pt-we th.pt-dag, .pt-tbl tr.pt-we td { background-color: var(--inset); }
.pt-tbl tr.pt-nu th.pt-dag { box-shadow: inset 4px 0 0 var(--brand); }
.pt-tbl td.pt-shift { background: var(--surface-3); text-align: center; }
.pt-tbl td.pt-shift small { opacity: .7; }
.pt-tbl td.pt-kan { background: var(--blad-tint-2); }
.pt-tbl td.pt-nee { background: var(--rood-tint-2); }
.pt-tbl td.pt-open { color: var(--baksteen); font-weight: 600; text-align: center; }
.pt-tbl tr.pt-tot th, .pt-tbl tr.pt-tot td { position: sticky; bottom: 0; background: var(--surface-3); }
/* XLS Personeel: de week met de dagen onder elkaar en het personeel naast elkaar (Arthur 4/10) */
.xl-wkwrap { max-width: 100%; overflow-x: auto; }
.xl-wktab th.xl-wk-dag { position: sticky; left: 0; z-index: 1; background: var(--paper, var(--bg)); text-align: left; white-space: nowrap; }
.xl-wktab th.xl-wk-dag.xl-nu { background: var(--surface-4); }
.xl-wktab thead tr.xl-wk-groep th { text-align: center; border-left: 2px solid var(--text-strong); }
.xl-wktab thead th { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
/* Mijn gegevens: eenmalig bij de eerste login (Arthur 4/10) */
.mg-kaart { max-width: 640px; }
.mg-eerst { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.mg-form { display: flex; flex-direction: column; gap: 12px; }
.mg-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.mg-form legend { font-weight: 600; padding: 0 4px; }
.mg-form label { display: flex; flex-direction: column; gap: 4px; font-size:var(--t-ml); }
.mg-form input:not([type=checkbox]), .mg-form select { min-height: 44px; font-size:var(--t-base); }
.mg-form label.mg-akkoord { flex-direction: row; align-items: flex-start; gap: 8px; }
.mg-privacy { display: flex; gap: 6px; align-items: flex-start; }
.mg-fout { color: var(--baksteen); min-height: 1.2em; }
.mg-fout .ok { color: var(--groen-fel); }
/* XLS: de volle breedte van het scherm, en een compactere week (Arthur 4/10) */
main:has(.xl-layout) { max-width: none; }
.xl-wktab .xl-wkd { min-width: 64px; padding: 2px; }
.xl-wktab thead th { max-width: 96px; white-space: normal; line-height: 1.15; }
.xl-wktab .xl-wcel { width: 52px; }
/* Lonen: de lonen betalen (Arthur 4/10) */
.lb .card { margin-bottom: 14px; }
.lb-nav { display: flex; align-items: center; gap: 8px; }
.lb-nav h3 { margin: 0; }
.lb-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 8px 0; }
.lb-rij .xl-veld { display: flex; flex-direction: column; gap: 3px; }
.lb-zaak, .lb-rij [name=iban] { width: 230px; }
.lb-tab th small { display: block; font-weight: 400; }
.lb-tab td { white-space: normal; vertical-align: middle; }
/* Arthur 5/10: de koppen blijven staan (de tabel scrolt in haar kader); het voorstel gecentreerd met de uitleg eronder */
.lb-wrap { overflow: auto; max-height: calc(100vh - 120px); }
/* de uitleg boven de tabel klapt open (Arthur 6/10) */
.lb-uitleg { margin: 0 0 12px; }
.lb-uitleg > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; font-weight: 600; color: var(--text-2); list-style: none; }
.lb-uitleg > summary::-webkit-details-marker { display: none; }
.lb-uitleg > summary::before { content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size:var(--t-xs); }
.lb-uitleg[open] > summary { margin-bottom: 4px; }
.lb-uitleg > p { max-width: 75ch; margin: 0; }
.lb-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.lb-wrap tfoot th, .lb-wrap tfoot td { position: sticky; bottom: 0; background: var(--surface-2); }
.lb-tab td.lb-voorstel { text-align: center; white-space: nowrap; }
.lb-voorstel .lb-vs-b { font-weight: 600; }
.lb-voorstel small { display: block; }
.lb-voorstel .lb-regel { margin-top: 3px; }
.lb-qrkaart { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); }
.lb-qrbeeld { flex: none; }
.lb-qrbeeld svg { width: 240px; height: 240px; max-width: 70vw; max-height: 70vw; display: block; background: var(--wit); }
.lb-vink { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.lb-bestandkies { display: inline-block; cursor: pointer; margin: 6px 0; }
/* werkpost: 'Op' tot op het QR-menu (Arthur 4/10) */
.ws-op { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.ws-op-knop { background: var(--p-baksteen); color: var(--wit); border-color: var(--p-baksteen); font-weight: 700; }
.ws-op-lijst { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-op-kop { font-weight: 700; color: var(--baksteen); }
.ws-op-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--rood-tint-2); color: var(--rood-nacht); font-weight: 600; }
.ws-op-terug { min-height: 0; padding: 4px 10px; font-size:var(--t-s); }
.ws-op-leeg { color: var(--text-2); }

/* ---- Ploeg: het personeel onder een tab (Arthur 4/10) ---- */
.ploeg-link { display: flex; align-items: center; gap: 10px; }
.ploeg-link > svg { flex: none; width: 22px; height: 22px; fill: var(--brand-deep); }
.plg-kop { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.plg-kop .spacer { flex: 1; }
.plg-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
/* de naam is een knop die eruitziet als een link: klik = alles over die persoon */
button.plg-naam { background: none; border: 0; padding: 0; min-height: 0; color: var(--ink); font: inherit; font-weight: 600;
  text-align: left; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }
button.plg-naam:hover { background: none; color: var(--brand-deep); text-decoration-color: currentColor; }
.plg-kost { color: var(--text-3); font-size:var(--t-m); }
button.plg-loon { background: none; border: 0; padding: 0; min-height: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted var(--text-3); text-underline-offset: 3px; }
button.plg-loon:hover { color: var(--brand-deep); }
.plg-terugl { margin: 0 0 8px; }
.plg-terugl a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; }
.plg-terugl a:hover { color: var(--ink); }
.plg-terugl svg { width: 18px; height: 18px; }
.plg-naamkop { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.plg-naamkop h2 { margin: 0; }
.plg-scores { display: flex; gap: 10px 22px; flex-wrap: wrap; margin: 14px 0 6px; }
.plg-scores label { display: inline-flex; align-items: center; gap: 6px; font-size:var(--t-m); }
.plg-scores select { min-height: 32px; width: 64px; }
.plg-functie { grid-column: span 2; }
.plg-geg { margin-top: 6px; }
.plg-code { margin-bottom: 12px; }
.plg-code-v { font-size:var(--t-2xl); letter-spacing: .12em; margin: 4px 0; word-break: break-all; }
@media (max-width: 640px) { .plg-functie { grid-column: 1 / -1; } }
.plg-posten { display: inline-block; max-width: 190px; white-space: normal; line-height: 1.25; }
main:has(.plg-kop) { max-width: none; }
.lb-teveel { color: var(--baksteen); font-weight: 600; }
.lb-geenvs { min-height: 0; padding: 2px 8px; font-size:var(--t-s); }
/* ===== Reservaties (Arthur 6/10): mobiel eerst, Bart doet dit op zijn telefoon ===== */
.sidenav a .nav-badge { margin-left: auto; }
.sidenav a .nav-badge[hidden] { display: none; }
.screen-tabs .na-n { margin-left: 4px; }
.rs-balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-balk .spacer { flex: 1; }
.rs-bronblok { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.rs-bronblok .note { margin: 0; }
.rs-alleen { margin: 12px 0 0; }
.rs-week { font-size:var(--t-base); min-width: 9ch; text-align: center; }
.rs-strip { margin-top: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rs-d { position: relative; flex-direction: column; gap: 0; padding: 6px 2px; min-height: 64px; line-height: 1.2;
  border-color: var(--line-strong); }
.rs-d .rs-wd { font-size:var(--t-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.rs-d .rs-dn { font-size:var(--t-l); font-weight: 700; }
.rs-d .rs-dp { font-size:var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.rs-d.nu { border-color: var(--brand); }
.rs-d.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rs-d.on .rs-wd, .rs-d.on .rs-dp { color: var(--p-inkt-2); }
.rs-d:hover .rs-wd, .rs-d:hover .rs-dp { color: inherit; }
.rs-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-rood-inkt); }
.rs-tot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 10px; color: var(--text-2); font-size:var(--t-ml); }
.rs-tot strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rs-tot .rs-tb strong { color: var(--err-ink); }
.rs-lijst { display: flex; flex-direction: column; gap: 8px; }
.rs-rij { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.rs-rij:hover, .rs-rij:focus-visible { border-color: var(--line-strong); background: var(--surface-3); outline: none; }
.rs-rij.rs-weg { opacity: .55; background: transparent; }
.rs-tijd { font-size:var(--t-l); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; min-width: 3.2em; }
.rs-tijd small { display: block; font-size:var(--t-xs); font-weight: 400; color: var(--text-3); text-transform: uppercase; }
.rs-naam { font-weight: 600; overflow-wrap: anywhere; }
.rs-meta { font-size:var(--t-m); color: var(--text-2); }
.rs-opm { font-size:var(--t-m); color: var(--text-2); font-style: italic; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-snel { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.rs-snel button { flex: 0 1 220px; min-height: 44px; }
.rs-leeg { display: flex; align-items: center; gap: 8px; padding: 14px 2px; color: var(--text-2); }
.rs-leeg svg { width: 18px; height: 18px; fill: var(--ok); }
.rs-dlg { border: 1px solid var(--line-strong); border-radius: var(--r-l); padding: 0; width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.rs-dlg::backdrop { background: rgba(47, 42, 34, .45); }
.rs-dlg-in { padding: 14px 16px 16px; }
.rs-dlg-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rs-dlg-kop h2 { margin: 0; font-size:var(--t-xl); flex: 1; overflow-wrap: anywhere; }
.rs-x { flex: none; }
.rs-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; }
.rs-dl dt { color: var(--text-3); font-size:var(--t-m); }
.rs-dl dd { margin: 0; overflow-wrap: anywhere; }
.rs-opm-l { white-space: pre-wrap; }
.rs-contact, .rs-acties { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.rs-contact .btn, .rs-acties button { flex: 1 1 130px; min-height: 44px; text-decoration: none; }
.rs-contact .btn svg, .rs-acties svg, .rs-snel svg { width: 18px; height: 18px; fill: currentColor; }
.rs-hist summary { cursor: pointer; color: var(--text-2); font-size:var(--t-m); }
.rs-hist ul { margin: 6px 0 0; padding-left: 18px; font-size:var(--t-m); }
.rs-wie { margin: 0 0 10px; }
.rs-veld { display: flex; flex-direction: column; gap: 4px; font-size:var(--t-m); color: var(--text-2); }
.rs-veld input, .rs-veld select, .rs-veld textarea { font-size:var(--t-base); width: 100%; }
.rs-check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rs-check input { width: 20px; height: 20px; }
.rs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.rs-form .rs-breed { grid-column: 1 / -1; }
.rs-seg { display: flex; width: 100%; }
.rs-seg button { flex: 1; min-height: 40px; text-transform: capitalize; }
.rs-err { min-height: 1em; margin: 6px 0 0; }
.rs-uren { display: flex; flex-direction: column; gap: 6px; }
.rs-uur { display: grid; grid-template-columns: minmax(130px, 1fr) auto auto auto; gap: 8px; align-items: center; }
.rs-uur input[type=time] { width: 7.5em; }
.rs-regels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.rs-gesl { list-style: none; margin: 0 0 10px; padding: 0; }
.rs-gesl li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.rs-gesl li span { flex: 1; color: var(--text-2); }
.rs-gesl-nieuw { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-gesl-nieuw input[type=text] { flex: 1 1 180px; }
@media (max-width: 640px) {
  .rs-balk #rs-nieuw { width: 100%; }
  .rs-balk .spacer { display: none; }
  .rs-strip { gap: 3px; }
  .rs-d { min-height: 58px; padding: 4px 0; }
  .rs-d .rs-dp { font-size:var(--t-xs); }
  .rs-form { grid-template-columns: 1fr; }
  .rs-snel button { flex: 1; }
  .rs-uur { grid-template-columns: minmax(0, 1fr) minmax(0, 6.2em) auto minmax(0, 6.2em); gap: 4px; }
  .rs-uur input[type=time] { width: 100%; min-width: 0; padding-left: 6px; padding-right: 4px; }
  .rs-dlg { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
}

/* Automatische Bestellingen, fase 2 (14/10): instellingen per leverancier + concept-bestelmail */
.or-inst { border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px 12px; background: var(--inset); }
.or-inst summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text-2); }
.or-inst summary svg { width: 18px; height: 18px; fill: currentColor; }
.or-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; padding: 10px 0 6px; }
.or-dagen { border: 0; padding: 0; margin: 0; }
.or-dagen legend { padding: 0; margin-bottom: 4px; }
.or-dagen > div { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.or-dagen .rs-check { min-height: 30px; }
.or-dagen .rs-check input { width: 16px; height: 16px; }
.or-form-knop { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.or-dlg { width: min(680px, calc(100vw - 24px)); }
.or-dlg textarea { resize: vertical; min-height: 220px; }
/* Winkelmandjes (15/10): het icoon naast de leverancier en het venster */
.tabs button.or-mandje-knop { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; margin-left: -4px; }
.or-mandje-knop svg { width: 18px; height: 18px; fill: currentColor; }
.or-badge { min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--surface-3); font-size:var(--t-s); line-height: 1.4; text-align: center; }
.or-mandje { width: min(900px, calc(100vw - 24px)); }
.or-mandje-h { font-size:var(--t-base); margin: 14px 0 6px; }
.or-mandje-lijst { margin: 0; padding-left: 18px; font-size:var(--t-ml); }
.or-mandje-lijst button { min-height: 28px; padding: 2px 10px; margin-left: 6px; }
.or-modus { border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px 12px 8px; margin: 0 0 6px; background: var(--inset); }
.or-modus legend { padding: 0 4px; font-size:var(--t-m); color: var(--text-2); }
.or-modus .rs-check { min-height: 32px; }
.or-modus .rs-check input { width: 16px; height: 16px; }
.or-modus-vooruit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.or-modus-vooruit input[type=date] { width: auto; }
.or-modus-vooruit button { min-height: 30px; padding: 2px 10px; }
.or-mandje .rs-acties .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.or-mandje table td { white-space: normal; vertical-align: top; }
.or-mandje table td:last-child { min-width: 260px; }
.or-mandje table td:nth-child(-n+3) { white-space: nowrap; }

/* INDII ↔ Horecast in Kasboek > Personeel (Arthur 16/10, tot de overstap op 1/11) */
.xl-indii { margin: 16px 0; border: 1px solid color-mix(in srgb, var(--text-strong) 12%, transparent); border-radius: 10px; padding: 8px 12px; }
.xl-indii > summary { cursor: pointer; font-weight: 600; }
.xl-indii-in { margin-top: 8px; }
.xl-iv-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.xl-iv-filter button { min-height: 36px; padding: 4px 12px; border-radius: 999px; font-weight: 600; }
.xl-iv-filter button.on { background: var(--sel-bg); color: var(--sel-fg); }
.xl-iv-tab tr.xl-iv-err > * { background: var(--err-bg); }
.xl-iv-acties { white-space: nowrap; }
.xl-iv-acties > * { margin: 2px 4px 2px 0; }

/* ---- Instap van een nieuwe medewerker (idee 9, 16/10): personeel op de gsm ---- */
.instap-terug { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 6px; color: var(--text-2); text-decoration: none; font-weight: 600; }
.instap-terug svg { width: 18px; height: 18px; }
.isp { max-width: 640px; }
.isp-kop h2 { margin: 0 0 4px; }
.isp-balk { height: 10px; border-radius: 999px; background: var(--inset); overflow: hidden; margin: 10px 0 4px; }
.isp-balk > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; }
.isp-telling { margin: 0 0 8px; font-size:var(--t-ml); }
.isp-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.isp-stap { margin: 0; }
.isp-stap.isp-nu { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brass-tint, var(--warn-bg)); }
.isp-stapkop { display: flex; align-items: center; gap: 10px; }
.isp-stapkop h3 { margin: 0; flex: 1; font-size:var(--t-base); }
.isp-nr { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--inset); font-weight: 700; }
.isp-klaar .isp-nr { background: var(--ok-bg); color: var(--ok); }
.isp-nr svg { width: 18px; height: 18px; fill: currentColor; }
.isp-klaar .isp-inhoud { opacity: .85; }
.isp-inhoud { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.isp-inhoud p { margin: 0; }
.isp-inhoud a.btn, .isp-inhoud button { min-height: 44px; }
a.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--p-inkt-2); font-weight: 600; }
.isp-doc { width: 100%; }
.isp-doc > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 600; }
.isp-tekst { max-height: 50vh; overflow: auto; margin-top: 6px; }
.isp-akkoord { display: flex; gap: 8px; align-items: flex-start; }
.isp-akkoord input { margin-top: 3px; }
.isp-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.isp-uitleg { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
/* Theo team: de uitnodiging en de voortgang per nieuwe medewerker (pc) */
.plg-isp-lijst { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.plg-isp-lijst li { display: flex; align-items: center; gap: 6px; font-size:var(--t-ml); }
.plg-isp-lijst li svg { width: 18px; height: 18px; flex: none; }
.plg-isp-lijst li.ok svg { fill: var(--ok); }
.plg-isp-lijst li.nee { color: var(--text-2); }
.plg-isp-lijst li.nee svg { fill: var(--text-3); }
.pl-ppl-grid label.plg-isp-vink { flex-direction: row; align-items: flex-start; gap: 8px; font-size:var(--t-m); }
.pl-ppl-grid label.plg-isp-vink input { width: auto; flex: none; margin-top: 2px; }
.plg-isp-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.plg-isp-link input { flex: 1 1 320px; min-width: 0; font-family: ui-monospace, monospace; font-size:var(--t-m); }
/* Kassa afsluiten op de gsm (idee 16/10, tabs/kassa.js): gsm eerst (390 px), grote knoppen, geen
   horizontaal scrollen. Groen tot KASSA_VERSCHIL_GROEN (5 euro), geel tot de drempel, rood erboven. */
.ka-scherm { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ka-dagen { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ka-dagk { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--p-olijf); border-radius: var(--r-l); background: var(--surface); font: inherit; font-weight: 700; font-size:var(--t-base); color: var(--text); cursor: pointer; }
.ka-dagk small { font-weight: 400; font-size:var(--t-s); color: var(--text-2); }
.ka-dagk.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.ka-dagk.on small { color: var(--p-zand); }
.ka-datum { flex: 1 1 100%; min-height: 44px; font-size:var(--t-base); }
.ka-kaart { padding: 14px 14px 16px; min-width: 0; }
.ka-kaart h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size:var(--t-l); }
.ka-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chrome-2); color: var(--wit); font-size:var(--t-m); flex: none; }
.ka-groep { margin: 12px 0 4px; font-size:var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ka-rij { display: grid; grid-template-columns: minmax(48px, 1fr) 48px minmax(56px, 72px) 48px minmax(64px, 1fr); align-items: center; gap: 6px; padding: 3px 0; }
.ka-c { font-weight: 700; font-size:var(--t-base); white-space: nowrap; }
.ka-stap { width: 48px; height: 48px; padding: 0; border: 2px solid var(--p-olijf); border-radius: var(--r-m); background: var(--surface);
  font: inherit; font-size:var(--t-2xl); font-weight: 700; line-height: 1; color: var(--text); cursor: pointer; touch-action: manipulation; }
.ka-stap:active { background: var(--inset); }
.ka-n { width: 100%; min-width: 0; height: 48px; text-align: center; font-size:var(--t-xl); font-weight: 700; padding: 0 4px; }
.ka-subt { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; font-size:var(--t-ml); }
.ka-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--line); font-size:var(--t-l); }
.ka-tot strong { font-size:var(--t-xl); font-variant-numeric: tabular-nums; }
/* kasuitgaven (Arthur 29/10): een bedrag */
.ka-kasuit-in { text-align: right; font-variant-numeric: tabular-nums; }
.ka-tot-klein { margin-top: 2px; padding-top: 0; border-top: 0; font-size:var(--t-base); }
.ka-tot-klein strong { font-size:var(--t-l); }
.ka-veld { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.ka-veld > span { font-weight: 700; }
.ka-veld input, .ka-veld textarea { min-height: 48px; font-size:var(--t-base); width: 100%; box-sizing: border-box; }
.ka-verplicht > span { color: var(--err-ink); }
.ka-verplicht textarea { border-color: var(--p-rood-inkt); }
.ka-extra { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; gap: 6px; margin: 6px 0; }
.ka-extra input { min-height: 46px; min-width: 0; font-size:var(--t-base); }
.ka-weg { width: 44px; height: 46px; padding: 0; display: grid; place-items: center; }
.ka-weg svg { width: 20px; height: 20px; fill: currentColor; }
.ka-plus { min-height: 44px; }
.ka-fotoknop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 2px dashed var(--p-olijf);
  border-radius: var(--r-l); background: var(--surface); font-weight: 700; font-size:var(--t-base); cursor: pointer; }
.ka-fotoknop svg { width: 26px; height: 26px; fill: currentColor; }
.ka-fotoknop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ka-foto-voor img, .ka-foto-zien img { display: block; max-width: 100%; max-height: 260px; margin: 10px auto 4px; border-radius: var(--r-m); border: 1px solid var(--line); }
.ka-lijn { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-3); }
.ka-lijn span { min-width: 0; overflow-wrap: anywhere; }
.ka-lijn strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ka-vet { font-size:var(--t-l); }
.ka-verschil { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 8px; padding: 14px 16px;
  border-radius: var(--r-l); background: var(--inset); font-weight: 700; font-size:var(--t-l); }
.ka-verschil strong { font-size:var(--t-3xl); font-variant-numeric: tabular-nums; }
.ka-verschil.ka-ok { background: var(--ok-bg); color: var(--ok-ink); }
.ka-verschil.ka-let { background: var(--surface-3); color: var(--brand-ink); }
.ka-verschil.ka-rood { background: var(--err-bg); color: var(--err-ink); }
.ka-verschil[hidden] { display: none; }   /* wie het kasverschil niet ziet (KASSA_VERSCHIL_VOOR): ook geen leeg vak */
.ka-balk strong.ka-ok { color: var(--ok-ink); } .ka-balk strong.ka-let { color: var(--brand-ink); } .ka-balk strong.ka-rood { color: var(--err-ink); }
.ka-balk { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: 0 -4px 14px rgba(43, 37, 25, .12); }
.ka-balk-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size:var(--t-ml); }
.ka-balk-t strong { font-variant-numeric: tabular-nums; }
.ka-sluit { min-height: 52px; padding: 0 18px; font-size:var(--t-l); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ka-sluit svg { width: 22px; height: 22px; fill: currentColor; }
.ka-conflict { border: 2px solid var(--p-rood-inkt); }
.ka-conflict h3 svg { width: 22px; height: 22px; fill: var(--err-ink); }
.ka-wijz { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ka-wijz li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface-3); border-radius: var(--r-m); overflow-wrap: anywhere; white-space: pre-line; }
.ka-wijz li.ka-over { background: var(--err-bg); }
.ka-wijz small { color: var(--err-ink); font-weight: 700; }
.ka-knoprij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ka-knoprij > * { min-height: 48px; display: inline-flex; align-items: center; gap: 6px; }
.ka-knoprij svg { width: 20px; height: 20px; fill: currentColor; }
.ka-klaar-kop { display: flex; gap: 10px; align-items: flex-start; }
.ka-klaar-kop > svg { width: 34px; height: 34px; fill: var(--ok); flex: none; }
.ka-klaar-kop h3 { margin: 0; }
.ka-sub { margin: 12px 0 2px; font-size:var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ka-uitleg { margin: 0 0 6px; overflow-wrap: anywhere; }
.ka-msg { margin: 0; }
/* 17/10: stap 2 (wisselgeld terug + de biljetten naar de kluis) en stap 3 (de fooi per gewerkt uur) */
.ka-wg-ok { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 2px solid var(--p-olijf);
  border-radius: var(--r-l); background: var(--surface); cursor: pointer; }
.ka-wg-ok input { width: 28px; height: 28px; flex: none; margin: 0; accent-color: var(--ok); }
.ka-wg-ok span { display: flex; flex-direction: column; min-width: 0; }
.ka-wg-ok small { color: var(--text-2); }
.ka-wg-ok:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); }
.ka-uitleg-tel { margin: 12px 0 4px; font-weight: 700; }
.ka-uit-foto { margin: 8px 0; }
/* usability-test 4/11: het getelde totaal, de uitleg van het wisselgeld, de dienst die nog bezig is */
.ka-scherm .note[hidden] { display: none; }
.ka-wg-uitleg, .ka-bezig-let, .ka-totaal-let, .ka-dag-geweigerd { margin: 8px 0; }
.ka-totaal-veld { margin-top: 12px; }
.ka-concept .ka-knoprij { margin-top: 12px; }
.plg-conflict { color: var(--err-ink); }
.plg-iban-vak { margin: 8px 0 4px; }
.ka-fooi-tabel { display: flex; flex-direction: column; margin: 8px 0; min-width: 0; }
.ka-fooi-rij { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--surface-3); }
.ka-fooi-rij > span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ka-fooi-rij > span:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ka-fooi-rij small { color: var(--text-2); font-size:var(--t-m); }
.ka-fooi-kop { font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ka-fooi-som { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.ka-bezig { color: var(--brand-ink); font-style: normal; font-weight: 700; }
/* Arthur 2/11: het concrete uur per persoon, en iemand toevoegen die werkte maar niet klokte */
.ka-fooi-rij small.ka-fooi-uur { color: var(--text); font-variant-numeric: tabular-nums; }
.ka-klok-let { color: var(--err-ink); font-style: normal; font-weight: 700; }
.ka-fooi-weg { align-self: flex-start; min-height: 40px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.ka-fooi-weg svg { width: 18px; height: 18px; fill: currentColor; }
.ka-fooi-niet { align-items: center; gap: 8px; }
.ka-fooi-niet > span { min-width: 0; overflow-wrap: anywhere; }
.ka-fooi-niet small { color: var(--text-2); }
.ka-fooi-niet button { min-height: 44px; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.ka-fooi-niet svg, .ka-erbij summary svg { width: 18px; height: 18px; fill: currentColor; vertical-align: middle; }
.ka-fooi-dimona { margin: 8px 0; }
.ka-erbij { margin-top: 10px; }
.ka-erbij summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.ka-erbij select { min-height: 48px; font-size: var(--t-base); width: 100%; box-sizing: border-box; }
.ka-erbij-uren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* de knop + (een aanvraag) zweeft rechtsonder op de gsm: de balk laat er plaats voor */
@media (max-width: 760px) { .ka-balk { padding-right: 84px; } .ka-scherm { padding-bottom: 8px; }
  /* personeel heeft onderaan de vaste tabbalk (theo-plus.css): de balk komt erboven, de + knop ook */
  body.plus-has-tabbar .ka-balk { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-l); } }
@media (max-width: 360px) { .ka-rij { grid-template-columns: minmax(44px, 1fr) 44px minmax(48px, 64px) 44px minmax(56px, 1fr); gap: 4px; } .ka-stap { width: 44px; } }
/* Kasboek > Dag: de kassa-afsluiting van die dag */
.xl-afsl .ka-verschil { margin: 6px 0; padding: 8px 12px; font-size:var(--t-base); }
.xl-afsl .ka-verschil strong { font-size:var(--t-xl); }
.xl-afsl img { display: block; max-width: 100%; max-height: 180px; margin: 8px 0; border-radius: var(--r-m); border: 1px solid var(--line); }
.xl-afsl-ic svg { width: 16px; height: 16px; fill: var(--text-2); vertical-align: middle; }

/* Bestelscherm — proef (idee 17/10, tabs/bestelproef.js): gsm eerst (390 px), grote tikvlakken, geen
   horizontaal scrollen (alleen de rij categorieën schuift in zichzelf). De band PROEF staat altijd bovenaan. */
.bp-scherm { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 76px; }
.bp-banner { position: sticky; top: calc(var(--header-h) + 4px); z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--warn-bg); border: 2px solid var(--warn); color: var(--text); font-size:var(--t-ml); line-height: 1.25; }
.bp-banner .ic { width: 22px; height: 22px; flex: none; fill: var(--err-ink); }
.bp-keuze { align-self: flex-start; }
.bp-kaart { padding: 14px; min-width: 0; }
.bp-kaart h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size:var(--t-l); }
.bp-zaal, .bp-modkop { margin: 12px 0 6px; font-size:var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.bp-tafels { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.bp-tafel { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--p-olijf);
  border-radius: var(--r-l); background: var(--surface); font: inherit; font-weight: 700; font-size:var(--t-l); color: var(--text); cursor: pointer; touch-action: manipulation; }
.bp-tafel small { font-weight: 400; font-size:var(--t-xs); color: var(--text-2); }
.bp-tafel:active { background: var(--inset); }
.bp-mijn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-mijn-b { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.bp-status { font-size:var(--t-m); color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.bp-status.ok { color: var(--ok); }
.bp-status.open { color: var(--err-ink); }
.bp-status .ic { width: 16px; height: 16px; fill: currentColor; }
.bp-kop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bp-terug { flex: none; min-height: 44px; }
.bp-tafelnaam { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size:var(--t-xl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-tafelnaam small { font-weight: 400; font-size:var(--t-m); color: var(--text-2); }
.bp-klok { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size:var(--t-l); padding: 4px 10px; border-radius: var(--r-s); background: var(--chrome-2); color: var(--wit); }
.bp-zoek { width: 100%; min-height: 48px; font-size:var(--t-base); box-sizing: border-box; }
.bp-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; min-width: 0; }
.bp-cat { flex: none; min-height: 40px; padding: 4px 14px; border: 1px solid var(--p-olijf); border-radius: 999px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.bp-cat.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.bp-gang { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bp-gangseg { flex: 1 1 auto; min-width: 0; display: flex; }
.bp-gangseg button { flex: 1 1 0; min-width: 0; padding: 2px 4px; min-height: 40px; font-size:var(--t-m); }
.bp-lijst { display: flex; flex-direction: column; gap: 6px; }
.bp-prod { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; text-align: left; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; touch-action: manipulation; }
.bp-prod:active { background: var(--inset); }
.bp-prod.op { opacity: .45; cursor: not-allowed; background: var(--surface-3); }
.bp-pnaam { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size:var(--t-base); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bp-op { font-weight: 700; font-size:var(--t-xs); text-transform: uppercase; color: var(--err-ink); }
.bp-allerg { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.bp-allerg i { font-style: normal; font-weight: 400; font-size:var(--t-xs); padding: 0 6px; border-radius: 999px; background: var(--warn-bg); border: 1px solid var(--warn); }
.bp-heeftmods { font-weight: 400; font-size:var(--t-xs); color: var(--text-3); }
.bp-prijs { flex: none; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bp-n { flex: none; min-width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--p-inkt-2); font-weight: 700; }
.bp-mandkaart { padding: 10px 12px; }
.bp-regel { border-bottom: 1px solid var(--line); padding: 6px 0; }
.bp-regel:last-child { border-bottom: 0; }
.bp-regelrij { display: grid; grid-template-columns: 40px 28px 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; }
.bp-stap, .bp-weg { width: 40px; height: 40px; padding: 0; border: 2px solid var(--p-olijf); border-radius: var(--r-m); background: var(--surface); font: inherit;
  font-size:var(--t-2xl); font-weight: 700; line-height: 1; color: var(--text); cursor: pointer; touch-action: manipulation; display: grid; place-items: center; }
.bp-weg { border-color: var(--p-rood-inkt); }
.bp-weg .ic { width: 20px; height: 20px; fill: var(--err-ink); }
.bp-rn { text-align: center; font-weight: 700; font-size:var(--t-l); }
.bp-rnaam { min-width: 0; min-height: 40px; text-align: left; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; padding: 0 4px; }
.bp-rnaam span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.bp-rnaam small { color: var(--text-2); font-size:var(--t-s); }
.bp-extra { padding: 4px 0 6px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-chip { min-height: 38px; padding: 4px 12px; border: 1px solid var(--p-olijf); border-radius: 999px; background: var(--surface); font: inherit; font-size:var(--t-ml); color: var(--text); cursor: pointer; }
.bp-chip.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.bp-stoel { min-width: 40px; padding: 4px 0; }
.bp-notitie { width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 8px; }
.bp-voet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 2px solid var(--line-strong); box-shadow: var(--shadow-pop); }
@media (min-width: 1201px) { body:not(.nav-closed) .bp-voet { left: var(--sidebar-w); } }
/* tijdens het bestellen: geen snelmenu onderaan en geen zwevende knoppen over de voet (focus zoals op een kassa) */
body.bp-bestellen .plus-tabbar, body.bp-bestellen .ok-fab, body.bp-bestellen .fab, body.bp-bestellen #tk-fab, body.bp-bestellen .tk-fab { display: none !important; }
body.bp-bestellen main { padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; }
.bp-mandknop { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid var(--p-olijf);
  border-radius: var(--r-l); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.bp-mandknop strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.bp-mandknop .ic { width: 22px; height: 22px; flex: none; }
.bp-mandknop.on { background: var(--surface-3); }
.bp-klaar { flex: 1 1 0; min-width: 0; min-height: 52px; font-size:var(--t-base); }
.bp-klaarkaart p { margin: 4px 0 10px; }
.bp-klaarkaart h3 .ic { fill: var(--ok); }
.bp-meting { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.bp-meting div, .bp-tegel { display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-m); background: var(--surface-3); border: 1px solid var(--line-2); min-width: 0; }
.bp-meting span, .bp-tegel span { font-size:var(--t-xs); color: var(--text-2); }
.bp-meting strong { font-size:var(--t-base); font-variant-numeric: tabular-nums; }
.bp-lsknop { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--p-olijf); border-radius: var(--r-l);
  background: var(--surface); font: inherit; font-weight: 700; font-size:var(--t-base); color: var(--text); cursor: pointer; }
.bp-lsknop .ic { width: 22px; height: 22px; fill: var(--text-faint); }
.bp-lsknop.on { background: var(--ok-bg); border-color: var(--ok); }
.bp-lsknop.on .ic { fill: var(--ok); }
.bp-oordeel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bp-oordeel .bp-chip { min-height: 48px; border-radius: var(--r-m); }
.bp-opm { width: 100%; box-sizing: border-box; margin: 10px 0; }
.bp-volgende { width: 100%; min-height: 52px; }
.bp-reskop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bp-reskop h3 { margin: 0; }
.bp-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bp-tegel strong { font-size:var(--t-xl); font-variant-numeric: tabular-nums; }
.bp-tegel small { font-size:var(--t-xs); color: var(--text-3); }
.bp-balk { display: flex; min-height: 30px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line-strong); }
.bp-balk span { display: flex; align-items: center; justify-content: center; font-size:var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; padding: 0 4px; }
.bp-b-sneller { background: var(--ok-bg); }
.bp-b-zelfde { background: var(--surface-3); }
.bp-b-trager { background: var(--err-bg); }
.bp-b-leeg { flex: 1; color: var(--text-3); }
.bp-csv { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.bp-tabelhost { overflow-x: auto; max-width: 100%; }
.bp-tabel { width: 100%; border-collapse: collapse; font-size:var(--t-m); }
.bp-tabel th, .bp-tabel td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.bp-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bp-obers, .bp-notities { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Bestelscherm v2 (19/10): zoals een kassa-app. Een vaste kop (terug, tafel, klok, zoeken), de categorieën
   eronder, het menu als tegels (2 per rij op de gsm, meer op een tablet), het mandje als balk die altijd
   onderaan staat en als paneel opent. Alles met vaste maten: een badge of een − verschijnt zonder dat er
   iets verschuift. Titels in Fraunces (theo-fase2.css), de rest in Roboto Condensed. */
.bp-scherm { max-width: 980px; }
body.bp-bestellen .page-head { display: none; }
.bp-banner { font-size:var(--t-m); padding: 7px 12px; line-height: 1.3; }
.bp-banner .ic { width: 18px; height: 18px; }
.bs-lsband { background: var(--ok-bg); border-color: var(--ok); }
.bs-lsband .ic { fill: var(--ok-ink); }
.bs-offline { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-m); background: var(--warn-bg); font-size:var(--t-m); }
.bs-offline .ic { width: 16px; height: 16px; }
.bs-sectie { margin: 4px 0 6px; font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }

/* tafels */
.bs-tafelkaart h3 { margin: 0; font-family: var(--f2-serif, inherit); font-size:var(--t-xl); }
.bs-tafelkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bs-tzoek { width: 96px; min-height: 44px; font-size:var(--t-l); text-align: center; border-radius: 999px; }
.bs-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 12px; }
/* de tafelkeuze (19/10): het raster of het plan links, de zalen als verticale knoppen rechts */
.bs-tafelkop .bs-weergave { margin-left: auto; }
@media (max-width: 480px) { .bs-tafelkop { flex-wrap: wrap; } .bs-tafelkop h3 { flex: 1 0 100%; } .bs-tafelkop .bs-weergave { margin-left: 0; } }
.bs-weergave button { min-height: 40px; padding: 0 14px; }
.bs-tafelvlak { display: block; }
.bs-tafelvlak.met-zalen { display: grid; grid-template-columns: minmax(0, 1fr) 68px; gap: 8px; align-items: start; }
.bs-tafelhoofd { min-width: 0; }
.bs-zaalkolom { position: sticky; top: calc(var(--header-h) + 8px); display: flex; flex-direction: column; gap: 6px; }
.bs-zaalkolom button { min-height: 56px; padding: 4px 2px; border: 1.5px solid var(--p-olijf); border-radius: var(--r-m); background: var(--surface);
  font: 650 var(--t-m) var(--font); color: var(--text); cursor: pointer; word-break: break-word; line-height: 1.1; }
.bs-zaalkolom button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.bs-planhost { width: 100%; }
.bs-planhost[hidden] { display: none; }
/* het tafelplan (19/10 v2): het schone plan van Theo uit de scan; een vaste hoogte (geen sprongen bij een andere zaal) */
.bs-planbalk { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 6px; }
.bs-zichten { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.bs-zichten::-webkit-scrollbar { display: none; }
.bs-zichten button { flex: none; min-height: 40px; padding: 0 13px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  font: 650 var(--t-m) var(--font); color: var(--text); cursor: pointer; white-space: nowrap; }
.bs-zichten button.on { background: var(--sel-bg); border-color: var(--sel-bg); color: var(--sel-fg); }
.bs-zichtnaam { font: 700 var(--t-xs) var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); padding-left: 2px; }
/* Schema | Foto onder het plan: nooit over een tafel, de chips houden de volle breedte */
.bs-planvoet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.bs-planvoet .t-meta { flex: 1 1 auto; min-width: 0; font-size:var(--t-s); }
@media (max-width: 420px) { .bs-planvoet .t-meta { display: none; } .bs-planvoet { justify-content: flex-end; } }
.bs-planlaag { flex: none; }
.bs-planlaag button { min-height: 44px; padding: 0 14px; }
.bs-plan { display: block; width: 100%; height: clamp(320px, calc(100svh - 300px), 780px); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-l); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 600px) { .bs-plan { height: clamp(300px, calc(100svh - 370px), 640px); } }
.bs-plan text { text-anchor: middle; dominant-baseline: central; font-family: var(--font); pointer-events: none; }
/* een groep tafels (Arthur 22/10): wat er niet bij hoort, onder een donkere sluier; tikken gaat er niet */
.bs-p-sluier { fill: rgb(28 22 12 / .34); pointer-events: none; }
:root[data-theme="dark"] .bs-p-sluier { fill: rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bs-p-sluier { fill: rgb(0 0 0 / .45); } }
.bs-p-zone { stroke: none; }
.bs-p-zone.ander { opacity: .45; }
.bs-plan.foto .bs-p-zone { fill-opacity: 0; }
.bs-p-foto { opacity: .95; }
.bs-p-muur { fill: none; stroke: var(--chrome-3); stroke-width: .22px; stroke-linejoin: miter; stroke-linecap: square; }
.bs-plan.foto .bs-p-muur { stroke-width: .14px; stroke: rgba(40, 34, 28, .82); }
.bs-p-deur { fill: none; stroke: var(--p-lijn-sterk); stroke-width: .1px; stroke-dasharray: .12 .08; }
.bs-p-toog { fill: var(--p-hout); stroke: var(--p-bruin); stroke-width: .04px; stroke-linejoin: round; }
.bs-p-schaduw { fill: rgba(47, 35, 22, .2); }
.bs-plan.foto .bs-p-toog { fill: rgba(162, 125, 85, .55); }
.bs-p-toogtxt { fill: var(--p-creme-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bs-p-trap { fill: var(--p-lijn); stroke: var(--p-olijf-vaag); stroke-width: .03px; }
.bs-p-trede { fill: none; stroke: var(--p-olijf-vaag); stroke-width: .025px; }
.bs-p-hoogte { fill: none; stroke: var(--p-olijf); stroke-width: .06px; stroke-dasharray: .16 .1; }
.bs-p-blok { fill: var(--p-hout-licht); stroke: var(--p-hout-donker); stroke-width: .03px; }
.bs-p-rand { fill: none; stroke: var(--p-olijf-vaag); stroke-width: .14px; stroke-linecap: round; }
.bs-p-plant circle { fill: var(--p-salie); }
.bs-p-plant .bs-p-blad { fill: var(--p-blad-licht); }
.bs-p-eigen { fill: rgba(140, 125, 84, .18); stroke: var(--p-olijf-mute); stroke-width: .05px; }
.bs-p-eigen.bs-p-muurlijn, .bs-p-eigen.bs-p-contour { fill: none; }
.bs-p-zaal { fill: rgba(64, 52, 38, .42); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.bs-p-straat { fill: rgba(64, 52, 38, .3); }
.bs-p-klein { fill: var(--p-hout-donker); font-weight: 650; }
.bs-p-ingang { fill: var(--p-olijf); }
/* de tafels: echt formaat, grote nummers, stoelen als bolletjes; de status duidelijk maar rustig */
.bs-p-tafel { cursor: pointer; outline: none; }
.bs-p-stoel { fill: var(--p-creme-mat); }
.bs-plan.foto .bs-p-stoel { fill: var(--p-linnen); stroke: rgba(60, 50, 35, .35); stroke-width: .02px; }
.bs-p-tschaduw .bs-p-tvorm { fill: rgba(47, 35, 22, .22); stroke: none; }
.bs-p-tvorm { fill: var(--p-creme-0); stroke: var(--p-olijf-inkt); stroke-width: .045px; }
.bs-p-nr { font-weight: 800; fill: var(--text); }
.bs-p-badge rect { fill: var(--p-creme-0); stroke: currentColor; stroke-width: .03px; }
.bs-p-badge text { font-weight: 800; fill: currentColor; }
.bs-p-tafel.open { color: var(--wijn); }
.bs-p-tafel.open > g > .bs-p-tvorm { fill: var(--err-bg); stroke: var(--err-ink); stroke-width: .07px; }
.bs-p-tafel.proef { color: var(--brand-ink); }
.bs-p-tafel.proef > g > .bs-p-tvorm { fill: var(--p-linnen); stroke: var(--brand-deep); stroke-width: .07px; }
.bs-p-tafel.recent > g > .bs-p-tvorm { stroke-dasharray: .12 .07; }
.bs-p-tafel.test > g > .bs-p-tvorm { stroke: var(--ok); stroke-width: .08px; }
.bs-p-tafel:focus-visible > g > .bs-p-tvorm, .bs-p-tafel:hover > g > .bs-p-tvorm { stroke-width: .09px; }
.bs-nietop { margin-top: 10px; }
.bs-dot.recent { border-style: dashed; border-color: var(--p-olijf-mute); background: var(--surface); }
.bp-scherm .bp-tafels { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.bp-scherm .bp-tafel { position: relative; min-height: 72px; gap: 2px; border-width: 1.5px; border-radius: var(--r-l); background: var(--surface); font-size:var(--t-xl); font-weight: 700; }
.bp-tafel > span { line-height: 1.1; }
.bp-tafel small { font-size:var(--t-xs); font-weight: 600; min-height: 1.1em; }
.bp-tafel.proef { border-color: var(--brand-deep); background: var(--inset); }
.bp-tafel.open { border-color: var(--p-rood-inkt); background: var(--err-bg); }
.bs-tst.open { color: var(--wijn); }
.bs-tst.proef { color: var(--brand-ink); }
.bs-ls { position: absolute; top: 4px; right: 5px; font-style: normal; font-size:var(--t-xs); font-weight: 800; letter-spacing: .04em; padding: 0 4px;
  border-radius: 4px; background: var(--ok); color: var(--wit); }
.bs-legende { margin: 10px 0 0; font-size:var(--t-s); }
/* TO GO (meenemen): altijd bovenaan, een eigen knop (niet in het raster van een zaal) */
.bp-scherm .bs-togo { position: relative; width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 14px;
  border: 1.5px solid var(--chrome-2); border-radius: var(--r-l); background: var(--chrome-2); color: var(--wit); font: inherit; text-align: left; cursor: pointer; }
.bs-togo .ic { width: 26px; height: 26px; fill: var(--brand); flex: none; }
.bs-togo span { display: flex; flex-direction: column; line-height: 1.15; }
.bs-togo strong { font-size:var(--t-xl); letter-spacing: .04em; }
.bs-togo small { font-size:var(--t-s); color: var(--p-grijs); }
.bs-togoband { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-m); background: var(--chrome-2); color: var(--wit); font-size:var(--t-m); line-height: 1.3; }
.bs-togoband .ic { width: 18px; height: 18px; fill: var(--brand); flex: none; }
.bs-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; border: 1.5px solid var(--p-rood-inkt); background: var(--err-bg); }
.bs-dot.proef { border-color: var(--brand-deep); background: var(--inset); }

/* de kop tijdens het bestellen */
.bs-kop { position: sticky; top: var(--header-h); z-index: 6; display: grid; grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px;
  margin: -6px -4px 0; padding: 8px 4px; background: var(--bg); }
.bs-terug { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--p-olijf); background: var(--surface); }
.bs-terug .ic { width: 24px; height: 24px; }
.bs-tafel { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.bs-tafel > span { font-family: var(--f2-serif, inherit); font-size:var(--t-xl); font-weight: 650; white-space: nowrap; }
.bs-tafel small { font-size:var(--t-s); color: var(--text-2); white-space: nowrap; }
.bs-tafel .bp-klok { all: unset; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.bs-zoek { position: relative; display: block; min-width: 0; }
.bs-zoek .ic { position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: var(--text-3); pointer-events: none; }
.bs-zoek .bp-zoek { width: 100%; min-height: 44px; padding-left: 38px; border-radius: 999px; font-size:var(--t-base); }
.bp-scherm .bs-cats { position: sticky; top: calc(var(--header-h) + 60px); z-index: 5; margin: 0 -4px; padding: 4px 4px 8px; background: var(--bg); scrollbar-width: none; }
.bs-cats::-webkit-scrollbar { display: none; }
.bp-scherm .bp-cat { min-height: 42px; padding: 4px 16px; font-size:var(--t-base); border-width: 1.5px; }

/* de tegels */
.bs-lijst { min-height: 40vh; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (max-width: 420px) { .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* de indeling per tab (21/10): groepen zoals de secties van de gedrukte kaart (een serif-naam, een lijn, het aantal),
   een vaste balk met de groepen onder de categorieen (springen) en bovenaan 'Meest besteld nu' als een rij chips */
.bs-nu { margin: 2px 0 10px; }
.bs-nukop { display: block; margin: 0 0 6px; font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.bs-nurij { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 2px; }
.bs-nurij::-webkit-scrollbar { display: none; }
.bs-nuchip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; max-width: 220px; padding: 0 14px 0 8px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 var(--t-ml) var(--font);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bs-nuchip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-nuchip:active { transform: scale(.97); background: var(--surface-3); }
.bs-nuchip.heeft { border-color: var(--brand-deep); background: var(--inset); }
.bs-nuchip b { min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--chrome-2); color: var(--wit); font-size:var(--t-xs); }
.bs-nbeeld { width: 24px; height: 24px; flex: none; }
.bp-scherm .bs-igchips { position: sticky; top: calc(var(--header-h) + 114px); z-index: 4; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -4px 4px; padding: 2px 4px 8px; background: var(--bg); }
.bs-igchips::-webkit-scrollbar { display: none; }
.bs-igchips button { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--text-2); font: 600 var(--t-ml) var(--font); cursor: pointer; touch-action: manipulation; }
.bs-igchips small { font-size:var(--t-xs); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bs-igchips button.on { border-color: var(--brand-deep); background: var(--inset); color: var(--text); }
.bs-ig { scroll-margin-top: calc(var(--header-h) + 164px); }
.bs-igkop { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: inherit; font-weight: inherit; }
.bs-ignaam { font-family: var(--f2-serif, inherit); font-size:var(--t-l); font-weight: 650; color: var(--text); white-space: nowrap; }
.bs-igkop i { flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.bs-igkop small { font-size:var(--t-s); color: var(--text-3); font-variant-numeric: tabular-nums; }
details.bs-ig > summary { list-style: none; cursor: pointer; min-height: 44px; }
details.bs-ig > summary::-webkit-details-marker { display: none; }
details.bs-ig .bs-ignaam { color: var(--text-2); }
details.bs-ig > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px 0; border: solid var(--text-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
details.bs-ig[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.bs-tegel { position: relative; min-width: 0; }
.bp-scherm .bs-prod { position: relative; width: 100%; height: 84px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 9px;
  padding: 8px 10px 8px 8px; text-align: left; border: 1.5px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer; box-shadow: var(--shadow-card); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bp-scherm .bs-prod:active { transform: scale(.97); background: var(--surface-3); }
.bs-tegel.heeft .bs-prod { border-color: var(--brand-deep); background: var(--inset); }
.bs-pbeeld { width: 44px; height: 44px; flex: none; }
.bs-ptekst { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; min-width: 0; flex: 1 1 auto; padding: 1px 0; }
.bs-pnaam { font-weight: 650; font-size:var(--t-base); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 22px; max-height: 2.3em; flex: none; }
.bs-pvoet { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.bs-pvoet .bp-prijs { font-size:var(--t-ml); color: var(--text-2); }
.bs-tag { font-style: normal; font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 0 5px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); }
.bs-tag.al { background: var(--warn-bg); }
.bs-prod.op { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bs-prod .bp-op { font-size:var(--t-xs); }
.bs-n { position: absolute; top: -7px; right: -5px; min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px;
  background: var(--chrome-2); color: var(--wit); font-weight: 700; font-size:var(--t-ml); box-shadow: 0 0 0 2px var(--bg); }
.bs-min { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid var(--p-olijf); background: var(--raised);
  font: 700 var(--t-xl)/1 var(--font); color: var(--text); }

/* de suggestie en de balk onderaan */
.bs-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-strong); box-shadow: 0 -4px 14px rgba(110, 98, 68, .12); }
@media (min-width: 1201px) { body:not(.nav-closed) .bs-strook { left: calc(var(--sidebar-w) + 12px); } body:not(.nav-closed) .bs-balk { left: var(--sidebar-w); } }
.bs-mandbalk-knop { min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1.5px solid var(--p-olijf); border-radius: 999px; background: var(--surface);
  font: inherit; color: var(--text); cursor: pointer; min-width: 0; }
.bs-mandbalk-knop:disabled { opacity: .55; }
.bs-mandic { position: relative; flex: none; display: grid; }
.bs-mandic .ic { width: 24px; height: 24px; }
.bs-mandic b { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--p-rood-inkt); color: var(--wit); font-size:var(--t-xs); display: grid; place-items: center; }
.bs-mandtxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; text-align: left; font-size:var(--t-ml); white-space: nowrap; }
.bs-mandtxt small { font-size:var(--t-xs); color: var(--err-ink); }
.bs-mandbalk-knop strong { margin-left: auto; font-variant-numeric: tabular-nums; font-size:var(--t-base); white-space: nowrap; }
.bs-balk .bp-klaar { min-height: 56px; border-radius: 999px; font-size:var(--t-l); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bs-balk .bp-klaar .ic, .bs-ok .ic { width: 22px; height: 22px; }

/* de panelen onderaan (keuzes, mandje) */
.bs-laag { position: fixed; inset: 0; z-index: 60; }
.bs-achter { position: absolute; inset: 0; background: color-mix(in srgb, var(--p-inkt) 45%, transparent); }
.bs-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; display: flex; flex-direction: column; margin: 0 auto; max-width: 640px;
  background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(21, 18, 14, .25); padding: 4px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(16px); opacity: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.bs-laag.open .bs-sheet { transform: none; opacity: 1; }
.bs-greep { width: 44px; height: 5px; margin: 6px auto 8px; border-radius: 3px; background: var(--line-strong); flex: none; }
.bs-skop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex: none; }
.bs-stitel { font-family: var(--f2-serif, inherit); font-size:var(--t-2xl); line-height: 1.15; margin: 0; }
.bs-sprijs { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-allerg { margin: 4px 0 0; font-size:var(--t-m); color: var(--wijn); display: flex; align-items: center; gap: 4px; }
.bs-allerg .ic { width: 16px; height: 16px; fill: var(--err-ink); }
.bs-sbody { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; min-height: 0; }
.bs-gkop { margin: 14px 0 6px; font-size:var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.bs-eis { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-3); }
.bs-groep.mist .bs-eis { color: var(--err-ink); font-weight: 700; }
.bs-sheet .bp-chip { min-height: 44px; padding: 4px 14px; font-size:var(--t-base); border-width: 1.5px; }
.bs-sheet .bp-chip small { color: inherit; opacity: .8; }
.bs-svoet { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bs-stepper { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.bs-stap { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--p-olijf); background: var(--raised); font: 700 var(--t-xl)/1 var(--font); color: var(--text); }
.bs-sn, .bs-stepper .bp-rn { min-width: 30px; text-align: center; font-weight: 700; font-size:var(--t-l); font-variant-numeric: tabular-nums; }
.bs-ok { flex: 1 1 auto; min-height: 54px; border-radius: 999px; font-size:var(--t-l); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bs-ok:disabled { opacity: .6; }
.bs-sweg { width: 100%; margin-top: 8px; min-height: 44px; color: var(--err-ink); display: flex; align-items: center; justify-content: center; gap: 6px; }
.bs-sweg .ic { width: 18px; height: 18px; fill: var(--err-ink); }
.bs-stot { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
.bs-stot span { font-size:var(--t-m); color: var(--text-2); }
.bs-stot strong { font-size:var(--t-xl); font-variant-numeric: tabular-nums; }
.bp-scherm .bs-regel { position: relative; overflow: hidden; border-radius: 0; padding: 0; border: 0; }
.bs-regel-weg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 16px; background: var(--p-rood-inkt); color: var(--wit); font-weight: 700; }
.bs-regel-weg .ic { width: 20px; height: 20px; fill: var(--wit); }
.bs-regel-in { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 4px 6px 8px;
  background: var(--surface); border-bottom: 1px solid var(--line); touch-action: pan-y; transition: transform .12s ease-out; }
.bp-scherm .bs-rnaam { min-height: 44px; align-items: flex-start; justify-content: center; text-align: left; padding: 0; }
.bs-rnaam small { text-align: left; }
.bs-tegel.heeft .bs-pvoet { margin-right: 34px; }
/* snelle notities: een rij die in zichzelf schuift (het paneel blijft kort) */
.bs-sheet .bp-chips.bs-rij { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.bs-sheet .bp-chips.bs-rij::-webkit-scrollbar { display: none; }
.bs-sheet .bs-rij .bp-chip { flex: none; }
.bs-rprijs { font-variant-numeric: tabular-nums; color: var(--text-2); font-size:var(--t-ml); }
.bs-veeg { margin: 8px 0 0; font-size:var(--t-s); }

/* bestelscherm v3 (19/10): beelden, keuzestrook, rekening, betalen, foto's */
.pbeeld { display: block; --pb-l: var(--chrome-3); }
.pbeeld.foto { overflow: hidden; border-radius: 10px; background: var(--surface-3); }
.pbeeld.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pbeeld.leeg { visibility: hidden; }
/* merklogo (19/10): het echte logo in een vast vakje, zelfde maat als het pictogram; wit (of de merkkleur voor een wit/geel logo) */
.pbeeld.merk { box-sizing: border-box; overflow: hidden; padding: 4%; border-radius: 18%; background: var(--pb-ma, var(--wit)); box-shadow: inset 0 0 0 1px rgba(40, 30, 20, .12); }
.pbeeld.merk img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* een breed woordmerk (Coca-Cola, Fuze Tea ...): een liggend vakje, even hoog, 1,6 x zo breed (de tekst schuift mee, vaste maat) */
.pbeeld.merk.breed { width: auto; aspect-ratio: 8 / 5; padding: 3% 5%; border-radius: 10px; }
.pb-letter { fill: var(--pb-a, var(--chrome-3)); font-weight: 800; font-family: var(--font, sans-serif); }
.pb-letter.w { fill: var(--wit); }
.bs-prod.op .pbeeld { filter: grayscale(1); }
.bs-rbeeld { width: 28px; height: 28px; }
.bs-sbeeld { width: 32px; height: 32px; flex: none; }
.bs-cbeeld { width: 20px; height: 20px; flex: none; }
.bs-skop .bs-sbeeld { align-self: center; }
.bp-cat .bs-stip { display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--p-rood-inkt); vertical-align: 2px; box-shadow: 0 0 0 2px var(--surface); }
.bp-cat .bs-stip[hidden] { display: none; }
.bs-rekknop { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 12px; border: 1.5px solid var(--p-olijf);
  border-radius: 999px; background: var(--surface); color: var(--text); font: 600 var(--t-xs) var(--font); cursor: pointer; }
.bs-rekknop .ic { width: 22px; height: 22px; }
/* de keuzestrook: blokkeert niet (de tegels blijven tikbaar), een volgende tik vervangt ze */
.bs-strook { position: fixed; left: 8px; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 19; max-width: 640px; margin: 0 auto;
  max-height: 38vh; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--brand-deep); border-radius: 16px;
  box-shadow: var(--shadow-pop); overflow: hidden; }
.bs-strook[hidden] { display: none; }
body.bs-strook-open .bs-lijst { padding-bottom: 38vh; }
.bs-skop2 { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--line); flex: none; }
.bs-snaam { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; flex: 1 1 auto; }
.bs-snaam strong { font-size:var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-snaam small { font-size:var(--t-s); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-sdicht { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; flex: none; }
.bs-sdicht .ic { width: 20px; height: 20px; }
.bs-sinhoud { overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 8px; }
.bs-sgroep { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: start; gap: 6px; padding: 4px 0; }
.bs-slabel { font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding-top: 11px; line-height: 1.1; }
.bs-slabel small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--err-ink); }
.bs-schips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.bs-schips.bs-rij { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bs-schips.bs-rij::-webkit-scrollbar { display: none; }
.bs-strook .bp-chip { min-height: 38px; padding: 2px 12px; font-size:var(--t-ml); border-width: 1.5px; flex: none; }
.bs-strook .bp-chip small { opacity: .8; }
.bs-strook .bs-meer { border-style: dashed; }
.bs-erbij-b { display: inline-flex; align-items: center; gap: 5px; background: var(--inset); }
.bs-snotitie { grid-column: 2; width: 100%; min-height: 40px; margin-top: 6px; }
/* de rekening en betalen */
.bs-rekmodus { display: flex; margin: 6px 0 2px; }
.bs-rekmodus button { flex: 1 1 0; min-height: 40px; }
.bs-rrij { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bs-rrij.kies { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.bs-rrnaam { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bs-rrnaam small { font-size:var(--t-s); color: var(--text-2); }
.bs-delen { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.bs-delen strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.bs-lsbon { margin-top: 6px; padding: 6px 10px; border-radius: var(--r-m); background: var(--ok-bg); }
.bs-lsbon p { margin: 4px 0; }
/* sync (20/10): de rekening van een gekoppelde tafel = de bon van Lightspeed; onderweg apart; Lightspeed niet te lezen */
.bs-lsstaat { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 6px; padding: 6px 10px; border-radius: var(--r-m); font-size:var(--t-m); }
.bs-lsstaat .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bs-lsstaat.ok { background: var(--ok-bg); color: var(--ok-ink); }
.bs-lsstaat.fout { background: var(--err-bg); color: var(--wijn); }
.bs-bijgewerkt { font-variant-numeric: tabular-nums; }
.bs-onderweg { margin-top: 8px; padding: 2px 10px 6px; border-radius: var(--r-m); background: var(--warn-bg); }
.bs-onderweg .bs-gkop { display: flex; align-items: center; gap: 6px; }
.bs-onderweg .bs-gkop .ic { width: 16px; height: 16px; }
.bs-onderweg .bs-rrij { border-bottom-color: transparent; }
.bs-onderweg .t-meta { margin: 2px 0 0; }
.bs-rrij.min { grid-template-columns: 24px minmax(0, 1fr) auto; }
.bs-rrij.min .bs-vandetafel { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; font-size:var(--t-m); }
.bs-vandetafel .ic { width: 16px; height: 16px; }
.bs-sectie .bs-bijgewerkt-k { font-weight: 400; text-transform: none; letter-spacing: 0; }
.bs-afdruk { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.bs-afdruk .ic { width: 16px; height: 16px; flex: none; }
.bs-svoet .bs-betaalknop, .bs-svoet .bs-betaalok { flex: 1 1 auto; }
.bs-bedrag { display: flex; align-items: center; gap: 6px; font-size:var(--t-xl); font-weight: 700; }
.bs-bedrag input { width: 140px; min-height: 48px; font-size:var(--t-xl); font-variant-numeric: tabular-nums; text-align: right; }
.bs-betaalband { margin-top: 6px; }
.bs-betaald p { margin: 6px 0; }
/* foto's per product (zaakvoerder, beheerder) */
.bs-fzoek { width: 100%; min-height: 44px; border-radius: 999px; margin: 6px 0 4px; }
.bs-fotolijst { list-style: none; margin: 0 0 8px; padding: 0; }
.bs-fotorij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bs-fotorij[hidden], .bs-fcat[hidden] { display: none; }
.bs-fbeeld { width: 56px; height: 56px; }
.bs-fnaam { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bs-fnaam small { color: var(--text-2); font-size:var(--t-s); }
.bs-fknop { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.bs-fknop .ic, .bs-fweg .ic { width: 20px; height: 20px; }
.bs-fweg { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }

/* rondes die al doorgestuurd zijn (testtafel) */
.bs-rondekaart { padding: 10px 12px; border-color: var(--ok); }
.bs-ronde { position: relative; padding: 6px 40px 6px 0; border-bottom: 1px solid var(--line); }
.bs-ronde:last-of-type { border-bottom: 0; }
.bs-rondekop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size:var(--t-ml); }
.bs-pil { font-size:var(--t-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); }
.bs-pil.ok { background: var(--ok-bg); color: var(--ok-ink); }
.bs-pil.wacht { background: var(--warn-bg); }
.bs-pil.fout { background: var(--err-bg); color: var(--wijn); }
.bp-scherm .bs-ververs { position: absolute; right: 0; top: 2px; margin: 0; min-height: 36px; min-width: 36px; padding: 0; display: grid; place-items: center; }
.bs-ververs .ic { width: 18px; height: 18px; }
.bs-rondeitems { font-size:var(--t-m); color: var(--text-2); }
.bs-rondefout { font-size:var(--t-m); color: var(--wijn); }
.bs-kassa { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size:var(--t-m); }
.bs-kassa .ic { width: 16px; height: 16px; flex: none; }
.bp-scherm > .bp-msg:not(:empty) { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 18; margin: 0 auto; max-width: 560px;
  padding: 8px 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); color: var(--text); }

/* ---- QR-bestellingen — proef (idee 18/10, tabs/qr.js) ---- */
.qr-scherm { max-width: 960px; }
.qr-fout { border-color: var(--p-rood-inkt); background: var(--err-bg); }
.qr-fout h3 { display: flex; gap: 8px; align-items: center; color: var(--wijn); }
.qr-fout .ic { width: 22px; height: 22px; fill: var(--err-ink); }
.qr-druk { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.qr-druk .ic { width: 18px; height: 18px; }
.qr-zaal { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qr-zaal a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.qr-tafels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qr-tafels li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.qr-tafels li.uit strong { color: var(--text-3); text-decoration: line-through; }
.qr-uitlabel { font-size:var(--t-xs); font-weight: 700; text-transform: uppercase; color: var(--err-ink); }
.qr-acties { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qr-acties .ic { width: 16px; height: 16px; vertical-align: -3px; }
.qr-tabel th:nth-child(n+3) { text-align: right; }
.qr-top { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .qr-top { columns: 1; } }

/* Voorlopig gepubliceerd rooster (Arthur 21/10, docs/ROOSTER_VOORLOPIG.md): het personeel ziet de dag al,
   Bart keurde hem nog niet goed. Gestippeld en een geel etiket; definitieve dagen blijven zoals ze waren. */
.mp-cel.gepland.voorlopig { box-shadow: inset 0 -3px 0 var(--warn); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(201, 138, 27, .10) 6px 8px); }
.mp-rij.voorlopig .mp-u { color: var(--text-2); }
.mp-verv.mp-voorlopig { color: var(--warn-ink); }
.mp-vl-uitleg { display: flex; gap: 8px; align-items: flex-start; margin: -6px 0 14px; padding: 8px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-ink); font-size: var(--t-s); line-height: 1.4; }
.mp-vl-uitleg .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
/* de stand van het rooster per week in Mijn rooster (usability-test 4/11): dezelfde status als de planner */
.mp-weken { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 14px; }
.mp-wk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; padding: 8px 10px;
  border-radius: 8px; border: 1px solid var(--line, var(--steen-licht)); font-size: var(--t-s); }
.mp-wk-d { font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-wk-s { display: inline-flex; align-items: center; gap: 6px; }
.mp-wk-s .ic { width: 16px; height: 16px; flex: none; }
.mp-wk.st-voorstel { background: var(--surface-3); color: var(--text-2); border-style: dashed; }
.mp-wk.st-deels, .mp-wk.st-voorlopig { background: var(--warn-bg); color: var(--warn-ink); }
.mp-wk.st-vrijgegeven { background: var(--ok-bg); color: var(--groen-nacht); }
.mp-wk-uitleg { font-size: var(--t-s); }
.pr-vl, .vd-vl, .wk-vl { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg);
  color: var(--warn-ink); border: 1px dashed var(--warn); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .02em; text-transform: none; }
.wk-ok { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; font-size: var(--t-xs);
  color: var(--ok-ink); background: var(--surface-3); font-weight: 700; }
.wk-ok .ic { width: 12px; height: 12px; }
.pt-tbl .pt-vl { color: var(--warn-ink); font-size: var(--t-xs); font-weight: 700; }
.pl-ma { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface-2);
  font-size: var(--t-s); color: var(--text-2); }
.pl-ma b { color: var(--text); }
.pl-ma ul { margin: 6px 0 0; padding-left: 18px; }
.pl-ma button { margin-left: 6px; }
.wk-eigen.wk-eigen-vl { background: var(--warn-bg); color: var(--warn-ink); }

/* Mijn overzicht (Arthur 22/10/2026, tabs/mijnwerk.js): week of maand, gewerkt en nog te gaan; telefoon eerst.
   Alleen rollen uit tokens.css, zodat het donkere thema vanzelf meekomt. */
.mo-soort { margin-bottom: 14px; }
.mo-kaart .mp-maand { margin-bottom: 10px; }
.mo-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 14px; }
.mo-tegel { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); }
.mo-tegel[data-tegel="komt"] { background: var(--ok-bg); border-color: var(--line-2); }
.mo-tl { font-size: var(--t-s); color: var(--text-2); font-weight: 600; }
.mo-tw { font-size: var(--t-2xl); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mo-ts { font-size: var(--t-s); color: var(--text-3); }
.mo-signaal { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-ink); font-size: var(--t-s); line-height: 1.4; }
.mo-signaal .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.mo-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-dag { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.mo-dag .mo-d { font-weight: 600; color: var(--text); }
.mo-dag .mo-h { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); text-align: right; }
.mo-dag .mo-w { grid-column: 1 / -1; color: var(--text-2); font-size: var(--t-m); font-variant-numeric: tabular-nums; }
.mo-dag .mo-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mo-dag .chip { font-size: var(--t-xs); padding: 1px 8px; }
.mo-dag.gepland { border-style: dashed; }
.mo-dag.gepland .mo-h { color: var(--text-2); font-weight: 600; }
.mo-dag.niet_geklokt { border-color: var(--err); }
.mo-dag.niet_geklokt .mo-h, .mo-dag.geschrapt .mo-h { color: var(--text-3); }
.mo-dag.geschrapt { opacity: .75; }
.mo-dag.nu { box-shadow: inset 3px 0 0 var(--brand); }
.mo-leeg { color: var(--text-2); margin: 4px 0; }
.mo-terug { text-align: center; margin-top: 12px; }
.mo-vorige summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; cursor: pointer;
  min-height: 44px; list-style: none; }
.mo-vorige summary::-webkit-details-marker { display: none; }
.mo-vorige .mo-vt { font-weight: 700; color: var(--text); }
.mo-vorige .mo-vs { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mo-vorige[open] summary { margin-bottom: 10px; }
.mo-voet { display: flex; gap: 8px; align-items: flex-start; color: var(--text-3); font-size: var(--t-s); margin: 4px 4px 16px; line-height: 1.4; }
.mo-voet .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.mo-beheer .mo-kies { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.mo-beheer select { min-height: 40px; min-width: 220px; max-width: 100%; }
.plg-overzicht { margin: -4px 0 12px; }
.plg-overzicht a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.plg-overzicht .ic { width: 18px; height: 18px; }

/* Klokken zonder drempel (Arthur 23/10, klokcollega.js): de post kiezen en 'Iemand inklokken' */
.kc-over { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
.kc-kaart { width: min(640px, 100%); background: var(--surface); color: var(--text); border-radius: var(--r-l); padding: 18px; margin-top: 4vh; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.kc-kop { font-size: var(--t-xl); font-weight: 700; margin-bottom: 6px; }
.kc-kop span { font-weight: 500; color: var(--text-2); font-size: var(--t-base); }
.kc-titel { font-weight: 700; margin-bottom: 4px; }
.kc-uitleg { color: var(--text-2); margin: 4px 0 10px; }
.kc-zoek { width: 100%; box-sizing: border-box; font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); margin-bottom: 8px; }
.kc-groep { margin: 12px 0 6px; font-size: var(--t-m); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.kc-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.kc-naam { appearance: none; text-align: left; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.kc-naam span { font-size: var(--t-m); color: var(--text-2); }
.kc-posten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.kc-postknop { appearance: none; min-height: 110px; border: 2px solid var(--line); border-radius: var(--r-l); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.kc-postknop b { font-size: var(--t-2xl); }
.kc-postknop.voor { border-color: var(--brand-deep); }
.kc-postknop span { font-size: var(--t-m); color: var(--text-2); }
.kc-fout { color: var(--p-baksteen); font-weight: 600; margin: 6px 0; }
.kc-klaar { text-align: center; padding: 20px 0; }
.kc-vink { font-size: var(--t-4xl); color: var(--brand-deep); }
.kc-knop { appearance: none; width: 100%; min-height: 52px; margin-top: 10px; border: 2px dashed var(--line); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.kl-zp-tag { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--brand); color: var(--text); font-size: .8em; }
@media (max-width: 420px) { .kc-posten { grid-template-columns: 1fr; } .kc-postknop { min-height: 64px; } }
.kc-knop.kc-hoofd { border-style: solid; border-color: var(--brand-deep); background: var(--brand); }
.ws-klok-zp { margin: 8px 0; }
/* Arthur 4/11 (usability-test tablet): niet gepland -> Begin op de post van de tablet; een eerste code bevestigen */
.kc-door.on { border-color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-deep); }
.ws-klok-zpnoot { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m, 10px); background: var(--inset); text-align: center; color: var(--text); }
.ws-klok-zpnoot b { display: block; margin-bottom: 2px; }
.ws-klok-zpnoot .btn { margin-top: 4px; text-decoration: underline; }
.ws-bev { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m, 10px); }
.ws-bev-kop { flex-basis: 100%; font-weight: 700; text-align: center; }
.ws-bev label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-m); color: var(--text-2); }
.ws-bev input { font: inherit; font-size: var(--t-l); padding: 10px 12px; min-width: 12em; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--raised); color: var(--text); }
.ws-bev input[name=bartcode] { min-width: 8em; letter-spacing: .2em; text-align: center; }
.ws-bev .btn { min-height: 48px; }

/* Uren en Lonen betalen (Arthur 2/11): wie nog loon krijgt en waar Bart betaalt, in één oogopslag */
.xl-pbet { display: inline-block; margin: 2px 0 0; padding: 1px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
th .xl-pbet { display: table; margin-top: 4px; }
.xl-pbet svg.ic { width: 12px; height: 12px; fill: currentColor; vertical-align: -1px; }
.xl-pbet-open { background: var(--warn-bg); color: var(--warn-ink); }
.xl-pbet-leeg { background: var(--err-bg); color: var(--err-ink); }
.xl-pbet-teveel { background: var(--err-bg); color: var(--err-ink); }
.xl-pbet-ok { background: var(--ok-bg); color: var(--ok); }
.xl-betaal { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--warn); border-left: 6px solid var(--warn); border-radius: 14px; background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); }
.xl-betaal .xl-pbet { margin-right: 4px; }
.xl-betaal p { margin: 0; }
.xl-betaal .xl-naarlonen { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.xl-betaal-af { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.xl-betaal-af svg.ic, .xl-betaal .xl-naarlonen svg.ic { width: 18px; height: 18px; fill: currentColor; }
.lb-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; }
.lb-stap { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--warn); border-left: 6px solid var(--warn); border-radius: 14px; background: color-mix(in srgb, var(--warn-bg) 60%, var(--surface)); }
.lb-stap-af { border-color: var(--line); border-left-color: var(--ok); background: var(--surface); }
.lb-stapnr { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warn); color: var(--surface); font-weight: 700; }
.lb-stap-af .lb-stapnr { background: var(--ok-bg); color: var(--ok); }
.lb-stapnr svg.ic { width: 16px; height: 16px; fill: currentColor; }
.lb-stap-rest { margin-top: 4px; font-weight: 600; color: var(--text-strong); }
/* de naam (met wat er nog te betalen is) blijft staan als je de tabel opzij schuift, ook op de pc (Bart 3/11) */
.xl-ptab th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 9.5rem; max-width: 14rem; white-space: normal; }

/* Uren: de loonlijnen onder een persoon (Bart 4/11) */
.xl-ptab tr.xl-lijnrij th { padding-left: 1.6rem; font-weight: 400; color: var(--p-inkt-2, inherit); }
.xl-ptab tr.xl-lijnrij td, .xl-ptab tr.xl-lijnrij th { border-top: 0; }
.xl-lnchk { display: block; color: var(--warn-ink); }
.xl-lnplus, .xl-lnweg { padding: 0 4px; min-height: 0; opacity: .35; }
.xl-ptab tr:hover .xl-lnplus, .xl-lnplus:focus-visible, .xl-lnweg:hover, .xl-lnweg:focus-visible { opacity: 1; }

/* Theo team: de lonen met hun begindatum (Arthur 4/11) */
.plg-lonen { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 2px; max-width: 22rem; }
.plg-lonen li { display: flex; align-items: center; gap: .6rem; color: var(--text-olijf); }
.plg-lonen li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.plg-loonweg { padding: 0 4px; min-height: 0; }