/**
 * Blocco utente: il segno visibile dell'autenticazione.
 *
 * NON e' una barra a se'. E' l'ultima voce del menu - quella che da ospite
 * dice «Area Riservata» - che per chi e' entrato prende la forma di avatar,
 * nome e stato. Una barra sola: la prima versione ne faceva due e il nome
 * finiva scritto due volte.
 *
 * ATTENZIONE ALLA SPECIFICITA'.
 * Il blocco vive dentro #cssmenu, e site.css dichiara
 *
 *     #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { padding: 0 ;
 *                                                               line-height: 1 ; ... }
 *
 * Un selettore con un id ( 1-0-2 ) batte una classe ( 0-1-1 ): scritte come
 * semplici .umenu a, le regole qui sotto perdevano, e il menu a tendina usciva
 * schiacciato e minuscolo. Per questo ogni regola parte da #cssmenu e
 * ridichiara esplicitamente padding, interlinea, corpo e maiuscole invece di
 * darli per ereditati.
 *
 * Palette invariata: #043c08 verde scuro - #306630 verde - #7ec97e chiaro.
 */

/** <- La voce di menu che ospita il bottone -> */
#cssmenu ul.kozuka > li.uvoce   { position: relative ; padding: 0 ; margin: 0 ; }


/**
 * <- Il bottone: solo il cerchietto con le iniziali ->
 *
 * E' un <button>, non un <div>: si raggiunge col tabulatore e risponde a
 * Invio da se', senza scriverci sopra del JavaScript.
 * Va azzerato tutto quello che il browser mette di suo sui bottoni.
 */
#cssmenu .ublocco       { display: flex ; align-items: center ; gap: 10px ;
                          padding: 13px 12px ; margin: 0 ;
                          background: none ; cursor: pointer ;
                          border: 1px solid transparent ;
                          font-family: Tahoma, Geneva, sans-serif ;
                          text-transform: none ; text-align: left ; }

#cssmenu .ublocco:hover,
#cssmenu .ublocco.aperto,
#cssmenu .ublocco:focus-visible { background: rgba( 48, 102, 48, .25 ) ;
                                  border-color: #306630 ; }

/**
 * L'avatar e' un SVG generato dal server ( shellAvatarSVG in shell.php ):
 * cerchio, sfumatura, bordo e iniziali stanno tutti li' dentro.
 *
 * Qui resta solo la dimensione. Il centraggio delle lettere non e' piu'
 * affare del CSS - lo fa dominant-baseline dentro l'SVG - e con esso sono
 * spariti line-height, box-sizing e le compensazioni a occhio che servivano
 * a rimettere in mezzo le maiuscole.
 */
#cssmenu .uavatar       { display: block ; width: 38px ; height: 38px ;
                          flex-shrink: 0 ; }

/**
 * <- LA BARRA NON DEVE MAI ANDARE A CAPO ->
 *
 * Le voci di primo livello sono float: left ( site.css:944 ), e un float va a
 * capo appena non ci sta piu' in larghezza. white-space: nowrap non lo ferma:
 * agisce sul testo, non sui float. L'unico modo di impedirlo e' non lasciare
 * che il blocco cresca - e il blocco cresce con la lunghezza del nome.
 *
 * Quindi il nome ha un tetto. Chi ha un nome lungo lo vede troncato con i tre
 * puntini, e in cambio la barra resta su una riga sola sempre, con qualunque
 * nome. Il nome per intero resta nella tendina, che si apre a un clic.
 */
#cssmenu .utesti        { display: block ; text-align: left ;
                          max-width: 150px ; min-width: 0 ; }

#cssmenu .unome         { display: block ; color: #fff ;
                          font-size: 14px ; line-height: 19px ;
                          font-family: Tahoma, Geneva, sans-serif ;
                          text-transform: none ; white-space: nowrap ;
                          overflow: hidden ; text-overflow: ellipsis ; }

#cssmenu .uruolo        { display: block ; color: #a9bda9 ;
                          font-size: 12px ; line-height: 17px ;
                          font-family: Tahoma, Geneva, sans-serif ;
                          text-transform: none ; white-space: nowrap ;
                          overflow: hidden ; text-overflow: ellipsis ; }

#cssmenu .uruolo .led   { display: inline-block ; width: 7px ; height: 7px ;
                          border-radius: 50% ; background: #7ec97e ;
                          margin-right: 6px ; vertical-align: middle ; }


/** <- Il menu a tendina -> */
/**
 * La tendina azzera la tipografia del menu PRIMA di rivestire i figli.
 *
 * Senza questa base, tutto quel che qui dentro non ha una regola propria
 * eredita da #cssmenu il corpo 18px con interlinea 1 e il maiuscolo: era
 * questo a far uscire la tendina schiacciata e minuscola. Si azzera una volta
 * sul contenitore, cosi' nessun elemento aggiunto in seguito ricade nella
 * stessa trappola.
 */
#cssmenu .umenu         { position: absolute ; top: 100% ; right: 0 ; width: 250px ;
                          background: #fff ; border-top: 4px solid #306630 ;
                          box-shadow: 0 6px 20px rgba(0,0,0,.35) ;
                          z-index: 3000 ; display: none ; text-align: left ;
                          padding: 0 ;
                          font-family: Tahoma, Geneva, sans-serif ;
                          font-size: 14px ; line-height: 1.45 ;
                          text-transform: none ; color: #1a1a1a ; }

#cssmenu .umenu.aperto  { display: block ; }

#cssmenu .umenu .testata    { padding: 14px 18px ; border-bottom: 1px solid #e2e8e2 ;
                              font-size: 14px ; line-height: 1.45 ;
                              text-transform: none ; }

#cssmenu .umenu .testata b  { display: block ; color: #043c08 ; font-weight: bold ;
                              font-size: 14px ; line-height: 20px ;
                              text-transform: none ;
                              font-family: Tahoma, Geneva, sans-serif ; }


#cssmenu .umenu a       { display: block ; padding: 12px 18px ; color: #1a1a1a ;
                          font-size: 14px ; line-height: 20px ;
                          text-decoration: none ; text-transform: none ;
                          font-family: Tahoma, Geneva, sans-serif ;
                          border-left: 3px solid transparent ; }

#cssmenu .umenu a .ico  { display: inline-block ; width: 22px ; color: #306630 ;
                          font-size: 14px ; }

#cssmenu .umenu a:hover { background: #f4f7f4 ; border-left-color: #306630 ;
                          color: #1a1a1a ; }

#cssmenu .umenu .separa { border-top: 1px solid #e2e8e2 ; margin: 4px 0 ; }

#cssmenu .umenu a.esci      { color: #8a1f1f ; }
#cssmenu .umenu a.esci:hover{ color: #8a1f1f ; }
#cssmenu .umenu a.esci .ico { color: #8a1f1f ; }