@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap');

/* --- IMPOSTAZIONI GLOBALI --- */
:root {
    --brand-color: #407bff;
    --text-color: #212529;
    --border-color: #dee2e6;
    --error-color: #d93025;  /* NUOVO: Colore per gli errori */
    --background-color: #f4f5fa;
    --card-background: #ffffff;

    /* MODIFICATO: Valori di base ridotti per un look più compatto */
    --base-font-size: 16px;
    --base-padding: 1.25rem; /* 20px */
    --base-radius: 12px;
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

.login-pf body,
.login-pf {
    background-image: none;
    background-color: var(--background-color);
    font-size: var(--base-font-size);
    font-family: 'Poppins', arial, sans-serif;
    color: var(--text-color);
}

/* --- LAYOUT PRINCIPALE --- */
.login-pf-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem; /* Ridotto per schermi piccoli */
}

.login-pf-page .card-pf {
    width: 100%;
    max-width: 400px; /* Ridotta per un aspetto più snello */
    background-color: var(--card-background);
    border-radius: var(--base-radius);
    padding: 2.5rem; /* Padding interno consistente */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
}

/* --- ELEMENTI DEL FORM --- */
#kc-header-wrapper {
    margin-bottom: 2rem; /* Aumentato per più spazio sotto il titolo */
}

#kc-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
}

#kc-form-login {
    display: flex;
    flex-direction: column;
    /* MODIFICATO: Gap ridotto per compattare i campi */
    gap: var(--base-padding); 
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
}

.login-pf-page label {
    font-weight: 600;
    font-size: 0.875rem; /* 14px */
}

.pf-c-form-control {
    border: 1px solid var(--border-color);
    border-radius: var(--base-radius);
    font-size: 0.95rem; /* Leggermente più grande */
    font-weight: 500;
    color: var(--text-color);
    background-color: #fff;
    height:48px!important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pf-c-form-control#password {
    border-radius: var(--base-radius) 0 0 var(--base-radius);
}

.pf-c-form-control:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 20%, transparent);
}

/* --- STILE PER STATI DI ERRORE (MOLTO IMPORTANTE) --- */

/* Bordo rosso per l'input non valido */
.login-pf-page input[aria-invalid="true"] {
    border-color: var(--error-color);
}
.login-pf-page input[aria-invalid="true"]:focus {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);
}

/* Stile per il testo di errore (es. "Invalid username or password") */
#kc-feedback-wrapper {
    margin-top: 0.5rem; /* Spazio sopra il messaggio di errore generale */
}
span.kc-feedback-text {
    display: block; /* Per occupare una riga intera */
    color: var(--error-color);
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    margin-top: 0.5rem; /* Spazio tra l'input e il suo messaggio di errore */
}


/* --- BOTTONE --- */
.pf-c-button.pf-m-primary {
    background-color: var(--brand-color);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    border-radius: var(--base-radius);
    padding: 0.9rem 1rem;
    cursor: pointer;
    border: none;
    width: 100%;
    margin-top: 0.75rem; /* Aggiunto spazio sopra il bottone */
    transition: background-color 0.2s ease;
}
.pf-c-button.pf-m-primary:hover {
    background-color: color-mix(in srgb, var(--brand-color) 85%, black);
}
.pf-c-button:disabled {
    opacity: .3;
}

/* Tasto mostra password */
.pf-c-input-group input[name="password"] + .pf-c-button.pf-m-control:after {
    border: 1px solid var(--border-color);
    border-radius: 0 var(--base-radius) var(--base-radius) 0;

}

/* Dropdown Lingua */
/* 1. Nascondi la lista del dropdown per impostazione predefinita */
#language-switch1 {
  display: none;
  right: 50%;
  transform: translateX(50%);
  top: auto;
  bottom: 56px;
  min-width: 150px;
  border-radius: .5em;
}

/* 2. Mostra la lista solo quando il pulsante ha l'attributo aria-expanded="true" 
   (che viene impostato dal JavaScript di Keycloak al click) */
#kc-current-locale-link[aria-expanded="true"] + #language-switch1 {
  display: block;
}

/* --- Stile Pulsante Lingua --- */

#kc-current-locale-link {
  /* Resetta l'aspetto di default del browser */
  background: none;
  border: none;
  font: inherit;
  color: #6a6e73; /* Un grigio scuro leggibile */
  cursor: pointer;
  margin-bottom: 1em;
  
  /* Usa Flexbox per allineare testo e freccia */
  display: flex;
  align-items: center;
  
  padding: 8px; /* Aumenta l'area cliccabile */
  border-radius: 4px; /* Angoli leggermente arrotondati */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Aggiunge la freccia (chevron) dopo il testo */
#kc-current-locale-link::after {
  content: '▼';
  font-size: 0.7em; /* Rende la freccia più piccola del testo */
  margin-left: 8px; /* Spazio tra testo e freccia */
}

/* Reazione al passaggio del mouse e al focus */
#kc-current-locale-link:hover,
#kc-current-locale-link:focus {
  color: #000; /* Testo più scuro */
  background-color: #f0f0f0; /* Sfondo leggero */
  outline: none; /* Rimuove l'anello di focus di default */
}