/* ===========================================================================
   Rias panel Kelola HSS
   ---------------------------------------------------------------------------
   Menumpang tema bawaan Filament, tidak menggantinya. Yang diubah hanya rupa:
   warna permukaan, jarak, sudut, dan bayangan. Tidak satu pun perilaku, dan
   tidak satu pun tombol yang berpindah tempat — panel yang berubah letak
   tombolnya membuat admin yang sudah hafal harus belajar ulang.

   Satu-satunya ukuran tata letak yang diubah adalah LEBAR AREA KERJA, dan
   alasannya ada pada bagiannya sendiri di bawah. Tidak ada yang berpindah
   karenanya; kolomnya hanya melebar.

   TIGA ATURAN YANG DIPATUHI BERKAS INI

   1. Warna diambil sebagai var(--primary-500), var(--gray-200), dan sejenisnya
      — persis seperti yang dipakai Filament sendiri di theme.css-nya. Token itu
      berisi NILAI WARNA UTUH (oklch(...)), jadi tidak boleh dibungkus rgb() dan
      tidak boleh diberi awalan --color-. Keduanya menghasilkan warna tidak sah,
      dan peramban membuang seluruh deklarasinya tanpa satu pun galat. Dua-duanya
      sudah pernah terjadi di proyek ini: rgb(var(--gray-200)) membuat gambaran
      template tak terlihat, dan --color-primary-500 membuat garis warna di
      kartu angka hilang sementara tinggi 3px-nya tetap terpasang.

   2. Seluruh pemilih berawalan .fi-, kelas milik Filament sendiri, dan nama
      kelasnya dicocokkan ke vendor/filament/filament/dist/theme.css — bukan
      dikira-kira. Nama yang mirip tetapi salah gagal diam-diam:
      .fi-sidebar-item-button tidak ada, yang ada .fi-sidebar-item-btn.
      PanelRiasTest menjaga keduanya, token dan nama kelas.

   3. Mode gelap ditulis lewat .dark, bukan lewat prefers-color-scheme.
      Filament memasang kelas itu sendiri saat penggunanya memilih, dan
      mengikuti setelan sistem akan melawan pilihan yang sudah dibuat orang.
   =========================================================================== */

/* --- Dasar --------------------------------------------------------------- */

/*
 * TIGA TINGKAT PERMUKAAN
 *
 *   latar luar   paling gelap   di luar kerangka, tempat tidak ada isi apa pun
 *   kerangka     lebih terang   bilah samping dan area kerja
 *   kartu        paling terang  bagian, tabel, kartu angka
 *
 * Urutannya yang membuat mata tahu mana yang boleh disentuh tanpa satu pun
 * garis tebal. Sebelumnya ketiganya hampir sewarna, sehingga kerangka yang
 * sudah dipusatkan pun tidak terlihat batasnya — hanya terbaca sebagai halaman
 * yang isinya kebetulan tidak sampai ke tepi.
 *
 * Selisih antartingkat sengaja kecil. Latar luar yang terlalu gelap akan
 * menarik mata ke bagian layar yang justru tidak ada isinya.
 */
/*
 * TIGA TEMPAT, SATU DEKLARASI
 *
 * Badan halaman, bilah atas, dan lapisan sudut kerangka memakai latar yang SAMA
 * PERSIS — satu aturan untuk ketiganya, bukan tiga nilai kembar yang disalin.
 * Nilai kembar di beberapa tempat selalu berakhir berbeda begitu salah satunya
 * disetel ulang, dan bedanya terlalu tipis untuk disadari sebagai kekeliruan:
 * hanya terlihat sebagai garis samar di bawah bilahnya, atau dua bercak di
 * sudut kerangkanya.
 *
 * Yang ketiga itu yang paling menuntut. Lapisan sudut memulas latar LUAR ke
 * dalam kedua sudut kerangka; warnanya harus sama persis, bukan mirip. Semula
 * ia menyalin deklarasi ini, dan salinan itulah yang dihapus dengan menyatukan
 * pemilihnya. Menitipkannya ke custom property tidak bisa: PanelRiasTest
 * menolak var(--…) yang tidak ada di halaman panel, dan yang didefinisikan di
 * berkas ini memang tidak pernah sampai ke sana.
 *
 * background-attachment: fixed yang membuat ketiganya menyatu benar-benar
 * mulus. Gradiennya dihitung terhadap LAYAR, bukan terhadap masing-masing
 * kotak, sehingga bilah atas melanjutkan gradien badan halaman tepat di titik
 * yang sama — tanpa itu bilahnya memulai gradiennya sendiri dari awal dan
 * menghasilkan patahan warna tepat di batas bawahnya, dan lapisan sudut
 * meninggalkan dua bercak lebih terang.
 *
 * Latarnya pekat, bukan tembus pandang. Bilah atas position: sticky, jadi isi
 * halaman lewat di belakangnya saat digulung; yang tembus pandang akan
 * memperlihatkan baris tabel merayap di belakang nama panelnya.
 *
 * EMPAT LAPIS WARNA, bukan tiga. Dua sapuan biru merek di sudut berseberangan,
 * satu sapuan sian yang menghangatkan tengahnya, dan satu sapuan kuning yang
 * sangat tipis di kiri atas — supaya keseluruhannya tidak terbaca sebagai satu
 * bidang biru yang datar.
 */
