/* =========================================
   AUTH — sign-in, sign-in code, set / forgot password (components/auth-shell.blade.php)
   ========================================= */

/* =========================================
   AUTH
   ========================================= */
.auth-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #0F2044 0%, #1E4D9B 50%, #0D8AC5 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; padding: 24px 16px;
  overflow-y: auto;
  z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.auth-overlay.active { opacity: 1; pointer-events: all; }

.auth-container {
  width: 420px; max-width: 100%;
  margin: auto 0 0;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
}

.auth-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.auth-logo { width: 40px; height: 40px; }
.auth-brand-name {
  font-size: 1.2rem; font-weight: 800; line-height: 1.25;
  color: #fff; letter-spacing: -0.3px;
}

.auth-card { display: none; }
.auth-card.active { display: block; }

.auth-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.auth-subtitle { color: rgba(255,255,255,0.55); margin-bottom: 24px; }

.auth-options {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.checkbox-label { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); cursor: pointer; }
.auth-link { color: #60b4ff; text-decoration: none; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }
.auth-link-button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.auth-link-button:disabled { color: rgba(255,255,255,0.4); cursor: default; text-decoration: none; }
.auth-container .form-input.auth-code-input { font-size: 1.25rem; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

/* Form details (inputs on the dark card) */
.auth-container .form-label { color: rgba(255,255,255,0.75); }
.auth-container .form-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.auth-container .form-input::placeholder { color: rgba(255,255,255,0.35); }
.auth-container .form-input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); box-shadow: none; }
.auth-container .form-input:disabled { color: rgba(255,255,255,0.6); }
/* Browser autofill paints inputs pale; keep them on the dark card */
.auth-container .form-input:-webkit-autofill,
.auth-container .form-input:-webkit-autofill:hover,
.auth-container .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #2a4d8c inset;
  box-shadow: 0 0 0 1000px #2a4d8c inset;
  transition: background-color 9999s ease-out 0s;
}
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap .form-input { padding-left: 36px; }
.auth-input-wrap .form-input.has-toggle { padding-right: 42px; }
.auth-input-icon { position: absolute; left: 12px; color: rgba(255,255,255,0.4); pointer-events: none; }
.auth-input-toggle {
  position: absolute; right: 6px;
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.45);
}
.auth-input-toggle:hover { color: #fff; }
.auth-input-toggle .icon-hide,
.auth-input-toggle.is-visible .icon-show { display: none; }
.auth-input-toggle.is-visible .icon-hide { display: block; }
.auth-error { list-style: none; padding: 0; margin: 6px 0 0; color: #ff8080; font-size: 0.8rem; }

.auth-submit:disabled { opacity: 0.75; cursor: progress; transform: none; }
.auth-spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: auth-spin 0.7s linear infinite;
}
.auth-submit.is-loading .auth-spinner { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 auto;
  color: rgba(255,255,255,0.5); font-size: 0.8rem;
}
.auth-footer-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,0.75); text-decoration: none; font-weight: 500;
}
.auth-footer-link:hover { color: #fff; }