:root {
    --wavios-gradient-brand: linear-gradient(90deg, #06B6D4, #3B82F6 45%, #10B981 55%, #84CC16);
}

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--rz-base-200, #eef1f5);
}

/* ----- Login: stessa scena della login staff ----- */

.login-page {
    min-height: 100vh;
    display: flex;
    /* column, non row: il blocco dei badge è un fratello della card e senza
       questo finirebbe ACCANTO invece che sotto. align-items/justify-content
       continuano a centrare, sui due assi invertiti. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ----- Badge degli store, sotto la card ----- */

.store-badges {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.store-badges-riga {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

/* Altezza uguale per entrambi e larghezza automatica: i badge ufficiali hanno
   proporzioni diverse (Google 3.4:1, Apple 3:1) e allinearli sull'altezza è
   anche quello che chiedono le linee guida di Apple. Non vanno ritagliati né
   ridisegnati: sono marchi. */
.store-badges img {
    display: block;
    height: 40px;
    width: auto;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.login-brand-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--wavios-gradient-brand);
}

/* ----- Struttura dell'app ----- */

.portale {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Testata col filo gradiente del brand, piena larghezza come un sito */
.testata {
    border-bottom: 3px solid;
    border-image: var(--wavios-gradient-brand) 1;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}

.testata-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: .6rem 1.25rem .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* «Stai guardando»: il selettore familiare in testata (ADR-013).

   Quando si guarda per conto di un figlio cambia colore, ed è l'unico segnale
   che distingue «le mie prenotazioni» da «quelle di Anna» — da qui si disdice
   una lezione con un clic. */

.selettore-famiglia {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: var(--rz-base-200, #f3f4f6);
    font-size: .8rem;
}

.selettore-famiglia.per-conto {
    background: var(--rz-info-lighter, #e0f2fe);
    box-shadow: inset 0 0 0 1px var(--rz-info, #0284c7);
}

.selettore-famiglia .etichetta {
    color: var(--rz-text-secondary-color, #6b7280);
    white-space: nowrap;
}

.selettore-famiglia .scelta {
    border: 1px solid var(--rz-border-color, #d1d5db);
    background: #fff;
    color: var(--rz-text-color, #111827);
    border-radius: 999px;
    min-height: 30px;
    padding: .15rem .7rem;
    font-size: .8rem;
    white-space: nowrap;
    cursor: pointer;
}

.selettore-famiglia .scelta.attiva {
    background: var(--rz-primary, #0891b2);
    border-color: var(--rz-primary, #0891b2);
    color: #fff;
    font-weight: 600;
}

/* Navigazione orizzontale (desktop) */
.nav-top {
    display: flex;
    gap: .25rem;
}

.voce-top {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    text-decoration: none;
    color: var(--rz-text-secondary-color, #6b7280);
}

/* L'hover solo dove esiste un puntatore che passa sopra senza premere.

   Al tocco `:hover` non è uno stato di passaggio: resta applicato finché non si
   tocca altrove. Qui il danno è concreto, perché `.voce-top.active` è anch'essa
   una pillola colorata — dopo un «indietro» del browser si vedrebbero DUE voci
   accese e nessuno saprebbe dire in quale pagina si trova. */
@media (hover: hover) and (pointer: fine) {
    .voce-top:hover {
        background: var(--rz-base-100, #f4f6f8);
    }
}

.voce-top.active {
    color: var(--rz-primary, #0891B2);
    font-weight: 600;
    background: color-mix(in srgb, #0891B2 8%, transparent);
}

/* Contenuto: largo da desktop, colonna da telefono */
.contenuto {
    flex: 1;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2rem;
    box-sizing: border-box;
}

/* Barra in basso (solo telefono) */
.barra {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid var(--rz-border-color, #e5e7eb);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
    padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
    z-index: 100;
}

.barra .voce {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .25rem 0;
    font-size: .7rem;
    text-decoration: none;
    color: var(--rz-text-secondary-color, #6b7280);
}

.barra .voce.active {
    color: var(--rz-primary, #0891B2);
    font-weight: 600;
}

/* Lo scambio testata/barra: sopra i 900px si naviga in alto */
@media (min-width: 900px) {
    .barra { display: none; }
    .contenuto { padding-bottom: 2rem; }
}

@media (max-width: 899.98px) {
    .nav-top { display: none; }
    .contenuto { max-width: 640px; padding-bottom: 5.5rem; }
    /* Sul telefono la testata ha solo il logo, e le voci scendono in basso:
       il selettore resta qui perché è l'unico posto in cui si vede sempre. */
    .testata-inner { justify-content: space-between; gap: .5rem; }
    .selettore-famiglia .etichetta { display: none; }
}

.con-badge { position: relative; display: inline-flex; }

.badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--rz-danger, #dc2626);
    color: #fff;
    font-size: .62rem;
    line-height: 16px;
    text-align: center;
}

/* Griglia a due colonne da desktop, colonna sola da telefono */
.griglia-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

/* Voci d'elenco (collegamenti nel profilo) */
.voce-elenco {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--rz-text-color, #1f2937);
    font-size: .95rem;
}

/* Stessa ragione della navigazione: al tocco resterebbe acceso «Pagamenti»
   anche dopo essere tornati indietro. */
@media (hover: hover) and (pointer: fine) {
    .voce-elenco:hover { background: var(--rz-base-100, #f4f6f8); }
}

.voce-elenco .rz-icon { color: var(--rz-primary, #0891B2); }

.voce-elenco + .voce-elenco { border-top: 1px solid var(--rz-base-100, #f0f2f5); }

/* Avvio */
.avvio {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.avvio .logo {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: .2rem;
    color: #0891B2;
}

.avvio .attesa {
    color: #64748B;
    font-size: .85rem;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    padding: .8rem 1.2rem;
    background: #fee2e2;
    color: #7f1d1d;
    font-size: .85rem;
}

#blazor-error-ui .dismiss { position: absolute; right: .75rem; top: .5rem; cursor: pointer; }

/* Abbonamenti attivi nel profilo: uno sotto l'altro, separati da una riga.
   Senza il separatore due abbonamenti con pacchetto e scadenza si leggono
   come un unico blocco di quattro righe. */
.riga-abbonamento + .riga-abbonamento {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rz-base-200, #e8ebee);
}

/* ===========================================================================
   Modalità tocco — @media (pointer: coarse)

   Il portale nasce per il socio col telefono e per il gestore col mouse. Da
   settembre lo usa anche lo STAFF, su tablet da 1280×800 a bordo vasca: in
   piedi, di fretta, spesso con le mani bagnate. Quello schermo prende già il
   ramo giusto del layout — navigazione in alto, due colonne, e nessuno dei
   componenti Radzen che al tocco fanno disperare — ma i comandi hanno le
   misure ereditate dal telefono, dove servivano a far stare tutto: 28px dove
   il dito ne vuole 44.

   La condizione è `pointer: coarse` e non una larghezza, per due motivi. Il
   primo è che il problema non è la dimensione dello schermo ma il dito: un
   tablet più piccolo o più grande ha lo stesso bisogno, e un portatile da
   1280 col mouse no. Il secondo è che la stessa condizione serve a spegnere
   gli `:hover`, e tenere le due cose in blocchi diversi vorrebbe dire due
   verità che prima o poi divergono.

   Chi usa il mouse non vede cambiare niente.
   =========================================================================== */

@media (pointer: coarse) {

    /* ----- I pulsanti «Small» smettono di essere piccoli -----

       Nel portale ci sono ventotto `Size="ButtonSize.Small"`, e non sono
       decorazioni: sono «Disdici», «Prenota», «Conferma», «Paga la quota».
       Si correggono qui e non nelle ventotto chiamate perché la misura giusta
       dipende da COME si sta usando il portale, non da quale pulsante è: la
       stessa pagina, dal computer della reception, li vuole piccoli. */
    .rz-button.rz-button-sm {
        min-height: 44px;
        padding: .625rem 1rem;
    }

    .rz-button.rz-button-sm.rz-button-icon-only {
        min-width: 44px;
        min-height: 44px;
        padding: .625rem;
    }

    /* I pulsanti di dimensione normale sono a 36px: mancano otto pixel. */
    .rz-button {
        min-height: 44px;
    }

    /* ----- Il selettore familiare -----

       Era il bersaglio più piccolo del portale (30px, e 6,4px fra un nome e
       l'altro) ed è anche il più consequenziale: cambiarlo cambia di chi sono
       le prenotazioni che stai guardando, e da lì si disdice una lezione con
       un tocco. */
    .selettore-famiglia { gap: .75rem; padding: .3rem .6rem; }

    .selettore-famiglia .scelta {
        min-height: 44px;
        padding: .5rem 1rem;
        font-size: .875rem;
    }

    /* ----- La navigazione in alto -----

       Cinque destinazioni a 40px di altezza e 4px di distanza, toccate decine
       di volte al giorno. */
    .nav-top { gap: .5rem; flex-shrink: 0; }

    .voce-top {
        min-height: 44px;
        padding: .6rem 1rem;
    }

    /* Ingrandendo comandi e distanze la testata diventa più larga, e con tre
       o quattro familiari dai nomi lunghi non ci sta in 1024px. Nessuno dei
       tre blocchi aveva una protezione: il primo a cedere sarebbe stato il
       testo delle voci di menu, che andrebbe a capo dentro la pillola.

       Si preferisce che sia la TESTATA ad andare a capo, con il selettore che
       scende su una riga sua: due righe pulite invece di cinque pillole
       sformate. Il menu non si stringe mai. */
    .testata-inner { flex-wrap: wrap; row-gap: .5rem; }

    /* ----- Le voci d'elenco del profilo -----

       Erano già a 46px, quindi l'altezza va bene: quello che manca è lo stacco
       fra una e l'altra. Quattro voci separate da un bordo di 1px, e fra
       «Privacy» e «Cambia struttura» non c'è margine d'errore. */
    .voce-elenco { padding: .85rem .5rem; }

    /* ----- Caselle, radio e interruttori -----

       Radzen protegge già l'hover dei pulsanti dietro `(hover: hover)`, ma non
       questi tre: dopo aver spuntato un turno resta un disco grigio di 40px
       attorno alla casella, e dopo aver cambiato un consenso l'interruttore
       resta con un alone colorato. Sembrano stati — «in corso», «selezionato»
       — e non lo sono. */
    .rz-chkbox-box:hover:not(.rz-state-disabled)::after,
    .rz-radiobutton-box:hover:not(.rz-state-disabled)::after {
        width: 0;
        height: 0;
        opacity: 0;
    }

    .rz-switch .rz-switch-circle:hover:not(.rz-disabled)::before {
        box-shadow: none;
    }

    /* L'area colpibile di casella e radio NON si allarga da qui.

       Il tentativo ovvio — `padding` sul contenitore — non funziona e fa
       danno: `.rz-chkbox` è `box-sizing: border-box` con `width`, `height` e
       `min-width` fissati a 1.125rem, quindi il padding mangia il contenuto
       invece di aggiungersi, e la casella si schiaccia a zero senza che il
       bersaglio cresca di un pixel. Vale identico per `.rz-radiobutton` e per
       `.rz-switch`.

       La strada giusta è rendere colpibile la RIGA, e quella sta nel nostro
       markup: Radzen non disegna un `<input>` vero, quindi nemmeno un
       `<label>` che lo avvolge servirebbe a qualcosa — ci vuole un `@onclick`
       sulla riga, ed è quello che fanno adesso la scelta dei turni, i termini
       dell'accesso e i consensi della privacy. */

    /* L'interruttore dei consensi cresce di un quarto: `transform` non tocca
       la scatola di layout, quindi non sposta niente attorno. Il bersaglio
       vero però resta la riga. */
    .rz-switch { transform: scale(1.25); transform-origin: left center; }

    /* Righe con una casella o un interruttore: il bersaglio è tutta la riga,
       e si vede che lo è. */
    .riga-scelta {
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 44px;
        padding: .35rem .5rem;
        margin-inline: -.5rem;
        border-radius: 8px;
        cursor: pointer;
    }

    /* ----- I toast non atterrano più sui comandi -----

       Radzen li mette a 100px dall'alto, a destra, che su questo layout è
       esattamente sopra la freccia «mese successivo»: dopo ogni prenotazione
       il pulsante per cambiare mese restava coperto finché il toast non
       scadeva. La testata è alta 61px e l'intestazione di pagina arriva a 113. */
    .rz-notification { inset-block-start: 132px; }
}

/* Le etichette dei comandi che altrimenti sarebbero solo un'icona.

   Tre pulsanti del portale dicono cosa fanno soltanto nel `title=`, che al
   tocco non si apre mai: `close` è «disdici», `logout` è «esci dalla lista»,
   `event_repeat` è «iscriviti al corso». Restavano tre quadratini con un
   pittogramma, e uno dei tre cancella una prenotazione.

   Il testo sta nel markup e si nasconde solo dove non ci starebbe — sotto i
   900px, cioè sul telefono, dove la riga della lezione è già stretta. Il
   contrario (testo aggiunto solo da tablet in su) avrebbe voluto dire due
   markup diversi per la stessa azione. */
@media (max-width: 899.98px) {
    .azione-con-icona .rz-button-text { display: none; }
}