/* ═══════════════════════════════════════════════════════════════ PANEL GLOBAL — Mersal Dispatcher Dynamic Color System Primary color driven by --panel-color / --color-primary CSS variables, set in head-css.blade.php from client_preferences.dashboard_color DB column. Admin can change it via Configure → Dashboard Color. Loads LAST in → overrides app-creative.min.css, custom.css. ════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════ 1. CSS VARIABLE TOKENS --panel-color pulls from --color-primary (set dynamically from DB). --dashboard-color-rgb is set in head-css.blade.php (PHP hex→rgb). ══════════════════════════════════════ */ :root { /* Admin dashboard color: from client_preferences.dashboard_color */ --panel-color: var(--color-primary, #1A5FD0); --panel-color-light: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.08); --panel-color-mid: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.18); /* button tokens */ --panel-btn-color: var(--color-primary, #1A5FD0); --panel-btn-hover: var(--color-primary-dark, #0E3C8A); --panel-btn-active: var(--color-primary-dark, #0E3C8A); --panel-btn-shadow: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.28); --panel-btn-radius: 8px; --panel-danger: #ef4444; --panel-danger-hover: #dc2626; } /* ══════════════════════════════════════ 2. GRADIENT REMOVAL Replace all golden/purple/violet gradients from framework theme. ══════════════════════════════════════ */ [style*="linear-gradient"][style*="6366f1"], [style*="linear-gradient"][style*="607AE9"], [style*="linear-gradient"][style*="7f6ae8"], [style*="linear-gradient"][style*="f6c23e"], [style*="linear-gradient"][style*="e0a800"] { background-image: none !important; background: var(--panel-color) !important; } /* ══════════════════════════════════════ 3. BASE .btn — shape, type, motion ══════════════════════════════════════ */ .btn { border-radius: var(--panel-btn-radius) !important; font-weight: 600 !important; font-size: 0.82rem !important; letter-spacing: 0.01em !important; padding: 8px 18px !important; line-height: 1.5 !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; text-transform: none !important; border: none !important; background-image: none !important; } .btn:focus, .btn.focus { outline: none !important; box-shadow: 0 0 0 3px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.18) !important; } .btn:disabled, .btn.disabled { opacity: 0.52 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; pointer-events: none !important; } /* ══════════════════════════════════════ 4. PRIMARY / INFO / SUCCESS / WARNING → single dynamic brand color ══════════════════════════════════════ */ .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-blue, .btn-pink { background: var(--panel-color) !important; background-image: none !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } .btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-warning:hover, .btn-blue:hover, .btn-pink:hover, .btn-primary:focus, .btn-info:focus, .btn-success:focus, .btn-warning:focus { background: var(--panel-btn-hover) !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.32) !important; transform: translateY(-1px) !important; } .btn-primary:active, .btn-info:active, .btn-success:active, .btn-warning:active, .btn-blue:active, .btn-pink:active { background: var(--panel-btn-active) !important; background-image: none !important; transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.22) !important; } /* ══════════════════════════════════════ 5. DANGER — kept red (semantic safety) ══════════════════════════════════════ */ .btn-danger { background: #ef4444 !important; background-image: none !important; color: #ffffff !important; border: none !important; } .btn-danger:hover, .btn-danger:focus { background: #dc2626 !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important; transform: translateY(-1px) !important; } .btn-danger:active { background: #b91c1c !important; transform: translateY(0) !important; } /* ══════════════════════════════════════ 6. SECONDARY / LIGHT / DARK ══════════════════════════════════════ */ .btn-light { background: #f8fafc !important; background-image: none !important; color: #374151 !important; border: 1.5px solid #e5e7eb !important; } .btn-light:hover { background: #f1f5f9 !important; transform: none !important; } .btn-dark { background: #1e293b !important; background-image: none !important; color: #ffffff !important; border: none !important; } .btn-dark:hover { background: #0f172a !important; box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important; } /* ══════════════════════════════════════ 7. OUTLINE VARIANTS ══════════════════════════════════════ */ .btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-warning { background: transparent !important; background-image: none !important; color: var(--panel-color) !important; border: 1.5px solid var(--panel-color) !important; box-shadow: none !important; } .btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-warning:hover { background: var(--panel-color) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.28) !important; transform: translateY(-1px) !important; } .btn-outline-danger { background: transparent !important; background-image: none !important; color: #ef4444 !important; border: 1.5px solid #ef4444 !important; } .btn-outline-danger:hover { background: #ef4444 !important; color: #ffffff !important; transform: translateY(-1px) !important; } .btn-outline-secondary { background: transparent !important; background-image: none !important; color: #64748b !important; border: 1.5px solid #cbd5e1 !important; } .btn-outline-secondary:hover { background: #f1f5f9 !important; transform: none !important; } /* ══════════════════════════════════════ 8. SIZE VARIANTS ══════════════════════════════════════ */ .btn-xs { padding: 3px 10px !important; font-size: 0.72rem !important; border-radius: 6px !important; } .btn-sm { padding: 5px 13px !important; font-size: 0.78rem !important; border-radius: 7px !important; } .btn-lg { padding: 11px 28px !important; font-size: 0.92rem !important; border-radius: 10px !important; } .btn-block { width: 100% !important; justify-content: center !important; } .btn-info { border-radius: 8px !important; } /* Icon-only square buttons */ .btn-icon { width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center !important; border-radius: 8px !important; gap: 0 !important; } .btn-icon.btn-sm { width: 30px !important; height: 30px !important; border-radius: 6px !important; } /* ══════════════════════════════════════ 9. FORM FOCUS STATES ══════════════════════════════════════ */ .form-control:focus, select.form-control:focus, textarea.form-control:focus, input.form-control:focus { border-color: var(--panel-color) !important; box-shadow: 0 0 0 3px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.12) !important; outline: none !important; } /* Select2 focus */ .select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--panel-color) !important; box-shadow: 0 0 0 3px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.12) !important; } /* Selectize focus */ .selectize-input.focus { border-color: var(--panel-color) !important; box-shadow: 0 0 0 3px rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.12) !important; } /* Checkbox / radio accent */ input[type="checkbox"], input[type="radio"] { accent-color: var(--panel-color) !important; } /* ══════════════════════════════════════ 10. SIDEBAR ACTIVE / HOVER STATES Matches dispatcher's actual HTML: #sidebar-menu > ul > li > a (not side-nav-item) Active class: menuitem-active on
  • , active on ══════════════════════════════════════ */ /* Text color: hover, focus, active, menuitem-active */ #sidebar-menu .menuitem-active .active, #sidebar-menu > ul > li > a:active, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:hover, body.dark #sidebar-menu .menuitem-active .active, body.dark #sidebar-menu > ul > li > a:active, body.dark #sidebar-menu > ul > li > a:focus, body.dark #sidebar-menu > ul > li > a:hover { color: var(--panel-color) !important; } /* Active indicator bar (left edge) */ #sidebar-menu > ul > li.menuitem-active > a { border-left: 3px solid var(--panel-color) !important; } /* Condensed sidebar: hover background */ body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu > ul > li:hover > a, body.dark[data-sidebar-size=condensed] .left-side-menu #sidebar-menu > ul > li:hover > a { background-color: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.12) !important; color: #ffffff !important; } /* ══════════════════════════════════════ 11. TOPBAR & BREADCRUMB ══════════════════════════════════════ */ .navbar-custom a:hover, .topbar-menu a:hover { color: var(--panel-color) !important; } .breadcrumb-item a, .breadcrumb-item a:hover { color: var(--panel-color) !important; } .breadcrumb-item.active { color: #64748b !important; } /* ══════════════════════════════════════ 12. LINKS & ANCHORS ══════════════════════════════════════ */ a.text-primary, .text-primary { color: var(--panel-color) !important; } .text-info { color: var(--panel-color) !important; } /* ══════════════════════════════════════ 13. TABS ══════════════════════════════════════ */ .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--panel-color) !important; border-bottom-color: var(--panel-color) !important; } .nav-tabs .nav-link:hover { color: var(--panel-color) !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--panel-color) !important; color: #ffffff !important; } /* ══════════════════════════════════════ 14. PAGINATION ══════════════════════════════════════ */ .page-item.active .page-link { background: var(--panel-color) !important; border-color: var(--panel-color) !important; color: #ffffff !important; } .page-link { color: var(--panel-color) !important; } .page-link:hover { color: var(--panel-btn-hover) !important; } /* ══════════════════════════════════════ 15. BADGES ══════════════════════════════════════ */ .badge-primary, .badge-soft-primary { background: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.12) !important; color: var(--panel-btn-hover) !important; } .badge-success, .badge-soft-success { background: #dcfce7 !important; color: #15803d !important; } .badge-warning, .badge-soft-warning { background: #fef9c3 !important; color: #854d0e !important; } .badge-danger, .badge-soft-danger { background: #fee2e2 !important; color: #991b1b !important; } /* ══════════════════════════════════════ 16. PROGRESS BARS ══════════════════════════════════════ */ .progress-bar { background: var(--panel-color) !important; background-image: none !important; } .progress-bar.bg-primary, .progress-bar.bg-info, .progress-bar.bg-success, .progress-bar.bg-warning { background: var(--panel-color) !important; } /* ══════════════════════════════════════ 17. CHECKBOX CUSTOM CONTROL ══════════════════════════════════════ */ .custom-control-input:checked ~ .custom-control-label::before { background: var(--panel-color) !important; border-color: var(--panel-color) !important; } /* ══════════════════════════════════════ 18. WAVES RIPPLE ══════════════════════════════════════ */ .waves-effect.btn-primary .waves-ripple, .waves-effect.btn-info .waves-ripple, .waves-effect.btn-success .waves-ripple, .waves-effect.btn-warning .waves-ripple { background: rgba(255,255,255,0.28) !important; } /* ══════════════════════════════════════ 19. DISMISS / CANCEL BUTTONS ══════════════════════════════════════ */ .btn[data-dismiss="modal"] { background: #f1f5f9 !important; background-image: none !important; color: #475569 !important; border: 1.5px solid #e2e8f0 !important; box-shadow: none !important; transform: none !important; } .btn[data-dismiss="modal"]:hover { background: #e2e8f0 !important; color: #1e293b !important; } /* ══════════════════════════════════════ 20. SCROLLBAR THUMB ══════════════════════════════════════ */ ::-webkit-scrollbar-thumb { background: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.25) !important; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.45) !important; } /* ══════════════════════════════════════ 21. TOPBAR BRAND BUTTON (Add Route etc) ══════════════════════════════════════ */ .navbar-custom .btn, .topbar .btn, #topnav .btn { background: var(--panel-color) !important; background-image: none !important; color: #ffffff !important; } .navbar-custom .btn:hover, .topbar .btn:hover, #topnav .btn:hover { background: var(--panel-btn-hover) !important; } /* ══════════════════════════════════════ 22. DISPATCHER custom.css GOLDEN OVERRIDES custom.css hardcodes rgb(247 184 75 / 82%) (#F7B84B) throughout — override every occurrence here. Selectors copied exactly from custom.css so !important wins. ══════════════════════════════════════ */ /* Line 210: btn-label & dt-buttons dark bg (has !important in source) */ .btn-label:active, .btn-label:focus, .dt-buttons .btn.btn-secondary:active, .dt-buttons .btn.btn-secondary:focus, body.dark .btn-label, body.dark .dt-buttons .btn.btn-secondary { background: var(--panel-color) !important; color: #ffffff !important; } /* Line 962: body.dark .btn — all buttons golden bg+border (dark mode) */ .dark .btn-blue:not(:disabled):not(.disabled).active, .dark .btn-blue:not(:disabled):not(.disabled):active, .dark .show > .btn-blue.dropdown-toggle, body.dark .btn { background-color: var(--panel-color) !important; border-color: var(--panel-color) !important; border-radius: 8px !important; color: #ffffff !important; } /* Line 1001: dark checkbox */ body.dark .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--panel-color) !important; background-color: var(--panel-color) !important; } /* Lines 1006-1010: dark radio */ body.dark .radio label::after, body.dark .radio-info input[type=radio]:checked label::after { background-color: var(--panel-color) !important; } body.dark .radio input[type=radio]:checked label::before, body.dark .radio-info input[type=radio]:checked label::before { border-color: var(--panel-color) !important; } /* Line 1258: scrollbar thumb */ #scroll-bar::-webkit-scrollbar-thumb { background-color: rgba(var(--dashboard-color-rgb, 26, 95, 208), 0.5) !important; } /* Line 1261: action icon button */ body.dark .btn.btn-primary-outline.action-icon { color: var(--panel-color) !important; } /* Line 1269: tagsinput border */ body.dark .tagsinput { border-color: var(--panel-color) !important; } /* Line 2069: add-sub-task button */ .dark .add-sub-task-btn { background-color: var(--panel-color) !important; color: #ffffff !important; } /* Line 2589: select2 multiple tag (has !important in source) */ body.darkbody.dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--panel-color) !important; border: none !important; }