/*
 * dark-mode.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Dark mode overrides for the entire app.
 * Targets hardcoded light colours from sb-admin-2.css, stylesheet.css,
 * backend.css and Bootstrap so they all respond to the html.dark-mode class
 * set by ThemeManager in index.asp.
 *
 * Deploy to : /include/styles/dark-mode.css
 * Include in: /views/layout/page_foot.inc  (once, globally)
 *
 *   <link rel="stylesheet" href="/include/styles/dark-mode.css">
 *
 * Load ORDER matters — this file must come AFTER all vendor CSS files.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE PALETTE
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode {
    --dm-bg: #0f1117;
    --dm-surface: #181c27;
    --dm-surface2: #1e243a;
    --dm-border: #272d3d;
    --dm-text: #e2e8f0;
    --dm-text-muted: #94a3b8;
    --dm-accent: #4f8ef7;
    --dm-accent2: #a78bfa;
    --dm-input-bg: #1e2535;
    --dm-input-border: #334155;
    --dm-neg: #f87171;
    --dm-pos: #34d399;
    --dm-row-alt: #141824;
    --dm-hover: #1a2035;
}

    /* ═══════════════════════════════════════════════════════════════════
   PAGE & LAYOUT — sb-admin-2.css + stylesheet.css
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode body {
        background-color: var(--dm-bg) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode #page-wrapper,
    html.dark-mode .content-wrapper,
    html.dark-mode .container-full,
    html.dark-mode .print-area,
    html.dark-mode .print-normal,
    html.dark-mode .print-container,
    html.dark-mode .print-wrapper {
        background-color: var(--dm-bg) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode #wrapper,
    html.dark-mode #main-wrapper,
    html.dark-mode #main-container {
        background-color: var(--dm-bg) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — stylesheet.css hardcodes #000 on headings
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode h1,
    html.dark-mode h2,
    html.dark-mode h3,
    html.dark-mode h4,
    html.dark-mode h5,
    html.dark-mode h6 {
        color: var(--dm-text) !important;
    }

    html.dark-mode p,
    html.dark-mode span,
    html.dark-mode label,
    html.dark-mode td,
    html.dark-mode th,
    html.dark-mode li {
        color: var(--dm-text);
    }

    html.dark-mode .text-muted,
    html.dark-mode .text-fade,
    html.dark-mode .smallgrey,
    html.dark-mode .gray,
    html.dark-mode .grey {
        color: var(--dm-text-muted) !important;
    }

    html.dark-mode .maintitle {
        color: var(--dm-text-muted) !important;
    }

    html.dark-mode .heading {
        color: var(--dm-text) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .sectionhead,
    html.dark-mode .formsection {
        border-color: var(--dm-border) !important;
        background-color: var(--dm-surface2) !important;
        color: var(--dm-text) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .card,
    html.dark-mode .panel,
    html.dark-mode .box,
    html.dark-mode .info-box,
    html.dark-mode .card-body,
    html.dark-mode .panel-body,
    html.dark-mode .box-body {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode .card-header,
    html.dark-mode .panel-heading,
    html.dark-mode .box-header {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode .card-footer,
    html.dark-mode .panel-footer,
    html.dark-mode .box-footer {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   TABLES — stylesheet.css hardcodes th background, tr:nth-child
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode table {
        background-color: transparent !important;
        color: var(--dm-text) !important;
    }

        html.dark-mode table th {
            background-color: var(--dm-surface2) !important;
            border-color: var(--dm-border) !important;
            color: var(--dm-text) !important;
        }

        html.dark-mode table td {
            border-color: var(--dm-border) !important;
            color: var(--dm-text) !important;
        }

    html.dark-mode .list-table tr:nth-child(even),
    html.dark-mode .report-table tr:nth-child(even),
    html.dark-mode .front-table tr:nth-child(even),
    html.dark-mode .forum-table tr:nth-child(even) {
        background-color: var(--dm-row-alt) !important;
    }

    html.dark-mode .list-table tr:hover,
    html.dark-mode .report-table tr:hover,
    html.dark-mode .front-table tr:hover {
        background-color: var(--dm-hover) !important;
    }

    html.dark-mode .header-table,
    html.dark-mode .keyword-table,
    html.dark-mode .total-table,
    html.dark-mode .list-table,
    html.dark-mode .report-table,
    html.dark-mode .info-table,
    html.dark-mode .front-table {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .odd {
        background-color: var(--dm-surface) !important;
    }

    html.dark-mode .even {
        background-color: var(--dm-row-alt) !important;
    }

    html.dark-mode .oddrow {
        background-color: var(--dm-row-alt) !important;
    }

    html.dark-mode .blank-row {
        background-color: transparent !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .sub-total,
    html.dark-mode .subtotal,
    html.dark-mode .grand-total,
    html.dark-mode .sign-box {
        border-color: var(--dm-border) !important;
    }

        html.dark-mode .subtotal td,
        html.dark-mode .total-table td {
            border-color: var(--dm-border) !important;
            color: var(--dm-text) !important;
        }

    /* Bootstrap table */
    html.dark-mode .table {
        color: var(--dm-text) !important;
    }

    html.dark-mode .table-bordered,
    html.dark-mode .table-bordered td,
    html.dark-mode .table-bordered th {
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--dm-row-alt) !important;
    }

    html.dark-mode .table-hover tbody tr:hover {
        background-color: var(--dm-hover) !important;
    }

    html.dark-mode .table thead th {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   FORMS & INPUTS — stylesheet.css hardcodes aliceblue / #DBEAF5
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode input,
    html.dark-mode input[type="text"],
    html.dark-mode input[type="number"],
    html.dark-mode input[type="email"],
    html.dark-mode input[type="password"],
    html.dark-mode input[type="search"],
    html.dark-mode input[type="tel"],
    html.dark-mode input[type="url"],
    html.dark-mode input[type="date"],
    html.dark-mode textarea {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode select {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
    }

        html.dark-mode select option {
            background-color: var(--dm-surface) !important;
            color: var(--dm-text) !important;
        }

            html.dark-mode select option:nth-child(odd),
            html.dark-mode select option:nth-child(even) {
                background-color: var(--dm-surface) !important;
            }

    html.dark-mode .form-control {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
    }

        html.dark-mode .form-control:focus {
            background-color: var(--dm-input-bg) !important;
            border-color: var(--dm-accent) !important;
            color: var(--dm-text) !important;
            box-shadow: 0 0 0 0.2rem rgba(79,142,247,.25) !important;
        }

    html.dark-mode .input-group-text {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode .search-field,
    html.dark-mode .amount-field,
    html.dark-mode .lookup-field,
    html.dark-mode .date-field {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
    }

        html.dark-mode .search-field input,
        html.dark-mode .lookup-field input,
        html.dark-mode .date-field input {
            background-color: transparent !important;
            color: var(--dm-text) !important;
        }

    html.dark-mode .keyword-form,
    html.dark-mode .search-form {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .tableform,
    html.dark-mode .tableforma {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .form-footer {
        background-color: var(--dm-surface2) !important;
    }

    html.dark-mode .ctrl,
    html.dark-mode .ctrla,
    html.dark-mode .txt,
    html.dark-mode .txta,
    html.dark-mode .ctrlamt,
    html.dark-mode .input-number {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .modal-content {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode .modal-header {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .modal-footer {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .modal-body {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .dropdown-menu {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

        html.dark-mode .dropdown-menu .dropdown-item {
            color: var(--dm-text) !important;
        }

            html.dark-mode .dropdown-menu .dropdown-item:hover,
            html.dark-mode .dropdown-menu .dropdown-item:focus {
                background-color: var(--dm-surface2) !important;
                color: var(--dm-accent) !important;
            }

    html.dark-mode .dropdown-divider {
        border-color: var(--dm-border) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   ALERTS & BADGES
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .alert {
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .alert-info {
        background-color: #1e3a4a !important;
        color: #7dd3fc !important;
    }

    html.dark-mode .alert-success {
        background-color: #14301f !important;
        color: #86efac !important;
    }

    html.dark-mode .alert-warning {
        background-color: #3b2e0a !important;
        color: #fde047 !important;
    }

    html.dark-mode .alert-danger {
        background-color: #3b1212 !important;
        color: #fca5a5 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   NAVIGATION & TABS
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .nav-tabs {
        border-color: var(--dm-border) !important;
    }

        html.dark-mode .nav-tabs .nav-link {
            color: var(--dm-text-muted) !important;
            border-color: transparent !important;
        }

            html.dark-mode .nav-tabs .nav-link:hover {
                border-color: var(--dm-border) !important;
                color: var(--dm-text) !important;
            }

            html.dark-mode .nav-tabs .nav-link.active {
                background-color: var(--dm-surface) !important;
                border-color: var(--dm-border) var(--dm-border) var(--dm-surface) !important;
                color: var(--dm-accent) !important;
            }

    html.dark-mode .tab-content,
    html.dark-mode .tab-pane {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS — stylesheet.css uses #003399 / white
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .section-head {
        background-color: var(--dm-surface2) !important;
        color: var(--dm-accent) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   PRINT HEADER (report heading area)
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .print-area h3,
    html.dark-mode .print-area h4,
    html.dark-mode .print-area p,
    html.dark-mode .print-normal h3,
    html.dark-mode .print-normal h4,
    html.dark-mode .print-normal p,
    html.dark-mode .text-center h3,
    html.dark-mode .text-center p,
    html.dark-mode .largebold,
    html.dark-mode .medbold {
        color: var(--dm-text) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   MISCELLANEOUS CONTAINERS
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode .banner {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-accent) !important;
    }

    html.dark-mode #countrydivcontainer {
        background-color: var(--dm-surface) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .info-cube {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .sign-div {
        border-color: var(--dm-border) !important;
    }

        html.dark-mode .sign-div h3 {
            background-color: var(--dm-surface2) !important;
            color: var(--dm-text) !important;
        }

    html.dark-mode hr {
        border-color: var(--dm-border) !important;
    }

    html.dark-mode .border,
    html.dark-mode [class*="border-"] {
        border-color: var(--dm-border) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
   SCROLLBARS (Webkit)
   ═══════════════════════════════════════════════════════════════════ */
    html.dark-mode ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    html.dark-mode ::-webkit-scrollbar-track {
        background: var(--dm-bg);
    }

    html.dark-mode ::-webkit-scrollbar-thumb {
        background: var(--dm-border);
        border-radius: 4px;
    }

        html.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: var(--dm-text-muted);
        }

/* ═══════════════════════════════════════════════════════════════════
   PRINT — always use light colours regardless of dark mode
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    html.dark-mode body,
    html.dark-mode .content-wrapper,
    html.dark-mode .print-area,
    html.dark-mode .print-normal {
        background-color: #fff !important;
        color: #000 !important;
    }

    html.dark-mode table th {
        background-color: #f0f0f0 !important;
        color: #000 !important;
    }

    html.dark-mode table td {
        color: #000 !important;
        border-color: #ccc !important;
    }

    html.dark-mode h1, html.dark-mode h2,
    html.dark-mode h3, html.dark-mode h4,
    html.dark-mode h5, html.dark-mode h6 {
        color: #000 !important;
    }

    html.dark-mode p, html.dark-mode span,
    html.dark-mode label {
        color: #000 !important;
    }
}

html.dark-mode .content-wrapper,
html.dark-mode #main-container {
    background-color: var(--dm-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   BOOTSTRAP LIST GROUP — dark mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .list-group-item {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

    html.dark-mode .list-group-item:hover,
    html.dark-mode .list-group-item:focus {
        background-color: var(--dm-surface2) !important;
        color: var(--dm-accent) !important;
    }

    html.dark-mode .list-group-item.active {
        background-color: var(--dm-accent) !important;
        border-color: var(--dm-accent) !important;
        color: #fff !important;
    }

    html.dark-mode .list-group-item + .list-group-item {
        border-top-color: var(--dm-border) !important;
    }

html.dark-mode .list-group-item-action {
    color: var(--dm-text-muted) !important;
}

    html.dark-mode .list-group-item-action:hover {
        background-color: var(--dm-surface2) !important;
        color: var(--dm-accent) !important;
    }

/* ═══════════════════════════════════════════════════════════════════
   LINKS — dark mode (invisible links fix)
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode a {
    color: var(--dm-accent) !important;
}

    html.dark-mode a:hover,
    html.dark-mode a:focus {
        color: var(--dm-accent2) !important;
    }

    html.dark-mode a:visited {
        color: hsl(213, 60%, 55%) !important;
    }

/* Links inside list groups */
html.dark-mode .list-group-item a,
html.dark-mode .list-group a {
    color: var(--dm-text) !important;
}

    html.dark-mode .list-group-item a:hover,
    html.dark-mode .list-group a:hover {
        color: var(--dm-accent) !important;
    }

/* Nav links */
html.dark-mode .nav-link {
    color: var(--dm-text-muted) !important;
}

    html.dark-mode .nav-link:hover {
        color: var(--dm-accent) !important;
    }

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADERS (blue gradient boxes like "Create Purchase Return")
   These look fine — keeping accent color in dark mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .panel-heading,
html.dark-mode .box-header,
html.dark-mode .section-title {
    background: linear-gradient(135deg, hsl(213, 70%, 35%), hsl(213, 80%, 45%)) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGE counts on the right of list items (visible in screenshot)
   FIX: badges were inheriting --dm-accent (blue) text on a blue
   bg-primary pill, making the numbers illegible. Force white text on
   a solid accent background; keep accent text only for non-badge
   float helpers.
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .list-group-item .badge.bg-primary,
html.dark-mode .list-group-item .badge-primary {
    color: #fff !important;
    background-color: var(--dm-accent) !important;
}

/* Float-only helpers (non-badge) keep the accent text colour */
html.dark-mode .list-group-item > .float-end:not(.badge),
html.dark-mode .list-group-item > .float-right:not(.badge) {
    color: var(--dm-accent) !important;
}

/* ── LIGHT MODE — same fix ──
   In light mode the badges sit inside <a> tags, so the link colour
   bleeds into the badge text (light blue on a blue bg-primary pill).
   Force white text on a solid, opaque primary so every pill is legible
   and consistent. Guarded with :not(.dark-mode) so it never collides
   with the dark-mode rule above. */
html:not(.dark-mode) .list-group-item .badge.bg-primary,
html:not(.dark-mode) .list-group-item a .badge.bg-primary,
html:not(.dark-mode) .list-group-item .badge-primary,
html:not(.dark-mode) .list-group-item a .badge-primary {
    color: #fff !important;
    background-color: #0d6efd !important;
}

/* More targeted — only affects content area links, not nav */
html.dark-mode .content-wrapper a,
html.dark-mode #basefrm a {
    color: var(--dm-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SEARCH FORM — dark mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .keyword-form,
html.dark-mode #search_form {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .search-field {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    border-radius: 6px;
}

    html.dark-mode .search-field input,
    html.dark-mode .search-field input[type="text"],
    html.dark-mode #keyword {
        background-color: var(--dm-input-bg) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-text) !important;
        caret-color: var(--dm-accent) !important;
    }

        html.dark-mode .search-field input::placeholder,
        html.dark-mode #keyword::placeholder {
            color: var(--dm-text-muted) !important;
        }

        html.dark-mode .search-field input:focus,
        html.dark-mode #keyword:focus {
            background-color: var(--dm-input-bg) !important;
            border-color: var(--dm-accent) !important;
            color: var(--dm-text) !important;
            outline: none !important;
            box-shadow: 0 0 0 2px rgba(79,142,247,.25) !important;
        }

    /* Search button */
    html.dark-mode .search-field button,
    html.dark-mode .search-field button[type="submit"] {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-input-border) !important;
        color: var(--dm-accent) !important;
    }

        html.dark-mode .search-field button:hover {
            background-color: var(--dm-accent) !important;
            color: #fff !important;
        }

/* Search links bar */
html.dark-mode .search-links {
    color: var(--dm-text-muted) !important;
}

    html.dark-mode .search-links a {
        color: var(--dm-accent) !important;
    }

        html.dark-mode .search-links a:hover {
            color: var(--dm-accent2) !important;
            text-decoration: underline !important;
        }

        /* Action buttons in search links */
        html.dark-mode .search-links a.action-button {
            color: var(--dm-accent2) !important;
            font-weight: 500 !important;
        }

            html.dark-mode .search-links a.action-button:hover {
                color: #fff !important;
            }

/* Advanced search panel */
html.dark-mode #adv_search {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

    html.dark-mode #adv_search label {
        color: var(--dm-text-muted) !important;
        font-size: .8rem;
    }

/* ═══════════════════════════════════════════════════════════════════
   ALL TABLES — dark mode
   ═══════════════════════════════════════════════════════════════════ */

/* Bootstrap 5 CSS vars — most important, affects all table variants */
html.dark-mode table {
    --bs-table-bg: var(--dm-surface) !important;
    --bs-table-striped-bg: var(--dm-row-alt) !important;
    --bs-table-striped-color: var(--dm-text) !important;
    --bs-table-hover-bg: var(--dm-hover) !important;
    --bs-table-hover-color: var(--dm-text) !important;
    --bs-table-color: var(--dm-text) !important;
    --bs-table-border-color: var(--dm-border) !important;
    --bs-table-accent-bg: transparent !important;
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

    /* All cells */
    html.dark-mode table td,
    html.dark-mode table th {
        background-color: transparent !important;
        color: var(--dm-text) !important;
        border-color: var(--dm-border) !important;
    }

    /* Header row */
    html.dark-mode table thead tr,
    html.dark-mode table thead th {
        background-color: var(--dm-surface2) !important;
        color: var(--dm-text) !important;
        border-color: var(--dm-border) !important;
    }

    /* Striped odd rows */
    html.dark-mode table.table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--dm-surface) !important;
        color: var(--dm-text) !important;
        --bs-table-accent-bg: transparent !important;
        --bs-table-color: var(--dm-text) !important;
    }

    /* Striped even rows */
    html.dark-mode table.table-striped > tbody > tr:nth-of-type(even) > * {
        background-color: var(--dm-row-alt) !important;
        color: var(--dm-text) !important;
        --bs-table-accent-bg: transparent !important;
        --bs-table-color: var(--dm-text) !important;
    }

    /* Non-striped alternating rows */
    html.dark-mode table tbody tr:nth-child(even) {
        background-color: var(--dm-row-alt) !important;
    }

    html.dark-mode table tbody tr:nth-child(odd) {
        background-color: var(--dm-surface) !important;
    }

    /* Hover */
    html.dark-mode table tbody tr:hover > td,
    html.dark-mode table tbody tr:hover > th {
        background-color: var(--dm-hover) !important;
        color: var(--dm-text) !important;
    }

    /* Links inside tables */
    html.dark-mode table td a {
        color: var(--dm-accent) !important;
    }

        html.dark-mode table td a:hover {
            color: var(--dm-accent2) !important;
            text-decoration: underline !important;
        }

    /* Header sort links */
    html.dark-mode table thead th a {
        color: var(--dm-accent) !important;
    }

        html.dark-mode table thead th a:hover {
            color: var(--dm-accent2) !important;
        }

    /* Checkboxes */
    html.dark-mode table td input[type="checkbox"],
    html.dark-mode table th input[type="checkbox"] {
        accent-color: var(--dm-accent) !important;
    }

/* ── Exceptions — tables that should NOT be dark ── */
/* sb-admin sidebar and nav tables if any */
html.dark-mode .main-header table,
html.dark-mode .main-sidebar table,
html.dark-mode .navbar table {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — preserve white text on coloured buttons in dark mode
   Prevents the global anchor colour override from washing out btn text
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .btn,
html.dark-mode a.btn,
html.dark-mode .btn-primary,
html.dark-mode a.btn-primary,
html.dark-mode .btn-secondary,
html.dark-mode a.btn-secondary,
html.dark-mode .btn-success,
html.dark-mode a.btn-success,
html.dark-mode .btn-danger,
html.dark-mode a.btn-danger,
html.dark-mode .btn-warning,
html.dark-mode a.btn-warning,
html.dark-mode .btn-info,
html.dark-mode a.btn-info,
html.dark-mode .btn-dark,
html.dark-mode a.btn-dark {
    color: #ffffff !important;
    text-decoration: none !important;
}

html.dark-mode .btn-light,
html.dark-mode a.btn-light,
html.dark-mode .btn-outline-dark,
html.dark-mode a.btn-outline-dark {
    color: #1e2535 !important;
}

/* Outline buttons — text should match the border accent colour */
html.dark-mode .btn-outline-primary,
html.dark-mode a.btn-outline-primary {
    color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
}

html.dark-mode .btn-outline-success,
html.dark-mode a.btn-outline-success {
    color: #34d399 !important;
    border-color: #34d399 !important;
}

html.dark-mode .btn-outline-danger,
html.dark-mode a.btn-outline-danger {
    color: #f87171 !important;
    border-color: #f87171 !important;
}

html.dark-mode .btn-outline-secondary,
html.dark-mode a.btn-outline-secondary {
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border) !important;
}

/* Hover states — slightly lighten */
html.dark-mode a.btn:hover,
html.dark-mode .btn:hover {
    opacity: .88;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOTSTRAP-SELECT / SELECTPICKER — dark mode
   ═══════════════════════════════════════════════════════════════════ */

/* ── The visible button that replaces the select ── */
html.dark-mode .bootstrap-select > .dropdown-toggle,
html.dark-mode .bootstrap-select > .dropdown-toggle.btn-default,
html.dark-mode .bootstrap-select > .dropdown-toggle.btn-light,
html.dark-mode .bootstrap-select .btn {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

    html.dark-mode .bootstrap-select > .dropdown-toggle:hover,
    html.dark-mode .bootstrap-select > .dropdown-toggle:focus {
        background-color: var(--dm-surface2) !important;
        border-color: var(--dm-accent) !important;
        color: var(--dm-text) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(79,142,247,.2) !important;
    }

    /* ── Caret / arrow ── */
    html.dark-mode .bootstrap-select > .dropdown-toggle .caret {
        border-top-color: var(--dm-text-muted) !important;
    }

/* ── Dropdown menu ── */
html.dark-mode .bootstrap-select .dropdown-menu,
html.dark-mode .bootstrap-select .dropdown-menu.inner {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

    /* ── Dropdown items ── */
    html.dark-mode .bootstrap-select .dropdown-menu li a,
    html.dark-mode .bootstrap-select .dropdown-menu li a span.text {
        background-color: transparent !important;
        color: var(--dm-text) !important;
    }

        html.dark-mode .bootstrap-select .dropdown-menu li a:hover,
        html.dark-mode .bootstrap-select .dropdown-menu li a:focus {
            background-color: var(--dm-surface2) !important;
            color: var(--dm-accent) !important;
        }

    /* ── Selected / active item ── */
    html.dark-mode .bootstrap-select .dropdown-menu li.selected a,
    html.dark-mode .bootstrap-select .dropdown-menu li.active a {
        background-color: var(--dm-active-bg, #1e3a5f) !important;
        color: var(--dm-accent) !important;
    }

/* ── Search box inside dropdown ── */
html.dark-mode .bootstrap-select .bs-searchbox .form-control {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

    html.dark-mode .bootstrap-select .bs-searchbox .form-control::placeholder {
        color: var(--dm-text-muted) !important;
    }

/* ── No results message ── */
html.dark-mode .bootstrap-select .no-results {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text-muted) !important;
}

/* ── Notify box ── */
html.dark-mode .bootstrap-select .dropdown-menu .notify {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ── Disabled items ── */
html.dark-mode .bootstrap-select .dropdown-menu li.disabled a {
    color: var(--dm-text-muted) !important;
}

/* ── Filter option text (selected value shown in button) ── */
html.dark-mode .bootstrap-select .filter-option {
    color: var(--dm-text) !important;
}

/* ── Count badge when multiple selected ── */
html.dark-mode .bootstrap-select .filter-option-inner-inner {
    color: var(--dm-text) !important;
}

/* ── Bootstrap-select toggle button — override btn-default gradient ── */
html.dark-mode .bootstrap-select.btn-group > .dropdown-toggle,
html.dark-mode .bootstrap-select > button.dropdown-toggle,
html.dark-mode .bootstrap-select .btn-default,
html.dark-mode .bootstrap-select .btn-light,
html.dark-mode .bootstrap-select .btn-secondary {
    background-color: var(--dm-input-bg) !important;
    background-image: none !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}

/* ── Placeholder text "Nothing selected" ── */
html.dark-mode .bootstrap-select .filter-option,
html.dark-mode .bootstrap-select .filter-option-inner,
html.dark-mode .bootstrap-select .filter-option-inner-inner,
html.dark-mode .bootstrap-select .placeholder {
    color: var(--dm-text-muted) !important;
}

/* ── Override Bootstrap 3/4 btn-default which uses background-image gradient ── */
html.dark-mode .btn-default {
    background-color: var(--dm-input-bg) !important;
    background-image: none !important;
    border-color: var(--dm-input-border) !important;
    color: var(--dm-text) !important;
}

    html.dark-mode .btn-default:hover,
    html.dark-mode .btn-default:focus,
    html.dark-mode .btn-default:active,
    html.dark-mode .btn-default.active {
        background-color: var(--dm-surface2) !important;
        background-image: none !important;
        border-color: var(--dm-accent) !important;
        color: var(--dm-text) !important;
    }

/* ═══════════════════════════════════════════════════════════════════
   JQUERY UI AUTOCOMPLETE — dark mode
   ═══════════════════════════════════════════════════════════════════ */

html.dark-mode .ui-autocomplete {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    padding: 4px 0 !important;
}

    html.dark-mode .ui-autocomplete .ui-menu-item {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

        html.dark-mode .ui-autocomplete .ui-menu-item-wrapper,
        html.dark-mode .ui-autocomplete .ui-menu-item a {
            display: block !important;
            padding: 8px 14px !important;
            color: var(--dm-text) !important;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            font-size: .85rem !important;
            text-decoration: none !important;
            cursor: pointer !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

            html.dark-mode .ui-autocomplete .ui-menu-item-wrapper:hover,
            html.dark-mode .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
            html.dark-mode .ui-autocomplete .ui-menu-item a:hover,
            html.dark-mode .ui-autocomplete .ui-menu-item a.ui-state-focus,
            html.dark-mode .ui-autocomplete .ui-menu-item a.ui-state-active {
                background: rgba(79,142,247,.15) !important;
                color: var(--dm-accent) !important;
                border: none !important;
                outline: none !important;
            }

/* ── Remove jQuery UI's default widget styling ── */
html.dark-mode .ui-widget,
html.dark-mode .ui-widget-content,
html.dark-mode .ui-widget-header {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    font-family: inherit !important;
}

    html.dark-mode .ui-state-default,
    html.dark-mode .ui-widget-content .ui-state-default {
        background: transparent !important;
        border: none !important;
        color: var(--dm-text) !important;
    }

    html.dark-mode .ui-state-focus,
    html.dark-mode .ui-state-hover,
    html.dark-mode .ui-widget-content .ui-state-focus,
    html.dark-mode .ui-widget-content .ui-state-hover {
        background: rgba(79,142,247,.15) !important;
        border: none !important;
        color: var(--dm-accent) !important;
    }

/* ── Scrollbar inside autocomplete ── */
html.dark-mode .ui-autocomplete {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
}

    html.dark-mode .ui-autocomplete::-webkit-scrollbar {
        width: 4px;
    }

    html.dark-mode .ui-autocomplete::-webkit-scrollbar-track {
        background: transparent;
    }

    html.dark-mode .ui-autocomplete::-webkit-scrollbar-thumb {
        background: var(--dm-border);
        border-radius: 2px;
    }

/* ── Bootstrap-select / selectpicker — max dropdown height ── */
.bootstrap-select .dropdown-menu.inner {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Also cap the outer dropdown menu wrapper */
.bootstrap-select .dropdown-menu {
    max-height: 250px !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .breadcrumb {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

    html.dark-mode .breadcrumb a {
        color: var(--dm-accent) !important;
    }

        html.dark-mode .breadcrumb a:hover,
        html.dark-mode .breadcrumb a:focus {
            color: var(--dm-accent2) !important;
            text-decoration: underline;
        }

    html.dark-mode .breadcrumb > .active,
    html.dark-mode .breadcrumb-item.active {
        color: var(--dm-text) !important;
    }

    html.dark-mode .breadcrumb > li + li::before,
    html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
        color: var(--dm-text-muted) !important;
    }