/* ============================================================
   SIMBA — DESIGN SYSTEM
   Eén bron voor kleur, ruimte, vorm en typografie.

   Gestart 12-08-2026 bij het klantportaal; de medewerkerskant
   volgt later met dezelfde taal. Wijzig tokens hier, niet in
   een pagina — anders lopen de twee kanten weer uit elkaar.

   De twee fundamenten:
   - STRUCTUUR van Shopify Polaris: de interface zelf is neutraal,
     kleur is voorbehouden aan betekenis, één primaire actie per blok.
   - TOON van Airbnb: warme neutralen, rondere vormen, ademruimte.
     Bewust gematigd, want dezelfde taal moet straks ook werken op
     een CRM-tabel met tweehonderd regels.

   De regel die alles draagt: MERKKLEUR RAAKT DE BESTURING NIET.
   Geel op een knop maakt geel betekenisloos, en dan kun je
   "let op" niet meer zeggen. Zie --brand-accent.
   ============================================================ */

:root {
    /* ---------- Merk ----------
       Donkerblauw is de merkdrager: het is de tekstkleur én de
       primaire actie. Bijna zwart, dus het gedraagt zich als een
       neutrale kleur, maar het is de onze. Nooit puur zwart. */
    --brand-ink:        #04122D;
    --brand-ink-hover:  #0A2049;
    --brand-accent:     #FFCE00;  /* spaarzaam: merkmoment of aandacht */
    --brand-accent-ink: #8A6D00;  /* geel is te licht voor tekst */
    --brand-tint:       #EBF1FE;  /* rustig vlak, geen actie */

    /* ---------- Vlakken ----------
       Warm getint in plaats van kil grijs. Het verschil met
       #F5F5F7 is klein maar merkbaar: minder klinisch. */
    --surface:          #FFFFFF;
    --surface-sunken:   #FAF9F7;  /* paginaondergrond */
    --surface-hover:    #F5F3F0;
    --surface-selected: #EBF1FE;

    /* ---------- Randen ----------
       Rand in plaats van schaduw. Dat is het Polaris-principe:
       een kaart wordt begrensd, niet opgetild. */
    --border:           #E7E4DF;
    --border-strong:    #D4D0C9;
    --border-focus:     #04122D;

    /* ---------- Tekst ---------- */
    --text:             #04122D;
    --text-muted:       #6E6A64;
    --text-subtle:      #9A958C;
    --text-on-dark:     #FFFFFF;

    /* ---------- Betekenis ----------
       Deze vier zijn de enige kleuren die iets mógen zeggen.
       Elk met een zacht vlak voor achtergronden. */
    --success:       #0F7B5A;
    --success-bg:    #E8F5F0;
    --warning:       #9A6B00;
    --warning-bg:    #FDF4DC;
    --danger:        #C02B2B;
    --danger-bg:     #FCEDED;
    --info:          #1F5FA8;
    --info-bg:       #EAF2FC;

    /* ---------- Actie ----------
       Eén primaire actie per blok. De rest is secundair of tekst. */
    --action:            var(--brand-ink);
    --action-hover:      var(--brand-ink-hover);
    --action-text:       #FFFFFF;
    --action-secondary:  var(--surface);
    --action-secondary-border: var(--border-strong);

    /* ---------- Vorm ----------
       Ronder dan Polaris, minder rond dan Airbnb. Genoeg om
       vriendelijk te zijn, niet zoveel dat een datatabel gaat
       zweven. */
    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  16px;
    --radius-pill: 999px;

    /* ---------- Ruimte ----------
       Schaal van 4. Gebruik de tokens, geen losse pixels: dat is
       wat een pagina rustig houdt. */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Schaduw ----------
       Spaarzaam. Alleen voor wat écht boven de pagina zweeft:
       een modal, een menu. Kaarten krijgen een rand. */
    --shadow-sm:  0 1px 2px rgba(4, 18, 45, .04);
    --shadow-menu: 0 4px 16px rgba(4, 18, 45, .10);
    --shadow-modal: 0 16px 48px rgba(4, 18, 45, .18);

    /* ---------- Typografie ----------
       Twee families. Playfair is eruit: één keer gebruikt en het
       hoort bij marketingmateriaal, niet bij een werkomgeving. */
    --font-heading: 'Manrope', system-ui, sans-serif;
    --font-body:    'Figtree', system-ui, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.82rem;
    --text-base: 0.9rem;
    --text-md:   1rem;
    --text-lg:   1.15rem;
    --text-xl:   1.4rem;
    --text-2xl:  1.75rem;

    --leading-tight:  1.25;
    --leading-normal: 1.55;
    --leading-loose:  1.7;

    /* ---------- Maten ---------- */
    --content-max:       880px;  /* één kolom, rust boven dichtheid */
    --content-max-wide: 1200px;  /* alleen waar een tabel het nodig heeft */

    /* ---------- Beweging ----------
       Kort. Een interface die je elke dag gebruikt mag je niet
       laten wachten op een animatie. */
    --ease:      cubic-bezier(.4, 0, .2, 1);
    --duration:  140ms;
}

/* ============================================================
   BASIS
   ============================================================ */

/* Alles in dit bestand is in rem. Zonder een vaste basis rekent de browser met
   zijn eigen standaard van 16px, en dan wordt precies dezelfde regel op de ene
   pagina groter dan op de andere. Dat was ook zo: het klantportaal, Klantenbeheer,
   Marketing en Organisatie stonden op 14px, en Sales, Finance, Product, Admin,
   Content Engine en het startscherm op de standaard. Vandaar dat het menu in
   Admin groter oogde dan in Organisatie.

   14px, want daar is het design system op gebouwd. Een pagina die bewust anders
   wil (de inlogschermen staan op 15px) zet dat in zijn eigen stijl; die wordt na
   dit bestand geladen en wint. */
html { font-size: 14px; }

*, *::before, *::after { box-sizing: border-box; }

/* Verbergen wint altijd. Zonder dit verliest [hidden] van elke
   expliciete display-regel, en dat kost je een middag zoeken. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text);
    background: var(--surface-sunken);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    color: var(--text);
    margin: 0;
}

/* Zichtbare focus, altijd. Wie met het toetsenbord werkt moet
   kunnen zien waar hij is. */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   KNOPPEN
   Eén primaire per blok. Twijfel je? Dan is het een secundaire.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 9px var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: var(--action);
    color: var(--action-text);
}
.btn-primary:hover:not(:disabled) { background: var(--action-hover); }

.btn-secondary {
    background: var(--action-secondary);
    color: var(--text);
    border-color: var(--action-secondary-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text);
}

/* Alleen voor onomkeerbaar verlies. */
.btn-danger {
    background: var(--danger);
    color: var(--text-on-dark);
}

.btn-sm { padding: 6px var(--space-3); font-size: var(--text-sm); }

/* ============================================================
   KAARTEN
   Begrensd door een rand, niet opgetild door een schaduw.
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
}

.card-flush { padding: 0; overflow: hidden; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.card-title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
}

.card-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ============================================================
   BADGES
   Kleur zegt hier iets. Gebruik ze niet decoratief.
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
}

.badge-neutral { background: var(--surface-hover); color: var(--text-muted); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }

/* ============================================================
   LEGE STATEN
   Een lege pagina moet vertellen wat er gaat gebeuren, niet
   melden dat er niets is.
   ============================================================ */

.empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
}

.empty-icon {
    width: 44px; height: 44px;
    margin: 0 auto var(--space-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--brand-tint);
    color: var(--brand-ink);
}

.empty-title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.empty-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 420px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

/* ============================================================
   PAGINA
   ============================================================ */

.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-16);
}

.page-wide { max-width: var(--content-max-wide); }

.page-head { margin-bottom: var(--space-6); }

.page-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -.01em;
}

.page-sub {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Sectiescheiding met een label erin, zoals Shopify's
   "All caught up": een expliciet einde leest rustiger dan
   een lijst die zomaar ophoudt. */
.divider-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-subtle);
}
.divider-label::before,
.divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

@media (max-width: 720px) {
    .page { padding: var(--space-5) var(--space-4) var(--space-12); }
    .page-title { font-size: var(--text-xl); }
}

/* ============================================================
   ICONEN
   Material Symbols in plaats van de oude Material Icons: zelfde
   namen, maar met font-variation-settings, dus instelbare
   lijndikte. Op wght 300 staan ze niet zo zwaar op de pagina.
   De oude klassenaam blijft werken zodat bestaande spans niet
   herschreven hoeven te worden.

   In de <head>:
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0,0" rel="stylesheet">
   ============================================================ */

