/*
 * Tema di accesso Learn-O (Kume) sopra keycloak.v2 (PatternFly 5).
 * Valori presi da design/riferimento-learn-o/GUIDA.md: palco viola-prugna, aloni dipinti una volta sola
 * sul body, superfici di vetro tinto, CTA a pillola col gradiente e testo Eerie Black, Montserrat.
 * I tre colori sorgente (primary, accent, background) sono le uniche costanti: tutto il resto è derivato.
 * Font serviti da qui (niente Google Fonts: nessuna chiamata a terzi dalla pagina d'accesso).
 */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

:root {
  /* brand Learn-O di serie: un'azienda cliente sostituisce solo questi tre */
  --lo-primary: #5E3B6A;   /* Imperial */
  --lo-accent:  #BC7BB2;   /* Opera Mauve */
  --lo-background: #08070B;

  --lo-thistle: color-mix(in srgb, var(--lo-accent) 53%, white);
  --lo-eerie:   #1C1D1F;
  --lo-black:      var(--lo-background);
  --lo-black-cool: color-mix(in srgb, var(--lo-background) 88%, #1a0f5c);

  --lo-font-body: 'Montserrat', system-ui, sans-serif;
  --lo-radius: 10px; --lo-radius-lg: 16px; --lo-radius-xl: 24px; --lo-radius-pill: 999px;
  --lo-fs-2xs: 12.5px; --lo-fs-xs: 13.5px; --lo-fs-sm: 15px; --lo-fs-base: 16px;
  --lo-fs-md: 18px; --lo-fs-lg: 22px; --lo-fs-xl: 27px;
  --lo-ease: cubic-bezier(.2, .8, .3, 1); --lo-dur: .16s;
}

.lo-theme-dark {
  --lo-ink-800: color-mix(in srgb, var(--lo-primary) 48%, var(--lo-black));
  --lo-ink-900: color-mix(in srgb, var(--lo-primary) 32%, var(--lo-black));
  --lo-ink-950: color-mix(in srgb, var(--lo-primary) 18%, var(--lo-black));
  --lo-surface:   color-mix(in srgb, var(--lo-primary) 30%, var(--lo-black-cool));
  --lo-surface-2: color-mix(in srgb, var(--lo-accent)   9%, var(--lo-surface));
  --lo-surface-3: color-mix(in srgb, var(--lo-accent)  20%, var(--lo-surface));
  --lo-text:       color-mix(in srgb, var(--lo-primary)  3%, white);
  --lo-text-muted: color-mix(in srgb, var(--lo-primary) 22%, white);
  --lo-text-soft:  color-mix(in srgb, var(--lo-primary) 45%, white);
  --lo-border:       color-mix(in srgb, var(--lo-accent) 42%, var(--lo-surface-2));
  --lo-border-light: color-mix(in srgb, var(--lo-accent) 24%, var(--lo-surface-2));
  --lo-hairline:     color-mix(in srgb, var(--lo-thistle) 26%, transparent);
  --lo-grad-app:
    radial-gradient(1300px 780px at 6% -14%,  color-mix(in srgb, var(--lo-primary) 62%, transparent) 0%, transparent 64%),
    radial-gradient(1100px 860px at 106% 106%, color-mix(in srgb, var(--lo-accent)  40%, transparent) 0%, transparent 62%),
    radial-gradient(900px 620px at 52% 44%,    color-mix(in srgb, var(--lo-primary) 24%, transparent) 0%, transparent 70%),
    linear-gradient(168deg, var(--lo-ink-800) 0%, var(--lo-ink-900) 46%, var(--lo-ink-950) 100%);
  --lo-grad-surface: linear-gradient(168deg, color-mix(in srgb, var(--lo-accent) 14%, var(--lo-surface)) 0%, var(--lo-surface) 62%);
  --lo-grad-primary: linear-gradient(135deg,
    color-mix(in srgb, var(--lo-thistle) 55%, var(--lo-accent)) 0%,
    var(--lo-accent) 42%,
    color-mix(in srgb, var(--lo-primary) 70%, var(--lo-accent)) 100%);
  --lo-on-cta: var(--lo-eerie);
  --lo-glow-primary:    0 8px 22px -6px  color-mix(in srgb, var(--lo-accent) 46%, transparent);
  --lo-glow-primary-hi: 0 14px 38px -8px color-mix(in srgb, var(--lo-accent) 70%, transparent);
  --lo-ring: 0 0 0 3px color-mix(in srgb, var(--lo-accent) 45%, transparent);
  --lo-shadow-lg: 0 16px 34px rgba(0,0,0,.52);
  --lo-red: #FF8E93; --lo-red-bg: #2E1218;
  --lo-warn: #F0C662; --lo-warn-bg: #2A2010;
  --lo-green: #5FE0A0; --lo-green-bg: #10281B;
  --lo-info: #86B9F5; --lo-info-bg: #12233A;

  /* PatternFly 5 riportato sui token Learn-O */
  --pf-v5-global--FontFamily--text: var(--lo-font-body);
  --pf-v5-global--FontFamily--heading: var(--lo-font-body);
  --pf-v5-global--FontSize--md: var(--lo-fs-base);
  --pf-v5-global--FontSize--sm: var(--lo-fs-sm);
  --pf-v5-global--FontSize--xs: var(--lo-fs-xs);
  --pf-v5-global--Color--100: var(--lo-text);
  --pf-v5-global--Color--200: var(--lo-text-muted);
  --pf-v5-global--link--Color: var(--lo-thistle);
  --pf-v5-global--link--Color--hover: white;
  --pf-v5-global--primary-color--100: var(--lo-accent);
  --pf-v5-global--BackgroundColor--100: transparent;
  --pf-v5-global--BorderColor--100: var(--lo-border-light);
  --keycloak-logo-url: url('../img/learn-o-logo-white.png');
  --keycloak-card-top-color: transparent;
}

html.lo-theme-dark, .lo-theme-dark body {
  font-family: var(--lo-font-body);
  font-size: var(--lo-fs-base);
  color: var(--lo-text);
  -webkit-font-smoothing: antialiased;
}

/* Il palco: aurora dipinta una volta sola, i contenitori restano trasparenti */
.login-pf.lo-theme-dark body,
.lo-theme-dark body#keycloak-bg {
  background: var(--lo-grad-app);
  background-attachment: fixed;
  background-size: auto;
  min-height: 100vh;
}
.lo-theme-dark .pf-v5-c-login,
.lo-theme-dark .pf-v5-c-login__container { background: transparent; }

/* Logo Learn-O (file originale, non ridisegnato) */
.lo-theme-dark #kc-header { margin-block-end: 8px; }
.lo-theme-dark #kc-header-wrapper {
  background: var(--keycloak-logo-url) no-repeat center / contain;
  width: 148px; height: 112px; margin: 0 auto;
  font-size: 0; color: transparent; padding: 0;
}

/* La card: vetro tinto con un filo di luce */
.lo-theme-dark .pf-v5-c-login__main {
  background: var(--lo-grad-surface);
  border: 1px solid var(--lo-hairline);
  border-radius: var(--lo-radius-xl);
  box-shadow: var(--lo-shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--lo-thistle) 18%, transparent);
  overflow: hidden;
}
.lo-theme-dark .pf-v5-c-login__main-header { border-top: 0; padding-block-start: 32px; }
.lo-theme-dark .pf-v5-c-login__main-header .pf-v5-c-title,
.lo-theme-dark #kc-page-title {
  font-family: var(--lo-font-body);
  font-weight: 700;
  font-size: var(--lo-fs-xl);
  letter-spacing: -.01em;
  color: var(--lo-text);
}
.lo-theme-dark .pf-v5-c-login__main-footer-band { border-top: 1px solid var(--lo-hairline); background: transparent; }
.lo-theme-dark .pf-v5-c-login__main-footer-band-item,
.lo-theme-dark .pf-v5-c-login__main-footer-band-item * { font-size: var(--lo-fs-sm); color: var(--lo-text-muted); }

/* Campi */
.lo-theme-dark .pf-v5-c-form__label-text { font-size: var(--lo-fs-sm); font-weight: 600; color: var(--lo-text-muted); }
.lo-theme-dark .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--lo-surface-2);
  --pf-v5-c-form-control--before--BorderColor: var(--lo-border-light);
  --pf-v5-c-form-control--after--BorderColor: var(--lo-border-light);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--lo-accent);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--lo-accent);
  --pf-v5-c-form-control--Color: var(--lo-text);
  border-radius: var(--lo-radius);
  font-size: var(--lo-fs-base);
  min-height: 46px;
  transition: box-shadow var(--lo-dur) var(--lo-ease);
}
.lo-theme-dark .pf-v5-c-form-control::before,
.lo-theme-dark .pf-v5-c-form-control::after { border-radius: var(--lo-radius); }
.lo-theme-dark .pf-v5-c-form-control:focus-within { box-shadow: var(--lo-ring); }
.lo-theme-dark .pf-v5-c-form-control > input:focus,
.lo-theme-dark .pf-v5-c-form-control > input:focus-visible { outline: none; }
.lo-theme-dark .pf-v5-c-form-control > input,
.lo-theme-dark .pf-v5-c-form-control > select { color: var(--lo-text); font-size: var(--lo-fs-base); padding-inline: 14px; }
.lo-theme-dark .pf-v5-c-form-control.pf-m-readonly { --pf-v5-c-form-control--BackgroundColor: var(--lo-surface); }

/* Il CTA: pillola col gradiente, testo scuro, alone mauve; uno solo per schermata */
.lo-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: transparent;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-primary--active--BackgroundColor: transparent;
  --pf-v5-c-button--m-primary--Color: var(--lo-on-cta);
  --pf-v5-c-button--m-primary--hover--Color: var(--lo-on-cta);
  --pf-v5-c-button--m-primary--focus--Color: var(--lo-on-cta);
  --pf-v5-c-button--m-primary--active--Color: var(--lo-on-cta);
  background: var(--lo-grad-primary);
  color: var(--lo-on-cta);
  border-radius: var(--lo-radius-pill);
  font-weight: 700;
  font-size: var(--lo-fs-md);
  min-height: 50px;
  box-shadow: var(--lo-glow-primary);
  transition: transform var(--lo-dur) var(--lo-ease), box-shadow var(--lo-dur) var(--lo-ease);
}
.lo-theme-dark .pf-v5-c-button.pf-m-primary::after { border: 0; }
.lo-theme-dark .pf-v5-c-button.pf-m-primary:hover,
.lo-theme-dark .pf-v5-c-button.pf-m-primary:focus-visible { transform: translateY(-1px); box-shadow: var(--lo-glow-primary-hi); }
.lo-theme-dark .pf-v5-c-button.pf-m-primary:focus-visible { outline: none; box-shadow: var(--lo-glow-primary-hi), var(--lo-ring); }

/* Azioni secondarie: contorno sottile, mai un secondo gradiente */
.lo-theme-dark .pf-v5-c-button.pf-m-secondary,
.lo-theme-dark .pf-v5-c-button.pf-m-tertiary {
  --pf-v5-c-button--after--BorderColor: var(--lo-border);
  --pf-v5-c-button--m-secondary--Color: var(--lo-text);
  --pf-v5-c-button--m-tertiary--Color: var(--lo-text);
  --pf-v5-c-button--m-secondary--BackgroundColor: var(--lo-surface-2);
  --pf-v5-c-button--m-tertiary--BackgroundColor: var(--lo-surface-2);
  border-radius: var(--lo-radius-pill);
  font-size: var(--lo-fs-sm);
  font-weight: 600;
}
.lo-theme-dark .pf-v5-c-button.pf-m-secondary::after,
.lo-theme-dark .pf-v5-c-button.pf-m-tertiary::after { border-radius: var(--lo-radius-pill); }
.lo-theme-dark .pf-v5-c-button.pf-m-control { --pf-v5-c-button--m-control--BackgroundColor: var(--lo-surface-2); --pf-v5-c-button--m-control--Color: var(--lo-text-muted); border-radius: 0 var(--lo-radius) var(--lo-radius) 0; }
.lo-theme-dark a { color: var(--lo-thistle); }
.lo-theme-dark a:hover { color: white; }

/* Avvisi: unici colori non derivati */
.lo-theme-dark .pf-v5-c-alert { border-radius: var(--lo-radius); border: 1px solid var(--lo-hairline); font-size: var(--lo-fs-sm); }
.lo-theme-dark .pf-v5-c-alert.pf-m-danger  { background: var(--lo-red-bg);  --pf-v5-c-alert__title--Color: var(--lo-red);  --pf-v5-c-alert__icon--Color: var(--lo-red); }
.lo-theme-dark .pf-v5-c-alert.pf-m-warning { background: var(--lo-warn-bg); --pf-v5-c-alert__title--Color: var(--lo-warn); --pf-v5-c-alert__icon--Color: var(--lo-warn); }
.lo-theme-dark .pf-v5-c-alert.pf-m-success { background: var(--lo-green-bg); --pf-v5-c-alert__title--Color: var(--lo-green); --pf-v5-c-alert__icon--Color: var(--lo-green); }
.lo-theme-dark .pf-v5-c-alert.pf-m-info    { background: var(--lo-info-bg); --pf-v5-c-alert__title--Color: var(--lo-info); --pf-v5-c-alert__icon--Color: var(--lo-info); }
.lo-theme-dark .kc-feedback-text, .lo-theme-dark .pf-v5-c-helper-text__item-text { font-size: var(--lo-fs-sm); }

/* Testi d'aiuto: mai sotto 12,5px */
.lo-theme-dark .pf-v5-u-font-size-sm, .lo-theme-dark small { font-size: var(--lo-fs-xs) !important; }

/* Pagina della 2FA: il QR resta su fondo chiaro per farsi leggere */
.lo-theme-dark .kc-qr-code img, .lo-theme-dark #kc-totp-secret-qr-code { background: white; padding: 10px; border-radius: var(--lo-radius); }
.lo-theme-dark #kc-totp-secret-key { font-family: ui-monospace, monospace; color: var(--lo-thistle); letter-spacing: .06em; }

.lo-theme-dark #login-select-toggle { background: var(--lo-surface-2); color: var(--lo-text); }

@media (prefers-reduced-motion: reduce) {
  .lo-theme-dark .pf-v5-c-button.pf-m-primary { transition: none; }
  .lo-theme-dark .pf-v5-c-button.pf-m-primary:hover { transform: none; }
}

/* Modalità reparto (badge + PIN sul tablet condiviso): guanti e luce forte. Bersagli di almeno 64px,
   testo grande, contrasto alto (testo pieno su superficie piena, niente trasparenze dietro le cifre). */
.lo-theme-dark .kume-reparto-form { display: grid; gap: 16px; }
.lo-theme-dark .kume-reparto-aiuto { font-size: var(--lo-fs-lg); font-weight: 600; color: var(--lo-text); margin: 0; }
.lo-theme-dark .kume-reparto-nota { font-size: var(--lo-fs-md); color: var(--lo-text-muted); margin: 0; }
.lo-theme-dark .kume-reparto-etichetta { display: block; font-size: var(--lo-fs-md); font-weight: 600; margin-block-end: 6px; }
.lo-theme-dark .kume-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lo-theme-dark .kume-pin-campo input {
  width: 100%; min-height: 72px; box-sizing: border-box;
  font-size: 40px; letter-spacing: .4em; text-align: center; font-weight: 700;
  background: var(--lo-black); color: white;
  border: 2px solid var(--lo-thistle); border-radius: var(--lo-radius-lg);
}
.lo-theme-dark .kume-pin-campo input:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.lo-theme-dark .kume-tastierino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lo-theme-dark .kume-tasto {
  min-height: 72px; min-width: 64px;
  display: flex; align-items: center; justify-content: center;
  font: 700 32px/1 var(--lo-font-body);
  background: var(--lo-surface-3); color: white;
  border: 2px solid var(--lo-border); border-radius: var(--lo-radius-lg);
  cursor: pointer; touch-action: manipulation; text-decoration: none;
}
.lo-theme-dark .kume-tasto:active { background: var(--lo-accent); color: var(--lo-eerie); }
.lo-theme-dark .kume-tasto:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.lo-theme-dark .kume-tasto-entra { background: var(--lo-grad-primary); color: var(--lo-on-cta); border-color: transparent; font-size: var(--lo-fs-lg); }
.lo-theme-dark a.kume-tasto-entra:hover { color: var(--lo-on-cta); }
.lo-theme-dark .kume-tasto-largo { width: 100%; box-sizing: border-box; }
.lo-theme-dark .kume-reparto-link { display: flex; align-items: center; justify-content: center; min-height: 64px; font-size: var(--lo-fs-md); }
/* Sul tablet il layout di Keycloak mostrerebbe il nome utente tentato («Email aziendale: beta.op.0001»):
   per l'operaio non vuol dire niente e il collega accanto non deve vederlo. Basta il saluto. */
.lo-theme-dark .pf-v5-c-login__main:has(.kume-reparto-form) .pf-v5-c-form__group:has(#kc-attempted-username),
.lo-theme-dark .pf-v5-c-login__main:has(.kume-reparto-form) #kc-username { display: none; }