html.dark-mode { color-scheme: dark; background: #020617; }
html.dark-mode body { background: #020617 !important; color: #e5e7eb !important; }
/* Mich AI is a standalone page with late inline light-theme styles. */
html.dark-mode body .top {
background: #0f172a !important;
border-color: #334155 !important;
box-shadow: 0 1px 0 #334155 !important;
}
html.dark-mode body .top :is(.brand, .back, .top-actions #toggle-history, .top-actions #new-chat),
html.dark-mode body .top .top-actions #toggle-history,
html.dark-mode body .top .top-actions .back { color: #e5e7eb !important; }
html.dark-mode body .top .mark { color: #c4b5fd !important; }
html.dark-mode body .top .top-actions #toggle-history,
html.dark-mode body .top .top-actions #toggle-history:hover { background: #1e293b !important; border-color: #475569 !important; }
html.dark-mode body .top .top-actions #new-chat,
html.dark-mode body .top .top-actions #new-chat:hover { background: #334155 !important; color: #f8fafc !important; }
html.dark-mode body .ai-access { background: #1e293b !important; border-color: #475569 !important; color: #e5e7eb !important; }
html.dark-mode body main.layout,
html.dark-mode body main.layout .panel { background: #020617 !important; color: #e5e7eb !important; }
html.dark-mode body .messages,
html.dark-mode body main.layout .messages { background: #020617 !important; background-image: none !important; }
html.dark-mode body .msg.assistant,
html.dark-mode body .msg.assistant p,
html.dark-mode body .msg.assistant h3,
html.dark-mode body .msg.assistant h4,
html.dark-mode body .msg.assistant li { background: transparent !important; color: #e5e7eb !important; }
html.dark-mode body .msg.user { background: #4c3aa8 !important; color: #fff !important; }
html.dark-mode body .msg code { background: #1e293b !important; color: #e9d5ff !important; }
html.dark-mode body .composer,
html.dark-mode body main.layout .composer { background: #111827 !important; border-color: #475569 !important; box-shadow: 0 2px 10px #0008 !important; }
html.dark-mode body .composer input,
html.dark-mode body .composer input::placeholder { color: #f8fafc !important; }
html.dark-mode body .composer button,
html.dark-mode body .composer button:hover { background: #4c3aa8 !important; color: #fff !important; }
html.dark-mode body .history-panel { background: #111827 !important; border-color: #334155 !important; color: #e5e7eb !important; }
html.dark-mode body .history-panel :is(.history-head, .history-head strong, .history-empty, .history-group-label) { color: #e5e7eb !important; }
html.dark-mode body .history-panel .history-control,
html.dark-mode body .history-panel .history-select,
html.dark-mode body .history-panel .history-action { background: #1e293b !important; border-color: #475569 !important; color: #e5e7eb !important; }
html.dark-mode body .history-panel .history-select:hover,
html.dark-mode body .history-panel .history-select.active,
html.dark-mode body .history-panel .history-action:hover { background: #334155 !important; color: #fff !important; }
html.dark-mode body .history-panel .history-delete:hover { background: #4c1d2a !important; color: #fecaca !important; }
html.dark-mode body #history-backdrop { background: #020617b8 !important; }
html.dark-mode body .icon-btn { background: transparent !important; color: #cbd5e1 !important; }
html.dark-mode body .icon-btn:hover { background: #1e293b !important; color: #fff !important; }
/* App notifications is another standalone view with its own light palette. */
body.dark-mode:has(#notification-list) {
--ink: #e5e7eb !important;
--muted: #94a3b8 !important;
--surface: #111827 !important;
color-scheme: dark;
background: #020617 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#notification-list) .page-header,
body.dark-mode:has(#notification-list) .section-heading,
body.dark-mode:has(#notification-list) .heading,
body.dark-mode:has(#notification-list) .page-header h1,
body.dark-mode:has(#notification-list) .section-heading h2 { color: #f8fafc !important; }
body.dark-mode:has(#notification-list) .eyebrow,
body.dark-mode:has(#notification-list) .subtitle,
body.dark-mode:has(#notification-list) .section-heading span,
body.dark-mode:has(#notification-list) #push-notification-status { color: #a5b4fc !important; }
body.dark-mode:has(#notification-list) .back-link,
body.dark-mode:has(#notification-list) .push-card,
body.dark-mode:has(#notification-list) .notice,
body.dark-mode:has(#notification-list) .notice.unread,
body.dark-mode:has(#notification-list) .empty-state {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(#notification-list) .back-link:hover,
body.dark-mode:has(#notification-list) .notice:hover { background: #1e293b !important; color: #f8fafc !important; }
body.dark-mode:has(#notification-list) .push-icon,
body.dark-mode:has(#notification-list) .notice-icon,
body.dark-mode:has(#notification-list) .empty-icon {
background: #1e293b !important;
border-color: #475569 !important;
color: #c4b5fd !important;
}
body.dark-mode:has(#notification-list) .notice h3,
body.dark-mode:has(#notification-list) .notice p,
body.dark-mode:has(#notification-list) .notice time,
body.dark-mode:has(#notification-list) .push-copy strong,
body.dark-mode:has(#notification-list) .push-copy p,
body.dark-mode:has(#notification-list) .empty-state p,
body.dark-mode:has(#notification-list) #notification-load-status { color: #cbd5e1 !important; }
body.dark-mode:has(#notification-list) .notification-group-heading { color: #cbd5e1 !important; }
body.dark-mode:has(#notification-list) .notification-group-heading::after { background: linear-gradient(90deg, #334155, transparent) !important; }
body.dark-mode:has(#notification-list) .unread-label { color: #a5b4fc !important; }
body.dark-mode:has(#notification-list) .notice-action {
background: #1e293b !important;
border-color: #475569 !important;
color: #c4b5fd !important;
}
body.dark-mode:has(#notification-list) .notice-action:hover { background: #334155 !important; color: #ede9fe !important; }
/* Subscription checkout has several page-local white form and plan panels. */
body.dark-mode:has(#paymentForm) {
color-scheme: dark;
--ink: #e5e7eb !important;
--muted: #94a3b8 !important;
background-color: #020617 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#paymentForm) :is(.contact-sales-container, .subscription-summary-panel, .payment-summary, .selected-plan-summary, .subscription-summary-grid > div, .renewal-invoice-strip, .payment-history-mini) {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(#paymentForm) .contact-sales-container :is(h3, h4, label, p, strong, span, small),
body.dark-mode:has(#paymentForm) .subscription-summary-panel :is(h3, p, span, strong),
body.dark-mode:has(#paymentForm) .payment-summary :is(h4, p, strong, span),
body.dark-mode:has(#paymentForm) .selected-plan-summary :is(strong, span) { color: #e5e7eb !important; }
body.dark-mode:has(#paymentForm) .subscription-summary-panel :is(.subscription-summary-grid span, .renewal-invoice-strip span, .payment-history-mini > span, .payment-history-row span),
body.dark-mode:has(#paymentForm) .subscription-field-help,
body.dark-mode:has(#paymentForm) #vatNote { color: #94a3b8 !important; }
body.dark-mode:has(#paymentForm) #paymentForm input:not([type="hidden"]),
body.dark-mode:has(#paymentForm) #paymentForm select,
body.dark-mode:has(#paymentForm) #paymentForm textarea {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(#paymentForm) #paymentForm select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode:has(#paymentForm) .billing-btn,
body.dark-mode:has(#paymentForm) .plan-modal-close {
background: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#paymentForm) .billing-btn.active,
body.dark-mode:has(#paymentForm) .plan-modal-continue,
body.dark-mode:has(#paymentForm) .plan-details-button { background: #334155 !important; color: #f8fafc !important; }
body.dark-mode:has(#paymentForm) .subscription-status-badge.status-active,
body.dark-mode:has(#paymentForm) .subscription-status-badge[class*="active"] {
background: #14532d !important;
border-color: #166534 !important;
color: #dcfce7 !important;
}
body.dark-mode:has(#paymentForm) .billing-toggle .billing-btn.active,
body.dark-mode:has(#paymentForm) .billing-toggle .billing-btn[aria-pressed="true"] {
background: #334155 !important;
border: 1px solid #64748b !important;
color: #f8fafc !important;
}
body.dark-mode:has(#paymentForm) .savings-display,
body.dark-mode:has(#paymentForm) .plan-feature-list li,
body.dark-mode:has(#paymentForm) .plan-feature-list-excluded li,
body.dark-mode:has(#paymentForm) .limit-pill {
background: #1e293b !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#paymentForm) .plan-preview-card {
background: #111827 !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#paymentForm) .plan-preview-card :is(#planName, #planDesc, #planPrice, .plan-details-heading, .plan-exclusion-note) { color: #e5e7eb !important; }
body.dark-mode:has(#paymentForm) .plan-preview-card .plan-badge { background: #1e293b !important; color: #c4b5fd !important; }
body.dark-mode:has(#paymentForm) #submitButton { color: #fff !important; }
/* Account settings has custom switch tracks and light icon chips. */
body.dark-mode .settings-container,
body.dark-mode .settings-container .section-content,
body.dark-mode .settings-container .settings-section,
body.dark-mode .settings-container .section-body {
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode .settings-container :is(.settings-header, .settings-header h2, .settings-header p, .form-label, .switch-label, label, h3, h4, p, small) {
color: #e5e7eb !important;
}
body.dark-mode .settings-container .settings-header-icon,
body.dark-mode .settings-container .section-header-icon,
body.dark-mode .settings-container .settings-icon {
background: #1e293b !important;
border-color: #475569 !important;
color: #93c5fd !important;
}
body.dark-mode .settings-container :is(.switch-container, .switch-container:hover) {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode .settings-container .switch .slider,
body.dark-mode .settings-container .slider {
background-color: #475569 !important;
box-shadow: inset 0 0 0 1px #64748b;
}
body.dark-mode .settings-container .switch input:checked + .slider {
background-color: #2563eb !important;
box-shadow: inset 0 0 0 1px #60a5fa;
}
body.dark-mode .settings-container .slider::before {
background: #cbd5e1 !important;
}
body.dark-mode .settings-container .switch input:checked + .slider::before { background: #fff !important; }
body.dark-mode .settings-container :is(.form-input, .form-control, .form-select, input:not([type="checkbox"]), select, textarea) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .settings-container select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode #messageDropdown .settings-icon,
body.dark-mode .navbar .settings-icon { color: #cbd5e1 !important; }
/* Add-another-business form and secondary branch management panels. */
body.dark-mode:has(form.property_forn) form.property_forn,
body.dark-mode:has(form.property_forn) .secondary-management,
body.dark-mode:has(form.property_forn) .secondary-management__item,
body.dark-mode:has(form.property_forn) .delete-secondary-form,
body.dark-mode:has(form.property_forn) .secondary-management__empty {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(form.property_forn) :is(.input_labels, .secondary-management h2, .secondary-management h3, .secondary-management p, .secondary-management__item strong, .delete-secondary-form label) {
color: #e5e7eb !important;
}
body.dark-mode:has(form.property_forn) .property_inputs,
body.dark-mode:has(form.property_forn) .delete-secondary-form input:not([type="checkbox"]) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(form.property_forn) .secondary-management__icon,
body.dark-mode:has(form.property_forn) .secondary-management__number {
background: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
body.dark-mode:has(form.property_forn) .secondary-management__check { color: #cbd5e1 !important; }
body.dark-mode:has(form.property_forn) .secondary-management__check input { accent-color: #3b82f6; }
body.dark-mode:has(form.property_forn) .secondary-management__error { background: #451a1a !important; border-color: #7f1d1d !important; color: #fecaca !important; }
body.dark-mode:has(form.property_forn) .delete-secondary-form button { background: #7f1d1d !important; color: #fff !important; border-color: #991b1b !important; }
body.dark-mode:has(form.property_forn) #submitButton { background: #1d4ed8 !important; color: #fff !important; }
/* Billing history's frozen tenant table and date filter use white row fills. */
body.dark-mode:has(#tenantTable) .sales-table-freeze,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table,
body.dark-mode:has(#tenantTable) #filterFieldsContainer {
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table thead,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table thead th,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tr:first-child,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tr:first-child th {
background: #1e293b !important;
background-image: none !important;
color: #f8fafc !important;
border-color: #475569 !important;
}
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tbody tr,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tbody tr td,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tr:not(:first-child),
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tr:not(:first-child) td {
background: #111827 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tbody tr:hover,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tr:not(:first-child):hover,
body.dark-mode:has(#tenantTable) .sales-table-freeze .tenant_table tbody tr:hover td {
background: #1e293b !important;
}
body.dark-mode:has(#tenantTable) #filterFieldsContainer :is(label, span, p) { color: #e5e7eb !important; }
body.dark-mode:has(#tenantTable) #filterFieldsContainer input:not([type="radio"]),
body.dark-mode:has(#tenantTable) #filterFieldsContainer select {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(#tenantTable) #filterFieldsContainer input[type="radio"] { accent-color: #60a5fa; }
/* Add Staff (/add-new-user) manager email and permission form. */
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm,
body.dark-mode:has(form[action="/update-new-manager-email"]) .permission-grid {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm :is(label, .input_labels, #wait-message) { color: #e5e7eb !important; }
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm .permission-option {
background: #1e293b !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm input:not([type="hidden"]):not([type="checkbox"]),
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm select,
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm textarea {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm input[type="checkbox"] { accent-color: #3b82f6; }
body.dark-mode:has(form[action="/update-new-manager-email"]) form#myForm #submitButton {
background: #1d4ed8 !important;
color: #fff !important;
}
/* Business health has a standalone dashboard palette and score chart. */
body.dark-mode:has(.health-shell) {
--ink: #e5e7eb !important;
--muted: #94a3b8 !important;
--line: #334155 !important;
--surface: #111827 !important;
--wash: #020617 !important;
color-scheme: dark;
background: #020617 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(.health-shell) .appbar,
body.dark-mode:has(.health-shell) .panel,
body.dark-mode:has(.health-shell) .summary-card,
body.dark-mode:has(.health-shell) .today-card,
body.dark-mode:has(.health-shell) .dimension,
body.dark-mode:has(.health-shell) .trend-panel,
body.dark-mode:has(.health-shell) .products-panel,
body.dark-mode:has(.health-shell) .stock-panel,
body.dark-mode:has(.health-shell) .actions {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(.health-shell) .appbar { backdrop-filter: none !important; }
body.dark-mode:has(.health-shell) :is(.health-nav a, .nav-actions button, .nav-actions a, .back-link) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(.health-shell) :is(.health-nav a:hover, .nav-actions button:hover, .nav-actions a:hover, .back-link:hover) {
background: #334155 !important;
color: #f8fafc !important;
}
body.dark-mode:has(.health-shell) .brand-mark,
body.dark-mode:has(.health-shell) .period-chip,
body.dark-mode:has(.health-shell) .business-context,
body.dark-mode:has(.health-shell) .visit-note {
background: #1e293b !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
body.dark-mode:has(.health-shell) .hero { background: #111827 !important; }
body.dark-mode:has(.health-shell) .score-ring { background: conic-gradient(var(--score-color, #60a5fa) var(--score), #334155 0) !important; }
body.dark-mode:has(.health-shell) .score-ring::before { background: #111827 !important; }
body.dark-mode:has(.health-shell) .score-outof,
body.dark-mode:has(.health-shell) .summary-label,
body.dark-mode:has(.health-shell) .summary-note,
body.dark-mode:has(.health-shell) .intro,
body.dark-mode:has(.health-shell) .section-head p,
body.dark-mode:has(.health-shell) .dimension p,
body.dark-mode:has(.health-shell) .score-caption,
body.dark-mode:has(.health-shell) .trend-summary span,
body.dark-mode:has(.health-shell) .chart-date,
body.dark-mode:has(.health-shell) .list-main small,
body.dark-mode:has(.health-shell) .empty-inline,
body.dark-mode:has(.health-shell) .footnote { color: #a8b3c5 !important; }
body.dark-mode:has(.health-shell) .dimension-status.healthy,
body.dark-mode:has(.health-shell) .visit-note.up,
body.dark-mode:has(.health-shell) .change-chip:not(.down):not(.neutral) { background: #12372f !important; color: #86efac !important; }
body.dark-mode:has(.health-shell) .dimension-status.watch,
body.dark-mode:has(.health-shell) .change-chip.neutral,
body.dark-mode:has(.health-shell) .visit-note { background: #3b2d17 !important; color: #fcd34d !important; }
body.dark-mode:has(.health-shell) .dimension-status.attention,
body.dark-mode:has(.health-shell) .change-chip.down,
body.dark-mode:has(.health-shell) .visit-note.down { background: #451a24 !important; color: #fda4af !important; }
body.dark-mode:has(.health-shell) .bar { background: #334155 !important; }
body.dark-mode:has(.health-shell) .chart { border-color: #334155 !important; }
body.dark-mode:has(.health-shell) .chart-label { color: #cbd5e1 !important; }
body.dark-mode:has(.health-shell) .product-list li,
body.dark-mode:has(.health-shell) .stock-list li { border-color: #334155 !important; color: #e5e7eb !important; }
body.dark-mode:has(.health-shell) .action-list li { color: #e5e7eb !important; }
body.dark-mode:has(.health-shell) .action-list .material-symbols-rounded,
body.dark-mode:has(.health-shell) :is(.mini-link, .dimension-link) { color: #7dd3fc !important; }
body.dark-mode:has(.health-shell) .empty { background: #1e293b !important; color: #cbd5e1 !important; }
body.dark-mode:has(.health-shell) .alert { background: #3b2d17 !important; color: #fde68a !important; }
/* Add stock form and its dynamic item/supplier controls. */
body.dark-mode:has(form#myForm[action="/save-stock"]) #stock-form,
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-entry-panel,
body.dark-mode:has(form#myForm[action="/save-stock"]) .form-section,
body.dark-mode:has(form#myForm[action="/save-stock"]) .unit-selection-card,
body.dark-mode:has(form#myForm[action="/save-stock"]) #advanced-section,
body.dark-mode:has(form#myForm[action="/save-stock"]) #item-list-container,
body.dark-mode:has(form#myForm[action="/save-stock"]) #restockReminderAlert {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) #restockReminderAlert { background: #3b2d17 !important; border-color: #854d0e !important; color: #fde68a !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #restockReminderAlert :is(strong, span, a, button) { color: #fde68a !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm :is(.section-title, .input_labels, label, small, p, h4, h5, h6) { color: #e5e7eb !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm :is(.property_inputs, input:not([type="hidden"]), select, textarea) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm :is(#toggle-advanced, .unit-custom-wrapper, .unit-row, .unit-row > div) {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm .options-container {
background: #111827 !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm .options-container .autocomplete-option:hover { background: #1e293b !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #item-list-container :is(h4, li, span, div) { color: #e5e7eb !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm input[type="checkbox"] { accent-color: #3b82f6; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #myForm .mich-save-button { background: #1d4ed8 !important; color: #fff !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) #stock-options.stock-entry-actions a {
background: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) #stock-options.stock-entry-actions a:hover {
background: #334155 !important;
border-color: #64748b !important;
color: #f8fafc !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel div[style*="background:#f8fafc"] {
background: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel > .section-title + div {
background: #1e293b !important;
background-color: #1e293b !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel div[style*="background:#f8fafc"] :is(span, strong) { color: #e5e7eb !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel div[style*="background:#f8fafc"] a { color: #7dd3fc !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel > .section-title + div :is(span, strong) { color: #e5e7eb !important; }
body.dark-mode:has(form#myForm[action="/save-stock"]) .stock-details-panel > .section-title + div a { color: #7dd3fc !important; }
/* Point-of-sale form (/add-sales-page). */
body.dark-mode:has(form#posForm[action="/add-sales"]) .pos-panel,
body.dark-mode:has(form#posForm[action="/add-sales"]) .customer-section,
body.dark-mode:has(form#posForm[action="/add-sales"]) .sales-section,
body.dark-mode:has(form#posForm[action="/add-sales"]) .payment-section {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(form#posForm[action="/add-sales"]) #fuel-options.pos-actions a {
background: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#posForm[action="/add-sales"]) #fuel-options.pos-actions a:hover { background: #334155 !important; color: #f8fafc !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) #posForm :is(.section-title, .panel-header, .input_labels, label, small, p, h4, h5, h6) { color: #e5e7eb !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) #posForm :is(.property_inputs, input:not([type="hidden"]), select, textarea) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(form#posForm[action="/add-sales"]) #posForm select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) .pos-sales-panel > .section-title + div {
background: #1e293b !important;
background-color: #1e293b !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#posForm[action="/add-sales"]) .pos-sales-panel > .section-title + div :is(span, strong) { color: #e5e7eb !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) .pos-sales-panel > .section-title + div a { color: #7dd3fc !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) .options-container,
body.dark-mode:has(form#posForm[action="/add-sales"]) #pos_item_suggestions {
background: #111827 !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#posForm[action="/add-sales"]) .options-container .autocomplete-option:hover { background: #1e293b !important; }
body.dark-mode:has(form#posForm[action="/add-sales"]) #pos_stock_text { color: #bfdbfe !important; }
/* Inventory spreadsheet import page. */
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm,
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm > div[style*="background: #f9f9f9"],
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #progress-container {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm :is(label, .input_labels, span, strong, p, small) { color: #e5e7eb !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm a { color: #7dd3fc !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm input:not([type="hidden"]):not([type="radio"]):not([type="submit"]),
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm select,
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm textarea {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) form#myForm input[type="radio"] { accent-color: #3b82f6; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #submitButton { background: #166534 !important; color: #fff !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #progress-container { background: #334155 !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #progress-bar { color: #fff !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #upload-status { color: #cbd5e1 !important; }
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #myForm > div[style*="f9f9f9"] {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #myForm > div[style*="f9f9f9"] > label {
background: transparent !important;
color: #e5e7eb !important;
}
body.dark-mode:has(form#myForm[enctype="multipart/form-data"]) #myForm > div[style*="f9f9f9"] input[type="radio"] { accent-color: #60a5fa; }
body.dark-mode .existing-stock-choice-panel {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode .existing-stock-choice-panel > label,
body.dark-mode .existing-stock-choice-panel .existing-stock-choice-option,
body.dark-mode .existing-stock-choice-panel .existing-stock-choice-option span {
background: transparent !important;
color: #e5e7eb !important;
}
body.dark-mode .existing-stock-choice-panel input[type="radio"] { accent-color: #60a5fa; }
/* Mobile stock barcode scanner page. */
body.dark-mode .mobile-stock-page { color: #e5e7eb !important; }
body.dark-mode .mobile-stock-page :is(.mobile-stock-heading h1, .mobile-stock-heading p, .mobile-stock-eyebrow, .mobile-stock-health) { color: #e5e7eb !important; }
body.dark-mode .mobile-stock-back,
body.dark-mode .mobile-stock-card,
body.dark-mode .mobile-stock-manual,
body.dark-mode .mobile-stock-tips {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode .mobile-stock-back:hover,
body.dark-mode .scanner-mode-switch button:hover { background: #1e293b !important; color: #f8fafc !important; }
body.dark-mode .mobile-stock-camera-icon {
background: #1e293b !important;
color: #93c5fd !important;
}
body.dark-mode .mobile-stock-card-head :is(strong, span),
body.dark-mode .mobile-stock-guidance :is(h2, p),
body.dark-mode .mobile-stock-status,
body.dark-mode .mobile-stock-manual :is(label, small),
body.dark-mode .mobile-stock-tips { color: #cbd5e1 !important; }
body.dark-mode .mobile-stock-status { background: #1e293b !important; border-color: #475569 !important; }
body.dark-mode .scanner-mode-switch { background: #111827 !important; border-color: #334155 !important; }
body.dark-mode .scanner-mode-switch button { color: #cbd5e1 !important; }
body.dark-mode .scanner-mode-switch button[aria-pressed="true"] { background: #1d4ed8 !important; color: #fff !important; }
body.dark-mode #manualBarcode,
body.dark-mode .mobile-stock-manual select,
body.dark-mode .modal input:not([type="checkbox"]),
body.dark-mode .modal select {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .mobile-stock-manual select option,
body.dark-mode .modal select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode #cancelScanBtn,
body.dark-mode .modal {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #cancelScanBtn { color: #fca5a5 !important; }
body.dark-mode .modal :is(h3, p, label, span) { color: #e5e7eb !important; }
body.dark-mode .modal button[id$="Cancel"],
body.dark-mode .modal button#choiceCancel { background: #1e293b !important; border-color: #475569 !important; color: #e5e7eb !important; }
body.dark-mode #itemsList { background: #111827 !important; border-color: #334155 !important; }
body.dark-mode #itemsList li { background: #111827 !important; border-color: #334155 !important; color: #e5e7eb !important; }
body.dark-mode #itemsList li:hover { background: #1e293b !important; }
body.dark-mode .skeleton-container { background: #020617 !important; }
body.dark-mode .skeleton-container :is(.skeleton-line, .skeleton-box) { background: #1e293b !important; }
/* Mobile sale barcode scanner and its scanned-item review list. */
body.dark-mode .mobile-scan-page { color: #e5e7eb !important; }
body.dark-mode .mobile-scan-page :is(.mobile-scan-heading h1, .mobile-scan-heading p, .mobile-scan-eyebrow, .mobile-scan-health) { color: #e5e7eb !important; }
body.dark-mode .mobile-scan-back,
body.dark-mode .mobile-scan-card,
body.dark-mode .mobile-scan-review,
body.dark-mode .mobile-scan-tips {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode .mobile-scan-back:hover { background: #1e293b !important; color: #f8fafc !important; }
body.dark-mode .mobile-scan-camera-icon { background: #1e293b !important; color: #93c5fd !important; }
body.dark-mode .mobile-scan-card-head { border-color: #334155 !important; }
body.dark-mode .mobile-scan-card-head :is(strong, span),
body.dark-mode .mobile-scan-guidance :is(h2, p),
body.dark-mode .mobile-scan-status,
body.dark-mode .mobile-scan-review-head :is(h2, p),
body.dark-mode .mobile-scan-review-controls,
body.dark-mode .mobile-scan-tips { color: #cbd5e1 !important; }
body.dark-mode .mobile-scan-status { background: #1e293b !important; border-color: #475569 !important; }
body.dark-mode .mobile-scan-status i,
body.dark-mode .mobile-scan-tips i { color: #93c5fd !important; }
body.dark-mode #result { color: #bfdbfe !important; }
body.dark-mode #cancel-btn { background: #1e293b !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
body.dark-mode #cancel-btn:hover { background: #334155 !important; }
body.dark-mode .mobile-scan-review-count,
body.dark-mode .mobile-scan-review-total {
background: #1e293b !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body.dark-mode .mobile-scan-review-item { background: #0f172a !important; border-color: #334155 !important; }
body.dark-mode .mobile-scan-review-name { color: #e5e7eb !important; }
body.dark-mode .mobile-scan-review-price { color: #5eead4 !important; }
body.dark-mode .mobile-scan-review-controls input { background: #020617 !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-mode .mobile-scan-review-remove { background: #451a24 !important; color: #fda4af !important; }
body.dark-mode .mobile-scan-review-total strong { color: #93c5fd !important; }
body.dark-mode .mobile-scan-page select { background: #020617 !important; border-color: #475569 !important; color: #f8fafc !important; }
body.dark-mode .mobile-scan-page select option { background: #020617 !important; color: #f8fafc !important; }
body.dark-mode .mobile-scan-page .alert-danger { background: #451a24 !important; border-color: #7f1d1d !important; color: #fecaca !important; }
body.dark-mode .mobile-scan-page .alert-success { background: #12372f !important; border-color: #166534 !important; color: #bbf7d0 !important; }
/* Desktop barcode sales scanner (/scan-bar-codes). */
body.dark-mode .barcode-sales {
--scan-ink: #e5e7eb !important;
--scan-muted: #a8b3c5 !important;
--scan-line: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode .barcode-sales__panel {
background: #111827 !important;
border-color: #334155 !important;
box-shadow: none !important;
}
body.dark-mode .barcode-sales__scan {
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
}
body.dark-mode .barcode-sales__field label,
body.dark-mode .barcode-sales__list-head :is(h3, p),
body.dark-mode .barcode-sales__hint { color: #cbd5e1 !important; }
body.dark-mode .barcode-sales__input,
body.dark-mode #scannedItemsTable input[type="number"] {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .barcode-sales__input-wrap .scan-icon { color: #93c5fd !important; }
body.dark-mode .barcode-sales__count { background: #1e293b !important; color: #bfdbfe !important; }
body.dark-mode #scannedItemsTable thead th {
background: #1e293b !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}
body.dark-mode #scannedItemsTable tbody,
body.dark-mode #scannedItemsTable tbody tr,
body.dark-mode #scannedItemsTable tbody td {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #scannedItemsTable tbody tr:hover,
body.dark-mode #scannedItemsTable tbody tr:hover td { background: #1e293b !important; }
body.dark-mode #scannedItemsTable .product-line-total { color: #5eead4 !important; }
body.dark-mode .barcode-sales__overall-total { background: #1e293b !important; border-color: #475569 !important; color: #e5e7eb !important; }
body.dark-mode .barcode-sales__overall-total strong { color: #93c5fd !important; }
body.dark-mode .barcode-sales .quantity_warning { color: #fda4af !important; }
/* Spreadsheet sales upload form and stock handling choices. */
body.dark-mode .upload-panel {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
box-shadow: none !important;
}
body.dark-mode .upload-header h1,
body.dark-mode .upload-panel .input-label,
body.dark-mode .choice-box label,
body.dark-mode #upload-status { color: #e5e7eb !important; }
body.dark-mode .choice-box {
background: #111827 !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode .choice-box label,
body.dark-mode .choice-box label span { background: transparent !important; color: #e5e7eb !important; }
body.dark-mode .choice-box input[type="radio"] { accent-color: #60a5fa; }
body.dark-mode .upload-panel .file-input {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .upload-panel .header-actions a {
background: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
body.dark-mode .upload-panel .header-actions a:hover { background: #334155 !important; color: #f8fafc !important; }
body.dark-mode .upload-panel .progress-wrap { background: #334155 !important; }
body.dark-mode .upload-panel .progress-bar-sales { color: #fff !important; }
body.dark-mode .upload-panel .alert-danger { background: #451a24 !important; border-color: #7f1d1d !important; color: #fecaca !important; }
body.dark-mode .upload-panel .alert-success { background: #12372f !important; border-color: #166534 !important; color: #bbf7d0 !important; }
/* Dynamically populated Added Items lists on stock, sales, invoice, and quote forms. */
body.dark-mode #item-list-container,
body.dark-mode #pos_cart_container {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border: 1px solid #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #item-list-container :is(h4, ul, li, span, strong, small, div),
body.dark-mode #pos_cart_container :is(h4, ul, li, span, strong, small, div) {
color: #e5e7eb !important;
}
body.dark-mode #item-list-container ul,
body.dark-mode #pos_cart_list {
background: transparent !important;
border-color: #334155 !important;
}
body.dark-mode #item-list-container li,
body.dark-mode #pos_cart_list li {
background: #1e293b !important;
border: 1px solid #334155 !important;
border-radius: 9px !important;
color: #e5e7eb !important;
}
body.dark-mode #item-list-container li :is(span, strong, small, div),
body.dark-mode #pos_cart_list li :is(span, strong, small, div) { color: #e5e7eb !important; }
/* Invoice item-name and serial-number autocomplete dropdowns. */
body.dark-mode #filterInput,
body.dark-mode #serialInput {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode #optionsContainer,
body.dark-mode #serial_options_container {
background: #111827 !important;
border-color: #475569 !important;
box-shadow: 0 12px 28px #0008 !important;
color: #e5e7eb !important;
}
body.dark-mode #optionsContainer .autocomplete-option,
body.dark-mode #serial_options_container .autocomplete-option,
body.dark-mode #optionsContainer > div,
body.dark-mode #serial_options_container > div {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #optionsContainer .autocomplete-option:hover,
body.dark-mode #serial_options_container .autocomplete-option:hover,
body.dark-mode #optionsContainer > div:hover,
body.dark-mode #serial_options_container > div:hover {
background: #1e293b !important;
color: #f8fafc !important;
}
/* Stock-entry and point-of-sale autocomplete results. */
body.dark-mode #suggestions-container,
body.dark-mode #pos_item_suggestions,
body.dark-mode #pos_serial_options,
body.dark-mode #sales-agent-suggestions,
body.dark-mode #pos-sale-brand-list {
background: #111827 !important;
border-color: #475569 !important;
box-shadow: 0 12px 28px #0008 !important;
color: #e5e7eb !important;
}
body.dark-mode #suggestions-container .suggestion-item,
body.dark-mode #pos_item_suggestions .autocomplete-option,
body.dark-mode #pos_serial_options .autocomplete-option,
body.dark-mode #sales-agent-suggestions .autocomplete-option,
body.dark-mode #pos-sale-brand-list .autocomplete-option,
body.dark-mode #suggestions-container > div,
body.dark-mode #pos_item_suggestions > div,
body.dark-mode #pos_serial_options > div,
body.dark-mode #sales-agent-suggestions > div,
body.dark-mode #pos-sale-brand-list > div {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #suggestions-container .suggestion-item:hover,
body.dark-mode #pos_item_suggestions .autocomplete-option:hover,
body.dark-mode #pos_serial_options .autocomplete-option:hover,
body.dark-mode #sales-agent-suggestions .autocomplete-option:hover,
body.dark-mode #pos-sale-brand-list .autocomplete-option:hover,
body.dark-mode #suggestions-container > div:hover,
body.dark-mode #pos_item_suggestions > div:hover,
body.dark-mode #pos_serial_options > div:hover,
body.dark-mode #sales-agent-suggestions > div:hover,
body.dark-mode #pos-sale-brand-list > div:hover {
background: #1e293b !important;
color: #f8fafc !important;
}
/* POS item search results set their label and image placeholder colors inline. */
body.dark-mode #pos_item_suggestions .autocomplete-option,
body.dark-mode #pos_item_suggestions .autocomplete-option:hover,
body.dark-mode #pos_item_suggestions .autocomplete-option:focus,
body.dark-mode #pos_item_suggestions .autocomplete-option > div {
color: #f8fafc !important;
}
body.dark-mode #pos_item_suggestions .autocomplete-option > div:first-child {
background-color: #1e293b !important;
}
body.dark-mode #pos_item_suggestions .autocomplete-option > div:nth-child(2),
body.dark-mode #pos_item_suggestions .autocomplete-option:hover > div:nth-child(2) {
background: transparent !important;
background-color: transparent !important;
color: #f8fafc !important;
}
body.dark-mode #suggestions-container .suggestion-item .stock { color: #94a3b8 !important; }
/* Advance sales item search dropdown, including its light-mode hover defaults. */
body.dark-mode #advanceItemSuggestions.advance-item-suggestions,
body.dark-mode #advanceItemSuggestions .advance-item-option,
body.dark-mode #advanceItemSuggestions .advance-item-option:hover {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #advanceItemSuggestions .advance-item-option:hover {
background: #1e293b !important;
}
body.dark-mode #advanceItemSuggestions .advance-item-option-name,
body.dark-mode #advanceItemSuggestions .advance-item-option-details,
body.dark-mode #advanceItemSuggestions .advance-item-option-meta {
background: transparent !important;
color: #e5e7eb !important;
}
body.dark-mode #advanceItemSuggestions .advance-item-option img {
background: #1e293b !important;
}
body.dark-mode .advance-shell .topbar-actions > a.mm-btn,
body.dark-mode .advance-shell .topbar-actions > a.mm-btn:hover,
body.dark-mode .advance-shell .topbar-actions > a.mm-btn:focus-visible {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
body.dark-mode #advanceCartContainer,
body.dark-mode #advanceCartContainer > div {
background: #111827 !important;
background-color: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode #advanceCartContainer > div > div:first-child {
background: transparent !important;
color: #f8fafc !important;
}
body.dark-mode #advanceCartList > div {
background: #1e293b !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode #advanceCartList > div > div,
body.dark-mode #advanceCartList > div > div > div {
background: transparent !important;
color: #e5e7eb !important;
}
body.dark-mode #advanceCartList > div > div > div:nth-child(2) {
color: #cbd5e1 !important;
}
body.dark-mode #advanceCartList .mm-btn,
body.dark-mode #advanceCartList .mm-btn:hover {
background: #1e293b !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .receipt-choice-modal,
body.dark-mode .receipt-choice-body {
background: #111827 !important;
background-color: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode .receipt-choice-header {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
border-color: #334155 !important;
}
body.dark-mode .receipt-choice-title,
body.dark-mode .receipt-choice-copy {
color: #f8fafc !important;
}
body.dark-mode .receipt-choice-icon {
background: #1e3a5f !important;
color: #93c5fd !important;
}
body.dark-mode .receipt-choice-button,
body.dark-mode .receipt-choice-button.ghost,
body.dark-mode .receipt-choice-button.method {
background: #1e293b !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .receipt-choice-button:hover,
body.dark-mode .receipt-choice-button:focus {
background: #334155 !important;
border-color: #64748b !important;
color: #fff !important;
}
body.dark-mode .receipt-choice-button.primary {
background: #1d4ed8 !important;
border-color: #3b82f6 !important;
color: #fff !important;
}
html.dark-mode body form.property_forn .expense-options a,
html.dark-mode body form.property_forn .expense-options a:hover,
html.dark-mode body form.property_forn .expense-options a:focus-visible {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
/* Large page-specific sections often use brand blues, gradients, or inline
light colors, so style them directly instead of relying on color sampling. */
body.dark-mode :is(main, section, article, aside, footer, .content-wrapper, .main-panel,
[class*="section"], [class*="panel"], [class*="hero"], [class*="feature"],
[class*="content"], [class*="surface"], [class*="banner"], [class*="card"]):not(button):not(a) {
background-color: #0f172a !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode :is(.modal-backdrop, .modal-overlay, .review-modal-backdrop,
.dashboard-modal-backdrop, .more-info-modal, .profile-modal, .confirmation-modal,
.stock-push-dialog-backdrop) {
background: rgba(2, 6, 23, .9) !important;
backdrop-filter: blur(5px);
}
/* Inventory and financial report navigation */
body.dark-mode #sidebar.sidebar,
body.dark-mode nav.sidebar,
body.dark-mode .sidebar.sidebar-offcanvas {
background: #020617 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode #sidebar .nav-item,
body.dark-mode #sidebar .menu-category,
body.dark-mode #sidebar .menu-category .toggle-category {
color: #e5e7eb !important;
opacity: 1 !important;
visibility: visible !important;
}
/* The nested category list has its own page-level styles and can retain a
light surface even when the sidebar and links have switched themes. */
body.dark-mode #sidebar .menu-category,
body.dark-mode #sidebar .menu-category > .menu-items,
body.dark-mode #sidebar .menu-category > ul.menu-items,
body.dark-mode #sidebar .menu-items,
body.dark-mode #sidebar .menu-items > .nav-item,
body.dark-mode #sidebar .menu-items > .nav-item > .nav-link,
body.dark-mode #sidebar .sub-menu,
body.dark-mode #sidebar .submenu,
body.dark-mode #sidebar .submenu-item,
body.dark-mode #sidebar .collapse,
body.dark-mode #sidebar .collapsing {
background-color: #020617 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode #sidebar .menu-items > .nav-item > .nav-link:hover,
body.dark-mode #sidebar .menu-items > .nav-item > .nav-link.active {
background-color: #1e293b !important;
}
body.dark-mode #sidebar .nav-link,
body.dark-mode #sidebar .nav-link .menu-title,
body.dark-mode #sidebar .nav-link .menu-icon,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link .menu-title,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link .menu-icon,
body.dark-mode #sidebar .toggle-category {
color: #e5e7eb !important;
}
body.dark-mode #sidebar .nav-link,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link { background-color: transparent !important; }
body.dark-mode #sidebar .nav-link:hover,
body.dark-mode #sidebar .nav-link.active,
body.dark-mode #sidebar .nav-item.active > .nav-link,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link:hover,
body.dark-mode #sidebar .menu-items .nav-item > .nav-link.active {
background: #1e293b !important;
color: #fff !important;
}
body.dark-mode #sidebar .menu-icon {
background: #1e293b !important;
color: #cbd5e1 !important;
}
body.dark-mode #sidebar .sidebar-search {
background: #111827 !important;
border-color: #475569 !important;
}
body.dark-mode #sidebar .sidebar-search-input {
background: transparent !important;
color: #f8fafc !important;
}
body.dark-mode #sidebar .sidebar-search-input::placeholder { color: #94a3b8 !important; }
/* Admin navigation is populated by client-side code after the page renders. */
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar {
background: #020617 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .nav-link,
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .nav-link .menu-title,
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .admin-menu-section {
color: #e5e7eb !important;
opacity: 1 !important;
visibility: visible !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar :is(.menu-items, .sub-menu, .submenu, .submenu-item, .collapse, .collapsing, .dropdown-menu) {
background-color: #020617 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar :is(.menu-items, .sub-menu, .submenu, .submenu-item, .collapse, .collapsing) .nav-link {
color: #e5e7eb !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .nav-link { background: transparent !important; }
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .nav-link:hover,
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .nav-link.active {
background: #1e293b !important;
border-color: #475569 !important;
color: #fff !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .admin-menu-icon {
background: #1e293b !important;
color: #cbd5e1 !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .sidebar-search-input {
background: #111827 !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
body.dark-mode .mm-shared-admin-shell .admin-menu-sidebar .sidebar-search-input::placeholder { color: #94a3b8 !important; }
/* Dashboard quick actions are anchors, so generic button rules do not reach
them. Their local dashboard styles otherwise preserve a white surface. */
body.dark-mode .dashboard-container a.quick-action-button,
body.dark-mode .dashboard-container .quick-actions-strip a.quick-action-button,
body.dark-mode .dashboard-container .quick-actions-strip button.quick-action-button,
body.dark-mode a.quick-action-button,
body.dark-mode a.modal-primary-action {
background: #1e293b !important;
background-image: none !important;
color: #f8fafc !important;
border-color: #475569 !important;
box-shadow: none !important;
}
body.dark-mode .dashboard-container a.quick-action-button:hover,
body.dark-mode .dashboard-container .quick-actions-strip a.quick-action-button:hover,
body.dark-mode .dashboard-container .quick-actions-strip button.quick-action-button:hover,
body.dark-mode a.quick-action-button:hover,
body.dark-mode a.modal-primary-action:hover {
background: #334155 !important;
color: #fff !important;
border-color: #64748b !important;
}
body.dark-mode :is(a.quick-action-button, a.modal-primary-action) :is(i, svg) {
color: #f8fafc !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Stock dashboard summary controls, metric glyphs, and chart surfaces. */
body.dark-mode .dashboard-container .business-report-launch,
body.dark-mode .dashboard-container .business-report-launch:hover {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
body.dark-mode .dashboard-container .business-report-launch-copy strong,
body.dark-mode .dashboard-container .business-report-launch-copy small,
body.dark-mode .dashboard-container .business-report-launch-action {
color: #e5e7eb !important;
}
body.dark-mode .dashboard-container .business-report-launch-icon,
body.dark-mode .dashboard-container .business-report-launch-action {
background: #1e293b !important;
border-color: #475569 !important;
}
body.dark-mode .dashboard-container .business-report-launch :is(i, svg),
body.dark-mode .dashboard-container .card-header h3 :is(i, svg),
body.dark-mode .dashboard-container .metric-icon,
body.dark-mode .dashboard-container .metric-icon i,
body.dark-mode .dashboard-container .metric-icon svg {
color: #cbd5e1 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
body.dark-mode .dashboard-container .metric-card-large .metric-icon,
body.dark-mode .dashboard-container .metric-card-large.profit-card .metric-icon,
body.dark-mode .dashboard-container .metric-card-large.revenue-card .metric-icon,
body.dark-mode .dashboard-container .metric-card-large.stock-card .metric-icon,
body.dark-mode .dashboard-container .metric-card-large.expenses-card .metric-icon,
body.dark-mode .dashboard-container .metric-card-large.customers-card .metric-icon {
background: #1e293b !important;
}
body.dark-mode .dashboard-container .performance-section .profit-trends-scroll,
body.dark-mode .dashboard-container .performance-section .profit-trends-chart-container {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
scrollbar-color: #475569 #111827;
}
body.dark-mode .dashboard-container .profit-trends-scroll::-webkit-scrollbar-thumb { background: #475569 !important; }
/* Business health tiles and the account menu use their own pale icon chips. */
body.dark-mode .dashboard-container .priority-alert,
body.dark-mode .dashboard-container .priority-alert:hover,
body.dark-mode .dashboard-container .priority-alert:focus-visible {
background: transparent !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode .dashboard-container .priority-alert > i,
body.dark-mode .dashboard-container .priority-alert.warning > i,
body.dark-mode .dashboard-container .priority-alert.danger > i,
body.dark-mode .dashboard-container .priority-alert.stable > i,
body.dark-mode .dashboard-container .account-usage-card .account-usage-heading-icon {
background: #1e293b !important;
color: #cbd5e1 !important;
}
body.dark-mode .dashboard-container .priority-alert strong,
body.dark-mode .dashboard-container .priority-alert span,
body.dark-mode .dashboard-container .priority-alert .click-hint-pill,
body.dark-mode .dashboard-container .account-usage-card .account-usage-heading {
color: #e5e7eb !important;
}
body.dark-mode .dashboard-container .priority-alert :is(i, svg) {
color: #cbd5e1 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
body.dark-mode .dashboard-container :is(.material-symbols-rounded, .menu-icon) {
color: #cbd5e1 !important;
}
body.dark-mode .modern-dropdown {
background: #111827 !important;
color: #e5e7eb !important;
border: 1px solid #334155 !important;
scrollbar-color: #475569 #111827 !important;
}
body.dark-mode .modern-dropdown .dropdown-header-section {
background: #0f172a !important;
color: #f8fafc !important;
border-bottom: 1px solid #334155 !important;
}
body.dark-mode .modern-dropdown .dropdown-section-title,
body.dark-mode .modern-dropdown .item-content h6,
body.dark-mode .modern-dropdown .item-content p {
color: #e5e7eb !important;
}
body.dark-mode .modern-dropdown .dropdown-divider { border-color: #334155 !important; }
body.dark-mode .modern-dropdown a.modern-item,
body.dark-mode .modern-dropdown a.modern-item:hover,
body.dark-mode .modern-dropdown a.modern-item:focus {
background: #111827 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode .modern-dropdown a.modern-item:hover { background: #1e293b !important; }
body.dark-mode .modern-dropdown .item-icon,
body.dark-mode .modern-dropdown .item-icon:is(.bg-primary-soft, .bg-success-soft, .bg-warning-soft, .bg-info-soft, .bg-danger-soft, .bg-dark-soft, .bg-secondary-soft) {
background: #1e293b !important;
color: #cbd5e1 !important;
}
body.dark-mode .modern-dropdown .item-icon i,
body.dark-mode .modern-dropdown .header-icon i { color: #cbd5e1 !important; }
body.dark-mode img.profile-picture,
body.dark-mode img.profile-picture2 {
border: 1px solid #475569 !important;
background-color: #1e293b !important;
}
/* Dashboard's three shortcut icons live in the breadcrumb bar, outside the
sidebar selectors, while reusing the same pale .menu-icon class. */
body.dark-mode .navbar-breadcrumb .navbar-links-wrapper .nav-link .menu-icon {
background: #1e293b !important;
color: #7dd3fc !important;
}
body.dark-mode .navbar-breadcrumb .navbar-links-wrapper .nav-link:hover .menu-icon {
background: #334155 !important;
color: #bae6fd !important;
}
body.dark-mode img.profile-picture[src$="/avatar.png"],
body.dark-mode img.profile-picture2[src$="/avatar.png"] {
filter: brightness(.72) contrast(1.08);
background: #1e293b !important;
}
/* Keep action controls and their glyphs legible against dark surfaces. */
body.dark-mode :is(button:not(.global-theme-toggle), .btn:not(.global-theme-toggle), [role="button"]:not(.global-theme-toggle)) {
background-color: #1e293b !important;
background-image: none !important;
color: #f8fafc !important;
border-color: #475569 !important;
}
body.dark-mode :is(button:not(.global-theme-toggle), .btn:not(.global-theme-toggle), [role="button"]:not(.global-theme-toggle)):hover { background-color: #334155 !important; }
body.dark-mode button:not(.global-theme-toggle) :is(i, svg, span),
body.dark-mode .btn :is(i, svg),
body.dark-mode [role="button"] :is(i, svg),
body.dark-mode .material-symbols-rounded,
body.dark-mode .admin-menu-icon i {
color: #f8fafc !important;
fill: currentColor !important;
stroke: currentColor !important;
}
body.dark-mode button:not(.global-theme-toggle) svg *,
body.dark-mode .btn svg *,
body.dark-mode [role="button"] svg * {
fill: currentColor !important;
stroke: currentColor !important;
}
/* Shared and page-specific chat widgets */
body.dark-mode :is(.chat-popup, #chat-popup, #ask-mich-popup) {
background: #0f172a !important;
color: #e5e7eb !important;
border: 1px solid #475569 !important;
}
body.dark-mode :is(.chat-header, #chat-header) {
background: #1e293b !important;
color: #f8fafc !important;
border-color: #475569 !important;
}
body.dark-mode :is(.chat-body, #chat-body) {
background: #0b1220 !important;
color: #e5e7eb !important;
}
body.dark-mode :is(.chat-input-container, #chat-input-container) {
background: #111827 !important;
border-color: #334155 !important;
}
body.dark-mode :is(.chat-input, #chat-input, #ask-mich-input, .chat-popup input, #ask-mich-popup textarea) {
background: #020617 !important;
color: #f8fafc !important;
border-color: #475569 !important;
caret-color: #f8fafc !important;
}
body.dark-mode :is(.message, .bot-message, .chat-message, .assistant-message) {
background: #1e293b !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode :is(.user-message, .chat-user-message) {
background: #1e3a5f !important;
color: #f8fafc !important;
}
body.dark-mode :is(.fab, .fab-chat, #chat-fab, #ask-mich-btn, #send-btn) {
background: #1e293b !important;
color: #f8fafc !important;
border: 1px solid #475569 !important;
}
body.dark-mode :is(.fab, .fab-chat, #chat-fab, #ask-mich-btn, #send-btn) i,
body.dark-mode :is(.fab, .fab-chat, #chat-fab, #ask-mich-btn, #send-btn) svg {
color: #f8fafc !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Public and account-access view controls */
body.dark-mode :is(input[type="button"], input[type="submit"], input[type="reset"], .form-btn, .gpr-btn) {
background: #1e293b !important;
color: #f8fafc !important;
border-color: #475569 !important;
}
body.dark-mode :is(.social-icon, .footer-social .social-icon, .social-links a, .social-link) {
background: #1e293b !important;
color: #f8fafc !important;
border-color: #475569 !important;
}
body.dark-mode :is(.social-icon, .footer-social .social-icon, .social-links a, .social-link) i,
body.dark-mode :is(.social-icon, .footer-social .social-icon, .social-links a, .social-link) svg {
color: #f8fafc !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.global-theme-toggle {
position: fixed !important;
right: 20px !important;
bottom: 86px !important;
z-index: 30000 !important;
display: grid !important;
place-items: center !important;
width: 46px !important;
height: 46px !important;
padding: 0 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 50% !important;
background: #fff !important;
color: #243247 !important;
box-shadow: 0 5px 18px #0f172a30 !important;
cursor: pointer !important;
}
.global-theme-toggle:hover { transform: translateY(-2px); }
.global-theme-toggle:focus-visible { outline: 3px solid #60a5fa !important; outline-offset: 3px; }
.global-theme-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.dark-mode .global-theme-toggle { background: #1e293b !important; color: #f8fafc !important; border-color: #475569 !important; }
body:has(.global-app-notification-shortcut) .global-theme-toggle {
bottom: calc(max(14px, env(safe-area-inset-bottom)) + 112px) !important;
}
body.dark-mode .global-theme-light-surface {
background-color: #111827 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
/* Cover common component surfaces and inline white backgrounds missed by
page-specific dark-mode rules. */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-body,
body.dark-mode .bg-body-tertiary,
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .modal-content,
body.dark-mode .offcanvas,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .accordion-item,
body.dark-mode .popover,
body.dark-mode .toast,
body.dark-mode .alert-light,
body.dark-mode .table,
body.dark-mode .table > :not(caption) > *,
body.dark-mode .table-light > *,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text,
body.dark-mode .select2-dropdown,
body.dark-mode .select2-selection,
body.dark-mode .dataTables_wrapper,
body.dark-mode .content-wrapper,
body.dark-mode .main-panel {
background-color: #111827 !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode [style*="background: white" i],
body.dark-mode [style*="background-color: white" i],
body.dark-mode [style*="background:#fff" i],
body.dark-mode [style*="background: #fff" i],
body.dark-mode [style*="background-color:#fff" i],
body.dark-mode [style*="background-color: #fff" i],
body.dark-mode [style*="background:#ffffff" i],
body.dark-mode [style*="background: #ffffff" i],
body.dark-mode [style*="background-color:#ffffff" i],
body.dark-mode [style*="background-color: #ffffff" i] {
background-color: #111827 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode [style*="background:#f8f9fa" i],
body.dark-mode [style*="background: #f8f9fa" i],
body.dark-mode [style*="background-color:#f8f9fa" i],
body.dark-mode [style*="background-color: #f8f9fa" i],
body.dark-mode [style*="background: rgb(255, 255, 255)" i],
body.dark-mode [style*="background:rgb(255,255,255)" i],
body.dark-mode [style*="background-color: rgb(255, 255, 255)" i],
body.dark-mode [style*="background-color:rgb(255,255,255)" i] {
background-color: #111827 !important;
background-image: none !important;
color: #e5e7eb !important;
border-color: #334155 !important;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode option { color-scheme: dark; }
/* Dark theme also applies to the HTML root used by pages whose body class is
initialized after the page-specific modal CSS has been parsed. */
html.dark-mode body :is(.modal-content, .modal-header, .modal-body, .modal-footer,
.mm-modal-content, .mm-modal-content-1, .mm-modal-body, .mm-modal-body-1,
#filterFieldsContainer, #downloadFieldsContainer) {
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body :is(.modal-content, .mm-modal-content, .mm-modal-content-1,
#filterFieldsContainer, #downloadFieldsContainer) :is(h1, h2, h3, h4, h5, h6, p, label, span, strong, small, .form-text) {
color: #e5e7eb !important;
}
html.dark-mode body :is(.modal-content, .mm-modal-content, .mm-modal-content-1,
#filterFieldsContainer, #downloadFieldsContainer) a { color: #7dd3fc !important; }
html.dark-mode body :is(.modal-content, .mm-modal-content, .mm-modal-content-1,
#filterFieldsContainer, #downloadFieldsContainer) :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
background-color: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body :is(#assignModal, #expenseModal, #shopUsageModal) > div {
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body [style*="background: white" i],
html.dark-mode body [style*="background-color: white" i],
html.dark-mode body [style*="background:#fff" i],
html.dark-mode body [style*="background: #fff" i],
html.dark-mode body [style*="background-color:#fff" i],
html.dark-mode body [style*="background-color: #fff" i],
html.dark-mode body [style*="background:#ffffff" i],
html.dark-mode body [style*="background: #ffffff" i],
html.dark-mode body [style*="background-color:#ffffff" i],
html.dark-mode body [style*="background-color: #ffffff" i],
html.dark-mode body [style*="background:#f8fafc" i],
html.dark-mode body [style*="background: #f8fafc" i],
html.dark-mode body [style*="background-color:#f8fafc" i],
html.dark-mode body [style*="background-color: #f8fafc" i],
html.dark-mode body [style*="background:#f9f9f9" i],
html.dark-mode body [style*="background: #f9f9f9" i],
html.dark-mode body [style*="background-color:#f9f9f9" i],
html.dark-mode body [style*="background-color: #f9f9f9" i],
html.dark-mode body [style*="background:#fafafa" i],
html.dark-mode body [style*="background: #fafafa" i],
html.dark-mode body [style*="background-color:#fafafa" i],
html.dark-mode body [style*="background-color: #fafafa" i] {
background-color: #1e293b !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
/* Common Business Records modal shells and item panels. This stylesheet is
injected after page-specific styles so these overrides consistently win. */
html.dark-mode body :is(.mm-modal-overlay > .mm-modal-popup,
.mm-modal2-overlay > .mm-modal2-popup, .modal-overlay > .modal-box,
.soft-modal-overlay > .soft-modal-card, .mm-modal > .mm-modal-content,
.tx-modal > .tx-modal-content, .modal-content) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body :is(.mm-modal-popup, .mm-modal2-popup, .modal-box,
.soft-modal-card, .mm-modal-content, .tx-modal-content) :is(.mm-modal-body, .mm-modal-footer,
.soft-modal-body, .soft-modal-footer, .modal-body, .modal-footer) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body :is(.mm-modal-popup, .mm-modal2-popup, .modal-box,
.soft-modal-card, .mm-modal-content, .tx-modal-content) :is(.soft-item-row, .soft-search-results,
.soft-items-list, .tx-item-card, .tx-summary-card, .tx-field, .invoice-item-row,
.invoice-item-card, .item-card, .item-row, .items-list > div) {
background: #1e293b !important;
background-color: #1e293b !important;
background-image: none !important;
border-color: #475569 !important;
color: #e5e7eb !important;
}
html.dark-mode body :is(.mm-modal-popup, .mm-modal2-popup, .modal-box,
.soft-modal-card, .mm-modal-content, .tx-modal-content) :is(h1, h2, h3, h4, h5, h6, p, label, span, strong, small) {
color: #e5e7eb !important;
}
html.dark-mode body :is(.mm-modal-popup, .mm-modal2-popup, .modal-box,
.soft-modal-card, .mm-modal-content, .tx-modal-content) :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body .swal2-validation-message {
background: #451a24 !important;
border-color: #7f1d1d !important;
color: #fecaca !important;
}
html.dark-mode body .swal2-validation-message::before { background: #b91c1c !important; color: #fff !important; }
html.dark-mode body :is(#filterModalOverlay, #filterFieldsContainer) label[for="dateRangeOption"],
html.dark-mode body :is(#filterModalOverlay, #filterFieldsContainer) label[for="singleDateOption"] {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f8fafc !important;
}
html.dark-mode body :is(#filterModalOverlay, #filterFieldsContainer) label[for="dateRangeOption"] span,
html.dark-mode body :is(#filterModalOverlay, #filterFieldsContainer) label[for="singleDateOption"] span { color: #f8fafc !important; }
/* Worker pages use a shared wm component set with page-local light defaults. */
html.dark-mode body .wm {
background: #0f172a !important;
color: #e5e7eb !important;
}
html.dark-mode body :is(.wm-bar, .wm-card, .wm-mcard, .wm-form-card,
.wm-tier-card, .wm-tier-modal, .wm-note, .wm-foot, .wm-stat,
.wm-empty-workers) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body .wm :is(.wm-card-head, .wm-fsec + .wm-fsec) {
border-color: #334155 !important;
}
html.dark-mode body .wm :is(.wm-card-ttl, .wm-pgtitle, .wm-fsec-ttl,
.wm-nc-name, .wm-mval, .wm-ival, .wm-ttl, .wm-subttl, label, p, strong, small) {
color: #e5e7eb !important;
}
html.dark-mode body .wm :is(.wm-nc-sub, .wm-fsec-sub, .wm-mlbl, .wm-empty-msg) {
color: #94a3b8 !important;
}
html.dark-mode body .wm :is(.wm-stat-lbl, .wm-stat-sub) { color: #94a3b8 !important; }
html.dark-mode body .wm .wm-stat-val { color: #f8fafc !important; }
html.dark-mode body .wm-empty-workers { border-color: #0f766e !important; }
html.dark-mode body .wm-empty-workers > :not(a):not(button) { color: #e5e7eb !important; }
html.dark-mode body .wm :is(.wm-inp, .wm-slt, .wm-txt, .wm-in, .wm-sel,
input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
background: #020617 !important;
background-color: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body .wm :is(.wm-inp, .wm-slt, .wm-txt, .wm-in, .wm-sel)::placeholder {
color: #94a3b8 !important;
}
html.dark-mode body .wm .wm-btn-g {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body .wm .wm-btn-g:hover { background: #334155 !important; }
html.dark-mode body table.wm-tbl thead th {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body table.wm-tbl tbody td {
background: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body table.wm-tbl tbody tr:hover td { background: #1e293b !important; }
html.dark-mode body .wm .wm-cchip {
background: #1e293b !important;
border: 1px solid #475569 !important;
color: #cbd5e1 !important;
}
html.dark-mode body .wm .wm-fsec-ico {
background: #1e293b !important;
border: 1px solid #475569 !important;
color: #93c5fd !important;
}
html.dark-mode body #profileModal > div {
background: #111827 !important;
color: #e5e7eb !important;
}
html.dark-mode body #profileModal img { background: #0f172a !important; }
/* Financial Reports section: statements, filters, export menus, and report cards. */
html.dark-mode body[data-financial-report] {
background: #0b1220 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] :is(.container-scroller, .page-body-wrapper,
.main-panel, .content-wrapper, .container-fluid) {
background: #0b1220 !important;
background-color: #0b1220 !important;
background-image: none !important;
border-color: #334155 !important;
}
html.dark-mode body[data-financial-report] * { border-color: #334155 !important; }
html.dark-mode body[data-financial-report] :is(h1, h2, h3, h4, h5, h6, label, p, th, td, .text-muted) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] :is(.card, .card-body, .tb-card,
.checks-dialog, .checks-list li, .full-report-page .period-card,
.full-report-page .included-card, .cashbook-modal-card, .cashbook-filters,
.report, .supplier-advances-content .top, .supplier-advances-content .card,
.supplier-advances-content .balance-card) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] :is(table, .table, .table-responsive) {
background: #0f172a !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] :is(table th, table td, .table th, .table td) {
background-color: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] :is(table th, .table th) {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
html.dark-mode body[data-financial-report] :is(.statement-view, .report-header,
.date-filter, .statement-table-section) {
--statement-ink: #e5e7eb;
--statement-muted: #94a3b8;
--statement-line: #334155;
--statement-accent: #67c7b1;
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-table-section :is(th, td) {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-table-section th {
background: #1e293b !important;
color: #f1f5f9 !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-table-section tbody tr:is(:hover, :nth-child(even)) td {
background: #172235 !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-table-section tr.statement-spacer td {
background: #0f172a !important;
}
html.dark-mode body[data-financial-report] .statement-view :is(.financial-export-trigger,
.financial-export-options, .statement-check-button) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .statement-view .financial-export-option {
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .statement-view .financial-export-option:hover {
background: #334155 !important;
}
html.dark-mode body[data-financial-report] .financial-export-options {
background: #111827 !important;
background-color: #111827 !important;
border: 1px solid #475569 !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}
html.dark-mode body[data-financial-report] .financial-export-options .financial-export-option {
display: block;
width: 100%;
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
text-align: left;
text-decoration: none;
}
html.dark-mode body[data-financial-report] .financial-export-options .financial-export-option:hover,
html.dark-mode body[data-financial-report] .financial-export-options .financial-export-option:focus-visible {
background: #334155 !important;
color: #fff !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-check-result {
background: #422006 !important;
border-color: #854d0e !important;
color: #fde68a !important;
}
html.dark-mode body[data-financial-report] .statement-view .statement-check-result[data-balanced="true"] {
background: #052e2b !important;
border-color: #0f766e !important;
color: #99f6e4 !important;
}
html.dark-mode body[data-financial-report] :is(.checks-status, .checks-recommendation) {
background: #10231f !important;
background-image: none !important;
border-color: #285447 !important;
color: #d1fae5 !important;
}
html.dark-mode body[data-financial-report] .checks-status.needs-review {
background: #2b2111 !important;
border-color: #78551a !important;
color: #fde68a !important;
}
html.dark-mode body[data-financial-report] .checks-status :is(h4, p),
html.dark-mode body[data-financial-report] .checks-recommendation strong {
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] .checks-status.needs-review :is(h4, p) {
color: #fde68a !important;
}
html.dark-mode body[data-financial-report] .checks-status-icon,
html.dark-mode body[data-financial-report] .checks-recommendation-icon {
background: #1e3a34 !important;
color: #6ee7b7 !important;
}
html.dark-mode body[data-financial-report] .checks-status.needs-review .checks-status-icon {
background: #713f12 !important;
color: #fef3c7 !important;
}
html.dark-mode body[data-financial-report] .checks-section-title,
html.dark-mode body[data-financial-report] .checks-note {
color: #cbd5e1 !important;
}
html.dark-mode body[data-financial-report] .checks-footer {
background: #0f172a !important;
border-color: #334155 !important;
}
html.dark-mode body[data-financial-report] .supplier-advances-content {
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] .supplier-advances-content :is(label, th, td, p, h1, h2, strong, small, .account-note, .empty) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .supplier-advances-content .balance-card {
background: #1e293b !important;
}
html.dark-mode body[data-financial-report] .full-report-page .full-report-badge {
background: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
html.dark-mode body[data-financial-report] .full-report-page .full-report-badge i {
color: #7dd3fc !important;
}
html.dark-mode body[data-financial-report] .full-report-page .report-tile .tile-icon {
background: #17352f !important;
color: #6ee7b7 !important;
}
html.dark-mode body[data-financial-report] .full-report-page .report-tile:nth-child(3n + 2) .tile-icon {
background: #1e3445 !important;
color: #7dd3fc !important;
}
html.dark-mode body[data-financial-report] .full-report-page .report-tile:nth-child(3n) .tile-icon {
background: #3b2e1b !important;
color: #fcd34d !important;
}
html.dark-mode body[data-financial-report] .full-report-page .report-footnote {
background: #10231f !important;
border-color: #285447 !important;
color: #cbd5e1 !important;
}
html.dark-mode body[data-financial-report] .full-report-page .report-footnote i {
color: #6ee7b7 !important;
}
html.dark-mode body[data-financial-report] :is(.cashbook-filters input,
.cashbook-modal-fields input, .cashbook-modal-fields select,
.supplier-advances-content input, .supplier-advances-content select,
.statement-view input, .full-report-page input, .full-report-page select,
.tb-card input, .tb-card select, .checks-dialog input, .checks-dialog select) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body[data-financial-report] :is(.cashbook-modal-card,
.checks-dialog, .financial-export-options, [style*="background: white"],
[style*="background:white"], [style*="background: #fff"],
[style*="background:#fff"], [style*="background-color: #fff"],
[style*="background-color:#fff"], [style*="background-color: white"],
[style*="background-color:white"], [style*="background: #ffffff"],
[style*="background:#ffffff"], [style*="background-color: #ffffff"],
[style*="background-color:#ffffff"]) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] :is(.cashbook-modal-card, .checks-dialog,
.financial-export-options, [style*="background: white"], [style*="background:white"],
[style*="background: #fff"], [style*="background:#fff"],
[style*="background-color: #fff"], [style*="background-color:#fff"],
[style*="background-color: white"], [style*="background-color:white"],
[style*="background: #ffffff"], [style*="background:#ffffff"],
[style*="background-color: #ffffff"], [style*="background-color:#ffffff"]) :is(h1, h2, h3, h4, h5, h6, p, label, span, strong, small, th, td) {
color: #e5e7eb !important;
}
html.dark-mode body[data-financial-report] table :is(th, td) {
border-color: #334155 !important;
}
html.dark-mode body[data-financial-report] .supplier-advances-content table th,
html.dark-mode body[data-financial-report] .supplier-advances-content table td {
background: #111827 !important;
}
html.dark-mode body[data-financial-report] .supplier-advances-content table th {
background: #1e293b !important;
}
/* About page proof points and company sections. */
html.dark-mode body[data-public-page="about"] :is(.about-proof-item,
.about-story-card, .about-focus-card, .about-value-card) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-public-page="about"] .about-section.alt {
background: #0f172a !important;
}
html.dark-mode body[data-public-page="about"] .about-purpose-card {
background: linear-gradient(135deg, #172554, #0f172a) !important;
border: 1px solid #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-public-page="about"] .about-eyebrow {
background: #1e293b !important;
border: 1px solid #475569 !important;
color: #bfdbfe !important;
}
html.dark-mode body[data-public-page="about"] .about-eyebrow i { color: #7dd3fc !important; }
html.dark-mode body[data-public-page="about"] :is(.about-proof-item strong,
.about-proof-item span, .about-section-head h2, .about-section-head p,
.about-story-card h3, .about-story-card p, .about-focus-card h3,
.about-focus-card p, .about-value-card h3, .about-value-card p) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="about"] :is(.about-focus-card i,
.about-value-card i) {
background: #1e3a5f !important;
color: #7dd3fc !important;
border: 1px solid #334155 !important;
}
/* Pricing page plan cards, comparison tables, and feature icons. */
html.dark-mode body[data-public-page="pricing"] .pricing-page {
background: #0b1220 !important;
background-image: none !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.pricing-hero, .pricing-highlights-band,
.comparison-section, .implementation-section, .plans-section, .why-section) {
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.proof-item, .pricing-visual,
.plan-card, .trial-banner, .capacity-item, .plan-share-menu,
.comparison-table-wrapper, .why-card, .implementation-step) {
background: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body[data-public-page="pricing"] .pricing-cta {
background: #172554 !important;
border-color: #334155 !important;
color: #f8fafc !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.pricing-hero h1, .pricing-hero-copy,
.proof-item strong, .proof-item span, .pricing-highlight, .section-intro h2,
.section-intro p, .comparison-section h2, .comparison-section p,
.why-section h2, .why-section p, .implementation-section h2,
.implementation-section p, .plan-name, .plan-price, .plan-price small,
.plan-top p, .feature-group h6, .feature-list li, .capacity-item strong,
.capacity-item span, .plan-note, .comparison-table th, .comparison-table td,
.comparison-table td strong, .why-card h6, .why-card p,
.implementation-step h6, .implementation-step p, .trial-banner strong,
.trial-banner span) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.pricing-kicker, .plan-tag,
.pricing-highlight i, .why-icon, .pricing-proof .proof-item) {
background: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.pricing-highlight i, .why-icon) {
color: #7dd3fc !important;
}
html.dark-mode body[data-public-page="pricing"] .plan-card.scale .plan-tag {
background: #3b2e1b !important;
color: #fcd34d !important;
}
html.dark-mode body[data-public-page="pricing"] .plan-card.unlimited {
background: #0b1220 !important;
border-color: #475569 !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.plan-note, .plan-card .capacity-item) {
background: #1e293b !important;
border-color: #475569 !important;
}
html.dark-mode body[data-public-page="pricing"] .feature-list li::before {
background: #064e3b !important;
color: #a7f3d0 !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.plan-share-trigger,
.plan-share-menu a, .plan-share-menu button) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="pricing"] .plan-share-whatsapp {
background: #064e3b !important;
border-color: #0f766e !important;
color: #a7f3d0 !important;
}
html.dark-mode body[data-public-page="pricing"] .plan-share-whatsapp:hover {
background: #065f46 !important;
color: #ecfdf5 !important;
}
html.dark-mode body[data-public-page="pricing"] .plan-card.unlimited .plan-tag {
background: #334155 !important;
color: #f1f5f9 !important;
}
html.dark-mode body[data-public-page="pricing"] :is(.plan-share-trigger:hover,
.plan-share-menu a:hover, .plan-share-menu button:hover) {
background: #334155 !important;
color: #fff !important;
}
html.dark-mode body[data-public-page="pricing"] .comparison-table {
background: #0f172a !important;
}
html.dark-mode body[data-public-page="pricing"] .comparison-table :is(th, td) {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="pricing"] .comparison-table th {
background: #1e293b !important;
}
html.dark-mode body[data-public-page="pricing"] .comparison-table tbody tr:hover td {
background: #172235 !important;
}
/* Blog and article comment/share controls. */
html.dark-mode body[data-public-page="blog"] :is(.engagement-pill, .like-btn, .share-btn),
html.dark-mode body[data-public-page="post"] :is(.article-pill, .article-engagement .like-btn,
.article-engagement .share-btn) {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
html.dark-mode body[data-public-page="blog"] :is(.engagement-pill, .like-btn, .share-btn):hover,
html.dark-mode body[data-public-page="post"] :is(.article-pill, .article-engagement .like-btn,
.article-engagement .share-btn):hover {
background: #334155 !important;
background-color: #334155 !important;
border-color: #64748b !important;
color: #f8fafc !important;
}
html.dark-mode body[data-public-page="blog"] :is(.engagement-pill, .like-btn, .share-btn) i,
html.dark-mode body[data-public-page="post"] :is(.article-pill, .article-engagement .like-btn,
.article-engagement .share-btn) i {
color: #7dd3fc !important;
}
/* SME Academy course directory. */
html.dark-mode body.academy-page {
background: #0b1220 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-page .academy-header {
background: #0b1220 !important;
border-color: #334155 !important;
}
html.dark-mode body.academy-page .academy-nav-links { color: #e2e8f0 !important; }
html.dark-mode body.academy-page .academy-menu-toggle {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body.academy-page .academy-nav-links .nav-action {
background: #1d4ed8 !important;
color: #fff !important;
}
html.dark-mode body.academy-page .academy-directory :is(.directory-hero,
.directory-courses) {
background: #0f172a !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-page .academy-directory :is(.directory-hero h1,
.directory-heading h2, .directory-heading > p, .course-result-count,
.course-card h3, .course-description, .course-meta, .course-meta span,
.course-participation, .course-coming-note, .course-no-results) {
color: #e2e8f0 !important;
}
html.dark-mode body.academy-page .academy-directory :is(.course-card,
.course-search, .course-category-filter select) {
background: #111827 !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-page .academy-directory .course-search input {
background: transparent !important;
color: #f8fafc !important;
}
html.dark-mode body.academy-page .academy-directory .course-search input::placeholder {
color: #94a3b8 !important;
}
html.dark-mode body.academy-page .academy-directory :is(.course-status,
.course-category, .course-participation strong) {
color: #7dd3fc !important;
}
html.dark-mode body.academy-page .academy-directory .course-status {
background: #1e3a5f !important;
}
html.dark-mode body.academy-page .academy-directory .course-meta,
html.dark-mode body.academy-page .academy-directory .course-link {
border-color: #334155 !important;
}
html.dark-mode body.academy-page .academy-directory .course-link {
color: #7dd3fc !important;
}
html.dark-mode body.academy-page .academy-directory .course-meta i,
html.dark-mode body.academy-page .academy-directory .course-search > span {
color: #7dd3fc !important;
}
html.dark-mode body.academy-page .academy-directory .course-thumbnail {
background: #1e293b !important;
}
/* Shared learner pages: sign-in, course lessons, quizzes, and dashboards. */
html.dark-mode body.academy-page {
--academy-ink: #e2e8f0;
--academy-muted: #94a3b8;
--academy-line: #334155;
--academy-paper: #111827;
--academy-soft: #0f172a;
--academy-blue-pale: #1e3a5f;
background: #0b1220 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-hero,
.courses-section, .challenges-section, .growth-section, .academy-auth-main,
.dashboard-main, .course-lessons, .course-detail, .free-section, .live-section) {
background: #0f172a !important;
background-image: none !important;
border-color: #334155 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.hero-panel,
.course-card, .challenge-card, .live-empty, .empty-content, .signin-panel,
.academy-auth-card, .dashboard-summary > div, .dashboard-card,
.academy-quiz, .quiz-attempt, .quiz-question-review, .lesson-menu,
.lesson-menu-item, .lesson-card, .lesson-content, .lesson-callout,
.lesson-media-link, .lesson-resource-link, .lesson-quiz-group,
.academy-quiz-locked, .learner-quiz-overview, .learner-quiz-metrics > div,
.learner-failed-quizzes article, .learner-no-failures, .course-quiz-passmark-note,
.quiz-passmark-result, .certificate-quiz-lock, .academy-upgrade-panel,
.dashboard-empty, .compact-empty) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(h1, h2, h3, h4, h5, h6,
p, label, legend, small, strong, .course-category, .course-description,
.course-meta, .course-participation, .course-coming-note, .resource-type,
.resource-item p, .lesson-title-row, .lesson-block, .lesson-content,
.lesson-rich-content, .lesson-rich-description, .lesson-checklist li,
.academy-auth-intro, .academy-auth-footnote, .academy-auth-divider,
.academy-auth-form label, .academy-auth-message, .dashboard-heading,
.dashboard-summary span, .dashboard-card, .dashboard-card-heading,
.dashboard-empty, .learner-quiz-heading, .learner-quiz-metrics,
.learner-failed-quizzes, .quiz-note, .quiz-attempt-list-intro,
.quiz-attempt-content, .quiz-question-review > div, .lesson-menu > p,
.lesson-menu-title small, .lesson-media-link small, .lesson-resource-link small) {
color: #e2e8f0 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-nav-links,
.text-link, .resource-item > a, .lesson-resources a, .academy-auth-form a,
.quiz-note a, .dashboard-heading > .text-link, .course-link) {
color: #7dd3fc !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.course-meta,
.course-link, .dashboard-heading, .dashboard-card-heading,
.dashboard-card-heading, .resource-list, .resource-item, .course-quizzes,
.academy-quiz fieldset, .academy-quiz-content, .lesson-resources,
.lesson-title-row, .lesson-rich-content th, .lesson-rich-content td,
.lesson-rich-description th, .lesson-rich-description td) {
border-color: #334155 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.lesson-rich-content th,
.lesson-rich-description th, .academy-auth-form input, .academy-auth-form select,
.academy-auth-form textarea, .course-search input, .course-category-filter select,
.academy-quiz input:not([type="radio"]):not([type="checkbox"])) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-auth-form input,
.academy-auth-form select, .academy-auth-form textarea)::placeholder {
color: #94a3b8 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-auth-tabs button,
.academy-google-button, .academy-quiz-summary, .academy-quiz-summary > .bi,
.quiz-retry, .quiz-attempt > summary, .quiz-question-review > summary,
.lesson-menu-item, .lesson-quiz-group > summary) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-auth-tabs button[aria-selected="true"],
.lesson-menu-item[aria-current="step"]) {
background: #1e3a5f !important;
border-color: #3b82f6 !important;
color: #bfdbfe !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-auth-tabs button:hover,
.academy-google-button:hover, .academy-quiz-summary:hover, .academy-quiz[open] > .academy-quiz-summary,
.quiz-attempt > summary:hover, .quiz-question-review > summary:hover,
.lesson-menu-item:hover) {
background: #334155 !important;
color: #f8fafc !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.lesson-index,
.lesson-menu-index, .lesson-menu-item .bi-check-circle-fill,
.course-meta i, .resource-icon, .signin-panel > span,
.dashboard-card-heading > span, .academy-quiz-summary > .bi,
.lesson-checklist .bi) {
color: #7dd3fc !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.academy-auth-message,
.empty-content, .lesson-callout, .lesson-quiz-group, .academy-quiz-locked,
.certificate-quiz-lock, .course-quiz-passmark-note) {
background: #172554 !important;
border-color: #334155 !important;
color: #dbeafe !important;
}
html.dark-mode body.academy-page:not(.certificate-page) :is(.quiz-result,
.quiz-passmark-result, .learner-no-failures) {
background: #052e2b !important;
border-color: #0f766e !important;
color: #a7f3d0 !important;
}
html.dark-mode body.academy-page:not(.certificate-page) .learner-failed-quizzes article {
background: #2b2111 !important;
border-color: #78551a !important;
}
html.dark-mode body.academy-page.certificate-page :is(.certificate-toolbar,
.certificate-main) {
background: #0f172a !important;
border-color: #334155 !important;
}
html.dark-mode body.academy-page.certificate-page .certificate-note {
color: #cbd5e1 !important;
}
html.dark-mode body.academy-admin-page {
background: #0b1220 !important;
color: #e5e7eb !important;
}
html.dark-mode body.academy-admin-page :is(.studio-panel, .studio-workspace-card,
.studio-admin-label, .studio-course-option, .studio-component,
.studio-component-actions button, .studio-add-blocks button,
.studio-quiz-question, .studio-quiz-item, .studio-empty, .studio-welcome,
.studio-module-row, .studio-lesson-option, .studio-preview-dialog,
.preview-header, .preview-lesson, .preview-quiz, .academy-metric-card,
.academy-learner-row, .academy-learner-summary span, .academy-progress-card,
.academy-quiz-review, .academy-answer-list li, .academy-issue-form select,
.studio-image-preview) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body.academy-admin-page :is(.academy-admin-tabs button:hover,
.academy-admin-tabs button.is-active, .studio-course-option:hover,
.studio-course-option.is-selected, .studio-lesson-option:hover,
.studio-lesson-option.is-selected, .studio-add-blocks button:hover) {
background: #1e3a5f !important;
border-color: #475569 !important;
color: #bfdbfe !important;
}
html.dark-mode body.academy-admin-page :is(.studio-form input,
.studio-form textarea, .studio-form select, .studio-inline-form input,
.studio-inline-form textarea, .studio-inline-form select,
.studio-course-fields input, .studio-course-fields textarea,
.studio-course-fields select, .studio-component-fields input,
.studio-component-fields textarea, .studio-component-fields select,
.academy-search-label input, .academy-issue-form select) {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body.academy-admin-page :is(.studio-page-heading,
.studio-header-links, .studio-admin-label, .studio-panel,
.studio-workspace-card, .studio-course-editor, .studio-component-head,
.studio-component-fields label, .studio-form label, .studio-inline-form label,
.studio-course-fields label, .studio-section-title, .studio-muted,
.studio-course-option, .studio-course-option small, .studio-lesson-option,
.studio-lesson-option small, .studio-welcome p, .academy-metric-card span,
.academy-metric-card strong, .academy-metric-card small, .academy-course-table th,
.academy-course-table td, .academy-learner-identity strong,
.academy-learner-identity small, .academy-learner-stats, .academy-detail-heading h2,
.academy-learner-summary span, .academy-progress-head strong,
.academy-progress-card h4, .academy-quiz-review summary, .academy-answer-list li,
.academy-answer-list li strong, .academy-answer-list li small,
.academy-issue-form label, .academy-certificate-row > *) {
color: #e2e8f0 !important;
}
html.dark-mode body.academy-admin-page :is(.studio-icon-button,
.studio-secondary-button, .studio-component-actions button,
.studio-add-blocks button, .academy-course-table a) {
background: #1e293b !important;
border-color: #475569 !important;
color: #7dd3fc !important;
}
html.dark-mode body.academy-admin-page :is(.studio-course-editor-head,
.studio-lessons-area, .studio-quiz-area, .studio-detail-heading,
.academy-detail-heading, .academy-certificate-row, .academy-course-table th,
.academy-course-table td) {
border-color: #334155 !important;
}
html.dark-mode body.academy-admin-page .studio-preview-dialog::backdrop {
background: rgba(2, 6, 23, .82) !important;
}
/* FAQ page surfaces use page-local light colors that need explicit dark overrides. */
html.dark-mode .faq-page {
background: linear-gradient(180deg, #0b1220 0%, #0f172a 42%, #0b1220 100%) !important;
color: #e2e8f0 !important;
}
html.dark-mode .faq-page .faq-card,
html.dark-mode .faq-page .faq-search-wrap,
html.dark-mode .faq-page .faq-support-box {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, .25) !important;
}
html.dark-mode .faq-page .faq-search-wrap .form-control {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode .faq-page .faq-search-wrap .form-control::placeholder {
color: #94a3b8 !important;
}
html.dark-mode .faq-page .faq-category-heading,
html.dark-mode .faq-page .faq-support-box h3,
html.dark-mode .faq-page .faq-support-box p,
html.dark-mode .faq-page .faq-card .accordion-button,
html.dark-mode .faq-page .faq-card .accordion-body {
color: #e2e8f0 !important;
}
html.dark-mode .faq-page .faq-card .accordion-item,
html.dark-mode .faq-page .faq-card .accordion-button,
html.dark-mode .faq-page .faq-card .accordion-body {
background: #111827 !important;
border-color: #334155 !important;
}
html.dark-mode .faq-page .faq-card .accordion-button:not(.collapsed) {
background: #1e293b !important;
color: #f8fafc !important;
}
html.dark-mode .faq-page .faq-card .accordion-button::after {
filter: invert(1) grayscale(1);
}
/* Documentation's split pane and article styles are page-local white surfaces. */
html.dark-mode .docs-tools,
html.dark-mode .docs-container,
html.dark-mode .docs-sidebar,
html.dark-mode .docs-content,
html.dark-mode .article-container {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
html.dark-mode .docs-tools-title h1,
html.dark-mode .article-title,
html.dark-mode .article-body,
html.dark-mode .article-body h2,
html.dark-mode .article-body h3,
html.dark-mode .article-body pre code {
color: #e2e8f0 !important;
}
html.dark-mode .category-title,
html.dark-mode .article-description,
html.dark-mode .article-meta,
html.dark-mode .article-body blockquote {
color: #94a3b8 !important;
}
html.dark-mode .category-links a {
color: #cbd5e1 !important;
}
html.dark-mode .category-links a:hover,
html.dark-mode .category-links a.active {
background: #1e293b !important;
color: #7dd3fc !important;
}
html.dark-mode .search-box input {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode .search-box input::placeholder {
color: #94a3b8 !important;
}
html.dark-mode .search-box input:focus,
html.dark-mode .btn-share {
background: #1e293b !important;
border-color: #475569 !important;
color: #7dd3fc !important;
}
html.dark-mode .article-body code,
html.dark-mode .article-body pre,
html.dark-mode .video-container,
html.dark-mode .article-body table th {
background: #1e293b !important;
color: #e2e8f0 !important;
}
html.dark-mode .article-body table th,
html.dark-mode .article-body table td {
border-color: #334155 !important;
}
html.dark-mode .empty-state-icon,
html.dark-mode .empty-state-text {
color: #94a3b8 !important;
}
/* The home page contact dialog has its own light support card and close control. */
html.dark-mode #contactOptionsModal .contact-modal-content,
html.dark-mode #contactOptionsModal .modal-body {
background: #111827 !important;
color: #e2e8f0 !important;
}
html.dark-mode #contactOptionsModal .contact-modal-header {
border-color: #334155 !important;
}
html.dark-mode #contactOptionsModal .contact-modal-header .btn-close {
width: 2.5rem;
height: 2.5rem;
padding: .5rem;
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
filter: none !important;
opacity: .9;
}
html.dark-mode #contactOptionsModal .contact-form .form-label {
color: #e2e8f0 !important;
}
html.dark-mode #contactOptionsModal .contact-form .form-control {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode #contactOptionsModal .contact-form .form-control::placeholder {
color: #94a3b8 !important;
}
html.dark-mode #contactOptionsModal .contact-choice {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode #contactOptionsModal .contact-choice:hover {
background: #263449 !important;
border-color: #64748b !important;
color: #f8fafc !important;
}
html.dark-mode #contactOptionsModal .contact-choice-icon {
background: #0f172a !important;
color: #7dd3fc !important;
}
html.dark-mode #contactOptionsModal .contact-choice-text span {
color: #7dd3fc !important;
}
/* Homepage sections that set their own white card backgrounds. */
html.dark-mode body[data-public-page="home"] :is(.features-section,
.clients-section, .mich-feedback-section, .workflow-section, .faq-section,
.contact-section) {
background: #0b1220 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] :is(.feature-card,
.industry-card, .testimonial-card, .client-logo, .workflow-card,
.support-box, .faq-card, .contact-card) {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
box-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important;
}
html.dark-mode body[data-public-page="home"] :is(.hero-badges span,
.proof-empty-grid span, .section-badge, .feature-icon, .workflow-icon,
.contact-icon) {
background: #1e293b !important;
color: #7dd3fc !important;
border-color: #334155 !important;
}
html.dark-mode body[data-public-page="home"] :is(.feature-card h3,
.feature-card p, .industry-card h3, .industry-card p,
.section-title h2, .section-title p, .proof-empty-card h3,
.proof-empty-card p, .proof-empty-grid span, .hero-badges strong,
.hero-badges small, .workflow-card h4, .workflow-card p,
.partner-name, .support-box h5, .support-box p,
.contact-info h3, .contact-info p, .contact-details h4,
.contact-details p, .contact-details a) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .hero-badges span {
background: #111827 !important;
border: 1px solid #334155 !important;
}
html.dark-mode body[data-public-page="home"] .proof-empty-card {
background: #111827 !important;
border-color: #334155 !important;
}
html.dark-mode body[data-public-page="home"] .client-logo {
background: #1e293b !important;
}
html.dark-mode body[data-public-page="home"] .contact-form .form-control {
background: #020617 !important;
border-color: #475569 !important;
color: #f8fafc !important;
color-scheme: dark;
}
html.dark-mode body[data-public-page="home"] .contact-form .form-control::placeholder {
color: #94a3b8 !important;
}
html.dark-mode body[data-public-page="home"] .faq-card .accordion-button,
html.dark-mode body[data-public-page="home"] .faq-card .accordion-body {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .faq-card .accordion-button:not(.collapsed) {
background: #1e293b !important;
color: #7dd3fc !important;
}
html.dark-mode body[data-public-page="home"] .faq-card .accordion-button::after {
filter: invert(1) grayscale(1);
}
html.dark-mode body[data-public-page="home"] .android-app-modal-content {
background: #111827 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .android-app-modal-content :is(h2, p) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .install-btn.cancel {
background: #334155 !important;
color: #f8fafc !important;
}
html.dark-mode body[data-public-page="home"] :is(.counter-pill, .metric-chip) {
background: rgba(30, 41, 59, .88) !important;
border-color: rgba(148, 163, 184, .3) !important;
}
html.dark-mode body[data-public-page="home"] .chart-bar {
background: linear-gradient(180deg, #38bdf8, #1d4ed8) !important;
}
html.dark-mode body[data-public-page="home"] .pos-screen {
background: linear-gradient(180deg, #1e3a5f, #0f172a) !important;
box-shadow: inset 0 -10px 18px rgba(2, 6, 23, .5) !important;
}
html.dark-mode body[data-public-page="home"] .pos-screen::before {
background: linear-gradient(135deg, rgba(56, 189, 248, .28), rgba(59, 130, 246, .12)) !important;
}
html.dark-mode body[data-public-page="home"] :is(.pos-amount, .pos-status) {
color: #bae6fd !important;
}
html.dark-mode body[data-public-page="home"] .pos-btn {
background: #475569 !important;
}
html.dark-mode body[data-public-page="home"] .pos-btn.primary {
background: linear-gradient(90deg, #38bdf8, #2563eb) !important;
}
html.dark-mode body[data-public-page="home"] .inventory-box {
background: linear-gradient(180deg, #1e3a5f, #172554) !important;
box-shadow: inset 0 -8px 18px rgba(2, 6, 23, .45) !important;
}
html.dark-mode body[data-public-page="home"] .inventory-box::before {
background: rgba(56, 189, 248, .38) !important;
}
html.dark-mode body[data-public-page="home"] .inventory-box::after {
background: rgba(59, 130, 246, .48) !important;
}
html.dark-mode body[data-public-page="home"] .scene-receipt {
background: rgba(15, 23, 42, .96) !important;
border: 1px solid #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .receipt-line {
background: rgba(56, 189, 248, .35) !important;
}
html.dark-mode body[data-public-page="home"] .receipt-total {
border-color: rgba(148, 163, 184, .45) !important;
color: #bae6fd !important;
}
html.dark-mode body[data-public-page="home"] .scene-tag {
background: rgba(15, 23, 42, .96) !important;
border: 1px solid #475569 !important;
color: #bae6fd !important;
}
body[data-public-page="home"] .fab-container {
bottom: 12px !important;
right: 20px !important;
}
body[data-public-page="home"] .fab-container .channel-fab {
margin-bottom: 0 !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, .45) !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite-avatar {
background: #064e3b !important;
color: #a7f3d0 !important;
}
html.dark-mode body[data-public-page="home"] :is(.channel-invite-title,
.channel-invite-copy) {
color: #f1f5f9 !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite-status,
html.dark-mode body[data-public-page="home"] .channel-invite-note {
color: #94a3b8 !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite-message {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite-close {
background: #334155 !important;
color: #f8fafc !important;
}
html.dark-mode body[data-public-page="home"] .channel-invite-action,
html.dark-mode body[data-public-page="home"] .channel-invite-action:hover {
background: #15803d !important;
color: #fff !important;
}
/* Keep OAuth choices consistent with the dark login and registration cards. */
html.dark-mode body :is(.google-btn, #googleLoginBtn) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
box-shadow: none !important;
}
html.dark-mode body :is(.google-btn, #googleLoginBtn):hover {
background: #334155 !important;
border-color: #64748b !important;
color: #f8fafc !important;
}
html.dark-mode body .oauth-divider {
color: #cbd5e1 !important;
}
/* Cashbook panels, summary cards, filters, and table follow the selected theme. */
html.dark-mode body[data-financial-report] .cashbook-report {
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report :is(.cashbook-filters, .cashbook-supplier-settings, .cashbook-card, .cashbook-table-wrap) {
background: #111827 !important;
background-color: #111827 !important;
background-image: none !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report :is(.cashbook-heading h1, .cashbook-modal-head h2, .cashbook-filters label, .cashbook-modal-fields label, .cashbook-card strong, .cashbook-report td) {
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report :is(.cashbook-heading p, .cashbook-card span, .cashbook-empty) {
color: #94a3b8 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-card.in strong,
html.dark-mode body[data-financial-report] .cashbook-report td.in {
color: #6ee7b7 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-card.out strong,
html.dark-mode body[data-financial-report] .cashbook-report td.out {
color: #fca5a5 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-supplier-toggle {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-supplier-toggle input {
accent-color: #38bdf8;
}
html.dark-mode body[data-financial-report] .cashbook-report th {
color: #cbd5e1 !important;
background: #1e293b !important;
box-shadow: 0 2px 0 #334155 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report td {
border-color: #334155 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report :is(.cashbook-action, .cashbook-apply, .cashbook-modal-submit) {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-modal {
background: rgb(2 6 23 / 72%) !important;
}
html.dark-mode body[data-financial-report] .cashbook-report .cashbook-pill {
background: #1e3a36 !important;
color: #a7f3d0 !important;
}
@media (max-width: 600px) {
.global-theme-toggle { right: 14px !important; bottom: 78px !important; width: 44px !important; height: 44px !important; }
}