/* ============================================ Dark Mode Theme - Fresh Kitchen Recipes Applied via .dark class on element ============================================ */ /* Prevent layout shift from scrollbar - force consistent scrollbar on body instead of html */ body { overflow-y: scroll; overflow-x: hidden; } /* Custom scrollbar styling - using dark mode style for both themes */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #2d2d2d; } ::-webkit-scrollbar-thumb { background: #666; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #888; } html.dark ::-webkit-scrollbar-track { background: #2d2d2d; } html.dark ::-webkit-scrollbar-thumb { background: #666; } html.dark ::-webkit-scrollbar-thumb:hover { background: #888; } /* Firefox scrollbar */ * { scrollbar-width: auto; scrollbar-color: #666 #2d2d2d; } html.dark * { scrollbar-color: #666 #2d2d2d; } /* --- Base / Body --- */ html.dark body { background-color: #111827 !important; /* gray-900 - override inline/arbitrary values */ color: #e5e7eb; /* gray-200 */ } /* Override the page background (cream/tan in light mode) */ html.dark .bg-page-bg { background-color: #111827 !important; /* gray-900 */ } /* --- Main Content Area --- */ html.dark .bg-gray-50 { background-color: #111827; } html.dark .bg-gray-100 { background-color: #1f2937; } html.dark .bg-gray-200 { background-color: #374151; } html.dark .bg-white { background-color: #1f2937; } /* --- Text Colors --- */ html.dark .text-gray-900 { color: #f3f4f6; } html.dark .text-gray-800 { color: #e5e7eb; } html.dark .text-gray-700 { color: #d1d5db; } html.dark .text-gray-600 { color: #9ca3af; } html.dark .text-gray-500 { color: #9ca3af; } html.dark .text-gray-400 { color: #6b7280; } html.dark .text-primary-900 { color: #e3f2fd; } html.dark .text-primary-800 { color: #b3d9f2; } html.dark .text-primary-700 { color: #7bb3e8; } /* --- Border Colors --- */ html.dark .border-gray-100 { border-color: #374151; } html.dark .border-gray-200 { border-color: #374151; } html.dark .border-gray-300 { border-color: #4b5563; } html.dark .border-gray-400 { border-color: #6b7280; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } /* --- Cards & Panels --- */ html.dark .card { background-color: #1f2937; border-color: #374151; } html.dark .card-header { background-color: #111827; border-color: #374151; color: #e5e7eb; } html.dark .card-body { color: #d1d5db; } html.dark .rounded-2xl.shadow-xl.border-2.border-gray-200 { border-color: #374151; } /* --- Forms & Inputs --- */ html.dark input:where(:not([type])), html.dark input:where([type=text]), html.dark input:where([type=email]), html.dark input:where([type=password]), html.dark input:where([type=search]), html.dark input:where([type=tel]), html.dark input:where([type=url]), html.dark input:where([type=number]), html.dark input:where([type=date]), html.dark select, html.dark textarea { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } html.dark input:where(:not([type]))::placeholder, html.dark input:where([type=text])::placeholder, html.dark input:where([type=email])::placeholder, html.dark input:where([type=password])::placeholder, html.dark input:where([type=search])::placeholder, html.dark textarea::placeholder { color: #6b7280; } html.dark input:where(:not([type])):focus, html.dark input:where([type=text]):focus, html.dark input:where([type=email]):focus, html.dark input:where([type=password]):focus, html.dark input:where([type=search]):focus, html.dark select:focus, html.dark textarea:focus { border-color: #5a9dd6; --tw-ring-color: rgba(90, 157, 214, 0.3); } html.dark .form-input { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } html.dark .form-label { color: #e5e7eb; } /* Disabled inputs */ html.dark input:disabled, html.dark .cursor-not-allowed { background-color: #111827 !important; color: #6b7280 !important; } /* Select dropdown arrow */ html.dark select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); } /* --- Dropdown Menus --- */ html.dark .bg-white.rounded-xl.shadow-2xl { background-color: #1f2937; border-color: #374151; } html.dark .ring-1.ring-black { --tw-ring-color: rgb(75 85 99); } /* --- Alert / Status Banners --- */ html.dark .bg-gradient-to-r.from-green-50, html.dark .bg-gradient-to-r.from-green-100 { background: linear-gradient(to right, #064e3b, #065f46); } html.dark .bg-gradient-to-r.from-red-50 { background: linear-gradient(to right, #7f1d1d, #991b1b); } html.dark .bg-gradient-to-r.from-blue-50, html.dark .bg-gradient-to-r.from-blue-50.to-indigo-50 { background: linear-gradient(to right, #1e3a5f, #1e3a6f); } html.dark .bg-gradient-to-r.from-yellow-50 { background: linear-gradient(to right, #78350f, #92400e); } html.dark .bg-gradient-to-br.from-blue-50.to-indigo-50 { background: linear-gradient(to bottom right, #1e3a5f, #1e2a6f); } /* Info/status text in dark alerts */ html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-blue-700 { color: #93c5fd; } html.dark .text-green-800 { color: #86efac; } html.dark .text-green-700 { color: #86efac; } html.dark .text-red-800 { color: #fca5a5; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-yellow-700 { color: #fde68a; } /* --- Shadows --- */ html.dark .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } html.dark .shadow-lg { --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } html.dark .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* --- Back-to-top button --- */ html.dark #back-to-top { background-color: #3d7ab8; } html.dark #back-to-top:hover { background-color: #5a9dd6; } /* --- Tables --- */ html.dark table { border-color: #374151; } html.dark thead { background-color: #111827; } html.dark thead th { color: #e5e7eb; border-color: #374151; } html.dark tbody tr { border-color: #374151; } html.dark tbody tr:hover { background-color: #374151; } html.dark tbody td { color: #d1d5db; } /* --- Recipe Cards / Listing Cards --- */ html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-xl, html.dark .bg-white.rounded-lg { background-color: #1f2937; } /* --- Hover States --- */ html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; } html.dark .hover\:bg-primary-50:hover { background-color: #1e3a5f !important; } html.dark .hover\:bg-red-50:hover { background-color: #451a1a !important; } html.dark .hover\:bg-green-50:hover { background-color: #14432a !important; } html.dark .hover\:bg-blue-50:hover { background-color: #1e3a5f !important; } html.dark .hover\:bg-orange-50:hover { background-color: #431407 !important; } html.dark .hover\:bg-pink-50:hover { background-color: #4a1a2e !important; } html.dark .hover\:bg-purple-50:hover { background-color: #3b0f5e !important; } html.dark .hover\:bg-yellow-50:hover { background-color: #3f3407 !important; } html.dark .hover\:bg-amber-50:hover { background-color: #3f3407 !important; } /* --- Notification Dropdown --- */ html.dark .bg-white.rounded-xl.shadow-2xl.border.border-gray-200 { background-color: #1f2937; border-color: #374151; } html.dark .bg-blue-50 { background-color: #1e3a5f; } html.dark .bg-blue-100 { background-color: #1e3a5f; } html.dark .hover\:bg-blue-100:hover { background-color: #253d5f !important; } /* --- Prose / Typography plugin --- */ html.dark .prose { --tw-prose-body: #d1d5db; --tw-prose-headings: #f3f4f6; --tw-prose-lead: #9ca3af; --tw-prose-links: #93c5fd; --tw-prose-bold: #f3f4f6; --tw-prose-counters: #9ca3af; --tw-prose-bullets: #6b7280; --tw-prose-hr: #374151; --tw-prose-quotes: #e5e7eb; --tw-prose-quote-borders: #4b5563; --tw-prose-captions: #9ca3af; --tw-prose-kbd: #f3f4f6; --tw-prose-code: #f3f4f6; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #111827; --tw-prose-th-borders: #4b5563; --tw-prose-td-borders: #374151; color: var(--tw-prose-body); } /* --- Gradient backgrounds used throughout --- */ html.dark .bg-gradient-to-br.from-navy-100.to-navy-200 { background: linear-gradient(to bottom right, #132f4c, #1e4976); } html.dark .bg-gradient-to-br.from-gray-50 { background: linear-gradient(to bottom right, #111827, #1f2937); } html.dark .bg-gradient-to-r.from-gray-50, html.dark .bg-gradient-to-r.from-gray-100 { background: linear-gradient(to right, #111827, #1f2937); } /* --- Colored category/tag backgrounds in dark mode --- */ html.dark .bg-green-50 { background-color: #14432a; } html.dark .bg-green-100 { background-color: #14532d; } html.dark .bg-red-50 { background-color: #451a1a; } html.dark .bg-red-100 { background-color: #4c1d1d; } html.dark .bg-yellow-50 { background-color: #3f3407; } html.dark .bg-yellow-100 { background-color: #422d06; } html.dark .bg-orange-50 { background-color: #431407; } html.dark .bg-orange-100 { background-color: #451a03; } html.dark .bg-purple-50 { background-color: #3b0f5e; } html.dark .bg-purple-100 { background-color: #3b0764; } html.dark .bg-indigo-100 { background-color: #1e1b4b; } html.dark .bg-pink-100 { background-color: #4a1a2e; } html.dark .bg-amber-50 { background-color: #3f3407; } html.dark .bg-amber-100 { background-color: #422d06; } html.dark .bg-teal-100 { background-color: #042f2e; } html.dark .bg-sky-100 { background-color: #0c4a6e; } html.dark .bg-rose-100 { background-color: #4c0519; } html.dark .bg-violet-100 { background-color: #2e1065; } html.dark .bg-primary-100 { background-color: #0a1929; } /* --- Scrollbar styling --- */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* --- Dark mode toggle switch --- */ .dark-mode-toggle { position: relative; width: 3.5rem; height: 2rem; border-radius: 9999px; cursor: pointer; transition: background-color 0.3s ease; background-color: #d1d5db; border: none; padding: 0; flex-shrink: 0; overflow: hidden; } .dark-mode-toggle.active { background-color: #3d7ab8; } .dark-mode-toggle .toggle-knob { position: absolute; top: 0.25rem; left: 0.25rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: white; transition: transform 0.3s ease; display: block; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); overflow: hidden; } .dark-mode-toggle .toggle-knob svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease; width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .dark-mode-toggle.active .toggle-knob { transform: translateX(1.5rem); } /* --- Prevent flash of wrong theme --- */ html.dark-loading { visibility: hidden; } /* ============================================ Additional Dark Mode Overrides Form containers, section cards, and labels ============================================ */ /* --- Form container gradients (review/comment forms, profile sections) --- */ html.dark .bg-gradient-to-br.from-white.to-gray-50, html.dark .bg-gradient-to-br.from-white { background: linear-gradient(to bottom right, #1f2937, #111827) !important; } /* ============================================ PHASE 1: COMPREHENSIVE DARK MODE OVERRIDES Primary/Plum color system + missing utilities ============================================ */ /* --- Primary (Plum) Text Colors --- */ html.dark .text-primary-900 { color: #DCC8D8; /* primary-200 - lighter plum for dark backgrounds */ } html.dark .text-primary-800 { color: #BFA0BA; /* primary-300 - medium-light plum */ } html.dark .text-primary-700 { color: #BFA0BA; /* primary-300 */ } html.dark .text-primary-600 { color: #9C7796; /* primary-400 - keep visible on dark */ } /* --- Primary (Plum) Background Colors --- */ html.dark .bg-primary-50 { background-color: #261826; /* primary-900 inverted */ } html.dark .bg-primary-100 { background-color: #382438; /* primary-800 */ } html.dark .bg-primary-200 { background-color: #4A2F4A; /* primary-700 */ } /* --- Primary (Plum) Border Colors --- */ html.dark .border-primary-200 { border-color: #4A2F4A; /* primary-700 */ } html.dark .border-primary-300 { border-color: #5C3A5B; /* primary-600 */ } html.dark .border-primary-400 { border-color: #7E5779; /* primary-500 */ } html.dark .border-primary-500 { border-color: #9C7796; /* primary-400 */ } html.dark .border-primary-800 { border-color: #5C3A5B; /* primary-600 */ } /* --- Primary (Plum) Gradient Backgrounds --- */ /* Lighten plum gradients for dark mode to maintain contrast */ html.dark .bg-gradient-to-r.from-primary-600.to-primary-800, html.dark .bg-gradient-to-br.from-primary-600.to-primary-800 { background: linear-gradient(to bottom right, #7E5779, #5C3A5B) !important; /* primary-500 to primary-600 */ } html.dark .bg-gradient-to-r.from-primary-700.to-primary-900, html.dark .bg-gradient-to-br.from-primary-700.to-primary-900 { background: linear-gradient(to bottom right, #9C7796, #7E5779) !important; /* primary-400 to primary-500 - lighter for active states */ } html.dark .bg-gradient-to-r.from-primary-800.to-primary-900, html.dark .bg-gradient-to-br.from-primary-800.to-primary-900 { background: linear-gradient(to bottom right, #7E5779, #5C3A5B) !important; } html.dark .bg-gradient-to-br.from-primary-100.to-primary-200 { background: linear-gradient(to bottom right, #4A2F4A, #5C3A5B) !important; } html.dark .bg-gradient-to-br.from-primary-50.to-blue-50 { background: linear-gradient(to bottom right, #261826, #1e3a5f) !important; } /* --- Hover state gradients --- */ html.dark .hover\:from-primary-700:hover { background-image: linear-gradient(to right, #9C7796, var(--tw-gradient-to)); } html.dark .hover\:to-primary-900:hover { --tw-gradient-to: #7E5779; } /* --- Primary hover backgrounds --- */ html.dark .hover\:border-primary-500:hover { border-color: #9C7796 !important; } html.dark .hover\:text-primary-700:hover { color: #BFA0BA !important; } html.dark .hover\:text-primary-800:hover { color: #DCC8D8 !important; } /* --- Admin Panel Specific --- */ /* Admin navigation container */ html.dark .bg-white.rounded-2xl.shadow-xl.p-8 { background-color: #1f2937 !important; border-color: #374151; } /* Admin nav buttons - lighten for visibility in dark mode */ html.dark .bg-gradient-to-br.from-primary-600.to-primary-800.text-white { background: linear-gradient(to bottom right, #7E5779, #5C3A5B) !important; } html.dark .bg-gradient-to-br.from-primary-700.to-primary-900.text-white { background: linear-gradient(to bottom right, #9C7796, #7E5779) !important; } /* --- Header Dropdown Menus --- */ /* Recipe dropdown & notification dropdown - use elevated surface */ html.dark .bg-white.rounded-xl.shadow-2xl.border.border-gray-100 { background-color: #374151 !important; /* Elevated surface */ border-color: #4b5563; } /* Dropdown items hover states */ html.dark .hover\:bg-indigo-50:hover { background-color: #1e3a5f !important; } html.dark .hover\:bg-amber-50:hover { background-color: #3f3407 !important; } /* --- Toast Notifications --- */ /* Success toasts */ html.dark .bg-green-50.border-2.border-green-500 { background-color: #14432a !important; border-color: #22c55e; } html.dark .text-green-900 { color: #86efac !important; } /* Error toasts */ html.dark .bg-red-50.border-2.border-red-500 { background-color: #451a1a !important; border-color: #ef4444; } html.dark .text-red-900 { color: #fca5a5 !important; } /* Info toasts */ html.dark .bg-blue-50.border-2.border-blue-500 { background-color: #1e3a5f !important; border-color: #3b82f6; } html.dark .text-blue-900 { color: #93c5fd !important; } /* Warning toasts */ html.dark .bg-yellow-50.border-2.border-yellow-500 { background-color: #3f3407 !important; border-color: #f59e0b; } html.dark .text-yellow-900 { color: #fde68a !important; } /* Toast icon colors */ html.dark .text-green-600 { color: #22c55e; } html.dark .text-red-600 { color: #ef4444; } html.dark .text-blue-600 { color: #3b82f6; } html.dark .text-yellow-600 { color: #f59e0b; } /* --- Identity Pages (Login, Register, etc.) --- */ /* Auth form containers */ html.dark .bg-white.rounded-2xl.shadow-xl.border-2.border-gray-200 { background-color: #1f2937 !important; border-color: #374151; } /* Auth page side panels */ html.dark .bg-gradient-to-br.from-primary-50.to-blue-50 { background: linear-gradient(to bottom right, #261826, #1e3a5f) !important; } /* Validation error backgrounds */ html.dark .bg-gradient-to-r.from-red-50.to-pink-50 { background: linear-gradient(to right, #451a1a, #4a1a2e) !important; } html.dark .border-2.border-red-500 { border-color: #ef4444; } /* Auth icon backgrounds */ html.dark .bg-primary-600 { background-color: #7E5779; /* Lighter in dark mode */ } /* --- Modal Dialogs & Overlays --- */ html.dark .bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .bg-white.rounded-lg.shadow-2xl { background-color: #1f2937 !important; } /* --- Recipe Detail & Content Pages --- */ /* Recipe ingredient/step cards */ html.dark .bg-gray-50.rounded-xl { background-color: #374151 !important; /* Elevated surface for cards */ } /* Recipe images - add subtle border */ html.dark img.rounded-lg, html.dark img.rounded-xl { border: 1px solid #4b5563; } /* --- Link Colors --- */ html.dark a:not(.btn):not(.nav-link) { color: #BFA0BA; /* primary-300 for links */ } html.dark a:not(.btn):not(.nav-link):hover { color: #DCC8D8; /* primary-200 on hover */ } /* --- Focus Ring Colors --- */ html.dark .focus\:ring-primary-500:focus { --tw-ring-color: #BFA0BA; /* primary-300 */ } html.dark .focus\:border-primary-500:focus { border-color: #BFA0BA !important; } /* --- Divider Lines --- */ html.dark .border-t, html.dark .border-b, html.dark .border-t-2, html.dark .border-b-2 { border-color: #374151; } /* --- Badges & Tags --- */ html.dark .bg-primary-100.text-primary-800 { background-color: #4A2F4A; color: #DCC8D8; } /* --- Additional Missing Utilities --- */ html.dark .text-primary-500 { color: #9C7796; } html.dark .bg-primary-600 { background-color: #7E5779; } html.dark .bg-primary-700 { background-color: #5C3A5B; } html.dark .bg-primary-800 { background-color: #4A2F4A; } html.dark .bg-primary-900 { background-color: #382438; } /* ============================================ PHASE 2: CRITICAL PAGE-SPECIFIC FIXES ============================================ */ /* --- Admin Panel Layout --- */ /* Admin navigation container - ensure dark background */ html.dark .bg-white.rounded-2xl.shadow-xl.p-8.mb-8 { background-color: #1f2937 !important; border-color: #374151; } /* Admin page content area */ html.dark .bg-white.rounded-2xl.shadow-xl.p-8.border.border-gray-200 { background-color: #1f2937 !important; border-color: #374151; } /* Admin panel back to site border */ html.dark .border-t.border-gray-200 { border-color: #374151; } /* --- Identity/Auth Pages --- */ /* Auth page icon backgrounds */ html.dark .bg-gradient-to-br.from-primary-100.to-primary-200.rounded-full { background: linear-gradient(to bottom right, #4A2F4A, #5C3A5B) !important; } html.dark .text-primary-600.fill-none { color: #DCC8D8; } /* Auth form labels */ html.dark label.text-gray-900 { color: #e5e7eb !important; } /* Auth checkbox labels */ html.dark .text-gray-700.group-hover\:text-primary-800 { color: #d1d5db; } html.dark .group:hover .text-gray-700.group-hover\:text-primary-800 { color: #DCC8D8; } /* Auth link colors */ html.dark .text-primary-600.font-semibold { color: #BFA0BA; } html.dark .text-primary-600.font-semibold:hover, html.dark .hover\:text-primary-800 { color: #DCC8D8; } html.dark .hover\:decoration-primary-800:hover { text-decoration-color: #DCC8D8; } /* Auth side panel borders */ html.dark .border-2.border-primary-200 { border-color: #4A2F4A; } /* Auth checkboxes */ html.dark input[type="checkbox"].text-primary-600 { color: #7E5779; border-color: #4b5563; background-color: #1f2937; } html.dark input[type="checkbox"]:checked { background-color: #7E5779; border-color: #7E5779; } /* ============================================ PHASE 3: COMPONENT-LEVEL FIXES ============================================ */ /* --- Header Notification Dropdown --- */ /* Notification dropdown container - elevated surface */ html.dark .absolute.right-0.bg-white.rounded-xl.shadow-2xl.border.border-gray-200.z-50 { background-color: #374151 !important; border-color: #4b5563; } /* Notification dropdown header */ html.dark .bg-gradient-to-r.from-primary-600.to-primary-700 { background: linear-gradient(to right, #7E5779, #5C3A5B) !important; } html.dark .border-b.border-primary-800 { border-color: #5C3A5B; } /* Empty notification state */ html.dark .text-gray-300 { color: #6b7280; } /* Notification items */ html.dark .bg-white.hover\:bg-gray-50 { background-color: #374151; } html.dark .bg-white.hover\:bg-gray-50:hover { background-color: #4b5563 !important; } /* Unread notifications */ html.dark .bg-blue-50.hover\:bg-blue-100 { background-color: #1e3a5f !important; } html.dark .bg-blue-50.hover\:bg-blue-100:hover { background-color: #253d5f !important; } /* Notification border between items */ html.dark .border-b.border-gray-100 { border-color: #4b5563; } /* Notification group hover text */ html.dark .group-hover\:text-primary-700 { color: #e5e7eb; } html.dark .group:hover .group-hover\:text-primary-700 { color: #BFA0BA !important; } /* Notification unread indicator */ html.dark .bg-blue-600 { background-color: #3b82f6; } /* Notification dropdown footer */ html.dark .bg-gray-50.border-t.border-gray-200 { background-color: #1f2937; border-color: #4b5563; } html.dark .hover\:bg-white.rounded-lg { background-color: #374151; } html.dark .hover\:bg-white.rounded-lg:hover { background-color: #4b5563 !important; } /* --- Header User Dropdown --- */ html.dark .absolute.right-0.bg-white.rounded-lg.shadow-xl.py-2 { background-color: #374151 !important; } html.dark .border-b { border-color: #4b5563; } html.dark .text-gray-500 { color: #9ca3af; } html.dark .text-gray-700 { color: #d1d5db; } html.dark .hover\:bg-gray-100 { background-color: #374151; } html.dark .hover\:bg-gray-100:hover { background-color: #4b5563 !important; } html.dark .hover\:bg-yellow-50 { background-color: #3f3407; } html.dark .hover\:bg-yellow-50:hover { background-color: #422d06 !important; } html.dark .text-yellow-600 { color: #f59e0b; } /* --- Recipe Dropdown (already covered by existing rules) --- */ /* The recipe dropdown uses .bg-white.rounded-xl.shadow-2xl which is already handled */ /* Dropdown item hover states already covered by .hover:bg-primary-50, etc. */ /* --- Toast Close Button Hover States --- */ html.dark .hover\:text-green-700:hover { color: #22c55e !important; } html.dark .hover\:text-red-700:hover { color: #ef4444 !important; } html.dark .hover\:text-blue-700:hover { color: #3b82f6 !important; } html.dark .hover\:text-yellow-700:hover { color: #f59e0b !important; } /* --- Modal Dialogs & Confirmation Popups --- */ /* Modal backdrop/overlay */ html.dark .fixed.inset-0.bg-gray-900.bg-opacity-75, html.dark .fixed.inset-0.bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.85) !important; } /* Modal content container */ html.dark .relative.bg-white.rounded-2xl.shadow-2xl { background-color: #1f2937 !important; } html.dark .relative.bg-white.rounded-lg.shadow-2xl { background-color: #1f2937 !important; } /* Modal borders */ html.dark .border-2.border-red-200 { border-color: #991b1b; } /* Modal headers */ html.dark .bg-gradient-to-r.from-red-500.to-red-600 { background: linear-gradient(to right, #dc2626, #b91c1c) !important; } /* Modal body text */ html.dark .relative.bg-white.rounded-2xl p, html.dark .relative.bg-white.rounded-lg p { color: #d1d5db; } /* Modal buttons in footer */ html.dark .border-2.border-gray-400 { border-color: #6b7280; } html.dark .text-gray-700.border-2.border-gray-400 { color: #d1d5db; } html.dark .hover\:bg-gray-600 { background-color: #4b5563; } html.dark .hover\:border-gray-600 { border-color: #4b5563; } html.dark .text-red-600.border-2.border-red-600 { color: #fca5a5; border-color: #ef4444; } html.dark .hover\:bg-red-600 { background-color: #dc2626; border-color: #dc2626; } /* ============================================ PHASE 4: CONTENT PAGES (Recipe Detail, Blog, etc.) ============================================ */ /* --- Recipe Detail Page --- */ /* Recipe action buttons */ html.dark .bg-primary-600.hover\:bg-primary-700 { background-color: #7E5779; } html.dark .bg-primary-600.hover\:bg-primary-700:hover { background-color: #5C3A5B; } /* Cooking mode button */ html.dark .bg-gradient-to-r.from-orange-500.to-red-600 { background: linear-gradient(to right, #f97316, #dc2626) !important; } html.dark .hover\:from-orange-600:hover { background-image: linear-gradient(to right, #ea580c, var(--tw-gradient-to)); } html.dark .hover\:to-red-700:hover { --tw-gradient-to: #b91c1c; } /* Print/share buttons */ html.dark .bg-gray-100.hover\:bg-gray-200 { background-color: #374151; } html.dark .bg-gray-100.hover\:bg-gray-200:hover { background-color: #4b5563 !important; } html.dark .border-gray-300 { border-color: #4b5563; } html.dark .border.border-gray-300 { border-color: #4b5563; } /* Recipe tags */ html.dark .bg-purple-100.text-purple-800 { background-color: #3b0764; color: #e9d5ff; } html.dark .hover\:bg-purple-200:hover { background-color: #4a148c !important; } /* Recipe author link */ html.dark .text-primary-900.hover\:text-primary-700 { color: #DCC8D8; } html.dark .text-primary-900.hover\:text-primary-700:hover { color: #BFA0BA; } /* AI Generate button */ html.dark .bg-gradient-to-r.from-purple-600.to-pink-600 { background: linear-gradient(to right, #7B1FA2, #C2185B) !important; } html.dark .hover\:from-purple-700:hover { background-image: linear-gradient(to right, #6A1B9A, var(--tw-gradient-to)); } html.dark .hover\:to-pink-700:hover { --tw-gradient-to: #AD1457; } /* Recipe section headings */ html.dark h3.text-primary-900 { color: #DCC8D8; } /* Recipe ingredient/step cards */ html.dark .bg-gray-50.rounded-lg, html.dark .bg-gray-50.rounded-xl { background-color: #374151 !important; /* Elevated surface for better definition */ } html.dark .bg-gray-100.rounded-lg, html.dark .bg-gray-100.rounded-xl { background-color: #4b5563 !important; } /* Recipe image borders - add subtle separation */ html.dark img.rounded-lg, html.dark img.rounded-xl, html.dark img.rounded-2xl { border: 1px solid #4b5563; } /* Recipe horizontal rules */ html.dark hr.border-gray-300, html.dark hr { border-color: #4b5563; } /* --- Blog Pages --- */ /* Blog post metadata */ html.dark .text-sm.text-gray-600 { color: #9ca3af; } html.dark .text-sm.text-gray-500 { color: #9ca3af; } /* Blog post cards */ html.dark .bg-white.rounded-lg.border.border-gray-200 { background-color: #1f2937 !important; border-color: #374151; } /* Blog post hover states */ html.dark .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); } /* --- Rating Stars --- */ html.dark .text-yellow-400 { color: #fbbf24; } /* --- Comment Sections --- */ html.dark .bg-gray-50.p-4, html.dark .bg-gray-50.p-6 { background-color: #374151 !important; } /* --- Badges & Metrics --- */ html.dark .bg-primary-100.text-primary-900 { background-color: #4A2F4A; color: #DCC8D8; } html.dark .bg-green-100.text-green-800 { background-color: #14532d; color: #86efac; } html.dark .bg-red-100.text-red-800 { background-color: #4c1d1d; color: #fca5a5; } html.dark .bg-yellow-100.text-yellow-800 { background-color: #422d06; color: #fde68a; } /* --- Pagination --- */ html.dark .bg-white.border.border-gray-300 { background-color: #1f2937; border-color: #4b5563; } html.dark .hover\:bg-gray-50.border { background-color: #374151; } html.dark .hover\:bg-gray-50.border:hover { background-color: #4b5563 !important; } /* --- Code Blocks (in recipes/blog posts) --- */ html.dark code { background-color: #111827; color: #e5e7eb; } html.dark pre { background-color: #111827; border-color: #374151; } /* --- Blockquotes --- */ html.dark blockquote { border-left-color: #4b5563; color: #d1d5db; } /* ============================================ PHASE 5: POLISH & EDGE CASES ============================================ */ /* --- Footer --- */ html.dark footer { background-color: #111827; border-top-color: #374151; } html.dark footer a:not(.btn) { color: #9ca3af; } html.dark footer a:not(.btn):hover { color: #e5e7eb; } /* --- Loading States --- */ html.dark .animate-pulse { background-color: #374151; } /* --- Skeleton Loaders --- */ html.dark .skeleton { background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%); background-size: 200% 100%; } /* --- Empty States --- */ html.dark .empty-state { color: #9ca3af; } html.dark .text-gray-400 { color: #9ca3af; } /* --- Divider Lines Everywhere --- */ html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } html.dark .border-t-2 { border-color: #374151; } html.dark .border-b-2 { border-color: #374151; } /* --- Search Bar (Header) --- */ html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); } html.dark .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); } html.dark .placeholder-white\/60::placeholder { color: rgba(255, 255, 255, 0.6); } html.dark .focus\:ring-white\/40:focus { --tw-ring-color: rgba(255, 255, 255, 0.4); } html.dark .focus\:bg-white\/20:focus { background-color: rgba(255, 255, 255, 0.2); } /* --- Active Navigation States --- */ html.dark .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); } html.dark .hover\:bg-white\/15:hover { background-color: rgba(255, 255, 255, 0.15); } /* --- Alerts & Status Messages --- */ html.dark .alert-success { background-color: #14532d; border-color: #22c55e; color: #86efac; } html.dark .alert-error { background-color: #4c1d1d; border-color: #ef4444; color: #fca5a5; } html.dark .alert-warning { background-color: #422d06; border-color: #f59e0b; color: #fde68a; } html.dark .alert-info { background-color: #1e3a5f; border-color: #3b82f6; color: #93c5fd; } /* --- Tabs --- */ html.dark .border-b.border-gray-200.tab-container { border-color: #374151; } html.dark .tab-active { border-bottom-color: #BFA0BA; /* primary-300 */ color: #BFA0BA; } html.dark .tab-inactive { color: #9ca3af; } html.dark .tab-inactive:hover { color: #e5e7eb; border-bottom-color: #6b7280; } /* --- Tooltips --- */ html.dark .tooltip { background-color: #111827; color: #e5e7eb; border-color: #374151; } /* --- Focus Visible (Accessibility) --- */ html.dark *:focus-visible { outline-color: #BFA0BA; /* primary-300 */ } /* --- Lists --- */ html.dark ul.list-disc li::marker { color: #9ca3af; } html.dark ol.list-decimal li::marker { color: #9ca3af; } /* --- Disabled States --- */ html.dark .disabled, html.dark [disabled], html.dark .opacity-50 { opacity: 0.5; } html.dark button:disabled { background-color: #374151 !important; color: #6b7280 !important; cursor: not-allowed; } /* --- Selection Highlight --- */ html.dark ::selection { background-color: #7E5779; /* primary-500 */ color: #ffffff; } html.dark ::-moz-selection { background-color: #7E5779; color: #ffffff; } /* --- Smooth Transitions for Theme Toggle --- */ html.dark, html.dark body, html.dark .bg-white, html.dark .text-gray-900 { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* --- Mobile Bottom Navigation (if present) --- */ html.dark .mobile-nav { background-color: #1f2937; border-top-color: #374151; } html.dark .mobile-nav-item.active { color: #BFA0BA; /* primary-300 */ } html.dark .mobile-nav-item { color: #9ca3af; } html.dark .mobile-nav-item:hover { color: #e5e7eb; } /* --- Print Styles (don't apply dark mode when printing) --- */ @media print { html.dark { background-color: white !important; color: black !important; } html.dark * { background-color: white !important; color: black !important; border-color: #e5e7eb !important; } } /* ============================================ END OF DARK MODE STYLESHEET ============================================ */ html.dark .bg-gradient-to-r.from-white.to-gray-50, html.dark .bg-gradient-to-r.from-white { background: linear-gradient(to right, #1f2937, #111827) !important; } /* --- Form labels --- */ html.dark label { color: #d1d5db; } html.dark .text-gray-700 label, html.dark label.text-gray-700 { color: #d1d5db; } /* --- Navy border overrides for card borders --- */ html.dark .border-primary-100 { border-color: #1e3a5f; } html.dark .border-primary-200 { border-color: #2a4a6f; } html.dark .border-primary-300 { border-color: #3d6b99; } /* --- Dashed empty-state borders --- */ html.dark .border-dashed.border-gray-300 { border-color: #4b5563; } /* --- Info/status section backgrounds --- */ html.dark .bg-gradient-to-br.from-yellow-50.to-orange-50 { background: linear-gradient(to bottom right, #422d06, #431407) !important; } html.dark .bg-gradient-to-r.from-yellow-50.to-orange-50 { background: linear-gradient(to right, #422d06, #431407) !important; } html.dark .border-yellow-400 { border-color: #ca8a04; } /* --- Additional colored text overrides for badges/alerts --- */ html.dark .text-red-600 { color: #f87171; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-green-600 { color: #4ade80; } html.dark .text-orange-800 { color: #fed7aa; } html.dark .text-purple-800 { color: #d8b4fe; } html.dark .text-indigo-800 { color: #a5b4fc; } html.dark .text-pink-800 { color: #f9a8d4; } html.dark .text-amber-800 { color: #fcd34d; } /* --- Reply/nested comment borders --- */ html.dark .border-l-4.border-primary-200 { border-color: #2a4a6f; } /* --- Focus ring color for navy scheme inputs --- */ html.dark .focus\:ring-navy-500:focus { --tw-ring-color: rgba(61, 122, 184, 0.5); } html.dark .focus\:border-primary-500:focus { border-color: #5a9dd6; } /* --- Hover backgrounds for interactive items --- */ html.dark .hover\:bg-primary-50:hover { background-color: #2d1a17 !important; } html.dark .hover\:bg-primary-50:hover { background-color: #2d1a17 !important; } html.dark .hover\:bg-indigo-50:hover { background-color: #1e1b4b !important; } /* --- Code blocks in prose --- */ html.dark code { background-color: #111827; color: #e5e7eb; } /* --- User menu dropdown in dark mode --- */ html.dark .bg-white.rounded-lg.shadow-xl { background-color: #1f2937; border: 1px solid #374151; } /* --- Status code / error pages --- */ html.dark .bg-gradient-to-br.from-red-100.to-red-200 { background: linear-gradient(to bottom right, #4c1d1d, #7f1d1d) !important; } html.dark .bg-gradient-to-br.from-primary-100.to-primary-200 { background: linear-gradient(to bottom right, #3d2420, #5c342c) !important; } html.dark .bg-gradient-to-br.from-navy-100.to-navy-200 { background: linear-gradient(to bottom right, #3d2420, #5c342c) !important; } /* --- Primary-tinted section backgrounds --- */ html.dark .bg-gradient-to-br.from-primary-50.to-blue-50 { background: linear-gradient(to bottom right, #1a0f0d, #0c1e3a) !important; } html.dark .bg-gradient-to-br.from-navy-50.to-blue-50 { background: linear-gradient(to bottom right, #1a0f0d, #0c1e3a) !important; } html.dark .bg-gradient-to-r.from-primary-50.to-blue-50 { background: linear-gradient(to right, #1a0f0d, #0c1e3a) !important; } html.dark .bg-gradient-to-r.from-navy-50.to-blue-50 { background: linear-gradient(to right, #1a0f0d, #0c1e3a) !important; } html.dark .bg-primary-50 { background-color: #1a0f0d; } html.dark .bg-primary-50 { background-color: #1a0f0d; }