/* ==========================================================================
   TEMA RIMBA — SI-RIMB4 / CDK Wilayah IV
   --------------------------------------------------------------------------
   Lapisan tampilan di ATAS CSS bawaan Filament 3.3. Dimuat lewat render hook
   PanelsRenderHook::STYLES_AFTER (lihat AdminPanelProvider), jadi ia menimpa
   variabel warna Filament tanpa MENGGANTI stylesheet-nya.

   MENGAPA BUKAN ->viteTheme(): viteTheme MENGGANTI seluruh app.css Filament
   dengan berkas kita (vendor/filament/filament/src/Panel/Concerns/HasTheme.php
   baris 42-49). Tema Filament sejati harus meng-@import CSS vendor yang ditulis
   untuk Tailwind 3, sementara proyek ini memakai Tailwind 4. Berkas ini karena
   itu CSS MURNI — tanpa @tailwind, tanpa @apply, tanpa langkah build.
   Menaruhnya di public/ berarti naik ke produksi cukup dengan menyalin berkas;
   tidak perlu `npm run build` di server.

   MATIKAN: setel TEMA_RIMBA=false di .env, lalu `php artisan config:clear`.

   Aturan menyunting:
   - Selektor Filament memakai kelas semantik `fi-*`. Utility Tailwind bawaan
     berspesifisitas satu kelas, dan berkas ini dimuat SETELAHNYA, jadi
     selektor satu kelas pun sudah menang. `!important` hanya dipakai bila
     nilainya ditulis inline oleh Alpine.
   - Setiap warna harus punya pasangan mode gelap. Panel ini punya pengalih
     tema (fi-theme-switcher) dan sebagian pegawai memakainya.
   - Ornamen selalu SVG data-URI (hitungan byte, bukan kilobyte) — 39 pengguna
     memakai HP di lapangan dengan jaringan lambat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALET
   Tangga hijau "hutan hujan" — lebih teduh dan sedikit lebih hangat daripada
   green bawaan Tailwind, supaya tidak berbunyi seperti aplikasi bawaan.
   Format `r, g, b` mengikuti Filament (dipakai sebagai rgb(var(--primary-600))).
   -------------------------------------------------------------------------- */
:root {
    --primary-50:  240, 249, 243;
    --primary-100: 217, 240, 226;
    --primary-200: 182, 225, 200;
    --primary-300: 133, 203, 162;
    --primary-400:  77, 174, 122;
    --primary-500:  42, 145,  96;
    --primary-600:  29, 120,  78;
    --primary-700:  24,  96,  64;
    --primary-800:  21,  77,  53;
    --primary-900:  18,  63,  45;
    --primary-950:   8,  36,  25;

    /* Kelabu diberi semburat hijau-zaitun, bukan netral dingin. */
    --gray-50:  248, 250, 248;
    --gray-100: 240, 243, 240;
    --gray-200: 228, 232, 228;
    --gray-300: 205, 212, 206;
    --gray-400: 156, 166, 158;
    --gray-500: 111, 122, 113;
    --gray-600:  84,  95,  86;
    --gray-700:  62,  72,  64;
    --gray-800:  38,  47,  40;
    --gray-900:  24,  32,  26;
    --gray-950:  14,  20,  15;

    /* Aksen ekosistem: getah (peringatan) dan langit (informasi). */
    --warning-500: 217, 154,  43;
    --warning-600: 184, 124,  25;
    --info-500:     45, 138, 158;
    --info-600:     32, 112, 130;

    /* Token khas tema — dipakai hanya oleh berkas ini. */
    --rimba-tanah:        120,  85,  56;
    --rimba-lumut:         91, 143,  58;
    --rimba-kanopi-tua:    12,  46,  31;

    --rimba-sudut:            0.85rem;   /* kartu dan panel */
    --rimba-sudut-kecil:      0.6rem;    /* tombol, lencana */
    --rimba-bayang-teduh:     0 1px 2px rgb(8 36 25 / 0.06),
                              0 8px 24px -12px rgb(8 36 25 / 0.18);
    --rimba-bayang-angkat:    0 2px 4px rgb(8 36 25 / 0.08),
                              0 16px 32px -16px rgb(8 36 25 / 0.28);

    /* Gradasi */
    --rimba-gradasi-kanopi: linear-gradient(135deg,
        rgb(12 46 31) 0%, rgb(24 96 64) 45%, rgb(42 145 96) 100%);
    --rimba-gradasi-fajar: linear-gradient(120deg,
        rgb(24 96 64) 0%, rgb(91 143 58) 45%, rgb(217 154 43) 100%);
    --rimba-gradasi-kabut: linear-gradient(180deg,
        rgb(255 255 255) 0%, rgb(240 249 243) 100%);

    /* ----------------------------------------------------------------------
       ORNAMEN UTAMA — ilustrasi rimba milik pemilik proses
       ----------------------------------------------------------------------
       Sumbernya `public/image/rimba.svg` (1408x768, 2.438 path, 2,07 MB —
       874 KB sesudah gzip). Yang DIPAKAI di sini turunannya:
       `public/image/rimba-latar.webp`, 1600x873, **76 KB** — 11x lebih ringan
       daripada SVG ter-gzip. SVG aslinya TIDAK disentuh dan tetap jadi sumber.
       Ilustrasinya selalu tampil di balik cadar warna 93-95%, jadi ketajaman
       vektor tidak pernah terlihat; yang terasa cuma bobot unduhannya, dan itu
       menentukan bagi penyuluh berjaringan lambat.

       TIDAK DIULANG (no-repeat), sebab tepinya TIDAK menyambung: selisih tepi
       kiri-kanan RMSE 0,0994 dan atas-bawah 0,1141 — diulang, sambungannya
       terlihat sebagai garis. Karena itu `cover` sekali, bukan petak berulang.
       ---------------------------------------------------------------------- */
    --rimba-pola-rimba: url("/image/rimba-latar.webp");

    /* Ornamen lama — TIDAK DIPAKAI LAGI sejak 10 September 2026. Pemilik
       proses menilai keduanya "terlalu pusing untuk dilihat": kontur (ombak)
       di halaman masuk dan sebaran daun (kopi) di latar panel. Tokennya
       ditinggal supaya rujukan lama tidak patah; jangan dipakai lagi tanpa
       permintaannya. */
    --rimba-pola-kontur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23185040' stroke-width='1.2'%3E%3Cpath d='M-20 20c34-26 68 26 102 0s48 20 78 4'/%3E%3Cpath d='M-20 46c34-26 68 26 102 0s48 20 78 4'/%3E%3Cpath d='M-20 72c34-26 68 26 102 0s48 20 78 4'/%3E%3Cpath d='M-20 98c34-26 68 26 102 0s48 20 78 4'/%3E%3Cpath d='M-20 124c34-26 68 26 102 0s48 20 78 4'/%3E%3C/g%3E%3C/svg%3E");
    --rimba-pola-daun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%232A9160' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 26C8 15 16 7 27 7c0 11-8 19-19 19z'/%3E%3Cpath d='M9 25 26 8'/%3E%3Cpath d='M44 62c0-11 8-19 19-19 0 11-8 19-19 19z'/%3E%3Cpath d='M45 61 62 44'/%3E%3C/g%3E%3C/svg%3E");

    /* Ornamen geometris — lingkaran tahun (annual ring), untuk sudut kop
       halaman. Tetap dipakai: bentuknya tenang dan tidak beririsan dengan
       ilustrasi rimba. */
    --rimba-pola-lingkar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='190' cy='30' r='18'/%3E%3Ccircle cx='190' cy='30' r='38'/%3E%3Ccircle cx='190' cy='30' r='62'/%3E%3Ccircle cx='190' cy='30' r='90'/%3E%3Ccircle cx='190' cy='30' r='122'/%3E%3C/g%3E%3C/svg%3E");
}

.dark {
    --rimba-gradasi-kabut: linear-gradient(180deg,
        rgb(31 40 33) 0%, rgb(24 32 26) 100%);
    --rimba-bayang-teduh: 0 1px 2px rgb(0 0 0 / 0.5),
                          0 8px 24px -12px rgb(0 0 0 / 0.6);
    --rimba-bayang-angkat: 0 2px 4px rgb(0 0 0 / 0.55),
                           0 16px 32px -16px rgb(0 0 0 / 0.7);
}

