:root {
    --ink: #14211c;
    --ink-soft: #3a4b44;
    --paper: #f6f4ee;
    --surface: #ffffff;
    --line: #e2ded4;
    --forest: #1f4d3f;
    --forest-soft: #ecf2ef;
    --amber: #c47e1a;
    --amber-soft: #fbf1df;
    --rood: #a83232;
    --muted: #8a8a80;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20, 33, 28, .05), 0 8px 24px -16px rgba(20, 33, 28, .25);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-size: 15px;
    line-height: 1.5;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--ink);
    color: #d8e2dc;
    padding: 26px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--amber);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 20px;
    font-family: "IBM Plex Mono", monospace;
}

.brand-name {
    font-weight: 600;
    color: #fff;
    letter-spacing: -.01em;
}

.brand-sub {
    font-size: 12px;
    color: #8ba398;
    letter-spacing: .08em;
    text-transform: uppercase;
}

nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* De sidebar is 100vh hoog; een openklappende menugroep maakte het menu langer dan dat, waardoor
       de items ónder het kader doorliepen. Dit blok pakt de resterende hoogte en scrollt zelf.
       `min-height: 0` is de flexbox-voorwaarde: zonder die regel krimpt een flex-item niet onder zijn
       contenthoogte en loopt het alsnog over. `.sidebar-user` blijft onderaan (nav vult ertussen). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Slanke, donkere scrollbar: op de donkere sidebar is de standaard-balk erg opvallend. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

nav::-webkit-scrollbar {
    width: 8px;
}

nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 4px;
}

nav::-webkit-scrollbar-track {
    background: transparent;
}

.nav-item {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #b7c6bf;
    text-decoration: none;
    font-weight: 500;
    font-size: 14.5px;
    transition: background .12s, color .12s;
}

    .nav-item:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .nav-item.active {
        background: var(--forest);
        color: #fff;
    }

/* Gegroepeerd menu (hoofdonderwerp + sub-items, met Lucide-iconen) */
.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #cdd9d3;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .nav-group-head:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

.nav-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

    .nav-icon svg {
        width: 18px;
        height: 18px;
    }

.nav-label {
    flex: 1 1 auto;
}

.nav-chev {
    flex: 0 0 auto;
    color: #8ba398;
    transition: transform .15s ease;
}

.nav-group.open > .nav-group-head .nav-chev {
    transform: rotate(90deg);
}

.nav-group-body {
    display: none;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 4px;
}

.nav-group.open > .nav-group-body {
    display: flex;
}

    /* Sub-items uitlijnen onder het label van de groepskop. */
    .nav-group-body .nav-item {
        padding-left: 43px;
        font-size: 14px;
    }

/* Losse item met icoon (Help) en de scheidingslijn ervoor. */
.nav-solo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.nav-sep {
    height: 1px;
    background: rgba(255,255,255,.12);
    margin: 8px 6px;
}

/* Content */
.content {
    flex: 1;
    padding: 40px 48px;
    max-width: 1180px;
}

h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 14px;
}

.lead {
    color: var(--ink-soft);
    margin: 0 0 28px;
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
}

/* Forms */
label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

input, select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
}

    input:focus, select:focus {
        outline: none;
        border-color: var(--forest);
        box-shadow: 0 0 0 3px var(--forest-soft);
    }

.num {
    font-family: "IBM Plex Mono", monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .field-row > div {
        flex: 1;
        min-width: 150px;
    }

/* Buttons */
button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    transition: filter .12s, background .12s;
}

/* Anchors die als knop dienen (bv. <a class="btn-primary" href=…>) krijgen dezelfde basis als <button>. */
a.btn-primary,
a.btn-ghost,
a.btn-amber,
a.btn-danger {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    transition: filter .12s, background .12s;
}

.btn-primary {
    background: var(--forest);
    color: #fff;
}

    .btn-primary:hover {
        filter: brightness(1.08);
    }

    .btn-primary:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.btn-ghost {
    background: transparent;
    color: var(--forest);
    border-color: var(--line);
}

    .btn-ghost:hover {
        background: var(--forest-soft);
    }

/* Compacte knop náást inhoud, bv. het kopieerknopje bij een DNS-record. */
.btn-klein {
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.btn-danger {
    background: transparent;
    color: var(--rood);
    border-color: transparent;
    padding: 6px 8px;
}

    .btn-danger:hover {
        background: #f6e7e7;
    }

.btn-amber {
    background: var(--amber);
    color: #fff;
}

    .btn-amber:hover {
        filter: brightness(1.06);
    }

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th, td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600;
}

    td.num, th.num {
        text-align: right;
        font-family: "IBM Plex Mono", monospace;
        font-variant-numeric: tabular-nums;
    }

tr.totaal td {
    font-weight: 700;
    border-top: 2px solid var(--ink);
    border-bottom: none;
}

/* Twee gelijke kolommen naast elkaar (balans & W&V), responsive. */
.split2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .split2 {
        grid-template-columns: 1fr;
    }
}

/* Gebruikersblok onderaan de zijbalk (ingelogde gebruiker + uitloggen). */
.sidebar-user {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Voorwaarden + verwerkersovereenkomst, onderaan de zijbalk. Bewust klein en gedempt: het hoort
   vindbaar te zijn, niet op te vallen. (In de ingeklapte rail verdwijnt het mee met .nav-label.) */
.sidebar-juridisch {
    text-align: center;
    font-size: .72rem;
    line-height: 1.5;
    padding: 10px 0 2px;
    color: rgba(255, 255, 255, .45);
}

    .sidebar-juridisch a {
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
    }

        .sidebar-juridisch a:hover {
            color: #fff;
            text-decoration: underline;
        }

/* --- Taalkiezer (vriendelijke dropdown met vlaggetjes, onderin de sidebar) --- */
.taalkiezer {
    position: relative;
    padding: 8px 0 4px;
}

.taal-huidig {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.taal-huidig:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.taal-huidig .taal-naam {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.taal-chev {
    opacity: .7;
    font-size: .7rem;
}

/* Vlaggetje: vaste 3:2-verhouding, afgeronde hoekjes met een subtiel randje */
.taal-vlag {
    flex: 0 0 auto;
    display: block;
    width: 22px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    line-height: 0;
}

.taal-vlag svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Onzichtbare laag die buiten-klikken opvangt om het menu te sluiten */
.taal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Uitklapmenu: opent naar boven (de kiezer staat onderin de sidebar) */
.taal-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 190px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #ffffff;
    color: #1f2937;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .18);
    z-index: 41;
}

.taal-menu li {
    list-style: none;
}

.taal-optie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: inherit;
    font-size: .88rem;
}

.taal-optie:hover {
    background: #f1f5f9;
}

.taal-optie.actief {
    font-weight: 600;
}

.taal-optie .taal-naam {
    flex: 1;
}

.taal-check {
    color: #2563eb;
    font-weight: 700;
}

/* Ingeklapte sidebar: alleen het vlaggetje, knop gecentreerd; menu klapt naar rechts open */
.app-shell.ingeklapt .taal-huidig {
    justify-content: center;
    padding: 7px;
}

.app-shell.ingeklapt .taal-menu {
    left: 0;
    right: auto;
}

/* Grootboekoverzicht: categorie-koppen (resultaat/balans) en hun subtotalen. */
tr.subkop td {
    background: var(--surface-2, #f3f4f6);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .03em;
    padding-top: .6rem;
}

tr.subtotaal td {
    font-weight: 600;
    border-top: 1px dashed var(--border, #d1d5db);
}

.table-cell-input input, .table-cell-input select {
    padding: 6px 8px;
    font-size: 13px;
}

/* Misc */
.tag {
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    background: var(--amber-soft);
    color: var(--amber);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.melding {
    padding: 11px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}

    .melding.ok {
        background: var(--forest-soft);
        color: var(--forest);
    }

    .melding.fout {
        background: #f6e7e7;
        color: var(--rood);
    }

.muted {
    color: var(--muted);
}

.dropzone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
    background: #fbfaf6;
}

.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -2px;
    margin-right: 7px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

a {
    color: var(--forest);
}

/* Twee kolommen: preview naast formulier/regels */
.split {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.split-preview {
    flex: 0 0 360px;
    position: sticky;
    top: 24px;
}

.split-main {
    flex: 1;
    min-width: 0;
}

.preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.preview-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.table-scroll {
    overflow-x: auto;
}

@media (max-width: 1024px) {
    .split {
        flex-wrap: wrap;
    }

    .split-preview {
        flex-basis: 100%;
        position: static;
    }

    .content {
        padding: 28px 20px;
    }

    .sidebar {
        width: 200px;
    }
}

/* Bredere invoervelden voor bedragen in de regeltabellen */
.table-cell-input input.num {
    min-width: 104px;
}

.table-cell-input td.num, .table-cell-input th.num {
    min-width: 104px;
}

/* Omschrijving-cel met vergrootknop */
.cel-omschrijving {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .cel-omschrijving input {
        flex: 1;
        min-width: 0;
    }

.btn-icon {
    padding: 6px 9px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .btn-icon:hover {
        background: var(--forest-soft);
        border-color: var(--forest);
        color: var(--forest);
    }

.rij-acties {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

/* Pop-up (modal) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,33,28,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 22px;
    width: min(560px, 94vw);
    box-shadow: var(--shadow);
}

    .modal h3 {
        margin: 0 0 12px;
        font-size: 16px;
    }

    .modal textarea {
        width: 100%;
        min-height: 150px;
        font-family: inherit;
        font-size: 14px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        resize: vertical;
    }

        .modal textarea:focus {
            outline: none;
            border-color: var(--forest);
            box-shadow: 0 0 0 3px var(--forest-soft);
        }

    .modal .actions {
        justify-content: flex-end;
        margin-top: 16px;
    }

/* Inklapbaar menu → icoon-rail (alleen groeps-iconen; klik klapt weer uit). */
.sidebar {
    transition: width .2s ease, padding .2s ease;
}

.app-shell.ingeklapt .sidebar {
    width: 66px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

    /* In de rail: labels, chevrons en sub-items verbergen; alleen iconen tonen. */
    .app-shell.ingeklapt .brand-text,
    .app-shell.ingeklapt .nav-label,
    .app-shell.ingeklapt .nav-chev,
    .app-shell.ingeklapt .nav-sep,
    .app-shell.ingeklapt .sidebar-user {
        display: none;
    }

    .app-shell.ingeklapt .nav-group-body {
        display: none !important;
    }

    .app-shell.ingeklapt .nav-group-head,
    .app-shell.ingeklapt .nav-solo {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell.ingeklapt .brand {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 22px;
    }

        .app-shell.ingeklapt .menu-toggle {
            margin-left: 0;
            align-self: center;
        }

.menu-toggle {
    margin-left: auto;
    align-self: flex-start;
    background: transparent;
    border: none;
    color: #8ba398;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

    .menu-toggle:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

/* Let op: geen kale `.menu-open`-regels hier definiëren — die klasse is de open-state van de
   mobiele lade op `.app-shell`. Een oude knopstijl met deze naam had een `:hover` met `filter`,
   en een filter op de shell maakt 'm het referentiekader voor position:fixed (WebKit/iOS): de
   lade plakte dan aan de paginatop i.p.v. het viewport. */

@media (max-width: 1024px) {
    /* Rail blijft ook op smalle schermen een rail (geen volledige verberging meer). */
    .app-shell.ingeklapt .sidebar {
        width: 66px;
    }
}

/* Help: contextlinkje (?) naast schermtitels + de Help-pagina zelf */
.help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--forest-soft);
    color: var(--forest);
    border: 1px solid var(--forest);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: help;
}

    .help-badge:hover {
        background: var(--forest);
        color: #fff;
    }

h1 .help-badge {
    width: 24px;
    height: 24px;
    font-size: 14px;
}

.help-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
}

    .help-toc a {
        color: var(--forest);
        text-decoration: none;
        font-size: 14px;
    }

        .help-toc a:hover {
            text-decoration: underline;
        }

.help-sectie {
    scroll-margin-top: 16px;
}

    .help-sectie h2 {
        margin-top: 0;
    }

    .help-sectie ul {
        margin: 8px 0 0;
        padding-left: 20px;
        line-height: 1.55;
    }

    .help-sectie li {
        margin-bottom: 6px;
    }

/* Grootboekkaart: regels die bij een gestorneerd (vervallen) stuk horen — grijs gearceerd. */
tr.rij-vervallen > td {
    background: #f1f0ec;
    color: var(--ink-soft);
}

/* Omboekingen op de grootboekkaart. Het origineel en zijn correctieregel staan naast elkaar en
   krijgen dezelfde tint; het volgende koppeltje krijgt de andere. Zo zie je welke twee regels één
   handeling zijn — zonder dat te zien staat er een bedrag met "→ 4500" en verderop een losse
   tegenboeking. Twee tinten van dezelfde neutrale kleur, dus het leest als groepering en niet als
   een status. */
tr.rij-koppel-a > td {
    background: var(--forest-soft);
}

tr.rij-koppel-b > td {
    background: #f3f1ea;
}

/* Bolletjes in een knop die op een trage aanroep wacht (nu: het uitlezen van een urenstaat).
   Bewust géén vullende balk: de OCR meldt onderweg niets, dus elke vulling zou voortgang suggereren
   die we niet kennen — en een balk die bijna vol staat terwijl er nog niets terug is, vertrouw je de
   volgende keer niet meer. Bolletjes zeggen alleen "er loopt iets", en dat is precies wat we weten. */
.btn-bezig {
    /* De disabled-stijl maakt knoppen vaag; juist deze moet opvallen zolang hij loopt. */
    opacity: 1;
}

.knop-bolletjes {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

    .knop-bolletjes i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        opacity: .35;
        animation: knop-bolletje 1s ease-in-out infinite;
    }

        .knop-bolletjes i:nth-child(2) {
            animation-delay: .16s;
        }

        .knop-bolletjes i:nth-child(3) {
            animation-delay: .32s;
        }

@keyframes knop-bolletje {
    0%, 70%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* De vingerafdruk (SHA-256) van een getekende urenstaat: monospace, want het is een code die je
   vergelijkt, geen tekst die je leest. */
.hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.tag-vervallen {
    background: #e5e7eb;
    color: #6b7280;
    margin-left: 6px;
}

/* Selectievakje in regelacties + alleen-lezen berekend veld */
.rij-check {
    width: auto;
    margin: 0 4px 0 0;
    cursor: pointer;
}

.readonly-veld {
    background: #f3f1ea;
    color: var(--ink-soft);
    cursor: default;
}

/* Ingeklapt menu: volle breedte voor de boekingsregels */
.app-shell.ingeklapt .content {
    max-width: none;
}

/* Preview van bon/factuur met de muis groter te slepen (naast openen in nieuw venster) */
.split-preview {
    flex: 0 0 auto;
    width: 360px;
    min-width: 260px;
    max-width: 80vw;
    resize: horizontal;
    overflow: auto;
}

.preview-frame, .preview-img {
    resize: vertical;
    overflow: auto;
    min-height: 320px;
    max-height: none;
}

@media (max-width: 1024px) {
    .split-preview {
        width: auto;
        max-width: none;
        flex-basis: 100%;
        resize: none;
    }
}

/* Link-als-knop + terug-navigatie op detailpagina's */
a.btn-icon {
    display: inline-block;
    text-decoration: none;
}

.kop-rij {
    margin-bottom: 6px;
}

.terug {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
}

    .terug:hover {
        color: var(--forest);
    }

/* Sorteerbare tabelkoppen */
th.sorteerbaar {
    cursor: pointer;
    user-select: none;
}

    th.sorteerbaar:hover {
        color: var(--forest);
    }

th.sorteer-actief {
    color: var(--forest);
}

.sorteer-pijl {
    font-size: 11px;
}

/* Taalopties zijn POST-formulieren (antiforgery): de submit-knop oogt als de oude link. */
button.taal-optie {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ===== Dashboard: KPI-tegels + SVG-grafieken =====
   Grafiekkleuren zijn gevalideerd (CVD/contrast) op de witte kaart-surface:
   omzet #2a78d6 / kosten #eb6834 (categoriaal paar), pos #2a78d6 / neg #e34948 (diverging). */
:root {
    --viz-omzet: #2a78d6;
    --viz-kosten: #eb6834;
    --viz-pos: #2a78d6;
    --viz-neg: #e34948;
    --viz-grid: #e1e0d9;
    --viz-as: #898781;
    --viz-baseline: #c3c2b7;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-tegel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

    .kpi-tegel:hover {
        border-color: var(--forest);
    }

.kpi-label {
    font-size: .8rem;
    color: var(--muted);
}

.kpi-waarde {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.kpi-sub {
    font-size: .78rem;
    color: var(--muted);
}

.viz {
    width: 100%;
    height: auto;
    display: block;
}

.viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-baseline {
    stroke: var(--viz-baseline);
    stroke-width: 1.5;
}

.viz-as {
    fill: var(--viz-as);
    font-size: 11px;
}

.viz-staaf-omzet { fill: var(--viz-omzet); }
.viz-staaf-kosten { fill: var(--viz-kosten); }
.viz-staaf-pos { fill: var(--viz-pos); }
.viz-staaf-neg { fill: var(--viz-neg); }

/* Hover: de maand onder de cursor licht op, de rest dimt licht (tooltip via <title>). */
.viz:hover .viz-groep:not(:hover) path {
    opacity: .55;
}

.viz-legenda {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.viz-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 5px;
    vertical-align: baseline;
}

/* ===== Mobiel casco (≤ 900px): onderbalk + bottom sheet, kaarten scrollen horizontaal ===== */
.mobiel-topbar {
    display: none;
}

/* Bedienhand-keuze: alleen relevant (en zichtbaar) op mobiel — zie het @media-blok. */
.hand-kiezer {
    display: none;
}

@media (max-width: 900px) {
    /* Onderbalk i.p.v. topbalk: merk + hamburger in de duimzone (één hand). env(safe-area-…)
       houdt vrij van de iPhone-home-indicator (viewport-fit=cover in App.razor). */
    .mobiel-topbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 55;
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--ink);
        color: #d8e2dc;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(20, 33, 28, .25);
    }

        .mobiel-topbar .brand-mark {
            width: 30px;
            height: 30px;
            font-size: .9rem;
        }

        .mobiel-topbar .topbar-titel {
            font-weight: 600;
        }

        .mobiel-topbar .topbar-sub {
            font-size: .78rem;
            color: var(--amber);
        }

    .menu-knop {
        margin-left: auto;
        background: none;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 8px;
        color: inherit;
        font-size: 1.15rem;
        line-height: 1;
        padding: 6px 10px;
        cursor: pointer;
    }

    /* Bedienhand: body.hand-links (cookie → App.razor) spiegelt de onderbalk, zodat de menuknop
       links in de duimzone van een linkshandige valt. row-reverse draait de volgorde; de auto-marge
       van de knop moet dan mee naar de andere kant (die duwt de knop naar de vrije rand). */
    body.hand-links .mobiel-topbar {
        flex-direction: row-reverse;
    }

    body.hand-links .menu-knop {
        margin-left: 0;
        margin-right: auto;
    }

    /* Bedienhand-keuze in het mobiele menu: linkerhand-icoon links, rechterhand-icoon rechts,
       label in het midden; de actieve kant licht op via de body-klasse (geen circuit-state nodig). */
    .hand-kiezer {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0 8px;
    }

    .hand-label {
        flex: 1;
        text-align: center;
        font-size: .82rem;
        opacity: .8;
    }

    .hand-optie {
        display: grid;
        place-items: center;
        padding: 8px 12px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 8px;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

        .hand-optie svg {
            width: 22px;
            height: 22px;
            display: block;
        }

    /* Zelfde handpalm-icoon, gespiegeld = linkerhand. */
    .hand-optie-links svg {
        transform: scaleX(-1);
    }

    body.hand-links .hand-optie-links,
    body:not(.hand-links) .hand-optie-rechts {
        background: var(--forest);
        border-color: var(--forest);
        color: #fff;
    }

    .app-shell {
        display: block;
    }

        /* Sidebar wordt een bottom sheet: klapt van onder naar boven open (duimzone), boven de
           onderbalk uit, met afgeronde bovenhoeken en interne scroll. Losse top/left/bottom i.p.v.
           de inset-shorthand (compat oudere mobiele browsers: zonder deze properties valt fixed
           terug op de statische positie en "verdwijnt" het menu bij scrollen). */
        .app-shell .sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            width: 100%;
            height: auto;
            max-height: 82vh;   /* fallback voor browsers zonder dvh */
            max-height: 82dvh;
            z-index: 60;
            border-radius: 18px 18px 0 0;
            transform: translateY(105%);
            transition: transform .25s ease;
            overflow-y: auto;
            padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        }

        .app-shell.menu-open .sidebar {
            transform: none;
        }

            /* Op mobiel scrollt de hele lade al (max-height + overflow op .sidebar): de nav niet óók
               laten scrollen, anders krijg je een scrollgebied binnen een scrollgebied. */
            .app-shell .sidebar nav {
                flex: 0 0 auto;
                overflow-y: visible;
            }

    .menu-backdrop {
        position: fixed;
        top: 0;      /* losse properties i.p.v. inset (compat oudere mobiele browsers) */
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: rgba(20, 33, 28, .45);
    }

    .content {
        padding: 14px;
        /* Ruimte zodat de vaste onderbalk de laatste inhoud niet afdekt. */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Brede inhoud (tabellen) scrolt binnen de kaart i.p.v. de pagina te verbreden.
       !important omdat vrijwel elke lijstpagina inline `style="padding:0;overflow:hidden"` op de
       kaart zet — dat klipt de tabel netjes binnen de afgeronde hoeken op desktop, maar inline wint
       van elke stylesheetregel, dus op mobiel kón je nergens naar de resterende kolommen scrollen.
       Zelfde afweging als bij .field-row hieronder: de mobiele indeling wint van desktop-hints.
       Alleen de x-as: `overflow-y` blijft hidden, dus er komt geen verticale scrollbalk bij. */
    .card {
        overflow-x: auto !important;
    }

    /* Formulieren stapelen verticaal: elk veld volle breedte (wint bewust van inline flex:0-hints,
       die zijn voor de desktop-rij-indeling). */
    .field-row {
        flex-wrap: wrap;
    }

        .field-row > div {
            flex: 1 1 100% !important;
            min-width: 0 !important;
        }

    /* Touch-targets + 16px voorkomt dat iOS inzoomt bij focus op een veld. */
    input, select, textarea {
        font-size: 16px;
        min-height: 42px;
    }

    textarea {
        min-height: 0;
    }

    input[type="checkbox"] {
        min-height: 0;
        width: 20px;
        height: 20px;
    }

    button, .btn-primary, .btn-ghost, .btn-danger, .btn-icon {
        min-height: 42px;
    }

    h1 {
        font-size: 1.35rem;
    }

    /* Compactere tabellen; secundaire kolommen met .m-verberg verdwijnen (de kern past dan
       zonder horizontaal scrollen; het volledige beeld blijft op desktop). */
    table {
        font-size: 13px;
    }

    th, td {
        padding: 8px 10px;
    }

    .m-verberg {
        display: none;
    }

    .kpi-waarde {
        font-size: 1.25rem;
    }
}

/* Administratie-keuzescherm (/administraties): opties zijn POST-formulieren (antiforgery);
   de submit-knop oogt als een keuzekaart met initialen-blokje, naam + rol en een huidige-badge. */
button.adm-optie {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    button.adm-optie:hover {
        border-color: var(--forest);
        background: var(--forest-soft);
    }

    button.adm-optie.actief {
        border-color: var(--forest);
    }

.adm-mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--forest);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .9rem;
}

.adm-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .adm-tekst .muted {
        font-size: .82rem;
    }

.adm-badge {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--forest);
    background: var(--forest-soft);
    border-radius: 999px;
    padding: 3px 10px;
}

/* Platformconsole (/platform): warm-donkere sidebar met amber-accent, zodat platformbeheer zich
   direct visueel onderscheidt van de boekhouding (die de groene huisstijl houdt). */
.app-shell.platform .sidebar {
    background: #2a2018;
    color: #e8ddcf;
}

.app-shell.platform .brand-mark {
    background: var(--amber);
    color: #fff;
}

.app-shell.platform .brand-sub {
    color: var(--amber);
}

/* ===== "Aan de slag"-checklist (dashboard): inrichtstappen voor nieuwe administraties ===== */
.ads-kaart {
    border-left: 4px solid var(--forest);
}

.ads-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ads-verberg {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

.ads-stappen {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}

.ads-stappen li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef0ee;
}

.ads-stappen li:last-child {
    border-bottom: none;
}

.ads-vink {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.ads-klaar .ads-vink {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

.ads-tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ads-klaar .ads-titel {
    color: #6b7280;
    text-decoration: line-through;
}

.ads-uitleg {
    color: #6b7280;
    font-size: 13px;
}

.ads-link {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
}

.ads-voortgang {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.ads-balk {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--forest-soft);
    overflow: hidden;
}

.ads-balk-vol {
    height: 100%;
    border-radius: 4px;
    background: var(--forest);
    transition: width .3s;
}

.ads-tour-start {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--forest);
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Rondleiding (spotlight-tour): overlay met uitgelicht element + tekstballon ===== */
.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3999;
    /* Transparant: het dimmen doet de spotlight-schaduw; dit vangt alleen klikken af. */
    background: transparent;
}

    /* Geen doelelement (nog) gevonden → zelf dimmen, de ballon staat dan gecentreerd. */
    .tour-backdrop.tour-dicht {
        background: rgba(15, 23, 20, .55);
    }

.tour-spot {
    position: fixed;
    z-index: 4000;
    pointer-events: none;
    border-radius: 10px;
    /* Het 'gat': alles behálve het doelelement wordt gedimd. */
    box-shadow: 0 0 0 100vmax rgba(15, 23, 20, .55);
    transition: left .25s, top .25s, width .25s, height .25s;
}

.tour-ballon {
    position: fixed;
    z-index: 4001;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

    .tour-ballon p {
        margin: 8px 0 12px;
        font-size: 14px;
        line-height: 1.5;
    }

.tour-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.tour-sluit {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
}

.tour-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.tour-knoppen {
    display: flex;
    gap: 8px;
}

/* ===== Instellingen-tabbladen: de instellingenpagina in behapbare stukken, met per tabblad
   een statusbadge (ingesteld / nog in te stellen / optioneel) ===== */
.inst-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; /* mobiel: tabs scrollen horizontaal */
    scrollbar-width: none;
}

.inst-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

    .inst-tab:hover {
        color: var(--forest);
    }

    .inst-tab.actief {
        color: var(--forest);
        font-weight: 600;
        border-bottom-color: var(--forest);
    }

.inst-badge {
    font-size: 11px;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 8px;
}

    .inst-badge.ok {
        color: var(--forest);
        background: var(--forest-soft);
    }

    .inst-badge.todo {
        color: var(--amber);
        background: var(--amber-soft);
    }

    .inst-badge.uit {
        color: var(--muted);
        background: #efede6;
    }

/* ===== Assistent: zwevende surfer-knop + popup (AssistentWidget/AssistentPaneel) ===== */
.assistent-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 950; /* onder de rondleiding-overlay, boven de inhoud */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--forest);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.assistent-fab:hover { transform: scale(1.06); }

.assistent-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 951;
    width: min(400px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 40px));
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.assistent-popup.open { display: flex; }

.assistent-popup-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #e0f2fe, #f0fdf4); /* lucht + zee, bij de surfer */
    border-bottom: 1px solid #e5e7eb;
}

.assistent-mascotte-klein { font-size: 26px; }

.assistent-sluit {
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--muted);
    padding: 4px 8px;
}

.assistent-popup-inhoud {
    padding: 12px 14px;
    overflow-y: auto;
}

/* Gespreksweergave (gedeeld door pagina en popup). */
.assistent-berichten {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.assistent-vraag {
    align-self: flex-end;
    max-width: 85%;
    background: #eef2ff;
    border-radius: 10px 10px 2px 10px;
    padding: 8px 12px;
}

.assistent-antwoord {
    align-self: flex-start;
    max-width: 85%;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px 10px 10px 2px;
    padding: 8px 12px;
    white-space: pre-wrap;
}

.assistent-welkom {
    display: flex;
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, #e0f2fe, #f0fdf4);
    border-radius: 10px;
    padding: 12px 14px;
}

.assistent-welkom p { margin: 0; font-size: 14px; }

.assistent-mascotte { font-size: 44px; line-height: 1; }

/* Mobiel: boven de onderbalk blijven (duimzone + safe-area); popup vult de breedte. */
@media (max-width: 900px) {
    .assistent-fab {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        right: 14px;
    }

    .assistent-popup {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 140px);
    }
}

/* Tags in de urenstaat. De standaard .tag is al amber en dat is precies goed voor "nog niet vast":
   een concept-factuur is te wijzigen en te verwijderen. Een definitieve factuur krijgt daarom juist
   het rustige groen van een afgeronde stap — hetzelfde onderscheid dat de knoppen maken. */
.tag-vast {
    background: var(--forest-soft);
    color: var(--forest);
}

a.tag {
    text-decoration: none;
}

    a.tag:hover {
        filter: brightness(0.97);
    }