/* ==========================================================================
   Healto - login, signup and the onboarding wizard
   --------------------------------------------------------------------------
   Standalone: these screens are shown before a hospital reaches the panel, so
   they deliberately do not load the admin theme. Everything here is scoped to
   .auth-* or .ob-* and cannot leak into the dashboard.
   ========================================================================== */

:root {
  --ha-bg: #f4f6fa;
  --ha-surface: #ffffff;
  --ha-text: #1b1f27;
  --ha-text-2: #4b5563;
  --ha-text-3: #8a93a3;
  --ha-border: #e3e7ee;
  --ha-primary: #0d6efd;
  --ha-primary-dark: #0b5ed7;
  --ha-ok: #12a150;
  --ha-bad: #d92c2c;
  --ha-radius: 14px;
  --ha-shadow: 0 10px 34px rgba(20, 26, 44, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

body.auth-body,
body.ob-body {
  margin: 0;
  min-height: 100vh;
  background: var(--ha-bg);
  color: var(--ha-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Shared form controls
   ========================================================================== */

.ha-field { margin-bottom: 16px; }

.ha-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ha-text);
  margin-bottom: 6px;
}

.ha-label .opt { font-weight: 500; color: var(--ha-text-3); }

.ha-input,
.ha-select,
.ha-textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--ha-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ha-text);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ha-textarea { min-height: 96px; resize: vertical; }

.ha-input:focus,
.ha-select:focus,
.ha-textarea:focus {
  outline: none;
  border-color: var(--ha-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.14);
}

.ha-input.is-bad { border-color: var(--ha-bad); }

.ha-hint { font-size: 12.5px; color: var(--ha-text-3); margin-top: 5px; }
.ha-err  { font-size: 12.5px; color: var(--ha-bad); margin-top: 5px; }

.ha-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 575.98px) {
  .ha-row { grid-template-columns: 1fr; gap: 0; }
}

/* Password field with a reveal toggle */
.ha-pass { position: relative; }
.ha-pass .ha-input { padding-right: 44px; }
.ha-pass button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 7px;
  cursor: pointer;
  color: var(--ha-text-3);
  display: flex;
  border-radius: 7px;
}
.ha-pass button:hover { color: var(--ha-text); background: #f1f3f7; }

/* Buttons */
.ha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

.ha-btn:active { transform: translateY(1px); }

.ha-btn-primary { background: var(--ha-primary); color: #fff; }
.ha-btn-primary:hover { background: var(--ha-primary-dark); }
.ha-btn-primary:disabled { background: #a9c7f7; cursor: not-allowed; }

.ha-btn-line {
  background: #fff;
  border-color: var(--ha-border);
  color: var(--ha-text);
}
.ha-btn-line:hover { border-color: #cbd2dd; background: #fafbfd; }

.ha-btn-ghost {
  background: none;
  color: var(--ha-primary);
  padding: 8px 10px;
}
.ha-btn-ghost:hover { background: rgba(13, 110, 253, .08); }

.ha-btn-block { width: 100%; }

/* Checkbox line */
.ha-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ha-text-2);
  margin-bottom: 16px;
}
.ha-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ha-primary);
  flex: 0 0 17px;
}
.ha-check a { color: var(--ha-primary); font-weight: 600; }

/* Alerts */
.ob-alert, .auth-alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.ob-alert ul, .auth-alert ul { margin: 0; padding-left: 18px; }
.ob-alert.is-ok, .auth-alert.is-ok {
  background: #eaf7ef; border: 1px solid #cdebd8; color: #216c40;
}
.ob-alert.is-bad, .auth-alert.is-bad {
  background: #fdf0f0; border: 1px solid #f5d3d3; color: #a52c2c;
}
.ob-alert.is-info, .auth-alert.is-info {
  background: #eaf2ff; border: 1px solid #cfe0fb; color: #17529c;
}

/* ==========================================================================
   Login / signup - split layout
   ========================================================================== */

.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.auth-aside {
  background: linear-gradient(155deg, #0b2a5b 0%, #123f86 45%, #1d5fc4 100%);
  color: #fff;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Soft light behind the copy; purely decorative */
.auth-aside::after {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  right: -170px;
  bottom: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  pointer-events: none;
}

.auth-aside > * { position: relative; z-index: 1; }

.auth-aside .brand img { height: 34px; filter: brightness(0) invert(1); }

.auth-aside h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 0 0 14px;
}

.auth-aside p {
  color: rgba(255,255,255,.82);
  font-size: 15px;
  margin: 0;
  max-width: 42ch;
}

.auth-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.auth-points li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: rgba(255,255,255,.9);
}
.auth-points svg { flex: none; margin-top: 3px; color: #7ee2a8; }

.auth-foot { font-size: 13px; color: rgba(255,255,255,.62); }

.auth-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth-card {
  width: 100%;
  max-width: 424px;
}

.auth-card .mobile-brand { display: none; margin-bottom: 24px; }
.auth-card .mobile-brand img { height: 32px; }

.auth-card h2 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

.auth-card .sub {
  color: var(--ha-text-3);
  font-size: 14.5px;
  margin: 0 0 26px;
}

.auth-alt {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--ha-text-2);
}
.auth-alt a { color: var(--ha-primary); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  /* The marketing panel is the first thing to go on a phone - the form is
     what the visitor came for. */
  .auth-aside { display: none; }
  .auth-card .mobile-brand { display: block; }
  .auth-side { align-items: flex-start; padding-top: 42px; }
}