/* --------------------------------------------------------------------------
   2. DASAR — latar berpola halus, bukan kelabu rata
   -------------------------------------------------------------------------- */
.fi-body {
    background-color: rgb(var(--gray-50));

    /* Ilustrasi rimba sebagai cap air. Cadarnya BUKAN warna rata melainkan
       gradasi — searah 160deg, sama seperti halaman masuk — sehingga latarnya
       bergerak dari hijau muda di kiri atas ke nyaris putih di kanan bawah.
       Kadar 86-90% (10 Sep, atas permintaan pemilik proses: sebelumnya rata
       94% dan dinilai kurang pekat). Menumpuk lapisan gradasi DI ATAS gambar
       adalah satu-satunya cara menurunkan kadar sebuah background-image tanpa
       elemen tambahan. Jangan diturunkan lebih jauh dari ~84%: yang dibaca di
       atasnya adalah tabel panjang. */
    background-image:
        linear-gradient(160deg,
            rgb(214 238 224 / 0.86) 0%,
            rgb(238 248 241 / 0.88) 55%,
            rgb(250 252 250 / 0.90) 100%),
        var(--rimba-pola-rimba);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
}
.dark .fi-body {
    background-color: rgb(var(--gray-950));
    background-image:
        linear-gradient(160deg,
            rgb(8 36 25 / 0.88) 0%,
            rgb(14 20 15 / 0.90) 55%,
            rgb(18 26 20 / 0.92) 100%),
        var(--rimba-pola-rimba);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
}

/* Di layar sempit `fixed` membuat gulir tersendat pada peranti lemah, dan
   iOS mengukur latar tetap terhadap seluruh dokumen — bukan jendela — sehingga
   ilustrasinya melar tak keruan. Di HP ia dipasang sekali di bagian atas. */
@media (max-width: 767px) {
    .fi-body,
    .dark .fi-body {
        background-attachment: scroll;
        background-size: auto, 190% auto;
        background-position: center, top center;
    }
}

/* Cincin fokus hijau di seluruh panel — syarat aksesibilitas, dan sebagian
   pegawai memakai papan ketik penuh di kantor. */
