/* ============================================
   GLOBAL STYLES & CSS VARIABLES - SEKATA
   Palet Premium: Pengadilan Agama Indonesia
   REVISI KETERBACAAN: Kontras lebih kuat di Light Mode
   ============================================ */

:root {
    /* DARK THEME */
    --bg-dark-1: #0a0f1e;
    --bg-dark-2: #0f1f3d;
    --bg-dark-3: #071428;
    --bg-dark-4: #111d35;
    --text-main: #e8dfc8;
    --text-gold: #f0c060;
    --glass-bg: rgba(240, 192, 96, 0.04);
    --glass-border: rgba(240, 192, 96, 0.14);
}

/* ────────────────────────────────────────────
   DARK THEME – Body Default
   ──────────────────────────────────────────── */
body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    color: var(--text-main);
    background: linear-gradient(-45deg, #0a0f1e, #0f1f3d, #071428, #111d35);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ────────────────────────────────────────────
   LIGHT MODE – Body
   Putih bersih dengan aksen emas — KETERBACAAN TINGGI
   ──────────────────────────────────────────── */
body.light-mode {
    color: #1a1a2e !important;
    /* Background: warm off-white/ivory untuk menyatu dengan card krem (#e8dfc8) */
    background: linear-gradient(160deg, #fdfcfb 0%, #f4f0e8 40%, #faf8f5 70%, #efeae0 100%) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 25s ease infinite !important;
}

/* ────────────────────────────────────────────
   GLASS PANEL
   ──────────────────────────────────────────── */
.glass-panel {
    background: var(--glass-bg, rgba(240, 192, 96, 0.04));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border, rgba(240, 192, 96, 0.14));
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

body.light-mode .glass-panel {
    /* Navbar/card kaca di light mode: putih bersih, border emas halus */
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(212, 160, 23, 0.25) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Heading
   ──────────────────────────────────────────── */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: #0f1f3d !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Koreksi warna teks aksen
   Teks emas/zamrud diubah ke navy agar terbaca di bg terang
   ──────────────────────────────────────────── */
body.light-mode .text-emerald-300,
body.light-mode .text-emerald-400,
body.light-mode .text-emerald-600 {
    color: #00695c !important;
}

body.light-mode .text-emerald-200\/60,
body.light-mode .text-emerald-100\/80,
body.light-mode .text-emerald-100\/70,
body.light-mode .text-emerald-100\/60,
body.light-mode .text-emerald-100\/50,
body.light-mode .text-emerald-100\/40,
body.light-mode .text-emerald-100\/30,
body.light-mode .text-emerald-100\/20,
body.light-mode .text-emerald-100\/10,
body.light-mode .text-emerald-200,
body.light-mode .text-emerald-100,
body.light-mode .text-sky-200\/80,
body.light-mode .text-sky-100\/80,
body.light-mode .text-sky-100\/70,
body.light-mode .text-sky-100\/60,
body.light-mode .text-sky-100\/50,
body.light-mode .text-sky-100,
body.light-mode .text-sky-300,
body.light-mode .text-blue-100\/80,
body.light-mode .text-blue-100\/70,
body.light-mode .text-blue-200,
body.light-mode .text-blue-300,
body.light-mode .text-blue-300\/70,
body.light-mode .text-white\/80,
body.light-mode .text-white\/70,
body.light-mode .text-white\/60,
body.light-mode .text-white\/50,
body.light-mode .text-white\/40,
body.light-mode .text-white\/30,
body.light-mode .text-white\/20,
body.light-mode .text-white\/10,
body.light-mode .text-slate-100\/80,
body.light-mode .text-slate-100\/70,
body.light-mode .text-slate-100\/50,
body.light-mode .text-slate-400,
body.light-mode .text-slate-500 {
    color: #4a5a7a !important;
    /* Navy terang — cukup kontras di krem */
}

body.light-mode .text-white {
    color: #0f1f3d !important;
    /* Navy gelap */
}

body.light-mode .text-slate-400 {
    color: #5a6a8a !important;
}

body.light-mode .text-sky-300,
body.light-mode .text-blue-300 {
    color: #1a3d80 !important;
}

body.light-mode .text-glow {
    text-shadow: none !important;
}

body.light-mode .text-muted {
    color: #6b7a96 !important;
}

body.light-mode .text-red-300 {
    color: #b91c1c !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Navbar Brand Override
   Teks SEKATA di navbar harus kontras di atas putih
   ──────────────────────────────────────────── */
body.light-mode .text-yellow-400 {
    color: #b8860b !important;
    /* Dark goldenrod – lebih gelap = lebih jelas */
}

body.light-mode .text-yellow-100\/60 {
    color: #6b5800 !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Badge Status
   ──────────────────────────────────────────── */
body.light-mode .bg-emerald-500\/20 {
    background-color: #e0f2f0 !important;
    color: #00695c !important;
}

body.light-mode .bg-sky-500\/20,
body.light-mode .bg-sky-500\/50 {
    background-color: #e8eef8 !important;
    color: #1a3d80 !important;
    border-color: #93acd9 !important;
}

body.light-mode .bg-red-500\/20 {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

body.light-mode .bg-white\/5,
body.light-mode .bg-white\/10,
body.light-mode .bg-black\/5,
body.light-mode .bg-black\/10,
body.light-mode .bg-black\/20 {
    background-color: rgba(212, 160, 23, 0.04) !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Dividers
   ──────────────────────────────────────────── */
body.light-mode .divide-white\/10,
body.light-mode .divide-slate-800,
body.light-mode .divide-emerald-500\/10 {
    border-color: #d1c9b0 !important;
}

body.light-mode .border-white\/10 {
    border-color: #d4c89a !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Form Elements
   Input di light mode: latar putih bersih, border navy
   ──────────────────────────────────────────── */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: #b8b0a0 !important;
    color: #0f1f3d !important;
}

/* ────────────────────────────────────────────
   LIGHT MODE – Buttons inner text
   ──────────────────────────────────────────── */
body.light-mode .bg-gray-900 .text-white,
body.light-mode .bg-slate-900 .text-white,
body.light-mode .bg-emerald-600 .text-white,
body.light-mode .bg-blue-600 .text-white,
body.light-mode .bg-indigo-600 .text-white,
body.light-mode .bg-sky-600 .text-white,
body.light-mode .bg-emerald-500 .text-white,
body.light-mode .bg-sky-500 .text-white,
body.light-mode .bg-red-500 .text-white {
    color: #f5f0e8 !important;
}

/* ────────────────────────────────────────────
   TEXT-GLOW (Dark Mode)
   ──────────────────────────────────────────── */
.text-glow {
    text-shadow: 0 0 18px rgba(240, 192, 96, 0.55);
}

/* ────────────────────────────────────────────
   CUSTOM SCROLLBAR
   ──────────────────────────────────────────── */
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(240, 192, 96, 0.04);
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 23, 0.45);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 160, 23, 0.75);
}

/* ────────────────────────────────────────────
   FORM ELEMENTS – Default Dark Mode
   ──────────────────────────────────────────── */
input,
select,
textarea {
    background: rgba(240, 192, 96, 0.05);
    border: 1px solid rgba(240, 192, 96, 0.12);
    color: var(--text-main);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(212, 160, 23, 0.55);
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.18);
}

/* Styling Option Dropdown yang elegan */
body.light-mode select option {
    background-color: #ffffff;
    color: #1a3d80;
    font-weight: 600;
}

body:not(.light-mode) select option {
    background-color: #0f1f3d;
    color: #f0c060;
    font-weight: 600;
}

/* Fix Browser Autofill Bug */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f8f5ed inset !important;
    -webkit-text-fill-color: #0f1f3d !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ────────────────────────────────────────────
   HELPERS
   ──────────────────────────────────────────── */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 160, 23, 0.45) rgba(240, 192, 96, 0.04);
}

.text-muted {
    color: rgba(232, 223, 200, 0.6) !important;
}

/* Custom Password Toggle */
.btn-toggle-password {
    color: #4a5a7a !important;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
}

.btn-toggle-password:hover {
    color: #0f1f3d !important;
}

/* ────────────────────────────────────────────
   TABEL DASHBOARD (light mode override)
   ──────────────────────────────────────────── */
/* Override .bg-white dihapus agar tailwind white (#e8dfc8) bisa muncul dengan benar */


/* FOUC match — sesuai dengan light-mode background biru-abu muda */
body.light-mode .text-slate-500 {
    color: #4b5563 !important;
}

body.light-mode .text-slate-600 {
    color: #374151 !important;
}

body.light-mode .text-slate-700 {
    color: #1f2937 !important;
}

body.light-mode .text-slate-800 {
    color: #111827 !important;
}

body.light-mode .text-slate-900 {
    color: #0f172a !important;
}