/*
 * Base dell'app: font, colori e misure di GastroSupply (docs/riferimento_gastro/), impaginati
 * per tablet come il mockup (assets/mockup/). Un file per pagina o componente: qui solo ciò
 * che vale ovunque.
 */

/* Dal 20/10/2026 font e colori sono quelli del design system Figma «GastroSupply-shared»
   (docs/design_system_figma.md): Inter per tutto, titoli compresi. */
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-variable-884c49a1.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-family: "Inter", sans-serif;
  --font-family-display: "Inter", sans-serif;
  --app-canvas-background: #f7f4ef; /* Figma System/Background */
  --app-surface: #ffffff;
  --app-ink: #313f3e; /* System/Title */
  --app-accent: #2e60ff; /* Brand/Electric blue */
  --app-brand-gold: #eb5930; /* Brand/Coral orange: il secondo colore del marchio */
  --app-brand-gold-faint: #f9cdc1; /* Brand/Coral orange light */
  --app-accent-soft: rgba(46, 96, 255, 0.25);
  --app-accent-faint: #eaefff; /* Brand/Electric blue-Ultralight */
  --app-accent-light: #d5dfff; /* Brand/Electric blue-light */
  --app-accent-hover: #1f4fe6; /* il blu pieno sotto il mouse, un tono più scuro */
  --app-muted: #455957; /* System/Paragraph */
  --app-placeholder: #808484; /* System/Placeholder */
  --app-border: #e5e7eb; /* Tailwind/Gray-200 */
  --app-border-strong: #8c9796; /* System/Borders */
  --app-danger: #b91c1c; /* Tailwind/Red-700 */
  --app-danger-faint: #fee2e2; /* Tailwind/Red-100 */
  --app-success: #00b980; /* System/Green */
  --app-success-faint: #e5f8f2; /* System/Light green */
  --app-warning: #a16207; /* Tailwind/Yellow-700 */
  --app-warning-faint: #fef3c7; /* Tailwind/Yellow-100 */
  --app-purple: #7c3aed; /* Tailwind/Violet-600: da confermare, Amèlie, il promemoria */
  --app-purple-faint: #ede9fe; /* Tailwind/Violet-100 */
  --app-indigo: #4338ca; /* Tailwind/Indigo-700: il dato informativo, il secondo colore dei mockup */
  --app-indigo-faint: #eef2ff; /* Tailwind/Indigo-50 */
  --app-surface-muted: #f3f4f6; /* Tailwind/Gray-100: i fondi neutri dentro le card (foto senza immagine) */
  --app-line: #d1d5db; /* Tailwind/Gray-300: la riga dentro una fascia tinta */
  --app-veil: rgba(49, 63, 62, 0.7); /* System/Title al 70 %: il velo sotto pannelli e finestre */
  --app-on-color: #ffffff; /* il testo sui fondi pieni: bottone blu, chip pieni, numero rosso */
  color-scheme: light;
  --shadow: none;
  --radius: 0.5rem; /* Figma: campi, bottoni, tendine e chip a 8 px */
  --radius-sm: 0.25rem; /* Figma: la casella della spunta a 4 px */
  /* Tablet: niente da toccare sotto i 44 px. */
  --touch: 2.75rem;
  --topbar-height: 0px; /* la barra in alto non c'è più (20/10/2026) */
  --side-nav-width: 5.5rem;
  --statusbar-height: 3.875rem;
  /* La barra delle sezioni in basso esiste solo col tablet in verticale (components/side_nav.css);
     --bottom-bars è tutto lo spazio occupato in basso, da usare per le distanze dal fondo. */
  --tabbar-height: 0px;
  --bottom-bars: calc(var(--statusbar-height) + var(--tabbar-height));
}

/* Il tema scuro (Mattias, 25/10/2026): theme.js mette data-theme="dark" sull'html quando l'agente lo
   sceglie nell'account o quando il tablet è scuro. Il design system Figma non ha una tavolozza scura:
   questa tiene i grigi neutri e gli stessi significati dei colori, con le tinte un po' più chiare
   per reggere sul fondo scuro e i «faint» trasparenti, così stanno su qualunque card. Tutto il resto
   dell'app legge solo i token: niente colori scritti a mano fuori da qui (ombre e veli sulle foto
   a parte). I PDF restano chiari, hanno il loro layout. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --app-canvas-background: #121417;
  --app-surface: #1c1f24;
  --app-surface-muted: #272b32;
  --app-ink: #e9ecf0;
  --app-muted: #b3bac2;
  --app-placeholder: #8a929b;
  --app-border: #30353d;
  --app-border-strong: #6c747d;
  --app-line: #3b414a;
  --app-accent: #6b8fff;
  --app-accent-hover: #87a4ff;
  --app-accent-soft: rgba(107, 143, 255, 0.35);
  --app-accent-faint: rgba(107, 143, 255, 0.16);
  --app-accent-light: rgba(107, 143, 255, 0.3);
  --app-brand-gold: #ff7d62;
  --app-brand-gold-faint: rgba(255, 125, 98, 0.2);
  --app-danger: #f47171;
  --app-danger-faint: rgba(244, 113, 113, 0.18);
  --app-success: #2fd39a;
  --app-success-faint: rgba(47, 211, 154, 0.16);
  --app-warning: #f2c14e;
  --app-warning-faint: rgba(242, 193, 78, 0.16);
  --app-purple: #b094ff;
  --app-purple-faint: rgba(176, 148, 255, 0.18);
  --app-indigo: #8f97f7;
  --app-indigo-faint: rgba(143, 151, 247, 0.18);
  --app-veil: rgba(0, 0, 0, 0.72);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::placeholder {
  color: var(--app-placeholder);
  opacity: 1;
}

/* Effetto app, non pagina web (come in Del Mar): a fine pagina lo scorrimento si ferma senza
   rimbalzo elastico, niente ricarica trascinando verso il basso, niente scorrimento laterale
   per sbaglio. overflow-x: clip e non hidden: hidden farebbe di body un contenitore di
   scorrimento e spegnerebbe gli sticky (barra in alto, categorie del catalogo). */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* Il mockup è disegnato a 1280 px di larghezza. Sui tablet più stretti in orizzontale
   (iPad 1024–1180 px) tutto scala in proporzione, perché le misure sono in rem: la
   disposizione resta quella del mockup, niente va a capo e niente esce dallo schermo. */
@media (min-width: 901px) and (max-width: 1279px) {
  html {
    font-size: calc(100vw / 80);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: var(--bottom-bars);
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--app-ink);
  background: var(--app-canvas-background);
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* Niente lampo grigio al tocco e niente attesa del doppio tocco sui comandi. */
a,
button,
label,
summary,
input[type="submit"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-family-display);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Nessuna barra di scorrimento in tutta l'app: si scorre col dito e si capisce da sé.
   Nessun overscroll-behavior: contain, così a fine elenco lo scorrimento passa alla
   pagina (le liste dentro una card arrivano in fondo invece di restare a metà). */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

.logo {
  display: block;
  width: auto;
  height: 2.75rem;
}

/* Il guscio dell'app (layout application): niente barra in alto, la colonna delle sezioni a
   sinistra (components/_side_nav) e la barra di stato in fondo; il corpo lascia lo spazio a
   entrambe. --topbar-height resta a zero per chi ci si allineava. */
.app-shell {
  padding-left: var(--side-nav-width);
  /* Il viola che il designer usa per «da confermare» e per i blocchi vuoti: nel nuovo ordine per il
     conteggio del carrello e il carrello vuoto (order_composer_cards.css). */
  --order-purple: #7c3aed;
  --order-purple-faint: #ede9fe;
}

.app-shell .connection-status {
  bottom: var(--tabbar-height);
  left: var(--side-nav-width);
}

/* Il promemoria degli ordini WhatsApp da verificare (components/_whatsapp_reminder), sotto la
   testata di ogni pagina (frame iPad «promemoria in altra sezione»): 560 px, centrato, nel flusso. */
.app-reminder {
  width: min(35rem, 100%);
  margin: 0 auto 1rem;
  padding: 0 1.5rem;
}

.icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.page {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 1.5rem;
}

.page--narrow {
  max-width: 40rem;
}

.page__lead {
  margin: 0.25rem 0 0;
  color: var(--app-muted);
}

/* Le card come nelle schermate iPad di Figma: bianche, bordo Gray-200, raggio 8, 16 px di
   riempimento, senza ombra. */
.card {
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--app-surface);
}

/* Il titolo di un gruppo dentro una card o una lista (le portate del menu, le famiglie del listino, i
   blocchi del cassetto di modifica, il carrello): 600 16, senza icona, il numero come chip grigio piccolo.
   Il titolo di sezione, fuori dalla card con l'icona tinta, è .summary-section__title (regola «Titoli»
   in docs/design_system_figma.md, 26/10/2026). */
.group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.flash {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--bottom-bars) + 0.75rem);
  z-index: 6;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  pointer-events: none;
  color: var(--app-on-color);
  background: var(--app-success);
}

.flash--alert {
  background: var(--app-danger);
}

/* I bottoni come il Button di Figma (Medium: 44 px, raggio 8, bordo 1 px, Inter 600): il base è
   l'Outline (bordo e scritta blu), --primary il Primary pieno, --secondary il Secondary (fondo
   blu chiaro), --text solo scritta; spento: fondo grigio e scritta grigia, non trasparente. */
.button {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0 1.5rem;
  border: 1px solid var(--app-accent);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--app-accent);
  background: var(--app-surface);
}

.button--primary {
  border-color: var(--app-accent);
  color: var(--app-on-color);
  background: var(--app-accent);
}

.button--secondary {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: var(--app-accent-light);
}

.button--outline {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

.button--text {
  border-color: transparent;
  background: transparent;
}

.button--danger {
  border-color: var(--app-danger);
  color: var(--app-danger);
  background: var(--app-surface);
}

/* Il Button Small di Figma, uguale in tutta l'app: 32 px, raggio 6, riempimento 8/16, scritta
   600 12, icona 16 (21/10/2026: prima la scritta era 14). */
.button--small {
  min-height: 2rem;
  padding: 0 1rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.button--small .icon {
  width: 1rem;
  height: 1rem;
}

.button--wide {
  width: 100%;
}

.button:disabled {
  border-color: var(--app-placeholder);
  color: var(--app-placeholder);
  cursor: default;
  background: var(--app-border);
}

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

/* Il passaggio del mouse, uguale in tutta l'app (Mattias, 21/10/2026: alcuni elementi diventavano
   blu, la colonna a sinistra, Amèlie e i bottoni no): ciò che è grigio diventa blu su azzurro
   chiaro, il bottone bordato prende l'azzurro, quello pieno un blu più scuro. Solo quando si usa
   davvero il mouse (.with-mouse sul body, components/pointer_mode.js): sul tablet il tocco non
   lascia il colore acceso. */
.button {
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.with-mouse .button:hover,
.with-mouse .button--outline:hover,
.with-mouse .button--text:hover {
  background: var(--app-accent-faint);
}

.with-mouse .button--secondary:hover {
  background: var(--app-accent-soft);
}

.with-mouse .button--primary:hover {
  border-color: var(--app-accent-hover);
  background: var(--app-accent-hover);
}

.with-mouse .button--danger:hover {
  background: var(--app-danger-faint);
}

.with-mouse .button:disabled:hover {
  border-color: var(--app-placeholder);
  background: var(--app-border);
}

.link {
  font-weight: 700;
  color: var(--app-accent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* I campi come l'Input di Figma (Medium: 44 px, raggio 8, bordo System/Borders, etichetta
   Inter 600 14 px sopra, nota Inter 600 10 px sotto): a fuoco il bordo diventa blu, in errore
   rosso; niente alone intorno. */
.field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-ink);
}

.field__input {
  width: 100%;
  min-height: var(--touch);
  padding: 0 1rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius);
  /* 16 px: sotto, iOS ingrandisce la pagina al tocco del campo. */
  font-size: 1rem;
  font-weight: 500;
  background: var(--app-surface);
}

.field__input:focus {
  border-color: var(--app-accent);
  outline: none;
}

.field__hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-placeholder);
}

.field__error {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-danger);
}

/* La spunta come il Checkbox di Figma: casella 16 px con raggio 4 e bordo 2 px, spuntata fondo
   blu chiaro con il segno blu; la scritta Inter 600 14 px blu. Tutta la riga resta alta 44 px. */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-accent);
  cursor: pointer;
}

/* Le etichette come i Chips «Badge» di Figma: bordo 2 px, raggio 8, Inter 600 12 px, blu; le
   varianti tengono il loro colore. */
/* badge, status e pill hanno le misure del chip (components/chip.css): da unificare nel chip
   pagina per pagina. */
.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--app-accent);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  color: var(--app-accent);
  justify-content: center;
  background: var(--app-surface);
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.8125rem;
  text-align: left;
  color: var(--app-muted);
  background: var(--app-canvas-background);
}

.table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

.table__number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

/* Tablet in verticale (23/10/2026: le tabelle dell'ufficio uscivano a destra, stato e bottoni
   tagliati): la tabella scorre di lato dentro la sua card, celle più strette. */
@media (max-width: 900px) {
  .card.table-card {
    overflow-x: auto;
  }

  .table th,
  .table td {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

.money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.text-danger {
  color: var(--app-danger);
}

.text-success {
  color: var(--app-success);
}

.text-muted {
  color: var(--app-muted);
}

.form-errors {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--app-danger);
  background: var(--app-danger-faint);
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 1.5rem;
}

.login__card {
  width: 100%;
  max-width: 26rem;
}

.login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.login__logo {
  height: 8rem;
}

.login__title {
  font-size: 1.75rem;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 900px) {
  .page {
    padding: 1rem;
  }
}

/* Elementi condivisi dalle pagine del mockup. */
/* Il campo con l'icona (ricerca): l'Input di Figma con la lente grigia a sinistra. */
.input-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0 1rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius);
  background: var(--app-surface);
}

.input-icon .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--app-placeholder);
}

.input-icon__field {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--touch) - 2px);
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-weight: 500;
  background: transparent;
}

.input-icon__field:focus {
  outline: none;
}

.input-icon:focus-within {
  border-color: var(--app-accent);
}

/* Il menu nativo con l'aspetto del Dropdown di Figma: campo bianco con bordo, scelta in
   grassetto e la freccia blu a destra (la tendina aperta resta quella del sistema; dove conta,
   components/_choice_menu disegna anche quella). */
.select {
  min-height: var(--touch);
  padding: 0 2.5rem 0 1rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  color: var(--app-ink);
  background: var(--app-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 7l5 5 5-5' fill='none' stroke='%232e60ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.875rem center / 1.125rem no-repeat;
  appearance: none;
}

.select:focus {
  border-color: var(--app-accent);
  outline: none;
}

.select:disabled {
  color: var(--app-placeholder);
  background-color: var(--app-border);
}

/* A destra dell'intestazione di un elenco: il filtro arrivato da un'altra pagina e l'ordine. */
.list-header__tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--app-muted);
}

.list-header strong {
  font-size: 1rem;
  color: var(--app-ink);
}

.list-header .text-muted {
  font-size: 0.75rem;
  color: var(--app-placeholder);
}

/* Le righe di un elenco (clienti, scelta del cliente nell'ordine): compatte, perché sul tablet
   se ne vedano tante insieme. Il bottone resta alto 44 px e tutta la riga si tocca. */
.rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
}

.row__body {
  flex: 1;
  min-width: 0;
}

.row__text {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: var(--app-muted);
}

.row .button {
  min-width: 9.5rem;
  font-size: 1rem;
}

/* Un cliente in elenco (anche nella scelta del cliente dell'ordine) si apre toccando la riga
   intera, non solo il bottone: il link del bottone si allarga sulla riga; il badge degli insoluti
   resta sopra e porta alle partite. Sta qui e non in clients.css: la pagina ordini non lo carica. */
.row--link {
  position: relative;
}

/* Niente rimpicciolimento premendo: lo scale di .button:active fa del bottone il riferimento del
   ::after, che col dito giù si stringe al solo bottone; al rilascio il dito non è più sul link e
   il clic va perso (la riga si illuminava ma l'ordine non partiva). */
.row--link a.button:active {
  transform: none;
}

.row--link a.button::after {
  content: "";
  position: absolute;
  inset: 0;
}

.row--link:has(a.button):hover {
  border-color: var(--app-accent);
}

.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* L'icona tinta accanto ai titoli e ai numeri (scheda prodotto, scheda cliente): riquadro 32 a
   raggio 8 col fondo chiaro del suo colore, icona 18. I toni hanno il significato dei chip. */
.icon-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.icon-tile .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-tile--purple {
  color: var(--app-purple);
  background: var(--app-purple-faint);
}

.icon-tile--indigo {
  color: var(--app-indigo);
  background: var(--app-indigo-faint);
}

.icon-tile--green {
  color: var(--app-success);
  background: var(--app-success-faint);
}

.icon-tile--yellow {
  color: var(--app-warning);
  background: var(--app-warning-faint);
}

.icon-tile--red {
  color: var(--app-danger);
  background: var(--app-danger-faint);
}

.icon-tile--coral {
  color: var(--app-brand-gold);
  background: var(--app-brand-gold-faint);
}

.icon-tile--grey {
  color: var(--app-muted);
  background: var(--app-canvas-background);
}

/* La frase scritta dall'AI (Amèlie): banner viola chiaro col bordo viola, 600 16, l'icona viola. */
.ai-lead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-purple);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--app-purple-faint);
}

.ai-lead .icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--app-purple);
}

