/*
 * 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}
/* last:border-0 — pemisah baris terakhir pada daftar "kiriman sudah ditangani" (Konseling) */
.last\:border-0:last-child{border-width:0}

/* ---- 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}
}
@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}
}

/* ---- 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}
}

/* ---- 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}