/* =========================================================================
   FUSE MODERN  —  shared design tokens & components
   Hergebruikt de visuele taal van FuseSuiteOnline/FuseSuite/Pages/Index.razor.css:
   - witte cards op zachte body-achtergrond
   - 1px borders + lichte radius
   - primary blauw als accent
   - typografie met expressive titels en gedempte subtekst
   ========================================================================= */

/* Cross-document view transitions — Chromium-browsers maken een korte
   crossfade tussen pagina's bij een full-page-reload, in plaats van een
   harde knip met een witte tussen-flits. Firefox/Safari negeren dit. */
@view-transition {
    navigation: auto;
}

/* Schilder de root al in de juiste achtergrondkleur, zodat de korte
   browser-tussenstaat tussen pagina-wissels niet wit is. Wordt zowel
   in light- als dark mode door de body-aurora overschilderd. */
html {
    background-color: #9bc2dd;
}

html.fuse-dark {
    background-color: #1b1f24;
}

:root {
    /* Huisstijl-palet (zie ontwerp). Blauw, tekst, lijnen en groen/rood centraal
       hier zodat alles consistent meekleurt (knoppen, vinkjes, chips, accenten). */
    --fuse-primary: #148ADC;
    --fuse-primary-hover: #0f6fb0;
    --fuse-bg: #EAF6FE;
    --fuse-surface: #ffffff;
    --fuse-surface-alt: #f1f8fe;
    --fuse-border: #E2EEF5;
    --fuse-border-strong: #CDDDE8;
    --fuse-text: #1A2E35;
    --fuse-text-heading: #002D36;
    --fuse-muted: #575756;
    --fuse-success: #28C76F;
    --fuse-warning: #F59E0B;
    --fuse-warning-soft: #fff8e1;
    --fuse-warning-border: #f0c674;
    --fuse-danger: #EF4444;
    --fuse-radius: 0.5rem;
    --fuse-radius-sm: 0.35rem;
    --fuse-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --fuse-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Donker thema: overschrijft de hoofdvariabelen wanneer .fuse-dark op de
   root staat. Toggle via fuse-ux.js opgeslagen in localStorage. */
:root.fuse-dark {
    --fuse-primary: #148adb;
    --fuse-primary-hover: #2a9be8;
    --fuse-bg: #1b1f24;
    --fuse-surface: #252a30;
    --fuse-surface-alt: #2c3137;
    --fuse-border: #3a4047;
    --fuse-border-strong: #4a5159;
    --fuse-text: #e6e8eb;
    --fuse-text-heading: #ffffff;
    --fuse-muted: #9aa3ad;
    --fuse-warning-soft: #2f2a17;
    --fuse-warning-border: #67552a;
    --fuse-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --fuse-shadow: 0 4px 12px rgba(0,0,0,.5);
}

/* ---------- auth pages (login / register / forgot) ----------
   Aurora/geometrische achtergrond: deep blauwe gradient + drie geblurde
   gekleurde blobs en een fijn grid-pattern. Geen externe afbeeldingen. */
.fuse-auth-body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(ellipse at top left, #0084d1 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, #00355a 0%, transparent 60%),
                linear-gradient(135deg, #002a47 0%, #005a91 50%, #0077BF 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Cards taller than the viewport: top-align so the user sees the title first
   instead of getting clipped in the middle. */
.fuse-auth-body:has(.fuse-auth-card--wide) {
    align-items: flex-start;
}

    /* Sub-grid pattern voor textuur — heel subtiel */
    .fuse-auth-body::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
    }

    /* Drie grote blurred 'aurora' blobs — geven kleur en diepte */
    .fuse-auth-body::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 15% 25%, rgba(0, 200, 255, 0.35) 0%, transparent 22%),
            radial-gradient(circle at 85% 65%, rgba(0, 119, 191, 0.45) 0%, transparent 30%),
            radial-gradient(circle at 50% 95%, rgba(125, 90, 255, 0.25) 0%, transparent 28%);
        filter: blur(40px);
        pointer-events: none;
    }

.fuse-auth-shell {
    width: 100%;
    max-width: 26rem;
    position: relative;
    z-index: 1;
}

/* Auth shell follows the wide card so the MFA wizard gets meaningful room. */
.fuse-auth-shell:has(.fuse-auth-card--wide) {
    max-width: 48rem;
}

.fuse-auth-card {
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 1rem;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 0 0 1px rgba(255, 255, 255, 0.4);
    padding: 2.25rem 2rem 1.75rem;
    animation: fuse-auth-enter .45s cubic-bezier(.2,.8,.2,1);
}

@keyframes fuse-auth-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fuse-auth-card__head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.fuse-auth-logo {
    height: 28px;
    margin-bottom: 1rem;
}

.fuse-auth-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #003e66;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.fuse-auth-subtitle {
    color: var(--fuse-muted);
    font-size: 0.92rem;
    margin: 0;
}

.fuse-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fuse-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fuse-auth-field__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.fuse-auth-field__input-wrap {
    position: relative;
}

.fuse-auth-field__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fuse-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.fuse-auth-field input[type="text"],
.fuse-auth-field input[type="email"],
.fuse-auth-field input[type="password"] {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.85rem 0.65rem 2.35rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius-sm);
    font-size: 0.95rem;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
    box-sizing: border-box;
}

    .fuse-auth-field input:focus {
        outline: none;
        border-color: var(--fuse-primary);
        box-shadow: 0 0 0 3px rgba(0,119,191,.18);
    }

    .fuse-auth-field input[readonly],
    .fuse-auth-field input.fuse-auth-field__input--readonly {
        background: var(--fuse-surface-alt);
        color: var(--fuse-muted);
        cursor: not-allowed;
    }

    .fuse-auth-field input[readonly]:focus,
    .fuse-auth-field input.fuse-auth-field__input--readonly:focus {
        border-color: var(--fuse-border-strong);
        box-shadow: none;
    }

.fuse-auth-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: #374151;
    cursor: pointer;
    margin: 0;
}

.fuse-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 0.65rem 1rem !important;
    font-size: 0.95rem !important;
    margin-top: 0.5rem;
}

/* Validatie-foutbox — alleen tonen als er daadwerkelijk errors zijn.
   ASP.NET zet 'validation-summary-errors' op asp-validation-summary bij fouten,
   en 'validation-summary-valid' (geen rode bg) als het modelvalide is. */
.fuse-auth-error.validation-summary-errors,
.fuse-auth-fielderror:not(:empty),
.login-error .alert,
.fuse-auth-error .alert,
.login-error .fuse-auth-error {
    background: #fbe7ea;
    color: #a02334;
    border: 1px solid #f3c6cd;
    border-radius: var(--fuse-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    margin: 0;
}

/* Valide state of leeg: geheel verbergen */
.fuse-auth-error.validation-summary-valid,
.fuse-auth-error:empty,
.fuse-auth-fielderror:empty,
.login-error:empty {
    display: none;
}

.fuse-auth-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

    .fuse-auth-links a {
        color: var(--fuse-primary);
        text-decoration: none;
    }

        .fuse-auth-links a:hover {
            text-decoration: underline;
        }

.fuse-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fuse-muted);
    font-size: 0.78rem;
    margin: 1.25rem 0 1rem;
}

    .fuse-auth-divider::before,
    .fuse-auth-divider::after {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background: var(--fuse-border);
    }

.external {
    margin-top: 0.5rem;
}

/* Big rounded icon-cirkel voor confirm/lockout/access-denied schermen */
.fuse-auth-icon-circle {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #eef4fb;
    color: var(--fuse-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border: 2px solid #cfe2f3;
}

    .fuse-auth-icon-circle--success {
        background: #e6f5ee;
        color: #146c43;
        border-color: #b6dfca;
    }

    .fuse-auth-icon-circle--danger {
        background: #fbe7ea;
        color: #a02334;
        border-color: #f3c6cd;
    }

/* Select binnen auth-card (SendCode) */
.fuse-auth-select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius-sm);
    font-size: 0.95rem;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23148ADC' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.8rem;
    padding-right: 2rem;
}

/* ---------- step rows (Authenticator setup, multi-step flows) ---------- */
.fuse-step-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.fuse-step-num {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--fuse-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0, 119, 191, 0.35);
}

.fuse-step-body {
    flex: 1;
    min-width: 0;
}

.fuse-step-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #003e66;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.fuse-step-text {
    color: var(--fuse-muted);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.fuse-auth-key {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    background: #f1f3f5;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    padding: 0.4rem 0.75rem;
    margin: 0.25rem 0 0.8rem;
    color: var(--fuse-text);
    letter-spacing: 0.05em;
    -webkit-user-select: all;
    user-select: all;
}

.fuse-qr-wrap {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    margin-top: 0.5rem;
}

    .fuse-qr-wrap > div {
        display: block;
    }

/* ---------- profile blocks ---------- */
.fuse-profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fuse-profile-head__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003e66;
    line-height: 1.2;
}

.fuse-profile-head__org {
    font-size: 0.85rem;
    color: var(--fuse-muted);
    margin-top: 0.15rem;
}

    .fuse-profile-head__org .fa {
        margin-right: 0.3rem;
    }

.fuse-profile-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 0;
}

    .fuse-profile-row:first-child {
        padding-top: 0.4rem;
    }

    .fuse-profile-row:last-child {
        padding-bottom: 0.4rem;
    }

    .fuse-profile-row + .fuse-profile-row {
        border-top: 1px solid var(--fuse-border);
    }

.fuse-profile-row__main {
    flex: 1 1 14rem;
    min-width: 0;
}

.fuse-profile-row__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--fuse-text);
    line-height: 1.3;
}

.fuse-profile-row__hint {
    font-size: 0.82rem;
    color: var(--fuse-muted);
    margin-top: 0.35rem;
    line-height: 1.4;
}

.fuse-profile-row > .fuse-btn-secondary,
.fuse-profile-row > .fuse-btn-primary,
.fuse-profile-row > .fuse-btn-danger {
    flex-shrink: 0;
}

