/* ==========================================================================
   Planbord demo – aanvullingen op tokens.css en schetsen.css
   schetsen.css komt ongewijzigd uit Ontwerp/html. Hier staat alleen wat een
   werkende app extra nodig heeft: echte knoppen en links, focus, lege staten.
   Regels: haarlijnen van 1 px, hoeken alleen waar functioneel, nergens
   verdikte randen of gekleurde zijstrepen.
   ========================================================================== */

/* ---------- Basis ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .rail-item, .seg > button, .icon-btn, .btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
}

/* ---------- Bovenbalk ---------- */
.admin-picker { border: 0; background: transparent; }
.admin-picker:hover { background: var(--bg-hover); }

.seg > button {
  appearance: none; border: 0; background: transparent;
  padding: 3px 10px; border-radius: 3px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); white-space: nowrap;
}
.seg > button:hover { color: var(--text); }
.seg > button[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }

.search { cursor: text; }
.search input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text); font-size: var(--text-md); }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.icon-btn { border: 0; background: transparent; }

/* Verbindingsstatus in de bovenbalk: stip + tekst */
.live-pill .dot { background: var(--text-3); }
.live-pill[data-state="ok"] .dot { background: var(--ok); }
.live-pill[data-state="degraded"] .dot { background: var(--warn); }
.live-pill[data-state="error"] .dot { background: var(--crit); }

/* ---------- Navigatierail ---------- */
a.rail-item { text-decoration: none; }
.rail-item:hover { background: var(--bg-hover); color: var(--text); }
.rail-item[aria-current="page"] { background: var(--bg-pressed); color: var(--text); }

/* ---------- Statusbalk ---------- */
ui-statusbar [data-conn][data-state="ok"] svg { color: var(--ok); }
ui-statusbar [data-conn][data-state="degraded"] svg { color: var(--warn); }
ui-statusbar [data-conn][data-state="error"] svg { color: var(--crit); }
ui-statusbar [data-conn][data-state="error"] { color: var(--crit); }

/* ---------- Werkruimte en lege staat ---------- */
.workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.workspace:focus-visible { box-shadow: none; }

.empty-state { margin: auto; max-width: 440px; padding: 48px 24px; text-align: center; color: var(--text-2); }
.empty-state svg.i { width: 28px; height: 28px; color: var(--text-3); margin-bottom: 12px; }
.empty-state h1 { margin: 0 0 6px; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text); }
.empty-state p { margin: 0 0 4px; font-size: var(--text-md); line-height: 1.5; }
.empty-state .meta { margin-top: 14px; font-size: var(--text-sm); color: var(--text-3); }

/* Melding als de API niet bereikbaar is: zachte vulling, geen zijstreep */
.notice { margin: 0 auto 0; max-width: 560px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg-subtle); font-size: var(--text-sm); color: var(--text-2); text-align: left; }
.notice.crit { background: var(--crit-soft); border-color: transparent; color: var(--text); }
.notice code { font-family: var(--font-mono); font-size: 0.95em; }

.noscript { padding: 24px; font-size: 15px; }

/* ==========================================================================
   Dag 2 – blokken (ui-*), slepen, regie en design system
   ========================================================================== */

/* ---------- Knoppen ---------- */
.btn { cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--bg-hover); }
.btn:active { background: var(--bg-pressed); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.danger:hover { background: var(--crit); filter: brightness(.94); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn svg.i { flex: none; }
.hint { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-3); line-height: 1.45; }
.row.wrap { flex-wrap: wrap; }
.input { height: var(--control-h); padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font-size: var(--text-sm); min-width: 0; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-2); }
.field input { height: var(--control-h); padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Gebruiker in de bovenbalk ---------- */
.user-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 2px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--bg-hover); }
.user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
@media (max-width: 900px) { .user-name { display: none; } }

/* ---------- ui-seg, ui-chip, ui-status ---------- */
ui-seg { display: inline-flex; }
ui-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
ui-chip { display: inline-flex; }
button.chip { cursor: pointer; font-family: inherit; }
button.chip:hover { color: var(--text); background: var(--bg-hover); }
button.chip.on:hover { background: var(--accent-soft); color: var(--accent); }
ui-status { display: inline-flex; }

/* ---------- ui-panel ---------- */
.panel-body.scroll { overflow: auto; }
.panel-foot { border-top: 1px solid var(--line); padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
ui-panel > .panel-head[hidden] { display: none; }

/* ---------- ui-grid ---------- */
ui-grid { display: block; height: 100%; min-height: 0; }
.grid-scroll { height: 100%; overflow: auto; position: relative; }
.grid:focus-visible { box-shadow: none; }
.grid .th-sort { appearance: none; border: 0; padding: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.grid .th-sort:hover { color: var(--text); }
.grid .sort-mark { font-size: 10px; color: var(--accent); min-width: 7px; }
.grid th.c, .grid td.c { text-align: center; }
.grid tbody tr[data-key] { cursor: default; }
.grid tbody tr[data-key]:hover td { background: var(--bg-hover); }
.grid tbody tr.sel td, .grid tbody tr.sel:hover td { background: var(--accent-soft); }
/* Toetsenbordfocus: dunne ring om de actieve rij, alleen als de tabel focus heeft */
.grid:focus-visible tbody tr.active td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.grid:focus-visible tbody tr.active td:first-child { box-shadow: inset 1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.grid:focus-visible tbody tr.active td:last-child { box-shadow: inset -1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.grid-empty { padding: 32px 16px; text-align: center; color: var(--text-3); font-size: var(--text-sm); }

/* ---------- ui-menu ---------- */
ui-menu {
  position: fixed; z-index: 50; display: flex; flex-direction: column; padding: 4px;
  background: var(--bg-overlay); border: 1px solid var(--line); border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay); max-height: calc(100vh - 16px); overflow: auto;
}
.menu-item {
  appearance: none; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text);
  font-size: var(--text-md); text-align: left; white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-hover); box-shadow: none; }
.menu-item:disabled { color: var(--text-3); cursor: default; background: transparent; }
.menu-item svg.i { color: var(--text-2); }
.menu-item.danger:not(:disabled), .menu-item.danger:not(:disabled) svg.i { color: var(--crit); }
.menu-label { flex: 1; }
.menu-hint { color: var(--text-3); font-size: var(--text-xs); }
.menu-check { color: var(--accent); display: grid; place-items: center; }
.menu-header { padding: 6px 8px 3px; font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-medium); }
.menu-sep { height: 1px; background: var(--line); margin: 4px -4px; }

/* ---------- ui-dialog ---------- */
ui-dialog dialog {
  max-width: calc(100vw - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-overlay);
  background: var(--bg-overlay); color: var(--text); box-shadow: var(--shadow-overlay);
}
ui-dialog dialog::backdrop { background: rgba(20, 20, 22, .28); }
:root[data-theme="dark"] ui-dialog dialog::backdrop { background: rgba(0, 0, 0, .5); }
.dialog-title { margin: 0; padding: 18px 20px 6px; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.dialog-body { padding: 0 20px 4px; color: var(--text-2); font-size: var(--text-md); line-height: 1.5; }
.dialog-body p { margin: 0 0 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }

/* ---------- ui-toast ---------- */
ui-toast { position: fixed; left: calc(50% + 38px); transform: translateX(-50%); bottom: 38px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
ui-toast .toast { position: static; pointer-events: auto; padding: 10px 8px 10px 12px; }
ui-toast .toast .ti svg.i { color: var(--text-2); }
ui-toast .toast.ok .ti svg.i { color: var(--ok); }
ui-toast .toast.warn .ti svg.i { color: var(--warn); }
ui-toast .toast.crit .ti svg.i { color: var(--crit); }
ui-toast .toast.ai .ti svg.i { color: var(--ai); }
.toast-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.toast-text b { font-weight: var(--weight-medium); }
.toast-text span { color: var(--text-2); font-size: var(--text-xs); }
.toast-close { width: 24px; height: 24px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  ui-toast .toast { animation: toast-in var(--dur) var(--ease); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------- Slepen ---------- */
/* Tekst is niet selecteerbaar (klikken, slepen en dubbelklikken gaven blauwe selecties); invoervelden wel */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.draggable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.draggable.press { background: var(--bg-pressed); }
.draggable.dragging { opacity: .45; }
html.is-dragging, html.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
body > .drag-ghost { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 70; will-change: transform; }
[data-drop="can"] { outline: 1px dashed var(--accent); outline-offset: -1px; }
[data-drop="over"] { outline: 1px solid var(--accent); outline-offset: -1px; background: var(--accent-softer); }
tr[data-drop] { outline: none; }
tr[data-drop="can"] td { border-bottom-style: dashed; border-bottom-color: var(--accent); }
tr[data-drop="over"] td { background: var(--accent-soft); }

/* ---------- Pagina’s met eigen inhoud (regie, design) ---------- */
.page { overflow: auto; padding: 22px 24px 32px; background: var(--bg); min-height: 0; }
.page-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; max-width: 1180px; margin: 0 auto 16px; }
.page-head h1 { margin: 0 0 4px; font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.page-head p { margin: 0; font-size: var(--text-md); }
.page-foot { max-width: 1180px; margin: 12px auto 0; }
.regie-grid, .ds-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.regie-grid > ui-panel, .ds-grid > ui-panel { min-height: 0; overflow: visible; }
.regie-grid .span-2, .ds-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 860px) { .regie-grid, .ds-grid { grid-template-columns: minmax(0, 1fr); } }
.ds-sec { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ds-sec p { margin: 0; color: var(--text-2); font-size: var(--text-sm); line-height: 1.5; }
.insp-sec.first { border-top: 0; }
.insp-sec p { margin: 0 0 12px; color: var(--text-2); font-size: var(--text-sm); line-height: 1.5; }
.ds-grid-panel { height: 420px; }
.ds-grid-panel .panel-body { display: flex; flex-direction: column; }

/* Democlock */
.regie-clock { padding: 4px 16px 16px; }
.regie-time { font-size: 40px; line-height: 1.1; font-weight: var(--weight-semibold); letter-spacing: -.01em; font-family: var(--font-display); }
.regie-clock .muted { font-size: var(--text-md); margin-top: 2px; }
.regie-state { margin-top: 8px; }

/* Scenario’s */
.scenario-list { display: grid; gap: 8px; }
.scenario { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); }
.scenario:disabled { color: var(--text-3); cursor: default; }
.scenario span { display: flex; flex-direction: column; gap: 2px; }
.scenario b { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.scenario small { font-size: var(--text-xs); color: var(--text-3); }

/* Logboek met events */
.event-log { list-style: none; margin: 0; padding: 0 0 4px; max-height: 320px; overflow: auto; }
.event-log li { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.event-log li b { font-weight: var(--weight-medium); }
.event-log li .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-log li.empty { color: var(--text-3); }
.event-log code { font-family: var(--font-mono); font-size: var(--text-xs); }
.event-log.compact { max-height: 180px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.event-log.compact li:first-child { border-top: 0; }

/* Sleeptest */
.drag-demo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .drag-demo { grid-template-columns: minmax(0, 1fr); } }
.drag-source { border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.drag-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--bg-elevated); touch-action: pan-y; }
.drag-item:first-child { border-top: 0; }
.drag-item.sel { background: var(--accent-soft); }
.drag-item svg.i { color: var(--text-3); }
.drag-item div, .drop-card div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.drag-item small, .drop-card small { color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drag-targets { display: flex; flex-direction: column; gap: 8px; }
.drop-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); }
.drop-card[data-locked] { color: var(--text-3); background: var(--bg-subtle); }
.drop-card.dropped { background: var(--ok-soft); }
@media (prefers-reduced-motion: no-preference) { .drop-card { transition: background-color var(--dur) var(--ease); } }
.ds-sec > ui-seg, .ds-sec > ui-chips { align-self: flex-start; }
.menu-check svg.i { color: var(--accent); }

/* ==========================================================================
   Leesbaarheid (verzoek klant): gebruikers zijn vaak 45+ en werken op schermen
   vanaf 18 inch. Alles één stap groter dan in de schetsen; verhoudingen gelijk.
   ========================================================================== */
:root {
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 15px;     /* basis UI */
  --text-lg: 16px;     /* koppen van panelen */
  --text-xl: 18px;
  --text-2xl: 23px;
  --text-3xl: 30px;
  --row-h: 34px;
  --row-h-compact: 30px;
  --control-h: 32px;
}
ui-app { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: 54px 1fr 30px; }
/* Het app-raam schuift nooit opzij, ook niet als de browser iets met focus in beeld wil brengen */
ui-app { overflow: clip; }
.rail-item { font-size: 12px; padding: 8px 0 7px; }
.avatar { width: 30px; height: 30px; font-size: 12px; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.badge-count { font-size: 11px; }
.ld { font-size: 11px; }
.bar { font-size: 13px; }
.tl-tick, .tl-row-label .drive { font-size: 12px; }
.tl-now::before, .bar.late::after, .stop-pin { font-size: 11.5px; }
.opt-score small, .fact small { font-size: 12px; }
.drag-ghost .n { font-size: 11.5px; min-width: 18px; height: 18px; }
.truck-pin { font-size: 12.5px; }
.cluster { font-size: 13px; }
.search { height: 34px; flex-basis: 460px; }
.user-btn { height: 34px; }
.icon-btn { width: 34px; height: 34px; }
.grid th { height: 32px; }
.grid tr.child td { height: 30px; }
.menu-item { height: 34px; }
.seg span, .seg > button { padding: 4px 12px; }
.chip { height: 28px; padding: 0 10px; }

/* ---------- Iconen: Font Awesome Pro Regular (vlakken), grip uit de eigen set ---------- */
svg.i { width: 18px; height: 18px; fill: currentColor; stroke: none; overflow: visible; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }
.rail-item svg.i { width: 20px; height: 20px; }
/* Duotone in kleur: <svg class="i duo tone-ok"><use href="#duo-truck"/></svg> */
svg.i.duo { --fa-secondary-opacity: .4; }
.tone-accent { --fa-primary-color: var(--accent); --fa-secondary-color: var(--accent); }
.tone-ok { --fa-primary-color: var(--ok); --fa-secondary-color: var(--ok); }
.tone-warn { --fa-primary-color: var(--warn); --fa-secondary-color: var(--warn); }
.tone-crit { --fa-primary-color: var(--crit); --fa-secondary-color: var(--crit); }
.tone-ai { --fa-primary-color: var(--ai); --fa-secondary-color: var(--ai); }
.tone-muted { --fa-primary-color: var(--text-2); --fa-secondary-color: var(--text-3); }
.icon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.icon-gallery figure { margin: 0; padding: 12px 6px 10px; background: var(--bg-elevated); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.icon-gallery figcaption { font-size: var(--text-xs); color: var(--text-3); text-align: center; word-break: break-word; }
.icon-gallery svg.i { width: 22px; height: 22px; }

/* ---------- Planbord (schets 01) ---------- */
.pb { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  /* De splitters zetten --pb-left, --pb-right en --pb-legs; zonder die waarden gelden deze standaardmaten */
  grid-template-columns: var(--pb-left, clamp(272px, 19vw, 340px)) minmax(0, 1fr) var(--pb-right, clamp(300px, 21vw, 400px));
  grid-template-rows: minmax(0, 1fr) var(--pb-legs, minmax(220px, 36%)); }
.pb-split-left { grid-column: 2; grid-row: 1 / 3; }
.pb-split-right { grid-column: 3; grid-row: 1 / 3; }
.pb-split-legs { grid-column: 2; grid-row: 2; }
.pb-res { grid-column: 1; grid-row: 1 / 3; }
.pb-trips { grid-column: 2; grid-row: 1; }
.pb-legs { grid-column: 2; grid-row: 2; }
.pb-insp { grid-column: 3; grid-row: 1 / 3; }

.pb-res .panel-body { display: flex; flex-direction: column; }
.res-tools { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px 14px; }
.res-tools { container: rt / inline-size; }
.res-tools ui-seg { display: flex; }
/* Vier soorten (trekkers, trailers, chauffeurs, charters): past het niet op één regel, dan twee bij twee */
@container rt (max-width: 340px) { .res-tools ui-seg { display: grid; grid-template-columns: 1fr 1fr; } }
.res-tools ui-seg > button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); }
.res-filter { display: flex; gap: 6px; }
.res-filter .chip { flex: 1 1 auto; justify-content: center; padding: 0 6px; white-space: nowrap; min-width: 0; overflow: hidden; }
/* Smal paneel: ‘Vrij voor rit’ wordt ‘Vrij’ (de regels zeggen ‘Vrij voor deze rit’, de chip heeft een tooltip) */
@container rt (max-width: 262px) { .res-filter .for-trip { display: none; } }
.res-filter .chip .num { color: var(--text-3); }
.res-filter .chip.on .num { color: inherit; }
.res-list { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
.res-item { cursor: pointer; }
.res-item:hover { background: var(--bg-hover); }
.res-item.sel, .res-item.sel:hover { background: var(--accent-soft); }
.res-item .avatar { width: 26px; height: 26px; font-size: 11px; }
.res-main { min-width: 84px; }
.res-side { flex: 0 1 auto; max-width: 58%; min-width: 0; }
.res-side > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-side .faint { margin-top: 2px; }
.res-side .state { display: flex; justify-content: flex-end; }
.res-side .state .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.res-side .state .dot { flex: none; }
.res-title { white-space: nowrap; overflow: hidden; }
.res-title .res-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.res-title .res-name ~ * { flex: none; }

.pb-dept { margin-left: 8px; }
.pb-legsel { margin-left: 8px; font-size: var(--text-sm); }
.pb .panel-head .chip svg.i.sm { width: 12px; height: 12px; color: var(--text-3); }
/* Deze kolommen vullen de ruimte en worden ingekort, zodat de rest altijd past */
.pb .grid td.fill { width: 40%; max-width: 0; }
.pb .grid td.fill-s { width: 22%; max-width: 0; }
.grid tr.done td { color: var(--text-2); }
.grid tr.sel .check { background: var(--accent); border-color: var(--accent); }
.grid tr.sel .check::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.grid .check { cursor: pointer; }
.grid .req { color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.grid .req svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.late { color: var(--warn); font-weight: var(--weight-semibold); }
.late.late-crit { color: var(--crit); }   /* te laat boven de grens (standaard 15 min) */
.ok-text { color: var(--ok); }
.neg { color: var(--crit); }

/* Ritdetail */
.pb-insp > .panel-body { overflow: auto; }
.insp { display: flex; flex-direction: column; min-height: 100%; }
.insp-empty { margin: auto; }
.insp-hero { padding: 16px 16px 14px; }
.insp-hero h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.insp-badges { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.route-big { font-size: var(--text-lg); font-weight: var(--weight-medium); display: flex; align-items: center; gap: 6px; }
.route-big svg.i { color: var(--text-3); }
.insp-meta { font-size: var(--text-sm); color: var(--text-2); margin-top: 3px; }
.res-chip { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.res-chip + .res-chip { border-top: 1px solid var(--line); }
.res-chip .lbl { font-size: var(--text-xs); color: var(--text-3); }
.res-chip .val { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.res-chip-side { font-size: var(--text-xs); }
.res-chip .ring { width: 46px; font-size: var(--text-xs); }
.insp-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--text-xs); color: var(--text-3); }
.stop.done .stop-dot svg.i { width: 9px; height: 9px; color: #fff; }
.load-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; font-size: var(--text-sm); margin-top: 8px; }
.load-row .r { text-align: right; white-space: nowrap; min-width: 84px; }
.insp-margin { align-items: flex-end; }
.insp-margin .muted { font-size: var(--text-xs); margin-left: auto; text-align: right; line-height: 1.5; }
.margin-big { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.margin-big.neg { color: var(--crit); }
.insp-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); margin-top: auto; position: sticky; bottom: 0; background: var(--bg-elevated); }
.insp-actions .primary { justify-content: center; flex: 1 1 auto; }
/* Past het niet op één regel: de hoofdknop over de volle breedte, de rest eronder naast elkaar (stap 1);
   is ook dat te smal, dan de andere knoppen alleen met hun icoon (stap 2). Nooit één knop los op een regel. */
.insp-actions:is([data-fit="1"], [data-fit="2"]) > .primary { flex-basis: 100%; }
.insp-actions:is([data-fit="1"], [data-fit="2"]) > .btn:not(.primary, .sq) { flex: 1 1 0; justify-content: center; }
.insp-actions > .btn.sq { flex: none; justify-content: center; }
.insp-actions[data-fit="2"] > .btn:not(.primary) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Statusbalk: aantallen van het planbord */
ui-statusbar .sb-page { display: contents; }
.sb-num { color: var(--text); font-weight: var(--weight-semibold); }
.sb-btn { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin: 0 -6px; border-radius: var(--radius-control); cursor: pointer; }
.sb-btn:hover { background: var(--bg-hover); color: var(--text); }
.sb-btn.crit svg.i { color: var(--crit); }
ui-statusbar .row.faint svg.i { color: var(--ok); }

/* ---------- Planbord: doen (dag 4) ---------- */
.avatar.xs { width: 18px; height: 18px; font-size: 9px; }
.row-tags { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; }
.busy-tag { color: var(--text-2); }
.busy-tag svg.i { color: var(--accent); }
.mon-tag { display: inline-flex; color: var(--accent); }
.grid tr.locked .row-tags .avatar { opacity: 1; }
/* Gedelegeerd slepen: de rijen zijn de grepen, niet het hele grid */
ui-grid.draggable, .res-list.draggable { cursor: default; }
ui-grid.draggable tbody tr[data-key], .res-list.draggable .res-item { cursor: grab; }
.draggable .press td, .draggable .res-item.press { background: var(--bg-pressed); }
.draggable .dragging { opacity: .45; }
.pb [data-trips] tr[data-drop="over"] .route { color: var(--accent); }
/* Wie er nog meer is, naast je eigen avatar */
.presence { display: inline-flex; align-items: center; }
.presence .avatar { box-shadow: 0 0 0 2px var(--bg-elevated); }
.presence .avatar + .avatar { margin-left: -5px; }
.planscherm-wait { max-width: 520px; }
.planscherm-wait .notice { margin: 14px 0 6px; display: flex; gap: 8px; align-items: flex-start; text-align: left; }
.planscherm-wait .row.center { justify-content: center; margin-top: 18px; }
.planscherm-who { width: 40px; height: 40px; font-size: 15px; margin: 0 auto 12px; }
.insp-empty-note { margin: 0; font-size: var(--text-sm); color: var(--text-3); }
.res-chip .val.faint { font-weight: var(--weight-regular); color: var(--text-3); }
ui-grid.draggable tbody tr[data-key], .res-list.draggable .res-item { touch-action: pan-y; }

/* ---------- ui-splitter: tussen vakken altijd verstelbaar ---------- */
/* Ligt over de haarlijn tussen twee vakken. De lijn blijft 1 px en wordt alleen blauw bij aanwijzen of slepen. */
ui-splitter { position: relative; z-index: 3; display: block; touch-action: none; outline: none; }
ui-splitter[aria-orientation="vertical"] { width: 9px; margin-left: -5px; justify-self: start; align-self: stretch; cursor: col-resize; }
ui-splitter[aria-orientation="horizontal"] { height: 9px; margin-top: -5px; align-self: start; justify-self: stretch; cursor: row-resize; }
ui-splitter::after { content: ""; position: absolute; background: transparent; transition: background-color var(--dur-fast) var(--ease) 120ms; }
ui-splitter[aria-orientation="vertical"]::after { top: 0; bottom: 0; left: 4px; width: 1px; }
ui-splitter[aria-orientation="horizontal"]::after { left: 0; right: 0; top: 4px; height: 1px; }
ui-splitter:hover::after, ui-splitter.active::after, ui-splitter:focus-visible::after { background: var(--accent); transition-delay: 0s; }
ui-splitter.active::after, ui-splitter:focus-visible::after { transition: none; }
@media (pointer: coarse) {
  /* Vinger: groter grijpvlak, dezelfde dunne lijn */
  ui-splitter[aria-orientation="vertical"] { width: 23px; margin-left: -12px; }
  ui-splitter[aria-orientation="vertical"]::after { left: 11px; }
  ui-splitter[aria-orientation="horizontal"] { height: 23px; margin-top: -12px; }
  ui-splitter[aria-orientation="horizontal"]::after { top: 11px; }
}
html.is-resizing-x, html.is-resizing-x * { cursor: col-resize !important; -webkit-user-select: none; user-select: none; }
html.is-resizing-y, html.is-resizing-y * { cursor: row-resize !important; -webkit-user-select: none; user-select: none; }

/* Splitter-voorbeeld op /design: dezelfde opbouw als het planbord */
.split-demo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); height: 260px;
  grid-template-columns: var(--sd-left, 200px) minmax(0, 1fr) var(--sd-right, 220px);
  grid-template-rows: minmax(0, 1fr) var(--sd-bottom, 90px); }
.split-pane { background: var(--bg-elevated); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.split-pane small { color: var(--text-3); font-size: var(--text-xs); }
.split-demo .split-pane:first-child { grid-column: 1; grid-row: 1 / 3; }
.split-demo .split-pane:nth-child(2) { grid-column: 2; grid-row: 1; }
.split-demo .split-pane-right { grid-column: 3; grid-row: 1 / 3; }
.split-demo .split-pane-bottom { grid-column: 2; grid-row: 2; }
.split-l { grid-column: 2; grid-row: 1 / 3; }
.split-r { grid-column: 3; grid-row: 1 / 3; }
.split-b { grid-column: 2; grid-row: 2; }

/* ---------- Tijdlijn (schets 02) ---------- */
.tlp { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--tl-right, clamp(320px, 22vw, 400px)); grid-template-rows: minmax(0, 1fr); }
.tlp-main { grid-column: 1; grid-row: 1; }
.tlp-insp { grid-column: 2; grid-row: 1; }
.tlp-split { grid-column: 2; grid-row: 1; }
.tlp-insp > .panel-body { overflow: auto; }
.tlp-main .panel-body { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tl-mode { margin-left: 10px; }
.tl-tools { gap: 6px; flex-wrap: nowrap; }
.zoom { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-2); }
.zoom input[type="range"] { width: 110px; accent-color: var(--accent); }
/* De scroller ligt absoluut in de tijdlijn: zo heeft hij in elke browser (ook Safari) een vaste hoogte en breedte */
ui-timeline { display: block; flex: 1; min-height: 0; position: relative; }
.tlx { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.tlx-inner { --label: 232px; --pph: 60px; position: relative; width: calc(var(--label) + var(--hours, 48) * var(--pph)); min-height: 100%; }
.tlx-head { position: sticky; top: 0; z-index: 6; display: flex; height: 40px; background: var(--bg-elevated); border-bottom: 1px solid var(--line); }
.tlx-corner { position: sticky; left: 0; z-index: 7; width: var(--label); flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 0 12px 7px; font-size: var(--text-xs); color: var(--text-3); background: var(--bg-elevated); border-right: 1px solid var(--line); }
.tlx-inner.no-driving .drive, .tlx-inner.no-driving .drive-head { display: none; }
.tlx-scale { position: relative; flex: none; width: calc(var(--hours, 48) * var(--pph)); }
.tlx-scale .tl-tick { left: calc(var(--h) * var(--pph)); padding: 4px 0 0 6px; white-space: nowrap; }
.tlx-scale .tl-tick.day { color: var(--text); }
.tlx-inner[data-zoom="z2"] .tl-tick:not(.m2):not(.day) span,
.tlx-inner[data-zoom="z3"] .tl-tick:not(.m3):not(.day) span,
.tlx-inner[data-zoom="z6"] .tl-tick:not(.m6):not(.day) span { display: none; }
.tlx-row { display: flex; }
.tlx-row .tl-row-label, .tlx-row .tl-group { position: sticky; left: 0; z-index: 3; width: var(--label); flex: none; border-right: 1px solid var(--line); }
.tlx-row .tl-row-label { background: var(--bg-elevated); min-width: 0; }
.tlx-row .tl-row-label.fault { background: color-mix(in srgb, var(--crit) 7%, var(--bg-elevated)); }
.tlx-row .tl-row-label.over { background: color-mix(in srgb, var(--crit) 10%, var(--bg-elevated)); }
.tlx-row .tl-row-label.warn-over { background: color-mix(in srgb, var(--warn) 12%, var(--bg-elevated)); }
.tlx-row .tl-group { background: var(--bg-subtle); }
.tl-group-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: -4px; padding: 2px 4px; border: 0; border-radius: var(--radius-control); background: transparent;
  color: inherit; font: inherit; cursor: pointer; }
.tl-group-btn:hover { background: var(--bg-hover); color: var(--text); }
.tl-row-text { min-width: 0; flex: 1; }
.tl-row-text .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlx-row .tl-row-label .drive { width: 52px; flex: none; }
.tlx-row .tl-lane { flex: none; width: calc(var(--hours, 48) * var(--pph));
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--pph)); background-position: -1px 0; }
.tlx-row .tl-lane.group { background-image: none; }
.tlx .bar { left: calc(var(--s) * var(--pph) + 1px); width: max(16px, calc(var(--d) * var(--pph) - 3px)); cursor: pointer; user-select: none; -webkit-user-select: none; overflow: clip; }
/* overflow: clip (niet hidden), anders wordt de balk zelf het scrollvak en werkt sticky tekst niet */
.tlx .bar[data-drag] { cursor: grab; }
.tlx .bar.notime { width: 16px !important; }
.tlx .bar.done { opacity: .8; }
.tlx .bar.done svg.i { color: var(--ok); }
.tlx .bar.locked { opacity: .6; }
.tlx .bar.busy svg.i { color: var(--accent); }
.tlx .bar.dragging { opacity: .4; }
.tlx .bar.absent { cursor: default; z-index: 0; }
.tlx .bar.preview { z-index: 8; pointer-events: none; background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); border: 1px dashed var(--accent); overflow: visible; box-shadow: var(--shadow-overlay); }
.tlx .bar.preview.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--bg-elevated)); }
.tlx .bar.preview.crit { border-color: var(--crit); background: repeating-linear-gradient(-45deg, var(--crit-soft) 0 5px, var(--bg-elevated) 5px 10px); }
.tl-drop-tag { position: absolute; left: 0; bottom: calc(100% + 4px); padding: 3px 8px; border-radius: var(--radius-control); background: var(--bg-overlay); border: 1px solid var(--line); box-shadow: var(--shadow-overlay);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; }
.tl-drop-tag.ok::before, .tl-drop-tag.warn::before, .tl-drop-tag.crit::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-round); margin-right: 6px; vertical-align: 1px; background: var(--ok); }
.tl-drop-tag.warn::before { background: var(--warn); }
.tl-drop-tag.crit::before { background: var(--crit); }
.tl-drop-tag:empty { display: none; }
.tl-now-line { position: absolute; top: 40px; bottom: 0; left: calc(var(--label) + var(--h) * var(--pph)); width: 1.5px; background: var(--live); z-index: 2; pointer-events: none; }
.tl-now-tag { position: absolute; bottom: 3px; left: calc(var(--h) * var(--pph)); transform: translateX(-50%); background: var(--live); color: #fff; font-size: 11.5px; font-weight: var(--weight-semibold);
  padding: 0 5px; line-height: 16px; border-radius: var(--radius-mark); font-variant-numeric: tabular-nums; z-index: 1; }
ui-statusbar .tl-status .row svg.i { color: var(--crit); }
ui-statusbar .tl-status .row.faint svg.i { color: var(--ok); }
/* De tekst in een balk blijft in beeld als de balk links buiten beeld begint */
.tlx .bar-txt { position: sticky; left: calc(var(--label) + 8px); display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; }
.tlx .bar-txt > span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.tlx .bar.notime .bar-txt { display: none; }
/* Tijdens slepen: lanen niet omlijnen (te druk), alleen de baan onder de wijzer zacht kleuren */
.tl-lane[data-drop] { outline: none; }
.tl-lane[data-drop="over"] { background-color: var(--accent-softer); }
/* Balkstaten op /design */
.tl-demo { height: 470px; border: 1px solid var(--line); display: flex; flex-direction: column; }

/* ---------- Planscherm (schets 03) ---------- */
.ps { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: var(--ps-left, clamp(260px, 17vw, 320px)) minmax(0, 1fr) var(--ps-right, clamp(340px, 24vw, 420px));
  grid-template-rows: minmax(0, 1fr) var(--ps-legs, minmax(180px, 28%)); }
.ps-res { grid-column: 1; grid-row: 1 / 3; }
.ps-main { grid-column: 2; grid-row: 1; }
.ps-legs { grid-column: 2; grid-row: 2; }
.ps-side { grid-column: 3; grid-row: 1 / 3; }
.ps-split-left { grid-column: 2; grid-row: 1 / 3; }
.ps-split-right { grid-column: 3; grid-row: 1 / 3; }
.ps-split-legs { grid-column: 2; grid-row: 2; }
.ps-legs .grid td.fill-s { width: 22%; max-width: 0; }
.ps-legs .leg-add { width: 26px; height: 26px; display: grid; place-items: center; color: var(--accent); border-radius: var(--radius-control); }
.ps-legs .leg-add:hover { background: var(--accent-soft); }
.ps-legs.readonly .leg-add { visibility: hidden; }
.ps-legs-hint { margin-right: 8px; }
.ps-legs tbody tr[data-key] { cursor: grab; }
.ps-empty-stops { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px; padding: 26px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-card, 8px); color: var(--text-2); text-align: center; font-size: var(--text-sm); }
.ps-empty-stops b { color: var(--text); font-size: var(--text-md); }
.ps-empty-stops svg.i { color: var(--text-3); }
.acts.target .ps-empty-stops { border-color: var(--accent); background: var(--accent-softer); color: var(--text); }
@media (max-width: 1280px) { .ps-legs-hint { display: none; } }
.ps-res .panel-body { display: flex; flex-direction: column; }
.ps-main > .panel-body, .ps-side > .panel-body { overflow: hidden; }
.ps-editor { display: flex; flex-direction: column; height: 100%; position: relative; }
.ps-side-body { display: flex; flex-direction: column; height: 100%; overflow: auto; }
.ed-head { padding: 14px 18px 12px; display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--line); }
.crumb { font-size: var(--text-xs); color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--text); }
.ed-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.ed-meta { gap: 10px; font-size: var(--text-sm); flex-wrap: wrap; }
.ed-viewers { gap: 6px; font-size: var(--text-xs); }
.ed-banner { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: var(--text-sm); background: var(--bg-subtle); border-bottom: 1px solid var(--line); color: var(--text-2); }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.slot { padding: 10px 16px; display: flex; align-items: center; gap: 10px; min-height: 62px; position: relative; cursor: pointer; min-width: 0; }
.slot:hover { background: var(--bg-hover); }
.slot + .slot { border-left: 1px solid var(--line); }
.slot .lbl { font-size: var(--text-xs); color: var(--text-3); }
.slot .val { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .grow { min-width: 0; }
.slot.empty .val { color: var(--text-3); font-weight: var(--weight-regular); }
.slot-side { font-size: var(--text-xs); white-space: nowrap; }
.slot[data-drop="can"] { outline: 1px dashed var(--accent); outline-offset: -1px; }
.slot.target, .slot[data-drop="over"] { background: var(--accent-softer); outline: 1px dashed var(--accent); outline-offset: -1px; }
.slot .ring { width: 46px; }
.ed-tools { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-tools .note { white-space: nowrap; }
.ed-tools[data-fit="1"] > .grow { display: none; }   /* de melding op een eigen regel, links */
.ed-tools[data-fit="2"] > .note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-tools .btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.note.warn { color: var(--warn); } .note.warn svg.i { color: var(--warn); }
.note.crit { color: var(--crit); } .note.crit svg.i { color: var(--crit); }
.ps-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.check-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.check-item .dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--text-3); }
.check-item.warn .dot { background: var(--warn); }
.check-item.crit { color: var(--text); } .check-item.crit .dot { background: var(--crit); }
.acts { flex: 1; min-height: 0; overflow: auto; --act-cols: 22px 22px 38px minmax(0, 1.6fr) minmax(90px, 1fr) 66px 120px 82px; }
.acts[data-drop] { outline: none; }
.act { display: grid; grid-template-columns: var(--act-cols); align-items: center; gap: 10px; min-height: 52px; padding: 4px 18px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.act-head { display: grid; grid-template-columns: var(--act-cols); align-items: center; gap: 10px; height: 30px; padding: 0 18px; position: sticky; top: 0; z-index: 5;
  background: var(--bg-elevated); border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-3); white-space: nowrap; }
.act-head > span { overflow: hidden; text-overflow: ellipsis; }
.act-head .nr { text-align: right; }
.act[data-drag] { cursor: grab; }
.act .grip { color: var(--text-3); display: grid; place-items: center; }
.act .nr { color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.act .loc { min-width: 0; }
.act .loc b { display: block; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .loc span { display: block; font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act.fixed { background: var(--bg-subtle); color: var(--text-2); }
.act.problem .loc span { color: var(--crit); }
.act.dragging { opacity: .45; }
.act.pause { display: flex; gap: 8px; min-height: 30px; padding: 0 18px 0 70px; color: var(--text-3); font-size: var(--text-xs); background: var(--bg-elevated); }
.act.slot-line { min-height: 0; height: 2px; padding: 0; border: none; background: var(--accent); margin: -1px 18px 0; position: relative; z-index: 4; display: block; }
.act-extra { font-size: var(--text-xs); white-space: nowrap; }
.ld.x { color: var(--text-2); }
.ldm2 { display: grid; gap: 3px; font-size: var(--text-xs); color: var(--text-2); }
.ldm2 .meter { height: 3px; }
.unlink { margin: 12px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-size: var(--text-sm); }
.unlink[data-drop="can"] { border-color: var(--accent); color: var(--accent); outline: none; }
.unlink[data-drop="over"] { background: var(--accent-softer); outline: none; }
.ps-busy { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; padding: 10px; background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); }
.ps.readonly .slot { cursor: default; }
.ps.readonly .unlink, .ps.readonly [data-toggle-stop] { opacity: .5; pointer-events: none; }
.side-sec { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 12px; }
.kpi small { display: block; font-size: var(--text-xs); color: var(--text-3); }
.kpi b { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.kpi b.neg { color: var(--crit); }
.side-foot { margin-top: auto; padding: 12px 16px; display: flex; gap: 8px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--bg-elevated); }
.side-foot .primary { justify-content: center; }
.side-foot kbd { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .6; border-radius: 3px; padding: 0 4px; font-size: 11px; font-family: inherit; }
.chart-legend { display: flex; gap: 14px; font-size: var(--text-xs); color: var(--text-2); margin-top: 6px; }
.chart-legend span::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--c); margin-right: 6px; vertical-align: middle; }
.chart-legend span.dashed::before { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px); }
.ps-chart svg { width: 100%; height: auto; display: block; }
.ps-chart .base { stroke: var(--line-strong); stroke-width: 1; }
.ps-chart .cap { stroke: var(--crit); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ps-chart .fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.ps-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.ps-chart .ax, .ps-chart .ay { font-size: 10px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ps-chart .ax { text-anchor: middle; } .ps-chart .ay { text-anchor: end; }
.ps-chart .hit { fill: transparent; } .ps-chart .hit:hover { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.ps-chart-empty { padding: 30px 0; text-align: center; font-size: var(--text-sm); }
.ps-sugg { margin: 0 0 10px; font-size: var(--text-sm); line-height: 1.5; }

/* ---------- ui-map (OpenStreetMap) ---------- */
ui-map { display: block; position: relative; overflow: hidden; background: var(--bg-sunken); }
.map-mini { height: 190px; border: 1px solid var(--line); }
.map-tiles { position: absolute; inset: 0; }
.map-tiles img { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; }
.map-route { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.map-pins { position: absolute; inset: 0; }
.map-attr { position: absolute; right: 0; bottom: 0; padding: 1px 5px; font-size: 10px; color: var(--text-2); background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); text-decoration: none; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: var(--text-sm); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-tiles img { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); } }
:root[data-theme="dark"] .map-tiles img { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.ed-tools ui-seg > button { display: inline-flex; align-items: center; gap: 5px; }
/* Tijdlijn: schuifbalken altijd zichtbaar (ook op de Mac met verborgen schuifbalken), en schuiven met de muis */
.tlx { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg-subtle); }
.tlx::-webkit-scrollbar { width: 12px; height: 12px; }
.tlx::-webkit-scrollbar-track { background: var(--bg-subtle); }
.tlx::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--bg-subtle); }
.tlx::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.tlx::-webkit-scrollbar-corner { background: var(--bg-subtle); }
.tlx .tl-lane, .tlx .tlx-scale { cursor: grab; }
.tlx.panning, .tlx.panning * { cursor: grabbing !important; user-select: none; }

/* Zonder gekozen rit is de rechterkolom dicht (planbord en tijdlijn) */
.pb.no-insp { grid-template-columns: var(--pb-left, clamp(272px, 19vw, 340px)) minmax(0, 1fr); }
.pb.no-insp > .pb-insp, .pb.no-insp > .pb-split-right { display: none; }
.tlp.no-insp { grid-template-columns: minmax(0, 1fr); }
.tlp.no-insp > .tlp-insp, .tlp.no-insp > .tlp-split { display: none; }
.insp-close { width: 28px; height: 28px; margin: -4px -6px -4px 2px; display: inline-grid; place-items: center; color: var(--text-3); border-radius: var(--radius-control); }
.insp-close:hover { background: var(--bg-hover, var(--bg-subtle)); color: var(--text); }

/* ---------- ui-map: interactieve kaart (dag 7) ---------- */
.map-tl { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map-tl img { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; pointer-events: none; }
ui-map.map-interactive { cursor: grab; touch-action: none; outline: none; -webkit-user-select: none; user-select: none; }
ui-map.map-interactive.panning { cursor: grabbing; }
ui-map.map-interactive:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.map-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.map-line.driven { stroke: var(--ok); stroke-width: 4; }
.map-line.todo { stroke: var(--accent); stroke-width: 4; stroke-dasharray: 1 8; }
.map-line.todo-halo { stroke: var(--accent); stroke-width: 9; opacity: .12; }
.map-line.deadhead { stroke: var(--text-3); stroke-width: 3; stroke-dasharray: 1 7; }
.map-dots, .map-markers { position: absolute; inset: 0; pointer-events: none; }
.map-dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: var(--radius-round); border: 1.5px solid var(--bg-elevated); pointer-events: auto; }
.map-dot.load { background: var(--accent); }
.map-dot.unload { background: var(--ok); }
.map-dot.place { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.map-dot.jam { width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; background: var(--warn); color: #fff; border-width: 2px; }
.map-dot.jam svg.i { width: 12px; height: 12px; color: #fff; }
.map-floating { position: absolute; z-index: 6; background: var(--bg-overlay); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); border: 1px solid var(--line); }
.marker.truck-pin, .cluster { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; }
.truck-pin { display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 2px; border-radius: var(--radius-control); background: var(--bg-overlay); border: 1px solid var(--line-strong); font-size: 11px; font-weight: var(--weight-semibold); white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.truck-pin .tp { width: 18px; height: 18px; border-radius: var(--radius-round); display: grid; place-items: center; color: #fff; background: var(--accent); }
.truck-pin .tp svg.i { width: 11px; height: 11px; color: #fff; }
.truck-pin.ok .tp { background: var(--ok); } .truck-pin.warn .tp { background: var(--warn); } .truck-pin.crit .tp { background: var(--crit); }
.truck-pin.rest .tp, .truck-pin.idle .tp, .truck-pin.off .tp { background: var(--dept-overig); }
.truck-pin.idle, .truck-pin.off { color: var(--text-2); }
.truck-pin.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(0, 0, 0, .12); }
.cluster { width: 30px; height: 30px; border-radius: var(--radius-round); background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: var(--weight-semibold); font-size: 12px; border: 2px solid var(--bg-elevated); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.cluster.warn { background: var(--warn); } .cluster.crit { background: var(--crit); }
.map-pins .stop-pin { z-index: 3; }
.stop-pin.done { background: var(--accent); }
.stop-pin.done svg.i { width: 11px; height: 11px; color: #fff; }
.stop-pin.p { background: var(--dept-overig); }
.map-floating.callout { left: 0; top: 0; width: 262px; padding: 10px 12px; font-size: var(--text-xs); pointer-events: auto; z-index: 7; }
.map-floating.callout::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--bg-overlay); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.callout .row { gap: 6px; }
.callout .badge { margin-left: auto; }
.zoom-ctl { right: 14px; top: 14px; display: flex; flex-direction: column; overflow: hidden; }
.zoom-ctl button { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; color: var(--text-2); background: transparent; border: 0; }
.zoom-ctl button:hover { background: var(--bg-hover); color: var(--text); }
.zoom-ctl button + button { border-top: 1px solid var(--line); }

/* ---------- Kaart en monitor (schets 04) ---------- */
.kp { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--kp-right, clamp(340px, 26vw, 400px)); grid-template-rows: minmax(0, 1fr); }
.kp-map { grid-column: 1; grid-row: 1; position: relative; min-width: 0; min-height: 0; background: var(--bg-sunken); container: kpmap / inline-size; }
/* Smalle kaart (tweede scherm): het zoekveld onder Lagen, binnen de kaart */
@container kpmap (max-width: 540px) {
  .kp-tools { flex-wrap: wrap; right: 56px; }
  .kp .map-search { flex: 1 1 100%; min-width: 0; }
}
.kp-map ui-map { position: absolute; inset: 0; }
.kp-mon { grid-column: 2; grid-row: 1; }
.kp-mon > .panel-head { display: none; }
.kp-mon > .panel-body { overflow: auto; }
.kp-split { grid-column: 2; grid-row: 1; }
/* Linksboven: het palet (lagen en legenda, in te klappen) en zoeken naast elkaar */
.kp-tools { position: absolute; left: 14px; top: 14px; right: 64px; z-index: 6; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.kp-tools > .map-floating { position: relative; pointer-events: auto; }
.kp-palette { width: 248px; flex: none; max-height: calc(100vh - 160px); display: flex; flex-direction: column; }
.kp-palette[data-open="false"] { width: auto; }
.kp-pal-head { appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; min-height: 36px; border: 0; background: none;
  font: inherit; font-size: var(--text-sm); color: var(--text-2); cursor: pointer; border-radius: var(--radius-overlay); }
.kp-pal-head:hover { color: var(--text); }
.kp-pal-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kp-pal-title { font-weight: var(--weight-medium); color: var(--text); }
.kp-pal-on { font-size: var(--text-xs); }
.kp-pal-head > svg.i:last-child { transition: transform var(--dur-fast) var(--ease); }
.kp-palette[data-open="false"] .kp-pal-head > svg.i:last-child { transform: rotate(180deg); }
.kp-pal-body { padding: 0 12px 10px; overflow: auto; }
.kp-palette[data-open="false"] .kp-pal-body { display: none; }
.kp-pal-sec + .kp-pal-sec { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.kp-pal-label { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-medium); margin-bottom: 6px; }
.kp-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); color: var(--text-2); }
.kp-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.kp-legend .dot { margin: 0 2px; }
.kp-legend .map-dot.in-legend { position: static; margin: 0 1px; flex: none; }
.kp-legend .map-dot.jam.in-legend { width: 18px; height: 18px; margin: 0; }
.kp-legend .cap-key { margin-right: 0; }
.layer { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); padding: 5px 0; width: 100%; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; }
.layer .toggle { transition: background-color var(--dur-fast) var(--ease); }
.layer .toggle::after { transition: left var(--dur-fast) var(--ease); }
.layer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control); }
.kp .map-search { flex: 0 1 320px; min-width: 200px; }
.map-search label { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; color: var(--text-3); }
.map-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--text); outline: none; }
.map-search input::placeholder { color: var(--text-3); }
.map-results { border-top: 1px solid var(--line); padding: 4px 0; max-height: 320px; overflow: auto; }
.map-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; font-size: var(--text-sm); color: var(--text); }
.map-results button:hover, .map-results button.on { background: var(--bg-hover); }
.map-results small { color: var(--text-3); margin-left: auto; font-size: var(--text-xs); white-space: nowrap; }
.map-results .empty { padding: 8px 12px; font-size: var(--text-sm); color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mon-head { padding: 14px 16px 12px; }
.mon-title { font-weight: var(--weight-semibold); font-size: var(--text-lg); margin-top: 4px; }
.eta-big { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.progress { position: relative; height: 4px; border-radius: var(--radius-mark); background: var(--bg-sunken); margin: 14px 0 8px; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-mark); background: var(--ok); }
.progress b { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--ok); box-shadow: 0 0 0 2px var(--bg-elevated); transform: translate(-50%, -50%); }
.progress.warn i, .progress.warn b { background: var(--warn); }
.progress.crit i, .progress.crit b { background: var(--crit); }
.ev { display: grid; grid-template-columns: 40px 16px 1fr; gap: 8px; font-size: var(--text-sm); padding: 6px 0; align-items: start; }
.ev time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--text-xs); padding-top: 2px; }
.ev svg.i { margin-top: 2px; }
.ev.ok svg.i { color: var(--ok); } .ev.warn svg.i { color: var(--warn); } .ev.crit svg.i { color: var(--crit); } .ev.info svg.i { color: var(--text-3); }
.ev .link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ev .link:hover { text-decoration: underline; }
.ev-more { font-size: var(--text-xs); color: var(--text-3); padding-top: 4px; }
.mon-list { padding: 12px 0 0 !important; }
.mon-list .insp-label { padding-left: 16px; }
.mon-list .res-item { padding: 8px 16px; }
.mon-list .res-title b { font-weight: var(--weight-semibold); }
.mon-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: var(--text-sm); }
.mon-driver .avatar { flex: none; }
.mon-driver .ring { width: 46px; }
.kp .xs, .mon .xs, .mon-list .xs { font-size: var(--text-xs); }
.warn-text { color: var(--warn); }
.mon-delay { font-weight: var(--weight-semibold); }
.mon-delay.warn { color: var(--warn); } .mon-delay.ok { color: var(--ok); font-weight: var(--weight-medium); }
.mon-watch { margin-left: 8px; height: 24px; padding: 0 8px; font-size: var(--text-xs); }
.mon-watch[aria-pressed="true"] { color: var(--accent); }
.mon-empty svg.i { width: 26px; height: 26px; color: var(--text-3); }
.mon-empty p { margin: 10px 0 0; }
/* Volgorde van de lagen op de kaart */
ui-map .map-tiles { z-index: 0; }
ui-map .map-overlay { z-index: 1; }
ui-map .map-dots { z-index: 2; }
ui-map .map-pins { z-index: 3; }
ui-map .map-markers { z-index: 4; }
ui-map .map-attr { z-index: 8; }
.mon-head .row.faint { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
.mon-head .row.faint span:not(.grow) { overflow: hidden; text-overflow: ellipsis; }
.mon-list .res-main { min-width: 0; flex: 1; }
.mon-list .res-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-list .res-item > .num, .mon-list .res-item > .badge { flex: none; }

/* ---------- Monitor (Mac): tellers die filteren, één regel per rit, rechts het verloop ---------- */
.mn { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--mn-right, clamp(380px, 28vw, 480px)); grid-template-rows: minmax(0, 1fr); }
.mn-main { grid-column: 1; grid-row: 1; container: mn / inline-size; }
.mn-side { grid-column: 2; grid-row: 1; }
.mn-split { grid-column: 2; grid-row: 1; }
.mn-split-y { display: none; }
.mn-main > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.mn-main > .panel-body > ui-grid { flex: 1; min-height: 0; }
.mn-side > .panel-body { overflow: auto; }
.mn-kpis { flex: none; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mn-kpi { flex: 1 1 108px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 9px 14px 8px; border: 0; background: var(--bg-elevated); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mn-kpi small { max-width: 100%; font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-kpi b { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.mn-kpi:hover { background: var(--bg-hover); }
.mn-kpi[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated)); }
.mn-kpi[aria-pressed="true"] small { color: var(--accent); }
.mn-kpi.warn b { color: var(--warn); }
.mn-kpi.crit b { color: var(--crit); }
.mn .grid td { white-space: nowrap; }
.mn .grid td.fill { width: 24%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn .grid td.fill-s { width: 15%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn .grid tr.done td { color: var(--text-2); }
.mn-st { display: inline-flex; align-items: center; gap: 7px; }
.mn-eye { display: inline-flex; margin-left: 6px; color: var(--accent); vertical-align: -2px; }
.mn-prog { display: flex; flex-direction: column; gap: 4px; padding: 3px 0; }
.mn-prog .progress { margin: 0; height: 4px; }
.mn-prog .progress b { display: none; }
.mn-prog small { font-size: var(--text-xs); color: var(--text-3); }
/* Smal, bijvoorbeeld als tweede scherm: eerst de laatste melding, dan de volgende stop, dan trekker en rijtijd weg */
@container mn (max-width: 1180px) { .mn-main .grid :is(th, td, col)[data-col="lastEvent"] { display: none; } }
@container mn (max-width: 980px) { .mn-main .grid :is(th, td, col)[data-col="next"] { display: none; } }
@container mn (max-width: 860px) { .mn-main .grid :is(th, td, col):is([data-col="truckPlate"], [data-col="rest"]) { display: none; } }
@container mn (max-width: 600px) { .mn-main .grid :is(th, td, col):is([data-col="kmDone"], [data-col="planned"]) { display: none; } }
/* Heel smal: het detail onder de lijst, met een splitter ertussen */
@media (max-width: 899px) {
  .mn { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--mn-bottom, 46%); }
  .mn-side { grid-column: 1; grid-row: 2; }
  .mn-split { display: none; }
  .mn-split-y { display: block; grid-column: 1; grid-row: 2; }
}
.mn-detail .insp-head { padding: 14px 16px 12px; }
.mn-detail .insp-head h2 { margin: 6px 0 2px; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.mn-detail .insp-head p { margin: 0; font-size: var(--text-sm); }
.mn-detail .mon-head .insp-close { margin-left: 4px; }
.mn-detail .mon-head :is(.mon-watch, .insp-close) { height: 28px; }
.mn-detail .mon-head .insp-close { width: 28px; }
@media (pointer: coarse) and (min-width: 700px) {
  .mn-detail .mon-head :is(.mon-watch, .insp-close) { height: 36px; }
  .mn-detail .mon-head .insp-close { width: 36px; }
}
.mn-stops-head, .mn-stops li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px 62px 34px; align-items: center; gap: 8px; }
.mn-stops-head { padding: 0 0 4px; font-size: var(--text-xs); color: var(--text-3); }
.mn-stops-head span:nth-child(n+3) { text-align: right; }
.mn-stops { list-style: none; margin: 0; padding: 0; }
.mn-stops li { padding: 7px 6px; margin: 0 -6px; border-top: 1px solid var(--line); font-size: var(--text-sm); border-radius: var(--radius-control); }
.mn-stops li:first-child { border-top: 0; }
.mn-stops li > .num { text-align: right; white-space: nowrap; }
.mn-stops li > .num svg.i { width: 12px; height: 12px; margin-right: 3px; color: var(--ok); vertical-align: -1px; }
.mn-stops li.done { color: var(--text-2); }
.mn-stops li.here { background: var(--accent-soft); border-top-color: transparent; }
.mn-stops li.here + li { border-top-color: transparent; }
.mn-stops .grow { min-width: 0; display: flex; flex-direction: column; }
.mn-stops .grow b { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-stops .grow small { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-stops .ld.l { color: var(--accent); }
.mn-stops .ld.d { color: var(--ok); }
.mn-dd { font-size: var(--text-xs); }

/* ---------- Uitval en planningsassistent (schets 02, dag 8) ---------- */
.tl-banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--crit-soft); border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.tl-banner > svg.i { color: var(--crit); flex: none; }
.tl-banner > span { flex: 1; min-width: 0; }
.tl-banner .btn { flex: none; margin-left: auto; }
.ai-btn svg.i { color: var(--ai); }
.insp-alert { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--crit-soft); font-size: var(--text-sm); border-bottom: 1px solid var(--line); }
.insp-alert > span { flex: 1; min-width: 0; }
.insp-alert svg.i { color: var(--crit); vertical-align: -2px; margin-right: 4px; }
.ai-panel { display: flex; flex-direction: column; min-height: 100%; }
.ai-head { padding: 14px 16px 12px; }
.ai-head h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 8px 0 2px; }
.ai-head p { margin: 2px 0 0; font-size: var(--text-sm); }
.ai-head .insp-label svg.i, .ai-foot svg.i { color: var(--ai); }
.ai-head .link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ai-opts { border-top: 1px solid var(--line); }
.ai-opt { padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ai-opt:hover { background: var(--bg-hover); }
.ai-opt.sel { background: var(--ai-soft); cursor: default; }
.ai-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ai-opt-head { align-items: flex-start; gap: 10px; }
.ai-rank { width: 16px; color: var(--text-3); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ai-opt.rec .ai-rank { color: var(--ai); }
.ai-title { font-weight: var(--weight-semibold); }
.ai-rec { color: var(--ai); font-weight: var(--weight-medium); font-size: var(--text-xs); white-space: nowrap; margin-left: 4px; }
.ai-rec svg.i { width: 12px; height: 12px; color: var(--ai); vertical-align: -1px; }
.ai-sub { margin-top: 2px; }
.ai-score { text-align: right; line-height: 1.1; }
.ai-score b { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.ai-score small { color: var(--text-3); font-size: var(--text-xs); }
.ai-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0 26px; }
.ai-metrics small { display: block; color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; }
.ai-metrics b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-metrics b.warn { color: var(--warn); } .ai-metrics b.crit { color: var(--crit); }
.ai-actions { gap: 8px; margin: 12px 0 0 26px; }
.ai-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0 26px; font-size: var(--text-xs); }
.ai-details dt { color: var(--text-3); }
.ai-details dd { margin: 0; }
.ai-note { display: flex; gap: 8px; padding: 12px 16px; font-size: var(--text-xs); color: var(--text-2); border-bottom: 1px solid var(--line); }
.ai-note svg.i { color: var(--ok); flex: none; margin-top: 1px; }
.ai-chat { flex: 1; padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.ai-q { align-self: flex-end; max-width: 85%; padding: 6px 12px; border-radius: var(--radius-overlay); background: var(--bg-sunken); font-size: var(--text-sm); }
.ai-a { font-size: var(--text-sm); line-height: 1.45; }
.ai-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-ask { display: flex; align-items: center; gap: 6px; margin: 8px 16px 10px; padding: 0 4px 0 12px; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); }
.ai-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ai-ask input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--text); }
.ai-ask .icon-btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-2); }
.ai-foot { display: flex; align-items: center; gap: 6px; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.tlx .bar.ghost { cursor: default; border-style: dashed; }
.tlx .bar.ghost svg.i { color: var(--ai); }
.icon-btn.bell { position: relative; }
.icon-btn.bell .badge-count[hidden] { display: none; }
ui-grid tr.fresh td { animation: fresh-row 9s ease-out forwards; }
@keyframes fresh-row { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { ui-grid tr.fresh td { animation: none; background: var(--accent-soft); } }
/* Met de voorstellen open is de rechterkolom breder (minstens zo breed als in schets 02) */
.tlp.ai-open { grid-template-columns: minmax(0, 1fr) max(var(--tl-right, 0px), clamp(420px, 30vw, 540px)); }

/* ---------- Feedback (dag 9) ---------- */
.sb-btn { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text-2); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.sb-btn:hover { color: var(--text); background: var(--bg-hover); }
.fb-form p { margin: 0 0 10px; }
.fb-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: var(--text-sm); }
.fb-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fb-form .xs { font-size: var(--text-xs); margin: 8px 0 0; }
.fb-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.fb-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.fb-list li .fb-meta { grid-column: 2; color: var(--text-3); font-size: var(--text-xs); }
.fb-list li .fb-text { grid-column: 2; white-space: pre-wrap; }
.fb-list li time { grid-row: 1; grid-column: 3; color: var(--text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.fb-list li .avatar { grid-row: 1 / 3; }
.fb-list li.fresh { animation: fresh-row 6s ease-out forwards; }
.fb-list .empty { display: block; color: var(--text-3); }

/* ---------- iPhone (schets 06): tabbalk, geen rail en statusbalk ---------- */
.tabbar { display: none; }
@media (max-width: 699px) {
  ui-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
  ui-topbar, ui-rail, ui-statusbar { display: none !important; }
  .workspace { grid-column: 1; grid-row: 1; }
  .tabbar { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg-elevated); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; font-size: 11px; color: var(--text-2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a svg.i { width: 22px; height: 22px; }
  .tabbar .badge-count { top: 4px; right: calc(50% - 22px); }
  ui-toast { left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); }
  ui-toast .toast { font-size: 14px; padding: 12px 8px 12px 14px; }
  ui-toast .toast .toast-text span { font-size: 13px; }
  .phone-notice svg.i { width: 30px; height: 30px; }
  .phone-notice h1 { font-size: var(--text-xl); }
}

/* ---------- Monitor en profiel op de iPhone (schets 06) ---------- */
.pm { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--bg); font-size: 15px; overscroll-behavior: contain; }
.pm-head { padding: calc(14px + env(safe-area-inset-top)) 16px 6px; }
.pm-head h1 { margin: 0; font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -.01em; }
.pm-tabs { position: sticky; top: 0; z-index: 2; padding: 6px 16px 10px; background: var(--bg); }
.pm-tabs .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.pm-tabs .seg button { height: 32px; font-size: 13px; }
.pm-body { padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
.pm-sec { margin-top: 14px; }
.pm-sec > h2 { margin: 0 4px 8px; font-size: 14px; font-weight: normal; color: var(--text-2); }
.pm-sec > h2 .faint { font-weight: normal; }
.pm-pad { padding: 4px 4px 0; margin: 6px 0 0; font-size: 13px; }
.pm-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.pm-card h3 { margin: 8px 0 2px; font-size: 16px; font-weight: var(--weight-semibold); }
.pm-card p { margin: 0; font-size: 14px; }
.pm-card.attn { background: color-mix(in srgb, var(--crit-soft) 100%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--crit) 30%, var(--line)); }
.pm-big { width: 100%; height: 44px; margin-top: 12px; justify-content: center; font-size: 15px; border-radius: 10px; gap: 8px; }
.pm-feature { padding: 0; overflow: hidden; cursor: pointer; }
.pm-map { display: block; height: 150px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.pm-fbody { padding: 12px 16px 10px; }
.pm-fhead { align-items: flex-start; gap: 12px; }
.pm-fhead h3 { margin: 0 0 2px; }
.pm-fhead p { font-size: 13px; }
.pm-eta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.pm-eta b { font-size: 24px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pm-eta span { font-size: 13px; }
.pm-feature .progress { margin: 12px 0 10px; }
.pm-stops { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pm-stops li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.pm-stops .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-stops .num { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pm .ld { min-width: 20px; height: 20px; font-size: 11px; }
.pm .ld.l { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pm .ld.d { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ok-mark { color: var(--ok); display: inline-flex; }
.pm-list { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pm-list:empty { display: none; }
.pm-list > .faint { margin: 0; padding: 14px 16px; }
.pm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-row:first-child { border-top: 0; }
.pm-row:active:not(.static) { background: var(--bg-hover); }
.pm-row:disabled { cursor: default; color: var(--text-2); }
.pm-row:disabled .toggle { opacity: .5; }
.pm-row > svg.i { color: var(--text-3); flex: none; }
.pm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pm-row-main b { font-weight: var(--weight-medium, 500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-main small { font-size: 13px; color: var(--text-3); line-height: 1.35; }
.pm-row-side { flex: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.pm-row .toggle { width: 44px; height: 26px; }
.pm-row .toggle::after { width: 22px; height: 22px; }
.pm-row .toggle.on::after { left: 20px; }
.pm-row[aria-pressed="true"] b { color: var(--accent); }
.pm-ev { display: grid; grid-template-columns: 44px 18px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pm-ev:first-child { border-top: 0; }
.pm-ev time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pm-ev svg.i { margin-top: 2px; color: var(--text-3); }
.pm-ev.warn svg.i { color: var(--warn); }
.pm-ev.crit svg.i { color: var(--crit); }
.pm-ev.ok svg.i { color: var(--ok); }
.pf-me .row { gap: 14px; }
.pf-me b { font-size: 17px; }
.pf .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.pf .seg button { height: 34px; font-size: 14px; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }

/* Venster van onder (rit, voorstellen) */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg-elevated); transform: translateY(100%); transition: transform 220ms var(--ease); padding-top: env(safe-area-inset-top); }
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: var(--weight-semibold); }
.sheet-head .icon-btn { width: 40px; height: 40px; }
.sheet-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
.sheet-body .ai-head .insp-close { display: none; }
.sheet-body .ai-opt { padding: 14px; }
.sheet-body .ai-actions .btn { height: 42px; font-size: 15px; }
.sheet-body .mon { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* Kaart op de iPhone: alleen de kaart en zoeken; de monitor zit in zijn eigen tab */
@media (max-width: 699px) {   /* iPhone; niet in een smal tweede paneel op de Mac */
  html:not(.embedded) .kp { grid-template-columns: minmax(0, 1fr); }
  html:not(.embedded) :is(.kp-mon, .kp-split, .kp .kp-palette, .kp .zoom-ctl) { display: none; }   /* zoomen met twee vingers */
  html:not(.embedded) .kp-tools { left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); }
  html:not(.embedded) .kp .map-search { flex: 1 1 auto; }
  html:not(.embedded) .map-search label { height: 42px; }
  html:not(.embedded) .map-search input { font-size: 16px; }   /* 16px: iOS zoomt dan niet in bij het tikken */
}

/* Melding met een actie: de knop onder de tekst, zodat de tekst de breedte houdt */
ui-toast .toast:has([data-action]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; row-gap: 8px; }
ui-toast .toast:has([data-action]) [data-action] { grid-column: 2; grid-row: 2; justify-self: start; }
ui-toast .toast:has([data-action]) .toast-close { grid-column: 3; grid-row: 1; }

/* Statusbalk: één regel; wat het minst zegt valt het eerst weg */
ui-statusbar > * { white-space: nowrap; }
ui-statusbar .row { flex: none; }
@media (max-width: 1400px) { ui-statusbar .sb-fictief, ui-statusbar [data-db] { display: none; } }

/* ---------- iPad en andere aanraakschermen (schets 05) ---------- */
.rail-toggle, .tl-hint { display: none; }
@media (pointer: coarse) and (min-width: 700px) {
  /* Menu links inklapbaar; standaard dicht zodat de tijdlijn de ruimte krijgt */
  .rail-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -6px; color: var(--text-2); }
  html:not(.rail-open) ui-app { grid-template-columns: 0 minmax(0, 1fr); }
  html:not(.rail-open) ui-rail { display: none; }
  .rail-item { padding: 10px 0 9px; }

  /* Zoeken als icoon: tikken klapt het veld uit */
  ui-topbar .search { flex: 0 0 40px; width: 40px; padding: 0 10px; margin: 0 0 0 auto; border-color: transparent; background: transparent; transition: flex-basis var(--dur-fast) var(--ease); cursor: pointer; }
  ui-topbar .search input { width: 0; min-width: 0; padding: 0; }
  ui-topbar .search kbd { display: none; }
  ui-topbar .search:focus-within { flex-basis: min(420px, 40vw); border-color: var(--line-strong); background: var(--bg-elevated); cursor: text; }
  ui-topbar .search:focus-within input { width: auto; flex: 1; }

  /* Vingergrootte: knoppen, segmenten en chips minstens 40 px hoog */
  .btn { height: 40px; padding: 0 14px; }
  .btn.sm { height: 34px; padding: 0 11px; font-size: var(--text-sm); }
  .chip { height: 34px; padding: 0 11px; }
  .icon-btn { width: 40px; height: 40px; }
  .seg > button { min-height: 36px; padding: 0 14px; }
  .tl-tools .zoom, .tl-tools .sep { display: none; }   /* zoomen met twee vingers */

  :root { --row-h: 44px; --row-h-compact: 40px; }

  /* Tijdlijn: rijen van 60 px, balken en tekst groter */
  .tlx { --tl-row: 60px; }
  .tlx-inner { --label: 248px; }
  .tlx-head { height: 44px; }
  .tlx .bar { top: 9px; height: calc(var(--tl-row) - 18px); font-size: 14px; padding: 0 10px; gap: 8px; }
  .tlx .tl-row-label .t { font-size: 15px; }
  .tlx .tl-row-label .s { font-size: 13px; }
  .tlx .eta-mark { top: 7px; height: calc(var(--tl-row) - 14px); }

  .tlp-main .panel-body { position: relative; }
  .tl-hint { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 8; padding: 9px 14px; border-radius: var(--radius-overlay, 8px); border: 1px solid var(--line); background: var(--bg-overlay); box-shadow: var(--shadow-overlay); color: var(--text-2); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; transition: opacity 400ms var(--ease); }
  .tl-hint[hidden] { display: none; }
  .tl-hint.gone { opacity: 0; }
}

/* Compacte voorstellen (iPad): sleutel en waarde, knoppen onderaan */
.ai-compact { display: flex; flex-direction: column; min-height: 100%; }
.ai-kv { margin: 0; border-top: 1px solid var(--line); }
.ai-kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.ai-kv > div.sel { background: var(--ai-soft); }
.ai-kv dt { color: var(--text-2); font-size: var(--text-sm); }
.ai-kv dd { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--text-md); font-variant-numeric: tabular-nums; min-width: 0; }
.ai-kv dd > span:last-child:not(:first-child) { margin-left: auto; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 5px; }
.ai-kv dd > .faint:last-child { margin-left: 0; }
.ai-kv .crit-text .dot { color: var(--crit); }
.ai-compact-actions { margin-top: auto; display: grid; gap: 10px; padding: 18px 16px 16px; }
.ai-compact-actions .btn { justify-content: center; height: 44px; font-size: var(--text-md); }
.crit-text { color: var(--crit); }

/* ---------- Afwezig: rooster van twee weken ---------- */
.aw { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--aw-right, clamp(320px, 24vw, 420px)); grid-template-rows: minmax(0, 1fr); }
.aw-main { grid-column: 1; grid-row: 1; }
.aw-side { grid-column: 2; grid-row: 1; }
.aw-split { grid-column: 2; grid-row: 1; }
.aw-main > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.aw-side > .panel-body { overflow: auto; }
.aw-tools { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.aw-tools:not([data-fit="0"]) > .sep { display: none; }   /* past het niet: bladeren op een eigen regel */
.aw-tools[data-fit="3"] > .aw-range { display: none; }    /* nog smaller: de periode staat ook boven het rooster */
.aw-range { min-width: 130px; font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.aw-bar-top { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aw-legend { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--text-xs); color: var(--text-2); }
.aw-key { display: inline-flex; align-items: center; gap: 6px; }
.aw-key i { width: 14px; height: 10px; border-radius: var(--radius-mark); background: var(--k-fill); border: 1px solid var(--k-line); }
.aw-key b { color: var(--text-3); font-weight: normal; font-variant-numeric: tabular-nums; }
.aw-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.aw-grid { --label: 236px; --row: 40px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aw-head { display: flex; flex: none; border-bottom: 1px solid var(--line); background: var(--bg-elevated); }
.aw-corner { width: var(--label); flex: none; padding: 0 14px 6px; display: flex; align-items: flex-end; font-size: var(--text-xs); color: var(--text-3); border-right: 1px solid var(--line); text-transform: capitalize; }
.aw-days { flex: 1; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.aw-day { display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.aw-day:first-child { border-left: 0; }
.aw-day small { font-size: var(--text-xs); color: var(--text-3); }
.aw-day b { font-size: var(--text-md); font-weight: var(--weight-medium); }
.aw-day.we { background: var(--bg-subtle); }
.aw-day.today { color: var(--accent); }
.aw-day.today small { color: var(--accent); }
.aw-body { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; }
/* De dagkolommen, vandaag en de nu-lijn lopen over de hele hoogte van de rijen, ook als je scrolt */
.aw-rows { position: relative; min-height: 100%; }
.aw-cols { position: absolute; top: 0; bottom: 0; left: var(--label); right: 0; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); pointer-events: none; }
.aw-cols i { border-left: 1px solid var(--line); }
.aw-cols i:first-child { border-left: 0; }
.aw-cols i.we { background: color-mix(in srgb, var(--bg-subtle) 80%, transparent); }
.aw-cols i.today, .aw-cols i.pick { background: var(--accent-softer); }
/* De dag(en) van de periode in de bovenbalk: zachte vulling in de kop */
.aw-day.pick { background: var(--accent-soft); }
.aw-now { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; background: var(--live); z-index: 2; }
.aw-group { z-index: 4; display: flex; gap: 8px; align-items: center; height: 28px; padding: 0 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); font-size: var(--text-sm); font-weight: var(--weight-semibold); position: sticky; top: 0; }
.aw-none { position: relative; z-index: 1; padding: 10px 14px; font-size: var(--text-sm); border-bottom: 1px solid var(--line); background: var(--bg-elevated); width: var(--label); box-sizing: border-box; }
.aw-row { display: flex; min-height: var(--row); border-bottom: 1px solid var(--line); }
.aw-label { position: sticky; left: 0; z-index: 1; width: var(--label); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-elevated); border-right: 1px solid var(--line); min-width: 0; }
.aw-label svg.i { color: var(--text-3); flex: none; }
.aw-label > div { min-width: 0; display: flex; flex-direction: column; }
.aw-label b { font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-label small { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-lane { position: relative; flex: 1; min-width: 0; cursor: copy; }
.aw-lane:hover { background: var(--bg-hover); }
.aw-bar { position: absolute; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 10px; box-sizing: border-box;
  border-radius: var(--radius-mark); border: 1px solid var(--k-line); background: var(--k-fill); color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; overflow: hidden; white-space: nowrap; cursor: pointer; }
.aw-bar svg.i { flex: none; color: var(--k-ink); }
.aw-bar span { overflow: hidden; text-overflow: ellipsis; }
.aw-bar em { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: var(--text-xs); color: var(--warn); flex: none; }
.aw-bar em svg.i { color: var(--warn); }
.aw-bar.narrow { padding: 0; justify-content: center; }
.aw-bar.narrow span, .aw-bar.narrow em { display: none; }
.aw-bar:hover { filter: brightness(.97); }
.aw-bar.sel { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px var(--accent); z-index: 1; }
.aw-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Per soort: zachte vulling en een dunne rand in dezelfde tint; materieel gearceerd zoals op de tijdlijn */
.k-verlof   { --k: var(--dept-import); }
.k-ziek     { --k: var(--dept-pakket); }
.k-cursus   { --k: var(--dept-export); }
.k-afspraak { --k: var(--dept-retail); }
.k-verlof, .k-ziek, .k-cursus, .k-afspraak { --k-fill: color-mix(in srgb, var(--k) 14%, var(--bg-elevated)); --k-line: color-mix(in srgb, var(--k) 45%, var(--bg-elevated)); --k-ink: color-mix(in srgb, var(--k) 80%, var(--text)); }
.k-onderhoud, .k-reparatie, .k-keuring { --k-fill: repeating-linear-gradient(-45deg, var(--bg-sunken) 0 4px, var(--bg-elevated) 4px 9px); --k-line: var(--line-strong); --k-ink: var(--text-2); }
.k-reparatie { --k-line: color-mix(in srgb, var(--warn) 40%, var(--line-strong)); }
.aw-key.k-onderhoud i, .aw-key.k-reparatie i, .aw-key.k-keuring i { background: var(--k-fill); }

/* Rechts */
.aw-detail .insp-head { padding: 14px 16px 12px; }
.aw-detail .insp-head h2 { margin: 6px 0 4px; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.aw-detail .insp-head p { margin: 0; font-size: var(--text-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-control); border: 1px solid var(--k-line); background: var(--k-fill); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.aw-tag svg.i { color: var(--k-ink); }
.aw-kv { margin: 0; border-top: 1px solid var(--line); }
.aw-kv > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.aw-kv dt { color: var(--text-2); }
.aw-kv dd { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); }
.aw-clash { list-style: none; margin: 0 0 8px; padding: 0; }
.aw-clash li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.aw-clash li:first-child { border-top: 0; }
.aw-clash .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.aw-detail .link, .aw-clash .link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; font-weight: var(--weight-semibold); cursor: pointer; font-variant-numeric: tabular-nums; }
.aw-items { display: flex; flex-direction: column; margin: 0 -8px; }
.aw-items > p { margin: 0 8px; }
.aw-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: var(--radius-control); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.aw-item:hover { background: var(--bg-hover); }
.aw-item .grow { min-width: 0; display: flex; flex-direction: column; }
.aw-item b { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-item small { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-dot { width: 12px; height: 12px; border-radius: var(--radius-mark); border: 1px solid var(--k-line); background: var(--k-fill); flex: none; }

/* Venster */
.aw-form { display: flex; flex-direction: column; gap: 10px; }
.aw-f-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; font-size: var(--text-sm); }
.aw-f-row > label:first-child, .aw-f-row > span:first-child { color: var(--text-2); }
.aw-f-row select, .aw-f-row input[type="text"], .aw-f-row input[type="date"], .aw-f-row input[type="time"] { height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: var(--text-sm); box-sizing: border-box; min-width: 0; }
.aw-f-row select, .aw-f-row input[type="text"] { width: 100%; }
.aw-f-row .row { gap: 8px; }
.aw-f-row input[type="date"] { flex: 1; }
.aw-f-row input[type="time"] { width: 110px; }
.aw-f-row input:disabled { color: var(--text-3); background: var(--bg-subtle); }
.aw-f-row :is(select, input):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.aw-f-row .seg { justify-self: start; }
.aw-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.aw-f-clash { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-control); background: var(--warn-soft); font-size: var(--text-sm); }
.aw-f-clash svg.i { color: var(--warn); margin-top: 2px; flex: none; }
.aw-f-clash div { display: flex; flex-direction: column; gap: 2px; }
.aw-f-clash span { color: var(--text-2); }
@media (pointer: coarse) and (min-width: 700px) { .aw-grid { --row: 52px; } }

/* ---------- Belading: bezetting per rit ---------- */
.bl { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: minmax(0, 1fr) var(--bl-right, clamp(360px, 27vw, 460px)); grid-template-rows: minmax(0, 1fr); }
.bl-main { grid-column: 1; grid-row: 1; }
.bl-side { grid-column: 2; grid-row: 1; }
.bl-split { grid-column: 2; grid-row: 1; }
.bl-main > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.bl-main > .panel-body > ui-grid { flex: 1; min-height: 0; }
.bl-side > .panel-body { overflow: auto; }
.bl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bl-kpi { display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; border-left: 1px solid var(--line); min-width: 0; }
.bl-kpi:first-child { border-left: 0; }
.bl-kpi small { font-size: var(--text-xs); color: var(--text-3); }
.bl-kpi b { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.bl-kpi span { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl .grid td.fill { width: 28%; max-width: 0; }
.bl .grid td.fill-s { width: 16%; max-width: 0; }
.bl-meter { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.bl-meter span { font-size: var(--text-sm); }
.bl-meter small { color: var(--text-3); font-size: var(--text-xs); }
.bl-meter .meter { height: 5px; }
.bl .grid td small.faint { font-size: var(--text-xs); }
.bl-detail .insp-head { padding: 14px 16px 12px; }
.bl-detail .insp-head h2 { margin: 6px 0 2px; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.bl-detail .insp-head p { margin: 0; font-size: var(--text-sm); }
.bl-detail .insp-head .insp-close { margin-left: 8px; }
.bl-issues p { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--text-sm); }
.bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bl-stops { list-style: none; margin: 0; padding: 0; }
.bl-stops li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.bl-stops li:first-child { border-top: 0; }
.bl-stops li.done { color: var(--text-2); }
.bl-stops .grow { min-width: 0; display: flex; flex-direction: column; }
.bl-stops .grow b { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-stops .grow small { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-stops .ld.l { color: var(--accent); }
.bl-stops .ld.d { color: var(--ok); }
.bl-delta { width: 44px; text-align: right; color: var(--text-3); }
.bl-delta.plus { color: var(--accent); }
.bl-after { width: 64px; text-align: right; }
.bl-goods { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bl-goods th { text-align: left; font-weight: normal; font-size: var(--text-xs); color: var(--text-3); padding: 0 6px 6px 0; }
.bl-goods td { padding: 6px 6px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.bl-goods td small { display: block; font-size: var(--text-xs); color: var(--text-3); }
.bl-goods .r { text-align: right; }
.bl-goods .req { color: var(--accent); }
.bl-goods .req svg.i { width: 12px; height: 12px; vertical-align: -1px; }
.bl-top { display: flex; flex-direction: column; margin: 0 -8px; }
@media (max-width: 1280px) { .bl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bl-kpi:nth-child(n+4) { display: none; } }

/* ---------- Toegang (demo op internet) ---------- */
html.gated ui-app { visibility: hidden; }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
.gate-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); box-shadow: var(--shadow-overlay); }
.gate-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--accent); color: #fff; }
.gate-mark svg.i { width: 24px; height: 24px; }
.gate-card h1 { margin: 4px 0 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.gate-card p { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.gate-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); color: var(--text-2); }
.gate-field input, .regie-gate input { height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 16px; }
.gate-field input:focus, .regie-gate input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gate-card .btn { height: 44px; justify-content: center; font-size: var(--text-md); }
.gate-error { color: var(--crit); font-size: var(--text-sm); }
.regie-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; max-width: 560px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card, 8px); background: var(--bg-elevated); }
.regie-gate > svg.i { color: var(--text-3); width: 28px; height: 28px; }
.regie-gate h2 { margin: 0 0 2px; font-size: var(--text-lg); }
.regie-gate p { margin: 0; font-size: var(--text-sm); }
.regie-gate .row, .regie-gate .gate-error { grid-column: 2; gap: 8px; }
.regie-gate input { height: 36px; font-size: var(--text-md); flex: 1; }

/* ---------- Draaiboek op de regiepagina (10.2) ---------- */
.db { display: flex; flex-direction: column; }
.db-prep { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.db-prep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.db-clock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.db-total { display: flex; flex-direction: column; min-width: 110px; }
.db-total b { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.1; }
.db-total span { font-size: var(--text-sm); }
.db-bar { position: relative; height: 8px; border-radius: var(--radius-mark); background: var(--bg-sunken); }
.db-bar i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-mark); background: var(--accent); transition: width 500ms linear; }
.db-bar b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.db-btns { gap: 8px; }
.db-steps { list-style: none; margin: 0; padding: 0; }
.db-step { display: grid; grid-template-columns: 54px minmax(0, 1fr) 210px; gap: 14px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.db-step.done { color: var(--text-2); }
.db-step.done .db-min { color: var(--ok); }
.db-step.now { background: var(--accent-softer); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.db-min { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-2); padding-top: 1px; }
.db-main { min-width: 0; }
.db-main .row { gap: 10px; align-items: baseline; }
.db-main b { font-size: var(--text-md); }
.db-main p { margin: 2px 0 0; font-size: var(--text-sm); }
.db-main ul { margin: 8px 0 4px; padding-left: 18px; font-size: var(--text-sm); }
.db-main ul li { margin: 2px 0; }
.db-spent { margin-left: auto; font-size: var(--text-sm); color: var(--text-2); }
.db-scn { justify-self: stretch; }
.db-runs { padding: 12px 16px 16px; }
.db-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-bottom: 6px; }
.db-table th { text-align: left; font-weight: normal; font-size: var(--text-xs); color: var(--text-3); padding: 0 8px 6px 0; }
.db-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); }
.db-table .r { text-align: right; }
.db-table .ok-text { display: inline-flex; align-items: center; gap: 4px; }
.db-runs .link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-xs); cursor: pointer; }
@media (max-width: 980px) { .db-step { grid-template-columns: 46px minmax(0, 1fr); } .db-scn { grid-column: 2; } .db-clock { grid-template-columns: 1fr; } }

/* ---------- Werkbalken: alle bediening op één hoogte ----------
   Knop, chip, segment en icoonknop naast elkaar zijn even hoog: 32 px (bovenbalk 34 px, iPad 40 px).
   Acties in een werkbalk gebruiken dezelfde letter als de chips ernaast. */
:root { --tool-h: 32px; --top-h: 34px; }
:is(.panel-tools, .ed-tools, .tl-tools, .aw-tools, .aw-bar-top, .db-btns, .db-prep-row, .page-head, .bl-main .panel-tools) :is(.btn, .chip) { height: var(--tool-h); }
:is(.panel-tools, .ed-tools, .tl-tools, .aw-tools, .aw-bar-top, .db-btns, .db-prep-row) .btn.sm { padding: 0 11px; font-size: var(--text-sm); }
:is(.panel-tools, .ed-tools, .tl-tools, .aw-tools, .aw-bar-top, .db-btns) .icon-btn { width: var(--tool-h); height: var(--tool-h); }
:is(.panel-tools, .ed-tools, .tl-tools, .aw-tools) .seg, ui-topbar .seg { box-sizing: border-box; height: var(--tool-h); align-items: stretch; }
:is(.panel-tools, .ed-tools, .tl-tools, .aw-tools) .seg > button, ui-topbar .seg > button { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
ui-topbar .seg { height: var(--top-h); }
ui-topbar :is(.admin-picker, .search, .user-btn, .icon-btn) { height: var(--top-h); box-sizing: border-box; }
ui-topbar .icon-btn { width: var(--top-h); }
@media (pointer: coarse) and (min-width: 700px) {
  :root { --tool-h: 40px; --top-h: 40px; }
  :is(.panel-tools, .ed-tools, .tl-tools, .aw-tools) .seg > button { min-height: 0; }
  .field input, .input { height: var(--tool-h); }
  ui-topbar .search { width: var(--top-h); flex-basis: var(--top-h); }
}

/* De periode in de bovenbalk (Gisteren … Week) alleen op schermen die hem volgen: planbord, tijdlijn, afwezig en belading */
html[data-no-period] ui-topbar :is([data-period], [data-period-settings]) { visibility: hidden; }

/* ---------- Tweede scherm (pane.js): rechts een ander scherm, breedte met de splitter ---------- */
.pane2, .pane2-split, .pane-btn { display: none; }
@media (min-width: 1100px) and (pointer: fine) { .pane-btn { display: grid; } }
.pane-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
html.pane-open ui-app { grid-template-columns: 76px minmax(0, 1fr) var(--pane-w, clamp(480px, 38vw, 820px)); }
html.pane-open ui-statusbar { grid-column: 2 / -1; }
html.pane-open .pane2 { display: flex; flex-direction: column; grid-column: 3; grid-row: 2; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
html.pane-open .pane2-split { display: block; grid-column: 3; grid-row: 2; }
/* Kop van het paneel: dezelfde keuzelijst als ‘Alle afdelingen’ op het planbord */
.pane2-head { flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elevated); }
.pane2-pick.chip { height: var(--tool-h); padding: 0 10px; gap: 7px; background: var(--bg-elevated); color: var(--text); }
.pane2-pick.chip:hover, .pane2-pick.chip[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }
.pane2-pick svg.i { width: 14px; height: 14px; color: var(--text-3); }
.pane2-pick svg.i:last-child { width: 12px; height: 12px; }
.pane2-head .icon-btn { width: var(--tool-h); height: var(--tool-h); }
.pane2 iframe { flex: 1; display: block; width: 100%; min-height: 0; border: 0; background: var(--bg); }

/* In het paneel zelf: alleen het scherm, zonder bovenbalk, rail en statusbalk */
html.embedded ui-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html.embedded :is(ui-topbar, ui-rail, ui-statusbar, .tabbar) { display: none !important; }
html.embedded .workspace { grid-column: 1; grid-row: 1; }

/* ---------- Help (pages/help.js): inhoud links, tekst rechts, afbeeldingen met genummerde punten ---------- */
.help-btn[aria-pressed="true"] { color: var(--accent); }
.hp-wrap { height: 100%; min-height: 0; container: hpw / inline-size; }
.hp { display: grid; gap: 1px; background: var(--line); height: 100%; min-height: 0;
  grid-template-columns: var(--hp-left, 280px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.hp-nav { grid-column: 1; grid-row: 1; }
.hp-split { grid-column: 2; grid-row: 1; }
.hp-doc { grid-column: 2; grid-row: 1; overflow: auto; background: var(--bg-elevated); outline: none; scroll-behavior: auto; }
.hp-nav > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.hp-find { flex: none; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); }
.hp-search { display: flex; align-items: center; gap: 8px; height: var(--tool-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text-3); }
.hp-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--text-sm); color: var(--text); }
.hp-search:focus-within { border-color: var(--accent); }
.hp-toc, .hp-hits { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 1px; }
.hp-toc-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-control); color: var(--text-2); text-decoration: none; font-size: var(--text-md); }
.hp-toc-item svg.i { color: var(--text-3); flex: none; }
.hp-toc-item:hover { background: var(--bg-hover); color: var(--text); }
.hp-toc-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
.hp-toc-item[aria-current="true"] svg.i { color: var(--accent); }
.hp-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; border-radius: var(--radius-control); background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.hp-hit:hover { background: var(--bg-hover); }
.hp-hit small { font-size: var(--text-xs); color: var(--text-3); }
.hp-hit span { font-size: var(--text-sm); line-height: 1.4; }
.hp-hit mark, .hp-flash mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: inherit; border-radius: 2px; }
.hp-nohit { padding: 10px; font-size: var(--text-sm); }
.hp-bar { display: none; position: sticky; top: 0; z-index: 3; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-elevated); }
.hp-bar .chip { height: var(--tool-h); padding: 0 10px; gap: 7px; color: var(--text); }
.hp-bar .chip svg.i { color: var(--text-3); }

/* Tekst: groot genoeg om rustig te lezen */
.hp-article { max-width: 980px; margin: 0 auto; padding: 28px 40px 64px; font-size: 16px; line-height: 1.6; color: var(--text); }
.hp-title h1 { margin: 0; font-size: 28px; font-weight: var(--weight-semibold); letter-spacing: -.01em; }
.hp-title p { margin: 6px 0 0; font-size: var(--text-md); }
.hp-sec { padding-top: 36px; }
.hp-sec + .hp-sec { margin-top: 28px; border-top: 1px solid var(--line); }
.hp-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 23px; font-weight: var(--weight-semibold); }
.hp-sec h2 svg.i { width: 22px; height: 22px; color: var(--accent); }
.hp-sec h3 { margin: 30px 0 8px; font-size: 18px; font-weight: var(--weight-semibold); }
.hp-sec p, .hp-sec ul, .hp-sec ol { max-width: 72ch; }
.hp-sec ul, .hp-sec ol { padding-left: 1.3em; }
.hp-sec li { margin: 4px 0; }
.hp-lead { font-size: 17px; color: var(--text-2); margin: 0 0 14px; }
.hp-ui { font-weight: var(--weight-semibold); white-space: nowrap; }
.hp-sec a { color: var(--accent); text-decoration: none; }
.hp-sec a:hover { text-decoration: underline; }
.hp-sec kbd { font-size: 13px; line-height: 20px; padding: 0 6px; color: var(--text-2); white-space: nowrap; }
.hp-tip, .hp-note { display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; margin: 14px 0; padding: 10px 14px; border-radius: 6px; font-size: var(--text-md); }
.hp-tip { background: var(--accent-softer); }
.hp-note { background: var(--bg-subtle); }
.hp-tip svg.i, .hp-note svg.i { flex: none; margin-top: 4px; color: var(--accent); }
.hp-note svg.i { color: var(--text-3); }
.hp-steps { counter-reset: st; list-style: none; padding-left: 0 !important; }
.hp-steps > li { counter-increment: st; position: relative; padding-left: 40px; margin: 10px 0; }
.hp-steps > li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: var(--weight-semibold); }
.hp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.hp-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--text) !important; text-decoration: none !important; }
.hp-card:hover { background: var(--bg-hover); }
.hp-card svg.i { color: var(--accent); margin-bottom: 4px; }
.hp-card b { font-weight: var(--weight-semibold); }
.hp-card span { font-size: var(--text-sm); color: var(--text-2); line-height: 1.45; }
.hp-table-wrap { overflow-x: auto; }
.hp-table { border-collapse: collapse; font-size: var(--text-md); min-width: 520px; }
.hp-table th { text-align: left; font-size: var(--text-xs); color: var(--text-3); font-weight: normal; padding: 0 16px 6px 0; }
.hp-table td { padding: 8px 16px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.hp-table td:first-child { white-space: nowrap; }
.hp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; max-width: 80ch; margin: 0; }
.hp-dl dt { font-weight: var(--weight-semibold); }
.hp-dl dd { margin: 0; color: var(--text-2); }
.hp-end { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.hp-flash { animation: hp-flash 2.4s ease-out; border-radius: 4px; }
@keyframes hp-flash { 0%, 30% { background: color-mix(in srgb, var(--warn) 22%, transparent); } 100% { background: transparent; } }

/* Afbeeldingen met genummerde punten */
.hp-fig, .hp-anim { margin: 18px 0 22px; }
.hp-shot { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-subtle); cursor: zoom-in; aspect-ratio: 16 / 10; }
.hp-shot img { display: block; width: 100%; height: auto; }
.hp-missing .hp-shot { display: none; }
/* Donker en niet blauw: zo zijn ze niet te verwarren met de blauwe knoppen en bolletjes in de schermen zelf */
.hp-pin { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center;
  background: #1d1d22; color: #fff; font-size: 12.5px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur-fast) var(--ease); pointer-events: auto; }
.hp-pin.hp-on { transform: scale(1.25); }
.hp-fig figcaption, .hp-anim figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; font-size: var(--text-sm); color: var(--text-2); }
.hp-zoom-hint { font-size: var(--text-xs); color: var(--text-3); }
.hp-legend { list-style: none; padding: 0 !important; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 20px; max-width: none !important; }
.hp-legend li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 4px 6px; border-radius: var(--radius-control); font-size: var(--text-md); line-height: 1.45; }
.hp-legend li.hp-on { background: var(--bg-hover); }
:root[data-theme="dark"] .hp-num { background: #f2f2f4; color: #16161a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-num { background: #f2f2f4; color: #16161a; } }
.hp-num { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: #1d1d22; color: #fff; font-size: 12px; font-weight: var(--weight-semibold); }

/* Filmpjes */
.hp-vid { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-subtle); }
.hp-vid video { display: block; width: 100%; height: auto; cursor: pointer; }
.hp-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 20, 24, .62); color: #fff; cursor: pointer; transition: opacity var(--dur-fast) var(--ease); }
.hp-play svg.i { width: 26px; height: 26px; margin-left: 3px; }
.hp-vid.playing .hp-play { opacity: 0; pointer-events: none; }
.hp-print { display: none; }
.hp-anim-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

