/*
 * Penambal utilitas Tailwind yang belum masuk build karena server tak punya Node
 * (build terakhir 30 Jun; banyak blade berubah setelahnya). STOPGAP.
 * Solusi durable: jalankan `npm run build` di mesin dev lalu deploy public/build,
 * setelah itu file ini + link-nya di layout boleh dihapus.
 */

/* ---- gambar lambang (logo yayasan/sekolah/asrama) ---- */
.object-contain{object-fit:contain}
.h-6{height:1.5rem}

/* ---- max-height (kontainer scroll modal/daftar) ---- */
.max-h-32{max-height:8rem}
.max-h-40{max-height:10rem}
.max-h-52{max-height:13rem}
.max-h-56{max-height:14rem}
.max-h-72{max-height:18rem}
.max-h-\[45vh\]{max-height:45vh}
.max-h-\[50vh\]{max-height:50vh}
.max-h-\[55vh\]{max-height:55vh}
.max-h-\[60vh\]{max-height:60vh}
.max-h-\[65vh\]{max-height:65vh}
.max-h-\[85vh\]{max-height:85vh}
/* wajib agar anak flex boleh menyusut & scroll sendiri (kolom daftar dalam modal) */
.min-h-0{min-height:0}

/* ---- opacity & warna teks (toggle status pengguna) ---- */
.opacity-60{opacity:.6}
.text-success{color:var(--color-success)}

/* ---- width / height ---- */
.w-6{width:1.5rem}
.w-64{width:16rem}
.w-72{width:18rem}
.h-20{height:5rem}
.h-24{height:6rem}
.max-w-xs{max-width:20rem}
.max-w-5xl{max-width:64rem}
.italic{font-style:italic}
.align-top{vertical-align:top}
/* daisyUI btn warna (success/warning/info) — belum masuk build, ikut pola btn-error */
.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content);--btn-soft-bg:initial}
.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content);--btn-soft-bg:initial}
.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content);--btn-soft-bg:initial}
/* daisyUI table-sm (aproksimasi; belum masuk build) */
.table-sm :where(th,td){padding:.5rem .75rem;font-size:.875rem}
.min-w-\[10rem\]{min-width:10rem}
.min-w-\[12rem\]{min-width:12rem}
.min-w-\[200px\]{min-width:200px}
.min-w-\[220px\]{min-width:220px}

/* ---- grid & spacing ---- */
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.col-span-3{grid-column:span 3 / span 3}
.gap-x-3{column-gap:.75rem}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){margin-top:.125rem}
.space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:.25rem}
.space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:.5rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:.75rem}
.space-x-2 > :not([hidden]) ~ :not([hidden]){margin-left:.5rem}

@media (min-width:40rem){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:col-start-4{grid-column-start:4}
}
@media (min-width:64rem){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2 / span 2}
}

/* ---- transform (hover) ----
   CATATAN: .-translate-x-1/2 dan .-translate-y-1/2 SENGAJA tidak ditambal di sini.
   Keduanya sudah ada di build Tailwind (memakai properti `translate:`). Kalau ditambal
   ulang dengan `transform:`, kedua properti itu dikomposisikan oleh browser sehingga
   pergeseran jadi dua kali lipat (-100%) — inilah yang bikin ikon search melenceng. */
.scale-110{transform:scale(1.1)}

/* ---- cetak: sembunyikan kerangka aplikasi (sidebar/topbar), tampilkan konten penuh ---- */
@media print{
  .print\:hidden{display:none!important}
  .print\:block{display:block!important}
  .print\:grid{display:grid!important}
  /* Wadah geser tak boleh memotong isi saat dicetak — kertas tak bisa di-scroll. */
  .overflow-x-auto{overflow:visible!important}
  nav.bg-inverse-surface,header.bg-surface{display:none!important}
  .lg\:ml-\[260px\]{margin-left:0!important}
  main{padding:0!important;max-width:100%!important}
  /* Kartu rekap Laporan Bulanan jangan terpotong di pergantian halaman. */
  .break-inside-avoid{break-inside:avoid;page-break-inside:avoid}
}

/* ---- kelas yang belum ada di bundel build (server tanpa Node) ---- */
/* badge-neutral: dipakai status "Hilang" pada laporan kondisi aset asrama */
.badge-neutral{--badge-color:var(--color-neutral);--badge-fg:var(--color-neutral-content);
  border-color:var(--color-neutral);background-color:var(--color-neutral);color:var(--color-neutral-content)}
/* textarea-bordered: dipakai banyak form (konseling, aset, laporan asrama) */
.textarea-bordered{border:1px solid var(--color-base-300)}
.max-w-\[200px\]{max-width:200px}
/* max-w-[9rem] + h-auto: kolom "PIC / Follow Up" di Modul PPDB — nama PIC
   dipotong (truncate) supaya tabelnya tidak melar, dan tombolnya boleh setinggi isinya */
.max-w-\[9rem\]{max-width:9rem}
.h-auto{height:auto}
/* last:border-0 — pemisah baris terakhir pada daftar "kiriman sudah ditangani" (Konseling) */
.last\:border-0:last-child{border-width:0}

/* ---- token tipografi yang dipakai blade tapi TAK PERNAH ADA ----
   text-headline-md, text-title-md, dan text-title-sm dipakai 6 view (a.l. portal PPDB
   publik) padahal tak terdaftar di skala tema app.css maupun bundel build. Akibatnya
   judul-judul itu TANPA ukuran sama sekali: preflight Tailwind membuat <h1>/<h2>
   mewarisi ukuran teks biasa, sehingga judul hero PPDB sebesar paragrafnya sendiri.
   Angkanya melanjutkan skala tema yang ada: display-md 24, headline-sm 20, body-lg 16,
   body-md 14. */
.text-headline-md{font-size:24px;line-height:32px;font-weight:600}
/* daftar berbutir/bernomor pada "Berkas yang Disiapkan" & "Alur Pendaftaran" di
   beranda PPDB — tanpa ini butir & nomornya hilang, tinggal teks rata kiri. */
.list-inside{list-style-position:inside}
/* file-input-bordered & mt-5: dipakai formulir pendaftaran publik (unggah berkas,
   tombol "Pilih sekolah lain"). .file-input sendiri sudah ada di bundel. */
.file-input-bordered{border-color:var(--color-base-300)}
.mt-5{margin-top:1.25rem}
.list-decimal{list-style-type:decimal}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:.375rem}
.text-title-md{font-size:16px;line-height:24px;font-weight:600}
.text-title-sm{font-size:14px;line-height:20px;font-weight:600}

/* ---- kelas responsif yang dipakai blade tapi belum masuk build ----
   Tanpa ini, niat penulis view tak berefek: kolom tak pernah melebar di layar besar,
   blok tetap menumpuk, dsb. Semuanya hanya aktif DI ATAS ambang, jadi aman untuk ponsel. */
@media (min-width:40rem){
  .sm\:inline{display:inline}
  .sm\:flex-row{flex-direction:row}
  .sm\:items-end{align-items:flex-end}
  .sm\:col-span-1{grid-column:span 1 / span 1}
  .sm\:col-span-3{grid-column:span 3 / span 3}
  .sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sm\:w-64{width:16rem}
  .sm\:w-auto{width:auto}
  /* p-6 sm:p-8 pada hero portal PPDB: tanpa ini hero tetap sesempit ponsel di desktop */
  .sm\:p-8{padding:2rem}
  .sm\:justify-center{justify-content:center}
}
@media (min-width:48rem){
  .md\:col-span-2{grid-column:span 2 / span 2}
}
@media (min-width:64rem){
  .lg\:col-span-3{grid-column:span 3 / span 3}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:px-2{padding-left:.5rem;padding-right:.5rem}
  /* kartu ringkasan yang melebar (Sekolah & Lembaga): judul & angka jadi sebaris */
  .lg\:items-center{align-items:center}
  .lg\:gap-4{gap:1rem}
  .lg\:mt-0{margin-top:0}
}

/* ---- utilitas yang dipakai blade tapi mati di build 30 Jun ---- */
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}
.whitespace-pre-line{white-space:pre-line}
.font-normal{font-weight:400}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.max-h-80{max-height:20rem}
.min-w-\[18rem\]{min-width:18rem}
.text-\[14px\]{font-size:14px}
.text-warning{color:var(--color-warning)}
.border-warning{border-color:var(--color-warning)}
.break-words{overflow-wrap:break-word;word-break:break-word}
/* badge-xs: dipakai penanda kecil pada daftar gaji pokok & tarif */
.badge-xs{--size:1rem;font-size:.625rem;padding-inline:.25rem;height:1rem}

/* =====================================================================
   PONSEL (< 40rem) — kenyamanan baca & geser
   ===================================================================== */
/* Geser horizontal yang enak disentuh: momentum + jangan menarik halaman ikut bergeser. */
.overflow-x-auto{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media (max-width:39.9375rem){   /* < 640px, tepat di bawah ambang sm Tailwind */
  /* Sel tabel lebih rapat supaya lebih banyak kolom terbaca sekali pandang. */
  .table :where(th,td){padding:.5rem .625rem}

  /* Tabel BERKOLOM BANYAK: jangan diperas sampai tiap kata pecah satu huruf.
     Beri lebar minimum sesuai jumlah kolom → wadahnya yang digeser, bukan teks yang hancur.
     Dideteksi lewat :has() sehingga tabel pendek (2–4 kolom) tetap pas tanpa perlu digeser. */
  .overflow-x-auto table:has(th:nth-child(5)){min-width:38rem}
  .overflow-x-auto table:has(th:nth-child(7)){min-width:48rem}
  .overflow-x-auto table:has(th:nth-child(9)){min-width:60rem}

  /* Tabel yang benar-benar digeser: PATOK kolom pertama (nama/identitas baris) supaya
     saat menggeser ke kanan pengguna tak kehilangan konteks "ini baris siapa".
     Halaman penilaian TP/LM sudah melakukannya manual (sticky left-0); aturan ini
     menyamakan perlakuan untuk tabel lebar lainnya, khusus ponsel. */
  .overflow-x-auto table:has(th:nth-child(7)) > thead > tr > th:first-child,
  .overflow-x-auto table:has(th:nth-child(7)) > tbody > tr > td:first-child{
    position:sticky;left:0;z-index:1;
    background:var(--color-base-100);
    box-shadow:1px 0 0 0 var(--color-outline-variant);
  }

  /* iOS Safari otomatis MEMBESARKAN halaman saat fokus ke kolom ber-teks < 16px —
     halaman jadi melenceng dan harus di-pinch balik. Naikkan ambang font kolom isian
     ke 16px khusus ponsel (daisyUI menghitung font lewat --font-size-min). */
  .input,.select,.textarea,.file-input,
  .input-sm,.select-sm,.textarea-sm,.file-input-sm,
  .input-xs,.select-xs{--font-size-min:1rem}
  select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]){font-size:max(1rem,var(--font-size,0rem))}

  /* Judul halaman 32px terlalu besar di layar 360px — turunkan lewat token
     supaya line-height & letter-spacing ikut selaras. */
  :root{--text-display-lg:26px;--text-display-lg--line-height:32px}

  /* Tombol ikon di baris tabel tetap cukup besar untuk disentuh. */
  .btn-square.btn-sm{min-width:2.25rem;min-height:2.25rem}

  /* ===================================================================
     KARTU RINGKASAN DASHBOARD — 3 per baris di ponsel
     Dulu 1 kartu selebar layar: angka penting terdorong jauh ke bawah lipatan.
     Isinya dikecilkan supaya tetap terbaca di kolom ~100px (layar 360px):
     ikon dibuang (hiasan; labelnya sudah menjelaskan) dan teks turun ukuran.
     Label sengaja TIDAK dipotong — nama kartu harus utuh; yang dipangkas hanya
     keterangan kecil di bawahnya. Tinggi kartu tetap rata karena satu baris grid.
     Pengait dipasang di resources/views/livewire/dashboard.blade.php.
     =================================================================== */
  .dash-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .dash-card{padding:.625rem}
  .dash-card .dash-card-icon{display:none}
  .dash-card .dash-card-label{font-size:10px;line-height:13px;letter-spacing:0}
  .dash-card .dash-card-value{font-size:20px;line-height:26px;margin-top:.125rem}
  .dash-card .dash-card-sub{
    font-size:10px;line-height:13px;margin-top:.375rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* ===================================================================
     MODAL DI PONSEL
     Seluruh modal aplikasi (106 buah) memakai markup yang sama persis:
     lapisan  .fixed.inset-0.z-[60|70].overflow-y-auto  (ini yang menggulir)
     panel    .bg-base-100.rounded-box.shadow-lg.w-full.max-w-*.my-8
     kepala   anak pertama panel, ber-.border-b
     tombol   baris ber-.justify-end.border-t (di badan formulir atau anak panel)
     Karena seragam, penyesuaian ponsel cukup di sini — tanpa menyentuh blade.
     CATATAN: .z-[45] (tirai sidebar) sengaja TIDAK ikut, bukan modal.
     =================================================================== */

  /* 1. Lapisan: rapatkan tepi (p-4 → .5rem) supaya panel dapat lebar layar,
        hormati area aman iPhone, dan hentikan rambatan gulir ke halaman di
        belakang saat gulir modal mentok. */
  .fixed.inset-0.z-\[60\],
  .fixed.inset-0.z-\[70\]{
    padding:.5rem;
    padding-bottom:max(.5rem,env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }

  /* 2. Panel: margin 2rem (my-8) memakan tinggi layar ponsel — cukup .5rem. */
  .fixed.inset-0.z-\[60\] > .rounded-box,
  .fixed.inset-0.z-\[70\] > .rounded-box{
    margin-top:.5rem;
    margin-bottom:.5rem;
  }
  /* vh tak menghitung bilah alamat yang menyusut; dvh menghitung. Browser lama
     mengabaikan baris ini dan tetap memakai 85vh. */
  .fixed.inset-0.z-\[60\] > .max-h-\[85vh\]{max-height:85dvh}

  /* 3. Kepala modal (judul + tombol tutup) tetap terlihat saat formulir digulir —
        tombol tutup selalu terjangkau tanpa menggulir balik ke atas. */
  .fixed.inset-0.z-\[60\] > .rounded-box > .border-b:first-child,
  .fixed.inset-0.z-\[70\] > .rounded-box > .border-b:first-child{
    position:sticky;top:0;z-index:3;
    background:var(--color-base-100);
    border-top-left-radius:inherit;border-top-right-radius:inherit;
    padding:.75rem 1rem;
  }
  /* Judul panjang boleh membungkus, tombol tutup jangan ikut menyusut. */
  .fixed.inset-0.z-\[60\] > .rounded-box > .border-b:first-child > :first-child,
  .fixed.inset-0.z-\[70\] > .rounded-box > .border-b:first-child > :first-child{min-width:0}
  .fixed.inset-0.z-\[60\] > .rounded-box > .border-b:first-child > .btn,
  .fixed.inset-0.z-\[70\] > .rounded-box > .border-b:first-child > .btn{flex-shrink:0}

  /* 4. Padding badan 1.5rem (p-6/px-6) terlalu boros di layar 360px. */
  .fixed.inset-0.z-\[60\] .p-6,
  .fixed.inset-0.z-\[70\] .p-6{padding:1rem}
  .fixed.inset-0.z-\[60\] .px-6,
  .fixed.inset-0.z-\[70\] .px-6{padding-left:1rem;padding-right:1rem}

  /* 5. Baris tombol (Batal/Simpan) menempel di dasar layar: pada formulir panjang
        tak perlu lagi menggulir sampai ujung hanya untuk menyimpan. Modal pendek
        tak terpengaruh — sticky hanya aktif bila isinya memang melebihi layar. */
  .fixed.inset-0.z-\[60\] > .rounded-box > .justify-end.border-t,
  .fixed.inset-0.z-\[70\] > .rounded-box > .justify-end.border-t,
  .fixed.inset-0.z-\[60\] > .rounded-box > * > .justify-end.border-t,
  .fixed.inset-0.z-\[70\] > .rounded-box > * > .justify-end.border-t{
    position:sticky;bottom:0;z-index:2;
    flex-wrap:wrap;
    background:var(--color-base-100);
    padding-top:.75rem;
    padding-bottom:max(.75rem,env(safe-area-inset-bottom));
  }
  /* Yang berada di dalam badan ber-padding: lebarkan latarnya sampai tepi panel,
     kalau tidak isi yang tergulir terlihat menyembul di sisi kiri/kanannya. */
  .fixed.inset-0.z-\[60\] > .rounded-box > * > .justify-end.border-t,
  .fixed.inset-0.z-\[70\] > .rounded-box > * > .justify-end.border-t{
    margin-left:-1rem;margin-right:-1rem;
    padding-left:1rem;padding-right:1rem;
  }
  /* Anak langsung panel: ikutkan lengkung sudut bawah panel. */
  .fixed.inset-0.z-\[60\] > .rounded-box > .justify-end.border-t,
  .fixed.inset-0.z-\[70\] > .rounded-box > .justify-end.border-t{
    border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;
  }

  /* 6. BUG NYATA: 104 elemen memakai col-span-2/3/4 di dalam grid yang di ponsel
        hanya 1 kolom (grid-cols-1 sm:grid-cols-2). CSS Grid menjawabnya dengan
        MEMBUAT kolom bayangan agar cukup untuk direntangi — jadi grid ponsel diam-diam
        jadi 2 kolom, isian tunggal terhimpit di kolom kiri. Yang dimaksud penulis view
        jelas "selebar penuh", dan itulah arti grid-column:auto di grid 1 kolom. */
  .grid-cols-1 > .col-span-2,
  .grid-cols-1 > .col-span-3,
  .grid-cols-1 > .col-span-4{grid-column:auto}
}

/* ---- Jadwal Pelajaran: grid mengisi lebar ----
   Dulu halaman ini melebarkan dirinya sendiri lewat `main:has(.timetable-page)` karena <main>
   dibatasi 1440px. Sejak 2026-08-14 SEMUA halaman sudah lebar penuh (lihat app.blade.php),
   jadi trik itu dibuang — padding tepinya kini seragam dengan halaman lain. */
table.timetable-grid{width:100%}

/* ---- Jadwal Pelajaran: grid padat ----
   Grid rombel × hari × les memuat 6 kolom hari × 8 les; dengan padding tabel baku
   satu rombel tak muat sekali pandang. Kelas ini merapatkan selnya. Lebih spesifik
   (table.timetable-grid) daripada aturan padding tabel lain di berkas ini supaya
   tetap menang, termasuk di dalam blok ponsel. */
table.timetable-grid :where(th,td){padding:.25rem .375rem;vertical-align:top}
table.timetable-grid > thead > tr > th{padding-top:.375rem;padding-bottom:.375rem;vertical-align:middle}
/* Kolom nomor les cukup selebar angkanya. */
table.timetable-grid :where(th,td):first-child{width:1%;white-space:nowrap}

/* ---- lonceng notifikasi (topbar) ---- */
.min-w-\[18px\]{min-width:18px}
.h-\[18px\]{height:18px}
.text-\[11px\]{font-size:11px}
.leading-\[18px\]{line-height:18px}
.-top-0\.5{top:-.125rem}
.-right-0\.5{right:-.125rem}
.max-h-96{max-height:24rem}
.sm\:w-96{width:24rem}

/* ---- Buku Tamu (security / asrama / sekolah) ----
   Kotak "Kiriman dari Gerbang" & penanda orang yang ditemui memakai warna warning
   dan primary dengan alpha; utilitas alpha-nya belum ikut terbangun. */
.bg-warning\/10{background-color:color-mix(in oklab,var(--color-warning) 10%,transparent)}
.border-warning\/40{border-color:color-mix(in oklab,var(--color-warning) 40%,transparent)}
.border-primary\/40{border-color:color-mix(in oklab,var(--color-primary) 40%,transparent)}
.mt-stack_lg{margin-top:2rem}
/* Radio pemilih "Hendak Bertemu": .radio sudah ada, varian ukuran & warnanya belum. */
.radio-xs{width:1rem;height:1rem}
.radio-primary:checked,.radio-primary[aria-checked=true]{background-color:var(--color-primary);border-color:var(--color-primary)}

/* Lima kartu ringkasan Data Siswa dalam satu baris (lg:grid-cols-5 sudah ada). */
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Sorotan baris/kartu siswa yang sedang dicentang. Sudah dipakai tabel Data Siswa
   sejak lama, tapi tak pernah ikut build — barisnya tidak pernah tersorot. */
.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}

/* Kartu ringkasan Daftar SDM tetap 4 kolom sampai layar ponsel; isinya yang
   mengecil. Ragam md: berikut belum ada di build 30 Jun (breakpoint 48rem,
   sepola .md\:block yang sudah terbangun). */
@media (width>=48rem){
  .md\:p-5{padding:calc(var(--spacing) * 5)}
  .md\:flex{display:flex}
  .md\:text-display-md{font-size:var(--text-display-md);line-height:var(--tw-leading,var(--text-display-md--line-height));
    letter-spacing:var(--tw-tracking,var(--text-display-md--letter-spacing));
    font-weight:var(--tw-font-weight,var(--text-display-md--font-weight))}
}

/* Kartu SDM yang sedikit terangkat saat disinggung kursor. Build 30 Jun hanya
   punya .shadow-sm; variabel --shadow-md-nya sudah ada, tinggal utilitasnya. */
.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}

/* ---- Penjelasan angka (@hint / data-hint) ----
   Angka laporan yang menerangkan asal-usulnya saat disinggung kursor. Balonnya
   digambar public/js/hint.js dan ditempel ke <body> dengan position:fixed —
   ::after tidak bisa dipakai karena angka-angka itu berada di dalam tabel
   ber-`overflow-x-auto`, yang ikut memotong arah tegak. */
/* Garis putus-putus hanya saat disinggung/difokus: laporan ini nyaris seluruhnya
   angka, dan menggarisbawahi semuanya sekaligus membuat halamannya berisik. Bahwa
   angkanya bisa ditanya diberitahukan sekali di kepala tabel. */
[data-hint]{cursor:help;outline-offset:2px}
[data-hint]:hover,[data-hint]:focus-visible{
  text-decoration:underline dotted;
  text-decoration-color:var(--color-outline);
  text-underline-offset:3px;
}
.hint-bubble{
  position:fixed;top:0;left:0;z-index:90;
  max-width:20rem;padding:.5rem .625rem;border-radius:.5rem;
  background:var(--color-on-surface);color:var(--color-background);
  font-size:.75rem;line-height:1.4;text-align:left;
  box-shadow:0 6px 20px rgb(0 0 0 / .18);
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .12s ease;
}
.hint-bubble.is-open{opacity:1;visibility:visible}
@media print{
  .hint-bubble{display:none}
  [data-hint]{text-decoration:none;cursor:auto}
}

/* =====================================================================
   MODUL SECURITY (2026-08-16)
   ===================================================================== */

/* ---- Deretan angka jaga di kepala halaman Piket Security ----
   Dulu <div class="flex gap-2">: tanpa flex-wrap, keenam badge saling MEMERAS
   di layar ponsel sampai tulisannya terpotong ("3 menun…"). Di sini badge boleh
   membungkus ke baris berikutnya, dan khusus ponsel dibuat lebih ringkas +
   boleh tumbuh ke bawah supaya angkanya tetap terbaca utuh. */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
