/* * global.css — Base styles + Sidebar + Login structural styles * * Loaded on every page regardless of theme. * All visual values come from CSS custom properties defined in * public/themes//style.css which is loaded after this file. * * To restyle a component: override the relevant --sidebar-* or --brand-* * variables in your theme's style.css. For structural changes (different * HTML layout), register a custom Sidebar component via ThemeExports.Sidebar. */ /* ───────────────────────────────────────────── Base typography ───────────────────────────────────────────── --font-inter is injected by Next.js (next/font/google) onto . --brand-font is the theme's preferred font name (default: Inter). System sans-serif is the final fallback. ───────────────────────────────────────────── */ html, body { /* --app-font lets a theme swap the primary UI font (Heale sets it to var(--font-jakarta)); other themes leave it unset and stay on Inter. */ font-family: var(--app-font, var(--font-inter)), var(--brand-font, Inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* --heading-font: display type for TITLES ONLY, opt-in per theme. For a brand that sets headings in a different face from body copy. NO REGISTERED THEME SETS IT TODAY — Cigna did (a system serif, standing in for the proprietary ValueSerif Pro) until it moved onto Heale's Charte chassis, which is Plus Jakarta Sans throughout per §3. The hook stays: it costs nothing, and it is the only sanctioned way to change a title face. The fallback is `inherit`, so a theme that never sets it keeps titles on the body font and nothing about its look changes. Wired into the title classes only — never body copy, never numeric metrics (`.dash-stat-value`): serif faces commonly ship old-style figures, which read as inconsistent sizes in a metric. */ /* ───────────────────────────────────────────── Login page ───────────────────────────────────────────── */ .login-root { display: flex; min-height: 100vh; font-family: var(--brand-font, Inter), system-ui, sans-serif; } /* ── Left: form panel ── */ .login-left { display: flex; flex: 3; flex-direction: column; align-items: center; justify-content: center; background-color: var(--login-left-bg, #ffffff); } .login-form-wrapper { width: 100%; max-width: var(--login-form-width, 400px); } /* Logo */ .login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; } .login-logo-img { height: 36px; object-fit: contain; } .login-logo-mark { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background-color: var(--brand-primary, #0a3373); flex-shrink: 0; } .login-logo-mark-letter { font-size: 18px; font-weight: 700; color: #ffffff; } .login-logo-text { font-size: 22px; font-weight: 700; color: var(--brand-primary, #0a3373); } /* Below 1024px the branded right panel (.login-right) is hidden, so this logo carries branding instead — hide it once .login-right takes over. */ @media (min-width: 1024px) { .login-logo { display: none; } } /* Header */ .login-header { margin-bottom: 32px; } .login-header-eyebrow { font-size: 12px; font-weight: 600; color: #9ca3af; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; margin-top: 0; } .login-header-title { font-size: 26px; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.3px; } /* ── Auth status surfaces — shared building blocks so the magic-link "check your email" card, the MFA prompt, and the verifying / expired states on /auth/confirm and /reset-password all read the same. ── */ /* Soft brand-tinted circle wrapping a centered lucide status icon. */ .auth-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px; color: var(--brand-secondary, #4374f3); background-color: color-mix(in srgb, var(--brand-secondary, #4374f3) 12%, white); } /* `--brand-success` with the prior literal as fallback: Heale deliberately leaves --brand-success unmapped (see the quote-wizard note in heale/style.css), so it keeps rendering #32a15e; brands that map it (difc) get their own positive green here. Cigna does NOT — it runs Heale's chassis, and `--brand-success` is not part of it. */ .auth-status-icon--success { color: var(--brand-success, #32a15e); background-color: color-mix(in srgb, var(--brand-success, #32a15e) 13%, white); } .auth-status-icon--warning { color: var(--brand-accent, #ff6733); background-color: color-mix(in srgb, var(--brand-accent, #ff6733) 14%, white); } /* Styled link/button that closes out an auth status card (back to login, request a new link) — brand-secondary with a lucide icon. */ .auth-status-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--brand-secondary, #4374f3); background: none; border: none; cursor: pointer; text-decoration: none; transition: color 0.15s; } .auth-status-link:hover { color: color-mix(in srgb, var(--brand-secondary, #4374f3) 78%, black); } /* Magic-link sent / MFA prompt card */ .login-magic-sent { padding: 32px 24px; border-radius: 14px; background-color: color-mix(in srgb, var(--brand-primary, #0a3373) 4%, white); border: 1px solid color-mix(in srgb, var(--brand-primary, #0a3373) 12%, white); text-align: center; } .login-magic-sent-title { font-size: 20px; font-weight: 700; color: var(--brand-primary, #0a3373); margin: 0 0 8px; letter-spacing: -0.3px; } .login-magic-sent-body { font-size: 14px; color: #6b7280; line-height: 1.55; margin: 0; } .login-magic-sent-body strong { color: #374151; font-weight: 600; } .login-magic-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--brand-secondary, #4374f3); background: none; border: none; cursor: pointer; transition: color 0.15s; } .login-magic-back:hover { color: color-mix(in srgb, var(--brand-secondary, #4374f3) 78%, black); } /* Form fields */ .login-field { display: flex; flex-direction: column; gap: 6px; } .login-label { font-size: 13px; font-weight: 500; color: #4b5563; } .login-input { width: 100%; height: 44px; border-radius: 8px; /* `transparent` fallback = the panel colour, i.e. exactly what this input rendered before the token existed. Only a theme that opts in gets a fill. */ background-color: var(--login-input-bg, transparent); /* Both tokenised with their original values: an input's edge is a UI-component boundary (WCAG 1.4.11, 3:1), and #e5e7eb cannot reach that on any light panel — a theme needs to be able to supply its own boundary grey. */ border: 1px solid var(--login-input-border, #e5e7eb); padding: 0 14px; font-size: 14px; color: var(--login-input-color, #111827); outline: none; box-sizing: border-box; transition: border-color 0.15s; } .login-input:focus { border-color: var(--login-input-focus-border, var(--brand-accent, #ff6733)); } .login-input-wrapper { position: relative; } .login-input--password { padding-right: 44px; font-size: 16px; } .login-input-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 18px; line-height: 1; padding: 0; } .login-fields { display: flex; flex-direction: column; gap: 16px; } .login-forgot-row { display: flex; justify-content: flex-end; margin-top: 6px; } .login-forgot { font-size: 13px; font-weight: 500; color: var(--brand-secondary, #4374f3); background: none; border: none; cursor: pointer; padding: 0; } .login-error { font-size: 13px; /* Tokenised with its original value as fallback — a brand whose error hue isn't the default red (difc's rust) follows automatically. */ color: var(--brand-error, #dc2626); margin-top: 12px; margin-bottom: 0; } /* Actions */ .login-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } .login-submit { width: 100%; height: 48px; border-radius: 8px; background-color: var(--login-submit-bg, #374151); color: var(--login-submit-color, #ffffff); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; transition: opacity 0.15s; } /* Hover is opt-in per brand: the fallback is the resting fill itself, so a theme that maps only --login-submit-bg (or nothing) renders exactly as before this token existed. */ .login-submit:hover:not(:disabled) { background-color: var(--login-submit-bg-hover, var(--login-submit-bg, #374151)); } .login-submit:disabled { opacity: 0.7; cursor: not-allowed; } .login-switch-row { text-align: center; } .login-switch { font-size: 12px; color: #9ca3af; background: none; border: none; cursor: pointer; padding: 0; } /* "OR" divider — horizontal rule with centered uppercase label */ .login-divider { display: flex; align-items: center; gap: 12px; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background-color: #e5e7eb; } .login-divider-text { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; } /* Outlined magic-link toggle — full-width button, subtle indigo tint */ .login-magic-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand-secondary, #4374f3) 35%, white); background-color: color-mix(in srgb, var(--brand-secondary, #4374f3) 8%, white); color: var(--brand-secondary, #4374f3); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .login-magic-toggle:hover { background-color: color-mix(in srgb, var(--brand-secondary, #4374f3) 14%, white); border-color: color-mix(in srgb, var(--brand-secondary, #4374f3) 50%, white); } .login-magic-toggle-icon { flex-shrink: 0; } .login-terms { font-size: 12px; color: #9ca3af; text-align: center; margin: 0; } .login-terms-link { color: var(--brand-secondary, #4374f3); cursor: pointer; } /* ── Right: branded panel ── */ .login-right { position: relative; flex: 2; overflow: hidden; display: none; background-color: var(--login-right-bg, color-mix(in srgb, var(--brand-secondary, #4374f3) 16%, white)); background-image: var(--login-right-decoration-image, none); background-repeat: no-repeat; background-position: var(--login-right-decoration-position, right -80px bottom -220px); background-size: var(--login-decoration-size, 500px); } @media (min-width: 1024px) { .login-right { display: flex; flex-direction: column; } } /* Inner: logo + heading (positioned in upper area; circles are absolute at bottom) */ .login-right-inner { position: relative; z-index: 1; padding: 88px 44px 36px 76px; display: flex; flex-direction: column; gap: 44px; } /* Logo row */ /* Hiding the ROOT (not the ) is deliberate: this wrapper holds either the tenant logo or the fallback initial-mark + name, so a theme that opts out of a brand mark here loses both — no empty slot, and no stray flex gap left behind by a hidden child. `flex` = today's behaviour for every theme that sets nothing. */ .login-right-logo { display: var(--login-right-logo-display, flex); align-items: center; gap: 10px; } .login-right-logo-img { height: 40px; object-fit: contain; } .login-right-logo-mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background-color: var(--brand-primary, #0a3373); flex-shrink: 0; } .login-right-logo-letter { font-size: 15px; font-weight: 700; color: #ffffff; } .login-right-logo-name { font-size: 19px; font-weight: 700; color: var(--brand-primary, #0a3373); } /* Main heading — max-width forces the 3-line break matching the reference design */ .login-right-heading { font-size: var(--login-right-heading-size, 46px); font-weight: var(--login-right-heading-weight, 800); font-family: var(--login-right-heading-font, var(--font-poppins), Poppins, system-ui, sans-serif); color: var(--login-right-heading-color, var(--brand-primary, #0a3373)); text-align: left; margin: 0; line-height: var(--login-right-heading-line-height, 1.3); letter-spacing: -0.5px; max-width: 320px; } /* Decorative icon at bottom-right */ /* The is Heale's own icon, hardcoded in , so it rendered on EVERY brand's login. A theme hides it here and paints its own mark through --login-right-decoration-image instead. Defaults keep Heale exactly as it was: the img visible, no panel background image. */ .login-right-decoration { display: var(--login-right-decoration-display, block); position: absolute; width: var(--login-decoration-size, 500px); height: var(--login-decoration-size, 500px); bottom: -220px; right: -80px; z-index: 1; pointer-events: none; object-fit: contain; } /* Mobile: gutter padding so the form never touches the viewport edge, 16px input font (prevents iOS Safari auto-zoom on focus), and larger tap targets on the secondary text-link buttons. */ @media (max-width: 768px) { .login-left { padding: 32px 20px; box-sizing: border-box; } .login-input { font-size: 16px; } .login-forgot, .login-switch, .login-magic-back, .auth-status-link { min-height: 44px; padding: 10px 0; display: inline-flex; align-items: center; } .login-forgot-row { margin-top: -4px; } } /* ───────────────────────────────────────────── Sidebar ───────────────────────────────────────────── */ /* THREE FIXED REGIONS, in this order: `.sidebar-logo` (never shrinks) / `.sidebar-nav` (the ONLY scrolling region) / `.sidebar-footer` (never shrinks — it holds ``, i.e. profile switching AND sign-out). The aside takes its height from the flex parent (`.dash-root.flex.h-screen`, and `height: 100%` in the mobile drawer below) — never a magic px or a `calc()` over the topbar, both of which drift. NO `overflow` here on purpose: `.profile-switcher-popover` is absolutely positioned inside `.sidebar-footer` and is deliberately WIDER than the rail (260px at 240px expanded, 300px at 72px collapsed — see its own header), so clipping the aside would cut off the control this layout exists to keep reachable. Nothing needs clipping anyway once `.sidebar-nav` can actually shrink: the three regions then always sum to the aside's own height. */ .sidebar { display: flex; flex-direction: column; flex-shrink: 0; width: var(--sidebar-width, 240px); background-color: var(--sidebar-bg, #ffffff); border-right: var(--sidebar-border-right, 1px solid #e5e7eb); padding: var(--sidebar-padding, 24px 0); font-family: var(--brand-font, Inter), system-ui, sans-serif; } /* Hamburger button — hidden on desktop, shown only on mobile */ .sidebar-hamburger-bar { display: none; } .sidebar-hamburger { display: none; } /* Close button inside sidebar — hidden on desktop */ .sidebar-close { display: none; } /* Overlay behind open sidebar — hidden on desktop */ .sidebar-overlay { display: none; } /* ── Logo ── */ .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 20px; margin-bottom: 24px; text-decoration: none; /* Region 1 of 3 — pinned at the top, never compressed to make room for a long nav (that is `.sidebar-nav`'s job, below). */ flex-shrink: 0; } /* Height/width are tokenised because the slot's 24px default assumes a WIDE wordmark: a stacked, near-square lockup (Cigna's is 141.7×93.5) shrinks to ~36px wide at that height and becomes unreadable. `object-fit: contain` means the aspect ratio is always preserved — a theme with a tall lockup raises the height rather than distorting anything. Fallbacks keep every existing theme pixel-identical. */ .sidebar-logo-img { /* `0` = flush left, exactly as before. `0 auto` lets a theme centre the lockup; the collapse toggle keeps its own `margin-left: auto`, so it stays pinned right either way. */ margin: var(--sidebar-logo-img-margin, 0); height: var(--sidebar-logo-img-height, 24px); max-width: var(--sidebar-logo-img-max-width, 120px); object-fit: contain; filter: var(--sidebar-logo-img-filter, none); } .sidebar-logo-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background-color: var(--brand-primary, #0a3373); flex-shrink: 0; } .sidebar-logo-mark-letter { font-size: 18px; font-weight: 700; color: #ffffff; } .sidebar-logo-text { font-size: 20px; font-weight: 600; color: var(--sidebar-logo-text-color, var(--brand-primary, #0a3373)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stacked platform-name + "Backoffice" lockup — shown for a platform-scoped `white_label_admin` so it's unambiguous which platform's backoffice is in view. Superadmin keeps the plain single-line `.sidebar-logo-text` above. */ .sidebar-logo-text-stack { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; } .sidebar-logo-text-stack .sidebar-logo-text--platform { flex: initial; line-height: 1.25; } .sidebar-logo-subtext { font-size: 11px; font-weight: 500; color: var(--sidebar-footer-sub-color, #9ca3af); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Desktop icon-rail collapse toggle — sits in the logo row, hidden on mobile (see `.sidebar-hamburger`-adjacent mobile media query below). */ .sidebar-collapse-toggle { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; border-radius: 6px; border: none; background: transparent; color: var(--sidebar-icon-color, #9ca3af); cursor: pointer; flex-shrink: 0; transition: background-color 0.12s, color 0.12s; } .sidebar-collapse-toggle:hover { background-color: var(--sidebar-item-bg-hover, #f0f4ff); color: var(--sidebar-item-color, #374151); } /* ── Nav ── */ /* Region 2 of 3 — the sidebar's ONLY scrolling region. `min-height: 0` is the load-bearing declaration: a column flex item's automatic minimum size is its CONTENT height, so with `flex: 1` alone the nav grows but flatly REFUSES to shrink. A nav taller than the viewport therefore pushed `.sidebar-footer` past the bottom of the aside, where the shell's `overflow: hidden` (`.dash-root.flex.h-screen`) clipped it — which is why the profile switcher was unclickable rather than merely off-screen. This is also the single most common reason the fix "doesn't work" when only `overflow-y` is added. `flex: 1` (not `flex: 0 1 auto`) stays, so a SHORT nav on a tall viewport still fills the gap and holds the footer at the bottom exactly as before. Scrollbar is HIDDEN, not gutter-reserved. `.dash-body` can afford `scrollbar-gutter: stable` at full page width; this rail is only var(--sidebar-width, 240px) — and var(--sidebar-width-collapsed, 72px) in the icon rail — so a permanently reserved ~15px gutter would visibly shave every nav item and shift the collapsed rail's centred icons off-centre. Hiding it is the same treatment `.ins-pol-tabs` / `.mf-tabs` already use, and it costs zero layout shift whether or not the nav overflows. Wheel, trackpad, touch and keyboard (Tab scrolls the focused link into view) all still reach the overflow. */ .sidebar-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; gap: 2px; } .sidebar-nav::-webkit-scrollbar { display: none; } /* Same rule (and reason) as `.dash-body > *`: items must overflow INTO the scroll rather than being squeezed, so expanding a `.sidebar-subitem` group on a short viewport lengthens the scroll instead of compressing the rows. */ .sidebar-nav > * { flex-shrink: 0; } /* Separates a temporary/informal nav item group from the main list (e.g. the insurer-only "Users" entry) — plain top border matching the sidebar's own right-edge border colour. */ .sidebar-nav-divider { /* Own token, decoupled from --sidebar-border-right so a theme (Heale) can drop the rail's vertical border while keeping this one intentional group divider. Falls back to --sidebar-border-right so themes that never set the new token (property-finder, backoffice) keep their previous divider exactly. */ border-top: var(--sidebar-nav-divider-border, var(--sidebar-border-right, 1px solid #e5e7eb)); margin: 8px var(--sidebar-item-margin-x, 12px); } .sidebar-item { display: flex; align-items: center; gap: var(--sidebar-item-gap, 10px); padding: var(--sidebar-item-padding, 10px 12px); margin: var(--sidebar-item-margin, 0 12px); border-radius: var(--sidebar-item-radius, 8px); font-size: var(--sidebar-item-font-size, 14px); font-weight: 500; color: var(--sidebar-item-color, #374151); text-decoration: none; transition: background-color 0.12s, color 0.12s; cursor: pointer; background: none; border: none; /* width accounts for margin on both sides */ width: calc(100% - 2 * var(--sidebar-item-margin-x, 12px)); text-align: left; } .sidebar-item:hover { background-color: var(--sidebar-item-bg-hover, #f0f4ff); color: var(--sidebar-item-color, #374151); } .sidebar-item--active { background-color: var(--sidebar-item-bg-active, #0a3373); color: var(--sidebar-item-color-active, #ffffff); font-weight: 700; } .sidebar-item--active:hover { background-color: var(--sidebar-item-bg-active, #0a3373); color: var(--sidebar-item-color-active, #ffffff); } .sidebar-item-icon { color: var(--sidebar-icon-color, #6b7280); flex-shrink: 0; } .sidebar-item--active .sidebar-item-icon { color: var(--sidebar-icon-color-active, #ffffff); } .sidebar-item-label { flex: 1; } /* Tenant-module-disabled nav item (e.g. Contact Center off for the tenant) — stays visible AND clickable (navigates to the page's own disabled empty state), unlike the chatbot item which is hidden outright. Only the visual treatment changes: muted colors, no active-route tint, a trailing lock icon. */ .sidebar-item--disabled { opacity: 0.55; } .sidebar-item--disabled:hover { background-color: transparent; color: var(--sidebar-item-color, #374151); } .sidebar-item-lock { margin-left: auto; color: var(--sidebar-icon-color, #9ca3af); flex-shrink: 0; } /* `` wrapper around a locked nav item (permission missing or tenant module off). The anchor span must behave like the item it wraps inside the flex-column nav — otherwise the inline-flex default shrink-wraps the link and the row stops filling the rail. */ .sidebar-item-tooltip { display: block; width: 100%; } /* Unread badge */ .sidebar-badge { margin-left: auto; background-color: var(--sidebar-badge-bg, #ff6733); color: var(--sidebar-badge-color, #ffffff); font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Sub-items (dependants, contact-center children) ── */ .sidebar-subitem { display: flex; align-items: center; gap: 8px; padding: var(--sidebar-subitem-padding, 8px 12px 8px 40px); /* Tokenised so a theme that widens --sidebar-item-margin-x can keep sub-items on the same left edge as their parents; 12px is what this always was. */ margin: 0 var(--sidebar-subitem-margin-x, 12px); border-radius: var(--sidebar-item-radius, 8px); font-size: var(--sidebar-subitem-font-size, 13px); font-weight: 400; color: var(--sidebar-subitem-color, #6b7280); text-decoration: none; transition: background-color 0.12s, color 0.12s; } .sidebar-subitem:hover { background-color: var(--sidebar-item-bg-hover, #f0f4ff); } /* Deliberately SOFTER than `.sidebar-item--active`'s solid navy fill: the parent nav item marks "which section you're in" (strong), the sub-item marks "which item within it is active" (subtle) — sharing one solid dark fill made the two blend into a single block instead of reading as a parent→child hierarchy. Heale maps this to the pale blue-50 tint (the same token already used for status-tint surfaces/badges) with navy-700 text, never the same navy as the parent. */ .sidebar-subitem--active { background-color: var(--sidebar-subitem-bg-active, #e8effc); color: var(--sidebar-subitem-color-active, #0a3373); font-weight: 500; } .sidebar-subitem--active:hover { background-color: var(--sidebar-subitem-bg-active, #e8effc); color: var(--sidebar-subitem-color-active, #0a3373); } .sidebar-subitem-icon { color: var(--sidebar-subitem-color, #6b7280); flex-shrink: 0; } .sidebar-subitem--active .sidebar-subitem-icon { color: var(--sidebar-subitem-color-active, #0a3373); } /* Dynamically-resolved sub-item content (e.g. the active quote request's name + status dot under "Quote Requests" — see sidebar.tsx's `dynamicSubItem`). The dot's fill is set inline per-status from the SAME `quoteStatusConfig()` map the dashboard's own status pills read (quotes are the one feature with a large, per-status color vocabulary that isn't worth re-encoding as CSS modifiers here), matching the established convention in `quote-status.tsx`. */ .sidebar-subitem-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sidebar-subitem-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Collapsed icon rail (desktop only — see `.sidebar-collapse-toggle` / mobile media query for the ≤768px cutoff) ── */ @media (min-width: 769px) { .sidebar--collapsed { width: var(--sidebar-width-collapsed, 72px); } .sidebar--collapsed .sidebar-logo { flex-direction: column; gap: 8px; padding: 0 12px; } .sidebar--collapsed .sidebar-logo-text { display: none; } .sidebar--collapsed .sidebar-logo-img { max-width: var(--sidebar-logo-img-max-width-collapsed, 32px); } .sidebar--collapsed .sidebar-collapse-toggle { margin-left: 0; } .sidebar--collapsed .sidebar-item { justify-content: center; padding: 10px 0; gap: 0; position: relative; } .sidebar--collapsed .sidebar-item-label { display: none; } /* Unread count collapses to a plain dot instead of hiding entirely */ .sidebar--collapsed .sidebar-badge { position: absolute; top: 4px; right: 14px; width: 8px; height: 8px; min-width: 0; padding: 0; font-size: 0; border-radius: 50%; } /* No room for labelled children — collapse to the parent icon only */ .sidebar--collapsed .sidebar-subitem { display: none; } /* Profile switcher: icon/avatar only, popover widens back out so its content stays readable (the sidebar has no overflow clipping, so the wider popover overlays the dashboard content instead of being cut off). */ /* Zero the footer padding in the collapsed rail: the trigger's own symmetric padding defines the box. Without this, .profile-switcher's `margin: -16px -20px` cancels only the footer's TOP padding — the 16px BOTTOM padding survives (no following content to pull up) and left ~16px of dead space under the avatar, making the box too tall and pushing the avatar visually high. Border-top is preserved by re-declaring it. */ .sidebar--collapsed .sidebar-footer { padding: 0; /* A footer inset sized for the 240px rail leaves too little room at 72px. Falls through to --sidebar-footer-margin and then to 0, so a theme that sets neither is unchanged. */ margin: var(--sidebar-footer-margin-collapsed, var(--sidebar-footer-margin, 0)); } .sidebar--collapsed .sidebar-footer .profile-switcher { margin: 0; } .sidebar--collapsed .profile-switcher-trigger { justify-content: center; padding: 10px 8px; } .sidebar--collapsed .profile-switcher-trigger-info, .sidebar--collapsed .profile-switcher-chevron { display: none; } .sidebar--collapsed .profile-switcher-popover { left: 8px; right: auto; width: 300px; } } /* ── Footer ── */ /* ── Profile Switcher ──────────────────────────────────────────────────────── */ .profile-switcher { position: relative; } /* When rendered inside .sidebar-footer, break out of the footer's padding so the trigger stretches edge-to-edge and flush to the bottom (no empty gap). */ .sidebar-footer .profile-switcher { margin: -16px -20px; } /* Trigger — full-width clickable row, looks like part of the footer. `border-radius` MATCHES the footer's own (`--sidebar-footer-radius`): the trigger breaks out of `.sidebar-footer`'s padding via the negative margin above, so on a theme where the footer is a rounded card (Heale) a square hover fill visibly spilled past its corners — that was the broken hover, not a missing state. `background-color` (not `background`) so the footer card's own surface shows through when idle instead of being reset. */ .profile-switcher-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 20px; background-color: transparent; border: none; border-radius: var(--sidebar-footer-radius, 0); cursor: pointer; text-align: left; transition: background-color 0.12s; } /* CONTROL hover (this is a button, not a list row) — the sidebar's own control tint, never a hardcoded black wash: rgba(0,0,0,.03) over a cream/white sidebar card read as a grey smudge instead of a tint of the theme. */ .profile-switcher-trigger:hover:not(:disabled) { background-color: var(--sidebar-item-bg-hover, rgba(0, 0, 0, 0.03)); } .profile-switcher-trigger--open { background-color: var(--sidebar-item-bg-hover, rgba(0, 0, 0, 0.04)); } /* Keyboard focus: an inset OUTLINE, so nothing about the box changes — no border appearing, no reflow, and no clipping at the footer's rounded edge. */ .profile-switcher-trigger:focus-visible { outline: 2px solid var(--brand-secondary, #4374f3); outline-offset: -2px; } .profile-switcher-trigger:disabled { cursor: default; } /* Company logo — shown instead of letter avatar when tenant has a logo_url. Tokenised because the fill/plate has to suit whatever asset the tenant uploaded: a transparent PNG needs the pale plate, a mark that ships its own coloured tile needs a white one. Fallbacks are the original values, so every existing theme is unchanged. */ .profile-switcher-logo { width: var(--profile-switcher-logo-size, 30px); height: var(--profile-switcher-logo-size, 30px); object-fit: contain; border-radius: var(--profile-switcher-logo-radius, 6px); flex-shrink: 0; background: var(--profile-switcher-logo-bg, #f1f5fe); } /* Shared avatar used in trigger and popover items */ .profile-switcher-avatar { display: flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #ffffff; flex-shrink: 0; } .profile-switcher-trigger-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .profile-switcher-trigger-name { font-size: 13px; font-weight: 500; color: var(--sidebar-footer-color, #374151); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .profile-switcher-trigger-role { font-size: 11px; color: var(--sidebar-footer-sub-color, #9ca3af); line-height: 1.3; } .profile-switcher-chevron { color: var(--sidebar-footer-sub-color, #9ca3af); flex-shrink: 0; opacity: 0.7; } .profile-switcher-spinner { color: var(--sidebar-footer-sub-color, #9ca3af); flex-shrink: 0; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Popover — slides up from above the trigger. Fixed width (not left+right insets) because the sidebar itself is only var(--sidebar-width, 240px) wide — insets alone left ~216px, too tight for an avatar + name + role label + check icon. The sidebar has no overflow clipping (same reasoning as the collapsed-rail override below), so the popover is free to overlay the dashboard content slightly instead of being squeezed to the rail's width. */ .profile-switcher-popover { position: absolute; bottom: calc(100% + 6px); left: 12px; width: 260px; background: #ffffff; border: 1px solid #d2d9e5; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); overflow: hidden; z-index: 200; animation: popover-up 0.15s ease; } @keyframes popover-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .profile-switcher-popover-label { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px 6px; margin: 0; } .profile-switcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.1s; } .profile-switcher-item:last-child { margin-bottom: 4px; } .profile-switcher-item:hover:not(:disabled) { background: #f1f5fe; } .profile-switcher-item--active { cursor: default; } .profile-switcher-item-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .profile-switcher-item-name { font-size: 13px; font-weight: 500; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .profile-switcher-item-role { font-size: 11px; color: #6b7280; line-height: 1.3; } .profile-switcher-item-check { color: #4374f3; flex-shrink: 0; } .profile-switcher-divider { height: 1px; margin: 4px 0; background: #eef1f6; border: none; } .profile-switcher-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-size: 13px; font-weight: 500; color: #374151; background: none; border: none; cursor: pointer; text-align: left; text-decoration: none; transition: background 0.1s, color 0.1s; } .profile-switcher-action:last-child { margin-bottom: 4px; } .profile-switcher-action:hover { background: #f1f5fe; } .profile-switcher-action-icon { color: #6b7280; flex-shrink: 0; } .profile-switcher-action--danger:hover { background: #fef2f2; color: #dc2626; } .profile-switcher-action--danger:hover .profile-switcher-action-icon { color: #dc2626; } /* ── Sidebar Footer ──────────────────────────────────────────────────────────── */ /* Region 3 of 3 — pinned at the bottom. `flex-shrink: 0` so a nav longer than the viewport can never squeeze or displace it: `` (profile switching + sign-out) has to stay clickable at every viewport height, and it is the region that was being clipped away entirely before `.sidebar-nav` became the scroll region. */ .sidebar-footer { padding: 16px 20px; flex-shrink: 0; border-top: var(--sidebar-footer-border, 1px solid #e5e7eb); /* Optional "profile card" treatment — off by default (transparent/no radius/ no shadow/no margin), enabled per theme via these tokens. */ background-color: var(--sidebar-footer-bg, transparent); border-radius: var(--sidebar-footer-radius, 0); box-shadow: var(--sidebar-footer-shadow, none); margin: var(--sidebar-footer-margin, 0); } .sidebar-user { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; overflow: hidden; } .sidebar-avatar { display: flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 36px; border-radius: 999px; background-color: var(--sidebar-avatar-bg, #4374f3); flex-shrink: 0; } .sidebar-avatar-initials { font-size: 13px; font-weight: 600; color: var(--sidebar-avatar-color, #ffffff); } .sidebar-user-info { min-width: 0; flex: 1; } .sidebar-user-name { font-size: 13px; font-weight: 500; color: var(--sidebar-footer-color, #374151); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-role { font-size: 11px; color: var(--sidebar-footer-sub-color, #9ca3af); margin: 0; text-transform: capitalize; } .sidebar-signout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; font-size: 13px; color: var(--sidebar-footer-sub-color, #9ca3af); background: none; border: none; cursor: pointer; transition: color 0.12s; } .sidebar-signout:hover { color: var(--sidebar-footer-color, #374151); } /* ───────────────────────────────────────────── Dashboard — shared components (dash-topbar, dash-bell, dash-body, dash-stats, dash-stat-card, dash-status) ───────────────────────────────────────────── */ /* ── Top bar ── */ .dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--dash-topbar-padding, 12px 28px); background-color: var(--dash-topbar-bg, #f8fafd); flex-shrink: 0; } /* Separator below topbar — inset so it aligns with content padding */ .dash-topbar-sep { height: 1px; background-color: var(--dash-topbar-sep-color, #d2d9e5); flex-shrink: 0; } .dash-topbar-breadcrumb { margin-bottom: 4px; } /* The title block. Was an inline style on the element (flex/minWidth), which no theme could override — same reason every other visual value lives here. */ .dash-topbar-main { flex: 1; min-width: 0; } .dash-topbar-title-row { display: flex; align-items: center; gap: 10px; } .dash-topbar-title { font-size: var(--dash-topbar-title-size, 32px); font-family: var(--heading-font, inherit); font-weight: 800; color: var(--dash-topbar-title-color, #18181b); margin: 0; letter-spacing: var(--dash-topbar-title-tracking, -0.6px); } .dash-topbar-badge { font-size: var(--dash-topbar-badge-size, 10px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dash-topbar-badge-color, var(--brand-accent, #ff6733)); background-color: var(--dash-topbar-badge-bg, color-mix(in srgb, var(--brand-accent, #ff6733) 12%, white)); padding: 3px 10px; border-radius: var(--dash-topbar-badge-radius, 100px); } /* ── THE INFORMATIONAL BADGE ── A badge that states a neutral FACT rather than a role. The default badge is coral, which on this system means "problem / attention" (role badge, action needed, action-needed row rule) — so `/hr/quotes`'s "Renewal in 136 days" wore it and made the page announce a problem it does not have. Blue-50 ground with navy text: the §1 informational pair, and deliberately NOT one of the §12 status tones (gold/green/coral all carry a verdict) and not the blue-400 action tone either, which belongs to controls. It states a fact and asks for nothing. There is NO urgency variant, on purpose: this codebase has no renewal-urgency notion to reuse, and inventing a threshold here would put a product decision in a stylesheet. Neutral at every distance until one exists. */ .dash-topbar-badge--info { color: var(--dash-topbar-badge-info-color, #0a3373); background-color: var(--dash-topbar-badge-info-bg, #e8effc); } .dash-topbar-title-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 8px; margin-left: 6px; align-self: center; } .dash-topbar-company-suffix { font-size: var(--dash-topbar-title-size, 32px); font-weight: 800; color: var(--dash-topbar-title-color, #0f172a); margin-left: 4px; } .dash-topbar-date { font-size: 13px; color: var(--dash-topbar-date-color, #71717a); margin: 4px 0 0; } .dash-topbar-right { display: flex; align-items: center; gap: 24px; } /* Inline action group inside a `` slot (e.g. a back link + notification bell) — the 10px gap the claim detail topbars use, so the skeleton and real topbars stay pixel-identical without an inline style. */ .dash-topbar-actions { display: flex; align-items: center; gap: 10px; } /* The `/hr` "Insured lives" mini-widget that used to live in the topbar's right slot was REMOVED with the Charte 2026 pass on that page: §5 allows the topbar to carry title + subtitle + role badge + bell and nothing else, and the three numbers it showed are already the `.dash-stats` row's first two cards. Its summary now reads as the topbar SUBTITLE (`hrDashboardSummary()`), so `.hr-dash-insured-widget` and its siblings are gone, along with their `--hr-dash-widget-*` tokens — no other surface ever consumed them. */ .dash-bell-btn { display: flex; align-items: center; justify-content: center; width: var(--dash-bell-size, 46px); height: var(--dash-bell-size, 46px); border-radius: 50%; background-color: var(--dash-bell-bg, #ffffff); border: 1px solid var(--dash-bell-border, #e5e7eb); cursor: pointer; color: var(--dash-bell-color, #6b7280); position: relative; flex-shrink: 0; box-shadow: var(--dash-bell-shadow, 0 1px 3px rgba(0, 0, 0, 0.06)); } .dash-bell-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background-color: var(--dash-bell-dot-color, var(--brand-accent, #ff6733)); border: 1.5px solid var(--dash-topbar-bg, #ffffff); } /* ── Scrollable body ── */ .dash-body { flex: 1; min-height: 0; overflow-y: auto; /* Reserve the scrollbar's width even when content doesn't overflow, so the visible content width stays constant across steps/pages regardless of whether that particular one happens to need vertical scroll. */ scrollbar-gutter: stable; padding: var(--dash-body-padding, 24px 28px); background-color: var(--dash-body-bg, #f8fafd); display: flex; flex-direction: column; gap: 20px; } /* Prevent children from shrinking — they must overflow into the scroll instead */ .dash-body > * { flex-shrink: 0; } /* Kanban-board variant (quotes, claims boards): the board scrolls internally, so the body itself must not scroll and its card child must grow to fill it instead of being clipped to content height. Doubled class name for specificity over `.dash-body > *` above. (`.hr-dash-recent-card--kanban`, the card-side half of this pair, was dropped — no surface renders it; §11's board is still unbuilt.) */ .dash-body.dash-body--kanban { overflow-y: hidden; } /* ── HR dashboard — the coverage band + rail surface (`/hr` only) ── This family REPLACED the dismissible "Your team, covered" marketing hero and the dark quick-action stat card, both deleted here and in the Heale theme (the new stats row renders neither). `/hr` is the only consumer of every class below, which is what licenses styling them on their base rule — see the blast-radius guard in `src/app/(dashboard)/hr/__tests__/hr-dashboard-charte-2026.test.ts`. Every value is a consumed token with a literal fallback, so a white-label that maps nothing still renders a coherent card. */ .hr-dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--hr-dash-grid-gap, 20px); align-items: start; } .hr-dash-col { display: flex; flex-direction: column; gap: var(--hr-dash-col-gap, 18px); min-width: 0; } /* ── Coverage band ── §8: no border of its own — the shadow carries it. The insurer panel is flush to the band's right edge, so the band clips its children instead of padding them. */ .hr-dash-band { display: flex; align-items: stretch; overflow: hidden; border: none; border-radius: var(--hr-dash-band-radius, 18px); background: var(--hr-dash-band-bg, #0a3373); box-shadow: var(--hr-dash-band-shadow, none); min-height: var(--hr-dash-band-min-height, 168px); } .hr-dash-band-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--hr-dash-band-gap, 22px); padding: var(--hr-dash-band-padding, 26px 28px); } .hr-dash-band-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .hr-dash-band-title { margin: 0; font-family: var(--heading-font, inherit); font-size: var(--hr-dash-band-title-size, 21px); font-weight: 800; letter-spacing: var(--hr-dash-band-title-tracking, -0.02em); color: var(--hr-dash-band-title-color, #ffffff); } .hr-dash-band-text { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 19px; color: var(--hr-dash-band-text-color, rgba(255, 255, 255, 0.72)); } /* §6 primary: blue-400 pill, white label, 44px tap target. */ .hr-dash-band-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; min-height: 44px; padding: var(--hr-dash-band-cta-padding, 11px 22px); border: none; border-radius: var(--hr-dash-band-cta-radius, 999px); background-color: var(--hr-dash-band-cta-bg, #4374f3); color: var(--hr-dash-band-cta-color, #ffffff); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.15s; } .hr-dash-band-cta:hover { background-color: var(--hr-dash-band-cta-bg-hover, #1d4ed8); } /* The insurer panel. Dropped entirely (not rendered) when there is no insurer, so the dark band spans the full width. */ .hr-dash-band-aside { flex-shrink: 0; width: var(--hr-dash-band-aside-width, 188px); padding: var(--hr-dash-band-aside-padding, 22px); display: flex; align-items: center; justify-content: center; background-color: var(--hr-dash-band-aside-bg, #4374f3); } .hr-dash-band-logo { width: 100%; height: auto; max-height: var(--hr-dash-band-logo-max-height, 56px); object-fit: contain; } /* Name-as-text fallback for an insurer with no logo on file. */ .hr-dash-band-insurer { margin: 0; text-align: center; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--hr-dash-band-insurer-color, #ffffff); } /* ── Coverage ring ── The arc is an SVG stroke so the percentage is one geometric value (`stroke-dashoffset`, an ATTRIBUTE, never an inline style); every colour is a token here. */ .hr-dash-ring { position: relative; flex-shrink: 0; width: var(--hr-dash-ring-size, 84px); height: var(--hr-dash-ring-size, 84px); display: flex; align-items: center; justify-content: center; } .hr-dash-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .hr-dash-ring-track { fill: none; stroke: var(--hr-dash-ring-track-color, rgba(255, 255, 255, 0.2)); stroke-width: var(--hr-dash-ring-width, 5); } .hr-dash-ring-bar { fill: none; stroke: var(--hr-dash-ring-bar-color, #ffffff); stroke-width: var(--hr-dash-ring-width, 5); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; } .hr-dash-ring-label { position: relative; font-size: var(--hr-dash-ring-label-size, 19px); font-weight: 800; letter-spacing: -0.02em; color: var(--hr-dash-ring-label-color, #ffffff); } /* ── Card rows (attention + waiting-for-a-policy) ── */ .hr-dash-row { display: flex; align-items: center; gap: 12px; padding: var(--hr-dash-row-padding, 13px 20px); } .hr-dash-row:not(:last-child) { border-bottom: 1px solid var(--hr-dash-row-border, #eaeff6); } /* §12: an urgent row gets a subtle tint of the rejected tone, never a full fill. */ .hr-dash-row--urgent { background-color: var(--hr-dash-row-urgent-bg, rgba(220, 38, 38, 0.05)); } .hr-dash-row-main { flex: 1; /* Required for the sub-line's truncation to bite: without it the flex child sizes to its longest word and pushes the row's action pill out instead. */ min-width: 0; } .hr-dash-row-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--hr-dash-row-title-color, #18181b); } /* ONE line, ellipsised. A server-composed attention sub-line can run to a full paragraph ("Still outstanding: Phone number, Gender, …"); wrapping it turns a dense list of rows into a wall of text and pushes the CTA off the row. The full string stays reachable as the element's `title`. */ .hr-dash-row-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--hr-dash-row-sub-color, #9ca3af); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hr-dash-row-link { color: inherit; text-decoration: none; } .hr-dash-row-link:hover { text-decoration: underline; } .hr-dash-row-aside { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .hr-dash-wait-avatar { flex-shrink: 0; width: var(--hr-dash-avatar-size, 34px); height: var(--hr-dash-avatar-size, 34px); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background-color: var(--hr-dash-avatar-bg, #eef2f9); color: var(--hr-dash-avatar-color, #0a3373); } /* ── "Need a hand?" broker card ── Static pending broker features: the media block is a token-tinted panel, not a remote image, so no white-label ships a stranger's photograph. */ .hr-dash-broker-media { position: relative; height: var(--hr-dash-broker-media-height, 128px); background: var(--hr-dash-broker-media-bg, linear-gradient(135deg, #eef2f9 0%, #ffffff 100%)); } .hr-dash-broker-caption { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background-color: var(--hr-dash-broker-caption-bg, #ffffff); color: var(--hr-dash-broker-caption-color, #0a3373); } .hr-dash-broker-body { padding: var(--hr-dash-broker-body-padding, 18px 20px 20px); display: flex; flex-direction: column; gap: 8px; } .hr-dash-broker-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--hr-dash-broker-title-color, #18181b); } .hr-dash-broker-text { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--hr-dash-broker-text-color, #4b5563); } .hr-dash-broker-actions { display: flex; gap: 10px; margin-top: 6px; } /* Equal-width pair (never label-length-driven), each keeping the 44px target. */ .hr-dash-broker-actions > * { flex: 1; justify-content: center; min-height: 44px; } /* ── Loading parity ── The skeleton reuses the band shell so nothing shifts when the fetch resolves; only the fill flips to a light surface, since the shimmer bars are dark-on-light. */ .hr-dash-band--loading { background: var(--hr-dash-band-loading-bg, #ffffff); } /* ── Stats row ── */ .dash-stats { display: flex; gap: 16px; } /* A row that carries only one or two metrics, because the rest of them belong to a section this role can't see (e.g. the insurer dashboard without `portfolio.policies:read`, which keeps only "Pending Tasks"). `.dash-stat-card`'s `flex: 1` would stretch that lone card the full page width; here the cards keep a card's width and the row simply ends. The mobile 2-column grid below already ignores flex, so it needs no counterpart rule. */ .dash-stats--compact .dash-stat-card { flex: 0 1 var(--dash-stats-compact-basis, 260px); } .dash-stat-card { flex: 1; background-color: var(--dash-stat-bg, #ffffff); border: 1px solid var(--dash-stat-border, #d2d9e5); border-radius: var(--dash-stat-radius, 14px); padding: var(--dash-stat-padding, 22px 24px); /* Soft "floating card" shadow — off by default, set by themes that want it. */ box-shadow: var(--dash-stat-shadow, none); display: flex; flex-direction: column; gap: 2px; } .dash-stat-label { font-size: var(--dash-stat-label-size, 10px); font-weight: var(--dash-stat-label-weight, 600); letter-spacing: var(--dash-stat-label-tracking, 0.09em); text-transform: uppercase; color: var(--dash-stat-label-color, #9ca3af); margin: 0; } .dash-stat-value { font-size: var(--dash-stat-value-size, 36px); font-weight: var(--dash-stat-value-weight, 700); letter-spacing: var(--dash-stat-value-tracking, normal); color: var(--dash-stat-value-color, #18181b); line-height: 1.1; margin: 4px 0 2px; } .dash-stat-sub { font-size: 13px; color: var(--dash-stat-sub-color, #9ca3af); margin: 0; } /* ── Stat card states () ── Previously inline styles on the component; promoted here so a white-label can retint them and so no call site needs a style prop. */ /* A card that acts (filter toggle via `onClick`, drill-down via `href`). The affordance has to read BEFORE the pointer arrives, so the tone comes from the control-hover token — never the row-hover one, which is a cream wash and invisible on an already-light card. As a `` it also has to shed the anchor's inherited text colour/underline. */ .dash-stat-card--clickable { text-align: left; cursor: pointer; font: inherit; color: inherit; text-decoration: none; transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease; } .dash-stat-card--clickable:hover { /* Own token, falling back to the shared control hover: these cards act as filters, so a theme tinting them must not be forced to tint every icon button too. */ background-color: var(--dash-stat-bg-hover, var(--ins-pol-filter-bg-hover, #f2ede5)); box-shadow: var(--dash-stat-shadow-hover, var(--dash-stat-shadow, none)); } .dash-stat-card--clickable:focus-visible { outline: 2px solid var(--brand-secondary, #4374f3); outline-offset: 2px; } /* Selected state. Tokenised because the border + hard 1px ring together read as a 2px saturated outline, which is heavy on any theme whose --brand-primary is a deep, saturated colour — and it fights the borderless-card convention (cards are shadow-lifted, not outlined). Fallbacks are the original values, so themes that want the outline keep it exactly. */ .dash-stat-card--active { border-color: var(--dash-stat-active-border, var(--brand-primary, #0a3373)); box-shadow: var(--dash-stat-active-shadow, 0 0 0 1px var(--brand-primary, #0a3373)); } .dash-stat-card--highlight { border-color: var(--dash-stat-highlight-border, #f59e0b); background-color: var(--dash-stat-highlight-bg, #fffbeb); } /* Loading placeholders: the real text stays in the flow (reserving its height) with `visibility: hidden`, and the shimmer overlays it. */ .dash-stat-slot { position: relative; } .dash-stat-hidden { visibility: hidden; } .dash-stat-shimmer { position: absolute; inset: 0; margin: auto 0; border-radius: 3px; } .dash-stat-shimmer--label { height: 10px; width: 55%; } .dash-stat-shimmer--value { height: 60%; width: 45%; border-radius: 6px; } .dash-stat-shimmer--sub { height: 10px; width: 70%; } /* ───────────────────────────────────────────── Dashboard — HR specific (hr-dash-grid/-band/-row/-broker above, hr-dash-recent-*) ───────────────────────────────────────────── */ /* ── Recent Employees table card ── */ .hr-dash-recent-card { background-color: var(--hr-dash-recent-card-bg, #ffffff); border: 1px solid var(--hr-dash-recent-card-border, #d2d9e5); border-radius: var(--hr-dash-recent-card-radius, 16px); /* Soft "floating card" shadow — off by default, set by themes that want it. */ box-shadow: var(--hr-dash-recent-card-shadow, none); overflow: hidden; } /* Tinted variant — a card that's a read-only summary rather than an editable list: `/hr/quotes/new`'s "Using your company information" and "What happens next". Same shell (radius/shadow), a tinted fill instead of white. It has its OWN token because this surface sits directly ON THE PAGE BODY, while `--modal-total-bg` — the tone it used to borrow — is §8's INNER-CELL tone: cream-50 inside a WHITE card, which is what every one of its ~28 other consumers is (`.modal-summary`, `.task-detail-meta-cell`, `.ci-count-summary`, `.qw-tpl-block`…). On Heale that token resolves to cream-50 and `--dash-body-bg` is cream-50 too, so a tinted card painted with it was literally invisible — yet retuning the shared token would have wrongly repainted all 28 inner cells. Hence a dedicated token, falling back THROUGH the old one so a theme that maps only `--modal-total-bg` (difc) renders exactly as it does today. */ .hr-dash-recent-card--tinted { background-color: var(--hr-dash-recent-card-tinted-bg, var(--modal-total-bg, #eef2f9)); } .hr-dash-recent-head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--hr-dash-recent-head-padding, 20px 24px 16px); border-bottom: 1px solid var(--hr-dash-recent-head-border, #eaeff6); } /* Head that carries only a right-aligned action (no title) — e.g. the insurer policy Invoices card's "Create Invoice". */ .hr-dash-recent-head--end { justify-content: flex-end; } .hr-dash-recent-title { font-size: 17px; font-family: var(--heading-font, inherit); font-weight: 700; color: var(--hr-dash-recent-title-color, #18181b); margin: 0 0 3px; } .hr-dash-recent-subtitle { font-size: 13px; color: var(--hr-dash-recent-subtitle-color, #9ca3af); margin: 0; } .hr-dash-recent-btn-outline { display: inline-flex; align-items: center; gap: 7px; padding: var(--hr-dash-recent-btn-padding, 8px 16px); border-radius: var(--hr-dash-recent-btn-radius, 100px); background-color: var(--hr-dash-recent-btn-outline-bg, #ffffff); color: var(--hr-dash-recent-btn-outline-color, #374151); font-size: 13px; font-weight: 600; border: var(--hr-dash-recent-btn-outline-border-width, 1px) solid var(--hr-dash-recent-btn-outline-border, #d1d5db); cursor: pointer; transition: background-color 0.15s; white-space: nowrap; } .hr-dash-recent-btn-outline:disabled { opacity: .5; cursor: not-allowed; } .hr-dash-recent-btn-outline:hover { background-color: var(--hr-dash-recent-btn-outline-bg-hover, #f9fafb); } .hr-dash-recent-btn-primary { display: inline-flex; align-items: center; gap: 7px; /* Radius/padding/shadow are tokenized so a theme can move from the historical pill (100px) to the mockup's soft-rounded rectangle without a base change. */ padding: var(--hr-dash-recent-btn-padding, 8px 16px); border-radius: var(--hr-dash-recent-btn-radius, 100px); box-shadow: var(--hr-dash-recent-btn-primary-shadow, none); background-color: var(--hr-dash-recent-btn-primary-bg, var(--brand-primary, #0a3373)); color: var(--hr-dash-recent-btn-primary-color, #ffffff); font-size: 13px; font-weight: var(--hr-dash-recent-btn-weight, 600); border: none; cursor: pointer; transition: opacity 0.15s, background-color 0.15s; white-space: nowrap; } .hr-dash-recent-btn-primary:hover { opacity: var(--hr-dash-recent-btn-primary-hover-opacity, 0.88); background-color: var(--hr-dash-recent-btn-primary-bg-hover, var(--hr-dash-recent-btn-primary-bg, var(--brand-primary, #0a3373))); } /* Charte §6: disabled is 45% opacity, never a grey fill swap. The `:disabled:hover` pair exists purely for specificity — a disabled button must not visually react to mouse-over (no darker fill, no opacity dip toward the hover value), and `:disabled:hover` (0,3,0) beats the plain `:hover` rule above (0,2,0) regardless of source order. */ .hr-dash-recent-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .hr-dash-recent-btn-primary:disabled:hover { opacity: 0.45; cursor: not-allowed; background-color: var(--hr-dash-recent-btn-primary-bg, var(--brand-primary, #0a3373)); } /* The split primary button (a main half + a caret half) is RETIRED: its only caller, the census "Add member" control, is now one button opening a menu of equal choices (``), so there is no seam between two halves to draw. The disabled pair above still applies to that trigger — it IS a plain `.hr-dash-recent-btn-primary`, which is why the rule is kept and the split modifiers are not. */ /* " Saving…" label inside any button — layout only, no colour, so it inherits whichever button it sits in. Replaces the inline `style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}` span that every submitting modal footer used to repeat. */ .btn-busy { display: inline-flex; align-items: center; gap: 6px; } /* Dropdown-trigger chevron that flips when its menu is open. Geometry only (no colour — it inherits the button), so it works on a primary, outline or icon trigger alike. Replaces an inline `style={{ transition, transform }}`. */ .btn-chevron { transition: transform 0.15s; } .btn-chevron--open { transform: rotate(180deg); } .hr-dash-recent-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; background: transparent; color: var(--brand-primary, #0a3373); font-size: 13px; font-weight: 600; border: 1.5px solid var(--brand-primary, #0a3373); cursor: pointer; transition: opacity 0.15s; white-space: nowrap; text-decoration: none; } .hr-dash-recent-btn-secondary:hover { opacity: 0.78; } .hr-dash-recent-btn-accent { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; background-color: var(--hr-dash-recent-btn-accent-bg, var(--brand-accent, #ff6733)); color: var(--hr-dash-recent-btn-accent-color, #ffffff); font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; text-decoration: none; } .hr-dash-recent-btn-accent:hover { opacity: 0.88; } .hr-dash-recent-btn-accent:disabled { opacity: 0.4; cursor: not-allowed; } /* The coral-tinted sibling of `.hr-dash-recent-btn-soft-primary` was deleted with the `/hr` Charte pass: nothing rendered it, and §6 rules coral out as a CTA colour, so a ready-made soft-coral button is a trap rather than a spare part. */ .hr-dash-recent-btn-soft-primary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; background-color: var(--hr-dash-recent-btn-soft-primary-bg, color-mix(in srgb, var(--brand-primary, #0a3373) 12%, white)); color: var(--hr-dash-recent-btn-soft-primary-color, var(--brand-primary, #0a3373)); font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.15s; white-space: nowrap; text-decoration: none; } .hr-dash-recent-btn-soft-primary:hover { background-color: var(--hr-dash-recent-btn-soft-primary-bg-hover, color-mix(in srgb, var(--brand-primary, #0a3373) 20%, white)); } /* Table */ .hr-dash-recent-table { width: 100%; border-collapse: collapse; } .hr-dash-recent-th { padding: var(--hr-dash-recent-th-padding, 11px 24px); font-size: var(--hr-dash-recent-th-size, 11px); font-weight: var(--hr-dash-recent-th-weight, 600); letter-spacing: var(--hr-dash-recent-th-tracking, 0.07em); text-transform: uppercase; color: var(--hr-dash-recent-th-color, #9ca3af); background-color: var(--hr-dash-recent-th-bg, transparent); text-align: left; border-bottom: 1px solid var(--hr-dash-recent-row-border, #eaeff6); white-space: nowrap; } .hr-dash-recent-tr:not(:last-child) .hr-dash-recent-td { border-bottom: 1px solid var(--hr-dash-recent-row-border, #eaeff6); } /* THE standard row-hover background for the whole app. `--hr-dash-recent-row-hover-bg` is the single token every ROW / LIST-ITEM hover resolves to (tables here, the Task Manager's `.tm-tr`, the member-form + Contact Center rail rows via `.mf-member-btn`, the quote-wizard rows, claim document rows) — Heale maps it to cream-50, the same warm tone as the page background. Off by default (transparent) so a theme opts in. Deliberately NOT used for BUTTON/CONTROL hovers (`.ins-pol-action-btn`, `.hr-dash-recent-btn-outline`, `.dropdown-item`, `.modal-close`, sidebar items…): those keep their own hover tokens (`--ins-pol-filter-bg-hover` is now exclusively the CONTROL hover token, `--sidebar-item-bg-hover` the nav one) because a cream wash on an already-light control would be invisible. Row-hover and control-hover used to share `--ins-pol-filter-bg-hover`, which is how an off tone leaked into rows. */ .hr-dash-recent-tr:hover .hr-dash-recent-td { background-color: var(--hr-dash-recent-row-hover-bg, transparent); } /* Census employee row expand/collapse + nested dependent rows (rendered as flattened rows, styled via rowClassName since the shared component only accepts a className per row, not inline style). */ /* Expanded parent / nested child rows. Tokenized so the Charte themes can use their warm neutrals instead of the historical cool blue (which other white-labels keep via these fallbacks). */ .hr-dash-recent-tr--clickable { cursor: pointer; } .hr-dash-recent-tr--expanded { background-color: var(--hr-dash-recent-tr-expanded-bg, #f8fafd); } .hr-dash-recent-tr--dependent { background-color: var(--hr-dash-recent-tr-dependent-bg, #eaf0fb); } /* `.hr-dash-recent-tr--selected` (the single-select table's active-row tint) was deleted with the `/hr` Charte pass — the insurer quote detail page it was written for no longer renders it, and §12 now specifies row selection as a blue-400 left rule + blue-400 @0.06 fill (`.tm-tr--selected`), so reviving this one would contradict the contract rather than save work. */ /* Two-layer coverage status (spec: docs/specs/census/coverage-status.md): a binary COVERED/NOT COVERED badge with a lifecycle-state sub-label + dot. */ .cov-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .cov-cell--inline { flex-direction: row; align-items: center; gap: 8px; } .cov-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } /* Charte 2026 §2 — a status surface is the semantic token at 12–16% for the fill with the SAME token at 100% for the label. The pre-Charte flattened pairs stay as the fallbacks, so only themes that map the tokens move. */ .cov-badge--covered { background: var(--cov-covered-bg, #e6f4ec); color: var(--cov-covered-color, #1f7a45); } .cov-badge--not { background: var(--cov-not-bg, #fbe9e9); color: var(--cov-not-color, #b42318); } .cov-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cov-state-color, #64748b); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cov-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; } /* Tone dots — reused by Census coverage badges, the Task Manager Activity timeline (`.task-detail-timeline-dot`) and the Claims conversation timeline: the SAME neutral/pending/info/success/error semantic everywhere, so retuning to the Charte tone tokens (already mapped in the Heale theme) is a consistent correction, not a one-off. Old hex kept as the fallback for themes with no override. */ .cov-dot--grey { background: var(--dash-status-inactive-color, #94a3b8); } .cov-dot--amber { background: var(--dash-status-pending-color, #eca04b); } .cov-dot--blue { background: var(--brand-secondary, #4374f3); } .cov-dot--green { background: var(--dash-status-approved-color, #32a15e); } .cov-dot--red { background: var(--dash-status-rejected-color, #dc2626); } /* Prominent coverage status for the member-editor card () — same colours/tokens as the compact .cov-* cell, but a larger pill + bigger dot/state text so it reads as a proper status row inside the card rather than a tiny table badge. */ .cov-detail { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cov-detail-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .cov-detail-badge--covered { background: var(--cov-covered-bg, #e6f4ec); color: var(--cov-covered-color, #1f7a45); } .cov-detail-badge--not { background: var(--cov-not-bg, #fbe9e9); color: var(--cov-not-color, #b42318); } .cov-detail-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cov-detail-state-color, #374151); } .cov-detail-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } /* Borderless cell input used inside the census spreadsheet editor — keeps the bare "grid cell" look while reusing shared inputs (e.g. ). GEOMETRY IS LOCAL ON PURPOSE: 32px / radius 4 / 13px is the spreadsheet row rhythm, not the field standard — a 44px cell would break the grid. Colour and state come from the contract, which is what the cell was missing: its focus border was a bare `#4374f3` literal with no token at all. The resting border stays `transparent` as a structural choice (reserve the 1px so focus does not reflow the row), NOT as a colour. */ .census-sheet-input { width: 100%; height: 32px; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; font-size: 13px; outline: none; background-color: transparent; color: var(--field-color, inherit); } .census-sheet-input::placeholder { color: var(--field-placeholder-color, #9ca3af); } .census-sheet-input:focus { border-color: var(--field-focus-border, var(--brand-secondary, #4374f3)); background-color: var(--field-bg, #ffffff); } .hr-dash-recent-td { padding: var(--hr-dash-recent-td-padding, 14px 24px); font-size: 14px; color: var(--hr-dash-recent-td-color, #374151); vertical-align: middle; } .hr-dash-recent-td--name { font-weight: 600; color: var(--hr-dash-recent-name-color, #18181b); } .hr-dash-recent-td--id { text-align: right; color: var(--hr-dash-recent-id-color, #6b7280); font-size: 13px; } .hr-dash-recent-th--right { text-align: right; } .hr-dash-recent-th--center, .hr-dash-recent-td--center { text-align: center; } /* Tighter left padding than the default 24px — used by loading skeletons whose first column (e.g. Member) mirrors a column that passes a tight headerStyle/cellStyle padding directly as a prop (page.tsx), which a plain here can't replicate via a prop — a scoped class instead. */ .hr-dash-recent-th--tight-left { padding-left: 10px; } .hr-dash-recent-td--right { text-align: right; } .hr-dash-recent-empty { color: var(--hr-dash-recent-empty-color, #d1d5db); } /* ── HR census list (/hr/census) ── The table itself uses the SHARED `.hr-dash-recent-*` chrome with no page-scoped row-height modifier: it follows the same rhythm as the insurer portfolio/census tables (Charte 2026). Only the cells that don't exist anywhere else get a class here. */ /* Selection column — always present (there is no select-mode toggle). The native checkbox carries a UA margin around its 15px box; with zero horizontal padding it sat flush against the card's rounded corner (`.hr-dash-recent-card` is `overflow: hidden; border-radius: 16px`) and clipped on the first/last row — hence `margin: 0` on the input plus an explicit left buffer on the cell. */ .census-select-cell { width: 36px; padding-left: 14px; padding-right: 4px; text-align: center; } .census-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-primary, #0a3373); cursor: pointer; vertical-align: middle; } /* Member cell — built on `.ins-pol-company--inline` (the shared avatar+name row); these add only the expand affordance, truncation and the dependent indent. */ .census-expand { width: 16px; flex-shrink: 0; display: inline-flex; color: var(--ins-pol-th-sort-color, #cbd5e1); } .census-expand--open { color: var(--brand-secondary, #4374f3); } .census-member-body { min-width: 0; flex: 1; } .census-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A dependant belongs to the employee above it. That relationship is drawn as a TREE — a hairline descending from the parent row with an elbow into each child's name — and NOT as a tinted row: a fill reads as "selected/other kind of row", and a family is a shape, not a state. Both census tables (HR and insurer) use it, so the two surfaces agree. The connector lives INSIDE the member cell (never an extra column), so 's column alignment is untouched, and it is drawn with pseudo-elements so a clickable/hovered row keeps its own background. */ .census-member--dependent { padding-left: 0; } /* 30px so the child's name sits a readable step in from its parent's, while the trunk still hangs from the parent's own chevron column (8px). */ .census-tree { position: relative; flex: 0 0 auto; align-self: stretch; width: 30px; min-height: 18px; } .census-tree::before, .census-tree::after { content: ''; position: absolute; background-color: var(--census-tree-line, var(--hr-dash-recent-row-border, #d2d9e5)); } /* The rule is CONTAINED in its own row's cell — it never paints across the row separator or outside the cell box (no negative offsets), so the table chrome stays unbroken and on top and the tree reads as part of each row rather than as an overlay drawn over the table. A middle dependant carries the rule from edge to edge (a tee); the LAST one stops it at the elbow — that stop is what makes the connector read as a tree rather than as decoration. Aligned to the employee row's expand chevron (`.census-expand`, 16px) so the trunk hangs from the parent's own glyph. */ .census-tree::before { left: 8px; top: 0; bottom: 0; width: 1px; } .census-tree--last::before { bottom: 50%; } .census-tree::after { left: 8px; top: 50%; width: 16px; height: 1px; } .census-relation { text-transform: capitalize; } /* Dependents count cell */ .census-dep-count { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--hr-dash-recent-name-color, #18181b); white-space: nowrap; } .census-dep-count svg { color: var(--ins-pol-subtext-color, #9ca3af); } /* Account-connection icon column. Tone comes from the shared status tokens so it can't drift from the badges using the same semantics. */ .census-connected-cell { width: 44px; text-align: center; } .census-link-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: none; background: none; cursor: pointer; } .census-link-btn--connected { color: var(--dash-status-approved-color, #065f46); } .census-link-btn--invited { color: var(--dash-status-pending-color, #a16207); } .census-link-btn--not-connected { color: var(--dash-status-rejected-color, #b42318); } /* Its dropdown: a read-only email line, or the email next to a Send/Resend action. */ .census-email-item { cursor: default; } .census-invite-menu { display: flex; align-items: center; gap: 10px; padding: 2px 4px; } .census-email-text { font-size: 12.5px; color: var(--ins-pol-type-color, #374151); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .census-invite-action { width: auto; flex-shrink: 0; } /* Status badges */ .dash-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 11px; /* Weight is tokenized so a theme can dial it down (mockup uses 600) without changing every badge in the other white-labels. */ font-weight: var(--dash-status-weight, 700); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .dash-status--approved { background-color: var(--dash-status-approved-bg, #d1fae5); color: var(--dash-status-approved-color, #059669); } .dash-status--pending { background-color: var(--dash-status-pending-bg, #fef3c7); color: var(--dash-status-pending-color, #d97706); } .dash-status--rejected { background-color: var(--dash-status-rejected-bg, #fee2e2); color: var(--dash-status-rejected-color, #dc2626); } .dash-status--inactive { background-color: var(--dash-status-inactive-bg, #eef2f6); color: var(--dash-status-inactive-color, #6b7280); } /* Draft — distinct from Inactive: a policy that was never activated yet (created via Add Policy, status='draft') vs one that lapsed after being active. Reuses the pending/amber tokens so it reads as "not live yet" rather than "was live, now dead" (that's --rejected/terminated). */ .dash-status--draft { background-color: var(--dash-status-pending-bg, #fef3c7); color: var(--dash-status-pending-color, #d97706); } /* /hr/quotes list table — scoped compact rhythm + softened nested-category treatment. Deliberately its OWN modifiers, not edits to the shared `.hr-dash-recent-th/-td` (reused across dozens of other tables) nor to the shared `.hr-dash-recent-tr--dependent` (reused as-is by the census page's employee->dependant rows). A quote's categories are flattened as a permanent sibling row under nearly EVERY quote here (unlike census dependants, which are the exception, not the rule), so `--dependent`'s saturated blue fill under every single row reads as heavy rather than tree-like — hence a lighter, page-scoped treatment instead of reusing or editing that shared class. */ .qd-quotes-table .hr-dash-recent-th { padding: 9px 24px; } .qd-quotes-table .hr-dash-recent-td { padding: 10px 24px; } /* Quote (own) row — no shared row-hover convention exists on `.hr-dash-recent-tr` itself (each page opts in individually), so this page gets one for a clean "scannable list" feel. */ .qd-quotes-tr--quote:hover { background-color: #f8fafc; } /* Category (child) row — a soft neutral tint + a thin left rule read as "nested under its parent" without the visual weight of a solid color block repeated down the whole table. */ .qd-quotes-tr--category { background-color: #fafbfd; box-shadow: inset 3px 0 0 #e1e7f0; } .qd-quotes-tr--category:hover { background-color: #f2f5f9; } /* Muted em-dash for a category row's columns that only apply at the quote level (category count / created / expires) — keeps every row visually "complete" instead of a run of blank cells that could read as a rendering bug rather than an intentional "not applicable here". */ .qd-quotes-td-na { color: #cbd5e1; } /* Category-row tree indicator — replaces an ASCII `└` glyph (looked dated) with a small filled dot. The row's own left rule (`.qd-quotes-tr--category`'s inset box-shadow) already reads as a connecting spine, so this dot only needs to mark "this is a nested leaf", not redraw the whole connector. */ .qd-quotes-cat-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #b6c0cf; } /* Per-quote expand/collapse toggle — each quote row is independently collapsible (categories hidden by default), unlike the census page's single-expanded-row pattern. A plain icon button, not a whole-row click target, so it never conflicts with the quote name's own navigation link sitting right next to it in the same cell. */ .qd-quotes-expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border: none; background: none; padding: 0; cursor: pointer; color: #9ca3af; border-radius: 4px; } .qd-quotes-expand-btn:hover { background-color: #eef2f6; color: var(--brand-secondary, #4374f3); } /* Per-category contextual action — sits in the RIGHT-aligned Actions column (same cell position the quote row's own View button occupies, wrapped in the shared `.ins-pol-row-actions`), not beside the category name, so every row in the table keeps its actions in one consistent rightmost column regardless of nesting depth. Which action applies depends on the category's own `display_status` (Compare offers / Go to negotiation / View Policy). Compact + pill-shaped so it reads as a secondary nudge, not a competing CTA. `--primary` (solid navy, matching `.hr-dash-recent-btn-primary`) is used only for "Go to negotiation →" — the one action that means HR has something actively waiting on them; the default outlined style covers the lower-urgency Compare offers / View Policy actions. */ .qd-quotes-cat-action { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--brand-secondary, #4374f3); background: #fff; color: var(--brand-secondary, #4374f3); transition: background-color 0.12s; } .qd-quotes-cat-action:hover { background-color: #eef2ff; } .qd-quotes-cat-action--primary { border: none; background-color: var(--brand-primary, #0a3373); color: #fff; } .qd-quotes-cat-action--primary:hover { opacity: 0.88; } /* Quote (rollup) vs category (child) status pills must read as a clear size/weight HIERARCHY in this table's Status column, not as two identically-styled chips — a quote row's pill is the "parent" verdict, each nested category row's pill is a smaller, subordinate detail. `.qd-summary-status` (shared with the detail page's summary bar, which keeps its own softer default look there) is bumped up to the bigger, bolder chip; `.dash-status` (the category badge) is scaled down below its own shared default. Both overrides are scoped to this table only. */ .qd-quotes-table .qd-summary-status { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 11px; padding: 3px 10px; } .qd-quotes-table .qd-quotes-tr--category .dash-status { font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; padding: 2px 8px; } /* Category name link inside the HR quote detail categories table (`/hr/quotes/[id]`) — replaces the old whole-card onClick; only the name cell navigates now. Status badges in that same table map each status onto a visually distinct `.dash-status--*` modifier (inactive/pending/approved/ quoting/action/pre-selected/won/rejected) — see `CATEGORY_STATUS_BADGE` in the page for the exact mapping and why each choice was made. */ .qd-cat-link { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--brand-primary, #0a3373); cursor: pointer; text-align: left; } .qd-cat-link:hover { text-decoration: underline; } /* Trailing "Add category" row spanning the categories table — the primary affordance for adding a category from within the table itself. */ .qd-cat-add-row { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--brand-secondary, #4374f3); cursor: pointer; } .qd-cat-add-row:hover { color: var(--brand-primary, #0a3373); } .qd-cat-add-row:disabled { color: var(--ins-pol-subtext-color, #9ca3af); cursor: not-allowed; } /* Footer */ .hr-dash-recent-footer { display: flex; justify-content: flex-end; padding: var(--hr-dash-recent-footer-padding, 14px 24px); border-top: 1px solid var(--hr-dash-recent-row-border, #eaeff6); } /* Centred variant — the rail's "Show N more" link, which reads as a continuation of the list rather than a corner action. */ .hr-dash-recent-footer--center { justify-content: center; } .hr-dash-recent-view-all { font-size: 14px; font-weight: 600; color: var(--hr-dash-recent-view-all-color, var(--brand-primary, #0a3373)); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; transition: opacity 0.15s; } .hr-dash-recent-view-all:hover { opacity: 0.75; } /* §6 disabled treatment — for the `