/* ==========================================================================
   BEAUTY SYSTEM - MODERN DESIGN SYSTEM & DARK MODE OVERLAY
   Seamless modern overhaul for Bootstrap 4 / Highdmin Admin Template
   ========================================================================== */

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

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */
:root {
    --bs-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Light Mode Palette */
    --bs-bg-body: #f8fafc;
    --bs-bg-content: #f8fafc;
    --bs-bg-card: #ffffff;
    --bs-bg-card-header: #ffffff;
    --bs-bg-topbar: #ffffff;
    --bs-bg-sidebar: #1e293b;
    --bs-bg-sidebar-active: rgba(99, 102, 241, 0.15);
    
    --bs-text-main: #0f172a;
    --bs-text-secondary: #334155;
    --bs-text-muted: #64748b;
    --bs-border-color: #e2e8f0;
    --bs-border-subtle: #f1f5f9;
    
    /* Table Variables */
    --bs-table-th-bg: #f8fafc;
    --bs-table-th-color: #475569;
    --bs-table-td-border: #f1f5f9;
    --bs-table-hover: #f1f5f9;
    --bs-table-striped: #fafbfc;
    
    /* Inputs */
    --bs-input-bg: #ffffff;
    --bs-input-border: #cbd5e1;
    --bs-input-focus-border: #6366f1;
    --bs-input-focus-ring: rgba(99, 102, 241, 0.18);
    
    /* Brand Accent Colors */
    --bs-primary: #6366f1;
    --bs-primary-hover: #4f46e5;
    --bs-primary-soft: rgba(99, 102, 241, 0.12);
    
    --bs-success: #10b981;
    --bs-success-hover: #059669;
    --bs-success-soft: rgba(16, 185, 129, 0.12);
    
    --bs-warning: #f59e0b;
    --bs-warning-hover: #d97706;
    --bs-warning-soft: rgba(245, 158, 11, 0.14);
    
    --bs-danger: #f43f5e;
    --bs-danger-hover: #e11d48;
    --bs-danger-soft: rgba(244, 63, 94, 0.12);
    
    --bs-info: #0ea5e9;
    --bs-info-hover: #0284c7;
    --bs-info-soft: rgba(14, 165, 233, 0.12);
    
    --bs-secondary: #64748b;
    --bs-secondary-hover: #475569;
    
    /* Component Geometry */
    --bs-radius-sm: 6px;
    --bs-radius-md: 10px;
    --bs-radius-lg: 14px;
    --bs-radius-pill: 50rem;
    
    --bs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    --bs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   DARK MODE OVERRIDES (Comfortable, Eye-Friendly SaaS FinTech Themes)
   ========================================================================== */

/* ─── OPTION 1: Slate & Charcoal Modern (Linear & GitHub Dark Style) [DEFAULT] ───
   Nada abu-abu arang netral sejuk, kontras teks lembut, bebas silau/halation */
[data-theme="dark"],
[data-theme="dark"][data-dark-style="slate"] {
    color-scheme: dark;
    --bs-bg-body: #0d1117;
    --bs-bg-content: #0d1117;
    --bs-bg-card: #161b22;
    --bs-bg-card-header: #161b22;
    --bs-bg-topbar: #161b22;
    --bs-bg-sidebar: #090d13;
    --bs-bg-sidebar-active: rgba(99, 102, 241, 0.18);
    
    /* Eye-comfort soft off-white text (no harsh blinding glare) */
    --bs-text-main: #e6edf3;
    --bs-text-secondary: #94a3b8;
    --bs-text-muted: #6e7681;
    --bs-border-color: #30363d;
    --bs-border-subtle: #21262d;
    
    /* Table Variables Dark (Comfort) */
    --bs-table-th-bg: #1b212a;
    --bs-table-th-color: #cbd5e1;
    --bs-table-td-border: #21262d;
    --bs-table-hover: #1f2631;
    --bs-table-striped: #13171f;
    
    /* Inputs Dark */
    --bs-input-bg: #0d1117;
    --bs-input-border: #30363d;
    --bs-input-focus-border: #818cf8;
    --bs-input-focus-ring: rgba(129, 140, 248, 0.2);
    
    /* Balanced Pastel Accents (Comfortable saturation) */
    --bs-primary: #818cf8;
    --bs-primary-hover: #6366f1;
    --bs-primary-soft: rgba(129, 140, 248, 0.15);
    
    --bs-success: #3fb950;
    --bs-success-hover: #2ea043;
    --bs-success-soft: rgba(63, 185, 80, 0.15);
    
    --bs-warning: #e3b341;
    --bs-warning-hover: #d29922;
    --bs-warning-soft: rgba(227, 179, 65, 0.15);
    
    --bs-danger: #f85149;
    --bs-danger-hover: #da3633;
    --bs-danger-soft: rgba(248, 81, 73, 0.15);
    
    --bs-info: #58a6ff;
    --bs-info-hover: #388bfd;
    --bs-info-soft: rgba(88, 166, 255, 0.15);
    
    --bs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --bs-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
    --bs-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.55);
}

/* ─── OPTION 2: Warm Zinc / True Neutral Charcoal (Notion & Mac Dark Style) ───
   Tanpa rona biru, abu-abu arang hangat murni, sangat ramah untuk mata lelah */
[data-theme="dark"][data-dark-style="zinc"] {
    --bs-bg-body: #18181b;
    --bs-bg-content: #18181b;
    --bs-bg-card: #27272a;
    --bs-bg-card-header: #27272a;
    --bs-bg-topbar: #27272a;
    --bs-bg-sidebar: #121214;
    --bs-bg-sidebar-active: rgba(99, 102, 241, 0.2);
    
    --bs-text-main: #f4f4f5;
    --bs-text-secondary: #d4d4d8;
    --bs-text-muted: #a1a1aa;
    --bs-border-color: #3f3f46;
    --bs-border-subtle: #2d2d30;
    
    --bs-table-th-bg: #222225;
    --bs-table-th-color: #d4d4d8;
    --bs-table-td-border: #333338;
    --bs-table-hover: #323236;
    --bs-table-striped: #1f1f22;
    
    --bs-input-bg: #18181b;
    --bs-input-border: #3f3f46;
    --bs-input-focus-border: #818cf8;
    --bs-input-focus-ring: rgba(129, 140, 248, 0.2);
}

/* ─── OPTION 3: Soft Midnight Navy (Tailwind Slate Soft) ───
   Tetap bernuansa navy mewah namun saturasi diturunkan drastis agar teduh */
[data-theme="dark"][data-dark-style="midnight"] {
    --bs-bg-body: #0f172a;
    --bs-bg-content: #0f172a;
    --bs-bg-card: #1e293b;
    --bs-bg-card-header: #1e293b;
    --bs-bg-topbar: #1e293b;
    --bs-bg-sidebar: #0b1120;
    --bs-bg-sidebar-active: rgba(99, 102, 241, 0.2);
    
    --bs-text-main: #f1f5f9;
    --bs-text-secondary: #cbd5e1;
    --bs-text-muted: #94a3b8;
    --bs-border-color: #334155;
    --bs-border-subtle: #243248;
    
    --bs-table-th-bg: #192335;
    --bs-table-th-color: #cbd5e1;
    --bs-table-td-border: #293548;
    --bs-table-hover: #263346;
    --bs-table-striped: #151f30;
    
    --bs-input-bg: #0f172a;
    --bs-input-border: #334155;
    --bs-input-focus-border: #818cf8;
    --bs-input-focus-ring: rgba(129, 140, 248, 0.2);
}

/* ─── OPTION 4: OLED Pure Black (Vercel & Apple True Black) ───
   Hitam pekat murni #000000, hemat daya layar, kontras crisp border */
[data-theme="dark"][data-dark-style="oled"] {
    --bs-bg-body: #000000;
    --bs-bg-content: #000000;
    --bs-bg-card: #0c0c0e;
    --bs-bg-card-header: #0c0c0e;
    --bs-bg-topbar: #0c0c0e;
    --bs-bg-sidebar: #050505;
    --bs-bg-sidebar-active: rgba(255, 255, 255, 0.1);
    
    --bs-text-main: #ededed;
    --bs-text-secondary: #a1a1aa;
    --bs-text-muted: #71717a;
    --bs-border-color: #27272a;
    --bs-border-subtle: #18181b;
    
    --bs-table-th-bg: #111114;
    --bs-table-th-color: #d4d4d8;
    --bs-table-td-border: #1f1f23;
    --bs-table-hover: #17171c;
    --bs-table-striped: #08080a;
    
    --bs-input-bg: #050505;
    --bs-input-border: #27272a;
    --bs-input-focus-border: #6366f1;
    --bs-input-focus-ring: rgba(99, 102, 241, 0.25);
    
    --bs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.8);
    --bs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.9);
}

/* ─── OPTION 5: Nordic Frost (Nord Arctic Theme) ───
   Nuansa abu-abu biru kutub yang sejuk, damai, dan sangat meredakan mata */
[data-theme="dark"][data-dark-style="nord"] {
    --bs-bg-body: #242933;
    --bs-bg-content: #242933;
    --bs-bg-card: #2e3440;
    --bs-bg-card-header: #2e3440;
    --bs-bg-topbar: #2e3440;
    --bs-bg-sidebar: #1d212a;
    --bs-bg-sidebar-active: rgba(136, 192, 208, 0.2);
    
    --bs-text-main: #eceff4;
    --bs-text-secondary: #d8dee9;
    --bs-text-muted: #88c0d0;
    --bs-border-color: #3b4252;
    --bs-border-subtle: #2b313d;
    
    --bs-table-th-bg: #272c36;
    --bs-table-th-color: #d8dee9;
    --bs-table-td-border: #353b49;
    --bs-table-hover: #3b4252;
    --bs-table-striped: #212630;
    
    --bs-input-bg: #242933;
    --bs-input-border: #3b4252;
    --bs-input-focus-border: #88c0d0;
    --bs-input-focus-ring: rgba(136, 192, 208, 0.25);
    
    --bs-primary: #88c0d0;
    --bs-primary-hover: #81a1c1;
    --bs-success: #a3be8c;
    --bs-warning: #ebcb8b;
    --bs-danger: #bf616a;
}

