/* =============================================
   AlertControl — Site CSS
   Dark security aesthetic with electric blue accents
   ============================================= */

:root {
    --bg: #070c14;
    --surface: #0d1520;
    --surface2: #121d2e;
    --border: rgba(255,255,255,0.08);
    --accent: #1e90ff;
    --accent2: #00d4ff;
    --light-blue: #8ecbff;
    --accent-glow: rgba(30,144,255,0.25);
    --warning: #f5a623;
    --danger: #ff4757;
    --success: #2ed573;
    --text: #e8f0ff;
    --text-muted: #7b8fa8;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --max-w: 1200px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

    /* Achtergrond: dunne lijnvormen (cirkel, zeshoek, ruit, boog, plusjes) in net iets andere blauwtinten,
       met twee zachte kleurvlakken. Vast achter de pagina (geen background-attachment: fixed, dat hapert op mobiel). */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            radial-gradient(1100px 600px at 88% -8%, rgba(30,144,255,0.09), transparent 62%),
            radial-gradient(900px 520px at -8% 45%, rgba(0,212,255,0.05), transparent 60%),
            radial-gradient(800px 500px at 70% 110%, rgba(142,203,255,0.05), transparent 60%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke-width='1'%3E%3Ccircle cx='62' cy='70' r='38' stroke='%238ecbff' stroke-opacity='0.07'/%3E%3Ccircle cx='62' cy='70' r='22' stroke='%231e90ff' stroke-opacity='0.05'/%3E%3Cpolygon points='252,46 288,67 288,109 252,130 216,109 216,67' stroke='%231e90ff' stroke-opacity='0.08'/%3E%3Cpath d='M20 312 L142 190' stroke='%2300d4ff' stroke-opacity='0.06'/%3E%3Cpath d='M34 326 L156 204' stroke='%2300d4ff' stroke-opacity='0.04'/%3E%3Cpolygon points='206,238 238,270 206,302 174,270' stroke='%238ecbff' stroke-opacity='0.065'/%3E%3Cpath d='M300 352 A62 62 0 0 1 352 290' stroke='%231e90ff' stroke-opacity='0.07'/%3E%3Cpath d='M314 214h14 M321 207v14' stroke='%238ecbff' stroke-opacity='0.12'/%3E%3Cpath d='M120 22h10 M125 17v10' stroke='%2300d4ff' stroke-opacity='0.1'/%3E%3C/g%3E%3Cg fill='%238ecbff' fill-opacity='0.12'%3E%3Ccircle cx='150' cy='140' r='1.6'/%3E%3Ccircle cx='330' cy='40' r='1.6'/%3E%3Ccircle cx='96' cy='230' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
        background-size: auto, auto, auto, 360px 360px;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

    a:hover {
        color: var(--accent2);
    }

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 24px var(--accent-glow);
}

    .btn-primary:hover {
        background: var(--accent2);
        color: #fff;
        box-shadow: 0 0 40px rgba(0,212,255,0.4);
        transform: translateY(-2px);
    }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}

    .btn-ghost:hover {
        color: var(--text);
        border-color: rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.04);
    }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
}

    .btn-outline:hover {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 0 20px var(--accent-glow);
    }

.btn-full {
    width: 100%;
    justify-content: center;
}

/* === NAV === */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    transition: background var(--transition), backdrop-filter var(--transition);
}

    .nav.scrolled {
        background: rgba(7,12,20,0.92);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
    }

.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
}

.logo-icon {
    color: var(--accent);
    font-size: 14px;
}

/* Logo (wwwroot/img/alertcontrol-logo.webp: LogoBreedv2.jpg bijgesneden, met transparante achtergrond) */
.logo-img {
    display: block;
    height: var(--logo-h, 36px);
    width: auto;
}

.footer-brand .logo-img {
    height: 32px;
}

@media (max-width: 768px) {
    .nav {
        --logo-h: 30px;
    }
}

/* Logo in de navigatie: hartslag. Elke 3,2 seconden een dubbele slag (lub-dub) met een neon-gloed, en bij elke slag
   een geluidsgolf die uit het belletje in het schild uitdijt, als een alarm dat afgaat. */
.nav .nav-logo {
    position: relative;
}

.nav .logo-img {
    animation: logoHeartbeat 3.2s ease-in-out infinite;
}

    /* Twee ringen, één per slag; het midden ligt op het belletje in het schild (0,664 × de logohoogte van links, 62,7% van boven) */
    .nav .nav-logo::before,
    .nav .nav-logo::after {
        content: "";
        position: absolute;
        left: calc(var(--logo-h, 36px) * 0.664);
        top: 62.7%;
        width: var(--logo-h, 36px);
        height: var(--logo-h, 36px);
        border-radius: 50%;
        border: 2px solid rgba(0,212,255,0.7);
        opacity: 0;
        pointer-events: none;
        animation: logoRipple 3.2s ease-out infinite;
    }

    .nav .nav-logo::after {
        border-color: rgba(30,144,255,0.6);
        animation-delay: 0.55s;
    }

    .nav .nav-logo:hover .logo-img {
        animation-play-state: paused;
        filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,212,255,0.6));
    }

@keyframes logoHeartbeat {
    0%, 32%, 100% {
        filter: drop-shadow(0 0 0 rgba(0,212,255,0));
    }

    6% {
        filter: drop-shadow(0 0 6px rgba(0,212,255,0.8));
    }

    11% {
        filter: drop-shadow(0 0 1px rgba(0,212,255,0.25));
    }

    17% {
        filter: drop-shadow(0 0 10px rgba(30,144,255,0.9));
    }
}

@keyframes logoRipple {
    0% {
        transform: translate(-50%, -50%) scale(0.45);
        opacity: 0;
    }

    4% {
        opacity: 0.85;
    }

    38%, 100% {
        transform: translate(-50%, -50%) scale(2.1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav .logo-img,
    .nav .nav-logo::before,
    .nav .nav-logo::after {
        animation: none;
    }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

    .nav-links a {
        color: var(--text-muted);
        font-size: 14px;
        font-weight: 500;
        transition: color var(--transition);
    }

        .nav-links a:hover {
            color: var(--text);
        }

.nav-cta {
    padding: 8px 18px;
    border-radius: 6px;
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

    .nav-hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: all var(--transition);
    }

/* === HERO === */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding: 120px 60px 80px;
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
}

.hero-grid-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(30,144,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(30,144,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(30,144,255,0.3);
    background: rgba(30,144,255,0.08);
    font-size: 13px;
    color: var(--accent2);
    font-weight: 500;
    margin-bottom: 24px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(46,213,115,0.6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(46,213,115,0);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--text);
}

    .hero-title em {
        font-style: normal;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* === LANDINGSPAGINA'S === */
a.nav-logo {
    color: inherit;
    text-decoration: none;
}

.landing {
    padding: 120px 0 80px;
}

.landing-container {
    max-width: 880px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--text-muted);
}

    .breadcrumbs li + li::before {
        content: "›";
        margin-right: 6px;
    }

    .breadcrumbs a {
        color: var(--light-blue);
        text-decoration: none;
    }

.landing-head h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.landing-intro {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
}

.landing-updated {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.landing-table {
    margin: 32px 0;
}

.landing-section {
    margin-top: 40px;
}

    .landing-section h2,
    .landing-faq h2,
    .landing-cta h2,
    .landing-related h2 {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .landing-section p {
        font-size: 16px;
        line-height: 1.75;
        color: var(--text-muted);
    }

    .landing-section strong,
    .landing-example strong,
    .landing-intro strong {
        color: var(--text);
    }

.landing-example {
    margin-top: 40px;
    padding: 18px 20px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface2);
}

    .landing-example p {
        margin: 6px 0 0;
        line-height: 1.7;
        color: var(--text-muted);
    }

.landing-faq {
    margin-top: 56px;
}

    .landing-faq .faq-grid {
        grid-template-columns: 1fr;
    }

.landing-cta {
    margin-top: 56px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
}

    .landing-cta p {
        margin-bottom: 20px;
        color: var(--text-muted);
    }

.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.landing-related {
    margin-top: 48px;
}

    .landing-related ul {
        display: grid;
        gap: 8px;
        padding: 0;
        list-style: none;
    }

    .landing-related a,
    .faq-more a {
        color: var(--light-blue);
    }

.feature-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--light-blue);
    text-decoration: none;
}

.faq-more {
    margin-top: 8px;
    font-size: 14px;
}

/* === PUBLIEKE PAGINA'S: BREDER OP GROTE SCHERMEN ===
   De homepage (herkenbaar aan .hero) gebruikt tot 1400 px breedte in plaats van 1200 px, met bredere tekstkolommen,
   zodat teksten minder vaak afbreken en brede schermen beter gevuld worden. Dashboard en Administratie houden hun breedte. */
:root {
    --max-w-public: 1400px;
}

body:has(.hero) .nav-inner,
body:has(.hero) .container,
.hero {
    max-width: var(--max-w-public);
}

.hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 72px;
}

    .hero .hero-sub {
        max-width: 640px;
    }

    .hero .dashboard-mock {
        max-width: 540px;
    }

body:has(.hero) .section-header p {
    max-width: 760px;
}

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

/* === HOMEPAGE: PARTNER LINKSECURE === */
/* Kaart in de huisstijl van LinkSecure: Power Grey (#3D3D3B) met Bright Orange (#F8B133) als accent */
.partner {
    --ls-grey: #3D3D3B;
    --ls-orange: #F8B133;
    padding: 48px 0;
    border-top: 1px solid var(--border);
}

/* Ingeklapt: één balk "Heb je ondersteuning bij het beheer nodig?"; open: de volledige sectie */
.partner-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    border-radius: 16px;
    /* Blauw zoals de rest van de site; het LinkSecure-oranje blijft als accent (beeldmerk en plusje) */
    border: 1px solid rgba(30,144,255,0.35);
    background: linear-gradient(110deg, rgba(30,144,255,0.14), rgba(13,21,32,0.92) 55%, rgba(30,144,255,0.08));
    box-shadow: 0 20px 50px -30px rgba(30,144,255,0.6);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

    .partner-toggle::-webkit-details-marker {
        display: none;
    }

    .partner-toggle:hover,
    .partner-toggle:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(30,144,255,0.2), 0 20px 50px -30px rgba(30,144,255,0.7);
    }

    .partner-toggle img {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

.partner-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

    .partner-toggle-text strong {
        font-family: var(--font-display);
        font-size: 19px;
        color: var(--text);
    }

    .partner-toggle-text span {
        font-size: 14px;
        color: var(--text-muted);
    }

/* Plus die bij openklappen een min wordt */
.partner-toggle-icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ls-orange);
}

    .partner-toggle-icon::before,
    .partner-toggle-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        border-radius: 2px;
        background: var(--ls-grey);
        transform: translate(-50%, -50%);
        transition: transform var(--transition);
    }

    .partner-toggle-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

.partner-fold[open] .partner-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.partner-fold[open] .partner-inner {
    animation: partnerOpen 0.35s ease;
}

@keyframes partnerOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.partner-inner {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    align-items: center;
    padding-top: 52px;
}

.partner-text h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    margin: 12px 0 18px;
}

    .partner-text h2 em {
        font-style: normal;
        color: var(--ls-orange);
    }

.partner-intro {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 640px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    margin: 34px 0;
}

.partner-item {
    display: flex;
    gap: 14px;
}

.partner-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(248,177,51,0.12);
    border: 1px solid rgba(248,177,51,0.3);
    font-size: 20px;
}

.partner-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.partner-item p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

.partner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.partner-btn {
    background: var(--ls-orange);
    color: var(--ls-grey);
    font-weight: 700;
    border: none;
}

    .partner-btn:hover {
        background: #ffc04d;
        color: var(--ls-grey);
        transform: translateY(-1px);
    }

.partner-link {
    color: var(--light-blue);
    font-size: 15px;
    font-weight: 600;
}

/* Kaart met logo, slogan en de vier diensten */
.partner-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 40px 36px 34px;
    border-radius: 20px;
    background: linear-gradient(160deg, #4a4a47 0%, var(--ls-grey) 55%, #2e2e2c 100%);
    border: 1px solid rgba(248,177,51,0.35);
    box-shadow: 0 30px 80px -30px rgba(248,177,51,0.35), 0 20px 60px rgba(0,0,0,0.45);
    color: #fff;
    transition: transform var(--transition), box-shadow var(--transition);
}

    .partner-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 36px 90px -30px rgba(248,177,51,0.5), 0 20px 60px rgba(0,0,0,0.45);
    }

/* Groot beeldmerk als achtergrondmotief rechtsonder */
.partner-mark {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 300px;
    height: auto;
    opacity: 0.16;
    pointer-events: none;
}

.partner-logo {
    position: relative;
    display: block;
    width: min(300px, 80%);
    height: auto;
}

.partner-kicker {
    position: relative;
    display: block;
    margin-top: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ls-orange);
}

.partner-quote {
    position: relative;
    margin: 10px 0 22px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
}

.partner-points {
    position: relative;
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

    .partner-points li {
        position: relative;
        padding-left: 28px;
        font-size: 15px;
        color: rgba(255,255,255,0.88);
    }

        .partner-points li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            display: grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--ls-orange);
            color: var(--ls-grey);
            font-size: 11px;
            font-weight: 800;
        }

.partner-url {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: var(--ls-orange);
}

@media (max-width: 1024px) {
    .partner-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@media (max-width: 640px) {
    .partner {
        padding: 32px 0;
    }

    .partner-toggle {
        padding: 14px 16px;
        gap: 12px;
    }

        .partner-toggle-text span {
            display: none;
        }

    .partner-grid {
        grid-template-columns: 1fr;
    }

    .partner-card {
        padding: 32px 24px 28px;
    }
}

/* === HOMEPAGE: SCHERMAFBEELDINGEN === */
.showcase {
    padding: 90px 0;
    border-top: 1px solid var(--border);
}

    .showcase .section-header {
        margin-bottom: 40px;
    }

.showcase-shot {
    margin: 0;
}

.showcase-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(30,144,255,0.08);
}

    .showcase-shot img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Laadscherm-animatie: laag op schermformaat, door site.js geschaald naar de breedte van de afbeelding */
.showcase-stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: scale(var(--stage-scale, 1));
    pointer-events: none;
}

    /* Zelfde plek als de kaart op het echte laadscherm (1440 px breed) */
    .showcase-stage .loader-card {
        position: absolute;
        left: 410px;
        top: 318px;
        width: 620px;
    }

    .showcase-shot figcaption {
        margin-top: 12px;
        text-align: center;
        font-size: 13px;
        color: var(--text-muted);
    }

@media (max-width: 768px) {
    .showcase {
        padding: 60px 0;
    }
}

/* Hero: voorbeeld van de tijdlijn */
.mock-tl {
    margin: 0;
    padding: 14px 16px 6px;
    list-style: none;
}

.mock-tl-row {
    display: grid;
    grid-template-columns: 40px 10px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

    .mock-tl-row:last-child {
        border-bottom: none;
    }

.mock-tl-time {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.mock-tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mock-tl-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mock-tl-source {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mock-tl-text {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-ai {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 16px 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--surface2);
    font-size: 12px;
}

.mock-ai-label {
    font-weight: 700;
    color: var(--light-blue);
}

.mock-ai-status {
    color: var(--warning);
    font-weight: 600;
}

/* Functieblok dat alleen in bepaalde bundels zit */
.feature-tier {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 8px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--light-blue);
}

/* Hero: kernzin onder de kop en de slotregel onder de uitleg */
.hero-lead {
    margin: -8px 0 18px;
    font-family: var(--font-display);
    font-size: clamp(19px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.hero-tagline {
    margin: -12px 0 24px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--light-blue);
}

/* Licentie-eis direct onder de intro (SEO.md: geschiktheid zichtbaar in de hero) */
.hero-license {
    margin: -12px 0 28px;
    font-size: 14px;
    color: var(--text-muted);
}

    .hero-license strong {
        color: var(--text);
    }

    .hero-license a {
        color: var(--light-blue);
        white-space: nowrap;
    }

/* Eén regel onder de bundels: bedragen per maand, facturatie per jaar */
.pricing-notes p.pricing-billing {
    color: var(--light-blue);
    font-weight: 600;
}

.pricing-monthly {
    margin: -6px 0 14px;
    font-size: 13px;
    color: var(--text-muted);
}

.hero-sub {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 36px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
}

.stat {
    text-align: center;
    padding: 0 28px;
}

    .stat:first-child {
        padding-left: 0;
    }

.stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--accent2);
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* Dashboard Mock */
.hero-visual {
    display: flex;
    justify-content: flex-end;
}

.dashboard-mock {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border), 0 0 60px rgba(30,144,255,0.08);
    animation: floatMock 6s ease-in-out infinite;
}

@keyframes floatMock {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.dash-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

    .dot.red {
        background: var(--danger);
    }

    .dot.amber {
        background: var(--warning);
    }

    .dot.green {
        background: var(--success);
    }

    /* Homepage: één bolletje dat elke seconde van kleur wisselt, als een live status */
    .dot.dot-cycle {
        color: var(--success);
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
        animation: dotCycle 5s step-end infinite;
    }

@keyframes dotCycle {
    0% { color: var(--success); }
    20% { color: var(--warning); }
    40% { color: var(--accent); }
    60% { color: var(--danger); }
    80% { color: #a55eea; }
}

@media (prefers-reduced-motion: reduce) {
    .dot.dot-cycle {
        animation: none;
    }
}

.dash-title {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 600;
}

.dash-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-metric {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    position: relative;
}

    .dash-metric.safe {
        background: rgba(46,213,115,0.06);
        border-color: rgba(46,213,115,0.15);
    }

    .dash-metric.warning {
        background: rgba(245,166,35,0.08);
        border-color: rgba(245,166,35,0.2);
    }

    .dash-metric.alert {
        background: rgba(255,71,87,0.08);
        border-color: rgba(255,71,87,0.2);
    }

.metric-icon {
    font-size: 16px;
    width: 28px;
    text-align: center;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
}

.metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-display);
}

.metric-bar {
    grid-column: 1 / -1;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-top: 4px;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-radius: 2px;
}

/* === SECTION COMMON === */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 12px;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}

    .section-header h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.section-header p {
    color: var(--text-muted);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto;
}

/* === FEATURES === */
.features {
    padding: 100px 0;
    border-top: 1px solid var(--border);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: all var(--transition);
}

    .feature-card:hover {
        border-color: rgba(30,144,255,0.3);
        background: var(--surface2);
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    }

.feature-card-highlight {
    border-color: rgba(30,144,255,0.3);
    background: linear-gradient(135deg, rgba(30,144,255,0.08), rgba(0,212,255,0.04));
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* === WHY === */
.why {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(30,144,255,0.04) 50%, var(--bg) 100%);
    border-top: 1px solid var(--border);
}

.why-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.why-text .section-label {
    display: block;
    margin-bottom: 12px;
}

.why-text h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

.why-list {
    list-style: none;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .why-list li {
        padding: 14px 18px;
        background: rgba(255,71,87,0.06);
        border: 1px solid rgba(255,71,87,0.15);
        border-radius: var(--radius-sm);
        font-size: 15px;
        color: var(--text-muted);
    }

        .why-list li strong {
            color: var(--text);
        }

.why-text p {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 16px;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tl-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.tl-bad {
    background: rgba(255,71,87,0.06);
    border-color: rgba(255,71,87,0.2);
}

.tl-good {
    background: rgba(46,213,115,0.06);
    border-color: rgba(46,213,115,0.2);
}

.tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.tl-bad .tl-dot {
    background: var(--danger);
    box-shadow: 0 0 10px rgba(255,71,87,0.5);
}

.tl-good .tl-dot {
    background: var(--success);
    box-shadow: 0 0 10px rgba(46,213,115,0.5);
}

.tl-content strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 6px;
}

.tl-content p {
    font-size: 14px;
    color: var(--text-muted);
}

/* === DOELGROEP === */
.doelgroep {
    padding: 100px 0;
    border-top: 1px solid var(--border);
}

.dg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.dg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    transition: all var(--transition);
}

    .dg-card:hover {
        border-color: rgba(30,144,255,0.3);
        transform: translateY(-4px);
    }

.dg-icon {
    font-size: 32px;
    margin-bottom: 14px;
    display: block;
}

.dg-card h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.dg-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* === PRICING === */
.pricing {
    padding: 100px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.pricing-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.pricing-card-featured {
    border-color: var(--accent);
    background: linear-gradient(160deg, rgba(30,144,255,0.1), rgba(0,212,255,0.05));
    box-shadow: 0 0 40px rgba(30,144,255,0.15);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
    font-family: var(--font-display);
}

.pricing-tier {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.pricing-users {
    font-size: 14px;
    color: var(--text-muted);
}

.pricing-price {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

    .pricing-price span {
        font-size: 16px;
        font-weight: 400;
        color: var(--text-muted);
    }

.pricing-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

    .pricing-features li {
        font-size: 14px;
        color: var(--text-muted);
    }

        .pricing-features li:first-child {
            color: var(--text);
        }

.pricing-notes {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pricing-notes p {
        font-size: 13px;
        color: var(--text-muted);
    }

/* === FAQ === */
.faq {
    padding: 100px 0;
    border-top: 1px solid var(--border);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-q {
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background var(--transition);
}

    .faq-q::after {
        content: '+';
        font-size: 20px;
        color: var(--accent);
        flex-shrink: 0;
        transition: transform var(--transition);
    }

    .faq-q[aria-expanded="true"]::after {
        transform: rotate(45deg);
    }

    .faq-q:hover {
        background: rgba(255,255,255,0.03);
    }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 24px;
}

    /* Ruim genoeg voor de langste antwoorden (lijst met logboeken), ook op een smal scherm */
    .faq-a.open {
        max-height: 1200px;
        padding: 0 24px 20px;
    }

    .faq-a p {
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.7;
    }

/* === CONTACT === */
.contact {
    padding: 100px 0;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}

.contact-text .section-label {
    display: block;
    margin-bottom: 12px;
}

.contact-text h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

    .contact-text h2 em {
        font-style: normal;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.contact-text > p {
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.7;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
}

    .contact-detail a {
        color: var(--text-muted);
    }

        .contact-detail a:hover {
            color: var(--accent2);
        }

.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 12px 16px;
        color: var(--text);
        font-family: var(--font-body);
        font-size: 15px;
        transition: border-color var(--transition);
        resize: vertical;
    }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--text-muted);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .form-group select option {
            background: var(--bg);
        }

.form-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Form feedback */
.form-success {
    display: none;
    text-align: center;
    padding: 24px;
    color: var(--success);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

/* === FOOTER === */
.footer {
    padding: 60px 0 40px;
    border-top: 1px solid var(--border);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-brand .nav-logo {
    margin-bottom: 12px;
}

.footer-brand p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-links a {
        font-size: 13px;
        color: var(--text-muted);
    }

        .footer-links a:hover {
            color: var(--accent2);
        }

/* Landingspagina's verdeeld over twee kolommen */
.footer-links-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 32px;
    align-content: start;
}

/* Onderbalk: KvK, btw en copyright gecentreerd */
.footer-copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 24px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
    text-align: center;
}

    .footer-copy a {
        color: var(--text-muted);
    }

        .footer-copy a:hover {
            color: var(--accent2);
        }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 120px 32px 80px;
    }

    .hero-visual {
        display: none;
    }

    .why-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links-pages {
        justify-items: center;
    }

    .footer-brand .nav-logo {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(7,12,20,0.98);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        padding: 24px;
        gap: 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .dg-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .stat-divider {
        display: none;
    }

    .hero {
        padding: 100px 24px 60px;
    }
}

/* === ANIMATIONS === */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* === DOWNLOAD SECTION === */
.download-section {
    padding: 80px 0;
    border-top: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(30,144,255,0.06) 0%, rgba(0,212,255,0.03) 100%);
}

.download-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    background: var(--surface);
    border: 1px solid rgba(30,144,255,0.3);
    border-radius: var(--radius);
    padding: 48px;
    box-shadow: 0 0 60px rgba(30,144,255,0.1);
}

