/* Shared styles for the sign-in, sign-up and verification pages.
   Values mirror the Quick Tender login (tenderai.4sd.app/login).
   Fonts come from css/fonts.css (loaded by partials/brand_head.html). */
:root {
  --navy: #0027a6;
  --navy-hover: #001a73;
  --blue-mid: #0441cb;
  --dark: #030404;
  --ink: #1d2433;
  --muted: #657084;
  --border: #d9dee7;
  --border-hover: #94a3b8;
  --ring: rgba(0, 39, 166, 0.18);
  --shadow: 0 24px 60px rgba(3, 4, 4, 0.32);

  --danger-color: #dc2626;
  --orange-color: #ea580c;
  --warning-color: #d97706;
  --info-color: #2563eb;
  --success-color: #0027a6;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1 { margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: #0f172a;
}

/* ---------- Layout ---------- */
.auth-split {
  display: flex;
  min-height: 100vh;
  background-color: var(--navy);
  background-image: linear-gradient(180deg, #eaf5ff 0%, #1aa5fd 30%, #156cd4 52%, #0027a6 76%, #030404 100%);
}

/* ---------- Hero (left, desktop only) ---------- */
.auth-hero {
  display: none;
}

.hero-grid {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  font-size: 5.41vw;
}

.hero-logo {
  align-self: start;
  justify-self: start;
  width: 190px;
  height: auto;
  margin: 40px 0 24px 0.0684em;
}

.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--dark);
}

.hero-tagline span { display: block; }

.hero-tagline .accent {
  width: fit-content;
  font-weight: 700;
  color: var(--blue-mid);
  background: linear-gradient(90deg, #021798, #066dfc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 1024px) {
  .auth-split {
    background-image: linear-gradient(60deg, #ffffff 0%, #eef7ff 30%, #cfeafe 46%, #1aa5fd 66%, #156cd4 78%, #0027a6 90%, #030404 100%);
  }

  .auth-hero {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    flex: 0 0 55%;
    min-width: 0;
    height: 100vh;
  }
}

/* ---------- Auth panel (right) ---------- */
.auth-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 20px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 32px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: #ffffff;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.auth-footer {
  margin-top: 16px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Card brand lockup ---------- */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 24px;
}

.auth-brand img { display: block; height: 44px; width: auto; }

.auth-brand-divider {
  align-self: stretch;
  width: 1px;
  background: var(--dark);
}

.auth-brand-text {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

.auth-brand-text .brand-dark {
  display: block;
  font-size: 21px;
  color: var(--dark);
}

.auth-brand-text .brand-grad {
  display: block;
  margin-top: 2px;
  font-size: 29px;
  white-space: nowrap;
  color: #021798;
  background: linear-gradient(90deg, #021798, #066ffe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Headings (sign up / verify) ---------- */
.auth-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.auth-subtitle {
  margin-top: 8px;
  text-wrap: balance;
  font-size: 14px;
  color: var(--muted);
}

.auth-title ~ .auth-form { margin-top: 22px; }

/* ---------- Form ---------- */
.auth-form { text-align: left; }

.field { margin-bottom: 16px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; min-width: 0; }

.field-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: border-color .2s, box-shadow .2s;
}

.field-input::placeholder { color: #94a3b8; }
.field-input:hover { border-color: var(--border-hover); }
.field-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--ring);
}

.field-input--code { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; text-align: center; }

.field-hint { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--danger-color); }

.password-wrapper { position: relative; }
.password-wrapper .field-input { padding-right: 44px; }

.toggle-password {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.toggle-password:hover { color: var(--navy); }
.toggle-password .eye-off { display: none; }
.toggle-password.is-visible .eye { display: none; }
.toggle-password.is-visible .eye-off { display: inline-block; }

.text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color .2s;
}

.text-link:hover { color: var(--navy-hover); text-decoration: underline; }

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: var(--navy);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(3, 4, 4, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background-color .2s;
}

.btn-primary:hover { background: var(--navy-hover); }

.btn-primary:focus-visible,
.text-link:focus-visible,
.toggle-password:focus-visible,
.checkbox input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.auth-switch {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Alerts ---------- */
.alert { padding: 10px 14px; border-radius: 7px; font-size: 14px; margin-bottom: 16px; text-align: left; }
.alert-danger, .alert-error { background: #fdecec; color: #a61b1b; }
.alert-success { background: #e7f6ec; color: #17663a; }
.alert-info, .alert-debug { background: #e8f1fd; color: #0a3a8a; }
.alert-warning { background: #fff4dd; color: #8a5a00; }

/* ---------- Password strength (sign up) ---------- */
.password-strength-indicator { display: none; margin-top: 8px; }
.strength-track { height: 4px; border-radius: 999px; background: #e3e8ef; overflow: hidden; }
.strength-bar { height: 100%; width: 0; border-radius: 999px; transition: width .2s, background-color .2s; }
.strength-text { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  .auth-main { justify-content: flex-start; padding-top: 20px; }
  .auth-card { padding: 24px 20px; }
  .field-row { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }