/* ====== Variabili e tema ====== */
:root{
  color-scheme: light dark;
  --bg:#0b0c0d; --fg:#e7e9ee; --muted:#a1a1aa; --card:#111317; --border:#23262d;
  --grid:#1f242d; --grid2:#2b3039; --accent:#60a5fa; --chip:#1a1f27;
  --ok:#22c55e; --warn:#f59e0b; --info:#60a5fa;
  --dayband: rgba(255,214,102,.18);   /* giorno */
  --nightband: rgba(102,153,255,.14); /* notte */
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --fg:#0f172a; --muted:#475569; --card:#ffffff; --border:#e2e8f0;
    --grid:#e2e8f0; --grid2:#cbd5e1; --accent:#2563eb; --chip:#f3f4f6;
    --ok:#16a34a; --warn:#d97706; --info:#2563eb;
    --dayband: rgba(255,214,102,.22);
    --nightband: rgba(102,153,255,.12);
  }
}

/* ====== Base ====== */
html,body{background:var(--bg);color:var(--fg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  margin:0
}
#wrap{max-width:1120px;margin:0 auto;padding:16px}
h2{margin:6px 0 16px;font-weight:800;letter-spacing:.2px;font-size:clamp(20px,3.2vw,32px)}
.muted{ color: var(--muted) }
*{-webkit-tap-highlight-color:transparent}

/* Controlli generali */
label{font-size:13px;color:var(--muted)}
input, select, button{
  font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--fg);-webkit-appearance:none;appearance:none
}
button{cursor:pointer;line-height:1}
button:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}
.btn-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:18px;padding:0}
.btn-icon.active{ outline:2px solid var(--accent); border-color:var(--accent); }
button, .chip { touch-action: manipulation; } /* evita double-tap zoom */

/* ====== Dashboard (Oggi / Periodo personalizzato) ====== */
.dash{margin:14px 0 18px}
.dash h3{margin:0 0 10px;font-weight:800;letter-spacing:.2px}

/* testata con preset + date */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dash-controls{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px
}

/* preset: “segment control” in una scheda */
.chips-range{
  display:flex;gap:8px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:6px 10px
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:14px;padding:8px 12px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--fg);user-select:none
}
.chip.active{background:var(--accent);color:#000;box-shadow:0 0 0 1px var(--accent) inset}

/* Dal/Al + Applica in una scheda separata */
.period-field{
  display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:6px 10px
}
.period-field input{min-width:180px;width:220px}

/* Responsive: impila su mobile */
@media (max-width:780px){
  .dash-controls{flex-direction:column;align-items:stretch}
  .period-field{flex-wrap:wrap}
  .period-field input{flex:1 1 160px;min-width:140px;width:auto}
  .period-field .btn-primary{width:100%;margin-top:6px}
}
@media (max-width:520px){
  .chips-range .chip{padding:6px 10px;font-size:13px}
}

/* ====== Tile metriche ====== */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(180px,1fr))}
@media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr} }

.tile{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.tile .tt{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
.tile .big{font-size:clamp(20px,3.5vw,28px);font-weight:800;line-height:1.1}
.tile .row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:4px}
.tile .row span{font-size:12px;color:var(--muted)}
.tile .row strong{font-size:14px}

/* badge “media / cumulata” sotto il valore grande */
.avg-badge{
  display:inline-block;
  max-width:100%;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  padding:5px 9px;
  border-radius:10px;
  background:var(--chip);
  border:1px solid var(--border);
  margin:6px 0 2px;
  color:var(--muted);
  white-space:normal;
  overflow-wrap:anywhere
}

/* accenti per tipo misura */
.tile.t .big{color:#f59e0b}      .tile.t .avg-badge{color:#b45309;border-color:#f59e0b33}
.tile.h .big{color:#22c55e}      .tile.h .avg-badge{color:#15803d;border-color:#22c55e33}
.tile.p .big{color:#60a5fa}      .tile.p .avg-badge{color:#1d4ed8;border-color:#60a5fa33}
.tile.r .big{color:#a78bfa}      .tile.r .avg-badge{color:#6d28d9;border-color:#a78bfa33}

/* ====== Card grafici ====== */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.card-head h3{margin:0 0 2px}

/* Stime locali */
.insights-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.insight{
  --sev:var(--muted);
  position:relative;overflow:hidden;
  border:1px solid color-mix(in srgb, var(--sev) 24%, var(--grid));
  border-radius:16px;padding:13px 14px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--sev) 10%,transparent),transparent 42%),
    var(--card);
  display:flex;flex-direction:column;gap:9px;
  min-height:118px;
  box-shadow:0 10px 24px rgba(0,0,0,.10)
}
.insight.sev-ok{--sev:var(--ok)}
.insight.sev-warn{--sev:var(--warn)}
.insight.sev-info{--sev:var(--info)}
.insight.sev-note,.insight.sev-muted{--sev:var(--muted)}
.insight-summary{
  grid-column:1/-1;
  min-height:0;
  padding:16px;
  background:
    radial-gradient(circle at top right,color-mix(in srgb,var(--sev) 22%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--sev) 13%,transparent),transparent 48%),
    var(--card)
}
.insight-summary .insight-title{font-size:clamp(18px,2.5vw,24px)}
.insight-status{min-height:0}
.insight-head{display:flex;align-items:center;gap:9px;padding-bottom:2px}
.insight-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent)}
.insight-title{font-weight:800;line-height:1.2}
.insight-row{font-size:13px;line-height:1.38}
.insight-row.data{
  color:var(--muted);
  background:color-mix(in srgb,var(--chip) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  border-radius:12px;
  padding:8px 10px
}
.insight-impact{
  color:var(--fg);
  background:color-mix(in srgb,var(--sev) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--sev) 24%,transparent);
  border-radius:12px;
  padding:8px 10px;
  font-weight:650
}
.insight.sev-ok .insight-impact{color:var(--ok)}
.insight.sev-warn .insight-impact{color:var(--warn)}
.insight.sev-info .insight-impact{color:var(--info)}
.insight.sev-muted .insight-impact,.insight.sev-note .insight-impact{color:var(--muted)}
.insight-tags{display:flex;flex-wrap:wrap;gap:6px}
.insight-tags span{
  font-size:12px;
  color:var(--fg);
  background:color-mix(in srgb,var(--sev) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sev) 25%,transparent);
  border-radius:999px;
  padding:4px 8px
}
.rain-meter{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--border) 70%,transparent)
}
.rain-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--info),var(--warn));
  transition:width .25s ease
}
@media (max-width:560px){
  .insights-list{grid-template-columns:1fr}
  .insight{min-height:0}
}

/* Controlli locali del grafico pioggia */
.chart-local{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:8px 10px;margin:4px 0 8px
}
.chips-inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chips-inline select{height:40px}

/* Area grafico */
.chart-wrap{width:100%;height:clamp(280px,50vh,480px)}
canvas{width:100%!important;height:100%!important}

/* Barra comandi globale (frecce/zoom/reset/CSV + toggle giorno/notte) */
.global-controls{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:8px;margin:12px 0 6px
}
.global-controls .gap{width:16px}

/* ====== Loading overlay ====== */
#loading{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.15);z-index:9999;backdrop-filter:blur(1px)
}
#loading .spinner{
  width:54px;height:54px;border-radius:50%;
  border:4px solid rgba(255,255,255,.35);border-top-color:var(--accent);
  animation:spin 800ms linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-color-scheme: light){
  #loading{ background:rgba(255,255,255,.35) }
  #loading .spinner{ border:4px solid rgba(0,0,0,.15); border-top-color:var(--accent) }
}