/*
  Design richting (herontwerp "Bento", okt 2026): Provisual-huisstijl blauw →
  groen, met licht én donker thema. Het thema staat als data-theme="light|dark"
  op <html> (zie views/partials/head.php, keuze onthouden in localStorage).
  De bestaande variabelen (--ink, --paper, --panel, --line, --accent, …) zijn
  blijven bestaan en volgen het thema, zodat alle bestaande pagina's
  vanzelf meekleuren. Statuskleuren staan los van de merkkleur.
  Beheer (/admin/) en de inlogschermen blijven altijd licht.
*/

:root,
:root[data-theme="light"],
body:has(.auth-wrap) {
    --paper: #f2f5fa;
    --panel: #ffffff;
    --surface-2: #f6f8fc;
    --surface-3: #eaeff6;
    --ink: #0b1324;
    --ink-soft: #566176;
    --faint: #8a93a6;
    --line: rgba(15, 23, 42, 0.07);
    --line-2: rgba(15, 23, 42, 0.14);

    --brand-text: #0a75c2;
    --accent: #0a8fe0;
    --accent-2: #19c07f;
    --accent-soft: #e5f1fb;

    --success: #19b36b;
    --success-soft: #e2f5ea;
    --ok-text: #0d7340;
    --warn: #f5a524;
    --warn-soft: #fff0d9;
    --warn-text: #8f4f00;
    --danger: #ef4444;
    --danger-soft: #fdeaea;
    --danger-text: #b9282a;
    --focus: #0a8fe0;

    --hero: #08162d;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -16px rgba(15, 23, 42, 0.16);
    --shadow-lg: 0 34px 70px -34px rgba(8, 50, 110, 0.45);
    --shadow-glow: 0 10px 24px -10px rgba(10, 143, 224, 0.7);

    --radius-lg: 22px;
    --radius-md: 14px;

    --font-display: 'Bricolage Grotesque', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
    --font-body: 'Onest', -apple-system, 'SF Pro Text', 'Segoe UI', Arial, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #050a14;
    --panel: #0c1424;
    --surface-2: #101a2e;
    --surface-3: #18233b;
    --ink: #e8eef8;
    --ink-soft: #97a2b8;
    --faint: #69758e;
    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.14);

    --brand-text: #4fb2f5;
    --accent: #0a8fe0;
    --accent-2: #19c07f;
    --accent-soft: rgba(79, 178, 245, 0.13);

    --success: #22c55e;
    --success-soft: rgba(52, 211, 153, 0.12);
    --ok-text: #4ade80;
    --warn: #f5a524;
    --warn-soft: rgba(251, 191, 36, 0.12);
    --warn-text: #fbbf24;
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --danger-text: #f87171;

    --hero: #081329;
    --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px -18px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, 0.85);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background 0.35s ease, color 0.35s ease;
}
::selection { background: rgba(10, 143, 224, 0.22); }

a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Contentbreedte is bewust fluid — geen vaste max-width meer, schaalt mee
   met de volledige browserbreedte (op verzoek: de vaste 900px-kolom oogde
   op brede schermen te smal naast de nieuwe floating sidebar). De padding
   zelf schaalt licht mee via clamp() i.p.v. een vast getal, zodat er op een
   ultrabreed scherm ook wat meer lucht aan de randen komt. */
.shell {
    max-width: none;
    margin: 0 auto;
    padding: 0 clamp(24px, 2.5vw, 56px);
    width: 100%;
}

/* Voorheen een bredere variant t.o.v. de smalle 900px .shell (voor pagina's
   met brede tabellen, bv. de rollen-matrix op gigs/faq.php) — nu .shell zelf
   al fluid is blijft dit alleen nog een no-op alias, puur zodat bestaande
   `class="shell shell--wide"` in de pagina's niet los hoeft. */
.shell--wide {
    max-width: none;
}

/* --- Topbar --- */
.topbar {
    position: sticky;
    top: 0;
    /* Hoger dan .cart-summary op mobiel (z-index: 15, zie hieronder) — .topbar
       zet zelf een eigen stacking context neer (position:sticky + z-index),
       dus het dropdownmenu erin (.topbar nav, z-index: 20) werd alsnog door
       de winkelmand overlapt zolang .topbar zelf een lagere z-index had dan
       die winkelmand: bij een eigen stacking context telt voor vergelijking
       met elementen BUITEN die context alleen de z-index van de context zelf,
       niet die van kinderen erbinnen. */
    z-index: 25;
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-logo {
    height: 44px;
    width: auto;
    display: block;
}
.brand-tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    padding-left: 10px;
    border-left: 1px solid var(--line);
}
/* Nav zit altijd achter de menu-knop (zie .nav-toggle) — op elk schermformaat,
   niet alleen mobiel. Voorkomt dat de topbar dichtslibt naarmate er meer
   pagina's/links bijkomen. */
.topbar .shell { position: relative; }
.topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 24px;
    min-width: 200px;
    max-height: calc(100vh - 90px); /* fallback voor browsers zonder dvh-steun */
    max-height: calc(100dvh - 90px); /* correcte zichtbare hoogte, ook als de adresbalk in-/uitschuift (iOS Safari) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    margin-top: 8px;
    z-index: 20;
}
.topbar nav.nav-open { display: flex; }
.topbar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 7px;
    transition: color 0.15s ease, background 0.15s ease;
}
.topbar nav a:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
.topbar nav a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); transition: color 0.15s ease; }
.topbar nav a:hover svg { color: var(--accent); }
/* Groepslabels (bv. "Diensten"/"Account") en een scheidingslijn vóór
   Uitloggen — verdeelt een lange platte lijst in behapbare stukjes i.p.v.
   tien gelijkwaardig ogende regels onder elkaar. */
.topbar nav .nav-group-label {
    display: block;
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}
.topbar nav .nav-group-label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.topbar nav a.nav-divider { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; border-radius: 0 0 7px 7px; }
/* Externe links (Moneybird/Mijn Host/LaPosta) openen in een nieuw tabblad
   — het ↗-merkje maakt dat vantevoren duidelijk i.p.v. dat je het pas na
   het klikken merkt. */
.topbar nav a.nav-ext::after { content: '↗'; margin-left: auto; font-size: 11px; color: var(--ink-soft); }

.nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 8px 14px 8px 10px;
    margin: 0 0 0 auto;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.nav-toggle svg { display: block; flex-shrink: 0; }

.topbar-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 22vw, 280px);
    margin: 0;
}
.topbar-search input {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13.5px;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
}
.topbar-search input:focus { outline: none; border-color: var(--accent); }

.topbar-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 360px;
    overflow-y: auto;
    z-index: 30;
    text-align: left;
}
.topbar-search-results.open { display: block; }
.topbar-search-results .tsr-group-label {
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}
.topbar-search-results a {
    display: block;
    padding: 7px 14px;
    margin: 0 6px;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 7px;
}
.topbar-search-results a:hover { background: var(--paper); }
.topbar-search-results .tsr-empty,
.topbar-search-results .tsr-more {
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.topbar-search-results .tsr-more { display: block; }

/* Zoekresultaten in /admin/handleiding.php — zelfde look als hierboven. */
.handleiding-search-hit { color: var(--ink); text-decoration: none; font-size: 13.5px; }
.handleiding-search-hit:hover { background: var(--paper); text-decoration: none; }

@media (max-width: 640px) {
    .topbar nav {
        left: 16px;
        right: 16px;
        min-width: 0;
    }
    /* Op mobiel is er geen ruimte voor het gecentreerde zoekveld naast logo
       + menuknop in één rij van 64px — i.p.v. het (zoals voorheen) helemaal
       te verbergen, krijgt de rij een tweede regel: logo + menuknop blijven
       op regel 1, het zoekveld valt op zijn volledige breedte naar regel 2.
       De "Beheer"-tag naast het logo (alleen in de adminnav) en een iets
       kleiner logo maken regel 1 smal genoeg om niet zelf ook al te wrappen
       — zonder die twee ruimte-ingrepen viel de menuknop óók naar een
       eigen regel, met een lelijk leeg gat ertussen. */
    .topbar .shell {
        flex-wrap: wrap;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        row-gap: 8px;
    }
    .brand-tag { display: none; }
    .brand-logo { height: 34px; }
    .topbar-search {
        display: block;
        /* relative (i.p.v. static) zodat .topbar-search-results — top:100%
           /left:0/right:0, absoluut gepositioneerd — nog steeds recht onder
           dit veld verschijnt i.p.v. onder de hele (nu tweeregelige) shell. */
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 10;
        flex: 1 0 100%;
        width: 100%;
    }
}

/* --- Sidebar (ingelogd klant-/beheerportaal) ---
   Floating verticale menu-widget i.p.v. de horizontale .topbar — gebruikt
   door nav-customer.php/nav-admin.php. nav-public.php (uitgelogde
   bezoekers, bv. shop.php zonder sessie) houdt bewust de klassieke
   .topbar hierboven: die pagina's hebben geen profielwidget/accountcontext
   nodig en de bestaande dropdown-nav werkt daar prima. De link-/label-
   opmaak hieronder is een eigen (deels gedupliceerde) set t.o.v. ".topbar
   nav ..." hierboven — bewust, om de al werkende publieke nav niet te
   hoeven aanraken bij deze herbouw. */
:root {
    --sidebar-w: 268px;
    --sidebar-gap: 20px;
}

.sidebar {
    position: fixed;
    top: var(--sidebar-gap);
    left: var(--sidebar-gap);
    bottom: var(--sidebar-gap);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-md);
    z-index: 25;
    overflow: hidden;
    transition: background 0.35s ease;
}
/* Logo = gradient-tegel met "P" + woordmerk (geen plaatje, zodat het ook in
   het donkere thema leesbaar blijft) + een klein "Mijn"/"Beheer"-pilletje. */
