/* ═══════════════════════════════════════════════════════════════════
   blip — app.css : login e dashboard.
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────── LOGIN */
.login {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-10) var(--gutter);
  padding-bottom: max(var(--sp-10), env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
}

/* trama di puntini verdi che sale e sfuma verso l'alto */
.login__dots {
  position: absolute; inset: auto 0 0 0; height: 60%;
  background-image: radial-gradient(var(--accent-deep) 1px, transparent 1.2px);
  background-size: 8px 8px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / 1) 20%, transparent 100%);
  mask-image: linear-gradient(to top, rgb(0 0 0 / 1) 20%, transparent 100%);
  animation: dots-rise 40s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes dots-rise { to { background-position-y: -400px; } }

.logo--login { margin-bottom: var(--sp-4); }
.logo__text { display: inline-block; min-width: 2ch; }
.logo__text::after {                     /* cursore di scrittura, solo durante l'animazione */
  content: "";
  display: inline-block;
  width: .08em; height: .8em;
  margin-left: .06em;
  background: var(--ink);
  vertical-align: -.02em;
  opacity: 0;
}
.logo--typing .logo__text::after { opacity: 1; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.login__card {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--ink-06);
  border-radius: var(--r-card-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.login__submit {
  width: min(100%, 360px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-mid) var(--ease) 120ms, transform var(--t-mid) var(--ease) 120ms;
}
.login--ready .login__card,
.login--ready .login__submit { opacity: 1; transform: none; }

/* ────────────────────────────────────────────── DASHBOARD */
.dash {
  min-height: 100svh;
  padding: var(--sp-4) var(--gutter) max(var(--sp-8), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: var(--container);
  margin: 0 auto;
}

/* barra in alto */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-height: 52px;
  padding: 0 var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--ink-06);
  border-radius: var(--r-card);
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar__right { justify-content: flex-end; }
.topbar__meta { font-size: var(--fs-small); color: var(--ink-70); white-space: nowrap; }
.topbar__sep { color: var(--ink-30); font-size: var(--fs-tiny); }
.topbar__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--bg) 0 30%, var(--accent) 32% 100%);
  box-shadow: 0 0 0 3px rgb(143 191 134 / .18);
  flex: none;
}

.menu { position: relative; }
.menu__panel {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-width: 220px;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--ink-06);
  border-radius: 20px;
}
.menu__hint { font-size: var(--fs-tiny); color: var(--ink-50); }

.netbar {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-btn);
  background: rgb(217 74 58 / .15);
  color: var(--ink);
  font-size: var(--fs-small);
  text-align: center;
}

/* griglia — `1fr` da solo vale minmax(auto, 1fr): il contenuto più largo (la fila degli anelli
   dello storico su telefono) allargherebbe la colonna oltre lo schermo. Quindi minmax(0, …) e
   min-width: 0 sugli item. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-gap);
  align-items: stretch;                 /* i riquadri finiscono alla stessa altezza */
}
.grid > * { min-width: 0; }
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col--center { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr); }
  .col--center { grid-column: auto; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--ink-06);
  border-radius: var(--r-card);
  padding: var(--sp-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
@supports (corner-shape: squircle) {
  .card, .topbar, .login__card { corner-shape: squircle; }
}
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); }
.col--center { display: flex; flex-direction: column; gap: var(--sp-gap); }
.col--center > .card { flex: 1; }

/* ── colonna 1: saluto + consumi (sul fondo, senza card) */
.col--intro {
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-card) var(--sp-4);
  text-align: center;
}
.intro { display: flex; flex-direction: column; gap: var(--sp-3); }
.intro__title { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); }
.intro__text { font-size: var(--fs-small); color: var(--ink-70); max-width: 28ch; margin: 0 auto; }

.consumi { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }

/* gauge ad anelli: l'anello esterno è in tre pezzi (bassi · medi · alti), scuri come quelli
   della rinnovabile; il pezzo della fascia in corso diventa grigio (specifica di Virginia, 06/09/2026) */
