/* ============================================================================
 * Dashboard Dinkes — Tema Aplikasi (global)
 * ----------------------------------------------------------------------------
 * Dua tugas:
 *   1. Mendefinisikan token warna di :root. Nilai di sini adalah CADANGAN —
 *      layout menimpanya dengan blok <style> berisi warna dari tabel `setting`,
 *      sehingga warna bisa diubah lewat menu Setting tanpa menyentuh CSS.
 *   2. Menata ulang sidebar & navbar AdminLTE memakai token tersebut.
 *
 * Struktur markup AdminLTE (kelas .nav-sidebar, .has-treeview, .menu-open,
 * data-widget="treeview") sengaja DIPERTAHANKAN — hanya tampilannya yang
 * diganti — supaya JavaScript treeview bawaan tetap berfungsi.
 *
 * Aturan dari skill ui-ux-pro-max yang diterapkan di sini:
 *   nav-state-active, nav-label-icon, nav-hierarchy, touch-target-size,
 *   focus-states, color-contrast, color-not-only, icon-style-consistent,
 *   reduced-motion, adaptive-navigation
 * ========================================================================== */

:root {
    /* Warna — ditimpa oleh layout dari pengaturan basis data.
       Nilai di bawah adalah hasil Setting::getThemeTokens() untuk preset
       bawaan "Biru Dinkes", disalin apa adanya. Jangan diarang sendiri:
       kalau cadangan ini berbeda dari yang dihitung server, tampilan
       sekejap sebelum <style> inline dibaca akan berbeda warnanya. */
    --color-primary: #1E40AF;
    --color-on-primary: #FFFFFF;
    --color-primary-hover: #1A3695;
    --color-primary-soft: #E9ECF7;
    --color-secondary: #6D83CB;
    --color-accent: #D97706;
    --color-on-accent: #0F172A;
    --color-ring: #1E40AF;
    --color-border: #DDE2F3;

    --sidebar-bg: #0F172A;
    --sidebar-text: #FFFFFF;
    --sidebar-text-muted: #ABAEB4;
    --sidebar-hover-bg: #272E3F;
    /* Bukan #1E40AF: warna utama dicerahkan otomatis agar pil menu aktif
       mencapai 3:1 terhadap latar sidebar (Setting::ensureContrast). */
    --sidebar-active-bg: #425FBC;
    --sidebar-active-text: #FFFFFF;
    --sidebar-border: #313748;
    --sidebar-brand-bg: #0B1120;

    /* Warna status — tetap, tidak ikut pengaturan pengguna, karena maknanya
       konvensional (merah = bahaya). Aturan `color-not-decorative-only`.
       Semuanya cukup gelap untuk dipasangkan dengan teks putih >= 4.5:1. */
    --color-success: #15803D;
    /* Oranye tua (bata), bukan kuning/amber. Dipilih setelah membandingkan
       lima tingkat kecerahan: tombol Ubah berjajar banyak di kolom aksi,
       jadi warna terang terasa menyala. 7.31:1 dengan teks putih. */
    --color-warning: #9A3412;
    /* Merah tua. Tetap terbaca sebagai peringatan bahaya, tapi tidak
       menyala di layar. 8.31:1 dengan teks putih. */
    --color-danger: #991B1B;
    --color-info: #0369A1;
    --color-neutral: #475569;

    --color-success-hover: #126D34;
    --color-warning-hover: #832C0F;
    --color-danger-hover: #821717;
    --color-info-hover: #035989;
    --color-neutral-hover: #334155;

    /* Netral permukaan & teks, dipakai lintas halaman */
    --color-surface: #FFFFFF;
    --color-page-bg: #F4F6F9;
    --color-text: #0F172A;        /* 16.1:1 di atas putih */
    --color-text-muted: #475569;  /*  7.5:1 di atas putih */
    --color-border-strong: #CBD5E1;

    --app-radius: 8px;
    --radius-lg: 14px;
    --app-dur: 150ms;
    --app-ease: cubic-bezier(.16, 1, .3, 1);
    --font-heading: 'Lexend', system-ui, -apple-system, sans-serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================================
 * 1. Sidebar — permukaan
 * ========================================================================== */

.main-sidebar,
.main-sidebar.sidebar-dark-primary {
    background-color: var(--sidebar-bg);
    box-shadow: none;
    border-right: 1px solid var(--sidebar-border);
    /*
     * Batasi perhitungan ulang saat lebarnya dianimasikan.
     *
     * Sidebar ini setinggi seluruh dokumen — pada beranda hampir 11.000px —
     * karena posisinya absolut. Tanpa pembatas, mengubah lebarnya memaksa
     * peramban menghitung tata letak sebidang itu pada tiap frame animasi.
     * `contain` memberitahu bahwa isinya tidak memengaruhi apa pun di luar,
     * sehingga perhitungannya berhenti di batas sidebar.
     *
     * Aman di sini karena sidebar memang sudah `overflow: hidden` dan tidak
     * ada isinya yang perlu meluber ke luar.
     */
    contain: layout paint;
}

/* Blok logo */
/* AdminLTE menyetel .brand-link ke rgba(255,255,255,.8) — tak terbaca di
   atas latar terang. Warnanya ikut token, sama seperti item menu. */
.main-sidebar .brand-link,
.main-sidebar.sidebar-dark-primary .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    color: var(--sidebar-text);
    background: var(--sidebar-brand-bg);
    border-bottom: 1px solid var(--sidebar-border);
}

