/* ═══════════════════════════════════════════════════════════════════════════ CrewDeck Dark Mode Applied when is set. Uses CSS variable overrides + targeted selectors for Tailwind utility classes. ═══════════════════════════════════════════════════════════════════════════ */ /* --- Org logo color inversion ------------------------------------------- */ /* Applied to black logos in dark mode and white logos in light mode */ .logo-invert { filter: invert(1); } /* --- Core CSS variable overrides ---------------------------------------- */ html.dark { --bg-light: #0f1117; --bg-white: #181b24; --text-dark: #e5e7eb; --text-muted: #9ca3af; --primary-color: #6366f1; --primary-hover: #818cf8; --border-color: #2d3343; --selection-color: #312e81; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.5); color-scheme: dark; /* Prevent iOS Safari from painting the html canvas as white */ background-color: #0f1117; } /* --- Body & page background --------------------------------------------- */ html.dark body { background-color: var(--bg-light) !important; color: var(--text-dark); } /* --- Tailwind bg-* overrides -------------------------------------------- */ html.dark .bg-white { background-color: #181b24 !important; } html.dark .bg-gray-50 { background-color: #1e2130 !important; } html.dark .bg-gray-100 { background-color: #232738 !important; } html.dark .bg-gray-200 { background-color: #2d3343 !important; } html.dark .bg-gray-300 { background-color: #374151 !important; } html.dark .bg-gray-800 { background-color: #111318 !important; } html.dark .bg-gray-900 { background-color: #0a0c10 !important; } /* --- Tailwind text-* overrides ------------------------------------------ */ html.dark .text-gray-900 { color: #f3f4f6 !important; } html.dark .text-gray-800 { color: #e5e7eb !important; } html.dark .text-gray-700 { color: #d1d5db !important; } html.dark .text-gray-600 { color: #9ca3af !important; } html.dark .text-gray-500 { color: #6b7280 !important; } html.dark .text-gray-400 { color: #6b7280 !important; } html.dark .text-black { color: #f3f4f6 !important; } /* --- Tailwind border-* overrides ---------------------------------------- */ html.dark .border-gray-50 { border-color: #2d3343 !important; } html.dark .border-gray-100 { border-color: #1e2130 !important; } html.dark .border-gray-200 { border-color: #2d3343 !important; } html.dark .border-gray-300 { border-color: #374151 !important; } html.dark .border-gray-400 { border-color: #4b5563 !important; } /* --- Tailwind ring/divide overrides ------------------------------------- */ html.dark .divide-gray-200 > * + * { border-color: #2d3343 !important; } html.dark .divide-gray-100 > * + * { border-color: #1e2130 !important; } html.dark .ring-gray-200 { --tw-ring-color: #2d3343 !important; } /* --- Hover state overrides ---------------------------------------------- */ html.dark .hover\:bg-gray-50:hover { background-color: #232738 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #2d3343 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #374151 !important; } /* --- Header ------------------------------------------------------------- */ html.dark #main-header { background-color: rgba(15, 17, 23, 0.94) !important; border-bottom-color: rgba(99, 102, 241, 0.15) !important; box-shadow: 0 1px 0 rgba(99, 102, 241, 0.08), 0 4px 24px rgba(0, 0, 0, 0.3) !important; } /* Nav icons mirror the mobile bottom-tab treatment: token colors + active glow, NO background box. Color comes from the dark-aware --cd-tab-* tokens (header.css base rule), so these only need to neutralize the old boxed hover/active. The mobile apps slide-in menu (.mobile-menu-panel .nav-icon) sets its own higher- specificity dark colors/hover and is unaffected. */ html.dark .nav-icon { color: var(--cd-tab-inactive); } html.dark .nav-icon:hover { color: var(--cd-tab-active); } html.dark .nav-icon.active { color: var(--cd-tab-active); } html.dark #workspace-switcher-btn:hover { background-color: rgba(99, 102, 241, 0.1) !important; } html.dark #header-credits-display { background-color: rgba(99, 102, 241, 0.15) !important; color: #818cf8 !important; border-color: rgba(99, 102, 241, 0.3) !important; } html.dark #header-credits-display:hover { background-color: rgba(99, 102, 241, 0.22) !important; color: #a5b4fc !important; } /* Header credits pill (#header-credits-pill — the lightning-bolt pill at the right of the global nav). header.html ships a data-dark-class attribute with the intended dark variant but nothing wires it up. Without these rules the element stays at light indigo-700 text on a near-white indigo-200 border in dark mode — illegible. Mirror the data-dark-class values directly. Moved here from dashboard.html 2026-05-17 so every page gets the dark pill, not just the dashboard. */ html.dark #header-credits-pill { background-color: rgba(49, 46, 129, 0.30) !important; /* indigo-900/30 */ color: #a5b4fc !important; /* indigo-300 */ border-color: #4338ca !important; /* indigo-700 */ } html.dark #header-credits-pill:hover { background-color: rgba(49, 46, 129, 0.50) !important; /* indigo-900/50 */ } html.dark #header-credits-balance { color: #a5b4fc !important; } /* The lightning-bolt SVG inherits stroke from text color (currentColor), so it picks up the indigo-300 above automatically. */ html.dark .header-separator { background: linear-gradient(to bottom, transparent 0%, rgba(99, 102, 241, 0.25) 50%, transparent 100%) !important; } /* --- Footer ------------------------------------------------------------- */ html.dark .main-footer { background-color: rgba(15, 17, 23, 0.94) !important; border-top-color: rgba(99, 102, 241, 0.15) !important; box-shadow: 0 -1px 0 rgba(99, 102, 241, 0.08), 0 -4px 24px rgba(0, 0, 0, 0.3) !important; } /* --- Mobile tab bar dark mode CSS variable overrides -------------------- */ /* These mirror the header.css html.dark block but load early (static CSS) */ /* so #mobile-tab-bar is dark from first paint, not after header.css loads. */ html.dark { --cd-nav-bg: rgba(15, 17, 23, 0.97); --cd-nav-border: rgba(99, 102, 241, 0.18); --cd-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); --cd-sheet-bg: rgba(24, 27, 36, 0.99); --cd-sheet-handle: #374151; --cd-sheet-border: rgba(99, 102, 241, 0.22); --cd-tab-inactive: #6b7280; --cd-tab-active: #818cf8; --cd-tab-touched: rgba(99, 102, 241, 0.12); --cd-icon-default: #e2e8f0; --cd-icon-hover: #818cf8; --cd-dot-inactive: #374151; --cd-dot-active: #6366f1; --cd-profile-header-bg: linear-gradient(135deg, #1e2130 0%, #181b24 100%); --cd-section-label: #9aa3b4; /* gray-600 (#4b5563) was ~2.7:1 on the dark sheet bg — fails. Lifted to ~6:1 (Mark 2026-06-19) */ --cd-item-hover: rgba(99, 102, 241, 0.08); --cd-item-color: #e2e8f0; } /* --- Mobile tab bar — explicit dark rule (belt-and-suspenders) ---------- */ html.dark #mobile-tab-bar { background: rgba(15, 17, 23, 0.97) !important; border-top-color: rgba(99, 102, 241, 0.18) !important; } /* --- Mobile nav (dark) — legacy, kept for any remaining .mobile-nav refs */ html.dark .mobile-nav { background-color: rgba(15, 17, 23, 0.96) !important; border-top-color: rgba(99, 102, 241, 0.15) !important; } html.dark .mobile-nav-btn.touched { background-color: rgba(99, 102, 241, 0.1) !important; } /* --- Mobile menu sheet (dark) ------------------------------------------- */ html.dark .mobile-menu { background-color: rgba(24, 27, 36, 0.98) !important; border-top-color: rgba(99, 102, 241, 0.2) !important; } html.dark .mobile-menu-panel .nav-icon:hover, html.dark .mobile-menu-panel .nav-icon.touched { background-color: rgba(99, 102, 241, 0.1) !important; color: #818cf8 !important; } /* --- Cards & panels ----------------------------------------------------- */ html.dark .settings-card, html.dark .project-card, html.dark .budget-summary-card { background-color: #181b24 !important; border-color: #2d3343 !important; } /* --- Forms: inputs, selects, textareas ---------------------------------- */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark select, html.dark textarea, html.dark .form-input, html.dark .form-select { background-color: #1e2130 !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #4b5563 !important; } /* Focus: single clean border. The at-rest rule above uses a long :not() chain * (high specificity) to set the neutral border-color !important — so a plainer * `input:focus` selector could NOT flip the border to indigo and the field kept * its GREY border while the box-shadow below painted an indigo ring flush * against it = a "double border" look. Mirror the at-rest :not() chain here (and * add :focus / .form-* variants) so the focus rule out-ranks the at-rest rule and * the border itself turns indigo — indigo 1px border + flush indigo 1px ring now * read as ONE clean 2px border instead of two nested lines. */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.combobox-text-input):focus, html.dark select:focus, html.dark textarea:focus, html.dark .form-input:focus, html.dark .form-select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 1px #6366f1 !important; } /* The combobox's inner must never draw its own focus ring/border — the .combobox-wrapper's :focus-within border is the single visible focus state. Without this exclusion the generic input:focus rule above painted a second, sharp inner rectangle inside the wrapper (the "double border" bug). */ html.dark .combobox-text-input, html.dark .combobox-text-input:focus { border: 0 !important; box-shadow: none !important; outline: none !important; } /* --- Buttons ------------------------------------------------------------ */ html.dark .btn-secondary { background-color: #2d3343 !important; color: #e5e7eb !important; } html.dark .btn-secondary:hover { background-color: #374151 !important; } /* --- Tables ------------------------------------------------------------- */ html.dark table thead { background-color: #1e2130 !important; } html.dark table thead th { color: #9ca3af !important; } html.dark table tbody tr { border-color: #2d3343 !important; } html.dark table tbody tr:hover { background-color: #1e2130 !important; } html.dark table tbody td { color: #d1d5db; } /* --- Modals & overlays -------------------------------------------------- */ html.dark .modal-container, html.dark [class*="modal"] > div > div { background-color: #181b24 !important; border-color: #2d3343 !important; } /* The spotlight container lives inside #header-placeholder (a div inside body.modal-open), so the wildcard [class*="modal"] > div > div rule above accidentally matches it. Reset it explicitly — the spotlight should always be transparent. */ html.dark #spotlight-search-container { background-color: transparent !important; border-color: transparent !important; } /* --- Dropdowns & panels ------------------------------------------------- #all-actions-panel removed from this group — it's no longer a dropdown it's a transparent side-slide panel (.apps-side-panel) and needs the page to show through. */ html.dark #user-menu-panel, html.dark #workspace-switcher-panel, html.dark #sort-menu-dropdown, html.dark #footer-support-panel { background-color: #181b24 !important; border-color: #2d3343 !important; } html.dark #user-menu-panel a:hover, html.dark #workspace-switcher-panel button:hover { background-color: #232738 !important; } /* header.html — user menu item text + labels (class rules bypass global Tailwind overrides) */ html.dark .user-menu-item:not(.user-menu-item--super) { color: #d1d5db !important; } html.dark .user-menu-item:not(.user-menu-item--super):hover { background-color: #232738 !important; color: #818cf8 !important; } html.dark .user-menu-item:not(.user-menu-item--super):hover .user-menu-item-icon { color: #818cf8 !important; } html.dark #user-menu-panel .text-gray-400 { color: #9ca3af !important; } html.dark #user-menu-panel .text-gray-500 { color: #9ca3af !important; } /* Apps panel chrome now lives in .apps-side-panel (css/right-panel.css). Keep only the guard rules so legacy dark-mode-critical rules in dashboard.html don't bleed white into the dark panel. */ html.dark #all-actions-panel { box-shadow: none !important; --tw-ring-color: transparent !important; } html.dark #all-actions-grid .action-button { background-color: rgba(20, 22, 32, 0.98) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #d1d5db !important; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.55) !important; } html.dark #all-actions-grid .action-button:hover { background-color: rgba(30, 28, 70, 0.99) !important; -webkit-backdrop-filter: blur(28px) saturate(200%) !important; backdrop-filter: blur(28px) saturate(200%) !important; border-color: rgba(99, 102, 241, 0.55) !important; color: #a5b4fc !important; } html.dark .action-button svg { color: #818cf8 !important; } /* --- Spotlight search --------------------------------------------------- */ html.dark #project-search-input { background-color: #1e2130 !important; color: #e5e7eb !important; border-color: #374151 !important; } html.dark #spotlight-results-panel { background-color: #181b24 !important; border-color: #2d3343 !important; } /* --- AI Chat ------------------------------------------------------------ */ html.dark #ai-chat-thread { background-color: #181b24 !important; border-color: #2d3343 !important; } html.dark #ai-chat-header { background-color: #181b24 !important; border-bottom-color: #2d3343 !important; } html.dark .ai-chat-header-btn { color: #6b7280; } html.dark .ai-chat-header-btn:hover { background-color: #232738; color: #e5e7eb; } /* Voice / attach / agentic buttons in dark mode */ html.dark .ai-voice-btn { background: #232738 !important; border-color: #3d4458 !important; color: #9ca3af !important; } html.dark .ai-voice-btn:hover { background: #2d3343 !important; border-color: #6366f1 !important; color: #a5b4fc !important; } html.dark .ai-agentic-btn { background: #232738 !important; border-color: #3d4458 !important; color: #9ca3af !important; } html.dark .ai-agentic-btn:hover { background: #2d3343 !important; border-color: #a5b4fc !important; color: #a5b4fc !important; } html.dark .ai-agentic-btn.ai-agentic-on { background: #4f46e5 !important; border-color: #6366f1 !important; color: white !important; box-shadow: 0 0 8px rgba(99, 102, 241, 0.5) !important; } html.dark .ai-agentic-btn.ai-agentic-on:hover { background: #4338ca !important; border-color: #4338ca !important; } html.dark .ai-voice-chat-btn-style { background: #232738 !important; border-color: #3d4458 !important; color: #a78bfa !important; } html.dark .ai-voice-chat-btn-style:hover { background: #2d3343 !important; border-color: #8b5cf6 !important; color: #c4b5fd !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25) !important; } html.dark .ai-voice-chat-live-dot { border-color: #232738 !important; } html.dark .ai-msg-user { background-color: #232738 !important; color: #e5e7eb !important; } html.dark .ai-msg-model { background-color: #1e2130 !important; color: #d1d5db !important; } html.dark .ai-action-suggestion-chip { background-color: #232738 !important; border-color: #374151 !important; color: #d1d5db !important; } html.dark .ai-action-suggestion-chip:hover { background-color: #2d3343 !important; border-color: #6366f1 !important; } /* --- Visualizations ----------------------------------------------------- */ html.dark .cdviz-container { background-color: #1e2130 !important; border-color: #2d3343 !important; color: #d1d5db !important; } html.dark .cdviz-table th { background-color: #232738 !important; color: #9ca3af !important; } html.dark .cdviz-table td { border-color: #2d3343 !important; } html.dark .cdviz-table tr:hover { background-color: #232738 !important; } html.dark .cdviz-stat-card { background-color: #232738 !important; } html.dark .cdviz-timeline-dot { border-color: #181b24 !important; } html.dark .cdviz-timeline-line { background-color: #374151 !important; } html.dark .cdviz-kanban-col { background-color: #1e2130 !important; border-color: #2d3343 !important; } html.dark .cdviz-kanban-card { background-color: #232738 !important; border-color: #374151 !important; } /* --- Settings page specifics -------------------------------------------- */ html.dark .settings-nav-group-title { color: #6b7280 !important; } html.dark .tab-button { color: #9ca3af !important; } html.dark .tab-button:hover { background-color: #232738 !important; color: #e5e7eb !important; } html.dark .tab-button.active { background-color: #232738 !important; color: #818cf8 !important; } /* --- Permission switch (toggle) — styles now in css/apple-toggle.css --- */ /* --- Badges & pills ----------------------------------------------------- */ html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; } html.dark .bg-green-100 { background-color: rgba(34,197,94,0.15) !important; } html.dark .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; } html.dark .bg-yellow-100 { background-color: rgba(234,179,8,0.15) !important; } html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; } html.dark .bg-purple-100 { background-color: rgba(168,85,247,0.15) !important; } /* --- Scrollbar ---------------------------------------------------------- */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: #0f1117; } html.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* --- Landing page (public) ---------------------------------------------- */ html.dark .hero-section { background-color: #0f1117 !important; } html.dark .feature-card { background-color: #181b24 !important; border-color: #2d3343 !important; } /* --- Workspace switcher ------------------------------------------------- */ html.dark .workspace-item:hover { background-color: #232738 !important; } /* --- Mobile nav --------------------------------------------------------- */ html.dark .mobile-nav { background-color: rgba(15, 17, 23, 0.95) !important; border-top-color: #2d3343 !important; } html.dark .mobile-nav-btn { color: #6b7280; } html.dark .mobile-nav-btn.active { color: #818cf8; } /* --- Misc: border-t, border-b with gray -------------------------------- */ html.dark .border-t { border-top-color: #2d3343; } html.dark .border-b { border-bottom-color: #2d3343; } /* --- Placeholder overrides for bg-[color] in inline Tailwind ------------ */ html.dark [style*="background-color: white"], html.dark [style*="background-color: #fff"], html.dark [style*="background-color: #ffffff"] { background-color: #181b24 !important; } /* --- Profile avatar ring ------------------------------------------------ */ html.dark .focus\:ring-offset-2:focus { --tw-ring-offset-color: #0f1117 !important; } /* --- Dashboard project cards -------------------------------------------- */ html.dark .project-card-inner, html.dark .project-info-card { background-color: #181b24 !important; border-color: #2d3343 !important; } html.dark .project-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } /* --- Sortable drag ghost ------------------------------------------------ */ html.dark .sortable-ghost { background-color: #232738 !important; opacity: 0.7; } html.dark .sortable-chosen { background-color: #1e2130 !important; } /* --- Dashboard widgets -------------------------------------------------- */ html.dark .stat-tile, html.dark #notifications-list, html.dark #upcoming-shoots-list, html.dark #dashboard-sidebar > div { background-color: #181b24 !important; border-color: #2d3148 !important; color: #e5e7eb; } html.dark .stat-tile .text-gray-900, html.dark #notifications-list .text-gray-800, html.dark #upcoming-shoots-list .text-gray-800, html.dark #upcoming-shoots-list .text-gray-900 { color: #e5e7eb !important; } html.dark .stat-tile .text-gray-500, html.dark #notifications-list .text-gray-400, html.dark #upcoming-shoots-list .text-gray-400 { color: #9ca3af !important; } html.dark #dashboard-sidebar > div > div.border-b { border-color: #2d3148 !important; } html.dark #dashboard-sidebar .text-gray-800 { color: #e5e7eb !important; } html.dark #upcoming-shoots-list a:hover, html.dark #notifications-list .flex:hover { background-color: #1e2130 !important; } html.dark #dashboard-sidebar .divide-y > * { border-color: #2d3148 !important; } html.dark .stat-tile .bg-indigo-50 { background-color: #1e2248 !important; } html.dark .stat-tile .bg-green-50 { background-color: #14291e !important; } html.dark .stat-tile .bg-amber-50 { background-color: #2b1f0a !important; } html.dark .stat-tile .bg-purple-50 { background-color: #221b38 !important; } html.dark #dashboard-sidebar button.bg-gray-50 { background-color: #1e2130 !important; color: #9ca3af !important; } html.dark #dashboard-sidebar button.bg-gray-50:hover { background-color: #232748 !important; color: #818cf8 !important; } /* --- Modular sidebar system ------------------------------------------------ */ html.dark .sidebar-widget-card { background-color: #181b24 !important; border-color: #2d3148 !important; } html.dark .sidebar-widget-card .border-b { border-color: #2d3148 !important; } html.dark .sidebar-widget-card .text-gray-800 { color: #e5e7eb !important; } html.dark .sidebar-widget-card .text-gray-400, html.dark .sidebar-widget-card .text-gray-500 { color: #9ca3af !important; } html.dark .sidebar-widget-card .text-gray-600 { color: #d1d5db !important; } html.dark .sidebar-widget-card .bg-gray-50 { background-color: #1e2130 !important; } html.dark .sidebar-widget-card a:hover, html.dark .sidebar-widget-card .hover\:bg-gray-50:hover { background-color: #1e2130 !important; } html.dark .sidebar-widget-card .divide-y > * { border-color: #2d3148 !important; } html.dark .sidebar-widget-card .border-gray-100 { border-color: #2d3148 !important; } html.dark .sidebar-widget-card .bg-gray-100 { background-color: #232738 !important; } html.dark .sidebar-widget-card input { background-color: #1e2130 !important; border-color: #2d3148 !important; color: #e5e7eb !important; } html.dark .widget-settings { background-color: #1e2130 !important; border-color: #2d3148 !important; } /* Edit-mode ring on pw-widget-cards uses #e0e7ff (near-white) — darken for dark mode */ html.dark #project-widgets-area.pw-edit-active .pw-widget-card, html.dark .pw-widget-card.ring-2 { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35) !important; --tw-ring-color: rgba(99, 102, 241, 0.35) !important; --tw-ring-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35) !important; } html.dark #app-picker-modal > div, html.dark #add-widget-modal > div { background-color: #181b24 !important; } html.dark #app-picker-modal .border-b, html.dark #add-widget-modal .border-b { border-color: #2d3148 !important; } html.dark #app-picker-modal .text-gray-900, html.dark #add-widget-modal .text-gray-900, html.dark #app-picker-modal .text-gray-800, html.dark #add-widget-modal .text-gray-800 { color: #e5e7eb !important; } html.dark #app-picker-modal input { background-color: #1e2130 !important; border-color: #2d3148 !important; color: #e5e7eb !important; } html.dark #app-picker-list button:hover, html.dark #add-widget-list button:hover { background-color: #232748 !important; } html.dark #app-picker-list .bg-gray-100, html.dark #add-widget-list .bg-indigo-50 { background-color: #1e2248 !important; } html.dark #dashboard-sidebar > div:first-child button { color: #9ca3af !important; } html.dark #dashboard-sidebar > div:first-child button:hover { background-color: #1e2248 !important; color: #818cf8 !important; } html.dark .border-dashed { border-color: #2d3148 !important; } /* --- Widget Builder modal -------------------------------------------------- */ html.dark #add-widget-modal textarea { background-color: #1e2130 !important; border-color: #2d3148 !important; color: #e5e7eb !important; } html.dark #add-widget-modal textarea::placeholder { color: #6b7280 !important; } html.dark #wb-ai-result { background-color: #1e2248 !important; border-color: #3730a3 !important; } html.dark #wb-node-palette, html.dark #wb-node-preview { background-color: #181b24 !important; } html.dark #wb-canvas-wrap { background-color: #0f1117 !important; background-image: radial-gradient(circle, #374151 1px, transparent 1px) !important; } html.dark .wb-chip { background-color: #1e2248 !important; color: #818cf8 !important; } html.dark .wb-chip:hover { background-color: #2e3060 !important; } html.dark .wb-node-inner { background-color: #232738 !important; } html.dark #add-widget-modal .border-gray-100 { border-color: #2d3148 !important; } html.dark #add-widget-modal .text-gray-400 { color: #9ca3af !important; } html.dark #add-widget-modal .text-gray-500 { color: #9ca3af !important; } html.dark #add-widget-modal .bg-gray-50 { background-color: #1e2130 !important; } html.dark .wb-tab-btn.text-gray-400 { color: #6b7280 !important; } html.dark #add-widget-modal .text-gray-300 { color: #6b7280 !important; } /* --- Viz view switcher ----------------------------------------------------- */ html.dark .cdviz-view-switcher { background-color: #181b24 !important; border-bottom-color: #2d3343 !important; } html.dark .cdviz-view-btn { background-color: #1e2130 !important; border-color: #2d3343 !important; color: #9ca3af !important; } html.dark .cdviz-view-btn:hover { border-color: #818cf8 !important; color: #818cf8 !important; background-color: #1e2248 !important; } html.dark .cdviz-view-btn.cdviz-view-active { background-color: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; } /* --- Viz click-to-copy ---------------------------------------------------- */ html.dark .cdviz-copy { border-bottom-color: #4f46e5 !important; } html.dark .cdviz-copy:hover { background-color: #1e2248 !important; color: #818cf8 !important; } html.dark .cdviz-copied { background-color: #14291e !important; color: #34d399 !important; border-bottom-color: #059669 !important; } /* --- Crew card dark mode -------------------------------------------------- */ html.dark .cdviz-crew-card { background-color: #1e2130 !important; border-color: #2d3343 !important; } html.dark .cdviz-crew-name { color: #e5e7eb !important; } html.dark .cdviz-crew-contact { color: #9ca3af !important; } /* ============================================================ EMAIL TEMPLATE PAGE ============================================================ */ /* Sidebar & template list — matches the shared dashboard dark nav-row style (settings/PW/org .tab-button/.pw-tab-btn/.org-tab-btn): transparent non-active rows, subtle hover, indigo active on desktop / grey iOS-grouped active on mobile. */ html.dark .template-list-item { background: transparent; color: #d1d5db; } html.dark .template-list-item:not(.active):hover { background: #252a38; } html.dark .template-list-item.active { background-color: var(--primary-color, #4f46e5); color: #fff; } @media (max-width: 767px) { html.dark .template-list-item.active { background-color: #252a38 !important; color: #d1d5db !important; } } html.dark .template-list-item .text-gray-500 { color: #9ca3af !important; } /* Editor wrapper and content area */ html.dark #editor-content-wrapper, html.dark #editor-mode-container, html.dark #email-content-area { background: #181b24 !important; color: #e5e7eb; } html.dark #no-template-selected-editor { color: #9ca3af; } /* Section headings */ html.dark #editor-mode-container h3, html.dark #editor-mode-container label { color: #e5e7eb !important; } /* Placeholder builder */ html.dark #placeholder-builder-container { background: #1e2130 !important; border-color: #2d3343 !important; } html.dark .builder-list { background: #151722 !important; border-color: #2d3343 !important; } html.dark .builder-menu-item { color: #d1d5db; } html.dark .builder-menu-item:hover, html.dark .builder-menu-item.active { background: #312e81 !important; color: #e0e7ff !important; } html.dark .builder-connector svg { stroke: #6b7280; } /* Builder pills */ html.dark .placeholder-pill { background: #312e81 !important; color: #c7d2fe !important; border-color: #4338ca !important; } html.dark .builder-list .placeholder-pill:hover { background: #3730a3 !important; border-color: #6366f1 !important; } /* Per-type dark builder pill colors */ html.dark .placeholder-pill[data-type="location-pill"] { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.4) !important; color: #86efac !important; } html.dark .placeholder-pill[data-type="shoot-day-pill"] { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.4) !important; color: #93c5fd !important; } html.dark .placeholder-pill[data-type="date-pill"] { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.4) !important; color: #fcd34d !important; } html.dark .placeholder-pill[data-type="department-call-pill"] { background: rgba(236,72,153,0.15) !important; border-color: rgba(236,72,153,0.4) !important; color: #f9a8d4 !important; } html.dark .placeholder-pill[data-type="production-contact-pill"] { background: rgba(168,85,247,0.15) !important; border-color: rgba(168,85,247,0.4) !important; color: #c084fc !important; } html.dark .placeholder-pill[data-type="doc-pill"] { background: rgba(249,115,22,0.15) !important; border-color: rgba(249,115,22,0.4) !important; color: #fdba74 !important; } html.dark .placeholder-pill[data-type="position-pill"] { background: rgba(52,211,153,0.15) !important; border-color: rgba(52,211,153,0.4) !important; color: #6ee7b7 !important; } /* Editor pills in HTML view */ html.dark .placeholder-pill-in-editor { background: rgba(99,102,241,0.15) !important; border-color: rgba(99,102,241,0.3) !important; color: #e5e7eb !important; } html.dark .placeholder-pill-in-editor[data-type="location-pill"] { background: rgba(34,197,94,0.15) !important; border-color: rgba(34,197,94,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="shoot-day-pill"] { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="date-pill"] { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="department-call-pill"] { background: rgba(236,72,153,0.15) !important; border-color: rgba(236,72,153,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="production-contact-pill"] { background: rgba(168,85,247,0.15) !important; border-color: rgba(168,85,247,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="doc-pill"] { background: rgba(249,115,22,0.15) !important; border-color: rgba(249,115,22,0.3) !important; } html.dark .placeholder-pill-in-editor[data-type="position-pill"] { background: rgba(52,211,153,0.15) !important; border-color: rgba(52,211,153,0.3) !important; } /* Subject editor (contenteditable) */ html.dark .editable-input-singleline { background: #1e2130 !important; color: #e5e7eb !important; border-color: #2d3343 !important; } /* Add template modal */ html.dark #add-template-modal .bg-white, html.dark #recipient-config-modal .bg-white { background: #1e2130 !important; color: #e5e7eb !important; } html.dark #add-template-modal input, html.dark #add-template-modal select { background: #151722 !important; border-color: #2d3343 !important; color: #e5e7eb !important; } html.dark #add-template-modal label { color: #d1d5db !important; } /* Project switcher panel */ html.dark #project-switcher-panel { background: #1e2130 !important; border-color: #2d3343 !important; } html.dark .project-option { color: #d1d5db !important; } html.dark .project-option:hover { background: #252839 !important; } /* AI editor button and popover */ html.dark #ai-editor-btn { background: rgba(79,70,229,0.15) !important; color: #a5b4fc !important; border-color: rgba(99,102,241,0.3) !important; } html.dark #ai-editor-btn:hover { background: rgba(79,70,229,0.25) !important; } html.dark #ai-editor-popover { background: #1e2130 !important; border-color: #2d3343 !important; color: #e5e7eb; box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important; } html.dark #ai-editor-prompt { background: #151722 !important; border-color: #2d3343 !important; color: #f9fafb !important; } html.dark #ai-editor-prompt::placeholder { color: #6b7280 !important; } html.dark .ai-mode-btn { border-color: #374151 !important; color: #d1d5db !important; } html.dark .ai-mode-btn:hover { border-color: #6366f1 !important; color: #a5b4fc !important; } html.dark .ai-mode-btn.ai-mode-active { background: rgba(99,102,241,0.2) !important; border-color: #6366f1 !important; color: #c7d2fe !important; } html.dark .ai-chip { background: #151722 !important; border-color: #2d3343 !important; color: #9ca3af !important; } html.dark .ai-chip:hover { background: rgba(99,102,241,0.15) !important; border-color: rgba(99,102,241,0.4) !important; color: #a5b4fc !important; } html.dark #ai-editor-popover p { color: #6b7280 !important; } /* Autocomplete popup */ html.dark #autocomplete-popup { background: #1e2130 !important; border-color: #2d3343 !important; } html.dark .autocomplete-item { color: #d1d5db !important; } html.dark .autocomplete-item:hover, html.dark .autocomplete-item.selected { background: #312e81 !important; color: #e0e7ff !important; } /* Save button area */ html.dark #save-template-btn { background: #4f46e5 !important; } /* View toggle buttons */ html.dark .view-toggle-btn { border-color: #2d3343 !important; color: #9ca3af !important; } html.dark .view-toggle-btn.active { background: #312e81 !important; border-color: #6366f1 !important; color: #e0e7ff !important; } /* Manual email recipient pills */ html.dark .manual-email-pill { background-color: #1e2248 !important; color: #c7d2fe !important; border: 1px solid rgba(99,102,241,0.4) !important; } html.dark .manual-email-pill .remove-pill-btn { color: #818cf8 !important; } html.dark .manual-email-pill.is-selected { background-color: #312e81 !important; color: #e0e7ff !important; } html.dark .manual-email-pill.is-invalid { background-color: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,0.4) !important; } /* AI suggestion chips (violet) in the AI editor popover */ html.dark .ai-suggestion-chip { background-color: rgba(139,92,246,0.15) !important; border-color: rgba(139,92,246,0.35) !important; color: #c4b5fd !important; } html.dark .ai-suggestion-chip:hover { background-color: rgba(139,92,246,0.28) !important; border-color: rgba(139,92,246,0.55) !important; } /* AI format toggle strip (HTML / Plain) */ html.dark #ai-editor-popover .bg-gray-100 { background-color: #151722 !important; } html.dark #ai-format-html, html.dark #ai-format-plain { color: #d1d5db !important; } /* Send method dropdown items */ html.dark .send-method-opt { color: #d1d5db !important; } html.dark .send-method-opt:hover { background-color: rgba(99,102,241,0.12) !important; color: #a5b4fc !important; } /* Preview subject line row (project view) */ html.dark #preview-mode-container > div:first-child { background-color: #1e2130 !important; border-color: #2d3343 !important; } html.dark #editor-subject-preview { color: #e5e7eb !important; } /* Preview iframes — dark-mode border */ html.dark #editor-body-preview, html.dark #email-body-final { border-color: #2d3343 !important; } /* Section labels inside placeholder builder */ html.dark #placeholder-builder-container label { color: #d1d5db !important; } /* Recipient modal content area */ html.dark #recipient-modal-content { background-color: #181b24 !important; color: #e5e7eb !important; border-color: #2d3343 !important; } html.dark #recipient-modal-body { color: #d1d5db; } html.dark #recipient-modal-body label { color: #d1d5db !important; } html.dark #recipient-modal-body input, html.dark #recipient-modal-body select, html.dark #recipient-modal-body textarea { background-color: #1e2130 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark #recipient-modal-body .text-gray-700 { color: #d1d5db !important; } html.dark #recipient-modal-body .text-gray-500 { color: #9ca3af !important; } html.dark #recipient-modal-body .bg-gray-50 { background-color: #1e2130 !important; } html.dark #recipient-modal-body .border-gray-200 { border-color: #2d3343 !important; } /* Inspector panel */ html.dark #inspector-panel { background-color: #181b24 !important; border-color: #2d3343 !important; } html.dark #inspector-panel h3 { color: #e5e7eb !important; } html.dark #inspector-panel label { color: #d1d5db !important; } html.dark #inspector-panel input, html.dark #inspector-panel textarea { background-color: #1e2130 !important; border-color: #374151 !important; color: #e5e7eb !important; } html.dark #inspector-panel .text-gray-500 { color: #9ca3af !important; } /* Printer View button — hidden in light mode, visible in dark mode */ #printer-view-btn { display: none !important; } html.dark #printer-view-btn { display: inline-flex !important; } /* ============================================================ DASHBOARD — Additional dark mode polish ============================================================ */ /* --- Command bar & Copy Brief -------------------------------------------- */ html.dark .command-bar { background: #1e2130 !important; border-color: #2d3343 !important; } html.dark .cmd-btn { color: #9ca3af !important; } html.dark .cmd-btn:hover { background: rgba(99,102,241,0.12) !important; color: #818cf8 !important; } html.dark .cmd-btn-divider { background: #2d3343 !important; } html.dark .quick-share-btn { background: #232738 !important; color: #9ca3af !important; border-color: #2d3343 !important; } html.dark .quick-share-btn:hover { background: rgba(99,102,241,0.15) !important; color: #818cf8 !important; border-color: rgba(99,102,241,0.5) !important; } /* --- Action buttons (project detail grid) --------------------------------- */ html.dark .action-button { background-color: #1e2130 !important; color: #d1d5db !important; border-color: #2d3343 !important; box-shadow: none !important; } html.dark .action-button:hover { background-color: rgba(99,102,241,0.1) !important; color: #818cf8 !important; border-color: rgba(99,102,241,0.4) !important; box-shadow: none !important; } html.dark .action-button svg { color: #6366f1 !important; } /* --- Filter buttons ------------------------------------------------------- */ html.dark .filter-btn { background-color: #232738 !important; color: #9ca3af !important; border-color: transparent !important; } html.dark .filter-btn:hover { background-color: #2d3343 !important; color: #d1d5db !important; } html.dark .filter-btn.active { background-color: #6366f1 !important; color: #ffffff !important; } /* --- Workspace tabs ------------------------------------------------------- */ html.dark #workspace-tabs-container { background-color: #232738 !important; } html.dark .workspace-tab { color: #9ca3af !important; } html.dark .workspace-tab.active { background-color: #6366f1 !important; color: #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important; } /* --- Timeline (shoot day) tabs -------------------------------------------- */ html.dark .timeline-tab:hover { background: #232738 !important; border-color: #2d3343 !important; } html.dark .timeline-tab.active { background: #1e2248 !important; border-color: rgba(99,102,241,0.4) !important; } html.dark .timeline-tab .tab-name { color: #d1d5db !important; } html.dark .timeline-tab.active .tab-name { color: #818cf8 !important; } html.dark .timeline-tab .tab-date { color: #6b7280 !important; } html.dark .timeline-tab.active .tab-date { color: #6366f1 !important; } html.dark .tab-dot.dot-past { background: #374151 !important; } /* --- Shoot day tabs (top of detail view) ---------------------------------- */ html.dark .shoot-day-tab { color: #9ca3af !important; } html.dark .shoot-day-tab.active { background-color: rgba(99,102,241,0.15) !important; color: #818cf8 !important; } /* --- Readiness ring ------------------------------------------------------- */ html.dark .readiness-ring .track { stroke: #2d3343 !important; } html.dark .readiness-ring .fill { stroke: #6366f1 !important; } /* --- Mission brief date block --------------------------------------------- */ html.dark .mission-date-block { background: linear-gradient(to right, rgba(99,102,241,0.08), transparent) !important; } /* --- Day schedule rows ---------------------------------------------------- */ html.dark .schedule-time-row + .schedule-time-row { border-top-color: #2d3343 !important; } html.dark .schedule-time { color: #d1d5db !important; } html.dark .schedule-label { color: #9ca3af !important; } /* --- Combobox dropdown ---------------------------------------------------- */ html.dark .custom-combobox-option:hover { background-color: #232738 !important; } /* --- Info action buttons -------------------------------------------------- */ html.dark .info-action-button { background-color: rgba(255,255,255,0.05) !important; color: #9ca3af !important; } html.dark .info-action-button:hover { background-color: rgba(255,255,255,0.08) !important; color: #e5e7eb !important; } /* --- bg-gray-50/50 (opacity variant — modal body content) ----------------- */ html.dark .bg-gray-50\/50 { background-color: #181b24 !important; } /* --- bg-indigo-50 / light tinted backgrounds in dark mode ----------------- */ html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.08) !important; } html.dark .bg-green-50 { background-color: rgba(34,197,94,0.08) !important; } html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.08) !important; } html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.08) !important; } /* --- text-indigo-600 / tinted text in cards ------------------------------- */ html.dark .text-indigo-600 { color: #818cf8 !important; } html.dark .text-green-600 { color: #34d399 !important; } /* --- Weather icon wrapper ------------------------------------------------- */ html.dark .weather-icon-wrapper { background-color: rgba(30,33,48,0.85) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } /* --- Tutorial tooltip & nav --------------------------------------------- */ html.dark .tutorial-tooltip { background-color: #181b24 !important; color: #e5e7eb !important; border-color: #2d3343 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } html.dark .tutorial-tooltip p strong { color: #818cf8 !important; } html.dark .tutorial-tooltip-arrow.up { border-bottom-color: #181b24 !important; } html.dark .tutorial-tooltip-arrow.down { border-top-color: #181b24 !important; } html.dark .tutorial-tooltip-arrow.left { border-right-color: #181b24 !important; } html.dark .tutorial-tooltip-arrow.right { border-left-color: #181b24 !important; } html.dark .tutorial-nav { background-color: rgba(24,27,36,0.96) !important; border: 1px solid #2d3343 !important; box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important; } /* --- Project list rows (container has no card styling) ------------------- */ html.dark .project-list-item { background-color: transparent !important; border-bottom-color: #2d3343 !important; } @media (hover: hover) { html.dark .project-list-item:hover { background-color: rgba(255,255,255,0.03) !important; } html.dark .project-list-item .project-summary:hover { background-color: rgba(255,255,255,0.02) !important; } } html.dark .project-list-item:active { background-color: rgba(255,255,255,0.05) !important; } html.dark .project-list-item.expanded { background-color: rgba(99,102,241,0.05) !important; } html.dark .project-list-item.selected { background-color: rgba(99,102,241,0.1) !important; } /* Fade out color strip when item is selected/expanded — smooth, no layout jump */ html.dark .project-list-item .status-strip { transition: opacity 0.2s ease; } html.dark .project-list-item.selected .status-strip, html.dark .project-list-item.expanded .status-strip { opacity: 0 !important; } /* --- No-projects empty state --------------------------------------------- */ html.dark #no-projects-message .bg-gray-100 { background-color: #232738 !important; } html.dark #no-projects-message .text-gray-700 { color: #d1d5db !important; } html.dark #no-projects-message .text-gray-400 { color: #6b7280 !important; } /* --- Widget empty state (polished) --------------------------------------- */ html.dark .widget-empty-state { color: #6b7280 !important; } html.dark .widget-empty-state .empty-icon { color: #374151 !important; } html.dark .widget-empty-state .empty-title { color: #9ca3af !important; } html.dark .widget-empty-state .empty-sub { color: #6b7280 !important; } /* ══════════════════════════════════════════════════════════════════════════ * EMPTY STATES — container-less in DARK MODE (Mark 2026-07-20) * An empty state must not render a boxed container in dark mode: the icon+text sit * directly on the page bg, centered. Each selector below matches ONLY the empty-only * condition (a unique empty class, a full-innerHTML-replacement id, :not(.hidden), or * a direct-child chain), so a POPULATED container keeps its box. We strip ONLY * background/fill, border and box-shadow (+ a lingering table header band) — never * display/flex/min-height/padding/margin — so the self-centering empty element stays * centered. :has() is supported on Android WebView + iOS WebKit 15.4+; on an older * engine the rule simply doesn't match (the empty state stays boxed = today's * behaviour). All rules are gated on html.dark so LIGHT mode is unchanged. Catalogued * app-wide via the empty-state container audit. */ /* Financial table-wrap empty states (Purchase Orders #po-table-wrap, Petty Cash * #pc-table-wrap). Also hide the lingering column-header band so it's truly flat. */ html.dark .app-table-wrap:has(.cd-empty) { background: transparent; border: none; box-shadow: none; } html.dark .app-table-wrap:has(.cd-empty) thead { display: none; } /* Org Dashboard tabs + Line Provisioning (boxed by .settings-card). Direct-child * .p-6 > .cd-empty targets dedicated list-body cards but NOT the AI-Tools Custom-Agents * card (its .cd-empty is nested deeper). .lp-empty is unique to Line Provisioning. * !important is REQUIRED — the base .settings-card dark rule (above) uses !important. */ html.dark #org-content-area .settings-card:has(> .p-6 > .cd-empty), html.dark #organization-dashboard-content .settings-card:has(> .p-6 > .cd-empty), html.dark #settings-content-wrapper .settings-card:has(.lp-empty) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Production Report section cards (Crew Wraps + Timeline Log). Crew keys on the VISIBLE * wrapper (#crew-empty:not(.hidden)) because its .cd-empty is always in the DOM; * Timeline keys on #timeline-empty, which is removed from the DOM once events exist. */ html.dark .section-card:has(> #crew-empty:not(.hidden)), html.dark .section-card:has(#timeline-empty) { background: transparent; border-color: transparent; box-shadow: none; } /* Shooting Schedule — Run of Show "No shoot days yet". #run-of-show-summary's innerHTML * is fully replaced with only .sl-empty when empty, so :has(> .sl-empty) is empty-only. */ html.dark #run-of-show-summary.surface-card:has(> .sl-empty) { background: transparent; border-color: transparent; box-shadow: none; } /* Dashboard Overview day-glance "No shoot days yet": the empty element is its own * container and only carries a dashed border in dark mode — drop just the border. */ html.dark .cd-ov-glance-empty { border-color: transparent; } /* Payroll section empty states (.section-empty inside .section-card). Also drop the * section-header divider so no line floats above the flattened state. (Distinct * .section-card scope from Production Report above — different empty class, no clash.) */ html.dark .section-card:has(.section-empty) { background: transparent; border: none; box-shadow: none; } html.dark .section-card:has(.section-empty) .section-header { border-bottom: none; } /* Payment Profile — Payouts empty (.pp-empty, unique to the payouts card). */ html.dark .pp-card:has(.pp-empty) { border-color: transparent !important; background: transparent !important; } /* --- Widget fade transition skeleton ------------------------------------- */ html.dark .widget-skeleton-line { background: linear-gradient(90deg, #232738 25%, #2d3343 50%, #232738 75%) !important; background-size: 200% 100% !important; animation: widgetSkeleton 1.4s ease infinite !important; } @keyframes widgetSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Detail view inner wrapper (bg + border) ----------------------------- */ html.dark .bg-white.rounded-b-xl { background-color: #181b24 !important; } html.dark .border-b.border-gray-100 { border-bottom-color: #2d3343 !important; } /* --- Stats bar tile icon badges ------------------------------------------ */ html.dark .stat-tile .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; } html.dark .stat-tile .bg-green-50 { background-color: rgba(34,197,94,0.12) !important; } html.dark .stat-tile .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; } html.dark .stat-tile .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; } html.dark .stat-tile .text-indigo-600 { color: #818cf8 !important; } html.dark .stat-tile .text-green-600 { color: #34d399 !important; } html.dark .stat-tile .text-amber-600 { color: #fbbf24 !important; } html.dark .stat-tile .text-purple-600 { color: #c084fc !important; } /* --- Countdown widget ------------------------------------------------------ */ html.dark .text-5xl.font-black.text-indigo-600 { color: #818cf8 !important; } html.dark .text-sm.text-gray-500 { color: #9ca3af !important; } /* --- Key contacts initials avatar ---------------------------------------- */ html.dark .bg-indigo-100.text-indigo-700 { background-color: rgba(99,102,241,0.18) !important; color: #a5b4fc !important; } html.dark .bg-green-100 { background-color: rgba(34,197,94,0.15) !important; } html.dark .text-green-600.bg-green-100, html.dark .bg-green-100 .text-green-600 { color: #34d399 !important; } /* --- Sidebar quick action buttons ---------------------------------------- */ html.dark .sidebar-widget-card .bg-gray-50.hover\:bg-indigo-50:hover, html.dark .sidebar-widget-card button.bg-gray-50:hover { background-color: rgba(99,102,241,0.12) !important; } html.dark .sidebar-widget-card a.bg-gray-50, html.dark .sidebar-widget-card button.bg-gray-50 { background-color: #232738 !important; color: #9ca3af !important; } /* --- Refresh button in widget footer ------------------------------------- */ html.dark .sidebar-widget-card .border-t.border-gray-50 { border-top-color: #2d3343 !important; } html.dark .sidebar-widget-card button.text-gray-300 { color: #6b7280 !important; } html.dark .sidebar-widget-card button.text-gray-300:hover { color: #818cf8 !important; } /* --- Detail hero (inside open project card) ------------------------------ */ html.dark .detail-hero { background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #5b21b6 100%) !important; } /* --- Inline bg-white override on generated detail view containers -------- */ html.dark [id="modal-body-content"] { background-color: #181b24 !important; } /* ═══════════════════════════════════════════════════════════════════════════ CSS variable overrides for pages that use local :root design tokens (call-sheet.html, decks.html, and similar page-scoped token systems) ═══════════════════════════════════════════════════════════════════════════ */ html.dark { /* Short-form tokens used in call-sheet.html */ --bg: #0f1117; --surface: #181b24; --text: #e5e7eb; --border: #2d3343; --border-light: #1e2130; --primary-light: rgba(99, 102, 241, 0.12); --primary-border: rgba(99, 102, 241, 0.3); --text-subtle: #6b7280; /* Shared tokens used in decks.html */ --text-dark: #e5e7eb; } /* call-sheet.html auth blocker uses a hardcoded #fff background */ html.dark #auth-blocker { background: #0f1117 !important; color: #e5e7eb !important; } html.dark #auth-blocker .spinner { border-color: #2d3343 !important; border-top-color: #6366f1 !important; } /* call-sheet.html / decks.html — elements using local CSS vars will automatically inherit the overridden values above. Any hardcoded #fff / #f9fafb inline styles that slip through are caught below. */ html.dark #view-days { background-color: var(--bg) !important; } html.dark .days-header { background-color: var(--surface) !important; border-bottom-color: var(--border) !important; } html.dark .day-card { background-color: var(--surface) !important; border-color: var(--border) !important; } html.dark .day-card-footer { border-top-color: var(--border-light) !important; } /* header.html — user menu identity gradient (inline style override) */ html.dark [data-dark-gradient="user-menu-identity"] { background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, #181b24 100%) !important; } /* header.html — spotlight search input and result panels */ html.dark #project-search-input { background-color: #181b24 !important; border-color: #2d3343 !important; color: #e5e7eb !important; } html.dark #project-search-input::placeholder { color: #6b7280 !important; } html.dark #spotlight-results-panel, html.dark #ai-chat-thread, html.dark #workspace-switcher-panel, html.dark #user-menu-panel, html.dark #footer-support-panel { background-color: #181b24 !important; border-color: #2d3343 !important; } /* header.html — footer support panel text */ html.dark #footer-support-panel h3 { color: #e5e7eb !important; } html.dark #footer-support-panel p, html.dark #footer-support-panel .text-gray-400 { color: #6b7280 !important; } html.dark #footer-support-panel a { color: #d1d5db !important; } html.dark #footer-support-panel a:hover { background-color: #232738 !important; } /* ═══════════════════════════════════════════════════════════════════════════ SETTINGS PAGE — CSS-rule hardcoded light colors These bypass Tailwind utility class overrides because they are CSS rules, not inline styles or utility classes. ═══════════════════════════════════════════════════════════════════════════ */ /* Support resource cards */ html.dark .support-resource-card { background: #181b24 !important; border-color: #2d3343 !important; color: #d1d5db !important; } html.dark .support-resource-card:hover { border-color: rgba(99,102,241,0.4) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } /* Support FAQ */ html.dark .support-faq-btn { color: #e5e7eb !important; } html.dark .support-faq-item { border-bottom-color: #2d3343 !important; } html.dark .support-faq-answer { color: #9ca3af !important; } /* Location suggestions dropdown & combobox option lists */ html.dark .location-suggestions-container, html.dark .combobox-options { background-color: #181b24 !important; border-color: #374151 !important; box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; } html.dark .location-suggestions-container div, html.dark .combobox-options div { color: #d1d5db !important; } html.dark .location-suggestions-container div:hover, html.dark .combobox-options div:hover { background-color: #232738 !important; } /* Combobox wrapper (styled input trigger) */ html.dark .combobox-wrapper { background-color: #1e2130 !important; border-color: #374151 !important; color: #e5e7eb !important; } /* Drag-sortable position / vendor / role items */ html.dark .crew-position-item, html.dark .vendor-item, html.dark .title-role-item { background-color: #1e2130 !important; color: #d1d5db !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } /* Stripe card element container */ html.dark #card-element-container { background-color: #1e2130 !important; border-color: #374151 !important; } html.dark #card-element-container.StripeElement--focus { border-color: #6366f1 !important; } /* Financials loading overlay (white blur backdrop) */ html.dark #financials-loading-overlay { background-color: rgba(15, 17, 23, 0.85) !important; } /* Image cropper container */ html.dark .img-container { background-color: #1e2130 !important; } /* Brand kit PDF thumbnail */ html.dark .bk-pdf-thumb { background-color: #232738 !important; } /* Profile avatar border ring */ html.dark .profile-avatar-display { border-color: #2d3343 !important; } /* Clear All Chat History button */ html.dark #ai-clear-all-history-btn { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #f87171 !important; } html.dark #ai-clear-all-history-btn:hover { background-color: rgba(239, 68, 68, 0.2) !important; border-color: rgba(239, 68, 68, 0.5) !important; } /* ── Settings mobile slide-in panel ─────────────────────────────────────── The #mobile-back-btn sticky header and active tab override in the @media (max-width: 767px) block in settings.html use hardcoded whites. ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html.dark #mobile-back-btn { background: #181b24 !important; border-bottom-color: #2d3343 !important; color: #e5e7eb !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } /* Re-apply dark active state that the mobile media query overrides */ html.dark #settings-nav-wrapper .tab-button.active { background-color: #232738 !important; color: #818cf8 !important; } /* Settings content wrapper slide panel background */ html.dark #settings-content-wrapper { background-color: #0f1117 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CALL-SHEET PAGE — Hardcoded #fff / light backgrounds The CSS variable overrides for --surface etc. are already set above, but these elements use hardcoded color literals that bypass the variables. ═══════════════════════════════════════════════════════════════════════════ */ /* The printed "paper" document background */ html.dark .cs-paper { background: #181b24 !important; color: #e5e7eb !important; box-shadow: 0 4px 32px rgba(0,0,0,0.6) !important; } /* Outer grey viewer area */ html.dark #view-sheet { background: #0f1117 !important; } /* Info blocks (location, weather, etc.) */ html.dark .cs-info-block { background: #1e2130 !important; } html.dark .cs-info-block .label { color: #6b7280 !important; } html.dark .cs-info-block .value { color: #e5e7eb !important; } /* Safety note band */ html.dark .cs-safety { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #fbbf24 !important; } /* Table alternating rows & cell borders */ html.dark .cs-table tr:nth-child(even) td { background: #1a1d2e !important; } html.dark .cs-table td { border-bottom-color: #2d3343 !important; } /* Sub-header text and footer */ html.dark .cs-title-block p { color: #9ca3af !important; } html.dark .cs-footer { color: #6b7280 !important; border-top-color: #2d3343 !important; } /* Builder canvas background (notebook canvas) */ html.dark #nb-canvas-wrap, html.dark #nb-canvas-container #nb-canvas-wrap { background: #0f1117 !important; background-image: radial-gradient(circle, #2d3343 1px, transparent 1px) !important; background-size: 24px 24px !important; } /* AI bar input on focus — overrides the hardcoded #fff */ html.dark #nb-ai-bar input:focus { background: #1e2130 !important; } /* ═══════════════════════════════════════════════════════════════════════════ CREW/PAYMENTS PAGE — Hardcoded light backgrounds in CSS rules ═══════════════════════════════════════════════════════════════════════════ */ /* Display-only form field (read-only value pill) */ html.dark .form-input-display { background-color: #1e2130 !important; border-color: #374151 !important; color: #d1d5db !important; } /* PO line item table headers and read-only totals */ html.dark .po-line-item-table th { background-color: #1e2130 !important; color: #9ca3af !important; border-color: #374151 !important; } html.dark .po-line-item-table .read-only-total { background-color: #181b24 !important; color: #d1d5db !important; } /* Cell editing input — overrides hardcoded #fff !important */ html.dark .po-line-item-table .cell.cell-editing input { background-color: #1e2535 !important; color: #e5e7eb !important; } /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD — Mobile project expanded panel .project-list-item.expanded uses var(--bg-light) which IS overridden, but add explicit rule to guarantee no flash on mobile ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { html.dark .project-list-item.expanded { background-color: #0f1117 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD — Mobile swipe system dark backgrounds iOS Safari paints compositing layers (overflow:hidden, will-change:transform) as white unless an explicit background is set. The swipe viewport/track/panels and their inner containers must all be explicitly dark. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { html.dark #swipe-viewport, html.dark #swipe-track, html.dark .swipe-panel, html.dark .swipe-panel-inner { background: #0f1117 !important; } /* Widgets (right) panel matches the center project-list panel background (#0f1117) so the two read as the same surface (Mark 2026-07-03). */ html.dark #swipe-right-panel, html.dark #mobile-sidebar-panel { background: #0f1117 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ ALL PAGES — Swipe panel and right panel dark backgrounds (desktop fallback) The .swipe-panel on ≥768px doesn't set a background, inheriting body bg. Explicit rule ensures no white leak on edge cases. ═══════════════════════════════════════════════════════════════════════════ */ html.dark .swipe-panel { background: #0f1117; } html.dark #swipe-right-panel { background: #0f1117 !important; border-color: #1e2130 !important; } /* ═══════════════════════════════════════════════════════════════════════════ INVOICES / MODALS — Inline bg-white on dynamically injected HTML ═══════════════════════════════════════════════════════════════════════════ */ html.dark .custom-combobox-options { background-color: #181b24 !important; border-color: #374151 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important; } /* ═══════════════════════════════════════════════════════════════════════════ CREW-LIST — Modal footer bars with bg-gray-50 ═══════════════════════════════════════════════════════════════════════════ */ html.dark .conn-status-bar, html.dark #conn-status-bar { background: rgba(39, 33, 10, 0.9) !important; border-color: rgba(234, 179, 8, 0.3) !important; color: #fcd34d !important; } /* ═══════════════════════════════════════════════════════════════════════════ INLINE STYLE COVERAGE — background shorthand (no colon-space) Substring matches must include a terminator (semicolon, space, or close-paren) — otherwise [style*="background:#fff"] also matches "background:#fffbeb" / "#fff000" / "#fffdf5" / etc, painting any warm pale colour dark. (Fixed 2026-05-17 — was bleeding through to widget icon chips with amber #fffbeb / indigo-50 backgrounds.) ═══════════════════════════════════════════════════════════════════════════ */ html.dark [style*="background:#fff;"], html.dark [style*="background:#fff "], html.dark [style*="background:#fff)"], html.dark [style*="background: #fff;"], html.dark [style*="background: #fff "], html.dark [style*="background: #fff)"], html.dark [style*="background:#ffffff;"], html.dark [style*="background:#ffffff "], html.dark [style*="background:#ffffff)"], html.dark [style*="background: #ffffff;"], html.dark [style*="background: #ffffff "], html.dark [style*="background: #ffffff)"], html.dark [style*="background:white;"], html.dark [style*="background:white "], html.dark [style*="background:white)"], html.dark [style*="background: white;"], html.dark [style*="background: white "], html.dark [style*="background: white)"], html.dark [style*="background:#fafafa;"], html.dark [style*="background:#fafafa "], html.dark [style*="background: #fafafa;"], html.dark [style*="background: #fafafa "], html.dark [style*="background:#f9fafb;"], html.dark [style*="background:#f9fafb "], html.dark [style*="background: #f9fafb;"], html.dark [style*="background: #f9fafb "] { background: #181b24 !important; } html.dark [style*="background:#f3f4f6"], html.dark [style*="background: #f3f4f6"], html.dark [style*="background:#f5f5f5"], html.dark [style*="background: #f5f5f5"] { background: #232738 !important; } /* ═══════════════════════════════════════════════════════════════════════════ ORGANIZATIONS PAGE — custom component classes ═══════════════════════════════════════════════════════════════════════════ */ /* Card container */ html.dark .card { background: #181b24 !important; border-color: #2d3343 !important; } /* Sidebar nav — stale pre-parity fill removed 2026-07-15: #org-sidebar-nav itself has no border (nothing to color) and organizations.html's own html.dark .org-nav-group rule already flattens each group box to transparent (bordered-but-unfilled, matching settings.html's #settings-nav, which has no fill at all). This rule's #181b24 background on the outer