.fi-body,
.fi-topbar-ctn,
.fi-body:has(.fi-topbar-ctn)::after {
    background:
        radial-gradient(58rem 38rem at 88% -12%, color-mix(in srgb, var(--primary-400) 30%, transparent), transparent 66%),
        radial-gradient(46rem 32rem at -10% 108%, color-mix(in srgb, var(--info-400) 26%, transparent), transparent 68%),
        radial-gradient(38rem 30rem at 22% -8%, color-mix(in srgb, var(--warning-300) 14%, transparent), transparent 70%),
        color-mix(in srgb, var(--primary-500) 10%, var(--gray-100));
    background-attachment: fixed;
}
.dark .fi-body,
.dark .fi-topbar-ctn,
.dark .fi-body:has(.fi-topbar-ctn)::after {
    background:
        radial-gradient(58rem 38rem at 88% -12%, color-mix(in srgb, var(--primary-400) 16%, transparent), transparent 66%),
        radial-gradient(46rem 32rem at -10% 108%, color-mix(in srgb, var(--info-500) 14%, transparent), transparent 68%),
        radial-gradient(38rem 30rem at 22% -8%, color-mix(in srgb, var(--warning-500) 7%, transparent), transparent 70%),
        color-mix(in srgb, var(--gray-950) 82%, #000);
    background-attachment: fixed;
}

/* --- Lebar kerangka panel ------------------------------------------------- */

/*
 * SELURUH kerangka dipusatkan pada 1440px — bilah samping ikut di dalamnya,
 * bukan hanya area isinya. Angkanya sama dengan --lebar-maks pada portal.css,
 * dan PanelRiasTest menjaga keduanya tetap sama bila kelak lebar portalnya
 * diubah.
 *
 * Bawaan Filament membentangkan kerangkanya selebar layar: bilah samping
 * menempel ke tepi kiri monitor, tabel mentok ke tepi kanan. Di monitor lebar
 * itu membuat panel terbaca sebagai aplikasi yang berbeda daripada halaman
 * satuan kerja yang diaturnya — yang justru berhenti pada 1440px dan
 * dipusatkan. Admin berpindah bolak-balik antara keduanya sepanjang hari.
 *
 * Membatasi .fi-main saja tidak menjawabnya: yang menempel ke tepi layar
 * adalah bilah sampingnya, dan bilah samping berada DI LUAR .fi-main.
 *
 * Bilah samping memakai position: sticky, jadi ia mengikuti kotak induknya
 * dengan sendirinya begitu .fi-layout dibatasi — tanpa perlu menghitung tepi
 * layar sendiri lewat calc(), yang akan meleset setiap kali lebar bilah
 * sampingnya berubah.
 */
.fi-layout {
    max-width: 1440px;
    margin-inline: auto;

    /* Permukaan tingkat dua. Bayangannya yang memisahkan, bukan garisnya:
       garis tegas setinggi layar membelah tampilan jadi dua, sedangkan
       bayangan hanya mengangkat kerangkanya sedikit dari latar. */
    background: color-mix(in srgb, var(--primary-100) 62%, var(--gray-100));
    border-radius: 0.9rem 0.9rem 0 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-200) 60%, transparent),
                0 24px 60px -28px color-mix(in srgb, var(--primary-950) 34%, transparent);
}
.dark .fi-layout {
    /* Sedikit lebih terang daripada latar luar, tetapi tetap lebih gelap
       daripada kartunya — supaya urutan ketiga tingkatnya tidak terbalik di
       mode gelap. */
    background: color-mix(in srgb, var(--gray-900) 45%, var(--gray-950));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-800) 70%, transparent),
                0 18px 50px -24px rgb(0 0 0 / 55%);
}

/* Sudut kiri atas kerangka ditutup bilah samping, yang punya latar sendiri.
   Tanpa baris ini sudutnya kembali bersiku sementara sudut kanannya membulat. */
.fi-sidebar { border-start-start-radius: 0.9rem; }

/*
 * Sudut atas kerangka, ditahan tetap terlihat saat halaman digulung.
 *
 * Bilah atas adalah SAUDARA .fi-layout, bukan anaknya — keduanya anak langsung
 * .fi-body — dan ia position: sticky pada top: 0 dengan latar pekat. Maka
 * begitu halaman digulung, .fi-layout naik ke belakangnya: kedua sudut
 * membulatnya ikut naik keluar pandangan, dan yang tersisa tepat di bawah
 * bilahnya hanya sisi tegaknya yang bersiku.
 *
 * Bilah samping tidak menolong meski ia sendiri sticky pada 4rem dan sudah
 * diberi sudut kiri atas di aturan tepat sebelum ini. Latarnya tembus pandang,
 * jadi sudut .fi-layout yang bersiku di belakangnya tetap terbaca menembusnya.
 *
 * Yang mengembalikannya: satu lapis setipis jari-jarinya, position: fixed tepat
 * di bawah bilah atas, memulas latar LUAR pada kedua sudutnya saja. Karena ia
 * ikut layar dan bukan ikut halaman, sudutnya berdiri di tempat yang sama pada
 * setiap kedudukan gulungan — termasuk pada kedudukan nol, tempat ia jatuh
 * persis menimpa sudut asli .fi-layout sehingga tidak menambah apa pun yang
 * terlihat. Itu yang membuatnya aman: tidak ada keadaan yang perlu dikecualikan.
 *
 * Tiga hal yang membuatnya duduk tepat, dan ketiganya gagal diam-diam:
 *
 * 1. inset-inline: 0 dengan margin-inline: auto dan max-width yang SAMA dengan
 *    .fi-layout — mekanisme pemusatan yang sama persis, bukan yang sepadan.
 *    Bukan 100vw: satuan itu menghitung batang gulung sebagai bagian dari lebar
 *    layar sedangkan margin auto tidak, sehingga di komputer yang batang
 *    gulungnya memakan tempat keduanya meleset beberapa piksel — terbaca
 *    sebagai sudut yang tidak sejajar dengan sisi kerangkanya.
 *
 * 2. background-attachment: fixed, sama seperti .fi-body. Gradiennya dihitung
 *    terhadap layar, bukan terhadap kotaknya sendiri, jadi warna yang dipulas
 *    lapisan ini jatuh tepat pada warna latar di sekelilingnya. Tanpa itu ia
 *    memulai gradiennya sendiri dari awal dan meninggalkan dua bercak lebih
 *    terang di kedua sudut.
 *
 * 3. :has(.fi-topbar-ctn) yang menjaganya. Halaman masuk tidak punya bilah atas
 *    dan tidak punya kerangka; tanpa penjaga ini dua kepingan latar menggantung
 *    di udara pada 4rem dari puncak halaman masuk.
 *
 * 4rem ditulis sebagai angka, bukan token. Itu tinggi bilah atas yang Filament
 * sendiri tetapkan sebagai angka — min-height 4rem pada .fi-topbar, dan
 * 100dvh - 4rem pada .fi-main-ctn. Token buatan sendiri juga tidak mungkin
 * dipakai di sini: PanelRiasTest menolak var(--…) yang tidak ada di halaman
 * panel, dan yang didefinisikan di berkas ini memang tidak pernah sampai ke sana.
 */
