/* ============================================================================
Q-SERVICE ADMIN PANEL — DARK (NIGHT) MODE
----------------------------------------------------------------------------
Retrofit dark theme for the legacy Limitless / Bootstrap admin template.
EVERY rule is scoped under html[data-theme="dark"] so it is a no-op in light
(day) mode. The theme is toggled by qs-theme-toggle.js and applied before
paint by the inline no-FOUC script in the layout .
IMPORTANT — this project's custom stylesheet (ContentAdmin/css/site.css,
the "Blue Frame Layout") pins nearly every structural background/text color
with `!important`: html/body/.page-content (solid blue canvas), .content-
wrapper (floating white card), .sidebar-dark, .card-header, table headers,
DataTables toolbar/pagination, the dt-button-collection export dropdown,
nav-pills, and the qs-ops-module's badge-flat pills / qs-card-rows table.
In CSS, `!important` always wins over a non-important rule regardless of
specificity or source order — so EVERY override below that corresponds to
an `!important` light-mode rule MUST also carry `!important`, or it silently
does nothing. This file is linked last in so among competing
`!important` declarations of equal specificity, these win (last one in the
cascade wins ties).
============================================================================ */
/* ---------------------------------------------------------------------------
0. TOKENS + base document
--------------------------------------------------------------------------- */
html[data-theme="dark"] {
/* 2026-08 audit remediation (L5-crit): the 18 --qs-d-* literals that lived here are
DELETED. They were already dead: qs-tokens.css declares the same names under
:root[data-theme="dark"], specificity (0,2,0), while this rule is
html[data-theme="dark"], (0,1,1) — and specificity beats source order, so the
bridge in qs-tokens.css was winning regardless of link order. The tokens now have
exactly one home. color-scheme below MUST stay: it drives native scrollbars,
date/colour pickers and autofill. */
/* let native controls (scrollbars, date/color pickers, autofill) render dark */
color-scheme: dark;
}
/* ROOT CAUSE FIX #1 — the "Blue Frame Layout" canvas. site.css pins these with
!important (a solid blue html/body/.page-content canvas behind a floating
white .content-wrapper card) — without matching !important here, this whole
chain silently stays exactly as-is in dark mode, which is why the page
background and the giant content card were the two things NOT going dark. */
html[data-theme="dark"] html,
html[data-theme="dark"] body {
background: var(--qs-d-bg) !important;
color: var(--qs-d-text);
}
html[data-theme="dark"] .page-content {
background: var(--qs-d-bg) !important;
}
html[data-theme="dark"] .content-wrapper {
background: var(--qs-d-surface) !important;
box-shadow: 0 4px 32px var(--qs-d-shadow-lg), 0 1px 6px var(--qs-d-shadow) !important;
}
/* Default readable text everywhere inside the content area, so no element keeps
the theme's dark #333/#444 ink (this is the "gray / dark-white, not clear"
text). Children with their own semantic color (.text-danger, badges, etc.)
still win via their own more-specific rules. */
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-body p,
html[data-theme="dark"] .card-body span:not([class*="text-"]):not([class*="badge"]),
html[data-theme="dark"] .card-body div:not([class*="text-"]),
html[data-theme="dark"] dt,
html[data-theme="dark"] dd {
color: var(--qs-d-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
color: var(--qs-d-text);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] .text-secondary {
color: var(--qs-d-text-muted) !important;
}
/* dark text utilities would be invisible on a dark surface */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-black-50,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
color: var(--qs-d-text) !important;
}
/* content links (excludes buttons / nav / dropdown / pagination links, which
carry their own colors). GPG redesign additions: .sb-item (sidebar menu
links) and .tb-btn (topbar icon buttons, e.g. the theme toggle ) are
plain tags too and were never excluded here, so this generic "prose
link" rule's higher specificity painted every unselected sidebar item
link-blue in dark mode instead of the neutral --qs-nav-fg-leaf text color
qs-menu.css/qs-theme-dark.css's own .sb-item rule intended. */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-nav-link):not(.navbar-brand-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.badge):not(.sb-item):not(.tb-btn) {
color: var(--qs-d-link);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-nav-link):not(.navbar-brand-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.badge):not(.sb-item):not(.tb-btn):hover {
color: var(--qs-link-hover);
}
html[data-theme="dark"] hr { border-top-color: var(--qs-d-border); }
html[data-theme="dark"] code:not([class*="hljs"]) {
background-color: var(--qs-d-surface-2);
color: var(--qs-danger-solid);
}
html[data-theme="dark"] pre {
background-color: var(--qs-d-surface-2);
color: var(--qs-d-text);
border-color: var(--qs-d-border);
}
/* custom scrollbars app-wide */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--qs-d-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--qs-d-border-strong);
border-radius: var(--qs-radius-sm);
border: 2px solid var(--qs-d-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--qs-d-text-faint); }
/* Firefox thin scrollbars used on .table-responsive / .dt-table-scroll (site.css pins these
colors directly on the element, not via ::-webkit-*, so no !important war here) */
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dt-table-scroll {
scrollbar-color: var(--qs-d-border-strong) var(--qs-d-bg);
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-track,
html[data-theme="dark"] .dt-table-scroll::-webkit-scrollbar-track {
background: var(--qs-d-bg);
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
html[data-theme="dark"] .dt-table-scroll::-webkit-scrollbar-thumb {
background: var(--qs-d-border-strong);
border-color: var(--qs-d-bg);
}
html[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .dt-table-scroll::-webkit-scrollbar-thumb:hover {
background: var(--qs-d-text-faint);
}
/* ---------------------------------------------------------------------------
1. APP SHELL — navbar, sidebar, page header, "list/add-edit" header, footer
--------------------------------------------------------------------------- */
/* Top navbar — beats both site.css's `!important` #173FA6 fill and
qs-signature.css's `!important` animated gradient (both load before this
file, so equal-specificity !important ties go to whichever is later in the
cascade — this file, since it's linked last). */
html[data-theme="dark"] .navbar.navbar-dark,
html[data-theme="dark"] .navbar.navbar-expand-md.navbar-dark,
html[data-theme="dark"] [dir="rtl"] .navbar.navbar-expand-md.navbar-dark,
html[data-theme="dark"] [dir="ltr"] .navbar.navbar-expand-md.navbar-dark {
background: var(--qs-d-surface) !important;
animation: none !important;
border-bottom: 1px solid var(--qs-d-border);
}
/* Page + content background (base: .page-content { background:#f5f5f5 }) */
html[data-theme="dark"] .content { color: var(--qs-d-text); }
/* Standard Bootstrap-y page header (background:#fff, not !important) */
html[data-theme="dark"] .page-header {
background-color: var(--qs-d-surface);
color: var(--qs-d-text);
box-shadow: 0 1px 6px var(--qs-d-shadow);
}
/* .page-header-light variant (e.g. Account/ChangePassword) was never overridden
for dark mode, so it stayed white/light (the bright card the user flagged) */
html[data-theme="dark"] .page-header-light {
background-color: var(--qs-d-surface);
color: var(--qs-d-text);
}
/* The real white box was the INNER child (design/style.css:161 pins
.page-header-content to #fff, no !important) — .page-header-light above
only themes the outer wrapper and never reached this element. */
html[data-theme="dark"] .page-header-content {
background-color: var(--qs-d-surface) !important;
color: var(--qs-d-text);
}
html[data-theme="dark"] .page-header .page-title h1,
html[data-theme="dark"] .page-header .page-title h4,
html[data-theme="dark"] .page-header .page-title h5 {
color: var(--qs-d-text);
}
html[data-theme="dark"] .breadcrumb-item { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--qs-d-text-faint); }
/* ROOT CAUSE FIX #2 — the shared "List / AddEdit page header" (icon + title +
breadcrumb bar). Used by _ListLayout.cshtml, _AddEditLayout.cshtml, and
_TabbedListLayout.cshtml — i.e. the header at the top of EVERY list and
add/edit page across the whole project. site.css gives it a plain (non-
!important) white background but an !important title color — this was
never targeted at all in the first pass. */
html[data-theme="dark"] .addedit-header-inner {
background: var(--qs-d-surface);
box-shadow: 0 2px 12px var(--qs-d-shadow), 0 1px 4px var(--qs-d-shadow);
border-inline-end-color: var(--qs-d-primary) !important;
border-right-color: var(--qs-d-primary) !important;
}
html[data-theme="dark"] .addedit-hdr-icon {
background: rgba(var(--qs-primary-rgb), 0.16);
color: var(--qs-d-primary);
}
html[data-theme="dark"] .addedit-header-title {
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .addedit-bc-link {
color: var(--qs-d-text-faint) !important;
}
html[data-theme="dark"] .addedit-bc-link:hover {
color: var(--qs-d-primary) !important;
}
html[data-theme="dark"] .addedit-bc-active {
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .addedit-bc-sep { color: var(--qs-d-text-faint); }
/* Sidebar — site.css pins .sidebar-dark to a solid #173FA6 fill with
!important (it's designed to match the blue canvas), so the retint needs
matching !important all the way down every state (hover/active/submenu). */
html[data-theme="dark"] .sidebar-dark {
background: var(--qs-d-surface) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover {
background: var(--qs-d-surface-3) !important;
}
/* Dark mode keeps the SAME three-level hierarchy as light — quiet header, recessive
leaf, unmistakable active row — expressed in the dark palette's own tokens rather
than repeating light-mode literals. The cyan accent bar carries over unchanged: it
is the one "you are here" signal in both themes. */
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link,
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link span:not(.badge):not([class*="badge"]),
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link .nav-text {
color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link i {
color: var(--qs-d-text-faint) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover,
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover span:not(.badge):not([class*="badge"]),
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover .nav-text,
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover i,
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active span:not(.badge):not([class*="badge"]),
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active .nav-text {
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active {
background: rgba(var(--qs-primary-rgb), 0.30) !important;
color: var(--qs-d-text) !important;
border-inline-start-width: 3px !important;
border-inline-start-style: solid !important;
}
html[data-theme="dark"] .sidebar-dark .nav-item-submenu.nav-item-open > .nav-link {
background: rgba(var(--qs-primary-rgb), 0.22) !important;
border-inline-start-color: var(--qs-d-primary) !important;
}
/* Submenu flyout — pinned to solid white !important in light mode */
html[data-theme="dark"] .sidebar-dark .nav-group-sub {
background: var(--qs-d-surface-2) !important;
box-shadow: 0 4px 16px var(--qs-d-shadow) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-item a {
color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-item .nav-link i {
color: var(--qs-d-text-faint) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-item .nav-link:hover {
background: var(--qs-d-surface-3) !important;
color: var(--qs-d-link) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-item .nav-link:hover i {
color: var(--qs-d-link) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-item .nav-link.active {
background: var(--qs-d-primary) !important;
color: var(--qs-inverse-fg) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-group-sub .nav-group-sub {
background: var(--qs-d-surface-3) !important;
border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .sidebar-dark .nav-sidebar .nav-item-divider {
border-color: var(--qs-d-border) !important;
}
/* header/group labels + submenu container inside the sidebar (from the
original generic pass — kept, low-specificity so it's harmless either way) */
html[data-theme="dark"] .sidebar-dark .nav-sidebar .nav-item-header,
html[data-theme="dark"] .sidebar-dark .nav-sidebar-bordered > .nav-item-header {
background-color: rgba(var(--qs-shadow-rgb), 0.18);
color: var(--qs-d-text-faint);
border-top-color: var(--qs-d-border);
}
/* Footer (custom .app-footer*). site.css paints it with a BLUE GRADIENT via the
`background` shorthand — overriding only `background-color` leaves the gradient
background-image intact (that's why the footer stayed blue). Must use the
`background` shorthand to clear it. */
html[data-theme="dark"] .app-footer {
background: var(--qs-d-surface) !important;
border-top: 1px solid var(--qs-d-border);
color: var(--qs-d-text-muted);
}
html[data-theme="dark"] .app-footer__brand,
html[data-theme="dark"] .app-footer__brand strong { color: var(--qs-d-text); }
html[data-theme="dark"] .app-footer__brand-icon { color: var(--qs-d-text-muted); }
html[data-theme="dark"] .app-footer__copy { color: var(--qs-d-text-muted); }
html[data-theme="dark"] .app-footer__version {
color: var(--qs-d-text);
background: rgba(var(--qs-white-rgb), 0.08);
border-color: var(--qs-d-border);
}
/* Was a flat 2-stop primary->info gradient, much less visible than the reference's
3-stop blue/cyan/indigo bar (see the base rule in qs-layout.css). --qs-accent-cyan/
--qs-accent-indigo aren't theme-scoped (same value in both themes), so the base
rule's own gradient can just be reused here instead of a dimmer dark-only stand-in. */
html[data-theme="dark"] .app-footer__bar {
background: linear-gradient(90deg, var(--qs-primary), var(--qs-accent-cyan), var(--qs-accent-indigo));
}
html[data-theme="dark"] .app-footer__brand strong,
html[data-theme="dark"] .app-footer__brand-icon { color: var(--qs-d-text); }
html[data-theme="dark"] .app-footer__copy,
html[data-theme="dark"] .app-footer__version { color: var(--qs-d-text-muted); }
/* ---------------------------------------------------------------------------
2. BOOTSTRAP + LIMITLESS COMPONENTS
--------------------------------------------------------------------------- */
/* Cards / panels (Bootstrap's own .card{background-color:#fff} has no
!important, so higher specificity alone is enough here) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel {
/* Lighter shade (surface-2) so cards are visually distinguished from the page background */
background-color: var(--qs-d-surface-2) !important;
border-color: var(--qs-d-border);
color: var(--qs-d-text);
box-shadow: 0 1px 3px var(--qs-d-shadow);
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .panel-body {
background-color: var(--qs-d-surface-2) !important;
}
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .panel-footer {
background-color: var(--qs-d-surface);
border-top-color: var(--qs-d-border);
color: var(--qs-d-text-muted);
}
html[data-theme="dark"] .card .text-muted { color: var(--qs-d-text-muted) !important; }
/* ROOT CAUSE FIX #3 — card headers. site.css pins EVERY .card-header to a
solid #173FA6 fill with !important (this is the bright blue bar seen at
the top of every card, list table, and dashboard panel). */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .panel-heading {
background: var(--qs-d-surface-3) !important;
border-bottom: 1px solid var(--qs-d-border) !important;
}
html[data-theme="dark"] .card-header .card-title,
html[data-theme="dark"] .panel-title {
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .card-header .header-elements .btn {
background: var(--qs-d-surface-2) !important;
color: var(--qs-d-text) !important;
border-color: var(--qs-d-border-strong) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .card-header .header-elements .btn:hover {
background: var(--qs-d-surface) !important;
box-shadow: none !important;
}
/* Tables */
html[data-theme="dark"] .table,
html[data-theme="dark"] table.table {
color: var(--qs-d-text);
border-color: var(--qs-d-border);
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody + tbody {
border-color: var(--qs-d-border);
}
/* .table thead th / table.table thead th are brand blue #173FA6 !important
in site.css; table.dataTable thead th is a SEPARATE, more specific rule
also pinned #173FA6 !important — both need to be matched explicitly. */
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.table thead th,
html[data-theme="dark"] table.dataTable thead th {
background: var(--qs-d-surface-3) !important;
color: var(--qs-d-text) !important;
border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th { border-color: var(--qs-d-border); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) > * {
background-color: rgba(var(--qs-white-rgb), 0.02) !important;
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) > * {
background-color: transparent !important;
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover {
background: var(--qs-d-surface-2) !important;
color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .table .thead-light th {
background-color: var(--qs-d-surface-3);
color: var(--qs-d-text);
border-color: var(--qs-d-border);
}
html[data-theme="dark"] table.dataTable tbody td {
border-bottom-color: var(--qs-d-border) !important;
}
/* out-of-stock row highlight (light pink !important -> dark-tinted) */
html[data-theme="dark"] tr.qs-row-out-of-stock > td {
background-color: rgba(var(--qs-danger-rgb), 0.10) !important;
}
/* Forms / inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label {
background-color: var(--qs-d-surface-2);
border-color: var(--qs-d-border);
color: var(--qs-d-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus {
background-color: var(--qs-d-surface-2);
border-color: var(--qs-d-primary);
color: var(--qs-d-text);
box-shadow: 0 0 0 0.15rem rgba(var(--qs-primary-rgb), 0.25);
}
/* The