/* Multi-Theme System for Bridge Solar CRM Supports: solar (default), teal, light themes Usage: Set data-theme attribute on element JavaScript toggles between themes and persists selection */ /* Base/Fallback Theme - Solar (Dark Orange) */ :root, [data-theme="solar"] { /* Primary Colors */ --color-primary: #b34700; --color-primary-rgb: 179,71,0; --color-secondary: #ff8800; --color-accent: #FDB813; /* Status Colors */ --color-success: #2ECC71; --color-warning: #E67E22; --color-danger: #E74C3C; --color-info: #3498DB; /* Background Colors */ --color-bg-primary: #102537; --color-bg-secondary: #16344B; --color-bg-surface: #1B3A57; --color-bg-hover: rgba(255,255,255,0.08); /* Text Colors */ --color-text-primary: #E6F2FA; --color-text-secondary: #9CB6C7; --color-text-muted: #6C8AA8; --color-text-inverse: #102537; /* Border & Divider */ --color-border: #224766; --color-divider: #2A5577; /* Gradients */ --gradient-primary: linear-gradient(135deg, #b34700 0%, #ff8800 100%); --gradient-secondary: linear-gradient(135deg, #1B3A57 0%, #16344B 100%); --gradient-sidebar: linear-gradient(180deg, #1B3A57 0%, #b34700 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: var(--color-text-primary); --sidebar-text-hover: #ffffff; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: var(--color-bg-secondary); --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Teal Theme */ [data-theme="teal"] { /* Primary Colors */ --color-primary: #0d5c63; --color-primary-rgb: 13,92,99; --color-secondary: #128c92; --color-accent: #17a2a5; /* Status Colors */ --color-success: #1fa87a; --color-warning: #c89c3d; --color-danger: #c75b54; --color-info: #1aa8b0; /* Background Colors */ --color-bg-primary: #072c30; --color-bg-secondary: #0d3c42; --color-bg-surface: #0f6b72; --color-bg-hover: rgba(255,255,255,0.08); /* Text Colors */ --color-text-primary: #e3f6f7; --color-text-secondary: #8ab3b6; --color-text-muted: #5a8b8e; --color-text-inverse: #072c30; /* Border & Divider */ --color-border: #14565d; --color-divider: #1e6b72; /* Gradients */ --gradient-primary: linear-gradient(135deg, #0d5c63 0%, #128c92 100%); --gradient-secondary: linear-gradient(135deg, #0f6b72 0%, #0d3c42 100%); --gradient-sidebar: linear-gradient(180deg, #0f6b72 0%, #0d5c63 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: var(--color-text-primary); --sidebar-text-hover: #ffffff; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: var(--color-bg-secondary); --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Light Theme */ [data-theme="light"] { /* Primary Colors */ --color-primary: #0066cc; --color-primary-rgb: 0,102,204; --color-secondary: #4285f4; --color-accent: #ff6d00; /* Status Colors */ --color-success: #28a745; --color-warning: #ffc107; --color-danger: #dc3545; --color-info: #17a2b8; /* Background Colors */ --color-bg-primary: #ffffff; --color-bg-secondary: #f8f9fa; --color-bg-surface: #e9ecef; --color-bg-hover: rgba(0,0,0,0.05); /* Text Colors */ --color-text-primary: #212529; --color-text-secondary: #495057; --color-text-muted: #6c757d; --color-text-inverse: #ffffff; /* Border & Divider */ --color-border: #dee2e6; --color-divider: #e9ecef; /* Gradients */ --gradient-primary: linear-gradient(135deg, #0066cc 0%, #4285f4 100%); --gradient-secondary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); --gradient-sidebar: linear-gradient(180deg, #4285f4 0%, #0066cc 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: #ffffff; --sidebar-text-hover: #ffffff; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: #ffffff; --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Soft Lavender Theme - Gentle and Modern */ [data-theme="lavender"] { /* Primary Colors - Soft Purple/Lavender */ --color-primary: #8B7EC8; --color-primary-rgb: 139,126,200; --color-secondary: #B8A9D9; --color-accent: #D4C5F9; /* Status Colors - Muted but clear */ --color-success: #7BB3A0; --color-warning: #D4A574; --color-danger: #C08497; --color-info: #7FB3D3; /* Background Colors - Very soft gradients */ --color-bg-primary: #F8F6FC; --color-bg-secondary: #F0EBFF; --color-bg-surface: #E6DEFF; --color-bg-hover: rgba(139,126,200,0.08); /* Text Colors */ --color-text-primary: #4A4458; --color-text-secondary: #6B5E7A; --color-text-muted: #8C7F96; --color-text-inverse: #FFFFFF; /* Border & Divider - Subtle lavender tints */ --color-border: #D1C4E9; --color-divider: #E1D5F0; /* Gradients - Very gentle slopes */ --gradient-primary: linear-gradient(135deg, #8B7EC8 0%, #B8A9D9 100%); --gradient-secondary: linear-gradient(135deg, #F0EBFF 0%, #E6DEFF 100%); --gradient-sidebar: linear-gradient(180deg, #B8A9D9 0%, #8B7EC8 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: #FFFFFF; --sidebar-text-hover: #FFFFFF; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: #FFFFFF; --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Sage Green Theme - Natural and Eco-Friendly */ [data-theme="sage"] { /* Primary Colors - Natural sage and forest greens */ --color-primary: #87A96B; --color-primary-rgb: 135,169,107; --color-secondary: #6B8E4A; --color-accent: #A4C286; /* Status Colors - Nature-inspired */ --color-success: #6FAF5B; --color-warning: #D4A574; --color-danger: #B85450; --color-info: #5B9BD5; /* Background Colors - Warm, natural tones */ --color-bg-primary: #F5F7F2; --color-bg-secondary: #EDF2E7; --color-bg-surface: #E5EDD8; --color-bg-hover: rgba(135,169,107,0.08); /* Text Colors */ --color-text-primary: #2D3E1A; --color-text-secondary: #4A5D32; --color-text-muted: #6B7C4E; --color-text-inverse: #FFFFFF; /* Border & Divider - Soft green tints */ --color-border: #C8D4B8; --color-divider: #D6E2C6; /* Gradients - Natural, organic feel */ --gradient-primary: linear-gradient(135deg, #87A96B 0%, #A4C286 100%); --gradient-secondary: linear-gradient(135deg, #EDF2E7 0%, #E5EDD8 100%); --gradient-sidebar: linear-gradient(180deg, #6B8E4A 0%, #87A96B 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: #FFFFFF; --sidebar-text-hover: #FFFFFF; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: #FFFFFF; --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Warm Terracotta Theme - Earthy and Welcoming */ [data-theme="terracotta"] { /* Primary Colors - Warm terracotta and peach */ --color-primary: #D4756B; --color-primary-rgb: 212,117,107; --color-secondary: #F4A261; --color-accent: #E9C46A; /* Status Colors - Warm earth tones */ --color-success: #8FA85B; --color-warning: #E76F51; --color-danger: #C8556C; --color-info: #94A3B8; /* Background Colors - Warm, inviting tones */ --color-bg-primary: #FAF0E6; --color-bg-secondary: #F7E6D3; --color-bg-surface: #F0D4BE; --color-bg-hover: rgba(212,117,107,0.08); /* Text Colors */ --color-text-primary: #5D2E1F; --color-text-secondary: #7D3E2A; --color-text-muted: #9D5E3A; --color-text-inverse: #FFFFFF; /* Border & Divider - Warm beige tints */ --color-border: #E4C4A8; --color-divider: #EBCDAA; /* Gradients - Warm, earthy slopes */ --gradient-primary: linear-gradient(135deg, #D4756B 0%, #F4A261 100%); --gradient-secondary: linear-gradient(135deg, #F7E6D3 0%, #F0D4BE 100%); --gradient-sidebar: linear-gradient(180deg, #F4A261 0%, #D4756B 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: #FFFFFF; --sidebar-text-hover: #FFFFFF; --sidebar-bg-hover: rgba(255,255,255,0.15); /* Form elements */ --input-bg: #FFFFFF; --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* Soft Yellow Theme - Sunny and Cheerful */ [data-theme="yellow"] { /* Primary Colors - Soft, warm yellows */ --color-primary: #F4D03F; --color-primary-rgb: 244,208,63; --color-secondary: #F7DC6F; --color-accent: #F9E79F; /* Status Colors - Warm, friendly tones */ --color-success: #58D68D; --color-warning: #F39C12; --color-danger: #E74C3C; --color-info: #5DADE2; /* Background Colors - Very light, creamy yellows */ --color-bg-primary: #FFFEF7; --color-bg-secondary: #FEF9E7; --color-bg-surface: #FCF3CF; --color-bg-hover: rgba(244,208,63,0.08); /* Text Colors - Warm browns for good contrast */ --color-text-primary: #7D6608; --color-text-secondary: #9A7D0A; --color-text-muted: #B7950B; --color-text-inverse: #FFFFFF; /* Border & Divider - Gentle yellow tints */ --color-border: #F4D03F; --color-divider: #F7DC6F; /* Gradients - Warm sunshine gradients */ --gradient-primary: linear-gradient(135deg, #F4D03F 0%, #F7DC6F 100%); --gradient-secondary: linear-gradient(135deg, #FEF9E7 0%, #FCF3CF 100%); --gradient-sidebar: linear-gradient(180deg, #F7DC6F 0%, #F4D03F 100%); /* Sidebar specific */ --sidebar-bg: var(--gradient-sidebar); --sidebar-text: #7D6608; --sidebar-text-hover: #5D4E06; --sidebar-bg-hover: rgba(125,102,8,0.15); /* Form elements */ --input-bg: #FFFFFF; --input-border: var(--color-border); --input-focus-border: var(--color-secondary); --input-text: var(--color-text-primary); } /* ===== COMPONENT STYLES USING THEME VARIABLES ===== */ /* Body and base styles */ body { background-color: var(--color-bg-primary); color: var(--color-text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* Cards */ .card { background-color: var(--color-bg-secondary) !important; border: 1px solid var(--color-border); color: var(--color-text-primary) !important; } .card-header { background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); } /* Buttons */ .btn-primary { background: var(--gradient-primary) !important; border-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; } .btn-primary:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3); } .btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-outline-primary:hover { background-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; } .btn-warning { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-text-inverse) !important; } /* Navigation and Navbar */ .navbar.bg-primary { background: var(--gradient-primary) !important; color: var(--color-text-inverse) !important; } .bg-primary { background: var(--gradient-primary) !important; color: var(--color-text-inverse) !important; } /* Sidebar */ .sidebar { background: var(--sidebar-bg) !important; color: var(--sidebar-text); transition: background 0.3s ease; } #sidebar .nav-link { color: var(--sidebar-text) !important; transition: all 0.2s ease; } #sidebar .nav-link:hover, #sidebar .nav-link:focus { background-color: var(--sidebar-bg-hover) !important; color: var(--sidebar-text-hover) !important; border-radius: 6px; } #sidebar .nav-link.active { background-color: rgba(255,255,255,0.25) !important; color: var(--sidebar-text-hover) !important; font-weight: 600; } /* Forms */ .form-control, .form-select { background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--input-text) !important; } .form-control:focus, .form-select:focus { background-color: var(--input-bg) !important; border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25) !important; color: var(--input-text) !important; } .form-control::placeholder { color: var(--color-text-muted) !important; } /* Tables */ .table { color: var(--color-text-primary); --bs-table-bg: transparent; } .table thead th { background-color: var(--color-bg-surface); border-color: var(--color-border); color: var(--color-text-primary); } .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--color-bg-hover); } /* Alerts */ .alert-info { background-color: var(--color-info); color: var(--color-text-inverse); border: none; } .alert-success { background-color: var(--color-success); color: var(--color-text-inverse); border: none; } .alert-warning { background-color: var(--color-warning); color: var(--color-text-inverse); border: none; } .alert-danger { background-color: var(--color-danger); color: var(--color-text-inverse); border: none; } /* Badges */ .badge.bg-warning { background-color: var(--color-accent) !important; color: var(--color-text-inverse) !important; } .badge.bg-primary { background-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; } /* Links */ a { color: var(--color-accent); } a:hover { color: var(--color-secondary); } /* Dropdown menus */ .dropdown-menu { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); } .dropdown-item { color: var(--color-text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-bg-hover); color: var(--color-text-primary); } .dropdown-divider { border-color: var(--color-border); } /* Footer */ footer { background-color: var(--color-bg-surface) !important; color: var(--color-text-primary); } /* Text utilities */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-danger { color: var(--color-danger) !important; } .text-info { color: var(--color-info) !important; } .text-muted { color: var(--color-text-muted) !important; } /* Scrollbar theming */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--color-bg-surface); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); } /* Theme transition for smooth switching */ * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Theme selector styling */ .theme-selector { min-width: 120px; } .theme-selector .form-select { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-primary); font-size: 0.875rem; } /* Utility classes for theme-aware text colors */ .text-theme-primary { color: var(--color-text-primary) !important; } .text-theme-secondary { color: var(--color-text-secondary) !important; } .text-theme-muted { color: var(--color-text-muted) !important; } .text-theme-inverse { color: var(--color-text-inverse) !important; } /* Page-specific theme classes to replace hardcoded white text */ .theme-aware-page, .theme-aware-page *, .inventory-page, .inventory-page *, .customer-management-page, .customer-management-page *, .customer-interests-page, .customer-interests-page * { color: var(--color-text-primary) !important; } /* Override specific problematic elements */ .theme-aware-text { color: var(--color-text-primary) !important; } .theme-aware-text-muted { color: var(--color-text-muted) !important; } .theme-aware-bg { background-color: var(--color-bg-primary) !important; } .theme-aware-bg-secondary { background-color: var(--color-bg-secondary) !important; }