/* ---------- toasts (rechtsboven, slide-in, auto-dismiss) ---------- */
.fuse-toast-host {
    position: fixed;
    top: 4.5rem;
    right: 1.25rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.fuse-toast {
    pointer-events: auto;
    min-width: 16rem;
    max-width: 22rem;
    background: #fff;
    border: 1px solid var(--fuse-border);
    border-left: 4px solid var(--fuse-primary);
    border-radius: var(--fuse-radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    animation: fuse-toast-in .3s cubic-bezier(.2,.8,.2,1);
}

    .fuse-toast.is-success { border-left-color: var(--fuse-success); }
    .fuse-toast.is-error { border-left-color: var(--fuse-danger); }
    .fuse-toast.is-warning { border-left-color: var(--fuse-warning); }

    .fuse-toast i.fa { line-height: 1.4; flex-shrink: 0; }
    .fuse-toast.is-success i.fa { color: var(--fuse-success); }
    .fuse-toast.is-error i.fa { color: var(--fuse-danger); }
    .fuse-toast.is-warning i.fa { color: #b08900; }
    .fuse-toast.is-info i.fa { color: var(--fuse-primary); }

    .fuse-toast.is-leaving {
        animation: fuse-toast-out .25s ease-in forwards;
    }

.fuse-toast__body { flex: 1; line-height: 1.4; }
.fuse-toast__close {
    background: none;
    border: 0;
    color: var(--fuse-muted);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
}
    .fuse-toast__close:hover { color: var(--fuse-text); }

@keyframes fuse-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fuse-toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

/* ---------- sortable table headers ---------- */
.fuse-table th[data-fuse-sort] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color .12s;
}

    .fuse-table th[data-fuse-sort]:hover {
        color: var(--fuse-primary);
    }

    .fuse-table th[data-fuse-sort]::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.35rem;
        vertical-align: 1px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.25;
    }

    .fuse-table th[data-fuse-sort].is-asc::after {
        border-top: none;
        border-bottom: 5px solid var(--fuse-primary);
        opacity: 1;
    }

    .fuse-table th[data-fuse-sort].is-desc::after {
        border-top: 5px solid var(--fuse-primary);
        border-bottom: none;
        opacity: 1;
    }

/* ---------- avatars met initialen ---------- */
.fuse-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

.fuse-avatar--sm {
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.62rem;
}

/* Acht zachte tints — geselecteerd via hash op naam (zie JS) */
.fuse-avatar[data-c="0"] { background: #4f9cf9; }
.fuse-avatar[data-c="1"] { background: #6c5ce7; }
.fuse-avatar[data-c="2"] { background: #00b894; }
.fuse-avatar[data-c="3"] { background: #e17055; }
.fuse-avatar[data-c="4"] { background: #fdcb6e; color: #5a4a00; }
.fuse-avatar[data-c="5"] { background: #fd79a8; }
.fuse-avatar[data-c="6"] { background: #00cec9; }
.fuse-avatar[data-c="7"] { background: #a29bfe; }

/* gebruiker-cell met avatar links + naam/email rechts */
.fuse-user-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.fuse-user-cell__text {
    display: flex;
    flex-direction: column;
    /* geen min-width:0 → de nowrap gebruikersnaam bepaalt de kolombreedte,
       zodat de tabel bij smalle weergave horizontaal scrollt i.p.v. afbreekt. */
}

/* ---------- sidebar layout (FuseSuite-stijl) ---------- */

/* Wit fuse-logo — zelfde asset als FuseSuite (Logo Wit.png) */
.fuse-brand-logo {
    width: 84px;
    height: auto;
    aspect-ratio: 3.35;
    display: block;
    margin-left: 5px;
}

.fuse-sidebar-toggle {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.05rem;
    padding: 0.35rem 0.6rem;
    margin-right: 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background-color .15s;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

    .fuse-sidebar-toggle:hover {
        background-color: rgba(255, 255, 255, 0.12);
    }

    .fuse-sidebar-toggle:focus,
    .fuse-sidebar-toggle:active,
    .fuse-sidebar-toggle:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.12);
    }

/* Chevron-toggle: pijl-links als de sidebar uitgeklapt is (inklappen),
   pijl-rechts als hij ingeklapt is (uitklappen) — conform de mockup.
   Specificiteit bewust verhoogd (via .fuse-sidebar-toggle) zodat deze regels
   winnen van de algemene .material-symbols-outlined { display:inline-block }
   die verderop in dit bestand staat. */
.fuse-sidebar-toggle .fuse-sidebar-toggle__ico-expand {
    display: none;
}

body.fuse-sidebar-collapsed .fuse-sidebar-toggle .fuse-sidebar-toggle__ico-collapse {
    display: none;
}

body.fuse-sidebar-collapsed .fuse-sidebar-toggle .fuse-sidebar-toggle__ico-expand {
    display: inline-flex;
}

/* Sidebar — fixed onder de topbar, klapt op mobiel uit via .fuse-sidebar-open op body */
:root {
    --fuse-topbar-h: 3rem;
    --fuse-sidebar-w: 15rem;
    --fuse-sidebar-w-narrow: 3.5rem;
}

.fuse-sidebar {
    position: fixed;
    top: var(--fuse-topbar-h);
    left: 0;
    bottom: 0;
    width: var(--fuse-sidebar-w);
    background: var(--fuse-surface);
    border-right: 1px solid var(--fuse-border);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .2s ease, width .2s ease;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.03);
}

.fuse-sidemenu {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    gap: 0.15rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.fuse-sidemenu__divider {
    height: 1px;
    background: var(--fuse-border);
    margin: 0.55rem 0.85rem 0.55rem;
    margin-top: auto; /* duwt profiel + alles erna naar onderkant */
}

.fuse-sidemenu__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--fuse-text) !important;
    text-decoration: none !important;
    border-radius: 0.5rem;
    transition: background-color .12s, color .12s;
    position: relative;
}

    .fuse-sidemenu__item .fa {
        font-size: 1.05rem;
        color: var(--fuse-muted);
        transition: color .12s;
        width: 1.4rem;
        text-align: center;
    }

    /* FuseSuite-stijl SVG-iconen: mask-image zodat ze meekleuren met currentColor */
    .fuse-sidemenu__item .fuse-ic {
        display: inline-block;
        width: 1.4rem;
        height: 1.4rem;
        background-color: var(--fuse-muted);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        transition: background-color .12s;
        flex-shrink: 0;
    }

    .fuse-sidemenu__item:hover .fuse-ic {
        background-color: #148adb;
    }

.fuse-ic--home { -webkit-mask-image: url('/images/icons/home.svg'); mask-image: url('/images/icons/home.svg'); }
.fuse-ic--users { -webkit-mask-image: url('/images/icons/groups.svg'); mask-image: url('/images/icons/groups.svg'); }
.fuse-ic--org { -webkit-mask-image: url('/images/icons/domain.svg'); mask-image: url('/images/icons/domain.svg'); }
.fuse-ic--product { -webkit-mask-image: url('/images/icons/apps.svg'); mask-image: url('/images/icons/apps.svg'); }
.fuse-ic--subscription { -webkit-mask-image: url('/images/icons/docs.svg'); mask-image: url('/images/icons/docs.svg'); }
.fuse-ic--log { -webkit-mask-image: url('/images/icons/clipboard_task.svg'); mask-image: url('/images/icons/clipboard_task.svg'); }
.fuse-ic--database { -webkit-mask-image: url('/images/icons/database.svg'); mask-image: url('/images/icons/database.svg'); }
.fuse-ic--profile { -webkit-mask-image: url('/images/icons/person.svg'); mask-image: url('/images/icons/person.svg'); }

    .fuse-sidemenu__item:hover {
        background-color: var(--fuse-surface-alt);
        color: var(--fuse-primary) !important;
    }

        .fuse-sidemenu__item:hover .fa {
            color: #148adb;
        }

    .fuse-sidemenu__item.is-active {
        background-color: #148adb;
        color: #fff !important;
        font-weight: 500;
    }

        .fuse-sidemenu__item.is-active .fa,
        .fuse-sidemenu__item.is-active .fuse-ic {
            color: #fff;
            background-color: #fff;
        }

        .fuse-sidemenu__item.is-active .fuse-sidemenu__caret {
            opacity: 0.85;
        }

/* Submenu-groep (collapsible via <details>) */
.fuse-sidemenu__group {
    display: flex;
    flex-direction: column;
}

    .fuse-sidemenu__group > summary {
        list-style: none;
        cursor: pointer;
    }

    .fuse-sidemenu__group > summary::-webkit-details-marker {
        display: none;
    }

.fuse-sidemenu__parent {
    display: flex;
    align-items: center;
}

/* Caret aan de LINKERKANT (zoals FuseSuite-tree), draait bij open/dicht */
.fuse-sidemenu__caret {
    font-size: 0.65rem;
    opacity: 0.55;
    width: 0.85rem;
    text-align: center;
    transform: rotate(-90deg);
    transition: transform .15s;
    flex-shrink: 0;
}

.fuse-sidemenu__group[open] > summary .fuse-sidemenu__caret {
    transform: rotate(0deg);
}

/* Onzichtbare placeholder — breedte 0 zodat icons uitlijnen met sectielabels. */
.fuse-sidemenu__caret-placeholder {
    display: none;
}

/* Kinderen ingesprongen, GEEN border-line (FuseSuite-stijl) */
.fuse-sidemenu__children {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin-top: 0.1rem;
    padding-left: 1.55rem;
}

.fuse-sidemenu__subitem {
    font-size: 0.85rem;
    color: #6b7884 !important;
}

    .fuse-sidemenu__subitem.is-active {
        background-color: #eaf4fb;
        color: #148adb !important;
        font-weight: 500;
    }

/* Backdrop alleen op mobiel zichtbaar; klikbaar om sidebar te sluiten */
.fuse-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: var(--fuse-topbar-h) 0 0 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1019;
    cursor: pointer;
}

.fuse-main {
    padding-left: var(--fuse-sidebar-w);
    min-height: calc(100vh - var(--fuse-topbar-h));
    margin-top: var(--fuse-topbar-h);
    /* No z-index here: it would create a stacking context that traps Bootstrap
       modals (which live inside .fuse-main) below the backdrop appended to body. */
}

/* Binnenpagina's links uitlijnen i.p.v. de gecentreerde Bootstrap-container.
   Max-breedte blijft behouden (op brede schermen valt de witruimte dus rechts);
   de linker-gutter (2.5rem) lijnt exact uit met de homepagina-content.
   De homepagina zelf blijft full-width via .container.body-content:has(.Home). */
.fuse-main > .container.body-content {
    margin-left: 0;
    margin-right: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    /* Top-padding zo gekozen dat de paginakoppen op dezelfde hoogte staan als
       het eerste menu-item ('Start'): topbar + sidebar-bar + nav/item-padding.
       Alle pagina-wrappers voegen daar nog 1,5rem eigen top-marge aan toe.
       !important omdat Bootstrap's .pt-4 utility ook !important is. */
    padding-top: 2.5rem !important;
}

/* Mobiel: kleinere horizontale marges links/rechts zodat de inhoud meer ruimte
   krijgt. !important om de inline :has(.Home)/.Home/.Apps-overrides te verslaan. */
@media (max-width: 768px) {
    .fuse-main > .container.body-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .fuse-page,
    .fuse-page--narrow {
        padding-left: 0;
        padding-right: 0;
    }

    .Home,
    .Apps,
    .RN {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Op telefoons een krappere gutter zodat de content niet onnodig smal wordt. */
@media (max-width: 575.98px) {
    .fuse-main > .container.body-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Desktop: ingeklapt = smal icon-only menu (geen slide-away).
   Op mobiel blijft de bestaande off-canvas logica actief (zie @media hieronder). */
@media (min-width: 993px) {
    body.fuse-sidebar-collapsed .fuse-sidebar {
        width: var(--fuse-sidebar-w-narrow);
        overflow: visible; /* tooltips mogen buiten de smalle balk uitkomen */
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu {
        overflow: visible; /* geen scrol nodig in icon-only modus */
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu__bar {
        overflow: visible;
    }

    body.fuse-sidebar-collapsed .fuse-main {
        padding-left: var(--fuse-sidebar-w-narrow);
    }

    /* Icon-only nav-items: tekst verbergen via font-size:0, icoon herstellen */
    body.fuse-sidebar-collapsed .fuse-sidemenu__item {
        justify-content: center;
        padding: 0.5rem 0;
        font-size: 0;
        gap: 0;
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu__item .fuse-sidemenu__icon {
        font-size: 1.25rem;
        width: auto;
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu__caret-placeholder,
    body.fuse-sidebar-collapsed .fuse-sidemenu__pill,
    body.fuse-sidebar-collapsed .fuse-sidemenu__section {
        display: none;
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu__bar {
        justify-content: center;
    }

    /* Hover-label naast icoon (VS Code-stijl) */
    body.fuse-sidebar-collapsed .fuse-sidemenu__item[data-label]::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 0.85rem);
        top: 50%;
        transform: translateY(-50%);
        background: var(--fuse-surface);
        color: var(--fuse-text);
        border: 1px solid var(--fuse-border);
        border-radius: 0.35rem;
        padding: 0.3rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
        pointer-events: none;
        opacity: 0;
        transition: opacity .1s;
        z-index: 1050;
    }

    body.fuse-sidebar-collapsed .fuse-sidemenu__item[data-label]:hover::after {
        opacity: 1;
    }
}

/* De topbar-hamburger is alleen bedoeld voor mobiel (off-canvas). Op desktop
   klap je in/uit via de chevron in de zijbalk, dus daar is hij verborgen. */
.fuse-topbar-left .fuse-sidebar-toggle {
    display: none;
}

/* Mobiele uitklap-stijl: sidebar is standaard verborgen, klapt uit via .fuse-sidebar-open */
@media (max-width: 992px) {
    .fuse-topbar-left {
        width: auto;
        min-width: 0; /* mobiel: geen vaste minimumbreedte, topbar blijft compact */
    }

    /* Alleen op mobiel is de hamburger zichtbaar. */
    .fuse-topbar-left .fuse-sidebar-toggle {
        display: inline-flex;
    }

    .fuse-sidebar {
        transform: translateX(-100%);
    }

    /* Op mobiel bepaalt uitsluitend .fuse-sidebar-open of het menu zichtbaar is;
       .fuse-sidebar-collapsed (een desktop-staat die in localStorage blijft staan)
       mag het openklappen hier niet blokkeren. */
    body.fuse-sidebar-open .fuse-sidebar {
        transform: translateX(0);
    }

    body.fuse-sidebar-open .fuse-sidebar-backdrop {
        display: block;
    }

    .fuse-main {
        padding-left: 0;
    }
}

/* ---------- navbar — gestileerd naar FuseSuite topbalk ----------
   Platte blauwe header (#148adb), compacte hoogte, subtiele drop-shadow.
   Menu-items zonder uppercase/letter-spacing; rustige hover; pill-active. */
.navbar-custom {
    background: #148adb !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.14), 0 0 0.125rem 0 rgba(0, 0, 0, 0.12);
    min-height: 3rem;
    padding: 0 !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Linker-kolom in topbar — heeft dezelfde breedte als de sidebar
   zodat het logo netjes boven de sidebar zit. */
.fuse-topbar-left {
    width: var(--fuse-sidebar-w);
    /* De logokolom volgt de menubreedte, maar mag bij het versmallen (slepen)
       nooit smaller worden dan de standaardbreedte — anders wordt het logo
       afgesneden. Het menu eronder versmalt wél; de logokolom blijft staan,
       net als in de ingeklapte modus. */
    min-width: 15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.625rem;
    flex-shrink: 0;
    transition: width .2s ease;
    overflow: hidden;
}

.fuse-topbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.75rem;
    gap: 0.35rem;
}

/* Theme-toggle knop in topbar — wit pictogram in een ronde transparante knop */
.fuse-theme-btn {
    background: none;
    border: 0;
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color .15s;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

    .fuse-theme-btn:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .fuse-theme-btn:focus,
    .fuse-theme-btn:active,
    .fuse-theme-btn:focus-visible {
        outline: none !important;
        background-color: rgba(255, 255, 255, 0.15);
        box-shadow: none !important;
    }

/* Status-bolletje in de topbar — ronde knop als de thema-knop, met een gekleurde
   bol. Kleur wordt door het script (zie _Layout.cshtml) gezet op basis van de
   eigen /health-check: groen = OK, rood = probleem, grijs = onbekend/laden. */
.fuse-status-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color .15s;
    -webkit-tap-highlight-color: transparent;
}

    .fuse-status-btn:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

.fuse-status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #9aa0a6; /* unknown / laden */
    transition: background-color .2s;
}

.fuse-status-btn.is-ok .fuse-status-dot {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, .8);
}

.fuse-status-btn.is-degraded .fuse-status-dot {
    background: #f39c12;
    box-shadow: 0 0 6px rgba(243, 156, 18, .8);
}

.fuse-status-btn.is-down .fuse-status-dot {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, .8);
    animation: fuse-status-pulse 1.4s ease-in-out infinite;
}

.fuse-status-btn.is-unknown .fuse-status-dot {
    background: #9aa0a6;
}

@keyframes fuse-status-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

    .navbar-custom .navbar-brand {
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
    }

    .navbar-custom .navbar-brand img {
        height: 24px !important;
        position: relative;
        top: -2px; /* logo iets omhoog zodat 'fuse' en 'Portal' op één lijn liggen */
    }

    .fuse-brand-suffix {
        margin-left: 0.55rem;
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.15rem;
        font-weight: 300;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .navbar-custom .navbar-nav .nav-link {
        color: #fff !important;
        font-size: 0.875rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        padding: 0.4rem 0.85rem !important;
        margin: 0 0.05rem;
        border-radius: 0.25rem;
        transition: background-color .15s ease;
        display: inline-flex;
        align-items: center;
    }

        .navbar-custom .navbar-nav .nav-link:hover {
            color: #fff !important;
            background-color: rgba(255, 255, 255, 0.12);
        }

        .navbar-custom .navbar-nav .nav-link:active,
        .navbar-custom .navbar-nav .nav-link.active,
        .navbar-custom .navbar-nav .nav-item.active .nav-link {
            color: #fff !important;
            background-color: rgba(0, 0, 0, 0.18);
        }

        .navbar-custom .navbar-nav .nav-link i.fa-fw {
            margin-right: 0.45rem;
            opacity: 0.9;
            font-size: 0.85rem;
        }

    /* User-dropdown rechts in dezelfde stijl */
    .navbar-custom .dropdown-toggle::after {
        margin-left: 0.4rem;
        vertical-align: middle;
    }

    .navbar-custom .dropdown-menu {
        border: 1px solid var(--fuse-border);
        border-radius: 0.35rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        padding: 0.35rem 0;
        margin-top: 0.35rem;
    }

    .navbar-custom .dropdown-item {
        padding: 0.45rem 1rem;
        font-size: 0.875rem;
    }

        .navbar-custom .dropdown-item:hover {
            background: #eaf4fb;
            color: #148adb;
        }

/* Sidebar-layout: zorg dat body geen extra padding-top heeft want .fuse-main
   regelt de afstand tot de topbar zelf. */
body:not(.fuse-auth-body) {
    padding-top: 0 !important;
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, roboto, arial, sans-serif;
    font-weight: 300; /* Mulish Light voor alle gewone tekst */
}

/* Formuliercontrols erven het lettertype (browsers vallen anders terug op een
   systeemfont), zodat álle tekst — ook in velden, keuzelijsten en knoppen — Mulish is. */
body:not(.fuse-auth-body) input,
body:not(.fuse-auth-body) select,
body:not(.fuse-auth-body) textarea,
body:not(.fuse-auth-body) button {
    font-family: inherit;
}

/* ---------- app-achtergrond ---------- */
/* Vlak, rustig lichtblauw conform de portal-mockup: witte cards en getinte
   panelen lichten daar prettig op, zonder de drukke aurora-gradient. */
body:not(.fuse-auth-body) {
    background: #eaf6fe !important;
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--fuse-text);
}

/* Ubuntu voor koppen — huisstijl uit de portal-mockup. Alleen actief waar de
   Ubuntu-webfont geladen is (zie _Layout); valt anders terug op de systeem-stack. */
body:not(.fuse-auth-body) h1,
body:not(.fuse-auth-body) h2,
body:not(.fuse-auth-body) h3,
body:not(.fuse-auth-body) h4,
body:not(.fuse-auth-body) h5,
body:not(.fuse-auth-body) h6,
.fuse-page-title,
.fuse-hero__title,
.fuse-form__section-title,
.Home__section-title,
.Home__hero-title,
.Home__welcome-title,
.Home__tool-title,
.Apps__card-title,
.fuse-release__title,
.fuse-sidemenu__section {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "segoe ui", roboto, arial, sans-serif;
    font-weight: 700; /* Ubuntu bold voor alle koppen en tussenkopjes */
}

/* Tussenkopjes / kaart-/berichttitels in de donkere huisstijlkleur #002D36.
   De grote paginatitels (.fuse-hero__title, .Home__welcome-title) blijven blauw. */
.Home__tool-title,
.Apps__card-title,
.Home__section-title,
.fuse-release__title,
.fuse-form__section-title,
.fuse-sidemenu__section {
    color: var(--fuse-text-heading);
}

/* Dark theme — effen donkere achtergrond, géén aurora of grid-pattern */
:root.fuse-dark body:not(.fuse-auth-body) {
    background: #1b1f24 !important;
    color: var(--fuse-text);
}

:root.fuse-dark body:not(.fuse-auth-body)::before {
    display: none; /* grid-pattern uit in dark mode */
}

/* Waarschuwingsvlak + gemarkeerde tabelrijen (bv. orphan-objecten in
   Backups → Object storage). Kleuren via de warning-variabelen zodat
   dark mode automatisch meekleurt — geen hardgecodeerde lichte tinten
   in views zetten. */
.fuse-warning-box {
    background: var(--fuse-warning-soft);
    border: 1px solid var(--fuse-warning-border);
    border-radius: var(--fuse-radius);
    padding: .85rem 1rem;
}
.fuse-table tbody tr.is-warning-row { background: var(--fuse-warning-soft); }

/* Dark theme component-overrides */
:root.fuse-dark .fuse-hero__title { color: var(--fuse-primary); }
:root.fuse-dark .fuse-hero__subtitle { color: var(--fuse-muted); }
:root.fuse-dark .fuse-form__section-title { color: var(--fuse-text); }
:root.fuse-dark .fuse-table thead th { background: var(--fuse-surface-alt); color: var(--fuse-muted); }
:root.fuse-dark .fuse-table tbody tr:hover { background: var(--fuse-surface-alt); }
:root.fuse-dark .fuse-table tbody tr.is-warning-row,
:root.fuse-dark .fuse-table tbody tr.is-warning-row:hover { background: var(--fuse-warning-soft); }
:root.fuse-dark .fuse-toolbar { background: var(--fuse-surface); }
:root.fuse-dark .fuse-chart-card,
:root.fuse-dark .fuse-kpi { background: var(--fuse-surface); }
:root.fuse-dark .fuse-kpi__value { color: var(--fuse-text-heading); }
:root.fuse-dark .fuse-toolbar__search input,
:root.fuse-dark .fuse-toolbar__select { background: var(--fuse-surface); color: var(--fuse-text); }
:root.fuse-dark .fuse-field > input,
:root.fuse-dark .fuse-field > select,
:root.fuse-dark .fuse-field > textarea { background: var(--fuse-surface-alt); color: var(--fuse-text); }
:root.fuse-dark .fuse-field > select,
:root.fuse-dark .fuse-toolbar__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.8rem;
}
:root.fuse-dark .fuse-field > input[disabled],
:root.fuse-dark .fuse-field > input[readonly],
:root.fuse-dark .fuse-field > select[disabled] { background: #1a1e23; color: var(--fuse-muted); }
:root.fuse-dark .fuse-btn-secondary { background: var(--fuse-surface-alt); color: var(--fuse-text) !important; border-color: var(--fuse-border-strong); }
:root.fuse-dark .fuse-btn-secondary:hover { background: #353b42; color: var(--fuse-text) !important; }
:root.fuse-dark .fuse-defs dt { color: var(--fuse-muted); }
:root.fuse-dark .fuse-chip.is-muted { background: var(--fuse-surface-alt); color: var(--fuse-muted); border-color: var(--fuse-border); }
:root.fuse-dark .fuse-chip { background: rgba(20, 138, 219, 0.18); color: #6abbed; border-color: rgba(20, 138, 219, 0.35); }
/* Backup-/replica-cards op Home: in light mode een status-gekleurde tint-
   achtergrond (inline gezet). In dark mode overschrijven we naar de thema-surface
   en thema-tekstkleur, net als de berichten-cards; de chips volgen dan de
   standaard dark-mode chip-kleuren (geen geforceerde zwarte tekst meer). */
:root.fuse-dark .home-backup-card,
:root.fuse-dark .home-replica-card {
    background: var(--fuse-surface) !important;
    color: var(--fuse-text) !important;
}

/* Zelfde nette hover/shadow als de app-cards (.Home__tool), maar met behoud
   van de status-kleur-rand (groen/oranje/rood) die de backup-leeftijd c.q.
   replicatiestatus aangeeft. */
.home-backup-card,
.home-replica-card {
    box-shadow: 0 4px 16px rgba(0, 50, 100, .08), 0 1px 3px rgba(0, 50, 100, .06);
    transition: transform .1s ease-in-out, box-shadow .1s ease-in-out;
}
.home-backup-card:hover,
.home-replica-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 50, 100, .12), 0 2px 6px rgba(0, 50, 100, .08);
}
:root.fuse-dark .home-backup-card:hover,
:root.fuse-dark .home-replica-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
}

/* Detail-/info-tabel (label links, waarde rechts) — ruimte tussen label en
   waarde zodat de teksten niet tegen de labels aan plakken. */
.fuse-detail-table { border-collapse: collapse; }
.fuse-detail-table th {
    text-align: left;
    font-weight: 600;
    color: var(--fuse-muted);
    white-space: nowrap;
    vertical-align: top;
    padding: .35rem 1.75rem .35rem 0;
}
.fuse-detail-table td {
    vertical-align: top;
    padding: .35rem 0;
}

/* Restore-log: klikbare rij met uitklapbare foutmelding (caret draait open). */
.restore-row--expandable { cursor: pointer; }
.restore-row--expandable:hover { background: var(--fuse-surface-alt); }
.restore-row__caret {
    font-size: .7rem;
    color: var(--fuse-muted);
    margin-right: .4rem;
    transition: transform .12s ease-in-out;
}
.restore-row--expandable.is-open .restore-row__caret { transform: rotate(90deg); }
.restore-error-cell { padding: 0; background: #fdf6f6; }
.restore-error-pre {
    color: #900;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    margin: 0;
    padding: .5rem .8rem;
}
:root.fuse-dark .restore-error-cell { background: rgba(220, 53, 69, 0.12); }
:root.fuse-dark .restore-error-pre { color: #f29ba6; }
:root.fuse-dark .fuse-license-grid { background: var(--fuse-surface-alt); border-color: var(--fuse-border); }
:root.fuse-dark .fuse-license-row { background: var(--fuse-surface); border-color: var(--fuse-border); }
:root.fuse-dark .fuse-prod-grid__head { background: var(--fuse-surface-alt); color: var(--fuse-muted); }
:root.fuse-dark .fuse-prod-grid__row { background: var(--fuse-surface); }
:root.fuse-dark .fuse-pager { background: var(--fuse-surface); border-color: var(--fuse-border); }
:root.fuse-dark .fuse-pager__btn { color: var(--fuse-text) !important; }
:root.fuse-dark .fuse-pager__btn:hover { background: var(--fuse-surface-alt); }
:root.fuse-dark .fuse-step-num { box-shadow: 0 2px 8px rgba(20, 138, 219, 0.5); }
:root.fuse-dark .fuse-auth-key { background: #1a1e23; border-color: var(--fuse-border); color: var(--fuse-text); }
:root.fuse-dark .fuse-toast { background: var(--fuse-surface); color: var(--fuse-text); border-color: var(--fuse-border); }
:root.fuse-dark .navbar-custom .dropdown-menu { background: var(--fuse-surface); border-color: var(--fuse-border); }
:root.fuse-dark .navbar-custom .dropdown-item { color: var(--fuse-text); }
:root.fuse-dark .navbar-custom .dropdown-item:hover { background: var(--fuse-surface-alt); color: var(--fuse-primary); }

/* Bootstrap-alerts (o.a. de validatie-/waarschuwingskaart bovenaan beheer-
   formulieren, zoals bij het aanmaken van een omgeving) krijgen van Bootstrap
   zelf alleen een lichte styling. Op het donkere oppervlak is die slecht
   leesbaar — daarom hier donkere, transparante achtergronden met lichte tekst. */
:root.fuse-dark .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #f29ba6;
}
:root.fuse-dark .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffd964;
}
:root.fuse-dark .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.4);
    color: #75d6a6;
}
:root.fuse-dark .alert-info {
    background-color: rgba(20, 138, 219, 0.15);
    border-color: rgba(20, 138, 219, 0.4);
    color: #6abbed;
}

/* Breadcrumb leesbaar maken in dark mode */
:root.fuse-dark .fuse-breadcrumb {
    color: #9fc8e6;
}

:root.fuse-dark .fuse-breadcrumb a {
    color: #9fc8e6;
}

    :root.fuse-dark .fuse-breadcrumb a:hover {
        color: #6abbed;
    }

:root.fuse-dark .fuse-breadcrumb .current {
    color: #ffffff;
}

/* Checkboxes in dark mode — gebruik native color-scheme zodat browser zelf
   donkere variant van vinkje en omlijning kiest. */
:root.fuse-dark {
    color-scheme: dark;
}

/* Vinkjes/radio's in de huisstijlkleur (#148adc), in light én dark. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fuse-primary);
}

:root.fuse-dark input[type="checkbox"],
:root.fuse-dark input[type="radio"] {
    accent-color: var(--fuse-primary);
}

/* Homepage tegels in dark mode */
:root.fuse-dark .Home__tool {
    background-color: var(--fuse-surface) !important;
    border-color: var(--fuse-border) !important;
    color: var(--fuse-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
}

    :root.fuse-dark .Home__tool:hover {
        border-color: var(--fuse-primary) !important;
        color: var(--fuse-text) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    }

    :root.fuse-dark .Home__tool-title {
        color: var(--fuse-text);
    }

    :root.fuse-dark .Home__tool-description {
        color: var(--fuse-muted);
    }

/* Release notes productkaarten in dark mode — identiek aan .Home__tool */
:root.fuse-dark .RN__card {
    background-color: var(--fuse-surface) !important;
    border-color: var(--fuse-border) !important;
    color: var(--fuse-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
}

    :root.fuse-dark .RN__card:hover {
        border-color: var(--fuse-primary) !important;
        color: var(--fuse-text) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    }

    :root.fuse-dark .RN__card-title {
        color: var(--fuse-text);
    }

    :root.fuse-dark .RN__card-desc {
        color: var(--fuse-muted);
    }

    :root.fuse-dark .RN__card-meta {
        color: var(--fuse-muted);
        border-top-color: var(--fuse-border);
    }

    :root.fuse-dark .RN__card-meta strong {
        color: var(--fuse-text);
    }

/* Home-notice (M365/MFA-waarschuwingen) in dark — donker geel veld */
:root.fuse-dark .Home__notice {
    background-color: #2f2a17 !important;
    border-color: #4a4226 !important;
    border-left-color: var(--fuse-warning) !important;
    color: var(--fuse-text);
}

    :root.fuse-dark .Home__notice-title {
        color: #f0d57a;
    }

    :root.fuse-dark .Home__notice-text {
        color: #d4c69a;
    }

    /* Subtiel grid-pattern over de aurora voor textuur */
    /* Grid-pattern ('ruitjes') uitgeschakeld — niet meer nodig op de vlakke
       lichte achtergrond en zorgde voor zichtbare ruitjes. */
    body:not(.fuse-auth-body)::before {
        display: none;
    }

/* Content boven het grid-pattern. Navbar houdt zijn 'fixed-top' positie
   (Bootstrap) — we zetten alleen een z-index hoger dan het pattern. */
body > .container.body-content {
    position: relative;
    z-index: 1;
}

body > nav.navbar-custom,
nav.navbar.fixed-top {
    z-index: 1030; /* Bootstrap default voor fixed-top navbars */
}

/* Cards iets meer 'lift' geven op de aurora-achtergrond */
.fuse-card,
.fuse-table-wrap,
.fuse-toolbar,
.fuse-chart-card,
.fuse-kpi {
    box-shadow: 0 4px 16px rgba(0, 50, 100, .08), 0 1px 3px rgba(0, 50, 100, .06);
}

/* ---------- page wrapper ---------- */
/* Sidebar-layout: de fuse-main heeft padding-left = sidebar-breedte. De
   fuse-page vult de hoofdkolom volledig zonder onder de sidebar te lopen. */
.fuse-page {
    width: 100%;
    max-width: none;
    margin: 0;
    /* Horizontale padding gelijk aan de top-padding (1,5rem), zodat samen met de
       2,5rem van de container de marge links/rechts gelijk is aan de bovenmarge. */
    padding: 1.5rem 1.5rem 3rem;
    position: relative;
    z-index: 1;
}

/* Bootstrap .container heeft een max-width die de hoofdkolom ongewenst krimpt
   nu er een sidebar links staat. Binnen .fuse-main mag de container volle
   breedte gebruiken. De horizontale padding wordt elders (2,5rem) gezet zodat
   de marge links/rechts overal gelijk is aan de bovenmarge. */
.fuse-main > .container.body-content {
    max-width: none;
    width: 100%;
}

/* Form-pages: de wrapper is full-width zodat de hero-header (titel + lijn +
   introtekst) over de hele breedte loopt; alleen de inhoud ónder de header
   blijft binnen een leesbare breedte. */
.fuse-page--narrow {
    margin: 0 auto 0 0; /* links uitlijnen i.p.v. centreren */
    max-width: none;
    /* Zelfde horizontale padding als .fuse-page, zodat de afstand tot het menu
       gelijk is aan de overzichtspagina's. */
    padding: 1.5rem 1.5rem 3rem;
}

    /* Alle directe kinderen behalve de hero-header krijgen de leesbare max-breedte. */
    .fuse-page--narrow > :not(.fuse-hero) {
        max-width: 64rem;
    }

.fuse-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Titel + subtitel naast elkaar met een scheidingslijn ertussen (zoals het
   startscherm: titel — lijn — subtitel). De tekstblok is de eerste div in de
   hero; de actie-knoppen (.fuse-hero__actions) blijven rechts. */
.fuse-hero > div:not(.fuse-hero__actions) {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.fuse-hero__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--fuse-primary, #148adc); /* gelijk aan de home-welkomtitel */
    line-height: 1.15;
    flex-shrink: 0;
    white-space: nowrap;
}

.fuse-hero__subtitle {
    color: #005a91;
    margin: 0;
    font-size: 0.95rem;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}

/* De scheidingslijn vóór de subtitel groeit en duwt de subtitel naar rechts.
   Kleur volgt het thema-border (licht: blauwgrijs; donker: grijs accent). */
.fuse-hero__subtitle::before {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--fuse-border-strong);
}

/* breadcrumb — bewust verborgen; de paginatitel staat nu bovenaan (zoals home). */
.fuse-breadcrumb {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #005a91;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

    .fuse-breadcrumb a {
        color: #005a91;
        text-decoration: none;
        transition: color .12s;
    }

        .fuse-breadcrumb a:hover {
            color: var(--fuse-primary);
            text-decoration: underline;
        }

    .fuse-breadcrumb .sep {
        opacity: 0.6;
    }

    .fuse-breadcrumb .current {
        color: #003e66;
        font-weight: 600;
    }

.fuse-hero__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- card ---------- */
.fuse-card {
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--fuse-shadow-sm);
    color: var(--fuse-text);
}

    .fuse-card + .fuse-card {
        margin-top: 1rem;
    }

    /* In een horizontale stat-rij geldt de gestapelde sibling-margin niet:
       die maakte de 2e en volgende tegel lager (en met stretch ook korter)
       dan de eerste. */
    .fuse-stat-row .fuse-card + .fuse-card {
        margin-top: 0;
    }

.fuse-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: -0.25rem 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fuse-border);
}

.fuse-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

/* ---------- toolbar (zoek + filters + acties) ---------- */
.fuse-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem;
}

.fuse-toolbar__search {
    position: relative;
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 22rem;
}

    .fuse-toolbar__search input {
        width: 100%;
        max-width: none;
        padding: 0.4rem 0.75rem 0.4rem 2rem;
        border: 1px solid var(--fuse-border-strong);
        border-radius: var(--fuse-radius-sm);
        font-size: 0.9rem;
        background: var(--fuse-surface);
    }

        /* Bij focus geen zwarte browser-outline maar een dunne blauwe rand,
           gelijk aan de selects/dropdowns. */
        .fuse-toolbar__search input:focus {
            outline: none;
            border-color: var(--fuse-primary);
            box-shadow: 0 0 0 2px rgba(20, 138, 220, 0.15);
        }

    .fuse-toolbar__search .fa-search {
        position: absolute;
        left: 0.65rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--fuse-muted);
        font-size: 0.85rem;
        pointer-events: none;
    }

.fuse-toolbar__select {
    padding: 0.4rem 0.7rem; /* zelfde hoogte als de zoekcontrol */
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm); /* zelfde ronding als het header-dropdownmenu */
    font-size: 0.9rem;
    color: var(--fuse-text);
    background: var(--fuse-surface);
    box-shadow: var(--fuse-shadow-sm);   /* subtiele schaduw zoals het pulldown-paneel */
    min-width: 9rem;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}

    .fuse-toolbar__select:hover {
        border-color: var(--fuse-primary);
    }

    .fuse-toolbar__select:focus {
        outline: none;
        border-color: var(--fuse-primary);
        box-shadow: 0 0 0 3px rgba(20, 138, 220, .18);
    }

    /* Geselecteerde optie in de blauwe headerkleur. */
    .fuse-toolbar__select option:checked,
    .fuse-toolbar__select option[selected] {
        background-color: #148ADC;
        color: #fff;
    }

.fuse-toolbar__spacer {
    flex: 1 1 auto;
}

/* ---------- custom dropdown (vervangt native select voor filters) ----------
   Native <select> blijft bestaan (voor form-submit), maar wordt verborgen en
   visueel vervangen door deze dropdown in de stijl van het header-pulldown. */
.fuse-select {
    position: relative;
    display: inline-block;
    min-width: 11rem;
}

    .fuse-select > select {
        display: none;
    }

.fuse-select__toggle {
    width: 100%;
    text-align: left;
    /* Verticale padding gelijk aan .fuse-toolbar__search input zodat de
       selects exact even hoog zijn als de zoekcontrol. */
    padding: 0.4rem 2.1rem 0.4rem 0.85rem;
    border: 1px solid var(--fuse-border);
    border-radius: 0.6rem;
    background-color: var(--fuse-surface);
    color: var(--fuse-text);
    font-size: 0.9rem;
    box-shadow: var(--fuse-shadow-sm);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23148ADC' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.8rem;
    transition: border-color .12s, box-shadow .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .fuse-select__toggle:hover,
    .fuse-select.is-open .fuse-select__toggle {
        border-color: var(--fuse-primary);
    }

    .fuse-select__toggle:focus {
        outline: none;
        border-color: var(--fuse-primary);
        box-shadow: 0 0 0 3px rgba(20, 138, 220, .18);
    }

.fuse-select__menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: calc(100% + 1.5rem);
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
    z-index: 1040;
    overflow: hidden;
}

.fuse-select.is-open .fuse-select__menu {
    display: block;
}

/* Zoekveld bovenin het menu (blijft staan terwijl de lijst eronder scrollt). */
.fuse-select__search {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--fuse-border);
}

.fuse-select__search-input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--fuse-border);
    border-radius: 0.5rem;
    background: var(--fuse-surface);
    color: var(--fuse-text);
    font: inherit;
    font-size: 0.88rem;
}

    .fuse-select__search-input:focus {
        outline: none;
        border-color: var(--fuse-primary);
        box-shadow: 0 0 0 2px rgba(20, 138, 220, 0.15);
    }

/* Scrollende optielijst; hoger gemaakt zodat er meer opties zichtbaar zijn. */
.fuse-select__list {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.4rem 0;
}

.fuse-select__option {
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    color: var(--fuse-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .1s, color .1s;
}

    .fuse-select__option:hover {
        background: #eaf4fb;
        color: var(--fuse-primary);
    }

    /* Geselecteerde optie in de blauwe headerkleur. */
    .fuse-select__option.is-selected {
        background: var(--fuse-primary);
        color: #fff;
    }

:root.fuse-dark .fuse-select__option:hover {
    background: var(--fuse-surface-alt);
    color: var(--fuse-primary);
}

/* ---------- table ---------- */
.fuse-table-wrap {
    overflow-x: auto;
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    box-shadow: var(--fuse-shadow-sm);
}

.fuse-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

    .fuse-table thead th {
        position: sticky;
        top: 0;
        background: #F4FAFE;
        color: var(--fuse-muted);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--fuse-border);
        text-align: left;
        white-space: nowrap;
    }

    .fuse-table tbody td {
        padding: 0.65rem 0.85rem;
        border-bottom: 1px solid var(--fuse-border);
        vertical-align: middle;
    }

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

    .fuse-table tbody tr:hover {
        background: #f9fbfd;
    }

    .fuse-table tbody tr.is-inactive {
        opacity: 0.6;
    }

    .fuse-table .fuse-table__actions {
        text-align: right;
        white-space: nowrap;
    }

.fuse-table-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--fuse-muted);
}

/* compact-modus voor dichtere lijsten met veel kolommen */
.fuse-table--compact thead th {
    padding: 0.5rem 0.55rem;
    font-size: 0.65rem;
}

.fuse-table--compact tbody td {
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
}

.fuse-table--compact .text-center i {
    color: var(--fuse-muted);
}

.fuse-cell-user__name {
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap; /* gebruikersnaam altijd op één regel */
}

.fuse-cell-user__email {
    font-size: 0.74rem;
    color: var(--fuse-muted);
    line-height: 1.2;
    margin-top: 0.1rem;
    white-space: nowrap; /* e-mail ook op één regel */
}

/* checkboxen in tabel iets compacter en gecentreerd */
.fuse-table .text-center input[type="checkbox"] {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    vertical-align: middle;
    cursor: pointer;
}

/* ---------- chips & badges ---------- */
.fuse-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #eef4fb;
    color: var(--fuse-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid #d6e6f5;
    white-space: nowrap;
}

    .fuse-chip + .fuse-chip {
        margin-left: 0.25rem;
    }

/* In tabel-/overzichtscellen kunnen meerdere chips afbreken naar een volgende
   regel; geef ze rechts- én ondermarge zodat ze niet tegen elkaar plakken. */
.fuse-table td .fuse-chip {
    margin: 0 0.35rem 0.35rem 0;
}

    .fuse-table td .fuse-chip + .fuse-chip {
        margin-left: 0; /* uniforme marges hierboven gebruiken */
    }

/* Sleephendel om de breedte van de linker menubalk aan te passen. */
.fuse-sidebar__resizer {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1021;
    transition: background-color .12s;
}

    .fuse-sidebar__resizer:hover,
    .fuse-sidebar__resizer.is-dragging {
        background: rgba(20, 138, 220, 0.30);
    }

/* Tijdens het slepen geen tekstselectie en geen transitions (vloeiend volgen). */
body.fuse-sidebar-resizing,
body.fuse-sidebar-resizing .fuse-sidebar,
body.fuse-sidebar-resizing .fuse-main,
body.fuse-sidebar-resizing .fuse-topbar-left {
    transition: none !important;
    -webkit-user-select: none;
    user-select: none;
}

/* Bij ingeklapte balk geen resize. */
body.fuse-sidebar-collapsed .fuse-sidebar__resizer {
    display: none;
}

/* Watermerk: Fuse-mark rechtsonder, achter alle inhoud (z-index -1), op elke
   pagina. Via CSS-masker zodat de kleur (#D5EAF9) themabaar is. */
.fuse-watermark {
    position: fixed;
    right: -3rem;
    bottom: -3rem;
    width: 28rem;
    height: 28rem;
    z-index: -1;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: #D5EAF9;
    -webkit-mask: url('/images/fuse-mark.svg') no-repeat right bottom / contain;
    mask: url('/images/fuse-mark.svg') no-repeat right bottom / contain;
}

:root.fuse-dark .fuse-watermark {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Voortgangsbalk: dark mode subtiele lichte track i.p.v. de lichte border. */
:root.fuse-dark .fuse-progress {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Iconen standaard in huisstijlblauw (#148adc) in de content en in modals.
   De header (topbar) en sidebar vallen hier buiten. Contextkleuren — chips,
   primaire knoppen (wit), en inline ge-kleurde status-iconen (danger/success) —
   blijven behouden. */
.fuse-main .fa,
.fuse-main .material-symbols-outlined,
.fuse-modal-shell .fa,
.fuse-modal-shell .material-symbols-outlined {
    color: #148adc;
}

.fuse-main .fuse-chip .fa,
.fuse-main .fuse-chip .material-symbols-outlined,
.fuse-modal-shell .fuse-chip .fa,
.fuse-modal-shell .fuse-chip .material-symbols-outlined,
.fuse-main .fuse-btn-primary .fa,
.fuse-main .fuse-btn-primary .material-symbols-outlined,
.fuse-modal-shell .fuse-btn-primary .fa,
.fuse-modal-shell .fuse-btn-primary .material-symbols-outlined,
.fuse-main [style*="color"] > .fa,
.fuse-main [style*="danger"] .fa,
.fuse-main [style*="success"] .fa,
.fuse-modal-shell [style*="color"] > .fa,
.fuse-modal-shell [style*="danger"] .fa,
.fuse-modal-shell [style*="success"] .fa {
    color: inherit;
}

    .fuse-chip.is-success {
        background: #e6f5ee;
        color: #146c43;
        border-color: #b6dfca;
    }

    .fuse-chip.is-warning {
        background: var(--fuse-warning-soft);
        color: #806000;
        border-color: #ffe69c;
    }

    .fuse-chip.is-danger {
        background: #fbe7ea;
        color: #a02334;
        border-color: #f3c6cd;
    }

    .fuse-chip.is-muted {
        background: #f1f3f5;
        color: var(--fuse-muted);
        border-color: var(--fuse-border);
    }

/* ---------- progress bar (restore voortgang) ---------- */
.fuse-progress {
    position: relative;
    width: 160px;
    height: 22px;
    background: #e9ecef;
    border: 1px solid var(--fuse-border);
    border-radius: 11px;
    overflow: hidden;
}

.fuse-progress__bar {
    height: 100%;
    background: var(--fuse-primary); /* #148adc */
    transition: width 0.4s ease;
}

.fuse-progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* ---------- form (card layout, label boven veld) ---------- */
.fuse-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    counter-reset: fuse-section;
}

.fuse-form__section {
    padding-top: 0.25rem;
    margin-top: 0.5rem;
}

    .fuse-form__section:first-of-type {
        padding-top: 0;
        margin-top: 0;
    }

/* Genummerde sectietitels: '01 Account', '02 Persoonsgegevens', ...
   Ronde blauwe badge zoals de step-nummers in /Authenticator/EnableAuthenticator. */
.fuse-form__section-title {
    counter-increment: fuse-section;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fuse-text-heading);
    margin: 0 0 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}

    .fuse-form__section-title::before {
        content: counter(fuse-section, decimal-leading-zero);
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--fuse-primary);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        box-shadow: 0 2px 6px rgba(0, 119, 191, 0.35);
    }

.fuse-form__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.85rem 1rem;
}

.fuse-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    grid-column: span 12;
    min-width: 0; /* zorg dat inputs binnen grid kunnen krimpen ipv overflowen */
}

    .fuse-field.col-2 {
        grid-column: span 2;
    }

    .fuse-field.col-3 {
        grid-column: span 3;
    }

    .fuse-field.col-4 {
        grid-column: span 4;
    }

    .fuse-field.col-6 {
        grid-column: span 6;
    }

    .fuse-field.col-8 {
        grid-column: span 8;
    }

    .fuse-field.col-12 {
        grid-column: span 12;
    }

.fuse-field__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
}

/* Compact-input variant: gebruikt op col-12-velden waar de input zelf kort
   is (aantallen, dagen) maar het label/de hint full-width wil zijn. Voorkomt
   dat een number-input zich uitstrekt over de hele formulier-breedte. */
.fuse-field.fuse-field--narrow-input > input {
    width: 8rem;
    max-width: 8rem;
}

.fuse-field__hint {
    font-size: 0.78rem;
    color: var(--fuse-muted);
}

.fuse-field__error {
    font-size: 0.78rem;
    color: var(--fuse-danger);
}

/* form inputs — alle text-achtige inputs vullen de volledige cell; overrided
   de globale site.css input rule via hogere specificity + 100% width. */
.fuse-form .fuse-field > input,
.fuse-form .fuse-field > select,
.fuse-form .fuse-field > textarea,
.fuse-field > input[type],
.fuse-field > select,
.fuse-field > textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius); /* afgeronde 'box'-stijl zoals het mailadres-vakje rechtsboven */
    font-size: 0.9rem;
    background: var(--fuse-surface);
    color: var(--fuse-text);
    box-sizing: border-box;
    transition: border-color .12s, box-shadow .12s;
}

/* select — vervang de native dropdown-arrow zodat hij niet op brede selects
   ver naar rechts blijft staan. Custom chevron op vaste afstand van de rand. */
.fuse-field > select,
.fuse-form .fuse-field > select,
.fuse-toolbar__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23148ADC' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.8rem;
    padding-right: 2rem;
}

    /* IE/Edge legacy expand-arrow uitschakelen */
    .fuse-field > select::-ms-expand,
    .fuse-toolbar__select::-ms-expand {
        display: none;
    }

    .fuse-field > input:focus,
    .fuse-field > textarea:focus,
    .fuse-field > select:focus {
        outline: none;
        border-color: var(--fuse-primary);
        box-shadow: 0 0 0 3px rgba(20,138,220,.18);
    }

    .fuse-field > input[disabled],
    .fuse-field > input[readonly],
    .fuse-field > select[disabled],
    .fuse-field > textarea[disabled] {
        background: #f1f3f5;
        color: var(--fuse-muted);
    }

/* checkbox/switch row binnen form */
.fuse-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.35rem 0;
}

    .fuse-check input[type="checkbox"] {
        margin-top: 0.18rem;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

.fuse-check__label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fuse-text);
    cursor: pointer;
}

.fuse-check__hint {
    display: block;
    font-size: 0.78rem;
    color: var(--fuse-muted);
    font-weight: 400;
}

/* chip-picker (rollen / connecties) */
.fuse-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fuse-pick__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: 999px;
    background: var(--fuse-surface);
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all .12s;
}

    .fuse-pick__item input {
        appearance: none;
        width: 0;
        height: 0;
        margin: 0;
        position: absolute;
    }

    .fuse-pick__item:hover {
        border-color: var(--fuse-primary);
    }

    .fuse-pick__item.is-on {
        background: #eef4fb;
        border-color: var(--fuse-primary);
        color: var(--fuse-primary);
        font-weight: 600;
    }

/* connection / database access list */
.fuse-conn-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    overflow: hidden;
}

.fuse-conn-list__head,
.fuse-conn-list__row {
    display: grid;
    grid-template-columns: 1fr 6rem 6rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
}

.fuse-conn-list__head {
    background: var(--fuse-surface-alt);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fuse-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--fuse-border);
}

    .fuse-conn-list__head div:not(:first-child) {
        text-align: center;
    }

.fuse-conn-list__row {
    border-top: 1px solid var(--fuse-border);
    background: var(--fuse-surface);
    font-size: 0.88rem;
}

    .fuse-conn-list__row:first-of-type {
        border-top: none;
    }

    .fuse-conn-list__row:hover {
        background: var(--fuse-surface-alt);
    }

.fuse-conn-list__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

    .fuse-conn-list__name .fa-database {
        color: var(--fuse-primary);
        font-size: 0.85rem;
    }

