:root { --bg: #f5f5f5; --card: #ffffff; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --tfw-red: #d81e05; --tfw-gray: #f5f5f5; --tfw-green: #10b981; } /* Basic page defaults that mirror the light-tailwind look using variables */ html, body { background-color: var(--bg); color: var(--text); } /* Override commonly used Tailwind utility colors to respect the theme variables */ .bg-white { background-color: var(--card) !important; } .bg-gray-50 { background-color: var(--bg) !important; } .bg-tfw-gray { background-color: var(--tfw-gray) !important; } .text-gray-900, .text-gray-800 { color: var(--text) !important; } .text-gray-700, .text-gray-600, .text-gray-500 { color: var(--muted) !important; } .border-gray-100 { border-color: var(--border) !important; } /* Preserve brand colours */ .bg-tfw-red { background-color: var(--tfw-red) !important; } .text-tfw-red { color: var(--tfw-red) !important; } .bg-tfw-green { background-color: var(--tfw-green) !important; } .text-tfw-green { color: var(--tfw-green) !important; } /* Dark theme overrides */ .dark { --bg: #0b1220; --card: #0f1724; --text: #e6eef8; --muted: #9aa6b2; --border: #1f2937; --tfw-gray: #071022; } /* When dark mode is enabled (the `dark` class is applied to ), set the document text color to #ff0000 as requested. This rule only affects the top-level document text color and does not change the many form-control-specific rules below. */ html.dark, html.dark body { color: #ff0000 !important; } /* Card / modal backdrop adjustments */ .dark .bg-white { background-color: #0f1724 !important; } .dark .login-card, .dark .login-card-container, .dark .bg-white { background-color: var(--card) !important; } /* Small helpers for contrast on icons/badges */ .dark .text-tfw-red { color: var(--tfw-red) !important; } /* Reduce image flashing by applying blending on dark mode where appropriate */ .dark img { background-color: transparent; } /* Smooth transition for theme changes */ html :not(pre):not(code) { transition: background-color 180ms ease, color 180ms ease; } /* Form controls: use theme variables so inputs match card/background colors and are readable in both light and dark modes. These rules intentionally target native form elements used throughout the site. */ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], textarea, select { background-color: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; caret-color: var(--text) !important; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } /* Ensure placeholders are visible against dark backgrounds */ input::placeholder, textarea::placeholder, input::-webkit-input-placeholder, input:-ms-input-placeholder { color: var(--muted) !important; opacity: 1 !important; } /* Focus states: subtle ring using the brand red at low opacity for visibility */ input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--tfw-red) !important; box-shadow: 0 0 0 4px rgba(216,30,5,0.10) !important; } /* Inputs inside explicitly white cards may inherit .bg-white styles; ensure they still respect theme variables (important to override utility classes) */ .bg-white input, .bg-white textarea, .bg-white select { background-color: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; } /* WebKit autofill / autocomplete can force a bright background; override it */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--card) inset !important; box-shadow: 0 0 0px 1000px var(--card) inset !important; -webkit-text-fill-color: var(--text) !important; } /* Date input calendar indicator should not introduce bright backgrounds */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.98) brightness(1.1) contrast(0.9); } /* Keep the toggle knob visually clear; allow dark mode tweak if needed */ .inline-block.w-5.h-5.bg-white.rounded-full { background-color: #fff !important; /* knob stays light for contrast */ } /* Reinforce dark mode: ensure controls are themed */ .dark input[type="text"], .dark input[type="password"], .dark input[type="number"], .dark input[type="date"], .dark textarea, .dark select { background-color: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Stronger vendor-specific overrides for stubborn UA styles (iOS/Chrome autofill, native controls) */ .dark input:not([type="checkbox"]):not([type="radio"]), .dark textarea, .dark select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; box-shadow: none !important; border: 1px solid var(--border) !important; background-color: var(--card) !important; color: var(--text) !important; } /* Keep native checkbox/radio rendering so checked state remains visible. */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; accent-color: var(--tfw-red); background-color: transparent !important; box-shadow: none !important; } .dark input[type="checkbox"], .dark input[type="radio"] { border-color: #9aa6b2 !important; } .dark input[type="checkbox"]:checked, .dark input[type="radio"]:checked { border-color: var(--tfw-red) !important; } /* Remove number input spin buttons that sometimes render with white backgrounds */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Safari/iOS sometimes force form control backgrounds; this forces the computed background */ input, textarea, select { background-color: var(--card) !important; color: var(--text) !important; } /* If the input element itself has a utility class of bg-white (common in templates), ensure it follows the theme variables rather than staying bright white. We use attribute selectors to catch class lists where bg-white appears anywhere. */ input.bg-white, textarea.bg-white, select.bg-white, input[class*="bg-white"], textarea[class*="bg-white"], select[class*="bg-white"] { background-color: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; } /* If an input element still renders with a bright white background in dark mode, keep the control background but force the text to a dark colour so input is readable. */ .dark input.bg-white, .dark textarea.bg-white, .dark select.bg-white, .dark input[class*="bg-white"], .dark textarea[class*="bg-white"], .dark select[class*="bg-white"] { /* Use near-black for input text so it's readable on white fields when dark mode is active */ color: #111827 !important; } .dark input.bg-white::placeholder, .dark textarea.bg-white::placeholder, .dark select.bg-white::placeholder, .dark input[class*="bg-white"]::placeholder, .dark textarea[class*="bg-white"]::placeholder, .dark select[class*="bg-white"]::placeholder { color: #6b7280 !important; } /* Avoid white backgrounds from clipping issues in some browsers */ input, textarea, select { background-clip: padding-box; } /* ------------------------------------------------------------------ Targeted: only affect form control text colour in dark mode. This prevents changing `html, body { color: ... }` which would alter all page text. These rules only change form control fonts. ------------------------------------------------------------------ */ .dark input, .dark textarea, .dark select { /* Ensure text inside controls is readable in dark mode. */ color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } /* If the control visually keeps a white background (UA quirk or utility class), force the font to dark to keep user-typed text readable. */ .dark input[class*="bg-white"], .dark textarea[class*="bg-white"], .dark select[class*="bg-white"] { color: #111827 !important; -webkit-text-fill-color: #111827 !important; } /* User requested: force text inside form controls to #ff0000 when dark mode is enabled. We apply this strongly (including vendor fill and autofill cases) so typed text and autofilled values appear red regardless of background quirks. */ .dark input, .dark textarea, .dark select { color: #ff0000 !important; -webkit-text-fill-color: #ff0000 !important; } /* Inputs that keep utility class bg-white also get red text in dark mode */ .dark input[class*="bg-white"], .dark textarea[class*="bg-white"], .dark select[class*="bg-white"] { color: #ff0000 !important; -webkit-text-fill-color: #ff0000 !important; } /* Autofill can re-apply its own fill color; override it so autofilled text is red too. */ .dark input:-webkit-autofill, .dark textarea:-webkit-autofill, .dark select:-webkit-autofill { -webkit-text-fill-color: #ff0000 !important; box-shadow: 0 0 0px 1000px var(--card) inset !important; /* keep background matching card */ } /* Placeholder tone when dark mode + red input text is active — keep it subdued */ .dark input::placeholder, .dark textarea::placeholder, .dark select::placeholder { color: #b91c1c !important; /* darker red for placeholders */ opacity: 1 !important; }