/* ============================================================
   FATIS UI — STYLE GUIDE GLOBAL "Sage & Mist"
   Dimuat GLOBAL via header.php (dan halaman standalone), setelah
   css/styles.css sehingga menang cascade.

   PALET (HEX):
     Primer (sage)      : var(--acc)  | hover var(--acc-dark) | soft var(--acc-soft)
     Sekunder (soft blue): var(--blue) | hover var(--blue-dark) | soft #EAF2F8
     Tinta teks          : #1F2937 (judul) / #475569 (isi) / #94A3B8 (redup)
     Latar konten        : #F5F8F7 (mist) | kartu #FFFFFF border var(--card-border)
     Sidebar (beda!)     : #24332B -> #1D2A23 (deep sage ink)
     Semantik            : sukses #2F855A · peringatan #B7791F ·
                           bahaya #C53030 · info #2B6CB0
     Grafik              : var(--acc) var(--blue) #D9A441 #8DA2B5 #C0725E #8E7CC3
                           (periode lalu: #C7D2CC)
   TIPOGRAFI: Inter (fallback Segoe UI) — angka pakai tabular-nums.

   Bagian: 1) token & tipografi  2) remap primer Bootstrap
           3) tabel & tombol seragam  4) micro-interaction
           5) komponen .fx-page (opt-in)
   Aksen per halaman tetap bisa dioverride: style="--acc:#C53030"
   ============================================================ */

:root {
    /* aksen utama */
    --acc: #4F7B5F;
    --acc2: #6B9878;
    --acc-dark: #3E644C;
    --acc-soft: #EAF2EC;
    --acc-rgb: 79, 123, 95;
    /* soft blue sekunder */
    --blue: #5B8FB9;
    --blue-dark: #46759B;
    --blue-soft: #EAF2F8;
    /* tinta & latar */
    --ink: #1F2937;
    --body: #475569;
    --muted: #94A3B8;
    --bg: #F5F8F7;
    --card-border: #E4EBE6;
    --card-line: #ECF1ED;
    --input-border: #DDE6E0;
    --soft-bg: #FAFCFA;
    /* tabel */
    --thead-bg: #F0F5F1;
    --thead-ink: #52655A;
    --row-hover: #F1F6F2;
    --td-border: #EDF2EE;
    --deep: #2A3B31;
    --deep-border: #3D5245;
    --deep-ink: #E7EFE9;
    /* sidebar */
    --side-bg: #24332B;
    --side-bg2: #1D2A23;
    --side-text: #C2D1C5;
    --side-active: #8FBF9F;
    --side-active-rgb: 143, 191, 159;
    --side-head: #7E947F;
    /* semantik lembut */
    --ok: #2F855A;
    --warn: #B7791F;
    --bad: #C53030;
    --info: #2B6CB0;
    /* tipografi */
    --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-head: var(--font-ui);
    --fs-base: .9rem;
    /* bentuk & bayangan (identitas tema) */
    --radius-card: 14px;
    --radius-btn: 9px;
    --radius-btn-sm: 7px;
    --radius-btn-lg: 11px;
    --radius-badge: 7px;
    --radius-input: 9px;
    --radius-ico: 13px;
    --btn-case: none;
    --btn-track: .1px;
    --shadow-card: 0 2px 12px rgba(31, 41, 55, .04);
    --shadow-card-fx: 0 4px 20px rgba(31, 41, 55, .05);
    /* topbar (identitas tema) */
    --topbar-bg: #ffffff;
    --topbar-ink: #1F2937;
    --topbar-muted: #94A3B8;
    --topbar-border: #E4EBE6;
    --topbar-chip: #ffffff;
    /* bootstrap vars */
    --bs-primary: var(--acc);
    --bs-primary-rgb: var(--acc-rgb);
    --bs-link-color: var(--acc);
    --bs-link-hover-color: var(--acc-dark);
    --bs-body-font-family: var(--font-ui);
}

/* --- 1. TIPOGRAFI & LATAR GLOBAL --- */
body {
    background-color: var(--bg);
    font-family: var(--font-ui);
    color: var(--body);
    font-size: var(--fs-base, .9rem);
    -webkit-font-smoothing: antialiased;
}
body.bg-light { background-color: var(--bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-weight: 700; letter-spacing: -.01em; font-family: var(--font-head, var(--font-ui)); }
h1, .h1 { font-size: 1.45rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.1rem; }
.text-muted { color: var(--muted) !important; }
/* Angka rata & sejajar (laporan padat) */
.val-col, .text-end.fw-bold, td.text-end, th.text-end, .font-monospace {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.val-col { font-family: var(--font-ui); text-align: right; }

/* --- 2. REMAP PRIMER BOOTSTRAP -> SAGE --- */
a { color: var(--acc); }
a:hover { color: var(--acc-dark); }
.text-primary { color: var(--acc) !important; }
.bg-primary, .text-bg-primary { background-color: var(--acc) !important; }
.border-primary { border-color: var(--acc) !important; }
.link-primary { color: var(--acc) !important; }
.link-primary:hover, .link-primary:focus { color: var(--acc-dark) !important; }
.btn-link { color: var(--acc); }
.btn-link:hover, .btn-link:focus { color: var(--acc-dark); }
/* info -> soft blue */
.text-info { color: var(--blue-dark) !important; }
.bg-info { background-color: var(--blue) !important; }

/* Kombinasi bg-opacity Bootstrap: remap solid !important di atas membatalkan
   transparansi -> teks senada jadi tenggelam. Paksa versi soft yang terbaca. */
.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-25 { background-color: var(--acc-soft) !important; }
.bg-info.bg-opacity-10, .bg-info.bg-opacity-25 { background-color: var(--blue-soft) !important; }
.bg-success.bg-opacity-10, .bg-success.bg-opacity-25 { background-color: #E6F4EC !important; }
.bg-danger.bg-opacity-10, .bg-danger.bg-opacity-25 { background-color: #FBEAEA !important; }
.bg-warning.bg-opacity-10, .bg-warning.bg-opacity-25 { background-color: #FBF3E2 !important; }

.btn-primary { background-color: var(--acc); border-color: var(--acc); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--acc-dark); border-color: var(--acc-dark);
}
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--acc); border-color: var(--acc); }
.btn-primary:focus, .btn-primary:active:focus { box-shadow: 0 0 0 .22rem rgba(var(--acc-rgb), .28); }

.btn-outline-primary { color: var(--acc); border-color: var(--acc); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--acc); border-color: var(--acc); color: #fff;
}
.btn-outline-primary:focus { box-shadow: 0 0 0 .22rem rgba(var(--acc-rgb), .22); }

.form-control:focus, .form-select:focus {
    border-color: var(--acc2);
    box-shadow: 0 0 0 .18rem rgba(var(--acc-rgb), .14);
}
.form-check-input:checked { background-color: var(--acc); border-color: var(--acc); }
.form-check-input:focus { border-color: var(--acc2); box-shadow: 0 0 0 .18rem rgba(var(--acc-rgb), .14); }

.page-link { color: var(--acc); }
.page-link:hover, .page-link:focus { color: var(--acc-dark); }
.page-item.active .page-link { background-color: var(--acc); border-color: var(--acc); }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--acc); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--acc); }
.list-group-item.active { background-color: var(--acc); border-color: var(--acc); }
.progress-bar { background-color: var(--acc); }
.accordion-button:not(.collapsed) { color: var(--acc-dark); background-color: var(--acc-soft); }
.accordion-button:focus { border-color: var(--acc2); box-shadow: 0 0 0 .18rem rgba(var(--acc-rgb), .14); }

/* Select2 ikut sage */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--acc) !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--acc2); box-shadow: 0 0 0 .18rem rgba(var(--acc-rgb), .14);
}

