/* frontend/css/styles.css — TUTTI i colori in hex hardcoded (README §Design Tokens) */
:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F4F3F1; color: #1C1A18; -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; }
.archivo { font-family: Archivo, -apple-system, sans-serif; }

/* layout app-shell */
.screen { display: flex; flex-direction: column; min-height: 100vh; }
.screen--dark { background: #161412; }
.header-dark { background: #161412; color: #FFFFFF; padding: 56px 22px 22px; }
.content { padding: 18px 16px 90px; }

/* header titoli */
.eyebrow { font: 700 11px Archivo; letter-spacing: .7px; text-transform: uppercase; color: #857F77; }
.screen-title { font: 800 26px Archivo; color: #FFFFFF; line-height: 1.1; }

/* card */
.card { background: #FFFFFF; border: 1px solid #E8E5E2; border-radius: 10px; padding: 14px; }

/* bottoni */
.btn { border: none; border-radius: 8px; padding: 16px; font: 700 14px Archivo;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer; width: 100%; }
.btn--primary { background: #C20E1A; color: #FFFFFF; }
.btn--primary:active { background: #9E0A13; }
.btn--outline-dark { background: transparent; color: #FFFFFF; border: 1px solid #4A443E; }

/* input scuri (login/register) */
.field-label { display: block; font: 700 11px Archivo; letter-spacing: .6px;
  text-transform: uppercase; color: #857F77; margin-bottom: 8px; }
.input-dark { width: 100%; background: #211E1B; border: 1px solid #38332E; border-radius: 8px;
  padding: 15px; color: #FFFFFF; font: 400 15px Inter; }

/* badge stato (filled) */
.badge { display: inline-block; border-radius: 6px; padding: 4px 9px;
  font: 700 10px Archivo; letter-spacing: .5px; text-transform: uppercase; color: #FFFFFF; }
.badge--aperto { background: #C20E1A; }
.badge--in_lavorazione { background: #57534E; }
.badge--chiuso { background: #1E7F3C; }
.badge--annullato { background: #E8E5E2; color: #5A534A; }
.badge--in_scadenza { background: #B5790B; }
.badge--scaduto { background: #C20E1A; }
.maint-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.maint-dot--in_scadenza { background: #B5790B; }
.maint-dot--scaduto { background: #C20E1A; }

/* banner cliente sospeso */
.susp-banner { background: #FBE9E7; color: #8A2C22; border: 1px solid #F2C4BC; border-radius: 10px; padding: 10px 14px; font: 600 13px Inter; margin: 12px 16px; }

/* bottoni tipo richiesta (assistenza/ricambio) */
.tipo-opt { flex: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 14px Archivo; }

/* tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #161412;
  border-top: 1px solid #2A2622; padding: 10px 4px 22px; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: #857F77; font: 600 10px Inter; }
.tabbar a.active { color: #C20E1A; }

/* utility */
.muted { color: #79736C; }
.row { display: flex; align-items: center; gap: 12px; }

/* --- Desktop: la PWA è mobile-first → su schermi larghi la incorniciamo in
   una colonna centrata a larghezza telefono, invece di spalmarla a tutto schermo --- */
.screen { max-width: 480px; margin-inline: auto; }
.tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 480px; }
/* logo auth (login/register): evita lo stretch orizzontale del flex, resta a sinistra a dimensione naturale */
.brand-logo { align-self: flex-start; width: auto; }

.tab-badge {
  position: absolute;
  top: 4px;
  margin-left: 14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #C20E1A;
  color: #fff;
  font: 700 10px/16px Inter, sans-serif;
  text-align: center;
}
.tabbar a { position: relative; }

.novita-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #C20E1A;
  vertical-align: middle;
}