.material-icons-outlined,
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   ZIJBALK
   Licht, niet donkerblauw. Een donkere balk over de volle
   schermhoogte is de meest opdringerige plek waar een merk kan
   zitten: hij staat altijd in beeld en trekt het oog weg van
   het werk. Shopify, Linear en Notion doen het allemaal licht;
   het merk zit daar in het logo, niet in het vlak.

   Het actieve item wordt gemarkeerd met gewicht en een rustig
   vlak. Geen accentstreep: dat is een tweede signaal dat
   hetzelfde zegt.
   ============================================================ */

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.sidebar-header {
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 1px var(--space-3);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

.nav-item:hover { color: var(--text); background: var(--surface-hover); }

.nav-item.active {
    color: var(--text);
    background: var(--surface-selected);
    font-weight: 600;
}

.nav-item .material-icons-outlined { font-size: 20px; color: var(--text-subtle); }
.nav-item:hover .material-icons-outlined,
.nav-item.active .material-icons-outlined { color: var(--text); }

/* Submenu. Alleen het actieve hoofditem klapt uit; alles tegelijk openzetten
   maakt van de zijbalk een lijst van veertig regels waarin je niets meer vindt.
   Het lijntje links laat zien dat een sub-item bij het item erboven hoort.

   De selector is bewust zwaarder dan .nav-item-sub alleen. De module-CSS wordt
   ná dit bestand geladen en zet daar een `padding`-shorthand op .nav-item; met
   gelijke specificiteit wint die en viel het streepje dwars door de tekst. */
.nav-sub { position: relative; }

body.heeft-topbar .sidebar .nav-item.nav-item-sub, .sidebar .nav-item.nav-item-sub {
    position: relative;
    padding-left: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: 400;
}
body.heeft-topbar .sidebar .nav-item.nav-item-sub::before, .sidebar .nav-item.nav-item-sub::before {
    content: '';
    position: absolute;
    left: 26px; top: 50%;
    width: 8px; height: 1px;
    background: var(--border-strong);
}
body.heeft-topbar .sidebar .nav-item.nav-item-sub.active, .sidebar .nav-item.nav-item-sub.active {
    font-weight: 600;
}
.sidebar .nav-item.nav-item-sub.active::before { background: var(--text); }
.sidebar.collapsed .nav-sub { display: none; }


/* ============================================================
   LAADSCHERM
   Dekt bewust alleen het werkgebied, niet de zijbalk. Een overlay over het hele
   scherm laat het aanvoelen alsof je de applicatie verlaat en opnieuw opstart;
   de navigatie hoort gewoon te blijven staan terwijl de inhoud binnenkomt.
   ============================================================ */

.app-loader {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: var(--sidebar-w, 252px);
    background: var(--surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: opacity var(--duration) var(--ease);
}
.sidebar.collapsed ~ .app-loader,
body:has(.sidebar.collapsed) .app-loader { left: var(--sidebar-collapsed, 64px); }

.app-loader-spinner {
    width: 22px; height: 22px;
    border: 2px solid var(--border);
    border-top-color: var(--text-subtle);
    border-radius: 50%;
    animation: app-loader-draai .7s linear infinite;
}
@keyframes app-loader-draai { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .app-loader { left: 0; }
}

.nav-group-label {
    padding: var(--space-4) var(--space-5) var(--space-1);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
}

.sidebar-toggle {
    background: none; border: none; color: var(--text-subtle);
    cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-hover); }


/* ============================================================
   TOEGANGSPAGINA'S
   Inloggen, wachtwoord herstellen en account activeren zijn
   hetzelfde moment in dezelfde flow, dus ze delen één opzet:
   een kaart op een gekleurde ondergrond, formulier links,
   beeld rechts. Onder 880px valt het beeld weg.

   Dit is de enige plek waar het merk vol aanwezig mag zijn:
   er valt nog niets te bedienen, dus het leidt niemand af.
   ============================================================ */

    body {
        font-family: var(--font-body);
        font-weight: 400;
        color: var(--text);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        padding: var(--space-6);
        /* Een rustig verloop onder de kaart. Donkerblauw is van ons; het
           vlak eromheen mag kleur hebben omdat er niets te bedienen valt. */
        background:
            radial-gradient(1100px 700px at 12% 8%, #123A6B 0%, transparent 60%),
            radial-gradient(900px 600px at 88% 92%, #1B4D5A 0%, transparent 58%),
            linear-gradient(140deg, #071A3A 0%, #04122D 55%, #0A1F45 100%);
    }

    /* De kaart. Twee kolommen op ruime schermen, één op smalle. */
    .auth {
        width: 100%;
        max-width: 1060px;
        /* Marge in plaats van align-items: zo blijft de kaart gecentreerd op
           een ruim scherm, maar blijft de bovenkant bereikbaar op een laag
           venster. Een laptop met tabbladen en een bookmarkbalk houdt soms
           maar zeshonderd pixels over. */
        margin: auto;
        background: var(--surface);
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(2, 10, 28, .38);
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Wel royaal op een ruim scherm, nooit hoger dan het venster. */
        min-height: min(620px, calc(100vh - 2 * var(--space-6)));
    }

    .auth-form {
        padding: var(--space-8) var(--space-10) var(--space-6);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }

    .auth-head {
        margin-bottom: var(--space-10);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }
    .auth-region {
        display: flex; align-items: center; gap: var(--space-2);
        font-size: var(--text-xs); color: var(--text-subtle);
        cursor: pointer;
    }
    .auth-region-label { white-space: nowrap; }
    .auth-region-pick {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        transition: border-color var(--duration) var(--ease);
    }
    .auth-region-pick:hover { border-color: var(--border-strong); }
    .auth-region-pick svg { border-radius: 2px; flex-shrink: 0; display: block; }
    .auth-region-pick select {
        border: none; background: none; outline: none; cursor: pointer;
        font-family: var(--font-body); font-size: var(--text-xs);
        font-weight: 600; color: var(--text);
        padding: 0 2px 0 0;
    }
    .auth-head img { height: 26px; width: auto; }

    .auth-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

    /* Voettekst met de verplichte verwijzingen. Klein, maar vindbaar. */
    .auth-foot {
        margin-top: var(--space-8);
        padding-top: var(--space-4);
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
        font-size: var(--text-xs);
        color: var(--text-subtle);
    }
    .auth-foot a { color: var(--text-muted); text-decoration: none; }
    .auth-foot a:hover { text-decoration: underline; color: var(--text); }

    /* Rechterkolom: carrousel van drie beelden met eigen tekst. */
    .auth-visual {
        position: relative;
        background: var(--brand-ink);
        overflow: hidden;
    }
    .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 600ms var(--ease);
        pointer-events: none;
    }
    .slide.is-active { opacity: 1; }
    .slide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 45%;
    }
    /* Verloop van onder, zodat witte tekst leesbaar blijft ongeacht het beeld. */
    .slide::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
            rgba(4,18,45,.92) 0%,
            rgba(4,18,45,.62) 34%,
            rgba(4,18,45,.14) 64%,
            rgba(4,18,45,0) 100%);
    }
    .auth-quote {
        position: absolute;
        left: var(--space-8);
        right: var(--space-8);
        bottom: calc(var(--space-8) + 26px);
        color: #fff;
        z-index: 1;
        margin: 0;
    }
    .auth-quote blockquote {
        margin: 0 0 var(--space-3);
        font-family: var(--font-heading);
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -.01em;
        max-width: 13em;
    }
    .auth-quote figcaption {
        font-size: var(--text-base);
        color: rgba(255,255,255,.8);
        line-height: var(--leading-normal);
        max-width: 26em;
    }

    /* Een echt citaat is langer dan een claim, dus kleiner gezet. */
    .auth-quote.is-citaat blockquote {
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.45;
        max-width: 22em;
    }
    .auth-quote figcaption b {
        display: block;
        color: #fff;
        font-weight: 600;
        margin-bottom: 1px;
    }

    .slide-dots {
        position: absolute;
        left: var(--space-8);
        bottom: var(--space-8);
        display: flex;
        gap: 7px;
        z-index: 2;
    }
    .slide-dots i {
        width: 7px; height: 7px; border-radius: 50%;
        background: rgba(255,255,255,.38);
        transition: background var(--duration) var(--ease);
    }
    .slide-dots i.on { background: #fff; }

    /* Wie beweging heeft uitgezet krijgt alleen het eerste beeld. */
    @media (prefers-reduced-motion: reduce) {
        .slide { transition: none; }
    }

    @media (max-width: 880px) {
        body { padding: 0; background: var(--surface); }
        .auth {
            grid-template-columns: 1fr;
            max-width: 460px;
            min-height: 100vh;
            border-radius: 0;
            box-shadow: none;
        }
        .auth-visual { display: none; }
        .auth-form { padding: var(--space-8) var(--space-6) var(--space-6); }
    }

/* De kaarten binnen de kolom dragen zelf geen opmaak meer. */
.login-container { width: 100%; }
.login-card { background: transparent; padding: 0; text-align: left; }
.login-logo { display: none; }


/* ============================================================
   PORTAALCHROME — gedeelde topbalk, zoeken, meldingen, account
   Wordt door portaalchrome.js in elke medewerkerspagina gezet. De klassenamen
   komen overeen met het klantportaal, zodat beide kanten dezelfde taal spreken.
   Het instellingenscherm heeft wel een eigen naamruimte (.chrome-*): de modules
   definieren zelf al .modal-* en die zouden er anders overheen schrijven.
   ============================================================ */

:root { --topbar-h: 44px; }

.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: #1A1A1A;
    display: flex; align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    z-index: 60;
}
.topbar-merk { display: flex; align-items: center; flex-shrink: 0; }
.topbar-merk img { height: 18px; width: auto; display: block; }

.topbar-zoek-wrap { flex: 1; max-width: 460px; margin: 0 auto; position: relative; }
.topbar-zoek {
    display: flex; align-items: center; gap: var(--space-2);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-sm);
    padding: 5px var(--space-3);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.topbar-zoek:focus-within { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.topbar-zoek .material-icons-outlined { font-size: 17px; color: rgba(255,255,255,.55); }
.topbar-zoek input {
    flex: 1; border: none; background: none; outline: none;
    color: #fff; font-family: var(--font-body); font-size: var(--text-sm);
}
.topbar-zoek input::placeholder { color: rgba(255,255,255,.5); }
.topbar-zoek kbd {
    font-family: var(--font-body); font-size: var(--text-xs);
    color: rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px; padding: 1px 5px;
}

.zoek-paneel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 420px; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-menu); z-index: 200;
}
.zoek-groep {
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-family: var(--font-heading); font-size: var(--text-xs);
    font-weight: 700; color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: .04em;
}
.zoek-item {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; text-align: left;
    padding: var(--space-2) var(--space-4);
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text);
}
.zoek-item:hover, .zoek-item.is-actief { background: var(--surface-hover); }
.zoek-item .material-icons-outlined { font-size: 18px; color: var(--text-subtle); flex-shrink: 0; }
.zoek-item-tekst { min-width: 0; }
.zoek-item small { display: block; color: var(--text-subtle); font-size: var(--text-xs); }
.zoek-leeg { padding: var(--space-5) var(--space-4); font-size: var(--text-sm); color: var(--text-subtle); }

.topbar-rechts { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.topbar-melding-wrap, .topbar-account-wrap { position: relative; }
.topbar-knop {
    position: relative;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius-sm);
    color: rgba(255,255,255,.75); cursor: pointer;
    transition: background var(--duration) var(--ease);
}
.topbar-knop:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-knop .material-icons-outlined { font-size: 19px; }
.topbar-teller {
    position: absolute; top: 1px; right: 0;
    min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 999px;
    background: var(--brand-accent); color: var(--brand-ink);
    font-family: var(--font-heading); font-size: .62rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #1A1A1A;
}
.topbar-account {
    display: flex; align-items: center; gap: var(--space-2);
    background: rgba(255,255,255,.10);
    border: none; border-radius: var(--radius-sm);
    padding: 3px 4px 3px var(--space-3);
    cursor: pointer; transition: background var(--duration) var(--ease);
}
.topbar-account:hover { background: rgba(255,255,255,.18); }
.topbar-account-naam {
    font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 500; color: #fff;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-account-initialen {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: var(--brand-accent); color: var(--brand-ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: .68rem;
    flex-shrink: 0; overflow: hidden;
}
.topbar-account-initialen img { width: 100%; height: 100%; object-fit: cover; }

.melding-paneel {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 330px; max-height: 420px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
    z-index: 70; display: flex; flex-direction: column; overflow: hidden;
}
.melding-kop {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
}
.melding-alles {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-xs);
    color: var(--text-muted); padding: 2px 4px; border-radius: 4px;
}
.melding-alles:hover { color: var(--text); background: var(--surface-hover); }
.melding-lijst { overflow-y: auto; }
.melding { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.melding:last-child { border-bottom: none; }
.melding.is-nieuw { background: var(--brand-tint); }
.melding-titel {
    font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
    display: flex; align-items: center; gap: var(--space-2);
}
.melding-stip { width: 6px; height: 6px; border-radius: 50%; background: var(--info); flex-shrink: 0; }
.melding-tekst { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); margin-top: 3px; }
.melding-tijd { font-size: var(--text-xs); color: var(--text-subtle); margin-top: var(--space-2); }
.melding-leeg { padding: var(--space-8) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--text-subtle); }

.account-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
    padding: var(--space-2); z-index: 70;
}
.account-menu-kop {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border); margin-bottom: var(--space-2);
}
.account-menu-naam { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); }
.account-menu-sub { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 1px; }
.account-menu-item {
    width: 100%;
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px var(--space-3);
    background: none; border: none; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base); color: var(--text);
    cursor: pointer; text-align: left;
}
.account-menu-item:hover { background: var(--surface-hover); }
.account-menu-item .material-icons-outlined { font-size: 18px; color: var(--text-subtle); }
.account-menu-item.is-uitloggen:hover { background: var(--danger-bg); color: var(--danger); }
.account-menu-item.is-uitloggen:hover .material-icons-outlined { color: var(--danger); }


/* ---------- instellingenscherm (eigen naamruimte) ---------- */

.chrome-overlay {
    position: fixed; inset: 0;
    background: rgba(4,18,45,.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--space-8) var(--space-4);
    z-index: 300; overflow-y: auto;
}
.chrome-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
    width: 100%; max-width: 620px;
    margin: auto;
}
.chrome-kop {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}
.chrome-kop h2 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; margin: 0; }
.chrome-sluit {
    background: none; border: none; cursor: pointer;
    color: var(--text-subtle); padding: 4px; border-radius: var(--radius-sm);
    display: flex; align-items: center;
}
.chrome-sluit:hover { color: var(--text); background: var(--surface-hover); }
.chrome-body { padding: var(--space-5); }

.chrome-blok { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.chrome-blok:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.chrome-titel { font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-1); }
.chrome-uitleg { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); margin: 0 0 var(--space-4); }
.chrome-hint { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 4px; }

.chrome-rij { margin-bottom: var(--space-4); }
.chrome-rij label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 4px; }
.chrome-rij input {
    width: 100%; padding: 9px var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--text); background: var(--surface); outline: none;
}
.chrome-rij input:focus { border-color: var(--action); }
.chrome-rij input:disabled { background: var(--surface-sunken); color: var(--text-subtle); }