/* --- 3. KARTU, TABEL & TOMBOL SERAGAM --- */
.card { border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-header, .card-footer { border-color: var(--card-line); }
.card-header:not([class*="bg-"]) { background: #fff; }
.card-footer:not([class*="bg-"]) { background: #fff; }
.card-header { font-weight: 600; color: var(--ink); }
.modal-content { border: none; border-radius: var(--radius-card); }

/* Tabel: header terang seragam; varian gelap = sage ink */
.table { --bs-table-hover-bg: var(--row-hover); }
.table thead th {
    background: var(--thead-bg); color: var(--thead-ink); font-weight: 700;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .45px;
    border-color: var(--card-border); vertical-align: middle;
}
.table td { border-color: var(--td-border); vertical-align: middle; }
.table-hover tbody tr:hover td { background: var(--row-hover); }
/* varian gelap & sticky -> sage ink pekat (ditegaskan setelah aturan umum) */
.table-dark { --bs-table-bg: var(--deep); --bs-table-border-color: var(--deep-border); --bs-table-color: var(--deep-ink); }
.table-dark th, thead.table-dark th { background: var(--deep) !important; color: var(--deep-ink) !important; }
.table-sticky thead th { 
    position: sticky; top: 0; z-index: 10;
    box-shadow: 0 1px 0 var(--card-border);
}
.table-container, .table-scroll-container { max-height: 65vh; overflow-y: auto; }

/* Tombol seragam: radius, bobot, ukuran */
.btn { border-radius: var(--radius-btn); font-weight: 600; letter-spacing: var(--btn-track, .1px); text-transform: var(--btn-case, none); }
.btn-sm { border-radius: var(--radius-btn-sm); }
.btn-lg { border-radius: var(--radius-btn-lg); }
.badge { border-radius: var(--radius-badge); font-weight: 600; letter-spacing: .2px; }
.form-control, .form-select { border-radius: var(--radius-input); border-color: var(--input-border); }
label.small, label.form-label { color: #64748B; font-weight: 600; }

/* Bar filter halaman (dipakai dashboard & laporan) */
.filter-bar { background: #fff; padding: 14px 16px; border: 1px solid var(--card-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 22px; }

/* Semantik lembut (kontras teks putih tetap lolos) */
.btn-success, .bg-success { background-color: #2F855A !important; border-color: #2F855A !important; }
.btn-danger, .bg-danger { background-color: #C53030 !important; border-color: #C53030 !important; }
.btn-warning, .bg-warning { background-color: #ECC94B !important; border-color: #ECC94B !important; }
.text-success { color: #2F855A !important; }
.text-danger { color: #C53030 !important; }

/* --- 4. MICRO-INTERACTION (ringan, CSS murni) --- */
.btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:active { transform: scale(.965); }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { box-shadow: 0 6px 16px rgba(31, 41, 55, .16); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid rgba(var(--acc-rgb), .55); outline-offset: 2px; }
.card-kpi, .card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-kpi:hover, .card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(31, 41, 55, .10); }
.form-control, .form-select { transition: border-color .15s ease, box-shadow .15s ease; }
.table-hover tbody tr td { transition: background-color .12s ease; }
.nav-tabs .nav-link, .dropdown-item, .page-link { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
/* entrance halus untuk konten utama */
@keyframes fatisFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#layoutSidenav_content > main .container-fluid { animation: fatisFadeUp .3s ease both; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- 5. KOMPONEN .fx-page (opt-in per halaman) ---
   --acc/--acc2 diwarisi dari :root (ikut tema); tetap bisa dioverride
   per halaman via style="--acc:#C53030". */

.fx-page .page-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; }
.fx-page .page-head .ico {
    width: 48px; height: 48px; border-radius: var(--radius-ico); flex: 0 0 auto;
    background: linear-gradient(135deg, var(--acc), var(--acc2));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; box-shadow: 0 8px 20px rgba(var(--acc-rgb), .28);
}
.fx-page .page-head h2 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -.2px; }
.fx-page .page-head .sub { font-size: .8rem; color: var(--muted); font-weight: 600; }
.fx-page .page-head .back { font-size: .8rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.fx-page .page-head .back:hover { color: var(--acc); }

.fx-page .card { border: 1px solid var(--card-border) !important; border-radius: var(--radius-card) !important;    box-shadow: var(--shadow-card-fx) !important; }
.fx-page .card-header, .fx-page .card-footer { background: #fff !important; border-color: var(--card-line) !important; }
.fx-page .card-body.bg-light { background: var(--soft-bg) !important; }

.fx-page .border-primary, .fx-page .border-danger, .fx-page .border-success,
.fx-page .border-warning, .fx-page .border-info, .fx-page .border-dark,
.fx-page .card.border-top.border-4, .fx-page .card.border-top.border-3 { border-color: var(--card-border) !important; }

.fx-page label.small { color: #64748B !important; text-transform: uppercase; letter-spacing: .4px;
    font-size: .7rem !important; font-weight: 700 !important; }
.fx-page .form-control, .fx-page .form-select { border: 1px solid var(--input-border); border-radius: var(--radius-input); transition: .15s; }
.fx-page .form-control:focus, .fx-page .form-select:focus {
    border-color: var(--acc); box-shadow: 0 0 0 .18rem rgba(var(--acc-rgb), .14); }

.fx-page .btn-primary { background: var(--acc) !important; border-color: var(--acc) !important; }
.fx-page .btn-primary:hover { filter: brightness(.93); }
.fx-page .alert { border-radius: 11px; }

.fx-page ~ .modal .modal-content, .modal.fx-modal .modal-content {
    border: none !important; border-radius: 15px !important; overflow: hidden;
    box-shadow: 0 24px 60px rgba(31, 41, 55, .25) !important; }

/* ============================================================
   6. TEMA PILIHAN USER — html[data-fatis-theme]
   Tiap tema = IDENTITAS VISUAL UTUH: warna, font, bentuk (radius),
   bayangan, model topbar & sidebar, gaya tabel, tombol, kepadatan.
   Dipilih dari halaman login (cookie fatis_theme) atau topbar
   (tersimpan di users.ui_theme). Default = "sage" (token :root).
   ============================================================ */

/* ---------- INDIGO MALAM — chrome gelap, tombol pill, glassy ---------- */
html[data-fatis-theme="indigo"] {
    --acc: #4F46E5; --acc2: #6366F1; --acc-dark: #4338CA; --acc-soft: #EEF0FD; --acc-rgb: 79, 70, 229;
    --bg: #F4F5FB; --card-border: #E6E8F2; --card-line: #EDEFF5; --input-border: #DDE0EC; --soft-bg: #FAFBFD;
    --thead-bg: #23214A; --thead-ink: #C7CAF2; --row-hover: #F1F3FA; --td-border: #EDEFF6;
    --deep: #23214A; --deep-border: #3B3E6E; --deep-ink: #E8EAF6;
    --side-bg: #201D42; --side-bg2: #131128; --side-text: #C5C8E8; --side-active: #8B93F8;
    --side-active-rgb: 139, 147, 248; --side-head: #7B7FA8;
    --topbar-bg: #201D42; --topbar-ink: #EDEDFB; --topbar-muted: #9B9EC8; --topbar-border: #322F5C; --topbar-chip: #2A2752;
    --font-ui: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
    --radius-card: 18px; --radius-btn: 999px; --radius-btn-sm: 999px; --radius-btn-lg: 999px;
    --radius-badge: 999px; --radius-input: 12px; --radius-ico: 16px;
    --shadow-card: 0 10px 30px rgba(32, 29, 66, .08);
    --shadow-card-fx: 0 14px 34px rgba(32, 29, 66, .10);
}
html[data-fatis-theme="indigo"] .card { border-color: transparent; }
html[data-fatis-theme="indigo"] .btn { padding-left: 1.05rem; padding-right: 1.05rem; }
html[data-fatis-theme="indigo"] .btn-sm { padding-left: .8rem; padding-right: .8rem; }
html[data-fatis-theme="indigo"] .fx-page .page-head .ico { box-shadow: 0 10px 26px rgba(var(--acc-rgb), .45); }

/* ---------- BIRU SAMUDRA — terang & lapang, SIDEBAR PUTIH, tabel belang ---------- */
html[data-fatis-theme="ocean"] {
    --acc: #2E7CB0; --acc2: #58A0CB; --acc-dark: #245F88; --acc-soft: #E5F1F9; --acc-rgb: 46, 124, 176;
    --bg: #F2F7FA; --card-border: #DFEAF1; --card-line: #E9F1F6; --input-border: #D6E3EC; --soft-bg: #F8FBFD;
    --thead-bg: #FFFFFF; --thead-ink: #6C8698; --row-hover: #E9F2F8; --td-border: #E7EFF5;
    --deep: #22415A; --deep-border: #375B77; --deep-ink: #E3EEF6;
    --side-bg: #FFFFFF; --side-bg2: #F6FAFC; --side-text: #4A6274; --side-active: #2E7CB0;
    --side-active-rgb: 46, 124, 176; --side-head: #93A9B9;
    --topbar-border: #D9E7F0;
    --radius-card: 12px; --radius-ico: 12px;
    --shadow-card: 0 1px 6px rgba(34, 65, 90, .06);
    --shadow-card-fx: 0 2px 10px rgba(34, 65, 90, .07);
}
html[data-fatis-theme="ocean"] body { background-image: linear-gradient(180deg, #E9F2F8 0, #F2F7FA 260px); }
html[data-fatis-theme="ocean"] .table tbody tr:nth-child(even) td { background: #F4F9FC; }
html[data-fatis-theme="ocean"] .table-hover tbody tr:hover td { background: var(--row-hover); }
html[data-fatis-theme="ocean"] .table thead th { border-bottom: 2px solid #CFE2EE; }
html[data-fatis-theme="ocean"] .sb-sidenav { border-right: 1px solid var(--card-border); }
html[data-fatis-theme="ocean"] .sb-sidenav .sb-sidenav-menu-heading::after { background: linear-gradient(90deg, rgba(34, 65, 90, .10), transparent); }
html[data-fatis-theme="ocean"] .sb-sidenav .nav-link:hover { background: rgba(var(--acc-rgb), .08); color: var(--ink); }
html[data-fatis-theme="ocean"] .sb-sidenav .nav-link:hover .sb-nav-link-icon,
html[data-fatis-theme="ocean"] .sb-sidenav .nav-link:hover .sb-nav-link-icon i { color: var(--acc); }
html[data-fatis-theme="ocean"] .sb-sidenav .nav-link.active { background: var(--acc-soft) !important; color: var(--acc-dark) !important; }
html[data-fatis-theme="ocean"] .sb-sidenav-menu-nested { border-left-color: rgba(34, 65, 90, .12); }
html[data-fatis-theme="ocean"] .sb-sidenav-menu-nested .nav-link { color: #6C8698; }
html[data-fatis-theme="ocean"] .sb-sidenav-collapse-arrow { color: rgba(34, 65, 90, .30); }
html[data-fatis-theme="ocean"] #fatisSidebarMenu::-webkit-scrollbar-thumb { background: rgba(34, 65, 90, .15); }

/* ---------- TERAKOTA KLASIK — buku besar: serif, kertas, garis tegas ---------- */
html[data-fatis-theme="terra"] {
    --acc: #A9563F; --acc2: #C07B60; --acc-dark: #8A4430; --acc-soft: #F6EAE4; --acc-rgb: 169, 86, 63;
    --bg: #F7F1E8; --card-border: #E3D5C3; --card-line: #ECE0D0; --input-border: #DCCBB6; --soft-bg: #FBF7F0;
    --thead-bg: transparent; --thead-ink: #8A4430; --row-hover: #F4ECDF; --td-border: #E8DCC9;
    --deep: #3E2C21; --deep-border: #5A4232; --deep-ink: #F1E7DA;
    --side-bg: #35261D; --side-bg2: #241913; --side-text: #D9C8B8; --side-active: #E2A075;
    --side-active-rgb: 226, 160, 117; --side-head: #9C8570;
    --topbar-bg: #FDFAF5; --topbar-ink: #3E2C21; --topbar-muted: #A08D78; --topbar-border: #E3D5C3; --topbar-chip: #FDFAF5;
    --font-head: 'Lora', Georgia, 'Times New Roman', serif;
    --radius-card: 8px; --radius-btn: 6px; --radius-btn-sm: 5px; --radius-btn-lg: 8px;
    --radius-badge: 4px; --radius-input: 6px; --radius-ico: 8px;
    --btn-case: uppercase; --btn-track: .7px;
    --shadow-card: none; --shadow-card-fx: none;
}
html[data-fatis-theme="terra"] body { background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(169, 86, 63, .03) 34px 35px); }
html[data-fatis-theme="terra"] .table thead th { background: transparent; border-bottom: 2px solid var(--acc); letter-spacing: .8px; }
html[data-fatis-theme="terra"] .btn { font-size: .77rem; }
html[data-fatis-theme="terra"] .btn-primary:hover, html[data-fatis-theme="terra"] .btn-success:hover,
html[data-fatis-theme="terra"] .btn-danger:hover { box-shadow: none; transform: none; }
html[data-fatis-theme="terra"] .fx-page .page-head .ico { background: var(--acc); box-shadow: none; }
html[data-fatis-theme="terra"] .card-kpi:hover, html[data-fatis-theme="terra"] .card-hover:hover { transform: none; box-shadow: none; }

/* ---------- UNGU AURORA — playful, membulat besar, gradasi ---------- */
html[data-fatis-theme="plum"] {
    --acc: #7A52C7; --acc2: #A47FE0; --acc-dark: #5F3BA3; --acc-soft: #F1EAFB; --acc-rgb: 122, 82, 199;
    --bg: #F6F3FC; --card-border: #E8E1F4; --card-line: #EDE7F7; --input-border: #DFD5F0; --soft-bg: #FBF9FE;
    --thead-bg: #F3EEFB; --thead-ink: #6B5A93; --row-hover: #F2ECFA; --td-border: #EDE6F6;
    --deep: #382B5C; --deep-border: #52427E; --deep-ink: #EDE7F9;
    --side-bg: #45318C; --side-bg2: #2A1D59; --side-text: #D8CDF0; --side-active: #C9ADFF;
    --side-active-rgb: 201, 173, 255; --side-head: #9C8BC8;
    --font-ui: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
    --fs-base: .88rem;
    --radius-card: 20px; --radius-btn: 999px; --radius-btn-sm: 999px; --radius-btn-lg: 999px;
    --radius-badge: 999px; --radius-input: 13px; --radius-ico: 17px;
    --shadow-card: 0 8px 26px rgba(69, 49, 140, .09);
    --shadow-card-fx: 0 10px 30px rgba(69, 49, 140, .10);
}
html[data-fatis-theme="plum"] body { background-image: linear-gradient(150deg, #F2EBFB 0%, #F7F4FD 40%, #EEF0FB 100%); background-attachment: fixed; }
html[data-fatis-theme="plum"] #layoutSidenav_nav .sb-sidenav { background: linear-gradient(165deg, #4B2F96 0%, #35217A 45%, #221650 100%) !important; }
html[data-fatis-theme="plum"] .card-header:not([class*="bg-"]) { background: linear-gradient(120deg, #FBF9FE, #F4EFFC); }
html[data-fatis-theme="plum"] .btn { padding-left: 1rem; padding-right: 1rem; }
html[data-fatis-theme="plum"] .fx-page .page-head .ico { box-shadow: 0 10px 26px rgba(var(--acc-rgb), .4); }

/* ---------- GRAFIT FOKUS — enterprise rapat, tegas, hemat ruang ---------- */
html[data-fatis-theme="graphite"] {
    --acc: #3E4C63; --acc2: #5C6B84; --acc-dark: #2B3648; --acc-soft: #E9EDF3; --acc-rgb: 62, 76, 99;
    --bg: #EFF1F4; --card-border: #DDE2E9; --card-line: #E6EAEF; --input-border: #CFD6DF; --soft-bg: #F7F8FA;
    --thead-bg: #E7EBF0; --thead-ink: #46536A; --row-hover: #ECF0F4; --td-border: #DFE4EB;
    --deep: #232C3A; --deep-border: #38455A; --deep-ink: #E5EAF1;
    --side-bg: #1B2430; --side-bg2: #10161F; --side-text: #B9C3D0; --side-active: #7FA3D4;
    --side-active-rgb: 127, 163, 212; --side-head: #6C7989;
    --topbar-bg: #1B2430; --topbar-ink: #E9EDF3; --topbar-muted: #8593A5; --topbar-border: #2A3547; --topbar-chip: #253040;
    --font-ui: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif;
    --fs-base: .84rem;
    --radius-card: 8px; --radius-btn: 6px; --radius-btn-sm: 5px; --radius-btn-lg: 7px;
    --radius-badge: 4px; --radius-input: 6px; --radius-ico: 8px;
    --sidebar-width: 244px;
    --shadow-card: 0 1px 3px rgba(27, 36, 48, .07);
    --shadow-card-fx: 0 1px 4px rgba(27, 36, 48, .08);
}
html[data-fatis-theme="graphite"] .table td, html[data-fatis-theme="graphite"] .table thead th { padding: .42rem .55rem; font-size: .78rem; }
html[data-fatis-theme="graphite"] .table td { border: 1px solid var(--td-border); }
html[data-fatis-theme="graphite"] .table thead th { border: 1px solid var(--td-border); border-bottom: 2px solid #C6CFDA; }
html[data-fatis-theme="graphite"] .btn { font-size: .78rem; }
html[data-fatis-theme="graphite"] .card-body { padding: .95rem 1.1rem; }
html[data-fatis-theme="graphite"] main .container-fluid { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
html[data-fatis-theme="graphite"] .fx-page .page-head .ico { width: 40px; height: 40px; font-size: 1rem; box-shadow: none; }
html[data-fatis-theme="graphite"] .btn-primary:hover, html[data-fatis-theme="graphite"] .card-kpi:hover,
html[data-fatis-theme="graphite"] .card-hover:hover { transform: none; box-shadow: none; }