/**
* App-wide theme tokens + dark mode (toggle via ThemeFactory / header).
* html[data-theme="dark"] is set from localStorage key wp_app_theme.
*/
:root {
color-scheme: light;
--app-font: "Open Sans", "Segoe UI", system-ui, sans-serif;
--app-radius: 10px;
--app-radius-sm: 8px;
/* Brand teal — primary actions, focus, row hovers, links */
--app-accent: #0d9488;
--app-accent-hover: #0f766e;
--app-accent-dim: rgba(13, 148, 136, 0.14);
--app-link: #0f766e;
--app-link-hover: #115e59;
/* Text on filled accent controls (pagination active, pills, etc.) */
--app-on-accent: #ffffff;
/* Text selection + keyboard focus rings */
--app-selection-bg: rgba(13, 148, 136, 0.28);
--app-selection-color: #0f172a;
--app-focus-ring: 0 0 0 2px rgba(13, 148, 136, 0.4);
--app-bg-body: #e4e9ef;
--app-bg-content: #f4f6f9;
--app-bg-card: #ffffff;
--app-bg-elevated: #f8fafc;
--app-text: #1e293b;
--app-text-secondary: #475569;
--app-text-muted: #64748b;
--app-border: rgba(15, 23, 42, 0.09);
--app-border-strong: rgba(15, 23, 42, 0.14);
--app-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
--app-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.06);
/* Quick sidebar panel (Metronic defaults are always “dark slate”) */
--app-qs-bg: #ffffff;
--app-qs-elevated: #f1f5f9;
--app-qs-border: rgba(15, 23, 42, 0.12);
--app-qs-text: #1e293b;
--app-qs-text-muted: #64748b;
--app-qs-tab-faint: rgba(13, 148, 136, 0.35);
--app-qs-row-hover: rgba(13, 148, 136, 0.12);
--app-qs-dropdown-bg: #f8fafc;
--app-qs-dropdown-hover: #e2e8f0;
--app-qs-message-bg: #e2e8f0;
--app-qs-message-text: #475569;
--app-qs-scroll-rail: rgba(15, 23, 42, 0.06);
--app-qs-scroll-bar: rgba(15, 23, 42, 0.22);
--app-qs-toggler-hover: rgba(15, 23, 42, 0.08);
/* Native / material checkboxes (overridden in dark block) */
--md-checkbox-accent: #0d9488;
--md-checkbox-accent-hover: #0f766e;
}
html[data-theme="dark"] {
color-scheme: dark;
--app-bg-body: #0a0e12;
--app-bg-content: #0f1419;
--app-bg-card: #161d26;
--app-bg-elevated: #1e2732;
--app-text: #e8eaed;
--app-text-secondary: #c4cad4;
--app-text-muted: #8b95a5;
--app-border: rgba(255, 255, 255, 0.07);
--app-border-strong: rgba(255, 255, 255, 0.11);
--app-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
--app-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04);
--app-accent: #2dd4bf;
--app-accent-hover: #5eead4;
--app-accent-dim: rgba(45, 212, 191, 0.18);
--app-link: #5eead4;
--app-link-hover: #99f6e4;
--app-on-accent: #042f2e;
--app-selection-bg: rgba(45, 212, 191, 0.4);
--app-selection-color: #0a0e12;
--app-focus-ring: 0 0 0 2px rgba(45, 212, 191, 0.5);
--app-qs-bg: #12181f;
--app-qs-elevated: #161d26;
--app-qs-border: rgba(255, 255, 255, 0.09);
--app-qs-text: #e8eaed;
--app-qs-text-muted: #8b95a5;
--app-qs-tab-faint: rgba(45, 212, 191, 0.32);
--app-qs-row-hover: rgba(255, 255, 255, 0.06);
--app-qs-dropdown-bg: #1e2732;
--app-qs-dropdown-hover: rgba(45, 212, 191, 0.16);
--app-qs-message-bg: #1e2732;
--app-qs-message-text: #c4cad4;
--app-qs-scroll-rail: rgba(255, 255, 255, 0.06);
--app-qs-scroll-bar: rgba(255, 255, 255, 0.2);
--app-qs-toggler-hover: rgba(255, 255, 255, 0.08);
/* Table row hover — subtle brand tint */
--app-table-row-hover: rgba(45, 212, 191, 0.1);
/* Checkboxes — shared with custom-app.css material / native accent */
--md-checkbox-accent: #2dd4bf;
--md-checkbox-accent-hover: #5eead4;
--md-checkbox-unchecked-border: rgba(255, 255, 255, 0.3);
--md-checkbox-unchecked-hover: rgba(255, 255, 255, 0.48);
--md-checkbox-surface: var(--app-bg-elevated);
}
body {
font-family: var(--app-font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--app-selection-bg);
color: var(--app-selection-color);
}
::-moz-selection {
background: var(--app-selection-bg);
color: var(--app-selection-color);
}
.page-content a:not(.btn):not(.dropdown-toggle):not(.nav-link):not(.list-group-item):not(.sales-dash-card__footer):not(.quick-link-card):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql) {
color: var(--app-link);
}
.page-content a:not(.btn):not(.dropdown-toggle):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql):hover {
color: var(--app-link-hover);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--app-text);
}
hr {
border-top-color: var(--app-border);
}
/* Shell — light refinements */
.page-wrapper,
.page-container {
background: var(--app-bg-body) !important;
}
.page-content-wrapper {
background: transparent !important;
}
.page-content-white .page-content,
.page-content {
background: var(--app-bg-content) !important;
min-height: calc(100vh - 100px);
}
.page-bar {
position: relative;
z-index: 10;
background: transparent !important;
border-bottom: 1px solid var(--app-border) !important;
padding-bottom: 2px;
margin-bottom: 10px;
}
.page-content-white .page-bar,
.page-container-bg-solid .page-bar {
margin-top: 0 !important;
}
.page-title,
.page-breadcrumb > li > a,
.page-breadcrumb > li > span {
color: var(--app-text) !important;
}
.page-breadcrumb > li > i {
color: var(--app-text-muted) !important;
}
/* Breadcrumb trail: Metronic uses 11px vertical padding on ul — too tall for dense app chrome */
.page-bar .page-breadcrumb {
padding: 4px 8px !important;
margin: 0 !important;
}
.page-content-white .page-bar .page-breadcrumb,
.page-container-bg-solid .page-bar .page-breadcrumb {
padding: 4px 0 !important;
}
.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span {
font-size: 13px;
line-height: 1.3;
}
.page-content-white .page-bar .page-toolbar,
.page-container-bg-solid .page-bar .page-toolbar {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.page-footer {
background: var(--app-bg-card) !important;
border-top: 1px solid var(--app-border) !important;
color: var(--app-text-muted) !important;
}
/* Theme file (light2.css) uses #333 / white — keep inner text on tokens */
.page-footer .page-footer-inner {
color: inherit !important;
}
.page-footer-fixed .page-footer {
background-color: var(--app-bg-card) !important;
}
/* Quick sidebar — theme-aligned (overrides Metronic layout.css slate panel) */
.page-quick-sidebar-wrapper {
background: var(--app-qs-bg) !important;
color: var(--app-qs-text-muted) !important;
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.12);
}
html[data-theme="dark"] .page-quick-sidebar-wrapper {
box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55);
}
.page-quick-sidebar-wrapper .page-quick-sidebar {
background: var(--app-qs-bg) !important;
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li > a {
color: var(--app-qs-text-muted) !important;
border-bottom-color: var(--app-qs-tab-faint) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li.active > a,
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li:hover > a {
color: var(--app-qs-text) !important;
border-bottom-color: var(--app-accent) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li.open > a.dropdown-toggle {
color: var(--app-qs-text-muted) !important;
border-bottom-color: var(--app-accent) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu {
background: var(--app-qs-dropdown-bg) !important;
box-shadow: var(--app-shadow) !important;
border: 1px solid var(--app-qs-border) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu:before {
border-bottom-color: var(--app-qs-dropdown-bg) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu:after {
border-bottom-color: var(--app-qs-dropdown-bg) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu > li > a {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu > li > a > i {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu > li:hover > a {
background: var(--app-qs-dropdown-hover) !important;
color: var(--app-qs-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu > li.active > a {
background: var(--app-qs-elevated) !important;
color: var(--app-qs-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .nav-tabs > li .dropdown-menu > li.divider {
background-color: var(--app-qs-border) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .list-heading {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .list-items > li {
border-bottom-color: var(--app-qs-border) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .list-items > li:hover {
background: var(--app-qs-row-hover) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-nav .page-quick-sidebar-back-to-list {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-nav .page-quick-sidebar-back-to-list:hover {
color: var(--app-accent) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-users .media-list .media .media-body .media-heading {
color: var(--app-qs-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-users .media-list .media .media-body .media-heading-sub {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-users .media-list .media .media-body .media-heading-small {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post .body {
color: var(--app-qs-message-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post .name,
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post .datetime {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post .message {
color: var(--app-qs-message-text) !important;
background: var(--app-qs-message-bg) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post.in .message .arrow {
border-right-color: var(--app-qs-message-bg) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat .page-quick-sidebar-chat-user .page-quick-sidebar-chat-user-messages .post.out .message .arrow {
border-left-color: var(--app-qs-message-bg) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-alerts .page-quick-sidebar-alerts-list .feeds li a {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-alerts .page-quick-sidebar-alerts-list .feeds li a .desc {
color: var(--app-qs-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-alerts .page-quick-sidebar-alerts-list .feeds li a .date {
color: var(--app-qs-text-muted) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-settings .page-quick-sidebar-settings-list .list-items li {
color: var(--app-qs-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-settings .page-quick-sidebar-settings-list .list-items li .form-control {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
color: var(--app-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat-user-form .form-control {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
color: var(--app-text) !important;
}
.page-quick-sidebar-wrapper .page-quick-sidebar .page-quick-sidebar-chat-user-form .input-group-addon {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-muted) !important;
}
.page-quick-sidebar-wrapper .btn.green {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: var(--app-on-accent) !important;
}
html[data-theme="dark"] .page-quick-sidebar-wrapper .btn.green {
color: var(--app-on-accent) !important;
}
.page-quick-sidebar-settings .list-items.borderless > li {
padding-top: 8px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--app-qs-border) !important;
}
.page-quick-sidebar-settings .list-items.borderless > li:last-child {
border-bottom: none !important;
}
.app-qs-settings-row--retail {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.app-qs-settings-row__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.app-qs-settings-row__title {
font-weight: 700;
}
.app-qs-settings-row__hint {
font-size: 11px;
margin-top: 5px;
color: var(--app-qs-text-muted) !important;
}
.app-qs-settings-intro {
margin: -4px 0 12px !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: var(--app-qs-text-muted) !important;
}
.app-qs-settings-save-row {
margin-top: 16px;
padding: 14px 12px 18px;
border-top: 1px solid var(--app-qs-border);
}
.app-qs-settings-save-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px !important;
font-weight: 600;
border-radius: var(--app-radius-sm, 8px);
}
.page-quick-sidebar-notification-prefs .app-qs-npref-cat-title {
font-size: 13px;
font-weight: 600;
margin: 14px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--app-qs-border, #e5e5e5);
}
.page-quick-sidebar-notification-prefs .app-qs-npref-row {
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.page-quick-sidebar-notification-prefs .app-qs-npref-row__main {
margin-bottom: 8px;
}
.page-quick-sidebar-notification-prefs .app-qs-npref-row__label {
font-size: 13px;
font-weight: 600;
}
.page-quick-sidebar-notification-prefs .app-qs-npref-row__toggles {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
}
.page-quick-sidebar-notification-prefs .app-qs-npref-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--app-qs-text-muted, #666);
cursor: pointer;
margin: 0;
}
.page-quick-sidebar-notification-prefs .app-qs-npref-chip input {
margin: 0;
vertical-align: middle;
}
.page-quick-sidebar-tasks .app-qs-tasks-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
padding: 0 2px;
}
.page-quick-sidebar-tasks .app-qs-task-ul {
margin: 0;
padding: 0 4px 12px;
}
.page-quick-sidebar-tasks .app-qs-task-row {
padding: 10px 0;
border-bottom: 1px solid var(--app-qs-border, rgba(0, 0, 0, 0.08));
}
.page-quick-sidebar-tasks .app-qs-task-row__title {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: var(--app-qs-text, #333);
}
.page-quick-sidebar-tasks .app-qs-task-row__meta {
margin-top: 4px;
}
.page-quick-sidebar-tasks .app-qs-task-row__actions {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.page-quick-sidebar-tasks .label-xs {
font-size: 10px;
padding: 2px 5px;
vertical-align: middle;
margin-right: 4px;
}
.page-quick-sidebar-wrapper .slimScrollRail {
background: var(--app-qs-scroll-rail) !important;
}
.page-quick-sidebar-wrapper .slimScrollBar {
background: var(--app-qs-scroll-bar) !important;
}
.page-quick-sidebar-toggler {
background: transparent !important;
}
.page-quick-sidebar-toggler:hover {
background: var(--app-qs-toggler-hover) !important;
}
.page-quick-sidebar-open .page-quick-sidebar-toggler:hover {
background: var(--app-qs-toggler-hover) !important;
}
.page-quick-sidebar-toggler > i {
color: var(--app-text-muted) !important;
}
.page-quick-sidebar-open .page-quick-sidebar-toggler > i:hover,
.page-quick-sidebar-toggler > i:hover {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-quick-sidebar-open .page-quick-sidebar-toggler > i,
html[data-theme="dark"] .page-quick-sidebar-toggler > i {
color: var(--app-qs-text-muted) !important;
}
html[data-theme="dark"] .page-quick-sidebar-open .page-quick-sidebar-toggler > i:hover,
html[data-theme="dark"] .page-quick-sidebar-toggler > i:hover {
color: var(--app-qs-text) !important;
}
/* Portlets / panels */
.portlet {
border-radius: var(--app-radius) !important;
box-shadow: var(--app-shadow-soft) !important;
border: 1px solid var(--app-border) !important;
background: var(--app-bg-card) !important;
}
.portlet > .portlet-title {
border-bottom: 1px solid var(--app-border) !important;
background: transparent !important;
}
.portlet > .portlet-title > .caption {
color: var(--app-text) !important;
}
.portlet > .portlet-body {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary);
}
.panel {
border-radius: var(--app-radius) !important;
border-color: var(--app-border) !important;
background: var(--app-bg-card) !important;
}
.panel-heading,
.panel-title {
color: var(--app-text) !important;
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
.panel-body {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary);
}
/* Tables */
.table {
color: var(--app-text-secondary);
}
.table > thead > tr > th {
border-bottom-color: var(--app-border-strong) !important;
color: var(--app-text);
background: var(--app-bg-elevated) !important;
}
.table > tbody > tr > td {
border-top-color: var(--app-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
background-color: rgba(13, 148, 136, 0.045) !important;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: var(--app-accent-dim) !important;
}
/* Forms */
.form-control,
select.form-control,
textarea.form-control {
border-radius: var(--app-radius-sm) !important;
border-color: var(--app-border-strong) !important;
background: var(--app-bg-card) !important;
color: var(--app-text) !important;
}
.form-control:focus {
border-color: var(--app-accent) !important;
box-shadow: 0 0 0 3px var(--app-accent-dim) !important;
}
.input-group-addon {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-muted) !important;
border-radius: var(--app-radius-sm) !important;
}
.form-control-static {
color: var(--app-text-secondary);
}
.help-block,
.control-label,
.form-group label {
color: var(--app-text-muted);
}
/* Buttons */
.btn-default,
.btn.default {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn.default:hover,
.btn.default:focus {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
/* Semantic buttons & Metronic named variants (light theme) */
.btn-primary,
.btn.blue {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.blue:hover,
.btn.blue:focus,
.btn.blue:active {
background: #115e59 !important;
border-color: #134e4a !important;
color: #fff !important;
}
.btn-success,
.btn.green {
background: #059669 !important;
border-color: #047857 !important;
color: #fff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn.green:hover,
.btn.green:focus,
.btn.green:active {
background: #047857 !important;
border-color: #065f46 !important;
color: #fff !important;
}
.btn-info {
background: #0284c7 !important;
border-color: #0369a1 !important;
color: #fff !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
background: #0369a1 !important;
border-color: #075985 !important;
color: #fff !important;
}
.btn-warning,
.btn.yellow {
background: #d97706 !important;
border-color: #b45309 !important;
color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn.yellow:hover,
.btn.yellow:focus,
.btn.yellow:active {
background: #b45309 !important;
border-color: #92400e !important;
color: #fff !important;
}
.btn-danger,
.btn.red {
background: #dc2626 !important;
border-color: #b91c1c !important;
color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn.red:hover,
.btn.red:focus,
.btn.red:active {
background: #b91c1c !important;
border-color: #991b1b !important;
color: #fff !important;
}
.btn-link {
color: var(--app-link) !important;
}
.btn-link:hover,
.btn-link:focus {
color: var(--app-link-hover) !important;
}
/* Labels & badges (Bootstrap 3 — light theme) */
.label-default,
.badge-default {
background: var(--app-bg-elevated) !important;
color: var(--app-text-secondary) !important;
border: 1px solid var(--app-border-strong);
}
.label-primary,
.badge-primary {
background: var(--app-accent-hover) !important;
color: #fff !important;
}
.label-success,
.badge-success {
background: #047857 !important;
color: #fff !important;
}
.label-info,
.badge-info {
background: #0369a1 !important;
color: #fff !important;
}
.label-warning,
.badge-warning {
background: #b45309 !important;
color: #fff !important;
}
.label-danger,
.badge-danger {
background: #b91c1c !important;
color: #fff !important;
}
/* Pagination (light) */
.pagination > li > a,
.pagination > li > span {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-secondary) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: var(--app-on-accent) !important;
}
.pagination > .disabled > span,
.pagination > .disabled > a {
background: var(--app-bg-elevated) !important;
color: var(--app-text-muted) !important;
opacity: 0.65;
}
.pager li > a,
.pager li > span {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-secondary) !important;
}
.pager li > a:hover,
.pager li > a:focus {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
/* List group active + nav pills (light) */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background: rgba(13, 148, 136, 0.18) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
/* Modals */
.modal-content {
border-radius: var(--app-radius) !important;
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border) !important;
box-shadow: var(--app-shadow) !important;
}
.modal-header {
border-bottom-color: var(--app-border) !important;
color: var(--app-text);
}
.modal-body {
color: var(--app-text-secondary);
}
.modal-footer {
border-top-color: var(--app-border) !important;
background: var(--app-bg-elevated) !important;
}
/* Nav tabs */
.nav-tabs {
border-bottom-color: var(--app-border) !important;
}
.nav-tabs > li > a {
color: var(--app-text-muted);
border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
border-bottom-color: transparent !important;
color: var(--app-text) !important;
}
.tab-content {
background: transparent;
border: 1px solid var(--app-border);
border-top: none;
padding: 16px;
border-radius: 0 0 var(--app-radius-sm) var(--app-radius-sm);
}
/* Metronic uses higher-specificity rules with #fff on these wrappers */
.tabbable-custom > .tab-content,
.tabbable-bordered .tab-content {
background: transparent !important;
background-color: transparent !important;
}
/* Wells / notes */
.well {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary);
border-radius: var(--app-radius-sm) !important;
}
/* Text helpers */
.text-muted {
color: var(--app-text-muted) !important;
}
/* DataTables bootstrap */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: var(--app-text-muted) !important;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom-color: var(--app-border-strong) !important;
}
table.dataTable tbody tr {
background-color: var(--app-bg-card) !important;
}
table.dataTable tbody tr.selected > * {
box-shadow: inset 0 0 0 9999px var(--app-accent-dim) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
color: var(--app-text-secondary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: var(--app-on-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
/* Select2 — default + bootstrap theme, light & dark via tokens */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap .select2-selection--multiple {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
color: var(--app-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
color: var(--app-text-muted) !important;
}
/* Chevron is drawn on .select2-selection__arrow::after in custom-app.css; theme only adjusts color */
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow::after,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__arrow::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--bootstrap.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap.select2-container--focus .select2-selection--multiple {
border-color: var(--app-accent) !important;
box-shadow: var(--app-focus-ring) !important;
}
.select2-dropdown {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
border-radius: var(--app-radius-sm) !important;
box-shadow: var(--app-shadow-soft), var(--app-shadow) !important;
color: var(--app-text) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
background: var(--app-bg-elevated) !important;
border: 1px solid var(--app-border-strong) !important;
border-radius: var(--app-radius-sm) !important;
color: var(--app-text) !important;
}
.select2-container--default .select2-results__option,
.select2-container--bootstrap .select2-results__option {
color: var(--app-text-secondary) !important;
}
.select2-container--default .select2-results__option[aria-disabled="true"],
.select2-container--bootstrap .select2-results__option[aria-disabled="true"] {
color: var(--app-text-muted) !important;
opacity: 0.75;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
.select2-container--default .select2-selection__clear,
.select2-container--bootstrap .select2-selection__clear {
color: var(--app-text-muted) !important;
margin-right: 8px;
}
.select2-container--default .select2-selection__clear:hover,
.select2-container--bootstrap .select2-selection__clear:hover {
color: var(--app-accent) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
background: var(--app-bg-elevated) !important;
border: 1px solid var(--app-border-strong) !important;
color: var(--app-text) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
color: var(--app-text-muted) !important;
border-right-color: var(--app-border) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
color: var(--app-text) !important;
background: var(--app-accent-dim) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* Header theme toggle */
.app-theme-toggle {
cursor: pointer;
border-radius: 10px !important;
}
.app-theme-toggle > i {
font-size: 16px;
}
/* ========== Dark mode: Metronic + Bootstrap overrides ========== */
html[data-theme="dark"] body {
background-color: var(--app-bg-body) !important;
color: var(--app-text);
}
html[data-theme="dark"] .page-header.navbar {
background: linear-gradient(180deg, #1a222c 0%, #151c24 100%) !important;
border-bottom: 1px solid var(--app-border) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .page-header.navbar .page-logo {
background: transparent !important;
}
html[data-theme="dark"] .page-sidebar,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
background: linear-gradient(180deg, #151c24 0%, #12181f 100%) !important;
box-shadow: inset -1px 0 0 var(--app-border), 6px 0 28px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
border-top-color: transparent !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li > a > i,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li.open > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li.active > a,
html[data-theme="dark"] .page-sidebar .page-sidebar-menu > li.active.open > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a {
background: linear-gradient(135deg, #2a9d87 0%, #238b78 100%) !important;
color: #fff !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu .sub-menu,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
background: rgba(0, 0, 0, 0.2) !important;
border-left-color: rgba(45, 212, 191, 0.45) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu .sub-menu > li > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-sidebar .page-sidebar-menu li > a > .arrow:before,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow:before {
color: var(--app-text-muted) !important;
}
/* Dark: custom app-header block (custom-app.css) */
html[data-theme="dark"] .page-header.navbar.app-header,
body.theme-dark .page-header.navbar.app-header {
background: linear-gradient(180deg, #1a222c 0%, #151c24 100%) !important;
background-color: #151c24 !important;
background-image: linear-gradient(180deg, #1a222c 0%, #151c24 100%) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 24px rgba(0, 0, 0, 0.35) !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
/* Mobile / narrow: theme file + Metronic stack order can leave a light bar — force dark shell */
@media (max-width: 991px) {
html[data-theme="dark"] .page-header.navbar.navbar-fixed-top.app-header,
html[data-theme="dark"] .page-header.navbar.app-header,
body.theme-dark .page-header.navbar.navbar-fixed-top.app-header,
body.theme-dark .page-header.navbar.app-header {
background: linear-gradient(180deg, #1a222c 0%, #151c24 100%) !important;
background-color: #151c24 !important;
background-image: linear-gradient(180deg, #1a222c 0%, #151c24 100%) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .page-header-inner,
body.theme-dark .page-header.navbar.app-header .page-header-inner {
background: transparent !important;
}
/*
* light2 (and similar Metronic themes) set .top-menu to #F6F6F6 / #E1E1E1 on narrow
* viewports — that sits on top of the dark header and reads as a “light bar” behind icons.
*/
html[data-theme="dark"] .page-header.navbar.app-header .top-menu,
body.theme-dark .page-header.navbar.app-header .top-menu {
background: transparent !important;
background-color: transparent !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle {
background: transparent !important;
background-color: transparent !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
}
html[data-theme="dark"] .page-header.navbar.app-header .search-form .input-group {
background: rgba(0, 0, 0, 0.25) !important;
box-shadow: inset 0 0 0 1px var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .search-form .input-group .form-control {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .search-form .input-group .form-control::placeholder {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle > i,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle > i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle:hover,
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler.open .dropdown-toggle,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle:hover,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler.open .dropdown-toggle {
background-color: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle:hover > i,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-quick-sidebar-toggler .dropdown-toggle:hover > i {
color: var(--app-link) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
background-color: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-theme-toggle > i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-theme-toggle:hover {
background-color: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-theme-toggle:hover > i {
color: var(--app-link) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle > i,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle > i {
color: #a78bfa !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle:hover,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle:hover {
background-color: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle:hover > i,
body.theme-dark .page-header.navbar.app-header .top-menu .navbar-nav > li.app-header-icon-li > a.app-ai-assistant-toggle:hover > i {
color: var(--app-link) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown > .dropdown-menu {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external {
background: linear-gradient(180deg, #222c38 0%, #1a222c 100%) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu > li.external > h3 {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-extended .dropdown-menu .dropdown-menu-list > li > a {
color: var(--app-text-secondary) !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-extended:not(.dropdown-notification):not(.dropdown-tasks) .dropdown-menu > li.external:last-child {
background: #151c24 !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-notification .app-notification-dropdown__footer {
background: #151c24 !important;
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-notification > .dropdown-menu .app-notification-dropdown__footer > a {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-notification > .dropdown-menu .app-notification-dropdown__footer > a:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* Pending tasks dropdown — footer + list rows (structure: .app-tasks-dropdown) */
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-tasks > .dropdown-menu > li.app-tasks-dropdown__footer {
background: #151c24 !important;
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-tasks > .dropdown-menu > li.app-tasks-dropdown__footer > a {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-tasks > .dropdown-menu > li.app-tasks-dropdown__footer > a:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-tasks .app-tasks-dropdown__header > a {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-tasks .app-tasks-dropdown__header > a:hover {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-tasks .header-task-row__title .desc {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .header-task-dropdown-list .header-task-row {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .header-task-dropdown-list .header-task-row:hover {
background: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown .dropdown-menu.dropdown-menu-default > li > a {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown .dropdown-menu.dropdown-menu-default > li > a:hover {
background: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .header-task-dropdown-toggle .header-task-worker-btn {
border-color: var(--app-border-strong) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-extended .dropdown-menu:before {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-extended .dropdown-menu:after {
border-bottom-color: var(--app-bg-card) !important;
}
/* Dark: sidebar app-sidebar refinements */
html[data-theme="dark"] .page-sidebar.app-sidebar,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover {
background: linear-gradient(180deg, #161d26 0%, #12181f 100%) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li.open > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li.open > a {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu {
background: rgba(0, 0, 0, 0.22) !important;
}
/*
* Bootstrap stripes the (#fbfcfd). Dark mode previously only set td/th; Metronic
* often uses tbody td { background: transparent }, so the light tr still showed through.
*/
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd),
body.theme-dark .table-striped > tbody > tr:nth-of-type(odd),
body.theme-dark .table-striped > tbody > tr:nth-child(odd) {
background-color: var(--app-bg-content) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th,
body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > td,
body.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > th,
body.theme-dark .table-striped > tbody > tr:nth-child(odd) > td,
body.theme-dark .table-striped > tbody > tr:nth-child(odd) > th {
background-color: var(--app-bg-content) !important;
}
/* Metronic components(.min).css — .table-hover uses #f3f4f6 !important */
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
background: var(--app-table-row-hover) !important;
background-color: var(--app-table-row-hover) !important;
}
html[data-theme="dark"] .table.table-light.table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table.table-light.table-hover > tbody > tr:hover > th,
html[data-theme="dark"] .table.table-light.table-hover > tbody > tr > td:hover,
html[data-theme="dark"] .table.table-light.table-hover > tbody > tr > th:hover {
background: var(--app-table-row-hover) !important;
background-color: var(--app-table-row-hover) !important;
}
html[data-theme="dark"] .table-scrollable > .table.table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-scrollable > .table.table-hover > tbody > tr:hover > th {
background: var(--app-table-row-hover) !important;
background-color: var(--app-table-row-hover) !important;
}
html[data-theme="dark"] .dropdown-menu {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .dropdown-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* Metronic: .dropdown-menu > li.active > a uses #f6f6f6 / #555 (job view tab dropdowns, etc.) */
html[data-theme="dark"] .dropdown-menu > li.active > a,
html[data-theme="dark"] .dropdown-menu > li.active:hover > a {
background: var(--app-accent-dim) !important;
background-color: var(--app-accent-dim) !important;
background-image: none !important;
color: var(--app-text) !important;
filter: none !important;
}
/* Nav tab row: open dropdown toggle — components.css #eee / #0d638f */
html[data-theme="dark"] .nav-tabs > li.dropdown.open > .dropdown-toggle,
html[data-theme="dark"] .nav-pills > li.dropdown.open > .dropdown-toggle {
background: var(--app-bg-elevated) !important;
background-color: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
border-color: transparent !important;
}
html[data-theme="dark"] .menu-toggler > span,
html[data-theme="dark"] .menu-toggler > span:before,
html[data-theme="dark"] .menu-toggler > span:after {
background: var(--app-text-muted) !important;
}
/* Task worker bar if present */
html[data-theme="dark"] .task-worker-top-bar {
background: #1a222c !important;
border-bottom-color: var(--app-border) !important;
color: var(--app-text);
}
html[data-theme="dark"] .task-worker-top-bar__count {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .task-worker-top-bar__assoc {
border-top-color: var(--app-border) !important;
color: var(--app-text-secondary);
}
html[data-theme="dark"] .task-worker-top-bar__exit {
color: var(--app-link) !important;
}
html[data-theme="dark"] .task-worker-top-bar__exit:hover {
color: var(--app-link-hover) !important;
}
/* My Tasks page — todo cards / toolbar (custom-app.css uses light-only hex) */
html[data-theme="dark"] .todo-page .todo-toolbar {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .todo-page .todo-compact-table {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .todo-page .todo-compact-table thead th {
background: var(--app-bg-card) !important;
color: var(--app-text-muted) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .todo-page .todo-compact-table tbody td {
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .todo-page .todo-compact-title {
color: var(--app-text) !important;
}
html[data-theme="dark"] .todo-page .todo-task-group__heading {
border-bottom-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .todo-page .todo-task-group__count {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .todo-page .todo-compact-row--urgent td {
background: rgba(248, 113, 113, 0.1) !important;
border-left-color: #f87171 !important;
}
html[data-theme="dark"] .todo-page .todo-compact-row--worker-current td {
box-shadow: inset 0 0 0 2px var(--app-accent) !important;
}
html[data-theme="dark"] .todo-page .todo-status-toggle .btn-default {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .todo-page .todo-empty-icon {
color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .todo-page .font-grey-silver {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .todo-page .todo-task-card {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
border-left-color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .todo-page .todo-task-card:hover {
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .todo-page .todo-task-card--urgent {
border-left-color: #f87171 !important;
background: rgba(248, 113, 113, 0.1) !important;
}
html[data-theme="dark"] .todo-page .todo-task-card--done {
border-left-color: rgba(74, 222, 128, 0.55) !important;
background: rgba(34, 197, 94, 0.08) !important;
}
html[data-theme="dark"] .todo-page .todo-task-card__title {
color: var(--app-text) !important;
}
html[data-theme="dark"] .todo-page .todo-badge--danger {
background: rgba(248, 113, 113, 0.22) !important;
color: #fecaca !important;
}
html[data-theme="dark"] .todo-page .todo-badge--success {
background: rgba(34, 197, 94, 0.2) !important;
color: #bbf7d0 !important;
}
html[data-theme="dark"] .todo-page .todo-task-card__assoc {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .todo-page .todo-assoc-link {
color: var(--app-link) !important;
}
html[data-theme="dark"] .todo-page .todo-checklist {
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .todo-task-card--worker-current {
box-shadow: 0 0 0 2px var(--app-accent) !important;
background: rgba(45, 212, 191, 0.12) !important;
}
/* Header pending-tasks dropdown — body strip + meta text */
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-tasks .app-tasks-dropdown__body {
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .header-task-row__meta,
html[data-theme="dark"] .page-header.navbar.app-header .header-task-row__linked {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .header-task-row__linked .label {
border: 1px solid var(--app-border) !important;
}
/* Associated tasks widget (job/order views) — urgent row */
html[data-theme="dark"] .associated-tasks-widget .table > tbody > tr.warning > td,
html[data-theme="dark"] .associated-tasks-widget .table > tbody > tr.warning > th {
background-color: rgba(245, 158, 11, 0.14) !important;
}
/* Dashboard + custom cards use white backgrounds in light mode — dark variants */
html[data-theme="dark"] .modern-portlet,
html[data-theme="dark"] .sales-dash-card,
html[data-theme="dark"] .purchasing-dashboard__panel,
html[data-theme="dark"] .quick-link-card {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text);
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .sales-dash-card {
--sd-text: var(--app-text);
--sd-muted: var(--app-text-muted);
--sd-border: var(--app-border-strong);
}
html[data-theme="dark"] .main-dashboard__lede,
html[data-theme="dark"] .sales-dash-card__title,
html[data-theme="dark"] .purchasing-dashboard__panel h3,
html[data-theme="dark"] .purchasing-dashboard__panel p {
color: inherit;
}
html[data-theme="dark"] .sales-dash-card__value,
html[data-theme="dark"] .sales-dash-card__label {
color: var(--app-text) !important;
}
html[data-theme="dark"] .sales-dash-card__hint {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .sales-dash-card__footer {
color: var(--app-accent) !important;
background: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .sales-dash-card__footer:hover {
color: var(--app-link-hover) !important;
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .sales-dash-card__extra {
background: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
}
/* KPI icon tile: light mode mixes accent into white — on dark cards use elevated surface + accent glyph */
html[data-theme="dark"] .sales-dash-card__icon,
body.theme-dark .sales-dash-card__icon {
color: var(--card-accent, var(--app-accent)) !important;
background: color-mix(in srgb, var(--card-accent, var(--app-accent)) 22%, var(--app-bg-elevated)) !important;
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
html[data-theme="dark"] .sales-dash-card__icon,
body.theme-dark .sales-dash-card__icon {
background: rgba(255, 255, 255, 0.07) !important;
}
}
html[data-theme="dark"] .job-ops-dashboard__hero,
body.theme-dark .job-ops-dashboard__hero {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .job-ops-dashboard__hero-lede,
body.theme-dark .job-ops-dashboard__hero-lede {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .job-ops-dashboard__hero-asof,
body.theme-dark .job-ops-dashboard__hero-asof {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .job-ops-dashboard__kpi-surface,
body.theme-dark .job-ops-dashboard__kpi-surface {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .job-ops-dashboard__heading,
body.theme-dark .job-ops-dashboard__heading {
color: var(--app-text) !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .job-ops-dashboard__deadline-pane,
body.theme-dark .job-ops-dashboard__deadline-pane {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .job-ops-dashboard__deadline-pane--overdue,
body.theme-dark .job-ops-dashboard__deadline-pane--overdue {
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .job-ops-dashboard__deadline-pane--soon,
body.theme-dark .job-ops-dashboard__deadline-pane--soon {
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .text-muted {
color: var(--app-text-muted) !important;
}
/* Typeahead / Bloodhound — menus & suggestions (typeahead.css, global-search.css, plugins.css, layout custom) */
html[data-theme="dark"] .tt-menu,
html[data-theme="dark"] .tt-dropdown-menu {
background-color: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .tt-menu h3 {
color: var(--app-text) !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .tt-suggestion {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .tt-suggestion:hover,
html[data-theme="dark"] .tt-suggestion.tt-cursor {
background-color: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .twitter-typeahead .tt-hint {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .tt-empty-message {
color: var(--app-text-muted) !important;
}
/* Global search result rows (inside .tt-suggestion) */
html[data-theme="dark"] .global-search-result {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .global-search-result:hover {
background-color: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .global-search-result strong {
color: var(--app-text) !important;
}
html[data-theme="dark"] .search-category {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .typeahead-results .category-header {
background-color: var(--app-bg-elevated) !important;
color: var(--app-text-muted) !important;
border-top-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .sidebar-search-wrapper .tt-menu {
background-color: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
}
/* layout/css/custom.css — mt-repeater line items use white + blue border !important */
html[data-theme="dark"] .mt-repeater-item .twitter-typeahead .tt-menu {
background: var(--app-bg-card) !important;
background-color: var(--app-bg-card) !important;
background-image: none !important;
border: 1px solid var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .mt-repeater-item .twitter-typeahead .tt-suggestion {
border-bottom-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .mt-repeater-item .twitter-typeahead .tt-suggestion:hover,
html[data-theme="dark"] .mt-repeater-item .twitter-typeahead .tt-suggestion.tt-cursor {
background: var(--app-accent-dim) !important;
background-color: var(--app-accent-dim) !important;
background-image: none !important;
color: var(--app-text) !important;
}
/*
* Main header global search — layout.css targets the outer .tt-dropdown-menu
* (do not use .tt-menu: Typeahead 0.11 nests .tt-suggestions.tt-menu inside).
*/
html[data-theme="dark"] .page-header.navbar .search-form.search-form-expanded .twitter-typeahead > .tt-dropdown-menu,
html[data-theme="dark"] .page-header.navbar .search-form.open .twitter-typeahead > .tt-dropdown-menu,
body.theme-dark .page-header.navbar .search-form.search-form-expanded .twitter-typeahead > .tt-dropdown-menu,
body.theme-dark .page-header.navbar .search-form.open .twitter-typeahead > .tt-dropdown-menu {
background: var(--app-bg-card) !important;
background-color: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form.search-form-expanded .tt-suggestion,
html[data-theme="dark"] .page-header.navbar .search-form.open .tt-suggestion,
body.theme-dark .page-header.navbar .search-form.search-form-expanded .tt-suggestion,
body.theme-dark .page-header.navbar .search-form.open .tt-suggestion {
color: var(--app-text-secondary) !important;
border-bottom-color: var(--app-border) !important;
background-color: transparent !important;
}
html[data-theme="dark"] .page-header.navbar .search-form.search-form-expanded .tt-suggestion:hover,
html[data-theme="dark"] .page-header.navbar .search-form.search-form-expanded .tt-suggestion.tt-cursor,
html[data-theme="dark"] .page-header.navbar .search-form.open .tt-suggestion:hover,
html[data-theme="dark"] .page-header.navbar .search-form.open .tt-suggestion.tt-cursor,
body.theme-dark .page-header.navbar .search-form.search-form-expanded .tt-suggestion:hover,
body.theme-dark .page-header.navbar .search-form.search-form-expanded .tt-suggestion.tt-cursor,
body.theme-dark .page-header.navbar .search-form.open .tt-suggestion:hover,
body.theme-dark .page-header.navbar .search-form.open .tt-suggestion.tt-cursor {
background: var(--app-accent-dim) !important;
background-color: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .global-search-result,
body.theme-dark .page-header.navbar .search-form .global-search-result {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .global-search-result strong,
body.theme-dark .page-header.navbar .search-form .global-search-result strong {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .global-search-result .text-muted,
html[data-theme="dark"] .page-header.navbar .search-form .global-search-result small,
body.theme-dark .page-header.navbar .search-form .global-search-result .text-muted,
body.theme-dark .page-header.navbar .search-form .global-search-result small {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .search-category,
body.theme-dark .page-header.navbar .search-form .search-category {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .tt-dataset-header,
body.theme-dark .page-header.navbar .search-form .tt-dataset-header {
background: var(--app-bg-elevated) !important;
color: var(--app-text-muted) !important;
border-bottom: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .page-header.navbar .search-form .tt-empty-message,
body.theme-dark .page-header.navbar .search-form .tt-empty-message {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .close {
color: var(--app-text-muted);
opacity: 0.85;
}
html[data-theme="dark"] .note,
html[data-theme="dark"] .note.note-info {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary);
}
/* Operational & business insights — Morris donut labels / centre text */
html[data-theme="dark"] .operational-insights-report .oi-morris-donut text,
body.theme-dark .operational-insights-report .oi-morris-donut text {
fill: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .operational-insights-report .morris-hover.morris-default-style,
body.theme-dark .operational-insights-report .morris-hover.morris-default-style {
color: var(--app-text-secondary) !important;
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
}
@media (max-width: 767px) {
html[data-theme="dark"] .page-header.navbar.app-header .search-form.open .input-group .form-control,
html[data-theme="dark"] .page-header.navbar.app-header .search-form.search-form-expanded .input-group .form-control,
body.theme-dark .page-header.navbar.app-header .search-form.open .input-group .form-control,
body.theme-dark .page-header.navbar.app-header .search-form.search-form-expanded .input-group .form-control {
background: rgba(0, 0, 0, 0.28) !important;
color: var(--app-text) !important;
border-radius: 8px !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .search-form.open .input-group .form-control::placeholder,
html[data-theme="dark"] .page-header.navbar.app-header .search-form.search-form-expanded .input-group .form-control::placeholder,
body.theme-dark .page-header.navbar.app-header .search-form.open .input-group .form-control::placeholder,
body.theme-dark .page-header.navbar.app-header .search-form.search-form-expanded .input-group .form-control::placeholder {
color: var(--app-text-muted) !important;
}
}
/* =============================================================================
Dark theme — comprehensive UI (remaining light Metronic / Bootstrap / plugins)
============================================================================= */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6 {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-content a:not(.btn):not(.dropdown-toggle):not(.nav-link):not(.list-group-item):not(.sales-dash-card__footer):not(.quick-link-card):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql),
body.theme-dark .page-content a:not(.btn):not(.dropdown-toggle):not(.nav-link):not(.list-group-item):not(.sales-dash-card__footer):not(.quick-link-card):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql) {
color: var(--app-link);
}
html[data-theme="dark"] .page-content a:not(.btn):not(.dropdown-toggle):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql):hover,
body.theme-dark .page-content a:not(.btn):not(.dropdown-toggle):not(.sales-dashboard__ql):not(.purchasing-dashboard__ql):hover {
color: var(--app-link-hover);
}
/* Correspondence widget (views/tpl/correspondence_widget.html + correspondence-widget.css) */
html[data-theme="dark"] .correspondence-empty-plate {
background: linear-gradient(145deg, rgba(30, 39, 50, 0.98) 0%, rgba(15, 20, 28, 0.99) 100%) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .correspondence-empty-plate__ico {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-empty-plate__title {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .correspondence-empty-plate__hint {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-content-card {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .correspondence-notes-box {
background: var(--app-bg-elevated) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .correspondence-notes-box.email,
html[data-theme="dark"] .correspondence-notes-box.sms,
html[data-theme="dark"] .correspondence-notes-box.phone_call,
html[data-theme="dark"] .correspondence-notes-box.meeting {
border-left-color: var(--app-accent) !important;
}
html[data-theme="dark"] .correspondence-timeline-line {
border-left-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .correspondence-card__head {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .correspondence-card__title {
color: var(--app-text) !important;
}
html[data-theme="dark"] .correspondence-card__subject {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-card__date {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-card__no-notes {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-card__meta {
border-top-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-card__meta i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .correspondence-job-badge {
background: var(--app-bg-elevated) !important;
color: var(--app-text-secondary) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] hr {
border-top-color: var(--app-border) !important;
}
/* Metronic portlets — .light is explicitly white in theme */
html[data-theme="dark"] .portlet.light,
html[data-theme="dark"] .portlet.light.bordered {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .portlet.light > .portlet-title {
background: transparent !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .portlet.light > .portlet-title > .caption {
color: var(--app-text) !important;
}
html[data-theme="dark"] .portlet.light > .portlet-title > .caption > .caption-helper,
html[data-theme="dark"] .portlet > .portlet-title > .caption-subject > small {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .portlet > .portlet-title > .actions > .btn.btn-default,
html[data-theme="dark"] .portlet > .portlet-title > .actions > .btn.default {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .portlet.box > .portlet-title {
color: #fff !important;
}
html[data-theme="dark"] .portlet.solid {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
/* Metronic .portlet-form / .form — #f5f5f5 footers; custom.css .form-actions uses #f8f9fa */
html[data-theme="dark"] .portlet-form .form-actions,
html[data-theme="dark"] .form .form-actions {
background: var(--app-bg-elevated) !important;
background-color: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .portlet-form .form-actions.top,
html[data-theme="dark"] .form .form-actions.top {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .portlet-form .form-actions.nobg,
html[data-theme="dark"] .form .form-actions.nobg {
background: transparent !important;
background-color: transparent !important;
}
html[data-theme="dark"] .portlet.light .portlet-form .form-actions,
html[data-theme="dark"] .portlet.light .form .form-actions {
background: none !important;
background-color: transparent !important;
}
html[data-theme="dark"] .portlet-form .form-section,
html[data-theme="dark"] .form .form-section {
border-bottom-color: var(--app-border) !important;
}
/* custom.css — wizard / multi-step “current” section (was #f8f9ff + blue glow) */
html[data-theme="dark"] .form-section.current-section,
body.theme-dark .form-section.current-section {
background-color: color-mix(in srgb, var(--app-accent) 14%, var(--app-bg-card)) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--app-accent) 42%, transparent),
0 4px 24px rgba(0, 0, 0, 0.45) !important;
}
@supports not (background-color: color-mix(in srgb, red 10%, blue)) {
html[data-theme="dark"] .form-section.current-section,
body.theme-dark .form-section.current-section {
background-color: var(--app-accent-dim) !important;
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35), 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}
}
/* layouts/layout/css/custom.css — standalone wizard + form footers */
html[data-theme="dark"] .wizard-navigation {
background: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .form-actions {
background: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
}
/* Tabbed portlets */
html[data-theme="dark"] .tabbable-custom > .nav-tabs {
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .tabbable-custom > .nav-tabs > li > a {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .tabbable-custom > .nav-tabs > li.active > a {
background: var(--app-bg-card) !important;
color: var(--app-text) !important;
border-bottom-color: transparent !important;
}
html[data-theme="dark"] .tabbable-custom > .tab-content {
background: transparent !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary);
}
/* Alerts */
html[data-theme="dark"] .alert {
border-radius: var(--app-radius-sm) !important;
border-width: 1px !important;
}
html[data-theme="dark"] .alert-default,
html[data-theme="dark"] .alert:not(.alert-success):not(.alert-info):not(.alert-warning):not(.alert-danger) {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .alert-success {
background: rgba(34, 197, 94, 0.12) !important;
border-color: rgba(34, 197, 94, 0.35) !important;
color: #bbf7d0 !important;
}
html[data-theme="dark"] .alert-info {
background: rgba(56, 189, 248, 0.12) !important;
border-color: rgba(56, 189, 248, 0.35) !important;
color: #bae6fd !important;
}
html[data-theme="dark"] .alert-warning {
background: rgba(245, 158, 11, 0.14) !important;
border-color: rgba(245, 158, 11, 0.4) !important;
color: #fde68a !important;
}
html[data-theme="dark"] .alert-danger {
background: rgba(239, 68, 68, 0.14) !important;
border-color: rgba(239, 68, 68, 0.4) !important;
color: #fecaca !important;
}
/* Buttons — outline & Metronic named colors */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn.blue {
background: #0f766e !important;
border-color: #115e59 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn.blue:hover,
html[data-theme="dark"] .btn.blue:focus,
html[data-theme="dark"] .btn.blue:active {
background: #14b8a6 !important;
border-color: #0f766e !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn.green {
background: #059669 !important;
border-color: #047857 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-success:focus,
html[data-theme="dark"] .btn.green:hover,
html[data-theme="dark"] .btn.green:focus {
background: #10b981 !important;
border-color: #059669 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-info {
background: #0369a1 !important;
border-color: #075985 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-info:focus {
background: #0284c7 !important;
border-color: #0369a1 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn.yellow {
background: #b45309 !important;
border-color: #92400e !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .btn.yellow:hover,
html[data-theme="dark"] .btn.yellow:focus {
background: #d97706 !important;
border-color: #b45309 !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn.red {
background: #b91c1c !important;
border-color: #991b1b !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus,
html[data-theme="dark"] .btn.red:hover,
html[data-theme="dark"] .btn.red:focus {
background: #dc2626 !important;
border-color: #b91c1c !important;
color: #fff !important;
}
html[data-theme="dark"] .btn-link {
color: var(--app-link) !important;
}
html[data-theme="dark"] .btn-outline {
background: transparent !important;
color: var(--app-text-secondary) !important;
}
/* Badges & labels */
html[data-theme="dark"] .badge {
border: 1px solid transparent;
}
html[data-theme="dark"] .badge-default,
html[data-theme="dark"] .label-default {
background: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .label-primary,
html[data-theme="dark"] .badge-primary {
background: #0f766e !important;
color: #fff !important;
}
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .badge-success {
background: #047857 !important;
color: #fff !important;
}
html[data-theme="dark"] .label-info,
html[data-theme="dark"] .badge-info {
background: #075985 !important;
color: #e0f2fe !important;
}
html[data-theme="dark"] .label-warning,
html[data-theme="dark"] .badge-warning {
background: #92400e !important;
color: #fef3c7 !important;
}
html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .badge-danger {
background: #991b1b !important;
color: #fee2e2 !important;
}
/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: var(--app-on-accent) !important;
}
html[data-theme="dark"] .pagination > .disabled > span,
html[data-theme="dark"] .pagination > .disabled > a {
background: var(--app-bg-card) !important;
color: var(--app-text-muted) !important;
opacity: 0.65;
}
/* Pager */
html[data-theme="dark"] .pager li > a,
html[data-theme="dark"] .pager li > span {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
/* List group */
html[data-theme="dark"] .list-group-item {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] a.list-group-item:hover,
html[data-theme="dark"] button.list-group-item:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:hover {
background: rgba(45, 212, 191, 0.2) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
/* Nav pills */
html[data-theme="dark"] .nav-pills > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:hover,
html[data-theme="dark"] .nav-pills > li.active > a:focus {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
/* Breadcrumb strip inside page */
html[data-theme="dark"] .page-bar {
border-bottom-color: var(--app-border) !important;
}
/* Tables — bordered / condensed */
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > tfoot > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .table > caption + thead > tr:first-child > th,
html[data-theme="dark"] .table > colgroup + thead > tr:first-child > th,
html[data-theme="dark"] .table > thead:first-child > tr:first-child > th {
border-top-color: var(--app-border) !important;
}
/* Input groups & file upload chrome */
html[data-theme="dark"] .input-group-addon {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] select.form-control option,
html[data-theme="dark"] select option {
background: var(--app-bg-card);
color: var(--app-text);
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control {
background: rgba(0, 0, 0, 0.2) !important;
color: var(--app-text-muted) !important;
opacity: 1;
}
/* Bootstrap-select */
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle:hover,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle:focus {
background: var(--app-bg-elevated) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li.selected > a,
html[data-theme="dark"] .bootstrap-select .dropdown-menu > li > a:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* Job create: in-place bootstrap-select menus above portlets/tabs (avoid container:body mis-positioning) */
.job-create-form .bootstrap-select.open {
z-index: 1061;
}
.job-create-form .bootstrap-select .dropdown-menu {
z-index: 1062;
}
/* bootstrap-select with container: 'body' (wizard / overflow areas) — stay above page chrome */
html[data-theme="dark"] body > .bootstrap-select.open {
z-index: 1060 !important;
}
/* Select2 — dark: bootstrap theme + dropdown contrast (dropdown is often on body) */
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-selected="true"] {
background: rgba(255, 255, 255, 0.07) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
/* DataTables — filter inputs & paging buttons */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border-strong) !important;
color: var(--app-text) !important;
border-radius: var(--app-radius-sm) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--app-accent) !important;
border-color: var(--app-accent-hover) !important;
color: var(--app-on-accent) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
cursor: default !important;
opacity: 0.65;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
color: var(--app-text-muted) !important;
}
/* DataTables — table cells, plugins.css (#fbfcfd / #e7ecf1) overrides */
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
color: var(--app-text) !important;
background: var(--app-bg-elevated) !important;
border-bottom-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] table.dataTable.no-footer {
border-bottom-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] table.dataTable tr.heading > th {
background-color: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] table.dataTable td.sorting_1,
html[data-theme="dark"] table.dataTable td.sorting_2,
html[data-theme="dark"] table.dataTable td.sorting_3,
html[data-theme="dark"] table.dataTable th.sorting_1,
html[data-theme="dark"] table.dataTable th.sorting_2,
html[data-theme="dark"] table.dataTable th.sorting_3 {
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
border-top-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] table.dataTable tfoot th,
html[data-theme="dark"] table.dataTable tfoot td {
border-top-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] table.dataTable.stripe tbody > tr.odd > td,
html[data-theme="dark"] table.dataTable.stripe tbody > tr.odd > th,
html[data-theme="dark"] table.dataTable.display tbody > tr.odd > td,
html[data-theme="dark"] table.dataTable.display tbody > tr.odd > th {
background-color: var(--app-bg-content) !important;
}
html[data-theme="dark"] table.dataTable.stripe tbody > tr.even > td,
html[data-theme="dark"] table.dataTable.stripe tbody > tr.even > th,
html[data-theme="dark"] table.dataTable.display tbody > tr.even > td,
html[data-theme="dark"] table.dataTable.display tbody > tr.even > th {
background-color: var(--app-bg-card) !important;
}
html[data-theme="dark"] table.dataTable.hover tbody > tr:hover > td,
html[data-theme="dark"] table.dataTable.hover tbody > tr:hover > th,
html[data-theme="dark"] table.dataTable.display tbody > tr:hover > td,
html[data-theme="dark"] table.dataTable.display tbody > tr:hover > th {
background-color: var(--app-table-row-hover) !important;
}
/* DataTables core sets light greys on
and on .sorting_* cells (datatables.min.css) */
html[data-theme="dark"] table.dataTable.display tbody tr.odd,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd {
background-color: var(--app-bg-content) !important;
}
html[data-theme="dark"] table.dataTable.display tbody tr.even,
html[data-theme="dark"] table.dataTable.stripe tbody tr.even {
background-color: var(--app-bg-card) !important;
}
html[data-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-theme="dark"] table.dataTable.stripe tbody tr:hover,
html[data-theme="dark"] table.dataTable.hover tbody tr:hover {
background-color: var(--app-table-row-hover) !important;
}
html[data-theme="dark"] table.dataTable.table-hover tbody tr:hover > td,
html[data-theme="dark"] table.dataTable.table-hover tbody tr:hover > th {
background-color: var(--app-table-row-hover) !important;
}
/* Order-column + display: per-cell sorting backgrounds (#fafafa / #eaeaea hover) */
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3 {
background-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: var(--app-bg-content) !important;
}
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_3,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
background-color: var(--app-table-row-hover) !important;
}
html[data-theme="dark"] table.dataTable tbody > tr.selected > td,
html[data-theme="dark"] table.dataTable tbody > tr.selected > th,
html[data-theme="dark"] table.dataTable tbody > tr > td.selected,
html[data-theme="dark"] table.dataTable tbody > tr > th.selected {
background-color: var(--app-bg-card) !important;
}
html[data-theme="dark"] table.dataTable.stripe tbody > tr.odd.selected > td,
html[data-theme="dark"] table.dataTable.stripe tbody > tr.odd.selected > th,
html[data-theme="dark"] table.dataTable.display tbody > tr.odd.selected > td,
html[data-theme="dark"] table.dataTable.display tbody > tr.odd.selected > th {
background-color: var(--app-bg-content) !important;
}
html[data-theme="dark"] table.dataTable.order-column tbody > tr.selected > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column tbody > tr.selected > .sorting_2,
html[data-theme="dark"] table.dataTable.order-column tbody > tr.selected > .sorting_3,
html[data-theme="dark"] table.dataTable.display tbody > tr.selected > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody > tr.selected > .sorting_2,
html[data-theme="dark"] table.dataTable.display tbody > tr.selected > .sorting_3 {
background-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .dataTables_scrollHead {
border-bottom-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .dataTables_scrollBody {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
color: var(--app-text) !important;
border-color: var(--app-border-strong) !important;
background: var(--app-bg-card) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dt-loading-overlay {
background: rgba(10, 14, 18, 0.82);
}
html[data-theme="dark"] .dataTables_wrapper .dt-loading-overlay__label {
color: var(--app-text-secondary);
}
html[data-theme="dark"] .dataTables_wrapper .dt-loading-overlay .fa-spinner {
color: var(--app-accent);
}
html[data-theme="dark"] .dt-processing {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .dt-processing i {
color: var(--app-accent) !important;
}
html[data-theme="dark"] div.dt-button-collection {
border-color: var(--app-border) !important;
background: var(--app-bg-card) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] div.dt-button-collection > a.dt-button > span {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] div.dt-button-collection > a.dt-button.active {
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] div.dt-button-collection > a.dt-button.active > span {
color: var(--app-text) !important;
}
html[data-theme="dark"] table.dataTable.fixedHeader-floating {
border-color: var(--app-border) !important;
background: var(--app-bg-card) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child td {
background: var(--app-bg-elevated) !important;
color: var(--app-text-secondary) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > td.control:before,
html[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > th.control:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
background-color: var(--app-text-muted) !important;
color: var(--app-bg-card) !important;
}
html[data-theme="dark"] table.dataTable.dtr-column > tbody > tr.parent td.control:before,
html[data-theme="dark"] table.dataTable.dtr-column > tbody > tr.parent th.control:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
background-color: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
/* Sorting icons — replace light PNGs with SVG tuned for dark surfaces */
html[data-theme="dark"] table.dataTable thead .sorting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath fill='%238b95a5' d='M6 1.5 9.5 6h-7z'/%3E%3Cpath fill='%238b95a5' d='M6 12.5 2.5 8h7z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center right !important;
}
html[data-theme="dark"] table.dataTable thead .sorting_asc {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%235eead4' d='M6 0 12 9H0z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center right !important;
}
html[data-theme="dark"] table.dataTable thead .sorting_desc {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%235eead4' d='M6 10 0 1h12z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center right !important;
}
html[data-theme="dark"] table.dataTable thead .sorting_asc_disabled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%235c6570' opacity='0.45' d='M6 0 12 9H0z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center right !important;
}
html[data-theme="dark"] table.dataTable thead .sorting_desc_disabled {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%235c6570' opacity='0.45' d='M6 10 0 1h12z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center right !important;
}
/* Datepicker (Bootstrap) */
html[data-theme="dark"] .datepicker {
background: var(--app-bg-card) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .datepicker table tr td.day:hover,
html[data-theme="dark"] .datepicker table tr td.day.focused {
background: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
color: var(--app-text-muted) !important;
}
/* Daterangepicker */
html[data-theme="dark"] .daterangepicker {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker .calendar-table {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
/* Adjacent-month / non-selectable days (plugin defaults: #999 on #fff) */
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date,
body.theme-dark .daterangepicker td.off,
body.theme-dark .daterangepicker td.off.in-range,
body.theme-dark .daterangepicker td.off.start-date,
body.theme-dark .daterangepicker td.off.end-date {
color: var(--app-text-muted) !important;
background: var(--app-bg-elevated) !important;
background-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .daterangepicker td.disabled,
html[data-theme="dark"] .daterangepicker option.disabled,
body.theme-dark .daterangepicker td.disabled,
body.theme-dark .daterangepicker option.disabled {
color: var(--app-text-muted) !important;
background: transparent !important;
}
html[data-theme="dark"] .daterangepicker td.in-range,
body.theme-dark .daterangepicker td.in-range {
background: var(--app-accent-dim) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker td.week,
html[data-theme="dark"] .daterangepicker th.week,
body.theme-dark .daterangepicker td.week,
body.theme-dark .daterangepicker th.week {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .daterangepicker td,
html[data-theme="dark"] .daterangepicker th,
body.theme-dark .daterangepicker td,
body.theme-dark .daterangepicker th {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker select.monthselect,
html[data-theme="dark"] .daterangepicker select.yearselect,
body.theme-dark .daterangepicker select.monthselect,
body.theme-dark .daterangepicker select.yearselect {
background: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .daterangepicker td.available:hover,
html[data-theme="dark"] .daterangepicker th.available:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
background: var(--app-accent) !important;
color: var(--app-on-accent) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .daterangepicker .ranges li:hover {
background: var(--app-accent-dim) !important;
}
html[data-theme="dark"] .daterangepicker .drp-buttons {
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .daterangepicker select.hourselect,
html[data-theme="dark"] .daterangepicker select.minuteselect,
html[data-theme="dark"] .daterangepicker select.ampmselect {
background: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
/* jQuery UI (datepicker/autocomplete base theme) */
html[data-theme="dark"] .ui-widget-content {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .ui-widget-header {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .ui-state-default,
html[data-theme="dark"] .ui-widget-content .ui-state-default {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .ui-state-hover,
html[data-theme="dark"] .ui-state-focus {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .ui-menu .ui-menu-item-wrapper {
color: var(--app-text-secondary);
}
/* Popovers */
html[data-theme="dark"] .popover {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .popover-title {
background: var(--app-bg-elevated) !important;
border-bottom-color: var(--app-border) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .popover-content {
color: var(--app-text-secondary) !important;
}
/* Progress */
html[data-theme="dark"] .progress {
background: rgba(0, 0, 0, 0.35) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .progress-bar {
box-shadow: none !important;
}
/* Code */
html[data-theme="dark"] code {
background: rgba(0, 0, 0, 0.35) !important;
color: #e2e8f0 !important;
border: 1px solid var(--app-border);
padding: 0.15em 0.4em;
border-radius: 4px;
}
html[data-theme="dark"] pre {
background: rgba(0, 0, 0, 0.4) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
/* Toastr — dark chrome while keeping semantic tint */
html[data-theme="dark"] #toast-container > div {
opacity: 0.98;
box-shadow: var(--app-shadow) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] #toast-container > .toast-success {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
}
html[data-theme="dark"] #toast-container > .toast-error {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) !important;
}
html[data-theme="dark"] #toast-container > .toast-info,
html[data-theme="dark"] #toast-container > .toast-warning {
background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)) !important;
}
html[data-theme="dark"] .sales-dashboard__ql:not(.sales-dashboard__ql--primary) .sales-dashboard__ql-ico {
background: rgba(45, 212, 191, 0.1) !important;
color: var(--app-accent) !important;
}
/* Text helpers */
html[data-theme="dark"] .text-primary {
color: #7dd3fc !important;
}
html[data-theme="dark"] .text-success {
color: #86efac !important;
}
html[data-theme="dark"] .text-info {
color: #7dd3fc !important;
}
html[data-theme="dark"] .text-warning {
color: #fcd34d !important;
}
html[data-theme="dark"] .text-danger {
color: #fca5a5 !important;
}
/* Metronic / material checkboxes (custom-app) — dark surfaces; tick stays white on filled box */
html[data-theme="dark"] .mt-checkbox > span:last-of-type,
html[data-theme="dark"] .mt-checkbox-outline > span:last-of-type,
html[data-theme="dark"] .mt-checkbox.mt-checkbox-outline > span:last-of-type {
background: var(--md-checkbox-surface) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .mt-checkbox > span:last-of-type:after {
border-color: #ffffff !important;
}
html[data-theme="dark"] .mt-checkbox > input:disabled ~ span:last-of-type {
opacity: 0.45;
}
html[data-theme="dark"] .mt-radio.mt-radio-outline span {
border-color: var(--app-border-strong) !important;
}
/* Native + table checkboxes — accent from theme variables */
html[data-theme="dark"] .page-content input[type="checkbox"],
html[data-theme="dark"] .form-horizontal input[type="checkbox"],
html[data-theme="dark"] .form-body input[type="checkbox"],
html[data-theme="dark"] .modal input[type="checkbox"],
html[data-theme="dark"] .table input[type="checkbox"],
html[data-theme="dark"] .table-scrollable input[type="checkbox"] {
accent-color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] input[type="checkbox"]:focus {
outline: none;
box-shadow: var(--app-focus-ring);
}
/* Card-style option rows (customer update, etc.) */
html[data-theme="dark"] .modern-checkbox {
background: var(--app-bg-elevated) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .modern-checkbox:hover {
background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .modern-checkbox .checkmark {
border-color: var(--md-checkbox-unchecked-border) !important;
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .modern-checkbox input[type="checkbox"]:checked + .checkmark {
background: var(--md-checkbox-accent) !important;
border-color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] .checkbox-label {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .checkbox-label i {
color: var(--app-text-muted) !important;
}
/* Job create — job type tiles */
html[data-theme="dark"] .job-type-checkboxes .job-type-checkbox {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .job-type-checkboxes .job-type-checkbox:hover {
border-color: var(--md-checkbox-accent) !important;
box-shadow: var(--app-shadow-soft) !important;
}
/* Job create — Site Location "Job Type" flags (custom.css uses #f8f9fa / #fff) */
html[data-theme="dark"] .checkbox-group {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .checkbox-group-title {
color: var(--app-text) !important;
}
html[data-theme="dark"] .checkbox-group-title i {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .checkbox-group-description {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .checkbox-list .md-checkbox,
html[data-theme="dark"] .checkbox-group .form-check,
html[data-theme="dark"] .checkbox-group .md-checkbox {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .checkbox-list .md-checkbox:hover,
html[data-theme="dark"] .checkbox-group .form-check:hover,
html[data-theme="dark"] .checkbox-group .md-checkbox:hover {
background: var(--app-bg-elevated) !important;
border-color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] .checkbox-list .md-checkbox input[type="checkbox"]:checked ~ label {
color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] .checkbox-list .md-checkbox input[type="checkbox"]:checked ~ label i {
color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] .job-create-form .checkbox-group .md-checkbox label {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .checkbox-group .md-checkbox label > .box {
border-color: var(--md-checkbox-unchecked-border) !important;
background: var(--md-checkbox-surface) !important;
}
html[data-theme="dark"] .checkbox-group .md-checkbox input[type="checkbox"]:checked ~ label > .box {
background-color: var(--md-checkbox-accent) !important;
border-color: var(--md-checkbox-accent) !important;
}
html[data-theme="dark"] .checkbox-group .md-checkbox:hover label > .box {
border-color: var(--md-checkbox-unchecked-hover) !important;
}
/* Dropdown dividers */
html[data-theme="dark"] .dropdown-menu .divider {
background-color: var(--app-border) !important;
}
/* Image thumbnails / bordered */
html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .img-thumbnail {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
/* Editable (bootstrap-editable) */
html[data-theme="dark"] .editableform .form-control {
background: var(--app-bg-card) !important;
color: var(--app-text) !important;
border-color: var(--app-border-strong) !important;
}
/* Bootbox modal body */
html[data-theme="dark"] .bootbox .modal-body {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary) !important;
}
/* Force Metronic “light” portlet surfaces (often loaded with high-specificity #fff) */
html[data-theme="dark"] .portlet.light > .portlet-body,
html[data-theme="dark"] .portlet > .portlet-body {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .has-error .form-control,
html[data-theme="dark"] .has-error .form-control:focus {
border-color: #f87171 !important;
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important;
}
html[data-theme="dark"] .has-success .form-control {
border-color: #4ade80 !important;
}
/* Wizard steps (Metronic) */
html[data-theme="dark"] .form-wizard .steps > li .step {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .form-wizard .steps > li.active .step,
html[data-theme="dark"] .form-wizard .steps > li.done .step {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
/* -----------------------------------------------------------------------------
Dark — overrides for custom-app.css !important / hardcoded surfaces
----------------------------------------------------------------------------- */
/* Select2 — reinforce dark (Metronic / plugin leftovers) */
html[data-theme="dark"] .select2-container .select2-selection--single,
html[data-theme="dark"] .select2-container .select2-selection--multiple {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
color: var(--app-text) !important;
}
html[data-theme="dark"] .modal .select2-container .select2-selection--single {
border-color: var(--app-border-strong) !important;
background: var(--app-bg-card) !important;
}
/* Bootstrap-select (match custom-app: toggle only, not plugin root with copied .bs-select) */
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .bootstrap-select .filter-option {
color: var(--app-text) !important;
}
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle:focus,
html[data-theme="dark"] .bootstrap-select > .dropdown-toggle:active {
border-color: var(--app-accent) !important;
box-shadow: 0 0 0 0.2rem var(--app-accent-dim) !important;
}
/* Sales / purchasing dashboard design tokens */
html[data-theme="dark"] .sales-dashboard {
--sd-text: var(--app-text);
--sd-muted: var(--app-text-muted);
--sd-border: var(--app-border-strong);
}
html[data-theme="dark"] .sales-dashboard__ql:not(.sales-dashboard__ql--primary) {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .sales-dashboard__ql:not(.sales-dashboard__ql--primary):hover {
background: var(--app-bg-card) !important;
border-color: var(--app-accent) !important;
color: var(--app-accent) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .sales-dashboard__ql-text {
color: inherit !important;
}
html[data-theme="dark"] .sales-dashboard__asof {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .sales-dashboard__loading {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .sales-dash-mini {
--sd-text: var(--app-text);
--sd-muted: var(--app-text-muted);
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .sales-dash-card__progress .progress {
background: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .sales-dash-card__progress .status-title {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .sales-dashboard__portlet .portlet-title {
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .sales-dashboard__caption-icon--blue {
background: rgba(41, 128, 185, 0.22) !important;
color: #7dd3fc !important;
}
html[data-theme="dark"] .sales-dashboard__caption-icon--teal {
background: rgba(27, 188, 155, 0.2) !important;
color: #5eead4 !important;
}
html[data-theme="dark"] .sales-dashboard__caption-icon--gold {
background: rgba(194, 157, 11, 0.22) !important;
color: #fcd34d !important;
}
html[data-theme="dark"] .sales-dashboard__caption-icon--purple {
background: rgba(142, 68, 173, 0.22) !important;
color: #d8b4fe !important;
}
html[data-theme="dark"] .sales-dashboard__caption-icon--neutral {
background: rgba(148, 163, 184, 0.15) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .sales-dashboard__table-scroll {
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .purchasing-dashboard {
--pd-surface: var(--app-bg-card);
--pd-border: var(--app-border-strong);
--pd-text: var(--app-text);
--pd-muted: var(--app-text-muted);
}
html[data-theme="dark"] .purchasing-dashboard__ql:not(.purchasing-dashboard__ql--primary) {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .purchasing-dashboard__ql:not(.purchasing-dashboard__ql--primary):hover {
background: var(--app-bg-card) !important;
border-color: var(--app-accent) !important;
color: var(--app-accent) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .purchasing-dashboard__ql-text {
color: inherit !important;
}
html[data-theme="dark"] .purchasing-dashboard__asof {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
/* App sidebar: banded sub-menu panels (custom-app uses rgba white) */
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu {
background: rgba(0, 0, 0, 0.28) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
border-left-color: rgba(45, 212, 191, 0.45) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu > li > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu > li > a > i,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu > li.open > a,
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu > li.active > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu .sub-menu li > .sub-menu,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu .sub-menu li > .sub-menu {
background: rgba(0, 0, 0, 0.22) !important;
}
/* Collapsed rail: flyout submenu panel */
html[data-theme="dark"] .page-sidebar-closed .page-sidebar.app-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .page-sidebar-closed .page-sidebar.app-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-sidebar-closed .page-sidebar.app-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a:hover,
html[data-theme="dark"] .page-sidebar-closed .page-sidebar.app-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li.active > a {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li.open > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li:hover > a,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li.open > a {
color: var(--app-text) !important;
}
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li:hover > a > i,
html[data-theme="dark"] .page-sidebar.app-sidebar .page-sidebar-menu > li.open > a > i,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li:hover > a > i,
html[data-theme="dark"] .page-sidebar-closed.page-sidebar-fixed .page-sidebar.app-sidebar:hover .page-sidebar-menu > li.open > a > i {
color: var(--app-accent) !important;
}
/* Supplier return view note strip */
html[data-theme="dark"] .supplier-return-view__note-body {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .supplier-return-view__note-label,
html[data-theme="dark"] .supplier-return-view h4 {
color: var(--app-text) !important;
}
html[data-theme="dark"] .supplier-return-view .table thead > tr > th {
background-color: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
}
/* Fancybox lightbox */
html[data-theme="dark"] .fancybox-skin {
background: var(--app-bg-card) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .fancybox-error {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .fancybox-title-inside-wrap {
color: var(--app-text) !important;
}
/* Summernote (bootstrap-summernote) */
html[data-theme="dark"] .note-editor.note-frame {
border-color: var(--app-border-strong) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-toolbar {
background: var(--app-bg-elevated) !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-toolbar .note-btn {
background: transparent !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-toolbar .note-btn:hover,
html[data-theme="dark"] .note-editor.note-frame .note-toolbar .note-btn:focus,
html[data-theme="dark"] .note-editor.note-frame .note-toolbar .note-btn.active {
background: var(--app-accent-dim) !important;
border-color: var(--app-accent) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-editing-area {
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable {
background: var(--app-bg-card) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .note-editor.note-frame .note-status-output,
html[data-theme="dark"] .note-editor.note-frame .note-statusbar {
background: var(--app-bg-elevated) !important;
border-top-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .note-dropdown-menu,
html[data-theme="dark"] .note-popover .popover-content {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .note-dropdown-menu .note-dropdown-item {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .note-dropdown-menu .note-dropdown-item:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* Jasny Bootstrap fileinput */
html[data-theme="dark"] .fileinput .thumbnail,
html[data-theme="dark"] .fileinput-new.thumbnail {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .fileinput-preview {
background: var(--app-bg-card) !important;
border-color: var(--app-border) !important;
}
/* Bootstrap tooltips */
html[data-theme="dark"] .tooltip-inner {
background: var(--app-bg-elevated) !important;
color: var(--app-text) !important;
border: 1px solid var(--app-border);
}
html[data-theme="dark"] .tooltip.top .tooltip-arrow {
border-top-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .tooltip.bottom .tooltip-arrow {
border-bottom-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .tooltip.left .tooltip-arrow {
border-left-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .tooltip.right .tooltip-arrow {
border-right-color: var(--app-bg-elevated) !important;
}
/* =============================================================================
Dark — stats / tables / typeahead / pick cards / picking lists / modal overrides
============================================================================= */
/* Header notification dropdown (class-based; replaces inline #f5faff) */
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-notification .app-notification-item.notification-unread {
background-color: rgba(56, 189, 248, 0.12) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-notification .app-notification-dropdown__empty {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-notification .app-notification-item__time {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .dropdown-notification .app-notification-item__message {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .page-header.navbar.app-header .top-menu .navbar-nav > li.dropdown-notification .dropdown-menu .dropdown-menu-list > li > a .time {
background: rgba(0, 0, 0, 0.28) !important;
color: var(--app-text-muted) !important;
}
/* Shared layout helpers */
html[data-theme="dark"] .app-subtable-expand {
background-color: var(--app-bg-elevated) !important;
}
html[data-theme="dark"] .app-subtable-nested {
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .app-consignment-pill {
background: rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="dark"] .app-financial-total-row {
border-top-color: var(--app-border-strong) !important;
}
/* Tables — contextual / Metronic rows */
html[data-theme="dark"] .table > tbody > tr.success > td,
html[data-theme="dark"] .table > tbody > tr.success > th,
html[data-theme="dark"] .table > tbody > tr > td.success,
html[data-theme="dark"] .table > tbody > tr > th.success {
background-color: rgba(34, 197, 94, 0.14) !important;
color: var(--app-text-secondary) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .table > tbody > tr.info > td,
html[data-theme="dark"] .table > tbody > tr.info > th,
html[data-theme="dark"] .table > tbody > tr > td.info,
html[data-theme="dark"] .table > thead > tr.info > th,
html[data-theme="dark"] .table > thead > tr.bg-info > th {
background-color: rgba(56, 189, 248, 0.14) !important;
color: var(--app-text) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .table > tbody > tr.warning > td,
html[data-theme="dark"] .table > tbody > tr.warning > th {
background-color: rgba(245, 158, 11, 0.16) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .table > tbody > tr.danger > td,
html[data-theme="dark"] .table > tbody > tr.danger > th {
background-color: rgba(239, 68, 68, 0.14) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .table > tbody > tr.active > td,
html[data-theme="dark"] .table > tbody > tr.active > th {
background-color: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .table.table-borderless > tbody > tr > td,
html[data-theme="dark"] .table.table-borderless > tbody > tr > th {
border-top-color: transparent !important;
}
/* PO line pricing expand row (custom-app #eef2f7) */
html[data-theme="dark"] tr.po-item-pricing-row > td {
background: var(--app-bg-elevated) !important;
color: var(--app-text-secondary) !important;
}
/* Typeahead — PO line menu (custom-app uses #fff !important on .po-line-item-tt-menu) */
html[data-theme="dark"] .tt-menu.po-line-item-tt-menu,
html[data-theme="dark"] .po-line-item-tt-menu.tt-dropdown-menu {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .po-line-item-tt-menu .tt-suggestion {
color: var(--app-text-secondary) !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .po-line-item-tt-menu .tt-suggestion.tt-cursor,
html[data-theme="dark"] .po-line-item-tt-menu .tt-suggestion:hover {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .po-line-item-tt-menu .tt-empty-message {
color: var(--app-text-muted) !important;
}
/* Typeahead — create sales order form */
html[data-theme="dark"] .create-salesorder-form .twitter-typeahead .tt-menu,
html[data-theme="dark"] .create-salesorder-form .twitter-typeahead .tt-dropdown-menu {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .create-salesorder-form .twitter-typeahead .tt-suggestion {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .create-salesorder-form .twitter-typeahead .tt-suggestion:hover,
html[data-theme="dark"] .create-salesorder-form .twitter-typeahead .tt-suggestion.tt-cursor {
background: var(--app-accent-dim) !important;
color: var(--app-text) !important;
}
/* layout/css/custom.css — sales order create line cards, summary, notes (pastel gradients) */
.so-edit-loading-mask {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(3px);
}
html[data-theme="dark"] .so-edit-loading-mask {
background: rgba(10, 14, 18, 0.92) !important;
color: var(--app-text-secondary) !important;
}
.create-salesorder-form .sales-order-payment-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--app-border);
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item {
background: var(--app-bg-card) !important;
background-image: none !important;
border-color: var(--app-border) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item:hover {
border-color: var(--app-accent) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .item-info-row {
background: var(--app-bg-elevated) !important;
background-image: none !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .pricing-info-row {
background: var(--app-bg-card) !important;
background-image: none !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .control-label,
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .item-info-row .control-label,
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .pricing-info-row .control-label {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item input.form-control,
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item select.form-control {
background: var(--app-bg-card) !important;
background-image: none !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item input.form-control:focus,
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item select.form-control:focus {
border-color: var(--app-accent) !important;
box-shadow: 0 0 0 3px var(--app-accent-dim) !important;
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item input[readonly] {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .currency-mask {
background: rgba(74, 222, 128, 0.14) !important;
background-image: none !important;
border-color: rgba(74, 222, 128, 0.45) !important;
color: #86efac !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .percentage-mask {
background: rgba(251, 191, 36, 0.12) !important;
background-image: none !important;
border-color: rgba(251, 191, 36, 0.42) !important;
color: #fde68a !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .auto-calculated {
background: rgba(56, 189, 248, 0.14) !important;
background-image: none !important;
border-color: rgba(56, 189, 248, 0.45) !important;
color: var(--app-text) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item .calculation-status {
color: #86efac !important;
background: rgba(74, 222, 128, 0.12) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item:before {
background: linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-hover) 100%) !important;
color: var(--app-on-accent) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item:focus-within {
border-color: var(--app-accent) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-line-item.calculating:after {
border-color: var(--app-accent) !important;
border-top-color: transparent !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-summary-section {
background: var(--app-bg-card) !important;
background-image: none !important;
border-color: var(--app-border) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-summary-section:hover {
border-color: var(--app-accent) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-section-header {
background: var(--app-bg-elevated) !important;
background-image: none !important;
border-bottom-color: var(--app-border) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-section-header h4 {
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-section-header h4 i {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-totals-grid {
background: var(--app-bg-card) !important;
background-image: none !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-total-item.final-total {
background: var(--app-bg-elevated) !important;
background-image: none !important;
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-label {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-total-item.final-total .summary-label {
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-input {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .summary-input:focus {
border-color: var(--app-accent) !important;
box-shadow: 0 0 0 3px var(--app-accent-dim) !important;
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .create-salesorder-form .readonly-input {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .create-salesorder-form .editable-input {
background: rgba(251, 191, 36, 0.12) !important;
background-image: none !important;
border-color: rgba(251, 191, 36, 0.45) !important;
color: #fde68a !important;
}
html[data-theme="dark"] .create-salesorder-form .final-amount {
background: rgba(74, 222, 128, 0.14) !important;
background-image: none !important;
border-color: rgba(74, 222, 128, 0.5) !important;
color: #bbf7d0 !important;
box-shadow: none !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-notes-section {
background: var(--app-bg-card) !important;
background-image: none !important;
border-color: var(--app-border) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .create-salesorder-form .sales-order-notes-section:hover {
border-color: var(--app-accent) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .create-salesorder-form .notes-label {
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .notes-label i {
color: var(--app-accent) !important;
}
html[data-theme="dark"] .create-salesorder-form .notes-textarea {
background: var(--app-bg-card) !important;
border-color: var(--app-border-strong) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .create-salesorder-form .notes-textarea:focus {
border-color: var(--app-accent) !important;
box-shadow: 0 0 0 3px var(--app-accent-dim) !important;
background: var(--app-bg-card) !important;
}
/* Beat custom.css !important on mt-repeater typeahead menu (sales order lines) */
html[data-theme="dark"] .create-salesorder-form .mt-repeater-item .twitter-typeahead .tt-menu,
html[data-theme="dark"] .create-salesorder-form .mt-repeater-item .twitter-typeahead .tt-dropdown-menu {
background: var(--app-bg-card) !important;
background-color: var(--app-bg-card) !important;
background-image: none !important;
border: 1px solid var(--app-border-strong) !important;
box-shadow: var(--app-shadow) !important;
}
html[data-theme="dark"] .create-salesorder-form .mt-repeater-item .twitter-typeahead .tt-suggestion:hover,
html[data-theme="dark"] .create-salesorder-form .mt-repeater-item .twitter-typeahead .tt-suggestion.tt-cursor {
background: var(--app-accent-dim) !important;
background-image: none !important;
color: var(--app-text) !important;
}
/* Proposal pick cards (custom-app pastels) */
html[data-theme="dark"] .proposal-basic-contact-site-row {
border-top-color: var(--app-border) !important;
}
html[data-theme="dark"] .proposal-basic-contact-site-heading {
color: var(--app-text) !important;
}
html[data-theme="dark"] .proposal-pick-card {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .proposal-pick-card--primary {
border-color: #4ade80 !important;
background: rgba(34, 197, 94, 0.12) !important;
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35) !important;
}
html[data-theme="dark"] .proposal-pick-card-static {
background: var(--app-bg-card) !important;
}
html[data-theme="dark"] .proposal-pick-card__name {
color: var(--app-text) !important;
}
html[data-theme="dark"] .proposal-pick-card__actions {
border-top-color: var(--app-border) !important;
}
/* Picking lists (assets/css/picking-lists.css) */
html[data-theme="dark"] .pl-loading-panel {
background: var(--app-bg-elevated) !important;
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .pl-tip-banner {
background: linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%) !important;
border-color: rgba(56, 189, 248, 0.35) !important;
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .picking-list-edit-page .portlet.light.bordered,
html[data-theme="dark"] .picking-list-view .portlet.light.bordered,
html[data-theme="dark"] .picking-lists-page .portlet.light.bordered {
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .picking-list-edit-page .portlet-title,
html[data-theme="dark"] .picking-list-edit-page .portlet-title .caption-subject {
border-bottom-color: var(--app-border) !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .pl-items-repeater .pl-item-card {
background: var(--app-bg-elevated) !important;
border-color: var(--app-border) !important;
}
html[data-theme="dark"] .pl-items-repeater .pl-item-card:hover {
border-color: var(--app-border-strong) !important;
box-shadow: var(--app-shadow-soft) !important;
}
html[data-theme="dark"] .pl-items-repeater .pl-item-card .control-label {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .picking-lists-page .pl-list-hero h3 {
color: var(--app-text) !important;
}
html[data-theme="dark"] .picking-lists-page .pl-list-hero small {
color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .picking-list-edit-page .tt-menu,
html[data-theme="dark"] .picking-list-edit-page .tt-dropdown-menu {
background: var(--app-bg-card) !important;
border: 1px solid var(--app-border) !important;
}
html[data-theme="dark"] .picking-list-edit-page .tt-suggestion {
color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .picking-list-edit-page .tt-suggestion:hover,
html[data-theme="dark"] .picking-list-edit-page .tt-suggestion.tt-cursor {
background: var(--app-accent-dim) !important;
background-image: none !important;
color: var(--app-text) !important;
}
html[data-theme="dark"] .pl-loading-panel .fa-spinner {
color: var(--app-accent) !important;
}
/* Picking list detail view — inline