/* ============================================================
   Global DataTables styling — portal-datatables.css
   Clean Metronic / Sneat / Vuexy style.
   table.dataTable + .dataTables_wrapper auto-added by JS —
   zero HTML changes needed on any page.
   ============================================================ */

:root {
    --dt-brand:       #0075bc;
    --dt-brand-light: #edf5fb;
    --dt-head-bg:     #ffffff;      /* pure white — no colour tint on header */
    --dt-head-text:   #1e293b;      /* dark slate — clear readable label */
    --dt-body-text:   #374151;
    --dt-muted:       #94a3b8;
    --dt-border:      #e8ecf1;
    --dt-stripe:      #fafbfc;
    --dt-hover:       #f0f6fc;
    --dt-shadow:      0 0 0 1px rgba(0,0,0,.06), 0 4px 18px rgba(0,0,0,.06);
    --dt-radius:      6px;
}

/* ══════════════════════════════════════════════════════
   PROCESSING / LOADER OVERLAY
   ══════════════════════════════════════════════════════ */
.dataTables_processing {
    background: rgba(0, 117, 188, 0.08) !important;
    border: 0 !important;
    box-shadow: inset 0 0 60px rgba(0,117,188,.10) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ══════════════════════════════════════════════════════
   CARD WRAPPER
   ══════════════════════════════════════════════════════ */
.dataTables_wrapper {
    background: #ffffff;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    overflow: hidden;
    box-shadow: 0 0.115rem 0.3rem 0 rgba(47,43,61,.12);
}

/* scrollX: clip the scrollHead so thead bg respects card border-radius */
.dataTables_scrollHead {
    border-radius: var(--dt-radius) var(--dt-radius) 0 0;
    overflow: hidden !important;
}

/* non-scrollX: first row col-sm-12 clips the table corners */
.dataTables_wrapper > .row > .col-sm-12 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.dataTables_wrapper > .row > .col-sm-12::-webkit-scrollbar {
    height: 3px;
}
.dataTables_wrapper > .row > .col-sm-12::-webkit-scrollbar-track {
    background: transparent;
}
.dataTables_wrapper > .row > .col-sm-12::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}
.dataTables_wrapper > .row > .col-sm-12:hover::-webkit-scrollbar-thumb {
    background: rgba(86, 106, 127, 0.35);
}
.dataTables_wrapper > .row > .col-sm-12:hover {
    scrollbar-color: rgba(86, 106, 127, 0.35) transparent;
}

/* First row (controls bar) and last row (info+pagination) must not scroll horizontally */
.dataTables_wrapper > .row:first-child > .col-sm-12,
.dataTables_wrapper > .row:last-child > .col-sm-12 {
    overflow-x: visible;
}

/* Clip thead corners for non-scrollX tables */
table.dataTable thead tr:first-child th:first-child {
    border-top-left-radius: 6px;
}
table.dataTable thead tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

.dataTables_wrapper > .row:first-child > .col-sm-12,
.dataTables_wrapper > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

/* ══════════════════════════════════════════════════════
   TOP CONTROLS
   ══════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 12px 18px;
    background: #ffffff;
    border-bottom: 1px solid var(--dt-border);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--dt-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.dataTables_wrapper .dataTables_length select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    background: #f8fafc;
    color: var(--dt-body-text);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--dt-brand);
    box-shadow: 0 0 0 3px rgba(0,117,188,.10);
    background: #fff;
}

.dataTables_wrapper .dataTables_filter input {
    height: 32px;
    padding: 0 12px 0 34px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
    color: var(--dt-body-text);
    font-size: 12px;
    min-width: 200px;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--dt-brand);
    box-shadow: 0 0 0 3px rgba(0,117,188,.10);
    background-color: #fff;
}

.dataTables_wrapper .dataTables_filter input::placeholder { color: #b8c4ce; }

/* ══════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════ */
.dataTables_wrapper table.dataTable {
    margin-bottom: 0 !important;
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* ── HEADER ── */
table.dataTable thead tr {
    background: rgba(9, 113, 204, 0.09) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

table.dataTable thead th {
    border: 0 !important;
    padding: 11px 16px !important;
    background: transparent !important;
    color: #337ab7 !important;
    font-size: 12px !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: none !important;
}

/*
 * DataTables scroll fix:
 * When scrollX/scrollY is enabled, DataTables clones the <thead> into the
 * scrollBody and hides it with inline padding:0 / height:0.
 * Our padding !important above would make that clone visible — undo it here.
 */
.dataTables_scrollBody table.dataTable thead th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Sort icons — chevron style (rotated border box, like carousel < >) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    background-image: none !important;
    padding-right: 24px !important;
    position: relative;
    cursor: pointer;
}

/* Up chevron ^ */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_asc_disabled::before,
table.dataTable thead th.sorting_desc_disabled::before {
    content: "" !important;
    position: absolute !important;
    right: 9px !important;
    top: calc(50% - 7px) !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 2px solid #b8d0e8 !important;
    border-top: 2px solid #b8d0e8 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: rotate(-45deg) !important;
    box-shadow: none !important;
}

/* Down chevron v */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::after {
    content: "" !important;
    position: absolute !important;
    right: 9px !important;
    top: calc(50% + 2px) !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 2px solid #b8d0e8 !important;
    border-top: 2px solid #b8d0e8 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: rotate(135deg) !important;
    box-shadow: none !important;
}

/* Active ascending: highlight up chevron, fade down */
table.dataTable thead th.sorting_asc::before {
    border-right-color: #1a5f9e !important;
    border-top-color: #1a5f9e !important;
}
table.dataTable thead th.sorting_asc::after {
    border-right-color: #d6e8f4 !important;
    border-top-color: #d6e8f4 !important;
}

/* Active descending: highlight down chevron, fade up */
table.dataTable thead th.sorting_desc::after {
    border-right-color: #1a5f9e !important;
    border-top-color: #1a5f9e !important;
}
table.dataTable thead th.sorting_desc::before {
    border-right-color: #d6e8f4 !important;
    border-top-color: #d6e8f4 !important;
}
table.dataTable tbody td {
    padding: 11px 16px !important;
    border: 0 !important;
    border-bottom: 1px dashed #c0cdd8 !important;
    font-size: 13px !important;
    color: var(--dt-body-text);
    vertical-align: middle;
    background: #ffffff;
    line-height: 1.5;
    transition: background .12s;
}

table.dataTable tbody tr:last-child td {
    border-bottom: 0 !important;
}

table.dataTable tbody tr:nth-child(even) td   { background: var(--dt-stripe); }
table.dataTable tbody tr:nth-child(odd)  td   { background: #ffffff; }
table.dataTable tbody tr:hover           td   { background: var(--dt-hover) !important; }

table.dataTable tbody td.dataTables_empty {
    text-align: center;
    color: var(--dt-muted);
    font-size: 13px;
    padding: 36px 16px !important;
}

/*
 * datatables.min.css compat: neutralise cell-border left/right lines
 * and the sorting_1/2/3 column background tint so our clean style wins.
 */
table.dataTable.cell-border tbody td,
table.dataTable.cell-border tbody th {
    border-right: 0 !important;
    border-left: 0 !important;
}

table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
    background-color: transparent !important;
}

table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.odd > .sorting_2,
table.dataTable tbody tr.odd > .sorting_3 {
    background-color: transparent !important;
}

table.dataTable tbody tr.even > .sorting_1,
table.dataTable tbody tr.even > .sorting_2,
table.dataTable tbody tr.even > .sorting_3 {
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════
   BOTTOM BAR
   ══════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 10px 18px;
    background: #ffffff;
    border-top: 1px solid var(--dt-border);
    box-sizing: border-box;
}

/* ── Info ── */
.dataTables_wrapper .dataTables_info {
    float: left;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dt-muted);
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 0;
    line-height: 1;
}

.dataTables_wrapper .dataTables_info::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dt-brand);
    flex-shrink: 0;
}

/* ── Pagination ── */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 8px 18px;
    border-top: 0;
    background: transparent;
}

/* body prefix → specificity (0,4,1) beats datatables.min.css (0,4,0) */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    background: transparent !important;
    color: #4a6580 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: auto;
    padding: 0 12px !important;
    border: 1px solid #c7def2 !important;
    background: #ffffff !important;
    color: #0075bc !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
    content: "‹";
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.next::after {
    content: "›";
    margin-left: 5px;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background: #e8f3fb !important;
    border-color: #9ecae8 !important;
    color: #0075bc !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0075bc !important;
    color: #ffffff !important;
    border-color: #0075bc !important;
    box-shadow: 0 2px 6px rgba(0,117,188,.30) !important;
    font-weight: 700 !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: #94a3b8 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover {
    background: #f5f9fe !important;
    border-color: #ddeaf5 !important;
    color: #b0c4d4 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    min-width: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_filter input { min-width: 150px; }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        height: auto;
    }

    .dataTables_wrapper .paginate_button.previous,
    .dataTables_wrapper .paginate_button.next {
        min-width: 58px;
    }
}

