/* ============================================================================ COMMAND CENTER — BRAND TOKENS. This file holds every value that is specific to the *brand* the app is dressed in: the accent color and its derivatives, the near-black chrome, and the four font-family roles. Nothing else belongs here. Everything brand-neutral — spacing, radii, the type scale, status/state colors, neutrals — lives in cc-tokens.css. Keeping the two apart means a rebranded fork of this codebase touches exactly this file (plus Theme/BrandConstants.cs, its C#/JS counterpart) and can merge upstream changes to the rest of the design system without conflict. Loaded immediately before cc-tokens.css in Components/App.razor. Order is not load-bearing — CSS custom properties resolve lazily at use time, so cc-tokens.css can reference these tokens regardless of which file lands first — but keeping brand first makes the layering obvious. The C#/JS side of these same values is Theme/BrandConstants.cs. When you change a color here, change it there too. ============================================================================ */ :root { /* ---- accent ------------------------------------------------------------ --cc-red is the lead brand color: buttons, active rails, focus rings, selected states, chips, the header underline. The name is historical — treat it as "brand accent", not literally red. --cc-brand-text is the accent as used for TEXT on white/light surfaces. It is a separate token from --cc-red because the two have different jobs: a fill only has to look right, whereas text has to stay legible. WCAG AA wants 4.5:1 against white for normal-size text, and an accent chosen for impact often does not clear that on its own — #E71328 is 4.64:1, which passes, but with little headroom. It resolves to the accent itself today, so nothing renders differently. Its reason for existing is that a rebrand can darken *just the text* uses without dulling every button and rail. Anything appreciably lighter than the current red will need to. --cc-red-rgb is the same accent as bare "r, g, b" components, for the rgba() tints used throughout the app. CSS cannot decompose a hex custom property, so the two representations have to be maintained together — change one, change the other. ---------------------------------------------------------------------- */ --cc-red: #E71328; --cc-red-rgb: 231, 19, 40; --cc-red-hover: #C71022; --cc-brand-text: var(--cc-red); /* Accent washed almost to white — row hovers and panel backgrounds. Not expressible as rgba(var(--cc-red-rgb), α): the hand-picked value is a whole point off any exact alpha blend, so it gets its own token. Mirrors BrandConstants.AccentWash. */ --cc-red-wash: #fdecee; --cc-brand-tint: rgba(var(--cc-red-rgb), 0.08); /* ---- chrome ---- */ --cc-black: #000; --cc-header-bg: #1a1a1a; /* ---- typography roles -------------------------------------------------- Four roles, not seven families. @font-face declarations live in wwwroot/fonts/brand-fonts.css; these tokens name the families and are consumed by app.css (--amr-font-*), analytics-theme.css (--rcm-font-*), and cc-chrome.css. MudBlazor's Typography needs literal family names rather than var(), so it reads the same values from BrandConstants. ---------------------------------------------------------------------- */ --cc-font-body: Dinot, Inter, system-ui, -apple-system, sans-serif; --cc-font-heading: DinotBold, sans-serif; --cc-font-display: Klavika, DinotBold, sans-serif; --cc-font-medium: DinotMedium, sans-serif; } /* ============================================================================ COMMAND CENTER — DESIGN TOKENS (:root). Single source of truth for spacing, radius, type scale, neutrals, and semantic status/state colors. Loaded before cc-chrome.css / cc-components.css / cc-errors.css and before MudBlazor. BRAND-SPECIFIC values (the accent --cc-red / --cc-red-hover / --cc-brand-text, the chrome --cc-black / --cc-header-bg, and the --cc-font-* roles) live in cc-brand.css, loaded immediately before this file. Everything here is brand-neutral and should stay that way — if a new token would change when the app is rebranded, it belongs in cc-brand.css instead. ============================================================================ */ /* ---------------------------------------------------------------------------- CANONICAL BREAKPOINTS — the single reference for every media query, the JS viewport hook, and any C# breakpoint logic. They mirror MudBlazor's sm/md/lg so CSS, viewport.js, and the C# theme all agree: sm 600px phone / small-tablet boundary (phone = max-width: 599.98px) md 960px tablet / desktop boundary (compact = max-width: 959.98px) lg 1280px wide desktop (below lg = max-width: 1279.98px) Rules: • Author descending overrides as `max-width: ` — i.e. use the .98 sub-pixel form (599.98 / 959.98 / 1279.98). Do NOT mix 599/600 or 767.98/768 conventions; the whole app uses the .98 form. • The app drawer overlays (Temporary) below md and pushes (Persistent) at ≥ md — the md edge (960) is the single drawer cutover, matching the mobile-nav cutover in cc-chrome.css and MainLayout's viewport hook. • Reserve `min-width: 1600px` strictly for large-monitor / wall-display tiers. Do NOT introduce ad-hoc 520/700/768/860/900/992/1024/1100 breakpoints — snap to the nearest canonical edge instead. ---------------------------------------------------------------------------- */ :root { /* Every surface below is a light one. Declaring it stops the browser from rendering native UI (scrollbars, form controls, pickers) dark for users whose OS is in dark mode — there is no dark variant of this palette. */ color-scheme: light; /* --cc-red / --cc-red-hover / --cc-brand-text / --cc-black / --cc-header-bg are defined in cc-brand.css. */ --cc-dark-gray: #4d4d4d; --cc-medium-gray: #b3b3b3; --cc-light-gray: #ebebeb; --cc-bg: #f5f5f5; --cc-white: #fff; --cc-success: #22c55e; --cc-warning: #f59e0b; --cc-info: #3b82f6; --cc-danger: #ef4444; --cc-yellow: #eab308; /* Recording state — gold, distinct from amber Paused */ --cc-teal: #14b8a6; /* Ready / Finished state */ --cc-indigo: #6366f1; /* Updating state */ --cc-purple: #a855f7; --cc-pink: #ec4899; --cc-orange: #ffa500; /* "Beta" badge (Help) */ --cc-good: #4caf50; /* Material green — "good / high-efficiency", legacy checkbox; backs --rcm-good */ /* ---- extended neutrals (promoted from ad-hoc hex used across pages) ---- */ --cc-gray-100: #f3f4f6; /* faintest fill — code chips, inline count badges */ --cc-gray-200: #e5e7eb; /* wizard inactive step / rail */ --cc-gray-300: #cccccc; /* tab-bar surface */ --cc-gray-400: #9ca3af; /* offline state gray */ --cc-gray-500: #757575; /* nav section labels */ --cc-hover-surface: #fafafa; /* row / list hover background */ --cc-border-subtle: #f0f0f0; /* faint row dividers inside cards */ --cc-field-bg: #fbfbfc; /* resting fill for text inputs (brightens to white on focus) */ --cc-surface-muted: #f8f9fa; /* sidebar / zebra / read-only panel fill (#f9f9f9 snaps here) */ --cc-border: #dddddd; /* standard 1px control/table border (#e0e0e0 snaps here) */ --cc-border-light: #eeeeee; /* lighter card / section divider */ /* ---- neutral text ramp — promoted from the #333/#555/#666/#888/#999 literals scattered across page CSS. Darkest → lightest. ---- */ --cc-ink-strong: #333333; /* headings / emphasized body on white */ --cc-ink-body: #555555; /* secondary body copy */ --cc-ink-muted: #666666; /* captions, helper text */ --cc-ink-subtle: #888888; /* meta / timestamps (#8a8a8a, #8c8c8c snap here) */ --cc-ink-faint: #999999; /* placeholders, disabled labels */ /* ---- loading overlays (CcBusyOverlay) ---- */ --cc-scrim: rgba(0, 0, 0, 0.5); /* full-page backdrop behind a blocking task card */ --cc-scrim-light: rgba(255, 255, 255, 0.72); /* section backdrop — content stays faintly visible */ --cc-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.18); /* ---- "solid tone" fills — saturated status colors used as icon/tile/avatar backgrounds and card rails (distinct from the lighter --cc-success/-warning/-info fills used for dots). Promoted from ad-hoc hex; reused 3-5x each. ---- */ --cc-success-solid: #16a34a; --cc-warning-solid: #ea580c; --cc-info-solid: #2563eb; --cc-danger-solid: #dc2626; --cc-purple-solid: #9333ea; --cc-slate-solid: #475569; --cc-blue-deep: #1565c0; /* dealer-tag blue (same as --rcm-blue-dark) */ /* ---- banner washes — opaque light fills behind the strong "-text" tokens ---- */ --cc-warning-wash: #fff7e6; --cc-info-wash: #eff6ff; --cc-success-wash: #e8f8ee; --cc-red-tint: #fff1f3; --cc-red-deep: #92002b; /* brand-banner text / dark red button (#8a0a1d snaps here) */ --cc-warning-icon: #b45309; /* amber icon / offline text on light surfaces */ /* ---- status tints — the 10-18% washes used behind pills, banners, and selected rows. Pair with the matching --cc-*-text foreground. ---- */ --cc-warning-tint: rgba(245, 158, 11, 0.18); /* --cc-warning @ 18% */ --cc-success-tint: rgba(34, 197, 94, 0.16); /* --cc-success @ 16% */ --cc-danger-tint: rgba(239, 68, 68, 0.14); /* --cc-danger @ 14% */ --cc-info-tint: rgba(59, 130, 246, 0.14); /* --cc-info @ 14% */ --cc-yellow-tint: rgba(234, 179, 8, 0.18); /* --cc-yellow @ 18% */ --cc-teal-tint: rgba(20, 184, 166, 0.16); /* --cc-teal @ 16% */ --cc-indigo-tint: rgba(99, 102, 241, 0.16); /* --cc-indigo @ 16% */ --cc-purple-tint: rgba(168, 85, 247, 0.14); /* --cc-purple @ 14% */ --cc-pink-tint: rgba(236, 72, 153, 0.14); /* --cc-pink @ 14% */ /* ---- external brand (Salesforce links) ---- */ --cc-sf-blue: #0070d2; /* ---- Events coverage-map path legend. Three distinct path types drawn on the All Events map and mirrored on the events table / legend dots. These same values are duplicated as literals in wwwroot/Scripts/EventsMap.js (the JS-crossing exception — Google Maps polylines need a literal color); keep the two in sync. ---- */ --cc-path-autonomous: var(--cc-success); /* green — autonomous mowing */ --cc-path-manual: #f97316; /* orange — manual mowing */ --cc-path-driving: var(--cc-info); /* blue — driving (PTO off) */ /* ---- Monitor live-control palette. Machine-STATE color now flows through the canonical --cc-state-* scale below (Monitor's GetStateBorderColor / GetPanelStateColor return those tokens), so there is no longer a parallel state scale. --cc-emerald is kept ONLY for the fuel / battery gauges — a different semantic than machine state. --cc-slate stays as the neutral fallback for control-panel chrome. ---- */ --cc-emerald: #10b981; --cc-slate: #64748b; /* ---- semantic "strong text on tint" — readable text colors that pair with the 10-18% tinted backgrounds on pills, banners, chips, status text. Single source so every success/warning/etc. label matches. --cc-danger-text is SEMANTIC, not brand: it means "something is wrong". It happens to equal a darkened brand red today only because the current brand accent is red. It must stay a red even if the accent changes — for brand-colored text use --cc-brand-text (cc-brand.css) instead. ---- */ --cc-success-text: #166534; --cc-warning-text: #92400e; --cc-danger-text: #b8001f; --cc-info-text: #1d4ed8; --cc-yellow-text: #854d0e; /* readable on --cc-yellow tint */ --cc-teal-text: #0f766e; /* readable on --cc-teal tint */ --cc-indigo-text: #4338ca; /* readable on --cc-indigo tint */ --cc-purple-text: #6b21a8; /* readable on --cc-purple tint */ --cc-pink-text: #9d174d; /* readable on --cc-pink tint */ --cc-header-h: 72px; --cc-tab-bar-h: 52px; /* Active-tab indicator: the brand parallelogram (rcmowersusa.com nav). Height and the horizontal skew of its slanted ends; see .cc-tab::after. */ --cc-tab-indicator-h: 8px; --cc-tab-indicator-skew: 6px; --cc-footer-h: 36px; --cc-bottom-nav-h: 60px; /* Bottom nav's real footprint: the bar plus the phone's home-indicator inset. */ --cc-bottom-nav-total-h: calc(var(--cc-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); /* Backdrop behind an overlaying panel (mobile drawer). */ --cc-scrim: rgba(0, 0, 0, 0.42); --cc-drawer-w: 240px; /* persistent nav drawer — must match MudDrawer Width in Components/Layout/MainLayout.razor */ --cc-drawer-w-mini: 56px; /* collapsed icon rail — must match MudDrawer MiniWidth */ --cc-nav-row-h: 40px; /* nav link row height */ --cc-nav-icon-size: 22px; /* nav link leading icon (Mud default is 24px) */ --cc-nav-accent-w: 3px; /* active-row left accent bar */ /* ---- spacing scale ---- */ --cc-sp-1: 2px; --cc-sp-2: 4px; --cc-sp-3: 6px; --cc-sp-4: 8px; --cc-sp-5: 12px; --cc-sp-6: 14px; --cc-sp-7: 18px; --cc-sp-8: 24px; /* ---- corner radii ---- The Command Center is square-cornered by design: cards, KPI tiles, buttons, inputs, dialogs and banners all use 0. The sm/md/lg steps are kept (rather than hard-coding 0 everywhere) so the whole system can be re-tuned here. Only two shapes stay round: true pills (chips/badges) and circles (status dots, avatars, spinners, knobs). Never use a px literal. */ --cc-radius-sm: 0; --cc-radius-md: 0; --cc-radius-lg: 0; --cc-radius-pill: 999px; --cc-radius-round: 50%; /* ---- type scale ---- Body/UI sizes (xs..lg) plus display sizes for headings, KPI values, and stat numbers. The display steps replace the hard-coded px literals that were scattered across component CSS (18/20/24/30/44px) — migrate those to these tokens so the typographic rhythm has a single source of truth. */ --cc-fs-2xs: 12px; /* dense telemetry chrome only — the Monitor AMR cards and the fleet-map marker card, where a ~180px card stacks five lines of data */ --cc-fs-xs: 13px; --cc-fs-sm: 14px; --cc-fs-md: 15px; --cc-fs-lg: 17px; --cc-fs-xl: 19px; /* small headings, section titles */ --cc-fs-2xl: 21px; /* card / panel titles */ --cc-fs-3xl: 25px; /* page titles */ --cc-fs-display-sm: 31px; /* stat values */ --cc-fs-display: 45px; /* hero KPI values */ /* ---- elevation ---- Floating-card shadow shared by the login, accept-invite, and legal-document cards — the full-page cards that sit on the topo backdrop. */ --cc-shadow-card: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.14), 0 40px 80px rgba(0, 0, 0, 0.10); /* ---- search-field widths ---- Derived from the placeholder instead of a magic pixel width, so the hint text is never clipped. --cc-search-chrome is everything in the input that isn't the text (start search icon, clear button, and the outlined input's own horizontal padding); the ch part is the longest placeholder the field has to show: --cc-search-w 20ch — "Search Serial Number" (support pages, Dashboard) --cc-search-w-lg 30ch — "Search by name, email, or phone…" (admin filter bars) Always pair with `min-width: min(100%, )` on narrow layouts: the floor keeps the placeholder readable, min() keeps the field from overflowing a container smaller than the floor. */ --cc-search-chrome: 5.5rem; --cc-search-w: calc(20ch + var(--cc-search-chrome)); --cc-search-w-lg: calc(30ch + var(--cc-search-chrome)); /* ---- semantic machine-state colors (single source of truth; mirrored by the C# StateClass()/StatePill() helpers on Dashboard and Monitor's GetStateBorderColor()/GetPanelStateColor(), which return these tokens). One class per meaningful MowerState — see the Online Mowers color spec. ---- */ --cc-state-mowing: var(--cc-success); /* green — Mowing · ReturningHome */ --cc-state-idle: var(--cc-gray-400); /* gray — Idle */ --cc-state-manual: var(--cc-info); /* blue — Manual */ --cc-state-recording: var(--cc-yellow); /* yellow — Recording */ --cc-state-paused: var(--cc-warning); /* amber — Paused · LocalPause */ --cc-state-faulted: var(--cc-danger); /* red — Faulted · Stuck · Busy */ --cc-state-ready: var(--cc-teal); /* teal — Ready · Finished */ --cc-state-cleared: var(--cc-success); /* green — FaultCleared */ --cc-state-updating: var(--cc-indigo); /* indigo — Updating */ --cc-state-offline: var(--cc-header-bg); /* near-black — offline / stale telemetry */ /* ---- frosted overlay surfaces — floating panels that sit ON TOP of a map: the Monitor toolbar / AMR list / connection banner / AMR cards. Deliberately DARK: these float over satellite imagery, where a dark scrim separates the panel from the map far better than a light one, and the light version read as washed out. This is the one place in the app that inverts, so it gets its own foreground set below rather than borrowing the light-surface neutrals — that is what makes the inversion expressible in tokens at all. Light-on-map surfaces that are NOT part of this language (the fleet-map legend, the marker InfoWindow) stay light and use the normal neutrals. ---- */ --cc-glass-surface: rgba(15, 23, 42, 0.55); /* panel scrim */ --cc-glass-surface-strong: rgba(51, 65, 85, 0.85); /* a card sitting on the scrim */ --cc-glass-surface-hover: rgba(71, 85, 105, 0.9); --cc-glass-hairline: rgba(148, 163, 184, 0.2); --cc-glass-border: rgba(148, 163, 184, 0.25); --cc-glass-border-strong: rgba(148, 163, 184, 0.4); --cc-glass-divider: rgba(148, 163, 184, 0.3); --cc-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); --cc-glass-blur: blur(12px); /* foreground + fills for anything sitting ON the glass */ --cc-glass-text-strong: #ffffff; /* serials, titles, primary values */ --cc-glass-text: #e2e8f0; /* body text, icon buttons */ --cc-glass-text-muted: #94a3b8; /* labels, ETAs, placeholders */ --cc-glass-hover: rgba(148, 163, 184, 0.2); --cc-glass-track: rgba(148, 163, 184, 0.2); /* meter / progress track */ --cc-glass-track-subtle: rgba(148, 163, 184, 0.15); --cc-glass-field: rgba(15, 23, 42, 0.5); /* input fill */ --cc-glass-field-border: rgba(148, 163, 184, 0.35); --cc-glass-danger: rgba(127, 29, 29, 0.35); /* faulted card wash */ --cc-glass-ring: rgba(15, 23, 42, 0.9); /* separates a badge from the glass */ /* ---- physical unit identity colors (AccentColor byte over the websocket). A separate dimension from machine state — rendered as an outlined swatch, never a filled state rail. Mirrors CommandCenterTheme.AccentColor(). ---- */ --cc-unit-blue: var(--cc-info); /* byte 98 */ --cc-unit-white: var(--cc-white); /* byte 119 — the true unit color, but the Dashboard swatch renders it --cc-gray-400: white on a white card is invisible */ --cc-unit-magenta: var(--cc-purple); /* byte 112 (RcmAccentPurple) — same #a855f7 */ /* ---- NOAA space-weather scale (EnvironmentStatus) ---- */ --cc-noaa-r5: rgba(200, 0, 0, 0.25); --cc-noaa-r4: rgba(255, 0, 0, 0.25); --cc-noaa-r3: rgba(255, 150, 0, 0.25); --cc-noaa-r2: rgba(255, 200, 0, 0.25); --cc-noaa-r1: rgba(246, 235, 20, 0.25); } /* COMMAND CENTER — CHROME (header / tab bar / drawer / footer / mobile nav). Loaded after cc-tokens.css, before MudBlazor. */ /* MudBlazor reads this for drawer / main offset. We make the appbar logically taller so it includes the tab bar. */ .cc-layout-root, .cc-layout-root .mud-drawer, .cc-layout-root .mud-main-content { --mud-appbar-height: calc(var(--cc-header-h) + var(--cc-tab-bar-h)); } /* Belt-and-suspenders: explicitly position the fixed drawer below header + tab bar AND above the fixed footer. Without the footer offset the bottom user card ends up hidden behind the gray footer bar. */ .cc-drawer.mud-drawer-fixed, .cc-layout-root .mud-drawer-fixed { top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important; height: calc(100dvh - var(--cc-header-h) - var(--cc-tab-bar-h) - var(--cc-footer-h)) !important; } /* The analytics session-events drawer is a full-height detail panel, so it spans the whole viewport height rather than being inset below the header/tab bar chrome. */ .cc-layout-root .mud-drawer.sed-drawer { top: 0 !important; height: 100dvh !important; } /* Same for the main content area — make sure page content starts below the tab bar. */ .cc-layout-root .mud-main-content { padding-top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important; } /* ---------------- ANALYTICS SCOPE (Company / Branch) on the tab bar ---------------- One white rounded panel holding the Company + Branch selects, pushed to the far right of the gray tab bar so it reads clearly. Present only in the analytics context; no layout offset (lives within the existing tab-bar row). */ .cc-tabbar-scope { display: flex; align-items: stretch; align-self: center; /* vertically center in the 52px bar */ margin-left: auto; /* push to the far right */ margin-right: 24px; /* sit under the header notification icon */ height: 36px; background: var(--cc-white); border: 1px solid var(--cc-gray-400); border-radius: var(--cc-radius-md); box-shadow: 0 1px 2px rgba(0,0,0,0.06); overflow: hidden; min-width: 0; } .cc-context-item { display: flex; align-items: center; gap: 6px; padding: 0 12px; min-width: 0; } /* Divider between company + branch (second item onward). */ .cc-context-item + .cc-context-item { border-left: 1px solid var(--cc-border-subtle); } .cc-context-icon { color: var(--cc-medium-gray); font-size: 18px; flex-shrink: 0; } .cc-context-value { font-family: var(--cc-font-medium); font-weight: 700; font-size: 14px; color: var(--cc-black); white-space: nowrap; width: 170px; overflow: hidden; text-overflow: ellipsis; } /* Borderless, dark, compact selects — the panel is the box (no red outline). Fixed width so the dropdown never resizes with the selected value. */ .cc-tabbar-scope .cc-context-select { width: 170px; } /* Strip Mud's default label/underline spacing and vertically center the value in the 36px panel. */ .cc-tabbar-scope .cc-context-select .mud-input-control, .cc-tabbar-scope .cc-context-select .mud-input-slot { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .cc-tabbar-scope .cc-context-select .mud-input-slot { align-items: center; } .cc-tabbar-scope .cc-context-select .mud-select-input, .cc-tabbar-scope .cc-context-select input { color: var(--cc-black) !important; font-family: var(--cc-font-medium); font-weight: 700; font-size: 14px; line-height: 1.2; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-tabbar-scope .cc-context-select .mud-input-adornment .mud-icon-root { color: var(--cc-dark-gray); } /* "Clear filter" reset — appears only when viewing a company other than the user's own. */ .cc-tabbar-scope .cc-context-clear { flex-shrink: 0; padding: 2px; color: var(--cc-medium-gray); } .cc-tabbar-scope .cc-context-clear .mud-icon-root { font-size: 16px; } .cc-tabbar-scope .cc-context-clear:hover { color: var(--cc-red); background: var(--cc-hover-surface); } @keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes cc-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } /* ---------------- HEADER (MudAppBar override) ---------------- */ .cc-header { background-color: var(--cc-header-bg) !important; border-bottom: 1px solid var(--cc-black); color: var(--cc-white) !important; padding: 0 16px !important; height: var(--cc-header-h) !important; min-height: var(--cc-header-h) !important; max-height: var(--cc-header-h) !important; } .cc-header .mud-toolbar { min-height: var(--cc-header-h) !important; height: var(--cc-header-h) !important; } .cc-header-left { display: flex; align-items: center; gap: 16px; min-width: 0; } /* Black-bg variant of the brand mark, so it sits on the dark header without needing a contrast plate. No filter, no shadow. */ .cc-header-logo img { height: 48px; width: auto; display: block; } .cc-header-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.18); flex-shrink: 0; margin: 0 10px; } .cc-header-title { font-family: var(--cc-font-display); font-weight: 800; font-size: 14.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-white); white-space: nowrap; } .cc-header-stats { display: flex; align-items: center; gap: 18px; } .cc-header-stat { display: flex; align-items: center; gap: 7px; font-family: var(--cc-font-medium); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; } .cc-header-stat-dot { width: 8px; height: 8px; border-radius: var(--cc-radius-round); flex-shrink: 0; } .cc-header-stat-dot.online { background: var(--cc-success); box-shadow: 0 0 6px rgba(34,197,94,0.5); animation: cc-pulse 2s infinite; } .cc-header-stat-dot.faulted { background: var(--cc-red); box-shadow: 0 0 6px rgba(var(--cc-red-rgb),0.5); animation: cc-pulse 1.5s infinite; } .cc-header-stat-count { font-weight: 800; color: var(--cc-white); font-family: var(--cc-font-heading); } /* MudIconButton's default Color overrides the parent color rule on the dark header, so we have to reach into the inner icon root explicitly. */ .cc-header-icon-btn, .cc-header-icon-btn .mud-icon-root, .cc-header-icon-btn .mud-icon-button-label { color: rgba(255,255,255,0.85) !important; } .cc-header-icon-btn:hover { background: rgba(255,255,255,0.08) !important; } .cc-header-icon-btn:hover, .cc-header-icon-btn:hover .mud-icon-root, .cc-header-icon-btn:hover .mud-icon-button-label { color: var(--cc-white) !important; } .cc-header-avatar { width: 34px; height: 34px; border-radius: var(--cc-radius-round); display: inline-flex; align-items: center; justify-content: center; font-family: var(--cc-font-heading); font-weight: 800; font-size: 12px; color: var(--cc-white); cursor: pointer; border: 2px solid rgba(255,255,255,0.15); transition: transform 0.15s, border-color 0.15s; user-select: none; } .cc-header-avatar:hover { transform: scale(1.05); border-color: rgba(255,255,255,0.4); } .cc-header-avatar.role-superadmin { background: var(--cc-red); } .cc-header-avatar.role-admin { background: var(--cc-ink-strong); } .cc-header-avatar.role-cs { background: var(--cc-info); } .cc-header-avatar.role-dealer { background: var(--cc-warning); } .cc-header-avatar.role-sales { background: var(--cc-success); } .cc-header-avatar.role-operator { background: var(--cc-dark-gray); } /* ---------------- TAB BAR (Support / Admin contexts) ---------------- Light treatment — sits below the dark header as a clean white strip, with dark text and the brand parallelogram marking the active context. */ .cc-tab-bar { position: fixed; top: var(--cc-header-h); left: 0; right: 0; height: var(--cc-tab-bar-h); background: var(--cc-gray-300); display: flex; align-items: stretch; z-index: 1199; /* above drawer, below dialogs */ padding: 0; border-bottom: 1px solid var(--cc-medium-gray); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .cc-tab { --cc-tab-pad: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 0 var(--cc-tab-pad); font-family: var(--cc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-black); cursor: pointer; border: none; background: transparent; transition: background 0.15s; height: 100%; /* Drop the tab 1px so the active indicator covers (rather than sits above) the tab bar's bottom border — otherwise a thin gray line shows between the red indicator and the drawer top edge. */ margin-bottom: -1px; position: relative; z-index: 1; } .cc-tab:hover { background: var(--cc-white); } /* The active tab keeps the white fill rather than only showing it on hover, so the current section stays legible against the gray tab bar once the pointer moves away — the red indicator alone carried the whole selected state. */ .cc-tab.active { background: var(--cc-white); } /* The indicator: the site's nav parallelogram — a red bar flush with the tab's bottom edge whose ends are slanted by --cc-tab-indicator-skew. Its bottom-left corner sits one skew left of the label so the top edge lines up with the text. Rendered on every tab and faded in on the active one so a context switch animates rather than pops. */ .cc-tab::after { content: ""; position: absolute; left: calc(var(--cc-tab-pad) - var(--cc-tab-indicator-skew)); right: var(--cc-tab-pad); bottom: 0; height: var(--cc-tab-indicator-h); background: var(--cc-red); clip-path: polygon(var(--cc-tab-indicator-skew) 0, 100% 0, calc(100% - var(--cc-tab-indicator-skew)) 100%, 0 100%); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .cc-tab.active::after { opacity: 1; } .cc-tab .mud-icon-root { font-size: 20px !important; color: var(--cc-black) !important; } /* Thin vertical separator placed between context tabs. Centered vertically; inherits the tab bar's height so it scales with --cc-tab-bar-h. */ .cc-tab-divider { align-self: center; width: 1px; height: 22px; background: rgba(0, 0, 0, 0.18); flex: 0 0 auto; } @media (max-width: 599.98px) { .cc-tab { --cc-tab-pad: 12px; font-size: 11px; letter-spacing: 0.06em; } .cc-tab-divider { height: 18px; } } /* ---------------- DRAWER (light) ---------------- */ .cc-drawer { border-right: 1px solid var(--cc-light-gray) !important; } .cc-drawer .mud-drawer-content { background: var(--cc-white); padding: 0; } /* Section eyebrow: left-aligned, small caps, with a hairline above every group but the first so the groups read as blocks instead of a single long list. */ .cc-nav-section-label { font-family: var(--cc-font-medium); font-size: var(--cc-fs-2xs); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-gray-500); padding: var(--cc-sp-7) var(--cc-sp-6) var(--cc-sp-3); margin-top: var(--cc-sp-4); border-top: 1px solid var(--cc-border-subtle); user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-nav-section-label:first-child { margin-top: 0; padding-top: var(--cc-sp-5); border-top: none; } /* Rail-mode stand-in for the section label: a hairline between groups. */ .cc-nav-section-divider { height: 1px; background: var(--cc-border-subtle); margin: var(--cc-sp-4) var(--cc-sp-5); } .cc-nav-section-divider:first-child { display: none; } /* Count badge on the right side of an admin nav link */ .cc-nav-link-content { display: flex; align-items: center; width: 100%; gap: var(--cc-sp-4); } .cc-nav-link-content > .cc-nav-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cc-nav-count { font-family: monospace; font-size: var(--cc-fs-2xs); font-weight: 600; line-height: 1; color: var(--cc-gray-500); background: var(--cc-gray-100); border-radius: var(--cc-radius-pill); padding: var(--cc-sp-2) var(--cc-sp-3); } .cc-drawer .mud-nav-link.rcm-nav-active .cc-nav-count { color: var(--cc-red); background: var(--cc-white); } /* Nav rows. Full-bleed so the active accent bar sits on the drawer edge; the hover state only recolors (no padding shift) so the icon column stays put. The accent bar is an inset box-shadow, not a border, so it never changes the row's box and the label never jumps between rest and active. */ .cc-drawer .mud-nav-link { display: flex !important; align-items: center; width: 100% !important; border-radius: var(--cc-radius-sm) !important; margin: 0 !important; padding: 0 var(--cc-sp-6) !important; box-sizing: border-box !important; min-height: var(--cc-nav-row-h) !important; gap: var(--cc-sp-5); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; color: var(--cc-black) !important; font-family: var(--cc-font-medium); font-weight: 600; font-size: var(--cc-fs-md); line-height: 1.2; text-decoration: none; } .cc-drawer .mud-nav-link .mud-nav-link-text { margin: 0 !important; /* the row's gap spaces icon and label, not Mud's 12px margin */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* The row's 1.2 line-height is tighter than Dinot's descender, and with overflow:hidden (needed for the ellipsis) the clip cut the tail off "p" / "g" / "y" ("Update Channel"). Open the line box up here only; the row's min-height still sets the row, so nothing else moves. */ line-height: 1.5; } .cc-nav-link-content > .cc-nav-link-label { line-height: 1.5; } .cc-drawer .mud-nav-link .mud-nav-link-icon { font-size: var(--cc-nav-icon-size) !important; width: var(--cc-nav-icon-size); height: var(--cc-nav-icon-size); margin: 0 !important; flex-shrink: 0; color: var(--cc-gray-400); transition: color 0.15s ease; } .cc-drawer .mud-nav-link:hover, .cc-drawer .mud-nav-link:focus-visible { background: var(--cc-hover-surface) !important; color: var(--cc-black) !important; box-shadow: inset var(--cc-nav-accent-w) 0 0 var(--cc-gray-300) !important; text-decoration: none; outline: none; } .cc-drawer .mud-nav-link:hover .mud-nav-link-icon, .cc-drawer .mud-nav-link:focus-visible .mud-nav-link-icon { color: var(--cc-black); } .cc-drawer .mud-nav-link.rcm-nav-active { background: var(--cc-brand-tint) !important; color: var(--cc-red) !important; border: none !important; box-shadow: inset var(--cc-nav-accent-w) 0 0 var(--cc-red) !important; } .cc-drawer .mud-nav-link.rcm-nav-active .mud-nav-link-text { color: var(--cc-red) !important; font-weight: 700; } .cc-drawer .mud-nav-link.rcm-nav-active .mud-nav-link-icon { color: var(--cc-red); } /* ---- Icon rail: the Mini-variant drawer collapsed to --cc-drawer-w-mini ---- Labels are gone (NavMenu stops rendering section labels, Mud hides the link text), each row centers its icon, and the user card stacks avatar over the logout button. The per-link tooltips NavMenu already renders take over as the labels. */ .cc-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link { justify-content: center; padding: 0 !important; gap: 0; } .cc-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text { display: none; } .cc-drawer.mud-drawer-mini.mud-drawer--closed .cc-drawer-user { flex-direction: column; gap: var(--cc-sp-3); padding: var(--cc-sp-5) 0; } .cc-drawer.mud-drawer-mini.mud-drawer--closed .cc-drawer-user-info { display: none; } /* NavMenu wrapper: flex column so user card pins to the bottom of the drawer. */ .cc-nav-paper { background: transparent !important; height: 100%; display: flex; flex-direction: column; } .cc-nav-menu-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: var(--cc-sp-5); } /* User card pinned at the bottom of the nav, mockup pattern. The card is the MudMenu activator — clicking it opens a Profile/Log out dropdown that anchors above (so it doesn't get clipped by the bottom of the viewport). */ .cc-drawer-user { padding: var(--cc-sp-5) var(--cc-sp-4); border-top: 1px solid var(--cc-light-gray); display: flex; align-items: center; gap: var(--cc-sp-5); background: var(--cc-white); min-height: 64px; box-sizing: border-box; } .cc-drawer-user-avatar { width: 36px; height: 36px; border-radius: var(--cc-radius-round); display: flex; align-items: center; justify-content: center; font-family: var(--cc-font-heading); font-weight: 800; font-size: var(--cc-fs-2xs); color: var(--cc-white); flex-shrink: 0; background: var(--cc-red); } .cc-drawer-user-avatar.role-superadmin { background: var(--cc-red); } .cc-drawer-user-avatar.role-admin { background: var(--cc-black); } .cc-drawer-user-avatar.role-cs { background: var(--cc-info); } .cc-drawer-user-avatar.role-dealer { background: var(--cc-warning); } .cc-drawer-user-avatar.role-sales { background: var(--cc-success); } .cc-drawer-user-info { flex: 1; min-width: 0; } .cc-drawer-user-name { font-family: var(--cc-font-medium); font-weight: 600; font-size: var(--cc-fs-sm); color: var(--cc-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-drawer-user-role { font-size: var(--cc-fs-2xs); color: var(--cc-gray-500); font-weight: 500; } .cc-drawer-user-logout { color: var(--cc-medium-gray) !important; flex-shrink: 0; } .cc-drawer-user-logout:hover, .cc-drawer-user-logout:focus-visible { color: var(--cc-red) !important; background: rgba(var(--cc-red-rgb), 0.08) !important; } .cc-drawer-user-logout .mud-icon-root { font-size: var(--cc-nav-icon-size) !important; } /* ---------------- FOOTER (mockup-style centered status bar) ---------------- */ .cc-footer { position: fixed; bottom: 0; left: 0; right: 0; height: var(--cc-footer-h); background: var(--cc-light-gray); display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 1100; font-family: var(--cc-font-medium); font-size: 12px; font-weight: 500; color: var(--cc-dark-gray); border-top: 1px solid var(--cc-border); white-space: nowrap; padding: 0 16px; } .cc-footer-sep { color: var(--cc-medium-gray); font-weight: 400; } .cc-footer-link { color: var(--cc-dark-gray); text-decoration: none; font-weight: 600; } .cc-footer-link:hover { color: var(--cc-red); } .cc-footer-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .cc-footer-status-dot { width: 7px; height: 7px; border-radius: var(--cc-radius-round); background: var(--cc-success); box-shadow: 0 0 4px rgba(34,197,94,0.55); animation: cc-pulse 2s infinite; } .cc-footer-status.offline { color: var(--cc-warning-icon); } .cc-footer-status.offline .cc-footer-status-dot { background: var(--cc-warning); box-shadow: 0 0 4px rgba(245,158,11,0.6); } .cc-main { padding-bottom: calc(var(--cc-footer-h) + 8px) !important; } /* ---------------- MOBILE BOTTOM NAV (visible <960px) ---------------- */ @media (max-width: 959.98px) { .cc-footer { display: none; } .cc-main { padding-bottom: calc(var(--cc-bottom-nav-total-h) + var(--cc-sp-4)) !important; } .cc-mobile-nav { display: flex !important; } /* Drop the header hamburger on mobile — the bottom-nav "More" button is the single canonical drawer trigger below this breakpoint. */ .cc-header-drawer-toggle { display: none !important; } .cc-drawer.mud-drawer-fixed, .cc-layout-root .mud-drawer-fixed { height: calc(100dvh - var(--cc-header-h) - var(--cc-tab-bar-h) - var(--cc-bottom-nav-h) - env(safe-area-inset-bottom, 0px)) !important; } } .cc-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; /* Bar height + home-indicator inset, so the icons keep their full 60px whatever the safe area is (border-box would otherwise eat into them). */ height: var(--cc-bottom-nav-total-h); background: var(--cc-white); border-top: 1px solid var(--cc-light-gray); z-index: 1100; align-items: stretch; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom, 0px); } .cc-mobile-nav a, .cc-mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; color: var(--cc-medium-gray); text-decoration: none; font-family: var(--cc-font-medium); font-size: 11px; font-weight: 600; border: none; background: transparent; cursor: pointer; transition: color 0.15s; } .cc-mobile-nav a:hover, .cc-mobile-nav a.active, .cc-mobile-nav button:hover, .cc-mobile-nav button.active { color: var(--cc-red); text-decoration: none; } .cc-mobile-nav .mud-icon-root { font-size: 22px !important; } /* ---------------- MOBILE DRAWER: OVERLAY, NOT PUSH (<960px) ---------------- The drawer is Persistent so it pushes the content column aside — fine on a desktop, but on a ~390px phone it squeezes the page into a sliver. Below the bottom-nav breakpoint we cancel the push and let the drawer float over the page instead, backed by a scrim. It also ends flush against the top of the bottom nav (which replaces the footer at this width) rather than running on behind it. */ /* At >=960px the drawer is a genuine push drawer, so there is nothing to dim. */ .cc-drawer-scrim { display: none; } @media (max-width: 959.98px) { /* Cancel MudBlazor's persistent-drawer offset on the content column. */ .cc-layout-root .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; } /* The closed rail would steal 56px from a phone layout and the bottom nav's "More" button already reopens it, so below this width closed means gone. */ .cc-drawer.mud-drawer-mini.mud-drawer--closed { display: none !important; } /* :not(.sed-drawer) — the analytics session-events panel is full-height by design and keeps the override it gets at the top of this file. */ .cc-drawer.mud-drawer-fixed, .cc-layout-root .mud-drawer-fixed:not(.sed-drawer) { height: calc(100dvh - var(--cc-header-h) - var(--cc-tab-bar-h) - var(--cc-bottom-nav-total-h)) !important; box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18); } /* Spans the content region only — between the tab bar and the bottom nav — so the header and the "More" toggle stay reachable while it's up. */ .cc-drawer-scrim { display: block; position: fixed; top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)); bottom: var(--cc-bottom-nav-total-h); left: 0; right: 0; z-index: 1099; /* under the drawer (1100), over content */ background: var(--cc-scrim); border: 0; padding: 0; cursor: pointer; } } body:has(.mud-overlay) .cc-chat-widget { display: none; } /* ---------------- HEADER RESPONSIVE BEHAVIOR ---------------- */ @media (max-width: 599.98px) { .cc-header-divider, .cc-header-title { display: none; } .cc-header-stats { display: none; } .cc-header { padding: 0 8px !important; } } @media (min-width: 600px) and (max-width: 959.98px) { .cc-header-stats { gap: 12px; } } /* COMMAND CENTER — SHARED COMPONENT STYLES. Loaded after cc-chrome.css. Only rules used by more than one component live here (filter bar, page head, breadcrumbs, auth card shell, data card, pills, admin titles, banners, side drawer, dialogs, row cells, admin-context theme), plus the few single-use rules scoped CSS can't reach (portaled snackbar/popover, Mud roots with no scoped ancestor). Anything used by one component belongs in that component's .razor.css. */ /* ---- Password fields: suppress the browser's own reveal control ---- Every password field in the app (login, PasswordSetFields, reset, NTRIP) ships its own Show/Hide toggle. Edge (and Chromium with the flag on) also injects a native ::-ms-reveal eye once the user starts typing, so two eyes sit side by side. Hide the native one everywhere so only ours renders. */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } /* Keep the search field locked at 38px and align with the rest. */ /* !important to beat the more-specific ".cc-filter-bar .mud-input-control" fixed-width rule below — the search needs room for its full placeholder, while the dropdowns stay at the standard 240px. */ /* Keep the search field locked at 38px and align with the rest. */ /* !important to beat the more-specific ".cc-filter-bar .mud-input-control" fixed-width rule below — the search needs room for its full placeholder, while the dropdowns stay at the standard 240px. */ .cc-filter-search { width: var(--cc-search-w-lg) !important; min-width: min(100%, var(--cc-search-w)) !important; max-width: 100% !important; flex: 0 0 auto !important; } /* min-height, not height: a dense outlined input is 40px naturally (10.5px padding + a 19px text slot + 10.5px), so pinning it to 38px squeezes the slot to 17px and the browser clips the bottom of every descender (g, y, p) against the input's content box. The floor keeps the row aligned without the pinch. */ .cc-filter-search .mud-input-control { min-height: 38px; } /* Phones: take the whole filter-bar row rather than overflowing it, but never drop below the width that fits the placeholder (min-width above). */ @media (max-width: 599.98px) { .cc-filter-search { width: 100% !important; flex: 1 1 100% !important; } } /* Support-page header: title block on the left, a single fixed-size serial search anchored top-right. Used app-wide so every support page's search box sits in the same place and is the same width (--cc-search-w, sized to fit "Search Serial Number") and height (38px). */ .cc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cc-page-head > :first-child { min-width: 0; } /* !important so MudBlazor's own .mud-input-control width can't stretch it back to full width — the Class lands on that same element, equal specificity. */ .cc-page-search { width: var(--cc-search-w) !important; min-width: min(100%, var(--cc-search-w)) !important; max-width: 100% !important; flex: 0 0 auto; } /* min-height for the same descender-clipping reason as .cc-filter-search. */ .cc-page-search .mud-input-control { min-height: 38px; } /* Cohesive white, rounded search field with a brand-red magnifier — the same treatment the Dashboard header filters use, promoted here so every .cc-page-head search reads identically app-wide. */ .cc-page-search .mud-input-control, .cc-page-search.mud-input-control { background: var(--cc-white); border-radius: var(--cc-radius-md); } .cc-page-search .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--cc-radius-md); border-color: var(--cc-light-gray); transition: border-color 0.15s, box-shadow 0.15s; } .cc-page-search .mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border { border-color: var(--cc-medium-gray); } .cc-page-search .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--cc-red) !important; border-width: 1px; box-shadow: 0 0 0 3px rgba(var(--cc-red-rgb), 0.12); } /* !important so Mud's own .mud-default-text on the icon can't win. */ .cc-page-search .mud-input-adornment-start .mud-icon-root { color: var(--cc-red) !important; } @media (max-width: 700px) { /* Full-width on its own row — the min-width floor above still guarantees the placeholder fits if the header row itself is narrower than that. */ .cc-page-search { width: 100% !important; flex: 1 1 100%; } } /* Standard field sizing — filter-bar dropdowns/inputs stay one fixed width so they never grow or shrink with their selected text (applies app-wide to every .cc-filter-bar). */ .cc-filter-bar .mud-select, .cc-filter-bar .mud-input-control { width: 240px; min-width: 240px; max-width: 240px; flex: 0 0 auto; } /* Filters sit on the right, consistent with the page-head search across the app. Wraps gracefully on narrow widths. */ .cc-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; /* Stay anchored as the user scrolls long admin lists. Offset clears the fixed chrome (cc-header-h + cc-tab-bar-h) plus the page's own padding. */ position: sticky; top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)); z-index: 5; background: var(--cc-bg); padding: 8px 4px; } /* Phones: the search above already goes flex: 1 1 100%, so an inline-flex pill group left a full-width row stacked on a right-aligned one (.cc-filter-bar is justify-content: flex-end). Spanning the row and splitting it evenly makes the two line up flush, and widens what were ~60px tap targets. */ @media (max-width: 599.98px) { .cc-status-toggle { display: flex; width: 100%; } .cc-status-toggle-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 var(--cc-sp-2); } } /* Footnote under a KPI tile row (e.g. "Totals reflect all records"). Sits right under the tiles it annotates rather than floating at the parent stack's full gap. Right-aligned on wide layouts where it trails the tile row; on phones the tiles stack into a narrow column and a right-aligned line has nothing to align to, so it joins the page's left gutter with everything else. */ .cc-tile-note { display: block; text-align: right; margin-top: calc(-1 * var(--cc-sp-5)); } @media (max-width: 599.98px) { .cc-tile-note { text-align: left; } } /* ---------------- BREADCRUMBS (admin pages) ---------------- */ .cc-breadcrumbs .mud-breadcrumbs { padding: 0 !important; } .cc-breadcrumbs .mud-breadcrumb-item, .cc-breadcrumbs .mud-breadcrumb-item a { font-family: var(--cc-font-medium); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-medium-gray); text-decoration: none; } .cc-breadcrumbs .mud-breadcrumb-item a:hover { color: var(--cc-red); } .cc-breadcrumbs .mud-breadcrumb-item.mud-disabled, .cc-breadcrumbs .mud-breadcrumb-item.mud-disabled a { color: var(--cc-dark-gray) !important; cursor: default; } .cc-breadcrumbs .mud-breadcrumb-separator { color: var(--cc-medium-gray); margin: 0 6px; } /* ---------------- ACCEPT-INVITE PAGE ---------------- Lives inside OuterLayout's .auth-main scroll region. The page centers the card with margin:auto (scroll-safe — align-items:center would clip the top of a tall card) so the card never spills over the header/footer. */ .cc-accept-page { min-height: 100%; display: flex; padding: var(--cc-sp-6) var(--cc-sp-4); background: transparent; } .cc-accept-card { margin: auto; width: 100%; max-width: 500px; background: var(--cc-white); border-radius: var(--cc-radius-lg); border: 1px solid var(--cc-gray-200); border-top: 3px solid var(--cc-red); overflow: hidden; box-shadow: var(--cc-shadow-card); animation: cc-accept-card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes cc-accept-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .cc-accept-header { display: flex; align-items: center; justify-content: flex-end; background: var(--cc-light-gray); padding: var(--cc-sp-5) var(--cc-sp-8); border-bottom: 1px solid var(--cc-gray-300); } /* Header bar in the login card's dark gray instead of near-black (--cc-header-bg). Opt-in via .cc-accept-card--grayhead (forgot/reset pages) so the accept-invite card keeps its default header. */ .cc-accept-card--grayhead .cc-accept-header { background: rgb(64, 66, 72); justify-content: flex-start; } /* Seamless-fill text input (ForgotPassword email) — mirrors the login field's uniform autofill look, adapted to the light card. MudBlazor renders the leading icon (adornment) as a separate element beside the input slot, so a plain webkit-autofill box-shadow only fills the text half and leaves a two-tone seam. Filling the whole .mud-input container the SAME light gray — whenever the field has a value or is browser-autofilled — makes the icon and text read as one uniform fill. */ .cc-seamless-input .mud-input:has(.mud-input-slot:not(:placeholder-shown)), .cc-seamless-input .mud-input:has(.mud-input-slot:-webkit-autofill) { background-color: var(--cc-light-gray) !important; border-radius: var(--cc-radius-md) !important; } /* Round the visible outlined border to match the login field's corners. !important is required: MudBlazor's own rule for this element is both more specific (3 classes) and loaded after cc-components.css, so it otherwise wins and the corners stay at MudBlazor's tighter ~4px default. */ .cc-seamless-input .mud-input-outlined-border { border-radius: var(--cc-radius-md) !important; /* Dark gray outline matching the card header / login card (rgb(64,66,72)). */ border-color: rgb(64, 66, 72) !important; } /* Keep the same dark-gray outline on hover and focus — MudBlazor would otherwise switch it to the primary red. */ .cc-seamless-input .mud-input:hover .mud-input-outlined-border, .cc-seamless-input .mud-input.mud-input-focused .mud-input-outlined-border { border-color: rgb(64, 66, 72) !important; } /* Match the leading mail icon (start adornment) to the dark-gray outline. */ .cc-seamless-input .mud-input-adornment-start .mud-icon-root { color: rgb(64, 66, 72) !important; fill: rgb(64, 66, 72) !important; } /* Chrome paints the input slot itself on autofill — pin it to the same gray (not the browser's yellow/blue) and keep the text dark so it stays readable. */ .cc-seamless-input .mud-input-slot:-webkit-autofill, .cc-seamless-input .mud-input-slot:-webkit-autofill:hover, .cc-seamless-input .mud-input-slot:-webkit-autofill:focus, .cc-seamless-input .mud-input-slot:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--cc-light-gray) inset; -webkit-text-fill-color: rgba(0, 0, 0, 0.87); caret-color: rgba(0, 0, 0, 0.87); border-radius: var(--cc-radius-md) !important; } /* Card entrance — the exact animation used by Login.razor's .login-card, so navigating onto the forgot-password page matches the login card's feel. (The login keyframes live in Login.razor's scoped CSS and aren't reachable here, so the identical definition is copied verbatim.) */ .cc-accept-card--enter { animation: login-card-in 0.4s ease both; } @keyframes login-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .cc-accept-header-step { font-family: var(--cc-font-heading); font-size: var(--cc-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-dark-gray); text-align: left; display: block; } .cc-accept-title { font-family: var(--cc-font-display); font-size: var(--cc-fs-xl); font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; text-transform: none; color: var(--cc-black); margin: 0; } .cc-accept-card--grayhead .cc-accept-title { color: var(--cc-white); } .cc-accept-body { padding: var(--cc-sp-8); } .cc-accept-context { display: flex; align-items: center; gap: var(--cc-sp-4); padding-bottom: var(--cc-sp-5); } /* The rule under the identity row — a MudDivider rather than a border on .cc-accept-context. .mud-divider sets its own border-color and loads after this file, so the token needs !important to land. */ .cc-accept-divider { border-color: var(--cc-light-gray) !important; margin-bottom: var(--cc-sp-6); } /* Rendered by MudAvatar. Descendant-scoped (0,2,0) so it outranks .mud-avatar's own size/shape/background (0,1,0) — MudBlazor.min.css is linked after this file, so an equal-specificity rule here would lose the tie. The .role-* rules below are already 0,2,0 and win on their own. */ .cc-accept-context .cc-accept-context-avatar { width: 48px; height: 48px; border-radius: var(--cc-radius-round); /*this background element is a fallback for unspecified roles*/ background: var(--cc-red); color: var(--cc-white); display: flex; align-items: center; justify-content: center; font-family: var(--cc-font-heading); font-weight: 800; font-size: var(--cc-fs-lg); flex-shrink: 0; } /* Role colors on Users -> reset password -- subject to change*/ .cc-accept-context-avatar.role-superadmin { background: var(--cc-red); } .cc-accept-context-avatar.role-admin { background: var(--cc-black); } .cc-accept-context-avatar.role-cs { background: var(--cc-info); } .cc-accept-context-avatar.role-sales { background: var(--cc-success); } .cc-accept-context-avatar.role-operator { background: var(--cc-dark-gray); } .cc-accept-context-avatar.role-dealer { background: var(--cc-warning); } .cc-accept-context--compact .cc-accept-context-avatar { width: 36px; height: 36px; border-radius: 0; font-size: var(--cc-fs-sm); } .cc-accept-context-lead { margin: 0; font-size: var(--cc-fs-md); color: var(--cc-black); } .cc-accept-context-lead strong { font-weight: 700; } .cc-accept-context-text { flex: 1; min-width: 0; } .cc-accept-context-name { font-family: var(--cc-font-display); font-weight: 800; font-size: var(--cc-fs-lg); color: var(--cc-black); line-height: 1.2; } .cc-accept-context-meta { font-size: var(--cc-fs-sm); color: var(--cc-dark-gray); margin-top: 2px; word-break: break-word; } .cc-accept-context-meta strong { color: var(--cc-dark-gray); font-weight: 700; } .cc-accept-intro { font-size: var(--cc-fs-sm); color: var(--cc-black); line-height: 1.55; margin: 0 0 var(--cc-sp-7) 0; } .cc-accept-state { text-align: center; padding: var(--cc-sp-5) var(--cc-sp-2) var(--cc-sp-2); } .cc-accept-state-icon { width: 56px; height: 56px; border-radius: var(--cc-radius-round); margin: 0 auto var(--cc-sp-6); display: flex; align-items: center; justify-content: center; } .cc-accept-state-icon.success { background: rgba(34,197,94,0.12); color: var(--cc-success-text); } .cc-accept-state-icon.error { background: rgba(var(--cc-red-rgb),0.10); color: var(--cc-danger-text); } .cc-accept-state-icon .mud-icon-root { font-size: 32px !important; } .cc-accept-state-title { font-family: var(--cc-font-display); font-size: 20px; font-weight: 800; margin: 0 0 var(--cc-sp-3) 0; } .cc-accept-state-text { font-size: var(--cc-fs-sm); color: var(--cc-dark-gray); line-height: 1.55; margin: 0; } .cc-accept-support { margin-top: var(--cc-sp-7); padding-top: var(--cc-sp-5); border-top: 1px solid var(--cc-light-gray); font-size: var(--cc-fs-sm); color: var(--cc-dark-gray); text-align: center; } .cc-accept-support a { color: var(--cc-red); font-weight: 700; text-decoration: none; } .cc-accept-support a:hover { color: var(--cc-red-hover); text-decoration: underline; } /* ---- Password entry (new-password + confirm) ---- */ .cc-pw-form { display: flex; flex-direction: column; gap: var(--cc-sp-8); } /* Brand CTA — used on accept-invite and any future high-emphasis form submission. Override MudButton's defaults via the Class= prop. */ .cc-cta-button.mud-button-filled { background: linear-gradient(180deg, var(--cc-red), var(--cc-red-hover)) !important; color: var(--cc-white) !important; height: 42px !important; border-radius: var(--cc-radius-lg) !important; font-family: var(--cc-font-heading) !important; font-size: var(--cc-fs-lg) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: none !important; padding: 0 24px !important; box-shadow: 0 8px 20px rgba(var(--cc-red-rgb), 0.28) !important; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important; border: none !important; } /* Brand inversion (see BUTTON GRAMMAR): the red CTA goes black on hover. */ .cc-cta-button.mud-button-filled:hover { transform: translateY(-1px); background: var(--cc-black) !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26) !important; } .cc-cta-button.mud-button-filled:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--cc-red-rgb), 0.30) !important; } .cc-cta-button.mud-button-filled:disabled { background: var(--cc-light-gray) !important; color: var(--cc-dark-gray) !important; box-shadow: none !important; transform: none !important; cursor: not-allowed; } .cc-cta-button .mud-button-icon-start { margin-right: 10px; } .cc-cta-button .mud-icon-root { font-size: 20px !important; } @media (prefers-reduced-motion: reduce) { .cc-accept-card { animation: none; } .cc-cta-button.mud-button-filled { transition: none !important; } .cc-cta-button.mud-button-filled:hover { transform: none; } } /* ---------------- KPI TILE (admin dashboard hero cards) ---------------- White card · 2px black border · red value · subtle red top-edge accent on hover. Whole tile is a clickable surface that navigates into the section. */ .cc-kpi-tile { background: var(--cc-white); border: 2px solid var(--cc-black); border-radius: var(--cc-radius-lg); padding: 22px 24px; height: 100%; min-height: 130px; /* Top-anchored so the value row lines up across tiles whether or not a sub line is present (space-between would sink sub-less values). */ display: flex; flex-direction: column; justify-content: flex-start; color: var(--cc-black); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .cc-kpi-tile-label { display: flex; align-items: center; gap: 8px; color: var(--cc-dark-gray); font-family: var(--cc-font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .cc-kpi-tile-value { font-family: var(--cc-font-heading); font-size: 45px; font-weight: 800; color: var(--cc-red); line-height: 1; font-feature-settings: 'tnum'; letter-spacing: -0.025em; /* The site's stat-card motif: a 2px brand rule separating caption and value. --cc-kpi-rule lets a status tile (is-good / is-warn / is-bad) recolor the rule to match its border instead of showing red under a green value. */ margin-top: var(--cc-sp-5); padding-top: var(--cc-sp-4); border-top: 2px solid var(--cc-kpi-rule, var(--cc-red)); } /* Sticky table header — used on long lists. The MudTable adds its own header background on FixedHeader, but the inner data-card border-radius masks it. Force the header to sit above and inherit the card surface. */ .cc-data-card .mud-table-container .mud-table-head, .cc-grid .mud-table-container .mud-table-head { background: var(--cc-white); } /* ---------------- DATA TABLE CARD (titled card with restyled MudTable) ---------------- */ .cc-data-card { background: var(--cc-white); border: 1px solid var(--cc-light-gray); border-radius: var(--cc-radius-lg); overflow: hidden; } .cc-data-card-header { padding: 14px 20px; font-family: var(--cc-font-heading); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-black); border-bottom: 2px solid var(--cc-black); display: flex; align-items: center; gap: 12px; } .cc-data-card-header-spacer { flex: 1; } /* Data-grid restyle inside the card (and in .cc-grid, a CcDataGrid with Card="false") — small uppercase headers, more breathing room */ .cc-data-card .mud-table-container, .cc-grid .mud-table-container { background: var(--cc-white); } .cc-data-card .mud-table-head th, .cc-grid .mud-table-head th { font-family: var(--cc-font-heading) !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-black) !important; background: var(--cc-white) !important; border-bottom: 2px solid var(--cc-light-gray) !important; padding: 14px 18px !important; } .cc-data-card .mud-table-row td, .cc-grid .mud-table-row td { padding: 14px 18px !important; border-bottom: 1px solid var(--cc-light-gray); font-size: 14.5px; color: var(--cc-black); } .cc-data-card .mud-table-row:last-child td, .cc-grid .mud-table-row:last-child td { border-bottom: none; } .cc-data-card .mud-table-cell-mono, .cc-grid .mud-table-cell-mono { font-family: monospace; font-size: 13px; } /* Laptop-width breathing room for WIDE admin tables. The 18px side padding above is a design choice and stays at desktop widths, but it is charged per column: the Users table has eight, so 288px of a 1366px laptop screen — minus the nav drawer — is padding before a single character of data is drawn. That is what makes these tables feel cramped in the 600–1440px band, where MudTable is still a real table (it only flips to stacked cards below Breakpoint.Sm = 600px) but has nowhere near desktop room. Trimming the sides gives roughly 100px back across an eight-column table, which is the difference between columns that fit and columns that wrap. The vertical padding is untouched, so row height and rhythm are unchanged. Scoped to .cc-admin-context so this affects the wide admin/analytics tables that have the problem and leaves narrower data cards elsewhere alone. */ @media (min-width: 600px) and (max-width: 1439.98px) { .cc-admin-context .cc-data-card .mud-table-head th, .cc-admin-context .cc-data-card .mud-table-row td { padding-left: 12px !important; padding-right: 12px !important; } } /* ---- Phones: red divider between records in a MudTable's stacked list ---- Below its Breakpoint, MudTable drops the header and stacks each cell as its own "Label Value" line (root gets .mud-xs/sm/md-table; see MudBlazor.min.css). Every cell then carries the same faint 1px line, so one record is impossible to tell from the next. Drop the per-cell lines and put a red rule under the LAST cell of each row — that line now means "end of this record". Gated on the stacked-mode class so a real (non-collapsed) table is untouched; at this width every declared breakpoint is collapsed, hence all three. !important because cc-components.css is linked before MudBlazor's own CSS. */ @media (max-width: 599.98px) { .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell, .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell, .mud-md-table .mud-table-body .mud-table-row .mud-table-cell { border-bottom: none !important; } .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child, .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:last-child, .mud-md-table .mud-table-body .mud-table-row .mud-table-cell:last-child { border-bottom: 2px solid var(--cc-medium-gray) !important; padding-bottom: var(--cc-sp-6) !important; } /* Card edge / pagination already closes the list — no trailing rule. */ .mud-xs-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child, .mud-sm-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child, .mud-md-table .mud-table-body .mud-table-row:last-child .mud-table-cell:last-child { border-bottom: none !important; } } /* ---------------- STATUS / TYPE PILLS ---------------- */ .cc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--cc-radius-sm); font-family: var(--cc-font-heading); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; white-space: nowrap; } .cc-pill.tone-critical { background: rgba(var(--cc-red-rgb), 0.10); color: var(--cc-danger-text); } .cc-pill.tone-eol { background: rgba(var(--cc-red-rgb), 0.10); color: var(--cc-danger-text); } .cc-pill.tone-success { background: rgba(34, 197, 94, 0.16); color: var(--cc-success-text); } .cc-pill.tone-info { background: rgba(59, 130, 246, 0.10); color: var(--cc-info-text); } .cc-pill.tone-warning { background: rgba(245, 158, 11, 0.18); color: var(--cc-warning-text); } .cc-pill.tone-neutral { background: var(--cc-light-gray); color: var(--cc-dark-gray); } .cc-pill.tone-yellow { background: rgba(234, 179, 8, 0.18); color: var(--cc-yellow-text); } .cc-pill.tone-teal { background: rgba(20, 184, 166, 0.16); color: var(--cc-teal-text); } .cc-pill.tone-indigo { background: rgba(99, 102, 241, 0.16); color: var(--cc-indigo-text); } /* ---------------- ADMIN PAGE TITLES & STRUCTURE ---------------- */ /* Mirrors the Data_Analytics typographic system: industrial-uppercase H1-H6 with tracked letterforms. !important defeats the inline letter-spacing left over from the original mixed-case design without having to edit every page. */ .cc-admin-page-title { text-transform: uppercase !important; letter-spacing: 0.04em !important; font-family: var(--cc-font-display) !important; } /* Subtitle under the page title — unified treatment so every page reads with the same density and color, replacing scattered inline styles. */ .cc-admin-page-subtitle { color: var(--cc-dark-gray) !important; font-size: 15px !important; line-height: 1.5 !important; margin-top: 2px !important; } /* Small uppercase eyebrow label — Data_Analytics's .pc-toolbar-label pattern. Used above content groups (KPI grid, etc.) to give the page report-like structure without taking real estate. */ .cc-admin-eyebrow { font-family: var(--cc-font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--cc-medium-gray); margin-bottom: -4px; } /* Generic admin panel (dashboard activity feed / quick actions). The site's stat-card outline — white with a 1px near-black border, square — so the panels sit in the same family as the black-framed KPI tiles. The former red left rail is gone: the brand red is reserved for the KPI value rule, the redline eyebrows and interactive accents, not card chrome. */ .cc-admin-panel { position: relative; background: var(--cc-white); border: 1px solid var(--cc-header-bg); border-radius: var(--cc-radius-lg); padding: 20px 24px; overflow: hidden; /* Fill the MudGrid item: the grid already stretches its items to the tallest in the row, so this is what makes the quick-actions panel match the activity feed's height instead of stopping at its content. */ height: 100%; } /* Drawer / side-form title block — standardized across BranchForm, CompanyForm, InviteUserForm, MachineTransferForm, RoleForm so every drawer opens with the same uppercase-tracked heading and muted subtitle. */ .cc-drawer-title { font-family: var(--cc-font-display) !important; font-size: 19px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--cc-black) !important; line-height: 1.2 !important; } /* Banners inside dialogs (info / warning / success) */ .cc-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--cc-radius-md); font-size: 14px; line-height: 1.5; } .cc-banner .mud-icon-root { font-size: 18px !important; flex-shrink: 0; margin-top: 1px; } .cc-banner.warn { background: var(--cc-warning-wash); color: var(--cc-warning-text); } .cc-banner.warn .mud-icon-root { color: var(--cc-warning-icon); } .cc-banner.success { background: var(--cc-success-wash); color: var(--cc-success-text); } .cc-banner.success .mud-icon-root { color: var(--cc-success); } .cc-banner.brand { background: var(--cc-red-tint); color: var(--cc-red-deep); border-left: 3px solid var(--cc-red); } .cc-banner.brand .mud-icon-root { color: var(--cc-red); } /* Branded "action needed" notification. Applied to a single snackbar via SnackbarOptions.SnackbarTypeClass so app-wide toasts are unaffected: a white card with a Command Center red accent stripe, dark icon/text, and a charcoal action. */ .mud-snackbar.cc-snackbar-notice { background: var(--cc-white) !important; color: var(--cc-black) !important; border-left: 3px solid var(--cc-red); border-radius: 0; /* docked flush to the window corner */ margin: 0 !important; animation: cc-snackbar-slide-in-right 0.35s cubic-bezier(0.16, 1, 0.3, 1); } /* Dock this notice flush to the top-right window corner (no gap) and slide it in from the right. :has scopes the container move to when the notice is present, so every other toast keeps its configured position. */ #mud-snackbar-container:has(.cc-snackbar-notice) { top: calc(var(--cc-header-h) + var(--cc-tab-bar-h)) !important; /* flush under the top chrome */ right: 0 !important; left: auto !important; bottom: auto !important; padding: 0 !important; } @keyframes cc-snackbar-slide-in-right { from { transform: translateX(110%); } to { transform: translateX(0); } } /* Leading clipboard icon + message: dark on the white surface. */ .cc-snackbar-notice .mud-snackbar-icon, .cc-snackbar-notice .mud-snackbar-icon .mud-icon-root { color: var(--cc-black); opacity: 1; } .cc-snackbar-notice .mud-snackbar-content-message { color: var(--cc-black); } /* ASSIGN action — filled charcoal with white label. */ .cc-snackbar-notice .mud-snackbar-content-action .mud-button-filled { background-color: var(--cc-dark-gray) !important; color: var(--cc-white) !important; font-weight: 700; border-radius: var(--cc-radius-sm); } /* Close (X) — dark on the white surface. */ .cc-snackbar-notice .mud-snackbar-content-action .mud-icon-button, .cc-snackbar-notice .mud-snackbar-content-action .mud-icon-button .mud-icon-root { color: var(--cc-black) !important; } /* Subtle inline kind tag used inside MudSelect dropdown rows so a Dealer-Kind Company is distinguishable from a Customer at a glance. Customer rows show no tag (it's the default); only Dealer rows are marked. */ .cc-kind-tag { font-family: var(--cc-font-display); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 9px; border-radius: var(--cc-radius-sm); line-height: 1.4; } .cc-kind-tag.dealer { color: var(--cc-white); background: var(--cc-black); } .cc-kind-tag.draft { color: var(--cc-dark-gray); background: var(--cc-light-gray); } /* Form-section eyebrow. Carries the site's "redline" — a 2px brand rule on the leading edge of an uppercase label (same declarations as .cc-redline). */ .cc-section-eyebrow { font-family: var(--cc-font-heading); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; color: var(--cc-dark-gray); border-left: 2px solid var(--cc-red); padding-left: var(--cc-sp-4); } /* ---------------- SIDE-DRAWER FORM SHELL ---------------- */ /* Used inside to host a multi-section form with a fixed header + scrollable body + fixed footer. */ .cc-side-drawer .mud-drawer-content { padding: 0; height: 100%; display: flex; flex-direction: column; } .cc-side-form { display: flex; flex-direction: column; height: 100%; min-height: 100%; } .cc-side-form-header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-top: 3px solid var(--cc-red); border-bottom: 1px solid var(--cc-light-gray); flex-shrink: 0; } /* Side-drawer titles render in caps + brand display font for a stronger visual anchor at the top of the form. Applies to every cc-side-form drawer (Invite User, Add Customer/Dealer, Add Branch, Transfer AMR, Create Role). */ .cc-side-form-header .mud-typography-h6 { font-family: var(--cc-font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; } .cc-side-form-body { padding: 18px 24px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; } .cc-side-form-footer { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--cc-light-gray); background: var(--cc-white); flex-shrink: 0; } /* ---------------- BRANDED DIALOG ---------------- */ /* Applied to to match the side-drawer chrome: 3px red top accent, DinotBold uppercase title. Sized to feel substantial on desktop without going so wide that simple confirmations look bloated. */ .cc-dialog { border-top: 3px solid var(--cc-red); border-radius: var(--cc-radius-md); overflow: hidden; } /* !important on every padding/gap below is load-bearing, not defensive. MudBlazor styles these with `.mud-dialog .mud-dialog-title` etc. — the same 0,2,0 specificity as `.cc-dialog .mud-dialog-*` — and MudBlazor.min.css is linked AFTER cc-components.css in App.razor, so it wins every tie. Drop the !important and these rules silently stop applying. */ .cc-dialog .mud-dialog-title { padding: 24px 32px 12px !important; } .cc-dialog .mud-dialog-title, .cc-dialog .mud-dialog-title .mud-typography-h6 { font-family: var(--cc-font-heading) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 21px; } .cc-dialog .mud-dialog-content { padding: 4px 32px 16px !important; } .cc-dialog .mud-dialog-actions { padding: 24px 48px 32px; gap: 16px; } /* Mobile: tighter padding so the dialog doesn't push content past the fold. */ @media (max-width: 599.98px) { .cc-dialog .mud-dialog-title { padding: 16px 20px 8px !important; } .cc-dialog .mud-dialog-content { padding: 4px 20px 12px !important; } .cc-dialog .mud-dialog-actions { padding: 10px 20px 14px !important; } } /* ---------------- ACCENT DIALOG ---------------- Opt-in modifier for the reset-password mockup: hard-squared corners, a light-gray step band instead of a title bar, 24px body. Used only by UserPasswordDialog — the other .cc-dialog modals keep the standard title bar. These rules MUST come after the .cc-dialog block above: both are 0,2,0 with !important, so source order is what makes the accent variant win. */ .cc-dialog-accent { border-radius: 0 !important; border: 1px solid var(--cc-gray-200); } .cc-dialog-accent .mud-dialog-title { display: flex; align-items: center; justify-content: flex-start; background: var(--cc-light-gray); border-bottom: 1px solid var(--cc-gray-300); padding: var(--cc-sp-5) var(--cc-sp-8) !important; } /* Close sits hard right in the step band (margin-left:auto against the flex-start title) and is sized/colored to the step text, so it reads as the end of that label row rather than a control floating above it. Mud's own .mud-icon-button padding and .mud-icon-size-* are what make it taller than the text — these selectors outrank both without needing !important. */ .cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close { margin-left: auto; padding: 0; /* The band's height is max(step-text line box, button box). Pinning the box to the step text's own font size takes the button out of that contest for good, and overflow:visible lets the glyph below render larger than its box — so the icon can be resized freely without ever growing the band. */ width: var(--cc-fs-xs); height: var(--cc-fs-xs); display: inline-flex; align-items: center; justify-content: center; overflow: visible; color: var(--cc-dark-gray); background-color: transparent; } .cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close:hover { color: var(--cc-black); background-color: transparent; } /* Glyph size is the one knob to turn — it overflows the fixed box above rather than expanding it. Zeroing the margin keeps it flush to the band's right edge, since Mud gives icons inside buttons a trailing margin. */ .cc-dialog-accent .mud-dialog-title .cc-dialog-accent-close .mud-icon-root { font-size: var(--cc-fs-lg); width: 1em; height: 1em; margin: 0; } /* MudBlazor also puts `margin: 8px 0` on .mud-dialog-content; zero it so the body inset is exactly the card's 24px, matching .cc-accept-body. */ .cc-dialog-accent .mud-dialog-content { padding: var(--cc-sp-8) !important; margin: 0 !important; } /* The action footer. .cc-dialog's own rule insets actions 48px, but the accent variant runs a 24px body, so realign or the buttons sit proud of the form above them. Later in the file than the .cc-dialog rule, which is what lets an equal-specificity selector win — see the note at the top of this section. */ .cc-dialog-accent .mud-dialog-actions { padding: var(--cc-sp-2) var(--cc-sp-8) var(--cc-sp-6) !important; gap: var(--cc-sp-3); } .cc-dialog-accent .mud-dialog-actions .mud-button-root { height: 52px; border-radius: 0; font-family: "DinotBold", "Klavika", sans-serif; font-size: var(--cc-fs-sm); letter-spacing: 0.06em; } .cc-dialog-accent .mud-dialog-actions .mud-button-outlined { flex: 1; border: 2px solid var(--cc-black); color: var(--cc-black); background: var(--cc-white); } /* Brand inversion (see BUTTON GRAMMAR): outline fills black, red fill goes black. */ .cc-dialog-accent .mud-dialog-actions .mud-button-outlined:hover { background: var(--cc-black); color: var(--cc-white); } .cc-dialog-accent .mud-dialog-actions .mud-button-filled { flex: 2; background: var(--cc-red); color: var(--cc-white); } .cc-dialog-accent .mud-dialog-actions .mud-button-filled:hover { background: var(--cc-black); } .cc-dialog-accent .mud-dialog-actions .mud-button-filled:disabled { background: var(--cc-medium-gray); color: var(--cc-white); } @media (max-width: 599.98px) { .cc-dialog-accent .mud-dialog-title { padding: var(--cc-sp-4) var(--cc-sp-5) !important; } .cc-dialog-accent .mud-dialog-content { padding: var(--cc-sp-5) !important; } .cc-dialog-accent .mud-dialog-actions { padding: var(--cc-sp-2) var(--cc-sp-5) var(--cc-sp-5) !important; } } /* ---------------- IN-COLUMN FILTER TRIGGER ---------------- */ /* Used in MudTh inside MudTable header to act as both the column label and the filter activator. Sits unobtrusively next to the column title with a small filter glyph that lights up red when a filter is applied. */ .cc-col-filter-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px 6px; margin: -4px -6px; border-radius: var(--cc-radius-md); font: inherit; color: inherit; cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s; } .cc-col-filter-btn:hover { background: var(--cc-bg); } .cc-col-filter-btn .mud-icon-root { color: var(--cc-medium-gray); transition: color 0.15s; } .cc-col-filter-btn:hover .mud-icon-root { color: var(--cc-black); } .cc-col-filter-btn.active { color: var(--cc-red); } .cc-col-filter-btn.active .mud-icon-root { color: var(--cc-red); } /* Popover that lists every customer assigned to a dealer. Headed with a small DinotBold count, each row showing the same colored initial bubble for continuity with the stack on the row itself. */ .cc-customer-popover { min-width: 280px; max-width: 380px; padding: 4px 0; } /* ---------------- LAST MODIFIED CELL ---------------- */ /* Two-line audit cell: primary relative-time label on top, with the modifier's colored initial bubble + name as the secondary line. Full timestamp lives in a title-tooltip on the wrapping div for precision. */ .cc-modified-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .cc-modified-when { font-weight: 600; font-size: 14px; color: var(--cc-black); } .cc-modified-by { font-size: 13px; color: var(--cc-medium-gray); } .cc-modified-by-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* ---------------- ROW ACTIONS ---------------- */ /* Per-row action cluster used in MudTable. Groups icon buttons with explicit spacing and inserts a thin vertical rule before the destructive action so Delete reads as separate from Edit / Reset password. */ .cc-row-actions { display: inline-flex; align-items: center; gap: 2px; } .cc-row-actions-divider { display: inline-block; width: 1px; height: 18px; background: var(--cc-light-gray); margin: 0 6px; } /* Minimal row-action icon button — neutral at rest, brand-red on hover. The Class lands on the MudIconButton root (admin AMR grid, NTRIP settings grid). */ .cc-row-actions .cc-row-action-btn, .cc-row-actions .cc-row-action-btn .mud-icon-root { color: var(--cc-dark-gray) !important; } .cc-row-actions .cc-row-action-btn:hover { background: rgba(var(--cc-red-rgb), 0.08) !important; } .cc-row-actions .cc-row-action-btn:hover, .cc-row-actions .cc-row-action-btn:hover .mud-icon-root { color: var(--cc-red) !important; } /* Mobile: side drawer takes the full viewport, form padding is tighter, and any in-form MudStack Row wraps so two-column layouts (Country+Phone, City+State+ZIP, First+Last) stack vertically when there's no room. */ @media (max-width: 599.98px) { .cc-side-drawer .mud-drawer-fixed, .cc-side-drawer.mud-drawer-fixed { width: 100vw !important; max-width: 100vw !important; } .cc-side-form-header { padding: 14px 16px 12px; } .cc-side-form-body { padding: 14px 16px; } .cc-side-form-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 16px; } .cc-side-form-footer .mud-spacer { display: none; } .cc-side-form-footer .mud-button-root { width: 100%; margin: 0 !important; } .cc-side-form-body .mud-stack-row { flex-wrap: wrap; } /* Anything inside a wrapping form row should grow to the full line on mobile, except for inputs that explicitly opt out via the cc-keep-row class. */ .cc-side-form-body .mud-stack-row > .mud-input-control, .cc-side-form-body .mud-stack-row > .mud-input-helper-text, .cc-side-form-body .mud-stack-row > .mud-input, .cc-side-form-body .mud-stack-row > .mud-form-control { min-width: 100%; } } .cc-dealer-hero { display: flex; flex-direction: column; gap: 14px; } /* ============================================================================ RC MOWERS DESIGN LANGUAGE — Admin surface only (scoped to .cc-admin-context) Ported from Data_Analytics so the Admin module shares the RC Mowers brand tokens, typography rhythm, and MudBlazor component overrides without disturbing the Support surface. ============================================================================ */ .cc-admin-context { --rcm-white: var(--cc-white); --rcm-light-gray: var(--cc-light-gray); --rcm-red: var(--cc-red); --rcm-red-dark: var(--cc-red-hover); --rcm-black: var(--cc-black); --rcm-medium-gray: var(--cc-medium-gray); --rcm-dark-gray: var(--cc-dark-gray); --rcm-font-header: "Klavika", "DinotBold", Arial, sans-serif; --rcm-font-body: "Dinot", "DinotMedium", Arial, sans-serif; --rcm-shadow-soft: 0 2px 10px rgba(0,0,0,0.10); --rcm-shadow: 0 6px 20px rgba(0,0,0,0.12); --rcm-border: rgba(0,0,0,0.08); } /* ---- Typography rhythm: uppercase headers with brand letter-spacing ---- */ .cc-admin-context h1, .cc-admin-context h2, .cc-admin-context h3, .cc-admin-context h4, .cc-admin-context h5, .cc-admin-context h6, .cc-admin-context .mud-typography-h1, .cc-admin-context .mud-typography-h2, .cc-admin-context .mud-typography-h3, .cc-admin-context .mud-typography-h4, .cc-admin-context .mud-typography-h5, .cc-admin-context .mud-typography-h6 { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rcm-black); } .cc-admin-context .mud-typography-subtitle1, .cc-admin-context .mud-typography-subtitle2 { font-family: var(--rcm-font-body); letter-spacing: 0.01em; } .cc-admin-context .mud-typography-overline { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.1em; } .cc-admin-context .mud-button, .cc-admin-context .mud-button-root { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } /* ---- MudBlazor component overrides (admin only) ---- */ /* Tables — uppercase tracked headers, brand hover */ .cc-admin-context .mud-table-head { background-color: var(--rcm-light-gray); } .cc-admin-context .mud-table-head th, .cc-admin-context .mud-th { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--rcm-black); } .cc-admin-context .mud-table-row:hover { background-color: var(--rcm-light-gray) !important; } /* Tabs — red active indicator + uppercase labels */ .cc-admin-context .mud-tabs-header { border-bottom: 2px solid var(--rcm-light-gray); } .cc-admin-context .mud-tab { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rcm-black); } .cc-admin-context .mud-tab.mud-tab-active { color: var(--rcm-red) !important; } .cc-admin-context .mud-tab-slider { background-color: var(--rcm-red) !important; } /* Chips — uppercase, brand-color filled variants */ .cc-admin-context .mud-chip { font-family: var(--rcm-font-header); text-transform: uppercase; letter-spacing: 0.03em; } .cc-admin-context .mud-chip.mud-chip-filled.mud-chip-color-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-chip.mud-chip-filled.mud-chip-color-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; } /* Filled buttons — black primary / red secondary, white labels. Hover is the brand inversion (see BUTTON GRAMMAR): black goes red, red goes black. */ .cc-admin-context .mud-button-filled.mud-button-filled-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-button-filled.mud-button-filled-primary:not(:disabled):hover { background-color: var(--rcm-red) !important; } .cc-admin-context .mud-button-filled.mud-button-filled-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-button-filled.mud-button-filled-secondary:not(:disabled):hover { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; } /* Inputs — red focus underline + outline matches brand */ .cc-admin-context .mud-input:focus-within { border-color: var(--rcm-red) !important; } .cc-admin-context .mud-input-underline:after { border-bottom-color: var(--rcm-red) !important; } /* Snackbar — red left rail, square corners */ .cc-admin-context ~ .mud-snackbar-provider .mud-snackbar, .cc-admin-context .mud-snackbar { border-left: 4px solid var(--rcm-red) !important; background: var(--rcm-white) !important; color: var(--rcm-black) !important; max-width: 620px !important; min-height: 56px !important; padding: 14px 16px !important; } /* Date picker — red header toolbar */ .cc-admin-context .mud-picker-toolbar { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-picker-toolbar *, .cc-admin-context .mud-picker-toolbar .mud-typography, .cc-admin-context .mud-picker-toolbar button { color: var(--rcm-white) !important; } .cc-admin-context .mud-picker-calendar-day.mud-selected, .cc-admin-context .mud-picker-calendar-day.mud-range-start, .cc-admin-context .mud-picker-calendar-day.mud-range-end { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; } /* Linear progress accent */ .cc-admin-context .mud-progress-linear-color-secondary .mud-progress-linear-bar { background-color: var(--rcm-red); } /* Divider tone */ .cc-admin-context .mud-divider { border-color: var(--rcm-light-gray) !important; } /* ---- Utility classes ported from Data_Analytics ---- */ .cc-admin-context .rcm-filter-toolbar { background: var(--rcm-white); border: 1px solid var(--rcm-border); border-radius: var(--cc-radius-md); padding: 12px 16px; margin-bottom: 12px; } .cc-admin-context .filter-toggle-group { border-radius: var(--cc-radius-md) !important; } .cc-admin-context .filter-toggle-group .mud-toggle-item { min-height: 40px !important; padding: 0 18px !important; font-size: calc(0.95rem + 1px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-primary { background-color: var(--rcm-black) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-primary * { color: var(--rcm-white) !important; } .cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-secondary { background-color: var(--rcm-red) !important; color: var(--rcm-white) !important; } .cc-admin-context .mud-toggle-item.mud-toggle-item-selected.mud-secondary * { color: var(--rcm-white) !important; } .cc-admin-context .filter-select-fixed { min-width: 250px; max-width: 250px; } .cc-admin-context .rcm-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 32px; border: 1px dashed var(--rcm-medium-gray); border-radius: var(--cc-radius-md); background: rgba(0,0,0,0.015); } .cc-admin-context .rcm-empty-state-icon { width: 56px; height: 56px; background: var(--rcm-black); color: var(--rcm-white); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: var(--cc-radius-md); } .cc-admin-context .rcm-empty-state-title { font-family: var(--rcm-font-header); font-size: calc(1rem + 1px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rcm-black); } .cc-admin-context .rcm-empty-state-desc { font-size: calc(0.85rem + 1px); color: var(--rcm-dark-gray); max-width: 360px; line-height: 1.5; } /* Mini-KPI helper utilities (subtle, neutral-only by default — no red rails) */ .cc-admin-context .mini-kpi { border-radius: var(--cc-radius-md); border: 1px solid var(--rcm-border); background: var(--rcm-white); box-shadow: var(--rcm-shadow-soft); } .cc-admin-context .mini-kpi-black { border-left: 4px solid var(--rcm-black); } .cc-admin-context .mini-kpi-darkgray { border-left: 4px solid var(--rcm-dark-gray); } .cc-admin-context .mini-kpi-medgray { border-left: 4px solid var(--rcm-medium-gray); } /* The old vertical .cc-pwd-checklist lived here. Both password forms now embed Components/Shared/PasswordSetFields.razor, whose .cc-pw-* field-group rules live in its scoped PasswordSetFields.razor.css; only .cc-pw-form (the wrapper each form renders itself) stays global, above. */ /* ----- LEGAL DOCUMENT CLASSES -----*/ .cc-legal-document-page { flex-shrink: 0; min-height: 100%; padding: var(--cc-sp-8); } .cc-legal-document-body { max-width: 130ch; margin: 0 auto; padding: var(--cc-sp-8); background: var(--cc-white); border: 1px solid var(--cc-gray-200); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-card); /*Alters the regular text*/ font-family: var(--cc-font-body); font-size: var(--cc-fs-md); color: var(--cc-dark-gray); } .cc-legal-document-title { font-family: var(--cc-font-heading); font-size: var(--cc-fs-display-sm); color: var(--cc-brand-text); } .cc-legal-document-meta { margin: 0 0 var(--cc-sp-8); padding-bottom: var(--cc-sp-5); border-bottom: 1px solid var(--cc-border-subtle); font-size: var(--cc-fs-sm); color: var(--cc-gray-500); } /* The meta already draws the divider under the title block — don't let a heading right below it draw a second line. */ .cc-legal-document-meta + .cc-legal-document-heading { padding-top: 0; border-top: none; } .cc-legal-document-heading { padding-top: var(--cc-sp-4); border-top: 1px solid var(--cc-border-subtle); font-family: var(--cc-font-heading); font-size: var(--cc-fs-2xl); color: var(--cc-black); } .cc-legal-document-subheading { margin: var(--cc-sp-8) 0 var(--cc-sp-4); font-family: var(--cc-font-medium); font-size: var(--cc-fs-lg); line-height: 1.4; color: var(--cc-black); } .cc-legal-document-heading + .cc-legal-document-subheading { margin-top: var(--cc-sp-5); } /* -- text variations -- */ .cc-legal-document-body p { margin: 0 0 var(--cc-sp-5); } .cc-legal-document-body ul, .cc-legal-document-body ol { margin: 0 0 var(--cc-sp-5); padding-left: var(--cc-sp-8); } .cc-legal-document-body li + li { margin-top: var(--cc-sp-4); } .cc-legal-document-body li::marker { color: var(--cc-red); } .cc-legal-document-body strong { font-family: var(--cc-font-medium); font-weight: 400; color: var(--cc-black); } .cc-legal-document-body a { color: var(--cc-brand-text); text-decoration: underline; text-underline-offset: 0.15em; } .cc-legal-document-body a:hover { color: var(--cc-red-hover); } .cc-admin-context .filter-date-picker .mud-input-slot { min-height: 40px !important; font-size: calc(0.95rem + 1px) !important; } /* ---------------- AVATAR PALETTE ---------------- Six deterministic bubble backgrounds for hashed-initial avatars, shared by the Dealers customer stack/popover and the admin dashboard activity feed. The class is picked by Helpers/AvatarPalette.CssClass(name) so the same name always lands on the same colour everywhere. All pair with white text. */ .cc-avatar-color-0 { background: var(--cc-red); } .cc-avatar-color-1 { background: var(--cc-header-bg); } .cc-avatar-color-2 { background: var(--cc-slate); } .cc-avatar-color-3 { background: var(--cc-info-solid); } .cc-avatar-color-4 { background: var(--cc-success-solid); } .cc-avatar-color-5 { background: var(--cc-purple); } /* ---------------- MOUNT-POINT AUTOCOMPLETE (popover contents) ---------------- MudBlazor portals popover content into MudPopoverProvider at the end of , so anything rendered by ItemTemplate / NoItemsTemplate sits OUTSIDE the owning page's CSS-isolation scope. These rules must be global — the same selectors in NtripSettings.razor.css would never match. */ .cc-mount-option { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-sp-5); width: 100%; min-width: 0; } .cc-mount-option-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-sm); font-weight: 700; color: var(--cc-black); } .cc-mount-option-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--cc-medium-gray); font-size: var(--cc-fs-xs); } /* "why is this empty" / "contacting caster" copy inside the dropdown. */ .cc-mount-option-note { padding: var(--cc-sp-5) var(--cc-sp-6); color: var(--cc-medium-gray); font-size: var(--cc-fs-sm); line-height: 1.4; } /* ---------------- BUTTON GRAMMAR (brand) ---------------- Mirrors rcmowersusa.com: square, bold uppercase, flat, and a hard color INVERSION on hover instead of Material's darken — a red fill goes black, a black fill goes red, and an outline fills with its own border color and flips its text to white. Focus shows the site's 2px red ring, offset 2px. MudBlazor's own hover rules are (0,3,0) selectors and its CSS is linked AFTER the bundle, so these carry .mud-button / .mud-button-root for extra specificity and win on weight, not order. Disabled buttons keep Mud's gray: the :not(:disabled) guards stop the inversion. Scoped overrides elsewhere in this file (.cc-dialog-accent, .cc-admin-context, .cc-cta-button) and in analytics-theme.css restate the same inversion for their own colors. */ .mud-button.mud-button-root.mud-button-filled, .mud-button.mud-button-root.mud-button-outlined { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mud-button.mud-button-root.mud-button-filled, .mud-button.mud-button-root.mud-button-filled:hover, .mud-button.mud-button-root.mud-button-filled:focus-visible, .mud-button.mud-button-root.mud-button-filled:active { box-shadow: none; } .mud-button.mud-button-root:focus-visible { outline: 2px solid var(--cc-red); outline-offset: 2px; } /* Filled red (Primary, and Error — both resolve to the accent) → black */ .mud-button.mud-button-root.mud-button-filled.mud-button-filled-primary:not(:disabled):hover, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-primary:not(:disabled):focus-visible, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-primary:not(:disabled):active, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-error:not(:disabled):hover, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-error:not(:disabled):focus-visible, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-error:not(:disabled):active { background-color: var(--cc-black); color: var(--cc-white); } /* Filled black (Secondary) → red */ .mud-button.mud-button-root.mud-button-filled.mud-button-filled-secondary:not(:disabled):hover, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-secondary:not(:disabled):focus-visible, .mud-button.mud-button-root.mud-button-filled.mud-button-filled-secondary:not(:disabled):active { background-color: var(--cc-red); color: var(--cc-white); } /* Outlined: a 2px border in the button's own ink, filled with that ink on hover. --cc-btn-ink carries the color so the hover rule is written once. Padding drops 1px per side against Mud's 5px/15px so the 2px border keeps the same outer height as a 1px one. */ .mud-button.mud-button-root.mud-button-outlined { --cc-btn-ink: var(--cc-black); border: 2px solid var(--cc-btn-ink); color: var(--cc-btn-ink); padding: 4px 14px; } .mud-button.mud-button-root.mud-button-outlined.mud-button-outlined-primary, .mud-button.mud-button-root.mud-button-outlined.mud-button-outlined-error { --cc-btn-ink: var(--cc-red); } .mud-button.mud-button-root.mud-button-outlined.mud-button-outlined-secondary { --cc-btn-ink: var(--cc-black); } .mud-button.mud-button-root.mud-button-outlined:not(:disabled):hover, .mud-button.mud-button-root.mud-button-outlined:not(:disabled):focus-visible, .mud-button.mud-button-root.mud-button-outlined:not(:disabled):active { border-color: var(--cc-btn-ink); background-color: var(--cc-btn-ink); color: var(--cc-white); } .mud-button.mud-button-root.mud-button-outlined:disabled { border: 2px solid var(--cc-light-gray); } /* ---------------- METRIC STRIP (brand) ---------------- The site's spec-sheet stat row: a run of centered value/caption cells separated by 1px hairlines, no boxes. Default is one flex row; `.cols-2` switches to a two-column grid for narrow panels (Monitor's control panel), with hairlines drawn on the right of each left-hand cell and above every row after the first — so an odd trailing cell never gets a dangling rule. --cc-metric-color on a cell recolors its value (fuel / battery thresholds) the way --tele-value-color and --dash-metric-color did page-locally. */ .cc-metric-strip { --cc-metric-rule: var(--cc-border); display: flex; align-items: stretch; } .cc-metric { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--cc-sp-4) var(--cc-sp-5) var(--cc-sp-5); border-right: 1px solid var(--cc-metric-rule); } .cc-metric:last-child { border-right: 0; } .cc-metric-value { font-family: var(--cc-font-heading); font-size: var(--cc-fs-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; font-feature-settings: 'tnum'; color: var(--cc-metric-color, var(--cc-black)); } .cc-metric-label { margin-top: var(--cc-sp-2); font-size: var(--cc-fs-2xs); font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-ink-muted); } .cc-metric-strip.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-metric-strip.cols-2 .cc-metric { border-right: 0; } .cc-metric-strip.cols-2 .cc-metric:nth-child(odd):not(:last-child) { border-right: 1px solid var(--cc-metric-rule); } .cc-metric-strip.cols-2 .cc-metric:nth-child(n+3) { border-top: 1px solid var(--cc-metric-rule); } /* ---------------- SECTION HEADING WITH RULES (brand) ---------------- The site's metrics heading: an uppercase brand-red label flanked by a short hairline before and a long one after, both in the same red. Sits above a metric strip or any sub-section inside a card. */ .cc-section-heading { display: flex; align-items: center; gap: var(--cc-sp-5); margin: 0 0 var(--cc-sp-5); font-family: var(--cc-font-heading); font-size: var(--cc-fs-xs); font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-brand-text); } .cc-section-heading::before, .cc-section-heading::after { content: ""; height: 1px; background: var(--cc-red); } .cc-section-heading::before { flex: 0 0 calc(var(--cc-sp-8) * 2); } .cc-section-heading::after { flex: 1; } /* COMMAND CENTER — SYSTEM ERRORS module (error list / detail / playbook / comments / revisions / category tabs). Loaded last. */ /* ============================================================================ System Errors — error-code list (master/detail) ============================================================================ */ .cc-error-split { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 16px; align-items: start; } @media (max-width: 959.98px) { .cc-error-split { grid-template-columns: 1fr; } } .cc-error-list { padding: 0; overflow: hidden; } .cc-error-list-scroll { max-height: none; overflow-y: visible; } @media (min-width: 960px) { .cc-error-list-scroll { max-height: 640px; overflow-y: auto; } } .cc-error-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--cc-white); border: none; border-left: 3px solid transparent; border-bottom: 1px solid var(--cc-light-gray); padding: 10px 16px; cursor: pointer; font: inherit; } .cc-error-row:hover { background: var(--cc-hover-surface); } .cc-error-row.selected { background: var(--cc-red-wash); border-left-color: var(--cc-red); } .cc-error-row-code { font-family: "JetBrains Mono", "Fira Code", monospace; font-weight: 700; font-size: 14px; color: var(--cc-black); min-width: 48px; } .cc-error-row-desc { flex: 1; font-size: 14px; color: var(--cc-dark-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-error-detail-pane { padding: 0; min-height: 320px; } .cc-error-detail { padding: 20px 24px; } .cc-error-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--cc-medium-gray); padding: 64px 24px; } .cc-error-detail-head { display: flex; align-items: flex-start; gap: 12px; } .cc-error-detail-code { display: flex; align-items: center; gap: 8px; } .cc-error-code-mono { font-family: "JetBrains Mono", "Fira Code", monospace; font-weight: 800; font-size: 23px; color: var(--cc-black); } .cc-error-detail-desc { margin-top: 2px; } .cc-error-section { margin-top: 18px; } /* The brand "heading with rules" motif — same recipe as .cc-section-heading in cc-components.css: red uppercase label, short hairline before, long after. */ .cc-error-section-title { display: flex; align-items: center; gap: var(--cc-sp-5); font-family: var(--cc-font-heading); font-size: var(--cc-fs-xs); font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc-brand-text); margin: 0 0 var(--cc-sp-5); } .cc-error-section-title::before, .cc-error-section-title::after { content: ""; height: 1px; background: var(--cc-red); } .cc-error-section-title::before { flex: 0 0 calc(var(--cc-sp-8) * 2); } .cc-error-section-title::after { flex: 1; } .cc-error-steps { --cc-step-marker-w: 1.75em; margin: 0; padding-left: 0; list-style: none; counter-reset: cc-num cc-alpha; } .cc-error-steps .cc-error-steps { margin-top: var(--cc-sp-2); } .cc-error-step { position: relative; padding-left: var(--cc-step-marker-w); margin-bottom: var(--cc-sp-2); font-size: var(--cc-fs-md); } .cc-error-step::before { position: absolute; left: 0; top: 0; color: var(--cc-medium-gray); font-weight: 700; font-variant-numeric: tabular-nums; } .cc-error-step.is-numbered::before { counter-increment: cc-num; content: counter(cc-num) "."; } .cc-error-step.is-lettered::before { counter-increment: cc-alpha; content: counter(cc-alpha, lower-alpha) ")"; } .cc-error-step.is-bullet::before { content: "•"; } .cc-error-step:target { background: var(--cc-warning-tint); border-radius: var(--cc-radius-sm); box-shadow: 0 0 0 var(--cc-sp-2) var(--cc-warning-tint); } .cc-error-steps-empty { color: var(--cc-medium-gray); font-size: 14px; font-style: italic; } .cc-steps-hint { font-size: var(--cc-fs-sm); color: var(--cc-medium-gray); margin: 0 0 var(--cc-sp-5); } .cc-start-here { border: 1px solid var(--cc-success); background: var(--cc-success-tint); border-radius: var(--cc-radius-md); padding: var(--cc-sp-5) var(--cc-sp-6); margin-bottom: var(--cc-sp-6); } .cc-start-here-head { display: flex; align-items: baseline; gap: var(--cc-sp-4); flex-wrap: wrap; margin-bottom: var(--cc-sp-2); } .cc-start-here-label { font-size: var(--cc-fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cc-success-text); } .cc-start-here-count { font-size: var(--cc-fs-xs); color: var(--cc-dark-gray); } .cc-start-here-text { font-size: var(--cc-fs-md); color: var(--cc-black); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; } .cc-start-here-jump { display: inline-block; margin-top: var(--cc-sp-2); font-size: var(--cc-fs-xs); font-weight: 700; color: var(--cc-success-text); } /* AI Playbook */ .cc-playbook { border-left: 3px solid var(--cc-header-bg); } .cc-playbook-block { margin-top: 12px; } .cc-playbook-label { font-size: calc(0.72rem + 1px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cc-medium-gray); margin-bottom: 4px; } .cc-playbook-text { font-size: calc(0.92rem + 1px); line-height: 1.5; white-space: pre-wrap; } .cc-playbook-steps { margin: 0; padding-left: 20px; } .cc-playbook-steps li { font-size: calc(0.92rem + 1px); line-height: 1.5; margin-bottom: 4px; } .cc-playbook-solution { display: flex; gap: 8px; align-items: baseline; font-size: calc(0.92rem + 1px); line-height: 1.5; margin-bottom: 4px; } .cc-playbook-solution-count { flex: 0 0 auto; font-weight: 700; font-size: calc(0.8rem + 1px); color: var(--cc-header-bg); background: var(--cc-gray-100); border-radius: var(--cc-radius-sm); padding: 1px var(--cc-sp-3); } /* Comments */ .cc-error-comment { display: flex; gap: 10px; margin-bottom: 12px; } .cc-error-comment-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--cc-radius-round); background: var(--cc-header-bg); color: var(--cc-white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .cc-error-comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cc-error-comment-name { font-weight: 700; font-size: 14px; } .cc-error-comment-role { font-size: 13px; color: var(--cc-medium-gray); } .cc-error-comment-when { font-size: 13px; color: var(--cc-medium-gray); margin-left: auto; } .cc-error-comment-text { font-size: 15px; color: var(--cc-dark-gray); } .cc-error-comment-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .cc-error-comment-input { flex: 1; } /* Step editor (in the add/edit drawer) */ .cc-step-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cc-step-row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .cc-step-type { max-width: 120px; } .cc-step-text { flex: 1; } /* ============================================================================ System Errors — change history / approval diffs ============================================================================ */ .cc-revision-row { border: 1px solid var(--cc-light-gray); border-radius: var(--cc-radius-sm); margin-bottom: 8px; overflow: hidden; } .cc-revision-head { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--cc-white); border: none; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; } .cc-revision-head:hover { background: var(--cc-hover-surface); } .cc-revision-meta { flex: 1; font-size: 13px; color: var(--cc-dark-gray); } .cc-revision-fieldcount { font-size: 13px; color: var(--cc-medium-gray); } .cc-revision-detail { padding: 10px 12px; border-top: 1px solid var(--cc-light-gray); background: var(--cc-hover-surface); } .cc-revision-field { margin-bottom: 10px; } .cc-revision-field-name { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cc-dark-gray); margin-bottom: 4px; } .cc-revision-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cc-revision-diff pre { margin: 0; padding: 8px; border-radius: var(--cc-radius-sm); font-size: 13px; white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", "Fira Code", monospace; max-height: 220px; overflow: auto; } .cc-revision-old { background: var(--cc-danger-tint); border: 1px solid var(--cc-danger); } .cc-revision-new { background: var(--cc-success-tint); border: 1px solid var(--cc-success); } @media (max-width: 599.98px) { .cc-revision-diff { grid-template-columns: 1fr; } } /* ============================================================================ System Errors — per-step votes / "most successful fix" ============================================================================ */ .cc-step-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cc-step-line .cc-step-text { flex: 1; min-width: 160px; } .cc-most-successful { font-size: var(--cc-fs-xs); font-weight: 800; letter-spacing: 0.02em; padding: 1px var(--cc-sp-4); border-radius: var(--cc-radius-pill); background: var(--cc-success-tint); color: var(--cc-success-text); white-space: nowrap; } .cc-vote-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cc-light-gray); background: var(--cc-white); color: var(--cc-dark-gray); font: inherit; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: var(--cc-radius-pill); cursor: pointer; white-space: nowrap; } .cc-vote-btn:hover:not(:disabled) { border-color: var(--cc-success); background: var(--cc-success-tint); color: var(--cc-success-text); } .cc-vote-btn:disabled { opacity: 0.6; cursor: progress; } .cc-vote-btn-label { font-weight: 700; } .cc-vote-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--cc-radius-pill); background: var(--cc-success-tint); color: var(--cc-success-text); font-size: 12px; } .cc-guide-body { margin: 0; word-break: break-word; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--cc-dark-gray); } .cc-guide-body > :first-child { margin-top: 0; } .cc-guide-body > :last-child { margin-bottom: 0; } .cc-guide-body h1, .cc-guide-body h2, .cc-guide-body h3, .cc-guide-body h4, .cc-guide-body h5, .cc-guide-body h6 { font-size: var(--cc-fs-lg); font-weight: 800; color: var(--cc-black); margin: var(--cc-sp-6) 0 var(--cc-sp-3); } .cc-guide-body ul, .cc-guide-body ol { margin: var(--cc-sp-3) 0; padding-left: var(--cc-sp-8); } .cc-guide-body code { font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 0.9em; background: var(--cc-gray-100); border-radius: var(--cc-radius-sm); padding: 1px var(--cc-sp-2); } .cc-guide-body pre { background: var(--cc-gray-100); border-radius: var(--cc-radius-sm); padding: var(--cc-sp-4); overflow-x: auto; } .cc-guide-body pre code { background: none; padding: 0; } .cc-step-text code { font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 0.9em; background: var(--cc-gray-100); border-radius: var(--cc-radius-sm); padding: 1px var(--cc-sp-2); } /* A CcBusyButton (MudButton) — this file loads before MudBlazor, so the .mud-button-root compound is needed to win over Mud's button defaults. */ .mud-button-root.cc-error-list-more-btn { width: 100%; padding: var(--cc-sp-5) var(--cc-sp-7); font-size: var(--cc-fs-xs); font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--cc-brand-text); background: var(--cc-white); border: none; border-top: 1px solid var(--cc-light-gray); border-radius: 0; } .mud-button-root.cc-error-list-more-btn:hover:not(:disabled) { background: var(--cc-hover-surface); } .mud-button-root.cc-error-list-more-btn:disabled { color: var(--cc-medium-gray); } .cc-error-row-match { font-size: var(--cc-fs-xs); font-style: italic; color: var(--cc-medium-gray); white-space: nowrap; } /* ============================================================================ System Errors — category tabs + redesigned list rows ============================================================================ */ .cc-cat-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--cc-light-gray); } .cc-cat-tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; color: var(--cc-medium-gray); cursor: pointer; white-space: nowrap; } .cc-cat-tab:hover { color: var(--cc-dark-gray); } .cc-cat-tab.active { color: var(--cc-red); border-bottom-color: var(--cc-red); } .cc-cat-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--cc-radius-pill); background: var(--cc-light-gray); color: var(--cc-dark-gray); font-size: 13px; font-weight: 800; } .cc-cat-tab-count.active { background: var(--cc-red); color: var(--cc-white); } /* Colored category pill on each row */ .cc-cat-pill { display: inline-flex; align-items: center; padding: var(--cc-sp-1) var(--cc-sp-4); border-radius: var(--cc-radius-sm); font-size: var(--cc-fs-xs); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .cc-cat-pill-blue { background: var(--cc-info-tint); color: var(--cc-info-text); } .cc-cat-pill-amber { background: var(--cc-warning-tint); color: var(--cc-warning-text); } .cc-cat-pill-green { background: var(--cc-success-tint); color: var(--cc-success-text); } .cc-cat-pill-purple { background: var(--cc-purple-tint); color: var(--cc-purple-text); } .cc-cat-pill-teal { background: var(--cc-teal-tint); color: var(--cc-teal-text); } .cc-cat-pill-pink { background: var(--cc-pink-tint); color: var(--cc-pink-text); } .cc-cat-pill-red { background: var(--cc-danger-tint); color: var(--cc-danger-text); } .cc-cat-pill-indigo { background: var(--cc-indigo-tint); color: var(--cc-indigo-text); } .cc-error-row { align-items: flex-start; padding: var(--cc-sp-5) var(--cc-sp-7); min-height: 56px; } .cc-error-row-body { display: flex; flex-direction: column; gap: var(--cc-sp-2); flex: 1 1 auto; min-width: 0; } .cc-error-row-line { display: flex; align-items: center; gap: var(--cc-sp-4); min-width: 0; } .cc-error-row-code { flex: 0 0 auto; background: var(--cc-gray-100); border: 1px solid var(--cc-light-gray); border-radius: var(--cc-radius-sm); padding: 3px var(--cc-sp-4); min-width: 0; } .cc-error-row-desc { font-size: var(--cc-fs-md); font-weight: 600; color: var(--cc-black); min-width: 0; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cc-error-desc-lines, 1); line-clamp: var(--cc-error-desc-lines, 1); overflow: hidden; } .cc-error-row-meta { flex-wrap: wrap; gap: var(--cc-sp-3); font-size: var(--cc-fs-xs); } .cc-error-row-stat { color: var(--cc-medium-gray); white-space: nowrap; } .cc-error-row-flag { font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; padding: var(--cc-sp-1) var(--cc-sp-4); border-radius: var(--cc-radius-sm); background: var(--cc-warning-tint); color: var(--cc-warning-text); } .cc-error-row-chevron { flex: 0 0 auto; color: var(--cc-medium-gray); align-self: center; } .cc-error-row.selected .cc-error-row-chevron { color: var(--cc-red); } @media (max-width: 959.98px) { .cc-error-row-desc { --cc-error-desc-lines: 2; } } .cc-errors-filter .cc-filter-search { flex: 1 1 auto; min-width: 0; max-width: none; } .cc-errors-filter .cc-filter-search .mud-input-control { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; } .cc-errors-filter { margin-bottom: 0; padding-bottom: var(--cc-sp-2); } /* System Errors — mobile master/detail drill-in + comment delete */ .cc-error-back { display: none; } .cc-error-comment-del { margin-left: 2px; } /* The print sheet (ErrorPrintSheet) is paper-only; wwwroot/cc-print.css reveals it. */ .cc-print-sheet { display: none; } @media (max-width: 959.98px) { .cc-error-split.has-selection .cc-error-list { display: none; } .cc-error-split:not(.has-selection) .cc-error-detail-pane { display: none; } .cc-error-back { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; background: var(--cc-white); border: none; border-bottom: 1px solid var(--cc-light-gray); color: var(--cc-red); font: inherit; font-weight: 700; padding: 10px 14px; cursor: pointer; } .cc-error-detail { padding: var(--cc-sp-6) var(--cc-sp-6); } .cc-error-detail-head { flex-wrap: wrap; } .cc-error-code-mono { font-size: var(--cc-fs-xl); } .cc-error-steps { --cc-step-marker-w: 1.4em; } .cc-vote-btn { min-height: 44px; padding-top: var(--cc-sp-4); padding-bottom: var(--cc-sp-4); margin-top: calc(var(--cc-sp-4) * -1); margin-bottom: calc(var(--cc-sp-4) * -1); } .cc-error-detail .mud-tabs-toolbar-wrapper { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cc-error-detail .mud-tab { flex: 0 0 auto; } } @media (max-width: 599.98px) { .cc-error-detail .mud-tab .mud-icon-root { display: none; } .cc-error-detail .mud-tab { min-width: 0; padding-left: var(--cc-sp-5); padding-right: var(--cc-sp-5); } } /* ============================================================================ COMMAND CENTER — CONNECTION LOST (Blazor circuit reconnect UI). Replaces the framework default "Could not reconnect to the server." banner. blazor.web.js looks for an element with id `components-reconnect-modal` (Components/App.razor) and, when it finds one, drives it ENTIRELY by toggling four classes on that element: .components-reconnect-show retrying — automatic attempts running .components-reconnect-hide back online .components-reconnect-failed all attempts used up .components-reconnect-rejected server no longer holds the circuit ============================================================================ */ #components-reconnect-modal { display: none; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } /* ---------------- SCRIM ---------------- */ #components-reconnect-modal.cc-reconnect { position: fixed; inset: 0; z-index: 20000 !important; /* over Mud's 9999 — above dialogs and .cc-modal */ align-items: center; /* "safe": on a short viewport the card would overflow upward past the top edge where it can't be scrolled to; this pins it to the top instead. */ align-items: safe center; justify-content: center; overflow-y: auto; /* fixed scrim never scrolls with the page */ padding: var(--cc-sp-8); background: rgba(0, 0, 0, 0.72) !important; /* over Mud's opaque palette background */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: cc-reconnect-scrim-in 0.2s ease both; } @keyframes cc-reconnect-scrim-in { from { opacity: 0; } to { opacity: 1; } } /* ---------------- CARD ---------------- Square white card (entry motion from .cc-accept-card--enter). */ .cc-reconnect-card { width: 100%; max-width: 520px; background: var(--cc-white); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.30), 0 40px 80px rgba(0, 0, 0, 0.24); } /* ---------------- HERO ---------------- A plain dark band in the app header's color, carrying the company logo. */ .cc-reconnect-hero { display: flex; align-items: center; justify-content: center; height: 168px; padding: var(--cc-sp-6) var(--cc-sp-8) var(--cc-sp-8); background: var(--cc-header-bg); } .cc-reconnect-logo { display: block; width: 100%; max-width: 280px; height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); } .cc-reconnect-body { padding: 0 var(--cc-sp-8) var(--cc-sp-8); text-align: center; } /* ---------------- STATUS DISC ---------------- The 56px .cc-accept-state-icon circle, with a spinning accent arc while attempts run and a static danger disc once they are spent. */ /* It rides the hero's bottom edge: pulled up by half its height, with a white collar so it reads as sitting on the card rather than the photo. */ .cc-reconnect-disc { position: relative; width: 72px; height: 72px; margin: -36px auto var(--cc-sp-6); background: var(--cc-white); box-shadow: 0 0 0 6px var(--cc-white), 0 6px 18px rgba(0, 0, 0, 0.25); } .components-reconnect-failed .cc-reconnect-disc, .components-reconnect-rejected .cc-reconnect-disc { background: var(--cc-red); } .cc-reconnect-ring { position: absolute; inset: 0; border-radius: var(--cc-radius-round); border: 4px solid transparent; border-top-color: var(--cc-red); animation: cc-reconnect-spin 0.9s linear infinite; } @keyframes cc-reconnect-spin { to { transform: rotate(360deg); } } .cc-reconnect-bang { font-family: var(--cc-font-display); font-size: var(--cc-fs-display-sm); font-weight: 800; line-height: 1; color: var(--cc-white); } /* A pulsing accent dot sits inside the spinning ring while retrying. */ .cc-reconnect-disc::after { content: ""; width: 12px; height: 12px; border-radius: var(--cc-radius-round); background: var(--cc-red); animation: cc-reconnect-pulse 1.4s ease-in-out infinite; } .components-reconnect-failed .cc-reconnect-disc::after, .components-reconnect-rejected .cc-reconnect-disc::after { display: none; } @keyframes cc-reconnect-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* ---------------- COPY ---------------- Id-scoped so the global h1/p rules in app.css can't recolor or recase them. */ #components-reconnect-modal .cc-reconnect-title { margin: 0 0 var(--cc-sp-2); font-family: var(--cc-font-display); font-size: var(--cc-fs-display-sm); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; text-transform: none; color: var(--cc-black); } #components-reconnect-modal .cc-reconnect-text { margin: 0; font-size: var(--cc-fs-lg); line-height: 1.5; color: var(--cc-dark-gray); } /* ---------------- ACTIONS ---------------- Plain