/* Tinggi badge daisyUI DIPATOK (height:var(--size)) — begitu tulisannya membungkus
   jadi dua baris, baris keduanya keluar dari kotak dan terlihat TERPOTONG. Di sini
   tingginya dibuat menyesuaikan isi; min-height menjaga badge sebaris tetap sama
   persis seperti sebelumnya, jadi tampilan lama tidak berubah. */
.chip-row > .badge{
  flex:0 0 auto;max-width:100%;
  height:auto;min-height:var(--size);
  padding-block:.125rem;line-height:1.2;
  white-space:normal;text-align:left;
}
@media (max-width:39.9375rem){
  .chip-row{gap:.375rem}
  .chip-row > .badge{
    height:auto;min-height:1.75rem;padding:.25rem .5rem;
    font-size:.75rem;line-height:1.15;white-space:normal;text-align:left;
  }
  .chip-row > .badge > .material-symbols-outlined{font-size:14px}
}

/* ---- Kalender Jadwal Security ----
   Sel = tombol pemilih tanggal; isinya angka tanggal + kecukupan petugas tiap
   shift (terjadwal/butuh). Digambar dengan kelas sendiri, bukan rangkaian utilitas,
   karena banyak utilitas yang dibutuhkan (min-h, opacity-45, text-[10px]) tak ada
   di bundel build 30 Jun — lihat catatan di kepala berkas ini. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.375rem}
.cal-head-cell{
  text-align:center;font-size:.6875rem;line-height:1.4;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-on-surface-variant);
}
.cal-day{
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  min-height:4.25rem;padding:.375rem;text-align:left;cursor:pointer;
  border:1px solid var(--color-outline-variant);border-radius:.5rem;
  background:var(--color-base-100);
}
.cal-day:hover{background:var(--color-surface-container-low)}
/* Tanggal milik bulan sebelah: tetap bisa diklik, hanya diredupkan. */
.cal-day.is-outside{opacity:.45}
.cal-day.is-today .cal-daynum{color:var(--color-primary);font-weight:700}
.cal-day.is-selected{
  border-color:var(--color-primary);
  background:color-mix(in oklab,var(--color-primary) 6%,transparent);
  box-shadow:inset 0 0 0 1px var(--color-primary);
}
.cal-daynum{font-size:.75rem;line-height:1;font-weight:600;color:var(--color-on-surface)}
.cal-pills{display:flex;flex-direction:column;gap:.125rem;width:100%}
.cal-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.0625rem .25rem;border-radius:9999px;
  font-size:.625rem;line-height:1.4;white-space:nowrap;
}
.cal-pill.ok{background:color-mix(in oklab,var(--color-success) 18%,transparent);color:var(--color-success)}
.cal-pill.short{background:color-mix(in oklab,var(--color-warning) 22%,transparent);color:var(--color-warning)}
.cal-pill.none{background:var(--color-surface-container);color:var(--color-outline)}
.cal-legend{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--color-on-surface-variant)}
@media (max-width:39.9375rem){
  .cal-grid{gap:.25rem}
  .cal-day{min-height:3.5rem;padding:.25rem;gap:.125rem;border-radius:.375rem}
  .cal-pill{font-size:.5625rem;padding:0 .1875rem}
  /* Keterangan warna memakan satu baris penuh di ponsel — cukup kalendernya sendiri. */
  .cal-legend{display:none}
}

/* Kategori yang dinonaktifkan pada modal Kategori Jurnal Jaga (juga dipakai
   modal Kategori Peristiwa Asrama, yang selama ini tak pernah tercoret). */
.line-through{text-decoration-line:line-through}
/* Kepala kelompok slot jaga & label shift — dipakai jurnal sejak lama, belum terbangun. */
.first\:mt-0:first-child{margin-top:0}
.normal-case{text-transform:none}
.text-label-lg{font-size:14px;line-height:20px;font-weight:500}