/*
 * theme-dark.css
 *
 * Dark-mode patch layer. Every rule is scoped under html[data-theme="dark"] so this
 * stylesheet is inert in light mode. The Syncfusion dark theme (bootstrap5-dark.css)
 * covers the EJ2 control internals; this file fills the gaps the app's own CSS leaves
 * — primarily:
 *   1. SweetAlert2 popups (we cannot refactor 300+ Swal.fire call sites, so we restyle
 *      every visible class via CSS).
 *   2. Hard-coded #fff / #1b2944 / etc. in legacy stylesheets (style.css, custom.css,
 *      nucleus.css) that don't resolve through the CSS variables.
 *   3. Bootstrap utility classes (.bg-white, .text-dark, .bg-light) that components
 *      apply inline.
 *
 * The pre-paint script in _NucleusLayout enables this stylesheet by removing its
 * `disabled` attribute before first paint, so dark mode renders without a flash.
 */

/* ============================================================================
 * 1. SweetAlert2 (sweetalert2@11) — popups, toasts, inputs, icons.
 * ============================================================================ */
html[data-theme="dark"] .swal2-popup {
    /* Lift one surface step above the body canvas so the popup reads as elevated. */
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .swal2-html-container a {
    color: var(--color-action) !important;
}

/* Inputs inside Swal prompts. */
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select,
html[data-theme="dark"] .swal2-file {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .swal2-input::placeholder,
html[data-theme="dark"] .swal2-textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Action / cancel / deny buttons — keep their colors but darken the focus outline. */
html[data-theme="dark"] .swal2-actions button:focus {
    box-shadow: 0 0 0 3px rgba(138, 160, 255, 0.4) !important;
}

html[data-theme="dark"] .swal2-footer {
    color: var(--text-muted) !important;
    border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .swal2-validation-message {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .swal2-close {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .swal2-close:hover {
    color: var(--text-primary) !important;
}

/* Icon variants — Swal draws filled circles whose ring colour shows against the canvas.
 * On dark canvas the original light fills disappear; flip the ring + glyph fills. */
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--color-success) !important;
}
/* These three elements are MASKS: Swal paints them the popup's background colour
   so they hide the overflow of the animated check-mark sweep. They must match the
   popup background EXACTLY (--surface-2) — using --surface-1 left them a shade
   darker than the popup, so they showed as a dark arc cutting through the icon
   and painted over the green check-mark. */
html[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .swal2-icon.swal2-info,
html[data-theme="dark"] .swal2-icon.swal2-warning,
html[data-theme="dark"] .swal2-icon.swal2-question,
html[data-theme="dark"] .swal2-icon.swal2-error {
    color: inherit;
}

/* Toast popups inherit `.swal2-popup` above, which sets a heavy 0 12px 32px
   rgba(0,0,0,0.6) shadow. On a modal that's fine — the backdrop hides it. On
   a small toast in `top-end` position, that 32px blur paints a wide dark halo
   that reads as a backdrop overlay bleeding across the grid.

   Use a TIGHTER multi-layer stack instead — small offsets, modest blur, low
   alpha — so the toast clearly reads as "floating above the grid" without
   the previous halo. Mirrors SweetAlert2's own multi-layer light-mode shadow
   recipe (which is ~0.075 alpha black, invisible on white but a clean depth
   cue), just with a slightly higher alpha tuned for dark mode contrast. */
html[data-theme="dark"] .swal2-toast,
html[data-theme="dark"] .swal2-popup.swal2-toast {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Backdrop — lighten the default near-black so the dark popup pops off it. */
html[data-theme="dark"] .swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* Toast container — MUST stay fully transparent. `.swal2-container` is a
   fixed full-screen element; if anything paints a background on it while
   a toast is showing, the entire screen behind the toast dims (visible in
   dark mode as a clear overlay across the grid below the toast). SweetAlert2
   v11 adds `.swal2-toast-shown` to the container exclusively for toasts —
   use it as the explicit signal. Also covers any descendant `.swal2-toast`
   in case the container class differs across versions. */
html[data-theme="dark"] .swal2-container.swal2-toast-shown,
html[data-theme="dark"] .swal2-container:has(> .swal2-toast),
html[data-theme="dark"] .swal2-container:has(.swal2-popup.swal2-toast) {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================================================
 * 2. Application chrome — body / cards / panels / borders.
 *    Patches the legacy hard-coded colors in style.css, custom.css, nucleus.css.
 * ============================================================================ */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Bootstrap utility classes used inline across the app. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

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

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

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--border-subtle) !important;
}

/* Cards, dropdowns, modals — keep them on surface-1 so they pop off bg-primary. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .toast {
    background-color: var(--surface-1) !important;
    color: var(--text-primary);
    border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--surface-3);
    color: var(--text-primary);
}
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-subtle);
}

/* Topnav + sidebar. */
html[data-theme="dark"] .dashminheader,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .sidebar {
    background-color: var(--surface-1) !important;
    color: var(--text-primary);
    border-color: var(--border-subtle) !important;
}

/* Sidebar nav-link icon pills — style.css:148 / :196 hard-code `background: #FFFFFF` on the
   <i> element and the link uses `color: var(--dark)`. In dark mode --dark is light text, so
   the icon glyph went white-on-white and disappeared. Restore visibility by darkening the pill
   to a surface tone and forcing the glyph to the light text color. */
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link {
    color: var(--text-primary) !important;
    border-left-color: transparent !important;
}
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link:hover,
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link.active {
    color: var(--text-primary) !important;
    background: var(--surface-2) !important;
    border-left-color: var(--smd-red) !important;
}
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link i,
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link:hover i,
html[data-theme="dark"] .sidebar .navbar .navbar-nav .nav-link.active i {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
/* Same fix for the top-bar `.content .navbar` nav-link icons (style.css:196). */
html[data-theme="dark"] .content .navbar .sidebar-toggler,
html[data-theme="dark"] .content .navbar .navbar-nav .nav-link i {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .content .navbar .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

/* Notification + chat icon buttons in the top nav use `.nav-icon-link` /
   `.nav-fa-wrap` — make sure the bell / comment glyphs stay light. */
html[data-theme="dark"] .nav-icon-link,
html[data-theme="dark"] .nav-icon-link i,
html[data-theme="dark"] .nav-fa-wrap i {
    color: var(--text-primary) !important;
}

/* Footer. The wrapper holds `.bg-light` which we already overrode to surface-1 — but the
   inner text (`<a>`, `<span>`, raw `&copy; ...`) needs an explicit light color or it stays
   dark from Bootstrap defaults / browser link colour. */
html[data-theme="dark"] .dashminfooter {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dashminfooter,
html[data-theme="dark"] .dashminfooter a,
html[data-theme="dark"] .dashminfooter span {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dashminfooter a:hover {
    color: var(--color-action) !important;
}

/* User-avatar pill in the top nav. */
html[data-theme="dark"] .user-avatar {
    background-color: var(--surface-3);
    color: var(--text-primary);
}

/* Pills used in the top nav (time logged, local time). */
html[data-theme="dark"] .rounded-pill.bg-light {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* style.css text-primary override is !important so we have to re-!important. */
html[data-theme="dark"] .text-primary {
    color: var(--text-primary) !important;
}

/* Lock overlay (style.css uses hard-coded #1b2944). */
html[data-theme="dark"] .lock-icon,
html[data-theme="dark"] .lock-welcome {
    color: var(--text-primary) !important;
    border-color: var(--border-strong);
}

/* ============================================================================
 * 3. Forms — inputs / selects / textareas not styled by Syncfusion.
 * ============================================================================ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
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="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"] {
    /* --surface-2 (#343a40) is the shared input fill: keeps plain Bootstrap inputs
     * level with the Syncfusion EJ2 controls (see .e-input-group override below). */
    background-color: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--focus-color);
    box-shadow: 0 0 0 0.2rem rgba(138, 160, 255, 0.25);
}

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

/* Form-render loading scrim — the light default (rgba(255,255,255,0.75)) reads as a
 * milky wash over the dark canvas. Swap to a dark translucent scrim and lift the
 * spinner label so "Loading form…" stays legible. */
html[data-theme="dark"] .nfm-fr-spinner-overlay {
    --fr-spinner-scrim: rgba(2, 6, 23, 0.6);
}

html[data-theme="dark"] .nfm-fr-spinner-overlay .e-spin-label {
    color: var(--text-primary);
}

/* Syncfusion EJ2 input controls (DropDownList, ComboBox, DatePicker, TextBox,
 * NumericTextBox, MultiSelect, AutoComplete …). The bootstrap5-dark CDN theme fills
 * .e-input-group with the canvas colour (#212529), which sat a full step darker than
 * the plain Bootstrap inputs. Pin every EJ2 input group to the same --surface-2 fill
 * so dropdowns and textboxes read as one. Inner .e-input keeps Syncfusion's
 * `background: none`, so it shows through to this wrapper. */
html[data-theme="dark"] .e-input-group,
html[data-theme="dark"] .e-input-group.e-control-wrapper,
html[data-theme="dark"] .e-input-group:not(.e-disabled) .e-input-group-icon {
    background-color: var(--surface-2) !important;
}

/* SKU "generate" button puzzle icon — hard-coded black inline, invisible on the
 * dark button. Lift to the theme text colour (the inline !important was dropped in
 * markup so this rule can win). */
html[data-theme="dark"] #btnGenerateSku i {
    color: var(--text-primary) !important;
}

/* Syncfusion MultiSelect (Box mode) internal search input — the generic
 * input[type="text"] fill above paints it as a grey box that shows whenever no
 * chips cover it (e.g. the empty "Regions" picker). Keep it transparent so it
 * inherits the multiselect wrapper instead of rendering its own box. */
html[data-theme="dark"] .e-multiselect input.e-dropdownbase,
html[data-theme="dark"] .e-multi-select-wrapper input[type="text"] {
    background-color: transparent !important;
    border: 0 !important;
}

/* Input-group addon labels (e.g. "Compliance Requirement Options") default to a
 * light Bootstrap background — override so the addon matches dark surfaces. */
html[data-theme="dark"] .input-group-text {
    background-color: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Warning-labels dual-list (Create New Product wizard → "Information (Cont.)" step).
 * The page's own warning-list styling is hard-coded light AND scoped to
 * #ProductViewRoot, but the grid edit dialog mounts outside that root — so these
 * listboxes fall back to the bare Syncfusion theme. Restyle them globally for dark
 * mode so both the Available and Selected panes read as proper bordered lists.
 * !important mirrors the light rules these stand in for. */
html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-listbox,
html[data-theme="dark"] .warning-list .e-listbox {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* List rows — boxed, with the same drag affordance the light styling implies. */
html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-list-item,
html[data-theme="dark"] .warning-list .e-list-item {
    display: flex !important;
    align-items: center !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin: 4px 6px !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    transition: all 0.15s ease-in-out !important;
}

html[data-theme="dark"] .warning-list .e-list-item:hover {
    background: var(--surface-3) !important;
}

/* Available pane — cool/action-tinted to distinguish from the Selected pane. */
html[data-theme="dark"] #AvailableWarningLabels .e-list-item {
    border-color: rgba(77, 171, 247, 0.35) !important;
}

html[data-theme="dark"] #AvailableWarningLabels .e-list-item:hover,
html[data-theme="dark"] #AvailableWarningLabels .e-list-item.e-selected {
    background: rgba(77, 171, 247, 0.18) !important;
    border-color: var(--color-action) !important;
}

/* Selected pane — success-tinted (these are the chosen labels). */
html[data-theme="dark"] #ProductWarningLabels .e-list-item {
    border-color: rgba(90, 208, 111, 0.35) !important;
}

html[data-theme="dark"] #ProductWarningLabels .e-list-item:hover,
html[data-theme="dark"] #ProductWarningLabels .e-list-item.e-selected {
    background: rgba(90, 208, 111, 0.18) !important;
    border-color: var(--color-success) !important;
}

/* Drag-handle glyphs the light styling injects via ::before / ::after. */
html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-list-item::before {
    color: var(--text-muted);
}
html[data-theme="dark"] .warning-list .e-list-item::after {
    color: var(--text-muted);
}

/* Transfer buttons (›, ‹, », «) between the two panes. */
html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-toolbar,
html[data-theme="dark"] .warning-list .e-listbox-toolbar {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-toolbar .e-btn,
html[data-theme="dark"] .warning-list .e-listbox-toolbar .e-btn {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    transition: all 0.15s ease;
}

html[data-theme="dark"] .warning-labels-container.tt-dual-list .e-toolbar .e-btn:hover,
html[data-theme="dark"] .warning-list .e-listbox-toolbar .e-btn:hover {
    background-color: var(--surface-3) !important;
    border-color: var(--color-action) !important;
}

/* Filter/search row at the top of each listbox. */
html[data-theme="dark"] .warning-list .e-filter-parent {
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* ProductDetails read-only / disabled view. In view mode the label renders inside a
 * <span class="warning-label-readonly"> hard-coded to black, and the disabled
 * listbox forces black-on-light — both unreadable on the dark row. Lift the text and
 * restate the dark row fill (id-scoped to outrank ProductDetails' #ProductWarningLabels
 * disabled rules). */
html[data-theme="dark"] .warning-label-readonly,
html[data-theme="dark"] #ProductWarningLabels .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] #ProductWarningLabels .e-listbox.e-disabled .e-list-item span,
html[data-theme="dark"] #AvailableWarningLabels .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] #AvailableWarningLabels .e-listbox.e-disabled .e-list-item span,
html[data-theme="dark"] .warning-list .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] .warning-list .e-listbox.e-disabled .e-list-item span {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #ProductWarningLabels .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] #AvailableWarningLabels .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] .warning-list .e-listbox.e-disabled .e-list-item {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
}

/* Syncfusion fades the whole disabled listbox via opacity — which washes out the
 * text no matter what colour we set. Restore full opacity so the read-only labels
 * read at full contrast. */
html[data-theme="dark"] .warning-list .e-listbox.e-disabled,
html[data-theme="dark"] .warning-labels-container .e-listbox.e-disabled,
html[data-theme="dark"] .warning-list .e-listbox.e-disabled .e-list-item,
html[data-theme="dark"] .warning-list .e-listbox.e-disabled .e-list-item span,
html[data-theme="dark"] .warning-label-readonly {
    opacity: 1 !important;
}

/* ============================================================================
 * 4. Tables (non-Syncfusion).
 * ============================================================================ */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    /* Bootstrap 5.3 paints table cells via `box-shadow: inset 0 0 0 9999px
       var(--bs-table-accent-bg)` (see `.table > :not(caption) > * > *`).
       That inset shadow uses the variables below — Bootstrap auto-flips
       them only on `[data-bs-theme="dark"]`, NOT on this project's
       `[data-theme="dark"]`, so without these overrides every cell stays
       painted with the LIGHT-mode `--bs-table-bg: #fff` even when we set
       `background-color: transparent`. That's why the MORE INFO date /
       value / icon cells stayed white. Flip the vars here so the inset
       paint is transparent on dark. */
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-subtle);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: var(--surface-3);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-3);
}
html[data-theme="dark"] .table thead {
    background-color: var(--surface-2);
}
/* nucleus.css:17309 paints `.table tbody tr { background-color: rgba(255,
   255, 255, 0.9) }` — a 90% white fill ON THE ROW, beneath every cell.
   Setting cell `background-color: transparent` is correct, but exposes the
   white row underneath, which is what was producing the light-grey slabs
   in the MORE INFO table on the ticket / product side panes. Flip the row
   to transparent so the cells show through to the dark .card-body. */
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .table thead tr {
    background-color: transparent !important;
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text-primary);
    border-color: var(--border-subtle);
    /* Defeat Bootstrap's inset paint — without `box-shadow: none` the cell
       is still filled by the inset that references `--bs-table-accent-bg`,
       even after we set background-color and re-point the variable. */
    box-shadow: none !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--surface-2) !important;
}
html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--surface-3) !important;
}

/* ============================================================================
 * 5. Syncfusion sundries that bootstrap5-dark.css misses on this version.
 *    Most controls inherit cleanly; these are the known gaps on 29.1.38.
 * ============================================================================ */
/* Splitter bar against dark canvas. */
html[data-theme="dark"] .e-split-bar {
    background-color: var(--surface-2) !important;
}
/* Dashboard panels. */
html[data-theme="dark"] .e-dashboardlayout .e-panel {
    background-color: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
}
/* TreeGrid expand chevron column on the recipient grids. */
html[data-theme="dark"] .e-treegrid .e-icons {
    color: var(--text-primary);
}
/* Toast popup background (ej2-notifications). */
html[data-theme="dark"] .e-toast {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* ============================================================================
 * 6. Misc third-party (Hangfire, code-prettify) — keep readable on dark.
 * ============================================================================ */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background-color: var(--surface-2);
    color: var(--text-primary);
}

/* ============================================================================
 * 7. Form Management domain (form-management.css + form-render.css).
 *    Both stylesheets hard-code a full light palette (#fff/#f4f6fb/#111827/...)
 *    via .nfm-* classes — none resolve through CSS variables. These overrides
 *    re-paint every visible surface and text token using the dark palette.
 * ============================================================================ */

/* Page canvas + splitter (was #f4f6fb / #1f2937). */
html[data-theme="dark"] #form-splitter,
html[data-theme="dark"] .nfm-page {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Header card + stat cards + grid card + side-pane section cards — all share
   a #fff bg in light. Lift them one surface step so they pop off the canvas. */
html[data-theme="dark"] .nfm-header-card,
html[data-theme="dark"] .nfm-grid-card,
html[data-theme="dark"] .nfm-stat-card,
html[data-theme="dark"] .nfm-side-section,
html[data-theme="dark"] .nfm-side-actions,
html[data-theme="dark"] .sidepane-container,
html[data-theme="dark"] .sidepane-title {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Side-pane header action icons — lift to text-primary on dark so the bell,
   expand and close glyphs read against the surface. text-success on the
   subscribed bell still wins via Bootstrap's !important. */
html[data-theme="dark"] .sidepane-title .btn > i,
html[data-theme="dark"] .nucleus-sidepane-header .btn > i {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .sidepane-title .btn:hover > i,
html[data-theme="dark"] .nucleus-sidepane-header .btn:hover > i {
    color: var(--color-action) !important;
}
html[data-theme="dark"] .sidepane-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Header title + lede paragraph (were #111827 / #667085). */
html[data-theme="dark"] .nfm-title-block h4 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-title-block p,
html[data-theme="dark"] .nfm-section-title,
html[data-theme="dark"] .nfm-stat-label,
html[data-theme="dark"] .nfm-muted,
html[data-theme="dark"] .nfm-switch-line small {
    color: var(--text-muted) !important;
}

/* "Kicker" pill in the title block (was light indigo #eef4ff / #3157ff). */
html[data-theme="dark"] .nfm-page-kicker {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
}

/* Back-action button (light pill with blue hover). */
html[data-theme="dark"] .nfm-back-action {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-back-action:hover {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
    border-color: var(--color-action) !important;
}

/* Grid toolbar (white bar between header and grid). */
html[data-theme="dark"] .nfm-grid-toolbar {
    background: var(--surface-1) !important;
    border-bottom-color: var(--border-subtle) !important;
}

/* Search input (was #f8fafc with dark text). */
html[data-theme="dark"] .nfm-search-wrap i {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-search-wrap input {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-search-wrap input:focus {
    background: var(--surface-2) !important;
    border-color: var(--focus-color) !important;
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2) !important;
}
html[data-theme="dark"] .nfm-search-wrap input::placeholder {
    color: var(--text-muted) !important;
}

/* formManagementGrid — bootstrap5-dark.css already styles EJ2 grids correctly,
   but form-management.css overrides specific cells with light colours; null them. */
html[data-theme="dark"] #formManagementGrid .e-gridheader,
html[data-theme="dark"] #formManagementGrid .e-headercontent {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] #formManagementGrid .e-headercell {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #formManagementGrid .e-rowcell {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #formManagementGrid .e-row:hover {
    background: var(--surface-3) !important;
}
html[data-theme="dark"] #formManagementGrid .e-selectionbackground {
    background: var(--surface-3) !important;
}
html[data-theme="dark"] #formManagementGrid .e-gridpager {
    border-top-color: var(--border-subtle) !important;
}

/* Form-name strong / type-badge / score-badge / count-badge. */
html[data-theme="dark"] .nfm-form-name strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-score-badge {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
}
html[data-theme="dark"] .nfm-count-badge,
html[data-theme="dark"] .nfm-pill-draft {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* Row-action buttons (white pills with blue/red/green hovers). */
html[data-theme="dark"] .nfm-action-btn {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-action-btn:hover {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
    border-color: var(--color-action) !important;
}
html[data-theme="dark"] .nfm-action-btn.danger {
    color: var(--color-danger) !important;
}
html[data-theme="dark"] .nfm-action-btn.danger:hover {
    background: rgba(255, 107, 107, 0.1) !important;
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}
html[data-theme="dark"] .nfm-action-btn.success {
    color: var(--color-success) !important;
}
html[data-theme="dark"] .nfm-action-btn.success:hover {
    background: rgba(90, 208, 111, 0.1) !important;
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

/* Side-form labels + switch-line tiles. */
html[data-theme="dark"] .nfm-side-form label {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-switch-line {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
}

/* Stat-card values keep their semantic colour but use the lifted action/success/danger tokens. */
html[data-theme="dark"] .nfm-stat-card strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-stat-card.total strong {
    color: var(--color-action) !important;
}
html[data-theme="dark"] .nfm-stat-card.active strong {
    color: var(--color-success) !important;
}
html[data-theme="dark"] .nfm-stat-card.deleted strong {
    color: var(--color-danger) !important;
}

/* Restore the 4px coloured LEFT BORDER on each stat-card variant.
   form-management.css:587–597 ships `border-left: 4px solid <colour>` on
   .nfm-stat-card.total / .active / .deleted (blue/green/red accent stripes)
   — the dark `.nfm-stat-card { border-color: var(--border-subtle) }` rule
   above is a shorthand that flattens ALL four sides, wiping the stripes.
   Restate them here with the SAME colours used in light mode so the cards
   keep their semantic accents in dark too.

   `border-left-color` alone wouldn't work because the shorthand also reset
   the left side's width back to 1px — restate the full `border-left`. */
html[data-theme="dark"] .nfm-stat-card.total {
    border-left: 4px solid #3157ff !important;
}
html[data-theme="dark"] .nfm-stat-card.active {
    border-left: 4px solid #12b76a !important;
}
html[data-theme="dark"] .nfm-stat-card.deleted {
    border-left: 4px solid #f04438 !important;
}

/* --- Form Render (.nfm-fr-*) — the public/internal form-filling shell --- */
html[data-theme="dark"] .nfm-fr-page {
    /* Was a light vertical gradient #f8fafc → #f1f5f9. Replace with a flat dark canvas. */
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-section,
html[data-theme="dark"] .nfm-fr-header {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-card-title,
html[data-theme="dark"] .nfm-fr-q-label,
html[data-theme="dark"] .nfm-fr-switch-label,
html[data-theme="dark"] .nfm-fr-upload-label {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-card-description,
html[data-theme="dark"] .nfm-fr-q-desc,
html[data-theme="dark"] .nfm-fr-save-info,
html[data-theme="dark"] .nfm-fr-save-status,
html[data-theme="dark"] .nfm-fr-empty,
html[data-theme="dark"] .nfm-fr-prompt,
html[data-theme="dark"] .nfm-fr-loading {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-fr-back-link,
html[data-theme="dark"] .nfm-fr-back-link-row a {
    color: var(--color-action) !important;
}
html[data-theme="dark"] .nfm-fr-back-link:hover {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-save-bar {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-fr-section-break,
html[data-theme="dark"] .nfm-fr-primary-object-row {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-spinner-overlay {
    /* The light overlay used rgba(255,255,255,0.75) — flip to dark dim. */
    background: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .nfm-fr-question {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-fr-upload-current {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-fr-unsupported {
    background: rgba(255, 193, 7, 0.12) !important;
    color: #ffd54f !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
}

/* Form-render TITLES — the page title (h4 inside .nfm-fr-title-block) and per-section
   title (h5 inside .nfm-fr-section-header) are hard-coded to #0f172a (slate-900). */
html[data-theme="dark"] .nfm-fr-title-block h4,
html[data-theme="dark"] .nfm-fr-section-header h5 {
    color: var(--text-primary) !important;
}
/* Section header divider line — was #e5e7eb (light grey). */
html[data-theme="dark"] .nfm-fr-section-header {
    border-bottom-color: var(--border-subtle) !important;
}
/* Section number badge — keep the navy/black gradient (it already reads on dark)
   but soften the white shadow on the ::after red dot so it doesn't shimmer. */
html[data-theme="dark"] .nfm-fr-section-index::after {
    box-shadow: 0 0 0 2px var(--surface-1) !important;
}

/* ============================================================================
 * 8. Ticket Details / Product Details — view-mode detail panels.
 *    nucleus.css defines a "primary-h1" family for the title + faded labels
 *    (Ticket Type / Department / Description / Priority / ...). They use
 *    var(--primary-bg-color) (a navy from nucleus.css) and #7987a1 which both
 *    sit dark-on-dark in dark mode. Re-tint to the dark palette here.
 * ============================================================================ */

/* Big bold title — e.g. ticket type "Image Enrichments". */
html[data-theme="dark"] .nucleus-primary-h1,
html[data-theme="dark"] .nucleus-primary-title,
html[data-theme="dark"] .nucleus-primary-titlse {
    color: var(--text-primary) !important;
}

/* Faded label above/beside the value (Ticket Type, Department, Ticket Title, etc.) —
   bump to text-muted so it reads as secondary but stays legible. */
html[data-theme="dark"] .nucleus-primary-h1-label {
    color: var(--text-muted) !important;
}

/* "More info" card-title in ticket-details + similar bootstrap-y card titles. */
html[data-theme="dark"] .card-title {
    color: var(--text-primary) !important;
}

/* Owner / Assignee / Responsible cards — h6 is the person's name, span is the role label. */
html[data-theme="dark"] .main-profile-work-list .media-body h6 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .main-profile-work-list .media-body span {
    color: var(--text-muted) !important;
}

/* The MORE INFO data tables in ticket-details + product-details use .bg-gray-100 on
   the label cell — that's a light grey in nucleus.css. Lift it to surface-2 so the
   row's value cell reads against a slightly darker surrounding card. */
html[data-theme="dark"] .bg-gray-100 {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
/* The value-side .text-muted cells in those tables — already styled by section 2's
   .text-muted override, but call out explicitly to defeat any later specificity.
   `.main-table-reference` itself ships with `background-color: #fff` in nucleus.css
   (line 19181) — that white bleeds through every transparent value cell, producing
   the bright slabs that show up around the MORE INFO date columns on the ticket
   detail panel. Flatten the table + every cell + the `.shadow-sm` accent onto the
   dark surfaces so the panel reads as one continuous card. */
/* MORE INFO table (ticket / product detail pages).
   nucleus.css:19181 hard-codes `.main-table-reference { background-color:
   #fff }` AND Bootstrap 5.3's `.table` uses an inset box-shadow chain to
   paint cells via `--bs-table-accent-bg` (light by default). Both surfaces
   need to be transparent on dark so the cells show through to the
   `.card-body` underneath. Use a high-specificity id-less selector chain
   (`.card .card-body .main-table-reference`) so this beats both the
   nucleus.css `.main-table-reference` rule AND Bootstrap's `.table > :not()`
   rule even before !important comes into play. */
html[data-theme="dark"] .card .card-body .main-table-reference,
html[data-theme="dark"] .card-body .main-table-reference,
html[data-theme="dark"] .main-table-reference {
    background-color: transparent !important;
    background: transparent !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}
/* Every cell — th OR td, thead OR tbody, with OR without an extra class —
   gets transparent bg + null'd inset shadow. The shadow override is what
   actually kills Bootstrap's painted fill (see section 4 comment). */
html[data-theme="dark"] .card .card-body .main-table-reference > thead > tr > th,
html[data-theme="dark"] .card .card-body .main-table-reference > thead > tr > td,
html[data-theme="dark"] .card .card-body .main-table-reference > tbody > tr > th,
html[data-theme="dark"] .card .card-body .main-table-reference > tbody > tr > td,
html[data-theme="dark"] .card-body .main-table-reference > thead > tr > th,
html[data-theme="dark"] .card-body .main-table-reference > thead > tr > td,
html[data-theme="dark"] .card-body .main-table-reference > tbody > tr > th,
html[data-theme="dark"] .card-body .main-table-reference > tbody > tr > td,
html[data-theme="dark"] .main-table-reference > thead > tr > th,
html[data-theme="dark"] .main-table-reference > thead > tr > td,
html[data-theme="dark"] .main-table-reference > tbody > tr > th,
html[data-theme="dark"] .main-table-reference > tbody > tr > td {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] .main-table-reference td.text-muted {
    color: var(--text-muted) !important;
}
/* Restore the .bg-gray-100 label cell lift — must use the SAME parent-chain
   specificity as the rule above so it can override the transparent fill.
   The light-mode design relies on these label cells being a different tone
   from the value cells; surface-2 keeps that contrast on dark. */
html[data-theme="dark"] .card .card-body .main-table-reference > thead > tr > td.bg-gray-100,
html[data-theme="dark"] .card .card-body .main-table-reference > thead > tr > th.bg-gray-100,
html[data-theme="dark"] .card .card-body .main-table-reference > tbody > tr > td.bg-gray-100,
html[data-theme="dark"] .card .card-body .main-table-reference > tbody > tr > th.bg-gray-100,
html[data-theme="dark"] .main-table-reference > thead > tr > td.bg-gray-100,
html[data-theme="dark"] .main-table-reference > thead > tr > th.bg-gray-100,
html[data-theme="dark"] .main-table-reference > tbody > tr > td.bg-gray-100,
html[data-theme="dark"] .main-table-reference > tbody > tr > th.bg-gray-100 {
    background-color: var(--surface-2) !important;
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
/* Icon column (the small <td> with the clock/calendar glyph) uses `.text-muted`
   so it goes muted automatically, and falls through the transparent rule
   above — exactly what we want. */

/* Sticky bottom action bar (Edit / Update / Cancel buttons) — custom.css hard-codes
   `background: white`. The whole bar looked like a white slab beneath dark content. */
html[data-theme="dark"] .nucleus-sticky-bottom {
    background: var(--surface-1) !important;
    background-color: var(--surface-1) !important;
    border-top-color: var(--border-subtle) !important;
}

/* Side-pane tab content host (.nucleus-tab-content) and the inner .card / .card-body
   that wraps the ticket/product details — make sure they don't carry the light bg. */
html[data-theme="dark"] .nucleus-tab-content,
html[data-theme="dark"] .nucleus-container {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .card-body {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Side-pane header (used by /Pages/Shared/.../*SidePane.cshtml). The .nucleus-sidepane-header
   class is defined in custom.css with background #ffff. */
html[data-theme="dark"] .nucleus-sidepane-header {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-subtle) !important;
}

/* Syncfusion EJ2 floating labels — the side-pane uses createTextAreaInput() with
   floatLabelType: 'Always' which renders a small caption above each textarea
   ("What's in the box", "P.I.R.E", "Modules"). bootstrap5-dark.css darkens them
   correctly; force the colour here in case any other stylesheet wins specificity. */
html[data-theme="dark"] .e-float-text,
html[data-theme="dark"] .e-input-group .e-float-text,
html[data-theme="dark"] .e-float-input label,
html[data-theme="dark"] .e-float-input.e-control-wrapper label {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .e-float-input.e-input-focus .e-float-text,
html[data-theme="dark"] .e-input-group.e-input-focus .e-float-text,
html[data-theme="dark"] .e-float-input.e-input-focus label {
    color: var(--color-action) !important;
}

/* EJ2 grid edges — the splitter / wrapping cards leave a thin white edge around the
   grid in dark mode because the EJ2 grid container has a default white background
   that pokes through where the dark canvas meets the grid bezel. Force the wrapper
   and content surfaces onto the dark palette. */
html[data-theme="dark"] .e-grid,
html[data-theme="dark"] .e-grid .e-gridcontent,
html[data-theme="dark"] .e-grid .e-content {
    background-color: var(--bg-primary) !important;
}
html[data-theme="dark"] .e-grid .e-gridheader,
html[data-theme="dark"] .e-grid .e-headercontent {
    background-color: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
}
/* The thin horizontal stripe immediately above the column headers (where the grid's
   own top border meets the toolbar) — clamp to surface-1 so it blends. */
html[data-theme="dark"] .e-grid .e-toolbar,
html[data-theme="dark"] .e-grid .e-gridpager,
html[data-theme="dark"] .e-grid .e-summarycontent {
    background-color: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Grid / TreeGrid search-and-filter spinner — keep the rows visible in dark mode.
 *
 * Bug: searching or filtering in dark mode painted a big opaque box over the whole
 * grid, hiding every row, while light mode just dimmed slightly and kept rows visible.
 *
 * Cause: the SAME Syncfusion built-in spinner is used in both themes — its backdrop is
 * a translucent BLACK wash (bootstrap5(-dark).css: `.e-spinner-pane.e-spin-center.e-spin-show`
 * = rgba(0,0,0,0.3); `.e-spin-overlay` = rgba(0,0,0,0.4)). Over the white grid surface in
 * light mode that reads as a faint grey haze. But section 8 above forces the dark grid
 * surface onto var(--bg-primary) (~#212529), so the same black wash stacks on top of an
 * already-dark canvas and goes effectively opaque — the "overlay that hides the grid".
 *
 * Fix: in dark mode only, drop the spinner pane's black backdrop to transparent so the
 * existing rows/header stay visible behind the built-in centred spinner — i.e. the exact
 * light-mode behaviour. This is purely the backdrop colour; the Syncfusion spinner glyph,
 * its show/hide lifecycle and every other grid behaviour are untouched. Covers TreeGrid
 * too (`.e-treegrid` is not matched by the lib's `.e-grid .e-spin-show{display:none}`
 * suppression, so it is actually the worst-affected control). */
html[data-theme="dark"] .e-grid .e-spinner-pane,
html[data-theme="dark"] .e-grid .e-spinner-pane.e-spin-overlay,
html[data-theme="dark"] .e-grid .e-spinner-pane.e-spin-center.e-spin-show,
html[data-theme="dark"] .e-treegrid .e-spinner-pane,
html[data-theme="dark"] .e-treegrid .e-spinner-pane.e-spin-overlay,
html[data-theme="dark"] .e-treegrid .e-spinner-pane.e-spin-center.e-spin-show {
    background-color: transparent !important;
}

/* ============================================================================
 * 9. Top-level layout shells that hard-code WHITE backgrounds.
 *    These are what's left peeking through as "white edges" between widgets
 *    when their child surfaces don't cover every pixel.
 *      - custom.css:118  .content { background: #FFFFFF }
 *      - style.css:92    .content { background: #FFFFFF }
 *      - _NucleusLayout.cshtml's outer .container-fluid.bg-white (already
 *        handled by section 2's .bg-white override, but called out below too).
 * ============================================================================ */
html[data-theme="dark"] .content,
html[data-theme="dark"] .content.open,
html[data-theme="dark"] .content.sidebar-collapsed {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] .container-fluid.bg-white,
html[data-theme="dark"] .dashminbody {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Card headers (e.g. "MORE INFO" in ticket-details). The .card-header element in
   nucleus.css ships with its own bg + border colors; flatten them onto our dark
   surface so the header text + title becomes readable. */
html[data-theme="dark"] .card-header {
    background: var(--surface-1) !important;
    border-bottom-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header .card-title {
    color: var(--text-primary) !important;
}

/* Misc small "stamp" surfaces with hard-coded background:#fff (custom.css lines
   346 / 506 / 620 / 878). Use surface-2 so anything floating reads as elevated. */
html[data-theme="dark"] .e-treegrid .e-row,
html[data-theme="dark"] .nucleus-sidepane-header {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* Floating Activity-Time timer button — the round dock at the bottom-right of
   every authenticated page. User wants it solid black in dark mode so it reads
   as a clear "system" affordance against the dark canvas. */
html[data-theme="dark"] #floatingOtherTimerButton,
html[data-theme="dark"] .floatingOtherTimerButton {
    background-color: #000000 !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] #floatingOtherTimerButton i,
html[data-theme="dark"] #floatingOtherTimerIcon,
html[data-theme="dark"] #floatingOtherTimerLabel {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #floatingOtherTimerButton:hover {
    background-color: #000000 !important;
    border-color: var(--smd-red) !important;
    box-shadow: 0 6px 18px rgba(195, 32, 51, 0.35) !important;
}

/* ============================================================================
 * 10. Broad sweep of common "card-like" surfaces.
 *     nucleus.css has 184 hard-coded white backgrounds across 72k lines —
 *     individually overriding each one would explode this file. These rules
 *     catch the standard Bootstrap + project patterns that are used as raised
 *     surfaces (cards, panels, popovers, list groups, modals, off-canvas) so
 *     any page that uses them gets a dark surface without per-page patches.
 *     If a specific page still shows white, add a more specific override below.
 * ============================================================================ */

/* Bootstrap "raised surface" components. */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .popover-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-body,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--surface-3) !important;
}
html[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--color-action) !important;
    border-color: var(--color-action) !important;
    color: var(--text-inverse) !important;
}

/* Project-specific "card-like" prefixes used across many pages. */
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="-panel"],
html[data-theme="dark"] [class*="-pane"]:not(.e-pane):not(.sidepane-body) {
    /* Only affect background; leave layout untouched. */
    background-color: var(--surface-1);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Anything that explicitly set `background:white` or `background-color:#fff` via
   inline style is unavoidable — but elements that use the CSS class .bg-default,
   .bg-white-2 and friends from various legacy CSS frameworks are normalised here. */
html[data-theme="dark"] .bg-default,
html[data-theme="dark"] .bg-white-1,
html[data-theme="dark"] .bg-white-2,
html[data-theme="dark"] .bg-white-3,
html[data-theme="dark"] .bg-white-4,
html[data-theme="dark"] .bg-white-5,
html[data-theme="dark"] .bg-white-6,
html[data-theme="dark"] .bg-white-7,
html[data-theme="dark"] .bg-white-8,
html[data-theme="dark"] .bg-white-9 {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* "card-* (--*)" variants — fields like .card-options use neutral text. */
html[data-theme="dark"] .card-options,
html[data-theme="dark"] .card-footer {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Default `<hr>` is grey in dark Bootstrap, but legacy code uses a hard-coded white
   border too. Force the colour. */
html[data-theme="dark"] hr {
    border-color: var(--border-subtle) !important;
    opacity: 0.5;
}

/* ============================================================================
 * 11. Generic heading colour — h1..h6 used as section labels in many places
 *     (timeline "Created At/Updated At", media-body names, dashboard widgets,
 *     dialog titles). Default browser colour is inherited from body which is
 *     already text-primary, but some nucleus.css legacy rules tint headings;
 *     stamp them explicitly so audit-panel labels stay readable.
 * ============================================================================ */
/* custom.css:298-301 and style.css:267-270 apply `color: var(--primary) !important`
   (= #1b2944 navy) to every h1..h6 — so without !important here those headings
   stay invisible-navy on the dark canvas. The QC booking dialog ("Selected
   Purchase Order", "Linked Purchase Orders", step titles) is the obvious
   victim, but the rule applies everywhere. */
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(--text-primary) !important;
}

/* Audit panel ("Created At" / "Updated At" rows) — the labels are <h6> next to
   the timeline pill, and Bootstrap's default heading colour gets overridden by
   some legacy nucleus.css rule to a faded blue. Explicit override here. */
html[data-theme="dark"] .activity .item-activity h6,
html[data-theme="dark"] .activity .item-activity strong,
html[data-theme="dark"] .item-activity h6 {
    color: var(--text-primary) !important;
}

/* ============================================================================
 * 12. Navbar page title — the right side of __navbar.cshtml renders
 *     <span>@ViewData["Title"]</span> with no class. The wrapping <nav> has
 *     Bootstrap's `.navbar-light` class which sets `--bs-navbar-color` to
 *     rgba(0,0,0,.55) — that's the dim near-black we see in dark mode.
 *     Override the navbar-light CSS variables AND the title span directly.
 * ============================================================================ */
html[data-theme="dark"] .dashminheader.navbar-light,
html[data-theme="dark"] .navbar.navbar-light {
    --bs-navbar-color: var(--text-primary);
    --bs-navbar-hover-color: var(--color-action);
    --bs-navbar-disabled-color: var(--text-muted);
    --bs-navbar-active-color: var(--text-primary);
    --bs-navbar-brand-color: var(--text-primary);
    --bs-navbar-brand-hover-color: var(--color-action);
}
html[data-theme="dark"] .dashminheader,
html[data-theme="dark"] .dashminheader * {
    color: var(--text-primary);
}
/* Make the page title bold + 1.05rem so it reads as the page H1 affordance it is —
   matches the visual weight of the light-mode title styling. */
html[data-theme="dark"] .dashminheader > .d-none.d-md-flex > span,
html[data-theme="dark"] .dashminheader > .d-md-flex > span {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.005em;
}
/* But preserve coloured affordances inside the topnav — link hovers, badges.
 * Syncfusion's bootstrap5-dark ships these badges with a PALE fill (e.g.
 * e-badge-success = #d2efea) + coloured text; forcing the text to #fff alone left
 * white-on-pale = unreadable. Give them a solid fill so the count reads. */
html[data-theme="dark"] .dashminheader .e-badge-danger,
html[data-theme="dark"] .dashminheader .e-badge-success { color: #fff !important; }
html[data-theme="dark"] .dashminheader .e-badge-success { background-color: #198754 !important; }
html[data-theme="dark"] .dashminheader .e-badge-danger { background-color: #dc3545 !important; }
html[data-theme="dark"] .dashminheader .text-danger { color: var(--color-danger) !important; }
html[data-theme="dark"] .dashminheader .text-success { color: var(--color-success) !important; }

/* ============================================================================
 * 13. Bootstrap button variants used by grid toolbars (Refresh / Export / Clear
 *     / Columns). The default .btn-light is paper-white — invisible-by-default
 *     on a dark canvas. Re-tint to a surface-2 chip with a strong border.
 * ============================================================================ */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-white {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-white:hover {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-action) !important;
}
html[data-theme="dark"] .btn-light:active,
html[data-theme="dark"] .btn-light.active,
html[data-theme="dark"] .btn-outline-light:active,
html[data-theme="dark"] .btn-default:active {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}
/* Outline-secondary used by Edit / Cancel buttons in the sticky bottom bar. */
html[data-theme="dark"] .btn-outline-secondary {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
}

/* EJ2 toolbar items styled as buttons — they reuse Bootstrap .btn-light implicitly. */
html[data-theme="dark"] .e-toolbar .e-tbar-btn,
html[data-theme="dark"] .e-toolbar-item .e-tbar-btn {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover {
    background-color: var(--surface-3) !important;
}

/* ============================================================================
 * 14. Dark-mode toggle — bulletproof pill switch styling.
 *     Two markup paths reach here depending on whether the Razor view cache
 *     has picked up the latest __navbar.cshtml:
 *       (a) NEW markup: <span class="dm-switch"><span class="dm-switch-thumb"></span></span>
 *           → styled inline in __navbar.cshtml; also covered below in case the
 *             inline <style> doesn't load.
 *       (b) OLD markup: <input id="darkModeToggleInput" type="checkbox" ...>
 *           → repaint the bare checkbox as a switch via appearance:none.
 *     Both variants live in BOTH light and dark mode (no html[data-theme] scope)
 *     so the toggle never reverts to a checkmark, regardless of theme state.
 * ============================================================================ */

/* (a) New dm-switch markup — same rules as in __navbar.cshtml, restated here so
       the visual is correct even if the inline <style> in the partial doesn't
       evaluate (e.g. partial cached but stylesheet served fresh). */
.dm-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    background: #ccc;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background-color .18s ease;
}
.dm-switch .dm-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform .18s ease;
}
.dm-switch.is-on { background: #4dabf7; }
.dm-switch.is-on .dm-switch-thumb { transform: translateX(14px); }

/* (b) Old checkbox markup — repaint as a switch with pure CSS so even if the
       Razor partial is stale and still serves <input type="checkbox">, the
       user sees a sliding pill. Overrides Bootstrap's .form-check-input square. */
#darkModeToggleInput,
#darkModeToggleBtn input.form-check-input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 34px !important;
    height: 20px !important;
    background: #ccc !important;
    border: none !important;
    border-radius: 999px !important;
    position: relative;
    cursor: pointer;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
    /* The thumb is painted via a radial-gradient on the input itself so we don't
       need a pseudo-element (which doesn't work on <input> in all browsers).
       Position: a 16px-wide white circle sitting 2px from the left when off,
       2px from the right when checked. */
    background-image: radial-gradient(circle at 12px 10px, #fff 7px, transparent 7.5px) !important;
    transition: background-color .18s ease, background-image .18s ease !important;
}
#darkModeToggleInput:checked,
#darkModeToggleBtn input.form-check-input[type="checkbox"]:checked {
    background: #4dabf7 !important;
    background-image: radial-gradient(circle at 22px 10px, #fff 7px, transparent 7.5px) !important;
}
#darkModeToggleInput:focus,
#darkModeToggleBtn input.form-check-input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.3) !important;
}
/* Strip the Bootstrap form-check wrapper's padding so the switch sits clean
   inside the dropdown-item button. */
#darkModeToggleBtn .form-check.form-switch,
#darkModeToggleBtn .form-check {
    padding-left: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* ============================================================================
 * 15. Polished user-avatar dropdown (.user-dd) — light + dark.
 *     This block is NOT scoped to html[data-theme="dark"] because the user
 *     dropdown should look identical in both modes. Light/dark differences
 *     come from the CSS variables it consumes (--surface-1 / --text-primary).
 *     Hierarchy: avatar block → name (15px bold) + email (12px muted) →
 *     "Preferences" eyebrow → switch row → divider → red Sign-out row.
 * ============================================================================ */

.user-dd {
    --user-dd-pad: 14px;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px !important;
    background: var(--surface-1, #ffffff) !important;
    color: var(--text-primary, #1d2844);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.06)) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Header — avatar + identity stack. Padding bottom slightly tighter than top
   so the divider feels close to the identity stack. */
.user-dd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--user-dd-pad) var(--user-dd-pad) 12px;
}
.user-dd-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--smd-red, #C32033) 0%, var(--smd-red-dark, #9f1827) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(195, 32, 51, 0.25);
}
.user-dd-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.user-dd-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary, #1d2844);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-dd-email {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 2px;
    color: var(--text-muted, #667085);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Faint dividers, no Bootstrap defaults. */
.user-dd-divider {
    height: 1px;
    margin: 0;
    background: var(--border-subtle, rgba(0,0,0,0.06));
}

/* "PREFERENCES" eyebrow — small uppercase grouping label. */
.user-dd-eyebrow {
    padding: 12px var(--user-dd-pad) 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #98a2b3);
}

/* Menu rows. */
.user-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px var(--user-dd-pad);
    background: transparent;
    border: 0;
    color: var(--text-primary, #1d2844);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.user-dd-item:hover,
.user-dd-item:focus {
    background: var(--surface-2, rgba(0,0,0,0.04));
    color: var(--text-primary, #1d2844);
    outline: none;
}
.user-dd-item-left {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.user-dd-icon {
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted, #667085);
}
.user-dd-item:hover .user-dd-icon {
    color: var(--color-action, #4b8bec);
}

/* Sign-out row — keep the icon + text red so destructive intent reads. */
.user-dd-item-danger {
    color: var(--color-danger, #b81717);
}
.user-dd-item-danger .user-dd-icon {
    color: var(--color-danger, #b81717);
}
.user-dd-item-danger:hover {
    background: rgba(184, 23, 23, 0.08);
    color: var(--color-danger, #b81717);
}
.user-dd-item-danger:hover .user-dd-icon {
    color: var(--color-danger, #b81717);
}

/* Form wrapper for the sign-out submit button — strip Bootstrap defaults. */
.user-dd-form {
    margin: 0;
    padding: 0;
}

/* Dark-mode tweaks — slightly stronger shadow on dark canvas. */
html[data-theme="dark"] .user-dd {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .user-dd-item:hover {
    background: var(--surface-3);
}
html[data-theme="dark"] .user-dd-item-danger:hover {
    background: rgba(255, 107, 107, 0.12);
}

/* ============================================================================
 * 16. Notification + Chat dropdown panels.
 *     The two bell/comment dropdowns render lists of .notif-card / .chat-card
 *     items with `background:#fff` + dark text hard-coded in custom.css.
 *     Override every row, hover, separator, tab and the panel container.
 * ============================================================================ */

/* The dropdown menu container for both panels (and any other Bootstrap dropdown
   that doesn't go through .user-dd). */
html[data-theme="dark"] .navbar .dropdown-menu,
html[data-theme="dark"] #navNotifDropdown ~ .dropdown-menu,
html[data-theme="dark"] #navChatDropdown ~ .dropdown-menu {
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Notification card row. */
html[data-theme="dark"] .notif-card {
    background: transparent !important;
    border-bottom-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .notif-card:hover {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .notif-text {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .notif-dt {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .notif-btn {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .notif-btn:hover {
    color: var(--text-primary) !important;
}

/* Tab header inside notification panel. */
html[data-theme="dark"] .notif-tab-header {
    color: var(--text-primary);
}
html[data-theme="dark"] .notif-tab-icon {
    color: var(--text-muted);
}
html[data-theme="dark"] .e-tab .e-toolbar-item.e-active .notif-tab-icon {
    color: var(--text-primary);
}

/* EJ2 tab strip surfaces (UNREAD 0 / READ 100). */
html[data-theme="dark"] .e-tab .e-tab-header,
html[data-theme="dark"] .e-tab .e-content,
html[data-theme="dark"] .e-tab .e-toolbar {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-tab .e-toolbar-item .e-tab-wrap {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-tab .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--color-action) !important;
}
html[data-theme="dark"] .e-tab .e-indicator {
    background: var(--color-action) !important;
}

/* "Mark all as read" link styling. */
html[data-theme="dark"] #nav-notif-body a,
html[data-theme="dark"] .notif-mark-all,
html[data-theme="dark"] #nav-notif-body .text-primary {
    color: var(--color-action) !important;
}

/* Chat card row + sub-elements (mirror notif-card). */
html[data-theme="dark"] .chat-card {
    background: transparent !important;
    border-bottom-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .chat-card:hover {
    background: var(--surface-2) !important;
}
html[data-theme="dark"] .chat-text {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .chat-dt {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .chat-btn {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .chat-btn:hover {
    color: var(--text-primary) !important;
}

/* Scroll container of both panels — make sure the scrollbar gutter blends. */
html[data-theme="dark"] .notif-list-scroll {
    background: transparent !important;
    scrollbar-color: var(--border-strong) var(--surface-1);
}
html[data-theme="dark"] .notif-list-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 4px;
}
html[data-theme="dark"] .notif-list-scroll::-webkit-scrollbar-track {
    background-color: var(--surface-1);
}

/* EJ2 ListView inside the notification panel — kill the white default. */
html[data-theme="dark"] .notif-list-scroll .e-listview,
html[data-theme="dark"] .notif-list-scroll .e-listview .e-list-item {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .notif-list-scroll .e-listview .e-list-item:hover {
    background: var(--surface-2) !important;
}

/* ============================================================================
 * 17. Hamburger toggle (.sidebar-toggler) — currently uses --nfm-ink which is
 *     a hard navy #111827 baked into custom.css and never flips on dark mode.
 *     Override the colour token + the icon glyph so the bars are readable.
 * ============================================================================ */
html[data-theme="dark"] .dashminheader .sidebar-toggler,
html[data-theme="dark"] .dashminheader .sidebar-toggler i,
html[data-theme="dark"] .sidebar-toggler,
html[data-theme="dark"] .sidebar-toggler i {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dashminheader .sidebar-toggler:hover,
html[data-theme="dark"] .dashminheader .sidebar-toggler:hover i {
    color: var(--smd-red) !important;
}

/* ============================================================================
 * 18. Dropdown border colour — Bootstrap defaults to a faint #dee2e6 border on
 *     .dropdown-menu which reads as bright on the dark canvas. Replace with a
 *     stronger token from the dark palette.
 * ============================================================================ */
html[data-theme="dark"] .dropdown-menu {
    border-color: var(--border-strong) !important;
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dropdown-menu .dropdown-header {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger,
html[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover {
    color: var(--color-danger) !important;
}

/* ============================================================================
 * 19. Border unity — sidebar edge + user-avatar ring.
 *     The sidebar and the user-avatar both render with their own borders that
 *     in dark mode were either invisible (avatar's rgba(24,40,64,0.15) navy on
 *     a navy surface) or jarring (a hard #ffffff right edge on the sidebar).
 *     Use ONE token (--border-subtle) for every "blends with surface" edge,
 *     and reserve --smd-red for branded affordances (focus rings, sidebar
 *     accent stripe) so the chrome reads as a single system.
 * ============================================================================ */

/* Sidebar — right edge separator. Use the same token everything else uses. */
html[data-theme="dark"] .sidebar {
    border-right: 1px solid var(--border-subtle) !important;
}

/* Removed any white right-shadow / box-shadow leaking from the sidebar. */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar::after {
    box-shadow: none !important;
}

/* Subtle 1px seam between top navbar and content area — currently the nav has
   no bottom border so there's a visual "join" line missing. Add it back with
   the same token. */
html[data-theme="dark"] .dashminheader {
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* User avatar — custom.css uses `border: 1px solid rgba(24,40,64,0.15)` which
   was a navy semi-transparent ring (invisible on the light bg). In dark mode
   it needs an explicit border using the subtle token so the circle reads. */
html[data-theme="dark"] .user-avatar {
    border-color: var(--border-strong) !important;
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* When the dropdown is open the avatar should feel "active" without screaming
   a red ring at the user. Use a SOFT halo in the subtle border token + a
   gentle white-ish glow — same accent intensity as the bell + chat pills,
   so the three top-right elements read as one cohesive icon row. */
html[data-theme="dark"] .nav-item.dropdown.show .user-avatar,
html[data-theme="dark"] .navbar .dropdown-toggle[aria-expanded="true"] .user-avatar,
html[data-theme="dark"] .navbar .dropdown-toggle:focus .user-avatar {
    border-color: var(--border-strong) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

/* The Bootstrap default focus outline on .dropdown-toggle <a> is a blue
   browser-default box; replace with a subtle brand ring or none — let the
   avatar carry the affordance. */
html[data-theme="dark"] .navbar .dropdown-toggle:focus,
html[data-theme="dark"] .navbar .dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* The notification + chat icon pills (the dark circles holding the bell /
   comment glyphs) — give them the same border treatment so the three icons
   in the top nav (bell, chat, avatar) form a visually unified set. */
html[data-theme="dark"] .nav-icon-link .nav-fa-wrap {
    /* If the underlying chip uses a background, blend its edge. */
    border-color: var(--border-subtle);
}
html[data-theme="dark"] .navbar .nav-icon-link {
    /* Match the user-avatar visual weight so all three top-right circles align. */
    color: var(--text-primary) !important;
}

/* Light-mode counterpart — same restraint as dark mode (no aggressive red ring
   on open). The dropdown being open is its own affordance; the avatar just
   needs a quiet "selected" cue. */
.user-avatar {
    border-color: var(--border-strong, rgba(24, 40, 64, 0.15));
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nav-item.dropdown.show .user-avatar,
.navbar .dropdown-toggle[aria-expanded="true"] .user-avatar {
    border-color: var(--border-strong, rgba(24, 40, 64, 0.35));
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* ============================================================================
 * 19b. Global scrollbar — application-wide dark scrollbar styling.
 *      The browser default scrollbar renders as a bright light-grey on every
 *      scrollable surface (body, side panes, dropdowns, EJ2 grid content,
 *      iframes) which is jarring on the dark canvas. Repaint the thumb +
 *      track using the dark palette tokens so every scroll surface blends.
 *
 *      Two parallel selectors — Firefox uses `scrollbar-color` on the root
 *      and inherits to descendants; WebKit/Blink need explicit pseudo-element
 *      rules on `*` so nested overflow containers also pick them up.
 * ============================================================================ */

/* Firefox — set once on the root, inherits to every scroll container. */
html[data-theme="dark"] {
    scrollbar-color: var(--border-strong) var(--surface-1);
    scrollbar-width: thin;
}

/* WebKit / Blink (Chrome, Edge, Safari) — applies to the page AND every
   nested scroll container (.e-content, .modal-body, dropdowns, etc.). */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface-1);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
    /* 2px transparent border so the thumb visually inset from the track. */
    border: 2px solid var(--surface-1);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
html[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--surface-1);
}

/* ============================================================================
 * 20. Time Logged pill (#nav-time-logged-pill).
 *     custom.css:1385 hard-codes background to --nfm-ink (#111827) which is
 *     almost identical to the navbar's dark bg — the pill effectively
 *     disappears into the navbar. Lift it onto --surface-3 so the pill reads
 *     as a clearly elevated chip with bright text.
 * ============================================================================ */
html[data-theme="dark"] .dashminheader #nav-time-logged-pill,
html[data-theme="dark"] .dashminheader #nav-local-time-pill {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
}

/* The animated clock glyph stays brand-red so the affordance still pops; only
   the surrounding pill gets re-tinted. */
html[data-theme="dark"] .dashminheader #nav-time-logged-pill .nav-clock,
html[data-theme="dark"] .dashminheader #nav-time-logged-pill .fa-clock,
html[data-theme="dark"] .dashminheader .fa-clock {
    color: var(--smd-red) !important;
}

/* The label span inside the pill is sometimes set inline by JS; bump the text
   colour with !important so any inline style doesn't dim it. */
html[data-theme="dark"] #nav-time-logged,
html[data-theme="dark"] #nav-local-time,
html[data-theme="dark"] #nav-time-logged-pill span {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ============================================================================
 * Product flag badges — .bg-True / .bg-False
 *     Used by ProductDetails / ExternalProductDetails to render the row of
 *     "Is Bundle / Is Sample / Is Exclusive / Is Packaging / Is Sellable /
 *      Is End of life / Is Active / Requires Barcode" pills. The boolean
 *     property serializes to the string "True" / "False" which becomes the
 *     class name (nucleus.css:48901-48908).
 *
 *     Light theme paints these as soft tinted pills:
 *       .bg-True  → rgba(43, 194, 83, 0.2) bg + #21a544 text   (deep green)
 *       .bg-False → rgba(231, 11, 1, 0.2)  bg + #e70b0b text   (deep red)
 *     On dark the soft tinted backgrounds still read fine, but the deep
 *     text colours sit too close to the dark surface to be legible. Lift
 *     the text to brighter green / red variants (same hues used by
 *     `--color-success` and `--color-danger`) while keeping the soft
 *     tinted backgrounds so the pills feel like the same chips, just
 *     readable in dark mode.
 * ============================================================================ */
html[data-theme="dark"] .bg-True {
    /* Lift the green to a lighter shade — matches the .nfm-status-dot.active
       treatment further up the file (#34d399). The bg tint stays as-is. */
    color: #34d399 !important;
}
html[data-theme="dark"] .bg-False {
    /* Lift the red to a softer salmon — same family as `--color-danger`
       (#ff6b6b) so the badge reads as a "negative" affordance without
       shouting at the user. */
    color: #f87171 !important;
}

/* ============================================================================
 * Syncfusion ChatUI (ej2-interactive-chat 30.1.x) — dark patch.
 *     Used inside the ticket / product Chat side-pane tab via
 *     `new ej.interactivechat.ChatUI(...)` in wwwroot/js/Chat/chat.js. The
 *     CDN bootstrap5-dark.css doesn't fully restyle the ChatUI's bespoke
 *     surfaces on this version — the most obvious leak is the BRIGHT BLUE
 *     "Chat" header bar, plus the green-on-light "self" bubbles that don't
 *     read as part of the dark workspace.
 *
 *     Repaint the canonical EJ2 chat selectors plus the project-template
 *     extras (`.empty-chat-text`, `#toggleChatSearch`) so the chat feels
 *     like a native dark surface across the message area, header, footer,
 *     mention chips, date breaks, and timestamps.
 * ============================================================================ */

/* Root container — sit on bg-primary so the chat fills its tab without
   leaking a different surface tone. CRITICAL: do NOT set `color` here.
   The chat bubbles inherit `color` from this root; setting white here
   makes the bubble TEXT white, and since our bubble-bg selectors don't
   match the v30.1 ChatUI DOM, that white text lands on the un-changed
   light-mode pastel bubbles → invisible. Set the color only on specific
   outside-the-bubble surfaces below (header, date breaks, footer). */
html[data-theme="dark"] .e-chat-ui,
html[data-theme="dark"] .api-chatui,
html[data-theme="dark"] .api-chatui .e-chat-ui {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}
/* EJ2's ChatUI ships with a left-edge brand-blue accent stripe (a 4px
   border-left or ::before pseudo). Kill it on dark so the chat blends
   into the side-pane tab. */
/* EJ2 v30.1 wraps the chat in `.e-chat-ui { border: 1px solid }` and the
   header bar in `.e-chat-header { border-bottom: 1px solid }` — BOTH omit a
   border-color, so they fall back to `currentColor`, which the theme paints
   brand-blue. That is the bright-blue frame + header underline seen on dark.
   Pin every border to a neutral subtle token so the blue disappears. */
html[data-theme="dark"] .e-chat-ui {
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}
/* Header bar (the real element is `.e-chat-header`, NOT `.e-header`, which is
   only the inner flex row holding the title). Brand "red / black / white"
   banner: a near-black base, a 2px SMD-red accent rule underneath, and crisp
   white title text — matching the red/black/white identity used across the
   app. */
html[data-theme="dark"] .e-chat-ui .e-chat-header {
    background: #1b1e22 !important;
    background-color: #1b1e22 !important;
    /* SMD-red accent as a horizontal GRADIENT (full red on the left, fading
       out to the right) rendered via border-image on a 3px bottom border.
       Other borders are zero-width so the gradient shows only underneath. */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--smd-red) 0%, rgba(230, 59, 79, 0.6) 45%, rgba(230, 59, 79, 0.05) 100%) 1 !important;
}
html[data-theme="dark"] .e-chat-ui .e-chat-header .e-chat-toolbar.e-toolbar {
    background: transparent !important;
    border: none !important;
}
/* Title text white (the inner flex row + its text span). */
html[data-theme="dark"] .e-chat-ui .e-chat-header .e-header-text,
html[data-theme="dark"] .e-chat-ui .e-header .e-header-text {
    color: #ffffff !important;
}
html[data-theme="dark"] .e-chat-ui::before,
html[data-theme="dark"] .api-chatui::before,
html[data-theme="dark"] .e-chat-ui::after,
html[data-theme="dark"] .e-header::before,
html[data-theme="dark"] .e-header::after {
    background: transparent !important;
    border-color: transparent !important;
    display: none !important;
}

/* Header bar — the bright blue strip at the top with the "Chat" title.
   The inner `.e-header` flex row sits inside `.e-chat-header` (painted
   #1b1e22 above). Painting this row a *different* colour (surface-1) left a
   lighter band around the title that didn't match the rest of the banner, so
   keep it transparent and let the single #1b1e22 banner show through.
   The custom headerTemplate in chat.js renders a bare `<div class="e-header">`
   so the parent wrapper isn't always `.e-chat-ui` — target the header by
   class directly as well as via the wrapper, and force `background-image:
   none` to defeat any gradient EJ2's default theme might paint. */
html[data-theme="dark"] .e-chat-ui .e-header,
html[data-theme="dark"] .api-chatui .e-header,
html[data-theme="dark"] #chatBox > .e-header,
html[data-theme="dark"] #chatBox .e-header,
html[data-theme="dark"] [id^="ticket-chat"] .e-header,
html[data-theme="dark"] div > .e-header:has(.e-header-text) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-bottom: none !important;
    /* Kill the brand-blue left accent bar + drop shadow EJ2 paints on the
       header (visible as a blue strip on the header's left edge on dark). */
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .e-chat-ui .e-header .e-header-text,
html[data-theme="dark"] .e-chat-ui .e-header-text,
html[data-theme="dark"] .e-header .e-header-text,
html[data-theme="dark"] .e-header-text,
html[data-theme="dark"] .e-chat-ui .e-header .e-header-icon,
html[data-theme="dark"] .e-header .e-header-icon,
html[data-theme="dark"] .e-header-icon,
html[data-theme="dark"] .e-chat-ui .e-header i,
html[data-theme="dark"] .e-chat-ui .e-header .e-icons,
html[data-theme="dark"] .e-header .e-icons {
    color: var(--text-primary) !important;
}

/* The custom #toggleChatSearch button in the header template ships with
   inline `background-color: white` and a `color: #007bff` search icon.
   Lift to surface-2 chip + lighter blue icon so the button reads as a
   neutral action affordance against the dark header. */
html[data-theme="dark"] #toggleChatSearch,
html[data-theme="dark"] .e-chat-ui #toggleChatSearch,
html[data-theme="dark"] .e-chat-ui .e-header button {
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #toggleChatSearch:hover {
    background-color: var(--surface-3) !important;
}
html[data-theme="dark"] #toggleChatSearch .e-icons,
html[data-theme="dark"] #toggleChatSearch .e-search {
    color: #9eb4ff !important;
}

/* Message area canvas — the scrollable area between header and footer.
   Set bg only — do NOT force text/bubble colours here, because the
   actual EJ2 ChatUI v30.1 bubble class names don't match the guessed
   `.e-message-content` / `.e-self-message` selectors, so trying to
   restyle the bubbles ends up forcing light text onto unchanged
   light-mode pastel bubbles — invisible text. Leave the bubbles to
   Syncfusion's own painter; we just darken the canvas around them. */
html[data-theme="dark"] .e-chat-ui .e-message-area,
html[data-theme="dark"] .e-chat-ui .e-content,
html[data-theme="dark"] .e-chat-ui .e-chat-content {
    background: var(--bg-primary) !important;
}

/* Sender-name + timestamp meta text outside the bubble ("SMD Reporting
   · 11:47 AM"). These are on the dark canvas (not inside the bubble) so
   forcing text-muted here is safe and improves the dim default. */
html[data-theme="dark"] .e-chat-ui .e-user-name,
html[data-theme="dark"] .e-chat-ui .e-message-username,
html[data-theme="dark"] .e-chat-ui .e-message-time,
html[data-theme="dark"] .e-chat-ui .e-time,
html[data-theme="dark"] .e-chat-ui .e-message-header {
    color: var(--text-muted) !important;
}

/* Avatar circles (the "SR", "LM", "B" initial chips at left of each row).
   Default EJ2 avatars are light grey — lift to surface-3 so they read on
   the dark canvas without losing the "muted neutral" intent. */
html[data-theme="dark"] .e-chat-ui .e-avatar,
html[data-theme="dark"] .e-chat-ui .e-message-avatar {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* Date / time break dividers ("March 16, 2026"). EJ2 renders these as
   a small pill in the middle of the scroll area. */
html[data-theme="dark"] .e-chat-ui .e-time-break,
html[data-theme="dark"] .e-chat-ui .e-date-break,
html[data-theme="dark"] .e-chat-ui .e-time-break-text,
html[data-theme="dark"] .e-chat-ui .e-date-break-text {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* @mention chips + attachment links inside message bodies are LEFT ALONE
   on purpose. The bubble background colour comes from Syncfusion's own
   painter (light pastel green / light grey) and our selectors for the
   bubble bg don't match the v30.1 ChatUI DOM, so any contrasting text
   colour we force here would appear against an unchanged light bubble
   — invisible. The default Syncfusion mention + link colours are dark
   tones tuned for the light bubbles and read fine even in dark mode.
   See git blame for the previous (broken) overrides. */

/* Footer input bar (composer at the bottom of the chat) — input field,
   send button, attachment button. */
html[data-theme="dark"] .e-chat-ui .e-footer,
html[data-theme="dark"] .e-chat-ui .e-chat-footer,
html[data-theme="dark"] .e-chat-ui .e-message-footer {
    background: var(--surface-1) !important;
    border-top: 1px solid var(--border-subtle) !important;
}
html[data-theme="dark"] .e-chat-ui .e-footer .e-input,
html[data-theme="dark"] .e-chat-ui .e-footer textarea,
html[data-theme="dark"] .e-chat-ui .e-message-textarea,
html[data-theme="dark"] .e-chat-ui [contenteditable="true"] {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .e-chat-ui .e-footer .e-input::placeholder,
html[data-theme="dark"] .e-chat-ui .e-footer textarea::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .e-chat-ui .e-footer .e-btn,
html[data-theme="dark"] .e-chat-ui .e-send,
html[data-theme="dark"] .e-chat-ui .e-icon-btn {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-chat-ui .e-footer .e-btn:hover,
html[data-theme="dark"] .e-chat-ui .e-send:hover {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
}

/* CUSTOM chat footer (`#CustomChatFooter`) — the real composer rendered by
   Chat.cshtml. The ChatUI is built with `showFooter: false`, so the bespoke
   `.e-footer` bar (paperclip + mention editor + send) replaces it. It is NOT
   inside `.e-chat-ui`, so the selectors above never reach it. Its `#fff` is an
   inline style, so `!important` is required to win the cascade. */
html[data-theme="dark"] #CustomChatFooter {
    background-color: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
}
/* Paperclip + send buttons render as Bootstrap `.btn-light` (white). Repaint
   to a transparent dark button with a readable icon. */
html[data-theme="dark"] #CustomChatFooter .btn-light {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #CustomChatFooter .btn-light:hover {
    background: var(--surface-3) !important;
    color: var(--color-action) !important;
}
html[data-theme="dark"] #CustomChatFooter .btn-light i,
html[data-theme="dark"] #CustomChatFooter .btn-light .e-icons {
    color: inherit !important;
}
/* File drop zone (`#showUploaderBtn` reveals it) — dashed box + browse link. */
html[data-theme="dark"] #chatFileDrop {
    border-color: var(--border-strong) !important;
    color: var(--text-muted) !important;
}
html[data-theme="dark"] #chatFileDrop a {
    color: var(--color-action) !important;
}
/* Selected-file chips below the composer. */
html[data-theme="dark"] #CustomChatFooter .file-chip {
    background-color: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* Empty-state template (`.empty-chat-text` from the project's
   emptyChatTemplate — "No Messages Yet"). The h4 + p inside use default
   body colours which are too dim on dark; force readable tokens. */
html[data-theme="dark"] .empty-chat-text {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .empty-chat-text h4 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .empty-chat-text h4 .e-icons {
    color: var(--text-muted) !important;
}

/* Typing indicator dots (when another user is typing). */
html[data-theme="dark"] .e-chat-ui .e-typing-indicator,
html[data-theme="dark"] .e-chat-ui .e-typing-text {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .e-chat-ui .e-typing-indicator span {
    background: var(--text-muted) !important;
}

/* Mention editor wrapper / popup (the autocomplete that appears when a
   user types `@`). */
html[data-theme="dark"] #mentionEditorWrapper {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .e-mention-popup,
html[data-theme="dark"] .e-mention .e-popup,
html[data-theme="dark"] .e-mention-component .e-popup {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .e-mention-popup .e-list-item:hover {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}
/* Mention popup list-item NAME text — dim by default; force readable. The
   popup contains an `@All` header + N rows of (avatar, name). The text
   sits in `.e-list-item-text` / `.e-list-text` inside each row. */
html[data-theme="dark"] .e-mention-popup .e-list-item,
html[data-theme="dark"] .e-mention .e-list-item,
html[data-theme="dark"] .e-mention-component .e-list-item,
html[data-theme="dark"] .e-mention-popup .e-list-item-text,
html[data-theme="dark"] .e-mention-popup .e-list-text,
html[data-theme="dark"] .e-mention-popup .e-list-item span,
html[data-theme="dark"] .e-mention-popup li {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-mention-popup .e-list-item .e-avatar {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}
/* `@All` header row at the top of the popup. */
html[data-theme="dark"] .e-mention-popup .e-header,
html[data-theme="dark"] .e-mention-popup .e-list-group-item,
html[data-theme="dark"] .e-mention-popup .e-mention-header {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-subtle) !important;
}

/* Mention popup CONTAINER — dark card. (Popup is appended to document.body
   via #mentionHost, outside .e-chat-ui, so target .e-mention directly.) */
html[data-theme="dark"] .e-mention.e-popup,
html[data-theme="dark"] .e-mention .e-content {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Row NAME text. The earlier rules only set the .e-list-item colour, but the
   custom .mention-item carries its own `color:#333`, which won this subtree
   and left the names near-invisible on dark. Force the custom item + its
   children light. */
html[data-theme="dark"] .e-mention .mention-item,
html[data-theme="dark"] .e-mention .mention-item > div {
    color: var(--text-primary) !important;
}

/* Active/hover row styling is intentionally theme-agnostic (brand-blue + white
   text) and lives in Chat.cshtml — no dark-scoped override here, so it wins
   uniformly for the body-hosted popup in both themes. */

/* Avatar circle (initials) — neutral chip with light initials. */
html[data-theme="dark"] .e-mention .mention-avatar {
    background: var(--surface-3) !important;
}
html[data-theme="dark"] .e-mention .mention-avatar span {
    color: var(--text-primary) !important;
}

/* Mention dropdown scroll list scrollbar (dark). */
html[data-theme="dark"] .e-mention .e-content::-webkit-scrollbar-thumb,
html[data-theme="dark"] .e-mention .e-dropdownbase::-webkit-scrollbar-thumb {
    background: var(--surface-3) !important;
}
html[data-theme="dark"] .e-mention .e-content::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .e-mention .e-dropdownbase::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong) !important;
}
html[data-theme="dark"] .e-mention .e-content,
html[data-theme="dark"] .e-mention .e-dropdownbase {
    scrollbar-color: var(--surface-3) transparent !important;
}

/* CHAT SEARCH input — when the user clicks the search icon in the header,
   a `<input class="e-input">` slides in next to it (visible in the
   screenshot with the red X close button). The input shipped with a
   bright blue bottom-border accent that visually screams against the
   dark header — neutralise it and re-tint the close button. */
html[data-theme="dark"] .e-chat-ui .e-header .e-input-group,
html[data-theme="dark"] .e-chat-ui .e-header .e-input,
html[data-theme="dark"] .e-chat-ui .e-header input[type="text"],
html[data-theme="dark"] .e-chat-ui .e-header input[type="search"] {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .e-chat-ui .e-header .e-input-group::before,
html[data-theme="dark"] .e-chat-ui .e-header .e-input-group::after,
html[data-theme="dark"] .e-chat-ui .e-header .e-input::before,
html[data-theme="dark"] .e-chat-ui .e-header .e-input::after {
    /* EJ2 e-input draws its focus/active state as a 2px accent line via
       ::before/::after pseudo elements with a brand-blue bg. Kill them. */
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .e-chat-ui .e-header .e-clear-icon {
    color: var(--color-danger) !important;
}

/* STANDALONE chat search (`#chatSearchWrapper`) — Chat.cshtml renders the
   search affordance OUTSIDE the ChatUI header: a `#toggleChatSearch` button
   and a `#chatSearchWrapper` flyout holding `#chatSearchInput`. Both ship
   inline `background: white`, so they stay white on dark — repaint them (the
   `.e-chat-ui .e-header` rules above never reach this DOM). Inline styles are
   beaten with `!important`. */
/* Banner icon + title in white so they read on the black/red banner. */
html[data-theme="dark"] .e-chat-ui .chat-banner .chat-banner-icon,
html[data-theme="dark"] .e-chat-ui .chat-banner .e-header-text {
    color: #ffffff !important;
}

/* Search flyout — make it a distinct, raised pill with a brand-red hairline
   accent so it stands out against the dark banner. */
html[data-theme="dark"] #chatSearchWrapper {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    border: 1px solid rgba(230, 59, 79, 0.55) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
    padding: 4px 8px !important;
}
/* Search toggle (the magnifier button when the flyout is closed) — a tidy
   rounded icon button with a red glyph. */
html[data-theme="dark"] #toggleChatSearch {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] #toggleChatSearch:hover {
    border-color: var(--smd-red) !important;
}
html[data-theme="dark"] #chatSearchInput,
html[data-theme="dark"] #chatSearchWrapper .e-input {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html[data-theme="dark"] #chatSearchInput::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] #toggleChatSearch .e-search {
    color: var(--smd-red) !important;
}

/* Search-match highlight (`<mark>`, applied by chat-search.js to matched
   message text). The base style is `background: yellow` with the bubble's
   light text colour inherited — light-on-yellow is unreadable on dark. Use
   an amber fill with forced dark text so the match stays legible. Scoped to
   the chat body so it never touches `<mark>` elsewhere. */
html[data-theme="dark"] #chatBox mark,
html[data-theme="dark"] #chatBoxDialog mark,
html[data-theme="dark"] .default-chatui mark {
    background-color: #f4b740 !important;
    color: #1a1a1a !important;
}

/* Chat loading spinner (`.chat-loading-spinner`, injected by chat.js while the
   session/messages fetch is in flight). Tint the ring + label for dark. */
html[data-theme="dark"] .chat-loading-spinner {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .chat-spinner-ring {
    border-color: var(--border-strong) !important;
    border-top-color: var(--color-action) !important;
}

/* BUBBLES — force DARK surface via every plausible class wildcard.
   Goal: make dark mode actually dark — bubbles should not stay light.
   Previous attempts used named selectors (.e-message-content, .e-bubble)
   which only caught the own (active) bubbles. The other-user bubbles
   use different inner DOM in v30.1, so use a wildcard `[class*="..."]`
   net to catch every variant Syncfusion might emit. */
html[data-theme="dark"] .e-chat-ui [class*="bubble"],
html[data-theme="dark"] .e-chat-ui [class*="message-content"],
html[data-theme="dark"] .e-chat-ui [class*="message-text"]:not([class*="textarea"]):not([class*="text-area"]),
html[data-theme="dark"] .e-chat-ui [class*="active-user"]:not([class*="avatar"]),
html[data-theme="dark"] .e-chat-ui [class*="other-user"]:not([class*="avatar"]),
html[data-theme="dark"] .e-chat-ui .e-message-content,
html[data-theme="dark"] .e-chat-ui .e-bubble,
html[data-theme="dark"] .e-chat-ui .e-content-text,
html[data-theme="dark"] .e-chat-ui .e-text-content,
html[data-theme="dark"] .e-chat-ui .e-msg,
html[data-theme="dark"] .e-chat-ui .e-msg-content {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* OWN (sent) bubbles — distinct green-tinted surface so sent vs received are
   visually different in dark mode too (light mode already shows sent in green,
   received in grey; the generic rule above lumped both onto surface-2 because
   `.custom-message-bubble` matches its `[class*="bubble"]` net).
   The custom messageTemplate in chat.js marks own messages with `.align-right`
   and others with `.align-left`. Override the own bubble AND its inner
   `.message-text` (the generic rule paints that surface-2 too, which would
   otherwise cover the green). Higher specificity + later in file → wins.
   Received bubbles keep surface-2 from the generic rule. */
html[data-theme="dark"] .e-chat-ui .message-flex.align-right .custom-message-bubble,
html[data-theme="dark"] .e-chat-ui .message-flex.align-right .message-text {
    background: #213a2b !important;
    background-color: #213a2b !important;
    border-color: rgba(45, 122, 74, 0.5) !important;
}

/* Default ALL text in the chat to LIGHT (bubbles are now dark, so the
   light root colour now reads correctly on the dark bubble surface).
   Excludes icon glyphs so FontAwesome / EJ2 icons aren't repainted. */
html[data-theme="dark"] .e-chat-ui,
html[data-theme="dark"] .e-chat-ui *:not(.e-icons):not(i):not(.e-avatar) {
    color: var(--text-primary) !important;
}

/* EXCEPTIONS — surfaces that should be MUTED (secondary text). */
html[data-theme="dark"] .e-chat-ui .e-user-name,
html[data-theme="dark"] .e-chat-ui .e-message-username,
html[data-theme="dark"] .e-chat-ui .e-message-time,
html[data-theme="dark"] .e-chat-ui .e-time,
html[data-theme="dark"] .e-chat-ui .e-message-header,
html[data-theme="dark"] .e-chat-ui .e-message-header *,
html[data-theme="dark"] .e-chat-ui [class*="username"],
html[data-theme="dark"] .e-chat-ui [class*="user-name"],
html[data-theme="dark"] .e-chat-ui [class*="message-time"] {
    color: var(--text-muted) !important;
}

/* DATE / TIME BREAK SEPARATORS — "August 26, 2025", "September 9, 2025",
   etc. Must be READABLE: light text on a darker pill. The previous
   `.e-time-break` rule had higher selector priority but its `color:
   var(--text-muted)` made the text too dim against the pill. Brighten
   it. */
html[data-theme="dark"] .e-chat-ui .e-time-break,
html[data-theme="dark"] .e-chat-ui .e-time-break *,
html[data-theme="dark"] .e-chat-ui .e-date-break,
html[data-theme="dark"] .e-chat-ui .e-date-break *,
html[data-theme="dark"] .e-chat-ui [class*="time-break"],
html[data-theme="dark"] .e-chat-ui [class*="time-break"] *,
html[data-theme="dark"] .e-chat-ui [class*="date-break"],
html[data-theme="dark"] .e-chat-ui [class*="date-break"] * {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-chat-ui .e-time-break,
html[data-theme="dark"] .e-chat-ui .e-date-break,
html[data-theme="dark"] .e-chat-ui [class*="time-break"],
html[data-theme="dark"] .e-chat-ui [class*="date-break"] {
    /* Background on the pill itself — but NOT on the children spans/text,
       which would double-paint. The `*` rule above set their text colour,
       this rule sets the pill bg. */
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}

/* @MENTION CHIPS — match the LIGHT mode semantic where mentions are
   shown in BLUE TEXT. Use a brand-blue tint pill with brighter blue
   text so the mention reads as a clickable affordance even on dark. */
html[data-theme="dark"] .e-chat-ui .e-mention,
html[data-theme="dark"] .e-chat-ui .e-mention-chip,
html[data-theme="dark"] .e-chat-ui .e-mention-tag,
html[data-theme="dark"] .e-chat-ui [class*="mention"],
html[data-theme="dark"] .e-chat-ui span[data-mention],
html[data-theme="dark"] .e-chat-ui span[contenteditable="false"][class*="mention"],
html[data-theme="dark"] .e-mention-component .e-mention-chip,
html[data-theme="dark"] .mention-tag,
html[data-theme="dark"] .mention-chip {
    background: rgba(49, 87, 255, 0.15) !important;
    color: #6c93ff !important;
    border-color: rgba(49, 87, 255, 0.4) !important;
    border-radius: 4px;
    padding: 0 4px;
}

/* Avatar circles (SR / LM / B initials) — surface-3 chip with light
   initials. The `:not(.e-avatar)` exclusion on the universal rule
   stops the avatar bg getting clobbered. */
html[data-theme="dark"] .e-chat-ui .e-avatar,
html[data-theme="dark"] .e-chat-ui .e-message-avatar {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

/* Footer icons (send, paperclip). */
html[data-theme="dark"] .e-chat-ui .e-footer i,
html[data-theme="dark"] .e-chat-ui .e-footer .e-icons,
html[data-theme="dark"] .e-chat-ui .e-chat-footer i,
html[data-theme="dark"] .e-chat-ui .e-chat-footer .e-icons {
    color: var(--text-primary) !important;
}

/* Attachment links inside bubbles — blue link affordance on the dark
   bubble. Use lighter blue so it reads against surface-2. */
html[data-theme="dark"] .e-chat-ui a,
html[data-theme="dark"] .e-chat-ui [class*="message"] a,
html[data-theme="dark"] .e-chat-ui [class*="bubble"] a {
    color: #6c93ff !important;
    text-decoration: underline;
}

/* ============================================================================
 * 21. FontAwesome inside Syncfusion EJ2 Tab icons (BOTH themes).
 *     EJ2 Tab renders the tab icon as <span class="e-tab-icon e-icon ...">
 *     and stamps `font-family: 'e-icons'` on `.e-icon`. When we pass a
 *     `iconCss: 'fa-solid fa-paperclip'` (ticket side-pane tab strip), the
 *     two font-family rules tie on specificity (both one class) and the
 *     winner depends on stylesheet load order — risky. Force FontAwesome's
 *     font to win on any `.e-tab-icon` that carries a `fa-*` class so the
 *     side-pane tabs render the FA glyphs reliably.
 *
 *     NOT scoped to dark mode — the same fix is needed in light mode.
 * ============================================================================ */
.e-tab-icon.fa,
.e-tab-icon.fas,
.e-tab-icon.far,
.e-tab-icon.fal,
.e-tab-icon.fab,
.e-tab-icon.fa-solid,
.e-tab-icon.fa-regular,
.e-tab-icon.fa-light,
.e-tab-icon.fa-brands {
    font-family: "Font Awesome 6 Free" !important;
    /* The 'solid' weight needs 900; FA's own rule sets it but EJ2's .e-icon
       can override font-weight via its base style on some controls, so we
       restate it here. */
    font-weight: 900;
    /* EJ2 sometimes sets a 14px font-size on .e-icon that's too small for FA's
       optically-balanced glyphs; bump to 15px so the side-pane tab icons read
       at the same visual weight as the e-icons glyphs they're replacing. */
    font-size: 15px;
    line-height: 1;
}
.e-tab-icon.fa-regular,
.e-tab-icon.far {
    /* Regular weight is 400 in FA6. */
    font-weight: 400;
}
.e-tab-icon.fa-brands,
.e-tab-icon.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* ============================================================================
 * 22. Form Management — Question Workspace (.nfm-qw-*) dark mode.
 *     form-management.css §"QUESTION WORKSPACE …" hard-codes a full light
 *     palette across every QW surface — panel cards (#fff bg, #e5e7eb border),
 *     panel headers (#0f172a title, #6b7280 subtitle), header icon buttons
 *     (#fff bg, #d0d5dd border, #475467 fg), count pills (#f2f4f7 bg, #344054
 *     fg), bank cards (#e9edf5 border, #0f172a title), and the page-level
 *     title block (#0f172a h4, #6b7280 lede). None of those resolve through
 *     a CSS variable, so without this patch the whole workspace stays light
 *     when dark mode is on (visible as bright white panels poking through
 *     the dark canvas).
 * ============================================================================ */

/* Workspace page canvas — sits inside .nfm-page (already darkened by §7)
   but the QW page wraps everything in #questionWorkspacePage / .nfm-qw-page.
   Force the canvas onto bg-primary so the gap between panels reads as the
   body, not as light leakage. */
html[data-theme="dark"] .nfm-qw-page,
html[data-theme="dark"] #questionWorkspacePage {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Topbar (page header — back button + section name + lede).
   form-management.css:946–956 hard-codes the topbar as a `#fff` card with
   `#e5e7eb` border + a faint shadow + a 6px red→ink brand stripe down the
   left. The stripe is a brand affordance and stays; the card surface
   needs to flip to surface-1 so the page header reads as part of the dark
   workspace and "Documentation Quality" stops being white-on-white. */
html[data-theme="dark"] .nfm-qw-topbar {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    /* The light shadow stack (rgba(16,24,40,...)) is invisible on dark and
       only adds compositing cost — strip it to a single soft drop. */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .nfm-qw-title-row h4 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-topbar p {
    color: var(--text-muted) !important;
}

/* Config panel footer — the sticky "Save Question" bar at the bottom of the
   right-hand Question Configuration panel. form-management.css:1785 hard-
   codes `background: #ffffff` + `border-top: 1px solid #eef0f4`, which
   shows up as a solid white slab under the purple Save button on dark. */
html[data-theme="dark"] .nfm-qw-config-footer {
    background: var(--surface-1) !important;
    border-top-color: var(--border-subtle) !important;
}

/* The three panel cards (Question Bank / Section Questions / Question
   Configuration). Lift to surface-1 so they read as elevated against the
   bg-primary canvas — same recipe as .card / .nfm-grid-card. */
html[data-theme="dark"] .nfm-qw-panel,
html[data-theme="dark"] .nfm-qw-bank-panel,
html[data-theme="dark"] .nfm-qw-canvas-panel,
html[data-theme="dark"] .nfm-qw-config-panel {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Panel header (the strip with the H5 title + small description span). */
html[data-theme="dark"] .nfm-qw-panel-header {
    border-bottom-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-qw-panel-header h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-panel-header > div > span,
html[data-theme="dark"] .nfm-qw-panel-header span {
    color: var(--text-muted) !important;
}
/* The brand red→ink gradient stripe under each header is already legible
   on dark — no change needed. */

/* Count pills inside the panel header actions cluster. Light theme uses
   #f9fafb on #e4e7ec border with #344054 text — re-tint to surface-3. */
html[data-theme="dark"] .nfm-count-pill,
html[data-theme="dark"] .nfm-qw-panel-header-actions .nfm-count-pill {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* Icon-only header buttons (refresh, save). Light theme uses #fff on #d0d5dd
   with #475467 fg — flatten to a surface-2 chip on dark with a neutral
   hover lift (matches the .nfm-action-btn pattern in §7). */
html[data-theme="dark"] .nfm-qw-header-btn {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-qw-header-btn:hover {
    /* Neutral surface lift — no color swap. Matches the established pattern
       in §7 (.nfm-back-action / .nfm-action-btn) where hover lifts to
       surface-3 without changing the semantic colour. */
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}
/* The "primary" variant (Create Question) is BRAND PURPLE in the light
   theme (#623AA2). Keep that exact brand purple in dark too — it's part
   of the design system, not a generic action button. Lift it slightly so
   it reads against the dark surface, and use the same purple-tinted hover
   (#4f2e85 in light → keep the same recipe). */
html[data-theme="dark"] .nfm-qw-header-btn.nfm-qw-header-btn-primary {
    background: #623AA2 !important;
    color: #ffffff !important;
    border-color: #623AA2 !important;
}
html[data-theme="dark"] .nfm-qw-header-btn.nfm-qw-header-btn-primary:hover {
    background: #4f2e85 !important;
    border-color: #4f2e85 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .nfm-qw-header-btn.nfm-qw-header-btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(98, 58, 162, 0.4) !important;
}

/* Search input — light theme uses #f8fafc/#fff with a dark glyph. */
html[data-theme="dark"] .nfm-qw-search {
    background: transparent !important;
}
html[data-theme="dark"] .nfm-qw-search i {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-qw-search input {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-qw-search input::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-qw-search input:focus {
    background: var(--surface-2) !important;
    border-color: var(--focus-color) !important;
}

/* Filter chip row — All / Text / Number / Dropdown / Rating.
   Light theme uses a SOFT indigo tint for the active/hover state
   (#eef4ff bg, #3157ff text, #cdd8ff border) — not a solid fill. Preserve
   that soft-tint treatment on dark so the filter row reads as part of the
   same design system, just darker. */
html[data-theme="dark"] .nfm-qw-filter {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-qw-filter.active,
html[data-theme="dark"] .nfm-qw-filter:hover {
    /* Soft indigo tint (~12% alpha of the #3157ff used in light) over the
       dark canvas — preserves the design intent of "lightly highlighted
       chip" without going to a loud solid fill. */
    background: rgba(49, 87, 255, 0.18) !important;
    color: #9eb4ff !important;
    border-color: rgba(49, 87, 255, 0.45) !important;
}

/* ---------------------------------------------------------------------------
   ONE shared card recipe across all three QW panels.
   The bank cards (left), section cards (centre), and list-item rows (right
   Question Configuration) should all read as the SAME kind of card — same
   background tone, same border tone, same neutral hover.

   BLEND recipe (not LIFT): light mode has no explicit card background, so
   the cards inherit the panel's `#fff` — definition comes from the border
   alone (#e9edf5 / #eef0f4). Mirror that in dark: card bg = panel bg
   (`--surface-1`) so the cards BLEND with the panel; the `--border-strong`
   outline does the visual separating. This is what the list-item-row card
   already does correctly in the Question Configuration panel — apply the
   same recipe to the bank and section cards so all three blend identically.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .nfm-qw-bank-card,
html[data-theme="dark"] .nfm-qw-section-card,
html[data-theme="dark"] .nfm-qw-section-list .nfm-qw-bank-card,
html[data-theme="dark"] .nfm-qw-section-item,
html[data-theme="dark"] .nfm-qw-list-item-row {
    background: var(--surface-1) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* Shared neutral hover — border lightens slightly toward white + shadow
   lift. No bg swap (the light theme `.nfm-qw-section-card:hover { background:
   #fcfdff }` rule would otherwise flash a near-white surface in dark mode).
   Rest border is already `--border-strong`, so hover bumps to a lighter
   grey so the edge change reads. */
html[data-theme="dark"] .nfm-qw-bank-card:hover,
html[data-theme="dark"] .nfm-qw-section-card:hover,
html[data-theme="dark"] .nfm-qw-section-list .nfm-qw-bank-card:hover,
html[data-theme="dark"] .nfm-qw-section-item:hover,
html[data-theme="dark"] .nfm-qw-list-item-row:hover {
    background: var(--surface-1) !important;
    border-color: #6c757d !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Selected section card — light theme uses a blue #3157ff border + soft
   blue halo. Keep the affordance but tint at dark-mode alpha so the
   "selected" state still pops against the surface-1 card. */
html[data-theme="dark"] .nfm-qw-section-card.selected {
    background: var(--surface-1) !important;
    border-color: #3157ff !important;
    box-shadow: 0 0 0 3px rgba(49, 87, 255, 0.25) !important;
}

/* Drag state — light uses opacity .55 + a soft shadow. Keep the same
   opacity recipe but ensure the surface stays surface-1 so the dragged
   card doesn't reveal a different colour underneath. */
html[data-theme="dark"] .nfm-qw-section-card.nfm-qw-dragging,
html[data-theme="dark"] .nfm-qw-bank-card.dragging {
    background: var(--surface-1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Title + description text colours for the bank-card / section-card shape. */
html[data-theme="dark"] .nfm-qw-card-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-card-desc {
    color: var(--text-muted) !important;
}

/* ---------------------------------------------------------------------------
   Card meta pills — the small chips inside each card's meta row.
   - `.nfm-type-pill` is the question type pill (DropDown / TextBox /
     StarRating / Number / Rating).  Light: #f2f4f7 bg, #344054 text.
   - `.nfm-soft-pill` is the warm-orange list-binding / multi-select pill
     ("Vendor Agreement Checklist", "Multi-select").  Light: #fff7ed bg,
     #b45309 text — a warm cream surface that disappears on dark.
   On dark, surface-3 is the right "subtle chip" tone (matches all the
   other count-pills / kicker pills in the workspace), and we tint the
   warm-orange palette at dark-mode alpha so the semantic colour reads
   without going to a near-white pill.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .nfm-type-pill {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-soft-pill {
    /* Warm orange tint at low alpha + lifted amber text. Same recipe as
       the warn-state pills used elsewhere in the design system. */
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

/* Status dot ("Active" / "Inactive" indicator next to each section-card
   title). Light uses #087443 (deep green) for active and #b54708 (deep
   amber) for inactive — both too dark to read on the surface-2 card. Lift
   to the lighter palette tokens so the colour-coding survives. */
html[data-theme="dark"] .nfm-status-dot.active {
    color: #34d399 !important;
}
html[data-theme="dark"] .nfm-status-dot.active::before {
    background: #12b76a !important;
}
html[data-theme="dark"] .nfm-status-dot.inactive {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .nfm-status-dot.inactive::before {
    background: #f79009 !important;
}

/* The "+" Add button next to each bank card. Light theme uses a soft blue
   pill (#eef4ff bg, #cdd8ff border, #3157ff icon). Keep that exact
   semantic blue but tint at dark-mode alpha so it reads on the card. */
html[data-theme="dark"] .nfm-qw-add-btn {
    background: rgba(49, 87, 255, 0.18) !important;
    border-color: rgba(49, 87, 255, 0.45) !important;
    color: #9eb4ff !important;
}
html[data-theme="dark"] .nfm-qw-add-btn:hover {
    background: rgba(49, 87, 255, 0.28) !important;
    border-color: rgba(49, 87, 255, 0.7) !important;
    color: #c4d2ff !important;
}

/* The numbered order badge at the left of each section-card (1, 2, 3 ...).
   In light mode it's a small white-blue pill; ensure it stays legible on
   the dark surface-2 card. */
html[data-theme="dark"] .nfm-qw-order-badge,
html[data-theme="dark"] .nfm-qw-section-card-index {
    background: rgba(49, 87, 255, 0.18) !important;
    color: #9eb4ff !important;
    border-color: rgba(49, 87, 255, 0.45) !important;
}

/* Reorder grip handle (the six-dot drag affordance at the left of each
   section card). */
html[data-theme="dark"] .nfm-qw-drag-handle,
html[data-theme="dark"] .nfm-qw-drag-handle i {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-qw-drag-handle:hover,
html[data-theme="dark"] .nfm-qw-drag-handle:hover i {
    color: var(--text-primary) !important;
}

/* Reorder hint banner — light theme uses a faint grey strip with a dark
   icon and text. */
html[data-theme="dark"] .nfm-qw-reorder-hint {
    background: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-qw-reorder-hint i {
    color: var(--text-muted) !important;
}

/* Auto-Save badge in the centre panel header. */
html[data-theme="dark"] .nfm-qw-autosave-badge {
    background: rgba(90, 208, 111, 0.12) !important;
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

/* Empty-state and loading text. */
html[data-theme="dark"] .nfm-qw-empty-state,
html[data-theme="dark"] .nfm-qw-config-empty,
html[data-theme="dark"] .nfm-qw-loading {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-qw-empty-state strong,
html[data-theme="dark"] .nfm-qw-config-empty strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-empty-state i,
html[data-theme="dark"] .nfm-qw-config-empty i {
    color: var(--text-muted) !important;
}

/* The drag-clone helper that floats during drag-and-drop. Light theme uses
   #fff with a #cdd8ff blue tint; on dark, lift to surface-2 with the same
   red-tinted glow used by the brand. */
html[data-theme="dark"] .nfm-qw-drag-clone {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6) !important;
}

/* Resize handles between panels — keep them invisible at rest but use the
   brand gradient on hover (already CSS, just needs the canvas to be dark). */
html[data-theme="dark"] .nfm-qw-resize-handle::before {
    background: transparent;
}

/* Workspace chip ("QUESTION WORKSPACE" kicker in the title row).
   Light theme uses a navy `#111827` chip with a `#dc2626` red dot accent —
   that pairing IS the brand language. Keep both colours verbatim; the navy
   sits a touch darker than `--surface-1` so the chip reads as a small
   "stamp" on the page header. The ::before red-dot rule lives in
   form-management.css and stays as-is. */
html[data-theme="dark"] .nfm-qw-chip {
    background: #111827 !important;
    color: #f9fafb !important;
    border-color: transparent !important;
}

/* Card action icon-buttons (edit / add inside each bank card).
   Light theme: #fff bg, #e5e7eb border, #475467 fg, hover lifts to #f8fafc.
   Dark: surface-2 chip with a neutral surface-3 lift on hover — matches
   .nfm-action-btn (§7) and the header buttons above. Danger variant keeps
   the red affordance (matches .nfm-qw-icon-btn.danger in light). */
html[data-theme="dark"] .nfm-qw-icon-btn {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-qw-icon-btn:hover {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .nfm-qw-icon-btn.danger {
    color: var(--color-danger) !important;
}
html[data-theme="dark"] .nfm-qw-icon-btn.danger:hover {
    background: rgba(255, 107, 107, 0.12) !important;
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

/* Question config panel form labels & inputs sit on .nfm-qw-config-panel —
   the .form-control + label rules in §3 already cover the inputs; here we
   restate the label colour with !important in case form-management.css
   wins specificity on a config-scoped selector. */
html[data-theme="dark"] .nfm-qw-config-panel label,
html[data-theme="dark"] #questionConfigPanel label {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #questionConfigPanel,
html[data-theme="dark"] #questionConfigPanel .nfm-qw-config-section {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Config-section eyebrow titles ("Question Details", "Form List", "List
   Items"). Light theme uses a small uppercase label that doesn't have its
   own dark-mode mapping — let it fall through to text-primary so it reads
   against the panel surface. */
html[data-theme="dark"] .nfm-qw-config-section-title {
    color: var(--text-muted) !important;
}

/* Inline switch tile (Multi Select / Required / Active toggles inside the
   Question Configuration panel). Light theme uses #fcfcfd bg + #eaecf0
   border + #111827 title + #667085 desc — flip the surface and re-tint
   the text so the tile reads as one of the dark cards in the panel,
   matching the .nfm-fr-section / .nfm-qw-bank-card recipe. */
html[data-theme="dark"] .nfm-inline-switch {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-inline-switch-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-inline-switch-description {
    color: var(--text-muted) !important;
}

/* "New Form" / "New Section" configuration dialogs.
   Light theme paints each section card with a bright white background
   (#fff) and dark text (#111827 / #344054), which lands as a glaring
   white panel on top of the dark Syncfusion dialog body in dark mode
   — and the meta header text disappears because it's near-black on
   near-black. Flip the card surface to surface-1 (same recipe as
   .nfm-fr-section) and re-tint the title/subtitle tokens so the whole
   dialog reads as one cohesive dark surface. The .e-dialog wrapper
   itself is already mapped elsewhere; these rules only restyle the
   page-authored content blocks inside it. */
html[data-theme="dark"] .nfm-config-meta-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-config-meta-subtitle {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-config-section {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-config-section-title {
    color: var(--text-muted) !important;
}

/* Read-only field tile (e.g. "Form Type: Compliance" inside the Section
   configuration dialog — the section inherits its form type from the parent
   form, so it renders as a static labelled pill rather than a picker). Light
   theme uses #f8fafc bg + #d0d5dd border + #667085 label + #111827 value —
   all four tokens read as a glowing white chip on the dark dialog. Flip the
   surface to surface-2 (same recipe as the inline switch tile next to it)
   and re-tint the label/value so it sits flush with the surrounding cards. */
html[data-theme="dark"] .nfm-readonly-field {
    background: var(--surface-2) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .nfm-readonly-field span {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .nfm-readonly-field strong {
    color: var(--text-primary) !important;
}

/* List Items rows — surface + border + hover are covered by the shared
   bank-card / section-card / list-item-row rule above so all three card
   shapes in the workspace use one recipe. Only the inner text tokens
   (<strong> for the value, <span> for the order/score meta) need their
   own dark mapping here. */
html[data-theme="dark"] .nfm-qw-list-item-row strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-list-item-row span {
    color: var(--text-muted) !important;
}

/* Empty-state placeholder shown before a Form List is picked
   ("Select a Form List to view items."). Light uses a dashed #d0d5dd
   border on white; flip to a dashed border-strong on transparent so the
   placeholder reads as a quiet hint, not a bright outlined box. */
html[data-theme="dark"] .nfm-qw-empty-inline {
    background: transparent !important;
    border-color: var(--border-strong) !important;
    color: var(--text-muted) !important;
}

/* Inline "Add Item" button — sits to the right of the LIST ITEMS eyebrow.
   It already inherits the right styling from .nfm-qw-header-btn in many
   places, but on this surface it lands as a generic button. Re-tint to
   the surface-2 chip pattern used elsewhere in the panel. */
html[data-theme="dark"] #addFormListItemBtn,
html[data-theme="dark"] .nfm-qw-list-header button {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] #addFormListItemBtn:hover,
html[data-theme="dark"] .nfm-qw-list-header button:hover {
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
}

/* The pencil "edit" button at the right of each list item row uses the
   shared .nfm-qw-icon-btn class so it's already covered above, but the
   light-theme markup also includes a few inline <button class="…">
   variants; restate the surface here to defeat any one-off rule. */
html[data-theme="dark"] .nfm-qw-list-item-row .nfm-qw-icon-btn {
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .nfm-qw-list-item-row .nfm-qw-icon-btn:hover {
    background: var(--surface-1) !important;
}

/* ----------------------------------------------------------------------------
   Collapsed-sidebar gap closer (DARK MODE only).
   custom.css:778-787 ships:
       .sidebar.sidebar-collapsed { width: 70px }
       .content.sidebar-collapsed { width: calc(100% - 80px); margin-left: 80px }
   The sidebar is 70px wide but the content starts at 80px — a 10px strip
   sits between them. Light mode hides this with white-on-white; dark mode
   exposes the bg-primary strip running between the surface-1 sidebar and
   the content area. Slide the content 10px left so the two surfaces meet
   exactly. Same `min-width: 992px` breakpoint custom.css uses for the
   layout so mobile is unaffected.
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
    html[data-theme="dark"] .content.sidebar-collapsed {
        width: calc(100% - 70px) !important;
        margin-left: 70px !important;
    }
}

/* ----------------------------------------------------------------------------
   Sidebar left-edge stripe — red → white in dark mode.
   custom.css:1270-1286 paints `#sidebar.sidebar::before` as a red→deep-ink
   gradient. On dark mode the ink end is the same tone as the canvas so the
   stripe just fades into nothing. Flip the trailing two stops from
   `--nfm-ink` to white so the gradient is visible end-to-end on dark.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] #sidebar.sidebar::before {
    background: linear-gradient(
        180deg,
        var(--nfm-red) 0%,
        var(--nfm-red) 35%,
        #ffffff 75%,
        #ffffff 100%
    ) !important;
}

/* ----------------------------------------------------------------------------
   Top navbar bottom-edge belt — red → white in dark mode.
   custom.css:1331-1342 paints `nav.dashminheader` / `.content .navbar.dashminheader`
   with `border-image: linear-gradient(90deg, red 0%, red 35%, ink 75%, ink 100%)`
   — the horizontal 90°-rotated mirror of the sidebar stripe. Same fix:
   swap the trailing two `--nfm-ink` stops to white so the belt mirrors
   the sidebar gradient and reads against the dark canvas.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] nav.dashminheader,
html[data-theme="dark"] .content .navbar.dashminheader {
    border-image: linear-gradient(
        90deg,
        var(--nfm-red) 0%,
        var(--nfm-red) 35%,
        #ffffff 75%,
        #ffffff 100%
    ) 1 !important;
}

/* ----------------------------------------------------------------------------
   Notifications / Chats dropdown header — title text + "Mark all as read"
   button readability in dark mode.
   The markup uses `.notif-markall` / `.chat-markall` (no hyphen between
   "mark" and "all") — older theme-dark.css rules targeted the wrong class
   (`.notif-mark-all`) and never landed. Restate against the correct class
   names so the action reads brightly on the dark dropdown surface, plus
   bump the title text colour explicitly for the same reason.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] #nav-notif-body .fw-semibold,
html[data-theme="dark"] #nav-chat-body .fw-semibold {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .notif-markall,
html[data-theme="dark"] .chat-markall {
    color: var(--color-action) !important;
}
html[data-theme="dark"] .notif-markall:hover,
html[data-theme="dark"] .chat-markall:hover {
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------------------------
   Syncfusion grid cell anchors — PO Number, QC(s) count, and any other
   record-link column templates render an `<a>` with either a `.po-link` /
   `.qc-count-link` class or a hard-coded Bootstrap blue (#0d6efd) in an
   inline style. On the dark canvas (--bg-primary #212529) that blue collapses
   into the background — the PO Number column reads as empty. Force grid
   anchors onto the dark-mode action colour, with !important so they beat the
   inline `style="color: #0d6efd"` used by `.qc-count-link`.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] .e-grid .e-rowcell a,
html[data-theme="dark"] .e-grid .e-rowcell a:visited,
html[data-theme="dark"] .e-grid a.po-link,
html[data-theme="dark"] .e-grid a.qc-count-link {
    color: var(--color-action) !important;
    text-decoration: underline;
}
html[data-theme="dark"] .e-grid .e-rowcell a:hover,
html[data-theme="dark"] .e-grid a.po-link:hover,
html[data-theme="dark"] .e-grid a.qc-count-link:hover {
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------------------------
   Syncfusion Schedule (calendar) — month view used by the QC Factory Center
   scheduler. Two leakage points in dark mode:
     1. The JS `renderCell` callback paints an inline
        `border: 1px solid #e5e7eb` (Tailwind gray-200) on every work-cell and
        date-header. That inline border wins over the EJ2 dark theme and reads
        as gray lattice over the canvas. Must override with !important.
     2. The EJ2 dark theme leaves the outer container, table wrap, and
        header row on a slightly lighter neutral than --bg-primary, so the
        calendar reads as a gray block floating on the dark canvas. Flatten
        every surface onto our palette.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] .e-schedule,
html[data-theme="dark"] .e-schedule .e-table-container,
html[data-theme="dark"] .e-schedule .e-content-wrap,
html[data-theme="dark"] .e-schedule .e-month-view,
html[data-theme="dark"] .e-schedule .e-month-agenda-view,
html[data-theme="dark"] .e-schedule .e-outer-wrap,
html[data-theme="dark"] .e-schedule .e-schedule-table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .e-schedule .e-work-cells,
html[data-theme="dark"] .e-schedule .e-date-header-wrap .e-header-cells,
html[data-theme="dark"] .e-schedule .e-header-row .e-header-cells {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    /* Beat the inline `border: 1px solid #e5e7eb` set by renderCell in
       qualityControlHeader-scheduler.js — otherwise a gray lattice paints
       across the calendar in dark mode. */
    border-color: var(--border-subtle) !important;
}
html[data-theme="dark"] .e-schedule .e-other-month,
html[data-theme="dark"] .e-schedule .e-work-cells.e-other-month {
    background-color: var(--surface-1) !important;
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .e-schedule .e-toolbar,
html[data-theme="dark"] .e-schedule .e-schedule-toolbar,
html[data-theme="dark"] .e-schedule .e-header-toolbar {
    background-color: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .e-schedule .e-date-header,
html[data-theme="dark"] .e-schedule .e-month-header {
    color: var(--text-primary) !important;
}
/* Interactive states. Without these, hover and selection on month cells are
   invisible because every cell paints --bg-primary. */
html[data-theme="dark"] .e-schedule .e-work-cells:hover,
html[data-theme="dark"] .e-schedule .e-month-cells:hover {
    background-color: var(--surface-2) !important;
    cursor: pointer;
}
/* Today indicator — the Syncfusion default is a small blue pill on the date
   number. Brighten the surrounding cell so "today" reads even before the user
   picks something. */
html[data-theme="dark"] .e-schedule .e-current-date .e-date-header,
html[data-theme="dark"] .e-schedule .e-work-cells.e-current-date {
    color: var(--color-action) !important;
}
/* QC-booking custom selection class painted by highlightSelectedDate() — keep
   the green theme but bump the border so it reads brightly against the dark
   canvas. The inline `background-color: #28a74588` (~50% green) is the same
   in light and dark, so we just strengthen the outline. */
html[data-theme="dark"] .e-schedule .e-work-cells.selected-inspection-date,
html[data-theme="dark"] .selected-inspection-date {
    background-color: rgba(40, 167, 69, 0.45) !important;
    border: 2px solid #34d399 !important;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.6) !important;
    color: var(--text-primary) !important;
}
/* Booking-disabled (past) dates — the inline rule paints #f9fafb (near-white)
   which is too bright in dark mode. Re-tint onto a muted surface so they read
   as inert without flashing. */
html[data-theme="dark"] .e-schedule .e-work-cells.booking-disabled-date,
html[data-theme="dark"] .booking-disabled-date {
    background-color: var(--surface-1) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-subtle) !important;
    opacity: 0.6;
}
/* Active selection (browser focus / EJ2 selected) — give EJ2's own selection
   class a visible ring so a clicked cell shows feedback even before the
   custom .selected-inspection-date is added. */
html[data-theme="dark"] .e-schedule .e-work-cells.e-selected-cell,
html[data-theme="dark"] .e-schedule .e-work-cells.e-selected {
    background-color: var(--surface-3) !important;
    outline: 2px solid var(--color-action) !important;
    outline-offset: -2px;
}

/* ----------------------------------------------------------------------------
   Login / auth pages — belt-and-suspenders. `_NucleusLayout` already forces
   anonymous pages onto resolvedTheme="light"; this rule is a final guard in
   case a stale data-theme="dark" attribute slips through (private-mode tab
   where the pre-paint script throws, mid-deploy state, etc.) so the auth
   surfaces never paint dark. Scoped to body.minimal-auth-light so it only
   fires on pages that opt in (Login / Register / AccessDenied / Error /
   InstructionManual).
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] body.minimal-auth-light,
html[data-theme="dark"] body.minimal-auth-light .content,
html[data-theme="dark"] body.minimal-auth-light .container-fluid {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ----------------------------------------------------------------------------
   Factory Center dashboard (QualityControlDashboard.cshtml) — the "Grid View"
   and "Calendar View" collapsible sections plus their host container ship
   hard-coded light colors (#f8f9fa / #e9ecef / #dee2e6 / white) in an inline
   <style> block on the page. Override them onto the dark palette here so the
   wrapper, the section headers, and the section content surfaces all match.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] .combined-view-container {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] #gridSection .section-header,
html[data-theme="dark"] #schedulerSection .section-header,
html[data-theme="dark"] .combined-view-container .section-header {
    background: var(--surface-1) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #gridSection .section-header:hover,
html[data-theme="dark"] #schedulerSection .section-header:hover,
html[data-theme="dark"] .combined-view-container .section-header:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .combined-view-container .section-header .section-title,
html[data-theme="dark"] .combined-view-container .section-header .collapse-icon {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #gridSection .section-content,
html[data-theme="dark"] #schedulerSection .section-content,
html[data-theme="dark"] .combined-view-container .section-content {
    background: var(--bg-primary) !important;
    border-color: var(--border-subtle) !important;
}
/* Side pane host on the QC dashboard splitter — hard-coded `background: #fff`
   on `#qualityControlHeaderSplitterSidepane` and the splitter's 2nd child. */
html[data-theme="dark"] #qualityControlHeaderSplitterSidepane,
html[data-theme="dark"] #qualityControlDashboardSplitter > div:nth-child(2) {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* ============================================================================
 * 14. User Management — literal-palette stylesheets.
 *     user-side-pane.css, role-details.css, permission-details.css and
 *     role-access-configuration.css hard-code a light palette (#fff surfaces,
 *     #212529/#6c757d/#9ca3af text, #e9ecef borders, #185FA5 blue accents,
 *     green/red/amber semantic tints) that doesn't resolve through any CSS
 *     variable — so the smd-theme.css dark-token block (which flips the fully
 *     tokenised RoleConfiguration page) can't reach them. Re-paint each surface,
 *     text token, border and semantic chip here. `html[data-theme="dark"] .class`
 *     (specificity 0,2,x) outranks the page rules' bare `.class` (0,1,x), so no
 *     !important is needed except where the page rule is itself !important.
 * ============================================================================ */

/* ---- Side-pane shell (UserSidePane + RoleSidePane) ---- */
html[data-theme="dark"] .side-pane-root,
html[data-theme="dark"] #permissionDetailsRoot .pd-header,
html[data-theme="dark"] .pd-card,
html[data-theme="dark"] .feature-block,
html[data-theme="dark"] .rc-grid-section,
html[data-theme="dark"] .rc-detail-header,
html[data-theme="dark"] .rc-info-card {
    background: var(--surface-1);
    color: var(--text-primary);
}

/* Loading screen — opaque cover matches the dark pane surface. */
html[data-theme="dark"] .side-pane-loading {
    background: var(--surface-1);
}

html[data-theme="dark"] .side-pane-loading-spinner {
    color: var(--color-action, #4dabf7);
}

html[data-theme="dark"] .side-pane-loading-text {
    color: var(--text-muted);
}

html[data-theme="dark"] .side-pane-header,
html[data-theme="dark"] .side-pane-footer,
html[data-theme="dark"] .pd-header,
html[data-theme="dark"] .pd-card,
html[data-theme="dark"] .feature-block,
html[data-theme="dark"] .rc-grid-section,
html[data-theme="dark"] .rc-detail-header,
html[data-theme="dark"] .rc-info-card {
    border-color: var(--border-subtle);
}

/* Raised sections / detail-section canvas. */
html[data-theme="dark"] .pane-section,
html[data-theme="dark"] .permissions-group-header,
html[data-theme="dark"] .rc-detail-section {
    background: var(--surface-2);
}

html[data-theme="dark"] .permissions-group-header:hover {
    background: var(--surface-3);
}

html[data-theme="dark"] .permissions-group {
    border-color: var(--border-subtle);
}

html[data-theme="dark"] .permissions-group-count {
    background: var(--surface-3);
    color: var(--text-primary);
}

html[data-theme="dark"] .permissions-group-count.is-zero {
    background: var(--surface-3);
    color: var(--text-muted);
}

/* ---- Text tokens ---- */
html[data-theme="dark"] .user-full-name,
html[data-theme="dark"] .field-value,
html[data-theme="dark"] .pref-title,
html[data-theme="dark"] .pd-user-name,
html[data-theme="dark"] .pd-section-title,
html[data-theme="dark"] .feature-name,
html[data-theme="dark"] .rc-section-title,
html[data-theme="dark"] .rc-detail-name,
html[data-theme="dark"] .rc-info-value {
    color: var(--text-primary);
}

html[data-theme="dark"] .section-label,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .pref-hint,
html[data-theme="dark"] .pd-user-email,
html[data-theme="dark"] .pd-section-subtitle,
html[data-theme="dark"] .pd-label,
html[data-theme="dark"] .pd-loading,
html[data-theme="dark"] .feature-type-title,
html[data-theme="dark"] .claim-group-title,
html[data-theme="dark"] .permissions-chevron,
html[data-theme="dark"] .rc-section-subtitle,
html[data-theme="dark"] .rc-detail-meta,
html[data-theme="dark"] .rc-info-label,
html[data-theme="dark"] .rc-info-desc,
html[data-theme="dark"] .rc-empty-state,
html[data-theme="dark"] .rc-empty-text,
html[data-theme="dark"] .rc-loading {
    color: var(--text-muted);
}

html[data-theme="dark"] .field-value.empty,
html[data-theme="dark"] .chip-empty {
    color: var(--text-muted);
}

/* ---- Preferences toggle rows ---- */
html[data-theme="dark"] .pref-row {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="dark"] .pref-state--on {
    background: rgba(90, 208, 111, 0.16);
    color: #8fe0a0;
}

html[data-theme="dark"] .pref-state--off {
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-muted);
}

/* ---- Avatar pill (blue tint → translucent action blue) ---- */
html[data-theme="dark"] .avatar-circle {
    background: rgba(77, 171, 247, 0.20);
    color: #9ecbff;
}

/* ---- Chips ---- */
html[data-theme="dark"] .chip-role {
    background: rgba(77, 171, 247, 0.14);
    color: #9ecbff;
    border-color: rgba(77, 171, 247, 0.28);
}

/* Permission tags: surface-matched chip (one step lifted off the pane) + red
   dot, so a grid of them blends with the dark canvas instead of reading as
   black holes. */
html[data-theme="dark"] .chip-claim {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* In-chip permission description (revealed on hover). */
html[data-theme="dark"] .chip-desc-text {
    color: var(--text-muted);
}

html[data-theme="dark"] .chip-remove {
    color: #9ecbff;
}

/* ---- Status chip (semantic: green = active, grey = inactive) ---- */
html[data-theme="dark"] .status-badge.active {
    background: rgba(34, 197, 94, 0.16);
    color: #6ee7a0;
}

html[data-theme="dark"] .status-badge.inactive {
    background: var(--surface-3);
    color: var(--text-muted);
}

/* ---- Header action buttons ---- */
/* Primary (Edit / Save): light solid fill so the CTA stays high-contrast on the
   dark canvas (a dark-ink fill would vanish into the surface). */
html[data-theme="dark"] .header-actions #spEditBtn,
html[data-theme="dark"] .header-actions #spSaveBtn {
    background: #f9fafb;
    border-color: #f9fafb;
    color: #111827;
}

    html[data-theme="dark"] .header-actions #spEditBtn:hover,
    html[data-theme="dark"] .header-actions #spSaveBtn:hover {
        background: #e5e7eb;
        border-color: #e5e7eb;
        color: #111827;
    }

/* Secondary (Reset password / Cancel): defined surface outline at rest. */
html[data-theme="dark"] .header-actions #spResetPasswordBtn,
html[data-theme="dark"] .header-actions #spCancelBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

    html[data-theme="dark"] .header-actions #spResetPasswordBtn:hover,
    html[data-theme="dark"] .header-actions #spCancelBtn:hover {
        background: var(--surface-2);
        border-color: var(--nfm-red, #dc2626);
        color: #f3a3a3;
    }

/* Role Access (#rc*) and User Access (#pd*) Save/Discard mirror the profile
   header-action buttons above so all three permission surfaces match on dark. */
html[data-theme="dark"] #rcSaveBtn,
html[data-theme="dark"] #pdSaveBtn {
    background: #f9fafb;
    border-color: #f9fafb;
    color: #111827;
}

    html[data-theme="dark"] #rcSaveBtn:hover:not(:disabled),
    html[data-theme="dark"] #pdSaveBtn:hover:not(:disabled) {
        background: #e5e7eb;
        border-color: #e5e7eb;
        color: #111827;
    }

html[data-theme="dark"] #rcDiscardBtn,
html[data-theme="dark"] #pdDiscardBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

    html[data-theme="dark"] #rcDiscardBtn:hover:not(:disabled),
    html[data-theme="dark"] #pdDiscardBtn:hover:not(:disabled) {
        background: var(--surface-2);
        border-color: var(--nfm-red, #dc2626);
        color: #f3a3a3;
    }

/* Role Details (#rd*) Edit/Save/Cancel mirror the profile header-action buttons
   so the role detail side pane matches on dark too. */
html[data-theme="dark"] .header-actions #rdEditBtn,
html[data-theme="dark"] .header-actions #rdSaveBtn {
    background: #f9fafb;
    border-color: #f9fafb;
    color: #111827;
}

    html[data-theme="dark"] .header-actions #rdEditBtn:hover,
    html[data-theme="dark"] .header-actions #rdSaveBtn:hover {
        background: #e5e7eb;
        border-color: #e5e7eb;
        color: #111827;
    }

html[data-theme="dark"] .header-actions #rdCancelBtn {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

    html[data-theme="dark"] .header-actions #rdCancelBtn:hover {
        background: var(--surface-2);
        border-color: var(--nfm-red, #dc2626);
        color: #f3a3a3;
    }

/* ---- Detail-page action buttons (.tt-btn — Ticket / Product / Catalog /
   Sell-Out Agreement & Claim) ----
   Mirror the header-action theme on the dark canvas: a dark-ink fill would
   vanish into the surface, so the primary (Edit / Update) buttons use a light
   solid fill, and Cancel keeps the surface outline that turns red on hover.
   Doubled .tt-btn.tt-btn specificity + !important to beat the light-mode rule. */
html[data-theme="dark"] .tt-btn.tt-btn-edit,
html[data-theme="dark"] .tt-btn.tt-btn-save {
    background-color: #f9fafb !important;
    border-color: #f9fafb !important;
    color: #111827 !important;
}

    html[data-theme="dark"] .tt-btn.tt-btn-edit:hover,
    html[data-theme="dark"] .tt-btn.tt-btn-save:hover {
        background-color: #e5e7eb !important;
        border-color: #e5e7eb !important;
        color: #111827 !important;
    }

html[data-theme="dark"] .tt-btn.tt-btn-cancel {
    background-color: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

    html[data-theme="dark"] .tt-btn.tt-btn-cancel:hover {
        background-color: var(--surface-2) !important;
        border-color: var(--nfm-red, #dc2626) !important;
        color: #f3a3a3 !important;
    }

/* ---- Claim toggles (permission-details + role-access-configuration) ---- */
html[data-theme="dark"] .claim-toggle {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html[data-theme="dark"] .claim-toggle:hover {
    border-color: var(--color-action);
    color: var(--color-action);
}

html[data-theme="dark"] .claim-toggle.active,
html[data-theme="dark"] .claim-toggle.read-claim.active {
    background: rgba(77, 171, 247, 0.18);
    border-color: var(--color-action);
    color: #9ecbff;
}

html[data-theme="dark"] .claim-toggle.pending-add {
    background: rgba(90, 208, 111, 0.16);
    border-color: var(--color-success);
    color: #8fe0a0;
}

html[data-theme="dark"] .claim-toggle.pending-remove {
    background: rgba(255, 107, 107, 0.16);
    border-color: var(--color-danger);
    color: #ff9b9b;
}

/* ---- Inline toasts (permission-details) ---- */
html[data-theme="dark"] .pd-toast-inline.success {
    background: rgba(90, 208, 111, 0.16);
    color: #8fe0a0;
}

html[data-theme="dark"] .pd-toast-inline.danger {
    background: rgba(255, 107, 107, 0.16);
    color: #ff9b9b;
}

html[data-theme="dark"] .pd-divider {
    border-top-color: var(--border-subtle);
}

/* ---- Accent links / select-all / feature toggles ---- */
html[data-theme="dark"] .feature-select-all,
html[data-theme="dark"] .feature-type-section .feature-name {
    color: var(--color-action);
}

html[data-theme="dark"] .feature-access-toggle input[type="checkbox"] {
    accent-color: var(--color-action);
}

/* ---- Change indicator (amber) ---- */
html[data-theme="dark"] .rc-change-badge {
    background: rgba(224, 201, 140, 0.18);
    color: #e0c98c;
}

/* ---- Empty / warning amber state (role-access #fff3cd block) ---- */
html[data-theme="dark"] .rc-empty-icon {
    background: var(--surface-3);
    color: var(--text-muted);
}