/* * kickoff-v2 operator console styles. Ported from the v1 UI design tokens * (outreach/web/src/ui/tokens.css + shell.css + components.css). Framework * agnostic: every color/space/radius is a CSS custom property on :root (light), * overridden under [data-theme="dark"]. Self-contained (system font stack, no * external CDN/fonts) so the served page is CSP-clean. The shell renders * cleanly in BOTH themes via the [data-theme] switch that Alpine stamps on * . */ /* ============================ Design tokens ============================ */ :root { --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --lh-tight: 1.25; --lh-normal: 1.5; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; --sidebar-w: 15rem; --topbar-h: 3.25rem; /* Color roles - LIGHT */ --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef0f3; --border: #d8dce1; --text: #1a1d21; --text-muted: #5b6570; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-contrast: #ffffff; --ok: #15803d; --ok-bg: #dcfce7; --warn: #b45309; --warn-bg: #fef3c7; --bad: #b91c1c; --bad-bg: #fee2e2; --info: #1d4ed8; --info-bg: #dbeafe; --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --shadow-2: 0 4px 8px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06); } [data-theme='dark'] { --bg: #0f1216; --surface: #171b21; --surface-2: #1f242b; --border: #2c333c; --text: #e6e9ed; --text-muted: #9aa4b0; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-contrast: #ffffff; --ok: #4ade80; --ok-bg: #12331f; --warn: #fbbf24; --warn-bg: #382a0a; --bad: #f87171; --bad-bg: #3a1618; --info: #60a5fa; --info-bg: #12233d; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.55); } /* ============================ Base reset ============================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0 0 var(--space-4); } /* ============================ App shell ============================ */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-4) var(--space-3); overflow-y: auto; } .brand-mark { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); padding: 0 var(--space-2) var(--space-4); } .sidebar nav { display: flex; flex-direction: column; gap: var(--space-1); } .sidebar nav a { display: block; padding: var(--space-2); border-radius: var(--radius-md); color: var(--text); font-size: var(--fs-md); text-decoration: none; border-left: 2px solid transparent; } .sidebar nav a:hover { background: var(--surface-2); text-decoration: none; } .sidebar nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sidebar nav a[aria-current='page'] { background: var(--info-bg); color: var(--accent); font-weight: var(--fw-medium); border-left-color: var(--accent); } .main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .topbar { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-h); flex: none; padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .env-badge { margin-right: auto; } .content { flex: 1; padding: var(--space-5); overflow-y: auto; } /* ---- Env badge ---- */ .env-badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); height: 1.5rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--info); background: var(--info-bg); border: 1px solid var(--info); } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font-size: var(--fs-lg); line-height: 1; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================ Page content ============================ */ .page { max-width: 60rem; } .page ul { padding-left: var(--space-5); margin: var(--space-2) 0; } .page li { margin-bottom: var(--space-1); } .muted { color: var(--text-muted); font-size: var(--fs-sm); } /* ============================ Login ============================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .login-card { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--space-5); } .login-card h1 { margin: 0; font-size: var(--fs-xl); } .login-card input { width: 100%; font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); height: 2.25rem; } .login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .login-card button { font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; border: 1px solid transparent; background: var(--accent); color: var(--accent-contrast); } .login-card button:hover { background: var(--accent-hover); } .login-card .error { color: var(--bad); font-size: var(--fs-sm); margin: 0; } /* ============================ Console pages ============================ */ .page-wide { max-width: 84rem; } .page-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); } .page-head h1 { margin: 0; } .page-head .count { color: var(--text-muted); font-size: var(--fs-sm); } /* ---- Brand switcher (topbar) ---- */ .brand-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); } .brand-switch select, .filters select { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); height: 2rem; } .brand-switch select:focus, .filters select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* ---- Filters ---- */ .filters { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } /* ---- Data grid ---- */ .grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .grid thead th { text-align: left; font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); background: var(--surface-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap; } .grid tbody td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; } .grid tbody tr:last-child td { border-bottom: none; } .grid tbody tr:hover { background: var(--surface-2); } .grid .num { text-align: right; } .mono { font-family: var(--font-mono); font-size: var(--fs-xs); } .small { font-size: var(--fs-xs); } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); height: 1.35rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; } .badge + .badge { margin-left: var(--space-1); } .badge-ok { color: var(--ok); background: var(--ok-bg); } .badge-warn { color: var(--warn); background: var(--warn-bg); } .badge-bad { color: var(--bad); background: var(--bad-bg); } .badge-info { color: var(--info); background: var(--info-bg); } .badge-neutral { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); } /* ---- Cards ---- */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 60rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-1); min-width: 0; } .card h2 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-semibold); } .card h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); } .card .grid { box-shadow: none; } /* ---- Key/value list ---- */ .kv { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--fs-sm); } .kv dt { color: var(--text-muted); } .kv dd { margin: 0; word-break: break-word; } /* ---- Notes ---- */ .notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .notes li { display: flex; flex-direction: column; gap: var(--space-1); } .note-meta { color: var(--text-muted); } /* ---- Actions / buttons ---- */ .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .btn { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); cursor: pointer; } .btn:hover { border-color: var(--accent); } .btn:disabled { opacity: 0.5; cursor: progress; } .btn-sm { height: 1.85rem; } .btn-ok { color: var(--ok); border-color: var(--ok); } .btn-bad { color: var(--bad); border-color: var(--bad); } /* ---- Template body preview ---- */ .body-preview { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: var(--lh-normal); white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; max-height: 22rem; overflow: auto; } /* ---- Spam-score panel ---- */ .score-head { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3); } .score-num { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); } .score-ok { color: var(--ok); } .score-warn { color: var(--warn); } .score-bad { color: var(--bad); } /* ---- Flash (jobs console run result) ---- */ .flash { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--info-bg); color: var(--info); border: 1px solid var(--info); font-size: var(--fs-sm); font-family: var(--font-mono); word-break: break-word; } /* ---- Conversation inbox (P2 C4) ---- */ .snippet { max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); } .conversation { display: grid; grid-template-columns: 1fr 20rem; gap: var(--space-4); align-items: start; } .conversation-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .thread { display: flex; flex-direction: column; gap: var(--space-3); } .bubble { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); max-width: 85%; } .bubble-out { align-self: flex-end; background: var(--info-bg); } .bubble-in { align-self: flex-start; background: var(--surface-2); } .bubble-meta { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); } .bubble-subject { font-weight: var(--fw-semibold); margin-bottom: var(--space-1); } .bubble-body { white-space: pre-wrap; word-break: break-word; } .intent-override { margin-top: var(--space-2); font-size: var(--fs-sm); } .composer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .composer textarea, .composer input[type="text"] { width: 100%; } .composer-actions { display: flex; gap: var(--space-2); align-items: center; } .send-reason { font-size: var(--fs-sm); color: var(--bad); } .pipeline-rail { display: flex; flex-direction: column; gap: var(--space-3); } .stage-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); } .stage-buttons form { display: inline; } .next-action, .add-note { display: flex; flex-direction: column; gap: var(--space-2); } /* ---- Settings > Config editor ---- */ .config-editor textarea { width: 100%; min-height: 24rem; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); resize: vertical; white-space: pre; tab-size: 2; } .config-editor textarea:focus { outline: none; border-color: var(--accent); } #config .stage-buttons input[type="text"] { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }