/* ============================================================
   DARK MODE — Premium Enterprise / Glassmorphism Design System
   Toggle via <html class="dark-mode">
   Palette: dark teal #071A20 / #0A2530 / #0D2F38
            primary cyan #16F2E3, secondary blue #3DA9FC
   ------------------------------------------------------------
   This file is loaded on EVERY page (via layouts/main.blade.php,
   layouts/data.blade.php, layouts/auth.blade.php, layouts/app.blade.php).
   It redefines the `--ms-*` tokens used by component/admin/ms-style.blade.php
   so all per-view inline `var(--ms-*)` styles auto-flip to the cyan/blue
   premium palette in dark mode — no Blade edits needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   GLOBAL LAYOUT POLISH — runs on every page (light + dark).
   dark-mode.css is the LAST stylesheet compiled into <head> in all 4
   layouts (main/data/auth/app.blade.php) so non-prefixed rules here
   win over both nav-side-bar.css AND the inline <style> in main.blade.php
   (which sets .l-main { padding: 12px 24px !important } — the actual
   source of the "dead strip" between sidebar and content).
   We do NOT touch sidebar width, sidebar-spacer, app-content width, or
   any header position. We only (a) trim the .l-main LEFT padding from 12px
   to a tight flush gutter, (b) kill Bootstrap container clamps inside the
   content region so cards can spread to available width, (c) add a small
   col gutter. Layout proportions are preserved.
   ============================================================ */
.l-main {
    padding: 14px 24px 24px 8px !important;
}
.l-header__inner { padding: 0 14px !important; }
.content-wrapper,
.content-wrapper--with-bg,
.page-wrapper,
.page-title-content,
.main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.l-main .container,
.l-main .container-lg,
.l-main .container-md,
.l-main .container-sm,
.l-main .container-xl,
.l-main .container-xxl,
.l-main .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
.l-main [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* ============================================================
   LIGHT MODE TOKENS (default — unchanged)
   ============================================================ */
:root {
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-input: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-modal: #ffffff;
    --bg-tooltip: #333333;
    --bg-badge-green: #dcfce7;
    --bg-badge-red: #fef2f2;
    --bg-badge-yellow: #fefce8;
    --bg-badge-blue: #eff6ff;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --primary: #16a34a;
    --primary-hover: #15803d;
    --primary-light: #dcfce7;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --success: #22c55e;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.1);

    --dt-header-bg: #f8fafc;
    --dt-body-bg: #ffffff;
    --dt-hover-bg: #f8fafc;
    --dt-border: #e2e8f0;

    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a1a1a1;
}

/* ============================================================
   DARK MODE TOKENS — Premium Enterprise palette
   ============================================================ */
html.dark-mode {
    /* Surfaces — dark teal, never pure black */
    --bg-body: #071A24;
    --bg-card: rgba(13, 47, 56, 0.55);      /* glass card */
    --bg-card-solid: #0D2F38;
    --bg-header: rgba(10, 37, 48, 0.55);    /* glass navbar */
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-dropdown: rgba(13, 47, 56, 0.92);
    --bg-modal: rgba(10, 37, 48, 0.85);
    --bg-tooltip: rgba(7, 26, 32, 0.95);

    --glass: rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.10);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-strong: rgba(255, 255, 255, 0.18);

    --bg-badge-green: rgba(52, 211, 153, 0.14);
    --bg-badge-red:   rgba(251, 113, 133, 0.14);
    --bg-badge-yellow: rgba(251, 191, 36, 0.16);
    --bg-badge-blue:  rgba(61, 169, 252, 0.16);

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #D1D5DB;
    --text-muted: #94A3B8;
    --text-inverse: #071A24;

    /* Borders — translucent */
    --border: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.06);

    /* Brand — primary cyan #00E5FF, secondary cyan #00FFD5, accent blue #2EA8FF */
    --primary: #00E5FF;
    --primary-hover: #00FFD5;
    --primary-light: rgba(0,229,255, 0.12);
    --secondary: #00FFD5;
    --accent-blue: #2EA8FF;
    --danger: #FB7185;
    --warning: #FBBF24;
    --info: #2EA8FF;
    --success: #34D399;

    /* Glow/shadow — glow rgba(0,229,255,.35) per spec */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
    --glow-primary: 0 0 24px rgba(0,229,255, 0.35);
    --glow-secondary: 0 0 22px rgba(0, 255, 213, 0.30);
    --glow-soft: 0 0 18px rgba(0,229,255, 0.20);
    --gradient-primary: linear-gradient(135deg, #00E5FF 0%, #2EA8FF 100%);
    --gradient-cyan: linear-gradient(135deg, #00E5FF 0%, #00FFD5 100%);
    --gradient-surface: linear-gradient(160deg, #0A2530 0%, #071A24 100%);
    --gradient-sidebar: linear-gradient(180deg, #0D2B38 0%, #081E29 55%, #071A24 100%);

    /* DataTables tokens */
    --dt-header-bg: rgba(255, 255, 255, 0.05);
    --dt-body-bg: transparent;
    --dt-hover-bg: rgba(0,229,255, 0.06);
    --dt-border: rgba(255, 255, 255, 0.08);

    --scrollbar-track: rgba(7, 26, 32, 0.6);
    --scrollbar-thumb: rgba(0,229,255, 0.25);
    --scrollbar-thumb-hover: rgba(0,229,255, 0.45);

    /* Flip the shared Master-Siswa tokens used by ms-style + per-view inline styles.
       html.dark-mode (0,1,1) beats per-view :root (0,1,0), so these override. */
    --ms-primary: #00E5FF;
    --ms-primary-dark: #00FFD5;
    --ms-primary-light: rgba(0,229,255, 0.12);
    --ms-bg: #071A24;
    --ms-border: rgba(255, 255, 255, 0.10);
    --ms-text: #FFFFFF;
    --ms-text-soft: #D1D5DB;

    /* ---- Sidebar tokens (override nav-side-bar.css :root) ---- */
    --sidebar-bg: #111827;
    --sidebar-border: rgba(0, 255, 255, .10);
    --sidebar-text: rgba(255,255,255,.90);
    --sidebar-text-muted: rgba(255,255,255,.50);
    --sidebar-icon-bg: rgba(255,255,255,.06);
    --sidebar-icon-border: rgba(255,255,255,.04);
    --sidebar-hover-bg: rgba(0, 255, 200, .08);
    --sidebar-hover-text: #fff;
    --sidebar-active-bg: rgba(0, 255, 200, .12);
    --sidebar-active-text: #fff;
    --sidebar-active-icon: #00FFC8;
    --sidebar-active-border: #00FFC8;
    --sidebar-active-strip: #00FFC8;
    --sidebar-submenu-hover: rgba(0, 255, 200, .08);

    /* Legacy sidebar tokens */
    --text-light: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.55);
    --hover-bg: rgba(0, 255, 200, .08);
    --hover-bg-strong: rgba(0, 255, 200, .14);
    --active-bg: rgba(0, 255, 200, .12);
    --active-color: #fff;
    --submenu-bg: rgba(17, 24, 39, .95);
    --green-gradient: linear-gradient(180deg, #081E29 0%, #071A20 100%);
}

/* ============================================================
   BASE + DECORATIVE BACKGROUND
   Radial glows + abstract blur circles, never pure black.
   ============================================================ */
html.dark-mode,
html.dark-mode body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: 'Plus Jakarta Sans', 'Inter', 'Poppins', system-ui, sans-serif;
}
html.dark-mode body {
    background-image:
        radial-gradient(circle at 8% 12%, rgba(0,229,255, 0.18), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(46, 168, 255, 0.16), transparent 30%),
        radial-gradient(circle at 78% 88%, rgba(0, 255, 213, 0.12), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(251, 113, 133, 0.08), transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(46,168,255,0.05), transparent 60%),
        linear-gradient(160deg, #0A2530 0%, #071A24 40%, #0D2F38 100%) !important;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    position: relative;
}
/* Layer 1: transparent grid pattern + diagonal lines + card-area glow — 
   adds subtle structure + ambient light behind content. Sits behind 
   everything (z-index:0). */
html.dark-mode body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* Diagonal lines (↗↖) */
        repeating-linear-gradient(135deg, rgba(0,229,255,0.030) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(45deg,  rgba(0,255,213,0.022) 0 1px, transparent 1px 32px),
        /* Grid lines (horizontal + vertical) */
        repeating-linear-gradient(90deg,  rgba(255,255,255,0.018) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg,   rgba(255,255,255,0.018) 0 1px, transparent 1px 48px),
        /* Ambient light behind center content area (where cards sit) */
        radial-gradient(ellipse at 50% 40%, rgba(0,229,255,0.08), transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(46,168,255,0.06), transparent 50%),
        /* Top glow */
        radial-gradient(circle at 50% -10%, rgba(0,229,255,0.10), transparent 50%);
    opacity: .65;
    animation: none;
    filter: none;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}
/* Layer 2: extremely faint noise texture (SVG fractal noise, inline data URI).
   Adds organic depth so the bg doesn't read as a flat gradient. ~3% opacity. */
html.dark-mode .app-layout::before {
    content: "";
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, #00E5FF, transparent 70%);
    top: -200px;
    right: -140px;
    animation: darkFloat 22s ease-in-out infinite alternate;
}
html.dark-mode .app-layout::after {
    content: "";
    position: fixed;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.20;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, #2EA8FF, transparent 70%);
    bottom: -220px;
    left: 15%;
    animation: darkFloat 26s ease-in-out infinite alternate-reverse;
}
/* Noise texture overlay via a separate fixed element on <html> pseudo.
   Using html::before so it doesn't collide with body::after or app-layout pseudo. */
html.dark-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}
@keyframes darkFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.1); }
}
/* Keep real content above the decorative background orbs.
   IMPORTANT: sidebar is NOT in this list — it must stay position:fixed
   (from nav-side-bar.css) so the .sidebar-spacer flex sibling still
   pushes .app-content to the right. Overriding sidebar to position:relative
   here was the previous bug: it dropped the sidebar into the flex flow
   alongside the spacer, double-pushing content and letting it spread left
   past / over the sidebar. */
html.dark-mode .app-layout,
html.dark-mode .l-main,
html.dark-mode .content-wrapper,
html.dark-mode footer,
html.dark-mode #footer,
html.dark-mode #header,
html.dark-mode #hero {
    position: relative;
    z-index: 1;
}
html.dark-mode .l-header {
    position: relative;
    z-index: 1020;
}

/* Smooth theme switch (NO transform/filter here — leave those for hover anims) */
html.dark-mode *,
html.dark-mode *::before,
html.dark-mode *::after {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Custom scrollbar */
html.dark-mode ::-webkit-scrollbar { width: 9px; height: 9px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ============================================================
   SIDEBAR — premium glass panel with neon active state
   ============================================================ */
html.dark-mode .sidebar--flyout {
    --flyout-bg: #16202B;
    --flyout-border: rgba(0, 255, 255, .12);
    --flyout-shadow: 0 18px 40px -8px rgba(0, 0, 0, .40),
                     0 6px 14px -6px rgba(0, 0, 0, .25),
                     0 0 0 1px rgba(0, 255, 255, .08);
    --flyout-text: rgba(255, 255, 255, .90);
    --flyout-text-soft: rgba(255, 255, 255, .45);
    --flyout-hover-bg: rgba(0, 255, 200, .08);
    --flyout-active-bg: rgba(0, 255, 200, .12);
    --flyout-active-color: #fff;
    --flyout-accent: #00FFC8;
}
html.dark-mode .sidebar {
    background:
        linear-gradient(180deg, rgba(148,163,184,0.05) 0%, transparent 12%),
        linear-gradient(180deg, #1a2332 0%, #141d2b 50%, #0f1722 100%) !important;
    border-right: 1px solid rgba(148,163,184,0.10) !important;
    box-shadow:
        0 0 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.05),
        4px 0 32px -8px rgba(148,163,184,0.08),
        0 8px 32px -6px rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
/* Subtle ambient glow — soft blue-gray radial accent */
html.dark-mode .sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 35% at 50% 15%, rgba(148,163,184,0.04), transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 85%, rgba(99,102,241,0.03), transparent 65%);
    opacity: .6;
    border-radius: inherit;
}
html.dark-mode .sidebar-header {
    border-bottom: 1px solid rgba(0, 255, 255, .08) !important;
    background: rgba(17, 24, 39, .95) !important;
}
html.dark-mode .sidebar-brand-name {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .3px;
}
html.dark-mode .sidebar-brand-sub {
    color: rgba(255,255,255,.40) !important;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
html.dark-mode .sidebar-brand-icon img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 200, .25));
}
html.dark-mode .sidebar-toggler span {
    background: rgba(255,255,255,.50) !important;
    transition: background .25s ease !important;
}
html.dark-mode .sidebar-toggler:hover span {
    background: #00FFC8 !important;
    box-shadow: 0 0 12px rgba(0, 255, 200, .40);
}
html.dark-mode .sidebar-toggler:hover {
    background: rgba(0, 255, 200, .08) !important;
}

/* Menu items — gray-blue glass */
html.dark-mode .menu-link {
    color: rgba(255,255,255,.85) !important;
    border-radius: 14px;
    position: relative;
    font-weight: 450;
    letter-spacing: .15px;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
html.dark-mode .menu-link:hover {
    background: rgba(0, 255, 200, .08) !important;
    border: 1px solid rgba(0, 255, 255, .10);
    transform: translateX(3px);
    box-shadow: 0 0 20px rgba(0, 255, 200, .08);
    color: #fff !important;
}
/* ── Menu icon ── */
html.dark-mode .menu-icon {
    background: rgba(255,255,255,.06) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255,255,255,.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 12px rgba(0,0,0,0.25) !important;
    transition: all .3s ease !important;
}
html.dark-mode .menu-icon i,
html.dark-mode .menu-icon .fas,
html.dark-mode .menu-icon .bi {
    filter: drop-shadow(0 0 8px rgba(0, 255, 200, .20)) !important;
}
html.dark-mode .menu-link:hover .menu-icon {
    background: rgba(0, 255, 200, .10) !important;
    color: #00FFC8 !important;
    box-shadow:
        0 0 20px rgba(0, 255, 200, .10),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    transform: scale(1.08);
    border-color: rgba(0, 255, 255, .12) !important;
}
html.dark-mode .menu-link:hover .menu-icon i,
html.dark-mode .menu-link:hover .menu-icon .fas,
html.dark-mode .menu-link:hover .menu-icon .bi {
    filter: drop-shadow(0 0 12px rgba(0, 255, 200, .30)) !important;
}
html.dark-mode .menu-text {
    color: rgba(255,255,255,.85) !important;
    font-weight: 450;
    letter-spacing: .15px;
    transition: color .3s ease;
}
html.dark-mode .menu-link:hover .menu-text {
    color: #fff !important;
}
html.dark-mode .menu-arrow { color: rgba(255,255,255,.35) !important; }

/* ACTIVE menu — neon cyan glow */
html.dark-mode .menu-item.is-active > .menu-link {
    background: rgba(0, 255, 200, .12) !important;
    border: 1px solid rgba(0, 255, 255, .15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 20px rgba(0, 255, 200, .12),
        0 0 8px rgba(0, 255, 200, .08),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 16px rgba(0, 255, 200, .04) !important;
    transform: translateX(2px);
}
html.dark-mode .menu-item.is-active > .menu-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 0 6px 6px 0;
    background: #00FFC8;
    box-shadow:
        0 0 14px rgba(0, 255, 200, .50),
        0 0 28px rgba(0, 255, 200, .15);
}
html.dark-mode .menu-item.is-active > .menu-link::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(90deg, rgba(0, 255, 200, .08), transparent);
    pointer-events: none;
    border-radius: 14px 0 0 14px;
}
html.dark-mode .menu-item.is-active > .menu-link .menu-text {
    color: #fff !important;
    font-weight: 600;
    text-shadow: 0 0 14px rgba(0, 255, 200, .30);
}
html.dark-mode .menu-item.is-active > .menu-link .menu-icon {
    background: rgba(0, 255, 200, .15) !important;
    color: #fff !important;
    box-shadow:
        0 0 18px rgba(0, 255, 200, .40),
        0 0 8px rgba(0, 255, 200, .20),
        inset 0 1px 0 rgba(255,255,255,.15) !important;
    border-color: transparent !important;
    transform: scale(1.10);
}
html.dark-mode .menu-item.is-active > .menu-link .menu-icon i,
html.dark-mode .menu-item.is-active > .menu-link .menu-icon .fas,
html.dark-mode .menu-item.is-active > .menu-link .menu-icon .bi {
    filter: drop-shadow(0 0 10px rgba(0, 255, 200, .40)) !important;
    color: #00FFC8 !important;
}
html.dark-mode .menu-item.has-submenu.has-active > .menu-link {
    box-shadow: 0 0 20px rgba(0, 255, 200, .12);
}

/* Submenu */
html.dark-mode .menu-submenu {
    background: rgba(17, 24, 39, .95) !important;
    border-left: 1px solid rgba(0, 255, 255, .10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dark-mode .menu-submenu::before {
    background: rgba(0, 255, 255, .12) !important;
}
html.dark-mode .menu-submenu-item::before {
    background: rgba(0, 255, 255, .12) !important;
}
html.dark-mode .menu-submenu-title { color: rgba(255,255,255,.45) !important; }
html.dark-mode .menu-submenu-link {
    color: rgba(255,255,255,.70) !important;
    transition: background .25s ease, color .25s ease, padding .25s ease !important;
}
html.dark-mode .menu-submenu-link:hover {
    background: rgba(0, 255, 200, .08) !important;
    color: #00FFC8 !important;
    padding-left: 18px;
}
html.dark-mode .menu-submenu-item.is-active > .menu-submenu-link {
    background: rgba(0, 255, 200, .12) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-left: 3px solid #00F5D4;
}
html.dark-mode .menu-submenu-item.is-active > .menu-submenu-link::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}
html.dark-mode .sidebar.is-collapsed .menu-link[title]::after {
    background: #16202B !important;
    color: #fff !important;
    border: 1px solid rgba(0, 255, 255, .12) !important;
    box-shadow: 0 4px 16px rgba(0, 255, 200, .10) !important;
}

/* ============================================================
   L-SIDEBAR DARK MODE — Guru / Siswa / BK
   ============================================================ */
html.dark-mode .l-sidebar {
    background: linear-gradient(180deg, #1a2332 0%, #141d2b 50%, #0f1722 100%) !important;
    border-right: 1px solid rgba(148,163,184,0.10) !important;
    box-shadow:
        0 0 40px rgba(0,0,0,0.45),
        4px 0 32px -8px rgba(148,163,184,0.08) !important;
}
html.dark-mode .l-sidebar .logo {
    border-bottom: 1px solid rgba(0, 255, 255, .08) !important;
}
html.dark-mode .l-sidebar .logo .text-logo span,
html.dark-mode .l-sidebar .logo .text-logo .main-title {
    color: #fff !important;
}
html.dark-mode .l-sidebar .logo .text-logo .sub-title {
    color: rgba(255,255,255,.45) !important;
}
html.dark-mode .l-sidebar .c-menu__item__inner {
    color: rgba(255,255,255,.85) !important;
}
html.dark-mode .l-sidebar .c-menu__item__inner:hover {
    background: rgba(0, 255, 200, .08) !important;
    color: #fff !important;
}
html.dark-mode .l-sidebar .c-menu__item__inner .ic {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.50) !important;
}
html.dark-mode .l-sidebar .c-menu__item__inner:hover .ic {
    background: rgba(0, 255, 200, .10) !important;
    color: #00FFC8 !important;
}
html.dark-mode .l-sidebar .c-menu__item.is-active > .c-menu__item__inner {
    background: rgba(0, 255, 200, .12) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(0, 255, 200, .12) !important;
}
html.dark-mode .l-sidebar .c-menu__item.is-active > .c-menu__item__inner .ic {
    background: rgba(0, 255, 200, .15) !important;
    color: #00FFC8 !important;
    box-shadow: 0 0 18px rgba(0, 255, 200, .40) !important;
}
html.dark-mode .l-sidebar .c-menu__item.is-active > .c-menu__item__inner .c-menu-item__title span {
    color: #fff !important;
    font-weight: 600;
}
html.dark-mode .l-sidebar__content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, .20) !important;
}

/* ============================================================
   HEADER / NAVBAR — transparent glass + soft shadow
   ============================================================ */
html.dark-mode .l-header {
    position: relative;
    background: linear-gradient(180deg, rgba(10,37,48,0.72), rgba(7,26,32,0.58)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 0 30px -6px rgba(0,229,255,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
}
/* Bottom ambient glow line */
html.dark-mode .l-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.30), rgba(61,169,252,0.30), rgba(0,229,255,0.30), transparent);
    box-shadow: 0 0 12px rgba(0,229,255,0.20);
    pointer-events: none;
}
html.dark-mode .l-header__inner { border-bottom: none !important; }
html.dark-mode .c-header-icon {
    border-right-color: transparent !important;
    color: var(--text-secondary) !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    margin: 0 2px;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.25),
        0 0 12px -4px rgba(0,229,255,0.06) !important;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
html.dark-mode .c-header-icon:hover {
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) !important;
    color: var(--primary) !important;
    border-color: rgba(0,229,255, 0.30) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 0 20px rgba(0,229,255, 0.22),
        0 8px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .c-header-icon.lol {
    border-right-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.dark-mode .c-title h1 {
    color: var(--text-primary) !important;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-shadow: 0 0 20px rgba(0,229,255, 0.10);
}
html.dark-mode .name-tag {
    color: var(--text-primary) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,229,255,0.06)) !important;
    border: 1px solid rgba(0,229,255, 0.20) !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    box-shadow:
        0 0 18px rgba(0,229,255,0.15),
        0 4px 14px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    transition: all .3s ease !important;
}
html.dark-mode .name-tag:hover {
    color: #fff !important;
    border-color: rgba(0,229,255, 0.50) !important;
    box-shadow:
        0 0 28px rgba(0,229,255, 0.32),
        0 8px 22px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    transform: translateY(-2px) scale(1.03);
}

/* Hamburger bars — subtle cyan glow on hover */
html.dark-mode .hamburger-toggle span {
    background: var(--text-secondary) !important;
    box-shadow: none !important;
}
html.dark-mode .hamburger-toggle:hover span {
    background: var(--primary) !important;
    box-shadow: 0 0 8px rgba(0,229,255,0.40), 0 0 16px rgba(0,229,255,0.15) !important;
}

/* Notification bell & other header icon dropdowns — hover boost and icon glow */
html.dark-mode .notification-bell .c-header-icon:hover,
html.dark-mode .nav-item.dropdown .c-header-icon:hover {
    border-color: rgba(0,229,255,0.40) !important;
    box-shadow:
        0 0 24px rgba(0,229,255,0.28),
        0 8px 22px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .notification-bell .fa-bell,
html.dark-mode .nav-item.dropdown .fa-bell { color: var(--primary) !important; text-shadow: 0 0 10px rgba(0,229,255,0.45); }

/* Unread badge on bell — glass pill with red glow */
html.dark-mode .notification-bell .badge.bg-danger {
    background: linear-gradient(135deg, rgba(251,113,133,0.85), rgba(239,68,68,0.75)) !important;
    border: 1px solid rgba(251,113,133,0.50) !important;
    box-shadow: 0 0 14px rgba(251,113,133,0.40), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
}

/* Theme toggle button */
.theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease !important;
    box-sizing: border-box !important;
}
.theme-toggle:hover {
    background: rgba(0, 0, 0, .06) !important;
    color: var(--text-primary) !important;
    transform: rotate(15deg);
}
.theme-toggle i {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-size: 18px !important;
}
html.dark-mode .theme-toggle {
    color: var(--primary) !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.25),
        0 0 14px rgba(0,229,255,0.12) !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}
html.dark-mode .theme-toggle:hover {
    background: linear-gradient(160deg, rgba(0,229,255,0.18), rgba(0,229,255,0.06)) !important;
    border-color: rgba(0,229,255,0.35) !important;
    color: #fff !important;
    transform: rotate(15deg) scale(1.06);
    box-shadow:
        0 0 22px rgba(0,229,255,0.35),
        0 8px 20px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .theme-toggle i {
    filter: drop-shadow(0 0 6px rgba(0,229,255,0.35));
    text-shadow: 0 0 8px rgba(0,229,255,0.40);
}
#header .theme-toggle { color: rgba(255, 255, 255, .7) !important; }
#header .theme-toggle:hover { color: #fff !important; background: rgba(255, 255, 255, .1) !important; }
html.dark-mode #header .theme-toggle { color: rgba(0,229,255, 0.85) !important; }
html.dark-mode #header .theme-toggle:hover {
    color: #fff !important;
    background: rgba(0,229,255, 0.18) !important;
}

/* ============================================================
   CARDS — glassmorphism, blur, hover lift + cyan glow
   ============================================================ */
.navbar-nav { flex-direction: row !important; }

html.dark-mode .card,
html.dark-mode .table-card,
html.dark-mode .card-modern,
html.dark-mode .announcement-card,
html.dark-mode .month-card,
html.dark-mode .info-card-modern {
    background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(0,229,255, 0.12) !important;
    border-radius: 22px !important;
    /* Layered shadow for depth (Neo Glass): outer drop + tight inner crown + soft cyan aura */
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 0 0 1px rgba(0,229,255,0.05) inset,
        0 18px 40px -12px rgba(0,0,0,0.55),
        0 8px 20px -8px rgba(7,26,32,0.45),
        0 0 30px -6px rgba(0,229,255,0.06) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    color: var(--text-primary) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important;
    position: relative;
}
/* Subtle top highlight strip — gives the "neo glass" lit-from-above look */
html.dark-mode .card::before,
html.dark-mode .table-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(0,229,255,0.25), rgba(0,229,255,0) 35%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
}
html.dark-mode .card:hover,
html.dark-mode .card-modern:hover,
html.dark-mode .announcement-card:hover,
html.dark-mode .month-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0,229,255, 0.35) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 28px 60px -12px rgba(0,0,0,0.65),
        0 0 0 1px rgba(0,229,255,0.12) inset,
        0 0 36px -4px rgba(0,229,255,0.22) !important;
}
/* Table cards shouldn't lift — keep them grounded for legibility */
html.dark-mode .table-card:hover {
    transform: none !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 0 0 1px rgba(0,229,255,0.10) inset,
        0 22px 50px -12px rgba(0,0,0,0.6),
        0 0 30px -6px rgba(0,229,255,0.12) !important;
    border-color: rgba(0,229,255, 0.25) !important;
}
html.dark-mode .table-card { border-radius: 20px !important; }
html.dark-mode .table-card .card-body { padding: 16px 20px 20px; }
html.dark-mode .card-header {
    background: linear-gradient(135deg, rgba(0,229,255, 0.08), rgba(61, 169, 252, 0.05)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 20px 20px 0 0 !important;
    color: var(--text-primary) !important;
}
html.dark-mode .card-body,
html.dark-mode .card-title,
html.dark-mode .card-text,
html.dark-mode .card-subtitle {
    color: var(--text-primary) !important;
}
html.dark-mode .card-footer {
    background: rgba(7, 26, 32, 0.4) !important;
    border-top: 1px solid var(--glass-border) !important;
}
html.dark-mode .card-link { color: var(--primary) !important; }

/* Dashboard layout (dark-only visual tweaks; layout shape is global — see nav-side-bar.css) */
html.dark-mode .dashboard { background: transparent !important; }
html.dark-mode .content-wrapper--with-bg {
    background: transparent !important;
    position: relative;
    z-index: 1;
}
html.dark-mode .content-wrapper--with-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 40% at 50% 20%, rgba(0,229,255,0.06), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 80%, rgba(46,168,255,0.04), transparent 65%);
}
html.dark-mode .content-wrapper { background: transparent !important; }

/* Dark sidebar edge tint (visual only — does NOT change width/position).
   Sidebar keeps position:fixed + z-index:1000 from nav-side-bar.css so the
   .sidebar-spacer flex sibling still correctly pushes .app-content right. */
html.dark-mode .sidebar {
    border-right: 1px solid rgba(0, 255, 255, .10) !important;
    z-index: 1000 !important;
}

/* Statcard header-icon -> premium glass container with cyan glow (Neo Glass) */
html.dark-mode .header-icon {
    background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(61,169,252,0.10)) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(0,229,255,0.30) !important;
    box-shadow:
        0 0 28px rgba(0,229,255,0.30),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 8px 20px rgba(0,0,0,0.30) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: 0 0 14px rgba(0,229,255,0.45);
}
html.dark-mode .header-icon i { color: var(--primary) !important; text-shadow: 0 0 16px rgba(0,229,255,0.55); }

/* Modern badge pills — glass + glow + rounded full */
html.dark-mode .badge-modern {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .badge-ta {
    background: linear-gradient(135deg, rgba(61,169,252,0.22), rgba(61,169,252,0.06)) !important;
    color: var(--info) !important;
    border: 1px solid rgba(61, 169, 252, 0.40) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 600;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(61, 169, 252, 0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
html.dark-mode .badge-semester {
    background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(52,211,153,0.06)) !important;
    color: var(--success) !important;
    border: 1px solid rgba(52, 211, 153, 0.40) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 600;
    font-size: 11px;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Info card (banner) */
html.dark-mode .info-card-modern {
    background: rgba(61, 169, 252, 0.10) !important;
    border-left: 4px solid var(--secondary) !important;
    color: var(--text-primary) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
html.dark-mode .info-card-modern .info-icon { color: var(--secondary) !important; }

/* ============================================================
   DATATABLES — glass, gradient header, modern controls
   Keeps Laravel DataTables/Server-render compatibility intact.
   ============================================================ */
html.dark-mode .dataTables_wrapper {
    color: var(--text-primary) !important;
    position: relative;
    z-index: 1;
}

html.dark-mode table.dataTable {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}
html.dark-mode table.dataTable thead {
    background: linear-gradient(135deg, rgba(0,229,255,0.22) 0%, rgba(61,169,252,0.14) 50%, rgba(0,229,255,0.06) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 16px rgba(0,0,0,0.30),
        0 0 30px -6px rgba(0,229,255,0.20) !important;
}
html.dark-mode table.dataTable thead th {
    background: transparent !important;
    color: var(--primary) !important;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 11px;
    border-bottom: 1px solid rgba(0,229,255,0.20) !important;
    text-shadow: 0 0 16px rgba(0,229,255,0.40);
    padding: 16px 14px !important;
    position: relative;
}
html.dark-mode table.dataTable tbody td {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: var(--text-secondary) !important;
    padding: 13px 14px !important;
    vertical-align: middle;
    transition: background .25s ease, color .25s ease, box-shadow .3s ease, transform .3s ease !important;
}
html.dark-mode table.dataTable tbody tr {
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease !important;
    transform-origin: center;
}
html.dark-mode table.dataTable tbody tr:hover td {
    background: linear-gradient(90deg, rgba(0,229,255,0.14), rgba(61,169,252,0.06)) !important;
    color: var(--text-primary) !important;
    box-shadow:
        inset 0 1px 0 rgba(0,229,255,0.25),
        inset 0 -1px 0 rgba(0,229,255,0.12) !important;
}
html.dark-mode table.dataTable tbody tr:hover {
    box-shadow: 0 4px 20px -4px rgba(0,229,255,0.18), 0 8px 24px rgba(0,0,0,0.20);
}
/* Subtle alternating rows — very light tint, no visible stripes */
html.dark-mode table.dataTable tbody tr.even td {
    background: rgba(255, 255, 255, 0.02) !important;
}
html.dark-mode table.dataTable tbody tr.odd td {
    background: rgba(255, 255, 255, 0.005) !important;
}
html.dark-mode table.dataTable.no-footer { border-bottom-color: var(--dt-border) !important; }

/* Sort icons — cyan glow matching theme */
html.dark-mode table.dataTable thead .sorting:after,
html.dark-mode table.dataTable thead .sorting_asc:after,
html.dark-mode table.dataTable thead .sorting_desc:after,
html.dark-mode table.dataTable thead .sorting_asc_disabled:after,
html.dark-mode table.dataTable thead .sorting_desc_disabled:after {
    color: var(--primary) !important;
    opacity: 0.6;
    text-shadow: 0 0 8px rgba(0,229,255,0.25);
    font-size: 14px;
}
html.dark-mode table.dataTable thead .sorting_asc:after,
html.dark-mode table.dataTable thead .sorting_desc:after {
    opacity: 1;
    text-shadow: 0 0 14px rgba(0,229,255,0.55), 0 0 30px rgba(0,229,255,0.20);
}
html.dark-mode table.dataTable thead .sorting_asc,
html.dark-mode table.dataTable thead .sorting_desc {
    color: var(--primary) !important;
}

/* Selected row — cyan highlight */
html.dark-mode table.dataTable tbody tr.selected td {
    background: rgba(0,229,255, 0.12) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 rgba(0,229,255,0.20), inset 0 -1px 0 rgba(0,229,255,0.10) !important;
}
html.dark-mode table.dataTable tbody tr.selected:hover td {
    background: rgba(0,229,255, 0.18) !important;
}

/* Responsive expand icon */
html.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
html.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border-color: transparent !important;
    box-shadow: 0 0 10px rgba(0,229,255, 0.45);
}
html.dark-mode table.dataTable td.child { background: rgba(7, 26, 32, 0.4) !important; }
html.dark-mode table.dataTable td.child ul li { border-bottom-color: var(--border) !important; }
html.dark-mode .dtr-title { color: var(--text-primary) !important; }
html.dark-mode .dtr-data { color: var(--text-secondary) !important; }
html.dark-mode .dataTables_empty {
    color: var(--text-muted) !important;
    padding: 32px 0 !important;
    font-style: italic;
}
html.dark-mode .dataTables_processing {
    background: rgba(7, 26, 32, 0.85) !important;
    color: var(--primary) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* Modern search field */
html.dark-mode .dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}
html.dark-mode .dataTables_wrapper .dataTables_filter label {
    color: var(--text-secondary) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html.dark-mode .dataTables_wrapper .dataTables_filter label input {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    border-radius: 26px !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 6px 20px rgba(0,0,0,0.40),
        0 2px 6px rgba(0,0,0,0.30),
        0 0 22px -4px rgba(0,229,255,0.25) !important;
    margin-left: 0 !important;
    padding: 6px 16px 6px 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2300E5FF' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 14px;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease !important;
}
html.dark-mode .dataTables_wrapper .dataTables_filter label input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_filter label input:focus {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255, 0.18),
        0 0 22px rgba(0,229,255, 0.28),
        0 6px 18px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_filter label .filter-icon-prepend { display: none; }

/* Length select + info */
html.dark-mode .dataTables_wrapper .dataTables_length {
    color: var(--text-secondary) !important;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
html.dark-mode .dataTables_wrapper .dataTables_length select {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 3px 10px rgba(0,0,0,0.28),
        0 0 14px -4px rgba(0,229,255,0.14) !important;
    margin: 0 4px;
    padding: 4px 28px 4px 10px;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}
html.dark-mode .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255, 0.16),
        0 0 16px rgba(0,229,255,0.20),
        0 4px 12px rgba(0,0,0,0.32) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_info {
    color: var(--text-muted) !important;
    padding-top: 8px !important;
    font-size: 13px;
}

/* Pagination */
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding-top: 8px !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-secondary) !important;
    border-radius: 12px !important;
    margin: 0 2px !important;
    padding: 6px 14px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition: all .25s ease !important;
    font-size: 13px;
    cursor: pointer;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0,229,255, 0.14) !important;
    border-color: rgba(0,229,255, 0.35) !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,229,255,0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #00E5FF, #2EA8FF) !important;
    border-color: transparent !important;
    color: #071A20 !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,229,255, 0.40), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,229,255,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--text-muted) !important;
    opacity: .45 !important;
    background: var(--glass) !important;
    cursor: default !important;
}
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--glass) !important;
}

/* DataTables Buttons extension (export/copy/print toolbar) */
html.dark-mode .dt-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
html.dark-mode .dt-buttons .dt-button {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-secondary) !important;
    border-radius: 26px !important;
    padding: 6px 16px !important;
    font-size: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 4px 14px rgba(0,0,0,0.30) !important;
    transition: all .25s ease !important;
    cursor: pointer;
}
html.dark-mode .dt-buttons .dt-button:hover {
    background: rgba(0,229,255, 0.14) !important;
    border-color: rgba(0,229,255, 0.35) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,229,255,0.20) !important;
}
html.dark-mode .dt-buttons .dt-button:active {
    transform: scale(0.97);
}
html.dark-mode .dt-buttons .dt-button.buttons-copy {
    border-color: rgba(0,229,255,0.20) !important;
}
html.dark-mode .dt-buttons .dt-button.buttons-csv {
    border-color: rgba(52, 211, 153, 0.25) !important;
}
html.dark-mode .dt-buttons .dt-button.buttons-excel {
    border-color: rgba(52, 211, 153, 0.25) !important;
}
html.dark-mode .dt-buttons .dt-button.buttons-pdf {
    border-color: rgba(251, 191, 36, 0.25) !important;
}
html.dark-mode .dt-buttons .dt-button.buttons-print {
    border-color: rgba(99, 102, 241, 0.25) !important;
}

/* Responsive DataTables container */
html.dark-mode .table-responsive {
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html.dark-mode .dataTables_scrollHeadInner,
html.dark-mode .dataTables_scrollBody {
    width: 100% !important;
}

/* Float containment for filter + length */
html.dark-mode .dataTables_wrapper .dataTables_filter { float: right; }
html.dark-mode .dataTables_wrapper .dataTables_length { float: left; }
html.dark-mode .dataTables_wrapper .dataTables_info { float: left; clear: both; }
html.dark-mode .dataTables_wrapper .dataTables_paginate { float: right; }

/* Bottom section clearfix */
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

/* Custom filter toolbar (dt-toolbar) — used on admin list pages */
html.dark-mode .dt-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   FORMS — glass inputs, cyan focus glow
   ============================================================ */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode input[type="search"],
html.dark-mode input[type="tel"],
html.dark-mode select,
html.dark-mode textarea {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-primary) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.16), 0 0 22px rgba(0,229,255, 0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    outline: none;
}
html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: rgba(255, 255, 255, 0.35) !important; }
html.dark-mode .form-label,
html.dark-mode label,
html.dark-mode .control-label { color: var(--text-secondary) !important; font-weight: 500; }
html.dark-mode .form-text { color: var(--text-muted) !important; }
html.dark-mode .input-group-text {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .input-group-cu-icon { color: var(--text-muted) !important; }
html.dark-mode .input-group-cu:focus-within .input-group-cu-icon { color: var(--primary) !important; }

/* Checkboxes / radios — modern */
html.dark-mode .form-check-label { color: var(--text-secondary) !important; }
html.dark-mode .form-check-input {
    background: var(--bg-input) !important;
    border: 1px solid var(--glass-border-strong) !important;
    transition: all .25s ease !important;
}
html.dark-mode .form-check-input:checked {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 0 12px rgba(0,229,255, 0.45);
}
html.dark-mode .form-check-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.15) !important;
}

/* ============================================================
   BUTTONS — primary cyan→blue gradient + lift + glow
   ============================================================ */
html.dark-mode .btn {
    border-radius: 12px !important;
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important;
}
html.dark-mode .btn:hover { transform: translateY(-2px); }

html.dark-mode .btn-primary {
    background: linear-gradient(135deg, #00E5FF 0%, #2EA8FF 100%) !important;
    border: 1px solid transparent !important;
    color: #071A20 !important;
    box-shadow:
        0 4px 16px rgba(0,229,255, 0.35),
        0 0 0 1px rgba(255,255,255,0.10) inset,
        0 0 24px -6px rgba(0,229,255,0.45) !important;
}
html.dark-mode .btn-primary:hover {
    box-shadow:
        0 10px 28px rgba(0,229,255, 0.50),
        0 0 0 1px rgba(255,255,255,0.15) inset,
        0 0 36px -4px rgba(0,229,255,0.55) !important;
    color: #071A20 !important;
    transform: translateY(-3px) !important;
}
html.dark-mode .btn-secondary {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .btn-secondary:hover {
    background: var(--glass-strong) !important;
    border-color: var(--glass-border-strong) !important;
}
html.dark-mode .btn-success {
    background: rgba(52, 211, 153, 0.18) !important;
    border: 1px solid rgba(52, 211, 153, 0.40) !important;
    color: var(--success) !important;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.18);
}
html.dark-mode .btn-success:hover {
    background: rgba(52, 211, 153, 0.28) !important;
    box-shadow: 0 8px 22px rgba(52, 211, 153, 0.30);
}
html.dark-mode .btn-danger {
    background: rgba(251, 113, 133, 0.18) !important;
    border: 1px solid rgba(251, 113, 133, 0.40) !important;
    color: var(--danger) !important;
    box-shadow: 0 4px 14px rgba(251, 113, 133, 0.18);
}
html.dark-mode .btn-danger:hover {
    background: rgba(251, 113, 133, 0.28) !important;
    box-shadow: 0 8px 22px rgba(251, 113, 133, 0.30);
}
html.dark-mode .btn-warning {
    background: rgba(251, 191, 36, 0.18) !important;
    border: 1px solid rgba(251, 191, 36, 0.40) !important;
    color: var(--warning) !important;
}
html.dark-mode .btn-warning:hover {
    background: rgba(251, 191, 36, 0.28) !important;
}
html.dark-mode .btn-info {
    background: rgba(61, 169, 252, 0.18) !important;
    border: 1px solid rgba(61, 169, 252, 0.40) !important;
    color: var(--info) !important;
}
html.dark-mode .btn-info:hover { background: rgba(61, 169, 252, 0.28) !important; }

html.dark-mode .btn-light {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 3px 10px rgba(0,0,0,0.28),
        0 0 14px -4px rgba(0,229,255,0.12) !important;
    transition: all .3s ease !important;
}
html.dark-mode .btn-light:hover {
    background: var(--glass-strong) !important;
    border-color: transparent !important;
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
}
html.dark-mode .btn-dark {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--primary) !important;
}
html.dark-mode .btn-dark:hover {
    background: rgba(0,229,255, 0.10) !important;
}
html.dark-mode .btn-outline-primary {
    color: var(--primary) !important;
    border-color: rgba(0,229,255, 0.45) !important;
    background: transparent !important;
}
html.dark-mode .btn-outline-primary:hover {
    background: rgba(0,229,255, 0.14) !important;
    color: #fff !important;
    border-color: transparent !important;
}
html.dark-mode .btn-outline-secondary {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 3px 10px rgba(0,0,0,0.25),
        0 0 12px -4px rgba(0,229,255,0.10) !important;
    transition: all .3s ease !important;
}
html.dark-mode .btn-outline-secondary:hover {
    background: var(--glass-strong) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
}
html.dark-mode .btn-outline-info {
    color: var(--info) !important;
    border-color: rgba(61, 169, 252, 0.40) !important;
}
html.dark-mode .btn-outline-danger {
    color: var(--danger) !important;
    border-color: rgba(251, 113, 133, 0.40) !important;
}
html.dark-mode .btn-outline-warning {
    color: var(--warning) !important;
    border-color: rgba(251, 191, 36, 0.40) !important;
}
html.dark-mode .btn-outline-success {
    color: var(--success) !important;
    border-color: rgba(52, 211, 153, 0.40) !important;
}

/* Header buttons (ms-style) override */
html.dark-mode .btn-tambah-ms {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .btn-tambah-ms:hover {
    border-color: rgba(0,229,255, 0.45) !important;
    color: var(--primary) !important;
    background: rgba(0,229,255, 0.12) !important;
    box-shadow: 0 6px 18px rgba(0,229,255, 0.18) !important;
}
html.dark-mode .btn-simpan-ms {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    box-shadow: 0 4px 16px rgba(0,229,255, 0.30) !important;
}
html.dark-mode .btn-simpan-ms:hover {
    box-shadow: 0 8px 26px rgba(0,229,255, 0.45), 0 0 22px rgba(0,229,255, 0.30) !important;
    color: #071A20 !important;
}
html.dark-mode .btn-detail {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,229,255, 0.28);
}
html.dark-mode .btn-detail:hover {
    box-shadow: 0 8px 22px rgba(0,229,255, 0.45);
}
html.dark-mode .btn-filter {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 6px 18px rgba(0,0,0,0.38),
        0 2px 6px rgba(0,0,0,0.28),
        0 0 18px -4px rgba(0,229,255,0.22) !important;
    transition: all .3s ease !important;
}
html.dark-mode .btn-filter:hover {
    background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(46,168,255,0.08)) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
    box-shadow:
        0 0 18px rgba(0,229,255,0.22),
        0 6px 16px rgba(0,0,0,0.36),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
}

/* Action icon buttons (action-group-ms) — glass icon buttons with hover glow */
html.dark-mode .action-group-ms .btn {
    width: 36px;
    height: 36px;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 4px 12px rgba(0,0,0,0.30),
        0 0 12px -4px rgba(0,229,255,0.08) !important;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, color .3s ease !important;
}
html.dark-mode .action-group-ms .btn:hover {
    transform: translateY(-4px) scale(1.12) !important;
    box-shadow:
        0 12px 28px -4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* View (info/blue) */
html.dark-mode .action-group-ms .btn-outline-info {
    background: linear-gradient(135deg, rgba(61,169,252,0.18), rgba(61,169,252,0.06)) !important;
    color: var(--info) !important;
    border-color: rgba(61,169,252,0.25) !important;
}
html.dark-mode .action-group-ms .btn-outline-info:hover {
    background: linear-gradient(135deg, #2EA8FF, #00E5FF) !important;
    color: #071A20 !important;
    border-color: transparent !important;
    box-shadow:
        0 0 28px rgba(61,169,252,0.55),
        0 12px 28px -4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* Delete (danger/red) */
html.dark-mode .action-group-ms .btn-outline-danger {
    background: linear-gradient(135deg, rgba(251,113,133,0.18), rgba(251,113,133,0.06)) !important;
    color: var(--danger) !important;
    border-color: rgba(251,113,133,0.25) !important;
}
html.dark-mode .action-group-ms .btn-outline-danger:hover {
    background: linear-gradient(135deg, #FB7185, #FB7185) !important;
    color: #071A20 !important;
    border-color: transparent !important;
    box-shadow:
        0 0 28px rgba(251,113,133,0.55),
        0 12px 28px -4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* Edit (warning/amber) */
html.dark-mode .action-group-ms .btn-outline-warning {
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06)) !important;
    color: var(--warning) !important;
    border-color: rgba(251,191,36,0.25) !important;
}
html.dark-mode .action-group-ms .btn-outline-warning:hover {
    background: linear-gradient(135deg, #FBBF24, #FBBF24) !important;
    color: #071A20 !important;
    border-color: transparent !important;
    box-shadow:
        0 0 28px rgba(251,191,36,0.55),
        0 12px 28px -4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* "More" / neutral action button (gray, no semantic color) */
html.dark-mode .action-group-ms .btn-outline-secondary {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)) !important;
    color: var(--text-secondary) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .action-group-ms .btn-outline-secondary:hover {
    background: linear-gradient(135deg, rgba(0,229,255,0.20), rgba(0,229,255,0.08)) !important;
    color: var(--primary) !important;
    border-color: rgba(0,229,255,0.35) !important;
    box-shadow:
        0 0 22px rgba(0,229,255,0.30),
        0 12px 28px -4px rgba(0,0,0,0.45) !important;
}

/* Success (green) action */
html.dark-mode .action-group-ms .btn-outline-success {
    background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(52,211,153,0.06)) !important;
    color: var(--success) !important;
    border-color: rgba(52,211,153,0.25) !important;
}
html.dark-mode .action-group-ms .btn-outline-success:hover {
    background: linear-gradient(135deg, #34D399, #34D399) !important;
    color: #071A20 !important;
    border-color: transparent !important;
    box-shadow:
        0 0 28px rgba(52,211,153,0.55),
        0 12px 28px -4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
html.dark-mode .dropdown-menu {
    background: #16202B !important;
    border: 1px solid rgba(0, 255, 255, .12) !important;
    color: #f1f5f9 !important;
    padding: .5rem 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 20px rgba(0, 255, 255, .08) !important;
}

html.dark-mode .dropdown-item { color: #cbd5e1 !important; }
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background: rgba(0, 255, 200, .08) !important;
    color: #fff !important;
}
html.dark-mode .dropdown-item.active { background: rgba(0, 255, 200, .15) !important; color: #fff !important; }
html.dark-mode .dropdown-divider { border-color: #334155 !important; }
html.dark-mode .dropdown-header { color: #94a3b8 !important; }
/* ============================================================
   MODALS — glass panel, gradient header, fade+scale
   ============================================================ */
html.dark-mode .modal-content {
    background: linear-gradient(160deg, rgba(13,47,56,0.85) 0%, rgba(10,37,48,0.78) 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 24px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 30px 70px -16px rgba(0,0,0,0.7),
        0 0 40px -4px rgba(0,229,255,0.10) !important;
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    color: var(--text-primary) !important;
}
html.dark-mode .modal-header {
    background: linear-gradient(135deg, rgba(0,229,255, 0.18), rgba(61, 169, 252, 0.10)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .modal-body { background: transparent !important; color: var(--text-secondary) !important; }
html.dark-mode .modal-footer {
    background: rgba(7, 26, 32, 0.4) !important;
    border-top: 1px solid var(--glass-border) !important;
    border-radius: 0 0 22px 22px !important;
}
html.dark-mode .modal-title { color: var(--text-primary) !important; font-weight: 700; }
html.dark-mode .modal-header .close,
html.dark-mode .modal-header .btn-close {
    color: var(--text-secondary) !important;
    filter: invert(1) opacity(.7);
}
html.dark-mode .modal-backdrop.show { opacity: .65 !important; background: #071A20 !important; }

/* Smooth fade+scale on open */
html.dark-mode .modal.fade .modal-dialog {
    transform: scale(0.96) translateY(10px);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1) !important;
}
html.dark-mode .modal.show .modal-dialog { transform: scale(1) translateY(0); }

/* ============================================================
   SELECT2 — follow glass theme
   ============================================================ */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 3px 10px rgba(0,0,0,0.28),
        0 0 14px -4px rgba(0,229,255,0.14) !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
    min-height: 38px;
}
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; }
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted) !important; }
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: rgba(0,229,255,0.60) transparent transparent !important; }
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b:after { filter: drop-shadow(0 0 4px rgba(0,229,255,0.30)); }
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--text-primary) !important; }
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(0,229,255, 0.16) !important;
    border: 1px solid rgba(0,229,255, 0.30) !important;
    color: var(--primary) !important;
    border-radius: 8px !important;
}
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--text-secondary) !important; }
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: rgba(251, 113, 133, 0.25) !important; color: var(--danger) !important; }
html.dark-mode .select2-dropdown {
    background: linear-gradient(160deg, rgba(13,47,56,0.96) 0%, rgba(10,37,48,0.92) 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.50), 0 0 24px -4px rgba(0,229,255,0.10) !important;
    overflow: hidden;
}
html.dark-mode .select2-container--default .select2-results__option { color: var(--text-secondary) !important; }
html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background: linear-gradient(135deg, rgba(0,229,255,0.22), rgba(0,229,255,0.08)) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--primary);
}
html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(0,229,255, 0.14) !important;
    color: var(--primary) !important;
}
html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bg-input) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 10px;
}
html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.16) !important;
}
html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__clear { color: var(--text-muted) !important; }
html.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple,
html.dark-mode .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: transparent !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255, 0.16),
        0 0 18px rgba(0,229,255, 0.24),
        0 4px 12px rgba(0,0,0,0.32),
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12) !important;
}

/* ============================================================
   BADGES — glass + gradient + rounded full pill + glow
   ============================================================ */
html.dark-mode .badge {
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-weight: 600;
    letter-spacing: .3px;
    font-size: 11px;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 8px rgba(0,0,0,0.20),
        0 0 12px -2px rgba(0,229,255,0.08) !important;
    transition: all .25s ease;
}
 html.dark-mode .badge-success,
 html.dark-mode .badge-green,
 html.dark-mode .bg-success,
 html.dark-mode .badge.bg-success-subtle {
    background: linear-gradient(135deg, rgba(52,211,153,0.25), rgba(52,211,153,0.08)) !important;
    color: var(--success) !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    box-shadow:
        0 0 16px rgba(52, 211, 153, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(0,0,0,0.20) !important;
}
 html.dark-mode .badge-danger,
 html.dark-mode .badge-red,
 html.dark-mode .bg-danger,
 html.dark-mode .badge.bg-danger-subtle {
    background: linear-gradient(135deg, rgba(251,113,133,0.25), rgba(251,113,133,0.08)) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.45) !important;
    box-shadow:
        0 0 16px rgba(251, 113, 133, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(0,0,0,0.20) !important;
}
 html.dark-mode .badge-warning,
 html.dark-mode .badge-yellow,
 html.dark-mode .bg-warning,
 html.dark-mode .badge.bg-warning-subtle {
    background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.08)) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(251, 191, 36, 0.45) !important;
    box-shadow:
        0 0 16px rgba(251, 191, 36, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(0,0,0,0.20) !important;
}
 html.dark-mode .badge-info,
 html.dark-mode .badge-blue,
 html.dark-mode .bg-info,
 html.dark-mode .badge.bg-info-subtle {
    background: linear-gradient(135deg, rgba(61,169,252,0.25), rgba(61,169,252,0.08)) !important;
    color: var(--info) !important;
    border: 1px solid rgba(61, 169, 252, 0.45) !important;
    box-shadow:
        0 0 16px rgba(61, 169, 252, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(0,0,0,0.20) !important;
}
 html.dark-mode .badge-secondary,
 html.dark-mode .bg-secondary,
 html.dark-mode .badge.bg-secondary-subtle {
    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .bg-light { background: var(--glass) !important; color: var(--text-secondary) !important; }
html.dark-mode .bg-dark { background: var(--bg-card-solid) !important; color: var(--primary) !important; }

/* Badges with inline background colors (light-mode fallbacks) */
html.dark-mode span[style*="background:#c2410c"],
html.dark-mode span[style*="background: #c2410c"] {
    background: linear-gradient(135deg, rgba(194,65,12,0.30), rgba(194,65,12,0.10)) !important;
    color: #fb923c !important;
    border: 1px solid rgba(194,65,12,0.40) !important;
    box-shadow: 0 0 12px rgba(194,65,12,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
html.dark-mode span[style*="background:#16a34a"],
html.dark-mode span[style*="background: #16a34a"] {
    background: linear-gradient(135deg, rgba(22,163,74,0.30), rgba(22,163,74,0.10)) !important;
    color: var(--success) !important;
    border: 1px solid rgba(52, 211, 153, 0.40) !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Status badges (ms-style) — fully rounded pill, glass + glow */
html.dark-mode .badge-status-ms {
    display: inline-block;
    padding: 5px 16px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .2px;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
    transition: all .25s ease;
}
html.dark-mode .badge-status-ms.hadir,
html.dark-mode .badge-status-ms.aktif {
    background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(52,211,153,0.06)) !important;
    color: var(--success) !important;
    border-color: rgba(52, 211, 153, 0.40) !important;
    box-shadow:
        0 0 14px rgba(52, 211, 153, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .badge-status-ms.izin {
    background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.06)) !important;
    color: var(--warning) !important;
    border-color: rgba(251, 191, 36, 0.40) !important;
    box-shadow:
        0 0 14px rgba(251, 191, 36, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .badge-status-ms.sakit,
html.dark-mode .badge-status-ms.nonaktif {
    background: linear-gradient(135deg, rgba(251,113,133,0.22), rgba(251,113,133,0.06)) !important;
    color: var(--danger) !important;
    border-color: rgba(251, 113, 133, 0.40) !important;
    box-shadow:
        0 0 14px rgba(251, 113, 133, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .badge-status-ms.alpha {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* badge-count — absensi rekap */
html.dark-mode .badge-count {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .2px;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
    transition: all .25s ease;
}
html.dark-mode .badge-count.hadir {
    background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(52,211,153,0.06)) !important;
    color: var(--success) !important;
    border-color: rgba(52, 211, 153, 0.40) !important;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .badge-count.izin {
    background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.06)) !important;
    color: var(--warning) !important;
    border-color: rgba(251, 191, 36, 0.40) !important;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .badge-count.sakit {
    background: linear-gradient(135deg, rgba(251,113,133,0.22), rgba(251,113,133,0.06)) !important;
    color: var(--danger) !important;
    border-color: rgba(251, 113, 133, 0.40) !important;
    box-shadow: 0 0 14px rgba(251, 113, 133, 0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .badge-count.alpha {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* badge-siswa-count */
html.dark-mode .badge-siswa-count {
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-weight: 600;
    font-size: 12px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* badge-jumlah */
html.dark-mode .badge-jumlah {
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-weight: 600;
    font-size: 11px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* status-badge (galery) */
html.dark-mode .status-badge {
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-weight: 600;
    font-size: 11px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
}
html.dark-mode .status-badge.status-published {
    background: linear-gradient(135deg, rgba(52,211,153,0.22), rgba(52,211,153,0.06)) !important;
    color: var(--success) !important;
    border-color: rgba(52, 211, 153, 0.40) !important;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
html.dark-mode .status-badge.status-draft {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Event badges */
html.dark-mode .event-badge.academic  { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode .event-badge.holiday   { background: rgba(251, 113, 133, 0.18) !important; color: var(--danger) !important; }
html.dark-mode .event-badge.exam      { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode .event-badge.national  { background: rgba(61, 169, 252, 0.18) !important; color: var(--info) !important; }
html.dark-mode .event-badge.islamic   { background: rgba(0,229,255, 0.18) !important; color: var(--primary) !important; }
html.dark-mode .alert-success { background: rgba(52, 211, 153, 0.14) !important; border-color: rgba(52, 211, 153, 0.35) !important; color: var(--success) !important; }
html.dark-mode .alert-danger  { background: rgba(251, 113, 133, 0.14) !important; border-color: rgba(251, 113, 133, 0.35) !important; color: var(--danger) !important; }
html.dark-mode .alert-warning { background: rgba(251, 191, 36, 0.14) !important; border-color: rgba(251, 191, 36, 0.35) !important; color: var(--warning) !important; }
html.dark-mode .alert-info    { background: rgba(61, 169, 252, 0.14) !important; border-color: rgba(61, 169, 252, 0.35) !important; color: var(--info) !important; }
html.dark-mode .alert-modern-ms { background: var(--glass) !important; }
html.dark-mode .alert-modern-ms.alert-success { background: rgba(52, 211, 153, 0.14) !important; color: var(--success) !important; border-left: 4px solid var(--success) !important; }
html.dark-mode .alert-modern-ms.alert-danger  { background: rgba(251, 113, 133, 0.14) !important; color: var(--danger)  !important; border-left: 4px solid var(--danger)  !important; }
html.dark-mode .alert-dismissible .btn-close { color: var(--text-primary) !important; filter: invert(1) opacity(.7); }

/* SweetAlert (legacy) */
html.dark-mode .swal-modal { background: var(--bg-modal) !important; border: 1px solid var(--glass-border) !important; }
html.dark-mode .swal-title { color: var(--text-primary) !important; }
html.dark-mode .swal-text  { color: var(--text-secondary) !important; }
html.dark-mode .swal-footer { background: transparent !important; }
html.dark-mode .swal-button { background: var(--glass) !important; border: 1px solid var(--glass-border) !important; color: var(--text-primary) !important; }
html.dark-mode .swal-button--confirm { background: var(--gradient-primary) !important; border-color: transparent !important; color: #071A20 !important; }
html.dark-mode .swal-button--confirm:hover { box-shadow: 0 0 20px rgba(0,229,255, 0.40) !important; }
html.dark-mode .swal-button--danger { background: rgba(251, 113, 133, 0.18) !important; border: 1px solid rgba(251, 113, 133, 0.40) !important; color: var(--danger) !important; }
html.dark-mode .swal-icon--warning { border-color: var(--warning) !important; }
html.dark-mode .swal-icon--warning__body { background: var(--warning) !important; }
html.dark-mode .swal-icon--success__line { background: var(--success) !important; }
html.dark-mode .swal-icon--success__ring { border-color: rgba(52, 211, 153, 0.45) !important; }
html.dark-mode .swal-icon--info { border-color: var(--info) !important; }
html.dark-mode .swal-icon--info:after,
html.dark-mode .swal-icon--info:before { background: var(--info) !important; }
html.dark-mode .swal-icon--error { border-color: var(--danger) !important; }
html.dark-mode .swal-icon--error__line { background: var(--danger) !important; }

/* SweetAlert2 */
html.dark-mode .swal2-popup {
    background: var(--bg-modal) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary) !important;
}
html.dark-mode .swal2-title { color: var(--text-primary) !important; }
html.dark-mode .swal2-html-container { color: var(--text-secondary) !important; }
html.dark-mode .swal2-timer-progress-bar { background: var(--primary) !important; }
html.dark-mode .swal2-confirm { background: var(--gradient-primary) !important; color: #071A20 !important; }
html.dark-mode .swal2-cancel { background: var(--glass) !important; color: var(--text-primary) !important; border: 1px solid var(--glass-border) !important; }

/* ============================================================
   NAV / TABS / PILLS
   ============================================================ */
html.dark-mode .nav-tabs { border-bottom: 1px solid var(--glass-border) !important; }
html.dark-mode .nav-tabs .nav-link { color: var(--text-secondary) !important; border-radius: 10px 10px 0 0; }
html.dark-mode .nav-tabs .nav-link:hover,
html.dark-mode .nav-tabs .nav-link:focus {
    border-color: var(--glass-border) var(--glass-border) transparent !important;
    background: var(--glass);
}
html.dark-mode .nav-tabs .nav-link.active {
    background: var(--glass) !important;
    border-color: var(--glass-border) var(--glass-border) transparent !important;
    color: var(--primary) !important;
    box-shadow: 0 -2px 0 0 var(--primary) inset;
}
html.dark-mode .nav-pills .nav-link { color: var(--text-secondary) !important; }
html.dark-mode .nav-pills .nav-link.active {
    background: rgba(0,229,255, 0.18) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 16px rgba(0,229,255, 0.25);
}

/* ============================================================
   PAGINATION (Laravel -> Bootstrap classes)
   ============================================================ */
html.dark-mode .pagination .page-link {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text-secondary) !important;
    border-radius: 12px !important;
    margin: 0 3px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition: all .25s ease !important;
}
html.dark-mode .pagination .page-link:hover {
    background: rgba(0,229,255, 0.14) !important;
    color: var(--primary) !important;
    border-color: rgba(0,229,255, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,229,255,0.20), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
html.dark-mode .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00E5FF, #2EA8FF) !important;
    border-color: transparent !important;
    color: #071A20 !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0,229,255, 0.40), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
html.dark-mode .pagination .page-item.disabled .page-link {
    background: var(--glass) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-muted) !important;
    opacity: .5;
}
html.dark-mode .pagination-ms .page-link { border-radius: 10px !important; }

/* ============================================================
   TOOLTIP / POPOVER
   ============================================================ */
html.dark-mode .tooltip-inner {
    background: var(--bg-tooltip) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dark-mode .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
html.dark-mode .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--bg-tooltip) !important; }
html.dark-mode .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
html.dark-mode .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--bg-tooltip) !important; }
html.dark-mode .popover {
    background: var(--bg-dropdown) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html.dark-mode .popover-header {
    background: rgba(0,229,255, 0.10) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .popover-body { color: var(--text-secondary) !important; }

/* ============================================================
   PROGRESS
   ============================================================ */
html.dark-mode .progress {
    background: var(--glass) !important;
    border-radius: 10px;
}
html.dark-mode .progress-bar {
    background: var(--gradient-primary) !important;
    box-shadow: 0 0 12px rgba(0,229,255, 0.35);
}

/* ============================================================
   LIST GROUP
   ============================================================ */
html.dark-mode .list-group-item {
    background: var(--glass) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dark-mode .list-group-item-action:hover {
    background: var(--glass-strong) !important;
}

/* ============================================================
   GENERIC TABLES (non-DataTables)
   ============================================================ */
html.dark-mode .table,
html.dark-mode .table-ms { color: var(--text-primary) !important; }
html.dark-mode .table th {
    border-bottom-color: var(--glass-border) !important;
    border-top: none !important;
    color: var(--primary) !important;
}
html.dark-mode .table td { border-top-color: var(--glass-border) !important; color: var(--text-secondary) !important; }
html.dark-mode .table thead th {
    border-bottom-color: var(--glass-border) !important;
    border-top: none !important;
    background: linear-gradient(135deg, rgba(0,229,255, 0.10), rgba(61, 169, 252, 0.06)) !important;
    color: var(--primary) !important;
}
html.dark-mode .table-hover tbody tr:hover,
html.dark-mode .table tbody tr:hover {
    color: var(--text-primary) !important;
    background: linear-gradient(90deg, rgba(0,229,255, 0.08), rgba(61, 169, 252, 0.03)) !important;
    box-shadow: 0 2px 12px -2px rgba(0,229,255, 0.10);
}
html.dark-mode .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.03) !important; }
html.dark-mode .table-bordered,
html.dark-mode .table-bordered th,
html.dark-mode .table-bordered td { border-color: var(--glass-border) !important; }
html.dark-mode .table-warning,
html.dark-mode .table-warning td { background: rgba(251, 191, 36, 0.10) !important; color: var(--warning) !important; }
html.dark-mode .table-dark { background: var(--bg-card-solid) !important; color: var(--text-primary) !important; }
html.dark-mode .table-dark th { color: var(--primary) !important; border-color: var(--glass-border) !important; }

/* ms-style table overrides */
html.dark-mode .table-ms { border: 1px solid var(--glass-border) !important; border-radius: 14px !important; }
html.dark-mode .table-ms thead th {
    background: linear-gradient(135deg, rgba(0,229,255, 0.12), rgba(61, 169, 252, 0.06)) !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--glass-border) !important;
}
html.dark-mode .table-ms tbody td { color: var(--text-secondary) !important; border-bottom: 1px solid var(--glass-border) !important; }
html.dark-mode .table-ms tbody tr:hover td {
    background: linear-gradient(90deg, rgba(0,229,255, 0.08), rgba(61, 169, 252, 0.03)) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 rgba(0,229,255,0.15), inset 0 -1px 0 rgba(0,229,255,0.08);
}
html.dark-mode .table-ms tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; }

/* ============================================================
   TEXT / BORDER / BG HELPERS
   ============================================================ */
html.dark-mode .text-primary  { color: var(--primary)  !important; }
html.dark-mode .text-success  { color: var(--success)  !important; }
html.dark-mode .text-danger   { color: var(--danger)   !important; }
html.dark-mode .text-warning  { color: var(--warning)  !important; }
html.dark-mode .text-info     { color: var(--info)     !important; }
html.dark-mode .text-secondary,
html.dark-mode .text-muted    { color: var(--text-muted) !important; }
html.dark-mode .text-dark     { color: var(--text-primary) !important; }
html.dark-mode .text-body     { color: var(--text-primary) !important; }
html.dark-mode .text-white    { color: #ffffff !important; }
html.dark-mode .text-title    { color: var(--text-muted) !important; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: var(--text-primary) !important; }
html.dark-mode p, html.dark-mode small { color: var(--text-secondary) !important; }

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-left,
html.dark-mode .border-right { border-color: var(--glass-border) !important; }

html.dark-mode .bg-white { background: var(--glass) !important; }
html.dark-mode .bg-light { background: var(--glass) !important; }

/* ============================================================
   LINKS
   ============================================================ */
html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):not(.menu-submenu-link):not(.name-tag) {
    color: var(--primary) !important;
}
html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):not(.menu-submenu-link):not(.name-tag):hover {
    color: var(--primary-hover) !important;
    text-shadow: 0 0 14px rgba(0,229,255, 0.35);
}
html.dark-mode .linkind,
html.dark-mode tr td a { color: var(--info) !important; }
html.dark-mode tr td a:hover { color: #93c5fd !important; }

/* ============================================================
   FOOTER
   ============================================================ */
html.dark-mode footer,
html.dark-mode #footer {
    background: rgba(7, 26, 32, 0.4) !important;
    color: var(--text-muted) !important;
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html.dark-mode footer.sticky-footer .copyright { color: var(--text-muted) !important; }

/* ============================================================
   MISC OVERRIDES
   ============================================================ */
/* Jadwal pelajaran */
html.dark-mode .bg-jadwal { background: var(--gradient-primary) !important; color: #071A20 !important; }
html.dark-mode .icon-box { background: rgba(0,229,255, 0.14) !important; }
html.dark-mode .icon-box i { color: var(--primary) !important; }

/* Mobile nav (hp-ul) */
html.dark-mode .hp-ul {
    background: linear-gradient(160deg, rgba(13,47,56,0.95), rgba(10,37,48,0.90)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 24px 50px -12px rgba(0,0,0,0.60), 0 0 20px -4px rgba(0,229,255,0.08) !important;
}
html.dark-mode .hp-li { color: var(--text-secondary) !important; border-radius: 10px; margin: 2px 8px; }
html.dark-mode .hp-li:hover,
html.dark-mode .hp-li.active {
    background: rgba(0, 255, 200, .10) !important;
    color: #00FFC8 !important;
    box-shadow: 0 0 16px rgba(0, 255, 200, .15);
}
html.dark-mode .hp-li i { filter: drop-shadow(0 0 4px rgba(0,229,255,0.25)); }
html.dark-mode #checki:checked ~ .hp-ul { display: block !important; }

/* Mobile hamburger icon (visible only on small screens) */
html.dark-mode .c-header-icon-hp { color: var(--text-secondary) !important; }

/* Icon shapes (pages.css) */
html.dark-mode .icon-shape { box-shadow: 0 0 22px rgba(0, 0, 0, 0.45) !important; }
html.dark-mode .green   { background: rgba(52, 211, 153, 0.18) !important; }
html.dark-mode .orange  { background: rgba(251, 113, 133, 0.18) !important; }
html.dark-mode .yellow  { background: rgba(251, 191, 36, 0.18) !important; }
html.dark-mode .blue    { background: rgba(61, 169, 252, 0.18) !important; }
html.dark-mode .icon-ms.green,
html.dark-mode .icon-ms.gold { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode .icon-ms.blue  { background: rgba(61, 169, 252, 0.18) !important; color: var(--info) !important; }

/* Context panel (haflah submenu flyout) */
html.dark-mode .context-panel-backdrop { background: rgba(7, 26, 32, 0.55) !important; backdrop-filter: blur(4px); }
html.dark-mode .context-panel-inner {
    background: #16202B !important;
    border: 1px solid rgba(0, 255, 255, .12) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, .15), 0 8px 24px rgba(0,0,0,.25) !important;
}
html.dark-mode .context-panel-header {
    background: linear-gradient(135deg, rgba(0,229,255, 0.12), rgba(61, 169, 252, 0.06)) !important;
    border-bottom: 1px solid rgba(0, 255, 255, .12) !important;
}
html.dark-mode .context-panel-title { color: #fff !important; }
html.dark-mode .context-panel-body { color: rgba(255,255,255,.80) !important; }
html.dark-mode .context-panel-close { color: rgba(255,255,255,.50) !important; }
html.dark-mode .context-panel-close:hover { color: #FB7185 !important; }
html.dark-mode .context-panel-link {
    color: rgba(255,255,255,.85) !important;
}
html.dark-mode .context-panel-link::before {
    background: rgba(255,255,255,.35) !important;
}
html.dark-mode .context-panel-link:hover {
    background: rgba(0, 255, 200, .08) !important;
    color: #fff !important;
}
html.dark-mode .context-panel-link:hover::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}

/* Event dropdown (component/admin/event-dropdown.blade.php) */
html.dark-mode .event-dropdown,
html.dark-mode .event-flyout {
    background: var(--bg-dropdown) !important;
    border: 1px solid rgba(0, 255, 255, .12) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Flyout submenu link hover + active in dark mode */
html.dark-mode .sidebar--flyout .menu-submenu-link {
    color: rgba(255,255,255,.90) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-link:hover {
    background: rgba(0, 255, 200, .08) !important;
    color: #fff !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.is-active > .menu-submenu-link {
    background: rgba(0, 255, 200, .12) !important;
    color: #fff !important;
    border-left: 3px solid #00F5D4;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.is-active::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}
html.dark-mode .sidebar--flyout .menu-item.has-submenu.has-active > .menu-link {
    background: rgba(0, 255, 200, .06) !important;
}
html.dark-mode .sidebar--flyout .menu-item.has-submenu.has-active > .menu-link .menu-icon {
    background: rgba(0, 255, 200, .15) !important;
    color: #fff !important;
}
html.dark-mode .sidebar--flyout .menu-item.has-submenu.is-flyout-open > .menu-link {
    background: rgba(0, 255, 200, .10) !important;
}
html.dark-mode .sidebar--flyout .menu-item.has-submenu.is-flyout-open > .menu-link .menu-icon {
    background: rgba(0, 255, 200, .18) !important;
    color: #fff !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item::before {
    background: rgba(255,255,255,.25) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-link:hover::before,
html.dark-mode .sidebar--flyout .menu-submenu-item:hover::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-title {
    color: rgba(255,255,255,.45) !important;
    border-bottom-color: rgba(0, 255, 255, .12) !important;
}

/* ============================================================
   NESTED FLYOUT (panel kedua) — Dark Neon overrides
   ============================================================ */
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested {
    background: #16202B !important;
    border: 1px solid rgba(0, 255, 255, .12) !important;
    border-radius: 16px !important;
    box-shadow:
        0 18px 40px -8px rgba(0, 0, 0, .40),
        0 6px 14px -6px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(0, 255, 255, .08),
        0 0 20px rgba(0, 255, 255, .10) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-link {
    color: rgba(255,255,255,.90) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-link:hover {
    background: rgba(0, 255, 200, .08) !important;
    color: #fff !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-item::before {
    background: rgba(255,255,255,.25) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-link:hover::before,
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-item:hover::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-item.is-active > .menu-submenu-link {
    background: rgba(0, 255, 200, .12) !important;
    color: #fff !important;
    border-left: 3px solid #00F5D4 !important;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested .menu-submenu-item.is-active::before {
    background: #00FFC8 !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, .30) !important;
}
/* Scrollbar inside nested flyout */
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested::-webkit-scrollbar {
    width: 6px;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested::-webkit-scrollbar-track {
    background: transparent;
}
html.dark-mode .sidebar--flyout .menu-submenu-item.has-submenu > .menu-submenu-nested::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 200, .20) !important;
    border-radius: 6px;
}

/* ============================================================
   PUBLIC LANDING PAGE (layouts/app.blade.php) — BLUE redesign
   Light styles live in app.blade.php <style>; this block owns the
   dark theme so it loads last and wins. Palette mirrors the
   dashboard --ab-* tokens: cyan-blue accents on navy surfaces.
   ============================================================ */
html.dark-mode #header {
    background: rgba(7, 26, 36, 0.82) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode #header.header-scrolled {
    background: rgba(7, 26, 36, 0.94) !important;
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6) !important;
}
html.dark-mode #hero {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 48%, #3b82f6 100%) !important;
}
html.dark-mode .profile-section,
html.dark-mode .announcement-section,
html.dark-mode .galery-section,
html.dark-mode .calendar-section,
html.dark-mode .section-bg { background: #071A24 !important; }
html.dark-mode .section-title h2 { color: #f8fafc !important; }
html.dark-mode .section-title p { color: #7d96a6 !important; }
html.dark-mode .visi-card {
    background: linear-gradient(135deg, rgba(61, 169, 252, 0.10), rgba(255, 255, 255, 0.03)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: #3DA9FC !important;
}
html.dark-mode .visi-card h5 { color: #3DA9FC !important; }
html.dark-mode .visi-card p { color: #cbd5e1 !important; }
html.dark-mode .profile-img-wrap { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
html.dark-mode .contact-item { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
html.dark-mode .contact-item .label { color: #7d96a6 !important; }
html.dark-mode .contact-item .value { color: #f8fafc !important; }
html.dark-mode .card-modern { background: #0D2F38 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .card-modern h5 { color: #f8fafc !important; }
html.dark-mode .announcement-card { background: #0D2F38 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .announcement-card h5 { color: #f8fafc !important; }
html.dark-mode .announcement-card p { color: #cbd5e1 !important; }
html.dark-mode .announcement-date { color: #7d96a6 !important; }
html.dark-mode .calendar-table-wrap { border-color: rgba(255, 255, 255, 0.1) !important; background: #0D2F38 !important; }
html.dark-mode .calendar-table-wrap tbody td { color: #f8fafc !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
html.dark-mode .calendar-table-wrap tbody tr:hover td { background: rgba(61, 169, 252, 0.08) !important; }
html.dark-mode .month-card { background: #0D2F38 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .month-header { background: linear-gradient(135deg, #2EA8FF, #00E5FF) !important; color: #001019 !important; }
html.dark-mode .month-days-header { background: rgba(255, 255, 255, 0.04) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .month-days-header span { color: #7d96a6 !important; }
html.dark-mode .month-days-grid .day { color: #f8fafc !important; }
html.dark-mode .month-days-grid .day:hover { background: rgba(61, 169, 252, 0.12) !important; color: #3DA9FC !important; }
html.dark-mode .month-days-grid .weekend { color: #fb7185 !important; }
html.dark-mode .month-days-grid .highlight { color: #001019 !important; }
html.dark-mode .month-days-grid .highlight:hover { color: #001019 !important; }
html.dark-mode .map-wrap { border-color: rgba(255, 255, 255, 0.1) !important; }
html.dark-mode #footer {
    background: linear-gradient(135deg, #0D2B38, #071A24) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode #footer h3,
html.dark-mode #footer h4 { color: #f8fafc !important; }
html.dark-mode #footer .footer-contact p { color: #7d96a6 !important; }
html.dark-mode #footer a { color: #7d96a6 !important; }
html.dark-mode #footer a:hover { color: #3DA9FC !important; }
html.dark-mode .footer-quick li { color: #cbd5e1 !important; }
html.dark-mode .footer-quick li i { color: #3DA9FC !important; }
html.dark-mode .faq-list li { background: #0D2F38 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .faq-list a { color: #f8fafc !important; }
html.dark-mode .faq-list a.collapsed { color: #f8fafc !important; }
html.dark-mode .faq-list a.collapsed:hover { color: #3DA9FC !important; }
html.dark-mode .faq-list .icon-help { color: #3DA9FC !important; }
html.dark-mode .faq-list .icon-show,
html.dark-mode .faq-list .icon-close { color: #3DA9FC !important; }
html.dark-mode .faq-list .collapse.show { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08); }
html.dark-mode .faq-list .collapse.show p { color: #cbd5e1 !important; }
html.dark-mode .galery-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; }

/* Event badges */
html.dark-mode .event-badge.academic  { background: rgba(52, 211, 153, 0.18) !important; color: #34d399 !important; }
html.dark-mode .event-badge.holiday   { background: rgba(251, 113, 133, 0.18) !important; color: #fb7185 !important; }
html.dark-mode .event-badge.exam      { background: rgba(61, 169, 252, 0.18) !important; color: #3DA9FC !important; }
html.dark-mode .event-badge.national  { background: rgba(61, 169, 252, 0.18) !important; color: #3DA9FC !important; }
html.dark-mode .event-badge.islamic   { background: rgba(0, 229, 255, 0.18) !important; color: #00E5FF !important; }

/* ============================================================
   AUTH / LOGIN
   ============================================================ */
html.dark-mode .login-page {
    background: linear-gradient(135deg, #071A20 0%, #0A2530 50%, #071A20 100%) !important;
}
html.dark-mode .login-card {
    background: rgba(13, 47, 56, 0.55) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(0,229,255, 0.10) !important;
    border-radius: 22px !important;
}
html.dark-mode .login-card .form-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .login-card .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.18), 0 0 18px rgba(0,229,255, 0.20) !important;
}
html.dark-mode .login-card .form-control::placeholder { color: var(--text-muted) !important; }
html.dark-mode .login-card label { color: var(--text-secondary) !important; }
html.dark-mode .login-card .text-muted { color: var(--text-muted) !important; }
html.dark-mode .login-card .login-title {
    color: var(--text-primary) !important;
    text-shadow: 0 0 22px rgba(0,229,255, 0.25);
}

/* ============================================================
   FORM DATA / LENGKAPI DATA
   ============================================================ */
html.dark-mode body.form-data { background: var(--bg-body) !important; }
html.dark-mode .login-container-wrapper {
    background: rgba(13, 47, 56, 0.6) !important;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
html.dark-mode .login-container-wrapper .welcome,
html.dark-mode .login-container-wrapper .logo { color: var(--text-primary) !important; }
html.dark-mode .login-container-wrapper .form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .login-container-wrapper .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.16) !important;
}
html.dark-mode .login-container-wrapper label { color: var(--text-secondary) !important; }
html.dark-mode .login-container-wrapper .alert {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   TYPOGRAPHY HIERARCHY (Dashboard premium)
   ============================================================ */
html.dark-mode .page-title-content h1,
html.dark-mode .c-title h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary) !important;
    text-shadow: 0 0 20px rgba(0,229,255, 0.10);
}
@media (min-width: 992px) {
    html.dark-mode .page-title-content h1,
    html.dark-mode .c-title h1 {
        font-size: 26px;
        letter-spacing: -0.3px;
    }
}

/* Page title bar subtitle / descriptor */
html.dark-mode .page-title-content p,
html.dark-mode .page-title-content .subtitle,
html.dark-mode .page-title-content small {
    color: var(--text-muted) !important;
    font-size: 13px;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* Header card title (h4 in header card) — smaller, lighter, hierarchy */
html.dark-mode .card-header-card h4,
html.dark-mode .card-header-card .card-title,
html.dark-mode h4[style*="font-size: 20px"] {
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px;
    color: var(--text-primary) !important;
}
/* Override inline color:var(--ms-text) on header card title */
html.dark-mode h4[style*="var(--ms-text)"] {
    color: var(--text-primary) !important;
}
/* Subtitle in header card — light gray, proportional spacing */
html.dark-mode span[style*="color: #64748b"],
html.dark-mode span[style*="color:#64748b"] {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.2px;
}

/* Strong heading hierarchy inside content */
html.dark-mode .l-main h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary) !important;
}
html.dark-mode .l-main h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--text-primary) !important;
}
html.dark-mode .l-main h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary) !important;
}
html.dark-mode .l-main h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary) !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
html.dark-mode .l-main .card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; }
html.dark-mode .l-main p,
html.dark-mode .l-main .card-text { font-size: 14px; line-height: 1.7; }
html.dark-mode .display-4,
html.dark-mode .fs-1 { font-weight: 800; }

/* Statistik angka besar */
html.dark-mode .stat-value,
html.dark-mode .counter,
html.dark-mode .l-main .display-5,
html.dark-mode .l-main .display-4 { font-weight: 800; }

/* ============================================================
   ANIMATIONS — light, 250–350ms
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.dark-mode .card,
html.dark-mode .table-card,
html.dark-mode .info-card-modern {
    animation: fadeInUp .35s ease both;
}
html.dark-mode .modal.fade .modal-dialog { animation: fadeInUp .25s ease both; }

/* Button ripple (CSS-only, soft) */
html.dark-mode .btn { position: relative; overflow: hidden; }
html.dark-mode .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,229,255, 0.35), transparent 60%);
    opacity: 0;
    transform: scale(0.4);
    transition: transform .5s ease, opacity .5s ease;
    pointer-events: none;
}
html.dark-mode .btn:active::after { opacity: 1; transform: scale(1.6); transition: 0s; }

/* ============================================================
   CHARTS (Chart.js canvas just inherits colors; tooltip/legend glass)
   ============================================================ */
html.dark-mode .chart-container,
html.dark-mode canvas { background: transparent !important; }

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 992px) {
    html.dark-mode .dataTables_wrapper .dataTables_filter label input { width: 200px; }
    html.dark-mode .dataTables_wrapper .dataTables_filter { float: right; }
}
@media (max-width: 768px) {
    html.dark-mode body::before,
    html.dark-mode body::after { width: 320px; height: 320px; filter: blur(70px); opacity: 0.12; }
    html.dark-mode .card,
    html.dark-mode .table-card { border-radius: 16px !important; }
    html.dark-mode .l-main { padding: 10px 14px !important; }
    html.dark-mode .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 8px; display: block; }
    html.dark-mode .dataTables_wrapper .dataTables_filter label input { width: 100%; }
    html.dark-mode .dataTables_wrapper .dataTables_length { float: none; margin-bottom: 8px; display: block; }
    html.dark-mode .dataTables_wrapper .dataTables_paginate { float: none; justify-content: center; display: flex; }
    html.dark-mode .dataTables_wrapper .dataTables_info { float: none; text-align: center; }
    html.dark-mode .dataTables_wrapper .dataTables_filter label { width: 100%; }
    html.dark-mode .header-icon { width: 44px; height: 44px; font-size: 20px; }
    html.dark-mode .page-title-content h1,
    html.dark-mode .c-title h1 { font-size: 20px; }
    html.dark-mode .dt-buttons { display: flex; justify-content: flex-start; width: 100%; }
    html.dark-mode .theme-toggle { width: 24px !important; height: 24px !important; font-size: 10px !important; }
    html.dark-mode .theme-toggle i { font-size: 10px !important; }
    html.dark-mode .navbar-nav .fa-bell { font-size: 10px !important; }
    html.dark-mode .navbar-nav .c-header-icon[title="Notifikasi"] { padding: 0 2px !important; width: auto !important; height: auto !important; }
}
@media (max-width: 768px) {
    html.dark-mode .action-group-ms .btn { width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 480px) {
    html.dark-mode .action-group-ms .btn { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
    html.dark-mode .dataTables_wrapper .dataTables_filter label input { width: 100%; }
    html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 10px !important;
        font-size: 12px;
        margin: 0 1px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html.dark-mode body::before,
    html.dark-mode body::after { animation: none; }
    html.dark-mode .card,
    html.dark-mode .table-card { animation: none; }
    html.dark-mode *,
    html.dark-mode *::before,
    html.dark-mode *::after { transition: none !important; }
}

/* ============================================================
   APPENDIX — HARDCODED INLINE STYLE OVERRIDES
   Many Blade views ship inline `style="color:#0f172a"` etc that
   would render light text on a dark surface. Inline styles win
   over normal rules — so we use `!important` + attribute-contains
   selectors (matching both spaced & unspaced variants). This is
   the ONLY way to fix them without editing the Blade templates.
   Plus we override the per-view <style> blocks' dark-mode kludge
   classes (.header-card / .stat-card / .stat-icon / .stat-label /
   .stat-value / .badge-modern variants / .list-group-item-custom).
   ============================================================ */

/* ----- Dashboard per-view <style> classes (view_home, kelas/index, ...) ----- */
html.dark-mode .header-card,
html.dark-mode .card.header-card {
    background: linear-gradient(135deg, rgba(0,229,255, 0.22), rgba(61, 169, 252, 0.16)) !important;
    border: 1px solid rgba(0,229,255, 0.30) !important;
    box-shadow: 0 0 24px rgba(0,229,255, 0.25) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html.dark-mode .header-card .header-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
html.dark-mode .header-card p,
html.dark-mode .header-card h4 { color: #fff !important; }
html.dark-mode .header-card .text-white-50 { color: rgba(255, 255, 255, 0.7) !important; }

html.dark-mode .stat-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 0 0 1px rgba(0,229,255,0.06) inset,
        0 22px 44px -14px rgba(0,0,0,0.65),
        0 10px 20px -8px rgba(7,26,32,0.5),
        0 0 36px -6px rgba(0,229,255,0.12) !important;
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    position: relative;
    overflow: hidden;
}
/* Top highlight strip — lit-from-above glass effect */
html.dark-mode .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 35%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .8;
    z-index: 1;
}
/* Decorative corner glow — ambient light */
html.dark-mode .stat-card::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    filter: blur(60px);
    background: radial-gradient(circle, rgba(0,229,255,0.30), transparent 70%);
    opacity: .60;
    pointer-events: none;
    z-index: 0;
}
html.dark-mode .stat-card:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 0 0 1px rgba(0,229,255,0.15) inset,
        0 32px 64px -14px rgba(0,0,0,0.70),
        0 0 0 1px rgba(0,229,255,0.25),
        0 0 48px -4px rgba(0,229,255,0.35) !important;
    border-color: rgba(0,229,255, 0.35) !important;
}
html.dark-mode .stat-card .stat-label { color: var(--text-muted) !important; letter-spacing: 1.2px; font-size: 11px; }
/* Dominant big number */
html.dark-mode .stat-card .stat-value {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    font-size: 36px !important;
    line-height: 1.05;
    text-shadow: 0 0 20px rgba(0,229,255, 0.25);
    background: linear-gradient(135deg, #ffffff 0%, #00E5FF 90%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
html.dark-mode .stat-icon {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow:
        0 0 24px rgba(0,229,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 8px 22px rgba(0,0,0,0.35) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    position: relative;
    z-index: 2;
}
/* Icon inner glow — light emanates from inside */
html.dark-mode .stat-icon i,
html.dark-mode .stat-icon .fas,
html.dark-mode .stat-icon .bi {
    text-shadow: 0 0 12px currentColor, 0 0 24px currentColor !important;
    filter: drop-shadow(0 0 10px currentColor) !important;
}
html.dark-mode .stat-card:hover .stat-icon {
    transform: scale(1.12) rotate(-3deg);
    box-shadow:
        0 0 32px rgba(0,229,255,0.50),
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 12px 28px rgba(0,0,0,0.40) !important;
}
html.dark-mode .stat-card.green .stat-label,
html.dark-mode .stat-card.green .stat-value,
html.dark-mode .stat-card.orange .stat-label,
html.dark-mode .stat-card.orange .stat-value,
html.dark-mode .stat-card.yellow .stat-label,
html.dark-mode .stat-card.yellow .stat-value,
html.dark-mode .stat-card.blue .stat-label,
html.dark-mode .stat-card.blue .stat-value { color: var(--text-primary) !important; }
/* Variant icon colors — each with own glow */
html.dark-mode .stat-card .stat-icon {
    color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(46,168,255,0.15)) !important;
    box-shadow:
        0 0 24px rgba(0,229,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 8px 22px rgba(0,0,0,0.35) !important;
}
html.dark-mode .stat-card.green  .stat-icon {
    background: linear-gradient(135deg, rgba(52,211,153,0.32), rgba(52,211,153,0.12)) !important;
    color: var(--success) !important;
    box-shadow:
        0 0 26px rgba(52,211,153,0.40),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 22px rgba(0,0,0,0.35) !important;
}
html.dark-mode .stat-card.orange .stat-icon {
    background: linear-gradient(135deg, rgba(251,113,133,0.30), rgba(251,113,133,0.12)) !important;
    color: var(--danger) !important;
    box-shadow:
        0 0 26px rgba(251,113,133,0.40),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 22px rgba(0,0,0,0.35) !important;
}
html.dark-mode .stat-card.yellow .stat-icon {
    background: linear-gradient(135deg, rgba(251,191,36,0.32), rgba(251,191,36,0.12))  !important;
    color: var(--warning) !important;
    box-shadow:
        0 0 26px rgba(251,191,36,0.40),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 22px rgba(0,0,0,0.35) !important;
}
html.dark-mode .stat-card.blue   .stat-icon {
    background: linear-gradient(135deg, rgba(61,169,252,0.32), rgba(61,169,252,0.12))  !important;
    color: var(--info)    !important;
    box-shadow:
        0 0 26px rgba(61,169,252,0.40),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 22px rgba(0,0,0,0.35) !important;
}
html.dark-mode .stat-card-kelas,
html.dark-mode .stat-card.d-flex { background: var(--glass) !important; border: 1px solid var(--glass-border) !important; }

/* View-home variant badges & list */
html.dark-mode .badge-modern.success { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; border: 1px solid rgba(52, 211, 153, 0.35); }
html.dark-mode .badge-modern.warning { background: rgba(251, 191, 36, 0.18) !important; color: var(--warning) !important; border: 1px solid rgba(251, 191, 36, 0.35); }
html.dark-mode .badge-modern.danger  { background: rgba(251, 113, 133, 0.18)!important; color: var(--danger)  !important; border: 1px solid rgba(251, 113, 133, 0.35); }
html.dark-mode .badge-modern.info    { background: rgba(61, 169, 252, 0.18) !important; color: var(--info)    !important; border: 1px solid rgba(61, 169, 252, 0.35); }
html.dark-mode .list-group-item-custom {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 12px !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
html.dark-mode .list-group-item-custom:hover {
    background: rgba(0,229,255, 0.10) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 0 16px rgba(0,229,255, 0.18);
}

/* ----- Hardcoded light text colors -> readable on dark ----- */
/* Near-black headings/text that would vanish on dark */
html.dark-mode [style*="color:#0f172a"],
html.dark-mode [style*="color: #0f172a"],
html.dark-mode [style*="color:#1e293b"],
html.dark-mode [style*="color: #1e293b"],
html.dark-mode [style*="color:#0b7a43"],
html.dark-mode [style*="color:#0b7a43;"],
html.dark-mode [style*="color:#222"],
html.dark-mode [style*="color:#333"],
html.dark-mode [style*="color: #333"],
html.dark-mode [style*="color:#336"],
html.dark-mode [style*="color:#121212"],
html.dark-mode [style*="color:#0f766e"] { color: var(--text-primary) !important; }

/* Mid-slate body text — bump to primary white for legibility */
html.dark-mode [style*="color:#334155"],
html.dark-mode [style*="color: #334155"],
html.dark-mode [style*="color:#475569"],
html.dark-mode [style*="color: #475569"],
html.dark-mode [style*="color:#64748b"],
html.dark-mode [style*="color: #64748b"],
html.dark-mode [style*="color:#6b7280"],
html.dark-mode [style*="color:#2e7d32"] { color: var(--text-secondary) !important; }

/* Muted slate (secondary labels) — keep muted */
html.dark-mode [style*="color:#94a3b8"],
html.dark-mode [style*="color: #94a3b8"],
html.dark-mode [style*="color:#cbd5e1"],
html.dark-mode [style*="color:#d1d5db"],
html.dark-mode [style*="color:#9ca3af"],
html.dark-mode [style*="color:#8898aa"],
html.dark-mode [style*="color:#999"],
html.dark-mode [style*="color:#777777"],
html.dark-mode [style*="color:#777"],
html.dark-mode [style*="color:#7c3aed"] { color: var(--text-muted) !important; }

/* Brand greens -> cyan primary (readable on dark) */
html.dark-mode [style*="color:#138F5B"],
html.dark-mode [style*="color: #138F5B"],
html.dark-mode [style*="color:#138f5b"],
html.dark-mode [style*="color:#16a34a"],
html.dark-mode [style*="color: #16a34a"],
html.dark-mode [style*="color:#0F7A6A"],
html.dark-mode [style*="color:#0a4f47"],
html.dark-mode [style*="color:#1aa86f"],
html.dark-mode [style*="color:#22c55e"],
html.dark-mode [style*="color:#0f9d58"],
html.dark-mode [style*="color:#0F9D58"] { color: var(--primary) !important; }

/* Danger / warning text in inline -> keep palette but glow-friendly */
html.dark-mode [style*="color:#dc2626"],
html.dark-mode [style*="color:#991b1b"],
html.dark-mode [style*="color:#b91c1c"] { color: var(--danger) !important; }
html.dark-mode [style*="color:#d97706"],
html.dark-mode [style*="color:#92400e"],
html.dark-mode [style*="color:#f59e0b"],
html.dark-mode [style*="color:#c2410c"],
html.dark-mode [style*="color:#fd5d03"],
html.dark-mode [style*="color:#fcbc05"] { color: var(--warning) !important; }

/* Info blue inline -> use info blue (still readable) */
html.dark-mode [style*="color:#2563eb"],
html.dark-mode [style*="color: #2563eb"],
html.dark-mode [style*="color:#1d4ed8"],
html.dark-mode [style*="color:#3b82f6"],
html.dark-mode [style*="color: #3b82f6"],
html.dark-mode [style*="color:#6366f1"],
html.dark-mode [style*="color:#1aa86f;"] { color: var(--info) !important; }

/* ----- Hardcoded light backgrounds -> glass surfaces ----- */
html.dark-mode [style*="background:#f8fafc"],
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f1f5f9"],
html.dark-mode [style*="background: #f1f5f9"],
html.dark-mode [style*="background:#f2f2f2"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color:#f8fafc"],
html.dark-mode [style*="background-color: #f8fafc"] {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Soft pastel backgrounds -> glass-tinted dark badges */
html.dark-mode [style*="background:#dcfce7"],
html.dark-mode [style*="background:#f0fdf4"],
html.dark-mode [style*="background: #f0fdf4"],
html.dark-mode [style*="background:#d1f5e3"],
html.dark-mode [style*="background:#d4f0ec"],
html.dark-mode [style*="background:#d6f5e8"],
html.dark-mode [style*="background:#d4f1eb"],
html.dark-mode [style*="background:#ecfeff"] {
    background: rgba(52, 211, 153, 0.16) !important;
    color: var(--success) !important;
}
html.dark-mode [style*="background:#fef2f2"],
html.dark-mode [style*="background:#fef3c7"],
html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fffbeb"] {
    background: rgba(251, 191, 36, 0.16) !important;
}
html.dark-mode [style*="background:#eff6ff"],
html.dark-mode [style*="background: #eff6ff"],
html.dark-mode [style*="background:#dbeafe"],
html.dark-mode [style*="background:#e0e7ff"] {
    background: rgba(61, 169, 252, 0.16) !important;
}
html.dark-mode [style*="background:#ecfeff"],
html.dark-mode [style*="background:#dbeafe"] { color: var(--info) !important; }

/* Pastel bg + colored text combos */
html.dark-mode [style*="background:#fef3c7;color:#92400e"],
html.dark-mode [style*="background:#fef3c7; color:#92400e"] { background: rgba(251, 191, 36, 0.18) !important; color: var(--warning) !important; }
html.dark-mode [style*="background:#eff6ff;color:#1d4ed8"],
html.dark-mode [style*="background:#eff6ff; color:#1d4ed8"],
html.dark-mode [style*="background:#eff6ff;color:#2563eb"] { background: rgba(61, 169, 252, 0.18) !important; color: var(--info) !important; }
html.dark-mode [style*="background:#f0fdf4;color:#16a34a"] { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode [style*="background:#dcfce7;color:#16a34a"] { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode [style*="background:#fef2f2;color:#991b1b"] { background: rgba(251, 113, 133, 0.18) !important; color: var(--danger) !important; }
html.dark-mode [style*="background:#ecfeff;color:#0f766e"] { background: rgba(61, 169, 252, 0.16) !important; color: var(--info) !important; }
html.dark-mode [style*="background:#f1f5f9;color:#94a3b8"],
html.dark-mode [style*="background:#f1f5f9; color:#94a3b8"] { background: rgba(255, 255, 255, 0.04) !important; color: var(--text-muted) !important; }
html.dark-mode [style*="background:#f0fdf4;color:#16a34a;"] { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; }
html.dark-mode [style*="background:#16a34a;color:#fff"],
html.dark-mode [style*="background:#16a34a; color:#fff"],
html.dark-mode [style*="background: #16a34a;color:#fff"],
html.dark-mode [style*="background:#16a34a; color:#fff;"] {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    box-shadow: 0 4px 14px rgba(0,229,255, 0.30);
}

/* ----- Hardcoded light borders -> glass border ----- */
html.dark-mode [style*="border:1px solid #e2e8f0"],
html.dark-mode [style*="border: 1px solid #e2e8f0"],
html.dark-mode [style*="border:1.5px solid #e2e8f0"],
html.dark-mode [style*="border: 1.5px solid #e2e8f0"],
html.dark-mode [style*="border:1px solid #f1f5f9"],
html.dark-mode [style*="border:1px solid #dee2e6"],
html.dark-mode [style*="border:1px solid #e8ecf0"],
html.dark-mode [style*="border: 1px solid #e8ecf0"],
html.dark-mode [style*="border-right:1px solid #e2e8f0"],
html.dark-mode [style*="border-right: 1px solid #e2e8f0"],
html.dark-mode [style*="border-bottom:1px solid #e2e8f0"],
html.dark-mode [style*="border-bottom: 1px solid #e2e8f0"],
html.dark-mode [style*="border-left:4px solid #138F5B"],
html.dark-mode [style*="border-left: 4px solid #138F5B"] {
    border-color: var(--glass-border) !important;
}
html.dark-mode [style*="border-left:4px solid #138F5B"],
html.dark-mode [style*="border-left: 4px solid #138F5B"] {
    border-left-color: var(--primary) !important;
}
html.dark-mode [style*="border-bottom:1px solid #e2e8f0"] { border-bottom-color: var(--glass-border) !important; }
html.dark-mode [style*="border-right:1px solid #ccc"],
html.dark-mode [style*="border-right: 1px solid #ccc"] { border-right-color: var(--glass-border) !important; }
html.dark-mode [style*="border:.1rem solid #ffd8ab84"],
html.dark-mode [style*="border:0.1rem solid #ffd8ab84"] { border-color: rgba(251, 191, 36, 0.30) !important; }

/* ----- Hardcoded brand linear-gradients -> primary cyan→blue gradient ----- */
html.dark-mode [style*="linear-gradient(135deg, #16a34a, #15803d)"],
html.dark-mode [style*="linear-gradient(135deg,#16a34a,#15803d)"],
html.dark-mode [style*="linear-gradient(135deg, #16a34a, #22c55e)"],
html.dark-mode [style*="linear-gradient(135deg,#16a34a,#22c55e)"],
html.dark-mode [style*="linear-gradient(135deg,#16a34a,#22c55e);"],
html.dark-mode [style*="linear-gradient(135deg,#138F5B,#0a4f47)"],
html.dark-mode [style*="linear-gradient(135deg, #138F5B, #0a4f47)"],
html.dark-mode [style*="background: #16a34a;"] {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
}
html.dark-mode [style*="linear-gradient(135deg, #16a34a, #22c55e)"] * { color: inherit !important; }
html.dark-mode [style*="linear-gradient(135deg, #d97706, #f59e0b)"],
html.dark-mode [style*="linear-gradient(135deg,#d97706,#f59e0b)"] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.85), rgba(251, 113, 133, 0.55)) !important;
}
html.dark-mode [style*="linear-gradient(135deg,#7c3aed,#a78bfa)"],
html.dark-mode [style*="linear-gradient(135deg, #7c3aed, #a78bfa)"] {
    background: linear-gradient(135deg, rgba(61, 169, 252, 0.85), rgba(0,229,255, 0.55)) !important;
}

/* Modal headers with hardcoded green gradient */
html.dark-mode .modal-header[style*="linear-gradient(135deg, #16a34a"],
html.dark-mode .modal-header[style*="linear-gradient(135deg,#16a34a"] {
    background: linear-gradient(135deg, rgba(0,229,255, 0.18), rgba(61, 169, 252, 0.10)) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}
html.dark-mode .modal-header[style] h4,
html.dark-mode .modal-header[style] h5,
html.dark-mode .modal-header[style] .modal-title { color: var(--text-primary) !important; }
html.dark-mode .modal-header-custom[style*="background: linear-gradient(135deg, #16a34a"] {
    background: linear-gradient(135deg, rgba(0,229,255, 0.22), rgba(61, 169, 252, 0.12)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* ----- Card headers with hardcoded light bg ----- */
html.dark-mode .card-header[style*="background:#f8fafc"],
html.dark-mode .card-header[style*="background: #f8fafc"],
html.dark-mode .card-header[style*="background:#fff"],
html.dark-mode .card-header[style*="background: #fff"],
html.dark-mode .card-header.bg-white {
    background: linear-gradient(135deg, rgba(0,229,255, 0.08), rgba(61, 169, 252, 0.05)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .bg-white { background: var(--glass) !important; color: var(--text-primary) !important; }
html.dark-mode .bg-white.text-dark,
html.dark-mode .bg-light.text-dark { color: var(--text-primary) !important; }
html.dark-mode .text-dark { color: var(--text-primary) !important; }
html.dark-mode .bg-white h1,
html.dark-mode .bg-white h2,
html.dark-mode .bg-white h3,
html.dark-mode .bg-white h4,
html.dark-mode .bg-white h5 { color: var(--text-primary) !important; }

/* ----- .bg-purple legacy gradient header (pages.css) ----- */
html.dark-mode .bg-purple {
    background: linear-gradient(135deg, rgba(0,229,255, 0.22), rgba(61, 169, 252, 0.14)) !important;
    color: #071A20 !important;
}
html.dark-mode .bg-purple .card-title,
html.dark-mode .bg-purple .text-white { color: #071A20 !important; }

/* ----- Sidebar header vars (nav-side-bar)-driven active item ----- */
html.dark-mode .menu-item.is-active > .menu-link,
html.dark-mode .menu-submenu-item.is-active > .menu-submenu-link {
    /* already styled above; keep gradient on active icon */
}

/* ----- Notification dropdown panel (component/admin/notification-bell) ----- */
html.dark-mode .nav-item.dropdown .dropdown-menu[style*="background:#f8fafc"],
html.dark-mode .nav-item.dropdown .dropdown-menu[style*="border:1px solid #e8ecf0"],
html.dark-mode .nav-item.dropdown .dropdown-menu[style*="border-radius:14px;border:1px solid #e8ecf0"] {
    background: #1e293b !important;
    border: 1px solid #316578 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
html.dark-mode .nav-item.dropdown .dropdown-menu [style*="background:#f8fafc"] {
    background: #2d3a4a !important;
}
html.dark-mode .nav-item.dropdown .dropdown-menu .border-bottom { border-bottom: 1px solid #334155 !important; }
html.dark-mode .nav-item.dropdown .dropdown-menu .fw-bold,
html.dark-mode .nav-item.dropdown .dropdown-menu .fw-semibold {
    color: #f1f5f9 !important;
}
html.dark-mode .nav-item.dropdown .dropdown-menu .btn-link { color: #38bdf8 !important; }
html.dark-mode .fa-bell[style*="color:#555"] { color: #94a3b8 !important; }

/* ----- Event dropdown (component/admin/event-dropdown.blade.php) ----- */
html.dark-mode .nav-item.dropdown.event-dropdown [style*="border-right:1px solid #e2e8f0"],
html.dark-mode .nav-item.dropdown [style*="border-right:1px solid #e2e8f0"] {
    border-right-color: var(--glass-border) !important;
}
html.dark-mode .nav-item.dropdown [style*="color:#16a34a"] { color: var(--primary) !important; }
html.dark-mode .nav-item.dropdown [style*="color:#138F5B"] { color: var(--primary) !important; }
html.dark-mode .nav-item.dropdown [style*="color:#94a3b8"] { color: var(--text-muted) !important; }
html.dark-mode .nav-item.dropdown .dropdown-toggle.btn[style] {
    background: var(--glass) !important;
    color: var(--primary) !important;
    border: 1px solid var(--glass-border) !important;
}
html.dark-mode .nav-item.dropdown .dropdown-toggle.btn[style]:hover {
    border-color: transparent !important;
    box-shadow: 0 0 16px rgba(0,229,255, 0.20);
}
html.dark-mode .nav-item.dropdown .dropdown-toggle.btn[style]:focus,
html.dark-mode .nav-item.dropdown .dropdown-toggle.btn[style]:active {
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.16), 0 0 18px rgba(0,229,255, 0.20);
}
html.dark-mode .nav-item.dropdown.show .dropdown-toggle.btn[style] {
    background: var(--glass-strong) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}

/* ----- Security dashboard mini icons (rgba pastel backgrounds) ----- */
html.dark-mode [style*="background:#dcfce7;color:#16a34a"],
html.dark-mode [style*="background: #dcfce7;color:#16a34a"],
html.dark-mode [style*="background:#dbeafe;color:#2563eb"],
html.dark-mode [style*="background:#e0e7ff;color:#6366f1"] {
    background: rgba(0,229,255, 0.18) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(0,229,255, 0.30) !important;
}

/* ----- Chart bars / icons hardcoded light green ----- */
html.dark-mode [style*="background:#16a34a;border-radius"] {
    background: var(--gradient-primary) !important;
    box-shadow: 0 0 12px rgba(0,229,255, 0.35);
}
html.dark-mode [style*="background:#16a34a;"] { background: var(--primary) !important; }
html.dark-mode [style*="color:#16a34a;"] { color: var(--primary) !important; }
html.dark-mode .fa-square[style*="color:#16a34a"] { color: var(--primary) !important; }

/* ----- Inline disabled inputs (e.g. "Otomatis" grey) ----- */
html.dark-mode [style*="background:#f1f5f9;color:#64748b"],
html.dark-mode [style*="background: #f1f5f9;color:#64748b"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--glass-border) !important;
}
html.dark-mode input[disabled],
html.dark-mode .form-control[disabled],
html.dark-mode select[disabled] {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    border-color: var(--glass-border) !important;
    opacity: .85;
}

/* ----- Sport tables (responsive details), empty-state rows ----- */
html.dark-mode td[style*="color:#94a3b8"],
html.dark-mode td[style*="color: #94a3b8"],
html.dark-mode td[style*="color:#aaa"],
html.dark-mode td[style*="color:#999"],
html.dark-mode td[style*="color:#9ca3af"] { color: var(--text-muted) !important; }
html.dark-mode td[style*="color:#bbb"],
html.dark-mode td[style*="color:#dee2e6"] { color: var(--text-muted) !important; }

/* ----- Cetak/print views: keep light (printed) ----- */
@media print {
    html.dark-mode,
    html.dark-mode body { background: #fff !important; color: #000 !important; }
    html.dark-mode .card,
    html.dark-mode .table-card { background: #fff !important; color: #000 !important; box-shadow: none !important; backdrop-filter: none !important; }
    html.dark-mode .stat-card,
    html.dark-mode .header-card { background: #fff !important; color: #000 !important; }
    html.dark-mode table th, html.dark-mode table td { color: #000 !important; background: #fff !important; }
}

/* ----- APPENDIX B: per-view <style> block class overrides
   Blade views ship scoped <style> blocks defining bespoke classes
   (e.g. .header-card-modern / .table-card-modern / .modal-header-custom
   / .btn-header-action / .btn-add-kelas / .badge-role.*) with hardcoded
   light colors. These are CLASS definitions (no inline style), so we
   can override them cleanly via `html.dark-mode .className` selectors.
   --------------------------------------------------------------- */

/* Header card (kelas/index, sesi-lomba, etc.) */
html.dark-mode .header-card-modern {
    background: linear-gradient(135deg, rgba(0,229,255, 0.18), rgba(61, 169, 252, 0.10)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 22px rgba(0,229,255, 0.10) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary) !important;
}
html.dark-mode .header-card-modern h1,
html.dark-mode .header-card-modern h2,
html.dark-mode .header-card-modern h3,
html.dark-mode .header-card-modern h4,
html.dark-mode .header-card-modern h5,
html.dark-mode .header-card-modern p,
html.dark-mode .header-card-modern span { color: var(--text-primary) !important; }
html.dark-mode .header-card-modern .text-title,
html.dark-mode .header-card-modern .text-muted { color: var(--text-muted) !important; }
html.dark-mode .header-card-modern .text-info { color: var(--info) !important; }

/* Modern table card */
html.dark-mode .table-card-modern {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html.dark-mode .table-card-modern .card-body { color: var(--text-primary) !important; }

/* Custom modal header (gradient triggered) */
html.dark-mode .modal-header-custom {
    background: linear-gradient(135deg, rgba(0,229,255, 0.22), rgba(61, 169, 252, 0.12)) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}
html.dark-mode .modal-header-custom .modal-title,
html.dark-mode .modal-header-custom h4,
html.dark-mode .modal-header-custom h5 { color: var(--text-primary) !important; }

/* Header action button (with light bg + ripple layer) */
html.dark-mode .btn-header-action {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .btn-header-action::before { display: none; }
html.dark-mode .btn-header-action:not(:disabled):hover {
    border-color: rgba(0,229,255, 0.40) !important;
    color: var(--primary) !important;
    background: rgba(0,229,255, 0.10) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,229,255, 0.18);
}

/* Add button (green gradient custom) */
html.dark-mode .btn-add-kelas,
html.dark-mode .btn-add,
html.dark-mode .btn-tambah-ms {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 14px rgba(0,229,255, 0.30) !important;
}
html.dark-mode .btn-add-kelas::before { display: none; }
html.dark-mode .btn-add-kelas:not(:disabled):hover,
html.dark-mode .btn-add:hover,
html.dark-mode .btn-tambah-ms:hover {
    box-shadow: 0 8px 26px rgba(0,229,255, 0.45), 0 0 22px rgba(0,229,255, 0.30) !important;
    color: #071A20 !important;
    transform: translateY(-2px);
}

/* Compact buttons */
html.dark-mode .btn-compact { padding: 6px 12px !important; font-size: 12px !important; }

/* Role badge (daftar-user) */
html.dark-mode .badge-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border);
    background: var(--glass) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .badge-role.admin {
    background: rgba(61, 169, 252, 0.18) !important;
    color: var(--info) !important;
    border-color: rgba(61, 169, 252, 0.35);
    box-shadow: 0 0 12px rgba(61, 169, 252, 0.20);
}
html.dark-mode .badge-role.guru {
    background: rgba(52, 211, 153, 0.18) !important;
    color: var(--success) !important;
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.20);
}
html.dark-mode .badge-role.siswa {
    background: rgba(251, 191, 36, 0.18) !important;
    color: var(--warning) !important;
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.20);
}
html.dark-mode .badge-role.bk {
    background: rgba(251, 113, 133, 0.18) !important;
    color: var(--danger) !important;
    border-color: rgba(251, 113, 133, 0.35);
}

/* Form label custom */
html.dark-mode .form-label-cu,
html.dark-mode .form-label {
    color: var(--text-secondary) !important;
    font-weight: 500;
}
html.dark-mode .form-label-cu i { color: var(--primary) !important; }

/* Status rows (success/danger alerts scoped) */
html.dark-mode [class*="bg-success"][style],
html.dark-mode .alert-success[style*="background:#f0fdf4"] {
    background: rgba(52, 211, 153, 0.14) !important;
    color: var(--success) !important;
    border-left: 4px solid var(--success) !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
}
html.dark-mode .alert-danger[style*="background:#fef2f2"] {
    background: rgba(251, 113, 133, 0.14) !important;
    color: var(--danger) !important;
    border-left: 4px solid var(--danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.25) !important;
}
html.dark-mode .alert-info[style*="background:#ecfeff"] {
    background: rgba(61, 169, 252, 0.14) !important;
    color: var(--info) !important;
    border-left: 4px solid var(--info) !important;
}

/* Empty-state table rows: pad & mute */
html.dark-mode td[colspan][style*="color:#94a3b8"],
html.dark-mode td[colspan][style*="text-align:center;padding"]:not([style*="color"]) {
    color: var(--text-muted) !important;
    background: transparent !important;
}

/* Hero gradient blobs / abstract shape overrides - already handled by body::before/after */

/* ApexCharts (used on dashboard) - toolbars & legends */
html.dark-mode .apexcharts-toolbar,
html.dark-mode .apexcharts-menu,
html.dark-mode .apexcharts-tooltip {
    background: var(--bg-dropdown) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
html.dark-mode .apexcharts-menu-item { color: var(--text-secondary) !important; }
html.dark-mode .apexcharts-menu-item:hover { background: rgba(0,229,255, 0.12) !important; color: var(--primary) !important; }
html.dark-mode .apexcharts-tooltip-title,
html.dark-mode .apexcharts-legend-text { color: var(--text-primary) !important; }
html.dark-mode .apexcharts-xaxistooltip,
html.dark-mode .apexcharts-yaxistooltip {
    background: var(--bg-tooltip) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
}
html.dark-mode .apexcharts-xaxistooltip-text,
html.dark-mode .apexcharts-yaxistooltip-text { color: var(--text-primary) !important; }
html.dark-mode .apexcharts-gridline { stroke: rgba(255, 255, 255, 0.06) !important; }
html.dark-mode .apexcharts-xaxis line,
html.dark-mode .apexcharts-yaxis line { stroke: rgba(255, 255, 255, 0.08) !important; }
html.dark-mode .apexcharts-xaxis text,
html.dark-mode .apexcharts-yaxis text { fill: var(--text-muted) !important; }

/* ----- APPENDIX C: per-view bespoke class families
   Many scoped <style> blocks define bespoke classes
   (.create-card-header / .detail-card-header / .edit-card-header /
   .btn-cu-* / .btn-aksi-* / .badge-jenis / .badge-ta / ...) with
   hardcoded green-on-white styles. We override the common families
   here. Attribute `class*` matching is intentionally used to cover
   all variants (primary/secondary/danger/outline) without listing
   each name. These are safe even if the class doesn't exist.
   --------------------------------------------------------------- */

/* Per-view "card-header" gradients — green gradient -> cyan/blue gradient */
html.dark-mode [class*="card-header"][class*="create-"],
html.dark-mode [class*="card-header"][class*="edit-"],
html.dark-mode [class*="card-header"][class*="detail-"],
html.dark-mode [class*="card-header"][class*="header-"] {
    background: linear-gradient(135deg, rgba(0,229,255, 0.20), rgba(61, 169, 252, 0.12)) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html.dark-mode [class*="card-header"][class*="create-"] h1,
html.dark-mode [class*="card-header"][class*="create-"] h2,
html.dark-mode [class*="card-header"][class*="create-"] h3,
html.dark-mode [class*="card-header"][class*="create-"] h4,
html.dark-mode [class*="card-header"][class*="create-"] h5,
html.dark-mode [class*="card-header"][class*="edit-"] h4,
html.dark-mode [class*="card-header"][class*="detail-"] h4,
html.dark-mode [class*="card-header"][class*="header-"] i,
html.dark-mode [class*="card-header"][class*="header-"] span { color: var(--text-primary) !important; }

/* Per-view "card-body" surfaces — solid white -> glass */
html.dark-mode [class*="card-body"][class*="create-"],
html.dark-mode [class*="card-body"][class*="edit-"],
html.dark-mode [class*="card-body"][class*="detail-"] {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Custom create/edit/detail card containers */
html.dark-mode .create-card,
html.dark-mode .edit-card,
html.dark-mode .detail-card {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-primary) !important;
    overflow: hidden;
}
html.dark-mode .create-card-header,
html.dark-mode .edit-card-header,
html.dark-mode .detail-card-header {
    background: linear-gradient(135deg, rgba(0,229,255, 0.18), rgba(61, 169, 252, 0.10)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 18px 24px !important;
}
html.dark-mode .create-card-body,
html.dark-mode .edit-card-body,
html.dark-mode .detail-card-body {
    background: transparent !important;
    padding: 22px 24px !important;
    color: var(--text-primary) !important;
}

/* Per-view custom buttons — family cover */
html.dark-mode .btn-cu,
html.dark-mode .btn-cu-action,
html.dark-mode [class*="btn-cu-"]:not(.btn-cu-primary) {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .btn-cu:hover,
html.dark-mode .btn-cu-action:hover,
html.dark-mode [class*="btn-cu-"]:not(.btn-cu-primary):hover {
    background: var(--glass-strong) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .btn-cu-primary,
html.dark-mode .btn-cu-action-primary,
html.dark-mode .btn-simpan-ms,
html.dark-mode .btn-simpan {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 14px rgba(0,229,255, 0.30) !important;
}
html.dark-mode .btn-cu-primary:hover,
html.dark-mode .btn-cu-action-primary:hover,
html.dark-mode .btn-simpan-ms:hover,
html.dark-mode .btn-simpan:hover {
    box-shadow: 0 8px 26px rgba(0,229,255, 0.45), 0 0 22px rgba(0,229,255, 0.30) !important;
    transform: translateY(-2px);
    color: #071A20 !important;
}
html.dark-mode .btn-cu-secondary,
html.dark-mode .btn-cu-action-secondary,
html.dark-mode .btn-cu-outline,
html.dark-mode .btn-secondary {
    background: var(--glass) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
}
html.dark-mode .btn-cu-secondary:hover,
html.dark-mode .btn-cu-action-secondary:hover,
html.dark-mode .btn-cu-outline:hover {
    background: var(--glass-strong) !important;
    color: var(--primary) !important;
    border-color: rgba(0,229,255, 0.35) !important;
}
html.dark-mode .btn-cu-danger,
html.dark-mode .btn-cu-delete {
    background: rgba(251, 113, 133, 0.18) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(251, 113, 133, 0.40) !important;
}
html.dark-mode .btn-cu-danger:hover,
html.dark-mode .btn-cu-delete:hover {
    background: rgba(251, 113, 133, 0.28) !important;
    box-shadow: 0 6px 18px rgba(251, 113, 133, 0.30);
}

/* Tambah / Add buttons (any variant) */
html.dark-mode .btn-add,
html.dark-mode .btn-add-kelas,
html.dark-mode .btn-tambah,
html.dark-mode .btn-tambah-ms,
html.dark-mode .btn-tambah-mu,
html.dark-mode .btn-aksi-ms,
html.dark-mode .btn-aksi-semester {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 14px rgba(0,229,255, 0.25) !important;
}
html.dark-mode .btn-add:hover,
html.dark-mode .btn-add-kelas:hover,
html.dark-mode .btn-tambah:hover,
html.dark-mode .btn-tambah-ms:hover,
html.dark-mode .btn-tambah-mu:hover,
html.dark-mode .btn-aksi-ms:hover {
    box-shadow: 0 8px 26px rgba(0,229,255, 0.45) !important;
    transform: translateY(-2px);
    color: #071A20 !important;
}

/* Misc button variants */
html.dark-mode .btn-back,
html.dark-mode .btn-cetak,
html.dark-mode .btn-cetak-semua,
html.dark-mode .btn-import-mu,
html.dark-mode .btn-detail,
html.dark-mode .btn-action-mu,
html.dark-mode .btn-compact,
html.dark-mode .btn-info-ms {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .btn-back:hover,
html.dark-mode .btn-cetak:hover,
html.dark-mode .btn-cetak-semua:hover,
html.dark-mode .btn-import-mu:hover,
html.dark-mode .btn-action-mu:hover {
    background: rgba(0,229,255, 0.12) !important;
    color: var(--primary) !important;
    border-color: rgba(0,229,255, 0.30) !important;
    transform: translateY(-2px);
}

/* Bespoke badge family */
html.dark-mode [class*="badge-"]:not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info):not(.badge-secondary):not(.badge-primary):not(.badge-green):not(.badge-red):not(.badge-yellow):not(.badge-blue):not(.badge-pill) {
    background: var(--glass) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 600;
}
html.dark-mode .badge-ta { background: rgba(61, 169, 252, 0.18) !important; color: var(--info) !important; border-color: rgba(61, 169, 252, 0.35) !important; box-shadow: 0 0 12px rgba(61, 169, 252, 0.20); }
html.dark-mode .badge-semester,
html.dark-mode .badge-semester-ms { background: rgba(52, 211, 153, 0.18) !important; color: var(--success) !important; border-color: rgba(52, 211, 153, 0.35) !important; }
html.dark-mode .badge-status { background: var(--glass) !important; color: var(--text-secondary) !important; border: 1px solid var(--glass-border); }
html.dark-mode .badge-jenis,
html.dark-mode .badge-show,
html.dark-mode .badge-detail,
html.dark-mode .badge-jumlah,
html.dark-mode .badge-total-mu,
html.dark-mode .badge-modern-mu {
    background: var(--glass) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Header strips (per-view "header-title"/"header-tahun"/"header-sub") */
html.dark-mode .header-title,
html.dark-mode .header-title-cu,
html.dark-mode .header-sub,
html.dark-mode .header-tahun,
html.dark-mode .siswa-header,
html.dark-mode .filter-info {
    background: linear-gradient(135deg, rgba(0,229,255, 0.18), rgba(61, 169, 252, 0.10)) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
html.dark-mode .header-title h1,
html.dark-mode .header-title h2,
html.dark-mode .header-title h3,
html.dark-mode .header-title h4,
html.dark-mode .header-title-cu h4,
html.dark-mode .header-sub,
html.dark-mode .header-tahun,
html.dark-mode .siswa-header h4 {
    color: var(--text-primary) !important;
}
html.dark-mode .header-icon-cu,
html.dark-mode .header-icon-mu {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 18px rgba(0,229,255, 0.35);
}

/* Anggota / table card family */
html.dark-mode .anggota-table-card,
html.dark-mode [class*="table-card"] {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Action filter / action button boxes */
html.dark-mode .action-btn,
html.dark-mode .action-filter-box {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Legacy info badges (pages.css .info / .info2) */
html.dark-mode .info,
html.dark-mode .info2 { color: var(--text-muted) !important; }
html.dark-mode #info:checked:checked ~ .info,
html.dark-mode #info2:checked:checked ~ .info2 { color: var(--text-primary) !important; }

/* Confirm checkbox (pages.css) */
html.dark-mode .check { background-color: rgba(255, 255, 255, 0.10) !important; }
html.dark-mode .check:checked { background-color: var(--primary) !important; box-shadow: 0 0 10px rgba(0,229,255, 0.45); }
html.dark-mode .check::before { border-color: #071A20; }

/* Legacy date picker (pages.css input[type="date"]) */
html.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.7);
}

/* Legacy `.text-title` / `.text-amount` (pages.css stat-cards) */
html.dark-mode .text-title { color: var(--text-muted) !important; }
html.dark-mode .text-amount { color: var(--text-primary) !important; }

/* Legacy bg color helper overrides */
html.dark-mode .green { background: rgba(52, 211, 153, 0.22) !important; color: var(--success) !important; }
html.dark-mode .orange { background: rgba(251, 113, 133, 0.22) !important; color: var(--danger) !important; }
html.dark-mode .yellow { background: rgba(251, 191, 36, 0.22) !important; color: var(--warning) !important; }
html.dark-mode .blue { background: rgba(61, 169, 252, 0.22) !important; color: var(--info) !important; }
html.dark-mode .border-left-green,
html.dark-mode .border-left-orange,
html.dark-mode .border-left-yellow,
html.dark-mode .border-left-blue { border-left-width: 5px; }
html.dark-mode .border-left-green { border-left-color: var(--success) !important; }
html.dark-mode .border-left-orange { border-left-color: var(--danger) !important; }
html.dark-mode .border-left-yellow { border-left-color: var(--warning) !important; }
html.dark-mode .border-left-blue { border-left-color: var(--info) !important; }

/* Legacy generic cards (pages.css .card bg #fff) — already overridden above */

/* `.icon-shape` legacy circle (pages.css) */
html.dark-mode .icon-shape {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
    box-shadow: 0 0 18px rgba(0,229,255, 0.40) !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
html.dark-mode .icon-shape.icon-area,
html.dark-mode .icon-shape.icon-pie,
html.dark-mode .icon-shape.green,
html.dark-mode .icon-shape.orange,
html.dark-mode .icon-shape.yellow,
html.dark-mode .icon-shape.blue {
    background: var(--gradient-primary) !important;
    color: #071A20 !important;
}

/* Sidebar variable shadow effect on collapse */
html.dark-mode body.sidebar-collapsed .sidebar .menu-link[title]:hover::after,
html.dark-mode .sidebar.is-collapsed .menu-link[title]:hover::after {
    background: var(--bg-card-solid) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Login/register wrapper tweaks */
html.dark-mode .login-container {
    background: rgba(13, 47, 56, 0.55) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 22px !important;
    box-shadow: var(--shadow-lg) !important;
}
html.dark-mode .login-container .form-control,
html.dark-mode .login-container input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .login-container .form-control:focus,
html.dark-mode .login-container input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0,229,255, 0.18) !important;
}
html.dark-mode .login-container .welcome,
html.dark-mode .login-container label,
html.dark-mode .login-container .logo { color: var(--text-primary) !important; }
html.dark-mode .login-container .text-muted,
html.dark-mode .login-container .info { color: var(--text-muted) !important; }

/* Auth 2FA challenge + setup pages inherit login-page gradient */
html.dark-mode .auth-2fa,
html.dark-mode .two-fa-setup,
html.dark-mode .recovery-codes-page {
    background: linear-gradient(135deg, #071A20 0%, #0A2530 50%, #071A20 100%) !important;
    color: var(--text-primary) !important;
}

/* Account-center (profil-saya) page */
html.dark-mode .account-center-page,
html.dark-mode .profile-page { background: transparent !important; color: var(--text-primary) !important; }
html.dark-mode .profile-card,
html.dark-mode .profile-info-card {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-primary) !important;
}

/* ============================================================
   ICON GLOW SYSTEM — Premium Neon (idle → cyan glow on active/hover)
   Palette: primary glow #00E5FF, secondary glow #00FFD5, 30–45% opacity.
   Idle icon color: rgba(255,255,255,0.75) (soft white). On active/hover
   the icon's color shifts to cyan AND a layered glow appears via the
   combination of:
     - text-shadow  (icon glyph halo)
     - filter: drop-shadow (SVG-like halo around the glyph shape)
     - box-shadow   (only when icon lives in a container)
   Transition 0.3s ease. Hover scales the icon 1.08–1.12 and boosts glow
   ~20%. Inactive icons have NO glow so the active one stands out.
   No blink/pulse — single smooth transition only.
   ============================================================ */

/* Idle icon baseline — soft white, no glow */
html.dark-mode .menu-icon i,
html.dark-mode .menu-icon,
html.dark-mode .c-header-icon i,
html.dark-mode .notification-bell .fa-bell,
html.dark-mode .header-icon i,
html.dark-mode .stat-icon i,
html.dark-mode .icon-box i,
html.dark-mode .icon-shape i,
html.dark-mode .header-card-modern .header-icon i,
html.dark-mode .btn-tambah-ms i,
html.dark-mode .btn-simpan-ms i,
html.dark-mode .btn-add i,
html.dark-mode .btn-add-kelas i,
html.dark-mode .btn-cetak i,
html.dark-mode .btn-import-mu i,
html.dark-mode .btn-back i,
html.dark-mode .btn-detail i,
html.dark-mode .btn-cu-primary i,
html.dark-mode .btn-cu-danger i,
html.dark-mode .theme-toggle i,
html.dark-mode .name-tag i,
html.dark-mode .page-title-content i {
    color: rgba(0, 229, 255, 0.85) !important;
    text-shadow:
        0 0 8px rgba(0,229,255,0.35),
        0 0 18px rgba(0,229,255,0.15) !important;
    filter: drop-shadow(0 0 5px rgba(0,229,255,0.25)) !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}

/* ---- Sidebar menu icons IDLE — always alive with multi-layer neon glow ----
   Every icon carries a layered cyan halo at idle so the sidebar feels "alive".
   Active/hover boost the intensity further. */
html.dark-mode .menu-icon i,
html.dark-mode .menu-icon {
    color: rgba(0, 229, 255, 0.88) !important;
    text-shadow:
        0 0 8px rgba(0,229,255,0.40),
        0 0 22px rgba(0,229,255,0.18) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255,0.30)) !important;
}
html.dark-mode .menu-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 14px rgba(0,229,255,0.10) !important;
}

/* ---- Sidebar menu icons : ACTIVE ---- */
html.dark-mode .menu-item.is-active > .menu-link .menu-icon,
html.dark-mode .menu-item.is-active > .menu-link .menu-icon i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.60),
        0 0 24px rgba(0,229,255, 0.30),
        0 0 50px rgba(0,229,255, 0.12) !important;
    filter: drop-shadow(0 0 8px rgba(0,229,255, 0.50)) !important;
}
html.dark-mode .menu-item.is-active > .menu-link .menu-icon {
    box-shadow:
        0 0 20px rgba(0,229,255, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
/* Hover (non-active) — boost glow + scale */
html.dark-mode .menu-link:hover .menu-icon,
html.dark-mode .menu-link:hover .menu-icon i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.50),
        0 0 24px rgba(0,229,255, 0.22) !important;
    filter: drop-shadow(0 0 7px rgba(0,229,255, 0.40)) !important;
}
html.dark-mode .menu-link:hover .menu-icon {
    transform: scale(1.10) !important;
    box-shadow: 0 0 20px rgba(0,229,255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* Active + hover — max glow */
html.dark-mode .menu-item.is-active > .menu-link:hover .menu-icon,
html.dark-mode .menu-item.is-active > .menu-link:hover .menu-icon i {
    text-shadow:
        0 0 14px rgba(0,229,255, 0.70),
        0 0 30px rgba(0,229,255, 0.35),
        0 0 60px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(0,229,255, 0.60)) !important;
}
html.dark-mode .menu-item.is-active > .menu-link:hover .menu-icon {
    transform: scale(1.12) !important;
    box-shadow: 0 0 28px rgba(0,229,255, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* ---- Header / navbar icons (notification, settings, theme toggle, avatar) ---- */
html.dark-mode .notification-bell .fa-bell,
html.dark-mode .nav-item.dropdown .fa-bell,
html.dark-mode .c-header-icon .fa-cog,
html.dark-mode .c-header-icon .fas,
html.dark-mode .c-header-icon .bi,
html.dark-mode .theme-toggle i {
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
/* Idle — always alive with multi-layer neon glow */
html.dark-mode .c-header-icon i,
html.dark-mode .c-header-icon .fas,
html.dark-mode .c-header-icon .bi,
html.dark-mode .theme-toggle i {
    color: var(--text-secondary) !important;
    text-shadow:
        0 0 8px rgba(0,229,255,0.25),
        0 0 20px rgba(0,229,255,0.10) !important;
    filter: drop-shadow(0 0 5px rgba(0,229,255,0.20)) !important;
}
html.dark-mode .notification-bell .c-header-icon:hover .fa-bell,
html.dark-mode .nav-item.dropdown .c-header-icon:hover .fa-bell,
html.dark-mode .c-header-icon:hover i,
html.dark-mode .c-header-icon:hover .fas,
html.dark-mode .c-header-icon:hover .bi,
html.dark-mode .theme-toggle:hover i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 12px rgba(0,229,255, 0.60),
        0 0 28px rgba(0,229,255, 0.30),
        0 0 50px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 8px rgba(0,229,255, 0.50)) !important;
    transform: scale(1.12) !important;
}
html.dark-mode .c-header-icon:hover {
    box-shadow: 0 0 22px rgba(0,229,255, 0.28), inset 0 0 0 1px rgba(0,229,255, 0.30) !important;
}

/* ---- Page header icons (.header-icon / .header-card-modern .header-icon) ---- */
html.dark-mode .header-icon i,
html.dark-mode .header-card-modern .header-icon i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.45),
        0 0 24px rgba(0,229,255, 0.22),
        0 0 50px rgba(0,229,255, 0.10) !important;
    filter: drop-shadow(0 0 7px rgba(0,229,255, 0.40)) !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .header-icon:hover i,
html.dark-mode .header-card-modern:hover .header-icon i {
    transform: scale(1.12) !important;
    text-shadow:
        0 0 14px rgba(0,229,255, 0.60),
        0 0 30px rgba(0,229,255, 0.30),
        0 0 60px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(0,229,255, 0.55)) !important;
}

/* ---- Statistic card icons (.stat-icon) ---- */
html.dark-mode .stat-icon i,
html.dark-mode .stat-icon .fas,
html.dark-mode .stat-icon .bi {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.40),
        0 0 24px rgba(0,229,255, 0.20),
        0 0 50px rgba(0,229,255, 0.08) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.35)) !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .stat-card:hover .stat-icon i,
html.dark-mode .stat-card:hover .stat-icon .fas,
html.dark-mode .stat-card:hover .stat-icon .bi {
    color: #00FFD5 !important;
    transform: scale(1.15) !important;
    text-shadow:
        0 0 14px rgba(0,229,255, 0.60),
        0 0 30px rgba(0,229,255, 0.30),
        0 0 60px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(0,229,255, 0.55)) !important;
}
/* Semantic variants keep their color identity but get matching glow */
html.dark-mode .stat-card.green  .stat-icon i,
html.dark-mode .stat-card.green  .stat-icon .fas,
html.dark-mode .stat-card.green  .stat-icon .bi { color: #34D399 !important; text-shadow: 0 0 10px rgba(52,211,153,0.45), 0 0 24px rgba(52,211,153,0.20) !important; filter: drop-shadow(0 0 6px rgba(52,211,153,0.40)) !important; }
html.dark-mode .stat-card.orange .stat-icon i,
html.dark-mode .stat-card.orange .stat-icon .fas,
html.dark-mode .stat-card.orange .stat-icon .bi { color: #FB7185 !important; text-shadow: 0 0 10px rgba(251,113,133,0.45), 0 0 24px rgba(251,113,133,0.20) !important; filter: drop-shadow(0 0 6px rgba(251,113,133,0.40)) !important; }
html.dark-mode .stat-card.yellow .stat-icon i,
html.dark-mode .stat-card.yellow .stat-icon .fas,
html.dark-mode .stat-card.yellow .stat-icon .bi { color: #FBBF24 !important; text-shadow: 0 0 10px rgba(251,191,36,0.45), 0 0 24px rgba(251,191,36,0.20) !important; filter: drop-shadow(0 0 6px rgba(251,191,36,0.40)) !important; }
html.dark-mode .stat-card.blue   .stat-icon i,
html.dark-mode .stat-card.blue   .stat-icon .fas,
html.dark-mode .stat-card.blue   .stat-icon .bi { color: #2EA8FF !important; text-shadow: 0 0 10px rgba(46,168,255,0.45), 0 0 24px rgba(46,168,255,0.20) !important; filter: drop-shadow(0 0 6px rgba(46,168,255,0.40)) !important; }
html.dark-mode .stat-card.green:hover  .stat-icon i,
html.dark-mode .stat-card.green:hover  .stat-icon .fas,
html.dark-mode .stat-card.green:hover  .stat-icon .bi { text-shadow: 0 0 14px rgba(52,211,153,0.65), 0 0 30px rgba(52,211,153,0.30), 0 0 60px rgba(52,211,153,0.15) !important; filter: drop-shadow(0 0 10px rgba(52,211,153,0.55)) !important; }
html.dark-mode .stat-card.orange:hover .stat-icon i,
html.dark-mode .stat-card.orange:hover .stat-icon .fas,
html.dark-mode .stat-card.orange:hover .stat-icon .bi { text-shadow: 0 0 14px rgba(251,113,133,0.65), 0 0 30px rgba(251,113,133,0.30), 0 0 60px rgba(251,113,133,0.15) !important; filter: drop-shadow(0 0 10px rgba(251,113,133,0.55)) !important; }
html.dark-mode .stat-card.yellow:hover .stat-icon i,
html.dark-mode .stat-card.yellow:hover .stat-icon .fas,
html.dark-mode .stat-card.yellow:hover .stat-icon .bi { text-shadow: 0 0 14px rgba(251,191,36,0.65), 0 0 30px rgba(251,191,36,0.30), 0 0 60px rgba(251,191,36,0.15) !important; filter: drop-shadow(0 0 10px rgba(251,191,36,0.55)) !important; }
html.dark-mode .stat-card.blue:hover   .stat-icon i,
html.dark-mode .stat-card.blue:hover   .stat-icon .fas,
html.dark-mode .stat-card.blue:hover   .stat-icon .bi { text-shadow: 0 0 14px rgba(61,169,252,0.65), 0 0 30px rgba(61,169,252,0.30), 0 0 60px rgba(61,169,252,0.15) !important; filter: drop-shadow(0 0 10px rgba(61,169,252,0.55)) !important; }

/* ---- Action buttons (Lihat / Edit / Hapus) — glow on hover ---- */
html.dark-mode .action-group-ms .btn i,
html.dark-mode .action-group-ms .btn .fas,
html.dark-mode .action-group-ms .btn .bi {
    color: rgba(255, 255, 255, 0.50) !important;
    text-shadow: none !important;
    filter: none !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .action-group-ms .btn:hover i,
html.dark-mode .action-group-ms .btn:hover .fas,
html.dark-mode .action-group-ms .btn:hover .bi {
    transform: scale(1.18) !important;
}
/* Info/View — idle subtle blue, hover full cyan glow */
html.dark-mode .action-group-ms .btn-outline-info i,
html.dark-mode .action-group-ms .btn-outline-info .fas {
    color: rgba(61, 169, 252, 0.70) !important;
    filter: drop-shadow(0 0 3px rgba(61,169,252,0.15)) !important;
}
html.dark-mode .action-group-ms .btn-outline-info:hover i,
html.dark-mode .action-group-ms .btn-outline-info:hover .fas {
    color: #ffffff !important;
    text-shadow:
        0 0 14px rgba(0,229,255, 0.80),
        0 0 32px rgba(0,229,255, 0.40),
        0 0 60px rgba(0,229,255, 0.20) !important;
    filter: drop-shadow(0 0 12px rgba(0,229,255, 0.70)) !important;
}
/* Warning/Edit — idle subtle amber, hover full yellow glow */
html.dark-mode .action-group-ms .btn-outline-warning i,
html.dark-mode .action-group-ms .btn-outline-warning .fas {
    color: rgba(251, 191, 36, 0.70) !important;
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.15)) !important;
}
html.dark-mode .action-group-ms .btn-outline-warning:hover i,
html.dark-mode .action-group-ms .btn-outline-warning:hover .fas {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.75), 0 0 28px rgba(251, 191, 36, 0.35), 0 0 60px rgba(251, 191, 36, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.65)) !important;
}
/* Danger/Delete — idle subtle red, hover full red glow */
html.dark-mode .action-group-ms .btn-outline-danger i,
html.dark-mode .action-group-ms .btn-outline-danger .fas {
    color: rgba(251, 113, 133, 0.70) !important;
    filter: drop-shadow(0 0 3px rgba(251,113,133,0.15)) !important;
}
html.dark-mode .action-group-ms .btn-outline-danger:hover i,
html.dark-mode .action-group-ms .btn-outline-danger:hover .fas {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(251, 113, 133, 0.75), 0 0 28px rgba(251, 113, 133, 0.35), 0 0 60px rgba(251, 113, 133, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.65)) !important;
}
/* Success — idle subtle green, hover full green glow */
html.dark-mode .action-group-ms .btn-outline-success i,
html.dark-mode .action-group-ms .btn-outline-success .fas {
    color: rgba(52, 211, 153, 0.70) !important;
    filter: drop-shadow(0 0 3px rgba(52,211,153,0.15)) !important;
}
html.dark-mode .action-group-ms .btn-outline-success:hover i,
html.dark-mode .action-group-ms .btn-outline-success:hover .fas {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(52, 211, 153, 0.75), 0 0 28px rgba(52, 211, 153, 0.35), 0 0 60px rgba(52, 211, 153, 0.15) !important;
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.65)) !important;
}
/* Secondary — idle subtle white, hover cyan glow */
html.dark-mode .action-group-ms .btn-outline-secondary i,
html.dark-mode .action-group-ms .btn-outline-secondary .fas {
    color: rgba(255, 255, 255, 0.45) !important;
}
html.dark-mode .action-group-ms .btn-outline-secondary:hover i,
html.dark-mode .action-group-ms .btn-outline-secondary:hover .fas {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(0,229,255, 0.70), 0 0 28px rgba(0,229,255, 0.30) !important;
    filter: drop-shadow(0 0 10px rgba(0,229,255, 0.55)) !important;
}

/* ---- Add / Tambah button icon glow (idle cyan + boost on hover) ---- */
html.dark-mode .btn-tambah-ms i,
html.dark-mode .btn-add i,
html.dark-mode .btn-add-kelas i,
html.dark-mode .btn-cu-primary i,
html.dark-mode .btn-simpan-ms i {
    color: #071A20 !important;
    text-shadow: none !important;
    filter: none !important;
    transition: transform .3s ease !important;
}
html.dark-mode .btn-tambah-ms:hover i,
html.dark-mode .btn-add:hover i,
html.dark-mode .btn-add-kelas:hover i,
html.dark-mode .btn-cu-primary:hover i,
html.dark-mode .btn-simpan-ms:hover i {
    transform: scale(1.10) !important;
}
/* Outline "tambah" button (light style) — icon cyan glow */
html.dark-mode .btn-tambah-ms:not([class*="btn-simpan"]) i,
html.dark-mode .btn-header-ms.btn-tambah-ms i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.50),
        0 0 24px rgba(0,229,255, 0.20) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.40)) !important;
}
html.dark-mode .btn-tambah-ms:not([class*="btn-simpan"]):hover i,
html.dark-mode .btn-header-ms.btn-tambah-ms:hover i {
    text-shadow:
        0 0 14px rgba(0,229,255, 0.65),
        0 0 30px rgba(0,229,255, 0.28) !important;
    filter: drop-shadow(0 0 8px rgba(0,229,255, 0.55)) !important;
    transform: scale(1.12) !important;
}

/* ---- PDF / Export / Cetak / Import button icons ---- */
html.dark-mode .btn-cetak i,
html.dark-mode .btn-cetak-semua i,
html.dark-mode .btn-import-mu i,
html.dark-mode .btn-back i,
html.dark-mode .btn-detail i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 8px rgba(0,229,255, 0.35),
        0 0 18px rgba(0,229,255, 0.12) !important;
    filter: drop-shadow(0 0 5px rgba(0,229,255, 0.30)) !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .btn-cetak:hover i,
html.dark-mode .btn-cetak-semua:hover i,
html.dark-mode .btn-import-mu:hover i,
html.dark-mode .btn-back:hover i,
html.dark-mode .btn-detail:hover i {
    color: #00FFD5 !important;
    transform: scale(1.12) !important;
    text-shadow:
        0 0 12px rgba(0,229,255, 0.55),
        0 0 26px rgba(0,229,255, 0.28),
        0 0 50px rgba(0,229,255, 0.12) !important;
    filter: drop-shadow(0 0 8px rgba(0,229,255, 0.50)) !important;
}

/* ---- Legacy icon-box / icon-shape (pages.css) glow ---- */
html.dark-mode .icon-box i,
html.dark-mode .icon-shape i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 10px rgba(0,229,255, 0.40),
        0 0 24px rgba(0,229,255, 0.18) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.35)) !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .icon-box:hover i,
html.dark-mode .icon-shape:hover i {
    transform: scale(1.12) !important;
    text-shadow:
        0 0 14px rgba(0,229,255, 0.60),
        0 0 30px rgba(0,229,255, 0.28),
        0 0 60px rgba(0,229,255, 0.12) !important;
    filter: drop-shadow(0 0 10px rgba(0,229,255, 0.55)) !important;
}

/* ---- Toolbar/bulk buttons (any .btn with .fa-print / .fa-file-pdf / .fa-download / .fa-plus) ---- */
html.dark-mode .btn i.fa-print,
html.dark-mode .btn i.fa-file-pdf,
html.dark-mode .btn i.fa-download,
html.dark-mode .btn i.fa-file-export,
html.dark-mode .btn i.fa-plus,
html.dark-mode .btn i.fa-upload,
html.dark-mode .btn i.fa-file-csv {
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode .btn:hover i.fa-print,
html.dark-mode .btn:hover i.fa-file-pdf,
html.dark-mode .btn:hover i.fa-download,
html.dark-mode .btn:hover i.fa-file-export,
html.dark-mode .btn:hover i.fa-upload,
html.dark-mode .btn:hover i.fa-file-csv {
    transform: scale(1.12) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.40)) !important;
}
/* On primary/simpan buttons the icon is dark text on cyan bg → keep crisp, no cyan glow */
html.dark-mode .btn-primary:hover i,
html.dark-mode .btn-simpan-ms:hover i,
html.dark-mode .btn-cu-primary:hover i {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.40)) !important;
}

/* ---- Notification bell — gentle idle pulse-less glow + boost on hover ---- */
html.dark-mode .notification-bell .fa-bell,
html.dark-mode .nav-item.dropdown .fa-bell {
    color: #00F5D4 !important;
    text-shadow:
        0 0 8px rgba(0,229,255, 0.35),
        0 0 20px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 5px rgba(0,229,255, 0.30)) !important;
}
html.dark-mode .notification-bell .c-header-icon:hover .fa-bell,
html.dark-mode .nav-item.dropdown .c-header-icon:hover .fa-bell {
    color: #00FFD5 !important;
    text-shadow:
        0 0 12px rgba(0,229,255, 0.60),
        0 0 28px rgba(0,229,255, 0.30),
        0 0 50px rgba(0,229,255, 0.15) !important;
    filter: drop-shadow(0 0 8px rgba(0,229,255, 0.55)) !important;
    transform: scale(1.12) !important;
}

/* ---- Settings gear (any .fa-cog) ---- */
html.dark-mode .fa-cog,
html.dark-mode .fas.fa-cog {
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease, transform .3s ease !important;
}
html.dark-mode a:hover .fa-cog,
html.dark-mode .btn:hover .fa-cog,
html.dark-mode .nav-link:hover .fa-cog,
html.dark-mode .menu-link:hover .fa-cog {
    color: #00F5D4 !important;
    text-shadow: 0 0 10px rgba(0,229,255, 0.50), 0 0 16px rgba(0, 255, 213, 0.28) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.45)) !important;
    transform: scale(1.10) !important;
}

/* ---- Submenu icons inherit soft white, glow only on parent active/hover ---- */
html.dark-mode .menu-submenu-link i {
    color: rgba(255, 255, 255, 0.75) !important;
    text-shadow: none !important;
    filter: none !important;
    transition: color .3s ease, text-shadow .3s ease, filter .3s ease !important;
}
html.dark-mode .menu-submenu-link:hover i,
html.dark-mode .menu-submenu-item.is-active .menu-submenu-link i {
    color: #00F5D4 !important;
    text-shadow:
        0 0 8px rgba(0,229,255, 0.50),
        0 0 20px rgba(0,229,255, 0.20) !important;
    filter: drop-shadow(0 0 6px rgba(0,229,255, 0.40)) !important;
}

/* ---- Avatar / profile image — glowing ring ---- */
html.dark-mode .account-avatar,
html.dark-mode .rounded-circle[src*="avatar"],
html.dark-mode img.rounded-circle[style*="object-fit"] {
    border: 2px solid rgba(0,229,255,0.35) !important;
    box-shadow:
        0 0 20px rgba(0,229,255,0.30),
        0 0 0 1px rgba(0,229,255,0.10) inset,
        0 4px 12px rgba(0,0,0,0.30) !important;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
html.dark-mode .account-avatar:hover,
html.dark-mode .rounded-circle[src*="avatar"]:hover,
html.dark-mode img.rounded-circle[style*="object-fit"]:hover {
    border-color: rgba(0,229,255,0.60) !important;
    box-shadow:
        0 0 28px rgba(0,229,255,0.45),
        0 0 0 1px rgba(0,229,255,0.20) inset,
        0 6px 16px rgba(0,0,0,0.35) !important;
    transform: scale(1.03);
}

/* ---- Reduced motion: keep color but drop transform for accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    html.dark-mode .menu-icon,
    html.dark-mode .menu-icon i,
    html.dark-mode .c-header-icon i,
    html.dark-mode .notification-bell .fa-bell,
    html.dark-mode .header-icon i,
    html.dark-mode .stat-icon i,
    html.dark-mode .icon-box i,
    html.dark-mode .icon-shape i,
    html.dark-mode .action-group-ms .btn i,
    html.dark-mode .btn-tambah-ms i,
    html.dark-mode .btn-cetak i,
    html.dark-mode .btn-import-mu i,
    html.dark-mode .btn-back i,
    html.dark-mode .btn-detail i,
    html.dark-mode .theme-toggle i,
    html.dark-mode .fa-cog { transform: none !important; }
}

/* ============================================================
   AMBIENT LIGHTING — soft radial glow behind key surfaces
   ============================================================ */
/* Behind active sidebar menu — soft cyan aura */
html.dark-mode .menu-item.is-active > .menu-link {
    box-shadow:
        0 0 28px rgba(0, 229, 255, 0.30),
        0 0 8px rgba(0, 229, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
/* Behind primary buttons — cyan aura */
html.dark-mode .btn-primary,
html.dark-mode .btn-simpan-ms,
html.dark-mode .btn-cu-primary,
html.dark-mode .btn-add,
html.dark-mode .btn-add-kelas {
    box-shadow:
        0 4px 16px rgba(0, 229, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 24px -6px rgba(0, 229, 255, 0.45) !important;
}
/* Behind header — soft top glow strip */
html.dark-mode .l-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.35), transparent);
    pointer-events: none;
}
/* Behind stat cards — ambient corner glow (already handled via .stat-card::after) */

/* ============================================================
   TYPOGRAPHY HIERARCHY — clean, light, layered
   ============================================================ */
html.dark-mode h1,
html.dark-mode .h1 {
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}
html.dark-mode h2,
html.dark-mode .h2 { font-weight: 700 !important; letter-spacing: -0.2px; }
html.dark-mode h3,
html.dark-mode .h3 { font-weight: 600 !important; letter-spacing: -0.1px; }
html.dark-mode h4,
html.dark-mode .h4 { font-weight: 600 !important; }
html.dark-mode h5,
html.dark-mode .h5 { font-weight: 500 !important; letter-spacing: 0.3px; text-transform: uppercase; }
html.dark-mode h6,
html.dark-mode .h6 { font-weight: 500 !important; letter-spacing: 0.2px; }
/* Subtitle — softer, easier to read */
html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode small,
html.dark-mode .form-text {
    letter-spacing: 0.1px;
}
/* Card titles — brighter, more prominent */
html.dark-mode .card-title,
html.dark-mode .card-header h5,
html.dark-mode .card-header h4,
html.dark-mode .table-card .card-header h5 {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.2px;
}

/* ============================================================
   MICRO INTERACTIONS — 250–350ms ease, no excessive animation
   ============================================================ */
/* Page content entrance — fade + slide up on every page load */
html.dark-mode .l-main {
    animation: pageEnter .4s ease both;
}
/* Tooltip fade */
html.dark-mode .tooltip.show { animation: darkFadeIn .2s ease both; }
@keyframes darkFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Focus ring — cyan glow on keyboard focus */
html.dark-mode .btn:focus-visible,
html.dark-mode .form-control:focus-visible,
html.dark-mode .form-select:focus-visible,
html.dark-mode a:focus-visible,
html.dark-mode .nav-link:focus-visible,
html.dark-mode .menu-link:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.50) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.15) !important;
}
/* Click — subtle press-down on buttons */
html.dark-mode .btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition: transform .08s ease !important;
}
/* Smooth collapse for accordions / submenu */
html.dark-mode .collapse {
    transition: height .3s ease !important;
}
/* Card click micro-feedback (non-interactive cards don't get this — only
   clickable cards like .card-modern / .stat-card) */
html.dark-mode .stat-card:active,
html.dark-mode .card-modern:active {
    transform: translateY(-2px) scale(0.995) !important;
    transition: transform .08s ease !important;
}

/* ============================================================
   SHADOW ON SEARCH / FILTER / DROPDOWN CONTROLS — glass + soft cyan glow
   Buttons and inputs that act as "search" or "filter" controls get the
   same layered shadow as cards so they read as floating glass elements,
   consistent with the rest of the design system.
   ============================================================ */

/* Generic .dropdown-toggle (Bootstrap dropdown caret buttons) */
html.dark-mode .btn.dropdown-toggle,
html.dark-mode .dropdown-toggle.btn {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 3px 10px rgba(0,0,0,0.28),
        0 0 14px -4px rgba(0,229,255,0.14) !important;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
/* Native <select> — form-select & select.form-control */
html.dark-mode .form-select,
html.dark-mode select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300E5FF' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px 8px !important;
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.40),
        inset 0 2px 8px rgba(0,229,255,0.12),
        0 3px 10px rgba(0,0,0,0.28),
        0 0 14px -4px rgba(0,229,255,0.14) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 2.5rem !important;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
/* Styling native <option> elements (limited cross-browser support) */
html.dark-mode .form-select option,
html.dark-mode select.form-control option {
    background: #071A24 !important;
    color: var(--text-secondary) !important;
    padding: 8px 12px !important;
}
html.dark-mode .form-select option:checked,
html.dark-mode select.form-control option:checked,
html.dark-mode .form-select option:hover,
html.dark-mode select.form-control option:hover {
    background: rgba(0,229,255,0.20) !important;
    color: var(--primary) !important;
}
html.dark-mode .btn.dropdown-toggle:hover,
html.dark-mode .dropdown-toggle.btn:hover,
html.dark-mode .btn.dropdown-toggle:focus,
html.dark-mode .dropdown-toggle.btn:focus {
    border-color: transparent !important;
    background: var(--glass-strong) !important;
    color: var(--primary) !important;
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
}
html.dark-mode .btn.dropdown-toggle:focus,
html.dark-mode .dropdown-toggle.btn:focus,
html.dark-mode .form-select:focus,
html.dark-mode select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300E5FF' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
    border-color: transparent !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255, 0.16),
        0 0 18px rgba(0,229,255, 0.24),
        0 4px 12px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    outline: none;
}
html.dark-mode .form-select:hover,
html.dark-mode select.form-control:hover {
    border-color: transparent !important;
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transform: translateY(-2px);
}
/* When dropdown is open — keep dark glass background, no white */
html.dark-mode .show > .btn.dropdown-toggle,
html.dark-mode .show > .dropdown-toggle.btn {
    background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
/* Bootstrap dropdown caret — keep visible but tinted cyan */
html.dark-mode .dropdown-toggle::after {
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.30));
    transition: filter .3s ease;
}
html.dark-mode .dropdown-toggle:hover::after,
html.dark-mode .show > .dropdown-toggle::after {
    filter: drop-shadow(0 0 6px rgba(0,229,255,0.50));
}

/* Generic search input (not DataTables) — e.g. .form-control[type=search],
   search bars in custom filters. Glass, transparent, with border glow. */
html.dark-mode input[type="search"],
html.dark-mode .search-pill,
html.dark-mode input.search-pill,
html.dark-mode .filter-lomba-wrap select,
html.dark-mode .filter-lomba-wrap input {
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(0,229,255, 0.20) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        inset 0 0 0 2px rgba(0,229,255,0.35),
        inset 0 2px 8px rgba(0,229,255,0.10),
        0 4px 16px rgba(0,0,0,0.35),
        0 0 20px -4px rgba(0,229,255,0.20) !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}
html.dark-mode input[type="search"]:focus,
html.dark-mode .search-pill:focus,
html.dark-mode .filter-lomba-wrap input:focus,
html.dark-mode .filter-lomba-wrap select:focus {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255, 0.18),
        0 0 28px rgba(0,229,255, 0.30),
        0 6px 20px rgba(0,0,0,0.40),
        inset 0 0 0 2px rgba(0,229,255,0.50),
        inset 0 2px 8px rgba(0,229,255,0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
/* Placeholder brighter — more visible than usual text-muted */
html.dark-mode input[type="search"]::placeholder,
html.dark-mode .search-pill::placeholder,
html.dark-mode input.search-pill::placeholder,
html.dark-mode .filter-lomba-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Filter-lomba-wrap specific — pill shape with icon */
html.dark-mode .filter-lomba-wrap .form-select,
html.dark-mode .filter-lomba-wrap select {
    border-radius: 18px !important;
    padding: 0 32px 0 34px !important;
}
html.dark-mode .filter-lomba-wrap .filter-icon-prepend {
    color: var(--primary) !important;
    text-shadow: 0 0 8px rgba(0,229,255,0.40);
}
html.dark-mode .search-pill,
html.dark-mode input.search-pill {
    border-radius: 18px !important;
    padding: 0 16px 0 36px !important;
}
/* Override filter-lomba-wrap inline background-image arrow with cyan */
html.dark-mode .filter-lomba-wrap .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300E5FF' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}
html.dark-mode .filter-lomba-wrap .form-select option {
    background: #071A24 !important;
    color: var(--text-secondary) !important;
}

/* Generic .btn-outline-* (info/warning/danger/success) glass + shadow baseline */
html.dark-mode .btn-outline-info,
html.dark-mode .btn-outline-warning,
html.dark-mode .btn-outline-danger,
html.dark-mode .btn-outline-success {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 3px 10px rgba(0,0,0,0.25),
        0 0 12px -4px rgba(0,229,255,0.10) !important;
    transition: all .3s ease !important;
}
html.dark-mode .btn-outline-info:hover,
html.dark-mode .btn-outline-warning:hover,
html.dark-mode .btn-outline-danger:hover,
html.dark-mode .btn-outline-success:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 16px rgba(0,229,255,0.18),
        0 6px 16px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Select2 dropdown arrow tint */
html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--primary) transparent transparent !important;
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.30));
}

/* ============================================================
   2FA CHALLENGE PAGE (auth/2fa-challenge.blade.php)
   Overrides inline green theme → premium enterprise cyan
   Higher specificity via body to beat inline !important.
   ============================================================ */
/* Page background */
html.dark-mode body .page-wrap {
    background:
        radial-gradient(ellipse at 18% 8%, #071A24 0%, transparent 55%),
        radial-gradient(ellipse at 82% 92%, #0A2530 0%, transparent 55%),
        #071A24 !important;
}
html.dark-mode body .bg-grid {
    background-image:
        linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px) !important;
}
html.dark-mode body .vignette {
    background:
        radial-gradient(ellipse at center, transparent 38%, rgba(7,26,36,0.92) 100%),
        radial-gradient(ellipse at center, rgba(0,229,255,0.04) 0%, transparent 55%) !important;
}
html.dark-mode body .ambient-halo {
    background: radial-gradient(circle, rgba(0,229,255,0.06) 0%, rgba(61,169,252,0.03) 35%, transparent 65%) !important;
}
html.dark-mode body .particle {
    background: #00E5FF !important;
    box-shadow: 0 0 8px rgba(0,229,255,0.5) !important;
}
html.dark-mode body .hologram-shield {
    color: #00E5FF !important;
    opacity: 0.08 !important;
}
html.dark-mode body .hologram-shield::after {
    background: linear-gradient(to bottom, #00E5FF 0%, transparent 92%) !important;
    opacity: 0.10 !important;
}
html.dark-mode body .radar-ring {
    border-color: rgba(0,229,255,0.08) !important;
}
html.dark-mode body .float-icon {
    color: #00E5FF !important;
    opacity: 0.07 !important;
}
html.dark-mode body .float-icon i {
    text-shadow: 0 0 20px rgba(0,229,255,0.3), 0 0 40px rgba(0,229,255,0.1) !important;
}
html.dark-mode body .scanline {
    background: linear-gradient(to bottom, transparent, rgba(0,229,255,0.04), transparent) !important;
}
html.dark-mode body .hud-bracket {
    opacity: 0.35 !important;
}
html.dark-mode body .hud-bracket--tl {
    border-top-color: #00E5FF !important;
    border-left-color: #00E5FF !important;
}
html.dark-mode body .hud-bracket--tr {
    border-top-color: #00E5FF !important;
    border-right-color: #00E5FF !important;
}
html.dark-mode body .hud-bracket--bl {
    border-bottom-color: #00E5FF !important;
    border-left-color: #00E5FF !important;
}
html.dark-mode body .hud-bracket--br {
    border-bottom-color: #00E5FF !important;
    border-right-color: #00E5FF !important;
}
html.dark-mode body .card-wrap::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg, transparent 200deg,
        #00E5FF 230deg, #2EA8FF 255deg, rgba(0,229,255,0.3) 275deg,
        transparent 300deg, transparent 360deg
    ) !important;
    opacity: 0.45 !important;
}
html.dark-mode body .card-wrap::after {
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg, transparent 200deg,
        rgba(0,229,255,0.5) 230deg, rgba(46,168,255,0.3) 255deg,
        rgba(0,229,255,0.5) 275deg, transparent 300deg, transparent 360deg
    ) !important;
    opacity: 0.28 !important;
}
html.dark-mode body .card-wrap:hover::before { opacity: 0.70 !important; }
html.dark-mode body .card-wrap:hover::after { opacity: 0.50 !important; }
html.dark-mode body .card-security {
    background: linear-gradient(160deg, rgba(7,26,36,0.72), rgba(10,37,48,0.65)) !important;
    border-color: rgba(0,229,255,0.20) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.60),
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 60px rgba(0,229,255,0.06) !important;
}
html.dark-mode body .card-wrap:hover .card-security {
    background: linear-gradient(160deg, rgba(7,26,36,0.78), rgba(10,37,48,0.70)) !important;
    border-color: rgba(0,229,255,0.35) !important;
    box-shadow:
        0 32px 100px rgba(0,0,0,0.70),
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 90px rgba(0,229,255,0.12) !important;
}
html.dark-mode body .icon-shield-wrap svg {
    filter: drop-shadow(0 0 22px rgba(0,229,255,0.35)) !important;
}
html.dark-mode body .icon-shield-wrap svg path {
    stroke: #00E5FF !important;
}
html.dark-mode body .icon-shield-bg {
    background: radial-gradient(circle, rgba(0,229,255,0.15) 0%, transparent 70%) !important;
}
html.dark-mode body .icon-shield-wrap svg stop {
    stop-color: #00E5FF !important;
}
html.dark-mode body .header-title {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(0,229,255,0.08);
}
html.dark-mode body .header-subtitle {
    color: rgba(209, 213, 219, 0.85) !important;
}
html.dark-mode body .trust-badge {
    color: #00E5FF !important;
    background: rgba(0,229,255,0.06) !important;
    border-color: rgba(0,229,255,0.15) !important;
}
html.dark-mode body .trust-badge .pulse-dot {
    background: #00E5FF !important;
    box-shadow: 0 0 10px rgba(0,229,255,0.6) !important;
}
html.dark-mode body .form-group-custom label {
    color: rgba(209, 213, 219, 0.9) !important;
}
html.dark-mode body .form-group-custom .form-control {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(0,229,255,0.20) !important;
    color: #ffffff !important;
    caret-color: #00E5FF !important;
    box-shadow: 0 0 12px rgba(0,229,255,0.04) !important;
}
html.dark-mode body .form-group-custom .form-control::placeholder {
    color: rgba(209, 213, 219, 0.25) !important;
}
html.dark-mode body .form-group-custom .form-control:focus {
    border-color: #00E5FF !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255,0.15),
        0 0 28px rgba(0,229,255,0.12) !important;
    background: rgba(255,255,255,0.06) !important;
}
html.dark-mode body .toggle-track {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode body .toggle-track .toggle-thumb {
    background: rgba(255,255,255,0.35) !important;
}
html.dark-mode body .toggle-track.active {
    background: rgba(0,229,255,0.12) !important;
    border-color: #00E5FF !important;
    box-shadow: 0 0 18px rgba(0,229,255,0.18) !important;
}
html.dark-mode body .toggle-track.active .toggle-thumb {
    background: #00E5FF !important;
    box-shadow: 0 0 18px rgba(0,229,255,0.5) !important;
}
html.dark-mode body .toggle-label {
    color: rgba(209, 213, 219, 0.8) !important;
}
html.dark-mode body .toggle-label.active-label {
    color: #00E5FF !important;
}
html.dark-mode body .btn-verify {
    background: linear-gradient(135deg, #00E5FF, #2EA8FF) !important;
    box-shadow:
        0 4px 24px rgba(0,229,255,0.30),
        0 0 40px rgba(0,229,255,0.08) !important;
}
html.dark-mode body .btn-verify:hover {
    background: linear-gradient(135deg, #00FFD5, #00E5FF) !important;
    box-shadow:
        0 10px 44px rgba(0,229,255,0.45),
        0 0 70px rgba(0,229,255,0.18) !important;
}
html.dark-mode body .alert-cs--error {
    background: rgba(251,113,133,0.10) !important;
    border-color: rgba(251,113,133,0.15) !important;
    color: #FB7185 !important;
}
html.dark-mode body .alert-cs--success {
    background: rgba(52,211,153,0.10) !important;
    border-color: rgba(52,211,153,0.15) !important;
    color: #34D399 !important;
}
html.dark-mode body .footer-auth {
    border-top-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode body .footer-auth a {
    color: rgba(209, 213, 219, 0.85) !important;
}
html.dark-mode body .footer-auth a:hover {
    color: #00E5FF !important;
}
html.dark-mode body .footer-auth .copyright {
    color: rgba(148, 163, 184, 0.6) !important;
}
html.dark-mode body .theme-toggle--2fa {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.25),
        0 0 14px rgba(0,229,255,0.10) !important;
    color: #00E5FF !important;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}
html.dark-mode body .theme-toggle--2fa:hover {
    background: linear-gradient(160deg, rgba(0,229,255,0.18), rgba(0,229,255,0.06)) !important;
    border-color: rgba(0,229,255,0.35) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 22px rgba(0,229,255,0.35),
        0 8px 20px rgba(0,0,0,0.35) !important;
}

/* ============================================================
   END — Dark Mode Premium
   ============================================================ */