/*
 * 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)
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .list-group-item .badge,
html.dark-mode .list-group-item .pull-right,
html.dark-mode .list-group-item .float-right,
html.dark-mode .list-group-item .float-end {
    color: var(--dm-accent) !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;
}