/* AUDIT September 2026 -- SISA TEMA LAMA DIBERSIHKAN.
   Nilai rgba(124,58,237,x) = #7C3AED (violet) dan rgba(20,10,60,x) = ungu tua
   adalah warisan tema "Aurora/Indigo" yang sudah ditinggalkan; tema kanonik
   sekarang Navy + Gold. rgba(251,191,36,x) = #FBBF24 adalah amber lama, bukan
   --gold-500 (#D4A72C). Semua diganti ke navy netral rgba(15,23,42,x) /
   token merek supaya tidak ada lagi glow ungu di bawah tombol & kartu navy.
   JANGAN masukkan lagi nilai heksa/ rgba ungu-amber ke berkas ini. */
/* =============================================================================
   mobile.css — Lapisan responsif "Mobile First" (ADITIF, dimuat paling akhir)
   =============================================================================
   Tujuan: membuat sistem NYAMAN dipakai dari HP untuk input transaksi harian,
   TANPA mengubah struktur HTML/JS atau mengorbankan tampilan desktop.

   Prinsip:
   - Semua aturan penting dibungkus @media (max-width: ...) agar desktop TIDAK
     terpengaruh sama sekali.
   - Tidak ada selector yang menghapus fungsi; hanya menata ulang tampilan.
   - Target: 320/360/375/390/412/430px (HP) tetap enak; 768–1024 (tablet) rapi.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) UNIVERSAL: cegah overflow horizontal & font input <16px (anti zoom iOS)
   --------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* iOS auto-zoom saat fokus bila font-size input < 16px. Paksa >=16px di HP. */
@media (max-width: 575.98px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input[type="text"], input[type="number"], input[type="date"],
  input[type="time"], input[type="search"], input[type="password"],
  textarea, select {
    font-size: 16px !important;
  }
  /* Kolom rincian di tabel nota tetap ringkas walau font dinaikkan */
  #tblTrxItems .form-control-sm { padding: .3rem .4rem; }
}

/* ---------------------------------------------------------------------------
   2) TARGET SENTUH: tombol & kontrol cukup besar (min 44px) di HP
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .btn { min-height: 42px; padding-top: .5rem; padding-bottom: .5rem; }
  .btn-sm { min-height: 34px; }
  .btn-icon { width: 42px; height: 42px; }
  .form-control, .form-select { min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 38px; }
  /* Jarak antar tombol aksi agar tidak salah tekan */
  .btn + .btn { margin-left: 2px; }
}

