/* ===== MULTI-THEME SYSTEM FOR HEADER & NAVIGATION ===== */ /* Apply theme class to or element to switch themes */ /* Example: or */ /* ===== DEFAULT THEME (Blue - Current) ===== */ :root, .theme-blue { --header-bg: #334155; --sidebar-bg: #334155; --primary: #2563eb; --focus-color: #2e2fe3; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(255, 255, 255, 0.15); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #f8fafc; --breadcrumb-link: #3b82f6; --breadcrumb-link-hover: #1d4ed8; } /* ===== LIGHT THEME (Blue header, Off-white sidebar, Black text) ===== */ .theme-light { --header-bg: #f8fafc; --sidebar-bg: #f8fafc; --primary: #2563eb; --focus-color: #2e2fe3; --header-text: #1f2937; --nav-text: #1f2937; --nav-hover-bg: rgba(0, 0, 0, 0.05); --nav-active-bg: rgba(37, 99, 235, 0.1); --nav-border: #e5e7eb; --breadcrumb-bg: #ffffff; --breadcrumb-link: #2563eb; --breadcrumb-link-hover: #1d4ed8; } .theme-light .navigation-sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid #e5e7eb; } .theme-light .nav-item { color: var(--nav-text) !important; border-bottom-color: var(--nav-border) !important; } .theme-light .nav-item:hover { background: var(--nav-hover-bg) !important; color: #111827 !important; } .theme-light .nav-item.active { background: var(--nav-active-bg) !important; color: #1e40af !important; font-weight: 600; } .theme-light .nav-item i, .theme-light .nav-item .nav-icon { color: #6b7280 !important; } .theme-light .nav-item:hover i, .theme-light .nav-item:hover .nav-icon, .theme-light .nav-item.active i, .theme-light .nav-item.active .nav-icon { color: #1e40af !important; } .theme-light .nav-subitems { background: #f1f5f9 !important; } .theme-light .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #e5e7eb; } /* Light theme - Collapsed navigation popup styles */ .theme-light .nav-hover-popup, .theme-light .working-hover-popup { background: white !important; } .theme-light .nav-hover-popup .nav-hover-content, .theme-light .working-popup-content { background: white !important; border: 1px solid #e5e7eb !important; } .theme-light .nav-hover-popup .nav-hover-item, .theme-light .working-main-item { color: #1f2937 !important; background: white !important; } .theme-light .nav-hover-popup .nav-hover-item:hover, .theme-light .working-main-item:hover { background: #f3f4f6 !important; color: #111827 !important; } .theme-light .nav-hover-popup .nav-hover-subitem, .theme-light .working-sub-item { color: #6b7280 !important; } .theme-light .nav-hover-popup .nav-hover-subitem:hover, .theme-light .working-sub-item:hover { background: #f9fafb !important; color: #374151 !important; } .theme-light .nav-hover-popup .nav-hover-subitem.nav-hover-active, .theme-light .working-sub-item.active { background: #eff6ff !important; color: #2563eb !important; } /* Light theme - Collapsed sidebar initials */ .theme-light .navigation-sidebar.desktop-collapsed .nav-item { color: #1f2937 !important; } .theme-light .navigation-sidebar.desktop-collapsed .nav-initials { color: #1f2937 !important; } .theme-light .navigation-sidebar.desktop-collapsed .nav-item:hover { background: rgba(0, 0, 0, 0.05) !important; } /* ===== DARK THEME ===== */ .theme-dark { --header-bg: #1f2937; --sidebar-bg: #111827; --primary: #6366f1; --focus-color: #818cf8; --header-text: #f9fafb; --nav-text: rgba(255, 255, 255, 0.85); --nav-hover-bg: rgba(255, 255, 255, 0.08); --nav-active-bg: rgba(99, 102, 241, 0.2); --nav-border: rgba(255, 255, 255, 0.08); --breadcrumb-bg: #1f2937; --breadcrumb-link: #818cf8; --breadcrumb-link-hover: #a5b4fc; } .theme-dark .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #374151; } .theme-dark .breadcrumb-link { color: var(--breadcrumb-link); } .theme-dark .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } .theme-dark .breadcrumb-current { color: #e5e7eb; } .theme-dark .breadcrumb-separator { color: #6b7280; } /* ===== GREEN THEME ===== */ .theme-green { --header-bg: #166534; --sidebar-bg: #14532d; --primary: #22c55e; --focus-color: #16a34a; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(34, 197, 94, 0.2); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #f0fdf4; --breadcrumb-link: #16a34a; --breadcrumb-link-hover: #15803d; } .theme-green .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #bbf7d0; } .theme-green .breadcrumb-link { color: var(--breadcrumb-link); } .theme-green .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== PURPLE THEME ===== */ .theme-purple { --header-bg: #6b21a8; --sidebar-bg: #581c87; --primary: #a855f7; --focus-color: #9333ea; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(168, 85, 247, 0.2); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #faf5ff; --breadcrumb-link: #9333ea; --breadcrumb-link-hover: #7e22ce; } .theme-purple .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #e9d5ff; } .theme-purple .breadcrumb-link { color: var(--breadcrumb-link); } .theme-purple .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== TEAL THEME ===== */ .theme-teal { --header-bg: #0f766e; --sidebar-bg: #115e59; --primary: #14b8a6; --focus-color: #0d9488; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(20, 184, 166, 0.2); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #f0fdfa; --breadcrumb-link: #0d9488; --breadcrumb-link-hover: #0f766e; } .theme-teal .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #99f6e4; } .theme-teal .breadcrumb-link { color: var(--breadcrumb-link); } .theme-teal .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== ORANGE THEME ===== */ .theme-orange { --header-bg: #c2410c; --sidebar-bg: #9a3412; --primary: #f97316; --focus-color: #ea580c; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(249, 115, 22, 0.2); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #fff7ed; --breadcrumb-link: #ea580c; --breadcrumb-link-hover: #c2410c; } .theme-orange .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #fed7aa; } .theme-orange .breadcrumb-link { color: var(--breadcrumb-link); } .theme-orange .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== SLATE THEME (Professional Gray) ===== */ .theme-slate { --header-bg: #334155; --sidebar-bg: #1e293b; --primary: #64748b; --focus-color: #475569; --header-text: #f8fafc; --nav-text: rgba(255, 255, 255, 0.85); --nav-hover-bg: rgba(255, 255, 255, 0.08); --nav-active-bg: rgba(100, 116, 139, 0.25); --nav-border: rgba(255, 255, 255, 0.08); --breadcrumb-bg: #f1f5f9; --breadcrumb-link: #475569; --breadcrumb-link-hover: #334155; } .theme-slate .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #cbd5e1; } .theme-slate .breadcrumb-link { color: var(--breadcrumb-link); } .theme-slate .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== RED THEME ===== */ .theme-red { --header-bg: #b91c1c; --sidebar-bg: #991b1b; --primary: #ef4444; --focus-color: #dc2626; --header-text: #ffffff; --nav-text: rgba(255, 255, 255, 0.9); --nav-hover-bg: rgba(255, 255, 255, 0.1); --nav-active-bg: rgba(239, 68, 68, 0.2); --nav-border: rgba(255, 255, 255, 0.1); --breadcrumb-bg: #fef2f2; --breadcrumb-link: #dc2626; --breadcrumb-link-hover: #b91c1c; } .theme-red .breadcrumb-container { background: var(--breadcrumb-bg); border-bottom-color: #fecaca; } .theme-red .breadcrumb-link { color: var(--breadcrumb-link); } .theme-red .breadcrumb-link:hover { color: var(--breadcrumb-link-hover); } /* ===== APPLY THEME VARIABLES TO COMPONENTS ===== */ /* Header (top bar uses --header-bg; banner/app-header uses --primary blue) */ .app-header { background: #1049AE !important; color: white !important; } .header-title, .menu-toggle-button, .action-button, .user-menu-button { color: white !important; } /* Navigation Sidebar */ .navigation-sidebar { background: var(--sidebar-bg) !important; } .nav-item { color: var(--nav-text) !important; border-bottom-color: var(--nav-border) !important; } .nav-item:hover { background: var(--nav-hover-bg) !important; color: var(--header-text) !important; } .nav-item.active { background: var(--nav-active-bg) !important; color: var(--header-text) !important; } .nav-subitems { background: rgba(0, 0, 0, 0.15) !important; } /* Focus states */ .mud-input-outlined:focus-within .mud-input-outlined-border, .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--focus-color) !important; } /* Primary buttons and links */ .btn, .primary-btn { background: var(--primary) !important; } .action-link, .breadcrumb-link { color: var(--breadcrumb-link) !important; } .action-link:hover, .breadcrumb-link:hover { color: var(--breadcrumb-link-hover) !important; } /* Avatar in header */ .avatar { background: #1049AE !important; } /* ===== THEME TRANSITION (Smooth switching) ===== */ .app-header, .navigation-sidebar, .nav-item, .breadcrumb-container, .breadcrumb-link { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }