/* ============================================================
   Modernist auth pages theme (from the Claude Design redesign).
   Scoped entirely to #page-login / #page-forgot-password /
   #page-reset-password so no other page is affected. Reuses the
   shared --dm-* tokens declared once at :root in dda.css: flat
   surfaces, hairline dividers, sharp corners, one accent color,
   Archivo for headings. Pure visual/layout restyle — no markup
   behavior, ids or JS hooks are changed by this file.
   ============================================================ */

#page-login,
#page-forgot-password,
#page-reset-password {
  background: var(--dm-bg);
}

/* --- Shell: form panel centered in the full viewport (no side hero) --- */
#page-login .dm-auth-shell,
#page-forgot-password .dm-auth-shell,
#page-reset-password .dm-auth-shell {
  min-height: 100vh;
}

/* --- Form panel --- */
#page-login .auth-page,
#page-forgot-password .auth-page,
#page-reset-password .auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--dm-bg);
}

/* Brand mark inside the card — the only branding on the page now that
   there's no side hero panel. */
#page-login .auth-brand,
#page-forgot-password .auth-brand,
#page-reset-password .auth-brand {
  display: flex;
  color: var(--dm-ink);
}

/* --- Flat card surface, sharp corners, no shadow --- */
#page-login .card,
#page-forgot-password .card,
#page-reset-password .card {
  background: var(--dm-surface);
  border: 1px solid var(--dm-line);
  border-radius: 0;
  box-shadow: none;
  padding: 2rem;
}
#page-login .card-header,
#page-forgot-password .card-header,
#page-reset-password .card-header {
  border-bottom-color: var(--dm-line);
}
#page-login .card-header h3,
#page-forgot-password .card-header h3,
#page-reset-password .card-header h3 {
  font-family: var(--dm-font);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--dm-ink);
}

#page-login .auth-sub,
#page-forgot-password .auth-sub,
#page-reset-password .auth-sub {
  color: var(--dm-ink-muted);
}

/* --- Inputs: sharp corners, hairline border --- */
#page-login input[type="email"],
#page-login input[type="password"],
#page-login input[type="text"],
#page-login input[type="tel"],
#page-login select,
#page-forgot-password input[type="email"],
#page-reset-password input[type="password"] {
  background: var(--dm-bg);
  border: 1px solid var(--dm-line);
  border-radius: 0;
  color: var(--dm-ink);
}
#page-login input:focus,
#page-login select:focus,
#page-forgot-password input:focus,
#page-reset-password input:focus {
  border-color: var(--dm-accent);
  box-shadow: 0 0 0 3px var(--dm-accent-100);
}
#page-login .form-group label,
#page-forgot-password .form-group label,
#page-reset-password .form-group label {
  color: var(--dm-ink-muted);
}
#page-login .field-hint,
#page-reset-password .field-hint {
  color: var(--dm-ink-dim);
}

/* --- Phone input (country code + local number) --- */
#page-login .dda-phone-input {
  background: var(--dm-bg);
  border: 1px solid var(--dm-line);
  border-radius: 0;
}
#page-login .dda-phone-input:focus-within {
  border-color: var(--dm-accent);
  box-shadow: 0 0 0 3px var(--dm-accent-100);
}
#page-login .dda-phone-input .dda-country-select {
  border-right-color: var(--dm-line);
}

/* --- Sign-in method tabs (Password / Email OTP) --- */
#page-login .dda-auth-tabs {
  background: var(--dm-bg);
  border: 1px solid var(--dm-line);
  border-radius: 0;
}
#page-login .dda-auth-tab.is-active {
  background: var(--dm-surface);
  color: var(--dm-ink);
  box-shadow: none;
  border: 1px solid var(--dm-line);
}

/* --- OTP code input --- */
#page-login .dda-otp-input {
  background: var(--dm-bg);
  border: 1px solid var(--dm-line);
  border-radius: 0;
  color: var(--dm-ink);
}

/* --- Checkbox accent --- */
#page-login .checkbox-group input[type="checkbox"] {
  accent-color: var(--dm-accent);
}

/* --- Buttons: flat accent instead of the app-wide purple gradient --- */
#page-login .btn,
#page-forgot-password .btn,
#page-reset-password .btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#page-login .btn-primary,
#page-forgot-password .btn-primary,
#page-reset-password .btn-primary {
  background: var(--dm-accent);
}
#page-login .btn-primary:hover,
#page-forgot-password .btn-primary:hover,
#page-reset-password .btn-primary:hover {
  background: var(--dm-accent-hover);
  filter: none;
  box-shadow: none;
}
#page-login .btn-secondary,
#page-forgot-password .btn-secondary,
#page-reset-password .btn-secondary {
  background: transparent;
  border: 1px solid var(--dm-line);
  color: var(--dm-ink);
  border-radius: 0;
}
#page-login .btn-secondary:hover,
#page-forgot-password .btn-secondary:hover,
#page-reset-password .btn-secondary:hover {
  background: var(--dm-bg);
  border-color: var(--dm-line);
}

/* --- Links --- */
#page-login .auth-forgot-link,
#page-login .auth-toggle a,
#page-forgot-password .auth-toggle a,
#page-reset-password .auth-toggle a {
  color: var(--dm-accent);
}

/* --- Alerts: sharp corners --- */
#page-login .alert,
#page-forgot-password .alert,
#page-reset-password .alert {
  border-radius: 0;
}