/* =====================================================================
   SIMKEUANGAN — Design System v2  "Confident Fintech / Institutional Modern"
   Loaded AFTER Metronic's style.bundle.css. A bold, contemporary layer:
   distinctive Plus Jakarta Sans type, a richer violet identity, layered
   colored elevation, redesigned tables, real micro-interactions and a
   staggered page-load — while staying formal enough for government finance.
   ===================================================================== */

:root {
    /* ---- Brand: a richer, more confident violet ---- */
    --brand-50:  #F2F0FE;
    --brand-100: #E6E1FC;
    --brand-200: #CCC2F8;
    --brand-300: #A99AF0;
    --brand-400: #8670E6;
    --brand-500: #5B4BC4;   /* PRIMARY */
    --brand-600: #4C3DAC;
    --brand-700: #3D318A;
    --brand-800: #2B2463;
    --brand-900: #1B1740;

    /* ---- Accents ---- */
    --accent-teal: #0EA5A5;   /* fresh secondary accent */
    --gold-500:    #E0A106;   /* institutional highlight */

    /* ---- Slate neutrals ---- */
    --slate-25:  #F7F8FB;
    --slate-50:  #F1F3F8;
    --slate-100: #E8EBF2;
    --slate-200: #DCE0EA;
    --slate-300: #C2C8D6;
    --slate-400: #98A0B3;
    --slate-500: #667085;
    --slate-600: #475069;
    --slate-700: #2F3752;
    --slate-800: #1D2439;
    --slate-900: #121728;

    /* ---- Workflow / semantic ---- */
    --ds-success: #16A34A;
    --ds-warning: #E0A106;
    --ds-danger:  #E0342B;
    --ds-info:    #2F7FE0;

    /* ---- Radius ---- */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 18px;
    --ds-radius-xl: 24px;
    --ds-radius-pill: 999px;

    /* ---- Elevation (soft + brand-tinted for depth) ---- */
    --ds-shadow-xs: 0 1px 2px rgba(29, 36, 57, .06);
    --ds-shadow-sm: 0 2px 6px rgba(29, 36, 57, .06), 0 1px 2px rgba(29, 36, 57, .04);
    --ds-shadow-md: 0 8px 20px rgba(29, 36, 57, .08), 0 2px 6px rgba(29, 36, 57, .05);
    --ds-shadow-lg: 0 18px 40px rgba(29, 36, 57, .12);
    --ds-shadow-brand: 0 10px 24px rgba(91, 75, 196, .28);
    --ds-focus-ring: 0 0 0 4px rgba(91, 75, 196, .18);

    --ds-ease: cubic-bezier(.4, 0, .2, 1);

    /* ---- Remap Metronic / Bootstrap tokens ---- */
    --bs-font-sans-serif: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #5B4BC4;
    --bs-primary-active: #4C3DAC;
    --bs-primary-light: #E6E1FC;
    --bs-primary-inverse: #ffffff;
    --bs-body-bg: #F7F8FB;
    --bs-body-color: #475069;
    --bs-border-color: #DCE0EA;
    --bs-text-primary: #4C3DAC;
    --bs-link-color: #4C3DAC;
    --bs-link-hover-color: #3D318A;
    --bs-gray-100: #F1F3F8;
    --bs-gray-200: #E8EBF2;
    --bs-gray-300: #DCE0EA;
}

/* ---- Typography & atmospheric background ---- */
html, body,
.fw-bold, .fw-bolder, .fw-semibold, h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select, .menu, table, .card {
    font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
/* Backdrop follows the active theme (light by default, dark via data-bs-theme),
   so no browser-canvas colour ever shows at the page edges on wide windows. */
html { background-color: var(--bs-body-bg); }
html:not([data-bs-theme="dark"]) { color-scheme: light; }
html, body { max-width: 100%; overflow-x: hidden; }
#kt_app_root, #kt_app_page, #kt_app_wrapper, #kt_app_main, .app-main,
#kt_app_content, #kt_app_content_container { max-width: 100%; }

body {
    color: var(--slate-600);
    background-color: var(--bs-body-bg);
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(91, 75, 196, .06), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 165, .05), transparent 55%);
    background-attachment: fixed;
}
h1, h2, h3, .fw-bolder { letter-spacing: -.01em; color: var(--slate-800); }

