accounting_dev_v2/assets/css/style-custom.css

/*
 * Compatibility layer untuk tabel pada view lama.
 * Seluruh warna, tombol, card, form, modal, navigasi, dan layout global
 * dikelola oleh app-final.css. Jangan menambahkan tema global ke file ini.
 */

.table-responsive-premium,
.app-v2 .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-responsive-premium::-webkit-scrollbar,
.app-v2 .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive-premium::-webkit-scrollbar-thumb,
.app-v2 .table-responsive::-webkit-scrollbar-thumb {
    background: #cfd5de;
    border-radius: 999px;
}

.modern-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.modern-table th,
.modern-table td {
    vertical-align: middle;
}

/* Kolom aksi harus tetap tersedia dan tombol tidak boleh terpotong. */
.modern-table th:last-child,
.modern-table td:last-child,
.app-v2 table.dataTable th:last-child,
.app-v2 table.dataTable td:last-child {
    min-width: 112px;
    white-space: nowrap;
}

.modern-table td:last-child .btn,
.app-v2 table.dataTable td:last-child .btn,
.app-v2 table.dataTable td:last-child button,
.app-v2 table.dataTable td:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
}

.dataTables_wrapper {
    max-width: 100%;
    overflow: visible;
}

.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    /* Tabel biasa menjadi kartu detail. DataTables tetap memakai mekanisme
       responsive/scroll miliknya agar pagination dan detail row tidak rusak. */
    .responsive-detail-table:not(.dataTable),
    .modern-table:not(.dataTable) {
        min-width: 0;
    }

    .responsive-detail-table:not(.dataTable) thead,
    .modern-table:not(.dataTable) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .responsive-detail-table:not(.dataTable) tbody,
    .responsive-detail-table:not(.dataTable) tr,
    .responsive-detail-table:not(.dataTable) td,
    .modern-table:not(.dataTable) tbody,
    .modern-table:not(.dataTable) tr,
    .modern-table:not(.dataTable) td {
        display: block;
        width: 100%;
    }

    .responsive-detail-table:not(.dataTable) tr,
    .modern-table:not(.dataTable) tr {
        margin: 9px 0;
        padding: 5px;
        border: 1px solid var(--line, #e2e6ec);
        border-radius: 11px;
        background: #fff;
    }

    .responsive-detail-table:not(.dataTable) td,
    .modern-table:not(.dataTable) td {
        display: flex;
        min-height: 38px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 9px;
        border: 0;
        border-bottom: 1px dashed #e8ebef;
        text-align: right;
    }

    .responsive-detail-table:not(.dataTable) td::before,
    .modern-table:not(.dataTable) td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: #5c6676;
        font-weight: 600;
        text-align: left;
    }

    .responsive-detail-table:not(.dataTable) td:last-child,
    .modern-table:not(.dataTable) td:last-child {
        display: flex;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
        border-bottom: 0;
    }

    .responsive-detail-table:not(.dataTable) td:last-child::before,
    .modern-table:not(.dataTable) td:last-child::before {
        margin-right: auto;
    }

    .app-v2 .dataTables_wrapper .row {
        gap: 7px;
    }

    .app-v2 .dataTables_wrapper .dataTables_length,
    .app-v2 .dataTables_wrapper .dataTables_filter,
    .app-v2 .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        text-align: left;
    }

    .app-v2 table.dataTable th:last-child,
    .app-v2 table.dataTable td:last-child,
    .app-v2 table.dataTable th:last-child.dtr-hidden,
    .app-v2 table.dataTable td:last-child.dtr-hidden {
        display: table-cell !important;
    }
}

@media print {
    .table-responsive-premium,
    .app-v2 .table-responsive {
        overflow: visible;
    }

    .modern-table {
        min-width: 0;
    }
}