/* ── Fonts are loaded via in each layout's so they fetch in
parallel with this stylesheet instead of serially after it. ─────────── */
/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* ── Custom properties ────────────────────────────────────────────────────── */
:root {
--bg: #09090b;
--bg2: #111113;
--bg3: #18181b;
--bg4: #222226;
--border: #2a2a2e;
--border2: #3a3a3e;
--text: #e4e4e7;
--text-header: #c4c4c8; /* brighter than --muted; for section/panel/card headers */
--muted: #71717a;
--dim: #52525b;
--ok: #22c55e;
--warn: #f59e0b;
--crit: #ef4444;
--info: #3b82f6;
--purple: #a78bfa;
--ok-bg: #052e16;
--warn-bg: #1c1400;
--crit-bg: #1c0505;
--info-bg: #0c1e3c;
--purple-bg: #1e1435;
--font-mono: 'JetBrains Mono', monospace;
--font-ui: 'Inter', system-ui, sans-serif;
--radius: 8px;
--radius-lg: 12px;
}
/* Light theme — overrides applied when */
[data-theme="light"] {
--bg: #fafafa;
--bg2: #ffffff;
--bg3: #f4f4f5;
--bg4: #e4e4e7;
--border: #e4e4e7;
--border2: #d4d4d8;
--text: #18181b;
--text-header: #27272a; /* darker than --muted for label clarity */
--muted: #52525b;
--dim: #a1a1aa;
--ok: #16a34a;
--warn: #b45309;
--crit: #dc2626;
--info: #2563eb;
--purple: #7c3aed;
--ok-bg: #dcfce7;
--warn-bg: #fef3c7;
--crit-bg: #fee2e2;
--info-bg: #dbeafe;
--purple-bg: #ede9fe;
}
/* ── User-selectable text size — applied via [data-font-size] on .
Uses CSS `zoom` because the existing stylesheet is mostly px-based; this
scales every dimension proportionally without an invasive px→rem rewrite.
Supported in all modern browsers (WebKit, Blink, Firefox 126+).
Default scale was bumped up from 1.0 to 1.143 — the original 14px-base felt
too small. "Small" preserves the old baseline; "Large" goes a notch bigger. */
:root { --ui-zoom: 1.143; } /* medium / default */
[data-font-size="small"] { --ui-zoom: 1.0; } /* the previous default */
[data-font-size="large"] { --ui-zoom: 1.286; } /* ≈ 18px effective */
body { zoom: var(--ui-zoom); }
/* Font-size toggle (A−/A/A+) — header-injected by theme-init.php */
.fs-toggle {
display: inline-flex; align-items: center; height: 28px;
background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
overflow: hidden;
}
.fs-toggle__btn {
background: transparent; border: 0; padding: 0 8px; cursor: pointer;
color: var(--muted); font-family: var(--font-ui); line-height: 1;
height: 100%; transition: background 0.1s, color 0.1s;
font-weight: 500;
}
.fs-toggle__btn--small { font-size: 10px; }
.fs-toggle__btn--medium { font-size: 13px; }
.fs-toggle__btn--large { font-size: 16px; }
.fs-toggle__btn:hover { background: var(--bg4); color: var(--text); }
.fs-toggle__btn--active { background: var(--purple-bg); color: var(--purple); }
.fs-toggle__btn--active:hover { background: var(--purple-bg); color: var(--purple); }
/* ── Theme toggle button (header-injected by JS) ──────────────────────────── */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
transition: background 0.15s, color 0.15s, border-color 0.15s;
padding: 0;
}
.theme-toggle:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.theme-toggle:focus { outline: none; border-color: var(--info); }
/* ── Base ─────────────────────────────────────────────────────────────────── */
html { font-size: 14px; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); line-height: 1.6; min-height: 100vh; }
/* ── Layout ───────────────────────────────────────────────────────────────── */
.app-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; height: 52px;
background: var(--bg2); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
}
.app-main { padding: 20px 24px 48px; max-width: 1600px; margin: 0 auto; }
/* ── Header ───────────────────────────────────────────────────────────────── */
.header-logo { display: flex; align-items: center; gap: 10px; }
.header-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--purple); }
.header-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.header-meta__value { color: var(--text); }
.collect-time { color: var(--dim); }
.stale-badge { color: var(--warn); }
.uptime-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--info); }
/* ── Env badge ────────────────────────────────────────────────────────────── */
.env-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 4px; letter-spacing: .06em; font-weight: 500; }
.env-badge--production { background: var(--crit-bg); color: var(--crit); }
.env-badge--stage { background: var(--info-bg); color: var(--info); }
/* ── Pulse dot ────────────────────────────────────────────────────────────── */
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; }
.pulse-dot--warn { background: var(--warn); animation: none; }
.pulse-dot--stale { background: var(--crit); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } }
/* ── Section label ────────────────────────────────────────────────────────── */
.section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--text-header); text-transform: uppercase; letter-spacing: .12em; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-label__meta { color: var(--text-header); }
.section-label__meta--crit { color: var(--crit); }
.dashboard-section { margin-bottom: 4px; }
/* ── Banners ──────────────────────────────────────────────────────────────── */
.banner { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.banner--error { background: var(--crit-bg); border: 1px solid #3a1212; }
.banner--warn { background: var(--warn-bg); border: 1px solid #3a2800; }
.banner__title { font-family: var(--font-mono); font-size: 11px; font-weight: 500; margin-bottom: 8px; }
.banner--error .banner__title { color: var(--crit); }
.banner--warn .banner__title { color: var(--warn); }
.banner__list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.banner__list li { font-size: 12px; font-family: var(--font-mono); display: flex; gap: 8px; }
.banner--error .banner__list li { color: #f09595; }
.banner--warn .banner__list li { color: #fcd38d; }
.banner__key { flex-shrink: 0; }
.banner--error .banner__key { color: var(--crit); }
.banner--warn .banner__key { color: var(--warn); }
/* ── Metric cards ─────────────────────────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; position: relative; overflow: hidden; }
.metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border); }
.metric-card--ok::before { background: var(--ok); }
.metric-card--warn { border-color: #2e2000; }
.metric-card--warn::before { background: var(--warn); }
.metric-card--crit { border-color: #2e0a0a; }
.metric-card--crit::before { background: var(--crit); }
.metric-card__label { font-size: 10px; font-family: var(--font-mono); color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.metric-card__value { font-size: 24px; font-weight: 500; font-family: var(--font-mono); line-height: 1; color: var(--text); }
.metric-card__sub { font-size: 10px; color: var(--text-header); font-family: var(--font-mono); margin-top: 4px; }
/* ── Gauge ────────────────────────────────────────────────────────────────── */
.gauge { margin-top: 8px; height: 2px; background: var(--bg4); border-radius: 1px; overflow: hidden; }
.gauge__fill { height: 100%; border-radius: 1px; background: var(--ok); transition: width .6s ease, background .3s; }
/* ── Text helpers ─────────────────────────────────────────────────────────── */
.text--ok { color: var(--ok); }
.text--warn { color: var(--warn); }
.text--crit { color: var(--crit); }
.text--info { color: var(--info); }
.text--muted { color: var(--muted); }
/* ── Panels ───────────────────────────────────────────────────────────────── */
.panel-row { display: grid; gap: 8px; margin-bottom: 8px; }
.panel-row--2col { grid-template-columns: 1fr 1fr; }
.panel-row--3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 960px) { .panel-row--2col, .panel-row--3col { grid-template-columns: 1fr; } }
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; }
.panel:last-child { margin-bottom: 0; }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 10px; font-family: var(--font-mono); color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; }
.panel__meta { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }
.panel__error { padding: 8px 14px; background: #1a0808; border-bottom: 1px solid #2e1010; font-size: 11px; font-family: var(--font-mono); color: #f87171; display: none; }
.panel__error--visible { display: block; }
/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { font-size: 9px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--crit { background: var(--crit-bg); color: var(--crit); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--purple { background: var(--purple-bg); color: var(--purple); }
/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.data-table th { text-align: left; padding: 7px 12px; color: var(--text-header); font-weight: 400; border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.data-table td { padding: 7px 12px; border-bottom: 1px solid var(--bg3); color: var(--text); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg3); }
.table-empty { color: var(--muted); font-style: italic; }
.col--bar { width: 80px; }
.cell--bold { font-weight: 500; }
.cell--truncate { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.cell--mono { font-family: var(--font-mono); }
/* ── KV list ──────────────────────────────────────────────────────────────── */
.kv-list { padding: 0; }
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--bg3); font-size: 11px; }
.kv-row:last-child { border-bottom: none; }
.kv-row__key { color: var(--text-header); font-family: var(--font-mono); }
.kv-row__val { font-family: var(--font-mono); color: var(--text); }
.kv-row__val--state-waiting { color: var(--ok); }
.kv-row__val--state-sending { color: var(--info); }
.kv-row__val--state-keepalive { color: var(--purple); }
.kv-row__val--state-reading { color: var(--warn); }
.kv-row__val--state-other { color: var(--dim); }
/* ── Alert items ──────────────────────────────────────────────────────────── */
.alert-item { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.alert-item:last-child { border-bottom: none; }
.alert-item__ts { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.fix-ts { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* ── Chat: recent investigations + follow-up pill + follow-up button ──── */
.chat-recent {
background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
margin-bottom: 8px;
}
.chat-recent__summary {
cursor: pointer; padding: 8px 12px; list-style: none;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px; color: var(--text-header);
text-transform: uppercase; letter-spacing: .06em;
}
.chat-recent__summary::-webkit-details-marker { display: none; }
.chat-recent__summary::before {
content: '▶'; font-size: 9px; margin-right: 8px; color: var(--muted);
transition: transform 0.15s;
}
.chat-recent[open] .chat-recent__summary::before { transform: rotate(90deg); display: inline-block; }
.chat-recent__title { flex: 1; }
.chat-recent__count { color: var(--muted); font-size: 10px; }
.chat-recent__list {
border-top: 1px solid var(--border);
max-height: 280px; overflow-y: auto; padding: 4px 0;
}
.chat-recent__empty {
padding: 14px; color: var(--muted); font-style: italic; font-size: 12px; text-align: center;
}
.chat-recent__row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
width: 100%; text-align: left;
background: transparent; border: none; border-bottom: 1px solid var(--bg3);
padding: 7px 12px; cursor: pointer; color: var(--text);
font-family: var(--font-mono); font-size: 11px;
transition: background 0.1s;
}
.chat-recent__row:last-child { border-bottom: none; }
.chat-recent__row:hover { background: var(--bg3); }
.chat-recent__row--err { opacity: 0.7; }
.chat-recent__row--err::after { content: ' (failed)'; color: var(--crit); margin-left: auto; }
.chat-recent__row--pending { opacity: 0.7; }
.chat-recent__row--pending::after { content: ' (in progress)'; color: var(--warn); margin-left: auto; }
.chat-recent__time { color: var(--muted); font-size: 10px; flex-shrink: 0; min-width: 64px; }
.chat-recent__q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-recent__follow { font-size: 9px; color: var(--purple); padding: 1px 6px; background: var(--purple-bg); border-radius: 3px; }
.chat-recent__rc { font-size: 9px; color: var(--info); padding: 1px 6px; background: var(--info-bg); border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.chat-recent__user { font-size: 10px; color: var(--text-header); padding: 1px 6px; background: var(--bg4); border-radius: 3px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Filter strip on the Recent investigations panel — superuser only */
.chat-recent__filters {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 8px 12px;
background: var(--bg3); border-bottom: 1px solid var(--border);
}
.chat-filter {
display: inline-flex; flex-direction: column; gap: 2px;
font-family: var(--font-mono); font-size: 10px; color: var(--text-header);
}
.chat-filter label, .chat-filter > label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.chat-recent__filters select {
background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
font-family: var(--font-mono); font-size: 11px; padding: 3px 6px;
}
.chat-recent__usage{ font-size: 9px; color: var(--muted); padding: 1px 6px; background: var(--bg4); border-radius: 3px; font-family: var(--font-mono); white-space: nowrap; }
/* Per-task usage banner inside the chat detail pane */
.detail-usage {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
margin: 4px 0 10px;
padding: 6px 10px;
background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
font-family: var(--font-mono); font-size: 10px;
}
.detail-usage__model {
font-weight: 500;
color: var(--purple);
padding: 2px 7px; border-radius: 3px;
background: var(--purple-bg);
}
.detail-usage__pill {
padding: 2px 7px; border-radius: 3px;
background: var(--bg3); color: var(--text-header);
border: 1px solid var(--border);
}
/* ── Investigations stats page ───────────────────────────────────────── */
.invs-wrap { max-width: 1400px; margin: 0 auto; padding: 4px 0 32px; }
.invs-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.invs-title { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--text); margin: 0; letter-spacing: .04em; }
.invs-window-tabs { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 2px; }
.invs-window-tab {
font-family: var(--font-mono); font-size: 11px;
padding: 5px 12px; border-radius: 3px;
color: var(--text-header); text-decoration: none;
transition: background 0.1s, color 0.1s;
}
.invs-window-tab:hover { background: var(--bg3); }
.invs-window-tab--active { background: var(--purple-bg); color: var(--purple); }
/* ── Permission matrix on /admin/users/{id}/edit ────────────────────── */
.perm-matrix { margin-bottom: 16px; }
.perm-matrix__verb { width: 100px; text-align: center; }
.perm-matrix__desc { width: 280px; }
.perm-cell { text-align: center; vertical-align: middle; }
.perm-cell__hint { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.perm-cell__na { color: var(--dim); font-family: var(--font-mono); font-size: 10px; }
.perm-cell--locked-on { background: var(--ok-bg); }
.perm-cell--granted { background: var(--purple-bg); }
.perm-cell--available {}
.perm-cell--forbidden,
.perm-cell--na { color: var(--dim); }
.perm-matrix__actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
/* Filter row on the /investigations stats page — superuser only */
.invs-filters {
display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
margin-bottom: 14px; padding: 10px 14px;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
}
.invs-filter { display: inline-flex; flex-direction: column; gap: 4px; }
.invs-filter__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; }
.invs-filters select{
background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
font-family: var(--font-mono); font-size: 12px; padding: 5px 10px; min-width: 180px;
}
.invs-filter__clear { font-family: var(--font-mono); font-size: 11px; color: var(--info); text-decoration: none; align-self: center; }
.invs-filter__clear:hover { text-decoration: underline; }
.invs-session {
background: var(--bg2); border: 1px solid var(--purple); border-radius: var(--radius);
padding: 14px 16px; margin-bottom: 18px;
}
.invs-session__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.invs-session__title { font-family: var(--font-mono); font-size: 11px; color: var(--purple); text-transform: uppercase; letter-spacing: .08em; }
.invs-session__reset { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.invs-session__stats { display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.invs-session__stat strong { color: var(--purple); font-weight: 500; }
.invs-session__bar-wrap { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.invs-session__bar { flex: 1; height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; }
.invs-session__bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--info)); border-radius: 4px; transition: width 0.3s; }
.invs-session__pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.invs-session__hint { margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.invs-session__hint code { background: var(--bg3); padding: 1px 5px; border-radius: 2px; color: var(--info); font-size: 10px; }
.invs-metric-grid {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
margin-bottom: 18px;
}
.invs-metric { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.invs-metric__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.invs-metric__value { font-family: var(--font-mono); font-size: 20px; color: var(--text); margin: 0; line-height: 1.1; }
.invs-metric__sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.invs-h2 {
font-family: var(--font-mono); font-size: 11px; color: var(--text-header);
text-transform: uppercase; letter-spacing: .1em; margin: 24px 0 4px;
}
.invs-help { font-size: 11px; color: var(--muted); margin: 0 0 8px; max-width: 900px; line-height: 1.55; }
.invs-model-pill {
font-family: var(--font-mono); font-size: 10px;
padding: 2px 7px; border-radius: 3px;
background: var(--purple-bg); color: var(--purple);
}
.invs-share-bar { display: inline-block; width: 80px; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.invs-share-bar__fill { height: 100%; background: var(--purple); border-radius: 2px; }
.invs-day-grid { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-width: 700px; }
.invs-day { display: grid; grid-template-columns: 70px 1fr 130px; align-items: center; gap: 10px; padding: 4px 0; }
.invs-day__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); }
.invs-day__bar { height: 8px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.invs-day__fill { height: 100%; background: var(--info); border-radius: 2px; }
.invs-day__num { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; }
.invs-day__count { color: var(--muted); }
.chat-followup-pill {
display: flex; align-items: center; gap: 6px;
margin: 4px 0 6px; padding: 4px 8px;
background: var(--purple-bg); border: 1px solid var(--purple); border-radius: 4px;
font-family: var(--font-mono); font-size: 10px; color: var(--purple);
}
.chat-followup-pill__label { letter-spacing: .04em; text-transform: uppercase; }
.chat-followup-pill__q { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-followup-pill__clear {
background: transparent; border: none; cursor: pointer; color: var(--purple); font-size: 14px; line-height: 1;
}
.chat-followup-pill__clear:hover { color: var(--text); }
.chat-followup-btn {
display: inline-block; margin-top: 6px;
padding: 3px 9px; border-radius: 3px;
background: var(--purple-bg); color: var(--purple); border: 1px solid transparent;
font-family: var(--font-mono); font-size: 10px; cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.chat-followup-btn:hover { background: var(--purple); color: var(--bg); }
/* Retry — distinct amber to set apart from purple Follow-up */
.chat-retry-btn {
display: inline-block; margin-top: 6px; margin-right: 6px;
padding: 3px 9px; border-radius: 3px;
background: var(--warn-bg); color: var(--warn); border: 1px solid transparent;
font-family: var(--font-mono); font-size: 10px; cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.chat-retry-btn:hover:not(:disabled) { background: var(--warn); color: var(--bg); }
.chat-retry-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Inline icon variant on Recent Investigations rows */
.chat-retry-btn--inline {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0; margin: 0 0 0 4px;
font-size: 12px; line-height: 1;
}
/* Live in-progress investigation rendered into the detail pane */
.detail-live {}
.detail-live__q {
font-size: 11px; color: var(--muted); font-style: italic; margin: 4px 0 8px;
}
/* Shared "🔍 Investigate" button — alerts, banners, fix cards. Click → submits
a chat task and streams the agent's response into the chat panel. */
.investigate-btn {
margin-left: auto;
font-family: var(--font-mono); font-size: 10px;
padding: 2px 8px; border-radius: 3px;
background: var(--purple-bg); color: var(--purple);
border: 1px solid transparent; cursor: pointer; white-space: nowrap;
transition: background 0.1s, color 0.1s;
}
.investigate-btn:hover:not(:disabled) { background: var(--purple); color: var(--bg); }
.investigate-btn:disabled { background: var(--bg4); color: var(--muted); cursor: not-allowed; }
/* Inline (banner items) — no margin-left:auto, sits right after the message text. */
.investigate-btn--inline { margin-left: 8px; }
.investigate-btn--fix { margin-left: 4px; }
.alert-item__msg { flex: 1; min-width: 0; }
/* Investigation copy-all button (above Claude's response on slow query cards) */
.investigation-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.investigation-copy {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
padding: 3px 9px; border-radius: 3px;
background: var(--bg3); color: var(--text-header);
border: 1px solid var(--border); cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.investigation-copy:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
/* ── Item list ────────────────────────────────────────────────────────────── */
.item-list__row { padding: 7px 14px; border-bottom: 1px solid var(--bg3); font-size: 12px; color: var(--text); line-height: 1.5; }
.item-list__row:last-child { border-bottom: none; }
.item-list__row--mono { font-family: var(--font-mono); font-size: 11px; }
.item-list__empty { padding: 10px 14px; color: var(--muted); font-style: italic; font-size: 12px; }
/* ── Chart hover tooltip (used by trends.js sparklines) ─────────────────── */
.chart-tooltip {
position: fixed;
pointer-events: none;
z-index: 9999;
background: var(--bg2);
border: 1px solid var(--border2);
border-radius: 4px;
padding: 5px 9px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text);
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
opacity: 0;
transition: opacity 0.08s;
}
.chart-tooltip__val { font-weight: 500; line-height: 1.2; }
.chart-tooltip__ts { color: var(--muted); font-size: 10px; margin-top: 2px; line-height: 1.2; }
/* ── Slow query cards ─────────────────────────────────────────────────────── */
.slow-query-list { padding: 4px 0; }
.slow-query-card { padding: 10px 14px; border-bottom: 1px solid var(--bg3); }
.slow-query-card:last-child { border-bottom: none; }
.slow-query-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.slow-query-card__time { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px; letter-spacing: 0.02em; }
.slow-query-card--crit .slow-query-card__time { background: var(--crit-bg); color: var(--crit); }
.slow-query-card--warn .slow-query-card__time { background: var(--warn-bg); color: var(--warn); }
.slow-query-card--info .slow-query-card__time { background: var(--info-bg); color: var(--info); }
.slow-query-card__meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; min-width: 0; }
.slow-query-card__ratio{ color: var(--warn); }
.slow-query-card__runs {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
padding: 2px 7px; border-radius: 3px;
background: var(--bg4); color: var(--text); letter-spacing: 0.02em;
}
.slow-query-card__window {
font-family: var(--font-mono); font-size: 10px; color: var(--dim);
}
.slow-query-card__sql { font-family: var(--font-mono); font-size: 11px; color: var(--text); background: var(--bg); border-left: 2px solid var(--border2); border-radius: 0 4px 4px 0; padding: 7px 10px; margin: 0; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.slow-query-card--crit .slow-query-card__sql { border-left-color: var(--crit); }
.slow-query-card--warn .slow-query-card__sql { border-left-color: var(--warn); }
.slow-query-card--info .slow-query-card__sql { border-left-color: var(--info); }
.slow-query-card__action {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
padding: 3px 10px; border-radius: 3px;
background: var(--purple-bg); color: var(--purple);
border: 1px solid transparent; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.slow-query-card__action:hover:not(:disabled) { background: var(--purple); color: var(--bg); }
.slow-query-card__action:disabled { background: var(--bg4); color: var(--muted); cursor: not-allowed; }
.slow-query-card__result { margin-top: 8px; }
.slow-query-card__result:empty { display: none; }
/* Pagination */
.slow-query-pager {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px; border-top: 1px solid var(--bg3); background: var(--bg2);
}
.pager-btn {
font-family: var(--font-mono); font-size: 11px;
padding: 4px 10px; border-radius: 3px;
background: var(--bg3); color: var(--text);
border: 1px solid var(--border); cursor: pointer;
transition: background 0.15s;
}
.pager-btn:hover:not(:disabled) { background: var(--bg4); border-color: var(--border2); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-info {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
/* ── State bar ────────────────────────────────────────────────────────────── */
.state-bar { display: flex; height: 6px; margin: 10px 14px; border-radius: 3px; overflow: hidden; background: var(--bg4); }
.state-bar__segment--waiting { background: var(--ok); }
.state-bar__segment--sending { background: var(--info); }
.state-bar__segment--keepalive { background: var(--purple); }
.state-bar__segment--reading { background: var(--warn); }
.state-bar__segment--other { background: var(--dim); }
/* ── Analysis box ─────────────────────────────────────────────────────────── */
.analysis-box { padding: 12px 14px; font-size: 13px; line-height: 1.75; color: var(--text); border-left: 2px solid var(--purple); }
.analysis-box--empty { color: var(--muted); font-style: italic; }
/* ── Traffic ──────────────────────────────────────────────────────────────── */
.flag { display: inline-block; font-size: 9px; font-family: var(--font-mono); padding: 1px 5px; border-radius: 3px; margin: 1px; }
.flag--crit { background: var(--crit-bg); color: var(--crit); }
.flag--warn { background: var(--warn-bg); color: var(--warn); }
.rec { font-size: 9px; font-family: var(--font-mono); padding: 2px 7px; border-radius: 3px; }
.rec--block { background: var(--crit-bg); color: var(--crit); }
.rec--rate-limit { background: var(--warn-bg); color: var(--warn); }
.rec--monitor { background: var(--info-bg); color: var(--info); }
.abuse-item { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.abuse-item:last-child { border-bottom: none; }
.abuse-item__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.abuse-item__ips { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.abuse-item__evidence { font-size: 12px; line-height: 1.5; }
.fan-item { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.fan-item:last-child { border-bottom: none; }
.fan-item__header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.fan-item__identity { font-family: var(--font-mono); font-size: 11px; color: var(--info); }
.fan-item__endpoints { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* ── Perf routes ──────────────────────────────────────────────────────────── */
.route-pill { font-family: var(--font-mono); font-size: 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; color: var(--info); display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.file-pill { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.src-badge { font-size: 9px; font-family: var(--font-mono); padding: 1px 6px; border-radius: 3px; }
.src-badge--api { background: #051a0f; color: var(--ok); }
.src-badge--web { background: var(--purple-bg); color: var(--purple); }
.rc-badge { font-size: 9px; font-family: var(--font-mono); padding: 1px 6px; border-radius: 3px; }
.rc-badge--slow-query { background: #051a0f; color: var(--ok); }
.rc-badge--php-processing { background: var(--purple-bg); color: var(--purple); }
.rc-badge--data-volume { background: var(--info-bg); color: var(--info); }
.rc-badge--no-pagination { background: var(--warn-bg); color: var(--warn); }
.rc-badge--client-polling { background: var(--crit-bg); color: var(--crit); }
.rc-badge--platform-fan-out { background: #1c0a18; color: #e879f9; }
.rc-badge--unknown { background: var(--bg4); color: var(--muted); }
.perf-bar { height: 4px; border-radius: 2px; background: var(--bg4); overflow: hidden; width: 80px; }
.perf-bar__fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.perf-bar__fill--ok { background: var(--ok); }
.perf-bar__fill--warn { background: var(--warn); }
.perf-bar__fill--high { background: var(--warn); }
.perf-bar__fill--crit { background: var(--crit); }
/* ── Fix cards ────────────────────────────────────────────────────────────── */
.fixes-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fixes-count { font-size: 11px; font-family: var(--font-mono); padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); }
.fixes-count--critical { background: var(--crit-bg); color: var(--crit); border-color: #3a1010; }
.fixes-count--high { background: var(--warn-bg); color: var(--warn); border-color: #3a2500; }
.fixes-count--medium { background: var(--info-bg); color: var(--info); border-color: #0c2a4a; }
.fixes-count--low { background: var(--bg4); color: var(--muted); }
.fix-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.fix-card--critical { border-left: 3px solid var(--crit); }
.fix-card--high { border-left: 3px solid var(--warn); }
.fix-card--medium { border-left: 3px solid var(--info); }
.fix-card--low { border-left: 3px solid var(--muted); }
.fix-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--bg2); cursor: pointer; user-select: none; }
.fix-header:hover { background: var(--bg3); }
.fix-priority { font-size: 9px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.fix-priority--critical { background: var(--crit-bg); color: var(--crit); }
.fix-priority--high { background: var(--warn-bg); color: var(--warn); }
.fix-priority--medium { background: var(--info-bg); color: var(--info); }
.fix-priority--low { background: var(--bg4); color: var(--muted); }
.fix-category { font-size: 9px; font-family: var(--font-mono); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-header); flex-shrink: 0; }
.fix-title { font-size: 12px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
.fix-chevron { color: var(--muted); font-size: 10px; transition: transform .2s; flex-shrink: 0; }
.fix-card--open .fix-chevron { transform: rotate(90deg); }
.fix-body { display: none; border-top: 1px solid var(--border); }
.fix-card--open .fix-body { display: block; }
.fix-section { padding: 9px 14px; border-bottom: 1px solid var(--bg3); }
.fix-section:last-child { border-bottom: none; }
.fix-section-label { font-size: 9px; font-family: var(--font-mono); color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.fix-problem { font-size: 12px; color: var(--text); line-height: 1.6; }
.fix-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--bg3); }
.fix-file { font-family: var(--font-mono); font-size: 10px; color: var(--info); }
.fix-code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; color: #86efac; white-space: pre-wrap; word-break: break-all; line-height: 1.6; position: relative; }
.fix-copy { position: absolute; top: 7px; right: 8px; font-size: 9px; font-family: var(--font-mono); color: var(--muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px; cursor: pointer; }
.fix-copy:hover { color: var(--text); }
.fix-impact { font-size: 11px; color: var(--ok); font-family: var(--font-mono); line-height: 1.5; }
/* ── Chat ─────────────────────────────────────────────────────────────────── */
.chat-wrap { display: grid; grid-template-columns: 1fr 380px; height: 620px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg2); margin-bottom: 8px; }
@media (max-width: 1100px) { .chat-wrap { grid-template-columns: 1fr; height: auto; } }
.chat-history { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 85%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--agent { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 10px 13px; border-radius: 10px; font-size: 13px; line-height: 1.65; }
.chat-msg--user .chat-bubble { background: var(--purple); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg--agent .chat-bubble { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-bubble__hint { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 4px; }
.chat-msg--agent .chat-bubble__hint { color: var(--muted); }
.chat-meta { font-size: 10px; font-family: var(--font-mono); color: var(--dim); }
.chat-thinking { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--muted); }
.dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); animation: dot 1.2s ease-in-out infinite; display: inline-block; }
.dots { display: flex; gap: 3px; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
/* Streaming event log inside the agent thinking bubble */
.chat-stream { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-width: 520px; }
.chat-stream__header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg2); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--text-header); letter-spacing: .04em; text-transform: uppercase; }
.chat-stream__label { color: var(--purple); }
.chat-stream__log { max-height: 240px; overflow-y: auto; padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; }
.chat-stream__log::-webkit-scrollbar { width: 6px; }
.chat-stream__log::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.stream-line { padding: 2px 0; word-break: break-word; white-space: pre-wrap; }
.stream-line--tool { color: var(--info); }
.stream-line--tool::before { content: '▶ '; color: var(--muted); }
.stream-line--result { color: var(--dim); }
.stream-line--text { color: var(--text); padding: 4px 0; }
.stream-line--info { color: var(--muted); font-style: italic; }
@keyframes dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.chat-suggestions { padding: 8px 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg2); }
.sugg-btn { font-size: 11px; font-family: var(--font-mono); padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; color: var(--muted); background: var(--bg3); }
.sugg-btn:hover { border-color: var(--purple); color: var(--purple); }
.chat-input-row { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--bg3); flex-shrink: 0; }
.chat-input { flex: 1; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-family: var(--font-ui); font-size: 13px; resize: none; height: 44px; outline: none; line-height: 1.4; }
.chat-input:focus { border-color: var(--purple); }
.chat-send { background: var(--purple); border: none; color: #fff; border-radius: var(--radius); padding: 0 16px; font-size: 13px; font-weight: 500; cursor: pointer; flex-shrink: 0; height: 44px; }
.chat-send:hover { opacity: .85; }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }
.chat-detail { display: flex; flex-direction: column; overflow: hidden; }
.chat-detail__header { padding: 10px 14px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; background: var(--bg3); flex-shrink: 0; }
.chat-detail__scroll { flex: 1; overflow-y: auto; padding: 12px; }
.detail-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.detail-rc-badge { display: inline-block; font-size: 9px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; }
.detail-section-label{ font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 6px; }
.detail-summary { font-size: 12px; line-height: 1.6; color: var(--text); margin-bottom: 10px; }
.ev-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.ev-type { font-size: 9px; font-family: var(--font-mono); padding: 4px 10px; background: var(--bg3); border-bottom: 1px solid var(--border); color: var(--text-header); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; }
.ev-src { color: var(--purple); }
.ev-content { padding: 8px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-all; background: var(--bg); }
.ev-sig { padding: 6px 10px; font-size: 11px; color: var(--warn); border-top: 1px solid var(--border); background: var(--bg3); }
.slow-op { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; margin-bottom: 4px; }
.slow-op__name { font-family: var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.slow-op__dur { font-family: var(--font-mono); flex-shrink: 0; margin-left: 8px; }
.slow-op__dur--ok { color: var(--ok); }
.slow-op__dur--warn { color: var(--warn); }
.slow-op__dur--crit { color: var(--crit); }
/* Slow-query inline fix suggestion */
.sq-btn { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); border-radius: 3px; cursor: pointer; }
.sq-btn:hover { background: var(--bg4); border-color: var(--info); color: var(--info); }
.sq-pending { font-size: 10px; font-family: var(--font-mono); color: var(--warn); }
.sq-done { font-size: 10px; font-family: var(--font-mono); color: var(--ok); }
.sq-result td { padding: 10px 12px; background: var(--bg2); border-top: 1px dashed var(--border); }
.sq-answer { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; white-space: pre-wrap; }
.sq-error { font-size: 11px; color: var(--crit); padding: 6px 10px; }
.fix-mini { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.fix-mini--critical { border-left: 2px solid var(--crit); }
.fix-mini--high { border-left: 2px solid var(--warn); }
.fix-mini--medium { border-left: 2px solid var(--info); }
.fix-mini--low { border-left: 2px solid var(--dim); }
.fix-mini__header { padding: 7px 10px; font-size: 11px; font-weight: 500; background: var(--bg3); display: flex; align-items: center; gap: 6px; }
.fix-mini__pri { font-size: 9px; font-family: var(--font-mono); padding: 1px 5px; border-radius: 3px; }
.fix-mini__pri--critical { background: var(--crit-bg); color: var(--crit); }
.fix-mini__pri--high { background: var(--warn-bg); color: var(--warn); }
.fix-mini__pri--medium { background: var(--info-bg); color: var(--info); }
.fix-mini__pri--low { background: var(--bg4); color: var(--muted); }
.fix-mini__body { padding: 8px 10px; font-size: 11px; color: var(--text); line-height: 1.5; }
.fix-mini__problem { margin-bottom: 5px; color: var(--muted); }
.fix-mini__file { font-family: var(--font-mono); font-size: 10px; color: var(--info); margin-bottom: 4px; }
.fix-mini__code { font-family: var(--font-mono); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 10px; color: #86efac; white-space: pre-wrap; word-break: break-all; margin-top: 6px; position: relative; }
.fix-mini__copy { position: absolute; top: 4px; right: 6px; font-size: 9px; font-family: var(--font-mono); color: var(--muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; cursor: pointer; }
.fix-mini__copy:hover { color: var(--text); }
.fix-mini__impact { font-size: 10px; color: var(--ok); margin-top: 4px; }
/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; gap: 14px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--border2); border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Trends ───────────────────────────────────────────────────────────────── */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
@media (max-width: 700px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-item { background: var(--bg2); padding: 10px 14px 8px; }
.trend-item__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trend-item__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; }
.trend-item__stat { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 500; }
.sparkline { display: block; width: 100%; height: 40px; border-radius: 3px; }
.sparkline--route { height: 28px; }
.route-trend-item { padding: 8px 14px; border-bottom: 1px solid var(--border); }
.route-trend-item:last-child { border-bottom: none; }
.route-trend-item__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.route-trend-item__p95 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; flex-shrink: 0; margin-left: 8px; }
.trend-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); }
.tsm-item { background: var(--bg2); padding: 10px 14px; }
.tsm-item__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.tsm-item__val { font-family: var(--font-mono); font-size: 14px; color: var(--text); font-weight: 500; }
/* ── Nav bar ──────────────────────────────────────────────────────────────── */
.app-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 36px; background: var(--bg3); border-bottom: 1px solid var(--border); font-size: 12px; position: sticky; top: 52px; z-index: 99; }
.app-nav__user { display: flex; align-items: center; gap: 8px; }
.app-nav__email { font-family: var(--font-mono); color: var(--muted); }
.app-nav__actions { display: flex; align-items: center; gap: 16px; }
.app-nav__link { font-family: var(--font-mono); font-size: 11px; color: var(--text-header); text-decoration: none; }
.app-nav__link:hover { color: var(--purple); }
.app-nav__link--logout { color: var(--dim); }
.app-nav__link--logout:hover { color: var(--crit); }
/* ── Login page ───────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card { width: 100%; max-width: 400px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-logo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
.login-logo__title { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--purple); }
.login-error { background: var(--crit-bg); border: 1px solid #3a1212; color: #f09595; font-size: 12px; font-family: var(--font-mono); padding: 10px 12px; border-radius: var(--radius); margin-bottom: 20px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; }
.login-field__input { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 14px; outline: none; }
.login-field__input:focus { border-color: var(--purple); }
.login-submit { background: var(--purple); border: none; color: #fff; border-radius: var(--radius); padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.login-submit:hover { opacity: .85; }
.login-footer { font-size: 11px; color: var(--dim); text-align: center; margin-top: 20px; font-family: var(--font-mono); }
/* ── Flash messages ───────────────────────────────────────────────────────── */
.flash { padding: 10px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 12px; font-family: var(--font-mono); }
.flash--ok { background: var(--ok-bg); border: 1px solid #0a3a1a; color: #86efac; }
.flash--error { background: var(--crit-bg); border: 1px solid #3a1212; color: #f09595; }
/* ── Admin layout ─────────────────────────────────────────────────────────── */
.admin-breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.admin-breadcrumb a { color: var(--purple); text-decoration: none; }
.admin-breadcrumb a:hover { text-decoration: underline; }
.admin-layout { display: flex; flex-direction: column; gap: 16px; }
/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field__label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.form-field__input { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; min-width: 200px; }
.form-field__input:focus { border-color: var(--purple); }
.form-field__input--sm { min-width: 140px; }
.form-field__select { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font-family: var(--font-mono); font-size: 12px; outline: none; }
.form-field__select--sm { padding: 6px 8px; font-size: 11px; }
.form-field--action { justify-content: flex-end; }
.admin-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px; }
.inline-form { display: inline; }
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-select { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 3px 6px; cursor: pointer; }
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { font-family: var(--font-mono); font-size: 12px; padding: 7px 14px; border-radius: var(--radius); border: none; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; }
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { opacity: .85; }
.btn--danger { background: var(--crit-bg); color: var(--crit); border: 1px solid #3a1010; }
.btn--danger:hover { background: #2e0a0a; }
.btn--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #0a3a1a; }
.btn--ok:hover { background: #073a17; }
.btn--ghost { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: var(--border2); }
.btn--sm { font-size: 11px; padding: 4px 10px; }
/* ── User table extras ────────────────────────────────────────────────────── */
.row--inactive td { opacity: .5; }
.self-badge { font-size: 9px; font-family: var(--font-mono); background: var(--purple-bg); color: var(--purple); padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.status-dot--ok { background: var(--ok); }
.status-dot--off { background: var(--dim); }
/* ── Audit log ────────────────────────────────────────────────────────────── */
.audit-filters { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg3); }
.audit-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.audit-action { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.audit-action--ok { background: var(--ok-bg); color: var(--ok); }
.audit-action--crit { background: var(--crit-bg); color: var(--crit); }
.audit-action--warn { background: var(--warn-bg); color: var(--warn); }
.audit-action--info { background: var(--info-bg); color: var(--info); }
.audit-action--purple { background: var(--purple-bg); color: var(--purple); }
.audit-action--muted { background: var(--bg4); color: var(--muted); }
/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; border-top: 1px solid var(--border); }
.pagination__btn { font-family: var(--font-mono); font-size: 12px; color: var(--purple); text-decoration: none; }
.pagination__btn:hover { text-decoration: underline; }
.pagination__info { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* ── Role legend ──────────────────────────────────────────────────────────── */
.admin-role-legend { margin-top: 16px; padding: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.admin-role-legend__title { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.admin-role-legend__grid { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--muted); }
.legend-item .badge { flex-shrink: 0; }
/* ── Audit filters ────────────────────────────────────────────────────────── */
.audit-filters__row .form-field__input,
.audit-filters__row .form-field__select { background: var(--bg2); }
/* ── Help page ────────────────────────────────────────────────────────────── */
.app-main--help { max-width: 1100px; }
.help-page { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .help-page { grid-template-columns: 1fr; } }
/* TOC */
.help-toc { position: sticky; top: 100px; z-index: 90; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; max-height: calc(100vh - 120px); overflow-y: auto; grid-column: 1; grid-row: 1 / -1; }
.help-toc__title { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.help-toc__list { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.help-toc__list li { counter-increment: toc; }
.help-toc__list a { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-decoration: none; display: block; padding: 3px 0; }
.help-toc__list a:hover { color: var(--purple); }
@media (max-width: 800px) {
.help-toc { position: static; grid-column: 1; grid-row: auto; max-height: none; }
.help-section { grid-column: 1; }
}
/* Sections */
.help-section { margin-bottom: 48px; scroll-margin-top: 100px; grid-column: 2; }
.help-section__title { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.help-subsection { margin-top: 20px; }
.help-subsection__title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 10px; }
/* Text */
.help-text { font-size: 13px; line-height: 1.8; color: var(--text); margin-bottom: 10px; }
.help-text code { font-family: var(--font-mono); font-size: 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--info); }
.help-link { color: var(--purple); text-decoration: none; }
.help-link:hover { text-decoration: underline; }
/* Notes */
.help-note { background: var(--info-bg); border: 1px solid #0c2a4a; border-radius: var(--radius); padding: 10px 14px; font-size: 12px; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
.help-note--warn { background: var(--warn-bg); border-color: #3a2500; }
.help-note strong { color: var(--info); font-family: var(--font-mono); font-size: 11px; }
.help-note--warn strong { color: var(--warn); }
/* Tables */
.help-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.help-table { width: 100%; border-collapse: collapse; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.help-table th { text-align: left; padding: 8px 12px; background: var(--bg3); color: var(--muted); font-family: var(--font-mono); font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.help-table td { padding: 8px 12px; border-bottom: 1px solid var(--bg3); color: var(--text); line-height: 1.6; vertical-align: top; }
.help-table tr:last-child td { border-bottom: none; }
.help-table tr:hover td { background: var(--bg3); }
.help-table td code { font-family: var(--font-mono); font-size: 11px; background: var(--bg4); border-radius: 3px; padding: 1px 5px; color: var(--info); }
.help-table td em { color: var(--muted); font-style: normal; }
/* Lists */
.help-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.7; padding-left: 4px; }
.help-list li { padding-left: 16px; position: relative; color: var(--text); }
.help-list li::before { content: '›'; position: absolute; left: 0; color: var(--purple); }
.help-list li strong { color: var(--text); font-weight: 500; }
.help-list--compact { gap: 3px; font-size: 12px; }
/* Capability cards */
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.help-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.help-card__icon { font-size: 20px; margin-bottom: 8px; }
.help-card__title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.help-card__body { font-size: 12px; line-height: 1.7; color: var(--muted); }
/* Alert level grid */
.help-level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 600px) { .help-level-grid { grid-template-columns: 1fr; } }
.help-level { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.help-level--warn { border-left: 3px solid var(--warn); }
.help-level--crit { border-left: 3px solid var(--crit); }
.help-level__label { margin-bottom: 8px; }
.help-level__desc { font-size: 12px; line-height: 1.7; color: var(--muted); }
/* Role cards */
.help-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 700px) { .help-role-grid { grid-template-columns: 1fr; } }
.help-role-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.help-role-card__header { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.help-role-card__note { font-size: 11px; font-family: var(--font-mono); color: var(--dim); line-height: 1.6; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
/* Code block in FAQ */
.help-code-block { display: block; font-family: var(--font-mono); font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: #86efac; white-space: pre-wrap; word-break: break-all; margin-top: 8px; line-height: 1.6; }
/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item[open] { border-color: var(--border2); }
.faq-item__q { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: '+'; font-family: var(--font-mono); color: var(--muted); font-size: 16px; }
.faq-item[open] .faq-item__q::after { content: '−'; }
.faq-item__q:hover { background: var(--bg3); }
.faq-item__a { padding: 0 16px 14px; font-size: 13px; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
.faq-item__a code { font-family: var(--font-mono); font-size: 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--info); }
.faq-item__a a { color: var(--purple); text-decoration: none; }
/* ── Notification status panel ────────────────────────────────────────────── */
.notify-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
@media (max-width: 700px) { .notify-status-grid { grid-template-columns: 1fr; } }
.notify-channel { background: var(--bg2); padding: 14px; }
.notify-channel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.notify-channel__name { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text); }
.notify-channel__hint { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.6; }
.notify-channel__hint code { background: var(--bg4); border-radius: 3px; padding: 1px 5px; color: var(--info); }
.notify-test-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
/* ── Log streamer ─────────────────────────────────────────────────────────── */
.logs-main { display: flex; flex-direction: column; height: calc(100vh - 88px); overflow: hidden; padding: 0; max-width: none; }
.logs-layout { display: grid; grid-template-columns: 260px 1fr; height: 100%; overflow: hidden; }
/* Sidebar */
.logs-sidebar { display: flex; flex-direction: column; background: var(--bg2); border-right: 1px solid var(--border); overflow: hidden; }
.logs-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.logs-sidebar__title { font-family: var(--font-mono); font-size: 11px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; }
.logs-sidebar__footer { padding: 10px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }
.logs-sidebar__search { padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.logs-search-input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; color: var(--text); font-family: var(--font-mono); font-size: 11px; outline: none; }
.logs-search-input:focus { border-color: var(--purple); }
.logs-file-list { flex: 1; overflow-y: auto; }
.logs-group { padding: 0; }
.logs-group__label { font-family: var(--font-mono); font-size: 9px; color: var(--text-header); text-transform: uppercase; letter-spacing: .1em; padding: 8px 14px 4px; }
.logs-file-btn { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--bg3); padding: 8px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.logs-file-btn:hover { background: var(--bg3); }
.logs-file-btn--active { background: var(--purple-bg); border-left: 2px solid var(--purple); }
.logs-file-btn--active:hover { background: var(--purple-bg); }
.logs-file-btn__name { font-family: var(--font-mono); font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.logs-file-btn--active .logs-file-btn__name { color: var(--purple); }
.logs-file-btn__meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.logs-file-btn__mtime { font-family: var(--font-mono); font-size: 10px; color: var(--dim); }
.logs-file-btn__warn { color: var(--warn); }
.logs-tail-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* Viewer */
.logs-viewer { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
/* Toolbar */
.logs-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.logs-toolbar__left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.logs-toolbar__right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.log-btn { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg3); color: var(--muted); cursor: pointer; }
.log-btn:hover { border-color: var(--border2); color: var(--text); }
.log-btn--primary { background: var(--purple-bg); border-color: var(--purple); color: var(--purple); }
.log-btn--active { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.log-btn:disabled { opacity: .4; cursor: not-allowed; }
.log-toggle { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); cursor: pointer; }
.log-toggle input { cursor: pointer; accent-color: var(--purple); }
.logs-filter-input { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); font-family: var(--font-mono); font-size: 11px; outline: none; width: 200px; }
.logs-filter-input:focus { border-color: var(--purple); }
.log-counter { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* Empty state */
.logs-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.logs-empty__icon { font-size: 40px; }
.logs-empty__title{ font-size: 14px; color: var(--text); }
.logs-empty__sub { font-size: 12px; font-family: var(--font-mono); }
.logs-empty__sub code { background: var(--bg3); border-radius: 3px; padding: 1px 6px; color: var(--info); }
/* Output */
.logs-output { flex: 1; overflow-y: auto; overflow-x: auto; }
.logs-lines { padding: 4px 0; min-height: 100%; }
.logs-lines--wrap .log-line__content { white-space: pre-wrap; word-break: break-all; }
/* Log streamer palette
Distinct hue per line type. Two tuned palettes via CSS variables:
- Dark mode → Tokyo Night family (low-saturation, restful on dark bg)
- Light mode → Catppuccin Latte family (warm, readable on light bg)
Both target ≥4.5:1 contrast on their target background.
Scoped to .log-terminal AND .logs-viewer so both streamer markups inherit. */
.log-terminal,
.logs-viewer {
--log-text: #c8d3f5; /* default line text */
--log-muted: #828bb8; /* timestamps, debug, line numbers */
--log-error: #ff757f; /* coral */
--log-warn: #ffc777; /* peach */
--log-orange: #ff9e64; /* slow-crit — deeper orange */
--log-yellow: #ffd56e; /* slow — soft yellow */
--log-green: #c3e88d; /* slow-query — lime */
--log-cyan: #86e1fc; /* timing — sky */
--log-info: #82aaff; /* query — royal blue */
--log-purple: #c099ff; /* curl, sql — lavender */
--log-error-bg: rgba(255, 117, 127, 0.08);
--log-warn-bg: rgba(255, 199, 119, 0.08);
--log-orange-bg:rgba(255, 158, 100, 0.08);
}
[data-theme="light"] .log-terminal,
[data-theme="light"] .logs-viewer {
--log-text: #4c4f69; /* Latte text */
--log-muted: #7c7f93;
--log-error: #d20f39; /* cherry */
--log-warn: #df8e1d; /* amber */
--log-orange: #fe640b; /* peach */
--log-yellow: #ce8b00; /* mustard */
--log-green: #40a02b; /* forest */
--log-cyan: #04a5e5; /* sky */
--log-info: #1e66f5; /* blue */
--log-purple: #8839ef; /* mauve */
--log-error-bg: rgba(210, 15, 57, 0.07);
--log-warn-bg: rgba(223, 142, 29, 0.10);
--log-orange-bg:rgba(254, 100, 11, 0.08);
}
/* Log lines */
.log-line { display: flex; align-items: baseline; gap: 0; min-height: 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; border-bottom: 1px solid transparent; }
.log-line:hover { background: var(--bg2); }
.log-line--error { background: var(--log-error-bg); }
.log-line--warn { background: var(--log-warn-bg); }
.log-line--debug { opacity: .85; }
.log-line--hidden { display: none; }
.log-line__num { flex-shrink: 0; width: 52px; text-align: right; padding-right: 12px; color: var(--log-muted); font-size: 10px; user-select: none; padding-top: 1px; }
.log-line__content { color: var(--log-text); white-space: pre; flex: 1; padding-right: 12px; }
/* Syntax highlighting */
.hl-ts { color: var(--log-muted); }
.hl-error { color: var(--log-error); font-weight: 500; }
.hl-warn { color: var(--log-warn); }
.hl-debug { color: var(--log-muted); }
.hl-info { color: var(--log-info); }
.hl-email { color: var(--log-purple); }
.hl-sql { color: var(--log-purple); font-weight: 500; }
.hl-sql-body { color: var(--log-cyan); }
.hl-muted { color: var(--log-muted); }
.hl-ip { color: var(--log-cyan); }
.hl-ok-dim { color: var(--log-green); opacity: .85; }
.hl-slow-crit { color: var(--log-error); font-weight: 600; }
.hl-slow-warn { color: var(--log-warn); font-weight: 500; }
.hl-slow-ok { color: var(--log-green); }
/* Status bar */
.logs-status { display: flex; align-items: center; gap: 8px; padding: 5px 14px; background: var(--bg2); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }
.logs-status__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.logs-status__dot--connecting { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.logs-status__dot--streaming { background: var(--ok); animation: pulse 2s ease-in-out infinite; }
.logs-status__dot--error { background: var(--crit); animation: none; }
.logs-status__text { color: var(--text); }
.logs-status__sep { color: var(--dim); }
.logs-status__path { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-rate { font-family: var(--font-mono); font-size: 11px; color: var(--ok); margin-left: 8px; }
@media (max-width: 768px) {
.logs-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.logs-sidebar { max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
}
/* ── Log streamer ─────────────────────────────────────────────────────────── */
.logs-main { padding: 0; max-width: 100%; height: calc(100vh - 88px); display: flex; flex-direction: column; }
.log-layout { display: grid; grid-template-columns: 280px 1fr; height: 100%; overflow: hidden; }
@media (max-width: 800px) { .log-layout { grid-template-columns: 1fr; } }
/* Sidebar */
.log-sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.log-sidebar__section { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.log-sidebar__section--files { flex: 1; overflow-y: auto; padding: 8px 0; }
.log-sidebar__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.log-sidebar__label-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 4px; }
.log-sidebar__label-row .log-sidebar__label { margin-bottom: 0; }
.log-sidebar__keys { padding: 10px 12px; border-top: 1px solid var(--border); margin-top: auto; }
.log-controls-row { display: flex; gap: 6px; align-items: center; }
.log-controls-row .form-field__input--sm { flex: 1; height: 28px; min-width: 0; }
.log-controls-row .form-field__select--sm { height: 28px; }
/* Type chips */
.log-type-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--border); cursor: pointer; color: var(--muted); background: var(--bg3); white-space: nowrap; }
.chip:hover { border-color: var(--border2); color: var(--text); }
.chip--active { background: var(--purple-bg); border-color: var(--purple); color: var(--purple); }
.chip--error { }
.chip--error.chip--active { background: var(--crit-bg); border-color: var(--crit); color: var(--crit); }
.chip--warn.chip--active { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.chip--slow.chip--active { background: #1c0f00; border-color: #f97316; color: #f97316; }
.chip--query.chip--active { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.chip--debug.chip--active { background: var(--bg4); border-color: var(--dim); color: var(--dim); }
/* File groups */
.log-group { padding: 4px 0; border-bottom: 1px solid var(--border); }
.log-group:last-child { border-bottom: none; }
.log-group__label { font-family: var(--font-mono); font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px 3px; }
.log-file-btn { width: 100%; background: none; border: none; cursor: pointer; padding: 5px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.log-file-btn:hover { background: var(--bg3); }
.log-file-btn--active { background: var(--purple-bg) !important; border-left: 2px solid var(--purple); padding-left: 10px; }
.log-file-btn__name { font-family: var(--font-mono); font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.log-file-btn__live { color: var(--ok); font-size: 8px; flex-shrink: 0; }
.log-file-btn__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
/* Type pill on each file row — color-keyed by category. Calmer than the
chips on top so multiple rows side-by-side don't read as a rainbow. */
.log-file-btn__type {
font-size: 9px; padding: 0 5px; border-radius: 3px;
background: var(--bg4); color: var(--text-header);
text-transform: lowercase; letter-spacing: .04em;
flex-shrink: 0;
}
.log-file-btn__type--error { background: var(--crit-bg); color: var(--crit); }
.log-file-btn__type--access { background: var(--info-bg); color: var(--info); }
.log-file-btn__type--perf { background: var(--warn-bg); color: var(--warn); }
.log-file-btn__type--apache { background: var(--purple-bg); color: var(--purple); }
.log-file-btn__type--application { background: var(--bg4); color: var(--text-header); }
/* Sidebar file-search input + type chip row + show-older toggle */
.log-file-search { padding: 6px 12px 4px; }
.log-file-search input {
width: 100%; box-sizing: border-box;
background: var(--bg3); color: var(--text);
border: 1px solid var(--border); border-radius: 4px;
padding: 5px 10px;
font-family: var(--font-mono); font-size: 11px;
}
.log-file-search input::-webkit-search-cancel-button { cursor: pointer; }
.log-file-types {
display: flex; flex-wrap: wrap; gap: 3px;
padding: 4px 12px 4px;
}
.log-file-types .chip {
font-size: 10px; padding: 2px 8px; border-radius: 3px;
}
.log-file-toggle {
display: flex; align-items: center; gap: 6px;
padding: 4px 12px 6px;
font-family: var(--font-mono); font-size: 10px;
color: var(--muted); cursor: pointer;
border-bottom: 1px solid var(--border);
}
.log-file-toggle input { width: 12px; height: 12px; cursor: pointer; }
.log-file-toggle:hover { color: var(--text); }
.log-file-toggle__count { color: var(--dim); margin-left: 2px; }
.log-no-files { font-size: 11px; color: var(--muted); padding: 12px; line-height: 1.6; }
.log-no-files code { background: var(--bg4); border-radius: 3px; padding: 1px 4px; color: var(--info); font-size: 10px; }
/* Keyboard shortcuts */
.key-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11px; }
.key-list dt { display: flex; }
.key-list dd { color: var(--muted); align-self: center; }
kbd { font-family: var(--font-mono); font-size: 10px; background: var(--bg4); border: 1px solid var(--border2); border-radius: 3px; padding: 1px 5px; color: var(--text); }
/* Terminal */
.log-terminal-wrap { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.log-terminal {
flex: 1;
overflow-y: auto;
overflow-x: auto;
background: #050507;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
padding: 8px 0;
min-height: 0;
}
.log-terminal::-webkit-scrollbar { width: 6px; height: 6px; }
.log-terminal::-webkit-scrollbar-track { background: var(--bg); }
.log-terminal::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
.log-terminal__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--dim); }
.log-placeholder-icon { font-size: 40px; margin-bottom: 12px; opacity: .3; }
.log-placeholder-hint { font-size: 11px; color: var(--dim); margin-top: 6px; }
/* Log lines — soothing palette, themed via --log-* variables on .logs-viewer */
.log-line { display: flex; align-items: baseline; gap: 8px; padding: 1px 12px; white-space: pre-wrap; word-break: break-all; border-left: 2px solid transparent; color: var(--log-text); }
.log-line:hover { background: var(--bg2); }
.log-line--history { opacity: .7; }
.log-line--rotated { color: var(--log-purple); border-left-color: var(--log-purple); padding: 4px 12px; font-style: italic; }
.log-ts { color: var(--log-muted); flex-shrink: 0; font-size: 10px; }
.log-text { flex: 1; }
/* Line type colours — each type gets a distinct hue, themed via --log-* */
.log-line--error { color: var(--log-error); border-left-color: var(--log-error); background: var(--log-error-bg); font-weight: 500; }
.log-line--warn { color: var(--log-warn); border-left-color: var(--log-warn); background: var(--log-warn-bg); }
.log-line--slow-crit { color: var(--log-orange); border-left-color: var(--log-orange); background: var(--log-orange-bg); font-weight: 500; }
.log-line--slow { color: var(--log-yellow); border-left-color: var(--log-yellow); }
.log-line--slow-query{ color: var(--log-green); border-left-color: var(--log-green); }
.log-line--timing { color: var(--log-cyan); }
.log-line--query { color: var(--log-info); }
.log-line--curl { color: var(--log-purple); }
.log-line--debug { color: var(--log-muted); opacity: .9; }
.log-line--info { color: var(--log-text); opacity: .85; }
.log-line--default { color: var(--log-text); }
/* Status bar */
.log-statusbar { display: flex; align-items: center; gap: 12px; padding: 5px 12px; background: var(--bg2); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.sb-item { color: var(--muted); }
.sb-item--ok { color: var(--ok); }
.sb-item--warn { color: var(--warn); }
.sb-item--error { color: var(--crit); }
.sb-item--right { margin-left: auto; }
/* ── /admin/config form ───────────────────────────────────────────────── */
.config-form { max-width: 1100px; }
.config-group {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg2); padding: 14px 18px 6px; margin: 14px 0;
}
.config-group__legend {
font-family: var(--font-mono); font-size: 11px; color: var(--text-header);
text-transform: uppercase; letter-spacing: .1em; padding: 0 8px;
}
.config-group__desc {
font-size: 11px; color: var(--muted); margin: 0 0 10px;
line-height: 1.55;
}
.config-grid {
display: grid; gap: 12px 24px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.config-row {
display: flex; flex-direction: column; gap: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border);
}
.config-row:last-child { border-bottom: 0; }
.config-row--error { background: var(--crit-bg); padding: 6px 8px; border-radius: 4px; }
.config-row__label {
font-family: var(--font-mono); font-size: 11px; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.config-row__badge {
font-size: 9px; color: var(--purple); background: var(--purple-bg);
padding: 1px 6px; border-radius: 8px; letter-spacing: .04em;
text-transform: uppercase; font-weight: 500;
}
.config-row__input { display: flex; flex-direction: column; gap: 2px; }
.config-row__field {
background: var(--bg3); color: var(--text); border: 1px solid var(--border);
border-radius: 4px; padding: 5px 9px;
font-family: var(--font-mono); font-size: 12px;
width: 100%; box-sizing: border-box;
}
.config-row__field:focus { outline: none; border-color: var(--info); }
.config-row__field--num { max-width: 160px; }
.config-row__textarea {
background: var(--bg3); color: var(--text); border: 1px solid var(--border);
border-radius: 4px; padding: 6px 9px;
font-family: var(--font-mono); font-size: 12px;
width: 100%; box-sizing: border-box; resize: vertical;
}
.config-row__hint {
font-size: 10px; color: var(--muted); margin: 2px 0 0; line-height: 1.45;
}
.config-row__err {
font-size: 10px; color: var(--crit); margin: 2px 0 0;
font-family: var(--font-mono);
}
.config-toggle {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 12px; color: var(--text);
cursor: pointer;
}
.config-toggle input { width: 16px; height: 16px; cursor: pointer; }
.config-actions {
display: flex; align-items: center; gap: 14px;
margin: 18px 0 8px; padding-top: 14px;
border-top: 1px solid var(--border);
}
/* ── /commits page ───────────────────────────────────────────────────── */
.commit-table { table-layout: fixed; width: 100%; }
.commit-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-header); }
.commit-table td {
vertical-align: top;
white-space: normal; /* override .data-table td's nowrap so long text wraps */
word-break: break-word; /* break long unbroken tokens (paths, IDs) at any char */
overflow-wrap: anywhere;
line-height: 1.5;
}
.commit-table code { font-family: var(--font-mono); font-size: 11px; color: var(--info); word-break: break-all; }
/* Per-column widths — keep narrow columns narrow, give text columns room. */
.commit-table th:nth-child(1), .commit-table td:nth-child(1) { width: 80px; } /* SHA */
.commit-table th:nth-child(2), .commit-table td:nth-child(2) { width: 200px; } /* repo / branch */
.commit-table th:nth-child(3), .commit-table td:nth-child(3) { width: 140px; } /* author */
.commit-table th:nth-child(4), .commit-table td:nth-child(4) { width: auto; } /* subject — stretches */
.commit-table th:nth-child(5), .commit-table td:nth-child(5) { width: 70px; } /* status */
.commit-table th:nth-child(6), .commit-table td:nth-child(6) { width: 80px; } /* severity */
.commit-table th:nth-child(7), .commit-table td:nth-child(7) { width: auto; } /* verdict — stretches */
.commit-table th:nth-child(8), .commit-table td:nth-child(8) { width: 80px; } /* queued */
.commit-table th:nth-child(9), .commit-table td:nth-child(9) { width: 60px; } /* view link */
/* Reusable wrap-cell for any data-table column that should wrap long text. */
.cell--wrap {
white-space: normal !important;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.5;
}
/* Problems on /commits/ — rendered as .fix-mini cards (same component
the chat investigation panel uses). Container just supplies vertical
rhythm; all colors come from .fix-mini above. */
.commit-problems { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.commit-problems .fix-mini { margin-bottom: 0; }
/* Category pill inside the fix-mini header — neutral so it never competes
with the priority signal that owns the colour palette. */
.fix-mini__cat {
font-size: 9px; font-family: var(--font-mono);
padding: 1px 6px; border-radius: 3px;
background: var(--bg4); color: var(--text-header);
text-transform: lowercase; letter-spacing: .04em;
}
.fix-mini__title { font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
/* Long file paths inside a problem card should wrap, not punch the layout. */
.fix-mini__file { overflow-wrap: anywhere; word-break: break-word; }
.fix-mini__problem { line-height: 1.55; }
/* Override fix-mini__code wrap policy so multi-line fix snippets don't
force horizontal scroll inside the card. */
.commit-problems .fix-mini__code { white-space: pre-wrap; word-break: break-word; }
.commit-meta {
display: grid; gap: 6px 18px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 12px 16px; margin: 8px 0 12px;
font-family: var(--font-mono); font-size: 12px;
}
.commit-meta__label {
display: inline-block; min-width: 70px;
font-size: 10px; color: var(--text-header); text-transform: uppercase; letter-spacing: .08em;
}
.commit-response {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 22px;
max-height: 720px; overflow: auto;
font-family: var(--font-ui); font-size: 13px; line-height: 1.65;
color: var(--text);
word-wrap: break-word;
}
/* ── Markdown rendering — palette matches the chat investigation panel
(.detail-summary / .ev-content / .fix-mini__code / .fix-mini__file) so
the commits detail "Claude's full analysis" reads as part of the same
visual language. ──────────────────────────────────────────────────── */
.md { font-family: var(--font-ui); color: var(--text); }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
/* Headings: top heading mirrors a section title; smaller ones reuse the
.detail-section-label aesthetic (mono small-caps, --text-header). */
.md .md-h2 {
font-size: 14px; font-weight: 500; color: var(--text);
margin: 18px 0 8px;
font-family: var(--font-mono);
letter-spacing: .04em;
padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.md .md-h3 {
font-size: 12px; font-weight: 500;
color: var(--text-header);
text-transform: uppercase; letter-spacing: .08em;
font-family: var(--font-mono);
margin: 16px 0 6px;
}
.md .md-h4 {
font-size: 11px; font-weight: 500;
color: var(--text-header);
text-transform: uppercase; letter-spacing: .08em;
font-family: var(--font-mono);
margin: 14px 0 4px;
}
.md .md-h5 {
font-size: 11px; font-weight: 500;
color: var(--muted); font-family: var(--font-mono);
margin: 12px 0 4px;
}
/* Body text — same shape as .detail-summary (12px, line-height 1.6, --text). */
.md .md-p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--text); }
.md .md-ul,
.md .md-ol { margin: 0 0 10px 20px; padding: 0; font-size: 12px; line-height: 1.6; }
.md .md-ul li,
.md .md-ol li { margin: 3px 0; color: var(--text); }
.md .md-hr {
border: none; border-top: 1px solid var(--border);
margin: 16px 0;
}
/* Links — info blue, same as .fix-mini__file. */
.md .md-link { color: var(--info); text-decoration: none; border-bottom: 1px dashed var(--info); }
.md .md-link:hover { border-bottom-style: solid; }
/* Inline code — matches .fix-mini__file palette (info blue, mono, small). */
.md .md-code-inline {
background: var(--bg3);
color: var(--info);
padding: 1px 6px;
border-radius: 3px;
font-family: var(--font-mono); font-size: 11px;
word-break: break-word;
}
/* Code blocks — exact match to .fix-mini__code: green text on --bg, mono,
bordered. The same colour Claude's recommended fixes use in the chat
panel, so a snippet that appears in both places looks identical. */
.md .md-code {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px 10px;
margin: 0 0 12px;
overflow-x: auto;
font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
color: #86efac;
white-space: pre;
word-break: break-all;
}
.md .md-code code { font-family: inherit; font-size: inherit; color: inherit; padding: 0; background: none; }
/* Bold/italic — keep within --text so emphasis doesn't look like a link. */
.md strong { color: var(--text); font-weight: 600; }
.md em { color: var(--text); font-style: italic; }
/* Light theme override — green code on a near-white bg is unreadable.
Switch to a darker accent green that holds contrast on light surfaces. */
[data-theme="light"] .md .md-code { color: #166534; background: var(--bg3); }
[data-theme="light"] .md .md-code-inline { color: var(--info); }
/* Markdown tables — visually consistent with .data-table on the rest of the
site. Block-level wrapper handles horizontal scroll on narrow viewports. */
.md .md-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 14px;
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.55;
display: block;
overflow-x: auto;
}
.md .md-table thead th {
text-align: left;
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
background: var(--bg3);
border-bottom: 1px solid var(--border);
font-weight: 500;
white-space: nowrap;
}
.md .md-table tbody td {
padding: 8px 12px;
color: var(--text);
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
vertical-align: top;
word-break: break-word;
overflow-wrap: anywhere;
}
.md .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg3) 40%, transparent); }
.md .md-table tbody tr:last-child td { border-bottom: 0; }
.md .md-table tbody tr:hover td { background: var(--bg3); }
/* ─────────────────────────────────────────────────────────────────────────
Chat detail panel — expanded view, pinned question, failure block.
These rules sit on top of the earlier .chat-detail / .ev-card / .fix-mini
styles and refine the layout for readability.
───────────────────────────────────────────────────────────────────────── */
/* Toolbar buttons (Expand / Retry / Copy) at top of the detail pane. */
.investigation-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.detail-tool {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
padding: 4px 10px; border-radius: 4px;
background: var(--bg3); color: var(--text-header);
border: 1px solid var(--border); cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.detail-tool:hover { background: var(--bg4); color: var(--text); border-color: var(--info); }
/* Pinned question card — first thing readers see. */
.detail-question {
background: var(--bg3); border: 1px solid var(--border);
border-left: 2px solid var(--purple);
border-radius: 6px;
padding: 10px 14px;
margin: 0 0 10px;
}
.detail-question__label {
display: block;
font-family: var(--font-mono); font-size: 10px;
color: var(--purple);
text-transform: uppercase; letter-spacing: .08em;
margin-bottom: 4px;
}
.detail-question__src {
font-size: 9px; color: var(--muted); padding: 1px 6px;
background: var(--bg4); border-radius: 3px; margin-left: 6px;
}
.detail-question__body { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text); }
/* Verdict block — root-cause badge + summary, sitting above the structured
sections. Same overall feel as the chat panel's earlier render. */
.detail-verdict { margin: 8px 0 14px; }
/* ── Failure block ─────────────────────────────────────────────────── */
.detail-error {
background: var(--crit-bg);
border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border));
border-radius: 8px;
padding: 12px 14px;
margin: 0 0 14px;
}
.detail-error__head {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
font-family: var(--font-mono); font-size: 11px;
color: var(--crit); letter-spacing: .03em;
text-transform: uppercase;
}
.detail-error__icon { font-size: 14px; }
.detail-error__title { font-weight: 500; }
.detail-error__partial,
.detail-error__tail {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0;
margin-bottom: 8px;
overflow: hidden;
}
.detail-error__partial > summary,
.detail-error__tail > summary {
list-style: none; cursor: pointer;
padding: 8px 12px;
font-family: var(--font-mono); font-size: 10px;
color: var(--text-header);
text-transform: uppercase; letter-spacing: .08em;
background: var(--bg3);
border-bottom: 1px solid var(--border);
}
.detail-error__partial > summary::-webkit-details-marker,
.detail-error__tail > summary::-webkit-details-marker { display: none; }
.detail-error__partial > summary::before,
.detail-error__tail > summary::before {
content: '▶'; font-size: 9px; margin-right: 8px; color: var(--muted);
display: inline-block; transition: transform .12s;
}
.detail-error__partial[open] > summary::before,
.detail-error__tail[open] > summary::before { transform: rotate(90deg); }
.detail-error__md { padding: 12px 14px; }
.detail-error__text {
margin: 0; padding: 12px 14px;
font-size: 12px; line-height: 1.6; color: var(--text);
}
.detail-error__events {
list-style: none; padding: 8px 12px; margin: 0;
display: flex; flex-direction: column; gap: 4px;
font-family: var(--font-mono); font-size: 11px;
}
.detail-error__ev {
display: flex; gap: 8px; align-items: baseline;
color: var(--text); line-height: 1.5;
word-break: break-word;
}
.detail-error__ev-tag {
flex-shrink: 0;
font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
padding: 1px 6px; border-radius: 3px;
min-width: 50px; text-align: center;
background: var(--bg3); color: var(--muted);
}
.detail-error__ev--text .detail-error__ev-tag { background: var(--bg4); color: var(--text-header); }
.detail-error__ev--tool .detail-error__ev-tag { background: var(--info-bg); color: var(--info); }
.detail-error__ev--result .detail-error__ev-tag { background: var(--ok-bg); color: var(--ok); }
.detail-error__ev--final .detail-error__ev-tag { background: var(--crit-bg); color: var(--crit); }
.detail-error__hint {
margin: 4px 0 0; font-size: 11px; color: var(--muted); line-height: 1.55;
}
/* Evidence expand-on-click (replaces the 400-char truncation). */
.ev-content-wrap > summary { list-style: none; cursor: pointer; padding: 0; margin: 0; }
.ev-content-wrap > summary::-webkit-details-marker { display: none; }
.ev-content__more { color: var(--info); font-size: 10px; margin-left: 6px; }
.ev-content--full {
border-top: 1px dashed var(--border);
padding: 8px 10px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text); white-space: pre-wrap;
word-break: break-word; overflow-wrap: anywhere;
background: var(--bg);
}
.ev-content {
word-break: break-word !important;
overflow-wrap: anywhere;
}
/* Full markdown answer — collapsible at bottom of detail. */
.detail-answer { margin-top: 14px; }
.detail-answer > summary {
list-style: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 4px;
background: var(--bg3); color: var(--text-header);
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: .08em;
}
.detail-answer > summary::-webkit-details-marker { display: none; }
.detail-answer > summary::before {
content: '▶'; font-size: 9px; color: var(--muted);
display: inline-block; transition: transform .12s;
}
.detail-answer[open] > summary::before { transform: rotate(90deg); }
.detail-answer__body {
margin-top: 10px;
padding: 14px 16px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
}
/* Fix card title polish (used by both chat panel and /commits/). */
.fix-mini__header .fix-mini__title { flex: 1; min-width: 0; }
.fix-mini__code { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
/* ── Fullscreen expand: takes over the viewport for long investigations ──
Layout requirements:
1. The wrapper IS 100vh tall (position:fixed + inset:0).
2. The single grid row must fill that height — grid-template-rows: 1fr,
otherwise the row auto-sizes to content and inner panels lose their
scroll constraint.
3. Both grid children get height:100% + min-height:0 + overflow:hidden
so their internal flex columns (chat-messages, chat-detail__scroll)
get a definite height and can actually scroll.
4. Body scroll is locked while the overlay is up so the dashboard
behind doesn't scroll along when you wheel inside the panel. */
.chat-wrap--expanded {
position: fixed; inset: 0; z-index: 200;
/* The default .chat-wrap rule sets `height: 620px` and `margin-bottom: 8px`
plus `border: 1px solid` and a radius — explicit height beats inset:0,
so we MUST override every dimension here or the overlay stays stuck at
620px tall with the dashboard visible below it. */
width: 100vw;
height: 100vh;
height: 100dvh; /* dynamic viewport — handles mobile chrome bars */
margin: 0;
border: none;
background: var(--bg2); /* solid panel colour — no dashboard bleed */
padding: 0; /* edge-to-edge: panels reach all four sides */
overflow: hidden;
display: grid;
grid-template-columns: minmax(300px, 380px) 1fr;
grid-template-rows: 1fr;
gap: 0; /* single divider, no visible "channel" */
border-radius: 0;
}
.chat-wrap--expanded .chat-history,
.chat-wrap--expanded .chat-detail {
height: 100%;
min-height: 0;
overflow: hidden;
background: var(--bg2);
}
.chat-wrap--expanded .chat-history {
border-right: 1px solid var(--border);
}
.chat-wrap--expanded .chat-detail {
border: none; /* edge-flush — single border lives on history */
border-radius: 0;
}
/* The detail's internal scroll container — was already overflow-y:auto, but
make sure it's the one taking the scroll, not the parent. */
.chat-wrap--expanded .chat-detail__scroll {
padding: 22px 26px;
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* The history pane's inner messages list keeps its existing flex:1 +
overflow-y:auto from the default rule — confirmed it works because the
parent now has a definite height. */
/* Lock background scroll while expanded, modern CSS-only. Falls back to
"background still scrolls" on engines without :has() (none current). */
html:has(.chat-wrap--expanded),
body:has(.chat-wrap--expanded) { overflow: hidden; }
[data-theme="light"] .chat-wrap--expanded { background: var(--bg); }
/* ── Overlap fixes ─────────────────────────────────────────────────────
The fix-code blocks have an absolutely-positioned copy button at top-right
whose footprint isn't reserved by the parent's padding. Reserving padding
on the pre keeps the copy button out of the code text.
Same fix for both the dashboard fix-card (.fix-code) and the chat-panel
fix-mini card (.fix-mini__code). */
.fix-code,
.fix-mini__code {
padding-right: 60px;
/* Allow the copy button + a small breathing margin without forcing the
first line of code to wrap awkwardly when content is short. */
}
/* And one extra notch so the copy chip doesn't kiss the right border. */
.fix-copy,
.fix-mini__copy { z-index: 1; }
/* When the chat panel goes fullscreen, the original border-right on
.chat-history floats in the 16px grid gap. Drop it. */
.chat-wrap--expanded .chat-history { border-right: none; }
/* Same panel: reduce the inner toolbar's right-justification jitter when
buttons wrap onto a new line on narrow viewports. */
.chat-wrap--expanded .investigation-toolbar { justify-content: flex-start; }
/* Question-card source tag — was rendered as inline-block but next to the
"Question" label which inherits the card's color. Keep them on one line
even when the source string is long. */
.detail-question__label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Toolbar buttons: ensure consistent heights so a mixed row of Expand /
Retry / Copy doesn't visually jitter when one is taller than another. */
.investigation-toolbar > * { height: 24px; line-height: 1; box-sizing: border-box; }
/* Recent investigations row — small severity dot at the left edge so the
list scans like a status line, not a wall of text. */
.chat-recent__row {
position: relative;
padding-left: 22px;
}
.chat-recent__row::before {
content: '';
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok);
}
.chat-recent__row--err::before { background: var(--crit); }
.chat-recent__row--pending::before { background: var(--warn); animation: pulse 2s ease-in-out infinite; }
/* ── Application footprint panel ────────────────────────────────────── */
.footprint-grid {
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
background: var(--border);
border-bottom: 1px solid var(--border);
}
.footprint-stat {
background: var(--bg2);
padding: 12px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.footprint-stat__label {
font-family: var(--font-mono); font-size: 10px;
color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.footprint-stat__value {
font-family: var(--font-mono); font-size: 22px; font-weight: 500;
color: var(--text); line-height: 1.1;
}
.footprint-stat__sub {
font-family: var(--font-mono); font-size: 10px; color: var(--dim);
}
.footprint-cols {
display: grid; gap: 1px;
grid-template-columns: 1fr 1fr;
background: var(--border);
}
@media (max-width: 900px) { .footprint-cols { grid-template-columns: 1fr; } }
.footprint-col {
background: var(--bg2);
padding: 10px 14px 12px;
}
.footprint-col__title {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-header);
text-transform: uppercase; letter-spacing: .08em;
margin: 0 0 8px;
font-weight: 500;
}
.footprint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.footprint-list__empty { color: var(--muted); font-style: italic; font-size: 11px; }
.footprint-row {
display: grid;
align-items: baseline;
gap: 10px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text); line-height: 1.45;
padding: 4px 0;
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.footprint-row:last-child { border-bottom: 0; }
/* Process row layout: pid (60) | cpu (60) | mem (80) | cmd (rest) */
#footprint-procs-list .footprint-row { grid-template-columns: 60px 60px 80px 1fr; }
.footprint-row__pid { color: var(--muted); }
.footprint-row__cpu { color: var(--info); text-align: right; }
.footprint-row__mem { color: var(--purple); text-align: right; }
.footprint-row__cmd {
color: var(--text-header);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10px;
}
/* Storage row layout: name | bar | size */
#footprint-storage-list .footprint-row { grid-template-columns: 1fr 90px 70px; }
.footprint-row__name {
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footprint-row__bar {
display: inline-block; height: 6px;
background: var(--bg4); border-radius: 3px; overflow: hidden;
}
.footprint-row__bar-fill {
display: block; height: 100%;
background: linear-gradient(90deg, var(--info), var(--purple));
border-radius: 3px;
}
.footprint-row__size {
color: var(--muted); text-align: right;
}
/* ── Dashboard 'Recent commits' panel ──────────────────────────────── */
.recent-commits { list-style: none; margin: 0; padding: 0; }
.recent-commit {
display: grid; gap: 8px;
grid-template-columns: 70px 70px 1fr;
align-items: baseline;
padding: 8px 12px; border-bottom: 1px solid var(--border);
font-family: var(--font-mono); font-size: 12px;
}
.recent-commit:last-child { border-bottom: 0; }
.recent-commit__sha {
font-family: var(--font-mono); font-size: 12px; color: var(--info);
text-decoration: none; font-weight: 500;
}
.recent-commit__sha:hover { text-decoration: underline; }
.recent-commit__subject {
color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-commit__verdict {
grid-column: 3; font-size: 11px; color: var(--muted); margin-top: 2px;
white-space: normal;
}
.recent-commit__meta {
grid-column: 3; font-size: 10px; color: var(--dim); margin-top: 2px;
}
/* ─────────────────────────────────────────────────────────────────────────
Visual refresh — declutter pass.
Loaded LAST so these rules override the originals above. Keeps the
terminal-ish dark aesthetic but reduces nested borders, lifts hierarchy,
and stops mono font from punishing prose.
───────────────────────────────────────────────────────────────────────── */
/* Tone the header — drop the loud purple title, gain breathing room. */
.app-header { height: 48px; padding: 0 28px; backdrop-filter: blur(6px); background: color-mix(in srgb, var(--bg2) 85%, transparent); }
.header-title { color: var(--text); font-weight: 500; letter-spacing: .08em; }
.header-meta { gap: 14px; }
.uptime-chip { background: transparent; border-color: var(--border); color: var(--text-header); padding: 1px 10px; }
/* Wider page, more headroom up top. */
.app-main { padding: 28px 32px 64px; max-width: 1640px; }
/* Section label — kill the trailing horizontal line, give it weight,
keep mono small-caps but a notch easier to read. */
.section-label { font-size: 11px; letter-spacing: .14em; color: var(--text); margin: 26px 0 12px; }
.section-label::after { content: none; }
.section-label__meta { color: var(--muted); font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: 10px; }
.section-label__meta--crit { color: var(--crit); }
/* Panels — softer edge, subtle depth, no double-border with the inner header. */
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.panel__header { padding: 10px 16px; border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); letter-spacing: .1em; color: var(--text-header); }
.panel__error { padding: 10px 16px; }
/* Metric cards — drop the colored top stripe, use a subtle left rail for
warn/crit instead. Less visual chatter when the grid has many cards. */
.metric-card { padding: 14px 16px; border-radius: 10px; transition: border-color .12s; }
.metric-card::before { display: none; }
.metric-card--ok { border-color: var(--border); }
.metric-card--warn { border-color: var(--border); border-left: 2px solid var(--warn); padding-left: 14px; }
.metric-card--crit { border-color: var(--border); border-left: 2px solid var(--crit); padding-left: 14px; }
.metric-card:hover { border-color: var(--border2); }
.metric-card__label { letter-spacing: .1em; font-size: 10px; margin-bottom: 6px; color: var(--muted); }
.metric-card__value { font-size: 22px; font-weight: 500; }
.metric-card__sub { color: var(--muted); margin-top: 6px; }
/* Banners — calmer borders, more readable body. */
.banner { border-radius: 10px; padding: 14px 18px; }
.banner--error { border-color: color-mix(in srgb, var(--crit) 30%, var(--border)); }
.banner--warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.banner__title { font-size: 12px; letter-spacing: .04em; margin-bottom: 8px; }
.banner__list li { font-size: 12px; line-height: 1.55; }
/* Alerts — severity as a left rail, single-row layout, less badge soup.
Most alert rows in the wild have level + category + metric pills; we
already render the level via JS as `badge--level`. The left border
carries the same signal at a glance. */
.alert-item { padding: 10px 16px; gap: 10px; }
.alert-item:has(.badge--crit) { border-left: 2px solid var(--crit); }
.alert-item:has(.badge--warn) { border-left: 2px solid var(--warn); }
.alert-item:has(.badge--ok) { border-left: 2px solid var(--ok); }
.alert-item__msg { line-height: 1.5; color: var(--text); font-family: var(--font-ui); }
.alert-item__ts { color: var(--dim); }
/* Tables — subtler header, slightly more row air, zebra-tinted rows. */
.data-table th { padding: 9px 14px; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--border); }
.data-table td { padding: 10px 14px; border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent); }
.data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg3) 40%, transparent); }
.data-table tr:hover td { background: var(--bg3); }
/* KV rows — mirror the table treatment for consistency. */
.kv-row { padding: 8px 16px; }
.kv-row__key { color: var(--muted); }
/* Chat recent — quieter framing. */
.chat-recent { border-radius: 10px; }
.chat-recent__summary { padding: 10px 14px; letter-spacing: .1em; }
/* Left padding leaves room for the absolutely-positioned severity dot
(6px wide, anchored at left:10px → spans 10-16). Content starts at 24px
with 8px breathing room from the dot. The shorthand earlier in this
file would otherwise reset the left side back to 14 and overlap the
time text. */
.chat-recent__row { padding: 9px 14px 9px 24px; }
/* Investigation buttons — slightly larger hit area, calmer purple. */
.investigate-btn { padding: 4px 10px; border-radius: 4px; font-size: 10px; letter-spacing: .04em; }
.chat-followup-btn,
.chat-retry-btn { padding: 4px 11px; border-radius: 4px; }
/* Recent commits panel — give the verdict line proper line-height now that
it can wrap, and a touch more horizontal breathing room. */
.recent-commit { padding: 12px 16px; gap: 10px 16px; grid-template-columns: 84px 84px 1fr; }
.recent-commit__verdict { line-height: 1.55; }
/* Form fields throughout — unified focus ring. */
.form-field__select,
.form-field__input,
.config-row__field,
.config-row__textarea { transition: border-color .12s, box-shadow .12s; }
.form-field__select:focus,
.form-field__input:focus,
.config-row__field:focus,
.config-row__textarea:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent); }
/* Investigations stats title — match the new section-label weight. */
.invs-title { font-size: 16px; letter-spacing: .03em; color: var(--text); }
.invs-h2 { font-size: 11px; letter-spacing: .12em; color: var(--muted); margin: 26px 0 8px; }
.invs-help { font-family: var(--font-ui); font-size: 12px; line-height: 1.65; color: var(--text-header); }
.invs-help code { background: var(--bg3); padding: 1px 6px; border-radius: 3px; font-size: 11px; color: var(--info); }
/* Slow query cards — a touch more padding so the SQL block doesn't crowd. */
.slow-query-card { padding: 12px 16px; }
/* Light theme touch-ups: card shadows look harsh on white; soften them and
warm the surface tones a hair. */
[data-theme="light"] .panel { box-shadow: 0 1px 2px rgba(15,23,42,.05); }
[data-theme="light"] .metric-card { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
[data-theme="light"] .banner { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
[data-theme="light"] .data-table tbody tr:nth-child(even) td { background: #f8fafc; }
[data-theme="light"] .app-header { background: rgba(255,255,255,.85); }
/* Honour user-chosen "compact" content for very wide screens — keeps
measure readable so prose lines don't run hundreds of chars. */
@media (min-width: 1900px) {
.app-main { max-width: 1760px; }
}
/* ── Inline password reset on /admin/users ────────────────────────────── */
.pw-reset { display: inline-block; }
.pw-reset > summary { list-style: none; cursor: pointer; }
.pw-reset > summary::-webkit-details-marker { display: none; }
.pw-reset[open] > summary { background: var(--bg4); color: var(--text); }
.pw-reset__form {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 6px; padding: 4px 8px;
background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
vertical-align: middle;
}
.form-field__input--sm {
padding: 4px 8px; font-size: 12px; min-width: 160px;
}
/* ── /account self-service form ───────────────────────────────────────── */
.account-form {
max-width: 460px; margin: 4px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.account-form__row { display: flex; flex-direction: column; gap: 4px; }
.account-form__actions { margin-top: 6px; }
.account-form .form-field__label {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: .08em;
color: var(--muted);
}
.account-form .form-field__input {
background: var(--bg3); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 8px 12px;
font-family: var(--font-mono); font-size: 13px;
width: 100%; box-sizing: border-box;
}
/* ─────────────────────────────────────────────────────────────────────────
Layout pass — nav pills, dashboard tiers, auth shell, page intros.
Loaded last so these rules supersede the earlier pass.
───────────────────────────────────────────────────────────────────────── */
/* ── Nav: pill row, active state, integrated with header ─────────────── */
.app-nav {
height: auto; min-height: 38px;
padding: 6px 28px;
background: var(--bg);
border-bottom: 1px solid var(--border);
top: 48px;
gap: 16px;
flex-wrap: wrap;
}
.app-nav__actions { gap: 4px; flex-wrap: wrap; }
.app-nav__user { display: flex; align-items: center; gap: 8px; }
.app-nav__email { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.app-nav__link {
font-family: var(--font-mono); font-size: 11px;
color: var(--muted); text-decoration: none;
padding: 5px 11px; border-radius: 6px;
transition: background .12s, color .12s;
letter-spacing: .02em;
}
.app-nav__link:hover { background: var(--bg3); color: var(--text); }
.app-nav__link--active { background: var(--purple-bg); color: var(--purple); }
.app-nav__link--active:hover { background: var(--purple-bg); color: var(--purple); }
.app-nav__link--logout { padding: 5px 9px; color: var(--dim); font-size: 14px; }
.app-nav__link--logout:hover { background: var(--crit-bg); color: var(--crit); }
/* ── Dashboard tiers: visual hierarchy without restructuring ─────────── */
/* Tier 1 — "happening now". A touch louder, more headroom. */
.dashboard-section--tier-1 { margin-bottom: 12px; }
.dashboard-section--tier-1 .section-label { font-size: 12px; color: var(--text); margin-top: 24px; }
/* Tier 2 — primary diagnostics. Default treatment from the earlier pass. */
.dashboard-section--tier-2 { margin-bottom: 10px; }
.dashboard-section--tier-2 .section-label { font-size: 11px; color: var(--text); }
/* Tier 3 — context. Slightly muted, half the headroom. */
.dashboard-section--tier-3 { margin-bottom: 6px; }
.dashboard-section--tier-3 .section-label { font-size: 10px; color: var(--text-header); margin-top: 18px; letter-spacing: .12em; }
/* Tier 4 — secondary. Quietest. */
.dashboard-section--tier-4 { margin-bottom: 6px; }
.dashboard-section--tier-4 .section-label { font-size: 10px; color: var(--muted); margin-top: 22px; letter-spacing: .12em; }
/* Soft horizontal rule between tiers (uses adjacent-sibling). */
.dashboard-section--tier-1 + .dashboard-section--tier-2,
.dashboard-section--tier-2 + .dashboard-section--tier-3,
.dashboard-section--tier-3 + .dashboard-section--tier-4 {
position: relative;
}
.dashboard-section--tier-1 + .dashboard-section--tier-2::before,
.dashboard-section--tier-2 + .dashboard-section--tier-3::before,
.dashboard-section--tier-3 + .dashboard-section--tier-4::before {
content: ''; display: block; height: 1px; max-width: 80px;
background: var(--border); margin: 18px 0 -4px;
}
/* ── Auth shell (login + forbidden) ────────────────────────────────── */
.auth-body {
background: var(--bg);
background-image:
radial-gradient(at 18% 0%, rgba(167,139,250,0.13) 0px, transparent 55%),
radial-gradient(at 82% 100%, rgba(59,130,246,0.10) 0px, transparent 55%);
min-height: 100vh; margin: 0;
}
.auth-main {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: 32px 16px;
}
.auth-card {
width: 100%; max-width: 400px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 36px 36px 28px;
box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
[data-theme="light"] .auth-card { box-shadow: 0 24px 60px rgba(15,23,42,0.10); }
.auth-card__brand {
display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.auth-card__logo { display: inline-flex; }
.auth-card__title-wrap { display: flex; flex-direction: column; gap: 2px; }
.auth-card__title {
font-family: var(--font-ui); font-size: 18px; font-weight: 600;
color: var(--text); margin: 0; letter-spacing: -0.01em;
}
.auth-card__subtitle {
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: .08em; margin: 0;
}
.auth-card__error {
background: var(--crit-bg);
border: 1px solid color-mix(in srgb, var(--crit) 30%, var(--border));
color: var(--crit);
padding: 10px 14px; border-radius: 8px;
font-size: 13px; line-height: 1.5;
margin-bottom: 16px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form__field { display: flex; flex-direction: column; gap: 6px; }
.auth-form__label {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: .08em;
color: var(--muted);
}
.auth-form__input {
background: var(--bg3); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px;
font-family: var(--font-ui); font-size: 14px;
transition: border-color .12s, box-shadow .12s;
}
.auth-form__input:focus {
outline: none; border-color: var(--info);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent);
}
.auth-form__submit {
margin-top: 6px; padding: 10px 14px; border-radius: 8px;
background: linear-gradient(180deg, #b794ff, #7c3aed);
color: white; border: none; cursor: pointer;
font-family: var(--font-ui); font-size: 14px; font-weight: 500;
letter-spacing: .02em; transition: filter .12s, transform .04s;
}
.auth-form__submit:hover { filter: brightness(1.08); }
.auth-form__submit:active { transform: translateY(1px); }
.auth-card__footer {
margin: 22px 0 0; padding-top: 14px;
border-top: 1px solid var(--border);
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
text-align: center; letter-spacing: .04em;
}
.auth-card__footer a { color: var(--purple); text-decoration: none; }
.auth-card__footer a:hover { text-decoration: underline; }
/* ── Page intros — consistent .invs-wrap pattern across all subpages ── */
.invs-wrap { padding: 8px 0 32px; }
.invs-title {
font-family: var(--font-ui); font-size: 22px; font-weight: 600;
color: var(--text); letter-spacing: -0.01em;
margin: 0 0 4px;
}
.invs-help { font-size: 13px; line-height: 1.65; }
/* Admin breadcrumb — calmer */
.admin-breadcrumb a {
color: var(--muted); text-decoration: none;
font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
}
.admin-breadcrumb a:hover { color: var(--info); }
/* Buttons — slight refresh for consistency */
.btn {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
padding: 6px 12px; border-radius: 6px;
border: 1px solid transparent;
cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.btn--primary {
background: linear-gradient(180deg, #b794ff, #7c3aed);
color: white; border: none;
}
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--text-header); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.btn--sm { padding: 4px 10px; font-size: 10px; }
/* Make /admin/users action row breathe */
.action-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Loading spinner — tone down */
.loading-state {
display: flex; align-items: center; gap: 10px;
padding: 14px 0; color: var(--muted);
font-family: var(--font-mono); font-size: 11px;
}
.spinner {
width: 14px; height: 14px;
border: 2px solid var(--border); border-top-color: var(--purple);
border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }