/*
 * ==========================================================
 * PROGETTO:    Corsi
 * FILE:        menu.css
 * Path:        css/menu.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Stili specifici di dominio per il menu applicativo: indicatori colorati
 * delle sezioni, non generalizzabili nel framework.
 * ==========================================================
 */

.menu-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    margin-left: -7px;
    margin-bottom: 2px;
    border-radius: var(--radius-round);
    vertical-align: middle;
    opacity: 0.8;
}

.menu-dot-usr {
    background-color: var(--color-dot-usr);
}

.menu-dot-crs {
    background-color: var(--color-dot-crs);
}

.menu-dot-gen {
    background-color: var(--color-dot-gen);
}

.menu-dot-loc {
    background-color: var(--color-dot-loc);
}

.menu-dot-tmp {
    background-color: var(--color-dot-tmp);
}

.menu-dot-sys {
    background-color: var(--color-dot-sys);
}

/* Icona della lingua nella barra, come l'icona dell'account. */
/* Icona del menu Info (cerchio con il "?") nella barra: stessa misura di account e lingua. */
.icon.language,
.icon.info {
    vertical-align: middle;
    font-size: 28px;
}

/* La voce Lingua e' vicina al bordo destro: la tendina si allinea a destra
 * del suo pulsante invece di uscire dalla finestra. */
.menu-main > li.menu-language > .dropdown {
    left: auto;
    right: 0;
}

/* Prima riga del sottomenu Account: chi e' collegato, con nome e cognome e sotto
 * l'email. Non e' un link: sfondo grigio come la lingua corrente (menu-current),
 * niente evidenziazione al passaggio del mouse ne' cursore di menu, e l'email
 * troppo lunga si accorcia con i puntini. */
.menu-main .dropdown .menu-account-info > a {
    height: auto;
    line-height: 1.3;
    padding-top: 6px;
    padding-bottom: 11px;
    cursor: default !important;
}

.menu-main .dropdown .menu-account-info > a,
.menu-main .dropdown .menu-account-info > a:hover {
    color: var(--color-on-dark);
    background: var(--color-border-soft-alt);
}

.menu-account-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.menu-account-email {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
    color: var(--color-text-muted);
}

/* Voce che indica dove ci si trova (la lingua corrente): sfondo chiaro e testo
 * leggibile come le altre (non e' disattivata, e' quella scelta), senza
 * l'evidenziazione verde al passaggio del mouse perche' non c'e' niente da scegliere. */
.menu-main .dropdown li.menu-current > a,
.menu-main .dropdown li.menu-current > a:hover {
    color: var(--color-on-dark);
    background: var(--color-border-soft-alt);
}

.menu-flag {
    display: inline-block;
    width: 21px;
    height: 18px;
    margin-right: 12px;
    margin-left: -8px;
    margin-top: -3px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Nel pannello del menu su schermo stretto (hamburger) Kerno toglie le icone e
 * mostra il nome delle voci che nella barra sono solo un'icona (menu.css di
 * Kerno): qui si tolgono anche le bandiere del sottomenu Lingua, i cui nomi
 * sono gia' scritti nella propria lingua. */
@media (max-width: 640px) {
    .menu-flag {
        display: none;
    }
}

/* Icona (translate, settings, ...) davanti a una voce di menu, al posto
 * del pallino colorato usato per le altre sezioni: comunica il concetto
 * della voce in modo piu' diretto di un indicatore generico. Dimensione
 * indipendente da .menu-dot (classe separata): puo' essere regolata
 * senza effetto sui pallini delle altre voci. Larghezza fissa (invece
 * che quella naturale del singolo glifo, leggermente diversa da icona a
 * icona) cosi' il testo di ogni voce si allinea sempre alla stessa
 * colonna, indipendentemente da quale icona la precede. */
.menu-icon {
    width: 22px;
    margin-top: -2px;
    margin-right: 8px;
    margin-left: -7px;
    font-size: 22px;
    vertical-align: middle;
    opacity: 0.8;
}

.menu-icon-login {
    margin-left: -8px;
    margin-right: 9px;
}

.menu-icon-profile {
    width: 24px;
    margin-top: -4px;
    margin-left: -9px;
    margin-right: 10px;
}

.menu-icon-settings {
    margin-left: -8px;
    margin-right: 10px;
}

.logo-image {
    height: 100%;
    background-image: url("../images/icons/icon-192.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    padding-left: 50px;
    min-width: 40px;
}

/* Sotto i 768px il testo "Corsi" resta nascosto: niente testo che
 * va a capo su schermo stretto, il titolo di pagina gia' presente
 * altrove rende comunque chiaro dove ci si trova. Da 768px in su c'e'
 * abbastanza spazio per mostrarlo accanto all'icona. */
@media (max-width: 767px) {
    .logo-text {
        display: none;
    }
}