/*
 * Rupa Nitor v0.1 — palet C (docs/desain/tema-visual.md bagian 8; register 324).
 *
 * Berkas CSS BIASA, tanpa Tailwind dan tanpa build: didaftarkan panel lewat ->assets(), disalin ke
 * public/css/app/ oleh `php artisan filament:assets` (bagian dari `filament:upgrade`, yang dijalankan
 * `composer install`). Server tetap tanpa Node (panduan pasang server, T5).
 *
 * Aturannya:
 * - Hanya kelas kait `fi-*` Filament. PaletNitorTest merah bila salah satunya hilang dari CSS Filament
 *   yang terpasang — tanpa tes itu, pembaruan Filament mematikan gaya ini tanpa galat.
 * - Tidak ada nilai warna mentah: hanya variabel yang dicetak Filament dari PaletNitor (--primary-*, --gray-*).
 * - Tidak ada kelas Tailwind sembarang: tema Filament tidak memuatnya.
 */

/* Menu aktif: latar ungu muda, ikon ungu logo, garis ungu di tepi kiri. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-100);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 0;
    width: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background-color: var(--primary-600);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--primary-950);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--primary-600);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-400) 16%, transparent);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    background-color: var(--primary-400);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--primary-200);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--primary-400);
}

/* Nito lewat NitoIlustrasi::tampilan (Ringkasan). */
.nitor-nito {
    display: block;
}

/*
 * Nito di layar kosong tabel (NitoIlustrasi::alamat): Filament sendiri merender <img class="fi-icon fi-size-lg">
 * di dalam lingkaran abu 24 px. Untuk gambar Nito — dikenali dari alamatnya — lingkaran dilepas dan ukurannya
 * 120 px. Layar kosong lain tetap memakai ikon bawaan.
 */
