/* Import moduli CSS */
@import url('modules/sidebar.css');

/* --- LOGO NAVBAR LIGHT/DARK --- */
#logo.navbar-logo {
    display: flex;
    align-items: center;
    padding: 12px 0;
}

/* immagine logo nella navbar */
#logo.navbar-logo .navbar-logo-img {
    max-height: 70px; /* regola se vuoi più grande/piccolo */
    max-width: 180px;
    width: auto;
}

/* di default mostriamo il logo chiaro */
#logo.navbar-logo .navbar-logo-light { display: inline-block; }
#logo.navbar-logo .navbar-logo-dark  { display: none; }

/* quando l'HTML è in dark-mode, invertiamo */
html.dark-mode #logo.navbar-logo .navbar-logo-light { display: none; }
html.dark-mode #logo.navbar-logo .navbar-logo-dark  { display: inline-block; }

#login-form.propform {
    position: relative;
    z-index: 3;
}


/* Immagine payoff: si adatta alla larghezza del box */
#login-payoff {
    max-width: 550px!important;
    top: 300px;
    text-align: center;
    position: relative;   /* <-- importante */
    z-index: 5;           /* <-- sopra il form */
}

/* Immagine payoff: si adatta alla larghezza del box */
.payoff-img {
    max-width: 100%;
    height: auto;
    display: none; /* mostriamo solo quella corretta in base al tema */
}

/* Tema chiaro */
body:not(.dark-mode) .payoff-light {
    display: block;
}

/* Tema scuro */
body.dark-mode .payoff-dark {
    display: block;
}