/* Domus – foglio di stile
   Palette: fondo neutro con velatura verde, verde profondo come primario,
   ogni modulo ha un proprio colore identità. */

:root {
  --bg: #EEF0EA;
  --bg-2: #E6E9E0;
  --card: #FCFCFA;
  --ink: #1F241F;
  --muted: #69705F;
  --line: #DCE0D4;
  --primario: #2E5D4F;
  --primario-scuro: #21463B;
  --primario-chiaro: #3C7A67;
  --ok: #2E7D4F;
  --errore: #A63A3A;
  --avviso-bg: #FBF3E2;
  --avviso-bordo: #D9A741;
  /* colori identità moduli */
  --c-consumi: #B9822F;
  --c-manutenzioni: #4A6B8A;
  --c-giardino: #4C8A4F;
  --c-auto: #A65B45;
  --raggio: 12px;
  --ombra: 0 1px 2px rgba(30, 40, 32, .05), 0 6px 18px -12px rgba(30, 40, 32, .25);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1200px 500px at 100% -10%, rgba(46, 93, 79, .10), transparent 60%),
                    radial-gradient(900px 400px at -10% 0%, rgba(46, 93, 79, .06), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* colore modulo attivo, usato da bordi e accenti */
body.mod-consumi { --modulo: var(--c-consumi); }
body.mod-manutenzioni { --modulo: var(--c-manutenzioni); }
body.mod-giardino { --modulo: var(--c-giardino); }
body.mod-auto { --modulo: var(--c-auto); }
body.mod-home, body.mod-admin { --modulo: var(--primario); }

/* ---------- barra superiore ---------- */
.topbar {
  background: linear-gradient(180deg, var(--primario-chiaro) 0%, var(--primario) 55%, var(--primario-scuro) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 1.2rem;
  min-height: 60px;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 20px -14px rgba(0,0,0,.6);
}
.marchio {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  letter-spacing: .14em;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.marchio-logo {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  padding: 4px;
  box-sizing: content-box;
}
.marchio span { padding-top: 2px; }
.nav { display: flex; gap: .1rem; flex-wrap: wrap; }
.nav-voce {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  padding: .42rem .8rem;
  border-radius: 8px;
  font-size: .95rem;
  display: inline-block;
}
.nav-voce:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-voce.attiva { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 600; }
.utente-box { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.utente-nome { font-size: .9rem; display: flex; flex-direction: column; line-height: 1.15; }
.utente-nome small { opacity: .7; text-transform: capitalize; }

/* ---------- struttura ---------- */
.contenuto { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.2rem 2.5rem; }
.piede { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem; }

h1 { font-size: 1.55rem; margin: .2rem 0 1.1rem; display: flex; align-items: center; gap: .6rem; }
.titolo-icona {
  color: var(--modulo, var(--primario));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--ombra);
}
h2 { font-size: 1.12rem; margin: 0 0 .8rem; }
h3 { font-size: 1rem; margin: 0 0 .6rem; }

.riquadro {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.2rem;
}
.riquadro h2 { display: flex; align-items: center; gap: .5rem; }
.riquadro.accento {
  border-top: none;
  position: relative;
  overflow: hidden;
}
.riquadro.accento::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--modulo, var(--primario)), transparent 80%);
}

.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 860px) { .griglia-2 { grid-template-columns: 1fr; } }

/* ---------- dashboard ---------- */
.card-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.card-modulo {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card-modulo::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cm, var(--primario));
  opacity: .85;
}
.card-modulo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(30, 40, 32, .35); border-color: var(--cm, var(--primario)); }
.card-icona {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--cm, var(--primario));
  background: #F1EFE9;
  background: color-mix(in srgb, var(--cm, var(--primario)) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--cm, var(--primario)) 22%, transparent);
}
.card-testo { min-width: 0; }
.card-modulo h2 { color: var(--cm, var(--primario)); margin-bottom: .3rem; }
.card-modulo p { margin: 0; color: var(--muted); font-size: .9rem; }
.cm-consumi { --cm: var(--c-consumi); }
.cm-manutenzioni { --cm: var(--c-manutenzioni); }
.cm-giardino { --cm: var(--c-giardino); }
.cm-auto { --cm: var(--c-auto); }

