/* Stile della shell WASM, ALLINEATO a src/AsdVirtusAdda.Club/wwwroot/css/club-app.css.
   Se tocchi qui, allinea anche gli altri portali: le tre copie devono restare
   identiche (a parte i blocchi specifici del Club: card famiglie e calendario). */
:root {
    --mud-typography-default-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------- Bordi dello schermo (PWA installata) ----------
       Installata sul telefono l'app disegna sotto la tacca, gli angoli tondi e
       la barra dei gesti: senza questi margini l'ora coprirebbe il titolo e la
       riga di sistema le voci in basso. In una finestra normale valgono 0, così
       il layout resta identico a prima. Passano da variabili e non da env()
       diretto perché così si possono simulare in prova. */
    --va-safe-top: env(safe-area-inset-top, 0px);
    --va-safe-bottom: env(safe-area-inset-bottom, 0px);
    --va-safe-left: env(safe-area-inset-left, 0px);
    --va-safe-right: env(safe-area-inset-right, 0px);

    /* Altezza della barra in alto: cresce della tacca, cala in orizzontale. */
    --va-appbar-h: 48px;
    /* Altezza della barra in basso, usata anche per lo spazio di fondo pagina. */
    --va-nav-h: 58px;
}
/* Font leggermente più piccolo su tutta l'app (MudBlazor usa rem → scala globale). */
html { font-size: 15px; }
.club-body-bg { background: var(--club-bg) !important; }

/* App bar piatta: il gradiente rubava attenzione al contenuto e lo stemma era
   ripetuto anche in cima al menu. Una tinta sola, come nell'intranet. */
.club-appbar {
    background: var(--club-appbar-b) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
    /* Sotto la tacca e dentro gli angoli tondi (in orizzontale la tacca sta di lato). */
    padding-top: var(--va-safe-top);
    padding-left: calc(12px + var(--va-safe-left));
    padding-right: calc(12px + var(--va-safe-right));
    height: calc(var(--va-appbar-h) + var(--va-safe-top));
    min-height: calc(var(--va-appbar-h) + var(--va-safe-top));
}
/* Il contenuto parte sotto la barra, tacca compresa. */
.mud-main-content { padding-top: calc(var(--va-appbar-h) + var(--va-safe-top)) !important; }
/* Anche il menu laterale scende sotto la tacca. */
.va-drawer .mud-drawer-content, .va-drawer .mud-navmenu { padding-top: var(--va-safe-top); }
/* Nome di chi è connesso, leggibile senza aprire il menu. */
.va-utente {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(255, 255, 255, .12); padding: 4px 10px; border-radius: 999px;
    font-size: 13.5px; color: inherit; max-width: 190px;
}
.va-utente-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599.98px) { .va-utente-nome { display: none; } .va-utente { padding: 4px 6px; } }
.club-wordmark { font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.club-sub { opacity: .78; font-weight: 400; }
@media (max-width: 480px) { .club-sub { display: none; } .club-wordmark { font-size: 1rem; } }

/* ---------- Menu laterale in stile intranet ----------
   Ridotto a icone (si apre al passaggio del mouse): lo spazio va al contenuto.
   Etichette, gruppi, blocco sezione e versione spariscono quando è ridotto,
   altrimenti resterebbero tronconi di testo tagliati. */
.va-sezione {
    padding: 8px 16px 10px;
    border-left: 3px solid var(--mud-palette-primary);
    margin-bottom: 4px;
}
.va-sezione-et { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-disabled); }
.va-sezione-nm { display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 1.3; }

.va-gruppo {
    font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--mud-palette-text-disabled); font-weight: 700; padding: 6px 16px 2px;
}

.va-versione {
    margin-top: 8px; padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .72rem; color: var(--mud-palette-text-disabled);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Spariscono SOLO quando il menu è ridotto alla striscia di icone: aperto —
   anche solo al passaggio del mouse — MudBlazor toglie --closed e tornano.
   (Legarle a .mud-drawer-mini le nascondeva anche a menu aperto, perché la
   classe mini resta comunque sul drawer.) */
.va-drawer.mud-drawer--closed .va-sezione,
.va-drawer.mud-drawer--closed .va-gruppo,
.va-drawer.mud-drawer--closed .va-versione { display: none; }

/* Drawer / menù a pillole. */
.club-drawer-head { display: flex; align-items: center; padding: 18px 16px 12px; }
.club-drawer .mud-navmenu { padding: 6px 10px; }
.club-drawer .mud-nav-group .mud-nav-link,
.club-drawer .mud-navmenu > .mud-nav-link {
    border-radius: 11px; margin: 2px 0; min-height: 42px;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.club-drawer .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 700; color: var(--mud-palette-primary); background: var(--club-active-bg); }
.club-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary); }
.club-drawer .mud-nav-group > .mud-nav-link { text-transform: uppercase; letter-spacing: .6px; font-size: 12px; opacity: .8; }

/* Card / paper moderne. */
.mud-card, .club-panel { border-radius: 16px; }
.mud-card { transition: box-shadow .15s ease, transform .15s ease; }
.mud-card:hover { transform: translateY(-2px); }
.mud-table-head th { text-transform: uppercase; letter-spacing: .4px; font-size: 11.5px; }

/* Dashboard: KPI badge, box-data, righe. */
.club-kpi { transition: box-shadow .15s ease, transform .15s ease; }
.club-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 32, 74, .14); }
.club-kpi-badge { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.club-kpi-badge .mud-icon-root { font-size: 26px; }
.club-event { border-radius: 12px; cursor: pointer; transition: background .12s ease; }
.club-event:hover { background: var(--mud-palette-action-default-hover); }
.club-daybox { width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.club-daybox .d-day { font-size: 18px; font-weight: 800; }
.club-daybox .d-mon { font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.club-todo { border-radius: 10px; cursor: pointer; transition: background .12s ease; }
.club-todo:hover { background: var(--mud-palette-action-default-hover); }

/* Variabili tema (classe pilotata da _dark su MudLayout). */
.club-light {
    --club-bg: #eef1f7; --club-appbar-a: #1f3a86; --club-appbar-b: #28489F; --club-active-bg: rgba(40, 72, 159, .10);
    /* Colori di stato: dicono SOLO presente / in attesa / assente. */
    --club-ok: #137A5C; --club-ok-bg: #E1F3EC;
    --club-att: #8F5A0C; --club-att-bg: #FBEEDA;
    --club-no: #C4242F; --club-no-bg: #FBE9EA;
    --club-card: #ffffff; --club-card-2: #f6f8fc; --club-linea: #DCE2EF;
}
.club-dark {
    --club-bg: #0d1424; --club-appbar-a: #0f1c3a; --club-appbar-b: #17264a; --club-active-bg: rgba(122, 160, 255, .16);
    --club-ok: #5FD3AB; --club-ok-bg: #123328;
    --club-att: #E9AF56; --club-att-bg: #33260F;
    --club-no: #FF8087; --club-no-bg: #3A1D22;
    --club-card: #151e33; --club-card-2: #1b2540; --club-linea: #2A3550;
}

/* ---------- Barra di navigazione fissa in basso (famiglie E staff) ----------
   Su telefono l'hamburger costava due tocchi per ogni spostamento e copriva lo
   schermo: la barra tiene le sezioni più usate a portata di pollice. Nello staff
   l'ultima voce apre il menu laterale, dove resta tutto il resto.
   Sopra i 960px torna il drawer laterale e la barra sparisce. */
.va-nav { display: none; }
@media (max-width: 959.98px) {
    .va-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: var(--club-card); border-top: 1px solid var(--club-linea);
        padding: 6px calc(var(--va-safe-right)) max(8px, var(--va-safe-bottom)) calc(var(--va-safe-left));
    }
    /* Con la chat le caselle sono sei: su un telefono stretto restano ~52px
       l'una, quindi icona e testo scendono di un paio di punti. Le etichette
       che non ci stanno vengono troncate, non mandate a capo. */
    .va-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        text-decoration: none; color: var(--mud-palette-text-secondary);
        font-size: 9.5px; font-weight: 600; padding: 2px 1px; min-width: 0;
    }
    .va-nav a .mud-icon-root { font-size: 20px; }
    .va-nav a.attiva { color: var(--mud-palette-primary); }
    .va-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* La voce "Menu" dello staff è un bottone, non un link: stesso aspetto. */
    .va-nav button.va-nav-btn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        background: none; border: 0; cursor: pointer; padding: 2px 1px; min-width: 0;
        color: var(--mud-palette-text-secondary); font-size: 9.5px; font-weight: 600;
        font-family: inherit;
    }
    .va-nav button.va-nav-btn .mud-icon-root { font-size: 20px; }
    /* Spazio in fondo alla pagina: la barra non deve coprire l'ultimo contenuto.
       Cresce con la barra dei gesti del telefono. */
    .va-corpo { padding-bottom: calc(var(--va-nav-h) + 20px + var(--va-safe-bottom)) !important; }
    /* Su telefono il drawer si apre solo dalla voce "Menu": niente hamburger. */
    .va-solo-desktop { display: none !important; }
    /* Il menu a icone qui è nascosto, ma MudBlazor lascia comunque al contenuto
       il margine della striscia (56px): la pagina restava stretta e spostata a
       destra. Su schermo piccolo il contenuto prende tutta la larghezza. */
    .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }
    /* …e la striscia di icone sparisce: la navigazione è la barra in basso.
       Quando si apre da "Menu" il drawer perde --closed e torna visibile. */
    .va-drawer.mud-drawer--closed { display: none !important; }
    /* In orizzontale la tacca sta di lato: il contenuto le gira intorno. */
    .va-corpo { padding-left: calc(16px + var(--va-safe-left)); padding-right: calc(16px + var(--va-safe-right)); }
}

/* ---------- Telefono in orizzontale ----------
   Restano poche centinaia di pixel di altezza: barre più basse e testo più
   piccolo, così lo spazio va al contenuto invece che alla navigazione. */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --va-appbar-h: 42px; --va-nav-h: 46px; }
    .va-nav { padding-top: 2px; }
    .va-nav a, .va-nav button.va-nav-btn { font-size: 9px; gap: 0; padding: 1px; }
    .va-nav a .mud-icon-root, .va-nav button.va-nav-btn .mud-icon-root { font-size: 17px; }
}