@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); /* =================================== VEHICARE UNIFIED THEME SYSTEM One theme for all pages - automatically applies =================================== */ :root { /* Primary Colors – Vibrant indigo/violet with modern gradients */ --primary: #6366f1; --primary-hover: #818cf8; --primary-light: rgba(99, 102, 241, 0.15); --secondary: #1e293b; /* Action & Status Colors - More vibrant */ --success: #10b981; --success-light: rgba(16, 185, 129, 0.15); --warning: #f59e0b; --warning-light: rgba(245, 158, 11, 0.15); --danger: #ef4444; --danger-light: rgba(239, 68, 68, 0.15); --info: #3b82f6; --info-light: rgba(59, 130, 246, 0.15); /* Beautiful Dark Theme with Gradient Backgrounds */ --dash-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); --dash-bg-solid: #0a0e1a; /* Fallback solid color */ --dash-sidebar: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --dash-sidebar-solid: #1e293b; /* Fallback solid color */ /* Enhanced Card Colors with Glassmorphism */ --dash-card: rgba(30, 41, 59, 0.7); --dash-card-glass: rgba(30, 41, 59, 0.6); --dash-card-border: rgba(99, 102, 241, 0.2); --dash-card-hover: rgba(99, 102, 241, 0.3); --dash-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --dash-card-shadow-hover: 0 12px 48px rgba(99, 102, 241, 0.2); /* Text Colors */ --dash-text: rgba(255, 255, 255, 0.95); --dash-text-muted: #94a3b8; --dash-text-secondary: rgba(255, 255, 255, 0.75); --dash-accent: #818cf8; --dash-logout: #f87171; /* Chart / Accent Colors - More vibrant */ --chart-purple: #a78bfa; --chart-green: #34d399; --chart-blue: #60a5fa; --chart-pink: #f472b6; --chart-orange: #fb923c; --chart-cyan: #22d3ee; /* Neutral Colors */ --muted: #94a3b8; --border: rgba(99, 102, 241, 0.2); --border-light: rgba(255, 255, 255, 0.1); --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-dark: #1e293b; --text-light: #ffffff; --text-dark: #1a1a1a; --text-muted: #64748b; --header-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --card-border: rgba(99, 102, 241, 0.2); /* Enhanced Shadows with Color */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25); --shadow-primary: 0 8px 24px rgba(99, 102, 241, 0.3); /* Beautiful Gradients */ --gradient-start: #6366f1; --gradient-end: #8b5cf6; --gradient-mid: #a78bfa; --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%); --gradient-primary-alt: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%); --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%); --gradient-info: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --gradient-card: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); /* Message Items (Light backgrounds with dark text - exception to dark theme) */ --msg-bg: #f8f9fa; --msg-text: #495057; --msg-text-muted: #6c757d; --msg-border: #e9ecef; /* Public Pages (Login, Register, etc.) - Enhanced */ --public-bg: #000000; --public-bg-gradient: linear-gradient(135deg, #000000 0%, #0f172a 50%, #1e293b 100%); --public-card: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%); --public-text: rgba(255, 255, 255, 0.95); --public-text-muted: rgba(255, 255, 255, 0.75); } /* =================================== ADMIN / SHOP / USER DASHBOARD – CCBIS-style dark theme Add `class="admin-dark"` or `class="app-dark"` on =================================== */ body.admin-dark, body.app-dark { --msg-bg: #1e293b; --msg-text: #e2e8f0; --msg-text-muted: #94a3b8; background: var(--dash-bg-solid); background-image: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 50%), var(--dash-bg); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-attachment: fixed; color: var(--dash-text); min-height: 100vh; position: relative; overflow-x: hidden; } body.admin-dark > *, body.app-dark > * { position: relative; z-index: 1; } /* Main content area – no extra bg so cards stand out */ body.admin-dark .main-content, body.app-dark .main-content { background: transparent; position: relative; padding: 1.5rem; } body.admin-dark .main-content::before, body.app-dark .main-content::before { display: none; } /* =================================== PUBLIC PAGES THEME (Privacy, Terms, Register) Same dark + shiny white as login/dashboard – one design, all pages Add body class="page-public" on privacy.php, terms.php, register.php =================================== */ body.page-public { background: #000000 !important; color: rgba(255, 255, 255, 0.92); min-height: 100vh; position: relative; font-family: 'Poppins', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100vw !important; } html { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; background: #000000 !important; } * { box-sizing: border-box; } /* Hide scrollbar for public pages - No white bar on the side */ body.page-public::-webkit-scrollbar { width: 0px !important; display: none !important; } body.page-public::-webkit-scrollbar-track { background: transparent !important; display: none !important; } body.page-public::-webkit-scrollbar-thumb { background: transparent !important; display: none !important; } html::-webkit-scrollbar { width: 0px !important; display: none !important; } html::-webkit-scrollbar-track { background: transparent !important; display: none !important; } html::-webkit-scrollbar-thumb { background: transparent !important; display: none !important; } /* Hide scrollbar for all elements on public pages */ body.page-public *::-webkit-scrollbar { width: 0px !important; display: none !important; } body.page-public *::-webkit-scrollbar-track { background: transparent !important; display: none !important; } body.page-public *::-webkit-scrollbar-thumb { background: transparent !important; display: none !important; } /* Firefox - Hide scrollbar */ html { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.page-public { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.page-public * { scrollbar-width: none !important; -ms-overflow-style: none !important; } body.page-public::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.page-public::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Ensure no sidebar appears on public pages */ body.page-public .sidebar { display: none !important; width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } /* Ensure main-content takes full width on public pages (no sidebar space) */ body.page-public .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } /* Override any column classes on main-content for public pages */ body.page-public .main-content.col-md-9, body.page-public .main-content.col-lg-10 { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } body.page-public::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 40%, rgba(15, 23, 42, 0.95) 100%); z-index: 0; pointer-events: none; } body.page-public > * { position: relative; z-index: 1; } body.page-public .privacy-container, body.page-public .terms-container { min-height: 100vh; background: transparent; } /* Header bar (same as index login page) */ body.page-public .logo, body.page-public .header { background: rgba(26, 35, 46, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: white; padding: 1.25rem 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } body.page-public .logo h1, body.page-public .header .logo, body.page-public .logo { color: rgba(255, 255, 255, 0.98); font-size: 1.75rem; font-weight: 700; } body.page-public .logo p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; font-size: 0.9rem; } /* Content cards – dark glass (same as dashboard cards) */ body.page-public .section, body.page-public .terms-content, body.page-public .terms-section, body.page-public .register-container { background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.92); } body.page-public .section { max-width: 900px; margin: 0 auto 1rem; padding: 1.5rem; border-radius: 10px; } body.page-public .section:first-of-type { margin-top: 1rem; } body.page-public .section:hover, body.page-public .terms-section:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } body.page-public .terms-content { max-width: 900px; margin: 1rem auto; padding: 2rem; border-radius: 10px; } body.page-public .terms-section { padding: 1.25rem; margin-bottom: 0.5rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } body.page-public .section h2, body.page-public .terms-content h2, body.page-public .terms-content h3 { color: rgba(255, 255, 255, 0.95); font-weight: 700; } body.page-public .section h2 i, body.page-public .terms-content .text-primary { color: rgba(147, 197, 253, 0.95); } body.page-public .section p, body.page-public .section ul, body.page-public .terms-content p { color: rgba(255, 255, 255, 0.75); line-height: 1.7; } body.page-public .section li { color: rgba(255, 255, 255, 0.75); } body.page-public .section li i { color: rgba(147, 197, 253, 0.9); } body.page-public .bg-primary.bg-opacity-10 { background-color: rgba(37, 99, 235, 0.2) !important; } body.page-public .back-link { text-align: center; padding: 1.5rem; } body.page-public .back-link .btn { border-radius: 8px; padding: 0.5rem 1.5rem; font-weight: 500; border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.95); } body.page-public .back-link .btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: white; } /* Register page */ body.page-public .main-content { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 3rem; overflow-y: auto; overflow-x: hidden !important; background: transparent; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.page-public .register-container { width: 100%; max-width: 550px; margin: 1rem auto; padding: 2rem; border-radius: 12px; } body.page-public .register-container h2, body.page-public .register-container .text-muted { color: rgba(255, 255, 255, 0.95) !important; } body.page-public .form-label { color: rgba(255, 255, 255, 0.9) !important; } body.page-public .form-control { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95); } body.page-public .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } body.page-public .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1); } body.page-public .form-text { color: rgba(255, 255, 255, 0.6) !important; } body.page-public .btn-register { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: none; border-radius: 8px; font-weight: 600; padding: 0.75rem 1.5rem; } body.page-public .btn-register:hover { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); color: white; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4); } body.page-public .login-link { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } body.page-public .login-link p, body.page-public .login-link a { color: rgba(255, 255, 255, 0.85); } body.page-public .login-link a:hover { color: rgba(255, 255, 255, 1); } body.page-public .terms-checkbox { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 0.75rem; } body.page-public .terms-checkbox .form-check-label, body.page-public .terms-checkbox a { color: rgba(255, 255, 255, 0.9); } body.page-public .terms-checkbox a:hover { color: rgba(147, 197, 253, 1); } body.page-public .alert { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); } body.page-public .alert-info { background: rgba(14, 165, 233, 0.15); color: rgba(255, 255, 255, 0.9); } body.page-public .alert-danger { background: rgba(239, 68, 68, 0.2); color: rgba(254, 226, 226, 0.98); } body.page-public .alert ul { color: inherit; } @media (max-width: 768px) { body.page-public .logo, body.page-public .header { padding: 1rem 1.5rem; } body.page-public .section { padding: 1.25rem; margin-bottom: 0.75rem; } body.page-public .terms-content { padding: 1.25rem; } body.page-public .main-content { padding: 1.5rem 1rem; } body.page-public .register-container { padding: 1.5rem; } } body.admin-dark h1, body.admin-dark h2, body.admin-dark h3, body.admin-dark h4, body.admin-dark h5, body.admin-dark h6, body.app-dark h1, body.app-dark h2, body.app-dark h3, body.app-dark h4, body.app-dark h5, body.app-dark h6 { color: rgba(255, 255, 255, 0.95); } body.admin-dark .main-content h1, body.admin-dark .main-content h2, body.admin-dark .main-content h3, body.admin-dark .main-content h4, body.app-dark .main-content h1, body.app-dark .main-content h2, body.app-dark .main-content h3, body.app-dark .main-content h4 { color: var(--text-light) !important; } body.admin-dark .main-content .text-muted, body.app-dark .main-content .text-muted { color: var(--dash-text-muted) !important; } body.admin-dark p, body.app-dark p { color: rgba(255, 255, 255, 0.9) !important; } /* Ensure ALL text elements are visible in dark theme */ body.admin-dark, body.app-dark { color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark div:not(.card-header):not(.bg-primary):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning), body.app-dark div:not(.card-header):not(.bg-primary):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning) { color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark span:not(.badge):not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger), body.app-dark span:not(.badge):not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) { color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark select option, body.app-dark select option { background: var(--dash-card) !important; color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark .form-select option, body.app-dark .form-select option { background: var(--dash-card) !important; color: rgba(255, 255, 255, 0.9) !important; } /* Ensure all text elements are visible - comprehensive */ body.admin-dark .main-content *:not(.card-header):not(.bg-primary):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning), body.app-dark .main-content *:not(.card-header):not(.bg-primary):not(.bg-info):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning) { color: inherit; } body.admin-dark .main-content p:not(.text-muted):not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger), body.app-dark .main-content p:not(.text-muted):not(.text-primary):not(.text-success):not(.text-info):not(.text-warning):not(.text-danger) { color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark .main-content strong, body.app-dark .main-content strong { color: rgba(255, 255, 255, 0.95) !important; } body.admin-dark .main-content small:not(.text-muted), body.app-dark .main-content small:not(.text-muted) { color: rgba(255, 255, 255, 0.8) !important; } body.admin-dark .main-content .text-muted, body.app-dark .main-content .text-muted { color: rgba(255, 255, 255, 0.6) !important; } /* Sidebar – CCBIS-style: dark panel, indigo active item */ /* Sidebar with Beautiful Gradient */ body.admin-dark .sidebar, body.app-dark .sidebar { background: var(--dash-sidebar-solid); background-image: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%), radial-gradient(circle at top right, rgba(99, 102, 241, 0.1) 0%, transparent 50%); background: var(--dash-sidebar); border-right: 1px solid var(--dash-card-border); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2); } body.admin-dark .sidebar-header, body.app-dark .sidebar-header { border-bottom: 1px solid var(--dash-card-border); } body.admin-dark .sidebar-header h1, body.app-dark .sidebar-header h1 { color: var(--text-light); } body.admin-dark .sidebar-header p, body.app-dark .sidebar-header p { color: var(--dash-text-muted); } /* Welcome / user name accent (light blue) */ body.admin-dark .sidebar-header .d-flex.align-items-center p, body.app-dark .sidebar-header .d-flex.align-items-center p { color: var(--dash-text-muted); } body.admin-dark .sidebar .nav-link, body.app-dark .sidebar .nav-link { color: var(--dash-text-muted); border-radius: 8px; margin: 0 0.25rem; padding: 0.6rem 0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-left: 3px solid transparent; } body.admin-dark .sidebar .nav-link i, body.app-dark .sidebar .nav-link i { color: var(--dash-text-muted) !important; opacity: 1 !important; visibility: visible !important; display: inline-block !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Beautiful Sidebar Hover - Gradient Effect */ body.admin-dark .sidebar .nav-link:hover, body.app-dark .sidebar .nav-link:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important; color: var(--text-light) !important; transform: translateX(4px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid rgba(99, 102, 241, 0.6); } body.admin-dark .sidebar .nav-link:hover i, body.app-dark .sidebar .nav-link:hover i { color: var(--text-light) !important; transform: scale(1.1); } /* Beautiful Sidebar Active - Vibrant Gradient */ body.admin-dark .sidebar .nav-link.active, body.app-dark .sidebar .nav-link.active { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%) !important; color: var(--text-light) !important; border-left: 3px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); position: relative; overflow: hidden; } body.admin-dark .sidebar .nav-link.active::before, body.app-dark .sidebar .nav-link.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); pointer-events: none; } body.admin-dark .sidebar .nav-link.active i, body.app-dark .sidebar .nav-link.active i { color: var(--text-light) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } body.admin-dark .sidebar .nav-link.text-danger, body.app-dark .sidebar .nav-link.text-danger { color: var(--dash-logout) !important; } body.admin-dark .sidebar .nav-link.text-danger i, body.app-dark .sidebar .nav-link.text-danger i { color: var(--dash-logout) !important; } body.admin-dark .sidebar .nav-link.text-danger:hover, body.app-dark .sidebar .nav-link.text-danger:hover { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%) !important; color: var(--dash-logout) !important; transform: translateX(4px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); border-left: 3px solid rgba(239, 68, 68, 0.6); } body.admin-dark .sidebar .nav-link.text-danger:hover i, body.app-dark .sidebar .nav-link.text-danger:hover i { color: var(--dash-logout) !important; transform: scale(1.1); } body.admin-dark .sidebar .nav-link, body.app-dark .sidebar .nav-link { display: flex; align-items: center; width: 100%; } body.admin-dark .sidebar .nav-link > span:not(.badge), body.app-dark .sidebar .nav-link > span:not(.badge) { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.admin-dark .sidebar .badge, body.app-dark .sidebar .badge { font-size: 0.65rem; padding: 0.2em 0.4em; font-weight: 600; flex-shrink: 0; } body.admin-dark .sidebar .nav, body.app-dark .sidebar .nav { flex: 1; padding-bottom: 0.5rem; } /* Cards – Beautiful Glassmorphism with Gradients */ body.admin-dark .card, body.app-dark .card { background: var(--dash-card-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--dash-card-border); border-radius: 16px; box-shadow: var(--dash-card-shadow); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } body.admin-dark .card::before, body.app-dark .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s ease; } body.admin-dark .card:hover, body.app-dark .card:hover { transform: translateY(-4px); border-color: var(--dash-card-hover); box-shadow: var(--dash-card-shadow-hover); background: rgba(30, 41, 59, 0.8); } body.admin-dark .card:hover::before, body.app-dark .card:hover::before { opacity: 1; } /* Card headers - Beautiful Gradient Headers */ body.admin-dark .card-header, body.app-dark .card-header { background: rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--dash-card-border); color: var(--text-light) !important; } body.admin-dark .card-header.bg-primary, body.app-dark .card-header.bg-primary { background: var(--gradient-primary) !important; border-bottom: none !important; } body.admin-dark .card-header.bg-success, body.app-dark .card-header.bg-success { background: var(--gradient-success) !important; border-bottom: none !important; } body.admin-dark .card-header.bg-info, body.app-dark .card-header.bg-info { background: var(--gradient-info) !important; border-bottom: none !important; } body.admin-dark .card-header .btn-light, body.app-dark .card-header .btn-light { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95) !important; } body.admin-dark .card-header .btn-light:hover, body.app-dark .card-header .btn-light:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.3); } /* Stats cards on dashboard (Your Vehicles, Available Shops, Messages) - dark + shiny white */ body.admin-dark .card.bg-primary .card-body, body.app-dark .card.bg-primary .card-body, body.admin-dark .card.bg-success .card-body, body.app-dark .card.bg-success .card-body, body.admin-dark .card.bg-info .card-body, body.app-dark .card.bg-info .card-body { background: transparent !important; } body.admin-dark .card.bg-primary, body.app-dark .card.bg-primary, body.admin-dark .card.bg-success, body.app-dark .card.bg-success, body.admin-dark .card.bg-info, body.app-dark .card.bg-info { background: var(--dash-card) !important; border: 1px solid var(--dash-card-border) !important; color: var(--text-light) !important; } body.admin-dark .card.bg-primary:hover, body.app-dark .card.bg-primary:hover, body.admin-dark .card.bg-success:hover, body.app-dark .card.bg-success:hover, body.admin-dark .card.bg-info:hover, body.app-dark .card.bg-info:hover { border-color: rgba(255, 255, 255, 0.2) !important; } body.admin-dark .card.bg-primary .card-title, body.app-dark .card.bg-primary .card-title, body.admin-dark .card.bg-success .card-title, body.app-dark .card.bg-success .card-title, body.admin-dark .card.bg-info .card-title, body.app-dark .card.bg-info .card-title { color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark .card.bg-primary h2, body.app-dark .card.bg-primary h2, body.admin-dark .card.bg-success h2, body.app-dark .card.bg-success h2, body.admin-dark .card.bg-info h2, body.app-dark .card.bg-info h2 { color: rgba(255, 255, 255, 0.98) !important; } body.admin-dark .card.bg-primary .btn-light, body.app-dark .card.bg-primary .btn-light, body.admin-dark .card.bg-success .btn-light, body.app-dark .card.bg-success .btn-light, body.admin-dark .card.bg-info .btn-light, body.app-dark .card.bg-info .btn-light { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95) !important; } body.admin-dark .card.bg-primary .btn-light:hover, body.app-dark .card.bg-primary .btn-light:hover, body.admin-dark .card.bg-success .btn-light:hover, body.app-dark .card.bg-success .btn-light:hover, body.admin-dark .card.bg-info .btn-light:hover, body.app-dark .card.bg-info .btn-light:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3); } /* Card body text + background on dark – lahat tugma sa theme */ body.admin-dark .card-body, body.app-dark .card-body { color: rgba(255, 255, 255, 0.85); background: transparent !important; } body.admin-dark .card .card-body.p-0, body.app-dark .card .card-body.p-0 { background: transparent !important; } /* Tables on dark – header at body dark na, walang puti */ body.admin-dark .table, body.app-dark .table { background: transparent !important; color: rgba(255, 255, 255, 0.9); } body.admin-dark .table thead, body.admin-dark .table thead.table-light, body.app-dark .table thead, body.app-dark .table thead.table-light { background: rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } body.admin-dark .table thead th, body.app-dark .table thead th { color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; } body.admin-dark .table thead th i, body.app-dark .table thead th i { color: rgba(255, 255, 255, 0.7) !important; } body.admin-dark .table tbody, body.app-dark .table tbody { background: rgba(255, 255, 255, 0.03) !important; } body.admin-dark .table th, body.app-dark .table th { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.12); } body.admin-dark .table td, body.app-dark .table td { color: rgba(255, 255, 255, 0.82); border-bottom-color: rgba(255, 255, 255, 0.08); background: transparent !important; } body.admin-dark .table tbody tr:hover, body.app-dark .table tbody tr:hover { background: rgba(255, 255, 255, 0.06) !important; } body.admin-dark .list-group-item, body.app-dark .list-group-item { background: var(--dash-card) !important; border-color: var(--dash-card-border); color: var(--dash-text); } body.admin-dark .list-group-item:hover, body.app-dark .list-group-item:hover { background: rgba(255, 255, 255, 0.06) !important; } /* Shop admin messages page – dark panels */ body.app-dark .customer-item { background: var(--dash-card) !important; color: var(--dash-text); border-bottom-color: var(--dash-card-border); } body.app-dark .customer-item:hover { background: rgba(255, 255, 255, 0.06) !important; } body.app-dark .customer-item.active { background: rgba(99, 102, 241, 0.2) !important; border-left: 3px solid var(--primary); } body.app-dark .messages-container, body.app-dark .col-md-4.border-end { background: var(--dash-bg) !important; } body.app-dark .message.received { background: var(--dash-card) !important; color: var(--dash-text) !important; border-color: var(--dash-card-border) !important; } body.app-dark .p-3.border-bottom.bg-white, body.app-dark .col-md-4.border-end .p-3.border-bottom.bg-white { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text); } /* Table container – walang puting background */ body.admin-dark .table-responsive, body.app-dark .table-responsive, body.admin-dark .recent-applications-container, body.app-dark .recent-applications-container { background: transparent !important; } body.admin-dark .table tbody tr, body.app-dark .table tbody tr { background: transparent !important; } body.admin-dark .text-muted, body.app-dark .text-muted { color: rgba(255, 255, 255, 0.55) !important; } /* Shop cards & badges on dark */ body.admin-dark .shop-card-compact .card-title, body.app-dark .shop-card-compact .card-title { color: rgba(255, 255, 255, 0.92) !important; } body.admin-dark .shop-card-compact .card-text, body.admin-dark .shop-card-compact .card-text span, body.admin-dark .shop-card-compact .card-text div, body.app-dark .shop-card-compact .card-text, body.app-dark .shop-card-compact .card-text span, body.app-dark .shop-card-compact .card-text div { color: rgba(255, 255, 255, 0.7) !important; } body.admin-dark .shop-card-compact .card-text i, body.app-dark .shop-card-compact .card-text i { color: rgba(255, 255, 255, 0.6); } body.admin-dark .shop-logo-container, body.app-dark .shop-logo-container { background: rgba(255, 255, 255, 0.06) !important; border-radius: 6px; } body.admin-dark .badge.bg-light, body.app-dark .badge.bg-light, body.admin-dark .badge.bg-light.border.text-dark, body.app-dark .badge.bg-light.border.text-dark { background: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } body.admin-dark .badge.bg-secondary, body.app-dark .badge.bg-secondary { background: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.2); } body.admin-dark .table .badge, body.app-dark .table .badge { color: rgba(255, 255, 255, 0.9); } /* Shop card hover - shiny white accent */ body.admin-dark .shop-card-compact:hover, body.app-dark .shop-card-compact:hover { border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } body.admin-dark .shop-card-compact:hover .shop-logo-container, body.app-dark .shop-card-compact:hover .shop-logo-container { background: rgba(255, 255, 255, 0.1) !important; } /* Shop card placeholder letter circle - dark + white */ body.admin-dark .shop-card-compact .bg-primary.text-white.rounded-circle, body.app-dark .shop-card-compact .bg-primary.text-white.rounded-circle { background: rgba(102, 126, 234, 0.5) !important; color: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.2); } /* Forms on dark */ body.admin-dark .form-label, body.app-dark .form-label { color: rgba(255, 255, 255, 0.85); } body.admin-dark .form-control, body.admin-dark .form-select, body.app-dark .form-control, body.app-dark .form-select { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); } body.admin-dark .form-control::placeholder, body.app-dark .form-control::placeholder { color: rgba(255, 255, 255, 0.45); } body.admin-dark .form-text, body.app-dark .form-text { color: var(--dash-text-muted) !important; } body.admin-dark .form-control:focus, body.admin-dark .form-select:focus, body.app-dark .form-control:focus, body.app-dark .form-select:focus { border-color: rgba(14, 165, 233, 0.75); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } /* Modals on dark - match index shiny white */ body.admin-dark .modal-content, body.app-dark .modal-content { background: linear-gradient(145deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } body.admin-dark .modal-footer, body.admin-dark .modal-header, body.app-dark .modal-footer, body.app-dark .modal-header { border-color: rgba(255, 255, 255, 0.12) !important; } body.admin-dark .modal-body p, body.app-dark .modal-body p { color: rgba(255, 255, 255, 0.8); } /* Logout modal – Beautiful & Visible Design */ .logout-modal { border-radius: 16px; border: 2px solid rgba(239, 68, 68, 0.3); box-shadow: 0 20px 60px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(239, 68, 68, 0.1); overflow: hidden; background: #ffffff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .logout-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); z-index: 1; } .logout-modal:hover { transform: translateY(-4px); box-shadow: 0 24px 72px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); } .logout-modal-header { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border-bottom: 2px solid rgba(239, 68, 68, 0.2); padding: 1.25rem 1.5rem; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; } .logout-modal:hover .logout-modal-header { background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%); border-bottom-color: rgba(239, 68, 68, 0.3); } .logout-modal-header .modal-title { font-size: 1.25rem; font-weight: 700; color: #991b1b; margin: 0; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } .logout-modal-header .modal-title::before { content: '⚠️'; font-size: 1.5rem; transition: all 0.3s ease; } .logout-modal:hover .logout-modal-header .modal-title { color: #7f1d1d; transform: scale(1.02); } .logout-modal:hover .logout-modal-header .modal-title::before { transform: scale(1.1) rotate(5deg); } .logout-modal-body { padding: 1.5rem 1.5rem; background: #ffffff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .logout-modal:hover .logout-modal-body { background: #fefefe; } .logout-modal-message { margin: 0; font-size: 1rem; color: #374151; line-height: 1.7; font-weight: 500; transition: all 0.3s ease; } .logout-modal:hover .logout-modal-message { color: #1f2937; font-weight: 600; } .logout-modal-footer { border-top: 2px solid rgba(239, 68, 68, 0.1); padding: 1.25rem 1.5rem; gap: 0.75rem; background: #f9fafb; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .logout-modal:hover .logout-modal-footer { background: #f3f4f6; border-top-color: rgba(239, 68, 68, 0.2); } .logout-modal .btn-cancel { border-radius: 10px; font-weight: 600; padding: 0.625rem 1.25rem; border: 2px solid #6b7280; color: #374151; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff; } .logout-modal .btn-cancel:hover { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-color: #4b5563; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(107, 114, 128, 0.2); color: #1f2937; } .logout-modal .btn-logout-confirm { border-radius: 10px; font-weight: 600; padding: 0.625rem 1.25rem; text-decoration: none; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; color: #ffffff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; } .logout-modal .btn-logout-confirm:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4); } .logout-modal .btn-logout-confirm:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } /* Logout modal on dark theme - Beautiful & Visible */ body.admin-dark .logout-modal, body.app-dark .logout-modal { background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important; border: 2px solid rgba(239, 68, 68, 0.4) !important; box-shadow: 0 20px 60px rgba(239, 68, 68, 0.4), 0 0 0 1px rgba(239, 68, 68, 0.2) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.admin-dark .logout-modal:hover, body.app-dark .logout-modal:hover { box-shadow: 0 24px 72px rgba(239, 68, 68, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.3) !important; border-color: rgba(239, 68, 68, 0.6) !important; } body.admin-dark .logout-modal-header, body.app-dark .logout-modal-header { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important; border-bottom: 2px solid rgba(239, 68, 68, 0.3) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.admin-dark .logout-modal:hover .logout-modal-header, body.app-dark .logout-modal:hover .logout-modal-header { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%) !important; border-bottom-color: rgba(239, 68, 68, 0.4) !important; } body.admin-dark .logout-modal-header .modal-title, body.app-dark .logout-modal-header .modal-title { color: #fca5a5 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.3s ease !important; } body.admin-dark .logout-modal:hover .logout-modal-header .modal-title, body.app-dark .logout-modal:hover .logout-modal-header .modal-title { color: #f87171 !important; transform: scale(1.02) !important; text-shadow: 0 2px 8px rgba(239, 68, 68, 0.5) !important; } body.admin-dark .logout-modal-header .btn-close, body.app-dark .logout-modal-header .btn-close { filter: invert(1) brightness(1.2); opacity: 0.9; transition: all 0.3s ease; } body.admin-dark .logout-modal-header .btn-close:hover, body.app-dark .logout-modal-header .btn-close:hover { opacity: 1; transform: scale(1.1) rotate(90deg); filter: invert(1) brightness(1.5); } body.admin-dark .logout-modal-message, body.app-dark .logout-modal-message { color: rgba(255, 255, 255, 0.9) !important; font-weight: 500; transition: all 0.3s ease !important; } body.admin-dark .logout-modal:hover .logout-modal-message, body.app-dark .logout-modal:hover .logout-modal-message { color: rgba(255, 255, 255, 1) !important; font-weight: 600 !important; } body.admin-dark .logout-modal-body, body.app-dark .logout-modal-body { background: transparent !important; } body.admin-dark .logout-modal-footer, body.app-dark .logout-modal-footer { border-top: 2px solid rgba(239, 68, 68, 0.2) !important; background: rgba(255, 255, 255, 0.03) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.admin-dark .logout-modal:hover .logout-modal-footer, body.app-dark .logout-modal:hover .logout-modal-footer { background: rgba(255, 255, 255, 0.05) !important; border-top-color: rgba(239, 68, 68, 0.3) !important; } /* Modal Backdrop Enhancement for Visibility */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body.admin-dark .modal-backdrop, body.app-dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Ensure modal is always visible */ #logoutModal .modal-dialog { z-index: 1055; } #logoutModal .modal-content { z-index: 1056; } /* Card Footer - Dark Theme Compatible (Universal) */ body.admin-dark .card-footer.bg-light, body.app-dark .card-footer.bg-light { background: rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.admin-dark .card-footer:not(.bg-light):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info), body.app-dark .card-footer:not(.bg-light):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) { background: rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Universal Login Button - Matches Unified Theme System */ .btn-login, .login-box .btn-login { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%) !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; padding: 0.75rem 2rem !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; font-size: 1rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; } .btn-login::before, .login-box .btn-login::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .btn-login:hover, .login-box .btn-login:hover { background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c4b5fd 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4) !important; color: #ffffff !important; } .btn-login:hover::before, .login-box .btn-login:hover::before { opacity: 1; } .btn-login:active, .login-box .btn-login:active { transform: translateY(-1px) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important; } .btn-login i, .login-box .btn-login i { font-size: 1.1rem !important; margin-right: 0.5rem !important; transition: all 0.3s ease !important; } .btn-login:hover i, .login-box .btn-login:hover i { transform: translateX(4px) scale(1.1) !important; } /* Universal Language Button - Matches Unified Theme System */ .btn-lang { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%) !important; color: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(99, 102, 241, 0.4) !important; padding: 0.6rem 1rem !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.85rem !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important; position: relative !important; overflow: hidden !important; } .btn-lang::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .btn-lang:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%) !important; border-color: rgba(99, 102, 241, 0.6) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important; } .btn-lang:hover::before { opacity: 1; } .btn-lang:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important; } .btn-lang i { font-size: 0.9rem !important; transition: all 0.3s ease !important; } .btn-lang:hover i.bi-chevron-down { transform: rotate(180deg) !important; } .lang-text { margin: 0 0.25rem !important; font-weight: 600 !important; } /* Beautiful Dropdown Menu for Language Selector */ .dropdown-menu { background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(99, 102, 241, 0.3) !important; border-radius: 12px !important; box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important; padding: 0.5rem !important; min-width: 160px !important; margin-top: 0.5rem !important; z-index: 10002 !important; position: absolute !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .dropdown.show .dropdown-menu { display: block !important; visibility: visible !important; opacity: 1 !important; } .language-selector { position: relative !important; z-index: 10001 !important; } .language-selector .dropdown { position: relative !important; z-index: 10001 !important; } .dropdown-item { color: rgba(255, 255, 255, 0.9) !important; padding: 0.7rem 1rem !important; border-radius: 8px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; align-items: center !important; font-weight: 500 !important; margin: 0.15rem 0 !important; } .dropdown-item:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%) !important; color: #ffffff !important; transform: translateX(4px) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important; } .dropdown-item.active { background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%) !important; color: #c4b5fd !important; border: 1px solid rgba(99, 102, 241, 0.5) !important; font-weight: 600 !important; } .dropdown-item.active:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%) !important; transform: translateX(4px) !important; } .dropdown-item i { font-size: 0.85rem !important; width: 18px !important; transition: all 0.3s ease !important; } .dropdown-item:hover i { transform: scale(1.1) !important; } body.admin-dark .logout-modal .btn-cancel, body.app-dark .logout-modal .btn-cancel { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.9) !important; } body.admin-dark .logout-modal .btn-cancel:hover, body.app-dark .logout-modal .btn-cancel:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } body.admin-dark .logout-modal .btn-logout-confirm, body.app-dark .logout-modal .btn-logout-confirm { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important; } body.admin-dark .logout-modal .btn-logout-confirm:hover, body.app-dark .logout-modal .btn-logout-confirm:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5) !important; } /* Scrollbars on dark */ body.admin-dark .shops-container::-webkit-scrollbar-track, body.app-dark .shops-container::-webkit-scrollbar-track, body.admin-dark .recent-applications-container::-webkit-scrollbar-track, body.app-dark .recent-applications-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 10px; } body.admin-dark .shops-container::-webkit-scrollbar-thumb, body.app-dark .shops-container::-webkit-scrollbar-thumb, body.admin-dark .recent-applications-container::-webkit-scrollbar-thumb, body.app-dark .recent-applications-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; } body.admin-dark .shops-container::-webkit-scrollbar-thumb:hover, body.app-dark .shops-container::-webkit-scrollbar-thumb:hover, body.admin-dark .recent-applications-container::-webkit-scrollbar-thumb:hover, body.app-dark .recent-applications-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* =================================== GLOBAL STYLES =================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; position: relative; } body { font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-dark); min-height: 100vh; line-height: 1.6; position: relative; overflow-x: hidden; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text-dark); line-height: 1.2; margin-bottom: 1rem; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } p { margin-bottom: 1rem; color: var(--text-muted); } /* =================================== BUTTON STYLES =================================== */ .btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-md); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary { background: var(--primary); color: var(--text-light); } .btn-primary:hover { background: #1d4ed8; } .btn-secondary { background: var(--secondary); color: var(--text-light); } .btn-secondary:hover { background: #475569; } .btn-success { background: var(--success); color: var(--text-light); } .btn-success:hover { background: #059669; } .btn-danger { background: var(--danger); color: var(--text-light); } .btn-danger:hover { background: #dc2626; } .btn-warning { background: var(--warning); color: var(--text-light); } .btn-warning:hover { background: #d97706; } .btn-info { background: var(--info); color: var(--text-light); } .btn-info:hover { background: #0891b2; } /* Outline Buttons */ .btn-outline-primary { background: transparent; border: 2px solid var(--primary); color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: var(--text-light); } .btn-outline-secondary { background: transparent; border: 2px solid var(--secondary); color: var(--secondary); } .btn-outline-secondary:hover { background: var(--secondary); color: var(--text-light); } /* Dark theme styles for outline secondary button */ body.admin-dark .btn-outline-secondary, body.app-dark .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.3) !important; color: rgba(255, 255, 255, 0.8) !important; background: transparent !important; } body.admin-dark .btn-outline-secondary:hover, body.app-dark .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: rgba(255, 255, 255, 1) !important; } body.admin-dark .btn-outline-secondary i, body.app-dark .btn-outline-secondary i { color: inherit !important; } /* Button Sizes */ .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; } .btn-block { width: 100%; } /* =================================== FORM STYLES =================================== */ .form-label { font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; } .form-control, .form-select { padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 8px; font-size: 1rem; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: var(--text-light); } .form-control:focus, .form-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-check-input { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* =================================== CARD STYLES =================================== */ .card { background: var(--text-light); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-sm); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 1.5rem; } .card:hover { box-shadow: 0 4px 16px var(--shadow-md); transform: translateY(-2px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .card-header { background: var(--header-bg); color: var(--text-light); padding: 1.25rem; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; } .card-body { padding: 1rem; } .card-footer { background: var(--bg-secondary); padding: 1rem 1.5rem; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; } /* =================================== TABLE STYLES =================================== */ .table { width: 100%; background: var(--text-light); border-radius: 8px; overflow: hidden; } .table thead { background: var(--bg-secondary); } .table th { padding: 1rem; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; color: var(--text-dark); letter-spacing: 0.05em; } .table td { padding: 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:hover { background: var(--bg-primary); } /* =================================== BADGE STYLES =================================== */ .badge, .status-badge { padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; } .badge-primary { background: var(--primary); color: var(--text-light); } .badge-success { background: var(--success); color: var(--text-light); } .badge-warning { background: var(--warning); color: var(--text-light); } .badge-danger { background: var(--danger); color: var(--text-light); } .badge-info { background: var(--info); color: var(--text-light); } .status-badge.pending { background: var(--warning); color: var(--text-light); } .status-badge.active { background: var(--success); color: var(--text-light); } .status-badge.inactive { background: var(--danger); color: var(--text-light); } /* =================================== ALERT STYLES =================================== */ .alert { padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid; } .alert-success { background: #f0fdf4; border-left-color: var(--success); color: #15803d; } .alert-danger { background: #fef2f2; border-left-color: var(--danger); color: #991b1b; } .alert-warning { background: #fffbeb; border-left-color: var(--warning); color: #92400e; } .alert-info { background: #ecfeff; border-left-color: var(--info); color: #155e75; } /* =================================== SIDEBAR STYLES =================================== */ .sidebar { background: var(--header-bg); color: var(--text-light); position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; overflow-y: auto; overflow-x: hidden; z-index: 1000; padding-bottom: 2rem; margin: 0 !important; } /* Calculate exact sidebar width based on Bootstrap breakpoints */ @media (min-width: 992px) { .sidebar.col-lg-2 { width: 16.66666667% !important; max-width: 16.66666667% !important; flex: 0 0 16.66666667% !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .sidebar.col-md-3 { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; } } .sidebar .nav-link { color: var(--text-light); padding: 0.875rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-left: 3px solid transparent; border-radius: 8px; margin: 0.25rem 0.5rem; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; white-space: nowrap; } .sidebar .nav-item { margin: 0; } .sidebar .nav { padding: 0; } .sidebar .nav-link i { font-family: "bootstrap-icons" !important; font-size: 1rem !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; text-align: center; flex-shrink: 0; display: inline-block !important; visibility: visible !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1 !important; } .sidebar .nav-link:hover { color: var(--text-light); background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%) !important; transform: translateX(4px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid rgba(99, 102, 241, 0.6); } .sidebar .nav-link:hover i { transform: scale(1.1); color: var(--text-light) !important; } .sidebar .nav-link.active { color: var(--text-light); background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%) !important; border-left: 3px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); position: relative; overflow: hidden; } .sidebar .nav-link.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); pointer-events: none; } .sidebar .nav-link.active i { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transform: scale(1.05); } .sidebar h1, .sidebar h4 { color: var(--text-light); } .sidebar p { color: var(--text-light); } .sidebar-header { padding: 1rem; } .sidebar-header h1 { color: var(--text-light); font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; } .sidebar-header p { color: rgba(255, 255, 255, 0.9); padding-left: 0.5rem; font-weight: 400; margin-bottom: 0; } .sidebar .d-flex.flex-column { min-height: 100vh; display: flex; flex-direction: column; } .sidebar .d-flex.flex-column.h-100 { height: 100%; } /* =================================== HEADER STYLES =================================== */ .header, .navbar { background: var(--header-bg); color: var(--text-light); padding: 1rem 2rem; box-shadow: 0 2px 8px var(--shadow-sm); } .header a, .navbar a { color: var(--text-light); text-decoration: none; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .header a:hover, .navbar a:hover { opacity: 0.8; } /* =================================== BACKGROUND COLORS =================================== */ .bg-primary { background: var(--primary) !important; } .bg-secondary { background: var(--secondary) !important; } .bg-success { background: var(--success) !important; } .bg-danger { background: var(--danger) !important; } .bg-warning { background: var(--warning) !important; } .bg-info { background: var(--info) !important; } .bg-light { background: var(--bg-primary) !important; } .bg-dark { background: var(--header-bg) !important; } /* =================================== TEXT COLORS =================================== */ .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-info { color: var(--info) !important; } .text-muted { color: var(--text-muted) !important; } .text-white { color: var(--text-light) !important; } /* =================================== UTILITY CLASSES =================================== */ .container-fluid { padding: 0; } .main-content { padding: 2rem; min-height: 100vh; background: var(--bg-primary); margin-left: 0; } /* Adjust main content margin for fixed sidebar */ .container-fluid { position: relative; padding-left: 0 !important; padding-right: 0 !important; } .container-fluid > .row { margin-left: 0 !important; margin-right: 0 !important; position: relative; } /* Ensure sidebar breaks out of normal flow */ .container-fluid > .row > .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; } /* For col-md-3 (medium screens: 25% width) */ @media (min-width: 768px) and (max-width: 991.98px) { .main-content.col-md-9 { margin-left: 25% !important; width: 75% !important; flex: 0 0 75% !important; max-width: 75% !important; } } /* For col-lg-2 (large screens: ~16.67% width) */ @media (min-width: 992px) { .main-content.col-lg-10 { margin-left: 16.66666667% !important; width: 83.33333333% !important; flex: 0 0 83.33333333% !important; max-width: 83.33333333% !important; } } /* =================================== COMPACT SHOP CARDS =================================== */ .shop-card-compact { margin-bottom: 0.75rem; height: 100%; display: flex; flex-direction: column; } .shop-card-compact .card { height: 100%; display: flex; flex-direction: column; min-height: 0; } .shop-card-compact .card-body { padding: 0.75rem !important; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; min-height: 0; height: 100%; } .shop-logo-compact { max-width: 120px; max-height: 50px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; } .shop-logo-container.mb-2 { margin-bottom: 0.5rem !important; height: 52px !important; max-height: 52px !important; min-height: 52px !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .shop-logo-container.mb-2 img { max-width: 120px !important; max-height: 50px !important; width: auto !important; height: auto !important; object-fit: contain !important; } .shop-card-compact .card-title { flex-shrink: 0; margin-bottom: 0.5rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; } .shop-card-compact .card-text { flex-grow: 1; margin-bottom: 0.5rem; min-height: 3.8rem; overflow: visible; display: flex; flex-direction: column; justify-content: flex-start; color: #333 !important; } .shop-card-compact .card-text div { margin-bottom: 0.25rem; color: #333 !important; font-weight: 500; line-height: 1.4; } .shop-card-compact .card-text span { color: #333 !important; word-wrap: break-word; } .shop-card-compact .card-text i { color: #666; margin-right: 0.25rem; } .shop-card-compact .btn { flex-shrink: 0; margin-top: auto; } /* Reduce card padding overall */ .card-body { padding: 1rem !important; } /* Make stats cards more compact */ .bg-primary .card-body, .bg-success .card-body, .bg-info .card-body { padding: 1rem 1.25rem !important; } .bg-primary .card-title, .bg-success .card-title, .bg-info .card-title { font-size: 0.95rem; margin-bottom: 0.5rem; } .bg-primary h2, .bg-success h2, .bg-info h2 { font-size: 1.75rem; margin-bottom: 0.5rem; } /* Reduce main content padding */ .main-content { padding: 1.25rem !important; } /* Responsive */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } .sidebar { position: relative; height: auto; min-height: auto; } .main-content { padding: 1rem; margin-left: 0 !important; } .sidebar.col-md-3 { width: 100% !important; } .main-content.col-md-9 { width: 100% !important; } .shop-logo-compact { max-width: 100px; max-height: 45px; } } /* Print Styles */ @media print { .sidebar, .header, .navbar { display: none; } .main-content { padding: 0; } } /* =================================== UNIVERSAL THEME SYSTEM Automatically applies dark theme to all elements Just add class="app-dark" or class="admin-dark" to =================================== */ /* Universal Dark Theme Base - applies to all authenticated pages */ body.admin-dark, body.app-dark { /* Base colors */ background: var(--dash-bg) !important; color: var(--dash-text) !important; } /* Universal Card Styling */ body.admin-dark .card, body.app-dark .card { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .card-body, body.app-dark .card-body { color: var(--dash-text) !important; } body.admin-dark .card-header, body.app-dark .card-header { background: rgba(255, 255, 255, 0.06) !important; border-bottom-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } /* Universal Form Styling */ body.admin-dark .form-control, body.admin-dark .form-select, body.app-dark .form-control, body.app-dark .form-select { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .form-control::placeholder, body.app-dark .form-control::placeholder { color: rgba(255, 255, 255, 0.4) !important; } body.admin-dark .form-control:focus, body.admin-dark .form-select:focus, body.app-dark .form-control:focus, body.app-dark .form-select:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--primary) !important; color: var(--dash-text) !important; } body.admin-dark .form-label, body.app-dark .form-label { color: var(--dash-text) !important; } /* Universal Table Styling */ body.admin-dark .table, body.app-dark .table { background: transparent !important; color: var(--dash-text) !important; } body.admin-dark .table thead, body.app-dark .table thead { background: rgba(255, 255, 255, 0.08) !important; border-bottom-color: var(--dash-card-border) !important; } body.admin-dark .table thead th, body.app-dark .table thead th { color: var(--dash-text) !important; border-color: var(--dash-card-border) !important; } body.admin-dark .table tbody, body.app-dark .table tbody { background: transparent !important; } body.admin-dark .table td, body.app-dark .table td { color: var(--dash-text) !important; border-bottom-color: var(--dash-card-border) !important; } body.admin-dark .table tbody tr:hover, body.app-dark .table tbody tr:hover { background: rgba(255, 255, 255, 0.06) !important; } /* Universal Button Styling */ /* Beautiful Gradient Buttons */ body.admin-dark .btn-primary, body.app-dark .btn-primary { background: var(--gradient-primary); border: none; box-shadow: var(--shadow-primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-light) !important; } body.admin-dark .btn-primary:hover, body.app-dark .btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } body.admin-dark .btn-outline-primary, body.app-dark .btn-outline-primary { border-color: var(--primary) !important; color: var(--primary) !important; background: transparent !important; } body.admin-dark .btn-outline-primary:hover, body.app-dark .btn-outline-primary:hover { background: var(--gradient-primary) !important; color: var(--text-light) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-primary) !important; } /* Universal Text Styling */ body.admin-dark h1, body.admin-dark h2, body.admin-dark h3, body.admin-dark h4, body.admin-dark h5, body.admin-dark h6, body.app-dark h1, body.app-dark h2, body.app-dark h3, body.app-dark h4, body.app-dark h5, body.app-dark h6 { color: var(--dash-text) !important; } body.admin-dark p, body.app-dark p { color: var(--dash-text) !important; } body.admin-dark .text-muted, body.app-dark .text-muted { color: var(--dash-text-muted) !important; } body.admin-dark strong, body.app-dark strong { color: var(--dash-text) !important; } body.admin-dark small, body.app-dark small { color: var(--dash-text-muted) !important; } /* Universal Alert Styling */ body.admin-dark .alert-success, body.app-dark .alert-success { background: rgba(34, 197, 94, 0.2) !important; border-left-color: var(--success) !important; color: var(--dash-text) !important; } body.admin-dark .alert-danger, body.app-dark .alert-danger { background: rgba(239, 68, 68, 0.2) !important; border-left-color: var(--danger) !important; color: var(--dash-text) !important; } body.admin-dark .alert-warning, body.app-dark .alert-warning { background: rgba(245, 158, 11, 0.2) !important; border-left-color: var(--warning) !important; color: var(--dash-text) !important; } body.admin-dark .alert-info, body.app-dark .alert-info { background: rgba(59, 130, 246, 0.2) !important; border-left-color: var(--info) !important; color: var(--dash-text) !important; } /* Universal Badge Styling */ body.admin-dark .badge.bg-primary, body.app-dark .badge.bg-primary { background: var(--primary) !important; color: var(--text-light) !important; } body.admin-dark .badge.bg-success, body.app-dark .badge.bg-success { background: var(--success) !important; color: var(--text-light) !important; } body.admin-dark .badge.bg-danger, body.app-dark .badge.bg-danger { background: var(--danger) !important; color: var(--text-light) !important; } body.admin-dark .badge.bg-warning, body.app-dark .badge.bg-warning { background: var(--warning) !important; color: var(--text-light) !important; } body.admin-dark .badge.bg-info, body.app-dark .badge.bg-info { background: var(--info) !important; color: var(--text-light) !important; } /* Universal Modal Styling */ body.admin-dark .modal-content, body.app-dark .modal-content { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .modal-header, body.admin-dark .modal-footer, body.app-dark .modal-header, body.app-dark .modal-footer { border-color: var(--dash-card-border) !important; } /* Universal List Group Styling */ body.admin-dark .list-group-item, body.app-dark .list-group-item { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .list-group-item:hover, body.app-dark .list-group-item:hover { background: rgba(255, 255, 255, 0.06) !important; } /* Message Items Exception - Light backgrounds with dark text */ body.admin-dark .message-item, body.app-dark .message-item { background: var(--msg-bg) !important; color: var(--msg-text) !important; } body.admin-dark .message-item *, body.app-dark .message-item * { color: var(--msg-text) !important; } body.admin-dark .message-item .text-muted, body.app-dark .message-item .text-muted { color: var(--msg-text-muted) !important; } body.admin-dark .message-item div[style*="background:#fff"], body.admin-dark .message-item div[style*="background: #fff"], body.admin-dark .message-item div[style*="background:#ffffff"], body.admin-dark .message-item div[style*="background: #ffffff"], body.app-dark .message-item div[style*="background:#fff"], body.app-dark .message-item div[style*="background: #fff"], body.app-dark .message-item div[style*="background:#ffffff"], body.app-dark .message-item div[style*="background: #ffffff"] { background: #fff !important; color: var(--msg-text) !important; } body.admin-dark .message-item .badge, body.app-dark .message-item .badge { color: var(--text-light) !important; } /* Tables in message areas - keep light theme */ body.admin-dark .card-body table, body.app-dark .card-body table { background: transparent !important; } body.admin-dark .card-body table th, body.app-dark .card-body table th { background: var(--msg-bg) !important; color: var(--msg-text) !important; } body.admin-dark .card-body table td, body.app-dark .card-body table td { color: var(--msg-text) !important; } body.admin-dark .card-body table .text-muted, body.app-dark .card-body table .text-muted { color: var(--msg-text-muted) !important; } /* Universal Dropdown Styling */ body.admin-dark .dropdown-menu, body.app-dark .dropdown-menu { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; } body.admin-dark .dropdown-item, body.app-dark .dropdown-item { color: var(--dash-text) !important; } body.admin-dark .dropdown-item:hover, body.app-dark .dropdown-item:hover { background: rgba(255, 255, 255, 0.1) !important; color: var(--dash-text) !important; } /* Universal Pagination Styling */ body.admin-dark .page-link, body.app-dark .page-link { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .page-link:hover, body.app-dark .page-link:hover { background: rgba(255, 255, 255, 0.1) !important; color: var(--dash-text) !important; } body.admin-dark .page-item.active .page-link, body.app-dark .page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-light) !important; } /* Universal Breadcrumb Styling */ body.admin-dark .breadcrumb, body.app-dark .breadcrumb { background: transparent !important; } body.admin-dark .breadcrumb-item, body.app-dark .breadcrumb-item { color: var(--dash-text-muted) !important; } body.admin-dark .breadcrumb-item.active, body.app-dark .breadcrumb-item.active { color: var(--dash-text) !important; } /* Universal Nav Tabs Styling */ body.admin-dark .nav-tabs, body.app-dark .nav-tabs { border-bottom-color: var(--dash-card-border) !important; } body.admin-dark .nav-tabs .nav-link, body.app-dark .nav-tabs .nav-link { color: var(--dash-text-muted) !important; border-color: transparent !important; } body.admin-dark .nav-tabs .nav-link:hover, body.app-dark .nav-tabs .nav-link:hover { color: var(--dash-text) !important; border-color: var(--dash-card-border) !important; } body.admin-dark .nav-tabs .nav-link.active, body.app-dark .nav-tabs .nav-link.active { color: var(--dash-text) !important; background: var(--dash-card) !important; border-color: var(--dash-card-border) var(--dash-card-border) transparent !important; } /* Universal Progress Bar Styling */ body.admin-dark .progress, body.app-dark .progress { background: rgba(255, 255, 255, 0.1) !important; } body.admin-dark .progress-bar, body.app-dark .progress-bar { background: var(--primary) !important; } /* Universal Tooltip Styling */ body.admin-dark .tooltip .tooltip-inner, body.app-dark .tooltip .tooltip-inner { background: var(--dash-card) !important; color: var(--dash-text) !important; border: 1px solid var(--dash-card-border) !important; } /* Universal Popover Styling */ body.admin-dark .popover, body.app-dark .popover { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .popover-header, body.app-dark .popover-header { background: rgba(255, 255, 255, 0.06) !important; border-bottom-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark .popover-body, body.app-dark .popover-body { color: var(--dash-text) !important; } /* Universal Accordion Styling */ body.admin-dark .accordion-item, body.app-dark .accordion-item { background: var(--dash-card) !important; border-color: var(--dash-card-border) !important; } body.admin-dark .accordion-button, body.app-dark .accordion-button { background: rgba(255, 255, 255, 0.06) !important; color: var(--dash-text) !important; } body.admin-dark .accordion-button:not(.collapsed), body.app-dark .accordion-button:not(.collapsed) { background: rgba(255, 255, 255, 0.1) !important; color: var(--dash-text) !important; } body.admin-dark .accordion-body, body.app-dark .accordion-body { color: var(--dash-text) !important; } /* Universal Spinner Styling */ body.admin-dark .spinner-border, body.app-dark .spinner-border { border-color: var(--primary) !important; border-right-color: transparent !important; } body.admin-dark .spinner-grow, body.app-dark .spinner-grow { background: var(--primary) !important; } /* Universal Input Group Styling */ body.admin-dark .input-group-text, body.app-dark .input-group-text { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } /* Universal Close Button Styling */ body.admin-dark .btn-close, body.app-dark .btn-close { filter: invert(1) !important; opacity: 0.8 !important; } body.admin-dark .btn-close:hover, body.app-dark .btn-close:hover { opacity: 1 !important; } /* Universal Divider Styling */ body.admin-dark hr, body.app-dark hr { border-color: var(--dash-card-border) !important; opacity: 1 !important; } /* Universal Code/Pre Styling */ body.admin-dark code, body.admin-dark pre, body.app-dark code, body.app-dark pre { background: rgba(255, 255, 255, 0.06) !important; color: var(--dash-text) !important; border-color: var(--dash-card-border) !important; } /* Universal Blockquote Styling */ body.admin-dark blockquote, body.app-dark blockquote { border-left-color: var(--primary) !important; color: var(--dash-text-muted) !important; } /* Universal KBD Styling */ body.admin-dark kbd, body.app-dark kbd { background: var(--dash-card) !important; color: var(--dash-text) !important; border-color: var(--dash-card-border) !important; } /* Universal Mark/Highlight Styling */ body.admin-dark mark, body.app-dark mark { background: var(--warning-light) !important; color: var(--dash-text) !important; } /* Universal Abbr Styling */ body.admin-dark abbr[title], body.app-dark abbr[title] { border-bottom-color: var(--dash-text-muted) !important; } /* Universal Summary/Details Styling */ body.admin-dark summary, body.app-dark summary { color: var(--dash-text) !important; } body.admin-dark details, body.app-dark details { color: var(--dash-text) !important; } /* Universal Figure/Caption Styling */ body.admin-dark figure, body.app-dark figure { color: var(--dash-text) !important; } body.admin-dark figcaption, body.app-dark figcaption { color: var(--dash-text-muted) !important; } /* Universal Address Styling */ body.admin-dark address, body.app-dark address { color: var(--dash-text) !important; } /* Universal Datalist Styling */ body.admin-dark datalist option, body.app-dark datalist option { background: var(--dash-card) !important; color: var(--dash-text) !important; } /* Universal Select Option Styling */ body.admin-dark select option, body.app-dark select option { background: var(--dash-card) !important; color: var(--dash-text) !important; } /* Universal Textarea Styling */ body.admin-dark textarea, body.app-dark textarea { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--dash-card-border) !important; color: var(--dash-text) !important; } body.admin-dark textarea::placeholder, body.app-dark textarea::placeholder { color: rgba(255, 255, 255, 0.4) !important; } body.admin-dark textarea:focus, body.app-dark textarea:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--primary) !important; color: var(--dash-text) !important; } /* Universal Link Styling */ body.admin-dark a:not(.btn):not(.nav-link):not(.dropdown-item), body.app-dark a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--dash-accent) !important; } body.admin-dark a:not(.btn):not(.nav-link):not(.dropdown-item):hover, body.app-dark a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--primary) !important; } /* Universal Image Styling */ body.admin-dark img, body.app-dark img { opacity: 0.95; } body.admin-dark img:hover, body.app-dark img:hover { opacity: 1; } /* Universal SVG Styling */ body.admin-dark svg, body.app-dark svg { fill: var(--dash-text); } /* Universal Iframe Styling */ body.admin-dark iframe, body.app-dark iframe { border-color: var(--dash-card-border) !important; } /* Universal Scrollbar Styling */ body.admin-dark ::-webkit-scrollbar, body.app-dark ::-webkit-scrollbar { width: 8px; height: 8px; } body.admin-dark ::-webkit-scrollbar-track, body.app-dark ::-webkit-scrollbar-track { background: var(--dash-bg); } body.admin-dark ::-webkit-scrollbar-thumb, body.app-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.admin-dark ::-webkit-scrollbar-thumb:hover, body.app-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Universal Selection Styling */ body.admin-dark ::selection, body.app-dark ::selection { background: var(--primary-light); color: var(--dash-text); } body.admin-dark ::-moz-selection, body.app-dark ::-moz-selection { background: var(--primary-light); color: var(--dash-text); } /* =================================== UNIFIED DARK THEME – FORCE OVERRIDES Ensures every page (admin, shop, user) looks identical regardless of inline styles or per-page stylesheets =================================== */ /* --- Background & Main Content --- */ body.admin-dark .main-content, body.app-dark .main-content { background: transparent !important; color: rgba(255,255,255,0.92) !important; } /* --- Page Headings --- */ body.admin-dark h1, body.admin-dark h2, body.admin-dark h3, body.admin-dark h4, body.admin-dark h5, body.admin-dark h6, body.app-dark h1, body.app-dark h2, body.app-dark h3, body.app-dark h4, body.app-dark h5, body.app-dark h6 { color: rgba(255,255,255,0.95) !important; } /* --- Text overrides for inline style="color:#1a1a1a" etc --- */ body.admin-dark .main-content [style*="color:#1a1a1a"], body.admin-dark .main-content [style*="color: #1a1a1a"], body.app-dark .main-content [style*="color:#1a1a1a"], body.app-dark .main-content [style*="color: #1a1a1a"] { color: rgba(255,255,255,0.95) !important; } /* --- Cards: force dark glassmorphism regardless of inline background styles --- */ body.admin-dark .card:not([class*="stat-card-"]):not([class*="bg-"]), body.app-dark .card:not([class*="stat-card-"]):not([class*="bg-"]) { background: rgba(30,41,59,0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(99,102,241,0.2) !important; color: rgba(255,255,255,0.9) !important; } body.admin-dark .card:not([class*="stat-card-"]):not([class*="bg-"]):hover, body.app-dark .card:not([class*="stat-card-"]):not([class*="bg-"]):hover { background: rgba(30,41,59,0.82) !important; border-color: rgba(99,102,241,0.35) !important; } /* --- Card headers: standardize to semi-transparent dark unless they have gradient bg --- */ body.admin-dark .card-header, body.app-dark .card-header { background: rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(99,102,241,0.2) !important; color: rgba(255,255,255,0.95) !important; } /* Colorful gradient card headers - preserve their gradients, ensure white text */ body.admin-dark .card-header[style*="background:linear-gradient"], body.admin-dark .card-header[style*="background: linear-gradient"], body.app-dark .card-header[style*="background:linear-gradient"], body.app-dark .card-header[style*="background: linear-gradient"] { border-bottom: none !important; color: #fff !important; } /* Stat/badge cards with inline gradient backgrounds - keep their gradient */ body.admin-dark .card[style*="background:linear-gradient"], body.admin-dark .card[style*="background: linear-gradient"], body.app-dark .card[style*="background:linear-gradient"], body.app-dark .card[style*="background: linear-gradient"] { border: none !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.admin-dark .card[style*="background:linear-gradient"] *, body.admin-dark .card[style*="background: linear-gradient"] *, body.app-dark .card[style*="background:linear-gradient"] *, body.app-dark .card[style*="background: linear-gradient"] * { color: #fff !important; } /* --- Card body: always transparent so card bg shows through --- */ body.admin-dark .card-body, body.app-dark .card-body { background: transparent !important; color: rgba(255,255,255,0.88) !important; } /* --- Nested cards inside card-body --- */ body.admin-dark .card-body .card, body.app-dark .card-body .card { background: rgba(15,23,42,0.6) !important; border: 1px solid rgba(99,102,241,0.15) !important; } /* --- Sidebar: always dark gradient --- */ body.admin-dark .sidebar, body.app-dark .sidebar { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; border-right: 1px solid rgba(99,102,241,0.2) !important; } /* --- Form controls: dark inputs --- */ body.admin-dark .form-control, body.admin-dark .form-select, body.app-dark .form-control, body.app-dark .form-select { background: rgba(15,23,42,0.7) !important; border: 1px solid rgba(99,102,241,0.25) !important; color: rgba(255,255,255,0.9) !important; } body.admin-dark .form-control:focus, body.admin-dark .form-select:focus, body.app-dark .form-control:focus, body.app-dark .form-select:focus { background: rgba(15,23,42,0.85) !important; border-color: rgba(99,102,241,0.55) !important; box-shadow: 0 0 0 0.2rem rgba(99,102,241,0.2) !important; color: rgba(255,255,255,0.95) !important; } body.admin-dark .form-control::placeholder, body.app-dark .form-control::placeholder { color: rgba(255,255,255,0.35) !important; } body.admin-dark .form-label, body.app-dark .form-label { color: rgba(255,255,255,0.85) !important; } body.admin-dark .input-group-text, body.app-dark .input-group-text { background: rgba(15,23,42,0.8) !important; border-color: rgba(99,102,241,0.25) !important; color: rgba(255,255,255,0.7) !important; } /* --- Tables: full dark --- */ body.admin-dark .table, body.app-dark .table { --bs-table-bg: transparent !important; --bs-table-striped-bg: rgba(255,255,255,0.03) !important; --bs-table-hover-bg: rgba(99,102,241,0.08) !important; color: rgba(255,255,255,0.88) !important; } body.admin-dark .table thead th, body.app-dark .table thead th { background: rgba(255,255,255,0.07) !important; color: rgba(255,255,255,0.9) !important; border-color: rgba(255,255,255,0.1) !important; font-weight: 600; } body.admin-dark .table td, body.admin-dark .table th, body.app-dark .table td, body.app-dark .table th { border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.85) !important; } body.admin-dark .table-light, body.app-dark .table-light { --bs-table-bg: rgba(255,255,255,0.05) !important; --bs-table-color: rgba(255,255,255,0.9) !important; } /* --- Badges --- */ body.admin-dark .badge.bg-light, body.app-dark .badge.bg-light { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.9) !important; } /* --- Alerts --- */ body.admin-dark .alert, body.app-dark .alert { border-radius: 10px; } body.admin-dark .alert-success, body.app-dark .alert-success { background: rgba(16,185,129,0.15) !important; border-color: rgba(16,185,129,0.3) !important; color: #6ee7b7 !important; } body.admin-dark .alert-danger, body.app-dark .alert-danger { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; } body.admin-dark .alert-warning, body.app-dark .alert-warning { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.3) !important; color: #fcd34d !important; } body.admin-dark .alert-info, body.app-dark .alert-info { background: rgba(59,130,246,0.15) !important; border-color: rgba(59,130,246,0.3) !important; color: #93c5fd !important; } /* --- Modals --- */ body.admin-dark .modal-content, body.app-dark .modal-content { background: #1e293b !important; border: 1px solid rgba(99,102,241,0.25) !important; color: rgba(255,255,255,0.9) !important; } body.admin-dark .modal-header, body.app-dark .modal-header { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(99,102,241,0.2) !important; color: rgba(255,255,255,0.95) !important; } body.admin-dark .modal-footer, body.app-dark .modal-footer { background: rgba(255,255,255,0.03) !important; border-top: 1px solid rgba(99,102,241,0.2) !important; } body.admin-dark .btn-close, body.app-dark .btn-close { filter: invert(1) !important; } /* --- Dropdowns --- */ body.admin-dark .dropdown-menu, body.app-dark .dropdown-menu { background: #1e293b !important; border: 1px solid rgba(99,102,241,0.25) !important; } body.admin-dark .dropdown-item, body.app-dark .dropdown-item { color: rgba(255,255,255,0.85) !important; } body.admin-dark .dropdown-item:hover, body.app-dark .dropdown-item:hover { background: rgba(99,102,241,0.15) !important; color: #fff !important; } /* --- List groups --- */ body.admin-dark .list-group-item, body.app-dark .list-group-item { background: rgba(30,41,59,0.6) !important; border-color: rgba(99,102,241,0.15) !important; color: rgba(255,255,255,0.88) !important; } body.admin-dark .list-group-item:hover, body.app-dark .list-group-item:hover { background: rgba(99,102,241,0.12) !important; } body.admin-dark .list-group-item.active, body.app-dark .list-group-item.active { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-color: transparent !important; color: #fff !important; } /* --- Pagination --- */ body.admin-dark .page-link, body.app-dark .page-link { background: rgba(30,41,59,0.7) !important; border-color: rgba(99,102,241,0.2) !important; color: rgba(255,255,255,0.8) !important; } body.admin-dark .page-link:hover, body.app-dark .page-link:hover { background: rgba(99,102,241,0.2) !important; color: #fff !important; } body.admin-dark .page-item.active .page-link, body.app-dark .page-item.active .page-link { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-color: transparent !important; } /* --- Nav tabs --- */ body.admin-dark .nav-tabs, body.app-dark .nav-tabs { border-color: rgba(99,102,241,0.2) !important; } body.admin-dark .nav-tabs .nav-link, body.app-dark .nav-tabs .nav-link { color: rgba(255,255,255,0.65) !important; } body.admin-dark .nav-tabs .nav-link.active, body.app-dark .nav-tabs .nav-link.active { background: rgba(99,102,241,0.15) !important; border-color: rgba(99,102,241,0.3) rgba(99,102,241,0.3) transparent !important; color: #a78bfa !important; } /* --- Progress bars --- */ body.admin-dark .progress, body.app-dark .progress { background: rgba(255,255,255,0.1) !important; border-radius: 8px; } /* --- Stat cards: unified icon box style --- */ body.admin-dark .stat-icon-box, body.app-dark .stat-icon-box { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; } /* --- Page title style (replaces inline color:#1a1a1a) --- */ body.admin-dark .page-title, body.app-dark .page-title { color: rgba(255,255,255,0.95) !important; font-weight: 700; font-size: 1.75rem; } body.admin-dark .page-subtitle, body.app-dark .page-subtitle { color: rgba(255,255,255,0.55) !important; font-size: 0.875rem; } /* --- Border utilities in dark mode --- */ body.admin-dark .border, body.app-dark .border { border-color: rgba(99,102,241,0.2) !important; } body.admin-dark .border-top, body.admin-dark .border-bottom, body.admin-dark .border-start, body.admin-dark .border-end, body.app-dark .border-top, body.app-dark .border-bottom, body.app-dark .border-start, body.app-dark .border-end { border-color: rgba(99,102,241,0.2) !important; } /* --- Horizontal rule --- */ body.admin-dark hr, body.app-dark hr { border-color: rgba(99,102,241,0.2) !important; opacity: 1; } /* --- Text utilities in dark mode --- */ body.admin-dark .text-dark, body.app-dark .text-dark { color: rgba(255,255,255,0.9) !important; } body.admin-dark .text-muted, body.app-dark .text-muted { color: rgba(255,255,255,0.5) !important; } body.admin-dark .text-secondary, body.app-dark .text-secondary { color: rgba(255,255,255,0.6) !important; } /* --- Background utilities override for dark pages --- */ body.admin-dark .bg-white, body.app-dark .bg-white { background: rgba(255,255,255,0.05) !important; } body.admin-dark .bg-light, body.app-dark .bg-light { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.9) !important; } body.admin-dark .bg-body, body.app-dark .bg-body { background: transparent !important; } /* --- Stat card gradients (unified across all pages) --- */ body.admin-dark .stat-card-blue, body.app-dark .stat-card-blue { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-amber, body.app-dark .stat-card-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-green, body.app-dark .stat-card-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-purple, body.app-dark .stat-card-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-pink, body.app-dark .stat-card-pink { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-cyan, body.app-dark .stat-card-cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-indigo, body.app-dark .stat-card-indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .stat-card-blue *, body.admin-dark .stat-card-amber *, body.admin-dark .stat-card-green *, body.admin-dark .stat-card-purple *, body.admin-dark .stat-card-pink *, body.admin-dark .stat-card-cyan *, body.admin-dark .stat-card-indigo *, body.app-dark .stat-card-blue *, body.app-dark .stat-card-amber *, body.app-dark .stat-card-green *, body.app-dark .stat-card-purple *, body.app-dark .stat-card-pink *, body.app-dark .stat-card-cyan *, body.app-dark .stat-card-indigo * { color: #fff !important; } /* --- Unified card header gradient variants --- */ body.admin-dark .card-header-warning, body.app-dark .card-header-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-purple, body.app-dark .card-header-purple { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-green, body.app-dark .card-header-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-blue, body.app-dark .card-header-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-indigo, body.app-dark .card-header-indigo { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-danger, body.app-dark .card-header-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; border: none !important; } body.admin-dark .card-header-warning *, body.admin-dark .card-header-purple *, body.admin-dark .card-header-green *, body.admin-dark .card-header-blue *, body.admin-dark .card-header-indigo *, body.admin-dark .card-header-danger *, body.app-dark .card-header-warning *, body.app-dark .card-header-purple *, body.app-dark .card-header-green *, body.app-dark .card-header-blue *, body.app-dark .card-header-indigo *, body.app-dark .card-header-danger * { color: #fff !important; } /* Animated background orbs - unified */ body.admin-dark, body.app-dark { position: relative; } /* Ensure inline styles on page headings don't override dark theme */ body.admin-dark .main-content > h1, body.admin-dark .main-content > h2, body.admin-dark .main-content > h3, body.admin-dark .main-content > div > h1, body.admin-dark .main-content > div > h2, body.admin-dark .main-content > div > h3, body.app-dark .main-content > h1, body.app-dark .main-content > h2, body.app-dark .main-content > h3, body.app-dark .main-content > div > h1, body.app-dark .main-content > div > h2, body.app-dark .main-content > div > h3 { color: rgba(255,255,255,0.95) !important; }