/* ==========================================================================
   Onboarding wizard
   ========================================================================== */

.ob-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  background: #fff;
  border-bottom: 1px solid var(--ha-border);
}

.ob-logo img { height: 30px; display: block; }

.ob-signout {
  border: 1.5px solid var(--ha-border);
  background: #fff;
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ha-text-2);
  cursor: pointer;
}
.ob-signout:hover { border-color: #cbd2dd; color: var(--ha-text); }

.ob-main { padding: 34px 18px 60px; }

.ob-shell {
  max-width: 760px;
  margin: 0 auto;
}

/* Progress rail */
.ob-steps { margin-bottom: 26px; }

.ob-steps ol {
  list-style: none;
  display: flex;
  margin: 0 0 14px;
  padding: 0;
  gap: 6px;
}

.ob-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  min-width: 0;
}

.ob-step-dot {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  background: #e6e9ef;
  color: var(--ha-text-3);
  flex: none;
}

.ob-step-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ha-text-3);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ob-step.is-done .ob-step-dot { background: var(--ha-ok); color: #fff; }
.ob-step.is-done .ob-step-label { color: var(--ha-text-2); }
.ob-step.is-now .ob-step-dot { background: var(--ha-primary); color: #fff; }
.ob-step.is-now .ob-step-label { color: var(--ha-primary); }

.ob-progress {
  height: 4px;
  background: #e6e9ef;
  border-radius: 4px;
  overflow: hidden;
}
.ob-progress span {
  display: block;
  height: 100%;
  background: var(--ha-primary);
  border-radius: 4px;
  transition: width .3s ease;
}

/* Panel */
.ob-panel {
  background: var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius);
  box-shadow: var(--ha-shadow);
  padding: 30px 32px 32px;
}

.ob-panel h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 7px;
}

.ob-panel .ob-lead {
  color: var(--ha-text-2);
  font-size: 14.5px;
  margin: 0 0 26px;
}

.ob-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
}

.ob-actions .spacer { margin-left: auto; }

/* OTP input group */
.otp-inputs {
  display: flex;
  gap: 9px;
  margin-bottom: 6px;
}

.otp-inputs input {
  width: 100%;
  max-width: 56px;
  aspect-ratio: 1 / 1.15;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border: 1.5px solid var(--ha-border);
  border-radius: 11px;
  font-family: inherit;
  color: var(--ha-text);
}

.otp-inputs input:focus {
  outline: none;
  border-color: var(--ha-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .14);
}

.otp-target {
  background: #f6f8fb;
  border: 1px solid var(--ha-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.otp-target .num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Document upload */
.doc-list { display: grid; gap: 12px; }

.doc-item {
  border: 1.5px solid var(--ha-border);
  border-radius: 12px;
  padding: 15px 16px;
}

.doc-item.is-approved { border-color: #cdebd8; background: #fbfefc; }
.doc-item.is-rejected { border-color: #f5d3d3; background: #fffbfb; }

.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.doc-name { font-weight: 650; font-size: 14.5px; }
.doc-hint { font-size: 12.5px; color: var(--ha-text-3); margin-top: 2px; }

.doc-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.doc-pill.req  { background: #fff3e0; color: #b26a00; }
.doc-pill.opt  { background: #eef0f4; color: #6b7280; }
.doc-pill.ok   { background: #e6f7ee; color: #17734a; }
.doc-pill.bad  { background: #fdeaea; color: #b03636; }
.doc-pill.wait { background: #fff6e0; color: #9a6a00; }

.doc-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 11px;
  background: #f6f8fb;
  border-radius: 9px;
  font-size: 13px;
  flex-wrap: wrap;
}
.doc-file .fname { font-weight: 600; overflow-wrap: anywhere; }
.doc-file .fmeta { color: var(--ha-text-3); }

.doc-drop { margin-top: 12px; }

.doc-drop input[type="file"] {
  font-size: 13px;
  width: 100%;
  max-width: 100%;
}

/* Review / pending state */
.ob-status-card {
  text-align: center;
  padding: 12px 0 4px;
}

.ob-status-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.ob-status-icon.wait { background: #fff4e0; color: #d18700; }
.ob-status-icon.bad  { background: #fdeaea; color: var(--ha-bad); }

@media (max-width: 767.98px) {
  .ob-panel { padding: 22px 18px 24px; }
  .ob-step-label { display: none; }
  .ob-steps ol { justify-content: space-between; gap: 4px; }
  .ob-actions { flex-direction: column-reverse; align-items: stretch; }
  .ob-actions .ha-btn { width: 100%; }
  .ob-actions .spacer { margin-left: 0; }
  .otp-inputs input { max-width: none; font-size: 19px; }
}