/* ---------------------------------------------------------------------------
   3) TABEL di HP -> SELALU discroll ke SAMPING, BENTUK TABEL ASLI TETAP
   (bukan ditumpuk jadi kartu) -- permintaan pengguna, Agustus 2026:
   "tabel bisa discroll kesamping tanpa mengubah bentuk tabelnya, biar
   lebih enak dilihat".
   SEBELUMNYA (lihat riwayat) tabel daftar utama (transaksi/utang/laporan/
   dll.) diubah total jadi TUMPUKAN KARTU di HP via table.tbl-cardize
   (thead disembunyikan, tiap <tr> jadi blok kartu, label kolom ditaruh
   di kiri tiap sel via ::before). assets/js/app.js MASIH menambahkan
   class `tbl-cardize` ke tabel (fungsi applyCardize()/labelize()) --
   sengaja TIDAK diubah supaya JS tetap aman & tak berisiko -- tapi di
   bawah ini class tsb SUDAH TIDAK diberi efek tampilan apa pun lagi.
   Hasilnya: <table> tetap tabel asli (thead tampil, <tr>/<td> tetap
   baris & sel tabel apa adanya), dan pembungkus .table-responsive
   (bawaan Bootstrap, overflow-x:auto) yang membuatnya bisa digeser ke
   samping dengan jari -- bentuk tabel TIDAK PERNAH berubah di layar
   manapun, HP maupun desktop.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Semua .table-responsive: beri momentum scroll & indikator halus */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Sel TIDAK dipaksa membungkus teks -- lebar kolom asli dipertahankan
     apa adanya (sama seperti tampilan desktop), kelebihan lebar tabel
     digeser lewat scroll horizontal, BUKAN bikin baris jadi tinggi/
     berantakan karena teks membungkus di kolom yang jadi sempit. Kolom
     yang MEMANG sengaja boleh membungkus (mis. keterangan panjang,
     ditandai class .text-wrap oleh view) tetap dihormati. */
  .table-responsive table:not(.dt-cell-nowrap-off) th,
  .table-responsive table:not(.dt-cell-nowrap-off) td { white-space: nowrap; }
  .table-responsive table th.text-wrap,
  .table-responsive table td.text-wrap { white-space: normal; }

  /* Padding & font sedikit disempitkan supaya lebih banyak kolom terlihat
     sebelum perlu digeser, tanpa mengorbankan keterbacaan. */
  .table-responsive table > :not(caption) > * > * { padding: 8px 10px; font-size: 13px; }

  /* Scrollbar tipis senada tema (pola sama dgn .divisi-*-scroll) supaya
     jelas tabelnya BISA digeser, bukan scrollbar tebal bawaan browser. */
  .table-responsive::-webkit-scrollbar { height: 6px; }
  .table-responsive::-webkit-scrollbar-track { background: transparent; }
  .table-responsive::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

  /* FIX (Agustus 2026, laporan pengguna: "tampilan di laporan tidak bisa
     digeser kiri kanan" di HP) -- akar masalah: tabel Laporan/Transaksi/
     Payable memakai .tbl-fixed (tables.css §1: table-layout:fixed +
     width:100%), yang MEMAKSA tabel selalu PAS tepat selebar kartu
     pembungkusnya sendiri -- akibatnya tabel tidak pernah lebih lebar
     dari .table-responsive, sehingga wrapper tidak pernah punya apa pun
     utk digeser (overflow-x:auto bawaan Bootstrap butuh anak yang
     overflow dulu). Ini bertentangan dgn niat §3 di atas ("tabel SELALU
     discroll ke samping") -- white-space:nowrap sudah dipasang tepat di
     atas, tapi table-layout:fixed mengabaikannya & tetap memaksa kolom
     menyempit paksa alih-alih tabel melebar. Override KHUSUS mobile ini:
     kembalikan table-layout ke auto (lebar .tbl-col-* di tables.css §8
     tetap dipakai browser sbg lebar MINIMAL kolom, bukan lagi lebar mati)
     + izinkan tabel melebar secukupnya mengikuti isi (width:max-content,
     min-width:100% supaya tetap mengisi penuh bila kebetulan muat) --
     barulah tabel benar-benar lebih lebar dari wrapper & bisa digeser ke
     samping dgn jari. Desktop (>767px) TIDAK terpengaruh sama sekali --
     .tbl-fixed asli di tables.css tetap berlaku apa adanya di sana, kolom
     tetap presisi & rata seperti sebelumnya. */
  .table-responsive table.tbl-fixed {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
  }

  /* NB: seluruh aturan lama table.tbl-cardize (menyembunyikan thead,
     mengubah <tr>/<td> jadi blok kartu bertumpuk) SUDAH DIHAPUS dari
     sini -- class-nya tetap ditambahkan JS tapi kini tidak bermakna
     secara visual, sesuai keputusan di atas. */
}

