/* ============================================================
   Aturan responsive bersama (Tahap 12)
   ============================================================ */

body { background: #f1f4f9; }

/* Pagination boleh turun baris di layar sempit */
.pagination { flex-wrap: wrap; justify-content: center; }

/* Layar sentuh: tombol kecil dibuat lebih mudah ditekan */
@media (pointer: coarse) {
    .btn-sm { min-height: 38px; padding: .4rem .75rem; }
    .btn-close { padding: .75rem; }
}

/* ---------------- Ponsel dan layar sempit (< 768 px) ---------------- */
@media (max-width: 767.98px) {

    /* Cegah zoom otomatis iOS saat kolom isian diketuk */
    .form-control, .form-select { font-size: 16px; }

    /* Tabel menjadi kartu: satu baris = satu kartu */
    .table-responsive { overflow-x: visible; }

    .table-responsive > .table,
    .table-responsive > .table > tbody,
    .table-responsive > .table > tbody > tr,
    .table-responsive > .table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .table-responsive > .table > thead { display: none; }

    .table-responsive > .table > tbody > tr {
        padding: .5rem 1rem;
        border-bottom: 8px solid #f1f4f9;
    }

    .table-responsive > .table > tbody > tr > td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .25rem 1rem;
        padding: .4rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    /* Label kolom (diisi oleh skrip di layout admin lewat atribut data-label) */
    .table-responsive > .table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex-shrink: 0;
    }

    /* Tanpa label: baris kosong ("belum ada data") dan sel tanpa judul */
    .table-responsive > .table > tbody > tr > td[colspan]::before,
    .table-responsive > .table > tbody > tr > td[data-label=""]::before {
        content: none;
    }

    .table-responsive > .table > tbody > tr > td[colspan] {
        display: block;
        text-align: center;
    }

    /* Progress bar mengisi sisa lebar kartu */
    .table-responsive td .progress { flex: 1 1 120px; min-width: 120px; }

    /* Sel tombol aksi: tombol boleh turun baris */
    .table-responsive td.text-end { justify-content: flex-end; }

    /* Modal pratinjau admin memenuhi layar */
    #previewModal .modal-dialog {
        margin: 0;
        max-width: none;
        height: 100%;
    }
    #previewModal .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    #previewModal .modal-body { flex: 1 1 auto; }
    #previewModal iframe { height: 100% !important; min-height: 60vh; }
}