/* ===================================
   Aethium-console
   ===================================
   Brengt KL-Systems visueel naar de console in LasseHoutenbosSite
   (assets/css/console-brand.css + dashboard.css): IBM Plex Sans, een
   obsidian sidebar met dunne lijniconen, rustige knoppen met 6px hoeken en
   matglazen panelen en modals. Kleurtokens komen uit dark-theme.css.

   Alles hangt onder body.aethium-console. Layout-regels voor de sidebar
   staan in een min-width: 992px-query; mobile.css (laatst geladen) blijft
   eigenaar van de telefoon/tablet-weergave. */

@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

body.aethium-console {
    --ae-font: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --ae-line: rgba(255, 255, 255, .085);
    --ae-glass:
        linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 55%),
        rgba(20, 26, 34, .55);
    --ae-glass-strong:
        linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 55%),
        rgb(18, 24, 32);
    --ae-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .28);
    --ae-overlay-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 70px rgba(0, 0, 0, .55);
    --ae-radius: 12px;
    --ae-control-radius: 6px;
    --ae-primary-hover: #2b7fff;
    --bs-body-font-family: var(--ae-font);
    --bs-border-radius: 6px;
    --bs-border-color: var(--border-color);
    background: var(--bg-primary);
    font-family: var(--ae-font);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--accent-primary);
    color-scheme: dark;
}

body.aethium-console :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea) { font-family: var(--ae-font); }
body.aethium-console :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: -.015em; }
body.aethium-console :is(code, pre, kbd) { font-family: Consolas, 'Cascadia Mono', monospace; }

/* Zachte blauwe gloed achter de inhoud; zonder iets om doorheen te kijken
   ziet glas eruit als een grijs vlak. */
body.aethium-console #page-content-wrapper {
    background:
        radial-gradient(1100px 650px at 88% -8%, rgba(var(--accent-rgb), .14), transparent 62%),
        radial-gradient(900px 600px at 8% 108%, rgba(var(--accent-rgb), .07), transparent 60%),
        var(--bg-primary);
    background-attachment: fixed;
}

/* ------------------------------------------------------------
   Lucide-iconen (aethium-icons.css) — dunne lijnen, iets groter
   dan het Font Awesome-glyph zodat de optische maat gelijk blijft.
   ------------------------------------------------------------ */
body.aethium-icons :is(.fa, .fas, .far, .fa-solid, .fa-regular) {
    -webkit-font-smoothing: antialiased;
}

/* dark-theme.css wisselt bij een ingeklapte sidebar het glyph van de knop;
   met Lucide draait de knop al 180°, dus het glyph blijft hetzelfde. */
body.aethium-icons .sidebar.collapsed #sidebarCollapseBtn i::before { content: "\e072"; }

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */
body.aethium-console .sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-color);
}

body.aethium-console .sidebar-header {
    padding: 20px 16px 18px !important;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start !important;
    gap: 8px;
}

body.aethium-console .sidebar-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

body.aethium-console .sidebar-brand-logo {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}

body.aethium-console .sidebar-brand .sidebar-logo { display: none; }

body.aethium-console .sidebar-brand-caption {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.aethium-console :is(#sidebarCollapseBtn, #sidebarClose) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--ae-control-radius);
    color: var(--text-muted) !important;
}

body.aethium-console :is(#sidebarCollapseBtn, #sidebarClose):hover {
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

@media (min-width: 992px) {
    body.aethium-console .sidebar {
        width: 248px;
        min-width: 248px;
        max-width: 248px;
    }

    body.aethium-console #sidebarCollapseBtn { display: inline-flex !important; }
}

body.aethium-console .sidebar-nav {
    flex: 1 0 auto;
    padding: 8px 10px;
}

body.aethium-console .sidebar-nav .nav-link {
    min-height: 34px;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

body.aethium-console .sidebar-nav .nav-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.aethium-console .sidebar-nav .nav-link i {
    width: 16px;
    margin-right: 0 !important;
    font-size: 14px;
    color: inherit;
}

body.aethium-console .sidebar-nav .nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .035);
    border-left-color: var(--border-light);
}

body.aethium-console .sidebar-nav .nav-link:hover i { color: inherit; }

body.aethium-console .sidebar-nav .nav-link.active {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), .08);
    border-left-color: var(--accent-primary);
    font-weight: 500;
}

body.aethium-console .sidebar-nav .nav-link.active i { color: var(--accent-text); }

body.aethium-console .nav-divider {
    margin: 8px 10px;
    background: var(--border-color);
}

/* Groepen: chevron naar rechts, draait open naar beneden. */
body.aethium-console .sidebar-nav .nav-group-toggle .nav-group-chevron {
    width: auto;
    font-size: 13px;
    opacity: 1;
    color: var(--text-muted);
    transform: rotate(0deg);
}

body.aethium-console .sidebar-nav .nav-group-toggle.collapsed .nav-group-chevron { transform: rotate(-90deg); }

body.aethium-console .sidebar-nav .nav-group-toggle:not(.collapsed) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .03);
}

body.aethium-console .sidebar-nav .nav-submenu {
    margin: 1px 0 6px;
    background: none;
}

body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link {
    position: relative;
    min-height: 28px;
    padding: 3px 10px 3px 37px;
    border-left: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* Subitems krijgen een stip in plaats van een eigen icoon, zoals de console. */
body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link i { display: none; }

body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--border-light);
}

body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link:hover { color: var(--text-primary); }

body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link.active {
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), .08);
}

body.aethium-console .sidebar:not(.collapsed) .sidebar-nav .nav-submenu .nav-link.active::before { background: var(--accent-primary); }

/* Voet: gebruikerskaart en uitloggen. */
body.aethium-console .sidebar-footer {
    position: static;
    margin-top: auto;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
}

body.aethium-console .sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: rgba(255, 255, 255, .02);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

body.aethium-console .sidebar-user:hover,
body.aethium-console .sidebar-user:focus-visible,
body.aethium-console .sidebar-user.active {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), .06);
    color: var(--text-primary);
}

body.aethium-console .sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-elevated);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
}

body.aethium-console .sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.aethium-console .sidebar-user-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

body.aethium-console .sidebar-user-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.aethium-console .sidebar-user-role {
    color: var(--text-muted);
    font-size: 12px;
}

body.aethium-console .sidebar-user-chevron {
    color: var(--text-muted);
    font-size: 13px;
    transition: transform .15s ease, color .15s ease;
}

body.aethium-console .sidebar-user:hover .sidebar-user-chevron {
    color: var(--accent-text);
    transform: translateX(2px);
}

body.aethium-console .sidebar-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

body.aethium-console .sidebar-logout:hover {
    color: var(--danger-text);
    background: rgba(var(--danger-rgb), .08);
}

body.aethium-console :is(.sidebar-user, .sidebar-logout):focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

/* Ingeklapte sidebar (desktop): alleen het KL-symbool en de iconen. */
@media (min-width: 992px) {
    body.aethium-console .sidebar.collapsed {
        width: 68px;
        min-width: 68px;
        max-width: 68px;
    }

    body.aethium-console .sidebar.collapsed .sidebar-header {
        flex-direction: column;
        align-items: center !important;
        padding: 16px 0 !important;
    }

    body.aethium-console .sidebar.collapsed .sidebar-brand { align-items: center; flex: 0 0 auto; }
    body.aethium-console .sidebar.collapsed :is(.sidebar-brand-logo, .sidebar-brand-caption) { display: none; }
    body.aethium-console .sidebar.collapsed .sidebar-brand .sidebar-logo { display: block; width: 36px; height: auto !important; }

    body.aethium-console .sidebar.collapsed .sidebar-nav { padding: 12px 8px; }

    body.aethium-console .sidebar.collapsed .sidebar-nav .nav-link {
        justify-content: center;
        padding: 8px 0;
        border-left: 0;
        border-bottom: 0;
    }

    body.aethium-console .sidebar.collapsed .sidebar-nav .nav-link i { font-size: 18px; }

    body.aethium-console .sidebar.collapsed .sidebar-nav .nav-link:hover,
    body.aethium-console .sidebar.collapsed .sidebar-nav .nav-link.active {
        border-bottom: 0;
        box-shadow: inset 2px 0 0 var(--accent-primary);
    }

    body.aethium-console .sidebar.collapsed .sidebar-footer { padding: 12px 8px !important; }

    body.aethium-console .sidebar.collapsed .sidebar-user {
        justify-content: center;
        padding: 8px 0;
    }

    body.aethium-console .sidebar.collapsed :is(.sidebar-user-details, .sidebar-user-chevron, .sidebar-logout span) { display: none; }
    body.aethium-console .sidebar.collapsed .sidebar-logout { justify-content: center; padding: 0; }
}

/* ------------------------------------------------------------
   Bovenbalk
   ------------------------------------------------------------ */
body.aethium-console .navbar {
    min-height: 64px;
    /* Dicht, zonder backdrop-filter: de liquid-glass-laag in de knoppen
       ziet anders alleen de binnenkant van de balk (zie console-brand.css). */
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none;
}

body.aethium-console .breadcrumb { font-size: 13px; }
body.aethium-console .breadcrumb-item + .breadcrumb-item::before { color: var(--border-light); }

/* Ronde icoonknoppen in de balk worden vierkante, omlijnde knoppen
   zoals de meldingenbel van de console. */
body.aethium-console #nfBellToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--ae-control-radius);
    background: rgba(255, 255, 255, .02);
}

body.aethium-console #nfBellToggle:hover {
    border-color: var(--border-light);
    color: var(--accent-text) !important;
}

body.aethium-console #nfBellToggle .fa-lg { font-size: 17px; }

/* ------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------ */
body.aethium-console .btn {
    --bs-btn-font-size: .8125rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: .875rem;
    --bs-btn-border-radius: var(--ae-control-radius);
    --bs-btn-line-height: 1.4;
    letter-spacing: .01em;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.aethium-console .btn-sm {
    --bs-btn-font-size: .75rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-border-radius: 5px;
}

body.aethium-console .btn-lg {
    --bs-btn-font-size: .9375rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-border-radius: 8px;
}

body.aethium-console .btn > i:not(.fa-spin) { font-size: 1.1em; }

/* Hoofdactie: vol Aethium-blauw met witte tekst, zonder optillen. */
body.aethium-console :is(.btn-accent, .btn-primary) {
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: #fff;
}

body.aethium-console :is(.btn-accent, .btn-primary):hover,
body.aethium-console :is(.btn-accent, .btn-primary):focus-visible {
    background: var(--ae-primary-hover);
    border-color: var(--ae-primary-hover);
    color: #fff;
    transform: none;
    box-shadow: none;
}

/* Neutraal: omlijnd op obsidian, zoals "Download PDF" in de console. */
body.aethium-console :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-dark) {
    background: rgba(255, 255, 255, .02);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.aethium-console :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-dark):hover,
body.aethium-console :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-dark):focus-visible,
body.aethium-console :is(.btn-secondary, .btn-outline-secondary, .btn-outline-light, .btn-dark).active {
    background: rgba(255, 255, 255, .06);
    border-color: var(--border-light);
    color: #fff;
}

body.aethium-console .btn-outline-accent,
body.aethium-console .btn-outline-primary {
    background: rgba(255, 255, 255, .02);
    border-color: var(--border-color);
    color: var(--accent-text);
}

body.aethium-console .btn-outline-accent:hover,
body.aethium-console .btn-outline-primary:hover,
body.aethium-console .btn-outline-accent:focus-visible,
body.aethium-console .btn-outline-primary:focus-visible,
body.aethium-console :is(.btn-outline-accent, .btn-outline-primary).active,
body.aethium-console .btn-check:checked + :is(.btn-outline-accent, .btn-outline-primary) {
    background: rgba(var(--accent-rgb), .1);
    border-color: var(--accent-primary);
    color: #fff;
}

/* Omlijnde semantische knoppen: rand en tekst in de actiekleur. */
body.aethium-console .btn-outline-danger {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(var(--danger-rgb), .55);
    color: var(--danger-text);
}

body.aethium-console .btn-outline-danger:hover,
body.aethium-console .btn-outline-danger:focus-visible {
    background: rgba(var(--danger-rgb), .14);
    border-color: var(--danger-hover);
    color: #fff;
}

body.aethium-console .btn-outline-success {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(var(--success-rgb), .6);
    color: var(--success-text);
}

body.aethium-console .btn-outline-success:hover,
body.aethium-console .btn-outline-success:focus-visible {
    background: rgba(var(--success-rgb), .16);
    border-color: var(--success-hover);
    color: #fff;
}

body.aethium-console .btn-outline-warning {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(var(--warning-rgb), .5);
    color: var(--warning-text);
}

body.aethium-console .btn-outline-warning:hover,
body.aethium-console .btn-outline-warning:focus-visible {
    background: rgba(var(--warning-rgb), .12);
    border-color: var(--warning-hover);
    color: var(--warning-hover);
}

body.aethium-console :is(.btn-accent, .btn-primary, .btn-danger, .btn-success, .btn-warning):hover { transform: none; }

body.aethium-console .btn:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

body.aethium-console .btn-group > .btn { --bs-btn-border-radius: var(--ae-control-radius); }

/* ------------------------------------------------------------
   Panelen (cards) — matglas, geen optillen bij hover
   ------------------------------------------------------------ */
body.aethium-console .card {
    border-color: var(--ae-line);
    border-radius: var(--ae-radius);
    background: var(--ae-glass);
    box-shadow: var(--ae-glass-shadow);
}

body.aethium-console .card:hover { transform: none; box-shadow: var(--ae-glass-shadow); }

body.aethium-console :is(.card-header, .card-footer) {
    border-color: var(--ae-line);
    background: rgba(255, 255, 255, .025);
}

body.aethium-console .card-header { font-weight: 600; }
body.aethium-console .card-header:first-child { border-radius: calc(var(--ae-radius) - 1px) calc(var(--ae-radius) - 1px) 0 0; }
body.aethium-console .card-footer:last-child { border-radius: 0 0 calc(var(--ae-radius) - 1px) calc(var(--ae-radius) - 1px); }

body.aethium-console .card .list-group-item {
    border-color: var(--ae-line);
}

/* Kengetallen: wit cijfer, label in zinsletters, icoon in zacht blauw.
   #0066FF haalt als tekst op obsidian geen 4,5:1. */
body.aethium-console .kpi-card {
    border-left-width: 1px;
    border-left-color: var(--ae-line);
    background: var(--ae-glass);
}

body.aethium-console .kpi-card .kpi-value {
    color: var(--text-primary);
    font-size: 1.75rem;
    line-height: 1.15;
}

body.aethium-console .kpi-card .kpi-label {
    color: var(--text-muted);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

body.aethium-console .kpi-card .kpi-icon {
    color: var(--accent-text);
    opacity: .45;
}

/* Tabelkoppen: klein en gedempt, de rijen zijn de inhoud. */
body.aethium-console .table > thead th {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

body.aethium-console .table > :not(caption) > * > * { border-bottom-color: var(--ae-line); }

/* ------------------------------------------------------------
   Modals en uitklapmenu's — dikker glas
   ------------------------------------------------------------ */
body.aethium-console .modal-backdrop {
    --bs-backdrop-bg: #05070a;
    --bs-backdrop-opacity: .72;
}

body.aethium-console .modal-content {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--ae-radius);
    background: var(--ae-glass-strong);
    box-shadow: var(--ae-overlay-shadow);
}

body.aethium-console .modal-header {
    padding: 18px 20px;
    border-bottom-color: var(--ae-line);
}

body.aethium-console .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

body.aethium-console .modal-title > i:first-child { color: var(--accent-text); }

body.aethium-console .modal-body { padding: 20px; }

body.aethium-console .modal-footer {
    gap: 8px;
    padding: 14px 20px;
    border-top-color: var(--ae-line);
    background: rgba(255, 255, 255, .02);
    border-radius: 0 0 calc(var(--ae-radius) - 1px) calc(var(--ae-radius) - 1px);
}

body.aethium-console .modal-footer > * { margin: 0; }

/* Sluitknop: een vierkante, omlijnde icoonknop met een Lucide-kruis. */
body.aethium-console .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: none;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--ae-control-radius);
    background-color: rgba(255, 255, 255, .02);
    background-size: 16px;
    filter: none;
    transition: border-color .15s ease, background-color .15s ease;
}

body.aethium-console .btn-close:hover {
    border-color: var(--border-light);
    background-color: rgba(255, 255, 255, .06);
}

body.aethium-console .btn-close:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

body.aethium-console .modal-header .btn-close { margin: -4px -6px -4px auto; }

body.aethium-console .dropdown-menu {
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
    --bs-dropdown-link-active-bg: rgba(var(--accent-rgb), .16);
    --bs-dropdown-link-active-color: #fff;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: var(--ae-glass-strong);
    box-shadow: var(--ae-overlay-shadow);
    font-size: .875rem;
}

body.aethium-console .dropdown-item {
    border-radius: 5px;
    padding: 7px 10px;
}

body.aethium-console .dropdown-menu.p-0 .dropdown-item { border-radius: 0; }
body.aethium-console .dropdown-divider { border-color: var(--ae-line); }

/* ------------------------------------------------------------
   Formulieren en tabs
   ------------------------------------------------------------ */
body.aethium-console :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--border-light);
    border-radius: var(--ae-control-radius);
    background-color: var(--bg-secondary);
}

body.aethium-console :is(.form-control, .form-select):hover:not(:disabled):not(:focus) { border-color: #60748a; }

body.aethium-console :is(.form-control, .form-select):focus {
    border-color: var(--accent-text);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(154, 184, 226, .18);
}

body.aethium-console .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

body.aethium-console .form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

body.aethium-console .nav-tabs { border-bottom-color: var(--border-color); }

body.aethium-console .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text-secondary);
    font-size: .875rem;
    font-weight: 600;
}

body.aethium-console .nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border-light); }

body.aethium-console .nav-tabs .nav-link.active {
    background: none;
    border-bottom-color: var(--accent-primary);
    color: var(--accent-text);
}

body.aethium-console .nav-pills .nav-link.active {
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5);
}

/* ------------------------------------------------------------
   Bootstrap-thema op Aethium-waarden
   ------------------------------------------------------------
   Bootstrap leest deze variabelen op elk component. Door ze hier te zetten
   volgen alerts, list-groups, accordions, tabellen en de bg- en border-
   hulpklassen het merk zonder dat de pagina's aangepast hoeven te worden.
   --bs-primary-rgb blijft #0066FF voor vlakken; blauwe tekst gaat apart
   naar --accent-text (zie text-primary hieronder). */
body.aethium-console {
    --bs-body-bg: var(--bg-primary);
    --bs-body-bg-rgb: 10, 13, 18;
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-tertiary);
    --bs-tertiary-bg: var(--bg-secondary);
    --bs-border-color-translucent: var(--ae-line);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: 154, 184, 226;
    --bs-link-hover-color: #c3d6f0;
    --bs-link-hover-color-rgb: 195, 214, 240;
    --bs-highlight-bg: rgba(var(--accent-rgb), .3);
    --bs-highlight-color: #fff;

    --bs-primary: var(--accent-primary);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-secondary-rgb: 37, 46, 57;
    --bs-dark-rgb: 16, 21, 28;
    --bs-light-rgb: 233, 237, 242;
    --bs-success-rgb: var(--success-rgb);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-info-rgb: 76, 201, 240;

    /* Zachte varianten: alerts, list-group-kleuren en text-bg-subtle. */
    --bs-primary-text-emphasis: var(--accent-text);
    --bs-primary-bg-subtle: rgba(var(--accent-rgb), .1);
    --bs-primary-border-subtle: rgba(var(--accent-rgb), .45);
    --bs-secondary-text-emphasis: var(--text-secondary);
    --bs-secondary-bg-subtle: rgba(255, 255, 255, .04);
    --bs-secondary-border-subtle: var(--border-light);
    --bs-success-text-emphasis: var(--success-text);
    --bs-success-bg-subtle: rgba(var(--success-rgb), .14);
    --bs-success-border-subtle: rgba(var(--success-rgb), .55);
    --bs-danger-text-emphasis: var(--danger-text);
    --bs-danger-bg-subtle: rgba(var(--danger-rgb), .12);
    --bs-danger-border-subtle: rgba(var(--danger-rgb), .55);
    --bs-warning-text-emphasis: var(--warning-text);
    --bs-warning-bg-subtle: rgba(var(--warning-rgb), .08);
    --bs-warning-border-subtle: rgba(var(--warning-rgb), .4);
    --bs-info-text-emphasis: var(--accent-text);
    --bs-info-bg-subtle: rgba(var(--accent-rgb), .08);
    --bs-info-border-subtle: rgba(var(--accent-rgb), .4);
    --bs-light-text-emphasis: var(--text-primary);
    --bs-light-bg-subtle: rgba(255, 255, 255, .04);
    --bs-light-border-subtle: var(--border-light);
    --bs-dark-text-emphasis: var(--text-primary);
    --bs-dark-bg-subtle: var(--bg-secondary);
    --bs-dark-border-subtle: var(--border-color);
}

/* Zinsletters, zoals in de console: kapitalen met brede letterafstand lezen
   als schreeuwende tekst. Toetscombinaties en labelvoorbeelden houden hun
   eigen vorm. */
body.aethium-console .text-uppercase:not(kbd) { text-transform: none !important; letter-spacing: normal; }

/* Blauwe tekst gebruikt de leesbare tint, nooit #0066FF zelf. */
body.aethium-console :is(.text-primary, .text-info, .link-primary, .link-info) { color: var(--accent-text) !important; }
body.aethium-console .text-warning { color: var(--warning-text) !important; }
body.aethium-console .text-secondary { color: var(--text-secondary) !important; }
body.aethium-console .text-body-secondary { color: var(--text-muted) !important; }
body.aethium-console a:not(.btn, .nav-link, .dropdown-item, .list-group-item, .sidebar-user, .sidebar-logout, .sidebar-brand, [class*="text-"]) { text-underline-offset: .18em; }

/* Velden en panelen die met bg-dark/border-secondary zijn gemarkeerd,
   krijgen hetzelfde vlak en dezelfde rand als alle andere. Die klassen
   dragen !important, dus de correctie ook. */
body.aethium-console :is(.form-control, .form-select, .input-group-text):is(.bg-dark, .bg-dark-custom, .bg-secondary) {
    background-color: var(--bg-secondary) !important;
}

