/* Pancho — auth panels (login / signup / forgot / reset / verify).
   Same token set as dashboard.css (loaded together); theme-aware. */

.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: var(--shell-bg); padding: 24px;
}
.auth-brand { display: flex; align-items: center; gap: 10px; }

/* ── In-shell auth split (login / signup / …) ──────────────────────────
   The auth pages render INSIDE the app shell (guest sidebar + topbar,
   user directive: everything happens inside the frame). The split fills
   the content area edge-to-edge; the form side scrolls on its own. */
.auth-split { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.auth-hero {
  width: 44%; min-width: 400px; background: #0a1730; color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 60px; position: relative; overflow: hidden;
}
.auth-pane {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px; overflow-y: auto; background: var(--shell-bg); color: var(--ink-strong);
}
.auth-pane input::placeholder { color: var(--muted-2); }
.auth-pane input:focus { outline: none; border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
@media (max-width: 1160px) { .auth-hero { display: none; } }
/* Phones: the form pane sheds its desktop padding and hugs the top so the
   keyboard never pushes the submit button off-screen. */
@media (max-width: 640px) {
  .auth-pane { padding: 26px 18px 44px; align-items: flex-start; }
}
/* Tiny screens: first/last name stack instead of squeezing side by side. */
@media (max-width: 420px) {
  .au-names { grid-template-columns: 1fr !important; }
}

.auth-card {
  width: 100%; max-width: 400px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: var(--card-shadow); padding: 26px 26px 24px;
}
.auth-card h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink-strong); letter-spacing: -.01em; }
.auth-card .sub { margin: 5px 0 18px; font-size: 13.5px; color: var(--ink-sub); line-height: 1.5; }

.auth-card .fld { margin-bottom: 13px; }
.auth-card .btn-primary { width: 100%; justify-content: center; margin-top: 4px; height: 40px; }

.auth-err {
  display: none; margin: 0 0 13px; padding: 9px 12px; border-radius: 9px;
  background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-fg);
  font-size: 13px; font-weight: 500; line-height: 1.45;
}
.auth-err.show { display: block; }
.auth-ok {
  display: none; margin: 0 0 13px; padding: 9px 12px; border-radius: 9px;
  background: var(--ok-bg); border: 1px solid var(--ok-fg); color: var(--ok-fg);
  font-size: 13px; font-weight: 500; line-height: 1.45;
}
.auth-ok.show { display: block; }

.auth-foot { font-size: 13.5px; color: var(--ink-3); text-align: center; }
.auth-foot a { font-weight: 600; }
.auth-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }

/* Big icon result cards (verify success etc.) */
.auth-result { text-align: center; padding: 6px 0 2px; }
.auth-result .ico {
  width: 52px; height: 52px; border-radius: 999px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.auth-result .ico.ok  { background: var(--ok-bg); color: var(--ok-fg); }
.auth-result .ico.bad { background: var(--bad-bg); color: var(--bad-fg); }

/* Field-specific login errors (ported MyPancho): only the guilty field
   goes red and shakes; auth.js clears the mark on the next keystroke. */
.auth-bad {
  border-color: var(--bad-fg) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
@keyframes authShake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.auth-shake { animation: authShake .3s ease; }