/* ================================================================ MES Theme System – CSS Custom Properties Usage: set data-theme="blue|teal|slate" and data-mode="light|dark" on Bootstrap dark mode: data-bs-theme="dark" is set alongside data-mode ================================================================ */ /* ── Accent tokens: Blue Ocean (default) ──────────────────── */ :root, [data-theme="blue"] { --primary: #4a6cf7; --primary-soft: #e6ecff; --primary-dark: #324bc4; --primary-gradient-end: #6b89ff; --primary-rgb: 74, 108, 247; --accent: #ff7a7a; } /* ── Accent tokens: Industrial Teal ──────────────────────── */ [data-theme="teal"] { --primary: #0f766e; --primary-soft: #ccfbf1; --primary-dark: #0d5e57; --primary-gradient-end: #14b8a6; --primary-rgb: 15, 118, 110; --accent: #f97316; } /* ── Accent tokens: Slate Blue ───────────────────────────── */ [data-theme="slate"] { --primary: #1d4ed8; --primary-soft: #dbeafe; --primary-dark: #1e40af; --primary-gradient-end: #3b82f6; --primary-rgb: 29, 78, 216; --accent: #f59e0b; } /* ── Accent tokens: Forest Green ────────────────────────── */ [data-theme="green"] { --primary: #16a34a; --primary-soft: #dcfce7; --primary-dark: #15803d; --primary-gradient-end: #22c55e; --primary-rgb: 22, 163, 74; --accent: #f97316; } /* ── Accent tokens: Amber ────────────────────────────────── */ [data-theme="amber"] { --primary: #d97706; --primary-soft: #fef3c7; --primary-dark: #b45309; --primary-gradient-end: #f59e0b; --primary-rgb: 217, 119, 6; --accent: #ef4444; } /* ── Accent tokens: Violet ───────────────────────────────── */ [data-theme="purple"] { --primary: #7c3aed; --primary-soft: #ede9fe; --primary-dark: #6d28d9; --primary-gradient-end: #8b5cf6; --primary-rgb: 124, 58, 237; --accent: #f59e0b; } /* ── Accent tokens: Rose ─────────────────────────────────── */ [data-theme="rose"] { --primary: #e11d48; --primary-soft: #ffe4e6; --primary-dark: #be123c; --primary-gradient-end: #f43f5e; --primary-rgb: 225, 29, 72; --accent: #f59e0b; } /* ── Accent tokens: Cool Gray ────────────────────────────── */ [data-theme="gray"] { --primary: #475569; --primary-soft: #f1f5f9; --primary-dark: #334155; --primary-gradient-end: #64748b; --primary-rgb: 71, 85, 105; --accent: #f97316; } /* ── Accent tokens: Crimson ──────────────────────────────── */ [data-theme="crimson"] { --primary: #dc2626; --primary-soft: #fee2e2; --primary-dark: #b91c1c; --primary-gradient-end: #ef4444; --primary-rgb: 220, 38, 38; --accent: #f59e0b; } /* ── Layout tokens: Light mode (default) ─────────────────── */ :root { --body-bg: radial-gradient(120% 120% at 10% 10%, #f4f7ff 0, #fdfdff 35%, #eef2fb 100%); --body-color: #1f2a44; --muted-color: #6b7280; --navbar-bg: #ffffff; --navbar-border: #e9ecef; --navbar-shadow: 0 1px 8px rgba(0,0,0,.06); --sidebar-bg: #ffffff; --sidebar-border: #eef1f6; --sidebar-shadow: 6px 0 20px rgba(17,24,39,.05); --sidebar-heading-color: #1f2a44; --sidebar-item-color: #556987; --sidebar-item-hover-bg: #f8faff; --sidebar-item-hover-color: var(--primary); --sidebar-item-active-bg: var(--primary-soft); --sidebar-item-active-color: var(--primary-dark); --sidebar-item-active-border: var(--primary); --footer-bg: #ffffff; --footer-border: #edf2f7; --footer-color: #6b7280; --card-bg: #ffffff; --card-shadow: 0 10px 30px rgba(0,0,0,.06); --chat-popup-bg: #ffffff; --chat-popup-border: #eef2f6; --chat-body-bg: #f9fafb; --chat-bot-msg-bg: #ffffff; --chat-bot-msg-color: #333333; --chat-footer-bg: #ffffff; --chat-footer-border: #eeeeee; --chat-panel-bg: #f8fafc; --chat-panel-border: #e5e7eb; --chat-input-bg: #f8f9fa; --typing-dot-color: #aaaaaa; --radius-lg: 16px; --transition-speed: 0.3s; } /* ── Layout tokens: Dark mode ────────────────────────────── */ [data-mode="dark"] { --body-bg: #0f172a; --body-color: #e2e8f0; --muted-color: #94a3b8; --navbar-bg: #1e293b; --navbar-border: #334155; --navbar-shadow: 0 1px 8px rgba(0,0,0,.35); --sidebar-bg: #1e293b; --sidebar-border: #334155; --sidebar-shadow: 6px 0 20px rgba(0,0,0,.35); --sidebar-heading-color: #f1f5f9; --sidebar-item-color: #94a3b8; --sidebar-item-hover-bg: #334155; --sidebar-item-hover-color: var(--primary); --sidebar-item-active-bg: rgba(var(--primary-rgb), .18); --sidebar-item-active-color: var(--primary); --sidebar-item-active-border: var(--primary); --footer-bg: #1e293b; --footer-border: #334155; --footer-color: #94a3b8; --card-bg: #1e293b; --card-shadow: 0 10px 30px rgba(0,0,0,.35); --chat-popup-bg: #1e293b; --chat-popup-border: #334155; --chat-body-bg: #0f172a; --chat-bot-msg-bg: #334155; --chat-bot-msg-color: #e2e8f0; --chat-footer-bg: #1e293b; --chat-footer-border: #334155; --chat-panel-bg: #0f172a; --chat-panel-border: #334155; --chat-input-bg: #0f172a; --typing-dot-color: #64748b; } /* ── Dark: per-theme sidebar active tweak ────────────────── */ [data-mode="dark"][data-theme="blue"] { --sidebar-item-active-bg: rgba(74,108,247,.18); } [data-mode="dark"][data-theme="teal"] { --sidebar-item-active-bg: rgba(15,118,110,.22); } [data-mode="dark"][data-theme="slate"] { --sidebar-item-active-bg: rgba(29,78,216,.2); } /* ================================================================ Bootstrap utility overrides for dark mode (Bootstrap 5.3 data-bs-theme handles most components; these cover classes we use that Bootstrap doesn't auto-swap) ================================================================ */ nav.navbar.fixed-top, nav.navbar.fixed-top.navbar-solid { --bs-bg-opacity: 1 !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border-bottom-color: var(--navbar-border) !important; box-shadow: var(--navbar-shadow) !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } nav.navbar.fixed-top .input-group, nav.navbar.fixed-top .form-control, nav.navbar.fixed-top .input-group-text { background-color: var(--card-bg) !important; background-image: none !important; } nav.navbar.fixed-top .input-group-text.bg-transparent { background-color: var(--card-bg) !important; } [data-mode="dark"] nav.navbar, [data-mode="dark"] nav.navbar.fixed-top.navbar-solid { background: #1e293b !important; background-color: #1e293b !important; background-image: none !important; border-bottom-color: var(--navbar-border) !important; box-shadow: var(--navbar-shadow) !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-mode="dark"] footer { background-color: var(--footer-bg) !important; border-top-color: var(--footer-border) !important; color: var(--footer-color) !important; } [data-mode="dark"] .bg-white { background-color: var(--card-bg) !important; } [data-mode="dark"] .bg-light, [data-mode="dark"] .bg-body-tertiary { background-color: var(--chat-input-bg) !important; } [data-mode="dark"] .text-muted { color: var(--muted-color) !important; } [data-mode="dark"] .text-dark { color: var(--body-color) !important; } [data-mode="dark"] .border-bottom { border-bottom-color: var(--navbar-border) !important; } [data-mode="dark"] .border-top { border-top-color: var(--footer-border) !important; } [data-mode="dark"] .shadow-sm { box-shadow: var(--navbar-shadow) !important; } [data-mode="dark"] .dropdown-menu { background-color: var(--card-bg); border-color: var(--sidebar-border); } [data-mode="dark"] .dropdown-item { color: var(--body-color); } [data-mode="dark"] .dropdown-item:hover, [data-mode="dark"] .dropdown-item:focus { background-color: var(--sidebar-item-hover-bg); color: var(--primary); } [data-mode="dark"] .dropdown-divider { border-color: var(--sidebar-border); } [data-mode="dark"] .dropdown-header { color: var(--muted-color); } [data-mode="dark"] .btn-light { background-color: var(--sidebar-item-hover-bg); border-color: var(--sidebar-border); color: var(--body-color); } [data-mode="dark"] .btn-light:hover { background-color: var(--sidebar-border); color: var(--primary); } [data-mode="dark"] .btn-outline-secondary { border-color: var(--sidebar-border); color: var(--muted-color); } [data-mode="dark"] .btn-outline-secondary:hover { background-color: var(--sidebar-item-hover-bg); color: var(--body-color); } [data-mode="dark"] .form-control, [data-mode="dark"] .form-select { background-color: var(--chat-input-bg); color: var(--body-color); border-color: var(--sidebar-border); } [data-mode="dark"] .form-control:focus, [data-mode="dark"] .form-select:focus { background-color: var(--chat-input-bg); color: var(--body-color); border-color: var(--primary); } [data-mode="dark"] .input-group-text { background-color: var(--chat-input-bg); color: var(--muted-color); border-color: var(--sidebar-border); } [data-mode="dark"] .card { background-color: var(--card-bg); border-color: var(--sidebar-border); } [data-mode="dark"] .card-header, [data-mode="dark"] .card-footer { border-color: var(--sidebar-border); background-color: rgba(255,255,255,.04); } [data-mode="dark"] .table { color: var(--body-color); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.06); --bs-table-border-color: var(--sidebar-border); } [data-mode="dark"] .table-light { --bs-table-bg: rgba(255,255,255,.04); } [data-mode="dark"] .modal-content { background-color: var(--card-bg); color: var(--body-color); border-color: var(--sidebar-border); } [data-mode="dark"] .modal-header, [data-mode="dark"] .modal-footer { border-color: var(--sidebar-border); } [data-mode="dark"] hr { border-color: var(--sidebar-border); } [data-mode="dark"] .list-group-item { background-color: transparent; border-color: var(--sidebar-border); color: var(--body-color); } [data-mode="dark"] .nav-tabs { border-color: var(--sidebar-border); } [data-mode="dark"] .nav-tabs .nav-link { color: var(--muted-color); } [data-mode="dark"] .nav-tabs .nav-link.active { background-color: var(--card-bg); border-color: var(--sidebar-border) var(--sidebar-border) var(--card-bg); color: var(--primary); } [data-mode="dark"] .pagination .page-link { background-color: var(--card-bg); border-color: var(--sidebar-border); color: var(--body-color); } [data-mode="dark"] .pagination .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } [data-mode="dark"] .pagination .page-link:hover { background-color: var(--sidebar-item-hover-bg); color: var(--primary); } /* ================================================================ Theme Switcher Widget ================================================================ */ .theme-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--navbar-border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted-color); transition: background .2s, color .2s, border-color .2s; flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--sidebar-item-hover-bg); color: var(--primary); border-color: var(--primary); } /* ── Named theme chips ───────────────────────────────────── */ .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .theme-chip { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; border: 1.5px solid transparent; background: transparent; cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--sidebar-item-color); transition: background .15s, color .15s, border-color .15s; width: 100%; text-align: left; white-space: nowrap; } .theme-chip:hover { background: var(--sidebar-item-hover-bg); color: var(--body-color); } .theme-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; } [data-mode="dark"] .theme-chip.active { color: var(--primary); } .theme-chip-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); } /* ── Section label ───────────────────────────────────────── */ .theme-panel-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-color); } /* ── Mode buttons active state ───────────────────────────── */ #themeLightBtn.active, #themeDarkBtn.active { background-color: var(--primary); border-color: var(--primary); color: #fff; } /* ================================================================ Bootstrap Primary Color Bridge Bootstrap 5.3 compiles button/badge colors as hex values. Override via component-level CSS custom properties so every .btn-primary, .text-primary, .bg-primary, badge, etc. follows the active theme's --primary variable automatically. ================================================================ */ :root { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-link-color-rgb: var(--primary-rgb); } .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-focus-shadow-rgb: var(--primary-rgb); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); } /* ── Solid primary (no opacity modifier) ───────────────────── */ .badge.bg-primary, span.bg-primary { background-color: var(--primary) !important; } /* ── Soft tint variants: bypass Bootstrap's broken opacity chain ─ Bootstrap 5.3 compiles --bs-bg-opacity into bg-primary but the cascade order means bg-opacity-* loses to our higher-specificity override above. Fix by targeting the combined selector directly. */ .badge.bg-primary.bg-opacity-10, span.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-10 { background-color: var(--primary-soft) !important; color: var(--primary-dark) !important; /* darker text → better contrast on light soft bg */ } .badge.bg-primary.bg-opacity-25, span.bg-primary.bg-opacity-25, .bg-primary.bg-opacity-25 { background-color: rgba(var(--primary-rgb), 0.25) !important; color: var(--primary-dark) !important; } .badge.bg-primary.bg-opacity-50, span.bg-primary.bg-opacity-50, .bg-primary.bg-opacity-50 { background-color: rgba(var(--primary-rgb), 0.50) !important; } /* Keep .text-primary inside soft containers consistent */ .badge.bg-primary.bg-opacity-10.text-primary, .badge.bg-primary.bg-opacity-25.text-primary, span.bg-primary.bg-opacity-10.text-primary, span.bg-primary.bg-opacity-25.text-primary, .bg-primary.bg-opacity-10 .text-primary, .bg-primary.bg-opacity-25 .text-primary { color: var(--primary-dark) !important; } /* ── Dark mode: primary-soft is too light on dark cards ──────── */ [data-mode="dark"] .badge.bg-primary.bg-opacity-10, [data-mode="dark"] span.bg-primary.bg-opacity-10, [data-mode="dark"] .bg-primary.bg-opacity-10 { background-color: rgba(var(--primary-rgb), 0.15) !important; } [data-mode="dark"] .badge.bg-primary.bg-opacity-25, [data-mode="dark"] span.bg-primary.bg-opacity-25, [data-mode="dark"] .bg-primary.bg-opacity-25 { background-color: rgba(var(--primary-rgb), 0.28) !important; } [data-mode="dark"] .badge.bg-primary.bg-opacity-50, [data-mode="dark"] span.bg-primary.bg-opacity-50, [data-mode="dark"] .bg-primary.bg-opacity-50 { background-color: rgba(var(--primary-rgb), 0.45) !important; } /* ── Dark mode: text-primary on soft bg uses lighter gradient-end ─ --primary is the full-saturation token (often too dark on dark bg). --primary-gradient-end is the lighter tint → readable contrast. */ [data-mode="dark"] .badge.bg-primary.bg-opacity-10, [data-mode="dark"] .badge.bg-primary.bg-opacity-25, [data-mode="dark"] span.bg-primary.bg-opacity-10, [data-mode="dark"] span.bg-primary.bg-opacity-25, [data-mode="dark"] .bg-primary.bg-opacity-10, [data-mode="dark"] .bg-primary.bg-opacity-25 { color: var(--primary-gradient-end) !important; } /* Preserve icon/text color inside soft-primary containers in dark mode */ [data-mode="dark"] .badge.bg-primary.bg-opacity-10.text-primary, [data-mode="dark"] .badge.bg-primary.bg-opacity-25.text-primary, [data-mode="dark"] span.bg-primary.bg-opacity-10.text-primary, [data-mode="dark"] span.bg-primary.bg-opacity-25.text-primary, [data-mode="dark"] .bg-primary.bg-opacity-10 .text-primary, [data-mode="dark"] .bg-primary.bg-opacity-25 .text-primary { color: var(--primary-gradient-end) !important; } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25); } .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary); } .progress-bar { background-color: var(--primary); } /* ================================================================ Dark mode: native form controls Tells the browser to render date/time pickers, scrollbars, etc. in dark style — without this the browser widget stays light. ================================================================ */ [data-mode="dark"] { color-scheme: dark; } /* ================================================================ Dark mode: additional component fixes ================================================================ */ [data-mode="dark"] .alert-info { --bs-alert-color: #93c5fd; --bs-alert-bg: rgba(29,78,216,.15); --bs-alert-border-color: rgba(29,78,216,.3); } [data-mode="dark"] .alert-success { --bs-alert-color: #86efac; --bs-alert-bg: rgba(22,163,74,.15); --bs-alert-border-color: rgba(22,163,74,.3); } [data-mode="dark"] .alert-warning { --bs-alert-color: #fcd34d; --bs-alert-bg: rgba(217,119,6,.15); --bs-alert-border-color: rgba(217,119,6,.3); } [data-mode="dark"] .alert-danger { --bs-alert-color: #fca5a5; --bs-alert-bg: rgba(220,38,38,.15); --bs-alert-border-color: rgba(220,38,38,.3); } [data-mode="dark"] .input-group > .form-control, [data-mode="dark"] .input-group > .form-select { background-color: var(--chat-input-bg); color: var(--body-color); border-color: var(--sidebar-border); } [data-mode="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--body-color); } /* ================================================================ Global Search Dropdown ================================================================ */ .global-search-wrap { position: relative; } .search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060; background: var(--card-bg); border: 1px solid var(--sidebar-border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.12); overflow: hidden; max-height: 72vh; overflow-y: auto; } .search-category-header { padding: 5px 12px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-color); background: var(--sidebar-item-hover-bg); border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: 6px; } .search-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; text-decoration: none; color: var(--body-color); border-bottom: 1px solid var(--sidebar-border); transition: background .12s, color .12s; outline: none; } .search-result-item:last-child { border-bottom: 0; } .search-result-item:hover, .search-result-item.kbd-focus { background: var(--sidebar-item-hover-bg); color: var(--primary); text-decoration: none; } .search-result-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; } .search-result-label { font-weight: 600; font-size: .84rem; line-height: 1.2; } .search-result-sub { font-size: .74rem; color: var(--muted-color); line-height: 1.2; margin-top: 1px; } .search-result-item:hover .search-result-sub, .search-result-item.kbd-focus .search-result-sub { color: inherit; opacity: .75; } .search-empty, .search-loading { padding: 18px 14px; text-align: center; color: var(--muted-color); font-size: .84rem; } /* ================================================================ Global Theme Surface Overrides Loaded after page-specific CSS from base.html so common Bootstrap, DataTables, and report surfaces follow the live selected theme. ================================================================ */ :root { --surface-bg: var(--card-bg); --surface-soft-bg: #f8fafc; --surface-border: #e5e7eb; --surface-heading-bg: color-mix(in srgb, var(--primary) 9%, #ffffff); --surface-heading-color: var(--primary-dark); --surface-hover-bg: color-mix(in srgb, var(--primary) 7%, transparent); } [data-mode="dark"] { --surface-bg: var(--card-bg); --surface-soft-bg: #0f172a; --surface-border: var(--sidebar-border); --surface-heading-bg: color-mix(in srgb, var(--primary) 18%, #0f172a); --surface-heading-color: color-mix(in srgb, var(--primary-gradient-end) 58%, #ffffff); --surface-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent); } .card { background-color: var(--surface-bg); color: var(--body-color); border-color: var(--surface-border); } .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-secondary):not(.bg-dark) { background-color: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; border-color: var(--surface-border) !important; } .card-header.bg-white, .card-header.bg-light, .card-header.bg-transparent { background-color: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; border-color: var(--surface-border) !important; } .card-header.bg-primary { background-color: var(--primary) !important; color: #fff !important; } .card-header.bg-info { background-color: color-mix(in srgb, var(--primary-gradient-end) 85%, #0ea5e9) !important; color: #fff !important; } .card-header.bg-secondary, .card-header.bg-dark { background-color: color-mix(in srgb, var(--primary-dark) 60%, #334155) !important; color: #fff !important; } .table { --bs-table-color: var(--body-color); --bs-table-border-color: var(--surface-border); --bs-table-hover-bg: var(--surface-hover-bg); color: var(--body-color); border-color: var(--surface-border); } .table > :not(caption) > * > * { color: var(--body-color); border-color: var(--surface-border); } .table thead th, .table thead td { background-color: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; border-color: var(--surface-border) !important; font-weight: 700; } .table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--surface-heading-bg); --bs-table-color: var(--surface-heading-color); color: var(--surface-heading-color) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover-bg) !important; color: var(--body-color) !important; } .form-control, .form-select, .input-group-text { background-color: var(--surface-bg); color: var(--body-color); border-color: var(--surface-border); } .form-control:focus, .form-select:focus { background-color: var(--surface-bg); color: var(--body-color); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .16); } .form-control::placeholder { color: var(--muted-color); opacity: .85; } .list-group-item.active, .nav-pills .nav-link.active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .border-primary { border-color: var(--primary) !important; } .text-primary, a.text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .progress-bar.bg-primary, .progress-bar:not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary) { background-color: var(--primary) !important; } .page-link { background-color: var(--surface-bg); border-color: var(--surface-border); color: var(--body-color); } .page-link:hover, .page-link:focus { background-color: var(--sidebar-item-hover-bg); border-color: var(--primary); color: var(--primary); } .page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); color: #fff; } .page-item.disabled .page-link { background-color: var(--surface-soft-bg); border-color: var(--surface-border); color: var(--muted-color); } /* DataTables Bootstrap integration */ .dataTables_wrapper, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing { color: var(--muted-color) !important; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background-color: var(--surface-bg) !important; color: var(--body-color) !important; border: 1px solid var(--surface-border) !important; border-radius: 6px; } .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link, .dataTables_wrapper .pagination .page-link { background-color: var(--surface-bg) !important; border-color: var(--surface-border) !important; color: var(--body-color) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link, .dataTables_wrapper .pagination .page-item.active .page-link { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.disabled .page-link, .dataTables_wrapper .pagination .page-item.disabled .page-link { background-color: var(--surface-soft-bg) !important; color: var(--muted-color) !important; } .dataTables_wrapper table.dataTable thead th, .dataTables_wrapper table.dataTable thead td { background-color: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; border-color: var(--surface-border) !important; } .dataTables_wrapper table.dataTable tbody tr, .dataTables_wrapper table.dataTable tbody td { background-color: transparent !important; color: var(--body-color) !important; border-color: var(--surface-border) !important; } .dataTables_wrapper table.dataTable tbody tr:hover td { background-color: var(--surface-hover-bg) !important; } /* Page-specific templates often use bg-white/bg-light or inline pale gradients. Normalize those common surfaces so palette/mode changes are reflected without editing every page first. */ .bg-white { background-color: var(--surface-bg) !important; } .bg-light, .bg-body-tertiary, .text-bg-light { background-color: var(--surface-soft-bg) !important; color: var(--body-color) !important; } .card-footer.bg-white, .card-footer.bg-light, .modal-header.bg-white, .modal-header.bg-light, .modal-footer.bg-white, .modal-footer.bg-light { background-color: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; border-color: var(--surface-border) !important; } .input-group-text.bg-white, .input-group-text.bg-light { background-color: var(--surface-soft-bg) !important; color: var(--muted-color) !important; border-color: var(--surface-border) !important; } .card[style*="background: linear-gradient"], .card[style*="background:linear-gradient"], .card[style*="background: linear-gradient(180deg, #ffffff"], .card[style*="background: linear-gradient(120deg,#f5f8ff"], .card[style*="background: linear-gradient(120deg,#eef7ff"], .card[style*="background: linear-gradient(135deg,#eef6ff"] { background: linear-gradient(135deg, var(--surface-heading-bg), var(--surface-bg)) !important; color: var(--body-color) !important; } [data-mode="dark"] .card[style*="background: linear-gradient"], [data-mode="dark"] .card[style*="background:linear-gradient"] { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, #1e293b), #0f172a) !important; } [style*="background:#f8fafc"], [style*="background: #f8fafc"], [style*="background:#fbfdff"], [style*="background: #fbfdff"], [style*="background:#f8fbff"], [style*="background: #f8fbff"], [style*="background:#f9fcff"], [style*="background: #f9fcff"] { background: var(--surface-soft-bg) !important; color: var(--body-color) !important; } [data-mode="dark"] [style*="color:#111827"], [data-mode="dark"] [style*="color: #111827"], [data-mode="dark"] [style*="color:#0f172a"], [data-mode="dark"] [style*="color: #0f172a"], [data-mode="dark"] [style*="color:#1f2937"], [data-mode="dark"] [style*="color: #1f2937"], [data-mode="dark"] [style*="color:#334155"], [data-mode="dark"] [style*="color: #334155"] { color: var(--body-color) !important; } [data-mode="dark"] [style*="color:#6b7280"], [data-mode="dark"] [style*="color: #6b7280"], [data-mode="dark"] [style*="color:#64748b"], [data-mode="dark"] [style*="color: #64748b"], [data-mode="dark"] [style*="color:#475569"], [data-mode="dark"] [style*="color: #475569"] { color: var(--muted-color) !important; } /* Masterdata form shells that define their own local blue palette. */ .item-form-shell, .labor-form-shell { --item-accent: var(--primary) !important; --item-accent-soft: var(--primary-soft) !important; --item-ink: var(--body-color) !important; --item-muted: var(--muted-color) !important; --item-border: var(--surface-border) !important; --labor-accent: var(--primary) !important; --labor-border: var(--surface-border) !important; --labor-muted: var(--muted-color) !important; --labor-ink: var(--body-color) !important; } .item-form-shell .hero-card, .labor-form-shell .hero-card { background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent) 0, transparent 40%), linear-gradient(135deg, var(--surface-heading-bg), var(--surface-bg)) !important; color: var(--body-color) !important; } .item-form-shell .section-head, .labor-form-shell .section-head { background: var(--surface-heading-bg) !important; border-color: var(--surface-border) !important; } .item-form-shell .section-card, .labor-form-shell .section-card, .item-form-shell .check-tile, .labor-form-shell .check-tile, .item-form-shell .mini-kpi, .labor-form-shell .summary-box, .item-form-shell .media-preview, .labor-form-shell .camera-wrap, .labor-form-shell .preview-wrap { background: var(--surface-bg) !important; border-color: var(--surface-border) !important; color: var(--body-color) !important; } .item-form-shell .section-title, .labor-form-shell .section-title, .item-form-shell .field-wrap label, .labor-form-shell .field-wrap label, .item-form-shell .mini-kpi .value, .labor-form-shell .summary-value { color: var(--body-color) !important; } .item-form-shell .hero-subtitle, .labor-form-shell .hero-subtitle, .item-form-shell .mini-kpi .label, .labor-form-shell .summary-label, .item-form-shell .media-empty, .labor-form-shell .preview-empty { color: var(--muted-color) !important; } /* Inventory receipt/issue ERP-style pages with custom table surfaces. */ .erp-card { background: var(--surface-bg) !important; border-color: var(--surface-border) !important; color: var(--body-color) !important; } .erp-card-header, .page-header-box { background: var(--surface-heading-bg) !important; border-color: var(--surface-border) !important; color: var(--surface-heading-color) !important; } .erp-card-header .badge, .header-po-pill { background: var(--surface-soft-bg) !important; border-color: var(--surface-border) !important; color: var(--body-color) !important; } .receipt-table thead th, .receipt-table tbody td { background: var(--surface-bg) !important; border-color: var(--surface-border) !important; color: var(--body-color) !important; } .receipt-table thead th { background: var(--surface-heading-bg) !important; color: var(--surface-heading-color) !important; } .formset-row:hover td, .receipt-table tbody tr:hover td { background: var(--surface-hover-bg) !important; } .receipt-table .form-control, .receipt-table .form-select, .receipt-table .select2-container--default .select2-selection--single { color: var(--body-color) !important; } .receipt-table .form-control:hover, .receipt-table .form-select:hover, .receipt-table .select2-container--default .select2-selection--single:hover, .receipt-table .form-control:focus, .receipt-table .form-select:focus, .receipt-table .select2-container--open .select2-selection--single { background-color: var(--surface-bg) !important; border-color: var(--primary) !important; }