/* ==========================================================================
   SEOLinker — gedeeld design system (admin en klantportaal)
   Opbouw: 1 tokens · 2 basis · 3 app-shell · 4 pagina-structuur · 5 componenten
           · 6 pagina-specifiek · 7 utilities · 8 responsive · 9 toegankelijkheid
   Regels: templates gebruiken alleen deze classes, geen inline styles. Kleuren alleen via tokens,
   zodat de donkere modus (html[data-color-scheme]) overal klopt.
   Thema's (admin.css, dashboard.css) zetten alleen de shell en eigen pagina-onderdelen.
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Merk */
    --accent: #e04f00;             /* merkoranje (logo); "Ink & Ember", docs/marktplaats/onderzoek/popi-ux.md §7.5 */
    --accent-hover: #cc4700;
    --accent-pressed: #b84000;
    --accent-soft: rgba(224, 79, 0, 0.1);
    --accent-tint: #fff4ec;
    --accent-border: rgba(224, 79, 0, 0.35);
    --accent-text: #b93f00;
    --accent-fill: #cc4700;          /* primaire knop: wit erop 4,7:1 (AA) */
    --accent-fill-hover: #b84000;
    --on-accent: #ffffff;
    --green-fill: #34c759;
    --blue-fill: #57534e;           /* geen blauw meer: "bezig" is neutraal */
    --cyan-fill: #a8a29e;
    --on-danger: #ffffff;

    /* Oppervlakken (licht → zwaar): canvas, kaart, inzet */
    --bg: #f7f6f3;
    --surface: #ffffff;
    --surface-2: #fafaf9;
    --surface-raised: #ffffff;
    --fill: rgba(120, 113, 108, 0.1);
    --fill-2: rgba(120, 113, 108, 0.17);
    --hover: rgba(120, 113, 108, 0.06);
    --input-bg: #ffffff;

    /* Lijnen */
    --border: rgba(28, 25, 23, 0.1);
    --border-strong: rgba(28, 25, 23, 0.2);
    --border-hover: rgba(28, 25, 23, 0.34);
    --separator: rgba(28, 25, 23, 0.07);

    /* Tekst */
    --text: #1c1917;
    --text-2: #44403c;
    --text-3: #78716c;
    --text-4: #a8a29e;

    /* Signaalkleuren: tekst / achtergrond / rand */
    --success: #15803d; --success-bg: #ecfdf3; --success-border: rgba(21, 128, 61, 0.28);
    --warning: #b45309; --warning-bg: #fffbeb; --warning-border: rgba(180, 83, 9, 0.3);
    --danger:  #b91c1c; --danger-bg:  #fef2f2;   --danger-border:  rgba(185, 28, 28, 0.3);
    --info:    #44403c; --info-bg:    #f5f5f4;   --info-border:    rgba(68, 64, 60, 0.2);   /* bezig/neutraal: geen blauw */
    --ai: #6d28d9; --ai-bg: #f5f3ff;   /* alleen AI-zichtbaarheid */
    --control: #1c1917; --control-track: #e7e5e4;   /* bediening (vinkjes, schuiven, schakelaars) in inkt */
    --ink: #0d0d0f; --ink-2: #161618; --ink-line: #232327; --ink-text: #f5f5f4; --ink-text-2: #a1a1a8;
    --neutral: #44403c; --neutral-bg: rgba(120, 113, 108, 0.12); --neutral-border: rgba(120, 113, 108, 0.2);
    --danger-hover: #a3111a;

    /* Materiaal (doorschijnende balken) */
    --material: rgba(250, 250, 252, 0.78);
    --material-thick: rgba(246, 246, 248, 0.9);
    --material-border: rgba(0, 0, 0, 0.08);
    --scrim: rgba(0, 0, 0, 0.32);
    --tooltip-bg: #1c1917;
    --tooltip-text: #ffffff;

    /* Sidebar (standaard: donker, admin) */
    --sidebar-w: 248px;
    --sidebar-bg: #0d0d0f;
    --sidebar-border: #232327;
    --sidebar-text: #a1a1a8;
    --sidebar-text-strong: #f5f5f7;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(255, 255, 255, 0.1);
    --sidebar-active-text: #ffffff;
    --sidebar-label: #6e6e76;
    --sidebar-count-bg: rgba(255, 255, 255, 0.1);
    --sidebar-input-bg: rgba(255, 255, 255, 0.05);
    --sidebar-input-focus: #3c3c44;

    /* Typografie: systeemletter (SF Pro op Apple), cijfers rond waar het telt */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 0.875rem;  /* 14px */
    --fs-md: 1rem;        /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 1.875rem;   /* 30px */
    --fs-title: 2.125rem; /* 34px, grote paginatitel */

    /* Ruimte (4px-raster) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

    /* Vorm */
    --radius-sm: 8px;
    --radius: 11px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 999px;
    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 18px -6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 40px -8px rgba(0, 0, 0, 0.2);
    --ring: 0 0 0 3px rgba(224, 79, 0, 0.28);
    --ring-danger: 0 0 0 4px rgba(255, 59, 48, 0.2);
    --control-h: 36px;
    --control-h-sm: 30px;

    /* Beweging: kort en kritisch gedempt; --ease-spring = de iOS-curve voor panelen */
    --t: 160ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Donkere modus: alleen waar de shell erom vraagt (klantportaal: data-color-scheme="auto") */
@media (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] {
        color-scheme: dark;
        --accent: #ff6a1a;
        --accent-hover: #ff8640;
        --accent-pressed: #f0640f;
        --accent-soft: rgba(255, 106, 26, 0.16);
        --accent-tint: rgba(255, 106, 26, 0.12);
        --accent-border: rgba(255, 106, 26, 0.42);
        --accent-text: #ff9a5c;
        --accent-fill: #e05000;
        --accent-fill-hover: #cc4700;
        --green-fill: #30d158;
        --blue-fill: #a8a29e;
        --cyan-fill: #78716c;

        --bg: #0b0b0c;
        --surface: #161618;
        --surface-2: #1e1e21;
        --surface-raised: #2c2c2e;
        --fill: rgba(118, 118, 128, 0.22);
        --fill-2: rgba(118, 118, 128, 0.32);
        --hover: rgba(255, 255, 255, 0.04);
        --input-bg: rgba(118, 118, 128, 0.14);

        --border: rgba(84, 84, 88, 0.55);
        --border-strong: rgba(120, 120, 128, 0.55);
        --border-hover: rgba(150, 150, 158, 0.65);
        --separator: rgba(84, 84, 88, 0.4);

        --text: #f5f5f4;
        --text-2: #d6d3d1;
        --text-3: #a8a29e;
        --text-4: #78716c;

        --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.12); --success-border: rgba(74, 222, 128, 0.35);
        --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.35);
        --danger:  #f87171; --danger-bg:  rgba(248, 113, 113, 0.13);  --danger-border:  rgba(248, 113, 113, 0.4);
        --info:    #d6d3d1; --info-bg:    rgba(214, 211, 209, 0.1); --info-border:    rgba(214, 211, 209, 0.3);
        --ai: #a78bfa; --ai-bg: rgba(167, 139, 250, 0.12);
        --control: #f5f5f4; --control-track: #3a3a3e;
        --neutral: #d1d1d6; --neutral-bg: rgba(118, 118, 128, 0.24); --neutral-border: rgba(118, 118, 128, 0.36);
        --danger-hover: #ff8a84;

        --material: rgba(28, 28, 30, 0.72);
        --material-thick: rgba(22, 22, 24, 0.88);
        --material-border: rgba(255, 255, 255, 0.08);
        --scrim: rgba(0, 0, 0, 0.55);
        --tooltip-bg: #3a3a3c;

        --shadow-xs: none;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.07);
        --shadow-lg: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 16px 48px -8px rgba(0, 0, 0, 0.7);
        --ring: 0 0 0 4px rgba(255, 116, 38, 0.32);
    }
}

