/* =============================================================================
 *  perbaikan-tampilan.css — PERBAIKAN GAYA HASIL PEMERIKSAAN MENYELURUH
 *
 *  Kumpulan perbaikan tombol/tata letak yang kurang jelas di HP, tablet, dan
 *  desktop. Hanya menyempurnakan tampilan; tidak ada markup atau fitur yang
 *  diubah. Dimuat setelah tailwind.css (sebelum ringan.css).
 * ========================================================================== */

/* ---- Tablet potret (768–1023px): tata letak HP, isi selebar layar -----------
   Seluruh komponen halaman memakai titik henti md (768px) sebagai "layar lebar"
   (filter berdampingan, grid 2–3 kolom), padahal pada lebar ini sidebar desktop
   menyita 264px sehingga area isi tinggal ±500px: filter Data Santri & Akun Ortu
   meluap ke samping dan tombol "Simpan Data Absensi" terlipat tiga baris.
   Di rentang ini aplikasi kini memakai header atas + navigasi bawah seperti di
   HP (semua menu tetap ada di "Lainnya"); sidebar tampil mulai 1024px. */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
    #app-shell { flex-direction: column; }
    #app-shell > aside { display: none !important; }
    #app-shell .app-topbar { display: flex !important; }
    #app-shell nav[aria-label="Navigasi Bawah Mobile"] { display: block !important; }
    #app-shell nav[aria-label="Navigasi Bawah Mobile"] .nav-shell { max-width: 560px; margin-left: auto; margin-right: auto; }
    #app-shell #fab-absen:not(.hidden) { display: flex !important; }
    #app-shell #content-area { padding: 24px 24px 7.5rem; }
}

/* ---- Data Santri: grid kartu mengikuti lebar AREA ISI, bukan lebar layar ----
   Dulu 3 kolom dipaksa mulai lebar layar 1024px. Dengan sidebar terbuka, tiap
   kartu tinggal ±230px: nama santri terpotong jadi satu huruf karena tertimpa
   tiga tombol aksi, dan tombol "Bank Data" terlipat dua baris. Kini setiap
   kartu minimal 290px; jumlah kolom menyesuaikan ruang yang benar-benar ada. */
#student-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
#student-list-grid .pbtn,
#student-list-grid .pbadge { white-space: nowrap; }

/* ---- Tombol ikon bulat/persegi tidak lagi lonjong --------------------------
   Aturan lama `button, a, select, input { min-height: 44px }` (index.html) dan
   aturan layar sentuh di aurora.css/premium.css meregangkan SEMUA tombol. Tombol
   ikon yang ukurannya sudah ditetapkan (mis. w-8 h-8 rounded-full: edit, nonaktif,
   hapus, kamera foto) jadi melar ke atas berbentuk lonjong — lencana kamera bahkan
   menutupi inisial di avatar santri. Tinggi yang sudah ditetapkan kini dihormati
   (tetap ≥ 24px, memenuhi WCAG 2.2 AA untuk ukuran target); tombol lain tetap
   mendapat target sentuh 44px. */
:is(button, a, select, input, [role="button"]):is(.h-5, .h-6, .h-7, .h-8, .h-9, .h-10, .h-11) { min-height: 0; }

/* ---- Header HP: judul tidak terlipat, lencana notifikasi tidak terpotong ---
   Di layar sentuh keempat tombol ikon header diperbesar jadi 44px, sehingga sisa
   ruang judul tinggal ±100px: "SISTEM PENGASUHAN" terlipat dua baris menempel ke
   tepi atas dan lencana angka notifikasi terpotong di luar layar. Tombol header
   dibuat 40px (tetap nyaman disentuh), label kecil dipotong rapi dengan elipsis. */
.app-topbar .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.app-topbar .min-w-0 > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .badge-count { top: -3px; right: -3px; }
/* ---- Label kartu statistik tidak terpotong ---------------------------------
   Di HP (2 kolom) label seperti "ROMBEL LENGKAP" / "SESI TERLEWAT" terpotong
   menjadi "ROMBEL LEN…". Label kini boleh turun ke baris kedua. */
.stat-tile .eyebrow.truncate,
/* Pola kartu ringkasan kecil (Paket, Pembinaan, dll.): label 11px di atas angka. */
.min-w-0 > p.truncate:first-child:has(+ p.font-bold) {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.3; overflow-wrap: anywhere;
}

/* ---- Form absensi: rel rekap kembali melayang & bisa digeser ---------------
   Rel rekap (Hadir/Izin/Sakit/Terlambat/Alpa) dirancang menempel di atas saat
   daftar santri digulir. Kelas .shadow-elegant/.corak-kartu yang ditempelkan
   belakangan menimpanya jadi position: relative, sehingga rekap ikut tergulir
   hilang. Posisi menempel dan geser-horizontalnya dipulihkan. */
html .recap-rail { position: sticky; top: -16px; z-index: 12; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
/* Menempel rapat ke tepi atas area isi (menutup celah padding p-4 / md:p-7). */
@media (min-width: 768px) { html .recap-rail { top: -28px; } }
@media screen and (min-width: 768px) and (max-width: 1023.98px) { html .recap-rail { top: -24px; } }

/* ---- Pengaturan (dan rel tab sejenis): label tab tidak lagi terjepit ---------
   Tombol tab memakai .btn-ripple (overflow: hidden) sehingga boleh menyusut di
   bawah lebar teksnya: di HP labelnya tinggal "Pe | Riw | Ider | Ka | Dat | Lo".
   Lebar tab kini dikunci sesuai labelnya; relnya sendiri sudah bisa digeser. */
.tabs-rail > .tab-pill { flex-shrink: 0; }
.tabs-rail { scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs-rail::-webkit-scrollbar { display: none; }

/* ---- Kepala halaman v9 (Tahfidz, Komunikasi, SDM, …): tombol aksi tidak
   keluar layar. Wadah tombolnya dilarang menyusut (flex-shrink-0) sehingga di HP
   tombol ketiga ("Cetak Rekap") terpotong di tepi kanan. Kini tombol turun ke
   baris berikutnya bila ruangnya tidak cukup. */
.v9-head > .flex-shrink-0 { flex-shrink: 1; min-width: 0; max-width: 100%; }

/* ---- Kartu → Susunan Lembar --------------------------------------------------
   1) Sakelar "Garis bantu potong" rusak: aturan judul grup `.v12-kendali-grup >
      label` (kapital, display:block) ikut mengenai label sakelar, jalur sakelar
      runtuh sehingga hanya bulatan putih yang tersisa — menimpa teks
      "DITAMPILKAN". Label sakelar dikembalikan ke tata letaknya sendiri.
   2) Pilihan "Sisi yang dicetak" lebih lebar dari kolomnya: "Belakang" terpotong
      dan "Depan & belakang" terlipat. Tombolnya kini boleh turun ke baris kedua. */
.v12-kendali-grup > label.v12-sakelar {
    display: flex; align-items: flex-start; margin-bottom: 0;
    font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit;
}
.v12-kendali-grup > .v12-saring { display: flex; flex-wrap: wrap; max-width: 100%; }
.v12-kendali-grup > .v12-saring > button { flex: 1 1 auto; white-space: nowrap; }

/* ---- Kalender: filter kelas & rombel rapi di HP -----------------------------
   Dua pilihan selebar 150px tidak muat berdampingan sehingga tersusun miring
   satu-satu dan teks "Semua rombel" terpotong. Di layar kecil keduanya kini
   berbagi satu baris penuh, masing-masing setengah lebar. */
@media (max-width: 640px) {
    div:has(> select[onchange^="FiturPlus.kalSet"]) {
        display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 100%;
    }
    select[onchange^="FiturPlus.kalSet"] { max-width: none !important; width: 100%; min-width: 0; }
}

/* ---- Dasbor: sapaan memuat nama pengguna utuh -------------------------------
   "Ahlan wa Sahlan, Ustadz Ahmad (Wali 7 IAT)" dulu dipotong jadi
   "Ahlan wa Sahlan, …" sehingga nama pengguna tidak terlihat. Kini boleh dua baris. */
h2.truncate.md\:text-\[1\.7rem\] {
    white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance;
}

/* HP sempit: nama aplikasi sudah diwakili logo — cukup judul halaman saja. */
@media (max-width: 400px) {
    .app-topbar .min-w-0 > p { display: none; }
    .app-topbar #mobile-header-title { font-size: 16px; }
}