/* Dark mode overrides — activated by .tw-dark on */ /* Base body */ .tw-dark body { background-color: #111827; /* gray-900 */ color: #f3f4f6; /* gray-100 */ } .tw-dark html { background-color: #111827; } /* Sidebar */ .tw-dark #desktop-sidebar, .tw-dark #mobile-sidebar-panel .tw-bg-white { background-color: #1f2937; /* gray-800 */ border-color: #374151; /* gray-700 */ } .tw-dark #sidebar-brand { background-color: #1f2937; border-color: #374151; } /* Sidebar logo — invert dark logos to white in dark mode */ .tw-dark .sidebar-logo img, .tw-dark #mobile-sidebar-panel .tw-h-16 img { filter: brightness(0) invert(1); } /* Login page logo */ .tw-dark img[alt="DocketAssist"] { filter: brightness(0) invert(1); } /* Header bar */ .tw-dark .tw-sticky.tw-top-0 { background-color: #1f2937 !important; border-color: #374151 !important; } /* Main content background */ .tw-dark .tw-bg-gray-50 { background-color: #111827 !important; } /* Main content wrapper and all nested containers */ .tw-dark #main-content, .tw-dark main, .tw-dark main > div { background-color: #111827 !important; } /* Cards, tables, white surfaces */ .tw-dark .tw-bg-white { background-color: #1f2937 !important; color: #f3f4f6; } /* Table headers */ .tw-dark .tw-bg-gray-50, .tw-dark thead .tw-bg-gray-50 { background-color: #1a2332 !important; } /* Table borders */ .tw-dark [class*="tw-divide-gray-200"] > * + * { border-color: #374151 !important; } .tw-dark [class*="tw-divide-gray-100"] > * + * { border-color: #374151 !important; } /* Table row hover — use darker shade in dark mode */ .tw-dark tr:hover, .tw-dark tbody tr:hover { background-color: #2d3748 !important; } .tw-dark [class*="tw-border-gray-200"] { border-color: #374151 !important; } .tw-dark [class*="tw-border-gray-100"] { border-color: #374151 !important; } /* Text colors */ .tw-dark .tw-text-gray-900 { color: #f9fafb !important; } .tw-dark .tw-text-gray-800 { color: #f3f4f6 !important; } .tw-dark .tw-text-gray-700 { color: #d1d5db !important; } .tw-dark .tw-text-gray-600 { color: #9ca3af !important; } .tw-dark .tw-text-gray-500 { color: #9ca3af !important; } /* Inputs */ .tw-dark input, .tw-dark textarea, .tw-dark select { background-color: #374151 !important; border-color: #4b5563 !important; color: #f3f4f6 !important; } .tw-dark input::placeholder, .tw-dark textarea::placeholder { color: #6b7280 !important; } .tw-dark input:focus, .tw-dark textarea:focus, .tw-dark select:focus { border-color: #269ED5 !important; box-shadow: 0 0 0 2px rgba(38, 158, 213, 0.3) !important; } /* Login page — ring inputs (tw-ring-*) */ .tw-dark [class*="tw-ring-gray-300"] { --tw-ring-color: #4b5563 !important; } /* Labels on login and forms */ .tw-dark label { color: #d1d5db !important; } /* Login page heading */ .tw-dark h2 { color: #f9fafb !important; } /* Sidebar nav links hover */ .tw-dark nav a:hover { background-color: #374151 !important; } /* General hover:bg-gray-50 override (used on table rows, dropdowns, etc.) */ .tw-dark .hover\:tw-bg-gray-50:hover { background-color: #2d3748 !important; } /* Badges */ .tw-dark .tw-badge { opacity: 0.9; } /* Buttons - secondary */ .tw-dark .tw-btn-secondary { background-color: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; } .tw-dark .tw-btn-secondary:hover { background-color: #4b5563 !important; } /* Dropdown panels */ .tw-dark #notifications-panel, .tw-dark #user-menu-panel { background-color: #1f2937 !important; border-color: #374151 !important; } .tw-dark #notifications-panel *, .tw-dark #user-menu-panel * { color: #d1d5db; } /* Charts canvas background */ .tw-dark canvas { filter: brightness(0.95); } /* Document preview frame */ .tw-dark .da-case-preview-frame { background-color: #1f2937 !important; border-color: #374151 !important; } .tw-dark .da-case-preview-frame iframe, .tw-dark .da-case-preview-frame embed { background-color: #374151; } /* Save annotations button */ .tw-dark .da-btn-save-annotations, .tw-dark .da-btn-view-toggle { color: #e5e7eb; background: #374151; border-color: #4b5563; } .tw-dark .da-btn-save-annotations:hover, .tw-dark .da-btn-view-toggle:hover { background: #4b5563; border-color: #6b7280; } /* Search input in header */ .tw-dark #search-field { background-color: transparent !important; } /* Scrollbar */ .tw-dark ::-webkit-scrollbar { width: 8px; } .tw-dark ::-webkit-scrollbar-track { background: #1f2937; } .tw-dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } /* Flash messages / alerts — darken backgrounds, keep readable */ .tw-dark .tw-bg-green-50 { background-color: rgba(22, 101, 52, 0.2) !important; color: #86efac !important; } .tw-dark .tw-bg-red-50 { background-color: rgba(153, 27, 27, 0.2) !important; color: #fca5a5 !important; } .tw-dark .tw-bg-blue-50 { background-color: rgba(30, 64, 175, 0.2) !important; color: #93c5fd !important; } .tw-dark .tw-bg-yellow-50 { background-color: rgba(146, 64, 14, 0.2) !important; color: #fde68a !important; } /* Badge backgrounds that use gray-100 */ .tw-dark .tw-bg-gray-100 { background-color: #374151 !important; } /* Conflict checker highlight mark */ .tw-dark mark { background-color: #854d0e !important; color: #fef3c7 !important; } /* Modals */ .tw-dark [data-modal-backdrop], .tw-dark .da-modal-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } .tw-dark [data-modal-panel], .tw-dark .da-modal-panel { background-color: #1f2937 !important; border-color: #374151 !important; } /* Sort links (Ransack) */ .tw-dark a[class*="sort_link"] { color: #9ca3af !important; } .tw-dark a[class*="sort_link"]:hover { color: #f3f4f6 !important; } /* Primary-light backgrounds in dark mode */ .tw-dark .tw-bg-primary-light { background-color: rgba(38, 158, 213, 0.15) !important; } /* Pagy pagination */ .tw-dark .pagy.nav a { background-color: #374151; border-color: #4b5563; color: #d1d5db; } .tw-dark .pagy.nav a.current { background-color: #269ED5; color: #fff; }