/* ==========================================================================
   PPDB BKN - THEME
   --------------------------------------------------------------------------
   Single source of truth untuk warna & komponen visual.

   1. Design token (brand + semantic) - Light Mode
   2. Design token (brand + semantic) - Dark Mode (prefers-color-scheme)
   3. Base element (html, body, scrollbar, form control native, selection)
   4. Dark bridge - memetakan utility Tailwind "light" ke token dark,
      sehingga SELURUH halaman ikut menyesuaikan otomatis.
   5. SweetAlert2 dark theme

   Memuat file ini WAJIB sebelum style.css.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS - LIGHT MODE (default)
   ========================================================================== */
:root {
    color-scheme: light;

    /* --- Brand ---
       Versi RGB dipakai Tailwind (`rgb(var(--navy-rgb) / <alpha-value>)`)
       agar class bg-navy / text-navy / from-navy ikut berubah di Dark Mode. */
    --navy-rgb: 30 58 138;
    --navy-600-rgb: 30 64 175;
    --navy-700-rgb: 29 59 143;
    --navy-800-rgb: 49 46 129;
    --gold-rgb: 251 191 36;
    --gold-600-rgb: 245 158 11;
    --gold-700-rgb: 217 119 6;

    --navy: #1e3a8a;
    --navy-600: #1e40af;
    --navy-700: #1d3b8f;
    --navy-800: #312e81;
    --gold: #fbbf24;
    --gold-600: #f59e0b;
    --gold-700: #d97706;

    /* --- Permukaan (surface) --- */
    --bg: #f8fafc;            /* background halaman */
    --bg-subtle: #f1f5f9;     /* inset: header tabel, isi input, strip */
    --surface: #ffffff;       /* card / panel */
    --surface-hover: #e2e8f0; /* state hover */
    --overlay: rgba(15, 23, 42, .55);

    /* --- Teks --- */
    --text: #0f172a;          /* judul */
    --text-strong: #1e293b;   /* body */
    --text-body: #334155;     /* paragraf */
    --text-muted: #475569;    /* teks sekunder */
    --text-subtle: #64748b;   /* caption / placeholder */
    --text-faint: #94a3b8;    /* italic / kosong */

    /* --- Garis --- */
    --border: #e2e8f0;
    --border-soft: #f1f5f9;
    --border-strong: #cbd5e1;

    /* --- Fokus & status --- */
    --ring: #1e3a8a;
    --focus-ring: rgba(30, 58, 138, .18);
    --brand-text: #1e3a8a;
    --brand-text-hover: #1e40af;
    --brand-contrast: #ffffff;
    --on-brand: #ffffff;

    /* --- Kontrol form (input / select / textarea) --- */
    --field-bg: #ffffff;
    --field-bg-hover: #ffffff;
    --field-text: #1e293b;
    --field-border: #e2e8f0;      /* border lembut */
    --field-border-hover: #c7d2fe;
    --field-border-focus: #6366f1;
    --field-ring: rgba(99, 102, 241, .16);
    --field-placeholder: #94a3b8;
    --field-shadow: 0 1px 2px 0 rgb(15 23 42 / .04);
    --field-shadow-focus: 0 1px 2px 0 rgb(15 23 42 / .04), 0 0 0 4px var(--field-ring);
    --field-bg-disabled: #f1f5f9;
    --field-text-disabled: #94a3b8;
    --field-border-disabled: #e2e8f0;
    --field-border-error: #f87171;
    --field-bg-error: #fff5f5;
    --field-ring-error: rgba(248, 113, 113, .16);
    --field-border-success: #34d399;
    --field-ring-success: rgba(16, 185, 129, .16);
    --field-icon: #94a3b8;

    /* --- Bayangan --- */
    --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / .06);
    --shadow-md: 0 4px 12px -2px rgb(15 23 42 / .10);
    --shadow-lg: 0 12px 28px -8px rgb(15 23 42 / .16);
    --shadow-brand: 0 10px 25px rgb(251 191 36 / .30);

    --wiz-done-bg: #dcfce7;
    --wiz-done-text: #166534;
}

