:root {
    --bs-font-sans-serif: 'Inter', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Kustomisasi Header Tabel */
thead th.sortable-header {
    cursor: pointer;
    user-select: none;
}

thead th .sort-arrow {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.5;
    display: inline-block;
    width: 1em;
}

thead th.sortable-header:not(.sorted-asc):not(.sorted-desc) .asc,
thead th.sortable-header:not(.sorted-asc):not(.sorted-desc) .desc {
    opacity: 0.2;
}
thead th.sorted-asc .desc,
thead th.sorted-desc .asc {
    display: none;
}
thead th.sorted-asc .asc,
thead th.sorted-desc .desc {
    opacity: 1;
}

.result-box {
    /* Dihapus agar tabel responsive bisa menggunakan lebar penuh */
}


/* --- Gaya Baru untuk Tabel Accordion Responsive --- */

/* Tombol buka/tutup detail */
.details-control {
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: middle;
}

/* Sembunyikan kolom yang kurang penting di layar kecil */
@media (max-width: 767px) {
    .table thead .desktop-only,
    .table tbody .desktop-only {
        display: none;
    }
}

/* Tampilkan hanya tombol kontrol di layar kecil */
@media (min-width: 768px) {
    .details-control-cell {
        display: none;
    }
}

/* Baris detail yang tersembunyi */
.details-row {
    display: none; /* Sembunyikan secara default */
}

.details-row.shown {
    display: table-row; /* Tampilkan saat aktif */
}

/* Pastikan background konsisten dengan tema strip tabel */
body[data-bs-theme="light"] .details-row {
     background-color: rgba(0, 0, 0, 0.03);
}
body[data-bs-theme="dark"] .details-row {
     background-color: rgba(255, 255, 255, 0.03);
}


.details-row td {
    padding: 1rem !important;
    border-top: none !important;
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.details-content div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--bs-border-color-translucent);
    padding-bottom: 0.5rem;
    flex-wrap: wrap; /* Agar responsif jika konten panjang */
}
.details-content div:last-child {
    border-bottom: none;
}
.details-content strong {
    color: var(--bs-primary-text-emphasis);
    margin-right: 10px;
}
.details-content span {
    text-align: right;
    word-break: break-all;
}

/* Penyesuaian untuk layar mobile (Responsive) */
@media (max-width: 576px) {
    .display-5 {
        font-size: 2.2rem;
    }
}