/*
 * Dark mode overrides for surfaces the theme in stardust.css does not reach.
 *
 * Load this LAST, after every other stylesheet, so these rules win without
 * needing !important on everything. Only the exceptions below use !important,
 * and only where the base rule already does.
 *
 * Everything is scoped under .dark-mode so light mode is untouched.
 *
 * Palette matches the values already used in stardust.css (#1A1A1A page,
 * #131516 sunken panels, #A4A4A4 text) and adds the raised/border tones that
 * were missing. Contrast on the page background:
 *   #E4E4E4 ~13:1   #A4A4A4 ~6.4:1   #8A8A8A ~4.6:1   -- all pass WCAG AA.
 */

:root {
    --syns-dark-bg: #1A1A1A;
    --syns-dark-sunken: #131516;
    --syns-dark-raised: #222426;
    --syns-dark-raised-hi: #2C2F31;
    --syns-dark-border: #3A3A3A;
    --syns-dark-text: #A4A4A4;
    --syns-dark-text-strong: #E4E4E4;
    --syns-dark-text-muted: #8A8A8A;
    --syns-dark-accent: #1BAAB9;
}

/* ------------------------------------------------------------------ *
 * Datepickers
 *
 * Both libraries are loaded: jQuery UI (.ui-datepicker) and
 * bootstrap-datepicker (.datepicker), with bootstrap-datepicker.js loaded
 * last so it owns $.fn.datepicker. Older screens still reach jQuery UI's
 * directly, so both are styled. Datepickers appear on ~155 views, and both
 * render into a detached div at the end of <body> -- outside .main -- so
 * they need the class on <html> to inherit the theme.
 * ------------------------------------------------------------------ */

.dark-mode .ui-datepicker,
.dark-mode .datepicker,
.dark-mode .datepicker-dropdown {
    background: var(--syns-dark-raised);
    border: 1px solid var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .ui-datepicker .ui-datepicker-header,
.dark-mode .datepicker .datepicker-switch,
.dark-mode .datepicker thead tr:first-child th {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text-strong);
}

.dark-mode .ui-datepicker .ui-datepicker-title,
.dark-mode .ui-datepicker th,
.dark-mode .datepicker th {
    color: var(--syns-dark-text-strong);
}

.dark-mode .ui-datepicker td span,
.dark-mode .ui-datepicker td a,
.dark-mode .datepicker td,
.dark-mode .datepicker td.day {
    background: transparent;
    border: none;
    color: var(--syns-dark-text);
}

.dark-mode .ui-datepicker td a:hover,
.dark-mode .datepicker td.day:hover,
.dark-mode .datepicker .datepicker-switch:hover,
.dark-mode .datepicker .prev:hover,
.dark-mode .datepicker .next:hover {
    background: var(--syns-dark-raised-hi);
    color: var(--syns-dark-text-strong);
}

/* Days spilling in from the neighbouring month, and disabled days. */
.dark-mode .datepicker td.old,
.dark-mode .datepicker td.new,
.dark-mode .ui-datepicker .ui-state-disabled {
    color: var(--syns-dark-text-muted);
}

.dark-mode .ui-datepicker .ui-state-active,
.dark-mode .ui-datepicker .ui-state-highlight,
.dark-mode .datepicker td.active,
.dark-mode .datepicker td.active.day,
.dark-mode .datepicker td.today {
    background: var(--syns-dark-accent);
    color: #FFFFFF;
}

/* The month/year selects in jQuery UI's header sit on the sunken strip. */
.dark-mode .ui-datepicker select.ui-datepicker-month,
.dark-mode .ui-datepicker select.ui-datepicker-year {
    background: var(--syns-dark-raised);
    border: 1px solid var(--syns-dark-border);
    color: var(--syns-dark-text-strong);
}

/* ------------------------------------------------------------------ *
 * Summernote (rich-text editor -- 3 views)
 * ------------------------------------------------------------------ */

