/* OpsHub Design System * Single source of design truth — tokens + primitives. * Light/dark themes via .dark class on . */ :root { --radius: 0.875rem; --radius-sm: calc(var(--radius) - 6px); --radius-md: calc(var(--radius) - 4px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 10px); /* Surfaces — cards float on a distinctly cooler / darker page bg so the white card surface lifts off without needing a heavy shadow. */ --background: oklch(0.965 0.006 250); --surface: oklch(1 0 0); --surface-muted: oklch(0.945 0.008 250); --surface-elevated: oklch(1 0 0); --foreground: oklch(0.18 0.02 252); /* Primary — graphite navy */ --primary: oklch(0.22 0.03 258); --primary-foreground: oklch(0.985 0.003 250); --secondary: oklch(0.96 0.005 250); --secondary-foreground: oklch(0.22 0.03 258); --muted: oklch(0.96 0.005 250); --muted-foreground: oklch(0.52 0.012 252); --accent: oklch(0.955 0.006 250); --accent-foreground: oklch(0.22 0.03 258); /* Sage — the ONLY brand accent */ --sage: oklch(0.6 0.09 158); --sage-foreground: oklch(0.985 0.003 250); --sage-soft: oklch(0.95 0.035 158); /* Status */ --warning: oklch(0.74 0.13 75); --warning-foreground: oklch(0.25 0.05 60); --warning-soft: oklch(0.965 0.04 85); --info: oklch(0.6 0.11 245); --info-foreground: oklch(0.985 0.003 250); --info-soft: oklch(0.96 0.025 245); --destructive: oklch(0.6 0.19 25); --destructive-foreground: oklch(0.985 0.003 250); --destructive-soft: oklch(0.965 0.03 25); /* Hairline borders — barely-there */ --border: oklch(0.92 0.005 250 / 0.7); --border-strong: oklch(0.86 0.008 250); --hairline: oklch(0.2 0.02 252 / 0.08); --input: oklch(0.92 0.005 250); --ring: oklch(0.6 0.09 158 / 0.5); /* Typography stacks */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Display", "Inter", system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; /* Optical shadows — slightly stronger so cards lift off the darker page bg */ --shadow-card: 0 0 0 1px oklch(0.2 0.02 250 / 0.05), 0 1px 2px oklch(0.2 0.02 250 / 0.05), 0 6px 18px -8px oklch(0.2 0.02 250 / 0.12); --shadow-elevated: 0 0 0 1px oklch(0.2 0.02 250 / 0.06), 0 2px 4px oklch(0.2 0.02 250 / 0.06), 0 16px 40px -14px oklch(0.2 0.02 250 / 0.22); } .dark { --background: oklch(0.16 0.02 258); --surface: oklch(0.2 0.025 258); --surface-muted: oklch(0.185 0.022 258); --surface-elevated: oklch(0.23 0.028 258); --foreground: oklch(0.97 0.004 250); --primary: oklch(0.97 0.004 250); --primary-foreground: oklch(0.18 0.025 258); --secondary: oklch(0.27 0.03 258); --secondary-foreground: oklch(0.97 0.004 250); --muted: oklch(0.27 0.03 258); --muted-foreground: oklch(0.7 0.015 250); --accent: oklch(0.27 0.03 258); --accent-foreground: oklch(0.97 0.004 250); --border: oklch(1 0 0 / 0.08); --border-strong: oklch(1 0 0 / 0.16); --hairline: oklch(1 0 0 / 0.06); --input: oklch(1 0 0 / 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "ss03", "calt"; font-size: 14px; line-height: 1.5; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.022em; color: var(--foreground); } h1 { font-size: 1.5rem; font-weight: 600; } h2 { font-size: 1.125rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } a { color: inherit; text-decoration: none; } .num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } /* ============================================================ Component primitives ============================================================ */ /* Frosted top bar / sticky surfaces */ .glass { background: color-mix(in oklab, var(--surface) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } /* Stat / metric card — matches Lovable spec */ .stat-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 1.5rem 1.5rem 1.375rem; box-shadow: var(--shadow-card); transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s; } .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-elevated); } .stat-card .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 6px; color: var(--foreground); line-height: 1.1; } .stat-card .stat-sub { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 6px; line-height: 1.4; } .stat-card .stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Stat-card accent modifiers retained as no-ops for back-compat. We dropped the colored left stripe — direction is conveyed by delta pills in the corner instead, so every card reads as the same shape. */ .stat-card.is-accent-blue, .stat-card.is-accent-sage, .stat-card.is-accent-warning, .stat-card.is-accent-danger { border-left: none; } /* Section card — for any panel */ .section-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 1rem; } /* Sage-tinted banner (used for "Agreement Reconciliation" and other passing-status callouts). Larger radius, sage hairline, sage check accent — same shape language as .section-card, just sage-tinted. */ .banner-sage { display: flex; align-items: flex-start; gap: 14px; background: var(--sage-soft); border: 1px solid color-mix(in oklab, var(--sage) 35%, transparent); border-radius: var(--radius-xl); padding: 16px 20px; box-shadow: var(--shadow-card); margin-bottom: 1.25rem; } .banner-sage::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--sage); margin-top: 2px; /* Inline SVG checkmark */ background-image: url("data:image/svg+xml;utf8,"); background-position: center; background-repeat: no-repeat; background-size: 14px; } .banner-sage .banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .banner-sage .banner-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: var(--sage); line-height: 1.3; } .banner-sage .banner-text { font-size: 0.8125rem; color: color-mix(in oklab, var(--sage) 65%, var(--foreground)); line-height: 1.45; } .banner-sage .banner-aside { font-size: 0.75rem; color: color-mix(in oklab, var(--sage) 55%, var(--muted-foreground)); margin-left: auto; text-align: right; flex: 0 0 auto; white-space: nowrap; } /* Info-tinted banner — same shape as .banner-sage, different hue. Used for scope notices, gentle informational callouts. No "i" icon by default; pages can override ::before for a custom marker. */ .banner-info { display: flex; align-items: flex-start; gap: 14px; background: var(--info-soft); border: 1px solid color-mix(in oklab, var(--info) 30%, transparent); border-radius: var(--radius-xl); padding: 16px 20px; box-shadow: var(--shadow-card); margin-bottom: 1.25rem; } .banner-info::before { content: "i"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; background: var(--info); color: white; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 0.875rem; line-height: 22px; text-align: center; margin-top: 2px; } .banner-info .banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .banner-info .banner-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; color: var(--info); line-height: 1.3; } .banner-info .banner-text { font-size: 0.8125rem; color: color-mix(in oklab, var(--info) 65%, var(--foreground)); line-height: 1.45; } /* Tiny eyebrow label above section titles */ .section-eyebrow, .eyebrow { font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); } /* Data table */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; } .data-table thead th { text-align: left; font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); padding: .75rem 1rem; border-bottom: 1px solid var(--hairline); background: var(--surface); } .data-table tbody td { padding: .875rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--foreground); } .data-table tbody tr:hover { background: var(--surface-muted); } .data-table tbody tr:last-child td { border-bottom: none; } /* iOS-style segmented control */ .segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: oklch(0.2 0.02 252 / 0.06); } .dark .segmented { background: oklch(1 0 0 / 0.06); } .segmented button, .segmented a { border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); transition: all .2s ease; border: none; background: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .segmented button[data-active="true"], .segmented a[data-active="true"], .segmented .active { background: var(--surface); color: var(--foreground); box-shadow: 0 0 0 .5px oklch(0.2 0.02 252 / .06), 0 1px 2px oklch(0.2 0.02 252 / .08); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.5rem 0.875rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .1s ease; font-family: inherit; line-height: 1.2; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .btn-primary:hover { background: oklch(0.27 0.035 258); } .dark .btn-primary:hover { background: oklch(0.92 0.004 250); } .btn-sage { background: var(--sage); color: var(--sage-foreground); border-color: var(--sage); } .btn-sage:hover { background: oklch(0.55 0.1 158); } .btn-outline { background: var(--surface); color: var(--foreground); border: 1px solid var(--border-strong); } .btn-outline:hover { background: var(--surface-muted); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--surface-muted); } .btn-danger { background: var(--destructive); color: var(--destructive-foreground); border-color: var(--destructive); } .btn-danger:hover { background: oklch(0.55 0.2 25); } .btn-sm { padding: 0.375rem 0.625rem; font-size: 0.75rem; } .btn-lg { padding: 0.625rem 1rem; font-size: 0.875rem; } /* ============================================================ Form fields ============================================================ */ .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 6px; letter-spacing: 0.01em; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field input[type="date"], .field input[type="search"], .field select, .field textarea, input.input, select.input, textarea.input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--input); border-radius: var(--radius-md); font-size: 0.875rem; font-family: inherit; background: var(--surface); color: var(--foreground); transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field select:focus, .field textarea:focus, input.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--ring); } .field textarea, textarea.input { min-height: 5.5rem; resize: vertical; line-height: 1.4; } .row { display: flex; gap: 1rem; } .row .field { flex: 1; } /* ============================================================ Badges & pills ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; background: var(--secondary); color: var(--secondary-foreground); border: none; } .badge-sage { background: var(--sage-soft); color: var(--sage); border-color: transparent; } .badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge-warning { background: var(--warning-soft); color: var(--warning-foreground); border-color: transparent; } .badge-danger { background: var(--destructive-soft); color: var(--destructive); border-color: transparent; } .badge-muted { background: var(--surface-muted); color: var(--muted-foreground); border-color: var(--hairline); } /* Legacy badge classes mapped to new system */ .badge-admin { background: var(--warning-soft); color: var(--warning-foreground); border-color: transparent; } .badge-staff { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge-sales { background: var(--sage-soft); color: var(--sage); border-color: transparent; } .badge-partner { background: oklch(0.95 0.04 295); color: oklch(0.45 0.18 295); border-color: transparent; } /* Delta pill (▲ 4.2% style) */ .delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 500; font-variant-numeric: tabular-nums; } .delta-up { background: var(--sage-soft); color: var(--sage); } .delta-down { background: var(--destructive-soft); color: var(--destructive); } .delta-flat { background: var(--surface-muted); color: var(--muted-foreground); } /* ============================================================ Alerts ============================================================ */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.875rem; border: 1px solid var(--hairline); } .alert-error, .alert-danger { background: var(--destructive-soft); color: var(--destructive); border-color: transparent; } .alert-success { background: var(--sage-soft); color: var(--sage); border-color: transparent; } .alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .alert-warning { background: var(--warning-soft); color: var(--warning-foreground); border-color: transparent; } /* ============================================================ Layout shell — sidebar + sticky header + main ============================================================ */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { border-right: 1px solid var(--hairline); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; z-index: 20; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); } .sidebar-brand .logo { width: 28px; height: 28px; flex-shrink: 0; } .sidebar-brand .brand-text { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); line-height: 1.15; } .sidebar-brand .brand-sub { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 2px; } .sidebar-section-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); padding: 12px 10px 6px; } .sidebar-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--foreground); position: relative; transition: background .15s ease, color .15s ease; letter-spacing: -0.005em; } .sidebar-link .nav-label { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .sidebar-link .nav-icon { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.7; color: var(--muted-foreground); } .sidebar-link:hover { background: var(--surface-muted); } .sidebar-link:hover .nav-icon { opacity: 1; color: var(--foreground); } .sidebar-link.active { background: var(--surface-muted); color: var(--foreground); font-weight: 600; } .sidebar-link.active .nav-icon { opacity: 1; color: var(--sage); } .sidebar-link.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--sage); border-radius: 0 2px 2px 0; } .sidebar-link .count-pill { font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--destructive); color: var(--destructive-foreground); padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center; line-height: 1.4; } .app-main { display: flex; flex-direction: column; min-width: 0; } .app-header { position: sticky; top: 0; z-index: 30; min-height: 64px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; padding: 8px 24px; } .app-header .page-title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; } .app-header .page-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); } .app-header .page-subtitle { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 2px; } .app-header .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--hairline); color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--surface-muted); color: var(--foreground); border-color: var(--border-strong); } /* User avatar dropdown */ .user-menu { position: relative; } .user-avatar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--foreground); transition: background .15s ease, border-color .15s ease, transform .1s ease; padding: 0; } .user-avatar:hover { background: var(--surface-muted); border-color: var(--border-strong); } .user-avatar:active { transform: scale(0.97); } .user-avatar-initials { font-variant-numeric: tabular-nums; } .user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); padding: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 50; } .user-menu.is-open .user-menu-panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-menu-header { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; } .user-menu-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); letter-spacing: -0.01em; line-height: 1.2; } .user-menu-email { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 3px; word-break: break-all; } .user-menu-roles { font-size: 0.6875rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; font-weight: 500; } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: 0.875rem; color: var(--foreground); text-decoration: none; transition: background .15s ease; } .user-menu-item:hover { background: var(--surface-muted); } .user-menu-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted-foreground); } /* View-as (Greg-only impersonation) — menu picker + active banner. */ .user-menu-section { padding: 8px 10px 10px; border-top: 1px solid var(--hairline); margin-top: 6px; } .user-menu-section-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 500; margin-bottom: 6px; } .view-as-form { margin: 0; } .view-as-select { width: 100%; padding: 6px 8px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); font: inherit; font-size: 0.8125rem; cursor: pointer; } .view-as-select:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--ring); } .view-as-exit-btn { width: 100%; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--foreground); font: inherit; font-size: 0.75rem; cursor: pointer; } .view-as-exit-btn:hover { background: var(--surface); border-color: var(--border-strong); } .user-avatar-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 999px; background: var(--warning, oklch(0.72 0.18 70)); box-shadow: 0 0 0 2px var(--surface); } .user-menu.is-viewing-as .user-avatar { border-color: var(--warning, oklch(0.72 0.18 70)); } .user-menu .user-avatar { position: relative; } .view-as-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: color-mix(in oklab, var(--warning-soft, oklch(0.96 0.07 80)) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--warning, oklch(0.72 0.18 70)) 40%, var(--hairline)); color: var(--foreground); font-size: 0.8125rem; } .view-as-banner-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; font-weight: 600; color: var(--warning-foreground, oklch(0.35 0.1 70)); } .view-as-banner-name { font-weight: 600; } .view-as-banner-meta { color: var(--muted-foreground); font-size: 0.75rem; } .view-as-banner-spacer { flex: 1; } .view-as-banner-form { margin: 0; } .view-as-banner-btn { padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface); color: var(--foreground); font: inherit; font-size: 0.75rem; cursor: pointer; } .view-as-banner-btn:hover { background: var(--surface-muted); border-color: var(--border-strong); } /* Dashboard hero (greeting + summary sentence) */ .hero-greeting { margin: 0 0 1.75rem; } .hero-greeting .hero-eyebrow { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.5rem; } .hero-greeting h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.028em; color: var(--foreground); margin: 0; line-height: 1.15; } .hero-greeting .hero-summary { font-size: 0.9375rem; color: var(--muted-foreground); margin-top: 0.625rem; line-height: 1.5; max-width: 720px; } .hero-greeting .hero-summary strong { font-weight: 600; color: var(--foreground); } .hero-greeting .hero-summary .delta-up, .hero-greeting .hero-summary .delta-down, .hero-greeting .hero-summary .delta-flat { font-weight: 600; } /* Two-tone section headers (e.g. "Projected MRR" + "Currently signed up & billing") */ .section-header-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.25rem 0 0.625rem; flex-wrap: wrap; } .section-header-row .section-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); } .section-header-row .section-qualifier { font-size: 0.8125rem; color: var(--muted-foreground); font-weight: 400; } .content { padding: 24px 32px 48px; max-width: 1440px; width: 100%; } /* Containers — keep legacy class names for back-compat */ .container { max-width: 720px; margin: 0 auto; } .container-wide { max-width: 1120px; margin: 0 auto; } /* Legacy card → maps to section-card */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 1rem; } .card h2 { margin-bottom: 12px; } /* ============================================================ Hero gradient banner — fixed dark in BOTH themes (do not use --primary) ============================================================ */ .hero { position: relative; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--hairline); padding: 32px; color: #fff; background: linear-gradient(135deg, oklch(0.22 0.03 258), oklch(0.26 0.04 258) 50%, oklch(0.32 0.06 200)); box-shadow: var(--shadow-elevated); } .hero .eyebrow { color: oklch(1 0 0 / 0.6); } .hero h1 { color: #fff; font-size: 1.75rem; } .hero .lede { color: oklch(1 0 0 / 0.72); font-size: 0.9375rem; margin-top: 6px; } /* ============================================================ Utilities ============================================================ */ .hidden { display: none !important; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .text-muted { color: var(--muted-foreground); } .text-sm { font-size: 0.8125rem; } .text-xs { font-size: 0.75rem; } /* Spinner — used in form submits */ .spinner { display: inline-block; width: 0.875rem; height: 0.875rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ds-spin 0.6s linear infinite; vertical-align: middle; } @keyframes ds-spin { to { transform: rotate(360deg); } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; left: -260px; top: 0; width: 240px; background: var(--surface); transition: left .25s ease; } .sidebar.is-open { left: 0; } .app-header { padding: 0 16px; } .content { padding: 16px; } .row { flex-direction: column; gap: 0.5rem; } } /* Sidebar collapse / mobile-drawer toggle button — visible at all sizes */ .sidebar-toggle { width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--hairline); color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; flex-shrink: 0; } .sidebar-toggle:hover { background: var(--surface-muted); color: var(--foreground); border-color: var(--border-strong); } /* === Collapsed sidebar (desktop only): shrinks to icon-only rail === */ .app.is-collapsed { grid-template-columns: 64px 1fr; } .app.is-collapsed .sidebar { padding: 16px 8px; } .app.is-collapsed .sidebar-section-label { display: none; } .app.is-collapsed .sidebar-brand { flex-direction: column; gap: 0; padding: 4px 0 16px; justify-content: center; } .app.is-collapsed .sidebar-brand .brand-text { display: none; } .app.is-collapsed .sidebar-brand .logo { margin: 0 auto; } .app.is-collapsed .sidebar-link { justify-content: center; padding: 9px 0; position: relative; } .app.is-collapsed .sidebar-link .nav-text { display: none; } .app.is-collapsed .sidebar-link .nav-label { flex: 0 0 auto; justify-content: center; } .app.is-collapsed .sidebar-link .nav-icon { width: 20px; height: 20px; } .app.is-collapsed .sidebar-link .count-pill { position: absolute; top: 4px; right: 4px; padding: 0 4px; min-width: 14px; font-size: 0.5625rem; line-height: 1.5; } .app.is-collapsed .sidebar-link.active::before { left: -8px; width: 3px; height: 20px; } @media (max-width: 900px) { /* On mobile the collapse class is irrelevant — drawer behavior takes over. */ .app.is-collapsed { grid-template-columns: 1fr; } .app.is-collapsed .sidebar { padding: 16px 12px; } .app.is-collapsed .sidebar-section-label, .app.is-collapsed .sidebar-link .nav-text, .app.is-collapsed .sidebar-brand .brand-text { display: revert; } .app.is-collapsed .sidebar-link { justify-content: space-between; padding: 8px 10px; } .app.is-collapsed .sidebar-link .count-pill { position: static; padding: 1px 7px; min-width: 18px; font-size: 0.6875rem; } }