/* ============================================================================
   DreamClear — Unauthenticated pages
   ----------------------------------------------------------------------------
   Sign in, password reset, expired password, two-factor challenge.

   These pages sit outside the AdminLTE shell, so this file carries their layout.
   Colour still comes entirely from the tokens — nothing here invents a value.
   ============================================================================ */

.dc-auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--dc-void);
  color: var(--dc-ink);
  font-family: var(--dc-font-sans);
}

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

@media (min-width: 992px) {
  .dc-auth {
    /* Brand panel is the smaller half — the form is what people came for. */
    grid-template-columns: 5fr 6fr;
  }
}

/* ============================================================================
   Brand panel
   ============================================================================ */
.dc-auth-brand {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--dc-surface);
  border-right: 1px solid var(--dc-line);
  padding: 3rem;
}

@media (min-width: 992px) {
  .dc-auth-brand {
    display: flex;
    align-items: center;
  }
}

/* The logo's own idea, scaled up: an origin point with light coming off it.
   Two soft radial washes rather than the literal gradient bar, which would be
   too loud at this size — the guide reserves the gradient for signature
   moments, and a full-height wall of it is not that. */
.dc-auth-brand::before {
  content: "";
  position: absolute;
  left: -18%;
  bottom: -22%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 123, 255, 0.20) 0%, transparent 68%);
  pointer-events: none;
}

.dc-auth-brand::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -18%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 59, 87, 0.10) 0%, transparent 68%);
  pointer-events: none;
}

.dc-auth-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 27rem;
}

.dc-auth-tagline {
  font-family: var(--dc-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--dc-ink);
  margin: 0 0 1.25rem;
}

.dc-auth-blurb {
  color: var(--dc-ink-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

.dc-auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}

.dc-auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.dc-auth-trust i {
  font-size: 0.875rem;
  color: var(--dc-blue);
}

/* ============================================================================
   Form panel
   ============================================================================ */
.dc-auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem 1.5rem;
}

.dc-auth-theme {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.dc-auth-card {
  width: 100%;
  max-width: 24rem;
  margin: auto 0;
}

.dc-auth-card h1 {
  font-family: var(--dc-font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
}

.dc-auth-subtitle {
  color: var(--dc-ink-2);
  font-size: 0.875rem;
  margin: 0 0 1.75rem;
}

/* ---- Fields ---- */
.dc-auth-field {
  margin-bottom: 1.125rem;
}

.dc-auth-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dc-ink);
  margin-bottom: 0.4375rem;
}

.dc-auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.dc-auth-label-row a {
  font-size: 0.75rem;
  color: var(--dc-blue);
  text-decoration: none;
}

.dc-auth-label-row a:hover {
  text-decoration: underline;
}

/* Password field with a reveal button inside it. */
.dc-auth-password {
  position: relative;
}

.dc-auth-password .form-control {
  padding-right: 2.75rem;
}

.dc-auth-reveal {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--dc-ink-3);
  border-radius: 6px;
  cursor: pointer;
}

.dc-auth-reveal:hover {
  color: var(--dc-ink);
  background: var(--dc-raised);
}

/* ---- Submit ----
   Blue, not red. Signing in is a routine daily act in an operations tool, not a
   conversion — the marketing site's red "Start free" is the conversion. Spending
   the accent here would spend it everywhere, every day, and the guide keeps red
   scarce precisely so it still means something when it appears. */
.dc-auth-submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* ---- Inline alert ---- */
.dc-auth-alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.8125rem 0.9375rem;
  border-radius: var(--dc-radius-btn);
  border: 1px solid var(--dc-line);
  border-left-width: 3px;
  background: var(--dc-raised);
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
}

.dc-auth-alert i {
  flex: none;
  margin-top: 0.125rem;
}

.dc-auth-alert p {
  margin: 0;
  color: var(--dc-ink-2);
}

.dc-auth-alert strong {
  display: block;
  color: var(--dc-ink);
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.dc-auth-alert-error   { border-left-color: var(--dc-error); }
.dc-auth-alert-error i { color: var(--dc-error); }

.dc-auth-alert-warning   { border-left-color: var(--dc-warning); }
.dc-auth-alert-warning i { color: var(--dc-warning); }

.dc-auth-alert-info   { border-left-color: var(--dc-blue); }
.dc-auth-alert-info i { color: var(--dc-blue); }

/* ---- Divider ---- */
.dc-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.5rem 0;
  color: var(--dc-ink-3);
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dc-auth-divider::before,
.dc-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dc-line);
}

/* ---- Footer ---- */
.dc-auth-footer {
  width: 100%;
  max-width: 24rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--dc-ink-3);
  padding-top: 2rem;
}

.dc-auth-footer-links {
  display: flex;
  gap: 1rem;
}

.dc-auth-footer a {
  color: var(--dc-ink-3);
  text-decoration: none;
}

.dc-auth-footer a:hover {
  color: var(--dc-ink-2);
}

.dc-auth-alt {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--dc-ink-2);
  margin: 1.5rem 0 0;
}

.dc-auth-alt a {
  color: var(--dc-blue);
  text-decoration: none;
  font-weight: 600;
}

.dc-auth-alt a:hover {
  text-decoration: underline;
}

/* ============================================================================
   Password strength + policy checklist
   ----------------------------------------------------------------------------
   Strength colours are the semantic ramp, not the brand accent. A weak password
   being red is the "error" job, not the "primary call to action" job — the two
   happen to share a hue and must not share a meaning.
   ============================================================================ */
.dc-strength {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.dc-strength-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--dc-line-strong);
  overflow: hidden;
}

.dc-strength-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width .18s ease, background-color .18s ease;
}

.dc-strength-0 { background: var(--dc-error); }
.dc-strength-1 { background: var(--dc-error); }
.dc-strength-2 { background: var(--dc-warning); }
.dc-strength-3 { background: var(--dc-blue); }
.dc-strength-4 { background: var(--dc-success); }

.dc-strength-label {
  font-family: var(--dc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 5.5rem;
  text-align: right;
  color: var(--dc-ink-3);
}

.dc-strength-text-0,
.dc-strength-text-1 { color: var(--dc-error); }
.dc-strength-text-2 { color: var(--dc-warning); }
.dc-strength-text-3 { color: var(--dc-blue); }
.dc-strength-text-4 { color: var(--dc-success); }

/* Policy checklist — the rules stated before they are broken. */
.dc-policy {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--dc-raised);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius-btn);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dc-policy li {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 0.78125rem;
  color: var(--dc-ink-2);
  transition: color .15s ease;
}

.dc-policy li i {
  font-size: 0.8125rem;
  color: var(--dc-ink-3);
  flex: none;
}

.dc-policy li.is-met {
  color: var(--dc-ink);
}

.dc-policy li.is-met i {
  color: var(--dc-success);
}