/* ===== TABLE LOADING OVERLAY ===== */
.dataTables_wrapper {
    position: relative;
}

.dt-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface, #fff);
    opacity: 0.7;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    pointer-events: all;
    transition: opacity 0.15s ease;
}

.dt-loading-overlay .dt-loading-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-subtle, #f5f5f5);
    border: 1px solid var(--border-default, #ddd);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #666);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 120px;
}

.dt-loading-overlay .dt-loading-spinner::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default, #ddd);
    border-top-color: var(--brand-primary, #5867dd);
    border-radius: 50%;
    animation: dt-spin 0.6s linear infinite;
}

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

.NewDashboardsTable {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed;
}

    .NewDashboardsTable thead th {
        background: var(--bg-subtle) !important;
        color: var(--text-primary) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid var(--border-default) !important;
        vertical-align: middle !important;
        text-align: left;
    }

.NewDashboardsTable th.dataCell,
.NewDashboardsTable td.dataCell {
    text-align:right;
}
    .NewDashboardsTable tbody td {
        padding: 5px 10px !important;
        border-bottom: 1px solid var(--border-default) !important;
        vertical-align: middle !important;
        font-size: 12pt !important;
        color: var(--text-primary) !important;
    }

    .NewDashboardsTable tbody tr:hover td {
        background: var(--bg-subtle) !important;
    }
 
    /* ===== FIRST COLUMN / HEALTH ===== */
    .NewDashboardsTable td.col-health,
    .NewDashboardsTable th.col-health {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        text-align: center !important;
    }


/* ===== STATUS PILLS ===== */
/* Base .status-pill and colour variants now in wg-components.css */

.NewDashboardsTable .select2-container .select2-selection--single {
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
}

.NewDashboardsTable .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    margin-top: -7px;
}

.NewDashboardsTable .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 10px !important;
}



.NewDashboardsTable.select2-container--default {
    min-width:130px !important;
}
.NewDashboardsTable th.responsive-control-col,
.NewDashboardsTable td.responsive-control-col {
    
    width:17px;
    padding:0px !important;
    
    text-align: center !important;
    vertical-align: middle !important;
}

/* dtr-inline: restore left padding so the expand control doesn't overlap cell text.
   Only applies to content cells (not dedicated dtr-control columns). */
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control),
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control) {
    padding-left: 30px !important;
    position: relative;
    cursor: pointer;
}

table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control)::before,
table.NewDashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control)::before,
table.DashboardsTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control)::before,
table.DashboardsTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control)::before {
    top: 50% !important;
    left: 7px !important;
    transform: translateY(-50%);
}

table.NewDashboardsTable tr{
    background-color:none !important;
}

/* Zero out the responsive control col ONLY when it's not an active dtr-control cell */
    .NewDashboardsTable td.responsive-control-col:empty:not(.dtr-control),
    .NewDashboardsTable td.responsive-control-col:not(.dtr-control) {
        padding: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        border: 0 !important;
    }

/* dtr-column: give the control cell a fixed width so the button doesn't bleed into the next column.
   Only show full width when table is actually collapsed (columns hidden). */
.NewDashboardsTable.dtr-column > tbody > tr > td.dtr-control,
.NewDashboardsTable.dtr-column > tbody > tr > th.dtr-control {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
    position: relative !important;
}

.NewDashboardsTable.dtr-column.collapsed > tbody > tr > td.dtr-control,
.NewDashboardsTable.dtr-column.collapsed > tbody > tr > th.dtr-control {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    cursor: pointer !important;
    border: revert !important;
}

/* Hide expand icon when table is not collapsed */
.NewDashboardsTable.dtr-column > tbody > tr > td.dtr-control:before,
.NewDashboardsTable.dtr-column > tbody > tr > th.dtr-control:before {
    display: none !important;
}

.NewDashboardsTable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
.NewDashboardsTable.dtr-column.collapsed > tbody > tr > th.dtr-control:before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 16px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* ===== TIGHTER ROW HEIGHT ===== */
.NewDashboardsTable tbody tr {
    height: auto !important;
}


.dt-colvis-btn {
    border: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

    .dt-colvis-btn:hover,
    .dt-colvis-btn:focus,
    .dt-colvis-btn:active {
        background: var(--bg-subtle) !important;
        border-color: var(--border-heavy) !important;
        color: var(--text-heading) !important;
        box-shadow: none !important;
    }

div.dt-button-collection {
    min-width: 240px !important;
    padding: 8px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-dropdown, 0 10px 30px rgba(23, 33, 61, 0.12)) !important;
    overflow: hidden !important;
}

    div.dt-button-collection .dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        position: static !important;
        float: none !important;
        display: block !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    div.dt-button-collection .dt-button {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        color: var(--text-primary) !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        text-align: left !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

        div.dt-button-collection .dt-button:hover,
        div.dt-button-collection .dt-button:focus {
            background: var(--bg-subtle) !important;
            color: var(--text-heading) !important;
        }

        div.dt-button-collection .dt-button.active {
            background: var(--color-primary-light) !important;
            color: var(--color-primary) !important;
            font-weight: 600 !important;
        }

        div.dt-button-collection .dt-button::before {
            content: "";
            width: 16px;
            height: 16px;
            border: 1.5px solid var(--border-heavy);
            border-radius: 4px;
            margin-right: 10px;
            flex-shrink: 0;
            background: var(--bg-surface);
        }

        div.dt-button-collection .dt-button.active::before {
            background: var(--color-primary);
            border-color: var(--color-primary);
            box-shadow: inset 0 0 0 3px var(--bg-surface);
        }

    div.dt-button-collection::before {
        content: "Show columns";
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        padding: 4px 12px 10px 12px;
    }

/* ===== TOOLBAR BUTTONS ===== */
.dt-toolbar .dt-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.dt-toolbar .dt-button.dt-toolbar-btn,
.dt-toolbar .dt-button.dt-colvis-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin: 0 !important;
    min-height: 38px !important;
}

    .dt-toolbar .dt-button.dt-toolbar-btn:hover,
    .dt-toolbar .dt-button.dt-toolbar-btn:focus,
    .dt-toolbar .dt-button.dt-toolbar-btn:active,
    .dt-toolbar .dt-button.dt-colvis-btn:hover,
    .dt-toolbar .dt-button.dt-colvis-btn:focus,
    .dt-toolbar .dt-button.dt-colvis-btn:active {
        background: var(--bg-subtle) !important;
        border-color: var(--border-heavy) !important;
        color: var(--text-heading) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .dt-toolbar .dt-button.dt-toolbar-btn span,
    .dt-toolbar .dt-button.dt-colvis-btn span {
        color: inherit !important;
    }

    .dt-toolbar .dt-button.dt-colvis-btn i {
        margin-right: 6px;
    }

#clearPreferencesBtn {
    width: 100%;
}

.colvis-reset-btn,
.colvis-done-btn {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
}

.dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

    .dt-bottom .dt-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .dt-bottom .dt-toolbar-btn,
    .dt-bottom .buttons-colvis,
    .dt-bottom .buttons-csv,
    .dt-bottom .buttons-excel,
    .dt-bottom .buttons-pdf {
        border: 1px solid var(--border-default);
        background: var(--bg-surface);
        color: var(--text-muted);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 600;
    }

    .dt-bottom .dt-colvis-btn {
        background: var(--color-primary-light);
        border-color: var(--border-brand, #ddd8ff);
        color: var(--color-primary);
    }

/* ===================================================
   WIDGET GRID & CARD
   Now in wg-components.css (section 10a).
   This file retains only DataTables-specific overrides.
=================================================== */

/* =========================================================
   SORT INDICATORS
   Replaces DataTables' default double-arrow with a single
   clean indicator. Active direction uses brand indigo.
========================================================= */

/* Suppress DataTables' built-in ::before (up) indicator entirely —
   we use ::after only so we have one glyph to control */
.NewDashboardsTable thead th.sorting::before,
.NewDashboardsTable thead th.sorting_asc::before,
.NewDashboardsTable thead th.sorting_desc::before {
    display: none !important;
}

/* All sortable headers need relative positioning for the ::after anchor */
.NewDashboardsTable thead th.sorting,
.NewDashboardsTable thead th.sorting_asc,
.NewDashboardsTable thead th.sorting_desc {
    position: relative !important;
    cursor: pointer !important;
}

/* Unsorted-but-sortable: faint ▼ */
.NewDashboardsTable thead th.sorting::after {
    content: '▼' !important;
    display: inline-block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: var(--text-primary) !important;
    opacity: 0.25;
    font-weight: 400 !important;
    transition: opacity 0.15s ease;
}

.NewDashboardsTable thead th.sorting:hover::after {
    opacity: 0.6;
}

/* Sorted ascending: ▲ in brand colour */
.NewDashboardsTable thead th.sorting_asc::after {
    content: '▲' !important;
    display: inline-block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    opacity: 0.7;
    font-weight: 700 !important;
}

/* Sorted descending: ▼ in brand colour */
.NewDashboardsTable thead th.sorting_desc::after {
    content: '▼' !important;
    display: inline-block !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    opacity: 0.7;
    font-weight: 700 !important;
}


/* Neutralise DataTables sorted-column background tint on all new dashboards */
table.NewDashboardsTable.dataTable tbody > tr > .sorting_1,
table.NewDashboardsTable.dataTable tbody > tr > .sorting_2,
table.NewDashboardsTable.dataTable tbody > tr > .sorting_3 {
    background-color: inherit !important;
    background: inherit !important;
}

/* ===== COLUMN SORT SELECTOR (shared) ===== */
/* Clickable header with a dropdown to choose which field to sort by.
   Used on combined columns (e.g. Project, Purchase Order). */

.NewDashboardsTable thead th.project-sort-th,
.NewDashboardsTable thead th.po-sort-th,
.NewDashboardsTable thead th.date-sort-th,
.NewDashboardsTable thead th.quote-sort-th,
.NewDashboardsTable thead th.qdate-sort-th,
.NewDashboardsTable thead th.lead-sort-th,
.NewDashboardsTable thead th.invoice-sort-th {
    position: relative !important;
    cursor: pointer !important;
    user-select: none;
}

.invoice-select-all {
    margin-right: 8px;
    vertical-align: middle;
}

.project-sort-label,
.sort-field-picker {
    display: inline-block;
    cursor: pointer;
}

.sort-field-label {
    font-weight: 700;
}

.sort-dir-toggle {
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.sort-dir-toggle:hover {
    opacity: 1;
}

/* ===== ACTIVE SORT COLUMN INDICATOR =====
   Combined-column field-picker dashboards (Invoice, PurchaseOrder, Quotes) have two
   sortable picker headers but only one of them drives the active query. The .is-active-sort
   class is toggled by the dashboard's JS to mark whichever picker is currently the sort
   source — its label and caret light up in brand colour to mirror the credit-note
   dashboard's native ::after triangle treatment (opacity 0.7, var(--color-primary)).
   Inactive picker stays at the existing muted opacity until hovered. */

.NewDashboardsTable thead th.is-active-sort .sort-field-label,
.NewDashboardsTable thead th.is-active-sort .project-sort-label,
.NewDashboardsTable thead th.is-active-sort .invoice-sort-label {
    color: var(--color-primary);
}

.NewDashboardsTable thead th.is-active-sort .sort-dir-toggle {
    opacity: 1;
    color: var(--color-primary);
}

.NewDashboardsTable thead th.is-active-sort .sort-dir-icon {
    color: var(--color-primary);
}

.invoice-sort-label {
    font-weight: 600;
}

.project-sort-caret,
.invoice-sort-caret {
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.5;
}

.project-sort-th:hover .project-sort-caret,
.po-sort-th:hover .project-sort-caret,
.date-sort-th:hover .project-sort-caret,
.quote-sort-th:hover .project-sort-caret,
.qdate-sort-th:hover .project-sort-caret,
.lead-sort-th:hover .project-sort-caret,
.invoice-sort-th:hover .invoice-sort-caret {
    opacity: 1;
}

.project-sort-menu,
.invoice-sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 170px;
    margin-top: 2px;
    padding: 6px 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(23, 33, 61, 0.12);
    font-weight: 400;
}

.project-sort-option,
.invoice-sort-option {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s ease;
}

    .project-sort-option:hover,
    .invoice-sort-option:hover {
        background: var(--bg-subtle);
        color: var(--text-heading);
    }

    .project-sort-option.active,
    .invoice-sort-option.active {
        color: var(--color-primary);
        font-weight: 600;
        background: var(--color-primary-light);
    }

/* ===== COLUMN REORDER GRIP ===== */
.dt-col-reorder-handle {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    opacity: 0.25;
    margin-right: 6px;
    font-size: 11px;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}

.dt-col-reorder-handle:hover {
    opacity: 0.7;
}

.dt-col-reorder-handle:active {
    cursor: grabbing;
    opacity: 1;
}

/* ===== COLUMN RESIZE HANDLES ===== */
.dt-col-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 20;
    background: transparent;
    transition: background 0.15s ease;
}

