/* ============================================================================
   DATATABLES.NET PLUGIN — BRAND THEMING
   Targets DataTables 2.x with the Bootstrap 5 integration. Styles the toolbar
   (export buttons, length selector, search), sort indicators, pagination,
   info text, and the processing overlay. Designed to drop into any page; if
   the table lives inside a .card the wrapper padding/borders adapt.
   ============================================================================ */

/* ── Wrapper ───────────────────────────────────────────────────────────── */
.dataTables_wrapper {
    color: var(--text-default);
    font-size: var(--font-size-md);
}

/* When inside a card, inset the wrapper instead of doubling padding */
.card .dataTables_wrapper,
.card-table .dataTables_wrapper,
.card-body > .dataTables_wrapper {
    padding: var(--spacing-md) var(--spacing-lg);
}
.card .card-body--flush > .dataTables_wrapper,
.card-table .card-body > .dataTables_wrapper {
    padding: var(--spacing-md) var(--spacing-lg);
}

/* ── Layout rows (DataTables 2.x layout API) ───────────────────────────── */
.dataTables_wrapper .dt-layout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin: 0 0 var(--spacing-md);
}

.dataTables_wrapper .dt-layout-row:last-of-type {
    margin: var(--spacing-md) 0 0;
}

.dataTables_wrapper .dt-layout-table {
    margin: 0;
}

.dataTables_wrapper .dt-layout-start,
.dataTables_wrapper .dt-layout-end {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.dataTables_wrapper .dt-layout-end { justify-content: flex-end; }
.dataTables_wrapper .dt-layout-full { width: 100%; }

/* ── Search input (.dt-search / legacy .dataTables_filter) ─────────────────
   Renders as a single pill: leading magnifier icon + input. The inline
   "Search:" text label DataTables emits is hidden — the icon does the job. */
.dataTables_wrapper .dt-search,
.dataTables_wrapper .dataTables_filter {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    margin: 0;
    position: relative;
}

/* Hide the inline "Search:" text but keep the label accessible */
.dataTables_wrapper .dt-search > label,
.dataTables_wrapper .dataTables_filter > label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* If the input is INSIDE the label (legacy), bring it back to view */
.dataTables_wrapper .dt-search > label input,
.dataTables_wrapper .dataTables_filter > label input {
    position: static !important;
    width: 280px; height: 38px;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    border: 0;
    background: none;
}

.dataTables_wrapper .dt-search input[type="search"],
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper input[type="search"].dt-input {
    width: 280px;
    height: 38px;
    padding: 0.4rem 1rem 0.4rem 2.4rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-pill) !important;
    background: var(--surface-1)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")
        no-repeat 0.85rem center !important;
    color: var(--text-dark) !important;
    font-size: var(--font-size-md) !important;
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
    appearance: none;
    box-shadow: var(--shadow-xs);
}

/* Native search clear button — make it match brand */
.dataTables_wrapper input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--text-subtle)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M2.293 2.293a1 1 0 0 1 1.414 0L8 6.586l4.293-4.293a1 1 0 1 1 1.414 1.414L9.414 8l4.293 4.293a1 1 0 0 1-1.414 1.414L8 9.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")
        no-repeat center / 8px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 0.4rem;
    opacity: 0.7;
    transition: var(--transition-fast);
}
.dataTables_wrapper input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--text-muted);
    opacity: 1;
}

.dataTables_wrapper .dt-search input::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--text-subtle);
    font-weight: var(--font-weight-regular);
}

.dataTables_wrapper .dt-search input:hover,
.dataTables_wrapper .dataTables_filter input:hover {
    border-color: var(--border-strong) !important;
}

.dataTables_wrapper .dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    background-color: var(--surface-1) !important;
    border-color: var(--border-focus) !important;
    box-shadow: var(--focus-ring) !important;
}

/* ── Length selector (.dt-length / legacy .dataTables_length) ──────────────
   Renders as a chip: small "Show" prefix + select. The "entries" trailing
   text from the label gets compressed via font-size styling. */
.dataTables_wrapper .dt-length,
.dataTables_wrapper .dataTables_length {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0 0.7rem 0 0.85rem;
    height: 38px;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
    white-space: nowrap;
}

.dataTables_wrapper .dt-length:hover,
.dataTables_wrapper .dataTables_length:hover {
    border-color: var(--border-strong);
}

.dataTables_wrapper .dt-length:focus-within,
.dataTables_wrapper .dataTables_length:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

.dataTables_wrapper .dt-length label,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* The select sits inside the chip — strip its borders, let the chip carry them */
.dataTables_wrapper .dt-length select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select.dt-input {
    height: auto !important;
    padding: 0 1.4rem 0 0.25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.204 5h9.592L8 10.481zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659'/%3E%3C/svg%3E")
        no-repeat right 0.1rem center !important;
    background-size: 10px !important;
    color: var(--text-strong) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-family: var(--font-family);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: none !important;
    width: auto !important;
    min-width: 0;
}

.dataTables_wrapper .dt-length select:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Export buttons toolbar (.dt-buttons) ──────────────────────────────── */
.dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0 !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin: 0;
}

/* Defensive overrides — Bootstrap's .btn-secondary defines its own
   --bs-btn-* variables that would otherwise win on these buttons. */
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.85rem !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--text-default) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
    transition: var(--transition-fast);
    cursor: pointer;
    box-shadow: none !important;
    margin: 0 !important;
    text-shadow: none !important;
    height: auto;
    min-height: 36px;
}

.dataTables_wrapper .dt-buttons .dt-button:last-child,
.dataTables_wrapper .dt-buttons .btn:last-child {
    border-right: 0 !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .btn:hover {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    color: var(--primary-color) !important;
}

.dataTables_wrapper .dt-buttons .dt-button:focus-visible,
.dataTables_wrapper .dt-buttons .btn:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--border-focus) !important;
}

.dataTables_wrapper .dt-buttons .dt-button:active,
.dataTables_wrapper .dt-buttons .dt-button.active,
.dataTables_wrapper .dt-buttons .btn:active,
.dataTables_wrapper .dt-buttons .btn.active {
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
    transform: none !important;
}

.dataTables_wrapper .dt-buttons .dt-button.disabled,
.dataTables_wrapper .dt-buttons .dt-button:disabled,
.dataTables_wrapper .dt-buttons .btn.disabled,
.dataTables_wrapper .dt-buttons .btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Add an icon for each export type */
.dataTables_wrapper .dt-buttons .dt-button::before {
    font-family: "bootstrap-icons";
    font-weight: normal;
    color: var(--text-muted);
    font-size: 0.95em;
    line-height: 1;
}
.dataTables_wrapper .dt-buttons .dt-button:hover::before { color: var(--primary-color); }

.dataTables_wrapper .dt-buttons .buttons-copy::before   { content: "\F4DC"; } /* clipboard */
.dataTables_wrapper .dt-buttons .buttons-csv::before    { content: "\F38B"; } /* file-earmark-text */
.dataTables_wrapper .dt-buttons .buttons-excel::before  { content: "\F381"; } /* file-earmark-spreadsheet */
.dataTables_wrapper .dt-buttons .buttons-pdf::before    { content: "\F756"; } /* file-earmark-pdf */
.dataTables_wrapper .dt-buttons .buttons-print::before  { content: "\F529"; } /* printer */
.dataTables_wrapper .dt-buttons .buttons-colvis::before { content: "\F2D2"; } /* eye */

/* DataTables button collection (dropdown shown when buttons collapse) */
.dt-button-collection {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    padding: 0.35rem 0;
    min-width: 11rem;
    margin-top: 0.25rem;
}
.dt-button-collection .dt-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: 0;
    color: var(--text-default);
    font-size: var(--font-size-md);
    text-align: left;
}
.dt-button-collection .dt-button:hover {
    background: var(--surface-2);
    color: var(--primary-color);
}

/* Background overlay for button collections */
.dt-button-background {
    background: rgba(15, 23, 42, 0.25) !important;
}

/* ── Sort indicators (DataTables 2.x: .dt-orderable-* / .dt-ordering-*) ── */
table.dataTable thead .dt-orderable-asc,
table.dataTable thead .dt-orderable-desc,
table.dataTable thead .dt-ordering-asc,
table.dataTable thead .dt-ordering-desc {
    cursor: pointer;
    position: relative;
    user-select: none;
}

table.dataTable thead .dt-column-order {
    position: relative;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
}

table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.85em;
    line-height: 1;
    color: var(--text-muted);
}

table.dataTable thead .dt-column-order::before {
    content: "▲";
    top: -3px;
}
table.dataTable thead .dt-column-order::after {
    content: "▼";
    bottom: -3px;
}

table.dataTable thead .dt-orderable-asc:hover .dt-column-order,
table.dataTable thead .dt-orderable-desc:hover .dt-column-order {
    opacity: 0.85;
}

table.dataTable thead .dt-ordering-asc .dt-column-order::before,
table.dataTable thead .dt-ordering-desc .dt-column-order::after {
    color: var(--primary-color);
    opacity: 1;
}

table.dataTable thead .dt-ordering-asc,
table.dataTable thead .dt-ordering-desc {
    color: var(--text-strong) !important;
}
table.dataTable thead .dt-ordering-asc .dt-column-order,
table.dataTable thead .dt-ordering-desc .dt-column-order {
    opacity: 1;
}

/* Hide DataTables' default text-replacement caret if it leaks through */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    content: none !important;
}

/* ── Info text (.dt-info / legacy .dataTables_info) ────────────────────── */
.dataTables_wrapper .dt-info,
.dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: 0;
    margin: 0;
}

/* ── Pagination (.dt-paging / legacy .dataTables_paginate) ─────────────── */
.dataTables_wrapper .dt-paging,
.dataTables_wrapper .dataTables_paginate {
    margin: 0;
    padding: 0;
}

.dataTables_wrapper .dt-paging .pagination,
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    gap: 0.15rem;
    align-items: center;
}

.dataTables_wrapper .dt-paging .page-item .page-link,
.dataTables_wrapper .dataTables_paginate .page-item .page-link,
.dataTables_wrapper .dt-paging .dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    margin: 0;
    cursor: pointer;
    line-height: 1;
}

.dataTables_wrapper .dt-paging .page-item .page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover,
.dataTables_wrapper .dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-color) !important;
    color: var(--text-strong) !important;
}

.dataTables_wrapper .dt-paging .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dt-paging .dt-paging-button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: var(--shadow-xs);
}

.dataTables_wrapper .dt-paging .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dt-paging .dt-paging-button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--text-subtle) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed;
    pointer-events: none;
}

.dataTables_wrapper .dt-paging .page-item .page-link:focus-visible,
.dataTables_wrapper .dataTables_paginate .page-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
    border-color: var(--border-focus) !important;
}

/* Ellipsis pseudo-button */
.dataTables_wrapper .dt-paging .ellipsis,
.dataTables_wrapper .dataTables_paginate .ellipsis {
    color: var(--text-subtle);
    pointer-events: none;
}

/* ── Processing overlay (when DataTables is filtering / fetching) ──────── */
.dataTables_wrapper .dt-processing,
.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    color: var(--text-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0.6rem 1rem 0.6rem 2.4rem;
    z-index: var(--z-popover);
}

.dataTables_wrapper .dt-processing::before,
.dataTables_wrapper .dataTables_processing::before {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: kf-dt-spin 0.7s linear infinite;
}

@keyframes kf-dt-spin { to { transform: rotate(360deg); } }

/* ── Empty state row (rendered by DataTables when no rows match) ───────── */
.dataTables_wrapper table.dataTable tbody tr td.dt-empty,
.dataTables_wrapper table.dataTable tbody td.dataTables_empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-2xl) var(--spacing-md) !important;
    font-size: var(--font-size-md);
    font-style: normal;
}

/* ── Scrollable / responsive ───────────────────────────────────────────── */
.dataTables_wrapper .dt-scroll-headInner,
.dataTables_wrapper .dataTables_scrollHeadInner { box-sizing: content-box; }

.dataTables_wrapper .dt-scroll-body,
.dataTables_wrapper .dataTables_scrollBody {
    border-bottom: 1px solid var(--border-light);
}

/* Responsive collapse arrow */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-xs);
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dataTables_wrapper .dt-layout-row {
        flex-direction: column;
        align-items: stretch;
    }
    .dataTables_wrapper .dt-layout-start,
    .dataTables_wrapper .dt-layout-end {
        justify-content: flex-start;
    }
    .dataTables_wrapper .dt-search input,
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
    .dataTables_wrapper .dt-buttons {
        width: 100%;
    }
    .dataTables_wrapper .dt-buttons .dt-button {
        flex: 1 1 auto;
        justify-content: center;
    }
}