/* =============================================================
   NEXSYS — Login Page
   File: overrides.login.css
   Style: Split panel — white left, teal gradient right
   Version: 7.1  (bug-fix: pointer-events, stacking context, overflow)
   Note: Requires structure.pdt patch (login_structure_patch.txt)
   which adds nx-title-col / nx-panel-col classes via JS.
============================================================= */

/* ─────────────────────────────────────────────────────────────
   HIDE NAVBAR + FOOTER
───────────────────────────────────────────────────────────── */
nav.navbar,
.nexsys-footer,
footer {
  display: none !important;
}

.nx-login-above {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   HIDE BLESTA TITLE COLUMN + BREADCRUMB
───────────────────────────────────────────────────────────── */
.nx-title-col {
  display: none !important;
}

.breadcrumb,
ol.breadcrumb,
ul.breadcrumb {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   FULL SCREEN SPLIT BACKGROUND

   BUG FIX #1 — overflow-x: hidden removed from <html>.
   Setting overflow on the root element hands scroll-container
   duties to the viewport, which breaks fixed-position
   hit-testing in Webkit/Blink. Safe only on <body>.
───────────────────────────────────────────────────────────── */
html {
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  /* overflow-x intentionally NOT set on html */
}

body {
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;           /* safe on body only */
  background:
    linear-gradient(to right,
      #ffffff 0%,
      #ffffff 42%,
      #1a7a96 42%,
      #0a3550 100%
    ) !important;
}

/* ─────────────────────────────────────────────────────────────
   RESET CONTAINER
───────────────────────────────────────────────────────────── */
.container-md,
.container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
}

.container-md > .row,
.container > .row {
  margin: 0 !important;
  min-height: 100vh !important;
}

/* ─────────────────────────────────────────────────────────────
   LEFT SIDE DECORATIONS

   BUG FIX #2 — z-index removed from .nx-panel-col.
   A position:fixed element WITH an explicit z-index creates a
   new CSS stacking context.  Because .panel.panel-blesta is a
   DOM child of .nx-panel-col (added by the JS), its own
   z-index:20 only existed *inside* the parent stacking context.
   Globally the whole panel group was capped at z-index:2.
   Removing z-index from the parent dissolves the stacking
   context so the panel's z-index:999 now competes globally.
───────────────────────────────────────────────────────────── */
.nx-panel-col {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 42% !important;
  height: 100vh !important;
  /* z-index intentionally omitted — see Bug Fix #2 */
  background-image: radial-gradient(circle, rgba(57,148,168,.15) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  pointer-events: none !important;
}

.nx-panel-col::before,
.nx-panel-col::after {
  display: none !important;
}

/* Decorative teal blob */
body::after {
  content: "";
  display: block;
  position: fixed;
  top: -120px;
  left: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,148,168,.13) 0%, transparent 68%);
  z-index: 1;
  pointer-events: none;
}

/* Logo — desktop */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 36px;
  left: 48px;
  width: 200px;
  height: 66px;
  background: url('../images/logo.svg') no-repeat left center;
  background-size: contain;
  z-index: 10;
  pointer-events: none;
}

/* Back to portal link */
.nx-back-link {
  position: fixed !important;
  top: 114px;
  left: 48px;
  font-size: 12px;
  font-weight: 700;
  color: #2a7a92 !important;
  letter-spacing: .04em;
  z-index: 20;
  text-decoration: none !important;
  display: block !important;
  pointer-events: auto !important;  /* explicit — never inherits none from siblings */
}

.nx-back-link:hover {
  color: #3994A8 !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────
   WELCOME BLOCK — left side, vertically centered
───────────────────────────────────────────────────────────── */
.nx-login-welcome {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 42% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 52px !important;
  z-index: 10;
  pointer-events: none;
  box-sizing: border-box;
}

.nx-login-welcome::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3994A8, #2a7a92);
  margin-bottom: 22px;
  flex-shrink: 0;
}

.nx-login-welcome h2 {
  font-size: 40px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 0 18px !important;
  display: block !important;
  position: static !important;
}

.nx-login-welcome p {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(15,23,42,.55) !important;
  line-height: 1.7 !important;
  margin: 0 0 32px !important;
  max-width: 300px;
  display: block !important;
  position: static !important;
}

.nx-login-badges {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
}

.nx-login-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(57,148,168,.08);
  border: 1px solid rgba(57,148,168,.20);
  font-size: 11px;
  font-weight: 700;
  color: #2a7a92;
  letter-spacing: .03em;
}

/* ─────────────────────────────────────────────────────────────
   FORM PANEL — fixed, centered on right half

   BUG FIX #3 — z-index raised to 999 + explicit pointer-events.
   With Bug Fix #2 applied, the panel's z-index now competes at
   the global level.  999 ensures it beats any Blesta-generated
   elements.  pointer-events: auto is written explicitly so it
   cannot be overridden by the parent's pointer-events: none
   via any browser quirk.
───────────────────────────────────────────────────────────── */
.panel.panel-blesta {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 42% !important;
  right: 0 !important;
  margin: auto !important;
  width: 400px !important;
  height: -webkit-fit-content !important;
  height: fit-content !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.28) !important;
  background: #ffffff !important;
  z-index: 999 !important;            /* raised — now a global z-index */
  pointer-events: auto !important;    /* explicit — overrides any cascade */
  transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   PANEL BODY
───────────────────────────────────────────────────────────── */
.panel-body {
  padding: 36px 32px 20px !important;
  pointer-events: auto !important;
}

.panel-body::before {
  content: "SIGN IN";
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  text-align: center;
}

.panel-body fieldset::before {
  content: "TO ACCESS THE PORTAL";
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(15,23,42,.45);
  letter-spacing: .14em;
  text-align: center;
  margin-bottom: 24px;
  padding-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   CAPTCHA
───────────────────────────────────────────────────────────── */
.captcha.card,
.captcha {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  width: 100% !important;
  margin: 4px 0 12px !important;
  pointer-events: auto !important;
}

.captcha.card .card-body,
.captcha .card-body {
  padding: 10px !important;
}

.panel-body .card,
.panel .card {
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  top: auto !important;
  left: auto !important;
  pointer-events: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   LABELS
───────────────────────────────────────────────────────────── */
label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,.55) !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px !important;
  display: block;
}

.checkbox label {
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  color: rgba(15,23,42,.65) !important;
}

/* ─────────────────────────────────────────────────────────────
   INPUTS — explicit pointer-events on every interactive element
───────────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  height: 46px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(15,23,42,.10) !important;
  background: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  color: #0f172a !important;
  width: 100%;
  box-sizing: border-box;
  transition: all .15s ease;
  pointer-events: auto !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #3994A8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(57,148,168,.12) !important;
  outline: none !important;
}

.form-group {
  margin-bottom: 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   HIDE GHOST SUBMIT
───────────────────────────────────────────────────────────── */
input[type="submit"].hidden,
input[type="submit"][value=""],
input[type="submit"][hidefocus] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   LOG IN BUTTON
───────────────────────────────────────────────────────────── */
.panel-body button[type="submit"],
.panel-body .btn-primary {
  width: 100% !important;
  display: block !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #3994A8 0%, #2a7a92 100%) !important;
  border: none !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(57,148,168,.35) !important;
  transition: transform .14s ease, box-shadow .14s ease;
  margin-top: 8px;
  cursor: pointer;
  pointer-events: auto !important;
}

.panel-body button[type="submit"]:hover,
.panel-body .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(57,148,168,.45) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   PANEL FOOTER
───────────────────────────────────────────────────────────── */
.panel-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
  padding: 16px 32px !important;
  border-radius: 0 0 20px 20px !important;
  text-align: center;
  pointer-events: auto !important;
}

.panel-footer a {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2a7a92 !important;
  text-decoration: none !important;
  margin: 0 8px;
  pointer-events: auto !important;
}

.panel-footer a:hover {
  color: #3994A8 !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────── */
.alert {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 18px;
}

.alert-danger {
  background: rgba(239,68,68,.07) !important;
  border-color: rgba(239,68,68,.18) !important;
  color: #7f1d1d !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLET
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .panel.panel-blesta {
    left: 45% !important;
    width: 340px !important;
  }
  .nx-login-welcome {
    padding: 0 32px !important;
  }
  .nx-login-welcome h2 {
    font-size: 30px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html, body {
    min-height: 100vh !important;
  }

  body {
    background: linear-gradient(160deg, #1a7a96 0%, #0a3550 100%) !important;
  }

  .nx-login-welcome {
    display: none !important;
  }

  body::after {
    display: none !important;
  }

  body::before {
    display: none !important;
  }

  .panel.panel-blesta::before {
    content: "";
    display: block;
    width: 200px;
    height: 66px;
    background: url('../images/logo.svg') no-repeat center center;
    background-size: contain;
    margin: 20px auto 0;
  }

  .panel-body {
    padding-top: 8px !important;
  }

  .nx-back-link {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    text-align: left !important;
    color: rgba(255,255,255,.85) !important;
    z-index: 1001 !important;
  }

  .nx-back-link:hover {
    color: #fff !important;
  }

  .nx-panel-col {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background-image: none !important;
    background-color: transparent !important;
    pointer-events: all !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding: 100px 16px 40px !important;
    box-sizing: border-box !important;
  }

  .container-md,
  .container {
    padding: 0 !important;
  }

  .panel.panel-blesta {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
    height: auto !important;
  }
}