/* FIP Warriors Portal - Dark Theme Overrides */ /* Overrides Tailwind utility classes when [data-theme="dark"] is set on */ /* === BACKGROUNDS === */ [data-theme="dark"] .bg-white { background-color: #1F2937 !important; } [data-theme="dark"] .bg-gray-50 { background-color: #111827 !important; } [data-theme="dark"] .bg-gray-100 { background-color: #1F2937 !important; } [data-theme="dark"] .bg-gray-200 { background-color: #374151 !important; } [data-theme="dark"] .bg-gray-300 { background-color: #4B5563 !important; } /* === TEXT COLORS === */ [data-theme="dark"] .text-gray-500 { color: #D1D5DB !important; } [data-theme="dark"] .text-gray-600 { color: #D1D5DB !important; } [data-theme="dark"] .text-gray-700 { color: #E5E7EB !important; } [data-theme="dark"] .text-gray-800 { color: #F3F4F6 !important; } [data-theme="dark"] .text-gray-900 { color: #F9FAFB !important; } [data-theme="dark"] .text-gray-400 { color: #9CA3AF !important; } /* === BORDER COLORS === */ [data-theme="dark"] .border-gray-100 { border-color: #374151 !important; } [data-theme="dark"] .border-gray-200 { border-color: #374151 !important; } [data-theme="dark"] .border-gray-300 { border-color: #4B5563 !important; } [data-theme="dark"] .border-gray-400 { border-color: #6B7280 !important; } /* === DIVIDE COLORS === */ [data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; } [data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; } /* === HOVER STATES === */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #374151 !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #374151 !important; } [data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #4B5563 !important; } [data-theme="dark"] .hover\:bg-primary-50:hover { background-color: #064E3B !important; } [data-theme="dark"] .hover\:bg-red-50:hover { background-color: #7F1D1D !important; } /* === STATUS BACKGROUNDS (light tinted) === */ [data-theme="dark"] .bg-green-50 { background-color: #064E3B !important; } [data-theme="dark"] .bg-green-100 { background-color: #065F46 !important; } [data-theme="dark"] .bg-red-50 { background-color: #7F1D1D !important; } [data-theme="dark"] .bg-red-100 { background-color: #991B1B !important; } [data-theme="dark"] .bg-blue-50 { background-color: #1E3A5F !important; } [data-theme="dark"] .bg-blue-100 { background-color: #1E40AF !important; } [data-theme="dark"] .bg-yellow-50 { background-color: #78350F !important; } [data-theme="dark"] .bg-yellow-100 { background-color: #92400E !important; } [data-theme="dark"] .bg-purple-50 { background-color: #4C1D95 !important; } [data-theme="dark"] .bg-purple-100 { background-color: #5B21B6 !important; } [data-theme="dark"] .bg-amber-50 { background-color: #78350F !important; } [data-theme="dark"] .bg-amber-100 { background-color: #92400E !important; } [data-theme="dark"] .bg-orange-50 { background-color: #7C2D12 !important; } [data-theme="dark"] .bg-orange-100 { background-color: #9A3412 !important; } [data-theme="dark"] .bg-indigo-50 { background-color: #312E81 !important; } [data-theme="dark"] .bg-indigo-100 { background-color: #3730A3 !important; } /* === STATUS TEXT COLORS === */ [data-theme="dark"] .text-green-600 { color: #6EE7B7 !important; } [data-theme="dark"] .text-green-700 { color: #6EE7B7 !important; } [data-theme="dark"] .text-green-800 { color: #A7F3D0 !important; } [data-theme="dark"] .text-red-500 { color: #FCA5A5 !important; } [data-theme="dark"] .text-red-600 { color: #FCA5A5 !important; } [data-theme="dark"] .text-red-700 { color: #FCA5A5 !important; } [data-theme="dark"] .text-red-800 { color: #FECACA !important; } [data-theme="dark"] .text-blue-600 { color: #93C5FD !important; } [data-theme="dark"] .text-blue-700 { color: #93C5FD !important; } [data-theme="dark"] .text-blue-800 { color: #BFDBFE !important; } [data-theme="dark"] .text-yellow-600 { color: #FCD34D !important; } [data-theme="dark"] .text-yellow-700 { color: #FCD34D !important; } [data-theme="dark"] .text-yellow-800 { color: #FDE68A !important; } [data-theme="dark"] .text-purple-600 { color: #C4B5FD !important; } [data-theme="dark"] .text-purple-700 { color: #C4B5FD !important; } [data-theme="dark"] .text-amber-600 { color: #FCD34D !important; } [data-theme="dark"] .text-amber-700 { color: #FCD34D !important; } [data-theme="dark"] .text-orange-600 { color: #FDBA74 !important; } [data-theme="dark"] .text-orange-700 { color: #FDBA74 !important; } [data-theme="dark"] .text-indigo-600 { color: #A5B4FC !important; } [data-theme="dark"] .text-indigo-700 { color: #A5B4FC !important; } /* === PRIMARY (green) COLORS === */ [data-theme="dark"] .text-primary-600 { color: #6EE7B7 !important; } [data-theme="dark"] .text-primary-700 { color: #6EE7B7 !important; } [data-theme="dark"] .bg-primary-50 { background-color: #064E3B !important; } [data-theme="dark"] .bg-primary-500 { background-color: #10B981 !important; } [data-theme="dark"] .bg-primary-600 { background-color: #059669 !important; } [data-theme="dark"] .bg-primary-100 { background-color: #065F46 !important; } [data-theme="dark"] .bg-primary-200 { background-color: #047857 !important; } [data-theme="dark"] .hover\:bg-primary-100:hover { background-color: #065F46 !important; } [data-theme="dark"] .text-primary-300 { color: #A7F3D0 !important; } [data-theme="dark"] .text-primary-500 { color: #34D399 !important; } [data-theme="dark"] .text-primary-800 { color: #A7F3D0 !important; } [data-theme="dark"] .text-primary-900 { color: #D1FAE5 !important; } [data-theme="dark"] .border-primary-200 { border-color: #065F46 !important; } [data-theme="dark"] .border-primary-300 { border-color: #059669 !important; } [data-theme="dark"] .border-primary-400 { border-color: #10B981 !important; } [data-theme="dark"] .border-primary-500 { border-color: #10B981 !important; } [data-theme="dark"] .border-primary-600 { border-color: #34D399 !important; } [data-theme="dark"] .text-primary-200 { color: #D1FAE5 !important; } [data-theme="dark"] .text-primary-400 { color: #6EE7B7 !important; } [data-theme="dark"] .bg-primary-400 { background-color: #10B981 !important; } [data-theme="dark"] .bg-primary-700 { background-color: #047857 !important; } [data-theme="dark"] .hover\:border-primary-400:hover { border-color: #10B981 !important; } /* === BORDER STATUS COLORS === */ [data-theme="dark"] .border-green-200 { border-color: #065F46 !important; } [data-theme="dark"] .border-red-200 { border-color: #991B1B !important; } [data-theme="dark"] .border-blue-200 { border-color: #1E40AF !important; } [data-theme="dark"] .border-yellow-200 { border-color: #92400E !important; } /* === FORM ELEMENTS === */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(.form-input), [data-theme="dark"] select:not(.form-input), [data-theme="dark"] textarea:not(.form-input) { background-color: #374151 !important; color: #F9FAFB !important; border-color: #4B5563 !important; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: #34D399 !important; } /* === SHADOWS === */ [data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important; } /* === RING === */ [data-theme="dark"] .ring-1 { --tw-ring-color: #374151 !important; } /* === TABLE === */ [data-theme="dark"] table thead { background-color: #111827 !important; } [data-theme="dark"] table tbody tr { border-color: #374151 !important; } [data-theme="dark"] table tbody tr:hover { background-color: #374151 !important; } /* === BODY === */ [data-theme="dark"] body { background-color: #111827 !important; color: #F3F4F6 !important; } /* === MOBILE NAV === */ [data-theme="dark"] #mobile-nav { background-color: #1F2937 !important; border-color: #374151 !important; } /* === APP SHELL (dark) === */ [data-theme="dark"] .app-navbar { background: rgba(31, 41, 55, 0.95) !important; border-color: #374151 !important; } [data-theme="dark"] .app-bottom-nav { background: rgba(31, 41, 55, 0.95) !important; border-color: #374151 !important; } [data-theme="dark"] .bottom-nav-item { color: #9CA3AF; } [data-theme="dark"] .bottom-nav-item:hover, [data-theme="dark"] .bottom-nav-item.active { color: #6EE7B7; } [data-theme="dark"] .bottom-nav-item.active::after { background: #34D399; } /* === CONTACT CARD (dark) === */ [data-theme="dark"] .contact-btn-phone { background: #1E3A5F; color: #93C5FD; } [data-theme="dark"] .contact-btn-whatsapp { background: #064E3B; color: #6EE7B7; } [data-theme="dark"] .contact-btn-email { background: #78350F; color: #FCD34D; } /* === INTERNAL NOTES (dark) === */ [data-theme="dark"] .note-pinned { background: #78350F !important; } /* === MAP LEGEND (dark) === */ [data-theme="dark"] .map-legend { background: #1F2937; border: 1px solid #374151; } [data-theme="dark"] .filter-chip { background: #374151; border-color: #4B5563; color: #D1D5DB; } [data-theme="dark"] .filter-chip.active { background: #064E3B; border-color: #059669; color: #6EE7B7; } [data-theme="dark"] .filter-chip:hover { background: #064E3B; } /* === SCROLLBAR (Webkit) === */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1F2937; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4B5563; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6B7280; } /* === PLACEHOLDER TEXT === */ [data-theme="dark"] ::placeholder { color: #6B7280 !important; } /* === LINKS === */ [data-theme="dark"] a.text-primary-600:hover, [data-theme="dark"] .hover\:text-primary-600:hover { color: #A7F3D0 !important; } /* === SETTINGS HUB BACKGROUNDS (light tinted) === */ [data-theme="dark"] .bg-violet-100 { background-color: #4C1D95 !important; } [data-theme="dark"] .bg-cyan-100 { background-color: #164E63 !important; } [data-theme="dark"] .bg-teal-100 { background-color: #134E4A !important; } [data-theme="dark"] .bg-fuchsia-100 { background-color: #701A75 !important; } [data-theme="dark"] .bg-emerald-100 { background-color: #064E3B !important; } [data-theme="dark"] .bg-pink-100 { background-color: #831843 !important; } /* === SETTINGS HUB TEXT COLORS === */ [data-theme="dark"] .text-violet-600 { color: #C4B5FD !important; } [data-theme="dark"] .text-cyan-600 { color: #67E8F9 !important; } [data-theme="dark"] .text-teal-600 { color: #5EEAD4 !important; } [data-theme="dark"] .text-fuchsia-600 { color: #E879F9 !important; } [data-theme="dark"] .text-emerald-600 { color: #6EE7B7 !important; } [data-theme="dark"] .text-pink-600 { color: #F9A8D4 !important; } /* === BADGES (colored bg + text combos) === */ [data-theme="dark"] .bg-green-500 { background-color: #059669 !important; } [data-theme="dark"] .bg-red-500 { background-color: #DC2626 !important; } /* === MODERATION BADGE (dark) === */ [data-theme="dark"] .moderation-badge { background: #991B1B; color: #FCA5A5; } /* === LEAFLET MAP (dark) === */ [data-theme="dark"] .leaflet-popup-content-wrapper { background: #1F2937 !important; color: #F3F4F6 !important; } [data-theme="dark"] .leaflet-popup-tip { background: #1F2937 !important; } [data-theme="dark"] .leaflet-control-zoom a { background: #374151 !important; color: #F3F4F6 !important; border-color: #4B5563 !important; } [data-theme="dark"] .leaflet-control-attribution { background: rgba(31, 41, 55, 0.8) !important; color: #9CA3AF !important; } [data-theme="dark"] .map-popup-name { color: #F3F4F6 !important; } [data-theme="dark"] .map-popup-detail { color: #D1D5DB !important; } [data-theme="dark"] .map-popup-muted { color: #9CA3AF !important; } [data-theme="dark"] .map-popup-note { color: #9CA3AF !important; } [data-theme="dark"] .map-popup-highlight { color: #60A5FA !important; } [data-theme="dark"] .map-popup-badge-green { background: #064E3B !important; color: #6EE7B7 !important; } [data-theme="dark"] .map-popup-badge-red { background: #7F1D1D !important; color: #FCA5A5 !important; } /* === MOBILE NAV ACTIVE INDICATOR (dark) === */ [data-theme="dark"] .mobile-nav-active::after { background: #34D399; } /* === BUTTON SYSTEM (dark) === */ [data-theme="dark"] .btn { background: #34D399 !important; color: #064E3B !important; } [data-theme="dark"] .btn:hover { background: #6EE7B7 !important; } [data-theme="dark"] .btn-primary { background: #34D399 !important; color: #064E3B !important; } [data-theme="dark"] .btn-primary:hover { background: #6EE7B7 !important; } [data-theme="dark"] .btn-secondary { background: transparent !important; color: #6EE7B7 !important; border: 1px solid #6EE7B7 !important; } [data-theme="dark"] .btn-secondary:hover { background: #064E3B !important; } [data-theme="dark"] .btn-danger { background: #F87171 !important; color: #1F2937 !important; } [data-theme="dark"] .btn-danger:hover { background: #FCA5A5 !important; } [data-theme="dark"] .btn-ghost { background: transparent !important; color: #6EE7B7 !important; border: 1px solid #4B5563 !important; } [data-theme="dark"] .btn-ghost:hover { background: #064E3B !important; border-color: #6EE7B7 !important; } [data-theme="dark"] .btn-icon { color: var(--btn-icon-color); } [data-theme="dark"] .btn-icon:hover { background: #064E3B; color: #6EE7B7; } [data-theme="dark"] .form-actions { background: #1F2937; } /* Disabled buttons (dark) */ [data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn.disabled { opacity: 0.4; pointer-events: none; } /* Links in dark mode */ [data-theme="dark"] a:not([class]) { color: #60A5FA; } /* Warning badge dark */ [data-theme="dark"] .bg-yellow-100.text-yellow-800, [data-theme="dark"] .bg-amber-100.text-amber-800 { background-color: #78350F !important; color: #FDE68A !important; } /* === FLYOUT (dark) === */ [data-theme="dark"] .flyout-overlay { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .flyout-menu { background: #1F2937; border-color: #374151; } [data-theme="dark"] .flyout-item { color: #E5E7EB; } [data-theme="dark"] .flyout-item:hover, [data-theme="dark"] .flyout-item:active { background: #374151; } [data-theme="dark"] .flyout-divider { border-color: #374151; } [data-theme="dark"] .flyout-handle::before { background: #4B5563; } /* === GRADIENT OVERRIDES (dark) === */ [data-theme="dark"] .bg-gradient-to-r.from-primary-50 { background: linear-gradient(to right, #064E3B, #1E3A5F, #4C1D95) !important; } /* === BORDER STATUS COLORS (dark, additional) === */ [data-theme="dark"] .border-amber-200 { border-color: #92400E !important; } [data-theme="dark"] .border-purple-200 { border-color: #5B21B6 !important; } [data-theme="dark"] .border-orange-200 { border-color: #9A3412 !important; } [data-theme="dark"] .border-indigo-200 { border-color: #3730A3 !important; } /* === SEMI-TRANSPARENT BACKGROUNDS (dark) === */ [data-theme="dark"] .bg-white\/50 { background-color: rgba(31, 41, 55, 0.5) !important; } [data-theme="dark"] .bg-gray-50\/50 { background-color: rgba(17, 24, 39, 0.5) !important; } /* === MODAL OVERLAY (dark) === */ [data-theme="dark"] .bg-black\/50 { background-color: rgba(0, 0, 0, 0.7) !important; } /* === FOOTER (dark) === */ [data-theme="dark"] footer { border-color: #374151 !important; } /* === URGENCY CARDS (dark) === */ [data-theme="dark"] .urgency-card-critical { background: #7F1D1D; border-color: #991B1B; } [data-theme="dark"] .urgency-card-warning { background: #78350F; border-color: #92400E; } [data-theme="dark"] .urgency-card-info { background: #1E3A5F; border-color: #1E40AF; } /* === ROLE BADGES === */ .role-badge { color: var(--role-clr, #6B7280); border-color: var(--role-clr, #6B7280); background-color: color-mix(in srgb, var(--role-clr, #6B7280) 10%, transparent); } [data-theme="dark"] .role-badge { /* Fallback for browsers without color-mix */ color: #D1D5DB !important; border-color: #6B7280 !important; background-color: #374151 !important; } @supports (color: color-mix(in srgb, red 50%, blue)) { [data-theme="dark"] .role-badge { color: color-mix(in srgb, var(--role-clr, #6B7280) 50%, #F9FAFB) !important; border-color: color-mix(in srgb, var(--role-clr, #6B7280) 50%, #F9FAFB) !important; background-color: color-mix(in srgb, var(--role-clr, #6B7280) 15%, #1F2937) !important; } } /* === USER LIST TABLE (dark) === */ [data-theme="dark"] .hover\:text-gray-700:hover { color: #E5E7EB !important; } [data-theme="dark"] .hover\:text-gray-600:hover { color: #D1D5DB !important; } [data-theme="dark"] .text-gray-300 { color: #6B7280 !important; }