/* OM Tactic KI – Customer Login Polish
 * Sprint 5: animated gradient, top-accent, larger card, tagline, trust-line.
 *
 * Loaded via /app/client/dist/index.html:
 *   <link rel="stylesheet" href="/assets/custom/style.css" />
 *
 * Tagline + Trust-Line werden via login-customizations.js eingefügt und
 * hier nur gestylt — wir vermeiden Eingriffe in die LibreChat-React-DOM.
 *
 * prefers-reduced-motion ist supported — Animation pausiert automatisch
 * für Benutzer mit Motion-Empfindlichkeit.
 */

/* === Animated Page Background ============================== */

@keyframes omt-gentle-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.relative.flex.min-h-screen.flex-col {
  background:
    linear-gradient(135deg,
      #e8eef5 0%,
      #d8e4ed 25%,
      #e6ebf2 50%,
      #dce5ee 75%,
      #e8eef5 100%) !important;
  background-size: 400% 400% !important;
  animation: omt-gentle-shift 28s ease-in-out infinite;
}

html.dark .relative.flex.min-h-screen.flex-col,
.dark .relative.flex.min-h-screen.flex-col {
  background:
    linear-gradient(135deg,
      #0f172a 0%,
      #1e293b 25%,
      #0f172a 50%,
      #1e293b 75%,
      #0f172a 100%) !important;
  background-size: 400% 400% !important;
}

@media (prefers-reduced-motion: reduce) {
  .relative.flex.min-h-screen.flex-col {
    animation: none !important;
  }
}

/* === Auth Card mit Top-Accent ============================== */

.w-authPageWidth {
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.15),
    0 8px 16px -8px rgba(0, 0, 0, 0.08) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
  border-top: 4px solid #0f6e56 !important;
  border-radius: 16px !important;
}

html.dark .w-authPageWidth,
.dark .w-authPageWidth {
  background-color: rgb(31 41 55) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  border-top-color: #0f6e56 !important;
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.5),
    0 8px 16px -8px rgba(0, 0, 0, 0.3) !important;
}

/* === Mehr Breathing-Room ============================== */

main.flex.flex-grow {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* === Größeres Logo ============================== */

.w-authPageWidth img[src*="/assets/custom/logo"],
.w-authPageWidth img[alt*="Logo"] {
  max-height: 4rem !important;
  max-width: 240px !important;
}

/* === Tagline (eingefügt via JS) ============================== */

.omt-tagline {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  margin-top: 4px;
  text-align: center;
  letter-spacing: 0.005em;
}

html.dark .omt-tagline,
.dark .omt-tagline {
  color: #9ca3af;
}

/* === Trust-Zeile (eingefügt via JS) ============================== */

.omt-trust-line {
  text-align: center;
  font-size: 11px;
  color: #6b7280;
  margin: 1.5rem 1rem 0.25rem;
  letter-spacing: 0.01em;
}

html.dark .omt-trust-line,
.dark .omt-trust-line {
  color: #9ca3af;
}

.omt-trust-line .sep {
  color: #d1d5db;
  margin: 0 8px;
}

html.dark .omt-trust-line .sep,
.dark .omt-trust-line .sep {
  color: #4b5563;
}