.fuse-conn-list__cb {
    margin: 0;
    display: flex;
    justify-content: center;
}

    .fuse-conn-list__cb input {
        width: 1.05rem;
        height: 1.05rem;
        margin: 0;
    }

/* form actions footer */
.fuse-form__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

/* ---------- buttons ---------- */
/* basisstijl voor alle fuse-btn-* (zorgt dat <a class="fuse-btn-..."> en
   <button class="fuse-btn-..."> visueel identiek zijn, ook qua hover) */
.fuse-btn-primary,
.fuse-btn-secondary,
.fuse-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--fuse-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}

.fuse-btn-primary {
    background: var(--fuse-primary);
    color: #fff !important;
    border-color: var(--fuse-primary);
}

    .fuse-btn-primary:hover,
    .fuse-btn-primary:focus {
        background: var(--fuse-primary-hover);
        border-color: var(--fuse-primary-hover);
        color: #fff !important;
    }

.fuse-btn-secondary {
    background: var(--fuse-surface);
    color: var(--fuse-text) !important;
    border-color: var(--fuse-border-strong);
}

    .fuse-btn-secondary:hover,
    .fuse-btn-secondary:focus {
        background: #f1f3f5;
        border-color: var(--fuse-border-strong);
        color: var(--fuse-text) !important;
    }

.fuse-btn-danger {
    background: var(--fuse-danger);
    color: #fff !important;
    border-color: var(--fuse-danger);
}

.fuse-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fuse-radius-sm);
    border: 1px solid var(--fuse-border);
    background: var(--fuse-surface);
    color: var(--fuse-muted) !important;
    transition: all .12s;
    text-decoration: none !important;
}

    .fuse-btn-icon:hover {
        background: #eef4fb;
        border-color: var(--fuse-primary);
        color: var(--fuse-primary) !important;
    }

/* Compact variant — kleinere padding, geschikt voor in tabelrijen. */
.fuse-btn-sm {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.78rem !important;
    gap: 0.3rem !important;
}

/* Contextuele help-knop — floating action button rechtsonder. Eén per pagina
   verwacht; meer dan één geeft visuele overlap. Klikt een topic-specifieke
   modal open via de _HelpButton partial. */
.fuse-help-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040; /* boven content, onder modal (1060) en backdrop (1055) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: var(--fuse-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: background .12s, transform .12s, box-shadow .12s;
    padding: 0;
}

    .fuse-help-fab:hover,
    .fuse-help-fab:focus {
        background: var(--fuse-primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.14);
        outline: none;
        color: #fff;
    }

    .fuse-help-fab .material-symbols-outlined {
        font-size: 1.5rem;
        font-weight: 600;
    }

/* In-app help: typografische container voor topic-partials. Houdt regels
   ruim genoeg leesbaar zonder reset.css op de hele site te beïnvloeden. */
.fuse-help-content {
    padding: 0.5rem 0.25rem;
    line-height: 1.55;
    color: var(--fuse-text);
}

    .fuse-help-content h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 1.4rem 0 0.5rem;
        color: var(--fuse-text-heading);
    }

    .fuse-help-content h3:first-child {
        margin-top: 0;
    }

    .fuse-help-content p,
    .fuse-help-content ul,
    .fuse-help-content ol {
        margin: 0 0 0.85rem;
    }

    .fuse-help-content ul,
    .fuse-help-content ol {
        padding-left: 1.4rem;
    }

    .fuse-help-content li {
        margin: 0.25rem 0;
    }

    .fuse-help-content a {
        color: var(--fuse-primary);
        font-weight: 500;
    }

    .fuse-help-content strong {
        color: var(--fuse-text-heading);
    }

/* Subtiel sub-kopje per host-org in de gast-licentie-lijst. Niet groot,
   geen counter — bedoeld om visueel groepen te scheiden, niet als 'stap'. */
.fuse-license-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fuse-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.4rem;
}

    .fuse-license-group-title:first-child {
        margin-top: 0;
    }

    .fuse-license-group-title .fa {
        color: var(--fuse-primary);
        font-size: 0.9rem;
    }

/* Pil rechts in een sidemenu-item — bijv. "Gasten (3)". Subtiel: lichte
   achtergrond met muted-tint zodat hij niet schreeuwt om aandacht maar
   wel leesbaar blijft. */
.fuse-sidemenu__pill {
    margin-left: auto;
    background: #148adb;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    min-width: 1.4rem;
    text-align: center;
    line-height: 1.3;
}

/* Actief menu-item heeft zelf al een blauwe achtergrond — de pil wordt
   daar een semi-transparente witte 'pil' zodat hij niet wegvalt maar ook
   niet domineert. */
.fuse-sidemenu__item.is-active .fuse-sidemenu__pill {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Gast-context indicator in de topbar. Geel/oranje-tint zodat duidelijk
   zichtbaar is dat de gebruiker buiten zijn eigen org werkt; subtiel
   genoeg om niet te schreeuwen. */
.fuse-guest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.85rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.18);
    color: #ffd54f;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

    .fuse-guest-chip small {
        font-size: 0.72rem;
        opacity: 0.85;
    }

/* ---------- pagination ---------- */
.fuse-pagination {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.fuse-pagination__btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--fuse-radius-sm);
    border: 1px solid var(--fuse-border);
    background: var(--fuse-surface);
    color: var(--fuse-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    text-decoration: none;
}

    .fuse-pagination__btn:hover {
        border-color: var(--fuse-primary);
        color: var(--fuse-primary);
    }

    .fuse-pagination__btn.is-active {
        background: var(--fuse-primary);
        border-color: var(--fuse-primary);
        color: #fff;
    }

    .fuse-pagination__btn[aria-disabled="true"] {
        opacity: 0.4;
        pointer-events: none;
    }

/* ---------- license list (in user form) ---------- */
.fuse-license-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    overflow: hidden;
}

.fuse-license-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--fuse-surface);
    border-top: 1px solid var(--fuse-border);
}

    .fuse-license-row:first-child {
        border-top: none;
    }

    .fuse-license-row:hover {
        background: #f9fbfd;
    }

.fuse-license-row__main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
    min-width: 0;
}

.fuse-license-row__name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.fuse-license-row__period {
    font-size: 0.75rem;
    color: var(--fuse-muted);
}

.fuse-license-row__counter {
    white-space: nowrap;
}

.fuse-license-toggle {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex-shrink: 0;
}

.fuse-license-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    margin-left: 0.4rem;
}

/* ---------- license assignment grid ---------- */
.fuse-license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.4rem 0.85rem;
    padding: 0.75rem;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    background: #fafbfc;
    margin-bottom: 1rem;
}

.fuse-license-grid__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--fuse-radius-sm);
    cursor: pointer;
    transition: background .1s;
    margin: 0;
    font-size: .9rem;
}

    .fuse-license-grid__item:hover {
        background: #eef4fb;
    }

    .fuse-license-grid__item input[type="checkbox"] {
        margin: 0;
    }

/* ---------- product/licenses grid (Subscriptions) ---------- */
.fuse-prod-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    overflow: hidden;
}

.fuse-prod-grid__head,
.fuse-prod-grid__row {
    display: grid;
    grid-template-columns: 1fr 8rem 8rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
}

.fuse-prod-grid__head {
    background: #f7fafc;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fuse-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--fuse-border);
}

.fuse-prod-grid__row {
    border-top: 1px solid var(--fuse-border);
    background: var(--fuse-surface);
}

    .fuse-prod-grid__row:first-of-type {
        border-top: none;
    }

.fuse-prod-grid__name {
    font-weight: 500;
}

.fuse-prod-grid input[type="number"],
.fuse-prod-grid input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius-sm);
    font-size: 0.9rem;
}

/* ---------- definition list (Details views) ---------- */
.fuse-defs {
    display: grid;
    grid-template-columns: minmax(10rem, 18%) 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

    .fuse-defs dt {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--fuse-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin: 0;
        padding-top: 0.15rem;
    }

    .fuse-defs dd {
        margin: 0;
        font-size: 0.95rem;
    }

/* ---------- dashboard / KPI tiles + charts ---------- */
.fuse-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .fuse-dashboard {
        grid-template-columns: 1fr;
    }
}

.fuse-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-content: start;
}

.fuse-kpi {
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fuse-kpi__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fuse-muted);
    font-weight: 600;
}

.fuse-kpi__value {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "segoe ui", roboto, arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fuse-text-heading); /* #002D36 in light, wit in dark */
    order: 3;          /* getal onderin de tegel */
    margin-top: auto;
    padding-top: 0.4rem;
}

.fuse-kpi__hint {
    font-size: 0.78rem;
    color: var(--fuse-muted);
    order: 2;          /* toelichting boven het getal */
}

/* Chart card */
.fuse-chart-card {
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    padding: 0.85rem 1rem 1rem;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
}

.fuse-chart-card__title {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "segoe ui", roboto, arial, sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fuse-text-heading); /* #002D36 */
    font-weight: 700;
    margin: 0 0 0.5rem;
}

/* Sectietitel bóven een kaart/dashboard, identiek aan de homepagina
   (.Home__section-title). Lettertype (Ubuntu 700) komt van de h-regels. */
.fuse-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fuse-text-heading);
    margin: 0 0 0.7rem;
}

.fuse-chart-card__legend {
    display: flex;
    gap: 0.85rem;
    font-size: 0.78rem;
    color: var(--fuse-muted);
    margin-bottom: 0.4rem;
}

    .fuse-chart-card__legend .swatch {
        display: inline-block;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 2px;
        margin-right: 0.35rem;
        vertical-align: -1px;
    }

/* SVG bevat alleen bars + gridlines (stretchen met preserveAspectRatio="none"); de
   tekstlabels worden in HTML eromheen geplaatst zodat ze niet uitgerekt worden. */
.fuse-chart-wrap {
    position: relative;
    width: 100%;
}

.fuse-chart {
    width: 100%;
    height: 9rem;
    display: block;
}

.fuse-chart-y-label {
    position: absolute;
    top: 0.25rem;
    left: 0;
    font-size: 0.72rem;
    color: var(--fuse-muted);
    background: var(--fuse-surface);
    padding: 0 0.25rem;
    line-height: 1;
}

.fuse-chart-x-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--fuse-muted);
    padding: 0.25rem 0 0;
}

    .fuse-chart-x-labels--even span {
        flex: 1 1 0;
        text-align: center;
        white-space: nowrap;
    }

    .fuse-chart-x-labels--even span:nth-child(even) {
        opacity: 0; /* om de helft hiden zodat het niet overlapt op smalle layouts */
    }

@media (min-width: 900px) {
    .fuse-chart-x-labels--even span:nth-child(even) {
        opacity: 1;
    }
}

    .fuse-chart .axis {
        stroke: var(--fuse-border);
        stroke-width: 1;
    }

    .fuse-chart .gridline {
        stroke: var(--fuse-border);
        stroke-width: 1;
        opacity: .8;
    }

    .fuse-chart .bar {
        fill: var(--fuse-primary);
        transition: fill .12s;
    }

    .fuse-chart .bar:hover {
        fill: var(--fuse-primary-hover);
    }

    .fuse-chart .bar-secondary {
        fill: #9ec8ea;
    }

    .fuse-chart .bar-empty {
        fill: #eef2f5;
    }

/* ---------- footer summary row ---------- */
.fuse-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
    color: var(--fuse-muted);
    font-size: 0.9rem;
}

.fuse-list-footer__right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* moderne, compacte pager: « 1–50 van 742 » */
.fuse-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    background: var(--fuse-surface);
    padding: 0.15rem;
}

.fuse-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--fuse-radius-sm);
    color: var(--fuse-text) !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    transition: background .12s;
}

    .fuse-pager__btn:hover {
        background: #eef4fb;
        color: var(--fuse-primary) !important;
    }

    .fuse-pager__btn.is-disabled {
        opacity: 0.35;
        pointer-events: none;
    }

.fuse-pager__info {
    font-size: 0.82rem;
    color: var(--fuse-muted);
    padding: 0 0.35rem;
    white-space: nowrap;
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 768px) {
    .fuse-field.col-6,
    .fuse-field.col-4,
    .fuse-field.col-3,
    .fuse-field.col-8 {
        grid-column: span 12;
    }
}

/* =========================================================================
   MATERIAL SYMBOLS — base + FA-class compatibility layer
   Markup `<i class="fa fa-X"></i>` and `<span class="material-symbols-outlined">name</span>`
   both render via the Material Symbols web font.
   ========================================================================= */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* override Font Awesome so existing markup picks up Material Symbols */
