/* =====================================================================
dark.css — optional DARK THEME. Activated only when .
Cosmetic-only and fully revertible: delete this file + its and the
toggle, and the app is unchanged. Loaded LAST so it wins over style/polish.
Scope note: the sidebar & login are already dark; channel order pages
(B&Q/Temu/TikTok/eBay/Shopify/Evri) keep their brand-light look on purpose.
===================================================================== */
html[data-theme="dark"]{
--d-bg:#0b1220;
--d-surface:#162133;
--d-surface2:#1d2941;
--d-inset:#111a2b;
--d-border:#2a3650;
--d-line:#243049;
--d-text:#e6edf6;
--d-muted:#9fb0c4;
/* soften polish.css shadow vars for dark */
--rms-shadow-sm:0 1px 2px rgba(0,0,0,.4);
--rms-shadow-md:0 8px 24px rgba(0,0,0,.45);
--rms-line:#243049;
}
/* ---- canvas ---- */
html[data-theme="dark"] body{
background:radial-gradient(circle at 20% 0%,#13243d,#0c1626 38%,#0b1220) !important;
color:var(--d-text);
}
/* ---- shared cards / panels / topbar ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .temp-box,
html[data-theme="dark"] .permission-box,
html[data-theme="dark"] .amazon-connect-card{
background:var(--d-surface) !important;
border-color:var(--d-border) !important;
color:var(--d-text);
}
html[data-theme="dark"] .hero-card{ background:linear-gradient(135deg,#0d3450,#0a4f6e) !important; }
/* The topbar is DELIBERATELY invisible chrome — topbar.css:11 sets it
transparent/no-border/no-shadow so it blends into the page and the module owns
its own title. This rule predates that and still painted a bar, in dark ONLY:
rgba(18,27,43,.86) is darker than the surface behind it (#162133), so it read
as a random black slab under the search/account buttons. Match light mode. */
html[data-theme="dark"] .topbar{ background:transparent !important; border-color:transparent !important; }
html[data-theme="dark"] .stat{ background:linear-gradient(135deg,#16233a,#13283f) !important; border-color:var(--d-border) !important; }
/* ---- text ---- */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] .stat .num{ color:var(--d-text) !important; }
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .stat .label,
html[data-theme="dark"] .eyebrow{ color:var(--d-muted) !important; }
html[data-theme="dark"] .user-pill{ background:#0e2740 !important; color:#bae6fd !important; border-color:#1e4a6b !important; }
/* ---- inputs ---- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select{
background:var(--d-inset) !important;
border-color:var(--d-border) !important;
color:var(--d-text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:#64748b !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{ border-color:#38bdf8 !important; box-shadow:0 0 0 3px rgba(56,189,248,.18) !important; }
/* ---- generic tables ---- */
html[data-theme="dark"] table{ box-shadow:var(--rms-shadow-sm); }
html[data-theme="dark"] th{ background:var(--d-surface2) !important; color:#aebfd4 !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] td{ background:var(--d-surface) !important; color:var(--d-text) !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] tr:hover td{ background:#1f2c44 !important; }
/* ---- menus / dropdowns / modals ---- */
html[data-theme="dark"] .menu-box{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
html[data-theme="dark"] .menu-box button{ background:transparent !important; color:var(--d-text) !important; }
html[data-theme="dark"] .menu-box button:hover{ background:#22304a !important; }
html[data-theme="dark"] .stk-modal,
html[data-theme="dark"] .stk2-modal,
html[data-theme="dark"] .cat-panel-shell,
html[data-theme="dark"] .sf-modal,
html[data-theme="dark"] .ev-modal{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text); }
/* ---- empty / notice states ---- */
html[data-theme="dark"] .empty-state{ background:#10192a !important; border-color:#2a3650 !important; color:var(--d-muted) !important; }
html[data-theme="dark"] .empty-state b{ color:var(--d-text) !important; }
html[data-theme="dark"] .notice-item{ background:#2a1620 !important; color:#fda4af !important; }
/* ---- buttons: ghost/neutral readable on dark (primary/semantic keep their colour) ---- */
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .stk-mini,
html[data-theme="dark"] .stk-pick{ background:#22304a !important; color:#cdd9e8 !important; border-color:#33425e !important; }
html[data-theme="dark"] .ghost:hover{ background:#2b3a57 !important; }
html[data-theme="dark"] .topbar button.danger{ background:#22304a !important; color:#cdd9e8 !important; }
html[data-theme="dark"] .topbar button.danger:hover{ background:#2b3a57 !important; }
/* =====================================================================
Page conversions: the light overrides polish.css/style.css force with
!important (Products, Catalogue, Stock, Order Fulfillment) must be flipped
back to dark here.
===================================================================== */
html[data-theme="dark"] #products,
html[data-theme="dark"] #products.card,
html[data-theme="dark"] #productCatalogue,
html[data-theme="dark"] #productCatalogue.cat-page,
html[data-theme="dark"] #stockInventory.cat-page,
html[data-theme="dark"] #ordersHub.cat-page{
background:var(--d-surface) !important; border-color:var(--d-border) !important;
}
html[data-theme="dark"] #products th,
html[data-theme="dark"] #productCatalogue .cat-products-table th,
html[data-theme="dark"] #stockInventory .stk-table th{ background:var(--d-surface2) !important; color:#aebfd4 !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] #products td,
html[data-theme="dark"] #productCatalogue .cat-products-table td,
html[data-theme="dark"] #stockInventory .stk-table td{ background:var(--d-surface) !important; color:var(--d-text) !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] #products tr:hover td,
html[data-theme="dark"] .cat-products-table tr:hover td{ background:#1f2c44 !important; }
html[data-theme="dark"] .cat-table-wrap{ background:var(--d-surface) !important; border-color:var(--d-border) !important; }
html[data-theme="dark"] .cat-title,
html[data-theme="dark"] .cat-detail-title,
html[data-theme="dark"] .cat-page-title,
html[data-theme="dark"] #productCatalogue .cat-stat-value,
html[data-theme="dark"] #stockInventory .cat-page-title,
html[data-theme="dark"] #ordersHub .cat-page-title{ color:var(--d-text) !important; }
html[data-theme="dark"] .cat-subtitle,
html[data-theme="dark"] .cat-muted,
html[data-theme="dark"] .cat-code,
html[data-theme="dark"] .cat-page-sub,
html[data-theme="dark"] #productCatalogue .cat-stat-label,
html[data-theme="dark"] #stockInventory .cat-page-sub,
html[data-theme="dark"] #ordersHub .cat-page-sub{ color:var(--d-muted) !important; }
html[data-theme="dark"] #productCatalogue .cat-stat-card,
html[data-theme="dark"] #productCatalogue .stat,
html[data-theme="dark"] #productCatalogue .cat-legend,
html[data-theme="dark"] #productCatalogue #catChannelLegend{ background:#16233a !important; border-color:var(--d-border) !important; }
html[data-theme="dark"] .cat-search-input,
html[data-theme="dark"] .cat-filter-select,
html[data-theme="dark"] .cat-link-form input,
html[data-theme="dark"] .cat-link-form select{ background:var(--d-inset) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
html[data-theme="dark"] .cat-panel-header,
html[data-theme="dark"] .cat-panel-detail,
html[data-theme="dark"] .cat-panel-variant-bar{ background:#13203a !important; border-color:var(--d-border) !important; }
/* ---- Stock (stk2) page from main's redesign ---- */
html[data-theme="dark"] .stk2-head .stk2-title{ color:var(--d-text) !important; }
html[data-theme="dark"] .stk2-head .stk2-sub,
html[data-theme="dark"] .stk2-count,
html[data-theme="dark"] .stk2-tip{ color:var(--d-muted) !important; }
html[data-theme="dark"] .stk2-card,
html[data-theme="dark"] .stk2-stats .stat,
html[data-theme="dark"] .stk2-modal{ background:var(--d-surface) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
html[data-theme="dark"] .stk2-search,
html[data-theme="dark"] .stk2-sel{ background:var(--d-inset) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
html[data-theme="dark"] .stk2-card .tbl th,
html[data-theme="dark"] .stk2-card .side-tbl th{ background:var(--d-surface2) !important; color:#aebfd4 !important; }
html[data-theme="dark"] .stk2-card .tbl td,
html[data-theme="dark"] .stk2-card .side-tbl td{ background:var(--d-surface) !important; color:var(--d-text) !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] .stk2-card .tbl tr:hover td{ background:#1f2c44 !important; }
/* ---- the polish.css light Stock/Orders conversion (old stk- classes) ---- */
html[data-theme="dark"] #stockInventory .stk-table td,
html[data-theme="dark"] #ordersHub .ord-card{ background:var(--d-surface) !important; color:var(--d-text) !important; border-color:var(--d-border) !important; }
html[data-theme="dark"] #ordersHub .ord-prod{ color:var(--d-text) !important; }
html[data-theme="dark"] #ordersHub .ord-meta{ color:var(--d-muted) !important; }
/* ---- redesigned movement log ---- */
html[data-theme="dark"] .lg-wrap{
--accent-bg:#16233a; --go-bg:#12261d; --red-bg:#2a1618; --amber-bg:#2a2011; --violet-bg:#211a33;
--ink-1:var(--d-text); --ink-2:#aebfd4; --ink-3:#7e8ea4; --line:var(--d-border);
}
html[data-theme="dark"] .lg-hd{ border-bottom-color:var(--d-border) !important; }
html[data-theme="dark"] .lg-tab{ background:var(--d-inset) !important; border-color:var(--d-border) !important; color:#aebfd4 !important; }
html[data-theme="dark"] .lg-tab:hover{ background:var(--d-surface2) !important; }
html[data-theme="dark"] .lg-tab.on{ background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; }
html[data-theme="dark"] .lg-search{ background:var(--d-inset) !important; border-color:var(--d-border) !important; color:var(--d-text) !important; }
html[data-theme="dark"] .lg-card{ background:var(--d-surface2) !important; border-color:var(--d-border) !important; }
html[data-theme="dark"] .lg-banner{ background:#2a2011 !important; border-color:#5a4415 !important; color:#e6c184 !important; }
html[data-theme="dark"] .lg-tbl{ border-color:var(--d-border) !important; }
html[data-theme="dark"] .lg-tbl th{ background:var(--d-surface2) !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] .lg-tbl td{ background:var(--d-surface) !important; border-bottom-color:var(--d-line) !important; }
html[data-theme="dark"] .lg-daysep td{ background:var(--d-surface2) !important; border-bottom-color:var(--d-border) !important; }
html[data-theme="dark"] .lg-mark td{ background:#12261d !important; color:#5fd88f !important; border-bottom-color:#1e4030 !important; }
html[data-theme="dark"] .lg-ean{ background:var(--d-inset) !important; }
html[data-theme="dark"] .lg-acct{ background:var(--d-inset) !important; color:#aebfd4 !important; }
html[data-theme="dark"] .lg-av.sys{ background:var(--d-inset) !important; }
/* ---- theme toggle button itself ---- */
.theme-toggle{ background:#eef2f7; color:#111827; }
html[data-theme="dark"] .theme-toggle{ background:#22304a !important; color:#cdd9e8 !important; border:1px solid #33425e !important; }
/* =====================================================================
SCREEN-BY-SCREEN DARK MODE (2026-07-16)
Pattern A: a module hard-codes `background:#fff` on a card and nothing
overrides it for dark. The section behind it correctly goes dark (.card has a
rule above), the inherited ink flips to light — so light text lands on a white
card and the content vanishes. The fix mirrors the convention #dashboard
already uses (dashboard.css:147): surface #0f1e2e, hairline border, no shadow.
===================================================================== */
/* Purchase Orders — style.css:3697 `.po-kpis .kpi{background:#fff}`.
The four KPI numbers (Open POs / Units on order / Committed RMB / Needs
attention) were light ink on a white card. */
html[data-theme="dark"] #purchaseOrders .po-kpis .kpi{
background:#0f1e2e; border-color:rgba(255,255,255,.08); box-shadow:none;
}
/* …and the rest of the screen: the table wrapper, both segmented bars, the
ghost/row-action buttons, the PO-number chip and the status pills were all
hard-coded #fff / near-white greys with no dark rule. 21 white elements on one
screen — every one of them a light surface with light ink on top. */
html[data-theme="dark"] #purchaseOrders .po-table-wrap{
background:#0f1e2e; border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] #purchaseOrders .po-seg,
html[data-theme="dark"] #purchaseOrders .po-seg.sm{
background:#16233a; border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] #purchaseOrders .po-seg button{ color:#9fb0c6; }
html[data-theme="dark"] #purchaseOrders .po-seg button.on{
background:#0f1e2e; color:#e6edf6; box-shadow:none;
}
html[data-theme="dark"] #purchaseOrders .btn-ghost,
html[data-theme="dark"] #purchaseOrders .bx{
background:#16233a !important; color:#e6edf6 !important;
border-color:rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] #purchaseOrders .po-no{
background:rgba(255,255,255,.07); color:#e6edf6;
}
html[data-theme="dark"] #purchaseOrders .po-status{
background:rgba(255,255,255,.09); color:#cdd9e8;
}
html[data-theme="dark"] #purchaseOrders .t-chip{
background:rgba(255,255,255,.07); color:#cdd9e8;
}
/* =====================================================================
FULL DARK-MODE PASS — every remaining white surface, all screens.
Found by walking all 57 tabs in dark mode and collecting any element with an
OPAQUE near-white background: 18 screens, 73 distinct selectors. Each is a
module hard-coding background:#fff (or an #f8fafc-ish grey) with no dark rule,
so a light surface kept painting underneath light ink.
Palette follows #dashboard (dashboard.css:147), the reference screen:
surface #0f1e2e | raised #16233a | hairline rgba(255,255,255,.08)
ink #e6edf6 | muted #a9b8cc (deliberately light - dim greys were unreadable)
===================================================================== */
html[data-theme="dark"]{
--dk-surface:#0f1e2e; --dk-raised:#16233a; --dk-line:rgba(255,255,255,.08);
--dk-ink:#e6edf6; --dk-muted:#a9b8cc;
}
/* Containers */
html[data-theme="dark"] #containers .ct-kpi,
html[data-theme="dark"] #containers .ct-card,
html[data-theme="dark"] #containers .ct-table-wrap{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #containers .ct-tabs,
html[data-theme="dark"] #containers .ct-btn--ghost{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #containers .ct-tab{ color:var(--dk-muted); }
html[data-theme="dark"] #containers .ct-tab.on{ background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #containers .ct-tab-n{ background:rgba(255,255,255,.12) !important; color:var(--dk-ink) !important; }
/* Stock / Inventory */
html[data-theme="dark"] #stockInventory .stat-card,
html[data-theme="dark"] #stockInventory .stk2-card{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #stockInventory .stat-ic{ background:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] #stockInventory .stk2-tab,
html[data-theme="dark"] #stockInventory .stk2-btn-sm{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #stockInventory .stk2-tab.on{ background:var(--dk-surface) !important; }
html[data-theme="dark"] #stockInventory .stk2-tab-n{ background:rgba(255,255,255,.14) !important; color:var(--dk-ink) !important; }
/* Message Center */
html[data-theme="dark"] #messageCenter .mc-shell,
html[data-theme="dark"] #messageCenter .mc-side,
html[data-theme="dark"] #messageCenter .mc-search{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #messageCenter .mc-mode-switch,
html[data-theme="dark"] #messageCenter .mc-chip,
html[data-theme="dark"] #messageCenter .mc-btn--soft{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #messageCenter .mc-mode.on{ background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
/* Product Catalogue */
html[data-theme="dark"] #productCatalogue .cat-btn-ghost,
html[data-theme="dark"] #productCatalogue .cat-search-input,
html[data-theme="dark"] #productCatalogue .cat-filter-select{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #productCatalogue .cat-channel-pill{
background:rgba(255,255,255,.08) !important; color:var(--dk-ink) !important; }
/* Pattern B: dark ink hard-coded on a now-dark card */
html[data-theme="dark"] #productCatalogue .cat-page-title{ color:var(--dk-ink) !important; }
/* Customer Inbox */
html[data-theme="dark"] #customerInbox .ci-btn.light,
html[data-theme="dark"] #customerInbox .ci-accfilter,
html[data-theme="dark"] #customerInbox .ci-acctog,
html[data-theme="dark"] #customerInbox .ci-chansel-btn,
html[data-theme="dark"] #customerInbox .ci-type{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #customerInbox .ci-tab.active{ background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #customerInbox .ci-topic-t{ color:var(--dk-ink) !important; }
/* Balance Goods */
html[data-theme="dark"] #balanceGoods .bg-kpi,
html[data-theme="dark"] #balanceGoods .bg-empty{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #balanceGoods .bg-tab{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #balanceGoods .bg-tab-n{ background:rgba(255,255,255,.14) !important; color:var(--dk-ink) !important; }
/* Consignee Profiles */
html[data-theme="dark"] #consigneeProfiles .cp-card,
html[data-theme="dark"] #consigneeProfiles .cp-editor{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #consigneeProfiles .cp-tab,
html[data-theme="dark"] #consigneeProfiles .cp-refresh{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #consigneeProfiles .cp-tab-n{ background:rgba(255,255,255,.14) !important; color:var(--dk-ink) !important; }
/* Supplier Products */
html[data-theme="dark"] #products .cat-btn-ghost,
html[data-theme="dark"] #products input,
html[data-theme="dark"] #products select{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
/* Create Container */
html[data-theme="dark"] #createContainer .cw-card{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #createContainer .cw-step--active,
html[data-theme="dark"] #createContainer .cw-step-no{
background:var(--dk-raised) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #createContainer .cw-card-h{ color:var(--dk-ink) !important; }
/* Amazon SAFE-T Claims */
html[data-theme="dark"] #amazonSafetClaims .saf-page,
html[data-theme="dark"] #amazonSafetClaims .saf-card{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #amazonSafetClaims .saf-viewtab{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #amazonSafetClaims .saf-title,
html[data-theme="dark"] #amazonSafetClaims .saf-count{ color:var(--dk-ink) !important; }
/* Orders Hub / Customer Messenger / Print Labels / Linking / EDI / Profit */
html[data-theme="dark"] #ordersHub .stk-test-bar,
html[data-theme="dark"] #ordersHub .stk-mini{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #customerMessenger .cs-tab.active{ background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #customerMessenger .cs-badge.newinc{ background:rgba(255,255,255,.14) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #printLabels .vf-side-card,
html[data-theme="dark"] #printLabels .pl-searchbar{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #printLabels h3{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #linking .lk-badge{ background:rgba(255,255,255,.10) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #amazonEdi .amz-orders-wrap{ background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] .pa-wrap{ background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
/* Second pass — surfaces that only exist once you open something (the containers
detail drawer, a stock tooltip, a message thread), so the first sweep of the
landing screens never saw them. */
html[data-theme="dark"] #containers .ct-drawer,
html[data-theme="dark"] #containers .ct-detail{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #containers .ct-dtabs{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #containers .ct-dtab-n{ background:rgba(255,255,255,.14) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #containers .ct-cno{ background:rgba(255,255,255,.08) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #containers .ct-btn--danger{
background:rgba(220,38,38,.18) !important; border-color:rgba(248,113,113,.35) !important; color:#fca5a5 !important; }
html[data-theme="dark"] #stockInventory .stk2-tip{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #messageCenter .mc-convo{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
/* POPUPS — none of these exist until you click something, so a sweep of the
landing screens never sees them. Every one hard-codes a white panel
(.stk-menu{background:#fff} etc). These are the eight surfaces that
positionMenu() places; if a ninth is added, it needs a line here too. */
html[data-theme="dark"] .stk-menu,
html[data-theme="dark"] .menu-box,
html[data-theme="dark"] .cat-chip-menu,
html[data-theme="dark"] .ful-fallback-picker,
html[data-theme="dark"] .ci-chansel-menu,
html[data-theme="dark"] .vp-pop,
html[data-theme="dark"] .cmdp-panel{
background:var(--dk-surface) !important;
border-color:var(--dk-line) !important;
color:var(--dk-ink) !important;
box-shadow:0 18px 45px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .stk-menu button,
html[data-theme="dark"] .menu-box button,
html[data-theme="dark"] .menu-box > div,
html[data-theme="dark"] .cat-chip-menu-item,
html[data-theme="dark"] .ful-fb-row{
background:transparent !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] .stk-menu button:hover,
html[data-theme="dark"] .menu-box button:hover,
html[data-theme="dark"] .cat-chip-menu-item:hover,
html[data-theme="dark"] .ful-fb-row:hover{ background:rgba(255,255,255,.07) !important; }
/* keep destructive items readable rather than inheriting the light-mode pink */
html[data-theme="dark"] .menu-box .danger,
html[data-theme="dark"] .cat-chip-menu-item.danger,
html[data-theme="dark"] .stk-menu .danger{
background:rgba(220,38,38,.16) !important; color:#fca5a5 !important; }
/* =====================================================================
PATTERN B — hard-coded DARK ink left on now-dark surfaces.
Found by measuring real text contrast (compositing translucent layers) rather
than only looking for white backgrounds: 17 screens, 30 selectors, the worst at
contrast 1.06–1.25 — i.e. text the same colour as what it sits on. Making the
cards dark (above) is what exposed these: the surface moved, the ink didn't.
===================================================================== */
html[data-theme="dark"] #containers .ct-kpi-v,
html[data-theme="dark"] #containers .ct-drawer-t,
html[data-theme="dark"] #containers .ct-agent-n,
html[data-theme="dark"] #containers .ct-agent-l b,
html[data-theme="dark"] #consigneeProfiles .cp-name,
html[data-theme="dark"] #balanceGoods .bg-kpi-v,
html[data-theme="dark"] #amazonSafetClaims .saf-stat-big,
html[data-theme="dark"] #amazonSafetClaims h4,
html[data-theme="dark"] #linking .lk-empty-sm,
html[data-theme="dark"] #linking .bld-item-sub,
html[data-theme="dark"] #fulfilmentStation .ful-lb-wcount,
html[data-theme="dark"] #productCatalogue .cat-var-count{
color:var(--dk-ink) !important;
}
html[data-theme="dark"] #containers .ct-agent-e,
html[data-theme="dark"] #consigneeProfiles .cp-addr,
html[data-theme="dark"] #consigneeProfiles .cp-ico,
html[data-theme="dark"] #fulfilmentStation .ful-lb-idle,
html[data-theme="dark"] #fulfilmentStation .ful-tab-pill,
html[data-theme="dark"] #dashboard .dash-bar-label,
html[data-theme="dark"] #dashboard .dash-pill,
html[data-theme="dark"] #purchaseOrders .po-sub,
html[data-theme="dark"] #products .prod-thumb-placeholder{
color:var(--dk-muted) !important;
}
/* Catch-all for the many /
/ that inherit a hard-coded dark ink from a
module rule. Scoped to the screens the audit flagged so it can't leak. */
html[data-theme="dark"] #containers b,
html[data-theme="dark"] #balanceGoods b,
html[data-theme="dark"] #linking b{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #purchaseOrders p,
html[data-theme="dark"] #productCatalogue span.cat-sub{ color:var(--dk-muted) !important; }
/* Surfaces that only exist once a module has LOADED ITS DATA — the first sweep
walked the tabs without running their loaders, so these panels didn't exist yet
and were reported clean. (Linking's .bld-col is white; its text was already
light, giving contrast 1.18 — light ink on a white panel.) */
html[data-theme="dark"] #linking .bld-col,
html[data-theme="dark"] #linking .lk-pane,
html[data-theme="dark"] #linking .bld-col-body{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #linking .bld-col-head{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #messageCenter .mc-hero,
html[data-theme="dark"] #messageCenter .mc-hero-t{
background:transparent !important; color:var(--dk-ink) !important; }
/* …and the ink inside those panels: hard-coded rgb(51,65,85) slate, which only
became a problem once the panel above it went dark. Fixing a surface keeps
surfacing the next layer of hard-coded ink underneath it. */
html[data-theme="dark"] #linking .bld-item-title,
html[data-theme="dark"] #linking .bld-item b,
html[data-theme="dark"] #linking .bld-col-body b{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #linking .bld-item-sub{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #linking .lk-muted,
html[data-theme="dark"] #linking .lk-muted b{ color:var(--dk-muted) !important; }
/* Linking's remaining light panels. Found only once the detector stopped asking
"is it near-white?" and started asking "is it LIGHT?" — .bld-col-h is #f8fafc,
nowhere near the r>232 threshold the first sweep used. */
html[data-theme="dark"] #linking .lk-card,
html[data-theme="dark"] #linking .bld-setup{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #linking .bld-col-h{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #linking .lk-search-in,
html[data-theme="dark"] #linking .lk-btn,
html[data-theme="dark"] #linking .lk-ghost{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
/* Order Fulfilment — missed twice over: the module wasn't loaded when I swept, AND
.ful-tab-pills is #e2e8f0 (r=226), which slipped under the "near-white" r>232
threshold my first detector used. Light-grey surfaces are just as broken as
white ones; measuring TEXT CONTRAST instead of guessing at background colours
is what found these. */
/* The whole page wrapper is #f8fafc — 390x931 of light grey. It slipped past BOTH
detectors: too grey for a "near-white" test, and its text is dark-on-light so
the contrast test passed it as readable. Readable is not the same as themed.
The section itself is class="tab" (not .card), so dark.css's card rule never
reached it either. */
html[data-theme="dark"] #fulfilmentStation .ful-page,
html[data-theme="dark"] #fulfilmentStation .ful-label-bar{
background:transparent !important; }
html[data-theme="dark"] #fulfilmentStation .ful-card,
html[data-theme="dark"] #fulfilmentStation .ful-stat{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; box-shadow:none !important; }
html[data-theme="dark"] #fulfilmentStation .ful-ticker{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-tab-pills{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-tab-pill{
background:transparent !important; color:var(--dk-muted) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-tab-pill.on,
html[data-theme="dark"] #fulfilmentStation .ful-tab-pill.active{
background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-lb-workers,
html[data-theme="dark"] #fulfilmentStation .ful-lb-feed,
html[data-theme="dark"] #fulfilmentStation .ful-lb-idle{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-lb-wcount,
html[data-theme="dark"] #fulfilmentStation .ful-lb-statxt{ color:var(--dk-ink) !important; }
/* Visible-by-eye pass on this screen: the page title, the stat values and the
select-all row still carried dark ink, and Refresh Orders was still a white
button. The contrast detector missed the title/zeros because .ful-page was
white at the time it ran — fixing the surface moved them from
dark-on-white (fine) to dark-on-dark (invisible). */
html[data-theme="dark"] #fulfilmentStation h1,
html[data-theme="dark"] #fulfilmentStation h2,
html[data-theme="dark"] #fulfilmentStation .ful-page-title,
html[data-theme="dark"] #fulfilmentStation .ful-stat-v,
html[data-theme="dark"] #fulfilmentStation .ful-stat-n{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-sub,
html[data-theme="dark"] #fulfilmentStation .ful-page-sub,
html[data-theme="dark"] #fulfilmentStation .ful-stat-l{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-refresh-btn,
html[data-theme="dark"] #fulfilmentStation .ful-btn,
html[data-theme="dark"] #fulfilmentStation button.ghost{
background:var(--dk-raised) !important; color:var(--dk-ink) !important;
border-color:var(--dk-line) !important; }
/* The order cards themselves — only visible once orders actually LOAD, which they
couldn't until packing_workers existed and the endpoint stopped 500ing. Fixing
the data is what finally exposed these. #fffdf6 / #fffbeb are warm off-whites,
nowhere near a "near-white" threshold. */
html[data-theme="dark"] #fulfilmentStation .ful-oc,
html[data-theme="dark"] #fulfilmentStation .ful-oc.unclaimed{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-um-warn{
background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.35) !important; color:#fcd34d !important; }
html[data-theme="dark"] #fulfilmentStation .ful-um-btn{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
/* ── Order Fulfilment: complete pass ───────────────────────────────────
Audited three ways at once (light solid panels, light gradients, and real text
contrast) rather than one symptom at a time. The order IDs were the worst thing
on the page: rgb(15,23,42) at contrast 1.06 — the order number, the single most
important text on a picking screen, was invisible. */
html[data-theme="dark"] #fulfilmentStation .ful-oc-id,
html[data-theme="dark"] #fulfilmentStation .ful-oc-name{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-plat-pill{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-plat-pill.on,
html[data-theme="dark"] #fulfilmentStation .ful-plat-pill.active{
background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-imgbox{
background:rgba(255,255,255,.06) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-imgph{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #fulfilmentStation .ful-oc-ext{ color:#7dd3fc !important; }
html[data-theme="dark"] #fulfilmentStation .ful-um-flag{ color:#fcd34d !important; }
/* status badge: keep the amber meaning, drop the near-white #fffbeb fill */
html[data-theme="dark"] #fulfilmentStation .ful-status-badge{
background:rgba(245,158,11,.16) !important; color:#fcd34d !important;
border-color:rgba(245,158,11,.32) !important; }
/* last one: a inside linking's panels still inheriting a mid-slate */
html[data-theme="dark"] #linking .bld-col b,
html[data-theme="dark"] #linking .lk-pane b{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #amazonSafetClaims .saf-viewtab.active{
background:var(--dk-surface) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #ordersHub .stk-section-title{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #customerInbox .ci-badge .n,
html[data-theme="dark"] #customerInbox .n{ color:var(--dk-ink) !important; }
/* =====================================================================
LIGHT GRADIENTS — the category every earlier sweep silently SKIPPED.
My detectors all bailed on `background-image: gradient` because a gradient
can't be sampled as a single colour ("return null"), so these were never
examined once. Six of them, five screens — including Supplier Products'
.import-panel, which is why that screen kept coming back broken.
Judged by averaging the gradient's own colour stops: if it averages light,
it's wrong for dark mode.
===================================================================== */
html[data-theme="dark"] #products .import-panel{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #products .import-panel b,
html[data-theme="dark"] #products .import-panel strong,
html[data-theme="dark"] #products .import-panel label{ color:var(--dk-ink) !important; }
html[data-theme="dark"] #products .import-panel .muted,
html[data-theme="dark"] #products .import-panel small{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #messageCenter .section-head{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #containers .ct-agents-box{
background:var(--dk-surface) !important; border-color:var(--dk-line) !important; }
html[data-theme="dark"] #createContainer .cwx-drop{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] #amazonSafetClaims .saf-btn.sec{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
/* .saf-btn (amber) is a deliberate colour — left alone, like the pastel chips. */
/* Native chrome. The "Choose file" button is rendered by the
BROWSER, so no background rule on the input reaches it — it stayed white on
every dark screen. ::file-selector-button is the only handle on it. */
html[data-theme="dark"] input[type="file"]{
background:var(--dk-raised) !important; border-color:var(--dk-line) !important; color:var(--dk-ink) !important; }
html[data-theme="dark"] input[type="file"]::file-selector-button{
background:var(--dk-surface); color:var(--dk-ink);
border:1px solid var(--dk-line); border-radius:8px; padding:6px 12px; margin-right:10px; cursor:pointer; }
html[data-theme="dark"] input[type="file"]::file-selector-button:hover{ background:#1b2b45; }
/* Muted text was too dim against these surfaces to read — lift it. */
html[data-theme="dark"] .muted{ color:var(--dk-muted) !important; }
html[data-theme="dark"] #purchaseOrders .kpi .k{ color:var(--dk-muted) !important; }