/*
 * Bootstrap 5 pieces used by datatables.net-bs5, scoped to DataTables only.
 * The rest of the admin template stays on its existing styles.
 */

.dt-container,
.card-datatable {
    --bs-border-width: 1px;
    --bs-border-color: rgb(var(--color-border));
    --bs-body-color: rgb(var(--color-content));
    --bs-body-bg: rgb(var(--color-surface));
    --bs-secondary-color: rgb(var(--color-content-muted));
    --bs-link-color: rgb(var(--color-primary));
    --bs-primary: rgb(var(--color-primary));
    --bs-primary-rgb: var(--color-primary);
    --bs-focus-ring-color: rgb(var(--color-primary) / 0.25);
}

.dt-container .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.dt-container .col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.dt-container .col-md-auto {
    flex: 0 0 auto;
    width: auto;
}

.dt-container .d-md-flex {
    display: flex;
}

.dt-container .justify-content-between {
    justify-content: space-between;
}

.dt-container .align-items-center {
    align-items: center;
}

.dt-container .me-auto {
    margin-right: auto;
}

.dt-container .ms-auto {
    margin-left: auto;
}

.dt-container .mt-2 {
    margin-top: 0.5rem;
}

.dt-container .form-control,
.dt-container .form-select {
    display: inline-block;
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--color-content));
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    border-radius: 0.375rem;
    appearance: none;
}

.dt-container .form-control-sm,
.dt-container .form-select-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
}

.dt-container .form-select {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
}

.dt-container .form-control:focus,
.dt-container .form-select:focus {
    border-color: rgb(var(--color-primary));
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(var(--color-primary) / 0.2);
}

.dt-container .pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.dt-container .page-item .page-link,
.dt-container .page-item .dt-paging-button {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    color: rgb(var(--color-primary));
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    text-decoration: none;
}

.dt-container .page-item:first-child .page-link {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.dt-container .page-item:last-child .page-link {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.dt-container .page-item:not(:first-child) .page-link {
    margin-left: -1px;
}

.dt-container .page-item.active .page-link {
    z-index: 1;
    color: rgb(var(--color-primary-contrast));
    background-color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
}

.dt-container .page-item.disabled .page-link {
    color: rgb(var(--color-content-subtle));
    pointer-events: none;
    background-color: rgb(var(--color-surface));
}

.dt-container .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: rgb(var(--color-surface-muted));
}

.card-datatable table.dataTable {
    margin: 0.75rem 0 !important;
    width: 100% !important;
}

/*
 * Bootstrap `.table` cell chrome. datatables.net-bs5 expects this; we do not
 * load Bootstrap globally because it restyles the rest of the admin shell.
 */
.dt-container table.dataTable.table {
    --bs-table-color: rgb(var(--color-content));
    --bs-table-bg: transparent;
    --bs-table-border-color: rgb(var(--color-border));
    caption-side: bottom;
    border-collapse: collapse;
    vertical-align: top;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.dt-container table.dataTable.table > :not(caption) > * > * {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-table-border-color);
    background-color: var(--bs-table-bg);
    vertical-align: middle;
}

.dt-container table.dataTable.table > thead {
    vertical-align: bottom;
}

.dt-container table.dataTable.table > thead > tr > th,
.dt-container table.dataTable.table > thead > tr > td {
    border-bottom-width: 2px;
    font-weight: 600;
    color: rgb(var(--color-content-muted));
}

.dt-container table.dataTable.table > tbody > tr:hover > * {
    background-color: rgb(var(--color-surface-muted) / 0.65);
}

.dt-container table.dataTable.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.dt-container table.dataTable thead th.dt-left div.dt-column-header,
.dt-container table.dataTable thead th.dt-left div.dt-column-footer {
    flex-direction: row;
}