/* ── Wrapper card ─────────────────────────────────────────── */
.dataTables_wrapper {
    background: #ffffff;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 0.115rem 0.3rem 0 rgba(47,43,61,.12);
}

/* Table container — allows horizontal scroll when columns overflow */
.dataTables_wrapper > .row > .col-sm-12 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Neutralise Bootstrap column gutters inside wrapper */
.dataTables_wrapper > .row:first-child > .col-sm-12,
.dataTables_wrapper > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

/* ── Top controls bar (length + filter) ───────────────────── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 4px 18px;
    background: transparent !important;
    border:none !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 13px;
    color: #6b8199;
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_length select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ccddef;
    border-radius: 6px;
    background: #fff;
    color: #1e3a52;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #0075bc;
    box-shadow: 0 0 0 3px rgba(0, 117, 188, 0.12);
}

.dataTables_wrapper .dataTables_filter input {
    height: 34px;
    padding: 0 12px 0 34px;
    border: 1px solid #ccddef;
    border-radius: 20px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b8199' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
    color: #1e3a52;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 200px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0075bc;
    box-shadow: 0 0 0 3px rgba(0, 117, 188, 0.12);
    background-color: #fff;
}

/* ── Table base ───────────────────────────────────────────── */
.dataTables_wrapper table.dataTable {
    margin-bottom: 0 !important;
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
}

/* ── Header ───────────────────────────────────────────────── */
table.dataTable thead tr {
    background: #dee8f5 !important;
    border-top: 0 !important;
  
}

table.dataTable thead th {
    border: 0 !important;
    padding: 13px 16px !important;
    background: transparent !important;
    color: #337ab7 !important;
    text-transform: none;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: none !important;
    position: relative;
}

/* Sort icons — sharp thin chevron (5×5, 1.5px stroke) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    background-image: none !important;
    padding-right: 22px !important;
    position: relative;
    cursor: pointer;
}

/* Up chevron ^ */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_asc_disabled::before,
table.dataTable thead th.sorting_desc_disabled::before {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: calc(50% - 7px) !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 1.5px solid #b8d0e8 !important;
    border-top: 1.5px solid #b8d0e8 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: rotate(-45deg) !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity .15s, border-color .15s !important;
}

/* Down chevron v */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::after {
    content: "" !important;
    position: absolute !important;
    right: 8px !important;
    top: calc(50% + 2px) !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 1.5px solid #b8d0e8 !important;
    border-top: 1.5px solid #b8d0e8 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    transform: rotate(135deg) !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity .15s, border-color .15s !important;
}

/* Show on hover */
table.dataTable thead th.sorting:hover::before,
table.dataTable thead th.sorting:hover::after {
    opacity: 1 !important;
}

/* Always visible when actively sorted */
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after {
    opacity: 1 !important;
}

/* Active ascending: highlight up chevron, fade down */
table.dataTable thead th.sorting_asc::before {
    border-right-color: #1a5f9e !important;
    border-top-color: #1a5f9e !important;
}
table.dataTable thead th.sorting_asc::after {
    border-right-color: #d0e4f2 !important;
    border-top-color: #d0e4f2 !important;
}

/* Active descending: highlight down chevron, fade up */
table.dataTable thead th.sorting_desc::after {
    border-right-color: #1a5f9e !important;
    border-top-color: #1a5f9e !important;
}
table.dataTable thead th.sorting_desc::before {
    border-right-color: #d0e4f2 !important;
    border-top-color: #d0e4f2 !important;
}

/* DataTables scroll mode creates a hidden sizing header in the scroll body.
   Suppress sort chevrons there only, so visible headers on other tables stay intact. */
.dataTables_scrollBody table.dataTable thead th.sorting::before,
.dataTables_scrollBody table.dataTable thead th.sorting::after,
.dataTables_scrollBody table.dataTable thead th.sorting_asc::before,
.dataTables_scrollBody table.dataTable thead th.sorting_asc::after,
.dataTables_scrollBody table.dataTable thead th.sorting_desc::before,
.dataTables_scrollBody table.dataTable thead th.sorting_desc::after,
.dataTables_scrollBody table.dataTable thead th.sorting_asc_disabled::before,
.dataTables_scrollBody table.dataTable thead th.sorting_asc_disabled::after,
.dataTables_scrollBody table.dataTable thead th.sorting_desc_disabled::before,
.dataTables_scrollBody table.dataTable thead th.sorting_desc_disabled::after {
    content: none !important;
    display: none !important;
}

