/* =============================================================================
 * argus.css — LOGISZ-huisstijl voor Argus
 *
 * Afgeleid van bi.logisz.com/wwwroot/css/bil.scss (LOGISZ-brand, login, app-chrome
 * en componentbibliotheek). Klassenamen zijn bewust gelijk gehouden aan BI, zodat
 * beide apps later één gedeelde stylesheet kunnen gebruiken. Argus-specifieke
 * stijlen staan onderaan in de sectie 'Argus'.
 * ============================================================================= */

/* ── Minimale reset (Bootstrap reboot is niet meer geladen) ──────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body              { margin: 0; padding: 0; height: 100%; min-height: 100%; }

/* ── Brand: LOGISZ (default) ─────────────────────────────────────────────── */
:root,
[data-brand="logisz"] {
    /* Universeel — bruikbaar op elke pagina */
    --accent:                   #FFBF00;   /* brand-accent (amber); was #FFFFFF */

    /* Legacy/classic-admin tokens (stonden in site.css op `*`) */
    --background:               #F7F7F7;
    --white:                    #FFFFFF;
    --black:                    #000000;
    --logisz-amber:             var(--accent, #FFBF00);   /* alias — switcht mee met brand */
    --on-accent:                #111827;
    --heading-color:            #FFFFFF;
    --text:                     #ffffff;
    --text-muted:               rgba(255, 255, 255, 0.7);

    --bg-color:                 #000000;
    --card-bg:                  rgba(20, 20, 20, 0.7);
    --card-bg-fallback:         rgba(20, 20, 20, 0.97);   /* zonder backdrop-filter */
    --card-border:              rgba(255, 255, 255, 0.12);
    --card-shadow:              0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --chrome-bg:                #000000;                    /* sidebar + blade — bij LOGISZ = bg-color */
    --text-on-body:             #ffffff;                    /* tekst die op body-bg zweeft (page-header, empty-state) */
    --text-muted-on-body:       rgba(255, 255, 255, 0.7);

    --surface-bg:               rgba(255, 255, 255, 0.04);  /* sidebar, panel-vlakken */
    --surface-bg-hover:         rgba(255, 255, 255, 0.08);  /* hover op lijstitems, icon-buttons */

    --bg-elev:                  #0c0c0c;                    /* composer-, topbar-niveau */
    --bg-elev-2:                #161616;                    /* hover surfaces, user-bubble fallback */
    --bg-elev-3:                #222222;                    /* sterkere hover */
    --border-subtle:            rgba(255, 255, 255, 0.06);  /* glass-border, topbar separator */
    --text-faint:               #9a9a9a;                    /* derde tier (zwakker dan --text-muted) */

    --accent-hover:             #ffd33d;                    /* hover-state op --accent */
    --accent-soft:              rgba(255, 191, 0, 0.14);    /* zachte accent-wash */

    --pill-border:              rgba(255, 255, 255, 0.18);  /* nav-pill default */
    --pill-border-hover:        rgba(255, 255, 255, 0.32);
    --pill-border-active:       rgba(255, 255, 255, 0.45);
    --pill-bg-hover:            rgba(255, 255, 255, 0.06);
    --pill-bg-active:           rgba(255, 255, 255, 0.14);
    --pill-text-active:         #ffffff;

    --glass-bg:                 rgba(0, 0, 0, 0.22);        /* topbar */
    --glass-bg-soft:            rgba(0, 0, 0, 0.08);

    --user-bubble:              rgba(0, 0, 0, 0.45);
    --user-bubble-border:       rgba(255, 255, 255, 0.18);
    --user-bubble-text:         #ffffff;

    --danger:                   #e06b5e;                    /* zacht rood, voor destructieve acties */

    --logo-bg:                  #000000;
    --logo-image:               url('/images/logisz/logo.webp');
    --logo-shadow:              0 12px 28px rgba(0, 0, 0, 0.5);

    --font-family:              'Poppins', sans-serif;
    --font-mono:                'Poppins', sans-serif; /*'Consolas', 'Monaco', monospace;*/ /* monospace: code, timestamps, tool-tags */

    /* Chat-specifiek — alleen op de chat-pagina */
    --chat-bubble-user-bg:      rgba(255, 255, 255, 0.10);
    --chat-bubble-user-text:    var(--text);
    --chat-bubble-assistant-bg: transparent;

    /* Chat-page energizer-positionering: shift mee met de sidebar zodat
       de foto visueel midden in het chat-paneel komt, niet in het viewport */
    --chat-bg-position:           calc(50% + 136px) center;   /* sidebar open: 136px = halve sidebar */
    --chat-bg-position-collapsed: center center;              /* sidebar dicht: viewport-center */

    /* Login-specifiek — alleen op de login-splash */
    --login-bg-image:           url('/images/logisz/background.jpg');
    --login-bg-size:            cover;
    --login-bg-position:        center center;
    --login-vignette:           rgba(0, 0, 0, 0.35);
    --login-pill-bg:            #000000;
    --login-pill-text:          #ffffff;
    --login-pill-border:        rgba(255, 255, 255, 0.18);
    --login-pill-shadow:        0 10px 32px rgba(0, 0, 0, 0.42);
    --login-pill-shadow-hover:  0 16px 42px rgba(0, 0, 0, 0.55);
    --login-glow:               #ffffff;
}


/* ── Poppins webfonts (lokaal in wwwroot/webfonts) ───────────────────────── */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../webfonts/poppins-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../webfonts/poppins-v21-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../webfonts/poppins-v21-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../webfonts/poppins-v21-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../webfonts/poppins-v21-latin-900.woff2') format('woff2'); }

/* =============================================================================
 * Login pagina
 * Class wordt gezet via ViewData["BodyClass"] = "bil-login" in Login.cshtml.
 * ============================================================================= */

body.bil-login {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg-color);
    background-image: var(--login-bg-image);
    background-size: var(--login-bg-size);
    background-position: var(--login-bg-position);
    background-repeat: no-repeat;
    font-family: var(--font-family);
    color: var(--text);
    position: relative;
}

/* Vignet zodat de card visueel ploft op de energizer */
body.bil-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, var(--login-vignette) 100%);
    pointer-events: none;
    z-index: 0;
}

/* _Layout footer verbergen op de login (fullscreen splash, geen © daaronder) */
body.bil-login footer { display: none; }

/* ── Card ────────────────────────────────────────────────────────────────── */

.bil-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 64px 36px 40px;        /* extra top voor de overlappende logo */
    text-align: center;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bil-fade-in 0.5s ease-out both;
}

@keyframes bil-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bil-login-logo {
    position: absolute;
    top: -44px;                     /* 50% boven de card-rand */
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 88px;
    padding: 8px;                   /* inset zodat logo niet de cirkelrand raakt */
    margin: 0;
    background-color: var(--logo-bg);
    background-image: var(--logo-image);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box; /* logo respecteert de padding-inset */
    border: 1px solid var(--card-border);         /* zelfde rand als de card */
    border-radius: 50%;
    box-shadow: var(--logo-shadow);
}

.bil-login-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    border-radius: 999px;
}

.bil-login-heading {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--heading-color);
    text-transform: none;     /* override h1.screamer uit logisz.css */
    padding-bottom: 0;        /* override h1.screamer uit logisz.css */
}

.bil-login-subhead {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 280px;
    font-weight: 400;
}

/* ── Pill knop met roterende comet-glow ──────────────────────────────────── */

@property --bil-pill-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.bil-login-pill-wrapper {
    position: relative;
    display: inline-block;
    transition: transform 0.15s ease;
}

.bil-login-pill-wrapper:hover  { transform: scale(1.03); }
.bil-login-pill-wrapper:active { transform: scale(0.98); }

.bil-login-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--login-pill-bg);
    color: var(--login-pill-text);
    border: 1px solid var(--login-pill-border);
    border-radius: 999px;
    padding: 13px 26px 13px 20px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-decoration: none;
    box-shadow: var(--login-pill-shadow);
    transition: box-shadow 0.2s ease;
    white-space: nowrap;
}

.bil-login-pill-wrapper:hover .bil-login-pill { box-shadow: var(--login-pill-shadow-hover); }

.bil-login-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.bil-login-pill-ms {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.bil-login-pill-spinner {
    width: 18px;
    height: 18px;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Trust signal onder de pill ──────────────────────────────────────────── */

.bil-login-trust {
    margin: 22px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
}

.bil-login-trust i { font-size: 11px; }

/* Scherpe ring direct op de pill-rand (mask = alleen border zichtbaar) */
.bil-login-pill-glow {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    pointer-events: none;
    z-index: 3;
}

.bil-login-pill-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--bil-pill-angle, 0deg),
        transparent 0deg,
        color-mix(in srgb, var(--login-glow) 20%, transparent) 10deg,
        color-mix(in srgb, var(--login-glow) 70%, transparent) 24deg,
        var(--login-glow) 35deg,
        color-mix(in srgb, var(--login-glow) 70%, transparent) 46deg,
        color-mix(in srgb, var(--login-glow) 20%, transparent) 60deg,
        transparent 75deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: bil-pill-spin 6s linear infinite;
}

/* Zachte halo achter de pill (blur, leakt buiten de pill-rand) */
.bil-login-pill-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: conic-gradient(
        from var(--bil-pill-angle, 0deg),
        transparent 0deg,
        color-mix(in srgb, var(--login-glow) 30%, transparent) 25deg,
        color-mix(in srgb, var(--login-glow) 60%, transparent) 45deg,
        color-mix(in srgb, var(--login-glow) 30%, transparent) 65deg,
        transparent 80deg,
        transparent 360deg
    );
    filter: blur(10px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    animation: bil-pill-spin 6s linear infinite;
}

@keyframes bil-pill-spin {
    to { --bil-pill-angle: 360deg; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
    .bil-login-card    { padding: 52px 24px 30px; }
    .bil-login-heading { font-size: 24px; }
    .bil-login-logo    { width: 72px; height: 72px; top: -36px; padding: 6px; }
    .bil-login-pill    { padding: 11px 20px 11px 16px; font-size: 14px; }
}

/* ── Fallback: geen backdrop-filter (oudere browsers) ────────────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bil-login-card {
        background: var(--card-bg-fallback);
    }
}

/* ── Reduced transparency (Windows / macOS toegankelijkheid) ─────────────── */

@media (prefers-reduced-transparency: reduce) {
    .bil-login-card {
        background: var(--card-bg-fallback);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bil-login-card { animation: none; }
    .bil-login-pill-glow::before,
    .bil-login-pill-wrapper::before {
        animation: none;
        background: var(--login-glow);
        opacity: 0.25;
    }
}

/* =============================================================================
 * Chat pagina
 * Layout: body.chat-layout met sidebar (links) + main (rechts).
 * Topbar en composer drijven absoluut over de scrollende messages heen.
 * ============================================================================= */

/* Alpine.js cloak — verbergt elementen tot Alpine geïnitialiseerd is */
[x-cloak] { display: none !important; }

body.chat-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-color);
    background-image: var(--login-bg-image);
    background-size: var(--login-bg-size);
    background-position: var(--chat-bg-position);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--font-family);
    transition: background-position .25s ease;          /* schuift mee met sidebar-collapse */
}

/* Sidebar volledig dicht → bg terug naar collapsed-positie (LOGISZ centreert;
   Berdal blijft op z'n offscreen-plek omdat beide tokens daar hetzelfde zijn) */
body.chat-layout:has(.chat-sidebar.collapsed) {
    background-position: var(--chat-bg-position-collapsed);
}

body.chat-layout main.chat-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    max-width: unset;
    margin: 0;
    background: transparent;        /* energizer-bg schijnt door */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;             /* anker voor absoluut-positioned topbar + composer */
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */

.chat-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;             /* content-driven; geen vaste hoogte */
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--border-subtle);
}

.chat-topbar-toggle {
    background: var(--pill-bg-hover);
    color: var(--text);
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background .12s ease, border-color .12s ease;
    flex-shrink: 0;
}
.chat-topbar-toggle:hover {
    background: var(--pill-bg-active);
    border-color: var(--pill-border-hover);
}

.chat-topbar-spacer { flex: 1; }

/* ── Custom dropdown (vervangt native <select>) ──────────────────────────── */

.bil-dropdown {
    position: relative;
    display: inline-block;
}

.bil-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: background-color .15s, border-color .15s;
}
.bil-dropdown-trigger:hover { border-color: var(--pill-border-hover); }
.bil-dropdown-trigger.is-open { border-color: var(--pill-border-active); }

.bil-dropdown-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bil-dropdown-trigger i {
    font-size: 9px;
    color: var(--text-muted);
    transition: transform .15s ease;
    flex-shrink: 0;
}
.bil-dropdown-trigger.is-open i { transform: rotate(180deg); }

.bil-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-width: 320px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 4px;
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bil-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.bil-dropdown-item:hover {
    background: var(--pill-bg-hover);
}
.bil-dropdown-item.is-active {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 500;
}
.bil-dropdown-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.chat-sidebar {
    width: 272px;
    min-width: 272px;
    transition: width 0.2s ease, min-width 0.2s ease;
    background: var(--chrome-bg);                 /* brand-aware: zwart op LOGISZ, licht op Berdal */
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--border-subtle);
    position: relative;
    z-index: 10;
}

.chat-new-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 7px 16px 7px 40px;     /* extra left voor de icon-badge */
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    min-height: 34px;
    transition: background .15s ease, transform .1s ease;
}
.chat-new-btn:hover  { background: var(--accent-hover); }
.chat-new-btn:active { transform: scale(.97); }

/* In de topbar moet de knop niet full-width zijn */
.chat-topbar .chat-new-btn { width: auto; flex-shrink: 0; }

.chat-new-btn-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--on-accent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}
.chat-sidebar-list::-webkit-scrollbar       { width: 4px; }
.chat-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: var(--pill-bg-active); border-radius: 2px; }

/* Nav-items (link naar andere pagina's) */
.chat-sidebar-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 7px 16px 7px 40px;
    margin-bottom: 6px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chat-sidebar-nav-item:hover {
    background: var(--pill-bg-hover);
    border-color: var(--pill-border-hover);
    color: var(--text);                       /* overschrijft eventuele globale a:hover */
}
.chat-sidebar-nav-item.active {
    background: var(--pill-bg-active);
    border-color: var(--pill-border-active);
    color: var(--pill-text-active);
    font-weight: 600;
}
.chat-sidebar-nav-item.active:hover { color: var(--pill-text-active); }

.chat-sidebar-nav-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}

.chat-sidebar-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-sidebar-section-label {
    padding: 12px 10px 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

/* Header boven de nav: sectie-label links, sluitknop rechts */
.chat-sidebar-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 6px 2px 0 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-faint);
    transition: color .15s ease, background .15s ease;

    &:hover {
        color: var(--text);
        background: var(--surface-bg-hover);
    }
}

/* In de collapsed hover-popover heeft sluiten geen functie — knop weg */
.chat-sidebar.collapsed .chat-sidebar-close {
    display: none;
}

/* ── Beheer-groep: collapsible, vastgepind boven de footer ───────────────── */
.chat-sidebar-management {
    flex-shrink: 0;
    padding: 6px 8px;
    border-top: 1px solid var(--border-subtle);
}

/* Toggle oogt als een sectie-label, niet als een nav-pill */
.chat-sidebar-management-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    transition: color .15s ease, background .15s ease;

    &:hover {
        color: var(--text);
        background: var(--surface-bg-hover);
    }
}

.chat-sidebar-management-chevron {
    font-size: 10px;
    transition: transform .15s ease;

    &.open { transform: rotate(90deg); }
}

/* Compacte sub-items: geen pill-rand, klein icoon, lichte inspring */
.chat-sidebar-management-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 14px;
    margin-top: 2px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;

    i {
        width: 16px;
        text-align: center;
        font-size: 12px;
        color: var(--text-faint);
    }

    &:hover {
        background: var(--surface-bg-hover);
        color: var(--text);
    }

    &.active {
        background: var(--pill-bg-active);
        color: var(--pill-text-active);
        font-weight: 600;

        i { color: var(--accent); }
    }
}

/* Recente chats */
.chat-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 16px;
    margin-bottom: 6px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.chat-sidebar-item:hover {
    background: var(--pill-bg-hover);
    border-color: var(--pill-border-hover);
}
.chat-sidebar-item.active {
    background: var(--pill-bg-active);
    border-color: var(--pill-border-active);
    color: var(--pill-text-active);
    font-weight: 600;
}
.chat-sidebar-item-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pin- en delete-knop: hover-only, muted styling */
.chat-sidebar-item-pin,
.chat-sidebar-item-delete {
    opacity: 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-faint);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    transition: opacity .12s, color .12s, background .12s;
}
.chat-sidebar-item:hover .chat-sidebar-item-pin,
.chat-sidebar-item:hover .chat-sidebar-item-delete,
.chat-sidebar-item.active .chat-sidebar-item-delete { opacity: 1; }

/* Pin altijd zichtbaar als chat gepind is — verhuist naar links (state-indicator) */
.chat-sidebar-item.is-pinned .chat-sidebar-item-pin {
    opacity: 1;
    color: var(--accent);
    order: -1;
    margin-left: -8px;              /* 8px van links, match delete rechts */
    margin-right: 2px;
}
.chat-sidebar-item-pin:hover {
    background: var(--pill-bg-active);
    color: var(--accent);
}

/* Delete hover → zacht rode wash + danger-kleur */
.chat-sidebar-item-delete:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
}

.chat-sidebar-empty {
    padding: 16px 8px;
    font-size: 13px;
    color: var(--text-faint);
    text-align: center;
}

.chat-sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.chat-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-sidebar-avatar {
    position: relative;
    overflow: hidden;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;

    /* Azure-profielfoto over de initiaal heen; bij 404 verwijdert onerror de img
       en blijft de initiaal zichtbaar */
    img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
}

.chat-sidebar-user-info { flex: 1; min-width: 0; }

.chat-sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-sidebar-user-sub { font-size: 11px; color: var(--text-muted); }

.chat-logout-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint);
    cursor: pointer;
    padding: 6px 7px;
    border-radius: 999px;
    font-size: 14px;
    transition: color .15s, background .15s, border-color .15s;
}
.chat-logout-btn:hover {
    color: var(--text);
    background: var(--pill-bg-hover);
    border-color: var(--pill-border);
}

/* Sidebar collapsed state — volledig dicht (POC-gedrag) */
.chat-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}
.chat-sidebar.collapsed > * {
    visibility: hidden;
    pointer-events: none;
}


/* =============================================================================
 * Admin / Settings / Management-pagina's (Syncs, Rechtenbeheer, etc.)
 * Pagina's binnen body.chat-layout met dezelfde sidebar + topbar, maar een
 * scrollende main met cards (POC settings-stijl).
 * ============================================================================= */

body.chat-layout main.bil-page {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;              /* main scrollt niet — topbar blijft staan */
    position: relative;            /* anker voor absolute chat-topbar */
    display: flex;
    flex-direction: column;
}

/* Scroll-wrapper: header + body scrollen hierbinnen, achterlangs de topbar door */
.bil-page-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.bil-page-content::-webkit-scrollbar       { width: 5px; }
.bil-page-content::-webkit-scrollbar-track { background: transparent; }
.bil-page-content::-webkit-scrollbar-thumb { background: var(--pill-bg-active); border-radius: 3px; }

.bil-page-header {
    padding: calc(56px + 28px) 24px 0;   /* clear topbar + adem */
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.bil-page-title {
    margin: 0;
    padding: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-on-body);            /* zweeft op donker body-bg, dus wit voor beide brands */
    text-transform: none;
}

.bil-page-sub {
    margin: 6px 0 0;
    color: var(--text-muted-on-body);
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
}

.bil-page-body {
    padding: 24px 24px 60px;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.bil-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px 24px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--card-shadow);
    color: var(--text);
}

.bil-card-title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    line-height: 1.3;
}

.bil-card-desc {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Section divider with caps-header inside a card */
.bil-card-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pill-border);
}
.bil-card-block-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

/* ── Rows binnen een card (label/sub links, control rechts) ──────────────── */

.bil-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--pill-border);
}
.bil-row:first-of-type { border-top: none; padding-top: 0; }

.bil-row-text { flex: 1; min-width: 0; }

.bil-row-title {
    display: block;
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.bil-row-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.bil-row-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */

.bil-input,
.bil-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--pill-bg-hover);
    border: 1px solid var(--pill-border);
    color: var(--text);
    border-radius: 8px;
    height: 34px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1;
    outline: none;
    transition: border-color .12s, background .12s;
}

.bil-input:hover,
.bil-select:hover { border-color: var(--pill-border-hover); }

.bil-input:focus,
.bil-select:focus {
    border-color: var(--accent);
    background: var(--pill-bg-active);
}

.bil-input::placeholder { color: var(--text-faint); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.bil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;            /* content links uitlijnen, niet midden */
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    background: var(--pill-bg-hover);
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
}

/* Knoppen mét icon-badge: padding-left krimpt zodat de badge dicht bij de rand
   zit — match visueel met nav-items en chat-new-btn (badge ~6px van linkerrand) */
.bil-btn:has(.bil-icon-badge) {
    padding-left: 6px;
}
.bil-btn:hover:not(:disabled) {
    background: var(--pill-bg-active);
    border-color: var(--pill-border-hover);
}
.bil-btn:active:not(:disabled) { transform: scale(.97); }
.bil-btn:disabled { opacity: .4; cursor: not-allowed; }

.bil-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}
.bil-btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Inline icon-badge — gele cirkel met icoon, voor gebruik binnen .bil-btn,
   .chat-new-btn, sidebar nav-items. Match visueel met de POC nav-pattern. */
.bil-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    flex-shrink: 0;
    font-size: 10px;
}

/* ── Status pills ────────────────────────────────────────────────────────── */

.bil-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pill-bg-active);
    color: var(--text-muted);
}
.bil-pill-success { background: color-mix(in srgb, #4ade80 22%, transparent);    color: #4ade80; }
.bil-pill-warning { background: color-mix(in srgb, #fbbf24 22%, transparent);    color: #fbbf24; }
.bil-pill-danger  { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.bil-pill-info    { background: color-mix(in srgb, #60a5fa 22%, transparent);    color: #60a5fa; }

/* ── Banner (error/warning header) ───────────────────────────────────────── */

.bil-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
}
.bil-banner-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
}

/* ── Loading / Empty placeholder ─────────────────────────────────────────── */

.bil-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-faint);
    font-size: 14px;
}
.bil-placeholder i { font-size: 24px; display: block; margin-bottom: 10px; }

/* ── Toggle switch (POC) ─────────────────────────────────────────────────── */

.bil-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--pill-bg-active);
    border: 1px solid var(--pill-border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s, border-color .18s;
}
.bil-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text);
    border-radius: 50%;
    transition: left .18s, background .18s;
}
.bil-switch:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.bil-switch:checked::after {
    left: 20px;
    background: var(--on-accent);
}

/* ── Tabs (gebruikt op AccessManagement) ─────────────────────────────────── */

.bil-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.bil-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 13px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--font-family);
    margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.bil-tab:hover { color: var(--text); }
.bil-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── Tabel (run-history e.d.) ────────────────────────────────────────────── */

.bil-table {
    width: 100%;
    table-layout: fixed;                /* respecteer th-widths, voorkomt overflow */
    border-collapse: collapse;
    font-size: 12px;
}
.bil-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--pill-border);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    background: transparent;
}
.bil-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text);
    font-size: 12px;
    word-break: break-word;             /* lange strings (errors, URLs) breken af */
    overflow-wrap: anywhere;
    vertical-align: top;                /* lange tekst flowt netjes vanaf de top */
}
.bil-table tr:last-child td { border-bottom: none; }
.bil-table tr td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Interactive table — hele rij klikbaar, hover-highlight */
.bil-table.is-clickable tbody tr {
    cursor: pointer;
    transition: background .12s;
}
.bil-table.is-clickable tbody tr:hover {
    background: var(--pill-bg-hover);
}

