/* ==========================================================================
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; }
/* Bovenbalk in een smal venster: het zoekveld krimpt eerst (het invoerveld telt niet mee als minimum), daarna
vallen ⌘K, de naam bij de avatar en het woord Planbord weg. Nooit afbreken of over de rand. */
ui-topbar .search { min-width: 160px; }
ui-topbar .search input { width: 0; text-overflow: ellipsis; }
@media (max-width: 1280px) { ui-topbar .search kbd { display: none; } }
@media (max-width: 1100px) {
ui-topbar .user-btn .user-name { display: none; }
ui-topbar .brand { min-width: 0; }
ui-topbar .brand-name { display: none; }
}
.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.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, aanhangers, 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; }
.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); }
.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: 256px; --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, .tl-row-text .t { 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(200px, 32%)); }
.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; min-width: 0; 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: 268px; }
.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 [data-period] { 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; }
/* : 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; }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.sent { color: var(--ok); }
: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.temp.warn { color: var(--warn); }
:is(.tlx, .fb-prev) .bar-txt > .bar-ic.temp.crit { color: var(--crit); }
: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: 34px; }
.fb-prev .bar { top: 2px; left: 0; width: 100%; height: 30px; 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, aanhanger, 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; }
/* ---------- Temperatuur (De Jong) ---------- */
/* Band als zachte chip met dunne rand; nooit een streep of dikke rand */
.tchip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; border: 1px solid; font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; }
.tchip.b-2-8 { color: var(--t-cold); background: var(--t-cold-soft); border-color: color-mix(in srgb, var(--t-cold) 30%, transparent); }
.tchip.b-15-25 { color: var(--t-room); background: var(--t-room-soft); border-color: color-mix(in srgb, var(--t-room) 28%, transparent); }
.tcell { display: inline-flex; align-items: center; gap: 4px; }
.tmark { display: inline-flex; color: var(--warn); }
.tmark.crit { color: var(--crit); }
.tmark svg.i { width: 14px; height: 14px; }
.tzones { display: grid; gap: 6px; }
.tzone { display: grid; grid-template-columns: minmax(52px, auto) auto 1fr auto; align-items: center; gap: 8px; font-size: var(--text-sm); }
.tzone-name { color: var(--text-2); }
.tzone .meter { height: 5px; min-width: 40px; }
.tzone-n { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tmsg { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-2); margin-top: 6px; }
.tmsg svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.tmsg.warn { color: var(--warn); } .tmsg.crit { color: var(--crit); }
.grid .tchip { height: 18px; padding: 0 6px; }
.tsec .insp-label { display: flex; align-items: center; gap: 8px; }
.tchips { display: inline-flex; gap: 4px; text-transform: none; letter-spacing: 0; }
.tsec .tzones { margin-top: 2px; }
.tmsg.ok { color: var(--text-2); } .tmsg.ok svg.i { color: var(--ok); }
.stop-title .tchip { margin-left: 6px; height: 18px; padding: 0 6px; vertical-align: 1px; }
.stop-zone { margin-left: 4px; font-size: var(--text-xs); color: var(--text-3); }
.act .loc span.tchip { display: inline-flex; height: 17px; padding: 0 6px; margin-right: 6px; vertical-align: 0; font-weight: var(--weight-semibold); color: var(--t-cold); overflow: visible; }
.act .loc span.tchip.b-15-25 { color: var(--t-room); }
.act .loc span.stop-zone { display: inline; margin-right: 6px; color: var(--text-2); font-weight: var(--weight-medium); }
.slot .slot-side.tchips { display: inline-flex; gap: 4px; }
.res-zones { display: inline-flex; gap: 3px; vertical-align: -1px; }
.res-main:has(.res-zones) { min-width: 126px; }
.res-zones .tchip { height: 17px; padding: 0 5px; }
.cl-temp { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cl-temp .tchip { height: 18px; padding: 0 6px; }
.cl-temp .stop-zone { margin-left: 0; }
/* Groepen in een lijst (ritten per chauffeur): rustige kopregel, geen streep */
.grid tr.grid-group td { height: 32px; padding: 0 10px; background: var(--bg-subtle); color: var(--text-2); font-size: var(--text-sm); max-width: none; border-bottom: 1px solid var(--line); }
.grid tr.grid-group .gg-label b { color: var(--text-1); font-weight: var(--weight-semibold); margin-right: 8px; }
.grid tr.grid-group .gg-label .faint { margin-left: 6px; }
.grid tr.grid-group .gg-count { margin-left: 8px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.grid tr.grid-group .tchip { height: 18px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.grid tr.grid-group .gg-warn { color: var(--warn); margin-left: 8px; }
.grid tr.grid-group .gg-warn svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
/* Chauffeurs: de naam gaat voor; de toestand rechts mag korter */
.res-item.k-drivers .res-main { min-width: 128px; }
.res-item.k-drivers .res-side { max-width: 50%; }
.combo-tag { display: inline-flex; color: var(--warn); vertical-align: -2px; }
.combo-tag svg.i { width: 13px; height: 13px; }
.insp-note.combo { color: var(--warn); }
/* Zending naar een andere rit slepen: de L- en D-regels onder de gekozen rit */
.grid tr.child.movable td { cursor: grab; }
.grid tr.child.movable:hover td { background: var(--bg-hover); }
.grid tr.child.moving td { opacity: .45; }
/* Afspraak niet haalbaar (buiten het tijdvenster van de klant): rood; later dan gepland blijft oranje (.late) */
.miss { color: var(--crit); font-weight: var(--weight-semibold); }
.miss svg.i { width: 13px; height: 13px; vertical-align: -2px; margin-left: 4px; }
.insp-note.miss { color: var(--crit); }
.stop .stop-time .miss { font-weight: var(--weight-semibold); }
.insp-note.late-note { color: var(--warn); }
.bar.late.miss::after { color: var(--crit); background: var(--crit-soft); }
/* Warehouse-status (In opslag, Gereed voor laden, Crossdock): rustige chip met dunne rand */
.whchip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-sunken); color: var(--text-2); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; line-height: 1; }
.whchip svg.i { width: 12px; height: 12px; }
.whchip.w-ready { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.whchip.w-crossdock { color: var(--accent); background: var(--accent-softer); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.grid .whchip { height: 18px; padding: 0 6px; }
.stop-title .whchip { margin-left: 6px; height: 18px; vertical-align: 1px; }
.wh-list { display: grid; gap: 6px; }
.wh-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: var(--text-sm); }
.wh-row .wh-rec { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.wh-row .wh-sub { grid-column: 2 / 4; color: var(--text-2); font-size: var(--text-xs); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wh-row .wh-at { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cl-temp .whchip { height: 18px; padding: 0 6px; }
/* Hoe actueel: bron en laatste update van de ETA (Trimble) */
.insp-src { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-xs); color: var(--text-2); }
.insp-src svg.i { width: 13px; height: 13px; color: var(--ok); }
.insp-src.none svg.i { color: var(--text-3); }
.insp-src.stale { color: var(--warn); } .insp-src.stale svg.i { color: var(--warn); }
/* Wijzigingshistorie per rit: wie, wat (oud → nieuw), wanneer */
.hist-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--text-sm); }
.hist-row + .hist-row { border-top: 1px solid var(--line); }
.hist-row .avatar.sm { flex: none; margin-top: 1px; }
.hist-row .grow { min-width: 0; }
.hist-row small { display: block; color: var(--text-3); font-size: var(--text-xs); margin-top: 2px; }
.hist-row time { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hist-ch b { font-weight: var(--weight-semibold); margin-right: 4px; }
.hist-ch .arrow { margin: 0 5px; color: var(--text-3); }
.hist .link { margin-top: 4px; }
.hist-dlg { max-height: 60vh; overflow: auto; }