.fi-body:has(.fi-topbar-ctn)::after {
    content: "";
    position: fixed;
    inset-block-start: 4rem;
    inset-inline: 0;
    margin-inline: auto;
    max-width: 1440px;
    height: 0.9rem;

    /* Di atas bilah samping (z-20), di bawah bilah atas (z-30). */
    z-index: 25;
    pointer-events: none;

    /*
     * Warnanya TIDAK disebut di sini. Ia datang dari aturan latar di bagian
     * Dasar, yang pemilihnya sudah memuat lapisan ini — satu deklarasi untuk
     * badan halaman, bilah atas, dan sudut ini sekaligus.
     *
     * Yang tetap disebut hanya penambatnya, dan itu bukan pengulangan sia-sia:
     * ia yang membuat gradiennya dihitung terhadap layar alih-alih terhadap
     * kotak selebar 14px ini, dan PanelRiasTest menuntutnya disebut pada setiap
     * lapisan yang ikut layar.
     */
    background-attachment: fixed;

    /*
     * Yang dipulas hanya dua keping sudut selebar jari-jarinya; seluruh bentang
     * di antaranya dibiarkan tembus supaya isi halaman lewat seperti biasa.
     *
     * Titik pusat lingkarannya di SUDUT DALAM masing-masing keping — kanan
     * bawah untuk keping kiri, kiri bawah untuk keping kanan — sehingga yang
     * tersisa persis bagian di luar lengkungnya. Setengah piksel sebelum
     * jari-jarinya dibuat tembus supaya tepi lengkungnya berbaur, bukan
     * bergerigi.
     */
    -webkit-mask-image:
        radial-gradient(circle at bottom right, transparent calc(0.9rem - 0.5px), #000 0.9rem),
        radial-gradient(circle at bottom left, transparent calc(0.9rem - 0.5px), #000 0.9rem);
    -webkit-mask-size: 0.9rem 0.9rem;
    -webkit-mask-position: left top, right top;
    -webkit-mask-repeat: no-repeat;
    mask-image:
        radial-gradient(circle at bottom right, transparent calc(0.9rem - 0.5px), #000 0.9rem),
        radial-gradient(circle at bottom left, transparent calc(0.9rem - 0.5px), #000 0.9rem);
    mask-size: 0.9rem 0.9rem;
    mask-position: left top, right top;
    mask-repeat: no-repeat;
}

.fi-main {
    padding-inline: clamp(16px, 4vw, 32px);
}

/* --- Halaman masuk -------------------------------------------------------- */

/*
 * Halaman masuk tidak memakai kerangka: tidak ada bilah samping, tidak ada
 * bilah atas. Yang ada hanya satu kartu di tengah latar, jadi kartunya yang
 * harus terangkat sendiri — di halaman lain tugas itu dipegang kerangkanya.
 */
.fi-simple-main {
    border-radius: 1rem;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    box-shadow: 0 1px 2px rgb(15 30 45 / 5%),
                0 24px 60px -28px rgb(15 30 45 / 30%);
}
.dark .fi-simple-main {
    border-color: var(--gray-800);
    background: color-mix(in srgb, var(--gray-900) 55%, var(--gray-950));
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%),
                0 24px 60px -28px rgb(0 0 0 / 60%);
}

/* Lambang, nama panel, lalu judul "Masuk" — tiga baris yang perlu berjarak
   longgar. Rapat, ketiganya terbaca sebagai satu blok tanpa urutan. */
.fi-simple-header { text-align: center; }

/*
 * "Masuk ke akun Anda" disembunyikan dari mata, TIDAK dibuang dari halaman.
 *
 * Yang tersisa di layar sudah cukup menjelaskan dirinya: lambang kabupaten,
 * lalu dua medan bernama Alamat email dan Kata sandi, lalu tombol Masuk.
 * Judulnya hanya mengulang.
 *
 * Tetapi ia satu-satunya judul halaman ini. Dibuang sama sekali, pengguna
 * pembaca layar kehilangan penanda tempat — mereka melompat antarjudul untuk
 * tahu sedang berada di mana, dan halaman tanpa satu pun judul terbaca sebagai
 * halaman yang belum selesai dimuat. Disembunyikan begini, ia tetap terbaca
 * mereka dan tidak terlihat oleh yang lain.
 *
 * Bukan display: none — itu menyembunyikannya dari pembaca layar juga.
 */
.fi-simple-header-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

/*
 * !important, dan ini satu-satunya di berkas ini.
 *
 * Filament menulis tinggi merek sebagai GAYA SEBARIS pada kotaknya, diambil
 * dari brandLogoHeight. Nilai itu pas untuk bilah atas (2rem) tetapi terlalu
 * pendek untuk halaman masuk, dan gaya sebaris tidak dapat dikalahkan pemilih
 * seberapa pun khususnya.
 *
 * Akibatnya bukan sekadar lambang yang kecil: isinya meluber keluar kotak
 * 2rem itu, lalu judul "Masuk ke akun Anda" tergambar menimpa lambangnya.
 * Terlihat begitu halamannya dibuka — tetapi hanya bila ada yang membukanya,
 * sebab tidak satu pun galat muncul.
 */
.fi-simple-header .fi-logo {
    height: auto !important;
    margin-inline: auto;
}

/* Jarak nafas di atas dan bawah kartu. Ditaruh pada pembungkusnya, bukan pada
   .fi-simple-page: kelas itu ada di markah tetapi tidak punya satu pun aturan
   di CSS bawaan Filament, dan PanelRiasTest menolak pemilih yang tidak pernah
   cocok dengan apa pun. */
.fi-simple-main-ctn { padding-block: 2rem; }

/* --- Bilah samping -------------------------------------------------------- */

.fi-sidebar {
    background: color-mix(in srgb, var(--gray-50) 84%, transparent);
    backdrop-filter: blur(10px);
    border-right: 1px solid color-mix(in srgb, var(--primary-200) 50%, transparent);
}
.dark .fi-sidebar {
    background: color-mix(in srgb, var(--gray-900) 80%, transparent);
    border-right-color: color-mix(in srgb, var(--primary-900) 45%, var(--gray-800));
}

/* Butir menu berbentuk pil. Yang aktif diberi warna merek, bukan sekadar
   ditebalkan: tebal saja sulit dibedakan pada daftar yang seluruhnya pendek. */
.fi-sidebar-item-btn {
    border-radius: 0.6rem;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.fi-sidebar-item-btn:hover { transform: translateX(1px); }

/*
 * Butir aktif: pil berwarna yang memudar ke kanan, bukan blok rata.
 *
 * Gradiennya menua ke arah tulisan sehingga garis merek di kiri terbaca
 * sebagai pangkalnya. Ikon dan tulisannya ikut berwarna — pil berwarna dengan
 * ikon abu-abu di dalamnya terbaca setengah jadi.
 */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary-500) 20%, transparent),
        color-mix(in srgb, var(--primary-500) 6%, transparent));
    box-shadow: inset 3px 0 0 var(--primary-500);
    color: var(--primary-800);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--primary-600); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 650; }

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary-400) 26%, transparent),
        color-mix(in srgb, var(--primary-400) 8%, transparent));
    box-shadow: inset 3px 0 0 var(--primary-400);
    color: var(--primary-100);
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--primary-300); }

/* Sekadar disentuh kursor: warnanya sudah muncul, tetapi jauh lebih tipis
   supaya tidak tertukar dengan butir yang sedang terbuka. */
.fi-sidebar-item-btn:hover {
    background: color-mix(in srgb, var(--primary-500) 7%, transparent);
}

/* Judul kelompok navigasi: lebih kecil, berjarak huruf, dan berjarak atas —
   supaya ketiga kelompok terbaca sebagai tiga blok, bukan satu daftar panjang. */
.fi-sidebar-group-label {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.72;
}
.fi-sidebar-group + .fi-sidebar-group { margin-top: 1.1rem; }

/* --- Bilah atas ----------------------------------------------------------- */

/*
 * Latarnya dipasang pada pembungkusnya, isinya yang dipusatkan — sama seperti
 * kepala halaman portal: bilahnya selebar layar, isinya berhenti pada kotak
 * yang sama dengan kerangka di bawahnya.
 *
 * Bila latarnya ikut dibatasi 1440px, isi halaman yang tergulung akan lewat
 * di kiri dan kanannya tanpa tertutup apa pun — dan .fi-topbar-ctn inilah yang
 * position: sticky, jadi memang di situ tempat latarnya.
 */
/*
 * Latar bilah atas ada di bagian Dasar, satu aturan bersama badan halaman.
 *
 * Tanpa garis bawah. Garis selebar layar akan memotong tepat di sudut membulat
 * kerangka di bawahnya — dan karena bilahnya kini sewarna latar, garis itu
 * justru satu-satunya yang akan membuatnya terlihat sebagai papan terpisah.
 */
.fi-topbar-ctn {
    border-bottom: 0;
}

.fi-topbar {
    max-width: 1440px;
    margin-inline: auto;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

/* --- Kartu dan bagian ----------------------------------------------------- */

/*
 * Kartu diangkat dengan BAYANGAN BERWARNA, bukan bayangan hitam.
 *
 * Bayangan hitam di atas latar biru menghasilkan abu-abu keruh — warnanya
 * mati, dan kartunya terbaca kotor alih-alih terangkat. Bayangan yang
 * dicampur dari primary-950 tetap gelap tetapi sewarna dengan latarnya, jadi
 * yang terlihat kedalaman, bukan noda.
 */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary-200) 55%, var(--gray-200));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--primary-950) 7%, transparent),
        0 14px 32px -16px color-mix(in srgb, var(--primary-900) 22%, transparent);
    transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    border-color: color-mix(in srgb, var(--primary-900) 40%, var(--gray-800));
    box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 14px 32px -16px rgb(0 0 0 / 50%);
}

.fi-section:hover {
    border-color: color-mix(in srgb, var(--primary-300) 70%, transparent);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--primary-950) 8%, transparent),
        0 18px 40px -18px color-mix(in srgb, var(--primary-800) 28%, transparent);
}

/* Judul bagian diberi garis warna merek di kirinya. Penanda sekecil ini cukup
   memisahkan bagian tanpa menambah bingkai baru. */
.fi-section-header-heading {
    position: relative;
    padding-left: 0.7rem;
}
.fi-section-header-heading::before {
    content: "";
    position: absolute;
    left: 0; top: 0.18em; bottom: 0.18em;
    width: 3px;
    border-radius: 999px;
    background: var(--primary-500);
}

/* --- Kartu angka ---------------------------------------------------------- */

/*
 * Kartu angka diberi WATAK WARNA, bukan sekadar garis di puncaknya.
 *
 * Semula hanya garis 3px. Itu cukup membedakan, tetapi empat kartu yang badannya
 * tetap putih semua masih terbaca sebagai satu blok panjang. Kini seluruh
 * kartunya ikut berwarna — sapuan tipis yang memudar dari sudut kiri atas —
 * sehingga angka "perlu ditinjau" terbaca berbeda dari "sudah terbit" bahkan
 * dari ujung ruangan.
 *
 * Sapuannya sangat tipis dan MEMUDAR, tidak rata. Kartu angka berlatar penuh
 * membuat angkanya sendiri kehilangan kontras, dan angka itulah yang sebenarnya
 * dibaca.
 */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--primary-500);
    opacity: 0.9;
}

.fi-wi-stats-overview-stat {
    background-image: linear-gradient(150deg,
        color-mix(in srgb, var(--primary-500) 11%, transparent),
        transparent 62%);
}
.fi-wi-stats-overview-stat:has(.fi-color-danger) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--danger-500) 11%, transparent), transparent 62%);
}
.fi-wi-stats-overview-stat:has(.fi-color-warning) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--warning-500) 13%, transparent), transparent 62%);
}
.fi-wi-stats-overview-stat:has(.fi-color-success) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--success-500) 11%, transparent), transparent 62%);
}
.fi-wi-stats-overview-stat:has(.fi-color-info) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--info-500) 11%, transparent), transparent 62%);
}
.fi-wi-stats-overview-stat:has(.fi-color-gray) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--gray-500) 9%, transparent), transparent 62%);
}

.fi-wi-stats-overview-stat:has(.fi-color-danger)::before { background: var(--danger-500); }
.fi-wi-stats-overview-stat:has(.fi-color-warning)::before { background: var(--warning-500); }
.fi-wi-stats-overview-stat:has(.fi-color-success)::before { background: var(--success-500); }
.fi-wi-stats-overview-stat:has(.fi-color-info)::before { background: var(--info-500); }
.fi-wi-stats-overview-stat:has(.fi-color-gray)::before { background: var(--gray-300); }

/* Label di atas angkanya: kecil, berjarak huruf, dan redup — supaya angkanya
   yang pertama tertangkap mata, bukan keterangannya. */
.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 650;
    opacity: 0.82;
}
.fi-wi-stats-overview-stat-description { font-size: 0.78rem; opacity: 0.8; }

.fi-wi-stats-overview-stat-value {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* --- Tabel ---------------------------------------------------------------- */

/*
 * Latar kepala kolom WAJIB pekat, dan itu bukan pilihan rupa.
 *
 * Kepala kolom ini position: sticky di puncak daerah gulung tabelnya (lihat
 * bagian Gulungan halaman daftar). Latar yang tembus pandang memperlihatkan
 * baris yang lewat di belakang tulisannya — terbaca sebagai tulisan bertindih.
 *
 * Karena itu campurannya dari DUA warna pekat, bukan warna dengan transparent.
 * color-mix(…, transparent) menghasilkan warna tembus, dan kekeliruan itu tidak
 * akan berbunyi apa pun sampai ada yang menggulung tabelnya.
 */
.fi-ta-header-cell {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--primary-50) 62%, var(--gray-50));
    color: var(--primary-900);
}
.dark .fi-ta-header-cell {
    background: color-mix(in srgb, var(--primary-950) 45%, var(--gray-900));
    color: var(--primary-100);
}

.fi-ta-row { transition: background-color 120ms ease; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--primary-500) 7%, transparent); }
.dark .fi-ta-row:hover { background: color-mix(in srgb, var(--primary-400) 10%, transparent); }

/* --- Gulungan halaman daftar --------------------------------------------- */

/*
 * Yang menggulung tabelnya, bukan seluruh halamannya.
 *
 * Bawaan Filament membiarkan dokumen yang menggulung: barisnya memanjang ke
 * bawah sampai halaman ikut memanjang. Akibatnya bukan sekadar rasa — dengan
 * 398 berita dan 10 baris per halaman, PENOMORAN HALAMAN duduk di dasar
 * halaman. Untuk pindah ke halaman berikutnya admin harus menggulung melewati
 * seluruh baris lebih dulu, setiap kali, dan kepala kolomnya sudah lama hilang
 * dari layar sebelum ia sampai di sana.
 *
 * Yang dikunci di sini tinggi kerangkanya ke tinggi layar, lalu satu-satunya
 * yang boleh menggulung adalah .fi-ta-content-ctn — wadah yang MEMANG SUDAH
 * overflow-y: auto pada bawaan Filament, hanya belum pernah punya batas tinggi
 * sehingga ia tumbuh sepanjang isinya. Jadi ini bukan menambah daerah gulung
 * baru, melainkan memberi batas pada yang sudah ada.
 *
 * Judul halaman, tombol "Buat berita", kotak cari, penyaring, kepala kolom, dan
 * penomoran halaman semuanya tinggal diam. Kepala kolom dibuat menempel sendiri
 * karena ia berada DI DALAM daerah gulungnya; tanpa position: sticky ia ikut
 * naik bersama barisnya dan orang kehilangan tahu kolom mana yang mana.
 *
 * TIGA PEMBATAS, dan ketiganya sengaja
 *
 * 1. Hanya .fi-resource-list-records-page. Halaman formulir — Buat dan Ubah —
 *    tidak boleh ikut: formulir yang panjang memang harus menggulung sebagai
 *    halaman, dan mengunci tingginya akan menyembunyikan tombol Simpan di
 *    dasar daerah yang tidak kelihatan bahwa ia bisa digulung.
 *
 * 2. Hanya di atas 64rem. Di bawah 40rem Filament MENUMPUK tabelnya menjadi
 *    kartu dan menyembunyikan seluruh thead — kepala menempel yang tidak
 *    tergambar, dan daerah gulung setinggi beberapa baris di layar telepon
 *    yang tingginya sudah dimakan bilah atas. Di layar sempit gulungan halaman
 *    memang yang benar, jadi di sana tidak ada satu pun aturan ini yang hidup.
 *
 * 3. :has(.fi-ta) pada wadah yang namanya umum. .fi-sc, .fi-grid-col, dan
 *    .fi-sc-component adalah wadah skema yang dipakai ulang di mana-mana pada
 *    halaman yang sama — termasuk oleh formulir penyaring di kepala tabelnya.
 *    Tanpa penyaring itu, formulir penyaring ikut diregangkan setinggi sisa
 *    layar dan medannya melar.
 *
 * RANTAINYA TIDAK BOLEH PUTUS
 *
 * Tinggi hanya menurun bila SETIAP tingkat meneruskannya. Satu tingkat yang
 * tertinggal display: block sudah cukup membuat seluruhnya kembali seperti
 * semula — dan itu persis yang terjadi saat ini disusun: rantainya tembus
 * sampai .fi-ta-main lalu berhenti, karena .fi-ta-main masih block sehingga
 * wadah gulungnya di dalamnya kembali setinggi isinya.
 *
 * min-height: 0 pada tiap tingkat sama wajibnya. Bawaannya min-height: auto,
 * dan itu melarang sebuah butir flex menyusut lebih pendek daripada isinya —
 * tepat kebalikan dari yang dibutuhkan di sini. Gagalnya tidak berbunyi: tidak
 * ada galat, halamannya terbuka, hanya menggulung seperti sebelumnya.
 *
 * Yang menjaga rantai ini tetap nyambung setelah Filament naik versi adalah
 * kelas_yang_disasar_ada_di_css_bawaan_filament: setiap nama di bawah dicocokkan
 * ke CSS bawaan Filament, dan nama yang hilang karena penataan ulang akan
 * menggagalkan uji alih-alih diam-diam mengembalikan gulungan halaman.
 */
@media (min-width: 64rem) {
    .fi-main-ctn:has(.fi-resource-list-records-page) {
        height: calc(100dvh - 4rem);
        min-height: 0;
    }

    .fi-main:has(.fi-resource-list-records-page),
    .fi-resource-list-records-page,
    .fi-resource-list-records-page .fi-page-header-main-ctn,
    .fi-resource-list-records-page .fi-page-main,
    .fi-resource-list-records-page .fi-page-content:has(.fi-ta),
    .fi-resource-list-records-page .fi-sc:has(.fi-ta),
    .fi-resource-list-records-page .fi-grid-col:has(.fi-ta),
    .fi-resource-list-records-page .fi-sc-component:has(.fi-ta),
    .fi-resource-list-records-page .fi-ta,
    .fi-resource-list-records-page .fi-ta-ctn,
    .fi-resource-list-records-page .fi-ta-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 0%;
    }

    /* Satu-satunya yang menggulung. Sudah overflow-y: auto sejak bawaannya. */
    .fi-resource-list-records-page .fi-ta-content-ctn {
        min-height: 0;
        flex: 1 1 0%;
    }

    /*
     * Kepala kolom menempel di puncak daerah gulungnya.
     *
     * Latarnya WAJIB pekat, dan itu sudah diurus aturan .fi-ta-header-cell di
     * bagian Tabel di atas. Kepala menempel yang tembus pandang memperlihatkan
     * baris yang lewat di belakang tulisannya — terbaca sebagai tulisan ganda,
     * bukan sebagai kepala kolom.
     */
    .fi-resource-list-records-page .fi-ta-header-cell {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* --- Bentuk tabel: satu data, satu baris ---------------------------------- */

/*
 * Satu baris setinggi satu baris, dan tidak pernah menggulung ke samping.
 *
 * Sebelum ini tinggi baris berkisar 57 sampai 249 piksel — daftar yang sama
 * bisa memuat sepuluh berita atau tiga, tergantung panjang judulnya. Mata
 * kehilangan pegangan untuk melompat antarbaris, dan tidak ada satu layar pun
 * yang bisa diperkirakan isinya.
 *
 * Yang lebih buruk: pembagian lebarnya terbalik. Kolom Judul yang justru
 * ditandai ->grow() hanya dapat 144px, sementara kolom OPD memakan 447px —
 * berisi "DINAS KESEHATAN" yang sama, berulang, di setiap baris. Sebabnya
 * table-layout: auto membagi lebar menurut apa yang TIDAK BISA menyusut:
 * judulnya ->wrap() jadi ia boleh dipersempit sampai berapa pun, sedangkan
 * nama dinas tidak boleh patah sehingga ia yang menang.
 *
 * table-layout: fixed yang membalikkannya, dan ia BUKAN sekadar pilihan rupa:
 * text-overflow: ellipsis pada tabel tanpa itu tidak melakukan apa pun. Kolom
 * dengan lebar otomatis akan tumbuh mengikuti isinya alih-alih memotongnya,
 * jadi titik-titiknya tidak pernah muncul dan tidak ada satu pun galat yang
 * memberi tahu. Uji bentuk_tabel_dikunci_supaya_pemotongan_teks_bekerja
 * menjaga keduanya tetap berpasangan.
 *
 * TIGA LEBAR, SEMUANYA DIUKUR BUKAN DIKIRA
 *
 *   kolom biasa       10rem    160px, dan tanggallah yang menentukannya:
 *                              "27 Agt 2026, 04:08" menuntut 152px berikut
 *                              padding-nya. Sisa 8px itu memang tipis, tetapi
 *                              disengaja — lihat catatan di bawah.
 *
 *   .fi-growable      auto     kolom yang ditandai ->grow() oleh penulis
 *                              tabelnya, MENYERAP SISANYA. Ini pegangan yang
 *                              berlaku untuk SETIAP tabel, bukan nama kolom
 *                              tertentu — .fi-ta-header-cell-updated-at hanya
 *                              ada di tabel yang kebetulan punya kolom itu.
 *
 *   aksi              6rem     96px. Bukan tombol "⋮" yang menentukannya —
 *                              ia hanya butuh 56px — melainkan tautan teks
 *                              "Ubah" di Profil OPD, 92px. Lihat di bawah.
 *
 * Semula justru dibalik: kolom judul yang diberi persen (32%), sisanya membagi
 * rata. Itu bekerja di daftar Berita yang berkolom LIMA, lalu gagal di daftar
 * Halaman yang berkolom ENAM — sisanya tinggal 129px per kolom dan tanggalnya
 * terpotong di enam dari sepuluh baris. Persen pada satu kolom tidak tahu ada
 * berapa kolom lain yang harus berbagi.
 *
 * Dibalik begini ia mengurus dirinya sendiri: yang dijamin adalah kolom yang
 * ISINYA BERUKURAN TETAP — tanggal, status, bentuk — dan judul menerima apa pun
 * yang tersisa. Terukur 388px di daftar berkolom lima, 246px di yang berkolom
 * enam, tanpa satu pun tanggal terpotong di keduanya. Judul memang isi yang
 * paling wajar dipenggal, karena hanya panjangnya yang tak terbatas.
 *
 * MENGAPA 10rem DAN BUKAN 9.5rem — cara mengukurnya yang menipu
 *
 * Padding 12px kiri-kanan duduk pada ELEMEN TEKSNYA sendiri, bukan pada selnya.
 * Akibatnya scrollWidth dan clientWidth sama-sama menghitung padding itu, dan
 * keduanya melaporkan angka yang sama persis meskipun tulisannya terpotong —
 * cara baku memeriksa pemotongan teks buta di sini.
 *
 * 9.5rem sempat lolos karena itu: 152px tersedia, 152px dibutuhkan, dan
 * pemeriksaannya menyebut "tidak terpotong". Di layar, huruf terakhir jamnya
 * hilang — "27 Agt 2026, 04:0" — dan tanggalnya menempel rapat ke kolom aksi.
 * Yang menemukannya pengukuran ulang memakai Range terhadap isi elemennya,
 * yang tidak ikut menghitung padding.
 *
 * KOLOM AKSI — mengapa lebarnya boleh sekecil ini
 *
 * Dulu aksinya berjajar sebagai tautan berlabel, dan lebar yang dibutuhkannya
 * bergantung pada BERAPA aksi yang muncul di baris itu serta SEPANJANG APA
 * labelnya — keduanya berubah menurut status beritanya dan peran yang
 * melihatnya. Terukur:
 *
 *   Ubah / Ajukan / Cabut                      242px
 *   Ubah / Setujui & terbitkan / Kembalikan    356px   ← saat meninjau
 *   ditambah Hapus                             431px   ← terburuk
 *
 * 431px adalah 41% lebar wadah, dipesan pada SETIAP baris meski hampir tidak
 * pernah terpakai. Tidak ada satu lebar tetap pun yang sekaligus ringkas dan
 * aman, dan gagalnya ganas — bukan sekadar terpotong. .fi-ta-actions memakai
 * justify-content: flex-end dengan anak yang tidak menyusut, sehingga begitu
 * ruangnya kurang tautannya meluber ke KIRI dan MENIMPA kolom tanggal:
 * "27 Agt 2026, 04:0" tertindih ikon Ubah, terjadi sungguhan ketika kolom ini
 * sempat disetel 200px.
 *
 * Yang menyelesaikannya bukan angka di berkas ini, melainkan aksinya sendiri
 * yang dipadatkan menjadi satu tombol "⋮" — ActionGroup, dipasang di
 * BeritaTable, HalamanTable, dan MenuOpdResource. Lebarnya TETAP berapa pun
 * jumlah dan panjang labelnya: terukur 56px untuk ketiganya.
 *
 * 6rem-nya justru ditentukan yang TIDAK dipadatkan. Profil OPD hanya punya satu
 * aksi, "Ubah", dan satu aksi di balik "⋮" cuma menambah klik tanpa menghemat
 * apa pun — jadi ia dibiarkan sebagai tautan teks, dan 92px yang dibutuhkannya
 * itulah yang menetapkan lebar bersama ini.
 *
 * flex-wrap: wrap di bawah TETAP DIPERTAHANKAN sebagai pengaman, bukan hiasan.
 * Ia yang menjamin bahwa aksi yang kelak melebihi 96px turun ke baris kedua di
 * dalam selnya sendiri — barisnya menebal, tetapi tidak ada yang tertimpa dan
 * tidak ada gulungan mendatar. Tanpa itu, satu label panjang yang ditambahkan
 * kelak akan mengulang persis kerusakan di atas.
 *
 * BATAS LAIN, dan ini tidak dijaga uji mana pun: cara ini mengandaikan jumlah
 * kolom yang wajar. Tabel dengan sepuluh kolom akan menjumlahkan lebar tetapnya
 * melebihi lebar wadah, dan gulungan mendatar kembali. Seluruh tabel panel ini
 * berkolom lima dan enam, dan keduanya sudah diukur.
 *
 * Batas 40rem sama dengan batas Filament sendiri: di bawah itu ia MENUMPUK
 * tabelnya menjadi kartu, satu medan per baris. Memaksa nowrap di sana
 * memotong isi kartu yang justru memang harus melipat.
 *
 * ->wrap() pada kolom judul sengaja DIBIARKAN di BeritaTable. Di atas 40rem
 * aturan di bawah mengalahkannya, dan di bawah 40rem — tempat aturan ini tidak
 * hidup — ia masih dibutuhkan supaya judul panjang melipat di dalam kartunya
 * alih-alih terpotong.
 */
@media (min-width: 40rem) {
    .fi-ta-table {
        table-layout: fixed;
        width: 100%;
    }

    .fi-ta-header-cell { width: 10rem; }
    .fi-ta-header-cell.fi-growable { width: auto; }
    .fi-ta-actions-header-cell { width: 6rem; }

    /* Pengaman, bukan hiasan — alasannya di catatan "KOLOM AKSI BELUM SELESAI". */
    .fi-ta-actions { flex-wrap: wrap; }

    /*
     * .fi-ta-text-description ikut, dan itu disengaja.
     *
     * Ia yang memuat alasan pengembalian — ditampilkan di barisnya, bukan di
     * balik klik, karena alasan yang harus dicari membuat berita yang sama
     * diajukan ulang tanpa diperbaiki (PRD Bagian 9). Jadi ia TIDAK dibuang,
     * hanya dijadikan satu baris juga: barisnya 81px alih-alih 101px, dan
     * alasannya tetap terbaca sampai selebar kolomnya.
     */
    .fi-ta-cell .fi-ta-text-item,
    .fi-ta-cell .fi-ta-text-description {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- Batang gulung yang menyembunyikan diri ------------------------------- */

/*
 * Terlihat saat tetikus ada di atas tabelnya, lenyap saat tidak.
 *
 * Lebarnya TETAP dipesan 10px baik terlihat maupun tidak — yang berubah hanya
 * warnanya. Batang yang muncul dengan memakan tempat akan menggeser seluruh
 * kolom satu sentakan setiap kali tetikus masuk dan keluar.
 *
 * :focus-within ikut, dan itu bukan pelengkap. Yang menggulung tabel dengan
 * papan ketik tidak pernah menyentuhnya dengan tetikus; tanpa baris itu ia
 * menggulung tanpa satu pun petunjuk seberapa jauh ia sudah berjalan.
 *
 * Properti bakunya yang dipakai, bukan ::-webkit-scrollbar. Sejak Chrome 121
 * keduanya tidak dapat dipakai bersama: begitu scrollbar-color disebut,
 * seluruh aturan ::-webkit-scrollbar diabaikan. Peramban yang lebih tua tidak
 * mengenal keduanya dan menampilkan batang gulung biasa — tidak tersembunyi,
 * tetapi juga tidak rusak.
 */
.fi-ta-content-ctn {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.fi-ta-content-ctn:hover,
.fi-ta-content-ctn:focus-within {
    scrollbar-color: color-mix(in srgb, var(--gray-950) 28%, transparent) transparent;
}
.dark .fi-ta-content-ctn:hover,
.dark .fi-ta-content-ctn:focus-within {
    scrollbar-color: color-mix(in srgb, var(--gray-50) 30%, transparent) transparent;
}

/* --- Tombol dan lencana --------------------------------------------------- */

.fi-btn {
    border-radius: 0.65rem;
    font-weight: 600;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
/* Bayangan tombol utama ikut warna mereknya, bukan hitam — supaya tombolnya
   terbaca menyala, bukan sekadar terangkat. */
.fi-btn.fi-color-primary {
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--primary-600) 75%, transparent);
}
.fi-btn.fi-color-primary:hover {
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--primary-600) 85%, transparent);
}
/* Naik satu piksel saja. Perpindahan lebih besar menggeser sasaran tekan dari
   bawah kursor tepat saat orang hendak menekannya. */
.fi-btn:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(0); }

/*
 * Lencana diberi cincin sewarna tulisannya sendiri.
 *
 * currentColor yang membuatnya berlaku untuk SETIAP warna status tanpa satu pun
 * aturan tersendiri: hijau "Terbit", kuning "Diajukan", merah "Dikembalikan" —
 * masing-masing mendapat cincin senada dengan sendirinya. Menulis satu aturan
 * per warna berarti status baru yang ditambahkan kelak akan tampil tanpa cincin,
 * dan tidak ada yang memberi tahu.
 */
.fi-badge {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
}

/* --- Medan isian ---------------------------------------------------------- */

.fi-input-wrp {
    border-radius: 0.65rem;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.fi-input-wrp:hover {
    border-color: color-mix(in srgb, var(--primary-400) 55%, transparent);
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 20%, transparent);
}

/* --- Judul halaman -------------------------------------------------------- */

.fi-header-heading {
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* --- Keadaan kosong ------------------------------------------------------- */

/* Ikonnya diberi keping bulat berwarna merek. Ikon abu-abu di tengah halaman
   putih terbaca sebagai kegagalan; keping berwarna membuatnya terbaca sebagai
   tempat yang memang belum diisi. */
.fi-ta-empty-state-icon-bg {
    background: color-mix(in srgb, var(--primary-500) 10%, transparent);
}
.fi-ta-empty-state-icon-bg .fi-icon { color: var(--primary-500); }

/* --- Modal ---------------------------------------------------------------- */

/*
 * Modal ubah dibuat sebagai KARTU yang mengambang, bukan kotak putih polos.
 *
 * Bayangannya jauh lebih dalam daripada bayangan kartu biasa, dan itu memang
 * tugasnya: modal harus terbaca melayang di atas seluruh halaman, sementara
 * kartu hanya terangkat sedikit dari kerangkanya.
 *
 * Kepala dan kaki modal ini position: sticky — lihat App\Filament\UbahLewatModal.
 * Latar keduanya WAJIB pekat dengan alasan yang sama seperti kepala kolom
 * tabel: isi formulir lewat di belakangnya saat digulung. Karena itu sapuan
 * warna pada kepalanya ditulis sebagai background-IMAGE di atas latar putih
 * bawaan Filament, bukan sebagai background yang menggantikannya — dan kakinya
 * dicampur dari dua warna yang sama-sama pekat.
 */
.fi-modal-window {
    border-radius: 1.1rem;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-200) 45%, transparent),
        0 36px 80px -32px color-mix(in srgb, var(--primary-950) 55%, transparent);
}
.dark .fi-modal-window {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-900) 45%, transparent),
        0 36px 80px -32px rgb(0 0 0 / 70%);
}

