/* KilimaHUB – safe overrides (class-based dark mode, no Tailwind v4 runtime) */ /* Theme strategy: the JS adds/removes .dark on . */ :root { color-scheme: light; } html.dark { color-scheme: dark; } /* Base background/text (kept minimal so it won’t fight Tailwind classes) */ html:not(.dark) body { background-color: #ffffff; color: #111827; /* gray-900 */ } html.dark body { background-color: #111827; /* gray-900 */ color: #f3f4f6; /* gray-100 */ } /* ---------- Forms ---------- */ html:not(.dark) input[type="text"], html:not(.dark) input[type="email"], html:not(.dark) input[type="url"], html:not(.dark) input[type="tel"], html:not(.dark) input[type="number"], html:not(.dark) input[type="search"], html:not(.dark) input[type="password"], html:not(.dark) select, html:not(.dark) textarea { border-radius: 0.5rem; /* rounded-lg */ border: 1px solid #d1d5db; /* gray-300 */ background-color: #ffffff; padding: 0.5rem; /* p-2 */ color: #111827; /* gray-900 */ } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #9ca3af; } /* gray-400 */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="url"], html.dark input[type="tel"], html.dark input[type="number"], html.dark input[type="search"], html.dark input[type="password"], html.dark select, html.dark textarea { border-radius: 0.5rem; border: 1px solid #374151; /* gray-700 */ background-color: #111827; /* gray-900 */ padding: 0.5rem; color: #f3f4f6; /* gray-100 */ } html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af; } /* gray-400 */ input[type], select, textarea { outline: none; } input[type]:focus, select:focus, textarea:focus { border-color: #3b82f6; /* blue-500 */ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); /* ring-2 blue-500 */ } /* Convenience class you’re using in templates */ .kh-input { width: 100%; border-radius: 0.5rem; border: 1px solid #d1d5db; /* default light border */ padding: 0.5rem; } html.dark .kh-input { border-color: #374151; } .kh-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); outline: none; } /* Editors */ .kh-editor { background-color: #ffffff; color: #111827; } html.dark .kh-editor { background-color: #111827; color: #f3f4f6; } /* ---------- Dark-mode shims for class strategy ---------- Ensure utilities that rely on `dark:` variants respond to `html.dark` even if a media-query build once leaked in. Keep scope tight. */ /* Display */ html.dark .dark\:hidden { display: none !important; } html.dark .dark\:inline { display: inline !important; } /* Borders / divide */ html.dark .dark\:divide-gray-800 > :not(:last-child) { border-color: #1f2937 !important; } /* gray-800 */ html.dark .dark\:border-gray-700 { border-color: #374151 !important; } html.dark .dark\:border-gray-800 { border-color: #1f2937 !important; } html.dark .dark\:border-gray-800\/60 { border-color: rgba(31, 41, 55, 0.6) !important; } /* Backgrounds (solid) */ html.dark .dark\:bg-gray-700 { background-color: #374151 !important; } html.dark .dark\:bg-gray-800 { background-color: #1f2937 !important; } html.dark .dark\:bg-gray-900 { background-color: #111827 !important; } html.dark .dark\:bg-green-900 { background-color: #14532d !important; } /* Backgrounds (alpha mixes) */ html.dark .dark\:bg-gray-900\/60 { background-color: rgba(17, 24, 39, 0.6) !important; } html.dark .dark\:bg-gray-900\/80 { background-color: rgba(17, 24, 39, 0.8) !important; } html.dark .dark\:bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3) !important; } html.dark .dark\:bg-blue-950\/30 { background-color: rgba(23, 37, 84, 0.3) !important; } html.dark .dark\:bg-green-950\/30 { background-color: rgba(5, 46, 22, 0.3) !important; } html.dark .dark\:bg-red-950\/30 { background-color: rgba(69, 10, 10, 0.3) !important; } html.dark .dark\:bg-yellow-950\/30{ background-color: rgba(66, 32, 6, 0.3) !important; } /* Text */ html.dark .dark\:text-white { color: #ffffff !important; } html.dark .dark\:text-gray-100 { color: #f3f4f6 !important; } html.dark .dark\:text-gray-300 { color: #d1d5db !important; } html.dark .dark\:text-gray-400 { color: #9ca3af !important; } html.dark .dark\:text-gray-500 { color: #6b7280 !important; } html.dark .dark\:text-emerald-400 { color: #34d399 !important; } html.dark .dark\:text-green-300 { color: #86efac !important; } /* Hovers (only those you use in templates) */ @media (hover: hover) { html.dark .dark\:hover\:bg-gray-700:hover { background-color: #374151 !important; } html.dark .dark\:hover\:bg-gray-800:hover { background-color: #1f2937 !important; } html.dark .dark\:hover\:bg-gray-800\/60:hover { background-color: rgba(31, 41, 55, 0.6) !important; } html.dark .dark\:hover\:bg-green-800:hover { background-color: #166534 !important; } html.dark .dark\:hover\:bg-green-950:hover { background-color: #052e16 !important; } html.dark .dark\:hover\:text-green-300:hover { color: #86efac !important; } } /* ---------- Targeted dark tweaks in #kh-main (your originals) ---------- */ html.dark #kh-main .text-gray-700 { color: #d1d5db !important; } html.dark #kh-main .text-gray-600 { color: #cbd5e1 !important; } html.dark #kh-main .border-gray-100, html.dark #kh-main .divide-gray-100 { border-color: #334155 !important; } /* slate-700-ish */ html.dark #kh-main .border-gray-200, html.dark #kh-main .divide-gray-200 { border-color: #374151 !important; } html.dark #kh-main .border-gray-300, html.dark #kh-main .divide-gray-300 { border-color: #4b5563 !important; } html.dark #kh-main .shadow, html.dark #kh-main .shadow-sm, html.dark #kh-main .shadow-md, html.dark #kh-main .shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,.33) !important; } html.dark #kh-main input[type], html.dark #kh-main select, html.dark #kh-main textarea { color: #e5e7eb !important; background-color: #0b1220 !important; /* deep slate */ border-color: #374151 !important; } /* Common background + text harmonizers used across sections */ html.dark .bg-slate-50 { background-color: #0b1220 !important; } html.dark .bg-slate-100 { background-color: #111827 !important; } html.dark .bg-slate-200 { background-color: #1f2937 !important; } html.dark .text-slate-900, html.dark .text-slate-800 { color: #e5e7eb !important; } html.dark .text-slate-700 { color: #d1d5db !important; } html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .border-slate-100, html.dark .divide-slate-100 { border-color: #334155 !important; } html.dark .border-slate-200, html.dark .divide-slate-200 { border-color: #374151 !important; } html.dark .border-slate-300, html.dark .divide-slate-300 { border-color: #4b5563 !important; } html.dark .bg-neutral-50 { background-color: #0b1220 !important; } html.dark .bg-neutral-100 { background-color: #111827 !important; } html.dark .text-neutral-900, html.dark .text-neutral-800 { color: #e5e7eb !important; } html.dark .bg-zinc-50 { background-color: #0b1220 !important; } html.dark .bg-zinc-100 { background-color: #111827 !important; } html.dark .text-zinc-900, html.dark .text-zinc-800 { color: #e5e7eb !important; } /* Links inside the main area */ html.dark #kh-main a { color: #93c5fd !important; } /* blue-300 */ html.dark #kh-main a:hover { color: #bfdbfe !important; } /* blue-200 */ /* Ensure the page chrome honors dark background even when pages use bg-gray-50 */ html.dark body.bg-gray-50 { background-color: #0b1220 !important; } html.dark .kh-container { background-color: transparent !important; } /* That’s it: no positioning/z-index/pointer-events utilities here, so nothing can sit invisibly on top of your UI and eat clicks. */