/* 2. Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    letter-spacing: -0.006em;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-text); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.small, .xsmall, .hint, .badge, .cell-sub, .stat-label, .nav-label, .tab, .chip { letter-spacing: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--fill); padding: 1px 6px; border-radius: 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }
[data-lucide], .lucide { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }

/* 3. App-shell (standaard: donkere sidebar; klantportaal overschrijft in dashboard.css) ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    z-index: 40;
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-5) var(--s-4); }
.sidebar-brand img { height: 56px; width: auto; }
.sidebar-close { display: none; }

.nav { flex: 1; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); scrollbar-width: thin; scrollbar-color: var(--sidebar-border) transparent; }
.nav-group + .nav-group { margin-top: var(--s-4); }
.nav-label {
    display: block; padding: 0 var(--s-3) var(--s-1);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--sidebar-label);
}
.nav-link {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 34px; padding: 0 var(--s-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base); font-weight: 500;
    color: var(--sidebar-text);
    transition: background var(--t), color var(--t);
}
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-link.is-active { background: var(--sidebar-active); color: var(--sidebar-active-text); }
.nav-link.is-active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-link .lucide, .nav-link [data-lucide] { width: 17px; height: 17px; }
.nav-count {
    margin-left: auto; min-width: 20px; padding: 0 6px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--sidebar-count-bg); color: var(--sidebar-text-strong);
}
.nav-count.is-alert { background: var(--accent-fill); color: var(--on-accent); }

.sidebar-tools { padding: var(--s-3); border-top: 1px solid var(--sidebar-border); }
.sidebar-search { position: relative; }
.sidebar-search .lucide, .sidebar-search [data-lucide] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--sidebar-label); pointer-events: none; }
.sidebar-search input {
    width: 100%; height: 34px; padding: 0 10px 0 32px;
    border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm);
    background: var(--sidebar-input-bg); color: var(--sidebar-text-strong);
    font-size: var(--fs-sm);
}
.sidebar-search input::placeholder { color: var(--sidebar-label); }
.sidebar-search input:focus { outline: none; border-color: var(--sidebar-input-focus); }

.sidebar-user { display: flex; align-items: center; gap: 10px; padding: var(--s-3) var(--s-4) var(--s-4); }
.sidebar-user-info { min-width: 0; flex: 1; line-height: 1.3; }
.sidebar-user-name { display: block; color: var(--sidebar-text-strong); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { display: block; font-size: var(--fs-xs); }
.sidebar-icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--sidebar-text);
}
.sidebar-icon-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

.avatar {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: linear-gradient(160deg, #ff8a3d, var(--accent) 60%, #e5480a); color: #fff;
    font-size: var(--fs-sm); font-weight: 700;
}
.avatar-sm { width: 26px; height: 26px; font-size: var(--fs-xs); }
.avatar-muted { background: var(--fill-2); color: var(--text-2); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--s-8) var(--s-10) 80px; }
.nav-overlay { display: none; }

/* 4. Pagina-structuur ---------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head-main { min-width: 0; }
.page-title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
    font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.022em; line-height: 1.15;
}
.page-count { font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
.page-sub { margin-top: 6px; color: var(--text-3); font-size: var(--fs-base); }
.page-sub a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 2px; margin-bottom: var(--s-2); color: var(--accent-text); font-size: var(--fs-base); font-weight: 500; }
.back-link:hover { color: var(--accent-hover); }
.back-link .lucide, .back-link [data-lucide] { width: 17px; height: 17px; margin-left: -4px; }

.section { margin-bottom: var(--s-8); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.section-title { font-size: var(--fs-lg); font-weight: 650; display: flex; align-items: center; gap: var(--s-2); }
.section-title .page-count { font-size: var(--fs-base); }

.toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* Grids */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1fr) 380px; }
/* Zijkolom die op smalle schermen bóven de inhoud moet staan (overzicht/status): aside staat eerst in de HTML */
.split-aside-first > aside { grid-column: 2; grid-row: 1; }
.split-aside-first > :not(aside) { grid-column: 1; grid-row: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.grid-3-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack > .alert, .stack-lg > .alert { margin-bottom: 0; }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-6); }
.sticky { position: sticky; top: var(--s-6); }

/* 5. Componenten --------------------------------------------------------- */

