/********************************
     * BASE & GLOBAL STYLES
     ********************************/

    /* Impostazioni generali */
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, sans-serif;
        overflow-x: hidden; /* Impedisce lo scorrimento orizzontale */
        color: #333; /* Colore del testo standard */
    }

    /* Layout principale */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: #fafafa;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }

    .main-content {
        text-align: left; /* Aligns text to the left for the specific section */
    }

    /* Stile dei titoli */
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-weight: bold;
        color: #222; /* Colore leggermente più scuro per i titoli */
    }

    p {
        margin: 0 0 1em;
        line-height: 1.6;
    }

    /********************************
     * HEADER
     ********************************/

    header {
        background-color: #b1e160; /* Colore verde accessibile */
        padding: 15px 20px;
        width: 100%; /* Larghezza piena */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Aggiunge separazione visiva */
        box-sizing: border-box; /* Assicurati che il padding sia conteggiato correttamente */
    }

    .header-container {
        display: flex;
        justify-content: space-between; /* Distanzia il contenuto */
        align-items: center; /* Allinea al centro verticalmente */
        min-height: 50px; /* Garantisce altezza sufficiente all'header */
    }

    .logo-container {
        flex-grow: 1; /* Permette al logo di adattarsi */
        display: flex;
        justify-content: center; /* Centra il logo */
    }

    .header-logo {
        max-width: 60px; /* Dimensioni ottimali per il logo */
        height: auto;
    }

    /* Pulsanti */

    .back-button-container {
        display: flex;
        justify-content: flex-start; /* Posiziona il pulsante a sinistra */
    }

    /* Stile per il pulsante "Indietro" con immagine */
    .back-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px; /* Dimensione del pulsante */
        height: 30px;
        border: none;
        background: none; /* Rimuove sfondo */
        cursor: pointer;
        transition: transform 0.2s ease; /* Animazione al passaggio del mouse */
    }

    .back-button:hover {
        transform: scale(1.1); /* Effetto zoom al passaggio del mouse */
    }

    .back-icon {
        width: 100%; /* L'immagine riempie il contenitore */
        height: auto; /* Mantiene il rapporto d'aspetto */
        object-fit: contain; /* Adatta l'immagine senza distorcerla */
        max-width: 25px; /* Riduce la dimensione massima dell'icona */
    }

    /* Pulsante Logout con icona e testo */
    .logout-button-with-text {
        display: flex;
        flex-direction: column; /* Testo sotto l'icona */
        justify-content: center;
        align-items: center;
        text-decoration: none;
        width: 20px; /* Dimensione totale del pulsante */
        cursor: pointer;
        transition: transform 0.2s ease; /* Effetto hover */
    }

    .logout-button-with-text:hover {
        transform: scale(1.1); /* Effetto zoom */
    }

    .logout-icon {
        width: 20px; /* Dimensione dell'icona */
        height: auto;
        object-fit: contain;
    }

    .logout-text {
        font-size: 0.75rem; /* Dimensione del testo più piccola */
        color: black;
        margin-top: 5px; /* Spazio tra icona e testo */
    }

    /* Pulsante Profilo */
    .user-nav a.profilo {
        padding: 10px 20px;
        background-color: #1e14a3;
        border-radius: 5px;
        color: white;
        text-decoration: none;
        font-size: 1rem;
        margin-left: 10px;
    }

    .no-logo-link .header-logo-link {
        pointer-events: none; /* Disabilita il clic */
        cursor: default; /* Cambia il cursore */
    }

    .user-nav a.logout:hover {
        background-color: darkred;
    }

    /********************************
     * MAIN CONTENT
     ********************************/

    main {
        flex: 1; /* Contenuto principale si espande */
        padding: 20px;
        box-sizing: border-box;
        max-width: 1200px; /* Mantiene il contenuto leggibile su schermi larghi */
        margin: 0 auto; /* Centra il contenuto */
    }

    .main-content {
        padding: 20px;
        text-align: center;
    }

    /********************************
     * BUTTON STYLES
     ********************************/

    /* Stile comune per tutti i pulsanti */
    .btn {
        display: inline-block;
        font-size: 1rem;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease, transform 0.2s ease;
        width: auto;
        color: white;
    }

    .center-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        text-align: center;
    }

    .stack-buttons {
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 10px;
    }

    .align-left {
        text-align: left;
        margin-left: 0;
    }

    /* Variante verde */
    .btn-green {
        background-color: #89cb89;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease;
    }
    .btn-green:hover {
        background-color: #6aa46b;
    }

    /* Variante arancione */
    .btn-orange {
        background-color: #968d63;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease;
    }
    .btn-orange:hover {
        background-color: #46422f1;
    }

    /* Variante gray */
    .btn-gray {
        background-color: #808080;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease;
    }
    .btn-gray:hover {
        background-color: #A9A9A9;
    }

    /* Variante red */
    .btn-red {
        background-color:  #c4483b;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease;
    }
    .btn-red:hover {
        background-color: #c0392b;
    }

    /* Variante blue */
    .btn-blue {
        background-color: #5d9b9b;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s ease;
    }
    .btn-blue:hover {
        background-color: #2b2b9c;
    }

    .btn-small {
        padding: 4px 9px;
        font-size: 0.8rem;
        border-radius: 4px;
    }

    /* Pulsante Registrati */
    .btn-register {
        background-color: #7f8c8d;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        font-size: 1rem;
    }
    .btn-register:hover {
        background-color: #95a5a6;
        transform: scale(1.05);
    }

    .login-register-box {
        background-color: #f2f2f2;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    /* Link nei pulsanti */
    .btn a,
    .btn-green a,
    .btn-orange a,
    .btn-gray a,
    .btn-red a,
    .btn-blue a {
        color: inherit;
        text-decoration: none;
    }
    .btn a:visited,
    .btn-green a:visited,
    .btn-orange a:visited,
    .btn-gray a:visited,
    .btn-red a:visited,
    .btn-blue a:visited {
        color: inherit;
        text-decoration: none;
    }
    .btn a:active,
    .btn-green a:active,
    .btn-orange a:active,
    .btn-gray a:active,
    .btn-red a:active,
    .btn-blue a:active {
        color: inherit;
        text-decoration: none;
    }
    .btn a:focus,
    .btn-green a:focus,
    .btn-orange a:focus,
    .btn-gray a:focus,
    .btn-red a:focus,
    .btn-blue a:focus {
        outline: none;
        color: inherit;
        text-decoration: none;
    }

    /********************************
     * IMMAGINI
     ********************************/

    /* Miniatura */
    .thumbnail {
        width: 150px;
        height: 150px;
        border-radius: 8px;
        object-fit: cover;
        cursor: pointer;
        display: block;
        margin: 0 auto;
    }

    /* Overlay del pop-up */
    .image-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* Immagine ingrandita nel pop-up */
    .image-overlay img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 8px;
        object-fit: contain;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    /* Pulsante di chiusura */
    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        color: white;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        z-index: 1001;
    }

    btn-info {
        position: relative;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .btn-info img {
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .btn-info img:hover {
        transform: scale(1.1);
    }


/* Pulsante galleggiante */
#chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Finestra di chat */
#chat-container {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    height: 400px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header della chat */
#chat-header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    position: relative;
}

/* Pulsante di chiusura */
#close-chat {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

/* Iframe della chat */
#chat-frame {
    width: 100%;
    height: 100%;
    border: none;
}


    /********************************
     * FOOTER
     ********************************/
    footer {
        background-color: #b1e160;
        padding: 10px 10px;
        text-align: center;
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
    .footer-logos {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    .footer-logo {
        max-width: 80px;
        height: auto;
        object-fit: contain;
    }

/* MAP CONTAINER (Always active) */
.map-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 500px; /* Imposta l'altezza desiderata */
  margin: 0 auto;
  overflow: hidden; /* Previene lo sforamento */
}

.map-container #id_geom_div_map,
.map-container #id_geom_map,
.map-container .leaflet-container,
.map-container .ol-viewport {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}




    /********************************
     * RESPONSIVE DESIGN
     ********************************/
    @media (max-width: 768px) {
        .header-logo {
            max-width: 40px;
        }
        .btn {
            width: 100%;
            margin: 5px 0;
        }
        .main-content {
            padding: 15px;
        }
        footer {
            min-height: 60px;
            height: auto;
            padding: 15px;
        }
        .footer-logo {
            max-width: 60px;
        }
    }