/* ========================================================================== Wholesale Analytics - theme -------------------------------------------------------------------------- Dark by default, light on request. Everything downstream reads the tokens in this block, so switching `data-theme` on re-skins the whole app without a second stylesheet. The palette comes out of the business rather than off a shelf. This is a chilled-protein distributor: cold storage, steel, condensation, and a book of business measured in dollars per pound. So the canvas is graphite with a cool cast, and the single accent is lifted straight from the bars in the existing logo (var(--wa-good) / var(--wa-good) / var(--wa-good)) and brightened just enough to hold contrast on a dark ground. The mark and the interface agree by construction instead of by coincidence. One accent, and a three-stop status ramp for the one thing this business argues about - whether a margin is on target, under target, or under the floor. Nothing else gets to be colourful. ========================================================================== */ :root { color-scheme: dark; /* --- surfaces: five steps, cool graphite ----------------------------- */ --wa-canvas: #0f1419; --wa-canvas-deep: #0a0e12; --wa-surface: #161d23; --wa-surface-2: #1c252d; --wa-surface-3: #232e37; --wa-sunken: #10161b; /* --- lines: hairlines only, never a box ------------------------------ */ --wa-hairline: #26313a; --wa-hairline-soft: #1d262d; --wa-hairline-strong: #35434f; /* --- type ------------------------------------------------------------ */ --wa-text: #e6edf3; --wa-text-dim: #9aa8b4; --wa-text-faint: #6c7a86; --wa-text-inverse: #0f1419; --wa-on-dark: #f4f8fb; --wa-on-dark-muted: rgba(230, 237, 243, 0.74); /* --- accent: the logo's green, cooled toward the cold room ----------- */ --wa-accent: #54c9a0; /* Ink for text sitting *on* the accent. It was never defined, so the demo call-to-action fell back to white on light mint - 2.05:1, against a 4.5:1 requirement - and read as a blank green rectangle. */ --wa-accent-contrast: #07130f; --wa-cta-bg: #54c9a0; --wa-accent-bright: #6fdcb5; --wa-accent-deep: #2f8f70; --wa-accent-wash: rgba(84, 201, 160, 0.12); --wa-accent-line: rgba(84, 201, 160, 0.32); /* --- status: margin against target, and nothing else ----------------- */ --wa-good: #54c9a0; --wa-good-wash: rgba(84, 201, 160, 0.12); --wa-warn: #e0a548; --wa-warn-wash: rgba(224, 165, 72, 0.13); --wa-bad: #e2685f; --wa-bad-wash: rgba(226, 104, 95, 0.13); --wa-info: #6aa9d8; --wa-info-wash: rgba(106, 169, 216, 0.13); /* --- legacy aliases -------------------------------------------------- */ /* Fourteen stylesheets and eighty-five templates were written against the old names. Aliasing them costs nothing and means the retheme did not have to touch every file that ever said `var(--wa-primary)`. */ --wa-primary: var(--wa-accent); --wa-primary-soft: var(--wa-surface-2); --wa-dark: var(--wa-canvas-deep); --wa-border: var(--wa-hairline); /* --- elevation: light comes from above, weakly ----------------------- */ --wa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --wa-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); --wa-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.45); /* --- type scale ------------------------------------------------------ */ --wa-font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; /* Space Grotesk carries the display voice and, more importantly, has the tabular figures every number in this product needs to line up in. */ --wa-font-display: "Space Grotesk", "Manrope", system-ui, sans-serif; --wa-font-mono: "Space Grotesk", ui-monospace, "Cascadia Mono", monospace; --wa-radius-sm: 6px; --wa-radius: 10px; --wa-radius-lg: 14px; /* --- categorical series ----------------------------------------------- A fixed-order palette for chart series, assigned by entity and never cycled. Both modes were validated against their own surface with the dataviz validator (lightness band, chroma floor, CVD adjacent-pair separation, normal-vision floor, contrast) - the ordering matters, because the checks run on adjacent pairs. Do not reorder without re-running it. Status colours above are reserved for state and are never a series. */ --wa-cat-1: #199e70; --wa-cat-2: #3987e5; --wa-cat-3: #c98500; --wa-cat-4: #d55181; --wa-cat-5: #9085e9; --wa-cat-6: #d95926; /* --- Bootstrap mappings ---------------------------------------------- */ --bs-body-bg: var(--wa-canvas); --bs-body-color: var(--wa-text); --bs-emphasis-color: var(--wa-text); --bs-secondary-color: var(--wa-text-dim); --bs-tertiary-color: var(--wa-text-faint); --bs-border-color: var(--wa-hairline); --bs-border-color-translucent: var(--wa-hairline); --bs-primary: var(--wa-accent); --bs-primary-rgb: 84, 201, 160; --bs-link-color: var(--wa-accent); --bs-link-color-rgb: 84, 201, 160; --bs-link-hover-color: var(--wa-accent-bright); --bs-card-bg: var(--wa-surface); --bs-card-border-color: var(--wa-hairline); --bs-btn-focus-shadow-rgb: 84, 201, 160; --bs-body-font-family: var(--wa-font-ui); --bs-heading-color: var(--wa-text); --bs-secondary-bg: var(--wa-surface-2); --bs-tertiary-bg: var(--wa-surface-3); --bs-highlight-bg: var(--wa-accent-wash); --bs-code-color: var(--wa-accent-bright); --bs-border-radius: var(--wa-radius); --bs-border-radius-sm: var(--wa-radius-sm); --bs-border-radius-lg: var(--wa-radius-lg); --bs-border-radius-xl: var(--wa-radius-lg); --bs-border-width: 1px; --bs-btn-border-radius: var(--wa-radius-sm); --bs-btn-padding-x: 0.95rem; --bs-btn-padding-y: 0.45rem; } /* -------------------------------------------------------------------------- Light theme. Not an inversion - the same design re-pitched for paper, so a reader who prefers light does not get a washed-out copy of the dark one. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --wa-canvas: #f4f6f7; --wa-canvas-deep: #e8ecee; --wa-surface: #ffffff; --wa-surface-2: #f7f9fa; --wa-surface-3: #eef2f4; --wa-sunken: #eaeef0; --wa-hairline: #dde3e7; --wa-hairline-soft: #e9edf0; --wa-hairline-strong: #c3ccd3; --wa-text: #16211f; --wa-text-dim: #55635f; --wa-text-faint: #7d8a86; --wa-text-inverse: #ffffff; --wa-on-dark: #ffffff; --wa-on-dark-muted: rgba(255, 255, 255, 0.76); --wa-accent: #1f8a67; /* White on this green is 4.29:1 - still short of AA at this text size - so the call-to-action darkens its own background rather than its label. */ --wa-accent-contrast: #ffffff; --wa-cta-bg: #0f5c44; --wa-accent-bright: #16775a; --wa-accent-deep: #0f5c44; --wa-accent-wash: rgba(31, 138, 103, 0.10); --wa-accent-line: rgba(31, 138, 103, 0.28); --wa-good: #1f8a67; --wa-good-wash: rgba(31, 138, 103, 0.10); --wa-warn: #a96c10; --wa-warn-wash: rgba(169, 108, 16, 0.11); --wa-bad: #c0453c; --wa-bad-wash: rgba(192, 69, 60, 0.10); --wa-info: #2b6ca3; --wa-info-wash: rgba(43, 108, 163, 0.10); --wa-shadow-sm: 0 1px 2px rgba(16, 33, 30, 0.06); --wa-shadow: 0 2px 10px rgba(16, 33, 30, 0.07); --wa-shadow-lg: 0 12px 30px rgba(16, 33, 30, 0.10); --wa-cat-1: #1baf7a; --wa-cat-2: #2a78d6; --wa-cat-3: #eda100; --wa-cat-4: #e87ba4; --wa-cat-5: #4a3aa7; --wa-cat-6: #eb6834; --bs-primary-rgb: 31, 138, 103; --bs-link-color-rgb: 31, 138, 103; --bs-btn-focus-shadow-rgb: 31, 138, 103; } body { font-family: var(--wa-font-ui); background-color: var(--wa-canvas); color: var(--wa-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; } /* Every figure in this product is money, weight or a percentage, and they all sit in columns. Line them up everywhere rather than remembering to. */ table, .wa-num, .kpi-value, .metric-value, [class*="-value"], [class*="-metric"], [data-metric] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } a { color: var(--wa-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover, a:focus { color: var(--wa-accent-bright); } .app-shell { position: relative; min-height: 100vh; background: var(--wa-canvas); } /* One weak light source, top-left, so cards read as lifted off the canvas without a drop shadow on every element. */ .app-shell::before { content: ""; position: fixed; inset: 0; background: radial-gradient(1100px 620px at 4% -8%, var(--wa-good-wash), transparent 62%), radial-gradient(900px 500px at 96% 0%, var(--wa-info-wash), transparent 60%); pointer-events: none; z-index: 0; } :root[data-theme="light"] .app-shell::before { background: radial-gradient(1100px 620px at 4% -8%, var(--wa-good-wash), transparent 62%), radial-gradient(900px 500px at 96% 0%, var(--wa-info-wash), transparent 60%); } .app-shell > * { position: relative; z-index: 1; } .app-main { padding-top: 1.5rem; padding-bottom: 3rem; } .navbar-wholesale { background: linear-gradient(135deg, var(--wa-dark), var(--wa-surface-2), var(--wa-primary)); box-shadow: 0 14px 35px rgba(17, 17, 17, 0.28); } /* The nav is `navbar-expand-xxl`, so it lays out horizontally from 1400px up - but nine workspace links plus the theme toggle, notifications, admin and logout need about 1,560px. Between those two numbers the bar ran off the right edge and gave the whole document a horizontal scrollbar: measured 1,556px of content in a 1,440px viewport, with the theme toggle and the notification bell sitting past the fold. 1440 and 1512 are two of the most common laptop widths, so this was the default first impression. Bootstrap sets `flex-wrap: nowrap` on an expanded navbar. Letting it wrap costs a second row at those widths and nothing at all above ~1,560px, which is a better trade than a page that scrolls sideways. */ @media (min-width: 1400px) { .navbar-wholesale > .container-fluid, .navbar-wholesale .navbar-collapse, .navbar-wholesale .navbar-nav { flex-wrap: wrap; row-gap: 0.25rem; } /* Drop the inter-item gap; the link padding is tightened at the end of this file, where it can actually win - see the note there. */ .navbar-wholesale .navbar-nav.gap-lg-2 { gap: 0 !important; } } .navbar-wholesale .navbar-brand { color: var(--wa-text-inverse); text-transform: uppercase; letter-spacing: 0.18rem; font-size: 0.82rem; } .navbar-wholesale .navbar-brand:hover, .navbar-wholesale .navbar-brand:focus { color: var(--wa-text-inverse); } .navbar-brand-img { display: block; height: 40px; width: auto; } .navbar-wholesale .navbar-nav .nav-link { color: var(--wa-text-inverse); font-weight: 500; letter-spacing: 0.03rem; transition: color 0.2s ease, border-bottom-color 0.2s ease; border-bottom: 2px solid transparent; padding-bottom: 0.35rem; } .navbar-wholesale .navbar-nav .nav-link:hover, .navbar-wholesale .navbar-nav .nav-link:focus { color: var(--wa-text-inverse); border-bottom-color: var(--wa-primary); } .navbar-wholesale .navbar-nav .nav-link.active { color: var(--wa-text-inverse); border-bottom-color: var(--wa-accent); } .navbar-wholesale .dropdown-menu { border-radius: 0.75rem; border: 1px solid var(--wa-hairline); background-color: rgba(29, 29, 29, 0.95); } .navbar-wholesale .dropdown-item { color: var(--wa-text-inverse); } .navbar-wholesale .dropdown-item:hover { color: var(--wa-text-inverse); background-color: var(--wa-accent-wash); } .bg-wa-soft { background-color: var(--wa-primary-soft) !important; } .bg-wa-dark { background-color: var(--wa-dark) !important; } .text-wholesale { color: var(--wa-primary) !important; } .border-wholesale { border-color: var(--wa-primary) !important; } .card-wholesale { border-radius: 1rem; border: 1px solid var(--wa-border); box-shadow: 0 10px 25px rgba(17, 17, 17, 0.08); } .page-shell, .page-card { background-color: var(--wa-surface); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06); } .page-shell { padding: 2rem; } .page-header { background: linear-gradient(135deg, var(--wa-dark), var(--wa-accent)); color: var(--wa-text-inverse); border-radius: 1rem; padding: 1.75rem 2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px rgba(17, 17, 17, 0.35); } .page-header .badge { background-color: var(--wa-surface-2); color: var(--wa-text-inverse); border: 1px solid var(--wa-hairline); } .filter-bar, .filters-panel { background-color: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: 1rem; padding: 1rem 1.5rem; box-shadow: 0 20px 40px rgba(17, 17, 17, 0.08); } .kpi-chip { border-radius: 0.9rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--wa-accent-wash), var(--wa-accent-wash)); border: 1px solid var(--wa-accent-wash); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .kpi-chip__label { text-transform: uppercase; letter-spacing: 0.08rem; font-size: 0.68rem; color: var(--wa-text); } .kpi-chip__value { font-weight: 600; color: var(--wa-dark); } .hero-card { background: radial-gradient(circle at 20% 20%, var(--wa-warn-wash), transparent 65%), linear-gradient(135deg, rgba(17, 17, 17, 0.9), var(--wa-accent)); color: var(--wa-text-inverse); border-radius: 1.25rem; box-shadow: 0 28px 65px rgba(17, 17, 17, 0.38); } .hero-card .text-muted, .hero-card .small { color: var(--wa-text-inverse) !important; } .hero-card .badge { background-color: var(--wa-surface-2); color: var(--wa-text-inverse); border: 0; } .mini-kpi { background-color: var(--wa-surface-2); border-radius: 0.75rem; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; } .mini-kpi .label { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.05rem; color: var(--wa-text-inverse); } .mini-kpi .value { font-weight: 700; color: var(--wa-text-inverse); } .btn-primary { background-color: var(--wa-primary); border-color: var(--wa-primary); color: var(--wa-text-inverse); box-shadow: 0 16px 30px -16px rgba(150, 89, 81, 0.55); } .btn-primary:hover, .btn-primary:focus { background-color: var(--wa-accent-deep); border-color: var(--wa-accent-deep); box-shadow: 0 18px 35px -16px rgba(17, 17, 17, 0.45); } .btn-outline-primary { color: var(--wa-primary); border-color: var(--wa-primary); } .btn-outline-primary:hover, .btn-outline-primary:focus { color: var(--wa-text-inverse); background-color: var(--wa-primary); border-color: var(--wa-primary); } .btn-link { color: var(--wa-primary); } .btn-link:hover, .btn-link:focus { color: var(--wa-accent-deep); text-decoration: underline; } .table thead th { background-color: var(--wa-accent-wash); color: var(--wa-dark); border-bottom-color: var(--wa-border); font-weight: 600; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--wa-accent-wash); } .table-hover > tbody > tr:hover > * { background-color: var(--wa-warn-wash); } .badge-wholesale { background-color: var(--wa-warn-wash); color: var(--wa-dark); border: 1px solid var(--wa-warn-wash); } .chart-card { border-radius: 1.25rem; border: 1px solid rgba(17, 17, 17, 0.08); background: linear-gradient(160deg, var(--wa-surface), var(--wa-surface)); box-shadow: 0 22px 55px rgba(17, 17, 17, 0.12); } .chip-accent { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background-color: var(--wa-warn-wash); color: var(--wa-dark); font-weight: 600; } .shadow-soft { box-shadow: 0 16px 48px rgba(17, 17, 17, 0.08) !important; } .border-faint { border: 1px solid rgba(17, 17, 17, 0.07); } .datatable th, .datatable td { border-color: var(--wa-border); } .form-select, .form-control { border-radius: 0.75rem; border-color: var(--wa-border); } .form-select:focus, .form-control:focus { border-color: var(--wa-accent); box-shadow: 0 0 0 0.2rem rgba(150, 89, 81, 0.2); } .alert-primary { background-color: var(--wa-accent-wash); border-color: var(--wa-accent-wash); color: var(--wa-dark); } .toast { border-radius: 1rem; border: 1px solid rgba(17, 17, 17, 0.08); box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12); } /* Filters panel styling */ .filters-panel { position: relative; } .filters-panel-header { background: linear-gradient(135deg, var(--wa-dark), var(--wa-accent)); color: var(--wa-text-inverse); border-radius: 1rem 1rem 0 0; padding: 1.25rem 1.5rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .filters-panel-header h5 { letter-spacing: 0.08rem; text-transform: uppercase; font-size: 0.85rem; } .filters-panel-header .btn { border-radius: 999px; border: none; background-color: var(--wa-surface-2); color: var(--wa-text-inverse); font-weight: 600; padding: 0.45rem 0.95rem; } .filters-panel-header .btn:hover, .filters-panel-header .btn:focus { background-color: var(--wa-surface-2); color: var(--wa-text-inverse); } .filters-panel-body { background: var(--wa-surface); border: 1px solid var(--wa-border); border-top: none; border-radius: 0 0 1rem 1rem; padding: 1.75rem 1.5rem; box-shadow: 0 22px 45px rgba(17, 17, 17, 0.06); } .filter-section { background: var(--wa-accent-wash); border: 1px solid var(--wa-accent-wash); border-radius: 0.9rem; padding: 1rem 1.25rem; } .filter-section-title { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.12rem; color: var(--wa-text); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--wa-accent-wash); } .date-input-group { min-width: 160px; } .date-input-group input { border-radius: 0.75rem; border: 1px solid var(--wa-border); transition: all 0.2s ease; } .date-input-group input:focus { border-color: var(--wa-accent); box-shadow: 0 0 0 0.2rem rgba(150, 89, 81, 0.22); } .quick-ranges .btn { border-radius: 999px; border-color: var(--wa-accent-wash); color: var(--wa-primary); background-color: var(--wa-surface); font-weight: 500; padding: 0.35rem 0.95rem; transition: all 0.2s ease; } .quick-ranges .btn:hover, .quick-ranges .btn:focus { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(17, 17, 17, 0.1); background-color: var(--wa-accent-wash); border-color: var(--wa-accent-wash); } .quick-ranges .btn.active { color: var(--wa-text-inverse); background: var(--wa-primary); border-color: var(--wa-primary); box-shadow: 0 12px 24px rgba(150, 89, 81, 0.24); } .filter-group { background: var(--wa-surface); border: 1px solid var(--wa-border); border-radius: 0.9rem; padding: 1rem 1.25rem; height: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .filter-group:hover { border-color: var(--wa-accent); box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08); } .filter-summary .badge { background: var(--wa-accent-wash); color: var(--wa-dark); border: 1px solid var(--wa-accent-wash); border-radius: 999px; } #filtersToggleIcon { transition: transform 0.3s ease; } [aria-expanded="false"] #filtersToggleIcon { transform: rotate(-90deg); } #filtersApply { box-shadow: 0 12px 24px rgba(150, 89, 81, 0.25); border-radius: 999px; padding-inline: 1.5rem; } #filtersApply:hover, #filtersApply:focus { box-shadow: 0 18px 32px rgba(17, 17, 17, 0.18); } #resetFiltersBtn { border-radius: 999px; border-color: var(--wa-accent-wash); color: var(--wa-primary); } #resetFiltersBtn:hover, #resetFiltersBtn:focus { background-color: var(--wa-accent-wash); border-color: var(--wa-accent); color: var(--wa-primary); } .filters-panel .card-footer { background: var(--wa-surface); border-top: 1px solid var(--wa-border); border-radius: 0 0 1rem 1rem; padding: 1.25rem 1.5rem; } .filters-panel .card-footer .btn-link { color: var(--wa-primary); font-weight: 600; } .filters-panel .card-footer .btn-link:hover { color: var(--wa-accent-deep); } .filters-panel .card-footer .btn-outline-primary, .filters-panel .card-footer .btn-outline-secondary { border-radius: 0.75rem; } .msx { border: 1px solid var(--wa-border); border-radius: 1rem; background-color: var(--wa-surface); box-shadow: 0 18px 48px rgba(17, 17, 17, 0.08); overflow: hidden; display: flex; flex-direction: column; } .msx-head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--wa-border); background: var(--wa-accent-wash); display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; } .msx-search { flex: 1; } .msx-search input { border-radius: 999px; border: 1px solid var(--wa-border); padding: 0.35rem 0.9rem; } .msx-search input:focus { border-color: var(--wa-accent); box-shadow: 0 0 0 0.15rem rgba(150, 89, 81, 0.2); } .msx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; } .msx-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--wa-warn-wash); color: var(--wa-dark); font-weight: 600; } .btn-close-sm { width: 0.75rem; height: 0.75rem; opacity: 0.6; transition: opacity 0.2s ease; } .btn-close-sm:hover { opacity: 1; } .msx-list { max-height: 240px; overflow-y: auto; padding: 0.6rem; } .msx-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border-radius: 0.6rem; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .msx-row:hover { background-color: var(--wa-accent-wash); transform: translateX(4px); } .msx-footer { padding: 0.6rem 1rem; border-top: 1px solid var(--wa-border); background: var(--wa-accent-wash); font-size: 0.85rem; color: var(--wa-text); display: flex; justify-content: space-between; align-items: center; } @media (max-width: 768px) { .quick-ranges { width: 100%; } .quick-ranges .btn { flex: 1; } .filter-group { margin-bottom: 1rem; } } /* Overview dashboard adjustments */ #overviewPage .hero-metric { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; } #overviewPage .hero-delta { font-weight: 600; } #overviewPage .hero-delta.positive { color: var(--wa-accent); } #overviewPage .hero-delta.negative { color: var(--wa-bad); } #overviewPage .hero-delta.neutral { color: var(--wa-text-inverse); } #overviewPage .chart-container { min-height: 320px; } #overviewPage .chart-container-sm { min-height: 200px; } @media (max-width: 576px) { #overviewPage .chart-container { min-height: 260px; } #overviewPage .chart-container-sm { min-height: 180px; } } .meat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .meat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16) !important; } .bg-gradient-meat { background: linear-gradient(135deg, var(--wa-accent), rgba(31, 16, 15, 0.92)); border: none; color: var(--wa-text-inverse); } .bg-gradient-yield { background: linear-gradient(135deg, var(--wa-warn), var(--wa-accent)); border: none; color: var(--wa-text-inverse); } /* Enterprise global filters shell */ .filters-shell { position: relative; overflow: hidden; border: 1px solid rgba(24, 33, 54, 0.08); border-radius: 1.25rem; background: radial-gradient(circle at top right, var(--wa-warn-wash), transparent 36%), linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); box-shadow: 0 22px 52px rgba(17, 17, 17, 0.08); } .filters-shell__header { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 1.75rem 1.25rem; background: linear-gradient(135deg, rgba(18, 30, 52, 0.98), var(--wa-info)), linear-gradient(135deg, var(--wa-accent-wash), transparent); color: var(--wa-text-inverse); } .filters-shell__headline, .filters-shell__tools { display: flex; flex-direction: column; gap: 0.75rem; } .filters-shell__headline { min-width: 0; flex: 1; } .filters-shell__eyebrow, .filters-section__eyebrow, .filters-context-strip__label, .saved-view-library__title { display: inline-flex; align-items: center; gap: 0.35rem; text-transform: uppercase; letter-spacing: 0.14rem; font-size: 0.7rem; font-weight: 700; color: var(--wa-text-inverse); } .filters-section__eyebrow, .filters-context-strip__label, .saved-view-library__title { color: var(--wa-text-dim); } .filters-shell__title-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; } .filters-shell__title { margin: 0; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -0.03rem; } .filters-shell__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--wa-text-inverse); font-size: 0.92rem; } .filters-shell__date { font-weight: 600; color: var(--wa-text-inverse); } .filters-shell__meta-sep { width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--wa-surface-2); } .filters-shell__badges, .filters-header-chips, .filters-actions__buttons, .saved-view-library__buttons, .saved-view-form__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .filters-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--wa-surface-2); border: 1px solid var(--wa-hairline); font-size: 0.82rem; font-weight: 600; color: var(--wa-text-inverse); } .filters-status-badge.is-warning { background: var(--wa-warn-wash); border-color: var(--wa-warn-wash); color: var(--wa-warn); } .filters-status-badge.is-neutral { background: var(--wa-surface-2); } .filters-collapse-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding-inline: 1rem; border: 1px solid var(--wa-hairline); background: var(--wa-surface-2); color: var(--wa-text-inverse); font-weight: 600; } .filters-collapse-btn:hover, .filters-collapse-btn:focus { color: var(--wa-text-inverse); background: var(--wa-surface-2); } .filters-shell__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.5rem 1.5rem; } .filters-context-strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 1rem; border-radius: 1rem; border: 1px solid var(--wa-info-wash); background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); } .filters-context-strip__value { font-size: 0.92rem; color: var(--wa-text); } .filters-context-strip__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 4rem; padding: 0.4rem 0.75rem; border-radius: 999px; background: var(--wa-info-wash); color: var(--wa-info); font-weight: 700; } .filters-form { display: flex; flex-direction: column; gap: 1rem; } .filters-section { border: 1px solid rgba(24, 33, 54, 0.08); border-radius: 1.1rem; background: var(--wa-surface); padding: 1.15rem 1.2rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .filters-section--date { background: radial-gradient(circle at top right, var(--wa-warn-wash), transparent 35%), linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); } .filters-section__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; } .filters-section__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: rgba(24, 33, 54, 0.92); } .filters-section__support { max-width: 28rem; font-size: 0.88rem; line-height: 1.45; text-align: right; color: var(--wa-text); } .filters-date-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; } .filters-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .filters-date-card, .saved-view-hub, .filters-workspace-empty, .filter-workspace { border: 1px solid rgba(24, 33, 54, 0.08); border-radius: 1rem; background: var(--wa-surface); } .filters-date-card { padding: 1rem; box-shadow: 0 12px 26px rgba(16, 22, 36, 0.04); } .filters-date-card .form-label, .saved-view-form .form-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1rem; font-weight: 700; color: var(--wa-text); margin-bottom: 0.65rem; } .filters-date-card .form-control, .saved-view-form .form-control { min-height: 3rem; border-radius: 0.9rem; border-color: rgba(24, 33, 54, 0.14); background: var(--wa-surface); } .filters-quick-range-panel { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; border-radius: 1rem; background: var(--wa-surface); border: 1px solid rgba(24, 33, 54, 0.07); } .filters-quick-range-panel__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1rem; font-weight: 700; color: var(--wa-text); } .filters-quick-ranges { display: flex; flex-wrap: wrap; gap: 0.6rem; } .filter-range-pill { border: 1px solid rgba(24, 33, 54, 0.12); background: var(--wa-surface); color: rgba(24, 33, 54, 0.86); border-radius: 999px; padding: 0.55rem 0.9rem; font-size: 0.84rem; font-weight: 600; line-height: 1; transition: all 0.18s ease; } .filter-range-pill:hover, .filter-range-pill:focus { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(17, 17, 17, 0.08); border-color: var(--wa-accent-wash); } .filter-range-pill.is-active { background: linear-gradient(135deg, var(--wa-accent), var(--wa-accent)); border-color: transparent; color: var(--wa-text-inverse); box-shadow: 0 14px 28px rgba(150, 89, 81, 0.22); } .filter-range-pill--ghost { background: var(--wa-surface); } .filters-selector-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; } .filter-tile { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; min-height: 4.3rem; padding: 0.65rem 0.85rem; text-align: left; border: 1px solid rgba(24, 33, 54, 0.09); border-radius: 0.75rem; background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); box-shadow: 0 8px 16px rgba(17, 17, 17, 0.03); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease; } .filter-tile:hover, .filter-tile:focus-visible { border-color: var(--wa-info-wash); box-shadow: 0 16px 28px rgba(17, 17, 17, 0.08); transform: translateY(-1px); } .filter-tile.is-open, .filter-tile.has-value { border-color: var(--wa-accent-wash); } .filter-tile.is-error { border-color: var(--wa-bad-wash); background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); } .filter-tile[disabled], .filter-tile[data-unavailable="1"] { opacity: 0.58; cursor: not-allowed; box-shadow: none; transform: none; } .filter-tile[disabled]:hover, .filter-tile[disabled]:focus-visible, .filter-tile[data-unavailable="1"]:hover, .filter-tile[data-unavailable="1"]:focus-visible { border-color: rgba(24, 33, 54, 0.09); box-shadow: none; transform: none; } .filter-tile.is-open { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); box-shadow: 0 20px 36px rgba(17, 17, 17, 0.08); } .filter-workspace[data-error="1"] { border-color: var(--wa-bad-wash); } .filter-tile__eyebrow, .filter-workspace__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12rem; font-weight: 700; color: var(--wa-text-dim); } .filter-tile__summary { min-height: 2.6rem; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: rgba(24, 33, 54, 0.88); } .filter-tile__meta { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-top: auto; } .filter-tile__count, .filter-workspace__selection-count { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(24, 33, 54, 0.06); color: rgba(24, 33, 54, 0.74); font-size: 0.78rem; font-weight: 700; } .filter-tile.has-value .filter-tile__count, .filter-tile.is-open .filter-tile__count { background: var(--wa-accent-wash); color: var(--wa-accent-deep); } .filter-tile__hint { font-size: 0.76rem; color: var(--wa-text); } .filter-tile.is-error .filter-tile__hint { color: var(--wa-bad); } #filterTileStatuses, #filterTileRegions, #filterTileCustomers { min-height: 3rem; padding: 0.5rem 0.72rem; gap: 0.18rem; } #filterTileStatuses .filter-tile__summary, #filterTileRegions .filter-tile__summary, #filterTileCustomers .filter-tile__summary { min-height: 1.7rem; font-size: 0.86rem; line-height: 1.22; } #filterTileStatuses .filter-tile__count, #filterTileRegions .filter-tile__count, #filterTileCustomers .filter-tile__count { min-width: 2.7rem; padding: 0.24rem 0.55rem; font-size: 0.74rem; } #filterTileStatuses .filter-tile__hint, #filterTileRegions .filter-tile__hint, #filterTileCustomers .filter-tile__hint { font-size: 0.72rem; } .filters-workspace-empty { display: flex; align-items: center; justify-content: center; min-height: 3.65rem; margin-top: 0.9rem; padding: 0.95rem 1rem; border-style: dashed; color: var(--wa-text); text-align: center; } .filters-dimension-workspace { position: fixed; top: 0; right: -500px; width: 500px; max-width: 90vw; height: 100vh; z-index: 2050; background: var(--wa-surface); border-left: 1px solid var(--wa-hairline); box-shadow: -10px 0 30px rgba(0,0,0,0.35); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 1.5rem; overflow-y: auto; margin-top: 0; } .filters-dimension-workspace.is-open { right: 0; } .filter-workspace { padding: 1rem; box-shadow: 0 16px 32px rgba(17, 17, 17, 0.05); } .filter-workspace__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.65rem; } .filter-workspace__title { margin: 0.2rem 0 0; font-size: 1.04rem; font-weight: 700; color: rgba(24, 33, 54, 0.92); } .filter-workspace__selection { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; align-items: center; } .filter-workspace__selection-text { font-size: 0.88rem; font-weight: 600; color: rgba(24, 33, 54, 0.78); } .filter-workspace__help { margin: 0 0 0.9rem; font-size: 0.84rem; color: var(--wa-text); } .filter-workspace.is-active { display: block; } .filters-chip-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .filter-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-radius: 999px; border: 1px solid rgba(24, 33, 54, 0.1); background: var(--wa-surface); color: rgba(24, 33, 54, 0.88); font-size: 0.84rem; font-weight: 600; } .filter-chip--muted { background: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text-inverse); } .filter-chip--removable { background: var(--wa-surface); } .filter-chip__label { color: var(--wa-text); text-transform: uppercase; letter-spacing: 0.08rem; font-size: 0.68rem; font-weight: 700; } .filter-chip__value { color: rgba(24, 33, 54, 0.9); } .filter-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: rgba(24, 33, 54, 0.06); color: rgba(24, 33, 54, 0.62); font-size: 0.62rem; } .filters-actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06); backdrop-filter: blur(8px); } .filters-actions__status { display: flex; flex-direction: column; gap: 0.2rem; } .filters-actions__state { font-size: 0.9rem; font-weight: 700; color: rgba(24, 33, 54, 0.9); } .filters-actions__state[data-pending="1"] { color: var(--wa-accent-deep); } .filters-actions__support, .saved-view-library__meta, .saved-view-form__help { font-size: 0.84rem; color: var(--wa-text); } .filters-actions .btn, .saved-view-form .btn, .saved-view-library__buttons .btn { border-radius: 0.9rem; padding-inline: 1rem; min-height: 2.75rem; font-weight: 600; } #filtersApply { padding-inline: 1.35rem; box-shadow: 0 14px 28px rgba(150, 89, 81, 0.22); } .saved-view-hub { padding: 1rem; box-shadow: 0 14px 30px rgba(17, 17, 17, 0.04); } .saved-view-hub__topline { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 1rem; align-items: start; margin-bottom: 1rem; } .saved-view-hub__controls { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: 0.2rem 0; } .saved-view-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; max-height: 16rem; overflow: auto; padding-right: 0.2rem; } .saved-view-card { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; padding: 0.9rem 1rem; text-align: left; border-radius: 0.95rem; border: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .saved-view-card:hover, .saved-view-card:focus { transform: translateY(-1px); border-color: var(--wa-accent-wash); box-shadow: 0 16px 26px rgba(17, 17, 17, 0.06); } .saved-view-card.is-active, .saved-view-card.is-selected { border-color: var(--wa-accent-wash); background: var(--wa-surface); } .saved-view-card__topline, .saved-view-card__meta { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .saved-view-card__name { font-size: 0.96rem; font-weight: 700; color: rgba(24, 33, 54, 0.92); } .saved-view-card__badge { display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; border-radius: 999px; background: var(--wa-accent-wash); color: var(--wa-accent-deep); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08rem; } .saved-view-card__summary { font-size: 0.88rem; font-weight: 600; color: rgba(24, 33, 54, 0.78); } .saved-view-card__meta { font-size: 0.78rem; color: var(--wa-text); } .filters-empty-state { display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: 1rem; border-radius: 0.95rem; border: 1px dashed rgba(24, 33, 54, 0.16); background: var(--wa-surface); color: var(--wa-text); text-align: center; } #filtersNoticeBanner { border-inline: 0; border-radius: 0; margin-bottom: 0; } .filters-shell .msx { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(24, 33, 54, 0.08); border-radius: 0.95rem; background: var(--wa-surface); overflow: hidden; } .filters-shell .msx-header { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem; border-bottom: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); } .filters-shell .msx-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .filters-shell .msx-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .filters-shell .msx-search { min-width: 10rem; flex: 1; } .filters-shell .msx-controls .btn-group { flex-wrap: wrap; } .filters-shell .msx-search:focus { border-color: var(--wa-accent-wash); } .filters-shell .msx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filters-shell .msx-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; border-radius: 999px; border: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); color: rgba(24, 33, 54, 0.88); font-size: 0.78rem; font-weight: 600; } .filters-shell .msx-chip.is-empty, .filters-shell .msx-chip.is-overflow { background: var(--wa-surface); } .filters-shell .msx-list { max-height: 14rem; overflow: auto; padding: 0.65rem; } .filters-shell .msx-empty-state { padding: 0.9rem 1rem; border-top: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); color: var(--wa-text); font-size: 0.84rem; } .filters-shell .msx-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 0.8rem; cursor: pointer; } .filters-shell .msx-row:hover { background: var(--wa-accent-wash); } .filters-shell .msx-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(24, 33, 54, 0.86); } .filters-shell .msx-footer { padding: 0.75rem 0.9rem; border-top: 1px solid rgba(24, 33, 54, 0.08); background: var(--wa-surface); font-size: 0.8rem; color: var(--wa-text); } .filters-shell .msx-footnote { color: var(--wa-text); } @media (max-width: 991.98px) { .filters-shell__header, .filters-section__header, .filters-actions, .saved-view-hub__controls { flex-direction: column; align-items: stretch; } .filters-shell__tools { width: 100%; } .filters-shell__badges, .filters-header-chips { width: 100%; } .filters-date-layout, .saved-view-hub__topline { grid-template-columns: 1fr; } .filters-date-fields { grid-template-columns: 1fr; } .filters-section__support { max-width: none; text-align: left; } } @media (max-width: 767.98px) { .filters-shell__header, .filters-shell__body { padding-inline: 1rem; } .filters-actions__buttons { width: 100%; } .filters-actions__buttons .btn { flex: 1 1 calc(50% - 0.75rem); } .filters-quick-ranges { gap: 0.45rem; } .filter-range-pill { width: calc(50% - 0.45rem); justify-content: center; } .saved-view-form__row { flex-direction: column; align-items: stretch; } .saved-view-list, .filters-selector-bar { grid-template-columns: 1fr; } .filter-workspace__header, .filter-workspace__selection { flex-direction: column; align-items: flex-start; } } @media (max-width: 575.98px) { .filters-actions__buttons .btn, .filter-range-pill { width: 100%; flex-basis: 100%; } } .bg-gradient-cold { background: linear-gradient(135deg, rgba(17, 17, 17, 0.92), var(--wa-surface-2)); border: none; color: var(--wa-text-inverse); } .metric-mini { padding: 0.75rem; background: var(--wa-accent-wash); border-radius: 0.75rem; border-left: 3px solid var(--wa-accent); } .metric-mini .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04rem; color: var(--wa-text); } .metric-mini .value { font-size: 1.2rem; font-weight: 600; color: var(--wa-dark); margin-top: 0.25rem; } .recommendation-item { padding: 0.75rem 1rem; margin-bottom: 0.75rem; border-left: 4px solid var(--wa-accent-wash); background: var(--wa-accent-wash); transition: transform 0.2s ease, box-shadow 0.2s ease; } .recommendation-item:hover { transform: translateX(4px); box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12); } .recommendation-badge { display: inline-block; padding: 0.35rem 0.75rem; margin-right: 0.75rem; font-weight: 600; font-size: 0.8rem; border-radius: 999px; background: var(--wa-warn-wash); color: var(--wa-dark); } [data-skeleton] .chart-container:empty, [data-skeleton] .chart-container-sm:empty, [data-skeleton] .metric-value:empty { position: relative; overflow: hidden; } [data-skeleton] .chart-container:empty::after, [data-skeleton] .chart-container-sm:empty::after, [data-skeleton] .metric-value:empty::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, var(--wa-accent-wash), var(--wa-accent-wash) 50%, var(--wa-accent-wash) ); animation: shimmer 1.4s linear infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .bi { display: inline-block; font-size: 1.2rem; } /* Velocity dashboard styling */ /* ======================================== VELOCITY PAGE - COMPREHENSIVE STYLES Designed for Meat Industry Analytics ======================================== */ /* Container & Background */ .velocity-container { background: linear-gradient(135deg, var(--wa-surface-2) 0%, var(--wa-surface) 100%); min-height: 100vh; } /* Hero Section */ .velocity-hero { padding: 1.5rem; background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; color: var(--wa-text-inverse); box-shadow: 0 10px 40px rgba(17, 17, 17, 0.25); margin-bottom: 2rem; } .velocity-icon-badge { width: 70px; height: 70px; background: var(--wa-surface-2); backdrop-filter: blur(10px); border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 8px 32px rgba(17, 17, 17, 0.1); } .gradient-text { background: linear-gradient(135deg, var(--wa-surface) 0%, var(--wa-surface-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .velocity-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; } .velocity-status-badge { background: linear-gradient(135deg, var(--wa-accent) 0%, var(--wa-warn) 100%); color: var(--wa-text-inverse); font-weight: 600; padding: 0.5rem 1rem; font-size: 0.875rem; border: none; } /* Export Buttons */ .btn-export-excel { background: linear-gradient(135deg, var(--wa-accent) 0%, var(--wa-primary) 100%); color: var(--wa-text-inverse); border: none; font-weight: 600; transition: all 0.3s ease; } .btn-export-excel:hover { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); color: var(--wa-text-inverse); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(211, 156, 95, 0.35); } .btn-export-csv { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); color: var(--wa-text-inverse); border: none; font-weight: 600; transition: all 0.3s ease; } .btn-export-csv:hover { background: linear-gradient(135deg, var(--wa-accent-deep) 0%, var(--wa-bad) 100%); color: var(--wa-text-inverse); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(150, 89, 81, 0.35); } .btn-help { background: var(--wa-surface-2); color: var(--wa-text-inverse); border: 1px solid var(--wa-hairline); backdrop-filter: blur(10px); } .btn-help:hover { background: var(--wa-surface-2); color: var(--wa-text-inverse); border-color: var(--wa-hairline); } /* Quick Insights Banner */ .quick-insights-banner { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; padding: 1.5rem; color: var(--wa-text-inverse); box-shadow: 0 10px 40px rgba(150, 89, 81, 0.28); } .insight-icon { font-size: 2.5rem; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .insight-item { text-align: center; } .insight-value { font-size: 1.5rem; font-weight: 700; color: var(--wa-text-inverse); } .insight-label { font-size: 0.75rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; } /* Control Panel */ .control-panel { background: var(--wa-surface); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08); border: 1px solid rgba(17, 17, 17, 0.05); } .control-label { color: var(--wa-text); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } .metric-select, .freq-select, .mode-select, .top-select, .category-select { border: 2px solid var(--wa-border); border-radius: 0.5rem; font-weight: 500; transition: all 0.3s ease; } .metric-select:focus, .freq-select:focus, .mode-select:focus, .top-select:focus, .category-select:focus { border-color: var(--wa-primary); box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } .btn-refresh { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); color: var(--wa-text-inverse); border: none; font-weight: 600; padding: 0.5rem 1.5rem; transition: all 0.3s ease; } .btn-refresh:hover { background: linear-gradient(135deg, var(--wa-accent-deep) 0%, var(--wa-primary) 100%); color: var(--wa-text-inverse); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } /* KPI Panel */ .kpi-panel { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(17, 17, 17, 0.25); } .kpi-header { padding: 1.5rem; border-bottom: 1px solid var(--wa-hairline); color: var(--wa-text-inverse); } .kpi-body { padding: 1.5rem; } .kpi-card { background: var(--wa-surface); border-radius: 0.8rem; padding: 1rem; box-shadow: 0 4px 15px rgba(17, 17, 17, 0.1); transition: all 0.3s ease; display: flex; align-items: center; gap: 1rem; position: relative; overflow: hidden; } .kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--kpi-color-1), var(--kpi-color-2)); } .kpi-blue { --kpi-color-1: var(--wa-primary); --kpi-color-2: var(--wa-accent-deep); } .kpi-green { --kpi-color-1: var(--wa-accent); --kpi-color-2: var(--wa-primary); } .kpi-orange { --kpi-color-1: var(--wa-warn); --kpi-color-2: var(--wa-warn); } .kpi-purple { --kpi-color-1: var(--wa-info); --kpi-color-2: var(--wa-info); } .kpi-teal { --kpi-color-1: var(--wa-info); --kpi-color-2: var(--wa-info); } .kpi-retail { --kpi-color-1: var(--wa-warn); --kpi-color-2: var(--wa-bad); } .kpi-pipeline { --kpi-color-1: var(--wa-info); --kpi-color-2: var(--wa-info); } .kpi-gradient { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); color: var(--wa-text-inverse); } .kpi-gradient .kpi-icon, .kpi-gradient .kpi-label, .kpi-gradient .kpi-value, .kpi-gradient .kpi-trend { color: var(--wa-text-inverse) !important; } .kpi-icon { width: 50px; height: 50px; border-radius: 0.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: linear-gradient(135deg, var(--kpi-color-1), var(--kpi-color-2)); color: var(--wa-text-inverse); flex-shrink: 0; } .kpi-content { flex: 1; } .kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--wa-dark); margin-bottom: 0.25rem; } .kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--wa-text); /* Not `1`: a line box exactly as tall as the font size leaves glyph ink outside it, and these values sit in boxes with `overflow: hidden`, so the tail of a `$` or a comma gets shaved. Measured 23.2px of type in a 25px box against 28px of ink. */ line-height: 1.15; } .kpi-subtitle { font-size: 0.7rem; color: var(--wa-text-dim); margin-top: 0.25rem; } .kpi-trend { font-size: 0.75rem; font-weight: 600; margin-top: 0.25rem; } /* Chart Cards */ .velocity-chart-card { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(17, 17, 17, 0.25); border: none; } .velocity-chart-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .velocity-chart-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } .product-lookup-card { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(150, 89, 81, 0.28); border: none; } .product-lookup-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .product-lookup-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } .product-lookup-card .input-group-text { background: var(--wa-surface); border: none; color: var(--wa-accent-deep); } .product-lookup-card .form-control-lg { border: none; font-size: 1rem; } .product-lookup-card .form-control-lg:focus { box-shadow: none; border-color: transparent; } .btn-download, .btn-fullscreen { background: var(--wa-surface-2); border: 1px solid var(--wa-hairline); color: var(--wa-text-inverse); transition: all 0.3s ease; } .btn-download:hover, .btn-fullscreen:hover { background: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text-inverse); transform: translateY(-2px); } .chart-info { background: var(--wa-surface); padding: 0.75rem 1rem; border-radius: 0.5rem; border-left: 4px solid var(--wa-primary); } /* Card Styles */ .card { border-radius: 1rem; border: 1px solid rgba(17, 17, 17, 0.05); transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08); } .card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); } .card-header { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); color: var(--wa-text-inverse); border-bottom: none; padding: 1rem 1.5rem; font-weight: 600; } .chart-container { width: 100%; min-height: 360px; position: relative; } .customer-stable-chart-col { display: flex; min-width: 0; } .customer-stable-chart-card.card { width: 100%; min-width: 0; transition: box-shadow 0.2s ease; } .customer-stable-chart-card.card:hover { transform: none; box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08); } .customer-stable-chart-card__body { display: flex; align-items: stretch; min-width: 0; padding: 1rem 1.25rem 1.25rem; } .customer-stable-chart-frame { position: relative; flex: 1 1 auto; width: 100%; min-width: 0; height: 280px; min-height: 280px; } .customer-stable-chart-frame > canvas { display: block; width: 100% !important; height: 100% !important; } /* Loader Overlay */ .loader-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--wa-surface), var(--wa-surface)); backdrop-filter: blur(8px); z-index: 10; } .loader-overlay .spinner-grow { width: 3rem; height: 3rem; } /* Tabs */ .nav-tabs { border-bottom: 2px solid var(--wa-border); } .nav-tabs .nav-link { color: var(--wa-dark); font-weight: 600; border: none; border-bottom: 3px solid transparent; transition: all 0.3s ease; } .nav-tabs .nav-link:hover { color: var(--wa-primary); border-color: transparent; background: var(--wa-info-wash); } .nav-tabs .nav-link.active { color: var(--wa-primary); background: transparent; border-color: transparent transparent var(--wa-primary) transparent; } /* Responsive Design */ @media (max-width: 768px) { .customer-stable-chart-frame { height: 260px; min-height: 260px; } .velocity-title { font-size: 1.5rem; } .velocity-icon-badge { width: 50px; height: 50px; font-size: 1.5rem; } .kpi-value { font-size: 1.25rem; } .insight-value { font-size: 1.2rem; } } /* Utility Classes */ .bg-gradient-primary { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card, .kpi-card { animation: fadeIn 0.5s ease-out; } /* Print Styles */ @media print { .velocity-hero, .control-panel, .btn-group, button { display: none !important; } .card { box-shadow: none; break-inside: avoid; } } /* ======================================== STOCK PLANNING & FORECASTING STYLES ======================================== */ /* Planning Card */ .planning-card { background: linear-gradient(135deg, var(--wa-accent) 0%, var(--wa-warn) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(17, 153, 142, 0.3); border: none; } .planning-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .planning-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } .planning-select { background: var(--wa-surface); border: none; font-weight: 600; color: var(--wa-accent); } .planning-select:focus { box-shadow: 0 0 0 0.2rem rgba(17, 153, 142, 0.25); border-color: var(--wa-accent); } /* Planning Stats */ .planning-stat { background: var(--wa-surface); border-radius: 0.8rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; border: 2px solid transparent; } .planning-stat:hover { border-color: var(--wa-accent); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(17, 153, 142, 0.2); } .planning-stat-icon { width: 50px; height: 50px; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--wa-text-inverse); flex-shrink: 0; } .planning-stat-content { flex: 1; } .planning-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--wa-dark); margin-bottom: 0.25rem; } .planning-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--wa-text); } /* Planning Table */ .planning-table { margin-bottom: 0; } .planning-table thead { background: linear-gradient(135deg, var(--wa-surface) 0%, var(--wa-border) 100%); } .planning-table thead th { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--wa-text); border-bottom: 2px solid var(--wa-accent); padding: 1rem 0.75rem; } .planning-table tbody tr { transition: all 0.2s ease; } .planning-table tbody tr:hover { background: var(--wa-info-wash); transform: scale(1.01); } .planning-table td { vertical-align: middle; padding: 0.75rem; } /* Multi-Metric Card */ .metric-comparison-card { background: linear-gradient(135deg, var(--wa-bad) 0%, var(--wa-warn) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(250, 112, 154, 0.3); border: none; } .metric-comparison-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .metric-comparison-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } /* Correlation Card */ .correlation-card { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(17, 17, 17, 0.25); border: none; } .correlation-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .correlation-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; padding: 1.5rem; } .correlation-item { margin-bottom: 1.5rem; } .correlation-item:last-child { margin-bottom: 0; } .correlation-label { font-weight: 600; color: var(--wa-text); font-size: 0.9rem; } /* Seasonality Card */ .seasonality-card { background: linear-gradient(135deg, var(--wa-primary) 0%, var(--wa-accent-deep) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(150, 89, 81, 0.28); border: none; } .seasonality-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .seasonality-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } /* Weekday Card */ .weekday-card { background: linear-gradient(135deg, var(--wa-info) 0%, var(--wa-info) 100%); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(79, 172, 254, 0.3); border: none; } .weekday-card .card-header { background: transparent; border-bottom: 1px solid var(--wa-hairline); padding: 1.5rem; color: var(--wa-text-inverse); } .weekday-card .card-body { background: var(--wa-surface); border-radius: 0 0 1rem 1rem; } /* Trend Indicators */ .trend-up { color: var(--wa-accent); font-weight: 700; } .trend-down { color: var(--wa-bad); font-weight: 700; } .trend-stable { color: var(--wa-text-dim); font-weight: 700; } /* Confidence Badge */ .confidence-high { background: linear-gradient(135deg, var(--wa-accent) 0%, var(--wa-primary) 100%); color: var(--wa-text-inverse); padding: 0.25rem 0.75rem; border-radius: 1rem; font-weight: 600; font-size: 0.75rem; } .confidence-medium { background: linear-gradient(135deg, var(--wa-warn) 0%, var(--wa-warn) 100%); color: var(--wa-text-inverse); padding: 0.25rem 0.75rem; border-radius: 1rem; font-weight: 600; font-size: 0.75rem; } .confidence-low { background: linear-gradient(135deg, var(--wa-hairline-strong) 0%, var(--wa-text-faint) 100%); color: var(--wa-text-inverse); padding: 0.25rem 0.75rem; border-radius: 1rem; font-weight: 600; font-size: 0.75rem; } /* Alert Enhancements */ .alert-info, .alert-warning, .alert-success { border-left: 4px solid; border-radius: 0.5rem; } .alert-info { background: var(--wa-info-wash); border-left-color: var(--wa-primary); } .alert-warning { background: var(--wa-warn-wash); border-left-color: var(--wa-warn); } .alert-success { background: var(--wa-good-wash); border-left-color: var(--wa-accent); } /* Loading Animation for Planning */ .planning-table tbody tr.loading { animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* ============================================ Wholesale Analytics 2026 Design System Uplift Premium protein intelligence shell ============================================ */ :root { /* ---- Compatibility: the "2026 uplift" vocabulary -------------------- These names are used across the templates and page stylesheets. They are aliases now, not definitions - the colours live in the token block at the top of this file, so a theme switch reaches every one of them. */ --wa-primary-strong: var(--wa-accent-deep); --wa-primary-soft: var(--wa-accent-wash); --wa-accent-soft: var(--wa-accent-wash); --wa-intel: var(--wa-info); --wa-intel-soft: var(--wa-info-wash); --wa-success: var(--wa-good); --wa-success-soft: var(--wa-good-wash); --wa-warning: var(--wa-warn); --wa-warning-soft: var(--wa-warn-wash); --wa-danger: var(--wa-bad); --wa-danger-soft: var(--wa-bad-wash); --wa-dark-soft: var(--wa-surface-2); --wa-text-strong: var(--wa-text); --wa-text-muted: var(--wa-text-dim); --wa-border-strong: var(--wa-hairline-strong); --wa-surface-strong: var(--wa-surface-2); --wa-surface-muted: var(--wa-surface-3); --wa-surface-dark: var(--wa-canvas-deep); --wa-shadow-xs: var(--wa-shadow-sm); --wa-shadow-md: var(--wa-shadow); --wa-radius-md: var(--wa-radius); --wa-radius-xl: var(--wa-radius-lg); --wa-grid-line: var(--wa-hairline-soft); } body.theme-wa-future { font-family: "Manrope", "Segoe UI", sans-serif; color: var(--wa-text); background: radial-gradient(circle at top left, var(--wa-info-wash), transparent 28%), radial-gradient(circle at top right, var(--wa-warn-wash), transparent 24%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface-2) 42%, var(--wa-surface) 100%); } .theme-wa-future h1, .theme-wa-future h2, .theme-wa-future h3, .theme-wa-future h4, .theme-wa-future h5, .theme-wa-future h6, .theme-wa-future .navbar-brand, .theme-wa-future .page-header, .theme-wa-future .page-header-futuristic .header-title-glow { font-family: "Space Grotesk", "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--wa-text-strong); } .theme-wa-future .app-shell { background: radial-gradient(circle at top left, var(--wa-info-wash), transparent 23%), radial-gradient(circle at 86% 0%, var(--wa-accent-wash), transparent 26%), radial-gradient(circle at 86% 22%, var(--wa-warn-wash), transparent 16%), linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); } .theme-wa-future .app-shell::before { opacity: 0.04; mix-blend-mode: multiply; } .theme-wa-future .app-shell::after { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--wa-surface-2) calc(100% - 1px)), linear-gradient(transparent 0, transparent calc(100% - 1px), var(--wa-surface-2) calc(100% - 1px)); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 78%); pointer-events: none; z-index: -1; } .theme-wa-future .app-main { padding-top: 1.75rem; padding-bottom: 3rem; } .theme-wa-future .navbar-wholesale { background: linear-gradient(135deg, rgba(8, 16, 29, 0.96), rgba(20, 34, 56, 0.92) 38%, var(--wa-accent) 100%); border-bottom: 1px solid var(--wa-hairline); box-shadow: 0 16px 44px rgba(7, 16, 29, 0.24); backdrop-filter: blur(18px); } .theme-wa-future .navbar-wholesale .navbar-brand { color: var(--wa-text-inverse); font-size: 0.84rem; letter-spacing: 0.18rem; } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link { position: relative; color: var(--wa-text-inverse); font-weight: 600; border-bottom: none; padding-inline: 0.85rem; padding-block: 0.55rem; border-radius: 999px; } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link:hover, .theme-wa-future .navbar-wholesale .navbar-nav .nav-link:focus, .theme-wa-future .navbar-wholesale .navbar-nav .nav-link.active { color: var(--wa-text-inverse); background: var(--wa-surface-2); } .theme-wa-future .navbar-wholesale .dropdown-menu, .theme-wa-future .dropdown-menu { border-radius: var(--wa-radius-md); border: 1px solid var(--wa-hairline); background: rgba(11, 19, 33, 0.92); box-shadow: var(--wa-shadow-lg); backdrop-filter: blur(18px); } .theme-wa-future .dropdown-item { color: var(--wa-text-inverse); } .theme-wa-future .dropdown-item:hover, .theme-wa-future .dropdown-item:focus { color: var(--wa-text-inverse); background: linear-gradient(135deg, var(--wa-accent-wash), var(--wa-info-wash)); } .theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.products-hero):not(.ciw-hero):not(.product-v2-hero):not(.labor-hero):not(.assistant-header):not(.suppliers-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero), .theme-wa-future .page-card, .theme-wa-future .page-shell, .theme-wa-future .chart-card, .theme-wa-future .msx, .theme-wa-future .filter-bar, .theme-wa-future .filters-panel, .theme-wa-future .toast { border-color: var(--wa-border); box-shadow: var(--wa-shadow-sm); backdrop-filter: none; } .theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.products-hero):not(.ciw-hero):not(.product-v2-hero):not(.labor-hero):not(.assistant-header):not(.suppliers-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero), .theme-wa-future .page-card, .theme-wa-future .page-shell, .theme-wa-future .chart-card, .theme-wa-future .msx, .theme-wa-future .filter-bar, .theme-wa-future .filters-panel, .theme-wa-future .toast { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border-radius: var(--wa-radius-md); } .theme-wa-future .card-header, .theme-wa-future .msx-head { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border-bottom-color: var(--wa-border); } .theme-wa-future .page-shell, .theme-wa-future .page-card { padding: 1.6rem; } .theme-wa-future .page-header, .theme-wa-future .hero-card, .theme-wa-future .page-header-futuristic { color: var(--wa-text-inverse); border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius-lg); background: radial-gradient(circle at top right, var(--wa-info-wash), transparent 28%), radial-gradient(circle at bottom left, var(--wa-warn-wash), transparent 24%), linear-gradient(135deg, rgba(8, 16, 29, 0.98), rgba(20, 34, 56, 0.94) 44%, var(--wa-accent) 100%); box-shadow: var(--wa-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .theme-wa-future .page-header .badge, .theme-wa-future .hero-card .badge, .theme-wa-future .status-chip-futuristic, .theme-wa-future .feature-badge { background: var(--wa-surface-2); color: var(--wa-text-inverse); border: 1px solid var(--wa-hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .theme-wa-future .kpi-chip, .theme-wa-future .mini-kpi { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border: 1px solid var(--wa-hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .theme-wa-future .btn { font-weight: 700; letter-spacing: 0.01em; } .theme-wa-future .btn-primary { background: linear-gradient(135deg, var(--wa-primary), var(--wa-primary-strong)); border-color: var(--wa-bad); box-shadow: 0 16px 28px -18px rgba(143, 36, 54, 0.85); } .theme-wa-future .btn-primary:hover, .theme-wa-future .btn-primary:focus { background: linear-gradient(135deg, var(--wa-bad), var(--wa-primary-strong)); border-color: var(--wa-primary-strong); box-shadow: 0 22px 36px -18px rgba(105, 22, 38, 0.9); } .theme-wa-future .btn-light, .theme-wa-future .btn-outline-light, .theme-wa-future .btn-outline-secondary, .theme-wa-future .btn-outline-primary { backdrop-filter: blur(14px); } .theme-wa-future .btn-light { color: var(--wa-text-strong); background: var(--wa-surface); border-color: var(--wa-hairline); } .theme-wa-future .btn-outline-light { color: var(--wa-text-inverse); border-color: var(--wa-hairline); background: var(--wa-surface-2); } .theme-wa-future .btn-outline-secondary { color: var(--wa-text); border-color: var(--wa-hairline); background: var(--wa-surface); } .theme-wa-future .btn-outline-secondary:hover, .theme-wa-future .btn-outline-secondary:focus, .theme-wa-future .btn-outline-primary:hover, .theme-wa-future .btn-outline-primary:focus { color: var(--wa-text-strong); border-color: var(--wa-info-wash); background: var(--wa-surface); } .theme-wa-future .nav-pills .nav-link { border-radius: 999px; color: var(--wa-text-muted); background: var(--wa-surface); border: 1px solid var(--wa-hairline); } .theme-wa-future .nav-pills .nav-link.active, .theme-wa-future .nav-pills .show > .nav-link { background: linear-gradient(135deg, var(--wa-accent-wash), var(--wa-info-wash)); color: var(--wa-text-strong); border-color: var(--wa-accent-wash); } .theme-wa-future .form-select, .theme-wa-future .form-control { border-radius: var(--wa-radius-sm); border-color: var(--wa-hairline); background: var(--wa-surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .theme-wa-future .form-select:focus, .theme-wa-future .form-control:focus { border-color: var(--wa-info-wash); box-shadow: 0 0 0 0.22rem rgba(47, 124, 255, 0.12); } .theme-wa-future .table { --bs-table-bg: transparent; color: var(--wa-text); } .theme-wa-future .table thead th { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); color: var(--wa-text-strong); border-bottom-color: var(--wa-border-strong); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; } .theme-wa-future .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--wa-surface); } .theme-wa-future .table-hover > tbody > tr:hover > * { background: var(--wa-surface); } .theme-wa-future .table-responsive, .theme-wa-future .datatable { border-radius: var(--wa-radius-sm); } .theme-wa-future .badge, .theme-wa-future .badge-wholesale, .theme-wa-future .chip-accent { background: linear-gradient(135deg, var(--wa-accent-wash), var(--wa-warn-wash)); color: var(--wa-text-strong); border: 1px solid var(--wa-accent-wash); } .theme-wa-future .shadow-soft { box-shadow: var(--wa-shadow-sm) !important; } .theme-wa-future .border-faint { border: 1px solid var(--wa-border); } .theme-wa-future .filters-panel-header, .theme-wa-future .filters-panel .card-footer { background: linear-gradient(135deg, rgba(8, 16, 29, 0.96), rgba(20, 34, 56, 0.88) 44%, var(--wa-accent)); color: var(--wa-text-inverse); } .theme-wa-future .filters-panel-body, .theme-wa-future .filters-panel .card-footer { border-color: var(--wa-hairline); } .theme-wa-future .filter-group, .theme-wa-future .filter-section { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border-color: var(--wa-hairline); box-shadow: var(--wa-shadow-xs); } .theme-wa-future .alert { border-radius: var(--wa-radius-sm); border-color: var(--wa-hairline); box-shadow: var(--wa-shadow-xs); } .theme-wa-future .alert-info, .theme-wa-future .alert-warning, .theme-wa-future .alert-success, .theme-wa-future .alert-danger, .theme-wa-future .alert-primary { background: var(--wa-surface); backdrop-filter: blur(14px); } .theme-wa-future .alert-info { border-left-color: var(--wa-intel); } .theme-wa-future .alert-success { border-left-color: var(--wa-success); } .theme-wa-future .alert-warning { border-left-color: var(--wa-warning); } .theme-wa-future .alert-danger { border-left: 4px solid var(--wa-danger); } .theme-wa-future .text-muted, .theme-wa-future .text-secondary { color: var(--wa-text-muted) !important; } .theme-wa-future .status-good, .theme-wa-future .tone-success { color: var(--wa-success); } .theme-wa-future .status-watch, .theme-wa-future .tone-warning { color: var(--wa-warning); } .theme-wa-future .status-risk, .theme-wa-future .tone-danger { color: var(--wa-danger); } .theme-wa-future .status-opportunity, .theme-wa-future .tone-info { color: var(--wa-intel); } @media (max-width: 991.98px) { .theme-wa-future .app-main { padding-top: 1.25rem; } .theme-wa-future .page-shell, .theme-wa-future .page-card { padding: 1.15rem; } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link { padding-inline: 0.65rem; } } /* ============================================ Controlled premium refinement Restored baseline with smaller shared polish only ============================================ */ body.theme-wa-future { --page-accent: #54c9a0; --page-accent-rgb: 84, 201, 160; --page-accent-alt: #6aa9d8; --page-accent-alt-rgb: 106, 169, 216; --page-positive: var(--wa-good); --page-warning: var(--wa-warn); --page-danger: var(--wa-bad); background: radial-gradient(circle at top left, rgba(var(--page-accent-rgb), 0.08), transparent 26%), radial-gradient(circle at 88% 0%, rgba(var(--page-accent-alt-rgb), 0.09), transparent 22%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface-2) 44%, var(--wa-surface) 100%); } body.theme-wa-future[data-page-tone="customers"] { --page-accent: #b67bef; --page-accent-rgb: 182, 123, 239; --page-accent-alt: #e78ac3; --page-accent-alt-rgb: 231, 138, 195; --wa-accent: #b67bef; --wa-accent-bright: #c99cf4; --wa-accent-deep: #8052ba; --wa-accent-wash: rgba(182, 123, 239, 0.13); --wa-accent-line: rgba(182, 123, 239, 0.34); --bs-primary-rgb: 182, 123, 239; } body.theme-wa-future[data-page-tone="planning"] { --page-accent: #8f9ff5; --page-accent-rgb: 143, 159, 245; --page-accent-alt: #58c7cf; --page-accent-alt-rgb: 88, 199, 207; --wa-accent: #8f9ff5; --wa-accent-bright: #aab6f8; --wa-accent-deep: #5868bd; --wa-accent-wash: rgba(143, 159, 245, 0.13); --wa-accent-line: rgba(143, 159, 245, 0.34); --bs-primary-rgb: 143, 159, 245; } body.theme-wa-future[data-page-tone="products"] { --page-accent: #e0a548; --page-accent-rgb: 224, 165, 72; --page-accent-alt: #e2765b; --page-accent-alt-rgb: 226, 118, 91; --wa-accent: #e0a548; --wa-accent-bright: #edbd6b; --wa-accent-deep: #a96c10; --wa-accent-wash: rgba(224, 165, 72, 0.13); --wa-accent-line: rgba(224, 165, 72, 0.34); --bs-primary-rgb: 224, 165, 72; } body.theme-wa-future[data-page-tone="regions"] { --page-accent: #63aaf2; --page-accent-rgb: 99, 170, 242; --page-accent-alt: #58c7bd; --page-accent-alt-rgb: 88, 199, 189; --wa-accent: #63aaf2; --wa-accent-bright: #84bcf4; --wa-accent-deep: #2b6ca3; --wa-accent-wash: rgba(99, 170, 242, 0.13); --wa-accent-line: rgba(99, 170, 242, 0.34); --bs-primary-rgb: 99, 170, 242; } body.theme-wa-future[data-page-tone="inventory"] { --page-accent: #4fc8a2; --page-accent-rgb: 79, 200, 162; --page-accent-alt: #6aa9e8; --page-accent-alt-rgb: 106, 169, 232; --wa-accent: #4fc8a2; --wa-accent-bright: #76ddbb; --wa-accent-deep: #247f64; --wa-accent-wash: rgba(79, 200, 162, 0.13); --wa-accent-line: rgba(79, 200, 162, 0.34); --bs-primary-rgb: 79, 200, 162; } body.theme-wa-future[data-page-tone="suppliers"] { --page-accent: #58c98b; --page-accent-rgb: 88, 201, 139; --page-accent-alt: #b7c85b; --page-accent-alt-rgb: 183, 200, 91; --wa-accent: #58c98b; --wa-accent-bright: #78dca4; --wa-accent-deep: #287d53; --wa-accent-wash: rgba(88, 201, 139, 0.13); --wa-accent-line: rgba(88, 201, 139, 0.34); --bs-primary-rgb: 88, 201, 139; } body.theme-wa-future[data-page-tone="labor"] { --page-accent: #d49a52; --page-accent-rgb: 212, 154, 82; --page-accent-alt: #9f8df5; --page-accent-alt-rgb: 159, 141, 245; --wa-accent: #d49a52; --wa-accent-bright: #e3b271; --wa-accent-deep: #97621f; --wa-accent-wash: rgba(212, 154, 82, 0.13); --wa-accent-line: rgba(212, 154, 82, 0.34); --bs-primary-rgb: 212, 154, 82; } body.theme-wa-future[data-page-tone="operations"] { --page-accent: #58c7cf; --page-accent-rgb: 88, 199, 207; --page-accent-alt: #6aa9d8; --page-accent-alt-rgb: 106, 169, 216; --wa-accent: #58c7cf; --wa-accent-bright: #79d9df; --wa-accent-deep: #237d84; --wa-accent-wash: rgba(88, 199, 207, 0.13); --wa-accent-line: rgba(88, 199, 207, 0.34); --bs-primary-rgb: 88, 199, 207; } body.theme-wa-future[data-page-tone="salesreps"] { --page-accent: #ef7d78; --page-accent-rgb: 239, 125, 120; --page-accent-alt: #9f8df5; --page-accent-alt-rgb: 159, 141, 245; --wa-accent: #ef7d78; --wa-accent-bright: #f29a96; --wa-accent-deep: #b94d4b; --wa-accent-wash: rgba(239, 125, 120, 0.13); --wa-accent-line: rgba(239, 125, 120, 0.34); --bs-primary-rgb: 239, 125, 120; } body.theme-wa-future[data-page-tone="returns"] { --page-accent: #e78650; --page-accent-rgb: 231, 134, 80; --page-accent-alt: #e2685f; --page-accent-alt-rgb: 226, 104, 95; --wa-accent: #e78650; --wa-accent-bright: #f0a071; --wa-accent-deep: #a94f26; --wa-accent-wash: rgba(231, 134, 80, 0.13); --wa-accent-line: rgba(231, 134, 80, 0.34); --bs-primary-rgb: 231, 134, 80; } body.theme-wa-future[data-page-tone="assistant"] { --page-accent: #9f8df5; --page-accent-rgb: 159, 141, 245; --page-accent-alt: #58c7cf; --page-accent-alt-rgb: 88, 199, 207; --wa-accent: #9f8df5; --wa-accent-bright: #b6a8f8; --wa-accent-deep: #6555bd; --wa-accent-wash: rgba(159, 141, 245, 0.13); --wa-accent-line: rgba(159, 141, 245, 0.34); --bs-primary-rgb: 159, 141, 245; } /* Brighter accents belong on the dark canvas. The paper theme uses the same page identities at a deeper value so links and controls retain AA contrast. */ :root[data-theme="light"] body.theme-wa-future[data-page-tone="customers"] { --page-accent: #7046af; --page-accent-rgb: 112, 70, 175; --wa-accent: #7046af; --wa-accent-bright: #5d359b; --wa-accent-deep: #4f2c86; --wa-accent-wash: rgba(112, 70, 175, 0.1); --wa-accent-line: rgba(112, 70, 175, 0.28); --bs-primary-rgb: 112, 70, 175; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="planning"] { --page-accent: #5366bd; --page-accent-rgb: 83, 102, 189; --wa-accent: #5366bd; --wa-accent-bright: #4054aa; --wa-accent-deep: #35458e; --wa-accent-wash: rgba(83, 102, 189, 0.1); --wa-accent-line: rgba(83, 102, 189, 0.28); --bs-primary-rgb: 83, 102, 189; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="products"] { --page-accent: #9a620f; --page-accent-rgb: 154, 98, 15; --wa-accent: #9a620f; --wa-accent-bright: #825109; --wa-accent-deep: #714506; --wa-accent-wash: rgba(154, 98, 15, 0.1); --wa-accent-line: rgba(154, 98, 15, 0.28); --bs-primary-rgb: 154, 98, 15; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="regions"] { --page-accent: #286ca7; --page-accent-rgb: 40, 108, 167; --wa-accent: #286ca7; --wa-accent-bright: #205d92; --wa-accent-deep: #194c79; --wa-accent-wash: rgba(40, 108, 167, 0.1); --wa-accent-line: rgba(40, 108, 167, 0.28); --bs-primary-rgb: 40, 108, 167; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="inventory"] { --page-accent: #176f56; --page-accent-rgb: 23, 111, 86; --wa-accent: #176f56; --wa-accent-bright: #105e48; --wa-accent-deep: #0b4d3a; --wa-accent-wash: rgba(23, 111, 86, 0.1); --wa-accent-line: rgba(23, 111, 86, 0.28); --bs-primary-rgb: 23, 111, 86; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="suppliers"] { --page-accent: #1e7950; --page-accent-rgb: 30, 121, 80; --wa-accent: #1e7950; --wa-accent-bright: #176744; --wa-accent-deep: #115538; --wa-accent-wash: rgba(30, 121, 80, 0.1); --wa-accent-line: rgba(30, 121, 80, 0.28); --bs-primary-rgb: 30, 121, 80; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="labor"] { --page-accent: #95601f; --page-accent-rgb: 149, 96, 31; --wa-accent: #95601f; --wa-accent-bright: #7d4f17; --wa-accent-deep: #693f10; --wa-accent-wash: rgba(149, 96, 31, 0.1); --wa-accent-line: rgba(149, 96, 31, 0.28); --bs-primary-rgb: 149, 96, 31; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="operations"] { --page-accent: #146f77; --page-accent-rgb: 20, 111, 119; --wa-accent: #146f77; --wa-accent-bright: #0e5e65; --wa-accent-deep: #084e54; --wa-accent-wash: rgba(20, 111, 119, 0.1); --wa-accent-line: rgba(20, 111, 119, 0.28); --bs-primary-rgb: 20, 111, 119; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="salesreps"] { --page-accent: #af4549; --page-accent-rgb: 175, 69, 73; --wa-accent: #af4549; --wa-accent-bright: #98383c; --wa-accent-deep: #802d31; --wa-accent-wash: rgba(175, 69, 73, 0.1); --wa-accent-line: rgba(175, 69, 73, 0.28); --bs-primary-rgb: 175, 69, 73; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="returns"] { --page-accent: #a94f26; --page-accent-rgb: 169, 79, 38; --wa-accent: #a94f26; --wa-accent-bright: #923f1c; --wa-accent-deep: #7a3214; --wa-accent-wash: rgba(169, 79, 38, 0.1); --wa-accent-line: rgba(169, 79, 38, 0.28); --bs-primary-rgb: 169, 79, 38; } :root[data-theme="light"] body.theme-wa-future[data-page-tone="assistant"] { --page-accent: #634db4; --page-accent-rgb: 99, 77, 180; --wa-accent: #634db4; --wa-accent-bright: #513ca0; --wa-accent-deep: #423085; --wa-accent-wash: rgba(99, 77, 180, 0.1); --wa-accent-line: rgba(99, 77, 180, 0.28); --bs-primary-rgb: 99, 77, 180; } .theme-wa-future .navbar-wholesale { background: linear-gradient(135deg, rgba(8, 16, 29, 0.97), rgba(20, 34, 56, 0.94) 48%, rgba(var(--page-accent-alt-rgb), 0.8) 100%); border-bottom-color: var(--wa-hairline); box-shadow: 0 18px 40px rgba(7, 16, 29, 0.24); } .theme-wa-future .navbar-brand-img { filter: drop-shadow(0 10px 18px rgba(7, 16, 29, 0.32)); } .theme-wa-future .navbar-wholesale .navbar-brand, .theme-wa-future .navbar-wholesale .nav-link, .theme-wa-future .navbar-wholesale .dropdown-toggle { color: var(--wa-on-dark); } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link { border: 1px solid transparent; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link:hover, .theme-wa-future .navbar-wholesale .navbar-nav .nav-link:focus { color: var(--wa-on-dark); border-color: var(--wa-hairline); background: var(--wa-surface-2); } .theme-wa-future .navbar-wholesale .navbar-nav .nav-link.active { color: var(--wa-on-dark); border-color: rgba(var(--page-accent-rgb), 0.24); background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.2), rgba(var(--page-accent-alt-rgb), 0.16)); box-shadow: 0 16px 28px -22px rgba(var(--page-accent-rgb), 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .theme-wa-future .page-card, .theme-wa-future .page-shell, .theme-wa-future .chart-card, .theme-wa-future .filters-shell, .theme-wa-future .table-responsive, .theme-wa-future .datatable, .theme-wa-future .assistant-side, .theme-wa-future .assistant-chat { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border-color: var(--wa-hairline); box-shadow: 0 18px 38px rgba(7, 16, 29, 0.08); } .theme-wa-future .page-header, .theme-wa-future .hero-card, .theme-wa-future .page-header-futuristic, .theme-wa-future .products-hero, .theme-wa-future .labor-hero, .theme-wa-future .assistant-header, .theme-wa-future .suppliers-hero { background: radial-gradient(circle at top right, rgba(var(--page-accent-rgb), 0.18), transparent 26%), radial-gradient(circle at bottom left, rgba(var(--page-accent-alt-rgb), 0.16), transparent 24%), linear-gradient(135deg, rgba(8, 16, 29, 0.98), rgba(20, 34, 56, 0.94) 52%, var(--wa-bad) 100%); border-color: var(--wa-hairline); box-shadow: 0 26px 56px rgba(7, 16, 29, 0.18); } .theme-wa-future .page-header .badge, .theme-wa-future .hero-card .badge, .theme-wa-future .products-hero .badge, .theme-wa-future .suppliers-hero .badge, .theme-wa-future .assistant-header .chip { background: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text-inverse); } .theme-wa-future .panel-eyebrow, .theme-wa-future .products-layer-kicker, .theme-wa-future .products-kicker, .theme-wa-future .ciw-eyebrow, .theme-wa-future .labor-kicker, .theme-wa-future .labor-section-kicker, .theme-wa-future .assistant-kicker, .theme-wa-future .workspace-control-label, .theme-wa-future .filters-shell__eyebrow, .theme-wa-future .filter-section__eyebrow { color: var(--page-accent-alt); } .theme-wa-future .card-header, .theme-wa-future .msx-head { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); border-bottom-color: var(--wa-hairline); } .theme-wa-future .filters-shell { border-color: rgba(var(--page-accent-rgb), 0.12); box-shadow: 0 22px 44px rgba(7, 16, 29, 0.1); } .theme-wa-future .filters-shell__header { background: linear-gradient(135deg, rgba(8, 16, 29, 0.98), rgba(20, 34, 56, 0.93) 54%, rgba(var(--page-accent-alt-rgb), 0.84) 100%); border-bottom: 1px solid var(--wa-hairline); } .theme-wa-future .filters-shell__title, .theme-wa-future .filters-shell__meta, .theme-wa-future .filters-shell__date, .theme-wa-future #filtersLastAppliedLabel { color: var(--wa-text-inverse); } .theme-wa-future .filters-shell__meta, .theme-wa-future .filters-shell__date { color: var(--wa-text-inverse); } .theme-wa-future .filters-shell__body { background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface)); } .theme-wa-future .filters-collapse-btn, .theme-wa-future .filters-status-badge, .theme-wa-future .filter-range-pill, .theme-wa-future .filter-tile, .theme-wa-future .filter-workspace, .theme-wa-future .saved-view-card { border-color: var(--wa-hairline); box-shadow: none; } .theme-wa-future .filter-range-pill.is-active, .theme-wa-future .filter-tile.is-open, .theme-wa-future .filter-tile.has-value, .theme-wa-future .saved-view-card.is-active, .theme-wa-future .saved-view-card.is-selected { background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.12), rgba(var(--page-accent-alt-rgb), 0.1)); border-color: rgba(var(--page-accent-rgb), 0.24); color: var(--wa-text-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .theme-wa-future .filter-tile:hover, .theme-wa-future .saved-view-card:hover, .theme-wa-future .filter-range-pill:hover { box-shadow: 0 14px 28px rgba(7, 16, 29, 0.08); } .theme-wa-future .btn-primary { background: linear-gradient(135deg, var(--wa-primary), var(--wa-bad) 62%, rgba(var(--page-accent-rgb), 0.96)); border-color: var(--wa-bad); box-shadow: 0 16px 28px -18px rgba(143, 36, 54, 0.84); } .theme-wa-future .btn-primary:hover, .theme-wa-future .btn-primary:focus { background: linear-gradient(135deg, var(--wa-bad), var(--wa-bad) 60%, rgba(var(--page-accent-rgb), 0.98)); border-color: var(--wa-bad); } .theme-wa-future .btn-outline-secondary, .theme-wa-future .btn-outline-primary, .theme-wa-future .btn-light { background: var(--wa-surface); border-color: var(--wa-hairline); } .theme-wa-future .btn-outline-secondary:hover, .theme-wa-future .btn-outline-primary:hover, .theme-wa-future .btn-light:hover, .theme-wa-future .btn-outline-secondary:focus, .theme-wa-future .btn-outline-primary:focus, .theme-wa-future .btn-light:focus { background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.08), rgba(var(--page-accent-alt-rgb), 0.08)); border-color: rgba(var(--page-accent-rgb), 0.2); color: var(--wa-text-strong); } .theme-wa-future .nav-pills .nav-link, .theme-wa-future .nav-tabs .nav-link { border-color: var(--wa-hairline); background: var(--wa-surface); color: var(--wa-text-muted); } .theme-wa-future .nav-pills .nav-link.active, .theme-wa-future .nav-pills .show > .nav-link, .theme-wa-future .nav-tabs .nav-link.active { background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.14), rgba(var(--page-accent-alt-rgb), 0.12)); border-color: rgba(var(--page-accent-rgb), 0.2); color: var(--wa-text-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .theme-wa-future .kpi-card, .theme-wa-future .mini-kpi, .theme-wa-future .metric-card, .theme-wa-future .labor-kpi-card, .theme-wa-future .strategy-stat-card, .theme-wa-future .decision-signal-card, .theme-wa-future .products-brief-card, .theme-wa-future .focus-action-card, .theme-wa-future .ciw-metric-card, .theme-wa-future .ciw-action-card, .theme-wa-future .ciw-stat-card, .theme-wa-future .ciw-score-chip, .theme-wa-future .product-v2-layer-context, .theme-wa-future .product-v2-story-callout, .theme-wa-future .product-v2-intel-metric { position: relative; overflow: hidden; border-color: var(--wa-hairline); box-shadow: 0 16px 34px rgba(7, 16, 29, 0.07); } .theme-wa-future .kpi-card::before, .theme-wa-future .mini-kpi::before, .theme-wa-future .metric-card::before, .theme-wa-future .labor-kpi-card::before, .theme-wa-future .strategy-stat-card::before, .theme-wa-future .decision-signal-card::before, .theme-wa-future .products-brief-card::before, .theme-wa-future .focus-action-card::before, .theme-wa-future .ciw-metric-card::before, .theme-wa-future .ciw-action-card::before, .theme-wa-future .ciw-stat-card::before, .theme-wa-future .ciw-score-chip::before, .theme-wa-future .product-v2-layer-context::before, .theme-wa-future .product-v2-story-callout::before, .theme-wa-future .product-v2-intel-metric::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: linear-gradient(90deg, rgba(var(--page-accent-rgb), 0.94), rgba(var(--page-accent-alt-rgb), 0.8), var(--wa-warn)); opacity: 0.82; } .theme-wa-future .table thead th { background: linear-gradient(180deg, var(--wa-surface-2), var(--wa-surface)); border-bottom-color: rgba(var(--page-accent-rgb), 0.16); } .theme-wa-future .table-hover > tbody > tr:hover > * { background: linear-gradient(180deg, rgba(var(--page-accent-rgb), 0.06), var(--wa-surface)); } .theme-wa-future .badge, .theme-wa-future .badge-wholesale, .theme-wa-future .chip-accent, .theme-wa-future .filters-status-badge, .theme-wa-future .filter-chip, .theme-wa-future .ciw-pill, .theme-wa-future .labor-chip, .theme-wa-future .chip { background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.1), rgba(var(--page-accent-alt-rgb), 0.1)); border-color: rgba(var(--page-accent-rgb), 0.14); color: var(--wa-text-strong); } /* ============================================ Wholesale Analytics 2026 contrast hardening Canonical semantic contrast tokens and live page overrides ============================================ */ :root { /* ---- Compatibility: the `--color-*` semantic layer ------------------- */ --color-text-primary: var(--wa-text); --color-text-secondary: var(--wa-text-dim); --color-text-muted: var(--wa-text-dim); --color-text-disabled: var(--wa-text-faint); --color-text-inverse: var(--wa-text-inverse); --color-text-inverse-muted: rgba(15, 20, 25, 0.72); --color-surface-base: var(--wa-canvas); --color-surface-card: var(--wa-surface); --color-surface-soft: var(--wa-surface-2); --color-surface-elevated: var(--wa-surface-2); --color-surface-tint: var(--wa-surface-3); --color-surface-tint-strong: var(--wa-surface-3); --color-surface-dark: var(--wa-canvas-deep); --color-border-default: var(--wa-hairline); --color-border-soft: var(--wa-hairline-soft); --color-accent: var(--wa-accent); --color-accent-strong: var(--wa-accent-bright); --color-success: var(--wa-good); --color-warning: var(--wa-warn); --color-danger: var(--wa-bad); --color-info: var(--wa-info); --color-link: var(--wa-accent); --color-link-hover: var(--wa-accent-bright); --color-link-text: var(--wa-accent); --color-header-title-inverse: var(--wa-text); --color-header-subtitle-inverse: var(--wa-text-dim); --color-card-title: var(--wa-text); --color-card-meta: var(--wa-text-dim); --color-chip-text: var(--wa-text); --color-chip-text-selected: var(--wa-text-inverse); --color-chip-text-inverse: var(--wa-text-inverse); --color-tab-text: var(--wa-text-dim); --color-tab-text-active: var(--wa-text); --color-button-text-primary: var(--wa-text-inverse); --color-button-text-secondary: var(--wa-text); --color-button-text-ghost: var(--wa-accent); --color-table-header-text: var(--wa-text-dim); --color-table-body-text: var(--wa-text); --color-table-muted-text: var(--wa-text-dim); --color-form-label-text: var(--wa-text-dim); --color-placeholder-text: var(--wa-text-faint); --color-eyebrow-text: var(--wa-text-faint); --color-background: var(--wa-canvas); --color-foreground: var(--wa-text); } body.theme-wa-future { color: var(--color-text-secondary); --bs-body-color: var(--color-text-secondary); --bs-emphasis-color: var(--color-text-primary); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-color: var(--color-text-disabled); --bs-border-color: var(--color-border-default); --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-hover); --bs-card-bg: var(--color-surface-card); } body.theme-wa-future, body.theme-wa-future .page-card, body.theme-wa-future .page-shell, body.theme-wa-future .chart-card, body.theme-wa-future .filters-shell, body.theme-wa-future .table-responsive, body.theme-wa-future .datatable, body.theme-wa-future .assistant-page, body.theme-wa-future .assistant-side, body.theme-wa-future .assistant-chat, body.theme-wa-future .returns-page .card, body.theme-wa-future .salesreps-v2 .card, body.theme-wa-future .regions-v2 .card, body.theme-wa-future .suppliers-section-card, body.theme-wa-future .suppliers-v2-page .card, body.theme-wa-future .labor-page .card, body.theme-wa-future .product-drilldown-v2 .card, body.theme-wa-future .ciw-surface, body.theme-wa-future .ciw-surface-soft { color: var(--color-text-secondary); } body.theme-wa-future h1, body.theme-wa-future h2, body.theme-wa-future h3, body.theme-wa-future h4, body.theme-wa-future h5, body.theme-wa-future h6, body.theme-wa-future .card-title, body.theme-wa-future .page-title, body.theme-wa-future .section-title, body.theme-wa-future .assistant-title, body.theme-wa-future .suppliers-section-title, body.theme-wa-future .products-layer-title, body.theme-wa-future .products-subsection-title, body.theme-wa-future .panel-title, body.theme-wa-future .hero-title, body.theme-wa-future .ciw-title, body.theme-wa-future .product-v2-hero-title, body.theme-wa-future .regions-v2 h1, body.theme-wa-future .regions-v2 h2 { color: var(--color-text-primary); } body.theme-wa-future a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--color-link); } body.theme-wa-future a:not(.btn):not(.nav-link):not(.dropdown-item):hover, body.theme-wa-future a:not(.btn):not(.nav-link):not(.dropdown-item):focus { color: var(--color-link-hover); } body.theme-wa-future .text-muted, body.theme-wa-future .text-secondary { color: var(--color-text-muted) !important; } body.theme-wa-future .text-white-50 { color: var(--color-text-inverse-muted) !important; } body.theme-wa-future .form-label, body.theme-wa-future .form-check-label, body.theme-wa-future .input-group-text, body.theme-wa-future .filters-shell label, body.theme-wa-future .filters-panel label { color: var(--color-form-label-text); } body.theme-wa-future .form-control, body.theme-wa-future .form-select, body.theme-wa-future textarea, body.theme-wa-future select { color: var(--color-text-secondary); } body.theme-wa-future .form-control::placeholder, body.theme-wa-future textarea::placeholder, body.theme-wa-future input::placeholder { color: var(--color-placeholder-text); opacity: 1; } body.theme-wa-future .form-control:disabled, body.theme-wa-future .form-select:disabled, body.theme-wa-future .btn:disabled, body.theme-wa-future .btn.disabled { color: var(--color-text-disabled); background: var(--wa-surface); border-color: var(--color-border-default); opacity: 1; box-shadow: none; } body.theme-wa-future .btn-primary { color: var(--color-button-text-primary); } body.theme-wa-future .btn-outline-secondary, body.theme-wa-future .btn-outline-primary, body.theme-wa-future .btn-light, body.theme-wa-future .btn-link { color: var(--color-button-text-secondary); } body.theme-wa-future .btn-link { color: var(--color-button-text-ghost); } body.theme-wa-future .nav-pills .nav-link, body.theme-wa-future .nav-tabs .nav-link { color: var(--color-tab-text); } body.theme-wa-future .nav-pills .nav-link.active, body.theme-wa-future .nav-pills .show > .nav-link, body.theme-wa-future .nav-tabs .nav-link.active { color: var(--color-tab-text-active); } body.theme-wa-future .table, body.theme-wa-future .datatable { color: var(--color-table-body-text); } body.theme-wa-future .table thead th, body.theme-wa-future .table-light th, body.theme-wa-future .table-light td { color: var(--color-table-header-text); } body.theme-wa-future .table-light { --bs-table-bg: var(--color-surface-tint-strong); --bs-table-color: var(--color-table-header-text); } body.theme-wa-future .table td .text-muted, body.theme-wa-future .table td .small.text-muted, body.theme-wa-future .datatable td .text-muted { color: var(--color-table-muted-text) !important; } body.theme-wa-future .badge, body.theme-wa-future .badge-wholesale, body.theme-wa-future .chip, body.theme-wa-future .chip-accent, body.theme-wa-future .filter-chip, body.theme-wa-future .filters-status-badge, body.theme-wa-future .risk-pill, body.theme-wa-future .severity-chip, body.theme-wa-future .labor-chip-dark, body.theme-wa-future .product-v2-chip, body.theme-wa-future .product-v2-status-pill { color: var(--color-chip-text); } body.theme-wa-future a:focus-visible, body.theme-wa-future button:focus-visible, body.theme-wa-future .nav-link:focus-visible, body.theme-wa-future .btn:focus-visible, body.theme-wa-future .form-control:focus-visible, body.theme-wa-future .form-select:focus-visible, body.theme-wa-future [data-drilldown-payload].is-drillable:focus-visible, body.theme-wa-future .table-row-click:focus-visible { outline: 2px solid rgba(var(--page-accent-rgb), 0.54); outline-offset: 2px; } body.theme-wa-future .navbar-wholesale, body.theme-wa-future .page-header, body.theme-wa-future .hero-card, body.theme-wa-future .page-header-futuristic, body.theme-wa-future .products-hero, body.theme-wa-future .labor-hero, body.theme-wa-future .assistant-header, body.theme-wa-future .suppliers-hero, body.theme-wa-future .filters-shell__header, body.theme-wa-future .filters-panel-header { color: var(--wa-on-dark); } body.theme-wa-future .navbar-wholesale h1, body.theme-wa-future .navbar-wholesale h2, body.theme-wa-future .navbar-wholesale h3, body.theme-wa-future .page-header h1, body.theme-wa-future .page-header h2, body.theme-wa-future .page-header h3, body.theme-wa-future .page-header-futuristic h1, body.theme-wa-future .page-header-futuristic h2, body.theme-wa-future .page-header-futuristic h3, body.theme-wa-future .products-hero h1, body.theme-wa-future .products-hero h2, body.theme-wa-future .labor-hero h1, body.theme-wa-future .labor-hero h2, body.theme-wa-future .assistant-header h1, body.theme-wa-future .assistant-header h2, body.theme-wa-future .suppliers-hero h1, body.theme-wa-future .suppliers-hero h2 { color: var(--color-header-title-inverse); } body.theme-wa-future .navbar-brand-copy, body.theme-wa-future .navbar-wholesale .navbar-brand .text-wholesale, body.theme-wa-future .navbar-wholesale .navbar-brand, body.theme-wa-future .navbar-wholesale .dropdown-toggle, body.theme-wa-future .products-hero .text-muted, body.theme-wa-future .products-hero .small, body.theme-wa-future .products-context-label, body.theme-wa-future .assistant-subtitle, body.theme-wa-future .assistant-header .chip, body.theme-wa-future .suppliers-hero-eyebrow, body.theme-wa-future .suppliers-hero-subtitle, body.theme-wa-future .suppliers-hero-meta, body.theme-wa-future .suppliers-hero-context, body.theme-wa-future .suppliers-hero-trust, body.theme-wa-future .suppliers-panel-label, body.theme-wa-future .suppliers-panel-note, body.theme-wa-future .suppliers-mini-stat .label, body.theme-wa-future .labor-kicker, body.theme-wa-future .labor-hero-subtitle, body.theme-wa-future .labor-hero-purpose, body.theme-wa-future .labor-command-link__detail, body.theme-wa-future .filters-shell__meta, body.theme-wa-future .filters-shell__date, body.theme-wa-future #filtersLastAppliedLabel { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future .navbar-wholesale .nav-link.disabled { color: var(--wa-text-dim) !important; } body.theme-wa-future .products-context-value, body.theme-wa-future .suppliers-hero-story, body.theme-wa-future .suppliers-panel-value, body.theme-wa-future .suppliers-mini-stat .value, body.theme-wa-future .labor-command-link, body.theme-wa-future .labor-command-link__title { color: var(--wa-on-dark); } body.theme-wa-future .ciw-hero, body.theme-wa-future .product-v2-hero, body.theme-wa-future .regions-v2 .regions-v2-hero { color: var(--color-text-secondary); } body.theme-wa-future .ciw-hero h1, body.theme-wa-future .ciw-hero h2, body.theme-wa-future .product-v2-hero h1, body.theme-wa-future .product-v2-hero h2, body.theme-wa-future .regions-v2 .regions-v2-hero h1, body.theme-wa-future .regions-v2 .regions-v2-hero h2 { color: var(--color-text-primary); } body.theme-wa-future .ciw-hero .ciw-subtitle, body.theme-wa-future .ciw-hero .ciw-copy, body.theme-wa-future .ciw-hero .ciw-card-subtitle, body.theme-wa-future .ciw-hero .ciw-note, body.theme-wa-future .product-v2-hero .product-v2-hero-summary, body.theme-wa-future .product-v2-hero .product-v2-hero-meta, body.theme-wa-future .product-v2-hero .small, body.theme-wa-future .regions-v2 .regions-v2-hero .text-muted, body.theme-wa-future .regions-v2 .regions-v2-hero .small.text-muted { color: var(--muted-foreground-strong) !important; } body.theme-wa-future #overviewPage { --overview-ink: var(--color-text-primary); --overview-ink-soft: var(--color-text-muted); --overview-border: var(--color-border-default); --overview-border-strong: var(--wa-hairline); --overview-surface: var(--color-surface-card); --overview-surface-muted: var(--color-surface-soft); } body.theme-wa-future #overviewPage .hero-copy, body.theme-wa-future #overviewPage .hero-filter-line, body.theme-wa-future #overviewPage .hero-period-note, body.theme-wa-future #overviewPage .hero-side-header p, body.theme-wa-future #overviewPage .panel-subtitle, body.theme-wa-future #overviewPage .section-shell-copy, body.theme-wa-future #overviewPage .hero-side-metric .label, body.theme-wa-future #overviewPage .score-delta, body.theme-wa-future #overviewPage .text-muted.small { color: var(--color-text-muted) !important; } body.theme-wa-future #overviewPage .hero-status-blurb { color: var(--color-text-primary); background: linear-gradient(135deg, var(--wa-surface), var(--wa-surface-2)); border-color: var(--wa-info-wash); } body.theme-wa-future #overviewPage .context-chip, body.theme-wa-future #overviewPage .hero-link, body.theme-wa-future #overviewPage .action-link { color: var(--color-text-primary); border-color: var(--color-border-soft); background: var(--wa-surface); } body.theme-wa-future .products-v2 .insight-label, body.theme-wa-future .products-v2 .insight-note, body.theme-wa-future .products-v2 .metric-label, body.theme-wa-future .products-v2 .mini-kpi-label, body.theme-wa-future .products-v2 .mini-kpi-note, body.theme-wa-future .products-v2 .products-column-chooser label, body.theme-wa-future .products-v2 .products-column-chooser summary, body.theme-wa-future .products-v2 .decision-signal-label, body.theme-wa-future .products-v2 .decision-signal-note, body.theme-wa-future .products-v2 .products-brief-label, body.theme-wa-future .products-v2 .products-brief-note, body.theme-wa-future .products-v2 .strategy-stat-label, body.theme-wa-future .products-v2 .focus-action-owner, body.theme-wa-future .products-v2 .focus-action-detail, body.theme-wa-future .products-v2 .products-layer-subtitle, body.theme-wa-future .products-v2 .products-subsection-copy, body.theme-wa-future .products-v2 .products-layer-context, body.theme-wa-future .products-v2 .workspace-control-label, body.theme-wa-future .products-v2 .text-muted.small { color: var(--color-card-meta) !important; } body.theme-wa-future .products-v2 .insight-value, body.theme-wa-future .products-v2 .metric-value, body.theme-wa-future .products-v2 .mini-kpi-value, body.theme-wa-future .products-v2 .decision-signal-value, body.theme-wa-future .products-v2 .products-brief-value, body.theme-wa-future .products-v2 .strategy-stat-value, body.theme-wa-future .products-v2 .products-layer-title, body.theme-wa-future .products-v2 .products-subsection-title { color: var(--color-card-title); } body.theme-wa-future .products-v2 .nav-pills .nav-link:not(.active) { color: var(--color-tab-text); background: var(--wa-surface); } body.theme-wa-future .products-v2 .nav-pills .nav-link:not(.active):hover, body.theme-wa-future .products-v2 .nav-pills .nav-link:not(.active):focus { color: var(--color-tab-text-active); background: var(--wa-surface); } body.theme-wa-future .products-v2 .products-column-chooser, body.theme-wa-future .products-v2 .metric-card, body.theme-wa-future .products-v2 .insight-card, body.theme-wa-future .products-v2 .mini-kpi { border-color: var(--color-border-soft); } body.theme-wa-future .salesreps-v2 .sr-kpi .label, body.theme-wa-future .salesreps-v2 .sr-kpi .delta, body.theme-wa-future .salesreps-v2 .sr-columns-menu label, body.theme-wa-future .salesreps-v2 .text-muted.small { color: var(--color-text-muted) !important; } body.theme-wa-future .salesreps-v2 .sr-kpi .value, body.theme-wa-future .salesreps-v2 .sr-columns summary { color: var(--color-text-primary); } body.theme-wa-future .kpi-shell { border-color: var(--color-border-default); background: var(--color-surface-card); } body.theme-wa-future .kpi-shell .kpi-label { color: var(--color-text-muted); } body.theme-wa-future .kpi-shell .kpi-value { color: var(--color-text-primary); } body.theme-wa-future .assistant-page { border-color: var(--color-border-default); background: radial-gradient(circle at top right, rgba(var(--page-accent-rgb), 0.08), transparent 40%), linear-gradient(180deg, var(--wa-surface), var(--wa-surface) 60%); } body.theme-wa-future .assistant-page .assistant-kicker, body.theme-wa-future .assistant-page .side-subtitle, body.theme-wa-future .assistant-page .assistant-control > span, body.theme-wa-future .assistant-page .assistant-control-toggle > span, body.theme-wa-future .assistant-page .chat-role { color: var(--color-eyebrow-text); } body.theme-wa-future .assistant-page .assistant-subtitle, body.theme-wa-future .assistant-page .proactive-card-body, body.theme-wa-future .assistant-page .assistant-banner { color: var(--color-text-muted); } body.theme-wa-future .assistant-page .prompt-btn, body.theme-wa-future .assistant-page .chip, body.theme-wa-future .assistant-page .chat-message, body.theme-wa-future .assistant-page .chat-scroll, body.theme-wa-future .assistant-page .proactive-card { border-color: var(--color-border-soft); color: var(--color-text-secondary); } body.theme-wa-future .assistant-page .proactive-card-title, body.theme-wa-future .assistant-page .side-title { color: var(--color-text-primary); } body.theme-wa-future .assistant-page .assistant-banner { background: var(--wa-surface); border-color: var(--wa-warn); } body.theme-wa-future .suppliers-v2-page { --suppliers-border: var(--color-border-default); --suppliers-ink: var(--color-text-primary); --suppliers-muted: var(--wa-info); } body.theme-wa-future .labor-page { --labor-ink: var(--color-text-primary); --labor-muted: var(--color-text-muted); --labor-border: var(--wa-hairline); --labor-panel: var(--wa-surface); } body.theme-wa-future .labor-page .btn-link { color: var(--color-table-header-text); } body.theme-wa-future .labor-page .btn-link:hover, body.theme-wa-future .labor-page .btn-link:focus { color: var(--color-link-hover); } body.theme-wa-future .regions-v2 .regions-v2-hero { border-color: var(--color-border-default); } body.theme-wa-future .regions-v2 .delta-stable { color: var(--color-text-muted); } body.theme-wa-future .regions-v2 .btn[data-quick-filter].active { color: var(--color-text-inverse); } /* Wholesale Analytics 2026 contrast outlier cleanup */ body.theme-wa-future #overviewPage .health-title, body.theme-wa-future #overviewPage .health-metric-value, body.theme-wa-future #overviewPage .health-progress-label { color: var(--color-text-primary); } body.theme-wa-future #overviewPage .health-subtitle, body.theme-wa-future #overviewPage .health-metric-label, body.theme-wa-future #overviewPage .health-metric-subtitle, body.theme-wa-future #overviewPage .health-progress-markers { color: var(--color-text-muted); } body.theme-wa-future #overviewPage .health-progress-status.excellent { background: var(--wa-good-wash); color: var(--wa-good); } body.theme-wa-future #overviewPage .health-progress-status.good { background: var(--wa-info-wash); color: var(--wa-info); } body.theme-wa-future #overviewPage .health-progress-status.fair { background: var(--wa-warn-wash); color: var(--wa-warn); } body.theme-wa-future #overviewPage .health-progress-status.poor { background: var(--wa-warn-wash); color: var(--wa-bad); } body.theme-wa-future #overviewPage .health-progress-status.critical { background: var(--wa-bad-wash); color: var(--wa-bad); } body.theme-wa-future #overviewPage .export-btn-futuristic { border-color: var(--color-accent); color: var(--color-link-text); background: var(--color-surface-card); } body.theme-wa-future #overviewPage .export-btn-futuristic:hover, body.theme-wa-future #overviewPage .export-btn-futuristic:focus { color: var(--color-text-inverse); background: var(--color-accent); } body.theme-wa-future #overviewPage .refresh-btn-futuristic { border-color: var(--color-border-default); color: var(--color-text-secondary); background: var(--color-surface-card); } body.theme-wa-future #overviewPage .refresh-btn-futuristic:hover, body.theme-wa-future #overviewPage .refresh-btn-futuristic:focus { color: var(--color-text-inverse); background: var(--color-text-secondary); border-color: var(--color-text-secondary); } body.theme-wa-future .products-v2 .health-kicker, body.theme-wa-future .products-v2 .health-meta, body.theme-wa-future .products-v2 .health-items-row, body.theme-wa-future .products-v2 .info-dot { color: var(--color-card-meta) !important; } body.theme-wa-future .products-v2 .health-value { color: var(--color-card-title); } body.theme-wa-future .products-v2 .health-card summary { color: var(--color-link-text); } body.theme-wa-future .products-v2 .health-items-row { border-bottom-color: var(--color-border-soft); } body.theme-wa-future .assistant-page .assistant-title, body.theme-wa-future .assistant-page .assistant-side, body.theme-wa-future .assistant-page .assistant-chat { color: var(--color-text-primary); border-color: var(--color-border-default); } body.theme-wa-future .assistant-page .assistant-side, body.theme-wa-future .assistant-page .assistant-chat { background: var(--color-surface-card); } body.theme-wa-future .udrill-banner__title, body.theme-wa-future [data-drilldown-payload].is-drillable::after, body.theme-wa-future .udw-eyebrow, body.theme-wa-future .udw-card-label, body.theme-wa-future .udw-detail-label, body.theme-wa-future .udw-card-detail, body.theme-wa-future .udw-empty { color: var(--color-text-muted); } body.theme-wa-future .udrill-banner__path, body.theme-wa-future .udw-card-value, body.theme-wa-future .udw-detail-value, body.theme-wa-future .udrill-chip, body.theme-wa-future .udw-chip { color: var(--color-text-primary); } /* ============================================ Wholesale Analytics 2026 canonical light theme Resolves semantic drift, washed-out surfaces, and dark-token leakage ============================================ */ :root { /* ---- Compatibility: the shadcn-shaped layer -------------------------- */ --background: var(--wa-canvas); --foreground: var(--wa-text); --card: var(--wa-surface); --card-foreground: var(--wa-text); --surface-muted: var(--wa-surface-2); --surface-elevated: var(--wa-surface-2); --primary: var(--wa-accent); --primary-foreground: var(--wa-text-inverse); --secondary: var(--wa-surface-3); --secondary-foreground: var(--wa-text); --muted: var(--wa-surface-2); --muted-foreground: var(--wa-text-dim); --muted-foreground-strong: var(--wa-text); --border: var(--wa-hairline); --border-strong: var(--wa-hairline-strong); --input: var(--wa-surface-2); --ring: var(--wa-accent-line); --success: var(--wa-good); --warning: var(--wa-warn); --danger: var(--wa-bad); --info: var(--wa-info); --surface-shadow-sm: var(--wa-shadow-sm); --surface-shadow-md: var(--wa-shadow); --surface-shadow-lg: var(--wa-shadow-lg); } body.theme-wa-future { color: var(--color-text-secondary); background: radial-gradient(circle at top left, rgba(var(--page-accent-rgb), 0.05), transparent 24%), radial-gradient(circle at 88% 0%, rgba(var(--page-accent-alt-rgb), 0.06), transparent 18%), linear-gradient(180deg, var(--wa-surface) 0%, var(--background) 45%, var(--wa-surface) 100%); --bs-body-bg: var(--background); --bs-body-color: var(--color-text-secondary); --bs-emphasis-color: var(--foreground); --bs-secondary-color: var(--color-text-muted); --bs-tertiary-color: var(--color-text-disabled); --bs-heading-color: var(--foreground); --bs-border-color: var(--color-border-default); --bs-border-color-translucent: rgba(21, 36, 54, 0.08); --bs-secondary-bg: var(--surface-muted); --bs-tertiary-bg: #edf3f9; --bs-body-tertiary-bg: #edf3f9; --bs-card-bg: var(--card); --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-hover); } body.theme-wa-future .app-shell { background: radial-gradient(circle at top left, rgba(var(--page-accent-rgb), 0.06), transparent 22%), radial-gradient(circle at 86% 2%, rgba(var(--page-accent-alt-rgb), 0.08), transparent 18%), linear-gradient(180deg, var(--wa-surface) 0%, var(--background) 52%, var(--wa-surface) 100%); } body.theme-wa-future .app-shell::before { opacity: 0.025; mix-blend-mode: multiply; } body.theme-wa-future .app-shell::after { background: none; mask-image: none; } body.theme-wa-future .navbar-wholesale { box-shadow: 0 16px 36px rgba(8, 16, 29, 0.22); backdrop-filter: none; } body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link, body.theme-wa-future .navbar-wholesale .dropdown-toggle, body.theme-wa-future .navbar-wholesale .navbar-brand { color: var(--wa-on-dark); } body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link:hover, body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link:focus { color: var(--wa-on-dark); border-color: var(--wa-hairline); background: var(--wa-surface-2); } body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link.active { border-color: rgba(var(--page-accent-rgb), 0.28); background: linear-gradient(135deg, rgba(var(--page-accent-rgb), 0.24), rgba(var(--page-accent-alt-rgb), 0.18)); } body.theme-wa-future .dropdown-menu { background: var(--surface-elevated); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); box-shadow: var(--surface-shadow-lg); backdrop-filter: none; } body.theme-wa-future .dropdown-item { color: var(--color-text-secondary); } body.theme-wa-future .dropdown-item:hover, body.theme-wa-future .dropdown-item:focus { color: var(--foreground); background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface-2)); } body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.ciw-hero):not(.product-v2-hero):not(.labor-hero):not(.assistant-header):not(.suppliers-hero):not(.regions-v2-hero), body.theme-wa-future .page-card, body.theme-wa-future .page-shell, body.theme-wa-future .chart-card, body.theme-wa-future .filters-shell, body.theme-wa-future .table-responsive, body.theme-wa-future .datatable, body.theme-wa-future .assistant-page, body.theme-wa-future .assistant-side, body.theme-wa-future .assistant-chat, body.theme-wa-future .returns-page .card, body.theme-wa-future .kpi-shell, body.theme-wa-future .kpi-card, body.theme-wa-future .mini-kpi, body.theme-wa-future .metric-card, body.theme-wa-future .decision-signal-card, body.theme-wa-future .products-brief-card, body.theme-wa-future .strategy-stat-card, body.theme-wa-future .focus-action-card, body.theme-wa-future .ciw-metric-card, body.theme-wa-future .ciw-action-card, body.theme-wa-future .ciw-stat-card, body.theme-wa-future .ciw-score-chip, body.theme-wa-future .product-v2-layer-context, body.theme-wa-future .product-v2-story-callout, body.theme-wa-future .product-v2-intel-metric, body.theme-wa-future .kpi-glass-card, body.theme-wa-future .metric-card-futuristic, body.theme-wa-future .chart-card-futuristic, body.theme-wa-future .health-metric-card, body.theme-wa-future .health-progress-container, body.theme-wa-future .udrill-banner, body.theme-wa-future .udw-empty { background: var(--surface-elevated); border: 1px solid var(--color-border-default); box-shadow: var(--surface-shadow-md); backdrop-filter: none; } body.theme-wa-future .card-header, body.theme-wa-future .card-footer, body.theme-wa-future .msx-head, body.theme-wa-future .chart-card-header { background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface-2) 100%); border-bottom-color: var(--color-border-default); } body.theme-wa-future .card-header.bg-white, body.theme-wa-future .card-header.bg-transparent, body.theme-wa-future .chart-card-header { color: var(--color-text-primary); } body.theme-wa-future :is(.card-header.bg-white, .card-header.bg-transparent, .chart-card-header) :is(h1, h2, h3, h4, h5, h6, strong, .fw-semibold, .fw-bold, .card-title) { color: var(--color-text-primary) !important; } body.theme-wa-future :is(.card-header.bg-white, .card-header.bg-transparent, .chart-card-header) :is(.text-muted, .text-secondary, small, .small) { color: var(--muted-foreground-strong) !important; } body.theme-wa-future .text-muted, body.theme-wa-future .text-secondary, body.theme-wa-future .workspace-control-label, body.theme-wa-future .filters-actions__support, body.theme-wa-future .saved-view-library__meta, body.theme-wa-future .saved-view-card__meta, body.theme-wa-future .saved-view-card__summary, body.theme-wa-future .filter-tile__hint, body.theme-wa-future .filter-workspace__help, body.theme-wa-future .filters-empty-state, body.theme-wa-future .filters-context-strip__value, body.theme-wa-future .products-layer-subtitle, body.theme-wa-future .products-subsection-copy, body.theme-wa-future .products-layer-context, body.theme-wa-future .decision-signal-label, body.theme-wa-future .decision-signal-note, body.theme-wa-future .products-brief-label, body.theme-wa-future .products-brief-note, body.theme-wa-future .strategy-stat-label, body.theme-wa-future .focus-action-owner, body.theme-wa-future .assistant-subtitle, body.theme-wa-future .assistant-banner, body.theme-wa-future .health-subtitle, body.theme-wa-future .health-metric-label, body.theme-wa-future .health-metric-subtitle, body.theme-wa-future .metric-subtitle, body.theme-wa-future .metric-label-futuristic, body.theme-wa-future .kpi-label-enhanced { color: var(--color-text-muted) !important; } body.theme-wa-future h1, body.theme-wa-future h2, body.theme-wa-future h3, body.theme-wa-future h4, body.theme-wa-future h5, body.theme-wa-future h6, body.theme-wa-future .card-title, body.theme-wa-future .section-title, body.theme-wa-future .filter-tile__summary, body.theme-wa-future .filter-workspace__title, body.theme-wa-future .saved-view-card__name, body.theme-wa-future .kpi-value, body.theme-wa-future .metric-value, body.theme-wa-future .decision-signal-value, body.theme-wa-future .products-brief-value, body.theme-wa-future .strategy-stat-value, body.theme-wa-future .assistant-title, body.theme-wa-future .side-title, body.theme-wa-future .health-metric-value, body.theme-wa-future .health-progress-label, body.theme-wa-future .metric-value-futuristic, body.theme-wa-future .kpi-value-enhanced { color: var(--foreground); } body.theme-wa-future .btn-outline-secondary, body.theme-wa-future .btn-outline-primary, body.theme-wa-future .btn-light { color: var(--color-button-text-secondary); background: var(--surface-elevated); border-color: rgba(21, 36, 54, 0.16); box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04); backdrop-filter: none; } body.theme-wa-future .btn-outline-secondary:hover, body.theme-wa-future .btn-outline-primary:hover, body.theme-wa-future .btn-light:hover, body.theme-wa-future .btn-outline-secondary:focus, body.theme-wa-future .btn-outline-primary:focus, body.theme-wa-future .btn-light:focus { color: var(--foreground); background: var(--wa-surface-2); border-color: rgba(var(--page-accent-rgb), 0.28); box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08); } body.theme-wa-future .btn-link { color: var(--color-link-text); } body.theme-wa-future .btn-link:hover, body.theme-wa-future .btn-link:focus { color: var(--color-link-hover); } body.theme-wa-future .form-control, body.theme-wa-future .form-select, body.theme-wa-future textarea, body.theme-wa-future select, body.theme-wa-future .input-group-text { background: var(--input); color: var(--color-text-secondary); border-color: rgba(21, 36, 54, 0.14); box-shadow: none; } body.theme-wa-future .form-control:focus, body.theme-wa-future .form-select:focus, body.theme-wa-future textarea:focus, body.theme-wa-future select:focus { border-color: rgba(var(--page-accent-rgb), 0.35); box-shadow: 0 0 0 0.22rem var(--ring); } body.theme-wa-future .nav-pills .nav-link, body.theme-wa-future .nav-tabs .nav-link { color: var(--color-tab-text) !important; background: var(--wa-surface); border: 1px solid rgba(21, 36, 54, 0.12); } body.theme-wa-future .nav-pills .nav-link:hover, body.theme-wa-future .nav-tabs .nav-link:hover, body.theme-wa-future .nav-pills .nav-link:focus, body.theme-wa-future .nav-tabs .nav-link:focus { color: var(--foreground); background: var(--wa-info-wash); border-color: rgba(var(--page-accent-rgb), 0.22); } body.theme-wa-future .nav-pills .nav-link.active, body.theme-wa-future .nav-pills .show > .nav-link, body.theme-wa-future .nav-tabs .nav-link.active { color: var(--foreground) !important; background: linear-gradient(180deg, var(--wa-surface), var(--wa-info-wash)) !important; border-color: rgba(var(--page-accent-rgb), 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); font-weight: 700; } body.theme-wa-future .table, body.theme-wa-future .datatable { color: var(--color-table-body-text); --bs-table-bg: transparent; --bs-table-border-color: rgba(21, 36, 54, 0.09); } body.theme-wa-future .table thead th, body.theme-wa-future .table-light th, body.theme-wa-future .table-light td { color: var(--color-table-header-text); background: linear-gradient(180deg, var(--wa-surface-2) 0%, var(--wa-surface) 100%); border-bottom-color: rgba(21, 36, 54, 0.14); } body.theme-wa-future .table tbody td, body.theme-wa-future .datatable tbody td { border-color: rgba(21, 36, 54, 0.08); } body.theme-wa-future .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--wa-surface); } body.theme-wa-future .table-hover > tbody > tr:hover > * { background: var(--wa-info-wash); } body.theme-wa-future .table-responsive, body.theme-wa-future .datatable { border: 1px solid rgba(21, 36, 54, 0.1); } body.theme-wa-future .filters-shell { border-color: rgba(var(--page-accent-rgb), 0.16); box-shadow: var(--surface-shadow-lg); } body.theme-wa-future .filters-shell__body, body.theme-wa-future .filters-section, body.theme-wa-future .filters-date-card, body.theme-wa-future .filters-quick-range-panel, body.theme-wa-future .filter-workspace, body.theme-wa-future .saved-view-hub, body.theme-wa-future .filters-shell .msx, body.theme-wa-future .filters-actions { background: var(--surface-elevated); border-color: rgba(21, 36, 54, 0.11); box-shadow: var(--surface-shadow-sm); backdrop-filter: none; } body.theme-wa-future .filters-context-strip { background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%); border-color: rgba(var(--page-accent-rgb), 0.14); } body.theme-wa-future .filters-context-strip__badge, body.theme-wa-future .filter-tile__count, body.theme-wa-future .filter-workspace__selection-count { background: var(--wa-info-wash); color: var(--foreground); } body.theme-wa-future .filter-range-pill, body.theme-wa-future .filter-tile, body.theme-wa-future .saved-view-card, body.theme-wa-future .filters-shell .msx-chip { background: var(--surface-elevated); border-color: rgba(21, 36, 54, 0.12); color: var(--foreground); box-shadow: none; } body.theme-wa-future .filter-range-pill:hover, body.theme-wa-future .filter-tile:hover, body.theme-wa-future .saved-view-card:hover, body.theme-wa-future .filters-shell .msx-row:hover { border-color: rgba(var(--page-accent-rgb), 0.24); background: var(--wa-surface); } body.theme-wa-future .filter-range-pill.is-active, body.theme-wa-future .filter-tile.is-open, body.theme-wa-future .filter-tile.has-value, body.theme-wa-future .saved-view-card.is-active, body.theme-wa-future .saved-view-card.is-selected { background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface-2) 100%); border-color: rgba(var(--page-accent-rgb), 0.28); color: var(--foreground); } body.theme-wa-future .filter-tile[disabled], body.theme-wa-future .filter-tile[data-unavailable="1"] { opacity: 0.74; } body.theme-wa-future .filters-empty-state, body.theme-wa-future .filters-shell .msx-empty-state, body.theme-wa-future .udw-empty { background: var(--wa-surface); border-color: rgba(21, 36, 54, 0.12); } body.theme-wa-future #overviewPage .kpi-glass-card, body.theme-wa-future #overviewPage .metric-card-futuristic, body.theme-wa-future #overviewPage .chart-card-futuristic, body.theme-wa-future #overviewPage .health-metric-card, body.theme-wa-future #overviewPage .health-progress-container { background: var(--surface-elevated); border: 1px solid rgba(21, 36, 54, 0.12); box-shadow: var(--surface-shadow-md); backdrop-filter: none; } body.theme-wa-future #overviewPage .metric-card-futuristic:hover, body.theme-wa-future #overviewPage .health-metric-card:hover, body.theme-wa-future #overviewPage .chart-card-futuristic:hover, body.theme-wa-future #overviewPage .kpi-glass-card:hover { border-color: rgba(var(--page-accent-rgb), 0.24); box-shadow: 0 24px 48px rgba(16, 24, 40, 0.12); } body.theme-wa-future #overviewPage .export-btn-futuristic, body.theme-wa-future #overviewPage .refresh-btn-futuristic { background: var(--surface-elevated); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05); } body.theme-wa-future #overviewPage .health-progress-bar { background: var(--wa-info-wash); } body.theme-wa-future #overviewPage .health-concerns-list .badge { color: var(--wa-warn); } /* ============================================ Wholesale Analytics 2026 shell hardening Remove residual app-wide haze and ensure overlays only render when active ============================================ */ body.theme-wa-future { background: var(--wa-surface-2); } body.app-shell.theme-wa-future, body.theme-wa-future.app-shell { background: radial-gradient(circle at 8% 0%, rgba(var(--page-accent-rgb), 0.07), transparent 26rem), radial-gradient(circle at 92% 4%, rgba(var(--page-accent-alt-rgb), 0.055), transparent 22rem), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface-2) 48%, var(--wa-surface) 100%); } body.app-shell.theme-wa-future::before, body.theme-wa-future.app-shell::before, body.app-shell.theme-wa-future::after, body.theme-wa-future.app-shell::after { content: none; background: none !important; mask-image: none !important; opacity: 0 !important; mix-blend-mode: normal !important; } body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.ciw-hero):not(.product-v2-hero):not(.labor-hero):not(.assistant-header):not(.suppliers-hero):not(.regions-v2-hero), body.theme-wa-future .page-card, body.theme-wa-future .page-shell, body.theme-wa-future .chart-card, body.theme-wa-future .table-responsive, body.theme-wa-future .datatable, body.theme-wa-future .assistant-page, body.theme-wa-future .assistant-side, body.theme-wa-future .assistant-chat, body.theme-wa-future .returns-page .card, body.theme-wa-future .udrill-banner, body.theme-wa-future .udw-empty { background: var(--wa-surface); border-color: var(--wa-hairline); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07); backdrop-filter: none !important; } body.theme-wa-future .filters-shell, body.theme-wa-future .filters-shell__body, body.theme-wa-future .filters-section, body.theme-wa-future .filters-date-card, body.theme-wa-future .filters-quick-range-panel, body.theme-wa-future .filter-workspace, body.theme-wa-future .saved-view-hub, body.theme-wa-future .filters-shell .msx, body.theme-wa-future .filters-actions, body.theme-wa-future .alert-info, body.theme-wa-future .alert-warning, body.theme-wa-future .alert-success, body.theme-wa-future .alert-danger, body.theme-wa-future .alert-primary { background: var(--wa-surface); backdrop-filter: none !important; } body.theme-wa-future .filters-shell, body.theme-wa-future .filters-shell__body, body.theme-wa-future .filters-section, body.theme-wa-future .filters-date-card, body.theme-wa-future .filters-quick-range-panel, body.theme-wa-future .filter-workspace, body.theme-wa-future .saved-view-hub, body.theme-wa-future .filters-shell .msx, body.theme-wa-future .filters-actions { border-color: var(--wa-hairline); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); } body.theme-wa-future .bg-light { background-color: var(--wa-surface) !important; } body.theme-wa-future .shadow-sm { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important; } body.theme-wa-future .card-header.bg-transparent { background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%) !important; } body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.suppliers-hero):not(.ciw-hero):not(.product-v2-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero):not(.labor-hero) .text-muted, body.theme-wa-future .text-muted.small, body.theme-wa-future small.text-muted, body.theme-wa-future .table .text-muted { color: var(--muted-foreground-strong) !important; } body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.suppliers-hero):not(.ciw-hero):not(.product-v2-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero):not(.labor-hero) .fs-4, body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.suppliers-hero):not(.ciw-hero):not(.product-v2-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero):not(.labor-hero) .fs-5, body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.suppliers-hero):not(.ciw-hero):not(.product-v2-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero):not(.labor-hero) .fs-6, body.theme-wa-future .card:not(.page-header):not(.page-header-futuristic):not(.hero-card):not(.hero-card-futuristic):not(.products-hero):not(.suppliers-hero):not(.ciw-hero):not(.product-v2-hero):not(.supplier-v2-hero):not(.srpd-hero):not(.regions-v2-hero):not(.labor-hero) .fs-3 { color: var(--foreground); } body.theme-wa-future :is(.page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .suppliers-hero) :is(h1, h2, h3, h4, h5, h6, .fw-bold, .fs-3, .fs-4, .fs-5, .fs-6, strong) { color: var(--wa-on-dark) !important; } body.theme-wa-future :is(.page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .suppliers-hero) :is(.text-muted, .small, .text-white-50, .products-context-label, .products-hero-summary-label, .suppliers-panel-label, .suppliers-mini-stat .label) { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future .products-hero .products-context-value, body.theme-wa-future .products-hero .products-context-story, body.theme-wa-future .products-hero .products-hero-summary-value, body.theme-wa-future .suppliers-hero .suppliers-command-headline, body.theme-wa-future .suppliers-hero .suppliers-command-note, body.theme-wa-future .suppliers-hero .suppliers-command-point-copy { color: var(--wa-on-dark) !important; } /* One shared visual signature across workspaces: page identity is carried by a slim keyline, while the content surface and spacing remain consistent. */ body.theme-wa-future :is( .overview-hero .hero-main, .overview-hero .hero-side, .products-hero, .ciw-hero, .regions-v2-hero, .suppliers-hero, .labor-hero, .sr-hero, .assistant-header ) { border-top: 3px solid rgba(var(--page-accent-rgb), 0.88) !important; } /* The decorative Product gloss is the last child of the card. Without an explicit stacking order it paints over the copy and makes otherwise valid contrast look disabled. */ body.theme-wa-future .products-hero > .card-body { position: relative; z-index: 1; } body.theme-wa-future .products-hero > .hero-gloss { z-index: 0; opacity: 0.42; } body.theme-wa-future .badge.bg-info.bg-opacity-10.text-info { background: var(--wa-info-wash) !important; border-color: var(--wa-info-wash) !important; color: var(--wa-info) !important; } body.theme-wa-future .badge.bg-warning.bg-opacity-10.text-warning { background: var(--wa-warn-wash) !important; border-color: var(--wa-warn-wash) !important; color: var(--wa-warn) !important; } body.theme-wa-future .table thead th, body.theme-wa-future .table-light th, body.theme-wa-future .table-light td { background: var(--wa-surface-2); color: var(--wa-info); border-bottom-color: var(--wa-hairline); } body.theme-wa-future .table tbody td, body.theme-wa-future .datatable tbody td { color: var(--wa-info); } body.theme-wa-future .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--wa-surface); } body.theme-wa-future .input-group-text.bg-white, body.theme-wa-future .input-group-text { background: var(--wa-surface); color: var(--wa-info); border-color: var(--wa-hairline); } /* ============================================ Wholesale Analytics 2026 hero specificity repair Restore page-owned hero treatments that were being overridden by generic theme rules ============================================ */ body.theme-wa-future .suppliers-hero { background: radial-gradient(circle at top right, var(--wa-accent-wash), transparent 35%), radial-gradient(circle at 16% 20%, var(--wa-info-wash), transparent 28%), linear-gradient(140deg, rgba(11, 18, 33, 0.98), rgba(21, 33, 53, 0.96), var(--wa-bad)); border-color: var(--wa-hairline); box-shadow: 0 26px 60px rgba(8, 15, 30, 0.16); backdrop-filter: none !important; } body.theme-wa-future .suppliers-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--wa-surface-2), transparent 34%), linear-gradient(120deg, var(--wa-surface-2), transparent 48%); pointer-events: none; } body.theme-wa-future .suppliers-hero .btn-light { background: var(--wa-surface); color: var(--wa-text); border-color: var(--wa-hairline); } body.theme-wa-future .suppliers-hero .btn-outline-light { background: var(--wa-surface-2); color: var(--wa-text-inverse); border-color: var(--wa-hairline); } body.theme-wa-future .suppliers-hero .btn-light:hover, body.theme-wa-future .suppliers-hero .btn-light:focus { background: var(--wa-surface-2); color: var(--wa-text); border-color: var(--wa-hairline); } body.theme-wa-future .suppliers-hero .btn-outline-light:hover, body.theme-wa-future .suppliers-hero .btn-outline-light:focus { background: var(--wa-surface-2); color: var(--wa-text-inverse); border-color: var(--wa-hairline); } body.theme-wa-future .ciw-hero, body.theme-wa-future .product-v2-hero, body.theme-wa-future .supplier-v2-hero, body.theme-wa-future .salesrep-drilldown-v2 .srpd-hero, body.theme-wa-future .regions-v2 .regions-v2-hero { color: var(--foreground); border-color: var(--border-strong); box-shadow: var(--surface-shadow-md); backdrop-filter: none !important; } body.theme-wa-future .ciw-hero { background: var(--ciw-hero); } body.theme-wa-future .product-v2-hero { background: radial-gradient(circle at top right, var(--wa-info-wash), transparent 34%), radial-gradient(circle at bottom left, var(--wa-info-wash), transparent 30%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%); } body.theme-wa-future .supplier-v2-hero { background: radial-gradient(circle at top right, var(--wa-info-wash), transparent 34%), radial-gradient(circle at bottom left, var(--wa-bad-wash), transparent 30%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%); } body.theme-wa-future .salesrep-drilldown-v2 .srpd-hero { background: radial-gradient(circle at top right, var(--wa-info-wash), transparent 34%), radial-gradient(circle at bottom left, var(--wa-info-wash), transparent 30%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%); } body.theme-wa-future .regions-v2 .regions-v2-hero { background: radial-gradient(circle at top right, var(--wa-info-wash), transparent 32%), linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%); } body.theme-wa-future .ciw-hero .ciw-badge, body.theme-wa-future .ciw-hero .ciw-pill, body.theme-wa-future .product-v2-hero .product-v2-chip, body.theme-wa-future .product-v2-hero .product-v2-status-pill { color: var(--foreground); border-color: var(--border); background: var(--wa-surface); } body.theme-wa-future .auth-panel { max-width: 28rem; margin: 0 auto; padding: 1.75rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--wa-surface); box-shadow: var(--surface-shadow-lg); } body.theme-wa-future .auth-panel__eyebrow { margin-bottom: 0.45rem; color: var(--color-eyebrow-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body.theme-wa-future .auth-panel__title { margin-bottom: 0.35rem; color: var(--foreground); font-size: 2rem; line-height: 1.05; letter-spacing: -0.04em; } body.theme-wa-future .auth-panel__subtitle { margin-bottom: 1.35rem; color: var(--muted-foreground); font-size: 0.95rem; } body.theme-wa-future .auth-panel { max-width: 34rem; } /* ========================================================================== Mobile: the page must not scroll sideways -------------------------------------------------------------------------- Recruiters open portfolio links on phones. At 375px the Overview laid out to 503px and the whole document scrolled horizontally, which is the difference between "dense" and "broken". Two causes, both structural rather than per-component: - flex rows that do not wrap. A `d-flex` with several chips or buttons has no wrap by default, so it sets a floor on the document width; - tables rendered outside a `.table-responsive` wrapper, which then push the page wider instead of scrolling inside their own box. Fixed here rather than in each template because the failure recurs wherever someone adds a row of chips, and a rule that applies once cannot be forgotten. ========================================================================== */ @media (max-width: 767.98px) { /* Both, or the document still scrolls while the body clips. */ html, body.theme-wa-future { overflow-x: hidden; max-width: 100%; } /* `.app-shell` IS the body element, so `.app-shell .d-flex` matches nothing. Scope to the body class directly. */ body.theme-wa-future .d-flex:not(.flex-nowrap):not(.flex-column) { flex-wrap: wrap; } /* Any table, wrapped or not, scrolls inside its own box. */ body.theme-wa-future table { display: block; max-width: 100%; overflow-x: auto; } /* Sticky columns need a positioned ancestor with a real width; at this size the horizontal space is not there to spare, so drop them. */ body.theme-wa-future .table-sticky-first > tbody > tr > td:first-child, body.theme-wa-future .table-sticky-first > thead > tr > th:first-child { position: static; box-shadow: none; } /* Charts get a workable minimum rather than collapsing to a sliver. */ body.theme-wa-future .chart-container, body.theme-wa-future .js-plotly-plot { min-height: 240px; } } /* ========================================================================== Wide tables: sticky header, sticky first column, and a visible edge -------------------------------------------------------------------------- The Customers and Suppliers tables cut columns mid-header at the right edge ("ORDE...", "PROFIT...") and the only affordance was a horizontal scrollbar that is easy to miss on a trackpad. Three changes, all on the existing .table-responsive wrapper so every table gets them: - the header row stays put while the body scrolls vertically; - the first column (always the entity name) stays put while the body scrolls horizontally, so a reader never loses track of which row they are reading; - a right-edge shadow appears only while there is more table to the right, which is the affordance the scrollbar was failing to provide. The shadow is a background-attachment trick rather than script: two linear gradients pinned to the scroll container, and two solid "cover" gradients pinned to the content. When the content edge reaches the container edge the cover hides the shadow. No listeners, no layout thrash. ========================================================================== */ body.theme-wa-future .table-responsive { overflow-x: auto; overflow-y: visible; background-image: linear-gradient(to right, var(--wa-surface), var(--wa-surface)), linear-gradient(to right, var(--wa-surface), var(--wa-surface)), linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } body.theme-wa-future .table-responsive > table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--wa-surface); } /* First column sticky, but only where the table is wide enough to scroll. Applying it unconditionally puts a seam on narrow tables that do not need one. Opt in per table with .table-sticky-first. */ body.theme-wa-future .table-sticky-first > tbody > tr > td:first-child, body.theme-wa-future .table-sticky-first > thead > tr > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--wa-surface); box-shadow: 1px 0 0 var(--border); } body.theme-wa-future .table-sticky-first > thead > tr > th:first-child { z-index: 3; } /* A totals row must line up with the columns it totals and say what it is. The Customers "Page totals" row printed three figures that did not sit under their columns, so it read as a stray row of numbers. */ body.theme-wa-future tfoot.table-totals > tr > td, body.theme-wa-future tr.table-totals > td { border-top: 2px solid var(--border); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--wa-surface-2); } /* The suggested tour on the Overview. Numbered links, not an overlay: a modal tour is something to dismiss, and a reviewer with three minutes should not have to spend the first ten seconds closing a thing. */ body.theme-wa-future .overview-tour { max-width: 62ch; margin-top: 0.75rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border, var(--wa-hairline)); border-radius: 10px; background: var(--wa-surface-2); } body.theme-wa-future .overview-tour__lead { display: block; margin-bottom: 0.35rem; color: var(--foreground); font-size: 0.8rem; font-weight: 700; } body.theme-wa-future .overview-tour__steps { margin: 0; padding-left: 1.15rem; color: var(--muted-foreground); font-size: 0.82rem; line-height: 1.65; } body.theme-wa-future .overview-tour__steps a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } body.theme-wa-future .overview-tour__steps a:hover, body.theme-wa-future .overview-tour__steps a:focus-visible { color: var(--foreground); } /* Keyboard focus must be visible everywhere, not just where a component happened to style it. */ body.theme-wa-future a:focus-visible, body.theme-wa-future button:focus-visible, body.theme-wa-future select:focus-visible, body.theme-wa-future input:focus-visible, body.theme-wa-future [tabindex]:focus-visible { outline: 2px solid var(--wa-accent, var(--primary, #2563eb)); outline-offset: 2px; border-radius: 4px; } /* Disabled controls were near-invisible against the dark surface - the Returns "Reset" button in particular read as missing rather than off. */ body.theme-wa-future .btn:disabled, body.theme-wa-future .btn.disabled, body.theme-wa-future fieldset:disabled .btn { opacity: 0.62; color: var(--muted-foreground); border-color: var(--border); } /* The synthetic-data disclosure on the Overview. Legible but not alarming: it is a statement about how the demo was built, not an error banner. */ body.theme-wa-future .overview-synthetic-note { max-width: 62ch; margin-top: 0.6rem; padding: 0.55rem 0.75rem; border-left: 3px solid var(--wa-accent, var(--primary, #2563eb)); border-radius: 0 8px 8px 0; background: var(--wa-surface-2); color: var(--muted-foreground); font-size: 0.82rem; line-height: 1.5; } body.theme-wa-future .overview-synthetic-note code { padding: 0.06rem 0.28rem; border-radius: 4px; background: var(--wa-surface); font-size: 0.9em; } /* Data freshness in the global filter bar. Deliberately the same muted treatment as the rest of the meta line: "Data through Jul 3, 2026" is a fact about the dataset, not a warning. */ body.theme-wa-future .filters-shell__freshness { color: var(--muted-foreground); font-size: 0.78rem; white-space: nowrap; } /* Error pages. These used to be a bootstrap alert with "Go back home", which read like a stack trace escaped; a visitor who mistypes a URL should land somewhere that still looks like the product. */ body.theme-wa-future .error-panel { max-width: 40rem; margin: 3rem auto; padding: 2rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--wa-surface); box-shadow: var(--surface-shadow-lg); } body.theme-wa-future .error-panel__code { margin: 0 0 0.35rem; color: var(--color-eyebrow-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; } body.theme-wa-future .error-panel__code--bad { color: var(--wa-bad, var(--danger, #dc2626)); } body.theme-wa-future .error-panel__title { margin: 0 0 0.75rem; color: var(--foreground); font-size: 1.65rem; line-height: 1.15; letter-spacing: -0.03em; } body.theme-wa-future .error-panel__body { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.55; } body.theme-wa-future .error-panel__body--muted { font-size: 0.85rem; opacity: 0.85; } body.theme-wa-future .error-panel__body code, body.theme-wa-future .error-panel__meta code { padding: 0.08rem 0.32rem; border-radius: 5px; background: var(--wa-surface-2); font-size: 0.85em; word-break: break-all; } body.theme-wa-future .error-panel__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } body.theme-wa-future .error-panel__meta { margin: 1.25rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; opacity: 0.75; } /* The one-click door into the demo. Deliberately the largest, highest-contrast thing on the page - it is the only control most visitors should ever use. */ body.theme-wa-future .auth-demo__cta { display: block; margin-bottom: 1.2rem; padding: 0.85rem 1.1rem; border: 0; border-radius: 12px; background: var(--wa-cta-bg, var(--wa-accent, var(--primary, #2563eb))); color: var(--wa-accent-contrast, #fff); text-align: center; text-decoration: none; transition: filter 120ms ease, transform 120ms ease; } body.theme-wa-future .auth-demo__cta:hover, body.theme-wa-future .auth-demo__cta:focus-visible { filter: brightness(1.08); transform: translateY(-1px); color: var(--wa-accent-contrast, #fff); } body.theme-wa-future .auth-demo__cta-label { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } body.theme-wa-future .auth-demo__cta-sub { display: block; margin-top: 0.15rem; font-size: 0.78rem; /* Small text on the accent needs the full ink; 0.85 pulled it under AA. */ opacity: 0.94; } body.theme-wa-future .auth-about { margin-bottom: 1.35rem; padding: 0.9rem 1rem; border: 1px solid var(--border, var(--wa-hairline)); border-radius: 12px; background: var(--wa-surface-2); } body.theme-wa-future .auth-about__title { margin: 0 0 0.45rem; color: var(--foreground); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.theme-wa-future .auth-about__body { margin: 0 0 0.6rem; color: var(--muted-foreground); font-size: 0.85rem; line-height: 1.5; } body.theme-wa-future .auth-about__body--last { margin-bottom: 0; } body.theme-wa-future .auth-about__body code { padding: 0.08rem 0.32rem; border-radius: 5px; background: var(--wa-surface); font-size: 0.82em; } /* Demo credentials panel, shown only on the public demo build. */ body.theme-wa-future .auth-demo { margin-bottom: 1.35rem; padding: 0.9rem 1rem; border: 1px solid var(--border, var(--wa-hairline)); border-radius: 12px; background: var(--wa-good-wash); } body.theme-wa-future .auth-demo__summary { cursor: pointer; color: var(--foreground); font-size: 0.85rem; font-weight: 600; } body.theme-wa-future .auth-demo[open] .auth-demo__summary { margin-bottom: 0.65rem; } body.theme-wa-future .auth-demo__cred { color: var(--muted-foreground); font-size: 0.78rem; } body.theme-wa-future .auth-demo__cred code { padding: 0.08rem 0.32rem; border-radius: 5px; background: var(--wa-surface-2); font-size: 0.9em; } body.theme-wa-future .auth-demo__lead { margin: 0 0 0.65rem; color: var(--muted-foreground); font-size: 0.85rem; line-height: 1.45; } body.theme-wa-future .auth-demo__lead code, body.theme-wa-future .auth-demo__pick code { padding: 0.08rem 0.32rem; border-radius: 5px; background: var(--wa-surface-2); font-size: 0.82em; } body.theme-wa-future .auth-demo__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; } body.theme-wa-future .auth-demo__list li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } body.theme-wa-future .auth-demo__pick { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; } body.theme-wa-future .auth-demo__pick:hover code, body.theme-wa-future .auth-demo__pick:focus-visible code { background: var(--wa-good-wash); } body.theme-wa-future .auth-demo__note { color: var(--muted-foreground); font-size: 0.78rem; } body.theme-wa-future .auth-demo__hint { margin: 0.6rem 0 0; color: var(--muted-foreground); font-size: 0.75rem; opacity: 0.8; } /* ========================================================================== Dark-first surface pass -------------------------------------------------------------------------- Everything above this line was written for a light theme, across four generations of tokens. This section is the corrective layer: it restates the structural surfaces - chrome, cards, tables, forms, and Bootstrap's own components - in terms of the tokens, so both themes are correct rather than one being a washed-out copy of the other. Kept deliberately small. If a rule here is fighting a rule above, the rule above is the one to fix. ========================================================================== */ /* ---- chrome -------------------------------------------------------------- */ .navbar-wholesale, body.theme-wa-future .navbar-wholesale { background: var(--wa-canvas-deep); border-bottom: 1px solid var(--wa-hairline); box-shadow: none; } .navbar-wholesale .navbar-brand, .navbar-wholesale .navbar-brand-copy { color: var(--wa-text); letter-spacing: 0.14em; } .navbar-wholesale .navbar-nav .nav-link { color: var(--wa-text-dim); border-bottom: none; padding: 0.35rem 0.15rem; margin-inline: 0.35rem; position: relative; font-weight: 500; } .navbar-wholesale .navbar-nav .nav-link:hover, .navbar-wholesale .navbar-nav .nav-link:focus-visible { color: var(--wa-text); } /* The active tab gets the accent as a 2px rule, not a fill. */ .navbar-wholesale .navbar-nav .nav-link.active { color: var(--wa-text); } .navbar-wholesale .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.55rem; height: 2px; background: var(--wa-accent); border-radius: 2px; } .navbar-wholesale .navbar-nav .nav-link.disabled { color: var(--wa-text-faint); opacity: 0.55; } .navbar-wholesale .dropdown-menu { background-color: var(--wa-surface-2); border: 1px solid var(--wa-hairline); box-shadow: var(--wa-shadow-lg); } .navbar-wholesale .dropdown-item { color: var(--wa-text-dim); } .navbar-wholesale .dropdown-item:hover, .navbar-wholesale .dropdown-item:focus { color: var(--wa-text); background-color: var(--wa-accent-wash); } .navbar-wholesale .dropdown-divider { border-top-color: var(--wa-hairline); } .navbar-toggler { border-color: var(--wa-hairline); } :root[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.6); } /* ---- theme toggle -------------------------------------------------------- */ .wa-theme-toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; margin-right: 0.4rem; border: 1px solid var(--wa-hairline); border-radius: 999px; background: transparent; color: var(--wa-text-dim); font: inherit; font-size: 0.78rem; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .wa-theme-toggle:hover, .wa-theme-toggle:focus-visible { color: var(--wa-text); border-color: var(--wa-hairline-strong); background: var(--wa-surface-2); } .wa-theme-toggle__icon { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: var(--wa-accent); box-shadow: inset -0.24rem -0.06rem 0 0 var(--wa-canvas-deep); } :root[data-theme="light"] .wa-theme-toggle__icon { box-shadow: none; } /* ---- surfaces ------------------------------------------------------------ */ .page-shell, .page-card, .card, .card-wholesale, .filter-bar, .filters-panel, .modal-content, .list-group-item, .accordion-item, .toast { background-color: var(--wa-surface); border-color: var(--wa-hairline); color: var(--wa-text); box-shadow: var(--wa-shadow-sm); } .card-header, .card-footer, .accordion-button, .modal-header, .modal-footer { background-color: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text); } /* The page header was a maroon gradient slab. A hairline-ruled block with an accent keyline reads as a header without shouting. */ .page-header { background: var(--wa-surface); color: var(--wa-text); border: 1px solid var(--wa-hairline); border-left: 2px solid var(--wa-accent); border-radius: var(--wa-radius); box-shadow: none; } .page-header .badge { background-color: var(--wa-accent-wash); color: var(--wa-accent); border: 1px solid var(--wa-accent-line); } /* ---- type ---------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .theme-wa-future h1, .theme-wa-future h2, .theme-wa-future h3, .theme-wa-future h4, .theme-wa-future h5, .theme-wa-future h6 { color: var(--wa-text); font-family: var(--wa-font-display); letter-spacing: -0.01em; font-weight: 600; } .text-muted, .text-secondary, small.text-muted, .form-text { color: var(--wa-text-dim) !important; } /* Eyebrows label a section; they are structure, not decoration. */ .section-eyebrow, .kpi-label, .metric-label { color: var(--wa-text-faint); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.68rem; font-weight: 600; } /* ---- the signature: figures --------------------------------------------- This product is a book of business measured in dollars per pound. The numbers are the interface, so they get the display face, tabular figures so columns align, and tight tracking so a seven-figure revenue still scans as one object. -------------------------------------------------------------------------- */ .kpi-value, .metric-value, .stat-value, .hero-metric-value, [data-metric-value], .wa-figure { font-family: var(--wa-font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 600; letter-spacing: -0.02em; color: var(--wa-text); /* Tracking is tight on purpose; the leading is not. Several of these figures sit in `overflow: hidden` boxes, and a line box this close to the font size clips the descender of a `$` and the tails of commas. */ line-height: 1.25; } /* ---- tables -------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--wa-text); --bs-table-border-color: var(--wa-hairline); --bs-table-striped-bg: var(--wa-surface-2); --bs-table-striped-color: var(--wa-text); --bs-table-hover-bg: var(--wa-accent-wash); --bs-table-hover-color: var(--wa-text); color: var(--wa-text); font-variant-numeric: tabular-nums; } .table > thead th { background-color: transparent; color: var(--wa-text-faint); border-bottom: 1px solid var(--wa-hairline-strong); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.7rem; font-weight: 600; } .table > tbody td, .table > tbody th { border-color: var(--wa-hairline-soft); } /* ---- forms --------------------------------------------------------------- */ .form-control, .form-select, .input-group-text { background-color: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text); } .form-control:focus, .form-select:focus { background-color: var(--wa-surface-2); border-color: var(--wa-accent); color: var(--wa-text); box-shadow: 0 0 0 3px var(--wa-accent-wash); } .form-control::placeholder { color: var(--wa-text-faint); } .form-label, .col-form-label { color: var(--wa-text-dim); font-weight: 500; } .form-check-input { background-color: var(--wa-surface-3); border-color: var(--wa-hairline-strong); } .form-check-input:checked { background-color: var(--wa-accent); border-color: var(--wa-accent); } /* Native date pickers are drawn by the browser and follow color-scheme, which is set on :root - this just keeps the glyph visible on a dark field. */ :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* ---- buttons ------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--wa-accent); --bs-btn-border-color: var(--wa-accent); --bs-btn-color: var(--wa-text-inverse); --bs-btn-hover-bg: var(--wa-accent-bright); --bs-btn-hover-border-color: var(--wa-accent-bright); --bs-btn-hover-color: var(--wa-text-inverse); --bs-btn-active-bg: var(--wa-accent-deep); --bs-btn-active-border-color: var(--wa-accent-deep); --bs-btn-disabled-bg: var(--wa-accent-deep); --bs-btn-disabled-border-color: var(--wa-accent-deep); font-weight: 600; background-image: none; } .btn-outline-secondary, .btn-secondary { --bs-btn-color: var(--wa-text-dim); --bs-btn-bg: transparent; --bs-btn-border-color: var(--wa-hairline-strong); --bs-btn-hover-bg: var(--wa-surface-2); --bs-btn-hover-border-color: var(--wa-hairline-strong); --bs-btn-hover-color: var(--wa-text); --bs-btn-active-bg: var(--wa-surface-3); --bs-btn-active-color: var(--wa-text); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); } /* ---- status ------------------------------------------------------------- */ .alert { background-color: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text); } .alert-warning { border-left: 2px solid var(--wa-warn); } .alert-danger { border-left: 2px solid var(--wa-bad); } .alert-success { border-left: 2px solid var(--wa-good); } .alert-info { border-left: 2px solid var(--wa-info); } .badge.text-bg-success, .badge.bg-success { background-color: var(--wa-good-wash) !important; color: var(--wa-good) !important; } .badge.text-bg-warning, .badge.bg-warning { background-color: var(--wa-warn-wash) !important; color: var(--wa-warn) !important; } .badge.text-bg-danger, .badge.bg-danger { background-color: var(--wa-bad-wash) !important; color: var(--wa-bad) !important; } .badge.text-bg-info, .badge.bg-info { background-color: var(--wa-info-wash) !important; color: var(--wa-info) !important; } .badge.text-bg-primary, .badge.bg-primary { background-color: var(--wa-accent-wash) !important; color: var(--wa-accent) !important; } .text-success { color: var(--wa-good) !important; } .text-warning { color: var(--wa-warn) !important; } .text-danger { color: var(--wa-bad) !important; } .text-info { color: var(--wa-info) !important; } .text-primary { color: var(--wa-accent) !important; } .text-dark { color: var(--wa-text) !important; } .text-white { color: var(--wa-text) !important; } .bg-white { background-color: var(--wa-surface) !important; } .bg-light { background-color: var(--wa-surface-2) !important; } .bg-dark { background-color: var(--wa-canvas-deep) !important; } .border { border-color: var(--wa-hairline) !important; } .border-faint { border-color: var(--wa-hairline-soft) !important; } .shadow-soft { box-shadow: var(--wa-shadow-sm) !important; } /* ---- tabs, pagination, misc --------------------------------------------- */ .nav-tabs { border-bottom-color: var(--wa-hairline); } .nav-tabs .nav-link { color: var(--wa-text-dim); border: none; border-bottom: 2px solid transparent; } .nav-tabs .nav-link:hover { color: var(--wa-text); border-bottom-color: var(--wa-hairline-strong); } .nav-tabs .nav-link.active { color: var(--wa-text); background: transparent; border-bottom-color: var(--wa-accent); } .page-link { background-color: var(--wa-surface-2); border-color: var(--wa-hairline); color: var(--wa-text-dim); } .page-item.active .page-link { background-color: var(--wa-accent); border-color: var(--wa-accent); color: var(--wa-text-inverse); } hr { border-color: var(--wa-hairline); opacity: 1; } code, kbd, pre { color: var(--wa-accent-bright); background-color: var(--wa-sunken); } ::selection { background: var(--wa-accent-wash); color: var(--wa-text); } /* ---- scrollbars ---------------------------------------------------------- */ * { scrollbar-color: var(--wa-hairline-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wa-hairline-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--wa-text-faint); background-clip: content-box; } /* ---- quality floor ------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--wa-accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- gradient purge ------------------------------------------------------ The old system painted three-stop gradients onto primary buttons, page headers, hero panels and chips. On a dark canvas they read as smears, and they were the single most dated thing on the page. Flat accent, one weight, with specificity high enough to beat `.theme-wa-future` (0,2,0). -------------------------------------------------------------------------- */ body.theme-wa-future .btn-primary, body.theme-wa-future .btn-primary:hover, body.theme-wa-future .btn-primary:focus, body.theme-wa-future .btn-primary:active { background-image: none; background-color: var(--wa-accent); border-color: var(--wa-accent); color: var(--wa-text-inverse); box-shadow: none; } body.theme-wa-future .btn-primary:hover, body.theme-wa-future .btn-primary:focus { background-color: var(--wa-accent-bright); border-color: var(--wa-accent-bright); } body.theme-wa-future .page-header, body.theme-wa-future .page-hero, body.theme-wa-future .hero-panel { background-image: none; background-color: var(--wa-surface); } /* ---- Bootstrap's own light utilities ------------------------------------- `.text-bg-light`, `.bg-*-subtle` and `.text-*-emphasis` are baked into Bootstrap's stylesheet as fixed light values, so they survive any amount of work on ours. Restate them against the tokens. -------------------------------------------------------------------------- */ .text-bg-light, .bg-light-subtle { background-color: var(--wa-surface-2) !important; color: var(--wa-text) !important; } .text-bg-dark, .bg-dark-subtle { background-color: var(--wa-canvas-deep) !important; color: var(--wa-text) !important; } .bg-primary-subtle { background-color: var(--wa-accent-wash) !important; } .bg-success-subtle { background-color: var(--wa-good-wash) !important; } .bg-warning-subtle { background-color: var(--wa-warn-wash) !important; } .bg-danger-subtle { background-color: var(--wa-bad-wash) !important; } .bg-info-subtle { background-color: var(--wa-info-wash) !important; } .bg-secondary-subtle { background-color: var(--wa-surface-2) !important; } .text-primary-emphasis { color: var(--wa-accent) !important; } .text-success-emphasis { color: var(--wa-good) !important; } .text-warning-emphasis { color: var(--wa-warn) !important; } .text-danger-emphasis { color: var(--wa-bad) !important; } .text-info-emphasis { color: var(--wa-info) !important; } .text-body-secondary, .text-body-tertiary { color: var(--wa-text-dim) !important; } .border-primary { border-color: var(--wa-accent) !important; } .border-success { border-color: var(--wa-good) !important; } .border-warning { border-color: var(--wa-warn) !important; } .border-danger { border-color: var(--wa-bad) !important; } .border-info { border-color: var(--wa-info) !important; } .border-light { border-color: var(--wa-hairline) !important; } /* ---- filters shell ------------------------------------------------------- The shared filter header is deliberate dark chrome in both modes. This gives its dates and controls one dependable contrast boundary everywhere. -------------------------------------------------------------------------- */ body.theme-wa-future .filters-shell { background: var(--wa-surface); border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius-lg); box-shadow: var(--wa-shadow-sm); } body.theme-wa-future .filters-shell__header { background: radial-gradient(circle at top right, rgba(var(--page-accent-rgb), 0.22), transparent 38%), linear-gradient(135deg, #08101d 0%, #142238 100%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; border-left: 2px solid var(--wa-accent) !important; color: var(--wa-on-dark) !important; } body.theme-wa-future .filters-shell__title, body.theme-wa-future .filters-shell__meta, body.theme-wa-future .filters-shell__date, body.theme-wa-future #filtersLastAppliedLabel { color: var(--wa-on-dark) !important; } body.theme-wa-future .filters-shell__meta, body.theme-wa-future .filters-shell__date, body.theme-wa-future .filters-shell__eyebrow { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future .filters-shell__eyebrow { color: rgba(var(--page-accent-alt-rgb), 0.95) !important; } body.theme-wa-future .filters-shell__header .filters-collapse-btn { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; color: var(--wa-on-dark) !important; border-radius: 999px; padding-inline: 1rem; } body.theme-wa-future .filters-shell__header .filters-collapse-btn:hover, body.theme-wa-future .filters-shell__header .filters-collapse-btn:focus-visible { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.9) !important; color: #08101d !important; } body.theme-wa-future .filter-chip, body.theme-wa-future .filter-chip--muted { background: var(--wa-surface-3); border: 1px solid var(--wa-hairline); color: var(--wa-text-dim); } body.theme-wa-future .filters-shell__header :is(.filter-chip, .filter-chip--muted, .filters-status-badge) { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: var(--wa-on-dark-muted) !important; } body.theme-wa-future .filters-shell__header .filters-status-badge.is-warning { background: rgba(224, 165, 72, 0.16) !important; border-color: rgba(224, 165, 72, 0.34) !important; color: var(--wa-on-dark) !important; } /* ---- final theme boundaries --------------------------------------------- Chrome and hero panels are deliberately dark in both modes. Everything else follows the paper/graphite surface tokens. Keeping that boundary explicit prevents legacy utilities from creating equal foreground and background colors when the theme changes. */ .navbar-wholesale, body.theme-wa-future .navbar-wholesale { background: #0a0e12; color: var(--wa-on-dark); } body.theme-wa-future .navbar-wholesale :is(.navbar-brand, .navbar-brand-copy, .nav-link, .dropdown-toggle) { color: var(--wa-on-dark); } body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link:hover, body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link:focus-visible { color: var(--wa-on-dark); background: rgba(255, 255, 255, 0.1); } body.theme-wa-future .navbar-wholesale .navbar-nav .nav-link.disabled { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future :is( .page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .labor-hero, .assistant-header, .suppliers-hero ) { background: radial-gradient(circle at top right, rgba(var(--page-accent-rgb), 0.24), transparent 32%), radial-gradient(circle at bottom left, rgba(var(--page-accent-alt-rgb), 0.18), transparent 28%), linear-gradient(135deg, #08101d 0%, #142238 68%, rgba(var(--page-accent-rgb), 0.55) 150%); border-color: rgba(255, 255, 255, 0.12); border-top: 3px solid rgba(var(--page-accent-rgb), 0.9); color: var(--wa-on-dark); } body.theme-wa-future :is( .page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .labor-hero, .assistant-header, .suppliers-hero ) :is(h1, h2, h3, h4, h5, h6, strong, .fw-bold, .fs-3, .fs-4, .fs-5, .fs-6) { color: var(--wa-on-dark) !important; } body.theme-wa-future :is( .page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .labor-hero, .assistant-header, .suppliers-hero ) :is(.text-muted, .text-secondary, .small, small, .text-white-50) { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future :is( .page-header, .page-header-futuristic, .hero-card, .hero-card-futuristic, .products-hero, .labor-hero, .assistant-header, .suppliers-hero ) :is(.badge, .chip, .feature-badge, .status-chip-futuristic) { color: var(--wa-on-dark) !important; background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } body.theme-wa-future .text-white, body.theme-wa-future .text-bg-dark, body.theme-wa-future .bg-dark-subtle { color: var(--wa-on-dark) !important; } /* Product decision context belongs to the dark hero. Legacy surface tokens made these four panels paper-white in light mode while their copy remained inverse. A restrained glass layer keeps the information readable in both themes without introducing another visual system. */ body.theme-wa-future .products-hero :is(.products-context-strip, .products-hero-summary-card) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: var(--wa-on-dark) !important; backdrop-filter: none; } body.theme-wa-future .products-hero :is( .products-context-label, .products-context-value, .products-context-story, .products-hero-summary-label, .products-hero-summary-value ) { color: var(--wa-on-dark) !important; } body.theme-wa-future .products-hero :is(.products-context-label, .products-hero-summary-label) { color: var(--wa-on-dark-muted) !important; } body.theme-wa-future .products-hero .btn-outline-light { color: var(--wa-on-dark) !important; background: rgba(4, 12, 24, 0.34) !important; border-color: rgba(255, 255, 255, 0.54) !important; } body.theme-wa-future .products-hero .btn-outline-light:hover, body.theme-wa-future .products-hero .btn-outline-light:focus { color: var(--wa-on-dark) !important; background: rgba(4, 12, 24, 0.58) !important; border-color: rgba(255, 255, 255, 0.82) !important; } /* A single orientation pattern shared by every primary workspace. It stays collapsed by default, adds no JavaScript, and uses only theme tokens so it cannot turn into low-contrast paper on the dark canvas. */ .page-guide { margin: 0 0 1rem; color: var(--wa-text); } .page-guide details { overflow: hidden; background: linear-gradient(135deg, var(--wa-surface), var(--wa-surface-2)); border: 1px solid var(--wa-hairline); border-radius: var(--wa-radius-lg); box-shadow: var(--wa-shadow-sm); } .page-guide summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.85rem 1rem; cursor: pointer; list-style: none; } .page-guide summary::-webkit-details-marker { display: none; } .page-guide__icon, .page-guide__number { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--wa-accent-bright); background: var(--wa-accent-wash); border: 1px solid var(--wa-accent-line); } .page-guide__icon { width: 2.15rem; height: 2.15rem; border-radius: 0.7rem; font-size: 1rem; } .page-guide__intro { min-width: 0; } .page-guide__eyebrow, .page-guide__title, .page-guide__summary { display: block; } .page-guide__eyebrow { color: var(--wa-accent-bright); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .page-guide__title { margin-top: 0.08rem; color: var(--wa-text-strong); font-size: 0.95rem; font-weight: 750; } .page-guide__summary { margin-top: 0.12rem; overflow: hidden; color: var(--wa-text-muted); font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; } .page-guide__toggle { color: var(--wa-text-muted); font-size: 0.75rem; font-weight: 700; } .page-guide__toggle::after { content: "▾"; display: inline-block; margin-left: 0.4rem; transition: transform 0.18s ease; } .page-guide details[open] .page-guide__toggle::after { transform: rotate(180deg); } .page-guide__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--wa-hairline-soft); } .page-guide__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; padding: 0.9rem 1rem 1rem; } .page-guide__step + .page-guide__step { border-left: 1px solid var(--wa-hairline-soft); } .page-guide__number { width: 1.55rem; height: 1.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; } .page-guide__step strong { display: block; color: var(--wa-text-strong); font-size: 0.78rem; } .page-guide__step span:not(.page-guide__number) { display: block; margin-top: 0.18rem; color: var(--wa-text-muted); font-size: 0.74rem; line-height: 1.45; } @media (max-width: 767.98px) { .page-guide summary { grid-template-columns: auto minmax(0, 1fr); } .page-guide__toggle { display: none; } .page-guide__summary { white-space: normal; } .page-guide__steps { grid-template-columns: 1fr; } .page-guide__step + .page-guide__step { border-top: 1px solid var(--wa-hairline-soft); border-left: 0; } } /* --------------------------------------------------------------------------- Navbar fit at laptop widths. `.theme-wa-future .navbar-wholesale .navbar-nav .nav-link` sets `padding-inline: 0.85rem` further up this file. It carries an extra class and sits later than the layout rules near the top, so a tidier override up there silently lost - the same stacked-generation problem this stylesheet has had before. Matching its specificity and placing it last is what makes it apply. Why it matters: the nav is `navbar-expand-xxl`, so from 1400px it lays out horizontally, but brand (269px) + nine links (1,075px) + the right-hand controls (142px) needed ~1,485px plus container padding. At 1440 and 1512 - two of the most common laptop widths - the bar ran past the right edge and gave the whole document a horizontal scrollbar on the first page a visitor sees. --------------------------------------------------------------------------- */ @media (min-width: 1400px) { .theme-wa-future .navbar-wholesale .navbar-nav .nav-link, .navbar-wholesale .navbar-nav .nav-link { padding-inline: 0.45rem; } } /* ── The demo call-to-action, which was painting green-on-green ────────── * * The button is an , and the generic link colour further up * body.theme-wa-future a:not(.btn):not(.nav-link):not(.dropdown-item) * scores 0-4-2 against the button's own 0-2-1, so the label inherited * `--color-link` — the accent green — and sat on the accent-green background. * Measured 1.06:1. The button rendered as a blank rectangle, and it is the one * control a visitor to this page is meant to use. * * Match the link rule's shape so this wins on order rather than on !important. */ body.theme-wa-future a.auth-demo__cta:not(.btn):not(.nav-link):not(.dropdown-item), body.theme-wa-future a.auth-demo__cta:not(.btn):not(.nav-link):not(.dropdown-item):hover, body.theme-wa-future a.auth-demo__cta:not(.btn):not(.nav-link):not(.dropdown-item):focus-visible, body.theme-wa-future a.auth-demo__cta:not(.btn):not(.nav-link):not(.dropdown-item):visited { color: var(--wa-accent-contrast, #fff); } body.theme-wa-future .auth-demo__cta .auth-demo__cta-label, body.theme-wa-future .auth-demo__cta .auth-demo__cta-sub { color: inherit; } /* ── Which half of the demo am I in? ──────────────────────────────────── * * Analytics is prerendered onto a CDN; this app keeps the writes. The two * share a nav bar, so crossing between them was invisible - the theme changed * and the user badge changed, and both read as bugs rather than as a boundary. */ .wa-live-banner { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 1rem; border-bottom: 1px solid var(--wa-warn-wash, rgba(224, 165, 72, 0.28)); background: var(--wa-warn-wash, rgba(224, 165, 72, 0.10)); color: var(--wa-text, #e6edf3); font-size: 0.82rem; line-height: 1.45; } .wa-live-banner__dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wa-warn, #e0a548); } .wa-live-banner__text { flex: 1 1 22rem; min-width: 0; } .wa-live-banner__text strong { font-weight: 700; } .wa-live-banner__back { flex: 0 0 auto; padding: 0.32rem 0.7rem; border: 1px solid var(--wa-hairline, rgba(148, 163, 184, 0.35)); border-radius: 999px; background: var(--wa-surface, #161d23); font-weight: 650; text-decoration: none; white-space: nowrap; } body.theme-wa-future a.wa-live-banner__back:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--wa-text, #e6edf3); } .wa-live-banner__back:hover { border-color: var(--wa-accent, #54c9a0); } @media (max-width: 575.98px) { .wa-live-banner { font-size: 0.78rem; } }