.auth-login-page {
  --auth-page-bg:
    linear-gradient(135deg, rgba(90, 141, 238, 0.08), rgba(233, 93, 82, 0.08)),
    #f7f8fb;
  --auth-visual-bg: #fff;
  --auth-card-bg: rgba(255, 255, 255, 0.94);
  --auth-soft-bg: #f0f3f6;
  --auth-field-bg: #fff;
  --auth-text: #303947;
  --auth-heading: #243142;
  --auth-muted: #677788;
  --auth-subtle: #9aa4b2;
  --auth-border: rgba(73, 85, 99, 0.1);
  --auth-border-strong: #d9dee3;
  --auth-accent: #5a8dee;
  --auth-accent-hover: #517fd6;
  --auth-accent-active: #3f74dc;
  --auth-success: #16875a;
  --auth-warning-text: #6b5a2d;
  --auth-warning-icon: #d88a00;
  --auth-warning-border: rgba(253, 172, 65, 0.24);
  --auth-warning-bg: rgba(253, 172, 65, 0.09);
  --auth-card-shadow: 0 1.25rem 3rem rgba(73, 85, 99, 0.14);
  --auth-control-shadow: 0 0.45rem 1rem rgba(73, 85, 99, 0.1);
  --auth-button-shadow: 0 0.65rem 1.25rem rgba(90, 141, 238, 0.22);
  min-height: 100vh;
  background: var(--auth-page-bg);
  color: var(--auth-text);
}

html[data-auth-theme="dark"] .auth-login-page {
  --auth-page-bg:
    linear-gradient(135deg, rgba(90, 141, 238, 0.18), rgba(233, 93, 82, 0.12)),
    #111417;
  --auth-visual-bg: #181b20;
  --auth-card-bg: rgba(27, 31, 37, 0.96);
  --auth-soft-bg: #232933;
  --auth-field-bg: #171b21;
  --auth-text: #d6dde6;
  --auth-heading: #f4f7fb;
  --auth-muted: #a4afbd;
  --auth-subtle: #7f8a99;
  --auth-border: rgba(214, 221, 230, 0.12);
  --auth-border-strong: #343c47;
  --auth-accent: #7fa8f4;
  --auth-accent-hover: #6f99ea;
  --auth-accent-active: #5f8bdd;
  --auth-success: #56d19c;
  --auth-warning-text: #f4cd80;
  --auth-warning-icon: #f2b84b;
  --auth-warning-border: rgba(242, 184, 75, 0.24);
  --auth-warning-bg: rgba(242, 184, 75, 0.1);
  --auth-card-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.35);
  --auth-control-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.2);
  --auth-button-shadow: 0 0.65rem 1.25rem rgba(127, 168, 244, 0.18);
}

.auth-login-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 520px);
  min-height: 100vh;
  direction: ltr;
}

.auth-login-visual {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 2.5rem;
  background: var(--auth-visual-bg);
  border-left: 1px solid var(--auth-border);
  direction: rtl;
}

.auth-login-visual::before {
  position: absolute;
  inset: 1.5rem;
  content: "";
  border: 1px solid color-mix(in srgb, var(--auth-accent) 28%, transparent);
  border-radius: 0.5rem;
  pointer-events: none;
}

.auth-login-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--auth-text);
  font-size: 1.1rem;
  font-weight: 700;
}

.auth-login-brand img {
  width: 32px;
  height: 32px;
}

.auth-login-art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 1rem;
}

.auth-login-art img {
  width: min(72%, 520px);
  max-height: 54vh;
  object-fit: contain;
}

.auth-login-visual-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.auth-login-visual-copy h1 {
  margin-bottom: 0.75rem;
  color: var(--auth-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.45;
}

.auth-login-visual-copy p {
  max-width: 500px;
  margin-bottom: 1.25rem;
  color: var(--auth-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.auth-login-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.auth-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--auth-border);
  border-radius: 999px;
  background: var(--auth-field-bg);
  color: var(--auth-text);
  font-size: 0.85rem;
}

.auth-login-badge i {
  color: var(--auth-accent);
  font-size: 1.05rem;
}

.auth-login-form-wrap {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  direction: rtl;
}

.auth-login-card {
  width: min(100%, 470px);
  padding: 2rem;
  border: 1px solid var(--auth-border);
  border-radius: 0.5rem;
  background: var(--auth-card-bg);
  box-shadow: var(--auth-card-shadow);
}

.auth-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.auth-login-mobile-brand {
  display: none;
  margin-bottom: 0;
}

.auth-theme-toggle {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--auth-border);
  border-radius: 50%;
  background: var(--auth-field-bg);
  color: var(--auth-text);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus {
  border-color: color-mix(in srgb, var(--auth-accent) 42%, transparent);
  color: var(--auth-accent);
  transform: translateY(-1px);
}

.auth-theme-toggle i {
  font-size: 1.15rem;
}

.auth-login-heading {
  margin-bottom: 1.5rem;
}

.auth-login-heading h2 {
  margin-bottom: 0.5rem;
  color: var(--auth-heading);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.45;
}

.auth-login-heading p {
  margin-bottom: 0;
  color: var(--auth-muted);
  line-height: 1.8;
}

.auth-login-methods,
.auth-forgot-methods {
  display: grid;
  gap: 0.5rem;
  padding: 0.35rem;
  border: 1px solid var(--auth-border);
  border-radius: 0.5rem;
  background: var(--auth-soft-bg);
}

.auth-login-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.25rem;
}

.auth-forgot-methods {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.auth-method-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--auth-muted);
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-method-btn i {
  font-size: 1.05rem;
}

.auth-method-btn.active {
  background: var(--auth-field-bg);
  color: var(--auth-accent);
  box-shadow: var(--auth-control-shadow);
}

.auth-login-panel {
  display: none;
}

.auth-login-panel.active {
  display: block;
}

.auth-login-card .form-label {
  color: var(--auth-text);
  font-weight: 600;
}

.auth-login-card .form-control {
  min-height: 44px;
  border-color: var(--auth-border-strong);
  background-color: var(--auth-field-bg);
  color: var(--auth-text);
}

.auth-login-card .form-control::placeholder {
  color: var(--auth-subtle);
}

.auth-login-card .input-group-text {
  border-color: var(--auth-border-strong);
  background-color: var(--auth-field-bg);
  color: var(--auth-muted);
}

.auth-password-toggle {
  border-color: var(--auth-border-strong);
  background-color: var(--auth-field-bg);
  color: var(--auth-muted);
}

.auth-login-card .form-check-input {
  border-color: var(--auth-border-strong);
  background-color: var(--auth-field-bg);
}

.auth-login-card .form-check-label {
  color: var(--auth-text);
}

.auth-helper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.auth-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  color: var(--auth-accent);
  font-weight: 700;
  padding: 0;
}

.auth-text-link:hover,
.auth-text-link:focus {
  color: var(--auth-accent-hover);
}

.auth-primary-btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--auth-accent);
  --bs-btn-border-color: var(--auth-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--auth-accent-hover);
  --bs-btn-hover-border-color: var(--auth-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--auth-accent-active);
  --bs-btn-active-border-color: var(--auth-accent-active);
  min-height: 46px;
  border: 0;
  background-color: var(--auth-accent);
  box-shadow: var(--auth-button-shadow);
}

.auth-login-card .btn.auth-primary-btn {
  border-color: var(--auth-accent) !important;
  background-color: var(--auth-accent) !important;
  color: #fff !important;
}

.auth-login-card .btn.auth-primary-btn:hover,
.auth-login-card .btn.auth-primary-btn:focus {
  border-color: var(--auth-accent-hover) !important;
  background-color: var(--auth-accent-hover) !important;
  color: #fff !important;
}

.auth-primary-btn:hover,
.auth-primary-btn:focus {
  background: var(--auth-accent-hover);
}

.auth-secondary-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
}

.auth-secondary-action .btn {
  --bs-btn-color: var(--auth-accent);
  --bs-btn-border-color: color-mix(in srgb, var(--auth-accent) 42%, transparent);
  --bs-btn-hover-bg: var(--auth-accent);
  --bs-btn-hover-border-color: var(--auth-accent);
  --bs-btn-active-bg: var(--auth-accent-hover);
  --bs-btn-active-border-color: var(--auth-accent-hover);
  white-space: nowrap;
}

.auth-otp-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.auth-otp-input {
  height: 48px;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.auth-status {
  min-height: 24px;
  color: var(--auth-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.auth-status.is-success {
  color: var(--auth-success);
}

.auth-login-separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--auth-subtle);
  font-size: 0.86rem;
}

.auth-login-separator::before,
.auth-login-separator::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--auth-border);
}

.auth-support-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--auth-muted);
  font-size: 0.92rem;
}

.auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.9rem;
  border: 1px solid var(--auth-warning-border);
  border-radius: 0.5rem;
  background: var(--auth-warning-bg);
  color: var(--auth-warning-text);
  line-height: 1.75;
}