/* ---------------------------------------------------------------------------
   4) MODAL TRANSAKSI -> hampir full-screen & nyaman di HP
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0; max-width: 100%; min-height: 100%;
  }
  .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: 100%; }

  /* BUG (dilaporkan pengguna, Agustus 2026): form modal yang isinya panjang
     (mis. "Transaksi Baru" dgn beberapa baris nota) TIDAK BISA discroll
     turun sama sekali di HP -- kelihatan seperti "macet". Penyebabnya dua
     aturan bawaan yang saling bentrok begitu digabung:
       1) `.modal-dialog-scrollable` (dipakai #modalTrx & modal lain) bawaan
          Bootstrap mematok TINGGI modal-dialog/modal-content pas 1 layar
          (height:calc(100%-margin) + overflow:hidden) supaya HANYA
          modal-body yang scroll internal, header/footer diam di tempat --
          .modal-content di sini & theme.css juga sama-sama overflow:hidden.
       2) Baris `.modal-body{max-height:none!important}` (tepat di bawah
          ini) sengaja melepas batas tinggi 70vh/75vh bawaan theme.css
          (`.modal-body{max-height:70vh}`) supaya isi modal kelihatan penuh
          & alami di layar HP yang sudah hampir full-screen -- TAPI itu
          artinya modal-body jadi tidak lagi punya "kotak" bertinggi tetap
          buat di-scroll (tingginya ikut memanjang bebas mengikuti isi).
     Gabungan (1)+(2): modal-body memanjang bebas, sementara modal-content/
     modal-dialog-scrollable di atasnya TETAP memotong (overflow:hidden)
     apa pun yang melebihi 1 layar -- sisanya cuma hilang, tidak ada
     scrollbar ke mana pun.
     Perbaikan: netralkan mekanisme "cuma modal-body yang scroll" bawaan
     Bootstrap khusus di HP -- modal-dialog & modal-content dibiarkan
     setinggi isinya (height:auto, overflow:visible), sehingga elemen
     `.modal` bawaan Bootstrap sendiri (posisi fixed layar penuh,
     overflow-y:auto secara default -- TIDAK disentuh CSS mana pun di sini)
     yang jadi SATU-SATUNYA area scroll. Header & footer modal (lihat aturan
     sticky di bawah) tetap selalu terlihat karena posisinya relatif
     terhadap `.modal` itu (scroll ancestor terdekatnya begitu modal-
     content/modal-body sendiri tidak lagi ikut membatasi/memotong). */
  .modal-dialog-scrollable { height: auto; }
  .modal-dialog-scrollable .modal-content { max-height: none; overflow: visible; }
  .modal-content { border-radius: 0; min-height: 100vh; border: 0; overflow: visible; }
  .modal-body { max-height: none !important; }

  /* Header modal sticky agar judul & tombol tutup selalu terlihat */
  .modal-header {
    position: sticky; top: 0; z-index: 5;
    background: var(--card);
  }

  /* Footer modal (tombol Simpan/Batal) STICKY di bawah — selalu terjangkau,
     tidak tertutup keyboard, tidak perlu scroll mencari tombol. */
  .modal-footer {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    /* aman dari home-indicator iPhone */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  /* Tombol Simpan dominan & lebar di HP */
  .modal-footer .btn { flex: 1 1 auto; min-height: 46px; font-weight: 600; }
  .modal-footer .btn-brand, .modal-footer [type="submit"] { order: 2; }
  .modal-footer .btn-outline-secondary { order: 1; flex: 0 0 34%; }
}

/* ---------------------------------------------------------------------------
   5) TABEL RINCIAN NOTA di dalam modal -> tetap terbaca di HP
   Kolom-kolom sempit dibiarkan scroll, tapi input diperbesar & baris diberi
   jarak agar mudah disentuh. Header tabel dibuat lengket.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #tblTrxItems { min-width: 620px; } /* biar bisa discroll, tak gepeng */
  #tblTrxItems thead th {
    position: sticky; top: 0; background: var(--paper); z-index: 1;
    font-size: 11.5px;
  }
  /* Bungkus tabel rincian agar scroll-nya jelas & tak menjebol modal */
  #tblTrxItems { }
  .modal-body .table-responsive { border: 1px solid var(--line); border-radius: var(--r-sm); }
}

/* ---------------------------------------------------------------------------
   6) FILTER: kartu filter tetap rapi (2 kolom) di HP, bukan berjejal
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Judul halaman & tombol utama menumpuk rapi */
  .content h1 { font-size: 19px !important; }
  /* Baris filter: pakai grid Bootstrap col-6 yang sudah ada; kecilkan gap */
  .card .row.g-2 > [class*="col-"] { margin-bottom: 4px; }
}

