/* corp-shared.css — unified design system for Caredenza internal corp apps. * * CANONICAL COPY lives in analytics-dashboard/shared/. It is duplicated * verbatim into each corp app (tracker/public/shared/ now; corp-docs and * compliance-dashboard pick it up in their own scope-tier follow-up PRs) so * every app ships it from its own bucket at the stable path * /shared/corp-shared.css with no cross-domain dependency. KEEP ALL COPIES IN * SYNC — edit this file and run tools/sync-corp-shared.sh to propagate. * * Modern minimal palette: near-black fg on white, neutral grays, single * restrained accent. */ /* ────────── Reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--corp-fg); background: var(--corp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } /* ────────── Tokens — modern minimal neutral ──────────────────────────── */ :root { /* Surfaces */ --corp-bg: #ffffff; --corp-surface: #ffffff; --corp-surface-alt: #fafafa; --corp-surface-sunken:#f5f5f4; /* Foregrounds */ --corp-fg: #0a0a0a; --corp-fg-muted: #525252; --corp-fg-subtle: #737373; --corp-fg-inverse: #ffffff; /* Borders */ --corp-border: #e5e5e5; --corp-border-strong: #d4d4d4; /* Single accent — kept restrained, used only for active/focus states */ --corp-accent: #0a0a0a; --corp-accent-soft: #f5f5f4; --corp-accent-fg: #ffffff; --corp-accent-ring: rgba(10, 10, 10, 0.12); /* Semantic */ --corp-pass: #15803d; --corp-pass-bg: #f0fdf4; --corp-fail: #b91c1c; --corp-fail-bg: #fef2f2; --corp-warn: #b45309; --corp-warn-bg: #fffbeb; --corp-info: #1d4ed8; --corp-info-bg: #eff6ff; /* Radii — tight, modern */ --corp-r-sm: 4px; --corp-r: 6px; --corp-r-lg: 10px; /* Spacing scale */ --corp-s-1: 4px; --corp-s-2: 8px; --corp-s-3: 12px; --corp-s-4: 16px; --corp-s-5: 24px; --corp-s-6: 32px; --corp-s-7: 48px; /* Type scale */ --corp-text-xs: 12px; --corp-text-sm: 13px; --corp-text-base: 15px; --corp-text-lg: 17px; --corp-text-xl: 20px; --corp-text-2xl: 26px; --corp-text-3xl: 32px; /* Layout — full-bleed by default (operator dashboards use the whole viewport; keep the token so apps can still reference it, but no cap). */ --corp-content-max: none; /* Side nav is fixed left; --corp-nav-height is the mobile top bar only (0 on desktop so sticky tab bars / tables pin under the viewport top). */ --corp-sidenav-width: 232px; --corp-nav-height: 0px; --corp-mobile-topbar: 52px; } /* Body offset for the fixed left sidenav (all corp pages ship .corp-nav). React apps set .corp-has-sidenav on ; vanilla pages either have the mount placeholder (#corp-nav) or the replaced as a body child. */ body.corp-has-sidenav, body:has(> .corp-nav), body:has(> aside.corp-nav), body:has(> #corp-nav) { padding-left: var(--corp-sidenav-width); } /* ────────── Typography ────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--corp-s-3) 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--corp-fg); } h1 { font-size: var(--corp-text-3xl); letter-spacing: -0.02em; } h2 { font-size: var(--corp-text-2xl); } h3 { font-size: var(--corp-text-xl); } h4 { font-size: var(--corp-text-lg); } h5, h6 { font-size: var(--corp-text-base); } p { margin: 0 0 var(--corp-s-3) 0; } small, .corp-text-sm { font-size: var(--corp-text-sm); } .corp-text-xs { font-size: var(--corp-text-xs); } .corp-muted { color: var(--corp-fg-muted); } .corp-subtle { color: var(--corp-fg-subtle); } a { color: var(--corp-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--corp-border-strong); transition: text-decoration-color 120ms ease; } a:hover { text-decoration-color: var(--corp-fg); } a.corp-link-quiet { text-decoration: none; color: var(--corp-fg-muted); } a.corp-link-quiet:hover { color: var(--corp-fg); text-decoration: underline; } code, pre, .corp-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.92em; } code { background: var(--corp-surface-sunken); padding: 1px 5px; border-radius: var(--corp-r-sm); border: 1px solid var(--corp-border); } pre { background: var(--corp-surface-sunken); border: 1px solid var(--corp-border); border-radius: var(--corp-r); padding: var(--corp-s-4); overflow-x: auto; line-height: 1.5; } pre code { background: none; border: 0; padding: 0; } /* ────────── Corp Side Nav (fixed left rail) ──────────────────────────── */ .corp-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: var(--corp-sidenav-width); background: var(--corp-bg); border-right: 1px solid var(--corp-border); display: flex; flex-direction: column; /* drawer fills the rail on desktop */ } .corp-nav__mobile-bar { display: none; } .corp-nav__backdrop { display: none; } .corp-nav__drawer { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: var(--corp-s-4) var(--corp-s-3); gap: var(--corp-s-3); overflow: hidden; } .corp-nav__drawer-head { flex-shrink: 0; padding: 0 var(--corp-s-2) var(--corp-s-1); } .corp-nav__brand { display: flex; align-items: center; gap: var(--corp-s-3); text-decoration: none; color: var(--corp-fg); font-weight: 600; font-size: var(--corp-text-base); letter-spacing: -0.01em; flex-shrink: 0; } .corp-nav__brand:hover { text-decoration: none; } .corp-nav__logo { width: 24px; height: 24px; flex-shrink: 0; } /* Legacy divider class — unused in sidenav, kept so old markup doesn't break */ .corp-nav__divider { display: none; } .corp-nav__search-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--corp-s-2); width: 100%; padding: var(--corp-s-2) var(--corp-s-3); border: 1px solid var(--corp-border); border-radius: var(--corp-r); background: var(--corp-surface-alt); color: var(--corp-fg-subtle); font-size: var(--corp-text-sm); text-align: left; cursor: pointer; flex-shrink: 0; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .corp-nav__search-trigger:hover { border-color: var(--corp-border-strong); color: var(--corp-fg-muted); background: var(--corp-surface); } .corp-nav__search-trigger:focus-visible { outline: 2px solid var(--corp-fg); outline-offset: 2px; } .corp-nav__search-placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corp-nav__kbd { flex-shrink: 0; font-family: inherit; font-size: 11px; font-weight: 500; color: var(--corp-fg-subtle); background: var(--corp-bg); border: 1px solid var(--corp-border); border-radius: var(--corp-r-sm); padding: 1px 5px; line-height: 1.4; } .corp-nav__apps { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0; /* thin scrollbar for long app lists */ scrollbar-width: thin; } .corp-nav__section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--corp-fg-subtle); padding: var(--corp-s-1) var(--corp-s-3) 4px; user-select: none; } .corp-nav__section-label--spaced { margin-top: var(--corp-s-3); padding-top: var(--corp-s-3); border-top: 1px solid var(--corp-border); } .corp-nav__app { display: flex; align-items: center; padding: var(--corp-s-2) var(--corp-s-3); border-radius: var(--corp-r); font-size: var(--corp-text-sm); color: var(--corp-fg-muted); text-decoration: none; transition: color 120ms ease, background 120ms ease; white-space: nowrap; } .corp-nav__app:hover { color: var(--corp-fg); background: var(--corp-surface-alt); text-decoration: none; } .corp-nav__app[aria-current="page"] { color: var(--corp-fg); background: var(--corp-surface-sunken); font-weight: 500; } .corp-nav__empty { padding: var(--corp-s-3); font-size: var(--corp-text-xs); color: var(--corp-fg-subtle); text-align: center; } .corp-nav__right { display: flex; flex-direction: column; align-items: stretch; gap: var(--corp-s-2); font-size: var(--corp-text-sm); color: var(--corp-fg-muted); flex-shrink: 0; padding-top: var(--corp-s-3); border-top: 1px solid var(--corp-border); margin-top: auto; } .corp-nav__user { color: var(--corp-fg-muted); font-size: var(--corp-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--corp-s-2); } .corp-nav__signout { color: var(--corp-fg-muted); text-decoration: none; padding: var(--corp-s-2) var(--corp-s-3); border-radius: var(--corp-r); font-size: var(--corp-text-sm); } .corp-nav__signout:hover { color: var(--corp-fg); background: var(--corp-surface-alt); text-decoration: none; } button.corp-nav__signout { border: 0; background: transparent; text-align: left; width: 100%; } .corp-nav__env { display: inline-flex; align-items: center; align-self: flex-start; padding: 2px var(--corp-s-2); border-radius: 999px; border: 1px solid var(--corp-border); font-size: var(--corp-text-xs); color: var(--corp-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; margin: 0 var(--corp-s-2); } .corp-nav__env--prod { color: var(--corp-fail); border-color: var(--corp-fail); background: var(--corp-fail-bg); } /* Page-level actions that used to live in the top-nav right slot (e.g. Tracker “+ New Ticket”). Sit as a thin strip above main content. */ .corp-nav__page-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--corp-s-3); padding: var(--corp-s-3) var(--corp-s-5); border-bottom: 1px solid var(--corp-border); background: var(--corp-bg); flex-wrap: wrap; } /* ─── Command palette (⌘/Ctrl+K) ─────────────────────────────────────── */ .corp-cmdk { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--corp-s-4) var(--corp-s-4); } .corp-cmdk[hidden] { display: none !important; } .corp-cmdk__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.35); } .corp-cmdk__panel { position: relative; width: min(520px, 100%); background: var(--corp-bg); border: 1px solid var(--corp-border); border-radius: var(--corp-r-lg); box-shadow: 0 16px 48px rgba(10, 10, 10, 0.14), 0 2px 8px rgba(10, 10, 10, 0.06); overflow: hidden; display: flex; flex-direction: column; max-height: min(420px, 70vh); } .corp-cmdk__search-row { display: flex; align-items: center; gap: var(--corp-s-2); padding: var(--corp-s-3) var(--corp-s-4); border-bottom: 1px solid var(--corp-border); } .corp-cmdk__search-icon { color: var(--corp-fg-subtle); font-size: 16px; line-height: 1; flex-shrink: 0; } .corp-cmdk__input { flex: 1; border: 0; outline: none; background: transparent; font-size: var(--corp-text-base); color: var(--corp-fg); padding: var(--corp-s-1) 0; min-width: 0; } .corp-cmdk__input::placeholder { color: var(--corp-fg-subtle); } .corp-cmdk__esc { font-family: inherit; font-size: 11px; color: var(--corp-fg-subtle); border: 1px solid var(--corp-border); border-radius: var(--corp-r-sm); padding: 1px 5px; flex-shrink: 0; } .corp-cmdk__list { list-style: none; margin: 0; padding: var(--corp-s-2); overflow-y: auto; flex: 1; } .corp-cmdk__item { display: flex; align-items: center; justify-content: space-between; gap: var(--corp-s-3); padding: var(--corp-s-2) var(--corp-s-3); border-radius: var(--corp-r); cursor: pointer; font-size: var(--corp-text-sm); color: var(--corp-fg); } .corp-cmdk__item:hover, .corp-cmdk__item--active { background: var(--corp-surface-sunken); } .corp-cmdk__label { font-weight: 500; } .corp-cmdk__key { font-size: var(--corp-text-xs); color: var(--corp-fg-subtle); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .corp-cmdk__empty { padding: var(--corp-s-5); text-align: center; color: var(--corp-fg-subtle); font-size: var(--corp-text-sm); } .corp-cmdk__hint { padding: var(--corp-s-2) var(--corp-s-4); border-top: 1px solid var(--corp-border); font-size: 11px; color: var(--corp-fg-subtle); background: var(--corp-surface-alt); } body.corp-cmdk-open { overflow: hidden; } /* Mobile: top bar + slide-out drawer */ @media (max-width: 800px) { :root { --corp-nav-height: var(--corp-mobile-topbar); } body.corp-has-sidenav, body:has(> .corp-nav), body:has(> aside.corp-nav), body:has(> #corp-nav) { padding-left: 0; padding-top: var(--corp-mobile-topbar); } .corp-nav { width: auto; right: 0; bottom: auto; height: var(--corp-mobile-topbar); border-right: 0; border-bottom: 1px solid var(--corp-border); flex-direction: row; align-items: center; } .corp-nav__mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--corp-s-3); width: 100%; height: 100%; padding: 0 var(--corp-s-4); } .corp-nav__menu-btn, .corp-nav__search-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--corp-border); border-radius: var(--corp-r); background: var(--corp-bg); color: var(--corp-fg); font-size: 16px; line-height: 1; padding: 0; } .corp-nav__drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 86vw); background: var(--corp-bg); border-right: 1px solid var(--corp-border); transform: translateX(-105%); transition: transform 160ms ease; z-index: 60; box-shadow: none; } body.corp-nav-open .corp-nav__drawer { transform: translateX(0); box-shadow: 4px 0 24px rgba(10, 10, 10, 0.1); } .corp-nav__backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 10, 10, 0.3); z-index: 55; } body.corp-nav-open .corp-nav__backdrop { display: block; } .corp-nav__search-trigger .corp-nav__kbd { display: none; } .corp-nav__page-actions { padding: var(--corp-s-3) var(--corp-s-4); } } /* ────────── Page layout ──────────────────────────────────────────────── */ .corp-page { max-width: none; width: 100%; margin: 0; padding: var(--corp-s-7) var(--corp-s-5); box-sizing: border-box; } .corp-page--narrow { max-width: none; width: 100%; margin: 0; } .corp-page__header { margin-bottom: var(--corp-s-6); } .corp-page__title { font-size: var(--corp-text-3xl); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--corp-s-2) 0; } .corp-page__subtitle { color: var(--corp-fg-muted); font-size: var(--corp-text-base); margin: 0; } /* ────────── Cards ────────────────────────────────────────────────────── */ .corp-card { background: var(--corp-surface); border: 1px solid var(--corp-border); border-radius: var(--corp-r-lg); padding: var(--corp-s-5); } .corp-card + .corp-card { margin-top: var(--corp-s-4); } .corp-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--corp-s-4); margin-bottom: var(--corp-s-4); padding-bottom: var(--corp-s-3); border-bottom: 1px solid var(--corp-border); } .corp-card__title { font-size: var(--corp-text-lg); font-weight: 600; margin: 0; } .corp-card__hint { font-size: var(--corp-text-sm); color: var(--corp-fg-subtle); } /* ────────── Buttons ──────────────────────────────────────────────────── */ .corp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--corp-s-2); height: 34px; padding: 0 var(--corp-s-4); border-radius: var(--corp-r); border: 1px solid var(--corp-fg); background: var(--corp-fg); color: var(--corp-fg-inverse); font-size: var(--corp-text-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; white-space: nowrap; } .corp-btn:hover { background: #1f1f1f; border-color: #1f1f1f; text-decoration: none; } .corp-btn:focus-visible { outline: 3px solid var(--corp-accent-ring); outline-offset: 2px; } .corp-btn:disabled { opacity: 0.5; cursor: not-allowed; } .corp-btn--outline { background: transparent; color: var(--corp-fg); border-color: var(--corp-border-strong); } .corp-btn--outline:hover { background: var(--corp-surface-alt); border-color: var(--corp-fg); color: var(--corp-fg); } .corp-btn--ghost { background: transparent; color: var(--corp-fg-muted); border-color: transparent; } .corp-btn--ghost:hover { background: var(--corp-surface-alt); color: var(--corp-fg); } .corp-btn--sm { height: 28px; padding: 0 var(--corp-s-3); font-size: var(--corp-text-xs); } .corp-btn--lg { height: 40px; padding: 0 var(--corp-s-5); font-size: var(--corp-text-base); } .corp-btn--danger { background: var(--corp-fail); border-color: var(--corp-fail); } .corp-btn--danger:hover { background: #991b1b; border-color: #991b1b; } /* ────────── Forms ────────────────────────────────────────────────────── */ .corp-input, .corp-select, .corp-textarea { width: 100%; height: 34px; padding: 0 var(--corp-s-3); border: 1px solid var(--corp-border-strong); border-radius: var(--corp-r); background: var(--corp-surface); color: var(--corp-fg); font-size: var(--corp-text-sm); transition: border-color 120ms ease, box-shadow 120ms ease; } .corp-textarea { height: auto; min-height: 80px; padding: var(--corp-s-2) var(--corp-s-3); resize: vertical; } .corp-input:focus, .corp-select:focus, .corp-textarea:focus { outline: none; border-color: var(--corp-fg); box-shadow: 0 0 0 3px var(--corp-accent-ring); } .corp-input::placeholder { color: var(--corp-fg-subtle); } .corp-field { display: flex; flex-direction: column; gap: var(--corp-s-1); margin-bottom: var(--corp-s-3); } .corp-field__label { font-size: var(--corp-text-sm); font-weight: 500; color: var(--corp-fg); } .corp-field__hint { font-size: var(--corp-text-xs); color: var(--corp-fg-subtle); } /* ────────── Tables ───────────────────────────────────────────────────── */ .corp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--corp-text-sm); } .corp-table thead th { text-align: left; font-weight: 500; color: var(--corp-fg-muted); background: var(--corp-surface-alt); padding: var(--corp-s-2) var(--corp-s-3); border-bottom: 1px solid var(--corp-border); border-top: 1px solid var(--corp-border); font-size: var(--corp-text-xs); text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: var(--corp-nav-height); z-index: 1; } .corp-table tbody td { padding: var(--corp-s-3); border-bottom: 1px solid var(--corp-border); vertical-align: top; } .corp-table tbody tr:hover td { background: var(--corp-surface-alt); } .corp-table tbody tr:last-child td { border-bottom: 0; } /* ────────── Pills / badges ───────────────────────────────────────────── */ .corp-pill { display: inline-flex; align-items: center; padding: 1px var(--corp-s-2); border-radius: 999px; font-size: var(--corp-text-xs); font-weight: 500; border: 1px solid var(--corp-border); background: var(--corp-surface-alt); color: var(--corp-fg-muted); white-space: nowrap; } .corp-pill--pass { background: var(--corp-pass-bg); color: var(--corp-pass); border-color: transparent; } .corp-pill--fail { background: var(--corp-fail-bg); color: var(--corp-fail); border-color: transparent; } .corp-pill--warn { background: var(--corp-warn-bg); color: var(--corp-warn); border-color: transparent; } .corp-pill--info { background: var(--corp-info-bg); color: var(--corp-info); border-color: transparent; } .corp-pill--solid { background: var(--corp-fg); color: var(--corp-fg-inverse); border-color: var(--corp-fg); } /* ────────── Misc ─────────────────────────────────────────────────────── */ hr.corp-hr { border: 0; border-top: 1px solid var(--corp-border); margin: var(--corp-s-5) 0; } .corp-empty { text-align: center; padding: var(--corp-s-7) var(--corp-s-5); color: var(--corp-fg-muted); } .corp-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--corp-border); border-top-color: var(--corp-fg); border-radius: 50%; animation: corp-spin 0.8s linear infinite; } @keyframes corp-spin { to { transform: rotate(360deg); } }