/* dashboard/css/66-auth.css — estratto da app.css (2026-07, split senza build). */
/* === S1b auth (ADR 0024) ===
   Token substitution rispetto al plan (tokens originali non esistono in shared/tokens.css):
   --bg-elev1   -> --surface       (white card)
   --border     -> --line          (grigio chiaro divisorio)
   --brand-hover -> --brand-dark   (rosso scuro hover)
   --err-bg     -> --brand-soft    (pink chiaro, unico soft-bg disponibile)
   --err-text   -> --danger        (rosso #DC2626 WCAG AA su --brand-soft) */
.auth-container { max-width: 420px; margin: 60px auto; padding: 32px; background: var(--surface); border-radius: 12px; }
.auth-container h1 { font-size: 24px; margin-bottom: 24px; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.auth-field input { width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; }
.auth-field input:focus { outline: 2px solid var(--brand); }
.auth-error { background: var(--brand-soft); color: var(--danger); padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.auth-intro { margin: 0 0 24px; color: var(--ink-2); }
.auth-help { margin: 6px 0 0; font-size: 13px; }
.auth-help a { color: var(--ink-3); text-decoration: underline; }
.auth-help a:hover { color: var(--ink); }
.auth-link { margin-top: 16px; text-align: center; }
.auth-container .btn-primary { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; background: var(--brand); color: white; border: 0; border-radius: 8px; cursor: pointer; }
.auth-container .btn-primary:hover { background: var(--brand-hover); }

/* Countdown row sotto progress-bar nella card macchina in_uso (live Miele MOVE).
   Pattern label-piccola-sopra + valore-grande-sotto in 2 colonne (sx Tempo
   residuo / dx Fine prevista). */
.machine-card .countdown-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 10px; padding: 0 16px 4px; gap: 16px; }
.machine-card .countdown-row .cd-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.machine-card .countdown-row .cd-right { align-items: flex-end; text-align: right; }
.machine-card .countdown-row .cd-lbl { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* F8 · eco aggregato tokens + component classes (2026-05-21).
   --alarm / --service: colori insight severi + manutenzione.
   --warn-bg / --info-bg / --alarm-bg / --service-bg: sfondi tono pastello.
   --info-200..800: rampa intensità per heatmap (crescente dal chiaro al scuro). */
:root {
  --alarm:       #C1432D;
  --alarm-bg:    #FEF2F0;
  --service:     #D97706;
  --service-bg:  #fff4d6;
  --warn-bg:     #fff4d6;
  --info-bg:     #eaf2ff;
  --info-200:    #a8c7e8;
  --info-400:    #5b8dbf;
  --info-600:    #2d5bc4;
  --info-800:    #1e3d8a;
}

.eco-insight {
  padding: 10px 14px;
  border-left: 3px solid var(--ink-3);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  background: var(--surface);
}
.eco-insight--warn    { border-left-color: var(--warn);    background: var(--warn-bg); }
.eco-insight--alarm   { border-left-color: var(--alarm);   background: var(--alarm-bg); }
.eco-insight--info    { border-left-color: var(--info);    background: var(--info-bg); }
.eco-insight--service { border-left-color: var(--service); background: var(--service-bg); }
.eco-insight a { font-weight: 600; }

.bar-cell { display: block; }
.bar-fill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--info);
  color: #fff;
  font-size: 11px;
}
.bar-fill--muted { background: var(--info-bg); color: var(--ink); }

.hm-grid {
  display: grid;
  grid-template-columns: 32px repeat(8, 1fr);
  gap: 2px;
  font-size: 10px;
}
.hm-cell {
  height: 16px;
  border-radius: 1px;
}
.hm-cell--lvl0 { background: var(--info-bg); }
.hm-cell--lvl1 { background: var(--info-200); }
.hm-cell--lvl2 { background: var(--info-400); }
.hm-cell--lvl3 { background: var(--info-600); }
.hm-cell--lvl4 { background: var(--info-800); }
.hm-cell--peak { outline: 2px solid var(--alarm); }
.machine-card .countdown-row .cd-val { font-size: 16px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }