/* ═══════════════════════════════════════════════════════════════ PANEL GLOBAL — Unified Color System Single color: #2563eb (Professional Blue) Removes: --panel-color #2563eb purple, #607AE9, all gradients Loads LAST in → overrides custom.css, theme variants, left-sidebar.blade.php and topbar.blade.php inline styles. ════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════ 1. CSS VARIABLE OVERRIDE Fixes ALL var(--panel-color) usages: custom.css (70+ lines), left-sidebar.blade.php (8), topbar.blade.php (9) — in one declaration. ══════════════════════════════════════ */ :root { --panel-color: #2563eb; --panel-color-light: rgba(37, 99, 235, 0.08); --panel-color-mid: rgba(37, 99, 235, 0.18); /* button tokens */ --panel-btn-color: #2563eb; --panel-btn-hover: #1d4ed8; --panel-btn-active: #1e40af; --panel-btn-shadow: rgba(37, 99, 235, 0.28); --panel-btn-radius: 8px; --panel-danger: #ef4444; --panel-danger-hover: #dc2626; } /* ══════════════════════════════════════ 2. GRADIENT REMOVAL Replace all purple → purple/violet gradients with flat single color. Targets high-specificity rules in custom.css that use `#7f6ae8` endpoint. ══════════════════════════════════════ */ /* custom.css line 4647 — export button */ button.btn.btn-secondary.btn-success.waves-effect.waves-light, button.btn.btn-secondary.btn-success.waves-effect.waves-light:hover { background: #2563eb !important; background-image: none !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important; } /* custom.css line 4880 — all btn-info on content pages */ body .content-page .btn.btn-info, body .content-page .btn.btn-info:hover { background: #2563eb !important; background-image: none !important; } /* Strip ALL remaining gradient uses of panel-color */ [style*="linear-gradient"][style*="6366f1"], [style*="linear-gradient"][style*="607AE9"], [style*="linear-gradient"][style*="7f6ae8"] { background-image: none !important; background: #2563eb !important; } /* ══════════════════════════════════════ 3. HARDCODED HEX OVERRIDES Catches values NOT covered by --panel-color ══════════════════════════════════════ */ /* custom.css line 3757 — hardcoded #2563eb */ [style*="#2563eb"], [color="#2563eb"] { color: #2563eb !important; } /* Purple shadow/glow overrides */ [style*="rgba(96, 122, 233"], [style*="rgba(99,102,241"] { box-shadow: none !important; } /* ══════════════════════════════════════ 4. 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(37, 99, 235, 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; } /* ══════════════════════════════════════ 5. PRIMARY / INFO / SUCCESS / WARNING → single blue ══════════════════════════════════════ */ .btn-primary, .btn-info, .btn-success, .btn-warning, .btn-blue, .btn-pink { background: #2563eb !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: #1d4ed8 !important; background-image: none !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 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: #1e40af !important; background-image: none !important; transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important; } /* ══════════════════════════════════════ 6. 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; } /* ══════════════════════════════════════ 7. 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; } /* ══════════════════════════════════════ 8. OUTLINE VARIANTS ══════════════════════════════════════ */ .btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-warning { background: transparent !important; background-image: none !important; color: #2563eb !important; border: 1.5px solid #2563eb !important; box-shadow: none !important; } .btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-warning:hover { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 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; } /* ══════════════════════════════════════ 9. 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; } /* Remove pill shape from btn-info (custom.css forces 50px) */ .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; } /* ══════════════════════════════════════ 10. FORM FOCUS STATES custom.css uses purple border + shadow ══════════════════════════════════════ */ .form-control:focus, select.form-control:focus, textarea.form-control:focus, input.form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 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: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; } /* Selectize focus */ .selectize-input.focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important; } /* Checkbox / radio accent */ input[type="checkbox"], input[type="radio"] { accent-color: #2563eb !important; } /* ══════════════════════════════════════ 11. SIDEBAR ACTIVE / HOVER STATES var(--panel-color) handles most of it, but some hardcoded hover BGs need fix. ══════════════════════════════════════ */ /* Hover background tint */ .leftside-menu .side-nav-item a:hover, .leftside-menu .side-nav-item.menuitem-active a, .leftside-menu .menuitem-active > a { color: #2563eb !important; background: rgba(37, 99, 235, 0.07) !important; } /* Active submenu bullet */ .leftside-menu .side-nav-item.menuitem-active .side-nav-link::before, .leftside-menu .menuitem-active .side-nav-link:before { background: #2563eb !important; } /* Active indicator bar */ .leftside-menu .side-nav-item.menuitem-active > a { border-left: 3px solid #2563eb !important; } /* ══════════════════════════════════════ 12. TOPBAR & BREADCRUMB ══════════════════════════════════════ */ .navbar-custom a:hover, .topbar-menu a:hover { color: #2563eb !important; } .breadcrumb-item a, .breadcrumb-item a:hover { color: #2563eb !important; } .breadcrumb-item.active { color: #64748b !important; } /* ══════════════════════════════════════ 13. LINKS & ANCHORS ══════════════════════════════════════ */ a.text-primary, .text-primary { color: #2563eb !important; } .text-info { color: #2563eb !important; } /* ══════════════════════════════════════ 14. TABS (nav-tabs, nav-pills) ══════════════════════════════════════ */ .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #2563eb !important; border-bottom-color: #2563eb !important; } .nav-tabs .nav-link:hover { color: #2563eb !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: #2563eb !important; color: #ffffff !important; } /* Tab product underline */ .tab-product .nav-link.active, .tab-product .nav-link:hover { color: #2563eb !important; border-bottom: 2px solid #2563eb !important; } /* ══════════════════════════════════════ 15. PAGINATION ══════════════════════════════════════ */ .page-item.active .page-link { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } .page-link { color: #2563eb !important; } .page-link:hover { color: #1d4ed8 !important; } /* ══════════════════════════════════════ 16. BADGES ══════════════════════════════════════ */ .badge-primary, .badge-soft-primary { background: #dbeafe !important; color: #1d4ed8 !important; } .badge-info, .badge-soft-info { background: #e0f2fe !important; color: #0369a1 !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; } /* ══════════════════════════════════════ 17. PROGRESS BARS ══════════════════════════════════════ */ .progress-bar { background: #2563eb !important; background-image: none !important; } .progress-bar.bg-success, .progress-bar.bg-info, .progress-bar.bg-primary, .progress-bar.bg-warning { background: #2563eb !important; } /* ══════════════════════════════════════ 18. CHECKBOX / TOGGLE / SWITCHERY ══════════════════════════════════════ */ .custom-control-input:checked ~ .custom-control-label::before { background: #2563eb !important; border-color: #2563eb !important; } /* ══════════════════════════════════════ 20. WAVES RIPPLE COLOR ══════════════════════════════════════ */ .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; } /* ══════════════════════════════════════ 21. 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; } /* ══════════════════════════════════════ 22. STAT CARD PURPLE TINTS custom.css .vp-stat-purple card ══════════════════════════════════════ */ .vp-stat-purple .stat-icon { background: rgba(37,99,235,.1) !important; color: #2563eb !important; } .vp-stat-purple .stat-value { color: #1d4ed8 !important; } .vp-stat-purple .stat-label { color: #3b82f6 !important; } /* ══════════════════════════════════════ 23. SWITCH / TOGGLE purple fill ══════════════════════════════════════ */ .switchery > small { background: #ffffff !important; } /* ══════════════════════════════════════ 24. SCROLLBAR THUMB ══════════════════════════════════════ */ ::-webkit-scrollbar-thumb { background: #bfdbfe !important; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #93c5fd !important; } /* ══════════════════════════════════════ 25. STATUS CHANGE BUTTONS (custom.css lines ~10395-10457 gradient overrides) ══════════════════════════════════════ */ .btn-warning[onclick], .btn-success[onclick], .btn-info[onclick], [class*="changeStatus"], [class*="change-status"], .update-status, .status-btn { background: #2563eb !important; background-image: none !important; color: #ffffff !important; } .btn-warning[onclick]:hover, .btn-success[onclick]:hover, .btn-info[onclick]:hover { background: #1d4ed8 !important; background-image: none !important; }