.main-sidebar .brand-link img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Panel pengguna */
.main-sidebar .user-panel {
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 !important;
    border-bottom: 1px solid var(--sidebar-border);
}

.main-sidebar .user-panel .image {
    flex: 0 0 auto;
    padding: 0;
}

.main-sidebar .user-panel .image img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 2px solid var(--sidebar-border);
}

.main-sidebar .user-panel .info {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sidebar-text) !important;
    /* Satu baris, alasan sama dengan label menu: mencegah tinggi blok
       berubah-ubah selama sidebar dianimasikan buka/tutup. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-sidebar .user-panel .info small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sidebar-text-muted);
}

/* ============================================================================
 * 2. Sidebar — item menu
 * ========================================================================== */

.main-sidebar .sidebar {
    padding: 8px 10px 24px;
}

.main-sidebar .nav-sidebar .nav-item {
    margin-bottom: 2px;
}

.main-sidebar .nav-sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px; /* target sentuh minimum */
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--sidebar-text-muted);
    border-radius: var(--app-radius);
    transition: background-color var(--app-dur) var(--app-ease),
                color var(--app-dur) var(--app-ease);
}

/* --- Ikon menu -----------------------------------------------------------
 * Kotak persegi berukuran tetap, dan glyph-nya dipusatkan pada KEDUA sumbu.
 *
 * `text-align: center` saja tidak cukup: glyph FontAwesome punya lebar dan
 * tinggi yang berbeda-beda (fa-pills jauh lebih lebar daripada fa-file),
 * sehingga meratakan horizontal saja masih menyisakan pergeseran vertikal.
 * Dengan inline-flex, glyph ::before menjadi item flex dan dipusatkan
 * sempurna berapa pun ukuran aslinya.
 *
 * AdminLTE menyetel width 1.6rem + font-size 1.2rem + margin lewat
 * `.nav-sidebar>.nav-item .nav-icon` (0,3,0); selector di bawah (0,4,0)
 * mengalahkannya.
 * ----------------------------------------------------------------------- */
.main-sidebar .nav-sidebar .nav-link .nav-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: inherit;
}

/*
 * Label menu SELALU satu baris.
 *
 * Sebelumnya label dibiarkan membungkus (`white-space: normal` +
 * `overflow-wrap: anywhere`) supaya nama panjang tidak terpotong. Diukur di
 * peramban, itu ternyata tidak pernah diperlukan: ruang yang tersedia 171px
 * dan nama terpanjang — "Integrasi & Sinkronisasi" — juga 171px. Tidak ada
 * satu pun label yang benar-benar perlu membungkus.
 *
 * Sementara ongkosnya besar. AdminLTE menyetel lebar label menjadi NOL saat
 * sidebar tertutup, dan menganimasikan lebar sidebar selama 0,3 detik. Dengan
 * pembungkusan aktif, sepanjang animasi itu teks dibungkus ulang pada tiap
 * lebar antara — satu huruf per baris ketika lebarnya mendekati nol —
 * sehingga tinggi tiap item ikut berubah-ubah dan seluruh daftar menu
 * bergoyang sebelum akhirnya menetap. Itu yang terlihat sebagai "berubah dulu
 * lalu diperbaiki sendiri" saat sidebar dibuka.
 *
 * Dengan satu baris tetap, tidak ada yang dihitung ulang selama animasi:
 * hanya lebarnya yang bergerak, teksnya sekadar tersingkap atau terpotong.
 *
 * `text-overflow: ellipsis` dipasang sebagai jaring pengaman untuk nama menu
 * yang kelak lebih panjang — terpotong dengan "…" yang jelas, bukan terpenggal
 * di tengah huruf.
 */
.main-sidebar .nav-sidebar .nav-link p {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Sidebar tertutup ----------------------------------------------------
 * Saat menyempit, AdminLTE TIDAK menyembunyikan label menunya. Ia
 * mengandalkan `white-space: nowrap` bawaannya: teks tetap ada, memanjang
 * ke samping, lalu terpotong oleh sidebar yang `overflow: hidden` —
 * sehingga yang terlihat hanya ikonnya.
 *
 * Aturan pembungkus di atas (dipasang supaya nama menu panjang seperti
 * "Integrasi & Sinkronisasi" tidak terpotong saat sidebar terbuka)
 * membatalkan andalan itu. Akibatnya label tidak lagi memanjang ke samping
 * melainkan MEMBUNGKUS ke bawah di dalam lebar 4,6rem, pecah per suku kata:
 * "Be / ran / da", "La / po / ran / & / An / ali / sis".
 *
 * Jadi pembungkusannya dikembalikan HANYA selama sidebar tertutup. Begitu
 * dibuka — termasuk saat mengambang karena disorot pada mode mini — aturan
 * di atas berlaku lagi.
 * ----------------------------------------------------------------------- */
/*
 * CATATAN untuk yang menyunting berikutnya.
 *
 * Label sidebar sekarang selalu satu baris (lihat aturan `.nav-link p` di
 * atas). JANGAN mengembalikannya menjadi `white-space: normal` +
 * `overflow-wrap: anywhere`: AdminLTE menyetel `width: 0` pada label saat
 * sidebar tertutup, dan pada lebar nol pembungkusan memecah teks satu huruf
 * per baris — item menu membengkak dari 44px menjadi 160–454px, dan daftar
 * menu bergoyang sepanjang animasi buka/tutup.
 *
 * Sudah dicoba dan sama-sama merusak: (a) mengembalikan pembungkus hanya
 * saat disorot — AdminLTE tidak mengembalikan lebar labelnya di sana, jadi
 * lebarnya tetap nol; (b) menyembunyikan label dengan `display: none` —
 * tinggi barisnya kehilangan acuan dan menganga.
 */

/* --- Menimpa warna hardcoded AdminLTE ------------------------------------
 * AdminLTE menulis warna sidebar langsung di CSS-nya, dengan asumsi
 * sidebar SELALU gelap:
 *
 *   [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link,
 *   [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus
 *       { background-color: rgba(255,255,255,.1); color: #fff }
 *
 *   [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link:hover
 *       { background-color: rgba(255,255,255,.1); color: #fff }
 *
 *   [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:active
 *       { color: #c2c7d0 }
 *
 * Begitu pengguna memilih latar sidebar yang terang, putih 10% di atas
 * latar terang praktis tidak terlihat — dan `color:#fff` membuat teksnya
 * ikut hilang. Selector AdminLTE (0,5,0) lebih spesifik dari selector
 * biasa, jadi penimpanya harus lebih spesifik lagi.
 *
 * Catatan: perhatikan bahwa hover AdminLTE dipasang di `.nav-item:hover`,
 * bukan `.nav-link:hover` — keduanya perlu ditangani.
 * ----------------------------------------------------------------------- */

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item:hover > .nav-link:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:focus:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:active:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:focus:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:active:not(.active) {
    color: var(--sidebar-text);
    background-color: var(--sidebar-hover-bg);
}

/* --- Keadaan aktif -------------------------------------------------------
 * Ditandai TIGA cara sekaligus — warna latar, bobot huruf, dan penanda
 * batang di sisi kiri — supaya lokasi terbaca tanpa bergantung pada warna
 * (aturan `nav-state-active` + `color-not-only`).
 * ----------------------------------------------------------------------- */

/* Semua varian keadaan disebut eksplisit. AdminLTE punya aturan tersendiri
   untuk `.nav-treeview>.nav-item>.nav-link.active` (latar putih 90%!) dan
   untuk `.active:hover` / `.active:focus`; kalau tidak ditimpa satu per satu,
   submenu yang aktif berubah jadi pil putih saat disentuh kursor. */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:focus,
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item:hover > .nav-link.active,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:focus,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item:hover > .nav-link.active,
.main-sidebar .nav-sidebar .nav-link.active {
    font-weight: 600;
    color: var(--sidebar-active-text);
    background-color: var(--sidebar-active-bg);
    box-shadow: none;
}

/* Item aktif tetap memberi umpan balik saat disentuh kursor — sedikit lebih
   gelap, bukan hilang (aturan `press-feedback`). */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    color: var(--sidebar-active-text);
    background-color: var(--color-primary-hover);
}

