/* =====================================================================
   TEMA WARNA TAMPILAN — SIDEBAR + TOMBOL + HEADER DAFTAR
   =====================================================================
   - Pilihan tema via picker di sidebar (partials/sidebar.html).
   - Tersimpan di localStorage key: ui_theme_<username> (fallback
     ui_theme, default: 'putih') sehingga tiap user punya tema sendiri.
   - Diterapkan lewat atribut <html data-ui-theme="..."> yang diset
     oleh script kecil di <head> tiap halaman (anti-flash) dan oleh
     setUiTheme() di js/dashboard-app.js.
   - Ruang lingkup:
       * Sidebar      : #sidebar-host aside ... (di-inject dari partials)
       * Tombol       : button / a yang memakai utilitas bg-brand-*
       * Header daftar: elemen .ui-list-header, yaitu judul modal
                        daftar pilihan (Katalog Barang, Pilih Data
                        Master, Pilih Cabang) di seluruh halaman.
     Elemen lain (badge, tabel, teks aksen, dsb.) TIDAK diubah.
   ===================================================================== */

/* ---------- Palet default = brand biru SOFT (juga dipakai tema PUTIH utk tombol) ----------
   Semua tema memakai varian "soft": saturasi diturunkan & tone lebih kalem,
   sehingga sidebar/tombol tidak menyala mencolok. */
:root {
    --t-50:  #f4f8fb;
    --t-100: #e8eff6;
    --t-200: #d3e0ec;
    --t-300: #a8c0d6;
    --t-400: #7395b3;
    --t-500: #5b7ba0;
    --t-600: #486482;
    --t-700: #3a5169;
    --t-800: #2f4255;
    --t-900: #273646;
    --t-950: #1a2530;
    --t-glow: rgba(91, 123, 160, 0.22);   /* shadow-brand-500/30 (soft) */
    --t-ring: rgba(115, 149, 179, 0.35);  /* ring-brand-400/40  (soft) */
}

/* ---------- Palet per tema (versi SOFT / kalem) ---------- */
[data-ui-theme="biru"] {
    --t-50: #f4f8fb; --t-100: #e8eff6; --t-200: #d3e0ec; --t-300: #a8c0d6;
    --t-400: #7395b3; --t-500: #5b7ba0; --t-600: #486482; --t-700: #3a5169;
    --t-800: #2f4255; --t-900: #273646; --t-950: #1a2530;
    --t-glow: rgba(91, 123, 160, 0.22); --t-ring: rgba(115, 149, 179, 0.35);
}

[data-ui-theme="teal"] {
    --t-50: #f2f9f7; --t-100: #e0f0ec; --t-200: #c4e1db; --t-300: #9ac7be;
    --t-400: #6aa39a; --t-500: #51867e; --t-600: #406b65; --t-700: #345651;
    --t-800: #2b4642; --t-900: #233936; --t-950: #172523;
    --t-glow: rgba(81, 134, 126, 0.22); --t-ring: rgba(106, 163, 154, 0.35);
}

[data-ui-theme="hijau"] {
    --t-50: #f4f9f3; --t-100: #e6f1e4; --t-200: #cde2cb; --t-300: #a5c7a2;
    --t-400: #7aa377; --t-500: #5e865b; --t-600: #4b6c49; --t-700: #3d573b;
    --t-800: #324731; --t-900: #293a28; --t-950: #1b261a;
    --t-glow: rgba(94, 134, 91, 0.22); --t-ring: rgba(122, 163, 119, 0.35);
}

[data-ui-theme="merah"] {
    --t-50: #fbf5f4; --t-100: #f4e6e4; --t-200: #e8cecb; --t-300: #d2a5a0;
    --t-400: #b57b75; --t-500: #99615c; --t-600: #7c4d49; --t-700: #643e3b;
    --t-800: #523330; --t-900: #432a28; --t-950: #2c1c1a;
    --t-glow: rgba(153, 97, 92, 0.22); --t-ring: rgba(181, 123, 117, 0.35);
}

[data-ui-theme="ungu"] {
    --t-50: #f8f6fa; --t-100: #eee9f3; --t-200: #ded3ea; --t-300: #c0aed6;
    --t-400: #9c87ba; --t-500: #7f699b; --t-600: #66537d; --t-700: #524364;
    --t-800: #433752; --t-900: #372d43; --t-950: #241d2c;
    --t-glow: rgba(127, 105, 155, 0.22); --t-ring: rgba(156, 135, 186, 0.35);
}

/* =====================================================================
   1) SIDEBAR  (scope: aside hasil injeksi partials/sidebar.html)
   ===================================================================== */

/* Background gradient sidebar mengikuti palet tema aktif */
#sidebar-host aside {
    background-image: linear-gradient(to bottom, var(--t-950) 0%, var(--t-900) 45%, var(--t-800) 100%);
}

/* Kotak logo & avatar user (gradient brand) */
#sidebar-host aside .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--t-500), var(--t-700));
}

/* Garis pemisah */
#sidebar-host aside .border-brand-800 { border-color: var(--t-800); }
#sidebar-host aside .border-brand-950\/50 { border-color: var(--t-950); }

/* Teks label section & item nav non-aktif */
#sidebar-host aside .text-brand-300 { color: var(--t-300); }
#sidebar-host aside .text-brand-200 { color: var(--t-200); }
#sidebar-host aside .text-brand-100 { color: var(--t-100); }

/* Item nav aktif + tombol toggle sidebar */
#sidebar-host aside .bg-brand-500 { background-color: var(--t-500); }
#sidebar-host aside .bg-brand-800 { background-color: var(--t-800); }
#sidebar-host aside .hover\:bg-brand-800:hover { background-color: var(--t-800); }
#sidebar-host aside .hover\:bg-brand-500:hover { background-color: var(--t-500); }

/* Footer user (bg-brand-950/60) */
#sidebar-host aside .bg-brand-950\/60 { background-color: var(--t-950); }

/* Bayangan & ring aksen */
#sidebar-host aside .shadow-brand-500\/30 { --tw-shadow-color: var(--t-glow); }
#sidebar-host aside .ring-brand-400\/40 { --tw-ring-color: var(--t-ring); }

/* ---------- Tema PUTIH (default): sidebar terang, teks gelap ---------- */
[data-ui-theme="putih"] #sidebar-host aside {
    background-image: none !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}
[data-ui-theme="putih"] #sidebar-host aside .border-brand-800 { border-color: #e2e8f0 !important; }
[data-ui-theme="putih"] #sidebar-host aside .border-brand-950\/50 { border-color: #e2e8f0 !important; }
[data-ui-theme="putih"] #sidebar-host aside .border-white\/15 { border-color: rgba(15, 23, 42, 0.10) !important; }
[data-ui-theme="putih"] #sidebar-host aside .border-white\/40 { border-color: rgba(15, 23, 42, 0.20) !important; }
[data-ui-theme="putih"] #sidebar-host aside .text-brand-300 { color: #64748b !important; }
[data-ui-theme="putih"] #sidebar-host aside .text-brand-200 { color: #334155 !important; }
[data-ui-theme="putih"] #sidebar-host aside .text-brand-100 { color: #334155 !important; }
[data-ui-theme="putih"] #sidebar-host aside .hover\:bg-brand-800:hover { background-color: #f1f5f9 !important; }
[data-ui-theme="putih"] #sidebar-host aside .bg-brand-950\/60 { background-color: #f8fafc !important; }
[data-ui-theme="putih"] #sidebar-host aside .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06) !important; }
[data-ui-theme="putih"] #sidebar-host aside .ring-white\/15 { --tw-ring-color: rgba(15, 23, 42, 0.12) !important; }
[data-ui-theme="putih"] #sidebar-host aside .ring-white\/20 { --tw-ring-color: rgba(15, 23, 42, 0.12) !important; }
/* Kotak logo & avatar tetap memakai aksen brand (biru) pada tema putih */
[data-ui-theme="putih"] #sidebar-host aside .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #0284c7, #075985) !important;
}

[data-ui-theme="putih"] #sidebar-host aside .sidebar-flyout {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-ui-theme="putih"] #sidebar-host aside .sidebar-flyout .text-brand-200,
[data-ui-theme="putih"] #sidebar-host aside .sidebar-flyout .text-brand-100 {
    color: #334155 !important;
}

[data-ui-theme="putih"] #sidebar-host aside .sidebar-flyout .bg-white\/10 {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

/* =====================================================================
   2) TOMBOL  (scope: elemen <button> / <a> saja, di seluruh aplikasi)
   ===================================================================== */

[data-ui-theme] button.bg-brand-500,
[data-ui-theme] a.bg-brand-500 { background-color: var(--t-500) !important; }
[data-ui-theme] button.bg-brand-600,
[data-ui-theme] a.bg-brand-600 { background-color: var(--t-600) !important; }
[data-ui-theme] button.bg-brand-700,
[data-ui-theme] a.bg-brand-700 { background-color: var(--t-700) !important; }
[data-ui-theme] button.bg-brand-800,
[data-ui-theme] a.bg-brand-800 { background-color: var(--t-800) !important; }

[data-ui-theme] button.hover\:bg-brand-500:hover,
[data-ui-theme] a.hover\:bg-brand-500:hover { background-color: var(--t-500) !important; }
[data-ui-theme] button.hover\:bg-brand-600:hover,
[data-ui-theme] a.hover\:bg-brand-600:hover { background-color: var(--t-600) !important; }
[data-ui-theme] button.hover\:bg-brand-700:hover,
[data-ui-theme] a.hover\:bg-brand-700:hover { background-color: var(--t-700) !important; }
[data-ui-theme] button.hover\:bg-brand-800:hover,
[data-ui-theme] a.hover\:bg-brand-800:hover { background-color: var(--t-800) !important; }

/* Tombol gradient (bg-gradient-to-br from-brand-500 to-brand-700) */
[data-ui-theme] button.bg-gradient-to-br,
[data-ui-theme] a.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--t-500), var(--t-700)) !important;
}

/* Bayangan aksen tombol (shadow-brand-500/30) */
[data-ui-theme] button.shadow-brand-500\/30,
[data-ui-theme] a.shadow-brand-500\/30 { --tw-shadow-color: var(--t-glow) !important; }

/* Ring aksen tombol (ring-brand-400/40) */
[data-ui-theme] button.ring-brand-400\/40,
[data-ui-theme] a.ring-brand-400\/40 { --tw-ring-color: var(--t-ring) !important; }

/* =====================================================================
   3) HEADER DAFTAR PILIHAN  (scope: elemen .ui-list-header)
   =====================================================================
   Dipakai oleh header modal daftar pilihan pada semua halaman:
     - Modal Katalog Barang / Suku Cadang (showCatalogModal)
     - Modal Pilih Data Master: Part, Jasa, Mekanik, Unit
       (showNewTxMasterModal)
     - Modal Pilih Cabang Tujuan (showCabangModal)
   Markup: <div class="ui-list-header p-2.5 text-white ..."> — kelas
   pengganti bg-slate-800 agar warnanya mengikuti tema user aktif.
   Model tampilan: tema berwarna memakai gradien gelap senada sidebar
   (--t-800 -> --t-950) dengan teks putih; tema PUTIH memakai header
   terang (putih + garis bawah) senada header aplikasi.
   ===================================================================== */

/* Fallback bila atribut tema belum sempat diset (anti-flash head) */
.ui-list-header {
    background-color: var(--t-900, #0f172a);
    background-image: linear-gradient(to bottom, var(--t-800, #1e293b) 0%, var(--t-950, #020617) 100%);
    color: #ffffff;
}

/* Tema berwarna (biru/teal/hijau/merah/ungu) */
[data-ui-theme] .ui-list-header {
    background-color: var(--t-900);
    background-image: linear-gradient(to bottom, var(--t-800) 0%, var(--t-950) 100%);
    color: #ffffff;
    border-bottom: 1px solid var(--t-950);
}

/* Teks sekunder & tombol tutup di header daftar tetap kontras */
[data-ui-theme] .ui-list-header .text-slate-400 { color: rgba(255, 255, 255, 0.75) !important; }
[data-ui-theme] .ui-list-header button { color: rgba(255, 255, 255, 0.75); }
[data-ui-theme] .ui-list-header button:hover { color: #ffffff; }

/* ---------- Tema PUTIH (default): header daftar terang ---------- */
[data-ui-theme="putih"] .ui-list-header {
    background-image: none !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
[data-ui-theme="putih"] .ui-list-header .text-slate-400 { color: #64748b !important; }
[data-ui-theme="putih"] .ui-list-header button { color: #64748b; }
[data-ui-theme="putih"] .ui-list-header button:hover { color: #0f172a; }

/* =====================================================================
   4) HEADER DASHBOARD (scope: elemen .ui-dash-header)
   =====================================================================
   Dipakai oleh header "Service & Part Dashboard" di dashboard.html.
   Model tampilan: versi SOFT dari tema user aktif — gradien pastel
   dari --t-50 ke --t-200 dengan teks gelap, sehingga tetap senada
   dengan skema warna sidebar/tombol tapi lebih lembut.
   ===================================================================== */

/* Fallback bila atribut tema belum sempat diset (anti-flash head) */
.ui-dash-header {
    background-color: #f0f7ff;
    background-image: linear-gradient(105deg, var(--t-50, #f0f7ff) 0%, var(--t-100, #e0effe) 60%, var(--t-200, #c9e2fa) 100%);
    color: #0f172a;
}

/* Tema berwarna (biru/teal/hijau/merah/ungu) — palet soft mengikuti tema */
[data-ui-theme] .ui-dash-header {
    background-color: var(--t-50);
    background-image: linear-gradient(105deg, var(--t-50) 0%, var(--t-100) 60%, var(--t-200) 100%);
    color: #0f172a;
    border: 1px solid var(--t-200);
}

/* Tema PUTIH (default): abu lembut netral */
[data-ui-theme="putih"] .ui-dash-header {
    background-color: #f8fafc;
    background-image: linear-gradient(105deg, #f8fafc 0%, #f1f5f9 60%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    color: #0f172a;
}