/* ============================================
   Codeflex AI - Custom Login Styles
   ============================================ */

/* Login page background with subtle gradient */
.relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900 {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%) !important;
  position: relative;
  overflow: hidden;
}

.dark .relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900 {
  background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0d1117 100%) !important;
}

/* Subtle animated background pattern */
.relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
  animation: bgShift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.dark .relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900::before {
  background: radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

@keyframes bgShift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, -1%) rotate(1deg); }
  66% { transform: translate(-1%, 2%) rotate(-1deg); }
}

/* Ensure content stays above background */
.relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900 > * {
  position: relative;
  z-index: 1;
}

/* Logo area enhancement - move it down near the form */
.mt-6.h-10.w-full.bg-cover {
  height: 7rem !important;
  margin-top: auto !important;
  margin-bottom: 1.5rem !important;
  padding-top: 2rem !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease;
}

.mt-6.h-10.w-full.bg-cover:hover {
  transform: scale(1.02);
}

/* Make the parent flex column so logo pushes down to the form */
.relative.flex.min-h-screen.flex-col.bg-white.dark\:bg-gray-900 > main {
  flex-grow: 0 !important;
  margin-bottom: auto !important;
}

/* Login card styling */
.w-authPageWidth.overflow-hidden.bg-white.px-6.py-4.dark\:bg-gray-900.sm\:max-w-md.sm\:rounded-lg {
  border-radius: 1.25rem !important;
  padding: 2rem 1.75rem !important;
  max-width: 26rem !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

html:not(.dark) .w-authPageWidth.overflow-hidden.bg-white.px-6.py-4.dark\:bg-gray-900.sm\:max-w-md.sm\:rounded-lg {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              0 2px 8px rgba(0, 0, 0, 0.04);
}

html.dark .w-authPageWidth.overflow-hidden.bg-white.px-6.py-4.dark\:bg-gray-900.sm\:max-w-md.sm\:rounded-lg {
  background: rgba(17, 24, 39, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(55, 65, 81, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 2px 8px rgba(0, 0, 0, 0.2);
}

html:not(.dark) .w-authPageWidth.overflow-hidden.bg-white.px-6.py-4.dark\:bg-gray-900.sm\:max-w-md.sm\:rounded-lg:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08),
              0 4px 12px rgba(0, 0, 0, 0.05);
}

html.dark .w-authPageWidth.overflow-hidden.bg-white.px-6.py-4.dark\:bg-gray-900.sm\:max-w-md.sm\:rounded-lg:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Login heading */
.mb-4.text-center.text-3xl.font-semibold {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .mb-4.text-center.text-3xl.font-semibold {
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Input fields enhancement */
form input[type="text"],
form input[type="password"],
form input[type="email"] {
  border-radius: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

html:not(.dark) form input[type="text"],
html:not(.dark) form input[type="password"],
html:not(.dark) form input[type="email"] {
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
}

html.dark form input[type="text"],
html.dark form input[type="password"],
html.dark form input[type="email"] {
  border: 1.5px solid rgba(75, 85, 99, 0.6) !important;
}

/* Fix autofill text color - dark mode (default since user is in dark) */
html.dark form input:-webkit-autofill,
html.dark form input:-webkit-autofill:hover,
html.dark form input:-webkit-autofill:focus,
html.dark form input:-webkit-autofill:active {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0 30px #1a2332 inset !important;
  box-shadow: 0 0 0 30px #1a2332 inset !important;
  caret-color: #f1f5f9 !important;
}

/* Fix autofill text color - light mode */
html:not(.dark) form input:-webkit-autofill,
html:not(.dark) form input:-webkit-autofill:hover,
html:not(.dark) form input:-webkit-autofill:focus,
html:not(.dark) form input:-webkit-autofill:active {
  -webkit-text-fill-color: #1e293b !important;
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  box-shadow: 0 0 0 30px #ffffff inset !important;
  caret-color: #1e293b !important;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
  outline: none !important;
}

/* Submit button enhancement */
button[type="submit"],
button[data-testid="login-button"] {
  border-radius: 0.875rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.01em;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

button[type="submit"]:hover,
button[data-testid="login-button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

button[type="submit"]:active,
button[data-testid="login-button"]:active {
  transform: translateY(0);
}

/* Social login buttons */
a[href*="/oauth/"] {
  border-radius: 0.875rem !important;
  transition: all 0.2s ease !important;
  border: 1.5px solid rgba(203, 213, 225, 0.6) !important;
}

.dark a[href*="/oauth/"] {
  border: 1.5px solid rgba(55, 65, 81, 0.6) !important;
}

a[href*="/oauth/"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Theme selector - fixed bottom left */
.absolute.bottom-0.left-0 {
  position: fixed !important;
  bottom: 1rem !important;
  left: 1rem !important;
  z-index: 50 !important;
}

/* Footer links */
div[role="contentinfo"] a {
  transition: all 0.2s ease !important;
}

div[role="contentinfo"] a:hover {
  opacity: 0.8;
}

/* Smooth page load animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: fadeInUp 0.5s ease-out;
}

/* ============================================
   Codeflex AI - Custom Dark Theme Colors
   Azul oscuro profesional en vez de negro puro
   ============================================ */
html.dark {
  /* Base grays → blue-tinted */
  --gray-900: #0b1120;
  --gray-850: #111827;
  --gray-800: #151d2e;
  --gray-700: #1e293b;
  --gray-600: #334155;
  --gray-500: #475569;

  /* Surface overrides */
  --surface-primary: #0c1425;
  --surface-primary-alt: #0c1425;
  --surface-primary-contrast: #111827;
  --surface-secondary: #111827;
  --surface-secondary-alt: #111827;
  --surface-tertiary: #1e293b;
  --surface-tertiary-alt: #1e293b;
  --surface-dialog: #111827;
  --surface-chat: #1e293b;

  /* Header */
  --header-primary: #1e293b;
  --header-hover: #334155;
  --header-button-hover: #1e293b;

  /* Borders - slightly lighter blue */
  --border-light: #1e293b;
  --border-medium: #334155;
  --border-medium-alt: #334155;
  --border-heavy: #475569;
  --border-xheavy: #64748b;

  /* Background HSL overrides */
  --background: 222 47% 5%;
  --card: 222 47% 7%;
  --secondary: 222 30% 12%;
  --muted: 222 30% 12%;
  --accent: 222 30% 12%;
  --border: 222 30% 12%;
  --input: 222 30% 12%;
}

/* Also override gizmo dark if active */
.gizmo.dark {
  --surface-primary: #0b1120;
  --surface-secondary: #151d2e;
  --surface-tertiary: #1e293b;
}

/* ============================================
   Fix: Hide tab underline in marketplace
   ============================================ */
div[role="tablist"] button .absolute.bottom-0 {
  display: none !important;
}

/* Hide default footer in chat/app area */
div[role="contentinfo"] {
  display: none !important;
}

/* Remove any bottom borders/lines from main containers */
html.dark .relative.w-full > div[role="contentinfo"],
html.dark .relative.w-full:has(> div[role="contentinfo"]) {
  border: none !important;
  border-bottom: none !important;
}

/* ============================================
   Fix: Override Tailwind gray backgrounds in dark mode
   to match blue theme (popups, menus, etc.)
   ============================================ */
html.dark .dark\:bg-gray-700 {
  background-color: #1e293b !important;
}

html.dark .dark\:bg-gray-800 {
  background-color: #151d2e !important;
}

html.dark .dark\:bg-gray-850 {
  background-color: #111827 !important;
}

html.dark .dark\:bg-gray-900 {
  background-color: #0b1120 !important;
}

/* Hide AWS Bedrock endpoint from @ mention menu */
/* Handled via custom JS injection */