/* TrackPilot — brand theme from the logo: ink black + signal red (#E8000A), white.
   Dark by default; light via [data-theme=light]. Money/counts use tabular numerals.
   Legacy aliases (--fb/--electric/--orange) kept so older rules keep working. */
:root {
  --bg:#0b0b0d; --surface:#15151a; --surface2:#1c1c23; --line:#2a2a33;
  --fg:#f2f2f4; --muted:#9a9aa6;
  --accent:#e8000a; --accent2:#ff4d55; --accent-soft:rgba(232,0,10,.16);
  --good:#2fbf71; --bad:#ff6b81; --warn:#f5c451;
  --navy:var(--bg); --fb:var(--accent); --electric:var(--accent2); --orange:var(--accent);
}
:root[data-theme="light"] {
  --bg:#f4f4f6; --surface:#ffffff; --surface2:#f0f0f3; --line:#dfdfe6;
  --fg:#111113; --muted:#6a6a76;
  --accent:#e8000a; --accent2:#c40009; --accent-soft:rgba(232,0,10,.10);
  --good:#1f9d63; --bad:#d6334a; --warn:#b8860b;
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; background:var(--navy); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--electric); text-decoration:none; } a:hover { text-decoration:underline; }
h2 { font-size:.95rem; font-weight:600; margin:0; letter-spacing:.02em; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; background:var(--surface2); padding:.05rem .35rem; border-radius:5px; }
.muted { color:var(--muted); font-weight:400; } .small { font-size:.8rem; } .bad { color:var(--bad); }
.inline { display:inline; }

.btn { cursor:pointer; border:0; border-radius:8px; padding:.45rem .8rem; font-weight:600; background:var(--fb); color:#fff; font-size:.85rem; display:inline-block; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--muted); }
.btn.ghost.danger { border-color:rgba(240,97,109,.5); color:var(--bad); }
.btn:hover { filter:brightness(1.08); text-decoration:none; }
.mini-btn { padding:.25rem .55rem; font-size:.72rem; }

/* ---- Login ---- */
.login-body { display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(232,0,10,.12), transparent 60%), var(--navy); }
.login-card { background:var(--surface); padding:2rem 2.25rem; border:1px solid var(--line); border-radius:16px;
  width:min(94vw,440px); box-shadow:0 20px 60px rgba(0,0,0,.45); border-top:3px solid var(--accent); text-align:center; }
.login-logo { display:block; margin:0 auto .9rem; background:#fff; border-radius:14px; padding:.9rem 1.2rem; width:min(100%,340px); }
.login-logo img { display:block; width:100%; height:auto; }
.mark { color:var(--accent); font-size:.8em; }
.brand-tile { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:#fff; border-radius:9px; border:1px solid var(--line); vertical-align:middle; margin-right:.45rem; }
.brand-tile img { width:26px; height:26px; object-fit:contain; }
.wordmark { font-weight:800; letter-spacing:-.01em; font-size:1.1rem; } .wordmark b { color:var(--accent); font-weight:800; }
.login-card label { display:block; margin-bottom:.85rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:left; }
.login-card input { width:100%; margin-top:.3rem; padding:.62rem .7rem; background:var(--navy); border:1px solid var(--line); border-radius:9px; color:var(--fg); font-size:1rem; }
.login-card input:focus { outline:none; border-color:var(--electric); box-shadow:0 0 0 3px var(--accent-soft); }
.login-card button { width:100%; margin-top:.5rem; padding:.7rem; background:var(--fb); color:#fff; border:0; border-radius:9px; font-weight:600; font-size:.95rem; cursor:pointer; }
.error { color:var(--bad); font-size:.85rem; margin:0 0 1rem; text-align:center; }
.enrol { text-align:center; margin-bottom:1rem; }
.enrol .qr { display:block; margin:.5rem auto; background:#fff; border-radius:10px; padding:6px; }
.enrol details { margin-top:.4rem; color:var(--muted); } .enrol summary { cursor:pointer; }
.secret { display:inline-block; margin-top:.4rem; letter-spacing:.1em; user-select:all; }

/* ---- Top bar / nav ---- */
.topbar { display:flex; align-items:center; gap:1rem; padding:.55rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar .brand { font-weight:800; font-size:1.05rem; color:var(--fg); letter-spacing:.02em; }
.topbar .brand:hover { text-decoration:none; }
.nav { display:flex; gap:.2rem; }
.nav a, .nav .nav-soon { padding:.3rem .7rem; border-radius:8px; color:var(--muted); font-weight:600; font-size:.85rem; }
.nav a.active { background:var(--surface2); color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent); }
.nav a:hover { color:var(--fg); text-decoration:none; }
.nav .nav-soon { opacity:.45; cursor:default; }
.topbar .spacer { flex:1; }
.topbar .whoami { color:var(--muted); font-size:.8rem; }

/* ---- Layout ---- */
.wrap { padding:1.1rem 1.25rem; max-width:1440px; margin:0 auto; display:flex; flex-direction:column; gap:1.1rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; min-width:0; }
.panel.narrow { max-width:520px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; flex-wrap:wrap; }
.cols { display:grid; grid-template-columns:1.6fr 1fr; gap:1.1rem; min-width:0; }
@media (max-width:960px){ .cols { grid-template-columns:1fr; } }
.foot { text-align:center; padding:1rem; font-size:.75rem; }

/* ---- Tabs ---- */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--line); padding:0 .25rem; }
.tabs a { padding:.55rem .9rem; color:var(--muted); font-weight:600; font-size:.85rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a.active { color:var(--fg); border-bottom-color:var(--orange); }
.tabs a:hover { color:var(--fg); text-decoration:none; }

/* ---- KPIs ---- */
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
@media (max-width:1100px){ .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:.7rem .85rem; color:var(--fg); }
.kpi:hover { border-color:var(--electric); text-decoration:none; }
.kpi-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.kpi-today { font-size:1.3rem; font-weight:700; margin:.1rem 0; font-variant-numeric:tabular-nums; }
.kpi-sub { margin-top:.3rem; font-size:.68rem; color:var(--muted); }

/* ---- Tables ---- */
.tablewrap { overflow-x:auto; }
table.grid { width:100%; border-collapse:collapse; font-size:.82rem; }
.grid th, .grid td { padding:.45rem .55rem; text-align:left; vertical-align:middle; }
.grid thead th { color:var(--muted); font-weight:600; font-size:.66rem; text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap; }
.grid td.num, .grid th.num { text-align:right; font-variant-numeric:tabular-nums; }
.grid tbody tr:nth-child(odd) { background:var(--surface2); }
.grid tr.archived td { opacity:.55; }
.actions-cell { white-space:nowrap; text-align:right; }
.actions-cell form { display:inline; }
.actions-cell .btn { margin-left:.25rem; }
.ua { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.swatch { display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid var(--line); vertical-align:middle; }
.logo-sm { height:18px; width:18px; object-fit:contain; border-radius:4px; background:#fff; margin-right:.35rem; vertical-align:middle; }

/* ---- Badges ---- */
.badge { display:inline-block; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:.12rem .45rem; border-radius:6px; background:var(--surface2); border:1px solid var(--line); color:var(--muted); vertical-align:middle; }
.badge.good { color:var(--good); border-color:rgba(49,196,141,.5); }
.badge.warn { color:var(--warn); border-color:rgba(255,207,92,.45); }
.badge.bad { color:var(--bad); border-color:rgba(240,97,109,.5); }

/* ---- Forms ---- */
.form label { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.form label .muted { text-transform:none; letter-spacing:0; }
.form input, .form select { padding:.5rem .6rem; background:var(--navy); color:var(--fg); border:1px solid var(--line); border-radius:8px; font-size:.9rem; text-transform:none; letter-spacing:0; }
.form input:focus, .form select:focus { outline:none; border-color:var(--electric); box-shadow:0 0 0 3px var(--accent-soft); }
.form .actions { display:flex; gap:.5rem; margin-top:.25rem; }
.hint { margin-top:.9rem; padding:.6rem .75rem; border-left:3px solid var(--orange); background:var(--surface2); border-radius:0 8px 8px 0; color:var(--muted); }

/* ---- Flash ---- */
.flashes { display:flex; flex-direction:column; gap:.5rem; }
.flash { padding:.55rem .8rem; border-radius:9px; border:1px solid var(--line); background:var(--surface); font-size:.85rem; }
.flash.ok { border-color:rgba(49,196,141,.5); }
.flash.bad { border-color:rgba(240,97,109,.6); color:var(--bad); }
.flash.warn { border-color:rgba(255,207,92,.5); }
.flash.secret { border-color:var(--orange); background:var(--surface2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; user-select:all; }

/* ---- Links (Phase 2) ---- */
.filters-inline { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem; }
.mini { padding:.45rem .6rem; background:var(--navy); color:var(--fg); border:1px solid var(--line); border-radius:8px; font-size:.85rem; }
.mini.wide { min-width:280px; flex:1; }
.copyable { cursor:copy; }
.copyable:hover { border:1px solid var(--electric); }
.row-actions { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem .9rem; }
@media (max-width:900px){ .meta-grid { grid-template-columns:repeat(2,1fr); } }
.meta-grid .k, .url-block .k { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.meta-grid .span2, .form .span2 { grid-column:span 2; }
.url-block { margin-bottom:.8rem; }
.url-row { display:flex; gap:.5rem; align-items:center; margin-top:.3rem; }
.url-row code { flex:1; padding:.45rem .6rem; overflow-x:auto; white-space:nowrap; font-size:.8rem; background:var(--navy); border:1px solid var(--line); border-radius:8px; }
.form.two-col { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:760px){ .form.two-col { grid-template-columns:1fr; } .form .span2 { grid-column:auto; } }
.form label.check { flex-direction:row; align-items:center; gap:.5rem; text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--fg); }
.form label.check input { width:auto; }
.panel.narrow-wide { max-width:980px; }
.copied { background:var(--good) !important; }

/* ---- Snippets (Phase 3) ---- */
pre.snippet { background:var(--navy); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; overflow:auto; font-size:.78rem; line-height:1.45; max-height:420px; }
pre.snippet code { background:transparent; padding:0; }

/* ---- Dashboard (Phase 4) ---- */
.filters { display:flex; flex-wrap:wrap; gap:.7rem; align-items:end; padding:.8rem 1rem; background:var(--surface2); border:1px solid var(--line); border-radius:14px; }
.filters label { display:flex; flex-direction:column; gap:.25rem; font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.filters select, .filters input { padding:.45rem .6rem; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:8px; font-size:.85rem; min-width:120px; }
.filters .period { align-self:center; margin-left:auto; }
.hidden { display:none !important; }
.kpis.kpis-8 { grid-template-columns:repeat(8,1fr); }
@media (max-width:1300px){ .kpis.kpis-8 { grid-template-columns:repeat(4,1fr); } }
@media (max-width:620px){ .kpis.kpis-8 { grid-template-columns:repeat(2,1fr); } }
.charts { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:1100px){ .charts { grid-template-columns:1fr; } }
.chart { position:relative; height:190px; }
.cols.equal { grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .cols.equal { grid-template-columns:1fr; } }
table.grid.compact { font-size:.78rem; }
.grid td.good { color:var(--good); } .grid td.bad { color:var(--bad); }
th.sorted { color:var(--fg) !important; }

/* ---- Phase 7: saved views, chips ---- */
.saved-views { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:.2rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.15rem .3rem .15rem .7rem; }
.chip a { color:var(--fg); } .chip .x { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 .3rem; }
.chip .x:hover { color:var(--bad); }
.save-view { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
h2 .inline select { margin-left:.4rem; padding:.2rem .4rem; font-size:.75rem; }