/* Auth + console pages (login, signup, pending, dashboard). */

.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative;
}
.auth-shell::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 480px;
  background: radial-gradient(60% 60% at 50% 0%, var(--purple-tint) 0%, transparent 70%);
  z-index: -1;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px 32px;
}
.auth-card.wide { max-width: 480px; }
.auth-brand {
  display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 22px;
}
.auth-brand .nav-mark { width: 28px; height: 28px; font-size: 14px; }
.auth-brand span { font-weight: 700; font-size: 16px; }

.auth-card h1 { font-size: 21px; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 6px; margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--secondary); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint);
}
.field .help { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field .errors { list-style: none; padding: 0; margin: 6px 0 0; }
.field .errors li { font-size: 12.5px; color: var(--danger); }
.form-errors { list-style: none; padding: 0; margin: 0 0 16px; }
.form-errors li {
  font-size: 13px; color: var(--danger); background: var(--danger-tint);
  border: 1px solid #F3C9C4; border-radius: var(--radius-sm); padding: 9px 12px;
}

.auth-foot { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 20px; }
.auth-foot a { color: var(--purple-dark); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

/* Login: toggle between phone/email tab (pure CSS radio-driven) */
.mode-toggle { display: flex; background: #F0EEF4; border-radius: 100px; padding: 3px; margin-bottom: 20px; }
.mode-toggle input { display: none; }
.mode-toggle label {
  flex: 1; text-align: center; padding: 8px 0; font-size: 13px; font-weight: 600;
  color: var(--muted); border-radius: 100px; cursor: pointer;
}
.mode-toggle input:checked + label { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Pending screen */
.status-banner {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--warning-tint); border: 1px solid #F0DFB0; color: var(--warning); margin-bottom: 22px;
}
.status-banner .ico { font-size: 20px; }
.status-banner strong { display: block; font-size: 14px; color: var(--ink); }
.status-banner span { font-size: 13px; }

.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.case-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.case-row .cid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; flex: 1; }
.case-row a.cid { color: var(--purple-dark); font-weight: 600; }
.case-row a.cid:hover { text-decoration: underline; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
}
.badge.pending { background: var(--warning-tint); color: var(--warning); }
.badge.approved { background: var(--success-tint); color: var(--success); }
.badge.rejected { background: var(--danger-tint); color: var(--danger); }

/* Dashboard shell (post-approval placeholder) */
.dash-topbar {
  height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  padding: 0 28px; gap: 16px; background: var(--surface);
}
.dash-topbar .spacer { flex: 1; }
.dash-user { font-size: 13.5px; color: var(--secondary); }
.dash-content { padding: 40px 28px; max-width: 900px; margin: 0 auto; }
.welcome-card {
  background: var(--purple-tint); border: 1px solid var(--purple-tint-2); border-radius: var(--radius-lg);
  padding: 30px 32px; margin-bottom: 24px;
}
.welcome-card h1 { font-size: 24px; }
.welcome-card p { color: var(--secondary); margin-top: 8px; font-size: 14.5px; }
.placeholder-card {
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 34px;
  text-align: center; color: var(--muted); font-size: 14px;
}
.empty-state { text-align: center; padding: 54px 20px; }
.empty-state .ico { font-size: 34px; margin-bottom: 12px; }
.empty-state h2 { font-size: 18px; }
.empty-state p { color: var(--muted); font-size: 14px; margin: 8px auto 20px; max-width: 380px; }

/* Onboarding wizard */
.wizard-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 26px; }
.wizard-step {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-2);
}
.wizard-step .dot {
  width: 22px; height: 22px; border-radius: 50%; background: #EFEDF2; color: var(--muted);
  display: grid; place-items: center; font-size: 11.5px;
}
.wizard-step.done .dot { background: var(--success); color: #fff; }
.wizard-step.active .dot { background: var(--purple); color: #fff; }
.wizard-step.active { color: var(--ink); }
.wizard-sep { width: 22px; height: 1px; background: var(--line-strong); }

.field.checkbox-field { display: flex; align-items: flex-start; gap: 10px; }
.field.checkbox-field input[type="checkbox"] { width: auto; margin-top: 3px; }
.field.checkbox-field label { margin-bottom: 0; font-weight: 500; color: var(--ink); font-size: 13.5px; }

.search-status { text-align: center; padding: 20px 0; }
.search-status .spinner {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 18px;
  border: 3px solid var(--purple-tint); border-top-color: var(--purple);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.search-status h1 { font-size: 18px; }
.search-status p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }

.candidate-group { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.candidate-head {
  background: #FAF8FE; padding: 11px 15px; font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.candidate-head .meta { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.case-option {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.case-option:last-child { border-bottom: none; }
.case-option:hover { background: #FAF8FE; }
.case-option input { margin-top: 3px; }
.case-option .cnum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; }
.case-option .csub { font-size: 12px; color: var(--muted); margin-top: 2px; }