/* Buat tabel jadi card hanya untuk yang pakai class .table-card-responsive */
@media (max-width: 768px) {

    /* ===================== */
    /* TABEL-CARD-RESPONSIVE */
    /* ===================== */
    .table-card-responsive,
    .table-card-responsive thead,
    .table-card-responsive tbody,
    .table-card-responsive th,
    .table-card-responsive td,
    .table-card-responsive tr {
        display: block;
        width: auto;
    }

    .table-card-responsive thead {
        display: none;
        /* Sembunyikan header tabel */
    }

    .table-card-responsive tr {
        margin-bottom: 15px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        /* padding: 10px; */
        border-radius: 8px;
        height: 70%;
        /* background: #f8f9fa; */
        background-color: white;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .table-card-responsive td {
        text-align: left;
        /* padding: 5px; */
        position: relative;
        border: none !important;
    }

    .table-card-responsive td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        /* margin-bottom: 5px; */
        color: #495057;
        background-color: yellow;
    }

    .table-mobile {
        zoom: 50%;
        transform: rotate(90deg);
    }

    /* ======= */
    /* SIDEBAR */
    /* ======= */
    .sidenav {
        background: white;
        /* Warna gelap transparan */
    }
}