:where(.fi) *:focus-visible {
    outline: 2px solid rgb(var(--primary-500));
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2b. LAMBANG CDK WILAYAH IV
   Isinya dirakit App\Support\TemaRimba::lambang() dan dipasang sebagai
   `brandLogo` panel; Filament membungkusnya dalam `.fi-logo`. Susunannya
   berbeda menurut tempat: BERDAMPINGAN di kepala sidebar (tingginya hanya
   4rem), BERTUMPUK di halaman masuk (lambang di atas nama aplikasi).
   -------------------------------------------------------------------------- */
.fi-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rimba-lambang-gambar {
    height: 2.15rem;
    width: 2.15rem;
    flex: none;
    /* Lambangnya bundar berlatar putih; di mode gelap tepinya perlu dipisahkan
       dari latar supaya tidak tampak mengambang. */
    border-radius: 999px;
}
.dark .rimba-lambang-gambar {
    box-shadow: 0 0 0 1px rgb(var(--primary-800));
}
.rimba-lambang-nama {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: rgb(var(--primary-800));
    white-space: nowrap;
}
.dark .rimba-lambang-nama { color: rgb(var(--primary-200)); }

/* Halaman masuk: bertumpuk dan jauh lebih besar. Kepala halaman masuk berada
   DI DALAM kartu putih (`.fi-simple-main`), jadi warna tulisannya tetap gelap
   meski latar halamannya hijau tua. */
.fi-simple-header .fi-logo {
    flex-direction: column;
    gap: 0.85rem;
}
.fi-simple-header .rimba-lambang-gambar {
    height: 5.5rem;
    width: 5.5rem;
}
.fi-simple-header .rimba-lambang-nama {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

/* Lambang topbar — hanya untuk layar sempit, tempat kepala sidebar tidak
   terlihat. Begitu sidebar muncul (>=1024px, ambang `lg` Filament), ia
   disembunyikan supaya lambangnya tidak tampil dua kali. */
.rimba-topbar-lambang {
    height: 1.85rem;
    width: 1.85rem;
    flex: none;
    border-radius: 999px;
    margin-inline-end: 0.15rem;
}
@media (min-width: 1024px) {
    .rimba-topbar-lambang { display: none; }
}

/* --------------------------------------------------------------------------
   3. TOPBAR — gradasi kabut tipis + garis hijau di tepi bawah
   -------------------------------------------------------------------------- */
.fi-topbar > nav {
    background-color: rgb(var(--gray-50));
    background-image: linear-gradient(90deg,
        rgb(240 249 243) 0%, rgb(255 255 255) 45%, rgb(240 249 243) 100%);
    border-bottom: 1px solid rgb(var(--primary-100));
    box-shadow: 0 1px 0 rgb(var(--primary-200) / 0.5),
                0 6px 20px -18px rgb(8 36 25 / 0.5);
}
.dark .fi-topbar > nav {
    background-image: linear-gradient(90deg,
        rgb(18 26 20) 0%, rgb(24 32 26) 45%, rgb(18 26 20) 100%);
    border-bottom-color: rgb(var(--primary-900));
    box-shadow: 0 1px 0 rgb(var(--primary-800) / 0.6);
}

/* --------------------------------------------------------------------------
   4. SIDEBAR
   Sengaja TETAP TERANG. Menggelapkannya mengharuskan setiap label, ikon,
   tombol, dan lencana di dalamnya ditimpa satu per satu; satu yang terlewat
   berarti tulisan gelap di atas latar gelap bagi 39 pengguna. Varian gelap
   tersedia di bagian 12, dimatikan.
   -------------------------------------------------------------------------- */
.fi-sidebar {
    background-color: rgb(255 255 255);
    border-right: 1px solid rgb(var(--primary-100));
}
.dark .fi-sidebar {
    background-color: rgb(var(--gray-900));
    border-right-color: rgb(var(--gray-800));
}

/* Cap air di dasar sidebar — ornamen yang tidak pernah menimpa teks karena ia
   berada di bawah daftar menu. Memakai ilustrasi yang sama dengan latar panel
   supaya seluruh aplikasi bicara dengan satu ornamen, bukan tiga. */
.fi-sidebar-nav {
    position: relative;
}
.fi-sidebar-nav::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 190px;
    background-image: var(--rimba-pola-rimba);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
            mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
.dark .fi-sidebar-nav::after { opacity: 0.10; }
.fi-sidebar-nav > * { position: relative; z-index: 1; }

/* Butir menu: sudut membulat, jejak tekan lebih besar untuk jari di lapangan */
.fi-sidebar-item-button {
    border-radius: var(--rimba-sudut-kecil);
    min-height: 2.5rem;
    transition: background-color .15s ease, transform .15s ease;
}
@media (max-width: 1023px) {
    .fi-sidebar-item-button { min-height: 2.9rem; }
}
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgb(var(--primary-50));
    transform: translateX(2px);
}
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgb(var(--primary-950));
}

/* Butir aktif: pil hijau + penanda tepi kiri bergradasi */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    position: relative;
    background-image: linear-gradient(90deg,
        rgb(var(--primary-100)) 0%, rgb(var(--primary-50)) 100%);
    box-shadow: inset 0 0 0 1px rgb(var(--primary-200));
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-image: linear-gradient(90deg,
        rgb(var(--primary-900) / 0.55) 0%, rgb(var(--primary-950) / 0.4) 100%);
    box-shadow: inset 0 0 0 1px rgb(var(--primary-800));
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-block: 0.45rem;
    inset-inline-start: -0.5rem;
    width: 3px;
    border-radius: 999px;
    background-image: var(--rimba-gradasi-kanopi);
}

/* Judul grup menu: huruf kapital kecil berjarak */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    color: rgb(var(--primary-700));
}
.dark .fi-sidebar-group-label { color: rgb(var(--primary-400)); }

/* --------------------------------------------------------------------------
   5. KOP HALAMAN — satu-satunya tempat gradasi tampil penuh
   -------------------------------------------------------------------------- */
.fi-header {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 1.35rem;
    border-radius: var(--rimba-sudut);
    background-image: var(--rimba-gradasi-kanopi);
    box-shadow: var(--rimba-bayang-teduh);
}
.fi-header::after {           /* lingkaran tahun di sudut kanan atas */
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--rimba-pola-lingkar);
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.14;
    pointer-events: none;
}
.fi-header-heading,
.fi-header-subheading,
.fi-header .fi-breadcrumbs-item-label,
.fi-header .fi-breadcrumbs-item-separator {
    color: rgb(255 255 255);
    position: relative;
}
.fi-header-subheading,
.fi-header .fi-breadcrumbs-item-label { color: rgb(217 240 226); }
.fi-header .fi-breadcrumbs-item-label:hover { color: rgb(255 255 255); }

/* Tombol aksi di dalam kop harus tetap terbaca di atas hijau tua. */
.fi-header .fi-btn:not(.fi-btn-outlined) {
    background-color: rgb(255 255 255 / 0.14);
    background-image: none;
    color: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}
.fi-header .fi-btn:not(.fi-btn-outlined):hover {
    background-color: rgb(255 255 255 / 0.24);
}
.fi-header .fi-btn-label,
.fi-header .fi-btn-icon { color: rgb(255 255 255); }

/* Breadcrumb berada di atas kop; beri jarak supaya tidak menempel. */
.fi-breadcrumbs { margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   6. KARTU, PANEL, TABEL
   -------------------------------------------------------------------------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-account-widget {
    border-radius: var(--rimba-sudut);
    box-shadow: var(--rimba-bayang-teduh);
    background-image: var(--rimba-gradasi-kabut);
    border: 1px solid rgb(var(--primary-100));
    transition: box-shadow .18s ease, transform .18s ease;
}
.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-account-widget {
    border-color: rgb(var(--gray-800));
}
.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--rimba-bayang-angkat);
    transform: translateY(-2px);
}

/* Kepala Section: ikon dalam bulatan hijau, judul lebih tegas. */
.fi-section-header-icon {
    color: rgb(var(--primary-600));
    background-color: rgb(var(--primary-50));
    border-radius: 999px;
    padding: 0.4rem;
    box-sizing: content-box;
}
.dark .fi-section-header-icon {
    color: rgb(var(--primary-300));
    background-color: rgb(var(--primary-950));
}
.fi-section-header-heading { letter-spacing: -0.01em; }

/* Baris tabel: hover bersemburat hijau, kepala tabel berlatar kabut. */
.fi-ta-header-cell { background-color: rgb(var(--primary-50) / 0.7); }
.dark .fi-ta-header-cell { background-color: rgb(var(--primary-950) / 0.6); }
.fi-ta-row:hover { background-color: rgb(var(--primary-50) / 0.65); }
.dark .fi-ta-row:hover { background-color: rgb(var(--primary-950) / 0.45); }

