/* ============================================================
   Prezzo Medio — UI 2026
   Command bar scura + contenuto su fondo bianco.
   Login: schermata scura (il logo bianco richiede fondo scuro).
   Nessuna logica: solo presentazione.
   ============================================================ */

:root{
  /* ---- CONTENUTO (chiaro) ---- */
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --border:#e6ebf3;
  --border-2:#d5dded;
  --text:#18213a;
  --muted:#5d6a86;
  --faint:#98a3ba;
  --accent:#0a9ebc;        /* ciano profondo, leggibile su bianco */
  --accent-2:#6d54f0;
  --online:#12b981;
  --warn:#e08a00;
  --off:#e11d48;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 14px 40px -22px rgba(24,33,58,.35);
  color-scheme:light;
}

/* La command bar e la schermata di login usano una palette SCURA:
   ridefiniamo qui i token, così i discendenti risolvono ai valori giusti. */
.app header,
body.auth{
  --panel:rgba(18,24,41,.72);
  --panel-2:rgba(23,31,52,.66);
  --border:rgba(122,146,196,.18);
  --border-2:rgba(130,160,220,.32);
  --text:#e8ecf5;
  --muted:#8b97b3;
  --faint:#5c688a;
  --accent:#22d3ee;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100vh;
  font-family:var(--sans); color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}

/* ===================== COMMAND BAR (scura) ===================== */
.app header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:13px 24px;
  background:linear-gradient(180deg,#0b1020 0%,#0e1424 100%);
  border-bottom:1px solid rgba(34,211,238,.14);
  box-shadow:0 10px 30px -18px rgba(8,12,24,.9);
}
.app header .logo{ display:flex; align-items:center; margin-right:auto }
.app header .logo img{
  height:38px !important; width:auto !important;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.35));
}
.app header .logo::after{
  content:"· PREZZO MEDIO";
  margin-left:14px; padding-left:14px;
  border-left:1px solid var(--border-2);
  font:600 12px/1 var(--mono);
  letter-spacing:.28em; color:var(--muted); text-transform:uppercase;
}
.app header button{
  font:600 12px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--border-2); background:rgba(124,140,190,.08);
  cursor:pointer; transition:.18s ease;
}
.app header button:hover{
  border-color:var(--accent); color:#fff;
  box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 0 22px -4px rgba(34,211,238,.55);
  transform:translateY(-1px);
}
.app header button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===================== MAIN + TITLE (chiaro) ===================== */
.app main{
  position:relative; z-index:1;
  max-width:1760px; margin:0 auto;
  padding:30px 22px 92px;
}
.app main h1{
  font:700 24px/1.1 var(--sans); letter-spacing:-.01em;
  color:var(--text); margin:2px 0 22px;
  display:flex; align-items:center; gap:14px;
}
.app main h1::before{
  content:""; width:9px; height:26px; border-radius:3px;
  background:linear-gradient(var(--accent), var(--accent-2));
  box-shadow:0 4px 14px -3px rgba(10,158,188,.6);
}

/* ===================== FILTER TOOLBAR (chiaro) ===================== */
.filters{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 22px 20px;
  margin:0 0 22px;
}
.filters-title{
  font:600 11px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
.filters-row{ display:flex; flex-wrap:wrap; gap:18px 26px; align-items:flex-end }
.filter-section{ display:flex; flex-direction:column; gap:8px }
.filter-section label{
  font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* select "pill" chiaro */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font:500 14px/1 var(--sans); color:var(--text);
  padding:11px 40px 11px 15px; min-width:170px;
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a9ebc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
  border:1px solid var(--border-2); border-radius:999px;
  cursor:pointer; transition:.16s ease;
}
select:hover{ border-color:var(--accent) }
select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,158,188,.16) }

