/* ==========================================
   DESIGN SYSTEM - TABLES & DATA LISTS
   ========================================== */

.table-responsive {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-16);
    background: var(--ui-card-bg);
    box-shadow: var(--shadow-soft);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Cegah tabel lebar mendorong layout halaman: scroll tetap di dalam wrapper. */
#layoutSidenav_content,
#layoutSidenav_content > main,
#layoutSidenav_content .container-fluid,
.card,
.card-body,
.card-body > form,
.card-body > .table-responsive,
.table-responsive {
    min-width: 0;
}

.table {
    margin-bottom: 0;
    width: 100%;
    color: var(--ui-heading);
    border-collapse: separate;
    border-spacing: 0;
}

/* Kunci lebar kolom sejak cat pertama (anti-geser saat font/ikon/JS tiba).
   Semua tabel admin mendefinisikan width eksplisit di tiap th. */
#datatablesSimple { table-layout: fixed; width: 100%; }

/* Pola yang sama (referensi role kesiswaan) untuk seluruh tabel th-wrap
   ortu/siswa: lebar kolom dari width th — tak berubah walau font/ikon/JS tiba belakangan. */
.table.th-wrap { table-layout: fixed; width: 100%; }

/* Kunci tinggi wadah pager (tombol nav dirender JS belakangan). */
[id^="pgNav"] { min-height: 62px; }

.table thead th {
    background-color: var(--ui-bg);
    color: var(--ui-text);
    font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: clamp(0.45rem, 0.35rem + 0.3vw, 0.75rem) clamp(0.5rem, 0.4rem + 0.3vw, 0.85rem);
    border-bottom: 1px solid var(--ui-border);
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: left !important;
    white-space: nowrap !important;
}

.table tbody td {
    padding: clamp(0.45rem, 0.35rem + 0.3vw, 0.75rem) clamp(0.5rem, 0.4rem + 0.3vw, 0.85rem);
    font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.875rem);
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
    transition: var(--transition-200);
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sel berisi checkbox saja: jangan dipotong (native checkbox > lebar kolom sempit). */
.table thead th:has(> input[type="checkbox"]),
.table tbody td:has(> input[type="checkbox"]) {
    overflow: visible;
}

/* Header kolom boleh melipat (th-wrap): judul panjang tampil 2 baris rapi.
   overflow-wrap:anywhere → kata panjang (mis. "PELANGGARAN") ikut isi kolom,
   tidak memaksa kolom melebar melebihi isi sel. */
.table.th-wrap thead th {
    white-space: normal !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Kolom teks panjang: bungkus normal agar terbaca utuh. */
.cell-wrap {
    min-width: 180px;
    max-width: 300px;
    word-break: break-word;
}
.col-wrap {
    min-width: 180px;
    max-width: 320px;
    word-break: break-word;
}
.table tbody td.cell-wrap,
.sales-table tbody td.cell-wrap,
.table tbody td.col-wrap,
.sales-table tbody td.col-wrap {
    white-space: normal !important;
}

/* Tipografi & kontrol tabel di layar HP. */
@media (max-width: 575.98px) {
    .table thead th {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        white-space: normal !important;
    }
    .table th, .table td {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .sales-table th {
        white-space: normal;
    }
    .table tbody td {
        font-size: 0.75rem;
        line-height: 1.35;
    }
    .table select, .table input, .table button, .table .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.45rem;
    }
    .table .badge {
        padding: 0.25em 0.55em;
    }
    /* Mobile: kolom fit to content (lepas lebar fixed inline). */
    table.table,
    #datatablesSimple,
    .table.th-wrap {
        table-layout: auto;
        width: auto;
    }
    .table th {
        width: auto !important;
    }
    /* Mobile: kolom deskriptif ikut isi sel (lepas min-width desktop). */
    .table tbody td.cell-wrap,
    .table tbody td.col-wrap,
    .sales-table tbody td.cell-wrap,
    .sales-table tbody td.col-wrap {
        min-width: 140px;
    }
}

.table tbody tr:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.5);
}

.table tbody tr:hover td {
    background-color: rgba(30, 124, 255, 0.06);
}

/* Keep reports that use a plain .table visually aligned with Data Siswa. */
.card > .card-body > .table,
.card > .card-body > form > .table {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-14);
    overflow: hidden;
}

.user-status { white-space: nowrap; font-size: clamp(0.725rem, 0.68rem + 0.2vw, 0.85rem); font-weight: 600; line-height: 1.4; }
.user-status-online { color: #16a34a; }
.user-status-last { color: #334155; }
.user-status-offline { color: #94a3b8; }
@media (max-width: 575.98px) {
    .user-status { letter-spacing: 0; }
}