.download-icon {
    font-size: 56px;
    line-height: 1;
}

.download-text h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
}

.download-text p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 16px;
    max-width: 500px;
}

.download-meta {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

    .download-meta li {
        font-size: 13px;
        color: var(--text-muted);
    }

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 36px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(30,144,255,0.4);
    transition: all var(--transition);
}

    .btn-download:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 48px rgba(30,144,255,0.55);
        color: #fff;
    }

    .btn-download:active {
        transform: translateY(0);
    }

.btn-download-icon {
    font-size: 22px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

@media (max-width: 900px) {
    .download-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
        padding: 36px 24px;
    }

    .download-meta {
        justify-content: center;
    }

    .btn-download {
        width: 100%;
        justify-content: center;
    }
}

/* === LOGIN / ENTRA ID === */
/* Microsoft-aanmeldknop (donkere variant volgens de Microsoft-richtlijnen) */
.nav-links a.nav-ms-login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    background: #2f2f2f;
    color: #fff;
    font-family: 'Segoe UI', var(--font-body);
    font-weight: 600;
    white-space: nowrap;
}

    .nav-links a.nav-ms-login:hover {
        background: #3b3b3b;
        color: #fff;
    }

.nav-ms-login .ms-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-microsoft .ms-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#koppelen {
    border-bottom: none;
}

.notice {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.notice-success {
    border-color: rgba(46,213,115,0.4);
    color: var(--success);
}

.notice-warning {
    border-color: rgba(245,166,35,0.4);
    color: var(--warning);
}

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

/* === DASHBOARD === */
.dashboard {
    padding: 120px 0 80px;
    min-height: 100vh;
}

    .dashboard .nav-logo {
        text-decoration: none;
    }

.nav-user {
    color: var(--text-muted);
    font-size: 14px;
}

/* Dashboard en Administratie: 98% van de schermbreedte (homepage houdt de vaste --max-w) */
.nav-app .nav-inner,
.dashboard .container {
    max-width: max(var(--max-w), 98vw);
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

    .dash-header h1 {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 800;
        margin-top: 8px;
    }

.dash-tenant-id {
    color: var(--text-muted);
    font-size: 13px;
    font-family: ui-monospace, monospace;
}

/* Uitleg onder de titel van de Timeline (gewone tekst, geen monospace zoals een tenant-ID) */
.timeline-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 15px;
}

.dash-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-kpi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.dash-kpi-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
}

    .dash-kpi-value small {
        font-size: 15px;
        color: var(--text-muted);
        font-weight: 500;
    }

.consent-card {
    background: var(--surface);
    border: 1px solid rgba(30,144,255,0.3);
    border-radius: var(--radius);
    padding: 36px;
    max-width: 760px;
    box-shadow: 0 0 60px rgba(30,144,255,0.1);
}

    .consent-card h2 {
        font-family: var(--font-display);
        font-size: 24px;
        margin-bottom: 12px;
    }

    .consent-card p {
        color: var(--text-muted);
        margin-bottom: 16px;
    }

.consent-perms {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

    .consent-perms li {
        font-family: ui-monospace, monospace;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 6px;
        background: var(--surface2);
        border: 1px solid var(--border);
    }

    .consent-perms small {
        color: var(--text-muted);
    }

.consent-hint {
    font-size: 14px;
}

/* Tabbladen als tegels: aantal groot, naam eronder; past zich aan de breedte aan zonder scrollbalk */
.dash-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

/* Breed scherm: alle tegels op één rij, even breed (maximaal 220px, zodat weinig tegels niet uitrekken) */
@media (min-width: 1100px) {
    .dash-tabs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 220px);
    }
}

.dash-tab {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 16px 14px;
    text-align: left;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
    backdrop-filter: blur(8px);
    color: var(--text-muted);
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

    /* Verlooplijn bovenaan, zichtbaar bij hover en actief */
    .dash-tab::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), var(--accent2));
        opacity: 0;
        transition: opacity var(--transition);
    }

    .dash-tab:hover {
        transform: translateY(-2px);
        border-color: rgba(142,203,255,0.3);
        color: var(--text);
    }

        .dash-tab:hover::before {
            opacity: 0.5;
        }

    .dash-tab:focus-visible {
        outline: 2px solid var(--light-blue);
        outline-offset: 2px;
    }

    .dash-tab.active {
        color: var(--text);
        border-color: rgba(30,144,255,0.55);
        background: linear-gradient(160deg, rgba(30,144,255,0.2), rgba(0,212,255,0.04));
        box-shadow: 0 10px 30px -12px var(--accent-glow), inset 0 0 0 1px rgba(142,203,255,0.12);
    }

        .dash-tab.active::before {
            opacity: 1;
        }

.dash-tab-count {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.dash-tab.active .dash-tab-count {
    background: linear-gradient(90deg, #fff, var(--light-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dash-tab.is-empty .dash-tab-count {
    color: var(--text-muted);
}

.dash-tab.has-error .dash-tab-count {
    color: var(--warning);
}

.dash-tab-title {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .dash-tabs {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .dash-tab-count {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-tab:hover {
        transform: none;
    }
}

.dash-panel {
    display: none;
}

    .dash-panel.active {
        display: block;
    }

.dash-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .dash-panel-head p {
        color: var(--text-muted);
        font-size: 14px;
    }

.dash-filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 8px 12px;
    font-size: 14px;
    min-width: 220px;
}

    .dash-filter:focus {
        outline: none;
        border-color: var(--accent);
    }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .data-table th {
        text-align: left;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
        white-space: nowrap;
    }

    .data-table td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover {
        background: rgba(255,255,255,0.02);
    }

    .data-table .nowrap {
        white-space: nowrap;
    }

.dash-footnote {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 10px;
}

.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface2);
    color: var(--text-muted);
    text-transform: capitalize;
}

.badge-high {
    background: rgba(255,71,87,0.15);
    color: var(--danger);
}

.badge-medium {
    background: rgba(245,166,35,0.15);
    color: var(--warning);
}

.badge-low {
    background: rgba(30,144,255,0.15);
    color: var(--accent);
}

.badge-informational, .badge-none, .badge-ja {
    background: rgba(46,213,115,0.12);
    color: var(--success);
}

.badge-nee {
    background: rgba(255,71,87,0.15);
    color: var(--danger);
}

/* Conditional Access-resultaat: omrande ballon */
.badge-ca-success, .badge-ca-notapplied, .badge-ca-failure {
    background: transparent;
    border: 1px solid currentColor;
    padding: 1px 7px;
    text-transform: none;
}

.badge-ca-success {
    color: var(--success);
}

.badge-ca-notapplied {
    color: var(--warning);
}

.badge-ca-failure {
    color: var(--danger);
}

@media (max-width: 768px) {
    .dashboard {
        padding-top: 96px;
    }

    .consent-card {
        padding: 24px;
    }

    .dash-filter {
        min-width: 0;
        width: 100%;
    }
}

/* === ADMINISTRATIE === */
.nav-links a.nav-admin {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 600;
}

    .nav-links a.nav-admin:hover {
        background: var(--accent-glow);
        color: var(--text);
    }

.admin-table td {
    vertical-align: middle;
}

.admin-table input:not([type="checkbox"]),
.admin-table select {
    width: 100%;
    min-width: 140px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font: inherit;
}

    .admin-table input:focus,
    .admin-table select:focus {
        outline: none;
        border-color: var(--accent);
    }

.admin-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

    /* Het vinkje is verborgen maar blijft bedienbaar met toetsenbord; de badge toont de stand */
    .admin-check input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
    }

    .admin-check input:checked ~ .badge-nee,
    .admin-check input:not(:checked) ~ .badge-ja {
        display: none;
    }

    .admin-check input:focus-visible ~ .badge {
        outline: 2px solid var(--light-blue);
        outline-offset: 2px;
    }

    .admin-check .badge:hover {
        filter: brightness(1.25);
    }

/* Tenantnaam en tenant-ID alleen met de schakelaar Details */
.admin-table:not(.show-details) .col-detail {
    display: none;
}

.row-inactive td {
    opacity: 0.6;
}

.btn-small {
    padding: 6px 14px;
    font-size: 13px;
}

.data-table .mono {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
}

.admin-agent {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

/* === VERSIE EN GEBRUIKER (NAV) === */
.nav-version {
    color: var(--light-blue);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Versienummer direct naast het logo */
.nav-logo .nav-version {
    margin-left: 6px;
    align-self: flex-end;
    padding-bottom: 2px;
}

/* Taalkeuze met vlaggetjes: de actieve taal heeft een blauwe rand, de andere is gedimd */
.nav-lang a .flag {
    display: block;
    width: 22px;
    height: 15px;
    border-radius: 2px;
}

.nav-links .nav-lang a,
.nav-app .nav-lang a {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px !important;
    opacity: 0.45;
    transition: opacity var(--transition);
}

    .nav-links .nav-lang a:hover,
    .nav-links .nav-lang a.active,
    .nav-app .nav-lang a.active {
        opacity: 1;
    }

    .nav-links .nav-lang a.active,
    .nav-app .nav-lang a.active {
        background: rgba(30,144,255,0.25) !important;
        box-shadow: inset 0 0 0 1px var(--accent);
    }

/* Thuisland: label vóór de keuzelijst */
.nav-country-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

/* E-mailadres: zelfde vorm als de knop Uitloggen (.nav-cta), maar zwart met blauwe rand.
   Padding 1px kleiner om de rand te compenseren, zodat beide knoppen even hoog zijn. */
.nav-user-button {
    background: #000;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 7px 17px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: box-shadow var(--transition), color var(--transition);
}

    .nav-user-button:hover,
    .nav-user-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(142,203,255,0.25);
        color: var(--light-blue);
    }

.claims-dialog {
    margin: auto; /* centreren; de reset bovenin zet margin op 0 */
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

    .claims-dialog::backdrop {
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(2px);
    }

.claims-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}

    .claims-head h2 {
        font-family: var(--font-display);
        font-size: 18px;
    }

.claims-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .claims-close:hover {
        color: var(--text);
    }

.claims-body {
    padding: 8px 22px 22px;
    overflow: auto;
    max-height: calc(100vh - 160px);
}

    .claims-body .data-table td:first-child {
        white-space: nowrap;
        color: var(--text-muted);
    }

    .claims-body .data-table td:last-child {
        word-break: break-all;
    }

.claims-type {
    display: block;
    font-size: 11px;
    opacity: 0.7;
}

/* === GASTEN-SCHAKELAAR EN ACTIES === */
.dash-panel-tools {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .dash-toggle input {
        appearance: none;
        width: 34px;
        height: 18px;
        border-radius: 9px;
        background: var(--surface2);
        border: 1px solid var(--border);
        position: relative;
        cursor: pointer;
        transition: background var(--transition);
    }

        .dash-toggle input::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--text-muted);
            transition: transform var(--transition), background var(--transition);
        }

        .dash-toggle input:checked {
            background: var(--accent);
        }

            .dash-toggle input:checked::after {
                transform: translateX(16px);
                background: #fff;
            }

        .dash-toggle input:focus-visible {
            outline: 2px solid var(--light-blue);
            outline-offset: 2px;
        }

.admin-actions {
    display: flex;
    gap: 8px;
}


/* === KLIKBARE SECURE SCORE === */
.dash-kpi-button {
    text-align: left;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

    .dash-kpi-button:hover,
    .dash-kpi-button:focus-visible {
        outline: none;
        transform: translateY(-2px);
        border-color: rgba(142,203,255,0.4);
        box-shadow: 0 10px 30px -12px var(--accent-glow);
    }

    .dash-kpi-button .metric-bar {
        display: block;
    }

    .dash-kpi-button .metric-fill {
        display: block;
    }

.dash-kpi-hint {
    font-size: 12px;
    color: var(--light-blue);
    font-weight: 600;
}

/* === BREDE POPUPS (aanbevelingen en details) === */
.wide-dialog {
    width: min(1000px, calc(100vw - 32px));
}

.dialog-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
    word-break: break-word;
}

.dialog-loading {
    padding: 40px 0;
    text-align: center;
    color: var(--text-muted);
}

/* Samenvatting bovenaan de aanbevelingen */
.score-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.score-summary-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
}

.score-summary-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

    .score-summary-value small {
        font-size: 14px;
        color: var(--text-muted);
        font-weight: 500;
    }

.score-gain {
    color: var(--success);
}

.score-summary-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* Categoriefilter */
.score-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.score-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

    .score-chip span {
        font-size: 11px;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--surface2);
    }

    .score-chip:hover {
        color: var(--text);
        border-color: rgba(142,203,255,0.3);
    }

    .score-chip.active {
        color: var(--text);
        border-color: var(--accent);
        background: rgba(30,144,255,0.15);
    }

/* Lijst met aanbevelingen */
.score-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-item details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
    transition: border-color var(--transition), background var(--transition);
}

    .score-item details[open] {
        border-color: rgba(30,144,255,0.45);
        background: rgba(30,144,255,0.06);
    }

.score-item summary {
    display: grid;
    grid-template-columns: 64px 1fr 140px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

    .score-item summary::-webkit-details-marker {
        display: none;
    }

    .score-item summary:hover .score-item-title {
        color: var(--light-blue);
    }

.score-item-gain {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--success);
    text-align: center;
    padding: 6px 0;
    border-radius: var(--radius-sm);
    background: rgba(46,213,115,0.1);
}

.score-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.score-item-title {
    font-weight: 600;
    color: var(--text);
    transition: color var(--transition);
}

.score-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.score-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-muted);
}

.score-item-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

    .score-item-progress .metric-bar,
    .score-item-progress .metric-fill {
        display: block;
    }

    .score-item-progress small {
        color: var(--text-muted);
        font-size: 11px;
    }

.score-item-body {
    padding: 4px 16px 16px 94px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

    .score-item-body h4 {
        color: var(--text);
        font-size: 13px;
        margin-top: 6px;
    }

    .score-item-body .btn {
        align-self: flex-start;
        margin-top: 6px;
    }

.score-remediation {
    white-space: pre-line;
    line-height: 1.6;
}

.score-item-type {
    font-size: 12px;
}

@media (max-width: 768px) {
    .score-item summary {
        grid-template-columns: 56px 1fr;
    }

    .score-item-progress {
        display: none;
    }

    .score-item-body {
        padding-left: 16px;
    }
}

/* === KLIKBARE TABELRIJEN EN DETAIL-POPUP === */
.dash-panel tbody tr[data-index] {
    cursor: pointer;
    transition: background var(--transition);
}

    .dash-panel tbody tr[data-index]:hover,
    .dash-panel tbody tr[data-index]:focus-visible {
        outline: none;
        background: rgba(30,144,255,0.08);
    }

.detail-tools {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}

.dash-filter-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

    .dash-filter-input:focus {
        outline: none;
        border-color: var(--accent);
    }

.detail-table th {
    width: 34%;
    text-transform: none;
    letter-spacing: normal;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    font-weight: 500;
    white-space: normal;
    word-break: break-all;
    vertical-align: top;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.detail-table td {
    word-break: break-word;
    white-space: pre-wrap;
}

/* Detail-popup: kopieerknop naast sluiten */
.claims-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Detail-popup: ingedeelde weergave (sign-ins) */
.detail-view {
    display: grid;
    gap: 14px;
    margin: 14px 0 10px;
}

.detail-result {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    background: var(--surface);
}

    /* Sign-ins met een foutcode ≠ 0 (mislukt of onderbroken): amber */
    .detail-result.is-failed,
    .detail-result.is-interrupted {
        border-left-color: var(--warning);
        background: rgba(245,166,35,0.07);
    }

    /* Overige bronnen: rand naar de ernst */
    .detail-result.tone-high {
        border-left-color: var(--danger);
        background: rgba(255,71,87,0.06);
    }

    .detail-result.tone-medium {
        border-left-color: var(--warning);
        background: rgba(245,166,35,0.06);
    }

    .detail-result.tone-low {
        border-left-color: var(--accent);
    }

    .detail-result.tone-neutral {
        border-left-color: var(--light-blue);
    }

.detail-result .detail-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--light-blue);
}

.badge-status {
    background: rgba(142,203,255,0.12);
    color: var(--light-blue);
}

.detail-pre {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.detail-ca-table td {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.detail-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.detail-result-badge {
    font-size: 13px;
    padding: 3px 12px;
}

.detail-result-code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-muted);
}

.detail-result-reason {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.detail-result-extra,
.detail-muted {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-card {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 0;
}

    .detail-card.is-wide {
        grid-column: 1 / -1;
    }

    .detail-card h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--light-blue);
    }

        .detail-card h3 .badge {
            letter-spacing: normal;
        }

.detail-fields {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
    gap: 6px 16px;
    font-size: 13px;
}

    .detail-fields dt {
        color: var(--text-muted);
    }

    .detail-fields dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.detail-ca-table {
    font-size: 13px;
}

    .detail-ca-table td {
        vertical-align: top;
    }

    .detail-ca-table .detail-ca-name {
        font-weight: 600;
    }

    .detail-ca-table tr.is-dim td {
        color: var(--text-muted);
    }

    .detail-ca-table tr.is-dim .detail-ca-name {
        font-weight: 400;
    }

/* Alleen-rapport-beleid: gestippelde rand */
.badge.is-report {
    border-style: dashed;
}

/* Alle velden: ingeklapt onder een ingedeelde weergave */
.detail-all > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--light-blue);
}

.detail-all-count {
    color: var(--text-muted);
    font-weight: 400;
}

.detail-all.is-plain > summary {
    display: none;
}

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

    .detail-fields {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

        .detail-fields dd {
            margin-bottom: 6px;
        }
}

/* === ICOONKNOPPEN (Administratie) === */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}

    .icon-btn svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

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

.icon-btn-save:hover {
    color: var(--light-blue);
    border-color: var(--accent);
    background: rgba(30,144,255,0.12);
}

.icon-btn-delete:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(255,71,87,0.12);
}

/* Donkere scrollbalk voor brede tabellen en popups i.p.v. de witte standaardbalk */
.table-wrap,
.claims-body {
    scrollbar-width: thin;
    scrollbar-color: var(--surface2) transparent;
}

    .table-wrap::-webkit-scrollbar,
    .claims-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-wrap::-webkit-scrollbar-track,
    .claims-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-wrap::-webkit-scrollbar-thumb,
    .claims-body::-webkit-scrollbar-thumb {
        background: var(--surface2);
        border-radius: 4px;
    }

        .table-wrap::-webkit-scrollbar-thumb:hover,
        .claims-body::-webkit-scrollbar-thumb:hover {
            background: rgba(142,203,255,0.3);
        }

/* === COMPACTE POPUPS ===
   Minder witruimte tussen regels in alle popups (claims, Secure Score, details).
   Staat onderaan zodat het de eerdere popup-stijlen overschrijft. */
.claims-dialog {
    line-height: 1.4;
    font-size: 14px;
}

.claims-head {
    padding: 12px 18px;
}

    .claims-head h2 {
        font-size: 16px;
    }

.dialog-subtitle {
    margin-top: 2px;
    font-size: 12px;
}

.claims-body {
    padding: 4px 18px 16px;
}

    .claims-dialog .data-table td,
    .claims-dialog .data-table th {
        padding: 5px 10px;
    }

    .claims-dialog .data-table {
        font-size: 13px;
    }

.claims-type {
    font-size: 10px;
}

.detail-tools {
    margin: 8px 0;
}

.dash-filter-input {
    padding: 6px 10px;
}

/* Secure Score-aanbevelingen */
.score-summary {
    gap: 8px;
    margin: 10px 0 12px;
}

.score-summary-item {
    padding: 8px 12px;
    gap: 4px;
}

.score-summary-value {
    font-size: 20px;
}

.score-filters {
    gap: 6px;
    margin-bottom: 10px;
}

.score-chip {
    padding: 4px 10px;
    font-size: 12px;
}

.score-list {
    gap: 5px;
}

.score-item summary {
    padding: 7px 12px;
    gap: 12px;
    grid-template-columns: 56px 1fr 130px;
}

.score-item-gain {
    font-size: 15px;
    padding: 3px 0;
}

.score-item-main {
    gap: 3px;
}

.score-item-title {
    font-size: 14px;
}

.score-tag {
    padding: 1px 7px;
}

.score-item-body {
    padding: 2px 12px 12px 80px;
    gap: 4px;
    font-size: 13px;
}

    .score-item-body h4 {
        margin-top: 4px;
        font-size: 12.5px;
    }

.score-remediation {
    line-height: 1.45;
}

@media (max-width: 768px) {
    .score-item summary {
        grid-template-columns: 48px 1fr;
    }

    .score-item-body {
        padding-left: 12px;
    }
}

/* === ACTIVEREN: WIE KRIJGT TOEGANG === */
.access-card {
    position: relative;
    overflow: hidden;
    padding: 28px 30px;
    border-radius: var(--radius);
    border: 1px solid rgba(30,144,255,0.3);
    background: linear-gradient(160deg, rgba(30,144,255,0.1), rgba(255,255,255,0.015) 55%);
    box-shadow: 0 0 60px rgba(30,144,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .access-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, var(--accent), var(--accent2));
    }

    .access-card p {
        color: var(--text-muted);
        font-size: 15px;
        line-height: 1.65;
    }

        .access-card p strong {
            color: var(--text);
        }

.access-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.access-icon {
    font-size: 26px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(30,144,255,0.15);
    flex-shrink: 0;
}

.access-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--light-blue);
}

.access-head h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.access-roles {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .access-roles li {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

.access-role {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(142,203,255,0.35);
    background: rgba(0,0,0,0.35);
    color: var(--text);
}

/* Rolkeuze: Security Reader als aanbevolen eerste keuze */
.access-choice {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 4px 0 14px;
}

    .access-choice li {
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(0,0,0,0.25);
    }

        .access-choice li.is-recommended {
            border-color: rgba(46,213,115,0.55);
            background: rgba(46,213,115,0.07);
            box-shadow: 0 0 0 1px rgba(46,213,115,0.15);
        }

    .access-card .access-choice p {
        margin: 8px 0 0;
        font-size: 13px;
    }

.access-choice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.access-recommended {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--success);
    color: #04121f;
}

.access-howto {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--light-blue);
}

/* Landingspagina: genummerd stappenplan */
.landing-steps {
    margin: 36px 0;
}

.steps-list {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

    .steps-list .step {
        display: flex;
        gap: 16px;
        padding: 18px 20px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--surface);
    }

        .steps-list .step h3 {
            font-size: 17px;
            margin-bottom: 6px;
        }

        .steps-list .step p {
            color: var(--text-muted);
            line-height: 1.6;
        }

.step-nr {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
}

.access-card p.access-note {
    font-size: 13px;
}

.access-tips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
}

    .access-card .access-tips p {
        font-size: 13.5px;
        line-height: 1.5;
    }

.access-teams {
    align-self: flex-start;
    margin-top: 4px;
}

