/* Light/Dark Mode Styles */
:root {
  --background-color: #f9fafb;
  --text-color: #1f2937;
  --header-bg: #ffffff;
  --header-text: #4f46e5;
  --nav-text: #6b7280;
  --font-sans: 'Geist Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --nav-hover: #374151;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --footer-bg: #ffffff;
  --footer-text: #6b7280;
  --card-bg: #ffffff;
  --card-bg-rgb: 255, 255, 255;
  --border-color: rgba(229, 231, 235, 0.8);
  --border-color-rgb: 229, 231, 235;
  --prose-headings: #111827;
  --prose-body: #374151;
  --input-bg: #ffffff;
  --input-border: rgba(209, 213, 219, 0.8);
  --hover-bg: rgba(243, 244, 246, 0.7);
  --logo-height: 3rem;
  --logo-max-width: 200px;
  --accent-color: #4f46e5; /* Added accent color */
  --accent-color-rgb: 79, 70, 229; /* Added accent color rgb */
}

[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #f9fafb;
  --header-bg: #111111;
  --header-text: #818cf8;
  --accent-color: #818cf8; /* Added accent color for dark mode */
  --accent-color-rgb: 129, 140, 248; /* Added accent color rgb for dark mode */
  --nav-text: #9ca3af;
  --font-sans: 'Geist Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --nav-hover: #d1d5db;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --footer-bg: #111111;
  --footer-text: #9ca3af;
  --card-bg: #111111;
  --card-bg-rgb: 17, 17, 17;
  --border-color: rgba(75, 85, 99, 0.6);
  --border-color-rgb: 75, 85, 99;
  --prose-headings: #f9fafb;
  --prose-body: #d1d5db;
  --input-bg: #111111;
  --input-border: rgba(107, 114, 128, 0.4);
  --hover-bg: rgba(55, 65, 81, 0.5);
  --sidebar-bg: #111111;
  --sidebar-border: rgba(75, 85, 99, 0.6);
  --sidebar-text: #d1d5db;
  --sidebar-hover: rgba(55, 65, 81, 0.5);
  --logo-height: 3rem;
  --logo-max-width: 200px;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

header {
  background-color: var(--header-bg) !important;
  box-shadow: 0 1px 3px var(--shadow-color) !important;
  border-bottom: 1px solid var(--border-color);
}

header .text-indigo-600 {
  color: var(--header-text);
}

header nav a {
  color: var(--nav-text);
}

header nav a:hover {
  color: var(--nav-hover);
}

footer {
  background-color: var(--footer-bg) !important;
  border-top: 1px solid var(--border-color);
}

footer p {
  color: var(--footer-text);
}

/* Prose content styling */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--prose-headings) !important;
}

.prose p, .prose ul, .prose ol, .prose li {
  color: var(--prose-body) !important;
}

.prose a {
  color: var(--accent-color) !important;
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
}

.prose code, .prose pre {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--prose-body) !important;
}

/* Additional specific styling for code blocks to ensure contrast */
[data-theme="light"] .prose code, [data-theme="light"] .prose pre {
  color: #1f2937 !important; /* Dark text for light mode */
  background-color: #f3f4f6 !important; /* Light gray background for better contrast */
}

[data-theme="dark"] .prose code, [data-theme="dark"] .prose pre {
  color: #e5e7eb !important; /* Light text for dark mode */
  background-color: #1f2937 !important; /* Darker background for better contrast */
}

.prose strong {
  color: var(--prose-headings) !important;
}

.prose ul > li::marker,
.prose ol > li::marker {
  color: var(--prose-body) !important;
}

.prose blockquote {
  border-color: var(--border-color) !important;
  color: var(--prose-body) !important;
}

.prose hr {
  border-color: var(--border-color) !important;
}

/* Input and card styling */
input, select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
}

textarea {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--input-border) !important;
}

textarea, input, select {
  color: var(--text-color) !important;
}

/* Login/Register Form Styling */
.max-w-md.mx-auto.mt-8.p-6 {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px var(--shadow-color) !important;
}