.gauge { position: relative; width: min(100%, 240px); aspect-ratio: 1; }
.gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seg {
  fill: none;
  stroke: var(--surface-2);            /* pezzo non attivo: uguale su consumi e rinnovabile */
  stroke-linecap: round;
  transition: stroke var(--t-mid) var(--ease);
}
.seg--active { stroke: var(--ink-30); }
.gauge .seg { stroke-width: 12; }
.gauge__center {
  position: absolute; inset: 22%;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.gauge__num { font-size: var(--fs-num); font-weight: 800; letter-spacing: -0.02em; }
.gauge__unit { font-size: var(--fs-small); font-weight: 700; margin-top: 4px; }

/* ── rinnovabile */
.renew {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.donut { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1; margin: 0 auto; }
.donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .seg { stroke-width: 16; }
.donut__fill { fill: var(--accent); transition: fill var(--t-mid) var(--ease); }
.donut__num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--fs-num); font-weight: 800; color: var(--bg); letter-spacing: -0.02em;
}
.donut--attesa .donut__fill { fill: var(--surface-2); }
.donut--attesa .donut__num { color: var(--ink-50); }

.renew__side { display: flex; flex-direction: column; gap: var(--sp-3); }
.sources { display: flex; flex-direction: column; gap: var(--sp-2); }
.source {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--sp-3);
  color: var(--ink-70); font-size: var(--fs-small);
}
.source__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-70);
  display: grid; place-items: center;
}
.source__icon svg { width: 16px; height: 16px; }
.source__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-12); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.source--active { color: var(--ink); }
.source--active .source__dot { background: var(--accent); box-shadow: 0 0 0 3px rgb(143 191 134 / .25); }

/* ── socialità */
.social {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.radar { position: relative; width: 100%; max-width: 200px; aspect-ratio: 1; margin: 0 auto; }
.radar__ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--hot);
  opacity: .55;
  transition: border-color var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.radar__ring--1 { inset: 30%; }
.radar__ring--2 { inset: 17%; }
.radar__ring--3 { inset: 4%; }
.radar__core {
  position: absolute; inset: 40%; border-radius: 50%;
  background: radial-gradient(circle, var(--hot) 0 45%, var(--surface) 48% 60%, var(--hot) 62% 100%);
  transition: background var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.radar--hot .radar__ring { animation: radar-pulse 4s var(--ease) infinite; }
.radar--hot .radar__ring--2 { animation-delay: .6s; }
.radar--hot .radar__ring--3 { animation-delay: 1.2s; }
@keyframes radar-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
/* nessun dispositivo: il grafico resta blu, senza puntini */
.radar--cold .radar__ring { border-color: var(--cold); opacity: .45; }
.radar--cold .radar__core { background: radial-gradient(circle, var(--cold) 0 45%, var(--surface) 48% 60%, var(--cold) 62% 100%); opacity: .8; }
.radar__nodes { position: absolute; inset: 0; }
.radar__node {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--viola);
  box-shadow: 0 0 0 3px rgb(155 93 229 / .25);
  transform: translate(-50%, -50%);
  animation: node-in var(--t-mid) var(--ease) both;
}
@keyframes node-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }

.social__side { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-end; text-align: right; }
.social__count { font-size: var(--fs-body); font-weight: 700; }
.social__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.social__list li {
  font-size: var(--fs-tiny); color: var(--ink-70);
  padding: 4px 10px; border-radius: var(--r-btn);
  background: var(--surface-2);
}

/* ── storico */
.card--history { justify-content: flex-start; }
.history { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--sp-2); }
.history__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px;
  font-size: var(--fs-small); color: var(--ink);
}
.history__row--today .history__day { font-weight: 800; }
.ring { position: relative; width: 40px; height: 40px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--surface-2); stroke-width: 4; }
.ring__arc {
  fill: none; stroke: var(--ink-30); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray var(--t-mid) var(--ease), stroke var(--t-mid) var(--ease);
}
.ring--verde .ring__arc  { stroke: var(--accent); }   /* consumi bassi */
.ring--giallo .ring__arc { stroke: var(--warn); }     /* consumi medi */
.ring--rosso .ring__arc  { stroke: var(--danger); }   /* consumi alti */

@media (max-width: 719px) {
  .history { flex: none; flex-direction: row; justify-content: flex-start; overflow-x: auto; gap: var(--sp-4); padding-bottom: var(--sp-2); scrollbar-width: none; }
  .history::-webkit-scrollbar { display: none; }
  .history__row { flex-direction: column-reverse; gap: var(--sp-2); min-width: 64px; }
  .history__day { font-size: var(--fs-tiny); }
}

/* ── strette: le due card centrali in colonna */
@media (max-width: 479px) {
  .renew, .social { grid-template-columns: 1fr; }
  .card__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .card__caption--right { text-align: left; }
  .social__side, .state--right { align-items: flex-start; text-align: left; }
  .social__list { justify-content: flex-start; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__center { display: none; }
}