.auth-security-note i {
  color: var(--auth-warning-icon);
  font-size: 1.25rem;
  margin-top: 0.1rem;
}

.auth-screen {
  display: none;
}

.auth-screen.active {
  display: block;
}

.auth-back-btn {
  margin-bottom: 1rem;
}

@media (max-width: 1199.98px) {
  .auth-login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
  }

  .auth-login-visual {
    padding: 2rem;
  }

  .auth-login-art img {
    width: min(82%, 440px);
  }
}

@media (max-width: 991.98px) {
  .auth-login-shell {
    display: block;
  }

  .auth-login-visual {
    display: none;
  }

  .auth-login-form-wrap {
    min-height: 100vh;
    padding: 1.5rem;
  }

  .auth-login-mobile-brand {
    display: flex;
  }

  .auth-card-toolbar {
    justify-content: space-between;
  }
}

@media (max-width: 575.98px) {
  .auth-login-page {
    background: var(--auth-page-bg);
  }

  .auth-login-form-wrap {
    align-items: flex-start;
    padding: 1rem;
  }

  .auth-login-card {
    padding: 1.25rem;
    box-shadow: none;
  }

  .auth-login-heading h2 {
    font-size: 1.35rem;
  }

  .auth-login-heading p {
    font-size: 0.92rem;
  }

  .auth-login-methods {
    grid-template-columns: 1fr;
  }

  .auth-method-btn {
    justify-content: flex-start;
    padding-inline: 0.85rem;
  }

  .auth-helper-row,
  .auth-support-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-secondary-action {
    grid-template-columns: 1fr;
  }

  .auth-otp-grid {
    gap: 0.4rem;
  }
}

.auth-login-card-wide { width: min(100%, 620px); }
.monitoring-profile-page svg { max-width: 100%; height: auto; }


/* Keep browser/password-manager autofill visually consistent with both auth themes. */
.auth-login-card input.form-control:-webkit-autofill,
.auth-login-card input.form-control:-webkit-autofill:hover,
.auth-login-card input.form-control:-webkit-autofill:focus,
.auth-login-card input.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--auth-text) !important;
  caret-color: var(--auth-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  border-color: var(--auth-border-strong) !important;
  transition: background-color 9999s ease-out 0s;
}

.auth-login-card input.form-control:autofill {
  color: var(--auth-text) !important;
  caret-color: var(--auth-text) !important;
  background: var(--auth-field-bg) !important;
  border-color: var(--auth-border-strong) !important;
}

html[data-auth-theme="dark"] .auth-login-card input.form-control:-webkit-autofill,
html[data-auth-theme="dark"] .auth-login-card input.form-control:-webkit-autofill:hover,
html[data-auth-theme="dark"] .auth-login-card input.form-control:-webkit-autofill:focus,
html[data-auth-theme="dark"] .auth-login-card input.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: #f5f7fb !important;
  caret-color: #f5f7fb !important;
  -webkit-box-shadow: 0 0 0 1000px #252d3f inset !important;
  box-shadow: 0 0 0 1000px #252d3f inset !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-auth-theme="dark"] .auth-login-card input.form-control:autofill {
  color: #f5f7fb !important;
  caret-color: #f5f7fb !important;
  background: #252d3f !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Minimal image-free login layout (user + admin only). */
.auth-login-page--minimal {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--auth-accent) 11%, transparent), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(233, 93, 82, .07), transparent 28%),
    var(--auth-page-bg);
}

.auth-login-page--minimal::before,
.auth-login-page--minimal::after {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border: 1px solid color-mix(in srgb, var(--auth-accent) 12%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-login-page--minimal::before { inset: -7rem auto auto -6rem; }
.auth-login-page--minimal::after { inset: auto -7rem -8rem auto; }

.auth-login-page--minimal .auth-login-shell {
  display: block;
  width: min(100%, 520px);
  min-height: 0;
  direction: rtl;
}

.auth-login-page--minimal .auth-login-form-wrap {
  display: block;
  min-height: 0;
  padding: 0;
}

.auth-login-page--minimal .auth-login-card {
  position: relative;
  width: 100%;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--auth-border-strong) 80%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--auth-card-bg) 96%, transparent);
  box-shadow: 0 1.25rem 3.5rem rgba(46, 53, 64, .13);
  backdrop-filter: blur(18px);
}

.auth-login-page--minimal .auth-card-toolbar {
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.auth-login-page--minimal .auth-login-brand--text {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--auth-heading);
  font-weight: 800;
}

