/*
 * Responsive login composition
 *
 * Desktop keeps the original globe/auth split. On tablet and mobile the
 * globe becomes the page backdrop and the light auth card floats above it.
 * Every selector is scoped to the login page so the operations console is
 * not affected.
 */
@media (max-width: 1024px) {
  .lc-login-page {
    color: #263241 !important;
    background: #eef3f7 !important;
    min-height: 100svh;
    display: block;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .lc-login-page .lc-login-globe-section {
    z-index: 0;
    color: #263241 !important;
    background:
      linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
    width: 100%;
    min-height: 100svh;
    height: 100%;
    padding: 22px clamp(18px, 5vw, 44px);
    position: absolute;
    inset: 0;
  }

  .lc-login-page .lc-login-globe-section::before {
    background:
      radial-gradient(circle, #ff6f3924, #ffb7700f 42%, #0000 74%) !important;
  }

  .lc-login-page .lc-login-header,
  .lc-login-page .lc-login-footer {
    display: none;
  }

  .lc-login-page .lc-login-globe-stage {
    z-index: 1;
    opacity: 1;
    transform: scale(1.12);
    transform-origin: center;
  }

  .lc-login-page .lc-login-globe {
    opacity: 1;
  }

  .lc-login-page .lc-login-auth-section {
    z-index: 10;
    color: #263241 !important;
    background: transparent !important;
    border-left: 0 !important;
    width: min(100%, 720px);
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(68px, 10vw, 108px) clamp(16px, 5vw, 42px) 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
  }

  .lc-login-page .lc-login-auth-section::before {
    display: none;
  }

  .lc-login-page .lc-login-network {
    display: none;
  }

  .lc-login-page .lc-login-card {
    z-index: 2;
    color: #1f2937 !important;
    background: #fffffff2 !important;
    border: 1px solid #d9e2e9 !important;
    border-radius: 24px;
    width: min(100%, 440px);
    max-width: 440px;
    margin-top: 0;
    padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 40px);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 58px #1834492b, 0 0 0 1px #ffffffb8 !important;
  }

  .lc-login-page .lc-login-auth-logo.lc-login-brand-lockup {
    color: #101828 !important;
  }

  .lc-login-page .lc-login-auth-logo .lc-wordmark-logi {
    color: #101828 !important;
  }

  .lc-login-page .lc-login-auth-logo .lc-wordmark-chain {
    color: #64748b !important;
  }

  .lc-login-page .lc-login-card-sub {
    color: #64748b !important;
  }

  .lc-login-page .lc-login-tabs button {
    color: #64748b !important;
    background: linear-gradient(135deg, #f8fafc, #eef4f7) !important;
    border-color: #dbe4ec !important;
    box-shadow: inset 0 1px #ffffff !important;
  }

  .lc-login-page .lc-login-tabs button.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #334155, #111827) !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 18px #0f172a33, inset 0 1px #ffffff24 !important;
  }

  .lc-login-page .lc-login-field > span {
    color: #273241 !important;
  }

  .lc-login-page .lc-login-field input {
    color: #17202b !important;
    background: #ffffff !important;
    border-color: #b8c1cb !important;
    box-shadow: inset 0 1px 1px #0f172a0d !important;
  }

  .lc-login-page .lc-login-field input::placeholder {
    color: #8b96a3 !important;
  }

  .lc-login-page .lc-login-password-toggle,
  .lc-login-page .lc-login-link {
    color: #475569 !important;
  }

  .lc-login-page .lc-login-remember {
    color: #596575 !important;
  }

  .lc-login-page .lc-login-remember input {
    accent-color: #334155 !important;
  }

  .lc-login-page .lc-login-submit {
    color: #ffffff !important;
    background: linear-gradient(135deg, #334155, #111827) !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 22px #0f172a38, inset 0 1px #ffffff1f !important;
  }

  .lc-login-page .lc-login-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #475569, #1e293b) !important;
    border-color: #1e293b !important;
  }

  .lc-login-page .lc-customer-driver-shortcut {
    color: #263241 !important;
    background: linear-gradient(135deg, #f8fafb, #edf0f3) !important;
    border-color: #c5ccd4 !important;
    box-shadow: inset 0 1px #ffffffe0, 0 3px 8px #0f172a0d !important;
  }

  .lc-login-page .lc-customer-driver-shortcut small,
  .lc-login-page .lc-customer-driver-shortcut-arrow {
    color: #6b7786 !important;
  }

  .lc-login-page .lc-customer-driver-shortcut-icon {
    color: #ffffff !important;
    background: #334155 !important;
  }

  .lc-login-page .lc-login-toast {
    color: #9a3e19 !important;
    background: #fff0e6 !important;
    border-color: #d8895b !important;
  }

  .lc-login-page .lc-login-toast.error {
    color: #a33d39 !important;
    background: #fff0ef !important;
    border-color: #dfa3a0 !important;
  }

  .lc-login-page .lc-login-copyright {
    color: #6b7786 !important;
    border-top-color: #d8dde3 !important;
  }

  .lc-login-page .lc-login-theme-switch {
    display: none !important;
  }

  /*
   * The bundled light-theme rules intentionally use a more specific
   * data-theme selector. Match that specificity here so the responsive
   * composition remains light even if the desktop theme state was persisted.
   */
  .lc-login-page[data-login-theme] {
    color: #263241 !important;
    background: #eef3f7 !important;
  }

  .lc-login-page[data-login-theme] .lc-login-globe-section {
    color: #263241 !important;
    background:
      linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
  }

  .lc-login-page[data-login-theme] .lc-login-globe-section::before {
    background:
      radial-gradient(circle, #ff6f3924, #ffb7700f 42%, #0000 74%) !important;
  }

  .lc-login-page[data-login-theme] .lc-login-globe-stage {
    opacity: 1;
  }

  .lc-login-page[data-login-theme] .lc-login-auth-section {
    color: #263241 !important;
    background: transparent !important;
    border-left-color: transparent !important;
  }

  .lc-login-page[data-login-theme] .lc-login-card {
    color: #1f2937 !important;
    background: #fffffff2 !important;
    border-color: #d9e2e9 !important;
  }

  .lc-login-page[data-login-theme] .lc-login-auth-section::before,
  .lc-login-page[data-login-theme] .lc-login-network {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .lc-login-page .lc-login-auth-section {
    padding-top: 58px;
    padding-bottom: 22px;
  }

  .lc-login-page .lc-login-card {
    border-radius: 20px;
    padding: 22px 18px;
  }

  .lc-login-page .lc-login-card-sub {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-login-page .lc-login-globe,
  .lc-login-page .lc-login-card {
    transition: none !important;
  }
}