/* Campi (WASM) — tab bar inferiore mobile-first per CampiShell.
   Fissa in basso, safe-area iOS, FAB centrale rosso per "Blocca campo". */

/* ---------- Bordi dello schermo (PWA installata) ----------
   Stessi nomi degli altri portali: installata sul telefono l'app disegna sotto
   la tacca, gli angoli tondi e la barra dei gesti. In finestra normale valgono
   0 e il layout resta identico. */
:root {
    --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);
    --va-appbar-h: 64px;
}

/* La barra in alto scende sotto la tacca e il contenuto la segue. */
.club-appbar {
    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));
}
.mud-main-content { padding-top: calc(var(--va-appbar-h) + var(--va-safe-top)) !important; }

.campi-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 6px calc(8px + var(--va-safe-right)) calc(6px + var(--va-safe-bottom)) calc(8px + var(--va-safe-left));
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, .12));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
}

.campi-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary, #6b6b6b);
    border-radius: 12px;
}

.campi-tab .ic {
    font-size: 20px;
    line-height: 1;
}

.campi-tab.on {
    color: var(--mud-palette-primary, #DB2C39);
}

.campi-tab.fab {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    margin-top: -26px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #DB2C39);
    color: #fff;
    box-shadow: 0 8px 18px rgba(219, 44, 57, .45);
}

.campi-tab.fab .ic {
    font-size: 28px;
    font-weight: 700;
}

/* La tab bar è mobile-first ma resta comoda anche su desktop stretto. */
@media (min-width: 960px) {
    .campi-tabbar {
        max-width: 720px;
        margin: 0 auto;
        border-radius: 16px 16px 0 0;
    }
}

/* Spazio di fondo pagina: la tab bar (con il suo pulsante sporgente) non deve
   coprire l'ultimo contenuto, e cresce con la barra dei gesti. */
.va-corpo { padding-bottom: calc(96px + var(--va-safe-bottom)) !important; }

/* Telefono in orizzontale: barre più basse, lo spazio va al contenuto. */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --va-appbar-h: 52px; }
    .campi-tab { font-size: 10px; padding: 2px; }
    .campi-tab .ic { font-size: 17px; }
    .campi-tab.fab { width: 46px; height: 46px; margin-top: -18px; }
    .campi-tab.fab .ic { font-size: 22px; }
    .va-corpo { padding-bottom: calc(78px + var(--va-safe-bottom)) !important; }
}