/* Summary: applicatie stylesheet | LoadiQ-huisstijl | IMPACT-palet | licht + donker thema
   | kopbalk | statusbalk | zijbalk | tabellen | formulieren | badges | dialogen

   Vormgeving volgens de LoadiQ-huisstijl (zie skill loadiq-style): dezelfde tokens en
   maatvoering als VisualLoading en RerouteAPI, zodat wie uit IMPACT komt geen stijlbreuk ziet.
   Compact met opzet: dit scherm staat de hele dag open naast het TMS, en zoveel mogelijk
   regels in beeld weegt zwaarder dan lucht. Elke kleur komt uit een token - een hex in een
   component klopt per definitie in maar een van de twee thema's. */

:root {
    --accent: #004F80;
    --accent-hover: #00426B;
    --accent-pressed: #F28F31;   /* nadruk: ingedrukt, gewijzigd, alleen-lezen */
    --validation: #E81123;
    --warning: #E8A33D;
    --ok: #4C9F4C;

    --bg: #FFFFFF;
    --bg-alt: #F2F2F2;
    --bg-panel: #FFFFFF;
    --bg-input: #FFFFFF;
    --border: #CDCDCD;
    --border-strong: #A8A8A8;
    --text: #1A1A1A;
    --text-dim: #5A5A5A;
    --text-inverted: #FFFFFF;

    --font: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
    --mono: Consolas, "Cascadia Mono", monospace;
    --size-s: 11px;
    --size: 12px;
    --size-l: 14px;
    --size-xl: 16px;

    --radius: 3px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .12);

    /* Oudere namen; nog in gebruik in enkele pagina's en in HelpContent */
    --brand: var(--accent);
    --brand-dark: var(--accent-hover);
    --brand-light: var(--bg-alt);
    --danger: var(--validation);
    --warn: var(--warning);
    --muted: var(--text-dim);
}

[data-theme="dark"] {
    --accent: #0E639C;
    --accent-hover: #007ACC;
    --validation: #E8515F;
    --ok: #5CB85C;

    --bg: #252526;
    --bg-alt: #2D2D30;
    --bg-panel: #333333;
    --bg-input: #1E1E1E;
    --border: #4C4C4C;
    --border-strong: #6E6E6E;
    --text: #C8C8C8;
    --text-dim: #8A8A8A;

    --shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    /* De pagina zelf schuift niet; de zijbalk en het werkvlak schuiven apart. Dat is wat
       dit een programma laat voelen in plaats van een website. */
    overflow: hidden;
    font-family: var(--font);
    font-size: var(--size);
    background: var(--bg);
    color: var(--text);
}

/* Zonder dit erven velden de systeemfont en staan ze een pixel uit de rij */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

h1 { font-size: var(--size-xl); font-weight: 600; margin: 0 0 10px; }

/* <FocusOnNavigate Selector="h1"> zet na elke paginawissel de focus op de paginakop, zodat een
   schermlezer de nieuwe pagina voorleest. De browser tekent daar een focusrand omheen, en die
   ziet eruit als een leeg invoerveld om de kop heen. De kop is geen bedienbaar element, dus die
   rand voegt niets toe: de aankondiging blijft, het kader gaat weg.
   :focus-visible helpt hier niet — bij programmatische focus tekent Chromium de rand toch. */
h1:focus { outline: none; }
h2 { font-size: var(--size-l); font-weight: 600; margin: 14px 0 6px; }
h3 { font-size: var(--size); font-weight: 600; margin: 10px 0 4px; }
/* Statusbadge achter een paginakop: die staat er zonder ruimte tegenaan geplakt */
h1 .badge, h2 .badge { margin-left: 6px; vertical-align: 2px; }
a { color: var(--accent); }
[data-theme="dark"] a { color: #4DA6DF; }   /* #0E639C op donker is te donker om te lezen */
hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* ---- indeling: kopbalk / zijbalk + werkvlak / statusbalk ---- */

.app-shell {
    display: grid;
    height: 100vh;
    grid-template-rows: 40px 1fr 24px;
    grid-template-columns: 210px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "status  status";
}

/* Zonder paginamenu (beheer-site): kopbalk, werkvlak, statusbalk */
.app-shell.no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "content"
        "status";
}

/* ---- kopbalk ---- */

.topbar {
    grid-area: header;
    display: flex; align-items: center; gap: 12px;
    padding: 0 12px; min-width: 0;
    background: var(--accent); color: var(--text-inverted);
}

/* Wit blokje met de initialen in accentkleur, zoals in de andere LoadiQ-applicaties.
   Als tekst en niet als afbeelding: dan is het scherp op elke schermdichtheid. */
.topbar__logo {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: none;
    border-radius: var(--radius);
    background: var(--text-inverted); color: var(--accent);
    font-size: var(--size-s); font-weight: 700; letter-spacing: -.5px;
}

.topbar__titles { min-width: 0; line-height: 1.25; }
.topbar__title { font-size: var(--size-l); font-weight: 600; }
.topbar__subtitle {
    font-size: var(--size-s); opacity: .75;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__spacer { flex: 1; }

.topbar a { color: var(--text-inverted); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* Wie er aangemeld is; als eigen blokje, los van de meldingen ernaast */
.topbar__user {
    font-size: var(--size-s); font-weight: 600;
    padding: 2px 8px; border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    white-space: nowrap;
}

/* Een knop in de gekleurde kopbalk erft daar de witte tekstkleur, terwijl zijn eigen
   achtergrond in het lichte thema juist wit is. Daarom hoort hij bij de balk in plaats
   van bij het werkvlak: doorzichtig met een lichte rand. */
.topbar .btn,
.topbar .btn.secondary {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .45);
    color: var(--text-inverted);
}
.topbar .btn:hover,
.topbar .btn.secondary:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .75);
}

/* ---- statusbalk ---- */

.statusbar {
    grid-area: status;
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px;
    background: var(--accent); color: var(--text-inverted);
    font-size: var(--size-s);
}
.statusbar__spacer { flex: 1; }
.statusbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.statusbar a { color: var(--text-inverted); text-decoration: none; }
.statusbar a:hover { text-decoration: underline; }

/* ---- zijbalk ---- */

.sidebar {
    grid-area: sidebar;
    display: flex; flex-direction: column;
    min-height: 0; min-width: 0;
    background: var(--bg-alt);
    border-right: 1px solid var(--border);
}

.sidebar nav { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 0; }

.sidebar nav a {
    display: block; padding: 4px 11px;
    color: var(--text); text-decoration: none;
    border-left: 2px solid transparent;
}
.sidebar nav a:hover { background: rgba(0, 0, 0, .05); }
[data-theme="dark"] .sidebar nav a:hover { background: rgba(255, 255, 255, .06); }

.sidebar nav a.active {
    background: var(--accent); color: var(--text-inverted);
    border-left-color: var(--accent-pressed);
    font-weight: 600;
}

/* hoofdmenu met sub-items (inklapbare groepen) */
.sidebar nav .nav-group summary {
    padding: 7px 11px 3px; cursor: pointer; list-style: none; user-select: none;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-dim);
}
.sidebar nav .nav-group summary::-webkit-details-marker { display: none; }
.sidebar nav .nav-group summary::before { content: "\25B8\00a0"; font-size: 9px; }
.sidebar nav .nav-group[open] summary::before { content: "\25BE\00a0"; }
.sidebar nav .nav-group summary:hover { color: var(--text); }
.sidebar nav .nav-group a { padding-left: 20px; }

/* ---- werkvlak ---- */

.content {
    grid-area: content;
    min-width: 0; min-height: 0;
    overflow-y: auto;
    padding: 11px 14px;
}

/* Los venster zonder zijbalk (inloggen, foutpagina's): daar mag de pagina wel schuiven */
main.plain { height: 100vh; overflow-y: auto; }

/* ---- paneelindeling: een pagina die het hele werkvlak vult ----
   Een pagina die met .workbench begint krijgt geen marge en schuift zelf niet: de panelen
   erin raken de randen en schuiven apart. Ondersteunt een browser :has() niet, dan blijft
   de marge staan en schuift de pagina — lelijker, maar werkend. */
.content:has(> .workbench) { padding: 0; overflow: hidden; }

.workbench {
    display: grid; height: 100%;
    min-height: 0; min-width: 0;
}

/* ---- paneel ----
   Elk paneel is een eigen kolom met een kop in kapitaaltjes en een body die apart schuift.
   min-height/min-width 0 zijn geen sierlijkheid: zonder die twee groeit een flex- of
   grid-kind buiten zijn vak en verdwijnt de statusbalk onder de onderkant van het scherm. */
.panel {
    display: flex; flex-direction: column;
    min-height: 0; min-width: 0;
    background: var(--bg);
}
.panel + .panel { border-left: 1px solid var(--border); }

.panel__header {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 11px; flex-shrink: 0;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}
/* De naam van het paneel leest als naam en niet als kolomkop: geen kapitalen */
.panel__header .name {
    font-size: var(--size); font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--text);
}
.panel__header .spacer, .panel__footer .spacer { flex: 1; }

.panel__bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 11px; flex-shrink: 0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
}

.panel__body { flex: 1; overflow: auto; min-height: 0; }
.panel__body.pad { padding: 11px; }

.panel__footer {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 11px; flex-shrink: 0;
    background: var(--bg-panel); border-top: 1px solid var(--border);
    font-size: var(--size-s); color: var(--text-dim);
}

.panel__leeg { padding: 22px; text-align: center; color: var(--text-dim); line-height: 1.5; }

/* ---- toolbar boven lijsten ---- */
.toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar input[type="search"], .toolbar input[type="text"] { min-width: 200px; width: auto; }

/* Een omlijnd vak met opschrift om de filterbalk: een losse rij chips is niet te plaatsen.
   Een <fieldset> met <legend> is precies de groupbox die dit is — geen eigen constructie. */
.filterbox {
    display: inline-flex; align-items: center;
    margin: 0 0 8px; padding: 3px 8px 5px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-alt);
    max-width: 100%;
}

.filterbox > legend {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 4px; margin: 0;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}

.filterbox > legend .icon { vertical-align: middle; }

/* Contextmenu op een filterchip (rechtermuisknop): bewerken, dupliceren, verwijderen. */
.menu-laag { position: fixed; inset: 0; z-index: 59; }

.contextmenu {
    position: fixed; z-index: 60;
    min-width: 170px; padding: 3px;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contextmenu__kop {
    padding: 3px 8px 4px;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.contextmenu__item {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 4px 8px;
    background: none; border: none; border-radius: var(--radius);
    color: var(--text); font: inherit; text-align: left; cursor: pointer;
}

.contextmenu__item:hover:not(:disabled) { background: var(--accent); color: var(--text-inverted); }
.contextmenu__item:disabled { opacity: .5; cursor: default; }
.contextmenu__item--gevaar:hover { background: var(--error); }

/* ---- gebruikersfilters boven een grid ---------------------------------------------
   Elk opgeslagen filter is een chip met een vinkje; Ctrl+klik zet twee chips in een
   groep. Het én/óf-schuifje heeft beide woorden in het spoor en de knop bedekt het
   woord dat niet geldt — twee geldige standen, dus het spoor blijft accent. */
.filter-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Een groep is één eenheid in de expressie: het kader maakt dat zichtbaar. */
.filter-chipgroep {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 5px;
    border: 1px solid var(--accent-hover); border-radius: var(--radius);
}

.filter-chip {
    display: inline-flex; align-items: center; gap: 3px;
    cursor: default;
}

/* De naam is het klikvlak: klikken = aan/uit, Ctrl+klik = groeperen. */
.filter-chip__naam { cursor: pointer; user-select: none; }

/* Uitgevinkt blijft leesbaar maar staat op de achtergrond. */
.filter-chip--uit { opacity: .7; }

/* Eerste Ctrl+klik: dit filter wacht op een partner om een groep mee te vormen. */
.filter-chip--pending {
    outline: 1px dashed var(--accent-pressed); outline-offset: 2px;
    border-radius: var(--radius);
}

.filter-switch { padding: 0; background: none; border: none; cursor: pointer; line-height: 0; }

.filter-switch__spoor {
    position: relative; display: inline-block; width: 34px; height: 15px;
    background: var(--accent); border-radius: 8px; vertical-align: middle;
}

.filter-switch:hover .filter-switch__spoor { background: var(--accent-hover); }

.filter-switch__tekst {
    position: absolute; top: 0; line-height: 15px;
    font-size: 9px; font-weight: 700; color: var(--text-inverted);
    opacity: 0; transition: opacity .12s ease-out;   /* alleen het geldende woord is te zien */
}

.filter-switch__tekst--of { left: 5px; }
.filter-switch__tekst--en { right: 5px; }
.filter-switch[aria-pressed="true"] .filter-switch__tekst--of { opacity: 1; }
.filter-switch:not([aria-pressed="true"]) .filter-switch__tekst--en { opacity: 1; }

.filter-switch__knop {
    position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    background: var(--text-inverted); border-radius: 50%;
    box-shadow: var(--shadow);
    transition: left .12s ease-out;
}

.filter-switch[aria-pressed="true"] .filter-switch__knop { left: 21px; }

/* ---- de bouwer: geneste groepen met een streep links ---- */
.filter-boom { margin-top: 10px; }

.filter-groep {
    margin: 6px 0; padding: 6px 0 2px 10px;
    border-left: 2px solid var(--border-strong);
}

.filter-item {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}

/* ---- tabellen ---- */
table.grid {
    width: 100%; border-collapse: collapse;
    background: var(--bg-panel); border: 1px solid var(--border);
}
table.grid th, table.grid td {
    padding: 4px 7px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border);
}
table.grid th {
    background: var(--bg-alt); white-space: nowrap;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}
table.grid tbody tr:hover { background: rgba(0, 0, 0, .04); }
[data-theme="dark"] table.grid tbody tr:hover { background: rgba(255, 255, 255, .05); }
table.grid tr.clickable { cursor: pointer; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cellen staan standaard op vertical-align: top, wat klopt voor tekst over meerdere regels. Zit er
   in de rij een keuzelijst, vinkje of knop, dan hoort álles in die rij op de hartlijn — anders
   plakt de tekst bovenaan terwijl de besturing in het midden staat. */
table.grid tbody tr:has(select, input, button, .btn) td { vertical-align: middle; }

/* Een regel die net binnenkwam licht even op, zodat je ziet dat er iets bijkwam */
@keyframes arrived { from { background: rgba(242, 143, 49, .28); } to { background: transparent; } }
tr.new, .row.new { animation: arrived 1.1s ease-out; }

/* ---- formulieren ---- */
/* align-items: end zet elk veld onderaan zijn cel: de invoervelden lijnen dan uit, ook als het
   ene label over twee regels loopt en het andere niet. Zonder dit "verspringen" de vakken. */
.form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 12px; max-width: 1100px; align-items: end;
}

.form-grid .full { grid-column: 1 / -1; }

label {
    display: block; margin-bottom: 2px;
    font-size: var(--size-s); color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .4px;
}

/* box-sizing + gelijke hoogte: een <select> rekent zijn hoogte anders dan een <input>, en dan
   staat een keuzelijst 2px hoger dan het veld ernaast (zichtbaar als "verspringen" in een rij). */
input, select, textarea {
    width: 100%; padding: 4px 7px; box-sizing: border-box;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select { height: 24px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-hover); }
input[type="radio"] { width: auto; accent-color: var(--accent); }

/* Vinkje: een vierkantje in de accentkleur in plaats van het systeemvinkje. De native versie
   verschilt per browser en per thema (op donker vaak een grijs blok met een grijs vinkje);
   dit is één vorm die in beide thema's leesbaar is en bij de rest van de knoppen past.
   14px met radius 2px: even hoog als de tekstregel, en vierkant genoeg om als vakje te lezen. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: none;
    width: 14px; height: 14px; margin: 0; padding: 0;
    background: var(--bg-input);
    border: 1px solid var(--border-strong); border-radius: 2px;
    cursor: pointer;
}

input[type="checkbox"]:hover:not(:disabled) { border-color: var(--accent); }
input[type="checkbox"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

input[type="checkbox"]:checked {
    background: var(--accent); border-color: var(--accent);
}

/* Het haakje: twee randen van een gedraaid vierkantje — scherp op elke schaal, geen afbeelding. */
input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 7px;
    border: solid var(--text-inverted); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:indeterminate {
    background: var(--accent); border-color: var(--accent);
}

input[type="checkbox"]:indeterminate::after {
    content: ""; position: absolute; left: 2px; top: 5px;
    width: 8px; height: 0;
    border-top: 2px solid var(--text-inverted);
    transform: none;
}

input[type="checkbox"]:disabled { opacity: .6; cursor: default; }
input[type="color"] { padding: 1px; height: 22px; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }

/* Een aanvinkvakje met zijn tekst ernaast is geen rubriekkopje: gewone tekstkleur */
.check-row { display: flex; align-items: center; gap: 5px; }
/* zelfde vinkje, maar meelopend in een werkbalk */
.check-inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    vertical-align: middle; }
.check-inline input { margin: 0; }
.check-row label {
    margin: 0; color: var(--text); font-size: var(--size);
    text-transform: none; letter-spacing: 0;
}

/* ---- knoppen ---- */
.btn {
    display: inline-flex; align-items: center; gap: 4px;
    /* vaste hoogte + vertical-align: anders is een knop mét icoon een pixel hoger dan een knop
       zonder, en lijnen twee inline-flex knoppen naast elkaar uit op hun basislijn i.p.v. hun
       midden. Dat gaf het "verspringen" in tabelrijen. */
    min-height: 24px; vertical-align: middle;
    padding: 4px 9px; white-space: nowrap; cursor: pointer; text-decoration: none;
    background: var(--accent); color: var(--text-inverted);
    border: 1px solid var(--accent); border-radius: var(--radius);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { background: var(--accent-pressed); border-color: var(--accent-pressed); color: #1A1A1A; }

.btn.secondary { background: var(--bg-input); color: var(--text); border-color: var(--border); }
.btn.secondary:hover { border-color: var(--accent-hover); background: rgba(0, 79, 128, .07); }
[data-theme="dark"] .btn.secondary:hover { background: rgba(255, 255, 255, .07); }
.btn.secondary:active { background: var(--accent-pressed); color: #1A1A1A; border-color: var(--accent-pressed); }

.btn.success { background: var(--ok); border-color: var(--ok); color: #FFF; }
.btn.danger { background: var(--validation); border-color: var(--validation); color: #FFF; }
.btn.small { padding: 2px 7px; font-size: var(--size-s); min-height: 22px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn.secondary:disabled:hover { background: var(--bg-input); border-color: var(--border); }

/* ---- badges ---- */
.badge {
    display: inline-block; padding: 1px 5px;
    border-radius: 8px; font-size: 10px; font-weight: 600; white-space: nowrap;
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim);
}
.badge.draft { background: transparent; color: var(--text-dim); }
.badge.confirmed { background: var(--accent-pressed); border-color: var(--accent-pressed); color: #1A1A1A; }
.badge.completed { background: transparent; border-color: var(--ok); color: var(--ok); }
.badge.cancelled { background: transparent; border-color: var(--border-strong); color: var(--text-dim); text-decoration: line-through; }

/* ---- meldingen: kleurstaaf, geen kleurvlak ----
   Een staaf links en niet een gekleurd blok: dat neemt minder plek, stapelt netter en
   blijft leesbaar in beide thema's. Geen grid met een ::before-kolom, want de tekst zit
   vaak rechtstreeks in .alert en zo'n los tekstknoopje belandt dan in de eerste kolom. */
.alert {
    padding: 6px 9px; margin-bottom: 8px; line-height: 1.4;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-dim);
    border-radius: var(--radius);
}
.alert.info { border-left-color: var(--accent); }
.alert.success { border-left-color: var(--ok); }
.alert.warn { border-left-color: var(--warning); }
.alert.error { border-left-color: var(--validation); }
.alert .btn { margin-left: 6px; }

.text-danger { color: var(--validation); }

/* ---- svg-iconen (Icon.razor) ---- */
.icon { vertical-align: -.15em; flex-shrink: 0; }
.btn .icon { margin-right: 2px; }

/* ---- hulpknop in de kopbalk (F1 doet hetzelfde) ---- */
.help-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .45);
    color: var(--text-inverted); text-decoration: none;
}
.help-button:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .75); }

/* ---- F1 help ---- */
.help-toc {
    width: 190px; flex-shrink: 0; position: sticky; top: 0;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 4px 0;
}
.help-toc h3 {
    margin: 0; padding: 4px 10px 6px;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.help-toc a { display: block; padding: 3px 10px; color: var(--text); text-decoration: none; }
.help-toc a:hover { background: var(--bg-alt); }
.help-toc a.active { background: var(--accent); color: var(--text-inverted); font-weight: 600; }

.help-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; line-height: 1.5; }
.help-body table { border-collapse: collapse; margin: 6px 0; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 3px 7px; text-align: left; }
.help-body th { background: var(--bg-alt); color: var(--text-dim); font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px; }
.help-body code { background: var(--bg-input); border: 1px solid var(--border); padding: 0 3px; border-radius: 2px; font-family: var(--mono); }
.help-body h3 { margin: 10px 0 3px; font-size: var(--size); }

/* ---- code en vooraf opgemaakte tekst ---- */
pre {
    margin: 0; padding: 9px;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--mono); font-size: var(--size-s);
    white-space: pre-wrap; word-break: break-word; overflow: auto;
}
code { font-family: var(--mono); }

/* Icoonknopje naast een kop ("+ toevoegen"): even hoog als de kop, niet groter dan nodig. */
.btn.icoon {
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}

/* ---- dialoog ---- */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 6vh;
    background: rgba(0, 0, 0, .5);
}
.dialog {
    width: 90vw; max-width: 1600px; max-height: 84vh; overflow: auto;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}
.dialog h2 { margin-top: 0; }
.dialog .actions {
    display: flex; gap: 6px; justify-content: flex-end;
    margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border);
}

/* documentvenster (bon/label/factuur bekijken zonder nieuw tabblad) */
.dialog.doc-viewer { width: 90vw; max-width: 1100px; }
.dialog.doc-viewer iframe { display: block; background: #FFF; }

/* ---- dashboard: kerncijfers ---- */
/* Vaste breedte en geen 1fr: met vier tegels rekken die anders over het hele scherm uit,
   en een kerncijfer van drie tekens in een tegel van 350px leest als een fout. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, 175px); gap: 8px; margin-bottom: 12px; }
.tile {
    padding: 6px 9px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.tile .value { font-size: var(--size-xl); font-weight: 600; color: var(--text); }
.tile .label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim);
    margin: 0;
}

/* ---- inloggen / losse boodschap ---- */
.centered-card {
    max-width: 360px; margin: 8vh auto; padding: 22px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.centered-card .logo {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-size: var(--size-l); font-weight: 600; color: var(--text);
}
.centered-card .logo img { width: 30px; height: 30px; }

.page-message { max-width: 460px; margin: 10vh auto; text-align: center; line-height: 1.5; }

/* ---- kleine hulpmiddelen ---- */
.muted { color: var(--text-dim); }
.mt { margin-top: 8px; }
.nowrap { white-space: nowrap; }

/* regels-editor in orderformulieren */
.lines-editor td { vertical-align: top; }
.lines-editor input, .lines-editor select { min-width: 70px; }

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "status";
        grid-template-rows: 40px auto 1fr 24px;
    }
    .sidebar { border-right: none; border-bottom: 1px solid var(--border); max-height: 30vh; }
    .content { padding: 9px; }
}

/* ---- zoeken in de documentatie (/help) ---- */
.help-zoek { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.help-zoek input { min-width: 0; }

.help-resultaten { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.help-resultaat {
    display: block; padding: 6px 9px; text-decoration: none;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.help-resultaat:hover { border-color: var(--accent-hover); }
.help-resultaat__titel { display: block; font-weight: 600; color: var(--accent); }
.help-resultaat__tekst { display: block; color: var(--text); line-height: 1.4; }
.help-resultaat mark { background: var(--accent-pressed); color: #1A1A1A; padding: 0 1px; }