@layer auth-tokens, auth-base, auth-layout, auth-components, auth-utilities;

@layer auth-tokens {
  :root {
    /* Backgrounds e superfici (Figma: Color/Background, Color/Surface) */
    --auth-color-page: #bbe1ff;
    --auth-color-section: #f4f7fa;
    --auth-color-surface: #ffffff;
    --auth-color-surface-subtle: #eef4f8;

    /* Testo multi-livello (Figma: Color/Text).
       --auth-color-text-muted scurito da #aaaaaa a #6c757d per WCAG AA (4.69:1 su bianco). */
    --auth-color-text-strong: #212529;
    --auth-color-text: #3c4858;
    --auth-color-text-input: #495057;
    --auth-color-text-muted: #6c757d;
    --auth-color-text-secondary: #8b98a5;
    --auth-color-text-on-action: #ffffff;

    /* Bordi (Figma: Color/Border) */
    --auth-color-border: #d2d2d2;
    --auth-color-border-account: #143f86;

    /* Azioni (Figma: Color/Action).
       --auth-color-accent resta il tono decorativo del design (#51ade1, usato per
       underline e dettagli senza testo sovrapposto). I token *-strong sono le varianti
       usate come sfondo dei controlli con testo bianco, scurite per WCAG AA (>=4.5:1):
       primary #277aa8 (4.73:1), danger #cf4332 (4.66:1). */
    --auth-color-accent: #51ade1;
    --auth-color-accent-strong: #277aa8;
    --auth-color-danger: #ea5c47;
    --auth-color-danger-strong: #cf4332;
    --auth-color-federated: #0066cc;

    /* Account list (Figma: Color/Account) */
    --auth-color-account-role: #261b3d;
    --auth-color-account-institution: #777777;
    --auth-color-account-avatar-fallback: #ffb744;

    /* Scrollbar (Figma: Color/Scrollbar) */
    --auth-color-scrollbar-track: #f2f2f2;
    --auth-color-scrollbar-thumb: #8b8b8b;

    /* Spaziature */
    --auth-space-1: 0.25rem;
    --auth-space-2: 0.5rem;
    --auth-space-3: 0.75rem;
    --auth-space-4: 1rem;
    --auth-space-6: 1.5rem;
    --auth-space-8: 2rem;
    /* Padding orizzontale card (Figma: Spacing/Card horizontal) */
    --auth-space-card-x: 27px;
    --auth-space-card-x-mobile: 24px;

    /* Raggi (Figma: Radius, Auth source tokens/Card radius) */
    --auth-radius-card: 0.75rem;
    --auth-radius-small: 4px;
    --auth-radius-button: 30px;
    --auth-radius-federated: 0;
    --auth-radius-checkbox: 1px;
    --auth-radius-scrollbar: 3px;

    /* Stroke (Figma: Stroke) */
    --auth-stroke-default: 1px;
    --auth-stroke-focus: 2px;

    /* Ombre (Figma: Color/Shadow, effect styles Material) */
    --auth-shadow-card:
      0 1px 3px rgb(0 0 0 / 12%),
      0 1px 2px rgb(0 0 0 / 14%),
      0 2px 1px -1px rgb(0 0 0 / 20%);
    --auth-shadow-primary: 0 0.5rem 1.25rem rgb(81 173 225 / 28%);
    --auth-shadow-danger: 0 0.5rem 1.25rem rgb(234 92 71 / 28%);
    --auth-shadow-federated: 0 0.5rem 1.25rem rgb(0 102 204 / 28%);

    /* Misure strutturali */
    --auth-content-width: 500px;
    --auth-control-min-size: 44px;
    --auth-logo-max-width: 100px;
  }
}

@layer auth-base {
  .auth-page {
    min-height: 100vh;
    color: var(--auth-color-text);
  }

  .auth-page *,
  .auth-page *::before,
  .auth-page *::after {
    box-sizing: border-box;
  }
}

@layer auth-layout {
  .auth-layout {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
  }

  .auth-card-container {
    flex: 0 0 var(--auth-content-width);
    width: var(--auth-content-width);
  }

  .auth-promo {
    flex: 0 1 60%;
    width: 60%;
  }
}

@layer auth-components {
  .auth-card {
    background: var(--auth-color-surface);
    border-radius: var(--auth-radius-card);
    box-shadow: var(--auth-shadow-card);
    overflow: hidden;
  }

  .auth-progress {
    border-radius: var(--auth-radius-card) var(--auth-radius-card) 0 0;
    margin-bottom: 0;
  }

  .auth-card__header {
    padding: 0;
  }

  .auth-card__logo {
    max-width: var(--auth-logo-max-width);
  }

  .auth-card__title {
    color: var(--auth-color-text);
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .auth-selection__title {
    color: var(--auth-color-text);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 1.25rem 0 1rem;
  }

  .auth-consent__greeting {
    color: var(--auth-color-text);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 1.25rem 0 1rem;
  }

  .auth-flow__title {
    color: var(--auth-color-text);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 1.25rem 0 1rem;
  }

  .auth-flow__intro {
    margin-bottom: var(--auth-space-6);
  }

  .auth-otp__help {
    margin-top: var(--auth-space-6);
  }

  .auth-card__subtitle {
    color: var(--auth-color-text-muted);
    font-size: 1.125rem;
    margin: 0 var(--auth-space-6) var(--auth-space-3);
  }

  .auth-card__body {
    padding-top: 0;
  }

  .auth-card__footer {
    gap: var(--auth-space-4);
  }

  .auth-card__legal {
    margin-bottom: 0.625rem;
    text-align: center;
  }

  .auth-field {
    margin-bottom: var(--auth-space-6);
  }

  .auth-button,
  .auth-password-toggle {
    min-height: var(--auth-control-min-size);
  }

  .auth-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    justify-content: center;
    padding: 0;
  }

  .auth-account-list {
    max-height: 15.625rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--auth-color-scrollbar-thumb) var(--auth-color-scrollbar-track);
  }

  .auth-account-list::-webkit-scrollbar {
    width: 8px;
  }

  .auth-account-list::-webkit-scrollbar-track {
    background: var(--auth-color-scrollbar-track);
    border-radius: var(--auth-radius-scrollbar);
  }

  .auth-account-list::-webkit-scrollbar-thumb {
    background: var(--auth-color-scrollbar-thumb);
    border-radius: var(--auth-radius-scrollbar);
  }

  .auth-account {
    min-height: 4.5rem;
  }
}