/* ---------------------------------------------------------------------------
   7) KPI / dashboard cards (Kas Masuk, Kas Keluar, Sisa Kas, dll.) di HP.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .kpi-value { font-size: 21px; white-space: nowrap; }
  .kpi .kpi-icon { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-width: 360px) {
  /* Angka rupiah sangat panjang (mis. "Rp12.345.678.900") di layar paling
     sempit -- kecilkan sedikit lagi supaya tetap 1 baris.
     PERBAIKAN (audit tampilan mobile, September 2026): selector polos
     `.kpi-value` TIDAK PERNAH menang lawan `.card.kpi .kpi-value` (3 class,
     lebih spesifik) yang dipasang assets/css/keuangan.css:58-60 (25px) &
     keuangan.css:169-171 (21px, <=575.98px) -- SEMUA kartu KPI sungguhan
     pakai struktur `.card.kpi`, jadi aturan ini SELALU kalah spesifisitas
     & diam-diam tidak pernah berlaku, berapa pun urutan <link> CSS-nya.
     Kecilkan lagi di layar <=360px jadi tidak pernah terjadi -- disamakan
     spesifisitasnya di sini supaya benar2 kepakai. */
  .card.kpi .kpi-value { font-size: 18.5px; }
}

/* ---------------------------------------------------------------------------
   7b) Kartu KPI (Kas Masuk/Kas Keluar/Sisa Kas/Saldo/dll.) di HALAMAN LAIN
   (Kas Masuk, Kasbon, Laporan, Utang, Laporan Reklamasi Detail, dll.) masih
   pakai kolom Bootstrap `col-6 col-xl-3` -- artinya SELALU 2 kartu
   berdampingan di semua lebar layar sampai hampir 1200px, TERMASUK semua
   ukuran HP. Di lebar setengah kartu itu, nominal seperti "Rp2.044.410.000"
   tidak muat 1 baris dan MEMBUNGKUS ke baris ke-2 (berantakan / kurang
   presisi) -- permintaan pengguna, Agustus 2026: "kartu kas masuk kas
   keluar ... jadikan bersusun agar nominalnya tidak terpotong kebaris
   berikutnya untuk semua tampilan mobile".
   Perbaikan: di HP (<=767px), kartu2 ini dipaksa 1 kolom penuh (bersusun
   ke bawah, bukan berdampingan) supaya nominal selalu punya ruang cukup
   untuk 1 baris utuh.
   PERBAIKAN #2 (audit tampilan mobile, September 2026): komentar lama di
   atas mengklaim `.col-6.col-xl-3` dipakai "KHUSUS" utk SEMUA kartu KPI di
   aplikasi -- TERNYATA TIDAK, beberapa halaman memakai kombinasi kolom
   Bootstrap lain utk pola kartu KPI yang SAMA PERSIS (nominal rupiah dalam
   `.card.kpi`), jadi tidak pernah kena aturan di atas & masih berdampingan
   2-kolom sempit di HP: `.col-6.col-xl-4` (Laporan, Belum Dibayar Gabungan,
   Pemakaian Material), dan `.col-6.col-xl` lebar-otomatis (Permintaan Dana,
   Pengajuan Pembayaran Mandor). Disatukan di sini supaya SEMUA kartu KPI,
   apa pun kombinasi kolomnya, konsisten bersusun 1 kolom penuh di HP. */
@media (max-width: 767.98px) {
  .col-6.col-xl-3, .col-6.col-xl-4, .col-6.col-xl { flex: 0 0 100%; max-width: 100%; width: 100%; }
}

/* NB: perbaikan grid "Pengeluaran per Kabupaten" (.divisi-kabupaten-grid)
   dipindah ke assets/css/dashboard.css -- BUKAN di sini -- karena
   dashboard.css di-<link> belakangan di bagian bawah tiap view dashboard
   (setelah mobile.css di <head>), sehingga pada spesifisitas selector yang
   sama, aturan di dashboard.css SELALU menang walau ada @media yang cocok
   di sini (urutan sumber menentukan, bukan lokasi @media). Taruh override
   di file yang urutannya lebih akhir supaya benar-benar berlaku. Lihat
   catatan lengkap di dashboard.css dekat definisi .divisi-kabupaten-grid. */

/* ---------------------------------------------------------------------------
   7c) Kartu Ringkasan per Divisi & "Nilai Kontrak per Lokasi" di HP:
   rapikan jarak dalam supaya konsisten dgn lebar layar sempit (sebelumnya
   memakai padding desktop 16-20px yang terasa longgar/tidak presisi di
   320-390px, dan chip/head bisa terasa terlalu lebar di sisi kiri-kanan).
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .divisi-card-head { padding: 13px 14px; gap: 10px; }
  .divisi-card-head .divisi-chip { width: 34px; height: 34px; font-size: 14px; }
  .divisi-card-head-txt h3 { font-size: 14px; }
  .divisi-card-head-txt span { font-size: 11px; }
  .divisi-card > .card-body.divisi-card-body { padding: 13px 14px 15px; }
  .divisi-section-divider { margin: 14px 0 10px; }
  .divisi-stat-row.divisi-stat-total .mini-val { font-size: 15px; }

  /* Kartu umum (bukan .divisi-card) di dashboard, mis. "Nilai Kontrak per
     Lokasi", "Daftar Utang", "Transaksi Terbaru" -- padding lebih ringkas
     & presisi di layar sempit. */
  .content .card > .card-body { padding: 14px 14px 15px; }
  .dash-section-title { font-size: 13.5px; margin-bottom: 6px; }
  .divisi-mini-title { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   8) DataTables: kontrol length/cari/info/paging tidak melebar/terpotong di HP
   PERBAIKAN PENTING: library yang dipakai (datatables.net(-bs5)@2.0.8) memakai
   nama class BARU sejak DataTables v2 -- dt-length/dt-search/dt-info/dt-paging/
   dt-container -- BUKAN lagi nama v1 (dataTables_length/dataTables_filter/
   dataTables_info/dataTables_paginate/dataTables_wrapper) yang SEBELUMNYA
   ditarget di sini. Karena kelas v1 itu tidak pernah cocok dengan DOM asli,
   seluruh blok ini sebelumnya adalah dead code (tidak pernah berjalan) di
   SEMUA halaman berbasis tabel (Transaksi, Master, Kasbon, Kas Masuk, Utang,
   Users, Karyawan, Log) -- kontrol "Tampilkan N entri", kotak Cari, info
   halaman, dan navigasi halaman jadi mengikuti lebar kontennya sendiri
   (Bootstrap col-md-auto tidak aktif di bawah 768px) sehingga bisa melebar
   sedikit melewati kartu dan terpotong di tepi layar (body punya
   overflow-x:hidden). Nama kelas v1 TETAP dipertahankan di bawah (tidak
   berbahaya, sekadar tidak cocok) untuk jaga-jaga bila versi berubah lagi. */
@media (max-width: 767.98px) {
  /* Netralkan gutter negatif .row DataTables supaya tidak meluber dari kartu. */
  .dt-container .row,
  .dataTables_wrapper .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
  .dt-container .row > [class*="col-"] { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 575.98px) {
  .dt-length, .dt-info, .dt-search, .dt-paging,
  .dataTables_length, .dataTables_info, .dataTables_paginate, .dataTables_filter {
    text-align: center !important; float: none !important; width: 100%;
    margin: 6px 0;
  }
  /* Kolom pembungkus (col-md-auto dst.) dipaksa selebar penuh & bertumpuk,
     supaya "Tampilkan N entri" dan kotak "Cari" tidak berdempetan/terpotong. */
  .dt-container .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .dt-paging .pagination,
  .dataTables_paginate .pagination { justify-content: center; flex-wrap: wrap; }
  .dt-length label,
  .dataTables_length label {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px;
  }
  .dt-search label {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%;
  }
  .dt-search input { max-width: 220px; }
}

/* ---------------------------------------------------------------------------
   9) FAB (Floating Action Button) untuk "Transaksi Baru" di HP
   Muncul hanya di HP pada halaman yang menyediakannya (#btnTambah).
   Tidak menambah elemen baru; kita "pindahkan" tombol #btnTambah jadi FAB
   secara visual bila diberi class .has-fab pada body (lihat catatan JS).
   Aturan di-"kunci" dengan !important supaya style Bootstrap .btn (border,
   padding, line-height) tidak membuat lingkaran jadi tidak presisi/oval.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .fab-tambah {
    position: fixed !important; right: 18px; z-index: 1030;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 56px !important; height: 56px !important;
    min-width: 56px; max-width: 56px;
    border: 0 !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px -4px rgba(15,23,42,.35), 0 2px 8px rgba(15,27,45,.18);
    font-size: 22px; line-height: 1; padding: 0 !important; margin: 0 !important;
    transition: transform .15s ease, box-shadow .15s ease, bottom .15s ease;
  }
  .fab-tambah i { font-size: 22px; line-height: 1; }
  .fab-tambah:active { transform: scale(.93); box-shadow: 0 4px 14px -2px rgba(15,23,42,.30); }
  .fab-tambah span, .fab-tambah .fab-text { display: none !important; }

  /* FAB numpuk PERSIS di titik yang sama dengan gelembung Chat (site-wide,
     .chat-widget di chat.css: juga kanan-bawah, lingkaran 56px) di halaman
     manapun yang punya keduanya -- mis. Transaksi, Kasbon, Utang,
     Pembayaran Mandor, dll. Permintaan pengguna, Agustus 2026: "tombol
     chat tidak usah berpindah tempat, biar tombol tambah transaksi yang
     muncul di atas tombol chat, sejajar" -- jadi gelembung Chat TETAP di
     posisi normalnya (tidak disentuh), dan FAB inilah yang naik satu
     tingkat di atasnya, dengan sisi kanan sejajar (right sama, 12px,
     menyamai .chat-widget). Dipicu selector `:has(#chatWidget)` (bukan
     body.has-fab dari JS) supaya akurat: hanya naik bila elemen gelembung
     Chat SUNGGUH ada di halaman ini (izin 'chat.view' bisa dimatikan Super
     Admin untuk sebagian akun, lihat views/layouts/app.php). */
  body:has(#chatWidget) .fab-tambah {
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------------------
   9b) Panel Notifikasi di HP -> jangan sampai terpotong di tepi layar
   Sebelumnya panel diposisikan relatif ke tombol lonceng (right:0 dari
   .notif-wrap), padahal tombol lonceng BUKAN elemen paling kanan topbar
   (masih ada tombol tema & keluar di sebelah kanannya). Akibatnya panel
   lebar 320px terdorong melewati tepi kanan layar dan terpotong (karena
   body punya overflow-x:hidden). Perbaikan: di HP, panel "dilepas" dari
   posisi tombol lonceng dan ditempel langsung ke tepi layar (fixed).
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .notif-panel {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    right: 10px; left: 10px;
    width: auto; max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   10) Header halaman: tombol aksi tidak boleh terpotong/tumpang tindih di HP
   Sebagian halaman (Laporan, Daftar Pekerjaan, Manajemen Pengguna/Karyawan,
   dll.) punya LEBIH dari satu tombol berdampingan di header (mis. "Excel" +
   "Kasbon (Excel)" + "Cetak / PDF"). Tanpa aturan ini, grup tombol tersebut
   tetap sebaris & terpotong di layar sempit (320–390px) karena tidak ada
   ruang cukup. Solusi aditif: grup tombol dilebarkan penuh & dibolehkan
   membungkus (wrap) ke baris berikutnya, tidak pernah terpotong.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Tombol tunggal di header turun ke bawah judul & melebar penuh */
  .content > .d-flex.justify-content-between > .btn,
  .content > .d-flex.justify-content-between > .btn-brand { width: 100%; }

  /* Grup tombol (div/form berisi beberapa <button>/<a class="btn">) juga
     melebar penuh & boleh membungkus, supaya tombol ke-2/ke-3 tidak
     terdorong keluar layar. */
  .content > .d-flex.justify-content-between > div.d-flex,
  .content > .d-flex.justify-content-between > form.d-flex {
    width: 100%;
    flex-wrap: wrap;
  }
  .content > .d-flex.justify-content-between > div.d-flex > .btn,
  .content > .d-flex.justify-content-between > form.d-flex > .btn {
    flex: 1 1 auto;
  }
}

/* ---------------------------------------------------------------------------
   11) (Dihapus) Dulu berisi aturan pembungkusan tombol aksi KHUSUS untuk
   table.tbl-cardize (lihat riwayat) -- sejak tabel di HP tidak lagi
   ditumpuk jadi kartu (poin 3 di atas), kolom aksi tetap sel tabel biasa
   yang ikut digeser scroll horizontal bersama kolom lain, jadi aturan
   wrap tsb tidak lagi relevan & sudah tidak berefek (target selector-nya
   sudah tidak pernah cocok secara visual). Nomor dipertahankan supaya
   penomoran bagian lain di file ini tidak perlu digeser semua.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   12) Topbar: cegah ikon (notifikasi/tema/keluar) terdorong keluar layar
   di HP paling sempit (320–375px). Judul halaman dipersingkat dgn ellipsis
   alih-alih memaksa topbar melebar/menumpuk ikon.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px;
  }
  .topbar-right { gap: 4px; }
}
@media (max-width: 360px) {
  /* Layar sangat sempit: kecilkan sedikit ikon topbar agar 4 tombol
     (menu/notif/tema/keluar) tetap muat berdampingan tanpa terpotong. */
  .topbar .btn-icon { width: 38px; height: 38px; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   13) Topbar TERKUNCI (selalu kelihatan) saat discroll ke bawah, di HP &
   tablet -- permintaan pengguna, Agustus 2026: "navbar top di mobile buat
   agar terkunci kelihatan terus walau di scroll kebawah, untuk memudahkan
   navigasi".
   layout.css SUDAH memberi `.topbar { position: sticky; top: 0; }`, tapi
   sticky gampang gagal "menempel" pada kombinasi layout flex (.layout ->
   .main -> .topbar) + perilaku address bar dinamis Safari iOS, sehingga
   di praktiknya topbar tetap ikut tergulung ke atas layar saat discroll.
   Perbaikan: di lebar layar mobile/tablet (<=991.98px, SAMA dgn breakpoint
   sidebar berubah jadi menu off-canvas di layout.css), topbar diubah
   literal `position: fixed` menempel penuh ke tepi atas layar -- ini
   dijamin selalu terkunci di tempatnya, terlepas dari kerumitan struktur
   flex/scroll di atasnya, tidak bergantung pada perilaku sticky yang bisa
   berbeda-beda antar browser.
   Karena `fixed` melepas topbar dari alur dokumen (tidak lagi "mendorong"
   ruang bagi konten di bawahnya), `.content` diberi padding-top setara
   tinggi topbar + jarak yang sama dengan padding sisi lain, supaya baris
   pertama konten tidak tertutup/terpotong di bawah topbar. */
@media (max-width: 991.98px) {
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Z-index SENGAJA dipertahankan sama seperti nilai asli (30) di
       layout.css, BUKAN dinaikkan -- supaya urutan tumpuk yang sudah ada
       tidak berubah: sidebar mobile (z-index:40) & backdrop gelapnya
       (z-index:39) tetap tampil DI ATAS topbar saat menu dibuka (menutupi
       topbar juga, bukan topbar malah nongol di atas menu yang terbuka). */
    z-index: 30;
  }
  /* Nilai 16px disamakan dgn desktop (assets/css/layout.css) -- lihat
     catatan di sana soal kenapa 16px (match "mb-3" sitewide, bukan 4px
     yang kelewat mepet atau 24px yang kelewat jauh). */
  .content { padding-top: calc(var(--header-h) + 16px); }
}
@media (max-width: 560px) {
  /* Selaras dgn .content{padding:16px} di layout.css pada lebar ini. */
  .content { padding-top: calc(var(--header-h) + 16px); }
}

/* ============================================================================
   PENYELARASAN TEMA "EXECUTIVE CONSTRUCTION ERP" (September 2026)
   ----------------------------------------------------------------------------
   Ditambahkan saat rombak design system. Bagian di atas berkas ini sudah
   menangani tata letak sempit (sidebar jadi drawer, tombol melebar, dst);
   di sini khusus memastikan komponen BARU/yang berubah pada rombak tema
   tetap nyaman di layar sempit — brief §15 "jangan hanya mengecilkan
   tampilan desktop".
   ========================================================================== */
@media (max-width: 992px) {
  /* Ruang halaman dipadatkan, tetap memakai skala spacing yang sama. */
  .content { padding: var(--sp-4); padding-top: calc(var(--header-h) + var(--sp-4)); }

  /* Kartu jadi satu kolom & tidak "melayang" — bayangan diperkecil supaya
     daftar kartu panjang tidak terasa berat di layar kecil. */
  .content .card { box-shadow: var(--shadow-xs); }
  .content .card:hover { box-shadow: var(--shadow-xs); }

  /* Tabel: selalu bisa digeser mendatar, header tetap terbaca. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table > thead > tr > th { font-size: 10px; padding: var(--sp-2) var(--sp-3); }
  .table > tbody > tr > td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); }

  /* Panel filter & header halaman lebih rapat. */
  /* Sejak padding .filter-panel dihapus (lihat catatan di theme.css), yang
     mengatur jarak dalam adalah .card-body -- jadi versi rapat utk layar
     kecil disetel di situ, bukan lagi di .filter-panel (kalau tetap di sana,
     paddingnya kembali dobel). */
  .filter-panel > .card-body { padding: var(--sp-3) var(--sp-4); }
  .page-title { font-size: var(--fs-title); }
  .page-head  { margin-bottom: var(--sp-4); }
  .page-hero-icon, .settings-hero-icon, .karyawan-hero-icon {
    width: 38px; height: 38px; flex-basis: 38px; font-size: 15px;
  }

  /* KPI: angka tetap dominan, ikon tidak menabrak judul. */
  .kpi-value { font-size: 22px; }
  .kpi-icon  { width: 30px; height: 30px; font-size: 13px; top: var(--sp-3); right: var(--sp-4); }

  /* Modal menempel penuh di layar kecil — lebih mudah dijangkau ibu jari. */
  .modal-body   { padding: var(--sp-4); }
  .modal-header, .modal-footer { padding: var(--sp-3) var(--sp-4); }

  /* Tab bisa digeser mendatar, tidak melipat jadi banyak baris. */
  .nav-tabs, .page-pill-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar, .page-pill-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .page-pill-tabs .nav-link { flex-shrink: 0; }

  /* Target sentuh minimum 40px untuk tombol utama (brief §15). */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }

  /* Pagination tetap dalam satu baris yang bisa digeser. */
  .pagination { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pagination::-webkit-scrollbar { display: none; }
  .pagination-bar { flex-direction: column; align-items: stretch; gap: var(--sp-2); }

  /* State kosong/error diperkecil supaya tidak memenuhi layar. */
  .empty-state, .error-state { padding: var(--sp-7) var(--sp-4); }
  .empty-state-icon, .error-state-icon { width: 44px; height: 44px; font-size: 17px; }
}

@media (max-width: 575.98px) {
  .content { padding: var(--sp-3); padding-top: calc(var(--header-h) + var(--sp-3)); }
  .card-body { padding: var(--sp-4); }
  .page-stat-row { gap: var(--sp-2); }
  .page-stat { padding: var(--sp-2) var(--sp-3); }
}