/* Mesken-thema boven Tabler 1.6.1 (ADR-0006).
   ERP-indeling (menu-accordeon, documenttabs, werkbalk, grid, kaart met tabs),
   huisstijl van mesken.eu (besluit Tjalling 2026-10-02): Mesken-rood #E8303A (officiele logobestanden, 2026-10-08; was #EE3D43 van de website) als enige
   accent, bijna-zwart #1D1D1D, lichtgrijs #EEEEEE, lettertype Outfit, hoeken 12/10 px.
   Alarm (blokkade, te laat) is bewust donkerder baksteenrood met icoon en lichte achtergrond,
   zodat het verschilt van de actiekleur. Tokens heten nog graf/staal: graf = kopbalk,
   staal = sterke neutrale vlakken (gridkop, actieve keuze). */

:root {
  --m-merk: #e8303a;
  --m-merk-2: #fb4a50;
  --m-merk-3: #f48f7e;
  --m-merk-4: #f9b2a1;
  --m-merk-zacht: #fdecec;
  --m-graf: #1d1d1d;
  --m-graf-2: #2e2e2e;
  --m-staal: #3d3d3d;
  --m-staal-licht: #e6e6e6;
  --m-staal-zacht: #f2f2f2;
  --m-bg: #f4f4f4;
  --m-vlak: #ffffff;
  --m-lijn: #dadada;
  --m-lijn-zacht: #ebebeb;
  --m-tekst: #1d1d1d;
  --m-dim: #6b6b6b;
  --m-signaal: var(--m-merk);
  --m-signaal-donker: #c92f35;
  --m-signaal-inkt: #ffffff;
  --m-rood: #8f1d22;
  --m-rood-zacht: #f6e4e5;
  --m-rood-rand: #d9b3b5;
  --m-oranje: #d9731f;
  --m-oranje-zacht: #fdf1e6;
  --m-groen: #2c8653;
  --m-groen-zacht: #e8f4ed;
  --m-blauw: #1d1d1d;
  --m-sel: #fde2e3;
  --m-hover: #f7f7f7;
  --m-radius: 12px;
  --m-radius-knop: 10px;
  --m-rij: 30px;
  --m-pad: 14px;
  --m-menu-b: 252px;
  --m-schaduw: 0 1px 2px rgba(29, 29, 29, .06), 0 4px 14px rgba(29, 29, 29, .06);
  --tblr-font-sans-serif: "Outfit", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
[data-bs-theme="dark"] {
  --m-bg: #141414;
  --m-vlak: #1e1e1e;
  --m-lijn: #333333;
  --m-lijn-zacht: #2a2a2a;
  --m-tekst: #ececec;
  --m-dim: #a3a3a3;
  --m-staal: #4a4a4a;
  --m-staal-licht: #2c2c2c;
  --m-staal-zacht: #262626;
  --m-merk-zacht: #3a1f20;
  --m-rood: #e0666c;
  --m-rood-zacht: #3a2020;
  --m-rood-rand: #6a3a3c;
  --m-oranje-zacht: #3a2a1a;
  --m-groen-zacht: #18301f;
  --m-blauw: #ececec;
  --m-sel: #4a2224;
  --m-hover: #262626;
  --m-schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

html, body { height: 100%; }
body { margin: 0; background: var(--m-bg); color: var(--m-tekst); font-family: var(--tblr-font-sans-serif); font-size: 13.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
a { color: var(--m-blauw); cursor: pointer; text-decoration: underline; text-decoration-color: var(--m-merk-3); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--m-merk); }
.menu a, .kaarttabs a, .segment a, .knop, .tegel, .teller, .kopknop, .wb, .sub nav a, .chip, .bel-item a { text-decoration: none; }
.ti { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.ti.groot { width: 22px; height: 22px; }
:focus-visible { outline: 2px solid var(--m-signaal); outline-offset: 1px; }

/* ---------- schil ---------- */
.app { display: grid; grid-template-columns: var(--m-menu-b) minmax(0, 1fr); grid-template-rows: 46px minmax(0, 1fr); height: 100vh; }
.app.menu-dicht { --m-menu-b: 52px; }
.kopbalk { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: var(--m-graf); color: #f2f2f2; padding: 0 12px; }
.merk { display: flex; align-items: baseline; gap: 6px; min-width: calc(var(--m-menu-b) - 24px); font-weight: 700; letter-spacing: .02em; }
.merk b { font-size: 16px; color: #fff; }
.merk span { font-weight: 400; font-size: 12px; color: #a3a3a3; }
.merk img { height: 24px; width: auto; display: block; align-self: center; }
.merk i { display: none; }
.zoekknop { flex: 1 1 360px; max-width: 520px; display: flex; align-items: center; gap: 8px; background: var(--m-graf-2); border: 1px solid #3d3d3d; border-radius: var(--m-radius-knop); color: #a9b8c8; padding: 5px 10px; cursor: text; }
.zoekknop kbd { margin-left: auto; background: #1d1d1d; border: 1px solid #4a4a4a; color: #cfcfcf; font-size: 11px; padding: 0 5px; border-radius: 4px; box-shadow: none; }
.kopbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kopbalk select { background: var(--m-graf-2); color: #f2f2f2; border: 1px solid #3d3d3d; border-radius: var(--m-radius-knop); font-size: 12px; padding: 4px 6px; }
.kopknop { background: transparent; border: 1px solid transparent; color: #cfcfcf; border-radius: var(--m-radius-knop); padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.kopknop:hover { background: var(--m-graf-2); color: #fff; }
.mockup-label { font-size: 11px; color: #fff; background: var(--m-signaal); border-radius: 4px; padding: 1px 6px; font-weight: 600; }

/* menu-accordeon */
.menu { background: var(--m-vlak); border-right: 1px solid var(--m-lijn); overflow: auto; display: flex; flex-direction: column; }
.menu-kop { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px; font-size: 12px; color: var(--m-dim); }
.menu-kop button { background: none; border: 0; color: var(--m-dim); cursor: pointer; padding: 2px; }
.wie { padding: 0 12px 8px; font-size: 12px; color: var(--m-dim); border-bottom: 1px solid var(--m-lijn-zacht); }
.wie b { color: var(--m-tekst); font-size: 13px; }
.groep { border-bottom: 1px solid var(--m-lijn-zacht); }
.groep > button, .groep.enkel > a { width: 100%; display: flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--m-tekst); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.groep > button:hover, .groep.enkel > a:hover { background: var(--m-hover); text-decoration: none; }
.groep.enkel > a.actief { background: var(--m-staal-licht); }
.groep > button .pijl { margin-left: auto; color: var(--m-dim); transition: transform .15s; }
.groep.open > button .pijl { transform: rotate(180deg); }
.groep > button .ti:first-child, .groep.enkel > a .ti:first-child { color: var(--m-staal); }
.groep ul { list-style: none; margin: 0; padding: 0 0 6px; display: none; }
.groep.open ul { display: block; }
.groep li a { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 37px; color: var(--m-tekst); font-size: 13px; }
.groep li a:hover { background: var(--m-hover); text-decoration: none; }
.groep li a.actief { background: var(--m-staal-licht); font-weight: 600; }
.groep li a .tel, .groep.enkel > a .tel { margin-left: auto; background: var(--m-rood); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; line-height: 17px; }
.menu-dicht .menu .groep > button span, .menu-dicht .menu .groep.enkel > a span, .menu-dicht .menu .groep > button .pijl, .menu-dicht .menu ul, .menu-dicht .wie, .menu-dicht .menu-kop span { display: none; }
.menu-dicht .merk span, .menu-dicht .merk b { display: none; }

/* werkgebied */
.werk { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }

.werkbalk { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 5px 8px; background: var(--m-vlak); border-bottom: 1px solid var(--m-lijn); }
.wb { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--m-tekst); padding: 3px 7px; font-size: 12px; cursor: pointer; }
.wb:hover { background: var(--m-hover); border-color: var(--m-lijn); }
.wb.uit { color: var(--m-dim); opacity: .55; cursor: default; }
.wb.uit:hover { background: none; border-color: transparent; }
.wb .rood { color: var(--m-rood); }
.wb-scheid { width: 1px; height: 20px; background: var(--m-lijn); margin: 0 5px; }
.actie { display: inline-flex; align-items: stretch; margin-left: 4px; }
.actie select { border: 1px solid var(--m-lijn); border-right: 0; border-radius: 5px 0 0 5px; background: var(--m-vlak); color: var(--m-tekst); font-size: 12px; padding: 2px 6px; max-width: 230px; }
.actie button { border: 1px solid var(--m-signaal-donker); background: var(--m-signaal); color: var(--m-signaal-inkt); border-radius: 0 5px 5px 0; padding: 2px 8px; display: inline-flex; align-items: center; cursor: pointer; }
.actie button:hover { background: #ffc61a; }
.filterop { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: 12px; color: var(--m-dim); }
.filterop select { border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); font-size: 12px; padding: 2px 6px; }
.werkbalk .duw { margin-left: auto; }

.inhoud { overflow: auto; padding: var(--m-pad) calc(var(--m-pad) + 4px) 60px; min-height: 0; }
.paginakop { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.paginakop h1 { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.paginakop p { margin: 2px 0 0; color: var(--m-dim); max-width: 92ch; }
.paginakop .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ---------- vlakken ---------- */
.vlak { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); }
.vlak > h2, .vlak-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--m-lijn-zacht); }
.vlak-kop .rechts, .vlak > h2 .rechts { margin-left: auto; font-weight: 400; font-size: 12px; }
.vlak-in { padding: 10px 12px; }
.vlak.alarm { border-color: var(--m-rood-rand); }
.vlak.alarm > h2 { background: var(--m-rood-zacht); color: var(--m-rood); border-radius: var(--m-radius) var(--m-radius) 0 0; }
.rij2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-flow: row dense; }
.rij3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rij4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.breed { grid-column: 1 / -1; }
@media (max-width: 1150px) { .rij3, .rij4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .rij2, .rij3, .rij4 { grid-template-columns: minmax(0, 1fr); } .app { --m-menu-b: 52px; } }
.dim { color: var(--m-dim); }
.klein { font-size: 12px; }
.warn { color: var(--m-rood); font-weight: 600; }
.warn::before { content: "!"; display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--m-rood); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; margin-right: 4px; vertical-align: 1px; }
.rgrid td.laat::before { content: "!"; display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--m-rood); color: #fff; font-size: 9px; font-weight: 700; margin-right: 4px; }
.leeg { color: var(--m-dim); font-style: italic; padding: 6px 0; margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; padding: 0 8px; line-height: 19px; font-size: 12px; color: #fff; background: var(--c, #7a8794); white-space: nowrap; }
.pill.omtrek { background: transparent; color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.punt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #7a8794); margin-right: 5px; }
.knop { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--m-lijn); background: var(--m-vlak); color: var(--m-tekst); border-radius: 5px; padding: 3px 9px; font-size: 12px; cursor: pointer; margin: 2px 4px 2px 0; }
.knop:hover { background: var(--m-hover); text-decoration: none; }
.knop.prim { background: var(--m-graf); border-color: var(--m-graf); color: #fff; }
.knop.signaal { background: var(--m-signaal); border-color: var(--m-signaal-donker); color: var(--m-signaal-inkt); font-weight: 600; }
.knop.rood { color: var(--m-rood); border-color: var(--m-rood-rand); }
.knop.aan { background: var(--m-staal); border-color: var(--m-staal); color: #fff; }
.segment { display: inline-flex; border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); overflow: hidden; background: var(--m-vlak); }
.segment a { padding: 3px 10px; font-size: 12px; color: var(--m-tekst); border-right: 1px solid var(--m-lijn); }
.segment a:last-child { border-right: 0; }
.segment a.aan { background: var(--m-staal); color: #fff; }
.segment a:hover { text-decoration: none; background: var(--m-hover); }
.segment a.aan:hover { background: var(--m-staal); }
.balkje { height: 5px; background: var(--m-lijn-zacht); border-radius: 3px; overflow: hidden; }
.balkje i { display: block; height: 100%; background: var(--m-blauw); }

/* ---------- grid (lijst) ---------- */
.grid-wrap { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); overflow: auto; max-height: calc(100vh - 220px); }
.grid-wrap.laag { max-height: none; }
table.rgrid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.rgrid th { position: sticky; top: 0; z-index: 2; background: var(--m-staal); color: #fff; font-weight: 600; text-align: left; padding: 6px 8px; white-space: nowrap; cursor: pointer; user-select: none; border-right: 1px solid rgba(255, 255, 255, .12); }
.rgrid th .ti { width: 13px; height: 13px; opacity: .85; }
.rgrid tr.filterrij td { position: sticky; top: 29px; z-index: 2; background: var(--m-staal-licht); padding: 3px 4px; border-bottom: 1px solid var(--m-lijn); }
.rgrid tr.filterrij input { width: 100%; min-width: 50px; border: 1px solid var(--m-lijn); border-radius: 4px; background: var(--m-vlak); color: var(--m-tekst); font-size: 12px; padding: 1px 5px; }
.rgrid td { padding: 0 8px; height: var(--m-rij); border-bottom: 1px solid var(--m-lijn-zacht); white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.rgrid td.wrap { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
.rgrid tbody tr { cursor: default; }
.rgrid tbody tr:hover td { background: var(--m-hover); }
.rgrid tbody tr.sel td { background: var(--m-sel); }
.rgrid tbody tr.r-blok td:first-child, .rgrid tbody tr.r-acht td:first-child { box-shadow: inset 3px 0 0 var(--m-rood); }
.rgrid tbody tr.r-acht td:first-child { box-shadow: inset 3px 0 0 var(--m-oranje); }
.rgrid tbody tr.r-ok td { background: var(--m-groen-zacht); }
.rgrid td.velcel { cursor: text; } /* slimvel: klik een cel om te wijzigen */
.rgrid td.velcel:hover { background: var(--m-hover); }
.rgrid td.velcel input, .rgrid td.velcel select { font: inherit; }
.rgrid td.laat { color: var(--m-rood); font-weight: 600; }
.rgrid tr.groepkop td { background: var(--m-staal-zacht); font-weight: 650; height: 26px; }
.rgrid td.num, .rgrid th.num { text-align: right; }
.duim { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--c, #7a8794); color: #fff; vertical-align: middle; }
.duim .ti { width: 14px; height: 14px; }
.grid-voet { display: flex; gap: 12px; align-items: center; padding: 5px 2px; font-size: 12px; color: var(--m-dim); }

.ctx { position: fixed; z-index: 60; min-width: 230px; background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); box-shadow: var(--m-schaduw); padding: 4px 0; font-size: 12.5px; }
.ctx a { display: flex; align-items: center; gap: 8px; padding: 5px 12px; color: var(--m-tekst); }
.ctx a:hover { background: var(--m-hover); text-decoration: none; }
.ctx hr { margin: 4px 0; border-color: var(--m-lijn-zacht); opacity: 1; }

/* ---------- kaart (detailformulier) ---------- */
.kaartkop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; gap: 4px 22px; background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); padding: 12px 14px; }
.veld { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 26px; }
.veld label { color: var(--m-dim); font-size: 12px; margin: 0; }
.veld .w { background: var(--m-staal-zacht); border: 1px solid var(--m-lijn-zacht); border-radius: 4px; padding: 2px 7px; min-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veld .w.zoek { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.veld .w.zoek .ti { color: var(--m-dim); width: 14px; height: 14px; }
.beeld { grid-row: span 5; border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); background: linear-gradient(160deg, var(--m-staal-zacht), var(--m-staal-licht)); display: grid; place-items: center; text-align: center; color: var(--m-dim); font-size: 11px; min-height: 130px; padding: 8px; }
.beeld svg.machine { width: 150px; height: 90px; }
.kaarttabs { display: flex; gap: 0; margin: 12px 0 0; border-bottom: 1px solid var(--m-lijn); overflow-x: auto; }
.kaarttabs a { padding: 7px 12px; color: var(--m-dim); font-size: 12.5px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.kaarttabs a:hover { color: var(--m-tekst); text-decoration: none; }
.kaarttabs a.aan { color: var(--m-tekst); font-weight: 650; border-bottom-color: var(--m-signaal); }
.kaarttab-inhoud { padding-top: 12px; }
.sub { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); overflow: hidden; background: var(--m-vlak); }
.sub nav { background: var(--m-staal-zacht); border-right: 1px solid var(--m-lijn); padding: 6px 0; }
.sub nav a { display: block; padding: 5px 12px; color: var(--m-tekst); font-size: 12.5px; }
.sub nav a.aan { background: var(--m-staal); color: #fff; }
.sub nav a:hover { text-decoration: none; }
.sub > div { padding: 10px; min-width: 0; }
.def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 5px 12px; font-size: 12.5px; margin: 0; }
.def dt { color: var(--m-dim); font-weight: 400; }
.def dd { margin: 0; }

/* fasen en ketens */
.fasen { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 0; }
.fase { flex: 1; min-width: 86px; text-align: center; font-size: 11.5px; position: relative; color: var(--m-dim); }
.fase .bol { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 4px; background: var(--m-lijn); color: var(--m-tekst); font-weight: 700; line-height: 24px; font-size: 11px; position: relative; z-index: 1; }
.fase.klaar { color: var(--m-tekst); }
.fase.klaar .bol { background: var(--m-graf); color: #fff; }
.fase.nu { color: var(--m-tekst); font-weight: 650; }
.fase.nu .bol { background: var(--m-signaal); color: var(--m-signaal-inkt); }
.fase:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--m-lijn); }
.fase .geld { color: var(--m-oranje); font-weight: 700; }
.keten { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 11.5px; }
.keten span { padding: 1px 8px; border-radius: 10px; background: var(--m-lijn-zacht); color: var(--m-dim); }
.keten span.klaar { background: var(--m-staal-licht); color: var(--m-tekst); }
.keten span.nu { background: var(--m-signaal); color: var(--m-signaal-inkt); font-weight: 600; }
.keten i { color: var(--m-dim); font-style: normal; }

/* ---------- home ---------- */
.home { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.tegels { display: grid; gap: 8px; }
.tegel { display: flex; align-items: center; gap: 10px; color: #fff; background: var(--c); border-radius: var(--m-radius); padding: 12px; min-height: 58px; cursor: pointer; border: 0; text-align: left; font-size: 13px; font-weight: 600; }
.tegel:hover { filter: brightness(1.07); }
.tegel .plus { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.tellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.teller { display: flex; gap: 10px; align-items: center; background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 10px 12px; cursor: pointer; text-align: left; color: var(--m-tekst); }
.teller:hover { border-color: var(--m-staal); }
.teller .ti { color: var(--c, var(--m-staal)); width: 20px; height: 20px; }
.teller b { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--c, var(--m-tekst)); }
.teller b.nul { color: var(--m-lijn); }
.teller span { font-size: 12px; color: var(--m-dim); }
.kolommen3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kol { background: var(--m-staal-zacht); border-radius: var(--m-radius-knop); padding: 6px; min-height: 50px; }
.kol-kop { font-size: 12px; font-weight: 650; margin: 0 0 5px; }
.tk { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 6px 8px; margin-bottom: 5px; cursor: pointer; font-size: 12.5px; }
.tk:hover { border-color: var(--m-staal); }
.tk.blok { border-color: var(--m-rood-rand); background: var(--m-rood-zacht); }
.tk.acht { border-color: var(--m-oranje); border-style: dashed; }
.tk.routine { color: var(--m-dim); }
.tk .m { font-size: 11px; color: var(--m-dim); margin-top: 2px; }
.tk .b { font-size: 11px; color: var(--m-rood); font-weight: 600; margin-top: 2px; }
.bord { display: grid; grid-template-columns: 130px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: start; }
.bord .kop { font-weight: 650; padding: 4px; }
.bord .naam { font-weight: 600; padding: 6px 4px; }

/* ---------- agenda ---------- */
.maand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--m-lijn); border-top: 1px solid var(--m-lijn); background: var(--m-vlak); }
.maand > div { border-right: 1px solid var(--m-lijn); border-bottom: 1px solid var(--m-lijn); min-height: 92px; padding: 4px; font-size: 12px; min-width: 0; }
.maand .dk { min-height: 0; font-weight: 650; text-align: center; color: var(--m-dim); background: var(--m-staal-zacht); }
.maand .buiten { color: var(--m-lijn); }
.maand .vandaag { box-shadow: inset 0 0 0 2px var(--m-signaal); }
.ev { display: block; border-left: 3px solid var(--c); background: var(--m-staal-zacht); border-radius: 3px; padding: 1px 5px; margin-bottom: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--m-tekst); }
.ev.bel { font-weight: 700; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week .dag { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); padding: 6px; min-height: 260px; min-width: 0; }
.week .dag.vandaag { box-shadow: inset 0 0 0 2px var(--m-signaal); }
.week .dag.weekend { background: var(--m-staal-zacht); }
.week .dag .ev { white-space: normal; }

/* ---------- planbord (gantt) ---------- */
.gantt { --wk: 74px; background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); overflow: auto; }
.g-rij { display: grid; grid-template-columns: 250px max-content; width: max-content; min-width: 100%; border-bottom: 1px solid var(--m-lijn-zacht); min-height: 30px; }
.g-rij.kop { position: sticky; top: 0; z-index: 3; background: var(--m-staal); color: #fff; font-weight: 600; font-size: 11.5px; min-height: 26px; }
.g-rij.g-sub .g-naam { padding-left: 26px; color: var(--m-dim); }
.g-naam { padding: 5px 10px; position: sticky; left: 0; background: inherit; z-index: 2; border-right: 1px solid var(--m-lijn); background: var(--m-vlak); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-rij.kop .g-naam { background: var(--m-staal); }
.g-tijd { position: relative; }
.g-weken { display: flex; height: 100%; }
.g-weken span { flex: 0 0 var(--wk); border-right: 1px solid var(--m-lijn-zacht); padding: 4px 6px; }
.g-rij.kop .g-weken span { border-color: rgba(255, 255, 255, .15); }
.g-balk { position: absolute; top: 6px; height: 18px; border-radius: 4px; background: var(--c, var(--m-staal)); color: #fff; font-size: 11px; line-height: 18px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.g-balk.leeg { background: transparent; box-shadow: inset 0 0 0 1px var(--c); color: var(--c); }
.g-balk.nu { box-shadow: 0 0 0 2px var(--m-signaal); }
.g-balk[draggable="true"] { cursor: grab; }
.g-gate { position: absolute; top: 9px; width: 12px; height: 12px; background: var(--m-signaal); border: 1px solid var(--m-signaal-donker); transform: rotate(45deg); cursor: pointer; }
.g-nu { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--m-rood); z-index: 1; }
.g-cel-drop { position: absolute; top: 0; bottom: 0; }

/* ---------- werkplaats: bonnen in kaartweergave (zelfde scherm op kantoor en op de gedeelde tablet) ---------- */
.wp { max-width: 1240px; }
.wp-balk { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.wp-zoek { font-size: 13px; padding: 4px 8px; border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); background: var(--m-vlak); color: var(--m-tekst); min-width: 240px; }
.wp .kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wp .kol { min-height: 300px; padding: 8px; }
.wp-kaart { background: var(--m-vlak); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 12px; margin-bottom: 10px; font-size: 14px; }
.wp-kaart.blok { border-color: var(--m-rood-rand); }
.wp-kop { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wp-kop h3 { font-size: 15px; margin: 2px 0; line-height: 1.3; }
.wp-beeld .duim { width: 44px; height: 44px; border-radius: 10px; }
.wp-beeld .duim .ti, .wp-beeld > .ti { width: 22px; height: 22px; }
.wp-beeld > .ti { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--m-staal-zacht); color: var(--m-staal); padding: 10px; }
.wp-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wp-knoppen .knop { font-size: 14px; padding: 8px 14px; margin: 0; }
@media (max-width: 1000px) { .wp .kanban { grid-template-columns: minmax(0, 1fr); } }
/* ---------- snack (bestelpagina) ---------- */
.snack-info { background: var(--m-staal-zacht); border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 9px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.snack-info .ti { vertical-align: -3px; margin-right: 4px; }
.snack-winkels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.snack-winkel { display: flex; align-items: center; gap: 10px; border: 1px solid var(--m-lijn); background: var(--m-vlak); color: var(--m-tekst); border-radius: var(--m-radius); padding: 8px 14px; cursor: pointer; min-width: 150px; position: relative; }
.snack-winkel:hover { background: var(--m-hover); text-decoration: none; }
.snack-winkel.aan { border-color: var(--m-merk); box-shadow: inset 0 0 0 1px var(--m-merk); }
.snack-winkel .ti { width: 22px; height: 22px; color: var(--m-merk); }
.snack-winkel span { display: flex; flex-direction: column; line-height: 1.25; }
.snack-winkel small { color: var(--m-dim); font-size: 11.5px; display: inline-flex; gap: 3px; align-items: center; }
.snack-winkel small .ti { width: 12px; height: 12px; color: var(--m-dim); }
.snack-winkel em { font-style: normal; margin-left: auto; background: var(--m-merk); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; line-height: 18px; }
.snack-rij { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
@media (max-width: 1000px) { .snack-rij { grid-template-columns: minmax(0, 1fr); } }
.snack-art { display: grid; grid-template-columns: minmax(0, 1fr) 70px 112px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--m-lijn-zacht); font-size: 13px; }
.snack-art.in { background: var(--m-merk-zacht); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.snack-prijs { text-align: right; color: var(--m-dim); }
.plusmin { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.plusmin button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--m-lijn); background: var(--m-vlak); color: var(--m-tekst); cursor: pointer; display: grid; place-items: center; }
.plusmin button:hover { background: var(--m-hover); }
.plusmin button:disabled { opacity: .35; cursor: default; }
.plusmin b { min-width: 18px; text-align: center; font-size: 15px; }
.snack-sauzen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.snack-sauzen .chip { cursor: pointer; font-size: 11.5px; }
.snack-mandje { position: sticky; top: 0; }
.snack-regel { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--m-lijn-zacht); font-size: 13px; }
.snack-regel.totaal { border-bottom: 0; font-weight: 650; margin-top: 4px; font-size: 14px; }
@media print { .snack-info, .snack-winkels, .paginakop .rechts { display: none !important; } }
/* inloggen met pincode op de gedeelde tablet */
.pin-vlak { max-width: 420px; margin: 20px auto 0; text-align: center; }
.pin { display: grid; grid-template-columns: repeat(3, 88px); gap: 10px; justify-content: center; margin: 18px 0; }
.pin button { height: 66px; font-size: 24px; border-radius: 10px; border: 1px solid var(--m-lijn); background: var(--m-vlak); color: var(--m-tekst); cursor: pointer; }
.pin button:hover { background: var(--m-hover); }
/* aanraakschermen (tablet): dezelfde schermen, grotere doelen (minstens 44 px); geen aparte stijl */
@media (pointer: coarse) {
  :root { --m-rij: 44px; }
  .groep > button, .groep.enkel > a { min-height: 46px; font-size: 15px; }
  .groep li a { min-height: 44px; font-size: 15px; align-items: center; }
  .wb, .knop, .segment a, .kaarttabs a, .sub nav a, .chip, .teller, .tegel, .kopknop { min-height: 44px; }
  .wb { padding: 8px 10px; font-size: 14px; }
  .knop { padding: 10px 16px; font-size: 14px; }
  .segment a { padding: 10px 14px; font-size: 14px; display: inline-flex; align-items: center; }
  .kaarttabs a { padding: 12px 14px; font-size: 14px; }
  .rgrid td { height: var(--m-rij); font-size: 14px; }
  .rgrid tr.filterrij input, .wp-zoek, input[type="text"], input[type="number"], select.klein { min-height: 40px; font-size: 15px; }
  .wp-knoppen .knop { min-height: 48px; padding: 10px 18px; font-size: 15px; }
  .pin button { height: 76px; font-size: 28px; }
  .plusmin button { width: 44px; height: 44px; }
  .snack-winkel { min-height: 52px; }
  .tk, .wp-kaart { padding: 12px 14px; }
  .kopbalk select { min-height: 40px; font-size: 14px; }
}

/* ---------- analytics ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { border: 1px solid var(--m-lijn); background: var(--m-vlak); border-radius: 14px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--m-tekst); }
.chip.aan { background: var(--m-graf); border-color: var(--m-graf); color: #fff; }
.kpi b { display: block; font-size: 26px; font-weight: 700; }
.kpi span { color: var(--m-dim); font-size: 12px; }
svg.staaf text { font-size: 10px; fill: var(--m-dim); }
svg.staaf .w { fill: var(--m-tekst); font-weight: 600; }

/* ---------- modals ---------- */
.m-modal { position: fixed; inset: 0; background: rgba(17, 23, 30, .5); display: flex; align-items: flex-start; justify-content: center; padding-top: 7vh; z-index: 50; }
.m-doos { background: var(--m-vlak); color: var(--m-tekst); border-radius: var(--m-radius); width: min(780px, 94vw); max-height: 84vh; overflow: auto; padding: 18px 20px; box-shadow: var(--m-schaduw); border: 1px solid var(--m-lijn); }
.m-doos h2 { font-size: 16px; margin: 0 0 8px; }
.m-doos h3 { font-size: 13px; margin: 14px 0 6px; }
.m-sluit { float: right; background: none; border: 0; color: var(--m-dim); cursor: pointer; }
.zoekres a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 5px; color: var(--m-tekst); }
.zoekres a.sel, .zoekres a:hover { background: var(--m-sel); text-decoration: none; }
.zoekres .soort { margin-left: auto; font-size: 11px; color: var(--m-dim); }
input.zoekveld { width: 100%; font-size: 15px; padding: 8px 10px; border: 1px solid var(--m-lijn); border-radius: var(--m-radius-knop); background: var(--m-vlak); color: var(--m-tekst); }
.aanpas-lijst li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--m-lijn-zacht); }
.aanpas-lijst { list-style: none; padding: 0; margin: 0; }
.melding-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--m-graf); color: #fff; padding: 8px 14px; border-radius: var(--m-radius-knop); z-index: 70; box-shadow: var(--m-schaduw); font-size: 13px; }

table.eenvoud { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.eenvoud th { text-align: left; color: var(--m-dim); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--m-lijn); padding: 5px 6px; }
table.eenvoud td { border-bottom: 1px solid var(--m-lijn-zacht); padding: 5px 6px; vertical-align: top; }
table.eenvoud tr.klik:hover td { background: var(--m-hover); cursor: pointer; }
input[type="text"], input[type="number"], select.klein { font-size: 12px; padding: 2px 6px; border: 1px solid var(--m-lijn); border-radius: 4px; background: var(--m-vlak); color: var(--m-tekst); }

@media print {
  .menu, .kopbalk, .werkbalk { display: none !important; }
  .app { display: block; height: auto; }
  .inhoud { overflow: visible; }
  .grid-wrap { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* notificaties: bel, matrix, voorbeeldmail */
.kopknop.bel { position: relative; }
.bel-tel { position: absolute; top: -2px; right: -4px; background: var(--m-signaal); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 0 5px; line-height: 15px; }
.bel-lijst { display: grid; gap: 4px; }
.bel-item { border: 1px solid var(--m-lijn-zacht); border-left: 3px solid var(--m-signaal); border-radius: var(--m-radius); padding: 6px 8px; cursor: pointer; font-size: 13px; }
.bel-item:hover { background: var(--m-hover); }
.bel-item.gelezen { border-left-color: var(--m-lijn); opacity: .65; }
.n-rij { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
table.nmatrix th.nk, table.nmatrix td.nk { text-align: center; white-space: nowrap; width: 1%; }
table.nmatrix tr.ngroep td { font-weight: 600; font-size: 11.5px; color: var(--m-staal); padding-top: 10px; border-bottom: 1px solid var(--m-lijn); }
table.eenvoud tr.gekozen td { background: var(--m-hover); }
.nvink { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.nvink.slot .ti { width: 12px; height: 12px; color: var(--m-dim); }
.klein-tellers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.klein-tellers .teller { cursor: default; padding: 8px; }
.mailvoorbeeld { border: 1px solid var(--m-lijn); border-radius: var(--m-radius); padding: 10px 12px; background: var(--m-bg); }
.mail-onderwerp { font-weight: 600; margin-top: 4px; }
.n-beheer { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 1100px) { .n-rij, .n-beheer { grid-template-columns: 1fr; } }
/* Taakoverzicht: personen of rollen aanvinken */
.vinkrij { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.vink { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.vink input { accent-color: var(--m-merk); }
.vinkrij .scheid { width: 1px; height: 18px; background: var(--m-lijn); }
.kaartkop .foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 96px; background: var(--m-staal-zacht); border: 1px dashed var(--m-lijn); border-radius: var(--m-radius); color: var(--m-dim); font-size: 12px; }

/* ---------- ETA-gevolgen en voorstel om te schuiven (besluiten 2026-10-02) ---------- */
.rgrid tbody tr.r-gevaar td { background: var(--m-oranje-zacht); }
.rgrid tbody tr.r-gevaar td:first-child { box-shadow: inset 3px 0 0 var(--m-oranje); }
.g-balk.gevaar { box-shadow: 0 0 0 2px var(--m-rood); }
.g-balk.spook { background: transparent; color: var(--m-rood); border: 1.5px dashed var(--m-rood); line-height: 15px; z-index: 2; }
.g-gate.spook { background: transparent; border: 2px dashed var(--m-rood); }
.wp-kaart.gevaar { border-color: var(--m-oranje); box-shadow: inset 4px 0 0 var(--m-oranje); }
.gevaar-regel { font-size: 12.5px; color: var(--m-oranje); font-weight: 600; }
.vlak.gevaar { border-color: var(--m-oranje); }
table.eenvoud tr.groep td { background: var(--m-staal-zacht); font-weight: 650; font-size: 12px; padding-top: 7px; }
table.eenvoud tr.schuift td { background: var(--m-oranje-zacht); }
table.eenvoud tr.afw td { background: var(--m-oranje-zacht); }
table.eenvoud input[type="date"] { font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
.knop.uit { opacity: .5; cursor: not-allowed; }
.rij4 .kpi b, .eta-datums .kpi b { white-space: nowrap; }

/* ---------- Home > Planning (PL1 tot PL5) ---------- */
.plan-balk { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 8px; }
.plan-groep { display: inline-flex; gap: 6px; align-items: center; }
.plan-label { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--m-dim); }
.plan-reset { margin-left: auto; }
.plan-soorten { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.plan-titel { font-size: 15px; margin: 0 0 8px; }
.plan-loc { display: inline-block; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--c); border-radius: 4px; padding: 0 5px; margin-bottom: 2px; }
.wk-dag .ev { font-size: 10.5px; max-width: 112px; }
.wk-backlog { border: 1px dashed var(--m-lijn); border-radius: var(--m-radius-knop); padding: 6px 8px; margin-bottom: 8px; background: var(--m-vlak); }
.wk-backlog-rij { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wk-backlog-rij .wk-blok { min-width: 150px; }
.plan-link { margin-right: 8px; }

/* ---------- Magazijn: voorraadverloop en Te bestellen (MG1 tot MG7) ---------- */
.mg-svg { display: block; max-width: 900px; margin: 6px 0 4px; }
.mg-svg text { font-size: 10px; fill: var(--m-dim); }
.mg-raster { stroke: var(--m-lijn-zacht); }
.mg-nul { stroke: var(--m-tekst); stroke-width: 1.2; }
.mg-min { stroke: var(--m-oranje); stroke-width: 1.2; stroke-dasharray: 6 3; }
.mg-svg .mg-min-t { fill: var(--m-oranje); }
.mg-vandaag { stroke: var(--m-signaal); stroke-width: 1.5; }
.mg-tekort { stroke: var(--m-rood); stroke-width: 1.5; stroke-dasharray: 2 2; }
.mg-svg .mg-tekort-t { fill: var(--m-rood); font-weight: 650; }
.mg-uit { stroke: var(--m-oranje); stroke-width: 1.5; }
.mg-svg .mg-uit-t { fill: var(--m-oranje); font-weight: 650; }
.mg-lijn-hard { fill: none; stroke: var(--m-staal); stroke-width: 2.2; }
.mg-lijn-totaal { fill: none; stroke: var(--m-merk); stroke-width: 2; stroke-dasharray: 5 4; }
.mg-knik { fill: var(--m-merk); stroke: var(--m-vlak); stroke-width: 1.5; cursor: help; }
.mg-knik.zacht { fill: var(--m-vlak); stroke: var(--m-merk); }
.mg-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--m-dim); }
.mg-l { display: inline-block; width: 22px; height: 0; border-top: 2.2px solid var(--m-staal); vertical-align: middle; }
.mg-l.totaal { border-top: 2px dashed var(--m-merk); }
.mg-l.nul { border-top: 1.2px solid var(--m-tekst); }
.mg-l.min { border-top: 1.2px dashed var(--m-oranje); }
table.eenvoud tr.mg-zacht td { color: var(--m-dim); font-style: italic; }
table.eenvoud tr.mg-onder td { background: var(--m-rood-zacht); }
table.eenvoud tr.mg-start td { background: var(--m-staal-zacht); }
.mg-kpi .kpi.mg-rood b { color: var(--m-rood); }

/* ---------- Bonnen uit de BOM (BB1 tot BB4) ---------- */
.bb-balk { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 6px; }
.bb-boom tr.bb-hand td { background: var(--m-staal-zacht); font-size: 12px; }
.bb-boom tr.bb-maakdeel td:first-child { box-shadow: inset 3px 0 0 var(--m-merk); }
.bb-boom input.bb-n { width: 56px; font-size: 12px; padding: 1px 4px; border: 1px solid var(--m-lijn); border-radius: 5px; background: var(--m-vlak); color: var(--m-tekst); }
.bb-knop { display: inline-flex; padding: 2px 3px; color: var(--m-dim); cursor: pointer; }
.bb-knop:hover { color: var(--m-merk); }
.bb-boom a.klein.dim { color: var(--m-dim); text-decoration: none; }