body.aethium-console :is(.form-control, .form-select, .input-group-text).border-secondary { border-color: var(--border-light) !important; }
body.aethium-console :is(.form-control, .form-select).border-secondary:focus { border-color: var(--accent-text) !important; }
body.aethium-console :is(.form-control, .form-select).text-light { color: var(--text-primary) !important; }
body.aethium-console .form-control::placeholder { color: var(--text-muted); opacity: 1; }
/* Zwevende labels verbergen de placeholder zelf; die moet onzichtbaar blijven. */
body.aethium-console .form-floating > .form-control::placeholder { color: transparent; }

body.aethium-console .modal-content:is(.bg-dark, .bg-dark-custom, .bg-secondary) { background: var(--ae-glass-strong) !important; }

body.aethium-console .card:is(.bg-dark, .bg-dark-custom, .bg-secondary) {
    background: var(--ae-glass) !important;
    border: 1px solid var(--ae-line) !important;
}

body.aethium-console .card :is(.card-header, .card-footer):is(.bg-dark, .bg-dark-custom) { background: rgba(255, 255, 255, .025) !important; }
body.aethium-console .card.border-0:is(.bg-dark, .bg-dark-custom) { border-color: var(--ae-line) !important; }
body.aethium-console .border-secondary:not(.btn) { border-color: var(--border-color) !important; }

/* Vlakken binnen een paneel (bg-dark rounded, bg-dark-custom rounded):
   een iets donkerder put in plaats van Bootstrap-grijs. */
body.aethium-console :is(.bg-dark, .bg-dark-custom):not(.card, .card-header, .card-footer, .card-body, .modal-content, .modal-body, .form-control, .form-select, .input-group-text, .badge, .navbar, .sidebar, .btn, .dropdown-menu, .list-group-item, .accordion-item, .accordion-button, .toast, .offcanvas) {
    background-color: rgba(10, 13, 18, .55) !important;
    box-shadow: inset 0 0 0 1px var(--ae-line);
}

body.aethium-console :is(.card-body, .modal-body):is(.bg-dark, .bg-dark-custom) { background-color: transparent !important; }

/* Kaartkoppen die als een gekleurde balk zijn opgezet (bg-primary,
   bg-warning ...) worden een rustige kop met een gekleurde streep. */
body.aethium-console .card-header:is(.bg-primary, .bg-accent, .bg-success, .bg-danger, .bg-warning, .bg-info) {
    background: rgba(255, 255, 255, .025) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 3px 0 0 var(--ae-head-accent, var(--accent-primary));
}

body.aethium-console .card-header.bg-success { --ae-head-accent: var(--success-fill); }
body.aethium-console .card-header.bg-danger { --ae-head-accent: var(--danger-fill); }
body.aethium-console .card-header.bg-warning { --ae-head-accent: var(--warning-fill); }
body.aethium-console .card-header:is(.bg-primary, .bg-accent, .bg-success, .bg-danger, .bg-warning, .bg-info) :is(.text-dark, .text-white) { color: inherit !important; }

body.aethium-console .bg-accent { background-color: var(--accent-primary) !important; color: #fff; }

/* ------------------------------------------------------------
   Badges — getinte pillen met leesbare tekst
   ------------------------------------------------------------
   Een vol verzadigd vlak per status trekt elke rij naar zich toe; de
   console gebruikt een zachte tint met een rand en tekst in de statuskleur. */
body.aethium-console .badge {
    --ae-badge-rgb: 139, 148, 158;
    --ae-badge-text: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .3em .6em;
    border: 1px solid rgba(var(--ae-badge-rgb), .38);
    border-radius: 4px;
    background: rgba(var(--ae-badge-rgb), .12) !important;
    color: var(--ae-badge-text) !important;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    vertical-align: .08em;
}

body.aethium-console .badge.d-none { display: none !important; }
body.aethium-console .badge > i { font-size: 1.05em; }

body.aethium-console .badge:is(.bg-primary, .bg-accent, .bg-info, .text-bg-primary, .text-bg-info) { --ae-badge-rgb: var(--accent-rgb); --ae-badge-text: var(--accent-text); }
body.aethium-console .badge:is(.bg-success, .text-bg-success) { --ae-badge-rgb: var(--success-rgb); --ae-badge-text: var(--success-text); }
body.aethium-console .badge:is(.bg-danger, .text-bg-danger) { --ae-badge-rgb: var(--danger-rgb); --ae-badge-text: var(--danger-text); }
body.aethium-console .badge:is(.bg-warning, .text-bg-warning) { --ae-badge-rgb: var(--warning-rgb); --ae-badge-text: var(--warning-text); }
body.aethium-console .badge:is(.bg-light, .bg-white, .text-bg-light) { --ae-badge-rgb: 233, 237, 242; --ae-badge-text: var(--text-primary); }
body.aethium-console .badge:is(.bg-dark, .bg-dark-custom, .text-bg-dark) { --ae-badge-rgb: 69, 81, 94; --ae-badge-text: var(--text-secondary); background: var(--bg-secondary) !important; }

/* Tellers in een knop of tab: klein en rond. */
body.aethium-console :is(.btn, .nav-link) .badge,
body.aethium-console .badge.rounded-pill { border-radius: 999px; }

/* ------------------------------------------------------------
   Alerts — gekleurde rand links, tint, tekst in de statuskleur
   ------------------------------------------------------------ */
body.aethium-console .alert {
    --bs-alert-padding-y: .8rem;
    --bs-alert-padding-x: 1rem;
    --bs-alert-border-radius: 8px;
    --ae-alert-accent: var(--border-light);
    border-left: 3px solid var(--ae-alert-accent);
    font-size: .875rem;
    color: var(--bs-alert-color);
}

body.aethium-console .alert-primary, body.aethium-console .alert-info { --ae-alert-accent: var(--accent-primary); }
body.aethium-console .alert-success { --ae-alert-accent: var(--success-fill); }
body.aethium-console .alert-danger { --ae-alert-accent: var(--danger-fill); }
body.aethium-console .alert-warning { --ae-alert-accent: var(--warning-fill); }

body.aethium-console .alert :is(strong, b, h4, h5, h6, .alert-heading) { color: var(--text-primary); }
body.aethium-console .alert-link { color: inherit; text-decoration: underline; }
body.aethium-console .alert .btn-close { width: 30px; height: 30px; background-size: 14px; top: .45rem; right: .45rem; padding: 0; }
body.aethium-console .alert-dismissible { padding-right: 3.25rem; }

/* ------------------------------------------------------------
   Tabellen — transparant op glas, rustige kop, zachte hover
   ------------------------------------------------------------ */
body.aethium-console .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--ae-line);
    --bs-table-striped-bg: rgba(255, 255, 255, .018);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: rgba(var(--accent-rgb), .1);
    font-size: .875rem;
}

body.aethium-console .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--ae-line);
}

body.aethium-console .table > thead > tr > *,
body.aethium-console .table > thead.table-dark > tr > *,
body.aethium-console .table > thead.table-light > tr > * {
    --bs-table-bg: rgba(255, 255, 255, .025);
    --bs-table-color: var(--text-muted);
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
    white-space: nowrap;
}

body.aethium-console .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(255, 255, 255, .035); }
body.aethium-console .table-hover tbody tr:hover { background-color: transparent; }
body.aethium-console .table > tbody > tr:last-child > * { border-bottom-color: transparent; }
body.aethium-console .card > .table-responsive > .table,
body.aethium-console .card > .table { margin-bottom: 0; }
body.aethium-console .table :is(td, th) { vertical-align: middle; }

/* Rij-statussen: een tint met een randje links in plaats van een vlak. */
body.aethium-console .table > tbody > tr:is(.table-danger, .table-warning, .table-success, .table-info, .table-primary) > * {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    color: var(--text-primary);
}

body.aethium-console .table > tbody > tr.table-danger > * { --bs-table-bg-state: rgba(var(--danger-rgb), .08); }
body.aethium-console .table > tbody > tr.table-warning > * { --bs-table-bg-state: rgba(var(--warning-rgb), .05); }
body.aethium-console .table > tbody > tr.table-success > * { --bs-table-bg-state: rgba(var(--success-rgb), .08); }
body.aethium-console .table > tbody > tr:is(.table-info, .table-primary) > * { --bs-table-bg-state: rgba(var(--accent-rgb), .07); }
body.aethium-console .table > tbody > tr.table-danger > :first-child { box-shadow: inset 2px 0 0 var(--danger-fill); }
body.aethium-console .table > tbody > tr.table-warning > :first-child { box-shadow: inset 2px 0 0 var(--warning-fill); }
body.aethium-console .table > tbody > tr.table-success > :first-child { box-shadow: inset 2px 0 0 var(--success-fill); }
body.aethium-console .table > tbody > tr:is(.table-info, .table-primary) > :first-child { box-shadow: inset 2px 0 0 var(--accent-primary); }

/* ------------------------------------------------------------
   Lijsten, accordions, voortgang
   ------------------------------------------------------------ */
body.aethium-console .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-border-color: var(--ae-line);
    --bs-list-group-border-radius: 8px;
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, .04);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-action-active-bg: rgba(255, 255, 255, .06);
    --bs-list-group-active-bg: rgba(var(--accent-rgb), .12);
    --bs-list-group-active-border-color: rgba(var(--accent-rgb), .45);
    --bs-list-group-active-color: var(--accent-text);
    --bs-list-group-disabled-color: var(--text-muted);
}

body.aethium-console .list-group-item:is(.bg-dark, .bg-dark-custom, .bg-secondary) { background-color: transparent !important; }
body.aethium-console .list-group-item.text-light { color: var(--text-primary) !important; }

body.aethium-console .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--ae-line);
    --bs-accordion-border-radius: var(--ae-radius);
    --bs-accordion-inner-border-radius: calc(var(--ae-radius) - 1px);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-bg: rgba(255, 255, 255, .02);
    --bs-accordion-active-color: var(--accent-text);
    --bs-accordion-active-bg: rgba(var(--accent-rgb), .07);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(154, 184, 226, .35);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AB8E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-icon-width: 1rem;
}

body.aethium-console .accordion-button { font-size: .9rem; font-weight: 600; }
body.aethium-console .accordion-item { background: var(--ae-glass); }
body.aethium-console .accordion-item:is(.bg-dark, .bg-dark-custom) { background: var(--ae-glass) !important; }
body.aethium-console .accordion-button:is(.bg-dark, .bg-dark-custom):not(.collapsed) { background-color: rgba(var(--accent-rgb), .07) !important; }

body.aethium-console .progress,
body.aethium-console .progress-stacked {
    --bs-progress-height: .5rem;
    --bs-progress-bg: rgba(255, 255, 255, .06);
    --bs-progress-border-radius: 999px;
    --bs-progress-bar-bg: var(--accent-primary);
    --bs-progress-font-size: .65rem;
    box-shadow: inset 0 0 0 1px var(--ae-line);
}

