/* Barra superiore e menu allineati alla pagina di accesso: stesso fondo scuro
   (rgba(32,35,45) del riquadro di login), forme squadrate, e la voce corrente
   nel colore del marchio invece del turchese del template.
   I colori arrivano dal foglio del tenant, che definisce --marchio.
   Nota: nel layout orizzontale il menu non sta dentro .topbar ma in
   aside.left-sidebar, che compare come seconda riga sotto il logo. */

.topbar,
.topbar .navbar-header,
.topbar .top-navbar,
.topbar .navbar-collapse,
.left-sidebar,
.left-sidebar .scroll-sidebar,
.left-sidebar .sidebar-nav,
#main-wrapper[data-layout=horizontal] .left-sidebar {
    background-color: var(--sfondo-barra, #262A36) !important;
}

/* niente trama: comparendo solo ai lati del contenitore centrale spezzava la
   barra in due. Fondo unico, compresa la fascia del logo, che il template
   colorava a parte con un grigio diverso. */
.topbar,
.topbar .navbar-header,
.topbar .top-navbar,
#main-wrapper[data-layout=horizontal] .left-sidebar,
#main-wrapper[data-navbarbg] .topbar .navbar-header,
#main-wrapper[data-logobg] .topbar .navbar-header,
.topbar .navbar-header[data-logobg],
.navbar-header[data-logobg] {
    background-image: none !important;
    background-color: var(--sfondo-barra, #262A36) !important;
}

.topbar { box-shadow: none !important; }
.left-sidebar { box-shadow: 0 1px 0 var(--bordo-barra, #15171E) !important; }

/* voci del menu: angoli appena smussati come i campi della pagina di accesso */
.sidebar-nav ul#sidebarnav > li > a.sidebar-link,
.topbar .navbar-nav .nav-link {
    border-radius: 4px !important;
    color: rgba(255, 255, 255, .78) !important;
}

.sidebar-nav ul#sidebarnav > li > a.sidebar-link:hover,
.topbar .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

/* la voce su cui ci si trova: il template le mette .active sul link e
   .selected sull elemento di elenco (vedi assets/dist/js/sidebarmenu.js) */
.sidebar-nav ul#sidebarnav > li.selected > a.sidebar-link,
.sidebar-nav ul#sidebarnav > li > a.sidebar-link.active,
.sidebar-nav ul#sidebarnav > li.active > a.sidebar-link {
    background-color: var(--marchio, #DE0A74) !important;
    color: #fff !important;
    border-radius: 4px !important;
    opacity: 1 !important;
}

.sidebar-nav ul#sidebarnav > li.selected > a.sidebar-link i,
.sidebar-nav ul#sidebarnav > li > a.sidebar-link.active i { color: #fff !important; }

/* il pulsante principale come il "Log In" della pagina di accesso */
.btn-info {
    --bs-btn-bg: var(--azione, #2962FF);
    --bs-btn-border-color: var(--azione, #2962FF);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--azione-scura, #1E4FD8);
    --bs-btn-hover-border-color: var(--azione-scura, #1E4FD8);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--azione-scura, #1E4FD8);
    --bs-btn-active-border-color: var(--azione-scura, #1E4FD8);
}

/* Pie di pagina nello stesso colore della barra, cosi la pagina si chiude
   in simmetria con la testata. Resta in fondo al contenuto: se la pagina e
   corta si appoggia al bordo inferiore, se e lunga lo segue senza coprirlo. */
.footer {
    background: var(--sfondo-barra, #262A36) !important;
    border-top: 1px solid var(--bordo-barra, #15171E) !important;
    color: rgba(255, 255, 255, .70) !important;
    padding: 14px 15px !important;
    text-align: center;
    font-size: .82rem;
}

.footer a {
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: none;
}

.footer a:hover { color: #fff !important; text-decoration: underline; }

/* Sotto il pie restava una striscia chiara. Invece di rincorrere le altezze
   (il tema ha gia una sua altezza minima sul contenitore interno, e i due
   calcoli si sommavano) la fascia bassa della finestra viene dipinta del
   colore del pie: qualunque spazio avanzi sotto risulta dello stesso colore
   e la pagina si chiude pulita. Il contenuto ci passa sopra normalmente. */
body {
    background-image: linear-gradient(var(--sfondo-barra, #262A36), var(--sfondo-barra, #262A36)) !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    background-size: 100% 220px !important;
    background-attachment: fixed !important;
}

/* Pagine di accesso (login, codice OTP, prima impostazione, recupero password).
   Qui non c'e' il contenitore delle pagine interne: la fascia scura disegnata
   in fondo alla finestra restava scoperta e si vedeva come una striscia nera.
   Su queste pagine la fascia non serve, e il copyright va senza sfondo: solo
   il testo, scuro, perche' si legga sopra il chiaro della pagina. */
body.pagina-accesso {
    background-image: none !important;
}

body.pagina-accesso .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: transparent !important;
    border-top: 0 !important;
    color: #4a5568 !important;
    /* la pagina di accesso ha un'animazione chiara dietro: un filo di bianco
       sotto le lettere le tiene leggibili anche quando ci passa sopra */
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
    pointer-events: none;
}

body.pagina-accesso .footer a {
    color: #4a5568 !important;
    text-decoration: none;
    pointer-events: auto;   /* il collegamento resta cliccabile */
}

body.pagina-accesso .footer a:hover {
    color: var(--marchio, #DE0A74) !important;
    text-decoration: underline;
}