/* Fabrizio stage dashboard.
   Projected on a summit stage: dark, high contrast, oversized type, no CDN fonts (strict
   origin — everything here is local or a system font stack). */

:root{
  --bg:#0a0d12;
  --panel:#12171f;
  --panel-2:#171e28;
  --line:#242e3b;
  --text:#eef3f9;
  --muted:#8b9bb0;
  --accent:#4ea1ff;
  --ok:#2fd07a;
  --warn:#ffc14d;
  --bad:#ff5f6d;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:20px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 28px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
}
.brand{display:flex;align-items:center;gap:16px}
.brand h1{
  margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:14px;
}
.brand .sub{font-size:19px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 0 rgba(47,208,122,.55);
  animation:pulse 2.5s ease-out infinite;
}
.dot.err{background:var(--bad);box-shadow:none;animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(47,208,122,.55)}
  70%{box-shadow:0 0 0 14px rgba(47,208,122,0)}
  100%{box-shadow:0 0 0 0 rgba(47,208,122,0)}
}
.status{display:flex;align-items:center;gap:22px;font-size:18px}
.counts{color:var(--muted)}
.clock{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.stale{
  color:#1a1205;background:var(--warn);
  padding:6px 14px;border-radius:999px;font-weight:600;font-size:16px;
}

main{padding:22px 28px 40px}

/* ---------- table ---------- */
.tablewrap{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow-x:auto;
}
table{width:100%;border-collapse:collapse;min-width:1280px}
thead th{
  text-align:left;
  font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
  padding:16px 18px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
  position:sticky;top:78px;z-index:2;
  white-space:nowrap;
}
tbody td{
  padding:18px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:20px;
}
tbody tr{cursor:pointer}
tbody tr:hover{background:#1b2430}
tbody tr:last-child td{border-bottom:none}

.c-time,.c-phone{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-time{font-size:18px;color:var(--muted)}
.c-name{font-weight:700;white-space:nowrap}
.c-problem,.c-coffee,.c-loc{max-width:22ch}
.unknown{color:var(--muted);font-weight:500;font-style:italic}
.dash{color:#4b5a6d}

/* row state: rejected must read differently from completed at 10 metres */
tr.st-in_progress{box-shadow:inset 5px 0 0 var(--accent)}
tr.st-completed{box-shadow:inset 5px 0 0 var(--ok)}
tr.st-rejected_not_friend{box-shadow:inset 5px 0 0 var(--bad);background:rgba(255,95,109,.09)}
tr.st-rejected_not_friend:hover{background:rgba(255,95,109,.16)}
tr.st-rejected_not_friend td{color:#ffc9ce}

.badge{
  display:inline-block;padding:5px 13px;border-radius:999px;
  font-size:16px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;
}
.b-blue{background:rgba(78,161,255,.16);color:#9ecbff;border-color:rgba(78,161,255,.4)}
.b-green{background:rgba(47,208,122,.16);color:#86ecb4;border-color:rgba(47,208,122,.4)}
.b-red{background:rgba(255,95,109,.18);color:#ffb0b7;border-color:rgba(255,95,109,.45)}
.b-amber{background:rgba(255,193,77,.16);color:#ffd894;border-color:rgba(255,193,77,.4)}
.b-grey{background:#1f2835;color:var(--muted);border-color:var(--line)}

.placeholder{padding:64px 24px;text-align:center;color:var(--muted);font-size:24px}
.placeholder.err{color:#ffb0b7}

.pager{display:flex;align-items:center;gap:18px;margin-top:20px;color:var(--muted);font-size:18px}
.pager button,.back{
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;
  padding:10px 18px;font-size:18px;font-family:inherit;cursor:pointer;
}
.pager button:hover:not(:disabled),.back:hover{background:#222c3a;border-color:#38465a}
.pager button:disabled{opacity:.35;cursor:default}

/* ---------- detail ---------- */
#view-detail{max-width:1100px}
.back{margin-bottom:24px}
.detailhead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.detailhead h2{margin:0;font-size:36px;letter-spacing:-.02em}
.chips{display:flex;gap:10px;flex-wrap:wrap}

.facts{
  display:grid;grid-template-columns:auto 1fr;gap:10px 28px;
  margin:24px 0 40px;padding:24px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.facts dt{color:var(--muted);font-size:17px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.facts dd{margin:0;font-size:20px;word-break:break-word}
.facts a{color:var(--accent)}

h3{font-size:24px;margin:0 0 18px}
.timeline{list-style:none;margin:0;padding:0 0 0 30px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 30px 26px}
.timeline li::before{
  content:"";position:absolute;left:-39px;top:8px;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);
}
.timeline li.ev-friend_rejected::before{background:var(--bad)}
.timeline li.ev-call_ended::before{background:var(--ok)}
.timeline .ev-type{font-size:21px;font-weight:700;letter-spacing:-.01em}
.timeline .ev-time{font-family:var(--mono);font-size:16px;color:var(--muted);margin-left:14px;font-weight:400}
.timeline .ev-detail{color:#c4d2e2;font-size:19px;margin-top:4px}