/* Alba Demo Skin — tema scuro da pannello live di bookmaker.
   Nessun marchio di operatori reali: e' una demo interna. Il "look" e' la sola cosa ispirata
   ai pannelli live in circolazione (nav sport a sinistra, lista eventi densa, player a destra). */

:root{
  --bg:#080d18;
  --bg2:#0d1424;
  --panel:#111a2c;
  --panel2:#0b1220;
  --line:#1e2b45;
  --line2:#28395c;
  --ink:#e9eefa;
  --mut:#93a9cc;
  --mut2:#5f739a;
  --acc:#37a9ff;
  --acc2:#1f8ae0;
  --ok:#31c46f;
  --warn:#e8a83a;
  --bad:#e05a5a;
  --iris:#b07be0;
  --row:56px;
}

*{box-sizing:border-box}
/* [hidden] deve vincere sempre: piu' di un blocco qui dentro e' display:flex/grid, che altrimenti
   lo scavalca e mostra elementi che il codice crede nascosti. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
.spacer{flex:1}

/* ------------------------------------------------------------------ topbar */
.topbar{
  display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:linear-gradient(180deg,#13203a,#0b1220);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:10px}
.brand .mark{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:conic-gradient(from 210deg,var(--acc),#7be0d0,var(--acc));
  box-shadow:0 0 18px rgba(55,169,255,.35);
}
.brand-name{font-weight:800; letter-spacing:.4px; font-size:15px}
.brand-sub{font-size:11px; color:var(--mut2)}

.tenant-box{display:flex; align-items:center; gap:8px; min-width:0}
.tenant-box label{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--mut2)}
.tenant-box select{
  background:var(--panel2); border:1px solid var(--line2); border-radius:8px;
  padding:7px 10px; min-width:210px; font-weight:600;
}
.tenant-note{font-size:11px; color:var(--mut2); max-width:38ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* chi sei / amministrazione / esci */
.me{display:flex; align-items:center; gap:8px; flex:none}
.me-nome{font-size:11px; color:var(--mut2); max-width:34ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
a.btn{text-decoration:none; display:inline-block}

.counters{display:flex; gap:8px; flex-wrap:wrap}
.cnt{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:4px 10px; text-align:center; min-width:64px;
}
.cnt b{display:block; font-size:15px; line-height:1.15}
.cnt span{font-size:10px; color:var(--mut2); text-transform:uppercase; letter-spacing:.5px}
.cnt.hi b{color:var(--acc)}
.cnt.ok b{color:var(--ok)}

.btn{
  background:var(--acc); border:0; color:#04121f; font-weight:700;
  padding:8px 14px; border-radius:8px; cursor:pointer;
}
.btn:hover{background:var(--acc2); color:#fff}
.btn.ghost{background:transparent; border:1px solid var(--line2); color:var(--mut); font-weight:600}
.btn.ghost:hover{border-color:var(--acc); color:var(--ink); background:transparent}
.btn.mini{padding:4px 9px; font-size:12px}

/* ------------------------------------------------------------------ layout */
.layout{
  display:grid; grid-template-columns:210px minmax(0,1fr) 430px;
  gap:0; align-items:start; min-height:calc(100vh - 52px);
}

/* ------------------------------------------------------------------ sidebar */
.sidebar{
  border-right:1px solid var(--line); background:var(--bg2);
  padding:12px 0 24px; position:sticky; top:52px; max-height:calc(100vh - 52px); overflow:auto;
}
.side-title{
  font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--mut2);
  padding:8px 14px 6px;
}
.sportlist{list-style:none; margin:0; padding:0}
.sportlist li{
  display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer;
  border-left:3px solid transparent; font-size:13px; color:var(--mut);
}
.sportlist li:hover{background:#101a2e; color:var(--ink)}
.sportlist li.on{background:#101c33; color:var(--ink); border-left-color:var(--acc); font-weight:600}
.sportlist li .n{
  margin-left:auto; font-size:11px; color:var(--mut2);
  background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:0 7px;
}
.sportlist.small li{font-size:12px; padding:5px 14px}
.side-foot{padding:14px; font-size:11px; color:var(--mut2); line-height:1.5; border-top:1px solid var(--line); margin-top:12px}

/* ------------------------------------------------------------------ toolbar */
.content{padding:12px 16px 40px; min-width:0}
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.toolbar input[type=search],.toolbar select{
  background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:8px 10px;
}
.toolbar input[type=search]{min-width:240px}
.chk{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); cursor:pointer}
.hint{font-size:11px; color:var(--mut2)}

.stato{
  padding:26px; text-align:center; color:var(--mut2);
  border:1px dashed var(--line2); border-radius:12px; margin-bottom:12px;
}
.stato.err{color:#ffc9c9; border-color:#5a2a2a; background:#1d1013; text-align:left}
.stato.err code{color:#ff9f9f; font-family:ui-monospace,Consolas,monospace}
.stato[hidden]{display:none}

/* ------------------------------------------------------------------ lista eventi */
.gruppo{margin:0 0 16px}
.gruppo h2{
  font-size:12px; margin:0 0 6px; color:var(--acc); text-transform:uppercase; letter-spacing:.8px;
  display:flex; align-items:center; gap:8px;
}
.gruppo h2 .n{color:var(--mut2); font-weight:600; letter-spacing:0; text-transform:none}

.riga{
  display:grid; grid-template-columns:64px minmax(0,1fr) 190px auto 44px;
  align-items:center; gap:10px; min-height:var(--row);
  padding:6px 10px; border:1px solid var(--line); border-top:0;
  background:var(--panel);
}
.riga:first-of-type{border-top:1px solid var(--line); border-radius:10px 10px 0 0}
.riga:last-of-type{border-radius:0 0 10px 10px}
.riga:hover{background:#16223a}
.riga.sel{background:#14243f; box-shadow:inset 3px 0 0 var(--acc)}

.ora{font-variant-numeric:tabular-nums; text-align:center}
.ora .hh{font-weight:700; font-size:14px}
.ora .gg{display:block; font-size:10px; color:var(--mut2)}
.ora .live{
  display:inline-block; font-size:10px; font-weight:800; color:#04121f; background:var(--ok);
  border-radius:4px; padding:0 5px; letter-spacing:.5px;
}
.ora .soon{display:inline-block; font-size:10px; font-weight:700; color:var(--warn)}

.squadre{min-width:0}
.squadre .t{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.squadre .t.b{font-weight:600}
.squadre .single{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.meta{font-size:11px; color:var(--mut2); min-width:0}
.meta .sp{color:var(--mut); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta .lg{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta .lg::before{content:"◦ "; color:var(--acc)}

.tags{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.tag{
  font-size:10px; border:1px solid var(--line2); border-radius:5px; padding:1px 6px;
  color:var(--mut2); white-space:nowrap;
}
.tag.map-pieno{color:var(--ok); border-color:#1e4a33}
.tag.map-parziale{color:var(--warn); border-color:#4a3a1e}
.tag.map-nessuno{color:var(--bad); border-color:#4a2020}
.tag.iris{color:var(--iris); border-color:#3d2b52}
.tag.xsport{color:#7bc7e0; border-color:#1e3d4a}

.cam{
  width:36px; height:30px; border-radius:7px; border:1px solid var(--line2);
  background:var(--panel2); cursor:pointer; display:grid; place-items:center; padding:0;
}
.cam:hover{border-color:var(--acc); background:#0f2237}
.cam svg{width:19px; height:19px; fill:var(--acc)}
.cam[disabled]{opacity:.28; cursor:not-allowed}
.cam[disabled] svg{fill:var(--mut2)}
.cam.busy svg{fill:var(--warn); animation:pulsa 1s infinite}
@keyframes pulsa{50%{opacity:.35}}

/* ------------------------------------------------------------------ player */
.player{
  border-left:1px solid var(--line); background:var(--bg2);
  position:sticky; top:52px; height:calc(100vh - 52px); display:flex; flex-direction:column;
}
.pl-head{display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--line)}
.pl-state{font-size:12px; color:var(--mut); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut2);flex:none}
.dot.attesa{background:var(--warn); animation:battito 1.5s infinite}
.dot.live{background:var(--ok)}
.dot.err{background:var(--bad)}
@keyframes battito{0%{box-shadow:0 0 0 0 rgba(232,168,58,.6)}70%{box-shadow:0 0 0 8px rgba(232,168,58,0)}100%{box-shadow:0 0 0 0 rgba(232,168,58,0)}}

.stage{position:relative; background:#000; aspect-ratio:16/9; width:100%; flex:none}
.stage video,.stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.stage video{object-fit:cover}
.ov{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; text-align:center; padding:16px; pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.8); background:radial-gradient(circle at 50% 45%,rgba(20,40,70,.55),rgba(0,0,0,.85))}
.ov[hidden]{display:none}
.ov-icon{width:34px;height:34px;border-radius:50%;border:2px solid var(--mut2);opacity:.5}
.ov-t{font-weight:700; font-size:14px}
.ov-s{font-size:12px; color:var(--mut)}

.pl-meta{padding:9px 14px; font-size:11px; color:var(--mut2); border-bottom:1px solid var(--line);
  line-height:1.6; word-break:break-word}
.pl-meta b{color:var(--mut); font-weight:600}
.pl-log{
  flex:1; min-height:90px; overflow:auto; padding:9px 14px; font-size:11px; line-height:1.55;
  font-family:ui-monospace,Consolas,"Courier New",monospace; color:var(--mut2); white-space:pre-wrap;
}
.pl-log .ko{color:#ff9f9f}
.pl-log .si{color:var(--ok)}
.pl-log .at{color:var(--warn)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1200px){
  .layout{grid-template-columns:180px minmax(0,1fr)}
  .player{
    grid-column:1/-1; position:static; height:auto;
    border-left:0; border-top:1px solid var(--line);
  }
  .stage{max-width:820px; margin:0 auto}
}
@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line)}
  .sportlist{display:flex; flex-wrap:wrap; gap:4px; padding:0 10px}
  .sportlist li{border-left:0; border:1px solid var(--line); border-radius:20px; padding:4px 10px}
  .sportlist li.on{border-color:var(--acc)}
  .riga{grid-template-columns:56px minmax(0,1fr) 40px; row-gap:2px}
  .riga .meta,.riga .tags{grid-column:1/3; justify-content:flex-start}
  .topbar{flex-wrap:wrap}
}