/* ---------- avvisi e flash ---------- */
.flash { border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; font-size: .95rem; }
.flash-ok { background: #E7F2E9; border: 1px solid #B7D8BF; color: #21532F; }
.flash-errore { background: #F9E8E8; border: 1px solid #E0B4B4; color: #7A2626; }
.avviso { background: var(--avviso-bg); border: 1px solid var(--avviso-bordo); border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; }

/* ---------- schede (tab) ---------- */
.schede { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.1rem; border-bottom: 2px solid var(--line); }
.scheda {
  text-decoration: none;
  color: var(--muted);
  padding: .5rem 1rem;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.scheda-icona { opacity: .7; }
.scheda:hover { color: var(--ink); background: rgba(0, 0, 0, .03); }
.scheda.attiva { color: var(--modulo, var(--primario)); border-bottom-color: var(--modulo, var(--primario)); }
.scheda.attiva .scheda-icona { opacity: 1; }

/* ---------- form ---------- */
form.inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.campo label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
.btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--modulo, var(--primario));
  outline-offset: 1px;
}
.campo-s { width: 8.5rem; }
.campo-m { width: 13rem; }
.campo-l { flex: 1 1 16rem; }

.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  background: var(--modulo, var(--primario));
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { filter: brightness(1.08); }
.btn-neutro { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .4); font-weight: 500; }
.btn-secondario { background: #fff; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn-secondario:hover { background: var(--bg); filter: none; }
.btn-pericolo { background: transparent; color: var(--errore); border: 1px solid transparent; padding: .2rem .5rem; font-weight: 500; }
.btn-pericolo:hover { border-color: var(--errore); filter: none; }
.btn-piccolo { padding: .28rem .7rem; font-size: .85rem; }

/* ---------- tabelle ---------- */
.tab-scroll { overflow-x: auto; }
table.dati { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.dati th {
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  padding: .5rem .6rem;
  white-space: nowrap;
}
table.dati td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.dati tr:hover td { background: rgba(0, 0, 0, .02); }
table.dati td.num, table.dati th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dati tr.totale td { font-weight: 700; border-top: 2px solid var(--line); }
table.dati tr.evidenzia td { background: var(--avviso-bg); }
table.dati tr.urgente td { background: #F9E8E8; }

.barra { background: var(--line); border-radius: 4px; height: 8px; min-width: 60px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--modulo, var(--primario)); border-radius: 4px; }

.delta { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .88rem; }
.delta.su { color: var(--errore); font-weight: 600; }
.delta.giu { color: var(--ok); font-weight: 600; }

.pillola { display: inline-block; font-size: .75rem; font-weight: 600; padding: .12rem .55rem; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.pillola.attiva { background: #E7F2E9; border-color: #B7D8BF; color: #21532F; }
.pillola.scaduta { background: #F9E8E8; border-color: #E0B4B4; color: #7A2626; }
.pillola.presto { background: var(--avviso-bg); border-color: var(--avviso-bordo); color: #7A5A16; }

.nota-piccola { color: var(--muted); font-size: .82rem; margin-top: .5rem; }

/* ---------- modulo Auto: schede veicolo e dettaglio ---------- */
.schede-veicoli .scheda-dismesso { opacity: .55; }
.schede-veicoli .scheda-gestione { margin-left: auto; }
.scheda-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: .1rem; }
.scheda-dot.dot-rosso { background: var(--errore); }
.scheda-dot.dot-giallo { background: var(--avviso-bordo); }
.veicolo-testata { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.veicolo-nome { display: flex; align-items: center; gap: .8rem; }
.veicolo-icona {
  color: var(--modulo, var(--primario));
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--modulo, var(--primario)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--modulo, var(--primario)) 20%, transparent);
}
.veicolo-icona-logo { background: #fff; border-color: var(--line); }
/* logo marca auto (immagine self-hosted o monogramma di riserva) */
.logo-marca { display: inline-block; vertical-align: middle; object-fit: contain; border-radius: 6px; }
.logo-monogramma {
  color: #fff;
  font-weight: 700;
  font-family: Georgia, serif;
  letter-spacing: .01em;
  line-height: 1;
  border-radius: 7px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* logo remoto sovrapposto: nascosto finché non carica; se fallisce viene rimosso da app.js */
.logo-auto-box { position: relative; overflow: hidden; }
.logo-remoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 8%;
  box-sizing: border-box;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .2s ease;
}
.logo-remoto.caricato { opacity: 1; }
.veicolo-riga { display: inline-flex; align-items: center; gap: .5rem; }
.schede-veicoli .logo-marca { border-radius: 5px; }
.sotto-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.sotto-form h3 { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- login ---------- */
.login-pagina { display: flex; align-items: center; justify-content: center; flex: 1; padding: 2rem 1rem; }
.login-box { width: 100%; max-width: 380px; }
.login-marchio {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
}
.login-marchio svg {
  color: #fff;
  background: linear-gradient(180deg, var(--primario-chiaro), var(--primario) 60%, var(--primario-scuro));
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 10px 22px -10px rgba(46, 93, 79, .6);
}
.login-box .marchio-grande {
  font-family: Georgia, serif;
  font-size: 2.4rem;
  letter-spacing: .16em;
  color: var(--primario);
  text-align: center;
  display: block;
  margin-bottom: .2rem;
}
.login-box .sottotitolo { text-align: center; color: var(--muted); margin: 0 0 1.4rem; font-size: .95rem; }
.login-box .campo { margin-bottom: .9rem; }
.login-box .btn { width: 100%; }

@media (max-width: 640px) {
  .topbar { padding: .5rem .8rem; }
  .contenuto { padding: 1rem .8rem 2rem; }
  form.inline .campo { flex: 1 1 100%; }
  form.inline .campo-s, form.inline .campo-m { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .card-modulo { transition: none; }
}