/* Zelf proberen */
.hp-try { margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hp-try-reset { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.hp-try-reset > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hp-try-reset small, .hp-try-item small { font-size: var(--text-sm); color: var(--text-2); line-height: 1.45; }
.hp-try-reset .btn { height: var(--tool-h); }
.hp-try-list { gap: 1px; background: var(--line); }
.hp-try-item { flex: 1 1 280px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 0; background: var(--bg-elevated); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.hp-try-item:hover { background: var(--bg-hover); }
.hp-try-item:disabled { opacity: .6; cursor: progress; }
.hp-try-item svg.i { flex: none; margin-top: 2px; color: var(--accent); }
.hp-try-item span { display: flex; flex-direction: column; gap: 2px; }
.hp-try-status { margin: 0 !important; padding: 0 16px; min-height: 0; font-size: var(--text-sm); }
.hp-try-status:not(:empty) { padding: 10px 16px; border-top: 1px solid var(--line); }
.hp-try-status .ok-text { display: inline-flex; align-items: center; gap: 6px; }
.hp-tasks > li { margin: 8px 0; }
.hp-tasks > li > span { margin-left: 4px; font-size: var(--text-sm); }

/* Groot bekijken */
.hp-lightbox { width: min(96vw, 1800px); max-width: none; max-height: 94vh; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); color: var(--text); }
.hp-lightbox::backdrop { background: rgba(10, 10, 12, .55); }
.hp-lb-inner { overflow: auto; max-height: calc(94vh - 32px); }
.hp-lightbox .hp-shot { cursor: zoom-out; }
.hp-lb-close { position: absolute; top: 8px; right: 8px; background: var(--bg-elevated) !important; }

/* Smal (tweede scherm, iPad staand, iPhone): de inhoud als keuzelijst boven de tekst */
@container hpw (max-width: 760px) {
  .hp { grid-template-columns: minmax(0, 1fr); }
  .hp-nav, .hp-split { display: none; }
  .hp-doc { grid-column: 1; }
  .hp-bar { display: flex; }
  .hp-article { padding: 18px 18px 48px; font-size: 15.5px; }
  .hp-legend { grid-template-columns: minmax(0, 1fr); }
  .hp-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .hp-dl dd { margin-bottom: 8px; }
  .hp-try-reset { flex-direction: column; align-items: stretch; }
  .hp-pin { width: 18px; height: 18px; margin: -9px 0 0 -9px; font-size: 10.5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .25); }
}
@container hpw (max-width: 480px) { .hp-pin { width: 16px; height: 16px; margin: -8px 0 0 -8px; font-size: 9.5px; } }

/* Afdrukken: alleen de tekst, alle hoofdstukken onder elkaar, met de afbeeldingen */
@media print {
  @page { margin: 16mm 14mm; }
  html, body, ui-app, .workspace, .hp-wrap, .hp, .hp-doc { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; }
  ui-topbar, ui-rail, ui-statusbar, .tabbar, .pane2, .pane2-split, .hp-nav, .hp-split, .hp-bar, ui-toast, .hp-play, .hp-vid video, .hp-try-list, .hp-try-reset .btn, .hp-zoom-hint, .hp-try-status { display: none !important; }
  .hp-print { display: block; width: 100%; }
  .hp-article { max-width: none; padding: 0; color: #000; font-size: 11pt; }
  .hp-sec { break-before: page; border-top: 0 !important; margin-top: 0 !important; padding-top: 0; }
  .hp-sec:first-of-type { break-before: auto; }
  .hp-fig, .hp-anim, .hp-try, .hp-table, .hp-steps > li, .hp-legend li { break-inside: avoid; }
  .hp-shot, .hp-vid { border-color: #ccc; }
  .hp-pin, .hp-num, .hp-steps > li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hp-sec a { color: #000; }
}

/* ---------- Lijsten: kolommen aan/uit (knop rechtsboven in de kop) en breedte slepen aan de rand van de kop ---------- */
ui-grid { position: relative; }
.grid th { position: sticky; }
.grid th:last-child { padding-right: 36px; }
.grid .col-resize { position: absolute; top: 0; right: 0; z-index: 2; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.grid .col-resize::after { content: ""; position: absolute; top: 7px; bottom: 7px; right: 0; width: 1px; background: transparent; transition: background-color var(--dur-fast) var(--ease) 120ms; }
.grid thead:hover .col-resize::after { background: var(--line-strong); }
.grid .col-resize:hover::after, .grid .col-resize.active::after { top: 0; bottom: 0; background: var(--accent); transition-delay: 0s; }
.grid.fixed-cols { table-layout: fixed; min-width: 0; }
.grid.fixed-cols td { max-width: none; }
.grid.fixed-cols td.fill, .grid.fixed-cols td.fill-s { width: auto; }
.grid :is(th, td).col-fill { padding: 0; }
.grid-cols-btn { position: absolute; top: 0; right: 0; z-index: 3; width: 32px; height: 33px; display: grid; place-items: center; padding: 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-elevated); color: var(--text-3); cursor: pointer; }
.grid-cols-btn:hover, .grid-cols-btn[aria-expanded="true"] { color: var(--text); background: var(--bg-hover); }
@media (pointer: coarse) and (min-width: 700px) { .grid-cols-btn { height: 41px; } }
/* Filterregel onder de kop (kolommenmenu → Filterregel), en onderin hoeveel er door het filter komen */
.grid .grid-frow th { top: var(--grid-head-h, 33px); height: auto; padding: 5px 4px 6px; border-top: 0; }
.grid .grid-frow th:first-child { padding-left: 10px; }
.grid .grid-frow th:last-child { padding-right: 36px; }
.gf { display: flex; align-items: center; height: 30px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); }
.gf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gf input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; padding: 0 6px 0 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-regular, 400); }
.gf input:focus, .gf input:focus-visible { outline: none; box-shadow: none; }
.gf-op { flex: none; display: grid; place-items: center; width: 24px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.gf-op:hover { color: var(--text); }
.grid thead tr:first-child th.filtered .th-sort::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.grid-foot { position: sticky; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 6px 14px;
  border-top: 1px solid var(--line); background: var(--bg-elevated); color: var(--text-2); font-size: var(--text-sm); }
@media (pointer: coarse) and (min-width: 700px) { .gf { height: 36px; } .gf-op { width: 32px; } }
/* Stops onder de gekozen rit op het planbord: één regel over de hele breedte */
.child-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.child-line .cl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.child-line .cl-goods { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.child-line .cl-state { margin-left: auto; padding-left: 12px; white-space: nowrap; }

/* ---------- Dubbel bemand: bijrijder ---------- */
.crew2 { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.crew2 svg.i { color: var(--accent); flex: none; }
.ch-tag { font-family: var(--font-ui); font-size: calc(1em / 0.94); letter-spacing: 0; }
.crew-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--accent); font-weight: var(--weight-medium); }
.crew-tag svg.i { width: 14px; height: 14px; }
.tlx .bar .crew { display: inline-flex; flex: none; }
.tlx .bar .crew svg.i { color: var(--text-2); }
.tlx .bar.co { border-style: dashed; cursor: default; }
/* Planscherm: vijf vakken; is het midden smal, dan wagen bovenaan en de bemanning eronder */
.ps-main { container: psmain / inline-size; }
@container psmain (max-width: 1000px) {
  .slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .slot[data-slot="truck"] { grid-area: 1 / 1 / 2 / 3; }
  .slot[data-slot="trailer"] { grid-area: 1 / 3 / 2 / 5; }
  .slot[data-slot="charter"] { grid-area: 1 / 5 / 2 / 7; }
  .slot[data-slot="driver"] { grid-area: 2 / 1 / 3 / 4; border-left: 0; border-top: 1px solid var(--line); }
  .slot[data-slot="codriver"] { grid-area: 2 / 4 / 3 / 7; border-top: 1px solid var(--line); }
}
.mon-co { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Rij- en rusttijden in de statusbalk: bron en actualiteit */
ui-statusbar [data-drt] svg { color: var(--ok); }
ui-statusbar [data-drt][data-state="stale"] { color: var(--warn); }
ui-statusbar [data-drt][data-state="stale"] svg { color: var(--warn); }
/* Rijtijd die na de laatste rit van vandaag nog over is: een zachte balk in de baan (geen rit, niet aan te klikken) */
.tlx .bar.drive-left { --c: var(--ok); cursor: default; z-index: 0; background: color-mix(in srgb, var(--ok) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--ok) 32%, transparent); }
.tlx .bar.drive-left .bar-txt > span { color: var(--ok); font-weight: var(--weight-medium); }
.tlx .bar.drive-left.warn { --c: var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.tlx .bar.drive-left.warn .bar-txt > span { color: var(--warn); }
.tlx .bar.drive-left.stale { opacity: .55; }
.tlx-inner.no-driving .bar.drive-left { display: none; }
.tl-row-label .drive .by { font-size: 10px; font-weight: var(--weight-medium); color: var(--text-3); margin-left: 2px; }
.tl-row-label .drive.stale .num { color: var(--text-3); }
/* Ritdetail: week, twee weken en de bron van de rijtijden */
.insp-note .drt-line { display: block; margin-top: 3px; color: var(--text-3); font-size: var(--text-xs); }
.drt-src { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; white-space: nowrap; }
.drt-src svg.i { color: var(--ok); }
.drt-src.stale, .drt-src.stale svg.i { color: var(--warn); }
.mon-drt { margin-top: 8px; }

/* ---------- Kaart: capaciteit per regio ---------- */
.map-areas, .map-area-labels { position: absolute; inset: 0; pointer-events: none; }
ui-map .map-areas { z-index: 1; }
ui-map .map-area-labels { z-index: 2; }
.map-area { fill: transparent; stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 1; stroke-linejoin: round; }
.map-area.quiet { fill: none; stroke: color-mix(in srgb, var(--text) 12%, transparent); }
/* Tekort (rood) en overschot (blauw) in drie stappen, precies genoeg grijs */
.map-area.short { stroke: color-mix(in srgb, var(--crit) 60%, transparent); }
.map-area.short.s1 { fill: color-mix(in srgb, var(--crit) 16%, transparent); }
.map-area.short.s2 { fill: color-mix(in srgb, var(--crit) 28%, transparent); }
.map-area.short.s3 { fill: color-mix(in srgb, var(--crit) 40%, transparent); }
.map-area.even { fill: color-mix(in srgb, var(--text-3) 22%, transparent); stroke: color-mix(in srgb, var(--text-3) 60%, transparent); }
.map-area.spare { stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
.map-area.spare.s1 { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.map-area.spare.s2 { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.map-area.spare.s3 { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.map-area.sel { stroke: var(--accent); stroke-width: 2; }
.map-area-label { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.cap-chip { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 9px 4px; border-radius: var(--radius-control); background: var(--bg-elevated);
  border: 1px solid var(--line); box-shadow: var(--shadow-overlay); white-space: nowrap; line-height: 1.15; }
.cap-chip b { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.cap-chip small { font-size: 11.5px; color: var(--text-2); }
.cap-chip.short b { color: var(--crit); }
.cap-chip.spare b { color: var(--accent); }
.cap-chip.even b { color: var(--text-2); }
.cap-chip.sel { box-shadow: 0 0 0 2px var(--accent), var(--shadow-overlay); }
.cap-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid; }
.cap-key.short { background: color-mix(in srgb, var(--crit) 28%, transparent); border-color: color-mix(in srgb, var(--crit) 60%, transparent); }
.cap-key.even { background: color-mix(in srgb, var(--text-3) 22%, transparent); border-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.cap-key.spare { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
/* Paneel rechts */
.cap-host { height: 100%; }
.cap { display: flex; flex-direction: column; min-height: 100%; overflow-x: hidden; }
.cap-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.cap-head ui-seg { flex-wrap: wrap; }
.cap-when { margin: -2px 0 0; }
.cap-custom { display: flex; gap: 10px; flex-wrap: wrap; }
.cap-custom label { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-xs); color: var(--text-3); }
.cap-custom input { font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: 5px 8px; }
.cap-sum { display: flex; gap: 8px; align-items: flex-start; font-weight: var(--weight-semibold); }
.cap-sum small { display: block; font-weight: var(--weight-regular); color: var(--text-3); font-size: var(--text-xs); margin-top: 2px; }
.cap-sum.short svg.i { color: var(--crit); margin-top: 3px; }
.cap-sum.ok svg.i { color: var(--ok); margin-top: 3px; }
.cap-error { color: var(--crit); font-size: var(--text-sm); margin: 0; }
.cap-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.cap-row { appearance: none; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(36px, 64px) auto auto; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; }
.cap-row:last-child { border-bottom: 0; }
.cap-row:hover { background: var(--bg-hover); }
.cap-row.sel { background: var(--accent-soft); }
.cap-name { min-width: 0; display: flex; flex-direction: column; }
.cap-name b { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-name small { font-size: var(--text-xs); color: var(--text-3); }
.cap-bars { display: flex; flex-direction: column; gap: 3px; }
.cap-bar { display: block; height: 5px; border-radius: 3px; min-width: 2px; }
.cap-bar.need { background: color-mix(in srgb, var(--crit) 70%, transparent); }
.cap-bar.free { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.cap-nums { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cap-bal { justify-self: end; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: var(--radius-control); white-space: nowrap; }
.cap-bal.short { color: var(--crit); background: var(--crit-soft); }
.cap-bal.even { color: var(--text-2); background: var(--bg-subtle); }
.cap-bal.spare { color: var(--accent); background: var(--accent-soft); }
.cap-detail { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.cap-detail h3 { margin: 0; font-size: var(--text-md); }
.cap-detail .row { justify-content: space-between; align-items: center; }
.cap-detail .insp-label { margin: 6px 0 0; }
.cap-item { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
.cap-item .grow { min-width: 0; display: flex; flex-direction: column; }
.cap-item small { color: var(--text-3); font-size: var(--text-xs); }
.cap-item .num { white-space: nowrap; color: var(--text-2); font-size: var(--text-xs); }
.cap-item .req { color: var(--accent); }
.cap-detail .btn { align-self: flex-start; margin-top: 6px; }
.cap-pad { padding: 12px 16px; margin: 0; }
.cap-how { display: flex; gap: 6px; align-items: flex-start; margin-top: auto; }
.cap-how svg.i { flex: none; margin-top: 2px; }

/* Statusbalk: nooit breder dan het scherm; wat het minst belangrijk is valt eerst weg */
ui-statusbar { min-width: 0; overflow: hidden; }
ui-statusbar > * { flex-shrink: 0; }
@media (max-width: 1720px) { ui-statusbar [data-db] { display: none; } }
@media (max-width: 1440px) { ui-statusbar .sb-fictief { display: none; } }

/* Kaart: laden en lossen als speld. De punt staat op de plek (vierkant 45° gedraaid met drie ronde hoeken). */
/* Vaste kleuren, ook in donker: witte letter blijft leesbaar op de kaart */
.map-pin { --pin: #0a66e4; position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -34px 0 0 -14px; pointer-events: auto; cursor: default; }
.map-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.map-pin.unload { --pin: #178244; }
.map-pin b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 12.5px; font-weight: var(--weight-semibold); line-height: 1; }
.map-pin:hover { z-index: 1; }
.map-pin:hover::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 35%, transparent), 0 1px 4px rgba(0, 0, 0, .35); }
/* In de legenda kleiner en zonder verschuiving */
.kp-legend .map-pin.in-legend { position: relative; width: 18px; height: 18px; margin: 0 2px 4px 1px; flex: none; }
.kp-legend .map-pin.in-legend b { font-size: 10px; }
.kp-legend .map-pin.in-legend::before { border-width: 1.5px; }

/* <ui-fit>: rijen en tegels die niet rommelig omslaan (zie ui-fit.js) */
ui-fit { display: flex; flex-wrap: wrap; align-items: center; }
ui-fit[mode="tiles"] { display: grid; grid-template-columns: repeat(var(--fit-cols, 1), minmax(0, 1fr)); align-items: stretch; }
ui-fit > .fit-br { display: none; flex-basis: 100%; height: 0; }
ui-fit[data-fit="1"] > .fit-br[data-lv~="1"], ui-fit[data-fit="2"] > .fit-br[data-lv~="2"], ui-fit[data-fit="3"] > .fit-br[data-lv~="3"] { display: block; }

/* Zoeken bovenin (search.js): één rand om het veld, geen tweede focusrand om het invoerveld zelf */
:is(.search, .map-search, .ai-ask, .hp-search) :is(input, textarea):focus-visible { box-shadow: none; }
.kp .map-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.search .gs-clear { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.search .gs-clear:hover { background: var(--bg-hover); color: var(--text); }
.search .gs-clear[hidden], .search:has(.gs-clear:not([hidden])) kbd { display: none; }
.search.filtering { background: var(--accent-softer); }
.search.filtering > svg.i { color: var(--accent); }

.gs-panel { position: fixed; z-index: 80; max-height: min(72vh, 680px); overflow: auto; overscroll-behavior: contain; padding: 6px 0 0; background: var(--bg-overlay); border: 1px solid var(--line); border-radius: var(--radius-overlay); box-shadow: var(--shadow-overlay); }
.gs-panel[hidden] { display: none; }
.gs-group + .gs-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.gs-label { display: flex; gap: 6px; align-items: baseline; padding: 8px 16px 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); }
.gs-label span { font-weight: var(--weight-regular, 400); color: var(--text-3); }
.gs-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px; cursor: pointer; }
.gs-opt.active { background: var(--accent-soft); }
.gs-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--bg-subtle); color: var(--text-2); }
.gs-ic.warn { background: color-mix(in srgb, var(--warn) 14%, var(--bg-overlay)); color: var(--warn); }
.gs-opt.top { min-height: 60px; }
.gs-opt.top .gs-ic { width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent); }
.gs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gs-t, .gs-s { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gs-t { font-size: var(--text-md); color: var(--text); }
.gs-opt.top .gs-t { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.gs-s { font-size: var(--text-sm); color: var(--text-2); }
.gs-panel mark { background: color-mix(in srgb, var(--accent) 20%, transparent); color: inherit; border-radius: 3px; }
.gs-badge { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-2); font-size: var(--text-xs); white-space: nowrap; }
.gs-badge.accent { background: var(--accent-soft); color: var(--accent); }
.gs-badge.ok { background: var(--ok-soft); color: var(--ok); }
.gs-badge.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.gs-badge.crit { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }
.gs-badge.faint { color: var(--text-3); }
.gs-acts { flex: none; display: none; gap: 6px; }
.gs-opt.active .gs-acts { display: flex; }
.gs-acts button { height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.gs-acts button:hover { background: var(--bg-hover); }
.gs-empty { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; font-size: var(--text-md); color: var(--text); }
.gs-empty small { font-size: var(--text-sm); color: var(--text-2); }
.gs-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--bg-overlay); font-size: var(--text-sm); color: var(--text-3); }
.gs-foot kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 3px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-subtle); font: inherit; font-size: var(--text-xs); color: var(--text-2); }
@media (max-width: 699px) {
  .gs-acts, .gs-foot { display: none !important; }
  .gs-opt { min-height: 56px; }
}

/* Gevonden via zoeken: even een zachte vulling die wegebt (geen rand, geen streep) */
@keyframes found-fill { 0%, 35% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background-color: transparent; } }
@keyframes found-ring { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.found:not(tr, .bar), tr.found > td { animation: found-fill 1.8s var(--ease) 1; }
.bar.found { animation: found-ring 1.8s var(--ease) 1; }

/* Tijden aanpassen (planbord/times.js) */
.tf-trip { margin: 0 0 4px; color: var(--text-2); font-size: var(--text-sm); }
.tf-trip b { color: var(--text); font-variant-numeric: tabular-nums; }
.tf-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-end { font-variant-numeric: tabular-nums; }
.tf-stops { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); max-height: 220px; overflow: auto; }
.tf-stops li { display: grid; grid-template-columns: 30px 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.tf-stops .tf-kind { display: grid; place-items: center; height: 20px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: var(--text-xs); color: var(--text-2); }
.tf-stops .tf-at { font-variant-numeric: tabular-nums; }
.tf-stops .tf-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tf-stops .tf-note { color: var(--text-3); font-size: var(--text-xs); }
.tf-stops li.fixed { color: var(--text-3); }
.tf-stops li.late .tf-at, .tf-stops li.late .tf-note { color: var(--warn); }
.tf-check { display: flex; gap: 8px; align-items: flex-start; min-height: 22px; padding: 8px 10px; border-radius: var(--radius-control); font-size: var(--text-sm); }
.tf-check.ok { background: var(--ok-soft); color: var(--ok); }
.tf-check.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.tf-check.crit { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit); }
.tf-check svg.i { flex: none; margin-top: 2px; }

/* Rit splitsen (planbord/split.js) */
.sp .aw-f-row.sp-top { align-items: start; }
.sp .aw-f-row.sp-top > span:first-child { padding-top: 4px; }
.sp-legs { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; }
.sp-legs .aw-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); }
.sp-legs .aw-check input { margin-top: 3px; }
.sp-legs small { display: block; color: var(--text-3); font-size: var(--text-xs); }
.sp-lead { margin: -4px 0 2px; font-size: var(--text-sm); }
.sp-legs .aw-check.is-off { color: var(--text-3); }
.sp-head { margin-top: 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); }
.sp-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.sp-preview:empty { display: none; }
.sp-card { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 8px 10px; min-width: 0; }
.sp-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; font-size: var(--text-sm); }
.sp-card-head span { color: var(--text-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.sp-card ol { list-style: none; margin: 0; padding: 0; }
.sp-card li { display: grid; grid-template-columns: 30px 70px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.sp-card li.fixed { color: var(--text-3); }
.sp-card li.split { background: var(--accent-softer); }
.sp-card li .tf-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-card li small { display: block; color: var(--text-3); font-size: var(--text-xs); }
.sp-card .tf-kind { display: grid; place-items: center; height: 20px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: var(--text-xs); color: var(--text-2); }
.sp-card .tf-at { font-variant-numeric: tabular-nums; }
.sp-card-res { margin-top: 6px; font-size: var(--text-xs); }

/* ---------- Velden in de balk (tijdlijn): voorbeeld en keuzes ---------- */
.bar .bar-ic { display: inline-grid; place-items: center; flex: none; width: auto; height: auto; }
/* Boordcomputer in de balk: zonder vlek en uitroepteken, behalve ‘niet aangekomen’ (zachte rode pil) */
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.bc { position: static; border-radius: 9px; background: none; }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.bc::after { content: none; }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.received { color: var(--ok); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.sent { color: var(--text-3); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.todo { color: var(--crit); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.resend { color: var(--warn); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.failed { color: var(--crit); background: var(--crit-soft); padding: 2px 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit) 30%, transparent); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.koel { color: var(--accent); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.mon { color: var(--text-3); }
.fb-lead { margin: 0 0 12px; font-size: var(--text-sm); }
.fb-prev { margin-bottom: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg); }
.fb-prev .tl-lane { position: relative; height: 46px; }
.fb-prev .bar { top: 2px; left: 0; width: 100%; height: 42px; cursor: default; }
.fb-prev .bar-txt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; }
.fb-prev .bar-txt > span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.fb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.fb-cols fieldset { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fb-cols legend { margin-bottom: 8px; padding: 0; color: var(--text-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fb-reset { align-self: flex-start; margin-top: 12px; }
@media (max-width: 600px) { .fb-cols { grid-template-columns: 1fr; } }

/* ---------- Rittenplanner: zelfde opbouw als het planscherm (trekkers links, rechts kop, vakken, werkbalk, ritten) ---------- */
.rp { display: grid; gap: 1px; background: var(--line); min-height: 0; height: 100%;
  grid-template-columns: var(--rp-left, clamp(280px, 20vw, 380px)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rp-trucks { grid-column: 1; grid-row: 1; }
.rp-main { grid-column: 2; grid-row: 1; container: rpmain / inline-size; }
.rp-split { grid-column: 2; grid-row: 1; }
.rp-trucks > .panel-body { display: flex; flex-direction: column; }
.rp-main > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.rp-main > .panel-body > ui-grid { flex: 1; min-height: 0; }
/* Vakken: de gekozen rit breder, dan trekker, trailer, chauffeur en de controle */
.rp .slots { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
.slot.static { cursor: default; }
.slot.static:hover { background: none; }
.rp-tools .note { color: var(--text-3); }
@container rpmain (max-width: 1100px) {
  .rp .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp .slot[data-slot="trip"] { grid-column: 1 / 3; }
  .rp .slot[data-slot="check"] { grid-column: 3 / 5; }
  .rp .slot[data-slot="truck"], .rp .slot[data-slot="trailer"], .rp .slot[data-slot="driver"] { border-top: 1px solid var(--line); grid-row: 2; }
  .rp .slot[data-slot="truck"] { grid-column: 1 / 2; border-left: 0; }
  .rp .slot[data-slot="trailer"] { grid-column: 2 / 3; }
  .rp .slot[data-slot="driver"] { grid-column: 3 / 5; }
}
@container rpmain (max-width: 760px) { .rp-tools .note { display: none; } }
/* Heel smal (tweede scherm ernaast): de rit over de hele breedte, daaronder twee vakken per regel */
@container rpmain (max-width: 680px) {
  .rp .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp .slot[data-slot="trip"] { grid-column: 1 / 3; grid-row: 1; }
  .rp .slot[data-slot="truck"] { grid-column: 1; grid-row: 2; border-left: 0; }
  .rp .slot[data-slot="trailer"] { grid-column: 2; grid-row: 2; }
  .rp .slot[data-slot="driver"] { grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--line); }
  .rp .slot[data-slot="check"] { grid-column: 2; grid-row: 3; border-top: 1px solid var(--line); }
}
/* Trekkerslijst: passend, let op of kan niet, met de reden */
.rp-fit { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.rp-fit .dot, .rp-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-round); background: var(--text-3); }
.rp-fit.ok .dot, .rp-dot.ok { background: var(--ok); }
.rp-fit.warn .dot, .rp-dot.warn { background: var(--warn); }
.rp-fit.crit .dot, .rp-dot.crit { background: var(--crit); }
.rp-fit .lbl { color: var(--text); }
.rp-used { flex: none; padding: 0 6px; border-radius: var(--radius-mark); background: var(--accent-soft); color: var(--accent); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); }
/* Kenteken en de rit uit het concept nooit afkappen; de reden ernaast wel (die staat in de tooltip) */
.rp .res-main { flex: 0 0 auto; min-width: 0; max-width: 52%; }
.rp .res-title .res-name { flex: none; overflow: visible; }
.rp .res-side { flex: 1 1 0; max-width: none; }
.rp-new { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: var(--weight-medium); }
.rp-msg { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.rp-msg.ok { color: var(--ok); }
.rp-msg.warn { color: var(--warn); }
.rp-msg.crit { color: var(--crit); }
.rp .grid td.fill { width: 26%; max-width: 0; }
.rp .grid td.fill-s { width: 16%; max-width: 0; }
.grid tr.rp-planned:not(.sel) td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* Onderaan: zoals Annuleren en Verwerken in het planscherm */
.rp-foot { align-items: center; margin-top: 0; position: static; }
.rp-sum { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-foot .btn { flex: none; }

/* Stops onder de gekozen rit: omhoog of omlaag slepen voor een andere volgorde. Een dunne lijn laat zien waar
   de stop terechtkomt; de andere stops krijgen geen streepjesrand */
.grid tr.child.sortable td { cursor: grab; }
.grid tr.child.sortable:hover td { background: var(--bg-hover); }
.grid tr.child.moving td { opacity: .45; }
.grid tr.child[data-drop="can"] td { border-bottom-style: solid; border-bottom-color: var(--line); }
.grid tr.child[data-drop="over"] td { background: var(--accent-softer); }
.grid tr.child.drop-above td { box-shadow: inset 0 2px 0 var(--accent); }
.grid tr.child.drop-below td { box-shadow: inset 0 -2px 0 var(--accent); }

/* Planscherm: stops ordenen beter zichtbaar. Het greepje is duidelijker, de kop zegt hoe het werkt, en het vak
   om een zending los te koppelen verschijnt pas tijdens het slepen (meer ruimte voor de stops) */
.act[data-drag] .grip { color: var(--text-2); }
.act[data-drag]:hover { background: var(--bg-hover); }
.act-head .act-hint { color: var(--text-3); font-weight: var(--weight-regular, 400); text-transform: none; letter-spacing: 0; }
.unlink { display: none; }
html.is-dragging .unlink { display: flex; }

/* Route met tussenstops. Is de kolom smal, dan worden eerst de tussenstops korter; is hij te smal
   dan alleen begin en eind met ‘+2’ (onder 220 px). De tekens (bezig, slot, bewaakt) blijven altijd zichtbaar */
.grid td.route .route-cell { display: block; container-type: inline-size; }
.grid td.route .route-in { display: flex; align-items: center; min-width: 0; }
.grid td.route .route-in > * { white-space: nowrap; }
.grid td.route .r-end { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.grid td.route .r-end:first-child { flex: 0 0 auto; max-width: 48%; }   /* de eerste stop heel, zolang dat kan */
.grid td.route .r-via { flex: 0 1000 auto; min-width: 1.4em; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.grid td.route .route-in > .arrow, .grid td.route .route-in .row-tags { flex: none; }
.grid td.route .r-more { display: none; flex: none; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-control); background: var(--bg-subtle);
  color: var(--text-2); font-size: var(--text-xs); line-height: 18px; }
@container (max-width: 219px) {
  .grid td.route .r-via, .grid td.route .r-via-arrow { display: none; }
  .grid td.route .r-more { display: inline-block; }
}

/* ---------- Tijdlijnbalk in twee regels: ritnummer en route, daaronder chauffeur, trekker en trailer ---------- */
.tlx { --tl-row: 56px; }
:is(.tlx, .fb-prev) .bar { flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 0; padding-top: 2px; }
:is(.tlx, .fb-prev) .bar-txt { line-height: 15px; min-height: 15px; }
:is(.tlx, .fb-prev) .bar-sub { position: sticky; left: calc(var(--label, 0px) + 8px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 13px; color: var(--text-2); }
.fb-prev .bar-sub { position: relative; left: 0; }
:is(.tlx, .fb-prev) .bar:is(.ghost, .absent, .drive-left, .notime), :is(.tlx, .fb-prev) .bar:not(:has(> .bar-sub)) { justify-content: center; padding-top: 0; }
.tlx .bar.notime .bar-sub, .tlx .bar.notime .bar-stop { display: none; }
@media (pointer: coarse) and (min-width: 700px) { .tlx { --tl-row: 62px; } :is(.tlx, .fb-prev) .bar { row-gap: 2px; } }

/* Op tijd of te laat: een pil rechtsboven. Oranje tot de grens (standaard 15 min), rood daarboven of bij een
   afspraak die niet haalbaar is, groen ‘op tijd’ als hij rijdt */
:is(.tlx, .fb-prev) .bar:is(.late, .ontime)::after { content: none; }
:is(.tlx, .fb-prev) .bar-chipbox { position: absolute; inset: 0; overflow: visible; display: flex; justify-content: flex-end; align-items: flex-start; pointer-events: none; z-index: 2; }
:is(.tlx, .fb-prev) .bar-chip { position: sticky; right: 6px; margin: 2px 3px 0 0; height: 16px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px;
  font-size: 12px; font-weight: var(--weight-semibold); line-height: 16px; white-space: nowrap; background: var(--bg-elevated); }
:is(.tlx, .fb-prev) .bar.late .bar-chip { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
:is(.tlx, .fb-prev) .bar.late.late-crit .bar-chip { color: var(--crit); background: color-mix(in srgb, var(--crit) 9%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit) 32%, transparent); }
:is(.tlx, .fb-prev) .bar.ontime .bar-chip { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 26%, transparent); }
:is(.tlx, .fb-prev) .bar:is(.late, .ontime) .bar-txt { max-width: calc(100% - 66px); }
:is(.tlx, .fb-prev) .bar.miss .bar-txt { max-width: calc(100% - 104px); }

/* Stops: een stip per laad- en losstop onderaan de balk. Gevuld als hij klaar is (groen op tijd, oranje, rood),
   een ring als hij nog komt (oranje of rood als de ETA al te laat is) */
:is(.tlx, .fb-prev) .bar .bar-stop { position: absolute; left: clamp(5px, var(--x), calc(100% - 5px)); bottom: 2px; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: var(--radius-round); z-index: 1; box-shadow: 0 0 0 1.5px var(--bg-elevated); }
.bar .bar-stop.done.ok { background: var(--ok); }
.bar .bar-stop.done.warn { background: var(--warn); }
.bar .bar-stop.done.crit { background: var(--crit); }
.bar .bar-stop.open { background: var(--bg-elevated); box-shadow: inset 0 0 0 1.5px var(--text-3), 0 0 0 1px var(--bg-elevated); }
.bar .bar-stop.open.warn { box-shadow: inset 0 0 0 1.5px var(--warn), 0 0 0 1px var(--bg-elevated); }
.bar .bar-stop.open.crit { box-shadow: inset 0 0 0 1.5px var(--crit), 0 0 0 1px var(--bg-elevated); }

/* ---------- Chauffeur wisselen (menu van een rit): vrij bovenaan, bezet of afwezig grijs eronder ---------- */
.sd .sd-q { width: 100%; height: 36px; margin: 2px 0 10px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; }
.sd-list { max-height: min(400px, 52vh); overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 2px 4px; }
.sd-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 5px 10px; border-radius: var(--radius-control); cursor: pointer; }
.sd-item[hidden] { display: none; }
.sd-item:hover { background: var(--bg-hover); }
.sd-item:has(input:checked) { background: var(--accent-softer); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.sd-item.off { cursor: default; }
.sd-item.off:hover { background: none; }
.sd-item.off .sd-main, .sd-item.off .avatar { opacity: .55; }
.sd-item input { margin: 0; accent-color: var(--accent); }
.sd-main { display: flex; flex-direction: column; min-width: 0; }
.sd-main b { font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-main .faint { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-state { font-size: var(--text-sm); text-align: right; white-space: nowrap; color: var(--text-2); }
.sd-item.ok .sd-state { color: var(--ok); }
.sd-item.warn .sd-state { color: var(--warn); }
.sd-item.crit .sd-state { color: var(--crit); }
.sd-item.cur .sd-state { color: var(--text-3); }
.sd-combo { margin-top: 12px; }

/* ---------- Periode… in de bovenbalk en het venster Periode (zoals de tab Datum in V3) ---------- */
ui-topbar .seg > button[data-period-custom] { gap: 6px; font-variant-numeric: tabular-nums; }
ui-topbar .seg > button[data-period-custom] svg.i { color: var(--text-3); }
ui-topbar .seg > button[data-period-custom][aria-pressed="true"] svg.i { color: var(--accent); }
.pd { display: flex; flex-direction: column; gap: 16px; }
.pd [hidden] { display: none !important; }
ui-topbar .period-set { flex: none; margin-left: -4px; color: var(--text-2); }
.pd-group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-group legend { padding: 0; margin-bottom: 8px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.pd-seg { align-self: flex-start; flex-wrap: nowrap; }
.pd-seg label { display: inline-flex; cursor: pointer; }
.pd-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pd-seg label span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; }
.pd-seg label:has(input:checked) span { background: var(--bg-elevated); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
.pd-seg label:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-range { display: flex; align-items: flex-end; gap: 10px; }
.pd-range label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--text-2); }
.pd-range input, .pd-row input { height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg-elevated); color: var(--text); font: inherit; }
.pd-row input[type="number"] { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.pd-range.off { opacity: .5; }
.pd-hint { margin: 0; font-size: var(--text-sm); }
.pd-hint.bad { color: var(--crit); }
.pd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-sm); }
.pd-row.nowrap { flex-wrap: nowrap; white-space: nowrap; }
.pd-row .btn { margin-left: auto; }
.pd-check { align-items: flex-start; font-size: var(--text-sm); }
.pd-check input { margin-top: 3px; }
.pd-note { margin: 0; font-size: var(--text-xs); }
.pd-scale { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--text-2); font-size: var(--text-xs); }
.pd-scale i { width: 8px; height: 8px; border-radius: var(--radius-round); margin-left: 4px; }
.pd-scale i.ok { background: var(--ok); } .pd-scale i.warn { background: var(--warn); } .pd-scale i.crit { background: var(--crit); }

/* Help: voorbeelden van de tekens op de tijdlijn (pil, stip) en de boordcomputer */
.hp-pill { display: inline-grid; place-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: var(--weight-semibold); white-space: nowrap; }
.hp-pill.ok { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 26%, transparent); }
.hp-pill.warn { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.hp-pill.crit { color: var(--crit); background: var(--crit-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crit) 32%, transparent); }
.hp-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-round); vertical-align: -1px; }
.hp-dot.done.ok { background: var(--ok); } .hp-dot.done.warn { background: var(--warn); } .hp-dot.done.crit { background: var(--crit); }
.hp-dot.open { box-shadow: inset 0 0 0 2px var(--text-3); } .hp-dot.open.warn { box-shadow: inset 0 0 0 2px var(--warn); } .hp-dot.open.crit { box-shadow: inset 0 0 0 2px var(--crit); }
.hp-table .bc { vertical-align: middle; }

/* ---------- Vrij voor de gekozen rit (Resources) en passen tijdens het slepen ---------- */
.state.this .dot { background: var(--accent); }
.state.this { color: var(--accent); }
.state.nofit { color: var(--warn); }
.state.nofit .dot { background: var(--warn); }
.res-side.fit .state.free { color: var(--ok); }
.res-item:is(.fit-busy, .fit-absent, .fit-fault, .fit-nofit) .res-main,
.res-item:is(.fit-busy, .fit-absent, .fit-fault, .fit-nofit) :is(.avatar, .res-icon) { opacity: .55; }
/* Slepen: een rit waar de resource dan niet kan, rood en niet te kiezen; met de wijzer erop staat de reden in het sleeplabel */
html.is-dragging .grid tbody tr[data-fit="no"] > td { background: color-mix(in srgb, var(--crit) 6%, var(--bg-elevated)); color: var(--text-3); cursor: not-allowed; }
html.is-dragging .grid tbody tr[data-fit="no"] .trip { color: var(--crit); }
html.is-dragging .grid tbody tr[data-fit="ok"]:not([data-drop="over"]) > td { background: color-mix(in srgb, var(--ok) 5%, var(--bg-elevated)); }
/* Combinaties (De Jong): chauffeur gaat, trekker of trailer niet (deels vrij); vijf soorten Resources: drie en twee */
.state.part { color: var(--warn); }
.state.part .dot { background: var(--warn); }
html.is-dragging .grid tbody tr[data-fit="part"]:not([data-drop="over"]) > td { background: color-mix(in srgb, var(--warn) 7%, var(--bg-elevated)); }
@container rt (max-width: 460px) {
  .res-tools ui-seg:has(> button:nth-child(5)) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .res-tools ui-seg:has(> button:nth-child(5)) > button { grid-column: span 2; }
  .res-tools ui-seg:has(> button:nth-child(5)) > button:nth-child(-n+2) { grid-column: span 3; }
}
/* Een combinatie: naam en toestand, dan trekker · trailer met zones, dan waarom of tot wanneer */
.res-item.stack { align-items: flex-start; }
.res-item.stack .avatar { margin-top: 1px; }
.res-item.stack .res-main { flex: 1 1 auto; min-width: 0; }
/* Trekker · trailer en de zones; past het niet, dan de zones op de regel eronder (nooit afgekapt) */
.res-item.stack .res-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.res-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.res-top .res-title { min-width: 0; overflow: hidden; }
.res-top .res-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-top .state { flex: none; display: flex; align-items: center; font-size: var(--text-xs); max-width: 60%; }
.res-top .state .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-item.fit-free .res-top .state { color: var(--ok); }
.res-why { margin-top: 2px; font-size: var(--text-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-item.stack:is(.fit-busy, .fit-absent, .fit-fault, .fit-nofit) .res-main :is(.res-name, .res-sub) { opacity: .55; }
.res-item.stack:is(.fit-busy, .fit-absent, .fit-fault, .fit-nofit) .res-main { opacity: 1; }
/* Planscherm: een vak waar de gesleepte resource dan niet kan (rood) of maar half (oranje); de reden staat in het sleeplabel */
html.is-dragging .slot[data-fit="no"] { background: color-mix(in srgb, var(--crit) 6%, var(--bg-elevated)); cursor: not-allowed; }
html.is-dragging .slot[data-fit="no"] .val { color: var(--crit); }
html.is-dragging .slot[data-fit="part"]:not(.target) { background: color-mix(in srgb, var(--warn) 7%, var(--bg-elevated)); }
/* Voorloop en naloop: bij welke rit ze horen (planbord) en de koppeling in het ritdetail */
.pp-tag { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 7px; margin-left: 8px; border-radius: 9px; font-size: var(--text-xs); color: var(--text-2); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pp-tag + .pp-tag { margin-left: 4px; }
.insp-pp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
.pp-link { appearance: none; border: 0; background: none; padding: 2px 0; color: var(--accent); font-size: var(--text-sm); text-align: left; cursor: pointer; }
.pp-link:hover { text-decoration: underline; }
.pp-link b { font-weight: var(--weight-semibold); }
/* Ritdetail: de zending bij een stop, en meer zendingen op hetzelfde adres als één stop */
.stop-goods { font-size: var(--text-xs); color: var(--text-2); margin-top: 1px; display: flex; align-items: baseline; gap: 6px; }
.stop-goods .ld { flex: none; transform: scale(.85); transform-origin: left center; }
.stop-goods .sg-text { flex: 1 1 auto; min-width: 0; }
.stop-goods .tchip { height: 17px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.stop-goods .sg-done { margin-left: 4px; display: inline-flex; vertical-align: -2px; }
.stop.group .stop-goods + .stop-goods { margin-top: 2px; }
/* Zendingen loskoppelen: venster met vinkjes, en Te plannen als droppunt voor een L- of D-regel */
.uc-list { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-control); }
.uc-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.uc-item + .uc-item { border-top: 1px solid var(--line); }
.uc-item:hover { background: var(--bg-hover); }
.uc-item.off { cursor: default; color: var(--text-3); }
.uc-item.off:hover { background: none; }
.uc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uc-main .faint { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--text-sm); white-space: nowrap; }
.uc-side > span + span { font-size: var(--text-xs); }
.uc-sum { margin: 10px 0 0; font-size: var(--text-sm); color: var(--text-2); }
.uc-sum.bad { color: var(--crit); }
html.is-dragging .pb-legs.target { outline: 1px dashed var(--accent); outline-offset: -2px; }
html.is-dragging .pb-legs.target .panel-body { background: var(--accent-softer); }
.child-line .cl-rec { flex: none; font-size: var(--text-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.grid tbody tr.child.pair > td { background: var(--accent-softer); }
/* Kaart: laadplek van een zending die nog op geen rit staat (capaciteit per regio); de gekozen regio met een ring */
.map-pin.plan { --pin: #b45309; }
.map-pin.plan.sel::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 40%, transparent), 0 1px 4px rgba(0, 0, 0, .35); }
.cap-item[data-load] { cursor: pointer; border-radius: var(--radius-control); }
.cap-item[data-load]:hover { background: var(--bg-hover); }