:root{
    --bg:#0A0D13; --panel:#121722; --panel-2:#0E131C;
    --line:#1F2632; --line-soft:#171D28;
    --row-hover:#1A2130;   /* table row hover — see .pf-t tr:hover td */
    --ink:#E7ECF3; --ink-dim:#8B97A8; --ink-faint:#5A6576;
    --brand:#F5A623; --haley:#A78BFA;
    --avail:#22C55E; --oncall:#3B82F6; --ring:#38BDF8;
    --dispo:#A855F7; --away:#F59E0B; --miss:#EF4444; --off:#4B5563;
    --pass:#22C55E; --warn:#F59E0B; --fail:#EF4444;
    --mono:ui-monospace,"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;height:100%;background:#0A0D13}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.35;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;overflow:hidden}
  header.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel-2);flex:0 0 auto}
  .logo{display:flex;align-items:center;gap:10px}
  .logo .mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(150deg,#F5A623,#E8880F);color:#1a1205;font-weight:800;font-size:15px;box-shadow:0 0 0 1px rgba(245,166,35,.35),0 4px 14px rgba(245,166,35,.18)}
  .logo b{font-size:15px} .logo b span{color:var(--brand)}
  .logo small{display:block;color:var(--ink-faint);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;margin-top:1px}
  .tabs{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px;
    overflow-x:auto;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .tab{font-size:12px;font-weight:600;color:var(--ink-dim);padding:6px 13px;border-radius:7px;cursor:pointer;user-select:none;white-space:nowrap}
  .tab.on{background:var(--brand);color:#1a1205}
  .topbar .spacer{flex:1}
  .haley-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#CBBEFB;background:rgba(167,139,250,.09);border:1px solid rgba(167,139,250,.3);padding:4px 10px;border-radius:999px}
  .haley-pill .hm{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;color:#160f2e;background:var(--haley)}
  .haley-pill i{width:6px;height:6px;border-radius:50%;background:var(--haley);animation:pulse 1.5s infinite}
  .clock{font-family:var(--mono);color:var(--ink-dim);font-size:12px;text-align:right}
  .clock b{color:var(--ink);font-size:13px;display:block}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(167,139,250,.5)}70%{box-shadow:0 0 0 6px rgba(167,139,250,0)}100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}}
  @keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
  @keyframes pulseR{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 5px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
  @keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-bottom:1px solid var(--line);flex:0 0 auto}
  .kpi{background:var(--panel-2);padding:8px 13px;flex:1 1 128px;min-width:120px}
  .kpi .lab{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint)}
  .kpi .val{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:2px;line-height:1}
  .kpi .sub{font-size:10px;color:var(--ink-faint);margin-top:3px}
  .kpi.alert .val{color:var(--miss)} .kpi.warn .val{color:var(--brand)} .kpi.good .val{color:var(--avail)} .kpi.haleyk .val{color:var(--haley)}
  /* phone: header collapses, tabs scroll — nothing crowds */
  @media (max-width:760px){
    .topbar{gap:9px;padding:8px 10px}
    .topbar .logo small{display:none}
    .topbar .logo{flex:0 0 auto}
    .tabs{flex:1 1 auto}
    .tabs .tab{padding:7px 11px;font-size:11.5px}
  }

/* ===== chromeless mode (owner 2026-07-26): Performance + Dialer Health hide
   the whole top bar (logo · nav pills · Haley pill · clock) and Perf's
   date/export/print row. #chromeBack is the only way home. ===== */
body.chromeless header.topbar{display:none}
body.chromeless #pfDateRow{display:none}
#chromeBack{display:none;position:fixed;top:10px;left:12px;z-index:60;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:14px;padding:4px 10px;background:var(--panel);opacity:.8}
#chromeBack:hover{opacity:1;color:var(--ink);border-color:var(--brand)}
body.chromeless #chromeBack{display:inline-flex}
/* clear the fixed pill so it never sits on the view's own heading */
body.chromeless #viewDialer,body.chromeless #viewPerf{padding-top:36px}