/* Auth and error pages (templates/auth_base.html): one centred card, light and dark.
 * Needs tokens.css and button.css.
 *
 * These pages still load Bootstrap and responsive.css (layout.html), which paint a dark
 * starfield on body and style inputs, labels and headings with !important, so the
 * overrides here are scoped to body.ui-auth-page and use !important where they must win.
 */
body.ui-auth-page {
  background: var(--ui-bg) !important;
  color: var(--ui-text-primary) !important;
  font-family: var(--ui-font-body) !important;
  min-height: 100vh;
}
body.ui-auth-page::before,
body.ui-auth-page::after { content: none !important; display: none !important; }
body.ui-auth-page > .container { max-width: none !important; padding: 0 !important; text-align: left !important; }

.ui-auth {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ui-space-6) var(--ui-space-4) var(--ui-space-10);
}
.ui-auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  margin-bottom: clamp(24px, 8vh, 96px);
}
.ui-auth .ui-auth__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-text-primary) !important;
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-bold);
  text-decoration: none !important;
}
.ui-auth .ui-auth__brand span { color: inherit !important; }
.ui-auth .ui-auth__brand:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-md); }
.ui-auth .ui-auth__brand img { width: 32px; height: 32px; object-fit: contain; border-radius: var(--ui-radius-sm); }
/* the logo mark is dark ink: give it a light tile in dark mode (same as the app sidebar) */
:root[data-theme="dark"] .ui-auth .ui-auth__brand img { background: #FFFFFF; padding: 2px; box-sizing: border-box; }
.ui-auth .ui-theme-toggle { color: var(--ui-text-secondary) !important; }
/* responsive.css colors every link and span on light pages; buttons keep their own color */
.ui-auth .ui-btn, .ui-auth .ui-btn i { color: var(--_fg) !important; }
.ui-auth .ui-btn { font-family: var(--ui-font-body) !important; }
/* WTForms renders submit as <input>: drop the legacy input border */
.ui-auth input.ui-btn { border: 1px solid transparent !important; box-shadow: none; }
.ui-auth input.ui-btn:focus-visible { box-shadow: var(--ui-focus-ring) !important; }

.ui-auth__card {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: var(--ui-space-8);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-md);
  text-align: left;
}
.ui-auth__card--wide { max-width: 560px; }
.ui-auth .ui-auth__title {
  margin: 0 0 var(--ui-space-2) !important;
  font-family: var(--ui-font-display) !important;
  font-size: var(--ui-text-2xl) !important;
  font-weight: var(--ui-weight-bold) !important;
  line-height: var(--ui-leading-tight) !important;
  letter-spacing: -.02em;
  text-transform: none !important;
  color: var(--ui-text-primary) !important;
}
.ui-auth .ui-auth__lead {
  margin: 0 0 var(--ui-space-6) !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-text-base) !important;
  line-height: var(--ui-leading-normal);
}
.ui-auth .ui-auth__code {
  margin: 0 0 var(--ui-space-2);
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-bold);
  letter-spacing: .08em;
  color: var(--ui-text-muted) !important;
}

/* alerts (flash messages) */
.ui-auth .ui-alert {
  display: flex;
  gap: var(--ui-space-2);
  align-items: flex-start;
  margin: 0 0 var(--ui-space-4);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  background: var(--ui-primary-subtle);
  color: var(--ui-text-primary) !important;
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
}
.ui-auth .ui-alert span { color: inherit !important; }
.ui-auth .ui-alert i { margin-top: 3px; color: var(--ui-primary-text) !important; }

/* fields */
.ui-auth .ui-field { margin: 0 0 var(--ui-space-4); }
.ui-auth .ui-field label {
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--ui-text-primary) !important;
  font-size: var(--ui-text-sm) !important;
  font-weight: var(--ui-weight-semibold) !important;
  text-align: left !important;
}
.ui-auth .ui-input-wrap { position: relative; }
.ui-auth .ui-input {
  display: block;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--ui-control-lg) !important;
  margin: 0 !important;
  padding: 0 var(--ui-space-3) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  color: var(--ui-text-primary) !important;
  font-family: var(--ui-font-body) !important;
  font-size: var(--ui-text-md) !important;
}
.ui-auth .ui-input-wrap .ui-input { padding-right: 48px !important; }
.ui-auth .ui-input::placeholder { color: var(--ui-text-muted) !important; opacity: 1; }
.ui-auth .ui-input:hover { border-color: var(--ui-text-secondary) !important; }
.ui-auth .ui-input:focus { outline: none !important; border-color: var(--ui-focus) !important; box-shadow: 0 0 0 1px var(--ui-focus) !important; }
.ui-auth .ui-input[aria-invalid="true"] { border-color: var(--ui-danger-text) !important; }
.ui-auth .ui-input-wrap .ui-btn { position: absolute; top: 4px; right: 4px; color: var(--ui-text-secondary) !important; }
.ui-auth .ui-field__error {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: var(--ui-danger-text) !important;
  font-size: var(--ui-text-sm) !important;
}
.ui-auth .ui-field__error li { color: inherit !important; }

/* actions and links */
.ui-auth .ui-auth__submit { width: 100%; margin-top: var(--ui-space-2); }
.ui-auth .ui-auth__actions { display: grid; gap: var(--ui-space-3); margin-top: var(--ui-space-2); }
.ui-auth .ui-auth__actions .ui-btn { width: 100%; }
.ui-auth .ui-auth__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: var(--ui-space-5) 0 0 !important;
  font-size: var(--ui-text-sm);
}
.ui-auth a.ui-link {
  color: var(--ui-primary-text) !important;
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
}
.ui-auth a.ui-link:hover { text-decoration: underline; }
.ui-auth a.ui-link:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-sm); }
.ui-auth .ui-auth__list { margin: 0 0 var(--ui-space-6); padding-left: 1.2em; color: var(--ui-text-secondary) !important; font-size: var(--ui-text-sm); }
.ui-auth .ui-auth__list li { color: inherit !important; margin: 2px 0; }
.ui-auth .ui-auth__foot { margin-top: var(--ui-space-6); color: var(--ui-text-muted); font-size: var(--ui-text-sm); text-align: center; }
.ui-auth .ui-auth__foot * { color: inherit; }