/* ========================================================================== NexusIQ Design System — app/static/css/nexusiq.css One source of truth: design tokens + reset + typography + component library. Themeable via [data-theme] on (set before first paint in base.html). 8px spacing grid · restrained palette · handcrafted components · light + dark. ========================================================================== */ /* ---------- Tokens: light (default) ---------------------------------------- */ :root { /* Neutral canvas: soft cool-gray so white surfaces lift with shadow, not borders */ --bg: #f5f6f9; --bg-tint: radial-gradient(1200px 620px at 50% -12%, #edf0fb 0%, var(--bg) 58%); --surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #eaeef4; --surface-inset: #f7f9fc; --border: #e6e9f0; --border-strong: #d3d8e3; --border-faint: #eef1f6; --text: #111725; --text-muted: #58627a; --text-faint: #8a93a6; --text-on-accent: #ffffff; /* Accent: a refined, trustworthy indigo. Used sparingly. */ --accent: #4f56e0; --accent-hover: #434add; --accent-press: #383fc4; --accent-soft: #eef0fe; --accent-softer: #f6f7fe; --accent-border: #cdd2f7; --accent-ring: rgba(79, 86, 224, .28); --accent-fg: #4f56e0; /* Status — semantic (met / progress / none / danger / info) */ --met-bg: #e6f6ec; --met-fg: #12744a; --met-dot: #1ba867; --met-border:#bfe8cf; --prog-bg: #fcf1e1; --prog-fg: #955412; --prog-dot: #e0912f; --prog-border:#f2ddb9; --none-bg: #eef0f4; --none-fg: #5a6478; --none-dot: #a7b0c0; --none-border:#e0e4ec; --danger-bg: #fdecec; --danger-fg: #b42a2a; --danger-dot: #e5484d; --danger-border:#f4cdcd; --info-bg: var(--accent-soft); --info-fg: var(--accent); --info-border: var(--accent-border); /* Sidebar (dark rail in both themes) */ --sidebar-bg: #121828; --sidebar-fg: #c6cede; --sidebar-muted: #7c8699; --sidebar-active: #232f4d; --sidebar-hover: rgba(255,255,255,.05); --sidebar-border: rgba(255,255,255,.07); /* Spacing scale (8px grid; 4 for fine tuning) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Radius */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; --radius: var(--r-lg); --radius-sm: var(--r-sm); /* legacy aliases */ /* Elevation */ --shadow-xs: 0 1px 2px rgba(16,22,37,.06); --shadow-sm: 0 1px 2px rgba(16,22,37,.05), 0 2px 6px rgba(16,22,37,.06); --shadow-md: 0 4px 14px rgba(16,22,37,.09), 0 2px 5px rgba(16,22,37,.05); --shadow-lg: 0 14px 40px rgba(16,22,37,.14); --shadow: var(--shadow-sm); /* legacy alias */ /* Typography */ --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --fs-display: 2.25rem; --fs-h1: 1.6rem; --fs-h2: 1.25rem; --fs-h3: 1.0625rem; --fs-body: .9375rem; --fs-sm: .8125rem; --fs-xs: .6875rem; --lh-tight: 1.15; --lh: 1.55; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --dur: 150ms; --dur-slow: 260ms; --z-topbar: 20; --z-sticky: 30; --z-overlay: 60; --z-toast: 80; --maxw: 1120px; color-scheme: light; } /* ---------- Tokens: dark ---------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0b0f18; --bg-tint: radial-gradient(1200px 640px at 50% -12%, #16203c 0%, var(--bg) 60%); --surface: #141b27; --surface-2: #1d2534; --surface-3: #26303f; --surface-inset: #10161f; --border: #262f3e; --border-strong: #37435a; --border-faint: #1d2634; --text: #e7ebf3; --text-muted: #9aa4b6; --text-faint: #697489; --accent: #7b83f0; --accent-hover: #939af5; --accent-press: #6b73e6; --accent-soft: #1e2140; --accent-softer: #171a30; --accent-border: #333a63; --accent-ring: rgba(123, 131, 240, .32); --accent-fg: #99a0ff; --met-bg: #0f2a1e; --met-fg: #55d998; --met-dot: #1eb46e; --met-border:#1d4634; --prog-bg: #2c2410; --prog-fg: #edbd6a; --prog-dot: #e0912f; --prog-border:#4a3c18; --none-bg: #1b2433; --none-fg: #93a0b4; --none-dot: #5a6884; --none-border:#2a3547; --danger-bg: #2c1517; --danger-fg: #f0a2a2; --danger-dot: #e5484d; --danger-border:#54282a; --info-bg: var(--accent-soft); --info-fg: var(--accent-fg); --info-border: var(--accent-border); --sidebar-bg: #0e131f; --sidebar-fg: #c2cbdb; --sidebar-muted: #74809a; --sidebar-active: #1f2942; --sidebar-hover: rgba(255,255,255,.04); --sidebar-border: rgba(255,255,255,.06); --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.36), 0 3px 8px rgba(0,0,0,.42); --shadow-md: 0 6px 18px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 16px 44px rgba(0,0,0,.6); color-scheme: dark; } /* ---------- Reset & base --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-body); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent-fg); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.014em; line-height: var(--lh-tight); color: var(--text); } p { margin: 0; } small { font-size: var(--fs-sm); } strong, b { font-weight: 650; } code, kbd, samp { font-family: var(--font-mono); font-size: .92em; } img, svg { vertical-align: middle; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; } ::selection { background: var(--accent-soft); color: var(--accent-fg); } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--r-sm); } button { font-family: inherit; } /* Custom scrollbars (webkit) — subtle, modern */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } /* Utility text helpers */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tnum { font-variant-numeric: tabular-nums; } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; top: -60px; left: 12px; z-index: 100; background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: var(--r-sm); transition: top var(--dur) var(--ease); } .skip-link:focus { top: 12px; color: #fff; } /* ========================================================================== App shell — sidebar + topbar + main ========================================================================== */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex: 0 0 248px; background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--sidebar-border); } .brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--sidebar-border); } .brand .mark, .brand .logo-mark { width: 30px; height: 30px; flex: 0 0 auto; } .brand b { color: #fff; font-size: 1.02rem; display: block; letter-spacing: -.02em; font-weight: 650; line-height: 1.1; } .brand span { color: var(--sidebar-muted); font-size: .72rem; letter-spacing: .02em; } nav.side-nav { padding: var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .side-section { color: var(--sidebar-muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: var(--sp-4) var(--sp-3) var(--sp-2); } .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: .5rem .7rem; border-radius: var(--r-md); color: var(--sidebar-fg); font-size: .9rem; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); position: relative; } .nav-item:hover { color: #fff; background: var(--sidebar-hover); } .nav-item.active { background: var(--sidebar-active); color: #fff; font-weight: 600; } .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 999px; background: var(--accent); } .nav-admin { color: #8ea3ff; } .nav-admin:hover { color: #b3c1ff; background: rgba(123,140,255,.10); } .nav-item.disabled { color: var(--sidebar-muted); cursor: default; } .nav-item.disabled:hover { background: none; color: var(--sidebar-muted); } .nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; } .nav-item.active svg { opacity: 1; } .nav-item em { margin-left: auto; font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sidebar-muted); border: 1px solid var(--sidebar-border); border-radius: var(--r-xs); padding: .08rem .34rem; } .side-foot { padding: var(--sp-3); border-top: 1px solid var(--sidebar-border); } .user { display: flex; align-items: center; gap: var(--sp-3); } .avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: linear-gradient(150deg, var(--accent), var(--accent-press)); color: #fff; display: grid; place-items: center; font-weight: 650; font-size: .82rem; letter-spacing: -.01em; } .user-meta { min-width: 0; } .user-meta b { color: #fff; font-size: .82rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .user-meta a { color: var(--sidebar-muted); font-size: .74rem; } .user-meta a:hover { color: var(--sidebar-fg); } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { min-height: 60px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--sp-6); position: sticky; top: 0; z-index: var(--z-topbar); } .topbar .page-title { font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; } .topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .topbar-right { display: flex; align-items: center; gap: var(--sp-3); } .nav-toggle { display: none; } .org-pill { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: .32rem .8rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: background var(--dur) var(--ease); } .org-pill:hover { background: var(--surface-3); color: var(--text); } .org-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } main, .app-main { padding: var(--sp-6); max-width: var(--maxw); width: 100%; margin: 0 auto; } .app-banner { padding: .6rem var(--sp-6); font-size: .86rem; font-weight: 550; border-bottom: 1px solid var(--border); background: var(--accent-soft); color: var(--accent-fg); display: flex; align-items: center; gap: var(--sp-2); } .app-banner.warning { background: var(--prog-bg); color: var(--prog-fg); } .app-banner a { font-weight: 650; text-decoration: underline; } /* Page header pattern */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; } .page-head h1 { font-size: var(--fs-h1); } .page-head .sub { color: var(--text-muted); font-size: .9rem; margin-top: var(--sp-1); max-width: 62ch; } /* ========================================================================== Cards & surfaces ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card.pad { padding: var(--sp-5); } .card.hoverable { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card.hoverable:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); } .card-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .card-head h3 { font-size: var(--fs-h3); } .card-body { padding: var(--sp-5); } .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-4); } .section-card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-1); } .section-card .hint { color: var(--text-muted); font-size: .84rem; margin: 0 0 var(--sp-4); } .divider { height: 1px; background: var(--border); margin: var(--sp-5) 0; } /* Stat tiles */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-5); } .stat .label { color: var(--text-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: var(--sp-1); font-variant-numeric: tabular-nums; } .stat .delta { font-size: .78rem; font-weight: 600; margin-top: var(--sp-1); } .stat .delta.up { color: var(--met-fg); } .stat .delta.down { color: var(--danger-fg); } /* ========================================================================== Buttons — one system: .btn + variants + sizes (+ legacy .btn-primary) ========================================================================== */ .btn, .btn-primary, button.btn, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font); font-size: .9rem; font-weight: 600; line-height: 1; padding: .62rem 1.05rem; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); text-decoration: none; user-select: none; } .btn:active, .btn-primary:active { transform: translateY(.5px); } .btn:disabled, .btn-primary:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn svg, .btn-primary svg { width: 16px; height: 16px; flex: 0 0 auto; } .btn-primary, .btn.btn--primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-xs); } .btn-primary:hover, .btn.btn--primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; } .btn-primary:active, .btn.btn--primary:active { background: var(--accent-press); } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); } .btn--secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn--ghost { background: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); } .btn--danger { background: var(--danger-fg); color: #fff; } .btn--danger:hover { background: #a01f1f; color: #fff; } .btn--danger-ghost { background: transparent; color: var(--danger-fg); border-color: var(--danger-border); } .btn--danger-ghost:hover { background: var(--danger-bg); } .btn--sm { padding: .42rem .7rem; font-size: .82rem; border-radius: var(--r-sm); } .btn--lg { padding: .8rem 1.4rem; font-size: 1rem; } .btn--block { width: 100%; } .btn--icon { padding: .5rem; width: 36px; height: 36px; } /* Legacy secondary buttons used inline in some templates */ .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: .62rem 1.05rem; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; } .btn-secondary:hover { background: var(--surface-2); text-decoration: none; } /* ========================================================================== Badges / pills — one status system (.pill legacy + .badge new) ========================================================================== */ .pill, .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .24rem .6rem; border-radius: var(--r-full); font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; line-height: 1; } .pill .dot, .badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .pill.met, .badge.met, .badge--success { background: var(--met-bg); color: var(--met-fg); border-color: var(--met-border); } .pill.met .dot, .badge.met .dot { background: var(--met-dot); } .pill.prog, .badge.prog, .badge--warning { background: var(--prog-bg); color: var(--prog-fg); border-color: var(--prog-border); } .pill.prog .dot, .badge.prog .dot { background: var(--prog-dot); } .pill.none, .pill.pending, .badge.none, .badge--neutral { background: var(--none-bg); color: var(--none-fg); border-color: var(--none-border); } .pill.none .dot, .pill.pending .dot, .badge.none .dot { background: var(--none-dot); } .badge--danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); } .badge--danger .dot { background: var(--danger-dot); } .badge--info, .pill.info { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent-border); } .badge--info .dot { background: var(--accent); } /* Tag / chip */ .tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: .72rem; font-weight: 600; color: var(--accent-fg); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--r-xs); padding: .1rem .42rem; letter-spacing: .02em; } .chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: .36rem .8rem; font-size: .8rem; color: var(--text-muted); box-shadow: var(--shadow-xs); } .chip b { color: var(--accent-fg); } .kbd { font-family: var(--font-mono); font-size: .72rem; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); padding: .08rem .34rem; color: var(--text-muted); } /* ========================================================================== Forms & fields — unified with real label / help / error ========================================================================== */ .field { margin-bottom: var(--sp-4); } .field > label, label.field-label { display: block; font-size: .84rem; font-weight: 600; margin: 0 0 var(--sp-2); color: var(--text); } label.field { display: block; margin: 0 0 var(--sp-2); font-weight: 600; font-size: .86rem; } /* legacy */ .field-help { font-size: .78rem; color: var(--text-muted); margin-top: var(--sp-2); } .field-error { font-size: .78rem; color: var(--danger-fg); margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1); } .input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=tel], select, textarea { width: 100%; padding: .62rem .8rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-md); font-family: var(--font); font-size: .92rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; } textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--text-faint); } .input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } input[aria-invalid=true], textarea[aria-invalid=true], .input.is-invalid { border-color: var(--danger-dot); } input[aria-invalid=true]:focus, textarea[aria-invalid=true]:focus { box-shadow: 0 0 0 3px rgba(229,72,77,.24); } input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; } /* Custom select caret */ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem; } /* Custom checkbox / radio accent */ input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } /* Field grid for multi-column forms */ .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); } .field-group { margin-bottom: var(--sp-4); } /* Form-level error / success banners */ .form-error, .auth-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); border-radius: var(--r-md); padding: .6rem .85rem; font-size: .85rem; margin-bottom: var(--sp-4); } .form-error ul, .auth-error ul { margin: 0; padding-left: 1.1rem; } .form-success { background: var(--met-bg); border: 1px solid var(--met-border); color: var(--met-fg); border-radius: var(--r-md); padding: .6rem .85rem; font-size: .85rem; margin-bottom: var(--sp-4); } /* ========================================================================== Tables — one component ========================================================================== */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); } table.table, table.dtable { width: 100%; border-collapse: collapse; font-size: .88rem; } .table thead th, .dtable thead th { text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: .7rem var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; } .table tbody td, .dtable tbody td { padding: .72rem var(--sp-4); border-bottom: 1px solid var(--border-faint); vertical-align: middle; } .table tbody tr:last-child td, .dtable tbody tr:last-child td { border-bottom: 0; } .table tbody tr, .dtable tbody tr { transition: background var(--dur) var(--ease); } .table tbody tr:hover, .dtable tbody tr:hover { background: var(--surface-2); } .table .num, .dtable .num { text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================================== Progress — bar + ring ========================================================================== */ .bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 999px; transition: width var(--dur-slow) var(--ease); } .bar-fill.met { background: linear-gradient(90deg, var(--met-dot), #23c07a); } .ring { width: 118px; height: 118px; flex: 0 0 118px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--pct,0) * 1%), var(--border) 0); display: grid; place-items: center; transition: background var(--dur-slow) var(--ease); } .ring.met { background: conic-gradient(var(--met-dot) calc(var(--pct,0) * 1%), var(--border) 0); } .ring-inner { width: 90px; height: 90px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1px var(--border); } .ring-pct { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ring-sub { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } /* ========================================================================== Segmented control (e.g. Google Workspace / Microsoft 365 stack toggle) ========================================================================== */ .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 2px; } .segmented button, .segmented .seg { border: 0; background: transparent; color: var(--text-muted); font-weight: 600; font-size: .82rem; padding: .38rem .8rem; border-radius: var(--r-sm); cursor: pointer; transition: all var(--dur) var(--ease); } .segmented button.active, .segmented .seg.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } /* Tabs */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); } .tab { padding: .6rem .2rem; margin-right: var(--sp-4); font-size: .9rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--dur) var(--ease); } .tab:hover { color: var(--text); } .tab.active { color: var(--accent-fg); border-bottom-color: var(--accent); } /* ========================================================================== Empty & loading states ========================================================================== */ .empty { text-align: center; padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-inset); } .empty .empty-icon { width: 48px; height: 48px; margin: 0 auto var(--sp-4); color: var(--text-faint); display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r-lg); } .empty h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); } .empty p { color: var(--text-muted); font-size: .9rem; max-width: 44ch; margin: 0 auto var(--sp-4); } .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); transform: translateX(-100%); animation: sk 1.3s infinite; } @keyframes sk { 100% { transform: translateX(100%); } } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Modal / dialog ========================================================================== */ dialog.op-dialog, .modal { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--surface); color: var(--text); padding: 0; max-width: 460px; width: calc(100% - 2rem); } dialog::backdrop, .modal-backdrop { background: rgba(12,16,24,.5); backdrop-filter: blur(2px); } .modal-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); } .modal-head h3 { font-size: var(--fs-h2); } .modal-body { padding: 0 var(--sp-5) var(--sp-4); color: var(--text-muted); font-size: .9rem; } .modal-actions, .op-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); } /* Toast */ .toast-wrap { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); } .toast { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--r-md); padding: .7rem .95rem; font-size: .86rem; display: flex; align-items: center; gap: var(--sp-2); min-width: 240px; animation: toast-in var(--dur-slow) var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* Flash messages (app_base) */ .flash { padding: .7rem 1rem; border-radius: var(--r-md); font-size: .88rem; margin-bottom: var(--sp-4); border: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); } .flash.success { background: var(--met-bg); color: var(--met-fg); border-color: var(--met-border); } .flash.error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); } .flash.warning { background: var(--prog-bg); color: var(--prog-fg); border-color: var(--prog-border); } .flash.info { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent-border); } /* ========================================================================== Theme toggle ========================================================================== */ .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; color: var(--text-muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle.floating { position: fixed; top: var(--sp-4); right: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-sm); z-index: 10; } /* ========================================================================== Compliance dashboard — hero, domain list, practice rows ========================================================================== */ .hero { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5); } .hero-meta h2 { font-size: 1.4rem; } .hero-meta p { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: .92rem; max-width: 48ch; } .domain { margin-bottom: var(--sp-4); overflow: hidden; } .domain-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .domain-head h3 { font-size: 1rem; display: flex; align-items: center; gap: var(--sp-3); } .domain-code { font-size: .66rem; font-weight: 700; color: var(--accent-fg); background: var(--accent-soft); border-radius: var(--r-xs); padding: .14rem .42rem; letter-spacing: .04em; } .domain-count { font-size: .82rem; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .practice-list { list-style: none; margin: 0; padding: 0; } .practice-row { display: grid; grid-template-columns: 122px 1fr 156px 120px; align-items: center; gap: var(--sp-4); padding: .8rem var(--sp-5); border-bottom: 1px solid var(--border-faint); transition: background var(--dur) var(--ease); } .practice-row:last-child { border-bottom: 0; } .practice-row:hover { background: var(--surface-2); } .p-id { font-weight: 650; font-size: .82rem; font-variant-numeric: tabular-nums; } .p-title { color: var(--text-muted); font-size: .88rem; } .p-prog { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-faint); font-size: .76rem; font-variant-numeric: tabular-nums; } .p-prog .bar { flex: 1; } .p-status { justify-self: end; } /* Practice detail */ .back { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-muted); font-size: .85rem; margin-bottom: var(--sp-4); font-weight: 550; } .back:hover { color: var(--text); } .detail-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-1); } .detail-head .p-id { font-size: 1.1rem; } .detail-title { font-size: var(--fs-h1); margin: var(--sp-2) 0 var(--sp-4); } .req { color: var(--text-muted); font-size: .9rem; } .objective { display: flex; gap: var(--sp-3); align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--border-faint); } .objective:first-of-type { border-top: 0; } .objective input { margin-top: .15rem; flex: 0 0 17px; } .objective .okey { color: var(--accent-fg); font-weight: 700; flex: 0 0 auto; font-size: .9rem; } .objective .otext { font-size: .92rem; } /* ========================================================================== "Do this next" — next-best-action card (new) ========================================================================== */ .next-action { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: linear-gradient(135deg, var(--accent-soft), var(--accent-softer)); border: 1px solid var(--accent-border); border-radius: var(--radius); margin-bottom: var(--sp-5); } .next-action .na-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-md); background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .next-action .na-body { flex: 1; min-width: 0; } .next-action .na-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-fg); } .next-action .na-title { font-size: 1.05rem; font-weight: 650; margin-top: 2px; } .next-action .na-desc { color: var(--text-muted); font-size: .86rem; margin-top: 2px; } /* ========================================================================== Auth — login / signup split layout ========================================================================== */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; } .auth-brand { background: linear-gradient(155deg, #5560e6 0%, #444cd0 44%, #232a63 100%); color: #fff; padding: var(--sp-8) var(--sp-8); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; } .auth-brand > * { position: relative; z-index: 1; } .auth-brand .logo-lg { display: flex; align-items: center; gap: var(--sp-3); } .auth-brand .logo-lg .logo-mark { height: 40px; width: auto; } .auth-brand .wordmark { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; } .auth-hero { margin: auto 0; } .auth-hero h2 { font-size: 2.05rem; line-height: 1.12; letter-spacing: -.025em; max-width: 15ch; color: #fff; } .auth-hero p { color: rgba(255,255,255,.84); margin: var(--sp-4) 0 var(--sp-5); max-width: 42ch; } .auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .auth-points li { display: flex; align-items: center; gap: var(--sp-3); color: rgba(255,255,255,.95); font-size: .95rem; } .auth-points li::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; } .auth-foot { color: rgba(255,255,255,.62); font-size: .8rem; } .auth-form-wrap { display: grid; place-items: center; padding: var(--sp-5); background: var(--bg); } .auth-card { width: 100%; max-width: 384px; } .auth-card h1 { font-size: 1.5rem; } .auth-sub { color: var(--text-muted); font-size: .92rem; margin: var(--sp-2) 0 var(--sp-5); } .auth .field { margin-bottom: var(--sp-4); } .auth label { display: block; font-size: .84rem; font-weight: 600; margin: 0 0 var(--sp-2); } .auth input[type=email], .auth input[type=password], .auth input[type=text] { width: 100%; } .auth-submit { width: 100%; margin-top: var(--sp-1); } .auth-divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-faint); font-size: .72rem; margin: var(--sp-5) 0; text-transform: uppercase; letter-spacing: .06em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-sso { display: flex; flex-direction: column; gap: var(--sp-2); } .sso-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: .62rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text); font-weight: 600; font-size: .9rem; background: var(--surface); transition: background var(--dur) var(--ease); } .sso-btn:hover { text-decoration: none; background: var(--surface-2); color: var(--text); } .admin-note { color: var(--text-faint); font-size: .8rem; margin-top: var(--sp-5); text-align: center; } .idle-note { background: var(--prog-bg); color: var(--prog-fg); border: 1px solid var(--prog-border); border-radius: var(--r-md); padding: .55rem .8rem; font-size: .84rem; margin-bottom: var(--sp-4); } /* Auth-simple wrapper (allauth mfa layout) */ .auth-simple { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: var(--bg-tint); } .auth-simple .auth-card { max-width: 420px; } /* ========================================================================== Landing / marketing splash ========================================================================== */ .landing { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: var(--bg-tint); } .landing-card { max-width: 560px; text-align: center; } .brand-lg { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: var(--sp-5); } .brand-lg .mark, .brand-lg .logo-mark { width: 30px; height: 30px; } .landing h1 { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -.025em; } .landing .lede { color: var(--text-muted); font-size: 1.02rem; margin: var(--sp-4) auto var(--sp-5); max-width: 46ch; } .sso { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; } .sso .btn-primary { min-width: 260px; } .config-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); font-size: .88rem; color: var(--text-muted); box-shadow: var(--shadow-sm); } .domain-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-6) 0 var(--sp-5); } .landing-stats { display: flex; gap: var(--sp-6); justify-content: center; color: var(--text-muted); font-size: .86rem; } .landing-stats b { color: var(--text); font-size: 1.05rem; } .logo-mark { height: 30px; width: auto; display: block; } /* ========================================================================== Responsive — real mobile nav (off-canvas), not a scrolling strip ========================================================================== */ @media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-brand { display: none; } } @media (max-width: 900px) { .nav-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-muted); cursor: pointer; } .nav-toggle:hover { background: var(--surface-2); color: var(--text); } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: var(--z-overlay); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .nav-scrim { position: fixed; inset: 0; background: rgba(12,16,24,.45); z-index: calc(var(--z-overlay) - 1); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); } .nav-scrim.open { opacity: 1; visibility: visible; } main, .app-main { padding: var(--sp-5) var(--sp-4); } .topbar { padding: 0 var(--sp-4); } .hero { flex-direction: column; text-align: center; gap: var(--sp-4); } .hero-meta p { margin-left: auto; margin-right: auto; } } @media (max-width: 640px) { .practice-row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); } .p-prog, .p-title { grid-column: 1 / -1; } .page-head { flex-direction: column; } .next-action { flex-direction: column; text-align: center; } .stat-grid { grid-template-columns: 1fr 1fr; } } /* ========================================================================== Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }