/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Dark theme color palette inspired by Figma design */
:root {
  /* Almost black backgrounds like Figma design */
  --color-navy-950: #0a0a0a;  /* Main background - almost black */
  --color-navy-900: #121212;  /* Navbar */
  --color-navy-800: #171717;  /* Cards/elevated surfaces */
  --color-navy-750: #1f1f1f;  /* Hover states */
  --color-navy-700: #262626;  /* Borders */
  --color-navy-600: #486581;
  --color-navy-500: #627d98;
  --color-navy-400: #829ab1;
  --color-navy-300: #9fb3c8;
  --color-navy-200: #bcccdc;
  --color-navy-100: #d9e2ec;
  --color-navy-50: #f0f4f8;
}

/* Manual dark mode classes using .dark parent selector */
/* !important is needed to override Tailwind's media query */
.dark .dark\:bg-navy-950 {
  background-color: var(--color-navy-950) !important;
}

.dark .dark\:bg-navy-900 {
  background-color: var(--color-navy-900) !important;
}

.dark .dark\:bg-navy-800 {
  background-color: var(--color-navy-800) !important;
}

.dark .dark\:bg-navy-750 {
  background-color: var(--color-navy-750) !important;
}

.dark .dark\:bg-navy-700 {
  background-color: var(--color-navy-700) !important;
}

.dark .dark\:bg-navy-600 {
  background-color: var(--color-navy-600) !important;
}

/* Standard Tailwind gray colors with !important */
.dark .dark\:bg-gray-700 {
  background-color: #374151 !important;
}

.dark .dark\:bg-gray-800 {
  background-color: #1f2937 !important;
}

.dark .dark\:hover\:bg-gray-600:hover {
  background-color: #4b5563 !important;
}

.dark .dark\:bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.dark .dark\:from-navy-950 {
  --tw-gradient-from: var(--color-navy-950);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-navy-900 {
  --tw-gradient-from: var(--color-navy-900);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:via-navy-900 {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--color-navy-900), var(--tw-gradient-to);
}

.dark .dark\:via-navy-800 {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-from), var(--color-navy-800), var(--tw-gradient-to);
}

.dark .dark\:to-navy-950 {
  --tw-gradient-to: var(--color-navy-950);
}

.dark .dark\:to-navy-900 {
  --tw-gradient-to: var(--color-navy-900);
}

.dark .dark\:text-white {
  color: white !important;
}

.dark .dark\:text-gray-100 {
  color: #f3f4f6 !important;
}

.dark .dark\:text-gray-300 {
  color: #d1d5db !important;
}

.dark .dark\:text-gray-400 {
  color: #9ca3af !important;
}

/* Accent colors */
.dark .dark\:bg-accent-primary {
  background-color: #6366F1 !important;
}

.dark .dark\:hover\:bg-accent-primary-hover:hover {
  background-color: #5B4FFF !important;
}

.dark .dark\:text-accent-primary {
  color: #6366F1 !important;
}

.dark .dark\:hover\:text-accent-primary-hover:hover {
  color: #5B4FFF !important;
}

.dark .dark\:text-secondary {
  color: #a0a0a0 !important;
}

.dark .dark\:border-dark {
  border-color: #262626 !important;
}

.dark .dark\:border-navy-700 {
  border-color: var(--color-navy-700);
}

.dark .dark\:border-navy-800 {
  border-color: var(--color-navy-800);
}

.dark .dark\:border-green-800 {
  border-color: #166534;
}

.dark .dark\:shadow-navy-950\/50 {
  --tw-shadow-color: rgba(10, 25, 41, 0.5);
}

.dark .dark\:shadow-navy-950\/70 {
  --tw-shadow-color: rgba(10, 25, 41, 0.7);
}

.dark .dark\:divide-navy-700 > :not(:last-child) {
  border-color: var(--color-navy-700);
}

.dark .dark\:hover\:bg-navy-750:hover {
  background-color: var(--color-navy-750) !important;
}

.dark .dark\:hover\:bg-navy-700:hover {
  background-color: var(--color-navy-700) !important;
}

.dark .dark\:hover\:bg-navy-600:hover {
  background-color: var(--color-navy-600) !important;
}

.dark .dark\:text-yellow-300 {
  color: #fde047;
}

.dark .dark\:text-blue-300 {
  color: #93c5fd;
}

.dark .dark\:text-red-400 {
  color: #f87171;
}

.dark .dark\:hover\:text-red-300:hover {
  color: #fca5a5;
}

.dark .dark\:bg-red-900\/30 {
  background-color: rgba(127, 29, 29, 0.3);
}

.dark .dark\:bg-blue-900\/30 {
  background-color: rgba(30, 58, 138, 0.3);
}

.dark .dark\:bg-green-900\/30 {
  background-color: rgba(20, 83, 45, 0.3);
}

.dark .dark\:border-red-800 {
  border-color: #991b1b;
}

.dark .dark\:border-navy-600 {
  border-color: var(--color-navy-600);
}

.dark .dark\:bg-navy-700 {
  background-color: var(--color-navy-700);
}

.dark .dark\:border-red-600 {
  border-color: #dc2626;
}

/* Custom Scrollbar Styling */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
}

::-webkit-scrollbar-track {
  background: #ffffff !important; /* Light mode track - white like content */
}

::-webkit-scrollbar-thumb {
  background: #f3f4f6 !important; /* Light mode thumb - light gray like navbar */
  border-radius: 10px !important;
  border: 4px solid #ffffff !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #e5e7eb !important; /* Light mode thumb hover - slightly darker */
}

/* Dark mode scrollbar - targeting html.dark specifically */
html.dark::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track,
html.dark body::-webkit-scrollbar-track {
  background: #0a0a0a !important; /* Navy-950 - main content background */
}

html.dark::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb,
html.dark body::-webkit-scrollbar-thumb {
  background: #121212 !important; /* Navy-900 - navbar color */
  border: 4px solid #0a0a0a !important; /* Border matches track */
  border-radius: 10px !important;
}

html.dark::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover,
html.dark body::-webkit-scrollbar-thumb:hover {
  background: #171717 !important; /* Navy-800 - slightly lighter on hover */
}

/* Firefox */
* {
  scrollbar-width: auto !important;
  scrollbar-color: #f3f4f6 #ffffff !important; /* thumb track - light mode */
}

html.dark,
html.dark *,
html.dark body {
  scrollbar-color: #121212 #0a0a0a !important; /* navbar color thumb, content bg track */
}