/* Een balk met een tekstlabel erin heeft wat meer hoogte nodig. */
body.aethium-console .progress[style*="height"] { --bs-progress-border-radius: 5px; }
body.aethium-console .progress-bar.bg-success { background-color: var(--success-fill) !important; }
body.aethium-console .progress-bar.bg-danger { background-color: var(--danger-fill) !important; }
body.aethium-console .progress-bar.bg-warning { background-color: var(--warning-fill) !important; color: var(--brand-obsidian); }
body.aethium-console .progress-bar:is(.bg-info, .bg-primary) { background-color: var(--accent-primary) !important; }

/* ------------------------------------------------------------
   Meldingen, tooltips, popovers en offcanvas — dikker glas
   ------------------------------------------------------------ */
body.aethium-console .toast {
    --bs-toast-bg: var(--ae-glass-strong);
    --bs-toast-color: var(--text-primary);
    --bs-toast-border-color: rgba(255, 255, 255, .12);
    --bs-toast-border-radius: 10px;
    --bs-toast-header-bg: rgba(255, 255, 255, .03);
    --bs-toast-header-color: var(--text-primary);
    --bs-toast-header-border-color: var(--ae-line);
    background: var(--ae-glass-strong);
    box-shadow: var(--ae-overlay-shadow);
}

/* Gekleurde toasts (text-bg-success e.d.): rustig vlak met statusstreep. */
body.aethium-console .toast:is(.bg-success, .bg-danger, .bg-warning, .bg-info, .bg-primary, .text-bg-success, .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-primary) {
    background: var(--ae-glass-strong) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--ae-toast-accent, var(--accent-primary));
}

body.aethium-console .toast:is(.bg-success, .text-bg-success) { --ae-toast-accent: var(--success-fill); }
body.aethium-console .toast:is(.bg-danger, .text-bg-danger) { --ae-toast-accent: var(--danger-fill); }
body.aethium-console .toast:is(.bg-warning, .text-bg-warning) { --ae-toast-accent: var(--warning-fill); }
body.aethium-console .toast :is(.text-white, .text-dark) { color: inherit !important; }
body.aethium-console .toast .btn-close-white { filter: none; }

body.aethium-console .tooltip {
    --bs-tooltip-bg: var(--bg-elevated);
    --bs-tooltip-color: var(--text-primary);
    --bs-tooltip-border-radius: 5px;
    --bs-tooltip-font-size: .75rem;
    --bs-tooltip-opacity: 1;
}

body.aethium-console .popover {
    --bs-popover-bg: var(--bg-tertiary);
    --bs-popover-border-color: rgba(255, 255, 255, .12);
    --bs-popover-border-radius: 10px;
    --bs-popover-header-bg: rgba(255, 255, 255, .03);
    --bs-popover-header-color: var(--text-primary);
    --bs-popover-body-color: var(--text-secondary);
    --bs-popover-font-size: .8125rem;
    box-shadow: var(--ae-overlay-shadow);
}

body.aethium-console .offcanvas {
    --bs-offcanvas-bg: rgb(16, 21, 28);
    --bs-offcanvas-color: var(--text-primary);
    --bs-offcanvas-border-color: var(--border-color);
}

/* ------------------------------------------------------------
   Overige knoppen en formulierdelen
   ------------------------------------------------------------ */

/* Info en licht hebben geen eigen betekenis naast het accent: ze worden de
   omlijnde accentknop en de neutrale knop. */
body.aethium-console :is(.btn-outline-info) {
    background: rgba(255, 255, 255, .02);
    border-color: var(--border-color);
    color: var(--accent-text);
}

body.aethium-console .btn-outline-info:is(:hover, :focus-visible, .active),
body.aethium-console .btn-check:checked + .btn-outline-info {
    background: rgba(var(--accent-rgb), .1);
    border-color: var(--accent-primary);
    color: #fff;
}

body.aethium-console .btn-info {
    background: rgba(var(--accent-rgb), .14);
    border: 1px solid rgba(var(--accent-rgb), .55);
    color: var(--accent-text) !important;
}

body.aethium-console .btn-info:is(:hover, :focus-visible, .active) {
    background: rgba(var(--accent-rgb), .24);
    border-color: var(--accent-primary);
    color: #fff !important;
}