i.fa,
.fa,
.fas,
.far,
.fab {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga' !important;
    font-feature-settings: 'liga' !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
    line-height: 1 !important;
    vertical-align: middle;
}

.fa-arrow-right::before { content: 'arrow_forward' !important; }
.fa-ban::before { content: 'block' !important; }
.fa-bars::before { content: 'menu' !important; }
.fa-bolt::before { content: 'bolt' !important; }
.fa-box-open::before { content: 'inventory_2' !important; }
.fa-building::before { content: 'apartment' !important; }
.fa-chart-bar::before { content: 'bar_chart' !important; }
.fa-check::before { content: 'check' !important; }
.fa-check-circle::before { content: 'check_circle' !important; }
.fa-chevron-left::before { content: 'chevron_left' !important; }
.fa-chevron-right::before { content: 'chevron_right' !important; }
.fa-clipboard-list::before { content: 'list_alt' !important; }
.fa-cog::before { content: 'settings' !important; }
.fa-database::before { content: 'database' !important; }
.fa-download::before { content: 'download' !important; }
.fa-edit::before { content: 'edit' !important; }
.fa-envelope::before { content: 'mail' !important; }
.fa-envelope-circle-check::before { content: 'mark_email_read' !important; }
.fa-eye::before { content: 'visibility' !important; }
.fa-eye-slash::before { content: 'visibility_off' !important; }
.fa-file-export::before { content: 'file_download' !important; }
.fa-file-signature::before { content: 'description' !important; }
.fa-globe::before { content: 'language' !important; }
.fa-id-badge::before { content: 'badge' !important; }
.fa-info-circle::before { content: 'info' !important; }
.fa-key::before { content: 'key' !important; }
.fa-life-ring::before { content: 'support' !important; }
.fa-list-alt::before { content: 'list_alt' !important; }
.fa-lock::before { content: 'lock' !important; }
.fa-mobile-screen::before { content: 'smartphone' !important; }
.fa-moon::before { content: 'dark_mode' !important; }
.fa-paper-plane::before { content: 'send' !important; }
.fa-plus::before { content: 'add' !important; }
.fa-power-off::before { content: 'power_settings_new' !important; }
.fa-question-circle::before { content: 'help' !important; }
.fa-right-from-bracket::before { content: 'logout' !important; }
.fa-rotate::before { content: 'refresh' !important; }
.fa-save::before { content: 'save' !important; }
.fa-search::before { content: 'search' !important; }
.fa-shield-alt::before,
.fa-shield-halved::before { content: 'security' !important; }
.fa-sort::before { content: 'swap_vert' !important; }
.fa-store::before { content: 'storefront' !important; }
.fa-th::before { content: 'grid_view' !important; }
.fa-times::before { content: 'close' !important; }
.fa-trash::before { content: 'delete' !important; }
.fa-triangle-exclamation::before { content: 'warning' !important; }
.fa-upload::before { content: 'upload' !important; }
.fa-user::before { content: 'person' !important; }
.fa-user-plus::before { content: 'person_add' !important; }
.fa-users::before { content: 'group' !important; }
.fa-clock::before { content: 'schedule' !important; }
/* Backup-specifieke icons: backup = matcht menu-icoon (cloud + up-arrow).
   schema = compare_arrows zodat het géén verwarring geeft met zoeken/refresh. */
.fa-backup::before { content: 'backup' !important; }
.fa-schema::before { content: 'compare_arrows' !important; }
.fa-history::before { content: 'history' !important; }
.fa-play::before { content: 'play_arrow' !important; }
.fa-cloud-upload-alt::before { content: 'backup' !important; }

/* Missende mappings: spinner/stop/warning/archive die door backup-views worden
   gebruikt. fa-spin is een rotatie-animatie (FA-conventie) op het icoon. */
.fa-spinner::before { content: 'progress_activity' !important; }
.fa-stop::before { content: 'stop' !important; }
.fa-warning::before { content: 'warning' !important; }
.fa-archive::before { content: 'archive' !important; }

@keyframes fuse-fa-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fa-spin {
    animation: fuse-fa-spin 1.2s linear infinite;
    display: inline-block;
}

/* size helpers used by FA classes that the app still relies on */
.fa-2x { font-size: 1.75em !important; }
.fa-fw { width: 1.25em !important; text-align: center; }

/* =========================================================================
   FIXES — readable form labels in dark theme, sidebar tweaks, topbar order
   ========================================================================= */

/* Form labels: use theme text colour so they stay legible in dark mode. */
.fuse-field__label {
    color: var(--fuse-text);
}

/* Sidebar Material Symbols icons (replaces .fuse-ic mask-image approach) */
.fuse-sidemenu__item .fuse-sidemenu__icon {
    font-size: 1.25rem;
    line-height: 1;
    color: #148adb;
    opacity: 0.85;
    width: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .12s;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fuse-sidemenu__item:hover .fuse-sidemenu__icon {
    color: #148adb;
    opacity: 1;
}

.fuse-sidemenu__item.is-active .fuse-sidemenu__icon {
    color: #fff;
    opacity: 1;
}

/* "Mijn profiel" stays at the bottom of the sidebar — without a horizontal rule. */
.fuse-sidemenu__item--bottom {
    margin-top: auto;
}

/* Onderste menu-groep (help + profiel) blijft onderaan de sidebar kleven. */
.fuse-sidemenu__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Help-knop ziet eruit als een gewoon menu-item (button i.p.v. <a>).
   Alleen de font-family + line-height resetten zodat de button-default verdwijnt;
   font-size en font-weight komen van .fuse-sidemenu__item zelf, exact gelijk aan
   het "Mijn profiel"-item. */
.fuse-sidemenu__btn {
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Hide any leftover divider markup just in case. */
.fuse-sidemenu__divider {
    display: none;
}

/* Topbar: ensure theme toggle always sits at the far right, after the user menu.
   The Bootstrap _LoginPartial sets `order-2`, which previously pushed the theme
   button to the left. Force the topbar-right to be a flex row with a fixed
   visual order so the theme toggle is always last. */
.fuse-topbar-right {
    flex-wrap: nowrap;
}

.fuse-topbar-right > #navbarsLogin,
.fuse-topbar-right .navbar-collapse {
    order: 2 !important;
    width: auto !important;
    flex: 0 1 auto !important;
}

.fuse-topbar-right .fuse-theme-btn {
    order: 1 !important;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

/* Language picker in user dropdown — show the active language */
.dropdown-item.active .fuse-lang-flag,
.dropdown-item:active .fuse-lang-flag {
    /* Keep emoji bright on the highlighted row */
    filter: none;
}

.dropdown-item .fuse-lang-flag {
    display: inline-block;
    width: 1.5rem;
    text-align: center;
}

.fuse-lang-check {
    float: right;
    font-size: 1.1rem;
    color: var(--fuse-primary);
    line-height: 1.2;
}

.dropdown-item.active .fuse-lang-check {
    color: #fff;
}

.dropdown-item.active {
    background-color: var(--fuse-primary);
    color: #fff;
}

/* Role/chip-picker in dark mode — selected pill is white against dark surface.
   Use a translucent primary background instead, so it reads as "selected"
   without blinding the user. */
:root.fuse-dark .fuse-pick__item {
    background: var(--fuse-surface-alt);
    color: var(--fuse-text);
    border-color: var(--fuse-border-strong);
}

:root.fuse-dark .fuse-pick__item:hover {
    border-color: var(--fuse-primary);
    background: rgba(20, 138, 219, 0.10);
}

:root.fuse-dark .fuse-pick__item.is-on {
    background: rgba(20, 138, 219, 0.22);
    border-color: var(--fuse-primary);
    color: #6abbed;
}

/* Role chips displayed in the user list — keep them readable in dark mode. */
:root.fuse-dark .fuse-chip.is-success {
    background: rgba(34, 134, 88, 0.20);
    color: #6fd6a3;
    border-color: rgba(34, 134, 88, 0.45);
}

/* ═══════════════════════════════════════════════════
   SIDEBAR: Sectie-labels + inklapbare Beheer-groep
   ═══════════════════════════════════════════════════ */

.fuse-sidemenu__section {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fuse-text-heading);
    padding: 0.7rem 0.85rem 0.15rem;
    -webkit-user-select: none;
    user-select: none;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR BAR (waffle + toggle, boven de nav)
   ═══════════════════════════════════════════════════ */

.fuse-sidemenu__bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.3rem 0.5rem;
    min-height: 2.8rem;
    flex-shrink: 0;
}

.fuse-sidemenu__bar .fuse-sidebar-toggle {
    color: var(--fuse-muted);
    margin-right: 0;
}

.fuse-sidemenu__bar .fuse-sidebar-toggle:hover,
.fuse-sidemenu__bar .fuse-sidebar-toggle:focus,
.fuse-sidemenu__bar .fuse-sidebar-toggle:active,
.fuse-sidemenu__bar .fuse-sidebar-toggle:focus-visible {
    background-color: var(--fuse-surface-alt);
    color: var(--fuse-text);
}


/* ═══════════════════════════════════════════════════
   SIDEBAR: Waffle-knop
   ═══════════════════════════════════════════════════ */

.fuse-waffle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.3rem;
    background: transparent;
    border: none;
    color: var(--fuse-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}

.fuse-waffle-btn:hover,
.fuse-waffle-btn[aria-expanded="true"] {
    background: var(--fuse-surface-alt);
    color: var(--fuse-text);
}

.fuse-waffle-btn .material-symbols-outlined {
    font-size: 1.35rem;
}

/* Waffle-knop in de topbar: wit pictogram zoals de andere topbarknoppen */
.fuse-topbar-left .fuse-waffle-btn {
    color: rgba(255, 255, 255, 0.7);
}

.fuse-topbar-left .fuse-waffle-btn:hover,
.fuse-topbar-left .fuse-waffle-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.fuse-topbar-left .fuse-waffle-btn:focus,
.fuse-topbar-left .fuse-waffle-btn:active,
.fuse-topbar-left .fuse-waffle-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   WAFFLE FLYOUT
   ═══════════════════════════════════════════════════ */

.fuse-waffle-flyout {
    position: fixed;
    /* top + left worden door JS gezet op basis van knoppositie */
    z-index: 1060;
    width: 400px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: 0.55rem;
    box-shadow: 0 8px 32px rgba(0, 30, 80, .14), 0 2px 8px rgba(0, 30, 80, .08);
    padding: 0.6rem 0.4rem 0.5rem;
    display: none;
}

.fuse-waffle-flyout--open {
    display: block;
    animation: fuseWaffleSlideIn .15s ease;
}

@keyframes fuseWaffleSlideIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fuse-waffle-flyout__title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fuse-muted);
    padding: 0.1rem 0.5rem 0.4rem;
    -webkit-user-select: none;
    user-select: none;
}

.fuse-waffle-flyout__sep {
    border: none;
    border-top: 1px solid var(--fuse-border);
    margin: 0.45rem 0.5rem;
}

.fuse-waffle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.1rem;
}

.fuse-waffle-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.3rem 0.6rem;
    border-radius: 0.4rem;
    text-decoration: none !important;
    color: var(--fuse-text) !important;
    transition: background .12s;
    cursor: pointer;
}

.fuse-waffle-app:hover {
    background: var(--fuse-surface-alt);
    text-decoration: none !important;
}

.fuse-waffle-app__ico {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.fuse-waffle-app__ico .material-symbols-outlined {
    font-size: 2rem;
    color: #fff;
}

.fuse-waffle-app__lbl {
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.3;
    max-width: 86px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--fuse-text);
}

.fuse-waffle-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fuse-primary) !important;
    text-decoration: none !important;
    transition: background .12s;
    margin-top: 0.1rem;
}

.fuse-waffle-more:hover {
    background: var(--fuse-surface-alt);
}

/* Dark mode */
:root.fuse-dark .fuse-waffle-flyout {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
    @keyframes fuseWaffleSlideIn { from, to { opacity: 1; transform: none; } }
    .fuse-beheer-toggle__arrow,
    .fuse-beheer-body { transition: none; }
}

:root.fuse-dark .fuse-chip.is-warning {
    background: rgba(202, 138, 4, 0.20);
    color: #f3c969;
    border-color: rgba(202, 138, 4, 0.45);
}

:root.fuse-dark .fuse-chip.is-danger {
    background: rgba(220, 53, 69, 0.20);
    color: #f29ba6;
    border-color: rgba(220, 53, 69, 0.45);
}

/* Toggle action button (e.g. "Verstuur welkomstmail") */
.fuse-toggle-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
}

.fuse-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: 0.4rem;
    background: var(--fuse-surface);
    color: var(--fuse-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
    outline: none;
    box-shadow: none;
}

