/* Correzioni ad app.css (condiviso con la web app completa) per la versione incorporata nei siti
   delle AVIS. Solo cio' che cambia: lo stile resta quello dell'app. */

/* Nell'iframe lo sfondo della pagina ospite non deve trasparire dai margini. */
html, body {
    background-color: #fff;
}

/* ===================================== */
/* MENU                                  */
/* ===================================== */

/* Le etichette sono sempre nel DOM (servono alla barra fissa qui sotto): a barra chiusa si
   nascondono, come faceva la sidebar dell'app non disegnandole. */
.sidebar.menu-prenotazioni.collapsed .nav-link span {
    display: none;
}

/* Barra aperta: larga quanto la voce piu' lunga, a qualunque dimensione del carattere. Le misure
   fisse di app.css (233/295/330px) troncavano "Prenotazioni donazioni", soprattutto sulla voce
   attiva che e' in grassetto. Sotto i 768px app.css la apre a tutto schermo e resta cosi'. */
@media (min-width: 769px) {
    .page .sidebar.menu-prenotazioni.expanded {
        width: max-content !important;
        min-width: 233px !important;
    }

    .sidebar.menu-prenotazioni.expanded .nav-link {
        padding-right: 1.25rem !important;
    }
}

/* Schermo largo: barra sempre aperta e non richiudibile, affiancata al contenuto invece che
   sovrapposta. La pagina diventa una riga: la barra (sticky, alta quanto la finestra) prende la
   larghezza delle sue voci e il contenuto tutto il resto, senza margini da indovinare. */
@media (min-width: 992px) {
    .page.layout-prenotazioni {
        display: flex;
        align-items: stretch;
        min-height: 100%;
    }

    .page.layout-prenotazioni > .main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .page.layout-prenotazioni > .main:not(.no-margin) {
        margin-left: 0;
    }

    .page .sidebar.menu-prenotazioni,
    .page .sidebar.menu-prenotazioni.collapsed,
    .page .sidebar.menu-prenotazioni.expanded {
        position: sticky;
        top: 0;
        width: max-content !important;
        min-width: 233px !important;
    }

    /* Niente chevron, niente logo e niente spazio sopra: le voci partono dal bordo alto. */
    .sidebar.menu-prenotazioni .toggle-button,
    .sidebar.menu-prenotazioni .menu-testa {
        display: none !important;
    }

    .page .sidebar.menu-prenotazioni {
        padding-top: 0;
    }

    /* Le regole della barra chiusa di app.css (icona centrata, niente spazi) vanno riportate a
       quelle della barra aperta. */
    .sidebar.menu-prenotazioni.collapsed .nav-link {
        justify-content: flex-start;
        padding-left: 0.4rem !important;
        padding-right: 1.25rem !important;
    }

    .sidebar.menu-prenotazioni.collapsed .nav-link i {
        flex: 0 0 2rem;
        width: 2rem;
        min-width: 2rem;
        text-align: center;
    }

    .sidebar.menu-prenotazioni.collapsed .nav-link span {
        display: inline;
    }
}

/* ===================================== */
/* CALENDARIO E FASCE ORARIE             */
/* ===================================== */

/* In app.css il calendario prende tutta la larghezza con celle quadrate: va bene sul telefono,
   ma nel browser di un computer ogni giorno diventava un riquadro di 8-9 cm e il mese non stava
   nella finestra. Qui calendario e orari hanno una larghezza massima e stanno al centro: sul
   telefono, piu' stretto del limite, non cambia niente. */
.calendario-testa,
.calendario-griglia,
.calendario-legenda {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.fasce-griglia {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

/* Spazio in fondo per i selettori di lingua e carattere, fissi in basso a sinistra, che
   altrimenti coprirebbero gli ultimi comandi del modulo quando l'iframe e' basso. */
.main {
    padding-bottom: 4.5rem;
}