/* ══════════════════════════════════════════════════════════════════
   SCALERZ Client Portal Login V2 — client_login_styles.css
   Actual body class: body.customers_login  (NOT body.login — V1 bug)
   ══════════════════════════════════════════════════════════════════ */

/* ── BODY ──────────────────────────────────────────────────────── */
body.customers_login {
  background-color: #0a0a0a !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  min-height: 100vh !important;
  color: #d4d4d4 !important;
}

/* ── HIDE navbar + footer — login page is standalone ────────────── */
body.customers_login .navbar,
body.customers_login footer.footer {
  display: none !important;
}

/* ── CENTERING — #wrapper fills viewport, #content centers ──────── */
body.customers_login #wrapper,
body.customers_login #content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: 40px 16px !important;
  box-sizing: border-box !important;
}

/* First container (empty .row inside) — collapse it */
body.customers_login #content > .container:first-child {
  display: none !important;
}

/* Main container holding the form */
body.customers_login #content > .container {
  max-width: 480px !important;
  width: 100% !important;
  padding: 0 !important;
}

body.customers_login .row {
  margin: 0 !important;
}

body.customers_login .mtop40 {
  margin-top: 0 !important;
}

/* Override Bootstrap grid — make columns full-width and centered */
body.customers_login [class*="col-md-"],
body.customers_login [class*="col-sm-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── LOGO (injected by JS above heading) ────────────────────────── */
.sz-login-logo-wrap {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.sz-login-logo-wrap img {
  max-height: 52px !important;
  width: auto !important;
  filter: brightness(1.1) !important;
}

/* ── HEADING ────────────────────────────────────────────────────── */
body.customers_login h1.login-heading,
body.customers_login .login-heading {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-align: center !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}

/* ── SUBTITLE (injected by JS) ──────────────────────────────────── */
.sz-login-subtitle {
  color: #737373 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* ── FORM CARD ──────────────────────────────────────────────────── */
body.customers_login .panel_s {
  background-color: #111111 !important;
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

body.customers_login .panel-body {
  background-color: #111111 !important;
  background: #111111 !important;
  border-radius: 8px !important;
  padding: 28px !important;
}

/* ── LABELS ─────────────────────────────────────────────────────── */
body.customers_login label,
body.customers_login label.control-label {
  color: #737373 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── TEXT INPUTS ────────────────────────────────────────────────── */
body.customers_login input.form-control,
body.customers_login input[type="text"].form-control,
body.customers_login input[type="email"].form-control,
body.customers_login input[type="password"].form-control,
body.customers_login #email,
body.customers_login #password {
  background-color: #161616 !important;
  background: #161616 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #d4d4d4 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: auto !important;
  line-height: 1.5 !important;
  caret-color: #1921fe !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
}

body.customers_login input.form-control:focus,
body.customers_login #email:focus,
body.customers_login #password:focus {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border-color: rgba(25,33,254,0.5) !important;
  box-shadow: 0 0 0 3px rgba(25,33,254,0.12) !important;
  outline: none !important;
  color: #d4d4d4 !important;
}

body.customers_login input::placeholder {
  color: #525252 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* ── BOOTSTRAP SELECT (language dropdown) ────────────────────────
   Bootstrap Select replaces <select> with a <button>-based widget.
   Must target .bootstrap-select and its inner elements.
   ─────────────────────────────────────────────────────────────── */
body.customers_login .bootstrap-select {
  width: 100% !important;
}

body.customers_login .bootstrap-select > .dropdown-toggle,
body.customers_login .bootstrap-select .btn.dropdown-toggle,
body.customers_login .bootstrap-select button.btn-default {
  background-color: #161616 !important;
  background: #161616 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #d4d4d4 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: 100% !important;
  text-align: left !important;
}

body.customers_login .bootstrap-select > .dropdown-toggle:hover,
body.customers_login .bootstrap-select > .dropdown-toggle:focus,
body.customers_login .bootstrap-select > .dropdown-toggle:active,
body.customers_login .bootstrap-select.open > .dropdown-toggle {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  background-image: none !important;
  border-color: rgba(25,33,254,0.5) !important;
  color: #d4d4d4 !important;
  box-shadow: 0 0 0 3px rgba(25,33,254,0.12) !important;
  outline: none !important;
}

body.customers_login .bootstrap-select .caret {
  border-top-color: #737373 !important;
}

body.customers_login .bootstrap-select .filter-option,
body.customers_login .bootstrap-select .filter-option-inner,
body.customers_login .bootstrap-select .filter-option-inner-inner {
  color: #d4d4d4 !important;
}

body.customers_login .bootstrap-select .dropdown-menu {
  background-color: #161616 !important;
  background: #161616 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

body.customers_login .bootstrap-select .dropdown-menu li > a,
body.customers_login .bootstrap-select .dropdown-menu li a {
  color: #d4d4d4 !important;
  background: transparent !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
}

body.customers_login .bootstrap-select .dropdown-menu li > a:hover,
body.customers_login .bootstrap-select .dropdown-menu li.active > a,
body.customers_login .bootstrap-select .dropdown-menu li.selected > a {
  background-color: rgba(25,33,254,0.12) !important;
  color: #d4d4d4 !important;
}

/* Bootstrap Select search input */
body.customers_login .bootstrap-select .bs-searchbox input,
body.customers_login .bootstrap-select .bs-searchbox input.form-control {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  color: #d4d4d4 !important;
  box-shadow: none !important;
}

/* Native select (fallback, hidden by Bootstrap Select) */
body.customers_login select.form-control {
  background-color: #161616 !important;
  background: #161616 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #d4d4d4 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ── PASSWORD LABEL ROW — label left, forgot right (JS-built) ───── */
.sz-password-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.sz-password-label-row label {
  margin-bottom: 0 !important;
  flex: 1 !important;
}

.sz-forgot-link {
  font-size: 12px !important;
  color: #1921fe !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.sz-forgot-link:hover {
  color: #4149ff !important;
  text-decoration: none !important;
}

/* ── SUBMIT BUTTON — solid #1921fe, zero gradient, zero shadow ───── */
body.customers_login .btn.btn-primary,
body.customers_login button.btn-primary,
body.customers_login button[type="submit"],
body.customers_login .btn-primary.btn-block,
body.customers_login .login-form .btn-primary {
  background: #1921fe !important;
  background-color: #1921fe !important;
  background-image: none !important;
  filter: none !important;
  border: none !important;
  border-color: #1921fe !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  padding: 11px 20px !important;
  height: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: 100% !important;
  display: block !important;
  transition: background-color 0.15s ease !important;
}

body.customers_login .btn.btn-primary:hover,
body.customers_login button[type="submit"]:hover,
body.customers_login .login-form .btn-primary:hover {
  background: #1018e0 !important;
  background-color: #1018e0 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  border-color: #1018e0 !important;
}

body.customers_login .btn.btn-primary:active,
body.customers_login button[type="submit"]:active {
  background: #0d14c2 !important;
  background-color: #0d14c2 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.customers_login .btn.btn-primary:focus,
body.customers_login button[type="submit"]:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(25,33,254,0.25) !important;
}

/* ── ALL OTHER LINKS ────────────────────────────────────────────── */
body.customers_login a,
body.customers_login a.text-muted {
  color: #1921fe !important;
}

body.customers_login a:hover {
  color: #4149ff !important;
}

/* ── CHECKBOX / REMEMBER ME ─────────────────────────────────────── */
body.customers_login .checkbox label,
body.customers_login .checkbox-inline label {
  color: #525252 !important;
  font-size: 13px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 400 !important;
}

/* ── FORM GROUPS ────────────────────────────────────────────────── */
body.customers_login .form-group {
  background: transparent !important;
  margin-bottom: 16px !important;
}

/* Hide the .tw-text-center div that had Forgot Password (now inline) */
body.customers_login .tw-text-center.sz-forgot-hidden {
  display: none !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
  body.customers_login .panel-body {
    padding: 20px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HIGH-SPECIFICITY OVERRIDES
   clients.css "Phase 0 v4" uses body.customers_login #wrapper .panel_s …
   which beats our lower-specificity rules above.
   These match that specificity chain so our later-loaded file wins.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kill SCALERZ + Client Portal CSS pseudo-elements ───────────── */
body.customers_login #wrapper .login-heading::before,
body.customers_login #wrapper .login-heading::after {
  content: none !important;
  display: none !important;
}

/* ── Restore h1 heading (clients.css sets font-size: 0) ─────────── */
body.customers_login #wrapper .login-heading {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ── Inputs — solid #161616, not glass rgba() ───────────────────── */
body.customers_login #wrapper .panel_s input.form-control,
body.customers_login #wrapper .panel_s input[type="text"],
body.customers_login #wrapper .panel_s input[type="email"],
body.customers_login #wrapper .panel_s input[type="password"] {
  background: #161616 !important;
  background-color: #161616 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #d4d4d4 !important;
  height: auto !important;
}

body.customers_login #wrapper .panel_s input.form-control:focus,
body.customers_login #wrapper .panel_s input[type="text"]:focus,
body.customers_login #wrapper .panel_s input[type="email"]:focus,
body.customers_login #wrapper .panel_s input[type="password"]:focus {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  background-image: none !important;
  border-color: rgba(25,33,254,0.5) !important;
  box-shadow: 0 0 0 3px rgba(25,33,254,0.12) !important;
  color: #d4d4d4 !important;
  caret-color: #1921fe !important;
}

/* ── Button — solid flat #1921fe, zero gradient, zero shadow ────── */
body.customers_login #wrapper .panel_s .btn.btn-primary,
body.customers_login #wrapper .panel_s button[type="submit"] {
  background: #1921fe !important;
  background-color: #1921fe !important;
  background-image: none !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  height: auto !important;
  padding: 11px 20px !important;
  letter-spacing: normal !important;
  transform: none !important;
}

body.customers_login #wrapper .panel_s .btn.btn-primary:hover,
body.customers_login #wrapper .panel_s button[type="submit"]:hover {
  background: #1018e0 !important;
  background-color: #1018e0 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: none !important;
}

body.customers_login #wrapper .panel_s .btn.btn-primary:active,
body.customers_login #wrapper .panel_s button[type="submit"]:active {
  background: #0d14c2 !important;
  background-color: #0d14c2 !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Links (override indigo rgba from Phase 0) ──────────────────── */
body.customers_login #wrapper .panel_s a,
body.customers_login #wrapper .panel_s .text-muted,
body.customers_login #wrapper .panel_s .sz-forgot-link {
  color: #1921fe !important;
}

body.customers_login #wrapper .panel_s a:hover,
body.customers_login #wrapper .panel_s .sz-forgot-link:hover {
  color: #4149ff !important;
}

/* ── Bootstrap Select — match Phase 0 selector specificity ──────── */
body.customers_login #wrapper .panel_s .bootstrap-select > .dropdown-toggle,
body.customers_login #wrapper .panel_s .bootstrap-select button.btn-default {
  background: #161616 !important;
  background-color: #161616 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  color: #d4d4d4 !important;
  box-shadow: none !important;
}