/* Knoppen: capsules; primair = merkkleur, secundair = getinte vulling */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--control-h); padding: 0 16px;
    border: 0; border-radius: var(--radius-full);
    font-size: var(--fs-base); font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: -0.01em;
    cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: background var(--t), color var(--t), box-shadow var(--t), transform 220ms var(--ease-out), opacity var(--t);
}
.btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 80ms; }
.btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 1px 2px rgba(150, 50, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.btn-primary:hover { background: var(--accent-fill-hover); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-fill-hover); }
.btn-secondary { background: var(--fill); color: var(--text); }
.btn-secondary:hover { background: var(--fill-2); color: var(--text); }
.btn-tinted { background: var(--accent-soft); color: var(--accent-text); }
.btn-tinted:hover { background: var(--accent-border); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--fill); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); color: var(--on-danger); }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-bg); color: var(--danger); }
.btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 22px; font-size: var(--fs-md); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-block { width: 100%; }
.btn .lucide, .btn [data-lucide] { width: 16px; height: 16px; }
.btn-sm .lucide, .btn-sm [data-lucide] { width: 14px; height: 14px; }
.btn-group { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Kaarten: geen harde rand, zachte schaduw; kop en voet met haarlijn */
.card { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px var(--s-5); border-bottom: 1px solid var(--separator); min-height: 54px; }
.card-title { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
.card-title .lucide, .card-title [data-lucide] { width: 18px; height: 18px; color: var(--text-3); }
.card-meta { color: var(--text-3); font-size: var(--fs-sm); }
.card-body { padding: var(--s-5); }
.card-body-tight { padding: var(--s-4) var(--s-5); }
.card-foot { padding: 14px var(--s-5); border-top: 1px solid var(--separator); background: transparent; border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.card-foot.stack { align-items: stretch; }
.card-link { color: var(--accent-text); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.card-link:hover { color: var(--accent-hover); }
.card-link .lucide, .card-link [data-lucide] { width: 15px; height: 15px; }
.card > .table-wrap:last-child table tr:last-child td { border-bottom: 0; }
.card-tone-warning { background: var(--warning-bg); box-shadow: inset 0 0 0 1px var(--warning-border); }

/* Statistiek-tegels (widgets) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.stat {
    position: relative; display: block; min-width: 0;
    background: var(--surface); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5) var(--s-5);
    box-shadow: var(--shadow-card); color: inherit;
}
a.stat { transition: box-shadow var(--t), transform 260ms var(--ease-out); }
a.stat:hover { box-shadow: var(--shadow-card), 0 8px 24px -10px rgba(0, 0, 0, 0.16); color: inherit; }
a.stat:active { transform: scale(0.985); }
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.stat-label .lucide, .stat-label [data-lucide] { width: 15px; height: 15px; }
.stat-value { margin-top: 10px; font-family: var(--font-rounded); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value-sm { font-size: var(--fs-lg); }
.stat-meta { margin-top: 6px; color: var(--text-3); font-size: var(--fs-xs); }
.stat-accent .stat-value { color: var(--accent-text); }
.stat-success .stat-value { color: var(--success); }

/* Takenlijst (dashboard) */
.tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); }
.task {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 14px var(--s-4); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-card);
    color: inherit; transition: box-shadow var(--t), transform 260ms var(--ease-out);
}
.task:hover { box-shadow: var(--shadow-card), 0 8px 24px -10px rgba(0, 0, 0, 0.16); color: inherit; }
.task:active { transform: scale(0.985); }
.task-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--fill); color: var(--text-3); flex-shrink: 0; }
.task-icon .lucide, .task-icon [data-lucide] { width: 18px; height: 18px; }
.task-body { min-width: 0; flex: 1; line-height: 1.3; }
.task-count { display: block; font-family: var(--font-rounded); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.task-label { display: block; color: var(--text-3); font-size: var(--fs-sm); }
.task.is-active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-border); }
.task.is-active .task-icon { background: var(--accent); color: var(--on-accent); }
.task-chevron { color: var(--text-4); }

/* Tabellen: lichte kop, haarlijnen, rij reageert op hover */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th {
    text-align: left; white-space: nowrap;
    padding: 10px var(--s-4); background: transparent;
    border-bottom: 1px solid var(--separator);
    color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
}
.th-note { font-weight: 500; color: var(--text-3); }
.table th:first-child, .table td:first-child { padding-left: var(--s-5); }
.table th:last-child, .table td:last-child { padding-right: var(--s-5); }
.table td { padding: 13px var(--s-4); border-bottom: 1px solid var(--separator); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--hover); }
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:active { background: var(--fill); }
.table tr.is-highlight { background: var(--accent-tint); }
.table tr.is-highlight:hover { background: var(--accent-soft); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .shrink { width: 1%; white-space: nowrap; }
.table .actions { width: 1%; white-space: nowrap; text-align: right; }
.table .actions .btn-group { justify-content: flex-end; flex-wrap: nowrap; gap: 2px; }
.row-chevron { color: var(--text-4); width: 18px; height: 18px; }
tr[data-href]:hover .row-chevron { color: var(--text-3); }
.cell-title { display: block; font-weight: 600; color: var(--text); }
a.cell-title:hover { color: var(--accent-text); }
.cell-sub { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-sm); }
.cell-id { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; }
.table .table-input { width: 96px; flex: none; }
.table .row-form { flex-wrap: nowrap; }
.table .cell-sub, .table .cell-title, .table .break { overflow-wrap: anywhere; }
.table .cell-link { display: block; color: var(--text); font-weight: 600; text-decoration: none; }
.table .cell-link:hover { color: var(--accent-text); }
.table .cell-action { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.table .cell-action:hover { text-decoration: underline; }
.table .cell-action .lucide, .table .cell-action [data-lucide] { width: 13px; height: 13px; }
.table .truncate { display: block; max-width: 100%; }
/* Ellipsis-kolom die de rest van de breedte pakt (alleen waar één kolom mag krimpen, bijv. bestellingen) */
@media (min-width: 761px) { .table .cell-grow { width: 100%; max-width: 0; } }
.table-compact td { padding-top: 9px; padding-bottom: 9px; }

/* Monogram (site zonder logo): eerste letter op een neutraal vlak. Bewust geen kleur per site (rustig beeld);
   de hue-N-klassen blijven bestaan maar doen niets. */
.monogram {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--fill); color: var(--text-2);
    font-family: var(--font-rounded); font-size: 15px; font-weight: 700; text-transform: uppercase;
    box-shadow: inset 0 0 0 1px var(--separator);
}
.monogram-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.cell-site { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cell-site-body { min-width: 0; }

/* Tabel die op mobiel lijstrijen wordt: .table.table-rows (eerste cel groeit, verborgen kolommen weg) */
@media (max-width: 760px) {
    .table-rows thead { display: none; }
    .table-rows, .table-rows tbody { display: block; }
    .table-rows tr { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 12px var(--s-4); }
    .table-rows tr + tr::before { content: ""; position: absolute; top: 0; right: 0; left: var(--row-inset, var(--s-4)); border-top: 1px solid var(--separator); }
    .table-rows td { display: block; flex: none; width: auto !important; padding: 0 !important; border: 0 !important; }
    .table-rows td:first-child { flex: 1 1 auto; min-width: 0; }
    .table-rows td.hide-sm, .table-rows td.hide-md, .table-rows td.hide-lg { display: none; }
    .table-rows:has(.monogram) { --row-inset: calc(var(--s-4) + 36px + var(--s-3)); }
}
.cell-meta { align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Badges: getinte capsules zonder rand */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px; border-radius: var(--radius-full);
    border: 0; background: var(--neutral-bg); color: var(--neutral);
    font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; line-height: 1; letter-spacing: 0;
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-accent  { background: var(--accent-soft); color: var(--accent-text); }
.badge-muted   { background: transparent; color: var(--text-3); }
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

/* Tabs / filters: gesegmenteerde knop */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 30px; padding: 0 13px; border-radius: 8px;
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
    transition: background var(--t), color var(--t), box-shadow var(--t);
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.tab-count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.tab.is-active .tab-count { color: var(--text-3); }

/* Zoeken */
.search { position: relative; }
.search .lucide, .search [data-lucide] { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-4); pointer-events: none; }
.search .input { padding-left: 34px; width: 260px; }

/* Formulieren */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field + .field { margin-top: var(--s-4); }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.label-opt { color: var(--text-3); font-weight: 500; }
.hint { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; }
.input, .select, .textarea {
    width: 100%; min-width: 0;
    height: var(--control-h); padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text);
    font-size: var(--fs-base);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-hover); }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input-sm, .select-sm { height: var(--control-h-sm); font-size: var(--fs-sm); padding: 0 10px; }
.select { padding-right: 32px; appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6.5 3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.textarea-mail { font-size: 0.9375rem; line-height: 1.6; }
.input-upper { text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.form-grid .field + .field { margin-top: 0; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--separator); }
.form-actions-end { margin-left: auto; }
.inline-form { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.row-form { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-base); }
.check input { width: 16px; height: 16px; accent-color: var(--control); cursor: pointer; }

/* Schakelaar (iOS) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-base); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--fill-2); transition: background 220ms var(--ease-out); flex-shrink: 0; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 280ms var(--ease-spring); }
.switch input:checked + .switch-track { background: var(--green-fill); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }

/* Aan/uit-knop als statusschakelaar (POST-knoppen) */
.toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--control-h); padding: 0 14px; border-radius: var(--radius-full);
    border: 0; background: var(--fill); color: var(--text-2);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background var(--t), color var(--t);
}
.toggle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-4); }
.toggle:hover { background: var(--fill-2); }
.toggle.is-on { background: var(--success-bg); color: var(--success); }
.toggle.is-on::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }

/* Meldingen (in de pagina; flashberichten zijn toasts, zie .toast) */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: var(--s-5);
    border: 0; border-radius: var(--radius);
    background: var(--neutral-bg); color: var(--text);
    font-size: var(--fs-base); line-height: 1.5;
}
.alert > .lucide, .alert > [data-lucide] { width: 18px; height: 18px; margin-top: 1px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; }
.alert-success { background: var(--success-bg); }
.alert-success > .lucide, .alert-success > [data-lucide] { color: var(--success); }
.alert-error, .alert-danger { background: var(--danger-bg); }
.alert-error > .lucide, .alert-error > [data-lucide], .alert-danger > .lucide, .alert-danger > [data-lucide] { color: var(--danger); }
.alert-warning { background: var(--warning-bg); }
.alert-warning > .lucide, .alert-warning > [data-lucide] { color: var(--warning); }
.alert-info { background: var(--info-bg); }
.alert-info > .lucide, .alert-info > [data-lucide] { color: var(--info); }
.alert-close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 3px; border-radius: 50%; display: inline-flex; }
.alert-close:hover { color: var(--text); background: var(--fill); }
.alert.is-leaving { opacity: 0; transition: opacity 300ms; }

/* Toast: zwevende melding bovenin (flashberichten), materialiseert en verdwijnt weer */
.toasts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(560px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: 10px; max-width: 100%;
    padding: 10px 10px 10px 14px; border-radius: 18px;
    background: var(--material-thick); color: var(--text);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-base); font-weight: 500; line-height: 1.4;
    pointer-events: auto;
    animation: toast-in 520ms var(--ease-spring) both;
}
.toast > .lucide, .toast > [data-lucide] { width: 20px; height: 20px; }
.toast-success > .lucide, .toast-success > [data-lucide] { color: var(--success); }
.toast-error > .lucide, .toast-error > [data-lucide] { color: var(--danger); }
.toast-body { flex: 1; min-width: 0; }
.toast .alert-close { margin-left: 4px; }
.toast.is-leaving { animation: toast-out 320ms var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(0.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(0.96); filter: blur(4px); } }

/* Lege staat */
.empty { padding: var(--s-12) var(--s-6); text-align: center; color: var(--text-3); }
.empty > .lucide, .empty > [data-lucide] {
    width: 56px; height: 56px; margin: 0 auto var(--s-4); padding: 15px;
    border-radius: 50%; background: var(--fill); color: var(--text-3);
}
.empty-title { color: var(--text); font-weight: 650; font-size: var(--fs-md); letter-spacing: -0.015em; }
.empty-text { margin-top: 4px; font-size: var(--fs-sm); max-width: 380px; margin-left: auto; margin-right: auto; }
.empty-sm { padding: var(--s-8) var(--s-5); }

/* Gegevenslijst */
.dl { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px var(--s-4); font-size: var(--fs-base); }
.dl dt { color: var(--text-3); }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.dl-stacked { display: block; }
.dl-stacked dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.dl-stacked dd { margin: 2px 0 var(--s-4); }
.dl-stacked dd:last-child { margin-bottom: 0; }
.divider { border: 0; border-top: 1px solid var(--separator); margin: var(--s-5) 0; }

/* Paginering */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.pagination-info { color: var(--text-3); font-size: var(--fs-sm); }
.pagination-pages { display: flex; align-items: center; gap: 4px; }
.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-full);
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background var(--t);
}
a.page-link:hover { background: var(--fill); color: var(--text); }
.page-link.is-active { background: var(--text); color: var(--surface); }
.page-link.is-disabled { color: var(--text-4); }
.page-gap { color: var(--text-4); padding: 0 4px; }

/* Keuzelijst met zoekresultaten (klant zoeken) */
.combo { position: relative; }
.combo-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    max-height: 280px; overflow-y: auto;
    background: var(--surface-raised); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 5px;
}
.combo-up .combo-list { top: auto; bottom: calc(100% + 6px); }
.combo-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer; line-height: 1.3; }
.combo-item:hover, .combo-item.is-active { background: var(--control); }
.combo-item:hover strong, .combo-item:hover span, .combo-item.is-active strong, .combo-item.is-active span { color: var(--bg); }
.combo-item strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.combo-item span { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.combo-empty { padding: 10px; color: var(--text-3); font-size: var(--fs-sm); }
.combo-selected { display: flex; align-items: center; gap: var(--s-3); padding: 8px 12px; border-radius: var(--radius-sm); background: var(--fill); }
.combo-selected-body { flex: 1; min-width: 0; line-height: 1.3; }

/* Inklapbaar blok */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.disclosure-toggle::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 280ms var(--ease-spring); margin-right: 2px; }
.disclosure[open] .disclosure-toggle::before, details.card[open] > summary .disclosure-toggle::before { transform: rotate(45deg); }

/* Kleine links / chips */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-full); background: var(--fill); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; transition: background var(--t), color var(--t); }
a.chip:hover { background: var(--fill-2); color: var(--text); }
.chip .lucide, .chip [data-lucide] { width: 13px; height: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Gevarenzone */
.danger-zone { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--danger-border); }
.danger-zone > summary { padding: 14px var(--s-5); color: var(--danger); }
.danger-zone > summary .disclosure-toggle { color: var(--danger); }
.danger-zone-body { padding: 0 var(--s-5) var(--s-5); }

/* Invoer met voor- of achtervoegsel: .input-group > .input-prefix + .input */
.input-group { display: inline-flex; align-items: stretch; width: 100%; }
.input-group .input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
.input-prefix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--fill); color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.input-group-sm .input-prefix { padding: 0 8px; }
.input-group:focus-within .input-prefix { border-color: var(--accent); }

/* Kaartkop die op smalle schermen mag afbreken: titel boven, acties eronder */
.card-head-wrap { flex-wrap: wrap; }
.card-head-wrap .card-title { white-space: nowrap; }

/* Acties rechts in een kaartkop */
.card-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

/* Kopieerveld: .copy-field > code.copy-value + button[data-copy] */
.copy-field { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.copy-value { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--fill); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; word-break: break-all; user-select: all; }
[data-copy].is-copied { color: var(--success); background: var(--success-bg); }

/* Afvinklijst: ul.checklist > li(.is-done) */
.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.checklist li { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-sm); }
.checklist li::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 50%; }
.checklist li.is-done { color: var(--text); }
.checklist li.is-done::before { content: "✓"; display: grid; place-items: center; border-color: transparent; background: var(--green-fill); color: #fff; font-size: 11px; font-weight: 800; }

/* Instellijst met status per stap: p.setup-group + ol.setup-list > li.setup-item(.is-done|.is-waiting) > mark + body + link */
.setup-group { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-3); }
.setup-list { margin: 0; padding: 0; list-style: none; border-radius: var(--radius); background: var(--surface-2); }
.setup-item { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); }
.setup-item + .setup-item { box-shadow: inset 0 1px 0 var(--separator); }
.setup-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.setup-item.is-done .setup-mark { background: var(--green-fill); box-shadow: none; }
.setup-item.is-done .setup-mark::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.setup-item.is-waiting .setup-mark { box-shadow: inset 0 0 0 1.5px var(--warning); }
.setup-item.is-waiting .setup-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.setup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.setup-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.setup-note { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.setup-link { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text, var(--accent)); }
.setup-item.is-done .setup-link { color: var(--text-3); }

/* Korte bevestiging in een regel (vinkje + tekst) */
.confirm-inline { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }
.confirm-inline > .lucide, .confirm-inline > [data-lucide] { flex: none; width: 18px; height: 18px; color: var(--success); }

/* Kaartvoet die mag afbreken (bv. akkoordvinkje + knop) */
.card-foot-wrap { flex-wrap: wrap; }
.card-foot-wrap .check { align-items: flex-start; line-height: 1.45; }
.card-foot-wrap .check input { margin-top: 2px; flex: none; }
.card-foot-wrap .field-error { flex-basis: 100%; }

/* QR-code voor de authenticator-app: altijd wit vlak (ook in donkere modus), zodat camera's hem lezen */
.qr-tile { display: inline-grid; place-items: center; padding: 10px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--separator); }
.qr-tile img { display: block; width: 200px; height: 200px; }

/* Genummerde uitleg in een kaart: ol.steps-plain > li > .steps-plain-title + inhoud */
.steps-plain { margin: 0; padding: 0; list-style: none; counter-reset: plain; display: flex; flex-direction: column; gap: var(--s-6); }
.steps-plain > li { position: relative; padding-left: 38px; counter-increment: plain; }
.steps-plain > li::before { content: counter(plain); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-sm); font-weight: 700; }
.steps-plain-title { margin: 0 0 4px; font-weight: 650; }
.qr-row { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-3); }
.qr-manual { flex: 1; min-width: 220px; }
.input-code { max-width: 180px; font-size: var(--fs-lg, 1.25rem); letter-spacing: 0.2em; text-align: center; }

/* Lopende tekst (voorwaarden e.d.): .prose */
.prose { max-width: 70ch; font-size: var(--fs-base); line-height: 1.6; color: var(--text); }
.prose h2 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 var(--s-3); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 4px; }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--fill); font-size: 0.9em; }

/* Herstelcodes: raster van korte codes */
.code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: var(--s-4); border-radius: var(--radius); background: var(--fill); list-style: none; font-family: var(--font-mono); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.code-grid li { text-align: center; padding: 4px 0; user-select: all; }

/* Kaart met een probleem (afgewezen, fout) */
.card-danger { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--danger-border); }
.card-danger .card-title .lucide, .card-danger .card-title [data-lucide] { color: var(--danger); }

/* Lijst met redenen (afkeur of verbeterpunten) */
.reason-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
.reason-list-soft { color: var(--text-2); font-size: var(--fs-sm); }

/* Bevestiging (iets is gelukt): .confirm > icoon + tekst */
.confirm { display: flex; align-items: flex-start; gap: var(--s-3); }
.confirm > .lucide, .confirm > [data-lucide] { flex: none; width: 28px; height: 28px; color: var(--success); }
.confirm-title { margin: 0 0 2px; font-weight: 650; font-size: var(--fs-md); }

/* Stappen (wegwijzer bij een taak in meerdere stappen): ol.steps > li.step(.is-done|.is-current) */
.steps { display: flex; gap: var(--s-2); margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: step; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; counter-increment: step; }
.step::before { content: counter(step); display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fill); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.is-current { color: var(--text); font-weight: 600; box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--accent); }
.step.is-current::before { background: var(--accent-fill); color: var(--on-accent); }
.step.is-done { color: var(--text-2); }
.step.is-done::before { content: "✓"; background: var(--success-bg); color: var(--success); }

/* Tijdlijn (voortgang van één ding): ol.timeline > li.timeline-step(.is-done|.is-current|.is-stopped) */
.timeline { display: flex; margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.timeline-step { position: relative; flex: 1; min-width: 0; padding-top: 26px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.timeline-step::before { content: ""; position: absolute; top: 4px; left: 0; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-strong); }
.timeline-step + .timeline-step::after { content: ""; position: absolute; top: 10px; right: calc(100% - 4px); left: calc(-100% + 18px); height: 2px; border-radius: 2px; background: var(--border); }
.timeline-step.is-done { color: var(--text); }
.timeline-step.is-done::before { background: var(--green-fill); box-shadow: none; }
.timeline-step.is-done + .timeline-step.is-done::after, .timeline-step.is-done + .timeline-step.is-current::after { background: var(--green-fill); }
.timeline-step.is-current { color: var(--text); font-weight: 650; }
.timeline-step.is-current::before { background: var(--surface); box-shadow: inset 0 0 0 4px var(--info); }
.timeline-step.is-stopped::before { background: var(--text-3); }
.timeline-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--s-2); }
@media (max-width: 760px) { .timeline-label { white-space: normal; line-height: 1.25; font-size: var(--fs-xs); } }

/* Domeinvoorbeeld: herkende en afgekeurde domeinen tijdens het plakken ([data-domain-paste]) */
.domain-preview { display: flex; flex-direction: column; gap: var(--s-2); min-height: 26px; margin-top: var(--s-3); }
.domain-preview-count { color: var(--text-3); font-size: var(--fs-sm); }
.domain-preview-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.chip.is-valid { background: var(--success-bg); color: var(--success); }
.chip.is-invalid { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; }
.textarea-lg { min-height: 168px; font-family: var(--font-mono); font-size: var(--fs-base); line-height: 1.7; }

/* Formulier in secties: .form-section > .form-section-title (+ hint) + velden */
.fieldset-plain { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset-plain > legend { padding: 0; }
.form-section + .form-section { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--separator); }
.form-section-title { margin: 0 0 var(--s-4); font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.015em; color: var(--text); }
.form-section-title + .hint { margin-bottom: var(--s-4); }
.form-section > .field + .field, .form-section > .field + .fieldset-plain, .form-section > .fieldset-plain + .field { margin-top: var(--s-5); }
.field-narrow { max-width: 260px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.char-count { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--warning); }
legend.label { margin-bottom: 8px; }

/* Veldfout: .field-error onder het veld, veld krijgt aria-invalid */
.field-error { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
.field-error .lucide, .field-error [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: var(--ring-danger); }

/* Keuzechips (meerkeuze): .choice-chips > label.choice-chip > input[checkbox] + span */
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice-chip { position: relative; display: inline-flex; cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chip span {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
    border: 0; border-radius: var(--radius-full); background: var(--fill);
    color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; user-select: none;
    transition: background var(--t), color var(--t), box-shadow var(--t), transform 220ms var(--ease-out);
}
.choice-chip:hover span { background: var(--fill-2); color: var(--text); }
.choice-chip:active span { transform: scale(0.95); transition-duration: 80ms; }
.choice-chip input:checked + span { background: var(--control); color: var(--bg); }
.choice-chip input:checked + span::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.choice-chip input:focus-visible + span { box-shadow: var(--ring); }
.choice-chip input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.choice-chip input:disabled:checked + span { opacity: 1; }
[aria-invalid="true"] .choice-chip span { box-shadow: inset 0 0 0 1px var(--danger-border); }

/* Keuzekaarten (één keuze): .option-cards > label.option-card(.is-locked) > input[radio] + icoon + body */
.option-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.option-card { position: relative; display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); cursor: pointer; transition: background var(--t), box-shadow var(--t), transform 220ms var(--ease-out); }
.option-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-card:hover { box-shadow: inset 0 0 0 1px var(--border-hover); }
.option-card:active:not(.is-locked) { transform: scale(0.985); }
.option-card:has(input:checked) { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); }
.option-card:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent), var(--ring); }
.option-card.is-locked { cursor: not-allowed; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); }
.option-card.is-locked .option-card-icon, .option-card.is-locked .option-card-text { opacity: 0.6; }
.option-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--fill); color: var(--text-2); }
.option-card:has(input:checked) .option-card-icon { background: var(--accent-fill); color: var(--on-accent); }
.option-card-icon .lucide, .option-card-icon [data-lucide] { width: 16px; height: 16px; }
.option-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.option-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-base); font-weight: 650; color: var(--text); }
.option-card-text { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.option-cards + .field-error, .option-cards + .hint { margin-top: var(--s-3); }
.option-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-card.is-current { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); }
.option-card.is-current .option-card-icon { background: var(--accent-fill); color: var(--on-accent); }
a.option-card { color: inherit; }
.btn-note { font-weight: 500; opacity: 0.8; font-size: 0.92em; }

/* Inklapbare kaart */
details.card > summary.card-head { list-style: none; cursor: pointer; }
details.card > summary.card-head::-webkit-details-marker { display: none; }
details.card:not([open]) > summary.card-head { border-bottom: 0; }

/* Merkband: één donker vlak bovenaan een hoofdscherm (inkt met een zachte oranje gloed) — het merkmoment */
.hero-band {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6);
    margin: 0 0 var(--s-6); padding: var(--s-6) var(--s-6) var(--s-5);
    border-radius: var(--radius-xl); background: var(--ink); color: var(--ink-text);
    box-shadow: inset 0 0 0 1px var(--ink-line);
}
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 260px at 88% -30%, rgba(224, 79, 0, 0.32), transparent 70%), radial-gradient(420px 200px at 0% 120%, rgba(224, 79, 0, 0.08), transparent 70%); }
.hero-band .page-title { color: var(--ink-text); }
.hero-band .page-sub { color: var(--ink-text-2); }
.hero-band .page-count { color: var(--ink-text-2); }
.hero-band .hello-date { color: #ff9a5c; }
.hero-band .segmented { background: rgba(255, 255, 255, 0.08); }
.hero-band .segmented-item span { color: var(--ink-text-2); }
.hero-band .segmented-item:hover span { color: var(--ink-text); }
.hero-band .segmented-item input:checked + span { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.hero-band .btn-secondary { background: rgba(255, 255, 255, 0.1); color: var(--ink-text); }
.hero-band .btn-secondary:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hero-stat { display: flex; flex-direction: column; align-items: flex-end; }
.hero-stat-value { font-family: var(--font-rounded); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.hero-stat-label { font-size: var(--fs-xs); color: var(--ink-text-2); }
@media (max-width: 760px) { .hero-band { padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--radius-lg); } }

/* Zijpaneel (dialog) van rechts: dialog.slideover > .slideover-panel (head, body, foot) */
.slideover { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.slideover::backdrop { background: var(--scrim); animation: slideover-fade 260ms ease both; }
.slideover[open] .slideover-panel { animation: slideover-in 420ms var(--ease-spring) both; }
@keyframes slideover-in { from { transform: translateX(100%); } }
@keyframes slideover-fade { from { opacity: 0; } }
.slideover-panel { display: flex; flex-direction: column; height: 100%; background: var(--surface); box-shadow: var(--shadow-lg); }
.slideover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: calc(var(--s-5) + env(safe-area-inset-top)) var(--s-5) var(--s-4); border-bottom: 1px solid var(--separator); }
.slideover-eyebrow { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 650; color: var(--text-3); }
.slideover-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.slideover-body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.slideover-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--separator); }
.slideover-price { font-family: var(--font-rounded); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.option-stack { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .slideover[open] .slideover-panel, .slideover::backdrop { animation: none; } }

/* Uitleg in een rustig vlak: .callout > icoon + tekst */
.callout { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.callout > .lucide, .callout > [data-lucide] { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--text-3); }
.callout ul { margin: var(--s-1) 0 0; padding-left: 1.1em; }
.callout li + li { margin-top: 2px; }

/* Gesegmenteerde keuze (radio's): .segmented > label.segmented-item > input + span */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius); background: var(--fill); }
.segmented-item { position: relative; display: inline-flex; }
.segmented-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented-item span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--t), color var(--t), box-shadow var(--t); }
.segmented-item span .lucide, .segmented-item span [data-lucide] { width: 15px; height: 15px; }
.segmented-item:hover span { color: var(--text); }
.segmented-item input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.segmented-item input:focus-visible + span { box-shadow: var(--ring); }
.segmented-sm span { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.segmented-sm { display: flex; }
.segmented-sm .segmented-item { flex: 1; }
.segmented-sm .segmented-item span { flex: 1; justify-content: center; }

/* Uitklapmenu: details.popover > summary + .popover-panel */
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop, 0 12px 40px rgba(0, 0, 0, 0.16)), 0 0 0 0.5px var(--separator); display: flex; flex-direction: column; gap: 8px; }
.popover-title { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }

/* Klein label naast een naam: .tag(.tag-accent) */
.tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--fill); color: var(--text-2); font-size: 11px; font-weight: 650; white-space: nowrap; }
.tag .lucide, .tag [data-lucide] { width: 11px; height: 11px; }
.tag-accent { background: var(--accent-tint); color: var(--accent-text); box-shadow: inset 0 0 0 1px rgba(224, 79, 0, 0.18); }

/* Dubbele schuifregelaar: .range[data-range] (ui.js initRange) */
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: 6px; }
.range-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.range-sub { font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.range-values { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-track { position: relative; height: 22px; }
.range-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--fill-2); }
.range-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--text); left: 0; right: 0; }
.range.is-open .range-fill { background: var(--fill-2); }
.range-track input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range-track input[type=range]::-webkit-slider-runnable-track { background: none; height: 22px; }
.range-track input[type=range]::-moz-range-track { background: none; }
.range-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.08); cursor: grab; transition: transform 120ms var(--ease-out); }
.range-track input[type=range]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: grab; }
.range-track input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.range-track input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }

/* Pagina vast terwijl een paneel open is */
html.is-locked, html.is-locked body { overflow: hidden; }

/* Van/tot-velden */
.between { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }

/* Actieve filters als chips */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 11px; border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); font-size: var(--fs-xs); font-weight: 600; transition: background var(--t), box-shadow var(--t); }
.filter-chip .lucide, .filter-chip [data-lucide] { width: 13px; height: 13px; color: var(--text-3); }
.filter-chip:hover { background: var(--fill); color: var(--text); }
.filter-chip:hover .lucide { color: var(--text); }

/* Ster (favoriet) */
.star-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-4); cursor: pointer; transition: color var(--t), background var(--t), transform 160ms var(--ease-out); }
.star-toggle:hover { background: var(--fill); color: var(--text-2); }
.star-toggle:active { transform: scale(0.88); }
.star-toggle .lucide, .star-toggle [data-lucide] { width: 17px; height: 17px; }
.star-toggle[aria-pressed="true"] { color: #f5a400; }
.star-toggle[aria-pressed="true"] .lucide { fill: currentColor; }
[data-mark="favorite"][aria-pressed="true"] .lucide { fill: #f5a400; color: #f5a400; }

/* Vlag (zelf gehost) */
.flag { display: inline-block; width: 20px; height: 15px; border-radius: 3px; vertical-align: -2px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18); object-fit: cover; flex: none; }

/* Paginering met knoppen */
.pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: var(--s-5); flex-wrap: wrap; }
.pager-btn { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; transition: background var(--t), color var(--t); }
.pager-btn:hover { background: var(--fill); color: var(--text); }
.pager-btn.is-current { background: var(--text); color: var(--bg); }
.pager-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.pager-btn .lucide, .pager-btn [data-lucide] { width: 17px; height: 17px; }
.pager-gap { color: var(--text-3); padding: 0 4px; }

/* Feitenlijst (label boven waarde) in een raster */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; }
.facts dt { margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.facts dd { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.facts > div { min-width: 0; }
.facts dd .lucide, .facts dd [data-lucide] { width: 14px; height: 14px; color: var(--text-3); }

/* Cijfers met bron */
.metric-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 1px; border-radius: var(--radius); overflow: hidden; background: var(--separator); box-shadow: 0 0 0 1px var(--separator); }
.metric-strip-2 { grid-template-columns: 1fr 1fr; margin-top: var(--s-3); }
.metric-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: var(--surface); text-align: center; }
.metric-label { font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.metric-value { font-family: var(--font-rounded); font-size: 1.375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric-source { font-size: 11px; color: var(--text-3); }
.metric-big { margin: 0 0 var(--s-3); font-family: var(--font-rounded); font-size: 1.75rem; font-weight: 700; }

/* Bezoekers per maand: staafjes (hoogte via JS uit data-share) */
.traffic-chart { margin-bottom: var(--s-4); }
.traffic-bars { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding-top: 6px; }
.traffic-bar { position: relative; flex: 1; min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--text-2); opacity: 0.85; transition: height 400ms var(--ease-out); }
.traffic-bar:last-child { background: var(--text); opacity: 1; }
.traffic-bar-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-3); }

/* Bron van verkeerscijfer (stip in de tabel) */
.source-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; background: var(--text-4); }
.source-gsc { background: var(--success); }

/* 6. Pagina-specifiek ---------------------------------------------------- */

/* Ticketgesprek: berichtenbellen */
.thread { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-6); }
.msg { display: flex; gap: var(--s-3); max-width: 760px; }
.msg-bubble { flex: 1; min-width: 0; padding: 12px var(--s-4); border-radius: 20px; border-bottom-left-radius: 6px; background: var(--surface); box-shadow: var(--shadow-card); }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: 4px; }
.msg-author { font-weight: 600; font-size: var(--fs-sm); }
.msg-time { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.msg-text { line-height: 1.6; overflow-wrap: anywhere; }
.msg-attachment { margin-top: var(--s-3); }
.msg-own { margin-left: auto; flex-direction: row-reverse; }
.msg-own .msg-bubble { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-border); border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }

/* Afbeeldingskiezer */
.image-picker-preview img { max-height: 220px; width: auto; border-radius: var(--radius); }
.image-picker-preview { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-3); }
.unsplash-panel { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--radius); background: var(--fill); }
.unsplash-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--s-2); }
.unsplash-results button { aspect-ratio: 3 / 2; border: 0; padding: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--fill); transition: transform 220ms var(--ease-out); }
.unsplash-results button:active { transform: scale(0.96); }
.unsplash-results img { width: 100%; height: 100%; object-fit: cover; }
.unsplash-results button:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.status-line { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
.status-line.is-error { color: var(--danger); }
.status-line.is-success { color: var(--success); }

.ai-box { padding: var(--s-4); border-radius: var(--radius); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-border); }
.ai-box-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); font-weight: 600; }
.ai-box-head .lucide, .ai-box-head [data-lucide] { color: var(--accent); }