.fi-ta-empty-state-icon-bg:has(> img.fi-icon[src*="/images/nito/"]) {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.fi-ta-empty-state-icon-bg > img.fi-icon[src*="/images/nito/"] {
    width: 120px;
    height: 120px;
    margin: 0;
}

/*
 * SHA-256 di tabel Lampiran (kelas nitor-hash dari LebarKolom::sidik): 64 karakter tetap TEKS UTUH di sel; yang
 * dipendekkan hanya tampilannya, dengan elipsis. Seleksi (klik tiga kali) + Ctrl+C menyalin hash utuh, dan
 * tooltip menampilkannya utuh — tanpa papan klip JavaScript, yang dimatikan register 172.
 *
 * T-UB-34: extraAttributes kolom satu-nilai jatuh di elemen YANG SAMA dengan fi-ta-text-item (TextColumn Filament 5,
 * jalur tanpa deskripsi), jadi selektornya majemuk, bukan keturunan — `.nitor-hash .fi-ta-text-item` tidak pernah cocok.
 * SelektorRupaCocokTest mencocokkan selektor ini dengan HTML layar Lampiran yang dirender.
 */
.nitor-hash.fi-ta-text-item {
    display: block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * T-UB-33 — kata panjang tanpa spasi di teks bebas (uraian, nama, keterangan, alasan; mis. nomor rekening, alamat web,
 * atau ketikan "aasdasd…") tidak boleh melebarkan wadahnya. Kegagalannya senyap: data benar, tetapi tombol (Jawab) dan
 * isi kartu lain terdorong ke luar bingkai.
 *
 * (1) Tata letak kartu (Stack/Split — Pekerjaan): SEMUA teks kolom boleh dipecah di mana saja. Kolomnya butir flex;
 *     tanpa ini lebar minimumnya = kata terpanjang, dan karena semua kartu berbagi satu wadah, satu kata melebarkan
 *     semuanya. Di kartu tidak ada teks yang tidak terbungkus (nowrap hanya milik tbody tabel biasa). Lantai 5rem: kolom
 *     yang tumbuh (flex: 1) hanya mendapat sisa sesudah kolom tak-tumbuh (tanggal, "Diposting …"); tanpa lantai, anywhere
 *     membiarkannya menyusut sampai beberapa piksel di bingkai sempit — satu huruf per baris. 5rem kira-kira lebar kata
 *     terpanjang yang dulu menjadi lantainya.
 */
.fi-ta-record-content .fi-ta-text {
    overflow-wrap: anywhere;
    min-width: 5rem;
}

/*
 * (2) Tabel biasa: kolom terbungkus (->wrap(), termasuk LebarKolom::teks) dipecah hanya bila SATU kata lebih lebar
 *     dari kolomnya, dan sumbangan lebar minimum kolom ke tabel dibatasi 30rem — kata panjang berhenti di 30rem, kata
 *     wajar tidak pernah dipotong di tengah walau tabel sempit (anywhere akan memotongnya: lebar minimumnya turun ke
 *     lebar satu huruf). Kolom tak terbungkus (nomor, tanggal, uang, lencana) sengaja tidak disentuh.
 */
.fi-ta-cell .fi-ta-text.fi-wrapped {
    overflow-wrap: break-word;
    max-width: 30rem;
}

/*
 * (3) Kartu riwayat Pekerjaan (Section bertanda data-nitor-kartu="riwayat"): tautan jurnal dan "Alasan: …" teks bebas di
 *     dalam Flex. fi-sc-text Filament menyatakan overflow-wrap sendiri (break-word, tidak menurunkan lebar minimum), jadi
 *     ia disebut tersurat — warisan dari kartu saja tidak sampai kepadanya.
 *
 *     Lantai (tinjauan Fable T-1): kelima butir Flex semuanya fi-growable (flex: 1, dasar 0) dan dibagi rata; dengan anywhere saja, bingkai sempit
 *     memerasnya sampai beberapa piksel. Lantai 6rem + flex-wrap: butir yang tidak muat turun ke baris berikutnya — tidak pernah menyusut di bawah
 *     6rem dan tidak pernah meluber ke luar kartu (Section tidak bergulir; luberan = isi tersembunyi). Di bingkai nyata 768 px (±686 px untuk Flex) dan
 *     1024 px dengan bilah sisi (±606 px) lantai belum bekerja: butir 118 dan 102 px (peraga tub33).
 */
[data-nitor-kartu="riwayat"],
[data-nitor-kartu="riwayat"] .fi-sc-text {
    overflow-wrap: anywhere;
}

[data-nitor-kartu="riwayat"] .fi-sc-flex {
    flex-wrap: wrap;
}

[data-nitor-kartu="riwayat"] .fi-sc-flex > .fi-growable {
    min-width: 6rem;
}

/*
 * Kolom uang dan angka bertabel (prasetel App\Filament\Kerangka\LebarKolom::angka/uang — T-UB-18b, rancangan R1 KT-R1-3): angka tabular dan tidak
 * pernah patah baris. Lebar kolom diatur di sel kepala oleh prasetelnya, bukan di sini.
 */
.nitor-angka {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Rupa rincian dokumen (register 367; arsip-sesi/rupa-rincian-dokumen) — kelas dari App\Filament\Kerangka\RincianDokumen. Angka bertabel dan rata
 * kanan; warna hanya untuk titik status dan peringatan; pita bertumpuk di layar sempit.
 */
.nitor-rincian-judul {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
}

.nitor-rincian-nomor {
    font-variant-numeric: tabular-nums;
}

.nitor-rincian-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    color: var(--gray-700);
    background-color: var(--gray-100);
}

.nitor-rincian-status > i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--gray-500);
}

.nitor-rincian-status--tunggu { color: var(--warning-700); background-color: var(--warning-50); }
.nitor-rincian-status--tunggu > i { background-color: var(--warning-500); }
.nitor-rincian-status--baik { color: var(--success-700); background-color: var(--success-50); }
.nitor-rincian-status--baik > i { background-color: var(--success-500); }
.nitor-rincian-status--batal { color: var(--danger-700); background-color: var(--danger-50); }
.nitor-rincian-status--batal > i { background-color: var(--danger-500); }

.dark .nitor-rincian-status { color: var(--gray-200); background-color: color-mix(in oklab, var(--gray-400) 16%, transparent); }
.dark .nitor-rincian-status--tunggu { color: var(--warning-300); background-color: color-mix(in oklab, var(--warning-400) 16%, transparent); }
.dark .nitor-rincian-status--baik { color: var(--success-300); background-color: color-mix(in oklab, var(--success-400) 16%, transparent); }
.dark .nitor-rincian-status--batal { color: var(--danger-300); background-color: color-mix(in oklab, var(--danger-400) 16%, transparent); }

