/* ============================================================
   DiveLog DS — Page: Login (pages/login/login.css)
   Override minimi per contesto login. Tutto il resto è nel DS.
   Importa auth.css per componenti auth-specific non ancora nel DS.
   ============================================================ */

@import url('../../../css/auth.css');

/* ── Login Page Layout ──
   La pagina login è una splash-page (sfondo foto + card glass)
   per coerenza con login/register/dashboard (splash-page.css §1) */
.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-4);
  /* background: transparent — ereditato da .splash-page se applicato */
}

/* ── Auth Main ──
   Centrato orizzontalmente, larghezza massima 420px */
.auth-main {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto; /* centratura orizzontale esplicita */
  padding-top: var(--space-8);
}

/* Variante per pagine con form lunghi */
@media (min-width: 600px) {
  .auth-main--form {
    max-width: 750px;
  }
}

/* ── Card overrides per login ──
   .splash-page__card in splash-page.css definisce già:
   background: var(--surface-glass), backdrop-filter: blur(12px), border, shadow.
   Qui forziamo la trasparenza anche se card.css è caricato dopo. */
.splash-page__card {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-high);
  padding: var(--space-10) var(--space-8);
  width: 100%;
}

/* ── Inline Header ── */
.inline-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.inline-header__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-medium);
  object-fit: contain;
}

.inline-header__title {
  font-size: var(--font-headline-medium);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

/* ── Card Subtitle ── */
.card__subtitle {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-normal);
}

/* ── Card Footer ── */
.card__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
}

.card__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--motion-fast) var(--ease-standard);
}

.card__link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.card__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* ── Form Field Toggle Password ── */
.form-field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-field__toggle-password {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color var(--motion-fast) var(--ease-standard);
}

.form-field__toggle-password:hover {
  color: var(--color-text-primary);
}

.form-field__toggle-password:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Error Summary ──
   Sovrascrittura per allineamento con DS */
.error-summary {
  padding: var(--space-4);
  border-radius: var(--radius-medium);
  background: rgba(186, 26, 26, 0.08);
  border: 1px solid var(--color-error);
  margin-bottom: var(--space-4);
}

.error-summary__title {
  font-size: var(--font-title-medium);
  font-weight: var(--weight-bold);
  color: var(--color-error);
  margin: 0 0 var(--space-2);
}

.error-summary__list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-error);
  font-size: var(--font-body-medium);
}

.error-summary__list li {
  margin-bottom: var(--space-1);
}

/* FIX CRITICO: nascondi elementi con attributo [hidden] */
[hidden] {
  display: none !important;
}

/* ── Alert overrides per login ── */
.alert--error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  background: rgba(186, 26, 26, 0.08);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  margin-bottom: var(--space-4);
  font-size: var(--font-body-medium);
}

.alert--success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  margin-bottom: var(--space-4);
  font-size: var(--font-body-medium);
}

.alert__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.alert__text {
  flex: 1;
}

/* ── Button full width ── */
.button--full-width {
  width: 100%;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .card__link,
  .form-field__toggle-password {
    transition: none;
  }
}

/* ── Responsive ── */
@media (max-width: 599px) {
  .auth-page {
    padding: var(--space-3);
  }

  .auth-main {
    padding-top: var(--space-4);
  }

  .splash-page__card {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-large);
  }

  .inline-header__logo {
    width: 40px;
    height: 40px;
  }

  .inline-header__title {
    font-size: var(--font-title-large);
  }
}