.chrome-foto-rij { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.chrome-foto {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--brand-accent); color: var(--brand-ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: var(--text-md);
    flex-shrink: 0; overflow: hidden;
}
.chrome-foto img { width: 100%; height: 100%; object-fit: cover; }

.chrome-knop {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 8px var(--space-4);
    background: var(--action); color: var(--action-text);
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600;
    cursor: pointer;
}
.chrome-knop:hover { opacity: .9; }
.chrome-knop:disabled { opacity: .5; cursor: default; }
.chrome-knop-ghost {
    background: none; color: var(--text);
    border: 1px solid var(--border);
}
.chrome-knop-ghost:hover { background: var(--surface-hover); opacity: 1; }

.chrome-melding { display: inline-block; margin-left: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.chrome-melding.is-fout { color: var(--danger); }
.chrome-melding.is-goed { color: var(--success); }
.chrome-scheiding { height: 1px; background: var(--border); margin: var(--space-5) 0; }
.chrome-rij-tussen { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.chrome-rij-titel { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); margin-bottom: 2px; }
.chrome-qr { width: 148px; height: 148px; flex-shrink: 0; }
.chrome-qr svg { width: 100%; height: 100%; }
.chrome-mfa-koppel { display: flex; gap: var(--space-5); margin: var(--space-4) 0; flex-wrap: wrap; }
.chrome-sleutel {
    display: block; font-family: monospace; font-size: var(--text-sm);
    background: var(--surface-sunken); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px var(--space-3);
    margin-bottom: var(--space-3); word-break: break-all;
}


/* ---------- layout: alles zakt onder de balk ---------- */

body.heeft-topbar { padding-top: var(--topbar-h); }
body.heeft-topbar .sidebar {
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    min-height: 0;
}
body.heeft-topbar .app-loader { top: var(--topbar-h); }
/* Paginakoppen die aan de bovenkant blijven plakken moeten onder de balk blijven. */
body.heeft-topbar .command-bar,
body.heeft-topbar .ce-topbar { top: var(--topbar-h); }

/* De negen pagina's zetten hun eigen marge naast de zijbalk, elk net anders.
   Deze regels zijn zwaarder dan die van de modules, zodat in- en uitklappen
   overal hetzelfde werkt. */
body.heeft-topbar .sidebar.collapsed ~ .main-wrapper,
body.heeft-topbar .sidebar.collapsed ~ .main-content,
body.heeft-topbar .sidebar.collapsed ~ .content { margin-left: var(--sidebar-collapsed, 64px); }
body.heeft-topbar .sidebar:not(.collapsed) ~ .main-wrapper,
body.heeft-topbar .sidebar:not(.collapsed) ~ .main-content,
body.heeft-topbar .sidebar:not(.collapsed) ~ .content { margin-left: var(--sidebar-w, 252px); }
body.heeft-topbar .sidebar.collapsed ~ .main-content { max-width: calc(100vw - var(--sidebar-collapsed, 64px)); }
body.heeft-topbar .sidebar:not(.collapsed) ~ .main-content { max-width: calc(100vw - var(--sidebar-w, 252px)); }

/* Instellingen hoort onderaan, los van de pagina-navigatie: het is geen plek
   waar je werkt maar waar je iets regelt. */
.sidebar-onder {
    margin-top: auto;
    padding: var(--space-2) 0 var(--space-3);
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .topbar-zoek-wrap { display: none; }
    .topbar-account-naam { display: none; }
}

/* De zijbalkvoet had de gebruiker met een uitlogknop. Dat staat nu rechtsboven
   in de balk. De elementen blijven wel in de pagina staan: de modulescripts
   vullen ze en zouden struikelen over een lege verwijzing. */
body.heeft-topbar .sidebar-footer { display: none; }


/* ---------- de topbalk moet er overal hetzelfde uitzien ----------

   Drie modules stylen élk tekstveld op de pagina
   (input[type="text"], input[type="email"], ... { ... }). Die selector weegt
   even zwaar als .topbar-zoek input, maar hun stylesheet wordt ná deze geladen
   en wint dus. Gevolg: in Klantenbeheer, Marketing en Organisatie werd het
   zoekveld in de zwarte balk een groot wit vlak.

   Daarom hangen deze regels aan het id van de balk. Een id weegt zwaarder dan
   welke klassenregel dan ook, dus geen enkele module kan er nog overheen. Dat
   is hier de juiste plek voor gewicht: de chrome hoort op elke pagina identiek
   te zijn, dat is het hele punt ervan. */

#portaalTopbar .topbar-zoek input,
#portaalTopbar .topbar-zoek input[type="text"] {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.5;
}
#portaalTopbar .topbar-zoek input:focus,
#portaalTopbar .topbar-zoek input[type="text"]:focus {
    border: none;
    box-shadow: none;
    outline: none;
    background: none;
}
#portaalTopbar .topbar-zoek input::placeholder { color: rgba(255,255,255,.5); }

#portaalTopbar .topbar-zoek {
    max-width: none;
    margin: 0;
    height: auto;
}

#portaalTopbar button {
    font-family: var(--font-body);
    box-shadow: none;
}
#portaalTopbar .topbar-knop,
#portaalTopbar .topbar-knop:hover { border: none; }

/* De panelen hangen onder de balk en horen niet mee te schuiven met de
   paginastijl van een module. */
#portaalTopbar .zoek-paneel,
#portaalTopbar .melding-paneel,
#portaalTopbar .account-menu { color: var(--text); }


/* ---------- de tweede balk gaat weg ----------

   Elke module had onder de zwarte balk nog een eigen commandobalk: een
   kruimelpad, een tweede zoekveld, een belletje, een tandwiel en de datum.
   Twee zoekbalken boven elkaar is er een te veel, en het belletje en tandwiel
   zaten er dubbel op nadat de gedeelde chrome erbij kwam.

   Verbergen in plaats van verwijderen: de modulescripts vullen cmdBreadcrumbText
   en cmdDate en zouden struikelen over een lege verwijzing. De enige knop die
   echt iets deed, synchroniseren in Klantenbeheer, staat nu in de paginakop. */

body.heeft-topbar .command-bar { display: none; }


/* ---------- geen tweede logo ----------

   Het merk staat linksboven in de zwarte balk. Datzelfde logo nog eens boven de
   zijbalk is herhaling zonder functie, en het duwt de navigatie omlaag. Weg dus;
   de inklapknop schuift naar links, net als in het klantportaal.

   Verbergen en niet verwijderen: sommige modulescripts wisselen dit beeld nog
   (bijvoorbeeld bij het inklappen) en zouden vallen over een lege verwijzing. */

body.heeft-topbar .sidebar-header img { display: none; }
body.heeft-topbar .sidebar-header {
    justify-content: flex-start;
    min-height: 0;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: none;
}


