/* Dark mode theme. The portal markup uses light Tailwind utilities (bg-white, text-gray-900, ...) without dark: variants, so this layer overrides those utilities whenever carries the `dark` class. The palette is a cohesive neutral-dark set (pairs with the orange artisoft-main accent), and the colored "pill" badges are reworked as translucent chips with bright text so they read well on dark surfaces. Toggled per logged-in user via /js/darkmode.js. */ html.dark { color-scheme: dark; } html.dark, html.dark body { background-color: #0f1115; } /* ----- Surfaces ----- */ .dark .bg-white { background-color: #1a1d23 !important; } .dark .bg-gray-50 { background-color: #14171c !important; } .dark .bg-gray-100 { background-color: #262a31 !important; } /* ----- Text ----- */ .dark .text-black, .dark .text-gray-900 { color: #e6e7e9 !important; } .dark .text-gray-800 { color: #dcdee1 !important; } .dark .text-gray-700 { color: #c8cacf !important; } .dark .text-gray-600 { color: #b1b4ba !important; } .dark .text-gray-500 { color: #8b9098 !important; } .dark .text-gray-400 { color: #6a6f78 !important; } /* ----- Borders / dividers / rings ----- */ .dark .border-gray-100, .dark .border-gray-200, .dark .border-gray-300 { border-color: #2b2f37 !important; } .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2b2f37 !important; } .dark .ring-gray-300 { --tw-ring-color: #3a3f48 !important; } /* ----- Hover surfaces ----- */ .dark .hover\:bg-gray-50:hover { background-color: #1a1d23 !important; } .dark .hover\:bg-gray-100:hover { background-color: #262a31 !important; } /* ----- Form controls ----- */ .dark input, .dark select, .dark textarea { background-color: #1a1d23 !important; border-color: #3a3f48 !important; color: #e6e7e9 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #8b9098 !important; } /* ----- Status / price pill badges ----- Light pastel chips (bg-*-100 + text-*-800) become translucent chips with bright text. */ .dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.16) !important; } .dark .text-yellow-800 { color: #fcd34d !important; } .dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.16) !important; } .dark .text-orange-800 { color: #fdba74 !important; } .dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.16) !important; } .dark .text-green-800 { color: #86efac !important; } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.16) !important; } .dark .text-red-800 { color: #fca5a5 !important; } /* Inline success / error / alert panels */ .dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; } .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } .dark .text-red-700 { color: #fca5a5 !important; } .dark .text-green-700 { color: #86efac !important; } /* ----- Sidebar / nav icons ----- Icons are colored via `stroke-gray-900`/`stroke-gray-800` which are invisible on a dark surface. Brighten them, then restore the orange hover with higher-specificity rules so the hover accent (and the nav label hover) still wins. */ .dark .stroke-gray-900, .dark .stroke-gray-800 { stroke: #c8cacf !important; } .dark .hover\:stroke-artisoft-main-600:hover { stroke: #fb7600 !important; } .dark .hover\:text-artisoft-main-600:hover { color: #fb7600 !important; } /* Code blocks (recovery codes, secrets) */ .dark code { color: #e6e7e9; }