/* Linkweergave */
.link-item + .link-item { margin-top: var(--s-4); }
.link-anchor { font-weight: 600; }
.link-url { display: block; color: var(--info); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.link-url:hover { color: var(--info); text-decoration: underline; }
.text-link { color: var(--accent-text); font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.excerpt { color: var(--text-2); line-height: 1.65; white-space: pre-line; max-height: 320px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }

/* Prijs met korting */
.price-old { color: var(--text-3); text-decoration: line-through; font-weight: 400; margin-right: 4px; }
.table .price-old { display: block; margin-right: 0; font-size: var(--fs-xs); }
.price-new { color: var(--accent-text); font-weight: 600; }

/* Feed (dashboard: recente activiteit) */
.feed { list-style: none; }
.feed li { display: flex; gap: var(--s-3); padding: 12px var(--s-5); border-bottom: 1px solid var(--separator); }
.feed li:last-child { border-bottom: 0; }
.feed-body { min-width: 0; flex: 1; font-size: var(--fs-sm); line-height: 1.45; }
.feed-text { color: var(--text-2); overflow-wrap: anywhere; }
.feed-meta { color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; }

/* 7. Utilities ----------------------------------------------------------- */
.muted { color: var(--text-3); }
.faint { color: var(--text-4); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent-text); }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.ml-auto { margin-left: auto; }
.grow { flex: 1; min-width: 0; }
.show-sm, .show-md { display: none; }
.w-full { width: 100%; }
.max-prose { max-width: 720px; }
.max-form { max-width: 680px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 8. Responsive ---------------------------------------------------------- */
/* Zijkolom (split) pas naast de inhoud als er ruimte is; anders eronder */
@media (max-width: 1280px) {
    .split, .split-wide, .grid-3-1, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .split-aside-first > aside, .split-aside-first > :not(aside) { grid-column: auto; grid-row: auto; }
    .sticky { position: static; }
    .hide-lg { display: none; }
}
@media (max-width: 1180px) { .option-cards:not(.option-cards-2) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .option-cards-2 { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1024px) {
    .app { display: block; }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto;
        transform: translateX(-100%); transition: transform 380ms var(--ease-spring); box-shadow: var(--shadow-lg);
    }
    .nav-open .sidebar { transform: none; }
    .nav-open .nav-overlay { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 30; }
    .nav-open { overflow: hidden; }
    .sidebar-close { display: inline-flex; }
    .topbar {
        display: flex; align-items: center; gap: var(--s-3);
        position: sticky; top: 0; z-index: 20;
        height: 56px; padding: 0 var(--s-4);
        background: var(--sidebar-bg); color: var(--sidebar-text-strong);
        border-bottom: 1px solid var(--sidebar-border);
    }
    .topbar img { height: 32px; width: auto; }
    .topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--sidebar-text-strong); cursor: pointer; }
    .topbar-btn:hover { background: var(--sidebar-hover); }
    .topbar-btn .lucide, .topbar-btn [data-lucide] { width: 20px; height: 20px; }
    .topbar-title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sidebar-text-strong); }
    .content { padding: var(--s-6) var(--s-5) 64px; }
    .hide-md { display: none; }
    .show-md { display: block; }
    .show-md.show-inline { display: inline; }
    .cell-meta.show-md { display: flex; }
}

@media (max-width: 760px) {
    .grid-2, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .content { padding: var(--s-5) var(--s-4) 56px; }
    .page-head { align-items: flex-start; margin-bottom: var(--s-5); }
    .page-title { font-size: 1.625rem; }
    .page-actions { width: 100%; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-end { margin-left: 0; }
    .search, .search .input { width: 100%; }
    .show-sm { display: block; }
    .show-sm.show-inline { display: inline; }
    .table .row-form { flex-wrap: wrap; }
    .table .table-input { width: 72px; }
    .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .table td { padding-top: 12px; padding-bottom: 12px; }
    .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
    .task { padding: var(--s-3); gap: 10px; }
    .task-icon { width: 30px; height: 30px; }
    .task-chevron { display: none; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .stat { padding: var(--s-3) var(--s-4) var(--s-4); }
    .stat-value { font-size: 1.5rem; }
    .card-head, .card-body { padding-left: var(--s-4); padding-right: var(--s-4); }
    .card-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
    .table th:first-child, .table td:first-child { padding-left: var(--s-4); }
    .table th:last-child, .table td:last-child { padding-right: var(--s-4); }
    .table th, .table td { padding-left: 10px; padding-right: 10px; }
    .hide-sm { display: none; }
    .queue-item > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .queue-nr, .queue-subject { display: none; }
    .msg { max-width: 100%; }
    .msg .avatar { display: none; }
    .unsplash-results { grid-template-columns: repeat(3, 1fr); }
    .pagination { justify-content: center; }
    .pagination-info { width: 100%; text-align: center; }
    /* Stappen compact: bolletjes, alleen de huidige stap met tekst */
    .steps { gap: var(--s-2); }
    .step { flex: none; padding: var(--s-2); }
    .step:not(.is-current) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .step.is-current { flex: 1; padding: var(--s-2) var(--s-3); }
}

/* 9. Toegankelijkheid ------------------------------------------------------ */
/* Aanraakschermen: invoer ≥16px (geen automatische zoom in iOS) en tikdoelen ≥44px */
@media (pointer: coarse) {
    :root { --control-h: 44px; --control-h-sm: 36px; }
    .input, .select, .textarea { font-size: 16px; }
    .btn-icon.btn-sm, .back-link, .site-link { position: relative; }
    .btn-icon.btn-sm::after { content: ""; position: absolute; inset: -4px; }
    .back-link::after, .site-link::after { content: ""; position: absolute; inset: -12px -8px; }
    .chip, .shop-cats .chip { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .btn:active:not(:disabled), a.stat:active, .task:active, .choice-chip:active span, .option-card:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .toast { background: var(--surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    :root { --border: rgba(60, 60, 67, 0.4); --separator: rgba(60, 60, 67, 0.3); --text-3: #48484d; --text-4: #6e6e73; }
    :root[data-color-scheme="auto"] { --accent-fill: #c94600; }
    .card, .stat, .step, .task, .chip, .choice-chip span { box-shadow: inset 0 0 0 1px var(--text-3); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root[data-color-scheme="auto"] { --border: rgba(160, 160, 168, 0.6); --separator: rgba(160, 160, 168, 0.45); --text-3: #c7c7cc; --text-4: #aeaeb2; }
}

/* Gebeurtenissen van een order (beheer) */
.event-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }