/* DataTables skin. !important stays here because the DataTables CDN sheet uses it. */

/* Header */
html:not([data-theme="dark"]) table.dataTable thead th {
    background: var(--dt-header-bg) !important;
    color: var(--dt-header-text) !important;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

/* Alternating rows */
html:not([data-theme="dark"]) table.dataTable tbody tr:nth-child(odd) > td {
    background: var(--row-odd) !important;
}

html:not([data-theme="dark"]) table.dataTable tbody tr:nth-child(even) > td {
    background: var(--row-even) !important;
}

/* Hover + Selected */
html:not([data-theme="dark"]) table.dataTable tbody tr:hover > * {
    background: var(--dt-row-hover) !important;
}

html:not([data-theme="dark"]) table.dataTable tbody tr.selected > * {
    background: var(--dt-row-selected) !important;
    box-shadow: none !important;
    color: inherit !important;
}

html:not([data-theme="dark"]) table.dataTable tbody tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--brand-blue) !important;
}

/* Cells */
html:not([data-theme="dark"]) table.dataTable tbody td {
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

/* Child rows */
html:not([data-theme="dark"]) table.dataTable tr.child {
    background: #F6F7F9 !important;
    color: var(--text);
}

    html:not([data-theme="dark"]) table.dataTable tr.child td {
        border-color: var(--border);
    }

/* Pagination */
html:not([data-theme="dark"]) .dataTables_paginate .paginate_button {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    color: var(--brand-blue) !important;
    border-radius: 4px;
    transition: background .15s ease;
}

    html:not([data-theme="dark"]) .dataTables_paginate .paginate_button:hover:not(.current) {
        background: var(--brand-yellow) !important;
    }

    html:not([data-theme="dark"]) .dataTables_paginate .paginate_button.current {
        background: var(--brand-orange) !important;
        color: #2A1200 !important;
        border-color: var(--brand-orange-dark) !important;
        font-weight: 600;
    }

/* Filter input */
html:not([data-theme="dark"]) .dataTables_filter input {
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text);
}

/* ColVis dropdown */
html:not([data-theme="dark"]) .dt-button-collection {
    background: #FFFFFF !important;
    border: 1px solid var(--border);
}

    html:not([data-theme="dark"]) .dt-button-collection .dt-button {
        background: #FFFFFF !important;
        color: var(--brand-blue) !important;
        border: 1px solid var(--border) !important;
    }

        html:not([data-theme="dark"]) .dt-button-collection .dt-button:hover {
            background: var(--brand-orange-light) !important;
            color: var(--brand-orange-dark) !important;
        }

    html:not([data-theme="dark"]) .dt-button-collection input[type="checkbox"] {
        accent-color: var(--brand-blue);
    }

/* FixedHeader */
html:not([data-theme="dark"]) table.dataTable.fixedHeader-floating {
    background: var(--dt-header-bg) !important;
    border-bottom: 1px solid var(--border);
}

/* Select extension */
html:not([data-theme="dark"]) table.dataTable tbody tr.selected > td {
    background: var(--dt-row-selected) !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* RowGroup */
html:not([data-theme="dark"]) tr.dtrg-group td {
    background: #EBF1FA !important;
    border-left: 4px solid var(--brand-blue) !important;
    padding-left: 10px !important;
    font-weight: 600;
    color: var(--brand-blue);
}

html:not([data-theme="dark"]) tr.dtrg-group:hover td {
    background: var(--brand-yellow) !important;
    border-left-color: var(--brand-orange) !important;
}

html:not([data-theme="dark"]) tr.dtrg-group td,
html:not([data-theme="dark"]) tr.dtrg-group td * {
    color: var(--brand-blue) !important;
}

/* Footer area under tables */
html:not([data-theme="dark"]) .dataTables_wrapper .dataTables_scrollFoot,
html:not([data-theme="dark"]) .dataTables_wrapper .dataTables_scrollFootInner,
html:not([data-theme="dark"]) table.dataTable tfoot,
html:not([data-theme="dark"]) table.dataTable tfoot th,
html:not([data-theme="dark"]) table.dataTable tfoot td {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
}

html:not([data-theme="dark"]) .btn:hover .fa {
    color: var(--cp-primary-hover) !important;
}

/* DataTables */
html[data-theme="dark"] table.dataTable thead th {
    background: var(--dt-header-bg) !important;
    color: var(--dt-header-text) !important;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

html[data-theme="dark"] table.dataTable tbody tr:nth-child(odd) > td {
    background: var(--row-odd) !important;
}

html[data-theme="dark"] table.dataTable tbody tr:nth-child(even) > td {
    background: var(--row-even) !important;
}

html[data-theme="dark"] table.dataTable tbody tr:hover > * {
    background: var(--dt-row-hover) !important;
}

html[data-theme="dark"] table.dataTable tbody > tr.selected > *,
html[data-theme="dark"] table.dataTable tbody > tr.selected > td,
html[data-bs-theme="dark"] table.dataTable tbody > tr.selected > td {
    background: #3D4F66 !important;
    background-color: #3D4F66 !important;
    color: #F4F7FB !important;
    box-shadow: none !important;
}

html[data-theme="dark"] table.dataTable tbody > tr.selected > td:first-child,
html[data-bs-theme="dark"] table.dataTable tbody > tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--brand-blue) !important;
}

/* Borders + clarity */
html[data-theme="dark"] table.dataTable tbody td {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: #F0F4FF !important;
    font-weight: 450;
}

/* Filter input */
html[data-theme="dark"] .dataTables_filter input {
    background: var(--bg-muted);
    border-color: var(--border);
    color: var(--text);
}

/* Pagination */
html[data-theme="dark"] .dataTables_paginate .paginate_button {
    background: #3B4658 !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 4px;
    transition: background .15s ease;
}

    html[data-theme="dark"] .dataTables_paginate .paginate_button:hover:not(.current) {
        background: var(--blue-ov-12) !important;
    }

    html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
    html[data-theme="dark"] .dataTables_paginate .paginate_button:active {
        background: var(--brand-blue) !important;
        color: #07192C !important;
        border-color: var(--brand-blue-hover) !important;
        font-weight: 600;
    }

/* ColVis dropdown */
html[data-theme="dark"] .dt-button-collection {
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
}

    html[data-theme="dark"] .dt-button-collection .dt-button {
        background: var(--bg-card) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

        html[data-theme="dark"] .dt-button-collection .dt-button:hover {
            background: #3E5C85 !important;
            color: var(--text) !important;
        }

    html[data-theme="dark"] .dt-button-collection input[type="checkbox"] {
        accent-color: var(--brand-blue-strong);
    }

/* Child rows */
html[data-theme="dark"] table.dataTable tr.child {
    background: #2F3846 !important;
    color: var(--text);
}

    html[data-theme="dark"] table.dataTable tr.child td {
        border-color: var(--border);
    }

/* FixedHeader */
html[data-theme="dark"] table.dataTable.fixedHeader-floating {
    background: var(--dt-header-bg) !important;
    border-bottom: 1px solid var(--border);
}

/* Select extension border highlight */
html[data-theme="dark"] table.dataTable tbody > tr.selected,
html[data-theme="dark"] table.dataTable tbody > tr.selected > td {
    background: #3D4F66 !important;
    color: #F4F7FB !important;
    box-shadow: none !important;
}

/* RowGroup */
html[data-theme="dark"] tr.dtrg-group td {
    background: #2E3F5C !important;
    border-left: 4px solid var(--brand-blue-strong) !important;
    padding-left: 10px !important;
    font-weight: 600;
    color: #FFFFFF !important;
}

html[data-theme="dark"] tr.dtrg-group:hover td {
    background: #2C3A55 !important;
    border-left-color: var(--brand-blue-hover) !important;
}

/* 1) Footers match the table background */
.dataTables_wrapper .dataTables_scrollFoot,
.dataTables_wrapper .dataTables_scrollFootInner,
table.dataTable tfoot,
table.dataTable tfoot th,
table.dataTable tfoot td {
    background: inherit !important;
    border-top: 1px solid var(--border) !important;
    color: inherit !important;
}

/* 2) Kill the forced inline height that creates the white gap */
.dataTables_scrollFootInner {
    height: auto !important;
    min-height: 0 !important;
}

/* 3) Scroll container background should never be white */
.dataTables_scroll {
    background: inherit !important;
}

/* 4) Some themes wrap the bottom edge in a transparent/white div */
.dataTables_wrapper {
    background: inherit !important;
}

/* Force RowGroup header text white in DARK MODE */
html[data-theme="dark"] div.dtrg-group,
html[data-theme="dark"] div.dtrg-group *,
html[data-theme="dark"] div.dtrg-group strong,
html[data-theme="dark"] div.dtrg-group span,
html[data-theme="dark"] div.dtrg-group .text-muted {
color: #FFFFFF !important;
}

table.dataTable th {
    position: relative; /* required for handle positioning */
}

    table.dataTable th .col-resize {
        position: absolute;
        top: 0;
        right: 0;
        width: 8px;
        height: 100%;
        cursor: col-resize;
        user-select: none;
        background: transparent;
        z-index: 5; /* stays above sort icons */
    }

        /* Hover tint — uses brand-orange-light so it fits Light & Dark themes */
        table.dataTable th .col-resize:hover {
            background: var(--brand-orange-light);
        }

/* Body cursor override during drag */
body.resizing-col {
    cursor: col-resize !important;
}


td.dt-select-column input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

    td.dt-select-column input[type="checkbox"]:focus {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    }

/* Count badges stay one width so 0 and 300 do not shift the action buttons.
   The slot is three digits. Clients, Reports, and Users action cells are not
   .dt-actions, so the badge itself has to carry the width. */
.btn .badge.dt-action-badge,
.dt-actions .dt-action-badge,
td.dt-actions [data-action-key] .dt-action-badge {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3ch;
    min-width: 3ch;
    max-width: 3ch;
    margin-top: 0;
    padding: 0.35em 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
}


.dt-actions .btn,
.dt-actions a.btn {
    min-width: 7.5rem;
    justify-content: center;
}

/* ============================================================
   ACTION BADGES — PER ACTION COLOR (Light + Dark)
   FIX: supports <a> AND <button>
============================================================ */

html:not([data-theme="dark"])
td.dt-actions [data-action-key] .dt-action-badge,
html[data-theme="dark"]
td.dt-actions [data-action-key] .dt-action-badge {
    color: #ffffff !important;
    background-color: var(--chart-secondary, #004C97) !important;
}


/* -------------------------------------------------------------
   DataTables Fade‑in (prevents flashes)
   ------------------------------------------------------------- */
.dt-fade {
    opacity: 0;
    transition: opacity .2s ease;
}

.dt-fade--loading {
    opacity: 0;
}

.dt-fade--ready {
    opacity: 1;
}

/* -------------------------------------------------------------
       Modal Loading Overlay
       ------------------------------------------------------------- */
.modal-loading {
    position: relative;
    min-height: 160px;
}

    .modal-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.75);
        z-index: 5;
    }

    .modal-loading .modal-loading__spinner {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 6;
        color: #0d6efd;
        font-size: 1.75rem;
    }

/* -------------------------------------------------------------
       Print-friendly tables (Razor-safe @media)
       ------------------------------------------------------------- */
@media print {
    /* Ensure background colors actually print (Chrome/Edge/WebKit) */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact; /* legacy alias */
    }
    /* Hide DT chrome in print */
    .dataTables_wrapper .dt-buttons {
        display: none !important;
    }

    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate {
        display: none !important;
    }

    table.dataTable {
        font-size: 12px;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        width: 100% !important;
    }
        /* Reduce padding a bit for paper */
        table.dataTable thead th,
        table.dataTable tbody td {
            padding: 6px 8px !important;
        }
        /* Remove on-screen row background so zebra fills correctly */
        table.dataTable tbody tr {
            background: transparent !important;
        }
            /* Zebra striping using TD backgrounds so it survives print */
            table.dataTable tbody tr:nth-child(odd) td {
                background: #ffffff !important;
            }

            table.dataTable tbody tr:nth-child(even) td {
                background: #f2f2f2 !important;
            }
        /* Clear any cell-specific backgrounds that could clash */
        table.dataTable tbody td * {
            background: transparent !important;
        }
        /* Borders for readability */
        table.dataTable tbody tr td {
            border-bottom: 1px solid #bfbfbf !important;
        }

        table.dataTable thead th {
            border-bottom: 2px solid #999 !important;
            background: #efefef !important; /* header tint */
        }
}

