/* =============================================
   Dark Mode Styles for Tennis String Advisor
   ============================================= */

/* Base transitions */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode overrides */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #111827; /* gray-900 */
  color: #f3f4f6; /* gray-100 */
}

/* Header */
html.dark header {
  background-color: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
}

html.dark header a,
html.dark header span {
  color: #f3f4f6;
}

html.dark header .text-gray-600 {
  color: #d1d5db !important; /* gray-300 */
}

html.dark header .text-gray-900 {
  color: #f9fafb !important; /* gray-50 */
}

html.dark header .bg-green-100 {
  background-color: #065f46 !important; /* green-800 */
}

html.dark header .text-green-700 {
  color: #6ee7b7 !important; /* green-300 */
}

html.dark header .hover\:bg-gray-100:hover {
  background-color: #374151 !important; /* gray-700 */
}

/* Main content backgrounds */
html.dark .bg-white {
  background-color: #1f2937 !important; /* gray-800 */
}

html.dark .bg-gray-50 {
  background-color: #111827 !important; /* gray-900 */
}

html.dark .bg-gray-100 {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Text colors */
html.dark .text-gray-900 {
  color: #f9fafb !important; /* gray-50 */
}

html.dark .text-gray-800 {
  color: #f3f4f6 !important; /* gray-100 */
}

html.dark .text-gray-700 {
  color: #e5e7eb !important; /* gray-200 */
}

html.dark .text-gray-600 {
  color: #d1d5db !important; /* gray-300 */
}

html.dark .text-gray-500 {
  color: #9ca3af !important; /* gray-400 */
}

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

/* Borders */
html.dark .border-gray-200 {
  border-color: #374151 !important; /* gray-700 */
}

html.dark .border-gray-100 {
  border-color: #4b5563 !important; /* gray-600 */
}

html.dark .border-gray-300 {
  border-color: #4b5563 !important; /* gray-600 */
}

/* Cards and shadows */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

/* Inputs */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #374151 !important; /* gray-700 */
  border-color: #4b5563 !important; /* gray-600 */
  color: #f3f4f6 !important; /* gray-100 */
}

html.dark input::placeholder {
  color: #9ca3af !important; /* gray-400 */
}

/* Tables */
html.dark table {
  background-color: #1f2937 !important;
}

html.dark th {
  background-color: #065f46 !important; /* green-800 */
}

html.dark td {
  border-color: #374151 !important;
}

html.dark tr:hover {
  background-color: #374151 !important;
}

/* Footer */
html.dark footer {
  background-color: #030712 !important; /* gray-950 */
}

/* Specific component overrides */
html.dark .bg-green-50 {
  background-color: #064e3b !important; /* green-900 */
}

html.dark .bg-blue-50 {
  background-color: #1e3a5f !important;
}

html.dark .bg-amber-50,
html.dark .bg-orange-50 {
  background-color: #78350f !important; /* amber-900 */
}

html.dark .bg-red-50 {
  background-color: #7f1d1d !important; /* red-900 */
}

html.dark .bg-purple-50 {
  background-color: #581c87 !important; /* purple-900 */
}

/* Hero section - keep gradient visible */
html.dark .hero-bg {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.95) 0%, rgba(20, 83, 45, 0.9) 100%) !important;
}

/* Cards hover states */
html.dark .hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

html.dark .hover\:border-green-100:hover,
html.dark .hover\:border-green-500:hover {
  border-color: #059669 !important; /* green-600 */
}

/* Radio buttons and option cards in configurator */
html.dark .option-card {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark .option-card:hover {
  border-color: #10b981 !important; /* green-500 */
}

html.dark input[type="radio"]:checked + .option-card {
  border-color: #10b981 !important;
  background-color: #064e3b !important;
}

/* Sticky bottom bar */
html.dark #stickyBottomBar {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

/* Paywall modal */
html.dark #configuratorPaywall > div {
  background-color: #1f2937 !important;
}

/* Blog article cards */
html.dark .prose {
  color: #e5e7eb !important;
}

html.dark .prose h2,
html.dark .prose h3 {
  color: #f9fafb !important;
}

html.dark .prose a {
  color: #6ee7b7 !important;
}

/* Premium CTA section */
html.dark #ctaPremiumSection {
  background: linear-gradient(to bottom right, #78350f, #7c2d12) !important;
  border-color: #92400e !important;
}

/* Back to top button */
html.dark #backToTop {
  background-color: #059669 !important;
}

html.dark #backToTop:hover {
  background-color: #047857 !important;
}