/* ==========================================================
     DESIGN TOKENS
     ========================================================== */
  :root{
    /* surfaces */
    --bg:#0f1419; --panel:#161c24; --panel2:#1c2430; --border:#252f3d;
    /* text */
    --txt:#e6edf3; --muted:#8b98a7;
    /* accent */
    --accent:#4fb3ff; --accent2:#2b6fb3;
    /* semantic */
    --ok:#2ecc71; --warn:#f1c40f; --err:#ff5c5c; --info:#7aa2ff; --accepted:#9ccbff;
    /* chips */
    --chip:#222b38; --chipTxt:#cfd8e3;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
    font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}

  /* ==========================================================
     FORM CONTROLS & BUTTONS
     ========================================================== */
  button{cursor:pointer;font:inherit}
  .btn{background:var(--accent2);color:#fff;border:1px solid transparent;border-radius:8px;
    padding:8px 12px;font-weight:600}
  .btn:hover{background:var(--accent)}
  .btn.ghost{background:transparent;border-color:var(--border);color:var(--txt)}
  .btn.ghost:hover{background:var(--panel2)}
  .btn.danger{background:#7b2b2b}
  .btn.danger:hover{background:#a13434}
  .btn.sm{padding:4px 8px;font-size:12px;border-radius:6px}
  input,select,textarea{background:var(--panel2);color:var(--txt);border:1px solid var(--border);
    border-radius:6px;padding:6px 8px;font:inherit}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .grow{flex:1}
  .hint{color:var(--muted);font-size:12px}
  code.code{background:#0b1016;border:1px solid var(--border);padding:1px 4px;border-radius:4px;font-size:11px}

  /* ==========================================================
     HEADER
     ========================================================== */
  header.topbar{position:sticky;top:0;z-index:20;
    background:linear-gradient(180deg,#111720,#0f1419);
    border-bottom:1px solid var(--border);padding:10px 16px}
  .title{font-weight:800;letter-spacing:.3px}
  .title .dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin:0 8px 1px 0}
  .params{display:flex;gap:6px;align-items:center}
  .params label{font-size:12px;color:var(--muted)}
  .params input{width:80px;text-align:center}

  /* Sync / refresh pills */
  .pill-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    font-size:12px;border:1px solid var(--border);background:var(--panel)}
  .pill-status .pulse{width:8px;height:8px;border-radius:50%;background:#555}
  .pill-status.ok   .pulse{background:var(--ok)}
  .pill-status.busy .pulse{background:var(--accent);animation:pulse 1s infinite}
  .pill-status.off  .pulse{background:var(--warn)}
  .pill-status.err  .pulse{background:var(--err)}
  @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

  /* Stats inline (compatte) – stanno nella stessa riga del titolo */
  .stats{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:11px}
  .stat{display:inline-flex;gap:4px;align-items:baseline;background:transparent;border:0;padding:0 4px;min-width:0}
  .stat .k{color:var(--muted);font-size:11px;letter-spacing:.2px}
  .stat .v{color:var(--txt);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  .stat.ok .v{color:var(--ok)} .stat.warn .v{color:var(--warn)} .stat.err .v{color:var(--err)}
  .stat.info .v{color:var(--info)} .stat.accepted .v{color:var(--accepted)}
  .stat + .stat{border-left:1px solid var(--border)}

  /* ==========================================================
     TABS
     ========================================================== */
  nav.tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--border);
    background:#0f1419;position:sticky;top:52px;z-index:15}
  nav.tabs .tab{padding:10px 14px;color:var(--muted);cursor:pointer;user-select:none;
    border-bottom:2px solid transparent;font-weight:600}
  nav.tabs .tab.active{color:var(--txt);border-bottom-color:var(--accent)}
  nav.tabs .tab .count{display:inline-block;margin-left:6px;background:var(--panel2);color:var(--txt);
    border-radius:999px;padding:1px 7px;font-size:11px}
  nav.tabs .tab.active .count{background:var(--accent2);color:#fff}

  main{padding:14px 16px 120px}
  .panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px}
  .panel h3{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .tbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}

  /* ==========================================================
     PROGRESSIONE GRID (compatta verticalmente)
     ========================================================== */
  .prog-grid{overflow:auto;max-height:76vh;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
  .prog-grid table{border-collapse:separate;border-spacing:0;font-size:12px}
  .prog-grid th,.prog-grid td{border-bottom:1px solid var(--border);padding:1px 6px;white-space:nowrap;text-align:left;line-height:1.1}
  .prog-grid thead th{position:sticky;top:0;background:var(--panel);z-index:2;font-weight:700;padding:4px 6px}
  .prog-grid tbody tr:hover{background:#111820}
  .prog-grid .bib{font-weight:800;font-size:13px;min-width:40px}
  .prog-grid .total{font-variant-numeric:tabular-nums;font-weight:700;padding-left:10px;border-left:1px dashed var(--border)}
  .prog-grid .sticky-col{position:sticky;left:0;background:var(--panel);z-index:1;border-right:1px solid var(--border)}
  .prog-grid thead .sticky-col{z-index:3}

  /* Cell che mostra il numero di passaggi. Colore = severity, numero = passaggi rilevati. */
  .ps-cell{width:30px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
    position:relative;cursor:pointer;font-size:12px;font-weight:800;color:#fff;user-select:none;
    margin:0;transition:transform .08s ease;font-variant-numeric:tabular-nums}
  .ps-cell:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.35)}
  .ps-cell.missing{background:#2a2f3a;color:#777}
  .ps-cell.ok{background:#1e6b3e;color:#d4f3df}
  .ps-cell.warn{background:#6e5a10;color:#ffe89a}
  .ps-cell.err{background:#7a1f1f;color:#ffd0d0}
  /* Accettato: colore verde come OK. La condizione "accettato" neutralizza
     anche warn/err perché il controllo è stato ignorato deliberatamente. */
  .ps-cell.accepted{background:#1e6b3e;color:#d4f3df}
  /* Modificato: bordo blu sempre visibile quando c'è qualche override o nota
     (inclusa l'accettazione). */
  .ps-cell.modified{outline:2px solid var(--accepted);outline-offset:-2px}
  /* Non partito (DNS) / Ritirato (DNF): aspetto neutralizzato a strisce, distinguibile a colpo d'occhio. */
  .ps-cell.dns{background:repeating-linear-gradient(45deg,#3a2f0a,#3a2f0a 4px,#2a2200 4px,#2a2200 8px);color:#ffdc6b;font-size:10px}
  .ps-cell.dnf{background:repeating-linear-gradient(45deg,#3e1919,#3e1919 4px,#2a1010 4px,#2a1010 8px);color:#ffb0b0;font-size:10px}
  /* Evidenziazione sulla prima colonna (pett.) per righe DNS/DNF */
  .prog-grid tr.dns-row .sticky-col{box-shadow:inset 3px 0 0 var(--warn)}
  .prog-grid tr.dnf-row .sticky-col{box-shadow:inset 3px 0 0 #b25aff}
  .bib-badge{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.3px;vertical-align:1px}
  .bib-badge.dns{background:#3a2f0a;color:#ffdc6b;border:1px solid #6e5a10}
  .bib-badge.dnf{background:#2a1a3f;color:#cfb0ff;border:1px solid #5a3a8f}
  .ps-cell .corner{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--panel)}
  .ps-cell .c-dup{background:#7aa2ff}
  .ps-cell .c-note{background:#caa6ff}
  .ps-cell .c-accept{background:var(--accepted)}
  .ps-cell .c-div{background:var(--err)}    /* manual/auto divergence */
  /* Marker nota: puntino aggiuntivo in basso a sinistra, più piccolo ancora */
  .ps-cell .c-note-sw{position:absolute;bottom:-2px;left:-2px;width:6px;height:6px;border-radius:50%;
    background:#caa6ff;border:1.5px solid var(--panel)}

  /* NB: drag&drop e badge cliccabile sul grid header sono stati rimossi.
     Rinomina, riordino e expected si gestiscono dal Setup modal
     (sezione "PS / Settori"). Se in futuro serve un'indicazione inline
     dello stato custom, usare una classe dedicata non interattiva. */

  /* Legend */
  .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:8px;align-items:center}
  .legend .ps-cell{width:22px;height:22px;font-size:10px}

  /* ==========================================================
     LOGS / WARNINGS LIST
     ========================================================== */
  .warnings{max-height:65vh;overflow:auto;font-size:12px}
  .warnings .w{padding:6px 8px;border-bottom:1px dashed var(--border);display:flex;gap:8px;align-items:center}
  .pill{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:999px;
    font-size:10px;font-weight:700;background:var(--chip);color:var(--chipTxt)}
  .pill.ok{background:#16381f;color:#9be6b6}
  .pill.warn{background:#3a2f0a;color:#ffdc6b}
  .pill.err{background:#3e1919;color:#ff9c9c}
  .pill.info{background:#142a42;color:#bfd8ff}
  .pill.accepted{background:#112842;color:#9ccbff}

  /* ==========================================================
     RAW DATA TABLE
     ========================================================== */
  .raw-grid{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
  .raw-grid table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
  .raw-grid th,.raw-grid td{border-bottom:1px solid var(--border);padding:4px 8px;text-align:left;
    white-space:nowrap;font-variant-numeric:tabular-nums}
  .raw-grid thead th{position:sticky;top:0;background:var(--panel);z-index:2}
  .raw-grid tr.dup{opacity:.6}
  .raw-grid tr.diverge td{color:#ffb4b4}

  /* ==========================================================
     MODALS
     ========================================================== */
  .modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
    align-items:center;justify-content:center;z-index:100}
  .modal-back.on{display:flex}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;
    width:min(700px,94vw);max-height:90vh;overflow:auto}
  .modal h3{margin:0 0 10px}
  .kv{display:grid;grid-template-columns:120px 1fr;gap:6px;align-items:center;margin-bottom:6px}
  .kv label{color:var(--muted);font-size:12px}
  .kv input,.kv textarea{width:100%}
  .badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
  .badges .pill{font-size:11px;padding:2px 8px}
  .accept-box{background:#0b1a2b;border:1px dashed #2b6fb3;border-radius:8px;padding:8px 10px;
    margin:10px 0;display:flex;gap:8px;align-items:center}
  .accept-box input[type=checkbox]{transform:scale(1.2);margin-right:4px}
  .dup-table{width:100%;font-size:12px;border-collapse:collapse;margin-top:4px}
  .dup-table td,.dup-table th{border-bottom:1px solid var(--border);padding:3px 6px;text-align:left}
  .dup-table tr.used td{background:#0f2114}
  .dup-table tr.diverge td{background:#2a1313}

  /* ==========================================================
     MISC
     ========================================================== */
  .loader{width:14px;height:14px;border:2px solid var(--muted);border-top-color:var(--accent);
    border-radius:50%;animation:spin 1s linear infinite;display:inline-block;vertical-align:-2px;margin-right:6px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hero-empty{text-align:center;color:var(--muted);padding:60px 20px}
  .hero-empty h2{color:var(--txt)}