@layer auth-utilities {
  .auth-visually-hidden {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
  }
}

/* Bridge verso Material Kit/Bootstrap, che sono caricati senza cascade layer. */
.auth-card__logo.img-fluid {
  max-width: var(--auth-logo-max-width) !important;
}

.auth-card__title.application-header__title {
  font-size: 1.5625rem;
  line-height: 1.4;
  margin: 1.25rem 0 0.625rem !important;
}

.auth-card .auth-selection__title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 1.25rem 0 1rem;
}

.auth-card .auth-consent__greeting {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 1.25rem 0 1rem;
}

.auth-card .auth-flow__title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 1.25rem 0 1rem;
}

.auth-password-toggle.reveal {
  height: var(--auth-control-min-size);
  right: 0;
  top: -0.25rem;
  width: var(--auth-control-min-size);
}

.auth-form #password {
  padding-right: 3rem;
}

/* Padding orizzontale card allineato ai token Figma (Spacing/Card horizontal = 27).
   Fuori dai cascade layer per prevalere sul padding Bootstrap di .card-body/.card-footer. */
.auth-card .auth-card__body,
.auth-card .auth-card__footer {
  padding-left: var(--auth-space-card-x);
  padding-right: var(--auth-space-card-x);
}

/* Campi input borderless con underline (Figma Controls: label #AAAAAA,
   1px #D2D2D2 underline, focus #EA5C47 2px).
   Material Kit NON usa border-bottom ma due linear-gradient come underline, e aggiunge
   la classe .is-focused via JS. Qui si sovrascrive la label e il gradiente di focus. */
.auth-card .auth-field label.label,
.auth-card .auth-field label.bmd-label-static {
  color: var(--auth-color-text-muted) !important;
}

/* Barra di focus rossa 2px (Figma: Color/Action - Danger and focus).
   Si ridisegnano i due gradienti: barra danger 2px + underline base 1px. */
.auth-field.is-focused .form-control,
.auth-field .form-control:focus {
  background-image:
    linear-gradient(to top, var(--auth-color-danger) 2px, rgba(234, 92, 71, 0) 2px),
    linear-gradient(to top, var(--auth-color-border) 1px, rgba(210, 210, 210, 0) 1px);
}

/* Alert di errore: barra laterale danger (Figma: Playground - Accesso non riuscito). */
.auth-card .auth-alert {
  border-left: var(--auth-stroke-focus) solid var(--auth-color-danger);
}

.auth-card .auth-error__title {
  color: var(--auth-color-danger);
  font-weight: 600;
}

/* Pulsanti a pillola (Figma: Radius/Button = 30) con ombra per stato.
   I colori restano gestiti da Material Kit; qui si allineano raggio e ombre. */
.auth-card .auth-button {
  border-radius: var(--auth-radius-button);
}

/* Sfondo dei pulsanti con testo bianco scurito per WCAG AA (contrasto >=4.5:1).
   Material Kit colora .btn-primary/.btn-danger con selettori ad alta specificita' sugli
   stati :hover/:active; si usa !important per garantire il background accessibile in
   tutti gli stati, mantenendo l'identita' cromatica del design. */
.auth-card .auth-button.btn-primary,
.auth-card .auth-button.btn-primary:hover,
.auth-card .auth-button.btn-primary:focus,
.auth-card .auth-button.btn-primary:active {
  background-color: var(--auth-color-accent-strong) !important;
  border-color: var(--auth-color-accent-strong) !important;
}

.auth-card .auth-button.btn-primary {
  box-shadow: var(--auth-shadow-primary);
}

.auth-card .auth-button.btn-danger,
.auth-card .auth-button.btn-danger:hover,
.auth-card .auth-button.btn-danger:focus,
.auth-card .auth-button.btn-danger:active {
  background-color: var(--auth-color-danger-strong) !important;
  border-color: var(--auth-color-danger-strong) !important;
}

.auth-card .auth-button.btn-danger {
  box-shadow: var(--auth-shadow-danger);
}

/* Pulsante federated/SPID: raggio dedicato (Figma: Radius/Federated = 0). */
.auth-card .auth-button.button-spid,
.auth-card .auth-button[data-auth-federated] {
  border-radius: var(--auth-radius-federated);
  box-shadow: var(--auth-shadow-federated);
}

/* Account list: bordo dal design (Figma: Color/Border Account). */
.auth-card .auth-account[data-auth-account] {
  border-color: var(--auth-color-border-account);
}

@media (max-width: 575px) {
  .auth-card-container {
    flex-basis: 100%;
    width: 100%;
  }

  /* Padding orizzontale card ridotto su mobile (Figma: Spacing/Card mobile horizontal = 24). */
  .auth-card .auth-card__body,
  .auth-card .auth-card__footer {
    padding-left: var(--auth-space-card-x-mobile);
    padding-right: var(--auth-space-card-x-mobile);
  }
}