@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* DigiRocket dark mode - "light black" / charcoal background + lime accents. Activated by `body.dark-mode`. */ /* ---- App-wide typography: ONE consistent font everywhere (Inter, like major sites). Applied to every element EXCEPT Font Awesome icons (which need their own icon font), so monospace numbers, headings, inputs — all match. ---- */ *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } /* ---- Borders: a touch darker so cards / rows / dividers stand out (light mode) ---- */ body:not(.dark-mode) .card { border-color: #d1d5db !important; } body:not(.dark-mode) .border, body:not(.dark-mode) .border-b, body:not(.dark-mode) .border-t, body:not(.dark-mode) [class*="border-gray"] { border-color: #d1d5db !important; } body:not(.dark-mode) [style*="#262d33"], body:not(.dark-mode) [style*="#2a2f36"], body:not(.dark-mode) [style*="#333b43"] { border-color: #cbd5e1 !important; } body:not(.dark-mode) table td, body:not(.dark-mode) table th, body:not(.dark-mode) .trow { border-color: #d1d5db !important; } /* `background` shorthand also removes the light gradient IMAGE on */ body.dark-mode { background: #1b1e20 !important; color: #e2e8f0; } body.dark-mode.bg-gradient-to-br { background: #1b1e20 !important; } /* Page background gradients on inner elements -> light black */ body.dark-mode .bg-gradient-to-br { background: #1b1e20 !important; } /* Headers -> slightly darker charcoal gradient */ body.dark-mode .gradient-bg, body.dark-mode .custom-gradient { background: linear-gradient(135deg, #2a2e31 0%, #1b1e20 100%) !important; } /* Cards / panels -> charcoal (a bit lighter than page to stand out) */ body.dark-mode .bg-white, body.dark-mode .section-card, body.dark-mode .glass-card, body.dark-mode .stats-card, body.dark-mode .glass-effect, body.dark-mode .metric-card, body.dark-mode .chart-container, body.dark-mode .table-container { background-color: #25282b !important; border-color: #3a4045 !important; } body.dark-mode .bg-gray-50, body.dark-mode .bg-gray-100, body.dark-mode .bg-slate-50 { background-color: #2a2e31 !important; } /* Text */ body.dark-mode .text-gray-900, body.dark-mode .text-gray-800, body.dark-mode .text-gray-700 { color: #f1f5f9 !important; } body.dark-mode .text-gray-600, body.dark-mode .text-gray-500, body.dark-mode .text-gray-400 { color: #a8b3bd !important; } /* metric cards use text-black -> make icons + labels light in dark mode */ body.dark-mode .text-black { color: #e2e8f0 !important; } /* metric card icons (incl. the lime card whose icon got forced dark) -> light */ body.dark-mode .metric-card i { color: #e2e8f0 !important; } /* metric card labels: opacity-75 made the black text dim/gray on dark cards -> brighten */ body.dark-mode .metric-card .opacity-75 { opacity: 1 !important; color: #cbd5e1 !important; } /* "Trending" / "Live Data" sub-labels were too dim -> clear bright green */ body.dark-mode .metric-card .text-green-300 { color: #86efac !important; } body.dark-mode .metric-card i.text-green-300 { color: #86efac !important; } /* Inputs / selects */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: #2a2e31 !important; color: #f1f5f9 !important; border-color: #3a4045 !important; } /* Tables */ body.dark-mode .enhanced-table thead th, body.dark-mode thead.bg-gradient-to-r { background: #2a2e31 !important; color: #cbd5e1 !important; border-color: #3a4045 !important; } body.dark-mode .enhanced-table tbody tr:hover, body.dark-mode tbody tr:hover { background: #30353a !important; } body.dark-mode table td, body.dark-mode table th { color: #e2e8f0; border-color: #3a4045 !important; } /* Borders / dividers */ body.dark-mode [class*="border-gray"], body.dark-mode .border { border-color: #3a4045 !important; } body.dark-mode .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #3a4045 !important; } /* Dim glaring light badge tints */ body.dark-mode .bg-blue-100, body.dark-mode .bg-green-100, body.dark-mode .bg-purple-100, body.dark-mode .bg-orange-100 { filter: brightness(0.6) saturate(1.15); } /* Dropdown menus */ body.dark-mode .dropdown-content { background-color: #25282b !important; border-color: #3a4045 !important; } body.dark-mode .dropdown-item { color: #e2e8f0 !important; } body.dark-mode .dropdown-item:hover { background-color: #30353a !important; } /* Form labels (hardcoded dark gray in