* { margin: 0; padding: 0; box-sizing: border-box; } /* Visually hidden but still readable by screen readers — used for aria-live announcements that have no visual presence of their own. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html, body, #root { width: 100%; min-height: 100vh; /* Layout containers below (KPI rows, tab strips, tables, etc.) own their own horizontal scroll via overflow-x: auto — the page body itself must never scroll horizontally, at any viewport width. */ overflow-x: hidden; } body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--color-bg-gradient); } /* ── Global scrollbar ─────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track); } *::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } *::-webkit-scrollbar-track { background-color: var(--color-scrollbar-track); border-radius: 6.25rem; } *::-webkit-scrollbar-thumb { border: 0.03125rem solid var(--color-scrollbar-thumb-border); border-radius: 6.25rem; background: var(--color-scrollbar-thumb); } *::-webkit-scrollbar-button { display: none; width: 0; height: 0; } *::-webkit-scrollbar-corner { background: transparent; } /* Remove arrow buttons completely (all states) */ *::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; } /* Also target directional buttons explicitly */ *::-webkit-scrollbar-button:vertical:start:decrement, *::-webkit-scrollbar-button:vertical:end:increment, *::-webkit-scrollbar-button:horizontal:start:decrement, *::-webkit-scrollbar-button:horizontal:end:increment { display: none; } /* Optional: force no extra spacing */ *::-webkit-scrollbar-track-piece { margin: 0; } /* ── New-optimiser screens: low-chrome scrollbar ────────────────────────── The global bar above paints a permanently visible grey track, which reads as an OS artifact parked inside these layouts. Here the track is transparent, so nothing shows until there is something to scroll, and the thumb is the brand navy at low alpha — receding at rest, firming up on hover. `background-clip: content-box` with a transparent border is what floats the thumb inside its gutter; without it the pill touches both edges and reads as the same chunky bar in a different colour. The border must be transparent rather than a background-coloured stroke, otherwise it fringes wherever the scroll container sits on a tinted surface instead of white. Scoped to the new-optimiser page roots, plus the scope dropdowns' portaled list (`.sfs-select` rides along via SelectDropdown's className pass-through) since that renders under , outside those roots. Everything else keeps the scrollbar it was designed against. The `*` above sets these properties on every element, so inheritance alone would not reach descendants here — hence the explicit descendant selectors. */ :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select), :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) * { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb-soft) transparent; } :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select)::-webkit-scrollbar, :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) *::-webkit-scrollbar { width: 0.66667rem; height: 0.66667rem; } :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select)::-webkit-scrollbar-track, :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) *::-webkit-scrollbar-track { background: transparent; border: 0; } :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select)::-webkit-scrollbar-thumb, :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) *::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb-soft); background-clip: content-box; border: 0.16667rem solid transparent; border-radius: var(--radius-pill); transition: background-color var(--motion-duration-normal) var(--motion-easing-standard); } :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select)::-webkit-scrollbar-thumb:hover, :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-soft-hover); } @media (prefers-reduced-motion: reduce) { :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select)::-webkit-scrollbar-thumb, :is(.ss-page, .sc-page, .or-page, .oh-page, .cmp-page, .sfs-select) *::-webkit-scrollbar-thumb { transition: none; } } /* ── New-optimiser screens: keep the page scroller clear of the app chrome ── Every other screen scrolls inside its OWN container mounted below the header (see PerformanceOverview's ``), so its track starts under the chrome and the thumb is visible end to end. These five pages scroll with the app-level `` in main.tsx, whose track spans the whole viewport — the top of the thumb ran underneath the fixed Navbar + AppTabs (and, on the three screens that have one, the sticky scope strip) and simply could not be seen. Insetting the track's top is the same result without giving these pages a second scroll container. `:has()` is what scopes it: the track is a SIBLING of the scrolled content, so which page is mounted can only be read from the shared root above both. */ :root { /* The one-line scope strip on Set Constraints / Results / Compare. The strips pin their own `min-height` to this same token, so the inset below and the thing it clears can't drift apart. */ --app-scope-strip-h: 2.44444rem; /* 44px */ } .csb-root:has(> .csb-content > :is(.oh-page, .ss-page)) .csb-track--v { top: var(--app-header-stack-h); } .csb-root:has(> .csb-content > :is(.sc-page, .or-page, .cmp-page)) .csb-track--v { top: calc(var(--app-header-stack-h) + var(--app-scope-strip-h)); } .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--space-10); background-color: var(--color-navbar); box-shadow: none; z-index: 1000; } .navbar-toolbar { height: 100%; padding: 0 var(--space-lg) 0 var(--space-5); display: flex; align-items: center; justify-content: space-between; } .navbar-brand-group { display: flex; align-items: center; gap: var(--space-sm); } .navbar-rapidroi-icon { display: flex; align-items: center; } .navbar-rapidroi-icon svg { /* Logo viewBox is tight (37 tall). Height drives the on-screen size; width scales automatically (~8:1 aspect). */ height: 1.15rem; width: auto; } .navbar-separator { color: var(--color-white); font-size: var(--font-size-5xl); font-weight: var(--font-weight-light); opacity: 0.5; line-height: var(--line-height-none); } .navbar-unilever-icon { display: flex; align-items: center; } .navbar-unilever-icon svg { height: var(--space-12-4); width: auto; } .navbar-dots-icon, .navbar-logout-icon { display: block; width: var(--space-lg); height: var(--space-lg); flex-shrink: 0; } .navbar-right { display: flex; align-items: center; gap: var(--space-md); } .navbar-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-px); } .navbar-last-updated { font-size: var(--font-size-sm); color: var(--color-white); opacity: 1; font-family: var(--font-family-base); white-space: nowrap; } .navbar-data-source { font-size: var(--font-size-xs); color: var(--color-white); opacity: 1; text-decoration: underline; font-family: var(--font-family-base); white-space: nowrap; background: none; border: none; cursor: pointer; padding: 0; } .navbar-data-source:hover { opacity: 1; } .navbar-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-white); opacity: 1; display: flex; align-items: center; padding: var(--space-0-8); border-radius: var(--radius-sm); transition: opacity var(--motion-duration-fast) ease; } .navbar-icon-btn:hover { opacity: 1; } .navbar-dots-wrap { position: relative; flex-shrink: 0; } .navbar-dots-dropdown { position: absolute; top: calc(100% + var(--space-sm)); right: 0; background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown); min-width: var(--space-44); z-index: 2000; overflow: hidden; padding: var(--space-xs) 0; } .navbar-dots-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-body); font-family: var(--font-family-display); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--motion-duration-fast) ease; } .navbar-dots-item:hover { background: var(--color-bg-hover-light); color: var(--color-primary); } .navbar-dots-item-icon { width: var(--space-lg); height: var(--space-lg); flex-shrink: 0; color: var(--color-text-muted); } .navbar-dots-item:hover .navbar-dots-item-icon { color: var(--color-primary); } .navbar-dots-empty { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-base); } .navbar-avatar-wrap { position: relative; flex-shrink: 0; } .navbar-avatar { width: var(--space-xxl); height: var(--space-xxl); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); font-family: var(--font-family-display); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; user-select: none; border: none; padding: 0; outline-offset: 2px; } .navbar-dropdown { position: absolute; top: calc(100% + var(--space-sm)); right: 0; background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown); min-width: var(--space-52); z-index: 2000; overflow: hidden; padding: var(--space-xs) 0; } .navbar-dropdown-user { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); } .navbar-dropdown-avatar { width: var(--space-xxl); height: var(--space-xxl); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); font-family: var(--font-family-display); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .navbar-dropdown-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); font-family: var(--font-family-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar-dropdown-divider { height: var(--space-px); background: var(--color-border); margin: var(--space-xs) 0; } .navbar-dropdown-item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); background: none; border: none; cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-body); font-family: var(--font-family-display); text-align: left; transition: background var(--motion-duration-fast) ease; } .navbar-dropdown-item:hover { background: var(--color-bg-hover-light); color: var(--color-error); } .ds-modal-backdrop { position: fixed; inset: 0; background: var(--color-backdrop-overlay); z-index: 2000; display: flex; align-items: center; justify-content: center; } .ds-modal { background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow-dropdown); width: var(--space-28); max-width: 90vw; } .ds-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); } .ds-modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); font-family: var(--font-family-display); } .ds-modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-body); display: flex; align-items: center; justify-content: center; padding: var(--space-xs); border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .ds-modal-close svg { width: var(--space-lg); height: var(--space-lg); display: block; } .ds-modal-close:hover { background: var(--color-bg-hover-light); } .ds-modal-body { padding: var(--space-lg); } .ds-modal-body ul { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); } .ds-modal-body li { font-size: var(--font-size-sm); color: var(--color-text-body); font-family: var(--font-family-base); } /* ── Responsive ─────────────────────────────────────────── The toolbar is a single non-wrapping flex row (brand group + meta/actions). Below ~768px there isn't always room for the full "Last Updated: " string alongside "Data Source" and the other actions. Rather than hiding "Last Updated" outright (it's useful, user-facing information, not purely decorative), let it shrink and truncate with an ellipsis instead — it stays visible at every width, just shorter when space is tight. The full text is still available via the element's aria-label for assistive tech. min-width: 0 is what actually lets this shrink: flex items default to min-width: auto (their content size), which would otherwise stop each container in the chain — .navbar-right, then .navbar-meta, then .navbar-last-updated itself — from ever shrinking below "Last Updated: "'s full width, no matter how little room is left. It has to be set at every level of that chain, not just the innermost one: .navbar- right is .navbar-toolbar's own flex item, so if *it* doesn't shrink, .navbar-meta inside it never even gets asked to. The sibling icons/ avatar (flex-shrink: 0 already) keep their size, so the flex algorithm gives .navbar-meta exactly whatever room remains, guaranteeing no overflow at any width. */ @media (max-width: 768px) { .navbar-toolbar { padding: 0 var(--space-md) 0 var(--space-sm); } .navbar-right { min-width: 0; } .navbar-meta { min-width: 0; } .navbar-last-updated { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 480px) { .navbar-data-source { display: none; } .navbar-right { gap: var(--space-sm); } } .primary-btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); height: var(--space-xxl); /* 2rem */ padding: 0 var(--space-lg); letter-spacing: var(--letter-spacing-wider); cursor: pointer; transition: background-color var(--motion-duration-normal) ease; } .primary-btn--full { width: 100%; } .primary-btn:hover:not(:disabled) { background-color: var(--color-primary-hover); } .primary-btn:disabled { background-color: var(--color-btn-disabled-bg); color: var(--color-btn-disabled-text); cursor: not-allowed; } .input-wrapper { width: 100%; display: flex; flex-direction: column; gap: var(--space-xs); } .input-field-inner { position: relative; display: flex; align-items: center; } .input-field { width: 100%; height: var(--space-12); /* 3rem */ padding: var(--space-lg) var(--space-md) var(--space-xs); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); background-color: var(--color-input-bg); font-size: var(--font-size-base); color: var(--color-text-heading); outline: none; transition: border-color var(--motion-duration-normal) ease; } /* floating label */ .input-label { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); font-size: var(--font-size-base); color: var(--color-input-label); pointer-events: none; transition: top var(--motion-duration-fast) ease, font-size var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .input-field:focus ~ .input-label, .input-field.has-value ~ .input-label { top: calc(var(--space-px) * -8); transform: none; font-size: var(--font-size-2xs); color: var(--color-black); background: var(--color-input-bg); padding: 0 var(--space-xs); line-height: var(--line-height-none); z-index: 1; margin-left: calc(var(--space-xs) * -1); } .input-field:focus { border-color: var(--color-input-border-focus); } /* error state */ .input-wrapper--error .input-field { border-color: var(--color-error); } .input-wrapper--error .input-label { color: var(--color-error); } .input-helper { font-size: var(--font-size-sm); color: var(--color-error); padding-left: var(--space-md); } /* password toggle */ .visibility-btn { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--space-xs); color: var(--color-visibility-icon); display: flex; align-items: center; } .visibility-btn svg { width: var(--space-lg); /* 1.5rem — close to original 1.1rem icon size */ height: var(--space-lg); } /* autofill override — also fires animationstart so JS can detect the fill */ @keyframes onAutofillStart { from { } } .input-field:-webkit-autofill, .input-field:-webkit-autofill:hover, .input-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text-heading); box-shadow: 0 0 0 62.5rem var(--color-input-bg) inset; transition: background-color 5000s ease-in-out 0s; animation-name: onAutofillStart; animation-duration: 1ms; } /* float the label when the browser has autofilled the field */ .input-field:-webkit-autofill ~ .input-label { top: calc(var(--space-px) * -6); transform: none; font-size: var(--font-size-2xs); color: var(--color-black); background: var(--color-input-bg); padding: 0 var(--space-xs); line-height: var(--line-height-none); z-index: 1; margin-left: calc(var(--space-xs) * -1); } .speed-lines { display: block; overflow: visible; /* streaks + smoke fly past the viewBox edges */ } /* Colours (var() isn't valid in SVG presentation attributes). */ .sl-grad-start { stop-color: var(--color-logo-bar-start); } .sl-grad-end { stop-color: var(--color-logo-bar-end); } .sl-track rect { fill: var(--color-logo-bar-start); opacity: 0.14; } .sl-smoke { fill: var(--color-loader-smoke); } /* ── Speed streaks: grow from the left, hold, whoosh off right + fade ──── */ .sl-bar { transform-box: fill-box; transform-origin: left center; filter: drop-shadow(0 0 1.5px var(--color-logo-bar-start)); will-change: transform, opacity; animation: sl-streak 0.9s cubic-bezier(0.4, 0, 0.15, 1) infinite; } .sl-bar--1 { animation-delay: 0s; } .sl-bar--2 { animation-delay: 0.13s; } .sl-bar--3 { animation-delay: 0.26s; } @keyframes sl-streak { 0% { transform: translateX(0) scaleX(0.05); opacity: 0; } 22% { transform: translateX(0) scaleX(1); opacity: 1; } 48% { transform: translateX(0) scaleX(1); opacity: 1; } 100% { transform: translateX(18px) scaleX(0.12); opacity: 0; } } /* ── Exhaust smoke: slower, out of sync, so it lingers. ────────────────── */ .sl-smoke { transform-box: fill-box; transform-origin: center; opacity: 0; will-change: transform, opacity; animation: sl-smoke 1.7s ease-out infinite; } .sl-smoke--1 { animation-delay: 0.15s; } .sl-smoke--2 { animation-delay: 0.7s; } .sl-smoke--3 { animation-delay: 1.15s; } @keyframes sl-smoke { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 25% { opacity: 0.4; } 100% { transform: translate(-9px, -6px) scale(1.7); opacity: 0; } } /* Reduced-motion: hold the mark fully drawn, drop the smoke. */ @media (prefers-reduced-motion: reduce) { .sl-bar { animation: none; transform: none; opacity: 1; } .sl-smoke-group { display: none; } } .auth-loader-container { position: fixed; inset: 0; /* Match the login screen (tokens: --color-hero-gradient / --color-bg-cream). */ background: var(--color-hero-gradient), var(--color-bg-cream); display: flex; align-items: center; justify-content: center; z-index: 9999; } /* Wordmark + animated bars, laid out as the RAPID ROI lockup. */ .auth-loader-lockup { display: flex; align-items: center; gap: 0.9rem; } .auth-loader-word { font-family: "Manrope", var(--font-family-base); font-size: 2.5rem; /* ~40px */ font-weight: 400; letter-spacing: 0.06em; line-height: 1; color: var(--color-text-heading); white-space: nowrap; } .auth-loader-mark { width: 5rem; /* bars sized to sit beside the ~40px wordmark */ height: auto; } @media (max-width: 480px) { .auth-loader-word { font-size: 1.9rem; } .auth-loader-mark { width: 4rem; } } .toast-container { position: fixed; top: var(--space-lg); right: var(--space-lg); z-index: 10000; pointer-events: none; } .toast { border: none; border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); display: flex; /* flex-start, not center: a multi-line message (e.g. one line per saved combination) would otherwise center the icon against the whole block's height, floating it away from the title/first line. Identical to `center` for the common single-line case, so nothing else changes. */ align-items: flex-start; gap: var(--space-md); min-width: 320px; max-width: 500px; pointer-events: all; animation: toast-slide-in var(--motion-duration-normal) ease-out; } .toast--icon-centered { align-items: center; } .toast--success { background: var(--color-success, #2E7D32); } .toast--error { background: var(--color-error-msg-bg, #9C2121); } .toast--warning { background: var(--color-warning, #ED6C02); } .toast--info { background: var(--color-info, #1565C0); } @keyframes toast-slide-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .toast-icon { display: flex; align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); background: rgba(255, 255, 255, 0.2); border-radius: 50%; flex-shrink: 0; color: white; } .toast-content { flex: 1; min-width: 0; } /* Matches `.toast-message`'s color/size so the title reads as the same banner, not a differently-styled heading — bumped to semibold (instead of message's medium) is enough on its own to read as the title. Never had a rule of its own before, so it fell through to the browser's default block text (dark, and larger than the message beneath it). */ .toast-title { font-size: var(--font-size-sm); color: white; line-height: var(--line-height-normal); font-weight: var(--font-weight-semibold); } .toast-message { font-size: var(--font-size-sm); color: white; line-height: var(--line-height-normal); font-weight: var(--font-weight-medium); /* Honors literal "\n"s as line breaks (e.g. one line per saved combination) while still collapsing runs of spaces/tabs like normal text — a plain single-line message renders exactly as before. */ white-space: pre-line; display: block; } .toast-close { background: none; border: none; color: white; cursor: pointer; padding: 0; width: var(--space-5); height: var(--space-5); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background 0.15s; flex-shrink: 0; opacity: 0.8; } .toast-close:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; } .login-page { min-height: 100vh; /* Figma 1284-39670: a subtle teal→white→purple→pink gradient over the cream base (tokens: --color-hero-gradient / --color-bg-cream). */ background: var(--color-hero-gradient), var(--color-bg-cream); display: flex; flex-direction: column; position: relative; overflow: hidden; } /* session-expired notice bar — sits below the fixed navbar, above the decorative background images, with a compact centered message + button. */ .login-auth-expired-banner { position: relative; z-index: 3; margin-top: var(--space-10); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-warning-bg); border-bottom: var(--space-px) solid var(--color-warning-border); } .login-auth-expired-banner p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-body); font-family: var(--font-family-base); } /* background SVG overlay */ .login-bg-svg { position: absolute; /* inset:0 (not top + height:100%) so it fills reliably in Safari/WebKit, which resolves percentage heights against a min-height container differently than Chrome. */ inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.45; z-index: 0; } /* UlLS decorative image — left side */ .login-ulls-img { position: absolute; left: 0; top: 54%; transform: translateY(-50%); height: var(--space-70); max-width: var(--space-52); object-fit: contain; pointer-events: none; opacity: 0.5; z-index: 1; } /* main content area — vertically centered below navbar */ .login-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } /* card — matches expected width */ .login-card { width: 100%; max-width: var(--space-25); display: flex; flex-direction: column; align-items: center; padding: 0; } /* "Welcome to" */ .welcome-text { font-size: var(--font-size-5xl); color: var(--color-text-heading); font-weight: var(--font-weight-semilight); font-family: var(--font-family-base); text-align: center; margin: 0 0 var(--space-0-4); } /* "RapidROI" */ .rapid-logo { width: 100%; max-width: var(--space-25); /* fill the 400px login card */ height: auto; display: block; margin: var(--space-sm) auto; opacity: 1; } /* "Unified hub for spend optimization" */ .brand-subtitle { font-size: var(--font-size-3xl); color: var(--color-text-subtitle); text-align: center; margin: var(--space-xs) 0 var(--space-15); font-family: var(--font-family-base); } /* SSO button wrapper */ .sso-wrapper { width: 100%; margin-bottom: var(--space-5); } /* Or divider — wider than card to match expected */ .or-divider { display: flex; align-items: center; width: 115%; gap: var(--space-md); margin-bottom: var(--space-lg); } .divider-line { flex: 1; height: var(--space-px); background-color: var(--color-divider); display: block; } .or-text { color: var(--color-divider-text); font-size: var(--font-size-base); white-space: nowrap; line-height: var(--line-height-none); } /* form fields */ .login-form { width: 100%; display: flex; flex-direction: column; gap: var(--space-3-5); } /* transparent inputs on login page */ .login-form .input-field { background-color: transparent; border-color: var(--color-primary); } /* label background on login must blend with gradient — no color change */ .login-form .input-field:focus ~ .input-label, .login-form .input-field.has-value ~ .input-label, .login-form .input-field:-webkit-autofill ~ .input-label { background: var(--color-login-input-bg); color: var(--color-input-label); } .login-form .input-field:-webkit-autofill, .login-form .input-field:-webkit-autofill:hover, .login-form .input-field:-webkit-autofill:focus { box-shadow: 0 0 0 62.5rem transparent inset; -webkit-text-fill-color: var(--color-text-heading); } /* forgot password */ .forgot-password { width: 100%; display: flex; justify-content: flex-end; margin-top: var(--space-1-5); } .forgot-link { font-size: var(--font-size-sm); color: var(--color-text-link); cursor: pointer; text-decoration: none; } .forgot-link:hover { opacity: 0.75; } .error-text { font-size: var(--font-size-sm); color: var(--color-error); text-align: center; margin: calc(var(--space-0-4) * -1) 0 0; } /* ── Forgot Password button ─────────────────────────── */ .forgot-password .forgot-link { background: none; border: none; padding: 0; cursor: pointer; } /* ── Reset Password Modal ────────────────────────────── */ .fp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .fp-modal { background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-sm) var(--space-xxl) rgba(0, 0, 0, 0.2); width: min(var(--space-26), 92vw); display: flex; flex-direction: column; overflow: hidden; } .fp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); border-bottom: var(--space-px) solid var(--color-border); } .fp-modal-title { font-size: var(--font-size-lg); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin: 0; } .fp-modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-base); padding: var(--space-xs); border-radius: var(--radius-sm); line-height: 1; } .fp-modal-close:hover { color: var(--color-text-body); } .fp-modal-body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); } .fp-modal-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); border-top: var(--space-px) solid var(--color-border); } .fp-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); padding: var(--space-xs) var(--space-xl); cursor: pointer; border: var(--space-px) solid transparent; transition: opacity var(--motion-duration-fast) ease; } .fp-btn--outline { background: var(--color-white); border-color: var(--color-primary); color: var(--color-primary); } .fp-btn--outline:hover { background: var(--color-bg-card-alt); } .fp-btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .fp-btn--primary:hover { opacity: 0.88; } .fp-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } .no-access-page { display: flex; flex-direction: column; min-height: 100vh; background-color: #f0f2f5; } .no-access-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; } .no-access-card { background: #ffffff; border-radius: 12px; padding: 3rem 4rem; max-width: 600px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .no-access-icon { width: 56px; height: 56px; } .no-access-icon svg { width: 100%; height: 100%; } .no-access-message { color: #1a237e; font-size: 1rem; line-height: 1.6; text-align: center; margin: 0; } .no-access-link { color: #1a237e; font-weight: 600; text-decoration: none; } .no-access-link:hover { text-decoration: underline; } .no-access-btn { margin-top: 0.25rem; padding: 0.55rem 1.5rem; background: #1a237e; color: #ffffff; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .no-access-btn:hover { background: #283593; } .fb-wrapper { position: sticky; top: var(--space-10); /* 2.75rem — below fixed navbar */ z-index: 100; background: var(--color-bg-card); border-bottom: var(--space-px) solid var(--color-border); } /* ── Strip ──────────────────────────────────────────────── */ .fb-strip { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-1-5) var(--space-7); min-height: var(--space-10); } /* ── Filters button ─────────────────────────────────────── */ .fb-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-xs) var(--space-md); border: var(--space-px) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-card); color: var(--color-black); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; font-family: var(--font-family-display); transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .fb-btn svg path { fill: var(--color-primary); fill-opacity: 1; } .fb-filter-icon { width: var(--space-3-5); height: var(--space-3-5); object-fit: contain; } /* ── No-filters error state ──────────────────────────────── */ .fb-no-filters { padding: var(--space-4); color: var(--color-error); } /* ── Inline filter-load-error message in strip ───────────── */ .fb-unavailable-msg { font-size: var(--font-size-sm); font-style: italic; color: var(--color-text-muted); } /* ── Calendar popup (position driven by JS via CSS custom props) */ .fb-monthrange-popup { position: fixed; top: var(--fb-cal-top, 0px); left: var(--fb-cal-left, 0px); z-index: 9999; } .fb-btn--active, .fb-btn:hover { background: var(--color-grey); color: var(--color-black); } .fb-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .fb-btn--active svg path, .fb-btn:hover svg path { fill: var(--color-white); } /* ── Chips ──────────────────────────────────────────────── */ .fb-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .fb-chips--loading { opacity: 0.7; pointer-events: none; } .fb-chip { position: relative; font-size: var(--font-size-sm); color: var(--color-text-body); font-weight: var(--font-weight-regular); font-family: var(--font-family-base); cursor: pointer; border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-xs); transition: background var(--motion-duration-fast) ease; } .fb-chip:hover { background: var(--color-bg-hover-light); } .fb-chip-extra { font-weight: var(--font-weight-semibold); color: var(--color-primary); } .fb-chip-tooltip { display: none; position: absolute; top: calc(100% + var(--space-1-5)); left: 0; z-index: 300; background: #2d1b6b; color: #fff; border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); min-width: var(--space-40); flex-direction: column; gap: var(--space-xs); white-space: nowrap; box-shadow: 0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.28); pointer-events: none; } .fb-chip:hover .fb-chip-tooltip { display: flex; } .fb-chip-tooltip-item { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: #fff; } .fb-chip-value { color: var(--color-primary); font-weight: var(--font-weight-semibold); display: inline-block; max-width: var(--space-40); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .fb-chip-value--none { color: var(--color-text-muted, #94a3b8); font-weight: var(--font-weight-regular); font-style: italic; } .fb-chip-sep { font-size: var(--font-size-sm); color: var(--color-filter-pipe); padding: 0 var(--space-xs); user-select: none; } /* ── Backdrop ───────────────────────────────────────────── */ .fb-backdrop { position: fixed; inset: 0; z-index: 99; } /* ── Panel ──────────────────────────────────────────────── */ .fb-panel { --fb-panel-left-w: var(--space-31); /* 18rem — left column width */ position: absolute; top: 100%; left: var(--space-5); z-index: 200; background: var(--color-bg-card); box-shadow: 0 var(--space-sm) var(--space-xxl) var(--color-shadow-panel); width: auto; display: grid; grid-template-columns: var(--fb-panel-left-w) var(--space-22); grid-template-rows: 1fr auto; height: var(--space-22); overflow: hidden; border-top: var(--space-px) solid var(--color-border); } .fb-panel--collapsed { width: var(--fb-panel-left-w); grid-template-columns: 1fr; } /* ── Left column ────────────────────────────────────────── */ .fb-panel-left { grid-row: 1; grid-column: 1; border-right: var(--space-px) solid var(--color-border); overflow: hidden; min-height: 0; height: 100%; } .fb-panel-left-content { padding: var(--space-xs) var(--space-md); } .fb-group-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3-5) var(--space-5); background: none; border: none; cursor: pointer; font-size: var(--font-size-base); color: var(--color-primary); text-align: left; width: 100%; font-family: var(--font-family-display); border-radius: var(--radius-sm); margin-block: var(--space-xs); transition: background var(--motion-duration-fast) ease; } .fb-group-item:hover { background: var(--color-bg-hover-light); border-radius: var(--radius-sm); margin-block: var(--space-xs); font-weight: var(--font-weight-semibold); } .fb-group-item--active { background: var(--color-bg-hover-light); border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); margin-block: var(--space-xs); } .fb-group-divider { height: var(--space-px); background: var(--color-filter-border); margin: 0; } /* ── Right column ───────────────────────────────────────── */ .fb-panel-right { grid-row: 1; grid-column: 2; overflow: hidden; min-height: 0; height: 100%; } .fb-panel-right-content { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-lg) var(--space-5); } /* ── Search ─────────────────────────────────────────────── */ .fb-search-wrap { display: flex; align-items: center; gap: var(--space-sm); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-md); background: var(--color-bg-card); transition: border-color var(--motion-duration-fast) ease; max-width: var(--space-60); } .fb-search-wrap:focus-within { border-color: var(--color-primary); } .fb-search { border: none; outline: none; font-size: var(--font-size-base); color: var(--color-primary); width: 100%; background: transparent; font-family: var(--font-family-base); } /* ── Options list ───────────────────────────────────────── */ .fb-options { display: flex; flex-direction: column; gap: var(--space-lg); } .fb-options-divider { height: var(--space-px); background: var(--color-border); margin: var(--space-px) 0; } .fb-option { display: flex; align-items: center; gap: var(--space-2-5); font-size: var(--font-size-base); color: var(--color-primary); cursor: pointer; font-family: var(--font-family-display); } .fb-option:hover, .fb-option:has(input:checked) { font-weight: var(--font-weight-semibold); } .fb-option input[type="radio"], .fb-option input[type="checkbox"] { accent-color: var(--color-primary); width: var(--space-md); height: var(--space-md); cursor: pointer; flex-shrink: 0; } .fb-no-results { font-size: var(--font-size-sm); color: var(--color-text-placeholder); margin: 0; } .fb-option-highlight { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-radius: var(--space-0-5); } /* ── Date range ─────────────────────────────────────────── */ .fb-daterange { display: flex; flex-direction: column; gap: var(--space-lg); } .fb-date-field { display: flex; flex-direction: column; gap: var(--space-xs); } .fb-date-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); } .fb-date-input { border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-md); font-size: var(--font-size-base); color: var(--color-primary); background: var(--color-bg-card); outline: none; cursor: pointer; width: 100%; font-family: var(--font-family-base); transition: border-color var(--motion-duration-fast) ease; } .fb-date-input:focus { border-color: var(--color-border-strong); } .fb-date-summary { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; padding-top: var(--space-sm); border-top: var(--space-px) solid var(--color-border); } /* ── Month range trigger & popup ────────────────────────── */ .fb-monthrange-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; } .fb-monthrange-trigger { display: inline-flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1-5) var(--space-lg); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-bg-card); color: var(--color-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; font-family: var(--font-family-display); transition: background var(--motion-duration-fast) ease; } .fb-monthrange-trigger:hover { background: var(--color-bg-hover-light); } .fb-monthrange-popup { position: fixed; z-index: 9999; transform: translateX(-50%); } /* ── Footer ─────────────────────────────────────────────── */ .fb-panel-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-3-5); position: relative; } .fb-panel-footer::before, .fb-panel-footer::after { content: ""; position: absolute; top: 0; height: var(--space-px); background: var(--color-filter-border); } /* line under the left column */ .fb-panel-footer::before { left: var(--space-md); width: calc(var(--fb-panel-left-w) - (var(--space-md) * 2)); } /* line under the right column */ .fb-panel-footer::after { left: calc(var(--fb-panel-left-w) + var(--space-md)); right: var(--space-md); } .fb-reset-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); background: none; border: var(--space-px) solid transparent; border-radius: var(--radius-sm); color: var(--color-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; padding: var(--space-1-5) var(--space-md); font-family: var(--font-family-display); transition: border-color var(--motion-duration-fast) ease; } .fb-reset-btn:hover:not(:disabled) { border-color: var(--color-border); } .fb-reset-btn:disabled { color: var(--color-text-placeholder); cursor: not-allowed; opacity: 0.6; } .fb-cancel-btn { background: none; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-base); color: var(--color-primary); cursor: pointer; font-family: var(--font-family-display); transition: border-color var(--motion-duration-fast) ease; } .fb-cancel-btn:hover:not(:disabled) { border-color: var(--color-border-strong); } .fb-cancel-btn:disabled { color: var(--color-text-placeholder); cursor: not-allowed; opacity: 0.6; } .fb-apply-btn { background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-xl); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; font-family: var(--font-family-display); transition: background var(--motion-duration-fast) ease; } .fb-apply-btn:hover:not(:disabled) { background: var(--color-primary-hover); } .fb-apply-btn:disabled { background: var(--color-border); color: var(--color-text-placeholder); cursor: not-allowed; opacity: 0.6; } /* ── Options loading overlay ────────────────────────────── */ .fb-options-loading { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-md) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .fb-options-spinner { display: inline-block; width: var(--space-3-5); height: var(--space-3-5); border: var(--space-0-5) solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: fb-spin var(--motion-duration-spin-fast) linear infinite; flex-shrink: 0; } /* ── Sidebar group spinner (dependent filters updating) ─── */ .fb-group-spinner { display: inline-block; width: var(--space-md); height: var(--space-md); border: var(--space-0-5) solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: fb-spin var(--motion-duration-spin-fast) linear infinite; flex-shrink: 0; } .fb-group-item--updating, .fb-group-item--disabled { opacity: 0.55; cursor: not-allowed; } .fb-group-item--disabled:hover { background: none; font-weight: var(--font-weight-regular); } /* ── Apply button spinner ───────────────────────────────── */ .fb-apply-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); } .fb-apply-spinner { display: inline-block; width: var(--space-md); height: var(--space-md); border: var(--space-0-5) solid var(--color-overlay-white-faint); border-top-color: var(--color-white); border-radius: 50%; animation: fb-spin var(--motion-duration-spin-fast) linear infinite; flex-shrink: 0; } @keyframes fb-spin { to { transform: rotate(360deg); } } /* ── Options fade while updating ───────────────────────── */ .fb-panel-right .fb-options, .fb-panel-right .fb-search-wrap, .fb-panel-right .fb-daterange { transition: opacity var(--motion-duration-fade) ease; } .fb-panel-right:has(.fb-options-loading) .fb-options, .fb-panel-right:has(.fb-options-loading) .fb-search-wrap { opacity: 0.35; pointer-events: none; } /* ── Error chip value ────────────────────────────────────── */ .fb-chip-value--error { color: var(--color-error); font-weight: var(--font-weight-semibold); } /* ── Group item icons wrapper ────────────────────────────── */ .fb-group-item-icons { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; } /* ── Error icon in left sidebar ──────────────────────────── */ .fb-group-error-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-md); height: var(--space-md); border-radius: 50%; border: var(--space-px) solid var(--color-error); color: var(--color-error); font-size: 10px; font-weight: var(--font-weight-bold); line-height: 1; flex-shrink: 0; cursor: default; } /* ── Error banner in right panel ─────────────────────────── */ .fb-error-banner { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--space-px) solid var(--color-error); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-error) 8%, transparent); color: var(--color-error); font-size: var(--font-size-sm); line-height: 1.4; } .fb-error-banner-icon { flex-shrink: 0; width: 16px; height: 16px; } /* ── Imported icon sizes ─────────────────────────────────── */ .fb-chevron-right-icon { display: block; width: var(--space-lg); height: var(--space-lg); flex-shrink: 0; } .fb-calendar-icon { display: block; width: var(--space-3-5); height: var(--space-3-5); flex-shrink: 0; } /* ── Responsive ─────────────────────────────────────────── The filter panel's two columns (group list + options) use fixed rem widths sized for desktop and together exceed a mobile viewport. Stack them into a single scrollable column instead, capped to the viewport so the panel never pushes the page into horizontal scroll. */ @media (max-width: 768px) { .fb-panel { grid-template-columns: 1fr; /* minmax(0, 1fr) — not a fixed max-height per row — is required here: CSS Grid sizes `auto` tracks (the footer) from their own content FIRST, then splits whatever's left between `1fr` tracks. A previous version instead gave .fb-panel-left/.fb-panel-right an independent `max-height: 40vh` each (80vh combined) with `grid-template-rows: auto auto auto` — exactly matching this panel's own 80vh cap, so once either list had enough options to actually reach 40vh, there was zero room left for the footer row, which .fb-panel's own `overflow: hidden` (below) then silently clipped — the Apply/Cancel buttons weren't just hard to reach, they were never rendered on-screen at all. */ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; width: min(var(--fb-panel-left-w), 92vw); max-width: 92vw; height: auto; max-height: 80vh; } .fb-panel--collapsed { width: min(var(--fb-panel-left-w), 92vw); } .fb-panel-left { grid-row: 1; grid-column: 1; border-right: none; border-bottom: var(--space-px) solid var(--color-border); /* min-height: 0 overrides the grid-item default of min-height: auto (which otherwise refuses to shrink below content size, defeating the minmax(0, 1fr) row above) so this pane actually shrinks to its allotted share of space and scrolls internally instead. */ min-height: 0; overflow-y: auto; } .fb-panel-right { grid-row: 2; grid-column: 1; min-height: 0; overflow-y: auto; } .fb-panel-footer { grid-row: 3; grid-column: 1; } .fb-panel-footer::before, .fb-panel-footer::after { display: none; } } .fb-reset-icon { display: inline-block; width: var(--space-md); height: var(--space-md); vertical-align: middle; } .mrcp { --mrcp-width: var(--space-34); /* 20rem = 320px */ --mrcp-month-size: var(--space-15); /* 3.75rem = 60px — month circle button */ background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-5) var(--space-sm); width: var(--mrcp-width); max-width: calc(100vw - var(--space-md) * 2); /* Belt-and-suspenders for a viewport shorter than the popup itself (rare, but FilterBar's flip-above-or-below positioning can't place 100% of a too-tall popup on-screen either way): let the month grid scroll internally instead, keeping Done always reachable rather than clipped off with no way back to it — background scroll is locked while the filter panel is open, so there'd otherwise be no way to reach it. */ max-height: calc(100vh - var(--space-md) * 2); box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-popover); display: flex; flex-direction: column; gap: var(--space-sm); } /* ── Year navigation ──────────────────────────────────── */ .mrcp__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .mrcp__nav { width: var(--space-7); /* 28px */ height: var(--space-7); border: none; background: none; color: var(--color-primary); font-size: var(--font-size-3xl); /* closest token: 1.2rem ≈ nav arrow size */ line-height: var(--line-height-none); cursor: pointer; border-radius: var(--radius-input); /* 6px */ display: flex; align-items: center; justify-content: center; padding: 0; transition: background var(--motion-duration-fast); } .mrcp__nav:hover { background: var(--color-bg-hover-light); } .mrcp__year { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-5); min-width: var(--space-20); width: var(--space-20); text-align: center; font-family: var(--font-family-display); background: var(--color-bg-card); outline: none; cursor: text; } /* hide browser number spinners */ .mrcp__year::-webkit-inner-spin-button, .mrcp__year::-webkit-outer-spin-button { appearance: none; margin: 0; } .mrcp__year[type="number"] { appearance: textfield; -moz-appearance: textfield; } .mrcp__year:focus { border-color: var(--color-primary); } /* ── Month grid ───────────────────────────────────────── */ .mrcp__month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); justify-items: center; /* Shrinks and scrolls internally, rather than being clipped, once .mrcp's max-height clamp kicks in — min-height: 0 overrides the flex-item default (min-height: auto), which otherwise refuses to shrink below content size and defeats overflow-y here. */ overflow-y: auto; min-height: 0; } .mrcp__month { /* min(…, 100%) instead of a fixed size — lets the circle shrink with its grid cell when .mrcp's viewport max-width clamp kicks in on a narrow screen, instead of overflowing it. aspect-ratio keeps it circular at any resulting width. */ width: min(var(--mrcp-month-size), 100%); aspect-ratio: 1; border-radius: var(--radius-full); /* 50% circle */ border: none; background: var(--color-white); /* #e8eaf6 — lavender default */ color: var(--color-primary); font-size: var(--font-size-base); /* ~13px */ font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--motion-duration-fast), color var(--motion-duration-fast); font-family: var(--font-family-display); } .mrcp__month:hover:not(:disabled) { background: var(--color-primary); /* #c5cae9 */ color: var(--color-white); } .mrcp__month--selected { background: var(--color-primary); color: var(--color-white); } .mrcp__month--between { background: var(--color-circleblue); /* #c5cae9 */ color: var(--color-primary); } .mrcp__month--disabled { opacity: 0.35; cursor: not-allowed; } /* ── Footer ───────────────────────────────────────────── */ .mrcp__footer { display: flex; justify-content: flex-end; border-top: var(--space-px) solid var(--color-border); padding-top: var(--space-sm); } .mrcp__done { background: none; border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-input); padding: var(--space-1-5) var(--space-5); /* 6px 20px */ font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-primary); cursor: pointer; font-family: var(--font-family-display); transition: background var(--motion-duration-fast); } .mrcp__done:hover:not(:disabled) { background: var(--color-bg-hover-light); } .mrcp__done:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--color-border); color: var(--color-text-placeholder); } .csb-root { position: relative; overflow: hidden; width: 100%; height: 100%; } /* ── Inner scrollable content — native bar hidden ────────── */ .csb-content { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .csb-content::-webkit-scrollbar { display: none; } /* ── Vertical + capped (maxHeight set) — DataTable use case ─ */ /* Only applied when maxHeight prop is provided; does not affect */ /* the page-level usage. */ .csb-root--capped { height: auto; /* grow to content; inline max-height caps it */ } .csb-root--capped .csb-content { height: auto; /* max-height is set via inline style in TSX — CSS inheritance is unreliable */ overflow-x: hidden; overflow-y: auto; } /* ── Vertical track ──────────────────────────────────────── */ .csb-track--v { position: absolute; top: var(--space-xs); bottom: var(--space-xs); right: var(--space-0-8); width: var(--space-1-5); cursor: pointer; z-index: 10; /* above sticky thead (z-index: 2) */ } /* ── Horizontal track ────────────────────────────────────── */ .csb-track--h { position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-0-8); height: var(--space-1-5); cursor: pointer; } /* Track stays mounted (so trackRef is measurable on first layout) but is visually hidden + non-interactive when content doesn't overflow. */ .csb-track--hidden { opacity: 0; pointer-events: none; } /* ── Horizontal root variant ─────────────────────────────── */ .csb-root--h { overflow: hidden; /* allow thumb to sit below content */ } .csb-root--h .csb-content { overflow-x: auto; overflow-y: hidden; height: auto; max-height: none; } /* ── Thumb — pill: white fill + primary border ───────────── */ .csb-thumb { position: absolute; background: var(--color-white); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-md); cursor: grab; transition: background var(--motion-duration-fast) ease; z-index: 100; } .csb-thumb:hover, .csb-thumb:active { background: var(--color-scrollbar-thumb-hover); cursor: grabbing; } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-block { display: inline-block; background: linear-gradient( 90deg, var(--color-lightgrey, #e5e7eb) 25%, #f3f4f6 50%, var(--color-lightgrey, #e5e7eb) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm, 0.25rem); flex-shrink: 0; } /* ── Filter strip variant ───────────────────────────────── */ .skeleton-filter-strip { display: flex; align-items: center; gap: 0; } .skeleton-chip-item { display: flex; align-items: center; padding: var(--space-xs); } .skeleton-chip-sep { font-size: var(--font-size-sm); color: var(--color-divider); padding: 0 var(--space-xs); user-select: none; } /* ── Full-page error container ───────────────────────────── */ .page-error-container { display: flex; align-items: center; justify-content: center; min-height: 85vh; width: 100%; background: var(--color-lightgrey); } /* ── Inline / widget-level variant ──────────────────────── */ .page-error-container--inline { min-height: 240px; flex: 1; display: flex; align-items: center; justify-content: center; background: var(--color-lightgrey); border-radius: var(--radius-sm); } /* ── Variant that keeps the widget's title/description visible ─ The grey error background applies only to the chart area below the header, not the title/description, which sit on the card. ── */ .page-error-container--inline.page-error-container--with-header { flex-direction: column; align-items: stretch; justify-content: flex-start; background: transparent; border-radius: 0; } .page-error-body { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; background: var(--color-lightgrey); border-radius: var(--radius-sm); } .page-error-widget-header { padding: 0; } .page-error-widget-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; } .page-error-widget-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-px) 0 0; font-family: var(--font-family-base); } .page-error-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-width: var(--space-105); text-align: center; padding: var(--space-xxl) var(--space-xl); } .page-error-icon { margin-bottom: var(--space-0-4); } /* SVG color inheritance via currentColor */ .page-error-svg--error { color: var(--color-error); } .page-error-svg--primary { color: var(--color-primary); } /* ── Title ───────────────────────────────────────────────── */ .page-error-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); font-family: var(--font-family-display); margin: 0; color: var(--color-primary); } .page-error-title--red { color: var(--color-error); letter-spacing: var(--letter-spacing-wider); } /* ── Message ─────────────────────────────────────────────── */ .page-error-message { font-size: var(--font-size-lg); font-family: var(--font-family-base); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-loose); } /* ── Button ──────────────────────────────────────────────── */ .page-error-button { margin-top: var(--space-sm); padding: var(--space-2-5) var(--space-xxl); background-color: var(--color-error); color: var(--color-white); border: none; border-radius: var(--radius-input); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background-color var(--motion-duration-normal) var(--motion-easing-standard); } .page-error-button:hover { background-color: var(--color-danger); } .page-error-button:active { transform: scale(0.98); } /* ── Filter-error variant — same as full-page, no box/border ─ */ .page-error-container--filter { min-height: unset; height: 100%; background: var(--color-lightgrey); } /* ── Chart-level no-data variant ─────────────────────────── */ .page-error-container--chart { min-height: unset; flex: 1; background: var(--color-lightgrey); border-radius: var(--radius-sm); } .page-error-container--chart .page-error-content { gap: var(--space-sm); padding: var(--space-lg) var(--space-lg); } .page-error-container--chart .page-error-icon { margin-bottom: var(--space-0-4); } .page-error-container--chart .page-error-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-error); letter-spacing: var(--letter-spacing-wider); } .page-error-container--chart .page-error-message { font-size: var(--font-size-base); color: var(--color-text-muted); text-align: center; line-height: var(--line-height-loose); } .chart-loader { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--space-40); /* 10rem = 160px */ } .chart-loader-spinner { width: var(--space-10); /* 2.5rem = 40px */ height: var(--space-10); border: var(--space-0-8) solid var(--color-border); /* ~3px */ border-top-color: var(--color-primary); border-radius: 50%; animation: chart-loader-spin var(--motion-duration-spin) linear infinite; } @keyframes chart-loader-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════ HOME PAGE ══════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .home-page { --font-family-base: 'Inter', system-ui, sans-serif; --font-family-display: 'Inter', system-ui, sans-serif; /* The whole page sits on the cream base; cards/sections layer on top. */ background: var(--color-bg-cream); display: flex; flex-direction: column; padding-top: var(--space-10); height: 100vh; /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } .home-filters-loading { display: flex; align-items: center; justify-content: center; /* 100vh minus navbar (--space-10) minus filter strip (--space-10) */ height: calc(100vh - var(--space-10) - var(--space-10)); } .home-body { flex: 1; padding: var(--space-md) var(--space-5) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-md); overflow-y: auto; min-height: 0; } .home-body--hidden { display: none; } /* ══════════════════════════════════════════════════════════ HEADER CARD ══════════════════════════════════════════════════════════ */ .home-header-card { /* Same lockup as login/loading (tokens: --color-hero-gradient / --color-bg-cream). */ background: var(--color-hero-gradient), var(--color-bg-cream); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-5); display: flex; justify-content: space-between; align-items: flex-start; min-height: var(--space-30); box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-card-lg); overflow: hidden; font-family: var(--font-family-display); position: relative; } .home-header-card:focus-visible { outline: var(--space-0-5) solid var(--color-accent); outline-offset: var(--space-0-6); } .home-header-text { display: flex; flex-direction: column; z-index: 1; flex: 1; min-width: 0; } .home-hi { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-black); margin: 0; font-weight: var(--font-weight-regular); display: flex; align-items: center; } .home-username { font-weight: var(--font-weight-extrabold); color: var(--color-accent); margin-left: var(--space-0-5); } .home-welcome { font-weight: var(--font-weight-regular); font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); color: var(--color-black); margin: 0; } .home-product { font-family: "Manrope", var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-5xl); line-height: var(--line-height-snug); color: var(--color-accent); margin-top: var(--space-2-5); } .home-description { font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); color: var(--color-black); font-style: italic; margin-top: var(--space-2-5); } /* decorative image — right side, absolute */ .home-header-img-wrapper { position: absolute; right: var(--space-10); top: 0; bottom: 0; width: 25%; opacity: 0.35; display: flex; align-items: stretch; pointer-events: none; } .home-header-img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; } /* ══════════════════════════════════════════════════════════ INSIGHTS SECTION — no card wrapper ══════════════════════════════════════════════════════════ */ .home-section-insights { padding: var(--space-xs) 0 0; } /* Error state: constrained to the same height as the metric card row */ .home-insights-error { height: var(--space-9); display: flex; align-items: stretch; } .home-insights-error .page-error-container { min-height: unset; height: 100%; width: 100%; background: var(--color-lightgrey); border-radius: var(--radius-md); } .home-insights-error .page-error-content { padding: var(--space-md) var(--space-xl); gap: var(--space-sm); } .home-insights-error .page-error-icon svg { width: var(--space-xxl); height: var(--space-xxl); } .home-insights-error .page-error-title { font-size: var(--font-size-base); } .home-insights-error .page-error-message { font-size: var(--font-size-xs); } .home-insights-error .page-error-button { padding: var(--space-0-8) var(--space-lg); font-size: var(--font-size-sm); margin-top: var(--space-0-4); } /* ══════════════════════════════════════════════════════════ EXPLORE SECTION — white card wrapper ══════════════════════════════════════════════════════════ */ .home-section-explore { background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-lg) var(--space-2-5); box-shadow: 0 var(--space-xs) var(--space-5) var(--color-shadow-card-md); } /* ══════════════════════════════════════════════════════════ INSIGHTS HEADING ══════════════════════════════════════════════════════════ */ .pulse-title { font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-2xl); color: var(--color-black); text-align: center; line-height: var(--line-height-normal); border-radius: var(--radius-sm); outline: none; } .pulse-title:focus-visible { outline: var(--space-0-5) solid var(--color-accent); outline-offset: var(--space-0-6); } .pulse-highlight { color: var(--color-accent); font-weight: var(--font-weight-bold); } /* ══════════════════════════════════════════════════════════ CAROUSEL ══════════════════════════════════════════════════════════ */ .carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .carousel-track--fit { overflow-x: hidden; scroll-snap-type: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-page { min-width: 100%; flex-shrink: 0; scroll-snap-align: start; display: flex; gap: 0; } .carousel-item { flex: 0 0 calc(100% / 6); min-width: calc(100% / 6); padding: var(--space-1-5); box-sizing: border-box; } /* metric carousel item — equal flex share */ .carousel-item--metric { flex: 1 1 0; min-width: var(--space-9-375); } /* explore carousel item — fixed card width driven by JS via CSS custom prop */ .carousel-item--explore { flex: 0 0 var(--explore-card-w, var(--space-56)); min-width: var(--explore-card-w, var(--space-56)); } /* ══════════════════════════════════════════════════════════ METRIC CARD — blue tinted bg ══════════════════════════════════════════════════════════ */ .metric-card { background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-md); border: var(--space-px) solid var(--color-metric-card-border); /* Subtle shadow matching the Explore card below (was a large, offset one). */ box-shadow: 0 var(--space-xs) var(--space-2-5) var(--color-shadow-card); display: flex; flex-direction: column; justify-content: flex-start; height: 100%; min-height: var(--space-30); font-family: var(--font-family-display); overflow: hidden; } .metric-card:focus-visible { outline: var(--space-0-5) solid var(--color-accent); outline-offset: var(--space-0-6); } .metric-title { font-size: var(--font-size-sm); color: var(--color-accent); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-xs); line-height: var(--line-height-normal); } .metric-value-row { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-xs); flex-wrap: wrap; } .metric-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-accent); line-height: var(--line-height-relaxed); font-family: var(--font-family-display); } .metric-change { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: var(--space-0-8); font-family: var(--font-family-display); } /* Delta tokens, not success/error-alt — matches KpiCard's trend colours (.kpi-change--up/--down) used on every other screen. */ .trend-up { color: var(--color-delta-positive); } .trend-down { color: var(--color-delta-negative); } /* details row */ .metric-details { display: flex; align-items: stretch; padding-top: var(--space-sm); } .metric-details--single { justify-content: flex-start; } .metric-details--multi { justify-content: space-between; width: 100%; } .metric-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); font-size: var(--font-size-3xs); color: var(--color-black); font-family: var(--font-family-display); } .metric-detail--single { flex: none; align-items: flex-start; } .metric-detail--right { align-items: center; } .metric-detail-icon { color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-0-5); } .metric-detail-text { font-size: var(--font-size-3xs); font-weight: var(--font-weight-medium); text-align: center; line-height: var(--line-height-normal); } .metric-detail-value { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-black); text-align: center; } .metric-detail-divider { width: var(--space-px); background: var(--color-metric-card-border); margin: 0 var(--space-2-5); align-self: stretch; } /* ══════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════ */ .carousel-pagination { display: flex; justify-content: center; margin-top: var(--space-md); } .carousel-pagination-track { display: flex; align-items: center; gap: var(--space-1-5); } .dot { display: inline-block; width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--color-grey); border: var(--space-px) solid var(--color-grey); cursor: pointer; transition: all var(--motion-duration-slow) ease; flex-shrink: 0; padding: 0; appearance: none; } .dot:focus-visible { outline: 0.125rem solid var(--color-accent); outline-offset: 0.1875rem; } .dot--active { background: var(--color-pagination-dot-active); width: var(--space-5); border-radius: var(--space-md); border-color: var(--color-pagination-dot-active); } /* ══════════════════════════════════════════════════════════ EXPLORE SECTION ══════════════════════════════════════════════════════════ */ /* each explore card is its own snap target */ .explore-snap-item { scroll-snap-align: start; } .explore-title { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); color: var(--color-text-black); margin: 0 0 var(--space-sm); } .explore-card { flex: 1; background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-sm); border: var(--space-px) solid var(--color-explore-card-border); box-shadow: 0 var(--space-xs) var(--space-2-5) var(--color-shadow-card); display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 0; font-family: var(--font-family-display); } .explore-card-top { flex: 1; } .explore-card-header { display: flex; justify-content: space-between; align-items: flex-start; } .explore-more-btn { background: none; border: none; cursor: pointer; color: var(--color-text-placeholder); font-size: var(--font-size-xl); line-height: var(--line-height-none); padding: 0; } .explore-card-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--color-accent); margin: 0 0 var(--space-xs); line-height: var(--line-height-normal); } .explore-card-desc { font-size: var(--font-size-2xs); color: var(--color-black); line-height: var(--line-height-relaxed); margin: var(--space-xs) 0 var(--space-md); } .explore-go-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; font-family: 'Inter', system-ui, sans-serif; transition: background var(--motion-duration-normal) ease; letter-spacing: var(--space-px); } .explore-go-btn:hover { background: var(--color-accent-hover); } /* ── No custom scrollbar on home page ────────────────────── */ .home-page, .home-page * { scrollbar-width: none; } .home-page::-webkit-scrollbar, .home-page *::-webkit-scrollbar { display: none; } /* ── Responsive ─────────────────────────────────────────── .home-header-img is a wide (512×230) pattern. The base rule keeps it on the side (like the 100%-width desktop layout) but pins its box to top: 0; bottom: 0 — full card height, width a fixed 25% of the (now narrowing) card. As the card narrows, that box gets taller and narrower relative to the image's own shape, so object-fit: cover has to crop most of the pattern away to fill it. Keep the image on the side at every width (never stack it below the text) — just stop pinning the box to the card's full height and instead size the box itself down via aspect-ratio, using a height that scales with the viewport, so the box stays the image's own shape (no crop) and visibly shrinks as the window narrows, exactly like scaling down a smaller version of the 100% view. */ @media (max-width: 640px) { .home-header-card { /* .home-header-card has overflow: hidden, which per the flexbox spec gives it an automatic minimum main-size of 0 as a flex item of .home-body (min-height: var(--space-30) still applies as an explicit floor, but that's shorter than the card's actual content) — so on a short browser window, .home-body's flex layout can shrink the card below its content height, and the card's own overflow: hidden then clips that content. This is a latent issue at every width (also reproducible at desktop with a short enough window), but only addressed here to stay within the mobile-only scope of this fix. flex-shrink: 0 keeps the card at its full content height, so any shortfall in vertical space is handled by .home-body's overflow-y: auto scrolling the page, not by cropping the card. */ flex-shrink: 0; } .home-header-img-wrapper { position: static; align-self: center; width: auto; height: clamp(3rem, 16vw, 5.5rem); aspect-ratio: 512 / 230; } .home-header-img { object-position: center; } } /* ── Font overrides within home page ─────────────────────── */ /* Navbar → Inter (reset Poppins override so Last Updated / Data Source use Inter) */ .home-page .navbar { --font-family-base: 'Inter', system-ui, sans-serif; --font-family-display: 'Inter', system-ui, sans-serif; } /* FilterBar → Inter (override Poppins CSS vars so all var() references inside resolve correctly) */ .home-page .fb-wrapper { --font-family-base: 'Inter', system-ui, sans-serif; --font-family-display: 'Inter', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif; /* Every other page cancels FilterBar's default `position: sticky; top: var(--space-10)` the same way — Home was the one page missing it. That default sticky top-offset is computed relative to the nearest ancestor that establishes a scroll container, which includes `overflow: hidden` (added to .home-page above to fix the FilterBar panel's page-level-scrollbar bug) — not just `overflow: auto/scroll`. Before that fix .home-page had `overflow: visible` (no scroll container), so the sticky offset was measured from the real viewport and FilterBar landed right under the fixed Navbar by coincidence; once .home-page became a scroll container, the same `top` offset started being measured from .home-page's own box instead, pushing the bar down by roughly another navbar-height. Matching every other page's override removes the dependency on which ancestor happens to be a scroll container entirely. */ position: relative; top: 0; } /* Insights KPI detail text + value below icon → Inter */ .metric-detail-text, .metric-detail-value { font-family: 'Inter', system-ui, sans-serif; } /* Explore card title ("Performance Overview") → Inter */ .explore-card-title { font-family: 'Inter', system-ui, sans-serif; } /* Explore card description → Inter */ .explore-card-desc { font-family: 'Inter', system-ui, sans-serif; } :root { --app-tabs-h: calc(var(--space-xxl) + var(--space-0-5)); /* Height of the whole fixed chrome above a page: the fixed Navbar (whose height is also this wrapper's own sticky offset, --space-10) + these tabs. Published here, next to the numbers it is made of, so page-level sticky bars can park directly beneath the tabs without re-deriving the arithmetic. --app-tabs-h is a border-box min-height, so the hairline border is already inside it — adding it again left a sub-pixel GAP between the tabs and the bar below, and scrolling content flickered through that seam. The extra --space-px SUBTRACTED here biases the other way on purpose: a bar parked here tucks ~1px under the (opaque) tabs instead, which no rounding can turn back into a gap. */ --app-header-stack-h: calc(var(--space-10) + var(--app-tabs-h) - var(--space-px)); } .app-tabs-wrapper { background: var(--color-lightgrey); border-bottom: var(--space-px) solid var(--color-border); position: sticky; top: var(--space-10); z-index: 101; min-height: var(--app-tabs-h); display: flex; align-items: stretch; } .app-tabs { flex: 1; min-width: 0; display: flex; padding: 0 var(--space-lg); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .app-tabs::-webkit-scrollbar { display: none; } .app-tab { scroll-snap-align: start; padding: var(--space-2-5) var(--space-md); background: none; border: none; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-body); cursor: pointer; white-space: nowrap; font-family: var(--font-family-display); transition: color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease; } .app-tab:hover { color: var(--color-primary); } .app-tab--active { color: var(--color-primary); border-bottom-color: transparent; font-weight: var(--font-weight-semibold); position: relative; } .app-tab--active::after { content: ""; position: absolute; inset: var(--space-xs) var(--space-xs); background: var(--color-lightblue); border-radius: 0; z-index: -1; } /* ── Scroll arrows ───────────────────────────────────────── */ .app-tabs-arrow { flex-shrink: 0; width: var(--space-7); border: none; background: var(--color-lightgrey); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .app-tabs-arrow-icon { width: var(--space-3-5); height: var(--space-3-5); display: block; flex-shrink: 0; } .app-tabs-arrow-icon--left { transform: rotate(180deg); } /* Dropdown wrapper */ .app-tab-dropdown-wrapper { position: relative; } .app-tab--has-chevron { display: inline-flex; align-items: center; gap: var(--space-xs); } .app-tab-chevron { display: inline-flex; align-items: center; transition: transform var(--motion-duration-fast) ease; } .app-tab-chevron--open { transform: rotate(180deg); } .app-tab-chevron-icon { display: block; width: var(--space-2-5); height: var(--space-2-5); flex-shrink: 0; } /* Dropdown menu — top/left/minWidth set as direct inline styles in AppTabs.tsx */ .app-tab-dropdown { position: fixed; background: var(--color-bg-card); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-dropdown); z-index: 1100; max-height: 50vh; overflow-x: hidden; overflow-y: auto; padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); } .app-tab-dropdown::-webkit-scrollbar { width: 4px; } .app-tab-dropdown::-webkit-scrollbar-track { background: transparent; } .app-tab-dropdown::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } .app-tab-dropdown::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } .app-tab-dropdown { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .app-tab-dropdown-item { position: relative; display: block; width: 100%; padding: var(--space-sm) var(--space-xs) var(--space-sm) calc(var(--space-xs) + 4px); background: none; border: none; border-left: 1.5px solid var(--color-kpigrey); text-align: left; font-size: var(--font-size-xs); font-family: var(--font-family-display); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .app-tab-dropdown-item:hover { background: var(--color-bg-hover-light); color: var(--color-primary); } .app-tab-dropdown-item--active { color: var(--color-primary); font-weight: var(--font-weight-semibold); background: var(--color-bg-hover-light); border-left-color: var(--color-primary); } .ib-btn { background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-placeholder); display: flex; align-items: center; flex-shrink: 0; line-height: var(--line-height-none); transition: color var(--motion-duration-fast) ease; } .ib-btn:hover { color: var(--color-primary); } .ib-icon { display: block; width: var(--space-3-5); /* 0.875rem = 14px */ height: var(--space-3-5); flex-shrink: 0; } /* Rendered via React portal at document.body */ .ib-tooltip { position: fixed; display: block; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); z-index: 9999; pointer-events: none; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); max-width: var(--space-31); /* 18rem = 288px */ white-space: normal; /* A long unbroken value (a campaign name, a joined scope string) has to break rather than push the chip past its own max-width and back out of the viewport — this shape is now shared by every hover tooltip in the app via `HoverTooltip`, not just the short explanatory copy InfoButton was written for. */ overflow-wrap: anywhere; text-align: left; line-height: 1.5; font-family: var(--font-family-base); font-weight: var(--font-weight-regular); } /* Upward-pointing triangle above the tooltip */ .ib-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); /* -0.375rem */ left: var(--space-2-5); /* 0.625rem */ border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } /* When tooltip is right-aligned, flip the triangle to the right */ .ib-tooltip--right::before { left: auto; right: var(--space-2-5); } /* When tooltip is centered on the button, triangle tracks the button center */ .ib-tooltip--centered::before { left: var(--ib-triangle-left, 50%); transform: translateX(-50%); } /* Anchored ABOVE the trigger (`placement="top"`): the triangle moves to the bottom edge and points down. Only the vertical half flips — the left/right/centred rules above still position it horizontally. */ .ib-tooltip--top::before { top: auto; bottom: calc(-1 * var(--space-1-5)); border-bottom: none; border-top: var(--space-1-5) solid var(--color-tooltip-bg); } /* `placement="top"`'s SIDE-FLYOUT fallback (see `InfoButton.tsx`'s `calcPos`): the tooltip's own TOP edge is pinned level with the trigger's, so the triangle sits near the tooltip's top-left corner — same `space-2-5` inset the default top-left triangle uses, just rotated 90° to point left toward the trigger instead of up. */ .ib-tooltip--side::before { top: var(--space-2-5); left: calc(-1 * var(--space-1-5)); border-left: none; border-right: var(--space-1-5) solid var(--color-tooltip-bg); border-top: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid transparent; } /* Flipped to the trigger's LEFT (no room on the right) — triangle follows to the tooltip's right edge, pointing right. */ .ib-tooltip--side-flip::before { left: auto; right: calc(-1 * var(--space-1-5)); border-right: none; border-left: var(--space-1-5) solid var(--color-tooltip-bg); } .kpi-card { flex: 1; background: var(--color-lightgrey); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); border: var(--space-px) solid var(--color-border); box-shadow: 0 var(--space-0-5) var(--space-sm) var(--color-shadow-card); min-width: 0; font-family: var(--font-family-display); position: relative; z-index: 0; } /* Value/label/trend summary — kept as an accessibility sibling of the info button rather than its wrapper; see the comment in KpiCard.tsx. */ .kpi-card-summary { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); min-width: 0; height: 100%; outline: none; } .kpi-card-summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; position: relative; z-index: 10; } .kpi-card-info-btn { position: absolute; top: var(--space-md); right: var(--space-lg); } /* ── Top row ────────────────────────────────────────────── */ .kpi-card-header { display: flex; align-items: flex-start; /* Only the label lives here now — the info button is a positioned sibling of kpi-card-summary, not a flex item in this row. Reserve room roughly matching the icon's own footprint so a long, truncated label doesn't render underneath it. */ padding-right: var(--space-5); gap: var(--space-sm); min-width: 0; } .kpi-label { display: block; font-size: var(--font-size-sm); color: var(--color-kpi-title); font-weight: var(--font-weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Bottom row ─────────────────────────────────────────── */ .kpi-value-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xs); } .kpi-value { margin-top: var(--space-1-5); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-black); line-height: var(--line-height-tight); cursor: default; } .kpi-value-tooltip { position: fixed; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; z-index: 9999; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); line-height: 1.5; } .kpi-value-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); left: 50%; transform: translateX(-50%); border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } /* Tooltip sits above its anchor (KPI title) instead of below it — flip the arrow to point down at the anchor instead of up. */ .kpi-value-tooltip--above::before { top: auto; bottom: calc(-1 * var(--space-1-5)); border-bottom: none; border-top: var(--space-1-5) solid var(--color-tooltip-bg); } .kpi-change { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-px); } .kpi-change--up { color: var(--color-delta-positive); } .kpi-change--down { color: var(--color-delta-negative); } .kpi-change--neutral { color: var(--color-text-muted); } .kpi-trend-icon { display: block; width: var(--space-2-75); height: var(--space-2-75); flex-shrink: 0; } /* ── Empty / no-data state in KPI row ───────────────────── */ .kpi-card--no-data { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); color: var(--color-text-muted); } .kpi-card--no-data-label { font-size: var(--font-size-lg); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } .plotly-chart-wrapper { background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-sm); } /* ── Accessible focus ring around the chart ─────────────── */ .plotly-chart-focus { outline: none; position: relative; } .plotly-chart-focus:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ── Visually hidden data summary for screen readers ─────── */ .pc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .plotly-chart-header { display: flex; justify-content: space-between; align-items: flex-start; } .plotly-chart-titles { display: flex; flex-direction: column; gap: var(--space-px); } .plotly-chart-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; font-family: var(--font-family-display); display: flex; align-items: center; gap: var(--space-xs); } .plotly-chart-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; font-family: var(--font-family-base); } /* ⓘ info button — same style as KpiCard */ .plotly-info-btn { background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-placeholder); display: flex; align-items: center; flex-shrink: 0; line-height: 1; transition: color var(--motion-duration-fast) ease; position: relative; } .plotly-info-btn:hover { color: var(--color-primary); } /* header right side — actions + download */ .plotly-chart-header-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } .plotly-download-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: var(--space-0-8); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .plotly-download-btn:hover { color: var(--color-primary); background: var(--color-bg-hover-light); } .plotly-chart-container { width: 100%; overflow: visible; } /* Allow Plotly hover labels to extend beyond the SVG boundary so tooltips near right/top edges flip inward instead of clipping */ .plotly-chart-container svg.main-svg { overflow: visible; } /* ── Info tooltip — same style as KpiCard ───────────────── */ .plotly-info-tooltip { display: none; position: absolute; top: calc(100% + var(--space-1-5)); left: 0; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); padding: var(--space-sm) var(--space-2-5); border-radius: var(--radius-sm); z-index: 50; pointer-events: none; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); max-width: var(--space-31); white-space: normal; text-align: left; line-height: var(--line-height-relaxed); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); } .plotly-info-btn:hover .plotly-info-tooltip { display: block; } .plotly-icon { display: block; width: var(--space-3-5); height: var(--space-3-5); flex-shrink: 0; } .mt-trigger { display: inline-flex; align-items: center; cursor: help; } /* Rendered via React portal at document.body */ .mt-tooltip { position: fixed; display: block; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); z-index: 9999; pointer-events: none; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); max-width: var(--space-31); /* 18rem = 288px */ white-space: normal; text-align: left; line-height: 1.5; font-family: var(--font-family-base); font-weight: var(--font-weight-regular); } /* Upward-pointing triangle above the tooltip */ .mt-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); /* -0.375rem */ left: var(--space-2-5); /* 0.625rem */ border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } /* When tooltip is right-aligned, flip the triangle to the right */ .mt-tooltip--right::before { left: auto; right: var(--space-2-5); } /* When tooltip is centered on the trigger, triangle tracks the trigger center */ .mt-tooltip--centered::before { left: var(--mt-triangle-left, 50%); transform: translateX(-50%); } .dt-wrapper { display: flex; flex-direction: column; font-family: var(--font-family-display); min-width: 0; position: relative; } /* ── Table container ─────────────────────────────────────── */ .dt-body { border: var(--space-px) solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* ── Vertical scroll (default) ───────────────────────────── */ .dt-vscroll { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } /* ── Scroll area wrapper (relative for vertical thumb) ───── */ .dt-inner-wrap { position: relative; overflow: hidden; } /* ── Horizontal + vertical scroll inner (native bars hidden) */ .dt-inner-h { overflow-x: auto; overflow-y: auto; max-height: var(--dt-max-h, var(--space-22)); /* auto (not contain): once this table's own scroll hits its top/bottom edge, let the wheel/touch input chain through to the page scroll instead of dead-ending here. */ overscroll-behavior: auto; /* Horizontally there is no page scroll to hand off to — an overscroll there only rubber-bands the table sideways (a blank strip beside the first column) or fires the browser's swipe-back gesture. */ overscroll-behavior-x: none; scrollbar-width: none; outline: none; } .dt-inner-h::-webkit-scrollbar { display: none; } .dt-inner-h:focus-visible { outline: var(--space-0-5) solid var(--color-primary); outline-offset: calc(-1 * var(--space-0-5)); } /* ── Custom vertical track ───────────────────────────────── */ .dt-vtrack { position: absolute; top: var(--dt-vtrack-top, var(--space-xs)); bottom: var(--space-xs); right: var(--space-0-8); width: var(--space-1-5); cursor: pointer; z-index: 10; } /* Track stays mounted (so it's measurable on first layout) but is visually hidden + non-interactive when content doesn't overflow. */ .dt-vtrack--hidden { opacity: 0; pointer-events: none; } /* Reserve a gutter for the vertical thumb while it's visible so it never overlays the last column's values. */ .dt-inner-wrap--vscroll .dt-inner-h { margin-right: var(--space-2-5); } /* Paint the gutter's header-height strip to match the thead (incl. its bottom divider) so the header bar reads as one continuous band. */ .dt-inner-wrap--vscroll::before { content: ""; position: absolute; top: 0; right: 0; width: var(--space-2-5); height: var(--dt-vtrack-top, 0px); box-sizing: border-box; background: var(--color-lightgrey); border-bottom: var(--space-px) solid var(--color-border); } .dt-vthumb { position: absolute; left: 0; right: 0; height: var(--dt-vthumb-size, 0px); top: var(--dt-vthumb-offset, 0px); background: var(--color-white); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-md); cursor: grab; transition: background var(--motion-duration-fast) ease; } .dt-vthumb:hover, .dt-vthumb:active { background: var(--color-scrollbar-thumb-hover); cursor: grabbing; } /* ── Custom horizontal track ─────────────────────────────── */ .dt-htrack { position: relative; height: var(--space-2-5); cursor: pointer; margin: var(--space-xs) 0 0; } .dt-hthumb { position: absolute; height: var(--space-1-5); top: var(--space-0-8); width: var(--dt-hthumb-size, 0px); left: var(--dt-hthumb-offset, 0px); background: var(--color-white); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-md); cursor: grab; transition: background var(--motion-duration-fast) ease; z-index: 1; } .dt-hthumb:hover, .dt-hthumb:active { background: var(--color-scrollbar-thumb-hover); cursor: grabbing; } /* ── Clickable row ───────────────────────────────────────── */ .dt-row--clickable { cursor: pointer; } /* ── Table base ─────────────────────────────────────────── */ .dt-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); table-layout: auto; } /* ── Table layout variant ────────────────────────────────── */ /* Must be declared AFTER `.dt-table` above: both are single-class selectors of equal specificity, so with `.dt-table` first, `tableLayout="fixed"` silently never took effect — `.dt-table`'s own `table-layout: auto` always won the cascade regardless of source order in the component's className string. */ .dt-table--fixed { table-layout: fixed; } /* -- Header ---------------------------------------------- */ .dt-table thead tr { background: var(--color-lightgrey); } /* Sticky header: applied via stickyHeader prop */ .dt-sticky-header thead th { position: sticky; top: 0; z-index: 2; } .dt-table th { padding: var(--space-md) var(--space-lg); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; word-break: normal; background: var(--color-lightgrey); vertical-align: middle; } .dt-th-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); white-space: nowrap; } .dt-th-label { min-width: 0; white-space: nowrap; line-height: var(--line-height-normal); } /* Header labels that carry a definition tooltip: the only affordance is the help cursor (inherited from .mt-trigger) — no icon is added to the header. */ .dt-th-tip:focus-visible { outline: var(--space-0-5) solid var(--color-primary); outline-offset: var(--space-0-4); border-radius: var(--radius-sm); } .dt-th-actions { display: flex; align-items: center; gap: var(--space-0-8); flex-shrink: 0; } .dt-th-btn { background: none; border: none; cursor: pointer; padding: var(--space-0-6); display: flex; align-items: center; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .dt-th-btn:hover { background: var(--color-bg-hover-light); } /* -- Column filter dropdown ------------------------------ */ .dt-filter-wrap { position: relative; } .dt-filter-dropdown { z-index: 99; background: var(--color-white); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-popover); padding: var(--space-sm); min-width: var(--space-40); display: flex; flex-direction: column; gap: var(--space-1-5); } .dt-filter-input { border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); padding: var(--space-1-2) var(--space-sm); font-size: var(--font-size-xs); color: var(--color-primary); outline: none; width: 100%; font-family: var(--font-family-base); } .dt-filter-input:focus { border-color: var(--color-border-strong); } .dt-filter-actions { display: flex; gap: var(--space-1-5); justify-content: flex-end; } .dt-filter-clear { background: none; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-base); color: var(--color-primary); cursor: pointer; font-family: var(--font-family-display); transition: border-color var(--motion-duration-fast) ease; } .dt-filter-clear:hover { border-color: var(--color-border-strong); } .dt-filter-apply { background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-xl); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; font-family: var(--font-family-display); transition: background var(--motion-duration-fast) ease; } .dt-filter-apply:hover:not(:disabled) { background: var(--color-primary-hover); } .dt-filter-apply:disabled { background: var(--color-border); color: var(--color-text-placeholder); cursor: not-allowed; opacity: 0.6; } .dt-filter-error { margin: 0 var(--space-md) var(--space-xs); font-size: var(--font-size-xs); color: var(--color-error); text-align: right; } /* -- Body rows ------------------------------------------- */ .dt-table td { padding: var(--space-md) var(--space-lg); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: normal; word-break: break-word; overflow: visible; font-size: var(--font-size-sm); vertical-align: middle; background: var(--color-white); text-align: center; } .dt-table tbody tr:nth-child(even) td { background: var(--color-white); } .dt-table tbody tr:hover td { background: var(--color-bg-hover-light); } /* A `mergeColumns` cell spans several rows; hovering one of the rows it covers must not repaint only its top slice, so it keeps its own background. */ .dt-table tbody tr:hover td.dt-td--merged { background: var(--color-white); } .dt-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-xxl); font-size: var(--font-size-sm); } /* -- Row states ------------------------------------------ */ .dt-row-selected td { background: var(--color-rowSelectedBg) !important; } .dt-row-selected:hover td { background: var(--color-rowSelectedHoverBg) !important; } /* ── Pagination ─────────────────────────────────────────── */ .dt-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border: var(--space-px) solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-white); font-size: var(--font-size-sm); color: var(--color-table-pagination-muted); } .dt-rows-label { white-space: nowrap; } .dt-rpp-wrap { position: relative; } .dt-rpp-trigger { display: flex; align-items: center; justify-content: center; gap: var(--space-0-6); border: 1px solid var(--color-table-pagination-border); border-radius: 0.33333rem; padding: 0.22222rem 0.55556rem; background: var(--color-white); font-size: 0.69444rem; font-family: var(--font-family-base); color: var(--color-table-pagination-ink); cursor: pointer; min-width: 2.77778rem; } .dt-rpp-chevron { display: block; width: 0.55556rem; height: 0.55556rem; flex-shrink: 0; color: var(--color-table-pagination-axis); transition: transform var(--motion-duration-fast) ease; } .dt-rpp-chevron--open { transform: rotate(180deg); } .dt-rpp-dropdown { position: absolute; bottom: calc(100% + var(--space-xs)); left: 0; right: 0; background: var(--color-white); border: 1px solid var(--color-table-pagination-border); border-radius: 0.33333rem; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-popover); overflow: hidden; z-index: 10; } .dt-rpp-option { display: block; width: 100%; padding: 0.33333rem; background: none; border: none; font-size: 0.69444rem; font-family: var(--font-family-base); color: var(--color-table-pagination-ink); cursor: pointer; text-align: center; } .dt-rpp-option:hover { background: var(--color-table-pagination-hover-bg); } .dt-rpp-option--selected { background: var(--color-table-pagination-selected-bg); font-weight: 700; } .dt-page-info { white-space: nowrap; min-width: calc(var(--space-xxl) * 2); /* 2rem × 2 = 4rem */ text-align: center; } .dt-nav-btn { background: none; border: none; cursor: pointer; color: var(--color-table-pagination-ink); line-height: 1; padding: 0 0.22222rem; display: flex; align-items: center; transition: color var(--motion-duration-fast) ease; } .dt-nav-btn:disabled { color: var(--color-table-pagination-faint); cursor: not-allowed; } .dt-nav-icon { width: 0.83333rem; height: 0.83333rem; flex-shrink: 0; } .dt-nav-icon--prev { transform: rotate(90deg); } .dt-nav-icon--next { transform: rotate(-90deg); } /* -- Multi-select filter dropdown ------------------------ */ .dt-filter-multi { min-width: var(--space-56); padding: var(--space-sm) 0; overflow: hidden; } .dt-multi-list { padding-bottom: var(--space-md); } /* Prevent flex from compressing the scroll area — csb-content height must match csb-root */ .dt-filter-multi .csb-root { flex-shrink: 0; } /* Push native scrollbar outside csb-root's overflow:hidden clip — cross-browser */ .dt-filter-multi .csb-content { width: calc(100% + 20px); padding-right: 20px; box-sizing: content-box; } .dt-multi-count { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .dt-filter-multi .dt-filter-actions { padding: var(--space-sm) var(--space-sm) 0; border-top: var(--space-px) solid var(--color-border); margin-top: var(--space-1-5); } .dt-filter-multi .dt-filter-input { margin: 0 var(--space-sm) var(--space-1-5); width: calc(100% - var(--space-lg)); } .dt-highlight { background: var(--color-subtleblue); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-radius: var(--space-0-5); padding: 0 var(--space-px); } .dt-multi-option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-1-4) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-body); cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-multi-option:hover { background: var(--color-bg-hover-light); } .dt-multi-option input[type="checkbox"] { accent-color: var(--color-primary); width: var(--space-3-5); height: var(--space-3-5); flex-shrink: 0; cursor: pointer; } .dt-multi-select-all { border-bottom: var(--space-px) solid var(--color-border); margin-bottom: var(--space-xs); padding-bottom: var(--space-sm); } .dt-multi-select-all em { font-style: normal; font-weight: var(--font-weight-semibold); color: var(--color-primary); } .dt-multi-no-results { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } .dt-empty-val { color: var(--color-text-placeholder); font-style: italic; } /* Native scroll only — no custom thumb/JS wheel handling. Scoped narrowly to dropdown option lists, deliberately separate from CustomScrollbar. */ .dsl-list { overflow-y: auto; overflow-x: hidden; /* Stop wheel scroll from chaining to the page once the list hits its top/ bottom edge. Safe here specifically because this class is only ever used for a small floating option list, never a page-level or nested scroll container — so there's no ancestor scroller this could conflict with the way it did on CustomScrollbar's shared class. */ overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; } .dsl-list::-webkit-scrollbar { width: var(--space-1-5); } .dsl-list::-webkit-scrollbar-track { background: transparent; } .dsl-list::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: var(--radius-md); } .dsl-list::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); } .sd-wrap { position: relative; display: inline-flex; flex-direction: column; border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-input); width: fit-content; } .sd-label { position: absolute; top: calc(var(--space-px) * -6); left: var(--space-sm); font-size: var(--font-size-2xs); color: var(--color-text-muted); background: var(--color-white); padding: 0 var(--space-0-8); white-space: nowrap; pointer-events: none; } /* ── Trigger button ──────────────────────────────────────── */ .sd-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: transparent; border: none; cursor: pointer; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-black); min-width: var(--space-8); /* Padding must eat into the trigger's own box, not add to it — otherwise the chevron can get pushed past the wrap's right edge. */ box-sizing: border-box; text-align: left; } .sd-trigger:disabled { cursor: not-allowed; } .sd-value { flex: 1; /* Guards the chevron: a long value truncates instead of growing the trigger and shoving the fixed-size chevron box out of view. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Prompt text shown while nothing is picked — muted, so the field reads as empty rather than as holding a selected value (same token the app's inputs use for their native ::placeholder). */ .sd-value--placeholder { color: var(--color-text-placeholder); } /* Fixed-size box (not just the icon) is what actually guarantees containment — even if the icon's own intrinsic size were somehow wrong, this box clips it via overflow:hidden. */ .sd-chevron { display: flex; align-items: center; justify-content: center; width: var(--space-lg); /* 16px */ height: var(--space-lg); /* 16px */ color: var(--color-dropdown-chevron); opacity: 0.6; transition: transform var(--motion-duration-fast) ease; flex-shrink: 0; overflow: hidden; } .sd-chevron--open { transform: rotate(180deg); } /* ── Dropdown list ───────────────────────────────────────── */ /* Rendered through a portal to document.body (see useDropdownPosition) so it can't be visually clipped by an ancestor with overflow:hidden (e.g. a chart card) — position/top/bottom/left/width are all set inline per instance from the hook's fixed-viewport-coordinate calculation. */ .sd-list { background: var(--color-white); border: var(--space-px) solid var(--color-dropdown-panel-border); border-radius: var(--radius-md); /* 8px — crisp menu corner */ list-style: none; z-index: 9999; overflow: hidden; /* Soft, elevated "popover" shadow so it reads as floating above the page. */ box-shadow: 0 var(--space-sm) var(--space-xl) var(--color-shadow-popover); padding: var(--space-xs); /* 4px inset so rows nearly fill the panel */ } /* Compact, rounded menu rows (Linear/Notion-style): a ~32px row separated by hover/selected highlight, not dividers. font-family falls back to the app's base font where "Manrope" isn't loaded (self-hosted only on the optimizer pages), same pattern as --ohf-body. */ .sd-option { display: flex; align-items: center; justify-content: space-between; /* label left, selected-check right */ gap: var(--space-sm); min-height: 2rem; /* 32px */ padding: var(--space-0-6) var(--space-sm); /* ~2.4px / 8px */ border-radius: var(--radius-input); /* 6px */ font-family: "Manrope", var(--font-family-base); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); /* ~13px */ line-height: var(--line-height-snug); color: var(--color-dropdown-option-text); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .sd-option:hover { background: var(--color-dropdown-hover); } .sd-option--active { background: var(--color-dropdown-active-bg); color: var(--color-checkbox-navy); font-weight: var(--font-weight-semibold); } /* Label truncates; the trailing check is pushed to the right edge by the row's space-between. */ .sd-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Crisp trailing check marks the selected row — a real SVG glyph so it sits optically centred in the row (the old CSS border-tick needed a nudge and drifted). */ .sd-check { width: 0.83333rem; /* ~15px */ height: 0.83333rem; color: var(--color-checkbox-navy); flex-shrink: 0; } /* ── Search box (searchable lists) ──────────────────────────── Pinned above the options (outside DropdownScrollList) so it stays put while a long list scrolls beneath it. Negative side margins + compensating padding bleed the hairline full-width while keeping the field aligned with the rows, mirroring MultiSelectDropdown's select-all. */ .sd-search { display: flex; align-items: center; gap: var(--space-xs); min-height: 1.88889rem; /* ~34px — a proper, uniform field height */ padding: 0 var(--space-sm); margin-bottom: var(--space-xs); background: var(--color-dropdown-hover); border: var(--space-px) solid var(--color-dropdown-panel-border); border-radius: var(--radius-input); /* 6px */ } .sd-search-icon { width: 0.77778rem; /* ~14px */ height: 0.77778rem; color: var(--color-dropdown-chevron); flex-shrink: 0; } .sd-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: "Manrope", var(--font-family-base); font-size: var(--font-size-base); color: var(--color-dropdown-option-text); } .sd-search-input::placeholder { color: var(--color-text-muted); } .sd-no-match { padding: var(--space-sm); font-family: "Manrope", var(--font-family-base); font-size: var(--font-size-base); color: var(--color-text-muted); text-align: center; } .sd-align-end { align-self: flex-end; } .sd-chevron-icon { display: block; width: 100%; height: 100%; flex-shrink: 0; } /* Response Curve modal — kept visually identical to the Media Optimisation Results screen's `.mor-modal` (see MediaOptimisationResults.css): same centered overlay above the navbar (z-index 1000), lightgrey header bar with title + action icons, and a scrollable white body. */ .pgm-backdrop { position: fixed; inset: 0; background: var(--color-backdrop-overlay); z-index: 1000; display: flex; align-items: center; justify-content: center; } .pgm-modal { background: var(--color-white); border-radius: var(--radius-md); width: min(72rem, 92vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip); overflow: hidden; } .pgm-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); background: var(--color-lightgrey); flex-shrink: 0; } .pgm-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; } .pgm-header-actions { display: flex; align-items: center; gap: var(--space-xs); } .pgm-icon-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; padding: var(--space-0-8); } .pgm-icon-btn:hover { background: var(--color-section-icon-hover-bg); color: var(--color-primary); } .pgm-close { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border: none; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast), color var(--motion-duration-fast); padding: 0; } .pgm-close:hover { color: var(--color-primary); background: var(--color-bg-hover-light); } .pgm-close-icon { display: block; width: var(--space-4-5); height: var(--space-4-5); flex-shrink: 0; } .pgm-body { overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; } .pgm-no-data { align-items: center; justify-content: center; min-height: var(--space-50); font-size: var(--font-size-md); color: var(--color-text-secondary); } .po-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .po-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } /* AppTabs: disable sticky — page no longer window-scrolls */ .po-page .app-tabs-wrapper { position: static; } /* FilterBar override — white bg, inset black line matches po-body horizontal padding */ .po-page .fb-wrapper { position: relative; top: 0; /* cancel the sticky top offset from FilterBar.css */ background: var(--color-white); border-bottom: none; margin: 0; } /* Divider below FilterBar — inset to match body padding */ .po-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } /* Black divider line (after KPIs, after charts) */ .po-kpi-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0; } .po-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-kpiblack); font-family: var(--font-family-base); padding: 0 var(--space-md); padding-top: var(--space-sm); margin-bottom: calc(var(--space-sm) * -1); } .po-body { flex: 1; min-height: 0; } .po-body-content { padding: 0 var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); } .po-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--space-md) var(--space-md); padding-bottom: var(--space-xs); } .po-kpi-row::-webkit-scrollbar { display: none; } /* each KPI card gets a minimum width so row scrolls instead of cards shrinking */ .po-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); scroll-snap-align: start; } /* ── Charts row — grid ───────────────────────────────────── */ .po-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } /* Single visible chart takes full width, no divider */ .po-charts-row--single { grid-template-columns: 1fr; } .po-charts-row--has-divider { border-bottom: var(--space-px) solid var(--color-kpigrey); padding-bottom: var(--space-md); } .po-chart-half:first-child { border-right: var(--space-px) solid var(--color-kpigrey); } .po-charts-row--single .po-chart-half:first-child { border-right: none; } /* full-width panel (Annual Sales) */ .po-chart-full { background: var(--color-bg-card); padding: var(--space-xs) var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-xs); } .po-chart-half { background: var(--color-white); min-width: 0; overflow: hidden; display: flex; flex-direction: column; } .po-chart-half:first-child .po-chart-inner { padding-right: var(--space-md); } .po-chart-half:nth-child(2) .po-chart-inner { padding-left: var(--space-md); } /* inner wrapper — carries the padding and enforces minimum width */ .po-chart-inner { min-width: var(--space-34); padding: var(--space-md) var(--space-md) var(--space-md); display: flex; flex-direction: column; flex: 1; gap: var(--space-xs); } /* ── Chart header ─────────────────────────────────────────── */ .po-chart-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); } .po-chart-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; font-family: var(--font-family-display); display: flex; align-items: center; gap: var(--space-xs); } .po-chart-subtitle { font-size: var(--font-size-sm); color: var(--color-kpiblack); margin: var(--space-px) 0 0; font-family: var(--font-family-base); } /* ── Toggle group ─────────────────────────────────────────── */ .po-toggle-group { display: flex; border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .po-toggle { padding: var(--space-xs) var(--space-2-5); background: none; border: none; font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); cursor: pointer; transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .po-toggle--active { background: var(--color-primary); color: var(--color-white); } /* ── Chart action bar ────────────────────────────────────── */ .po-chart-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } .po-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: var(--space-0-8); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .po-icon-btn:hover { color: var(--color-primary); background: var(--color-bg-hover-light); } /* ── YoY chart year label ────────────────────────────────── */ .po-yoy-chart-wrap { display: flex; flex-direction: column; } .po-yoy-year-label { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin: 0; padding: 0 var(--space-lg) 0 var(--space-12); /* 1rem = Plotly r:16px, 3rem = Plotly l:48px */ } /* Multi-bracket container — sits below the chart, aligned to plot area */ .po-yoy-brackets { position: relative; display: flex; height: var(--space-xxl); box-sizing: border-box; } /* Each bracket item is absolutely positioned by left% + width% */ .po-yoy-bracket-item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } /* Vertical tick at the left edge of each bracket (except the first) */ .po-yoy-bracket-divider { position: absolute; left: 0; top: 0; width: var(--space-px); height: var(--space-0-6rem); background: var(--color-kpigrey); transform: translateX(-50%); } .po-yoy-year-line { width: 100%; border-top: var(--space-px) solid var(--color-kpigrey); position: relative; } .po-yoy-year-line::before, .po-yoy-year-line::after { content: ""; position: absolute; top: 0; width: var(--space-px); height: var(--space-sm); background: var(--color-kpigrey); } .po-yoy-year-line::before { left: 0; } .po-yoy-year-line::after { right: 0; } .po-yoy-year-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-body); font-family: var(--font-family-display); } /* ── Flip-to-table view ──────────────────────────────────── */ .po-flip-table-wrap { overflow-y: auto; max-height: var(--space-33); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); } .po-flip-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); font-family: var(--font-family-display); } .po-flip-table thead tr { background: var(--color-white); position: sticky; top: 0; } .po-flip-table th { padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; } .po-flip-table td { padding: var(--space-sm) var(--space-md); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); } .po-flip-table tbody tr:hover { background: var(--color-bg-hover-light); } /* ── Table pagination ────────────────────────────────────── */ .po-table-pagination { display: flex; align-items: center; gap: var(--space-sm); justify-content: flex-end; padding: var(--space-xs) 0; font-size: var(--font-size-xs); color: var(--color-text-muted); } .po-table-rows-select { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-px) var(--space-xs); font-size: var(--font-size-xs); color: var(--color-primary); background: var(--color-white); } .po-table-nav-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: var(--space-px) var(--space-xs); font-size: var(--font-size-base); display: flex; align-items: center; line-height: var(--line-height-none); } .po-table-nav-btn:disabled { color: var(--color-text-placeholder); cursor: not-allowed; } /* ── Platform Performance Analysis ───────────────────────── */ .po-full-panel { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xs) var(--space-md) var(--space-sm); } .po-full-panel-header { display: flex; justify-content: space-between; align-items: center; } /* ── Platform Performance table ──────────────────────────── */ .po-perf-table-wrap { overflow-x: auto; overflow-y: auto; max-height: var(--space-22); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); } .po-perf-table { width: 100%; border-collapse: collapse; font-family: var(--font-family-display); font-size: var(--font-size-sm); min-width: var(--space-32); } .po-perf-table thead tr { background: var(--color-white); position: sticky; top: 0; z-index: 1; } .po-perf-table th { padding: var(--space-2-5) var(--space-lg); text-align: left; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; } .po-th-inner { display: inline-flex; align-items: center; gap: var(--space-1-5); } .po-perf-table td { padding: var(--space-md) var(--space-lg); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; } .po-perf-table .td-platform { color: var(--color-accent); font-weight: var(--font-weight-medium); } .td-trend { width: var(--space-xl); text-align: center; padding: var(--space-sm) var(--space-sm); } .po-trend-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; padding: 0; transition: color var(--motion-duration-fast) ease; } .po-trend-icon-btn:hover { color: var(--color-accent); } .po-perf-table tbody tr:hover { background: var(--color-bg-hover-light); } /* ── Table footer (pagination + action buttons) ──────────── */ .po-table-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); flex-wrap: wrap; } .po-action-btns { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-xs); } .po-btn-primary { background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .po-btn-primary:hover { background: var(--color-primary-hover); } .po-btn-secondary { background: var(--color-white); color: var(--color-primary); border: var(--space-px) solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .po-btn-secondary:hover { background: var(--color-bg-hover-light); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .po-kpi-row { flex-wrap: wrap; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .po-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .po-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 1024px) { .po-charts-row { grid-template-columns: 1fr; } .po-chart-half:first-child { border-right: none; border-bottom: var(--space-px) solid var(--color-kpigrey); } .po-chart-half:first-child .po-chart-inner, .po-chart-half:nth-child(2) .po-chart-inner { padding-left: var(--space-md); padding-right: var(--space-md); } } .bp-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .bp-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } .bp-page .app-tabs-wrapper { position: static; } .bp-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .bp-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .bp-kpi-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0; } .bp-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-kpiblack); font-family: var(--font-family-base); padding: 0 var(--space-md); padding-top: var(--space-sm); margin-bottom: calc(var(--space-sm) * -1); } .bp-body { flex: 1; min-height: 0; } .bp-body-content { padding: 0 var(--space-lg) var(--space-10); display: flex; flex-direction: column; gap: var(--space-md); } .bp-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--space-md) var(--space-md); padding-bottom: var(--space-xs); } .bp-kpi-row::-webkit-scrollbar { display: none; } .bp-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); scroll-snap-align: start; } /* ── Full-width chart section ─────────────────────────────── */ .bp-chart-full { background: var(--color-white); display: flex; flex-direction: column; padding: var(--space-xs) var(--space-md) 0; gap: var(--space-xs); } /* ── Chart header ─────────────────────────────────────────── */ .bp-chart-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); } .bp-chart-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; font-family: var(--font-family-display); display: flex; align-items: center; gap: var(--space-xs); } .bp-chart-subtitle { font-size: var(--font-size-sm); color: var(--color-kpiblack); margin: var(--space-px) 0 0; font-family: var(--font-family-base); } /* ── Chart action bar ────────────────────────────────────── */ .bp-chart-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; } .bp-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: var(--space-0-8); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .bp-icon-btn:hover { color: var(--color-primary); background: var(--color-bg-hover-light); } /* ── Charts row — grid ───────────────────────────────────── */ .bp-charts-row-wrapper { display: flex; flex-direction: column; } .bp-collapse-header { display: flex; justify-content: flex-end; padding: var(--space-xs) var(--space-md); } .bp-collapse-btn { background: var(--color-white); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); width: var(--space-5); height: var(--space-5); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-primary); transition: all var(--motion-duration-fast) ease; box-shadow: 0 var(--space-0-5) var(--space-xs) rgba(0, 0, 0, 0.1); } .bp-collapse-btn:hover { background: var(--color-bg-hover-light); border-color: var(--color-primary); } .bp-charts-row { display: grid; grid-template-columns: 2.2fr 3fr; gap: 0; } .bp-chart-half { background: var(--color-white); min-width: 0; overflow: hidden; display: flex; flex-direction: column; } .bp-chart-half:first-child { border-right: var(--space-px) solid var(--color-kpigrey); } .bp-chart-half:first-child .bp-chart-inner { padding-right: var(--space-xs); } .bp-chart-half:nth-child(2) .bp-chart-inner { padding-left: var(--space-md); } .bp-chart-half:only-child { border-right: none; } .bp-chart-inner { min-width: var(--space-34); padding: var(--space-md) var(--space-md) 0; display: flex; flex-direction: column; flex: 1; gap: var(--space-xs); } /* ── Donut stats strip ──────────────────────────────────── */ .bp-donut-stats { display: flex; justify-content: center; gap: var(--space-lg); padding: var(--space-xs) 0; flex-wrap: wrap; } .bp-donut-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-0-5); } .bp-donut-stat-swatch { width: var(--space-sm); height: var(--space-sm); border-radius: var(--space-0-5); } .bp-donut-stat-label { font-size: var(--font-size-2xs); color: var(--color-text-muted); font-family: var(--font-family-base); } .bp-donut-stat-value { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-body); font-family: var(--font-family-display); } /* ── Scroll-to-top button ─────────────────────────────────── */ .bp-scroll-top { position: fixed; bottom: var(--space-5); right: var(--space-5); width: var(--space-10); height: var(--space-10); border-radius: 50%; background: var(--color-primary); color: var(--color-white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 var(--space-0-5) var(--space-md) var(--color-shadow-panel); transition: background var(--motion-duration-fast) ease; z-index: 50; font-size: var(--font-size-base); line-height: 1; } .bp-scroll-top:hover { background: var(--color-primary-hover); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .bp-kpi-row { flex-wrap: wrap; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .bp-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .bp-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 1024px) { .bp-charts-row { grid-template-columns: 1fr; } .bp-chart-half:first-child { border-right: none; border-bottom: var(--space-px) solid var(--color-kpigrey); } .bp-chart-half:first-child .bp-chart-inner, .bp-chart-half:nth-child(2) .bp-chart-inner { padding-left: var(--space-md); padding-right: var(--space-md); } } .cd-backdrop { position: fixed; inset: 0; background: var(--color-backdrop-overlay, rgba(0, 0, 0, 0.4)); display: flex; align-items: center; justify-content: center; z-index: 1000; } .cd-dialog { background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-xs) var(--space-xxl) var(--color-shadow-modal); width: min(420px, 92vw); display: flex; flex-direction: column; overflow: hidden; } .cd-header { padding: var(--space-lg) var(--space-xl) var(--space-sm); } .cd-title { font-size: var(--font-size-base); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin: 0; line-height: var(--line-height-snug); } .cd-message { padding: 0 var(--space-xl) var(--space-lg); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-relaxed); overflow-wrap: break-word; } .cd-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-xl) var(--space-md); border-top: var(--space-px) solid var(--color-border); } .cd-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); padding: 0 var(--space-md); height: var(--space-6-5); box-sizing: border-box; cursor: pointer; border: var(--space-px) solid transparent; transition: background var(--motion-duration-fast) ease, opacity var(--motion-duration-fast) ease; white-space: nowrap; line-height: var(--line-height-none); } .cd-btn--cancel { background: var(--color-white); border-color: var(--color-border); color: var(--color-text-body); } .cd-btn--cancel:hover { border-color: var(--color-text-muted); } .cd-btn--confirm { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .cd-btn--confirm:hover { opacity: 0.88; } .cd-btn--danger { background: var(--color-danger); color: var(--color-white); border-color: var(--color-danger); } .cd-btn--danger:hover { opacity: 0.88; } .cd-btn--mo-primary, .cd-btn--mo-secondary { gap: var(--space-xs); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); height: auto; font-size: var(--font-size-sm); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); } .cd-btn--mo-primary { background: var(--color-primary); color: var(--color-white); border: none; } .cd-btn--mo-primary:hover { background: var(--color-primary-hover); opacity: 1; } .cd-btn--mo-secondary { background: var(--color-white); color: var(--color-primary); border: var(--space-px) solid var(--color-border-strong); } .cd-btn--mo-secondary:hover { background: var(--color-bg-hover-light); border-color: var(--color-border-strong); } /* ─── Simulator variant ─────────────────────────────────────── */ .cd-simulator-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); } .cd-simulator-modal { background: var(--color-white); border-radius: var(--radius-md); width: 26.25rem; max-width: 95vw; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18); } .cd-simulator-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-5) var(--space-3-5); } .cd-simulator-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .cd-simulator-close { display: flex; align-items: center; justify-content: center; width: var(--space-xxl); height: var(--space-xxl); background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .cd-simulator-close:hover { background: var(--color-lightgrey); color: var(--color-text-body); } .cd-simulator-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-5) var(--space-xs); border-radius: var(--space-0-5); } .cd-simulator-body { padding: var(--space-lg) var(--space-5) var(--space-md); } .cd-simulator-text { font-size: var(--font-size-lg); color: var(--color-text-body); margin: 0; line-height: var(--line-height-relaxed); overflow-wrap: break-word; } .cd-simulator-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2-5); padding: var(--space-md) var(--space-5) var(--space-lg); } .app-toggle { position: relative; width: var(--space-1-875); height: var(--space-lg); border-radius: var(--space-sm); border: none; background: var(--color-text-placeholder); cursor: pointer; transition: background var(--motion-duration-fast) ease; padding: 0; flex-shrink: 0; } .app-toggle--on { background: var(--color-primary); } .app-toggle-thumb { position: absolute; top: var(--space-0-5); left: var(--space-0-5); width: var(--space-md); height: var(--space-md); border-radius: 50%; background: var(--color-white); transition: transform var(--motion-duration-fast) ease; box-shadow: 0 var(--space-px) var(--space-xs) var(--color-shadow-tooltip); } .app-toggle--on .app-toggle-thumb { transform: translateX(var(--space-3-5)); } .app-toggle--disabled, .app-toggle:disabled { opacity: 0.6; cursor: not-allowed; } .md-section { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; } /* ── Cards ─────────────────────────────────────────────── */ .md-cards { display: flex; flex-wrap: nowrap; gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-top: var(--space-1-5); padding-bottom: var(--space-xs); margin-bottom: var(--space-xl); } .md-cards::-webkit-scrollbar { display: none; } .md-card { background: var(--color-white); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-5); display: flex; flex-direction: column; gap: var(--space-md); cursor: pointer; transition: all var(--motion-duration-fast) ease; font-family: var(--font-family-display); text-align: left; box-shadow: 0 var(--space-0-5) var(--space-sm) var(--color-shadow-card); min-width: var(--space-60); flex: 1 0 var(--space-60); scroll-snap-align: start; } .md-card:hover { border-color: var(--color-primary); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-card-md); transform: translateY(calc(var(--space-0-5) * -1)); } .md-card--active { background: linear-gradient( 135deg, var(--color-bg-card-alt) 0%, var(--color-lightblue) 100% ); border-color: var(--color-primary); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-card-md); } /* ── Table section ─────────────────────────────────────── */ .md-table-section { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; position: relative; } .md-table-overlay { position: absolute; inset: 0; background: var(--color-overlay-white, rgba(255, 255, 255, 0.6)); display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: all; } .md-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); } .md-card-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); letter-spacing: 0.05em; } .md-card-abbr { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-medium); } .md-card-value { font-size: var(--font-size-6xl); font-weight: var(--font-weight-bold); color: var(--color-text-heading); line-height: var(--line-height-none); } /* ── Toolbar ───────────────────────────────────────────── */ .md-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 0; flex-wrap: wrap; min-height: var(--space-10); padding: var(--space-xs) var(--space-md); background: var(--color-bg-card-alt); border: var(--space-px) solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .md-search-wrap { display: flex; align-items: center; gap: var(--space-sm); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-md); background: var(--color-white); min-width: var(--space-40); max-width: var(--space-22); flex: 1; height: var(--space-1-875); box-sizing: border-box; } .md-search-icon { color: var(--color-text-placeholder); flex-shrink: 0; } .md-search { border: none; outline: none; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); background: transparent; width: 100%; } .md-search::placeholder { color: var(--color-text-placeholder); } .md-toolbar-actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; } /* ── Edit toggle wrapper ────────────────────────────────── */ .md-edit-wrap { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-xs); } .md-edit-label { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); font-weight: var(--font-weight-medium); } /* ── Buttons ───────────────────────────────────────────── */ .md-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); padding: 0 var(--space-sm); height: var(--space-6-5); box-sizing: border-box; cursor: pointer; transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease; white-space: nowrap; border: var(--space-px) solid transparent; line-height: var(--line-height-none); } /* Ghost — no border, primary text */ .md-btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary); } .md-btn--ghost:hover { opacity: 0.75; } .md-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; } /* Outlined — border + primary text */ .md-btn--outline { background: var(--color-white); border-color: var(--color-primary); color: var(--color-primary); } .md-btn--outline:hover { background: var(--color-bg-card-alt); } .md-btn--outline.md-btn--active { background: var(--color-bg-card-alt); } .md-btn--outline:disabled { opacity: 0.4; cursor: not-allowed; } .md-btn--save { background: var(--color-white); color: var(--color-text-muted); border-color: var(--color-primary); padding: var(--space-xs) var(--space-xxl); font-weight: var(--font-weight-semibold); } .md-btn--save:hover { color: var(--color-primary); } .md-btn--save:disabled { opacity: 0.45; border-color: var(--color-primary); cursor: not-allowed; } .md-btn--save-active { color: var(--color-primary); opacity: 1; } /* ── Table wrapper ─────────────────────────────────────── */ .md-table-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-x: auto; } .md-table-wrap .dt-wrapper { flex: 1; min-height: 0; } .md-table-wrap .dt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .md-table-wrap .dt-inner-wrap { flex: 1; min-height: 0; } .md-table-wrap .dt-inner-h { height: 100%; max-height: none; } /* ── Edit-mode cell inputs ─────────────────────────────── */ .md-cell-input { width: 100%; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); outline: none; background: var(--color-white); min-width: 0; height: var(--space-xxl); box-sizing: border-box; } .md-cell-input:focus { border-color: var(--color-primary); } /* ── Delete button ─────────────────────────────────────── */ .md-del-btn { background: none; border: none; cursor: pointer; color: var(--color-danger); display: flex; align-items: center; justify-content: center; padding: var(--space-0-8); border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .md-del-btn:hover { background: var(--color-danger-bg); } .md-del-btn-wrap--disabled { cursor: not-allowed; } .md-del-btn--disabled { opacity: 0.35; pointer-events: none; } .md-del-tooltip { position: fixed; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); max-width: 240px; white-space: normal; pointer-events: none; z-index: 9999; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); line-height: 1.5; } .md-del-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); right: var(--md-arrow-right, 12px); left: auto; transform: translateX(50%); border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } .md-del-tooltip--above::before { top: auto; bottom: calc(-1 * var(--space-1-5)); right: var(--md-arrow-right, 12px); left: auto; transform: translateX(50%); border-bottom: none; border-top: var(--space-1-5) solid var(--color-tooltip-bg); } .md-del-tooltip--centered { white-space: nowrap; } .md-del-tooltip--centered::before { left: 50%; right: auto; transform: translateX(-50%); } .md-del-tooltip--above.md-del-tooltip--centered::before { left: 50%; right: auto; transform: translateX(-50%); } /* ── Required field star ───────────────────────────────── */ .md-required-star { color: var(--color-danger); font-size: var(--font-size-sm); line-height: 1; margin-left: var(--space-px); font-weight: var(--font-weight-bold); } /* ── Save footer ───────────────────────────────────────── */ .md-save-footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); flex-wrap: wrap; } /* ─── Multi-select / single-select cell ─────────────────── */ .um-multisel { /* Checkbox geometry — sub-pixel values with no clean token equivalent */ --tc-chk-border: 0.09375rem; /* 1.5px border */ --tc-check-left: 0.175rem; --tc-check-top: 0.025rem; --tc-check-w: 0.3rem; position: relative; width: 100%; } .um-multisel-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; border: var(--space-px) solid var(--color-border); border-radius: var(--space-xs); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); background: var(--color-white); cursor: pointer; text-align: left; min-width: 0; height: var(--space-xxl); box-sizing: border-box; } .um-multisel-trigger:focus { outline: none; border-color: var(--color-primary); } .um-multisel-trigger--open { border-color: var(--color-primary); } .um-multisel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .um-sel-placeholder { color: var(--color-text-placeholder); } .um-multisel-dropdown { z-index: 9999; background: var(--color-cell-dropdown-bg); border: var(--space-px) solid var(--color-cell-dropdown-border); border-radius: var(--space-1-5); box-shadow: 0 var(--space-0-5) var(--space-1-5) var(--color-shadow-popover); min-width: 100%; max-height: var(--space-16); overflow-y: auto; padding: var(--space-xs) 0; } .um-multisel-option { display: flex; align-items: center; gap: var(--space-1-5); padding: var(--space-sm) var(--space-2-5); font-size: var(--font-size-sm); color: var(--color-cell-dropdown-text); cursor: pointer; white-space: nowrap; user-select: none; font-weight: var(--font-weight-regular); } .um-multisel-option:hover { background: var(--color-cell-dropdown-hover-bg); } .um-sel-option { cursor: pointer; } .um-sel-option--selected { background: var(--color-cell-dropdown-hover-bg); color: var(--color-cell-dropdown-text); font-weight: var(--font-weight-medium); } /* Custom checkbox */ .um-multisel-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: var(--space-3-5); height: var(--space-3-5); border: var(--tc-chk-border) solid var(--color-cell-checkbox-color); border-radius: var(--space-xs); background: var(--color-white); cursor: pointer; flex-shrink: 0; position: relative; transition: background var(--motion-duration-fast) ease; } .um-multisel-option input[type="checkbox"]:checked { background: var(--color-cell-checkbox-color); border-color: var(--color-cell-checkbox-color); } .um-multisel-option input[type="checkbox"]:checked::after { content: ""; position: absolute; left: var(--tc-check-left); top: var(--tc-check-top); width: var(--tc-check-w); height: var(--space-sm); border: var(--tc-chk-border) solid var(--color-white); border-top: none; border-left: none; transform: rotate(45deg); } .um-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; overflow: hidden; } /* ─── Body ──────────────────────────────────────────────── */ .um-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-12) var(--space-lg) var(--space-10); gap: 0; min-height: 0; overflow: hidden; } /* ─── Sub-tabs ──────────────────────────────────────────── */ .um-subtabs { display: flex; gap: 0; border-bottom: var(--space-px) solid var(--color-border); margin-bottom: var(--space-md); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .um-subtabs::-webkit-scrollbar { display: none; } .um-subtab { background: none; border: none; border-bottom: var(--space-0-1875) solid transparent; padding: var(--space-2-5) var(--space-xl); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; transition: color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease; white-space: nowrap; flex-shrink: 0; } .um-subtab:hover { color: var(--color-primary); } .um-subtab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); } /* ─── Toolbar ───────────────────────────────────────────── */ .um-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: 0; flex-wrap: wrap; min-height: var(--space-10); padding: var(--space-xs) var(--space-md); background: var(--color-bg-card-alt); border: var(--space-px) solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .um-search-wrap { display: flex; align-items: center; gap: var(--space-sm); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-md); background: var(--color-white); min-width: var(--space-40); max-width: var(--space-22); flex: 1; height: var(--space-1-875); box-sizing: border-box; } .um-search-icon { color: var(--color-text-placeholder); flex-shrink: 0; } .um-search { border: none; outline: none; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); background: transparent; width: 100%; } .um-search::placeholder { color: var(--color-text-placeholder); } .um-search-clear { background: none; border: none; cursor: pointer; color: var(--color-text-placeholder); font-size: var(--font-size-lg); line-height: var(--line-height-none); padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease; } .um-search-clear:hover { color: var(--color-text-body); } .um-required-star { color: var(--color-danger); font-size: var(--font-size-sm); line-height: 1; margin-left: var(--space-px); font-weight: var(--font-weight-bold); } .um-toolbar-actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; flex-wrap: wrap; } /* ─── Edit toggle wrapper ───────────────────────────────── */ .um-edit-wrap { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-xs); } .um-edit-label { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); font-weight: var(--font-weight-medium); } /* ─── Buttons ───────────────────────────────────────────── */ .um-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); padding: 0 var(--space-sm); height: var(--space-6-5); box-sizing: border-box; cursor: pointer; transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease; white-space: nowrap; border: var(--space-px) solid transparent; line-height: var(--line-height-none); } .um-btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary); } .um-btn--ghost:hover { opacity: 0.75; } .um-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; } .um-btn--outline { background: var(--color-white); border-color: var(--color-primary); color: var(--color-primary); } .um-btn--outline:hover { background: var(--color-bg-card-alt); } .um-btn--outline.um-btn--active { background: var(--color-bg-card-alt); } .um-btn--outline:disabled { opacity: 0.4; cursor: not-allowed; } .um-btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .um-btn--primary:hover { opacity: 0.88; } .um-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; } .um-btn--icon { background: transparent; border-color: transparent; color: var(--color-text-body); padding: var(--space-xs) var(--space-xs); } .um-btn--icon:hover { color: var(--color-primary); } .um-btn--save { background: var(--color-white); color: var(--color-text-muted); border-color: var(--color-primary); padding: var(--space-xs) var(--space-xxl); font-weight: var(--font-weight-semibold); } .um-btn--save:hover { border-color: var(--color-primary); color: var(--color-primary); } .um-btn--save-active { border-color: var(--color-primary); color: var(--color-primary); } .um-btn--save:disabled { opacity: 0.5; border-color: var(--color-primary); cursor: not-allowed; } /* ─── Table wrapper ─────────────────────────────────────── */ .um-table-wrap { margin-bottom: var(--space-md); } /* ─── Edit-mode cell inputs ─────────────────────────────── */ .um-cell-input { width: 100%; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); outline: none; background: var(--color-white); min-width: 0; height: var(--space-xxl); box-sizing: border-box; } .um-cell-input:focus { border-color: var(--color-primary); } /* ─── Table save overlay ────────────────────────────────── */ .um-table-wrap--relative { position: relative; } .um-table-overlay { position: absolute; inset: 0; background: var(--color-overlay-white, rgba(255, 255, 255, 0.6)); display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: all; } .um-table-spinner { display: inline-block; width: var(--space-7); height: var(--space-7); border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: um-spin 0.7s linear infinite; } @keyframes um-spin { to { transform: rotate(360deg); } } /* ─── Delete button ─────────────────────────────────────── */ .um-del-btn { background: none; border: none; cursor: pointer; color: var(--color-danger); display: flex; align-items: center; justify-content: center; padding: var(--space-0-8); border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .um-del-btn:hover { background: var(--color-danger-bg); } .um-del-tooltip { position: fixed; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); white-space: normal; pointer-events: none; z-index: 9999; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); line-height: 1.5; } .um-del-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); left: var(--um-arrow-left, 50%); transform: translateX(-50%); border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } .um-del-tooltip--above::before { top: auto; bottom: calc(-1 * var(--space-1-5)); border-bottom: none; border-top: var(--space-1-5) solid var(--color-tooltip-bg); } /* ─── Save footer ───────────────────────────────────────── */ .um-save-footer { display: flex; justify-content: flex-end; padding-top: var(--space-sm); } /* ─── Placeholder tab ───────────────────────────────────── */ .um-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--font-size-sm); font-family: var(--font-family-base); padding: var(--space-4) 0; } .um-placeholder span { font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-right: var(--space-1-5); } /* ─── Access denied ─────────────────────────────────────── */ .um-access-denied { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-4) var(--space-xxl); text-align: center; } .um-access-denied-icon { opacity: 0.5; flex-shrink: 0; } .um-access-denied-title { font-size: var(--font-size-xl); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin: 0; } .um-access-denied-desc { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); margin: 0; max-width: var(--space-28); line-height: var(--line-height-relaxed); } .um-access-denied-back { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-primary); background: none; border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-md); cursor: pointer; text-decoration: none; transition: background var(--motion-duration-fast) ease; margin-top: var(--space-xs); } .um-access-denied-back:hover { background: var(--color-bg-card-alt); } /* ─── Capabilities badge (Users tab) ────────────────────── */ .um-cap-badge { display: inline-flex; align-items: center; padding: var(--space-0-5) var(--space-sm); background: var(--color-bg-hover-light); border: var(--space-px) solid var(--color-chip-view-border); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--color-chip-view-text); font-weight: var(--font-weight-medium); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ BULK UPLOAD MODAL ═══════════════════════════════════════════════════════════ */ .bum-backdrop { position: fixed; inset: 0; background: var(--color-backdrop-overlay); display: flex; align-items: center; justify-content: center; z-index: 1000; } .bum-modal { background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 var(--space-0-5) var(--space-xxl) var(--color-shadow-modal); width: min(var(--space-48), 92vw); display: flex; flex-direction: column; overflow: hidden; } .bum-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); border-bottom: var(--space-px) solid var(--color-border); flex-shrink: 0; } .bum-title { font-size: var(--font-size-lg); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); } .bum-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; padding: var(--space-xs); border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease; } .bum-close:hover { color: var(--color-text-body); } .bum-close-icon, .bum-download-icon { display: block; width: var(--space-lg); height: var(--space-lg); flex-shrink: 0; } .bum-body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); } .bum-template-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-lg); text-decoration: none; transition: opacity var(--motion-duration-fast) ease; width: 100%; box-sizing: border-box; } .bum-template-btn:hover { opacity: 0.88; } .bum-dropzone { border: var(--space-0-5) dashed var(--color-border); border-radius: var(--radius-md); min-height: var(--space-16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); cursor: pointer; transition: border-color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; padding: var(--space-xl); text-align: center; box-sizing: border-box; position: relative; } .bum-dropzone:hover, .bum-dropzone--drag { border-color: var(--color-primary); background: var(--color-lightblue); } .bum-dropzone--has-file { border-color: var(--color-primary); } .bum-file-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; display: none; } .bum-dropzone-icon { color: var(--color-primary); opacity: 0.7; } .bum-dropzone-text { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .bum-dropzone-link { color: var(--color-primary); text-decoration: underline; cursor: pointer; } .bum-dropzone-hint { font-size: var(--font-size-xs); color: var(--color-text-placeholder); } .bum-results { display: flex; flex-direction: column; gap: var(--space-md); min-height: var(--space-6-0); } .bum-results-summary { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .bum-pill { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); } .bum-pill--ok { background: var(--color-success-bg); color: var(--color-success); } .bum-pill--fail { background: var(--color-danger-bg); color: var(--color-danger); } .bum-error-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); max-height: var(--space-12-0); overflow-y: auto; } .bum-error-item { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); padding: var(--space-xs) var(--space-sm); background: var(--color-danger-bg); border-radius: var(--radius-sm); } .bum-error-row { color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap; } .bum-error-email { font-weight: var(--font-weight-medium); color: var(--color-text-body); flex-shrink: 0; } .bum-error-msg { color: var(--color-danger); font-size: var(--font-size-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bum-error-group { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .bum-error-group:last-child { border-bottom: none; } .bum-error-group-hd { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } .bum-error-group-count { font-size: var(--font-size-xs); color: var(--color-text-muted); flex-shrink: 0; } .bum-error-sublist { list-style: none; padding: 0 0 0 var(--space-md); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .bum-file-error { margin: 0; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-danger); text-align: center; } .bum-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); border-top: var(--space-px) solid var(--color-border); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ USER ROLE TAB ═══════════════════════════════════════════════════════════ */ .ur-saving-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-overlay-white, rgba(255, 255, 255, 0.6)); pointer-events: all; z-index: 10; } .ur-layout { display: flex; flex: 1; position: relative; gap: 0; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; min-width: 0; min-height: 0; } .ur-sidebar { width: clamp(var(--space-9), 18%, var(--space-56)); flex-shrink: 0; display: flex; flex-direction: column; border-right: var(--space-px) solid var(--color-border); background: var(--color-lightgrey); min-width: 0; overflow: visible; } .ur-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); flex-shrink: 0; min-width: 0; overflow: hidden; } .ur-sidebar-title { font-size: var(--font-size-base); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ur-new-btn { font-size: var(--font-size-sm) !important; padding: 0 var(--space-sm) !important; height: var(--space-7) !important; flex-shrink: 0; } .ur-sidebar-search { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); color: var(--color-text-placeholder); flex-shrink: 0; height: var(--space-2-25); min-width: 0; overflow: hidden; } .ur-sidebar-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ur-sidebar-search-input::placeholder { color: var(--color-text-placeholder); } .ur-role-scroll { flex: 1; min-height: 0; } .ur-role-list { list-style: none; padding: var(--space-xs) 0; } .ur-role-empty { text-align: center; padding: var(--space-xl) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); } .ur-role-list-item { display: flex; align-items: stretch; position: relative; } .ur-role-del-btn { flex-shrink: 0; align-self: center; background: none; border: none; cursor: pointer; color: var(--color-danger); display: flex; align-items: center; justify-content: center; padding: var(--space-xs); margin-right: var(--space-sm); border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .ur-role-del-btn:hover { background: var(--color-danger-bg); } .ur-role-del-btn:disabled { opacity: 0.3; pointer-events: none; } .ur-role-del-wrap { display: inline-flex; align-items: center; flex-shrink: 0; align-self: center; } .ur-role-del-wrap--disabled { cursor: not-allowed; } .ur-role-list-item .ur-role-item { flex: 1; min-width: 0; } .ur-role-item { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: var(--space-sm) var(--space-lg); background: none; border: none; cursor: pointer; min-width: 0; overflow: hidden; text-align: left; transition: background var(--motion-duration-fast) ease; gap: var(--space-sm); } .ur-role-item:hover { background: var(--color-bg-hover-light); } .ur-role-item--active { background: var(--color-lightblue); } .ur-role-item--active:hover { background: var(--color-lightblue); } .ur-role-item-main { flex: 1; min-width: 0; overflow: hidden; } .ur-role-item-name { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-base); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur-role-item-desc { margin-top: var(--space-px); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-normal); } .ur-role-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-px); flex-shrink: 0; min-width: var(--space-4); } .ur-role-item-caps, .ur-role-item-users { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); white-space: nowrap; } .ur-tag-system { font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wider); color: var(--color-white); background: var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-px) var(--space-xs); flex-shrink: 0; } .ur-dot-dirty { display: inline-block; width: var(--space-0-45); height: var(--space-0-45); border-radius: var(--radius-full); background: var(--color-error); flex-shrink: 0; } /* ── Editor ──────────────────────────────────────────────── */ .ur-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-white); } .ur-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); border-bottom: var(--space-px) solid var(--color-border); flex-shrink: 0; background: var(--color-bg-card-alt); overflow: hidden; min-width: 0; } .ur-editor-head-left { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-width: 0; overflow: hidden; } .ur-editor-eyebrow { font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow); } .ur-editor-name { font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl)); font-family: var(--font-family-display); font-weight: var(--font-weight-bold); color: var(--color-primary); border: none; outline: none; background: transparent; width: 100%; padding: 0; line-height: var(--line-height-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur-editor-name:disabled { cursor: default; opacity: 0.85; } .ur-editor-name:not(:disabled):focus { border-bottom: var(--space-0-5) solid var(--color-primary); } .ur-editor-desc { font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-text-muted); border: none; outline: none; background: transparent; width: 100%; padding: 0; line-height: var(--line-height-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur-editor-desc:focus { border-bottom: var(--space-px) solid var(--color-input-border); } .ur-editor-desc::placeholder { color: var(--color-text-placeholder); } .ur-editor-stats { display: flex; gap: var(--space-lg); flex-shrink: 0; align-items: center; overflow: hidden; } .ur-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); min-width: var(--space-3-5rem); } .ur-stat-num { font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl)); font-family: var(--font-family-display); font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: var(--line-height-none); } .ur-stat-num--dirty { color: var(--color-error); } .ur-stat-lbl { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); white-space: nowrap; text-align: center; } .ur-cap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-xl); border-bottom: var(--space-px) solid var(--color-border); flex-shrink: 0; min-height: var(--space-11); flex-wrap: wrap; } .ur-cap-search { display: flex; align-items: center; gap: var(--space-xs); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-white); max-width: var(--space-24); flex: 1; color: var(--color-text-placeholder); height: var(--space-2); } .ur-cap-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); min-width: 0; } .ur-cap-search-input::placeholder { color: var(--color-text-placeholder); } .ur-cap-search-clear { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-xl); line-height: var(--line-height-none); padding: 0; flex-shrink: 0; } .ur-cap-toolbar-right { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; } .ur-link-btn { background: none; border: none; cursor: pointer; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-primary); text-decoration: underline; padding: 0; } .ur-link-btn:hover { opacity: 0.75; } .ur-dot-sep { color: var(--color-text-placeholder); font-size: var(--font-size-base); user-select: none; } .ur-cap-list { flex: 1; overflow-y: auto; min-height: 0; max-height: none; overscroll-behavior: contain; background: var(--color-lightgrey); scrollbar-width: none; } .ur-cap-list::-webkit-scrollbar { display: none; } .ur-cap-empty { text-align: center; padding: var(--space-xxl); font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-text-muted); } .ur-feature { border-bottom: var(--space-px) solid var(--color-border); background: var(--color-white); } .ur-feature-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); cursor: pointer; background: var(--color-white); transition: background var(--motion-duration-fast) ease; min-height: var(--space-11); min-width: 0; overflow: hidden; position: relative; } .ur-feature-head:hover { background: var(--color-bg-hover-light); } .ur-feature-disclose { background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-sm); flex-shrink: 0; transition: transform var(--motion-duration-fast) ease; } .ur-feature--open .ur-feature-disclose svg { transform: rotate(0deg); } .ur-feature:not(.ur-feature--open) .ur-feature-disclose svg { transform: rotate(-90deg); } .ur-feature-info { flex: 1; min-width: 0; overflow: hidden; } .ur-feature-title { font-size: var(--font-size-sm); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin: 0; line-height: var(--line-height-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ur-feature-desc { font-size: var(--font-size-xs); font-family: var(--font-family-base); color: var(--color-text-muted); margin: var(--space-px) 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-normal); } .ur-feature-meta { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; overflow: hidden; } .ur-screen-status { font-size: var(--font-size-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.4; } .ur-screen-status--on { background: #e6f4ea; color: #1e7e34; } .ur-screen-status--off { background: #f1f1f3; color: #8a8a93; } .ur-feature-count { font-size: var(--font-size-xs); font-family: var(--font-family-base); color: var(--color-text-body); font-weight: var(--font-weight-medium); white-space: nowrap; } .ur-feature-count-total { color: var(--color-text-muted); font-weight: var(--font-weight-regular); } .ur-badge-dirty { font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); background: var(--color-warning-bg-tint); color: var(--color-error); border-radius: var(--radius-sm); padding: var(--space-px) var(--space-xs); white-space: nowrap; } .ur-bulk-btn { background: var(--color-white); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; transition: border-color var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .ur-bulk-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .ur-bulk-btn--on { border-color: var(--color-danger); color: var(--color-danger); } .ur-bulk-btn--mixed { border-color: var(--color-primary); color: var(--color-primary); } .ur-feature-body { background: var(--color-white); padding: var(--space-xs) 0 var(--space-md); } .ur-subrow { display: block; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-10); min-height: 0; overflow: visible; } .ur-subrow + .ur-subrow { border-top: none; margin-top: var(--space-sm); } .ur-subrow-name { display: flex; align-items: center; gap: var(--space-xs); width: clamp(var(--space-6-0), 20%, var(--space-11-0)); flex-shrink: 0; min-width: 0; overflow: hidden; } .ur-subrow-tri { display: none; } .ur-subrow-label { font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-normal); min-width: 0; } .ur-subrow-count { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-placeholder); white-space: nowrap; flex-shrink: 0; } .ur-subrow-actions { display: flex; align-items: flex-start; gap: var(--space-sm); flex-wrap: wrap; flex: 1; min-width: 0; overflow: hidden; } .ur-cap-tree { display: block; width: 100%; min-width: 0; } .ur-cap-node-row { display: grid; grid-template-columns: minmax(var(--space-12-0), 1fr) auto; align-items: center; gap: var(--space-lg); min-height: var(--space-2-35); min-width: 0; position: relative; } .ur-cap-node-main, .ur-cap-node-actions { display: flex; align-items: center; min-width: 0; } .ur-cap-node-main { gap: var(--space-sm); } .ur-cap-node-actions { gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; } .ur-cap-node-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); padding: 0; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; } .ur-cap-node-toggle:disabled { cursor: default; opacity: 0; } .ur-cap-node-chevron { display: block; width: var(--space-2-5); height: var(--space-2-5); transform: rotate(0deg); transition: transform var(--motion-duration-fast) ease; } .ur-cap-tree--closed > .ur-cap-node-row .ur-cap-node-chevron { transform: rotate(-90deg); } .ur-cap-node-label { font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); color: var(--color-text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ur-cap-node-row--child .ur-cap-node-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .ur-cap-node-count { border-radius: var(--radius-full); background: var(--color-bg-card-alt); color: var(--color-text-muted); font-family: var(--font-family-base); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-none); padding: var(--space-px) var(--space-xs); white-space: nowrap; } .ur-cap-tree-children { margin-left: var(--space-sm); padding-left: var(--space-2-25); padding-top: var(--space-sm); position: relative; transition: opacity var(--motion-duration-fast) ease, max-height var(--motion-duration-fast) ease; } .ur-cap-tree--closed > .ur-cap-tree-children { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; } .ur-cap-tree--open > .ur-cap-tree-children { max-height: 2000px; opacity: 1; } .ur-cap-tree-children::before { content: ""; position: absolute; left: var(--space-sm); top: 0; bottom: var(--space-1-2rem); width: var(--space-px); background: var(--color-border); } .ur-cap-tree-branch { position: relative; } .ur-cap-node-row--child::before { content: ""; position: absolute; left: calc(var(--space-7) * -1); top: 50%; width: var(--space-5); height: var(--space-px); background: var(--color-border); } .ur-chip { display: inline-flex; align-items: center; gap: var(--space-xs); border-radius: var(--radius-md); border: var(--space-px) solid var(--color-border); padding: var(--space-px) var(--space-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: opacity var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease; white-space: nowrap; line-height: var(--line-height-none); user-select: none; min-height: var(--space-7); } .ur-chip--locked { cursor: default; opacity: 0.65; } .ur-chip--readonly { cursor: not-allowed; opacity: 0.55; } .ur-chip-dot { width: var(--space-0-35); height: var(--space-0-35); border-radius: var(--radius-full); flex-shrink: 0; } .ur-chip-lock { font-size: var(--font-size-xs); opacity: 0.6; } .ur-chip--off { background: var(--color-white); border-color: var(--color-border); color: var(--color-text-muted); } .ur-chip--off .ur-chip-dot { background: var(--color-text-placeholder); } .ur-chip--off:hover:not(.ur-chip--locked) { border-color: var(--color-input-border); color: var(--color-text-body); } .ur-chip--view.ur-chip--on { background: var(--color-white); border-color: var(--color-chip-view-border); color: var(--color-chip-view-text); } .ur-chip--view.ur-chip--on .ur-chip-dot { background: var(--color-chip-view-text); } .ur-chip--edit.ur-chip--on { background: var(--color-white); border-color: var(--color-warning-border); color: var(--color-warning); } .ur-chip--edit.ur-chip--on .ur-chip-dot { background: var(--color-warning); } .ur-chip--interact.ur-chip--on { background: var(--color-white); border-color: var(--color-chip-interact-border); color: var(--color-chip-interact-text); } .ur-chip--interact.ur-chip--on .ur-chip-dot { background: var(--color-chip-interact-text); } .ur-chip--action.ur-chip--on { background: var(--color-white); border-color: var(--color-chip-action-border); color: var(--color-chip-action-text); } .ur-chip--action.ur-chip--on .ur-chip-dot { background: var(--color-chip-action-text); } .ur-chip-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .ur-chip-key { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-lightgrey); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-px) var(--space-xs); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-wide); } .ur-chip-wrap--dirty .ur-chip { outline: var(--space-px) dashed var(--color-error); outline-offset: var(--space-0-4); } .ur-chip-status { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: var(--space-0-4) var(--space-sm); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); white-space: nowrap; flex-shrink: 0; cursor: help; } .ur-chip-status--deprecated { background: var(--color-chip-deprecated-bg); color: var(--color-chip-deprecated-text); } .ur-chip-status--removed { background: var(--color-chip-removed-bg); color: var(--color-chip-removed-text); text-decoration: line-through; } .ur-chip--deprecated { opacity: 0.85; } /* ── Editor footer ───────────────────────────────────────── */ .ur-editor-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-xl); border-top: var(--space-px) solid var(--color-border); background: var(--color-white); flex-shrink: 0; gap: var(--space-md); transition: background var(--motion-duration-fast) ease; min-height: var(--space-12); } .ur-editor-foot--dirty { background: var(--color-warning-bg); border-top-color: var(--color-warning-border); } .ur-foot-status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); line-height: var(--line-height-normal); } .ur-foot-saved { color: var(--color-text-muted); } .ur-foot-readonly { color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: italic; } .ur-foot-error { color: var(--color-danger); font-size: var(--font-size-xs); } .ur-foot-actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; } /* ─── Editable wrap ─────────────────────────────────────── */ .ur-editable-wrap { position: relative; display: flex; align-items: center; width: fit-content; max-width: 100%; } .ur-edit-hint { opacity: 1; margin-left: var(--space-xs); color: var(--color-text-placeholder); flex-shrink: 0; } .ur-edit-hint-icon { display: block; width: var(--space-md); height: var(--space-md); flex-shrink: 0; } .ur-input-mirror { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; } .ur-input-mirror--name { font-size: clamp(var(--font-size-lg), 2.5vw, var(--font-size-2xl)); font-family: var(--font-family-display); font-weight: var(--font-weight-bold); } .ur-input-mirror--desc { font-size: var(--font-size-base); font-family: var(--font-family-base); } /* ─── Desc / delete tooltip ─────────────────────────────── */ .ur-desc-tooltip { position: fixed; z-index: 9999; background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); font-family: var(--font-family-base); font-weight: var(--font-weight-regular); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); pointer-events: none; max-width: 240px; white-space: normal; line-height: 1.5; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); } .ur-desc-tooltip::before { content: ""; position: absolute; top: calc(-1 * var(--space-1-5)); left: var(--ur-arrow-left, 50%); transform: translateX(-50%); border-left: var(--space-1-5) solid transparent; border-right: var(--space-1-5) solid transparent; border-bottom: var(--space-1-5) solid var(--color-tooltip-bg); } .ur-desc-tooltip--above::before { top: auto; bottom: calc(-1 * var(--space-1-5)); border-bottom: none; border-top: var(--space-1-5) solid var(--color-tooltip-bg); } /* ═══════════════════════════════════════════════════════════ CAPABILITIES CATALOG TAB ═══════════════════════════════════════════════════════════ */ .uc-layout { display: flex; flex-direction: column; flex: 1; gap: 0; min-height: 0; } .uc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); padding: var(--space-lg) 0 var(--space-md); flex-wrap: wrap; } .uc-header-left { flex: 1; min-width: 0; } .uc-title { font-size: var(--font-size-3xl); font-family: var(--font-family-display); font-weight: var(--font-weight-bold); color: var(--color-primary); margin: 0 0 var(--space-xs); line-height: var(--line-height-tight); } .uc-subtitle { font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-relaxed); } .uc-header-stats { display: flex; gap: var(--space-xl); flex-shrink: 0; align-items: center; flex-wrap: wrap; } .uc-toolbar { display: flex; align-items: center; gap: var(--space-md); padding: 0 0 var(--space-md); border-bottom: var(--space-px) solid var(--color-border); flex-wrap: wrap; } .uc-search { max-width: var(--space-28) !important; flex: 1; } .uc-result-count { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--space-22), 1fr)); gap: var(--space-lg); padding: var(--space-lg) 0 var(--space-10); overflow: visible; max-height: none; } /* Ensure CustomScrollbar controls scrolling for capabilities catalog */ .uc-custom-scrollbar { height: auto; max-height: calc(100vh - var(--space-20-0)); } .uc-card { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); overflow: hidden; display: flex; flex-direction: column; } .uc-card-head { padding: var(--space-md) var(--space-lg); background: var(--color-bg-card-alt); border-bottom: var(--space-px) solid var(--color-border); } .uc-card-head-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); } .uc-card-title { font-size: var(--font-size-base); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; line-height: var(--line-height-snug); } .uc-card-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-xl); height: var(--space-xl); padding: 0 var(--space-xs); background: var(--color-lightblue); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-family: var(--font-family-base); font-weight: var(--font-weight-semibold); color: var(--color-primary); flex-shrink: 0; } .uc-card-desc { font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-normal); } .uc-card-body { flex: 1; padding: var(--space-sm) 0; } .uc-sub { padding: 0 var(--space-lg) var(--space-sm); } .uc-sub:not(:first-child) { border-top: var(--space-px) solid var(--color-border); padding-top: var(--space-sm); margin-top: var(--space-xs); } .uc-sub-label { font-size: var(--font-size-sm); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin-bottom: var(--space-xs); line-height: var(--line-height-snug); } .uc-tree-node { margin-top: var(--space-xs); padding-left: var(--space-md); border-left: var(--space-px) solid var(--color-border); } .uc-tree-label { font-size: var(--font-size-xs); font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); line-height: var(--line-height-snug); margin-bottom: var(--space-xs); } .uc-tree-actions { min-width: 0; } .uc-action-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: var(--space-px) solid var(--color-bg-card-alt); } .uc-action-row:last-child { border-bottom: none; } .uc-action-label { flex: 1; font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-text-body); line-height: var(--line-height-normal); min-width: 0; } .uc-action-key { font-size: var(--font-size-xs); font-family: var(--font-family-mono); color: var(--color-text-muted); background: var(--color-lightgrey); border-radius: var(--radius-sm); padding: var(--space-px) var(--space-xs); white-space: nowrap; flex-shrink: 0; max-width: var(--space-12-0); overflow: hidden; text-overflow: ellipsis; } .uc-implies { font-size: var(--font-size-xs); font-family: var(--font-family-base); color: var(--color-text-placeholder); white-space: nowrap; flex-shrink: 0; cursor: help; } .uc-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-xxl); font-size: var(--font-size-base); font-family: var(--font-family-base); color: var(--color-text-muted); } /* NOTE: CSS media features can't reference custom properties (var(--space-48) is not a valid media condition and this query never matched in any browser) — pinned to the literal px value the token resolves to (48rem). */ @media (max-width: 48rem) { .ur-cap-node-row { grid-template-columns: 1fr; gap: var(--space-sm); } .ur-cap-node-actions { justify-content: flex-start; padding-left: var(--space-2-2); } } /* ── Responsive: two-pane role editor ───────────────────── Sidebar + editor sit side by side (.ur-layout, display:flex) sized for desktop. Stack them on narrower viewports instead of squeezing both panes past readability. */ @media (max-width: 48rem) { .ur-layout { flex-direction: column; } .ur-sidebar { width: 100%; max-height: 40vh; border-right: none; border-bottom: var(--space-px) solid var(--color-border); } .ur-editor { min-height: 50vh; } } /* ── Responsive: toolbar search width ────────────────────── Fixed max-width kept the search box needlessly narrow once the toolbar has already wrapped onto its own line on small screens. */ @media (max-width: 40rem) { .um-search-wrap { max-width: none; width: 100%; } } .hs-wrap { position: relative; display: inline-flex; flex-direction: column; border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-sm); width: fit-content; min-width: var(--hs-min-w, var(--space-60)); max-width: var(--hs-max-w, none); } .hs-label { position: absolute; top: calc(var(--space-px) * -8); left: var(--space-md); font-size: var(--font-size-2xs); color: var(--color-text-muted); background: var(--color-white); padding: 0 var(--space-0-8); white-space: nowrap; pointer-events: none; z-index: 1; max-width: calc(100% - var(--space-md)); overflow: visible; } /* ── Trigger ─────────────────────────────────────────────── */ .hs-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: transparent; border: none; cursor: pointer; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-black); min-width: var(--space-8); text-align: left; width: 100%; transition: border-color var(--motion-duration-fast) ease; } .hs-trigger--open, .hs-trigger:hover { border-color: var(--color-primary); } .hs-trigger-label { display: none; } .hs-trigger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-width: 0; width: 100%; } .hs-trigger-value { font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .hs-trigger-chevron { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; transition: transform var(--motion-duration-fast) ease; } .hs-trigger-chevron--open { transform: rotate(180deg); } /* ── Dropdown panel ──────────────────────────────────────── */ /* Rendered through a portal to document.body (see useDropdownPosition) so it can't be visually clipped by an ancestor with overflow:hidden (e.g. a chart card) — position/top/bottom/right/min-width are all set inline per instance from the hook's fixed-viewport-coordinate calculation. */ .hs-dropdown { width: max-content; max-width: var(--space-105); /* 26.25rem = 420px */ background: var(--color-white); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-sm); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-dropdown); z-index: 9999; overflow: hidden; } /* ── Search ──────────────────────────────────────────────── */ .hs-search-wrap { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); border-bottom: var(--space-px) solid var(--color-border); background: var(--color-white); } .hs-search-icon { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; } .hs-search { flex: 1; border: none; outline: none; font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-text-body); background: transparent; min-width: 0; } .hs-search::placeholder { color: var(--color-text-muted); } .hs-search-clear { border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-md); line-height: var(--line-height-none); padding: 0 var(--space-0-5); display: flex; align-items: center; } .hs-search-clear:hover { color: var(--color-text-body); } /* ── Match highlight ─────────────────────────────────────── */ .hs-highlight { background: var(--color-subtleblue); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-radius: var(--space-0-5); padding: 0 var(--space-px); } /* ── Tree scroll area padding ────────────────────────────── */ .hs-dropdown .dsl-list { padding: var(--space-0-5) 0; } /* ── No results ──────────────────────────────────────────── */ .hs-no-results { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; margin: 0; } /* ── Group header ────────────────────────────────────────── */ .hs-group-header { display: flex; align-items: center; gap: var(--space-xs); width: 100%; padding: var(--space-sm) var(--space-md); padding-left: calc(var(--space-sm) + var(--hs-depth, 0) * var(--space-3-5)); background: none; border: none; cursor: pointer; text-align: left; font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-violet); font-weight: var(--font-weight-medium); transition: background var(--motion-duration-fast) ease; } .hs-group-header:hover { background: var(--color-lightgrey); } .hs-group-chevron { display: flex; align-items: center; color: var(--color-text-muted); transition: transform var(--motion-duration-fast) ease; flex-shrink: 0; } .hs-group-chevron--open { transform: rotate(90deg); } /* ── Icon sizes ──────────────────────────────────────────── */ .hs-search-icon-svg { display: block; width: var(--space-3-25); /* 0.8125rem = 13px */ height: var(--space-3-25); flex-shrink: 0; } .hs-chevron-right { display: block; width: var(--space-2-5); /* 0.625rem = 10px */ height: var(--space-2-5); } .hs-trigger-chevron-icon { display: block; width: var(--space-sm); /* 0.5rem = 8px */ height: var(--space-1-5); /* 0.375rem = 6px */ flex-shrink: 0; } /* ── Leaf item ───────────────────────────────────────────── */ .hs-leaf { display: flex; align-items: center; gap: var(--space-xs); width: 100%; padding: var(--space-sm) var(--space-md); padding-left: calc(var(--space-sm) + var(--space-3-5) + var(--hs-depth, 0) * var(--space-3-5)); background: none; border: none; cursor: pointer; text-align: left; font-size: var(--font-size-sm); font-family: var(--font-family-display); color: var(--color-violet); transition: background var(--motion-duration-fast) ease; } .hs-leaf:hover { background: var(--color-lightgrey); } /* ── Briefly highlight the selected option when the dropdown opens ─ */ @keyframes hs-leaf-pulse { 0% { background: var(--color-subtleblue); } 100% { background: transparent; } } .hs-leaf--pulse { animation: hs-leaf-pulse 0.9s ease-out; } /* ── Radio indicator ─────────────────────────────────────── */ .hs-radio { --hs-radio-size: var(--space-3-25); /* 0.8125rem = 13px */ --hs-radio-border: 0.09375rem; /* 1.5px */ width: var(--hs-radio-size); height: var(--hs-radio-size); border-radius: 50%; border: var(--hs-radio-border) solid var(--color-violet); flex-shrink: 0; display: inline-block; } .hs-radio--selected { border-color: var(--color-violet); background: var(--color-primary); box-shadow: inset 0 0 0 var(--space-0-8) var(--color-white); /* ~3px inset ring */ } .mia-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .mia-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } .mia-page .app-tabs-wrapper { position: static; } .mia-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .mia-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .mia-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0; } .mia-body { flex: 1; min-height: 0; } .mia-body-content { padding: 0 var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } /* ── KPI row ─────────────────────────────────────────────── */ .mia-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-kpiblack); font-family: var(--font-family-base); padding: 0 var(--space-md); padding-top: var(--space-sm); margin-bottom: calc(var(--space-sm) * -1); } .mia-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--space-md) var(--space-md); padding-bottom: var(--space-xs); } .mia-kpi-row::-webkit-scrollbar { display: none; } .mia-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); scroll-snap-align: start; } /* ── Two-column charts row ───────────────────────────────── */ .mia-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .mia-chart-half { background: var(--color-white); min-width: 0; display: flex; flex-direction: column; } .mia-chart-half:first-child { border-right: var(--space-px) solid var(--color-kpigrey); } .mia-chart-half:only-child { border-right: none; } .mia-charts-row:has(.mia-chart-half:only-child) { grid-template-columns: 1fr; } .mia-chart-inner { position: relative; min-width: var(--space-34); padding: var(--space-md) var(--space-md) 0; display: flex; flex-direction: column; flex: 1; gap: var(--space-xs); } .mia-media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.75); z-index: 10; border-radius: var(--radius-sm); } /* ── Full-width chart ────────────────────────────────────── */ .mia-chart-full { background: var(--color-white); display: flex; flex-direction: column; padding: var(--space-xs) var(--space-md) 0; gap: var(--space-xs); } /* ── Chart header ────────────────────────────────────────── */ .mia-chart-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: nowrap; } .mia-chart-header > div:first-child { flex: 1; min-width: 0; } .mia-chart-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; font-family: var(--font-family-display); display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; } .mia-chart-subtitle { font-size: var(--font-size-sm); color: var(--color-kpiblack); margin: var(--space-px) 0 0; font-family: var(--font-family-base); } /* ── Chart actions ───────────────────────────────────────── */ .mia-chart-actions { display: flex; align-items: flex-start; gap: var(--space-sm); flex-shrink: 0; flex-wrap: nowrap; } .mia-chart-actions--stack { flex-direction: column; align-items: flex-end; gap: var(--space-xs); } .mia-chart-actions-row { display: flex; align-items: center; gap: var(--space-sm); } .mia-chart-actions-row--end { justify-content: flex-end; padding-top: var(--space-2-5); } .mia-chart-actions .hs-wrap { max-width: var(--space-13-75); min-width: var(--space-9-375); } /* ── Toggle group ────────────────────────────────────────── */ .mia-toggle-group { display: flex; border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .mia-toggle { padding: var(--space-xs) var(--space-2-5); background: none; border: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-base); color: var(--color-primary); cursor: pointer; transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; white-space: nowrap; } .mia-toggle--active { background: var(--color-primary); color: var(--color-white); } /* ── Icon button ─────────────────────────────────────────── */ .mia-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: var(--space-0-8); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .mia-icon-btn:hover { background: var(--color-bg-hover-light); } /* ── Bubble chart legend ─────────────────────────────────── */ .mia-bubble-legend { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); font-size: var(--font-size-2xs); color: var(--color-text-muted); font-family: var(--font-family-base); } .mia-bubble-legend-dot { width: var(--space-md); height: var(--space-md); border-radius: 50%; border: var(--space-px) solid var(--color-kpigrey); background: transparent; display: inline-block; } /* ── Platform dropdown row ───────────────────────────────── */ .mia-platform-dropdown-row { display: flex; justify-content: flex-end; } /* ── Campaign Efficiency chart wrap ──────────────────────── */ .mia-eff-chart-wrap { display: flex; flex-direction: column; gap: var(--space-sm); } /* ── Campaign efficiency funnel no-data placeholder ─────── */ .mia-eff-no-funnel { display: flex; align-items: center; justify-content: center; min-height: 8rem; background: var(--color-lightgrey); border-radius: var(--radius-sm); } .mia-eff-no-funnel-text { font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; padding: var(--space-md); } /* ── Campaign KPI grid ───────────────────────────────────── */ .mia-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .mia-kpi-grid-item { display: flex; justify-content: space-between; align-items: center; background: var(--color-lightgrey); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); gap: var(--space-md); } .mia-kpi-grid-label { font-size: var(--font-size-sm); color: var(--color-text-body); font-family: var(--font-family-base); } .mia-kpi-grid-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); font-family: var(--font-family-display); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .mia-kpi-row { flex-wrap: wrap; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .mia-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .mia-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 1024px) { .mia-charts-row { grid-template-columns: 1fr; } .mia-chart-half:first-child { border-right: none; border-bottom: var(--space-px) solid var(--color-kpigrey); } } /* .mia-kpi-grid (Campaign Efficiency's embedded KPI grid) lives inside .mia-chart-half, one column of the 2-up .mia-charts-row above. A plain @media query can only see the viewport, not this card's actual rendered width — so a breakpoint tied to "narrow viewport" alone would leave the grid stuck at 2 columns for the whole range where the row is still 2-up but each half is only ~450–550px (roughly 1024–1300px viewport), which is genuinely cramped for label+value KPI pairs. Collapsing at the same 1024px breakpoint as the parent row guarantees the grid is never forced into 2 columns while its own card is still half-width. */ @media (max-width: 1024px) { .mia-kpi-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* .mia-chart-title has white-space: nowrap AND display: flex (for icon alignment) — text-overflow: ellipsis silently does not apply to a flex container's content, so this never actually truncated anything; the title just kept its full width and rendered underneath/behind the toggle group and table/download icons sitting beside it in .mia-chart-actions. Wrap the header instead — the same fix already used for .ir-chart-header's dropdown — so the title gets its own full row and the actions (toggle group + icons) drop to a row below whenever they don't both fit on one line. */ .mia-chart-header { flex-wrap: wrap; } .mia-chart-actions { flex-wrap: wrap; justify-content: flex-end; flex: 1 0 100%; } } .pd-wrap { display: flex; flex-direction: column; gap: var(--space-md); } /* ── Section ─────────────────────────────────────────────── */ .pd-section { display: flex; flex-direction: column; gap: var(--space-sm); } .pd-section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); font-family: var(--font-family-display); margin: 0; } .pd-divider { height: var(--space-px); background: var(--color-kpigrey); } /* ── Performance Highlights ──────────────────────────────── */ .pd-highlights-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .pd-highlight-card { background: var(--color-white); border: var(--space-px) solid var(--color-highlight-card-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-0-5); } .pd-highlight-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pd-highlight-header { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); color: var(--color-black); } .pd-highlight-emoji { font-size: var(--font-size-xl); line-height: var(--line-height-none); } .pd-highlight-user { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-primary); font-family: var(--font-family-display); margin-top: var(--space-0-5); } .pd-highlight-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-base); } .pd-highlight-value { font-size: var(--font-size-xs); font-family: var(--font-family-base); margin-top: var(--space-0-5); } .pd-highlight-value-label { color: var(--color-text-muted); } /* ── Campaign Overview ───────────────────────────────────── */ .pd-metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .pd-metric-card { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: var(--color-white); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); } .pd-metric-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pd-metric-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pd-metric-icon-svg { display: block; width: var(--space-5); height: var(--space-5); flex-shrink: 0; } .pd-metric-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0-5); min-width: 0; } .pd-metric-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-base); white-space: nowrap; } .pd-metric-value { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-body); font-family: var(--font-family-display); } /* ── Key Performance Insights ────────────────────────────── */ .pd-insights-section { background: var(--color-bg-subtle); border-radius: var(--radius-sm); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); } .pd-insights-header { text-align: center; display: flex; flex-direction: column; gap: var(--space-0-5); } .pd-insights-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); font-family: var(--font-family-display); margin: 0; } .pd-insights-subtitle { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-base); margin: 0; } .pd-insights-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); } .pd-insight-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); } .pd-insight-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); } .pd-insight-circle { width: var(--space-11); height: var(--space-11); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); flex-shrink: 0; } .pd-insight-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); font-family: var(--font-family-display); } .pd-insight-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-base); line-height: var(--line-height-relaxed); } /* ── Responsive ───────────────────────────────────────────── This dashboard renders inside .ir-split-right, which itself collapses to full page width on narrow viewports (see InfluencerROI.css) — at that point its fixed 4-and-3-column grids get too cramped. */ @media (max-width: 600px) { .pd-metrics-row { grid-template-columns: repeat(2, 1fr); } .pd-insights-row { grid-template-columns: 1fr; } } .ir-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .ir-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } .ir-page .app-tabs-wrapper { position: static; } .ir-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .ir-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .ir-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0; } .ir-body { flex: 1; min-height: 0; } .ir-body-content { padding: 0 var(--space-lg) var(--space-10); display: flex; flex-direction: column; gap: var(--space-md); } /* ── KPI row ─────────────────────────────────────────────── */ .ir-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-kpiblack); font-family: var(--font-family-base); padding-top: var(--space-sm); margin-bottom: calc(var(--space-sm) * -1); } .ir-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-xs); } .ir-kpi-row::-webkit-scrollbar { display: none; } .ir-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); scroll-snap-align: start; } /* ── Chart section (full width) ──────────────────────────── */ .ir-chart-full { background: var(--color-white); display: flex; flex-direction: column; padding: var(--space-xs) var(--space-md) 0; gap: var(--space-xs); } /* Extend IPC chart to both card edges so "Impressions" label aligns with the component title on the left, and "Spend(R$)" aligns with the download icon on the right */ .ir-ipc-chart { margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); } /* ── Chart header ────────────────────────────────────────── */ .ir-chart-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: nowrap; } /* Title/subtitle wrapper (unclassed in markup) — without min-width: 0 a flex item's floor is its content's natural (nowrap) width, so the .ir-chart-title below can never actually shrink far enough to ellipsis and instead pushes the header wider than its card at narrow widths. */ .ir-chart-header > div:first-child { flex: 1; min-width: 0; } .ir-chart-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; font-family: var(--font-family-display); display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; } .ir-chart-subtitle { font-size: var(--font-size-sm); color: var(--color-kpiblack); margin: var(--space-px) 0 0; font-family: var(--font-family-base); } /* ── Chart actions ───────────────────────────────────────── */ .ir-chart-actions { display: flex; align-items: flex-start; gap: var(--space-sm); flex-shrink: 0; flex-wrap: nowrap; } .ir-chart-actions .hs-wrap { max-width: var(--space-13-75); } /* ── Icon button ─────────────────────────────────────────── */ .ir-icon-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); padding: var(--space-0-8); display: flex; align-items: center; border-radius: var(--radius-sm); transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .ir-icon-btn:hover { background: var(--color-bg-hover-light); } /* ── Pills row ───────────────────────────────────────────── */ .ir-pills-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .ir-pill { flex: 1; min-width: var(--space-8-75); background: var(--color-subtleblue); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); display: flex; align-items: center; justify-content: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-family: var(--font-family-base); color: var(--color-kpi-title); white-space: nowrap; } .ir-pill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .ir-pill-icon { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; } .ir-pill-icon svg { width: auto; height: var(--space-2-75); } .ir-pill-value { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-accent); font-family: var(--font-family-display); } .ir-pill-value--ahead { color: var(--color-delta-positive); } /* ── Split layout (Performance by Influencer) ────────────── */ .ir-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; min-height: 0; } .ir-split-left { min-width: 0; } .ir-split-right { min-width: 0; overflow-y: auto; } .ir-widget-loading { display: flex; align-items: center; justify-content: center; height: var(--space-50); color: var(--color-text-muted); font-size: var(--font-size-sm); } /* Bubble Size legend icon — thin grey circle, scoped to IVPM chart only */ .ir-ivpm-chart .legend g.traces:first-child .legendsymbols path { stroke-width: 1px !important; stroke: #888888 !important; fill: none !important; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1200px) { .ir-kpi-row { flex-wrap: wrap; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .ir-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .ir-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 1024px) { .ir-split { grid-template-columns: 1fr; } .ir-split-right { max-height: var(--space-25); } } @media (max-width: 768px) { /* .ir-chart-title has white-space: nowrap for desktop alignment; at mobile widths that can push the header wider than its card and overflow the page. Let it truncate with an ellipsis instead. */ .ir-chart-title { overflow: hidden; text-overflow: ellipsis; } /* .ir-chart-header/.ir-chart-actions never wrap, and the "Select Channel, Platform[, Campaign]" HierarchySelect dropdown here (Influencers vs Paid Media, Performance by Influencer) is given a hard minWidth={280}/{300} prop — turned into an inline `min-width` that's LARGER than this rule's own `max-width: var(--space-13-75)` (220px) above, so per the CSS cascade min-width already always won and that max-width has never actually applied at any width. Let the header wrap to its own row and the dropdown shrink to fit instead of forcing the card wider than the viewport. */ .ir-chart-header { flex-wrap: wrap; } .ir-chart-actions { flex-wrap: wrap; justify-content: flex-end; flex: 1 0 100%; } .ir-chart-actions .hs-wrap { min-width: 0; max-width: 100%; flex: 1 1 auto; } /* .ir-pill has white-space: nowrap and only a 140px min-width — at narrow widths a pill's real (unwrappable) text content is far wider than that floor, so instead of the row wrapping the *pill* onto its own line, each pill's text overflowed its own rounded border and visually overlapped the next pill. Let each pill wrap its own text and take a full row instead of trying to fit label+value on one line. */ .ir-pill { flex: 1 1 100%; white-space: normal; text-align: center; } } /* ─── Page Layout ────────────────────────────────────────── */ .mo-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .mo-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } /* Keep AppTabs non-sticky inside this page */ .mo-page .app-tabs-wrapper { position: static; } /* FilterBar: white bg, no sticky offset */ .mo-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .mo-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .mo-body { flex: 1; min-height: 0; } .mo-body-content { padding: var(--space-md) var(--space-lg) var(--space-10); display: flex; flex-direction: column; gap: var(--space-lg); } /* ─── Breadcrumb (static above filter bar) ───────────────── */ .mo-breadcrumb-bar { padding: 0 var(--space-lg); } .mo-breadcrumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-xs); color: var(--color-text-muted); } .mo-breadcrumb-item { color: var(--color-text-muted); } .mo-breadcrumb-sep { color: var(--color-text-muted); font-size: var(--font-size-lg); } .mo-breadcrumb-active { color: var(--color-primary); font-weight: var(--font-weight-medium); } /* ─── KPI Note ───────────────────────────────────────────── */ .mo-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: calc(var(--space-sm) * -1); } /* ─── KPI Row ────────────────────────────────────────────── */ .mo-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; } .mo-kpi-row::-webkit-scrollbar { display: none; } .mo-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); } /* ─── Collapsible Section ────────────────────────────────── */ .mo-section { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); } .mo-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); background: var(--color-section-header-bg); border: none; border-radius: var(--radius-md) var(--radius-md) 0 0; cursor: pointer; text-align: left; transition: background var(--motion-duration-fast) ease; } .mo-section-header:hover { background: var(--color-section-header-bg-hover); } .mo-section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); } .mo-section-chevron { display: flex; align-items: center; color: var(--color-primary); transition: transform var(--motion-duration-normal) ease; } .mo-section-chevron--open { transform: rotate(180deg); } .mo-section-refresh-btn { display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: var(--space-sm); padding: var(--space-xs); background: none; border: none; border-radius: var(--radius-sm); color: var(--color-primary); cursor: pointer; transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .mo-section-refresh-btn:hover:not(:disabled) { color: var(--color-primary); background: var(--color-section-icon-hover-bg); } .mo-section-refresh-btn:disabled { cursor: default; opacity: 0.5; } .mo-section-loader { display: flex; align-items: center; justify-content: center; padding: var(--space-12) 0; } .mo-section-spinner { width: var(--space-7); height: var(--space-7); border: var(--space-0-1875) solid var(--color-section-spinner-track); border-top-color: var(--color-primary); border-radius: 50%; animation: mo-spin 0.7s linear infinite; } @keyframes mo-spin { to { transform: rotate(360deg); } } .mo-sections-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0; } .mo-section-header--static { cursor: default; pointer-events: none; } .mo-section-header--static:hover { background: var(--color-section-header-bg); } /* ─── Enter Constraints (plain, no accordion wrapper) ───────── */ .mo-constraints-section { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); } /* ─── Full-width SelectDropdown in form ─────────────────────── */ .mo-sd-full { width: 100%; } .mo-sd-full .sd-trigger { width: 100%; min-width: 100%; } .mo-section-body { padding: var(--space-lg); border-top: var(--space-px) solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-md); } .mo-section-body--table { padding: 0; gap: 0; } .mo-section-body--table .mo-scenario-actions { padding: var(--space-md) var(--space-lg); border-top: var(--space-px) solid var(--color-border); } /* ─── Shared checkbox ────────────────────────────────────── */ .mo-checkbox { width: var(--space-lg); height: var(--space-lg); accent-color: var(--color-primary); cursor: pointer; display: block; } /* ─── Status Badge ───────────────────────────────────────── */ .mo-status-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-0-4) var(--space-md); border-radius: var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; } .mo-status-badge--completed { background: rgba(4, 151, 124, 0.12); color: var(--color-success); } .mo-status-badge--in-progress { background: rgba(0, 84, 216, 0.1); color: var(--color-accent); } .mo-status-badge--queued { background: rgba(237, 138, 0, 0.1); color: var(--color-warning); } .mo-status-badge--failed { background: rgba(211, 47, 47, 0.1); color: var(--color-error); } .mo-status-badge--clickable { cursor: pointer; } .mo-status-badge--clickable:hover { filter: brightness(0.92); } .mo-status-info-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.7; transition: opacity 0.15s; } .mo-status-info-btn:hover { opacity: 1; } /* ─── Scenario action buttons ────────────────────────────── */ .mo-scenario-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); } .mo-action-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-lg); border-radius: var(--radius-sm); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--motion-duration-fast) ease, opacity var(--motion-duration-fast) ease; border: var(--space-px) solid; } .mo-action-btn:disabled { opacity: 0.45; cursor: not-allowed; } .mo-action-btn--outline { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary); } .mo-action-btn--outline:hover:not(:disabled) { background: var(--color-bg-hover-light); } .mo-action-btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .mo-action-btn--primary:hover:not(:disabled) { background: var(--color-navbar); border-color: var(--color-navbar); } /* ─── Subsection Header ──────────────────────────────────── */ .mo-subsection-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0.625rem; } .mo-subsection-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); } .mo-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); } /* ─── Import Button ──────────────────────────────────────── */ .mo-import-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3-5); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-base); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .mo-import-btn:hover { background: var(--color-bg-hover-light); } /* ─── Outlined Field (floating label style) ──────────────── */ .mo-ofield { border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-input); background: var(--color-white); padding: var(--space-0-6) var(--space-md) var(--space-sm); display: flex; flex-direction: column; gap: var(--space-0-4); width: 100%; box-sizing: border-box; } .mo-ofield--tall { height: 100%; min-height: var(--space-30); } .mo-ofield-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); white-space: nowrap; line-height: var(--line-height-tight); } .mo-ofield-select { border: none; background: transparent; font-size: var(--font-size-base); color: var(--color-text-body); padding: 0; appearance: none; cursor: pointer; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748B' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: var(--space-lg); } .mo-ofield-select:focus { outline: none; } .mo-ofield-input { border: none; background: transparent; font-size: var(--font-size-base); color: var(--color-text-body); padding: 0; width: 100%; flex: 1; } .mo-ofield-input:focus { outline: none; } .mo-ofield-textarea { border: none; background: transparent; font-size: var(--font-size-base); color: var(--color-text-body); padding: 0; width: 100%; flex: 1; resize: none; min-height: 5rem; } .mo-ofield-textarea:focus { outline: none; } .mo-ofield-spend-value { font-size: var(--font-size-base); color: var(--color-text-body); font-weight: var(--font-weight-medium); padding: var(--space-0-5) 0; } .mo-ofield-pct-wrap { display: flex; align-items: center; width: 100%; } .mo-ofield-pct-suffix { font-size: var(--font-size-base); color: var(--color-text-muted); margin-left: auto; padding-right: var(--space-0-5); } .mo-ofield:focus-within { border-color: var(--color-primary); } /* ─── Form Grid ──────────────────────────────────────────── */ .mo-form-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.3fr; gap: var(--space-lg); align-items: stretch; } .mo-form-left, .mo-form-middle { display: flex; flex-direction: column; gap: var(--space-md); } .mo-form-right { display: flex; flex-direction: column; gap: 0; } /* ── Scenario Name: grows to fill remaining left-column height ── */ .mo-form-name-wrap { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; min-height: 0; } /* let the InputField wrapper stretch */ .mo-form-name-wrap .input-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; } .mo-form-name-wrap .input-field-inner { flex: 1; align-items: flex-start; } .mo-form-name-wrap .input-field { height: 100%; } /* ── Grey borders for Scenario Details ─────────────────────── */ .mo-form-left .input-field { border-color: var(--color-kpigrey); color: var(--color-black); font-size: var(--font-size-base); } .mo-form-left .input-label { color: var(--color-text-muted); font-size: var(--font-size-sm); } .mo-form-left .input-field:focus ~ .input-label, .mo-form-left .input-field.has-value ~ .input-label { color: var(--color-text-muted); font-size: var(--font-size-2xs); } /* Scenario Type dropdown — same compact height */ .mo-sd-full .sd-trigger { height: var(--space-11); min-height: var(--space-11); } /* Red required asterisk for Scenario Type and Scenario Name labels */ .mo-sd-full .sd-label::after, .mo-form-name-wrap .input-label::after { content: " *"; color: var(--color-error); } .mo-field-wrap { display: flex; flex-direction: column; gap: var(--space-xs); } .mo-field-wrap--full { flex: 1; } .mo-field-label { font-size: var(--font-size-md); color: var(--color-text-muted); font-weight: var(--font-weight-medium); margin: 0 var(--space-2-5); } .mo-required { color: var(--color-error); } /* ─── Select ─────────────────────────────────────────────── */ .mo-select { width: 100%; padding: var(--space-sm) var(--space-xxl) var(--space-sm) var(--space-2-5); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); background: var(--color-white); color: var(--color-text-body); font-size: var(--font-size-base); appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748B' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-sm) center; } .mo-select:focus { outline: none; border-color: var(--color-primary); } /* ─── Input ──────────────────────────────────────────────── */ .mo-input { padding: var(--space-sm) var(--space-2-5); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); background: var(--color-white); color: var(--color-text-body); font-size: var(--font-size-base); width: 100%; box-sizing: border-box; } .mo-input:focus { outline: none; border-color: var(--color-primary); } .mo-input--suffix { padding-right: var(--space-7); } .mo-name-meta-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); } .mo-name-error-text { font-size: var(--font-size-sm); color: var(--color-error); padding-left: var(--space-md); flex: 1; } .mo-char-count { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; } .mo-char-count--error { color: var(--color-error); font-weight: var(--font-weight-medium); } .mo-input-suffix-wrap { position: relative; display: flex; align-items: center; } .mo-input-suffix { position: absolute; right: var(--space-2-5); font-size: var(--font-size-base); color: var(--color-text-muted); pointer-events: none; } /* ─── Textarea ───────────────────────────────────────────── */ .mo-textarea { width: 100%; padding: var(--space-sm) var(--space-2-5); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); background: var(--color-white); color: var(--color-black); font-size: var(--font-size-base); resize: vertical; box-sizing: border-box; min-height: 5.625rem; } .mo-textarea:focus { outline: none; border-color: var(--color-black); } /* ─── Target Spend Display ───────────────────────────────── */ .mo-spend-display { display: flex; align-items: baseline; gap: var(--space-1-5); padding: var(--space-sm) var(--space-2-5); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-input); background: var(--color-white); font-size: var(--font-size-base); } .mo-spend-prefix { color: var(--color-text-muted); font-size: var(--font-size-md); } .mo-spend-value { color: var(--color-text-body); font-weight: var(--font-weight-medium); } /* ─── Target Spend Slider ────────────────────────────────── */ .mo-spend-slider { position: relative; padding-top: var(--space-xl); padding-bottom: var(--space-xl); margin-top: 0; } .mo-spend-range-input { position: absolute; width: 100%; left: 0; top: 1.375rem; appearance: none; -webkit-appearance: none; height: var(--space-xs); background: transparent; z-index: 4; cursor: grab; touch-action: none; } .mo-spend-range-input:active { cursor: grabbing; } .mo-spend-range-input::-webkit-slider-runnable-track { height: var(--space-0-5); background: var(--color-border); border-radius: var(--space-px); width: 100%; } .mo-spend-range-input::-moz-range-track { height: var(--space-0-5); background: var(--color-border); border-radius: var(--space-px); width: 100%; } /* ── Slider thumb: the visible blue dot — native element for smooth drag ─ */ .mo-spend-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--space-3-5); height: var(--space-3-5); border-radius: 50%; background: var(--color-primary); margin-top: calc(-1 * var(--space-1-2)); cursor: grab; border: none; box-shadow: 0 var(--space-px) var(--space-xs) rgba(0, 84, 216, 0.35); will-change: transform; transition: box-shadow var(--motion-duration-fast) ease; } .mo-spend-range-input:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 var(--space-0-5) var(--space-sm) rgba(0, 84, 216, 0.5); } .mo-spend-range-input::-moz-range-thumb { width: var(--space-3-5); height: var(--space-3-5); border-radius: 50%; background: var(--color-primary); cursor: grab; border: none; box-shadow: 0 var(--space-px) var(--space-xs) rgba(0, 84, 216, 0.35); will-change: transform; transition: box-shadow var(--motion-duration-fast) ease; } .mo-spend-range-input:active::-moz-range-thumb { cursor: grabbing; box-shadow: 0 var(--space-0-5) var(--space-sm) rgba(0, 84, 216, 0.5); } /* ── Hover badge — sits in the padding area above the track ─ */ .mo-spend-indicator-pct { position: absolute; top: 0; transform: translateX(-50%); z-index: 5; pointer-events: none; visibility: hidden; background: rgba(40, 60, 126, 0.08); color: var(--color-primary); border-radius: 20px; padding: 4px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; line-height: var(--line-height-snug); } .mo-spend-slider:hover .mo-spend-indicator-pct { visibility: visible; } .mo-spend-tick-value { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; line-height: 1; margin-top: 1px; } /* ── Static tick marks (always grey, z-index ABOVE track) ── */ .mo-spend-ticks { position: absolute; top: 1.25rem; left: 0; right: 0; z-index: 3; pointer-events: none; } .mo-spend-tick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .mo-spend-tick--first { transform: translateX(0); align-items: flex-start; } .mo-spend-tick--last { transform: translateX(-100%); align-items: flex-end; } .mo-spend-tick-dot { width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--color-border); } .mo-spend-tick-label { font-size: var(--font-size-2xs); color: var(--color-text-muted); white-space: nowrap; } .mo-spend-zero-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-top: var(--space-0-4); } /* ─── Form Divider ───────────────────────────────────────── */ .mo-form-divider { height: var(--space-px); background: var(--color-kpigrey); } /* ─── Optimisation Level ─────────────────────────────────── */ .mo-optim-row { display: flex; align-items: center; justify-content: space-between; } .mo-optim-level { display: flex; flex-direction: column; gap: var(--space-sm); } .mo-radio-group { display: flex; align-items: center; gap: var(--space-lg); margin: 0 var(--space-lg); } .mo-radio-label { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--font-size-base); cursor: pointer; color: var(--color-text-body); } .mo-radio { accent-color: var(--color-primary); cursor: pointer; } .mo-radio-text--disabled { color: var(--color-text-muted); opacity: 0.6; } .mo-radio-label--disabled { cursor: not-allowed; } .mo-radio-label--disabled .mo-radio { cursor: not-allowed; } .mo-recap-btn { padding: var(--space-1-5) var(--space-lg); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .mo-recap-btn:hover { background: var(--color-bg-hover-light); } /* ─── Global Constraints Bar ─────────────────────────────── */ .mo-constraints-wrapper { display: flex; flex-direction: column; gap: 0; } .mo-global-constraints { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background: var(--color-lightgrey); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; gap: var(--space-md); /* Anchors .mo-gc-col-section/.mo-gc-slider-section's absolute left/width, which MediaOptimisationSimulator.tsx sets from the live table header cells' own measured position (see useLayoutEffect there) so they track the table's real Min/Slider/Max column boundaries exactly, at any width, instead of a static guess. */ position: relative; } .mo-gc-col-section { display: flex; align-items: center; gap: var(--space-sm); justify-content: center; position: absolute; top: 0; height: 100%; } .mo-gc-slider-section { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; height: 100%; } .mo-global-label { font-size: var(--font-size-base); color: var(--color-text-body); font-weight: var(--font-weight-medium); flex: 1; } .mo-global-label-accent { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .mo-gc-field-label { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-black); } .mo-gc-input-wrap { display: flex; align-items: center; border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-lightgrey); overflow: hidden; } .mo-gc-input { padding: var(--space-1-4) var(--space-sm); border: none; background: var(--color-lightgrey); color: var(--color-text-body); font-size: var(--font-size-base); width: 4.25rem; text-align: right; } .mo-gc-input:focus { outline: none; } .mo-gc-suffix { padding: var(--space-1-4) var(--space-sm) var(--space-1-4) 0; font-size: var(--font-size-base); color: var(--color-black); background: var(--color-lightgrey); } .mo-gc-reset-btn { display: flex; align-items: center; justify-content: center; width: var(--space-5); height: var(--space-5); border: none; border-radius: var(--radius-lg); background: var(--color-lightgrey); color: var(--color-text-muted); cursor: pointer; transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; } .mo-gc-reset-btn:hover { color: var(--color-text-muted); background: var(--color-grey); } /* ─── Constraints Table ──────────────────────────────────── */ .mo-table-wrap { overflow: auto; max-height: 24rem; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); position: relative; } .mo-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); background: var(--color-white); } .mo-table thead { background: var(--color-lightgrey); position: sticky; top: 0; z-index: 1; } .mo-table th { padding: var(--space-sm) var(--space-md); text-align: left; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; background: var(--color-lightgrey); } .mo-table td { padding: var(--space-sm) var(--space-md); border-bottom: var(--space-px) solid var(--color-border); color: var(--color-text-body); font-size: var(--font-size-base); } .mo-table tbody tr:last-child td { border-bottom: none; } .mo-table tbody tr:hover { background: var(--color-bg-hover-light); } .mo-th-lock, .mo-td-lock { width: var(--space-10); text-align: center; } .mo-lock-btn { background: none; border: none; padding: var(--space-xs); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background var(--motion-duration-fade) ease; } .mo-lock-btn:hover { background: var(--color-lightgrey); } .mo-row-locked { background: rgba(0, 0, 0, 0.02); opacity: 0.6; } .mo-row-locked input:disabled { cursor: not-allowed; } /* Grey out the whole pct container (input + % sign) so the % remains visible */ .mo-row-locked .mo-constraint-pct { background: var(--color-lightgrey); } /* Grey out the R$ input too for visual consistency */ .mo-row-locked .mo-constraint-r-input { background: var(--color-lightgrey); } .mo-dual-range--disabled { opacity: 0.5; pointer-events: none; } .mo-th-center { text-align: center; } .mo-td-slider { min-width: 10rem; padding: var(--space-sm) var(--space-lg); } /* ─── Constraints Table Header ───────────────────────────── */ .mo-cth-inner { display: flex; align-items: center; gap: var(--space-xs); } .mo-th-sort-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; } .mo-th-sort-btn:hover { color: var(--color-primary); } /* ─── Constraint Inputs ──────────────────────────────────── */ .mo-constraint-inputs { display: flex; align-items: center; gap: var(--space-1-5); } .mo-constraint-r-input { width: 6.5rem; padding: var(--space-1-4) var(--space-1-5); border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text-body); font-size: var(--font-size-md); text-align: right; } .mo-constraint-r-input:focus { outline: none; border-color: var(--color-primary); } .mo-constraint-pct { display: flex; align-items: center; border: var(--space-px) solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-white); overflow: hidden; } .mo-constraint-pct-input { width: 3.5rem; padding: var(--space-1-4) var(--space-xs) var(--space-1-4) var(--space-1-5); border: none; background: transparent; color: var(--color-text-body); font-size: var(--font-size-md); text-align: right; } .mo-constraint-pct-input:focus { outline: none; } .mo-pct-sign { padding: var(--space-1-4) var(--space-1-5) var(--space-1-4) var(--space-0-5); font-size: var(--font-size-md); color: var(--color-text-muted); } /* ─── Dual Range Slider ──────────────────────────────────── */ .mo-dual-range { position: relative; height: var(--space-5); display: flex; align-items: center; } .mo-dual-range-track { position: absolute; left: 0; right: 0; height: var(--space-xs); background: var(--color-border); border-radius: var(--space-0-5); } .mo-dual-range-fill { position: absolute; height: 100%; background: var(--color-primary); border-radius: var(--space-0-5); } .mo-range-thumb { position: absolute; width: 100%; appearance: none; -webkit-appearance: none; background: transparent; height: var(--space-5); pointer-events: none; margin: 0; } .mo-range-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--space-3-5); height: var(--space-3-5); border-radius: 50%; background: var(--color-primary); cursor: pointer; pointer-events: all; border: none; box-shadow: 0 var(--space-px) var(--space-0-8) rgba(0, 84, 216, 0.3); } .mo-range-thumb:disabled::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: var(--color-text-muted); cursor: not-allowed; box-shadow: none; } .mo-range-thumb::-moz-range-thumb { width: var(--space-3-5); height: var(--space-3-5); border-radius: 50%; background: var(--color-primary); cursor: pointer; pointer-events: all; border: none; box-shadow: 0 var(--space-px) var(--space-0-8) rgba(0, 84, 216, 0.3); } .mo-range-thumb:disabled::-moz-range-thumb { background: var(--color-text-muted); cursor: not-allowed; box-shadow: none; } /* ─── Constraints Footer ─────────────────────────────────── */ .mo-constraints-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border: var(--space-px) solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-white); font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ─── Run Scenario Wrapper ────────────────────────────────── */ .mo-run-scenario-wrapper { display: flex; justify-content: flex-end; padding-top: var(--space-md); } .mo-run-scenario-btn { padding: var(--space-2-5) var(--space-7); display: inline-flex; align-items: center; gap: var(--space-2); } .mo-btn-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: mo-spin 0.7s linear infinite; flex-shrink: 0; } /* ─── Pagination (constraints) ───────────────────────────── */ .mo-pagination { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-text-muted); } .mo-pg-label { white-space: nowrap; } .mo-pg-select { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-0-4) var(--space-1-2); background: var(--color-white); font-size: var(--font-size-sm); color: var(--color-primary); cursor: pointer; font-family: var(--font-family-base); outline: none; } .mo-pg-info { white-space: nowrap; min-width: 4rem; text-align: center; } .mo-pg-btn { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: var(--font-size-2xl); line-height: 1; padding: 0 var(--space-0-4); display: flex; align-items: center; transition: color var(--motion-duration-fast) ease; } .mo-pg-btn:disabled { color: var(--color-text-placeholder); cursor: not-allowed; } /* ─── Run Scenario Button ────────────────────────────────── */ .mo-run-btn { padding: var(--space-2-5) var(--space-7); background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--motion-duration-normal) ease; } .mo-run-btn:hover { background: var(--color-navbar); } .mo-run-btn:active { transform: translateY(var(--space-px)); } /* ─── Shared Button Styles (matching PerformanceOverview) ─── */ .po-btn-primary { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .po-btn-primary svg { color: var(--color-white); fill: currentColor; } .po-btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } .po-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .po-btn-secondary { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--color-white); color: var(--color-primary); border: var(--space-px) solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .po-btn-secondary svg { color: var(--color-primary); fill: currentColor; } .mo-delete-btn svg { fill: none; stroke: var(--color-primary); } .po-btn-secondary:hover:not(:disabled) { background: var(--color-bg-hover-light); } .po-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; } .po-btn-secondary--compact { padding-left: var(--space-md); padding-right: var(--space-md); } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 1200px) { .mo-kpi-row { flex-wrap: wrap; } .mo-form-grid { grid-template-columns: 1fr 1fr; } .mo-form-right { grid-column: 1 / -1; } } /* The Global Constraints bar's three sections (.mo-gc-col-section × 2 + .mo-gc-slider-section) are absolutely positioned to mirror the live DataTable's Min/Slider/Max column boundaries below it (measured in MediaOptimisationSimulator.tsx) — but that alignment only matters once those columns are actually visible side by side, which the table itself already abandons at narrow widths (it scrolls horizontally on its own, via DataTable's standard dt-inner-h overflow). Below that same table's own column widths' combined footprint, the bar had no responsive treatment at all: its absolutely-positioned sections don't wrap or scroll, so on a mobile viewport (~350–390px available) the Max section — and on anything narrower than ~1024px, increasingly more of the bar — gets positioned off past the card edge and is effectively unreachable (no scrollbar, no wrap). Let the bar wrap onto multiple rows instead: the instruction label gets its own full row, and Min / reset / Max fall back to their natural (unfixed, normal-flow) width and position — `!important` is needed because MediaOptimisationSimulator.tsx sets left/width as inline styles (for the desktop-aligned case), which otherwise always outrank a stylesheet media query. */ @media (max-width: 1024px) { .mo-global-constraints { flex-wrap: wrap; row-gap: var(--space-sm); } .mo-global-label { flex: 1 0 100%; } .mo-gc-col-section, .mo-gc-slider-section { position: static !important; width: auto !important; flex: 0 0 auto; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .mo-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .mo-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .mo-form-grid { grid-template-columns: 1fr; } .mo-form-right { grid-column: auto; } } /* ─── Performance Recap Modal ────────────────────────────── */ .mo-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); } .mo-modal { background: var(--color-white); border-radius: var(--radius-md); width: 92%; max-width: 81.25rem; /* Size to content (header + table + footer) rather than a fixed height, so a short table doesn't leave whitespace below it. The table caps its own height at 350px and scrolls beyond that; max-height keeps the modal within the viewport. */ max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18); overflow: hidden; } .mo-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-sm); border-bottom: var(--space-px) solid var(--color-kpigrey); flex-shrink: 0; margin: 0 var(--space-xl); } .mo-modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .mo-modal-close { display: flex; align-items: center; justify-content: center; width: var(--space-xxl); height: var(--space-xxl); background: none; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .mo-modal-close:hover { background: var(--color-lightgrey); color: var(--color-text-body); } .mo-modal-body { flex: 1; min-height: 0; padding: var(--space-xl); overflow-y: auto; outline: none; } .mo-modal-body:focus { outline: none; } .mo-modal-body::-webkit-scrollbar { display: none; } .mo-modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2-5); padding: var(--space-md) 0; border-top: var(--space-px) solid var(--color-kpigrey); margin: 0 var(--space-xl); flex-shrink: 0; } /* ─── Confirm Delete Modal ────────────────────────────────── */ .mo-delete-modal { background: var(--color-white); border-radius: var(--radius-md); width: 26.25rem; max-width: 95vw; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18); } .mo-delete-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-5) var(--space-3-5); } .mo-delete-modal-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .mo-delete-modal-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-5) var(--space-xs); border-radius: var(--space-0-5); } .mo-delete-modal-body { padding: var(--space-lg) var(--space-5) var(--space-md); } .mo-delete-modal-text { font-size: var(--font-size-lg); color: var(--color-text-body); margin: 0; line-height: var(--line-height-relaxed); } .mo-delete-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2-5); padding: var(--space-md) var(--space-5) var(--space-lg); } /* ─── Download Toast ─────────────────────────────────────── */ .mo-toast { position: fixed; top: var(--space-5); right: var(--space-xl); z-index: 2000; display: flex; align-items: center; gap: var(--space-2-5); background: var(--color-success); color: var(--color-white); border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); box-shadow: 0 var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.18); max-width: 28.75rem; animation: mo-toast-in var(--motion-duration-normal) ease; } @keyframes mo-toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } .mo-toast-icon { flex-shrink: 0; } .mo-toast-msg { flex: 1; line-height: 1.4; } .mo-toast-close { background: none; border: none; cursor: pointer; color: var(--color-white); opacity: 0.8; padding: 0; display: flex; align-items: center; flex-shrink: 0; } .mo-toast-close:hover { opacity: 1; } /* ─── Floating Label Textarea ────────────────────────────── */ .mo-textarea-wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; } .mo-textarea-field { width: 100%; flex: 1; min-height: 5rem; padding: var(--space-md) var(--space-md) var(--space-xs); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-input); background-color: var(--color-input-bg); font-size: var(--font-size-sm); color: var(--color-black); outline: none; resize: none; font-family: var(--font-family-base); transition: border-color var(--motion-duration-normal) ease; } .mo-textarea-label { position: absolute; left: var(--space-md); top: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-muted); pointer-events: none; transition: top var(--motion-duration-fast) ease, font-size var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; } .mo-textarea-field:focus ~ .mo-textarea-label, .mo-textarea-field:not(:placeholder-shown) ~ .mo-textarea-label { top: calc(var(--space-px) * -6); font-size: var(--font-size-2xs); color: var(--color-text-muted); background: var(--color-input-bg); padding: 0 var(--space-xs); line-height: var(--line-height-none); margin-left: calc(var(--space-xs) * -1); } .mo-textarea-field:focus { border-color: var(--color-input-border-focus); } /* ─── Floating Label Number Input with Suffix ────────────── */ .mo-number-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; margin-top: var(--space-lg); } .mo-number-input-field { width: 100%; height: var(--space-10); padding: var(--space-xs) var(--space-xxl) 0 var(--space-md); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-input); background-color: var(--color-input-bg); font-size: var(--font-size-base); color: var(--color-black); outline: none; transition: border-color var(--motion-duration-normal) ease; } .mo-number-input-label { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); font-size: var(--font-size-sm); color: var(--color-text-muted); pointer-events: none; transition: top var(--motion-duration-fast) ease, font-size var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease, transform var(--motion-duration-fast) ease; } .mo-number-input-field:focus ~ .mo-number-input-label, .mo-number-input-field:not(:placeholder-shown) ~ .mo-number-input-label { top: calc(var(--space-px) * -6); transform: none; font-size: var(--font-size-2xs); color: var(--color-text-muted); background: var(--color-input-bg); padding: 0 var(--space-xs); line-height: var(--line-height-none); margin-left: calc(var(--space-xs) * -1); } .mo-number-input-suffix { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); font-size: var(--font-size-base); color: var(--color-text-muted); pointer-events: none; } .mo-number-input-field:focus { border-color: var(--color-input-border-focus); } /* ─── Target Spend Editable Input with Currency Adornment ─── */ .mo-display-field-wrapper { position: relative; width: 100%; } .mo-spend-input-adornment { position: absolute; left: var(--space-md); top: calc(47% + var(--space-xs) / 2); transform: translateY(-50%); display: flex; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); pointer-events: none; z-index: 1; } .mo-display-field { width: 100%; height: var(--space-10); padding: var(--space-xs) var(--space-md) 0 var(--space-2); border: var(--space-px) solid var(--color-kpigrey); border-radius: var(--radius-input); background-color: var(--color-input-bg); font-size: var(--font-size-base); color: var(--color-black); } .mo-display-field--input { outline: none; cursor: text; } .mo-display-field--input:focus { border-color: var(--color-input-border-focus); } .mo-display-field-label { position: absolute; left: var(--space-md); top: calc(var(--space-px) * -6); font-size: var(--font-size-2xs); color: var(--color-text-muted); background: var(--color-input-bg); padding: 0 var(--space-xs); line-height: var(--line-height-none); margin-left: calc(var(--space-xs) * -1); pointer-events: none; } /* ─── Import Confirm Loader ──────────────────────────────── */ .mo-import-confirm-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); height: 100%; min-height: 12rem; color: var(--color-text-muted); font-size: var(--font-size-base); } .mo-import-spinner { width: var(--space-10); height: var(--space-10); border: var(--space-0-1875) solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: mo-spin 0.7s linear infinite; } @keyframes mo-spin { to { transform: rotate(360deg); } } /* ─── Error Details Modal ────────────────────────────────── */ .mo-error-modal { background: var(--color-white); border-radius: var(--radius-md); width: var(--space-31-25); max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18); } .mo-error-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--space-lg) var(--space-5); border-bottom: var(--space-px) solid var(--color-border); margin: 0 var(--space-5); padding-left: 0; padding-right: 0; } .mo-error-modal-title-group { display: flex; flex-direction: column; gap: var(--space-0-1875); } .mo-error-modal-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .mo-error-modal-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-normal); } .mo-error-modal-body { padding: var(--space-lg) var(--space-5); overflow-y: auto; flex: 1; min-height: 0; } .mo-error-modal-text { font-size: var(--font-size-base); color: var(--color-text-body); margin: 0; line-height: var(--line-height-relaxed); } .mo-stage-steps { display: flex; flex-direction: column; } .mo-stage-item { display: flex; gap: var(--space-lg); align-items: stretch; } .mo-stage-item--pending { opacity: 0.6; } .mo-stage-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: var(--space-2-25); } .mo-stage-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-2-25); height: var(--space-2-25); border-radius: 50%; flex-shrink: 0; } .mo-stage-icon--success { background: rgba(4, 151, 124, 0.12); border: var(--space-0-5) solid var(--color-success); color: var(--color-success); } .mo-stage-icon--failed { background: rgba(211, 47, 47, 0.08); border: var(--space-0-5) solid var(--color-error); color: var(--color-error); } .mo-stage-icon--pending { background: var(--color-surface, #f8f9fa); border: var(--space-0-5) dashed var(--color-border); color: var(--color-text-muted); } .mo-stage-line { width: var(--space-0-5); flex: 1; min-height: var(--space-5); margin-top: var(--space-0-1875); } .mo-stage-line--solid { background: var(--color-success); } .mo-stage-line--dashed { background: repeating-linear-gradient( to bottom, var(--color-text-placeholder) 0, var(--color-text-placeholder) var(--space-xs), transparent var(--space-xs), transparent var(--space-sm) ); } .mo-stage-right { flex: 1; min-width: 0; padding-bottom: var(--space-5); } .mo-stage-item:last-child .mo-stage-right { padding-bottom: var(--space-sm); } .mo-stage-content { display: flex; flex-direction: column; gap: var(--space-0-1875); padding-top: var(--space-0-4375); } .mo-stage-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .mo-stage-name--success { color: var(--color-success); } .mo-stage-name--failed { color: var(--color-error); } .mo-stage-name--pending { color: var(--color-text-muted); } .mo-stage-sublabel { font-size: var(--font-size-md); color: var(--color-text-muted); font-weight: var(--font-weight-normal); line-height: 1.4; } .mo-stage-callout { position: relative; border: var(--space-0-09375) solid rgba(211, 47, 47, 0.35); border-radius: var(--radius-md); background: rgba(211, 47, 47, 0.04); overflow: hidden; } .mo-stage-callout-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--space-0-1875); background: var(--color-error); } .mo-stage-callout-inner { padding: var(--space-md) var(--space-3-5) var(--space-md) var(--space-4-5); } .mo-stage-callout-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .mo-stage-callout-divider { height: var(--space-px); background: rgba(211, 47, 47, 0.2); margin: var(--space-2-5) 0; } .mo-stage-badge { display: inline-flex; align-items: center; padding: var(--space-0-1875) var(--space-2-5); border-radius: var(--radius-pill); background: var(--color-error); color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.02em; } .mo-stage-error-msg { display: flex; gap: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-text-body); line-height: var(--line-height-relaxed); margin: 0; align-items: flex-start; } .mo-stage-error-icon { flex-shrink: 0; color: var(--color-error); margin-top: var(--space-px); } /* ─── Running Scenario Modal ─────────────────────────────── */ .mo-running-modal { background: var(--color-white); border-radius: var(--radius-md); width: var(--space-37-5); max-width: 95vw; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) rgba(0, 0, 0, 0.18); } .mo-running-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-5); border-bottom: var(--space-px) solid var(--color-border); margin: 0 var(--space-5); padding-left: 0; padding-right: 0; } .mo-running-modal-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .mo-running-modal-body { padding: var(--space-xxl) var(--space-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); } .mo-running-illustration { margin-bottom: var(--space-md); } .mo-running-text-primary { font-size: var(--font-size-base); color: var(--color-success); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-relaxed); } .mo-running-text-secondary { font-size: var(--font-size-base); color: var(--color-text-body); margin: 0; line-height: var(--line-height-relaxed); } .mo-running-error-msg { font-size: var(--font-size-base); color: var(--color-error); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-relaxed); text-align: center; } .mo-running-modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: var(--space-md) var(--space-5); border-top: var(--space-px) solid var(--color-border); margin: 0 var(--space-5); padding-left: 0; padding-right: 0; } /* ─── Page Layout ────────────────────────────────────────── */ .mor-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .mor-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } /* Keep AppTabs non-sticky inside this page */ .mor-page .app-tabs-wrapper { position: static; } /* FilterBar: white bg, no sticky offset */ .mor-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .mor-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .mor-body { flex: 1; min-height: 0; } .mor-body-content { padding: var(--space-md) var(--space-lg) var(--space-10); display: flex; flex-direction: column; gap: var(--space-md); } /* ─── Breadcrumb (static above filter bar) ───────────────── */ .mor-breadcrumb-bar { padding: 0 var(--space-lg); } .mor-breadcrumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-xs); color: var(--color-text-muted); } .mor-breadcrumb-item { color: var(--color-text-muted); } .mor-breadcrumb-link { cursor: pointer; transition: color 0.15s; } .mor-breadcrumb-link:hover { color: var(--color-primary); } .mor-breadcrumb-sep { color: var(--color-text-muted); font-size: var(--font-size-lg); } .mor-breadcrumb-active { color: var(--color-primary); font-weight: var(--font-weight-medium); } /* ─── KPI Note ───────────────────────────────────────────── */ .mor-kpi-note { text-align: right; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: calc(var(--space-sm) * -1); } /* ─── KPI Row ────────────────────────────────────────────── */ .mor-kpi-row { display: flex; flex-wrap: nowrap; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; } .mor-kpi-row::-webkit-scrollbar { display: none; } .mor-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); } /* ─── Section ────────────────────────────────────────────── */ .mor-section { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); } .mor-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); background: var(--color-section-header-bg); border: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background var(--motion-duration-fast) ease; } .mor-section-header--open { border-radius: var(--radius-md) var(--radius-md) 0 0; } .mor-section-header:hover { background: var(--color-section-header-bg-hover); } .mor-section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); font-family: var(--font-family-base); } .mor-section-actions { display: flex; align-items: center; gap: var(--space-sm); } .mor-icon-btn { display: flex; align-items: center; justify-content: center; /* padding-sized like the simulator's .mo-section-refresh-btn so the accordion header height matches the Existing/Create Scenario sections */ padding: var(--space-xs); background: none; border: none; color: var(--color-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; } .mor-icon-btn:hover { background: var(--color-section-icon-hover-bg); color: var(--color-primary); } .mor-section-chevron { display: flex; align-items: center; color: var(--color-primary); transition: transform 0.2s; } .mor-section-chevron--open { transform: rotate(180deg); } .mor-section-body { padding: var(--space-lg); border-top: var(--space-px) solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-md); } /* ─── Chart Legend ───────────────────────────────────────── */ .mor-chart-legend { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); margin-bottom: var(--space-md); } .mor-legend-item { display: flex; align-items: center; gap: var(--space-xs); /* Match Plotly legend labels (chartFontSize.sm) so HTML and chart legends read as one size */ font-size: var(--chart-font-size-sm); color: var(--color-black); font-weight: var(--font-weight-regular); } .mor-legend-dot { width: var(--space-3-5); height: var(--space-3-5); border-radius: var(--space-0-1875); } .mor-legend-dot--blue { background: var(--color-accent); } .mor-legend-dot--red { background: var(--color-error); } .mor-legend-dot--teal { background: #00CAB8; } /* ─── Bar Chart ──────────────────────────────────────────── */ .mor-chart { display: flex; flex-direction: column; gap: var(--space-md); } .mor-chart-row { display: grid; grid-template-columns: 200px 1fr 80px; align-items: center; gap: var(--space-md); } .mor-chart-label { font-size: var(--font-size-sm); color: var(--color-text-body); font-weight: var(--font-weight-medium); } .mor-chart-bar-wrap { height: var(--space-xxl); background: var(--color-lightgrey); border-radius: var(--radius-sm); overflow: hidden; } .mor-chart-bar { height: 100%; transition: width 0.3s ease; } .mor-chart-bar--blue { background: var(--color-accent); } .mor-chart-bar--red { background: var(--color-error); } .mor-chart-bar--teal { background: var(--color-success); } .mor-chart-value { font-size: var(--font-size-sm); color: var(--color-text-body); font-weight: var(--font-weight-semibold); text-align: right; } /* ─── Section Divider ────────────────────────────────────── */ .mor-divider { height: var(--space-px); background: var(--color-kpigrey); } /* ─── Mini Bar Chart (inline in table cells) ─────────────── */ .mor-mini-bar-cell { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: var(--space-4); } .mor-mini-bar-track { height: var(--space-xs); background: var(--color-lightgrey); border-radius: var(--space-0-5); overflow: hidden; } .mor-mini-bar-fill { height: 100%; border-radius: var(--space-0-5); transition: width 0.3s ease; } .mor-mini-bar-fill--pos { background: var(--color-success); } .mor-mini-bar-fill--neg { background: var(--color-error); } /* ─── Scenario Header ────────────────────────────────────── */ .mor-scenario-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--space-md) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); background: var(--color-section-header-bg); } .mor-scenario-header::-webkit-scrollbar { display: none; } .mor-scenario-info { display: flex; align-items: baseline; gap: var(--space-xs); flex: 1; min-width: 0; overflow: hidden; } .mor-scenario-label { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); font-family: var(--font-family-base); color: var(--color-text-muted); } .mor-scenario-name { font-size: var(--font-size-md); color: var(--color-primary); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mor-scenario-meta { display: flex; align-items: center; gap: var(--space-lg); flex-shrink: 0; } .mor-scenario-date { font-size: var(--font-size-sm); color: var(--color-text-muted); } .mor-toggle-label { display: flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-body); } .mor-toggle-checkbox { width: var(--space-4); height: var(--space-4); accent-color: var(--color-primary); cursor: pointer; } .mor-recap-btn { padding: var(--space-0-4375) var(--space-lg); border: var(--space-px) solid var(--color-primary); border-radius: var(--radius-sm); font-family: var(--font-family-display); background: var(--color-white); color: var(--color-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; transition: background 0.15s; } .mor-recap-btn:hover { background: var(--color-bg-hover-light); } /* ─── View Toggle ────────────────────────────────────────── */ .mor-view-toggle { display: flex; align-items: center; gap: 0; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); width: fit-content; padding: var(--space-px); } .mor-tab-btn { padding: var(--space-xs) var(--space-md); border: none; background: transparent; color: var(--color-text-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-display); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; } .mor-tab-btn:hover { background: var(--color-lightgrey); } .mor-tab-btn--active { background: var(--color-primary); color: var(--color-white); } .mor-tab-btn--active:hover { background: var(--color-navbar); } /* ─── Table Section ──────────────────────────────────────── */ .mor-table-section { border: var(--space-px) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); overflow: hidden; } .mor-table-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background: var(--color-lightgrey); border-bottom: var(--space-px) solid var(--color-border); } .mor-table-actions { display: flex; align-items: center; gap: var(--space-sm); } .mor-icon-btn-outline { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-md); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text-body); font-size: var(--font-size-base); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .mor-icon-btn-outline:hover { background: var(--color-bg-hover-light); border-color: var(--color-primary); } /* ─── Compare Section ────────────────────────────────────── */ .mor-compare-section { display: flex; justify-content: flex-end; padding: var(--space-md) 0; } .mor-compare-btn { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast) ease; } .mor-compare-btn:hover { background: var(--color-primary-hover); } .mor-compare-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* ─── Legend dots (additional colours) ──────────────────── */ .mor-legend-dot--grey { background: #C8C8C8; } .mor-legend-dot--pink { background: #ec4899; } /* ─── Table toolbar ──────────────────────────────────────── */ .mor-table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-lg); } .mor-table-toolbar-right { display: flex; align-items: center; gap: var(--space-md); } .mor-icon-btn-sm { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; padding: var(--space-0-8); } .mor-icon-btn-sm:hover { background: var(--color-section-icon-hover-bg); color: var(--color-primary); } /* ─── Results table ──────────────────────────────────────── */ .mor-table-scroll-wrap { width: 100%; /* Contain CustomScrollbar's thumb (z-index: 100) in its own stacking context so it can't paint over the rows-per-page dropdown opening up from the pagination footer below. */ isolation: isolate; } .mor-results-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); /* Let columns grow based on content to avoid bar overlap */ table-layout: auto; } .mor-results-table thead { background: var(--color-lightgrey); } .mor-results-table th { padding: var(--space-sm) var(--space-lg); text-align: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--color-text-body); border-bottom: var(--space-px) solid var(--color-border); white-space: nowrap; background: var(--color-lightgrey); vertical-align: middle; } .mor-th-sortable { cursor: pointer; user-select: none; } .mor-th-sortable:hover { background: var(--color-border); } /* Metric header labels carrying a definition tooltip. The whole sorts on click, so keep the pointer cursor rather than MetricTooltip's help cursor. */ .mor-th-tip { cursor: inherit; } .mor-th-tip:focus-visible { outline: var(--space-0-5) solid var(--color-primary); outline-offset: var(--space-0-4); border-radius: var(--radius-sm); } .mor-results-table th.mor-th-channel { width: var(--space-9); min-width: var(--space-9); max-width: var(--space-9); text-align: center; } .mor-th-filter-wrap { display: inline-flex; align-items: center; gap: var(--space-xs); justify-content: center; } .mor-th-filter-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-0-5); background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast) ease; } .mor-th-filter-btn:hover { background: var(--color-bg-hover-light); } .mor-col-filter-backdrop { position: fixed; inset: 0; z-index: 9998; } .mor-results-table th.mor-th-platform { width: var(--space-9); min-width: var(--space-9); max-width: var(--space-9); text-align: center; } .mor-results-table th.mor-th-metric { text-align: center; width: 1px; } .mor-th-flat { text-align: center; } .mor-td-flat { text-align: right; font-variant-numeric: tabular-nums; } .mor-icon-btn-sm--active { color: var(--color-primary); border-radius: var(--radius-sm); } .mor-tab-btn--disabled { opacity: 0.4; cursor: not-allowed; } .mor-results-table td { padding: var(--space-sm) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); vertical-align: middle; background: var(--color-white); font-size: var(--font-size-sm); color: var(--color-text-body); white-space: nowrap; text-align: center; } .mor-results-table tbody tr:hover td { background: var(--color-bg-hover-light); } .mor-results-table td.mor-td-channel { padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg); width: var(--space-9); min-width: var(--space-9); max-width: var(--space-9); text-align: center; white-space: normal; word-break: break-word; } .mor-results-table td.mor-td-platform { padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-lg); width: var(--space-9); min-width: var(--space-9); max-width: var(--space-9); text-align: center; white-space: normal; word-break: break-word; } .mor-platform-name { display: block; font-weight: var(--font-weight-regular); color: var(--color-text-body); font-size: var(--font-size-sm); white-space: normal; word-break: break-word; overflow-wrap: break-word; } .mor-channel-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-xs); } .mor-channel-name { display: block; font-weight: var(--font-weight-medium); color: var(--color-text-body); font-size: var(--font-size-sm); white-space: normal; word-break: break-word; overflow-wrap: break-word; flex: 1; min-width: 0; } .mor-linechart-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--space-5); height: var(--space-5); border: none; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 0; transition: color 0.15s, background 0.15s; } .mor-linechart-btn:hover { color: var(--color-primary); background: var(--color-section-icon-hover-bg); } /* ─── Icon column (dedicated narrow column for response curve icon) ── */ .mor-th-icon { width: var(--space-10); padding: var(--space-sm) var(--space-xs); } .mor-td-icon { width: var(--space-10); padding: var(--space-sm) var(--space-xs); text-align: center; } .mor-results-table td.mor-td-metric { padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-md); width: 1px; } /* ─── Metric cell with bars ──────────────────────────────── */ .mor-metric-cell { display: flex; align-items: center; gap: var(--space-lg); } .mor-metric-cell--no-change { justify-content: flex-start; } .mor-bars-block { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-1875); } .mor-bar-row { display: flex; align-items: center; gap: var(--space-xs); } .mor-bar-value { font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; color: var(--color-text-body); white-space: nowrap; flex-shrink: 0; text-align: left; width: var(--space-12); } .mor-bar-track { width: var(--space-9); flex-shrink: 0; height: var(--space-2-5); background: var(--color-lightgrey); border-radius: var(--space-lg); overflow: hidden; cursor: default; } .mor-bar-fill { height: 100%; border-radius: var(--space-0-5); transition: width 0.3s ease; } .mor-bar-fill--teal { background: #00CAB8; } .mor-bar-fill--grey { background: #C8C8C8; } .mor-bar-row:hover .mor-bar-fill--teal, .mor-results-table tbody tr:hover .mor-bar-fill--teal { background: #00CAB8; filter: brightness(1.1); } .mor-bar-row:hover .mor-bar-fill--grey, .mor-results-table tbody tr:hover .mor-bar-fill--grey { background: #C8C8C8; filter: brightness(1.15); } .mor-bar-row:hover .mor-bar-track, .mor-results-table tbody tr:hover .mor-bar-track { background: var(--color-border); } /* Bar hover tooltip */ .mor-bar-tooltip-wrap { position: relative; flex: 1; min-width: 0; } .mor-bar-tooltip-wrap[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + var(--space-1-5)); left: 50%; transform: translateX(-50%); background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--font-size-xs); font-family: var(--font-family-base); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; z-index: 100; box-shadow: 0 var(--space-xs) var(--space-md) var(--color-shadow-tooltip); } .mor-bar-tooltip-wrap[data-tooltip]:hover::before { content: ""; position: absolute; bottom: calc(100% + var(--space-px)); left: 50%; transform: translateX(-50%); border: var(--space-1-2) solid transparent; border-top-color: var(--color-tooltip-bg); pointer-events: none; z-index: 100; } /* ─── Change Indicator ───────────────────────────────────── */ .mor-change-indicator { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-text-muted); width: var(--space-20); flex-shrink: 0; text-align: right; } .mor-change-indicator--positive { color: #28a745; } .mor-change-indicator--negative { color: #dc3545; } .mor-change-indicator--empty { color: var(--color-text-muted); font-weight: var(--font-weight-normal); } /* ─── Toggle switch (pill style) ─────────────────────────── */ .mor-toggle-row { display: flex; align-items: center; gap: var(--space-xs); } .mor-toggle-text { font-size: var(--font-size-sm); color: var(--color-text-body); } .mor-toggle-switch { position: relative; display: inline-block; width: var(--space-2-25); height: var(--space-5); flex-shrink: 0; } .mor-toggle-input { opacity: 0; width: 0; height: 0; position: absolute; } .mor-toggle-slider { position: absolute; inset: 0; background: var(--color-lightgrey); border-radius: var(--radius-lg); cursor: pointer; transition: background 0.2s; border: var(--space-px) solid var(--color-kpigrey); } .mor-toggle-slider::before { content: ""; position: absolute; width: var(--space-3-5); height: var(--space-3-5); left: var(--space-0-1875); top: var(--space-0-1875); background: var(--color-text-placeholder); border-radius: 50%; transition: transform 0.2s; } .mor-toggle-input:checked + .mor-toggle-slider { background: var(--color-primary); } .mor-toggle-input:checked + .mor-toggle-slider::before { transform: translateX(var(--space-lg)); } /* ─── Response Curve Modal ───────────────────────────────── */ .mor-modal-overlay { position: fixed; inset: 0; background: var(--color-backdrop-overlay); z-index: 1000; display: flex; align-items: center; justify-content: center; } .mor-modal { background: var(--color-white); border-radius: var(--radius-md); width: min(72rem, 92vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip); overflow: hidden; } .mor-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); background: var(--color-lightgrey); flex-shrink: 0; } .mor-modal-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-primary); } .mor-modal-header-actions { display: flex; align-items: center; gap: var(--space-xs); } .mor-modal-close { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border: none; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast), color var(--motion-duration-fast); padding: 0; } .mor-modal-close:hover { background: var(--color-bg-hover-light); color: var(--color-primary); } .mor-modal-body { overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .mor-modal-chart-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); margin-bottom: calc(var(--space-xs) * -1); } .mor-modal-chart-label--center { text-align: center; } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 1200px) { .mor-kpi-row { flex-wrap: wrap; } .mor-chart-row { grid-template-columns: 150px 1fr 70px; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .mor-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .mor-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .mor-chart-row { grid-template-columns: 1fr; gap: var(--space-xs); } .mor-chart-bar-wrap { height: 1.5rem; } .mor-table-actions { flex-wrap: wrap; } /* .mor-table-toolbar (Channel/Platform toggle + legend + view/download icons) is a single nowrap flex row with no responsive treatment at all — at narrow widths its combined content (toggle + 2 legend items + 2 icon buttons) overflows the card, cutting off the "Base" legend item and the download icon past the right edge. Let the toolbar wrap, with the legend/icons dropping to their own right-aligned row below the Channel/Platform toggle. */ .mor-table-toolbar { flex-wrap: wrap; row-gap: var(--space-sm); } .mor-table-toolbar-right { flex-wrap: wrap; justify-content: flex-end; flex: 1 0 100%; } } /* ─── Recap Constraints Modal ────────────────────────────── */ .mor-rc-modal { background: var(--color-white); border-radius: var(--radius-md); width: min(60rem, 95vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-5) var(--space-15) var(--color-shadow-tooltip); overflow: hidden; } .mor-rc-info { border-bottom: var(--space-px) solid var(--color-border); display: flex; flex-direction: column; background: var(--color-lightgrey); } .mor-rc-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); border-bottom: var(--space-px) solid var(--color-border); } .mor-rc-info-row:last-child { border-bottom: none; } .mor-rc-info-cell { display: flex; align-items: center; gap: var(--space-sm); } .mor-rc-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); flex-shrink: 0; } .mor-rc-info-text { font-size: var(--font-size-sm); color: var(--color-text-body); } .mor-rc-info-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .mor-rc-info-value { font-size: var(--font-size-sm); color: var(--color-text-body); } .mor-rc-tabs { display: flex; align-items: flex-end; gap: 0; border-bottom: calc(var(--space-px) * 2) solid var(--color-border); padding: 0 var(--space-lg); flex-shrink: 0; } .mor-rc-tab { padding: var(--space-sm) var(--space-md); border: none; background: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; border-bottom: calc(var(--space-px) * 2) solid transparent; margin-bottom: calc(var(--space-px) * -2); transition: color var(--motion-duration-fast), border-color var(--motion-duration-fast); font-family: var(--font-family-display); } .mor-rc-tab:hover { color: var(--color-primary); } .mor-rc-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); } .mor-rc-body { flex: 1; padding: var(--space-md) var(--space-lg); min-height: 0; display: flex; flex-direction: column; } /* Recap constraints modal DataTable should scroll within its own maxHeight */ .mor-rc-body .dt-inner-h { max-height: var(--dt-max-h, 260px); } /* Channel/Platform names must size to content on one line, not wrap; the table's existing horizontal scrollbar takes over if columns overflow. */ .mor-rc-body .dt-table td.mor-rc-td-nowrap { white-space: nowrap; } .mor-toggle-saving { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: var(--space-1-5); font-style: italic; } /* ─── Page Layout ────────────────────────────────────────── */ .moc-page { height: 100vh; background: var(--color-white); display: flex; flex-direction: column; padding-top: var(--space-10); /* Without this, the FilterBar's dropdown panel (position: absolute, up to --space-22 tall) can extend past this page's own 100vh box — since nothing here clips it, the browser adds a genuine page-level scrollbar to reveal the overflow the moment the panel opens, on top of .moc-body's own CustomScrollbar. .um-page already has this; the other pages using FilterBar were missing it. */ overflow: hidden; } .moc-page .app-tabs-wrapper { position: static; } .moc-page .fb-wrapper { position: relative; top: 0; background: var(--color-white); border-bottom: none; margin: 0; } .moc-filter-divider { height: var(--space-px); background: var(--color-kpigrey); margin: 0 var(--space-lg); } .moc-body { flex: 1; min-height: 0; } .moc-body-content { padding: var(--space-md) var(--space-lg) var(--space-10); display: flex; flex-direction: column; gap: var(--space-lg); } /* ─── Breadcrumb ─────────────────────────────────────────── */ .moc-breadcrumb-bar { padding: 0 var(--space-lg); } .moc-breadcrumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-xs); color: var(--color-text-muted); } .moc-breadcrumb-item { color: var(--color-text-muted); } .moc-breadcrumb-link { cursor: pointer; transition: color var(--motion-duration-fast); } .moc-breadcrumb-link:hover { color: var(--color-primary); } .moc-breadcrumb-sep { color: var(--color-text-muted); font-size: var(--font-size-lg); } .moc-breadcrumb-active { color: var(--color-primary); font-weight: var(--font-weight-medium); } /* ─── Icon button ────────────────────────────────────────── */ .moc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border: none; background: none; color: var(--color-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast), color var(--motion-duration-fast); padding: 0; } .moc-icon-btn:hover { background: var(--color-bg-hover-light); color: var(--color-primary); } .moc-icon-btn-outline { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-1-5) var(--space-3-5); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text-body); font-size: var(--font-size-sm); font-family: var(--font-family-display); cursor: pointer; transition: background var(--motion-duration-fast), border-color var(--motion-duration-fast); } .moc-icon-btn-outline:hover { background: var(--color-bg-hover-light); border-color: var(--color-primary); } /* ─── Section (Insights) ─────────────────────────────────── */ .moc-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); } .moc-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-md); background: var(--color-section-header-bg); border: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background var(--motion-duration-fast) ease; } .moc-section-header:hover { background: var(--color-section-header-bg-hover); } .moc-section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); } .moc-section-header-actions { display: flex; align-items: center; gap: var(--space-xs); } .moc-section-chevron { display: flex; align-items: center; color: var(--color-primary); transition: transform var(--motion-duration-normal); } .moc-section-chevron--open { transform: rotate(180deg); } .moc-section-body { padding: var(--space-lg); border-top: 1px solid var(--color-border); } /* ─── Insight Cards ──────────────────────────────────────── */ .moc-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .moc-insight-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .moc-insight-text { flex: 1; font-size: var(--font-size-sm); color: var(--color-text-body); line-height: var(--line-height-relaxed); } /* ─── Title ──────────────────────────────────────────────── */ .moc-comparison-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin: 0; } /* ─── Toolbar ────────────────────────────────────────────── */ .moc-toolbar-row { display: flex; align-items: center; justify-content: space-between; } .moc-toolbar-right { display: flex; align-items: center; gap: var(--space-sm); } .moc-view-toggle { display: flex; align-items: center; border: var(--space-px) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); width: fit-content; padding: var(--space-0-5); } .moc-tab-btn { padding: var(--space-1-5) var(--space-lg); border: none; background: transparent; color: var(--color-text-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-display); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--motion-duration-fast), color var(--motion-duration-fast); } .moc-tab-btn--icon { display: inline-flex; align-items: center; gap: var(--space-xs); } .moc-tab-btn:hover { background: var(--color-lightgrey); } .moc-tab-btn--active { background: var(--color-primary); color: var(--color-white); } .moc-tab-btn--active:hover { background: var(--color-navbar); } .moc-tab-btn--disabled { opacity: 0.4; cursor: not-allowed; } /* ─── Table wrap ─────────────────────────────────────────── */ .moc-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); } .moc-table-inner { overflow-x: auto; width: 100%; } /* ─── Table base ─────────────────────────────────────────── */ .moc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); background: var(--color-white); } /* ── Header row 1 — Scenario Type ── */ .moc-thead-type th { padding: var(--space-md) var(--space-md); background: var(--color-tablegrey); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: 1px solid var(--color-border); white-space: nowrap; } /* ── Header row 2 — Scenario Name ── */ .moc-thead-name th { padding: var(--space-md) var(--space-md); background: var(--color-tablegrey); text-align: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: 1px solid var(--color-border); white-space: nowrap; } /* ── Header row 3 — Metric columns (auto-generated by DataTable) ── */ .moc-datatable-wrap .dt-table thead tr:last-child th { padding: var(--space-sm) var(--space-md); background: var(--color-lightgrey); text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-body); border-bottom: calc(var(--space-px) * 2) solid var(--color-border); white-space: nowrap; } /* ── Scenario group left border ── */ .moc-th-group-border, .moc-td-group-border { border-left: 2px solid var(--color-border); } .moc-th-metric-cell { min-width: 110px; } /* ─── Table body ─────────────────────────────────────────── */ .moc-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); color: var(--color-text-body); font-size: var(--font-size-sm); } .moc-table tbody tr:hover { background: var(--color-bg-hover-light); } .moc-td-value { text-align: center; font-variant-numeric: tabular-nums; } /* ─── DataTable wrapper ──────────────────────────────────── */ .moc-datatable-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .moc-datatable-wrap .dt-table { border-collapse: separate; border-spacing: 0; } /* * Sticky header + sticky columns together: * DataTable.css uses `thead tr { position: sticky; top: 0 }` for vertical * stickiness, but a sticky tr prevents its th children from being sticky * horizontally. Fix: make thead itself sticky (supported in all modern * browsers), reset tr to static so th cells can independently stick left. */ .moc-datatable-wrap .dt-table thead { position: sticky; top: 0; z-index: 10; } .moc-datatable-wrap .dt-table thead tr { position: static; } .moc-datatable-wrap .dt-table thead th { position: static; top: auto; } /* Column filter dropdown height is sized inline (MediaOptimisationComparison.tsx, passed to CustomScrollbar's maxHeight prop). Don't give .dt-multi-list/.csb-content their own max-height + overflow-y:auto here — that creates a second native scroll region nested inside CustomScrollbar's own, so the custom thumb stops short of the list's real scroll range. */ /* Sticky fixed columns in header */ .moc-datatable-wrap .dt-table thead th.moc-th-fixed { position: sticky; background: var(--color-lightgrey); z-index: 11; text-align: center; vertical-align: middle; border-right: calc(var(--space-px) * 2) solid var(--color-border); } .moc-datatable-wrap .dt-table thead th.moc-th-channel-cell { left: 0; min-width: 160px; max-width: 160px; } .moc-datatable-wrap .dt-table thead th.moc-th-platform-cell { left: 160px; min-width: 160px; max-width: 160px; } /* Sticky fixed columns in body */ .moc-datatable-wrap .dt-table tbody td.moc-td-fixed { position: sticky; background: var(--color-white); z-index: 5; border-right: calc(var(--space-px) * 2) solid var(--color-border); font-weight: var(--font-weight-regular); } .moc-datatable-wrap .dt-table tbody td.moc-td-channel { left: 0; min-width: 160px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moc-datatable-wrap .dt-table tbody td.moc-td-platform { left: 160px; min-width: 160px; max-width: 160px; } /* Channel cell's ellipsis lives on the inner span (a block child isn't clipped by the td's own text-overflow), so the whole cell — including the "…" — is the hover target for the span's title tooltip. */ .moc-datatable-wrap .dt-table tbody td.moc-td-channel .moc-td-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .moc-datatable-wrap .dt-table tbody tr:hover td.moc-td-fixed { background: var(--color-bg-hover-light); } /* Multi-line renderHeader() — 3 stacked lines per metric column */ .moc-th-multi { display: flex; flex-direction: column; gap: var(--space-px); padding: var(--space-0-5) 0; min-width: 0; } /* Left border = new scenario group */ .moc-th-group-border { border-left: calc(var(--space-px) * 2) solid var(--color-border); padding-left: var(--space-xs); margin-left: calc(var(--space-xs) * -1); } /* Row 1 — scenario type */ .moc-th-type-lbl { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-normal); } /* Row 2 — scenario name */ .moc-th-name-lbl { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height-normal); } /* Invisible spacers keep height consistent across all columns in a group */ .moc-th-hidden { visibility: hidden; pointer-events: none; } /* Row 3 — metric name, separated by top border */ .moc-th-metric-lbl { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-body); white-space: nowrap; line-height: var(--line-height-normal); margin-top: var(--space-0-8); padding-top: var(--space-0-8); border-top: var(--space-px) solid var(--color-border); } /* ─── Selected scenario highlight ───────────────────────── */ .moc-datatable-wrap .dt-table tbody td.moc-td-selected { background: var(--color-tablegrey); } .moc-datatable-wrap .dt-table tbody tr:hover td.moc-td-selected { background: var(--color-bg-hover-light); } /* ─── Cell value with inline change ─────────────────────── */ .moc-cell-value { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); white-space: nowrap; } .moc-change-inline { font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); } .moc-change-inline--positive { color: var(--color-success); } .moc-change-inline--negative { color: var(--color-error); } .moc-change-inline--neutral { color: var(--color-text-placeholder); } /* ─── Channel header filter wrap ────────────────────────── */ .moc-th-filter-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); } .moc-col-filter-backdrop { position: fixed; inset: 0; z-index: 9998; } /* ─── Table footer ───────────────────────────────────────── */ .moc-table-footer { display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-lightgrey); } /* ─── Charts view ────────────────────────────────────────── */ .moc-charts-view { display: flex; flex-direction: column; gap: var(--space-lg); } .moc-kpi-group { display: flex; flex-direction: column; gap: var(--space-sm); } .moc-kpi-group-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-primary); width: fit-content; } .moc-kpi-row { display: flex; gap: var(--space-md); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .moc-kpi-row::-webkit-scrollbar { display: none; } .moc-kpi-row .kpi-card { min-width: var(--space-35); flex: 1 0 var(--space-35); } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 1200px) { .moc-insight-grid { grid-template-columns: 1fr; } .moc-th-metric-cell { min-width: 90px; } .moc-kpi-row { flex-wrap: wrap; } } @media (max-width: 768px) { .moc-toolbar-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .moc-kpi-row { flex-wrap: wrap; } } /* Below ~600px, flex-wrap's natural reflow depends on each card's own min-width vs. the exact remaining space, which can land on 1-per-row (a lot of dead space beside each card) as often as 2. Switch to an explicit 2-column grid so mobile always gets a predictable 2-and-2 layout; an odd trailing card spans both columns instead of leaving an empty cell beside it. */ @media (max-width: 600px) { .moc-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); } .moc-kpi-row .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } } /* Stage-progress popup opened from a card's clickable status badge. Structurally mirrors the old optimizer's "Scenario Status" modal (MediaOptimisationSimulator.css, the mo-error-modal / mo-stage- classes), rebuilt with plain design tokens — this popup has no Figma frame of its own (the old-optimizer one it mirrors doesn't use the ohf pixel/scale system either), so sizes come from the shared font-size/space token scales rather than Figma-node rem literals. */ .ssm-backdrop { position: fixed; inset: 0; background: var(--color-backdrop-overlay); /* One above the dialogs that can open this popup (RecentOptimizationsModal / ViewPortfolioModal, both 1000) so it always stacks over them. */ z-index: 1001; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); animation: ssm-fade-in var(--motion-duration-fade) var(--motion-easing-enter) both; } .ssm-dialog { background: var(--color-white); border-radius: var(--radius-md); width: var(--space-31-25); max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 var(--space-sm) var(--space-10) var(--color-shadow-modal-lg); animation: ssm-pop-in var(--motion-duration-slow) var(--motion-easing-spring) both; } @keyframes ssm-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ssm-pop-in { from { opacity: 0; transform: translateY(var(--space-md)) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .ssm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-5) var(--space-md); border-bottom: var(--space-px) solid var(--color-border); } .ssm-title-group { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; } .ssm-title { font-family: var(--ohf-body); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-body); } .ssm-subtitle { font-family: var(--ohf-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); } .ssm-close { display: inline-flex; align-items: center; justify-content: center; width: var(--space-xxl); height: var(--space-xxl); flex-shrink: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-easing-standard); } .ssm-close:hover { background: var(--color-bg-hover-light); color: var(--color-text-body); } .ssm-close-icon { width: var(--space-sm); height: var(--space-sm); } .ssm-body { padding: var(--space-lg) var(--space-5); overflow-y: auto; flex: 1; min-height: 0; } .ssm-empty { font-family: var(--ohf-body); font-size: var(--font-size-base); color: var(--color-text-muted); margin: 0; line-height: var(--line-height-relaxed); } /* ── Vertical stepper ── */ .ssm-stage-steps { display: flex; flex-direction: column; } .ssm-stage-item { display: flex; gap: var(--space-lg); align-items: stretch; /* Staggered reveal: each stage slides in after the dialog lands, delayed by its index (--ssm-stage-index, set inline per item in the TSX). */ animation: ssm-stage-in var(--motion-duration-normal) var(--motion-easing-enter) both; animation-delay: calc(var(--motion-duration-fade) + var(--ssm-stage-index, 0) * var(--motion-duration-stagger)); } @keyframes ssm-stage-in { from { opacity: 0; transform: translateY(var(--space-sm)); } to { opacity: 1; transform: translateY(0); } } /* Pending rows are dimmed; their reveal keyframe lands on the same 0.6 so the stagger and the resting opacity can't fight. */ .ssm-stage-item--pending { opacity: 0.6; animation-name: ssm-stage-in-pending; } @keyframes ssm-stage-in-pending { from { opacity: 0; transform: translateY(var(--space-sm)); } to { opacity: 0.6; transform: translateY(0); } } .ssm-stage-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: var(--space-2-25); } .ssm-stage-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-2-25); height: var(--space-2-25); border-radius: var(--radius-full); flex-shrink: 0; animation: ssm-icon-pop var(--motion-duration-slow) var(--motion-easing-spring) both; animation-delay: calc(var(--motion-duration-fade) + var(--ssm-stage-index, 0) * var(--motion-duration-stagger)); } @keyframes ssm-icon-pop { from { transform: scale(0.4); } to { transform: scale(1); } } /* Check / cross strokes draw themselves in once their row has appeared (pathLength=1 in the TSX normalises every stroke to the same 0..1 range). */ .ssm-draw-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ssm-stroke-draw var(--motion-duration-draw) var(--motion-easing-standard) forwards; animation-delay: calc( var(--motion-duration-fade) + var(--ssm-stage-index, 0) * var(--motion-duration-stagger) + var(--motion-duration-fast) ); } .ssm-draw-stroke--second { animation-delay: calc( var(--motion-duration-fade) + var(--ssm-stage-index, 0) * var(--motion-duration-stagger) + var(--motion-duration-fast) + var(--motion-duration-draw) / 2 ); } @keyframes ssm-stroke-draw { to { stroke-dashoffset: 0; } } .ssm-stage-icon--success { background: var(--color-success-bg); border: var(--space-0-5) solid var(--color-success); color: var(--color-success); } .ssm-stage-icon--failed { background: var(--color-danger-bg); border: var(--space-0-5) solid var(--color-error); color: var(--color-error); } .ssm-stage-icon--pending { background: var(--color-bg-subtle); border: var(--space-0-5) dashed var(--color-border); color: var(--color-text-muted); } /* Pending dot breathes gently — the "waiting" affordance. Delayed by the row's own stagger so the pulse starts only once the icon has popped in. */ .ssm-stage-icon--pending svg { animation: ssm-pending-pulse calc(var(--motion-duration-spin) * 2) var(--motion-easing-ease-in-out) infinite; animation-delay: calc(var(--motion-duration-fade) + var(--ssm-stage-index, 0) * var(--motion-duration-stagger)); } @keyframes ssm-pending-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } .ssm-stage-line { width: var(--space-0-5); flex: 1; min-height: var(--space-5); margin-top: var(--space-0-1875); /* Grows downward as the next stage reveals, reading as "progress flowing". */ transform-origin: top; animation: ssm-line-grow var(--motion-duration-normal) var(--motion-easing-standard) both; animation-delay: calc( var(--motion-duration-fade) + (var(--ssm-stage-index, 0) + 1) * var(--motion-duration-stagger) ); } @keyframes ssm-line-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .ssm-stage-line--solid { background: var(--color-success); } .ssm-stage-line--dashed { background: repeating-linear-gradient( to bottom, var(--color-text-placeholder) 0, var(--color-text-placeholder) var(--space-xs), transparent var(--space-xs), transparent var(--space-sm) ); } .ssm-stage-right { flex: 1; min-width: 0; padding-bottom: var(--space-5); } .ssm-stage-item:last-child .ssm-stage-right { padding-bottom: var(--space-sm); } .ssm-stage-content { display: flex; flex-direction: column; gap: var(--space-0-1875); padding-top: var(--space-0-4375); } .ssm-stage-name { font-family: var(--ohf-body); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } .ssm-stage-name--success { color: var(--color-success); } .ssm-stage-name--failed { color: var(--color-error); } .ssm-stage-name--pending { color: var(--color-text-muted); } .ssm-stage-sublabel { font-family: var(--ohf-body); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } /* ── Failed-stage callout ── */ .ssm-stage-callout { position: relative; border: var(--space-0-09375) solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-bg); overflow: hidden; } .ssm-stage-callout-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--space-0-1875); background: var(--color-error); } .ssm-stage-callout-inner { padding: var(--space-md) var(--space-3-5) var(--space-md) var(--space-4-5); } .ssm-stage-callout-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .ssm-stage-callout-divider { height: var(--space-px); background: var(--color-danger-bg); margin: var(--space-2-5) 0; } .ssm-stage-badge { display: inline-flex; align-items: center; padding: var(--space-0-1875) var(--space-2-5); border-radius: var(--radius-pill); background: var(--color-error); color: var(--color-white); font-family: var(--ohf-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; flex-shrink: 0; letter-spacing: var(--letter-spacing-wide); } .ssm-stage-error-msg { display: flex; gap: var(--space-sm); font-family: var(--ohf-body); font-size: var(--font-size-sm); color: var(--color-text-body); line-height: var(--line-height-relaxed); margin: 0; align-items: flex-start; } .ssm-stage-error-icon { flex-shrink: 0; color: var(--color-error); margin-top: var(--space-px); } /* ── Reduced motion: render everything in its final state, instantly ── */ @media (prefers-reduced-motion: reduce) { .ssm-backdrop, .ssm-dialog, .ssm-stage-item, .ssm-stage-icon, .ssm-stage-line, .ssm-stage-icon--pending svg { animation: none; } .ssm-draw-stroke { animation: none; stroke-dashoffset: 0; } } /* * Typography source of truth for the Optimization Home feature (landing * page, its start-optimisation stub, the OptimizationCard, and the Recent * Optimizations modal) — imported by each of their own CSS files. * * Values pulled from Figma file UhXM9FKphZVFcmOL5CeMpr, node 28:2535. * Declared on :root rather than a class because these two custom * properties are only ever referenced by this feature's own selectors — * nothing else in the app uses an --ohf-* prefixed name. * * ── rem in this feature is figma_px / 18, NOT figma_px / 16 ── * * The app scales the root font with viewport width (src/utils/viewportScale.ts): * * root_px = 16 * min(viewport / 1280, 1.25) // for viewport >= 1280 * * so 1rem is 16px only at <=1280 — it is 18px at 1440 and 20px at >=1600. * This feature's Figma frames are 1440 wide, where the root is 18px. Every * rem literal across the optimiser CSS is therefore authored as figma_px/18, * which lands exactly on Figma at a 1440 viewport and scales proportionally * at every other width. The trailing "13px"-style comments throughout mean * "13px at a 1440 viewport". * * Dividing by 16 instead (the intuitive default, and how this feature was * first written) renders everything 1.125x too large at 1440 and 1.25x at * 1600+ — which reads as "cards look fat / too much white space", the exact * symptom that got misdiagnosed as a type-scale problem for several rounds. * * Shared, app-wide tokens (var(--space-*), var(--radius-*)) are deliberately * NOT rebased: they size the unconverted shared chrome, so they must keep * tracking it. .sc-page's `padding-top: var(--space-10)` clears the real * Navbar precisely because both scale together. */ :root { --ohf-heading: "Fraunces", serif; --ohf-body: "Manrope", sans-serif; /* Used by exactly one node across the whole feature — the "Your Scenario" heading on the "Scope setup" screen (Figma node 418:26737). */ --ohf-display: "DM Serif Display", serif; /* Target spend amount + mono-styled labels on the "Scope setup" screen. Not the app's shared --font-family-mono (Menlo) — see the @font-face comment in optimisationHomeFonts.css. */ --ohf-mono: "IBM Plex Mono", monospace; /* Default type scale: 1 = exactly the Figma pixel values. Screens that opt into a deviation override this on their own root (see .ss-page). Declared here so a `calc( * var(--ohf-text-scale))` can never resolve against an undefined variable — that would make the whole declaration invalid and silently drop the font-size. */ --ohf-text-scale: 1; } /* Palette scoped to the card (values from Figma). Local so it renders the same on the optimiser home screen and inside the "View all" modal, and touches nothing else in the app. */ .oc-card { --oc-bg: #fdfdfd; --oc-border: #e1e5eb; --oc-title: #171f30; --oc-desc: #505869; --oc-chip-bg: #eff2f7; --oc-chip-border: #d6dbe4; --oc-chip-label: #838996; --oc-chip-value: #505869; --oc-btn-text: #0a1a40; --oc-btn-border: #b1b8c5; /* One height shared by both action controls, so the square "⋯" button and the "View Results"/"View Portfolio" button always line up: the primary button's own box math — line box (font-size x line-height) + vertical padding + both 1px borders (box-sizing is border-box app-wide). */ --oc-action-h: calc( 0.69444rem * var(--ohf-text-scale) * 1.366 + 2 * var(--space-xs) + 2 * var(--space-px) ); /* status + type badges */ --oc-single-bg: rgba(19, 96, 190, 0.2); --oc-single-text: #023087; --oc-portfolio-bg: #fcebcc; --oc-portfolio-text: #9f6700; --oc-completed-bg: #ebf4e0; --oc-completed-text: #0b774f; --oc-progress-bg: #f4f3e0; --oc-progress-text: #817800; --oc-failed-bg: #fce4e4; --oc-failed-text: #b42318; --oc-queued-bg: #e7ecfb; --oc-queued-text: #3a4f9e; /* "Scope and Constraints Summary" — same colours ImportScenarioCard's own `.ism-summary-title`/`.ism-summary-meta` use, so the two mirror the same summary block's look wherever it appears. */ --oc-summary-title: #222222; --oc-summary-meta: #6a7693; /* "Show more"/"Show less" toggle — same colour ImportScenarioCard's own `.ism-toggle` uses (`--ism-toggle-text`), so both summary blocks read as one system. */ --oc-toggle-text: #0068d3; /* KPI tiles — same colours ImportScenarioCard's own `.ism-kpi-*` vars use. */ --oc-kpi-border: rgba(0, 0, 0, 0.1); --oc-kpi-label: #6a7693; --oc-kpi-value: #001f82; --oc-kpi-up: #0fa870; --oc-kpi-down: var(--color-danger); --oc-kpi-flat: #8b8b8b; background: var(--oc-bg); border: 1px solid var(--oc-border); border-radius: 0.66667rem; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; } .oc-card--compact { padding: var(--space-md); gap: var(--space-xs); /* The aggregate Portfolio card (`isPortfolioAggregate`) omits the description paragraph and several chips (see `hideRunSpecificDetails`), so it renders noticeably shorter than a Single Cell card sitting right next to it in the same "Recent Optimisations" list — this floors every compact card to the height a full Single Cell card actually needs (measured: title/badges row + one clamped description line + one chips row + this variant's own padding), so the list reads as one uniform grid of cards regardless of how much content any single card has. */ min-height: 6.35rem; } /* Modal node (136:15803) shows a white card fill, distinct from the compact landing-page card's #fdfdfd (node 490:44517) — scoped to the full variant only so the landing page isn't regressed. */ .oc-card--full { --oc-bg: #ffffff; } /* ── Top row: title + badges (left), actions (right) ── */ .oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); min-width: 0; } .oc-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); min-width: 0; } /* Figma distinguishes the card title's weight/size between the compact (home page recent list) and full (inside the "View all" modal) contexts; base rule below matches the full variant, compact overrides to match. */ .oc-title { margin: 0; font-family: var(--ohf-body); font-size: calc(0.80556rem * var(--ohf-text-scale)); font-weight: 700; color: var(--oc-title); line-height: 1.366; min-width: 0; overflow-wrap: break-word; } .oc-card--compact .oc-title { font-size: calc(0.77778rem * var(--ohf-text-scale)); font-weight: 600; } /* ── Badges (Inter, matches Figma — not switched to Manrope) ── */ .oc-badge { display: inline-flex; align-items: center; padding: 0.13333rem var(--space-sm); border-radius: var(--radius-pill); font-size: calc(0.66667rem * var(--ohf-text-scale)); font-weight: var(--font-weight-medium); /* 18.75px / 12px — without this the badge inherits the page line-height and its box comes out a different height than Figma's. */ line-height: 1.562; white-space: nowrap; } .oc-badge--kind-single_cell { background: var(--oc-single-bg); color: var(--oc-single-text); } .oc-badge--kind-portfolio { background: var(--oc-portfolio-bg); color: var(--oc-portfolio-text); } .oc-badge--status-completed, .oc-badge--status-successful { background: var(--oc-completed-bg); color: var(--oc-completed-text); } .oc-badge--status-in_progress { background: var(--oc-progress-bg); color: var(--oc-progress-text); } .oc-badge--status-failed { background: var(--oc-failed-bg); color: var(--oc-failed-text); } .oc-badge--status-queued { background: var(--oc-queued-bg); color: var(--oc-queued-text); } /* Status badge rendered as a