/* * 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 { font-family: var(--font-inter), var(--brand-font, Inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ───────────────────────────────────────────── 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; } /* Magic-link sent state */ .login-magic-sent { padding: 24px; border-radius: 8px; background-color: color-mix(in srgb, var(--brand-primary, #0a3373) 8%, white); border: 1px solid color-mix(in srgb, var(--brand-primary, #0a3373) 20%, white); text-align: center; } .login-magic-sent-title { font-size: 15px; font-weight: 600; color: var(--brand-primary, #0a3373); margin-bottom: 8px; margin-top: 0; } .login-magic-sent-body { font-size: 14px; color: #6b7280; margin: 0; } .login-magic-back { margin-top: 16px; font-size: 13px; color: var(--brand-secondary, #4374f3); text-decoration: underline; background: none; border: none; cursor: pointer; } /* 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; border: 1px solid #e5e7eb; padding: 0 14px; font-size: 14px; 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%); 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; color: #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; } .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; } .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)); } @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 */ .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 */ .login-right-decoration { 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 { min-height: 44px; padding: 10px 0; display: inline-flex; align-items: center; } .login-forgot-row { margin-top: -4px; } } /* ───────────────────────────────────────────── Sidebar ───────────────────────────────────────────── */ .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; } .sidebar-logo-img { height: 24px; 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; } /* 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 ── */ .sidebar-nav { display: flex; flex-direction: column; flex: 1; gap: 2px; } .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; } /* 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); margin: 0 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); } .sidebar-subitem--active { background-color: var(--sidebar-subitem-bg-active, #0a3373); color: var(--sidebar-subitem-color-active, #ffffff); font-weight: 500; } .sidebar-subitem--active:hover { background-color: var(--sidebar-subitem-bg-active, #0a3373); color: var(--sidebar-subitem-color-active, #ffffff); } .sidebar-subitem-icon { color: var(--sidebar-subitem-color, #6b7280); flex-shrink: 0; } .sidebar-subitem--active .sidebar-subitem-icon { color: var(--sidebar-subitem-color-active, #ffffff); } /* ── 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: 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; } .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: 260px; } } /* ── 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 */ .profile-switcher-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 20px; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.12s; } .profile-switcher-trigger:hover:not(:disabled) { background: rgba(0, 0, 0, 0.03); } .profile-switcher-trigger--open { background: rgba(0, 0, 0, 0.04); } .profile-switcher-trigger:disabled { cursor: default; } /* Company logo — shown instead of letter avatar when tenant has a logo_url */ .profile-switcher-logo { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: #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 */ .profile-switcher-popover { position: absolute; bottom: calc(100% + 6px); left: 12px; right: 12px; 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 ──────────────────────────────────────────────────────────── */ .sidebar-footer { padding: 16px 20px; border-top: var(--sidebar-footer-border, 1px solid #e5e7eb); } .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; } .dash-topbar-title-row { display: flex; align-items: center; gap: 10px; } .dash-topbar-title { font-size: var(--dash-topbar-title-size, 32px); font-weight: 800; color: var(--dash-topbar-title-color, #18181b); margin: 0; letter-spacing: -0.6px; } .dash-topbar-badge { font-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: 100px; } .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; } /* Insured lives mini-widget */ .hr-dash-insured-widget { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: var(--hr-dash-widget-bg, #ffffff); border: 1px solid var(--hr-dash-widget-border, #e5e7eb); border-radius: var(--hr-dash-widget-radius, 14px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .hr-dash-insured-widget-label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hr-dash-widget-label-color, #9ca3af); margin: 0; } .hr-dash-insured-widget-value { font-size: 28px; font-weight: 700; color: var(--hr-dash-widget-value-color, #18181b); line-height: 1.1; margin: 0; } .hr-dash-insured-widget-divider { width: 1px; height: 34px; background-color: var(--hr-dash-widget-divider, #e5e7eb); flex-shrink: 0; } .hr-dash-insured-breakdown-col { display: flex; flex-direction: column; gap: 3px; } .hr-dash-insured-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; } .hr-dash-insured-breakdown-label { color: var(--hr-dash-widget-breakdown-label, #6b7280); } .hr-dash-insured-breakdown-value { font-weight: 600; color: var(--hr-dash-widget-breakdown-value, #18181b); } .dash-bell-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 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: 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(--brand-accent, #ff6733); border: 1.5px solid var(--dash-topbar-bg, #ffffff); } /* ── Scrollable body ── */ .dash-body { flex: 1; min-height: 0; overflow-y: auto; 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; } /* ── Hero card ── */ .hr-dash-hero { background: var(--hr-dash-hero-bg, radial-gradient(ellipse at 88% 50%, rgba(255, 255, 255, 0.92) 0%, transparent 58%), linear-gradient( 140deg, color-mix(in srgb, var(--brand-secondary, #4374f3) 16%, white) 0%, color-mix(in srgb, var(--brand-secondary, #4374f3) 10%, white) 100% ) ); border: 1px solid var(--hr-dash-hero-border, #c8d3e8); border-radius: var(--hr-dash-hero-radius, 20px); padding: var(--hr-dash-hero-padding, 40px 44px); display: flex; flex-direction: column; gap: 12px; } .hr-dash-hero-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hr-dash-hero-eyebrow-color, var(--brand-accent, #ff6733)); margin: 0; } .hr-dash-hero-title { font-size: var(--hr-dash-hero-title-size, 32px); font-weight: 800; color: var(--hr-dash-hero-title-color, #0d1526); line-height: 1.2; margin: 0; letter-spacing: -0.6px; } .hr-dash-hero-subtitle { font-size: 15px; color: var(--hr-dash-hero-subtitle-color, #6b7280); margin: 0; } .hr-dash-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .hr-dash-hero-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 100px; background-color: var(--hr-dash-hero-btn-bg, var(--brand-primary, #0a3373)); color: var(--hr-dash-hero-btn-color, #ffffff); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; text-decoration: none; white-space: nowrap; } .hr-dash-hero-btn-primary:hover { opacity: 0.88; } .hr-dash-hero-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 100px; background-color: var(--hr-dash-hero-btn-secondary-bg, #ffffff); color: var(--hr-dash-hero-btn-secondary-color, var(--brand-primary, #0a3373)); font-size: 14px; font-weight: 600; border: 1px solid var(--hr-dash-hero-btn-secondary-border, rgba(0, 0, 0, 0.12)); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; text-decoration: none; white-space: nowrap; } .hr-dash-hero-btn-secondary:hover { background-color: var(--hr-dash-hero-btn-secondary-bg-hover, #f5f5f5); } /* ── Stats row ── */ .dash-stats { display: flex; gap: 16px; } .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); display: flex; flex-direction: column; gap: 2px; } .dash-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dash-stat-label-color, #9ca3af); margin: 0; } .dash-stat-value { font-size: 36px; font-weight: 700; 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; } /* ── Action card (dark variant) ── */ .dash-stat-card--action { background-color: var(--dash-action-bg, var(--brand-primary, #0a3373)); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .dash-action-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dash-action-eyebrow-color, rgba(255, 255, 255, 0.45)); margin: 0 0 4px; } .dash-action-title { font-size: 17px; font-weight: 700; color: var(--dash-action-title-color, #ffffff); margin: 0 0 3px; } .dash-action-sub { font-size: 12px; color: var(--dash-action-sub-color, rgba(255, 255, 255, 0.5)); margin: 0; } .dash-action-plus-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--dash-action-btn-bg, rgba(255, 255, 255, 0.15)); border: none; cursor: pointer; color: var(--dash-action-btn-color, #ffffff); flex-shrink: 0; transition: background-color 0.15s; } .dash-action-plus-btn:hover { background-color: var(--dash-action-btn-bg-hover, rgba(255, 255, 255, 0.25)); } /* ───────────────────────────────────────────── Dashboard — HR specific (hr-dash-hero, hr-dash-insured-widget, 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); overflow: hidden; } .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); } .hr-dash-recent-title { font-size: 17px; 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-btns { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hr-dash-recent-btn-outline { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-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: 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: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; padding: 8px 16px; border-radius: 100px; 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: 600; border: none; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .hr-dash-recent-btn-primary:hover { opacity: 0.88; } .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-soft-accent { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; background-color: var(--hr-dash-recent-btn-soft-accent-bg, color-mix(in srgb, var(--brand-accent, #ff6733) 12%, white)); color: var(--hr-dash-recent-btn-soft-accent-color, var(--brand-accent, #ff6733)); 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-accent:hover { background-color: var(--hr-dash-recent-btn-soft-accent-bg-hover, color-mix(in srgb, var(--brand-accent, #ff6733) 20%, white)); } .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: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hr-dash-recent-th-color, #9ca3af); 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); } /* 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). */ .hr-dash-recent-tr--clickable { cursor: pointer; } .hr-dash-recent-tr--expanded { background-color: #f8fafd; } .hr-dash-recent-tr--dependent { background-color: #eaf0fb; } /* 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; } .cov-badge--covered { background: #e6f4ec; color: #1f7a45; } .cov-badge--not { background: #fbe9e9; color: #b42318; } .cov-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; 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; } .cov-dot--grey { background: #94a3b8; } .cov-dot--amber { background: #eca04b; } .cov-dot--blue { background: #4374f3; } .cov-dot--green { background: #32a15e; } .cov-dot--red { background: #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: #e6f4ec; color: #1f7a45; } .cov-detail-badge--not { background: #fbe9e9; color: #b42318; } .cov-detail-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; 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. ). */ .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; } .census-sheet-input:focus { border-color: #4374f3; background-color: #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; } .hr-dash-recent-td--right { text-align: right; } .hr-dash-recent-empty { color: var(--hr-dash-recent-empty-color, #d1d5db); } /* Status badges */ .dash-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-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); } /* 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); } .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; } /* ───────────────────────────────────────────── Insurer Dashboard ───────────────────────────────────────────── */ /* Stat card: icon variant — label + icon on top row, value below */ .dash-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .dash-stat-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background-color: var(--dash-stat-icon-bg, color-mix(in srgb, var(--brand-secondary, #4374f3) 12%, white)); color: var(--dash-stat-icon-color, var(--brand-secondary, #4374f3)); flex-shrink: 0; } /* Two-column grid: tasks (wider) + inbox (narrower) */ .ins-dash-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; } /* Panel card (shared by tasks + inbox) */ .ins-dash-panel { background-color: var(--ins-dash-panel-bg, #ffffff); border: 1px solid var(--ins-dash-panel-border, #d2d9e5); border-radius: var(--ins-dash-panel-radius, 16px); overflow: hidden; display: flex; flex-direction: column; } .ins-dash-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--ins-dash-panel-row-border, #eaeff6); } .ins-dash-panel-title { font-size: 16px; font-weight: 700; color: var(--ins-dash-panel-title-color, #18181b); margin: 0; } .ins-dash-panel-link { font-size: 13px; font-weight: 600; color: var(--ins-dash-panel-link-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; } .ins-dash-panel-link:hover { opacity: 0.75; } /* Task rows */ .ins-dash-task-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ins-dash-panel-row-border, #eaeff6); } .ins-dash-task-row:last-child { border-bottom: none; } .ins-dash-task-name { font-size: 14px; font-weight: 600; color: var(--ins-dash-task-name-color, #18181b); margin: 0 0 2px; } .ins-dash-task-company { font-size: 12px; color: var(--ins-dash-task-company-color, #9ca3af); margin: 0; } .ins-dash-task-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .ins-dash-task-badge--overdue { background-color: var(--ins-dash-badge-overdue-bg, #fee2e2); color: var(--ins-dash-badge-overdue-color, #dc2626); } .ins-dash-task-badge--today { background-color: var(--ins-dash-badge-today-bg, #fef3c7); color: var(--ins-dash-badge-today-color, #d97706); } .ins-dash-task-badge--soon { background-color: var(--ins-dash-badge-soon-bg, #dbeafe); color: var(--ins-dash-badge-soon-color, #2563eb); } /* Inbox message rows */ .ins-dash-msg-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ins-dash-panel-row-border, #eaeff6); } .ins-dash-msg-row:last-child { border-bottom: none; } .ins-dash-msg-title { font-size: 14px; font-weight: 600; color: var(--ins-dash-msg-title-color, #18181b); margin: 0 0 2px; } .ins-dash-msg-sender { font-size: 12px; color: var(--ins-dash-msg-sender-color, #9ca3af); margin: 0; } .ins-dash-msg-time { font-size: 12px; color: var(--ins-dash-msg-time-color, #9ca3af); white-space: nowrap; flex-shrink: 0; margin-top: 2px; } /* ── Client portfolio: header row + card grid ── */ .ins-dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ins-dash-section-title { font-size: 16px; font-weight: 700; color: var(--ins-dash-panel-title-color, #18181b); margin: 0; } .ins-dash-portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ins-dash-client-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background-color: var(--ins-dash-panel-bg, #ffffff); border: 1px solid var(--ins-dash-panel-border, #d2d9e5); border-radius: var(--ins-dash-panel-radius, 16px); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; } .ins-dash-client-card:hover { border-color: var(--ins-dash-client-card-border-hover, color-mix(in srgb, var(--brand-primary, #0a3373) 25%, white)); box-shadow: 0 2px 10px rgba(13, 21, 38, 0.06); } .ins-dash-client-name { font-size: 15px; font-weight: 700; color: var(--ins-dash-task-name-color, #18181b); margin: 0; } .ins-dash-client-meta { font-size: 12px; color: var(--ins-dash-task-company-color, #9ca3af); margin: 0 0 4px; } .ins-dash-client-foot { display: flex; align-items: center; justify-content: space-between; } .ins-dash-client-renewal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ins-dash-task-name-color, #18181b); } .ins-dash-client-renewal svg { color: var(--dash-stat-icon-color, var(--brand-secondary, #4374f3)); flex-shrink: 0; } .ins-dash-client-arrow { color: var(--ins-dash-task-company-color, #9ca3af); flex-shrink: 0; } /* ───────────────────────────────────────────── Dashboard — responsive ───────────────────────────────────────────── */ /* ── Tablet (≤ 1024px) ── */ @media (max-width: 1024px) { .dash-topbar { padding: var(--dash-topbar-padding, 18px 20px); } .dash-body { padding: var(--dash-body-padding, 20px); } .hr-dash-hero { padding: var(--hr-dash-hero-padding, 32px 32px); } .hr-dash-hero-title { font-size: var(--hr-dash-hero-title-size, 28px); } } /* ── Tablet (insurer grid) ── */ @media (max-width: 1024px) { .ins-dash-grid { grid-template-columns: 1fr 1fr; } .ins-dash-portfolio-grid { grid-template-columns: 1fr 1fr; } } /* ── Mobile (≤ 768px) ── */ @media (max-width: 768px) { .ins-dash-grid { grid-template-columns: 1fr; } .ins-dash-portfolio-grid { grid-template-columns: 1fr; } /* Topbar sits below the fixed hamburger bar (~86px = 46px button + 40px padding). */ .dash-topbar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 86px 20px 12px; } .dash-topbar-right { width: 100%; justify-content: flex-end; gap: 12px; } /* Every wrapper div and every widget box in the right slot stretches full width. */ .dash-topbar-right > div { width: 100%; } .hr-dash-insured-widget, .mf-policybox, .ins-pol-statbar, .pol-meta-widget { width: 100%; box-sizing: border-box; } .pol-meta-widget { overflow-x: auto; scrollbar-width: none; } .pol-meta-widget::-webkit-scrollbar { display: none; } /* Stat items share equal space across the full width. */ .ins-pol-statbar .ins-pol-stat { flex: 1; justify-content: center; } .dash-topbar-title { font-size: var(--dash-topbar-title-size-mobile, 22px); } .dash-topbar-title-row { flex-wrap: wrap; gap: 6px; } /* Hero */ .dash-body { padding: 16px; gap: 14px; } .hr-dash-hero { padding: 24px 20px; border-radius: var(--hr-dash-hero-radius-mobile, 14px); } .hr-dash-hero-title { font-size: var(--hr-dash-hero-title-size-mobile, 24px); } .hr-dash-hero-actions { flex-direction: column; align-items: flex-start; } .hr-dash-hero-btn-primary, .hr-dash-hero-btn-secondary { width: 100%; justify-content: center; } /* Page header: stack on mobile */ .page-header { flex-wrap: wrap; gap: 12px; padding: 16px 20px; } .page-header-right { flex-wrap: wrap; gap: 8px; flex-shrink: 1; } /* Stats: 2-column grid on mobile */ .dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Action card spans full row on mobile */ .dash-stat-card--action { grid-column: 1 / -1; } /* Table: horizontal scroll on mobile */ .hr-dash-recent-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hr-dash-recent-head { flex-direction: column; gap: 12px; align-items: flex-start; } .hr-dash-recent-btns { width: 100%; flex-wrap: wrap; } .hr-dash-recent-btn-outline, .hr-dash-recent-btn-primary { flex: 1; justify-content: center; } /* Policy tabs bar — scrollable on mobile */ .ins-pol-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .ins-pol-tabs::-webkit-scrollbar { display: none; } /* Policy detail subheader */ .pol-subheader { padding: 10px 16px; flex-direction: column; align-items: flex-start; gap: 10px; } .pol-subheader-actions { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; } .pol-subheader-actions::-webkit-scrollbar { display: none; } .pol-split-btn-menu { right: auto; left: 0; } /* Census / policies filter toolbar: stack + wrap on mobile */ .ins-pol-toolbar { flex-wrap: wrap; gap: 10px; } .ins-pol-search { flex: 1 1 100%; } /* Hide Insurance ID column on small screens */ .hr-dash-recent-th--right, .hr-dash-recent-td--id { display: none; } /* Sidebar: off-canvas drawer on mobile */ .sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 50; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: none; } .sidebar--open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } /* Icon-rail collapse is a desktop-only affordance — the mobile drawer already has its own open/close mechanism (hamburger + overlay). */ .sidebar-collapse-toggle { display: none; } /* Overlay behind the open sidebar */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 49; } .sidebar-overlay--visible { display: block; } /* Hamburger button — only shown on mobile */ .sidebar-hamburger-bar { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; padding: 20px; background: var(--dash-topbar-bg, #f8fafd); z-index: 48; } .sidebar-hamburger-bar-right { display: flex; align-items: center; gap: 8px; } /* Bell already shown in hamburger bar — hide it from topbar right slot */ .dash-topbar-right .dash-bell-btn { display: none; } .sidebar-hamburger { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--dash-bell-border, #e5e7eb); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; color: #374151; } /* Close button inside sidebar — only shown on mobile */ .sidebar-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 6px; border: 1px solid #e5e7eb; background: transparent; cursor: pointer; color: #374151; } .sidebar-close:hover { background: #f3f4f6; } } /* ── Small mobile (≤ 480px) ── */ @media (max-width: 480px) { .dash-topbar-title { font-size: var(--dash-topbar-title-size-sm, 19px); } } /* ───────────────────────────────────────────── Page header — white panel, rounded bottom corners Reusable across list/detail pages (breadcrumb + title + subtitle on the left, widgets + bell on the right). ───────────────────────────────────────────── */ /* Content surface behind the page header — must match the body bg so the header's rounded-corner notch is the same color as the rest of the page. */ .dash-surface { background-color: var(--dash-body-bg, #f8fafd); } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-shrink: 0; padding: var(--page-header-padding, 24px 32px); background-color: var(--page-header-bg, #ffffff); border-bottom: var(--sidebar-border-right, 1px solid #e5e7eb); border-bottom-left-radius: var(--page-header-radius, 24px); border-bottom-right-radius: var(--page-header-radius, 24px); } .page-header-right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } /* Top-aligned variant — for taller headers (e.g. member identity) */ .page-header--top { align-items: flex-start; } /* Compact variant — smaller title/subtitle + tighter padding so list/detail pages fit more content above the fold. Matches the census list header. */ .page-header--compact { padding-top: 14px; padding-bottom: 12px; } .page-header--compact .page-header-title { font-size: 20px; } .page-header--compact .page-header-subtitle { font-size: 13px; margin-top: 2px; } /* Insurer policy detail header — reuses the shared compact scale (14/12 padding, 20px title, 8px breadcrumb margin) so its breadcrumb/title height matches the HR census member-detail header. One scoped tweak: pull the meta-chip row a touch tighter under the smaller title (does not affect other .ins-pol-meta). */ /* ── Policy detail meta widget — white card in DashTopbar right slot ── */ .pol-meta-widget { display: flex; align-items: center; padding: 10px 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .pol-meta-grid { display: flex; flex-direction: column; gap: 4px; } .pol-meta-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; line-height: 1; } .pol-meta-item { display: flex; align-items: baseline; gap: 4px; } .pol-meta-item--dates { color: #6b7280; } .pol-meta-item--expiring { display: flex; align-items: center; gap: 4px; color: #d97706; font-size: 12px; font-weight: 500; } .pol-meta-label { font-size: 10px; font-weight: 500; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 3px; } .pol-meta-val { font-size: 11.5px; font-weight: 600; color: #374151; } .pol-meta-val--num { color: var(--brand-secondary, #4374f3); font-family: monospace; letter-spacing: 0.3px; } .pol-meta-sep { display: inline-block; width: 1px; height: 10px; background: #e5e7eb; margin: 0 8px; flex-shrink: 0; align-self: center; } /* ── Policy detail subheader (actions bar below DashTopbar) ── */ .pol-subheader { display: flex; align-items: center; gap: 8px; padding: 10px 28px; background: var(--dash-topbar-bg, #f8fafd); border-bottom: 1px solid var(--dash-topbar-sep-color, #d2d9e5); flex-shrink: 0; flex-wrap: wrap; } .pol-subheader-identity { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .pol-subheader-num { font-size: 13px; font-weight: 700; color: var(--brand-secondary, #4374f3); font-family: monospace; letter-spacing: 0.3px; } .pol-subheader-sep { font-size: 13px; color: #d1d5db; } .pol-subheader-company { font-size: 13px; font-weight: 500; color: #6b7280; } .pol-subheader-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .ins-pol-detail-header .ins-pol-meta { margin-top: 8px; } /* Compact action cluster — scoped to the policy detail header so the buttons sit small and top-aligned next to the breadcrumb (does not affect the shared button classes used on other pages). */ .ins-pol-header-actions { gap: 12px; } .ins-pol-header-actions .hr-dash-recent-btn-outline, .ins-pol-header-actions .hr-dash-recent-btn-primary { padding: 6px 13px; font-size: 13px; gap: 6px; } .page-header-title { font-size: var(--page-header-title-size, 32px); font-weight: 800; color: var(--page-header-title-color, #18181b); letter-spacing: -0.6px; margin: 0; } .page-header-subtitle { font-size: 14px; color: var(--page-header-subtitle-color, #6b7280); margin: 6px 0 0; max-width: 640px; } .page-header-subtitle strong { font-weight: 700; color: var(--page-header-title-color, #18181b); } /* ───────────────────────────────────────────── Dashboard — breadcrumb + bell count (shared) ───────────────────────────────────────────── */ .dash-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--dash-breadcrumb-color, #9ca3af); } .dash-breadcrumb-link { display: inline-flex; align-items: center; color: var(--dash-breadcrumb-color, #9ca3af); text-decoration: none; transition: color 0.12s; } .dash-breadcrumb-link:hover { color: var(--brand-primary, #0a3373); } .dash-breadcrumb-current { color: var(--dash-breadcrumb-current-color, #374151); } /* Numeric count badge for the topbar bell */ .dash-bell-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; color: #ffffff; background-color: var(--brand-accent, #ff6733); border: 1.5px solid var(--dash-topbar-bg, #ffffff); border-radius: 100px; } /* ───────────────────────────────────────────── Insurer Policies — topbar stat bar ───────────────────────────────────────────── */ .ins-pol-statbar { display: flex; align-items: stretch; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden; } .ins-pol-stat { display: flex; align-items: center; gap: 8px; padding: 10px 20px; } .ins-pol-stat:not(:first-child) { border-left: 1px solid var(--ins-pol-statbar-divider, #eaeff6); } .ins-pol-stat-icon { display: flex; align-items: center; justify-content: center; color: var(--ins-pol-stat-icon-color, var(--brand-secondary, #4374f3)); flex-shrink: 0; } .ins-pol-stat-icon--lives { color: var(--ins-pol-stat-lives-color, #32a15e); } .ins-pol-stat > div { display: flex; align-items: baseline; gap: 5px; } .ins-pol-stat-value { font-size: 15px; font-weight: 700; color: var(--ins-pol-stat-value-color, #18181b); line-height: 1; margin: 0; } .ins-pol-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ins-pol-stat-label-color, #9ca3af); margin: 0; } /* ── Toolbar inside the table card (chips + search + filter) ── */ .ins-pol-toolbar { display: flex; align-items: center; gap: 14px; padding: var(--ins-pol-toolbar-padding, 18px 24px); border-bottom: 1px solid var(--hr-dash-recent-head-border, #eaeff6); } .ins-pol-chips { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ins-pol-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--ins-pol-chip-border, #e5e7eb); background-color: var(--ins-pol-chip-bg, #ffffff); color: var(--ins-pol-chip-color, #6b7280); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s; } .ins-pol-chip:hover { background-color: var(--ins-pol-chip-bg-hover, #f9fafb); } .ins-pol-chip--active { background-color: var(--ins-pol-chip-active-bg, color-mix(in srgb, var(--brand-primary, #0a3373) 8%, white)); border-color: var(--ins-pol-chip-active-border, color-mix(in srgb, var(--brand-primary, #0a3373) 25%, white)); color: var(--brand-primary, #0a3373); } .ins-pol-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background-color: var(--ins-pol-chip-count-bg, #eef2f9); color: var(--ins-pol-chip-count-color, #6b7280); font-size: 11px; font-weight: 700; } .ins-pol-chip--active .ins-pol-chip-count { background-color: var(--brand-primary, #0a3373); color: #ffffff; } /* Status filter group (e.g. All / Active / Inactive / Expiring Soon) */ .ins-pol-filters { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ins-pol-filter { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border: none; border-radius: 100px; background: transparent; color: var(--ins-pol-filter-color, #6b7280); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.12s, color 0.12s; } .ins-pol-filter:hover { background-color: var(--ins-pol-filter-bg-hover, #f1f5fe); } .ins-pol-filter--active { background-color: var(--brand-primary, #0a3373); color: #ffffff; } .ins-pol-filter-count { color: var(--ins-pol-filter-count-color, #9ca3af); font-weight: 600; } .ins-pol-filter--active .ins-pol-filter-count { color: rgba(255, 255, 255, 0.7); } .ins-pol-search { display: flex; align-items: center; gap: 8px; flex: 1; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ins-pol-search-border, #e5e7eb); background-color: var(--ins-pol-search-bg, #ffffff); } .ins-pol-search-icon { color: var(--ins-pol-search-icon-color, #9ca3af); flex-shrink: 0; } .ins-pol-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--ins-pol-search-input-color, #374151); } .ins-pol-search-input::placeholder { color: var(--ins-pol-search-placeholder-color, #9ca3af); } /* ── Table cell helpers ── */ .ins-pol-th-sort { display: inline-flex; align-items: center; gap: 5px; } /* When rendered as a real