/* AMITA — Login page overrides (formatting-only fix)
   Centers Clerk + tabs, hides inactive states, and constrains the card logo.
   Safe drop-in; depends on /assets/style.css tokens.
*/

:root {
  --auth-max-width: 600px; /* 560–640px are good options */
}

/* 1) Page layout: vertically center the card on roomy screens */
.container {
  min-height: calc(100svh - 120px);
  display: grid;
  place-items: center;
  padding-block: clamp(24px, 6vw, 64px);
}

/* 2) Top bar tweaks and logo size inside the card */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.logo-container { display: inline-flex; align-items: center; gap: 8px; }
.card .logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px;
  object-fit: cover;
}

/* 3) Tabs row (supports .tabs/.tab and legacy .auth-tabs/.btn) */
.auth-tabs, .tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: var(--auth-max-width);
  margin: 0 auto 18px;
}
.auth-tabs .btn, .tabs .tab {
  padding: 0.55rem 1rem;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.auth-tabs .btn:hover, .tabs .tab:hover { transform: translateY(-1px); }
.auth-tabs .btn:active, .tabs .tab:active { transform: translateY(0); }
.auth-tabs .btn.active, .tabs .tab.active {
  background: var(--accent-green);
  color: #142320;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  border-color: transparent;
}

/* 4) Status line under tabs */
#status-area {
  text-align: center;
  max-width: var(--auth-max-width);
  margin: 0 auto 6px;
  color: var(--muted);
  min-height: 18px;
}

/* 5) State blocks — hidden by default; visible only when .show is present */
.auth-container { width: 100%; }
.loading-container,
.error-container,
.success-container {
  display: none;                     /* <-- fix: hide by default */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  max-width: var(--auth-max-width);
  margin: 0 auto 16px;
  padding: 8px 0;
}
.loading-container.show,
.error-container.show,
.success-container.show { display: flex; }  /* <-- shown by JS via .show */

.error-title { font-weight: 700; color: #ffd6d6; }
.error-message { color: var(--muted); }
.error-container .retry-btn {
  margin-top: 6px;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

/* 6) Clerk container — centered and clamped to the same width as tabs */
#clerk-container {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 460px;
}
.cl-rootBox, .cl-card, .cl-main {
  width: 100% !important;
  max-width: var(--auth-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important; /* show our card background */
  box-shadow: none !important;
  border: 0 !important;
}

/* 7) Clerk internal visual polish */
.cl-headerTitle {
  text-align: center !important;
  font-size: clamp(20px, 2.4vw, 24px) !important;
  letter-spacing: .2px;
}
.cl-headerSubtitle { text-align: center !important; color: var(--muted) !important; }
.cl-formFieldLabel { font-weight: 700 !important; letter-spacing: .2px; }
.cl-input, .cl-formFieldInput { border-radius: 12px !important; }
.cl-input:focus, .cl-formFieldInput:focus, .cl-formFieldInput:focus-within {
  outline: 2px solid var(--accent-green) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--ring) !important;
}
.cl-formButtonPrimary {
  min-height: 44px !important;
  border-radius: 14px !important;
  width: 100% !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
}
.cl-footer, .cl-footerAction, .cl-alternativeMethodsBlock, .cl-formResendCodeLink {
  text-align: center !important;
}
.cl-dividerLine { background: var(--border) !important; }
.cl-dividerText { color: var(--muted) !important; }

/* 8) Mobile refinements */
@media (max-width: 700px) {
  .container { min-height: auto; place-items: start center; }
  :root { --auth-max-width: 560px; }
  #clerk-container { min-height: 420px; }
  .auth-tabs, .tabs { margin-bottom: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}