/* ============================================================
   MizUp — Auth page visual polish
   Loaded only by layouts/auth.php (login, register, forgot/reset
   password, setup-account, change-password). Every selector here
   is scoped under .auth-shell, which is unique to this layout —
   so nothing here can ever reach the internal dashboard, which
   uses a completely different layout (layouts/app.php) and never
   renders an .auth-shell element. Functionality (form action,
   method, CSRF, validation) is untouched — visual only.
   ============================================================ */

.auth-shell { background: var(--paper); }

/* ---------- Brand panel: extra depth + a subtle grid texture ---------- */
.auth-shell .auth-brand-panel {
  background: radial-gradient(600px 420px at 15% 0%, rgba(230,61,46,.22), transparent 60%),
              radial-gradient(520px 460px at 100% 100%, rgba(46,111,230,.16), transparent 60%),
              var(--ink);
  position: relative;
}
.auth-shell .auth-brand-panel::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.auth-shell .auth-brand-logo, .auth-shell .auth-brand-mid, .auth-shell .auth-brand-trust, .auth-shell .auth-brand-back { position: relative; z-index: 1; }
.auth-shell .auth-brand-illustration { position: relative; z-index: 1; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.auth-shell .auth-brand-trust-item { padding: 10px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; }

/* ---------- Form panel: card treatment, better inputs, micro-interactions ---------- */
.auth-shell .auth-form-panel { background: radial-gradient(720px 420px at 100% 0%, rgba(230,61,46,.05), transparent 55%), var(--paper); }
.auth-shell .auth-form-inner {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 20px; padding: 34px 32px;
  box-shadow: var(--shadow-modal); max-width: 400px;
}
@media (max-width: 999px) { .auth-shell .auth-form-inner { border: none; box-shadow: none; padding: 0; background: transparent; } }

.auth-shell .auth-form-inner h1 { font-size: 23px; }
.auth-shell .auth-form-inner p.sub { margin-bottom: 26px; }

.auth-shell .auth-form-inner .form-group { margin-bottom: 18px; }
.auth-shell .auth-form-inner label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.auth-shell .auth-form-inner input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--hairline); border-radius: 10px; font-size: 14.5px;
  background: var(--white); transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-shell .auth-form-inner input:hover { border-color: var(--grey-light); }
.auth-shell .auth-form-inner input:focus {
  outline: none; border-color: var(--miz-red); box-shadow: 0 0 0 3.5px rgba(230,61,46,.12);
}
.auth-shell .auth-form-inner input:invalid:not(:placeholder-shown):not(:focus) { border-color: #E2A6A0; }

.auth-shell .auth-form-inner .btn { border-radius: 10px; font-size: 14.5px; font-weight: 700; padding: 12px 20px; letter-spacing: -0.005em; }
.auth-shell .auth-form-inner .btn-primary:active:not(:disabled) { transform: translateY(1px); }
.auth-shell .auth-form-inner .btn.is-loading { opacity: .75; pointer-events: none; }

.auth-shell .auth-form-inner .flash { border-radius: 11px; }

.auth-shell .auth-form-inner a { font-weight: 600; }
.auth-shell .auth-mobile-logo img { height: 30px; }
.auth-shell .auth-form-back { transition: color .15s ease; }

@media (prefers-reduced-motion: reduce) {
  .auth-shell .auth-form-inner { animation: none !important; }
}

/* ============================================================
   PRODUCT-AWARE SIGN-UP
   The brand panel now follows the product the visitor came for,
   so someone who clicked Get started on the CLM page is not
   read a pitch about attendance and payroll.
   ============================================================ */
/* app.css already paints .auth-brand-panel and .auth-brand-logo span at
   the same or higher specificity, so these are scoped one level deeper.
   Without that the panel kept the old red wash and the product tag came
   out MizUp red on every product - which is the exact bug this section
   exists to remove. */
.auth-page .auth-brand-panel {
  background:
    radial-gradient(760px 420px at 20% -10%, color-mix(in srgb, var(--auth-accent, #E63D2E) 34%, transparent), transparent 62%),
    radial-gradient(620px 460px at 95% 10%, color-mix(in srgb, var(--auth-accent-2, #FF7A5C) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--auth-bg-a, #0C0C14) 0%, var(--auth-bg-b, #15152B) 100%);
}

.auth-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.auth-page .auth-brand-logo img { height: 28px; width: auto; display: block; }
.auth-brand-logo:hover { text-decoration: none; }

.auth-brand-logo .auth-brand-tag {
  position: relative;
  padding-left: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--auth-accent-2, #FF7A5C) 75%, #fff);
  white-space: nowrap;
}
.auth-brand-logo .auth-brand-tag::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 14px;
  background: rgba(255, 255, 255, .28);
}

.auth-brand-product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 18px;
}
.auth-brand-product img { border-radius: 8px; display: block; }
.auth-brand-product strong { font-size: 13.5px; color: #fff; font-weight: 600; }

/* ------------------------------------------------------------
   PASSWORD REVEAL
   The toggle sits inside the field's own box so it lines up with
   the text rather than floating over the label, and the input
   gets right padding so a long password never runs under it.
   ------------------------------------------------------------ */
.auth-pw-wrap { position: relative; display: block; }
.auth-pw-wrap input { width: 100%; padding-right: 44px; }
.auth-pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
  color: var(--grey);
  cursor: pointer;
  border-radius: 7px;
  transition: color .14s ease, background .14s ease;
}
.auth-pw-toggle:hover { color: var(--ink); background: rgba(17, 17, 26, .06); }
.auth-pw-toggle.is-on { color: var(--auth-accent, #E63D2E); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--auth-accent, #E63D2E); outline-offset: 1px; }
/* The struck-through eye for the "visible" state, drawn rather than
   swapped for a second icon so there is only one SVG to keep. */
.auth-pw-toggle.is-on::after {
  content: "";
  position: absolute;
  left: 7px; right: 7px; top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}