/* ============ CONTROL ROOM — dashboard ============ */

body.dash{ overflow:hidden; }
.app{ display:grid; grid-template-columns:246px 1fr; height:100vh; position:relative; z-index:2; }

/* ---------- rail ---------- */
.rail{
  border-right:1px solid var(--line); background:rgba(10,12,14,.82);
  backdrop-filter:blur(14px); display:flex; flex-direction:column; overflow:hidden;
}
.rail-top{ padding:15px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.rail-brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.agency-logo{
  width:27px; height:27px; border-radius:6px; display:grid; place-items:center; flex-shrink:0;
  font-family:var(--mono); font-weight:600; font-size:12.5px; color:#07080A;
  transition:background .5s var(--ease);
}
.agency-name{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .5s var(--ease); }
.agency-sub{ font-family:var(--mono); font-size:9.5px; color:var(--ink-4); letter-spacing:.1em; margin-top:1px; }

.rail-sec{ padding:15px 16px 7px; display:flex; align-items:center; }
.rail-sec .tag{ font-size:9.5px; }
.rail-sec .count{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-4); }

.clients{ overflow-y:auto; flex:1; padding:0 9px 12px; }
.clients::-webkit-scrollbar{ width:8px }
.clients::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:4px }

.cli{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r);
  cursor:pointer; transition:background .16s var(--ease); position:relative; margin-bottom:1px;
}
.cli:hover{ background:rgba(255,255,255,.035); }
.cli.on{ background:rgba(255,255,255,.06); }
.cli.on::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px;
  background:var(--audio); border-radius:2px; box-shadow:0 0 10px var(--audio);
}
.cli .tl{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.cli .info{ min-width:0; flex:1; }
.cli .n{ font-size:13px; font-weight:450; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli .s{ font-family:var(--mono); font-size:9.5px; color:var(--ink-4); margin-top:1px; }
.cli .d{ font-family:var(--mono); font-size:11px; flex-shrink:0; }

.rail-foot{ padding:12px 16px; border-top:1px solid var(--line); }
.wl-toggle{ display:flex; align-items:center; gap:7px; }
.wl-toggle .tag{ font-size:9px; }
.wl-dots{ display:flex; gap:5px; margin-left:auto; }
.wl-dot{ width:15px; height:15px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.2); transition:transform .18s var(--ease); }
.wl-dot:hover{ transform:scale(1.2) }
.wl-dot.on{ box-shadow:0 0 0 1.5px var(--bg), 0 0 0 3px currentColor }

/* ---------- main ---------- */
.main{ overflow-y:auto; display:flex; flex-direction:column; }
.main::-webkit-scrollbar{ width:10px }
.main::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:5px }

.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:0 24px; height:60px; border-bottom:1px solid var(--line);
  background:rgba(7,8,10,.88); backdrop-filter:blur(16px);
}
.topbar h1{ font-family:var(--serif); font-size:25px; letter-spacing:-.02em; }
.topbar .vert{ font-family:var(--mono); font-size:10px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.seg{ display:flex; border:1px solid var(--line-mid); border-radius:var(--r); overflow:hidden; }
.seg button{
  background:transparent; border:none; color:var(--ink-3); cursor:pointer;
  font-family:var(--mono); font-size:11px; padding:7px 13px; letter-spacing:.06em;
  transition:all .18s var(--ease); border-right:1px solid var(--line);
}
.seg button:last-child{ border-right:none }
.seg button:hover{ color:var(--ink); background:rgba(255,255,255,.04) }
.seg button.on{ background:var(--ink); color:#07080A; font-weight:600 }

.live-pill{
  display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--tally); border:1px solid rgba(255,59,48,.3);
  padding:6px 10px; border-radius:100px; background:rgba(255,59,48,.06);
}
.live-pill i{ width:5px; height:5px; border-radius:50%; background:var(--tally); animation:tally 2.6s infinite }

/* ---------- content ---------- */
.content{ padding:22px 24px 60px; display:flex; flex-direction:column; gap:14px; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:16px 17px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s var(--ease);
}
.kpi:hover{ border-color:var(--line-mid); transform:translateY(-2px) }
.kpi .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.kpi .v{ font-family:var(--mono); font-size:27px; margin-top:9px; letter-spacing:-.025em; line-height:1 }
.kpi .c{ display:flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--mono); font-size:11px }
.kpi .spark{ position:absolute; right:0; bottom:0; width:88px; height:34px; opacity:.5 }

.cards{ display:grid; grid-template-columns:1.62fr 1fr; gap:14px }
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:17px 18px 15px; display:flex; flex-direction:column; min-height:0;
}
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:15px }
.card-head .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.card-head .r{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-4) }

/* chart */
.chart-wrap{ position:relative; flex:1 }
.chart{ width:100%; height:210px; display:block; overflow:visible; cursor:crosshair }
.chart .gl{ stroke:var(--line); stroke-width:1 }
.chart .xl{ font-family:var(--mono); font-size:9px; fill:var(--ink-4); letter-spacing:.06em }
.chart .yl{ font-family:var(--mono); font-size:9px; fill:var(--ink-4) }
.chart path.ln{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.crosshair{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .12s }
.cdot{ opacity:0; transition:opacity .12s }
.tip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-118%);
  background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:8px 11px; font-family:var(--mono); font-size:11px; white-space:nowrap;
  transition:opacity .13s var(--ease); z-index:9; box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.tip .d{ color:var(--ink-4); font-size:9.5px; letter-spacing:.08em; margin-bottom:4px }
.tip .row{ display:flex; align-items:center; gap:7px; margin-top:3px }
.tip .row i{ width:7px; height:2px; border-radius:1px }

.legend{ display:flex; gap:16px; margin-top:10px; flex-wrap:wrap }
.lg{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--ink-2); cursor:pointer; transition:opacity .2s }
.lg i{ width:10px; height:2.5px; border-radius:2px }
.lg.off{ opacity:.32 }

/* channel mix bars */
.mixrow{ display:flex; align-items:center; gap:11px; padding:8px 0 }
.mixrow .nm{ font-size:12.5px; width:78px; flex-shrink:0 }
.mixrow .tr{ display:block; flex:1; height:6px; background:var(--surface-3); border-radius:3px; overflow:hidden }
.mixrow .fl{ display:block; height:100%; border-radius:3px; width:0; transition:width .9s var(--ease-out) }
.mixrow .vl{ font-family:var(--mono); font-size:11.5px; width:52px; text-align:right; flex-shrink:0 }

/* table */
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px }
.tbl th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-4); font-weight:500;
  padding:0 0 9px; border-bottom:1px solid var(--line);
}
.tbl td{ padding:9px 0; border-bottom:1px solid var(--line); }
.tbl tr:last-child td{ border-bottom:none }
.tbl tbody tr{ transition:background .15s }
.tbl tbody tr:hover{ background:rgba(255,255,255,.022) }
.tbl .num{ font-family:var(--mono); text-align:right }
.tbl .ch{ display:flex; align-items:center; gap:8px }
.tbl .ch i{ width:7px; height:7px; border-radius:2px; flex-shrink:0 }

/* audio panel */
.audio-card{ border-color:rgba(94,233,213,.22); background:linear-gradient(168deg, rgba(94,233,213,.05), var(--surface) 58%) }
.hold{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r);
  background:rgba(94,233,213,.07); border:1px solid rgba(94,233,213,.2); margin-bottom:14px;
}
.hold .big{ font-family:var(--mono); font-size:21px; color:var(--audio); letter-spacing:-.02em }
.hold .lbl{ font-size:11.5px; color:var(--ink-2); line-height:1.4 }

.fade-swap{ animation:fadeSwap .42s var(--ease-out) }
@keyframes fadeSwap{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }

@media (max-width:1080px){
  .kpis{ grid-template-columns:repeat(2,1fr) }
  .cards,.cards-2{ grid-template-columns:1fr }
}
@media (max-width:820px){
  .app{ grid-template-columns:1fr }
  .rail{ display:none }
}