:root { --kuning-logo: #fff500; --hijau-logo: #85c226; }
.fi-topbar, .fi-sidebar-header { border-top: 3px solid var(--kuning-logo); }
.fi-simple-layout { background-image: radial-gradient(60rem 30rem at 50% -10%, color-mix(in oklab, var(--hijau-logo) 16%, transparent), transparent 70%); }
.fi-simple-main { border-top: 4px solid var(--hijau-logo); }
/* Halaman masuk dan daftar di HP: kartu langsung di bagian atas layar (tidak tertutup papan ketik), bersudut bulat. */
@media (max-width: 63.99rem) {
.fi-simple-main-ctn { align-items: flex-start; }
.fi-simple-main { margin: 1.25rem .75rem 2rem; width: calc(100% - 1.5rem); padding-block: 2rem; padding-inline: 1.25rem; border-radius: .75rem; }
}
/* Rasa aplikasi: tanpa kilatan biru saat disentuh, tombol sedikit mengecil saat ditekan, ukuran teks tidak
berubah saat HP diputar, dan di mode aplikasi terpasang halaman tidak "memantul" saat digulir. */
html { -webkit-text-size-adjust: 100%; }
.fi-btn, .fi-icon-btn, .fi-sidebar-item-btn, .fi-tabs-item, .fi-dropdown-list-item, .fi-ta-row, .nav-bawah-item, .beranda-menu-item { -webkit-tap-highlight-color: transparent; }
@media (max-width: 63.99rem) {
.fi-btn:active, .fi-icon-btn:active, .fi-sidebar-item-btn:active { transform: scale(.97); }
.fi-header-heading { font-size: 1.3rem; line-height: 1.7rem; }
.fi-header { row-gap: .75rem; }
}
@media (display-mode: standalone) {
html, body { overscroll-behavior-y: none; }
.fi-topbar > nav { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)); }
}
/* Bilah navigasi bawah di HP (lihat App\Support\NavigasiBawah): tujuan utama selalu dalam jangkauan ibu jari. */
.nav-bawah { display: none; }
@media (max-width: 63.99rem) {
.nav-bawah {
position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch;
height: calc(3.6rem + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
/* Latar padat tanpa efek blur: blur pada bilah yang menempel dihitung ulang setiap layar digulir (berat di HP murah). */
background: var(--color-white);
border-top: 1px solid var(--gray-200);
}
.dark .nav-bawah { background: var(--gray-900); border-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
.nav-bawah-item {
flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
padding: .3rem .15rem; color: var(--gray-500); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; user-select: none;
}
.dark .nav-bawah-item { color: var(--gray-400); }
.nav-bawah-item.aktif { color: var(--primary-600); }
.dark .nav-bawah-item.aktif { color: var(--primary-400); }
.nav-bawah-ikon { position: relative; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 1.85rem; border-radius: 999px; transition: background-color .15s, transform .1s; }
.nav-bawah-item.aktif .nav-bawah-ikon { background: color-mix(in oklab, var(--primary-600) 14%, transparent); }
.nav-bawah-item:active .nav-bawah-ikon { transform: scale(.9); }
.nav-bawah-ikon svg { width: 1.5rem; height: 1.5rem; }
.nav-bawah-label { font-size: .75rem; font-weight: 500; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-bawah-lencana { position: absolute; top: -.3rem; right: .3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: var(--danger-600); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.15rem; text-align: center; }
/* Isi halaman dan tombol Simpan yang menempel diberi ruang agar tidak tertutup bilah. */
:root:has(.nav-bawah) .fi-main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
:root:has(.nav-bawah) .fi-sticky .fi-ac { bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
}
/* Remah roti di HP menjadi satu tombol kembali ("‹ Santri") seperti aplikasi, bukan deretan tautan. */
@media (max-width: 63.99rem) {
.fi-breadcrumbs { display: block; margin-bottom: .35rem; }
.fi-breadcrumbs-item { display: none; }
.fi-breadcrumbs-item.kembali { display: inline-flex; align-items: center; }
.fi-breadcrumbs-item.kembali > .fi-breadcrumbs-item-separator { display: none; }
.fi-breadcrumbs-item.kembali::before { content: ''; width: .5rem; height: .5rem; margin-inline: .15rem .45rem; border-inline-start: 2px solid var(--primary-600); border-bottom: 2px solid var(--primary-600); transform: rotate(45deg); }
.fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: var(--primary-600); font-weight: 500; }
.dark .fi-breadcrumbs-item.kembali::before { border-color: var(--primary-400); }
.dark .fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: var(--primary-400); }
}
/* Tombol kepala halaman (Ekspor, Generate, ...) di HP melipat ke baris berikutnya agar semuanya terlihat tanpa
digeser (deret tombol bulat halaman detail diatur sendiri di tema-hp). */
@media (max-width: 63.99rem) {
.fi-header-actions-ctn .fi-ac { flex-wrap: wrap; gap: .5rem; }
.fi-header-actions-ctn .fi-btn { white-space: nowrap; }
}
/* Wizard di HP (misalnya proses kenaikan kelas): judul langkah ringkas agar semua langkah muat. */
@media (max-width: 63.99rem) {
.fi-sc-wizard-header-step-description { display: none; }
}
/* Halaman pendaftar PSB di HP: bingkai bersarang (bagian formulir, kotak berkas) dibuat lebih rapat agar isian
selebar mungkin, dan area unggah cukup besar untuk diketuk. */
@media (max-width: 63.99rem) {
.fi-panel-psb .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-content-ctn > .fi-section-content { padding: 1rem; }
.fi-panel-psb .fi-fieldset.berkas-psb { padding: .9rem; }
.fi-panel-psb .berkas-psb .filepond--root { min-height: 4rem; }
}
/* Saat halaman bergulir ke kolom yang salah (setelah menekan simpan atau kirim), judul kolom tidak tertutup bilah atas,
dan di HP juga tidak tertutup pemberitahuan yang muncul di bagian atas layar. */
[data-field-wrapper] { scroll-margin-top: 6rem; }
@media (max-width: 63.99rem) {
[data-field-wrapper] { scroll-margin-top: 11rem; }
}
/* Tombol di paling bawah formulir PSB: "Kirim pendaftaran" dan "Simpan dulu" selebar layar di HP (bertumpuk),
berdampingan di layar lebar. */
.psb-tombol-kirim { display: flex; flex-wrap: wrap; gap: .75rem; }
.psb-tombol-kirim .fi-btn { flex: 1 1 14rem; }
/* Kaki halaman masuk: nama lembaga dan tautan kebijakan privasi. */
.kaki-masuk { margin-top: 1.5rem; text-align: center; font-size: .75rem; color: var(--gray-500); }
.kaki-masuk a { display: inline-block; padding: .55rem .55rem; margin: -.55rem -.55rem; border-radius: .5rem; color: var(--primary-600); text-decoration: none; }
/* Tautan kecil di halaman masuk ("Lupa kata sandi?", "buat akun baru", "Informasi pendaftaran") dan tombol ☰ serta
tanda silang chip filter: area sentuh minimal sekitar 2rem tanpa mengubah ukuran hurufnya. */
.fi-simple-main .fi-sc-text a, .fi-simple-header-subheading a { display: inline-block; padding: .35rem .4rem; margin: -.35rem -.4rem; border-radius: .5rem; }
.fi-topbar-semua-menu { min-width: 2.5rem; justify-content: center; }
.fi-fo-field-label-required-mark { font-size: .75rem; }
.fi-ta-filter-indicators .fi-badge-delete-btn { padding: .5rem; margin: -.5rem -.6rem -.5rem -.3rem; box-sizing: content-box; }
/* Menu samping hanya di layar lebar (komputer). Di layar sempit (HP) semua menu lewat tombol ☰ ke halaman Semua Menu;
menu samping yang terlanjur terkirim (kunjungan pertama, sebelum lebar layar tercatat) beserta tombol bukanya
disembunyikan. Di layar lebar tombol ☰ Semua Menu disembunyikan bila menu samping ada. */
@media (max-width: 63.99rem) {
.fi-main-sidebar, .fi-sidebar-close-overlay, .fi-topbar-open-sidebar-btn, .fi-topbar-close-sidebar-btn, .fi-layout-sidebar-toggle-btn-ctn { display: none !important; }
}
@media (min-width: 64rem) {
.fi-topbar-semua-menu.ada-menu-samping { display: none; }
/* Tombol "Kelola" baris tabel hanya untuk kartu HP; di layar lebar barisnya sendiri bisa diklik. */
.fi-ta-actions .aksi-kelola { display: none; }
}
/* Logo kecil di kepala halaman HP: tombol menu tetap paling kiri, logo di sebelahnya. */
.logo-hp { display: none; }
@media (max-width: 63.99rem) {
.fi-topbar-semua-menu { order: -1; margin-inline-end: .2rem; }
.logo-hp { display: flex; align-items: center; margin-inline: .25rem .5rem; flex-shrink: 0; }
.logo-hp img { height: 2.25rem; width: auto; }
}
/* Sasaran sentuh yang nyaman di HP (tombol +/- kasir, tombol kecil buatan sendiri). */
@media (max-width: 63.99rem) {
.tombol-sentuh { min-width: 2.5rem; min-height: 2.5rem; font-size: 1.1rem; }
}
/* Kartu angkatan di halaman Akun Portal Wali & Santri. */
.akun-angkatan { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.akun-angkatan-kartu { display: grid; gap: .35rem; text-align: start; padding: .9rem 1rem; border-radius: .9rem; background: var(--color-white); border: 1px solid var(--gray-200); cursor: pointer; }
.akun-angkatan-kartu:hover { border-color: var(--primary-500); }
.akun-angkatan-kepala { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1rem; }
.akun-angkatan-status { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); }
.akun-angkatan-status.aktif { background: var(--primary-100); color: var(--primary-800); }
.akun-angkatan-isi { font-size: .875rem; color: var(--gray-600); }
.akun-angkatan-akun { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--gray-600); }
.akun-angkatan-kosong { color: var(--gray-500); }
.dark .akun-angkatan-kartu { background: var(--gray-900); border-color: var(--gray-700); }
/* Leger nilai di layar lebar (filament.pages.leger-nilai-tabel): bergulir ke samping, No. dan Santri menempel. */
.leger-bungkus { overflow: auto; max-height: 75vh; border: 1px solid var(--gray-200); border-radius: .75rem; }
.leger-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; font-variant-numeric: tabular-nums; }
.leger-tabel th, .leger-tabel td { padding: .55rem .75rem; border-bottom: 1px solid var(--gray-100); background: var(--color-white); white-space: nowrap; text-align: left; }
.leger-tabel thead th { position: sticky; top: 0; z-index: 2; background: var(--gray-50); font-weight: 600; color: var(--gray-700); border-bottom-color: var(--gray-200); white-space: normal; vertical-align: bottom; line-height: 1.25; }
.leger-tabel thead th.leger-angka { min-width: 4.5rem; max-width: 7.5rem; }
.leger-tabel tbody tr:nth-child(even) > * { background: var(--gray-50); }
.leger-tabel tbody tr:hover > * { background: var(--primary-50); }
.leger-tabel .leger-no { position: sticky; left: 0; z-index: 1; width: 3rem; min-width: 3rem; text-align: right; color: var(--gray-500); }
.leger-tabel .leger-santri { position: sticky; left: 3rem; z-index: 1; min-width: 13rem; max-width: 18rem; white-space: normal; font-weight: 500; border-right: 1px solid var(--gray-200); }
.leger-tabel thead .leger-no, .leger-tabel thead .leger-santri { z-index: 3; }
.leger-tabel .leger-santri small { display: block; font-weight: 400; color: var(--gray-500); }
.leger-tabel .leger-angka { text-align: right; }
.leger-tabel .leger-kosong { color: var(--gray-400); }
.leger-tabel .leger-kurang { color: var(--warning-700); }
.leger-tabel .leger-ringkas { background: var(--primary-50); }
.leger-tabel tbody tr:nth-child(even) > .leger-ringkas { background: var(--primary-100); }
.leger-tabel thead .leger-ringkas { background: var(--primary-100); color: var(--primary-800); }
.leger-tabel .leger-jumlah, .leger-tabel .leger-rata, .leger-tabel .leger-peringkat { position: sticky; z-index: 1; width: 5.75rem; min-width: 5.75rem; max-width: 5.75rem; }
.leger-tabel .leger-peringkat { right: 0; }
.leger-tabel .leger-rata { right: 5.75rem; }
.leger-tabel .leger-jumlah { right: 11.5rem; border-left: 1px solid var(--primary-200); }
.leger-tabel thead .leger-jumlah, .leger-tabel thead .leger-rata, .leger-tabel thead .leger-peringkat { z-index: 3; }
.leger-tabel tbody tr:last-child > * { border-bottom: 0; }
.leger-juara { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #fff500; color: #2d4700; font-weight: 700; }
.leger-kosong-baris { text-align: center !important; color: var(--gray-500); padding: 1.5rem !important; }
.dark .leger-bungkus { border-color: var(--gray-700); }
.dark .leger-tabel th, .dark .leger-tabel td { background: var(--gray-900); border-bottom-color: var(--gray-800); }
.dark .leger-tabel thead th { background: var(--gray-800); color: var(--gray-200); }
.dark .leger-tabel tbody tr:nth-child(even) > * { background: var(--gray-950); }
.dark .leger-tabel .leger-ringkas, .dark .leger-tabel tbody tr:nth-child(even) > .leger-ringkas { background: color-mix(in oklab, var(--primary-500) 15%, var(--gray-900)); }
.dark .leger-tabel .leger-santri { border-right-color: var(--gray-700); }
/* Tabel kecil di dalam halaman detail (riwayat bayar, saudara, leger) di HP: tiap baris jadi kartu ringkas,
label kolom di kiri dan isi di kanan, seperti tabel utama. */
@media (max-width: 63.99rem) {
.fi-in-table-repeatable > table > tbody > tr { gap: .4rem; padding: .85rem 1rem; }
.fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry { grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry > .fi-in-entry-label-col { padding-top: .1rem; }
.fi-in-table-repeatable > table > tbody > tr > td > .fi-in-entry > .fi-in-entry-content-col { grid-column: auto; }
.fi-fo-table-repeater > table > tbody > tr { gap: .9rem; padding: 1rem; }
}
/* Kartu kecil berdampingan (misalnya saldo Kas dan Bank): label di atas isi, bukan di kiri, agar angka tidak patah. */
@media (max-width: 63.99rem) {
.entri-tumpuk .fi-in-entry { grid-template-columns: minmax(0, 1fr) !important; row-gap: .25rem; }
.entri-tumpuk .fi-in-entry > .fi-in-entry-content-col { grid-column: 1 !important; justify-self: start !important; text-align: start !important; }
.entri-tumpuk .fi-in-entry-content-ctn { text-align: start; }
.entri-tumpuk .fi-in-entry-content-col :is(.fi-in-text, .fi-in-text-item, .fi-in-placeholder) { text-align: start !important; justify-content: flex-start !important; }
}
/* Halaman detail di HP: isian teks pendek (nama, tanggal, status) berlabel di kiri agar halaman tidak terlalu panjang.
Foto, daftar berulang, dan tampilan khusus (peta hafalan) tetap selebar layar. */
@media (max-width: 63.99rem) {
.fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) {
grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr); column-gap: .75rem; align-items: start;
}
.fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col { grid-column: auto; }
}
/* Ikon berwarna tema (Menu cepat). */
.ikon-tema { color: var(--primary-600); }
.dark .ikon-tema { color: var(--primary-400); }
/* Dokumen Saya / Dokumen Anak (Portal Santri dan Wali) */
.dokumen-portal { display: grid; gap: 1rem; }
.dokumen-portal-daftar { display: grid; gap: .25rem; }
.dokumen-portal-daftar li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--gray-200); }
.dokumen-portal-daftar li:first-child { border-top: 0; }
.dokumen-portal-teks { display: grid; gap: .1rem; min-width: 0; }
.dokumen-portal-teks span { font-size: .85rem; color: var(--gray-500); overflow-wrap: anywhere; }
.dokumen-portal-tahan { font-size: .8rem; color: var(--danger-600); text-align: right; }
.dokumen-portal-kosong { color: var(--gray-500); }
:root {
--kepala-1: var(--primary-600); --kepala-2: #345009; --kepala-3: #2a4207;
--kepala-latar: linear-gradient(155deg, var(--kepala-1) 0%, var(--kepala-2) 70%, var(--kepala-3) 100%);
--beranda-muda: color-mix(in oklab, var(--primary-600) 11%, white);
--beranda-kuning: #fff6d1; --beranda-kuning-teks: #92400e;
--beranda-teal: #e3f3ef; --beranda-teal-teks: #0f766e;
--beranda-abu: var(--gray-100); --beranda-abu-teks: var(--gray-600);
--beranda-bayang: 0 6px 20px rgb(17 24 39 / .08);
}
.dark {
--beranda-muda: color-mix(in oklab, var(--primary-400) 16%, var(--gray-900));
--beranda-kuning: color-mix(in oklab, #f59e0b 16%, var(--gray-900)); --beranda-kuning-teks: #fcd34d;
--beranda-teal: color-mix(in oklab, #14b8a6 16%, var(--gray-900)); --beranda-teal-teks: #5eead4;
--beranda-abu: var(--gray-800); --beranda-abu-teks: var(--gray-300);
--beranda-bayang: 0 0 0 1px rgb(255 255 255 / .08);
}
/* ---------- Kepala halaman hijau di semua halaman ---------- */
.fi-page .fi-header { position: relative; isolation: isolate; color: #fff; }
.fi-page .fi-header::before { content: ''; position: absolute; z-index: -1; background: var(--kepala-latar); }
.fi-page .fi-header .fi-header-heading { color: #fff; }
.fi-page .fi-header .fi-header-subheading { color: rgb(255 255 255 / .85); }
.fi-page .fi-header .fi-breadcrumbs-item-label, .fi-page .fi-header .fi-breadcrumbs-item-separator { color: rgb(255 255 255 / .8); }
.fi-page .fi-header .fi-breadcrumbs-item a:hover .fi-breadcrumbs-item-label { color: #fff; }
/* Tombol utama di atas latar hijau: putih bertulisan hijau; tombol ikon (⋮) putih. */
.fi-page .fi-header .fi-btn.fi-color-primary { background: #fff; color: var(--primary-700); }
.fi-page .fi-header .fi-btn.fi-color-primary:hover { background: color-mix(in oklab, #fff 88%, var(--primary-600)); }
.fi-page .fi-header .fi-btn.fi-color-primary .fi-icon { color: var(--primary-700); }
.fi-page .fi-header .fi-header-actions-ctn > .fi-ac > .fi-icon-btn,
.fi-page .fi-header .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn { color: #fff; }
@media (max-width: 63.99rem) {
/* Bilah atas hijau menyambung dengan kepala halaman. */
.fi-topbar { background: var(--kepala-1) !important; box-shadow: none !important; border-bottom: 0 !important; }
.fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon { color: #fff; }
.fi-topbar .fi-icon-btn:hover { background: rgb(255 255 255 / .12); }
.logo-hp { background: #fff; border-radius: 9999px; padding: .15rem; }
.logo-hp img { height: 2rem; }
.fi-topbar .fi-global-search-field .fi-input-wrp { background: rgb(255 255 255 / .14); box-shadow: none; --tw-ring-color: transparent; }
.fi-topbar .fi-global-search-field input { color: #fff; }
.fi-topbar .fi-global-search-field input::placeholder { color: rgb(255 255 255 / .75); }
.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon { color: rgb(255 255 255 / .8); }
.fi-topbar .fi-user-avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .65); }
/* Kepala halaman selebar layar, melengkung di bawah, rapat dengan bilah atas. */
.fi-page-header-main-ctn { padding-top: 1rem; row-gap: 1.5rem; }
.fi-page .fi-header { padding: .25rem 0 1.4rem; }
.fi-page .fi-header::before { inset: -1rem -1rem 0; border-radius: 0 0 1.5rem 1.5rem; }
.fi-breadcrumbs-item.kembali::before { border-color: #fff !important; }
.fi-page .fi-header .fi-breadcrumbs-item.kembali .fi-breadcrumbs-item-label { color: #fff !important; }
}
@media (min-width: 64rem) {
/* Layar lebar: kepala halaman berupa pita hijau bersudut bulat. */
.fi-page .fi-header { padding: 1.25rem 1.5rem; overflow: hidden; border-radius: 1.25rem; }
.fi-page .fi-header::before { inset: 0; }
.fi-page .fi-header::after { content: ''; position: absolute; z-index: -1; right: -2.5rem; top: -3rem; width: 12rem; height: 12rem; background: url('https://www.alfathsolobaru.com/ikon/logo.webp') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .08; }
}
/* ---------- Beranda ---------- */
.beranda { display: block; }
.beranda-kepala { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--kepala-latar); padding: 1.25rem 1.5rem 5.5rem; border-radius: 1.5rem; }
.beranda-kepala::after { content: ''; position: absolute; z-index: -1; right: -3.5rem; top: -2rem; width: 15rem; height: 15rem; background: url('https://www.alfathsolobaru.com/ikon/logo.webp') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .08; }
.beranda-kepala::before { content: ''; position: absolute; z-index: -1; left: -2.5rem; bottom: -4.5rem; width: 12rem; height: 12rem; border-radius: 9999px; background: rgb(255 255 255 / .05); }
.beranda-salam { font-size: .875rem; opacity: .85; }
.beranda-nama { margin: .1rem 0 0; font-size: 1.4rem; line-height: 1.25; font-weight: 700; color: #fff; }
.beranda-chip { display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; padding: .25rem .7rem; border-radius: 9999px; background: rgb(255 255 255 / .16); font-size: .78rem; font-weight: 500; }
.beranda-chip i { width: .45rem; height: .45rem; border-radius: 9999px; background: var(--kuning-logo); }
.beranda-keterangan { margin-top: .4rem; font-size: .8rem; opacity: .8; }
.beranda-isi { position: relative; z-index: 1; margin-top: -4.25rem; display: grid; gap: 1rem; padding-inline: 0; }
@media (max-width: 63.99rem) {
/* Selebar layar dan menyambung dengan bilah atas hijau (menutup jarak atas halaman). */
.beranda-kepala { margin: -1rem -1rem 0; border-radius: 0 0 1.75rem 1.75rem; padding: .5rem 1.25rem 5.25rem; }
}
@media (min-width: 64rem) {
.beranda-isi { padding-inline: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.beranda-penuh { grid-column: 1 / -1; }
}
.beranda-kartu { min-width: 0; border-radius: 1.1rem; padding: 1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); color: var(--gray-950); }
.dark .beranda-kartu { background: var(--gray-900); color: var(--color-white); }
.beranda-judul { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.beranda-judul h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.beranda-judul a, .beranda-tautan { padding: .4rem .45rem; margin: -.4rem -.45rem; border: 0; border-radius: .5rem; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary-600); text-decoration: none; white-space: nowrap; cursor: pointer; }
.dark .beranda-judul a, .dark .beranda-tautan { color: var(--primary-400); }
/* Bagian yang dituju menu beranda tidak tertutup bilah atas. */
.fi-sc-section[id] { scroll-margin-top: 5rem; }
.beranda-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: 'liga' 0, 'calt' 0; color: var(--primary-600); }
.dark .beranda-label { color: var(--primary-400); }
.beranda-besar { font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.beranda-pesan { margin-top: .3rem; font-size: .875rem; line-height: 1.45; color: var(--gray-600); }
.dark .beranda-pesan { color: var(--gray-300); }
.beranda-baris { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.beranda-pil { flex-shrink: 0; padding: .2rem .6rem; border-radius: 9999px; background: var(--beranda-muda); color: var(--primary-700); font-size: .75rem; font-weight: 600; }
.dark .beranda-pil { color: var(--primary-300); }
.beranda-pil.kuning { background: var(--beranda-kuning); color: var(--beranda-kuning-teks); }
.beranda-pil.merah { background: color-mix(in oklab, var(--danger-600) 12%, transparent); color: var(--danger-700); }
.dark .beranda-pil.merah { color: var(--danger-300); }
.beranda-sorot-judul { margin: .2rem 0 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.beranda-biaya { margin-top: .75rem; }
.beranda-biaya small { display: block; font-size: .78rem; color: var(--gray-500); }
.beranda-biaya b { font-size: 1.3rem; font-weight: 800; }
@media (min-width: 64rem) { .beranda-hanya-hp { display: none; } }
.beranda-merah { color: var(--danger-600) !important; }
.dark .beranda-merah { color: var(--danger-400) !important; }
.beranda-kosong { margin: 0; font-size: .875rem; color: var(--gray-500); }
/* Profil di kartu utama. */
.beranda-profil { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.beranda-foto { width: 3.25rem; height: 3.25rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--beranda-muda); }
.beranda-profil b { display: block; font-size: 1rem; line-height: 1.3; }
.beranda-profil small { display: block; font-size: .8rem; color: var(--gray-500); }
.beranda-pilih { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.beranda-pilih button { padding: .35rem .8rem; border-radius: 9999px; border: 0; background: var(--beranda-abu); color: var(--beranda-abu-teks); font-size: .8rem; font-weight: 600; cursor: pointer; }
.beranda-pilih button.aktif { background: var(--primary-600); color: #fff; }
/* Deret angka. */
.beranda-angka { display: grid; grid-template-columns: repeat(var(--kolom), minmax(0, 1fr)); margin: .85rem 0 0; padding-top: .75rem; border-top: 1px dashed var(--gray-200); }
.dark .beranda-angka { border-color: var(--gray-700); }
.beranda-angka > div { min-width: 0; padding-inline: .35rem; text-align: center; }
.beranda-angka > div + div { border-inline-start: 1px solid var(--gray-200); }
.dark .beranda-angka > div + div { border-color: var(--gray-700); }
.beranda-angka dt { font-size: .75rem; color: var(--gray-500); }
.beranda-angka dd { margin: .15rem 0 0; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
.beranda-angka dd.beranda-angka-catatan { margin: 0; font-size: .75rem; font-weight: 500; color: var(--gray-500); }
/* Sorotan tagihan dan bilah kemajuan. */
.beranda-sorot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .85rem; padding: .75rem; border-radius: .9rem; background: color-mix(in oklab, var(--danger-600) 8%, transparent); }
.beranda-sorot.lunas { background: var(--beranda-muda); }
.beranda-sorot small { display: block; font-size: .75rem; color: var(--danger-700); }
.beranda-sorot.lunas small { color: var(--primary-700); }
.dark .beranda-sorot small { color: var(--danger-300); }
.dark .beranda-sorot.lunas small { color: var(--primary-300); }
.beranda-sorot b { font-size: 1.15rem; color: var(--danger-700); }
.beranda-sorot.lunas b { color: var(--primary-700); }
.dark .beranda-sorot b { color: var(--danger-300); }
.dark .beranda-sorot.lunas b { color: var(--primary-300); }
.beranda-bilah { height: .5rem; border-radius: 9999px; background: var(--beranda-muda); overflow: hidden; margin-top: .35rem; }
.beranda-bilah span { display: block; height: 100%; min-width: .5rem; border-radius: 9999px; background: linear-gradient(90deg, var(--hijau-logo), var(--primary-600)); }
.beranda-kemajuan { margin-top: .75rem; font-size: .78rem; color: var(--gray-500); }
.beranda-kemajuan b { color: var(--gray-900); }
.dark .beranda-kemajuan b { color: var(--color-white); }
.beranda-langkah { display: flex; gap: .25rem; margin-top: .6rem; }
.beranda-langkah i { flex: 1; height: .35rem; border-radius: 9999px; background: var(--gray-200); }
.dark .beranda-langkah i { background: var(--gray-700); }
.beranda-langkah i.selesai { background: var(--primary-600); }
.beranda-langkah i.sekarang { background: var(--kuning-logo); box-shadow: inset 0 0 0 1px #c9bf00; }
/* Tombol kartu: dua tombol sejajar. */
.beranda-tombol { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin-top: .85rem; }
.beranda-tombol .fi-btn { width: 100%; justify-content: center; }
/* Menu ikon bulat. */
.beranda-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; column-gap: 0; }
.beranda-menu-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.beranda-menu-item:active .beranda-menu-ikon { transform: scale(.92); }
.beranda-menu-ikon { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1.1rem; transition: transform .1s; }
.beranda-menu-ikon .fi-icon, .beranda-menu-ikon svg { width: 1.6rem; height: 1.6rem; }
/* Label tidak dipotong di tengah kata ("Pengumuman" utuh). */
.beranda-menu-label { font-size: .75rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: normal; word-break: keep-all; }
.beranda-lencana { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 9999px; background: var(--danger-600); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.15rem; box-shadow: 0 0 0 2px var(--color-white); }
.dark .beranda-lencana { box-shadow: 0 0 0 2px var(--gray-900); }
.beranda-warna-hijau { background: var(--beranda-muda); color: var(--primary-600); }
.dark .beranda-warna-hijau { color: var(--primary-400); }
.beranda-warna-kuning { background: var(--beranda-kuning); color: var(--beranda-kuning-teks); }
.beranda-warna-teal { background: var(--beranda-teal); color: var(--beranda-teal-teks); }
.beranda-warna-abu { background: var(--beranda-abu); color: var(--beranda-abu-teks); }
.beranda-warna-merah { background: color-mix(in oklab, var(--danger-600) 12%, transparent); color: var(--danger-700); }
.dark .beranda-warna-merah { color: var(--danger-300); }
.beranda-warna-biru { background: color-mix(in oklab, #1d4ed8 11%, white); color: #1d4ed8; }
.dark .beranda-warna-biru { background: color-mix(in oklab, #3b82f6 16%, var(--gray-900)); color: #93c5fd; }
.beranda-warna-ungu { background: color-mix(in oklab, #6d28d9 11%, white); color: #6d28d9; }
.dark .beranda-warna-ungu { background: color-mix(in oklab, #8b5cf6 16%, var(--gray-900)); color: #c4b5fd; }
.beranda-tanda { position: absolute; top: -.15rem; right: -.15rem; width: .7rem; height: .7rem; border-radius: 9999px; background: var(--danger-600); box-shadow: 0 0 0 2px var(--color-white); }
.dark .beranda-tanda { box-shadow: 0 0 0 2px var(--gray-900); }
.beranda-warna-sekarang { background: var(--kuning-logo); color: #2a4207; }
.beranda-warna-selesai { background: var(--primary-600); color: #fff; }
/* Layanan umum di beranda semua panel: jadwal sholat paling atas (x-beranda.jadwal-sholat), menu layanan umum di kartu
Menu (x-beranda.menu-umum), agenda dan ayat hari ini di bawah (x-beranda.layanan-umum). */
.beranda-umum-kota { font-size: .78rem; font-weight: 500; color: var(--gray-500); }
.beranda-umum-kota svg, .beranda-sholat-tautan svg { display: inline-block; width: .95rem; height: .95rem; vertical-align: -.15em; }
.beranda-sholat-tautan { display: inline-flex; gap: .85rem; }
.beranda-sholat-tautan a { display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; }
.beranda-sholat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: 0; list-style: none; text-align: center; }
.beranda-sholat li { padding: .45rem 0; border-radius: .75rem; font-size: .75rem; color: var(--gray-500); }
.beranda-sholat li b { display: block; margin-top: .1rem; font-size: .9rem; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .beranda-sholat li b { color: var(--color-white); }
.beranda-sholat li.kini { background: var(--primary-600); color: #e7f2d6; }
.beranda-sholat li.kini b { color: #fff; }
.beranda-sholat-lagi { margin: .5rem 0 0; font-size: .8rem; font-weight: 600; text-align: center; color: var(--primary-600); }
.dark .beranda-sholat-lagi { color: var(--primary-400); }
.beranda-umum-judul { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--gray-200); }
.dark .beranda-umum-judul { border-color: var(--gray-700); }
.beranda-kartu > .beranda-umum-judul:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Halaman Semua Menu (App\Filament\Pages\SemuaMenu): menu per kelompok berupa ikon, seperti halaman Semua Layanan. */
.semua-menu { display: grid; gap: 1.1rem; }
.semua-menu [hidden] { display: none !important; }
.semua-menu-cari { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; min-height: 2.9rem; border-radius: 1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); color: var(--gray-500); }
.dark .semua-menu-cari { background: var(--gray-900); }
.semua-menu-cari svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.semua-menu-cari input { flex: 1; min-width: 0; border: 0; padding: .6rem 0; background: transparent; font-size: 1rem; color: var(--gray-950); outline: none; box-shadow: none; }
.dark .semua-menu-cari input { color: var(--color-white); }
.semua-menu-grup h2 { margin: 0 .2rem .55rem; font-size: 1rem; font-weight: 700; color: var(--gray-950); }
.dark .semua-menu-grup h2 { color: var(--color-white); }
.semua-menu-kosong { margin: 0; padding: 1.5rem 1rem; text-align: center; color: var(--gray-500); }
@media (min-width: 64rem) { .semua-menu .beranda-menu { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@font-face { font-family: 'Amiri Quran'; src: url('https://www.alfathsolobaru.com/fonts/amiri-quran/AmiriQuran.ttf') format('truetype'); font-display: swap; }
.beranda-ayat-arab { margin: 0; font-family: 'Amiri Quran', 'Amiri', serif; direction: rtl; text-align: right; font-size: 1.5rem; line-height: 2.1; }
.beranda-ayat-arab span { color: var(--primary-600); }
.dark .beranda-ayat-arab span { color: var(--primary-400); }
.beranda-ayat-arti { margin: .35rem 0 .5rem; font-size: .875rem; line-height: 1.55; color: var(--gray-700); }
.dark .beranda-ayat-arti { color: var(--gray-300); }
.beranda-ayat small { font-size: .78rem; font-weight: 700; color: var(--primary-600); }
.dark .beranda-ayat small { color: var(--primary-400); }
/* Daftar ringkas. */
.beranda-daftar { display: grid; }
.beranda-daftar-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; color: inherit; text-decoration: none; min-width: 0; }
.beranda-daftar-item + .beranda-daftar-item { border-top: 1px solid var(--gray-100); }
.dark .beranda-daftar-item + .beranda-daftar-item { border-color: var(--gray-800); }
/* Butir pertama yang tampil setelah butir tersembunyi (alur PSB yang diringkas) tanpa garis atas. */
.beranda-daftar-item[x-cloak] + .beranda-daftar-item, .beranda-daftar-item[style*="display: none"] + .beranda-daftar-item { border-top: 0; }
.beranda-daftar-tanda { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; flex-shrink: 0; font-size: .85rem; font-weight: 700; }
.beranda-daftar-tanda .fi-icon, .beranda-daftar-tanda svg { width: 1.3rem; height: 1.3rem; }
.beranda-daftar-teks { flex: 1; min-width: 0; }
.beranda-daftar-teks b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.beranda-daftar-teks small { display: block; margin-top: .1rem; font-size: .78rem; line-height: 1.35; color: var(--gray-500); }
.beranda-daftar-waktu { font-size: .75rem; color: var(--gray-500); white-space: nowrap; }
.beranda-daftar-panah { color: var(--gray-400); }
.beranda-daftar-panah .fi-icon, .beranda-daftar-panah svg { width: 1.1rem; height: 1.1rem; }
/* Banner pengumuman yang bisa digeser. */
.beranda-banner-wrap { min-width: 0; }
.beranda-banner-geser { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 1.1rem; }
.beranda-banner-geser::-webkit-scrollbar { display: none; }
.beranda-banner { position: relative; overflow: hidden; flex: 0 0 100%; scroll-snap-align: start; min-height: 7rem; padding: 1rem 1.15rem; color: #fff; background: linear-gradient(120deg, #3d6300, #5c8f05 60%, var(--hijau-logo)); }
.beranda-banner::after { content: ''; position: absolute; right: -1.2rem; bottom: -2rem; width: 8rem; height: 8rem; border-radius: 9999px; border: 1.1rem solid rgb(255 245 0 / .35); }
.beranda-banner-label { display: inline-block; padding: .1rem .5rem; border-radius: .4rem; background: var(--kuning-logo); color: #2a4207; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.beranda-banner b { position: relative; z-index: 1; display: block; margin-top: .45rem; font-size: 1rem; line-height: 1.3; max-width: 85%; }
.beranda-banner p { position: relative; z-index: 1; margin: .25rem 0 0; font-size: .8rem; line-height: 1.4; opacity: .92; max-width: 88%; white-space: pre-line; }
.beranda-titik { display: flex; justify-content: center; gap: .3rem; margin-top: .5rem; }
.beranda-titik i { width: .4rem; height: .4rem; border-radius: 9999px; background: var(--gray-300); transition: width .2s; }
.beranda-titik i.aktif { width: 1.1rem; background: var(--primary-600); }
/* Kartu angka dasbor (WidgetStatistik): kotak berikon di dalam kartu beranda, sama untuk semua peran. */
.widget-ringkasan .beranda-judul { margin-bottom: .75rem; }
.ringkasan-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ringkasan-butir { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .75rem; border-radius: .9rem; background: var(--gray-50); color: inherit; text-decoration: none; transition: background-color .15s; }
.dark .ringkasan-butir { background: rgb(255 255 255 / .04); }
a.ringkasan-butir:hover, a.ringkasan-butir:focus-visible { background: var(--beranda-muda); }
.ringkasan-kepala { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ringkasan-ikon { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .65rem; }
.ringkasan-ikon .fi-icon, .ringkasan-ikon svg { width: 1.1rem; height: 1.1rem; }
.ringkasan-label { font-size: .78rem; line-height: 1.3; color: var(--gray-600); }
.dark .ringkasan-label { color: var(--gray-300); }
.ringkasan-butir b { margin-top: .2rem; font-size: 1.15rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.ringkasan-butir small { font-size: .75rem; line-height: 1.35; color: var(--gray-500); }
.ringkasan-butir small.ringkasan-catatan-merah { color: var(--danger-700); }
.ringkasan-butir small.ringkasan-catatan-kuning { color: var(--beranda-kuning-teks); }
.dark .ringkasan-butir small.ringkasan-catatan-merah { color: var(--danger-300); }
@media (min-width: 64rem) {
.ringkasan-kisi { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
/* Kartu dasbor di bawah kepala hijau sejajar dengan kartu di dalamnya. */
.fi-page-content .fi-wi-widget:not(:has(> .beranda)) { margin-inline: 1.25rem; }
}
/* Kartu dan tabel di semua halaman berbentuk sama dengan kartu beranda: sudut bulat dan bayangan lembut. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-compact):not(.fi-secondary), .fi-ta-ctn { border-radius: 1.1rem; box-shadow: var(--beranda-bayang); }
.fi-section.fi-aside > .fi-section-content-ctn { border-radius: 1.1rem; box-shadow: var(--beranda-bayang); }
.fi-ta-ctn:not(.fi-ta-ctn-with-footer) .fi-ta-content-ctn { border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 1.1rem; }
/* Kartu santri digital (QR) di Portal Santri. */
.kartu-digital { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.kartu-digital-qr { width: 14rem; max-width: 100%; padding: .75rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
.kartu-digital-qr svg { display: block; width: 100%; height: auto; }
.kartu-digital b { font-size: 1.05rem; }
.kartu-digital small { color: var(--gray-500); font-size: .8rem; }
.beranda-qr { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: .9rem; border: 1px solid var(--gray-200); background: var(--color-white); color: var(--primary-700); cursor: pointer; }
.dark .beranda-qr { background: var(--gray-800); border-color: var(--gray-700); color: var(--primary-300); }
.beranda-qr .fi-icon, .beranda-qr svg { width: 2rem; height: 2rem; }
/* ---------- Pemantauan (Sistem → Pemantauan dan kartunya di dasbor): grafik HTML/CSS satu warna ---------- */
.pantau { --pantau-batang: var(--primary-600); --pantau-batang-aktif: var(--primary-700); --pantau-jalur: var(--primary-100); --pantau-garis: var(--gray-200); --pantau-sumbu: var(--gray-500); --pantau-teks: var(--gray-950); --pantau-redup: var(--gray-600); display: grid; gap: 1rem; transition: opacity .15s; }
.dark .pantau { --pantau-batang: var(--primary-500); --pantau-batang-aktif: var(--primary-400); --pantau-jalur: var(--primary-900); --pantau-garis: rgb(255 255 255 / .08); --pantau-sumbu: var(--gray-400); --pantau-teks: var(--gray-50); --pantau-redup: var(--gray-300); }
.pantau-memuat { opacity: .55; }
.pantau-saring { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.pantau-rentang { display: inline-flex; padding: .2rem; border-radius: 9999px; background: var(--gray-100); }
.dark .pantau-rentang { background: var(--gray-800); }
.pantau-rentang button { min-height: 2.25rem; padding: 0 .85rem; border: 0; border-radius: 9999px; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--gray-600); cursor: pointer; }
.dark .pantau-rentang button { color: var(--gray-300); }
.pantau-rentang button.aktif { background: var(--color-white); color: var(--primary-700); box-shadow: 0 1px 3px rgb(17 24 39 / .12); }
.dark .pantau-rentang button.aktif { background: var(--gray-900); color: var(--primary-300); }
.pantau-lompat { display: flex; flex-wrap: wrap; gap: .4rem; }
.pantau-lompat a { padding: .3rem .7rem; border-radius: 9999px; background: var(--beranda-muda); color: var(--primary-700); font-size: .78rem; font-weight: 600; text-decoration: none; }
.dark .pantau-lompat a { color: var(--primary-300); }
.pantau-bagian { scroll-margin-top: 4.5rem; }
.pantau-catatan { font-size: .75rem; color: var(--gray-500); }
.pantau-penjelasan { margin: -.2rem 0 .8rem; font-size: .8rem; line-height: 1.45; color: var(--pantau-redup); }
.pantau-subjudul { margin: 1.1rem 0 .55rem; font-size: .85rem; font-weight: 700; }
.pantau-kosong { margin: 0; padding: .65rem .8rem; border-radius: .75rem; background: var(--gray-50); font-size: .8rem; color: var(--gray-500); }
.dark .pantau-kosong { background: rgb(255 255 255 / .04); color: var(--gray-400); }
.pantau-kisi { display: grid; gap: 0 1.5rem; }
.pantau-jarak { margin-top: 1rem; }
@media (min-width: 48rem) { .pantau-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pantau-grafik { position: relative; margin: 0; padding-top: 1.5rem; }
.pantau-tip { position: absolute; top: 0; left: 2.4rem; right: 0; z-index: 2; padding: .3rem .55rem; border-radius: .6rem; background: var(--color-white); box-shadow: 0 2px 10px rgb(17 24 39 / .14); font-size: .75rem; line-height: 1.35; color: var(--pantau-redup); pointer-events: none; }
.dark .pantau-tip { background: var(--gray-800); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.pantau-tip b { color: var(--pantau-teks); }
.pantau-plot { position: relative; height: var(--tinggi, 132px); margin-left: 2.4rem; }
.pantau-garis { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--pantau-garis); }
.pantau-garis i { position: absolute; right: calc(100% + .4rem); top: -.45rem; font-size: .75rem; font-style: normal; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pantau-sumbu); }
.pantau-dasar { border-top-color: var(--gray-300); }
.dark .pantau-dasar { border-top-color: var(--gray-600); }
.pantau-kolom-baris { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.pantau-kolom { position: relative; display: flex; align-items: flex-end; justify-content: center; flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pantau-kolom-isi { display: block; width: 100%; max-width: 24px; height: var(--t); border-radius: 3px 3px 0 0; background: var(--pantau-batang); }
.pantau-kolom:hover .pantau-kolom-isi, .pantau-kolom.aktif .pantau-kolom-isi { background: var(--pantau-batang-aktif); }
.pantau-kolom:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; border-radius: 3px; }
.pantau-kolom-nilai { position: absolute; left: 50%; bottom: calc(var(--t) + 3px); transform: translateX(-50%); font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--pantau-teks); }
.pantau-sumbu-x { position: relative; height: 1.1rem; margin: .35rem 0 0 2.4rem; }
.pantau-sumbu-x span { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font-size: .75rem; white-space: nowrap; color: var(--pantau-sumbu); }
.pantau-sumbu-x span.awal { transform: translateX(-.4rem); }
.pantau-sumbu-x span.akhir { transform: translateX(calc(-100% + .4rem)); }
.pantau-tabel { margin-top: .4rem; font-size: .78rem; }
.pantau-tabel summary { width: max-content; padding: .2rem 0; color: var(--primary-700); font-weight: 600; cursor: pointer; }
.dark .pantau-tabel summary { color: var(--primary-300); }
.pantau-tabel table, .pantau-tabel-tetap table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pantau-tabel th, .pantau-tabel td, .pantau-tabel-tetap th, .pantau-tabel-tetap td { padding: .35rem .25rem; border-bottom: 1px solid var(--pantau-garis); text-align: left; font-weight: 400; }
.pantau-tabel td, .pantau-tabel-tetap td { text-align: right; font-weight: 600; }
.pantau-tabel td small { display: block; font-size: .75rem; font-weight: 400; color: var(--gray-500); }
.pantau-tabel-tetap { margin-top: 1rem; overflow-x: auto; font-size: .8rem; }
.pantau-tabel-tetap thead th { color: var(--gray-500); font-size: .75rem; text-align: right; }
.pantau-tabel-tetap thead th:first-child { text-align: left; }
.pantau-daftar { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pantau-daftar li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .2rem .75rem; font-size: .8rem; }
.pantau-daftar span { min-width: 0; overflow-wrap: anywhere; color: var(--pantau-teks); }
.pantau-daftar b { font-variant-numeric: tabular-nums; }
.pantau-daftar i { grid-column: 1 / -1; display: block; width: var(--p); min-width: 2px; height: 6px; border-radius: 0 3px 3px 0; background: var(--pantau-batang); }
.pantau-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .25rem .75rem; margin-bottom: .7rem; font-size: .8rem; }
.pantau-meter b small { font-size: .75rem; font-weight: 400; color: var(--gray-500); }
.pantau-meter i { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--pantau-jalur); }
.pantau-meter em { display: block; width: var(--p); height: 100%; border-radius: 9999px; background: var(--pantau-batang); }
.pantau-baris { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.pantau-baris li { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: .75rem; background: var(--gray-50); }
.dark .pantau-baris li { background: rgb(255 255 255 / .04); }
.pantau-baris span { overflow-wrap: anywhere; color: var(--pantau-redup); }
.pantau-baris b { overflow-wrap: anywhere; }
/* Kolom angka rapat (rekap presensi, dll.) agar tabel berkolom banyak muat di layar laptop. */
.fi-ta-header-cell.sel-rapat, .fi-ta-cell.sel-rapat { padding-inline: .5rem; }
.pantau-status-daftar { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pantau-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .65rem; padding: .7rem .75rem; border-radius: .9rem; background: var(--gray-50); }
.dark .pantau-status { background: rgb(255 255 255 / .04); }
.pantau-status b { display: block; font-size: .85rem; }
.pantau-status small { display: block; margin-top: .1rem; font-size: .76rem; line-height: 1.4; color: var(--pantau-redup); }
.pantau-status-ikon { width: 1.4rem; height: 1.4rem; }
.pantau-lencana { padding: .15rem .55rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pantau-status-ok .pantau-status-ikon { color: var(--success-600); }
.pantau-status-ok .pantau-lencana { background: var(--beranda-muda); color: var(--primary-700); }
.pantau-status-peringatan .pantau-status-ikon { color: var(--warning-600); }
.pantau-status-peringatan .pantau-lencana { background: var(--beranda-kuning); color: var(--beranda-kuning-teks); }
.pantau-status-gagal .pantau-status-ikon { color: var(--danger-600); }
.pantau-status-gagal .pantau-lencana { background: color-mix(in oklab, var(--danger-600) 12%, transparent); color: var(--danger-700); }
.dark .pantau-status-ok .pantau-lencana { color: var(--primary-300); }
.dark .pantau-status-gagal .pantau-lencana { color: var(--danger-300); }
.pantau-grafik [x-cloak] { display: none !important; }
@media (max-width: 63.99rem) {
/* ---------- Daftar: baris tabel menjadi kartu ringkas ---------- */
/* Filament sendiri baru menumpuk tabel di bawah 40rem (varian sm:); di 40-63,99rem (tablet potret) tabel
masih ditata sebagai tabel berkepala. Aturan berikut meniru tampilan max-sm Filament agar kartu di bawah
ini berlaku di semua layar tanpa menu samping. */
.fi-ta-table-stacked-on-mobile { display: block; }
.fi-ta-table-stacked-on-mobile > thead { display: block; }
.fi-ta-table-stacked-on-mobile > thead:not(:has(.fi-ta-table-stacked-header-row)) { display: none; }
.fi-ta-table-stacked-on-mobile > thead > tr:not(.fi-ta-table-stacked-header-row) { display: none; }
.fi-ta-table-stacked-on-mobile > thead > tr > :is(.fi-ta-header-cell, .fi-ta-selection-cell) { display: none; }
.fi-ta-table-stacked-on-mobile > tbody { display: block; white-space: normal; }
.fi-ta-table-stacked-on-mobile > tbody > tr { position: relative; display: block; padding-block: .5rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-summary-header-row { display: none; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell { position: absolute; inset-inline-end: 1rem; top: 0; width: auto; padding: 0 1rem 0 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) { display: block; padding-inline: 1rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label { display: block; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) > .fi-ta-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; column-gap: .75rem; row-gap: .5rem; }
.fi-ta-table-stacked-on-mobile > tfoot, .fi-ta-table-stacked-on-mobile > tfoot > tr { display: block; }
/* Spesifisitas: aturan dasar sel memakai "tr > .fi-ta-cell" (0,2,2); aturan peran memakai ".fi-ta-cell.hp-x"
(0,3,2) sehingga selalu menang atas aturan label (yang memakai :has) karena ditulis sesudahnya. */
.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row {
display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .1rem;
padding: .8rem 1rem;
}
/* Kartu yang bisa dibuka tidak lagi diberi panah kecil di pinggir: tombol "Kelola" (TabelAplikasi) yang menjelaskannya. */
/* Pemisah baris: judul dan "kanan" di baris pertama, sisanya di bawah. */
.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row::before { content: ''; position: static; order: 3; flex-basis: 100%; height: 0; width: auto; background: none; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell { flex: 1 1 100%; min-width: 0; order: 50; padding: 0 !important; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell,
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-group-selection-cell,
.fi-ta-table-stacked-on-mobile .fi-ta-group-checkbox,
.fi-ta-table-stacked-on-mobile > thead .fi-ta-page-checkbox,
.fi-ta-header-toolbar > .fi-ta-actions,
.fi-ta-selection-indicator,
.fi-ta-col-manager-dropdown { display: none !important; }
.fi-ta-table-stacked-on-mobile .fi-ta-cell-content { min-width: 0; }
.fi-ta-table-stacked-on-mobile .fi-ta-cell-content :is(.fi-ta-text, .fi-ta-icon, .fi-ta-color, .fi-ta-image) { padding: 0; }
.fi-ta-table-stacked-on-mobile .fi-ta-cell-content .fi-align-end { text-align: start; justify-content: flex-start; }
/* Kolom tanpa peran: label kecil di kiri, isi di kanan. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-label) {
display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); column-gap: .75rem; align-items: baseline; padding-block: .12rem !important;
}
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label { font-size: .75rem; font-weight: 500; line-height: 1.2rem; color: var(--gray-500); text-align: start; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-cell-label) .fi-ta-text-item:not(.fi-badge) { font-size: .8125rem; }
.fi-ta-table-stacked-on-mobile .fi-ta-cell:has(.fi-ta-image):not(:has(img)) { display: none !important; }
/* Peran kolom (->hp()): label disembunyikan, isi mengikuti letaknya di kartu. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan, .hp-catatan, .hp-status, .hp-avatar) { display: block; padding-block: 0 !important; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-sub, .hp-kanan, .hp-status, .hp-catatan, .hp-avatar) > .fi-ta-cell-label { display: none; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sembunyi { display: none !important; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-judul { order: 1; flex: 1 1 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan { order: 2; flex: 0 0 auto; max-width: 50%; margin-inline-start: auto; text-align: end; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub { order: 4; flex: 0 1 auto; display: flex; align-items: baseline; padding-block: 0 !important; }
/* Status di ujung kanan baris sub; catatan (tanggal, rencana) selalu satu baris penuh di bawahnya. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status { order: 5; flex: 0 0 auto; max-width: 60%; margin-inline-start: auto; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan { order: 6; flex: 1 1 100%; }
/* Sub: beberapa kolom sebaris, dipisah titik tengah, boleh berawalan ("Kamar A1"). */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub ~ .fi-ta-cell.hp-sub::before { content: '·'; margin-inline: .3rem; color: var(--gray-400); }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub[data-hp-awalan]::before { content: attr(data-hp-awalan) '\00a0'; color: var(--gray-500); font-size: .8rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub ~ .fi-ta-cell.hp-sub[data-hp-awalan]::before { content: '·\00a0\00a0' attr(data-hp-awalan) '\00a0'; margin-inline: .3rem 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-sub .fi-badge { min-height: 0; padding: 0; background: none; --tw-ring-shadow: 0 0 #0000; color: var(--gray-500); font-size: .8rem; font-weight: 400; }
/* Catatan dan kanan boleh berawalan kecil ("Jatuh tempo", "Poin"); keterangan kolom sebaris dipisah titik. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) :is(.fi-ta-cell-content, .fi-ta-col, .fi-ta-text, .fi-ta-text > p) { display: inline; width: auto; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-description { font-size: .8rem; color: var(--gray-500); }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-description::before { content: '·'; margin-inline: .3rem; color: var(--gray-400); }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-catatan[data-hp-awalan]::before { content: attr(data-hp-awalan); color: var(--gray-500); font-size: .8rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan[data-hp-awalan] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: .3rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan[data-hp-awalan]::before { content: attr(data-hp-awalan); color: var(--gray-500); font-size: .78rem; font-weight: 500; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status { text-align: end; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status :is(.fi-ta-text, .fi-ta-text-item, .fi-ta-icon) { justify-content: flex-end; text-align: end; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-status .fi-ta-text-description { font-size: .75rem; color: var(--gray-500); }
/* Ukuran huruf per peran. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan) .fi-ta-text-item:not(.fi-badge) { font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--gray-950); }
.dark .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan) .fi-ta-text-item:not(.fi-badge) { color: var(--color-white); }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-sub, .hp-catatan) .fi-ta-text-item:not(.fi-badge) { font-size: .8rem; line-height: 1.35; color: var(--gray-500); }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan :is(.fi-ta-text, .fi-ta-text-item) { justify-content: flex-end; text-align: end; }
/* Kotak pilihan (mis. status presensi) di kanan kartu menyesuaikan lebar sel, tidak melewati tepi layar. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan { min-width: 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-kanan :is(.fi-ta-select, .fi-ta-select .fi-input-wrp, .fi-ta-select select) { max-width: 100%; min-width: 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:is(.hp-judul, .hp-kanan, .hp-catatan) .fi-ta-text-description { font-size: .78rem; color: var(--gray-500); }
/* Avatar (foto atau inisial) di kiri kartu. */
.fi-ta-table-stacked-on-mobile > tbody > tr:has(> .hp-avatar img) { padding-inline-start: 4.1rem; min-height: 4.1rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-avatar { position: absolute; inset-inline-start: 1rem; top: .85rem; width: 2.5rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell.hp-avatar img { width: 2.5rem !important; height: 2.5rem !important; border-radius: 9999px; object-fit: cover; }
/* Kartu daftar ringkas (hp-tanpa-aksi, misalnya Santri): hanya tombol "Kelola" yang tampil, aksi lain lewat halaman detail. */
.fi-ta-table-stacked-on-mobile > tbody > tr.hp-tanpa-aksi > .fi-ta-cell:has(> .fi-ta-actions):not(:has(.aksi-kelola)) { display: none !important; }
.fi-ta-table-stacked-on-mobile > tbody > tr.hp-tanpa-aksi > .fi-ta-cell > .fi-ta-actions > :not(.aksi-kelola) { display: none !important; }
/* Tabel tanpa peran kolom: kolom pertama menjadi judul kartu (tebal, tanpa label). */
.fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) { display: block; order: 1; margin-bottom: .2rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) > .fi-ta-cell-label { display: none; }
.fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) .fi-ta-text-item:not(.fi-badge) { font-size: .9375rem; font-weight: 700; color: var(--gray-950); }
.dark .fi-ta-table-stacked-on-mobile > tbody > tr:not(:has(> .hp-judul)) > .fi-ta-cell:nth-child(1 of .fi-ta-cell:has(> .fi-ta-cell-label):not(:has(.fi-ta-image))) .fi-ta-text-item:not(.fi-badge) { color: var(--color-white); }
/* Tombol baris (Ubah, Hapus, Setujui, ...) menjadi chip kecil di bawah kartu. */
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(> .fi-ta-actions) { order: 90; margin-top: .45rem; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; padding: 0; }
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions > :is(.fi-link, .fi-icon-btn, .fi-btn, .fi-dropdown > .fi-dropdown-trigger > *) {
min-height: 2rem; padding: .25rem .7rem; border-radius: 9999px; background: var(--gray-100); font-size: .78rem;
}
.dark .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-actions > :is(.fi-link, .fi-icon-btn, .fi-btn, .fi-dropdown > .fi-dropdown-trigger > *) { background: rgb(255 255 255 / .06); }
/* Urutan, halaman, dan keadaan kosong yang ringkas. */
.fi-ta-table-stacked-on-mobile > thead .fi-ta-table-stacked-header-cell { padding: .5rem 1rem !important; }
.fi-ta-table-stacked-sorting { display: flex; justify-content: flex-end; gap: .4rem; }
.fi-ta-table-stacked-sorting > label { flex: 0 1 auto; }
.fi-ta-table-stacked-sorting .fi-input-wrp { min-height: 2rem; border-radius: 9999px; box-shadow: none; --tw-ring-shadow: 0 0 0 1px var(--gray-200); background: transparent; }
.fi-ta-table-stacked-sorting :is(select, .fi-input-wrp-label) { font-size: .78rem; padding-block: .2rem; }
.fi-pagination { padding: .75rem 1rem; }
/* Ringkasan "Menampilkan 1 sampai 10 dari 66" tetap tampil (kecil) agar jumlah data diketahui di HP. */
.fi-pagination .fi-pagination-overview { display: block !important; font-size: .78rem; color: var(--gray-500); }
/* ---------- Kepala daftar: cari dan filter menyatu dengan kepala hijau ---------- */
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn {
background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-radius: 0; overflow: visible;
}
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn > .fi-ta-main > .fi-ta-header-ctn {
margin: calc(-1.5rem - 1px) -1rem 0; padding: calc(.1rem + 1px) 1rem 1rem; border: 0; background: var(--kepala-2); border-radius: 0 0 1.5rem 1.5rem;
}
/* Kepala halaman daftar berwarna rata agar menyambung tanpa garis dengan kotak cari di bawahnya. */
.fi-page:has(.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta) > .fi-page-header-main-ctn > .fi-header { padding-bottom: .9rem; }
.fi-page:has(.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta) > .fi-page-header-main-ctn > .fi-header::before { border-radius: 0; background: var(--kepala-2); }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-header-toolbar { padding: 0; border: 0; gap: .5rem; }
/* Judul dan keterangan tabel yang ikut masuk kepala hijau harus terbaca (teks putih). */
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn > .fi-ta-main > .fi-ta-header-ctn .fi-ta-header { padding: 0 0 .75rem; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) > .fi-sc-component > .fi-ta > .fi-ta-ctn > .fi-ta-main > .fi-ta-header-ctn :is(.fi-ta-header-heading, .fi-ta-header-description) { color: rgb(255 255 255 / .92); }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-header-toolbar > div:last-child { width: 100%; gap: .5rem; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field { flex: 1; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field .fi-input-wrp { min-height: 2.75rem; border-radius: .9rem; background: #fff; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-search-field input { font-size: 1rem; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown { margin-inline-start: auto; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown > .fi-dropdown-trigger > .fi-icon-btn {
width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: var(--kuning-logo); color: #2a4207;
}
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown > .fi-dropdown-trigger > .fi-icon-btn { position: relative; overflow: visible; }
/* Angka jumlah filter di pojok dalam tombol kuning supaya tidak terpotong tepi layar. */
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn { top: .15rem; inset-inline-start: auto; inset-inline-end: .15rem; transform: none; translate: 0 0; margin: 0; }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-filters-dropdown .fi-icon-btn-badge-ctn .fi-badge { background: var(--danger-600); color: #fff; --tw-ring-shadow: 0 0 #0000; }
/* Daftar di bawah kepala menjadi satu kartu putih. */
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-content-ctn {
margin-top: .6rem; border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); overflow: hidden; border: 0;
}
.dark .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-ta-content-ctn { background: var(--gray-900); }
.fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-pagination { margin-top: .6rem; border-radius: 1.1rem; background: var(--color-white); border: 0; }
.dark .fi-page-content > .fi-sc > .fi-grid-col:nth-child(1 of :not(.fi-hidden)) .fi-pagination { background: var(--gray-900); }
/* Filter aktif: chip yang melipat ke baris berikutnya (label panjang tidak terpotong di tepi layar). */
.fi-ta-filter-indicators { display: flex; align-items: flex-start; gap: .4rem; padding: .7rem 0 0; background: transparent; border: 0; }
.fi-ta-filter-indicators > div { display: flex; min-width: 0; flex: 1; }
.fi-ta-filter-indicators-label { display: none; }
.fi-ta-filter-indicators-badges-ctn { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.fi-ta-filter-indicators-badges-ctn .fi-badge {
flex: 0 1 auto; max-width: 100%; height: auto; min-height: 1.9rem; padding: .25rem .75rem; border-radius: 1rem; font-size: .78rem; font-weight: 600;
white-space: normal; text-align: start;
background: var(--beranda-muda); color: var(--primary-800); --tw-ring-shadow: 0 0 0 1.5px color-mix(in oklab, var(--primary-600) 35%, transparent);
}
.fi-ta-filter-indicators-badges-ctn .fi-badge :is(.fi-badge-label-ctn, .fi-badge-label) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.dark .fi-ta-filter-indicators-badges-ctn .fi-badge { color: var(--primary-200); }
.fi-ta-ctn:not(:has(.fi-ta-header-ctn)) .fi-ta-filter-indicators { padding-inline: 1rem; }
/* Deretan yang masih bisa digeser ke kanan (atribut data-geser dipasang skrip tema.blade.php) diberi
gradasi di tepi kanan sebagai petunjuk; hilang saat sudah di ujung. */
.fi-tabs[data-geser] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.fi-resource-view-record-page .fi-header-actions-ctn { position: relative; }
.fi-resource-view-record-page .fi-header-actions-ctn[data-geser]::after {
content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.75rem; pointer-events: none; border-radius: 0 1.1rem 1.1rem 0;
background: linear-gradient(to right, transparent, var(--color-white) 70%);
}
.dark .fi-resource-view-record-page .fi-header-actions-ctn[data-geser]::after { background: linear-gradient(to right, transparent, var(--gray-900) 70%); }
/* ---------- Tombol "Buat ..." melayang di kanan bawah ---------- */
.fi-page .fi-header:has(.aksi-melayang, .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"])) { z-index: 26; }
.fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang),
.fi-page-content .fi-ta-header .fi-btn.aksi-melayang {
position: fixed; inset-inline-end: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); z-index: 26;
height: 3.25rem; padding-inline: 1rem 1.25rem; gap: .45rem; border-radius: 1rem;
background: var(--primary-600) !important; color: #fff !important; font-size: .9375rem; font-weight: 700;
box-shadow: 0 8px 20px color-mix(in oklab, var(--primary-700) 40%, transparent);
transition: transform .25s, opacity .25s;
}
/* Saat halaman panjang digulir sampai dasar, tombol melayang menyingkir agar baris terakhir dan paginasi terbaca. */
html.di-dasar .fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang),
html.di-dasar .fi-page-content .fi-ta-header .fi-btn.aksi-melayang { transform: translateY(calc(100% + 5rem)); opacity: 0; pointer-events: none; }
.fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang) .fi-icon,
.fi-page-content .fi-ta-header .fi-btn.aksi-melayang .fi-icon { color: #fff !important; }
/* Kepala tabel yang hanya berisi tombol melayang tidak perlu memakan tempat. */
.fi-ta-header:not(:has(.fi-ta-header-heading)):has(.aksi-melayang) { padding: 0; min-height: 0; border: 0; }
.fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"]):not(:has(.fi-icon))::before {
content: ''; width: 1.35rem; height: 1.35rem; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Tanpa bilah bawah (portal tanpa navigasi), tombol melayang turun. */
:root:not(:has(.nav-bawah)) :is(.fi-page .fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang), .fi-page-content .fi-ta-header .fi-btn.aksi-melayang) { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
/* Isi daftar tidak tertutup tombol melayang. */
.fi-page:has(.fi-header-actions-ctn :is(a.fi-btn[href$="/create"], .fi-btn[wire\:click^="mountAction('create'"], .fi-btn.aksi-melayang), .fi-ta-header .aksi-melayang) .fi-page-content { padding-bottom: 4.5rem; }
/* ---------- Lembar dari bawah: menu tombol, filter, dan semua jendela aksi ---------- */
/* Kepala halaman membuat konteks tumpukan sendiri; saat menunya terbuka (Filament menandai tombolnya aria-expanded)
ia diangkat di atas bilah bawah. Jangan memeriksa atribut style di dalam :has(): setiap animasi mengubah style dan
memaksa HP menyusun ulang seluruh halaman (membuka menu Super Admin sampai macet belasan detik). */
.fi-page .fi-header:has(.fi-dropdown-trigger [aria-expanded="true"]) { z-index: 60; }
html body .fi-dropdown-panel.fi-dropdown-panel {
position: fixed !important; inset: auto 0 0 0 !important; width: 100% !important; max-height: 82dvh;
z-index: 50 !important; overflow-y: auto; border-radius: 1.4rem 1.4rem 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px);
transform: none !important; translate: none !important; scale: none !important;
box-shadow: 0 0 0 100vmax rgb(10 20 0 / .45) !important;
}
.fi-dropdown-panel::before { content: ''; display: block; width: 2.5rem; height: .25rem; margin: .6rem auto .25rem; border-radius: 9999px; background: var(--gray-300); }
.dark .fi-dropdown-panel::before { background: var(--gray-600); }
.fi-dropdown-panel .fi-dropdown-list-item { min-height: 3rem; padding-inline: 1.25rem; font-size: .9375rem; }
.fi-ta-filters { padding: .5rem 1.25rem 1.25rem; }
.fi-ta-filters-heading { font-size: 1.125rem; font-weight: 700; }
.fi-ta-filters-actions-ctn { position: sticky; bottom: 0; margin-inline: -1.25rem; padding: .75rem 1.25rem; background: inherit; }
.fi-ta-filters-actions-ctn .fi-btn { width: 100%; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }
.fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn { padding: 0 !important; grid-template-rows: 1fr auto !important; }
.fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
width: 100%; max-width: none !important; height: auto !important; max-height: 92dvh; margin: 0 !important; overflow-y: auto;
border-radius: 1.4rem 1.4rem 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window::before { content: ''; display: block; flex-shrink: 0; width: 2.5rem; height: .25rem; margin: .6rem auto 0; border-radius: 9999px; background: var(--gray-300); }
.dark .fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window::before { background: var(--gray-600); }
.fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:is(.fi-transition-enter-start, .fi-transition-leave-end) { scale: 1 !important; opacity: 1 !important; translate: 0 100% !important; }
.fi-modal:not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window:is(.fi-transition-enter-end, .fi-transition-leave-start) { scale: 1 !important; translate: 0 0 !important; }
.fi-modal:not(.fi-width-screen) .fi-modal-header { padding-top: .9rem; }
.fi-modal:not(.fi-width-screen) .fi-modal-heading { font-size: 1.125rem; font-weight: 700; }
.fi-modal:not(.fi-width-screen) .fi-modal-close-btn { top: 1.3rem !important; background: var(--gray-100); border-radius: 9999px; }
.dark .fi-modal:not(.fi-width-screen) .fi-modal-close-btn { background: var(--gray-800); }
.fi-modal:not(.fi-width-screen) .fi-modal-footer { padding-bottom: 1.1rem; }
.fi-modal:not(.fi-width-screen) .fi-modal-footer-actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: .5rem; width: 100%; }
.fi-modal:not(.fi-width-screen) .fi-modal-footer-actions > * { flex: 1 1 7rem; }
.fi-modal:not(.fi-width-screen) .fi-modal-footer-actions > :first-child { flex-grow: 1.7; }
.fi-modal:not(.fi-width-screen) .fi-modal-footer-actions .fi-btn { width: 100%; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }
}
@media (max-width: 63.99rem) {
/* ---------- Halaman detail: deret tombol bulat di kartu putih yang menumpang di tepi kepala hijau ---------- */
.fi-resource-view-record-page .fi-header { padding-bottom: 0; }
.fi-resource-view-record-page .fi-header-actions-ctn {
margin: .35rem 0 -2.75rem; padding: .8rem .2rem .7rem; overflow-x: auto; scrollbar-width: none;
border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang);
}
.dark .fi-resource-view-record-page .fi-header-actions-ctn { background: var(--gray-900); }
.fi-resource-view-record-page .fi-header-actions-ctn::-webkit-scrollbar { display: none; }
.fi-resource-view-record-page:has(.fi-header-actions-ctn) .fi-page-header-main-ctn { row-gap: 4.1rem; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-ac { display: flex; flex-wrap: nowrap; gap: 0; min-width: 100%; width: max-content; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-ac > :is(.fi-btn, .fi-dropdown) { flex: 1 0 4.3rem; max-width: 5.5rem; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-ac > .fi-dropdown > .fi-dropdown-trigger { width: 100%; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-btn {
display: flex !important; flex-direction: column; align-items: center; gap: .35rem; width: 100%; height: auto; min-height: 0; padding: 0 .15rem;
background: transparent !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000;
color: var(--gray-700) !important; font-size: .75rem; font-weight: 600; line-height: 1.15; white-space: normal; text-align: center;
}
.dark .fi-resource-view-record-page .fi-header-actions-ctn .fi-btn { color: var(--gray-200) !important; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-btn > .fi-icon {
width: 2.75rem !important; height: 2.75rem !important; padding: .68rem; border-radius: .95rem;
background: color-mix(in oklab, var(--color-500, var(--primary-600)) 14%, transparent); color: var(--color-600, var(--primary-600)) !important;
}
.fi-resource-view-record-page .fi-header-actions-ctn .fi-btn:not(:has(> .fi-icon))::before {
content: ''; width: 2.75rem; height: 2.75rem; border-radius: .95rem;
background: color-mix(in oklab, var(--primary-600) 14%, transparent) url("data:image/svg+xml;utf8,") center / 1.3rem no-repeat;
}
/* Menu ⋮ (kumpulan tindakan) ikut menjadi tombol bulat berlabel "Lainnya"; warna putih bawaan kepala hijau tidak
terlihat di kartu putih. */
.fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn {
display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; height: auto; padding: 0 .15rem;
background: transparent; color: var(--gray-700) !important; font-size: .72rem; font-weight: 600; line-height: 1.15;
}
.dark .fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn { color: var(--gray-200) !important; }
.fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn > .fi-icon {
width: 2.75rem !important; height: 2.75rem !important; padding: .68rem; border-radius: .95rem;
background: color-mix(in oklab, var(--gray-500) 14%, transparent); color: var(--gray-600);
}
.fi-resource-view-record-page .fi-header-actions-ctn .fi-dropdown-trigger > .fi-icon-btn::after { content: 'Lainnya'; }
/* Tab (data terkait di halaman detail, tab formulir) menjadi deret chip yang bisa digeser. */
.fi-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: .4rem; margin-inline: 0; padding: .15rem 0 .35rem; background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; border-radius: 0; }
.fi-tabs::-webkit-scrollbar { display: none; }
.fi-tabs-item { flex-shrink: 0; padding: .45rem .95rem !important; border-radius: 9999px; background: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--gray-200); font-size: .8125rem; }
.dark .fi-tabs-item { background: var(--gray-900); box-shadow: inset 0 0 0 1.5px var(--gray-700); }
.fi-tabs-item.fi-active { background: var(--primary-600); box-shadow: none; }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: #fff; }
/* Isi halaman detail: label kecil di kiri, isi rata kanan, dipisah garis tipis. */
.fi-section-content:has(> .fi-grid-col > .fi-sc-component > .fi-in-entry) { row-gap: 0 !important; }
.fi-section-content > .fi-grid-col + .fi-grid-col > .fi-sc-component > .fi-in-entry { border-top: 1px solid var(--gray-100); }
.dark .fi-section-content > .fi-grid-col + .fi-grid-col > .fi-sc-component > .fi-in-entry { border-color: rgb(255 255 255 / .06); }
.fi-section-content > .fi-grid-col > .fi-sc-component > .fi-in-entry { padding-block: .6rem; }
.fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col {
justify-self: end; text-align: end;
}
.fi-in-entry:not(.fi-in-entry-has-inline-label):has(> .fi-in-entry-label-col):has(> .fi-in-entry-content-col :is(.fi-in-text, .fi-in-icon, .fi-in-color, .fi-in-placeholder)):not(:has(.fi-in-repeatable, .fi-in-table-repeatable, .fi-in-image, .fi-in-key-value)) > .fi-in-entry-content-col :is(.fi-in-text, .fi-in-text-item, .fi-in-affixes) { justify-content: flex-end; text-align: end; }
.fi-in-entry .fi-in-entry-label { font-size: .8125rem; font-weight: 500; color: var(--gray-500); }
.fi-in-entry .fi-in-text-item:not(.fi-badge) { font-size: .875rem; font-weight: 600; }
.fi-section-header { padding: .85rem 1.1rem; }
.fi-section-content-ctn > .fi-section-content { padding: .35rem 1.1rem .5rem; }
.fi-section-header-heading { font-size: .975rem; font-weight: 700; }
/* ---------- Formulir isi/ubah: kepala ringkas, tanpa bilah atas dan bilah bawah, tombol Simpan menempel ---------- */
:root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) :is(.fi-topbar-ctn, .nav-bawah) { display: none !important; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) > .fi-page-header-main-ctn { padding-top: 0; row-gap: 1rem; }
:root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-main { padding-top: 0; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header {
position: sticky; top: 0; z-index: 25; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem;
min-height: calc(3.5rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 0 0;
}
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header::before { inset: 0 -1rem; border-radius: 0; background: var(--kepala-2); }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header > div:first-child { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs { margin: 0 0 0 -.35rem; flex-shrink: 0; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali::before { display: none; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali a.fi-breadcrumbs-item-label {
display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9999px; font-size: 0; background: rgb(255 255 255 / .14);
}
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header .fi-breadcrumbs-item.kembali a.fi-breadcrumbs-item-label::before {
content: ''; width: 1.3rem; height: 1.3rem; background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-heading { font-size: 1.05rem !important; line-height: 1.3 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn { margin: 0; padding: 0; flex-shrink: 0; overflow: visible; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn .fi-ac { gap: .35rem; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-header-actions-ctn .fi-btn { min-height: 2.1rem; padding: .3rem .7rem; font-size: .78rem; border-radius: 9999px; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-page-main { margin-top: var(--tinggi-lompat, 0px); }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-section { scroll-margin-top: calc(3.5rem + var(--tinggi-lompat, 0px) + .75rem); }
:root:has(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-main { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions.fi-sticky .fi-ac {
inset-inline: 0; bottom: 0 !important; width: 100%; margin: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: row-reverse; gap: .5rem; border-radius: 0; box-shadow: 0 -6px 18px rgb(17 24 39 / .08);
}
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-ac > .fi-btn { flex: 1 1 0; min-height: 3rem; border-radius: .9rem; font-size: .9375rem; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-ac > .fi-btn[type="submit"] { flex-grow: 1.8; }
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-sc-actions .fi-btn[wire\:click*="createAnother"] { display: none; }
/* Chip lompat ke bagian formulir (dibuat skrip di tema.blade.php), menempel di bawah kepala. */
.lompat-bagian {
position: fixed; inset-inline: 0; top: calc(3.5rem + env(safe-area-inset-top, 0px)); z-index: 24;
display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 1rem;
background: var(--color-white); box-shadow: 0 4px 12px rgb(17 24 39 / .06);
}
.dark .lompat-bagian { background: var(--gray-900); }
.lompat-bagian::-webkit-scrollbar { display: none; }
.lompat-bagian button { flex-shrink: 0; padding: .4rem .9rem; border: 0; border-radius: 9999px; background: var(--gray-100); color: var(--gray-700); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.dark .lompat-bagian button { background: var(--gray-800); color: var(--gray-200); }
.lompat-bagian button.aktif { background: var(--primary-600); color: #fff; }
}
.lompat-bagian { display: none; }
@media (max-width: 63.99rem) { .lompat-bagian { display: flex; } }
/* ---------- Kepala profil (foto/inisial dan status) dan ringkasan angka di kepala halaman ---------- */
.kepala-profil { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.kepala-profil img { width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px var(--kuning-logo); background: #fff; }
.kepala-status { display: inline-block; margin-inline-start: .35rem; padding: .05rem .55rem; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .16); color: #fff; font-size: .75rem; font-weight: 600; vertical-align: .05rem; }
/* Hanya di kepala halaman (daftar tagihan); kartu angka dasbor memakai kelas yang sama untuk ikon dan labelnya. */
.fi-header .ringkasan-kepala { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.fi-header .ringkasan-kepala > span { display: flex; flex-direction: column; min-width: 8.5rem; padding: .5rem .8rem; border-radius: .85rem; background: rgb(255 255 255 / .14); color: #fff; line-height: 1.25; }
.fi-header .ringkasan-kepala small { font-size: .75rem; opacity: .85; }
.fi-header .ringkasan-kepala b { font-size: 1.15rem; font-weight: 800; }
@media (max-width: 63.99rem) {
.fi-resource-view-record-page .fi-header-subheading { font-size: .8rem; margin-top: .25rem; }
.fi-resource-view-record-page .fi-header:has(.kepala-profil) .fi-header-heading { font-size: 1.2rem !important; }
.fi-header:has(.kepala-profil) .fi-header-subheading { padding-inline-start: 4rem; margin-top: -.6rem; }
.fi-header .ringkasan-kepala > span { flex: 1 1 0; }
}
/* ---------- Tagihan portal wali: kartu total dan rekening di kepala halaman ---------- */
.ringkas-wali { display: grid; gap: .6rem; margin-top: .6rem; max-width: 32rem; color: var(--gray-950); }
.ringkas-wali small { display: block; font-size: .78rem; color: var(--gray-500); }
.ringkas-wali-kartu { display: block; padding: .9rem 1rem; border-radius: 1.1rem; background: var(--color-white); box-shadow: var(--beranda-bayang); }
.ringkas-wali-kartu .ringkas-wali-nama { margin-bottom: .2rem; font-weight: 700; color: var(--primary-700); }
.ringkas-wali-kartu b { display: block; margin: .1rem 0; font-size: 1.6rem; line-height: 1.2; font-weight: 800; }
.ringkas-wali-tombol { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; margin-top: .75rem; }
.ringkas-wali-tombol a { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .4rem .75rem; border-radius: .8rem; background: var(--beranda-muda); color: var(--primary-800); font-size: .85rem; font-weight: 700; text-decoration: none; }
.ringkas-wali-tombol a.utama { background: var(--primary-600); color: #fff; }
.ringkas-wali-rekening { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-radius: 1.1rem; border: 1.5px dashed color-mix(in oklab, var(--primary-600) 45%, white); background: color-mix(in oklab, var(--primary-600) 5%, white); }
.ringkas-wali-rekening b { display: block; font-size: .9rem; line-height: 1.35; }
.ringkas-wali-rekening button { flex-shrink: 0; padding: .45rem .8rem; border: 0; border-radius: .7rem; background: var(--beranda-muda); color: var(--primary-800); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.ringkas-wali-catatan { color: rgb(255 255 255 / .85) !important; }
.ringkas-wali-riwayat { justify-self: start; display: inline-block; padding: .4rem 0; margin: -.4rem 0; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.dark .ringkas-wali { color: var(--color-white); }
.dark .ringkas-wali-kartu { background: var(--gray-900); }
.dark .ringkas-wali-rekening { background: var(--gray-900); }
.dark :is(.ringkas-wali-tombol a:not(.utama), .ringkas-wali-rekening button) { color: var(--primary-200); }
/* ---------- Halaman masuk/daftar: kepala hijau seperti halaman awal aplikasi, formulir di kartu putih ---------- */
.kepala-masuk { display: none; }
.pilih-akun-lain { margin: 1rem 0 0; text-align: center; font-size: .8125rem; color: var(--gray-500); }
.pilih-akun-lain a { display: inline-block; padding: .5rem .55rem; margin: -.5rem -.55rem; border-radius: .5rem; color: var(--primary-600); font-weight: 700; text-decoration: none; }
.dark .pilih-akun-lain a { color: var(--primary-400); }
@media (max-width: 63.99rem) {
.fi-simple-layout:has(.kepala-masuk) { background: var(--gray-50); }
.dark .fi-simple-layout:has(.kepala-masuk) { background: var(--gray-950); }
.kepala-masuk {
display: block; position: relative; isolation: isolate; align-self: stretch; width: 100%; height: 15.5rem; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem 0; overflow: hidden;
text-align: center; color: #fff; background: var(--kepala-2); border-radius: 0 0 50% 50% / 0 0 1.75rem 1.75rem;
}
.kepala-masuk::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .09;
background-image: url("data:image/svg+xml;utf8,"); }
.kepala-masuk-kembali { position: absolute; inset-inline-start: .85rem; top: calc(.85rem + env(safe-area-inset-top, 0px)); display: inline-flex; align-items: center; gap: .2rem; padding: .35rem .6rem .35rem .35rem; border-radius: 9999px; background: rgb(255 255 255 / .12); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; }
.kepala-masuk-kembali svg { width: 1.1rem; height: 1.1rem; }
.kepala-masuk-mihrab { position: relative; width: 6.25rem; height: 7rem; margin: 2.1rem auto 0; }
.kepala-masuk-mihrab svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kepala-masuk-mihrab img { position: absolute; left: .95rem; bottom: .6rem; width: 4.35rem; height: 4.35rem; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }
.kepala-masuk-judul { margin: .55rem 0 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.kepala-masuk-pesantren { margin: .1rem 0 0; font-size: .8125rem; opacity: .85; }
.fi-simple-layout:has(.kepala-masuk) .fi-simple-main {
position: relative; margin-top: -2rem !important; border-top: 0 !important; border-radius: 1.4rem !important; padding-block: 1.5rem !important;
box-shadow: 0 12px 30px rgb(17 24 39 / .12); --tw-ring-shadow: 0 0 #0000;
}
.fi-simple-layout:has(.kepala-masuk) .fi-simple-header .fi-logo { display: none; }
.fi-simple-layout:has(.kepala-masuk) .fi-simple-header-heading { font-size: 1.25rem; }
.fi-simple-main .fi-input-wrp { min-height: 3rem; border-radius: .85rem; }
.fi-simple-main .fi-input { font-size: 1rem; }
.fi-simple-main .fi-sc-form .fi-ac .fi-btn[type="submit"], .fi-simple-main form > .fi-btn[type="submit"] { min-height: 3rem; border-radius: .9rem; font-size: 1rem; font-weight: 700; }
/* "Ingat saya" sebagai sakelar. */
.fi-simple-main .fi-checkbox-input { appearance: none; -webkit-appearance: none; position: relative; width: 2.3rem; height: 1.35rem; border-radius: 9999px; background: var(--gray-300); border: 0; box-shadow: none; cursor: pointer; transition: background-color .15s; }
.fi-simple-main .fi-checkbox-input::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: .95rem; height: .95rem; border-radius: 9999px; background: #fff; transition: transform .15s; }
.fi-simple-main .fi-checkbox-input:checked { background: var(--primary-600); background-image: none; }
.fi-simple-main .fi-checkbox-input:checked::after { transform: translateX(.95rem); }
}
/* Lebar menu bawaan Filament memakai !important di lapisan "components"; hanya lapisan lebih awal yang bisa
menimpanya, jadi aturan ini ditaruh di lapisan "base". */
@layer base {
@media (max-width: 63.99rem) {
.fi-dropdown-panel { max-width: none !important; }
}
}