/* ============================================================
   interfaccia.css — il brand Facchini Verdi sui componenti NiceGUI/Quasar
   di Voucher, e le parti delle pagine del dipendente.

   Lo caricano tutte le pagine (webui/tema.py, nel <head>), dopo
   brand.css, che ha i token --fv-* dei due temi. Qui non c'è nessun
   colore scritto per esteso: solo var(--fv-…) (Stack, DD-13). Il tema
   scuro arriva da solo, perché brand.css cambia i valori delle variabili.

   Dal 21/10/2026, con le pagine NiceGUI, prende il posto di app.css.
   Da dove viene:
     · la base (pagina, testata, piè di pagina, pulsanti, campi, note,
       stati, pagina di accesso, interruttore del tema, accessibilità) è
       quella della Dashboard (FacchiniVerdi.Dashboard.Frontend/assets/
       css/interfaccia.css);
     · gli elenchi, la barra strumenti e le finestre vengono da
       FacchiniVerdi.Gestionale.OLD (frontend/assets/css/elenchi.css e
       interfaccia.css), come le tabelle che sul telefono diventano schede;
     · le parti proprie di Voucher (la home, il modulo di richiesta, il
       voucher, l'attivazione dell'app) sono quelle di app.css, con il
       prefisso fv-. Quelle parti sono HTML scritto una volta nelle pagine
       (ui.html) e governato dal browser (richiesta.js, attivazione.js):
       qui i loro campi e pulsanti sono HTML normale, non Quasar.

   Gli strati (cascade layers). NiceGUI dichiara l'ordine
       theme, base, quasar, nicegui, components, utilities,
       overrides, quasar_importants
   e qui se ne usano due:
     · components — tutto lo stile di Voucher. Vince su Quasar e su
       NiceGUI, ma perde contro le classi Tailwind (utilities);
     · overrides  — le poche regole che devono battere i !important di
       Quasar. Con !important vince lo strato dichiarato PRIMA, e
       overrides viene prima di quasar_importants.

   Indice: base · pagina e contenitore · testata · sezioni e account della
   gestione · piè di pagina · pulsanti · tipografia · campi · note · stati
   · home · le schede del dipendente (richiesta, voucher, attivazione) ·
   pagina di accesso · elenchi della gestione · voucher cercato ·
   finestre · interruttore del tema · fascia «senza rete» · pagine
   staccate · accessibilità.

   Larghezze: mobile first. 600px tablet, 820px dove le tabelle tornano
   tabelle (sotto sono schede), 900px desktop, contenuto fino a 1440px.
   ============================================================ */

@layer components {

  /* ---------- base ---------- */
  html, body {
    font-family: var(--fv-font);
    color: var(--fv-text);
    background: var(--fv-bg);
    -webkit-text-size-adjust: 100%;
  }
  body.body--dark, body.body--light { color: var(--fv-text); background: var(--fv-bg); }
  .q-layout, .q-page-container, .q-page { background: transparent; }
  a { color: var(--fv-primary); }

  /* ---------- pagina e contenitore ---------- */
  /* Il contenitore di NiceGUI ha 16px di margine e uno spazio fra gli
     elementi: qui li gestisce Voucher. 69px è la testata: così il piè di
     pagina resta in fondo anche quando il contenuto è corto. */
  .nicegui-content.fv-pagina { padding: 0; gap: 0; min-height: calc(100vh - 69px); }

  .fv-contenitore {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    flex: 1;
  }
  @media (min-width: 600px) { .fv-contenitore { gap: 24px; padding: 24px 24px 56px; } }
  @media (min-width: 900px) { .fv-contenitore { padding: 32px 32px 64px; } }

  /* Le pagine strette: la richiesta, l'attivazione, la password, la
     ricerca di un voucher. */
  .fv-stretto { width: 100%; max-width: 520px; margin-inline: auto; }

  /* ---------- testata ---------- */
  .q-header.fv-intestazione {
    background: var(--fv-surface);
    color: var(--fv-text);
    border-bottom: 1px solid var(--fv-bordo);
    box-shadow: none;
  }
  /* Sul telefono la testata della gestione va su due righe: sopra il logo
     e «Installa», sotto le sezioni e l'account. Da 900px una riga sola:
     logo, sezioni, account, «Installa». L'ordine lo decide `order`. */
  .fv-intestazione-interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    width: 100%;
    max-width: 1440px;
    min-height: 68px;
    margin: 0 auto;
    padding: 10px 16px;
  }
  @media (min-width: 600px) { .fv-intestazione-interno { padding-inline: 24px; } }
  @media (min-width: 900px) { .fv-intestazione-interno { padding-inline: 32px; flex-wrap: nowrap; } }

  .fv-logo { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; order: 0; }
  /* 140px è la larghezza minima del logo orizzontale sullo schermo
     (FacchiniVerdi.Brand, 02_Logo/LEGGIMI.md). */
  .fv-logo img { display: block; width: 140px; height: auto; }
  @media (min-width: 600px) { .fv-logo img { width: 168px; } }
  .fv-logo-scuro { display: none !important; }
  .body--dark .fv-logo-chiaro { display: none !important; }
  .body--dark .fv-logo-scuro { display: block !important; }

  /* A destra: «Installa», fuori dalla gestione «Gestione», e per ultimo
     l'interruttore del tema (layout.py). */
  .fv-azioni-testa { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; order: 2; }

  /* Sul telefono stretto i pulsanti della testata sono tondi, con la sola
     icona: il nome resta per i lettori di schermo (aria-label). NiceGUI
     scrive il nome come testo semplice dentro il pulsante, senza un
     elemento suo: lo si nasconde con la misura del carattere a zero, e
     l'icona riprende la sua misura. */
  @media (max-width: 599px) {
    .fv-pulsante-testata.q-btn { width: 42px; min-width: 42px; padding: 0; border-radius: 50%; }
    .fv-pulsante-testata .q-btn__content { font-size: 0; flex-wrap: nowrap; }
    .fv-pulsante-testata.q-btn .q-icon { font-size: 22px; margin: 0; }
  }

  /* ---------- sezioni e account della gestione ---------- */
  .fv-intestazione-gestione {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-width: 0;
  }
  @media (min-width: 900px) {
    .fv-intestazione-gestione { order: 1; flex: 1 1 auto; margin-left: 24px; }
  }
  .fv-navigazione { display: flex; gap: 4px; }
  .fv-sezione {
    display: block;
    padding: .45rem .9rem;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    color: var(--fv-text-muted);
    border-radius: var(--fv-radius-pill);
  }
  .fv-sezione:hover { color: var(--fv-primary); }
  .fv-sezione[aria-current="page"] { color: var(--fv-primary); background: var(--fv-primary-tint); }
  .fv-account { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
  .fv-chi-sono {
    display: flex;
    gap: .3em;
    min-width: 0;
    font-size: .85rem;
    color: var(--fv-text-muted);
    white-space: nowrap;
  }
  /* Il nome utente: in grassetto, e porta a «Cambia la password» */
  .fv-chi-sono a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: var(--fv-text-strong);
    text-decoration: none;
  }
  .fv-chi-sono a:hover { color: var(--fv-primary); text-decoration: underline; }
  @media (min-width: 900px) { .fv-chi-sono { max-width: 22rem; } }

  /* ---------- piè di pagina ---------- */
  .fv-piede { width: 100%; align-self: stretch; border-top: 1px solid var(--fv-bordo); font-size: .82rem; color: var(--fv-text-muted); }
  .fv-piede-interno {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 16px;
  }
  @media (min-width: 600px) { .fv-piede-interno { padding-inline: 24px; } }
  @media (min-width: 900px) { .fv-piede-interno { padding-inline: 32px; } }

  /* ---------- pulsanti (Quasar) ---------- */
  /* Pillola, grassetto, niente maiuscolo: come sul sito facchiniverdi.it. */
  .q-btn {
    border-radius: var(--fv-radius-pill);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 20px;
    min-height: 42px;
  }
  .q-btn.q-btn--round { border-radius: 50%; padding: 0; }
  .q-btn.q-btn--outline.text-primary:hover { background: var(--fv-primary-tint); }
  .q-btn .q-icon { font-size: 1.25em; }
  .fv-pulsante-secondario.q-btn { color: var(--fv-primary); }
  .fv-pulsante-piccolo.q-btn { min-height: 34px; padding: 2px 14px; font-size: .88rem; }
  .fv-pulsante-pericolo.q-btn { color: var(--fv-errore-testo); }
  .fv-pulsante-pericolo.q-btn:hover { background: var(--fv-errore-fondo); }

  /* ---------- tipografia ---------- */
  .fv-h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--fv-primary);
  }
  .fv-h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--fv-primary); }
  .fv-sottotitolo { font-size: 1rem; color: var(--fv-text-muted); max-width: 70ch; }
  .fv-testo-secondario { font-size: .92rem; color: var(--fv-text-muted); }
  .fv-aiuto { display: block; margin-top: -4px; font-size: .8rem; color: var(--fv-text-muted); }
  .fv-indietro {
    align-self: flex-start;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    color: var(--fv-primary);
  }
  .fv-indietro:hover { text-decoration: underline; }

  /* ---------- campi (Quasar) ---------- */
  .q-field--outlined .q-field__control { border-radius: var(--fv-radius-sm); background: var(--fv-surface); }
  .q-field--outlined .q-field__control:before { border-color: var(--fv-bordo-forte); }
  .q-field__label, .q-field__native, .q-field__input { color: var(--fv-text); }
  .q-field--outlined.q-field--focused .q-field__control:after { border-color: var(--fv-primary); }
  .q-field__append .q-icon { color: var(--fv-text-muted); }
  .q-checkbox__label { color: var(--fv-text); font-weight: 700; }
  .q-menu, .q-date { background: var(--fv-surface); color: var(--fv-text); }
  .q-item { color: var(--fv-text); }
  .q-item.q-manual-focusable--focused, .q-item--active { color: var(--fv-primary); }
  /* Il codice fiscale e il codice del voucher si scrivono in maiuscolo
     anche se si digitano in minuscolo (campi Quasar e campi HTML). */
  .fv-maiuscolo input, input.fv-maiuscolo { text-transform: uppercase; }

  /* ---------- note ---------- */
  /* Le coppie fondo/testo del brand, verificate AA nei due temi. */
  .fv-nota { display: block; padding: 12px 16px; border-radius: var(--fv-radius-sm); font-size: .92rem; }
  .fv-nota-info { background: var(--fv-primary-tint); color: var(--fv-text-strong); }
  .fv-nota-errore { background: var(--fv-errore-fondo); color: var(--fv-errore-testo); }
  .fv-nota-avviso { background: var(--fv-avviso-fondo); color: var(--fv-avviso-testo); }
  .fv-nota-successo { background: var(--fv-successo-fondo); color: var(--fv-successo-testo); }
  #istruzioni-installa { align-self: stretch; }

  /* ---------- stati ---------- */
  .fv-stato {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: var(--fv-radius-pill);
    white-space: nowrap;
  }
  .fv-stato-avviso { background: var(--fv-avviso-fondo); color: var(--fv-avviso-testo); }
  .fv-stato-valido,
  .fv-stato-attivo { background: var(--fv-successo-fondo); color: var(--fv-successo-testo); }
  .fv-stato-utilizzato { background: var(--fv-neutro-fondo); color: var(--fv-neutro-testo); }
  .fv-stato-scaduto,
  .fv-stato-spento { background: var(--fv-avviso-fondo); color: var(--fv-avviso-testo); }

  /* ---------- home ---------- */
  /* Un solo grande pulsante quadrato, al centro della pagina, con il
     disegno di un biglietto e «Richiedi voucher» (14/10/2026). Colore
     pieno del brand; il disegno è a tratto come le icone. */
  .fv-home { flex: 1; display: grid; place-items: center; }
  .fv-pulsante-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(16rem, 78vw);
    aspect-ratio: 1;
    margin-block: 24px;
    padding: 20px;
    color: var(--fv-su-primary);
    background: var(--fv-primary);
    border-radius: 28px;
    box-shadow: var(--fv-shadow-lg);
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
  }
  .fv-pulsante-home:hover { background: var(--fv-primary-dark); transform: translateY(-2px); }
  .fv-pulsante-home:active { transform: translateY(0); }
  .fv-disegno-voucher {
    width: 58%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .fv-disegno-voucher .fv-perforazione { stroke-dasharray: 3 3.5; }
  .fv-etichetta-home { font-size: 1.35rem; font-weight: 900; letter-spacing: .01em; text-align: center; }

  /* ---------- le schede del dipendente (richiesta, voucher, attivazione) ---------- */
  /* HTML scritto una volta nelle pagine e governato dal browser: campi e
     pulsanti HTML, con l'aspetto di quelli di Quasar. */
  .fv-scheda {
    background: var(--fv-surface);
    border: 1px solid var(--fv-bordo);
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow-sm);
    padding: 24px 18px;
  }
  .fv-scheda + .fv-scheda { margin-top: 20px; }
  @media (min-width: 600px) { .fv-scheda { padding: 32px; } }
  .fv-scheda h1, .fv-scheda h2 {
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--fv-primary);
  }
  .fv-scheda h1 { font-size: 1.5rem; }
  .fv-scheda h2 { font-size: 1.2rem; }
  .fv-scheda p { margin: 0 0 12px; }
  .fv-sotto { margin: 0 0 22px; color: var(--fv-text-muted); }
  .fv-scheda p.fv-sotto { margin-bottom: 22px; }

  .fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .7rem 1.3rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--fv-radius-pill);
    cursor: pointer;
    transition: background-color var(--fv-transition), color var(--fv-transition),
                border-color var(--fv-transition);
  }
  .fv-btn:disabled { opacity: .6; cursor: progress; }
  .fv-btn-primario { background: var(--fv-primary); color: var(--fv-su-primary); }
  .fv-btn-primario:hover:not(:disabled) { background: var(--fv-primary-dark); }
  .fv-btn-secondario { background: transparent; color: var(--fv-primary); border-color: var(--fv-primary); }
  .fv-btn-secondario:hover:not(:disabled) { background: var(--fv-primary); color: var(--fv-su-primary); }
  .fv-btn-blocco { width: 100%; }

  .fv-campo { margin-bottom: 16px; min-width: 0; }
  .fv-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--fv-text);
  }
  .fv-campo .fv-aiuto { margin-top: 4px; }
  .fv-campo input {
    width: 100%;
    min-width: 0;
    padding: .72rem .9rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--fv-text-strong);
    background: var(--fv-surface);
    border: 1px solid var(--fv-bordo-forte);
    border-radius: var(--fv-radius-sm);
  }
  .fv-campo input:focus { outline: none; border-color: var(--fv-primary); box-shadow: 0 0 0 3px var(--fv-anello); }
  .fv-campo input[aria-invalid="true"] { border-color: var(--fv-danger); }
  /* Il codice dell'app di autenticazione (6 cifre): grande, spaziato, al
     centro. Il segnaposto «6 cifre» resta piccolo. */
  .fv-campo-codice input {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-align: center;
    padding-inline: .3rem;
  }
  .fv-campo-codice input::placeholder { font-size: 1rem; letter-spacing: normal; font-weight: 400; }
  .fv-campo-codice .fv-aiuto { text-align: center; }
  .fv-riga-campi { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 600px) { .fv-riga-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .fv-messaggio {
    margin: 0 0 18px;
    padding: 12px 14px;
    font-size: .92rem;
    border-left: 4px solid;
    border-radius: 0 var(--fv-radius-sm) var(--fv-radius-sm) 0;
  }
  .fv-messaggio:empty { display: none; }
  .fv-messaggio-errore  { color: var(--fv-errore-testo);   background: var(--fv-errore-fondo);   border-color: var(--fv-danger); }
  .fv-messaggio-avviso  { color: var(--fv-avviso-testo);   background: var(--fv-avviso-fondo);   border-color: var(--fv-warning); }
  .fv-messaggio-nota    { color: var(--fv-text);           background: var(--fv-surface-muted); border-color: var(--fv-primary); }
  .fv-messaggio strong  { color: inherit; }
  .fv-messaggio p:last-child { margin-bottom: 0; }
  form + .fv-messaggio,
  .fv-senza-app + .fv-messaggio { margin: 22px 0 0; }

  /* I due passi della richiesta (14/10/2026): i dati → voucher. Sul
     telefono stretto le etichette vanno a capo, le colonne restano uguali. */
  .fv-passi {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fv-text-muted);
  }
  .fv-passi li { flex: 1; padding-top: 8px; border-top: 4px solid var(--fv-bordo-forte); }
  .fv-passi li[aria-current="step"] { color: var(--fv-primary); border-color: var(--fv-primary); }
  .fv-passi li.fv-fatto { border-color: var(--fv-primary-hover); }

  /* «Non hai ancora configurato l'app?», sotto il modulo (15/10/2026) */
  .fv-senza-app { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fv-bordo); }
  .fv-senza-app .fv-sotto { margin-bottom: 0; }

  /* Il voucher: l'immagine disegnata dal browser, la stessa che si salva.
     L'immagine è sempre chiara (è un documento), anche nel tema scuro. */
  .fv-voucher-figura { margin: 0 0 18px; text-align: center; }
  .fv-voucher-figura img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-inline: auto;
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow-lg);
    background: var(--fv-surface);
  }
  .fv-voucher-figura figcaption { margin-top: 14px; font-size: .9rem; color: var(--fv-text-muted); }
  .fv-codice-testo {
    display: block;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--fv-text-strong);
    user-select: all;
    -webkit-user-select: all;
  }
  .fv-azioni-voucher { display: grid; gap: 10px; margin-bottom: 18px; }
  .fv-azioni-voucher .fv-sotto { margin: 0; }

  /* L'attivazione dell'app (15/10/2026): tre passi numerati; il QR sempre
     nero su bianco (lo disegna così attivazione.js), la chiave a gruppi
     di 4 che va a capo e non sfora sul telefono stretto. */
  .fv-passi-attivazione { margin: 0; padding-left: 1.4rem; }
  .fv-passi-attivazione > li { margin-bottom: 22px; }
  .fv-passi-attivazione > li::marker { font-weight: 900; color: var(--fv-primary); }
  .fv-passi-attivazione h2 { margin: 0 0 6px; font-size: 1.05rem; }
  .fv-passi-attivazione .fv-btn { margin: 4px 0 14px; }
  .fv-qr-attivazione {
    display: block;
    width: min(220px, 100%);
    height: auto;
    margin: 6px auto 14px;
    border-radius: var(--fv-radius-sm);
    image-rendering: pixelated;
  }
  .fv-chiave-app {
    margin: 0 0 6px;
    padding: 10px 12px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    word-spacing: .3em;
    overflow-wrap: anywhere;
    color: var(--fv-text-strong);
    background: var(--fv-surface-muted);
    border-radius: var(--fv-radius-sm);
  }

  /* ---------- la pagina di accesso (/gestione/) ---------- */
  /* Una scheda centrata, senza testata, come /login della Dashboard. */
  .fv-pagina-accesso { flex: 1; display: grid; place-items: center; padding: 16px 0 32px; }
  .fv-scheda-accesso {
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px;
    background: var(--fv-surface);
    border: 1px solid var(--fv-bordo);
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow);
  }
  @media (max-width: 399px) { .fv-scheda-accesso { padding: 28px 20px; } }
  .fv-scheda-accesso .fv-logo { align-self: center; margin-bottom: 8px; }
  .fv-scheda-accesso .fv-logo img { width: 200px; }

  /* La scheda della password e i blocchi della pagina Voucher */
  .fv-scheda-gestione,
  .fv-blocco {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    background: var(--fv-surface);
    border: 1px solid var(--fv-bordo);
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow-sm);
    min-width: 0;
  }
  @media (min-width: 600px) { .fv-scheda-gestione, .fv-blocco { padding: 28px; } }

  /* ---------- elenchi della gestione ---------- */
  .fv-titolo-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }
  .fv-barra-strumenti { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .fv-cerca { flex: 1 1 220px; min-width: 0; }
  .fv-cerca .q-field__control { border-radius: var(--fv-radius-pill); }
  .fv-filtro { flex: 0 1 auto; min-width: 170px; max-width: 100%; }
  .fv-filtro .q-field__control { border-radius: var(--fv-radius-pill); }
  @media (max-width: 599px) { .fv-filtro { flex: 1 1 100%; } }
  .fv-conteggio { font-size: .88rem; color: var(--fv-text-muted); }
  .fv-conteggio:empty { display: none; }

  .q-table__card, .q-table__container { background: var(--fv-surface); color: var(--fv-text); }
  .fv-elenco.q-table__container {
    border: 1px solid var(--fv-bordo);
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow-sm);
    overflow: hidden;
  }
  .fv-elenco .q-table thead tr, .fv-elenco .q-table thead th {
    background: var(--fv-primary-tint);
    color: var(--fv-primary);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .fv-elenco .q-table th, .fv-elenco .q-table td { border-color: var(--fv-bordo); }
  .fv-elenco .q-table tbody td {
    height: auto;
    padding-block: 10px;
    font-size: .9rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .fv-elenco .q-table tbody tr:hover > td { background: var(--fv-surface-muted); }
  .fv-cella-principale { font-weight: 700; color: var(--fv-text-strong); }
  .fv-cella-azioni { text-align: right; white-space: nowrap; }
  .fv-cella-data, .fv-cf { font-variant-numeric: tabular-nums; }
  .fv-cf { letter-spacing: .02em; }
  .fv-riga-cliccabile { cursor: pointer; }
  /* Chi non è attivo si vede a colpo d'occhio: la riga è più tenue. */
  .fv-riga-spenta > td { color: var(--fv-text-muted); }
  /* Il codice nella lista: un pulsante per la tastiera, con l'aspetto
     del testo, cifre della stessa larghezza, su una riga. */
  .fv-codice-elenco {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    white-space: nowrap;
    color: var(--fv-text-strong);
    cursor: pointer;
  }
  .fv-messaggio-elenco { padding: 28px 12px; text-align: center; color: var(--fv-text-muted); }

  /* Sotto gli 820px la tabella diventa un elenco di schede leggibili sul
     telefono: ogni cella va a capo con davanti la sua etichetta
     (data-etichetta). Le celle senza etichetta (cognome, codice) fanno da
     titolo della scheda. Niente scorrimento orizzontale. */
  @media (max-width: 819px) {
    .fv-elenco .q-table thead { display: none; }
    .fv-elenco .q-table,
    .fv-elenco .q-table tbody,
    .fv-elenco .q-table tr,
    .fv-elenco .q-table td { display: block; width: 100%; }
    .fv-elenco .q-table tbody tr { height: auto; padding: 14px 16px; border-top: 1px solid var(--fv-bordo); }
    .fv-elenco .q-table tbody tr:first-child { border-top: none; }
    .fv-elenco .q-table tbody td,
    .fv-elenco .q-table tbody td.fv-cella-data,
    .fv-elenco .q-table tbody td.fv-cella-azioni {
      padding: 3px 0;
      border: none;
      text-align: left;
      white-space: normal;
    }
    /* Quasar usa già il ::before delle celle (in posizione assoluta, per
       lo sfondo al passaggio del mouse): qui torna testo in linea. */
    .fv-elenco .q-table tbody td[data-etichetta]::before {
      content: attr(data-etichetta) ': ';
      position: static;
      display: inline;
      background: none;
      font-size: .78rem;
      font-weight: 700;
      color: var(--fv-text-muted);
    }
    .fv-elenco .q-table tbody td.fv-cella-principale { font-size: 1.02rem; margin-bottom: 2px; }
    .fv-elenco .q-table tbody td.fv-cella-azioni { padding-top: 10px; }
    .fv-elenco .q-table__middle { overflow: visible; }
  }

  /* ---------- il voucher cercato ---------- */
  .fv-risultato { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
  .fv-risultato-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .fv-risultato-codice { font-size: 1.3rem; font-weight: 900; letter-spacing: .05em; color: var(--fv-text-strong); overflow-wrap: anywhere; }
  .fv-dati { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; margin: 0; }
  .fv-dati dt { font-size: .78rem; font-weight: 700; color: var(--fv-text-muted); }
  .fv-dati dd { margin: 0; font-weight: 700; color: var(--fv-text-strong); }
  .fv-modulo-utilizzo { display: flex; flex-direction: column; gap: 12px; }

  /* ---------- finestre ---------- */
  .fv-finestra { width: min(600px, 100%); max-width: 100%; padding: 24px 20px; gap: 14px; }
  .fv-finestra-stretta { width: min(440px, 100%); }
  @media (min-width: 600px) { .fv-finestra { padding: 28px; } }
  .fv-azioni-finestra {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  /* Annulla e Salva restano a destra anche quando «Elimina» è nascosto */
  .fv-azioni-destra { display: flex; gap: 8px; margin-left: auto; }
  .fv-rimanda-app { display: grid; gap: 6px; justify-items: start; }
  .fv-campo-fine { display: flex; flex-direction: column; gap: 6px; }
  .q-dialog__backdrop { background: var(--fv-velo); }
  /* Le schede di NiceGUI allineano i figli a sinistra, ciascuno largo
     quanto il suo contenuto: nella finestra i campi vanno a tutta larghezza. */
  .q-card.fv-finestra { align-items: stretch; background: var(--fv-surface); color: var(--fv-text); }
  .q-notification { border-radius: var(--fv-radius); font-family: var(--fv-font); font-weight: 700; }

  /* ---------- interruttore del tema ---------- */
  /* Tondo, a destra nell'intestazione, sulla stessa riga del logo (dal
     30/10/2026, Matteo: prima stava in basso a destra, sopra la pagina, da
     48px e con l'ombra). 42px come i pulsanti tondi della testata di
     Voucher; senza ombra, perché sta dentro la fascia. */
  .q-btn.fv-interruttore-tema {
    flex: none;
    width: 42px;
    height: 42px;
    min-height: 42px;
    background: var(--fv-surface);
    color: var(--fv-primary);
    border: 1px solid var(--fv-bordo-forte);
    box-shadow: none;
  }
  /* Nelle pagine senza intestazione (l'accesso) sta sopra la pagina, in
     alto a destra (layout.struttura): lì riprende l'ombra. */
  .fv-tema-sopra .q-btn.fv-interruttore-tema { box-shadow: var(--fv-shadow); }
  /* E il contenuto di quelle pagine parte sotto di lui: 16px dal bordo,
     42px di pulsante e 16px d'aria. */
  .fv-contenitore.fv-sotto-al-tema { padding-top: 74px; }
  .fv-icona-luna { display: none; }
  .body--dark .fv-icona-sole { display: none; }
  .body--dark .fv-icona-luna { display: inline-flex; }

  /* ---------- fascia «senza rete» (fv.js) ---------- */
  .fv-avviso-rete {
    position: sticky;
    top: 0;
    z-index: 3000;
    padding: 10px 16px;
    font-size: .9rem;
    text-align: center;
    color: var(--fv-avviso-testo);
    background: var(--fv-avviso-fondo);
    border-bottom: 1px solid var(--fv-warning);
  }

  /* ---------- accessibilità ---------- */
  /* Fixed e non absolute: dentro la pagina di Quasar «absolute» si
     posiziona sotto l'intestazione e resterebbe visibile. */
  .fv-salta {
    position: fixed;
    left: 8px;
    top: -100px;
    z-index: 3000;
    padding: 10px 16px;
    background: var(--fv-primary);
    color: var(--fv-su-primary);
    border-radius: var(--fv-radius-sm);
    font-weight: 700;
  }
  .fv-salta:focus { top: 8px; }
  :focus-visible { outline: 3px solid var(--fv-primary); outline-offset: 2px; }
  .solo-lettori-schermo {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ------------------------------------------------------------
   Le regole che devono battere i !important di Quasar (vedi sopra).
   ------------------------------------------------------------ */
@layer overrides {
  /* Testo sopra il petrolio pieno: bianco nel chiaro, scuro nello scuro. */
  .bg-primary.text-white,
  .q-btn.bg-primary { color: var(--fv-su-primary) !important; }

  /* Testo dei pulsanti senza fondo: il petrolio del tema in uso. */
  .text-primary { color: var(--fv-primary) !important; }

  /* fv.js, le pagine e gli script del dipendente mettono e tolgono la
     classe hidden e l'attributo hidden: devono vincere sul display dei
     componenti Quasar e delle classi qui sopra. */
  .hidden, [hidden] { display: none !important; }

  /* Le pagine del dipendente si staccano dal server appena disegnate
     (fv.js, FV.staccati): la finestrella «connessione persa» di NiceGUI
     non deve comparire, perché non c'è niente di perso. */
  body.fv-staccata #popup { display: none !important; }
}