/*
 * Tema login Figaro Secure Gateway — sovrascrive keycloak.v2 (PatternFly v5).
 * Palette, font e raggi allineati a public/admin.css (#509 Figaro Lab Design System, scuro Terracotta).
 * Caricato dopo css/styles.css: vince sulla cascata per ordine + selettori mirati.
 *
 * Estetica sobria: fondo caldo quasi-nero con un solo alone terracotta diffuso, card con filo
 * accento. Il movimento è misurato (niente scanner/shimmer, tolti in 19485d19):
 * l'alone deriva lentissimo, la card entra una volta, e il filo accento segnala
 * lo stato — si accende col focus, scorre come progresso mentre le credenziali
 * sono in verifica. Qui solo stile; la scena «checkpoint» delle pagine d'ingresso
 * (unico override di template, vedi theme.properties) ha il suo checkpoint.css.
 */

/* Webfont self-hosted (copie di public/fonts: l'appliance è offline-strict) */
@font-face {
  font-family: 'Public Sans';
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/public-sans-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/quicksand-var-latin.woff2') format('woff2');
}

:root {
  /* Token Figaro (da public/admin.css, #509 scuro Terracotta). Scostamenti AA
     del DS voluti: bianco su --fg-accent-fill #b84a2c = 5,18:1 (il #c75434 del
     DS darebbe 4,42:1). Testo accento #dd7b5d su panel = 5,72:1. */
  --fg-bg:          #121110;
  --fg-bg-grad:     #0b0a09;
  --fg-panel:       #1e1c1a;
  --fg-panel-inner: #26231f;
  --fg-ink:         #d8d2c7;
  --fg-ink-strong:  #faf8f5;
  --fg-muted:       #b9b2a6;
  --fg-line:        rgba(250, 248, 245, 0.14);
  --fg-line-bright: rgba(250, 248, 245, 0.26);
  --fg-accent:      #dd7b5d;
  --fg-accent-hi:   #e8927a;
  --fg-accent-soft: rgba(221, 123, 93, 0.12);
  --fg-accent-fill: #b84a2c;
  --fg-accent-fill-hover: #8e3821;
  --fg-on-accent:   #ffffff;
  --fg-good:        #3dd68c;
  /* #ff6b6b invece di #ef4444: più leggibile come testo piccolo sul panel scuro (5,64:1) */
  --fg-crit:        #ff6b6b;
  /* Bordo dei controlli: pieno, non un velo — 4,22:1 su panel-inner, 4,58:1 su panel */
  --fg-control-border: #8a847a;
  --fg-focus:       #e8927a;
  --fg-warn:        #f59e0b;
  --fg-radius:      8px;
  --fg-radius-card: 14px;
  --fg-font:        'Public Sans', system-ui, -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Helvetica, Arial, sans-serif;
  --fg-font-display: 'Quicksand', var(--fg-font);

  /* Controlli nativi (checkbox, tendina del selettore lingua, scrollbar) resi in
     chiave scura: senza questo la spunta «Ricordami» è un quadrato bianco. */
  color-scheme: dark;

  /* Override dei token globali PatternFly v5 usati dai componenti del login */
  --pf-v5-global--BackgroundColor--100: var(--fg-panel);
  --pf-v5-global--BackgroundColor--200: var(--fg-panel-inner);
  --pf-v5-global--Color--100: var(--fg-ink-strong);
  --pf-v5-global--Color--200: var(--fg-muted);
  --pf-v5-global--BorderColor--100: var(--fg-line-bright);
  --pf-v5-global--BorderColor--200: var(--fg-line);
  --pf-v5-global--primary-color--100: var(--fg-accent);
  --pf-v5-global--primary-color--200: var(--fg-accent-hi);
  --pf-v5-global--link--Color: var(--fg-accent);
  --pf-v5-global--link--Color--hover: var(--fg-accent-hi);
  --pf-v5-global--danger-color--100: var(--fg-crit);
  --pf-v5-global--success-color--100: var(--fg-good);
  --pf-v5-global--warning-color--100: var(--fg-warn);
  --pf-v5-global--FontFamily--text: var(--fg-font);
  --pf-v5-global--FontFamily--heading: var(--fg-font-display);

  /* Banda accento in cima alla card (keycloak.v2 la disegna su .__main-header):
     resa trasparente: il filo accento lo disegniamo noi su .__main::before */
  --keycloak-card-top-color: transparent;
}