.nitor-rincian-angka {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nitor-rincian-angka > b {
    font-size: 1.875rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

.dark .nitor-rincian-angka > b { color: var(--gray-50); }

.nitor-rincian-angka > span,
.nitor-rincian-penjelas,
.nitor-rincian-pita small {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.dark .nitor-rincian-angka > span,
.dark .nitor-rincian-penjelas,
.dark .nitor-rincian-pita small { color: var(--gray-300); }

.nitor-rincian-penjelas {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.nitor-rincian-penjelas > div {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    min-width: 0;
}

.nitor-rincian-label {
    flex: none;
    width: 2.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.nitor-rincian-penjelas > .nitor-rincian-peringatan { color: var(--warning-700); }
.dark .nitor-rincian-penjelas > .nitor-rincian-peringatan { color: var(--warning-300); }

.nitor-rincian-pita {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: var(--gray-50);
}

.dark .nitor-rincian-pita { border-color: var(--gray-700); background-color: color-mix(in oklab, var(--gray-800) 50%, transparent); }

.nitor-rincian-pita > div {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding: 0.75rem 1.125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.nitor-rincian-pita > div + div { border-inline-start: 1px solid var(--gray-200); }
.dark .nitor-rincian-pita > div + div { border-color: var(--gray-700); }

.nitor-rincian-pita span { font-size: 0.75rem; color: var(--gray-500); }
.nitor-rincian-pita b { font-weight: 600; }

@media (max-width: 640px) {
    .nitor-rincian-pita { grid-template-columns: minmax(0, 1fr); }
    .nitor-rincian-pita > div + div { border-inline-start: 0; border-block-start: 1px solid var(--gray-200); }
}

.nitor-rincian-jumlah {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-600);
}

.nitor-rincian-jumlah > div {
    display: grid;
    grid-template-columns: auto 11rem;
    gap: 1.5rem;
    text-align: end;
}

.nitor-rincian-jumlah > .nitor-rincian-total {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
    font-weight: 650;
    font-size: 0.9375rem;
    color: var(--gray-950);
}

.dark .nitor-rincian-jumlah { color: var(--gray-300); }
.dark .nitor-rincian-jumlah > .nitor-rincian-total { border-color: var(--gray-700); color: var(--gray-50); }

.nitor-rincian-jejak {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.125rem;
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* Tinjauan Fable rupa rincian T1: teks redup mode gelap memakai tingkat 400 (PaletNitor: dipatok >= 4,5:1 di mode gelap), bukan 500. */
.dark .nitor-rincian-label,
.dark .nitor-rincian-pita span,
.dark .nitor-rincian-jejak {
    color: var(--gray-400);
}

/* Rupa Nito N-2a: Nito berhasil di ikon pemberitahuan momen besar (KabarBerhasil) — ikon bawaan 24 px terlalu kecil untuk gambar. */
.fi-no-notification img.fi-icon[src*="/images/nito/"] {
    width: 48px;
    height: 48px;
}

/* Rupa Nito N-3: sapaan Nito di layar masuk (SapaMasuk) — di DALAM kartu, di atas kalimat, di semua lebar layar. Keputusan pemilik proyek
 * 18 Okt 2026 malam (register 475): aturan "panel samping kiri" untuk layar ≥ 1024 px dihapus. Aturan itu membuat Nito 0 × 0 px tanpa galat
 * (kotak absolut menyusut ke ruang tersisa yang negatif, ditambah max-width: 100% bawaan Filament pada <img>) — jangan dihidupkan lagi tanpa
 * uji browser di lebar ≥ 1024 px. */
.nitor-sapa-masuk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.nitor-sapa-masuk-kalimat {
    margin: 0;
    color: var(--gray-600);
}

.dark .nitor-sapa-masuk-kalimat {
    color: var(--gray-400);
}

/*
 * Potongan 18a (T-UB-18, mockup rupa penyunting dan tabel disetujui 14 Okt 2026): kolom kedua baris alokasi Bukti Bayar untuk jenis tanpa dokumen dan
 * tanpa akun — kotak bergaris putus setinggi isian di sampingnya, berisi "—". Ia yang menahan Jumlah dan Keterangan di letaknya untuk setiap jenis.
 */
.nitor-kolom-kosong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.5rem;
    color: var(--gray-500);
}

.dark .nitor-kolom-kosong {
    border-color: var(--gray-600);
    color: var(--gray-400);
}

/*
 * T-UB-23 sub-potongan 23-A — TAUTAN BERGARIS (uji browser 14 Okt 2026; keputusan pemilik proyek 17 Okt 2026 Q2 dan Q7). Semua tautan di ISI halaman
 * bergaris bawah selalu, bukan hanya saat disorot tetikus: tanpa garis, tautan tidak dapat dibedakan dari teks (CSS Filament hanya menggaris saat
 * hover, dan preflight Tailwind melepas garis bawaan peramban dari setiap <a>). Empat kait, satu blok — tidak ada gaya sebaris per layar:
 * (1) Kolom tabel yang ber-url SENDIRI: Filament membungkus selnya dengan <a class="fi-ta-col fi-ta-col-has-column-url">. Garisnya di elemen teks,
 *     tempat Filament sendiri menaruh garis saat disorot. Baris yang SELURUHNYA dapat diklik (recordUrl) dibungkus <a class="fi-ta-col"> TANPA kelas
 *     itu dan sengaja tidak bergaris: Q2 — hanya kolom Nomor, yang untuk itu diberi ->url() yang sama dengan barisnya (sub-potongan 23-B dst.).
 * (2) Entri rincian yang ber-url (TextEntry->url): <a class="fi-in-entry-content">, garis di elemen teksnya.
 * (3) Aksi bergaya tautan (->link()): .fi-link. Yang dinonaktifkan tidak bergaris, kecuali fi-force-enabled — cermin aturan sorot Filament.
 * (4) Tautan buatan Nitor di HTML rakitan (Text/Html berisi HtmlString): a.nitor-tautan, dari App\Filament\BukuBesar\TautanDokumen.
 * Menu samping, tombol, tab, halaman tabel, dan remah tanpa tautan tidak memakai kait mana pun — tidak bergaris (Q7). (5) Remah BERTAUTAN — induk
 * halaman di luar menu (HalamanInduk, komentar pemilik proyek 30 Okt 2026): .fi-breadcrumbs ol li a, bergaris karena dapat diklik. TautanBergarisTest mencocokkan blok ini dengan
 * HTML yang dirender. Fokus papan ketik: cincin ungu di keempat <a> (.fi-link sudah bercincin dari Filament).
 * Lencana (fi-badge) di kolom atau entri ber-url ikut bergaris (tinjauan Fable 23-A, Q-23A-3): lencana kotak atomik (inline-flex), garis dari elemen
 * teks di atasnya tidak sampai ke tulisannya — jadi ia disebut tersurat.
 */
a.fi-ta-col-has-column-url .fi-ta-text-item,
a.fi-ta-col-has-column-url .fi-badge,
a.fi-in-entry-content .fi-in-text-item,
a.fi-in-entry-content .fi-badge,
.fi-link,
a.nitor-tautan,
.fi-breadcrumbs ol li a {
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

.fi-link.fi-disabled,
.fi-link[disabled] {
    text-decoration-line: none;
}

.fi-link.fi-force-enabled {
    text-decoration-line: underline;
}

a.fi-ta-col-has-column-url:focus-visible,
a.fi-in-entry-content:focus-visible,
a.nitor-tautan:focus-visible,
.fi-breadcrumbs ol li a:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.dark a.fi-ta-col-has-column-url:focus-visible,
.dark a.fi-in-entry-content:focus-visible,
.dark a.nitor-tautan:focus-visible,
.dark .fi-breadcrumbs ol li a:focus-visible {
    outline-color: var(--primary-400);
}

/*
 * Ringkasan perusahaan (dashboard model #3, 24 Okt 2026) — TampilanRingkasan. Hanya variabel warna Filament (palet Nitor; mode gelap ikut), tanpa Tailwind.
 */
.nitor-rk-pita { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem; }
/* UB-DB-1 (uji browser 24 Okt 2026): di lebar ponsel 12 kotak terlalu sempit — label terpotong; dua baris berisi enam. */
@media (max-width: 640px) {
    .nitor-rk-pita { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.nitor-rk-bulan { border-radius: 0.375rem; padding: 0.375rem 0; text-align: center; font-size: 0.75rem; line-height: 1rem; border: 1px solid transparent; }
.nitor-rk-bulan--terkunci { background-color: var(--primary-700); color: var(--primary-50); }
.nitor-rk-bulan--tertutup { background-color: var(--primary-200); color: var(--primary-900); }
.nitor-rk-bulan--berjalan { border-color: var(--primary-500); color: var(--primary-700); font-weight: 600; }
.nitor-rk-bulan--nanti { border-color: var(--gray-200); color: var(--gray-400); }
.dark .nitor-rk-bulan--tertutup { background-color: color-mix(in oklab, var(--primary-400) 30%, transparent); color: var(--primary-100); }
.dark .nitor-rk-bulan--berjalan { color: var(--primary-300); }
.dark .nitor-rk-bulan--nanti { border-color: var(--gray-700); color: var(--gray-500); }
.nitor-rk-keterangan { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--gray-600); }
.dark .nitor-rk-keterangan { color: var(--gray-400); }
.nitor-rk-peringatan { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--warning-700); }
.dark .nitor-rk-peringatan { color: var(--warning-400); }
.nitor-rk-label { font-size: 0.8125rem; color: var(--gray-600); }
.dark .nitor-rk-label { color: var(--gray-400); }
.nitor-rk-utama { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-950); }
.dark .nitor-rk-utama { color: var(--gray-50); }
.nitor-rk-kartu-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.nitor-rk-kartu { border: 1px solid var(--gray-200); border-radius: 0.75rem; padding: 0.875rem 1rem; }
.dark .nitor-rk-kartu { border-color: var(--gray-700); }
.nitor-rk-angka { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
/* UB-DB-2: kotak, bukan teks sebaris — angka yang terlipat ("Rp" / angka) tetap dapat diklik di celah antarbarisnya. Bukan nowrap: angka miliaran akan
   meluber keluar kartu selebar 11rem. */
.nitor-rk-angka a, .nitor-rk-utama a { display: inline-block; color: inherit; text-decoration: none; }
.nitor-rk-angka a:hover, .nitor-rk-utama a:hover { text-decoration: underline; }
.nitor-rk-grafik { display: flex; align-items: flex-end; gap: 0.5rem; height: 8rem; margin-top: 1.25rem; }
.nitor-rk-kolom { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.nitor-rk-batang { flex: 1; border-radius: 0.25rem 0.25rem 0 0; min-height: 1px; }
.nitor-rk-batang--pendapatan { background-color: var(--primary-500); }
.nitor-rk-batang--beban { background-color: var(--gray-400); } /* UB-DB-4: gray-300 nyaris tak terlihat di mode terang */
.dark .nitor-rk-batang--beban { background-color: var(--gray-600); }
.nitor-rk-sumbu { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.nitor-rk-sumbu > span { flex: 1; text-align: center; font-size: 0.75rem; color: var(--gray-500); }
.nitor-rk-legenda { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--gray-600); }
.nitor-rk-legenda i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.125rem; margin-right: 0.25rem; vertical-align: -1px; }
.nitor-rk-daftar { list-style: none; margin: 0; padding: 0; }
.nitor-rk-daftar > li { padding: 0.5rem 0; border-top: 1px solid var(--gray-100); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; justify-content: space-between; }
.nitor-rk-daftar > li:first-child { border-top: 0; }
.dark .nitor-rk-daftar > li { border-color: var(--gray-800); }
/* UB-DB-3: nomor jurnal tidak terpotong di tanda hubung. Nomor Set-up panjang ("SU-2601-0001 · September 2026") lalu tidak dapat menyusut — maka teks kiri
   berdasar 0 dan baris boleh turun (flex-wrap di atas): angka yang tidak muat pindah ke bawah, rata kanan, bukan meluber keluar kartu (diukur di 375px). */
/* Tinjauan Fable 1: uraian tanpa spasi (diukur: teks kiri sampai 841px di layar 375px) dilipat di mana saja; nomor tetap utuh (nowrap di bawah). Sengaja
   tanpa min-width 0 — teks kiri tidak boleh menyusut di bawah lebar nomor, supaya angka turun alih-alih tertimpa. */
.nitor-rk-daftar > li > span { flex: 1 1 0; overflow-wrap: anywhere; }
.nitor-rk-daftar a { white-space: nowrap; }
/* Bagian kanan (angka jurnal, butir Pajak): tidak tumbuh; menyusut dan terlipat hanya bila sendirian pun tidak muat — tinjauan Fable 3, diukur di 1024px:
   kolom Pajak 192px, "menunggu SPT Masa PPN" yang nowrap meluber walau sudah turun baris. */
.nitor-rk-daftar .nitor-rk-kanan { flex: 0 1 auto; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.nitor-rk-tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Potongan Beranda B-1 (register 570; "rupa persis, isi jujur", keputusan pemilik proyek 4 Nov 2026). Gambar banner dua mode di
   public/images/beranda/ — dirujuk relatif dari salinan terbit (public/css/app/), jadi asal yang sama: cocok dengan CSP img-src self.
   Gambar mengikuti MODE TAMPILAN; salam dan ikon matahari/bulan mengikuti JAM WIB (SapaanWaktu). Hanya variabel warna Filament. */
/* UKURAN GAMBAR TETAP, DIPATOK KE SUDUT KANAN BAWAH: gambar (2000 × 667, meja di y ±495) setinggi 28,875rem, menjorok 6,8rem di bawah tepi
   banner — meja selalu ±0,6rem di atas tepi bawah, cangkir ±21–25,6rem dari kanan, berapa pun tinggi banner. Nito berdiri di meja, di KIRI
   cangkir (right 26,5rem). Tinggi banner boleh tumbuh mengikuti teks (min-height) tanpa menggeser benda: ukuran yang mengikuti tinggi banner
   membuat Nito menutupi cangkir (pratinjau pertama), dan tinggi yang dikunci memotong tips panjang tanpa galat (tinjauan Fable B-1 temuan 2). */
.nitor-br-banner { position: relative; display: flex; align-items: center; min-height: 13rem; border-radius: 1rem; overflow: hidden;
  padding: 1.5rem 2rem; background-color: var(--primary-50); background-image: url("../../images/beranda/banner-terang.webp");
  background-repeat: no-repeat; background-size: auto 28.875rem; background-position: right bottom -6.8rem; }
.dark .nitor-br-banner { background-color: var(--gray-950); background-image: url("../../images/beranda/banner-gelap.webp"); }
.nitor-br-banner-teks { position: relative; z-index: 1; max-width: calc(100% - 35rem); }
.nitor-br-sapa { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--primary-950); }
.dark .nitor-br-sapa { color: var(--gray-50); }
.nitor-br-sapa-ikon > .fi-icon { width: 2rem; height: 2rem; }
.nitor-br-sapa-ikon--matahari { color: var(--warning-500); }
.nitor-br-sapa-ikon--bulan { color: var(--warning-300); }
.nitor-br-subjudul { margin: 0.25rem 0 1rem 2.625rem; font-size: 0.9375rem; color: var(--gray-700); }
.dark .nitor-br-subjudul { color: var(--gray-300); }
.nitor-br-tips { display: inline-flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.5rem 1rem; border-radius: 1rem; font-size: 0.875rem;
  color: var(--primary-800); background-color: color-mix(in oklab, var(--color-white) 72%, transparent); }
.dark .nitor-br-tips { color: var(--primary-200); background-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.nitor-br-tips b { font-weight: 600; }
.nitor-br-tips-ikon > .fi-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: var(--primary-600); }
.dark .nitor-br-tips-ikon > .fi-icon { color: var(--primary-300); }
.nitor-br-banner-nito { position: absolute; right: 26.5rem; bottom: 0.5rem; }
.nitor-br-banner-nito > .nitor-nito { width: 9rem; height: 9rem; }
/* Di bawah 1440px (laptop berbilah sisi 20rem, tablet, ponsel) teks bersebelahan tinggal ≤ 27rem dan tips terlipat 4–5 baris — tata letak
   BERTUMPUK: teks di atas, pemandangan di bawahnya. Gambar setinggi 15,5rem, meja ±0,5rem di atas tepi bawah; cangkir ±11–13,6rem dari kanan,
   Nito di kirinya (right 14rem). */
@media (max-width: 1439px) {
  .nitor-br-banner { height: auto; flex-direction: column; align-items: stretch; padding: 1.25rem 1.25rem 7rem;
    background-size: auto 15.5rem; background-position: right bottom -3.5rem; }
  .nitor-br-banner-teks { max-width: none; }
  .nitor-br-sapa { font-size: 1.25rem; line-height: 1.75rem; }
  .nitor-br-subjudul { margin-left: 0; }
  .nitor-br-banner-nito { right: 14rem; bottom: 0.5rem; }
  .nitor-br-banner-nito > .nitor-nito { width: 6rem; height: 6rem; }
}
/* Ponsel sempit (≤ 400px, banner ≤ 22rem): right 14rem + 6rem melewati tepi kiri dan Nito terpotong (tinjauan Fable B-1 temuan 3) — Nito lebih
   kecil di tepi kiri, cangkir tetap di kanannya. */
@media (max-width: 400px) {
  .nitor-br-banner-nito { right: auto; left: 0.25rem; }
  .nitor-br-banner-nito > .nitor-nito { width: 4rem; height: 4rem; }
}
.nitor-br-angka-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.nitor-br-angka { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--gray-200); background-color: var(--color-white); }
.dark .nitor-br-angka { border-color: var(--gray-800); background-color: var(--gray-900); }
.nitor-br-angka-ikon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; flex-shrink: 0; }
.nitor-br-angka-ikon > .fi-icon { width: 1.5rem; height: 1.5rem; }
.nitor-br-angka--ungu .nitor-br-angka-ikon { color: var(--primary-600); background-color: var(--primary-50); }
.nitor-br-angka--kuning .nitor-br-angka-ikon { color: var(--warning-600); background-color: var(--warning-50); }
.nitor-br-angka--merah .nitor-br-angka-ikon { color: var(--danger-600); background-color: var(--danger-50); }
.dark .nitor-br-angka--ungu .nitor-br-angka-ikon { color: var(--primary-300); background-color: color-mix(in oklab, var(--primary-400) 16%, transparent); }
.dark .nitor-br-angka--kuning .nitor-br-angka-ikon { color: var(--warning-300); background-color: color-mix(in oklab, var(--warning-400) 16%, transparent); }
.dark .nitor-br-angka--merah .nitor-br-angka-ikon { color: var(--danger-300); background-color: color-mix(in oklab, var(--danger-400) 16%, transparent); }
.nitor-br-angka-nilai { display: block; font-size: 1.75rem; line-height: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gray-950); }
.dark .nitor-br-angka-nilai { color: var(--gray-50); }
.nitor-br-angka-judul { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--gray-800); }
.dark .nitor-br-angka-judul { color: var(--gray-200); }
.nitor-br-angka-ket { display: block; font-size: 0.8125rem; color: var(--gray-500); }
.dark .nitor-br-angka-ket { color: var(--gray-400); }
.nitor-br-fokus { list-style: none; margin: 0; padding: 0; }
.nitor-br-fokus > li + li { border-top: 1px solid var(--gray-100); }
.dark .nitor-br-fokus > li + li { border-color: var(--gray-800); }
.nitor-br-fokus-butir { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.25rem; }
.nitor-br-fokus-ikon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; flex-shrink: 0;
  color: var(--primary-600); background-color: var(--primary-50); }
.dark .nitor-br-fokus-ikon { color: var(--primary-300); background-color: color-mix(in oklab, var(--primary-400) 16%, transparent); }
.nitor-br-fokus-ikon > .fi-icon { width: 1.125rem; height: 1.125rem; }
.nitor-br-fokus-isi { flex: 1; min-width: 0; }
.nitor-br-fokus-kalimat { display: block; font-size: 0.875rem; font-weight: 600; color: var(--gray-900); overflow-wrap: anywhere; }
.dark .nitor-br-fokus-kalimat { color: var(--gray-100); }
.nitor-br-fokus-perusahaan { display: block; font-size: 0.8125rem; color: var(--gray-500); }
.dark .nitor-br-fokus-perusahaan { color: var(--gray-400); }
.nitor-br-kosong { margin: 0; font-size: 0.875rem; color: var(--gray-600); }
.dark .nitor-br-kosong { color: var(--gray-400); }
/* Kartu perusahaan = Section Filament (tepi dan latarnya milik Filament); di sini hanya isi. Tombol Buka = aksi Filament. */
.nitor-br-kartu { display: flex; flex-direction: column; gap: 0.875rem; }
.nitor-br-kartu-kepala { display: flex; align-items: flex-start; gap: 0.75rem; }
.nitor-br-kartu-ikon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.625rem; flex-shrink: 0;
  color: var(--primary-600); background-color: var(--primary-50); }
