/*
 * SINTESA — sistem tampilan (3 tema): Terang (bawaan) dan Gelap.
 *
 * Prinsip desain:
 *  1. SATU warna dasar per tema. Sidebar, bilah atas, dan kanvas konten memakai latar yang sama
 *     (transparan di atas kanvas), dipisahkan garis tipis -- jadi tidak ada lagi "kotak" yang beda warna.
 *  2. Kartu = permukaan yang sedikit terangkat (warna lebih terang + bayangan halus + sudut membulat).
 *  3. Satu aksen (zamrud) + teks hijau-tinta, bukan hitam/biru-slate, supaya terasa selaras dengan logo.
 *
 * Dipilih lewat menu profil, disimpan di localStorage "tema", dipasang sebagai data-tema di <html>.
 * Tema Gelap juga menambah class "dark" agar varian dark: Tailwind ikut aktif. Dimuat PALING AKHIR.
 */

/* ======================= TOKEN WARNA ======================= */
html[data-tema="terang"] {
    --t-canvas: #f5f1e7; --t-card: #fffdf8; --t-card-2: #f1ecdf;
    --t-line: #e8e1d1; --t-line-2: #d9d0ba;
    --t-text: #1b2a22; --t-text-rgb: 27, 42, 34; --t-text-2: #5d695f; --t-text-3: #8d968b;
    --t-accent: #0b7a5a; --t-accent-rgb: 11, 122, 90; --t-accent-hover: #086247; --t-accent-soft: #dfeee4; --t-accent-ink: #064e3b;
    --t-hover: rgba(70, 52, 12, .06);
    --t-shadow: 0 1px 2px rgba(70, 52, 12, .05), 0 12px 30px -16px rgba(70, 52, 12, .20);
    --t-glow-1: rgba(11, 122, 90, .08); --t-glow-2: rgba(214, 160, 62, .12);
    color-scheme: light;
}
html[data-tema="gelap"] {
    --t-canvas: #0e1411; --t-card: #151d19; --t-card-2: #1b2521;
    --t-line: #24312b; --t-line-2: #324239;
    --t-text: #e6eee8; --t-text-rgb: 230, 238, 232; --t-text-2: #98a89f; --t-text-3: #6f8077;
    --t-accent: #34d399; --t-accent-rgb: 52, 211, 153; --t-accent-hover: #6ee7b7; --t-accent-soft: #123228; --t-accent-ink: #6ee7b7;
    --t-hover: rgba(255, 255, 255, .06);
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 36px -18px rgba(0, 0, 0, .75);
    --t-glow-1: rgba(52, 211, 153, .07); --t-glow-2: rgba(214, 160, 62, .04);
    color-scheme: dark;
}

/* ======================= KANVAS, SIDEBAR, BILAH ATAS ======================= */
html[data-tema] body { background-color: var(--t-canvas); color: var(--t-text); letter-spacing: -.003em; }
html[data-tema] .app-canvas {
    background-color: var(--t-canvas);
    background-image: none;
    position: relative;
    isolation: isolate;
}
/* Cahaya lembut di sudut, berada DI BELAKANG semuanya sehingga sidebar & konten tampak menyatu */
html[data-tema] .app-canvas::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 520px at 0% 0%, var(--t-glow-1), transparent 65%),
        radial-gradient(800px 480px at 100% 100%, var(--t-glow-2), transparent 65%);
}

/* Sidebar & drawer berkebalikan dengan konten: token --t-* didefinisikan ulang di dalam sidebar,
   sehingga seluruh gaya menu (yang memakai var(--t-*)) otomatis menyesuaikan. */
html[data-tema="terang"] .app-sidebar, html[data-tema="terang"] .app-drawer {
    /* sidebar GELAP di tema terang */
    --t-canvas: #0f1b16; --t-card: #172620; --t-card-2: #1c2e27;
    --t-line: #22352c; --t-line-2: #314a3e;
    --t-text: #e8f0ea; --t-text-rgb: 232, 240, 234; --t-text-2: #a2b4aa; --t-text-3: #78897f;
    --t-accent: #34d399; --t-accent-rgb: 52, 211, 153; --t-accent-hover: #6ee7b7; --t-accent-soft: rgba(52, 211, 153, .15); --t-accent-ink: #6ee7b7;
    --t-hover: rgba(255, 255, 255, .06);
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    background: linear-gradient(180deg, #11201a 0%, #0d1813 100%);
    border-right: 1px solid #1d2e26;
    color-scheme: dark;
}
html[data-tema="gelap"] .app-sidebar, html[data-tema="gelap"] .app-drawer {
    /* sidebar TERANG di tema gelap */
    --t-canvas: #f4f0e6; --t-card: #fffdf8; --t-card-2: #ece6d8;
    --t-line: #e1d9c6; --t-line-2: #d1c7af;
    --t-text: #1b2a22; --t-text-rgb: 27, 42, 34; --t-text-2: #5d695f; --t-text-3: #8d968b;
    --t-accent: #0b7a5a; --t-accent-rgb: 11, 122, 90; --t-accent-hover: #086247; --t-accent-soft: #dcece2; --t-accent-ink: #064e3b;
    --t-hover: rgba(70, 52, 12, .06);
    --t-shadow: 0 1px 2px rgba(70, 52, 12, .08);
    background: linear-gradient(180deg, #f7f3ea 0%, #f1ecdf 100%);
    border-right: 1px solid #e1d9c6;
    color-scheme: light;
}
html[data-tema] .app-drawer { box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
/* Kotak logo tetap putih supaya logo terbaca di sidebar gelap */
html[data-tema="terang"] .app-sidebar .bg-white.shadow-sm.border, html[data-tema="terang"] .app-drawer .bg-white.shadow-sm.border { background-color: #fff !important; border-color: transparent !important; }
html[data-tema] .app-topbar {
    background: rgba(var(--t-canvas-rgb, 245, 241, 231), .0);
    background-color: color-mix(in srgb, var(--t-canvas) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--t-line);
}
html[data-tema] .app-topbar .text-slate-500 { color: var(--t-text-2) !important; }
html[data-tema] .app-topbar button:hover { background-color: var(--t-hover) !important; }
html[data-tema] .app-topbar .bg-emerald-100 { background-color: var(--t-accent-soft) !important; color: var(--t-accent-ink) !important; }
html[data-tema] .app-topbar .text-slate-700, html[data-tema] .app-topbar .text-slate-200 { color: var(--t-text) !important; }
html[data-tema] .app-main { position: relative; }

/* Pembungkus halaman Bootstrap jangan menimpa latar (kotak putih di belakang judul) */
html[data-tema] .bs-scope:not(.card):not(.badge):not(.btn):not(.alert):not(.dropdown-menu):not(.app-sidebar-inner) {
    background-color: transparent;
}

/* ======================= NAVIGASI SIDEBAR ======================= */
html[data-tema] .sintesa-navlink {
    position: relative;
    font-size: .875rem;
    padding-top: .5rem; padding-bottom: .5rem;
    border-radius: .65rem !important;
    transition: background-color .15s ease, color .15s ease;
}
html[data-tema] .bs-scope .sintesa-navlink:not(.is-active) { color: var(--t-text-2) !important; background-color: transparent !important; }
html[data-tema] .bs-scope .sintesa-navlink:not(.is-active):hover { background-color: var(--t-hover) !important; color: var(--t-text) !important; }
html[data-tema] .bs-scope .sintesa-navlink.is-active {
    background-color: var(--t-accent-soft) !important;
    color: var(--t-accent-ink) !important;
    font-weight: 600;
}
html[data-tema] .bs-scope .sintesa-navlink.is-active::before {
    content: ""; position: absolute; left: -.5rem; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--t-accent);
}
html[data-tema] .sintesa-navlink svg { opacity: .85; }
html[data-tema] .sintesa-navlink.is-active svg { opacity: 1; }
/* Judul kelompok menu */
html[data-tema] .app-sidebar p.text-uppercase, html[data-tema] .app-drawer p.text-uppercase {
    color: var(--t-text-3) !important; letter-spacing: .1em !important; font-size: .65rem !important; font-weight: 700 !important;
}
html[data-tema] .app-sidebar .text-dark, html[data-tema] .app-drawer .text-dark { color: var(--t-text) !important; }
html[data-tema] .app-sidebar .text-body-secondary, html[data-tema] .app-drawer .text-body-secondary { color: var(--t-text-2) !important; }
/* Kotak logo */
html[data-tema] .app-sidebar .bg-white.shadow-sm.border, html[data-tema] .app-drawer .bg-white.shadow-sm.border { /* dasar */
    background-color: var(--t-card) !important; border-color: var(--t-line) !important; border-radius: .8rem !important;
    box-shadow: var(--t-shadow) !important;
}

/* ======================= VARIABEL BOOTSTRAP (semua teks/permukaan ikut tema) ======================= */
html[data-tema] .bs-scope {
    --bs-body-bg: var(--t-card);
    --bs-card-bg: var(--t-card);
    --bs-body-color: var(--t-text);
    --bs-body-color-rgb: var(--t-text-rgb);
    --bs-emphasis-color: var(--t-text);
    --bs-heading-color: var(--t-text);
    --bs-secondary-color: var(--t-text-2);
    --bs-tertiary-color: var(--t-text-3);
    --bs-secondary-bg: var(--t-card-2);
    --bs-tertiary-bg: var(--t-card-2);
    --bs-light-bg-subtle: var(--t-card-2);
    --bs-border-color: var(--t-line);
    --bs-border-color-translucent: var(--t-line);
    --bs-link-color: var(--t-accent);
    --bs-link-hover-color: var(--t-accent-hover);
    --bs-primary: var(--t-accent);
    --bs-primary-rgb: var(--t-accent-rgb);
    --bs-success: var(--t-accent);
    --bs-success-rgb: var(--t-accent-rgb);
    --bs-primary-bg-subtle: var(--t-accent-soft);
    --bs-primary-text-emphasis: var(--t-accent-ink);
    --bs-primary-border-subtle: rgba(var(--t-accent-rgb), .28);
    --bs-success-bg-subtle: var(--t-accent-soft);
    --bs-success-text-emphasis: var(--t-accent-ink);
    --bs-success-border-subtle: rgba(var(--t-accent-rgb), .28);
    --bs-table-color: var(--t-text);
    --bs-table-border-color: var(--t-line);
    --bs-table-striped-bg: rgba(var(--t-text-rgb), .025);
    --bs-table-hover-bg: rgba(var(--t-accent-rgb), .06);
    --bs-table-hover-color: var(--t-text);
}
/* Warna "subtle" untuk tema terang */
html[data-tema="terang"] .bs-scope {
    --bs-info-bg-subtle: #e0f2fe; --bs-info-text-emphasis: #075985; --bs-info-border-subtle: #bae6fd;
    --bs-warning-bg-subtle: #fdf1cf; --bs-warning-text-emphasis: #8a4b08; --bs-warning-border-subtle: #f5df9c;
    --bs-danger-bg-subtle: #fde6e9; --bs-danger-text-emphasis: #9f1239; --bs-danger-border-subtle: #f9c6cf;
    --bs-violet-bg-subtle: #ede9fe; --bs-violet-text-emphasis: #5b21b6;
    --bs-secondary-text-emphasis: #3f4b44; --bs-secondary-bg-subtle: var(--t-card-2); --bs-secondary-border-subtle: var(--t-line-2);
}
/* ... dan tema gelap */
html[data-tema="gelap"] .bs-scope {
    --bs-info-bg-subtle: #0e2b3a; --bs-info-text-emphasis: #7dd3fc; --bs-info-border-subtle: #17506f;
    --bs-warning-bg-subtle: #33280d; --bs-warning-text-emphasis: #fcd34d; --bs-warning-border-subtle: #6b5012;
    --bs-danger-bg-subtle: #3a151c; --bs-danger-text-emphasis: #fda4af; --bs-danger-border-subtle: #7a2433;
    --bs-violet-bg-subtle: #2a1f4a; --bs-violet-text-emphasis: #c4b5fd;
    --bs-secondary-text-emphasis: #c5d2ca; --bs-secondary-bg-subtle: #1f2a25; --bs-secondary-border-subtle: #34443b;
}

html[data-tema] .bs-scope .text-dark { color: var(--t-text) !important; }
html[data-tema] .bs-scope .text-body-secondary { color: var(--t-text-2) !important; }
html[data-tema] .bs-scope .text-body-tertiary { color: var(--t-text-3) !important; }
html[data-tema] .bs-scope .bg-light, html[data-tema] .bs-scope .bg-body-tertiary { background-color: var(--t-card-2) !important; color: var(--t-text) !important; }
html[data-tema] .bs-scope .border { border-color: var(--t-line) !important; }
html[data-tema] .bs-scope hr { border-color: var(--t-line); opacity: 1; }
html[data-tema] .bs-scope .border-bottom, html[data-tema] .bs-scope .border-top { border-color: var(--t-line) !important; }

/* ======================= KARTU ======================= */
html[data-tema] .bs-scope.card, html[data-tema] .bs-scope .card {
    background-color: var(--t-card);
    border: 1px solid var(--t-line);
    border-radius: 1.1rem;
    box-shadow: var(--t-shadow) !important;
    color: var(--t-text);
}
html[data-tema] .bs-scope .card > .card-header { background: var(--t-card-2); border-bottom-color: var(--t-line); }
/* Kartu statistik: ikon mengambang dalam "bantal" halus */
html[data-tema] .bs-scope.card .rounded-3[style*="width:2.75rem"] { border-radius: .85rem !important; }
html[data-tema] .bs-scope.card .fs-3.fw-bold { letter-spacing: -.02em; }

/* ======================= JUDUL HALAMAN ======================= */
html[data-tema] .bs-scope h1.h3 { font-size: 1.65rem; letter-spacing: -.025em; font-weight: 700; color: var(--t-text); }
html[data-tema] .bs-scope h2.h6, html[data-tema] .bs-scope .h5, html[data-tema] .bs-scope h3 { letter-spacing: -.012em; }

/* ======================= TOMBOL ======================= */
html[data-tema] .bs-scope .btn { border-radius: .7rem; font-weight: 600; letter-spacing: -.005em; transition: all .15s ease; }
html[data-tema] .bs-scope .btn-sm { border-radius: .6rem; }
html[data-tema] .bs-scope .btn-primary {
    --bs-btn-bg: var(--t-accent); --bs-btn-border-color: var(--t-accent); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--t-accent-hover); --bs-btn-hover-border-color: var(--t-accent-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--t-accent-hover); --bs-btn-active-border-color: var(--t-accent-hover); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--t-accent); --bs-btn-disabled-border-color: var(--t-accent);
    --bs-btn-focus-shadow-rgb: var(--t-accent-rgb);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 14px -6px rgba(var(--t-accent-rgb), .55);
}
html[data-tema="gelap"] .bs-scope .btn-primary { --bs-btn-color: #04281c; --bs-btn-hover-color: #04281c; --bs-btn-active-color: #04281c; }
html[data-tema] .bs-scope .btn-primary:hover { transform: translateY(-1px); }
html[data-tema] .bs-scope .btn-success { --bs-btn-bg: var(--t-accent); --bs-btn-border-color: var(--t-accent); --bs-btn-hover-bg: var(--t-accent-hover); --bs-btn-hover-border-color: var(--t-accent-hover); }
html[data-tema="gelap"] .bs-scope .btn-success { --bs-btn-color: #04281c; --bs-btn-hover-color: #04281c; }
html[data-tema] .bs-scope .btn-outline-secondary {
    --bs-btn-color: var(--t-text-2); --bs-btn-border-color: var(--t-line-2);
    --bs-btn-hover-bg: var(--t-hover); --bs-btn-hover-color: var(--t-text); --bs-btn-hover-border-color: var(--t-line-2);
    --bs-btn-active-bg: var(--t-hover); --bs-btn-active-color: var(--t-text); --bs-btn-active-border-color: var(--t-line-2);
    background-color: var(--t-card);
}
html[data-tema] .bs-scope .btn-outline-primary { --bs-btn-color: var(--t-accent); --bs-btn-border-color: rgba(var(--t-accent-rgb), .5); --bs-btn-hover-bg: var(--t-accent); --bs-btn-hover-border-color: var(--t-accent); }
html[data-tema] .bs-scope .btn-outline-danger { --bs-btn-border-color: rgba(225, 29, 72, .45); }
html[data-tema] .bs-scope .btn-link { color: var(--t-accent); }

/* ======================= FORM ======================= */
html[data-tema] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    background-color: var(--t-card);
    color: var(--t-text);
    border-color: var(--t-line-2);
    border-radius: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-tema] :is(input, select, textarea)::placeholder { color: var(--t-text-3); }
html[data-tema] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--t-accent-rgb), .18) !important;
    outline: none !important;
}
html[data-tema] .bs-scope input[type="file"].form-control { background-color: var(--t-card); border-radius: .7rem; }
html[data-tema] .bs-scope .form-check-input:checked { background-color: var(--t-accent); border-color: var(--t-accent); }
html[data-tema] .bs-scope .form-label { color: var(--t-text-2); font-weight: 500; }
html[data-tema] .bs-scope .input-group-text { background-color: var(--t-card-2); border-color: var(--t-line-2); color: var(--t-text-2); }
html[data-tema="gelap"] .bs-scope .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2398a89f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* ======================= TABEL ======================= */
html[data-tema] .bs-scope .table { --bs-table-bg: transparent; margin-bottom: 0; }
html[data-tema] .bs-scope .table > :not(caption) > * > * { background-color: transparent; color: var(--t-text); border-bottom-color: var(--t-line); padding-top: .8rem; padding-bottom: .8rem; }
html[data-tema] .bs-scope .table > thead > tr > th, html[data-tema] .bs-scope .table > thead > tr > td {
    background-color: var(--t-card-2);
    color: var(--t-text-2);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid var(--t-line);
    white-space: nowrap;
}
html[data-tema] .bs-scope .table > tbody > tr:hover > * { background-color: rgba(var(--t-accent-rgb), .055); }
html[data-tema] .bs-scope .table > tbody > tr:last-child > * { border-bottom-color: transparent; }
html[data-tema] .bs-scope .table-responsive { border-radius: .9rem; }
html[data-tema] .bs-scope .list-group-item { background-color: transparent; color: inherit; border-color: var(--t-line); }

/* ======================= BADGE, ALERT, DROPDOWN, MODAL ======================= */
/* Lencana status: gaya "lembut" (latar pucat + teks tegas) -- kecuali penghitung bulat di menu */
html[data-tema] .bs-scope .badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .38em .75em; }
html[data-tema] .bs-scope .badge.text-bg-success:not(.rounded-pill) { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
html[data-tema] .bs-scope .badge.text-bg-info:not(.rounded-pill) { background-color: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }
html[data-tema] .bs-scope .badge.text-bg-warning:not(.rounded-pill) { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
html[data-tema] .bs-scope .badge.text-bg-danger:not(.rounded-pill) { background-color: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
html[data-tema] .bs-scope .badge.text-bg-secondary:not(.rounded-pill) { background-color: var(--bs-secondary-bg-subtle) !important; color: var(--bs-secondary-text-emphasis) !important; }
html[data-tema] .bs-scope .badge.text-bg-primary:not(.rounded-pill) { background-color: var(--t-accent-soft) !important; color: var(--t-accent-ink) !important; }
html[data-tema] .bs-scope .badge.rounded-pill.text-bg-danger { background-color: #e11d48 !important; color: #fff !important; }

html[data-tema] .bs-scope .alert { border-radius: .9rem; border-width: 1px; }
html[data-tema] .bs-scope .alert-success { --bs-alert-bg: var(--bs-success-bg-subtle); --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-border-color: var(--bs-success-border-subtle); }
html[data-tema] .bs-scope .alert-danger { --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-border-color: var(--bs-danger-border-subtle); }
html[data-tema] .bs-scope .alert-info { --bs-alert-bg: var(--bs-info-bg-subtle); --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-border-color: var(--bs-info-border-subtle); }
html[data-tema] .bs-scope .alert-warning { --bs-alert-bg: var(--bs-warning-bg-subtle); --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-border-color: var(--bs-warning-border-subtle); }

/* Menu dropdown profil (komponen x-dropdown): permukaan = kartu */
html[data-tema] .bg-white, html[data-tema] .bs-scope .bg-white { background-color: var(--t-card) !important; }
html[data-tema] .bs-scope.position-absolute.shadow.border, html[data-tema] .bs-scope .dropdown-menu {
    background-color: var(--t-card) !important; border-color: var(--t-line) !important; border-radius: 1rem !important;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .28) !important; overflow: hidden;
}
html[data-tema] .bs-scope.position-absolute .rounded-3 > a, html[data-tema] .bs-scope.position-absolute .rounded-3 button { color: var(--t-text); }
html[data-tema] .bg-white\/80, html[data-tema] .bg-white\/90, html[data-tema] .bg-white\/95 { background-color: var(--t-card) !important; }
html[data-tema] .modal-content { background-color: var(--t-card); border: 1px solid var(--t-line); border-radius: 1.1rem; color: var(--t-text); }

/* ======================= HALAMAN YANG MASIH PAKAI TAILWIND ======================= */
html[data-tema] .bg-slate-50, html[data-tema] .hover\:bg-slate-50:hover, html[data-tema] .hover\:bg-slate-50\/70:hover,
html[data-tema] .hover\:bg-slate-100:hover { background-color: var(--t-hover) !important; }
html[data-tema] .bg-slate-100 { background-color: var(--t-card-2) !important; }
html[data-tema] .border-slate-100, html[data-tema] .border-slate-200 { border-color: var(--t-line) !important; }
html[data-tema] .border-slate-300 { border-color: var(--t-line-2) !important; }
html[data-tema] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html[data-tema] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--t-line) !important; }
html[data-tema="gelap"] .dark\:bg-slate-900, html[data-tema="gelap"] .dark\:bg-slate-900\/80, html[data-tema="gelap"] .dark\:bg-slate-900\/70 { background-color: var(--t-card) !important; }
html[data-tema="gelap"] .dark\:bg-slate-800, html[data-tema="gelap"] .dark\:bg-slate-800\/50 { background-color: var(--t-card-2) !important; }
html[data-tema="gelap"] .dark\:border-slate-800, html[data-tema="gelap"] .dark\:border-slate-700, html[data-tema="gelap"] .dark\:border-slate-600,
html[data-tema="gelap"] .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--t-line) !important; }
html[data-tema="gelap"] .dark\:text-slate-100, html[data-tema="gelap"] .dark\:text-slate-200, html[data-tema="gelap"] .dark\:text-white { color: var(--t-text) !important; }
html[data-tema="gelap"] .dark\:text-slate-300 { color: #c5d2ca !important; }
html[data-tema="gelap"] .dark\:text-slate-400, html[data-tema="gelap"] .dark\:text-slate-500 { color: var(--t-text-2) !important; }

/* ======================= DETAIL ======================= */
html[data-tema] ::selection { background-color: rgba(var(--t-accent-rgb), .28); color: inherit; }
html[data-tema] * { scrollbar-color: var(--t-line-2) transparent; }
html[data-tema] ::-webkit-scrollbar-thumb { background-color: var(--t-line-2); }
html[data-tema] a { text-underline-offset: 3px; }
html[data-tema] :focus-visible { outline: 2px solid rgba(var(--t-accent-rgb), .55); outline-offset: 2px; }

/* Halaman masuk (guest): kartu kaca mengikuti tema */
html[data-tema] .app-canvas > .relative.z-10 { background-color: color-mix(in srgb, var(--t-card) 86%, transparent) !important; border-color: var(--t-line) !important; }
html[data-tema] .app-canvas .text-slate-900, html[data-tema] .app-canvas .text-slate-800 { color: var(--t-text) !important; }
html[data-tema] .app-canvas .text-slate-600, html[data-tema] .app-canvas .text-slate-500 { color: var(--t-text-2) !important; }

/* ======================= PEMILIH TEMA (menu profil) ======================= */
.tema-pilih { display: flex; gap: .25rem; padding: .2rem; border-radius: .7rem; background: var(--t-card-2, #f1f5f9); border: 1px solid var(--t-line, #e2e8f0); }
.tema-pilih button { flex: 1; border: 0; border-radius: .5rem; padding: .3rem .25rem; font-size: .75rem; font-weight: 500; background: transparent; color: var(--t-text-2, inherit); transition: all .15s ease; }
.tema-pilih button:hover { color: var(--t-text, inherit); }
html[data-tema="terang"] .tema-pilih button[data-tema-btn="terang"],
html[data-tema="gelap"] .tema-pilih button[data-tema-btn="gelap"] { background: var(--t-card); color: var(--t-accent-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* Kartu yang diberi d-flex (kartu statistik, status) tersusun menyamping: ikon di kiri, teks di kanan */
html[data-tema] .bs-scope.card.d-flex:not(.flex-column) { flex-direction: row; }
html[data-tema] .bs-scope.card.d-flex:not(.flex-column) .fs-3 { font-size: clamp(1.05rem, 1.45vw, 1.3rem) !important; white-space: nowrap; letter-spacing: -.02em; }
html[data-tema] .bs-scope.card.d-flex:not(.flex-column).p-4 { padding: 1.15rem 1.25rem !important; }
/* Kotak logo di sidebar gelap (tema Terang) dibuat putih agar logo terbaca */
html[data-tema="terang"] .app-sidebar .bg-white.shadow-sm.border, html[data-tema="terang"] .app-drawer .bg-white.shadow-sm.border { background-color: #fff !important; border-color: transparent !important; }

/* ======================= MENU PROFIL (dropdown) & WARNA TAILWIND TERSISA ======================= */
/* Tombol avatar: Bootstrap reboot meratakan sudut tombol, kembalikan bulat */
html[data-tema] .app-topbar .bs-scope button, html[data-tema] .app-topbar button { border-radius: .85rem; }
/* Item menu (Profil Saya, Keluar) */
html[data-tema] .bs-scope.position-absolute .dropdown-item {
    display: block; width: calc(100% - 1rem); margin: .15rem .5rem; padding: .5rem .75rem;
    border-radius: .65rem; font-size: .875rem; font-weight: 500; color: var(--t-text); background: transparent;
}
html[data-tema] .bs-scope.position-absolute .dropdown-item:hover, html[data-tema] .bs-scope.position-absolute .dropdown-item:focus { background-color: var(--t-hover); color: var(--t-text); }
/* Daftar "Lihat sebagai": pilihan biasa lembut, pilihan aktif = pil aksen */
html[data-tema] .bs-scope.position-absolute .text-slate-400 { color: var(--t-text-3) !important; }
html[data-tema] .bs-scope.position-absolute .text-slate-600, html[data-tema] .bs-scope.position-absolute .dark\:text-slate-300 { color: var(--t-text-2) !important; }
html[data-tema] .bs-scope.position-absolute .hover\:bg-slate-100:hover { background-color: var(--t-hover) !important; color: var(--t-text) !important; }
html[data-tema] .bs-scope.position-absolute .bg-emerald-50 { background-color: var(--t-accent-soft) !important; color: var(--t-accent-ink) !important; }
html[data-tema] .bs-scope.position-absolute button.text-sm { border-radius: .65rem; }

/* Warna Tailwind yang masih dipakai di beberapa halaman: satukan dengan token tema */
html[data-tema] .bg-emerald-50, html[data-tema] .bg-emerald-100 { background-color: var(--t-accent-soft) !important; }
html[data-tema] .text-emerald-700, html[data-tema] .text-emerald-600, html[data-tema] .text-emerald-400 { color: var(--t-accent-ink) !important; }
html[data-tema] .border-emerald-200 { border-color: rgba(var(--t-accent-rgb), .3) !important; }
html[data-tema="gelap"] .bg-rose-50 { background-color: #3a151c !important; }
html[data-tema="gelap"] .text-rose-700, html[data-tema="gelap"] .text-rose-600, html[data-tema="gelap"] .text-rose-500, html[data-tema="gelap"] .text-rose-400 { color: #fda4af !important; }
html[data-tema="gelap"] .border-rose-200 { border-color: #7a2433 !important; }
html[data-tema="gelap"] .text-amber-700, html[data-tema="gelap"] .text-amber-600 { color: #fcd34d !important; }
html[data-tema="gelap"] .text-slate-900, html[data-tema="gelap"] .text-slate-800, html[data-tema="gelap"] .text-slate-700 { color: var(--t-text) !important; }
html[data-tema="gelap"] .text-slate-600, html[data-tema="gelap"] .text-slate-500 { color: var(--t-text-2) !important; }
html[data-tema="gelap"] .text-slate-400 { color: var(--t-text-3) !important; }