.dark-mode .note-editor,
.dark-mode .note-editor.note-frame,
.dark-mode .note-editor .note-editing-area .note-editable {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .note-toolbar,
.dark-mode .note-editor .note-statusbar {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
}

.dark-mode .note-toolbar .note-btn,
.dark-mode .note-btn {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .note-toolbar .note-btn:hover,
.dark-mode .note-btn:hover {
    background: var(--syns-dark-raised-hi);
    color: var(--syns-dark-text-strong);
}

.dark-mode .note-dropdown-menu {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

/* The editable area is a real contenteditable, so authored content keeps its
 * own colours. Only the placeholder needs forcing. */
.dark-mode .note-placeholder {
    color: var(--syns-dark-text-muted);
}

/* ------------------------------------------------------------------ *
 * Dropzone (file upload -- 4 views)
 * ------------------------------------------------------------------ */

.dark-mode .dropzone,
.dark-mode .dropzone.dz-clickable {
    background: var(--syns-dark-sunken);
    border: 2px dashed var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .dropzone:hover,
.dark-mode .dropzone.dz-drag-hover {
    border-color: var(--syns-dark-accent);
}

.dark-mode .dropzone .dz-message,
.dark-mode .dropzone .dz-preview .dz-filename span,
.dark-mode .dropzone .dz-preview .dz-size span {
    color: var(--syns-dark-text);
    background: transparent;
}

.dark-mode .dropzone .dz-preview .dz-image,
.dark-mode .dropzone .dz-preview .dz-details {
    background: var(--syns-dark-raised);
    color: var(--syns-dark-text);
}

/* ------------------------------------------------------------------ *
 * Workflow Management (WorkflowManagement.css -- 5 views, no dark rules)
 * ------------------------------------------------------------------ */

.dark-mode .wfm-panel,
.dark-mode .wfm-step,
.dark-mode .wfm-level,
.dark-mode .wfm-level-head,
.dark-mode .wfm-level-body,
.dark-mode .wfm-metric,
.dark-mode .wfm-duallist,
.dark-mode .wfm-members {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .wfm-kv-label,
.dark-mode .wfm-metric-label,
.dark-mode .wfm-field label {
    color: var(--syns-dark-text-muted);
}

.dark-mode .wfm-kv-value,
.dark-mode .wfm-step.is-current {
    color: var(--syns-dark-text-strong);
}

.dark-mode .wfm-step.is-current {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-accent);
}

.dark-mode .wfm-empty,
.dark-mode .wfm-badge-empty,
.dark-mode .wfm-inactive-member {
    color: var(--syns-dark-text-muted);
    background: var(--syns-dark-sunken);
}

/* Status pills keep their hue but need dark-appropriate backgrounds --
 * the light tints (#DCEFDD etc.) are unreadable against dark text. */
.dark-mode .wfm-pill-active {
    background: rgba(56, 142, 60, 0.22);
    color: #7FD184;
}

.dark-mode .wfm-pill-inactive {
    background: rgba(138, 138, 138, 0.20);
    color: var(--syns-dark-text);
}

.dark-mode .wfm-pill-draft {
    background: rgba(2, 136, 209, 0.22);
    color: #6FC5F5;
}

.dark-mode .wfm-chip {
    background: rgba(27, 170, 185, 0.20);
    color: #5FD4E0;
}

.dark-mode .wfm-error {
    color: #F27A7A;
}

.dark-mode .wfm-input-error {
    border-color: #F27A7A !important;
}

/* The warning callout: light amber on dark is illegible, so invert it. */
.dark-mode .wfm-note {
    background: rgba(251, 192, 61, 0.15);
    border-color: rgba(251, 192, 61, 0.45);
    color: #F0CE84;
}

/* ------------------------------------------------------------------ *
 * old.css -- loaded globally from Site.Master and _Layout.cshtml with no
 * dark rules of its own. Only the colour-bearing rules need overriding;
 * most of that file is sizing.
 * ------------------------------------------------------------------ */

.dark-mode .Search-Title-Header {
    color: var(--syns-dark-text-strong);
}

.dark-mode .tab a {
    color: var(--syns-dark-text);
}

.dark-mode .form-control {
    background-color: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .form-control:focus {
    border-color: var(--syns-dark-accent);
    color: var(--syns-dark-text-strong);
}

.dark-mode .form-control::-webkit-input-placeholder { color: var(--syns-dark-text-muted); }
.dark-mode .form-control::-moz-placeholder          { color: var(--syns-dark-text-muted); }
.dark-mode .form-control:-ms-input-placeholder      { color: var(--syns-dark-text-muted); }

/* Disabled/readonly inputs must stay visibly distinct from editable ones. */
.dark-mode .form-control[disabled],
.dark-mode .form-control[readonly] {
    background-color: var(--syns-dark-bg);
    color: var(--syns-dark-text-muted);
}

.dark-mode .table-responsive,
.dark-mode .result_table_col {
    color: var(--syns-dark-text);
}

/* Alerts are position:fixed banners over the page, so they need a solid
 * background rather than inheriting whatever is behind them. */
.dark-mode .alert {
    color: var(--syns-dark-text-strong);
}

.dark-mode .alert-danger  { background-color: #4A1F1F; border-color: #6E2C2C; }
.dark-mode .alert-warning { background-color: #4A3A16; border-color: #6E5722; }
.dark-mode .alert-info    { background-color: #16374A; border-color: #22536E; }
.dark-mode .alert-success { background-color: #1D4022; border-color: #2C6134; }

.dark-mode .badge-danger  { background-color: #6E2C2C; color: #FFFFFF; }
.dark-mode .badge-warning { background-color: #6E5722; color: #FFFFFF; }
.dark-mode .badge-success { background-color: #2C6134; color: #FFFFFF; }
.dark-mode .badge-info    { background-color: #22536E; color: #FFFFFF; }
.dark-mode .badge-inverse { background-color: var(--syns-dark-raised-hi); color: var(--syns-dark-text-strong); }

/* ------------------------------------------------------------------ *
 * Login and portal shells
 *
 * These layouts have no .main/.sidebar, so the dark class only lands on
 * <html> and <body>. Their wrappers need explicit backgrounds or they
 * stay white over a dark page.
 * ------------------------------------------------------------------ */

.dark-mode #body,
.dark-mode .content-wrapper,
.dark-mode .login-content-wrapper,
.dark-mode .main-content {
    background-color: var(--syns-dark-bg);
    color: var(--syns-dark-text);
}

.dark-mode .login-block {
    background-color: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode label {
    color: var(--syns-dark-text);
}

.dark-mode a {
    color: #5FD4E0;
}

.dark-mode hr {
    border-color: var(--syns-dark-border);
}

/* ------------------------------------------------------------------ *
 * Notification bell and dropdown  (base styles in notification.css)
 *
 * The bell now DOES need dark rules. It used to sit inside
 * .new-related-bar, which stardust.css repaints #62C4D5 with #1A1A1A
 * text in dark mode, so currentColor carried it for free. In the app bar
 * its background is the page itself, and notification.css sets the glyph
 * to #464646 -- which is all but invisible on the #1A1A1A page. So the
 * rest colour, the hover fill and the badge ring are all flipped here.
 * The open state stays #1BAAB9: that teal is legible on both.
 *
 * These selectors are id- and class-based rather than the inline-style
 * matching further down, so they do not need the @media screen scope
 * that block has; the panel is a transient popover and never prints.
 * ------------------------------------------------------------------ */

/* The app bar is transparent in both modes -- it only positions the bell --
   so there is nothing to repaint on .notif-appbar itself. */

.dark-mode .notif-bell {
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-bell:hover,
.dark-mode .notif-bell:focus {
    background: #3E3E3E;
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-bell[aria-expanded="true"],
.dark-mode .notif-bell[aria-expanded="true"]:hover,
.dark-mode .notif-bell[aria-expanded="true"]:focus {
    color: #62C4D5;
}

/* The ring is a cutout from whatever is behind the badge, so in dark mode
   it has to be the dark page background, not white. */
.dark-mode .notif-badge {
    border-color: #1A1A1A;
}

.dark-mode .notif-panel {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text-strong);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

.dark-mode .notif-panel__hd {
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-panel__x {
    color: var(--syns-dark-text-muted);
}

.dark-mode .notif-panel__x:hover {
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-row {
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-row:hover,
.dark-mode .notif-row:focus {
    background: var(--syns-dark-raised-hi);
    color: var(--syns-dark-text-strong);
}

/* Unread rows: the light theme tints them teal, which at this lightness
 * would be brighter than the panel. Use the sunken tone plus the accent
 * dot instead, so unread still reads as different without glowing. */
.dark-mode .notif-row.is-unread {
    background: var(--syns-dark-sunken);
}

.dark-mode .notif-row.is-unread:hover {
    background: var(--syns-dark-raised-hi);
}

.dark-mode .notif-row.is-unread .notif-row__hd::before {
    background: var(--syns-dark-accent);
}

.dark-mode .notif-row__body {
    color: var(--syns-dark-text);
}

.dark-mode .notif-row__meta {
    color: var(--syns-dark-text-muted);
}

.dark-mode .notif-row__type {
    background: #1E3352;
    color: #7FB2FF;
}

.dark-mode .notif-empty {
    color: var(--syns-dark-text-muted);
}

.dark-mode .notif-panel__ft {
    border-color: var(--syns-dark-border);
    color: #7FB2FF;
}

.dark-mode .notif-panel__ft:hover,
.dark-mode .notif-panel__ft:focus {
    background: var(--syns-dark-raised-hi);
    color: #A8CBFF;
}

/* ---- Notification list screen (WEB-3) ----
 * The tint uses !important because the base rule does, which it needs
 * in order to beat bootstrap-table's own .active striping. */
.dark-mode .notif-list-unread > td {
    background: var(--syns-dark-sunken) !important;
    color: var(--syns-dark-text-strong);
}

.dark-mode .notif-badge-read {
    background: var(--syns-dark-raised-hi);
    color: var(--syns-dark-text-muted);
}

.dark-mode .notif-badge-unread {
    background: #14403F;
    color: #6FD6CE;
}

/* ---- Mark all as read, and clickable list rows (WEB-4) ---- */
.dark-mode .notif-panel__mark-all {
    color: #7FB2FF;
}

.dark-mode .notif-panel__mark-all:disabled {
    color: var(--syns-dark-text-muted);
}

.dark-mode .notif-list-clickable tbody tr:hover > td {
    background: var(--syns-dark-raised-hi);
}

/* ------------------------------------------------------------------ *
 * Inline-style overrides  --  STOPGAP, see ADAMS-1485
 *
 * 137 .aspx views hardcode colours in style="" attributes. Inline styles beat
 * stylesheets, so the only way to reach them from CSS is to match the attribute
 * text itself and win with !important. The proper fix is to move these into
 * classes; until that happens these rules keep the affected screens legible.
 *
 * Only values that actually FAIL WCAG AA against the dark background are
 * listed. Measured contrast on #1A1A1A:
 *     #333 1.38   #555 2.33   #222 1.09   #666 3.03   #6b6b6b 3.27
 *     #1a2e32 1.23   #677381 3.60   #64748b 3.66   red 4.35
 *     green 3.39   #c0392b 3.20   #dc3545 3.84
 * Values already passing are deliberately left alone, including the single most
 * common one, #00a3b2 (135 uses, 5.70), plus #888, #999, #aaa, #94a3b8.
 *
 * Four things to know before editing this block:
 *  1. Attribute matching is literal, so every value needs both a spaced and an
 *     unspaced variant ("color:#333" and "color: #333") -- both spellings occur.
 *  2. The " i" flag makes matching case-insensitive, which is required because
 *     the source mixes cases (#64748B, #1A2E32). It rules out IE11, which this
 *     codebase already does not support (it ships var() and display:grid,
 *     including inline in .aspx).
 *  3. Matching is on substrings, so a shorter value matches longer ones that
 *     start with it. "background:#fff" really does catch #fff2df, #fff7e6,
 *     #fff7e9 and #ffff00 in the current views; those are re-mapped explicitly
 *     below, and any new colour sharing a prefix will need the same treatment.
 *     "color:#333" likewise matches "background-color:#333", which is harmless
 *     -- forcing readable text on an element with a dark inline background is
 *     the desired result. No colour value in the views collides today.
 *  4. The whole block is scoped to @media screen. These rules are more specific
 *     than the print reset at the bottom of this file, so left unscoped they
 *     would survive into print and put light text on white paper.
 * ------------------------------------------------------------------ */

@media screen {

/* Near-black and dark-grey text: invisible against the dark background. The
 * darkest values were headings/emphasis, so they map to the strong tone. */
.dark-mode [style*="color:#333" i],
.dark-mode [style*="color: #333" i],
.dark-mode [style*="color:#222" i],
.dark-mode [style*="color: #222" i],
.dark-mode [style*="color:#1a2e32" i],
.dark-mode [style*="color: #1a2e32" i] {
    color: var(--syns-dark-text-strong) !important;
}

/* Mid-grey and slate body text. */
.dark-mode [style*="color:#555" i],
.dark-mode [style*="color: #555" i],
.dark-mode [style*="color:#666" i],
.dark-mode [style*="color: #666" i],
.dark-mode [style*="color:#6b6b6b" i],
.dark-mode [style*="color: #6b6b6b" i],
.dark-mode [style*="color:#677381" i],
.dark-mode [style*="color: #677381" i],
.dark-mode [style*="color:#64748b" i],
.dark-mode [style*="color: #64748b" i] {
    color: var(--syns-dark-text) !important;
}

/* Semantic reds keep their meaning but need lifting off the dark background.
 * Guarded with :not([style*="background"]) so a red-filled badge -- where the
 * red is the fill and the text is white -- is not turned into red-on-red. */
.dark-mode [style*="color:red" i]:not([style*="background" i]),
.dark-mode [style*="color: red" i]:not([style*="background" i]),
.dark-mode [style*="color:#c0392b" i]:not([style*="background" i]),
.dark-mode [style*="color: #c0392b" i]:not([style*="background" i]),
.dark-mode [style*="color:#dc3545" i]:not([style*="background" i]),
.dark-mode [style*="color: #dc3545" i]:not([style*="background" i]) {
    color: #F27A7A !important;
}

.dark-mode [style*="color:green" i]:not([style*="background" i]),
.dark-mode [style*="color: green" i]:not([style*="background" i]) {
    color: #7FD184 !important;
}

/* White and near-white panels left floating as bright rectangles in a dark UI.
 * background-color variants are included for robustness even though the views
 * currently only use the background shorthand for these values. */
.dark-mode [style*="background:#fff" i],
.dark-mode [style*="background: #fff" i],
.dark-mode [style*="background-color:#fff" i],
.dark-mode [style*="background-color: #fff" i] {
    background: var(--syns-dark-raised) !important;
}

/* Yellow row highlight (PickList/Details.aspx). Also caught by the #fff rule
 * as a substring; flattening it to grey would erase the highlight, so it keeps
 * a yellow identity at a dark-appropriate intensity. */
.dark-mode [style*="background:#ffff00" i],
.dark-mode [style*="background: #ffff00" i],
.dark-mode [style*="background-color:#ffff00" i],
.dark-mode [style*="background-color: #ffff00" i] {
    background: #4A4008 !important;
    color: var(--syns-dark-text-strong) !important;
}

/* Pale amber callout tints. These are caught by the #fff rule above as a
 * substring, which would flatten them to neutral grey and lose the warning
 * signal, so they are re-mapped here. Must stay AFTER the #fff rule: same
 * specificity, so source order decides. */
.dark-mode [style*="background:#fff2df" i],
.dark-mode [style*="background: #fff2df" i],
.dark-mode [style*="background:#fff7e6" i],
.dark-mode [style*="background: #fff7e6" i],
.dark-mode [style*="background:#fff7e9" i],
.dark-mode [style*="background: #fff7e9" i] {
    background: #3A3016 !important;
}

.dark-mode [style*="background:#f7f9fb" i],
.dark-mode [style*="background: #f7f9fb" i],
.dark-mode [style*="background-color:#f7f9fb" i],
.dark-mode [style*="background-color: #f7f9fb" i] {
    background: var(--syns-dark-sunken) !important;
}

.dark-mode [style*="background:#ddd" i],
.dark-mode [style*="background: #ddd" i],
.dark-mode [style*="background-color:#ddd" i],
.dark-mode [style*="background-color: #ddd" i] {
    background: var(--syns-dark-raised-hi) !important;
}

} /* end @media screen */

/* ------------------------------------------------------------------ *
 * Print
 *
 * Printing a dark page wastes toner and prints light text as near-white.
 * Force light for print on every screen regardless of the active theme.
 * ------------------------------------------------------------------ */

@media print {
    .dark-mode,
    .dark-mode body,
    .dark-mode .main,
    .dark-mode .content-wrapper {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
}

/* ------------------------------------------------------------------ *
 * Price History panel (Content/newcss/price-history-panel.css) -
 * Sales Order, Purchase Order and Sales Quotation
 * ------------------------------------------------------------------ */
.dark-mode .ph-panel {
    background: #252525;
    border-color: #3E3E3E;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
.dark-mode .ph-panel-head {
    border-color: #3E3E3E;
}
.dark-mode .ph-panel-title {
    color: #E0E0E0;
}
.dark-mode .ph-panel-close {
    color: #FF7A66;
}
.dark-mode .ph-panel-close:hover,
.dark-mode .ph-panel-close:focus {
    background: #3E3E3E;
}
.dark-mode .ph-panel-note,
.dark-mode .ph-panel-state {
    color: #A0A0A0;
}
.dark-mode .ph-table > thead > tr > th {
    background: #1A1A1A;
    color: #E0E0E0;
    border-color: #3E3E3E;
}
.dark-mode .ph-table > tbody > tr > td {
    background: #252525;
    color: #E0E0E0;
    border-color: #3E3E3E;
}
.dark-mode .ph-table > tbody > tr:hover > td {
    background: #2E2E2E;
}
.dark-mode .ph-trigger {
    color: #4FD1DC;
}
.dark-mode .ph-trigger:hover,
.dark-mode .ph-trigger:focus {
    color: #8BE3EA;
}
.dark-mode tr.ph-row-active > td {
    background: #1F3A3D !important;
}

/* ------------------------------------------------------------------ *
 * Customer + SKU MOQ (Item Customer / ItemTagging Edit and Details)
 *
 * The grid itself inherits the existing .table and .CreateEdit-Item-*
 * rules, so only the two colour-bearing helpers and the modal surface
 * need re-stating. Rows injected by ItemTaggingMOQ.js carry the same
 * classes as the server-rendered ones and no inline colour, so they
 * pick these up without the script having to know the theme.
 * ------------------------------------------------------------------ */

.dark-mode .moq-empty {
    color: var(--syns-dark-text-muted);
}

.dark-mode .moq-modal-error {
    border-color: #7A2E2B;
    color: #E4A19E;
    background: #2A1D1D;
}

.dark-mode #moqModal .modal-content {
    background: var(--syns-dark-raised);
    color: var(--syns-dark-text-strong);
}

.dark-mode #moqModal .modal-header,
.dark-mode #moqModal .modal-footer {
    border-color: var(--syns-dark-border);
}

.dark-mode #moqModal .modal-header .modal-title,
.dark-mode #moqModal .moq-field label {
    color: var(--syns-dark-text-strong);
}

.dark-mode #moqModal .modal-header .close {
    color: var(--syns-dark-text-strong);
    opacity: 0.8;
}

/* The read-only date inputs would otherwise take the light readonly fill. */
.dark-mode #moqModal .form-control[readonly] {
    background: var(--syns-dark-sunken);
    color: var(--syns-dark-text);
}

.dark-mode #moqModal .moq-field-hint {
    color: #A0A0A0;
}

.dark-mode #moqModal .moq-scope-tip-text {
    background: #1A1A1A;
    color: #E0E0E0;
    border: 1px solid #3E3E3E;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.dark-mode .moq-qty,
.dark-mode .moq-status {
    background: var(--syns-dark-sunken);
    color: var(--syns-dark-text);
    border-color: var(--syns-dark-border);
}

/* Import MOQ outcome - same fills as the .alert-* dark overrides. */
.dark-mode .moq-import-success { background: #1D4022; border-color: #2C6134; color: #E0E0E0; }
.dark-mode .moq-import-warning { background: #4A3A16; border-color: #6E5722; color: #E0E0E0; }
.dark-mode .moq-import-danger  { background: #4A1F1F; border-color: #6E2C2C; color: #E0E0E0; }

/* ------------------------------------------------------------------ *
 * Sales Quotation (List / Create / Edit / Details)
 * ------------------------------------------------------------------ */
.dark-mode .sq-item-row.sq-foc-row {
    background-color: var(--syns-dark-sunken);
}

.dark-mode .sq-btn-outline {
    background: var(--syns-dark-raised);
    border-color: var(--syns-dark-accent);
    color: var(--syns-dark-accent);
}

.dark-mode .sq-btn-outline:hover,
.dark-mode .sq-btn-outline:focus {
    background: var(--syns-dark-sunken);
}

.dark-mode .sq-btn-solid {
    background: var(--syns-dark-accent);
    border-color: var(--syns-dark-accent);
    color: #0A1A1D;
}

.dark-mode .sq-pricing-summary .sq-summary-total {
    border-top-color: var(--syns-dark-border);
}

.dark-mode .sq-summary-counts {
    background: var(--syns-dark-sunken);
}

.dark-mode .sq-summary-count-line {
    color: var(--syns-dark-text-muted);
}

.dark-mode .sq-summary-count-line span {
    color: var(--syns-dark-text-strong);
}

.dark-mode #sqInfoModal .modal-content {
    background: var(--syns-dark-raised);
    color: var(--syns-dark-text);
}

.dark-mode #sqInfoModal .modal-header,
.dark-mode #sqInfoModal .modal-footer {
    border-color: var(--syns-dark-border);
}

.dark-mode #sqInfoModal .modal-header .close {
    color: var(--syns-dark-text-strong);
    opacity: 0.8;
}

.dark-mode #sqInfoModal .modal-title,
.dark-mode #sqInfoModal label {
    color: var(--syns-dark-text-strong);
}

.dark-mode #sqRejectModal .modal-content {
    background: var(--syns-dark-raised);
    color: var(--syns-dark-text);
}

.dark-mode #sqRejectModal .modal-header,
.dark-mode #sqRejectModal .modal-footer {
    border-color: var(--syns-dark-border);
}

.dark-mode #sqRejectModal .modal-header .close {
    color: var(--syns-dark-text-strong);
    opacity: 0.8;
}

.dark-mode #sqRejectModal .modal-title,
.dark-mode #sqRejectModal label {
    color: var(--syns-dark-text-strong);
}

.dark-mode #sqRejectModal #sqRejectReasonSelect,
.dark-mode #sqRejectModal #sqRejectRemarksInput {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
    color: var(--syns-dark-text);
}

.dark-mode .sq-price-violation {
    color: #E57373;
}

.dark-mode .sq-ph-month-top {
    color: var(--syns-dark-text-strong);
}

.dark-mode .sq-ph-bar-track {
    background: var(--syns-dark-sunken);
}

.dark-mode .sq-ph-month-sub {
    color: var(--syns-dark-text-muted);
}

.dark-mode .sq-ph-weighted {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
}

.dark-mode .sq-ph-weighted-row,
.dark-mode .sq-ph-weighted-sub {
    color: var(--syns-dark-accent);
}

.dark-mode .sq-ph-row {
    border-bottom-color: var(--syns-dark-border);
}

.dark-mode .sq-ph-row label {
    color: var(--syns-dark-text-muted);
}

.dark-mode .sq-ph-row span {
    color: var(--syns-dark-text-strong);
}

.dark-mode .sq-ph-fallback {
    background: var(--syns-dark-sunken);
    border-color: var(--syns-dark-border);
}

.dark-mode .sq-ph-fallback-title,
.dark-mode .sq-ph-fallback-desc {
    color: var(--syns-dark-text-muted);
}

.dark-mode .sq-ph-tag {
    background: var(--syns-dark-raised-hi);
    color: var(--syns-dark-text-strong);
}