/* Unified friendly theme for auth/setup/error pages */

:root {
  --ux-blue-900: #0b3a8f;
  --ux-blue-700: #0f4bb8;
  --ux-blue-600: #1f6ae0;
  --ux-blue-500: #2d74d6;
  --ux-blue-100: #edf4ff;
  --ux-blue-050: #f7fbff;
  --ux-text: #123a6f;
  --ux-text-soft: #46658f;
  --ux-border: #d5e5f8;
  --ux-shadow: 0 14px 34px rgba(21, 74, 160, 0.14);
}

body.auth-page {
  background: linear-gradient(145deg, #89dbe8 0%, #9de4ef 55%, #92dcea 100%) !important;
  color: var(--ux-text) !important;
  opacity: 1 !important;
  animation: none !important;
}

body.auth-page::before,
body.auth-page::after {
  display: none !important;
}

body.auth-page .login-left {
  background: linear-gradient(180deg, var(--ux-blue-900) 0%, var(--ux-blue-700) 58%, var(--ux-blue-600) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
}

body.auth-page .login-left::before,
body.auth-page .login-left::after,
body.auth-page .login-left-decor,
body.auth-page .login-left-decor::after {
  display: none !important;
}

body.auth-page .welcome-badge,
body.auth-page .login-left h1,
body.auth-page .login-left p {
  color: #f3f8ff !important;
  text-shadow: none !important;
}

body.auth-page .btn-welcome-primary {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.auth-page .login-right {
  background: #f7fbff !important;
  border-left: 1px solid var(--ux-border) !important;
  box-shadow: -14px 0 30px rgba(15, 62, 140, 0.12) !important;
  backdrop-filter: none !important;
}

body.auth-page .login-right h2,
body.auth-page .login-right p,
body.auth-page .developer-info,
body.auth-page .form-label,
body.auth-page .remember-me,
body.auth-page .forgot-password,
body.auth-page .input-group i,
body.auth-page .password-toggle {
  color: var(--ux-text) !important;
  text-shadow: none !important;
}

body.auth-page .auto-detect-note {
  background: var(--ux-blue-050) !important;
  border: 1px solid var(--ux-border) !important;
  color: var(--ux-text) !important;
}

body.auth-page .form-control {
  background: #ffffff !important;
  border: 1px solid #ccddf3 !important;
  color: #173a63 !important;
}

body.auth-page .form-control::placeholder {
  color: #6f86a8 !important;
}

body.auth-page .form-control:focus {
  border-color: var(--ux-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(45, 116, 214, 0.16) !important;
}

body.auth-page .btn-login,
body.auth-page .btn,
body.auth-page .btn-primary,
body.auth-page .btn-secondary {
  background: linear-gradient(145deg, var(--ux-blue-500) 0%, #205fc2 100%) !important;
  border: 1px solid #1f56a8 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(32, 95, 194, 0.22) !important;
  text-transform: none !important;
}

body.auth-page .btn:hover,
body.auth-page .btn-login:hover,
body.auth-page .btn-primary:hover,
body.auth-page .btn-secondary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(32, 95, 194, 0.28) !important;
}

body.auth-page .card {
  background: #ffffff !important;
  border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow) !important;
  color: var(--ux-text) !important;
}

body.auth-page .card h1,
body.auth-page .card p,
body.auth-page .card .form-label {
  color: var(--ux-text) !important;
}

body.auth-page .link {
  color: #2b69ca !important;
}

body.auth-page .alert-success {
  background: #eaf3ff !important;
  border: 1px solid #cfe1fb !important;
  color: #194a88 !important;
}

body.auth-page .alert-error {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #be123c !important;
}

body.change-password-page,
body.setup-page,
body.unauthorized-page {
  background: linear-gradient(145deg, #89dbe8 0%, #9de4ef 55%, #92dcea 100%) !important;
  color: var(--ux-text) !important;
  opacity: 1 !important;
  animation: none !important;
}

body.change-password-page .card,
body.setup-page .setup-container,
body.unauthorized-page .error-container {
  background: #ffffff !important;
  border: 1px solid var(--ux-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ux-shadow) !important;
  color: var(--ux-text) !important;
}

body.change-password-page .card-header h2,
body.change-password-page .card-header p,
body.change-password-page .form-label,
body.change-password-page .form-control {
  color: var(--ux-text) !important;
}

body.change-password-page .form-control {
  background: #ffffff !important;
  border: 1px solid #ccddf3 !important;
}

body.change-password-page .btn-primary,
body.setup-page .btn-primary,
body.unauthorized-page .btn {
  background: linear-gradient(145deg, var(--ux-blue-500) 0%, #205fc2 100%) !important;
  border: 1px solid #1f56a8 !important;
  color: #ffffff !important;
}

body.setup-page .setup-header {
  background: linear-gradient(180deg, var(--ux-blue-900) 0%, var(--ux-blue-700) 65%, var(--ux-blue-600) 100%) !important;
}

body.setup-page .requirement-item {
  background: #f8fbff !important;
  border-left-color: #cfe0f6 !important;
}

body.setup-page .requirement-item.pass {
  background: #ecf8f2 !important;
}

body.setup-page .requirement-item.fail {
  background: #fff1f2 !important;
}

body.unauthorized-page {
  text-align: center;
}

body.unauthorized-page .error-icon {
  color: #2d74d6 !important;
}

body.unauthorized-page h1,
body.unauthorized-page h2,
body.unauthorized-page p {
  color: var(--ux-text) !important;
}

@media (max-width: 1024px) {
  body.auth-page {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }

  body.auth-page .login-left {
    min-height: 200px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body.auth-page .login-right {
    min-height: auto !important;
    box-shadow: none !important;
    border-left: none !important;
    border-radius: 0 0 18px 18px !important;
    padding: 24px 20px !important;
  }
}

/* Final premium pass for login */
body.auth-page {
  background:
    radial-gradient(760px 360px at 12% 0%, rgba(45, 116, 214, 0.2), transparent 62%),
    radial-gradient(780px 360px at 88% 8%, rgba(68, 159, 255, 0.18), transparent 58%),
    linear-gradient(145deg, #ecf5ff 0%, #e6f1ff 55%, #f2f8ff 100%) !important;
}

body.auth-page .login-right {
  border: 1px solid rgba(20, 76, 162, 0.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 48px rgba(21, 74, 160, 0.16) !important;
  animation: authCardIn 0.45s ease both;
}

body.auth-page .login-right form {
  display: grid;
  gap: 10px;
}

body.auth-page .form-group {
  margin-bottom: 2px !important;
}

body.auth-page .input-group {
  position: relative;
}

body.auth-page .input-group i {
  transition: color 0.2s ease, transform 0.2s ease !important;
}

body.auth-page .input-group:focus-within i {
  color: #2d74d6 !important;
  transform: translateY(-50%) scale(1.06) !important;
}

body.auth-page .form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
}

body.auth-page .form-control:hover {
  border-color: rgba(45, 116, 214, 0.45) !important;
}

body.auth-page .form-control:focus {
  transform: translateY(-1px);
}

body.auth-page .btn-login,
body.auth-page .btn {
  border-radius: 13px !important;
  min-height: 46px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

body.auth-page .btn-login:hover,
body.auth-page .btn:hover {
  transform: translateY(-1px) !important;
}

body.auth-page .btn-login:active,
body.auth-page .btn:active {
  transform: translateY(0) scale(0.985) !important;
}

body.auth-page .btn-demo-open {
  background: #ffffff !important;
  color: #1b4f9d !important;
  border: 1px solid rgba(29, 92, 191, 0.28) !important;
  box-shadow: 0 12px 22px rgba(29, 92, 191, 0.12) !important;
}

body.auth-page .btn-demo-open:hover {
  box-shadow: 0 16px 26px rgba(29, 92, 191, 0.16) !important;
}

body.auth-page .alert-error {
  border-radius: 12px;
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  body.auth-page .login-right {
    border-radius: 18px !important;
    padding: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page .login-right,
  body.auth-page .form-control,
  body.auth-page .btn-login,
  body.auth-page .btn,
  body.auth-page .input-group i {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}