/**
 * base.css — layout e componenti, indipendenti dal tema (i colori
 * arrivano dalle custom property definite in theme-*.css).
 */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* rispetta le safe-area su telefoni con notch, utile anche in split-screen */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button { font-family: inherit; }

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Marchio in header: nel mockup di riferimento il tema "bylogix" mostra
 * un logo immagine + wordmark, il tema "microlino" solo testo minuscolo —
 * qui teniamo entrambe le versioni nel markup e ne mostriamo una sola
 * per tema via CSS (nessun JS necessario per lo swap). */
.app-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  /* flex-shrink (non flex:1 fisso) + min-width:0 + ellissi sul testo:
   * a schermi molto stretti (split-screen Android) il marchio si
   * accorcia invece di sovrapporsi ai pulsanti azione, che restano a
   * dimensione fissa (flex-shrink:0 su .app-header__actions sotto). */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.brand-logo--bylogix { display: none; height: 20px; width: auto; flex-shrink: 0; }
.brand-logo--microlino { display: none; text-transform: lowercase; font-weight: 600; }
:root[data-theme="bylogix"] .brand-logo--bylogix { display: block; }
:root[data-theme="microlino"] .brand-logo--microlino { display: inline; }
.app-header__title-text {
  color: var(--text-dim);
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Pill di stato connessione, nello stile delle "chip" del mockup di
 * riferimento (es. "Parcheggiata" / "Parked"): pallino + testo dentro
 * una pillola colorata, invece del solo pallino. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  color: var(--text-dim);
  transition: background-color .25s ease, color .25s ease;
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-pill.online { background: var(--success-bg); color: var(--success); }
.status-pill.offline { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.status-pill.demo { background: color-mix(in srgb, var(--warning) 20%, var(--surface)); color: var(--warning); }
.status-pill.parked { background: var(--success-bg); color: var(--success); }
.status-pill.moving { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }

/* Colore dell'eyebrow nel blocco hero, in base allo stato di
 * connessione (stesso ruolo del pallino di stato, integrato nel testo
 * come nel mockup di riferimento). Selettore composto (non solo la
 * classe modificatore) per battere in specificità la regola base
 * .hero-block__eyebrow più sotto nel file, che altrimenti vincerebbe
 * per ordine di dichiarazione. */
.hero-block__eyebrow.hero-eyebrow--online { color: var(--success); }
.hero-block__eyebrow.hero-eyebrow--offline { color: var(--danger); }
.hero-block__eyebrow.hero-eyebrow--demo { color: var(--warning); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn__badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* .icon-btn__badge{display:flex} sopra ha la stessa specificità della
 * regola [hidden]{display:none} del browser ma, essendo dichiarata nel
 * nostro foglio di stile, la batte comunque: senza questa riga il
 * badge resterebbe visibile (con "0") anche quando l'attributo
 * `hidden` è impostato da JS. */
.icon-btn__badge[hidden] { display: none; }

/* ------------------------------------------------------------ Dashboard */
.dashboard {
  flex: 1;
  padding: 16px;
  /* spazio per non far finire i contenuti sotto la bottom-nav fissa */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-content: start;
  container-type: inline-size;
  container-name: dashboard;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-shadow: var(--shadow-card);
}
.card__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.card__value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.card__value .unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
}
.card__value .pct {
  color: var(--accent);
}

/* ====================================================================
 * Blocco "hero" veicolo (eyebrow + nome + sottotitolo), stessa
 * composizione del mockup di riferimento, testo libero (non dentro una
 * card).
 * ==================================================================== */
.hero-block {
  grid-column: 1 / -1;
  padding: 4px 2px 0;
}
.hero-block__eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.hero-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-block__subtitle {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Foto veicolo, stesso componente del mockup: card arrotondata,
 * immagine 3:2 con object-fit:cover, pill di stato sovrapposta in alto
 * a sinistra, piccolo badge "segnaposto" in basso a destra. */
.card--photo { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
}
.photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame__pill {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.photo-frame__badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.62rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Card batteria: stessa composizione a due colonne del mockup
 * (percentuale grande a sinistra, statistica secondaria a destra),
 * barra sotto, didascalia con icona fulmine. */
.card--battery { grid-column: 1 / -1; }
.battery-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card__value--battery { font-size: 2.2rem; }
.battery-row__range { text-align: right; }
.card__value--range {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 3px;
  justify-content: flex-end;
}
.battery-row__range-label {
  margin: 2px 0 0;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.battery-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.battery-caption svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.battery-footnote {
  margin: 8px 0 0;
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.75;
}

/* Griglia azioni rapide 2x2: stesso componente "card icona + titolo +
 * sottotitolo" del mockup. */
.quick-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quick-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
}
.quick-cell:active { transform: scale(0.98); }
.quick-cell svg { width: 20px; height: 20px; color: var(--accent); }
.quick-cell__title { font-weight: 600; font-size: 0.9rem; }
.quick-cell__sub { font-size: 0.76rem; color: var(--text-dim); }

/* Striscia statistiche a 3 colonne separate da un filo verticale,
 * stesso componente del mockup. */
.stat-row {
  grid-column: 1 / -1;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stat-cell {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.stat-cell:first-child { border-left: none; }
.stat-cell--placeholder { opacity: 0.55; }
.stat-cell__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.stat-cell__label {
  margin: 3px 0 0;
  font-size: 0.65rem;
  color: var(--text-dim);
  line-height: 1.2;
}
.stat-row-footnote {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.75;
  text-align: center;
}

.btn--full {
  grid-column: 1 / -1;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  text-align: center;
}

/* Speed hero card: gauge grande, occupa più colonne */
.card--speed {
  grid-column: span 2;
  align-items: center;
  text-align: center;
  padding: 18px 14px 10px;
}
.speed-gauge {
  position: relative;
  width: min(220px, 60vw);
  aspect-ratio: 1;
}
.speed-gauge svg { width: 100%; height: 100%; }
.speed-gauge__track { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.speed-gauge__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}
.speed-gauge__readout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.speed-gauge__readout .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
}
.speed-gauge__readout .unit { color: var(--text-dim); font-size: 0.85rem; margin-top: -4px; }

/* SOC bar */
.soc-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 4px;
}
.soc-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--warning) 40%, var(--success) 75%);
  transition: width .4s ease;
}

/* Gear pills */
.gear-row { display: flex; gap: 6px; }
.gear-pill {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 700;
  font-family: var(--font-display);
  border: 1px solid transparent;
}
.gear-pill.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* Indicatori (luci/frecce/freni/vcu) come griglia di badge */
.indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}
.indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  opacity: .45;
  transition: opacity .2s ease, color .2s ease;
}
.indicator.on {
  opacity: 1;
  color: var(--accent-2);
}
.indicator.warn.on { color: var(--warning); }
.indicator.danger.on { color: var(--danger); }
.indicator svg { width: 22px; height: 22px; }
.indicator span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
}

