/* =============================================================================
   app.css — sistema visivo del backoffice.

   PRINCIPIO CHE GENERA TUTTO IL RESTO (18/09/2026): in un'agenda il colore
   serve ai dati. Ogni servizio ha il suo colore, ogni operatore il suo, gli
   stati hanno i loro. Se anche la cornice e' colorata, alle otto del mattino
   con venti appuntamenti sullo schermo non si capisce piu' niente. Quindi la
   cornice e' cromaticamente muta e il colore vivo e' riservato a cio' che
   cambia: appuntamenti, stati, avvisi.

   Secondo principio: densita'. Chi sta alla reception guarda molte righe
   insieme, spesso da telefono, molte ore al giorno. Niente riquadri gonfi di
   aria: elenchi con divisori, che stanno in meno spazio e si leggono a colpo
   d'occhio.

   Terzo: numeri incolonnati. font-variant-numeric: tabular-nums su tutto cio'
   che e' orario o importo. In un'agenda le cifre devono stare una sotto
   l'altra, altrimenti l'occhio non confronta.
   ============================================================================= */

:root {
    /* --- Colore ---------------------------------------------------------- */
    /* Quasi-nero con una temperatura verde: il nero puro su schermo chiaro
       affatica, e il #0B0B0B che si vede ovunque non appartiene a nessuno. */
    /* Restyling 25/09/2026: stessa impostazione, valori rifatti. I grigi avevano
       tutti la stessa temperatura verde e appiattivano la gerarchia; ora il
       testo e' piu' scuro e i grigi intermedi si distinguono davvero fra loro. */
    --inchiostro: #131D1A;
    --inchiostro-tenue: #47574F;
    --inchiostro-fioco: #7A8882;

    --superficie: #FFFFFF;
    --fondo: #F4F6F4;
    --fondo-scuro: #E9EDEA;
    --bordo: #E2E7E3;
    --bordo-forte: #C7CFCA;

    /* L'accento e' un'azione, non una decorazione: compare sui pulsanti che
       fanno succedere qualcosa e sul focus, da nessun'altra parte. */
    --accento: #0D6049;
    --accento-scuro: #084736;
    --accento-tenue: #E4F0EB;

    --allarme: #9C352A;
    --allarme-tenue: #FBEDEB;
    --attenzione: #A96C14;
    --attenzione-tenue: #FDF3E4;
    --successo: #126848;

    /* --- Tipografia ------------------------------------------------------ */
    /* Famiglia di sistema: si carica istantaneamente e non provoca lo scarto
       di layout che si vede quando arriva un font remoto. In un gestionale
       la leggibilita' vale piu' della personalita' del carattere: l'identita'
       la danno colore e struttura. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --testo-xs: 0.75rem;    /* 12px — etichette, meta */
    --testo-s: 0.8125rem;   /* 13px — testo denso di tabelle */
    --testo-m: 0.9375rem;   /* 15px — corpo */
    --testo-l: 1.125rem;    /* 18px — sottotitoli */
    --testo-xl: 1.5rem;     /* 24px — titoli di sezione */
    --testo-xxl: 2rem;      /* 32px — titolo principale */

    /* --- Spazio ---------------------------------------------------------- */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;

    --raggio: 10px;
    --raggio-s: 6px;

    /* Ombre a piu' strati: una sola ombra larga fa sembrare gli elementi
       incollati sopra la pagina, due sovrapposte — un filo netto vicino e una
       diffusione lontana — li appoggiano. */
    --ombra: 0 1px 1px rgba(19, 29, 26, 0.04),
             0 2px 6px rgba(19, 29, 26, 0.05),
             0 8px 20px rgba(19, 29, 26, 0.04);
    --ombra-alta: 0 2px 4px rgba(19, 29, 26, 0.06),
                  0 12px 36px rgba(19, 29, 26, 0.16);

    /* Una durata sola per tutta l'interfaccia: se ogni componente sceglie la
       sua, l'insieme sembra costruito da persone diverse. */
    --transizione: 0.16s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Chi ha chiesto meno movimento non deve vedere niente muoversi. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* hidden deve vincere su ogni display dichiarato altrove: senza questa riga un
   .cassetto { display: flex } resta visibile anche con l'attributo hidden, e si
   vede un pannello vuoto sopra la pagina. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--testo-m);
    line-height: 1.5;
    color: var(--inchiostro);
    background: var(--fondo);
    /* L'area sicura conta: su iPhone la barra inferiore coprirebbe i pulsanti. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.22; text-wrap: balance; }
h1 { font-size: var(--testo-xxl); letter-spacing: -0.025em; }
h2 { font-size: var(--testo-xl); letter-spacing: -0.015em; }
h3 { font-size: var(--testo-l); letter-spacing: -0.008em; }
p { margin: 0 0 var(--s3); }

/* Le cifre si incolonnano ovunque siano un dato e non una parola. */
.num, td.num, .orario, .importo, input[type="time"], input[type="date"] {
    font-variant-numeric: tabular-nums;
}

a { color: var(--accento); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Il focus da tastiera deve essere sempre visibile: chi lavora in agenda si
   muove con il tab molto piu' di quanto si creda. */
:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
    border-radius: var(--raggio-s);
}

/* -----------------------------------------------------------------------------
   Campi
   -------------------------------------------------------------------------- */
.campo { margin-bottom: var(--s4); }

.campo label {
    display: block;
    font-size: var(--testo-s);
    font-weight: 600;
    margin-bottom: var(--s2);
    color: var(--inchiostro-tenue);
}

/* I tipi sono elencati uno per uno e non con :not([type=checkbox]) perche'
   spunte e interruttori hanno uno stile loro. ATTENZIONE: chi aggiunge un
   campo di un tipo nuovo deve aggiungerlo QUI, altrimenti il campo resta
   della larghezza predefinita del browser e stona in mezzo agli altri.
   E' successo con url (i profili social, corretto il 25/09/2026). */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="time"],
input[type="number"], input[type="url"], input[type="search"],
input[type="datetime-local"], input[type="month"], input[type="week"],
select, textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: inherit;
    /* 16px esatti: sotto questa misura iOS ingrandisce la pagina al tocco,
       e l'utente si ritrova con il modulo fuori schermo. */
    font-size: 1rem;
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

/* Il campo reagisce gia' al passaggio del mouse: si capisce che e' scrivibile
   prima di averlo toccato. */
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--inchiostro-fioco);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px var(--accento-tenue);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--fondo-scuro);
    color: var(--inchiostro-fioco);
    cursor: not-allowed;
}

.aiuto { font-size: var(--testo-xs); color: var(--inchiostro-fioco); margin-top: var(--s2); }

/* -----------------------------------------------------------------------------
   Pulsanti
   -------------------------------------------------------------------------- */
.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 0.625rem 1.125rem;
    /* 44px di altezza minima: sotto questa misura il dito sbaglia bersaglio. */
    min-height: 44px;
    font-family: inherit;
    font-size: var(--testo-m);
    font-weight: 600;
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-s);
    cursor: pointer;
    transition: background var(--transizione), border-color var(--transizione),
                box-shadow var(--transizione), transform var(--transizione);
}

/* Alla pressione il pulsante cede di un pixel: e' la conferma che il tocco e'
   arrivato, utile su telefono dove non c'e' il passaggio del mouse. */
.bottone:active:not(:disabled) { transform: translateY(1px); }

.bottone:hover:not(:disabled) { background: var(--fondo); border-color: var(--inchiostro-fioco); }
.bottone:disabled { opacity: 0.55; cursor: not-allowed; }

.bottone-principale {
    color: #fff;
    background: var(--accento);
    border-color: var(--accento);
    /* L'azione principale e' l'unica cosa che si stacca dalla pagina. */
    box-shadow: 0 1px 2px rgba(19, 29, 26, 0.12);
}
.bottone-principale:hover:not(:disabled) { background: var(--accento-scuro); border-color: var(--accento-scuro); }

.bottone-pericolo { color: var(--allarme); border-color: #E8C9C4; }
.bottone-pericolo:hover:not(:disabled) { background: var(--allarme-tenue); }

.bottone-largo { width: 100%; }

.bottone-piatto {
    background: none;
    border: none;
    padding: var(--s2);
    color: var(--inchiostro-tenue);
    min-height: 36px;
}
.bottone-piatto:hover { background: var(--fondo-scuro); }

/* -----------------------------------------------------------------------------
   Messaggi
   -------------------------------------------------------------------------- */
.avviso {
    padding: var(--s3) var(--s4);
    border-radius: var(--raggio-s);
    font-size: var(--testo-s);
    margin-bottom: var(--s4);
    border-left: 3px solid;
}
.avviso-errore { background: var(--allarme-tenue); border-color: var(--allarme); color: #7A2B22; }
.avviso-attenzione { background: var(--attenzione-tenue); border-color: var(--attenzione); color: #7A4E11; }
.avviso-ok { background: var(--accento-tenue); border-color: var(--successo); color: #0C4A35; }
.avviso[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   Elenchi
   Niente riquadri ripetuti: righe con divisori. Occupano meno spazio verticale
   e si scorrono con l'occhio, che e' quello che serve a chi cerca un nome.
   -------------------------------------------------------------------------- */
.pannello {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    /* Un filo d'ombra: stacca il riquadro dal fondo senza farlo galleggiare.
       Il bordo da solo, su un fondo cosi' chiaro, spariva. */
    box-shadow: 0 1px 2px rgba(19, 29, 26, 0.04);
    overflow: hidden;
}

.pannello-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4);
    border-bottom: 1px solid var(--bordo);
}
.pannello-testa h2 { font-size: var(--testo-l); }

.riga {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--bordo);
}
.riga:last-child { border-bottom: none; }
.riga-corpo { flex: 1; min-width: 0; }
.riga-titolo { font-weight: 600; }
.riga-meta { font-size: var(--testo-s); color: var(--inchiostro-fioco); }

/* -----------------------------------------------------------------------------
   Etichette di stato
   -------------------------------------------------------------------------- */
.stato {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--testo-xs);
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}
.stato-attivo { background: var(--accento-tenue); color: var(--successo); }
.stato-sospeso { background: var(--allarme-tenue); color: var(--allarme); }
.stato-attesa { background: var(--attenzione-tenue); color: var(--attenzione); }
.stato-neutro { background: var(--fondo-scuro); color: var(--inchiostro-tenue); }

/* -----------------------------------------------------------------------------
   Schermo vuoto: un invito ad agire, non un "nessun dato".
   -------------------------------------------------------------------------- */
.vuoto { padding: var(--s7) var(--s4); text-align: center; color: var(--inchiostro-fioco); }
.vuoto p { margin-bottom: var(--s4); }

/* -----------------------------------------------------------------------------
   Caricamento
   -------------------------------------------------------------------------- */
.girella {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.sr-solo {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}