/* ─── OPTION 6: Tokyo Night (Modern Cyber Indigo) ───
   Sentuhan indigo ungu malam modern khas developer, elegan & tidak silau */
[data-theme="dark"][data-dark-style="tokyo"] {
    --bs-bg-body: #16161e;
    --bs-bg-content: #16161e;
    --bs-bg-card: #1f2335;
    --bs-bg-card-header: #1f2335;
    --bs-bg-topbar: #1f2335;
    --bs-bg-sidebar: #13141c;
    --bs-bg-sidebar-active: rgba(187, 154, 247, 0.2);
    
    --bs-text-main: #c0caf5;
    --bs-text-secondary: #9aa5ce;
    --bs-text-muted: #6e7699;
    --bs-border-color: #292e42;
    --bs-border-subtle: #202434;
    
    --bs-table-th-bg: #1a1e2d;
    --bs-table-th-color: #9aa5ce;
    --bs-table-td-border: #262a3c;
    --bs-table-hover: #272c42;
    --bs-table-striped: #141722;
    
    --bs-input-bg: #16161e;
    --bs-input-border: #292e42;
    --bs-input-focus-border: #7aa2f7;
    --bs-input-focus-ring: rgba(122, 162, 247, 0.25);
    
    --bs-primary: #7aa2f7;
    --bs-primary-hover: #89b4fa;
    --bs-success: #9ece6a;
    --bs-warning: #e0af68;
    --bs-danger: #f7768e;
}

/* ─── OPTION 7: Warm Espresso (Monokai Zero Blue-Light) ───
   100% bebas rona biru, nuansa arang kopi hangat dengan aksen emas amber */
[data-theme="dark"][data-dark-style="espresso"] {
    --bs-bg-body: #19181a;
    --bs-bg-content: #19181a;
    --bs-bg-card: #221f22;
    --bs-bg-card-header: #221f22;
    --bs-bg-topbar: #221f22;
    --bs-bg-sidebar: #131214;
    --bs-bg-sidebar-active: rgba(255, 216, 102, 0.15);
    
    --bs-text-main: #fcfcfa;
    --bs-text-secondary: #c1c0c0;
    --bs-text-muted: #8b888b;
    --bs-border-color: #363336;
    --bs-border-subtle: #292629;
    
    --bs-table-th-bg: #1d1b1e;
    --bs-table-th-color: #c1c0c0;
    --bs-table-td-border: #2e2b2e;
    --bs-table-hover: #2b282c;
    --bs-table-striped: #171618;
    
    --bs-input-bg: #19181a;
    --bs-input-border: #363336;
    --bs-input-focus-border: #ffd866;
    --bs-input-focus-ring: rgba(255, 216, 102, 0.25);
    
    --bs-primary: #ffd866;
    --bs-primary-hover: #ffb86c;
    --bs-success: #a9dc76;
    --bs-warning: #ffb86c;
    --bs-danger: #ff6188;
}

/* ─── OPTION 8: Forest Emerald (Deep Botanical / Pine Dark) ───
   Nuansa hutan pinus sejuk & zamrud, menurut optometri warna hijau paling sedikit memicu ketegangan pupil */
[data-theme="dark"][data-dark-style="emerald"] {
    --bs-bg-body: #0b1411;
    --bs-bg-content: #0b1411;
    --bs-bg-card: #121e1a;
    --bs-bg-card-header: #121e1a;
    --bs-bg-topbar: #121e1a;
    --bs-bg-sidebar: #070e0c;
    --bs-bg-sidebar-active: rgba(52, 211, 153, 0.18);
    
    --bs-text-main: #e6f4ea;
    --bs-text-secondary: #a8c5b5;
    --bs-text-muted: #729381;
    --bs-border-color: #233a32;
    --bs-border-subtle: #182a24;
    
    --bs-table-th-bg: #15241f;
    --bs-table-th-color: #a8c5b5;
    --bs-table-td-border: #1d312a;
    --bs-table-hover: #1b2d27;
    --bs-table-striped: #0e1814;
    
    --bs-input-bg: #0b1411;
    --bs-input-border: #233a32;
    --bs-input-focus-border: #34d399;
    --bs-input-focus-ring: rgba(52, 211, 153, 0.25);
    
    --bs-primary: #34d399;
    --bs-primary-hover: #10b981;
    --bs-primary-soft: rgba(52, 211, 153, 0.15);
    --bs-success: #34d399;
    --bs-warning: #fbbf24;
    --bs-danger: #f87171;
    --bs-info: #38bdf8;
}

/* ─── OPTION 9: Dracula Classic (Gothic Charcoal & Pastel) ───
   Tema dark mode paling legendaris di dunia, abu-abu gelap dengan aksen pastel ungu & mint yang ramah di mata */
[data-theme="dark"][data-dark-style="dracula"] {
    --bs-bg-body: #1e1f29;
    --bs-bg-content: #1e1f29;
    --bs-bg-card: #282a36;
    --bs-bg-card-header: #282a36;
    --bs-bg-topbar: #282a36;
    --bs-bg-sidebar: #191a21;
    --bs-bg-sidebar-active: rgba(189, 147, 249, 0.2);
    
    --bs-text-main: #f8f8f2;
    --bs-text-secondary: #bfbfbf;
    --bs-text-muted: #6272a4;
    --bs-border-color: #44475a;
    --bs-border-subtle: #343746;
    
    --bs-table-th-bg: #21222c;
    --bs-table-th-color: #bfbfbf;
    --bs-table-td-border: #3a3c4e;
    --bs-table-hover: #343746;
    --bs-table-striped: #1c1d26;
    
    --bs-input-bg: #1e1f29;
    --bs-input-border: #44475a;
    --bs-input-focus-border: #bd93f9;
    --bs-input-focus-ring: rgba(189, 147, 249, 0.25);
    
    --bs-primary: #bd93f9;
    --bs-primary-hover: #ff79c6;
    --bs-primary-soft: rgba(189, 147, 249, 0.15);
    --bs-success: #50fa7b;
    --bs-warning: #f1fa8c;
    --bs-danger: #ff5555;
    --bs-info: #8be9fd;
}

/* ─── OPTION 10: Catppuccin Mocha (Modern Soothing Pastel) ───
   Tren UI modern terfavorit, kehangatan beludru abu-abu gelap dengan aksen lavender & peach */
[data-theme="dark"][data-dark-style="catppuccin"] {
    --bs-bg-body: #181825;
    --bs-bg-content: #181825;
    --bs-bg-card: #1e1e2e;
    --bs-bg-card-header: #1e1e2e;
    --bs-bg-topbar: #1e1e2e;
    --bs-bg-sidebar: #11111b;
    --bs-bg-sidebar-active: rgba(203, 166, 247, 0.2);
    
    --bs-text-main: #cdd6f4;
    --bs-text-secondary: #a6adc8;
    --bs-text-muted: #6c7086;
    --bs-border-color: #313244;
    --bs-border-subtle: #262738;
    
    --bs-table-th-bg: #1b1b2a;
    --bs-table-th-color: #a6adc8;
    --bs-table-td-border: #292a3d;
    --bs-table-hover: #29293e;
    --bs-table-striped: #161622;
    
    --bs-input-bg: #181825;
    --bs-input-border: #313244;
    --bs-input-focus-border: #cba6f7;
    --bs-input-focus-ring: rgba(203, 166, 247, 0.25);
    
    --bs-primary: #cba6f7;
    --bs-primary-hover: #b4befe;
    --bs-primary-soft: rgba(203, 166, 247, 0.15);
    --bs-success: #a6e3a1;
    --bs-warning: #f9e2af;
    --bs-danger: #f38ba8;
    --bs-info: #89b4fa;
}

/* ─── OPTION 11: Solarized Dark (Precision Eyecare & Optometry) ───
   Dirancang Ethan Schoonover berbasis riset CIELAB untuk eliminasi total ketegangan mata */
[data-theme="dark"][data-dark-style="solarized"] {
    --bs-bg-body: #002b36;
    --bs-bg-content: #002b36;
    --bs-bg-card: #073642;
    --bs-bg-card-header: #073642;
    --bs-bg-topbar: #073642;
    --bs-bg-sidebar: #00212b;
    --bs-bg-sidebar-active: rgba(42, 161, 152, 0.2);
    
    --bs-text-main: #93a1a1;
    --bs-text-secondary: #839496;
    --bs-text-muted: #586e75;
    --bs-border-color: #0d4b5c;
    --bs-border-subtle: #083e4c;
    
    --bs-table-th-bg: #05303b;
    --bs-table-th-color: #93a1a1;
    --bs-table-td-border: #0a4453;
    --bs-table-hover: #0c4a5a;
    --bs-table-striped: #012630;
    
    --bs-input-bg: #002b36;
    --bs-input-border: #0d4b5c;
    --bs-input-focus-border: #2aa198;
    --bs-input-focus-ring: rgba(42, 161, 152, 0.25);
    
    --bs-primary: #2aa198;
    --bs-primary-hover: #268bd2;
    --bs-primary-soft: rgba(42, 161, 152, 0.15);
    --bs-success: #859900;
    --bs-warning: #b58900;
    --bs-danger: #dc322f;
    --bs-info: #268bd2;
}

