/* ==========================================================================
   NukeWorker Quiz (Savsoft) — DARK MODE overlay
   Non-invasive: quiz_app is a third-party (Savsoft) app kept stock. This file
   only adds html[data-theme="dark"] rules on top of the app's existing CSS
   (Bootstrap 4 / SB Admin 2 + nukeworker_quiz.css). Loaded AFTER those sheets
   in quiz_app/app/Views/nukeworker_header.php so it wins on source order;
   !important is used where SB Admin 2 / Bootstrap specificity requires it.
   Light mode is untouched — every rule here is scoped under
   html[data-theme="dark"].
   ========================================================================== */

/* Palette (matches includes/nw-components.css dark tokens) */
html[data-theme="dark"] {
    --nwq-bg: #0f1720;
    --nwq-surface: #1a2430;
    --nwq-elevated: #202b36;
    --nwq-border: #2c3a4a;
    --nwq-text: #d8dde3;
    --nwq-muted: #9fb0c0;
    --nwq-link: #8fbce6;
    --nwq-link-hover: #FFD700;
    --nwq-input-bg: #131b24;
}

/* --------------------------------------------------------------------------
   Page background / wrapper
   nukeworker_header.php sets body{background:#346699} and .wrapper{background:white}
   inline — override both under dark mode.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--nwq-bg) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .wrapper {
    background-color: var(--nwq-surface) !important;
    background-image: none !important;
}

html[data-theme="dark"] .optional-navigation {
    background-color: var(--nwq-surface) !important;
}

/* Base link colors set inline in the quiz header (a,a:link,a:visited{color:black}) */
html[data-theme="dark"] a,
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
    color: var(--nwq-link);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active {
    color: var(--nwq-link-hover);
}

/* --------------------------------------------------------------------------
   SB Admin 2 shell: sidebar, topbar, content wrapper
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #content-wrapper {
    background-color: var(--nwq-bg) !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .topbar {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .topbar .nav-item .nav-link,
html[data-theme="dark"] .topbar .nav-item .nav-link .text-gray-600,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
    color: var(--nwq-muted) !important;
}

html[data-theme="dark"] .topbar-divider {
    border-right: 1px solid var(--nwq-border) !important;
}

html[data-theme="dark"] .topbar .dropdown-list .dropdown-header,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--nwq-text) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--nwq-border) !important;
}

/* Sidebar itself keeps its brand gradient (inline style on #accordionSidebar) —
   left alone intentionally, it's brand/accent, not a neutral surface. Only the
   collapse submenus (white by default) get darkened. */
