/* ============================================= DARK MODE OVERRIDES Applied when has class "dark" ============================================= */ html.dark body { background-color: #0d1520; color: #e2e8f0; } /* ---- Nav / Header ---- */ html.dark header { background-color: #080e17 !important; border-bottom: 1px solid #1e2d42 !important; } /* ---- General backgrounds ---- */ html.dark .bg-white { background-color: #111c2b !important; } html.dark .bg-gray-light, html.dark .bg-\[#f8f9fa\] { background-color: #0d1520 !important; } /* ---- Cards ---- */ html.dark .rounded-xl, html.dark .rounded-2xl { border: 1px solid #1e2d42; } html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important; } html.dark .rounded-xl:hover, html.dark .rounded-2xl:hover { box-shadow: 0 4px 28px rgba(52, 152, 219, 0.12) !important; } /* ---- Borders ---- */ html.dark .border, html.dark .border-gray-border, html.dark .border-2 { border-color: #1e2d42 !important; } /* ---- Text hierarchy ---- */ html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #f1f5f9; } html.dark .text-gray-text, html.dark .text-\[\#6c757d\] { color: #8899aa !important; } html.dark .text-navy, html.dark .text-\[\#2c3e50\] { color: #7ec8f4 !important; } html.dark .text-gray-300 { color: #8899aa !important; } html.dark .text-gray-400 { color: #5a6a7a !important; } /* ---- Navy backgrounds ---- */ html.dark .bg-navy { background-color: #080e17 !important; } /* ---- Hero gradient sections ---- */ html.dark .bg-gradient-to-br.from-navy { background: linear-gradient(135deg, #080e17 0%, #0d1e30 60%, #112240 100%) !important; } html.dark .bg-gradient-to-br.from-gray-light { background: linear-gradient(135deg, #0d1520 0%, #0f1e30 100%) !important; } /* ---- Blue accent ---- */ html.dark .bg-blue { background-color: #2e86c1 !important; } html.dark .bg-blue:hover, html.dark .hover\:bg-blue-dark:hover { background-color: #2478ab !important; } html.dark .text-blue { color: #60b4f0 !important; } html.dark .border-l-4.border-blue { border-left-color: #3498db !important; } /* ---- Buttons with navy bg ---- */ html.dark .bg-navy.hover\:bg-gray-700:hover { background-color: #1a2535 !important; } /* ---- Inputs & selects ---- */ html.dark input, html.dark select, html.dark textarea { background-color: #0d1520 !important; color: #e2e8f0 !important; border-color: #1e2d42 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #4a5f72 !important; } html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background-color: #080e17 !important; color: #3a4a5a !important; } /* ---- Footer ---- */ html.dark footer { background-color: #080e17 !important; border-top: 1px solid #1e2d42; } html.dark footer .border-t { border-color: #1e2d42 !important; } /* ---- Dashed placeholder boxes ---- */ html.dark .border-dashed { border-color: #1e2d42 !important; } /* ---- Opacity overlays (disabled form) ---- */ html.dark .bg-white.bg-opacity-70 { background-color: rgba(17, 28, 43, 0.85) !important; } /* ---- Pedigree champion highlight rows ---- */ html.dark .border-l-4 { background-color: #0d1a28 !important; } /* ---- Blue info boxes (bg-blue sections inside cards) ---- */ html.dark .bg-blue.text-white { background-color: #1a3a5c !important; border: 1px solid #2e6090; } /* ---- Subtle section divider via alternating bg ---- */ html.dark section.bg-white + section.bg-gray-light, html.dark section.bg-gray-light + section.bg-white { border-top: 1px solid #1e2d42; } /* ---- Dark mode toggle button ---- */ #dark-toggle { cursor: pointer; background: none; border: none; padding: 0; line-height: 1; font-size: 1.25rem; transition: transform 0.2s ease; } #dark-toggle:hover { transform: scale(1.15); }