/* ============================================================================= WorkGuru Dark Mode — Direct Overrides ============================================================================= Applies dark colours to Metronic layout + WorkGuru dashboard elements when data-mode="dark" is set on . Load AFTER wg-theme.css. Uses --wg-* tokens throughout so that changing the dark palette in wg-theme.css section E propagates here automatically. To test: document.documentElement.setAttribute('data-mode', 'dark'); To revert: document.documentElement.removeAttribute('data-mode'); ============================================================================= */ /* ============================================================================= PAGE SHELL & BODY ============================================================================= */ [data-mode="dark"] body, [data-mode="dark"] .m-page, [data-mode="dark"] .m-body { background-color: var(--wg-bg-body) !important; color: var(--wg-text-primary) !important; } [data-mode="dark"] .m-content { background-color: var(--wg-bg-body) !important; } /* ============================================================================= TOP HEADER BAR ============================================================================= */ [data-mode="dark"] .m-header, [data-mode="dark"] .m-header-head { background-color: var(--wg-bg-card) !important; border-bottom: 1px solid var(--wg-border) !important; } [data-mode="dark"] .m-header .m-header__top { background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .m-brand { background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .m-topbar .m-nav__link, [data-mode="dark"] .m-topbar .m-nav__link-icon i { color: var(--wg-text-body) !important; } [data-mode="dark"] .m-subheader { background-color: var(--wg-bg-body) !important; } [data-mode="dark"] .m-subheader .m-subheader__title, [data-mode="dark"] .m-subheader__breadcrumbs .m-nav__link-text { color: var(--wg-text-primary) !important; } /* ============================================================================= SIDEBAR / LEFT MENU ============================================================================= */ [data-mode="dark"] .m-aside-left, [data-mode="dark"] .m-aside-menu { background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-text, [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-icon { color: var(--wg-text-muted) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item:hover > .m-menu__link .m-menu__link-text, [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item:hover > .m-menu__link .m-menu__link-icon { color: var(--wg-text-primary) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link, [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__heading { background-color: var(--wg-bg-menu-active) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text, [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon { color: var(--wg-link-hover) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__section .m-menu__section-text { color: var(--wg-text-faint) !important; } [data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__item .m-menu__submenu { background-color: var(--wg-bg-card) !important; } /* ============================================================================= PORTLETS / CARDS (Metronic .m-portlet) ============================================================================= */ [data-mode="dark"] .m-portlet { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border-light) !important; box-shadow: var(--wg-card-shadow) !important; } [data-mode="dark"] .m-portlet.schedule_task { background-color: var(--color-info, #26C6DA) !important; border-color: var(--color-info, #26C6DA) !important; color: #fff !important; } [data-mode="dark"] .m-portlet .m-portlet__head { border-bottom-color: var(--wg-border) !important; } [data-mode="dark"] .m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text { color: var(--wg-text-primary) !important; } [data-mode="dark"] .m-portlet__body { color: var(--wg-text-body) !important; } /* ============================================================================= DASHBOARD WIDGET CARDS (nd-widgets-grid) ============================================================================= */ [data-mode="dark"] .nd-widgets-grid .dashboard-widget { background: var(--wg-widget-bg) !important; border-color: var(--wg-widget-border) !important; box-shadow: var(--wg-widget-shadow) !important; } [data-mode="dark"] .nd-widgets-grid .dashboard-widget:hover { border-color: var(--wg-border-medium) !important; box-shadow: var(--wg-widget-shadow-hover) !important; } [data-mode="dark"] .nd-widgets-grid .widget-title { color: var(--wg-widget-title-color) !important; } [data-mode="dark"] .nd-widgets-grid .widget-subtext { color: var(--wg-widget-sub-color) !important; } /* ============================================================================= DASHBOARD TABLE CARDS (quotes-table-card, ccn-table-card, etc.) ============================================================================= */ [data-mode="dark"] .quotes-table-card, [data-mode="dark"] .quotes-insights-card, [data-mode="dark"] .ccn-table-card, [data-mode="dark"] .scn-table-card, [data-mode="dark"] .prodjobs-table-card, [data-mode="dark"] .assets-table-card, [data-mode="dark"] .stocksales-table-card, [data-mode="dark"] .todo-table-card, [data-mode="dark"] .invoices-dashboard-shell .m-portlet, [data-mode="dark"] .leads-hero-card { background: var(--wg-card-bg) !important; border-color: var(--wg-card-border) !important; box-shadow: var(--wg-card-shadow) !important; } /* Card headers */ [data-mode="dark"] .quotes-card-header, [data-mode="dark"] .ccn-card-header, [data-mode="dark"] .scn-card-header, [data-mode="dark"] .prodjobs-card-header, [data-mode="dark"] .assets-card-header, [data-mode="dark"] .stocksales-card-header, [data-mode="dark"] .todo-toolbar { border-bottom-color: var(--wg-card-header-border) !important; } /* Card titles */ [data-mode="dark"] .quotes-card-title, [data-mode="dark"] .ccn-card-title, [data-mode="dark"] .scn-card-title, [data-mode="dark"] .prodjobs-card-title, [data-mode="dark"] .assets-card-title, [data-mode="dark"] .stocksales-card-title, [data-mode="dark"] .todo-page-title { color: var(--wg-text-heading) !important; } /* Card subtitles */ [data-mode="dark"] .quotes-card-subtitle, [data-mode="dark"] .ccn-card-subtitle, [data-mode="dark"] .scn-card-subtitle, [data-mode="dark"] .prodjobs-card-subtitle, [data-mode="dark"] .assets-card-subtitle, [data-mode="dark"] .stocksales-card-subtitle, [data-mode="dark"] .todo-page-subtitle { color: var(--wg-text-faint) !important; } /* ============================================================================= TABLES (NewDashboardsTable + DataTables) ============================================================================= */ [data-mode="dark"] .NewDashboardsTable thead th, [data-mode="dark"] #ToDoIndexTable thead th, [data-mode="dark"] #QuotesTable thead th, [data-mode="dark"] #InvoicesTable thead th, [data-mode="dark"] #ClientCreditNotesTable thead th, [data-mode="dark"] #SupplierCreditNotesTable thead th, [data-mode="dark"] #ProductionJobsTable thead th, [data-mode="dark"] #AssetsTable thead th { background: var(--wg-table-header-bg) !important; color: var(--wg-text-muted) !important; border-bottom-color: var(--wg-border) !important; } [data-mode="dark"] .NewDashboardsTable tbody td { background: var(--wg-table-cell-bg) !important; color: var(--wg-table-cell-text) !important; border-bottom-color: var(--wg-table-cell-border) !important; } [data-mode="dark"] .NewDashboardsTable tbody tr:hover td, [data-mode="dark"] #ToDoIndexTable tbody tr:hover td, [data-mode="dark"] #QuotesTable tbody tr:hover, [data-mode="dark"] #InvoicesTable tbody tr:hover { background: var(--wg-table-hover-bg) !important; } /* DataTables odd-row striping */ [data-mode="dark"] .dataTables_wrapper .NewDashboardsTable tbody tr.odd { background-color: var(--wg-table-zebra-bg) !important; } /* DataTables info text */ [data-mode="dark"] .dataTables_info, [data-mode="dark"] .dataTables_length label { color: var(--wg-text-muted) !important; } /* ============================================================================= STATUS FILTER PILLS (toolbar filters) ============================================================================= */ [data-mode="dark"] .quotes-status-pill, [data-mode="dark"] .ccn-status-pill, [data-mode="dark"] .scn-status-pill, [data-mode="dark"] .prodjobs-status-pill, [data-mode="dark"] .assets-status-pill, [data-mode="dark"] .invoices-status-filters .btn, [data-mode="dark"] .todo-status-pill { background: var(--wg-filter-bg) !important; color: var(--wg-filter-text) !important; border-color: transparent !important; } [data-mode="dark"] .quotes-status-pill:hover, [data-mode="dark"] .ccn-status-pill:hover, [data-mode="dark"] .scn-status-pill:hover, [data-mode="dark"] .prodjobs-status-pill:hover, [data-mode="dark"] .assets-status-pill:hover, [data-mode="dark"] .invoices-status-filters .btn:hover, [data-mode="dark"] .todo-status-pill:hover { background: var(--wg-filter-hover-bg) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .quotes-status-pill.is-active, [data-mode="dark"] .ccn-status-pill.is-active, [data-mode="dark"] .scn-status-pill.is-active, [data-mode="dark"] .prodjobs-status-pill.is-active, [data-mode="dark"] .assets-status-pill.is-active, [data-mode="dark"] .invoices-status-filters .btn.is-active, [data-mode="dark"] .todo-status-pill.is-active { background: var(--wg-filter-active-bg) !important; color: var(--wg-filter-active-text) !important; border-color: var(--wg-filter-active-border) !important; } /* ============================================================================= STATUS BADGES (in-table pills) ============================================================================= */ [data-mode="dark"] .status-pill--neutral, [data-mode="dark"] .purchase-status-badge-draft, [data-mode="dark"] .ccn-status-badge-draft, [data-mode="dark"] .scn-status-badge-draft { background: var(--wg-pill-neutral-bg) !important; color: var(--wg-pill-neutral-text) !important; } [data-mode="dark"] .status-pill--success, [data-mode="dark"] .purchase-status-badge-approved, [data-mode="dark"] .ccn-status-badge-approved, [data-mode="dark"] .scn-status-badge-approved { background: var(--wg-pill-success-bg) !important; color: var(--wg-pill-success-text) !important; } [data-mode="dark"] .status-pill--danger { background: var(--wg-pill-danger-bg) !important; color: var(--wg-pill-danger-text) !important; } [data-mode="dark"] .status-pill--warning { background: var(--wg-pill-warning-bg) !important; color: var(--wg-pill-warning-text) !important; } [data-mode="dark"] .status-pill--primary, [data-mode="dark"] .purchase-status-badge-received { background: var(--wg-pill-primary-bg) !important; color: var(--wg-pill-primary-text) !important; } [data-mode="dark"] .status-pill--info { background: var(--wg-pill-info-bg) !important; color: var(--wg-pill-info-text) !important; } /* ============================================================================= ROW TEXT (purchase-row-*, project-cell-*, todo-name-*, etc.) ============================================================================= */ [data-mode="dark"] .purchase-row-primary, [data-mode="dark"] .purchase-row-primary a, [data-mode="dark"] .project-cell__no { color: var(--wg-link) !important; } [data-mode="dark"] .purchase-row-primary a:hover, [data-mode="dark"] .project-cell__no:hover { color: var(--wg-link-hover) !important; } [data-mode="dark"] .purchase-row-secondary, [data-mode="dark"] .purchase-row-secondary a, [data-mode="dark"] .project-cell__name, [data-mode="dark"] .todo-name-primary, [data-mode="dark"] .owner-cell__name { color: var(--wg-text-primary) !important; } [data-mode="dark"] .purchase-row-meta, [data-mode="dark"] .purchase-row-meta a, [data-mode="dark"] .project-cell__client, [data-mode="dark"] .todo-name-meta, [data-mode="dark"] .purchase-row-people-line { color: var(--wg-text-faint) !important; } [data-mode="dark"] .purchase-row-label, [data-mode="dark"] .purchase-row-date-line, [data-mode="dark"] .purchase-row-people-line strong { color: var(--wg-text-muted) !important; } [data-mode="dark"] .purchase-row-date-value, [data-mode="dark"] .purchase-table-value-total, [data-mode="dark"] .project-due-date-text, [data-mode="dark"] .project-progress__value, [data-mode="dark"] .todo-date-text, [data-mode="dark"] .todo-user-cell { color: var(--wg-text-secondary) !important; } /* ============================================================================= FORM INPUTS & SEARCH ============================================================================= */ [data-mode="dark"] .form-control, [data-mode="dark"] .select2-container--default .select2-selection--single { background-color: var(--wg-input-bg) !important; border-color: var(--wg-input-border) !important; color: var(--wg-input-text) !important; } [data-mode="dark"] .form-control:focus { border-color: var(--wg-input-focus-border) !important; box-shadow: 0 0 0 2px var(--wg-input-focus-ring) !important; background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--wg-input-text) !important; } [data-mode="dark"] .select2-dropdown { background-color: var(--wg-input-bg) !important; border-color: var(--wg-input-border) !important; } [data-mode="dark"] .select2-results__option { color: var(--wg-text-body) !important; } [data-mode="dark"] .select2-results__option--highlighted { background-color: var(--wg-bg-hover) !important; color: var(--wg-text-primary) !important; } /* --- Select2 MULTIPLE --- */ [data-mode="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--wg-input-bg) !important; border-color: var(--wg-input-border) !important; color: var(--wg-input-text) !important; } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--wg-bg-hover) !important; border-color: var(--wg-input-border) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--wg-text-muted) !important; border-right-color: var(--wg-input-border) !important; } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--wg-text-primary) !important; background-color: transparent !important; } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-search__field { color: var(--wg-input-text) !important; } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-search__field::placeholder { color: var(--wg-text-muted) !important; } [data-mode="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--wg-input-focus-border) !important; box-shadow: 0 0 0 2px var(--wg-input-focus-ring) !important; } [data-mode="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--wg-input-bg) !important; border-color: var(--wg-input-border) !important; color: var(--wg-input-text) !important; } /* ============================================================================= TOOLBAR BUTTONS (dt-toolbar-btn, dt-colvis-btn) ============================================================================= */ [data-mode="dark"] .dt-toolbar .dt-button.dt-toolbar-btn, [data-mode="dark"] .dt-toolbar .dt-button.dt-colvis-btn, [data-mode="dark"] .dt-colvis-btn, [data-mode="dark"] .todo-btn-secondary { background: var(--wg-toolbar-btn-bg) !important; border-color: var(--wg-toolbar-btn-border) !important; color: var(--wg-toolbar-btn-text) !important; } [data-mode="dark"] .dt-toolbar .dt-button.dt-toolbar-btn:hover, [data-mode="dark"] .dt-toolbar .dt-button.dt-colvis-btn:hover, [data-mode="dark"] .dt-colvis-btn:hover, [data-mode="dark"] .todo-btn-secondary:hover { background: var(--wg-toolbar-btn-hover) !important; color: var(--wg-text-primary) !important; } /* Column visibility dropdown */ [data-mode="dark"] div.dt-button-collection { background: var(--wg-bg-surface) !important; border-color: var(--wg-border-medium) !important; box-shadow: var(--wg-shadow-lg) !important; } [data-mode="dark"] div.dt-button-collection .dt-button { color: var(--wg-text-body) !important; } [data-mode="dark"] div.dt-button-collection .dt-button:hover { background: var(--wg-bg-hover) !important; color: var(--wg-text-primary) !important; } [data-mode="dark"] div.dt-button-collection .dt-button.active { background: var(--wg-brand-light) !important; color: var(--wg-filter-active-text) !important; } /* ============================================================================= PROGRESS BARS (project dashboards) ============================================================================= */ [data-mode="dark"] .project-progress__bar { background: var(--wg-progress-track) !important; } /* ============================================================================= FOOTER ============================================================================= */ [data-mode="dark"] .m-footer { background-color: var(--wg-bg-card) !important; border-top: 1px solid var(--wg-border) !important; } [data-mode="dark"] .m-footer .m-footer__wrapper { color: var(--wg-text-faint) !important; } /* ============================================================================= LINKS ============================================================================= */ [data-mode="dark"] a { color: var(--wg-link); } [data-mode="dark"] a:hover { color: var(--wg-link-hover); } /* ============================================================================= MODALS ============================================================================= */ [data-mode="dark"] .modal-content { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border) !important; color: var(--wg-text-primary) !important; } [data-mode="dark"] .modal-header { border-bottom-color: var(--wg-border) !important; } [data-mode="dark"] .modal-footer { background-color: var(--wg-bg-card) !important; border-top-color: var(--wg-border) !important; } [data-mode="dark"] .modal-title { color: var(--wg-text-heading) !important; } [data-mode="dark"] .modal .close, [data-mode="dark"] .modal button.close { color: var(--wg-text-secondary) !important; text-shadow: none !important; opacity: 0.7; } [data-mode="dark"] .modal .close:hover, [data-mode="dark"] .modal button.close:hover { color: var(--wg-text-primary) !important; opacity: 1; } /* ============================================================================= GENERAL BOOTSTRAP OVERRIDES ============================================================================= */ [data-mode="dark"] .card { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .table { color: var(--wg-text-body) !important; } [data-mode="dark"] .table thead th { border-bottom-color: var(--wg-border) !important; color: var(--wg-text-muted) !important; } [data-mode="dark"] .table td, [data-mode="dark"] .table th { border-top-color: var(--wg-border-light) !important; } [data-mode="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--wg-bg-surface) !important; } [data-mode="dark"] .table-bordered { border-color: var(--wg-border-light) !important; } [data-mode="dark"] .table-bordered td, [data-mode="dark"] .table-bordered th { border-color: var(--wg-border-light) !important; } [data-mode="dark"] .btn-outline-secondary { color: var(--wg-text-body) !important; border-color: var(--wg-border-medium) !important; } [data-mode="dark"] .btn-outline-secondary:hover { background-color: var(--wg-bg-hover) !important; color: var(--wg-text-primary) !important; } /* Disabled inputs */ [data-mode="dark"] .form-control[readonly], [data-mode="dark"] .form-control:disabled { background-color: var(--wg-input-disabled-bg) !important; color: var(--wg-text-faint) !important; } /* ============================================================================= SCROLLBAR (Webkit browsers) ============================================================================= */ [data-mode="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-mode="dark"] ::-webkit-scrollbar-track { background: var(--wg-bg-card); } [data-mode="dark"] ::-webkit-scrollbar-thumb { background: var(--wg-scroll-thumb); border-radius: 999px; } [data-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--wg-scroll-thumb-hover); } /* ============================================================================= INTEGRATION CARDS (Integrations page – partner logos need light bg) ============================================================================= */ [data-mode="dark"] .integrationCard { background-color: #ffffff !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .integrationCard:hover { border-color: var(--wg-border-medium) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* ============================================================================= SALES ACTIONS PILLS (.sa-pill on Sales > Activities page) ============================================================================= */ [data-mode="dark"] .sa-pill { color: var(--wg-text-body) !important; border-color: var(--wg-border-medium) !important; } [data-mode="dark"] .sa-pill:hover { color: var(--wg-text-primary) !important; background: var(--wg-bg-hover) !important; } [data-mode="dark"] .sa-pill.active { background: var(--wg-bg-surface) !important; color: var(--wg-text-primary) !important; border-color: var(--wg-text-primary) !important; } /* ============================================================================= SALES ACTIONS CARDS & CONTENT ============================================================================= */ [data-mode="dark"] .sa-filter-group .btn-group .btn { background: var(--wg-bg-surface) !important; color: var(--wg-text-body) !important; border-color: var(--wg-border-medium) !important; } [data-mode="dark"] .sa-filter-group .btn-group .btn.active { background: var(--wg-brand) !important; color: #fff !important; } /* ============================================================================= DASHBOARD PAGINATION (pagination circles on table widgets) ============================================================================= */ [data-mode="dark"] .dataTables_paginate .paginate_button { color: var(--wg-text-muted) !important; background: var(--wg-bg-surface) !important; border-color: var(--wg-border) !important; } [data-mode="dark"] .dataTables_paginate .paginate_button:hover { background: var(--wg-bg-hover) !important; color: var(--wg-text-primary) !important; border-color: var(--wg-border-medium) !important; } [data-mode="dark"] .dataTables_paginate .paginate_button.current { background: var(--wg-brand-light) !important; color: var(--wg-filter-active-text) !important; border-color: var(--wg-brand-border) !important; } [data-mode="dark"] .dataTables_paginate .paginate_button.disabled { color: var(--wg-text-faint) !important; background: transparent !important; } /* ============================================================================= PIPELINE BAR (Sales Actions pipeline summary) ============================================================================= */ [data-mode="dark"] .sa-pipeline { background: var(--wg-bg-card) !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .sa-pipeline-label, [data-mode="dark"] .sa-pipeline-sublabel { color: var(--wg-text-muted) !important; } [data-mode="dark"] .sa-pipeline-value { color: var(--wg-text-heading) !important; } /* ============================================================================= ACTIVITY CARDS (Sales Actions activity summary KPIs) ============================================================================= */ [data-mode="dark"] .sa-activity-card { background: var(--wg-bg-card) !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .sa-activity-card .sa-activity-label { color: var(--wg-text-muted) !important; } [data-mode="dark"] .sa-activity-card .sa-activity-value { color: var(--wg-text-heading) !important; } /* ============================================================================= RECOMMENDATIONS PANEL (Sales Actions sidebar) ============================================================================= */ [data-mode="dark"] .sa-recommendation-card { background: var(--wg-bg-surface) !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .sa-recommendation-card:hover { border-color: var(--wg-border-medium) !important; } /* ============================================================================= TIMESHEET FILTER TABS (Approved / Draft / Unapproved / All Timesheets) ============================================================================= */ [data-mode="dark"] .timesheet-filter-tab, [data-mode="dark"] .ts-filter-tab { background: var(--wg-bg-surface) !important; color: var(--wg-text-body) !important; border-color: var(--wg-border-medium) !important; } [data-mode="dark"] .timesheet-filter-tab.active, [data-mode="dark"] .ts-filter-tab.active { background: var(--wg-brand) !important; color: #fff !important; } /* Nav tabs - bright white active tab in dark mode */ [data-mode="dark"] .nav-tabs .nav-link.active { background-color: var(--wg-bg-card) !important; color: var(--wg-text-primary) !important; border-color: var(--wg-border-medium) var(--wg-border-medium) transparent !important; } [data-mode="dark"] .nav-tabs .nav-link { color: var(--wg-text-muted) !important; } [data-mode="dark"] .nav-tabs .nav-link:hover:not(.active) { color: var(--wg-text-body) !important; border-color: var(--wg-border-light) var(--wg-border-light) var(--wg-border-medium) !important; } [data-mode="dark"] .nav-tabs { border-bottom-color: var(--wg-border-medium) !important; } /* Dashboard widgets - portlet body overflow fix */ [data-mode="dark"] .dashboard-widget .m-portlet { overflow: hidden !important; } /* Dashboard widgets - prevent white flash during load */ [data-mode="dark"] .dashboard-widget-placeholder .m-portlet, [data-mode="dark"] .dashboard-widget .m-portlet { background-color: var(--wg-bg-card) !important; } /* Skeleton loading animation - dark mode colours */ [data-mode="dark"] .skeleton { animation: skeleton-loading-dark 0.8s linear infinite alternate !important; } @keyframes skeleton-loading-dark { 0% { background-color: hsl(220, 15%, 18%); } 100% { background-color: hsl(220, 15%, 22%); } } /* Flot chart legend - white background overlay covers chart lines */ [data-mode="dark"] .legend > div { background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .legend table { color: var(--wg-text-muted) !important; } [data-mode="dark"] .legendLabel { color: var(--wg-text-muted) !important; } /* ============================================================================= PROJECT DETAIL — Legacy Metronic portlet classes & widgets ============================================================================= */ /* Old-style .portlet (not .m-portlet) used on Project Detail pages */ [data-mode="dark"] .portlet, [data-mode="dark"] .portlet.box, [data-mode="dark"] .portlet.box.green { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border-light) !important; } [data-mode="dark"] .portlet .portlet-title { background-color: var(--wg-bg-surface) !important; border-bottom-color: var(--wg-border) !important; color: var(--wg-text-heading) !important; } [data-mode="dark"] .portlet .portlet-title .caption { color: var(--wg-text-heading) !important; } [data-mode="dark"] .portlet .portlet-body { background-color: var(--wg-bg-card) !important; color: var(--wg-text-body) !important; } /* m-widget24 on Project Detail (summary widgets) */ [data-mode="dark"] .m-widget24 { background-color: var(--wg-bg-card) !important; } [data-mode="dark"] .m-widget24 .m-widget24__title { color: var(--wg-text-heading) !important; } [data-mode="dark"] .m-widget24 .m-widget24__desc { color: var(--wg-text-muted) !important; } /* btn-metal — legacy Metronic button variant */ [data-mode="dark"] .btn-metal, [data-mode="dark"] .btn.btn-metal { background-color: var(--wg-bg-surface) !important; border-color: var(--wg-border-medium) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .btn-metal:hover, [data-mode="dark"] .btn.btn-metal:hover { background-color: var(--wg-bg-hover) !important; color: var(--wg-text-heading) !important; } /* btn-default in dark mode */ [data-mode="dark"] .btn-default, [data-mode="dark"] .btn.btn-default { background-color: var(--wg-bg-surface) !important; border-color: var(--wg-border-medium) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .btn-default:hover, [data-mode="dark"] .btn.btn-default:hover { background-color: var(--wg-bg-hover) !important; color: var(--wg-text-heading) !important; } /* green-meadow action buttons on Project Detail */ [data-mode="dark"] .green-meadow { background-color: var(--wg-brand) !important; border-color: var(--wg-brand) !important; color: var(--wg-white) !important; } [data-mode="dark"] .green-meadow:hover { background-color: var(--wg-brand-hover) !important; border-color: var(--wg-brand-hover) !important; } /* Progress bars inside project widgets */ [data-mode="dark"] .m-widget24 .progress { background-color: var(--wg-border) !important; } /* Editable fields (x-editable / bootstrap-editable) */ [data-mode="dark"] .editable-click, [data-mode="dark"] a.editable { color: var(--wg-link) !important; border-bottom-color: var(--wg-border-medium) !important; } /* Tab panes on project detail pages */ [data-mode="dark"] .tab-content { background-color: var(--wg-bg-card) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .nav-tabs { border-bottom-color: var(--wg-border) !important; } [data-mode="dark"] .nav-tabs .nav-link { color: var(--wg-text-muted) !important; } [data-mode="dark"] .nav-tabs .nav-link.active { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border) var(--wg-border) var(--wg-bg-card) !important; color: var(--wg-text-heading) !important; } [data-mode="dark"] .nav-tabs .nav-link:hover:not(.active) { border-color: var(--wg-border-light) var(--wg-border-light) var(--wg-border) !important; color: var(--wg-text-primary) !important; } /* ── Dropzone / File Upload ───────────────────────────────── */ [data-mode="dark"] .dropzone, [data-mode="dark"] .m-dropzone { background-color: var(--wg-bg-card) !important; border-color: var(--wg-border) !important; } [data-mode="dark"] .dropzone .dz-message, [data-mode="dark"] .m-dropzone .m-dropzone__msg { color: var(--wg-text-body) !important; } [data-mode="dark"] .m-dropzone__msg-title { color: var(--wg-text-heading) !important; } [data-mode="dark"] .m-dropzone__msg-desc { color: var(--wg-text-muted) !important; } [data-mode="dark"] .dropzone .dz-preview .dz-details { background-color: var(--wg-bg-surface) !important; color: var(--wg-text-body) !important; } /* ── Summernote Rich Text Editor ──────────────────────────── */ [data-mode="dark"] .note-editor.note-frame { border-color: var(--wg-border) !important; } [data-mode="dark"] .note-editor .note-toolbar { background-color: var(--wg-bg-surface) !important; border-bottom-color: var(--wg-border) !important; } [data-mode="dark"] .note-editor .note-toolbar .note-btn { background-color: transparent !important; border-color: var(--wg-border-light) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .note-editor .note-toolbar .note-btn:hover { background-color: var(--wg-bg-hover) !important; } [data-mode="dark"] .note-editor .note-editing-area .note-editable { background-color: var(--wg-bg-card) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .note-editor .note-statusbar { background-color: var(--wg-bg-surface) !important; border-top-color: var(--wg-border) !important; } [data-mode="dark"] .note-editor .note-statusbar .note-resizebar .note-icon-bar { border-top-color: var(--wg-border-medium) !important; } /* ── Description textarea ─────────────────────────────────── */ [data-mode="dark"] textarea.lg-description-display-transparent { color: var(--wg-text-body) !important; } /* ── Row-striped project detail grid ──────────────────────── */ [data-mode="dark"] .row-striped .th { color: var(--wg-text-muted) !important; } [data-mode="dark"] .row-striped .td { color: var(--wg-text-body) !important; } /* ── Widget hover tooltips ────────────────────────────────── */ [data-mode="dark"] .m-widget24:hover .hover-content { background-color: var(--wg-bg-surface) !important; border-color: var(--wg-border) !important; color: var(--wg-text-body) !important; } /* Widget inline colour overrides — boost contrast on dark bg */ [data-mode="dark"] .m-widget24 span[style*="color:red"], [data-mode="dark"] .m-widget24 span[style*="color: red"] { color: #f87171 !important; /* red-400: bright enough on dark */ } [data-mode="dark"] .m-widget24 span[style*="color:green"], [data-mode="dark"] .m-widget24 span[style*="color: green"] { color: #4ade80 !important; /* green-400: readable on dark */ } /* Widget title + percentage text */ [data-mode="dark"] .m-widget24__title { color: var(--wg-text-heading) !important; } [data-mode="dark"] .m-widget24__item { color: var(--wg-text-body) !important; } /* ── Inline-red validation / error text ───────────────────── */ /* Covers stock-usage SOH warnings and any other inline red spans */ [data-mode="dark"] span[style*="color:red"], [data-mode="dark"] span[style*="color: red"], [data-mode="dark"] .CumulativeQtyInvalidError { color: #f87171 !important; /* red-400: readable on dark */ } /* ── Stock sale line item insufficient-qty rows ───────────── */ [data-mode="dark"] .m-portlet table tbody tr.stock-row-insufficient td, [data-mode="dark"] .m-portlet table tbody tr.stock-row-insufficient td a, [data-mode="dark"] table tbody tr.stock-row-insufficient td, [data-mode="dark"] table tbody tr.stock-row-insufficient td a { color: #f87171 !important; /* red-400: readable on dark */ } [data-mode="dark"] .m-portlet table tbody tr.stock-row-dispatched td, [data-mode="dark"] .m-portlet table tbody tr.stock-row-dispatched td a, [data-mode="dark"] table tbody tr.stock-row-dispatched td, [data-mode="dark"] table tbody tr.stock-row-dispatched td a { color: #4ade80 !important; /* green-400: readable on dark */ } /* ============================================================================= NOTIFICATIONS DROPDOWN ============================================================================= */ [data-mode="dark"] .m-topbar__notifications .m-dropdown__inner { background-color: var(--wg-bg-surface) !important; border: 1px solid var(--wg-border) !important; } [data-mode="dark"] .m-topbar__notifications .m-dropdown__arrow { border-bottom-color: var(--wg-bg-surface) !important; } [data-mode="dark"] .m-topbar__notifications .m-dropdown__body, [data-mode="dark"] .m-topbar__notifications .m-dropdown__content { background-color: var(--wg-bg-surface) !important; color: var(--wg-text-body) !important; } [data-mode="dark"] .m-topbar__notifications .m-dropdown__content a { color: var(--wg-link) !important; } [data-mode="dark"] .m-topbar__notifications .m-dropdown__content hr { border-color: var(--wg-border) !important; } /* Notification items */ [data-mode="dark"] div.user-notification-item .m-list-timeline__text { color: var(--wg-text-muted) !important; } [data-mode="dark"] div.user-notification-item.user-notification-item-unread .m-list-timeline__text { color: var(--wg-text-body) !important; } [data-mode="dark"] .m-topbar__notifications .m-list-timeline__time { color: var(--wg-text-muted) !important; } [data-mode="dark"] .m-topbar__notifications .set-notification-as-read { color: var(--wg-link) !important; } /* "See all notifications" footer */ [data-mode="dark"] .m-topbar__notifications .notifications-footer { background-color: var(--wg-bg-surface) !important; } [data-mode="dark"] .m-topbar__notifications .notification-empty-text { color: var(--wg-text-muted) !important; } /* Timeline badge dot — colour lives on the ::before pseudo-element */ [data-mode="dark"] .m-topbar__notifications .m-list-timeline__badge--success:before { background-color: var(--wg-emerald-400, #34d399) !important; } /* ---------- Product search results ---------- */ [data-mode="dark"] .productLineSearchResult, [data-mode="dark"] .productLineSearchResultV2, [data-mode="dark"] .percentageLineSearchResult { color: var(--wg-text-body, #cbd5e1) !important; border-color: var(--wg-border, #334155) !important; } [data-mode="dark"] .productLineSearchResult:nth-of-type(odd), [data-mode="dark"] .productLineSearchResultV2:nth-of-type(odd), [data-mode="dark"] .percentageLineSearchResult:nth-of-type(odd) { background-color: var(--wg-bg-surface, #1e293b) !important; } [data-mode="dark"] .productLineSearchResult:nth-of-type(even), [data-mode="dark"] .productLineSearchResultV2:nth-of-type(even), [data-mode="dark"] .percentageLineSearchResult:nth-of-type(even) { background-color: var(--wg-bg-base, #0f172a) !important; } [data-mode="dark"] .productLineSearchResult:hover, [data-mode="dark"] .productLineSearchResultV2:hover, [data-mode="dark"] .percentageLineSearchResult:hover { border-color: var(--wg-brand, #5867dd) !important; }