body.aethium-console .btn-light {
    background: rgba(255, 255, 255, .02);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.aethium-console .btn-light:is(:hover, :focus-visible, .active) {
    background: rgba(255, 255, 255, .06);
    border-color: var(--border-light);
    color: #fff;
}

body.aethium-console .btn-success { background: var(--success-fill); border-color: var(--success-fill); color: #fff; }
body.aethium-console .btn-success:is(:hover, :focus-visible) { background: var(--success-hover); border-color: var(--success-hover); color: #fff; }
body.aethium-console .btn-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
body.aethium-console .btn-danger:is(:hover, :focus-visible) { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
body.aethium-console .btn-warning { color: var(--brand-obsidian); }
body.aethium-console .btn-warning.text-dark { color: var(--brand-obsidian) !important; }

body.aethium-console .btn-link {
    --bs-btn-color: var(--accent-text);
    --bs-btn-hover-color: #c3d6f0;
    --bs-btn-active-color: #c3d6f0;
    font-weight: 500;
}

body.aethium-console .btn-check:checked + :is(.btn-outline-secondary, .btn-outline-light),
body.aethium-console :is(.btn-outline-secondary, .btn-outline-light):active {
    background: rgba(var(--accent-rgb), .12);
    border-color: rgba(var(--accent-rgb), .6);
    color: #fff;
}

body.aethium-console :is(.btn-success, .btn-danger, .btn-warning, .btn-info).btn:disabled,
body.aethium-console .btn.disabled { opacity: .5; }

body.aethium-console .form-check-input {
    border-color: var(--border-light);
    background-color: var(--bg-secondary);
}

body.aethium-console .form-check-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(154, 184, 226, .18);
}

body.aethium-console .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238B949E'/%3e%3c/svg%3e");
}

body.aethium-console .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239AB8E2'/%3e%3c/svg%3e");
}

body.aethium-console .form-range::-webkit-slider-thumb { background: var(--accent-primary); }
body.aethium-console .form-range::-moz-range-thumb { background: var(--accent-primary); }
body.aethium-console .form-range::-webkit-slider-runnable-track { background: var(--bg-elevated); }
body.aethium-console .form-range::-moz-range-track { background: var(--bg-elevated); }
body.aethium-console .form-control-color { padding: .3rem; }

body.aethium-console .form-text { font-size: .78rem; }
body.aethium-console :is(.form-control, .form-select):disabled,
body.aethium-console .form-control[readonly]:not([type="file"]) { background-color: rgba(255, 255, 255, .03); color: var(--text-secondary); }
body.aethium-console .form-control[type="file"]::file-selector-button {
    border-right: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.aethium-console .input-group > :is(.btn, .input-group-text) { border-color: var(--border-light); }
body.aethium-console .input-group-text { color: var(--text-muted); }

body.aethium-console .nav-pills .nav-link {
    border-radius: var(--ae-control-radius);
    color: var(--text-secondary);
    font-size: .875rem;
    font-weight: 600;
}

body.aethium-console .nav-pills .nav-link:not(.active):hover { background: rgba(255, 255, 255, .04); color: var(--text-primary); }

body.aethium-console .pagination {
    --bs-pagination-bg: rgba(255, 255, 255, .02);
    --bs-pagination-color: var(--text-secondary);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-hover-bg: rgba(255, 255, 255, .06);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-border-color: var(--border-light);
    --bs-pagination-active-bg: var(--accent-primary);
    --bs-pagination-active-border-color: var(--accent-primary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-border-color: var(--border-color);
    --bs-pagination-border-radius: var(--ae-control-radius);
    --bs-pagination-font-size: .8125rem;
}

body.aethium-console hr { border-color: var(--border-color); opacity: 1; }
body.aethium-console .border:not(.btn):not(.form-control):not(.form-select) { --bs-border-color: var(--ae-line); }
body.aethium-console .shadow,
body.aethium-console .shadow-sm { box-shadow: var(--ae-glass-shadow) !important; }
body.aethium-console .rounded-3 { border-radius: var(--ae-radius) !important; }
body.aethium-console .spinner-border.text-primary,
body.aethium-console .spinner-border.text-accent { color: var(--accent-text) !important; }
body.aethium-console mark, body.aethium-console .mark { padding: 0 .15em; border-radius: 3px; background: rgba(var(--accent-rgb), .3); color: #fff; }
body.aethium-console ::selection { background: rgba(var(--accent-rgb), .45); color: #fff; }

/* Rustige schuifbalken in het obsidian-vlak. */
body.aethium-console { scrollbar-color: var(--border-light) transparent; }
body.aethium-console ::-webkit-scrollbar { width: 10px; height: 10px; }
body.aethium-console ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--border-light) padding-box; }
body.aethium-console ::-webkit-scrollbar-thumb:hover { background-color: #60748a; }
body.aethium-console ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------
   Paginakop — dezelfde maat en hiërarchie op elke pagina
   ------------------------------------------------------------
   Pagina's openen met een h1/h2 in een flex-rij (vaak .page-header). De
   titel wordt overal even groot, het icoon ervoor zacht blauw. */
body.aethium-console #page-content-wrapper > .container-fluid > :is(h1, h2):first-child,
body.aethium-console .page-header :is(h1, h2),
body.aethium-console #page-content-wrapper .container-fluid > .d-flex:first-child > :is(h1, h2, div > h1, div > h2) {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
}

body.aethium-console .page-header :is(h1, h2) > i:first-child,
body.aethium-console #page-content-wrapper .container-fluid > .d-flex:first-child :is(h1, h2) > i:first-child {
    color: var(--accent-text) !important;
    font-size: .85em;
}

body.aethium-console :is(.card-header, .card-title, .modal-title) > i:first-child:not([class*="text-"]) { color: var(--accent-text); }
body.aethium-console .card-header :is(h5, h6, .h5, .h6) { font-size: .95rem; font-weight: 600; letter-spacing: 0; }

/* Snelle acties en uploadvlakken: glas zonder optillen, rand kleurt mee. */
body.aethium-console .quick-action-btn {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius);
    background: var(--ae-glass);
    box-shadow: var(--ae-glass-shadow);
    transition: border-color .15s ease, background-color .15s ease;
}

body.aethium-console .quick-action-btn:hover,
body.aethium-console .quick-action-btn:focus-visible {
    border-color: rgba(var(--accent-rgb), .6);
    background-color: rgba(var(--accent-rgb), .05);
    box-shadow: var(--ae-glass-shadow);
    transform: none;
}

body.aethium-console .quick-action-btn i { color: var(--accent-text); }
body.aethium-console .quick-action-btn .btn-title { font-size: 1rem; }

body.aethium-console .upload-zone {
    border: 1px dashed var(--border-light) !important;
    border-radius: var(--ae-radius) !important;
    background: rgba(10, 13, 18, .45) !important;
    box-shadow: none !important;
}

body.aethium-console .upload-zone:is(:hover, .dragover) {
    border-color: var(--accent-text) !important;
    background: rgba(var(--accent-rgb), .06) !important;
}

body.aethium-console .upload-zone i { color: var(--accent-text); }

@media (prefers-reduced-transparency: reduce) {
    body.aethium-console #page-content-wrapper { background: var(--bg-primary); }
    body.aethium-console .card { background: var(--bg-secondary); }
    body.aethium-console :is(.modal-content, .dropdown-menu) { background: var(--bg-tertiary); }
}