.table-responsive,
.dataTables_wrapper {
    width: 100%;
}

.table {
    color: var(--green-slate);
    background: #FFFFFF;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: #E8EEF5 !important;
}

.table thead th,
.thead-light th {
    background: #F1F5F9 !important;
    color: var(--green-navy);
    border-bottom: 1px solid var(--green-border) !important;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.table td {
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FBFDFF;
}

.table-hover tbody tr:hover {
    background-color: rgba(19, 184, 166, .06);
}

.dataTables_filter input,
.dataTables_length select {
    border: 1px solid var(--green-border);
    border-radius: 10px;
    padding: .38rem .65rem;
    outline: none;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 .18rem rgba(19, 184, 166, .12);
}

.page-item.active .page-link {
    background: var(--green-primary);
    border-color: var(--green-primary);
}

.page-link {
    color: var(--green-navy);
    border-color: var(--green-border);
}

@media (max-width: 767.98px) {
    .card-body > .table,
    .card-body > div > .table {
        min-width: 720px;
    }

    .card-body:has(> .table),
    .card-body:has(> div > .table) {
        overflow-x: auto;
    }
}

@media (max-width: 767.98px) {
    .green-table-scroll,
    .table-responsive,
    .green-datatable-wrap,
    .card-body:has(.green-card-table),
    .card-body:has(.dataTable) {
        overflow: visible !important;
    }

    .card-body > .green-card-table,
    .card-body > div > .green-card-table,
    .green-responsive-table.green-card-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
        font-size: .92rem;
    }

    .green-responsive-table.green-card-table thead,
    .green-responsive-table.green-card-table tfoot {
        display: none !important;
    }

    .green-responsive-table.green-card-table tbody,
    .green-responsive-table.green-card-table tbody tr {
        display: block;
        width: 100%;
    }

    .green-responsive-table.green-card-table tbody tr {
        margin-bottom: .85rem;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .28);
        border-radius: 12px;
        background: #FFFFFF;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    }

    .green-responsive-table.green-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .green-responsive-table.green-card-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
        align-items: center;
        width: 100% !important;
        min-height: 44px;
        padding: .68rem .78rem !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .20) !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .green-responsive-table.green-card-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .green-responsive-table.green-card-table tbody td::before {
        content: attr(data-label);
        padding-right: .75rem;
        color: var(--green-muted);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-align: left;
        text-transform: uppercase;
    }

    .green-responsive-table.green-card-table tbody td.green-empty-cell {
        display: block !important;
        padding: 1rem !important;
        text-align: center !important;
        color: var(--green-muted);
    }

    .green-responsive-table.green-card-table tbody td.green-empty-cell::before {
        display: none;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: .45rem;
        text-align: left !important;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell::before {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell .btn,
    .green-responsive-table.green-card-table tbody td.green-actions-cell a,
    .green-responsive-table.green-card-table tbody td.green-actions-cell button {
        flex: 0 0 auto;
        min-width: 38px;
    }

    body.green-dark-mode .green-responsive-table.green-card-table tbody tr {
        background: #111827;
        border-color: #243044;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    }

    body.green-dark-mode .green-responsive-table.green-card-table tbody td {
        border-bottom-color: rgba(148, 163, 184, .18) !important;
    }

    body.green-dark-mode .green-responsive-table.green-card-table tbody td::before {
        color: #9CA3AF;
    }
}

@media (max-width: 575.98px) {
    .green-responsive-table.green-card-table tbody tr {
        border-radius: 10px;
    }

    .green-responsive-table.green-card-table tbody td {
        display: block !important;
        min-height: auto;
        padding: .62rem .7rem !important;
        text-align: left !important;
        line-height: 1.35;
        overflow: visible !important;
    }

    .green-responsive-table.green-card-table tbody td::before {
        display: block;
        margin-bottom: .24rem;
        padding-right: 0;
        font-size: .68rem;
        line-height: 1.15;
    }

    .green-responsive-table.green-card-table tbody td,
    .green-responsive-table.green-card-table tbody td * {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .45rem;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell::before {
        margin-bottom: 0;
    }

    .green-responsive-table.green-card-table tbody td.green-actions-cell .btn,
    .green-responsive-table.green-card-table tbody td.green-actions-cell a,
    .green-responsive-table.green-card-table tbody td.green-actions-cell button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: .82rem;
    }
}