/* ==========================================================================
   Gaya bersama, mobile-first.

   Aturan di luar @media berlaku untuk layar kecil; @media (min-width: 992px)
   yang menaikkannya ke tampilan tabel. Ambang 992px dipilih setelah diuji:
   di 768px tabel karyawan yang 9 kolom masih melimpah keluar layar. Dipakai halaman admin (lewat
   public/header.php) dan halaman publik pengajuan_bantuan.php.
   ========================================================================== */

:root {
    --radius: 14px;
    --sentuh: 44px;              /* target sentuh minimum */
    --garis: #e4e6ef;
    --redup: #6c757d;
}

/* Halaman admin punya mode gelap; kartu harus ikut, bukan putih di latar gelap */
body.dark {
    --garis: rgba(255, 255, 255, 0.14);
    --redup: #a8adb7;
}

/* header.php hanya menata .sb-card, sedangkan halaman daftar memakai .card
   bawaan Bootstrap — akibatnya area tabel tetap putih saat mode gelap. */
body.dark .card {
    background-color: var(--card-bg);
    color: var(--text);
    border-color: var(--garis);
}
body.dark .form-control,
body.dark .form-select {
    background-color: var(--card-bg);
    color: var(--text);
    border-color: var(--garis);
}
body.dark .dataTables_wrapper,
body.dark table.dataTable,
body.dark .page-link {
    color: var(--text);
}
body.dark .page-link { background-color: var(--card-bg); border-color: var(--garis); }

/* Tombol dan input cukup besar untuk jempol. Font 16px supaya Safari iOS
   tidak otomatis men-zoom halaman saat input difokuskan. */
.btn, .form-control, .form-select {
    min-height: var(--sentuh);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Pasangan label/nilai, untuk ringkasan data yang bukan daftar
   -------------------------------------------------------------------------- */
.ringkas-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--garis);
}
.ringkas-item:last-of-type { border-bottom: 0; }
.ringkas-item .label { color: var(--redup); min-width: 0; }
.ringkas-item .nilai {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;        /* "Rp 2.000.000" jangan pecah dua baris */
}

/* --------------------------------------------------------------------------
   Daftar: di HP tiap baris jadi kartu, di desktop kembali jadi tabel.
   Markup-nya satu. Tiap <td> cukup diberi data-label="Nama Kolom".
   -------------------------------------------------------------------------- */
.tabel-daftar {
    width: 100%;
    /* Bootstrap 5 memasang latar pada tiap SEL lewat --bs-table-bg, bukan pada
       baris. Dibuat transparan supaya latar kartu/wadah yang terlihat, dan
       mode gelap tidak menyisakan sel putih. */
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    /* Mode kartu tidak boleh punya lebar minimum: tabel yang dipaksa lebar
       akan mendorong nilai keluar layar dan menyisakan label saja. */
    min-width: 0;
}
body.dark .tabel-daftar {
    --bs-table-color: var(--text);
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
}

.tabel-daftar thead {
    /* Disembunyikan dari mata, tetap terbaca pembaca layar */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tabel-daftar tr {
    display: block;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    padding: 0.25rem 0.875rem;
    margin-bottom: 0.75rem;
    /* Diselesaikan di elemen ini, bukan di :root — --card-bg didefinisikan
       di body.dark, jadi indireksi lewat :root akan selalu jatuh ke putih. */
    background: var(--card-bg, #fff);
}

.tabel-daftar td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--garis);
    text-align: left !important;
    white-space: normal !important;   /* lawan kelas .nowrap milik DataTables */
}
.tabel-daftar tr td:last-child { border-bottom: 0; }

.tabel-daftar td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--redup);
    font-size: 0.8125rem;
}

/* Sel yang isinya tombol: biar tombolnya melebar, label tetap di kiri */
.tabel-daftar td.sel-aksi { flex-wrap: wrap; gap: 0.5rem; }
.tabel-daftar td.sel-aksi .btn { flex: 1 1 auto; }

/* Baris TOTAL di tfoot. colspan tidak bermakna saat baris jadi kartu, jadi
   selnya disembunyikan dan sisanya tampil sebagai kartu ringkasan. */
.tabel-daftar tr.baris-total {
    border-color: var(--redup);
    background: rgba(0, 0, 0, 0.03);
    font-weight: 600;
}
.tabel-daftar tr.baris-total td.sel-total {
    display: block;
    text-align: left;
    letter-spacing: .06em;
    font-size: .8125rem;
    color: var(--redup);
    border-bottom: 1px solid var(--garis);
}
.tabel-daftar tr.baris-total td.sel-total::before { content: none; }
body.dark .tabel-daftar tr.baris-total { background: rgba(255, 255, 255, 0.05); }

/* Baris yang sedang dipilih (mis. untuk approve massal) */
.tabel-daftar tr.terpilih {
    border-color: #0d6efd;
    box-shadow: inset 0 0 0 1px #0d6efd;
    background: rgba(13, 110, 253, 0.06);
}

/* Baris bertanda, mis. nilai tagihan melewati limit */
.tabel-daftar tr.lewat-limit {
    border-color: #f1aeb5;
    background: #fdf2f3;
}

/* --------------------------------------------------------------------------
   Kontrol DataTables: di HP ditumpuk, jangan berdesakan sebaris
   -------------------------------------------------------------------------- */
/* dom DataTables membungkus kontrolnya dalam baris flex; di layar sempit
   baris itu harus melipat, kalau tidak kotak pencarian mendorong halaman
   sampai muncul scroll horizontal. */
.dataTables_wrapper .d-flex { flex-wrap: wrap; }
.dataTables_wrapper .l,
.dataTables_wrapper .f { width: 100%; }

/* Selektor sengaja lebih khusus (pakai div): CSS DataTables dimuat sesudah
   berkas ini dan memaksa text-align:center di layar kecil. */
.dataTables_wrapper div.dt-buttons,
.dataTables_wrapper div.dataTables_length,
.dataTables_wrapper div.dataTables_filter {
    float: none !important;
    width: 100%;
    text-align: left;
    margin-bottom: 0.5rem;
}
.dataTables_wrapper div.dataTables_length label,
.dataTables_wrapper div.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_filter input {
    width: 100%;
    box-sizing: border-box;
    margin: 0.25rem 0 0;
    min-height: var(--sentuh);
}
/* 988 baris = 99 halaman. Deretan tombolnya harus boleh melipat, kalau
   tidak ia mendorong halaman melebihi lebar layar. */
.dataTables_wrapper .dataTables_paginate { width: 100%; }
.dataTables_wrapper .dataTables_paginate ul.pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
    min-width: var(--sentuh);
    text-align: center;
    padding: 0.5rem 0.625rem;
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ringkas-item { display: block; border-bottom: 0; padding: 0.125rem 0; }
    .ringkas-item .nilai { text-align: left; }
    .ringkas-item .label::after { content: ':\00a0'; }

    .tabel-daftar thead {
        position: static;
        width: auto; height: auto;
        overflow: visible;
        clip: auto;
    }
    .tabel-daftar thead th {
        border-bottom: 2px solid var(--garis);
        color: var(--redup);
        font-size: 0.875rem;
    }
    .tabel-daftar tr {
        display: table-row;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: transparent;
    }
    .tabel-daftar td {
        display: table-cell;
        vertical-align: middle;
        padding: 0.625rem 0.5rem;
        border-bottom: 1px solid var(--garis);
    }
    .tabel-daftar td.text-end { text-align: right !important; }
    /* Tabel berkolom banyak (mis. laporan, 9 kolom) diberi lebar minimum
       supaya kolomnya tidak gepeng; .tabel-bungkus yang menggeser. */
    .tabel-daftar.kolom-banyak { min-width: 1100px; }
    .tabel-daftar tr.baris-total td.sel-total {
        display: table-cell;
        text-align: center;
        font-size: inherit;
        letter-spacing: normal;
        color: inherit;
    }
    .tabel-daftar td.sel-aksi { white-space: nowrap !important; }
    .tabel-daftar td.sel-aksi .btn { flex: none; }
    .tabel-daftar td::before { content: none; }
    .tabel-daftar tr.lewat-limit { background: #fdf2f3; }

    .dataTables_wrapper .l,
    .dataTables_wrapper .f,
    .dataTables_wrapper div.dt-buttons,
    .dataTables_wrapper div.dataTables_length,
    .dataTables_wrapper div.dataTables_filter { width: auto; }
    .dataTables_wrapper div.dt-buttons .btn { flex: none; }
    .dataTables_wrapper .dataTables_filter input { width: auto; }
}

/* --------------------------------------------------------------------------
   Jaring pengaman: kalau tabel masih terlalu lebar, yang menggeser adalah
   wadahnya, bukan seluruh halaman.
   -------------------------------------------------------------------------- */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }