/* Tema dark OLED per Servizi Buttafuori (§2 del brief).
   CSS scritto a mano, niente Tailwind: la palette è stabile, non serve un
   framework di utility per uno stile che non cambia da schermata a schermata. */

:root {
  --colore-sfondo: #0A0A0B;
  --colore-superficie: #17171a;
  --colore-superficie-alta: #202024;
  --colore-bordo: #2a2a2e;
  --colore-testo: #f5f5f5;
  --colore-testo-attenuato: #9a9a9f;
  --colore-accento: #EAB308;
  --colore-accento-hover: #fbbf24;
  --colore-accento-testo: #0A0A0B;
  --colore-errore: #f87171;
  --colore-successo: #4ade80;

  --font-testo: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-cifre: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --raggio: 12px;
  --raggio-piccolo: 8px;
  --tocco-minimo: 44px;
}

* {
  box-sizing: border-box;
}

/* L'attributo hidden va sempre rispettato, anche quando un'altra regola
   imposta un display esplicito sullo stesso elemento (es. .schermo-login
   con display:flex per centrarla quando è visibile) — senza questa riga
   quella regola vince sul default [hidden]{display:none} dello UA
   stylesheet e l'elemento resta visibile nonostante hidden=true. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: var(--font-testo);
  -webkit-font-smoothing: antialiased;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-height: 100vh;
}

h1, h2, h3 {
  margin: 0 0 8px;
  font-weight: 600;
}

p {
  margin: 0 0 12px;
  color: var(--colore-testo-attenuato);
}

.numero {
  font-family: var(--font-cifre);
  font-variant-numeric: tabular-nums;
}

/* --- layout --- */

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 96px; /* spazio per il bottone flottante "nuovo servizio" */
}

.schermo-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.schermo-login h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.intestazione h1 {
  font-size: 20px;
}

.barra-azioni {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* --- bottoni e input --- */

button, .bottone {
  font-family: inherit;
  font-size: 15px;
  min-height: var(--tocco-minimo);
  padding: 0 16px;
  border-radius: var(--raggio-piccolo);
  border: 1px solid var(--colore-bordo);
  background: var(--colore-superficie-alta);
  color: var(--colore-testo);
  cursor: pointer;
}

button:active, .bottone:active {
  transform: scale(0.98);
}

.bottone-primario {
  background: var(--colore-accento);
  border-color: var(--colore-accento);
  color: var(--colore-accento-testo);
  font-weight: 600;
}

.bottone-primario:hover {
  background: var(--colore-accento-hover);
  border-color: var(--colore-accento-hover);
}

.bottone-pericolo {
  color: var(--colore-errore);
  border-color: var(--colore-errore);
}

.bottone-testo {
  background: none;
  border: none;
  color: var(--colore-testo-attenuato);
  text-decoration: underline;
  min-height: var(--tocco-minimo);
}

.bottone-flottante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--colore-accento);
  color: var(--colore-accento-testo);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

input, select, textarea {
  font-family: inherit;
  font-size: 16px; /* >=16px evita lo zoom automatico di Safari iOS sul focus */
  min-height: var(--tocco-minimo);
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--raggio-piccolo);
  border: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--colore-accento);
  outline-offset: -1px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--colore-testo-attenuato);
  margin-bottom: 4px;
}

.campo {
  margin-bottom: 14px;
}

.riga-campi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hint {
  font-size: 12px;
  color: var(--colore-accento);
  margin-top: 4px;
}

.errore {
  color: var(--colore-errore);
  font-size: 13px;
  margin: 8px 0;
}

/* --- chip luoghi --- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.chip {
  min-height: var(--tocco-minimo);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.chip.selezionato {
  background: var(--colore-accento);
  border-color: var(--colore-accento);
  color: var(--colore-accento-testo);
  font-weight: 600;
}

/* --- navigazione mese --- */

.nav-mese {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nav-mese h2 {
  font-size: 18px;
  min-width: 160px;
  text-align: center;
}

.riepilogo-mese {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.riepilogo-mese .voce-totale {
  font-size: 12px;
  color: var(--colore-testo-attenuato);
}

.riepilogo-mese .voce-totale .numero {
  display: block;
  font-size: 18px;
  color: var(--colore-testo);
}

.riepilogo-mese .totale-finale {
  grid-column: 1 / -1;
  border-top: 1px solid var(--colore-bordo);
  padding-top: 10px;
  margin-top: 4px;
}

.riepilogo-mese .totale-finale .numero {
  font-size: 26px;
  color: var(--colore-accento);
}

/* --- chiusura mese (§5-bis) --- */

.chiusura-mese {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 16px;
}

.chiusura-mese summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tocco-minimo);
}

.chiusura-mese summary .numero {
  color: var(--colore-accento);
  font-size: 17px;
}

.chiusura-corpo {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--colore-bordo);
}

.chiusura-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chiusura-griglia .voce-totale {
  font-size: 12px;
  color: var(--colore-testo-attenuato);
}

.chiusura-griglia .voce-totale .numero {
  display: block;
  font-size: 15px;
  color: var(--colore-testo);
}

.chiusura-confronto {
  margin: 10px 0 0;
  font-size: 13px;
}

/* --- grafico a barre 12 mesi --- */

.grafico-mesi {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  margin-bottom: 20px;
  padding: 0 2px;
}

.barra-mese {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
}

.barra-mese .barra {
  width: 100%;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--colore-superficie-alta);
}

.barra-mese.mese-corrente .barra {
  background: var(--colore-accento);
}

.barra-mese .etichetta {
  font-size: 10px;
  color: var(--colore-testo-attenuato);
}

/* --- lista servizi --- */

.lista-servizi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.scheda-servizio {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.scheda-servizio .dettagli {
  min-width: 0;
}

.scheda-servizio .luogo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheda-servizio .meta {
  font-size: 12px;
  color: var(--colore-testo-attenuato);
}

.scheda-servizio .totale {
  font-size: 17px;
  white-space: nowrap;
}

.vuoto {
  text-align: center;
  color: var(--colore-testo-attenuato);
  padding: 32px 16px;
}

/* --- stato di salvataggio --- */

.stato-salvataggio {
  font-size: 12px;
  color: var(--colore-testo-attenuato);
}

.stato-salvataggio.errore {
  color: var(--colore-errore);
}

.stato-salvataggio.ok {
  color: var(--colore-successo);
}

/* --- overlay/dialog di conferma --- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 30;
}

.dialog {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

.dialog .azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

.dialog-grande {
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.dialog-grande .azioni {
  position: sticky;
  bottom: -20px;
  background: var(--colore-superficie);
  padding-top: 12px;
  margin-top: 16px;
}

.interruttore {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tocco-minimo);
}

.interruttore input {
  width: 22px;
  height: 22px;
  min-height: 0;
}

/* --- import --- */

textarea.area-import {
  min-height: 160px;
  font-family: var(--font-cifre);
  font-size: 13px;
}

.report-import {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-top: 12px;
}

.report-import ul {
  margin: 8px 0 0;
  padding-left: 20px;
}