/* ==========================================================================
   2. TOKENS - DARK MODE (otomatis mengikuti OS / browser)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Brand diselaraskan agar tetap hidup di atas dasar gelap */
        --navy-rgb: 58 92 199;
        --navy-600-rgb: 70 108 220;
        --navy-700-rgb: 48 78 176;
        --navy-800-rgb: 44 66 158;
        --gold-rgb: 252 211 77;
        --gold-600-rgb: 245 176 32;
        --gold-700-rgb: 217 148 20;

        --navy: #3a5cc7;
        --navy-600: #466cdc;
        --navy-700: #304eb0;
        --navy-800: #2c429e;
        --gold: #fcd34d;
        --gold-600: #f5b020;
        --gold-700: #d99414;

        /* --- Permukaan --- */
        --bg: #0a1020;          /* background halaman (paling gelap) */
        --bg-subtle: #101b30;   /* inset */
        --surface: #141f36;     /* card (paling terang dari lapisan dasar) */
        --surface-hover: #1a2740;
        --overlay: rgba(2, 6, 18, .68);

        /* --- Teks --- */
        --text: #f2f6ff;
        --text-strong: #e2e9f7;
        --text-body: #ccd7ea;
        --text-muted: #adbbd2;
        --text-subtle: #93a2bd;
        --text-faint: #7b8aa8;

        /* --- Garis --- */
        --border: #24324f;
        --border-soft: #1d2942;
        --border-strong: #33425f;

        /* --- Fokus & status --- */
        --ring: #60a5fa;
        --focus-ring: rgba(96, 165, 250, .25);
        --brand-text: #93c2fc;
        --brand-text-hover: #b7d7fd;
        --brand-contrast: #0a1020;
        --on-brand: #f2f6ff;

        /* --- Kontrol form --- */
        --field-bg: #101b30;          /* sedikit lebih gelap dari card agar "terbenam" */
        --field-bg-hover: #16233c;
        --field-text: #e2e9f7;
        --field-border: #24324f;
        --field-border-hover: #33425f;
        --field-border-focus: #60a5fa;
        --field-ring: rgba(96, 165, 250, .22);
        --field-placeholder: #6b7c9c;
        --field-shadow: 0 1px 2px 0 rgb(0 0 0 / .30);
        --field-shadow-focus: 0 1px 2px 0 rgb(0 0 0 / .30), 0 0 0 4px var(--field-ring);
        --field-bg-disabled: #0d1626;
        --field-text-disabled: #5b6b88;
        --field-border-disabled: #1d2942;
        --field-border-error: #f87171;
        --field-bg-error: #2a1620;
        --field-ring-error: rgba(248, 113, 113, .20);
        --field-border-success: #34d399;
        --field-ring-success: rgba(52, 211, 153, .20);
        --field-icon: #7b8aa8;

        /* --- Bayangan (lebih lembut agar tidak menyilaukan di atas dasar gelap) --- */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .40);
        --shadow-md: 0 6px 16px -4px rgb(0 0 0 / .55);
        --shadow-lg: 0 16px 36px -12px rgb(0 0 0 / .65);
        --shadow-brand: 0 10px 28px rgb(251 191 36 / .18);

        --wiz-done-bg: #1f533f;
        --wiz-done-text: #aef0c6;
    }
}

/* ==========================================================================
   3. BASE ELEMENT
   ========================================================================== */

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text-strong);
    transition: background-color .25s ease, color .25s ease;
    overflow-wrap: break-word;
}

hr {
    border-color: var(--border);
}

/* Gambar tidak boleh melebar keluar container */
img {
    max-width: 100%;
}

/* --- Scrollbar --- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 9999px;
    border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-faint);
}

::selection {
    background-color: var(--navy);
    color: var(--on-brand);
}

/* --- Fokus keyboard yang konsisten & terlihat di kedua mode --- */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* --- Kontrol form native (select / date / checkbox / option dropdown) --- */
input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
    opacity: 1;
}

select option {
    background-color: var(--surface);
    color: var(--text-strong);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: .65;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(1.4);
    }
}

/* Dark mode tidak boleh membuat gambar logo schoolwashed out */
@media (prefers-color-scheme: dark) {
    img[src$="logo.png"],
    img[src$="logo%20bkn.png"] {
        background-color: rgba(255, 255, 255, .92);
        border-radius: 8px;
    }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   4. DARK BRIDGE
   --------------------------------------------------------------------------
   Tailwind Play CDN mengcompile warna hex apa adanya ke dalam utility class,
   sehingga class seperti `bg-white` / `text-slate-700` / `border-slate-200`
   selalu bernilai versi LIGHT.

   Bagian ini menimpa utility tersebut HANYA ketika sistem dalam Dark Mode,
   memakai nilai token di atas. Efeknya:
     - Halaman yang sudah memakai `dark:` tetap aman (nilai dark-nya identik).
     - Halaman yang belum sempat dirombak otomatisadjust dengan benar.
     - Tidak ada lagi teks gelap di atas latar gelap, atau sebaliknya.

   Peta nilai:
     bg-<warna>-50/100/200  ->  permukaan gelap bernuansa
     text-<warna>-500..900  ->  nuansa terang (kebalikan dari mode terang)
     border/divide/ring 50..400 -> garis gelap bernuansa
     bg-500..700 & text-300/400 -> TIDAK diubah (sudah kontras di kedua mode)
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    /* ---------------------------------------------------------------
       4.1 NETRAL  (slate & gray disamakan agar tidak clash)
       --------------------------------------------------------------- */
    html .bg-white {
        background-color: #141f36;
    }

    /* Card "glass" (latar foto + backdrop-blur) harus ikut menjadi gelap,
       kalau tidak teks terang akan hilang di atas putih 95%. */
    html .bg-white\/95 {
        background-color: rgb(20 31 54 / .94);
    }

    html .bg-white\/90 {
        background-color: rgb(20 31 54 / .90);
    }

    html .bg-slate-50,
    html .bg-gray-50 {
        background-color: #0a1020;
    }

    html .bg-slate-100,
    html .bg-gray-100 {
        background-color: #101b30;
    }

    html .bg-slate-200,
    html .bg-gray-200 {
        background-color: #1a2740;
    }

    html .text-slate-900,
    html .text-gray-900 {
        color: #f2f6ff;
    }

    html .text-slate-800,
    html .text-gray-800 {
        color: #e2e9f7;
    }

    html .text-slate-700,
    html .text-gray-700,
    html .text-gray-600 {
        color: #ccd7ea;
    }

    html .text-slate-600,
    html .text-gray-500 {
        color: #adbbd2;
    }

    html .text-slate-500,
    html .text-gray-400 {
        color: #93a2bd;
    }

    html .text-slate-400 {
        color: #7b8aa8;
    }

    html .border-slate-100,
    html .border-gray-100,
    html .divide-slate-100 {
        border-color: #1d2942;
    }

    html .border-slate-200,
    html .border-gray-200,
    html .divide-slate-200 {
        border-color: #24324f;
    }

    html .border-slate-300,
    html .border-gray-300 {
        border-color: #33425f;
    }

    html .border-slate-400,
    html .border-gray-400 {
        border-color: #44557a;
    }

    /* ---------------------------------------------------------------
       4.1b GRADIENT dari warna netral / tint terang
       --------------------------------------------------------------- */
    html .from-white,
    html .to-white {
        --tw-gradient-from: #141f36 var(--tw-gradient-from-position);
        --tw-gradient-to: #141f36 var(--tw-gradient-to-position);
    }

    html .from-slate-50,
    html .to-slate-50,
    html .from-gray-50,
    html .to-gray-50 {
        --tw-gradient-from: #0a1020 var(--tw-gradient-from-position);
        --tw-gradient-to: #0a1020 var(--tw-gradient-to-position);
    }

    html .to-slate-100 {
        --tw-gradient-to: #101b30 var(--tw-gradient-to-position);
    }

    html .from-blue-50,
    html .to-blue-50 {
        --tw-gradient-from: #192a43 var(--tw-gradient-from-position);
        --tw-gradient-to: #192a43 var(--tw-gradient-to-position);
    }

    html .from-green-50,
    html .to-emerald-50 {
        --tw-gradient-from: #15332f var(--tw-gradient-from-position);
        --tw-gradient-to: #15332f var(--tw-gradient-to-position);
    }

    html .to-indigo-50 {
        --tw-gradient-from: #1e2643 var(--tw-gradient-from-position);
        --tw-gradient-to: #1e2643 var(--tw-gradient-to-position);
    }

    /* ---------------------------------------------------------------
       4.2 WARNA AKSEN - BLUE
       --------------------------------------------------------------- */
    html .bg-blue-50 {
        background-color: #192a43;
    }

    html .bg-blue-100 {
        background-color: #264166;
    }

    html .bg-blue-200 {
        background-color: #365c8d;
    }

    html .text-blue-500 {
        color: #6dacfa;
    }

    html .text-blue-600 {
        color: #90c0fc;
    }

    html .text-blue-700 {
        color: #93c2fc;
    }

    html .text-blue-800 {
        color: #b7d7fd;
    }

    html .text-blue-900 {
        color: #d2e6fe;
    }

    html .border-blue-100,
    html .border-blue-200 {
        border-color: #253e61;
    }

    html .border-blue-300 {
        border-color: #2b4a73;
    }

    html .border-blue-400 {
        border-color: #375e91;
    }

    /* ---------------------------------------------------------------
       4.3 WARNA AKSEN - INDIGO
       --------------------------------------------------------------- */
    html .bg-indigo-50 {
        background-color: #1e2643;
    }

    html .bg-indigo-100 {
        background-color: #313965;
    }

    html .bg-indigo-200 {
        background-color: #464f8c;
    }

    html .text-indigo-500 {
        color: #8b95f9;
    }

    html .text-indigo-600 {
        color: #a7affa;
    }

    html .text-indigo-700 {
        color: #a9b1fa;
    }

    html .text-indigo-800 {
        color: #c6cbfc;
    }

    html .text-indigo-900 {
        color: #dcdffd;
    }

    html .border-indigo-100,
    html .border-indigo-200 {
        border-color: #2e3761;
    }

    html .border-indigo-300 {
        border-color: #384072;
    }

    html .border-indigo-400 {
        border-color: #485190;
    }

    /* ---------------------------------------------------------------
       4.4 WARNA AKSEN - PURPLE
       --------------------------------------------------------------- */
    html .bg-purple-50 {
        background-color: #282443;
    }

    html .bg-purple-100 {
        background-color: #453666;
    }

    html .bg-purple-200 {
        background-color: #664b8e;
    }

    html .text-purple-600 {
        color: #d3a9fd;
    }

    html .text-purple-700 {
        color: #d4abfd;
    }

    html .text-purple-800 {
        color: #e3c8fe;
    }

    html .text-purple-900 {
        color: #edddfe;
    }

    html .border-purple-200 {
        border-color: #413462;
    }

    html .border-purple-300 {
        border-color: #503d74;
    }

    html .border-purple-400 {
        border-color: #694d92;
    }

    /* ---------------------------------------------------------------
       4.5 WARNA AKSEN - PINK
       --------------------------------------------------------------- */
    html .bg-pink-100 {
        background-color: #563150;
    }

    html .text-pink-700 {
        color: #f89fcd;
    }

    html .border-pink-200 {
        border-color: #512f4d;
    }

    html .border-pink-300 {
        border-color: #643659;
    }

    /* ---------------------------------------------------------------
       4.6 WARNA AKSEN - GREEN
       --------------------------------------------------------------- */
    html .bg-green-50 {
        background-color: #15332f;
    }

    html .bg-green-100 {
        background-color: #1f533f;
    }

    html .bg-green-200 {
        background-color: #2b7850;
    }

    html .text-green-500 {
        color: #58e18a;
    }

    html .text-green-600 {
        color: #80e8a6;
    }

    html .text-green-700 {
        color: #84e9a9;
    }

    html .text-green-800 {
        color: #aef0c6;
    }

    html .text-green-900 {
        color: #ccf6db;
    }

    html .border-green-200 {
        border-color: #1e4f3d;
    }

    html .border-green-300 {
        border-color: #236044;
    }

    html .border-green-400 {
        border-color: #2c7c52;
    }

    /* ---------------------------------------------------------------
       4.7 WARNA AKSEN - EMERALD
       --------------------------------------------------------------- */
    html .bg-emerald-50 {
        background-color: #123133;
    }

    html .bg-emerald-100 {
        background-color: #185047;
    }

    html .bg-emerald-200 {
        background-color: #20735d;
    }

    html .text-emerald-400 {
        color: #34d399;
    }

    html .text-emerald-600 {
        color: #71e0b8;
    }

    html .text-emerald-700 {
        color: #75e1ba;
    }

    html .text-emerald-800 {
        color: #a4ebd1;
    }

    html .text-emerald-900 {
        color: #c6f3e2;
    }

    html .border-emerald-100,
    html .border-emerald-200 {
        border-color: #174c44;
    }

    html .border-emerald-300 {
        border-color: #1b5b4e;
    }

    /* ---------------------------------------------------------------
       4.8 WARNA AKSEN - TEAL
       --------------------------------------------------------------- */
    html .bg-teal-100 {
        background-color: #165053;
    }

    html .text-teal-700 {
        color: #70e2d3;
    }

    html .text-teal-800 {
        color: #a1ece2;
    }

    /* ---------------------------------------------------------------
       4.9 WARNA AKSEN - CYAN
       --------------------------------------------------------------- */
    html .bg-cyan-50 {
        background-color: #0f3141;
    }

    html .bg-cyan-100 {
        background-color: #125062;
    }

    html .bg-cyan-200 {
        background-color: #177387;
    }

    html .text-cyan-600 {
        color: #64e0f3;
    }

    html .text-cyan-700 {
        color: #69e1f3;
    }

    html .text-cyan-900 {
        color: #c1f3fa;
    }

    html .border-cyan-200 {
        border-color: #124c5e;
    }

    html .border-cyan-300 {
        border-color: #145b6e;
    }

    /* ---------------------------------------------------------------
       4.10 WARNA AKSEN - SKY
       --------------------------------------------------------------- */
    html .bg-sky-50 {
        background-color: #122d43;
    }

    html .bg-sky-100 {
        background-color: #194965;
    }

    html .text-sky-700 {
        color: #78d2fa;
    }

    html .border-sky-200 {
        border-color: #194561;
    }

    /* ---------------------------------------------------------------
       4.11 WARNA AKSEN - RED
       --------------------------------------------------------------- */
    html .bg-red-50 {
        background-color: #31212d;
    }

    html .bg-red-100 {
        background-color: #57303a;
    }

    html .bg-red-200 {
        background-color: #824249;
    }

    html .text-red-500 {
        color: #f97c7c;
    }

    html .text-red-600 {
        color: #fa9c9c;
    }

    html .text-red-700 {
        color: #fa9e9e;
    }

    html .text-red-800 {
        color: #fcbfbf;
    }

    html .text-red-900 {
        color: #fdd7d7;
    }

    html .border-red-200 {
        border-color: #522f38;
    }

    html .border-red-300 {
        border-color: #65363f;
    }

    html .border-red-400 {
        border-color: #86434a;
    }

    /* ---------------------------------------------------------------
       4.12 WARNA AKSEN - ROSE
       --------------------------------------------------------------- */
    html .bg-rose-50 {
        background-color: #312130;
    }

    html .bg-rose-100 {
        background-color: #583040;
    }

    html .text-rose-500 {
        color: #fb7c8f;
    }

    html .text-rose-600 {
        color: #fc9caa;
    }

    html .text-rose-700 {
        color: #fc9eac;
    }

    html .text-rose-800 {
        color: #fdbfc8;
    }

    html .border-rose-200 {
        border-color: #532f3e;
    }

    /* ---------------------------------------------------------------
       4.13 WARNA AKSEN - ORANGE
       --------------------------------------------------------------- */
    html .bg-orange-50 {
        background-color: #312624;
    }

    html .bg-orange-100 {
        background-color: #583b29;
    }

    html .text-orange-500 {
        color: #fb9b4c;
    }

    html .text-orange-700 {
        color: #fcb57a;
    }

    html .text-orange-800 {
        color: #fdcea7;
    }

    html .border-orange-200 {
        border-color: #533828;
    }

    html .border-orange-300 {
        border-color: #66432b;
    }

    /* ---------------------------------------------------------------
       4.14 WARNA AKSEN - AMBER
       --------------------------------------------------------------- */
    html .bg-amber-50 {
        background-color: #312e21;
    }

    html .bg-amber-100 {
        background-color: #584921;
    }

    html .bg-amber-200 {
        background-color: #836922;
    }

    html .text-amber-600 {
        color: #fcd266;
    }

    html .text-amber-700 {
        color: #fcd36a;
    }

    html .text-amber-800 {
        color: #fde29c;
    }

    html .border-amber-200 {
        border-color: #534621;
    }

    html .border-amber-300 {
        border-color: #665422;
    }

    /* ---------------------------------------------------------------
       4.15 WARNA AKSEN - YELLOW
       --------------------------------------------------------------- */
    html .bg-yellow-50 {
        background-color: #31301e;
    }

    html .bg-yellow-100 {
        background-color: #574e1c;
    }

    html .bg-yellow-200 {
        background-color: #836f1b;
    }

    html .text-yellow-600 {
        color: #fcdb5b;
    }

    html .text-yellow-700 {
        color: #fcdc60;
    }

    html .text-yellow-800 {
        color: #fde896;
    }

    html .border-yellow-200 {
        border-color: #534a1d;
    }

    html .border-yellow-300 {
        border-color: #66591c;
    }

    /* ---------------------------------------------------------------
       4.16 STATE VARIAN: hover / focus / ring accent
       --------------------------------------------------------------- */
    html .hover\:bg-white:hover {
        background-color: #1a2740;
    }

    html .hover\:bg-slate-50:hover {
        background-color: #0a1020;
    }

    html .hover\:bg-slate-100:hover,
    html .focus\:bg-white:focus {
        background-color: #1a2740;
    }

    html .hover\:bg-slate-200:hover,
    html .hover\:bg-slate-300:hover {
        background-color: #24324f;
    }

    html .hover\:text-slate-600:hover {
        color: #ccd7ea;
    }

    html .hover\:text-slate-700:hover {
        color: #e2e9f7;
    }

    html .hover\:text-slate-800:hover {
        color: #f2f6ff;
    }

    html .hover\:border-slate-300:hover {
        border-color: #33425f;
    }

    html .hover\:border-slate-400:hover {
        border-color: #44557a;
    }

    html .hover\:bg-blue-50:hover {
        background-color: #192a43;
    }

    html .hover\:bg-blue-100:hover {
        background-color: #264166;
    }

    html .hover\:bg-green-50:hover {
        background-color: #15332f;
    }

    html .hover\:bg-green-100:hover {
        background-color: #1f533f;
    }

    html .hover\:bg-red-50:hover {
        background-color: #31212d;
    }

    html .hover\:bg-red-100:hover {
        background-color: #57303a;
    }

    html .hover\:bg-amber-50:hover {
        background-color: #312e21;
    }

    html .hover\:bg-amber-100:hover {
        background-color: #584921;
    }

    html .hover\:bg-purple-100:hover {
        background-color: #453666;
    }

    html .hover\:bg-rose-100:hover {
        background-color: #583040;
    }

    html .hover\:bg-orange-100:hover {
        background-color: #583b29;
    }

    html .hover\:text-blue-600:hover,
    html .hover\:text-blue-700:hover {
        color: #b7d7fd;
    }

    html .hover\:text-blue-800:hover,
    html .hover\:text-blue-900:hover {
        color: #d2e6fe;
    }

    html .hover\:text-green-700:hover,
    html .hover\:text-green-900:hover {
        color: #aef0c6;
    }

    html .hover\:text-green-300:hover {
        color: #ccf6db;
    }

    html .hover\:text-red-700:hover {
        color: #fcbfbf;
    }

    html .hover\:text-amber-700:hover {
        color: #fde29c;
    }

    html .hover\:text-yellow-600:hover {
        color: #fde896;
    }

    html .hover\:text-purple-900:hover {
        color: #edddfe;
    }

    html .hover\:border-blue-300:hover {
        border-color: #375e91;
    }

    html .hover\:border-red-300:hover {
        border-color: #65363f;
    }

    /* Emerald Equivalent Green */
    html .hover\:bg-emerald-100:hover {
        background-color: #1f533f;
    }

    /* Group hover: butuh specificity lebih tinggi dari `.group:hover .group-hover\:text-*` */
    html .group:hover .group-hover\:text-blue-700 {
        color: #93c2fc;
    }

    html .group:hover .group-hover\:text-slate-800 {
        color: #e2e9f7;
    }

    /* ---------------------------------------------------------------
       4.17 INPUT FILE: tombol "Choose File"
       --------------------------------------------------------------- */
    html .file\:bg-cyan-50::file-selector-button,
    html .file\:bg-green-50::file-selector-button,
    html .file\:bg-blue-50::file-selector-button,
    html .file\:bg-slate-100::file-selector-button {
        background-color: #233252;
        color: #e2e9f7;
    }

    html .hover\:file\:bg-cyan-100:hover::file-selector-button,
    html .hover\:file\:bg-green-100:hover::file-selector-button,
    html .hover\:file\:bg-blue-100:hover::file-selector-button,
    html .hover\:file\:bg-slate-200:hover::file-selector-button {
        background-color: #2d3f68;
        color: #f2f6ff;
    }

    /* Ring dekoratif bernuansa rendah (halo di belakang ikon) */
    html .ring-green-100,
    html .ring-emerald-100 {
        --tw-ring-color: #1e4f3d;
    }

    html .ring-red-100,
    html .ring-rose-100 {
        --tw-ring-color: #522f38;
    }

    html .ring-amber-100,
    html .ring-orange-300,
    html .ring-yellow-100 {
        --tw-ring-color: #534621;
    }

    html .ring-blue-100,
    html .ring-indigo-100 {
        --tw-ring-color: #253e61;
    }

    /* ---------------------------------------------------------------
       4.1a BRAND
       ---------------------------------------------------------------
       Warna navy/gold sudah memakai `rgb(var(--*-rgb) / <alpha-value>)`
       sehingga otomatis berubah di Dark Mode. Yang perlu dis_manual
       hanyalah pemakaian navy sebagai WARNA TEKS & focus ring. */
    html .text-navy {
        color: var(--brand-text);
    }

    html .hover\:text-navy:hover {
        color: var(--brand-text-hover);
    }

    html .focus\:border-navy:focus {
        border-color: var(--ring);
    }

    html .focus\:ring-navy:focus {
        --tw-ring-color: var(--ring);
    }

    html .focus\:ring-navy\/20:focus {
        --tw-ring-color: rgba(96, 165, 250, .28);
    }

    /* Sidebar / panel desktop */
    html .md\:border-slate-200 {
        border-color: #24324f;
    }
}

/* ==========================================================================
   5. SWEETALERT2 - DARK THEME
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    .swal2-popup {
        background: var(--surface);
        color: var(--text-strong);
        border: 1px solid var(--border);
    }

    .swal2-title {
        color: var(--text);
    }

    .swal2-html-container {
        color: var(--text-body);
    }

    .swal2-icon.swal2-success {
        background-color: rgb(31 83 63 / .35);
        border-color: #2b7850;
    }

    .swal2-icon.swal2-error {
        background-color: rgb(87 48 58 / .35);
        border-color: #824249;
    }

    .swal2-icon.swal2-warning {
        background-color: rgb(88 73 33 / .35);
        border-color: #836922;
    }

    .swal2-icon.swal2-info {
        background-color: rgb(38 65 102 / .35);
        border-color: #365c8d;
    }

    .swal2-confirm,
    .swal2-cancel {
        border-radius: .625rem;
        font-weight: 600;
    }

    .swal2-cancel {
        background: var(--bg-subtle);
        color: var(--text-strong);
    }
}