.fi-modal-header {
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-500) 10%, transparent), transparent);
}
.fi-modal-heading {
    letter-spacing: -0.015em;
    font-weight: 700;
}

.fi-modal-footer {
    background: color-mix(in srgb, var(--primary-50) 50%, var(--gray-50));
}
.dark .fi-modal-footer {
    background: color-mix(in srgb, var(--primary-950) 35%, var(--gray-900));
}

/* --- Panel jatuh ---------------------------------------------------------- */

/* Menu "⋮" pada tiap baris dan menu akun di bilah atas. Sudut dan bayangannya
   disamakan dengan kartu supaya panel ini terbaca sebagai bagian sistem yang
   sama, bukan kotak bawaan yang kebetulan menempel. */
.fi-dropdown-panel {
    border-radius: 0.85rem;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-200) 50%, transparent),
        0 22px 48px -22px color-mix(in srgb, var(--primary-950) 45%, transparent);
}
.dark .fi-dropdown-panel {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-900) 50%, transparent),
        0 22px 48px -22px rgb(0 0 0 / 65%);
}

/* --- Judul halaman dan remah roti ----------------------------------------- */

.fi-breadcrumbs {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.fi-breadcrumbs-item { opacity: 0.85; }

/* Judul bagian mewarisi warna merek. Sebelumnya hanya garis di kirinya yang
   berwarna sementara tulisannya abu-abu tua — garis berwarna dengan tulisan
   netral terbaca sebagai hiasan, bukan sebagai judul. */
.fi-section-header-heading { color: var(--primary-900); }
.dark .fi-section-header-heading { color: var(--primary-100); }

/* --- Gerak dikurangi ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-btn,
    .fi-btn,
    .fi-section,
    .fi-ta-row,
    .fi-input-wrp {
        transition: none;
    }
    .fi-sidebar-item-btn:hover,
    .fi-btn:hover { transform: none; }
}