/* ============================================================================
   Q-SERVICE DARK MODE — PAGE-LOCAL <style> OVERRIDES (AUTO-GENERATED)
   Generated by scanning every .cshtml view's <style> block for light
   backgrounds / dark ink / light borders and emitting a matching dark override.
   Scoped under html[data-theme="dark"] — no effect in light mode. Linked AFTER
   qs-theme-dark.css. Regenerate with scratchpad/gen-dark-pages.js.
   Rules generated: 62
   ============================================================================ */

html[data-theme="dark"] .error-card {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .error-title {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .error-details {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .btn-secondary {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .login-left__dots span:first-child {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .fp-back-link {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .fp-back-link:hover {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .login-field label {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .login-input {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .login-input:focus {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .login-lang__btn {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .login-lang__btn:hover {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .reg-logo-circle {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .notification-message {
    /* Was the same background as the modal itself (var(--qs-d-surface)), so the
       message box had no visible edge — only the left accent bar hinted it was
       a distinct box. Bumped one shade lighter so the box reads clearly against
       the modal body. */
    background-color: var(--qs-d-surface-2) !important;
    border: 1px solid var(--qs-d-border) !important;
}

html[data-theme="dark"] .stat-value {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .agg-section-title {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .agg-card {
    background-color: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .agg-card .agg-val {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .chart-card {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .export-tile {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .export-tile.active {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .table-clean tbody tr {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .cust-avatar {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .cust-name {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .money {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .ch-loading::before {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] #actionsModal .action-item {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] #actionsModal .action-item:hover {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] #actionsModal .action-item.is-primary .action-icon {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .od-info-box {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .od-v {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .od-summary-row {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .od-total-row {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .upload-placeholder {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .my-doc-type-badge {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .chat-search input {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .chat-conv-head {
    background-color: var(--qs-d-surface) !important;
}

/* 2026-08 audit remediation (L5-crit gap e): the partial .filter-pill-btn dark rules that
   were here are DELETED. They covered only .pill-all/.pill-secondary, leaving .pill-open,
   .pill-info and .pill-success on light-mode white in dark. All pill colours now resolve
   from semantic tokens in qs-filter-pills.css, which is theme-aware with no dark
   counterpart. */

html[data-theme="dark"] .dash-title {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .dash-panel-header {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .dash-filter-title {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .dash-filter-note {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .dash-sub-days {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .dash-updated-date {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .dash-quick-btn:hover {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .attn-card:hover {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .nav-tabs-highlight .nav-link:hover {
    background-color: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .stat-divider {
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .pchat-shell {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .pchat-head {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .pchat-input {
    background-color: var(--qs-d-surface) !important;
}

html[data-theme="dark"] .doc-type-badge {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .media-empty {
    background-color: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .upload-area {
    background-color: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .upload-area.dragover {
    background-color: rgba(var(--qs-primary-rgb), 0.12) !important;
}

html[data-theme="dark"] .upload-placeholder h4 {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .file-preview .file-name {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .custom-multiple-upload .upload-area {
    background-color: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}

html[data-theme="dark"] .wizard-step-title {
    color: var(--qs-d-text) !important;
}

html[data-theme="dark"] .user-info-section {
    background-color: var(--qs-d-surface) !important;
}


/* ============================================================================
   SECOND PASS (2026-07-22) — full per-page audit of all 104 colour-bearing
   views. Everything below is scoped under html[data-theme="dark"] and is a
   no-op in light mode. Grouped by area. Fills the gaps the auto-generator
   missed and never covered (inline style= attributes).
   ============================================================================ */

/* ---- GLOBAL: notification dropdown (_Layout.cshtml) — white card on EVERY
   authenticated page. Biggest offender. -------------------------------------*/
html[data-theme="dark"] .notification-dropdown {
    background: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
    box-shadow: 0 8px 32px var(--qs-d-shadow-lg) !important;
}
html[data-theme="dark"] .notification-dropdown::before,
html[data-theme="dark"] .notification-dropdown::after {
    border-bottom-color: var(--qs-d-surface) !important;
    background: var(--qs-d-surface) !important;
}
html[data-theme="dark"] .notification-dropdown-header {
    background: var(--qs-d-surface-2) !important;
    border-bottom-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .notification-dropdown-header span,
html[data-theme="dark"] .notif-title { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .notif-message,
html[data-theme="dark"] .notif-time,
html[data-theme="dark"] .notif-empty { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .notif-item { border-bottom-color: var(--qs-d-border) !important; }
html[data-theme="dark"] .notif-item:hover { background: var(--qs-d-surface-2) !important; }
html[data-theme="dark"] .notif-item.unread { background: rgba(var(--qs-primary-rgb), 0.10) !important; }
html[data-theme="dark"] .notification-dropdown-footer {
    background: var(--qs-d-surface-2) !important;
    border-top-color: var(--qs-d-border) !important;
}

/* ---- Wizard step nav (_WizardStepNav + _ServiceWizardStepNav) — the step
   title was #495057 = dark text on the dark page canvas = invisible. ---------*/
html[data-theme="dark"] .wizard-step-title { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .wizard-step-num,
html[data-theme="dark"] .wizard-step-label { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .wizard-step-circle {
    background: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text-muted) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .wizard-step-help {
    background: var(--qs-d-surface-2) !important;
    color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .wizard-step-line,
html[data-theme="dark"] .wizard-steps::after { background: var(--qs-d-border) !important; }

/* ---- Upload widgets (_FileUpload / _ImageUpload / _MultipleImageUpload) ----*/
html[data-theme="dark"] .upload-area { background: var(--qs-d-surface-2) !important; border-color: var(--qs-d-border) !important; }
html[data-theme="dark"] .upload-area:hover { background: var(--qs-d-surface-3) !important; }
html[data-theme="dark"] .upload-placeholder i { color: var(--qs-d-text-faint) !important; }

/* ---- Shared Order / Booking detail panels (_OrderDetails,
   _OrderFullDetailsContent, Bookings/Details, Bookings/_BookingDetails) ------*/
html[data-theme="dark"] .od-k { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .od-section-title { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .assignment-card {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .assignment-title { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .assignment-avatar { background: var(--qs-d-surface-3) !important; }
html[data-theme="dark"] .assignment-meta,
html[data-theme="dark"] .assignment-chip.unassigned {
    background: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .assignment-chip.assigned {
    background: rgba(var(--qs-success-rgb), 0.18) !important;
    color: var(--qs-d-success) !important;
}
html[data-theme="dark"] .assignment-input .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}

/* ---- Home admin dashboard (Home/Index + _AdminDashboard) .dash-* / .attn-* --*/
html[data-theme="dark"] .dash-section-title,
html[data-theme="dark"] .dash-panel-title { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .attn-card {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .attn-label { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .dash-quick-btn {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .dash-progress { background: var(--qs-d-surface-3) !important; }
html[data-theme="dark"] .dash-filter-bar .form-control,
html[data-theme="dark"] .qs-bc-channel { border-color: var(--qs-d-border) !important; }
/* Gradient stat cards are <a> links → the dark "content link" rule (blue
   #6ea8ff, high specificity from its :not() chain) was overriding their white
   text, making the numbers/labels blue and low-contrast on the coloured cards.
   Force white back on the card and every child. .dash-card-icon is EXCLUDED here:
   it used to be a small opaque white icon chip, but home-index.css now draws it
   as a big, faint (14%-opacity) corner watermark behind the text — forcing it
   back to fully-opaque white here fought that and made the watermark as loud
   as the text sitting on top of it. Its own rule (below) keeps it dim in dark
   mode too, instead of falling through to this opaque default. */
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .dash-card:hover,
html[data-theme="dark"] .dash-card:focus,
html[data-theme="dark"] .dash-card .dash-card-label,
html[data-theme="dark"] .dash-card .dash-card-value,
html[data-theme="dark"] .dash-card .dash-card-sub {
    color: var(--qs-inverse-fg) !important;
}
html[data-theme="dark"] .dash-card .dash-card-icon,
html[data-theme="dark"] .dash-card .dash-card-icon i {
    color: rgba(var(--qs-white-rgb), .14) !important;
}

/* Welcome hero (_DashboardHero .qs-hero) — the bright brand-blue block looks
   out of place on the dark canvas. Tone it to a deep muted navy and give it a
   subtle LIGHT border so it still reads as a defined "box", not a floating
   colour patch. Keep the white text. */
html[data-theme="dark"] .qs-hero {
    background: linear-gradient(120deg, var(--qs-surface), var(--qs-primary-subtle) 55%, var(--qs-surface-2)) !important;
    border: 1px solid rgba(var(--qs-white-rgb), 0.14) !important;
    box-shadow: 0 10px 30px rgba(var(--qs-shadow-rgb), 0.45) !important;
    animation: none !important;
}

/* Footer — the border alone still blended into the black page, so give the bar
   a distinctly lighter surface background + the visible top border. Now it
   clearly reads as a separated footer bar, not part of the black canvas. */
html[data-theme="dark"] .app-footer {
    background: var(--qs-d-surface-3) !important;
    border-top: 2px solid rgba(var(--qs-white-rgb), 0.35) !important;
}
html[data-theme="dark"] .app-footer__version {
    border: 1px solid rgba(var(--qs-white-rgb), 0.30) !important;
}

/* Login/Register/Forget/Reset brand panel (.login-left) — tone the bright blue
   split panel to a deep navy that matches the dark theme. */
html[data-theme="dark"] .login-left {
    background: linear-gradient(160deg, var(--qs-bg) 0%, var(--qs-primary-subtle) 55%, var(--qs-surface) 100%) !important;
}

/* ---- The backdrop the curve cuts through ------------------------------------
   The clip-path carves a wedge out of the brand panel, and whatever sits behind the
   panel shows through it, between the curve and the form panel's straight edge at 70%.

   In light that backdrop is .content-wrapper's #fff and the form panel is also #fff,
   so the wedge is invisible and the curve reads as the one and only edge. In dark the
   two were never reconciled: .content-wrapper is surface-2 (#1d2937, chosen so content
   cards lift off the page — correct for every OTHER screen) while .login-right is
   surface (#16202e). Measured on a 1400px render: a 76px lighter wedge ending in a hard
   vertical step at exactly 70%. That step is a second edge the light design does not
   have, and it is the pale band visible down the middle of the night-mode login page.

   Painting the auth container itself with the form panel's own surface removes it: the
   wedge and the panel become one continuous field, so the curve is again the only
   boundary. Done here rather than by re-tinting .content-wrapper, which would change
   every other page, and rather than by re-tinting .login-right, which would move a
   surface the form's inputs and text are already contrast-tuned against. */
html[data-theme="dark"] .auth-switch,
html[data-theme="dark"] .auth-shell.login-page {
    background: var(--qs-d-surface);
}

/* ---- The curved seam between the brand panel and the form panel -------------
   User-reported: the two-panel split that defines this page in day mode is not
   there at night.

   Light mode gets the division for free — the panel's #2150B8 against the form
   panel's #fff is a 7.3:1 step, so the clip-path curve reads as a hard edge. At
   night both sides are dark: the navy panel (#16274a) against the form surface
   (--qs-surface #16202e) measures 1.1:1. There is no pairing in this palette that
   fixes that by value alone — dark-on-dark contrast is compressed, and even the
   lightest surface token against the panel lands under 2:1 — so the seam has to
   be DRAWN.

   The two rules (three selectors) that used to sit here tried to draw it as a
   border on .login-left and could not have worked, for two independent reasons:
     * `[dir="rtl"] html[data-theme="dark"] .login-left` and
       `html[data-theme="dark"] [dir="ltr"] .login-left` each need dir= and
       data-theme= on DIFFERENT elements, but this app sets BOTH on <html>. No
       element ever matched — the same trap auth-switch.css warns about in its
       header comment. The correct form is html[data-theme="dark"][dir="rtl"].
     * They also put the border on the panel's OUTER edge (border-left while the
       seam is on the right in RTL, and vice versa), and a border is painted
       inside the border box, which the clip-path then cuts away.

   What is here instead: a copy of the panel's own clip shape, sitting BEHIND the
   panel and pushed 2px towards the form side, so exactly 2px of it stays
   uncovered along the whole curve. It must be a SIBLING of the clipped element,
   never a child — the panel's clip-path applies to its descendants, which would
   trim the copy back to nothing. Hence a pseudo-element on the container:
   .auth-card for the Login/Register switcher, .auth-shell for the single-mode
   Account pages (ForgetPassword / ResetPassword / SetupTwoFactor / VerifySmsCode
   / VerifyTwoFactor), which is also where the clip-path itself already lives.

   Dark-scoped throughout, so light mode renders byte-identically to before. */
html[data-theme="dark"] .auth-card::before,
html[data-theme="dark"] .auth-card::after,
html[data-theme="dark"] .auth-shell.login-page::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 70%;                 /* same box as the panel it edges; register overrides it */
    z-index: 1;                 /* under the active panel (z-index 2), over the page */
    pointer-events: none;
    /* Composites to ~5.9:1 against the navy. The 0.12 the dead rules asked for would
       have been invisible even if they had ever matched an element. */
    background: rgba(var(--qs-white-rgb), 0.6);
    /* Hidden by default; each mode's own rule below reveals its seam. This has to be
       OPACITY and not display: the seam sits BEHIND the panel, so anything that reveals
       it while that panel is still transparent — the switcher's 0.5s mode crossfade —
       flashes the entire clipped shape instead of a 2px line. */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Switcher — one seam per mode, each anchored like the blue panel of that mode
   (auth-switch.css: LTR login = blue right/curve left, register = blue left/curve
   right; RTL mirrors both). Offsetting with left/right rather than a transform
   keeps `transform` free for the panels' own slide.

   The animation covers the same hazard on first paint: the panel does not finish its
   1.05s qsPanelIn entrance until well after the seam would otherwise be at full
   opacity. `backwards` (NOT `both`) is the load-bearing word — it holds the seam at 0
   through the delay and then hands opacity back to the rules here, so switching modes
   can still fade it out. `both` would pin it visible for the rest of the page's life. */
html[data-theme="dark"] .auth-switch[data-active="login"] .auth-card::before {
    opacity: 1;
    animation: qsAuthFade 0.45s ease 1.05s backwards;
    right: 2px;
    clip-path: url(#authCurveRight);
}
html[data-theme="dark"] .auth-switch[data-active="register"] .auth-card::after {
    opacity: 1;
    animation: qsAuthFade 0.45s ease 1.05s backwards;
    left: 2px;
    width: 58%;                 /* register widens the form side — auth-switch.css */
    clip-path: url(#authCurveLeft);
}
html[data-theme="dark"][dir="rtl"] .auth-switch[data-active="login"] .auth-card::before {
    right: auto;
    left: 2px;
    clip-path: url(#authCurveLeft);
}
html[data-theme="dark"][dir="rtl"] .auth-switch[data-active="register"] .auth-card::after {
    left: auto;
    right: 2px;
    clip-path: url(#authCurveRight);
}

/* Single-mode Account pages — blue panel is always on the inline-end side, and there is
   only ever one mode, so this seam is always the visible one. */
html[data-theme="dark"] .auth-shell.login-page::before {
    opacity: 1;
    animation: qsAuthFade 0.45s ease 1.05s backwards;
    right: 2px;
    clip-path: url(#authCurveRight);
    /* NOT the shared z-index:1. Unlike the switcher, .auth-shell's own .login-left and
       .login-right carry no z-index at all, so a positive value here would paint the
       seam OVER the panel instead of behind it. At 0 it shares their painting group and
       falls below them on DOM order, which is what puts the panel back on top. */
    z-index: 0;
}
html[data-theme="dark"][dir="rtl"] .auth-shell.login-page::before {
    right: auto;
    left: 2px;
    clip-path: url(#authCurveLeft);
}

/* Below 768px the blue panel is hidden altogether (auth-switch.css / auth-shell.css)
   and the form fills the viewport, so there is no seam left to draw. */
@media (max-width: 768px) {
    html[data-theme="dark"] .auth-card::before,
    html[data-theme="dark"] .auth-card::after,
    html[data-theme="dark"] .auth-shell.login-page::before {
        display: none;
    }
}

/* ============================================================================
   UNIFIED ACCENT (2026-07-22, user request) — tone EVERY bright / light blue
   UI accent to the same deep hero navy used by .qs-hero / .login-left, so the
   whole app shares one blue. Targeted overrides (not the --qs-d-primary token,
   which is also used as icon/text colour) so nothing else breaks. Semantic
   green/red/amber buttons & badges keep their own colour.
   ============================================================================ */
html[data-theme="dark"] {
    --qs-accent: var(--qs-primary-subtle);
    --qs-accent-hover: var(--qs-primary-subtle-border);
}
/* buttons: primary + info (cyan "add") + list search. Dashboard refresh used to be here too
   (.btn-refresh-dash) — it's now .dash-toolbar-btn, a plain circular icon button matching the
   reference's neutral (not primary-blue) Refresh/calendar icons, so it no longer belongs in
   this "force everything primary-blue" list; see home-index.css for its own dark-mode rule. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] #btnSearch {
    background: var(--qs-accent) !important;
    border-color: var(--qs-accent-hover) !important;
    color: var(--qs-inverse-fg) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] #btnSearch:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-info:focus {
    background: var(--qs-accent-hover) !important;
    border-color: var(--qs-accent-hover) !important;
    color: var(--qs-inverse-fg) !important;
}
/* active tabs / pills / status filter (All / Active ...) */
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs-highlight .nav-link.active,
/* .qs-ops-tabs a.active (selector matches nothing) and .filter-pill-btn.active (it forced
   EVERY active pill to one accent colour in dark, flattening open/info/success) removed
   from this selector list — 2026-08 audit remediation, L5-crit gap e. */
html[data-theme="dark"] .nav-pills .nav-link.active {
    background: var(--qs-accent) !important;
    border-color: var(--qs-accent-hover) !important;
    color: var(--qs-inverse-fg) !important;
}
/* active pagination page ("1") */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--qs-accent) !important;
    border-color: var(--qs-accent-hover) !important;
    color: var(--qs-inverse-fg) !important;
}
/* list/add-edit page header accent rail + footer accent bar → same navy */
html[data-theme="dark"] .addedit-header-inner {
    border-inline-end-color: var(--qs-accent) !important;
    border-right-color: var(--qs-accent) !important;
}
/* This !important rule loads after (and so beats) qs-theme-dark.css's own
   .app-footer__bar rule, collapsing it back to a flat 2-stop blue instead of the
   reference's 3-stop blue/cyan/indigo bar. Match qs-theme-dark.css's fix instead
   of re-diverging. */
html[data-theme="dark"] .app-footer__bar {
    background: linear-gradient(90deg, var(--qs-primary), var(--qs-accent-cyan), var(--qs-accent-indigo)) !important;
}
/* custom blue buttons/pills that are NOT .btn-primary and were still bright:
   the account Login submit button (.login-btn) and the dashboard header clock
   pill (.dash-updated-time). */
html[data-theme="dark"] .login-btn,
html[data-theme="dark"] .dash-updated-time {
    background: var(--qs-accent) !important;
    border-color: var(--qs-accent-hover) !important;
    color: var(--qs-inverse-fg) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .login-btn:hover {
    background: var(--qs-accent-hover) !important;
}

/* ============================================================================
   REGION SEPARATION (2026-07-22) — navbar, sidebar and content card were all
   ~the same dark shade, so you couldn't tell the menu from the page. Give the
   sidebar its own distinct surface and add clear divider borders between the
   header / sidebar / content, without changing the overall palette.
   ============================================================================ */
/* header: clear bottom divider so it separates from the content below */
html[data-theme="dark"] .navbar.navbar-dark,
html[data-theme="dark"] .navbar.navbar-expand-md.navbar-dark {
    border-bottom: 1px solid rgba(var(--qs-white-rgb), 0.12) !important;
}
/* sidebar: a distinct (slightly lighter) surface than the content card, plus a
   divider on the edge that faces the content so the menu reads as its own panel */
html[data-theme="dark"] .sidebar-dark {
    background: var(--qs-d-surface-2) !important;
    border-inline-start: 1px solid rgba(var(--qs-white-rgb), 0.10) !important;
    border-inline-end: 1px solid rgba(var(--qs-white-rgb), 0.10) !important;
}

/* ============================================================================
   ROOT CAUSE — .qs-card-rows tables that DON'T also carry .table-striped (or
   the #providerTable id). The existing qs-theme-dark.css row override is
   `.qs-ops-module table.qs-card-rows.table-striped tbody tr:nth-of-type(odd) td`
   / `.qs-ops-module #providerTable.dataTable tbody tr…` — both require an
   extra class/id the table may not have. AdminOrders/IndexGrouped's table is
   `#providerTable.table-striped` (matches, looks fine); ProviderOrders' table
   is plain `class="table qs-card-rows" id="ordersTable"` (matches NEITHER
   selector), so its rows/text never got the dark treatment at all and stayed
   pale/washed-out against the dark canvas. Add an unconditional fallback that
   themes every `.qs-card-rows` row regardless of `.table-striped`/id. ---------*/
html[data-theme="dark"] .qs-ops-module table.qs-card-rows tbody tr td,
html[data-theme="dark"] .qs-ops-module table.qs-card-rows tbody tr th {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .qs-ops-module table.qs-card-rows tbody tr:nth-of-type(even) td {
    background-color: var(--qs-d-surface-2) !important;
}
html[data-theme="dark"] .qs-ops-module table.qs-card-rows tbody td small,
html[data-theme="dark"] .qs-ops-module table.qs-card-rows tbody td .text-muted {
    color: var(--qs-d-text-muted) !important;
}

/* ============================================================================
   AdminNotifications / ProviderNotifications list cards (.notif-card). Never
   themed at all: `.notif-card.notif-unread` keeps a near-white background
   (#f6f9ff), and the theme's generic text sweep already turns body text near-
   white — so an unread card renders as near-white text on a near-white card,
   i.e. washed out to invisible (the exact bug reported). `.notif-message` /
   `.notif-time` were also plain mid/light greys with no dark treatment. -------*/
html[data-theme="dark"] .notif-card {
    background: var(--qs-d-surface) !important;
    border-bottom-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .notif-card.notif-unread {
    background: var(--qs-d-surface-2) !important;
}
html[data-theme="dark"] .notif-card .notif-title {
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .notif-card .notif-message {
    color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .notif-card .notif-time,
html[data-theme="dark"] .notif-card .notif-tap-hint {
    color: var(--qs-d-text-faint) !important;
}
html[data-theme="dark"] .notif-card .notif-icon-avatar {
    background: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text) !important;
}

/* ---- Help chat (HelpManagement/Chat) — CSS custom props + literals ---------*/
html[data-theme="dark"] {
    --chat-bg: var(--qs-d-bg);
    --chat-panel-bg: var(--qs-d-surface);
    --chat-border: var(--qs-d-border);
    --chat-bubble-in: var(--qs-d-surface-3);
    --chat-muted: var(--qs-d-text-muted);
}
html[data-theme="dark"] .chat-sidebar,
html[data-theme="dark"] .chat-conv-head,
html[data-theme="dark"] .chat-input-bar { background: var(--qs-d-surface) !important; }
html[data-theme="dark"] .chat-session-name,
html[data-theme="dark"] .chat-conv-name { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .chat-session-sub { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .msg-row.in .msg-bubble {
    background: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .msg-system span {
    background: var(--qs-d-surface-2) !important;
    color: var(--qs-d-text-muted) !important;
}

/* ---- Provider chat (ProviderSupport/Chat) — --pchat-* + literals -----------*/
html[data-theme="dark"] {
    --pchat-bg: var(--qs-d-bg);
    --pchat-border: var(--qs-d-border);
    --pchat-bubble-in: var(--qs-d-surface-3);
    --pchat-muted: var(--qs-d-text-muted);
}
html[data-theme="dark"] .pchat-head-name { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .pmsg-row.in .pmsg-bubble {
    background: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .pmsg-system span {
    background: var(--qs-d-surface-2) !important;
    color: var(--qs-d-text-muted) !important;
}
html[data-theme="dark"] .pchat-retention-note { background: var(--qs-d-surface-2) !important; }


/* ---- ProviderFinancial/Index chart panel ----------------------------------*/
html[data-theme="dark"] #chartRangeGroup .btn {
    background: var(--qs-d-surface-2) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] #earningsChartContainer {
    background: var(--qs-d-surface) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .chart-empty-state { color: var(--qs-d-text-muted) !important; }

/* ---- ServiceProviders / BusinessProfile document + media thumbs -----------*/
html[data-theme="dark"] .doc-thumb,
html[data-theme="dark"] .my-doc-thumb,
html[data-theme="dark"] .media-cover-thumb { border-color: var(--qs-d-border) !important; }
html[data-theme="dark"] .doc-file-icon,
html[data-theme="dark"] .my-doc-file-icon { color: var(--qs-d-link) !important; }

/* ---- Image / gallery main stage (Products/MyServices/AdminServices) -------*/
html[data-theme="dark"] .svc-gallery-main,
html[data-theme="dark"] .product-gallery-main { background: var(--qs-d-surface-2) !important; }

/* ---- Account pages (Login / Register / Forget / Reset) — the WHITE form
   card (.login-right) never went dark. ----------------------------------------*/
html[data-theme="dark"] .login-right { background: var(--qs-d-surface) !important; }
html[data-theme="dark"] .login-right__header h2 { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .login-right__header p,
html[data-theme="dark"] .login-register,
html[data-theme="dark"] .reg-hint { color: var(--qs-d-text-muted) !important; }

/* ---- CustomerWallet page-size button + label (inline via #id) --------------*/
html[data-theme="dark"] #pageSizeBtn {
    background: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .dataTables_length label { color: var(--qs-d-text-muted) !important; }

/* ---- Workers/Details info + perf cards ------------------------------------*/
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .att-filter {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .info-item-value { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .info-item-label,
html[data-theme="dark"] .perf-label { color: var(--qs-d-text-muted) !important; }

/* ---- Users/ManageRoles selected role card ---------------------------------*/
html[data-theme="dark"] .role-card.selected { background: rgba(var(--qs-primary-rgb), 0.12) !important; }

/* ---- Users/_Form password autofill (forced white inset in the view) --------*/
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--qs-d-surface) inset !important;
    -webkit-text-fill-color: var(--qs-d-text) !important;
    caret-color: var(--qs-d-text) !important;
}

/* ---- SubscriptionPlans light bits -----------------------------------------*/
html[data-theme="dark"] .bg-light-secondary { background: var(--qs-d-surface-2) !important; color: var(--qs-d-text) !important; }
html[data-theme="dark"] .color-picker-wrap { background: var(--qs-d-surface) !important; border-color: var(--qs-d-border) !important; }

/* ---- ContactInformation fieldset (legacy) ---------------------------------*/
html[data-theme="dark"] fieldset { background: var(--qs-d-surface) !important; border-color: var(--qs-d-border) !important; }
html[data-theme="dark"] fieldset legend { color: var(--qs-d-text) !important; }

/* ============================================================================
   INLINE style= CATCH-ALL. External CSS cannot beat an element's own inline
   style=, EXCEPT with !important. These attribute-substring rules re-map every
   hardcoded LIGHT background and NEAR-BLACK text literal found in inline styles
   across the audited views (SendBroadcast disabled fields, tfoot strips,
   ProviderFinancial/RefundDetails note boxes, _QuickAddBanner left card,
   ProviderSupport/SubmitTicket tip box, notification modals, order detail
   inline blocks, etc.). Only specific 6-digit light hexes are targeted so
   white-on-accent text (#fff) and coloured accents are never touched.
   ============================================================================ */
html[data-theme="dark"] [style*="#f8f9fa"],
html[data-theme="dark"] [style*="#f8fafc"],
html[data-theme="dark"] [style*="#f5f5f5"],
html[data-theme="dark"] [style*="#f5f7fa"],
html[data-theme="dark"] [style*="#f8f9fc"],
html[data-theme="dark"] [style*="#f1f5f9"],
html[data-theme="dark"] [style*="#fafafa"] {
    background-color: var(--qs-d-surface-2) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] [style*="#e3f2fd"],
html[data-theme="dark"] [style*="#e8f7f9"],
html[data-theme="dark"] [style*="#f0fbfd"],
html[data-theme="dark"] [style*="#fffbeb"],
html[data-theme="dark"] [style*="#fef2f2"],
html[data-theme="dark"] [style*="#f0fff4"],
html[data-theme="dark"] [style*="#fff0f0"] {
    background-color: var(--qs-d-surface-2) !important;
}
html[data-theme="dark"] [style*="color:#212529"],
html[data-theme="dark"] [style*="color: #212529"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color:#1565c0"],
html[data-theme="dark"] [style*="color:#334155"] {
    color: var(--qs-d-text) !important;
}
/* inline light borders */
html[data-theme="dark"] [style*="#e2e8f0"],
html[data-theme="dark"] [style*="#dee2e6"],
html[data-theme="dark"] [style*="#e2e6ea"],
html[data-theme="dark"] [style*="#dde2ec"] {
    border-color: var(--qs-d-border) !important;
}

/* ============================================================================
   DATA-TABLE CELL READABILITY (user-reported 2026-07-22: table row text shows
   as dim gray on the dark rows across the whole project). The theme already
   set cell ink to the bright token but WITHOUT !important, and every list
   table wraps its secondary text (timestamps, sub-labels) in <small>/
   .text-muted which pins itself to the muted token with !important — so the
   readable text in a row was the dim muted grey. Rows are genuinely dark
   (verified: no forced-white striping), so we force cell text — including its
   muted/small children — to the bright ink. Semantic colour cells (badges,
   .text-success/.text-danger status pills) keep their own colour because they
   are more specific / carry their own !important on the element itself. ------*/
html[data-theme="dark"] .content-wrapper table td,
html[data-theme="dark"] .content-wrapper table th,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] table.dataTable tbody td small,
html[data-theme="dark"] table.dataTable tbody td .text-muted,
html[data-theme="dark"] table.dataTable tbody td .text-secondary,
html[data-theme="dark"] .table tbody td small,
html[data-theme="dark"] .table tbody td .text-muted,
html[data-theme="dark"] .table tbody td .text-secondary {
    color: var(--qs-d-text) !important;
}
/* keep a touch of hierarchy: muted sub-text in a cell stays a hair softer than
   the primary text, but now clearly readable (was #b4c2d4, now brighter). */
html[data-theme="dark"] table.dataTable tbody td small.text-muted,
html[data-theme="dark"] .table tbody td small.text-muted {
    color: var(--qs-d-text-muted) !important;
}

/* ROOT CAUSE — plain `.table.table-striped` used bare (no `.design-table`/`.qs-ops-module`
   wrapper), e.g. the Products table on AdminOrders "Full Details". The block above forces cell
   TEXT to a bright color, but never touched the row BACKGROUND — Bootstrap's own striping paints
   odd rows (and its hover state) with a light rgba(0,0,0,.05)-ish tint meant for a white canvas.
   On the dark canvas that reads as a near-white row; combined with the now-bright text color,
   hovering/landing on that striped row washed the whole row out to near-invisible (bright text
   on a near-white background instead of on the dark canvas). */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] .table.table-striped tbody tr:nth-of-type(odd) td,
html[data-theme="dark"] .table.table-striped tbody tr:nth-of-type(odd) th {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
}
html[data-theme="dark"] .table.table-striped tbody tr:hover td,
html[data-theme="dark"] .table.table-striped tbody tr:hover th {
    background-color: var(--qs-d-surface-3) !important;
    color: var(--qs-d-text) !important;
}

/* ============================================================================
   ROOT CAUSE — legacy list-page table panel (.design-table). This is THE
   widespread "white rows" bug: the shared _ListLayout.cshtml (used by most
   list pages — Consumers, Users, Products, Categories, etc.) wraps its table
   in <div class="design-table">, which design/style.css paints a LIGHT
   #edf3f7 with a light hover gradient and #f0f0f0 cell borders. The theme
   never overrode it, so the transparent DataTable rows showed the light panel
   through = light rows with dim text. (Ops-module pages like
   AdminOrders/IndexGrouped use table.qs-card-rows instead and were already
   dark — which is why that one page looked fine.)
   ============================================================================ */
html[data-theme="dark"] .design-table {
    background: var(--qs-d-surface-2) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .design-table .table td,
html[data-theme="dark"] .design-table .table th {
    border-bottom-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .design-table .table tbody tr:hover {
    background: var(--qs-d-surface-3) !important;
}
html[data-theme="dark"] .design-table .table tbody tr td,
html[data-theme="dark"] .design-table .table tbody tr th {
    color: var(--qs-d-text) !important;
}
/* the "Show N" length select (design/style.css pins it white #fff / dark #161617) */
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] .design-table .dataTables_length select {
    background-color: var(--qs-d-surface) !important;
    color: var(--qs-d-text) !important;
    border-color: var(--qs-d-border) !important;
}

/* ============================================================================
   ACCOUNT — SMS one-time-code screen (Account/VerifySmsCode.cshtml) plus the
   now-dormant TOTP setup screen (Account/SetupTwoFactor.cshtml). Both render
   their CSS in a page-local <style> block with light surfaces (#f3f6fb panels,
   #cbd5e1 dashed borders, grey ink). The .tfa-* classes in particular had NO
   dark rules at all, so the QR panel and manual-key chip have always stayed
   light-on-dark — fixed here so the screen is correct the moment the client
   flips TwoFactor:Method back to "Totp".
   ============================================================================ */
html[data-theme="dark"] .sms-dest {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .sms-dest__label      { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .sms-dest__phone,
html[data-theme="dark"] .sms-dest__icon       { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .sms-expiry           { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .sms-expiry--expired  { color: var(--qs-danger-solid) !important; }
html[data-theme="dark"] .sms-resend__prompt   { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .sms-resend__btn      { color: var(--qs-d-text) !important; }
html[data-theme="dark"] .sms-resend__btn:disabled { color: var(--qs-d-text-faint) !important; }

/* ---- dormant TOTP setup screen ---- */
html[data-theme="dark"] .tfa-qr-img {
    /* The QR plate stays WHITE on purpose — dropping it onto a dark surface or
       inverting it destroys the contrast a phone camera needs to scan it. */
    background: var(--qs-inverse-fg) !important;
    border-color: var(--qs-d-border) !important;
}
html[data-theme="dark"] .tfa-manual-key__label { color: var(--qs-d-text-muted) !important; }
html[data-theme="dark"] .tfa-manual-key__value {
    background: var(--qs-d-surface-2) !important;
    border-color: var(--qs-d-border) !important;
    color: var(--qs-d-text) !important;
}