/* DTC */
.dtc-card { grid-column: 1 / -1; }
.dtc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dtc-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 700; font-size: 0.85rem;
}
.dtc-count.has-codes { background: var(--danger); color: var(--accent-contrast); }
.dtc-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dtc-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.dtc-item__code { font-family: var(--font-display); font-weight: 700; }
.dtc-item__desc { color: var(--text-dim); font-size: 0.85rem; }
.dtc-item__flags { font-size: 0.72rem; color: var(--warning); }
.dtc-empty { color: var(--text-dim); font-size: 0.9rem; padding: 6px 0; }
.dtc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.btn--danger { background: var(--danger); color: var(--accent-contrast); border-color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------- Layout compatto
 * per split-screen Android: sotto una certa larghezza del contenitore
 * dashboard, tutto va a colonna singola e i testi si riducono un filo. */
@container dashboard (max-width: 420px) {
  .dashboard { grid-template-columns: 1fr 1fr; }
  .card--speed { grid-column: 1 / -1; }
  .speed-gauge { width: min(170px, 55vw); }
  .speed-gauge__readout .num { font-size: 2rem; }
  .card__value { font-size: 1.3rem; }
}
@container dashboard (max-width: 260px) {
  .dashboard { grid-template-columns: 1fr; }
}

/* Override manuali dal cursore "Compattezza layout" nelle Opzioni,
 * indipendenti dalle container query (utili quando lo split-screen
 * nativo non riduce la larghezza abbastanza da far scattare @container,
 * o quando l'utente preferisce comunque un layout più denso). */
.dashboard.compact-1 { grid-template-columns: 1fr 1fr; }
.dashboard.compact-1 .card--speed { grid-column: 1 / -1; }
.dashboard.compact-1 .speed-gauge { width: min(170px, 55vw); }
.dashboard.compact-2 { grid-template-columns: 1fr; }
.dashboard.compact-2 .card--speed { grid-column: 1 / -1; }
.dashboard.compact-2 .speed-gauge { width: min(150px, 50vw); }

/* ------------------------------------------------------------ Opzioni */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* Bottom sheet (non più drawer laterale): stile coerente col mockup di
 * riferimento — angoli superiori arrotondati larghi, ombra pronunciata,
 * si apre scorrendo dal basso, più naturale su telefono che un pannello
 * laterale in stile desktop. */
.options-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  max-height: 88vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-elevated);
  transform: translateY(100%);
  transition: transform .28s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px 18px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.options-sheet.open { transform: translateY(0); }

/* "Grabber" in cima al foglio, per suggerire visivamente che si trascina/chiude */
.options-sheet::before {
  content: "";
  display: block;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 6px auto 14px;
}

.options-sheet h2 {
  font-family: var(--font-display);
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.options-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.options-section h3 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.field-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  gap: 10px;
}
.field-row__label { font-size: 0.92rem; }
.field-row__hint { font-size: 0.75rem; color: var(--text-dim); }

.switch {
  position: relative;
  width: 46px; height: 26px;
  flex-shrink: 0;
}
/* z-index sopra track/thumb + pointer-events:none su di loro: l'input
 * (invisibile ma cliccabile) deve essere l'unico a ricevere tap/click,
 * altrimenti su alcuni browser/touch il tocco sul track non attiva
 * l'interruttore (bug verificato con test automatico). */
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color .2s ease;
  pointer-events: none;
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-dim);
  transition: transform .2s ease, background-color .2s ease;
  pointer-events: none;
}
.switch input:checked + .track { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); border-color: var(--accent); }
.switch input:checked + .track + .thumb { transform: translateX(20px); background: var(--accent); }

.theme-picker { display: flex; gap: 10px; }
.theme-swatch {
  flex: 1;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  padding: 10px;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  font-weight: 600;
}
.theme-swatch.active { border-color: var(--accent); }
.theme-swatch .swatch-dots { display: flex; gap: 4px; margin-bottom: 8px; }
.theme-swatch .swatch-dots span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

.text-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.slider-row input[type="range"] { width: 100%; }

.status-banner {
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.82rem;
  margin-top: 10px;
}
.status-banner.error { background: color-mix(in srgb, var(--danger) 20%, var(--surface)); color: var(--danger); }
.status-banner.info { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-2); }

/* ====================================================================
 * Barra di navigazione inferiore: stesso componente del mockup di
 * riferimento (scheda flottante, angoli superiori arrotondati). I tab
 * scorrono a sezioni reali della pagina; "Opzioni" apre lo stesso
 * pannello del pulsante ⋮ in header.
 * ==================================================================== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 30;
  display: flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-elevated);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--radius-sm);
}
.bottom-nav__item svg { width: 21px; height: 21px; }
.bottom-nav__item.active { color: var(--accent); }
.bottom-nav__item:active { background: var(--surface-2); }

.split-screen-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}