.sidebar .brand,
.mobile-topbar .brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.sidebar .brand { padding: 20px 20px 14px; }
.sidebar .brand:hover, .mobile-topbar .brand:hover { text-decoration: none; }
.brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #0a8fe0, #19c07f);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 6px 16px -6px rgba(10, 143, 224, 0.7);
}
.brand-word { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand-pill {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--brand-text);
    font-size: 11px;
    font-weight: 700;
}

/* Zoekveld — herbruikt bewust de .topbar-search/.topbar-search-results
   klassen (en dus ook dezelfde nav.js-selector/logica voor de live
   zoeksuggesties); alleen de positionering/opmaak wijkt af. */
.sidebar .topbar-search {
    order: 0;
    flex: 0 0 auto;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    margin: 0 16px 14px;
}
.sidebar .topbar-search > svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--faint);
    pointer-events: none;
}
.sidebar .topbar-search input {
    padding: 10px 46px 10px 38px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: 14px;
}
.sidebar .topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 143, 224, 0.14); }
.sidebar .topbar-search kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}
.sidebar .topbar-search-results { left: 0; right: 0; }

.sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
}
.sidebar nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 12px;
    transition: color 0.15s ease, background 0.15s ease;
}
.sidebar nav a:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; }
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-soft); transition: color 0.15s ease; }
.sidebar nav a:hover svg { color: var(--brand-text); }
/* Actieve pagina: zachte merkachtergrond + een verticaal gradient-balkje
   links (zie isCurrentNavPage() in config/bootstrap.php). */
.sidebar nav a.active { color: var(--brand-text); background: var(--accent-soft); }
.sidebar nav a.active svg { color: var(--brand-text); }
.sidebar nav a.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #0a8fe0, #19c07f);
}
.sidebar nav .nav-group-label {
    display: block;
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--faint);
}
.sidebar nav .nav-group-label:first-child { padding-top: 2px; }
.sidebar nav a.nav-ext::after { content: '↗'; margin-left: auto; font-size: 12px; color: var(--faint); }
.sidebar nav a.nav-status::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: pv-pulse 2.2s infinite;
}
@keyframes pv-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar nav a.nav-status::after { animation: none; }
}
/* "Uitloggen" zit al in de profielkaart onderin (zie .sidebar-logout-btn). */
.sidebar nav a.nav-divider { display: none; }

/* Onderkant: thema-schakelaar + profielkaart, los van de scrollbare nav. */
.sidebar-footer {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.theme-toggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-2);
}
.theme-toggle button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.theme-toggle button:hover { transform: none; filter: none; box-shadow: none; }
.theme-toggle button svg { width: 15px; height: 15px; }
:root[data-theme="light"] .theme-toggle button[data-set-theme="light"],
:root[data-theme="dark"] .theme-toggle button[data-set-theme="dark"] {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}
.sidebar-profilecard {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    background: var(--surface-2);
}
.sidebar-profile {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.sidebar-profile:hover { text-decoration: none; }
.sidebar-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a8fe0, #19c07f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-display);
}
.sidebar-avatar svg { width: 18px; height: 18px; }
.sidebar-profile-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar-profile-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logout-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-logout-btn:hover { background: var(--danger-soft); color: var(--danger-text); }
.sidebar-logout-btn svg { width: 17px; height: 17px; display: block; }

/* Ruimte reserveren voor de floating sidebar — de rest van de pagina (incl.
   .impersonation-banner en de footer) blijft gewoon in de normale flow,
   met alleen een marge zo breed als sidebar + lucht erna. :has() i.p.v. een
   handmatige body-class, want welke nav-partial een pagina include (en dus
   of er wel/niet een .sidebar-element is) wordt pas laat per pagina
   bepaald — dit reageert vanzelf op wat er werkelijk in de DOM staat. */
body:has(.sidebar) {
    padding: var(--sidebar-gap) var(--sidebar-gap) 0 calc(var(--sidebar-w) + var(--sidebar-gap) * 2);
}

/* Vaste kop op mobiel — bevat het logo (altijd zichtbaar, linksboven) en de
   menuknop (rechtsboven). Op desktop niet nodig: daar zit het logo al
   bovenin de altijd-zichtbare sidebar zelf. De open/dicht-status van het
   menu wordt bijgehouden als klasse op <body> (i.p.v. alleen op .sidebar
   zelf) — zo kunnen zowel de sidebar-positie als het hamburger/kruisje-
   icoon in de kop, twee onafhankelijke elementen op hetzelfde niveau in de
   DOM, allebei op diezelfde ene status reageren. */
.mobile-topbar {
    display: none;
}
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    /* Breedte = 3 streepjes + "Menu" + wat padding, niets meer. */
    padding: 0 10px;
    /* De generieke "button, .btn"-regel verderop in dit bestand geeft elke
       <button> een margin-top:16px (bedoeld om CTA-knoppen onder een
       formulier op te stapelen) — zonder deze reset duwde die margin dit
       knopje 16px lager dan de bedoelde top-positie, en liet 'm onder de
       kop uitsteken. */
    margin: 0;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.sidebar-toggle svg { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.sidebar-toggle .icon-close,
.sidebar-toggle .label-close { display: none; }
body.sidebar-open .sidebar-toggle .icon-burger,
body.sidebar-open .sidebar-toggle .label-menu { display: none; }
body.sidebar-open .sidebar-toggle .icon-close { display: block; }
body.sidebar-open .sidebar-toggle .label-close { display: inline; }
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.4);
    z-index: 24;
}

@media (max-width: 900px) {
    /* position:relative i.p.v. flex/space-between voor de kinderen — beide
       (logo, menuknop) worden hieronder expliciet met position:absolute +
       top:50%/translateY(-50%) verankerd. Dat is onafhankelijk van
       eventuele flex-eigenaardigheden en garandeert dat de knop altijd
       precies tegen de rechterrand zit en verticaal gecentreerd staat. */
    .mobile-topbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: color-mix(in srgb, var(--panel) 85%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
        z-index: 30;
    }
    .mobile-topbar .brand {
        position: absolute;
        left: 16px;
        /* Vaste pixelwaarde i.p.v. top:50%+translateY(-50%) — bleek op
           mobiel Safari niet altijd betrouwbaar verticaal te centreren
           (zagen 'm op een echt toestel te laag hangen). Kop is 64px hoog,
           logo zelf 30px, dus (64-30)/2. */
        top: 17px;
        max-width: calc(100% - 175px);
    }
    /* Logo mag inleveren op smalle schermen — anders duwt het (vaste
       breedte via height + intrinsieke aspect ratio) de menuknop uit
       beeld op smalle telefoons. */
    .mobile-topbar .brand-logo { height: 30px; max-width: 100%; width: auto; object-fit: contain; }
    /* De sidebar draagt zijn eigen logorij bovenin (voor desktop) — op
       mobiel neemt de vaste .mobile-topbar die rol al over, dus dan zou
       hetzelfde logo dubbel op het scherm staan zodra het menu openschuift. */
    .sidebar > .brand { display: none; }

    .sidebar-toggle {
        display: flex;
        position: absolute;
        right: 16px;
        /* Vaste pixelwaarde i.p.v. top:50%+translateY(-50%): met box-sizing
           border-box is de knop precies 36px hoog, dus (64-36)/2 — en geen
           transform meer nodig voor de positionering zelf, want de generieke
           "button:hover{transform:translateY(-1px)}" hieronder verderop in
           dit bestand zou anders bij hover de eigen centrerings-transform
           overschrijven (de knop "sprong" dan zichtbaar op hover/tap). */
        top: 14px;
        box-sizing: border-box;
        /* Zonder expliciete width lost de browser 'm hier kennelijk niet
           betrouwbaar shrink-to-fit op (zagen 'm bij testen soms de volle
           breedte van de header aannemen, met de inhoud gecentreerd i.p.v.
           tegen de rechterrand) — dit dwingt 'm hard naar zijn eigen
           inhoudsbreedte. */
        width: max-content;
    }
    /* Neutraliseert de generieke "button, .btn" CTA-hover/active-stijl
       (transform/glow/opacity, zie verderop in dit bestand) — die is bedoeld
       voor de grote gradient-knoppen, niet voor dit kleine kader-knopje. */
    .sidebar-toggle:hover,
    .sidebar-toggle:active {
        transform: none;
        box-shadow: none;
        opacity: 1;
        background: none;
    }

    /* Schuift van rechts in i.p.v. van links — .sidebar zelf blijft verder
       ongewijzigd (floating kaart met dezelfde afgeronde hoeken/schaduw),
       alleen de as waarlangs 'm in-/uitschuift draait om. */
    .sidebar {
        left: auto;
        right: calc(var(--sidebar-gap) * -1 - var(--sidebar-w) - 20px);
        transition: right 0.2s ease;
        width: min(var(--sidebar-w), 78vw);
    }
    body.sidebar-open .sidebar { right: var(--sidebar-gap); }
    body.sidebar-open .sidebar-backdrop { display: block; }

    body:has(.sidebar) {
        padding: 84px var(--sidebar-gap) 0;
    }
}

