/* * Wincos Theme Dynamic CSS * ============================= * Menerapkan styling sidebar & header berdasarkan data-* attributes di . * Default (wincos-blue) tetap memakai wincos-sidebar.css & wincos-header.css yang sudah ada. * File ini HANYA aktif untuk tema non-default (corporate-blue, slate, charcoal, dll). * * Dimuat SETELAH wincos-sidebar.css dan wincos-header.css. */ /* ===================================================================== THEME COLORS — CSS custom properties berdasarkan data-theme-colors ===================================================================== */ html[data-theme-colors="wincos-blue"] { --pe-primary: #1e40af; --pe-primary-rgb: 30, 64, 175; --bs-primary: #1e40af; --bs-primary-rgb: 30, 64, 175; --bs-link-color: #1e40af; --bs-link-hover-color: #1e3a8a; } html[data-theme-colors="blue"] { --pe-primary: #2563eb; --pe-primary-rgb: 37, 99, 235; --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; --bs-link-color: #2563eb; --bs-link-hover-color: #1d4ed8; } html[data-theme-colors="cyan"] { --pe-primary: #0891b2; --pe-primary-rgb: 8, 145, 178; --bs-primary: #0891b2; --bs-primary-rgb: 8, 145, 178; --bs-link-color: #0891b2; --bs-link-hover-color: #0e7490; } html[data-theme-colors="green"] { --pe-primary: #16a34a; --pe-primary-rgb: 22, 163, 74; --bs-primary: #16a34a; --bs-primary-rgb: 22, 163, 74; --bs-link-color: #16a34a; --bs-link-hover-color: #15803d; } html[data-theme-colors="red"] { --pe-primary: #dc2626; --pe-primary-rgb: 220, 38, 38; --bs-primary: #dc2626; --bs-primary-rgb: 220, 38, 38; --bs-link-color: #dc2626; --bs-link-hover-color: #b91c1c; } html[data-theme-colors="orange"] { --pe-primary: #ea580c; --pe-primary-rgb: 234, 88, 12; --bs-primary: #ea580c; --bs-primary-rgb: 234, 88, 12; --bs-link-color: #ea580c; --bs-link-hover-color: #c2410c; } /* Override Bootstrap .btn-primary agar mengikuti theme color */ html[data-theme-colors] .btn-primary { --bs-btn-bg: var(--pe-primary); --bs-btn-border-color: var(--pe-primary); --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); --bs-btn-active-bg: var(--bs-link-hover-color); --bs-btn-active-border-color: var(--bs-link-hover-color); --bs-btn-disabled-bg: var(--pe-primary); --bs-btn-disabled-border-color: var(--pe-primary); } html[data-theme-colors] .btn-outline-primary { --bs-btn-color: var(--pe-primary); --bs-btn-border-color: var(--pe-primary); --bs-btn-hover-bg: var(--pe-primary); --bs-btn-hover-border-color: var(--pe-primary); --bs-btn-active-bg: var(--pe-primary); --bs-btn-active-border-color: var(--pe-primary); } html[data-theme-colors] .text-primary { color: var(--pe-primary) !important; } html[data-theme-colors] .bg-primary { background-color: var(--pe-primary) !important; } html[data-theme-colors] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.pe-nav-link):not(.brand-tab) { color: var(--bs-link-color); } html[data-theme-colors] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.pe-nav-link):not(.brand-tab):hover { color: var(--bs-link-hover-color); } /* ===================================================================== FONT SIZE — berdasarkan data-font-size attribute ===================================================================== */ html[data-font-size="small"] body { font-size: 0.8125rem !important; } html[data-font-size="medium-small"] body { font-size: 0.84375rem !important; } html[data-font-size="default"] body { font-size: 0.875rem !important; } html[data-font-size="medium-large"] body { font-size: 0.9375rem !important; } html[data-font-size="large"] body { font-size: 1rem !important; } /* Sidebar width harus ikut font size */ html[data-font-size="small"] { --pe-app-sidebar-width: 14.5rem !important; } html[data-font-size="medium-small"] { --pe-app-sidebar-width: 15.25rem !important; } html[data-font-size="medium-large"] { --pe-app-sidebar-width: 17rem !important; } html[data-font-size="large"] { --pe-app-sidebar-width: 18rem !important; } html[data-font-size="small"] .pe-app-sidebar { width: 14.5rem !important; } html[data-font-size="small"] .app-wrapper { margin-left: 14.5rem !important; } html[data-font-size="medium-small"] .pe-app-sidebar { width: 15.25rem !important; } html[data-font-size="medium-small"] .app-wrapper { margin-left: 15.25rem !important; } html[data-font-size="medium-large"] .pe-app-sidebar { width: 17rem !important; } html[data-font-size="medium-large"] .app-wrapper { margin-left: 17rem !important; } html[data-font-size="large"] .pe-app-sidebar { width: 18rem !important; } html[data-font-size="large"] .app-wrapper { margin-left: 18rem !important; } /* Icon mode tetap sama ukurannya */ html[data-font-size="small"][data-sidebar="icon"] .pe-app-sidebar { width: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="small"][data-sidebar="icon"] .app-wrapper { margin-left: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="medium-small"][data-sidebar="icon"] .pe-app-sidebar { width: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="medium-small"][data-sidebar="icon"] .app-wrapper { margin-left: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="medium-large"][data-sidebar="icon"] .pe-app-sidebar { width: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="medium-large"][data-sidebar="icon"] .app-wrapper { margin-left: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="large"][data-sidebar="icon"] .pe-app-sidebar { width: var(--pe-app-sidebar-sm-width) !important; } html[data-font-size="large"][data-sidebar="icon"] .app-wrapper { margin-left: var(--pe-app-sidebar-sm-width) !important; } /* Mobile: sidebar tetap off-screen, width tidak pengaruh margin */ @media (max-width: 991.98px) { html[data-font-size="small"] .app-wrapper, html[data-font-size="medium-small"] .app-wrapper, html[data-font-size="medium-large"] .app-wrapper, html[data-font-size="large"] .app-wrapper { margin-left: 0 !important; } } /* Sidebar & Submenu font size harus ikut setting (override fixed !important dari wincos-overrides) */ html[data-font-size="small"] .pe-nav-content { font-size: 0.75rem !important; } html[data-font-size="small"] .pe-nav-icon { font-size: 0.9rem !important; } html[data-font-size="small"] .pe-slide-menu .pe-nav-link { font-size: 0.75rem !important; } html[data-font-size="small"] .pe-slide-menu .pe-nav-content1 { font-size: 0.65rem !important; } html[data-font-size="medium-small"] .pe-nav-content { font-size: 0.78rem !important; } html[data-font-size="medium-small"] .pe-nav-icon { font-size: 0.95rem !important; } html[data-font-size="medium-small"] .pe-slide-menu .pe-nav-link { font-size: 0.78rem !important; } html[data-font-size="medium-small"] .pe-slide-menu .pe-nav-content1 { font-size: 0.675rem !important; } html[data-font-size="default"] .pe-nav-content { font-size: 0.8125rem !important; } html[data-font-size="default"] .pe-nav-icon { font-size: 1rem !important; } html[data-font-size="default"] .pe-slide-menu .pe-nav-link { font-size: 0.8125rem !important; } html[data-font-size="default"] .pe-slide-menu .pe-nav-content1 { font-size: 0.7rem !important; } html[data-font-size="medium-large"] .pe-nav-content { font-size: 0.875rem !important; } html[data-font-size="medium-large"] .pe-nav-icon { font-size: 1.0625rem !important; } html[data-font-size="medium-large"] .pe-slide-menu .pe-nav-link { font-size: 0.875rem !important; } html[data-font-size="medium-large"] .pe-slide-menu .pe-nav-content1 { font-size: 0.75rem !important; } html[data-font-size="large"] .pe-nav-content { font-size: 0.9375rem !important; } html[data-font-size="large"] .pe-nav-icon { font-size: 1.125rem !important; } html[data-font-size="large"] .pe-slide-menu .pe-nav-link { font-size: 0.9375rem !important; } html[data-font-size="large"] .pe-slide-menu .pe-nav-content1 { font-size: 0.8rem !important; } /* ===================================================================== SIDEBAR THEMES (override wincos-sidebar.css jika bukan wincos-blue) ===================================================================== */ /* Corporate Blue */ html[data-sidebar-bg="corporate-blue"] .pe-app-sidebar { background: linear-gradient(180deg, #1e3a5f 0%, #152d4d 100%) !important; border-right-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="corporate-blue"] .pe-app-sidebar-logo { background: linear-gradient(135deg, rgba(30,58,95,.95) 0%, rgba(21,45,77,.9) 100%) !important; border-bottom-color: rgba(255,255,255,.1) !important; } html[data-sidebar-bg="corporate-blue"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="corporate-blue"] .pe-nav-link { color: #cbd5e1 !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="corporate-blue"] .pe-nav-link:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } html[data-sidebar-bg="corporate-blue"] .pe-nav-link.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; border-color: #3b82f6 !important; } html[data-sidebar-bg="corporate-blue"] .pe-nav-icon { color: #94a3b8; } html[data-sidebar-bg="corporate-blue"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="corporate-blue"] .pe-slide-menu { background: rgba(0,0,0,.15) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="corporate-blue"] .pe-slide-menu .pe-nav-link { color: #cbd5e1 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="corporate-blue"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; } html[data-sidebar-bg="corporate-blue"] .pe-slide-menu .pe-nav-link.active { background: rgba(59,130,246,.8) !important; color: #ffffff !important; } html[data-sidebar-bg="corporate-blue"] .pe-slide-menu .pe-nav-content1 { color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,.1) !important; } /* Soft Blue */ html[data-sidebar-bg="soft-blue"] .pe-app-sidebar { background: linear-gradient(180deg, #2c5282 0%, #1a365d 100%) !important; border-right-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="soft-blue"] .pe-app-sidebar-logo { background: rgba(26,54,93,.95) !important; border-bottom-color: rgba(255,255,255,.1) !important; } html[data-sidebar-bg="soft-blue"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="soft-blue"] .pe-nav-link { color: #bee3f8 !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="soft-blue"] .pe-nav-link:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } html[data-sidebar-bg="soft-blue"] .pe-nav-link.active { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important; color: #ffffff !important; border-color: #4299e1 !important; } html[data-sidebar-bg="soft-blue"] .pe-nav-icon { color: #90cdf4; } html[data-sidebar-bg="soft-blue"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="soft-blue"] .pe-slide-menu { background: rgba(0,0,0,.15) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="soft-blue"] .pe-slide-menu .pe-nav-link { color: #bee3f8 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="soft-blue"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; } html[data-sidebar-bg="soft-blue"] .pe-slide-menu .pe-nav-link.active { background: rgba(66,153,225,.8) !important; color: #ffffff !important; } html[data-sidebar-bg="soft-blue"] .pe-slide-menu .pe-nav-content1 { color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,.1) !important; } /* Slate */ html[data-sidebar-bg="slate"] .pe-app-sidebar { background: linear-gradient(180deg, #3d4f5f 0%, #2e3e4e 100%) !important; border-right-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="slate"] .pe-app-sidebar-logo { background: rgba(46,62,78,.95) !important; border-bottom-color: rgba(255,255,255,.1) !important; } html[data-sidebar-bg="slate"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="slate"] .pe-nav-link { color: #cbd5e1 !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="slate"] .pe-nav-link:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } html[data-sidebar-bg="slate"] .pe-nav-link.active { background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; color: #ffffff !important; border-color: #64748b !important; } html[data-sidebar-bg="slate"] .pe-nav-icon { color: #94a3b8; } html[data-sidebar-bg="slate"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="slate"] .pe-slide-menu { background: rgba(0,0,0,.15) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="slate"] .pe-slide-menu .pe-nav-link { color: #cbd5e1 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="slate"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; } html[data-sidebar-bg="slate"] .pe-slide-menu .pe-nav-link.active { background: rgba(100,116,139,.8) !important; color: #ffffff !important; } html[data-sidebar-bg="slate"] .pe-slide-menu .pe-nav-content1 { color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,.1) !important; } /* Charcoal */ html[data-sidebar-bg="charcoal"] .pe-app-sidebar { background: linear-gradient(180deg, #374151 0%, #1f2937 100%) !important; border-right-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="charcoal"] .pe-app-sidebar-logo { background: rgba(31,41,55,.95) !important; border-bottom-color: rgba(255,255,255,.1) !important; } html[data-sidebar-bg="charcoal"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="charcoal"] .pe-nav-link { color: #d1d5db !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="charcoal"] .pe-nav-link:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } html[data-sidebar-bg="charcoal"] .pe-nav-link.active { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; color: #ffffff !important; border-color: #6b7280 !important; } html[data-sidebar-bg="charcoal"] .pe-nav-icon { color: #9ca3af; } html[data-sidebar-bg="charcoal"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="charcoal"] .pe-slide-menu { background: rgba(0,0,0,.2) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="charcoal"] .pe-slide-menu .pe-nav-link { color: #d1d5db !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="charcoal"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; } html[data-sidebar-bg="charcoal"] .pe-slide-menu .pe-nav-link.active { background: rgba(107,114,128,.8) !important; color: #ffffff !important; } html[data-sidebar-bg="charcoal"] .pe-slide-menu .pe-nav-content1 { color: #e5e7eb !important; border-bottom-color: rgba(255,255,255,.1) !important; } /* Dark Navy */ html[data-sidebar-bg="dark-navy"] .pe-app-sidebar { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; border-right-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="dark-navy"] .pe-app-sidebar-logo { background: rgba(15,23,42,.95) !important; border-bottom-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="dark-navy"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="dark-navy"] .pe-nav-link { color: #94a3b8 !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="dark-navy"] .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; } html[data-sidebar-bg="dark-navy"] .pe-nav-link.active { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; color: #ffffff !important; border-color: #0ea5e9 !important; } html[data-sidebar-bg="dark-navy"] .pe-nav-icon { color: #64748b; } html[data-sidebar-bg="dark-navy"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="dark-navy"] .pe-slide-menu { background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.04) !important; } html[data-sidebar-bg="dark-navy"] .pe-slide-menu .pe-nav-link { color: #94a3b8 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="dark-navy"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; } html[data-sidebar-bg="dark-navy"] .pe-slide-menu .pe-nav-link.active { background: rgba(14,165,233,.7) !important; color: #ffffff !important; } html[data-sidebar-bg="dark-navy"] .pe-slide-menu .pe-nav-content1 { color: #cbd5e1 !important; border-bottom-color: rgba(255,255,255,.08) !important; } /* Light */ html[data-sidebar-bg="light"] .pe-app-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; border-right: 1px solid #e2e8f0 !important; } html[data-sidebar-bg="light"] .pe-app-sidebar-logo { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-sidebar-bg="light"] .pe-app-sidebar-logo a { color: #1e293b !important; } html[data-sidebar-bg="light"] .pe-nav-link { color: #475569 !important; background: rgba(241,245,249,.7) !important; border: 1px solid #e2e8f0 !important; } html[data-sidebar-bg="light"] .pe-nav-link:hover { background: #e2e8f0 !important; color: #1e293b !important; } html[data-sidebar-bg="light"] .pe-nav-link.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; border-color: #3b82f6 !important; } html[data-sidebar-bg="light"] .pe-nav-icon { color: #64748b; } html[data-sidebar-bg="light"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="light"] .pe-slide-menu { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } html[data-sidebar-bg="light"] .pe-slide-menu .pe-nav-link { color: #475569 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="light"] .pe-slide-menu .pe-nav-link:hover { background: #e2e8f0 !important; color: #1e293b !important; } html[data-sidebar-bg="light"] .pe-slide-menu .pe-nav-link.active { background: rgba(59,130,246,.9) !important; color: #ffffff !important; } html[data-sidebar-bg="light"] .pe-slide-menu .pe-nav-content1 { color: #334155 !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-sidebar-bg="light"] .pe-app-sidebar-logo::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); } /* Blue Gray */ html[data-sidebar-bg="blue-gray"] .pe-app-sidebar { background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important; border-right-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="blue-gray"] .pe-app-sidebar-logo { background: rgba(30,41,59,.95) !important; border-bottom-color: rgba(255,255,255,.1) !important; } html[data-sidebar-bg="blue-gray"] .pe-app-sidebar-logo a { color: #ffffff !important; } html[data-sidebar-bg="blue-gray"] .pe-nav-link { color: #cbd5e1 !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-sidebar-bg="blue-gray"] .pe-nav-link:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; } html[data-sidebar-bg="blue-gray"] .pe-nav-link.active { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; color: #ffffff !important; border-color: #60a5fa !important; } html[data-sidebar-bg="blue-gray"] .pe-nav-icon { color: #94a3b8; } html[data-sidebar-bg="blue-gray"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="blue-gray"] .pe-slide-menu { background: rgba(0,0,0,.2) !important; border-color: rgba(255,255,255,.06) !important; } html[data-sidebar-bg="blue-gray"] .pe-slide-menu .pe-nav-link { color: #cbd5e1 !important; background: transparent !important; border: none !important; } html[data-sidebar-bg="blue-gray"] .pe-slide-menu .pe-nav-link:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; } html[data-sidebar-bg="blue-gray"] .pe-slide-menu .pe-nav-link.active { background: rgba(96,165,250,.8) !important; color: #ffffff !important; } html[data-sidebar-bg="blue-gray"] .pe-slide-menu .pe-nav-content1 { color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,.1) !important; } /* ===================================================================== SIDEBAR LOGO — auto-invert untuk tema gelap Logo Wincos asli berwarna gelap, perlu di-invert + brightness saat sidebar background gelap agar tetap terlihat. ===================================================================== */ /* Wincos Blue (default) — warna asli dari wincos-overrides.css */ html[data-sidebar-bg="wincos-blue"] .pe-app-sidebar { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 100%) !important; } html[data-sidebar-bg="wincos-blue"] .pe-app-sidebar-logo { background: rgba(248, 250, 252, 0.9) !important; border-bottom: 1px solid rgba(203, 213, 225, 0.3) !important; } html[data-sidebar-bg="wincos-blue"] .pe-app-sidebar-logo a { color: #1e293b !important; } html[data-sidebar-bg="wincos-blue"] .pe-nav-link { color: #475569 !important; background: rgba(248, 250, 252, 0.7) !important; border: 1px solid rgba(203, 213, 225, 0.3) !important; } html[data-sidebar-bg="wincos-blue"] .pe-nav-link:hover { background: rgba(248, 250, 252, 0.9) !important; color: #1e40af !important; } html[data-sidebar-bg="wincos-blue"] .pe-nav-link.active { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important; color: #ffffff !important; border-color: #1e40af !important; } html[data-sidebar-bg="wincos-blue"] .pe-nav-icon { color: #475569; } html[data-sidebar-bg="wincos-blue"] .pe-nav-link.active .pe-nav-icon { color: #ffffff; } html[data-sidebar-bg="wincos-blue"] .pe-slide-menu { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(203, 213, 225, 0.4) !important; } html[data-sidebar-bg="wincos-blue"] .pe-slide-menu .pe-nav-content1 { color: #64748b !important; border-bottom: 2px solid rgba(203, 213, 225, 0.5) !important; } html[data-sidebar-bg="wincos-blue"] .pe-slide-menu .pe-nav-link { background: transparent !important; border: none !important; color: #475569 !important; } html[data-sidebar-bg="wincos-blue"] .pe-slide-menu .pe-nav-link:hover { background: rgba(248, 250, 252, 0.9) !important; color: #1e40af !important; } html[data-sidebar-bg="wincos-blue"] .pe-slide-menu .pe-nav-link.active { background: rgba(30, 64, 175, 0.1) !important; color: #1e40af !important; } /* Daftar tema sidebar gelap yang butuh logo putih */ html[data-sidebar-bg="corporate-blue"] .pe-app-sidebar-logo img, html[data-sidebar-bg="soft-blue"] .pe-app-sidebar-logo img, html[data-sidebar-bg="slate"] .pe-app-sidebar-logo img, html[data-sidebar-bg="charcoal"] .pe-app-sidebar-logo img, html[data-sidebar-bg="dark-navy"] .pe-app-sidebar-logo img, html[data-sidebar-bg="blue-gray"] .pe-app-sidebar-logo img { filter: brightness(0) invert(1) !important; } /* Tema light — pastikan logo tetap normal (reset filter) */ html[data-sidebar-bg="light"] .pe-app-sidebar-logo img, html[data-sidebar-bg="wincos-blue"] .pe-app-sidebar-logo img { filter: none !important; } /* ===================================================================== HEADER THEMES (override wincos-header.css jika bukan wincos-default) ===================================================================== */ html[data-header-bg="white"] .app-header { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; } html[data-header-bg="white"] .app-header .header-icon, html[data-header-bg="white"] .app-header a { color: #334155 !important; } html[data-header-bg="soft-gray"] .app-header { background: #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-header-bg="soft-gray"] .app-header .header-icon, html[data-header-bg="soft-gray"] .app-header a { color: #334155 !important; } html[data-header-bg="corporate-blue"] .app-header { background: #1e3a5f !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; } html[data-header-bg="corporate-blue"] .app-header .header-icon, html[data-header-bg="corporate-blue"] .app-header a { color: #ffffff !important; } html[data-header-bg="corporate-blue"] .app-header .vertical-toggle, html[data-header-bg="corporate-blue"] .app-header .header-btn { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: #ffffff !important; } html[data-header-bg="corporate-blue"] .app-header .theme-toggle-btn { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: #ffffff !important; } html[data-header-bg="navy"] .app-header { background: #1e293b !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } html[data-header-bg="navy"] .app-header .header-icon, html[data-header-bg="navy"] .app-header a { color: #ffffff !important; } html[data-header-bg="navy"] .app-header .vertical-toggle, html[data-header-bg="navy"] .app-header .header-btn { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: #ffffff !important; } html[data-header-bg="navy"] .app-header .theme-toggle-btn { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.15) !important; color: #ffffff !important; } html[data-header-bg="charcoal"] .app-header { background: #374151 !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; } html[data-header-bg="charcoal"] .app-header .header-icon, html[data-header-bg="charcoal"] .app-header a { color: #ffffff !important; } html[data-header-bg="charcoal"] .app-header .vertical-toggle, html[data-header-bg="charcoal"] .app-header .header-btn { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: #ffffff !important; } html[data-header-bg="charcoal"] .app-header .theme-toggle-btn { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: #ffffff !important; }