/* Una sezione senza dati: icona tinta grigia e frase 14 al centro, non una card alta e vuota. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.empty-state p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-muted);
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--app-border-strong);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--app-muted);
  background: var(--app-surface);
}

.status--to_send,
.status--due,
.status--scheduled,
.status--to_check,
.status--running {
  border-color: var(--app-warning);
  color: var(--app-warning);
  background: var(--app-warning-faint);
}

.status--sent,
.status--delivered,
.status--credit,
.status--done {
  border-color: var(--app-success);
  color: var(--app-success);
  background: var(--app-success-faint);
}

.status--overdue,
.status--failed,
.status--not_shipped {
  border-color: var(--app-danger);
  color: var(--app-danger);
  background: var(--app-danger-faint);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--app-border-strong);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
}

.pill .icon {
  width: 1rem;
  height: 1rem;
}

.pill--success {
  border-color: var(--app-success);
  color: var(--app-success);
  background: var(--app-success-faint);
}

.pill--accent {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.pill--warning {
  border-color: var(--app-warning);
  color: var(--app-warning);
  background: var(--app-warning-faint);
}

.table__sub {
  display: block;
  font-size: 0.875rem;
  color: var(--app-accent);
}

.table__row--muted {
  opacity: 0.5;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .columns {
    grid-template-columns: 1fr;
  }

  .account--admin {
    grid-template-columns: 1fr;
  }

  .row .button {
    min-width: 0;
  }
}

button.link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  background: transparent;
}

/* L'amministratore che vede l'app come un agente (shared/_view_as_banner, sessions/show) */
.view-as-banner {
  position: sticky;
  top: var(--topbar-height);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 1.5rem;
  font-size: 1.0625rem;
  color: var(--app-warning);
  background: var(--app-warning-faint);
  border-bottom: 1px solid var(--app-border);
}

.view-as-banner__link {
  margin-left: auto;
  font-weight: 600;
  color: var(--app-warning);
}

/* La pagina account (23/10/2026, come il profilo di un'app in produzione): a sinistra le sezioni
   del profilo una sotto l'altra a 16, per l'amministratore «Cambia profilo» a destra; titoli fuori
   dalle card, 16 dentro le card. */
.account {
  display: grid;
  grid-template-columns: minmax(0, 32rem);
  gap: 1.5rem;
  align-items: start;
}

.account--admin {
  grid-template-columns: 24rem minmax(0, 1fr);
}

/* Tablet in verticale: il profilo sopra a tutta larghezza, «Cambia profilo» sotto (23/10/2026: in
   due colonne gli agenti restavano in una colonna di 270 px, coi nomi tagliati a cinque lettere). */
@media (max-width: 900px) {
  .account,
  .account--admin {
    grid-template-columns: minmax(0, 1fr);
  }
}

.account__sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.account__card,
.account__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.account__save {
  align-self: flex-start;
}

.account__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--app-border);
}

.account__who-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.account__name {
  font-size: 1rem;
  font-weight: 600;
}

.account__role {
  font-size: 0.75rem;
  color: var(--app-placeholder);
}

/* La lingua: il Segmented a tutta larghezza, alto da toccare, la lingua in uso piena. */
.account__language {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Le lingue a tutta larghezza della card, in colonne uguali (Mattias, 23/10/2026: ferme alla
   larghezza delle scritte non erano centrate nel riquadro). */
.account__languages .choice-group__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account__languages .choice-group__option {
  justify-content: center;
}

.account__leave {
  align-self: flex-start;
}

.account__agents .search-box {
  margin: 0;
}

/* L'agente che si sta guardando: il bordo giallo come il suo chip. */
.list-row.account__current {
  border-color: var(--app-warning);
}

/* Il titolo di sezione del designer, uguale in tutte le pagine: 16/600 nudo sul fondo, alto 32 px
   (quanto un bottone Small accanto), 12 px sopra la sua card (16 al testo). */
.summary-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
  margin-bottom: 0.75rem;
}

/* Tutti i titoli alti 32 px (quanto il bottone Small accanto) e a 12 px dalla card: le card
   delle due colonne partono alla stessa altezza. */
.summary-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.summary-section__head .summary-section__title {
  margin-bottom: 0;
}

.summary-section__title .badge {
  min-height: 1.5rem;
  font-size: 0.75rem;
}

/* Il passo a 16 px del designer: 16 tra la card e il titolo dopo (lo spazio della colonna, 12,
   più i 4 del titolo alto 32 col testo centrato), 16 tra il titolo e la sua card, 16 tra una
   riga di campi e l'altra, 16 tra il campo della nota e i chip. */
/* Il cambio di tema (components/theme_switch.js): un cerchio che parte dalla levetta e scopre il tema
   nuovo. Le due viste stanno ferme, l'animazione del cerchio è nel JavaScript (serve il punto della
   levetta); il vecchio tema resta sotto finché il cerchio non lo copre. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}