/* dashboard.css — desktop dashboard layout
   Opmaak loopt via de tokenlaag (tokens.css): lettergroottes via de
   typestappen (--text-*), afstanden via de ruimteschaal (--space-*), radius
   via de radiusladder en schaduwen via --shadow-*. Geometrie blijft in
   pixels: sidebarbreedte, kolombreedtes, hoogtes, posities en de grenzen
   van de mediaquery's. tests/css-schaal.test.mjs bewaakt de rest. */

body.dashboard {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr;
  min-height: 100vh;
}

/* ── zijmenu: het witte menu (richting Rust) ─────────────────────────────
   Herontwerp van 22-10-2026 (docs/mockups/2026-10-herontwerp, richting A):
   een wit vlak met een lijn naar de inhoud, het menu in groepen met
   lijniconen, het actieve item in een zacht accentvlak en de gebruiker
   onderin. De nav-tokens in tokens.css volgen het accent van de klant. */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-right: 1px solid var(--nav-line);
  overflow: hidden;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.sidebar .brand-logo {
  width: 100%;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
.sidebar .brand-mark {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-chip);
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--accent-ink);
  font-family: var(--font-head);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-heading); /* hoort bij het woordmerk */
}
.sidebar .brand h1 {
  font-size: var(--text-body-lg);
  line-height: 1.2;
  font-weight: var(--weight-title);
  color: var(--nav-ink);
}
.sidebar .brand p {
  margin: 0;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--nav-ink-dim);
}

/* het menu: groepen met een kopje, items met een lijnicoon */
.nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.nav-groep { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.nav-groep[hidden] { display: none; }
.nav-kop {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-family: var(--font-head);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--nav-ink-dim);
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) + var(--space-1) / 2);
  min-height: 30px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  color: color-mix(in srgb, var(--nav-ink) 84%, var(--nav-bg));
  font-family: var(--font-head);
  font-size: var(--text-body-sm);
  font-weight: 500; /* tussen body en label in, zoals het menu van Rust */
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav a:hover { color: var(--nav-ink); background: var(--nav-bg-2); text-decoration: none; }
.nav a:focus-visible { outline: var(--focus-width) solid var(--nav-accent); outline-offset: calc(-1 * var(--focus-width)); }
.nav a.active { color: var(--nav-accent); background: var(--nav-active); font-weight: var(--weight-title); }
.nav a .ico { width: 18px; height: 18px; flex: none; color: var(--nav-ink-dim); }
.nav a:hover .ico { color: var(--nav-ink); }
.nav a.active .ico { color: var(--nav-accent); }
.nav a .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a[hidden], .nav a.admin-only[hidden] { display: none; }
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-title);
  line-height: 18px;
  text-align: center;
}
.nav-badge[hidden] { display: none; }

/* de gebruiker onderin het menu, met de omgeving en de vaste knoppen */
.side-user {
  margin-top: auto;
  display: grid;
  gap: var(--space-2);
  margin-inline: var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-top: 1px solid var(--nav-line);
}
.user-chip { display: flex; align-items: center; gap: calc(var(--space-2) + var(--space-1) / 2); min-width: 0; }
.user-chip .avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--nav-active);
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 700; /* initialen blijven vet, zoals voor de tokenlaag */
  font-size: var(--text-label);
  color: var(--nav-accent);
}
.user-chip .who { min-width: 0; line-height: 1.2; }
.user-chip .who b {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-title);
  color: var(--nav-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .who span { font-size: var(--text-label); color: var(--nav-ink-dim); text-transform: capitalize; }
.side-acties { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.side-acties .btn-ghost { color: var(--nav-ink-dim); gap: var(--space-1); }
.side-acties .btn-ghost:hover { color: var(--nav-ink); background: var(--nav-bg-2); }
.side-acties .btn-ghost:focus-visible { outline-color: var(--nav-accent); }
.side-user .ico { width: 16px; height: 16px; flex: none; }
/* Uitloggen staat als icoon naast de gebruiker, zoals in Rust; de naam staat in aria-label en title */
#btn-logout { margin-left: auto; color: var(--nav-ink-dim); }
#btn-logout:hover { color: var(--nav-ink); background: var(--nav-bg-2); }

/* omgevingschip: live, testomgeving of platform. Het bolletje zegt het ook
   voor wie de tekst niet ziet (smal scherm). */
.omg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--nav-bg-2);
  border: 1px solid var(--nav-line);
  color: var(--nav-ink-dim);
  font-family: var(--font-head);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  font-weight: var(--weight-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  white-space: nowrap;
}
.omg-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
/* de tekst krijgt een kwart inkt: puur amber op het ambervlak haalt maar 3,5:1 */
.omg-chip.test { background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: color-mix(in srgb, var(--amber) 72%, var(--ink)); }
.omg-chip.test::before { background: var(--amber); }
.omg-chip.platform::before { background: var(--nav-accent); }

/* ── kopbalk + inhoud ───────────────────────────────────────────────────
   De kop van Rust: het kruimelpad (menugroep / scherm) boven de titel. De
   balk blijft 64 px hoog en plakt bovenaan; Instellingen rekent daarmee
   (.set-nav, scroll-margin-top). */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--space-8);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.page-kop { display: grid; gap: calc(var(--space-1) / 2); min-width: 0; }
.page-groep {
  font-family: var(--font-head);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-groep[hidden] { display: none; }
.topbar h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* smaller dan 1000 px past een lange titel (Actiecentrum, Inkoop) niet meer op
   de grote stap naast de knoppen; dan de stap eronder, zoals voor 22-10-2026 */
@media (max-width: 1000px) {
  .topbar h2 { font-size: var(--text-title-sm); line-height: var(--leading-title-sm); letter-spacing: var(--tracking-title-sm); }
}
.topbar-acties { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.topbar-acties .ico { width: 18px; height: 18px; flex: none; }
.badge-readonly {
  display: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-role="monteur"] .badge-readonly,
body[data-role="werkplaats"] .badge-readonly,
body[data-role="management"] .badge-readonly { display: inline-flex; }
/* werkplaats meldt voertuigen binnen en uit in Voertuigen: daar is het scherm niet alleen lezen */
body[data-role="werkplaats"][data-scherm="voertuigen"] .badge-readonly { display: none; }

.content { padding: var(--space-6) var(--space-8) var(--space-10); display: none; }
.content.active { display: block; }

/* role gating: management-only controls disappear for monteur */
/* rolgating (matrix in migratie 0020):
   beheer-only  = beheer + admin (correcties, instellingen, KPI-cockpit)
   stamdata-only = administratie + beheer + admin (artikelen/prijzen/locaties/verwacht)
   uren-only    = de urenrollen van isUren (Urenoverzichten; de server filtert per shop)
   (Voertuigen staat zonder klasse open voor elke rol, besluit 22-10-2026; buiten de stamdatarollen alleen lezen)
   dossiers-only = de kring van fn_dossiers_rollen (isDossiers: alle portalrollen behalve de monteur): Dossiers
   admin-only   = alleen admin (gebruikers, beveiliging, alles wissen) */
body[data-manager="0"] .beheer-only { display: none !important; }
body[data-stamdata="0"] .stamdata-only { display: none !important; }
body[data-uren="0"] .uren-only { display: none !important; }
body[data-dossiers="0"] .dossiers-only { display: none !important; }
body[data-admin="0"] .admin-only { display: none !important; }

/* ── onderdelen in Rust (herontwerp stap 2) ──────────────────────────────
   Knoppen, panelen, tabellen en velden van het portaal volgen richting A
   van het herontwerp: knoppen met de chipradius in plaats van een pil,
   panelen zonder zwevende schaduw, kolomkoppen en veldlabels in gewone
   zinsletters. De basis staat in tokens.css; deze regels gelden alleen in
   het portaal (index.html), zodat het inloggen en de scanner hun eigen
   stap houden. Chips blijven in hoofdletters: hun teksten komen vaak klein
   uit de data ("inactief", "aangepast"). */
.btn {
  border-radius: var(--radius-chip);
  font-weight: 600;
  letter-spacing: 0;
}

.panel {
  border-radius: var(--radius-field);
  box-shadow: none;
}
.panel > header { min-height: 52px; }
.panel > header h3 {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--weight-title);
  letter-spacing: 0;
  text-transform: none;
}

.tbl th {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
  background: var(--panel-2);
}
/* de vaste knoppenkolom van Instellingen kleurt zijn cellen wit; de kop houdt de kopkleur */
.set-paneel .tbl:has(td:last-child > .btn) thead tr > :last-child { background: var(--panel-2); }

label.field > span {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
input[type="text"], input[type="search"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="url"], select, textarea {
  border-radius: var(--radius-chip);
}

/* ── KPI strip ───────────────────────────────────────────────────────────
   De tegel van Rust: het label boven het getal, geen streep meer aan de
   zijkant. De toon (k-*) kleurt het getal; een derde regel (context) staat
   eronder. */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) + var(--space-1) / 2);
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  padding: var(--space-4) var(--space-5);
}
.kpi .kpi-num {
  font-family: var(--font-head);
  font-size: var(--text-heading);
  font-weight: var(--weight-title);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; /* een groot bedrag breekt liever dan dat het de tegel uit loopt */
  color: var(--kpi-ink, var(--ink));
}
.kpi .kpi-label {
  order: -1;
  overflow-wrap: anywhere; /* een lang woord ("afschrijvingsgegevens") blijft binnen de tegel */
  hyphens: auto;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--weight-label);
  color: var(--ink-dim);
}
.kpi.k-amber { --kpi-accent: var(--amber); --kpi-ink: var(--amber); }
.kpi.k-red   { --kpi-accent: var(--red);   --kpi-ink: var(--red); }
.kpi.k-blue  { --kpi-accent: var(--blue);  --kpi-ink: var(--blue); }
.kpi.k-green { --kpi-accent: var(--green); --kpi-ink: var(--green); }
.kpi.k-teal  { --kpi-accent: #1F7A6F;      --kpi-ink: #1F7A6F; }
/* telefoon: twee tegels naast elkaar en een kleiner getal, zodat de inhoud
   van het scherm niet pas na een hele kolom tegels begint */
@media (max-width: 600px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
  .kpi { padding: var(--space-3); gap: var(--space-1); }
  .kpi .kpi-num { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
}

/* ── dashboard panels grid ─────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-grid .span-2 { grid-column: 1 / -1; }

/* live feed */
.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body-sm);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item .when { margin-left: auto; flex: none; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-caption); }
.feed-item.fresh { animation: feed-in .5s ease-out; }
@keyframes feed-in { from { background: var(--accent-dim); } }

/* ── toolbars boven tabellen ───────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.toolbar input[type="search"] { max-width: 260px; }
.toolbar select { width: auto; min-width: 140px; }
.toolbar input[type="date"] { width: auto; }

/* stock table article grouping */
tr.article-row td { background: var(--panel); font-weight: 600; }
tr.article-row td:first-child { border-left: 2px solid var(--accent); }
tr.loc-row td { color: var(--ink); }
tr.loc-row td:first-child { padding-left: var(--space-6); }
tr[hidden] { display: none; }
/* label.field zet display: block (tokens.css); hidden moet dan expliciet winnen */
label.field[hidden] { display: none; }
/* keuzegroep in een dialoog (Inkoop, Document uploaden): geen browserrand */
.du-soort { border: 0; margin: 0; padding: 0; min-width: 0; }

/* verwacht: in-/uitklapbare bestellingen */
.ord-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-1) 2px 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.ord-toggle .chev { color: var(--ink-dim); font-size: var(--text-caption); width: 12px; flex: none; }
.ord-toggle:hover .chev, .ord-toggle:focus-visible .chev { color: var(--accent); }

/* urenoverzichten, Per medewerker: één tabel voor iedereen, zodat de kolommen
   recht onder elkaar staan; medewerker, dag en losse registratie springen in
   en klappen uit. Vaste kolombreedtes, de laatste kolom neemt de rest; smaller
   dan de tabel scrolt alleen de tabel, nooit de pagina */
.panel.ur-per-mw > header { flex-wrap: wrap; }
.tbl.ur-dagen { table-layout: fixed; min-width: 70rem; }  /* ruimte voor de rijknoppen van de correctielaag */
.ur-dagen .ur-k-eerste { width: 12.25rem; }
.ur-dagen .ur-k-tijd { width: 9.5rem; }    /* ook 02:00 +1–06:00 +1 (begin_plus, AFW-R.6) */
.ur-dagen .ur-k-uren { width: 5.25rem; }   /* ook een jaarsaldo als -2088,50 */
/* de eerste kolom blijft staan als de tabel smaller is dan het scherm en horizontaal scrolt;
   elke rij heeft een eigen achtergrond, die de vaste cel overneemt */
.ur-dagen tbody tr { background: var(--panel); }
.ur-dagen th:first-child, .ur-dagen td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--line); }
.ur-dagen thead tr { background: var(--panel-2); } /* de vaste eerste kolom erft de kopkleur van Rust */
.ur-dagen th, .ur-dagen td { padding-inline: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ur-dagen th { white-space: normal; vertical-align: bottom; }
.ur-dagen .ord-toggle { max-width: 100%; }
.ur-dagen .ord-toggle > b { overflow: hidden; text-overflow: ellipsis; }
.ur-dagen .ord-toggle:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: 2px; }
.ur-dagen .ur-geen-toggle { cursor: default; }
.ur-dagen tr.ur-mw, .ur-dagen tr.ur-dag-meer { cursor: pointer; }
.ur-dagen tbody.is-open > tr.ur-mw > td { background: var(--panel-2); }
.ur-dagen tr.ur-dag > td:first-child { padding-left: var(--space-6); }
.ur-dagen tr.ur-dag.is-open > td { background: var(--panel-2); border-bottom-color: transparent; }
.ur-dagen tr.ur-reg > td { background: var(--panel-2); color: var(--ink-dim); border-bottom: 1px dashed var(--line); }
.ur-dagen tr.ur-reg > td:first-child { padding-left: calc(var(--space-6) + 12px + var(--space-2)); } /* onder de datum: inspringing, pijl en tussenruimte */
.ur-dagen tr.ur-slot > td { white-space: normal; padding-left: var(--space-6); border-bottom: 1px solid var(--ink-dim); position: static; box-shadow: none; overflow: visible; }
/* de slotregel loopt over de hele breedte; de tekst blijft links in beeld als de tabel scrolt */
.ur-dagen .ur-slot-tekst { position: sticky; left: var(--space-6); display: inline-block; max-width: 36rem; }
@media (max-width: 760px) { .ur-hint { display: none; } }

/* urenoverzichten, correctielaag [AFW-6.10i]: de chip en de doorgestreepte
   WACS-tijd in de lege urenkolommen van een registratie, en de rijknoppen in
   de laatste kolom (Aanpassen/Verwijderen, of Herstellen bij een gecorrigeerde
   regel). Zie docs/mockups/2026-10-glas/02-urenoverzicht-correctie.html. */
.ur-dagen td.ur-corr { color: var(--ink-dim); }
.ur-dagen td.ur-corr .chip { margin-right: var(--space-2); }
.ur-was s { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-dim); }
.ur-dagen tr.ur-reg.is-corr > td.mono, .ur-dagen tr.ur-reg.is-corr > td.num { color: var(--ink); font-weight: var(--weight-label); }
.ur-dagen tr.ur-reg.is-weg s { color: var(--ink-dim); }
.ur-corr-tel { color: var(--amber); font-weight: var(--weight-label); }
.ur-dagen tr.ur-markeer > td { background: var(--amber-dim); }
/* soort/omschrijving links, de knoppen rechts in twee vaste vakken: vak 1
   Aanpassen, vak 2 Verwijderen of Herstellen (staat altijd rechts) */
.ur-reg-cel { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.ur-reg-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ur-reg-acties { display: grid; flex: none; grid-template-columns: minmax(5rem, max-content) minmax(5.5rem, max-content); justify-items: end; gap: var(--space-1); }
.ur-reg-acties > .btn:last-child { grid-column: 2; }
.ur-dagen .ur-reg-acties .btn, .ur-dagen .ur-plus .btn { padding-inline: var(--space-2); }
/* de knop + Registratie toevoegen onder een opengeklapte dag; blijft links in beeld als de tabel scrolt */
.ur-dagen tr.ur-plus > td { position: static; box-shadow: none; overflow: visible; padding-block: var(--space-1); background: var(--panel-2); border-bottom: 1px solid var(--line); }
.ur-dagen .ur-plus-plek { position: sticky; left: calc(var(--space-6) + var(--space-3) + var(--space-2)); display: inline-block; }

/* paneel Correcties in deze run */
.ur-corr-lijst { list-style: none; margin: 0; padding: 0; }
.ur-corr-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.ur-corr-item:last-child { border-bottom: 0; }
.ur-corr-wat { display: grid; gap: var(--space-1); min-width: 0; }
.ur-corr-wat .mono s { color: var(--ink-dim); }
.ur-corr-meta { display: grid; gap: var(--space-2); justify-items: end; text-align: right; color: var(--ink-dim); }
.ur-corr-item.is-verweesd { background: var(--amber-dim); box-shadow: inset 3px 0 0 var(--amber); }
.ur-corr-item.is-verweesd .ur-corr-meta { color: var(--ink); }

/* de dialogen van de correctielaag (openModal): reden met teller, het effect en de historie */
.ur-dlg-blok { display: grid; gap: var(--space-2); }
.ur-dlg-blok .subtable-title { margin: 0; }
.ur-effect th, .ur-effect td { padding-block: var(--space-1); }
.ur-teller { justify-self: end; }
.ur-historie { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.ur-historie li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-field); background: var(--panel-2); }

@media (max-width: 760px) {
  .ur-corr-item { grid-template-columns: minmax(0, 1fr); }
  .ur-corr-meta { justify-items: start; text-align: left; }
}
@media (max-width: 600px) {
  /* urentabel op de telefoon: een smallere vaste eerste kolom en minder
     inspringing, zodat datum en tijd in beeld staan; de rest schuift */
  .ur-dagen .ur-k-eerste { width: 9.25rem; }
  .ur-dagen tr.ur-dag > td:first-child, .ur-dagen tr.ur-slot > td { padding-left: var(--space-3); }
  .ur-dagen tr.ur-reg > td:first-child { padding-left: calc(var(--space-3) + 12px + var(--space-2)); }
  .ur-dagen .ur-plus-plek { left: calc(var(--space-3) + var(--space-3) + var(--space-2)); }
  .ur-dagen .ur-slot-tekst { left: var(--space-3); }
}

/* urenoverzichten met roosters (golf roosters-d): de roosterkop op de
   medewerkerregel en het label van de roosterdag in de laatste kolom. Op de
   medewerkerregel kapt de tekst af en blijven de correctiechips ernaast staan
   (zelfde patroon als .ur-reg-cel); een dag met een roosterlabel breekt af in
   plaats van af te kappen, met de toelichting van de koppelpunten
   (cycluscorrectie, Niet actief) op een eigen regel */
.ur-dagen .ur-rooster-kop { color: var(--ink); font-weight: var(--weight-label); }
.ur-dagen .ur-rooster-label { font-family: var(--font-mono); font-size: var(--text-label); }
.ur-mw-cel { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.ur-mw-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ur-mw-chips { flex: none; display: inline-flex; gap: var(--space-1); }
.ur-dagen td.ur-soort-rooster { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.ur-dagen .ur-rooster-toel { display: block; color: var(--ink-dim); }

/* urenoverzichten, Kwartaal (mockup 05-kwartaalexport): de keuzelijsten naast
   hun label in de werkbalk, het paneel Overuren met een vaste eerste kolom; op
   een smal scherm vallen Rooster, Contract en Opmerkingen weg en staat de
   opmerking onder de naam, met de naam en het kwartaaltotaal vast als de
   maanden niet passen. De afdrukpagina heeft een eigen stylesheet
   (uren-kwartaal.css), die het portaal zelf niet laadt. */
.toolbar label.field.kw-inline { display: inline-flex; align-items: center; gap: var(--space-1); }
.toolbar label.field.kw-inline > span { margin-bottom: 0; }
.toolbar .kw-inline select { min-width: 0; }
.panel.kw-paneel > header { flex-wrap: wrap; }
.kw-meta { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-2); }
.kw-meta > span { white-space: nowrap; }
.kw-meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.tbl.kw-tbl { min-width: 54rem; }
.kw-tbl thead tr { background: var(--panel-2); }
.kw-tbl tbody tr { background: var(--panel); }
.kw-tbl .kw-eerste { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--line); }
.kw-tbl th.kw-groep { text-align: center; }
.kw-tbl th.kw-q, .kw-tbl td.kw-q { background: var(--panel-2); }
.kw-tbl td.kw-opm { min-width: 13rem; color: var(--ink-dim); }
.kw-tbl .kw-opm-onder { display: none; }
.kw-tbl .kw-r { text-align: right; white-space: nowrap; }
.kw-tbl tr.kw-som > td { border-top: 2px solid var(--ink); border-bottom: 0; }
.kw-voorbeeld { padding-bottom: 0; }
.kw-voet { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.kw-voet p { margin: 0; max-width: 60rem; }
@media (max-width: 600px) {
  .toolbar label.field.kw-inline > span { min-width: 5.5rem; }
  .kw-meta { display: grid; justify-content: start; margin-left: 0; }
  .kw-meta > span + span::before { content: none; }
  .tbl.kw-tbl { min-width: 0; font-size: var(--text-label); }
  .kw-tbl .kw-smal-weg { display: none; }
  .kw-tbl th { font-size: var(--text-micro); letter-spacing: var(--tracking-micro); }
  .kw-tbl td.num { font-size: var(--text-caption); }
  .kw-tbl th, .kw-tbl td { padding-left: var(--space-1); padding-right: var(--space-1); }
  .kw-tbl .kw-eerste { padding-left: var(--space-2); }
  .kw-tbl .kw-q { padding-right: var(--space-2); }
  /* de naam links en het kwartaaltotaal rechts staan vast; de maanden schuiven ertussen als ze niet passen */
  .kw-tbl .kw-q { position: sticky; right: 0; z-index: 1; box-shadow: inset 1px 0 0 var(--line); }
  .kw-tbl .kw-opm-onder { display: block; font-weight: 400; color: var(--ink-dim); white-space: normal; }
}

/* detail drawer inside artikel-modal */
.subtable-title {
  margin: var(--space-2) 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* zone groepen (locaties) */
.zone-block { margin-bottom: var(--space-6); }
.zone-block > h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* instellingen: user table roles */
select.role-select { width: 130px; }
select.rows-select { width: 110px; }

/* pagination */
.pager { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

/* pills: subnavigatie binnen een tab (KPI-cockpit) */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pill {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink-dim);
  font-family: var(--font-head);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.pill:hover { color: var(--ink); background: var(--panel-2); }
.pill.sel { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* KPI-cockpit: tegels op auto-breedte (meer tegels dan het dashboard-grid) */
.kpis.kpis-auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 600px) { .kpis.kpis-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* KPI-cockpit: trendgrafiek (SVG) */
.kchart { position: relative; max-width: 1560px; margin: 0 auto; }
.kchart svg { width: 100%; height: auto; display: block; }
.kchart .kgrid { stroke: var(--line); stroke-width: 1; }
.kchart .kax { fill: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-body); }
.kchart .kval { fill: var(--ink); font-family: var(--font-head); font-size: var(--text-caption); font-weight: var(--weight-caption); }
.kchart .kbar.hot { filter: brightness(1.2); }
.kchart .kpt { opacity: 0; transition: opacity .1s; }
.kchart .kpt.hot, .kchart .kpt.kpt-end { opacity: 1; }
.kchart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-badge);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-head);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-label);
  color: var(--ink);
  white-space: nowrap;
  z-index: 5;
}
.pill .mdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); vertical-align: 0; }

/* KPI-cockpit: sorteerbare kolommen en filterbalk */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
.kfilters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.kfilters select { width: auto; min-width: 140px; max-width: 240px; }

/* KPI-cockpit: horizontale verdelingsstaafjes (top-N) */
.hbars { display: grid; gap: var(--space-2); }
.hbar { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 84px; gap: var(--space-3); align-items: center; font-size: var(--text-body-sm); }
.hbar .hb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .hb-track { height: 14px; background: var(--panel-2); border-radius: var(--radius-badge); overflow: hidden; }
.hbar .hb-track i { display: block; height: 100%; border-radius: var(--radius-badge) 0 0 var(--radius-badge); }
.hbar .hb-val { text-align: right; color: var(--ink-dim); font-size: var(--text-label); }

/* ══ LABELS PRINT ═══════════════════════════════════════════════════════ */
#print-root { display: none; }

@media print {
  body.printing-labels > *:not(#print-root) { display: none !important; }
  body.printing-labels { display: block; background: #fff; }
  body.printing-labels #print-root { display: block; }

  .label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1mm;
    background: #fff;
    color: #000;
    overflow: hidden;
    page-break-inside: avoid;
    text-align: center;
  }
  .label svg { max-width: 100%; }
  .label .label-code { font-family: var(--font-mono); font-weight: 600; }
  .label .label-name { font-family: var(--font-head); font-weight: 600; }

  /* article label follows the WACS layout: SKU big top-left, description
     below, barcode bottom-right, stock location bottom-left */
  .label.label-article {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    column-gap: 2mm;
    align-items: start;
    text-align: left;
  }
  .label-article .label-sku {
    grid-column: 1 / -1;
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1.05;
  }
  .label-article .label-name {
    grid-column: 1 / -1;
    font-weight: 400;
    line-height: 1.15;
  }
  .label-article .label-loc {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    font-family: var(--font-mono);
    white-space: nowrap;
  }
  .label-article svg {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    align-self: center;
  }

  /* rol: één label per pagina — maat en lettergroottes komen dynamisch uit
     Instellingen → Labels (labels.js injecteert #label-page-style) */
  #print-root.fmt-roll .label {
    padding: 2mm 3mm;
    page-break-after: always;
  }

  /* A4-stickervel — kolommen en celmaat eveneens dynamisch */
  #print-root.fmt-a4 { display: grid !important; justify-content: center; }
  #print-root.fmt-a4 .label {
    padding: 2mm;
    border: .1mm dotted #bbb;
  }
  #print-root .label .label-zone { color: #333; }
}

/* ── Voorraadcontrole (portaal vs WACS) ───────────────────────────────── */
.sc-split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--space-4); align-items: start; }
.sc-detail { position: sticky; top: 14px; }
.sc-detail > header { display: flex; align-items: center; justify-content: space-between; }
.search-inline input {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-chip);
  color: var(--ink); font: inherit; font-size: var(--text-body-sm); padding: var(--space-2) var(--space-3); min-width: 170px; outline: none;
}
.search-inline input:focus { border-color: var(--accent); }
.sc-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4) 0; font-size: var(--text-label); color: var(--ink-dim); }
.sc-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.sc-legend .sw { width: 10px; height: 10px; border-radius: calc(var(--radius-badge) / 2); display: inline-block; }
tr.sc-sel { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
#sc-rows tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#sc-melding .notice { margin-bottom: var(--space-3); }
/* tekst alleen voor schermlezers (het * bij een ander WACS-artikel met dezelfde code); de cel is het
   ankerpunt, anders telt de tekst buiten het scrollkader van de tabel mee in de paginabreedte */
#sc-rows td { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sc-delta {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); min-width: 48px;
}
.sc-delta.ok { color: var(--green); background: var(--green-dim); }
.sc-delta.neg { color: var(--red); background: var(--red-dim); }
.sc-delta.pos { color: var(--blue); background: var(--blue-dim); }
.sc-dbody { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.sc-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.sc-num { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-chip); padding: var(--space-3); text-align: center; }
.sc-num .v { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-title-sm); }
.sc-num .l { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--ink-dim); margin-top: var(--space-1); }
.sc-uitleg { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); border-radius: var(--radius-chip); padding: var(--space-3); }
.sc-uitleg b { font-weight: 700; }
.sc-tl-head { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-2); }
.sc-tl-row { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px dashed var(--line); font-size: var(--text-body-sm); }
.sc-tl-row:last-child { border-bottom: none; }
.sc-note {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-chip);
  color: var(--ink); font: inherit; font-size: var(--text-body-sm); padding: var(--space-2) var(--space-3); outline: none;
}
.sc-note:focus { border-color: var(--accent); }
@media (max-width: 900px) {
  /* minmax(0, …): de brede tabel scrolt in zijn eigen kader in plaats van de pagina te verbreden */
  .sc-split { grid-template-columns: minmax(0, 1fr); }
  .sc-detail { position: static; }
}

/* ── smal scherm: het menu wordt een rail met alleen iconen ──────────────
   Alleen op de tablet (601 tot 860 px); op een telefoon schuift het menu
   over het scherm (hieronder). */
@media (max-width: 860px) {
  .content, .topbar { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (min-width: 601px) and (max-width: 860px) {
  body.dashboard { grid-template-columns: var(--nav-rail) 1fr; }
  .sidebar .brand { justify-content: center; padding: var(--space-3) var(--space-2); }
  .sidebar .brand-logo { max-height: 40px; padding: var(--space-1); }
  .sidebar .brand h1, .sidebar .brand p, .nav-kop,
  .side-user .who, .side-acties .txt, .omg-chip .txt { display: none; }
  /* de naam van een menu-item blijft voor schermlezers staan (het icoon is aria-hidden) */
  .nav a .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav { padding: var(--space-2); }
  .nav a { justify-content: center; min-height: 40px; padding: 0; }
  .nav a .ico { width: 20px; height: 20px; }
  .nav-badge { position: absolute; top: 2px; right: 2px; margin: 0; }
  .side-user { margin-inline: var(--space-2); padding: var(--space-2) 0; justify-items: center; }
  .user-chip { flex-direction: column; }
  #btn-logout { margin-left: 0; }
  .side-acties { justify-content: center; }
  .omg-chip { padding: calc(var(--space-1) / 2); }
}

/* ── telefoon: een menuknop in de kopbalk schuift het menu over het scherm ─
   Besluit 22-10-2026: op 600 px en smaller krijgt de inhoud de volle
   breedte. Het menu staat dan met namen in een lade van links, met een
   donker vlak over de rest; zijmenu.js opent en sluit het en maakt de rest
   van de pagina zolang onbereikbaar (inert). */
.menu-knop, .menu-sluit { display: none; }
@media (max-width: 600px) {
  body.dashboard { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(300px, 86vw);
    height: 100dvh;
    box-shadow: var(--shadow-panel);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-standard); }
  .zijmenu-scherm { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--ink) 40%, transparent); }
  .menu-knop { display: inline-flex; flex: none; margin-left: calc(var(--space-2) * -1); }
  .menu-sluit { display: inline-flex; flex: none; margin-left: auto; }
  .menu-knop .ico, .menu-sluit .ico { width: 20px; height: 20px; }
  .sidebar .brand-logo { width: auto; min-width: 0; flex: 1 1 auto; }
  /* vingerdoelen van 40 px, zoals in de rail */
  .nav a { min-height: 40px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .sidebar, body.menu-open .sidebar { transition: none; }
}

/* ── Platform (beheer van klantomgevingen) ─────────────────────────────── */
.omg-actief td { background: var(--accent-dim); }
.omg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); vertical-align: 1px; }
.omg-dot.aan { background: var(--green); }
.omg-dot.uit { background: var(--ink-dim); }

/* ── Huisstijl-instellingen ────────────────────────────────────────────── */
.hs-swatches { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hs-sw {
  width: 34px; height: 34px; border-radius: var(--radius-chip); cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.hs-sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-dim); }
.hs-vrij { position: relative; overflow: hidden; background: conic-gradient(#F2555A, #FFB300, #43C982, #5B8DEF, #7C5CFC, #F2555A); }
.hs-vrij input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; }

/* ── aanvullingen bij de hulpklassen (fase 2) ─────────────────────────── */
/* Componentregels hier winnen anders van een hulpklasse uit tokens.css met
   gelijke specificiteit; deze regels leggen de bedoelde uitkomst vast. */
.kpi.k-accent { --kpi-accent: var(--accent); }
.sc-legend .sw.red   { background: var(--red); }
.sc-legend .sw.blue  { background: var(--blue); }
.sc-legend .sw.green { background: var(--green); }
.subtable-title:first-child { margin-top: 0; }
.tbl td.u-bold { font-weight: 700; }

/* ── Voertuigen (.vt-*) ──────────────────────────────────────────────────────
   De gereed-checklist is de enige eigen vorm van dit scherm; de rest is
   .panel, .tbl, .chip en .kpi uit de tokenlaag. */
.vt-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vt-checklist li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-chip);
}
.vt-checklist li > span { font-weight: 700; }
.vt-checklist .vt-ok   { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--green-dim); }
.vt-checklist .vt-ok > span   { color: var(--green); }
.vt-checklist .vt-todo { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: var(--amber-dim); }
.vt-checklist .vt-todo > span { color: var(--amber); }
@media (min-width: 720px) { .vt-checklist { grid-template-columns: repeat(2, 1fr); } }
/* De regellijst heeft tien kolommen sinds Bestemming en Verkoopprijs erbij
   kwamen [AFW-9.17]: smallere celmarge, koppen en een lange statuschip mogen
   breken. Vanaf 1366 breed is Verkoopprijs zo zonder scrollen zichtbaar. */
.tbl.vt-regels th, .tbl.vt-regels td { padding-inline: var(--space-2); }
.tbl.vt-regels th { white-space: normal; }
.tbl.vt-regels td:first-child .chip { white-space: normal; }
/* de vloottabel: naam en type van het voertuig breken niet over regels, op een telefoon scrolt het vak zijwaarts */
.vt-vloot .tbl td:first-child { white-space: nowrap; }
/* Smaller (een laptop op 1280, of 1920 op 150 procent) past het niet meer: dan
   wijkt de kolom Aankoopprijs. Totaal inkoop blijft staan en het detail toont
   de aankoopprijs, zodat Verkoopprijs, waar de lijst om draait, in beeld blijft. */
@media (max-width: 1365px) { .tbl.vt-regels .vt-kol-aankoop { display: none; } }
/* de regel onder een bedrag (marge, verkocht uit de vloot) in de broodletter: smaller dan mono */
.tbl.vt-regels td.num .vt-toelichting { font-family: var(--font-body); }
/* de prijsknop leest als een bedrag, zoals de andere bedragen in de rij, met een
   stippellijn als teken dat hij te wijzigen is */
.tbl.vt-regels td.num [data-vp] {
  font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; padding-inline: var(--space-2);
  text-decoration: underline dotted; text-underline-offset: var(--space-1);
}
/* De kop van het detail heeft naast titel en status tot vier knoppen; op een
   telefoon lopen die anders rechts buiten het paneel en scrollt de hele pagina
   opzij. Afbreken naar een volgende regel houdt alles binnen de breedte. */
#vt-detail .panel > header { flex-wrap: wrap; }
/* keuzelijst Eigen vloot / Verkoop in de regellijst: compact, in de maat van de tabel */
.tbl select.vt-bestemming { width: auto; min-width: 12ch; padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* ── In/uit-register van de werkplaats (module 9b) in variant M ────────────
   Sinds 26-10-2026 (herontwerp stap 5, docs/mockups/2026-10-herontwerp/):
   de opzet van Werkvloer in de kleuren van Rust. Elke open registratie is
   een kaart met een band aan de linkerkant (rood boven de drempel, amber
   zonder werkorder, anders de lijnkleur; een kaart met beide draagt beide
   klassen en de band wordt rood), het kenteken als titel en de feiten als
   label boven waarde; de knoppen Binnen melden en Uit melden zijn groot.
   Twee kaarten naast elkaar, op een telefoon (tot 760 px) één. De koppen van
   paneel, vloot en fiche breken af zodra het smal wordt. Alleen tokens. */
.vt-wp-paneel > header, .vt-vloot > header, #vt-fiche .panel > header { flex-wrap: wrap; }
.vt-wp-paneel { border-width: 2px; }
.vt-wp-paneel > header h3 { font-size: var(--text-title-sm); line-height: var(--leading-title-sm); font-weight: var(--weight-heading); }
.vt-wp-kpis { margin: 0; padding: var(--space-4) var(--space-4) 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-wp-lijst {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.vt-wp-rij {
  --vt-band: var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-2));
  border: 2px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.vt-wp-rij::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--space-2); background: var(--vt-band); }
.vt-wp-rij.is-zonder-wo { --vt-band: var(--amber); }
.vt-wp-rij.is-lang { --vt-band: var(--red); }
.vt-wp-rij > * { min-width: 0; }
.vt-wp-voertuig { display: grid; }
.vt-wp-kenteken { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-title-sm); line-height: var(--leading-title-sm); }
.vt-wp-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2) var(--space-4); }
.vt-wp-veld { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.vt-wp-label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--weight-caption);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.vt-wp-veld .mono, .vt-wp-duur { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
/* een werkorder blijft in één stuk zolang hij past; een lang nummer zonder spaties (tot 40 tekens) breekt in plaats van de pagina te verbreden */
.vt-wp-nr { overflow-wrap: anywhere; }
.vt-wp-rij.is-lang .vt-wp-duur { color: var(--red); }
/* amber op wit haalt als tekst geen 4,5:1; het mengsel met inkt wel (zoals .artikel-kpis) */
.vt-wp-rij.is-zonder-wo .vt-wp-geen { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); font-weight: 600; }
/* de tag breekt liever dan dat hij op een smal tablet (601 tot 619 px) uit de kaart loopt */
.vt-wp-duurveld .chip { white-space: normal; max-width: 100%; }
.vt-wp-knop {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-5);
  border-width: 2px;
  border-radius: var(--radius-field);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 700;
}
.vt-wp-rij .vt-wp-knop { justify-self: end; align-self: end; }
#vt-wp-binnen { min-height: var(--space-12); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.vt-wp-voet { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.vt-wp-paneel > .empty.plain + .vt-wp-voet { border-top: 0; }
@media (max-width: 760px) {
  .vt-wp-lijst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .vt-wp-kpis { padding: var(--space-3) var(--space-3) 0; }
  /* drie tegels op twee kolommen: de laatste over de volle breedte in plaats van een gat ernaast */
  .vt-wp-kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vt-wp-lijst { padding: var(--space-3); gap: var(--space-2); }
  .vt-wp-rij .vt-wp-knop { justify-self: stretch; }
  #vt-wp-binnen { flex: 1 1 100%; }
}
/* harde statuskleuren (variant M): in een strip .kpis-hard kleurt een tegel met de toon rood of amber helemaal,
   met de tekst in wit (--panel, niet het accent-inkttoken, dat per klant donker kan zijn); elke andere tegel houdt inkt
   voor het getal. Het getal groeit met de tegel mee van de kopstap tot de displaystap (op een telefoon van de
   titelstap tot de kopstap), het label staat in body met gewicht 700. Het mengsel met inkt houdt wit op amber
   boven 4,5:1. */
.kpis-hard .kpi { border-width: 2px; container-type: inline-size; }
.kpis-hard .kpi .kpi-num { font-size: clamp(var(--text-heading), 12cqi, var(--text-display)); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink); }
.kpis-hard .kpi .kpi-label { font-size: var(--text-body); line-height: var(--leading-body); font-weight: 700; color: var(--ink); }
.kpis-hard .kpi.k-red, .kpis-hard .kpi.k-amber {
  background: color-mix(in srgb, var(--kpi-accent) 88%, var(--ink));
  border-color: color-mix(in srgb, var(--kpi-accent) 88%, var(--ink));
  color: var(--panel);
}
.kpis-hard .kpi.k-red .kpi-num, .kpis-hard .kpi.k-amber .kpi-num,
.kpis-hard .kpi.k-red .kpi-label, .kpis-hard .kpi.k-amber .kpi-label,
.kpis-hard .kpi.k-red .dim, .kpis-hard .kpi.k-amber .dim { color: var(--panel); }
@media (max-width: 600px) {
  .kpis-hard .kpi .kpi-num { font-size: clamp(var(--text-title), 12cqi, var(--text-heading)); line-height: var(--leading-title); letter-spacing: var(--tracking-title); }
  .kpis-hard .kpi .kpi-label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
  /* de derde registertegel staat op een telefoon over de volle breedte en houdt dezelfde getalstap als de twee ernaast */
  .vt-wp-kpis .kpi .kpi-num { font-size: var(--text-title); line-height: var(--leading-title); }
}
/* ── Locaties en Voorraadcontrole in variant M (herontwerp stap 6, 27-10-2026) ──
   De opzet van Werkvloer in de kleuren van Rust, zoals het register van
   Voertuigen: grote knoppen (.btn-groot 48 px voor de hoofdactie van een
   scherm, .btn-kaart 40 px op een kaart), tegels in kpis-hard en per zone van
   Locaties een raster van kaarten. Een kaart heeft de code als titel, de
   omschrijving eronder en een 2px-rand; een inactieve locatie is gestippeld en
   gedimd, een gekozen locatie (het vakje voor de labels) krijgt de rand in het
   accent. Op een telefoon twee kaarten naast elkaar en de knop over de volle
   breedte. */
.btn.btn-groot, .btn.btn-kaart {
  border-width: 2px;
  border-radius: var(--radius-field);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 700;
}
.btn.btn-groot { min-height: var(--space-12); padding: var(--space-2) var(--space-5); }
.btn.btn-kaart { min-height: var(--space-10); padding: var(--space-2) var(--space-4); }
.loc-kpis, .sc-kpis { margin-bottom: var(--space-4); }
.loc-zone { border-width: 2px; }
.loc-raster {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.loc-kaart {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  min-width: 0;
}
.loc-kaart:has(input[data-sel]:checked) { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); }
.loc-kaart:has(input[data-sel]:checked) .dim { color: var(--ink); }
.loc-kaart.is-inactief { border-style: dashed; background: var(--panel-2); color: var(--ink-dim); }
.loc-kies { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; min-height: var(--space-10); cursor: pointer; }
/* het vakje staat op de eerste regel van de code, ook als een lange code breekt */
.loc-kies input { flex: none; width: var(--space-5); height: var(--space-5); margin: 0; margin-block-start: calc((var(--leading-title-sm) * var(--text-title-sm) - var(--space-5)) / 2); accent-color: var(--accent); }
.loc-code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-title-sm);
  line-height: var(--leading-title-sm);
}
.loc-omschr { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); overflow-wrap: anywhere; }
.loc-kaart .chip { justify-self: start; }
.loc-kaart .btn-kaart { justify-self: start; }
.sc-delta { font-weight: 700; }
#sc-mark { width: 100%; }
@media (max-width: 600px) {
  .loc-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); gap: var(--space-2); }
  .loc-kaart { padding: var(--space-3); }
  .loc-kaart .btn-kaart { justify-self: stretch; }
  .toolbar .btn-groot { flex: 1 1 auto; }
  /* een oneven laatste tegel (Inactief, Sluiten aan) over de volle breedte in plaats van alleen in de linkerkolom */
  .loc-kpis .kpi:last-child:nth-child(odd), .sc-kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* de vensters: feiten als twee kolommen, de fout van de database in het venster zelf */
.vt-wp-feiten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.vt-wp-feiten dt { color: var(--ink-dim); }
.vt-wp-feiten dd { margin: 0; }
.modal .vt-wp-fout, .modal .vt-ac-fout { margin: 0 0 var(--space-3); }
.modal .vt-wp-fout[hidden], .modal .vt-ac-fout[hidden] { display: none; }
.modal select#vt-wp-voertuig { font-family: var(--font-mono); }
/* de chip In de werkplaats in de fichekop staat naast de statuschip */
#vt-fiche .vt-wp-chip { margin-left: var(--space-1); }
/* de tab Werkplaats op de fiche: de stand met zijn knoppen, de koppen boven
   de maandtegels en de bezoeken, de tabel met een regel onder een waarde */
.vt-wp-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.vt-wp-status > span:first-child { flex: 1 1 18rem; }
.vt-wp-status .vt-wp-sub { display: block; color: var(--ink-dim); }
.vt-wp-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-wp-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-5) 0 var(--space-2); }
.vt-wp-kop .t-caption { text-transform: uppercase; }
.vt-wp-kop select { width: auto; }
.vt-wp-tegels { margin-bottom: 0; }
/* het tabelvak is het bevattende blok van de .sr-only-teksten bij de streepjes (position: absolute):
   anders staan die op hun plek in de brede tabel buiten het scrollvak en scrolt de pagina op 390 opzij */
.vt-wp-tabel { position: relative; }
.vt-wp-bezoeken td { vertical-align: top; }
.vt-wp-bezoeken .vt-wp-moment { font-family: var(--font-mono); white-space: nowrap; }
/* de tabel past op 1366 in zijn vak (reviewronde 1): de koppen met (u) en de onderregel mogen breken, alleen In en Uit
   blijven op één regel; bij twee registraties in één bezoek staan de knoppen Aanpassen onder elkaar */
.vt-wp-bezoeken th { white-space: normal; }
.vt-wp-bezoeken .vt-wp-onder { display: block; color: var(--ink-dim); font-family: var(--font-body); font-size: var(--text-label); line-height: var(--leading-label); }
.vt-wp-bezoeken th[title] { cursor: help; }
.vt-wp-bezoeken .vt-wp-handeling .btn { display: block; margin-left: auto; }
.vt-wp-bezoeken .vt-wp-handeling .btn + .btn { margin-top: var(--space-1); }
/* op een telefoon (tot 600 px, mockup 06) staan dezelfde bezoeken als lijst: moment en tot, de duur rechts,
   werkorder en soort eronder; de tabel verdwijnt dan, zodat de doorlooptijd zonder scrollvak in beeld staat */
.vt-wp-bezoeklijst { display: none; list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-field); }
.vt-wp-bezoek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "moment duur" "wo duur" "knoppen knoppen";
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.vt-wp-bezoek:last-child { border-bottom: 0; }
.vt-wp-bezoek > * { min-width: 0; }
.vt-wp-bz-moment { grid-area: moment; font-family: var(--font-mono); }
.vt-wp-bz-duur { grid-area: duur; text-align: right; }
.vt-wp-bz-duur b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vt-wp-bz-wo { grid-area: wo; }
.vt-wp-bz-knoppen { grid-area: knoppen; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vt-wp-bz-sub { display: block; color: var(--ink-dim); font-family: var(--font-body); font-size: var(--text-label); line-height: var(--leading-label); }
@media (max-width: 600px) {
  .vt-wp-tabel { display: none; }
  .vt-wp-bezoeklijst { display: block; }
}
/* het streepje: bron nog niet gekoppeld; de uitleg staat in de title en voor een schermlezer ernaast */
.vt-wp-leeg { color: var(--ink-dim); cursor: help; }
.vt-wp-uitleg { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; max-width: 60rem; }
.vt-wp-uitleg .vt-wp-feiten { margin: 0; }

@media print { :root { --pad: 1; } } /* afdrukken gaat in elke dichtheid gelijk */

/* Artikelen: indeling volgens het ontwerpcanvas (Portaal: artikelen) op de
   bestaande tokenladder. Tegels op één rij, filterkolom links, zoekveld over
   de volle breedte van het tabelpaneel met de chips eronder. */
.artikel-kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.artikel-kpis .kpi { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; cursor: pointer; font: inherit; color: inherit; padding: var(--space-3) var(--space-4); }
.artikel-kpis .kpi .kpi-label { margin-top: 0; }
.artikel-kpis .kpi .kpi-num { font-size: var(--text-heading); line-height: var(--leading-heading); }
.artikel-kpis .kpi.k-red .kpi-label { color: var(--red); }
.artikel-kpis .kpi.k-amber .kpi-num, .artikel-kpis .kpi.k-amber .kpi-label { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); }
.artikel-kpis .kpi:focus-visible, .artikel-facet:focus-within { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
.artikel-kpis .kpi:hover { background: var(--panel-2); }
.artikel-kpis .kpi.actief { background: var(--panel-2); border-color: var(--ink); }
.portaal-artikelen { display: grid; grid-template-columns: minmax(14em, 1fr) minmax(0, 5fr); gap: var(--space-4); align-items: start; }
.artikel-filters .panel-body { display: grid; gap: var(--space-5); }
.artikel-filters section { display: grid; gap: var(--space-1); }
.artikel-filters h3 { margin: 0 0 var(--space-1); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); font-weight: var(--weight-caption); text-transform: uppercase; color: var(--ink-dim); }
.artikel-prijsband { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.artikel-prijsband input { min-width: 0; }
.artikel-prijsband input[aria-invalid="true"] { border-color: var(--red); }
.artikel-prijsfout { margin: var(--space-1) 0 0; }
/* zoeken buiten de werkset: wat de server doet, en een inactief artikel met zijn code */
.artikel-catalogusmelding { margin: 0; padding: var(--space-2) var(--space-4); }
.artikel-facet { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-8); font-size: var(--text-body-sm); cursor: pointer; border-radius: var(--radius-field); }
.artikel-facet > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.artikel-facet .mono { font-size: var(--text-label); }
.artikel-facet.actief > span:first-of-type { font-weight: 600; }
#art-meer-lev { justify-self: start; margin-top: var(--space-1); }
.artikel-tabelpaneel { min-width: 0; }
.artikel-zoek { padding: var(--space-3) var(--space-4) 0; }
.artikel-zoek input { width: 100%; min-height: var(--space-10); font-size: var(--text-body-lg); }
.artikel-zoek input:not(:placeholder-shown) { border-color: var(--amber); box-shadow: inset 0 0 0 calc(var(--space-1) / 4) var(--amber); }
.artikel-tabelkop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); }
.artikel-telling { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--text-body-sm); color: var(--ink-dim); }
.artikel-telling b { color: var(--ink); }
.artikel-portaalchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-label); color: var(--ink-dim); }
.artikel-portaalchips .is-voorraad { color: color-mix(in srgb, var(--green) 80%, var(--ink)); } /* 5,5:1 op wit */
.artikel-portaalchips:empty { display: none; }
#art-melding:empty { display: none; }
#art-melding .notice { margin: var(--space-3) var(--space-4) 0; }
.artikel-meer-rij { display: flex; justify-content: center; padding: var(--space-3); }
.artikel-afwijking { color: color-mix(in srgb, var(--amber) 75%, var(--ink)); background: var(--amber-dim); }
.artikel-tabelpaneel .tbl tr.artikel-verlies > td { background: color-mix(in srgb, var(--red) 5%, var(--panel)); } /* rood blijft 4,6:1 */
@media (max-width: 60em) {
  .artikel-kpis { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); }
  .portaal-artikelen { grid-template-columns: minmax(0, 1fr); }
  .artikel-tabelpaneel { order: -1; } /* op een telefoon eerst zoeken, dan de filters */
  .artikel-filters .panel-body { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); }
}
@media (max-width: 600px) {
  .artikel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .artikel-kpis .kpi { padding: var(--space-3); }
  .artikel-kpis .kpi .kpi-num { font-size: var(--text-title); line-height: var(--leading-title); }
}

.artikel-tabelpaneel .tbl td:nth-child(2), .artikel-tabelpaneel .tbl td.num, .artikel-tabelpaneel .tbl td.mono { white-space: nowrap; }
.artikel-tabelpaneel .tbl td:nth-child(3) { min-width: 12em; }

/* ── Klokmelding "te lang ingeklokt" (docs/mockups/2026-10-glas/03) ──────────
   De popup (klok-melding.js, via openModal) toont de feiten als twee
   kolommen; op een telefoon onder elkaar, label boven waarde. Het blok in
   Instellingen, Actiecentrum staat als eigen kader in het paneel met de
   statusregel en de knop Nu controleren op één regel. Alleen tokens. */
.klok-feiten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.klok-feiten dt { color: var(--ink-dim); }
.klok-feiten dd { margin: 0; font-weight: var(--weight-label); }
.klok-zin { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); text-wrap: pretty; }
/* de chip Live of Achteraf naast de titel van de popup */
.modal > header h3 .chip { margin-left: var(--space-2); vertical-align: middle; }
@media (max-width: 600px) {
  .klok-feiten { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .klok-feiten dt { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
  .klok-feiten dd { margin-bottom: var(--space-2); }
}
.klok-blok { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--panel-2); }
.klok-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.klok-status .t-body-sm { flex: 1 1 16rem; }

/* Een knop die tijdens het wachten op de server niet nog eens mag, maar de focus moet houden (Berekenen en
   Herberekenen op Urenoverzichten): aria-disabled in plaats van disabled, met dezelfde look als .btn:disabled
   (docs/ONTWERPSYSTEEM.md, Toetsenbord); de klikhandler houdt de tweede klik zelf tegen. */
.btn[aria-disabled="true"] { opacity: .45; cursor: progress; box-shadow: none; }

/* ── Instellingen: tien categorieën (docs/INSTELLINGEN.md §2.1) ──────────────
   Links de categorieën (sticky onder de kopbalk van 64 px), rechts de panelen
   van de actieve categorie; onder 980 px een keuzelijst in plaats van de lijst.
   .set-velden zet de velden in twee kolommen: het label links met de
   toelichting als subregel (.set-sub), de invoer rechts, ook in een smal
   venster met het zijmenu en de lijst ernaast (1024 px, mockup v1.1), dan met
   een smallere labelkolom; alleen is de inhoud smaller dan 26rem (een
   telefoon), dan onder elkaar. Uitleg, vinkjes en knoppen staan in de kolom
   van de invoer. */
.set-indeling { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-nav {
  position: sticky;
  top: calc(64px + var(--space-4));
  padding: var(--space-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.set-nav-lijst, .set-nav-sub { list-style: none; margin: 0; padding: 0; }
.set-nav-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-field);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.set-nav-cat:hover { background: var(--panel-2); }
.set-nav-cat.actief { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.set-nav-ico { flex: none; width: 1.25rem; text-align: center; color: var(--ink-dim); }
.set-nav-cat.actief .set-nav-ico { color: var(--accent); }
.set-nav-naam { min-width: 0; }
.set-nav-n { margin-left: auto; font-size: var(--text-caption); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.set-nav-sub { display: grid; gap: var(--space-1); margin: var(--space-1) 0 var(--space-2) calc(1.25rem + var(--space-6)); }
.set-nav-sub a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.set-nav-sub a:hover { color: var(--ink); }
.set-nav a:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
label.set-catkeuze { display: none; }
.set-inhoud { min-width: 0; container: set-inhoud / inline-size; }
.set-cat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.set-cat[hidden], .set-paneel[hidden] { display: none; }
.set-cat, .set-paneel { scroll-margin-top: calc(64px + var(--space-4)); }
.set-cat-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.set-paneel { min-width: 0; }
.set-paneel > header { flex-wrap: wrap; }
/* na een anker krijgt de paneelkop de focus (focusOpPaneel in settings.js): een startpunt, geen bediening */
.set-paneel > header h3[tabindex="-1"]:focus { outline: none; }
.set-meta { margin-left: auto; }
/* stap 2: Standaardwaarden rechts in de kop, na een meta-regel direct erachter; het label gewijzigd naast de titel */
.set-standaard { margin-left: auto; }
.set-meta ~ .set-standaard { margin-left: 0; }
.set-velden .set-groep > .set-waarde { padding-top: var(--space-2); }
/* zoeken (§2.2): het veld rechts in de werkbalk; tijdens het zoeken alleen de gevonden panelen, met hun categorie erboven */
.set-zoek { margin-left: auto; flex: 0 1 20rem; min-width: 0; }
.toolbar .set-zoek input[type="search"] { width: 100%; max-width: none; }
.set-inhoud.set-zoekt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.set-paneel-cat { display: none; }
.set-zoekt .set-cat-kop, .set-zoekt .set-paneel:not(.set-treffer) { display: none; }
.set-zoekt .set-paneel-cat { display: block; flex-basis: 100%; }
.set-zoek-leeg { margin: 0; padding: var(--space-6) 0; text-align: center; }
/* de opslaanbalk (§2.3): onderin, zwevend boven de inhoud zolang er iets gewijzigd is, met de tekst links */
.set-balk {
  position: sticky;
  bottom: var(--space-4);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.set-balk > span { margin-right: auto; font-weight: 600; }
/* zolang de balk in het actieve scherm staat, scrolt een veld dat de focus krijgt tot boven de balk (werkBalkBij), en
   staan de meldingen (#toast-root, tokens.css) boven de balk in plaats van over de knoppen; de balk is één regel hoog,
   of twee waar de inhoud smal is (1024 px naast de lijst, een telefoon) */
html:has(#tab-instellingen.active .set-balk-aan) { scroll-padding-bottom: 8rem; }
body:has(#tab-instellingen.active .set-balk-aan) #toast-root { bottom: 8rem; }
/* op een telefoon een lage balk: de tekst op een regel, de twee knoppen naast elkaar eronder */
@media (max-width: 760px) {
  .set-balk { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-2) var(--space-3); }
  .set-balk > span { grid-column: 1 / -1; margin-right: 0; }
  .set-balk > .btn { padding-inline: var(--space-2); white-space: normal; }
}
.panel > .set-onder { border-top: 1px solid var(--line); }
/* ── Instellingen in de stijl van Rust (herontwerp stap 8, 27-10-2026) ──────
   De indeling van docs/INSTELLINGEN.md blijft; alleen de stijl volgt de schil:
   de categorieën met lijniconen in de streek van het zijmenu (settings.js,
   LIJNICOON), de bestandskeuze als knop van de schil in plaats van de knop van
   de browser, en op een telefoon het zoekveld over de volle breedte. */
.set-nav-svg { display: block; width: 1.125rem; height: 1.125rem; margin: 0 auto; }
#tab-instellingen input[type="file"] { font-size: var(--text-body-sm); color: var(--ink-dim); }
#tab-instellingen input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#tab-instellingen input[type="file"]::file-selector-button:hover { border-color: var(--ink-dim); }
@media (max-width: 760px) {
  .set-zoek { flex: 1 1 100%; margin-left: 0; }
}

/* een rooster van één kolom die nooit breder wordt dan het paneel: een tabel scrolt dan in zijn eigen .tbl-wrap */
.set-paneel > .panel-body.u-grid, .set-deel { grid-template-columns: minmax(0, 1fr); }
.set-velden { --set-lb: 14rem; --set-l: var(--set-lb); }
.set-velden label.field, .set-velden .set-groep {
  display: grid;
  grid-template-columns: var(--set-l) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: start;
}
.set-velden label.field > span, .set-velden .set-groep > span {
  margin: 0;
  padding-top: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: 500;
  color: var(--ink);
}
.set-sub, .set-vink .set-sub {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 400;
  color: var(--ink-dim);
}
.set-velden .form-row { grid-template-columns: minmax(0, 1fr); }
.set-velden > p.dim, .set-velden > label.row, .set-velden > .row, .set-velden > .notice,
.set-velden > .set-logo-voorbeeld, .set-velden > .set-uitleg,
.set-deel > p.dim, .set-deel > .row, .set-velden .klok-blok > p.dim, .set-velden .klok-blok > label.row,
.set-velden .klok-status { margin-left: calc(var(--set-l) + var(--space-5)); }
.set-velden .klok-blok { --set-l: calc(var(--set-lb) - var(--space-3)); }
/* knoppen en lange adressen in de kolom van de invoer lopen om als die kolom smal is (Logo uploaden en Verwijderen op
   1024 px, het adres van inkoop-mail-intake op 990 px) */
.set-velden > div.row, .set-deel > div.row { flex-wrap: wrap; }
.set-velden code, .set-deel code { overflow-wrap: anywhere; }
.set-velden > .subtable-title, .set-deel > .subtable-title { margin: var(--space-2) 0 0; }
.set-velden > .subtable-title:first-child { margin-top: 0; }
.set-velden input[type="number"] { max-width: 10rem; }
.set-velden .set-groep .row input[type="file"] { flex: 1 1 16rem; min-width: 0; max-width: 24rem; }
.set-vink { min-height: 1.625rem; }
/* een vinkje met een subregel die omloopt (Magazijn in het paneel Modules op 390 px) houdt zijn maat */
.set-vink > input[type="checkbox"] { flex: none; }
/* Logboek wijzigingen: 50 regels blijven binnen een vaste hoogte en scrollen in hun paneel (ook opzij op een telefoon, .tbl-wrap,
   A5); het tijdstip breekt niet af, een veld en een waarde mogen breken (een JSON-pad, een lijst) maar niet per teken */
.set-log { max-height: 36rem; overflow: auto; }
.set-log .tbl td { vertical-align: top; }
.set-log .tbl td.set-log-tijd { white-space: nowrap; }
.set-log .tbl td.set-log-veld, .set-log .tbl td.set-log-waarde { overflow-wrap: anywhere; }
.set-log .tbl td.set-log-veld { min-width: 5.5rem; }
.set-log .tbl td.set-log-waarde { min-width: 7.5rem; max-width: 16rem; }
.set-logo-voorbeeld {
  place-items: center start;
  min-height: 4.5rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
}
.set-logo-voorbeeld img { max-height: 5rem; max-width: 100%; }
.set-aliassen { display: grid; gap: var(--space-1); padding-left: var(--space-5); }
/* Actiecentrum: eigenaar per signaal. Breed twee kolomparen (signaal, eigenaar) naast elkaar, met een veld waarin de
   langste standaardeigenaar (Werkplaatschef en administratie) helemaal past; smaller één signaal per regel (de
   container-query's onderaan) */
.set-eigenaren td { vertical-align: middle; }
.set-eigenaren input { min-width: 15.5rem; }
/* De inhoud is smaller dan vóór de linkerkolom: een brede tabel scrolt binnen zijn paneel, en de laatste kolom met
   de knoppen (Bewerken, Afhandelen, verwijderen) blijft dan rechts in beeld. Niet op een telefoon: daar tekent de
   roosterlijst elk rooster als blok */
/* het scrollvak is het bevattende blok van de .sr-only-teksten in de tabel (position: absolute), zoals bij
   .vt-wp-tabel: anders staan die op hun plek in de brede tabel buiten het vak en scrolt de pagina opzij */
.set-paneel .tbl-wrap { position: relative; }
/* Naast de lijst links is de inhoud smaller dan vroeger: een smallere celmarge en koppen die mogen afbreken, zonder
   spatiëring zoals in de mockup, zodat de tabel Medewerkers met zijn tien kolommen op 1366 px in het paneel past;
   een naam breekt niet af. Smaller dan dat scrolt de tabel in zijn paneel, met de knoppenkolom vast rechts en een
   lijn ertussen zoals .kw-q (Urenoverzichten) */
.set-paneel .tbl th, .set-paneel .tbl td { padding-inline: var(--space-2); }
.set-paneel .tbl th { white-space: normal; letter-spacing: normal; }
#mw-body .tbl td:first-child { white-space: nowrap; }
/* de kolom Rooster houdt een weekpatroon op hooguit twee regels (ma 8 · di 8 · wo 8 · en do 8 · vr 8); de ruimte komt
   uit de koppen Mon-teur, Stand-plaats en Con-tract, die op hun lettergreep mogen afbreken (­ in settings.js) */
#mw-body .tbl td.rs-kolom { min-width: 8rem; }
@media (min-width: 761px) {
  .set-paneel .tbl:has(td:last-child > .btn) tr > :last-child { position: sticky; right: 0; background: var(--panel); box-shadow: inset 1px 0 0 var(--line); }
  .set-paneel .tbl:has(td:last-child > .btn) tbody tr:hover > :last-child { background: var(--panel-2); }
}

/* is de inhoud smaller dan 64rem (op 1366 en 1440 px naast het zijmenu en de lijst), dan past een tweede kolompaar niet
   zonder de eigenaren af te kappen: één signaal per regel, links het signaal en rechts de eigenaar, de koppen één keer */
@container set-inhoud (max-width: 64rem) {
  .set-eigenaren thead tr, .set-eigenaren tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* de cellen van een regel even hoog, met de lijn eronder op één hoogte; het signaal midden naast zijn veld */
  .set-eigenaren tbody td { display: flex; align-items: center; }
  .set-eigenaren thead th:nth-child(n+3), .set-eigenaren tbody td:empty { display: none; }
  .set-eigenaren input { min-width: 0; }
}
@media (max-width: 980px) {
  .set-indeling { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .set-nav { display: none; }
  label.set-catkeuze { display: block; max-width: 24rem; }
}
/* naast het zijmenu en de lijst (de inhoud 26 tot 40rem, zoals op 1024 px) blijven label en invoer naast elkaar, met
   een smallere labelkolom: de invoer houdt dan ongeveer de breedte van de mockup (198 px op 1024) */
@container set-inhoud (max-width: 40rem) {
  .set-velden { --set-lb: 12.5rem; }
}
@container set-inhoud (max-width: 26rem) {
  .set-velden label.field, .set-velden .set-groep { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .set-velden label.field > span, .set-velden .set-groep > span { padding-top: 0; }
  .set-velden > p.dim, .set-velden > label.row, .set-velden > .row, .set-velden > .notice,
  .set-velden > .set-logo-voorbeeld, .set-velden > .set-uitleg,
  .set-deel > p.dim, .set-deel > .row, .set-velden .klok-blok > p.dim, .set-velden .klok-blok > label.row,
  .set-velden .klok-status { margin-left: 0; }
  .set-velden input[type="number"] { max-width: none; }
}
@container set-inhoud (max-width: 36rem) {
  /* elk signaal met zijn eigenaar eronder, op de volle breedte: een ingevulde eigenaar (Administratie en ...) past
     dan helemaal; het signaal is het label van het veld, dus de kolomkoppen vallen weg */
  .set-eigenaren thead { display: none; }
  .set-eigenaren tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); }
  .set-eigenaren tbody td:empty { display: none; }
  .set-eigenaren tbody td:nth-child(odd) { padding-bottom: 0; border-bottom: 0; }
  .set-eigenaren input { min-width: 0; }
}