/* Zoek-icoon in de mobiele header: opent het commandopalet (zie nav.js,
   .pal-*). Op desktop niet nodig — daar zit het zoekveld in de sidebar. */
.mobile-search-btn { display: none; }
@media (max-width: 900px) {
    .mobile-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        /* 16px rand + breedte "Menu"-knop (~82px) + 8px tussenruimte */
        right: 106px;
        top: 14px;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: none;
        border: 1px solid var(--line);
        border-radius: 8px;
        color: var(--ink);
        box-shadow: none;
        cursor: pointer;
    }
    .mobile-search-btn svg { width: 18px; height: 18px; display: block; }
    .mobile-search-btn:hover, .mobile-search-btn:active { transform: none; box-shadow: none; opacity: 1; background: none; }
    body.sidebar-open .mobile-search-btn { display: none; }
}

/* --- Menu: tellers, inklapbaar "Hulp & extern", tab-balk --- */
.sidebar nav a .nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--brand-text);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.sidebar nav a .nav-count.danger { background: var(--danger, #d92d20); color: #fff; }
.sidebar nav details.nav-more { margin-top: 4px; }
.sidebar nav details.nav-more > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.sidebar nav details.nav-more > summary::-webkit-details-marker { display: none; }
.sidebar nav details.nav-more > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.sidebar nav details.nav-more[open] > summary::after { transform: rotate(-135deg); }

/* Tab-balk bovenaan samengevoegde pagina's (Inbox, Koppelingen, Monitoring) */
.page-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 22px;
    padding: 5px;
    background: var(--surface-2);
    border-radius: 16px;
    width: fit-content;
    max-width: 100%;
}
.page-tabs-title {
    padding: 0 10px 0 12px;
    font-family: var(--font-display, inherit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.page-tab:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; }
.page-tab.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.12)); }
.page-tab-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--brand-text);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.page-tab-count.danger { background: var(--danger, #d92d20); color: #fff; }
@media (max-width: 700px) {
    .page-tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; scrollbar-width: none; }
    .page-tabs::-webkit-scrollbar { display: none; }
    .page-tabs-title { display: none; }
}

/* --- Commandopalet (⌘K / Ctrl+K, "/" of het zoekveld in de sidebar) --- */
.pal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 12px 12px;
    background: rgba(16, 24, 40, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.pal-backdrop[hidden] { display: none; }
.pal {
    width: min(640px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
    overflow: hidden;
}
.pal-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
}
.pal-input svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--faint); }
.pal-input input.pal-q {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-body);
    /* 16px: kleiner laat iOS Safari bij focus het hele scherm inzoomen */
    font-size: 16px;
}
.pal-input input.pal-q:focus { outline: none; box-shadow: none; border: 0; }
.pal-input kbd {
    padding: 2px 6px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
}
.pal-list { flex: 1; overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.pal-group, .pal-list .tsr-group-label {
    padding: 12px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.pal-list a.pal-item, .pal-list .pal-remote a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}
.pal-list a.pal-item .pal-tag { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--faint); }
.pal-list a.pal-item.is-active, .pal-list .pal-remote a.is-active { background: var(--accent-soft); color: var(--brand-text); }
.pal-list .pal-remote { display: block; position: static; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; max-height: none; }
.pal-list .pal-remote .tsr-empty, .pal-list .pal-remote .tsr-more { padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }
.pal-empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--ink-soft); }
.pal-foot {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--faint);
}
@media (max-width: 700px) {
    .pal-backdrop { padding-top: 64px; }
    .pal-foot, .pal-input kbd { display: none; }
    .pal { max-height: calc(100vh - 80px); }
}
body.pal-open { overflow: hidden; }

/* --- Inlogscherm: Split (donker verhaal links, formulier rechts) ---
   Bewust zelfstandig en altijd licht (eigen kleuren, geen thema-tokens),
   los van de aurora-stijl van de andere .auth-wrap-schermen. */
body:has(.login-split) { padding: 0; margin: 0; background: #fff; overflow-x: hidden; }
.login-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    background: #fff;
    color: #0b1324;
    font-family: var(--font-body, 'Onest', system-ui, sans-serif);
}
.ls-story {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 44px 56px;
    background: #08162d;
    color: #fff;
}
.ls-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ls-blob-a { width: 620px; height: 620px; left: -200px; top: -280px; background: radial-gradient(circle, rgba(10, 143, 224, .6), transparent 65%); animation: ls-drift 14s ease-in-out infinite; }
.ls-blob-b { width: 560px; height: 560px; right: -160px; bottom: -260px; background: radial-gradient(circle, rgba(25, 192, 127, .5), transparent 65%); animation: ls-drift 18s ease-in-out infinite reverse; }
.ls-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.ls-brand { position: relative; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: #fff; text-decoration: none; }
.ls-brand:hover { text-decoration: none; color: #fff; }
.ls-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0a8fe0, #19c07f);
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-weight: 800;
    font-size: 19px;
}
.ls-word { font-weight: 700; font-size: 18px; }
.ls-pill { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.ls-pitch { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 22px; }
.ls-pitch h1 {
    margin: 0;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 62px;
    line-height: .98;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
}
.ls-grad { background: linear-gradient(90deg, #5cc3ff, #4ade80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-pitch p { margin: 0; max-width: 400px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.ls-chips { position: relative; margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.ls-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 600;
}
.ls-chip-a { animation: ls-float 5s ease-in-out infinite; }
.ls-chip-b { animation: ls-float 6s ease-in-out infinite reverse; }
.ls-chip-c { animation: ls-float 7s ease-in-out infinite; }
.ls-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ls-pulse 2s infinite; }

.ls-form { display: flex; flex-direction: column; padding: 44px 72px 28px; background: #fff; }
.ls-menu { position: relative; display: flex; justify-content: flex-end; z-index: 5; }
.ls-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 42px;
    margin: 0;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: #0b1324;
    box-shadow: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.ls-menu-btn:hover, .ls-menu-btn:active { background: #eaeff6; transform: none; box-shadow: none; opacity: 1; }
.ls-menu-pop {
    position: absolute;
    top: 52px;
    right: 0;
    width: 240px;
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 24px 50px -20px rgba(8, 50, 110, .35);
    animation: ls-rise .2s both;
}
.ls-menu-pop[hidden] { display: none; }
.ls-menu-pop a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: #0b1324;
    text-decoration: none;
}
.ls-menu-pop a:hover { background: #f2f5fa; color: #0a75c2; text-decoration: none; }
.ls-menu-pop svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: #566176; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-menu-pop a span { flex: 1; }
.ls-menu-pop a em { color: #8a93a6; font-size: 13px; font-style: normal; }
.ls-menu-pop hr { height: 1px; margin: 4px 6px; border: 0; background: rgba(15, 23, 42, .07); }
.ls-menu-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: #8a93a6; }
.ls-menu-pop a.ls-menu-current { background: #e5f1fb; color: #0a75c2; font-weight: 600; }
.ls-menu-pop a.ls-menu-current svg { stroke: #0a75c2; }

.ls-body { margin: auto 0; max-width: 400px; width: 100%; padding: 28px 0; }
.ls-view { display: flex; flex-direction: column; gap: 22px; animation: ls-rise .4s both; margin: 0; }
.ls-title { margin: 0; font-family: var(--font-display, 'Bricolage Grotesque', sans-serif); font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: #0b1324; }
.ls-lead { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #566176; }
.ls-lead b { color: #0b1324; word-break: break-word; }
.ls-field { display: flex; flex-direction: column; gap: 8px; }
.ls-field label { margin: 0; font-size: 13px; font-weight: 600; color: #0b1324; }
.ls-field input.ls-input, .ls-field textarea.ls-input {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(15, 23, 42, .14);
    background: #f6f8fc;
    color: #0b1324;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ls-field textarea.ls-input { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.45; min-height: 110px; }
.ls-field input.ls-input:focus, .ls-field textarea.ls-input:focus { border-color: #0a8fe0; background: #fff; box-shadow: 0 0 0 4px rgba(10, 143, 224, .14); }
.ls-field input.ls-input.has-error { border-color: #b9282a; }
.ls-field input.ls-input.has-error:focus { box-shadow: 0 0 0 4px rgba(185, 40, 42, .14); }
.ls-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f6f8fc inset; -webkit-text-fill-color: #0b1324; }
.ls-error { padding: 10px 14px; border-radius: 12px; background: #fdeaea; color: #b9282a; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.ls-info { padding: 10px 14px; border-radius: 12px; background: #e5f1fb; color: #0a75c2; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.ls-error[hidden] { display: none; }
.ls-opt { font-weight: 400; color: #8a93a6; }
.ls-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-row-zip { grid-template-columns: 140px 1fr; }
a.ls-submit { text-decoration: none; color: #fff; }
a.ls-submit:hover { color: #fff; text-decoration: none; }
.ls-warn-ic { background: #fff0d9; color: #8f4f00; }
.ls-ok { padding: 12px 16px; border-radius: 14px; background: #e2f5ea; color: #0d7340; font-size: 14.5px; font-weight: 500; }
.ls-smileys { display: flex; flex-wrap: wrap; gap: 12px; }
.ls-smileys a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 76px;
    padding: 14px 12px;
    border-radius: 18px;
    border: 1.5px solid rgba(15, 23, 42, .1);
    background: #f6f8fc;
    color: #0b1324;
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}
.ls-smileys a:hover { transform: translateY(-3px); border-color: #0a8fe0; background: #fff; text-decoration: none; }
.ls-smiley { font-size: 38px; line-height: 1; }
.ls-smiley-label { font-size: 12.5px; font-weight: 600; color: #566176; }
.ls-chosen { font-size: 28px; vertical-align: -4px; margin-right: 4px; }
.ls-hint { font-size: 13px; line-height: 1.45; color: #566176; }
.ls-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0a8fe0, #19c07f);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(10, 143, 224, .6);
    transition: transform .15s, filter .15s;
}
.ls-submit:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ls-submit:active { transform: translateY(0); filter: brightness(.95); }
.ls-submit:disabled { cursor: progress; transform: none; }
.ls-spin { display: none; width: 18px; height: 18px; margin-left: 10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: ls-spin .7s linear infinite; }
.ls-submit.is-busy .ls-spin { display: inline-block; }
.ls-small { margin: 0; font-size: 14px; color: #566176; }
.ls-small a { color: #0a75c2; }
.ls-small a:hover { color: #13a46f; }
.ls-sent-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #e2f5ea; color: #0d7340; }
.ls-mailbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-mailbtns a {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: #0b1324;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.ls-mailbtns a:hover { background: #eaeff6; color: #0b1324; text-decoration: none; }
.ls-foot { font-size: 12.5px; color: #8a93a6; }
.ls-form > .ls-foot:first-child { margin-top: 0; }
.ls-foot a { color: #8a93a6; }
.ls-foot a:hover { color: #0a75c2; }
.login-split :focus-visible { outline: 2px solid #0a8fe0; outline-offset: 2px; }

@keyframes ls-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -24px) scale(1.08); } }
@keyframes ls-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ls-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ls-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ls-blob, .ls-chip, .ls-dot, .ls-spin { animation: none; }
    .ls-view, .ls-menu-pop { animation: none; }
}
@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; min-height: 100vh; }
    .ls-story { min-height: 260px; padding: 28px 24px; }
    .ls-pitch { margin-top: 28px; gap: 12px; }
    .ls-pitch h1 { font-size: 40px; }
    .ls-pitch p, .ls-chips { display: none; }
    .ls-form { padding: 24px 24px 24px; }
    .ls-body { max-width: none; padding: 20px 0; }
    .ls-title { font-size: 34px; }
}

/* --- Auth / login --- */
/* Inlogschermen (klant én beheer, plus signup/verify) — zelfde achtergrond
   als Promail (promail.provisualonline.nl): langzaam bewegend "aurora" van
   de merkkleuren, een fijn stippenraster dat naar de randen vervaagt, en
   concentrische ringen rond de kaart. De kaart zelf is "glas" met een
   gradient-streepje bovenaan. Aurora/stippen hangen aan <body> (vast over
   de hele viewport, ook achter de doorschijnende topbalk), de ringen aan
   .auth-wrap. */
body:has(.auth-wrap) {
    background: #F3F6FA;
    position: relative;
    overflow-x: hidden;
}
body:has(.auth-wrap)::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(36% 40% at 20% 26%, rgba(14, 141, 235, 0.85), transparent 70%),
        radial-gradient(30% 34% at 80% 20%, rgba(21, 160, 188, 0.75), transparent 70%),
        radial-gradient(38% 42% at 74% 80%, rgba(32, 190, 112, 0.75), transparent 70%),
        radial-gradient(28% 32% at 18% 84%, rgba(110, 140, 255, 0.55), transparent 70%);
    filter: blur(48px) saturate(130%);
    opacity: 0.85;
    animation: auth-aurora 28s ease-in-out infinite alternate;
}
body:has(.auth-wrap)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(16, 24, 40, 0.22) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}
@keyframes auth-aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.06); }
    100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    body:has(.auth-wrap)::before { animation: none; }
}
.auth-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 24px 16px;
}
.auth-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        transparent 0 250px, rgba(255, 255, 255, 0.55) 251px, transparent 253px,
        transparent 360px, rgba(255, 255, 255, 0.42) 361px, transparent 363px,
        transparent 490px, rgba(255, 255, 255, 0.30) 491px, transparent 493px,
        transparent 640px, rgba(255, 255, 255, 0.20) 641px, transparent 643px);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}
.auth-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #0E8DEB 0%, #15A0BC 50%, #20BE70 100%);
}
.auth-card h1 {
    font-family: var(--font-display);
    font-size: 23px;
    margin: 0 0 6px;
}
.auth-card p.lead {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0 0 24px;
}
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink);
}
input[type="email"], input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-body);
    background: var(--surface-2);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
/* Zonder dit valt elke <textarea> terug op de browser-default (~20 kolommen
   breed, 2 regels hoog) — ondanks width:100% hierboven, want dat wordt door
   het cols-attribuut/intrinsieke default overruled zonder expliciete
   min-height. */
textarea {
    min-height: 90px;
    resize: vertical;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
    background: var(--panel);
}

/* Radio-knoppen vierkant i.p.v. de native ronde vorm — consistent met
   checkboxes (die al vierkant zijn, browser-default). Alleen van
   toepassing op nog "kale" radio's zonder eigen custom-styled wrapper
   (bv. .plan-card/.ext-pill verbergen hun eigen radio al bewust). */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: border-color 0.12s ease, background 0.12s ease;
}
input[type="radio"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 1px;
}
button, .btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    margin-top: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: center;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
button:hover, .btn:hover {
    filter: brightness(1.08);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
    text-decoration: none;
    opacity: 0.96;
}
button:active, .btn:active { transform: translateY(0); }
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.notice {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.notice.success { background: var(--success-soft); color: var(--ok-text); border-color: rgba(25, 179, 107, 0.2); }
.notice.error { background: var(--danger-soft); color: var(--danger-text); border-color: rgba(239, 68, 68, 0.15); }
.notice.info { background: var(--accent-soft); color: var(--brand-text); border-color: rgba(11, 132, 255, 0.15); }
.notice.warning { background: var(--warn-soft); color: var(--warn-text); border-color: rgba(234, 154, 26, 0.2); }

/* --- Dashboard --- */
.page-header {
    padding: 16px 4px 18px;
}
.page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 6px;
}
.page-header .sub {
    color: var(--ink-soft);
    font-size: 16px;
}

/* Hero bovenaan het klantdashboard — vervangt daar de kale .page-header
   (die andere pagina's gewoon blijven gebruiken, zie hierboven). Subtiele
   merk-gradient (dezelfde blauw/groen-tint als .auth-wrap), met een klein
   "browsertabblad"-accentje rechtsboven (het gekoppelde sitedomein, zie
   $heroDomainHost in dashboard.php) — een knipoog naar webdesign/IT i.p.v.
   een generieke gradient-banner. */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    margin: 28px 0 24px;
    padding: 30px 26px 26px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-image:
        radial-gradient(420px circle at 10% 0%, rgba(11, 132, 255, 0.16), transparent 60%),
        radial-gradient(380px circle at 100% 100%, rgba(34, 197, 94, 0.16), transparent 60%);
}
.dashboard-hero h1 {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    max-width: calc(100% - 120px);
}
.dashboard-hero .sub {
    color: var(--ink-soft);
    font-size: 14px;
    max-width: 480px;
}
.dashboard-hero .status-strip { margin: 18px 0 0; }
.dashboard-hero-domain {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 6px 12px 6px 9px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dashboard-hero-domain .dots { display: flex; gap: 3px; flex-shrink: 0; }
.dashboard-hero-domain .dots span { width: 6px; height: 6px; border-radius: 50%; }
.dashboard-hero-domain .dots span:nth-child(1) { background: #E24B4A; }
.dashboard-hero-domain .dots span:nth-child(2) { background: #EF9F27; }
.dashboard-hero-domain .dots span:nth-child(3) { background: #22C55E; }
.dashboard-hero-domain .url {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-soft);
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* Op smalle schermen is er niet genoeg breedte naast de naam voor het
       domein-accentje zonder overlap — liever weglaten dan verdringen. */
    .dashboard-hero-domain { display: none; }
    .dashboard-hero h1 { max-width: 100%; }
}

.status-strip {
    display: flex;
    gap: 12px;
    margin: 20px 0 32px;
    flex-wrap: wrap;
}
.status-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.status-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.panel-header {
    padding: 17px 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
}

.table-scroll {
    overflow-x: auto;
}
.table-scroll table {
    width: auto;
    min-width: 100%;
}
.table-scroll th, .table-scroll td {
    white-space: nowrap;
}

/* Zelfde als .table-scroll, maar zonder de geforceerde white-space:nowrap —
   voor tabellen met weinig, smalle kolommen (bv. admin/customers.php) waar
   die nowrap onnodig een horizontale scrollbalk triggerde: cellen mogen hier
   gewoon binnen hun kolom afbreken, overflow-x blijft alleen als vangnet. */
.table-wrap {
    overflow-x: auto;
}
.table-wrap td {
    overflow-wrap: break-word;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    font-weight: 600;
    padding: 12px 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
td {
    padding: 15px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--paper); }
.mono { font-family: var(--font-body); }

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge.paid { background: var(--success-soft); color: var(--ok-text); }
.badge.open { background: var(--warn-soft); color: var(--warn-text); }
.badge.overdue { background: var(--danger-soft); color: var(--danger-text); }
.badge.neutral { background: var(--line); color: var(--ink-soft); }

/* Eigen tooltip (bv. productomschrijvingen op shop.php) i.p.v. de
   browser-native title="..." — die verschijnt pas na een vertraging en is
   makkelijk te missen. Direct zichtbaar zodra je over titel of icoontje
   hovert. */
.tooltip-wrap {
    position: relative;
    display: inline;
}
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
.tooltip-bubble {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 30px 8px 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: max-content;
    max-width: 280px;
    z-index: 50;
}
.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap:focus-within .tooltip-bubble {
    display: block;
}
/* Vaste, ondubbelzinnige sluitknop — vooral op mobiel bedoeld, waar
   "ergens anders tikken om te sluiten" kwetsbaar bleek voor iOS-eigen-
   aardigheden rond klikken op elementen binnen een <label>. */
.tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.tooltip-close:hover { background: rgba(255, 255, 255, 0.28); }

.progress-track {
    background: var(--line);
    border-radius: 100px;
    height: 9px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #22c55e);
    border-radius: 100px;
    transition: width 0.3s ease;
}
.progress-fill.warn { background: linear-gradient(90deg, var(--warn), #f5b942); }
.progress-fill.danger { background: linear-gradient(90deg, var(--danger), #f87171); }

.empty-state {
    padding: 44px 20px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 16px;
    padding: 10px 18px;
    background: var(--warn-soft);
    color: var(--warn-text);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
}
.impersonation-banner a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--warn);
    color: #1e1300;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0;
}
.impersonation-banner a:hover { text-decoration: none; filter: brightness(1.06); }

footer {
    border-top: 1px solid var(--line);
    padding: 28px 0 40px;
    margin-top: 40px;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    justify-content: space-between;
}
.footer-col {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 13.5px;
    margin-bottom: 4px;
}
.footer-legal { text-align: right; }
@media (max-width: 640px) {
    .footer-legal { text-align: left; }
    /* Domeinnaam-invulveld + "Check beschikbaarheid"-knop naast elkaar
       knijpt het naamveld op mobiel te smal — onder elkaar, allebei
       volledige breedte, is dan duidelijker. */
    .domain-row { flex-direction: column; }
    .domain-row .check-btn { width: 100%; padding: 12px 16px; }
    /* Klantenlijst-zoekbalk (/admin/customers.php): tekstveld + twee
       dropdowns naast elkaar knijpt het tekstveld op mobiel tot bijna
       niets — zelfde soort fix als .domain-row hierboven, tekstveld op
       zijn eigen volle-breedte regel, de twee dropdowns eronder. */
    #customer-search-form { flex-wrap: wrap; }
    #customer-search-form #customer-search-q { flex: 1 0 100%; }
    #customer-search-form #customer-search-type,
    #customer-search-form #customer-search-segment { flex: 1; width: auto; }
    /* Bulkactie-balk ("0 geselecteerd" + type-select + "Toepassen op
       selectie") op dezelfde klantenlijst: de knop viel op mobiel buiten
       beeld omdat de rij niet mocht wrappen — zelfde fix, knop op zijn
       eigen volle-breedte regel. */
    #bulk-tag-form { flex-wrap: wrap; }
    #bulk-tag-submit { flex: 1 0 100%; }
}

/* --- Uptime-strip (admin/status.php, status.php) --- */
.uptime-strip {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.uptime-dot {
    width: 10px;
    height: 18px;
    border-radius: 3px;
    background: var(--success);
    flex-shrink: 0;
}
.uptime-dot.degraded {
    background: var(--warn);
}
.uptime-dot.down {
    background: var(--danger);
}
/* --- Kennisbank-antwoorden (faq.php), opgemaakt via Quill in /admin/faq.php --- */
.faq-answer img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { margin: 0 0 10px; padding-left: 22px; }

.uptime-dot.outage {
    /* Klant-status.php: langdurige (8+ uur) storing, bewust oranje i.p.v.
       het felrode .down dat de admin-pagina's gebruiken. */
    background: var(--warn);
}
.uptime-dot.none {
    background: var(--line);
}

/* --- Winkelmandje (shop.php) --- */
/* Bestelpagina krijgt een bredere container dan de standaard .shell
   (900px) — zodat de productkolom niet hoeft in te leveren voor de
   winkelmandje-kolom ernaast. Zie shop.php: <div class="shell shop-shell">. */
.shell.shop-shell {
    max-width: 1300px;
}
.cart-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.cart-layout .cart-main {
    flex: 1;
    min-width: 0;
}
.cart-summary {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    /* 88px (topbar + lucht) is de juiste stickyoffset op shop.php voor
       uitgelogde bezoekers (nav-public.php, nog de klassieke horizontale
       .topbar) — ingelogde klanten krijgen op dezelfde pagina de nieuwe
       floating .sidebar zonder bovenbalk, dus daar volstaat de gewone
       pagina-padding (var(--sidebar-gap), zie de .sidebar-regels hierboven). */
    top: 88px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
/* Wegveeg-grip/samengeklapt-balkje: alleen zinvol in de mobiele
   bottom-sheet-vorm (zie @media max-width:1599px hieronder) — op de
   sticky-kolomvariant (>=1600px, dit hierboven) altijd verborgen. */
.cart-summary-handle,
.cart-summary-peek {
    display: none;
}
/* Alleen bij >=1600px is .cart-summary de sticky kolom naast de producten
   (zie @media max-width:1599px hieronder) — deze override is ook alleen
   dan bedoeld. Zonder deze media-grens overschreef "top" hier (hogere
   specificiteit dan de losse ".cart-summary"-regel) het expliciete
   "top:auto" van de mobiele bottom-sheet-variant, waardoor die met zowel
   top als bottom vastgezet over bijna de volle schermhoogte werd
   uitgerekt — een leeg, veel te groot winkelmandje in plaats van een
   compact bodemvel. */
@media (min-width: 1600px) {
    body:has(.sidebar) .cart-summary {
        top: var(--sidebar-gap);
        max-height: calc(100vh - var(--sidebar-gap) * 2);
    }
}
/* Tussen 901-1599px staat de sidebar al als vaste linkerkolom (>900px,
   zie de sidebar-media-query), maar .cart-summary zit dan nog in zijn
   bottom-sheet-vorm (<1600px, hieronder) die van links (0) tot rechts (0)
   over de volle breedte loopt — zonder correctie schuift dat bodemvel dan
   voor een deel ONDER de sidebar, met een rommelige overlap bij de
   afgeronde hoek als gevolg. */
@media (min-width: 901px) and (max-width: 1599px) {
    body:has(.sidebar) .cart-summary {
        left: calc(var(--sidebar-w) + var(--sidebar-gap) * 2);
    }
}
.cart-summary h3 {
    font-family: var(--font-display);
    font-size: 15px;
    margin: 0 0 12px;
}
.cart-summary .cart-empty {
    color: var(--ink-soft);
    font-size: 13.5px;
}
.cart-summary-items {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}
.cart-summary.has-items .cart-summary-items { display: flex; }
.cart-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}
.cart-summary-item .mono { flex-shrink: 0; }
.cart-summary-item .freq { color: var(--ink-soft); font-size: 10.5px; font-weight: 400; }
.cart-summary-item .name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cart-item-remove {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.cart-item-remove:hover { background: var(--danger-soft); color: var(--danger); }
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-bottom: 14px;
}
.cart-summary button[type="submit"] {
    margin-top: 0;
}
.cart-summary button[type="submit"]:disabled {
    background: var(--line);
    color: var(--ink-soft);
}
.cart-foot-note {
    text-align: center;
    font-size: 11px;
    color: var(--ink-soft);
}

/* Onder 1600px is er geen betrouwbare marge naast .shell om het
   winkelmandje los te pinnen zonder overlap met de content — dan valt
   terug op een onderaan vastgepind "bottom sheet": groeit mee met de
   inhoud (tot 65vh), met een scrollbare productlijst, zodat je op mobiel
   ook echt ziet wat er in het winkelmandje zit i.p.v. alleen het totaal. */
@media (max-width: 1599px) {
    .cart-summary {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-height: 65vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 15;
        flex-direction: column;
        gap: 0;
    }
    .cart-summary.has-items { display: flex; }
    .cart-summary h3, .cart-summary .cart-empty { display: none; }

    /* Wegveeg-grip — alleen zinvol in deze bottom-sheet-vorm, dus hier
       pas zichtbaar gemaakt (buiten deze media query blijft 'ie display:none,
       zie de basisregels verderop). */
    .cart-summary-handle {
        display: flex;
        justify-content: center;
        margin: -4px 0 8px;
        padding: 8px 0;
        cursor: grab;
        touch-action: none;
    }
    .cart-summary-handle span {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--line);
    }
    /* Samengeklapte staat: alles behalve de grip en dit balkje verbergen —
       de rest krimpt vanzelf mee (geen vaste hoogte nodig). */
    .cart-summary.collapsed > *:not(.cart-summary-handle):not(.cart-summary-peek) {
        display: none;
    }
    .cart-summary-peek {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-soft);
        cursor: pointer;
    }
    .cart-summary.collapsed .cart-summary-peek {
        display: flex;
    }
    .cart-summary.collapsed { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .cart-summary-items {
        max-height: 32vh;
        overflow-y: auto;
        margin: 0 0 10px;
        padding-right: 2px;
    }

    /* Kassakoopje blijft zichtbaar op mobiel, maar compacter: omschrijving
       weg, icoon/tekst kleiner, alles op minder regels. */
    .impulse-card { padding: 8px 10px; margin: 0 0 10px; }
    .impulse-head { margin-bottom: 3px; }
    .impulse-icon { width: 18px; height: 18px; }
    .impulse-icon svg { width: 10px; height: 10px; }
    .impulse-label { font-size: 9.5px; }
    .impulse-title { font-size: 12px; margin-bottom: 0; }
    .impulse-desc { display: none; }

    .cart-summary-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-top: 1px solid var(--line);
        padding-top: 10px;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-soft);
    }
    .cart-summary-total .cart-total-amount {
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
    }
    .cart-summary button[type="submit"] {
        width: 100%;
        margin-top: 0;
    }
}

/* ============================================================
   Bestelpagina (shop.php) — stappen-indeling, hosting-kaarten,
   domeinnaam-widget, "erbij?"-kaarten en het kassakoopje in het
   winkelmandje. Hergebruikt overal dezelfde tokens/componenten
   als de rest van de site (.panel, .mono, .tooltip-*, cart-*).
   ============================================================ */
.step-label { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.step-label:first-child { margin-top: 0; }
.step-label .num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-family: var(--font-display); font-size: 12.5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(11, 132, 255, 0.25);
}
.step-label .num.optional { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.step-label h2 { font-family: var(--font-display); font-size: 16.5px; margin: 0; }
.step-label .step-hint { color: var(--ink-soft); font-size: 13px; }

/* hosting-pakketkaarten */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.plan-card {
    position: relative;
    border: 2px solid var(--line-2);
    border-radius: 22px;
    padding: 20px 20px 18px;
    cursor: pointer;
    background: var(--panel);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
}
.plan-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card.selected { border-color: #0a8fe0; box-shadow: 0 0 0 6px rgba(10, 143, 224, 0.14); }
.plan-badge {
    position: absolute; top: -10px; left: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 100px; letter-spacing: 0.02em;
}
.plan-title { font-family: var(--font-display); font-size: 15.5px; padding-right: 24px; }
.plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 5px; }
.plan-price .amount { font-size: 19px; font-weight: 700; }
.plan-price .unit { color: var(--ink-soft); font-size: 12px; }
.plan-check {
    position: absolute; top: 14px; right: 14px;
    width: 19px; height: 19px; border-radius: 50%;
    border: 1.5px solid var(--line-2); background: var(--panel);
    display: flex; align-items: center; justify-content: center;
}
.plan-card.selected .plan-check { border-color: var(--accent); background: var(--accent); }
.plan-check svg { width: 11px; height: 11px; opacity: 0; }
.plan-card.selected .plan-check svg { opacity: 1; }
.plan-card-hint { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); }

/* domeinnaam-widget */
.domain-row { display: flex; gap: 8px; }
.domain-row input[type="text"] { flex: 1; }
.ext-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ext-pill {
    position: relative;
    border: 1.5px solid var(--line); border-radius: 100px;
    padding: 7px 14px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; background: var(--panel);
}
.ext-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ext-pill.selected { border-color: #0a8fe0; box-shadow: 0 0 0 4px rgba(10, 143, 224, 0.13); background: var(--accent-soft); color: var(--brand-text); font-weight: 600; }
.ext-pill .mono { color: var(--ink-soft); }
.ext-pill.selected .mono { color: var(--brand-text); }
.domain-result { margin-top: 10px; font-size: 13px; min-height: 18px; }
.domain-result.available { color: var(--success); }
.domain-result.unavailable { color: var(--danger); }
.domain-hint {
    margin-top: 12px; font-size: 12.5px; color: var(--ink-soft);
    background: var(--paper); border-radius: var(--radius-md); padding: 9px 12px;
    display: none;
}
.domain-hint.show { display: block; }

/* "erbij?"-kaarten (upsells) */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.addon-card {
    display: flex; flex-direction: column;
    border: 2px solid var(--line-2); border-radius: 18px;
    padding: 14px 16px; cursor: pointer; background: var(--panel);
}
.addon-card:hover { border-color: var(--accent); }
.addon-card.selected { border-color: #0a8fe0; box-shadow: 0 0 0 5px rgba(10, 143, 224, 0.13); }
.addon-row { display: flex; gap: 11px; align-items: center; }
.addon-card input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; }
.addon-card .addon-title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; }
.addon-card .addon-price { margin-left: auto; text-align: right; flex-shrink: 0; padding-left: 8px; }
.addon-card .addon-price .mono { font-weight: 700; font-size: 13.5px; }
.addon-card .addon-price .unit { display: block; color: var(--ink-soft); font-size: 10.5px; }
.addon-card .product-description { margin-left: 28px; }

/* Nette productomschrijving — alleen op desktop zichtbaar (zie de
   media query onderaan dit blok), als vervanging van de mobiele tooltip
   (.tooltip-wrap hierboven). Moneybird-omschrijvingen zijn meestal een
   handvol losse kenmerken per regel, vandaar een opsomming i.p.v. lopende
   tekst — leest in één oogopslag als een mini-featurelijst. */
.product-description {
    display: none;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.product-description li {
    position: relative;
    padding: 1.5px 0 1.5px 14px;
}
.product-description li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}
p.product-description { padding: 0; }

@media (min-width: 641px) {
    .product-description { display: block; }
    /* Op desktop is er ruimte voor de volledige omschrijving hierboven —
       de mobiele hover-tooltip is dan overbodig (en hover is op desktop
       sowieso minder betrouwbaar bereikbaar dan op mobiel getikt). De
       !important is nodig omdat de hover-regel (.tooltip-wrap:hover
       .tooltip-bubble) specifieker is dan een simpele class-selector. */
    .tooltip-icon { display: none; }
    .tooltip-bubble { display: none !important; }
}

/* winkelmandje: item-aantal + kassakoopje */
.cart-summary h3 { display: flex; align-items: center; justify-content: space-between; }
.cart-count {
    background: var(--paper); color: var(--ink-soft);
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 100px;
}
.cart-summary.has-items .cart-count { background: var(--accent-soft); color: var(--brand-text); }
.impulse-card {
    margin: 4px 0 12px;
    border: 1.5px dashed rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(11, 132, 255, 0.05));
    border-radius: var(--radius-md);
    padding: 12px;
}
.impulse-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.impulse-icon {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-2); display: flex; align-items: center; justify-content: center;
}
.impulse-icon svg { width: 12px; height: 12px; }
.impulse-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); }
.impulse-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.impulse-desc { font-size: 12px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.45; }
.impulse-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.impulse-price { font-size: 12.5px; font-weight: 700; }
.impulse-price .unit { color: var(--ink-soft); font-weight: 400; font-size: 10.5px; }
.impulse-add {
    border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-family: var(--font-body);
    font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 100px; cursor: pointer;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(11, 132, 255, 0.25);
}
.impulse-add:hover { opacity: 0.96; }

.status-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: status-dot-pulse 2.2s ease-out infinite; }
.status-dot.ok { background: var(--success); }
.status-dot.critical { background: var(--danger); }
@keyframes status-dot-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .status-dot::before { animation: none; }
}
.impulse-add.added { background: var(--success); box-shadow: none; }

.check-btn {
    width: auto; white-space: nowrap; margin-top: 0; padding: 0 18px;
    border: none; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
    cursor: pointer; box-shadow: var(--shadow-glow);
}
.check-btn:hover { opacity: 0.96; transform: translateY(-1px); }

/* --- Afspraak-wizard (public/afspraak.php, public/appointments.php) --- */
.appt-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.appt-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all 0.2s ease; flex-shrink: 0; }
.appt-step-dot.done { background: var(--success); }
.appt-step-dot.current { background: var(--accent); width: 20px; border-radius: 4px; }
.appt-step-line { flex: 1; height: 1px; background: var(--line); }
.appt-step-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.appt-step-hint { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 22px; }

.appt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.appt-cal-head .month-label { font-weight: 600; font-size: 14.5px; }
.appt-cal-nav-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
    color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.appt-cal-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.appt-cal-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.appt-cal-dow {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 11px; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; text-align: center;
}
.appt-cal-week {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; border-radius: 10px; padding: 6px 4px;
    cursor: pointer; border: 1.5px solid transparent; transition: all 0.12s ease; margin-bottom: 4px; position: relative;
}
.appt-cal-week:hover:not(.disabled) { background: var(--accent-soft); }
.appt-cal-week.selected { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.appt-cal-week.disabled { cursor: not-allowed; opacity: 0.35; }
.appt-cal-week.full { cursor: not-allowed; opacity: 0.5; }
.appt-cal-week.blocked { cursor: not-allowed; opacity: 0.5; background: var(--paper); }
.appt-cal-day { text-align: center; font-size: 13.5px; padding: 6px 0; border-radius: 6px; color: var(--ink); }
.appt-cal-week.selected .appt-cal-day { color: #fff; font-weight: 600; }
.appt-cal-day.muted { color: var(--ink-soft); opacity: 0.5; }
.appt-cal-full-label {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger); background: var(--danger-soft);
    padding: 2px 6px; border-radius: 100px;
}
.appt-cal-blocked-label { color: var(--ink-soft); background: var(--line); }
.appt-cal-legend { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
.appt-week-picked-note {
    margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
    font-size: 13.5px; font-weight: 600; display: none; align-items: center; gap: 8px;
}
.appt-week-picked-note.show { display: flex; }

.appt-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.appt-choice-grid.four { grid-template-columns: repeat(4, 1fr); }
.appt-choice-card {
    border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 18px 14px; text-align: center;
    cursor: pointer; transition: all 0.12s ease; background: var(--panel);
}
.appt-choice-card:hover { border-color: var(--accent); }
.appt-choice-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.appt-choice-card svg { width: 24px; height: 24px; margin-bottom: 10px; color: var(--ink-soft); }
.appt-choice-card.selected svg { color: var(--accent); }
.appt-choice-card .ct-label { font-weight: 600; font-size: 13.5px; display: block; }
.appt-choice-card .ct-sub { font-size: 11.5px; color: var(--ink-soft); display: block; margin-top: 2px; }
@media (max-width: 640px) { .appt-choice-grid.four { grid-template-columns: repeat(2, 1fr); } }

.appt-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }

.appt-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; gap: 12px; }
.appt-summary-row:last-child { border-bottom: none; }
.appt-summary-row .k { color: var(--ink-soft); flex-shrink: 0; }
.appt-summary-row .v { font-weight: 600; text-align: right; }

.appt-btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 10px; }

.appt-ics-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md);
    border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 13.5px;
    cursor: pointer; text-decoration: none;
}
.appt-ics-btn svg { width: 16px; height: 16px; color: var(--accent); }
.appt-ics-btn:hover { border-color: var(--accent); text-decoration: none; }

/* Oogje-knop om een wachtwoordveld (bv. gevoelige ticketinfo) tijdelijk
   leesbaar te maken tijdens het intypen — zelfde soort wrapper-patroon als
   het €-prefix bij de geschatte kosten van een afspraak. */
.sensitive-value-wrap { position: relative; }
.sensitive-value-wrap input { padding-right: 42px !important; }
.sensitive-value-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 0; margin: 0; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
/* transform hier herhalen: de generieke "button:hover"-regel (element+pseudo-
   class) is specifieker dan deze ene class-selector en zou anders bij hover
   de translateY(-50%) overschrijven met zijn eigen translateY(-1px), waardoor
   het oogje bij hover uit het midden springt. */
.sensitive-value-toggle:hover { color: var(--accent); background: var(--accent-soft); transform: translateY(-50%); }
.sensitive-value-toggle svg { width: 18px; height: 18px; }

/* Zwevende "Hulp nodig?"-knop op de bestelpagina (public/shop.php) — linkt
   naar het zakelijke WhatsApp-nummer, met een voorgevulde openingszin. */
.whatsapp-help {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #25d366;
    color: #fff;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.whatsapp-help:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5);
    text-decoration: none;
    color: #fff;
}
@media (max-width: 640px) {
    .whatsapp-help span { display: none; }
    .whatsapp-help { padding: 13px; bottom: 84px; }
    /* Zodra er iets in de winkelmand zit, groeit .cart-summary op mobiel
       naar een full-width bottom sheet (tot 65vh) — een vaste bottom-positie
       voor deze knop kan daar dan altijd overheen komen te staan, ongeacht
       hoe hoog die sheet is. Op dat moment is de klant al aan het bestellen,
       dus verberg de knop simpelweg zolang de winkelmand zichtbaar is; hij
       komt vanzelf terug zodra de mand weer leeg is. */
    body:has(.cart-summary.has-items) .whatsapp-help { display: none; }
}

/* Jaartal-knoppen boven de factuurlijst op het klantdashboard — andere
   jaren staan achter hun eigen jaartal i.p.v. één lange lijst. */
.year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px 4px;
}
.year-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}
.year-tab:hover { background: var(--paper); text-decoration: none; }
.year-tab.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.year-tab-unpaid {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--warn);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Voettekst: één regel (wrapt op smal) — zie views/partials/footer.php. */
.footer-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    font-size: 12.5px;
    color: var(--faint);
}
.footer-line strong { color: var(--ink-soft); }
.footer-line a { color: var(--faint); text-decoration: none; }
.footer-line a:hover { color: var(--brand-text); text-decoration: underline; }

/* ===== Bento-dashboard (herontwerp okt 2026) — zie views/partials/dashboard-bento.php ===== */
@keyframes bento-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bento-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -24px) scale(1.08); } }
@keyframes bento-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bento-hero, .bento-actions-head, .bento-actions, .bento-grid { animation: bento-rise 0.5s ease both; }
@media (prefers-reduced-motion: reduce) {
    .bento-hero, .bento-actions-head, .bento-actions, .bento-grid, .bento-hero::before, .bento-hero::after, .bento-chip, .bento-pill .dot { animation: none !important; }
}

.bento-hero {
    position: relative;
    overflow: hidden;
    margin: 4px 0 16px;
    padding: 46px 44px 46px 50px;
    border-radius: 32px;
    background: var(--hero);
    color: #fff;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 44px;
    align-items: center;
}
.bento-hero::before, .bento-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.bento-hero::before { width: 560px; height: 560px; left: -180px; top: -220px; background: radial-gradient(circle, rgba(10, 143, 224, 0.6), transparent 65%); animation: bento-drift 14s ease-in-out infinite; }
.bento-hero::after { width: 520px; height: 520px; right: -160px; bottom: -240px; background: radial-gradient(circle, rgba(25, 192, 127, 0.5), transparent 65%); animation: bento-drift 18s ease-in-out infinite reverse; }
.bento-hero-copy, .bento-hero-visual { position: relative; z-index: 1; }
.bento-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.bento-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 500;
}
.bento-pill .dot, .bento-pill i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pv-pulse 2.2s infinite; }
.bento-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 60px);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #fff;
}
.bento-hero h1 .grad { background: linear-gradient(90deg, #5cc3ff, #4ade80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-hero p { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.bento-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bento-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.bento-btn svg { width: 15px; height: 15px; }
.bento-btn:hover { transform: translateY(-2px); text-decoration: none; }
.bento-btn.light { background: #fff; color: #08162d; }
.bento-btn.glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; }
.bento-btn.glass:hover { background: rgba(255, 255, 255, 0.16); }

.bento-hero-visual { perspective: 1600px; min-height: 280px; display: flex; align-items: center; }
.bento-browser {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transform: rotateY(-9deg) rotateX(3deg);
    transform-origin: left center;
    box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7);
}
.bento-browser-bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #e6eaf0; }
.bento-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e24b4a; }
.bento-browser-bar i:nth-child(2) { background: #ef9f27; }
.bento-browser-bar i:nth-child(3) { background: #22c55e; }
.bento-browser-bar span { flex: 1; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #566176; font-size: 11px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-browser-body { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eef3fa, #e3ebf6); }
.bento-browser-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; }
.bento-browser-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8a93a6; font-size: 13px; }
.bento-browser-fallback svg { width: 38px; height: 38px; opacity: 0.6; }
.bento-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: #fff;
    color: #0b1324;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
    animation: bento-float 5.5s ease-in-out infinite;
    z-index: 2;
}
.bento-chip.left { left: -18px; bottom: 6px; }
.bento-chip.right { right: -8px; top: 0; animation-duration: 6.5s; animation-direction: reverse; }
.bento-chip b { display: block; font-size: 13px; }
.bento-chip small { display: block; font-size: 11.5px; color: #566176; }
.bento-chip .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.bento-chip .ic svg { width: 16px; height: 16px; }
.bento-chip .ic.ok { background: #e2f5ea; color: #0d7340; }
.bento-chip .ic.brand { background: #e5f1fb; color: #0a75c2; }

.bento-actions-head { display: flex; align-items: center; gap: 10px; margin: 8px 4px 10px; }
.bento-actions-head h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.bento-actions-head .count { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--brand-text); font-size: 12px; font-weight: 700; }
.bento-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-bottom: 16px; }
.bento-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease;
}
.bento-action:hover { transform: translateY(-2px); }
.bento-action .txt { flex: 1; min-width: 150px; }
.bento-action .txt b { display: block; font-size: 14.5px; font-weight: 600; }
.bento-action .txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.bento-action .ic, .bento-row .ic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 15px; }
.bento-row .ic.sm { width: 36px; height: 36px; border-radius: 12px; }
.bento-action .ic svg, .bento-row .ic svg { width: 20px; height: 20px; }
.ic.warn { background: var(--warn-soft); color: var(--warn-text); }
.ic.brand { background: var(--accent-soft); color: var(--brand-text); }
.ic.ok { background: var(--success-soft); color: var(--ok-text); }
.ic.danger { background: var(--danger-soft); color: var(--danger-text); }
.pillbtn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.pillbtn:hover { background: var(--surface-3); text-decoration: none; }

.bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-flow: dense; gap: 16px; margin-bottom: 28px; }
.bento-grid .tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 24px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    min-width: 0;
}
.bento-grid .tile.span2 { grid-column: span 2; }
.bento-grid .tile.span2x2 { grid-column: span 2; grid-row: span 2; }
.bento-grid .tile.center { align-items: center; text-align: center; }
@media (max-width: 560px) { .bento-grid .tile.span2, .bento-grid .tile.span2x2 { grid-column: span 1; } }
.tile .lbl { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tile .tag { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.tile .chip-ok { padding: 3px 10px; border-radius: 999px; background: var(--success-soft); color: var(--ok-text); font-size: 12px; font-weight: 700; }
.bento-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.bento-big { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bento-big.xl { font-size: 48px; letter-spacing: -0.03em; }
.bento-big.sm { font-size: 25px; }
.bento-big.domain { font-size: 22px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.bento-big .of { font-size: 18px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.bento-bigrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trend { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.trend.up { background: var(--success-soft); color: var(--ok-text); }
.trend.down { background: var(--danger-soft); color: var(--danger-text); }
.bento-sub { font-size: 12.5px; color: var(--ink-soft); }
.bento-faint { font-size: 12px; color: var(--faint); }
.bento-area { width: 100%; flex: 1; min-height: 150px; margin-top: 6px; }
.bento-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); }
.bento-ring { position: relative; width: 128px; height: 128px; margin: 6px 0; }
.bento-ring svg { width: 100%; height: 100%; }
.bento-ring-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.bento-ring-text .bento-sub { font-size: 11.5px; }
.bento-segs { display: flex; gap: 5px; }
.bento-segs i { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); }
.bento-segs i.on { background: linear-gradient(90deg, #0a8fe0, #19c07f); }
.bento-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bento-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0a8fe0, #19c07f); }
.tile-link { font-size: 13px; font-weight: 600; color: var(--brand-text); text-decoration: none; }
.tile-link:hover { text-decoration: underline; }
.bento-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.bento-row:first-of-type { border-top: 0; }
.bento-row .main { flex: 1; min-width: 0; }
.bento-row .main b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-row .main small, .bento-row .side small { display: block; font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bento-row .side { text-align: right; flex-shrink: 0; }
.bento-row .side b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.iconbtn { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); }
.iconbtn:hover { background: var(--surface-3); color: var(--ink); }
.iconbtn svg { width: 16px; height: 16px; }
.days { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.days.soon { background: var(--warn-soft); color: var(--warn-text); }
.bento-detail-head { margin: 8px 4px 12px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

@media (max-width: 700px) {
    .bento-hero { padding: 30px 22px 34px; gap: 30px; border-radius: 26px; }
    .bento-hero h1 { font-size: 40px; }
    .bento-hero p { font-size: 15.5px; }
    .bento-hero-visual { min-height: 0; padding: 14px 0 22px; }
    .bento-browser { transform: none; }
    .bento-chip.left { left: 6px; bottom: 6px; }
    .bento-chip.right { right: 6px; top: 0; }
}

/* Hero "spotlight": datum + systeemstatus, grote kop met gradient, vier kerncijfers. */
.bento-hero.spot { display: block; padding: 44px 48px 40px; }
.spot-top { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; font-size: 14px; }
.spot-date { color: rgba(255, 255, 255, 0.65); text-transform: none; }
.spot-date::after { content: "•"; margin-left: 14px; color: rgba(255, 255, 255, 0.3); font-size: 8px; vertical-align: middle; }
.spot-status { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: #86efac; font-weight: 500; }
.spot-status i { width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #22c55e; animation: pv-pulse 2.2s infinite; }
.spot-status.warn { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.spot-status.warn i { background: #f5a524; }
.bento-hero.spot h1 { position: relative; z-index: 1; max-width: 900px; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; }
.spot-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 34px; }
.spot-stat { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.spot-stat .k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.spot-stat .k svg { width: 15px; height: 15px; }
.spot-stat b { display: block; margin-top: 12px; font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.spot-stat small { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 700px) {
    .bento-hero.spot { padding: 28px 20px 24px; }
    .spot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
    .spot-stat { padding: 14px; }
    .spot-stat b { font-size: 24px; }
}

/* Productrijen (plugins, strippenkaarten, overige) als kaarten met duidelijke
   rand; wat gekozen is krijgt een blauwe omlijning + halo — zie
   renderProductRow() in shop.php en syncCardStates(). */
.product-card {
    margin: 12px 0;
    padding: 16px 20px;
    border: 2px solid var(--line-2);
    border-radius: 22px;
    background: var(--panel);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: var(--accent); }
.product-card.selected { border-color: #0a8fe0; box-shadow: 0 0 0 6px rgba(10, 143, 224, 0.13); }
.product-card input[type="checkbox"] { width: 24px !important; height: 24px !important; border-radius: 8px; }

/* Grote lege-staat-kaart (licenties, afspraken) — zie renderEmptyHero(). */
.empty-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px 56px;
    padding: 56px 64px;
    border-radius: 30px;
    background: var(--panel);
    background-image: radial-gradient(520px circle at 6% 50%, rgba(10, 143, 224, 0.1), transparent 65%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.empty-hero-art { position: relative; width: 180px; height: 180px; flex-shrink: 0; display: grid; place-items: center; }
.empty-hero-art .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--line-2); animation: bento-float 6s ease-in-out infinite; }
.empty-hero-art .disc { position: absolute; inset: 24px; border-radius: 50%; background: var(--accent-soft); }
.empty-hero-art .tile {
    position: relative;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(135deg, #0a8fe0, #19c07f);
    color: #fff;
    transform: rotate(-8deg);
    box-shadow: 0 20px 36px -12px rgba(10, 143, 224, 0.6);
}
.empty-hero-art .tile svg { width: 38px; height: 38px; }
.empty-hero-copy { flex: 1; min-width: 240px; }
.empty-hero-copy h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.empty-hero-copy p { margin: 0 0 22px; max-width: 460px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.empty-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(120deg, #0a8fe0, #19c07f);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(10, 143, 224, 0.7);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.empty-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }
.empty-hero-cta svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .empty-hero { padding: 34px 24px; gap: 22px; } .empty-hero-art { width: 130px; height: 130px; } .empty-hero-art .tile { width: 64px; height: 64px; border-radius: 22px; } .empty-hero-copy h2 { font-size: 24px; } }

/* Facturen-pagina (herontwerp): samenvattingstegels, filterpills, rijen. */
.inv-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-bottom: 14px; }
.inv-tile { position: relative; overflow: hidden; padding: 22px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.inv-tile.dark { background: var(--hero); color: #fff; border-color: transparent; }
.inv-tile.dark::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 143, 224, 0.6), transparent 65%); pointer-events: none; }
.inv-tile > * { position: relative; }
.inv-tile .k { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.inv-tile.dark .k { color: rgba(255, 255, 255, 0.65); }
.inv-tile .v { margin-top: 6px; font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.inv-tile .s { margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.inv-tile.dark .s { color: rgba(255, 255, 255, 0.6); }
.inv-tile .chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--success-soft); color: var(--ok-text); font-size: 12px; font-weight: 700; }
.inv-tile .chip.warn { background: var(--warn-soft); color: var(--warn-text); }
.inv-tile .chip svg { width: 13px; height: 13px; }
.inv-list { padding: 0; overflow: hidden; }
.inv-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.inv-pill { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.inv-pill span { opacity: 0.6; margin-left: 2px; }
.inv-pill:hover { background: var(--surface-3); text-decoration: none; }
.inv-pill.active { background: var(--ink); color: var(--paper); }
.inv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); }
.inv-row:first-of-type { border-top: 0; }
.inv-row:hover { background: var(--surface-2); }
.inv-row .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--brand-text); }
.inv-row .ico svg { width: 19px; height: 19px; }
.inv-row .main { min-width: 0; }
.inv-row .main b { display: block; font-size: 15px; }
.inv-row .main small { display: block; font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row .date { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.inv-row .amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-row .acts { display: flex; gap: 8px; align-items: center; }
.inv-row .acts a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.inv-row .acts a.pdf { border: 1px solid var(--line-2); color: var(--ink); }
.inv-row .acts a.pdf:hover { background: var(--surface-3); }
.inv-row .acts a.pay { background: linear-gradient(120deg, #0a8fe0, #19c07f); color: #fff; }
.inv-row .acts svg { width: 14px; height: 14px; }
@media (max-width: 860px) {
    .inv-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 10px; }
    .inv-row .date, .inv-row .amount { grid-column: 2; }
    .inv-row .badge-cell { grid-column: 3; grid-row: 1; }
    .inv-row .acts { grid-column: 2 / -1; }
}
.inv-empty { padding: 56px 20px; text-align: center; }
.inv-empty .ok { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--ok-text); }
.inv-empty .ok svg { width: 26px; height: 26px; }
.inv-empty b { display: block; font-size: 17px; }
.inv-empty small { color: var(--ink-soft); }

/* Admin-hero: kerncijfers zijn klikbaar (springen naar het bijbehorende paneel). */
a.spot-stat { display: block; color: inherit; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; }
a.spot-stat:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); text-decoration: none; }
@media (min-width: 900px) { .spot-stats.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }