/* SIAP Rebuilt Custom Style */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

code, kbd, pre, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

[x-cloak] {
    display: none !important;
}

/* ========================================================
   THEME 1: HIJAU MINT SOFT (DEFAULT)
   Body: #F0FDF4 | Teks: #14532D
   Header & Mobile Header: #DCFCE7 | Teks: #14532D | Border: #BBF7D0
   Navbar / Topbar: #FFFFFF | Teks: #166534 | Border: #E2E8F0
   Sidebar: #ECFDF5 | Teks: #166534 | Border: #D1FAE5
   Sidebar Active: #16A34A | Teks: #FFFFFF
   Footer: #DCFCE7 | Teks: #14532D | Border: #BBF7D0
   Konten / Card / Tabel: #FFFFFF | Teks: #1F2937 | Border: #D1D5DB
   Form Input: #FFFFFF | Teks: #1F2937 | Border: #D1D5DB | Focus: #059669
   Tombol Utama: #059669 | Teks: #FFFFFF | Border/Hover: #047857
   Modal: #FFFFFF | Teks: #1F2937 | Border: #D1D5DB
   ======================================================== */
body.theme-mint-white,
html.theme-mint-white,
body.theme-mint-white.bg-slate-900,
body.theme-mint-white.bg-slate-950 {
    background-color: #F0FDF4 !important;
    color: #14532D !important;
}

/* Header & Mobile Header: #DCFCE7 with text #14532D & border #BBF7D0 */
body.theme-mint-white header.md\:hidden,
body.theme-mint-white .mobile-header,
body.theme-mint-white .md\:hidden.bg-slate-800 {
    background-color: #DCFCE7 !important;
    color: #14532D !important;
    border-bottom: 1px solid #BBF7D0 !important;
}
body.theme-mint-white header.md\:hidden *,
body.theme-mint-white .mobile-header * {
    color: #14532D !important;
}

/* Navbar / Topbar: #FFFFFF dengan teks #166534 & border #E2E8F0 */
body.theme-mint-white header.hidden.md\:flex,
body.theme-mint-white .app-navbar {
    background-color: #FFFFFF !important;
    color: #166534 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
body.theme-mint-white header.hidden.md\:flex * {
    color: #166534 !important;
}

/* Sidebar: #ECFDF5 dengan teks #166534 & border #D1FAE5 */
body.theme-mint-white aside,
body.theme-mint-white .app-sidebar {
    background-color: #ECFDF5 !important;
    color: #166534 !important;
    border-right: 1px solid #D1FAE5 !important;
    box-shadow: 0 4px 12px -2px rgba(20, 83, 45, 0.05) !important;
}
body.theme-mint-white aside .border-emerald-900,
body.theme-mint-white aside .border-b,
body.theme-mint-white aside .border-t,
body.theme-mint-white aside .border-slate-700 {
    border-color: #D1FAE5 !important;
}
body.theme-mint-white aside .text-white,
body.theme-mint-white aside .text-slate-100,
body.theme-mint-white aside .text-slate-200,
body.theme-mint-white aside .text-emerald-100,
body.theme-mint-white aside .text-emerald-200,
body.theme-mint-white aside .text-emerald-300,
body.theme-mint-white aside .text-emerald-400,
body.theme-mint-white aside .text-emerald-500 {
    color: #166534 !important;
}
body.theme-mint-white aside .bg-slate-800,
body.theme-mint-white aside .bg-slate-900,
body.theme-mint-white aside .bg-emerald-900\/30,
body.theme-mint-white aside .bg-emerald-900\/40 {
    background-color: #DCFCE7 !important;
    border-color: #BBF7D0 !important;
}

/* Active Navigation Item: #16A34A dengan teks #FFFFFF */
body.theme-mint-white aside a.bg-teal-600,
body.theme-mint-white aside button.bg-emerald-600,
body.theme-mint-white .nav-item.active {
    background-color: #16A34A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
body.theme-mint-white aside a:hover,
body.theme-mint-white aside button:hover {
    background-color: #DCFCE7 !important;
    color: #14532D !important;
}

/* Footer: #DCFCE7 dengan teks #14532D & border #BBF7D0 */
body.theme-mint-white footer,
body.theme-mint-white .app-footer {
    background-color: #DCFCE7 !important;
    color: #14532D !important;
    border-top: 1px solid #BBF7D0 !important;
}
body.theme-mint-white footer *,
body.theme-mint-white .app-footer * {
    color: #14532D !important;
}

/* Content Area, Cards & Tables: #FFFFFF with text #1F2937 & border #D1D5DB */
body.theme-mint-white main .bg-slate-800,
body.theme-mint-white main .bg-slate-800\/80,
body.theme-mint-white main .bg-slate-800\/50,
body.theme-mint-white main .bg-slate-800\/60,
body.theme-mint-white main .bg-slate-900,
body.theme-mint-white main .bg-slate-900\/80,
body.theme-mint-white main .bg-slate-900\/60,
body.theme-mint-white main .bg-slate-900\/40,
body.theme-mint-white main .bg-slate-950,
body.theme-mint-white main .bg-slate-950\/80 {
    background-color: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}
body.theme-mint-white main .bg-slate-700,
body.theme-mint-white main .bg-slate-700\/40,
body.theme-mint-white main .bg-slate-700\/60 {
    background-color: #F0FDF4 !important;
    border-color: #D1D5DB !important;
    color: #14532D !important;
}
body.theme-mint-white main .text-white,
body.theme-mint-white main .text-slate-100,
body.theme-mint-white main .text-slate-200 {
    color: #1F2937 !important;
}
body.theme-mint-white main .text-slate-300,
body.theme-mint-white main .text-slate-400 {
    color: #166534 !important;
}
body.theme-mint-white main .text-slate-500 {
    color: #059669 !important;
}
body.theme-mint-white main .border-slate-700,
body.theme-mint-white main .border-slate-700\/80,
body.theme-mint-white main .border-slate-700\/60,
body.theme-mint-white main .border-slate-700\/70,
body.theme-mint-white main .border-slate-800,
body.theme-mint-white main .border-slate-800\/60 {
    border-color: #D1D5DB !important;
}

/* Form Input: #FFFFFF with text #1F2937 & border #D1D5DB | Focus #059669 */
body.theme-mint-white input,
body.theme-mint-white select,
body.theme-mint-white textarea {
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    border-color: #D1D5DB !important;
}
body.theme-mint-white input:focus,
body.theme-mint-white select:focus,
body.theme-mint-white textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
}

/* Tombol Utama: #059669 with text #FFFFFF & hover #047857 */
body.theme-mint-white .bg-teal-600,
body.theme-mint-white .bg-emerald-600,
body.theme-mint-white button.btn-primary {
    background-color: #059669 !important;
    color: #FFFFFF !important;
    border-color: #047857 !important;
}
body.theme-mint-white .bg-teal-600:hover,
body.theme-mint-white .bg-emerald-600:hover,
body.theme-mint-white button.btn-primary:hover {
    background-color: #047857 !important;
}
body.theme-mint-white .text-teal-400 {
    color: #059669 !important;
}

/* Modals: #FFFFFF with text #1F2937 & border #D1D5DB */
body.theme-mint-white .fixed .bg-slate-800 {
    background-color: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
}
body.theme-mint-white .fixed .bg-slate-800 * {
    color: #1F2937 !important;
}


/* ========================================================
   THEME 2: HIJAU & PUTIH EMERALD (LEMBAGA)
   Body: #F8FAFC | Teks: #064E3B
   Header & Mobile Header: #047857 | Teks: #FFFFFF | Border: #065F46
   Navbar / Topbar: #065F46 | Teks: #FFFFFF | Border: #064E3B
   Sidebar: #064E3B | Teks: #ECFDF5 | Border: #065F46
   Sidebar Active: #047857 | Teks: #FFFFFF | Border: #10B981
   Footer: #064E3B | Teks: #FFFFFF | Border: #065F46
   Konten / Card / Tabel: #FFFFFF | Teks: #0F172A | Border: #D1D5DB
   Form Input: #FFFFFF | Teks: #111827 | Border: #CBD5E1 | Focus: #059669
   Tombol Utama: #047857 | Teks: #FFFFFF | Border/Hover: #065F46
   Modal: #FFFFFF | Teks: #0F172A | Border: #CBD5E1
   ======================================================== */
body.theme-emerald-white,
html.theme-emerald-white,
body.theme-emerald-white.bg-slate-900,
body.theme-emerald-white.bg-slate-950 {
    background-color: #F8FAFC !important;
    color: #064E3B !important;
}

/* Header & Mobile Header: #047857 with text #FFFFFF & border #065F46 */
body.theme-emerald-white header.md\:hidden,
body.theme-emerald-white .mobile-header,
body.theme-emerald-white .md\:hidden.bg-slate-800 {
    background-color: #047857 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #065F46 !important;
}
body.theme-emerald-white header.md\:hidden *,
body.theme-emerald-white .mobile-header * {
    color: #FFFFFF !important;
}

/* Navbar / Topbar: #065F46 dengan teks #FFFFFF & border #064E3B */
body.theme-emerald-white header.hidden.md\:flex,
body.theme-emerald-white .app-navbar {
    background-color: #065F46 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #064E3B !important;
}
body.theme-emerald-white header.hidden.md\:flex * {
    color: #FFFFFF !important;
}

/* Sidebar: #064E3B dengan teks #ECFDF5 & border #065F46 */
body.theme-emerald-white aside,
body.theme-emerald-white .app-sidebar {
    background-color: #064E3B !important;
    color: #ECFDF5 !important;
    border-right: 1px solid #065F46 !important;
}
body.theme-emerald-white aside .border-emerald-900,
body.theme-emerald-white aside .border-b,
body.theme-emerald-white aside .border-t,
body.theme-emerald-white aside .border-slate-700 {
    border-color: #065F46 !important;
}
body.theme-emerald-white aside .text-white,
body.theme-emerald-white aside .text-slate-100,
body.theme-emerald-white aside .text-slate-200,
body.theme-emerald-white aside .text-emerald-100,
body.theme-emerald-white aside .text-emerald-200,
body.theme-emerald-white aside .text-emerald-300,
body.theme-emerald-white aside .text-emerald-400,
body.theme-emerald-white aside .text-emerald-500 {
    color: #ECFDF5 !important;
}
body.theme-emerald-white aside .bg-slate-800,
body.theme-emerald-white aside .bg-slate-900,
body.theme-emerald-white aside .bg-emerald-900\/30,
body.theme-emerald-white aside .bg-emerald-900\/40 {
    background-color: #047857 !important;
    border-color: #065F46 !important;
}

/* Active Navigation Item: #047857 dengan teks #FFFFFF & border #10B981 */
body.theme-emerald-white aside a.bg-teal-600,
body.theme-emerald-white aside button.bg-emerald-600,
body.theme-emerald-white .nav-item.active {
    background-color: #047857 !important;
    color: #FFFFFF !important;
    border-left: 3px solid #10B981 !important;
    font-weight: 700 !important;
}
body.theme-emerald-white aside a:hover,
body.theme-emerald-white aside button:hover {
    background-color: #047857 !important;
    color: #FFFFFF !important;
}

/* Footer: #064E3B dengan teks #FFFFFF & border #065F46 */
body.theme-emerald-white footer,
body.theme-emerald-white .app-footer {
    background-color: #064E3B !important;
    color: #FFFFFF !important;
    border-top: 1px solid #065F46 !important;
}
body.theme-emerald-white footer *,
body.theme-emerald-white .app-footer * {
    color: #FFFFFF !important;
}

/* Content Area, Cards & Tables: #FFFFFF with text #0F172A & border #D1D5DB */
body.theme-emerald-white main .bg-slate-800,
body.theme-emerald-white main .bg-slate-800\/80,
body.theme-emerald-white main .bg-slate-800\/50,
body.theme-emerald-white main .bg-slate-800\/60,
body.theme-emerald-white main .bg-slate-900,
body.theme-emerald-white main .bg-slate-900\/80,
body.theme-emerald-white main .bg-slate-900\/60,
body.theme-emerald-white main .bg-slate-900\/40,
body.theme-emerald-white main .bg-slate-950,
body.theme-emerald-white main .bg-slate-950\/80 {
    background-color: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #0F172A !important;
}
body.theme-emerald-white main .bg-slate-700,
body.theme-emerald-white main .bg-slate-700\/40,
body.theme-emerald-white main .bg-slate-700\/60 {
    background-color: #F8FAFC !important;
    border-color: #D1D5DB !important;
    color: #064E3B !important;
}
body.theme-emerald-white main .text-white,
body.theme-emerald-white main .text-slate-100,
body.theme-emerald-white main .text-slate-200 {
    color: #0F172A !important;
}
body.theme-emerald-white main .text-slate-300,
body.theme-emerald-white main .text-slate-400 {
    color: #064E3B !important;
}
body.theme-emerald-white main .text-slate-500 {
    color: #047857 !important;
}
body.theme-emerald-white main .border-slate-700,
body.theme-emerald-white main .border-slate-700\/80,
body.theme-emerald-white main .border-slate-700\/60,
body.theme-emerald-white main .border-slate-700\/70,
body.theme-emerald-white main .border-slate-800,
body.theme-emerald-white main .border-slate-800\/60 {
    border-color: #D1D5DB !important;
}

/* Form Input: #FFFFFF with text #111827 & border #CBD5E1 | Focus #059669 */
body.theme-emerald-white input,
body.theme-emerald-white select,
body.theme-emerald-white textarea {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border-color: #CBD5E1 !important;
}
body.theme-emerald-white input:focus,
body.theme-emerald-white select:focus,
body.theme-emerald-white textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
}

/* Tombol Utama: #047857 with text #FFFFFF & hover #065F46 */
body.theme-emerald-white .bg-teal-600,
body.theme-emerald-white .bg-emerald-600,
body.theme-emerald-white button.btn-primary {
    background-color: #047857 !important;
    color: #FFFFFF !important;
    border-color: #065F46 !important;
}
body.theme-emerald-white .bg-teal-600:hover,
body.theme-emerald-white .bg-emerald-600:hover,
body.theme-emerald-white button.btn-primary:hover {
    background-color: #065F46 !important;
}
body.theme-emerald-white .text-teal-400 {
    color: #047857 !important;
}

/* Modals: #FFFFFF with text #0F172A & border #CBD5E1 */
body.theme-emerald-white .fixed .bg-slate-800 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
body.theme-emerald-white .fixed .bg-slate-800 * {
    color: #0F172A !important;
}


/* ========================================================
   THEME 3: HIJAU, PUTIH, & HITAM
   Body: #FFFFFF | Teks: #111827
   Header & Mobile Header: #14532D | Teks: #FFFFFF | Border: #166534
   Navbar / Topbar: #000000 | Teks: #FFFFFF | Border: #1F2937
   Sidebar: #052E16 | Teks: #F0FDF4 | Border: #166534
   Sidebar Active: #15803D | Teks: #FFFFFF | Border: #16A34A
   Footer: #000000 | Teks: #FFFFFF | Border: #1F2937
   Konten / Card / Tabel: #FFFFFF | Teks: #111827 | Border: #D1D5DB
   Form Input: #FFFFFF | Teks: #111827 | Border: #9CA3AF | Focus: #15803D
   Tombol Utama: #166534 | Teks: #FFFFFF | Border/Hover: #14532D
   Modal: #111827 | Teks: #FFFFFF | Border: #374151
   ======================================================== */
body.theme-green-white-black,
html.theme-green-white-black,
body.theme-green-white-black.bg-slate-900,
body.theme-green-white-black.bg-slate-950 {
    background-color: #FFFFFF !important;
    color: #111827 !important;
}

/* Header & Mobile Header: #14532D with text #FFFFFF & border #166534 */
body.theme-green-white-black header.md\:hidden,
body.theme-green-white-black .mobile-header,
body.theme-green-white-black .md\:hidden.bg-slate-800 {
    background-color: #14532D !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #166534 !important;
}
body.theme-green-white-black header.md\:hidden *,
body.theme-green-white-black .mobile-header * {
    color: #FFFFFF !important;
}

/* Navbar / Topbar: #000000 dengan teks #FFFFFF & border #1F2937 */
body.theme-green-white-black header.hidden.md\:flex,
body.theme-green-white-black .app-navbar {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #1F2937 !important;
}
body.theme-green-white-black header.hidden.md\:flex * {
    color: #FFFFFF !important;
}

/* Sidebar: #052E16 dengan teks #F0FDF4 & border #166534 */
body.theme-green-white-black aside,
body.theme-green-white-black .app-sidebar {
    background-color: #052E16 !important;
    color: #F0FDF4 !important;
    border-right: 1px solid #166534 !important;
}
body.theme-green-white-black aside .border-emerald-900,
body.theme-green-white-black aside .border-b,
body.theme-green-white-black aside .border-t,
body.theme-green-white-black aside .border-slate-700 {
    border-color: #166534 !important;
}
body.theme-green-white-black aside .text-white,
body.theme-green-white-black aside .text-slate-100,
body.theme-green-white-black aside .text-slate-200,
body.theme-green-white-black aside .text-emerald-100,
body.theme-green-white-black aside .text-emerald-200,
body.theme-green-white-black aside .text-emerald-300,
body.theme-green-white-black aside .text-emerald-400,
body.theme-green-white-black aside .text-emerald-500 {
    color: #F0FDF4 !important;
}
body.theme-green-white-black aside .bg-slate-800,
body.theme-green-white-black aside .bg-slate-900,
body.theme-green-white-black aside .bg-emerald-900\/30,
body.theme-green-white-black aside .bg-emerald-900\/40 {
    background-color: #14532D !important;
    border-color: #166534 !important;
}

/* Active Navigation Item: #15803D dengan teks #FFFFFF & border #16A34A */
body.theme-green-white-black aside a.bg-teal-600,
body.theme-green-white-black aside button.bg-emerald-600,
body.theme-green-white-black .nav-item.active {
    background-color: #15803D !important;
    color: #FFFFFF !important;
    border-left: 3px solid #16A34A !important;
    font-weight: 700 !important;
}
body.theme-green-white-black aside a:hover,
body.theme-green-white-black aside button:hover {
    background-color: #14532D !important;
    color: #FFFFFF !important;
}

/* Footer: #000000 dengan teks #FFFFFF & border #1F2937 */
body.theme-green-white-black footer,
body.theme-green-white-black .app-footer {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-top: 1px solid #1F2937 !important;
}
body.theme-green-white-black footer *,
body.theme-green-white-black .app-footer * {
    color: #FFFFFF !important;
}

/* Content Area, Cards & Tables: #FFFFFF with text #111827 & border #D1D5DB */
body.theme-green-white-black main .bg-slate-800,
body.theme-green-white-black main .bg-slate-800\/80,
body.theme-green-white-black main .bg-slate-800\/50,
body.theme-green-white-black main .bg-slate-800\/60,
body.theme-green-white-black main .bg-slate-900,
body.theme-green-white-black main .bg-slate-900\/80,
body.theme-green-white-black main .bg-slate-900\/60,
body.theme-green-white-black main .bg-slate-900\/40,
body.theme-green-white-black main .bg-slate-950,
body.theme-green-white-black main .bg-slate-950\/80 {
    background-color: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #111827 !important;
}
body.theme-green-white-black main .bg-slate-700,
body.theme-green-white-black main .bg-slate-700\/40,
body.theme-green-white-black main .bg-slate-700\/60 {
    background-color: #F8FAFC !important;
    border-color: #D1D5DB !important;
    color: #111827 !important;
}
body.theme-green-white-black main .text-white,
body.theme-green-white-black main .text-slate-100,
body.theme-green-white-black main .text-slate-200 {
    color: #111827 !important;
}
body.theme-green-white-black main .text-slate-300,
body.theme-green-white-black main .text-slate-400 {
    color: #4B5563 !important;
}
body.theme-green-white-black main .text-slate-500 {
    color: #6B7280 !important;
}
body.theme-green-white-black main .border-slate-700,
body.theme-green-white-black main .border-slate-700\/80,
body.theme-green-white-black main .border-slate-700\/60,
body.theme-green-white-black main .border-slate-700\/70,
body.theme-green-white-black main .border-slate-800,
body.theme-green-white-black main .border-slate-800\/60 {
    border-color: #D1D5DB !important;
}

/* Form Input: #FFFFFF with text #111827 & border #9CA3AF | Focus #15803D */
body.theme-green-white-black input,
body.theme-green-white-black select,
body.theme-green-white-black textarea {
    background-color: #FFFFFF !important;
    color: #111827 !important;
    border-color: #9CA3AF !important;
}
body.theme-green-white-black input:focus,
body.theme-green-white-black select:focus,
body.theme-green-white-black textarea:focus {
    border-color: #15803D !important;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2) !important;
}

/* Tombol Utama: #166534 with text #FFFFFF & hover #14532D */
body.theme-green-white-black .bg-teal-600,
body.theme-green-white-black .bg-emerald-600,
body.theme-green-white-black button.btn-primary {
    background-color: #166534 !important;
    color: #FFFFFF !important;
    border-color: #14532D !important;
}
body.theme-green-white-black .bg-teal-600:hover,
body.theme-green-white-black .bg-emerald-600:hover,
body.theme-green-white-black button.btn-primary:hover {
    background-color: #14532D !important;
}
body.theme-green-white-black .text-teal-400 {
    color: #166534 !important;
}

/* Modals: #111827 with text #FFFFFF & border #374151 */
body.theme-green-white-black .fixed .bg-slate-800 {
    background-color: #111827 !important;
    border-color: #374151 !important;
    color: #FFFFFF !important;
}
body.theme-green-white-black .fixed .bg-slate-800 * {
    color: #FFFFFF !important;
}


/* ========================================================
   THEME 4: DARK SLATE MODERN
   Body: #0F172A | Teks: #E2E8F0
   Header & Mobile Header: #111827 | Teks: #F8FAFC | Border: #1E293B
   Navbar / Topbar: #020617 | Teks: #F8FAFC | Border: #1E293B
   Sidebar: #0B1120 | Teks: #CBD5E1 | Border: #1E293B
   Sidebar Active: #2563EB | Teks: #FFFFFF | Border: #3B82F6
   Footer: #020617 | Teks: #CBD5E1 | Border: #1E293B
   Konten / Card / Tabel: #1E293B | Teks: #F8FAFC | Border: #334155
   Form Input: #0F172A | Teks: #E2E8F0 | Border: #475569 | Focus: #60A5FA
   Tombol Utama: #2563EB | Teks: #FFFFFF | Border/Hover: #1D4ED8
   Modal: #1E293B | Teks: #F8FAFC | Border: #475569
   ======================================================== */
body.theme-dark,
html.theme-dark,
body.theme-dark.bg-slate-900,
body.theme-dark.bg-slate-950 {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
}

/* Header & Mobile Header: #111827 with text #F8FAFC & border #1E293B */
body.theme-dark header.md\:hidden,
body.theme-dark .mobile-header,
body.theme-dark .md\:hidden.bg-slate-800 {
    background-color: #111827 !important;
    color: #F8FAFC !important;
    border-bottom: 1px solid #1E293B !important;
}
body.theme-dark header.md\:hidden * {
    color: #F8FAFC !important;
}

/* Navbar / Topbar: #020617 dengan teks #F8FAFC & border #1E293B */
body.theme-dark header.hidden.md\:flex,
body.theme-dark .app-navbar {
    background-color: #020617 !important;
    color: #F8FAFC !important;
    border-bottom: 1px solid #1E293B !important;
}
body.theme-dark header.hidden.md\:flex * {
    color: #F8FAFC !important;
}

/* Sidebar: #0B1120 dengan teks #CBD5E1 & border #1E293B */
body.theme-dark aside,
body.theme-dark .app-sidebar {
    background-color: #0B1120 !important;
    color: #CBD5E1 !important;
    border-right: 1px solid #1E293B !important;
}
body.theme-dark aside .border-emerald-900,
body.theme-dark aside .border-b,
body.theme-dark aside .border-t,
body.theme-dark aside .border-slate-700 {
    border-color: #1E293B !important;
}

/* Active Navigation Item: #2563EB dengan teks #FFFFFF & border #3B82F6 */
body.theme-dark aside a.bg-teal-600,
body.theme-dark aside button.bg-emerald-600,
body.theme-dark .nav-item.active {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border-left: 3px solid #3B82F6 !important;
    font-weight: 700 !important;
}
body.theme-dark aside a:hover,
body.theme-dark aside button:hover {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
}

/* Footer: #020617 dengan teks #CBD5E1 & border #1E293B */
body.theme-dark footer,
body.theme-dark .app-footer {
    background-color: #020617 !important;
    color: #CBD5E1 !important;
    border-top: 1px solid #1E293B !important;
}
body.theme-dark footer *,
body.theme-dark .app-footer * {
    color: #CBD5E1 !important;
}

/* Content Area, Cards & Tables: #1E293B with text #F8FAFC & border #334155 */
body.theme-dark main .bg-slate-800,
body.theme-dark main .bg-slate-800\/80,
body.theme-dark main .bg-slate-800\/50,
body.theme-dark main .bg-slate-800\/60,
body.theme-dark main .bg-slate-900,
body.theme-dark main .bg-slate-900\/80,
body.theme-dark main .bg-slate-900\/60,
body.theme-dark main .bg-slate-900\/40,
body.theme-dark main .bg-slate-950,
body.theme-dark main .bg-slate-950\/80 {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}
body.theme-dark main .bg-slate-700,
body.theme-dark main .bg-slate-700\/40,
body.theme-dark main .bg-slate-700\/60 {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}
body.theme-dark main .text-white,
body.theme-dark main .text-slate-100,
body.theme-dark main .text-slate-200 {
    color: #F8FAFC !important;
}
body.theme-dark main .text-slate-300,
body.theme-dark main .text-slate-400 {
    color: #94A3B8 !important;
}
body.theme-dark main .text-slate-500 {
    color: #64748B !important;
}
body.theme-dark main .border-slate-700,
body.theme-dark main .border-slate-700\/80,
body.theme-dark main .border-slate-700\/60,
body.theme-dark main .border-slate-700\/70,
body.theme-dark main .border-slate-800,
body.theme-dark main .border-slate-800\/60 {
    border-color: #334155 !important;
}

/* Form Input: #0F172A with text #E2E8F0 & border #475569 | Focus #60A5FA */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #475569 !important;
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
    border-color: #60A5FA !important;
    color: #F8FAFC !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* Tombol Utama: #2563EB with text #FFFFFF & hover #1D4ED8 */
body.theme-dark .bg-teal-600,
body.theme-dark .bg-emerald-600,
body.theme-dark button.btn-primary {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
}
body.theme-dark .bg-teal-600:hover,
body.theme-dark .bg-emerald-600:hover,
body.theme-dark button.btn-primary:hover {
    background-color: #1D4ED8 !important;
}
body.theme-dark .text-teal-400 {
    color: #60A5FA !important;
}

/* Modals: #1E293B with text #F8FAFC & border #475569 */
body.theme-dark .fixed .bg-slate-800 {
    background-color: #1E293B !important;
    border-color: #475569 !important;
    color: #F8FAFC !important;
}
body.theme-dark .fixed .bg-slate-800 * {
    color: #F8FAFC !important;
}


/* ========================================================
   THEME 5: BIRU NAVY & EMAS
   Body: #F8FAFC | Teks: #172033
   Header & Mobile Header: #0F2747 | Teks: #FFFFFF | Border: #1E3A5F
   Navbar / Topbar: #081C36 | Teks: #FFFFFF | Border: #1E3A5F
   Sidebar: #0B1F3A | Teks: #E2E8F0 | Border: #1E3A5F
   Sidebar Active: #B8860B | Teks: #FFFFFF | Border: #D4A72C
   Footer: #081C36 | Teks: #E2E8F0 | Border: #1E3A5F
   Konten / Card / Tabel: #FFFFFF | Teks: #172033 | Border: #D1D5DB
   Form Input: #FFFFFF | Teks: #172033 | Border: #94A3B8 | Focus: #B8860B
   Tombol Utama: #B8860B | Teks: #FFFFFF | Border/Hover: #966F00
   Modal: #FFFFFF | Teks: #172033 | Border: #CBD5E1
   ======================================================== */
body.theme-navy-gold,
html.theme-navy-gold,
body.theme-navy-gold.bg-slate-900,
body.theme-navy-gold.bg-slate-950 {
    background-color: #F8FAFC !important;
    color: #172033 !important;
}

/* Header & Mobile Header: #0F2747 with text #FFFFFF & border #1E3A5F */
body.theme-navy-gold header.md\:hidden,
body.theme-navy-gold .mobile-header,
body.theme-navy-gold .md\:hidden.bg-slate-800 {
    background-color: #0F2747 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #1E3A5F !important;
}
body.theme-navy-gold header.md\:hidden * {
    color: #FFFFFF !important;
}

/* Navbar / Topbar: #081C36 dengan teks #FFFFFF & border #1E3A5F */
body.theme-navy-gold header.hidden.md\:flex,
body.theme-navy-gold .app-navbar {
    background-color: #081C36 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #1E3A5F !important;
}
body.theme-navy-gold header.hidden.md\:flex * {
    color: #FFFFFF !important;
}

/* Sidebar: #0B1F3A dengan teks #E2E8F0 & border #1E3A5F */
body.theme-navy-gold aside,
body.theme-navy-gold .app-sidebar {
    background-color: #0B1F3A !important;
    color: #E2E8F0 !important;
    border-right: 1px solid #1E3A5F !important;
}
body.theme-navy-gold aside .border-emerald-900,
body.theme-navy-gold aside .border-b,
body.theme-navy-gold aside .border-t,
body.theme-navy-gold aside .border-slate-700 {
    border-color: #1E3A5F !important;
}
body.theme-navy-gold aside .text-white,
body.theme-navy-gold aside .text-slate-100,
body.theme-navy-gold aside .text-slate-200,
body.theme-navy-gold aside .text-emerald-100,
body.theme-navy-gold aside .text-emerald-200,
body.theme-navy-gold aside .text-emerald-300,
body.theme-navy-gold aside .text-emerald-400,
body.theme-navy-gold aside .text-emerald-500 {
    color: #E2E8F0 !important;
}
body.theme-navy-gold aside .bg-slate-800,
body.theme-navy-gold aside .bg-slate-900,
body.theme-navy-gold aside .bg-emerald-900\/30,
body.theme-navy-gold aside .bg-emerald-900\/40 {
    background-color: #0F2747 !important;
    border-color: #1E3A5F !important;
}

/* Active Navigation Item: #B8860B dengan teks #FFFFFF & border #D4A72C */
body.theme-navy-gold aside a.bg-teal-600,
body.theme-navy-gold aside button.bg-emerald-600,
body.theme-navy-gold .nav-item.active {
    background-color: #B8860B !important;
    color: #FFFFFF !important;
    border-left: 3px solid #D4A72C !important;
    font-weight: 700 !important;
}
body.theme-navy-gold aside a:hover,
body.theme-navy-gold aside button:hover {
    background-color: #1E3A5F !important;
    color: #FFFFFF !important;
}

/* Footer: #081C36 dengan teks #E2E8F0 & border #1E3A5F */
body.theme-navy-gold footer,
body.theme-navy-gold .app-footer {
    background-color: #081C36 !important;
    color: #E2E8F0 !important;
    border-top: 1px solid #1E3A5F !important;
}
body.theme-navy-gold footer *,
body.theme-navy-gold .app-footer * {
    color: #E2E8F0 !important;
}

/* Content Area, Cards & Tables: #FFFFFF with text #172033 & border #D1D5DB */
body.theme-navy-gold main .bg-slate-800,
body.theme-navy-gold main .bg-slate-800\/80,
body.theme-navy-gold main .bg-slate-800\/50,
body.theme-navy-gold main .bg-slate-800\/60,
body.theme-navy-gold main .bg-slate-900,
body.theme-navy-gold main .bg-slate-900\/80,
body.theme-navy-gold main .bg-slate-900\/60,
body.theme-navy-gold main .bg-slate-900\/40,
body.theme-navy-gold main .bg-slate-950,
body.theme-navy-gold main .bg-slate-950\/80 {
    background-color: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #172033 !important;
}
body.theme-navy-gold main .bg-slate-700,
body.theme-navy-gold main .bg-slate-700\/40,
body.theme-navy-gold main .bg-slate-700\/60 {
    background-color: #F8FAFC !important;
    border-color: #D1D5DB !important;
    color: #172033 !important;
}
body.theme-navy-gold main .text-white,
body.theme-navy-gold main .text-slate-100,
body.theme-navy-gold main .text-slate-200 {
    color: #172033 !important;
}
body.theme-navy-gold main .text-slate-300,
body.theme-navy-gold main .text-slate-400 {
    color: #334155 !important;
}
body.theme-navy-gold main .text-slate-500 {
    color: #64748B !important;
}
body.theme-navy-gold main .border-slate-700,
body.theme-navy-gold main .border-slate-700\/80,
body.theme-navy-gold main .border-slate-700\/60,
body.theme-navy-gold main .border-slate-700\/70,
body.theme-navy-gold main .border-slate-800,
body.theme-navy-gold main .border-slate-800\/60 {
    border-color: #D1D5DB !important;
}

/* Form Input: #FFFFFF with text #172033 & border #94A3B8 | Focus #B8860B */
body.theme-navy-gold input,
body.theme-navy-gold select,
body.theme-navy-gold textarea {
    background-color: #FFFFFF !important;
    color: #172033 !important;
    border-color: #94A3B8 !important;
}
body.theme-navy-gold input:focus,
body.theme-navy-gold select:focus,
body.theme-navy-gold textarea:focus {
    border-color: #B8860B !important;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.2) !important;
}

/* Tombol Utama: #B8860B with text #FFFFFF & hover #966F00 */
body.theme-navy-gold .bg-teal-600,
body.theme-navy-gold .bg-emerald-600,
body.theme-navy-gold button.btn-primary {
    background-color: #B8860B !important;
    color: #FFFFFF !important;
    border-color: #966F00 !important;
}
body.theme-navy-gold .bg-teal-600:hover,
body.theme-navy-gold .bg-emerald-600:hover,
body.theme-navy-gold button.btn-primary:hover {
    background-color: #966F00 !important;
}
body.theme-navy-gold .text-teal-400 {
    color: #B8860B !important;
}

/* Modals: #FFFFFF with text #172033 & border #CBD5E1 */
body.theme-navy-gold .fixed .bg-slate-800 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #172033 !important;
}
body.theme-navy-gold .fixed .bg-slate-800 * {
    color: #172033 !important;
}


/* ========================================================
   THEME 6: BIRU NAVY & PUTIH
   Body: #F8FAFC | Teks: #0F172A
   Header & Mobile Header: #0F2747 | Teks: #FFFFFF | Border: #1E3A5F
   Navbar / Topbar: #0B1F3A | Teks: #FFFFFF | Border: #1E3A5F
   Sidebar: #102A43 | Teks: #E2E8F0 | Border: #243B53
   Sidebar Active: #2563EB | Teks: #FFFFFF | Border: #3B82F6
   Footer: #0B1F3A | Teks: #CBD5E1 | Border: #1E3A5F
   Konten / Card / Tabel: #FFFFFF | Teks: #0F172A | Border: #CBD5E1
   Form Input: #FFFFFF | Teks: #0F172A | Border: #94A3B8 | Focus: #2563EB
   Tombol Utama: #2563EB | Teks: #FFFFFF | Border/Hover: #1D4ED8
   Modal: #FFFFFF | Teks: #0F172A | Border: #CBD5E1
   ======================================================== */
body.theme-navy-white,
html.theme-navy-white,
body.theme-navy-white.bg-slate-900,
body.theme-navy-white.bg-slate-950 {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Header & Mobile Header: #0F2747 with text #FFFFFF & border #1E3A5F */
body.theme-navy-white header.md\:hidden,
body.theme-navy-white .mobile-header,
body.theme-navy-white .md\:hidden.bg-slate-800 {
    background-color: #0F2747 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #1E3A5F !important;
}
body.theme-navy-white header.md\:hidden *,
body.theme-navy-white .mobile-header * {
    color: #FFFFFF !important;
}

/* Navbar / Topbar: #0B1F3A dengan teks #FFFFFF & border #1E3A5F */
body.theme-navy-white header.hidden.md\:flex,
body.theme-navy-white .app-navbar {
    background-color: #0B1F3A !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #1E3A5F !important;
}
body.theme-navy-white header.hidden.md\:flex * {
    color: #FFFFFF !important;
}

/* Sidebar: #102A43 dengan teks #E2E8F0 & border #243B53 */
body.theme-navy-white aside,
body.theme-navy-white .app-sidebar {
    background-color: #102A43 !important;
    color: #E2E8F0 !important;
    border-right: 1px solid #243B53 !important;
}
body.theme-navy-white aside .border-emerald-900,
body.theme-navy-white aside .border-b,
body.theme-navy-white aside .border-t,
body.theme-navy-white aside .border-slate-700 {
    border-color: #243B53 !important;
}
body.theme-navy-white aside .text-white,
body.theme-navy-white aside .text-slate-100,
body.theme-navy-white aside .text-slate-200,
body.theme-navy-white aside .text-emerald-100,
body.theme-navy-white aside .text-emerald-200,
body.theme-navy-white aside .text-emerald-300,
body.theme-navy-white aside .text-emerald-400,
body.theme-navy-white aside .text-emerald-500 {
    color: #E2E8F0 !important;
}
body.theme-navy-white aside .bg-slate-800,
body.theme-navy-white aside .bg-slate-900,
body.theme-navy-white aside .bg-emerald-900\/30,
body.theme-navy-white aside .bg-emerald-900\/40 {
    background-color: #0F2747 !important;
    border-color: #243B53 !important;
}

/* Active Navigation Item: #2563EB dengan teks #FFFFFF & border #3B82F6 */
body.theme-navy-white aside a.bg-teal-600,
body.theme-navy-white aside button.bg-emerald-600,
body.theme-navy-white .nav-item.active {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border-left: 3px solid #3B82F6 !important;
    font-weight: 700 !important;
}
body.theme-navy-white aside a:hover,
body.theme-navy-white aside button:hover {
    background-color: #1E3A5F !important;
    color: #FFFFFF !important;
}

/* Footer: #0B1F3A dengan teks #CBD5E1 & border #1E3A5F */
body.theme-navy-white footer,
body.theme-navy-white .app-footer {
    background-color: #0B1F3A !important;
    color: #CBD5E1 !important;
    border-top: 1px solid #1E3A5F !important;
}
body.theme-navy-white footer *,
body.theme-navy-white .app-footer * {
    color: #CBD5E1 !important;
}

/* Content Area, Cards & Tables: #FFFFFF with text #0F172A & border #CBD5E1 */
body.theme-navy-white main .bg-slate-800,
body.theme-navy-white main .bg-slate-800\/80,
body.theme-navy-white main .bg-slate-800\/50,
body.theme-navy-white main .bg-slate-800\/60,
body.theme-navy-white main .bg-slate-900,
body.theme-navy-white main .bg-slate-900\/80,
body.theme-navy-white main .bg-slate-900\/60,
body.theme-navy-white main .bg-slate-900\/40,
body.theme-navy-white main .bg-slate-950,
body.theme-navy-white main .bg-slate-950\/80 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}
body.theme-navy-white main .bg-slate-700,
body.theme-navy-white main .bg-slate-700\/40,
body.theme-navy-white main .bg-slate-700\/60 {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
body.theme-navy-white main .text-white,
body.theme-navy-white main .text-slate-100,
body.theme-navy-white main .text-slate-200 {
    color: #0F172A !important;
}
body.theme-navy-white main .text-slate-300,
body.theme-navy-white main .text-slate-400 {
    color: #475569 !important;
}
body.theme-navy-white main .text-slate-500 {
    color: #64748B !important;
}
body.theme-navy-white main .border-slate-700,
body.theme-navy-white main .border-slate-700\/80,
body.theme-navy-white main .border-slate-700\/60,
body.theme-navy-white main .border-slate-700\/70,
body.theme-navy-white main .border-slate-800,
body.theme-navy-white main .border-slate-800\/60 {
    border-color: #CBD5E1 !important;
}

/* Form Input: #FFFFFF with text #0F172A & border #94A3B8 | Focus #2563EB */
body.theme-navy-white input,
body.theme-navy-white select,
body.theme-navy-white textarea {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}
body.theme-navy-white input:focus,
body.theme-navy-white select:focus,
body.theme-navy-white textarea:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Tombol Utama: #2563EB with text #FFFFFF & hover #1D4ED8 */
body.theme-navy-white .bg-teal-600,
body.theme-navy-white .bg-emerald-600,
body.theme-navy-white button.btn-primary {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
}
body.theme-navy-white .bg-teal-600:hover,
body.theme-navy-white .bg-emerald-600:hover,
body.theme-navy-white button.btn-primary:hover {
    background-color: #1D4ED8 !important;
}
body.theme-navy-white .text-teal-400 {
    color: #2563EB !important;
}

/* Modals: #FFFFFF with text #0F172A & border #CBD5E1 */
body.theme-navy-white .fixed .bg-slate-800 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
body.theme-navy-white .fixed .bg-slate-800 * {
    color: #0F172A !important;
}

/* Camera Scanner Container Custom Styling */
#reader video {
    border-radius: 12px;
    width: 100% !important;
    object-fit: cover !important;
}

#reader {
    border: none !important;
    background: transparent !important;
}

#reader__scan_region {
    background: transparent !important;
}

#reader__dashboard {
    display: none !important;
}

/* Custom Print Styles for ID Cards & Rekap Reports */
@media print {
    body * {
        visibility: hidden;
    }
    .print-area, .print-area * {
        visibility: visible;
    }
    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .no-print {
        display: none !important;
    }
}