.access-card .form-note {
    text-align: left;
    font-size: 12px;
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* === ACTIVEREN: GRATIS PROBEREN (ballon) === */
.trial-bubble {
    position: relative;
    margin: 4px 0 28px;
    padding: 22px 24px 24px;
    border-radius: 18px;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--accent), var(--accent2), var(--success)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 18px 50px -20px rgba(30,144,255,0.55);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    /* Ballonpunt richting de kop erboven */
    .trial-bubble::before {
        content: "";
        position: absolute;
        top: -9px;
        left: 36px;
        width: 16px;
        height: 16px;
        transform: rotate(45deg);
        background: var(--surface);
        border-top: 1.5px solid var(--accent);
        border-left: 1.5px solid var(--accent);
    }

.trial-badge {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    color: #04121f;
    background: linear-gradient(90deg, var(--accent2), var(--success));
}

.trial-bubble h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.trial-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .trial-steps li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

        .trial-steps li div {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            line-height: 1.45;
            color: var(--text-muted);
        }

        .trial-steps li strong {
            color: var(--text);
            font-size: 15px;
        }

.trial-step-nr {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: var(--light-blue);
    background: rgba(30,144,255,0.15);
    border: 1px solid rgba(142,203,255,0.35);
}

.trial-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid #8c8c8c;
    background: #2f2f2f;
    color: #fff;
    font-family: 'Segoe UI', var(--font-body);
    font-weight: 600;
    font-size: 15px;
    transition: background var(--transition), box-shadow var(--transition);
}

    .trial-cta:hover {
        background: #3b3b3b;
        box-shadow: 0 0 0 3px rgba(142,203,255,0.25);
    }

    .trial-cta .ms-logo {
        width: 18px;
        height: 18px;
    }

/* === LAADSCHERM DASHBOARD === */
.dash-loader {
    display: flex;
    justify-content: center;
    padding: 24px 0 40px;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

    .dash-loader.is-finished {
        opacity: 0;
        transform: translateY(-8px);
    }

.loader-card {
    width: min(620px, 100%);
    padding: 26px 28px;
    border-radius: 18px;
    border: 1px solid rgba(30,144,255,0.3);
    background: linear-gradient(160deg, rgba(30,144,255,0.12), rgba(255,255,255,0.015) 60%);
    box-shadow: 0 20px 60px -25px rgba(30,144,255,0.6);
}

.loader-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Pulserend AlertControl-blokje */
.loader-logo {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(30,144,255,0.15);
    display: grid;
    place-items: center;
}

    .loader-logo span {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        background: var(--accent);
        animation: loaderPulse 1.4s ease-in-out infinite;
    }

    .loader-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        border: 2px solid transparent;
        border-top-color: var(--accent2);
        animation: loaderSpin 1.1s linear infinite;
    }

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(0.85);
        background: var(--accent);
    }

    50% {
        transform: scale(1.1);
        background: var(--light-blue);
    }
}

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

.loader-titles {
    flex: 1;
    min-width: 0;
}

    .loader-titles h2 {
        font-family: var(--font-display);
        font-size: 19px;
        font-weight: 800;
    }

    .loader-titles p {
        color: var(--text-muted);
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.loader-percent {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--light-blue);
    font-variant-numeric: tabular-nums;
}

.loader-bar {
    height: 8px;
    margin: 18px 0 16px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
}

.loader-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width 0.4s ease;
    overflow: hidden;
}

    /* Glans die over de balk loopt */
    .loader-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
        transform: translateX(-100%);
        animation: loaderShine 1.4s ease-in-out infinite;
    }

@keyframes loaderShine {
    to {
        transform: translateX(100%);
    }
}

.loader-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}

    .loader-steps li {
        position: relative;
        padding-left: 24px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-muted);
        transition: color var(--transition);
    }

        /* Statusbolletje: wachten (grijs), bezig (draait), klaar (✓), fout (!) */
        .loader-steps li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 3px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid var(--surface2);
            box-sizing: border-box;
            display: grid;
            place-items: center;
            font-size: 9px;
            font-weight: 800;
            line-height: 1;
        }

        .loader-steps li.is-active {
            color: var(--text);
        }

            .loader-steps li.is-active::before {
                border-color: rgba(142,203,255,0.25);
                border-top-color: var(--light-blue);
                animation: loaderSpin 0.8s linear infinite;
            }

        .loader-steps li.is-done {
            color: var(--text);
        }

            .loader-steps li.is-done::before {
                content: "✓";
                border-color: var(--success);
                background: var(--success);
                color: #04121f;
            }

        .loader-steps li.is-error::before {
            content: "!";
            border-color: var(--warning);
            background: var(--warning);
            color: #04121f;
        }

@media (max-width: 600px) {
    .loader-steps {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader-logo span,
    .loader-logo::after,
    .loader-fill::after,
    .loader-steps li.is-active::before {
        animation: none;
    }
}

/* Tegel die nog laadt */
.dash-tab.is-loading .dash-tab-count {
    color: var(--text-muted);
    animation: tileLoading 1.2s ease-in-out infinite;
}

@keyframes tileLoading {
    50% {
        opacity: 0.35;
    }
}

/* === THUISLAND-KEUZE (NAV) === */
.nav-country {
    appearance: none;
    padding: 7px 28px 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238ecbff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 7px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

    .nav-country:hover,
    .nav-country:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(142,203,255,0.2);
    }

    .nav-country option {
        background: var(--surface);
        color: var(--text);
    }

/* === SIGN-INS: RESULTAAT- EN BUITENLANDFILTER === */
.dash-segment {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.3);
}

    .dash-segment button {
        padding: 5px 12px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
    }

        .dash-segment button:hover {
            color: var(--text);
        }

        .dash-segment button.active {
            background: var(--accent);
            color: #fff;
        }

        .dash-segment button:focus-visible {
            outline: 2px solid var(--light-blue);
            outline-offset: 1px;
        }

.dash-toggle-hint {
    margin-left: 4px;
    font-size: 11px;
    color: var(--warning);
    font-weight: 700;
}

/* Aanmelding uit het buitenland: oranje streep en landcode */
.data-table tbody tr.row-foreign td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.data-table tbody tr.row-foreign {
    background: rgba(245,166,35,0.05);
}

/* === ADMINISTRATIE: TEKSTEN === */
.texts-table textarea {
    width: 100%;
    min-width: 220px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
}

    .texts-table textarea:focus {
        outline: none;
        border-color: var(--accent);
    }

.texts-table .texts-key {
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-all;
    max-width: 200px;
}

.texts-table tr.row-custom td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.badge-empty {
    background: var(--surface2);
    color: var(--text-muted);
}

/* === TAALKEUZE HOMEPAGE (NL/EN) === */
.nav-links .nav-lang {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.3);
}

    .nav-links .nav-lang a {
        padding: 4px 9px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

        .nav-links .nav-lang a.active {
            background: var(--accent);
            color: #fff;
        }

@media (max-width: 768px) {
    .nav-links .nav-lang {
        align-self: center;
    }
}

/* === ADMINISTRATIE: LAADTIJD PER TENANT === */
.data-table td.load-time small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.load-slow,
.load-errors {
    color: var(--warning);
    font-weight: 700;
}

/* === ADMINISTRATIE: TOEGANG PER LOGIN === */
.data-table td.login-access small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text);
}

    .data-table td.login-access small.login-access-detail {
        font-size: 11px;
        color: var(--text-muted);
        max-width: 280px;
        word-break: break-word;
    }

/* === ADMINISTRATIE: OPNIEUW INLEZEN === */
.admin-refresh {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-refresh-time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.icon-btn-refresh:hover {
    color: var(--light-blue);
    border-color: var(--accent);
    background: rgba(30,144,255,0.12);
}

    .icon-btn-refresh:hover svg {
        transform: rotate(90deg);
    }

.icon-btn-refresh svg {
    transition: transform 0.3s ease;
}

/* === DASHBOARD: TIJDSLIDER === */
.dash-period {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
}

.dash-period-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--light-blue);
}

.dash-period-slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(420px, 100%);
}

    .dash-period-slider input[type=range] {
        width: 100%;
        margin: 0;
        accent-color: var(--accent);
        cursor: pointer;
    }