/* Keadaan kosong: bulatan cahaya sebagai latar ikon. */
.fi-ta-empty-state-icon-ctn {
    background-image: radial-gradient(circle at center,
        rgb(var(--primary-100)) 0%, transparent 70%);
}
.dark .fi-ta-empty-state-icon-ctn {
    background-image: radial-gradient(circle at center,
        rgb(var(--primary-900) / 0.5) 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   7. TOMBOL & LENCANA
   -------------------------------------------------------------------------- */
.fi-btn {
    border-radius: var(--rimba-sudut-kecil);
    font-weight: 600;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.fi-btn:active { transform: translateY(1px); }
.fi-btn.fi-color-primary:not(.fi-btn-outlined) {
    background-image: linear-gradient(180deg,
        rgb(var(--primary-500)) 0%, rgb(var(--primary-600)) 100%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset,
                0 6px 16px -10px rgb(var(--primary-700) / 0.9);
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { filter: brightness(1.06); }

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Pengalih tab (mis. antrean verifikasi) jadi pil, bukan garis bawah. */
.fi-tabs { border-radius: 999px; background-color: rgb(var(--primary-50)); }
.dark .fi-tabs { background-color: rgb(var(--gray-900)); }
.fi-tabs-item { border-radius: 999px; }
.fi-tabs-item-active {
    background-image: var(--rimba-gradasi-kanopi);
    color: rgb(255 255 255);
}
.fi-tabs-item-active .fi-tabs-item-label,
.fi-tabs-item-active .fi-tabs-item-icon { color: rgb(255 255 255); }

/* --------------------------------------------------------------------------
   8. FORMULIR — kondisi lapangan
   16px pada isian mencegah iOS memperbesar layar sendiri saat disentuh.
   -------------------------------------------------------------------------- */
.fi-input,
.fi-select-input {
    border-radius: var(--rimba-sudut-kecil);
}
@media (max-width: 767px) {
    .fi-input, .fi-select-input, .fi-fo-textarea { font-size: 16px; }
}
.fi-fo-field-wrp-label { font-weight: 600; }
.fi-fo-field-wrp-error-message { font-weight: 500; }

/* Langkah Wizard aktif diberi gradasi supaya jelas di layar sempit. */
.fi-fo-wizard-header-step[aria-current="step"] .fi-fo-wizard-header-step-icon-ctn,
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn {
    background-image: var(--rimba-gradasi-kanopi);
}

/* --------------------------------------------------------------------------
   9. HALAMAN MASUK — satu-satunya layar yang boleh sepenuhnya bergambar
   -------------------------------------------------------------------------- */
.fi-simple-layout {
    background-color: rgb(var(--primary-950));

    /* Ilustrasi rimba tampil paling besar di sini — satu bidang penuh,
       tanpa pengulangan, jadi tidak ada sambungan yang terlihat. Di atasnya
       cadar kanopi 78%: kartu masuk berlatar putih, dan tanpa cadar itu
       tulisannya beradu dengan gambar. */
    background-image:
        linear-gradient(160deg, rgb(8 36 25 / 0.86) 0%, rgb(21 77 53 / 0.78) 55%, rgb(24 96 64 / 0.72) 100%),
        var(--rimba-pola-rimba);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
}
.fi-simple-main {
    border-radius: 1.15rem;
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.55);
    border: 1px solid rgb(255 255 255 / 0.12);
}
.fi-simple-header-heading { letter-spacing: -0.015em; }

/* --------------------------------------------------------------------------
   10. CETAK — ornamen tidak boleh ikut ke kertas
   -------------------------------------------------------------------------- */
@media print {
    .fi-body, .fi-header, .fi-simple-layout { background-image: none !important; }
    .fi-header::after, .fi-sidebar-nav::after { display: none !important; }
    .fi-header-heading, .fi-header-subheading { color: rgb(24 32 26) !important; }
    .fi-section, .fi-ta-ctn { box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   11. GERAK — hormati setelan pengguna
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-button,
    .fi-btn,
    .fi-section,
    .fi-wi-stats-overview-stat { transition: none !important; }
    .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover,
    .fi-wi-stats-overview-stat:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   12. VARIAN: SIDEBAR KANOPI GELAP — DIMATIKAN
   Aktifkan dengan menambahkan kelas `rimba-sidebar-gelap` pada <html>
   (render hook HEAD_START). BELUM diuji pada lencana navigasi, menu tenant,
   dan tombol lipat grup — periksa di peramban dulu.
   --------------------------------------------------------------------------
.rimba-sidebar-gelap .fi-sidebar {
    background-color: rgb(var(--rimba-kanopi-tua));
    background-image: var(--rimba-gradasi-kanopi), var(--rimba-pola-daun);
    border-right-color: rgb(var(--primary-800));
}
.rimba-sidebar-gelap .fi-sidebar-item-label,
.rimba-sidebar-gelap .fi-sidebar-item-icon,
.rimba-sidebar-gelap .fi-sidebar-group-label,
.rimba-sidebar-gelap .fi-sidebar-group-icon { color: rgb(217 240 226); }
.rimba-sidebar-gelap .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.rimba-sidebar-gelap .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: rgb(255 255 255); }
   -------------------------------------------------------------------------- */