/* ── Sfondo pagina ─────────────────────────────────────────────────────────── */
/* Fondo tenue: un alone terracotta alto e diffuso + il fondo neutro che si scurisce
   verso il basso. Statico, fixed, nessuna animazione: dà profondità senza diventare
   decorazione. Il segno distintivo resta il filo terracotta in cima alla card. */
html,
body#keycloak-bg {
  background-color: var(--fg-bg);
  background-image:
    radial-gradient(ellipse 60% 55% at 8% 105%, rgba(221, 123, 93, 0.07), transparent 70%),
    linear-gradient(180deg, transparent 25%, var(--fg-bg-grad) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg-ink);
  font-family: var(--fg-font);
}

.pf-v5-c-login {
  min-height: 100vh;
}

/* L'alone alto vive su un livello proprio e deriva piano (40 s per ciclo): si
   muove solo il transform, quindi resta sul compositor e non ridipinge la pagina.
   `isolation` fa del body un contesto di impilamento, così lo z-index negativo
   finisce sopra il suo sfondo e sotto il contenuto. */
body#keycloak-bg {
  isolation: isolate;
}

body#keycloak-bg::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  /* stessa geometria dell'alone statico di prima, su un livello più largo del
     viewport del 20% così la deriva non ne scopre mai il bordo */
  background: radial-gradient(ellipse 92% 54% at 50% 0%, rgba(221, 123, 93, 0.16), transparent 65%);
  animation: fg-drift 40s ease-in-out infinite alternate;
}

@keyframes fg-drift {
  from { transform: translate3d(-5%, -3%, 0); opacity: 0.8; }
  to   { transform: translate3d(5%, 2%, 0); opacity: 1; }
}

/* Entrata: header e card salgono di pochi pixel una volta sola, sfalsati */
#kc-header,
.pf-v5-c-login__main {
  animation: fg-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pf-v5-c-login__main {
  animation-delay: 0.08s;
}

@keyframes fg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Header / logo ─────────────────────────────────────────────────────────── */
#kc-header {
  margin-bottom: 1rem;
}

/* Sostituisce il displayName testuale con il logo wordmark Figaro */
#kc-header-wrapper {
  display: block;
  height: 56px;
  font-size: 0;            /* nasconde il testo del realm */
  color: transparent;
  background-image: url('../img/figaro-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
}

/* Riga sotto il logo: dice dove sei, non cosa vendiamo. Sopra il testo, tre fili
   tricolore (~1 cm l'uno) disegnati come sfondo dello stesso ::after: il ::before
   cadrebbe sopra il logo, non fra logo e riga. */
#kc-header::after {
  content: "Secure AI Gateway";
  display: block;
  margin-top: 1rem;
  padding-top: 1.4rem;
  background:
    linear-gradient(#009246, #009246) calc(50% - 50px) 0 / 38px 3px no-repeat,
    linear-gradient(#f4f5f0, #f4f5f0) 50% 0 / 38px 3px no-repeat,
    linear-gradient(#ce2b37, #ce2b37) calc(50% + 50px) 0 / 38px 3px no-repeat;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-indent: 0;
}

/* Icona Figaro a chiusura della pagina, centrata sotto la card: il template non
   ha un footer, quindi è un ::after del contenitore (header + main), che ne
   diventa l'ultimo elemento della griglia. */
.pf-v5-c-login__container::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  justify-self: center;
  inline-size: 40px;
  block-size: 48px;
  margin-block: 2rem 1rem;
  background: url('../img/figaro-icon.png') no-repeat center / contain;
  opacity: 0.9;
  animation: fg-pulse 3.2s ease-in-out infinite;
}

/* L'icona «respira» come un LED di stato acceso: luminosità, un filo di scala e
   un alone che si allarga e rientra. Il PNG è già bianco, niente filtri colore. */
@keyframes fg-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(232, 146, 122, 0));
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(232, 146, 122, 0.7)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
  }
}

/* ── Card login ────────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
  position: relative;
  background: var(--fg-panel);
  border: 1px solid var(--fg-line-bright);
  border-radius: var(--fg-radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.35);
  color: var(--fg-ink);
  overflow: hidden;
  inline-size: 100%;
  max-inline-size: 28rem;
  justify-self: center;
}

/* Filo accento in cima alla card: si traccia da sinistra all'entrata, a riposo
   è tenue, si accende quando si sta compilando il form. */
.pf-v5-c-login__main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fg-accent);
  opacity: 0.55;
  transform-origin: left;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
  animation: fg-trace 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}

.pf-v5-c-login__main:focus-within::before {
  opacity: 1;
  box-shadow: 0 0 12px rgba(221, 123, 93, 0.55);
}

@keyframes fg-trace {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Credenziali inviate: login.ftl disabilita #kc-login in onsubmit. Da lì al
   redirect il filo diventa una barra di progresso indeterminata — l'utente vede
   che la verifica è in corso invece di un pulsante spento e muto. */
.pf-v5-c-login__main:has(#kc-login:disabled)::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--fg-accent-hi) 45%, var(--fg-accent-hi) 55%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: fg-progress 1.1s ease-in-out infinite;
}

@keyframes fg-progress {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* il contenuto sta sopra il filo accento */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--fg-ink-strong);
  font-family: var(--fg-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  line-height: 1.25;
}

.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item {
  color: var(--fg-muted);
}

/* ── Etichette e testo form ────────────────────────────────────────────────── */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-form__group-label,
.pf-v5-c-check__label {
  color: var(--fg-ink-strong);
}

.pf-v5-c-form__label-required,
.pf-v5-c-check__label-required {
  color: var(--fg-accent);
}

/* ── Input ─────────────────────────────────────────────────────────────────── */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
input.pf-v5-c-form-control {
  background: var(--fg-panel-inner);
  color: var(--fg-ink-strong);
  border-radius: var(--fg-radius);
  transition: box-shadow 0.15s ease;
  min-block-size: 2.75rem;   /* target comodo da touch/tastiera */
  --pf-v5-c-form-control--BackgroundColor: var(--fg-panel-inner);
  --pf-v5-c-form-control--Color: var(--fg-ink-strong);
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--fg-panel-inner);
}

/* PatternFly disegna il bordo dell'input su ::before (3 lati, colore chiaro
   BorderColor--300) e la sottolineatura su ::after: senza questo override
   restava una cornice biancastra attorno ai campi. Un solo bordo, 4 lati. */
.pf-v5-c-form-control::before {
  border-color: var(--fg-control-border);
  border-block-end-width: 1px;
  border-radius: inherit;
  transition: border-color 0.15s ease;
}

.pf-v5-c-form-control::after {
  border: 0;
}

.pf-v5-c-form-control:hover::before,
.pf-v5-c-form-control:focus-within::before {
  border-color: var(--fg-accent);
}

/* Stato errore: PatternFly lo segnala sulla sottolineatura ::after che qui è
   azzerata, quindi lo ridisegniamo sul bordo. Keycloak marca il campo invalido
   con .pf-m-error (totp) oppure con aria-invalid sull'input (login, profilo). */
.pf-v5-c-form-control.pf-m-error::before,
.pf-v5-c-form-control[aria-invalid="true"]::before,
.pf-v5-c-form-control:has(:is(input, select, textarea)[aria-invalid="true"])::before {
  border-color: var(--fg-crit);
}

/* Stessi stati per success/warning: oggi nessun template di login li mette su un
   form control (solo su .pf-v5-c-alert), ma la sottolineatura ::after è azzerata
   per tutti, quindi se comparissero resterebbero muti. */
.pf-v5-c-form-control.pf-m-success::before { border-color: var(--fg-good); }
.pf-v5-c-form-control.pf-m-warning::before { border-color: var(--fg-warn); }

.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 3px rgba(232, 146, 122, 0.38);
}

/* Campo password: input + pulsante «mostra» stanno in un .pf-v5-c-input-group.
   L'alone sul solo form-control si fermava prima del pulsante: lo portiamo sul
   gruppo intero, così abbraccia campo e occhio come un unico controllo.
   Tutto il blocco dipende da :has() (il selettore sotto e la cancellazione degli
   indicatori che sostituisce): in un browser senza supporto va scartata TUTTA
   l'unità, non solo la regola :has(), altrimenti il campo resta senza alcun
   indicatore di focus (regressione trovata in review). Il fallback è il
   comportamento pre-esistente: alone sul solo campo + outline nativo, meno
   elegante ma sempre visibile — mai "rimosso senza sostituto". */
@supports selector(:has(*)) {
  .pf-v5-c-input-group {
    border-radius: var(--fg-radius);
    transition: box-shadow 0.15s ease;
  }

  .pf-v5-c-input-group:has(.pf-v5-c-form-control:focus-within) {
    box-shadow: 0 0 0 3px rgba(232, 146, 122, 0.38);
  }

  .pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
    box-shadow: none;
  }

  /* L'angolo destro del campo è coperto dal pulsante «mostra» (angoli solo a
     sinistra, come sopra), altrimenti sporgeva arrotondato dietro al bordo
     dritto del pulsante. */
  .pf-v5-c-input-group .pf-v5-c-form-control::before {
    border-radius: var(--fg-radius) 0 0 var(--fg-radius);
  }

  /* L'input dentro un form-control ha già l'alone sul contenitore (sopra): l'outline
     del focus-visible ne disegnava un secondo, sfalsato, attorno al solo input.
     Due varianti di markup coesistono (vedi il blocco input.pf-v5-c-form-control più
     sotto): span che avvolge un <input> senza classe, oppure la classe direttamente
     sull'<input>/<select>/<textarea> — entrambe vanno silenziate, non solo la prima.
     Non in forced-colors: lì il box-shadow non si disegna e l'outline resta l'unico
     indicatore di focus. */
  @media not (forced-colors: active) {
    .pf-v5-c-login .pf-v5-c-form-control input:focus-visible,
    .pf-v5-c-login input.pf-v5-c-form-control:focus-visible,
    .pf-v5-c-login select.pf-v5-c-form-control:focus-visible,
    .pf-v5-c-login textarea.pf-v5-c-form-control:focus-visible {
      outline: none;
    }
  }
}

/* Focus sempre visibile e mai rimosso senza sostituto: è il requisito di
   accessibilità che regge tutto il resto della pagina. */
.pf-v5-c-login :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 3px;
}

/* Campi che portano la classe direttamente sull'<input> (es. login-oauth2-
   device-verify-user-code.ftl, che eredita da base/): sugli elementi sostituiti
   ::before/::after non vengono renderizzati, quindi lì il bordo va sull'elemento. */
input.pf-v5-c-form-control,
select.pf-v5-c-form-control,
textarea.pf-v5-c-form-control {
  border: 1px solid var(--fg-control-border);
  min-block-size: 2.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.pf-v5-c-form-control:hover,
input.pf-v5-c-form-control:focus,
select.pf-v5-c-form-control:hover,
select.pf-v5-c-form-control:focus,
textarea.pf-v5-c-form-control:hover,
textarea.pf-v5-c-form-control:focus {
  border-color: var(--fg-accent);
}

input.pf-v5-c-form-control[aria-invalid="true"],
select.pf-v5-c-form-control[aria-invalid="true"],
textarea.pf-v5-c-form-control[aria-invalid="true"],
input.pf-v5-c-form-control.pf-m-error,
select.pf-v5-c-form-control.pf-m-error,
textarea.pf-v5-c-form-control.pf-m-error {
  border-color: var(--fg-crit);
}

:is(input, select, textarea).pf-v5-c-form-control.pf-m-success { border-color: var(--fg-good); }
:is(input, select, textarea).pf-v5-c-form-control.pf-m-warning { border-color: var(--fg-warn); }

.pf-v5-c-form-control::placeholder,
.pf-v5-c-form-control input::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}

/* Selettore lingua nell'header: il <select> sta dentro un .pf-v5-c-form-control
   che disegna già il bordo su ::before. Dargliene uno proprio raddoppiava il filo
   inferiore (i due bordi cadono a 1-2px di distanza). Bordo zero, solo colore. */
#login-select-toggle {
  background: transparent;
  color: var(--fg-ink-strong);
  border: 0;
}

/* Il triangolino della tendina usa currentColor, che PatternFly lascia scuro:
   sul panel nero spariva e il selettore non sembrava apribile. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__toggle-icon {
  color: var(--fg-muted);
}

/* ── Pulsanti ──────────────────────────────────────────────────────────────── */
/* Tinta piatta, niente gradiente: dev'essere l'unico elemento ad alta enfasi */
.pf-v5-c-button.pf-m-primary {
  background: var(--fg-accent-fill);
  color: var(--fg-on-accent);
  border-radius: var(--fg-radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  min-block-size: 2.75rem;
  box-shadow: none;
  transition: background-color 0.15s ease;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fg-accent-fill);
  --pf-v5-c-button--m-primary--Color: var(--fg-on-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fg-accent-fill-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--fg-accent-fill-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--fg-on-accent);
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--fg-accent-fill-hover);
}

#kc-login {
  inline-size: 100%;
}

/* Durante la verifica il pulsante resta terracotta pieno (PatternFly lo farebbe
   grigio, come un errore) col cursore di attesa: lo stato lo dice la barra sul
   filo. Niente opacity: attenuerebbe anche il testo sotto 4.5:1. */
#kc-login:disabled {
  background: var(--fg-accent-fill);
  color: var(--fg-on-accent);
  opacity: 1;
  cursor: progress;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-control {
  background: transparent;
  color: var(--fg-ink-strong);
  border: 1px solid var(--fg-line-bright);
  border-radius: var(--fg-radius);
  transition: border-color 0.15s ease, color 0.15s ease;
  --pf-v5-c-button--m-secondary--Color: var(--fg-ink-strong);
  --pf-v5-c-button--m-secondary--BorderColor: var(--fg-line-bright);
}

.pf-v5-c-button.pf-m-secondary:hover {
  border-color: var(--fg-accent);
  color: var(--fg-ink-strong);
}

/* Pulsante «mostra password»: è un .pf-m-control dentro un .pf-v5-c-input-group.
   Tre difetti sommati: PatternFly disegna un suo bordo su ::after (con il filo
   superiore biancastro), il nostro bordo ne aggiungeva un secondo, e il raggio su
   4 angoli staccava il pulsante dal campo. Un solo bordo, angoli solo a destra,
   filo sinistro condiviso con l'input. */
.pf-v5-c-button.pf-m-control::after {
  border: 0;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  background: var(--fg-panel-inner);
  border-color: var(--fg-control-border);
  border-inline-start-width: 0;
  border-radius: 0 var(--fg-radius) var(--fg-radius) 0;
  min-block-size: 2.75rem;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  border-color: var(--fg-accent);
  color: var(--fg-accent-hi);
}

/* ── Link ──────────────────────────────────────────────────────────────────── */
a,
.pf-v5-c-button.pf-m-link,
.pf-v5-c-login__main-footer-links-item a {
  color: var(--fg-accent);
}

a:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: var(--fg-accent-hi);
}

/* Il colore da solo non identifica un link: serve la sottolineatura */
.pf-v5-c-login__main a:not(.pf-v5-c-button) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

/* ── Checkbox (Ricordami) ──────────────────────────────────────────────────── */
/* Niente override del layout: la griglia di PatternFly allinea già spunta e testo
   (dà all'input un `align-self` calcolato sulla prima riga della label). Il
   `display:flex; align-items:center` di prima lo scavalcava e lasciava la spunta
   fuori asse rispetto a «Ricordami». Il target da 2.75rem lo fa il padding. */
label.pf-v5-c-check {
  padding-block: 0.625rem;
}

.pf-v5-c-check__input {
  accent-color: var(--fg-accent);
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* ── Alert / messaggi ──────────────────────────────────────────────────────── */
.pf-v5-c-alert {
  background: var(--fg-panel-inner);
  border: 1px solid var(--fg-line-bright);
  border-radius: var(--fg-radius);
  color: var(--fg-ink-strong);
}

.pf-v5-c-alert.pf-m-danger { border-left: 3px solid var(--fg-crit); }
.pf-v5-c-alert.pf-m-success { border-left: 3px solid var(--fg-good); }
.pf-v5-c-alert.pf-m-warning { border-left: 3px solid var(--fg-warn); }
.pf-v5-c-alert.pf-m-info { border-left: 3px solid var(--fg-accent); }

.kc-feedback-text,
.pf-v5-c-alert__title {
  color: var(--fg-ink-strong);
}

/* ── Helper / errori di campo ──────────────────────────────────────────────── */
.kc-feedback-text.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text {
  color: var(--fg-crit);
}

/* ── Accessibilità: niente transizioni se l'utente le ha disattivate ────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Senza animazione la barra di verifica sarebbe un segmento fermo a metà:
     meglio il filo pieno e acceso. */
  .pf-v5-c-login__main:has(#kc-login:disabled)::before {
    background: var(--fg-accent-hi);
  }
}