/* Lifted directly from portal-flow-mockup.html (approved 2026-07-28) --
same variables/classes, so the real app matches the already-approved
look with no redesign. Visual polish stays out of scope per Jason's
explicit "don't get stuck in the weeds on color scheme" note. */
:root{
--shell-bg:#1e293b; --shell-bg-dark:#0f172a; --shell-accent:#475569; --shell-accent-hover:#334155;
--navy:#1F2A56; --navy-dark:#12193a;
--amber:#B8860B; --red:#c0392b; --green:#2E7D32;
--font-brand:'Playfair Display',Georgia,serif;
/* Day/night mode (2026-08-10, ported from Style Builder's matrix.html --
same idea: a handful of custom properties swapped by a JS toggle,
persisted in localStorage, default light here since this app's
existing look (unlike Style Builder's default-dark) is light-first and
shouldn't change for anyone who doesn't touch the toggle. See
html[data-theme="dark"] below for the dark values and layout.html for
the toggle script.
--navy / --navy-dark stay FIXED brand colors when used as a
BACKGROUND (topbar, table header, solid buttons) -- white text on navy
reads fine in either mode, no swap needed. --navy-text is the
mode-aware version for when navy is used as TEXT or a border color
instead (headings, active-tab labels, KPI values, bucket-toggle
buttons) -- plain navy text on a dark surface is nearly unreadable,
so this lightens to a navy-blue tint in dark mode. */
--page-bg:#e9edf2; --surface:#ffffff; --border:#dde3ea; --border-soft:#eef1f5;
--text:#1a1a1a; --muted:#64748b; --muted-soft:#94a3b8;
--tab-active-bg:#eef1f8; --navy-text:var(--navy);
}
html[data-theme="dark"]{
--page-bg:#12151c; --surface:#1a1f2b; --border:#2a3140; --border-soft:#242a37;
--text:#e6e9ef; --muted:#9aa4b6; --muted-soft:#7b859a;
--tab-active-bg:#20283a; --navy-text:#8fa5d9;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--page-bg);color:var(--text);}
/* ---- funnel screens (login / forgot / set-password / wms / company) ---- */
/* .screen's own dark navy gradient is intentionally NOT theme-driven --
it's already dark in both modes, matches the workspace topbar/tile-icon
treatment which is also fixed-brand rather than mode-aware. */
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;
background:linear-gradient(160deg,var(--shell-bg) 0%,var(--shell-bg-dark) 100%);padding:40px 20px;}
.funnel-card{background:var(--surface);border-radius:10px;padding:36px 40px;width:100%;max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.35);}
.rl-logo{height:34px;width:auto;display:block;margin:0 auto 22px auto;}
.funnel-heading{font-size:22px;font-weight:700;color:var(--text);margin:0 0 24px 0;text-align:center;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600;}
.field input,.field select{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:6px;font-size:14px;outline:none;
background:var(--surface);color:var(--text);}
.field input:focus,.field select:focus{border-color:var(--shell-accent-hover);}
.btn-secondary{padding:8px 14px;background:var(--surface);color:var(--text);border:1.5px solid var(--border);
border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;}
.btn-secondary:hover{border-color:var(--shell-accent-hover);}
.btn-primary{width:100%;padding:12px;background:var(--shell-bg-dark);color:#fff;border:none;border-radius:6px;
font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;}
.btn-primary:hover{background:var(--shell-accent-hover);}
.mock-note{text-align:center;font-size:11px;color:var(--muted-soft);margin-top:14px;}
.mock-note a{color:var(--shell-accent-hover);font-weight:600;text-decoration:none;}
.flash{background:#fee2e2;color:#991b1b;border-radius:6px;padding:8px 12px;font-size:12.5px;margin-bottom:14px;}
/* ---- tile grids (wms select, company select) ---- */
.tile-wrap{width:100%;max-width:640px;}
.tile-wrap h2{color:#fff;font-size:20px;text-align:center;margin:0 0 6px 0;}
.tile-wrap .breadcrumb{color:#94a3b8;text-align:center;font-size:12px;margin-bottom:28px;}
.tiles{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.tile{background:var(--surface);border-radius:10px;width:220px;padding:28px 20px;text-align:center;cursor:pointer;
box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .12s ease;position:relative;text-decoration:none;display:block;}
.tile:hover:not(.disabled){transform:translateY(-4px);}
.tile.disabled{cursor:not-allowed;opacity:.55;}
.tile .tile-icon{width:48px;height:48px;border-radius:10px;background:var(--shell-bg);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;margin:0 auto 14px auto;}
/* Real WMS logos (added 2026-08-07) -- capped box, not a fixed square,
since each vendor's logo is its own wordmark aspect ratio (Extensiv
~200x81, Ship Hero ~169x49); auto width/height inside that cap keeps
both readable without stretching or cropping either one. */
.tile .tile-logo{display:block;max-width:150px;max-height:44px;width:auto;height:auto;margin:0 auto 14px auto;}
.tile .tile-name{font-size:15px;font-weight:700;color:var(--text);}
.tile .tile-sub{font-size:11px;color:var(--muted);margin-top:4px;}
.badge-soon{position:absolute;top:10px;right:10px;background:#94a3b8;color:#fff;font-size:9px;font-weight:700;
padding:2px 7px;border-radius:10px;letter-spacing:.4px;}
.back-link{color:#94a3b8;font-size:12px;margin-top:26px;cursor:pointer;text-decoration:underline;}
.back-link:hover{color:#fff;}
/* ---- workspace shell (client=navy, ops=dark) ---- */
/* Sticky top+side nav (2026-08-08, Jason's ask -- tested first on SA2,
rolled out site-wide since he wants it on Spell/ShonaJoy too). Topbar
height is ~51px (10px+10px padding + ~31px of brand-name/crumb text) --
that's the existing constant .ws-sidebar's min-height already assumed
below, reused here as the sidebar's sticky offset so it tucks in flush
under the topbar instead of overlapping it. No JS/scroll-container
changes needed: position:sticky on both plus the page's normal
document scroll is enough to pin the chrome while .ws-content scrolls
past underneath it. */
.ws-topbar{color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 22px;
position:sticky;top:0;z-index:30;}
.ws-topbar.navy{background:var(--navy);}
.ws-topbar.ops{background:var(--shell-bg-dark);}
.ws-brand{display:flex;align-items:center;gap:12px;}
.ws-brand-name{font-family:var(--font-brand);font-weight:700;font-size:18px;}
.ws-crumb{font-size:11px;color:#c7cede;margin-top:1px;}
.ws-user{font-size:12px;display:flex;align-items:center;gap:14px;}
.ws-user a{color:#c7cede;text-decoration:underline;cursor:pointer;}
.ws-user a:hover{color:#fff;}
/* Day/night toggle button (2026-08-10) -- lives inside .ws-user, always on
the navy/dark topbar background in every mode, so its own colors stay
fixed (light-on-dark) rather than theme-driven, same reasoning as the
topbar itself. Icon swaps via CSS ::after keyed off the html[data-theme]
attribute -- no JS needed to sync the icon on page load, only to flip
the attribute itself (see layout.html's toggleTheme()). */
.mode-toggle{background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:5px;color:#fff;
cursor:pointer;font-size:12.5px;padding:3px 9px;line-height:1.4;}
.mode-toggle:hover{border-color:#fff;}
.mode-toggle::after{content:"\1F319";} /* 🌙 -- click to go dark */
html[data-theme="dark"] .mode-toggle::after{content:"\2600\FE0F";} /* ☀️ -- click to go light */
/* Accent color swatches (2026-08-10, ported from Style Builder's
theme-swatches) -- also lives inside .ws-user on the fixed navy/dark
topbar, so the ring color for the active swatch stays fixed white rather
than theme-driven. Populated by layout.html's initAccentSwatches(), one
circle per RL_ACCENTS entry, background set inline per swatch (the
accent's own color) since that value is data, not something a CSS class
per color would scale well for. */
.theme-swatches{display:flex;align-items:center;gap:5px;}
.swatch{width:13px;height:13px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s ease;}
.swatch:hover{transform:scale(1.25);}
.swatch.active{border-color:#fff;}
.ws-body{display:flex;align-items:flex-start;}
.ws-sidebar{width:210px;background:var(--surface);border-right:1px solid var(--border);min-height:calc(100vh - 51px);padding:18px 0;
position:sticky;top:51px;height:calc(100vh - 51px);overflow-y:auto;align-self:flex-start;}
.ws-sidebar .section-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted-soft);
padding:0 18px;margin-bottom:8px;font-weight:700;}
.ws-tab{display:block;padding:10px 18px;font-size:13.5px;color:var(--text);cursor:pointer;border-left:3px solid transparent;
text-decoration:none;}
.ws-tab:hover{background:var(--border-soft);}
.ws-tab.active{border-left:3px solid var(--navy);background:var(--tab-active-bg);color:var(--navy-text);font-weight:700;}
.ws-content{flex:1;padding:26px 30px;}
.ws-content h1{font-family:var(--font-brand);font-size:20px;color:var(--navy-text);margin:0 0 4px 0;}
.ws-content .subhead{font-size:12.5px;color:var(--muted);margin-bottom:18px;}
/* Fixed-light "island" for separately-generated report content that
doesn't know about day/night mode (2026-08-10) -- see the comment in
sandbag_workspace.html for the full story. Deliberately NOT using
var(--surface)/var(--text) here -- the whole point is to opt OUT of
theming for this region, not to theme it a different way. */
.report-frame{background:#fff;color:#1a1a1a;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.tool-controls{display:flex;gap:10px;margin-bottom:16px;}
.tool-controls input{flex:1;padding:10px 12px;border:2px solid var(--navy-text);border-radius:6px;font-size:14px;
background:var(--surface);color:var(--text);}
.tool-controls button{padding:9px 16px;border:1.5px solid var(--navy);background:var(--navy);color:#fff;
border-radius:6px;font-size:12.5px;cursor:pointer;font-weight:600;}
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:8px;overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:10px;}
th{background:var(--navy);color:#fff;text-align:left;padding:8px 10px;font-size:12px;}
td{padding:8px 10px;font-size:12.5px;border-bottom:1px solid var(--border-soft);}
tr:last-child td{border-bottom:none;}
.badge,.status-pill{padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:700;color:#fff;display:inline-block;}
.status-open,.badge-notproc{background:var(--amber);} .status-received,.status-completed{background:var(--green);}
.badge-missing{background:var(--red);}
.none{color:var(--muted-soft);}
.sku-note{font-size:10.5px;margin-top:2px;}
.sku-note-warn{color:var(--red);} .sku-note-muted{color:var(--muted-soft);}
/* Age-bucket toggle (Returns dashboards, added 2026-08-07) -- pill buttons,
same navy theme as .tool-controls button but outlined/inactive by default
so the selected bucket is visually obvious. Kept generic (not Spell- or
Shona-Joy-specific) so any future compiled-JSON section with the same
"several precomputed views, toggle between them" shape can reuse it. */
.bucket-controls{display:flex;gap:8px;margin:18px 0 6px 0;flex-wrap:wrap;}
.bucket-btn{padding:7px 14px;border:1.5px solid var(--navy-text);background:var(--surface);color:var(--navy-text);
border-radius:16px;font-size:12px;cursor:pointer;font-weight:600;}
.bucket-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
/* Sticky bucket-selector bar (added 2026-08-08, Jason's ask -- scrolling
past the buttons meant scrolling back up just to change time period).
top:51px matches the topbar's own height (same offset already used for
.ws-sidebar's sticky positioning below), so this tucks in flush beneath
the topbar rather than overlapping it. Generic name (not Spell/Shona-Joy
specific) since any page with a bucket-controls-style selector can reuse
this wrapper. */
.returns-sticky-controls{position:sticky;top:51px;z-index:20;background:var(--surface);
padding-top:4px;margin-bottom:6px;border-bottom:1px solid var(--border-soft);}
.returns-sticky-controls .bucket-controls{margin-bottom:6px;}
.returns-sticky-controls .meta-line{margin-bottom:10px;}
/* KPI cards (added 2026-08-08, Jason's ask -- replaces the old full-width
green "Returned Units" box + a plain paragraph for Fit-Related/Too-Big-
vs-Too-Small with a row of compact stat cards, similar in spirit to
Courtney's reference report's header cards but in this portal's own
navy/amber palette, not her green theme -- same "her data shape, not her
style" rule as everywhere else on these two pages. */
.kpi-row{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 22px 0;}
.kpi-card{flex:1;min-width:190px;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--navy);
border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.kpi-card .kpi-value{font-family:var(--font-brand);font-size:26px;font-weight:700;
color:var(--navy-text);line-height:1.15;}
.kpi-card .kpi-label{font-size:11.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;
letter-spacing:.4px;}
.kpi-card .kpi-sub{font-size:11.5px;color:var(--muted-soft);margin-top:6px;}
/* Centers page content instead of letting wide tables stretch edge-to-edge
on wide monitors (added 2026-08-08, Jason's ask, scoped to the Spell/
Shona Joy returns pages for now rather than changing .ws-content
site-wide, since that would also affect Sandbag/ops pages). */
.content-centered{max-width:1100px;margin:0 auto;}
/* Section cards (added 2026-08-08, follow-up) -- wraps each chart+table
section (Why Customers Return, Fit Returns by Size, Return Volume by
Month, Most-Returned Styles) in its own white boxed panel. Jason's real
bug report: without a background behind them, a Chart.js canvas (own
background is transparent) sat directly on the page's body background,
making the gap around navy/amber bars look like a stray blue tint
instead of clean whitespace. A bordered white card behind the whole
section (not just the canvas) fixes that and gives every section the
same "boxed" visual language as the KPI cards above. */
.section-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
padding:18px 20px 4px 20px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.section-card h2{margin-top:0 !important;}
.error-panel{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:8px;padding:14px 16px;
font-size:12.5px;margin-bottom:16px;}
.placeholder-panel{background:#eef1f8;border:1px dashed #94a3b8;color:#475569;border-radius:8px;
padding:14px 16px;font-size:12.5px;margin-bottom:16px;}
.sample-tag{font-size:10.5px;color:var(--muted-soft);font-style:italic;margin-top:8px;}
.meta-line{font-size:11px;color:var(--muted-soft);margin-bottom:14px;}