/* ===================== DATA GRID (chiaro) ===================== */
.table-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.table-scroll{ overflow-x:auto }
.data-table{
  width:100%; min-width:max-content;
  border-collapse:separate; border-spacing:0;
  font-variant-numeric:tabular-nums;
}
.data-table th{
  text-align:center;
  font:600 11px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  padding:15px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border-2);
  white-space:nowrap;
}
.data-table th:first-child{ text-align:left; padding-left:22px }
.data-table td{
  text-align:center; padding:13px 14px; font-size:13.5px; color:var(--text);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.data-table td:first-child{ text-align:left; padding-left:22px; font-weight:600 }
.data-table tr:last-child td{ border-bottom:0 }
.data-table tr{ transition:background .14s ease }
.data-table tr:hover td{ background:rgba(10,158,188,.06) }
.data-table td:nth-last-child(-n+4){ font-family:var(--mono); font-size:13px; letter-spacing:.01em }

/* ===================== STATUS DOTS ===================== */
.green,.red,.yellow{ width:13px; height:13px; border-radius:50%; margin:0 auto; position:relative }
.green{ background:var(--online); box-shadow:0 0 0 4px rgba(18,185,129,.14) }
.yellow{ background:var(--warn);  box-shadow:0 0 0 4px rgba(224,138,0,.16) }
.red{ background:var(--off);      box-shadow:0 0 0 4px rgba(225,29,72,.14) }
.green::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(18,185,129,.5);
  animation:pmping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pmping{ 0%{transform:scale(1);opacity:.85} 80%,100%{transform:scale(2);opacity:0} }

/* ===================== PAGINATION (chiaro) ===================== */
.pagination-container{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:15px 20px; border-top:1px solid var(--border) }
.total-pages{ font:500 13px/1 var(--sans); color:var(--muted) }
.total-pages b{ color:var(--accent); font-family:var(--mono); font-size:15px; margin-left:4px }
.pagination{ display:flex; gap:8px; flex-wrap:wrap }
.pagina{
  min-width:40px; text-align:center; padding:9px 13px; border-radius:10px;
  font:600 13px/1 var(--mono); color:var(--muted);
  border:1px solid var(--border-2); background:#fff; transition:.14s ease;
}
.pagina:hover{ color:var(--accent); border-color:var(--accent) }
.pagina.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(120deg, var(--accent), #0ea5e9);
  box-shadow:0 6px 18px -8px rgba(10,158,188,.7);
}

/* ===================== FOOTER (chiaro, discreto) ===================== */
.app footer{
  position:fixed; bottom:0; left:0; width:100%;
  padding:13px; text-align:center; z-index:5;
  background:linear-gradient(0deg,#0b1020,#0e1424);
  border-top:1px solid rgba(34,211,238,.14);
  font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#8b97b3;
}
.app footer p{ margin:0 }

/* ===================== LOGIN (schermata scura) ===================== */
body.auth{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(880px 520px at 92% 4%, rgba(124,92,255,.12), transparent 55%),
    #0a0e1a;
}
.auth header{ display:flex; flex-direction:column; align-items:center; gap:14px; background:none; padding:0; margin-bottom:26px; text-align:center }
.auth header .logo img{ height:74px !important; width:auto !important; filter:drop-shadow(0 0 26px rgba(34,211,238,.45)) }
.auth header h1{ font:600 13px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin:0 }
.auth main{ width:100%; max-width:400px; padding:0 }
.auth form{
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border-2); border-radius:var(--radius);
  padding:30px 28px 32px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -26px #000;
}
.auth form::before{
  content:"Accesso riservato";
  font:600 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px;
}
.auth label{ display:block; margin-bottom:9px; font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.auth input[type="text"],
.auth input[type="password"]{
  width:100%; margin-bottom:20px; padding:13px 15px; border-radius:var(--radius-sm);
  font:500 15px/1 var(--sans); color:var(--text);
  background:rgba(13,20,36,.92); border:1px solid var(--border-2); transition:.18s ease;
}
.auth input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,211,238,.16); background:rgba(13,20,36,1) }
.auth button[type="submit"]{
  margin-top:6px; padding:14px 20px;
  font:700 13px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:#04121a; cursor:pointer; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(120deg, #22d3ee, #4f8cff);
  box-shadow:0 12px 28px -10px rgba(34,211,238,.7); transition:.18s ease;
}
.auth button[type="submit"]:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.auth button[type="submit"]:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.error-message{
  margin:0 0 18px; padding:11px 14px; border-radius:var(--radius-sm);
  font:500 13px/1.4 var(--sans); color:#ffd7de;
  background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.4);
}

/* ===================== HUD iniettato da app.js (nella barra scura) ===================== */
.hud{ display:flex; align-items:center; gap:12px }
.hud-clock{
  font:600 13px/1 var(--mono); letter-spacing:.10em; color:var(--muted);
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--border-2); background:rgba(13,20,36,.55); white-space:nowrap;
}
.hud-clock b{ color:var(--accent); font-weight:600 }
.hud-search{
  font:500 13px/1 var(--sans); color:#e8ecf5;
  padding:10px 16px; width:210px; border-radius:999px;
  background:rgba(13,20,36,.85); border:1px solid var(--border-2); transition:.16s ease;
}
.hud-search::placeholder{ color:var(--faint) }
.hud-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,211,238,.16); width:250px }
.hud-live{
  display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); cursor:pointer;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--border-2); background:rgba(124,140,190,.08); transition:.16s ease;
}
.hud-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--faint) }
.hud-live:hover{ border-color:var(--online); color:#e8ecf5 }
.hud-live.on{ color:#04121a; border-color:transparent; background:linear-gradient(120deg,#12e29a,#38d9a9) }
.hud-live.on .dot{ background:#04121a; animation:pmpulse 1.4s ease-in-out infinite }
@keyframes pmpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

tr.hud-hidden{ display:none }

/* stripe di severità per riga (stato codificato nella forma) */
.data-table tr:has(.red)    td:first-child{ box-shadow:inset 3px 0 0 var(--off) }
.data-table tr:has(.yellow) td:first-child{ box-shadow:inset 3px 0 0 var(--warn) }
.data-table tr:has(.green)  td:first-child{ box-shadow:inset 3px 0 0 rgba(18,185,129,.6) }

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .app main{ padding:22px 14px 92px }
  .app header{ padding:12px 15px }
  .app header .logo::after{ display:none }
  .hud-search{ width:150px }
  .hud-clock{ display:none }
  .data-table{ display:block; overflow-x:auto }
  .data-table th{ position:static }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ===================== KPI TILES ===================== */
.kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 22px }
.kpi-tile{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; display:flex; flex-direction:column; gap:7px;
}
.kpi-tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--faint) }
.kpi-tile.is-green::before{ background:var(--online) }
.kpi-tile.is-yellow::before{ background:var(--warn) }
.kpi-tile.is-red::before{ background:var(--off) }
.kpi-num{ font:700 30px/1 var(--mono); letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums }
.kpi-tile.is-green .kpi-num{ color:#0f9d6b }
.kpi-tile.is-yellow .kpi-num{ color:#c47a00 }
.kpi-tile.is-red .kpi-num{ color:var(--off) }
.kpi-lbl{ font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
@media (max-width:900px){ .kpi{ grid-template-columns:repeat(2,1fr) } }

/* pulsante generico nella HUD (Export) */
.hud-btn{
  font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  cursor:pointer; padding:10px 16px; border-radius:999px;
  border:1px solid var(--border-2); background:rgba(124,140,190,.08); transition:.16s ease;
}
.hud-btn:hover{ border-color:var(--accent); color:#e8ecf5 }

/* indicatore di ordinamento colonna */
.data-table th{ cursor:pointer; user-select:none }
.data-table th[data-sort]::after{ content:" ▲"; font-size:9px; color:var(--accent) }
.data-table th[data-sort="desc"]::after{ content:" ▼" }