/* --- Institutional Futurism: technical-mono numerals for financial figures --- */
:root { --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }
/* Financial figures MUST carry `.ds-num` to render in mono — do NOT rely on
   `.text-right` (used for plain alignment of names like bendahara) or IDs. */
.ds-num, .table td.ds-num,
#total_sppd, #total_biaya, #total_panjar {
    font-family: var(--ds-font-mono) !important;
    font-feature-settings: "tnum" 1;
    letter-spacing: normal;
}
/* dim the currency unit tokens so the number leads */
.ds-unit { opacity: .6; font-weight: 500; }

/* ---- Buttons: solid, colored shadow, subtle lift ---- */
.btn { border-radius: var(--ds-radius-md); font-weight: 600; transition: transform .18s var(--ds-ease), box-shadow .18s var(--ds-ease), background-color .18s var(--ds-ease); }
.btn:active { transform: translateY(0); }
.btn-primary {
    --bs-btn-bg: var(--brand-500);
    --bs-btn-border-color: var(--brand-500);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    box-shadow: var(--ds-shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(91, 75, 196, .36); }
.btn-light, .btn-secondary { --bs-btn-bg: #fff; --bs-btn-border-color: var(--slate-200); --bs-btn-color: var(--slate-700); --bs-btn-hover-bg: var(--slate-50); }
.btn-light:hover, .btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-sm); }

/* ---- Cards / panels: larger radius, layered shadow, hover raise ---- */
.card {
    border: 1px solid var(--slate-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    background: #fff;
    transition: transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease);
}
.card:hover { box-shadow: var(--ds-shadow-md); }
.card > .card-header { border-bottom: 1px solid var(--slate-100); color: var(--slate-800); min-height: unset; padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Hero / KPI surfaces (Metronic bg-primary): rich gradient + glow + depth */
.bg-primary, .card.bg-primary, [class*="bg-primary"].card, .bg-primary.card {
    background-image: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%) !important;
    box-shadow: var(--ds-shadow-brand) !important;
    border: none !important;
}

/* ---- Tables: redesigned, generous, brand header, row hover ---- */
.table {
    --bs-table-bg: transparent;
    border-color: var(--slate-100);
}
.table > thead th,
table > thead th,
.table th {
    background-color: var(--brand-50) !important;
    color: var(--brand-700) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11.5px !important;
    text-shadow: none !important;
    border-bottom: 2px solid var(--brand-200) !important;
    vertical-align: middle;
}
.table td, table td {
    color: var(--slate-700);
    text-shadow: none !important;
    vertical-align: middle;
    border-color: var(--slate-100) !important;
}
.table tbody tr { transition: background-color .15s var(--ds-ease); }
/* Subtle zebra reduces monotony + aids row scanning on dense finance tables */
.table tbody tr:nth-of-type(even) > td, table tbody tr:nth-of-type(even) > td { background-color: #FAFAFE; }
.table tbody tr:hover td, table tbody tr:hover td { background-color: var(--brand-50) !important; }
/* soften the heavy per-cell vertical borders from the legacy inline style */
.table th:not(:last-child), .table td:not(:last-child),
table th:not(:last-child), table td:not(:last-child) {
    border-right-color: var(--slate-100) !important;
}
.ds-num, .table td.ds-num, .table th.ds-num, .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
/* DataTables wrapper polish */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
    background: var(--brand-500) !important;
    border-color: var(--brand-500) !important;
    color: #fff !important;
    border-radius: var(--ds-radius-sm);
    box-shadow: var(--ds-shadow-brand);
}
.page-link { border-radius: var(--ds-radius-sm); color: var(--brand-600); }

/* ---- Forms & focus ---- */
.form-control, .form-select {
    border-radius: var(--ds-radius-sm);
    border-color: var(--slate-200);
    transition: border-color .15s var(--ds-ease), box-shadow .15s var(--ds-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--brand-400); box-shadow: var(--ds-focus-ring); }

/* ---- Modals ---- */
.modal-content { border: none; border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--slate-100); color: var(--brand-700); }

/* ---- Sidebar (dark) active accent ---- */
.app-sidebar { box-shadow: 4px 0 24px rgba(18, 23, 40, .18); }
.app-sidebar .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, .08);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}
.app-sidebar .menu-item .menu-link { transition: background-color .15s var(--ds-ease); border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; }
.app-sidebar .menu-item .menu-link:hover:not(.active) { background-color: rgba(255, 255, 255, .04); }

/* ---- Header ---- */
.app-header { backdrop-filter: saturate(140%) blur(6px); background-color: rgba(255, 255, 255, .85) !important; border-bottom: 1px solid var(--slate-100); }

/* =====================================================================
   Wide data tables — scroll instead of clip, clamp long cells, clean actions
   ===================================================================== */
/* Safety net: any DataTable that is not in scrollX mode still scrolls
   horizontally within its wrapper instead of clipping columns. */
.dataTables_wrapper { overflow-x: auto; }

/* Wide tables scroll inside .table-responsive (Metronic's wrapper). Force a
   VISIBLE, always-on horizontal scrollbar so users clearly know the table can
   be dragged sideways (macOS/overlay scrollbars otherwise hide it). */
.table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-300) var(--slate-100);
    padding-bottom: 2px;
}
.table-responsive::-webkit-scrollbar { height: 12px; -webkit-appearance: none; }
.table-responsive::-webkit-scrollbar-track { background: var(--slate-100); border-radius: 999px; }
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--brand-300);
    border-radius: 999px;
    border: 3px solid var(--slate-100);
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--brand-400); }
div.dataTables_scroll { border-radius: var(--ds-radius-md); overflow: hidden; }
div.dataTables_scrollBody { -webkit-overflow-scrolling: touch; }
div.dataTables_scrollBody::-webkit-scrollbar { height: 10px; }

/* Wide list table (pengajuan): let columns take natural width and scroll the
   whole table as ONE unit inside .dataTables_wrapper (overflow-x above), so the
   header and data can never drift out of alignment (single table, not two). */
/* FIXED layout + fill 100% of the container: the table ALWAYS fits the width
   (never cut off, never a sideways scroll — critical on Retina/Mac). Columns
   get proportional widths and every cell wraps DOWNWARD within its column. */
#dt_pengajuan { width: 100% !important; table-layout: fixed; }
#dt_pengajuan thead th, #dt_pengajuan tbody td {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}
/* Proportional column widths (sum = 100%): #, AKSI, NOMOR SPT, AKD, TUJUAN,
   TANGGAL, TOTAL BIAYA, STATUS, PANJAR, BENDAHARA. */
#dt_pengajuan th:nth-child(1),  #dt_pengajuan td:nth-child(1)  { width: 4%; }
#dt_pengajuan th:nth-child(2),  #dt_pengajuan td:nth-child(2)  { width: 7%; }
#dt_pengajuan th:nth-child(3),  #dt_pengajuan td:nth-child(3)  { width: 10%; }
#dt_pengajuan th:nth-child(4),  #dt_pengajuan td:nth-child(4)  { width: 17%; }
#dt_pengajuan th:nth-child(5),  #dt_pengajuan td:nth-child(5)  { width: 9%; }
#dt_pengajuan th:nth-child(6),  #dt_pengajuan td:nth-child(6)  { width: 10%; }
#dt_pengajuan th:nth-child(7),  #dt_pengajuan td:nth-child(7)  { width: 12%; }
#dt_pengajuan th:nth-child(8),  #dt_pengajuan td:nth-child(8)  { width: 13%; }
#dt_pengajuan th:nth-child(9),  #dt_pengajuan td:nth-child(9)  { width: 9%; }
#dt_pengajuan th:nth-child(10), #dt_pengajuan td:nth-child(10) { width: 9%; }
#dt_pengajuan .dt-clamp-inner { overflow-wrap: break-word; word-break: normal; }

