/* ------------------------------------------------------------------
   Gaya tambahan aplikasi Rekapitulasi Surat SIAPP Pemda Bojonegoro.
   Tampilan utama memakai Tailwind (sama seperti versi aslinya); berkas ini
   hanya memuat hal yang tidak bisa diandalkan dari utilitas: mode cetak,
   scrollbar tabel, dan pengaman kelas .hidden.
   ------------------------------------------------------------------ */

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tailwind CDN menaruh utilitas display dalam satu grup sehingga urutan
   .hidden vs .flex bisa tidak bisa diandalkan. Aturan ini yang menjamin
   panel/modal benar-benar tersembunyi saat kelasnya dipasang. */
.hidden {
    display: none !important;
}

/* ----------------------------------------------------------- scrollbar tabel */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --------------------------------------------------- tabel rekap (layar)
   Permintaan pengguna: seluruh kolom admin harus tampil dalam SATU layar
   tanpa geser kanan-kiri. Tabelnya 26 kolom, jadi dipakai tata letak padat:
   - table-layout fixed + lebar kolom persen (kelas k-*) supaya bisa menyusut
   - huruf 10px, padding 3px, label header 9px yang boleh membungkus 2-3 baris
   - label panjang diringkas (mis. "TGL PENYERAHAN" -> "TGL SERAH"), teks
     lengkapnya tetap ada sebagai tooltip `title` pada <th>
   Lebar kolom versi CETAK ada di blok @media print di bawah (menang karena
   muncul belakangan dengan !important). */
#rekapTable {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: 10px;
}

#rekapTable th,
#rekapTable td {
    padding: 4px 3px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
}

#rekapTable thead th {
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: 0;
    vertical-align: middle;
}

#rekapTable tbody td {
    vertical-align: middle;
}

/* Label header: versi RINGKAS dipakai di layar (kolom sempit), versi LENGKAP
   dipakai saat dicetak (kertas A3 masih longgar). Ini menjaga hasil cetak
   tetap memakai istilah panjang seperti sebelumnya. */
#rekapTable .lbl-cetak {
    display: none;
}

/* Lebar kolom (layar). */
#rekapTable thead th.k-cek         { width: 3.2%; }
#rekapTable thead th.k-no          { width: 3.0%; }
#rekapTable thead th.k-tahun       { width: 4.0%; }
#rekapTable thead th.k-status      { width: 4.6%; }
#rekapTable thead th.k-kec         { width: 6.6%; }
#rekapTable thead th.k-desa        { width: 6.2%; }
#rekapTable thead th.k-masa        { width: 5.4%; }
#rekapTable thead th.k-tglcetak    { width: 5.2%; }
#rekapTable thead th.k-tglserah    { width: 5.2%; }
#rekapTable thead th.k-jumlah      { width: 4.4%; }
#rekapTable thead th.k-tglkembali  { width: 5.2%; }
#rekapTable thead th.k-kembali     { width: 4.6%; }
#rekapTable thead th.k-belum       { width: 4.6%; }
#rekapTable thead th.k-tidak       { width: 4.2%; }
#rekapTable thead th.k-st          { width: 3.15%; }
#rekapTable thead th.k-jumlahstatus{ width: 4.0%; }
#rekapTable thead th.k-aksi        { width: 6.0%; }

/* Badge DRAFT/FINAL: tanpa ikon & lebih rapat supaya muat di kolom sempit. */
#rekapTable tbody td .badge-status {
    display: inline-block;
    padding: 1px 3px;
    font-size: 8.5px;
    border-radius: 4px;
    white-space: nowrap;
}
#rekapTable tbody td .badge-status i {
    display: none;
}

/* Masa laku ditulis dua baris (tanggal mulai di atas, akhir di bawah). */
#rekapTable td .dua-baris {
    display: block;
    line-height: 1.25;
}

/* Tombol ikon aksi di tabel. */
#rekapTable tbody td button {
    padding: 3px 2px;
    font-size: 11px;
}

#rekapTable tbody td button:hover {
    background-color: #f1f5f9;
}

/* Saat kolom terlalu sempit untuk semua isi (mis. layar < 1100px), tabel
   tetap digeser DI DALAM wadahnya sendiri, bukan membuat halaman melebar. */
@media (max-width: 1100px) {
    #rekapTable {
        min-width: 1040px;
    }
}

/* --------------------------------------------------------------- mode cetak
   Tabel rekap punya 24 kolom yang terlihat saat dicetak. Dengan tata letak
   otomatis, tabel itu lebih lebar daripada kertas A4 sehingga kolom kanan
   TERPOTONG (pernah terjadi: kolom SURAT KEMBALI..JUMLAH STATUS hilang).
   Karena itu saat dicetak dipakai table-layout: fixed + lebar kolom di bawah
   (indeks mengikuti urutan <th> di index.php) dan huruf 5pt supaya SEMUA
   kolom muat di A4 landscape. */
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 9pt;
    }
    /* 24 kolom yang terlihat terlalu banyak untuk A4; A3 landscape dipakai
       supaya seluruh kolom tercetak dan hurufnya tetap terbaca. Pencetak A4
       biasanya mengecilkan otomatis ("fit to page"). */
    @page {
        size: A3 landscape;
        margin: 8mm;
    }
    .print-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .print-container > div {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .table-responsive {
        overflow: visible !important;
    }
    #rekapTable {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 7pt !important;
    }
    #rekapTable th,
    #rekapTable td {
        padding: 2px 2px !important;
        border: 0.4pt solid #555555 !important;
        color: #000000 !important;
        background: #ffffff !important;
        font-size: 7pt !important;
        line-height: 1.15 !important;
        /* th di layar memakai min-w-[90px] dst (Tailwind). Kalau tidak
           dinolkan, kolom menolak menyusut dan tabel melebihi kertas. */
        min-width: 0 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    #rekapTable thead th {
        font-size: 7pt !important;
    }
    /* Label status (DRAFT/FINAL) dicetak tanpa kotak & ikon supaya muat. */
    #rekapTable tbody span {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 7pt !important;
        border-radius: 0 !important;
    }
    #rekapTable tbody i {
        display: none !important;
    }
    #rekapTable tfoot td {
        background: #eeeeee !important;
        font-weight: 700 !important;
        font-size: 7pt !important;
    }

    /* Lebar kolom memakai KELAS per kolom (k-*), bukan nth-child: urutan kolom
       berbeda antara Administrator (ada STATUS) dan Petugas (tanpa STATUS),
       sehingga penomoran posisi membuat kolom petugas mengecil/terpotong. */
    /* Saat dicetak, tampilkan label LENGKAP (bukan yang ringkas). */
    #rekapTable .lbl-layar {
        display: none !important;
    }
    #rekapTable .lbl-cetak {
        display: inline !important;
    }

    #rekapTable thead th.k-no          { width: 2.2%; }
    #rekapTable thead th.k-tahun       { width: 3.4%; }
    #rekapTable thead th.k-status      { width: 4.2%; }
    #rekapTable thead th.k-kec         { width: 6.6%; }
    #rekapTable thead th.k-desa        { width: 7.2%; }
    #rekapTable thead th.k-masa        { width: 8.0%; }
    #rekapTable thead th.k-tglcetak    { width: 4.6%; }
    #rekapTable thead th.k-tglserah    { width: 4.7%; }
    #rekapTable thead th.k-jumlah      { width: 4.2%; }
    #rekapTable thead th.k-tglkembali  { width: 4.6%; }
    #rekapTable thead th.k-kembali     { width: 4.2%; }
    #rekapTable thead th.k-belum       { width: 4.2%; }
    #rekapTable thead th.k-tidak       { width: 3.6%; }
    #rekapTable thead th.k-st          { width: 3.4%; }
    #rekapTable thead th.k-jumlahstatus{ width: 3.6%; }
}

/* --------------------------------------------------- header di layar HP
   Deretan 6 tombol aksi kalau dibiarkan membungkus satu per baris membuat
   header setinggi lebih dari satu layar HP (terukur 686px di 320px, 552px di
   390px). Di layar kecil tombolnya disusun 2 kolom + huruf dikecilkan supaya
   isi halaman tetap terlihat tanpa harus menggulir jauh. Desktop tidak berubah. */
@media (max-width: 640px) {
    header > div {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
    header h1 {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
    }
    header p {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }
    /* Tombol aksi dalam SATU baris yang bisa digeser ke samping. Dulu disusun
       2 kolom (3 baris) sehingga header setinggi 407px; karena header sekarang
       MENEMPEL di atas, tinggi itu akan menutupi ~48% layar HP. */
    #aksiHeader {
        display: flex;
        flex-wrap: nowrap;
        /* WAJIB flex-start, bukan center: pada baris yang bisa digeser,
           justify-center memotong tombol pertama ke kiri (terukur x = -62px)
           sehingga tidak bisa dijangkau sama sekali. */
        justify-content: flex-start !important;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    #aksiHeader::-webkit-scrollbar {
        display: none;
    }
    #aksiHeader > button {
        flex: 0 0 auto;
        white-space: nowrap;
        justify-content: center;
        font-size: 0.72rem !important;
        padding: 0.5rem 0.7rem !important;
        line-height: 1.2;
    }
    #aksiHeader > button .fa-solid {
        font-size: 0.8rem;
        margin-right: 5px !important;
    }
    /* Baris info (status + nama + tombol akun) dibuat SATU baris yang bisa
       digeser ke samping; sebelumnya membungkus 3 baris (105px). */
    .bar-info {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 8px !important;
    }
    .bar-info::-webkit-scrollbar {
        display: none;
    }
    .bar-info > div {
        flex: 0 0 auto;
    }

    /* Teks yang boleh diringkas di layar HP agar header tetap tipis
       (isinya tidak hilang: status sinkron, nama & peran, dan semua tombol
       tetap tampil). */
    .sub-judul,
    .label-sistem,
    .label-masuk {
        display: none !important;
    }
    header .logo-jatim-header {
        width: 38px;
        height: 38px;
    }
}

/* --------------------------------------------------- lambang Jawa Timur
   Lambang Provinsi Jawa Timur dipakai di header dashboard dan di halaman
   masuk. Latarnya DIBIARKAN TRANSPARAN supaya menyatu dengan header indigo
   (jangan diberi kotak putih/bayangan). */
.logo-jatim-header {
    object-fit: contain;
    display: block;
    background: transparent;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}
.logo-besar {
    width: 84px;
    height: 84px;
}
@media (max-width: 640px) {
    .logo-jatim-header {
        width: 42px;
        height: 42px;
    }
    .logo-besar {
        width: 68px;
        height: 68px;
    }
}

/* --------------------------------------------------------- jendela modal
   Wadah modal memakai kelas .modal-latar + `flex items-center justify-center`.
   Tanpa `flex`, properti items-center/justify-center TIDAK berlaku (div biasa
   = display:block) sehingga jendela menempel ke kiri-atas layar — itu yang
   terjadi sebelumnya (terukur 16px dari kiri, 48px dari atas).
   Kartunya memakai `my-auto` (bukan `my-8`) supaya tetap benar saat kartu
   lebih tinggi daripada layar: margin auto menjadi 0 dan isinya bisa digulir
   sampai bagian atas terjangkau. */
.modal-latar {
    /* `hidden` (display:none !important) tetap menang saat modal ditutup. */
    align-items: center;
    justify-content: center;
}
/* Catatan: JANGAN memberi max-height + overflow pada kartu (`.modal-latar > div`).
   Itu membuat kartu punya gulir SENDIRI di dalam wadah yang juga bisa digulir,
   sehingga bagian bawah formulir sulit dijangkau (terukur: tombol bawah tidak
   terlihat di 1280x560). Biarkan wadahnya (.modal-latar, sudah `overflow-y-auto`)
   yang menggulir; `my-auto` pada kartu membuatnya tetap di tengah saat muat dan
   otomatis menempel atas (bisa digulir) saat kartunya lebih tinggi dari layar. */


/* ------------------------------------------------- header menempel di atas
   Permintaan pengguna: header (judul + seluruh tombol) tetap terlihat saat
   halaman digulir, seperti portal e-Blokir. Dipasang lewat kelas sendiri
   (bukan utilitas Tailwind) supaya mudah diatur per ukuran layar.
   z-index 40: di bawah modal (z-50) tetapi di atas isi halaman. */
.header-lengket {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    /* Bayangan hanya terasa saat header sudah menempel. */
    box-shadow: 0 8px 24px -12px rgba(15, 15, 25, 0.55);
}