/* -------------------------------------------------------------
       1. Improved Row Hover Highlight
       ------------------------------------------------------------- */
table.table tbody tr:hover {
    background-color: rgba(0,0,0,0.04) !important;
    box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.03);
    cursor: pointer;
}

/* -------------------------------------------------------------
       2. Increased Row Vertical Padding
       ------------------------------------------------------------- */
table.table.dataTable tbody td {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
}

/* -------------------------------------------------------------
       3. Column Header Polish + Sticky Header
       ------------------------------------------------------------- */
table.dataTable thead th {
    font-weight: 600;
    letter-spacing: .01rem;
    background-color: #fafafa !important;
    box-shadow: 0 1px 0 #dee2e6, 0 2px 4px rgba(0,0,0,.02);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* 🔧 Default to static - sticky applied conditionally below */
    position: static;
}

/* 🔧 Apply sticky ONLY when table is NOT inside scroll containers */
body table.dataTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

/* 🔧 OVERRIDE: Force static for ALL tables inside scroll containers (higher specificity) */
div.dataTables_scrollBody table thead th,
div.dataTables_scrollBody table.dataTable thead th,
div.dataTables_scroll table thead th,
div.dataTables_scroll table.dataTable thead th,
div.dt-scroll-body table thead th,
div.dt-scroll-body table.dataTable thead th {
    position: static !important;
    top: auto !important;
}

/* 🔧 CRITICAL: Hide the ENTIRE thead element inside scroll body (Scroller clones it) */
/* Use > (direct child) so only the scroll-body's own table is targeted,
   not nested tables inside child rows (e.g. detail grids). */
/* DT 1.x class names */
div.dataTables_scrollBody > table thead,
div.dataTables_scrollBody > table.dataTable thead,
/* DT 2.x class names */
div.dt-scroll-body > table thead,
div.dt-scroll-body > table.dataTable thead {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* -------------------------------------------------------------
       Child-row detail GridControl — force header visibility.

       DataTables in scrollX mode splits the table into:
         div.dt-scroll-head  — cloned header (VISIBLE, user-facing)
         div.dt-scroll-body  — real data table (thead hidden structurally)

       The broad rule `div.dt-scroll-body > table thead { display:none }`
       above hides the scroll-body thead correctly for all grids.
       We only need to un-hide the dt-scroll-HEAD header for nested grids,
       and we must NOT touch dt-scroll-body so that rule still applies.

       Also handle non-scrollX layout (table sits directly in dt-layout-cell).
       ------------------------------------------------------------- */

/* CASE 1: scrollX mode — reveal the fixed clone header in dt-scroll-head */
tr.dt-hasChild + tr .gc-grid-region div.dt-scroll-head table.dataTable thead {
    display: table-header-group !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    line-height: normal !important;
    pointer-events: auto !important;
}
tr.dt-hasChild + tr .gc-grid-region div.dt-scroll-head table.dataTable thead tr {
    display: table-row !important;
    height: auto !important;
    visibility: visible !important;
}
tr.dt-hasChild + tr .gc-grid-region div.dt-scroll-head table.dataTable thead tr th,
tr.dt-hasChild + tr .gc-grid-region div.dt-scroll-head table.dataTable thead tr td {
    display: table-cell !important;
    height: auto !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    border-top-width: 1px !important;
    border-bottom-width: 2px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
}

/* CASE 2: non-scrollX mode — table is a direct child of a dt-layout-cell,
   no scroll containers. Override any sticky/position rule that clips it. */
tr.dt-hasChild + tr .gc-grid-region div.dt-layout-cell > table.dataTable thead {
    display: table-header-group !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
tr.dt-hasChild + tr .gc-grid-region div.dt-layout-cell > table.dataTable thead tr {
    display: table-row !important;
    height: auto !important;
}
tr.dt-hasChild + tr .gc-grid-region div.dt-layout-cell > table.dataTable thead tr th {
    display: table-cell !important;
    height: auto !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    border-bottom-width: 2px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
}


form .required::after {
    content: " *";
    color: #dc3545;
    margin-left: 2px;
}

/* -------------------------------------------------------------
       5. Clean Bootstrap Row Dividers (chosen on-screen style)
       ------------------------------------------------------------- */
table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

    table.dataTable tbody tr {
        background: white !important;
        border-bottom: 1px solid #dee2e6 !important; /* clean grey divider */
        transition: background-color .12s ease !important; /* simple to prevent flicker */
    }

    table.dataTable tbody td {
        border-top: none !important;
        border-bottom: none !important;
    }

/* -------------------------------------------------------------
       6. Card Container Polish
       ------------------------------------------------------------- */
.card.rounded-3.shadow-sm {
    border-radius: .75rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.06) !important;
}

/* -------------------------------------------------------------
       7. Search Input Polish
       ------------------------------------------------------------- */
.input-group-text i {
    opacity: 0.75;
}

.input-group-text {
    border-radius: .5rem 0 0 .5rem !important;
}

input[type="search"].form-control {
    border-radius: .5rem !important;
    padding-left: .75rem !important;
}

/* -------------------------------------------------------------
       Focus Outline Polish
       ------------------------------------------------------------- */
.btn:focus,
.form-control:focus {
    outline: none !important;
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.35) !important;
}

/* -------------------------------------------------------------
       Selected/Active Row Highlight
       ------------------------------------------------------------- */
table.dataTable tbody tr.row-selected {
    background-color: rgba(13,110,253,.09) !important;
}

table.dataTable tbody tr:active,
table.dataTable tbody tr.row-active {
    background-color: rgba(13,110,253,.12) !important;
}

/* -------------------------------------------------------------
       Better Sorting Indicators (DataTables 2.x)
       ------------------------------------------------------------- */
/* 🎯 DataTables 2.x has BUILT-IN UTF-8 sort indicators - just ensure they're visible */

/* Unsorted columns — subtle (DT 2.x native) */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
    opacity: 1 !important; /* Ensure visible */
}

/* Actively sorted columns — highlighted (DT 2.x native) */
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
    background-color: #f2f2f2 !important;
    opacity: 1 !important;
}

/* 🔧 LEGACY: Keep DT 1.x compatibility (only if DT 1.x classes are present) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    opacity: 1 !important;
}

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: #f2f2f2 !important;
}

/* -------------------------------------------------------------
       Better Empty State
       ------------------------------------------------------------- */
table.dataTable tbody tr:nth-child(1).dataTables_empty td {
    text-align: center !important;
    padding: 2rem !important;
    font-size: 1rem !important;
    color: #6c757d !important;
}

/* -------------------------------------------------------------
       Export Button Polish
       ------------------------------------------------------------- */
div.dt-buttons .btn {
    border-radius: 50rem !important;
    padding: .35rem .85rem !important;
}

/* -------------------------------------------------------------
       Wrapper Margins
       ------------------------------------------------------------- */
.dataTables_wrapper {
    margin-top: .25rem !important;
    margin-bottom: .75rem !important;
    position: relative;
}

/* -------------------------------------------------------------
       DataTables 2.x Layout Row Stability
       When scrollX:true + Scroller handle all scrolling, any outer
       .table-responsive wrapper creates a conflicting overflow-x:auto
       that can swallow toolbar layout rows.  Reset the conflict:
       - dt-container fills its parent horizontally
       - dt-layout-row stays in the normal flow (not clipped)
       ------------------------------------------------------------- */
.dt-container {
    width: 100%;
    min-width: 0;
}

.dt-layout-row {
    min-width: 0;
    overflow: visible;
}

/* If a page wraps a scrollX DT in table-responsive, neutralise it
   so the DT's own scroll containers work correctly.              */
.table-responsive .dt-container {
    overflow: visible !important;
    min-width: 0 !important;
}

/* .table-responsive is an extra scroll container around the DataTables layout.
   Bootstrap gives it overflow-x:auto, which creates a phantom second scrollbar
   below the info/pagination row because .dt-scroll-head is sized by DataTables
   to the full table width (wider than the viewport on wide grids).
   DataTables' own .dt-scroll-body is the real horizontal scroll container —
   the outer .table-responsive wrapper has no scrolling job to do. */
.table-responsive:has(.dt-scroll-body) {
    overflow-x: unset;
}

/* -------------------------------------------------------------
       Eliminate phantom/tiny horizontal scroll in scrollX grids
       DataTables sets an inline min-width on the scroll-body table
       (no !important) that can exceed the container by a few pixels
       due to column-width rounding or the vertical scrollbar reducing
       the available width after DT already set the table width.
       Setting min-width: 0 here overrides DT's inline value.
       Genuine horizontal scroll still works — it is driven by the
       inline `width` style (which this rule does NOT override).
       ------------------------------------------------------------- */
div.dt-scroll-body > table.dataTable,
div.dataTables_scrollBody > table.dataTable {
    min-width: 0 !important;
}


/* -------------------------------------------------------------
       GLOBAL ACTION BUTTON SPACING ACROSS ALL GRIDS
       ------------------------------------------------------------- */
table.table tbody td .btn + .btn,
table.table tbody td .btn + .btn-group,
table.table tbody td .btn-group + .btn,
table.table tbody td a.btn + a.btn {
    margin-left: 0.5rem !important;
}

table.table tbody td .btn-group {
    display: inline-flex !important;
    gap: 0.5rem !important;
}

    /* Razor-safe selector (no '>') */
    table.table tbody td .btn-group .btn:not(:first-child) {
        margin-left: 0 !important;
        border-left-width: 1px !important;
    }

/* -------------------------------------------------------------
       (REMOVED) Sticky First Column
       ------------------------------------------------------------- */
/* No sticky first/second column rules here per your request */

/* Text-wrap mode for Scroller pages — overrides DataTables scroll-body nowrap.
   The nowrap rule below has higher specificity so the Options toggle can override it. */
.gc-wrap-text td,
.gc-wrap-text .dt-scroll-body td,
.gc-wrap-text .dataTables_scrollBody td {
    white-space: normal !important;
    word-break: break-word;
}

/* nowrap toggle wins over gc-wrap-text (higher specificity + !important) */
.gc-wrap-text table.dataTable.nowrap td,
.gc-wrap-text table.dataTable.nowrap th {
    white-space: nowrap !important;
    word-break: normal;
}

/* Column utility helpers (attach via column className or Razor) */
td.nowrap {
    white-space: nowrap;
}

td.min-120 {
    min-width: 120px;
}

td.min-160 {
    min-width: 160px;
}

td.min-200 {
    min-width: 200px;
}

td.min-240 {
    min-width: 240px;
}

td.ellipsis {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip hint for truncated cells (JS can add title attr on draw) */
td[title],
[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* -------------------------------------------------------------
       Accessibility
       ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dt-fade,
    table.table tbody tr {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    table.dataTable thead th {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: GrayText !important;
    }

    table.dataTable tbody tr.row-active {
        outline: 2px solid Highlight !important;
    }
}

/* DataTables group headers */
table.dataTable tbody tr.dt-group-row {
    background-color: var(--bs-light, #f8f9fa);
    cursor: pointer;
}

    table.dataTable tbody tr.dt-group-row td {
        border-top: 1px solid rgba(0,0,0,.075);
        border-bottom: 1px solid rgba(0,0,0,.075);
    }

    table.dataTable tbody tr.dt-group-row .rotate-indicator {
        transition: transform .15s ease-in-out;
    }

/* Group header row styling */
table.dataTable tbody tr.dt-group-row {
    background-color: var(--bs-light, #f8f9fa);
    cursor: pointer;
}

    table.dataTable tbody tr.dt-group-row td {
        border-top: 1px solid rgba(0,0,0,.075);
        border-bottom: 1px solid rgba(0,0,0,.075);
    }

    /* Chevron animation */
    table.dataTable tbody tr.dt-group-row .rotate-indicator {
        transition: transform .15s ease-in-out;
    }

    /* Optional: fine-tune header text */
    table.dataTable tbody tr.dt-group-row strong {
        letter-spacing: .2px;
    }

/* -------------------------------------------------------------
       Footer Aggregates Row
       ------------------------------------------------------------- */
table.dataTable tfoot tr th,
table.dataTable tfoot tr td {
    font-size: 1rem !important;           /* larger than body (0.875rem default) */
    font-weight: 700 !important;          /* bold */
    color: #212529 !important;            /* near-black — Bootstrap $gray-900 */
    background-color: #f0f0f0 !important; /* slightly darker than thead (#fafafa) */
    border-top: 2px solid #adb5bd !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
}

/* "Totals" label cell — keep readable but differentiated */
table.dataTable tfoot tr th.text-muted,
table.dataTable tfoot tr td.text-muted {
    color: #495057 !important;
    font-style: italic;
}

@media print {
    table.dataTable tfoot tr th,
    table.dataTable tfoot tr td {
        background: #e8e8e8 !important;
        border-top: 2px solid #999 !important;
        font-size: 11px !important;
    }
}

/* -------------------------------------------------------------
       Grand Total Summary Bar (report pages)
       ------------------------------------------------------------- */
.report-grand-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5rem;
    padding: 0.6rem 1rem;
    background-color: #343a40;
    color: #f8f9fa;
    border-radius: 0 0 .375rem .375rem;
    font-size: 0.925rem;
    font-weight: 600;
    border-top: 3px solid #495057;
}

.report-grand-total .gt-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #adb5bd;
    margin-right: 0.5rem;
}

.report-grand-total .gt-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    white-space: nowrap;
    padding: 0.15rem 0;
}

.report-grand-total .gt-item + .gt-item::before {
    content: '|';
    color: #6c757d;
    margin-right: 1.5rem;
}

.report-grand-total .gt-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

.report-grand-total .gt-desc {
    font-size: 0.8rem;
    color: #adb5bd;
    font-weight: 400;
}

@media print {
    .report-grand-total {
        background: #e8e8e8 !important;
        color: #212529 !important;
        border-top: 2px solid #999 !important;
        font-size: 11px !important;
    }
    .report-grand-total .gt-value { color: #212529 !important; }
    .report-grand-total .gt-desc  { color: #495057 !important; }
}


/* -------------------------------------------------------------
       SearchPanes — match Performance orange filter dropdowns
       ------------------------------------------------------------- */
div.dt-searchPanes,
div.dtsp-panesContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem !important;
    row-gap: 1.25rem !important;
    column-gap: 1.25rem !important;
    margin: 0 0 1rem 0;
    padding: 0;
}

div.dtsp-panesContainer > div.dtsp-searchPanes,
div.dtsp-searchPanes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
    width: 100%;
}

div.dtsp-title {
    display: none !important;
}

div.dtsp-titleRow {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1 0 100%;
    width: 100%;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

div.dtsp-titleRow button,
div.dtsp-panesContainer button.dtsp-clearAll,
div.dtsp-panesContainer button.dtsp-collapseAll,
div.dtsp-panesContainer button.dtsp-showAll,
div.dtsp-panesContainer button.dt-button {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #ced4da !important;
    background: #fff !important;
    color: #212529 !important;
    border-radius: 50rem !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 31px;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

div.dtsp-titleRow button:hover,
div.dtsp-panesContainer button.dtsp-clearAll:hover,
div.dtsp-panesContainer button.dtsp-collapseAll:hover,
div.dtsp-panesContainer button.dtsp-showAll:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

div.dtsp-titleRow button:focus-visible,
div.dtsp-panesContainer button.dtsp-clearAll:focus-visible {
    outline: 2px solid var(--chart-primary, #E35205);
    outline-offset: 1px;
}

div.dtsp-titleRow button.dtsp-clearAll::before,
div.dtsp-titleRow button.dtsp-showAll::before,
div.dtsp-titleRow button.dtsp-collapseAll::before,
div.dtsp-panesContainer button.dtsp-clearAll::before,
div.dtsp-panesContainer button.dtsp-showAll::before,
div.dtsp-panesContainer button.dtsp-collapseAll::before {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 300;
    font-style: normal;
    display: inline-block;
    width: 1em;
    margin-right: 0.35rem;
    speak: never;
}

button.dtsp-clearAll::before { content: "\f0b0"; } /* filter */
button.dtsp-showAll::before { content: "\f065"; } /* expand */
button.dtsp-collapseAll::before { content: "\f066"; } /* compress */


html[data-theme="dark"] div.dtsp-titleRow button,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-clearAll,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-collapseAll,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-showAll,
html[data-theme="dark"] div.dtsp-panesContainer button.dt-button {
    background: #3A4B66 !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] div.dtsp-titleRow button:hover,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-clearAll:hover,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-collapseAll:hover,
html[data-theme="dark"] div.dtsp-panesContainer button.dtsp-showAll:hover,
html[data-theme="dark"] div.dtsp-panesContainer button.dt-button:hover {
    background: #446085 !important;
    border-color: var(--brand-blue-hover) !important;
    color: var(--text) !important;
}

div.dtsp-searchPane {
    flex: 1 1 18rem;
    min-width: 14rem;
    max-width: 26rem;
    margin: 0 1.25rem 1.25rem 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden;
}

div.dtsp-searchPane div.dtsp-topRow {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    min-height: 31px;
}

div.dtsp-searchPane div.dtsp-topRow::before {
    content: "";
    width: 6px;
    flex: 0 0 6px;
    background: var(--chart-primary, #E35205);
}

div.dtsp-searchPane input.dtsp-paneInputButton,
div.dtsp-searchPane input[type="search"],
div.dtsp-searchPane input.form-control {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    color: #212529 !important;
    background: #fff !important;
}

div.dtsp-searchPane input::placeholder {
    color: #6c757d;
}

div.dtsp-searchPane button,
div.dtsp-searchPane div.dtsp-nameButton,
div.dtsp-searchPane div.dtsp-countButton,
div.dtsp-searchPane div.dtsp-searchCont {
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

div.dtsp-searchPane div.dtsp-pane {
    border-top: 1px solid #ced4da !important;
}

div.dtsp-searchPane table.dataTable {
    margin: 0 !important;
    font-size: 0.8125rem;
}

div.dtsp-searchPane table.dataTable thead {
    display: none;
}

div.dtsp-searchPane table.dataTable tbody td {
    padding: 0.35rem 0.6rem !important;
    border: 0 !important;
}

div.dtsp-searchPane table.dataTable tbody tr {
    cursor: pointer;
}

div.dtsp-searchPane table.dataTable tbody tr:hover {
    background: #f8f9fa;
}

div.dtsp-searchPane table.dataTable tbody tr.selected,
div.dtsp-searchPane table.dataTable tbody tr.selected td {
    background: #fff4ee !important;
    color: #212529 !important;
    box-shadow: none !important;
}

div.dtsp-searchPane span.dtsp-pill,
div.dtsp-searchPane span.dtsp-pill.dtsp-badge {
    background: #6c757d !important;
    color: #fff !important;
    border-radius: 10rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
}

html[data-theme="dark"] div.dtsp-searchPane {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] div.dtsp-searchPane div.dtsp-topRow,
html[data-theme="dark"] div.dtsp-searchPane input.dtsp-paneInputButton,
html[data-theme="dark"] div.dtsp-searchPane input[type="search"],
html[data-theme="dark"] div.dtsp-searchPane input.form-control {
    background: var(--dt-header-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] div.dtsp-searchPane input::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] div.dtsp-searchPane div.dtsp-pane {
    border-top-color: var(--border) !important;
}

html[data-theme="dark"] div.dtsp-panesContainer div.dtsp-searchPane div.dt-container div.dt-scroll-body,
html[data-theme="dark"] div.dtsp-panesContainer div.dtsp-searchPane div.dt-container div.dataTables_scrollBody,
html[data-theme="dark"] div.dtsp-panesContainer div.dtsp-searchPane div.dataTables_wrapper div.dt-scroll-body,
html[data-theme="dark"] div.dtsp-panesContainer div.dtsp-searchPane div.dataTables_wrapper div.dataTables_scrollBody {
    background: var(--bg-card) !important;
}

html[data-theme="dark"] div.dtsp-searchPane button,
html[data-theme="dark"] div.dtsp-searchPane div.dtsp-nameButton,
html[data-theme="dark"] div.dtsp-searchPane div.dtsp-countButton,
html[data-theme="dark"] div.dtsp-searchPane div.dtsp-searchCont {
    background: transparent !important;
    color: var(--text) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] div.dtsp-searchPane div.dtsp-topRow button:hover {
    background: #3E5C85 !important;
    color: var(--text) !important;
}

html[data-theme="dark"] div.dtsp-searchPane table.dataTable tbody tr.selected,
html[data-theme="dark"] div.dtsp-searchPane table.dataTable tbody tr.selected td {
    background: #3d2318 !important;
    color: #f8f9fa !important;
}