/* Master CRUD engine tables (#dt_master) have a VARIABLE column count. Fixed
   layout at 100% width keeps every column visible (never cut/hidden); the # and
   AKSI columns are sized and the remaining columns share the rest equally. */
#dt_master { width: 100% !important; table-layout: fixed; }
#dt_master thead th, #dt_master tbody td { white-space: normal !important; overflow-wrap: break-word; word-break: normal; vertical-align: top; }
#dt_master thead th { font-size: 11px !important; letter-spacing: .03em; }
#dt_master th:nth-child(1), #dt_master td:nth-child(1) { width: 3.5%; }
#dt_master th:nth-child(2), #dt_master td:nth-child(2) { width: 9%; }
#dt_master td .btn-icon.btn-sm { width: 28px; height: 28px; margin: 1px; }

/* numbers must never break mid-digit; wrap only at the space after "Rp." */
#dt_pengajuan td.ds-num, #dt_pengajuan td.text-right { overflow-wrap: normal; word-break: keep-all; }
/* header labels stay on one readable line (shrink slightly if tight) */
#dt_pengajuan thead th { font-size: 11px !important; }

/* Clamp very long text cells (e.g. member lists) to 3 lines + tooltip */
td.dt-clamp { max-width: 260px; }
.dt-clamp-inner { line-height: 1.5; color: var(--slate-700); white-space: normal; word-break: break-word; }
td.dt-actions { white-space: nowrap; }

/* Action buttons: refined soft chips instead of garish solid circles */
td .btn-icon.btn-sm { width: 32px; height: 32px; border-radius: 9px; }
td .btn-icon { box-shadow: none !important; border: none !important; }
td .btn-icon.btn-warning { background: #FEF6E7 !important; color: #B07C08 !important; }
td .btn-icon.btn-primary { background: var(--brand-50) !important; color: var(--brand-600) !important; }
td .btn-icon.btn-danger  { background: #FCEBEA !important; color: #C0392B !important; }
td .btn-icon.btn-success { background: #E7F6EC !important; color: #157F43 !important; }
td .btn-icon.btn-warning:hover { background: #FBEBC7 !important; transform: translateY(-1px); }
td .btn-icon.btn-primary:hover { background: var(--brand-100) !important; transform: translateY(-1px); }
td .btn-icon.btn-danger:hover  { background: #F7D6D3 !important; transform: translateY(-1px); }
td .btn-icon .svg-icon { color: currentColor !important; }
td .btn-icon .svg-icon svg [fill]:not([fill="none"]) { fill: currentColor !important; }

/* =====================================================================
   Sidebar — clearer dark surface, readable menu, distinct active state
   ===================================================================== */
.app-sidebar { background-color: #191528 !important; }
.app-sidebar .menu-title { color: #C7C2D6 !important; font-weight: 500; }
.app-sidebar .menu-icon .svg-icon, .app-sidebar .menu-icon i { color: #8E88A8 !important; }
.app-sidebar .menu-heading { color: #6E6788 !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.app-sidebar .menu-item .menu-link:hover .menu-title { color: #fff !important; }
.app-sidebar .menu-item .menu-link.active { background-color: var(--brand-600) !important; }
.app-sidebar .menu-item .menu-link.active .menu-title { color: #fff !important; }
.app-sidebar .menu-item .menu-link.active .menu-icon .svg-icon,
.app-sidebar .menu-item .menu-link.active .menu-icon i { color: #fff !important; }
.app-sidebar .menu-item .menu-link.active .menu-bullet .bullet { background-color: var(--gold-500) !important; }

/* =====================================================================
   Workflow status pills (DrppSppd int: 0..3, -1). Text + leading dot.
   ===================================================================== */
.badge-status {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem; font-size: 11.5px; font-weight: 700;
    border-radius: var(--ds-radius-pill); line-height: 1.35;
    border: 1px solid transparent;
}
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-status--draft    { background: #EEF1F6; color: #475069; border-color: #E2E6EF; }
.badge-status--diajukan { background: #FEF6E7; color: #9A6B00; border-color: #FbE8C4; }
.badge-status--panjar   { background: #E8F1FC; color: #1B5FB0; border-color: #D3E4F9; }
.badge-status--rampung  { background: #E7F6EC; color: #157F43; border-color: #CDEBD7; }
.badge-status--ditolak  { background: #FCEBEA; color: #B42318; border-color: #F7D6D3; }

/* =====================================================================
   Dashboard hero — gradient-mesh banner (not a generic illustration card)
   ===================================================================== */
.ds-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(130% 130% at 0% 0%, #6D5BD6 0%, #4C3DAC 46%, #2B2463 100%);
    box-shadow: var(--ds-shadow-brand);
}
.ds-hero::before {
    content: ""; position: absolute; right: -70px; top: -90px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.ds-hero::after {
    content: ""; position: absolute; right: 70px; bottom: -110px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 165, .45), transparent 70%);
    filter: blur(6px);
}
.ds-hero .card-body { position: relative; z-index: 1; }
.ds-hero__content { position: relative; z-index: 1; }
.ds-hero__eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .72); margin-bottom: .8rem; }
.ds-hero__title { color: #fff !important; font-weight: 800; font-size: 30px; line-height: 1.15; margin: 0 0 .6rem; }
.ds-hero__sub { color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.6; max-width: 560px; margin: 0; }
.ds-hero__ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.ds-hero__ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-2px); }

/* KPI stat cards: injected sparkline + delta chip (dashboard "Data Masuk") */
#total_sppd, #total_biaya, #total_panjar { white-space: nowrap; }
.ds-spark { margin-top: .75rem; min-height: 44px; }
.ds-delta {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem; border-radius: var(--ds-radius-pill);
    font-size: 11px; font-weight: 700; vertical-align: middle;
    white-space: nowrap;
}
.ds-delta .ds-num { font-size: 11px; }
.ds-delta--up   { background: #E7F6EC; color: #157F43; }
.ds-delta--down { background: #FCEBEA; color: #B42318; }
.ds-delta--flat { background: var(--slate-100); color: var(--slate-500); }

/* Bento status tiles (2x2 in the dashboard status card) */
.ds-stat-tile { background: var(--slate-50); border: 1px solid var(--slate-100); transition: transform .15s var(--ds-ease); }
.ds-stat-tile:hover { transform: translateY(-2px); }
.ds-stat-tile--diajukan { background: #FEF9EE; border-color: #F6E6BE; }
.ds-stat-tile--panjar   { background: #EEF4FC; border-color: #D3E4F9; }
.ds-stat-tile--rampung  { background: #EDF7F0; border-color: #CDEBD7; }
.ds-stat-tile--ditolak  { background: #FCF0EF; border-color: #F7D6D3; }
[data-bs-theme="dark"] .ds-stat-tile { background: #1A1730; border-color: #2A2540; }
[data-bs-theme="dark"] .ds-stat-tile--diajukan { background: #241C0C; border-color: #3A2E12; }
[data-bs-theme="dark"] .ds-stat-tile--panjar   { background: #0F1A2C; border-color: #1B3A5E; }
[data-bs-theme="dark"] .ds-stat-tile--rampung  { background: #0E2018; border-color: #1C4A34; }
[data-bs-theme="dark"] .ds-stat-tile--ditolak  { background: #251314; border-color: #4A2224; }

/* ---- Accessible focus ---- */
:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--ds-radius-sm); }

/* =====================================================================
   Page-load choreography: gentle staggered rise for cards.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .app-content .card,
    #kt_app_content .card,
    .app-main .card {
        animation: dsRise .5s var(--ds-ease) both;
    }
    .app-content .card:nth-of-type(2) { animation-delay: .06s; }
    .app-content .card:nth-of-type(3) { animation-delay: .12s; }
    .app-content .card:nth-of-type(4) { animation-delay: .18s; }
}
@keyframes dsRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   DARK MODE — a deliberately designed dark theme (not an auto-flip).
   Activated by data-bs-theme="dark" on <html> (Metronic theme toggle /
   system preference). Scoped so light mode is untouched.
   ===================================================================== */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #14111F;
    --bs-body-color: #C7C2D6;
    --bs-border-color: #2E2A45;
    --bs-primary: #8B78E8;          /* brighter violet reads better on dark */
    --bs-primary-active: #7C67E0;
    --bs-primary-light: #262048;
    --bs-primary-inverse: #ffffff;
    --bs-text-primary: #B7A9F2;
    --bs-link-color: #B7A9F2;
    --bs-link-hover-color: #CDC3F7;
    --bs-gray-100: #201C33;
    --bs-gray-200: #2A2540;
    --bs-gray-300: #35304F;
}
[data-bs-theme="dark"] body {
    color: #C7C2D6;
    background-color: #14111F;
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(139, 120, 232, .12), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(14, 165, 165, .08), transparent 55%);
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .fw-bold, [data-bs-theme="dark"] .fw-bolder,
[data-bs-theme="dark"] .text-gray-900, [data-bs-theme="dark"] .text-gray-800 { color: #ECEAF6 !important; }
[data-bs-theme="dark"] .text-gray-700 { color: #C7C2D6 !important; }
[data-bs-theme="dark"] .text-gray-600, [data-bs-theme="dark"] .text-gray-500, [data-bs-theme="dark"] .text-muted { color: #8E88A8 !important; }

/* Surfaces */
[data-bs-theme="dark"] .card { background: #1C1930; border-color: #2A2540; }
[data-bs-theme="dark"] .card > .card-header { border-bottom-color: #2A2540; color: #ECEAF6; }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body { background-color: #1C1930 !important; }

/* Header */
[data-bs-theme="dark"] .app-header { background-color: rgba(20, 17, 31, .85) !important; border-bottom-color: #2A2540; }

/* Tables */
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] table th { background-color: #241F3D !important; color: #C7BFF0 !important; border-bottom-color: #362F58 !important; }
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] table td { color: #C7C2D6; border-color: #262138 !important; }
[data-bs-theme="dark"] .table tbody tr:nth-of-type(even) > td { background-color: #1A1730; }
[data-bs-theme="dark"] .table tbody tr:hover td { background-color: #272140 !important; }
[data-bs-theme="dark"] .dt-clamp-inner { color: #C7C2D6; }
[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-track { background: #201C33; }
[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { background: #4C3DAC; border-color: #201C33; }

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #211D34; border-color: #2E2A45; color: #C7C2D6; }
[data-bs-theme="dark"] .form-control::placeholder { color: #6E6788; }

/* Action chips */
[data-bs-theme="dark"] td .btn-icon.btn-warning { background: #3A2E10 !important; color: #E7B85C !important; }
[data-bs-theme="dark"] td .btn-icon.btn-primary { background: #262048 !important; color: #B7A9F2 !important; }
[data-bs-theme="dark"] td .btn-icon.btn-danger  { background: #3A1E1E !important; color: #EF8A82 !important; }

/* Status pills — deepen bg, keep hue */
[data-bs-theme="dark"] .badge-status--draft    { background: #262234; color: #B9B4C7; border-color: #322C46; }
[data-bs-theme="dark"] .badge-status--diajukan { background: #33280C; color: #E7B85C; border-color: #4A3A12; }
[data-bs-theme="dark"] .badge-status--panjar   { background: #10243D; color: #6FB0F5; border-color: #1B3A5E; }
[data-bs-theme="dark"] .badge-status--rampung  { background: #123024; color: #5FD08C; border-color: #1C4A34; }
[data-bs-theme="dark"] .badge-status--ditolak  { background: #3A1A1A; color: #F08A82; border-color: #5A2626; }

/* KPI delta chips */
[data-bs-theme="dark"] .ds-delta--up   { background: #0F2E1E; color: #22C55E; }
[data-bs-theme="dark"] .ds-delta--down { background: #3A1618; color: #FCA5A5; }
[data-bs-theme="dark"] .ds-delta--flat { background: #262234; color: #8E88A8; }

/* Sidebar stays dark in both themes; nudge for consistency */
[data-bs-theme="dark"] .app-sidebar { background-color: #100E1A !important; }

/* Metronic separators / dashed borders */
[data-bs-theme="dark"] .separator,
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-gray-300,
[data-bs-theme="dark"] .border-gray-200 { border-color: #2A2540 !important; }