.max-w-md.mx-auto.mt-8.p-6 input {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.max-w-md.mx-auto.mt-8.p-6 input:focus {
  outline: none !important;
  border-color: var(--header-text) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2) !important;
}
/* Style for card-like containers (e.g., Recent/Trending Searches) */
div.shadow.border.rounded-2xl {
  background-color: var(--card-bg);
}

/* Fix form label visibility in light mode */
.text-gray-700.dark\:text-gray-300,
.text-sm.font-medium.text-gray-700.dark\:text-gray-300,
label.block.text-sm.font-medium,
.block.text-sm.font-medium {
  color: #374151 !important; /* Darker gray for better contrast in light mode */
  font-weight: 600 !important;
}

[data-theme="dark"] .text-gray-700.dark\:text-gray-300,
[data-theme="dark"] .text-sm.font-medium.text-gray-700.dark\:text-gray-300,
[data-theme="dark"] label.block.text-sm.font-medium,
[data-theme="dark"] .block.text-sm.font-medium {
  color: #d1d5db !important; /* Light gray for dark mode */
}

.shadow, div[class*="shadow"] {
  box-shadow: 0 1px 3px var(--shadow-color) !important;
}

.hover\:bg-opacity-5:hover {
  background-color: var(--hover-bg) !important;
}

.border-opacity-10, .border-opacity-20 {
  border-color: var(--border-color) !important;
}

.divide-opacity-20 > * + * {
  border-color: var(--border-color) !important;
}

/* Theme Toggle Button Styles */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: rgba(107, 114, 128, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--nav-text);
  transition: stroke 0.3s ease;
}

.theme-toggle:hover svg {
  stroke: var(--nav-hover);
}

/* Dropdown Menu Styles */
.user-dropdown {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden;
  transition: all 0.2s ease;
  padding: 0.5rem 0;
  background-color: var(--card-bg) !important;
}

.dropdown-item {
  color: var(--text-color) !important;
  transition: all 0.2s ease;
  position: relative;
  font-weight: 500;
}

.dropdown-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color) !important;
}

.dropdown-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--header-text) !important;
}

.dropdown-item:hover .dropdown-icon,
.dropdown-item:hover span {
  color: var(--header-text) !important;
}

/* Fix for dropdown menu items text selection outline */
.dropdown-item span,
.dropdown-item i,
.dropdown-item div,
.user-dropdown a,
.user-dropdown span,
.user-dropdown i,
.user-dropdown div,
#userDropdownMenu,
#userDropdownMenu *,
.user-dropdown *,
.dropdown-item * {
  outline: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.dropdown-icon {
  color: var(--header-text) !important;
}

/* User dropdown button styling */
#userDropdownButton {
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

#userDropdownButton:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--header-text) !important;
}

/* Mobile Menu Styles */
#mobile-menu {
  transition: all 0.3s ease;
  border-top: 1px solid var(--border-color);
}

#mobile-menu a {
  color: var(--text-color) !important;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-color);
}

#mobile-menu a:last-child {
  border-bottom: none;
}

#mobile-menu a:hover {
  background-color: var(--hover-bg) !important;
  color: var(--header-text) !important;
}

#mobile-menu a:hover i,
#mobile-menu a:hover span {
  color: var(--header-text) !important;
}

/* Fix for mobile menu items text selection outline */
#mobile-menu a span,
#mobile-menu a i,
#mobile-menu a div,
.mobile-menu-item span,
.mobile-menu-item i {
  outline: none !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mobile-menu-item .menu-icon {
  color: var(--header-text) !important;
}

@media (max-width: 768px) {
  header .logo {
    max-height: 2.5rem;
  }
}

/* Add these new rules */
nav.w-64 {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

nav.w-64 a {
  color: var(--prose-body) !important;
}

nav.w-64 a:hover {
  background-color: var(--hover-bg) !important;
  color: var(--prose-headings) !important;
}

nav.w-64 a.active {
  background-color: var(--hover-bg);
  color: var(--header-text) !important;
}

/* Glass effect styles */
.backdrop-filter {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* For browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .backdrop-filter, .backdrop-blur-md {
    background-color: var(--card-bg) !important;
    opacity: 0.95 !important;
  }

  .backdrop-blur-sm {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* Add logo styling */
header img.logo {
    height: var(--logo-height);
    width: 32px;
    max-width: var(--logo-max-width);
    object-fit: contain;
    transition: all 0.3s ease;
}

/* For admin dashboard preview */
.admin-logo-preview {
    max-height: 5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sidebar-active {
    background-color: var(--accent-color) !important;
    color: white !important;
}

/* Force visibility for agentic step connectors */
.agentic-connector {
  background-color: transparent !important; /* Ensure no background overrides border */
  border-left-style: dashed !important; /* Force dashed style */
  border-left-width: 2px !important; /* Force width */
  border-color: currentColor !important; /* Use current text color */
  opacity: 0.3 !important; /* Set fixed opacity */
  height: 1rem !important; /* Ensure consistent height */
  margin-left: 9px !important; /* Consistent alignment */
  position: relative !important; /* Ensure proper stacking */
  z-index: 10 !important; /* Keep above background */
  pointer-events: none !important; /* Prevent interaction */
}

/* Ensure parent opacity doesn't affect connector visibility */
.step-item.opacity-50 .agentic-connector {
  opacity: 0.3 !important;
}

/* Dark mode support */
[data-theme="dark"] .agentic-connector {
  border-color: rgba(209, 213, 219, 0.5) !important;
}

/* Accent Button Styles */
.btn-accent {
  background-color: var(--accent-color) !important;
  color: white !important;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-accent:hover {
  background-color: color-mix(in srgb, var(--accent-color) 85%, black) !important; /* Darken accent color by 15% */
}

.btn-accent:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.4) !important;
}

/* Admin Pages Styling */
.bg-white.dark\:bg-gray-800.shadow.overflow-hidden.rounded-lg {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px var(--shadow-color) !important;
}

.bg-white.dark\:bg-gray-800.shadow.overflow-hidden.rounded-lg .px-4.py-5.sm\:px-6 {
  border-bottom: 1px solid var(--border-color) !important;
}

.bg-white.dark\:bg-gray-800.shadow.overflow-hidden.rounded-lg table {
  width: 100% !important;
}

.bg-white.dark\:bg-gray-800.shadow.overflow-hidden.rounded-lg th {
  color: var(--prose-headings) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  text-align: left !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.bg-white.dark\:bg-gray-800.shadow.overflow-hidden.rounded-lg td {
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

/* Fix for focus outline on interactive elements */
a, button, [role="button"], .dropdown-item, #userDropdownButton, .theme-toggle,
.mobile-menu-item, nav a, .user-dropdown a, header nav a, .text-red-400, .text-green-400,
.text-red-800, .text-green-800, .rounded-md p, .rounded-md span, .alert-circle, .check-circle {
  outline: none !important;
}

/* Provide alternative focus styles for accessibility */
a:focus, button:focus, [role="button"]:focus {
  box-shadow: none !important;
}

/* Fix for alert messages */
.rounded-md.bg-red-50, .rounded-md.bg-green-50 {
  outline: none !important;
}

.rounded-md.bg-red-50 *, .rounded-md.bg-green-50 * {
  outline: none !important;
}

/* Related search pills styling */
.related-search-pill {
  background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.2) !important;
  border: 1px solid rgba(var(--border-color-rgb, 229, 231, 235), 0.3) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.related-search-pill:hover {
  border-color: var(--accent-color) !important;
}

[data-theme="light"] .related-search-pill {
  background-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .related-search-pill {
  background-color: rgba(17, 17, 17, 0.5) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .related-search-pill {
    background-color: var(--card-bg) !important;
    opacity: 0.9 !important;
  }
}

/* Admin Form Styling */
.px-4.py-5.sm\:p-6 input[type="text"],
.px-4.py-5.sm\:p-6 input[type="password"],
.px-4.py-5.sm\:p-6 input[type="email"] {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-color) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.px-4.py-5.sm\:p-6 input[type="text"]:focus,
.px-4.py-5.sm\:p-6 input[type="password"]:focus,
.px-4.py-5.sm\:p-6 input[type="email"]:focus {
  outline: none !important;
  border-color: var(--header-text) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2) !important;
}