/* Stile condiviso fra la UI di analisi (explorer/census tuning) e il viewer esterno.
   Estratto da analysis/web_ui/templates/explorer.html: unica copia, due consumatori. */
:root{
  /* Palette del marchio, campionata dal logo. */
  --huna-azzurro:#5DBED7;
  --huna-azzurro-scuro:#1A7F9C;
  --huna-viola:#AC72AD;
  --huna-arancio:#F38232;
  --huna-giallo:#FFDC0D;
  --huna-nero:#2E2E2D;
  /* arancio = azione (si nota di piu'), azzurro = stato attivo o selezione.
     Sull'arancio il testo e' bruno scurissimo, non bianco (2.61:1, illeggibile) ne'
     nero neutro: il bruno caldo sta sullo stesso tono dell'arancio e rende 6.44:1. */
  --acc:var(--huna-arancio);
  --acc-hover:#E2701D;
  --acc-testo:#3A1F0A;
  --sel:var(--huna-azzurro);
  --sel-hover:#4AAECA;
  --sel-testo:var(--huna-nero);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#1f2937}
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 14px;border-bottom:2px solid var(--sel);background:#fafbfd}
.topbar h1{margin:0;font-size:16px;flex:0 0 auto}
.topbar a.back{font-size:12px;padding:4px 10px;border:1px solid #dde2ea;border-radius:14px;color:#374151;text-decoration:none;background:#fff}
.topbar a.back:hover{border-color:var(--huna-azzurro-scuro);color:var(--huna-azzurro-scuro)}
.topbar label{font-size:12px;color:#374151;display:flex;align-items:center;gap:4px}
.topbar select,.topbar input{padding:5px 8px;border:1px solid #c5cad3;border-radius:5px;font-size:13px;font-family:inherit;background:#fff}
.topbar input[type=time]{width:92px}
.topbar button{padding:6px 13px;background:var(--acc);color:var(--acc-testo);border:0;border-radius:5px;cursor:pointer;font-weight:600;font-size:13px}
.topbar button:hover{background:var(--acc-hover)}
.topbar button.ghost{background:#fff;color:#374151;border:1px solid #c5cad3}
.topbar .grow{flex:1}
#stats{font-size:11.5px;color:#6b7280}

.wrap{display:flex;height:calc(100vh - 50px);position:relative}
#side{flex:0 0 0;width:0;overflow:hidden;background:#0b0f14;color:#e5e7eb;display:flex;flex-direction:column;position:relative}
.player-buffer{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  width:min(320px,70%);padding:12px 14px;border-radius:7px;background:rgba(8,12,18,.9);
  box-shadow:0 4px 18px rgba(0,0,0,.45);pointer-events:none}
.player-buffer.on{display:block}
.player-buffer-label{font:12px ui-monospace,Menlo,Consolas,monospace;color:#e5e7eb;margin-bottom:7px;text-align:center}
.player-buffer-track{height:5px;border-radius:3px;background:#334155;overflow:hidden}
.player-buffer-track i{display:block;width:0;height:100%;background:var(--huna-azzurro);transition:width .12s linear}
.wrap.playing #side{flex:1 1 auto;width:auto}
#rightcol{flex:1 1 auto;min-width:0;height:100%;display:flex;flex-direction:column}
.wrap.playing #rightcol{flex:0 0 400px;border-left:2px solid #0b0f14}
#map{flex:1 1 0;min-height:0}
#telem{display:none;flex-direction:column;min-height:0;background:#0a0d12;border-bottom:1px solid #1f2937}
.wrap.playing #telem{display:flex;flex:1 1 0}
/* telemetria ridotta a una riga: lo spazio avanzato va alla mappa */
.wrap.playing #telem.compact{flex:0 0 auto}
#telem.compact #hudref{display:none}
#telem.compact #hud{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}

/* picker passaggi */#picker{position:absolute;left:12px;bottom:12px;z-index:900;width:320px;max-height:52vh;overflow:auto;
  background:rgba(255,255,255,.97);border:1px solid #dde2ea;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25);display:none}
#picker.show{display:block}
#picker h3{margin:0;padding:8px 12px;font-size:13px;border-bottom:1px solid #eef1f5;display:flex;align-items:center;gap:8px}
#picker h3 .x{margin-left:auto;cursor:pointer;color:#6b7280;font-weight:700}
.pass{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f1f3f7;cursor:pointer;font-size:12px}
.pass:hover{background:#eef5ff}
.pass .arrow{flex:0 0 auto;width:22px;height:22px;position:relative}
.pass .arrow i{position:absolute;left:50%;top:50%;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:12px solid var(--huna-azzurro-scuro);transform-origin:50% 70%}
.pass .arrow.nohdg i{display:none}
.pass .arrow.nohdg::after{content:"•";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--huna-azzurro-scuro)}
.pass .meta{flex:1;line-height:1.35}
.pass .meta b{color:#111827}
.pass .dist{color:#6b7280;font-variant-numeric:tabular-nums}

/* player */
.phead{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1f2937;font-size:12px}
.phead .seg{display:flex;border:1px solid #334155;border-radius:6px;overflow:hidden}
.phead .seg button{background:#0b0f14;color:#cbd5e1;border:0;padding:5px 10px;cursor:pointer;font-size:12px}
.phead .seg button.on{background:var(--sel);color:var(--sel-testo)}
.phead select{background:#0b0f14;color:#e5e7eb;border:1px solid #334155;border-radius:5px;padding:4px 6px;font-size:12px}
.phead .ovtoggle{background:#0b0f14;color:#cbd5e1;border:1px solid #334155;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px}
.phead .ovtoggle.on{background:#7c3aed;color:#fff;border-color:#7c3aed}
.phead .close{margin-left:auto;cursor:pointer;color:#94a3b8;font-weight:700;font-size:16px;background:none;border:0}

#mosaic{display:grid;gap:3px;flex:1;min-height:0;padding:6px;grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr}
#mosaic .tile[data-cam="2"]{grid-column:1 / 3;grid-row:1}
#mosaic .tile[data-cam="1"]{grid-column:1 / 2;grid-row:2}
#mosaic .tile[data-cam="3"]{grid-column:2 / 3;grid-row:2}
/* bundle con una sola camera: niente righe vuote sotto al video */
#mosaic .tile:only-child{grid-column:1 / 3;grid-row:1 / 3}
#mosaic.single .tile{display:none}
#mosaic.single .tile.sel{display:block;grid-column:1 / 3;grid-row:1 / 3}
.tile{position:relative;background:#000;overflow:hidden;min-height:0;border-radius:4px;cursor:pointer}
.tile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tile canvas.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.tile .blk{position:absolute;inset:0;background:#000;display:none;align-items:center;justify-content:center;color:#64748b;font:12px monospace;z-index:3}
.tile .blk.on{display:flex}
.tile .cap{position:absolute;top:4px;right:6px;background:rgba(0,0,0,.55);color:#cbd5e1;font:11px monospace;padding:1px 5px;border-radius:4px;z-index:4}

.pctrl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #1f2937}
.pctrl button.play{background:var(--acc);color:var(--acc-testo);border:0;border-radius:5px;padding:6px 14px;cursor:pointer;font-weight:600}
.pctrl input[type=range]{flex:1}
.pctrl .tlab{font:11px monospace;color:#94a3b8;min-width:150px;text-align:right}
.pctrl select{background:#0b0f14;color:#e5e7eb;border:1px solid #334155;border-radius:5px;padding:4px 6px;font-size:12px}
.pctrl button.nav{background:#0b0f14;color:#cbd5e1;border:1px solid #334155;border-radius:5px;padding:6px 10px;cursor:pointer;font-size:12px}
.pctrl button.nav:hover{border-color:var(--sel);color:#fff}
.pctrl .hint{font:11px monospace;color:#5b6b7f}

/* navigazione fra i passaggi che toccano lo stesso punto */
.pnav{display:none;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid #1f2937;
  background:#0f172a;font-size:12px;color:#e5e7eb}
.pnav.show{display:flex}
.pnav b{font-variant-numeric:tabular-nums;min-width:104px}
.pnav .meta{flex:1;font:11px monospace;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnav button.nav{background:#0b0f14;color:#cbd5e1;border:1px solid #334155;border-radius:5px;
  padding:3px 11px;cursor:pointer;font-size:14px;line-height:1.2}
.pnav button.nav:hover{border-color:var(--sel);color:#fff}
.follow-ctl a{font:700 18px/30px system-ui;text-align:center;color:#374151}
.follow-ctl a.on{background:var(--sel);color:var(--sel-testo)}

#hud{margin:0;padding:10px 12px;background:#0a0d12;color:#d1fae5;
  font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre;overflow:auto;flex:1 1 0;min-height:0}
#hudref{padding:2px 12px 8px;font:11px monospace;color:#64748b;flex:0 0 auto}

/* pallino heading sulla mappa */
.cur-wrap{position:relative;width:26px;height:26px}
.cur-arrow{position:absolute;left:50%;top:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid #ff3b30;transform-origin:50% 70%;transform:translate(-50%,-70%) rotate(0deg)}
.cur-dot2{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#ff3b30;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 5px rgba(0,0,0,.6)}
.cur-wrap.nohdg .cur-arrow{display:none}
.leaflet-container{background:#111}

/* filtro dei guasti per ambito (tuning + viewer) */
#cxFilterBox{display:none;padding:8px 12px;border-top:1px solid #eef1f5;font-size:11.5px}
#cxFilterBox .hd{color:#6b7280;margin-bottom:5px}
#cxFilterBox label{display:flex;align-items:center;gap:7px;padding:2px 2px;border-radius:5px;cursor:pointer}
#cxFilterBox label:hover{background:#f3f4f6}
#cxFilterBox label.sep{margin-top:5px;border-top:1px solid #eef1f5;padding-top:6px}
#cxFilterBox .sw{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
#cxFilterBox .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cxFilterBox .ct{color:#9ca3af;font-variant-numeric:tabular-nums}
#cxFilterBox .ft{display:flex;gap:6px;margin-top:6px}
#cxFilterBox .ft button{flex:1;border:1px solid #c5cad3;background:#fff;border-radius:5px;
  padding:3px 8px;cursor:pointer;font-size:11px}
#cxMetrics.min #cxFilterBox{display:none !important}

/* filtro delle aree verdi: stessa resa del filtro ambiti */
#cxVegFilter{display:none;padding:8px 12px;border-top:1px solid #eef1f5;font-size:11.5px}
#cxVegFilter .hd{color:#6b7280;margin-bottom:5px}
#cxVegFilter label{display:flex;align-items:center;gap:7px;padding:2px 2px;border-radius:5px;cursor:pointer}
#cxVegFilter label:hover{background:#f3f4f6}
#cxVegFilter .sw{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
#cxVegFilter .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cxVegFilter .ct{color:#9ca3af;font-variant-numeric:tabular-nums}
#cxVegFilter .ft{display:flex;gap:6px;margin-top:6px}
#cxVegFilter .ft button{flex:1;border:1px solid #c5cad3;background:#fff;border-radius:5px;
  padding:3px 8px;cursor:pointer;font-size:11px}
#cxMetrics.min #cxVegFilter{display:none !important}

/* maniglie di modifica dei poligoni (shared/frontend/draw-areas.js) */
.da-vertex{background:#fff;border:2px solid #15803d;border-radius:2px;cursor:move;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.da-vertex:hover{background:#bbf7d0}
.da-mid{background:rgba(255,255,255,.6);border:1px dashed #15803d;border-radius:50%;
  cursor:copy;opacity:.75}
.da-mid:hover{opacity:1;background:#fff}