/* style.css */

/* --- */
/* Base Styles & Typography */
html {
    /* Imposta la dimensione base del font per lo scaling globale (90% di 16px) */
    font-size: 14.4px; /* Scalatura del 90% */
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0;
    padding: 0;
    /* Spazio per l'header fisso in alto */
    padding-top: 5.55rem; /* 80px * 0.9 = 72px original padding-top: 80px; 80px / 14.4px = 5.55rem*/
    /* Altezza dell'header, quindi il padding-top deve essere basato su 80px originali */
    padding-bottom: 3.47rem; /* 50px * 0.9 = 45px original padding-bottom: 50px; 50px / 14.4px = 3.47rem */
    /* Spazio per il footer fisso in basso (altezza footer + un po' di margine) */
    min-height: 100vh; /* Assicura che il body sia almeno alto come la viewport */
    box-sizing: border-box; /* Include padding nel calcolo dell'altezza */
}

/* Stile per la prima lettera dei paragrafi (disabilitato se interferisce col menu) */
p::first-letter {
    color: #DF121D;
    /* font-size: x-large; - Non ho modificato questa, potresti volerla in rem */
}

/* --- */
/* Header Banner */
.header {
    background-color: #DF121D;
    background-repeat: no-repeat;
    background-size: cover; /* O 'contain' a seconda delle tue esigenze per le immagini */
    color: white;
    display: flex;
    justify-content: space-between; /* Sposta h1 a destra se c'è un logo a sinistra */
    align-items: center;
    padding: 0.69rem 1.38rem; /* 10px 20px -> 9px 18px -> ~0.69rem ~1.38rem */
    font-family: Arial, Helvetica, sans-serif;
    position: fixed; /* Rende l'header fisso */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Assicura che sia sopra altri elementi */
    height: 5.55rem; /* 80px -> ~5.55rem */
    box-sizing: border-box;
}

.header h1 {
    margin-left: auto; /* Sposta il titolo a destra se c'è spazio */
    text-align: right;
    padding-right: 6.94rem; /* 100px -> ~6.94rem */
    margin: 0; /* Rimuovi margini predefiniti */
    font-size: 1.5rem; /* Assicurati che il titolo si scali con il font-size base */
}

.header img {
    height: 4.16rem; /* 60px -> ~4.16rem */
    margin-right: 1.38rem; /* 20px -> ~1.38rem */
}

/* --- */
/* Sidebar Navigation (Menu on the left) */
ul { /* Questo selettore si riferisce al tuo menu di navigazione principale */
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 17.36rem; /* 250px -> ~17.36rem */
    background-color: #f1f1f1;
    position: fixed; /* Rende il menù fisso */
    top: 5.55rem; /* Inizia sotto l'header (80px -> ~5.55rem) */
    left: 0;
    /* Altezza = 100% - altezza header - altezza footer (scalata) */
    height: calc(100% - 5.55rem - 3.47rem); /* 80px + 50px -> 130px -> ~9.02rem */
    overflow-y: auto; /* Scorrimento verticale se il contenuto del menù è troppo lungo */
    z-index: 900; /* Sotto l'header, sopra il contenuto */
    box-sizing: border-box;
}

li a {
    display: block;
    color: #000;
    padding: 0.55rem 1.11rem; /* 8px 16px -> ~0.55rem ~1.11rem */
    text-decoration: none;
    border-bottom: 0.069rem solid #ddd; /* 1px -> ~0.069rem */
    font-size: 0.9rem; /* Scalato per il testo del menu */
}

li:last-child a {
    border-bottom: none; /* Rimuove il bordo dall'ultima voce */
}

li a.active {
    background-color: #DF121D;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

/* --- */
/* Main Content Wrapper */
/* Questo div contiene tutto il contenuto della pagina che NON è header, footer o menu */
.main-content-wrapper {
    margin-left: 17.36rem; /* Sposta il contenuto a destra del menù (uguale alla larghezza del menù 250px -> ~17.36rem) */
    padding: 1.38rem; /* 20px -> ~1.38rem */
    /* Assicura altezza minima per spingere il footer, usando valori scalati */
    min-height: calc(100vh - 5.55rem - 3.47rem);
    box-sizing: border-box;
}

/* --- */
/* Footer */
.footer {
    background-color: #f1f1f1;
    color: black;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 0.76rem; /* Scalato da small (tipicamente 13px) -> ~0.76rem (11.7px) */
    padding: 0.69rem; /* 10px -> ~0.69rem */
    position: fixed; /* Rende il footer fisso */
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000; /* Assicura che sia sopra altri elementi */
    box-sizing: border-box;
    height: 3.47rem; /* 50px -> ~3.47rem */
    display: flex; /* Centra verticalmente il testo */
    align-items: center;
    justify-content: center;
}


/* --- */
/* Form and Button Styles (from your previous CSS) */

.vaia {
    background-color: #DF121D;
    color: white;
    padding: 0.48rem 0.83rem; /* 7px 12px -> ~0.48rem ~0.83rem */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: none; /* Rimuove il bordo predefinito */
    cursor: pointer; /* Indica che è cliccabile */
    font-size: 0.9rem; /* Scalato per il testo del bottone */
}
.vaia:hover {
    opacity: 0.9; /* Effetto hover */
}

input[type=email],
input[type=password],
input[type=text], /* Aggiunto type=text per username e altri campi */
input[type=number], /* Aggiunto type=number per i crediti */
textarea {
    width: 100%; /* Larghezza del 100% rispetto al suo contenitore */
    padding: 0.83rem 1.38rem; /* 12px 20px -> ~0.83rem ~1.38rem */
    margin: 0.55rem 0; /* 8px 0 -> ~0.55rem 0 */
    box-sizing: border-box;
    border: 0.069rem solid #ccc; /* 1px -> ~0.069rem */
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    font-size: 0.9rem; /* Scalato per il testo degli input */
}

input[type=email]:focus,
input[type=password]:focus,
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
    border: 0.069rem solid #DF121D; /* 1px -> ~0.069rem */
}

input[type=submit] {
    background-color: #DF121D;
    color: white;
    padding: 0.83rem 1.38rem; /* 12px 20px -> ~0.83rem ~1.38rem */
    margin: 0.55rem 0; /* 8px 0 -> ~0.55rem 0 */
    border: none;
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    cursor: pointer;
    box-sizing: border-box;
    width: auto; /* Larghezza automatica per i submit */
    font-size: 0.9rem; /* Scalato per il testo del submit */
}
input[type=submit]:hover {
    opacity: 0.9;
}


/* General Centering */
.center {
    text-align: center;
    color: red; /* Originale, potresti volerlo più generico */
}


/* --- */
/* Table Styles (for users, services, logs) */
#users { /* Utilizzo un ID, ma una classe generica .data-table sarebbe più riutilizzabile */
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-top: 1.38rem; /* 20px -> ~1.38rem */
}

#users td,
#users th {
    border: 0.069rem solid #ddd; /* 1px -> ~0.069rem */
    padding: 0.55rem; /* 8px -> ~0.55rem */
    text-align: left; /* Allinea a sinistra il testo delle celle */
    font-size: 0.8rem; /* Scalato per il testo della tabella */
}

#users tr:nth-child(even) {
    background-color: #f2f2f2;
}

#users tr:hover {
    background-color: #ddd;
}

#users th {
    padding-top: 0.83rem; /* 12px -> ~0.83rem */
    padding-bottom: 0.83rem; /* 12px -> ~0.83rem */
    text-align: left;
    background-color: #DF121D;
    color: white;
    font-size: 0.9rem; /* Scalato per le intestazioni della tabella */
}

/* --- */
/* Page Specific Containers & Forms */
.container { /* Contenitore generico per la maggior parte delle pagine nel main-content-wrapper */
    max-width: 66.66rem; /* 960px -> ~66.66rem */
    margin: 1.38rem auto; /* 20px -> ~1.38rem */
    background-color: #fff;
    padding: 2.08rem; /* 30px -> ~2.08rem */
    border-radius: 0.55rem; /* 8px -> ~0.55rem */
    box-shadow: 0 0 0.69rem rgba(0, 0, 0, 0.1); /* 10px -> ~0.69rem */
}
.wrapper { /* Usato specificamente per login e cambio password, che non hanno il menu laterale */
    background-color: #fff;
    padding: 2.08rem; /* 30px -> ~2.08rem */
    border-radius: 0.55rem; /* 8px -> ~0.55rem */
    box-shadow: 0 0 0.69rem rgba(0, 0, 0, 0.1); /* 10px -> ~0.69rem */
    width: 27.77rem; /* 400px -> ~27.77rem */
    margin: 3.47rem auto; /* 50px -> ~3.47rem */
}
/* Regola per i wrapper quando non c'è il menu, per non avere il margine sinistro */
body > .wrapper { /* Se il wrapper è un figlio diretto del body (e quindi non ha il menu) */
    margin-left: auto; /* Rimuove il margin-left del main-content-wrapper */
}


.form-group { margin-bottom: 1.04rem; } /* 15px -> ~1.04rem */
label { display: block; margin-bottom: 0.34rem; color: #555; } /* 5px -> ~0.34rem */
.help-block { color: red; font-size: 0.8rem; margin-top: 0.34rem; display: block; } /* 5px -> ~0.34rem */
.success-message { color: green; text-align: center; margin-bottom: 1.04rem; } /* 15px -> ~1.04rem */
.error-message { color: red; text-align: center; margin-bottom: 1.04rem; } /* 15px -> ~1.04rem */
.btn-group { margin-top: 1.38rem; display: flex; gap: 0.69rem; flex-wrap: wrap;} /* 20px -> ~1.38rem; 10px -> ~0.69rem */
.btn-group a.vaia { margin-right: 0; } /* Reset del margine per flexbox */
.logout { background-color: #dc3545; }
.logout:hover { background-color: #c82333; }
.action-links a { margin-right: 0.69rem; color: #007bff; text-decoration: none; } /* 10px -> ~0.69rem */
.action-links a:hover { text-decoration: underline; }
.delete-link { color: #dc3545; }
.delete-link:hover { text-decoration: underline; }
.add-btn { background-color: #28a745; margin-bottom: 1.04rem; } /* 15px -> ~1.04rem */
.add-btn:hover { background-color: #218838; }
.btn-cancel { background-color: #6c757d; } /* Modificato per flexbox, non più margin-left */
.btn-cancel:hover { background-color: #5a6268; }

/* Styles for service list in user_dashboard */
.service-list {
    list-style: none;
    padding: 0;
    margin-top: 1.38rem; /* 20px -> ~1.38rem */
}
.service-list li {
    background-color: #f9f9f9;
    border: 0.069rem solid #eee; /* 1px -> ~0.069rem */
    padding: 1.04rem; /* 15px -> ~1.04rem */
    margin-bottom: 0.69rem; /* 10px -> ~0.69rem */
    border-radius: 0.34rem; /* 5px -> ~0.34rem */
}
.service-list li strong {
    color: #DF121D;
    font-size: 1rem; /* 1.1em originale (110%) della base */
    display: block;
    margin-bottom: 0.34rem; /* 5px -> ~0.34rem */
}

/* Stile per i crediti nelle associazioni utente-servizio */
.service-credits-inputs {
    margin-top: 1.04rem; /* 15px -> ~1.04rem */
    border: 0.069rem solid #eee; /* 1px -> ~0.069rem */
    padding: 1.04rem; /* 15px -> ~1.04rem */
    border-radius: 0.34rem; /* 5px -> ~0.34rem */
    background-color: #fdfdfd;
}
.service-credits-inputs label {
    display: inline-block; /* Per allineare checkbox e testo */
    margin-bottom: 0;
    cursor: pointer;
}
.service-credits-inputs input[type="checkbox"] {
    margin-right: 0.34rem; /* 5px -> ~0.34rem */
    vertical-align: middle; /* Allinea il checkbox con il testo */
}
.service-credits-inputs input[type="number"] {
    width: 5.55rem; /* 80px -> ~5.55rem */
    display: inline-block; /* Li mantiene sulla stessa riga */
    vertical-align: middle;
    margin-left: 0.69rem; /* 10px -> ~0.69rem */
    padding: 0.34rem 0.69rem; /* 5px 10px -> ~0.34rem ~0.69rem */
    font-size: 0.9rem; /* Scalato per il testo degli input numerici */
}

/* Stili per i log di accesso */
.status-success { color: green; font-weight: bold; }
.status-failed_password, .status-failed_username { color: red; font-weight: bold; }

/* Responsive Adjustments */
@media (max-width: 992px) {
    /* Il padding-top del body deve adattarsi alla nuova altezza dell'header in mobile se cambia */
    body {
        padding-top: 5.55rem; /* Mantieni questo se l'header è ancora 80px di altezza mobile */
    }
    .header {
        flex-direction: column;
        align-items: center;
        height: auto; /* L'altezza dell'header può variare su mobile */
        padding: 0.69rem;
    }
    .header h1 {
        padding-right: 0;
        margin-top: 0.69rem;
        text-align: center;
    }
    .header img {
        margin-right: 0;
    }
    ul {
        position: static; /* Il menu diventa scorrevole e non fisso su mobile */
        width: 100%;
        height: auto;
        border-bottom: 0.069rem solid #ddd;
    }
    .main-content-wrapper {
        margin-left: 0; /* Rimuovi il margine sinistro su mobile */
        padding-top: 0.69rem; /* Aggiungi un po' di padding in alto */
    }
    .footer {
        position: static; /* Il footer non è più fisso su mobile */
        margin-top: 1.38rem;
    }

    /* Regola per i wrapper quando non c'è il menu in generale */
    .wrapper {
        width: 90%; /* Larghezza adattabile per i moduli di login/password */
        margin: 1.38rem auto; /* Meno margine sopra e sotto */
    }
    body > .wrapper {
        margin-left: auto;
    }
}

@media (max-width: 576px) {
    .header h1 {
        font-size: 1.3rem;
    }
    .header img {
        height: 3.47rem; /* 50px */
    }
    .vaia {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    input[type=email], input[type=password], input[type=text], input[type=number], textarea {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
    input[type=submit] {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
    #users th, #users td {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    .container {
        padding: 1.38rem;
    }
    .help-block {
        font-size: 0.75rem;
    }
    .action-links a {
        font-size: 0.8rem;
        margin-right: 0.4rem;
    }
    .service-list li {
        padding: 0.8rem;
    }
    .service-credits-inputs input[type="number"] {
        width: 4.5rem; /* Ulteriore riduzione per campi numerici */
        padding: 0.2rem 0.4rem;
    }
}