.auth-login-page--minimal .auth-login-brand__mark {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--auth-accent) 12%, var(--auth-field-bg));
  color: var(--auth-accent);
  font-size: 1.2rem;
}

.auth-login-intro { margin-bottom: 1rem; }
.auth-login-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .2rem .6rem;
  border: 1px solid color-mix(in srgb, var(--auth-accent) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--auth-accent) 7%, transparent);
  color: var(--auth-accent);
  font-size: .72rem;
  font-weight: 800;
}
.auth-login-intro h1 {
  margin: .7rem 0 .35rem;
  color: var(--auth-heading);
  font-size: 1.75rem;
  font-weight: 850;
  line-height: 1.4;
}
.auth-login-intro p { margin: 0; color: var(--auth-muted); line-height: 1.8; }

.auth-login-security-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.2rem;
  padding: .65rem;
  border: 1px solid var(--auth-border);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--auth-soft-bg) 70%, transparent);
}
.auth-login-security-strip span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--auth-muted);
  font-size: .7rem;
}
.auth-login-security-strip i { color: var(--auth-accent); font-size: .95rem; }

.auth-login-page--minimal .auth-login-control {
  border-radius: .8rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.auth-login-page--minimal .auth-login-control:focus-within {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--auth-accent) 13%, transparent);
}
.auth-login-page--minimal .auth-login-control > .form-control,
.auth-login-page--minimal .auth-login-control > .input-group-text,
.auth-login-page--minimal .auth-login-control > .auth-password-toggle {
  min-height: 48px;
}

.auth-remember-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 1px solid var(--auth-border);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--auth-soft-bg) 52%, transparent);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.auth-remember-option:hover {
  border-color: color-mix(in srgb, var(--auth-accent) 30%, var(--auth-border));
  background: color-mix(in srgb, var(--auth-accent) 5%, var(--auth-soft-bg));
}
.auth-remember-option strong,
.auth-remember-option small { display: block; }
.auth-remember-option strong { color: var(--auth-text); font-size: .82rem; }
.auth-remember-option small { margin-top: .1rem; color: var(--auth-muted); font-size: .68rem; line-height: 1.55; }

/* Explicit, high-contrast checkbox state for Light and Dark themes. */
.auth-login-card .form-check-input {
  width: 1.18rem;
  height: 1.18rem;
  margin: 0;
  border: 2px solid color-mix(in srgb, var(--auth-text) 48%, var(--auth-border-strong));
  border-radius: .3rem;
  background-color: var(--auth-field-bg);
  background-position: center;
  background-size: .75rem .75rem;
  box-shadow: none;
  cursor: pointer;
}
.auth-login-card .form-check-input:checked {
  border-color: var(--auth-accent) !important;
  background-color: var(--auth-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M3 8.4 6.3 12 13.2 4.5'/%3E%3C/svg%3E") !important;
}
.auth-login-card .form-check-input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--auth-accent) 18%, transparent);
}

.auth-login-request-note,
.auth-login-switch {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  padding: .7rem .8rem;
  border-radius: .8rem;
}
.auth-login-request-note { border: 1px solid var(--auth-border); background: var(--auth-soft-bg); }
.auth-login-request-note i { color: var(--auth-accent); font-size: 1.1rem; }
.auth-login-request-note strong,
.auth-login-request-note small { display: block; }
.auth-login-request-note small { color: var(--auth-muted); font-size: .7rem; }
.auth-login-switch { justify-content: center; color: var(--auth-muted); font-size: .76rem; }
.auth-login-switch a { color: var(--auth-accent); font-weight: 800; }

html[data-auth-theme="dark"] .auth-login-page--minimal .auth-login-card {
  border-color: rgba(255,255,255,.07);
  background: rgba(27,31,37,.96);
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.34);
}
html[data-auth-theme="dark"] .auth-login-card .form-check-input {
  border-color: rgba(255,255,255,.38);
  background-color: #171b21;
}

@media (max-width: 575.98px) {
  .auth-login-page--minimal { place-items: start center; padding: .8rem; }
  .auth-login-page--minimal .auth-login-card { padding: 1rem; border-radius: 1rem; box-shadow: none; }
  .auth-login-intro h1 { font-size: 1.45rem; }
  .auth-login-security-strip { gap: .35rem .7rem; }
  .auth-login-security-strip span { font-size: .66rem; }
  .auth-login-page--minimal .auth-card-toolbar { margin-bottom: 1rem; }
}