/* ========================================================================== theme-overrides.css -------------------------------------------------------------------------- Supplies dark-mode + utility rules that the precompiled style.css missed. Loaded AFTER style.css in views/layouts/main.php so it can backfill without fighting cascade order. Hand-written rather than rebuilt from Tailwind sources because we don't ship the Tailwind toolchain locally. Audit procedure (see scripts/lint_theme_classes.php): - Greps every distinct `dark:*` class in views/ and public/assets/js/ - Compares to the compiled style.css - Any class that's referenced but uncompiled belongs here. Rule of thumb: - Colours that aren't in the brand palette (teal, sky, fuchsia, etc.) need an explicit rule here. - Opacity modifiers (/5 /10 /15 /20 /30 /40 /50 /60) only compile if Tailwind saw them in scanned source at build time; we add the ones the templates use. - Utility classes the build skipped (max-w-sm, min-w-9, etc.) live here too. The `&:is(.dark *)` selector matches Tailwind v4's class-based dark mode (the `dark` class is on via Alpine's :class binding in main.php). ========================================================================== */ /* ── Layout utilities the build skipped ──────────────────────────────── */ .py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* 2FA status panel breathing room */ .max-w-sm { max-width: 24rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .min-w-9 { min-width: 2.25rem; } .min-h-9 { min-height: 2.25rem; } /* ── Teal palette (used by Default-FSE avatar on site-detail) ────────── */ .bg-teal-50 { background-color: #f0fdfa; } .bg-teal-100 { background-color: #ccfbf1; } .bg-teal-500 { background-color: #14b8a6; } .bg-teal-600 { background-color: #0d9488; } .text-teal-400 { color: #2dd4bf; } .text-teal-500 { color: #14b8a6; } .text-teal-600 { color: #0d9488; } .text-teal-700 { color: #0f766e; } .dark .dark\:bg-teal-900\/30 { background-color: rgb(19 78 74 / 0.30); } .dark .dark\:bg-teal-900\/40 { background-color: rgb(19 78 74 / 0.40); } .dark .dark\:text-teal-300 { color: #5eead4; } .dark .dark\:text-teal-400 { color: #2dd4bf; } /* ── Gray opacity variants we use for tinted panels ──────────────────── */ .bg-gray-50\/40 { background-color: rgb(249 250 251 / 0.40); } .bg-gray-50\/60 { background-color: rgb(249 250 251 / 0.60); } .bg-white\/60 { background-color: rgb(255 255 255 / 0.60); } .bg-white\/95 { background-color: rgb(255 255 255 / 0.95); } .dark .dark\:bg-gray-900\/95 { background-color: rgb(17 24 39 / 0.95); } .dark .dark\:bg-gray-800\/30 { background-color: rgb(31 41 55 / 0.30); } .dark .dark\:bg-gray-800\/40 { background-color: rgb(31 41 55 / 0.40); } .dark .dark\:bg-gray-800\/50 { background-color: rgb(31 41 55 / 0.50); } .dark .dark\:bg-gray-900\/60 { background-color: rgb(17 24 39 / 0.60); } .dark .dark\:bg-gray-950 { background-color: #030712; } /* ── Brand / status fills with light opacity (badges, soft pills) ────── */ .dark .dark\:bg-brand-500\/10 { background-color: rgb(245 158 11 / 0.10); } .dark .dark\:bg-brand-900\/10 { background-color: rgb(120 53 15 / 0.10); } .dark .dark\:bg-brand-900\/20 { background-color: rgb(120 53 15 / 0.20); } .dark .dark\:bg-brand-900\/30 { background-color: rgb(120 53 15 / 0.30); } .dark .dark\:bg-success-500\/10 { background-color: rgb(34 197 94 / 0.10); } .dark .dark\:bg-success-900\/30 { background-color: rgb(20 83 45 / 0.30); } .dark .dark\:bg-error-500\/10 { background-color: rgb(239 68 68 / 0.10); } .dark .dark\:bg-error-500\/20 { background-color: rgb(239 68 68 / 0.20); } .dark .dark\:bg-error-900\/20 { background-color: rgb(127 29 29 / 0.20); } .dark .dark\:bg-warning-500\/10 { background-color: rgb(245 158 11 / 0.10); } /* ── Blue + amber + green palette gaps used by status indicators ─────── */ .dark .dark\:bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.20); } .dark .dark\:bg-amber-900\/30 { background-color: rgb(120 53 15 / 0.30); } .dark .dark\:bg-blue-500\/15 { background-color: rgb(59 130 246 / 0.15); } .dark .dark\:bg-blue-900\/20 { background-color: rgb(30 58 138 / 0.20); } .dark .dark\:bg-blue-900\/30 { background-color: rgb(30 58 138 / 0.30); } .dark .dark\:bg-green-900\/20 { background-color: rgb(20 83 45 / 0.20); } .dark .dark\:bg-green-900\/30 { background-color: rgb(20 83 45 / 0.30); } /* ── Border opacity variants ─────────────────────────────────────────── */ .dark .dark\:border-error-500\/30 { border-color: rgb(239 68 68 / 0.30); } .dark .dark\:border-brand-500\/30 { border-color: rgb(245 158 11 / 0.30); } /* ── Ring opacity variants (avatars, focus states) ───────────────────── */ .dark .dark\:ring-brand-500\/20 { --tw-ring-color: rgb(245 158 11 / 0.20); } .dark .dark\:ring-brand-500\/30 { --tw-ring-color: rgb(245 158 11 / 0.30); } .dark .dark\:ring-success-500\/20 { --tw-ring-color: rgb(34 197 94 / 0.20); } /* ── Hover variants the build missed ─────────────────────────────────── */ .dark .dark\:hover\:bg-white\/\[0\.03\]:hover { background-color: rgb(255 255 255 / 0.03); } .dark .dark\:hover\:bg-error-500\/20:hover { background-color: rgb(239 68 68 / 0.20); } .dark .dark\:hover\:bg-brand-500\/15:hover { background-color: rgb(245 158 11 / 0.15); } /* ── Stakeholder picker pills (used by stakeholderPicker.js) ─────────── */ .dark .dark\:bg-brand-900\/30 { background-color: rgb(120 53 15 / 0.30); } /* ── Tailwind arbitrary-value classes the JIT skipped ───────────────── */ /* Used by modal cancel buttons throughout the app. Sub-percent opacity on white = barely-perceptible hover highlight in dark mode. */ .hover\:bg-white\/\[0\.03\]:hover { background-color: rgb(255 255 255 / 0.03); } .dark .dark\:hover\:bg-white\/\[0\.03\]:hover { background-color: rgb(255 255 255 / 0.03); } /* ── Modal overlay backdrops (bg-black with opacity) ────────────────── */ .bg-black\/50 { background-color: rgb(0 0 0 / 0.50); } .bg-black\/60 { background-color: rgb(0 0 0 / 0.60); } /* ── Danger (error) button fills — 2FA reset + confirm modal ─────────── */ .bg-error-600 { background-color: #dc2626; } .hover\:bg-error-600:hover { background-color: #dc2626; } .hover\:bg-error-50:hover { background-color: #fef2f2; } /* ── Soft tinted row backgrounds for tables and lists ────────────────── */ .bg-gray-50\/50 { background-color: rgb(249 250 251 / 0.50); } .bg-gray-900\/60 { background-color: rgb(17 24 39 / 0.60); } /* ── Status panel backgrounds (used by ticketDetail / monitoring) ───── */ .dark .dark\:bg-error-900\/30 { background-color: rgb(127 29 29 / 0.30); } .dark .dark\:bg-gray-600 { background-color: #4b5563; } .dark .dark\:bg-green-500\/15 { background-color: rgb(34 197 94 / 0.15); } .dark .dark\:bg-orange-500\/15 { background-color: rgb(249 115 22 / 0.15); } .dark .dark\:bg-purple-500\/15 { background-color: rgb(168 85 247 / 0.15); } .dark .dark\:bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.30); } .dark .dark\:bg-red-900\/30 { background-color: rgb(127 29 29 / 0.30); } .dark .dark\:bg-warning-900\/30 { background-color: rgb(120 53 15 / 0.30); } .dark .dark\:bg-white { background-color: #ffffff; } .dark .dark\:bg-yellow-500\/15 { background-color: rgb(234 179 8 / 0.15); } .dark .dark\:bg-yellow-900\/20 { background-color: rgb(113 63 18 / 0.20); } /* ── Borders ─────────────────────────────────────────────────────────── */ .dark .dark\:border-blue-700 { border-color: #1d4ed8; } .dark .dark\:border-brand-700 { border-color: #b45309; } .dark .dark\:border-brand-900\/40 { border-color: rgb(120 53 15 / 0.40); } .dark .dark\:border-error-800 { border-color: #991b1b; } .dark .dark\:border-gray-600 { border-color: #4b5563; } .dark .dark\:border-gray-700\/50 { border-color: rgb(55 65 81 / 0.50); } .dark .dark\:border-red-900\/40 { border-color: rgb(127 29 29 / 0.40); } .dark .dark\:border-success-500 { border-color: #22c55e; } .dark .dark\:border-success-800 { border-color: #166534; } .dark .dark\:border-success-900\/30 { border-color: rgb(20 83 45 / 0.30); } .dark .dark\:border-warning-700 { border-color: #b45309; } .dark .dark\:border-warning-800 { border-color: #92400e; } .dark .dark\:border-yellow-800\/40 { border-color: rgb(133 77 14 / 0.40); } .dark .dark\:border-yellow-900\/30 { border-color: rgb(113 63 18 / 0.30); } /* ── Hover states ───────────────────────────────────────────────────── */ .dark .dark\:hover\:bg-gray-800\/30:hover { background-color: rgb(31 41 55 / 0.30); } .dark .dark\:hover\:bg-gray-800\/60:hover { background-color: rgb(31 41 55 / 0.60); } .dark .dark\:hover\:bg-white:hover { background-color: #ffffff; } .dark .dark\:hover\:border-brand-600:hover { border-color: #d97706; } .dark .dark\:hover\:border-gray-700:hover { border-color: #374151; } .dark .dark\:hover\:border-red-700:hover { border-color: #b91c1c; } .dark .dark\:hover\:border-yellow-700:hover { border-color: #a16207; } .dark .dark\:hover\:text-brand-300:hover { color: #fcd34d; } .dark .dark\:hover\:text-error-400:hover { color: #f87171; } .hover\:bg-brand-50\/10:hover { background-color: rgb(255 251 235 / 0.10); } .hover\:bg-brand-50\/50:hover { background-color: rgb(255 251 235 / 0.50); } .hover\:bg-gray-50\/50:hover { background-color: rgb(249 250 251 / 0.50); } /* ── Text colours ───────────────────────────────────────────────────── */ .dark .dark\:placeholder-gray-500::placeholder { color: #6b7280; } .dark .dark\:text-blue-light-400 { color: #60a5fa; } .dark .dark\:text-brand-300 { color: #fcd34d; } .dark .dark\:text-brand-500 { color: #f59e0b; } .dark .dark\:text-error-300 { color: #fca5a5; } .dark .dark\:text-gray-600 { color: #4b5563; } .dark .dark\:text-red-100 { color: #fee2e2; } .dark .dark\:text-yellow-400 { color: #facc15; } .text-white\/30 { color: rgb(255 255 255 / 0.30); } .dark .dark\:text-amber-500 { color: #f59e0b; } .dark .dark\:text-warning-500 { color: #f59e0b; } /* ── Rings ──────────────────────────────────────────────────────────── */ .ring-brand-500\/10 { --tw-ring-color: rgb(245 158 11 / 0.10); } .ring-brand-500\/20 { --tw-ring-color: rgb(245 158 11 / 0.20); } .ring-brand-900\/30 { --tw-ring-color: rgb(120 53 15 / 0.30); } .dark .dark\:ring-gray-900 { --tw-ring-color: #111827; } /* ── Asset Care + QHSSE additions (migration 033 build) ─────────────── */ /* Indigo (in_progress ticket badges in asset registry) */ .dark .dark\:bg-indigo-900\/30 { background-color: rgb(49 46 129 / 0.30); } .dark .dark\:text-indigo-400 { color: #818cf8; } /* Lime (grade B band in inspection reports + history) */ .dark .dark\:bg-lime-900\/30 { background-color: rgb(54 83 20 / 0.30); } .dark .dark\:text-lime-400 { color: #a3e635; } /* Amber border dark variant (schedule upload progress) */ .dark .dark\:border-amber-800 { border-color: #92400e; } /* Error hover backgrounds dark (reject action in schedule review) */ .dark .dark\:hover\:bg-error-900\/30:hover { background-color: rgb(127 29 29 / 0.30); } /* Green hover dark (approve action) */ .dark .dark\:hover\:bg-green-900\/30:hover { background-color: rgb(20 83 45 / 0.30); } /* Brand border + bg variants on the EPTW placeholder cards */ .dark .dark\:hover\:border-brand-700:hover { border-color: #b45309; } .hover\:bg-brand-50\/40:hover { background-color: rgb(255 251 235 / 0.40); } /* ── Subtle white tints (used everywhere for dark-mode card surfaces) ───── These bracketed opacity classes are NOT picked up by the JIT during the original Tailwind build (see warning in CLAUDE.md §3a). Hand-write them. */ .dark .dark\:bg-white\/\[0\.03\] { background-color: rgb(255 255 255 / 0.03); } .dark .dark\:hover\:bg-white\/\[0\.03\]:hover { background-color: rgb(255 255 255 / 0.03); } .dark .dark\:hover\:bg-white\/\[0\.05\]:hover { background-color: rgb(255 255 255 / 0.05); }