.dash-period-ticks {
    display: flex;
    justify-content: space-between;
}

    .dash-period-ticks button {
        padding: 2px 4px;
        border: none;
        background: none;
        color: var(--text-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: color var(--transition);
    }

        .dash-period-ticks button:hover {
            color: var(--text);
        }

        .dash-period-ticks button.active {
            color: var(--light-blue);
        }

.dash-period-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Tegel: "(max 7 dagen)" klein achter het aantal */
.dash-tab-figure {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.dash-tab-limit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* === DASHBOARD: PAGINA'S (VORIGE / VOLGENDE) === */
.dash-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

    .dash-pager[hidden] {
        display: none;
    }

.pager-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

    .pager-btn:hover:not(:disabled) {
        border-color: var(--accent);
        background: rgba(30,144,255,0.12);
    }

    .pager-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

.pager-info {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* === TAALKEUZE DASHBOARD (zelfde vorm als op de homepage) === */
.nav-app .nav-lang {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.3);
}

    .nav-app .nav-lang a {
        padding: 4px 9px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

        .nav-app .nav-lang a.active {
            background: var(--accent);
            color: #fff;
        }

.data-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* === NAVIGATIE: HUIDIGE PAGINA === */
.nav-links a.nav-admin.is-current {
    background: var(--accent);
    color: #fff;
}

/* === TIMELINE === */
.tl-sources {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
}

.tl-sources-label {
    margin-right: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--light-blue);
}

/* Aan: gekleurde rand, getinte achtergrond en vinkje. Uit: grijs, gestippelde rand, doorgestreept. */
.tl-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

    .tl-source:not(.is-on) .tl-source-title {
        text-decoration: line-through;
    }

    .tl-source.is-on {
        border: 1px solid var(--src);
        background: color-mix(in srgb, var(--src) 16%, transparent);
        color: var(--text);
    }

    .tl-source.is-empty {
        opacity: 0.55;
    }

    .tl-source:focus-visible {
        outline: 2px solid var(--light-blue);
        outline-offset: 2px;
    }

.tl-source-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--src);
    font-size: 11px;
    line-height: 1;
    color: #fff;
}

.tl-source.is-on .tl-source-check {
    background: var(--src);
}

.tl-source-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tl-source.is-loading .tl-source-count {
    animation: tlPulse 1s ease-in-out infinite;
}

.tl-source.has-error .tl-source-count {
    color: var(--warning);
}

@keyframes tlPulse {
    50% { opacity: 0.35; }
}

.tl-reset {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--light-blue);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .tl-reset:hover {
        background: rgba(30,144,255,0.12);
    }

.tl-status {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Verticale lijn met een gekleurde stip per gebeurtenis */
.tl-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
}

    .tl-list::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: linear-gradient(var(--border), transparent);
    }

.tl-day {
    position: relative;
    margin: 18px 0 8px -26px;
    padding-left: 26px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--light-blue);
}

    .tl-day:first-child {
        margin-top: 0;
    }

.tl-item {
    position: relative;
    margin-bottom: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--src);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

    .tl-item::before {
        content: "";
        position: absolute;
        left: -23px;
        top: 14px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--src);
        box-shadow: 0 0 0 3px var(--bg, #070c14);
    }

    .tl-item:hover,
    .tl-item:focus-visible {
        outline: none;
        background: var(--surface2);
        border-color: var(--src);
    }

.tl-item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tl-time {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tl-source-chip {
    padding: 1px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--src) 20%, transparent);
    color: var(--src);
    font-size: 11.5px;
    font-weight: 700;
}

.tl-summary {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.tl-empty {
    padding: 16px;
    color: var(--text-muted);
}

.tl-more-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 24px;
}

/* === ERNSTFILTER === */
.dash-severity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .dash-severity select {
        padding: 6px 10px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

        .dash-severity select:focus-visible {
            outline: 2px solid var(--light-blue);
            outline-offset: 1px;
        }

.tl-severity {
    margin-left: auto;
}

    .tl-severity + .tl-reset {
        margin-left: 0;
    }

.dash-severity-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--warning);
}

/* === LICENTIEMELDING === */
.license-notice {
    margin-bottom: 18px;
    border-left: 4px solid var(--warning);
}

    .license-notice strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .license-notice p {
        margin: 0;
    }

/* === HOMEPAGE: LICENTIE-OPMERKING IN DE PROEFPERIODE === */
.trial-license {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--warning);
    background: rgba(245,166,35,0.08);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

    .trial-license strong {
        color: var(--text);
    }

/* === DASHBOARD: EERSTE PORTIE VAN GROTE TABELLEN === */
.dash-tab.is-partial .dash-tab-count::after {
    content: "+";
    margin-left: 1px;
    opacity: 0.7;
}

.dash-partial-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--light-blue);
}

.dash-partial-spinner {
    width: 12px;
    height: 12px;
    flex: none;
    border: 2px solid rgba(142,203,255,0.3);
    border-top-color: var(--light-blue);
    border-radius: 50%;
    animation: partial-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .dash-partial-spinner {
        animation: none;
    }
}

/* === DASHBOARD: AI-ADVIES === */
.dash-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.dash-ai-icon {
    display: block;
    margin: 4px 0;
    font-size: 26px;
    line-height: 1;
    color: var(--light-blue);
}

.advice-status {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    border-left: 4px solid currentColor;
    background: var(--surface2);
}

    .advice-status strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .advice-status p {
        margin: 0;
        color: var(--text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
    }

.advice-status-red {
    color: var(--danger);
}

.advice-status-orange {
    color: var(--warning);
}

.advice-status-green {
    color: var(--success);
}

.advice-card {
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.advice-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
}

    .advice-card-head h3 {
        margin: 0;
        font-size: 16px;
    }

.advice-card h4,
.advice-block h3 {
    margin: 12px 0 4px;
    font-size: 13px;
    color: var(--light-blue);
}

.advice-card p,
.advice-list,
.advice-block p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.advice-list {
    padding-left: 20px;
}

    .advice-list li + li {
        margin-top: 4px;
    }

.advice-involved {
    margin-top: 10px !important;
    overflow-wrap: anywhere;
}

    .advice-involved strong {
        color: var(--text);
    }

.advice-block {
    margin-bottom: 14px;
}

.advice-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}

.advice-disclaimer {
    flex: 1 1 300px;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Administratie: AI-gebruik deze maand / limiet */
.ai-quota input {
    width: 70px;
    margin-left: 4px;
}

.ai-quota-full {
    color: var(--danger);
    font-weight: 700;
}

/* Administratie → AI-adviezen */
.advice-row {
    cursor: pointer;
}

    .advice-row:hover td {
        background: var(--surface2);
    }

    .advice-row:focus-visible {
        outline: 2px solid var(--light-blue);
        outline-offset: -2px;
    }

.advice-row-empty td {
    color: var(--text-muted);
}

/* Badge met een zin (bv. "Aandacht nodig"): geen hoofdletter per woord */
.badge-plain {
    text-transform: none;
}

/* === DASHBOARD: VERNIEUWEN === */
.dash-refresh {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

    .dash-refresh:hover:not(:disabled) {
        border-color: var(--light-blue);
        color: var(--light-blue);
    }

    .dash-refresh:disabled {
        opacity: 0.5;
        cursor: wait;
    }

    .dash-refresh:focus-visible {
        outline: 2px solid var(--light-blue);
        outline-offset: 2px;
    }

.load-cached {
    margin-left: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* === TENANTLIJST: LAATSTE GEBRUIKER EN DOMEIN === */
.data-table td.last-login small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.data-table td.last-login .badge {
    margin-top: 4px;
    text-transform: none;
    white-space: nowrap;
}

.data-table td.tenant-hint {
    color: var(--text-muted);
}

    .data-table td.tenant-hint small {
        font-size: 11px;
    }

/* === SORTEERBARE KOLOMMEN === */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

    .th-sort::after {
        content: "↕";
        font-size: 11px;
        opacity: 0.35;
    }

    .th-sort:hover {
        color: var(--light-blue);
    }

    .th-sort:focus-visible {
        outline: 2px solid var(--light-blue);
        outline-offset: 2px;
    }

th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort {
    color: var(--light-blue);
}

th[aria-sort="ascending"] .th-sort::after {
    content: "▲";
    opacity: 1;
}

th[aria-sort="descending"] .th-sort::after {
    content: "▼";
    opacity: 1;
}