html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner,
html[data-theme="dark"] .collapse-inner.bg-white,
html[data-theme="dark"] .bg-white {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
html[data-theme="dark"] .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Cards / panels (Bootstrap .card + legacy .panel used on result & login pages)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .card-body {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

/* NukeWorker premium card (nukeworker_quiz.css .nw-card) is white by design —
   darken it too so quiz question/result cards match the rest of the page. */
html[data-theme="dark"] .nw-card {
    background-color: var(--nwq-surface) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* Quiz footer action bar (frosted white by default) */
html[data-theme="dark"] .quiz-footer-card {
    background: rgba(26, 36, 48, 0.96) !important;
    border: 1px solid var(--nwq-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* --------------------------------------------------------------------------
   Question / answer blocks (quiz_attempt_*.php)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .question_div,
html[data-theme="dark"] .question_container,
html[data-theme="dark"] .option_container {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .op {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .op:hover {
    background-color: var(--nwq-surface) !important;
}

/* Question navigator side panel (inline style="background:#CEDDF0" in
   quiz_attempt_Default.php) and the not-visited "qbtn" default state (#212121
   already dark and left alone — that's a status color, not a surface). */
html[data-theme="dark"] .col-md-3[style*="CEDDF0"],
html[data-theme="dark"] .question-nav-panel {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
}

/* --------------------------------------------------------------------------
   Result / score pages
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .rqn {
    background-color: var(--nwq-surface) !important;
}

/* Per-question review blocks: keep the correct/wrong accent colors on the
   left border, but darken the light tint backgrounds used for correct/
   incorrect/marked/unanswered rows. */
html[data-theme="dark"] .col-md-12[style*="#f8fff9"] { background-color: rgba(40, 167, 69, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#fff8f8"] { background-color: rgba(220, 53, 69, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#fffdf0"] { background-color: rgba(255, 193, 7, 0.12) !important; }
html[data-theme="dark"] .col-md-12[style*="#ffffff"] { background-color: var(--nwq-surface) !important; }

/* Answer-sheet per-option review rows (view_result.php). The Savsoft template
   renders every option/answer with hardcoded LIGHT-mode inline styles (dark
   #333 / #1e3c72 / #000 text, #f0fff4 correct-answer boxes). Inline color beats
   a plain rule, so the specific inline fragments are overridden with !important,
   scoped to .rqn so nothing outside the answer sheet is touched. This is what
   was making the option text near-invisible on the dark card. */

/* Option / answer body text (#333 unselected, #000 long-answer) */
html[data-theme="dark"] .rqn [style*="color: #333"],
html[data-theme="dark"] .rqn [style*="color:#000"] {
    color: var(--nwq-text) !important;
}

/* Selected-option text + "Your Selection" / "Your Answer" accent labels (#1e3c72) */
html[data-theme="dark"] .rqn [style*="color: #1e3c72"] {
    color: var(--nwq-link) !important;
}

/* Selected-option row + short-answer "Your Answer" box: the faint blue tint
   (rgba(30,60,114,.05)) is invisible on dark — lift it and lighten the accent border. */
html[data-theme="dark"] .rqn [style*="rgba(30, 60, 114, 0.05)"] {
    background-color: rgba(143, 188, 230, 0.12) !important;
    border-color: var(--nwq-link) !important;
}

/* Unselected-option hairline border (#f0f2f5, near-white -> would glare on dark) */
html[data-theme="dark"] .rqn [style*="#f0f2f5"] {
    border-color: var(--nwq-border) !important;
}

/* "Correct Answer" callout: light-green fill -> dark green tint, green text lifted */
html[data-theme="dark"] .rqn [style*="#f0fff4"] {
    background-color: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
}
html[data-theme="dark"] .rqn [style*="color: #2f855a"] {
    color: #7ee2a8 !important;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .table {
    color: var(--nwq-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .table thead th {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Bootstrap 5 is loaded on these pages alongside SB Admin 2 (Bootstrap 4), and BS5 paints table
   hover/stripe colour onto the CELL, not the row:
       .table-hover > tbody > tr:hover > * { color: var(--bs-table-hover-color) }
   --bs-table-hover-color defaults to #212529, so the rule above (which only reaches the <tr>) was
   silently outranked at cell level and every row went near-black-on-dark on hover. Retarget BS5's
   own variables so its mechanism produces dark-mode colours, and match its cell-level selector.
   Fixes user/group_list, payment_gateway, payment_gateway/subscriptions and every other table. */
html[data-theme="dark"] .table {
    --bs-table-color: var(--nwq-text);
    --bs-table-bg: transparent;
    --bs-table-hover-color: var(--nwq-text);
    --bs-table-hover-bg: var(--nwq-elevated);
    --bs-table-striped-color: var(--nwq-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-color: var(--nwq-text);
    --bs-table-active-bg: var(--nwq-elevated);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--nwq-text) !important;
}

/* Links and muted text inside a hovered row keep their own colours rather than inheriting the
   cell override. */
html[data-theme="dark"] .table-hover > tbody > tr:hover > * a {
    color: var(--nwq-link) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * a:hover {
    color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * .text-muted,
html[data-theme="dark"] .table-hover > tbody > tr:hover > * small {
    color: var(--nwq-muted) !important;
}

/* --------------------------------------------------------------------------
   Forms / inputs
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--nwq-input-bg) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--nwq-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--nwq-input-bg) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-link) !important;
    box-shadow: 0 0 0 0.2rem rgba(143, 188, 230, 0.25) !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-muted) !important;
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] label {
    color: var(--nwq-text);
}

/* select2 widget used on quiz list/filter pages */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--nwq-input-bg) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Buttons (leave brand/status colors — btn-nukeworker gradient, btn-success/
   btn-danger/btn-warning correct-wrong colors — alone; only neutral/default
   buttons need dark treatment)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .button-link {
    background: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .button-link:hover {
    background: var(--nwq-link-hover) !important;
    color: #1e3c72 !important;
    border-color: var(--nwq-link-hover) !important;
}

html[data-theme="dark"] .btn-link {
    color: var(--nwq-link) !important;
}

html[data-theme="dark"] .btn-link:hover {
    color: var(--nwq-link-hover) !important;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

/* --------------------------------------------------------------------------
   Alerts / badges / list groups
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--nwq-surface) !important;
    color: var(--nwq-text);
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .alert {
    border-color: var(--nwq-border) !important;
}

/* Bootstrap 5 contextual alerts ship light pastel backgrounds (.alert-success is #d1e7dd) with no
   dark variant. Left alone they render a bright panel with pale link text on top -- measured 1.54:1
   on the dashboard's "recently registered" panel. Tint the surface instead and keep a coloured
   left edge so the semantic meaning survives. */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
    background-color: var(--nwq-elevated) !important;
    color: var(--nwq-text) !important;
    border-color: var(--nwq-border) !important;
}

html[data-theme="dark"] .alert-success  { border-left: 4px solid #4caf82 !important; }
html[data-theme="dark"] .alert-info     { border-left: 4px solid #4a9fd8 !important; }
html[data-theme="dark"] .alert-warning  { border-left: 4px solid #d8a44a !important; }
html[data-theme="dark"] .alert-danger   { border-left: 4px solid #d86a6a !important; }

html[data-theme="dark"] .alert a,
html[data-theme="dark"] .alert .alert-link {
    color: var(--nwq-link) !important;
}

/* --------------------------------------------------------------------------
   Headings / misc text that assumed a light/blue background
   -------------------------------------------------------------------------- */
/* SB Admin 2's grey scale. .text-gray-800 (#5a5c69) is what the dashboard stat numbers use, and it
   measured 2.37:1 against the dark card. The full range is listed so no future page reintroduces
   the problem with a neighbouring shade. */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .text-muted {
    color: var(--nwq-muted) !important;
}

/* Bootstrap 5's .text-primary is #0d6efd, which only reaches 3.48:1 on our dark surface. The quiz
   link blue is tuned for it. Same for the success/danger/info accents used as headings. */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .text-primary a {
    color: var(--nwq-link) !important;
}

/* The sidebar keeps its NukeWorker blue (#346699) in dark mode, so the brand text needs to be read
   against THAT, not against the page surface. --nwq-link only reaches 3.0:1 there. */
html[data-theme="dark"] .sidebar-brand-text,
html[data-theme="dark"] .sidebar-brand {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-success { color: #6fcf9f !important; }
html[data-theme="dark"] .text-danger  { color: #f08a8a !important; }
html[data-theme="dark"] .text-warning { color: #e8bc6a !important; }
html[data-theme="dark"] .text-info    { color: #6bb8e0 !important; }

/* --------------------------------------------------------------------------
   Buttons, badges, pagination
   Found by a contrast sweep of the admin pages, 2026-08-07.
   -------------------------------------------------------------------------- */

/* A solid button rendered as <a> picks up the dark link colour from the `a` rule near the top of
   this file, which wipes out Bootstrap's white button text: "Add New" measured 2.27:1 on
   group_list, quiz, account and notification. Restore the button's own foreground. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] a.btn-danger,
html[data-theme="dark"] a.btn-dark {
    color: #ffffff !important;
}

/* .btn-info and .btn-warning have LIGHT fills (#36b9cc, #f6c23e). White on those is worse than the
   original problem -- btn-info measured 1.96:1 with white text -- so they take dark text. */
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] a.btn-warning,
html[data-theme="dark"] a.btn-info {
    color: #10202b !important;
}

/* Outline buttons sit directly on the dark surface, where the stock accents are too dim
   (.btn-outline-danger measured 3.46:1 on the Subscriptions screen). */
html[data-theme="dark"] .btn-outline-danger    { color: #f08a8a !important; border-color: #f08a8a !important; }
html[data-theme="dark"] .btn-outline-warning   { color: #e8bc6a !important; border-color: #e8bc6a !important; }
html[data-theme="dark"] .btn-outline-success   { color: #6fcf9f !important; border-color: #6fcf9f !important; }
html[data-theme="dark"] .btn-outline-primary   { color: var(--nwq-link) !important; border-color: var(--nwq-link) !important; }
html[data-theme="dark"] .btn-outline-secondary { color: var(--nwq-text) !important; border-color: var(--nwq-border) !important; }

html[data-theme="dark"] .btn-outline-danger:hover  { background-color: #f08a8a !important; color: #10202b !important; }
html[data-theme="dark"] .btn-outline-warning:hover { background-color: #e8bc6a !important; color: #10202b !important; }
html[data-theme="dark"] .btn-outline-success:hover { background-color: #6fcf9f !important; color: #10202b !important; }

/* Badges keep their coloured fill; only the text has to flip to stay legible on it.
   .badge-info measured 2.34:1 on the Subscriptions screen. */
html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .badge-light {
    color: #10202b !important;
}

html[data-theme="dark"] .badge-primary,
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .badge-dark {
    color: #ffffff !important;
}

/* .badge-secondary's mid-grey fill (#858796) only reaches 3.56:1 with white text. */
html[data-theme="dark"] .badge-secondary {
    color: #10202b !important;
}

/* style.css sets a global `strong { color: #666 }`, which dimmed every bold run on a dark surface
   (the checkout price measured 2.73:1). Let bold text take its container's colour instead. */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: inherit !important;
}

/* Pagination on the user list was 2.85:1, and its row counter 2.42:1. */
html[data-theme="dark"] .page-link {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-link) !important;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    color: var(--nwq-muted) !important;
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--nwq-link) !important;
    border-color: var(--nwq-link) !important;
    color: #10202b !important;
}

html[data-theme="dark"] .pagination-info {
    color: var(--nwq-text) !important;
}

html[data-theme="dark"] a.no-decoration {
    color: var(--nwq-link) !important;
}

/* NukeWorker brand blue on headings is tuned for a white page; on the dark surface the Available
   Quizzes heading measured 1.45:1. */
html[data-theme="dark"] .nw-text-blue {
    color: var(--nwq-link) !important;
}

/* The Settings page's active tab keeps a hardcoded #dddddd fill, so its label sat at 1.47:1.
   Covers both the Bootstrap 3/4 (li.active) and Bootstrap 4/5 (.nav-link.active) markup. */
html[data-theme="dark"] .nav-tabs > li.active,
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills > li.active,
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--nwq-elevated) !important;
    border-color: var(--nwq-border) !important;
    color: var(--nwq-text) !important;
}

/* The Settings tabs carry the fill as an inline style ATTRIBUTE (style="background:#dddddd"), which
   outranks every normal stylesheet rule, so only !important reaches it. Matching on [style] keeps
   this scoped to the tabs that actually do it rather than restyling all navs. */
html[data-theme="dark"] .nav-tabs > li[style],
html[data-theme="dark"] .nav-pills > li[style] {
    background: var(--nwq-elevated) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--nwq-border);
}