/* Samenvattings-tekst in tabel-cel ("Admin, Editor +2 meer") */
.bil-table-summary {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.bil-table-summary.is-empty { color: var(--text-faint); font-style: italic; }

/* Single-line tables: alles op één regel met ellipsis. Overschrijft de
   word-break die we voor breed-wrappende tabellen (Syncs historie) hebben. */
.bil-table--single-line td,
.bil-table--single-line th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}

/* ── Stat-tegels (CRM Assistant e.d.): compacte cijfers met label ────────── */
.bil-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.bil-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--surface-bg);
    min-width: 0;
}

.bil-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bil-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    line-height: 1.3;
}

/* Meta-regel onder de stats: "Mail bijgewerkt tot … · Laatst uitgevoerd …" */
.bil-stat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);

    i {
        color: var(--text-faint);
        margin-right: 5px;
    }
}

/* Naam-cel met badge: flex-container zodat naam-text afkapt maar badge zichtbaar blijft */
.bil-cell-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;                /* nodig zodat de child kan shrinken */
}
.bil-cell-name-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bil-cell-name .bil-count-badge {
    flex-shrink: 0;              /* badge nooit shrinken/wrappen */
    margin-left: 0;              /* gap regelt afstand */
}

/* ── Chip — kleine toggleable knop (rol/recht-toewijzing) ────────────────── */
/* Principe: hover op een niet-actieve chip licht alleen de border + text op.
   Op een actieve chip blijft de tekst DONKER (on-accent) — anders krijg je
   wit op geel. Daarom is de inactive-hover scoped op :not(.is-active),
   en zet de active-hover de color expliciet. */

.bil-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--pill-border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 3px 10px;
    font-family: var(--font-family);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.bil-chip:not(.is-active):hover:not(:disabled) {
    border-color: var(--pill-border-hover);
    color: var(--text);
}
.bil-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
}
.bil-chip.is-active:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);                    /* defensief — geen wit op geel */
}
.bil-chip:disabled { opacity: .5; cursor: not-allowed; }

/* Chip-group: flex-wrapper voor strip van chips + bulk-acties */
.bil-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Verticale scheider tussen toegewezen en beschikbare chips */
.bil-chip-divider {
    width: 1px;
    height: 16px;
    background: var(--pill-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Subtiele bulk-actie chip — tekstueel + icoon, geen border om visueel
   onderscheid te maken van echte chips */
.bil-chip-bulk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-family: var(--font-family);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.bil-chip-bulk:hover:not(:disabled) {
    color: var(--text);
    background: var(--pill-bg-hover);
}
.bil-chip-bulk:disabled { opacity: .4; cursor: not-allowed; }

/* Inline count-badge naast een naam ("3 rollen") */
.bil-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--pill-bg-active);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* ── Tag — info-label, optioneel met close-knop ──────────────────────────── */

.bil-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
}
.bil-tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    border-radius: 50%;
    transition: background .12s, color .12s;
}
.bil-tag-close:hover {
    background: var(--pill-bg-active);
    color: var(--text);
}

/* ── Icon-only buttons (klein rondje voor close/edit/inline-action) ─────── */

.bil-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--pill-border);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;                       /* expliciet — niet erven van body */
    transition: color .12s, background .12s, border-color .12s;
}
.bil-icon-btn:hover {
    color: var(--text);
    background: var(--pill-bg-hover);
    border-color: var(--pill-border-hover);
}

.bil-icon-btn-borderless {
    border-color: transparent;
}

/* ── Pad/code-weergave ──────────────────────────────────────────────────── */

.bil-code-block {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    background: var(--pill-bg-hover);
    padding: 8px 12px;
    border-radius: 6px;
    word-break: break-all;
}

/* ── Folder-tree row (wiki-toegang) ──────────────────────────────────────── */

.bil-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 1px;
    transition: background .12s;
}
.bil-folder-row:hover { background: var(--pill-bg-hover); }
.bil-folder-row.has-restrictions {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bil-folder-row.has-restrictions:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.bil-folder-row-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.bil-folder-row-icon { color: var(--text-muted); flex-shrink: 0; font-size: 13px; }
.bil-folder-row.has-restrictions .bil-folder-row-icon { color: var(--accent); }

.bil-folder-row-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}
.bil-folder-row-path {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bil-folder-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Edit-knop altijd in flow (reserveert ruimte), fade in op row-hover */
.bil-folder-row .bil-icon-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
.bil-folder-row:hover .bil-icon-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ── Blade (slide-in side panel voor edit-forms) ─────────────────────────── */

.bil-blade-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.bil-blade {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 440px;
    max-width: 95vw;
    background: var(--chrome-bg);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 51;
    color: var(--text);
    transition: transform .25s ease;
}
.bil-blade.is-closed { transform: translateX(100%); }

.bil-blade-content { padding: 28px; }

.bil-blade-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.bil-blade-title {
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
}
.bil-blade-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pill-border);
}

/* =============================================================================
 * Accessibility — universele :focus-visible ring voor keyboard-navigatie
 * Alleen zichtbaar bij Tab-navigatie (niet bij muis-klik), dus geen visuele
 * "bloop" voor muisgebruikers. Outline gebruikt --accent voor brand-consistent.
 * ============================================================================= */

.bil-btn:focus-visible,
.bil-chip:focus-visible,
.bil-chip-bulk:focus-visible,
.bil-tab:focus-visible,
.bil-icon-btn:focus-visible,
.bil-tag-close:focus-visible,
.bil-switch:focus-visible,
.chat-new-btn:focus-visible,
.chat-send-btn:focus-visible,
.chat-topbar-toggle:focus-visible,
.chat-sidebar-nav-item:focus-visible,
.chat-sidebar-item:focus-visible,
.chat-logout-btn:focus-visible,
.chat-summary-bar:focus-visible,
.chat-tools-toggle-btn:focus-visible,
.chat-modal-close:focus-visible,
.bil-dropdown-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Hidden-by-default knoppen (opacity 0) ook zichtbaar bij keyboard-focus,
   anders kan de gebruiker er niet "naartoe tabben" zonder verloren te zijn. */
