/* =========================================================================
   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 {
    --fuse-primary: #0077BF;
    --fuse-primary-hover: #005a91;
    --fuse-bg: #9bc2dd;
    --fuse-surface: #ffffff;
    --fuse-surface-alt: #f7fafc;
    --fuse-border: #dee2e6;
    --fuse-border-strong: #ced4da;
    --fuse-text: #212529;
    --fuse-text-heading: #003e66;
    --fuse-muted: #6c757d;
    --fuse-success: #198754;
    --fuse-warning: #ffc107;
    --fuse-warning-soft: #fff8e1;
    --fuse-danger: #dc3545;
    --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-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='%236c757d' 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;
    min-width: 0;
}

/* ---------- 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);
    }

/* 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.35rem;
    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. */
}

/* 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;
    }

    /* Sidebar-bar: waffle verbergen, hamburger centreren */
    body.fuse-sidebar-collapsed .fuse-sidemenu__bar .fuse-waffle-btn {
        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;
    }

    /* Op desktop is de sidebar altijd zichtbaar (full of icon-only) —
       topbar-toggle alleen nodig op mobiel */
    .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;
    }

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

    body.fuse-sidebar-open .fuse-sidebar {
        transform: translateX(0);
    }

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

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

    /* .fuse-sidebar-collapsed niet relevant op mobiel — open klasse beheert het */
    body.fuse-sidebar-collapsed .fuse-sidebar {
        transform: translateX(-100%);
    }
}

/* ---------- 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);
    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;
    }

    .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: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}

/* ---------- aurora background for main app ---------- */
/* Zelfde aurora-aesthetiek als de loginpagina, maar lichter zodat witte
   cards prettig blijven oplichten bij dagelijks gebruik. */
body:not(.fuse-auth-body) {
    background:
        radial-gradient(ellipse 60% 50% at 10% 10%, rgba(180, 220, 245, 0.85) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 95% 80%, rgba(125, 178, 215, 0.75) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(143, 195, 230, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, #aaccdf 0%, #9bc2dd 45%, #8bb5d2 100%) !important;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    color: var(--fuse-text);
}

/* 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 */
}

/* Dark theme component-overrides */
:root.fuse-dark .fuse-hero__title { color: var(--fuse-text-heading); }
: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-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 > 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;
}

: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 */
    body:not(.fuse-auth-body)::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
        z-index: 0;
    }

/* 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;
    padding: 1.5rem clamp(0.75rem, 2.5vw, 2rem) 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. */
.fuse-main > .container.body-content {
    max-width: none;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Form-pages willen wel binnen een leesbare breedte blijven */
.fuse-page--narrow {
    margin: 0 auto;
    max-width: 64rem;
    padding: 1.5rem 1rem 3rem;
}

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

.fuse-hero__title {
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0;
    color: #003e66;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.fuse-hero__subtitle {
    color: #005a91;
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    max-width: 60ch;
}

/* breadcrumb — staat boven de hero-titel */
.fuse-breadcrumb {
    display: flex;
    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;
    }

.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);
    }

    .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.65rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius-sm);
    font-size: 0.9rem;
    background: var(--fuse-surface);
    min-width: 9rem;
}

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

/* ---------- 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: #f7fafc;
        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;
    word-break: break-word;
}

.fuse-cell-user__email {
    font-size: 0.74rem;
    color: var(--fuse-muted);
    line-height: 1.2;
    margin-top: 0.1rem;
    word-break: break-word;
}

/* checkboxen in tabel iets compacter en gecentreerd */
.fuse-table .text-center input[type="checkbox"] {
    margin: 0;
}

/* ---------- 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;
    }

    .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: linear-gradient(90deg, #2c79c2 0%, #1e5a96 100%);
    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: 600;
    color: #003e66;
    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.65rem;
    border: 1px solid var(--fuse-border-strong);
    border-radius: var(--fuse-radius-sm);
    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='%236c757d' 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(0,119,191,.15);
    }

    .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: rgba(13, 110, 253, 0.10);
    color: var(--fuse-muted);
    font-size: 0.7rem;
    font-weight: 600;
    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-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fuse-text);
}

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

/* 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-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fuse-muted);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.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;
        stroke-dasharray: 2 4;
        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: var(--fuse-muted);
    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;
}

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

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

/* 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-muted);
    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: space-between;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--fuse-border);
    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 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);
}