/* ============================================================================ CMEye — design system + components Two themes via [data-theme="dark"] | [data-theme="light"] on . Dark is the default; light is selectable from the sidebar footer. ============================================================================ */ @font-face { font-family: "Sloan CMEye Fixed"; src: url("assets/Sloan-CMEye-Fixed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ───── Theme tokens ───── */ :root { --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,.25); --shadow-2: 0 8px 24px rgba(0,0,0,.18); --shadow-3: 0 16px 48px rgba(0,0,0,.35); --sidebar-w: 244px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --gap: 16px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* Brand accents (constant across themes) — iVista green, NOT highlighter. */ --brand: #0e7a2b; /* iVista green */ --brand-2: #0a5d20; /* darker hover shade */ --brand-soft: #1a9d3d; /* slightly lighter for dark-bg contrast */ --gold: #f2b01e; /* iVista gold */ --gold-dark: #c98e08; /* darker hover shade for gold */ --cyan: #22d3ee; --magenta: #e879f9; --info: #38bdf8; --danger: #ef4444; --warn: #f59e0b; --ok: #15803d; /* Sidebar tokens — defined per-theme below (dark navy in dark mode, lighter royal-blue in light mode, à la Aurora Bank). */ } [data-theme="dark"]{ --shell-bg: #050811; /* outer tray (darker than canvas) */ --bg: #0a0f1f; /* main canvas */ --bg-grad: radial-gradient(1200px 600px at 80% -100px, rgba(34,211,238,.08), transparent 60%), radial-gradient(900px 400px at -100px 100%, rgba(232,121,249,.05), transparent 60%); --surface: #131a2e; --surface-2: #1a2240; --surface-3: #232b4e; --border: #232b4e; --border-soft: #1c2440; --text: #e6edf6; --text-muted: #8c97b0; --text-faint: #5a6680; --accent: var(--brand-soft); /* slightly brighter on dark bg for legibility */ --accent-soft: rgba(26,157,61,.16); --accent-ring: rgba(26,157,61,.30); --pill-bg: #1a2240; --pill-text: #c5d2ea; --input-bg: #0e1530; --input-border: #2a3357; --table-head-bg: #1a2240; --chip-bg: #232b4e; /* Sidebar — dark navy */ --sb-bg: #0e1530; --sb-surface-2: #1a2240; --sb-surface-3: #232b4e; --sb-border: #1c2440; --sb-text: #e6edf6; --sb-text-muted: #8c97b0; --sb-text-faint: #5a6680; --sb-accent-soft: rgba(26,157,61,.16); --sb-accent-ring: rgba(26,157,61,.30); } [data-theme="light"]{ --shell-bg: #dbe5f4; /* light blue-gray outer tray */ --bg: #ffffff; /* main canvas — clean white */ --bg-grad: radial-gradient(1200px 600px at 80% -100px, rgba(14,122,43,.04), transparent 60%); --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e2e8f0; --border: #e2e8f0; --border-soft: #eef2f7; --text: #0f172a; --text-muted: #64748b; --text-faint: #94a3b8; --accent: var(--brand-2); --accent-soft: rgba(14,122,43,.10); --accent-ring: rgba(14,122,43,.22); --pill-bg: #f1f5f9; --pill-text: #1e293b; --input-bg: #ffffff; --input-border: #cbd5e1; --table-head-bg: #f8fafc; --chip-bg: #e2e8f0; /* Sidebar — Aurora Bank-style royal blue (lighter than dark theme) */ --sb-bg: #1e40af; --sb-surface-2: #1e3a8a; --sb-surface-3: #2451c4; --sb-border: rgba(255,255,255,.14); --sb-text: #ffffff; --sb-text-muted: #c7d2fe; --sb-text-faint: #93c5fd; --sb-accent-soft: rgba(255,255,255,.16); --sb-accent-ring: rgba(255,255,255,.32); } /* ───── Reset ───── */ *, *::before, *::after { box-sizing: border-box; } /* `[hidden]` must beat .shell/.auth-screen's `display: grid|flex`. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; /* Outer tray bg — slightly different from --bg so the sidebar + main panel appear as "floating" rounded cards over a darker (or lighter blue) base. Aurora Bank vibes. */ background: var(--shell-bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content:""; position: fixed; inset: 0; pointer-events:none; z-index:0; background: var(--bg-grad); } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 16px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-muted); } .fail { color: var(--danger); } .warn { color: var(--warn); } .success, .ok { color: var(--ok); } /* ═══════════════════════════════════════════════════════════════ APP SHELL — sidebar + main (both rounded, floating over --shell-bg) ═══════════════════════════════════════════════════════════════ */ .shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: 14px; padding: 14px; min-height: 100vh; } .shell[data-collapsed="true"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* ───── Sidebar (rounded floating panel) ───── */ .sidebar { background: var(--sb-bg); color: var(--sb-text); display: flex; flex-direction: column; position: sticky; top: 14px; height: calc(100vh - 28px); border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.16); /* No overflow:hidden — the collapsed-mode collapse button hangs off the right edge (right: -14px) as a pull-tab and was getting clipped. */ z-index: 30; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--sb-border); position: relative; } .sidebar-brand .brand-logo { height: 48px; width: auto; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.05; min-width: 0; transform: translateY(1px); } .brand-name { font-family: "Sloan CMEye Fixed", var(--font); font-weight: 400; font-size: 16px; line-height: 0.92; letter-spacing: 0; color: var(--gold); white-space: nowrap; } .brand-tag { font-size: 11px; color: var(--sb-text-muted); white-space: nowrap; margin-top: 5px; text-align: center; } .sidebar-collapse { margin-left: auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--sb-surface-2); color: var(--sb-text-muted); border: 1px solid var(--sb-border); border-radius: 8px; flex-shrink: 0; transition: background .15s, color .15s; } .sidebar-collapse:hover { background: var(--sb-surface-3); color: var(--sb-text); } .shell[data-collapsed="true"] .sidebar-collapse svg { transform: scaleX(-1); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; } .nav-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--sb-text-faint); padding: 14px 12px 6px; } .nav-section-label:first-child { padding-top: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--sb-text-muted); text-align: left; width: 100%; font-size: 14px; font-weight: 500; transition: background .15s, color .15s, border-color .15s; } .nav-item:hover { background: var(--sb-surface-2); color: var(--sb-text); } .nav-item.active { background: var(--sb-accent-soft); color: var(--sb-text); border-color: var(--sb-accent-ring); box-shadow: inset 3px 0 0 0 var(--accent); } .nav-item svg { flex-shrink: 0; opacity: .9; } .nav-item.active svg { color: var(--accent); opacity: 1; } /* Light theme: sidebar is royal blue, so the dark-green accent gets lost. Make the active stripe + icon white for contrast on the blue. */ [data-theme="light"] .nav-item.active { background: rgba(255,255,255,.18); color: #ffffff; border-color: rgba(255,255,255,.30); box-shadow: inset 3px 0 0 0 #ffffff; } [data-theme="light"] .nav-item.active svg { color: #ffffff; } [data-theme="light"] .nav-item:hover { color: #ffffff; } /* Collapsed sidebar — icons only. The pull-tab collapse button sits OUTSIDE the right edge (right: -14px) as a half-circle handle; no overflow:hidden on .sidebar so it stays visible. */ .shell[data-collapsed="true"] .nav-label, .shell[data-collapsed="true"] .brand-text, .shell[data-collapsed="true"] .theme-label, .shell[data-collapsed="true"] .nav-section-label, .shell[data-collapsed="true"] .user-meta { display: none; } .shell[data-collapsed="true"] .sidebar-brand { justify-content: center; padding: 14px 8px; } .shell[data-collapsed="true"] .sidebar-collapse { position: absolute; right: -14px; top: 22px; width: 28px; height: 28px; background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: 50%; z-index: 31; box-shadow: 2px 0 4px rgba(0,0,0,.3); } .shell[data-collapsed="true"] .nav-item { justify-content: center; padding: 10px; } .shell[data-collapsed="true"] .user-chip { padding: 6px; justify-content: center; gap: 0; } /* In the 64px-wide collapsed rail, avatar + logout icon side-by-side overflow. Hide the logout button — user can expand to sign out. */ .shell[data-collapsed="true"] .user-chip .btn-icon { display: none; } .shell[data-collapsed="true"] .theme-toggle { justify-content: center; padding: 8px; } .sidebar-footer { border-top: 1px solid var(--sb-border); padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; } .theme-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: transparent; border: 1px solid var(--sb-border); border-radius: 10px; color: var(--sb-text-muted); font-size: 13px; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--sb-surface-2); color: var(--sb-text); } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--sb-surface-2); border-radius: 12px; border: 1px solid var(--sb-border); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #001405; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; flex-shrink: 0; overflow: hidden; } /* When an organization logo is uploaded it replaces the initial — show the logo on white in a rounded pill that widens to fit a wide wordmark. */ .user-avatar.has-logo { width: auto; min-width: 32px; max-width: 108px; border-radius: 8px; background: #fff; padding: 3px; } .user-avatar.has-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; } .user-meta { flex: 1; min-width: 0; line-height: 1.2; } .user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-text); } .user-role { font-size: 11px; color: var(--sb-text-muted); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); transition: background .15s, color .15s, border-color .15s; } .btn-icon:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent-ring); } /* Inside the always-dark sidebar, btn-icon (logout) should match the rail. */ .user-chip .btn-icon { border-color: var(--sb-border); color: var(--sb-text-muted); } .user-chip .btn-icon:hover { background: var(--sb-surface-3); color: var(--sb-text); border-color: var(--sb-accent-ring); } /* ───── Main canvas (rounded floating panel) ───── */ .main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.10); min-height: calc(100vh - 28px); overflow: hidden; /* clip topbar at the rounded top corners */ } .topbar { height: var(--topbar-h); background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 24px; /* No `position: sticky` — main is overflow:hidden for the rounded clip, so sticky would freeze at top of main anyway. Header scrolls naturally. */ z-index: 20; flex-shrink: 0; } /* Back button as a yellow back-pointing chevron in the topbar (left side). Mirror-image of the .step chevrons. */ .btn-back-chevron { --chev: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px calc(14px + var(--chev)); background: var(--gold); color: #1a1100; font-size: 12px; font-weight: 700; border: 0; cursor: pointer; /* Left-pointing chevron: left edge tapers to a point, right edge flat. */ clip-path: polygon( 0 50%, var(--chev) 0, 100% 0, 100% 100%, var(--chev) 100% ); transition: background .15s; flex-shrink: 0; } .btn-back-chevron:hover { background: var(--gold-dark); } .btn-back-chevron svg { width: 14px; height: 14px; } .topbar-spacer { flex: 1; } #btn-menu { display: none; } /* shown only on mobile */ .crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; } .crumbs .crumb-sep { color: var(--text-faint); } .crumbs .crumb-current { color: var(--text); font-weight: 600; } .crumbs button { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; } .crumbs button:hover { color: var(--text); } /* When the crumbs host is given a chevron stepper instead, drop crumb spacing. The stepper supplies its own spacing via clip-path margins. */ .crumbs.topbar-stepper { gap: 0; } .crumbs.topbar-stepper .stepper { margin: 0; } .crumbs.topbar-stepper .step { font-size: 12px; padding-top: 6px; padding-bottom: 6px; } .crumbs.topbar-stepper .step .step-num { width: 18px; height: 18px; font-size: 11px; } .page { flex: 1; padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ COMMON COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* Page header bar (title + subtitle on left, actions on right) */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-header .ph-left { flex: 1; min-width: 0; } .page-header .ph-sub { color: var(--text-muted); font-size: 14px; margin-top: 2px; } .page-header .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Card */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-1); } .card h2, .card h3 { margin-top: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-head h3 { margin: 0; } .card-head .card-actions { display: flex; gap: 8px; } /* Grids */ .grid { display: grid; gap: 16px; } /* Grid cards fill their cell so the shorter of two side-by-side cards (e.g. Practice vs Barriers with different item counts) stretches to the row height and its WHITE background covers the whole cell. Without this, in print the shorter card ends at its content height and the gray page background shows in the rest of the cell (`break-inside: avoid` suppresses the default stretch). */ .grid > .chart-card { height: 100%; } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1200px) { .grid-6, .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 1024px) { .grid-6, .grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .grid-6, .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* KPI tile */ .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; overflow: hidden; } .kpi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events:none; background: linear-gradient(135deg, transparent 50%, var(--accent-soft) 100%); opacity: .6; } .kpi > * { position: relative; z-index: 1; } .kpi .kpi-label { color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .kpi .kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1; } .kpi .kpi-meta { color: var(--text-muted); font-size: 12px; margin-top: 6px; } .kpi .kpi-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .kpi.cyan .kpi-icon { background: rgba(34,211,238,.16); color: var(--cyan); } .kpi.cyan::after { background: linear-gradient(135deg, transparent 50%, rgba(34,211,238,.16) 100%); } .kpi.gold .kpi-icon { background: rgba(242,176,30,.16); color: var(--gold); } .kpi.gold::after { background: linear-gradient(135deg, transparent 50%, rgba(242,176,30,.16) 100%); } .kpi.magenta .kpi-icon { background: rgba(232,121,249,.16); color: var(--magenta); } .kpi.magenta::after { background: linear-gradient(135deg, transparent 50%, rgba(232,121,249,.16) 100%); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s, transform .05s; text-decoration: none; } .btn:hover { background: var(--surface-3); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--brand); color: #ffffff; border-color: transparent; } .btn-primary:hover { background: var(--brand-2); } [data-theme="light"] .btn-primary { color: white; background: var(--brand); } [data-theme="light"] .btn-primary:hover { background: var(--brand-2); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: #dc2626; } .btn-icon-danger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; font: inherit; } .btn-icon-danger:hover { background: rgba(239,68,68,.12); color: var(--danger); border-color: var(--danger); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-block { width: 100%; } /* Pill / chip */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--pill-bg); color: var(--pill-text); border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.ok { background: rgba(14,122,43,.18); color: #6ee7a8; } .pill.warn { background: rgba(245,158,11,.18); color: #fcd34d; } .pill.fail { background: rgba(239,68,68,.18); color: #fca5a5; } .pill.info { background: rgba(56,189,248,.18); color: #7dd3fc; } [data-theme="light"] .pill.ok { background: #dcfce7; color: #15803d; } [data-theme="light"] .pill.warn { background: #fef3c7; color: #92400e; } [data-theme="light"] .pill.fail { background: #fee2e2; color: #991b1b; } [data-theme="light"] .pill.info { background: #dbeafe; color: #1e40af; } /* Inputs */ .field { display: flex; flex-direction: column; gap: 6px; } .label { color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; } .input, .select, .textarea { width: 100%; padding: 10px 12px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 10px; transition: border-color .15s, box-shadow .15s; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .input.input-sm { padding: 6px 8px; font-size: 13px; } /* Click-to-edit affordance for the Meetings list meeting-date cell. */ .date-edit-display, .name-edit-display { display: inline-block; padding: 2px 6px; border-radius: 6px; cursor: pointer; border: 1px dashed transparent; transition: background .12s, border-color .12s; } .date-edit-display:hover, .name-edit-display:hover { background: var(--surface-2); border-color: var(--input-border); } /* Native