/* tables.css — tabelle a card (.card-table), badge di stato e paginazione. */

.card-table {
    background-clip: padding-box;
    box-shadow: 0 2px 6px 0 rgb(67 89 113 / 12%);
    border-radius: 0.5rem;
    border: 0 solid #d9dee3;
}

    .card-table .table-responsive {
        min-height: 220px;
    }

    .card-table .card-header {
        padding: 1.5rem 1.5rem;
        background-color: transparent;
        border-bottom: 0 solid #d9dee3;
    }

    .card-table .card-footer {
        padding: 0.25rem 1.5rem;
        border-top: 0px solid #d9dee3;
        background-color: transparent;
    }

    .card-table .table {
        --bs-table-bg: transparent;
        --bs-table-accent-bg: transparent;
        --bs-table-striped-color: var(--txt-color-dark);
        --bs-table-striped-bg: #f9fafb;
        --bs-table-active-color: var(--txt-color-dark);
        --bs-table-active-bg: var(--back-color-dark);
        --bs-table-hover-color: var(--txt-color-dark);
        --bs-table-hover-bg: var(--back-color-light);
        width: 100%;
        color: var(--txt-color-dark);
        vertical-align: middle;
        border-color: #d9dee3;
    }

    .card-table th {
        color: #566a7f;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 1px;
        padding: 10px;
    }

    .card-table .table > :not(:first-child) {
        border-top: 2px solid #d9dee3;
    }

    .card-table tr > td {
        padding: 10px;
        text-transform: uppercase;
    }

    .card-table .badge {
        font-weight: 500;
        font-size: 0.8125em;
        padding: 0.52em 0.593em;
    }

.badge-color-success {
    background-color: var(--back-color-badge-success) !important;
    color: var(--btn-success-color) !important;
}

.badge-color-open {
    background-color: var(--back-color-badge-open) !important;
    color: var(--btn-info-color) !important;
}

.badge-color-take {
    background-color: var(--back-color-badge-take) !important;
    color: var(--btn-primary-color) !important;
}

.badge-color-not-resolved {
    background-color: var(--back-color-badge-not-resolved) !important;
    color: var(--btn-danger-color) !important;
}

.badge-color-pending {
    background-color: var(--back-color-badge-pending) !important;
    color: var(--btn-warning-color) !important;
}

/*Start Pagination*/

.custom-button-page {
    min-width: calc( 2.1875rem + 0px );
    color: var(--txt-color-dark);
    background-color: #f0f2f4;
    border: 0px solid #d9dee3;
    margin: 0 10px;
    border-radius: 0.25rem;
}

    .custom-button-page:hover {
        background-color: var(--back-color-dark);
        color: var(--txt-color-dark);
    }

.custom-active-button {
    border-color: var(--txt-color-active-link);
    background-color: var(--txt-color-active-link);
    color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgb(105 108 255 / 40%);
}

    .custom-active-button:hover {
        color: #fff;
        border-color: var(--txt-color-active-link);
        background-color: var(--txt-color-active-link);
    }