/* =========================================================================
   COMVA — Login redesign ("Risk Spectrum")
   Self-contained, scoped under .auth-page so it overrides admin.min.css.
   Brand spectrum: red -> orange -> yellow -> green (the risk heat-map ramp).
   ========================================================================= */

.auth-page {
  --spec-red:    #e1251b;
  --spec-orange: #f47b20;
  --spec-yellow: #ffce00;
  --spec-lime:   #7ab51d;
  --spec-green:  #0f7a34;

  --ink:       #1c2530;
  --ink-soft:  #5b6776;
  --line:      #e6eaf0;
  --surface:   #ffffff;
  --panel-dark:#0e1622;

  --spectrum: linear-gradient(120deg,
      var(--spec-red) 0%,
      var(--spec-orange) 28%,
      var(--spec-yellow) 52%,
      var(--spec-lime) 76%,
      var(--spec-green) 100%);

  --radius: 22px;
  --shadow: 0 30px 80px -28px rgba(14, 22, 34, .45);

  font-family: "Raleway", "Segoe UI", system-ui, sans-serif;
}

/* Reset the legacy AdminLTE auth chrome */
.auth-page,
.auth-page #app {
  min-height: 100vh;
  margin: 0;
  background: #f3f5f9;
  color: var(--ink);
}

.auth-page #app {
  /* the legacy .auth-page body is display:flex; make #app fill it so the
     shell's width/max-width resolves consistently instead of shrink-wrapping */
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

/* ----------------------------------------------------------------- shell */
.login-shell {
  width: 100%;
  max-width: 1040px;
  display: grid;
  /* minmax(0,…) pins the split so content (e.g. reCAPTCHA) can't widen a column */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: shell-in .8s cubic-bezier(.18, .9, .25, 1) both;
}

@keyframes shell-in {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ brand side */
.brand-panel {
  position: relative;
  overflow: hidden;
  padding: 56px 48px;
  color: #fff;
  background: radial-gradient(140% 120% at 0% 0%, #122036 0%, #0b1422 55%, #060b13 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  min-width: 0; /* keep the grid ratio independent of content width */
  /* mouse-interaction state (updated by auth-ui.js) */
  --px: 0;
  --py: 0;
  --mx: 50%;
  --my: 50%;
  perspective: 1000px;
}

/* cursor spotlight */
.brand-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .12), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease, background .1s linear;
}
.brand-panel:hover .brand-glow { opacity: 1; }

/* drifting spectrum aurora */
.brand-panel::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(34% 34% at 18% 24%, rgba(225, 37, 27, .55), transparent 72%),
    radial-gradient(30% 30% at 82% 16%, rgba(244, 123, 32, .45), transparent 72%),
    radial-gradient(38% 38% at 84% 82%, rgba(15, 122, 52, .55), transparent 72%),
    radial-gradient(30% 30% at 16% 84%, rgba(255, 206, 0, .35), transparent 72%);
  filter: blur(30px) saturate(130%);
  opacity: .85;
  animation: aurora 18s ease-in-out infinite alternate;
  /* parallax (composes with the keyframe transform) */
  translate: calc(var(--px) * -26px) calc(var(--py) * -26px);
  transition: translate .4s ease-out;
}

@keyframes aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, -4%) rotate(6deg) scale(1.08); }
  100% { transform: translate(-3%, 4%) rotate(-5deg) scale(1.05); }
}

/* fine grid overlay -> "risk matrix" texture */
.brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(120% 120% at 70% 30%, #000 35%, transparent 80%);
  opacity: .6;
}

/* floating glass orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
  opacity: .9;
  animation: float 12s ease-in-out infinite;
  transition: translate .5s ease-out;
}
.orb-1 { width: 120px; height: 120px; top: 12%;  right: -28px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(244,123,32,.35)); animation-duration: 14s; translate: calc(var(--px) * 30px) calc(var(--py) * 30px); }
.orb-2 { width: 70px;  height: 70px;  bottom: 22%; right: 18%;  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(15,122,52,.4));  animation-duration: 10s; animation-delay: -3s; translate: calc(var(--px) * -22px) calc(var(--py) * 20px); }
.orb-3 { width: 46px;  height: 46px;  top: 44%;   left: 12%;   background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,206,0,.45)); animation-duration: 9s;  animation-delay: -5s; translate: calc(var(--px) * 18px) calc(var(--py) * -24px); }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-22px) translateX(8px); }
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
  animation: badge-float 6s ease-in-out infinite;
  /* 3D tilt toward cursor (translate handles the float, transform the tilt) */
  transform: rotateY(calc(var(--px) * 16deg)) rotateX(calc(var(--py) * -16deg));
  transition: transform .2s ease-out;
  transform-style: preserve-3d;
}
.brand-badge img { width: 48px; height: auto; }

@keyframes badge-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.brand-content {
  transform: translate(calc(var(--px) * 7px), calc(var(--py) * 7px));
  transition: transform .35s ease-out;
}

.brand-content h1 {
  margin: 26px 0 14px;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.5px;
}
.brand-content h1 .spec-text {
  background: var(--spectrum);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spec-pan 6s linear infinite;
}
@keyframes spec-pan {
  to { background-position: 200% center; }
}

.brand-content p {
  max-width: 36ch;
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  line-height: 1.65;
}

.brand-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.brand-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, .9);
}
.brand-points li .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}
.brand-points li:nth-child(1) .dot { background: var(--spec-red); }
.brand-points li:nth-child(2) .dot { background: var(--spec-orange); }
.brand-points li:nth-child(3) .dot { background: var(--spec-yellow); }
.brand-points li:nth-child(4) .dot { background: var(--spec-lime); }
.brand-points li:nth-child(5) .dot { background: var(--spec-green); }

.brand-foot {
  margin-top: 34px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------- form side */
.form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 52px;
  min-width: 0; /* keep the grid ratio independent of content (e.g. reCAPTCHA) */
}
.form-inner {
  width: 100%;
  max-width: 360px;
}

.form-inner > * {
  animation: rise .7s cubic-bezier(.2, .8, .25, 1) both;
}
.form-inner > *:nth-child(1) { animation-delay: .10s; }
.form-inner > *:nth-child(2) { animation-delay: .18s; }
.form-inner > *:nth-child(3) { animation-delay: .26s; }
.form-inner > *:nth-child(4) { animation-delay: .34s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.form-logo-mobile { display: none; }

.form-head h2 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ink);
}
.form-head p {
  margin: 0 0 30px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* alert */
.auth-page .alert {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 20px;
}
.auth-page .alert-success { background: #e7f6ec; color: #0f7a34; }
.auth-page .alert-danger  { background: #fdeceb; color: #c0231a; }

/* ----------------------------------------------------- floating inputs */
.auth-page .wrap-input {
  position: relative;
  margin: 0 0 22px;
  border-bottom: 0; /* kill legacy admin.min.css underline */
}
/* neutralise the legacy animated underline pseudo-element */
.auth-page .wrap-input .focus-input::before {
  display: none;
  content: none;
}

/* spectrum gradient ring — drawn as an overlay so it renders identically on
   every field regardless of autofill / input background quirks */
.auth-page .wrap-input::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: var(--spectrum);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
}
.auth-page .wrap-input:focus-within::after { opacity: 1; }

.auth-page .wrap-input .input {
  width: 100%;
  height: 56px;
  padding: 22px 16px 8px;
  font-size: 15px;
  color: var(--ink);
  background: #f7f8fb;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: none;
  box-shadow: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.auth-page .wrap-input .input:focus {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(244, 123, 32, .14);
}

/* Chrome autofill: mask the lavender highlight, keep our look */
.auth-page .wrap-input .input:-webkit-autofill,
.auth-page .wrap-input .input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #f7f8fb inset;
  transition: background-color 99999s ease-in-out 0s;
}
.auth-page .wrap-input .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 4px rgba(244, 123, 32, .14), 0 0 0 1000px #fff inset;
}

/* floating label (the legacy focus-input span) */
.auth-page .wrap-input .focus-input {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.auth-page .wrap-input .focus-input::after {
  content: attr(data-placeholder);
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: 15px;
  color: var(--ink-soft);
  text-transform: capitalize;
  transition: transform .2s ease, color .2s ease, font-size .2s ease;
  transform-origin: left center;
}
.auth-page .wrap-input .input:focus + .focus-input::after,
.auth-page .wrap-input .input.has-val + .focus-input::after {
  transform: translateY(-12px) scale(.78);
  color: var(--spec-orange);
}

/* password show / hide toggle */
.auth-page .pw-toggle {
  position: absolute;
  top: 0;
  right: 6px;
  height: 56px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  z-index: 2;
  transition: color .2s;
}
.auth-page .pw-toggle:hover { color: var(--spec-orange); }

/* validation */
.auth-page .has-error .input { border-color: var(--spec-red); background: #fff6f5; }
.auth-page .help-block {
  display: block;
  margin: 6px 2px 0;
  font-size: 12.5px;
  color: var(--spec-red);
}

.auth-page .recaptcha {
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------- button */
.auth-page .btn-primary,
.auth-page .btn-primary.btn-flat {
  position: relative;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: var(--spectrum);
  background-size: 200% auto;
  box-shadow: 0 16px 30px -12px rgba(225, 37, 27, .5);
  transition: transform .2s, box-shadow .25s, background-position .5s;
}
.auth-page .btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 22px 38px -12px rgba(15, 122, 52, .55);
}
.auth-page .btn-primary:active { transform: translateY(0); }

/* sheen sweep */
.auth-page .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.auth-page .btn-primary:hover::after { left: 130%; }

.auth-page .btn-forgot {
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none !important;
  transition: color .2s;
}
.auth-page .btn-forgot:hover { color: var(--spec-orange); }

.auth-page .back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none !important;
  transition: color .2s, gap .2s;
}
.auth-page .back-link i { font-size: 12px; }
.auth-page .back-link:hover { color: var(--spec-orange); gap: 12px; }

/* legacy bootstrap row reset inside the form */
.auth-page .form-horizontal .row { margin: 0; }
.auth-page .form-horizontal .col-xs-12 { padding: 0; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; max-width: 440px; }
  .brand-panel { display: none; }
  .form-panel { padding: 44px 30px; }
  .form-logo-mobile {
    display: block;
    width: 120px;
    margin: 0 auto 26px;
  }
  .form-head { text-align: center; }
}

@media (max-width: 480px) {
  .auth-page #app { padding: 14px; }
  .form-panel { padding: 36px 22px; }
}

/* ------------------------------------------------- reduced motion a11y */
@media (prefers-reduced-motion: reduce) {
  .auth-page * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}