:root{
  --bg:#0e1320; --panel:#161d2e; --panel2:#1d263a; --line:#27324b;
  --ink:#e8edf7; --muted:#8a98b5; --dim:#6b7794;
  --good:#27c281; --ok:#f0b429; --bad:#f0506e; --accent:#3b82f6;
  --good-bg:rgba(39,194,129,.14); --ok-bg:rgba(240,180,41,.14); --bad-bg:rgba(240,80,110,.14);
  /* split-bar categories */
  --c-ready:#27c281; --c-call:#3b82f6; --c-deal:#14b8a6; --c-dispo:#f0b429; --c-pause:#f0506e;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- top bar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;}
.title{display:flex; align-items:baseline; gap:12px}
.title h1{font-size:22px; margin:0; letter-spacing:.3px}
.title .sub{color:var(--muted); font-size:14px}
.dot{width:11px; height:11px; border-radius:50%; background:var(--dim); align-self:center; transition:background .3s}
.dot.on{background:var(--good); box-shadow:0 0 0 4px var(--good-bg)}
.dot.stale{background:var(--bad); box-shadow:0 0 0 4px var(--bad-bg)}
.topright{display:flex; align-items:center; gap:16px}
.dateform{display:flex; align-items:center; gap:6px}
input[type=date],input[type=time]{background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:13px; color-scheme:dark;}
.ghost{background:var(--panel2); color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; text-decoration:none}
.ghost:hover{color:var(--ink); border-color:var(--accent)}
.gear{white-space:nowrap}
.clock{font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; letter-spacing:.5px}
.updated{color:var(--muted); font-size:12px; min-width:110px; text-align:right}
.updated.stale{color:var(--bad)}

/* ---- tiles ---- */
.tiles{display:grid; grid-template-columns:1.1fr 1.5fr .9fr .9fr .9fr 1.1fr 1.1fr; gap:12px; padding:18px 22px;}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; min-height:96px; display:flex; flex-direction:column; justify-content:center;}
.tile .k{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.6px}
.tile .v{font-size:38px; font-weight:800; line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums}
.tile.big .v{font-size:46px}
.tile .v small{font-size:18px; font-weight:600; color:var(--muted)}
.tile .x{color:var(--dim); font-size:13px; margin-top:4px}
.tile .v.att.good{color:var(--good)} .tile .v.att.ok{color:var(--ok)} .tile .v.att.bad{color:var(--bad)}
.tile .v.bk.ready{color:var(--c-ready)} .tile .v.bk.oncall{color:var(--c-call)}
.tile .v.bk.deal{color:var(--c-deal)} .tile .v.bk.unavail{color:var(--bad)}
.tile .v.latev{color:var(--bad)} .tile .v.latev.zero{color:var(--good)}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; margin-right:6px}
.pill.call{background:rgba(59,130,246,.18); color:#7ab0ff}
.pill.pause{background:var(--bad-bg); color:var(--bad)}
.pill.wait{background:var(--good-bg); color:var(--good)}
.pill.off{background:rgba(138,152,181,.16); color:var(--muted)}

/* ---- table ---- */
.wrap{padding:0 22px 44px; overflow-x:auto}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.3px; font-size:15px}
.t-avail{color:var(--c-ready); font-weight:700} .t-call{color:var(--c-call); font-weight:700}
.t-deal{color:var(--c-deal); font-weight:700} .t-unavail{color:var(--bad); font-weight:700}
table.board{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.board th,.board td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
.board th.tl,.board td.tl{text-align:left}
.board thead th{position:sticky; top:64px; background:var(--bg); color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; user-select:none;
  z-index:3; border-bottom:2px solid var(--line);}
.board thead th.nosort{cursor:default}
.board thead th.sess{width:64px}
.board thead th:not(.nosort):hover{color:var(--ink)}
.board thead th.sorted-desc::after{content:" ▾"; color:var(--accent)}
.board thead th.sorted-asc::after{content:" ▴"; color:var(--accent)}
.board th.dim,.board td.dim{color:var(--dim); font-size:14px}
.board tbody tr:hover{background:var(--panel)}
.board tbody tr.offline{opacity:.62}
.board tbody tr.islate{box-shadow:inset 3px 0 0 var(--bad)}

.agent{font-weight:700; font-size:17px}
.agentcode{color:var(--dim); font-size:12px; margin-left:7px; font-weight:500}
.campsub{color:var(--dim); font-size:12px; margin-top:2px}

/* ---- ViciDial status palette ---- */
.vc{display:inline-block; padding:3px 10px; border-radius:6px; font-weight:800; font-size:13px;
  min-width:74px; text-align:center; letter-spacing:.2px}
.vc-wait1{background:#a9d6e8; color:#06283b}      /* waiting <1m  */
.vc-wait2{background:#1f5fe0; color:#fff}          /* waiting 1-5m */
.vc-wait3{background:#0b1f7a; color:#fff}          /* waiting >5m  */
.vc-call1{background:#d9b3e6; color:#2a0e36}      /* on call <1m  */
.vc-call2{background:#e05ce0; color:#2a0e36}      /* on call 1-5m */
.vc-call3{background:#8e24aa; color:#fff}          /* on call >5m  */
.vc-pause1{background:#ece7a6; color:#33300a}     /* paused <1m   */
.vc-pause2{background:#ffe800; color:#33300a}     /* paused 1-5m  */
.vc-pause3{background:#9a9a1f; color:#fff}         /* paused 5-10m */
.vc-pause4{background:#5f7a3a; color:#fff}         /* paused 10-15m*/
.vc-pause5{background:#8a4b2a; color:#fff}         /* paused >15m  */
.vc-dead{background:#111418; color:#fff}
.vc-3way{background:#1a8a1a; color:#fff}
.vc-chat{background:#e8001f; color:#fff}
.vc-email{background:#ff8c00; color:#231400}
.vc-offline{background:transparent; color:var(--dim); border:1px solid var(--line)}
.vc-off{background:transparent; color:var(--muted); border:1px dashed var(--dim); font-weight:700}
.board tbody tr.dayoff{opacity:.4}
.board tbody tr.dayoff:hover{opacity:.7; background:var(--panel)}
.pcode{color:var(--ok); font-size:12px; margin-left:7px; font-weight:700}
.statetime{color:var(--dim); font-size:12px; margin-left:8px; font-variant-numeric:tabular-nums}

/* ---- availability cell ---- */
.metric{font-size:18px; font-weight:800; padding:4px 9px; border-radius:8px; display:inline-block; min-width:54px; text-align:center}
.metric.good{background:var(--good-bg); color:var(--good)}
.metric.ok{background:var(--ok-bg); color:var(--ok)}
.metric.bad{background:var(--bad-bg); color:var(--bad)}
.metric.na{background:transparent; color:var(--dim); font-weight:600}
.bkh{display:block; color:var(--dim); font-size:12px; margin-top:3px; font-variant-numeric:tabular-nums}

/* ---- per-session chips ---- */
.chip{position:relative; display:inline-block; min-width:46px; text-align:center;
  padding:4px 8px; border-radius:7px; font-weight:800; font-size:14px}
.chip.good{background:var(--good-bg); color:var(--good)}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.bad{background:var(--bad-bg); color:var(--bad)}
.chip.none{color:var(--dim); background:transparent; font-weight:600}
.chip.future{color:var(--dim); background:transparent}
.chip.live{outline:2px solid var(--accent); outline-offset:1px}
.chip.islate::after{content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px;
  border-radius:50%; background:var(--bad); border:1px solid var(--bg)}

/* ---- late column ---- */
.laten{font-weight:800; font-size:16px}
.laten.bad{color:var(--bad)} .laten.ok{color:var(--good)}
.latesub{display:block; color:var(--dim); font-size:12px; margin-top:2px}

/* ---- split bar ---- */
.barcell{width:240px; min-width:170px}
.bar{display:flex; height:18px; border-radius:6px; overflow:hidden; background:var(--panel2); border:1px solid var(--line)}
.bar .seg{height:100%}
.bar .seg.ready{background:var(--c-ready)} .bar .seg.oncall{background:var(--c-call)}
.bar .seg.deal{background:var(--c-deal)} .bar .seg.dispo{background:var(--c-dispo)} .bar .seg.pause{background:var(--c-pause)}

/* ---- legend ---- */
.legend{color:var(--dim); font-size:12.5px; margin-top:18px; line-height:1.9}
.legend b{color:var(--muted)}
.legend .key{margin:0 4px 0 10px; white-space:nowrap}
.legend .sw{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px}
.legend .sw.ready{background:var(--c-ready)} .legend .sw.oncall{background:var(--c-call)}
.legend .sw.deal{background:var(--c-deal)} .legend .sw.dispo{background:var(--c-dispo)} .legend .sw.pause{background:var(--c-pause)}
.err{color:var(--bad); padding:18px 22px; font-weight:600}

/* ---- wallboard / TV: scale up so it reads across the room ---- */
@media (min-width:1500px){
  body{font-size:20px; overflow:hidden}      /* wallboard: never scroll */
  .topbar{padding:12px 26px}
  .title h1{font-size:30px}
  .title .sub{font-size:17px}
  .clock{font-size:28px}
  .updated{font-size:15px; min-width:150px}
  .tiles{padding:10px 26px; gap:12px; grid-template-columns:1.5fr 1.4fr .85fr .85fr .85fr 1fr 1fr}
  .tile{min-height:0; padding:8px 16px}
  .tile .k{font-size:12px; letter-spacing:.4px}
  .tile .v{font-size:34px; margin-top:1px} .tile.big .v{font-size:42px}
  .tile .x{font-size:12px; margin-top:1px}
  .pill{font-size:11px; padding:2px 7px; margin-right:4px}
  .wrap{padding:0 26px 16px}
  .board thead th{font-size:15px; top:0; padding:8px 16px}
  .board td{padding:6px 16px; line-height:1.05}
  .metric,.mono,.laten,.vc{line-height:1.05}
  .agent{font-size:26px} .agentcode{font-size:15px}
  .vc{font-size:19px; min-width:112px; padding:5px 14px}
  .vc .b-dot{width:11px;height:11px}
  .pcode{font-size:15px}
  .metric{font-size:30px; min-width:84px; padding:5px 14px}
  .mono{font-size:25px}
  .laten{font-size:25px}
  .latesub{font-size:14px}
}
@media (min-width:1900px){
  body{font-size:22px}
  .tile .v{font-size:38px} .tile.big .v{font-size:46px}
  .agent{font-size:30px}
  .metric{font-size:34px; min-width:96px}
  .mono{font-size:29px}
  .laten{font-size:29px}
  .vc{font-size:21px; min-width:124px}
  .board td{padding:7px 18px}
}
/* ---- narrow ---- */
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .barcell,.board td.barcell,.board td.dim,.board th.dim{display:none}
  .clock{display:none}
}

/* ============================ settings page ============================ */
.settings{max-width:980px; margin:0 auto; padding:24px 22px 60px}
.saved{background:var(--good-bg); color:var(--good); border:1px solid var(--good);
  border-radius:10px; padding:12px 16px; margin-bottom:18px; font-weight:600}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:20px}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.panel-head h2{margin:0; font-size:18px}
.panel-actions{display:flex; gap:8px}
.hint{color:var(--muted); font-size:13px; margin:4px 0 16px}
.hint code{background:var(--panel2); padding:1px 6px; border-radius:5px; color:var(--ink)}
.repgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px}
.rep{display:flex; align-items:center; gap:9px; background:var(--panel2); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; cursor:pointer}
.rep:hover{border-color:var(--accent)}
.rep input{width:17px; height:17px; accent-color:var(--accent)}
.repname{font-weight:600} .repcode{color:var(--dim); font-size:12px; margin-left:auto}
.field{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.field label{font-weight:600; min-width:230px}
.field input[type=text],.field input[type=number]{background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:14px}
.sched{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.schedcol h3{margin:0 0 10px; font-size:15px; color:var(--muted)}
.sessrow{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.sesslbl{width:78px; color:var(--muted); font-size:13px}
.dash{color:var(--dim)}
.formbar{display:flex; align-items:center; gap:14px; margin-top:8px}
.save{background:var(--accent); color:#fff; border:0; border-radius:10px; padding:11px 22px; font-size:15px; font-weight:700; cursor:pointer}
.save:hover{filter:brightness(1.08)}
@media (max-width:760px){ .sched{grid-template-columns:1fr} }