.dt-col-resize-handle:hover {
    background: var(--color-primary, #6366f1);
    opacity: 0.35;
}

body.dt-col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.dt-col-resizing * {
    cursor: col-resize !important;
}

body.dt-col-resizing .dt-col-resize-handle {
    background: var(--color-primary, #6366f1);
    opacity: 0.35;
}

/* ===== PER-DASHBOARD table-layout: auto OVERRIDES ===== */
/* Auto layout so columns size by content instead of fixed widths. */
#LeadsTable.NewDashboardsTable {
    table-layout: auto;
}

#QuotesTable.NewDashboardsTable {
    table-layout: auto;
}

#PurchaseOrdersTable.NewDashboardsTable {
    table-layout: auto;
}

#StockSalesTable.NewDashboardsTable {
    table-layout: auto;
}

/* ===== PER-DASHBOARD sort arrow hiding ===== */
/* These dashboards use custom sort controls; hide the default DT arrows. */
#LeadsTable thead th.sorting::after,
#LeadsTable thead th.sorting_asc::after,
#LeadsTable thead th.sorting_desc::after {
    display: none !important;
}

#QuotesTable thead th.sorting::after,
#QuotesTable thead th.sorting_asc::after,
#QuotesTable thead th.sorting_desc::after {
    display: none !important;
}

#PurchaseOrdersTable thead th.sorting::after,
#PurchaseOrdersTable thead th.sorting_asc::after,
#PurchaseOrdersTable thead th.sorting_desc::after {
    display: none !important;
}

#StockSalesTable thead th.sorting::after,
#StockSalesTable thead th.sorting_asc::after,
#StockSalesTable thead th.sorting_desc::after {
    display: none !important;
}

/* ================================
   DASHBOARD DATE RANGE BAR
   Shared across all the dashboards (Quotes, Invoices, ...). Single source
   of truth — keep these rules here so the controls stay visually identical.
================================ */

.dashboard-date-range-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    flex-wrap: wrap;
}

.dashboard-date-range-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-date-range-label i {
    margin-right: 4px;
    color: var(--text-muted);
}

.dashboard-date-range-btns {
    display: flex;
    gap: 6px;
}

.dashboard-date-range-btn {
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.2;
    cursor: pointer;
    transition: all .15s ease;
}

.dashboard-date-range-btn:hover {
    border-color: var(--border-heavy);
    background: var(--bg-subtle);
}

.dashboard-date-range-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}