/* Dark Mode Styles - v2 */

/* Light mode (default) variables */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #1a1a1a;
  --text-secondary: #4d4d4d;
  --text-tertiary: #6b7280;
  --border-color: #e5e7eb;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --background-color: #ffffff;
  --accent-color: #fefc8a;
  --primary-color: #f9f506;
  --secondary-color: #fffb4d;
  --card-background: #fffbeb;
}

/* Dark mode variables */
.dark-mode {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --border-color: #4b5563;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  --background-color: #1a1a1a;
  --accent-color: #3a3a3a;
  --card-background: #2d2d2d;
}

/* Apply background and text colors */
.dark-mode,
.dark-mode body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Header and footer backgrounds */
.dark-mode header,
.dark-mode footer {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

/* Card and panel backgrounds */
.dark-mode .bg-white {
  background-color: var(--bg-primary) !important;
}

.dark-mode .bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

/* Text colors - comprehensive coverage */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-gray-700,
.dark-mode .text-[var\(--text-primary\)] {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-[var\(--text-secondary\)] {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-400 {
  color: var(--text-tertiary) !important;
}

/* Default text color for dark mode */
.dark-mode {
  color: var(--text-primary);
}

/* Headings - all should be visible */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--text-primary) !important;
}

/* Paragraphs and spans */
.dark-mode p,
.dark-mode span:not(.material-symbols-outlined) {
  color: inherit !important;
}

/* Text weight classes - force light text */
.dark-mode .font-semibold,
.dark-mode .font-bold,
.dark-mode .font-medium {
  color: var(--text-primary) !important;
}

/* All text elements without specific color classes should be light */
.dark-mode *:not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-green"]):not([class*="text-yellow"]):not([class*="text-purple"]):not([class*="text-pink"]):not(.material-symbols-outlined) {
  color: inherit !important;
}

/* SVG icons in dark mode */
.dark-mode svg {
  fill: currentColor;
}

/* Links in dark mode */
.dark-mode a {
  color: inherit;
}

/* Border colors */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
  border-color: var(--border-color) !important;
}

/* Input and form elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Buttons */
.dark-mode button:not(.category-filter):not([class*="bg-"]):not(.theme-toggle) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.dark-mode button:hover:not([class*="bg-"]) {
  background-color: var(--bg-tertiary);
}

/* Shadows */
.dark-mode .shadow,
.dark-mode .shadow-sm {
  box-shadow: var(--shadow);
}

.dark-mode .shadow-md {
  box-shadow: var(--shadow-md);
}

.dark-mode .shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Links */
.dark-mode a:not([class*="text-"]) {
  color: var(--text-primary);
}

/* Override any remaining black text */
.dark-mode [class*="text-black"] {
  color: var(--text-primary) !important;
}

/* Main content areas */
.dark-mode main,
.dark-mode section,
.dark-mode article,
.dark-mode div {
  color: inherit;
}

/* Ensure all text elements inherit properly */
.dark-mode * {
  border-color: inherit;
}

/* Force text visibility for common class patterns */
.dark-mode .text-xl,
.dark-mode .text-2xl,
.dark-mode .text-3xl,
.dark-mode .text-lg,
.dark-mode .text-base,
.dark-mode .text-sm,
.dark-mode .text-xs {
  color: inherit !important;
}

/* Specific overrides for elements that commonly stay black */
.dark-mode h1:not([class*="text-"]),
.dark-mode h2:not([class*="text-"]),
.dark-mode h3:not([class*="text-"]) {
  color: var(--text-primary) !important;
}

/* Override Tailwind defaults for dark mode */
html.dark-mode * {
  border-color: var(--border-color);
}

html.dark-mode {
  color-scheme: dark;
}

/* Map markers should stay visible */
.dark-mode .leaflet-container {
  background-color: var(--bg-secondary);
}

/* Category filter buttons in dark mode */
.dark-mode .category-filter {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.dark-mode .category-filter:hover {
  background-color: var(--bg-tertiary);
}

/* Keep primary color buttons visible */
.dark-mode .bg-\[var\(--primary-color\)\],
.dark-mode [class*="bg-[var(--primary-color)]"] {
  color: var(--text-primary) !important;
}

/* Ensure images and icons remain visible */
.dark-mode img {
  opacity: 0.9;
}

.dark-mode .dark-mode img:hover {
  opacity: 1;
}

/* Theme toggle button */
.theme-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: var(--bg-tertiary);
}

.theme-icon {
  font-size: 1.25rem;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* NUCLEAR OPTION - Force all text to be light in dark mode */
html.dark-mode,
html.dark-mode body,
html.dark-mode main,
html.dark-mode div,
html.dark-mode section,
html.dark-mode article,
html.dark-mode header,
html.dark-mode footer,
html.dark-mode nav,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode span,
html.dark-mode a,
html.dark-mode label,
html.dark-mode button {
  color: var(--text-primary) !important;
}

/* Exception: Keep colored text colored */
html.dark-mode [class*="text-red"],
html.dark-mode [class*="text-blue"],
html.dark-mode [class*="text-green"],
html.dark-mode [class*="text-yellow"],
html.dark-mode [class*="text-purple"],
html.dark-mode [class*="text-pink"],
html.dark-mode [class*="text-indigo"],
html.dark-mode [class*="text-orange"] {
  filter: brightness(1.3);
}