.dataTables_scrollBody table.dataTable thead th.sorting,
.dataTables_scrollBody table.dataTable thead th.sorting_asc,
.dataTables_scrollBody table.dataTable thead th.sorting_desc,
.dataTables_scrollBody table.dataTable thead th.sorting_asc_disabled,
.dataTables_scrollBody table.dataTable thead th.sorting_desc_disabled {
    padding-right: 0 !important;
}

/* Blank sortable headers should never show sort chevrons. */
table.dataTable thead th.sorting:empty::before,
table.dataTable thead th.sorting:empty::after,
table.dataTable thead th.sorting_asc:empty::before,
table.dataTable thead th.sorting_asc:empty::after,
table.dataTable thead th.sorting_desc:empty::before,
table.dataTable thead th.sorting_desc:empty::after,
table.dataTable thead th.sorting_asc_disabled:empty::before,
table.dataTable thead th.sorting_asc_disabled:empty::after,
table.dataTable thead th.sorting_desc_disabled:empty::before,
table.dataTable thead th.sorting_desc_disabled:empty::after,
table.dataTable thead th.sorting[aria-label^=":"]::before,
table.dataTable thead th.sorting[aria-label^=":"]::after,
table.dataTable thead th.sorting_asc[aria-label^=":"]::before,
table.dataTable thead th.sorting_asc[aria-label^=":"]::after,
table.dataTable thead th.sorting_desc[aria-label^=":"]::before,
table.dataTable thead th.sorting_desc[aria-label^=":"]::after,
table.dataTable thead th.sorting_asc_disabled[aria-label^=":"]::before,
table.dataTable thead th.sorting_asc_disabled[aria-label^=":"]::after,
table.dataTable thead th.sorting_desc_disabled[aria-label^=":"]::before,
table.dataTable thead th.sorting_desc_disabled[aria-label^=":"]::after {
    content: none !important;
    display: none !important;
}

table.dataTable thead th.sorting:empty,
table.dataTable thead th.sorting_asc:empty,
table.dataTable thead th.sorting_desc:empty,
table.dataTable thead th.sorting_asc_disabled:empty,
table.dataTable thead th.sorting_desc_disabled:empty,
table.dataTable thead th.sorting[aria-label^=":"],
table.dataTable thead th.sorting_asc[aria-label^=":"],
table.dataTable thead th.sorting_desc[aria-label^=":"],
table.dataTable thead th.sorting_asc_disabled[aria-label^=":"],
table.dataTable thead th.sorting_desc_disabled[aria-label^=":"] {
    padding-right: 16px !important;
}

/* ── Body ─────────────────────────────────────────────────── */
table.dataTable tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #e8ecf1;
    border-top: 0 !important;
    font-size: 13px !important;
    color: #374151;
    vertical-align: middle;
    background: #ffffff;
    transition: background-color 0.15s ease;
    line-height: 1.5;
}

table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

table.dataTable tbody tr:nth-child(even) td {
    background: #fafbfc;
}

table.dataTable tbody tr:nth-child(odd) td {
    background: #ffffff;
}

table.dataTable tbody tr:hover td {
    background: #f0f6fc !important;
}

/* Empty-table message */
table.dataTable tbody td.dataTables_empty {
    text-align: center;
    color: #6b8199;
    font-size: 13px;
    padding: 32px 16px !important;
}

/* ── Bottom controls bar ──────────────────────────────────── */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px;
    background: #f8fbff;
    border-top: 1px solid #e8ecf1;
    box-sizing: border-box;
}

/* ── Info bar ─────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_info {
    float: left;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
    font-size: 13px;
    color: #6b8199;
    font-weight: 500;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 0;
}

.dataTables_wrapper .dataTables_info::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0075bc;
    box-shadow: 0 0 0 3px rgba(0, 117, 188, 0.15);
    flex-shrink: 0;
}

/* ── Pagination ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 10px 18px;
    border-top: 0;
    background: transparent;
}

/* body prefix → specificity (0,4,1) beats datatables.min.css (0,4,0) */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    background: transparent !important;
    color: #4a6580 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: auto;
    padding: 0 12px !important;
    border: 1px solid #c7def2 !important;
    background: #ffffff !important;
    color: #0075bc !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
    content: "‹";
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.next::after {
    content: "›";
    margin-left: 5px;
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background: #e8f3fb !important;
    border-color: #9ecae8 !important;
    color: #0075bc !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0075bc !important;
    color: #ffffff !important;
    border-color: #0075bc !important;
    box-shadow: 0 2px 6px rgba(0,117,188,.30) !important;
    font-weight: 700 !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:focus {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: #94a3b8 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover {
    background: #f5f9fe !important;
    border-color: #ddeaf5 !important;
    color: #b0c4d4 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    min-width: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: default;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 160px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        height: auto;
    }

    .dataTables_wrapper .paginate_button.previous,
    .dataTables_wrapper .paginate_button.next {
        min-width: 64px;
    }
}

/* ── QLE Enrollment Review pages — controls row ───────────
   Covers both qle-enrollment-review and qle-dependent-enrollment-review
   (neither page has its own CSS file).
   ───────────────────────────────────────────────────────── */
#enrollment-review-table_wrapper > .row:first-child {
    background: #eef5fb;
    margin: 0;
    padding: 8px 4px;
    border-bottom: 1px solid #d9eaf5;
}

/* Clear individual-cell backgrounds so the row bg shows */
#enrollment-review-table_wrapper .dataTables_length,
#enrollment-review-table_wrapper .dataTables_filter {
    background: transparent !important;
    border-bottom: 0 !important;
}

#enrollment-review-table_wrapper .dataTables_filter {
    text-align: right !important;
    float: right !important;
}

#enrollment-review-table_wrapper .dataTables_filter input[type="search"] {
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   .reviews-filter  — overrides .dark-bg on ALL QLE pages.
   (qle-dashboard, qle-enrollment-review, qle-dependent-enrollment-review)
   portal-datatables.css is global so this kills the dark gray bg
   on every page that uses <div class="reviews-filter dark-bg padded">.
   ───────────────────────────────────────────────────────────── */
.reviews-filter {
    background: #90afd7 !important;
    border: 1px solid #d4e8f5 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 12px 0 rgba(0,117,188,.08), 0 1px 3px rgba(47,43,61,.07) !important;
    padding: 0 !important;
    color: inherit !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Left accent bar */
.reviews-filter::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a4f7a 0%, #0e7490 100%);
    border-radius: 6px 0 0 6px;
    pointer-events: none;
}

/* The .row inside the filter gets inner padding (not the outer div) */
.reviews-filter > .row {
    padding: 14px 20px 14px 24px;
    margin: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 0;
}

/* Each col inside filter: add bottom gap when wrapping */
.reviews-filter > .row > [class*="col-"] {
    margin-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
}

/* Tablet: stack into 2-per-row */
@media (max-width: 991px) {
    .reviews-filter > .row > [class*="col-"] {
        width: 50% !important;
        margin-bottom: 10px;
    }
    /* Actions col: stay auto-width and right-aligned even at tablet */
    .reviews-filter .filter-actions-col {
        width: auto !important;
        margin-left: auto !important;
        margin-bottom: 0;
    }
    .reviews-filter > .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* Mobile: full width, stacked */
@media (max-width: 767px) {
    .reviews-filter > .row {
        padding: 12px 16px 12px 20px;
    }
    .reviews-filter > .row > [class*="col-"] {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .reviews-filter .filter-actions {
        width: 100%;
        justify-content: flex-end;
    }
    #filter-btn,
    #reset-filters-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Selects */
.reviews-filter .form-control {
    height: 34px !important;
    padding: 0 3px !important;
    font-size: 12px !important;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.45) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #8a9bb0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.reviews-filter .form-control:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.35) !important;
    background: #ffffff !important;
    outline: none;
}

/* Filter action buttons col — auto-width, always pushed to the far right.
   When other cols push it off the row, it wraps to next line still right-aligned. */
.reviews-filter .filter-actions-col {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    padding-left: 8px;
    padding-right: 8px;
}

/* Filter action buttons row */
.reviews-filter .filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

#filter-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 34px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    border-radius: 6px !important;
    background: #0075bc !important;
    border: 1px solid #005f9e !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,117,188,.35) !important;
    transition: background .15s, box-shadow .15s;
}

#filter-btn:hover {
    background: #005f9e !important;
    box-shadow: 0 4px 14px rgba(0,117,188,.45) !important;
}

#reset-filters-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s;
}

#reset-filters-btn:hover {
    background: rgba(255,255,255,0.38) !important;
    border-color: rgba(255,255,255,0.80) !important;
    color: #ffffff !important;
}