/*
    File: project/static/css/layout.css
    Descrizione: Stili per il layout generale del sito (container, nav-bar, home page).
*/

/* Regola .container unificata */
.container {
    max-width: 1400px;
    width: 100%;
    margin: 20px auto;
    background-color: var(--container-bg-color);
    padding: 10px 30px; /* MODIFICA: 10px (alto/basso), 30px (lati) */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* NOTA: Colore fisso, come da accordi non lo tocchiamo */
    box-sizing: border-box;
}

/* --- INIZIO BLOCCO NAVBAR CORRETTO (display: flex) --- */
/* Questo è il blocco corretto (display: flex) che genera la spaziatura che desideri */
.main-nav {
    display: flex; /* Attiva Flexbox per allineare gli elementi */
    align-items: center; /* Allinea verticalmente gli elementi */
    background-color: var(--main-nav-bg); 
    padding: 10px 20px; /* Aggiunto padding laterale per dare spazio */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* NOTA: Colore fisso */
    
    /* Regole prese dal 'base.css' originale per mantenere lo stile */
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 0.9em; /* RIPRISTINATO: Corregge la dimensione del testo */
    position: sticky; 
    top: 0;
    z-index: 100;
}

/* Regole per gli elementi interni (da layout.css) */
.main-nav .nav-item {
    color: var(--main-nav-link); /* MODIFICA: Variabile tema */
    text-decoration: none;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 5px;
    display: inline-block; 
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.1em; /* Corretto: 1.1em * 0.9em = 0.99em */
    font-weight: bold;
}

.main-nav .nav-item:hover {
    background-color: var(--primary-color); /* MODIFICA: Variabile tema */
    transform: translateY(-2px);
}

.main-nav .nav-item i {
    margin-right: 8px;
}

/* QUESTA È LA REGOLA CHIAVE PER LA TUA SPAZIATURA */
.nav-right-items {
    margin-left: auto; /* Spinge questo blocco tutto a destra */
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-user {
    font-weight: bold;
    color: var(--text-color-secondary); /* MODIFICA: Variabile tema */
}
/* --- FINE BLOCCO NAVBAR CORRETTO --- */


/* --- Stili per l'Header (Logo) --- */
.site-header {
    padding: 1rem 0;
    text-align: center;
    background-color: var(--header-bg-color); /* MODIFICA: Usa la variabile del tema */
}

/* --- MODIFICA CHIAVE QUI --- */
/*
  Usiamo la pseudo-classe :not() per applicare questa regola a TUTTE le pagine
  TRANNE quelle il cui body ha la classe .login-page.
  Questo risolve il conflitto alla radice.
*/
body:not(.login-page) .header-logo {
    max-height: 180px;
    width: auto;
}


/* --- Stili per la Pagina Home (index.html) --- */
.homepage-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 40px auto;
    padding: 0;
}

.homepage-buttons h1 {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.homepage-buttons p {
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 25px;
}

.homepage-buttons > .button {
    width: 270px;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
}

@media (max-width: 799px) {
    .homepage-buttons > .button {
        width: 100%;
    }
}

/* --- NUOVA REGOLA: Stile per il Footer (Copyright) --- */
/* Applica la nuova variabile colore al tag <footer> */
footer {
    color: var(--text-color-footer);
    
    /* --- INIZIO MODIFICA: Rendi footer "stretto" (sottile) V2 --- */
    /* Rimuove il padding verticale del footer stesso */
    padding: 0; 
    /* --- FINE MODIFICA --- */
    
    text-align: center;
}

/* --- INIZIO MODIFICA: Rendi footer "stretto" (sottile) V2 --- */
/* Rimuove il margine verticale del .container 
   quando si trova DENTRO il footer. */
footer > .container {
    margin-top: 0;
    margin-bottom: 0;
    /* Manteniamo un po' di padding interno per non far toccare il testo ai bordi */
    padding-top: 10px;
    padding-bottom: 10px;
}
/* --- FINE MODIFICA --- */

/* ================================================ */
/* == Stili per il Dropdown Menu 'Impostazioni' == */
/* ================================================ */

/* 1. Il contenitore (div.nav-item-container) */
.nav-item-container {
    position: relative;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 5px; 
    margin: 0 5px; 
}
.nav-item-container:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

/* 2. Il link 'a.nav-item' all'interno */
.nav-item-container .nav-item {
    color: var(--main-nav-link);
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block; 
    font-size: 1.1em;
    font-weight: bold;
    transition: none; 
}

/* 3. Il sottomenu, nascosto di default (Stile "Frosted Glass") */
.dropdown-content {
    display: none;
    position: absolute;
    
    /* =====================================================================
       == QUESTA E' LA RIGA DA MODIFICARE PER LA TRASPARENZA (LIGHT MODE) ==
       =====================================================================
       (Valore più basso = più trasparente. Era 0.6, ora 0.45)
    */
    background-color: rgba(250, 250, 250, 0.45); 
    
    /* Aggiunge l'effetto "blur" (vetro satinato) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Supporto per Safari */
    
    min-width: 220px;
    z-index: 1000;
    border: none; 
    border-radius: 8px; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.15); 
    top: 100%; 
    left: 0;
    margin-top: 10px; 
}

/* Regola per il Dark Mode (MODIFICATA) */
body.dark-mode .dropdown-content {
    /* ====================================================================
       == QUESTA E' LA RIGA DA MODIFICARE PER LA TRASPARENZA (DARK MODE) ==
       ====================================================================
       (Valore più basso = più trasparente. Era 0.6, ora 0.45)
    */
    background-color: rgba(250, 250, 250, 0.45);
    
    /* Rimuoviamo il bordo chiaro, non più necessario */
    border: none;
}

/* Regola "Ponte Invisibile" per l'Hover
   Risolve il bug per cui il menu scompare nello spazio tra la barra e il menu.
*/
.dropdown-content::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%; 
    height: 10px; /* Alto esattamente come il 'margin-top' */
    background-color: transparent; /* È invisibile */
}

/* 4. Mostra il sottomenu quando si passa il mouse sul contenitore */
.nav-item-container:hover .dropdown-content {
    display: block;
}

/* 5. Stile per i link nel sottomenu (Stile Moderno) */
.dropdown-content a {
    color: var(--text-color);
    padding: 10px 18px; 
    text-decoration: none;
    display: block;
    white-space: nowrap;
    border-bottom: none; 
    border-radius: 6px; 
    margin: 4px 6px; 
}

/* 6. Effetto Hover per i link nel sottomenu */
.dropdown-content a:hover {
    background-color: var(--primary-color); 
    color: var(--main-nav-link);
}

/* --- (NUOVO) Effetto hover: cambio colore icona navbar --- */

/* Per i normali link .nav-item (es. Home, Storico).
   Seleziona l'icona 'i' quando si passa sopra al genitore '.nav-item'.
*/
.main-nav .nav-item:hover i {
    color: #ffda2e; /* Giallo acceso (o il colore che preferisci) */
    transition: color 0.3s ease;
}

/* Per il link 'Impostazioni' dentro il suo contenitore speciale.
   Seleziona l'icona 'i' quando si passa sopra al genitore '.nav-item-container'.
*/
.nav-item-container:hover .nav-item i {
    color: #ffda2e; /* Stesso colore */
    transition: color 0.3s ease;
}

/* --- (NUOVO) Stili per le icone nel sottomenu dropdown --- */

/* 1. Aggiunge spazio tra l'icona e il testo */
.dropdown-content a i {
    margin-right: 12px;
    width: 20px; /* Dà una larghezza fissa per allineare bene il testo */
    text-align: center; /* Centra l'icona nel suo spazio */
    transition: color 0.3s ease; /* Transizione morbida anche qui */
}

/* 2. Illumina l'icona all'hover */
.dropdown-content a:hover i {
    color: #ffda2e; /* Stesso colore giallo della navbar */
}

/* --- INIZIO MODIFICA: Rendi footer "stretto" (sottile) --- */
/* Rimuove il margine verticale del .container 
   quando si trova DENTRO il footer, 
   per ridurre l'altezza totale del blocco. */
footer > .container {
    margin-top: 0;
    margin-bottom: 0;
}
/* --- FINE MODIFICA --- */