/** * Phase 15 Step 4b (AB2): admin's own layout/component classes, themed * ENTIRELY through packages/ui's `--cb-*` tokens (loaded first, via * `/static/ui/ui.css` - see Layout.tsx's ) - no color, radius, or * font value is ever hardcoded here. This file owns STRUCTURE (the * sidebar/topbar/tabbar shell, card/table/form layout) - what a value * actually IS comes from tokens.css, so a future palette change there * propagates here for free. * * AB1: every value that's genuinely per-request (a progress-bar fill * width, a cohort-heatmap cell's retention intensity) is expressed as * one of a bounded, pre-generated set of classes below (rounded to the * nearest 5% for bars, nearest 10% for heatmap cells) - never an inline * `style=""` attribute. This is what lets the CSP drop 'unsafe-inline' * from style-src entirely (see app.ts / ADMIN-SECURITY.md's Step 4b * section) while still rendering a value that's different on every * request. */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--cb-bg-gradient) var(--cb-bg); color: var(--cb-text); font-family: var(--cb-font, 'Manrope', system-ui, sans-serif); font-size: 14px; font-variant-numeric: tabular-nums; } a { color: var(--cb-cyan); text-decoration: none; } a:hover { color: var(--cb-cyan-hi); } button, input, textarea, select { font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--cb-text-label); } ::-webkit-scrollbar { width: 0; height: 0; } * { scrollbar-width: none; } h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0; } h2 { font-size: 14px; font-weight: 800; margin: 0; } h3 { font-size: 13px; font-weight: 700; margin: 0; color: var(--cb-text-secondary); } /* ---------------------------------------------------------------- */ /* Shell: sidebar (desktop) / topbar + tabbar (mobile) */ /* ---------------------------------------------------------------- */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 18px; border-right: 1px solid var(--cb-border-weak); background: var(--cb-bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar__logo { height: 24px; width: auto; align-self: flex-start; margin: 0 8px; display: block; } .sidebar__kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-text-label); font-weight: 700; margin: 8px 8px 16px; } .sidebar__nav { display: flex; flex-direction: column; gap: 4px; } .sidebar__nav--secondary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cb-border-weak); } .sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .nav-item { display: flex; align-items: center; gap: 10px; min-height: var(--cb-tap-min); padding: 0 12px; border-radius: var(--cb-r-md); border: 1px solid transparent; background: transparent; color: var(--cb-text-secondary); font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; } .nav-item svg { flex: none; } .nav-item.active { background: rgba(var(--cb-cyan-rgb), 0.12); border-color: rgba(var(--cb-cyan-rgb), 0.45); color: var(--cb-cyan); box-shadow: 0 0 18px rgba(var(--cb-cyan-rgb), 0.25); } .nav-item:hover:not(.active) { color: var(--cb-text); } .status-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--cb-r-md); background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); font-size: 12px; color: var(--cb-text-secondary); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot--ok { background: var(--cb-green); box-shadow: 0 0 8px rgba(var(--cb-green-rgb), 0.8); } .dot--warn { background: var(--cb-orange); box-shadow: 0 0 8px rgba(var(--cb-orange-rgb), 0.6); } .dot--bad { background: var(--cb-red); box-shadow: 0 0 8px rgba(var(--cb-red-rgb), 0.7); } .dot--sm { width: 6px; height: 6px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cb-cyan-gradient); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #062330; flex: none; } .who-row { display: flex; align-items: center; gap: 10px; padding: 0 4px; } .who-row__name { flex: 1; min-width: 0; line-height: 1.2; } .who-row__name .name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-row__name .role { font-size: 11px; color: var(--cb-text-secondary); } .icon-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--cb-text-secondary); display: grid; place-items: center; cursor: pointer; border-radius: var(--cb-r-sm); } .icon-btn:hover { color: var(--cb-text); } .topbar { display: none; align-items: center; justify-content: space-between; padding: 14px 16px 8px; } .topbar__logo { height: 22px; width: auto; display: block; } .topbar__who { display: flex; align-items: center; gap: 8px; } .topbar__kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-text-label); font-weight: 700; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .content { flex: 1; padding: 20px 24px 40px; } .content__inner { max-width: 1120px; display: flex; flex-direction: column; gap: 16px; } .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 12px 14px; background: rgba(11, 22, 34, 0.96); border-top: 1px solid var(--cb-border-weak); } .tabbar__track { display: flex; gap: 4px; padding: 5px; border-radius: var(--cb-r-xl); background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); } .tabbar .nav-item { flex: 1; min-height: 50px; border-radius: var(--cb-r-md); flex-direction: column; justify-content: center; gap: 3px; font-size: 10px; } /* ---------------------------------------------------------------- */ /* Page header + stat grid */ /* ---------------------------------------------------------------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .page-head__sub { font-size: 12px; color: var(--cb-text-secondary); margin-top: 2px; } .live-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cb-text-secondary); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .stat-card { padding: 14px 16px; border-radius: var(--cb-r-xl); background: var(--cb-surface-1); border: 1px solid var(--cb-border-weak); box-shadow: inset 0 1px 0 var(--cb-border-top-highlight); } .stat-card__label { font-size: 11px; color: var(--cb-text-secondary); display: flex; align-items: center; gap: 6px; } .stat-card__value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; } .stat-card__value--cyan { color: var(--cb-cyan); text-shadow: 0 0 14px rgba(var(--cb-cyan-rgb), 0.4); } .stat-card__note { font-size: 12px; color: var(--cb-text-secondary); margin-top: 4px; } .stat-card__note--up { color: var(--cb-green); font-weight: 700; } /* ---------------------------------------------------------------- */ /* Cards / tiles / sections */ /* ---------------------------------------------------------------- */ .card { padding: 16px; border-radius: var(--cb-r-xl); background: var(--cb-surface-1); border: 1px solid var(--cb-border-weak); box-shadow: inset 0 1px 0 var(--cb-border-top-highlight); } .card--pad-sm { padding: 12px 14px; } .card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .card__head-note { font-size: 11px; color: var(--cb-text-secondary); } .card-link { font-size: 12px; font-weight: 700; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; } .card-grid--sm { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .tile { padding: 10px 12px; border-radius: var(--cb-r-md); background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); } .tile-grid { display: grid; gap: 8px; } .tile-grid--2 { grid-template-columns: 1fr 1fr; } .tile-grid--3 { grid-template-columns: repeat(3, 1fr); } .tile__label { font-size: 11px; color: var(--cb-text-secondary); display: flex; align-items: center; gap: 6px; } .tile__value { font-size: 20px; font-weight: 800; margin-top: 2px; } .tile__value--md { font-size: 15px; } .tile__value--lg { font-size: 24px; } .tile__sub { font-size: 11px; color: var(--cb-text-secondary); margin-top: 2px; } .section { display: flex; flex-direction: column; gap: 16px; } .section--mt { margin-top: 6px; } .stack-col { display: flex; flex-direction: column; gap: 12px; } /* Small structural utility classes - named, not inline `style=` (AB1) - for one-off layout tweaks that don't warrant a whole new component. */ .identity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .avatar--lg { width: 52px; height: 52px; font-size: 18px; } .identity-name-block { flex: 1; min-width: 180px; } .identity-worth { text-align: right; min-width: 150px; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mb-12 { margin-bottom: 12px; } .row__key { flex: 2; } .row__progress { width: 70px; } .actions-head-title { font-size: 16px; font-weight: 800; } .field--wide { min-width: 220px; } /* ---------------------------------------------------------------- */ /* Rows (audit log, activity, orders, challenges) */ /* ---------------------------------------------------------------- */ .row-list { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--cb-border-weak); font-size: 13px; } .row-list > .row:first-child { border-top: 0; } .row--tall { min-height: 44px; } .row__time { width: 54px; flex: none; font-size: 12px; color: var(--cb-text-secondary); } .row__time--wide { width: 88px; } .row__who { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--cb-text-secondary); } .row__text { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__amount { font-size: 12px; font-weight: 700; flex: none; } .row__icon { width: 30px; height: 30px; flex: none; border-radius: var(--cb-r-sm); display: grid; place-items: center; font-size: 13px; font-weight: 800; } .row__icon--round { width: 26px; height: 26px; border-radius: 50%; } /* ---------------------------------------------------------------- */ /* Badges / pills / chips */ /* ---------------------------------------------------------------- */ .badge { min-width: 44px; text-align: center; padding: 3px 8px; border-radius: var(--cb-r-pill); font-size: 11px; font-weight: 700; display: inline-block; } .badge--ok { background: rgba(var(--cb-green-rgb), 0.14); color: var(--cb-green); } .badge--bad { background: rgba(var(--cb-red-rgb), 0.14); color: var(--cb-red-text); } .badge--warn { background: rgba(var(--cb-orange-rgb), 0.14); color: var(--cb-orange); } .badge--neutral { background: rgba(255, 255, 255, 0.06); color: var(--cb-text-secondary); } .badge--cyan { background: rgba(var(--cb-cyan-rgb), 0.12); color: var(--cb-cyan); } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .chip { min-height: 32px; padding: 0 12px; border-radius: var(--cb-r-pill); border: 1px solid var(--cb-border); background: transparent; color: var(--cb-text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .chip.active { border-color: rgba(var(--cb-cyan-rgb), 0.45); background: rgba(var(--cb-cyan-rgb), 0.12); color: var(--cb-cyan); } .chip--stat { background: var(--cb-surface-2); border-color: var(--cb-border); cursor: default; } .chip--stat b { color: var(--cb-text); } .chip--stat span:last-child { color: var(--cb-text-label); } /* ---------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--cb-r-md); border: 1px solid var(--cb-border); background: var(--cb-surface-1); color: var(--cb-text); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { border: 0; color: #fff; background: var(--cb-cyan-gradient); box-shadow: 0 0 22px rgba(var(--cb-cyan-rgb), 0.45); } .btn-danger { border: 0; color: #fff; background: linear-gradient(180deg, #ff6b6b, var(--cb-red) 60%, #c62828); box-shadow: 0 0 22px rgba(var(--cb-red-rgb), 0.35); } .btn-secondary { background: var(--cb-surface-1); border-color: var(--cb-border); } .btn-ghost { background: transparent; border-color: transparent; color: var(--cb-text-secondary); } .btn-block { width: 100%; } /* Segmented control - a real link/radio group styled as tabs, never a JS-driven toggle. `n` (option count) is always a small, fixed value at each call site (2 or 3), so it's one of these two fixed classes - never an inline style, unlike packages/ui's own Segmented component. */ .segmented { display: grid; gap: 4px; padding: 4px; border-radius: var(--cb-r-lg); background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); } .segmented--2 { grid-template-columns: 1fr 1fr; } .segmented--3 { grid-template-columns: repeat(3, 1fr); } .segmented--scroll { display: flex; overflow-x: auto; } .segmented--scroll .segmented__option { flex: none; padding: 0 14px; } .segmented__option { min-height: 38px; border: 0; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; background: transparent; color: var(--cb-text-secondary); text-decoration: none; display: flex; align-items: center; justify-content: center; } .segmented__option.active { background: rgba(var(--cb-cyan-rgb), 0.14); color: var(--cb-cyan); } .segmented__option--danger.active { background: rgba(var(--cb-red-rgb), 0.14); color: var(--cb-red-text); } /* A form-submitted segmented pair (radio-hack, e.g. the action form's Add/Remove direction) - zero JS, the checked radio is what a real submit sends. */ .segmented-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--cb-r-lg); background: var(--cb-surface-2); border: 1px solid var(--cb-border-weak); } .segmented-radio input { position: absolute; opacity: 0; pointer-events: none; } .segmented-radio label { min-height: 38px; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--cb-text-secondary); } .segmented-radio input:checked + label { background: rgba(var(--cb-cyan-rgb), 0.14); color: var(--cb-cyan); } .segmented-radio input:focus-visible + label { outline: 2px solid var(--cb-cyan); outline-offset: 2px; } /* ---------------------------------------------------------------- */ /* Forms */ /* ---------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-text-secondary); display: flex; justify-content: space-between; } .field__label .required { color: var(--cb-red-text); text-transform: none; letter-spacing: normal; font-weight: 600; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* A blanket base style for every native form control, not just ones explicitly given the .input/.select/.textarea class - a handful of lower-traffic pages (blocklist, launch-reset, some analytics forms) use bare /