/* ==========================================================================
   SEJOLI TOOLKIT - MOBILE RESPONSIVE TABLE (CARD VIEW)
   Hanya aktif di mobile screen (max-width: 767px) saat fitur diaktifkan
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* Sembunyikan thead & tfoot bawaan yang menumpuk di atas */
    body.stk-mobile-table-card table.ui.table thead,
    body.stk-mobile-table-card table.dataTable thead,
    body.stk-mobile-table-card table.ui.table tfoot,
    body.stk-mobile-table-card table.dataTable tfoot {
        display: none !important;
    }

    /* Reset pembungkus tabel & DataTables */
    body.stk-mobile-table-card .dataTables_wrapper {
        padding: 0 !important;
    }

    body.stk-mobile-table-card table.ui.table,
    body.stk-mobile-table-card table.dataTable {
        display: block !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 15px 0 !important;
    }

    body.stk-mobile-table-card table.ui.table tbody,
    body.stk-mobile-table-card table.dataTable tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        border: none !important;
    }

    /* Setiap baris TR menjadi Kartu */
    body.stk-mobile-table-card table.ui.table tbody tr,
    body.stk-mobile-table-card table.dataTable tbody tr {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Zebra striped override */
    body.stk-mobile-table-card table.ui.striped.table tbody tr:nth-child(2n) {
        background-color: #ffffff !important;
    }

    /* Setiap cell TD di dalam kartu */
    body.stk-mobile-table-card table.ui.table tbody tr td,
    body.stk-mobile-table-card table.dataTable tbody tr td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 9px 0 !important;
        border: none !important;
        border-bottom: 1px dashed #f0f0f0 !important;
        background: transparent !important;
        font-size: 13px !important;
        color: #374151 !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
        min-height: 38px !important;
    }

    body.stk-mobile-table-card table.ui.table tbody tr td:last-child,
    body.stk-mobile-table-card table.dataTable tbody tr td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Label di sebelah kiri data */
    body.stk-mobile-table-card table.ui.table tbody tr td::before,
    body.stk-mobile-table-card table.dataTable tbody tr td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        color: #6b7280 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    /* Khusus cell 'Detil' atau 'Detail' - jadikan Header Kartu di bagian paling atas */
    body.stk-mobile-table-card table.ui.table tbody tr td[data-label="Detil"],
    body.stk-mobile-table-card table.ui.table tbody tr td[data-label="Detail"],
    body.stk-mobile-table-card table.dataTable tbody tr td[data-label="Detil"],
    body.stk-mobile-table-card table.dataTable tbody tr td[data-label="Detail"] {
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 6px !important;
    }

    body.stk-mobile-table-card table.ui.table tbody tr td[data-label="Detil"]::before,
    body.stk-mobile-table-card table.ui.table tbody tr td[data-label="Detail"]::before,
    body.stk-mobile-table-card table.dataTable tbody tr td[data-label="Detil"]::before,
    body.stk-mobile-table-card table.dataTable tbody tr td[data-label="Detail"]::before {
        display: none !important;
    }

    body.stk-mobile-table-card table.ui.table tbody tr td hr,
    body.stk-mobile-table-card table.dataTable tbody tr td hr {
        margin: 8px 0 !important;
        border: 0 !important;
        border-top: 1px solid #f3f4f6 !important;
    }

    /* Pastikan tombol di dalam kartu terlihat rapi */
    body.stk-mobile-table-card table.ui.table tbody tr td .ui.button,
    body.stk-mobile-table-card table.dataTable tbody tr td .ui.button {
        margin-right: 4px !important;
        margin-bottom: 4px !important;
    }

    /* Jika tabel kosong (colspan) */
    body.stk-mobile-table-card table.ui.table tbody tr td[colspan],
    body.stk-mobile-table-card table.dataTable tbody tr td[colspan] {
        display: block !important;
        text-align: center !important;
        border: none !important;
        color: #9ca3af !important;
        padding: 24px 12px !important;
    }

    body.stk-mobile-table-card table.ui.table tbody tr td[colspan]::before,
    body.stk-mobile-table-card table.dataTable tbody tr td[colspan]::before {
        display: none !important;
    }
}