/* ============================================================ theme-glass.css — shared visual re-skin for the whole MPFC suite (shell, MPFC, WD Logistics, Sales, Finished Goods, and the shared login overlay). Loaded LAST by every app's own , after that app's own stylesheet, so these rules win the cascade without editing hundreds of component rules in four independently-built codebases. Solid, opaque colors — no glass/blur. BUG FIXED HERE: the previous version gave light and dark mode the exact same color values, so the theme toggle button visibly did nothing. Light and dark are now genuinely distinct palettes; only the sidebar/topbar (brand chrome) stays constant dark navy across both, which is a deliberate, common dashboard convention (e.g. GitHub, Slack), not an oversight. Two different theme mechanisms exist across the four apps, and the selectors below target each precisely so a fix for one can't silently leak into the other: - MPFC / Sales: attribute-based — - WD Logistics / Finished Goods: class-based — (light = ABSENCE of that class; scoped via "html:not([data-theme])" so this never accidentally matches the attribute-based apps, which always carry a data-theme value once loaded). ============================================================ */ :root{ --gl-accent:#0f6d7d; --gl-accent-2:#0b5766; --gl-accent-dim:#4fa3b3; --gl-navy:#081820; --gl-navy-2:#0b2129; /* sidebar/topbar — constant in both themes */ --gl-shadow-dark:0 6px 20px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2); --gl-shadow-light:0 2px 10px rgba(20,40,50,.10), 0 1px 2px rgba(20,40,50,.07); /* Dark is also the pre-theme-resolved fallback (matches each app's own default), so plain :root carries the dark values. */ --gl-page:#0a1a22; --gl-surface:#0f2733; --gl-surface-2:#132e3b; --gl-text:#eaf2f4; --gl-muted:#9fb4bb; --gl-line:rgba(255,255,255,.12); --gl-shadow:var(--gl-shadow-dark); --ink:var(--gl-page); --panel:var(--gl-surface); --panel-2:var(--gl-surface-2); --panel-3:#1a3844; --line:var(--gl-line); --text:var(--gl-text); --muted:var(--gl-muted); --side:var(--gl-navy); --side-2:var(--gl-navy-2); --side-line:rgba(255,255,255,.10); --teal:var(--gl-accent-dim); --teal-2:var(--gl-accent-2); --teal-dim:var(--gl-accent-dim); --head-a:var(--gl-navy); --head-b:var(--gl-navy-2); --brand:var(--gl-accent); --navy:var(--gl-navy); --navy2:var(--gl-navy-2); --bg:var(--gl-page); --card:var(--gl-surface); --blue:var(--gl-accent); --blue-d:var(--gl-accent-2); --gradient-accent:linear-gradient(135deg,var(--gl-accent) 0%, var(--gl-accent-2) 100%); } /* ---- LIGHT ---- */ :root[data-theme="light"], [data-theme="light"], html:not([data-theme]) body:not(.dark-mode){ --gl-page:#eef2f5; --gl-surface:#ffffff; --gl-surface-2:#f4f7f9; --gl-text:#16232b; --gl-muted:#5b6b74; --gl-line:#dde5ea; --gl-shadow:var(--gl-shadow-light); --ink:var(--gl-page); --panel:var(--gl-surface); --panel-2:var(--gl-surface-2); --panel-3:#e7edf0; --line:var(--gl-line); --text:var(--gl-text); --muted:var(--gl-muted); --bg:var(--gl-page); --card:var(--gl-surface); --teal:var(--gl-accent); } /* ---- DARK ---- */ :root[data-theme="dark"], [data-theme="dark"], html:not([data-theme]) body.dark-mode{ --gl-page:#0a1a22; --gl-surface:#0f2733; --gl-surface-2:#132e3b; --gl-text:#eaf2f4; --gl-muted:#9fb4bb; --gl-line:rgba(255,255,255,.12); --gl-shadow:var(--gl-shadow-dark); --ink:var(--gl-page); --panel:var(--gl-surface); --panel-2:var(--gl-surface-2); --panel-3:#1a3844; --line:var(--gl-line); --text:var(--gl-text); --muted:var(--gl-muted); --bg:var(--gl-page); --card:var(--gl-surface); --teal:var(--gl-accent-dim); } html, body{ background:var(--bg) !important; color:var(--text); } /* ---- chrome: sidebar / top navigation — constant dark navy, both themes ---- */ .sidebar, .suite-topbar, .side{ background:var(--gl-navy) !important; border-color:rgba(255,255,255,.08) !important; } /* ---- chrome: top bars / filter bars / header rows — follow the theme ---- */ .topbar, .top-header, .filterbar, .filter-bar, .page-header{ background:var(--panel) !important; border-color:var(--line) !important; } /* ---- chrome: cards, KPI tiles, panels — follow the theme ---- */ .card, .kpi, .statgrid .s, .insightbox, .uploadbox, .snapshot-banner, .carrier-lane-block, .ac-card{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:var(--gl-shadow) !important; color:var(--text); } .card h3, .kpi .lbl{ color:var(--muted) !important; } /* ---- chrome: modals + the shared login overlay ---- */ .modal, .modal-overlay .modal, .ac-overlay .ac-card{ background:var(--panel-2) !important; border:1px solid var(--line) !important; box-shadow:0 20px 50px rgba(0,0,0,.35) !important; color:var(--text); } .modal-overlay, .ac-overlay{ background:rgba(4,10,14,.55) !important; } /* ---- tables ---- */ .tablewrap, table{ background:transparent; } thead th{ background:var(--panel-2) !important; color:var(--muted) !important; } tbody tr:hover{ background:rgba(15,109,125,.08) !important; } td, th{ color:var(--text); border-color:var(--line) !important; } /* ---- inputs ---- */ input, select, textarea{ background:var(--panel-2) !important; color:var(--text) !important; border-color:var(--line) !important; } /* ---- buttons — solid brand teal regardless of theme ---- */ .btn:not(.secondary):not(.danger){ background:var(--gl-accent) !important; color:#fff !important; } .btn:not(.secondary):not(.danger):hover{ background:var(--gl-accent-2) !important; } .navlist a.active, .suite-tabs button.active{ background:var(--gl-accent) !important; color:#fff !important; }