/* ══════════════════════════════════════════════════════════════════════
   AUTH — chỉ chứa layout và trạng thái đặc thù của cụm xác thực.
   Mobile-first để 360px là cấu hình mặc định, sau đó mới mở rộng card.
══════════════════════════════════════════════════════════════════════ */

.auth {
  min-height: 100dvh;
  padding: var(--space-4);
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      var(--bg),
      var(--primary-soft)
    );
}

.auth__card {
  width: 100%;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: none;
}

.auth__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth__logo {
  width: var(--control-h);
  height: var(--control-h);
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

.auth__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.auth__title {
  font-size: var(--fs-lg);
}

.auth__subtitle {
  max-width: calc(var(--drawer-w) - var(--space-16));
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ══ PASSWORD ══════════════════════════════════════════════════════════
   Nút mắt nằm trong cùng vùng input nhưng vẫn giữ vùng bấm tối thiểu
   bằng row-h để touch không phụ thuộc kích thước icon.
══════════════════════════════════════════════════════════════════════ */

.auth__password {
  position: relative;
}

.auth__password-input {
  padding-right: calc(var(--row-h) + var(--space-2));
}

.auth__password-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--row-h);
  height: var(--row-h);
  transform: translateY(-50%);
}

.auth__icon {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══ PASSWORD STRENGTH ════════════════════════════════════════════════
   Bốn segment giữ nguyên layout giữa các mức; modifier chỉ thay trạng
   thái active để tránh layout nhảy khi người dùng gõ.
══════════════════════════════════════════════════════════════════════ */

.auth__strength {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-3);
}

.auth__strength-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
}

.auth__strength-bar {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-2);
}

.auth__strength-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.auth__strength--weak .auth__strength-bar:nth-child(1) {
  background: var(--danger);
}

.auth__strength--weak .auth__strength-text {
  color: var(--danger);
}

.auth__strength--medium .auth__strength-bar:nth-child(-n + 2) {
  background: var(--warn);
}

.auth__strength--medium .auth__strength-text {
  color: var(--warn);
}

.auth__strength--strong .auth__strength-bar {
  background: var(--success);
}

.auth__strength--strong .auth__strength-text {
  color: var(--success);
}

/* ══ CUSTOM SELECT ═════════════════════════════════════════════════════
   Native option không thể chứa span data-i18n, vì vậy dùng details/menu
   nhưng vẫn kế thừa visual class .select của design system.
══════════════════════════════════════════════════════════════════════ */

.auth__select {
  position: relative;
}

.auth__select-trigger {
  display: flex;
  align-items: center;
  list-style: none;
}

.auth__select-trigger::-webkit-details-marker {
  display: none;
}

.auth__select-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
}

/* ══ AGREEMENT + FORM ROW ═════════════════════════════════════════════ */

.auth__agreement {
  align-items: flex-start;
}

.auth__form-row {
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

/* ══ LOADING BUTTON ════════════════════════════════════════════════════
   Spinner chỉ dùng border style khác nhau nên không cần thêm màu ngoài
   token hiện có.
══════════════════════════════════════════════════════════════════════ */

.auth__button--loading {
  position: relative;
}

.auth__spinner {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  border-width: calc(var(--space-1) / 2);
  border-style: solid solid dotted dotted;
  border-color: currentColor;
  border-radius: var(--radius-full);
  animation: auth-spin var(--t-slow) linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(1turn);
  }
}

/* ══ DIVIDER ═══════════════════════════════════════════════════════════ */

.auth__divider {
  margin: var(--space-5) 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: calc(var(--space-1) / 4);
  background: var(--border);
}

/* ══ GOOGLE ════════════════════════════════════════════════════════════ */

.auth__google {
  gap: var(--space-3);
}

.auth__google-icon {
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
}

.auth__google-blue {
  fill: var(--google-blue);
}

.auth__google-red {
  fill: var(--google-red);
}

.auth__google-yellow {
  fill: var(--google-yellow);
}

.auth__google-green {
  fill: var(--google-green);
}

/* ══ FOOTER LINKS ══════════════════════════════════════════════════════ */

.auth__footer-text {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.auth__footer-text a {
  margin-left: var(--space-1);
  font-weight: var(--fw-medium);
}

.auth__back-link {
  min-height: var(--row-h);
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: var(--fs-sm);
}

.auth__text-link {
  min-height: var(--row-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
}

/* ══ MESSAGE SCREENS ═══════════════════════════════════════════════════
   Verify, pending và expired dùng cùng bố cục trung tâm để tránh ba
   implementation gần như giống nhau.
══════════════════════════════════════════════════════════════════════ */

.auth__card--message {
  text-align: center;
}

.auth__status-icon {
  width: calc(var(--space-12) + var(--space-8));
  height: calc(var(--space-12) + var(--space-8));
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
}

.auth__status-icon--primary {
  background: var(--primary-soft);
  color: var(--primary);
}

.auth__status-icon--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.auth__status-svg {
  width: var(--space-12);
  height: var(--space-12);
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth__message-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ══ ALERTS ════════════════════════════════════════════════════════════ */

.auth__alert {
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-width: calc(var(--space-1) / 4);
  border-style: solid;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.auth__alert--danger {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}

.auth__alert--success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}

.auth__alert-icon {
  width: var(--space-5);
  height: var(--space-5);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth__state-example {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: calc(var(--space-1) / 4) solid var(--border);
}

/* ══ RESET REQUIREMENTS ════════════════════════════════════════════════ */

.auth__requirements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth__requirement {
  display: grid;
  grid-template-columns: var(--fs-base) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.auth__requirement-icon {
  position: relative;
  width: var(--fs-base);
  height: var(--fs-base);
  border: calc(var(--space-1) / 4) solid var(--border-strong);
  border-radius: var(--radius-full);
}

.auth__requirement.is-met {
  color: var(--success);
}

.auth__requirement.is-met .auth__requirement-icon {
  border-color: var(--success);
  background: var(--success);
}

.auth__requirement.is-met .auth__requirement-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--space-2);
  height: var(--space-1);
  border-left: calc(var(--space-1) / 2) solid var(--text-inverse);
  border-bottom: calc(var(--space-1) / 2) solid var(--text-inverse);
  transform: translate(-50%, -65%) rotate(-45deg);
}

/* ══ ONBOARDING ════════════════════════════════════════════════════════ */

.auth__role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.auth__role-card {
  min-width: 0;
  min-height: calc(var(--space-16) + var(--space-8));
  padding: var(--space-4);
  border: calc(var(--space-1) / 4) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast);
}

.auth__role-card.is-selected {
  border-width: calc(var(--space-1) / 2);
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.auth__role-emoji {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}

.auth__role-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ══ MOBILE ≤480px ═════════════════════════════════════════════════════
   Input tăng lên 16px để Safari iOS không tự zoom. Control dùng row-h
   để đảm bảo vùng chạm 44px.
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .auth {
    align-items: start;
  }

  .auth__card {
    min-height: calc(100dvh - var(--space-4));
  }

  .auth .input,
  .auth .select,
  .auth .textarea {
    font-size: var(--fs-md);
  }

  .auth .btn {
    min-height: var(--row-h);
  }

  .auth__form {
    gap: var(--space-5);
  }

  .auth__password-toggle {
    min-width: var(--row-h);
    min-height: var(--row-h);
  }

  .auth__role-card {
    min-height: calc(var(--row-h) * 2);
  }
}

/* ══ TABLET 481–1023px ═════════════════════════════════════════════════
   Card đạt 400px bằng token hiện có: drawer 420px trừ space-5 20px.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 481px) {
  .auth {
    padding: var(--space-6);
  }

  .auth__card {
    width: calc(var(--drawer-w) - var(--space-5));
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
}

/* ══ DESKTOP ≥1024px ══════════════════════════════════════════════════
   Onboarding rộng hơn card auth thường, suy ra 480px từ token hiện có.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .auth__card--onboarding {
    width: calc(
      var(--drawer-w) +
      var(--space-10) +
      var(--space-5)
    );
  }
}

/* ══ HOVER ═════════════════════════════════════════════════════════════
   Hover chỉ áp dụng trên thiết bị thật sự có con trỏ để touch không phụ
   thuộc trạng thái không tồn tại trên điện thoại.
══════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  .auth__role-card:hover:not(.is-selected) {
    border-color: var(--primary-border);
    background: var(--surface-hover);
  }

  .auth__role-card:active {
    transform: translateY(calc(var(--space-1) / 4));
  }
}

/* ══ REDUCED MOTION BỔ SUNG ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .auth__spinner {
    animation-duration: .01ms !important;
  }
}

/*
  Đề xuất thêm token:
  --google-blue
  --google-red
  --google-yellow
  --google-green

  Lý do: logo Google bắt buộc có 4 màu thương hiệu nhưng tokens.css hiện
  không chứa các màu này; không hardcode mã màu trong auth.css.
*/