/* ---------- de zijbalk moet op elke pagina dezelfde maten hebben ----------

   De negen modules zetten elk hun eigen maatvoering op de navigatie: admin.css
   werkt met een zijbalk van 244px en items van 11px bij 14px in een nav met
   12px binnenmarge, de andere met 252px en 9px bij 20px zonder binnenmarge. Dat
   viel niet op zolang elke module zijn eigen menu had, maar nu het menu overal
   hetzelfde is, valt het meteen op: in Admin zaten de blokjes smaller en anders
   ingesprongen dan in Organisatie.

   Deze regels leggen één maat vast. Ze hangen aan body.heeft-topbar en wegen
   daardoor zwaarder dan de losse moduleregels, die later geladen worden.

   :not(.nav-item-sub) is er met opzet: de sub-items hebben hun eigen inspringing
   en die moet niet door deze shorthand overschreven worden. Dat is precies wat
   er eerder misging, waarna het streepje dwars door de tekst liep. */

:root {
    --sidebar-w: 252px;
    --sidebar-collapsed: 64px;
}

body.heeft-topbar .sidebar { width: var(--sidebar-w); }
body.heeft-topbar .sidebar.collapsed { width: var(--sidebar-collapsed); }

body.heeft-topbar .sidebar .sidebar-nav {
    flex: 1;
    padding: var(--space-3) 0;
    overflow-y: auto;
}

body.heeft-topbar .sidebar .nav-group {
    display: block;
    margin: 0;
    gap: 0;
}

body.heeft-topbar .sidebar .nav-item:not(.nav-item-sub) {
    margin: 1px var(--space-3);
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: 500;
}
body.heeft-topbar .sidebar .nav-item:not(.nav-item-sub).active { font-weight: 600; }

body.heeft-topbar .sidebar .nav-item .material-icons-outlined { font-size: 20px; }

/* Ingeklapt: alleen de iconen, gecentreerd. De sub-items verdwijnen dan al. */
body.heeft-topbar .sidebar.collapsed .nav-item:not(.nav-item-sub) {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
}
body.heeft-topbar .sidebar.collapsed .nav-item span:not(.material-icons-outlined) {
    width: 0;
    opacity: 0;
    overflow: hidden;
}
body.heeft-topbar .sidebar.collapsed .sidebar-onder .nav-item { justify-content: center; }


/* ============================================================
   ANALYTICS — kaartenraster naar het model van Shopify
   Elke kaart is één getal met zijn beweging: label, waarde, verschil met de
   vorige periode en een lijntje van het verloop. Geen gekleurde icoonblokjes;
   die zeggen niets over de cijfers en maken een werkscherm speels.
   ============================================================ */

.an-balk {
    display: flex; align-items: center; gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0 var(--space-5);
}
.an-balk-rechts { margin-left: auto; display: flex; gap: var(--space-2); }

.an-kies {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 7px var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text);
    cursor: pointer;
}
.an-kies:hover { background: var(--surface-hover); }
.an-kies .material-icons-outlined { font-size: 17px; color: var(--text-subtle); }
.an-kies.is-aan { border-color: var(--action); }

.an-periode-wrap { position: relative; }
.an-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
    padding: var(--space-2); z-index: 80;
}
.an-menu-item {
    width: 100%; text-align: left;
    padding: 7px var(--space-3);
    background: none; border: none; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.an-menu-item:hover { background: var(--surface-hover); }
.an-menu-item.is-aan { font-weight: 600; }
.an-menu-item.is-aan::after { content: 'check'; font-family: 'Material Symbols Outlined'; font-size: 17px; }
.an-menu-kop {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-family: var(--font-heading); font-size: var(--text-xs);
    font-weight: 700; color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: .04em;
}
.an-menu-scheiding { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.an-eigen { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.an-eigen input {
    flex: 1; min-width: 0;
    padding: 6px var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text);
}

.an-periode-tekst { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- het raster ---------- */

.an-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-4);
}

.an-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    min-height: 132px;
    position: relative;
}
.an-kaart-label {
    font-size: var(--text-sm); color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.an-kaart-waarde {
    font-family: var(--font-heading);
    font-size: var(--text-xl); font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.an-kaart-delta {
    font-size: var(--text-sm);
    display: flex; align-items: center; gap: 3px;
    color: var(--text-subtle);
}
.an-kaart-delta .material-icons-outlined { font-size: 15px; }
.an-kaart-delta.op { color: var(--success); }
.an-kaart-delta.neer { color: var(--danger); }
/* Bij deze metrieken is minder juist beter. */
.an-kaart-delta.omgekeerd.op { color: var(--danger); }
.an-kaart-delta.omgekeerd.neer { color: var(--success); }

.an-lijn { margin-top: auto; height: 34px; }
.an-lijn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.an-lijn path.vlak { fill: var(--surface-selected); }
.an-lijn path.lijn { fill: none; stroke: var(--action); stroke-width: 1.5; stroke-linejoin: round; }

.an-leeg {
    grid-column: 1 / -1;
    padding: var(--space-12) var(--space-4);
    text-align: center; color: var(--text-subtle); font-size: var(--text-sm);
    border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ---------- aanpassen ---------- */

body.an-bewerkt .an-kaart { cursor: grab; }
body.an-bewerkt .an-kaart.sleept { opacity: .4; }
body.an-bewerkt .an-kaart.doel { border-color: var(--action); }

.an-verberg {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px;
    display: none; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-subtle);
}
.an-verberg .material-icons-outlined { font-size: 16px; }
.an-verberg:hover { color: var(--text); background: var(--surface-hover); }
body.an-bewerkt .an-verberg { display: flex; }

.an-verborgen-blok { margin-top: var(--space-8); }
.an-verborgen-kop {
    font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700;
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.an-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.an-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px var(--space-3);
    background: var(--surface); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted);
    cursor: pointer;
}
.an-chip:hover { color: var(--text); border-style: solid; background: var(--surface-hover); }
.an-chip .material-icons-outlined { font-size: 15px; }

@media (max-width: 720px) {
    .an-raster { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .an-kaart { min-height: 112px; padding: var(--space-3); }
}


/* Het kaartenpaneel hangt rechts onder de knop Aanpassen en kan lang worden;
   zesentwintig metrieken passen niet zomaar op een scherm. */
.an-menu-rechts { left: auto; right: 0; }
.an-menu-lang { max-height: 60vh; overflow-y: auto; min-width: 260px; }
.an-menu-telling {
    font-weight: 400; color: var(--text-subtle);
    text-transform: none; letter-spacing: 0;
}
.an-schakel::after { opacity: 0; }
.an-schakel.is-aan::after { opacity: 1; }


/* ============================================================
   STARTSCHERM
   Eén kolom, gecentreerd. Boven de vouw staat alleen wat je nu moet weten en
   waar je mee verder kunt: een begroeting, één zin die zegt wat er ligt, een
   vraagveld en een handvol snelknoppen. De cijfers staan eronder, klein.
   ============================================================ */

.hm {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-5) var(--space-12);
}

.hm-groet {
    font-family: var(--font-heading);
    font-size: 1.9rem; font-weight: 700;
    letter-spacing: -.02em;
    text-align: center;
    margin-bottom: var(--space-2);
}
.hm-groet span { color: var(--text-subtle); font-weight: 600; }
.hm-zin {
    text-align: center; color: var(--text-muted);
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
    min-height: 1.4em;
}

/* ---------- het vraagveld ---------- */

.hm-vraag {
    background: var(--surface-hover);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-4);
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.hm-vraag:focus-within { background: var(--surface); border-color: var(--border-strong); }
.hm-vraag textarea {
    width: 100%; border: none; background: none; outline: none; resize: none;
    font-family: var(--font-body); font-size: var(--text-md); color: var(--text);
    line-height: var(--leading-normal);
    min-height: 46px; max-height: 200px;
}
.hm-vraag textarea::placeholder { color: var(--text-subtle); }
.hm-vraag-onder { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.hm-vraag-hint { font-size: var(--text-xs); color: var(--text-subtle); }
.hm-stuur {
    margin-left: auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--action); color: var(--action-text);
    border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.hm-stuur:disabled { opacity: .35; cursor: default; }
.hm-stuur .material-icons-outlined { font-size: 18px; }

/* ---------- snelknoppen ---------- */

.hm-snel {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-10);
}
.hm-snel a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text); text-decoration: none;
}
.hm-snel a:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.hm-snel .material-icons-outlined { font-size: 16px; color: var(--text-subtle); }

/* ---------- cijfers ---------- */

.hm-cijfers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--border);
    gap: 1px;
}
.hm-cijfer {
    background: var(--surface);
    padding: var(--space-4);
    text-decoration: none; color: inherit;
    display: block;
}
.hm-cijfer:hover { background: var(--surface-hover); }
.hm-cijfer-label { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.hm-cijfer-waarde {
    font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
    letter-spacing: -.01em;
}
.hm-cijfer-bij { font-size: var(--text-sm); color: var(--text-subtle); margin-left: 6px; font-weight: 400; }

/* ---------- gesprek ---------- */

.hm-gesprek { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-16); }
.hm-gesprek-kop {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-8);
}
.hm-terug {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted);
}
.hm-terug:hover { color: var(--text); background: var(--surface-hover); }
.hm-gesprek-titel {
    flex: 1; text-align: center;
    font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600;
}

.hm-bericht { margin-bottom: var(--space-6); }
.hm-bericht.van-mij { display: flex; justify-content: flex-end; }
.hm-bericht.van-mij .hm-bel {
    background: var(--surface-hover);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    max-width: 80%;
}
.hm-bericht.van-assistent .hm-bel { line-height: var(--leading-loose); }
.hm-bericht.van-assistent .hm-bel p { margin: 0 0 var(--space-3); }
.hm-bericht.van-assistent .hm-bel p:last-child { margin-bottom: 0; }
.hm-bericht.van-assistent .hm-bel ul { margin: 0 0 var(--space-3) var(--space-5); }

.hm-tools {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: var(--space-3);
    padding: 3px var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: var(--text-xs); color: var(--text-subtle);
}
.hm-tools .material-icons-outlined { font-size: 13px; }

.hm-denkt { display: flex; gap: 4px; padding: var(--space-2) 0; }
.hm-denkt span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-subtle);
    animation: hm-puls 1.2s infinite ease-in-out;
}
.hm-denkt span:nth-child(2) { animation-delay: .18s; }
.hm-denkt span:nth-child(3) { animation-delay: .36s; }
@keyframes hm-puls { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.hm-voet {
    text-align: center; font-size: var(--text-xs); color: var(--text-subtle);
    margin-top: var(--space-4);
}

@media (max-width: 720px) {
    .hm { padding-top: var(--space-8); }
    .hm-groet { font-size: 1.5rem; }
    .hm-cijfers { grid-template-columns: 1fr 1fr; }
}