/* Batch Scale dashboard dark theme. Keep this stylesheet last in : several workspaces define their cards in page-level styles and those surfaces must not override the selected theme. */ html.dark { color-scheme: dark; --bs-dark-canvas: #0f172a; --bs-dark-surface: #172033; --bs-dark-surface-raised: #1e293b; --bs-dark-border: #334155; --bs-dark-border-strong: #475569; --bs-dark-text: #f1f5f9; --bs-dark-text-muted: #cbd5e1; --bs-dark-text-subtle: #94a3b8; --bs-dark-primary: color-mix(in srgb, var(--bs-primary), white 38%); } html.dark body, html.dark .bg-surface, html.dark .bg-surface\/80 { background-color: var(--bs-dark-canvas) !important; color: var(--bs-dark-text) !important; } html.dark .bg-white, html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95, html.dark .card, html.dark .dashboard-card, html.dark .inventory-card, html.dark #sidebar { background-color: var(--bs-dark-surface) !important; border-color: var(--bs-dark-border) !important; } html.dark .bg-slate-50, html.dark .bg-slate-50\/50, html.dark .bg-slate-50\/70, html.dark .bg-slate-50\/80, html.dark .bg-slate-100, html.dark .bg-surfaceVariant\/30 { background-color: var(--bs-dark-surface-raised) !important; } html.dark .bg-violet-50, html.dark .bg-violet-100 { background-color: rgb(139 92 246 / 0.16) !important; } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgb(59 130 246 / 0.16) !important; } html.dark .bg-emerald-50, html.dark .bg-emerald-50\/80, html.dark .bg-emerald-100 { background-color: rgb(16 185 129 / 0.16) !important; } html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.16) !important; } html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgb(249 115 22 / 0.16) !important; } html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgb(244 63 94 / 0.16) !important; } html.dark .text-slate-950, html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 { color: var(--bs-dark-text) !important; } html.dark .text-slate-600, html.dark .text-slate-500 { color: var(--bs-dark-text-muted) !important; } html.dark .text-slate-400, html.dark .text-slate-300 { color: var(--bs-dark-text-subtle) !important; } html.dark .text-primary, html.dark .hover\:text-primary:hover, html.dark .group:hover .group-hover\:text-primary { color: var(--bs-dark-primary) !important; } html.dark .text-violet-600, html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900, html.dark .text-violet-950 { color: #c4b5fd !important; } html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900, html.dark .text-blue-950 { color: #93c5fd !important; } html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-950 { color: #6ee7b7 !important; } html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900, html.dark .text-amber-950 { color: #fcd34d !important; } html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900 { color: #fdba74 !important; } html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900, html.dark .text-rose-950 { color: #fda4af !important; } html.dark .border-slate-50, html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-outline\/10, html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]), html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--bs-dark-border) !important; } html.dark .border-violet-200 { border-color: rgb(167 139 250 / 0.45) !important; } html.dark .border-blue-200 { border-color: rgb(96 165 250 / 0.45) !important; } html.dark .border-emerald-200 { border-color: rgb(52 211 153 / 0.45) !important; } html.dark .border-amber-200 { border-color: rgb(251 191 36 / 0.45) !important; } html.dark .border-orange-200 { border-color: rgb(251 146 60 / 0.45) !important; } html.dark .border-rose-200 { border-color: rgb(251 113 133 / 0.45) !important; } /* Recipe setup already communicates sequence with numbered steps. The light connector rule reads as stray dashes against the dark navigation surface. */ html.dark .recipe-step-button::after { display: none; } /* Keep imported recipe evidence and price basis explicit in dark mode. */ html.dark .recipe-cost-basis, html.dark .recipe-cost-basis small, html.dark .recipe-cost-controls > span { color: var(--bs-dark-text-muted) !important; } html.dark .recipe-cost-controls input, html.dark .recipe-cost-controls select { border-color: var(--bs-dark-border-strong) !important; } html.dark input, html.dark select, html.dark textarea, html.dark .inventory-control { background-color: var(--bs-dark-canvas) !important; color: var(--bs-dark-text) !important; border-color: var(--bs-dark-border-strong) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--bs-dark-text-subtle) !important; } html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background-color: var(--bs-dark-surface-raised) !important; color: var(--bs-dark-text-subtle) !important; } html.dark .hover\:bg-white:hover, html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-50\/70:hover, html.dark .focus\:bg-slate-50:focus, html.dark tr.hoverable:hover { background-color: rgb(51 65 85 / 0.72) !important; } html.dark .shadow-slate-900\/15, html.dark .shadow-slate-900\/20 { --tw-shadow-color: rgb(2 6 23 / 0.6) !important; } /* Production planning uses translucent calendar layers that need an opaque, intentional hierarchy in dark mode. Keep these rules scoped to the planner. */ html.dark [data-production-planner] .production-calendar-hero { background: linear-gradient(135deg, #172033 0%, #172033 62%, rgb(139 92 246 / 0.14) 100%) !important; border-color: var(--bs-dark-border) !important; } html.dark [data-production-planner] :is( .production-calendar-view-tabs, .production-calendar-period-bar, .production-calendar-month-header, .production-calendar-board, .production-calendar-demand ) { background: var(--bs-dark-surface-raised) !important; } html.dark [data-production-planner] :is( .production-calendar-day, .production-calendar-month-day, .production-calendar-board-column ) { background: rgb(30 41 59 / 0.74) !important; border-color: var(--bs-dark-border) !important; } html.dark [data-production-planner] :is( .production-calendar-day.is-today, .production-calendar-month-day.is-today ) { background: rgb(139 92 246 / 0.14) !important; } html.dark [data-production-planner] .production-calendar-month-day.is-outside { background: rgb(15 23 42 / 0.82) !important; opacity: 0.7; } html.dark [data-production-planner] .production-calendar-day-header:hover { background: rgb(51 65 85 / 0.72) !important; } html.dark [data-production-planner] .production-calendar-load-track { background: var(--bs-dark-border-strong) !important; } html.dark [data-production-planner] [data-calendar-empty] { background: rgb(15 23 42 / 0.34) !important; border-color: var(--bs-dark-border-strong) !important; color: var(--bs-dark-text-subtle) !important; } html.dark [data-production-planner] .production-work-card { background: var(--bs-dark-surface) !important; border-color: var(--bs-dark-border) !important; } /* Bea owns a self-contained UI system, so theme her drawer, workflows, and report modal explicitly instead of depending on dashboard utility classes. */ html.dark .bs-assistant-panel, html.dark .bs-assistant-report-modal { background: var(--bs-dark-surface) !important; color: var(--bs-dark-text); border-color: var(--bs-dark-border) !important; box-shadow: 0 30px 90px rgb(2 6 23 / 0.62); } html.dark .bs-assistant-panel *, html.dark .bs-assistant-report-modal * { border-color: var(--bs-dark-border); } html.dark .bs-assistant-body { background: linear-gradient(180deg, var(--bs-dark-canvas), #111a2d) !important; } html.dark .bs-assistant-response-card, html.dark .bs-assistant-input-wrap { border-color: var(--bs-dark-border-strong) !important; } html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal) :is(h1, h2, h3, h4, strong, dt) { color: var(--bs-dark-text); } html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal) :is(p, small, time, em, label, summary, dd) { color: var(--bs-dark-text-muted); } html.dark :is(.bs-assistant-panel, .bs-assistant-report-modal) :is(a, button) { color: var(--bs-dark-primary); } html.dark :is( .bs-assistant-menu, .bs-assistant-new-chat, .bs-assistant-context-chip-muted, .bs-assistant-home-prompts button, .bs-assistant-response-card, .bs-assistant-retry, .bs-assistant-feedback-row button, .bs-assistant-feedback-form > div:first-of-type button, .bs-assistant-items, .bs-assistant-explanation > div > div > span, .bs-assistant-history-search, .bs-assistant-record-suggestion, .bs-assistant-recommendation, .bs-assistant-input-wrap, .bs-assistant-attachment-menu, .bs-assistant-description-options button, .bs-stock-action, .bs-material-adjustment-fields select, .bs-recipe-builder-choices button, .bs-recipe-import-editor, .bs-recipe-review-table, .bs-payment-action, .bs-payment-fields input, .bs-payment-fields select, .bs-payment-buttons button.is-secondary, .bs-assistant-brief-sections > article ) { background: var(--bs-dark-surface) !important; color: var(--bs-dark-text-muted); } html.dark :is( .bs-assistant-context-bar, .bs-assistant-starters-loading, .bs-assistant-starters-empty, .bs-assistant-advice-points, .bs-assistant-feedback-form, .bs-assistant-metrics div, .bs-assistant-explanation > div, .bs-assistant-understanding, .bs-assistant-followups button, .bs-assistant-thinking > span, .bs-assistant-history-open:hover, .bs-assistant-record-suggestions, .bs-assistant-recommendations, .bs-assistant-composer, .bs-payment-review div, .bs-payment-inactive, .bs-assistant-brief-metrics span, .bs-assistant-brief-links a ) { background: var(--bs-dark-surface-raised) !important; } html.dark :is( .bs-assistant-avatar, .bs-assistant-beta, .bs-assistant-tab-count, .bs-assistant-context-chip, .bs-assistant-handoff, .bs-assistant-home-prompts button > .material-symbols-outlined, .bs-assistant-starters-empty button, .bs-assistant-open-report, .bs-assistant-result-action, .bs-assistant-history-icon, .bs-assistant-record-suggestion-icon, .bs-assistant-recommendation-icon, .bs-assistant-attachment-menu > button > .material-symbols-outlined, .bs-stock-action-heading > .material-symbols-outlined, .bs-recipe-import-yield, .bs-recipe-candidates button, .bs-recipe-create-missing, .bs-recipe-review-row button, .bs-payment-action-heading > .material-symbols-outlined, .bs-assistant-brief-actions a, .bs-assistant-brief-report ) { background: rgb(139 92 246 / 0.18) !important; color: #c4b5fd !important; } html.dark .bs-assistant-report-modal > header { background: linear-gradient(135deg, #1e293b, #172033) !important; } html.dark .bs-assistant-report-table thead, html.dark .bs-recipe-review-head { background: var(--bs-dark-surface-raised) !important; color: var(--bs-dark-text-muted) !important; } html.dark :is( .bs-assistant-icon-button, .bs-assistant-menu button, .bs-assistant-tabs button, .bs-assistant-import-starters button, .bs-assistant-recent-row, .bs-assistant-feedback, .bs-assistant-thinking, .bs-assistant-usage, .bs-assistant-history-retention, .bs-assistant-history-empty, .bs-assistant-suggestion-status ) { color: var(--bs-dark-text-muted); } html.dark :is( .bs-assistant-icon-button:hover, .bs-assistant-home-prompts button:hover, .bs-assistant-import-starters button:hover, .bs-assistant-recent-row:hover, .bs-assistant-item:hover, .bs-assistant-record-suggestion:hover, .bs-assistant-recommendation:hover, .bs-assistant-attachment-menu > button:hover, .bs-assistant-description-options button:hover, .bs-recipe-builder-choices button:hover ) { background: rgb(51 65 85 / 0.88) !important; } html.dark :is( .bs-assistant-send, .bs-assistant-user-bubble, .bs-assistant-retry button, .bs-recipe-confirm, .bs-payment-buttons button:not(.is-secondary), .bs-assistant-anomaly button ) { color: white !important; } html.dark :is( .bs-assistant-task-resume, .bs-payment-complete ) { background: rgb(16 185 129 / 0.16) !important; color: #6ee7b7 !important; } html.dark :is( .bs-assistant-contextual-starters em, .bs-assistant-response-card.is-error, .bs-assistant-retry, .bs-recipe-warnings, .bs-payment-warning, .bs-assistant-brief-sections > article.is-error ) { background: rgb(249 115 22 / 0.14) !important; color: #fdba74 !important; } html.dark :is( .bs-assistant-menu button:hover, .bs-assistant-feedback-row button.is-negative, .bs-assistant-history-error, .bs-assistant-anomaly ) { background: rgb(244 63 94 / 0.14) !important; color: #fda4af !important; } html.dark :is( .bs-assistant-task-resume small, .bs-payment-complete small, .bs-assistant-retry small, .bs-recipe-warnings p, .bs-assistant-anomaly small ) { color: inherit !important; } html.dark .bs-assistant-input, html.dark .bs-assistant-history-search input { background: transparent !important; color: var(--bs-dark-text) !important; } html.dark .bs-assistant-input::placeholder, html.dark .bs-assistant-history-search input::placeholder { color: var(--bs-dark-text-subtle) !important; }