/*
 * NassLabs SEO OS — Design System (theme-bridge)
 *
 * Laadt NÁ public/css/nasslabs-tokens.css (officiële token.css). Dit bestand
 * mapt de oudere --nl-*-namen die de blades gebruiken op de canonieke tokens,
 * plus alle Filament-component-overrides (sidebar, topbar, cards, knoppen, toasts).
 *
 * Merk: paper-achtergrond · groen (logo) · lime "de dot" · blauw interactie · mint signaal.
 * Font: Neue Haas Grotesk (Adobe) met Inter-fallback; Space Mono voor labels/meta.
 * Radius: token sm 8 / md 12 / lg 16; data + dot scherp (radius 0).
 */

/* Inter = gesanctioneerde fallback voor Neue Haas Grotesk (token.css);
   Space Mono = Labs-labels/meta. Neue Haas wordt via de Adobe Fonts-kit
   geactiveerd in de build; tot dan rendert Inter (waarmee in Figma is geprototypet). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   BRIDGE → token.css  (officiële NassLabs design tokens — public/css/nasslabs-tokens.css)
   token.css laadt VÓÓR dit bestand en levert de canonieke primitives + semantische
   tokens (paper · groen · lime "de dot" · blauw interactie · mint signaal, twee
   registers). Hieronder mappen we de oudere --nl-*-namen die alle blades gebruiken
   op de nieuwe tokens, zodat het hele paneel automatisch de nieuwe merk-palette
   erft zonder elke blade te herschrijven.

   Semantiek-keuzes (conform token.css):
   - "attention/warning" = LIME, niet amber  → --nl-amber* mapt op lime.
   - functioneel ROOD alleen voor echte fouten → --nl-red* mapt op --nl-danger*.
   - --nl-surface betekent in token.css de PAGINA-bg; blades gebruiken het voor
     KAARTEN, dus we overschrijven het naar paper-100 (raised) en zetten de
     pagina-bg op --nl-bg (paper-200).
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Surfaces (paper-register, licht — /admin default) ── */
    --nl-bg: var(--nl-paper-200, #F4F3E4);        /* pagina-achtergrond */
    --nl-surface: var(--nl-paper-100, #FFFDEC);   /* kaarten / inputs / panelen */
    --nl-surface2: var(--nl-paper-300, #ECEAD7);  /* genest / zachte highlight / tracks */

    /* ── Borders (groen-getint) ──
       --nl-border laten we over aan token.css (rgba(7,102,83,0.16)); alleen de
       sterkere variant aliassen we omdat token die --nl-border-strong noemt. */
    --nl-border-md: var(--nl-border-strong, rgba(7,102,83,0.28));

    /* ── Text ──
       --nl-text (green-ink #06231D) erven we van token.css; muted/subtle aliassen. */
    --nl-text-2: var(--nl-text-muted, rgba(6,35,29,0.62));
    --nl-text-3: var(--nl-text-subtle, rgba(6,35,29,0.45));

    /* ── Semantic colors → token semantiek ── */
    --nl-green: var(--nl-success, #076653);
    --nl-green-bg: var(--nl-success-wash, #C9F2C7);
    --nl-green-mid: var(--nl-green-500, #0A8A6F);
    /* attention = lime (token: --nl-status-attention) */
    --nl-amber: var(--nl-lime-600, #B9D02F);
    --nl-amber-bg: rgba(218, 234, 75, 0.18);
    --nl-amber-mid: var(--nl-lime-500, #DAEA4B);
    /* rood = alleen echte fouten (token: --nl-danger) */
    --nl-red: var(--nl-danger, #BE3A2B);
    --nl-red-bg: var(--nl-danger-bg, #F7E3DF);
    --nl-red-mid: var(--nl-danger-onDark, #FF7556);
    /* blauw = interactie/links (token: --nl-interactive / --nl-link) */
    --nl-blue: var(--nl-interactive, #2A3BE0);
    --nl-blue-bg: rgba(42, 59, 224, 0.10);
    /* paars heeft geen token-equivalent — spaarzaam, on-brand lime-accent eronder */
    --nl-purple: var(--nl-accent-ink, #B9D02F);
    --nl-purple-bg: rgba(218, 234, 75, 0.14);

    /* ── Layout (token radius/shadow/fonts) ── */
    --nl-radius: var(--nl-radius-md, 12px);       /* token -sm(8)/-md(12)/-lg(16) erven we */
    --nl-font: var(--nl-font-body, 'Inter', system-ui, sans-serif);
    --nl-mono: var(--nl-font-mono, 'Space Mono', ui-monospace, monospace);
    --nl-shadow: var(--nl-shadow-sm, 0 1px 2px rgba(6,35,29,0.06), 0 2px 8px rgba(6,35,29,0.05));
}

/* ── Global font override ── */
body,
.fi-body,
.fi-sidebar,
.fi-topbar,
.fi-page,
[class*="filament"] {
    font-family: var(--nl-font) !important;
}

code, pre, .font-mono, [class*="mono"] {
    font-family: var(--nl-mono) !important;
}

/* ── Page background ── */
.fi-body {
    background-color: var(--nl-bg) !important;
}

/* ── Sidebar ── */
.fi-sidebar {
    background-color: var(--nl-surface) !important;
    border-right-color: var(--nl-border) !important;
}

.fi-sidebar-nav-groups {
    padding: 4px !important;
}

/* Active nav item: dark background (matching mockup) */
.fi-sidebar-item-button[data-active] {
    background-color: var(--nl-text) !important;
    color: #fff !important;
    border-radius: var(--nl-radius-sm) !important;
    font-weight: 500 !important;
}

.fi-sidebar-item-button[data-active] .fi-sidebar-item-icon {
    color: rgba(255,255,255,0.8) !important;
}

.fi-sidebar-item-button:not([data-active]):hover {
    background-color: var(--nl-surface2) !important;
}

/* Nav badge (red pill) */
.fi-sidebar-item-badge .fi-badge {
    background-color: var(--nl-red-bg) !important;
    color: var(--nl-red) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

.fi-sidebar-item-button[data-active] .fi-sidebar-item-badge .fi-badge {
    background-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

/* Sidebar group labels */
.fi-sidebar-group-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    color: var(--nl-text-3) !important;
    text-transform: none !important;
}

/* ── Topbar ── */
.fi-topbar {
    background-color: var(--nl-surface) !important;
    border-bottom-color: var(--nl-border) !important;
}

/* ── Pagina-ritme ──
   Filament zet 2rem grid-gap tussen ALLE top-level blokken van een pagina
   (header, elke sectie, elk widget). Het V6-design werkt op een veel krapper
   ritme (~14-16px tussen rijen); 2rem stapelt bovendien óp de eigen marges
   van de blokken. Halveren naar 1rem, app-breed. */
.fi-page-content {
    gap: 1rem !important;
}

/* ── Cards & Widgets ── */
.fi-wi-stats-overview-stat,
.fi-section,
.fi-ta-ctn {
    border-radius: var(--nl-radius) !important;
    border-color: var(--nl-border) !important;
}

.fi-wi-stats-overview-stat {
    background-color: var(--nl-surface2) !important;
}

/* ── Buttons ── */
.fi-btn-primary,
.fi-btn[style*="primary"] {
    background-color: var(--nl-text) !important;
    border-radius: var(--nl-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.fi-btn-primary:hover {
    opacity: 0.85 !important;
}

/* ── Website Switcher (custom component) ── */
.nl-ws-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--nl-surface);
    border: 1px solid var(--nl-border-md);
    border-radius: var(--nl-radius);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.nl-ws-trigger:hover {
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.nl-ws-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.nl-ws-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nl-text);
    line-height: 1.3;
}

.nl-ws-meta {
    font-size: 11px;
    color: var(--nl-text-3);
    line-height: 1.3;
}

.nl-ws-caret {
    color: var(--nl-text-3);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.nl-ws-caret-open {
    transform: rotate(180deg);
}

/* ── Dropdown ── */
.nl-dropdown {
    background: var(--nl-surface);
    border: 1px solid var(--nl-border-md);
    border-radius: var(--nl-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    overflow: hidden;
}

.nl-dropdown-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--nl-border-md);
    border-radius: var(--nl-radius-sm);
    font-size: 13px;
    background: var(--nl-surface2);
    outline: none;
    font-family: var(--nl-font);
}

.nl-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
    color: var(--nl-text);
}

.nl-dropdown-item:hover {
    background: var(--nl-surface2);
}

.nl-dropdown-item.active {
    background: var(--nl-blue-bg);
    color: var(--nl-blue);
}

.nl-dropdown-score {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--nl-text-2);
}

/* ── Job Toasts ── */
.nl-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--nl-radius);
    border: 1px solid;
    font-size: 13px;
    animation: nl-slideDown 0.25s ease;
}

@keyframes nl-slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.nl-toast-running {
    background: var(--nl-amber-bg);
    border-color: rgba(240,165,0,0.3);
}

.nl-toast-done {
    background: var(--nl-green-bg);
    border-color: rgba(26,122,74,0.25);
}

.nl-toast-review {
    background: var(--nl-blue-bg);
    border-color: rgba(26,79,160,0.2);
}

.nl-toast-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nl-toast-icon-spin {
    background: var(--nl-amber-mid);
    animation: nl-blink 1s ease-in-out infinite;
}

.nl-toast-icon-done {
    background: var(--nl-green-mid);
}

.nl-toast-icon-review {
    background: var(--nl-blue);
}

@keyframes nl-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.nl-toast-title {
    font-weight: 500;
}

.nl-toast-running .nl-toast-title { color: var(--nl-amber); }
.nl-toast-done .nl-toast-title { color: var(--nl-green); }
.nl-toast-review .nl-toast-title { color: var(--nl-blue); }

.nl-toast-sub {
    font-size: 12px;
    color: var(--nl-text-3);
    margin-top: 1px;
}

.nl-toast-action {
    margin-left: auto;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.nl-toast-running .nl-toast-action { color: var(--nl-amber); }
.nl-toast-done .nl-toast-action { color: var(--nl-green); }
.nl-toast-review .nl-toast-action { color: var(--nl-blue); }

/* ── Metric Cards (dashboard) ── */
.nl-metric {
    background: var(--nl-surface2);
    border-radius: var(--nl-radius);
    padding: 14px 16px;
}

.nl-metric-val {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--nl-text);
}

.nl-metric-lbl {
    font-size: 12px;
    color: var(--nl-text-2);
    margin-top: 4px;
}

.nl-metric-delta {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}

.nl-up { color: var(--nl-green); }
.nl-down { color: var(--nl-red); }

/* ── Health Score Ring ── */
.nl-score-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.nl-score-good {
    background: var(--nl-green-bg);
    color: var(--nl-green);
    border: 2px solid rgba(26,122,74,0.2);
}

.nl-score-med {
    background: var(--nl-amber-bg);
    color: var(--nl-amber);
    border: 2px solid rgba(138,90,0,0.2);
}

.nl-score-bad {
    background: var(--nl-red-bg);
    color: var(--nl-red);
    border: 2px solid rgba(155,32,32,0.2);
}

/* ── Pills / Badges ── */
.nl-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
}

.nl-pill-red { background: var(--nl-red-bg); color: var(--nl-red); }
.nl-pill-amber { background: var(--nl-amber-bg); color: var(--nl-amber); }
.nl-pill-green { background: var(--nl-green-bg); color: var(--nl-green); }
.nl-pill-blue { background: var(--nl-blue-bg); color: var(--nl-blue); }
.nl-pill-purple { background: var(--nl-purple-bg); color: var(--nl-purple); }
.nl-pill-gray { background: var(--nl-surface2); color: var(--nl-text-2); }

/* ── Priority Badge (action rows) ── */
.nl-prio {
    font-size: 12px;
    font-weight: 700;
    width: 32px;
    text-align: center;
    padding: 3px 0;
    border-radius: 5px;
    flex-shrink: 0;
}

.nl-prio-crit { background: var(--nl-red-bg); color: var(--nl-red); }
.nl-prio-high { background: var(--nl-amber-bg); color: var(--nl-amber); }
.nl-prio-med { background: var(--nl-surface2); color: var(--nl-text-2); }

/* ── Action Row ── */
.nl-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--nl-border);
    transition: background 0.1s;
}

.nl-action-row:last-child { border-bottom: none; }
.nl-action-row:hover { background: #fafaf8; }

.nl-action-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--nl-text);
}

.nl-action-meta {
    font-size: 12px;
    color: var(--nl-text-3);
    margin-top: 2px;
}

/* ── Small Buttons (matching mockup) ── */
.nl-btn {
    font-family: var(--nl-font);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--nl-radius-sm);
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
    border: 1px solid var(--nl-border-md);
    background: transparent;
    color: var(--nl-text-2);
    /* a11y: 44px touch-target-vloer (WCAG 2.5.8) — geldt voor alle .nl-btn's */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nl-btn:hover {
    background: var(--nl-surface2);
    color: var(--nl-text);
}

.nl-btn-green {
    background: var(--nl-green-bg);
    color: var(--nl-green);
    border-color: color-mix(in srgb, var(--nl-green) 22%, transparent);
    font-weight: 500;
}

.nl-btn-green:hover { opacity: 0.85; }

.nl-btn-primary {
    background: var(--nl-blue, #2A3BE0);
    color: #fff;
    border: none;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--nl-radius-sm);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nl-btn-primary:hover { opacity: 0.85; }

.nl-btn-danger {
    background: var(--nl-red-bg);
    color: var(--nl-red);
    border-color: rgba(155,32,32,0.2);
}

/* ── Settings Layout ── */
.nl-settings-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: var(--nl-radius-sm);
    font-size: 13px;
    color: var(--nl-text-2);
    cursor: pointer;
    transition: background 0.1s;
    margin-bottom: 2px;
    border: none;
    background: transparent;
    font-family: var(--nl-font);
}

.nl-settings-nav-item:hover {
    background: var(--nl-surface2);
    color: var(--nl-text);
}

.nl-settings-nav-item-active {
    background: var(--nl-text) !important;
    color: #fff !important;
    font-weight: 500 !important;
}

/* ── Magic Link Report (public page) ── */
.nl-report-header {
    background: #111;
    border-radius: var(--nl-radius) var(--nl-radius) 0 0;
    padding: 24px 28px;
}

.nl-report-brand {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
}

.nl-report-domain {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    margin-top: 6px;
}

.nl-report-period {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
}

/* ── Slot bar (subscription) ── */
.nl-slot-bar {
    background: var(--nl-border);
    border-radius: 3px;
    height: 5px;
    overflow: hidden;
}

.nl-slot-fill {
    height: 100%;
    background: var(--nl-text);
    border-radius: 3px;
    transition: width 0.3s;
}

/* ── Token URL (monospace) ── */
.nl-token-url {
    font-family: var(--nl-mono);
    font-size: 12px;
    color: var(--nl-text-2);
}

/* ── Design System variable aliases (unprefixed, per CLAUDE.md spec) ── */
:root {
    --bg-app: var(--nl-bg);
    --bg-surface: var(--nl-surface);
    --bg-surface-2: var(--nl-surface2);
    --bg-surface-3: var(--nl-surface-dim, #ECEAD7);
    --text-primary: var(--nl-text);
    --text-secondary: var(--nl-text-2);
    --text-tertiary: var(--nl-text-3);
    --border: var(--nl-border);
    --border-md: var(--nl-border-md);
    --green: var(--nl-green);
    --green-bg: var(--nl-green-bg);
    --green-mid: var(--nl-green-mid);
    --amber: var(--nl-amber);
    --amber-bg: var(--nl-amber-bg);
    --amber-mid: var(--nl-amber-mid);
    --red: var(--nl-red);
    --red-bg: var(--nl-red-bg);
    --red-mid: var(--nl-red-mid);
    --blue: var(--nl-blue);
    --blue-bg: var(--nl-blue-bg);
    --purple: var(--nl-purple);
    --purple-bg: var(--nl-purple-bg);
    --font-sans: var(--nl-font);
    --font-mono: var(--nl-mono);
    --radius-sm: var(--nl-radius-sm);
    --radius: var(--nl-radius);
    --radius-lg: var(--nl-radius-lg, 16px);
}

/* ── Dark Mode ──
   Two activation paths:
   1. .dark class (Filament theme switcher / explicit user choice)
   2. @media (prefers-color-scheme: dark) when no explicit .light class is set
*/
@media (prefers-color-scheme: dark) {
    /* Donker = het groene Register 2 van token.css (zelfde merk-wereld als /control). */
    :root:not(.light) {
        --nl-bg: var(--nl-green-900, #06231D);
        --nl-surface: var(--nl-green-800, #0A3328);
        --nl-surface2: var(--nl-green-700, #0C4034);
        --nl-border: rgba(244,243,228,0.12);
        --nl-border-md: rgba(244,243,228,0.20);
        --nl-text: var(--nl-paper-200, #F4F3E4);
        --nl-text-2: rgba(244,243,228,0.62);
        --nl-text-3: rgba(244,243,228,0.45);
        --nl-green: var(--nl-mint-400, #4AEAAB);
        --nl-green-bg: rgba(74,234,171,0.14);
        --nl-green-mid: var(--nl-green-400, #13B58F);
        --nl-amber: var(--nl-lime-500, #DAEA4B);
        --nl-amber-bg: rgba(218,234,75,0.16);
        --nl-amber-mid: var(--nl-lime-600, #B9D02F);
        --nl-red: var(--nl-danger-onDark, #FF7556);
        --nl-red-bg: #3A140C;
        --nl-red-mid: var(--nl-danger, #BE3A2B);
        --nl-blue: var(--nl-blue-300, #7C8CFF);
        --nl-blue-bg: rgba(124,140,255,0.16);
        --nl-purple: var(--nl-lime-500, #DAEA4B);
        --nl-purple-bg: rgba(218,234,75,0.14);
        --bg-surface-3: var(--nl-green-700, #0C4034);
    }

    :root:not(.light) .fi-body {
        background-color: var(--nl-bg) !important;
    }

    :root:not(.light) .fi-sidebar,
    :root:not(.light) .fi-topbar {
        background-color: var(--nl-surface) !important;
        border-color: var(--nl-border) !important;
    }

    :root:not(.light) .fi-section,
    :root:not(.light) .fi-ta-ctn {
        background-color: var(--nl-surface) !important;
        border-color: var(--nl-border) !important;
    }

    :root:not(.light) .fi-wi-stats-overview-stat,
    :root:not(.light) .nl-metric,
    :root:not(.light) .nl-action-row:hover {
        background: var(--nl-surface2);
    }

    :root:not(.light) .nl-ws-trigger {
        background: var(--nl-surface2);
        border-color: var(--nl-border-md);
    }

    :root:not(.light) .nl-dropdown {
        background: var(--nl-surface);
        border-color: var(--nl-border-md);
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    :root:not(.light) .fi-sidebar-item-button[data-active] {
        background-color: #ededed !important;
        color: #1c1c1a !important;
    }

    :root:not(.light) .fi-sidebar-item-button[data-active] .fi-sidebar-item-icon {
        color: rgba(28,28,26,0.7) !important;
    }

    :root:not(.light) .fi-sidebar-item-button:not([data-active]):hover {
        background-color: var(--nl-surface2) !important;
    }
}

/* ── Dark Mode: explicit .dark class (Filament toggle) ──
   Spiegelt het groene Register 2 van token.css (identiek aan de
   @media prefers-dark hierboven), zodat de Filament-toggle dezelfde merk-
   wereld geeft i.p.v. de oude warm-grijze dark mode. */
.dark {
    --nl-bg: var(--nl-green-900, #06231D);
    --nl-surface: var(--nl-green-800, #0A3328);
    --nl-surface2: var(--nl-green-700, #0C4034);

    --nl-border: rgba(244,243,228,0.12);
    --nl-border-md: rgba(244,243,228,0.20);

    --nl-text: var(--nl-paper-200, #F4F3E4);
    --nl-text-2: rgba(244,243,228,0.62);
    --nl-text-3: rgba(244,243,228,0.45);

    --nl-green: var(--nl-mint-400, #4AEAAB);
    --nl-green-bg: rgba(74,234,171,0.14);
    --nl-green-mid: var(--nl-green-400, #13B58F);
    --nl-amber: var(--nl-lime-500, #DAEA4B);
    --nl-amber-bg: rgba(218,234,75,0.16);
    --nl-amber-mid: var(--nl-lime-600, #B9D02F);
    --nl-red: var(--nl-danger-onDark, #FF7556);
    --nl-red-bg: #3A140C;
    --nl-red-mid: var(--nl-danger, #BE3A2B);
    --nl-blue: var(--nl-blue-300, #7C8CFF);
    --nl-blue-bg: rgba(124,140,255,0.16);
    --nl-purple: var(--nl-lime-500, #DAEA4B);
    --nl-purple-bg: rgba(218,234,75,0.14);

    --bg-app: var(--nl-bg);
    --bg-surface: var(--nl-surface);
    --bg-surface-2: var(--nl-surface2);
    --bg-surface-3: var(--nl-green-700, #0C4034);
    --text-primary: var(--nl-text);
    --text-secondary: var(--nl-text-2);
    --text-tertiary: var(--nl-text-3);
    --border: var(--nl-border);
    --border-md: var(--nl-border-md);
    --green: var(--nl-green);
    --green-bg: var(--nl-green-bg);
    --green-mid: var(--nl-green-mid);
    --amber: var(--nl-amber);
    --amber-bg: var(--nl-amber-bg);
    --amber-mid: var(--nl-amber-mid);
    --red: var(--nl-red);
    --red-bg: var(--nl-red-bg);
    --red-mid: var(--nl-red-mid);
    --blue: var(--nl-blue);
    --blue-bg: var(--nl-blue-bg);
    --purple: var(--nl-purple);
    --purple-bg: var(--nl-purple-bg);
}

.dark .fi-body {
    background-color: var(--nl-bg) !important;
}

.dark .fi-sidebar {
    background-color: var(--nl-surface) !important;
    border-right-color: var(--nl-border) !important;
}

.dark .fi-topbar {
    background-color: var(--nl-surface) !important;
    border-bottom-color: var(--nl-border) !important;
}

.dark .fi-section,
.dark .fi-ta-ctn {
    background-color: var(--nl-surface) !important;
    border-color: var(--nl-border) !important;
}

.dark .fi-wi-stats-overview-stat {
    background-color: var(--nl-surface2) !important;
}

.dark .nl-ws-trigger {
    background: var(--nl-surface2);
    border-color: var(--nl-border-md);
}

.dark .nl-ws-trigger:hover {
    border-color: rgba(255,255,255,0.2);
    background: #2a2a27;
}

.dark .nl-dropdown {
    background: var(--nl-surface);
    border-color: var(--nl-border-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dark .nl-dropdown-item:hover {
    background: var(--nl-surface2);
}

.dark .nl-dropdown-item.active {
    background: rgba(107,158,255,0.12);
    color: var(--nl-blue);
}

.dark .nl-dropdown-search input {
    background: var(--nl-surface2);
    border-color: var(--nl-border-md);
    color: var(--nl-text);
}

.dark .nl-action-row:hover {
    background: var(--nl-surface2);
}

.dark .nl-metric {
    background: var(--nl-surface2);
}

.dark .nl-metric-val {
    color: var(--nl-text);
}

.dark .fi-sidebar-item-button[data-active] {
    background-color: #ededed !important;
    color: #1c1c1a !important;
}

.dark .fi-sidebar-item-button[data-active] .fi-sidebar-item-icon {
    color: rgba(28,28,26,0.7) !important;
}

.dark .fi-sidebar-item-button:not([data-active]):hover {
    background-color: var(--nl-surface2) !important;
}

/* ── Loading spinner animation ── */
@keyframes nl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Accessibility: screen-reader-only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Accessibility: skip-to-content link ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    font-family: var(--nl-font);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: var(--nl-text);
    background: var(--nl-surface);
    padding: 8px 16px;
    border-radius: var(--nl-radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 2px solid var(--nl-blue);
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    overflow: visible;
    /* D1 fix: outline behouden voor keyboard users (was outline: none). */
    outline: 2px solid var(--nl-blue, #1a4fa0);
    outline-offset: 2px;
}

/* ── Accessibility: 44px minimum touch targets ──
   Cover all interactive elements, not just .fi-btn. Inline button styles
   in blade files often set padding ~30px — this rule enforces the floor. */
.fi-btn,
.fi-ta-row-action,
.fi-ac-btn-action,
.nl-btn,
button[type="submit"]:not(.nl-icon-btn),
.nl-action-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon-only buttons get a relaxed touch target via padding instead */
.nl-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nl-radius-sm);
    background: transparent;
    border: none;
    color: var(--nl-text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nl-icon-btn:hover {
    background: var(--nl-surface2);
    color: var(--nl-text);
}

.nl-icon-btn:focus-visible {
    outline: 2px solid var(--nl-blue);
    outline-offset: 2px;
}

/* ── Accessibility: prefers-reduced-motion ── */
/* ── Bezel-style Animations ── */

/* Score ring fill */
@keyframes nl-ring-fill {
    from { stroke-dasharray: 0 264; }
}
.nl-score-ring circle.nl-ring-value {
    animation: nl-ring-fill 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Count-up entrance */
@keyframes nl-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.nl-count-up {
    animation: nl-count-up 0.6s ease-out forwards;
}

/* Scroll-triggered entrance */
.nl-enter {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.nl-enter.nl-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Progress bar fill */
.nl-bar-fill {
    width: 0;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    border-radius: 4px;
}
.nl-bar-fill.nl-visible {
    width: var(--bar-width);
}

/* Card hover */
.nl-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nl-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Skeleton shimmer */
@keyframes nl-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.nl-skeleton {
    background: linear-gradient(90deg, var(--bg-surface-2, #f0efe9) 25%, var(--bg-surface-3, #e8e6df) 50%, var(--bg-surface-2, #f0efe9) 75%);
    background-size: 200% 100%;
    animation: nl-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm, 6px);
}

/* Timeline connector */
.nl-timeline-item {
    position: relative;
    padding-left: 28px;
}
.nl-timeline-item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 24px;
    bottom: -12px;
    width: 2px;
    background: var(--border, rgba(0, 0, 0, 0.08));
}
.nl-timeline-item:last-child::before {
    display: none;
}
.nl-timeline-dot {
    position: absolute;
    left: 2px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface, #ffffff);
}

/* Pulse dot for running jobs */
@keyframes nl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.nl-pulse {
    animation: nl-pulse 1.5s ease-in-out infinite;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--blue, #1a4fa0);
    outline-offset: 2px;
}

/* Touch target enforcement */
.fi-btn, .fi-ta-row-action, .fi-ac-btn-action, .nl-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Page grid (Bezel card layout) */
.nl-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.nl-page-card {
    display: block;
    padding: 16px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: var(--radius, 10px);
    text-decoration: none;
    color: inherit;
}
.nl-page-card.nl-card-critical {
    grid-column: span 2;
    border-color: var(--red-mid, #e05050);
    background: linear-gradient(180deg, var(--red-bg, #fdeaea) 0%, var(--bg-surface, #fff) 50%);
}
@media (max-width: 767px) {
    .nl-page-card.nl-card-critical {
        grid-column: span 1;
    }
}

/* Opportunity grid (Blog Kansen) */
.nl-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.nl-cluster-group {
    margin-bottom: 2rem;
}
.nl-cluster-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1916);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nl-cluster-heading span {
    font-weight: 400;
    color: var(--text-tertiary, #9e9d98);
    text-transform: none;
    margin-left: 0.5rem;
    letter-spacing: 0;
}

/* Timeline (Signalen) */
.nl-timeline-day {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #9e9d98);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}
.nl-timeline-day:first-child {
    margin-top: 0;
}
.nl-signal-card {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nl-signal-card:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.nl-signal-severity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* View toggle */
.nl-view-toggle button:hover:not([class*="active"]) {
    background: rgba(0,0,0,0.03);
}
[x-cloak] { display: none !important; }

/* Stagger children entrance */
.nl-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    animation: nl-count-up 0.4s ease-out forwards;
}
.nl-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.nl-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.nl-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.nl-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.nl-stagger > *:nth-child(5) { animation-delay: 0.25s; }

/* ── Reduced Motion ── */
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN SYSTEM
   Breakpoints:
   - Desktop:  1024px+  (full sidebar 260px)
   - Tablet:   768-1023px (icon sidebar 60px)
   - Mobile:   <768px   (off-canvas sidebar)
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (768-1023px) ── */
@media (max-width: 1023px) {
    /* Sub-score grid: 4 → 2 kolommen */
    [role="list"][aria-label="SEO sub-scores"],
    .nl-sub-scores {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Metric grids: 4 → 2 kolommen */
    .nl-metric-grid,
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Stat kaarten onderaan dashboard: 3 → 2 kolommen */
    .nl-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Settings tabs: horizontaal → verticaal compact */
    .nl-settings-nav {
        min-width: 140px !important;
    }

    /* Weekplan step cards: stack content boven buttons */
    .nl-step-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .nl-step-card .nl-step-actions {
        margin-top: 0.75rem;
        justify-content: flex-end;
    }

    /* Header actie knoppen: wrap */
    .fi-header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Keyword strategie action buttons: kleiner */
    .nl-kw-actions {
        flex-wrap: wrap !important;
    }
    .nl-kw-actions .fi-btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
    /* Sub-score grid: 2x2 */
    [role="list"][aria-label="SEO sub-scores"],
    .nl-sub-scores {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    [role="list"][aria-label="SEO sub-scores"] [role="listitem"],
    .nl-sub-scores > div {
        padding: 0.5rem 0.375rem !important;
    }
    [role="list"][aria-label="SEO sub-scores"] [role="listitem"] > div:first-child,
    .nl-sub-scores > div > div:first-child {
        font-size: 1.25rem !important;
    }

    /* Metric grids: 2x2 met kleinere padding */
    .nl-metric-grid,
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* Dashboard score hero: kleiner */
    .nl-score-hero {
        gap: 1rem !important;
    }
    .nl-score-hero .nl-score-ring {
        width: 72px !important;
        height: 72px !important;
    }
    .nl-score-hero .nl-score-number {
        font-size: 1.375rem !important;
    }

    /* Stat kaarten: 1 kolom */
    .nl-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Weekplan: compact weergave */
    .nl-step-card {
        flex-direction: column !important;
        padding: 0.75rem !important;
    }
    .nl-step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    /* Tabellen: horizontaal scrollen */
    .fi-ta-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabel kolommen: verberg minder belangrijke op mobiel */
    .fi-ta th:nth-child(n+4),
    .fi-ta td:nth-child(n+4) {
        display: none;
    }

    /* Notificatie items: stack layout */
    .nl-notif-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .nl-notif-item .nl-notif-actions {
        margin-top: 0.5rem;
        align-self: flex-end;
    }

    /* Settings: tabs boven content ipv naast */
    .nl-settings-layout {
        grid-template-columns: 1fr !important;
    }
    .nl-settings-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        padding: 0.25rem !important;
        gap: 0.25rem !important;
    }
    .nl-settings-nav button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Header: compact */
    .fi-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .fi-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Idee input: stack */
    .nl-idea-form {
        flex-direction: column !important;
    }
    .nl-idea-form button {
        width: 100% !important;
    }

    /* Topbar: compact zoekbalk */
    .fi-topbar .fi-global-search {
        max-width: 160px;
    }

    /* Website switcher: volledige breedte dropdown */
    .nl-ws-dropdown {
        width: calc(100vw - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
    }

    /* Pipeline stepper: horizontaal scrollen */
    .nl-pipeline-stepper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .nl-pipeline-stepper > * {
        flex-shrink: 0 !important;
    }

    /* Blog kansen / concurrenten tabel: card-achtig op mobiel */
    .fi-ta-row {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0.75rem !important;
        border-bottom: 1px solid var(--nl-border, rgba(0,0,0,0.08));
    }

    /* Keyword strategie: cluster cards stacked */
    .nl-cluster-grid {
        grid-template-columns: 1fr !important;
    }

    /* Keyword strategie header buttons: verborgen labels, alleen iconen */
    .nl-kw-actions .fi-btn span:not(.fi-btn-icon) {
        display: none;
    }
    .nl-kw-actions .fi-btn {
        min-width: 44px !important;
        padding: 0.5rem !important;
    }

    /* Concurrenten: scroll tabel */
    .fi-ta-ctn {
        overflow-x: auto;
    }

    /* Page detail: secties full width */
    .nl-page-detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modals: bijna volledig scherm */
    .fi-modal-window {
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 2rem) !important;
        margin: 0.5rem !important;
    }

    /* Breadcrumbs: compact */
    .fi-breadcrumbs {
        font-size: 0.75rem !important;
    }

    /* Global: content padding verminderen */
    .fi-main-ctn {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── Small mobile (<480px) ── */
@media (max-width: 479px) {
    /* Score hero: verticaal stacked */
    .nl-score-hero {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Sub-scores: labels nog kleiner */
    [role="list"][aria-label="SEO sub-scores"] [role="listitem"] > div:last-child,
    .nl-sub-scores > div > div:last-child {
        font-size: 0.5625rem !important;
    }

    /* Topbar: verberg globale zoekbalk */
    .fi-topbar .fi-global-search {
        display: none !important;
    }

    /* Pagination: compact */
    .fi-ta-pagination {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Filters: full width dropdown */
    .fi-ta-filters {
        flex-direction: column !important;
    }
    .fi-ta-filters > * {
        width: 100% !important;
    }
}

/* ── Additional layout tokens (sidebar/topbar dimensions) ──
   All color/font/radius aliases are defined in the main :root block (line 580). */
:root {
    --sidebar-width: 260px;
    --topbar-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* Keep opacity transitions — they don't cause motion sickness */
        transition-property: opacity, color, background-color, border-color !important;
        transition-duration: 0.15s !important;
    }
    .nl-enter, .nl-bar-fill, .nl-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .nl-bar-fill { width: var(--bar-width) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIGMA CHROME (2026-06-08) — sidebar volgens ontwerp + GEEN topbar.
   Correcte Filament v5 selectors: .fi-sidebar-item-btn, .fi-sidebar-item.fi-active.
   Staat bewust achteraan zodat het de oudere (v4) sidebar-regels overschrijft.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar volledig weg (Figma heeft er geen) ── */
.fi-topbar { display: none !important; }
.fi-main { padding-top: 1.75rem !important; }

/* ── Sidebar: paper, smal, rand rechts ── */
/* top:0 + 100vh: zonder topbar mag de sidebar tegen de bovenkant; de sticky
   top:4rem die Filament standaard zet (ruimte voor de verborgen topbar) wordt
   hier weggehaald zodat er geen lege strook boven de sidebar staat. */
.fi-sidebar,
.fi-main-sidebar {
    background: var(--nl-bg) !important;
    border-right: 1px solid var(--nl-border) !important;
    width: 260px !important;
    top: 0 !important;
    height: 100vh !important;
}
.fi-sidebar-nav { padding: 1rem 0.5rem 0 !important; }

/* Logo: lime "dot"-vierkant vóór de naam */
.fi-logo {
    font-family: var(--nl-font) !important;
    font-weight: 700 !important;
    font-size: 1.0625rem !important;
    letter-spacing: -0.01em !important;
    color: var(--nl-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.fi-logo::before {
    content: "";
    width: 22px; height: 22px;
    border-radius: 5px;
    background: var(--nl-accent, #DAEA4B);
    flex-shrink: 0;
}

/* ── Sectie-labels: Space Mono, uppercase, tracking ── */
.fi-sidebar-group-label {
    font-family: var(--nl-mono, 'Space Mono', monospace) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--nl-text-3) !important;
    padding: 0 0.5rem !important;
    margin: 0.875rem 0 0.25rem !important;
}
.fi-sidebar-group + .fi-sidebar-group { margin-top: 0 !important; }

/* ── Nav-items ── */
.fi-sidebar-item-btn {
    border-radius: var(--nl-radius-sm, 8px) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--nl-text-2) !important;
    padding: 0.5rem 0.625rem !important;
    gap: 0.625rem !important;
    min-height: 38px !important;
}
.fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--nl-text-3) !important; }
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background: var(--nl-surface2) !important;
    color: var(--nl-text) !important;
}

/* Active: donkergroene pill met paper-tekst (Figma) */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--nl-green-900, #06231D) !important;
    color: var(--nl-paper-100, #FFFDEC) !important;
    font-weight: 600 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--nl-paper-100, #FFFDEC) !important;
}

/* Nav-badges (open acties etc.) */
.fi-sidebar-item-btn .fi-badge {
    background: var(--nl-accent, #DAEA4B) !important;
    color: var(--nl-green-900, #06231D) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-badge {
    background: rgba(244,243,228,0.22) !important;
    color: var(--nl-paper-100, #FFFDEC) !important;
}

/* ── Sidebar-footer: website-kaart + user ── */
.fi-sidebar-footer { border-top: none !important; padding: 0 !important; }
.nl-sidebar-foot {
    padding: 10px;
    border-top: 1px solid var(--nl-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nl-sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
}
.nl-sidebar-user-avatar {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--nl-blue, #2A3BE0);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    flex-shrink: 0;
}
.nl-sidebar-user-name {
    font-size: 12px; font-weight: 600; color: var(--nl-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-sidebar-user-role { font-size: 11px; color: var(--nl-text-3); }
.nl-sidebar-iconbtn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--nl-radius-sm, 8px);
    color: var(--nl-text-3);
    background: transparent; border: none; cursor: pointer;
    flex-shrink: 0;
}
.nl-sidebar-iconbtn:hover { background: var(--nl-surface2); color: var(--nl-text); }

/* ── Content: paginatitel groot (geen topbar, titel bovenaan) ── */
.fi-header-heading {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--nl-text) !important;
}

/* Dark register: active-pill lichter zodat hij niet wegvalt op groen-donker */
@media (prefers-color-scheme: dark) {
    :root:not(.light) .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
        background: var(--nl-green-600, #076653) !important;
    }
}

/* ── Sidebar-logo bovenaan (Figma) ── */
.nl-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem 0.875rem;
    font-family: var(--nl-font, 'Inter', sans-serif);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--nl-text);
}
.nl-sidebar-logo-mark {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: var(--nl-accent, #DAEA4B);
    flex-shrink: 0;
}
/* Filament's eigen (lege) logo-area verbergen — wij renderen 'm zelf */
.fi-sidebar-header { display: none !important; }

/* ── Modal-overlay (Figma modals) ──
   BELANGRIJK: de flex-centrering staat in een CLASS, niet inline. Alpine's
   x-show verwijdert bij het tonen de inline `display` (revert naar de
   cascade); stond display:flex inline, dan viel 'ie terug op block en stond
   de kaart linksboven i.p.v. gecentreerd. Via een class blijft flex behouden. */
.nl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(6, 35, 29, 0.35);
}

/* ── Agency/Self-serve segmented toggle (Figma Vandaag) ── */
.nl-mode-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--nl-surface2, #ECEAD7);
    border: 1px solid var(--nl-border);
    border-radius: 999px;
}
.nl-mode-seg {
    padding: 5px 16px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-family: var(--nl-font, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nl-text-2);
    cursor: pointer;
    min-height: 32px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.nl-mode-seg:hover { color: var(--nl-text); }
.nl-mode-seg-active {
    background: var(--nl-interactive, #2A3BE0);
    /* N7-8: lichte tekst op het blauwe vlak; donkergroen haalde ~2.6:1 contrast. */
    color: var(--nl-paper-100, #FFFDEC);
    box-shadow: 0 1px 2px rgba(6,35,29,0.10);
}
.nl-mode-seg-active:hover { color: var(--nl-paper-100, #FFFDEC); }

/* ── Skip-to-content: onzichtbaar tot keyboard-focus (a11y; mag niet zichtbaar zijn) ── */
.nl-skip-link {
    position: fixed;
    top: 0;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 0.875rem;
    background: var(--nl-green-900, #06231D);
    color: var(--nl-paper-100, #FFFDEC);
    text-decoration: none;
    border-radius: var(--nl-radius-sm, 8px);
    font-weight: 600;
    font-size: 0.8125rem;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
}
.nl-skip-link:focus,
.nl-skip-link:focus-visible {
    transform: translateY(0.5rem);
    outline: 2px solid var(--nl-blue, #2A3BE0);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING / AUTH — split-screen (Figma). Donkergroen merkpaneel links,
   formulier rechts. Filament-auth-pages krijgen $layout = filament.auth.split-layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.nl-auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--nl-paper-200, #F4F3E4);
}
.nl-auth-left {
    background: var(--nl-green-900, #06231D);
    color: var(--nl-paper-100, #FFFDEC);
    padding: 2.75rem 3rem;
    display: flex;
    flex-direction: column;
}
.nl-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--nl-font, 'Inter', sans-serif);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--nl-paper-100, #FFFDEC);
}
.nl-auth-logo-mark {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: var(--nl-lime-500, #DAEA4B);
    flex-shrink: 0;
}
.nl-auth-left-body { margin-top: auto; }
.nl-auth-headline {
    font-family: var(--nl-font, 'Inter', sans-serif);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: var(--nl-paper-100, #FFFDEC);
    max-width: 17ch;
}
.nl-auth-tagline {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(244, 243, 228, 0.62);
    margin: 0;
    max-width: 42ch;
}
.nl-auth-foot {
    margin-top: 2.5rem;
    font-family: var(--nl-mono, 'Space Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--nl-lime-500, #DAEA4B);
}
.nl-auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.nl-auth-form-ctn {
    width: 100%;
    max-width: 420px;
}

/* Filament-simple-page chrome strippen op de auth-split (geen kaart, links uitlijnen) */
.nl-auth-right .fi-simple-page,
.nl-auth-right .fi-simple-page-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    ring-width: 0 !important;
}
.nl-auth-right .fi-simple-page-content { gap: 0 !important; }
/* Alleen het logo in de kaart-header verbergen — links staat 'm al. Heading
   (Maak je account) + subheading moeten zichtbaar blijven, links uitgelijnd. */
.nl-auth-right .fi-simple-header .fi-logo,
.nl-auth-right .fi-simple-header img { display: none !important; }
.nl-auth-right .fi-simple-header {
    text-align: left !important;
    align-items: flex-start !important;
    margin-bottom: 1.5rem !important;
}
.nl-auth-right .fi-simple-header-heading,
.nl-auth-right .fi-header-heading { text-align: left !important; }

/* Heading + subheading van de auth-pagina (Figma) */
.nl-auth-right .fi-simple-header-heading {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--nl-text) !important;
}
.nl-auth-right .fi-simple-header-subheading {
    font-size: 0.9375rem !important;
    color: var(--nl-text-2) !important;
    margin-top: 0.25rem !important;
}

/* Inputs op de auth-pagina: paper-vlak, ruim */
.nl-auth-right .fi-input,
.nl-auth-right input[type="text"],
.nl-auth-right input[type="email"] {
    background: var(--nl-paper-100, #FFFDEC) !important;
    min-height: 48px !important;
}
.nl-auth-right .fi-fo-field-wrp-label,
.nl-auth-right .fi-fo-field-wrp label {
    font-size: 0.8125rem !important;
    color: var(--nl-text-2) !important;
    font-weight: 500 !important;
}

/* Primaire knop (Account aanmaken / Inloggen): blauw, breed.
   Filament v5 zet de kleur via .fi-color-primary + .fi-bg-color-400 utilities —
   background-color direct overschrijven met !important wint daarvan. */
.nl-auth-right .fi-btn.fi-color-primary,
.nl-auth-right .fi-ac-action .fi-btn {
    background-color: var(--nl-blue, #2A3BE0) !important;
    color: #fff !important;
    width: 100%;
    justify-content: center;
    min-height: 48px !important;
    font-weight: 600 !important;
}
.nl-auth-right .fi-btn.fi-color-primary .fi-btn-label { color: #fff !important; }

@media (max-width: 860px) {
    .nl-auth-split { grid-template-columns: 1fr; }
    .nl-auth-left { display: none; }
}

/* ── Focus-layout (Onboarding "Setup draait" + "Search Console koppelen") ──
   Geen sidebar/topbar: een gecentreerd onboarding-moment op paper. */
.nl-focus-ctn {
    min-height: 100vh;
    background: var(--nl-paper-200, #F4F3E4);
    display: flex;
    justify-content: center;
    padding: 3.5rem 1.5rem;
}
.nl-focus-inner {
    width: 100%;
    max-width: 660px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   N7-FIXPASS (2026-06): subnav-hover, hub-layout responsive, skeleton-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Subnav-items (strategie-, website-verbeteringen- en niche-subnav) ──
   Hover alleen op niet-actieve items; het actieve item houdt zijn donkergroene
   inline-achtergrond en krijgt een zichtbare focus-ring op het donkere vlak. */
.nl-subnav-item {
    transition: background-color 0.12s ease, color 0.12s ease;
}
.nl-subnav-item:not([aria-current="page"]):hover {
    background: var(--nl-surface2, #ECEAD7);
    color: var(--nl-text, #1a1916);
}
.nl-subnav-item[aria-current="page"]:focus-visible {
    outline: 2px solid var(--nl-blue, #2A3BE0);
    outline-offset: 2px;
}

/* ── Hub-layout (strategie/website-verbeteringen/niche): subnav + content ──
   Desktop met vaste subnav-kolom; op smalle schermen stapelen naar 1 kolom. */
.nl-hub-layout {
    display: grid;
    grid-template-columns: 208px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 768px) {
    .nl-hub-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── K13: skeleton onder prefers-reduced-motion. Geen shimmer-beweging,
   alleen een rustige opacity-fade. Specifieker dan de globale reduce-regel. */
@keyframes nl-skeleton-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .nl-skeleton {
        background: var(--bg-surface-2, #f0efe9);
        animation-name: nl-skeleton-fade !important;
        animation-duration: 1.6s !important;
        animation-timing-function: ease-in-out !important;
        animation-iteration-count: infinite !important;
    }
}