/* ============================================================ Design system — one set of tokens, applied. The portal grew to 22 pages with every panel carrying its own inline styles, which is why it reads as assembled rather than made. Everything new should use these tokens; existing pages get migrated as they're touched, not in one risky sweep. Jack preferred a competitor's LIGHT interface, so light is the default here — but every colour is a variable, so switching the whole portal is a class on , not a rewrite. That is the point of doing it this way. ============================================================ */ :root, html[data-theme="light"] { --bg: #f7f8fa; --bg-raised: #ffffff; --bg-sunken: #f0f2f5; --border: #e3e6ea; --border-strong: #cdd2d9; --text: #1c2024; --text-muted: #656d78; --text-faint: #8b939c; --accent: #6c4ee3; /* the purple that carries their UI */ --accent-soft: #6c4ee314; --accent-border: #6c4ee340; --ok: #1a7f4b; --ok-soft: #1a7f4b14; --warn: #b26a00; --warn-soft: #b26a0014; --danger: #c0392b; --danger-soft: #c0392b14; --info: #1f6feb; --info-soft: #1f6feb14; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 2px 8px rgba(16,24,40,.07); } html[data-theme="dark"] { --bg: #0d1117; --bg-raised: #161b22; --bg-sunken: #010409; --border: #30363d; --border-strong: #484f58; --text: #e6edf3; --text-muted: #8b949e; --text-faint: #6e7681; --accent: #a371f7; --accent-soft: #a371f722; --accent-border: #a371f755; --ok: #3fb950; --ok-soft: #3fb95022; --warn: #d29922; --warn-soft: #d2992222; --danger: #f85149; --danger-soft: #f8514922; --info: #58a6ff; --info-soft: #58a6ff22; --shadow-sm: none; --shadow: none; } :root { --r-sm: 6px; --r: 8px; --r-lg: 12px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; } /* ---- primitives ------------------------------------------------------ */ .ds { color: var(--text); } .ds-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); } .ds-muted { color: var(--text-muted); } .ds-faint { color: var(--text-faint); } .ds-pill { display: inline-block; font-size: 11px; line-height: 1.6; padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-weight: 500; } .ds-pill-accent { background: var(--accent-soft); color: var(--accent); } .ds-pill-ok { background: var(--ok-soft); color: var(--ok); } .ds-pill-warn { background: var(--warn-soft); color: var(--warn); } .ds-pill-danger { background: var(--danger-soft); color: var(--danger); } .ds-pill-info { background: var(--info-soft); color: var(--info); } .ds-pill-quiet { background: var(--bg-sunken); color: var(--text-muted); border: 1px solid var(--border); } /* Status as a dot + label, the way their table reads */ .ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; } .ds-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ds-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .ds-table td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .ds-table tbody tr { cursor: default; } .ds-table tbody tr:hover { background: var(--bg-sunken); } .ds-table tbody tr:last-child td { border-bottom: 0; } .ds-kpi { background: var(--bg-raised); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: var(--sp-2); } .ds-kpi-label { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } .ds-kpi-sub { font-size: 11px; color: var(--text-muted); } .ds-kpi-value { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text); } .ds-kpi-ok { border-left-color: var(--ok); } .ds-kpi-warn { border-left-color: var(--warn); } .ds-kpi-danger { border-left-color: var(--danger); } .ds-tab { border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .ds-tab[data-active="1"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); font-weight: 600; } .ds-tab .ds-count { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; line-height: 18px; min-width: 18px; text-align: center; } .ds-tab[data-active="0"] .ds-count { background: var(--border-strong); } /* The agent chip — a coloured monogram, so a row says who owns it at a glance */ .ds-agent { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; } /* Split bar for "me vs the bot" */ .ds-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-sunken); } .ds-split span { display: block; height: 100%; } /* ---- three-column shell --------------------------------------------- */ .ds-shell { display: flex; gap: var(--sp-4); align-items: flex-start; } .ds-main { flex: 1; min-width: 0; } .ds-aside { width: 300px; flex: 0 0 300px; } @media (max-width: 1100px) { .ds-shell { flex-direction: column; } .ds-aside { width: 100%; flex: 1 1 auto; } } .ds-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); } .ds-empty-big { font-size: 15px; color: var(--text); margin-bottom: 4px; } /* ============================================================ REFRESH LAYER — modernises the components every existing page already uses, without touching any markup. Loaded after style.css, so these win. Only visual properties are set (colour, radius, spacing, shadow, weight) — never layout, display or position, so nothing can reflow unexpectedly. ============================================================ */ body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- sidebar: pill-shaped selection instead of a left rule ---------- */ .sidebar { background: var(--bg-raised); border-right: 1px solid var(--border); } .sidebar-header { border-bottom: 1px solid var(--border); padding: 18px 14px 14px; } .sidebar-header h1 { letter-spacing: -.01em; } .sidebar-nav { padding: 10px 8px; } .sidebar-section-label { padding: 10px 10px 6px; font-size: 10px; letter-spacing: .07em; color: var(--text-faint); } .sidebar-item { border-left: 0 !important; border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 1px; font-weight: 500; transition: background .12s ease, color .12s ease; } .sidebar-item:hover { background: var(--bg-sunken); color: var(--text); } .sidebar-item.active { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 600; } .sidebar-item .badge-count { background: var(--danger); font-weight: 600; padding: 1px 7px; } .sidebar-footer { border-top: 1px solid var(--border); } .sidebar-footer select { background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-sm); } /* ---- cards: lighter, softer, less shouty ---------------------------- */ .card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .card h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text); margin-bottom: 12px; } .card h3 { font-size: 13px; font-weight: 600; color: var(--text); } /* ---- buttons -------------------------------------------------------- */ .btn { border-radius: var(--r-sm); font-weight: 550; transition: filter .12s ease, background .12s ease, border-color .12s ease; border: 1px solid transparent; } .btn:hover { filter: brightness(1.06); } .btn:active { filter: brightness(.96); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-success { background: var(--ok); border-color: var(--ok); color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-outline { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { background: var(--bg-sunken); } .btn-sm { padding: 4px 10px; font-size: 12px; } /* ---- inputs --------------------------------------------------------- */ .form-group label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .form-group input, .form-group textarea, .form-group select, input[type="text"], input[type="date"], input[type="email"], input[type="number"], textarea, select { background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-sm); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } ::placeholder { color: var(--text-faint); } /* ---- tables --------------------------------------------------------- */ .results-table { border-collapse: collapse; } .results-table th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); font-weight: 600; } .results-table td { border-bottom: 1px solid var(--border); color: var(--text); } .results-table tbody tr:hover { background: var(--bg-sunken); } /* ---- stats ---------------------------------------------------------- */ .stat-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); } .stat-value { font-weight: 700; letter-spacing: -.02em; color: var(--text); } .stat-label { color: var(--text-muted); font-size: 11px; } /* ---- misc ----------------------------------------------------------- */ .badge { border-radius: 999px; font-weight: 600; font-size: 11px; padding: 2px 9px; } .empty-state { color: var(--text-muted); } .empty-state h3 { color: var(--text); font-weight: 600; } code { background: var(--bg-sunken); border-radius: 4px; padding: 1px 5px; } hr { border: 0; border-top: 1px solid var(--border); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }