/* Box sizing globale per evitare problemi di larghezza con padding e bordi */
* {
    box-sizing: border-box;
}

/* Impostazioni generali per centrare la card nella pagina */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center; /* Torna a centrare verticalmente per Login e Home */
    min-height: 100vh;
    padding: 20px; 
    margin: 0;
}

/* Classe specifica per pagine con Navbar e contenuti lunghi (es. Elaborazione) */
body.page-with-navbar {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 100px; /* Spazio sufficiente per la Navbar fissa */
}

/* Contenitore principale (Card) utilizzato sia per il Login che per la Home */

.login-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px; 
    text-align: center;
}

/* Card più larga per la pagina di elaborazione */
.wide-card {
    max-width: 800px;
    text-align: center;
}

/* Stile dell'immagine del logo quadrata */
.login-card img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 8px; /* Mantiene la forma quadrata con angoli leggermente smussati */
    margin-bottom: 20px;
}

/* Stile dei titoli (es: "Accedi" o "Home Page") */
.login-card h2 {
    margin: 0 0 24px;
    color: #333;
    font-weight: 600;
}

.login-card h3 {
    margin: 0 0 24px;
    color: #333;
    font-weight: 510;
    font-size: 0.8em;
}

/* Contenitore per i campi di input nel form di login */
.form-group-login, .form-row {
    margin-bottom: 15px;
    text-align: left;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* Stile dei campi di input (Username e Password) */
.form-group-login input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Stile per le label e i campi affiancati */
.form-row label {
    flex: 0 0 180px;
    font-weight: 600;
    color: #555;
}

.dettagli-risultati {
    font-weight: 600;
    color: #555;
}

.form-row input, .form-row textarea, .form-row select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
}

/* Navbar */
.navbar {
    width: 100%;
    background-color: #800020;
    padding: 20px 30px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.navbar a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.2s;
}

.navbar a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.logout-button{
    position: absolute;
    right: 20px;
    top: 20px
}

/* Stile dei pulsanti e delle ancore formattate come pulsanti */
.login-card button, .login-card .btn {
    width: 100%;
    padding: 12px;
    background-color: #800020; 
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}

/* Effetto al passaggio del mouse */
.login-card button:hover, .login-card .btn:hover {
    background-color: #600018; 
}

/* Stile specifico per i bottoni più grandi nella home page */
.login-card .btn.btn-home-large {
    padding: 18px 25px; /* Aumenta il padding per renderli più grandi (verticale 18px, orizzontale 25px) */
    font-size: 18px;    /* Aumenta la dimensione del testo */
    margin-bottom: 15px; /* Aggiunge spazio sotto ogni bottone per separarli meglio */
}

/* Stile per le schede (Tabs) */
.tabs-container {
    display: flex;
    margin-top: 30px;
    margin-bottom: -1px;
}
.tab {
    padding: 10px 25px;
    background: #e0e0e0;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: bold;
    color: #666;
    transition: all 0.2s ease;
    font-size: 13px;
}
.tab.active {
    background: #fff;
    color: #800020;
    border-bottom: 2px solid #fff;
    border-top: 3px solid #800020; /* Bordo superiore distintivo */
    padding-top: 15px; /* La rende leggermente più alta */
    margin-top: -5px;  /* La sposta verso l'alto */
    z-index: 2;
}

/* Contenitore per i criteri di valutazione che si aggancia alle schede */
.criteri-container {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 12px 12px 12px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Contenitore principale (Card) utilizzato per admin/utenti */

.utenti-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px; 
    text-align: center;
}
/* Contenitore della barra di ricerca */
.search-container {
    margin-bottom: 25px;
}

.search-container input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-container input:focus {
    outline: none;
    border-color: #800020;
    box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.utente-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.utente-item:hover {
    background-color: #f8f9fa;
}

.info {
    flex-grow: 1;
    text-align: left;
}

.user-name {
    font-size: 1.05rem;
    color: #333;
}

.user-email {
    color: #666;
    font-size: 0.9rem;
}

.password-label {
    color: #999;
    font-size: 0.85rem;
    margin-left: 10px;
}

.azioni button {
    background-color: #800020;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.2s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.azioni button img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.azioni button:hover {
    background-color: #600018;
    transform: scale(1.1);
}

code {
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    color: #d63384;
    font-size: 0.9em;
}

#gestioneUtenti{
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    color: #333;
}

#container-inserimento-utenti{
    margin-bottom: 20px;
}

#container-gestione-utenti{
    margin-top: 0;
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 0;
}

#button-inserisci-utente {
    width: 100%;
    padding: 12px;
    background-color: #800020; 
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}

/* Effetto al passaggio del mouse */
#button-inserisci-utente:hover {
    background-color: #600018; 
}

/*Modal modifica utente*/
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.5); 
}

/* La scheda bianca */
.modal-content {
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* La X in alto a destra */
.close-button {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
.btn-save { width: 100%; padding: 10px; background-color: #600018; color: white; border: none; cursor: pointer; border-radius: 5px; }

#card-aggiungi-dimensione{
    margin-bottom: 2em;
}

.form-group textarea{
    width: 100%;
    height: 10em;
}

#card-lista-dimensione{
    margin-bottom: 2em;
}

#prompt-semplice{
    width: 100%;
    height: 10em;
}

#system-prompt{
    width: 100%;
    height: 10em;
}

.label-prompt-semplice{
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

#card-schema-prompt-semplice{
    margin-bottom: 2em;
}

/*STILE LOGS* ----------*/

/* Sovrascrive il comportamento del body solo per gestire il layout a schermo intero */
body.page-with-navbar #container_logs {
    display: flex;
    width: 100%;
    max-width: 1400px; /* Evita che su schermi ultrawide diventi troppo dispersivo */
    margin: 0 auto;    /* Centra l'intero blocco nella pagina */
    gap: 30px;         /* Spazio tra la sidebar e il contenuto */
    padding: 0 20px;   /* Margine interno ai lati */
    align-items: flex-start; /* Allinea gli elementi in alto */
}

/* Colonna sinistra: occupa esattamente 1/4 (25%) dello spazio */
.sidebar-logs {
    flex: 0 0 25%;    /* Non si stringe, non si allarga, resta fissa al 25% */
    display: flex;
    flex-direction: column;
    gap: 12px;        /* Spazio tra i bottoni */
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #ddd;
}

/* Colonna destra: occupa esattamente 3/4 (75%) dello spazio */
.main-content-logs {
    flex: 0 0 75%;    
    max-width: calc(75% - 30px); 
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px #ccc; 
    height: 60vh;         
    overflow-y: auto;      /* Attiva la barra di scorrimento verticale solo se i log superano l'altezza */
}

.main-content-logs::-webkit-scrollbar {
    width: 8px; /* Larghezza della barra */
}

.main-content-logs::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Colore della barra scorrevole */
    border-radius: 4px;     /* Bordi arrotondati */
}

.main-content-logs::-webkit-scrollbar-thumb:hover {
    background-color: #aaa; /* Colore quando ci passi sopra con il mouse */
}

/* Stile per i bottoni/schede dentro la sidebar (Coerente con i tuoi colori #800020) */
.sidebar-logs .tab-button {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    background-color: #f8f9fa;
    color: #555;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Effetto Hover per le schede */
.sidebar-logs .tab-button:hover {
    background-color: #f0f2f5;
    color: #333;
}

/* Stato Attivo (Stile coerente con il tuo colore Bordeaux principale) */
.sidebar-logs .tab-button.active {
    background-color: #800020;
    color: white;
    border-color: #800020;
    box-shadow: 0 4px 10px rgba(128, 0, 32, 0.2);
}

.log_mess{
    padding-bottom: 1em;
    padding-top: 1em;
    white-space: pre-wrap; /*Per far funzionare i \n*/
}


#punteggioTotale{
    margin-top: 30px;
}

.punteggio-evidenziato {
    color: #800020;
    font-weight: bold;
}

/* Nascondiamo il modal del caricamento dell'elaborazione semplice di default */
.modal-caricamento {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 9999; 
}
/* Classe di controllo per mostrare il modal */
.modal-caricamento.attivo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-caricamento .modal-content {
    background: #ffffff;         
    padding: 100px 40px;          
    border-radius: 12px;         
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
    text-align: center;         
    min-width: 280px;           
}

/* La rotella di caricamento */
.spinner {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;       
    border-top: 4px solid #800020;   
    border-radius: 50%;              
    animation: gira 1s linear infinite; 
}

.progress-container{
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 8px;
    margin: 40px 0;
    overflow: hidden;
}

#barra-progresso{
    width: 0%;
    height: 25px;
    background-color: #800020;
    transition: width 0.4s ease;
    text-align: center;
    line-height: 25px;
    color: white;
    font-weight: bold;
}

/* L'animazione che fa ruotare lo spinner */
@keyframes gira {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#hyperparameter_settings {
    width: 100%;       
    min-height: 200px;
    resize: vertical;  
    box-sizing: border-box; 
}

/* Bottone piccolo, rosso (#800020), quadrato e leggermente stondato */
.azioni button.btn-piccolo-rosso {
    background-color: #800020;
    width: 34px;               
    height: 34px;              
    padding: 0;                
    border-radius: 6px;        
    border: none;
    cursor: pointer;
    
    /* Flexbox attivato e centrato in entrambe le direzioni */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background-color 0.3s, transform 0.2s;
}

/* Effetto hover sul bottone bordeaux che diventa più scuro */
.azioni button.btn-piccolo-rosso:hover {
    background-color: #600018;
    transform: scale(1.05);  
}

/* Dimensione ottimale dell'icona dentro il bottone piccolo */
.azioni button.btn-piccolo-rosso img {
    width: 16px;
    height: 16px;
    display: block;    /* Rimuove lo spazio vuoto protettivo sotto le immagini */
    margin: 0;         /* Azzera eventuali margini ereditati */
}

#data_valutazione_elab_massiva{
    margin-bottom: 2em;
}

#data_valutazione_elab_massiva strong{
    color: #333;
}

#valutazioni-passate{
    margin-top: 2em;
}

.valutazione-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.valutazione-item:hover {
    background-color: #f8f9fa;
}

.valutazione-data {
    font-size: 1.05rem;
    color: #333;
}

/*FOOTER*/
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    z-index: 1000;
}