.dark .nitor-br-kartu-ikon { color: var(--primary-300); background-color: color-mix(in oklab, var(--primary-400) 16%, transparent); }
.nitor-br-kartu-ikon > .fi-icon { width: 1.5rem; height: 1.5rem; }
.nitor-br-kartu-nama { flex: 1; min-width: 0; }
.nitor-br-kartu-nama h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); overflow-wrap: anywhere; }
.dark .nitor-br-kartu-nama h3 { color: var(--gray-50); }
.nitor-br-kartu-nama p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--gray-500); }
.dark .nitor-br-kartu-nama p { color: var(--gray-400); }
.nitor-br-label { flex-shrink: 0; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.nitor-br-label--merah { color: var(--danger-700); background-color: var(--danger-50); }
.nitor-br-label--kuning { color: var(--warning-700); background-color: var(--warning-50); }
.dark .nitor-br-label--merah { color: var(--danger-300); background-color: color-mix(in oklab, var(--danger-400) 16%, transparent); }
.dark .nitor-br-label--kuning { color: var(--warning-300); background-color: color-mix(in oklab, var(--warning-400) 16%, transparent); }
.nitor-br-kartu-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--gray-100); padding-top: 0.75rem; }
.dark .nitor-br-kartu-angka { border-color: var(--gray-800); }
.nitor-br-kartu-angka > div { display: grid; grid-template-columns: auto 1fr; column-gap: 0.625rem; align-items: center; }
.nitor-br-kartu-angka > div + div { border-inline-start: 1px solid var(--gray-100); padding-inline-start: 0.875rem; }
.dark .nitor-br-kartu-angka > div + div { border-color: var(--gray-800); }
.nitor-br-kartu-angka span { grid-row: span 2; color: var(--primary-600); }
.dark .nitor-br-kartu-angka span { color: var(--primary-300); }
.nitor-br-kartu-angka span > .fi-icon { width: 1.25rem; height: 1.25rem; }
.nitor-br-kartu-angka b { font-size: 1rem; font-weight: 600; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .nitor-br-kartu-angka b { color: var(--gray-50); }
.nitor-br-kartu-angka small { font-size: 0.75rem; color: var(--gray-500); }
.dark .nitor-br-kartu-angka small { color: var(--gray-400); }
.nitor-br-kartu-tenang { margin: 0; font-size: 0.8125rem; color: var(--gray-600); }
.dark .nitor-br-kartu-tenang { color: var(--gray-400); }
/* Kartu Nitor Pro (KartuNitorPro): tidak dapat diklik secara bentuk — tanpa tautan dan tanpa aksi; tampilannya redup bergembok. */
.nitor-pro { margin: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid var(--primary-100); background-color: var(--primary-50); cursor: default; }
.dark .nitor-pro { border-color: var(--gray-700); background-color: color-mix(in oklab, var(--primary-400) 10%, transparent); }
.nitor-pro-judul { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--primary-900); }
.dark .nitor-pro-judul { color: var(--primary-200); }
.nitor-pro-judul > .fi-icon { width: 1.125rem; height: 1.125rem; color: var(--warning-500); }
.nitor-pro-isi { margin: 0.375rem 0 0.75rem; font-size: 0.8125rem; color: var(--gray-600); }
.dark .nitor-pro-isi { color: var(--gray-400); }
.nitor-pro-segera { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem; border-radius: 0.5rem; font-size: 0.8125rem;
  font-weight: 600; color: var(--gray-600); background-color: var(--gray-200); user-select: none; }
/* Tinjauan Fable B-1 temuan 4 (a): abu 500 di atas abu 200 hanya ±4,2 : 1; abu 600 / gelap abu 300 di atas abu 800 di atas 4,5 : 1 (PaletNitorTest). */
.dark .nitor-pro-segera { color: var(--gray-300); background-color: var(--gray-800); }
.nitor-pro-segera > .fi-icon { width: 0.875rem; height: 0.875rem; }
/* Kartu Daily Spark (KartuDailySpark), di atas Nitor Pro: tanpa tautan dan tanpa aksi; permukaan netral supaya kartu Pro tetap satu-satunya yang berwarna. */
.nitor-spark { margin: 0.75rem 0.75rem 0; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid var(--gray-200); background-color: var(--color-white); cursor: default; }
.dark .nitor-spark { border-color: var(--gray-800); background-color: var(--gray-900); }
.nitor-spark-label { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--primary-700); }
.dark .nitor-spark-label { color: var(--primary-300); }
.nitor-spark-label > .fi-icon { width: 0.875rem; height: 0.875rem; }
.nitor-spark-judul { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--gray-950); }
.dark .nitor-spark-judul { color: var(--gray-50); }
.nitor-spark-isi { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--gray-600); }
.dark .nitor-spark-isi { color: var(--gray-400); }
/* Kedua kartu tidak ikut menggulung bersama menu: di layar sangat pendek (ponsel mendatar) Daily Spark mengalah, supaya ruang menu tetap ada. */
@media (max-height: 560px) {
  .nitor-spark { display: none; }
}