.chat-sidebar-item-pin:focus-visible,
.chat-sidebar-item-delete:focus-visible,
.bil-folder-row .bil-icon-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =============================================================================
 * Responsive — mobiel + tablet
 *
 * Strategie:
 *  - <768px: sidebar wordt off-canvas drawer (position: fixed, slide-in over content)
 *  - <768px: backdrop wanneer drawer open; tap-buiten sluit
 *  - <768px: content-padding strakker, energizer-shift uit
 *  - <480px: "Nieuwe chat"-knop wordt icon-only, model-select compacter
 *  - <380px: model-select verbergen (te krap)
 * ============================================================================= */

/* ── Mobile sidebar drawer ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Sidebar wordt overlay-drawer */
    body.chat-layout .chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        max-width: 85vw;
        height: 100dvh;
        z-index: 100;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
        transition: transform .25s ease;
        transform: translateX(0);
        border-right: 1px solid var(--border-subtle);
    }

    /* Collapsed = drawer dicht: off-canvas via transform i.p.v. width 0 */
    body.chat-layout .chat-sidebar.collapsed {
        width: 280px;
        min-width: 280px;
        transform: translateX(-100%);
        overflow: visible;
        border-right: none;
    }
    body.chat-layout .chat-sidebar.collapsed > * {
        visibility: visible;            /* override desktop hide */
        pointer-events: auto;
    }

    /* Backdrop achter de drawer */
    .chat-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        z-index: 99;
    }

    /* Energizer-shift uit op mobiel (sidebar overlay'd, geen panel-correctie nodig) */
    body.chat-layout {
        background-position: center center !important;
    }

    /* Topbar slanker */
    .chat-topbar { padding: 10px 12px; gap: 8px; }

    /* Empty-state strakker */
    .chat-empty-state {
        padding: 84px 20px 140px;
        gap: 8px;
    }
    .chat-welcome-title   { font-size: 24px; }
    .chat-welcome-sub     { font-size: 14px; margin-bottom: 18px; }
    .chat-stage           { height: 160px; }

    /* Chat-messages horizontal-padding eraf */
    .chat-msg          { padding: 3px 12px; }
    .chat-input-area   { padding: 12px 14px 14px; }
    .chat-input-wrapper { padding: 10px 12px 8px; }

    /* Bil-page (Syncs/AccessManagement) strakker */
    .bil-page-header { padding: calc(56px + 20px) 16px 0; }
    .bil-page-body   { padding: 18px 16px 60px; }
    .bil-card        { padding: 18px 18px; }

    /* Blade full-width op mobiel (was 95vw) — voelt natuurlijker als fullscreen */
    .bil-blade         { width: 100%; max-width: 100%; }
    .bil-blade-content { padding: 22px 20px; }

    /* Tables: horizontale scroll-fallback voor cellen die niet wrappen */
    .bil-page-body .bil-table {
        display: block;
        overflow-x: auto;
    }

    /* Rijen: laat de controls (knoppen) onder de tekst vallen zodra het smal
       wordt, in plaats van de tekstkolom tot enkele tekens samen te persen */
    .bil-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .bil-row-text    { min-width: 180px; }
    .bil-row-control { flex-wrap: wrap; width: 100%; }
}

/* ── Desktop: context-menu-on-hover van de topbar-toggle ─────────────────── */

@media (min-width: 768px) {
    /* Wanneer sidebar dicht is, hover op de topbar-toggle (of op de popover
       zelf) toont de sidebar als compacte context-menu — alle items zichtbaar,
       compact gestyled. Verlaten = popover sluit na korte forgive-delay. */

    .chat-sidebar.collapsed {
        position: fixed;
        top: 42px;                                       /* overlapt 2px met toggle-bottom — geen gap */
        left: 12px;
        bottom: auto;
        width: 256px;
        min-width: 256px;
        height: auto;
        max-height: calc(100vh - 62px);
        z-index: 60;
        border-radius: 12px;
        border: 1px solid var(--border-subtle);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        /* Een extra invisible-padding-top via pseudo-element bridge zou 'm
           nog beter maken, maar 2px overlap volstaat — toggle-bottom (y=44)
           en popover-top (y=42) overlappen, dus geen gap-zone meer. */
        transform: translateY(-6px) scale(0.97);
        transform-origin: top left;
        opacity: 0;
        pointer-events: none;
        transition: transform .15s ease, opacity .15s ease, pointer-events 0s linear;
        transition-delay: 180ms;                          /* close-delay (forgive) */
    }

    /* Pseudo-bridge: onzichtbaar element dat de hover-zone naar BOVEN uitbreidt,
       zodat je vanaf de toggle door de denkbeeldige "gap" naar de popover kunt
       bewegen zonder dat de hover wegvalt. */
    .chat-sidebar.collapsed::before {
        content: '';
        position: absolute;
        top: -14px;
        left: 0;
        width: 60px;                                       /* alleen boven de toggle-zone, niet de hele breedte */
        height: 14px;
        pointer-events: auto;                              /* override parent's none zodat hover hier wel werkt */
    }

    /* Toon op hover-toggle of hover-popover (incl. de pseudo-bridge) */
    body.chat-layout:has(.chat-topbar-toggle:hover) .chat-sidebar.collapsed,
    .chat-sidebar.collapsed:hover {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
        transition-delay: 100ms, 100ms, 0s;                /* snellere intent + meteen auto */
    }

    /* En tegelijk: kinderen weer zichtbaar+klikbaar zodra de popover open is */
    body.chat-layout:has(.chat-topbar-toggle:hover) .chat-sidebar.collapsed > *,
    .chat-sidebar.collapsed:hover > * {
        visibility: visible;
        pointer-events: auto;
    }

    /* Compact-styling binnen de popover — alles iets dichter op elkaar */
    .chat-sidebar.collapsed .chat-sidebar-list { padding: 6px 8px; }

    .chat-sidebar.collapsed .chat-sidebar-nav-item,
    .chat-sidebar.collapsed .chat-sidebar-item {
        min-height: 28px;
        padding: 4px 10px 4px 34px;
        margin-bottom: 3px;
        font-size: 13px;
    }
    .chat-sidebar.collapsed .chat-sidebar-nav-icon {
        left: 5px;
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    .chat-sidebar.collapsed .chat-sidebar-section-label {
        padding: 8px 6px 3px;
        font-size: 10px;
        letter-spacing: 0.05em;
    }
    .chat-sidebar.collapsed .chat-sidebar-item-title { font-size: 13px; }
    .chat-sidebar.collapsed .chat-sidebar-item-pin,
    .chat-sidebar.collapsed .chat-sidebar-item-delete { width: 20px; height: 20px; font-size: 10px; }
    .chat-sidebar.collapsed .chat-sidebar-item.is-pinned .chat-sidebar-item-pin {
        margin-left: -6px;
        margin-right: 2px;
    }
    .chat-sidebar.collapsed .chat-sidebar-empty { padding: 12px 8px; font-size: 12px; }

    .chat-sidebar.collapsed .chat-sidebar-footer { padding: 8px 10px; }
    .chat-sidebar.collapsed .chat-sidebar-avatar {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 11px;
    }
    .chat-sidebar.collapsed .chat-sidebar-user-name { font-size: 12px; }
    .chat-sidebar.collapsed .chat-sidebar-user-sub  { font-size: 10px; }
    .chat-sidebar.collapsed .chat-logout-btn { width: 28px; height: 28px; font-size: 12px; }
}

/* ── Smal mobiel: knop-tekst weg ─────────────────────────────────────────── */

@media (max-width: 480px) {
    /* "Nieuwe chat" wordt icon-only in topbar */
    .chat-topbar .chat-new-btn {
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        justify-content: center;
    }
    .chat-topbar .chat-new-btn .chat-new-btn-icon {
        position: static;
        transform: none;
        width: 20px;
        height: 20px;
    }
    .chat-topbar .chat-new-btn-label { display: none; }

    /* Model-dropdown korter */
    .chat-model-dropdown .bil-dropdown-trigger {
        max-width: 140px;
        padding: 0 10px;
    }

    /* Tabs kompacter — icons + tekst kan wrappen */
    .bil-tab { padding: 9px 10px; font-size: 12px; }
}

/* ── Zeer smal: model-select volledig weg ────────────────────────────────── */

@media (max-width: 380px) {
    .chat-model-dropdown { display: none; }
}

/* ── Touch-devices: vermijd hover-flickering ─────────────────────────────── */

@media (hover: none) {
    /* Op touch-devices triggert "hover" raar na een tap. Items die alleen op
       hover zichtbaar zijn, blijven dan onzichtbaar tot je opnieuw tapt. */
    .chat-sidebar-item-pin,
    .chat-sidebar-item-delete,
    .bil-folder-row .bil-icon-btn {
        opacity: 1;             /* altijd zichtbaar op touch */
    }
}

/* =============================================================================
 * App page layout — herbruikbare content-klassen, max 1280px gecentreerd.
 * Gebruik binnen body.chat-layout main.bil-page > .bil-page-content.
 * ============================================================================= */
.app-page-header {
    padding: 84px 24px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    box-sizing: border-box;

    & .app-page-title {
        margin: 0;
        padding: 0;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: var(--text-on-body);
        text-transform: none;
    }

    & .app-page-sub {
        margin: 6px 0 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted-on-body);
    }
}

.app-page-body {
    padding: 24px 24px 60px;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* =============================================================================
 * Module grid — herbruikbare kaartgrid voor pagina's met module-CTA's
 * Gebruik: .app-module-grid > .app-module-card (als <a href>)
 * ============================================================================= */
.app-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
}

.app-module-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 48px 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    backdrop-filter: blur(14px) saturate(150%);
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;

    &:hover {
        border-color: var(--accent);
        box-shadow: 0 0 0 1px var(--accent), 0 4px 20px rgba(0, 0, 0, .18);
        transform: translateY(-2px);

        & .app-module-card__arrow {
            color: var(--accent);
            transform: translateX(3px);
        }
    }

    & .app-module-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 20px;
    }

    & .app-module-card__body {
        flex: 1;
        min-width: 0;

        & .app-module-card__title {
            margin: 0 0 4px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
        }

        & .app-module-card__desc {
            margin: 0;
            font-size: 13px;
            color: var(--text-muted-on-body);
            line-height: 1.5;
        }
    }

    & .app-module-card__arrow {
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 14px;
        transition: color .15s ease, transform .15s ease;
    }
}


/* =============================================================================
 * Argus
 * Aanvullingen bovenop de BI-componenten. Alles token-gebaseerd.
 * ============================================================================= */

:root {
    --status-ok:       #4ade80;
    --status-warning:  #fbbf24;
    --status-critical: var(--danger);
    --status-unknown:  var(--text-faint);
    --font-mono-real:  'Consolas', 'SFMono-Regular', 'Menlo', monospace;
}

/* ── Merk bovenin de sidebar ─────────────────────────────────────────────── */
.argus-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 10px;
    text-decoration: none;
    color: var(--text);
}
.argus-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    font-size: 15px;
    flex-shrink: 0;
}
.argus-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.argus-brand-name { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.argus-brand-sub  { font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Monitoring-status in de topbar ──────────────────────────────────────── */
.argus-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: var(--glass-bg-soft);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.argus-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-unknown);
    flex-shrink: 0;
}
.argus-status.is-ok .argus-status-dot       { background: var(--status-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok) 60%, transparent); animation: argus-pulse 2.4s ease-out infinite; }
.argus-status.is-stale                      { border-color: color-mix(in srgb, var(--status-critical) 55%, transparent); color: var(--status-critical); }
.argus-status.is-stale .argus-status-dot    { background: var(--status-critical); animation: argus-blink 1s steps(2, start) infinite; }
.argus-status-age { font-family: var(--font-mono-real); font-size: 11px; color: var(--text-faint); }

@keyframes argus-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes argus-blink { to { visibility: hidden; } }

/* ── Lege toestand met uitleg ────────────────────────────────────────────── */
.argus-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 20px 40px;
    gap: 10px;
}
.argus-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 22px;
    margin-bottom: 6px;
}
.argus-empty-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.argus-empty-text  { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.argus-empty-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── "Binnenkort"-label ──────────────────────────────────────────────────── */
.argus-soon {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    vertical-align: middle;
}

/* ── Stat-tegels op overzichtspagina's (groter dan de BI-variant) ─────────── */
.argus-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.argus-stat {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px 18px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.argus-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.argus-stat-value { font-size: 26px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.argus-stat-meta  { font-size: 12px; color: var(--text-muted); }

/* ── Audit log ───────────────────────────────────────────────────────────── */
.argus-mono { font-family: var(--font-mono-real); font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Pagina-kop met actieknop ────────────────────────────────────────────── */
.argus-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.argus-page-head .app-page-title { margin: 0; }
.argus-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); text-decoration: none; margin-bottom: 8px; }
.argus-back:hover { color: var(--text); }
.argus-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.argus-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.argus-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: var(--danger); }

/* ── Status-bolletjes en labels ──────────────────────────────────────────── */
.argus-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--status-unknown); flex-shrink: 0; }
.argus-dot.is-up       { background: var(--status-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-ok) 18%, transparent); }
.argus-dot.is-warning  { background: var(--status-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-warning) 22%, transparent); }
.argus-dot.is-down     { background: var(--status-critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-critical) 25%, transparent); animation: argus-down-pulse 1.6s ease-in-out infinite; }
.argus-dot.is-paused   { background: transparent; border: 2px solid var(--text-faint); box-sizing: border-box; }
@keyframes argus-down-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-critical) 8%, transparent); } }
.argus-status-cell { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.argus-text-up { color: var(--status-ok); }
.argus-text-warning { color: var(--status-warning); }
.argus-text-down { color: var(--status-critical); }
.argus-text-muted { color: var(--text-muted); }
.argus-text-faint { color: var(--text-faint); }
.argus-sub { display: block; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Werkbalk boven tabellen ─────────────────────────────────────────────── */
.argus-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.argus-toolbar .bil-input { flex: 1; min-width: 200px; }
.argus-segment { display: inline-flex; border: 1px solid var(--pill-border); border-radius: 999px; padding: 2px; gap: 2px; }
.argus-segment button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.argus-segment button.active { background: var(--pill-bg-active); color: var(--text); }
.argus-segment button:hover:not(.active) { color: var(--text); }

/* ── Formulieren (blade) ─────────────────────────────────────────────────── */
.argus-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.argus-field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.argus-field .bil-input, .argus-field .bil-select { width: 100%; }
.argus-field-hint { font-size: 12px; color: var(--text-faint); line-height: 1.4; }
.argus-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.argus-input-lg { height: 42px; font-size: 15px; }
.argus-textarea { height: auto; min-height: 84px; padding: 9px 12px; line-height: 1.45; resize: vertical; font-family: var(--font-mono-real); font-size: 12px; }
.argus-textarea.is-prose { font-family: var(--font-family); font-size: 13px; min-height: 140px; }
.argus-disclosure { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; }
.argus-disclosure:hover { color: var(--text); }
.argus-disclosure i { transition: transform .15s; }
.argus-disclosure.open i { transform: rotate(90deg); }
.argus-form-error { margin-bottom: 16px; }

/* ── Sleutel/waarde-lijst ────────────────────────────────────────────────── */
.argus-kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 10px 18px; font-size: 13px; margin: 0; }
.argus-kv dt { color: var(--text-faint); }
.argus-kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ── Grafiek ─────────────────────────────────────────────────────────────── */
.argus-chart { width: 100%; height: 200px; display: block; }
.argus-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.argus-chart-threshold { stroke: var(--status-warning); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
.argus-chart-grid { stroke: var(--border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.argus-chart-bad { fill: var(--status-critical); opacity: .22; }
.argus-chart-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 6px; font-family: var(--font-mono-real); }

/* ── Laatste checks als balkjes ──────────────────────────────────────────── */
.argus-bars { display: flex; gap: 2px; height: 26px; align-items: stretch; }
.argus-bars span { flex: 1; border-radius: 2px; background: var(--status-ok); opacity: .85; min-width: 3px; }
.argus-bars span.is-warning { background: var(--status-warning); }
.argus-bars span.is-critical { background: var(--status-critical); }

/* ── Tijdlijn ────────────────────────────────────────────────────────────── */
.argus-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.argus-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border-subtle); }
.argus-timeline li { position: relative; padding: 0 0 16px 28px; font-size: 13px; }
.argus-timeline li:last-child { padding-bottom: 0; }
.argus-timeline li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-elev-3); border: 2px solid var(--pill-border-hover); box-sizing: border-box; }
.argus-timeline li.is-opened::before { background: var(--status-critical); border-color: var(--status-critical); }
.argus-timeline li.is-resolved::before { background: var(--status-ok); border-color: var(--status-ok); }
.argus-timeline li.is-person::before { background: var(--accent); border-color: var(--accent); }
.argus-timeline li.is-notify::before { border-color: #60a5fa; }
.argus-timeline-meta { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 2px; font-family: var(--font-mono-real); }

/* ── Layout-hulpjes ──────────────────────────────────────────────────────── */
.argus-grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .argus-grid-2 { grid-template-columns: 1fr; } }
.argus-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.argus-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.argus-card-head .bil-card-title { margin: 0; }
.argus-banner-incident { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; background: color-mix(in srgb, var(--status-critical) 12%, transparent); border: 1px solid color-mix(in srgb, var(--status-critical) 40%, transparent); color: var(--text); }
.argus-banner-incident.is-warning { background: color-mix(in srgb, var(--status-warning) 10%, transparent); border-color: color-mix(in srgb, var(--status-warning) 40%, transparent); }
.argus-banner-incident strong { display: block; font-size: 14px; }
.argus-banner-incident span { font-size: 12px; color: var(--text-muted); }
.argus-banner-incident .fa-arrow-right { margin-left: auto; color: var(--text-faint); }
.argus-table-scroll { overflow-x: auto; scrollbar-color: var(--pill-bg-active) transparent; scrollbar-width: thin; }
.argus-table-scroll .bil-table { min-width: 720px; }