/* ==========================================================================
   Authentication screens
   --------------------------------------------------------------------------
   Built on the console design system (console.css). Nothing here invents a
   colour or a radius : every value is a --cx-* token, so the sign-in screen
   moves with the panel it opens into instead of drifting away from it.

   The page is a split : a dark brand panel on the left, reusing the admin
   command-bar tokens, and the form on a light surface to the right. Below
   860px the brand panel folds to a slim header so the form keeps the fold.

   layouts/login.blade.php drops style.css and legacy.css but KEEPS bootstrap,
   because user/register.blade.php still lays its fields out on the .row /
   .col-md-6 grid. The "legacy bridge" at the foot re-skins the Bootstrap
   controls those untouched views emit, so register and remind inherit this
   look without being rewritten.
   ========================================================================== */

.cx-auth {
  /* No token overrides here. These screens used to re-point the accent at the
     brand blue because the panel behind them was amber ; console.css carries
     that palette on .cx--admin itself now, so the sign-in screen and the panel
     it opens into cannot drift apart. */
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* ---------- left : brand panel ------------------------------------------ */

.cx-auth__brand {
  position: relative;
  overflow: hidden;
  background: var(--cx-bar, #141a24);
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
}

/* Two soft accent washes rather than a photograph : the old screen pulled a
   1MB login.jpg for what is essentially a coloured field. */
.cx-auth__brand::before,
.cx-auth__brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
}
.cx-auth__brand::before {
  width: 460px; height: 460px; top: -170px; right: -140px;
  background: var(--cx-accent, #0a72fb);
}
.cx-auth__brand::after {
  width: 380px; height: 380px; bottom: -160px; left: -120px;
  background: #1f7a68;
}

.cx-auth__brandinner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

.cx-auth__logo { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.cx-auth__logo:hover { color: #fff; }
.cx-auth__logo img { max-height: 54px; width: auto; display: block; }
.cx-auth__logo b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.cx-auth__pitch { margin: auto 0; max-width: 430px; }
.cx-auth__pitch h2 {
  font-size: 31px; line-height: 1.22; font-weight: 700; letter-spacing: -.025em; margin: 0 0 14px;
}
.cx-auth__pitch p { color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; margin: 0; }

.cx-auth__points { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cx-auth__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255,255,255,.80); }
.cx-auth__points i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 10px; background: rgba(255,255,255,.12); color: #fff;
}

.cx-auth__foot { font-size: 12.5px; color: rgba(255,255,255,.42); }

/* ---------- right : form panel ------------------------------------------ */

.cx-auth__panel {
  background: var(--cx-surface, #fff);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}
.cx-auth__card { width: 100%; max-width: 396px; }

.cx-auth__head { margin-bottom: 26px; }
.cx-auth__head h1 { font-size: 25px; font-weight: 700; letter-spacing: -.022em; margin: 0 0 6px; color: var(--cx-ink); }
.cx-auth__head p  { margin: 0; font-size: 14px; color: var(--cx-ink-soft); }

/* the mark only shows once the brand panel has folded away */
.cx-auth__mark { display: none; margin-bottom: 22px; }
.cx-auth__mark img { max-height: 40px; width: auto; }

.cx-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.cx-auth__check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--cx-ink-soft); margin: 0; cursor: pointer; }
.cx-auth__link { font-size: 13.5px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; color: var(--cx-accent); }
.cx-auth__link:hover { color: var(--cx-accent-dark); text-decoration: underline; }

.cx .cx-auth__submit { width: 100%; padding: 11px 16px; font-size: 14px; }

.cx-auth__alt { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--cx-ink-soft); }

/* recaptcha is a fixed 304px iframe : let it shrink rather than overflow */
.cx-auth .g-recaptcha { transform-origin: 0 0; margin-bottom: 17px; }

/* ---------- the forgot-password pane ------------------------------------ */

/* Toggled by the inline script in user/login.blade.php ; it swaps this with
   #tab-sign-in so the two panes never show together. */
.cx-auth__back { margin-top: 18px; text-align: center; }

/* ---------- messages ---------------------------------------------------- */

/* postSignin answers the AJAX submit with raw text, so this box is empty and
   hidden until the script fills it. */
.cx-auth__msg { display: none; }

/* ---------- busy state -------------------------------------------------- */

/* legacy.css owned .ajaxLoading ; the inline script still calls show()/hide()
   on it, so the console keeps its own version of the spinner. */
.cx-auth .ajaxLoading {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(23,26,43,.32);
}
.cx-auth .ajaxLoading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: cx-auth-spin .7s linear infinite;
}
@keyframes cx-auth-spin { to { transform: rotate(360deg); } }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .cx-auth__brand { padding: 40px; }
  .cx-auth__pitch h2 { font-size: 27px; }
}

@media (max-width: 860px) {
  .cx-auth { grid-template-columns: 1fr; }
  /* The pitch is the first thing that should go on a phone : the form has to
     own the fold. The panel keeps only its bar so the page stays branded. */
  .cx-auth__brand { display: none; }
  .cx-auth__mark { display: block; }
  .cx-auth__panel { align-items: flex-start; padding: 40px 22px 56px; }
  .cx-auth__card { max-width: 430px; }
}

/* ==========================================================================
   Legacy bridge
   --------------------------------------------------------------------------
   register.blade.php and remind.blade.php still emit Bootstrap markup. These
   rules give those controls the console's shape without touching the views.
   Scoped to .cx-auth, so nothing leaks into the admin screens.
   ========================================================================== */

.cx-auth .form-group { margin-bottom: 17px; }

.cx-auth .form-control,
.cx-auth select.form-control {
  width: 100%; height: auto; padding: 10px 13px;
  font-size: 14px; font-family: inherit; line-height: 1.4; color: var(--cx-ink);
  background: var(--cx-surface); background-image: none;
  border: 1px solid var(--cx-line); border-radius: var(--cx-radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cx-auth .form-control:focus {
  outline: 0; border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px var(--cx-accent-wash);
}
.cx-auth .form-control::placeholder { color: var(--cx-ink-faint); }

.cx-auth .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--cx-radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none;
  box-shadow: none; transition: background .15s ease, border-color .15s ease;
}
.cx-auth .btn-primary,
.cx-auth .btn-info,
.cx-auth .btn-success { background: var(--cx-accent); border-color: var(--cx-accent); color: #fff; }
.cx-auth .btn-primary:hover,
.cx-auth .btn-info:hover,
.cx-auth .btn-success:hover { background: var(--cx-accent-dark); border-color: var(--cx-accent-dark); color: #fff; }
.cx-auth .btn-block { width: 100%; }
.cx-auth .btn-lg { padding: 12px 18px; font-size: 15px; }

/* Both views render this list unconditionally, so an empty one must not leave
   a bullet gap above the first field. */
.cx-auth .parsley-error-list { list-style: none; padding: 0; margin: 0; }
.cx-auth .parsley-error-list:not(:empty) {
  padding: 12px 15px; margin: 0 0 18px;
  border: 1px solid #f4cfcf; border-radius: var(--cx-radius-sm);
  background: var(--cx-bad-wash); color: #962929; font-size: 13.5px;
}
.cx-auth .parsley-error-list li + li { margin-top: 4px; }

.cx-auth .alert {
  padding: 12px 15px; margin-bottom: 18px; border: 1px solid transparent;
  border-radius: var(--cx-radius-sm); font-size: 13.5px;
}
.cx-auth .alert-success { background: var(--cx-ok-wash);  border-color: #c6ebdd; color: #0b6b52; }
.cx-auth .alert-danger  { background: var(--cx-bad-wash); border-color: #f4cfcf; color: #962929; }

/* remind.blade.php opens with its own app name / tagline block, sized for the
   old centred card. */
/* remind.blade.php links back to sign-in with Bootstrap's .text-primary blue */
.cx-auth a.text-primary { color: var(--cx-accent) !important; }
.cx-auth a.text-primary:hover { color: var(--cx-accent-dark) !important; }

.cx-auth h1.text-center { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.cx-auth h3.box-title { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.cx-auth hr { border: 0; border-top: 1px solid var(--cx-line); margin: 18px 0; }