.main-sidebar .nav-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 20px;
    transform: translateY(-50%);
    background: var(--sidebar-active-text);
    border-radius: 0 3px 3px 0;
    opacity: .9;
}

/* Induk menu yang sedang terbuka: ditegaskan, tapi tidak menyaingi anak
   yang benar-benar aktif (aturan `nav-hierarchy`). */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    color: var(--sidebar-text);
    background-color: var(--sidebar-hover-bg);
}

/* Chevron */
.main-sidebar .nav-sidebar .nav-link .right {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    opacity: .7;
    transition: transform var(--app-dur) var(--app-ease);
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link .right {
    transform: rotate(-90deg);
}

/* --- Submenu -------------------------------------------------------------
 * Diberi rel vertikal supaya hubungan induk–anak terlihat, bukan sekadar
 * daftar yang menjorok.
 * ----------------------------------------------------------------------- */

.main-sidebar .nav-sidebar .nav-treeview {
    position: relative;
    margin: 2px 0 6px;
    padding-left: 22px;
}

.main-sidebar .nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--sidebar-border);
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
}

/* Ikon submenu memakai perlakuan yang sama, hanya lebih kecil. Selector ini
   (0,6,0) mengalahkan `.nav-sidebar .nav-treeview>.nav-item>.nav-link>.nav-icon`
   milik AdminLTE (0,5,0) yang memaksa width 1.6rem. */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    opacity: .8;
}

/* ============================================================================
 * 3. Fokus keyboard (aturan CRITICAL `focus-states`)
 * ========================================================================== */

.main-sidebar a:focus-visible,
.main-header a:focus-visible,
.main-header button:focus-visible {
    outline: 3px solid var(--color-on-primary);
    outline-offset: -3px;
    border-radius: var(--app-radius);
}

.main-header a:focus-visible,
.main-header button:focus-visible {
    outline-color: var(--color-ring);
    outline-offset: 2px;
}

/* ============================================================================
 * 4. Scrollbar sidebar — menu di aplikasi ini panjang
 * ========================================================================== */

.main-sidebar .sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

.main-sidebar .sidebar::-webkit-scrollbar {
    width: 8px;
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-text-muted);
    background-clip: content-box;
}

/* ============================================================================
 * 5. Navbar atas
 * ========================================================================== */

.main-header.navbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

.main-header.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: #475569;
    border-radius: var(--app-radius);
    transition: background-color var(--app-dur) var(--app-ease),
                color var(--app-dur) var(--app-ease);
}

.main-header.navbar .nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* ============================================================================
 * 6. Tombol & elemen umum yang ikut warna tema
 * ========================================================================== */

.btn-primary {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    color: var(--color-on-primary);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:focus-visible {
    outline: 3px solid var(--color-ring);
    outline-offset: 2px;
    box-shadow: none;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

.main-footer {
    border-top: 1px solid var(--color-border);
    color: #475569;
}

.main-footer a {
    color: var(--color-primary);
}

/* ============================================================================
 * 7. prefers-reduced-motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .main-sidebar *,
    .main-header * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}