/* ============================================================ 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{ /* PALETTE: Refined Teal. The previous chrome was a blue from the same family the charts open with (#2A78D6 is series 1), so the interface read as one more series and the charts felt loud. Teal sits clear of that blue, so the chrome stops competing with the data while the interface still carries a colour of its own. Neutrals here are cooler and cleaner than the original teal build, and the text steps are darker for higher contrast. --gl-accent is the LIGHT-theme accent (carries white button text); --gl-accent-dim is the DARK-theme one (light enough to read on a near-black ground). Each is the only usable one on its own surface, which is why the theme blocks below swap which one --teal points at. */ --gl-accent:#0e7c8b; --gl-accent-2:#0a616d; --gl-accent-dim:#35a3b5; --gl-navy:#0b2229; --gl-navy-2:#0f2c35; /* sidebar/topbar — constant in both themes */ --gl-shadow-dark:0 6px 20px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.22); --gl-shadow-light:0 2px 10px rgba(16,32,43,.09), 0 1px 2px rgba(16,32,43,.06); /* Dark is also the pre-theme-resolved fallback (matches each app's own default), so plain :root carries the dark values. */ --gl-page:#0b1418; --gl-surface:#121e24; --gl-surface-2:#17272e; --gl-text:#e9f1f3; --gl-muted:#93a6ad; --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:#1e323b; --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:#f2f5f6; --gl-surface:#ffffff; --gl-surface-2:#e9eef0; --gl-text:#14232a; --gl-muted:#5c6d75; --gl-line:#d9e2e5; --gl-shadow:var(--gl-shadow-light); --ink:var(--gl-page); --panel:var(--gl-surface); --panel-2:var(--gl-surface-2); --panel-3:#dfe7ea; --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:#0b1418; --gl-surface:#121e24; --gl-surface-2:#17272e; --gl-text:#e9f1f3; --gl-muted:#93a6ad; --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:#1e323b; --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; } /* A