/* ─── OPTION 12: Rosé Pine (Muted Dusky Warm) ───
   Nuansa senja hangat nan puitis, bebas radiasi biru, estetik & sangat nyaman */
[data-theme="dark"][data-dark-style="rosepine"] {
    --bs-bg-body: #191724;
    --bs-bg-content: #191724;
    --bs-bg-card: #21202e;
    --bs-bg-card-header: #21202e;
    --bs-bg-topbar: #21202e;
    --bs-bg-sidebar: #12101b;
    --bs-bg-sidebar-active: rgba(235, 111, 146, 0.2);
    
    --bs-text-main: #e0def4;
    --bs-text-secondary: #908caa;
    --bs-text-muted: #6e6a86;
    --bs-border-color: #2f2c44;
    --bs-border-subtle: #242236;
    
    --bs-table-th-bg: #1c1a27;
    --bs-table-th-color: #908caa;
    --bs-table-td-border: #29263c;
    --bs-table-hover: #2c2940;
    --bs-table-striped: #161420;
    
    --bs-input-bg: #191724;
    --bs-input-border: #2f2c44;
    --bs-input-focus-border: #eb6f92;
    --bs-input-focus-ring: rgba(235, 111, 146, 0.25);
    
    --bs-primary: #eb6f92;
    --bs-primary-hover: #ea9a97;
    --bs-primary-soft: rgba(235, 111, 146, 0.15);
    --bs-success: #31748f;
    --bs-warning: #f6c177;
    --bs-danger: #eb6f92;
    --bs-info: #9ccfd8;
}

/* ─── OPTION 13: Sakura & Peach Blossom (Ceria, Hangat & Manis) ───
   Latar abu-abu plum lembut (lebih cerah dari dark biasa) dengan aksen coral peach & pink ceria */
[data-theme="dark"][data-dark-style="sunset"] {
    --bs-bg-body: #252028;
    --bs-bg-content: #252028;
    --bs-bg-card: #322b35;
    --bs-bg-card-header: #322b35;
    --bs-bg-topbar: #322b35;
    --bs-bg-sidebar: #19141c;
    --bs-bg-sidebar-active: rgba(251, 113, 133, 0.2);
    
    --bs-text-main: #fff1f2;
    --bs-text-secondary: #fecdd3;
    --bs-text-muted: #fda4af;
    --bs-border-color: #4c3f52;
    --bs-border-subtle: #3a303f;
    
    --bs-table-th-bg: #2a232d;
    --bs-table-th-color: #fecdd3;
    --bs-table-td-border: #3f3444;
    --bs-table-hover: #3c3340;
    --bs-table-striped: #211c24;
    
    --bs-input-bg: #252028;
    --bs-input-border: #4c3f52;
    --bs-input-focus-border: #fb7185;
    --bs-input-focus-ring: rgba(251, 113, 133, 0.25);
    
    --bs-primary: #fb7185;
    --bs-primary-hover: #f43f5e;
    --bs-primary-soft: rgba(251, 113, 133, 0.18);
    --bs-success: #34d399;
    --bs-warning: #fb923c;
    --bs-danger: #f43f5e;
    --bs-info: #38bdf8;
}

/* ─── OPTION 14: Fresh Mint & Matcha (Ceria, Segar & Alami) ───
   Latar eucalyptus sage sejuk & lebih cerah dengan aksen hijau daun teh segar & mint ceria */
[data-theme="dark"][data-dark-style="mint"] {
    --bs-bg-body: #1c2722;
    --bs-bg-content: #1c2722;
    --bs-bg-card: #273630;
    --bs-bg-card-header: #273630;
    --bs-bg-topbar: #273630;
    --bs-bg-sidebar: #131c18;
    --bs-bg-sidebar-active: rgba(52, 211, 153, 0.2);
    
    --bs-text-main: #e8f7f0;
    --bs-text-secondary: #c2ead7;
    --bs-text-muted: #86efac;
    --bs-border-color: #3b5247;
    --bs-border-subtle: #2d3f37;
    
    --bs-table-th-bg: #21302a;
    --bs-table-th-color: #c2ead7;
    --bs-table-td-border: #32463d;
    --bs-table-hover: #31443c;
    --bs-table-striped: #18221d;
    
    --bs-input-bg: #1c2722;
    --bs-input-border: #3b5247;
    --bs-input-focus-border: #34d399;
    --bs-input-focus-ring: rgba(52, 211, 153, 0.25);
    
    --bs-primary: #34d399;
    --bs-primary-hover: #10b981;
    --bs-primary-soft: rgba(52, 211, 153, 0.18);
    --bs-success: #34d399;
    --bs-warning: #facc15;
    --bs-danger: #fb7185;
    --bs-info: #22d3ee;
}

/* ─── OPTION 15: Honey Sunflower & Amber (Cerah, Ceria & Penuh Energi) ───
   Latar caramel-slate hangat dengan aksen madu keemasan & oranye matahari yang riang */
[data-theme="dark"][data-dark-style="honey"] {
    --bs-bg-body: #26211a;
    --bs-bg-content: #26211a;
    --bs-bg-card: #332d24;
    --bs-bg-card-header: #332d24;
    --bs-bg-topbar: #332d24;
    --bs-bg-sidebar: #191510;
    --bs-bg-sidebar-active: rgba(251, 191, 36, 0.2);
    
    --bs-text-main: #fefce8;
    --bs-text-secondary: #fef08a;
    --bs-text-muted: #fde047;
    --bs-border-color: #504435;
    --bs-border-subtle: #3c3427;
    
    --bs-table-th-bg: #2d261e;
    --bs-table-th-color: #fef08a;
    --bs-table-td-border: #443a2d;
    --bs-table-hover: #3e362a;
    --bs-table-striped: #1f1b15;
    
    --bs-input-bg: #26211a;
    --bs-input-border: #504435;
    --bs-input-focus-border: #fbbf24;
    --bs-input-focus-ring: rgba(251, 191, 36, 0.25);
    
    --bs-primary: #fbbf24;
    --bs-primary-hover: #f59e0b;
    --bs-primary-soft: rgba(251, 191, 36, 0.18);
    --bs-success: #4ade80;
    --bs-warning: #fb923c;
    --bs-danger: #f87171;
    --bs-info: #38bdf8;
}

/* ─── OPTION 16: Pastel Lilac & Bubblegum (Ceria, Playful & Estetik) ───
   Latar violet dusk lembut dengan aksen lilac cerah & bubblegum pink khas visual modern */
[data-theme="dark"][data-dark-style="lavender"] {
    --bs-bg-body: #221e33;
    --bs-bg-content: #221e33;
    --bs-bg-card: #2e2944;
    --bs-bg-card-header: #2e2944;
    --bs-bg-topbar: #2e2944;
    --bs-bg-sidebar: #161321;
    --bs-bg-sidebar-active: rgba(192, 132, 252, 0.2);
    
    --bs-text-main: #f5f3ff;
    --bs-text-secondary: #ddd6fe;
    --bs-text-muted: #c084fc;
    --bs-border-color: #49406b;
    --bs-border-subtle: #383053;
    
    --bs-table-th-bg: #27223b;
    --bs-table-th-color: #ddd6fe;
    --bs-table-td-border: #3d3559;
    --bs-table-hover: #3b3457;
    --bs-table-striped: #1c182b;
    
    --bs-input-bg: #221e33;
    --bs-input-border: #49406b;
    --bs-input-focus-border: #c084fc;
    --bs-input-focus-ring: rgba(192, 132, 252, 0.25);
    
    --bs-primary: #c084fc;
    --bs-primary-hover: #a855f7;
    --bs-primary-soft: rgba(192, 132, 252, 0.18);
    --bs-success: #4ade80;
    --bs-warning: #facc15;
    --bs-danger: #f472b6;
    --bs-info: #38bdf8;
}

/* ─── OPTION 17: Summer Sky & Cyan Breeze (Cerah, Lapang & Segar) ───
   Latar denim biru langit lapang (mid-tone) dengan aksen biru langit cerah & cyan toska */
[data-theme="dark"][data-dark-style="sky"] {
    --bs-bg-body: #192635;
    --bs-bg-content: #192635;
    --bs-bg-card: #223447;
    --bs-bg-card-header: #223447;
    --bs-bg-topbar: #223447;
    --bs-bg-sidebar: #101924;
    --bs-bg-sidebar-active: rgba(56, 189, 248, 0.2);
    
    --bs-text-main: #f0f9ff;
    --bs-text-secondary: #bae6fd;
    --bs-text-muted: #7dd3fc;
    --bs-border-color: #35506c;
    --bs-border-subtle: #293e54;
    
    --bs-table-th-bg: #1e2e3f;
    --bs-table-th-color: #bae6fd;
    --bs-table-td-border: #2e465f;
    --bs-table-hover: #2d435b;
    --bs-table-striped: #141f2c;
    
    --bs-input-bg: #192635;
    --bs-input-border: #35506c;
    --bs-input-focus-border: #38bdf8;
    --bs-input-focus-ring: rgba(56, 189, 248, 0.25);
    
    --bs-primary: #38bdf8;
    --bs-primary-hover: #0ea5e9;
    --bs-primary-soft: rgba(56, 189, 248, 0.18);
    --bs-success: #2dd4bf;
    --bs-warning: #fde047;
    --bs-danger: #fb7185;
    --bs-info: #22d3ee;
}

/* ─── OPTION 18: Warm Paper & Soft Latte (Cerah Lembut Bebas Silau / Anti-Glare) ───
   Pilihan cerah/terang berbasis kertas krem oat, 100% bebas silau putih LED standar */
[data-theme="dark"][data-dark-style="cream"],
[data-dark-style="cream"] {
    --bs-bg-body: #f4efe6;
    --bs-bg-content: #f4efe6;
    --bs-bg-card: #fcfaf7;
    --bs-bg-card-header: #f7f3ec;
    --bs-bg-topbar: #fcfaf7;
    --bs-bg-sidebar: #2b2520;
    --bs-bg-sidebar-active: rgba(234, 88, 12, 0.18);
    
    --bs-text-main: #292524;
    --bs-text-secondary: #57534e;
    --bs-text-muted: #78716c;
    --bs-border-color: #ded7cc;
    --bs-border-subtle: #eae4da;
    
    --bs-table-th-bg: #ece5dc;
    --bs-table-th-color: #44403c;
    --bs-table-td-border: #eae4da;
    --bs-table-hover: #ede6dd;
    --bs-table-striped: #f7f3eb;
    
    --bs-input-bg: #ffffff;
    --bs-input-border: #d3cbbf;
    --bs-input-focus-border: #f97316;
    --bs-input-focus-ring: rgba(249, 115, 22, 0.2);
    
    --bs-primary: #ea580c;
    --bs-primary-hover: #c2410c;
    --bs-primary-soft: rgba(234, 88, 12, 0.12);
    --bs-success: #16a34a;
    --bs-warning: #d97706;
    --bs-danger: #e11d48;
    --bs-info: #0284c7;
    
    --bs-shadow-sm: 0 1px 3px rgba(41, 37, 36, 0.06);
    --bs-shadow-md: 0 4px 12px rgba(41, 37, 36, 0.08);
    --bs-shadow-lg: 0 10px 20px rgba(41, 37, 36, 0.1);
}

/* ─── OPTION 19: Sweet Peach & Coral Glow (Ceria, Manis & Hangat) ───
   Nuansa peach hangat & coral ceria dengan kontras lembut tanpa silau */
[data-theme="dark"][data-dark-style="peach"] {
    --bs-bg-body: #2b2323;
    --bs-bg-content: #2b2323;
    --bs-bg-card: #382e2e;
    --bs-bg-card-header: #382e2e;
    --bs-bg-topbar: #382e2e;
    --bs-bg-sidebar: #1d1616;
    --bs-bg-sidebar-active: rgba(255, 122, 89, 0.2);
    
    --bs-text-main: #fff5f5;
    --bs-text-secondary: #fed7d7;
    --bs-text-muted: #feb2b2;
    --bs-border-color: #554444;
    --bs-border-subtle: #413535;
    
    --bs-table-th-bg: #302626;
    --bs-table-th-color: #fed7d7;
    --bs-table-td-border: #463737;
    --bs-table-hover: #423535;
    --bs-table-striped: #251d1d;
    
    --bs-input-bg: #2b2323;
    --bs-input-border: #554444;
    --bs-input-focus-border: #ff7a59;
    --bs-input-focus-ring: rgba(255, 122, 89, 0.25);
    
    --bs-primary: #ff7a59;
    --bs-primary-hover: #ff5722;
    --bs-primary-soft: rgba(255, 122, 89, 0.18);
    --bs-success: #38a169;
    --bs-warning: #ecc94b;
    --bs-danger: #e53e3e;
    --bs-info: #3182ce;
}

/* ─── OPTION 20: Berry Rose & Velvet (Ceria, Anggun & Pop) ───
   Perpaduan mulberry lembut dengan aksen rose ceria & pink raspberry */
[data-theme="dark"][data-dark-style="rose"] {
    --bs-bg-body: #271e25;
    --bs-bg-content: #271e25;
    --bs-bg-card: #352832;
    --bs-bg-card-header: #352832;
    --bs-bg-topbar: #352832;
    --bs-bg-sidebar: #1a1318;
    --bs-bg-sidebar-active: rgba(244, 63, 94, 0.2);
    
    --bs-text-main: #fdf2f8;
    --bs-text-secondary: #fbcfe8;
    --bs-text-muted: #f472b6;
    --bs-border-color: #523b4e;
    --bs-border-subtle: #3f2e3c;
    
    --bs-table-th-bg: #2d212b;
    --bs-table-th-color: #fbcfe8;
    --bs-table-td-border: #443240;
    --bs-table-hover: #402f3c;
    --bs-table-striped: #211920;
    
    --bs-input-bg: #271e25;
    --bs-input-border: #523b4e;
    --bs-input-focus-border: #f43f5e;
    --bs-input-focus-ring: rgba(244, 63, 94, 0.25);
    
    --bs-primary: #f43f5e;
    --bs-primary-hover: #e11d48;
    --bs-primary-soft: rgba(244, 63, 94, 0.18);
    --bs-success: #10b981;
    --bs-warning: #f59e0b;
    --bs-danger: #f43f5e;
    --bs-info: #06b6d4;
}

/* ─── OPTION 21: Taro Milk & Violet Cream (Ceria, Manis & Kekinian) ───
   Warna taro lembut dengan aksen violet cerah & lavender modern */
[data-theme="dark"][data-dark-style="taro"] {
    --bs-bg-body: #252030;
    --bs-bg-content: #252030;
    --bs-bg-card: #322b40;
    --bs-bg-card-header: #322b40;
    --bs-bg-topbar: #322b40;
    --bs-bg-sidebar: #181420;
    --bs-bg-sidebar-active: rgba(168, 85, 247, 0.2);
    
    --bs-text-main: #faf5ff;
    --bs-text-secondary: #e9d5ff;
    --bs-text-muted: #c084fc;
    --bs-border-color: #4e4063;
    --bs-border-subtle: #3b314b;
    
    --bs-table-th-bg: #2b2438;
    --bs-table-th-color: #e9d5ff;
    --bs-table-td-border: #423654;
    --bs-table-hover: #3d334e;
    --bs-table-striped: #1f1a28;
    
    --bs-input-bg: #252030;
    --bs-input-border: #4e4063;
    --bs-input-focus-border: #a855f7;
    --bs-input-focus-ring: rgba(168, 85, 247, 0.25);
    
    --bs-primary: #a855f7;
    --bs-primary-hover: #9333ea;
    --bs-primary-soft: rgba(168, 85, 247, 0.18);
    --bs-success: #22c55e;
    --bs-warning: #fbbf24;
    --bs-danger: #f43f5e;
    --bs-info: #38bdf8;
}

/* ─── OPTION 22: Eucalyptus & Sage Mist (Sejuk, Alami & Sangat Adem) ───
   Warna daun sage lembut yang sangat rileks di mata dengan aksen hijau mint ceria */
[data-theme="dark"][data-dark-style="sage"] {
    --bs-bg-body: #1e2622;
    --bs-bg-content: #1e2622;
    --bs-bg-card: #28342f;
    --bs-bg-card-header: #28342f;
    --bs-bg-topbar: #28342f;
    --bs-bg-sidebar: #131a17;
    --bs-bg-sidebar-active: rgba(74, 222, 128, 0.2);
    
    --bs-text-main: #f0fdf4;
    --bs-text-secondary: #bbf7d0;
    --bs-text-muted: #86efac;
    --bs-border-color: #3d5047;
    --bs-border-subtle: #2e3d36;
    
    --bs-table-th-bg: #222d28;
    --bs-table-th-color: #bbf7d0;
    --bs-table-td-border: #35453e;
    --bs-table-hover: #33433c;
    --bs-table-striped: #18201c;
    
    --bs-input-bg: #1e2622;
    --bs-input-border: #3d5047;
    --bs-input-focus-border: #4ade80;
    --bs-input-focus-ring: rgba(74, 222, 128, 0.25);
    
    --bs-primary: #4ade80;
    --bs-primary-hover: #22c55e;
    --bs-primary-soft: rgba(74, 222, 128, 0.18);
    --bs-success: #4ade80;
    --bs-warning: #facc15;
    --bs-danger: #f87171;
    --bs-info: #2dd4bf;
}

/* ─── OPTION 23: Pacific Teal & Aquamarine (Segar, Bersih & Tropis) ───
   Nuansa laguna laut tropis yang segar dengan aksen aquamarine & pirus ceria */
[data-theme="dark"][data-dark-style="ocean"] {
    --bs-bg-body: #17262a;
    --bs-bg-content: #17262a;
    --bs-bg-card: #20343a;
    --bs-bg-card-header: #20343a;
    --bs-bg-topbar: #20343a;
    --bs-bg-sidebar: #0f1a1d;
    --bs-bg-sidebar-active: rgba(45, 212, 191, 0.2);
    
    --bs-text-main: #ecfeff;
    --bs-text-secondary: #a5f3fc;
    --bs-text-muted: #67e8f9;
    --bs-border-color: #315059;
    --bs-border-subtle: #243c43;
    
    --bs-table-th-bg: #1b2d32;
    --bs-table-th-color: #a5f3fc;
    --bs-table-td-border: #2a444c;
    --bs-table-hover: #29424a;
    --bs-table-striped: #132023;
    
    --bs-input-bg: #17262a;
    --bs-input-border: #315059;
    --bs-input-focus-border: #2dd4bf;
    --bs-input-focus-ring: rgba(45, 212, 191, 0.25);
    
    --bs-primary: #2dd4bf;
    --bs-primary-hover: #14b8a6;
    --bs-primary-soft: rgba(45, 212, 191, 0.18);
    --bs-success: #34d399;
    --bs-warning: #fde047;
    --bs-danger: #fb7185;
    --bs-info: #38bdf8;
}

/* ─── OPTION 24: Warm Olive & Golden Herb (Hangat, Organik & Berkarakter) ───
   Nuansa daun zaitun alami dengan aksen keemasan & hijau segar */
[data-theme="dark"][data-dark-style="olive"] {
    --bs-bg-body: #23251c;
    --bs-bg-content: #23251c;
    --bs-bg-card: #303326;
    --bs-bg-card-header: #303326;
    --bs-bg-topbar: #303326;
    --bs-bg-sidebar: #171812;
    --bs-bg-sidebar-active: rgba(163, 230, 53, 0.2);
    
    --bs-text-main: #fefce8;
    --bs-text-secondary: #fef08a;
    --bs-text-muted: #d9f99d;
    --bs-border-color: #4b503b;
    --bs-border-subtle: #383c2c;
    
    --bs-table-th-bg: #292c20;
    --bs-table-th-color: #fef08a;
    --bs-table-td-border: #3f4332;
    --bs-table-hover: #3d4130;
    --bs-table-striped: #1b1d16;
    
    --bs-input-bg: #23251c;
    --bs-input-border: #4b503b;
    --bs-input-focus-border: #a3e635;
    --bs-input-focus-ring: rgba(163, 230, 53, 0.25);
    
    --bs-primary: #a3e635;
    --bs-primary-hover: #84cc16;
    --bs-primary-soft: rgba(163, 230, 53, 0.18);
    --bs-success: #4ade80;
    --bs-warning: #facc15;
    --bs-danger: #f87171;
    --bs-info: #22d3ee;
}

/* ─── OPTION 25: Cozy Caramel & Macchiato (Hangat Kafe & Nyaman) ───
   Nuansa kayu karamel manis dan kopi susu hangat yang ramah mata */
[data-theme="dark"][data-dark-style="sepia"] {
    --bs-bg-body: #26201b;
    --bs-bg-content: #26201b;
    --bs-bg-card: #342c25;
    --bs-bg-card-header: #342c25;
    --bs-bg-topbar: #342c25;
    --bs-bg-sidebar: #181410;
    --bs-bg-sidebar-active: rgba(249, 115, 22, 0.2);
    
    --bs-text-main: #fffbeb;
    --bs-text-secondary: #fef3c7;
    --bs-text-muted: #fed7aa;
    --bs-border-color: #524438;
    --bs-border-subtle: #3e332a;
    
    --bs-table-th-bg: #2d251f;
    --bs-table-th-color: #fef3c7;
    --bs-table-td-border: #44372e;
    --bs-table-hover: #40342b;
    --bs-table-striped: #1e1915;
    
    --bs-input-bg: #26201b;
    --bs-input-border: #524438;
    --bs-input-focus-border: #f97316;
    --bs-input-focus-ring: rgba(249, 115, 22, 0.25);
    
    --bs-primary: #f97316;
    --bs-primary-hover: #ea580c;
    --bs-primary-soft: rgba(249, 115, 22, 0.18);
    --bs-success: #10b981;
    --bs-warning: #fbbf24;
    --bs-danger: #ef4444;
    --bs-info: #0ea5e9;
}

/* ─── OPTION 26: Vanilla Oat & Hazelnut (Soft Bright / Cerah Lembut) ───
   Cerah bernuansa vanila susu oat, lembut dan sama sekali tidak membuat mata silau */
[data-theme="dark"][data-dark-style="vanilla"],
[data-dark-style="vanilla"] {
    --bs-bg-body: #ece6dc;
    --bs-bg-content: #ece6dc;
    --bs-bg-card: #f7f3ec;
    --bs-bg-card-header: #f2ede4;
    --bs-bg-topbar: #f7f3ec;
    --bs-bg-sidebar: #282420;
    --bs-bg-sidebar-active: rgba(217, 119, 6, 0.18);
    
    --bs-text-main: #332f2b;
    --bs-text-secondary: #5e5750;
    --bs-text-muted: #7d746b;
    --bs-border-color: #d6cdc1;
    --bs-border-subtle: #ded6cb;
    
    --bs-table-th-bg: #e2dbcf;
    --bs-table-th-color: #48413a;
    --bs-table-td-border: #ded6cb;
    --bs-table-hover: #dfd8cc;
    --bs-table-striped: #f1ebd4;
    
    --bs-input-bg: #ffffff;
    --bs-input-border: #c8beaf;
    --bs-input-focus-border: #d97706;
    --bs-input-focus-ring: rgba(217, 119, 6, 0.2);
    
    --bs-primary: #d97706;
    --bs-primary-hover: #b45309;
    --bs-primary-soft: rgba(217, 119, 6, 0.14);
    --bs-success: #15803d;
    --bs-warning: #d97706;
    --bs-danger: #dc2626;
    --bs-info: #0369a1;
    
    --bs-shadow-sm: 0 1px 3px rgba(40, 36, 32, 0.08);
    --bs-shadow-md: 0 4px 12px rgba(40, 36, 32, 0.1);
}

/* ─── OPTION 27: Parchment Golden Glow (Reading Eye-Comfort) ───
   Cerah bernuansa perkamen keemasan hangat khas buku klasik, sejuk di mata */
[data-theme="dark"][data-dark-style="parchment"],
[data-dark-style="parchment"] {
    --bs-bg-body: #e8e0d0;
    --bs-bg-content: #e8e0d0;
    --bs-bg-card: #f4ede0;
    --bs-bg-card-header: #eee5d4;
    --bs-bg-topbar: #f4ede0;
    --bs-bg-sidebar: #26221c;
    --bs-bg-sidebar-active: rgba(194, 65, 12, 0.18);
    
    --bs-text-main: #2b2721;
    --bs-text-secondary: #595045;
    --bs-text-muted: #796d60;
    --bs-border-color: #d1c7b3;
    --bs-border-subtle: #dcd2bf;
    
    --bs-table-th-bg: #ded3bf;
    --bs-table-th-color: #40382f;
    --bs-table-td-border: #dcd2bf;
    --bs-table-hover: #dad0bc;
    --bs-table-striped: #eee5d4;
    
    --bs-input-bg: #ffffff;
    --bs-input-border: #c3b7a0;
    --bs-input-focus-border: #c2410c;
    --bs-input-focus-ring: rgba(194, 65, 12, 0.2);
    
    --bs-primary: #c2410c;
    --bs-primary-hover: #9a3412;
    --bs-primary-soft: rgba(194, 65, 12, 0.14);
    --bs-success: #047857;
    --bs-warning: #b45309;
    --bs-danger: #b91c1c;
    --bs-info: #0284c7;
    
    --bs-shadow-sm: 0 1px 3px rgba(38, 34, 28, 0.08);
    --bs-shadow-md: 0 4px 12px rgba(38, 34, 28, 0.1);
}

/* ─── OPTION 28: Neon Sunset & Cyber Pink (Ceria, Berenergi & Futuristik) ───
   Kontras ceria neon pink & cyan yang memukau tanpa menyilaukan */
[data-theme="dark"][data-dark-style="cyberpunk"] {
    --bs-bg-body: #191826;
    --bs-bg-content: #191826;
    --bs-bg-card: #232236;
    --bs-bg-card-header: #232236;
    --bs-bg-topbar: #232236;
    --bs-bg-sidebar: #100f1c;
    --bs-bg-sidebar-active: rgba(244, 63, 94, 0.22);
    
    --bs-text-main: #f8fafc;
    --bs-text-secondary: #e2e8f0;
    --bs-text-muted: #cbd5e1;
    --bs-border-color: #3e3b5e;
    --bs-border-subtle: #2d2b45;
    
    --bs-table-th-bg: #1e1d30;
    --bs-table-th-color: #e2e8f0;
    --bs-table-td-border: #343250;
    --bs-table-hover: #32304d;
    --bs-table-striped: #151421;
    
    --bs-input-bg: #191826;
    --bs-input-border: #3e3b5e;
    --bs-input-focus-border: #f43f5e;
    --bs-input-focus-ring: rgba(244, 63, 94, 0.25);
    
    --bs-primary: #f43f5e;
    --bs-primary-hover: #fb7185;
    --bs-primary-soft: rgba(244, 63, 94, 0.18);
    --bs-success: #06b6d4;
    --bs-warning: #facc15;
    --bs-danger: #f43f5e;
    --bs-info: #06b6d4;
}

/* ─── OPTION 29: Electric Tangerine & Mango (Ceria, Segar & Bersinar) ───
   Warna oranye ceria jeruk tangerine yang membangkitkan keceriaan & semangat */
[data-theme="dark"][data-dark-style="tangerine"] {
    --bs-bg-body: #271f18;
    --bs-bg-content: #271f18;
    --bs-bg-card: #352b22;
    --bs-bg-card-header: #352b22;
    --bs-bg-topbar: #352b22;
    --bs-bg-sidebar: #18130e;
    --bs-bg-sidebar-active: rgba(255, 107, 0, 0.2);
    
    --bs-text-main: #fff7ed;
    --bs-text-secondary: #ffedd5;
    --bs-text-muted: #fed7aa;
    --bs-border-color: #554333;
    --bs-border-subtle: #413326;
    
    --bs-table-th-bg: #2e241c;
    --bs-table-th-color: #ffedd5;
    --bs-table-td-border: #463628;
    --bs-table-hover: #433527;
    --bs-table-striped: #201812;
    
    --bs-input-bg: #271f18;
    --bs-input-border: #554333;
    --bs-input-focus-border: #ff6b00;
    --bs-input-focus-ring: rgba(255, 107, 0, 0.25);
    
    --bs-primary: #ff6b00;
    --bs-primary-hover: #ea580c;
    --bs-primary-soft: rgba(255, 107, 0, 0.18);
    --bs-success: #22c55e;
    --bs-warning: #ffc107;
    --bs-danger: #ef4444;
    --bs-info: #0ea5e9;
}

/* ─── OPTION 30: Breeze Glacier & Soft Ice (Cerah, Bersih & Sejuk) ───
   Biru gletser lembut yang terang, sejuk, dan memberikan kejernihan visual maksimal */
[data-theme="dark"][data-dark-style="breeze"] {
    --bs-bg-body: #1c242e;
    --bs-bg-content: #1c242e;
    --bs-bg-card: #26313e;
    --bs-bg-card-header: #26313e;
    --bs-bg-topbar: #26313e;
    --bs-bg-sidebar: #12171e;
    --bs-bg-sidebar-active: rgba(56, 189, 248, 0.2);
    
    --bs-text-main: #f0f9ff;
    --bs-text-secondary: #e0f2fe;
    --bs-text-muted: #93c5fd;
    --bs-border-color: #3b4d61;
    --bs-border-subtle: #2d3b4a;
    
    --bs-table-th-bg: #212b37;
    --bs-table-th-color: #e0f2fe;
    --bs-table-td-border: #334354;
    --bs-table-hover: #314050;
    --bs-table-striped: #161c24;
    
    --bs-input-bg: #1c242e;
    --bs-input-border: #3b4d61;
    --bs-input-focus-border: #38bdf8;
    --bs-input-focus-ring: rgba(56, 189, 248, 0.25);
    
    --bs-primary: #38bdf8;
    --bs-primary-hover: #0284c7;
    --bs-primary-soft: rgba(56, 189, 248, 0.18);
    --bs-success: #10b981;
    --bs-warning: #facc15;
    --bs-danger: #f43f5e;
    --bs-info: #67e8f9;
}

/* ==========================================================================
   NUCLEAR DARK MODE RESET: Eliminates All White Leaks & Dark Text
   ========================================================================== */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] [class*="bg-white"],
[data-theme="dark"] [class*="bg-light"] {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-footer.bg-white,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--bs-bg-card-header) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] [class*="text-dark"] {
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .input-group-text,
[data-theme="dark"] .input-group-text.bg-white {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border) !important;
    color: var(--bs-text-muted) !important;
}

[data-theme="dark"] table.bg-white,
[data-theme="dark"] .table.bg-white,
[data-theme="dark"] .table-light,
[data-theme="dark"] .thead-light th,
[data-theme="dark"] tr.bg-white,
[data-theme="dark"] td.bg-white,
[data-theme="dark"] th.bg-white {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .summary-card,
[data-theme="dark"] .tab-panel-card,
[data-theme="dark"] .entry-block,
[data-theme="dark"] .card-dashboard,
[data-theme="dark"] .card-box {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"] {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
}

/* Tabs & Navs in Dark Mode */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--bs-border-color) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--bs-text-muted) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary) !important;
    background-color: var(--bs-bg-card) !important;
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-bg-card) !important;
}

[data-theme="dark"] .tab-content {
    background-color: var(--bs-bg-card) !important;
    border-color: var(--bs-border-color) !important;
}

/* List group in Dark Mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--bs-bg-card) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
}

/* Theme-Aware Alerts for Dark Mode */
[data-theme="dark"] .alert {
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .alert-secondary {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-text-main) !important;
    border-color: var(--bs-border-color) !important;
}

[data-theme="dark"] .alert-light {
    background-color: var(--bs-bg-card-header) !important;
    color: var(--bs-text-main) !important;
    border-color: var(--bs-border-color) !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(6, 182, 212, 0.15) !important;
    color: #67e8f9 !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Code tags in Dark Mode */
[data-theme="dark"] code,
[data-theme="dark"] code.bg-light {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-border-color) !important;
}

/* Native Calendar & Time Picker Indicator in Dark Mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    cursor: pointer;
}

/* Fix borders across dark mode */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: var(--bs-border-color) !important;
}

/* Badges with bg-white in dark mode */
[data-theme="dark"] .badge.bg-white {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & BASE ELEMENTS
   ========================================================================== */
html, body {
    font-family: var(--bs-font-sans) !important;
    background-color: var(--bs-bg-body) !important;
    color: var(--bs-text-main) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.012em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-font-sans) !important;
    font-weight: 600;
    color: var(--bs-text-main) !important;
    letter-spacing: -0.02em;
}

.text-muted {
    color: var(--bs-text-muted) !important;
}

hr {
    border-color: var(--bs-border-color) !important;
}

/* Page content wrappers */
#wrapper {
    background-color: var(--bs-bg-body) !important;
}

.content-page {
    background-color: var(--bs-bg-content) !important;
}

.content {
    background-color: var(--bs-bg-content) !important;
    padding-top: 25px;
}

/* ==========================================================================
   3. TOPBAR & NAVIGATION
   ========================================================================== */
.topbar {
    background-color: var(--bs-bg-topbar) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    box-shadow: var(--bs-shadow-sm) !important;
}

.navbar-custom {
    background-color: var(--bs-bg-topbar) !important;
}

.topbar .page-title-box .page-title {
    color: var(--bs-text-main) !important;
    font-weight: 700;
    font-size: 1.15rem;
}

.topbar .page-title-box .breadcrumb .breadcrumb-item {
    color: var(--bs-text-muted) !important;
    font-size: 0.85rem;
}

.button-menu-mobile {
    color: var(--bs-text-main) !important;
}

/* Sidebar Styling Dark Mode Complete Lockdown */
[data-theme="dark"] .side-menu,
[data-theme="dark"] .left.side-menu,
[data-theme="dark"] .slimscroll-menu,
[data-theme="dark"] #sidebar-menu,
[data-theme="dark"] #sidebar-menu ul,
[data-theme="dark"] #sidebar-menu li,
[data-theme="dark"] #sidebar-menu .nav-second-level,
[data-theme="dark"] #sidebar-menu .nav-third-level,
[data-theme="dark"] .enlarged #wrapper .left.side-menu #sidebar-menu ul ul {
    background-color: var(--bs-bg-sidebar) !important;
}

[data-theme="dark"] .topbar-left {
    background-color: var(--bs-bg-sidebar) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

[data-theme="dark"] #sidebar-menu a,
[data-theme="dark"] #sidebar-menu li a,
[data-theme="dark"] #sidebar-menu > ul > li > a,
[data-theme="dark"] #sidebar-menu .nav-second-level li a,
[data-theme="dark"] #sidebar-menu .nav-third-level li a {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

[data-theme="dark"] #sidebar-menu a:hover,
[data-theme="dark"] #sidebar-menu a:focus,
[data-theme="dark"] #sidebar-menu a:active,
[data-theme="dark"] #sidebar-menu li a:hover,
[data-theme="dark"] #sidebar-menu li a:focus,
[data-theme="dark"] #sidebar-menu li a:active,
[data-theme="dark"] #sidebar-menu > ul > li > a:hover,
[data-theme="dark"] #sidebar-menu > ul > li > a:focus,
[data-theme="dark"] #sidebar-menu > ul > li > a:active,
[data-theme="dark"] #sidebar-menu .nav-second-level li a:hover,
[data-theme="dark"] #sidebar-menu .nav-second-level li a:focus,
[data-theme="dark"] #sidebar-menu .nav-third-level li a:hover,
[data-theme="dark"] #sidebar-menu .nav-third-level li a:focus,
[data-theme="dark"] .enlarged #wrapper .left.side-menu #sidebar-menu ul > li:hover > a {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-radius: var(--bs-radius-sm);
}

[data-theme="dark"] #sidebar-menu > ul > li > a.active,
[data-theme="dark"] #sidebar-menu li.active > a,
[data-theme="dark"] #sidebar-menu li.mm-active > a,
[data-theme="dark"] #sidebar-menu .nav-second-level li.active > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-radius: var(--bs-radius-sm);
}

/* Premium Tabs & All Tab Variants Dark Override */
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-tabs-premium,
[data-theme="dark"] .nav-tabs-custom,
[data-theme="dark"] ul.nav-tabs,
[data-theme="dark"] .card-header .nav-tabs,
[data-theme="dark"] .card-header .nav-tabs-premium {
    background-color: var(--bs-bg-card) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-tabs-premium .nav-link {
    color: var(--bs-text-muted) !important;
    background-color: transparent !important;
    border: none !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .nav-tabs-premium .nav-link:hover {
    color: var(--bs-text-main) !important;
    background-color: var(--bs-table-hover) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs-premium .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-radius: var(--bs-radius-sm) !important;
    border: none !important;
}

[data-theme="dark"] .section-title {
    color: var(--bs-text-main) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-border-subtle) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
}

.theme-toggle-btn:hover {
    background-color: var(--bs-border-color) !important;
    transform: rotate(15deg) scale(1.05);
}

.theme-toggle-btn i {
    font-size: 1.15rem;
    line-height: 1;
}

/* Dark Mode Palette Dropdown Styling */
.dark-style-dropdown-menu {
    min-width: 340px !important;
    max-height: 540px;
    overflow-y: auto;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    padding: 8px 6px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

.dark-style-dropdown-menu #search-theme-input {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-sm);
}

.dark-style-dropdown-menu #search-theme-input::placeholder {
    color: var(--bs-text-muted) !important;
    opacity: 0.8;
}

.dark-style-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}
.dark-style-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: var(--bs-border-color);
    border-radius: 10px;
}

.dark-style-group-header {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-text-muted);
    padding: 10px 12px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dark-style-item {
    border-radius: var(--bs-radius-md) !important;
    padding: 7px 12px !important;
    transition: all 0.15s ease;
    color: var(--bs-text-main) !important;
    text-decoration: none !important;
    display: block;
    position: relative;
    margin-bottom: 2px;
}

.dark-style-item:hover {
    background-color: var(--bs-table-hover) !important;
}

.dark-style-item.active-style {
    background-color: var(--bs-primary-soft) !important;
}

.dark-style-item.active-style::after {
    content: "✓";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    color: var(--bs-primary);
    font-size: 13px;
}

.dark-style-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dark-style-swatch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ==========================================================================
   4. MODERN CARDS & CONTAINERS
   ========================================================================== */
.card, .card-box {
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: var(--bs-shadow-md) !important;
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-header {
    background-color: var(--bs-bg-card-header) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: 16px 20px !important;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-bottom: none !important;
}

.card-body {
    padding: 22px !important;
    color: var(--bs-text-main) !important;
}

.tilebox-one {
    border-radius: var(--bs-radius-lg) !important;
}

.tilebox-one h2 {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   5. MODERN BUTTONS
   ========================================================================== */
.btn {
    font-family: var(--bs-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: var(--bs-radius-md) !important;
    padding: 0.5rem 1.1rem !important;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--bs-shadow-sm) !important;
    border: 1px solid transparent !important;
}

.btn:hover {
    transform: translateY(-1.5px);
    box-shadow: var(--bs-shadow-md) !important;
}

.btn:active {
    transform: translateY(0);
}

.btn:focus, .btn.focus {
    box-shadow: 0 0 0 3px var(--bs-primary-soft) !important;
    outline: none !important;
}

/* Button Variants */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    border-color: #e11d48 !important;
    color: #ffffff !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    border-color: #be123c !important;
    color: #ffffff !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

.btn-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
}
.btn-secondary:hover {
    background-color: var(--bs-secondary-hover) !important;
    border-color: var(--bs-secondary-hover) !important;
    color: #ffffff !important;
}

.btn-light {
    background-color: var(--bs-border-subtle) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
}
.btn-light:hover {
    background-color: var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
}

.btn-sm {
    font-size: 0.775rem !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: var(--bs-radius-sm) !important;
}

.btn-lg {
    font-size: 0.95rem !important;
    padding: 0.65rem 1.4rem !important;
    border-radius: var(--bs-radius-lg) !important;
}

/* ==========================================================================
   6. MODERN TABLES & YAJRA DATATABLES
   ========================================================================== */
.table-responsive {
    border-radius: var(--bs-radius-md);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-bg-card);
}

table.dataTable,
.table {
    width: 100% !important;
    margin-bottom: 0 !important;
    color: var(--bs-text-main) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

table.dataTable thead th,
.table thead th {
    background-color: var(--bs-table-th-bg) !important;
    color: var(--bs-table-th-color) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 13px 16px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
}

table.dataTable tbody td,
.table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--bs-table-td-border) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    color: var(--bs-text-main) !important;
    font-size: 0.865rem !important;
}

table.dataTable.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped) !important;
}

table.dataTable tbody tr:hover,
.table tbody tr:hover td {
    background-color: var(--bs-table-hover) !important;
    transition: background-color 0.15s ease;
}

/* DataTables Toolbars (Search, Length, Pagination) */
.dataTables_wrapper {
    padding: 14px 10px 4px 10px;
    color: var(--bs-text-muted) !important;
    font-size: 0.85rem !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-weight: 500;
    color: var(--bs-text-muted) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_filter input {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-md) !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    outline: none !important;
    margin-left: 6px;
    box-shadow: var(--bs-shadow-sm) !important;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bs-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--bs-input-focus-ring) !important;
}

.dataTables_wrapper .dataTables_length select {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-sm) !important;
    padding: 5px 10px !important;
    outline: none !important;
    margin: 0 6px;
}

.dataTables_wrapper .dataTables_info {
    color: var(--bs-text-muted) !important;
    padding-top: 14px !important;
    font-size: 0.825rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 4px;
    margin: 0 !important;
}

.dataTables_wrapper .page-item .page-link {
    border-radius: var(--bs-radius-sm) !important;
    border: 1px solid var(--bs-border-color) !important;
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
    padding: 6px 12px !important;
    font-size: 0.825rem !important;
    font-weight: 500;
    box-shadow: var(--bs-shadow-sm);
    transition: all 0.2s ease;
}

.dataTables_wrapper .page-item .page-link:hover {
    background-color: var(--bs-border-subtle) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-primary) !important;
}

.dataTables_wrapper .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(99, 102, 241, 0.4) !important;
}

.dataTables_wrapper .page-item.disabled .page-link {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-muted) !important;
    opacity: 0.5;
}

/* ==========================================================================
   7. MODERN BADGES
   ========================================================================== */
.badge {
    font-family: var(--bs-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.735rem !important;
    padding: 0.35em 0.8em !important;
    border-radius: var(--bs-radius-pill) !important;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-primary, .badge-soft-primary, .bg-label-primary {
    background-color: var(--bs-primary-soft) !important;
    color: var(--bs-primary) !important;
}

.badge-success, .badge-soft-success, .bg-label-success {
    background-color: var(--bs-success-soft) !important;
    color: var(--bs-success) !important;
}

.badge-danger, .badge-soft-danger, .bg-label-danger {
    background-color: var(--bs-danger-soft) !important;
    color: var(--bs-danger) !important;
}

.badge-warning, .badge-soft-warning, .bg-label-warning {
    background-color: var(--bs-warning-soft) !important;
    color: var(--bs-warning) !important;
}

.badge-info, .badge-soft-info, .bg-label-info {
    background-color: var(--bs-info-soft) !important;
    color: var(--bs-info) !important;
}

.badge-secondary, .badge-soft-secondary, .bg-label-secondary {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-text-secondary) !important;
    border: 1px solid var(--bs-border-color);
}

.badge.bg-light.text-dark {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-text-main) !important;
    border-color: var(--bs-border-color) !important;
}

/* ==========================================================================
   8. MODERN FORM CONTROLS & INPUTS
   ========================================================================== */
label,
.form-label,
.form-group label {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--bs-text-secondary) !important;
    margin-bottom: 6px !important;
}

.form-control,
.custom-select {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-md) !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.875rem !important;
    box-shadow: var(--bs-shadow-sm) !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--bs-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--bs-input-focus-ring) !important;
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-text-main) !important;
}

.form-control::placeholder {
    color: var(--bs-text-muted) !important;
    opacity: 0.7;
}

/* Disabled and Readonly States */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-text-muted) !important;
    border-color: var(--bs-input-border) !important;
    opacity: 0.85 !important;
    cursor: not-allowed;
}

/* Select boxes */
select.form-control,
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px 10px !important;
    padding-right: 2.25rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.form-control option,
.custom-select option {
    background-color: var(--bs-bg-card);
    color: var(--bs-text-main);
}

.input-group-text {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border) !important;
    color: var(--bs-text-secondary) !important;
}

/* ==========================================================================
   9. MODALS & DROPDOWNS
   ========================================================================== */
.modal-content {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: var(--bs-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    background-color: var(--bs-bg-card-header) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: 16px 22px !important;
}

/* Contextual Modal Headers (Preserve colored accents & white text in all themes) */
.modal-header.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}
.modal-header.bg-success {
    background-color: var(--bs-success) !important;
    color: #ffffff !important;
}
.modal-header.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #ffffff !important;
}
.modal-header.bg-info {
    background-color: var(--bs-info) !important;
    color: #ffffff !important;
}
.modal-header.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #212529 !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-primary .close,
.modal-header.bg-success .close,
.modal-header.bg-danger .close,
.modal-header.bg-info .close {
    color: #ffffff !important;
    opacity: 0.95;
    text-shadow: none !important;
}

.modal-header.bg-warning .modal-title,
.modal-header.bg-warning .close {
    color: #212529 !important;
    opacity: 0.95;
}

/* Non-contextual standard modal header typography */
.modal-header:not([class*="bg-"]) .modal-title {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--bs-text-main) !important;
}

.modal-header:not([class*="bg-"]) .close {
    color: var(--bs-text-main) !important;
    opacity: 0.6;
    text-shadow: none !important;
}

.modal-header:not([class*="bg-"]) .close:hover {
    opacity: 1;
}

.modal-title {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.modal-body {
    padding: 22px !important;
    color: var(--bs-text-main) !important;
}

.modal-footer {
    background-color: var(--bs-bg-card) !important;
    border-top: 1px solid var(--bs-border-color) !important;
    padding: 14px 22px !important;
}

.close {
    opacity: 0.6;
    text-shadow: none !important;
}

.close:hover {
    opacity: 1;
}

/* Universal .btn-close (Bootstrap 5) compatibility */
.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    border: none;
    opacity: 0.6;
    width: 1.25em;
    height: 1.25em;
    padding: 0;
    cursor: pointer;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-md) !important;
    box-shadow: var(--bs-shadow-lg) !important;
    padding: 6px 0 !important;
}

.dropdown-item {
    color: var(--bs-text-main) !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-primary) !important;
}

.dropdown-divider {
    border-top-color: var(--bs-border-color) !important;
}

/* User Box in Sidebar */
.user-box h5 a {
    color: #ffffff !important;
}

/* Footer */
.footer {
    background-color: var(--bs-bg-card) !important;
    border-top: 1px solid var(--bs-border-color) !important;
    color: var(--bs-text-muted) !important;
}

/* Smooth Transitions */
body, .card, .content-page, .topbar, .table, .form-control, .modal-content, .dropdown-menu {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ==========================================================================
   10. SELECT2 & SWEETALERT2 DARK MODE & MODERN ENHANCEMENTS
   ========================================================================== */
.table-bordered,
.table-bordered td,
.table-bordered th,
table.dataTable.table-bordered th,
table.dataTable.table-bordered td {
    border-color: var(--bs-border-color) !important;
}

/* Select2 Single & Multiple for default AND bootstrap4 themes */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    border-radius: var(--bs-radius-md) !important;
    min-height: 38px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-text-main) !important;
    padding-left: 12px !important;
    line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-text-muted) !important;
}

/* Select2 Multiple */
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--multiple {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    border-radius: var(--bs-radius-md) !important;
    min-height: 38px !important;
    padding: 3px 6px !important;
    color: var(--bs-text-main) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-bg-card-header) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-sm) !important;
    padding: 3px 8px !important;
    margin-top: 3px !important;
    margin-right: 5px !important;
    font-size: 0.8125rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-text-muted) !important;
    margin-right: 5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bs-danger) !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field,
.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    color: var(--bs-text-main) !important;
    background: transparent !important;
    border: none !important;
    margin-top: 4px !important;
}

/* Select2 Dropdown */
.select2-dropdown,
.select2-container--bootstrap4 .select2-dropdown {
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-md) !important;
    box-shadow: var(--bs-shadow-lg) !important;
    z-index: 2065 !important;
}

.select2-container--default .select2-results__option,
.select2-container--bootstrap4 .select2-results__option {
    color: var(--bs-text-main) !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-text-main) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-sm) !important;
    padding: 6px 10px !important;
}

/* SweetAlert2 Dark Mode */
[data-theme="dark"] .swal2-popup {
    background-color: var(--bs-bg-card) !important;
    color: var(--bs-text-main) !important;
    border: 1px solid var(--bs-border-color) !important;
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-content,
[data-theme="dark"] .swal2-html-container {
    color: var(--bs-text-main) !important;
}

[data-theme="dark"] .swal2-toast {
    background-color: var(--bs-bg-card) !important;
    box-shadow: var(--bs-shadow-lg) !important;
    border: 1px solid var(--bs-border-color) !important;
}

/* DateRangePicker Theme & Dark Mode Support */
.daterangepicker {
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-text-main) !important;
    box-shadow: var(--bs-shadow-lg) !important;
    font-family: inherit !important;
    border-radius: var(--bs-radius-md) !important;
}

.daterangepicker:before,
.daterangepicker:after {
    border-bottom-color: var(--bs-border-color) !important;
}

.daterangepicker .calendar-table {
    background-color: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
}

.daterangepicker .calendar-table table {
    color: var(--bs-text-main) !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    color: var(--bs-text-main) !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-primary) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: transparent !important;
    color: var(--bs-text-muted) !important;
    opacity: 0.4;
}

.daterangepicker td.in-range {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--bs-text-main) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.daterangepicker .ranges li {
    background-color: transparent !important;
    color: var(--bs-text-secondary) !important;
    transition: all 0.15s ease;
}

.daterangepicker .ranges li:hover {
    background-color: var(--bs-border-subtle) !important;
    color: var(--bs-primary) !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--bs-border-color) !important;
    background-color: var(--bs-bg-card) !important;
}

.daterangepicker .drp-selected {
    color: var(--bs-text-secondary) !important;
    font-size: 0.8rem !important;
}

/* ==========================================================================
   FINTECH / LABA RUGI FINANCIAL STATEMENT STYLES
   ========================================================================== */
.pl-card {
    background: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: var(--bs-shadow-sm) !important;
    margin-bottom: 24px;
    overflow: hidden;
}

.pl-card-header {
    background: var(--bs-bg-card) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: 1.25rem 1.75rem !important;
}

.pl-filter-box {
    background: var(--bs-table-th-bg) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: 1rem 1.75rem !important;
}

/* Quick Filter Preset Buttons */
.pl-preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pl-preset-btn {
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid var(--bs-border-color) !important;
    background: var(--bs-bg-card) !important;
    color: var(--bs-text-muted) !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block;
}

.pl-preset-btn:hover,
.pl-preset-btn.active {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35) !important;
}

/* KPI Bento Metric Cards */
.pl-kpi-card {
    background: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-md) !important;
    padding: 1.25rem 1.5rem !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    box-shadow: var(--bs-shadow-sm);
}

.pl-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow-md);
}

.pl-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.pl-kpi-card.kpi-revenue::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.pl-kpi-card.kpi-expense::before {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.pl-kpi-card.kpi-profit::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.pl-kpi-card.kpi-loss::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.pl-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pl-kpi-value {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 0.35rem 0 0.15rem 0;
}

/* Ratio Bar */
.pl-ratio-container {
    background: var(--bs-table-th-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-md);
    padding: 0.85rem 1.25rem;
    margin-bottom: 20px;
}

.pl-stacked-bar {
    height: 10px;
    border-radius: 6px;
    background: rgba(244, 63, 94, 0.2);
    overflow: hidden;
    display: flex;
}

.pl-bar-revenue {
    background: linear-gradient(90deg, #10b981, #059669);
    height: 100%;
    transition: width 0.6s ease;
}

.pl-bar-expense {
    background: linear-gradient(90deg, #f43f5e, #e11d48);
    height: 100%;
    transition: width 0.6s ease;
}

/* Financial Ledger Table */
.pl-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.pl-table th {
    background: var(--bs-table-th-bg) !important;
    color: var(--bs-table-th-color) !important;
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    border-top: none !important;
}

.pl-table td {
    padding: 12px 18px !important;
    vertical-align: middle !important;
    font-size: 0.865rem !important;
    border-bottom: 1px solid var(--bs-border-subtle) !important;
    border-top: none !important;
    color: var(--bs-text-main) !important;
    font-variant-numeric: tabular-nums;
}

/* Banner Rows for Sections */
.pl-sec-banner th {
    background: var(--bs-table-th-bg) !important;
    padding: 14px 18px !important;
    border-top: 1px solid var(--bs-border-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.pl-badge-banner {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pl-badge-banner-rev {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.pl-badge-banner-exp {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
}

/* Category header row */
.pl-row-category td {
    background: var(--bs-table-striped) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--bs-text-muted) !important;
    padding-top: 14px !important;
    padding-bottom: 8px !important;
}

/* Account row */
.pl-row-acc {
    cursor: pointer;
    transition: background 0.15s ease;
}

.pl-row-acc:hover {
    background: var(--bs-table-hover) !important;
}

/* Active account highlight (accounts with non-zero balances) */
.pl-row-acc.has-balance-rev {
    background: rgba(16, 185, 129, 0.04) !important;
}

.pl-row-acc.has-balance-exp {
    background: rgba(244, 63, 94, 0.04) !important;
}

[data-theme="dark"] .pl-row-acc.has-balance-rev {
    background: rgba(16, 185, 129, 0.08) !important;
}

[data-theme="dark"] .pl-row-acc.has-balance-exp {
    background: rgba(244, 63, 94, 0.08) !important;
}

/* Code Pills */
.pl-code-tag {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: -0.02em !important;
    display: inline-block;
}

.code-tag-rev {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.code-tag-exp {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
}

.pl-txn-badge {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--bs-primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Subtotals and Totals */
.pl-row-subtotal td {
    background: var(--bs-table-th-bg) !important;
    font-weight: 700 !important;
    border-top: 1px dashed var(--bs-border-color) !important;
}

.pl-row-section-sum td {
    font-weight: 800 !important;
    font-size: 0.95rem !important;
}

.pl-sec-sum-rev {
    background: rgba(16, 185, 129, 0.12) !important;
    border-top: 2px solid #10b981 !important;
    color: #10b981 !important;
}

.pl-sec-sum-exp {
    background: rgba(244, 63, 94, 0.12) !important;
    border-top: 2px solid #f43f5e !important;
    color: #f43f5e !important;
}

.pl-row-net-result td {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.06)) !important;
    border-top: 2px solid var(--bs-primary) !important;
    padding: 1.4rem 18px !important;
}

/* Sub-lines */
.pl-child-line td {
    background: var(--bs-table-striped) !important;
    font-size: 0.825rem !important;
    color: var(--bs-text-muted) !important;
    padding: 8px 18px !important;
}

.pl-zero-dim {
    opacity: 0.35;
    font-weight: 400;
}

/* ==========================================================================
   JURNAL UMUM / DOUBLE-ENTRY BOOKKEEPING STYLING
   ========================================================================== */
.journal-filter-card {
    background: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: var(--bs-shadow-sm) !important;
}

.journal-input {
    background-color: var(--bs-input-bg) !important;
    border: 1px solid var(--bs-input-border) !important;
    color: var(--bs-text-main) !important;
    border-radius: var(--bs-radius-md) !important;
}

.journal-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 2px var(--bs-input-focus-ring) !important;
}

.journal-card {
    background: var(--bs-bg-card) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-radius-lg) !important;
    box-shadow: var(--bs-shadow-sm) !important;
    overflow: hidden;
}

.journal-table {
    background-color: var(--bs-bg-card) !important;
}

.journal-table thead th {
    background-color: var(--bs-table-th-bg) !important;
    color: var(--bs-table-th-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.journal-table tbody tr {
    background-color: var(--bs-bg-card) !important;
}

.journal-table tbody tr:nth-of-type(even) {
    background-color: var(--bs-table-striped) !important;
}

.journal-table tbody td {
    background-color: transparent !important;
    color: var(--bs-text-main) !important;
    border-bottom: 1px solid var(--bs-table-td-border) !important;
}

.journal-table tbody tr:hover,
.journal-table tbody tr:hover td {
    background-color: var(--bs-table-hover) !important;
}

.journal-text-main {
    color: var(--bs-text-main) !important;
}

.journal-text-secondary {
    color: var(--bs-text-secondary) !important;
}

.journal-desc-text {
    color: var(--bs-text-main) !important;
}

.journal-code-link {
    color: var(--bs-primary) !important;
}

.journal-code-link:hover {
    color: var(--bs-primary-hover) !important;
}