.fuse-toggle-btn:hover {
    border-color: var(--fuse-primary);
    background: var(--fuse-surface-alt);
}

.fuse-toggle-btn:focus,
.fuse-toggle-btn:active,
.fuse-toggle-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.fuse-toggle-btn.is-on {
    background: var(--fuse-primary);
    border-color: var(--fuse-primary);
    color: #fff;
}

.fuse-toggle-btn.is-on:hover {
    background: var(--fuse-primary-hover);
    border-color: var(--fuse-primary-hover);
}

.fuse-toggle-btn__icon {
    font-size: 1.05rem;
    line-height: 1;
}

:root.fuse-dark .fuse-toggle-btn {
    background: var(--fuse-surface-alt);
    color: var(--fuse-text);
    border-color: var(--fuse-border-strong);
}

:root.fuse-dark .fuse-toggle-btn:hover {
    background: #353b42;
    border-color: var(--fuse-primary);
}

/* SSO info banner inside the user form (M365 / ADFS organisations) */
.fuse-sso-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    background: rgba(0, 119, 191, 0.08);
    border: 1px solid rgba(0, 119, 191, 0.25);
    border-radius: var(--fuse-radius-sm);
    color: var(--fuse-text);
}

.fuse-sso-banner > .material-symbols-outlined {
    color: var(--fuse-primary);
    font-size: 1.4rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.fuse-sso-banner__text {
    font-size: 0.85rem;
    color: var(--fuse-muted);
    margin-top: 0.15rem;
}

:root.fuse-dark .fuse-sso-banner {
    background: rgba(0, 119, 191, 0.14);
    border-color: rgba(0, 119, 191, 0.45);
}

/* Greyed-out check row — used for security toggles that the IdP controls when SSO
   is active. Visually muted but the label stays readable. */
.fuse-check.is-disabled {
    opacity: 0.55;
}

.fuse-check.is-disabled .fuse-check__label,
.fuse-check.is-disabled .fuse-check__hint {
    cursor: not-allowed;
}

.fuse-check.is-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* =========================================================================
   BOOTSTRAP MODAL — theme-aware styling
   Bootstrap's defaults assume white background + dark text. In dark mode the
   modal-content stayed white but inherited dark text from our globals, making
   the body unreadable. Override so the modal uses our theme tokens.
   ========================================================================= */
.modal-content {
    background-color: var(--fuse-surface);
    color: var(--fuse-text);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    /* Reset font-size en line-height — Bootstrap rendert de modal in-place in
       de DOM, dus als de trigger-knop binnen een <h1> of andere grote-tekst
       container staat erft de modal-inhoud die font-size. Hier dwingen we
       normale body-typografie af. */
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

    .modal-content h1,
    .modal-content h2,
    .modal-content h3,
    .modal-content h4 {
        font-size: revert;
        line-height: revert;
        font-weight: revert;
    }

.modal-header,
.modal-footer {
    background-color: var(--fuse-surface);
    border-color: var(--fuse-border);
    color: var(--fuse-text);
}

.modal-body {
    background-color: var(--fuse-surface);
    color: var(--fuse-text);
}

.modal-title {
    color: var(--fuse-text-heading);
}

.modal-header .close,
.modal-header button.close {
    color: var(--fuse-text);
    opacity: 0.7;
    text-shadow: none;
}

.modal-header .close:hover,
.modal-header button.close:hover {
    color: var(--fuse-text);
    opacity: 1;
}

/* Bootstrap 4's backdrop should be visibly dim but not bury the modal. */
.modal-backdrop {
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.55;
}

:root.fuse-dark .modal-backdrop.show {
    opacity: 0.7;
}

/* Ensure the modal layers above the sidebar (z-index 1020) and topbar (1030). */
.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1055;
}

/* ====================== FUSE-CONFIRM MODAL ======================
   Eigen, lichte bevestig-modal (zie confirm.js) die de native window.confirm()
   vervangt. Bewust geen Bootstrap/jQuery-UI: zelfstandig en thema-aware via de
   --fuse-tokens. Ligt boven de Bootstrap-modal-laag (1060). */
.fuse-confirm {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fuse-confirm[hidden] {
    display: none;
}

.fuse-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

:root.fuse-dark .fuse-confirm__backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.fuse-confirm__dialog {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: var(--fuse-surface);
    color: var(--fuse-text);
    border: 1px solid var(--fuse-border);
    border-radius: 0.75rem;
    box-shadow: var(--fuse-shadow);
    padding: 1.5rem;
    text-align: center;
    animation: fuse-confirm-in .12s ease-out;
}

@keyframes fuse-confirm-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.fuse-confirm__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.12);
    color: var(--fuse-danger);
    font-size: 1.35rem;
}

.fuse-confirm__msg {
    margin: 0 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--fuse-text);
}

.fuse-confirm__actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

    .fuse-confirm__actions > button {
        min-width: 7rem;
    }

/* Voorkomt scroll van de achtergrond terwijl de modal open is. */
body.fuse-confirm-open {
    overflow: hidden;
}

/* Wider auth card for the MFA-setup wizard — needs room for the step layout
   and QR code while still fitting the auth-background centered card. */
.fuse-auth-card--wide {
    max-width: 48rem;
    width: 100%;
}

/* MFA setup wizard — step rows separated by faint dividers for visual rhythm. */
.fuse-mfa-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fuse-mfa-steps .fuse-step-row + .fuse-step-row {
    padding-top: 1.25rem;
    border-top: 1px solid var(--fuse-border);
}

.fuse-mfa-steps .fuse-qr-wrap {
    display: block;
    margin: 0.75rem 0 0;
    max-width: max-content;
}

/* Compact app-picker variant — two buttons per row in the MFA wizard, falling
   back to a single column on narrow screens. */
.fuse-pick.fuse-pick--compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 540px) {
    .fuse-pick.fuse-pick--compact {
        grid-template-columns: 1fr;
    }
}

.fuse-pick.fuse-pick--compact .fuse-pick__item {
    justify-content: flex-start;
    width: 100%;
}

.fuse-pick.fuse-pick--compact .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--fuse-primary);
}

/* =========================================================================
   PAGINA-OVERGANGEN — cross-document View Transitions API
   Elke menuklik is een volledige server-navigatie; deze regel laat de browser
   die navigatie met een zachte crossfade animeren in plaats van een witte
   flits. Browsers zonder ondersteuning navigeren gewoon zoals voorheen
   (geen JavaScript, geen risico voor bestaande functionaliteit).
   ========================================================================= */
@view-transition {
    navigation: auto;
}

/* Zuivere crossfade: we behouden de standaard fade van de browser (alleen
   opacity) en versnellen die iets. Geen verschuiving — een translate zou
   bovenaan een onbedekt strookje (witte streep) opleveren tijdens de overgang. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease;
}

/* Respecteer de systeemvoorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* Id-markering vooraan een tabelregel (bv. het database-overzicht). Thema-bewust
   via de kleur-tokens; wordt een pil-vorm bij meercijferige id's. */
.fuse-id-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--fuse-surface-alt);
    border: 1px solid var(--fuse-border);
    color: var(--fuse-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}

/* Mini-dashboard — stat-tegels en staafgrafiek (bv. aanmeldhistorie). */
.fuse-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
}

.fuse-stat {
    background: var(--fuse-surface-alt);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius-sm);
    padding: 0.85rem 1rem;
}

.fuse-stat__value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--fuse-text);
    line-height: 1.2;
}

.fuse-stat__label {
    font-size: 0.78rem;
    color: var(--fuse-muted);
}

.fuse-bars {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
}

.fuse-bars__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.fuse-bars__track {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: flex-end;
}

.fuse-bars__bar {
    width: 100%;
    background: var(--fuse-primary);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}

.fuse-bars__label {
    font-size: 0.68rem;
    color: var(--fuse-muted);
    white-space: nowrap;
}

/* ===================================================================== */
/* Buildbadge (rechtsonder) + release notes-pagina                       */
/* ===================================================================== */

.fuse-build-badge {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    background: var(--fuse-primary);
    border-radius: 999px;
    box-shadow: var(--fuse-shadow-sm);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}

.fuse-build-badge:hover,
.fuse-build-badge:focus {
    opacity: 1;
    transform: translateY(-1px);
    background: var(--fuse-primary-hover);
    color: #fff;
    text-decoration: none;
}

.fuse-build-badge .material-symbols-outlined {
    font-size: 0.82rem;
    line-height: 1;
}

/* Op de homepage blendt de badge met de pagina-achtergrond (--fuse-bg) zodat
   hij daar subtieler oogt. Tekst in heading-kleur met een lichte rand voor
   leesbaarheid. */
.fuse-build-badge--blend {
    background: var(--fuse-bg);
    color: var(--fuse-text-heading);
    border: 1px solid var(--fuse-border);
    box-shadow: none;
    opacity: 0.6;
}

.fuse-build-badge--blend:hover,
.fuse-build-badge--blend:focus {
    background: var(--fuse-bg);
    color: var(--fuse-text-heading);
    opacity: 1;
}

/* Op smalle schermen alleen het icoon tonen om de content niet te overlappen. */
@media (max-width: 575.98px) {
    .fuse-build-badge__label {
        display: none;
    }
}

.fuse-release-timeline {
    position: relative;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
}

.fuse-release {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}

/* Verticale tijdlijn-lijn die door de markers loopt. */
.fuse-release::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 1.25rem;
    bottom: -0.25rem;
    width: 2px;
    background: var(--fuse-border);
}

.fuse-release:last-child::before {
    display: none;
}

.fuse-release__marker {
    width: 1rem;
    height: 1rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: var(--fuse-primary);
    border: 3px solid var(--fuse-surface);
    box-shadow: 0 0 0 1px var(--fuse-border);
    z-index: 1;
}

.fuse-release__body {
    background: var(--fuse-surface);
    border: 1px solid var(--fuse-border);
    border-radius: var(--fuse-radius);
    box-shadow: var(--fuse-shadow-sm);
    padding: 1rem 1.25rem;
}

.fuse-release__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.fuse-release__version {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fuse-primary);
    background: var(--fuse-surface-alt);
    border: 1px solid var(--fuse-border);
    border-radius: 999px;
}

.fuse-release__date {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--fuse-muted);
}

.fuse-release__date .material-symbols-outlined {
    font-size: 0.95rem;
}

.fuse-release__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fuse-text-heading);
    margin: 0.15rem 0 0.75rem;
}

.fuse-release__group {
    margin-bottom: 0.85rem;
}

.fuse-release__group:last-child {
    margin-bottom: 0;
}

.fuse-release__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--fuse-radius-sm);
    color: var(--fuse-muted);
    background: var(--fuse-surface-alt);
    border: 1px solid var(--fuse-border);
}

.fuse-release__chip .material-symbols-outlined {
    font-size: 0.9rem;
}

/* Kleuraccent per categorie. */
.fuse-release__group--nieuw .fuse-release__chip {
    color: var(--fuse-success);
    border-color: var(--fuse-success);
}

.fuse-release__group--verbeterd .fuse-release__chip {
    color: var(--fuse-primary);
    border-color: var(--fuse-primary);
}

.fuse-release__group--opgelost .fuse-release__chip {
    color: #b8860b;
    border-color: var(--fuse-warning);
}

.fuse-release__group--beveiliging .fuse-release__chip {
    color: var(--fuse-danger);
    border-color: var(--fuse-danger);
}

.fuse-release__list {
    margin: 0;
    padding-left: 1.1rem;
}

.fuse-release__list li {
    font-size: 0.9rem;
    color: var(--fuse-text);
    margin-bottom: 0.25rem;
}

/* Vrije rich-text-body (homepage-berichten gebruiken dezelfde tijdlijn-stijl). */
.fuse-release__text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--fuse-text);
}

.fuse-release__text > :first-child {
    margin-top: 0;
}

.fuse-release__text > :last-child {
    margin-bottom: 0;
}

/* Homepage-berichten: losse kaarten in de release-stijl, zonder tijdlijn. */
.fuse-announce-list {
    display: grid;
    gap: 0.85rem;
}

/* Severity-accent op de chip per bericht. */
.fuse-release--info .fuse-release__chip {
    color: var(--fuse-primary);
    border-color: var(--fuse-primary);
}

.fuse-release--success .fuse-release__chip {
    color: var(--fuse-success);
    border-color: var(--fuse-success);
}

.fuse-release--warning .fuse-release__chip {
    color: #b8860b;
    border-color: var(--fuse-warning);
}

.fuse-release--critical .fuse-release__chip {
    color: var(--fuse-danger);
    border-color: var(--fuse-danger);
}