/* ══════════════════════════════════════════════════════════════ APPEX360 — AI Futuristic Theme Premium dark AI platform with electric blue neon, glassmorphism and subtle animated background effects. Apply: ══════════════════════════════════════════════════════════════ */ /* ── CSS Variable Overrides ── */ body.theme-ai-futuristic { /* ── Core Colors ── */ --color-primary: #4F7CFF; --color-primary-hover: #3D6BEE; --color-primary-light: rgba(79, 124, 255, 0.15); --color-primary-subtle: rgba(79, 124, 255, 0.06); --color-secondary: #7C5CFF; --color-secondary-light: rgba(124, 92, 255, 0.15); --color-accent: #21D4FD; --color-accent-light: rgba(33, 212, 253, 0.15); --color-highlight: #B15EFF; --color-highlight-light: rgba(177, 94, 255, 0.15); --color-success: #32D583; --color-success-hover: #28C076; --color-success-light: rgba(50, 213, 131, 0.15); --color-success-subtle: rgba(50, 213, 131, 0.06); --color-warning: #FBBF24; --color-warning-hover: #F59E0B; --color-warning-light: rgba(251, 191, 36, 0.15); --color-warning-subtle: rgba(251, 191, 36, 0.06); --color-danger: #F04438; --color-danger-hover: #D92D20; --color-danger-light: rgba(240, 68, 56, 0.15); --color-danger-subtle: rgba(240, 68, 56, 0.06); --color-info: #21D4FD; --color-info-light: rgba(33, 212, 253, 0.15); /* ── Surfaces ── */ --surface-page: #050816; --surface-card: rgba(15, 20, 40, 0.85); --surface-card-hover: rgba(20, 28, 56, 0.9); --surface-elevated: rgba(20, 28, 56, 0.92); --surface-overlay: rgba(0, 0, 0, 0.5); --surface-border: rgba(79, 124, 255, 0.15); --surface-border-hover: rgba(79, 124, 255, 0.3); /* ── Text ── */ --text-primary: #F0F4FF; --text-secondary: #8899CC; --text-muted: #5A6B99; --text-inverse: #050816; --text-link: #4F7CFF; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(79, 124, 255, 0.08); --shadow-md: 0 4px 12px rgba(79, 124, 255, 0.12); --shadow-lg: 0 10px 30px rgba(79, 124, 255, 0.15); --shadow-glow-primary: 0 0 20px rgba(79, 124, 255, 0.3); --shadow-glow-secondary: 0 0 20px rgba(124, 92, 255, 0.3); --shadow-glow-accent: 0 0 20px rgba(33, 212, 253, 0.3); } /* ── Body Background with Animated Effects ── */ body.theme-ai-futuristic { background: #050816; position: relative; } body.theme-ai-futuristic::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse 600px 400px at 20% 30%, rgba(79, 124, 255, 0.04) 0%, transparent 60%), radial-gradient(ellipse 500px 500px at 80% 20%, rgba(124, 92, 255, 0.03) 0%, transparent 50%), radial-gradient(ellipse 400px 300px at 60% 70%, rgba(33, 212, 253, 0.02) 0%, transparent 50%); pointer-events: none; z-index: 0; animation: theme-bg-drift 30s ease-in-out infinite alternate; } @keyframes theme-bg-drift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(1%, 1%) rotate(0.5deg); } 100% { transform: translate(-1%, -0.5%) rotate(-0.5deg); } } /* ── Glassmorphism Base ── */ body.theme-ai-futuristic .glass, body.theme-ai-futuristic [class*="apex-card"], body.theme-ai-futuristic .card { background: rgba(15, 20, 40, 0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(79, 124, 255, 0.12) !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important; transition: all 0.2s ease !important; } body.theme-ai-futuristic [class*="apex-card"]:hover, body.theme-ai-futuristic .card:hover { border-color: rgba(79, 124, 255, 0.25) !important; box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), var(--shadow-glow-primary) !important; transform: translateY(-1px); } /* ── Global Navigation ── */ body.theme-ai-futuristic .apex-global-nav { background: rgba(5, 8, 22, 0.88) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(79, 124, 255, 0.12) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important; } body.theme-ai-futuristic .apex-nav-link:hover { background: rgba(79, 124, 255, 0.08) !important; color: #4F7CFF !important; } body.theme-ai-futuristic .apex-nav-active { color: #4F7CFF !important; background: rgba(79, 124, 255, 0.1) !important; box-shadow: inset 0 -2px 0 #4F7CFF !important; } body.theme-ai-futuristic .apex-nav-avatar:hover { border-color: rgba(79, 124, 255, 0.3) !important; background: rgba(79, 124, 255, 0.06) !important; } body.theme-ai-futuristic #apex-search-wrapper:focus-within { border-color: rgba(79, 124, 255, 0.5) !important; box-shadow: 0 0 15px rgba(79, 124, 255, 0.15) !important; } body.theme-ai-futuristic #apex-notif-bell:hover { color: #4F7CFF !important; background: rgba(79, 124, 255, 0.08) !important; } body.theme-ai-futuristic #apex-notif-badge { background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important; box-shadow: 0 0 8px rgba(79, 124, 255, 0.5) !important; } body.theme-ai-futuristic #apex-status-indicator span:first-child { box-shadow: 0 0 8px currentColor !important; } /* ── Dropdowns & Modals ── */ body.theme-ai-futuristic .dropdown-content, body.theme-ai-futuristic [class*="dropdown-content"], body.theme-ai-futuristic #apex-search-dropdown, body.theme-ai-futuristic #apex-quick-actions-menu, body.theme-ai-futuristic #apex-feedback-panel, body.theme-ai-futuristic #apex-command-palette > div { background: rgba(10, 14, 30, 0.95) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(79, 124, 255, 0.12) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), var(--shadow-glow-primary) !important; } body.theme-ai-futuristic .dropdown-content li a:hover { background: rgba(79, 124, 255, 0.08) !important; color: #4F7CFF !important; } /* ── Buttons ── */ body.theme-ai-futuristic .btn-primary, body.theme-ai-futuristic [class*="btn-primary"], body.theme-ai-futuristic .apex-btn-primary { background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important; border: none !important; color: #fff !important; box-shadow: 0 4px 15px rgba(79, 124, 255, 0.25) !important; transition: all 0.2s ease !important; } body.theme-ai-futuristic .btn-primary:hover, body.theme-ai-futuristic .apex-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 25px rgba(79, 124, 255, 0.35), var(--shadow-glow-primary) !important; } body.theme-ai-futuristic .btn-secondary, body.theme-ai-futuristic .apex-btn-secondary { background: rgba(124, 92, 255, 0.08) !important; border: 1px solid rgba(124, 92, 255, 0.2) !important; color: #B597FF !important; } body.theme-ai-futuristic .btn-secondary:hover, body.theme-ai-futuristic .apex-btn-secondary:hover { background: rgba(124, 92, 255, 0.15) !important; border-color: rgba(124, 92, 255, 0.35) !important; box-shadow: 0 0 15px rgba(124, 92, 255, 0.2) !important; } body.theme-ai-futuristic .btn-ghost, body.theme-ai-futuristic .apex-btn-outline { background: rgba(15, 20, 40, 0.5) !important; border: 1px solid rgba(79, 124, 255, 0.15) !important; backdrop-filter: blur(8px) !important; color: #8899CC !important; } body.theme-ai-futuristic .btn-ghost:hover, body.theme-ai-futuristic .apex-btn-outline:hover { border-color: rgba(79, 124, 255, 0.35) !important; color: #4F7CFF !important; background: rgba(79, 124, 255, 0.06) !important; } body.theme-ai-futuristic .btn-danger, body.theme-ai-futuristic .apex-btn-danger { background: linear-gradient(135deg, #F04438, #D92D20) !important; box-shadow: 0 4px 15px rgba(240, 68, 56, 0.25) !important; } body.theme-ai-futuristic .btn-danger:hover { box-shadow: 0 8px 25px rgba(240, 68, 56, 0.35) !important; transform: translateY(-1px) !important; } body.theme-ai-futuristic .btn-success, body.theme-ai-futuristic .apex-btn-success { background: linear-gradient(135deg, #32D583, #28C076) !important; box-shadow: 0 4px 15px rgba(50, 213, 131, 0.25) !important; } body.theme-ai-futuristic .btn-success:hover { box-shadow: 0 8px 25px rgba(50, 213, 131, 0.35) !important; transform: translateY(-1px) !important; } /* ── Forms ── */ body.theme-ai-futuristic input[type="text"], body.theme-ai-futuristic input[type="email"], body.theme-ai-futuristic input[type="password"], body.theme-ai-futuristic input[type="search"], body.theme-ai-futuristic input[type="number"], body.theme-ai-futuristic input[type="tel"], body.theme-ai-futuristic textarea, body.theme-ai-futuristic select { background: rgba(15, 20, 40, 0.6) !important; border: 1px solid rgba(79, 124, 255, 0.12) !important; border-radius: 8px !important; color: #F0F4FF !important; transition: all 0.2s ease !important; } body.theme-ai-futuristic input:focus, body.theme-ai-futuristic textarea:focus, body.theme-ai-futuristic select:focus { border-color: #4F7CFF !important; box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 15px rgba(79, 124, 255, 0.1) !important; outline: none !important; } body.theme-ai-futuristic label { color: #8899CC !important; font-weight: 500 !important; } body.theme-ai-futuristic input::placeholder, body.theme-ai-futuristic textarea::placeholder { color: #5A6B99 !important; } body.theme-ai-futuristic select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238899CC' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; -webkit-appearance: none !important; appearance: none !important; } /* ── Tables ── */ body.theme-ai-futuristic table, body.theme-ai-futuristic .table { border-collapse: separate !important; border-spacing: 0 !important; } body.theme-ai-futuristic table th, body.theme-ai-futuristic .table th { background: rgba(79, 124, 255, 0.06) !important; color: #8899CC !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(79, 124, 255, 0.1) !important; position: sticky !important; top: 0 !important; z-index: 1 !important; } body.theme-ai-futuristic table td, body.theme-ai-futuristic .table td { padding: 12px 16px !important; border-bottom: 1px solid rgba(79, 124, 255, 0.06) !important; color: #CCD6F0 !important; font-size: 13px !important; } body.theme-ai-futuristic table tr:nth-child(even) td, body.theme-ai-futuristic .table tr:nth-child(even) td { background: rgba(79, 124, 255, 0.02) !important; } body.theme-ai-futuristic table tr:hover td, body.theme-ai-futuristic .table tr:hover td { background: rgba(79, 124, 255, 0.04) !important; } body.theme-ai-futuristic table tr.selected td, body.theme-ai-futuristic .table tr.selected td { background: rgba(79, 124, 255, 0.08) !important; box-shadow: inset 3px 0 0 #4F7CFF !important; } /* ── Badges & Tags ── */ body.theme-ai-futuristic .badge, body.theme-ai-futuristic .apex-tag { background: rgba(79, 124, 255, 0.08) !important; border: 1px solid rgba(79, 124, 255, 0.15) !important; color: #4F7CFF !important; border-radius: 6px !important; } body.theme-ai-futuristic .badge-success { background: rgba(50, 213, 131, 0.1) !important; border-color: rgba(50, 213, 131, 0.2) !important; color: #32D583 !important; } body.theme-ai-futuristic .badge-warning { background: rgba(251, 191, 36, 0.1) !important; border-color: rgba(251, 191, 36, 0.2) !important; color: #FBBF24 !important; } body.theme-ai-futuristic .badge-error, body.theme-ai-futuristic .badge-danger { background: rgba(240, 68, 56, 0.1) !important; border-color: rgba(240, 68, 56, 0.2) !important; color: #F04438 !important; } /* ── Progress Bars ── */ body.theme-ai-futuristic progress, body.theme-ai-futuristic .progress-bar, body.theme-ai-futuristic .apex-progress-fill { background: rgba(79, 124, 255, 0.08) !important; border-radius: 4px !important; } body.theme-ai-futuristic .apex-progress-fill, body.theme-ai-futuristic .progress-bar-fill { background: linear-gradient(90deg, #4F7CFF, #7C5CFF) !important; box-shadow: 0 0 8px rgba(79, 124, 255, 0.3) !important; } /* ── Data Source Labels ── */ body.theme-ai-futuristic [class*="source-label"] { font-size: 9px !important; border-radius: 4px !important; } body.theme-ai-futuristic .source-live { background: rgba(50, 213, 131, 0.12) !important; color: #32D583 !important; } body.theme-ai-futuristic .source-calculated { background: rgba(79, 124, 255, 0.12) !important; color: #4F7CFF !important; } body.theme-ai-futuristic .source-benchmark { background: rgba(251, 191, 36, 0.12) !important; color: #FBBF24 !important; } body.theme-ai-futuristic .source-demo { background: rgba(124, 92, 255, 0.12) !important; color: #B597FF !important; } /* ── Alerts & Notifications ── */ body.theme-ai-futuristic .alert, body.theme-ai-futuristic [class*="alert-"] { border-radius: 10px !important; border-width: 1px !important; } body.theme-ai-futuristic .alert-success { background: rgba(50, 213, 131, 0.08) !important; border-color: rgba(50, 213, 131, 0.2) !important; color: #32D583 !important; } body.theme-ai-futuristic .alert-warning { background: rgba(251, 191, 36, 0.08) !important; border-color: rgba(251, 191, 36, 0.2) !important; color: #FBBF24 !important; } body.theme-ai-futuristic .alert-error, body.theme-ai-futuristic .alert-danger { background: rgba(240, 68, 56, 0.08) !important; border-color: rgba(240, 68, 56, 0.2) !important; color: #F04438 !important; } body.theme-ai-futuristic .alert-info { background: rgba(33, 212, 253, 0.08) !important; border-color: rgba(33, 212, 253, 0.2) !important; color: #21D4FD !important; } /* ── KPI Cards ── */ body.theme-ai-futuristic [class*="kpi-"], body.theme-ai-futuristic .stat-card { background: rgba(15, 20, 40, 0.75) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(79, 124, 255, 0.1) !important; border-radius: 12px !important; transition: all 0.2s ease !important; } body.theme-ai-futuristic [class*="kpi-"]:hover, body.theme-ai-futuristic .stat-card:hover { border-color: rgba(79, 124, 255, 0.25) !important; box-shadow: var(--shadow-glow-primary) !important; transform: translateY(-1px) !important; } /* ── Charts ── */ body.theme-ai-futuristic .apex-chart-grid line, body.theme-ai-futuristic [class*="chart-grid"] line { stroke: rgba(79, 124, 255, 0.06) !important; } body.theme-ai-futuristic .apex-chart-line { filter: drop-shadow(0 0 6px rgba(79, 124, 255, 0.3)) !important; } body.theme-ai-futuristic .apex-chart-point { filter: drop-shadow(0 0 8px rgba(79, 124, 255, 0.5)) !important; } /* ── Intelligence Wheel ── */ body.theme-ai-futuristic .donut-segment:hover { filter: drop-shadow(0 0 10px rgba(79, 124, 255, 0.3)) !important; } body.theme-ai-futuristic .donut-center-text { filter: drop-shadow(0 0 20px rgba(79, 124, 255, 0.2)) !important; } /* ── Quick Actions FAB ── */ body.theme-ai-futuristic #apex-quick-actions-fab { background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important; box-shadow: 0 4px 20px rgba(79, 124, 255, 0.35) !important; } body.theme-ai-futuristic #apex-quick-actions-fab:hover { box-shadow: 0 8px 30px rgba(79, 124, 255, 0.5) !important; } /* ── Design System Components (Release 16.6) ── */ body.theme-ai-futuristic .ds-btn-primary { background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important; box-shadow: 0 4px 15px rgba(79, 124, 255, 0.25) !important; } body.theme-ai-futuristic .ds-btn-primary:hover { box-shadow: 0 8px 25px rgba(79, 124, 255, 0.35), 0 0 20px rgba(79, 124, 255, 0.15) !important; transform: translateY(-1px) !important; } body.theme-ai-futuristic .ds-btn-secondary { background: rgba(15, 20, 40, 0.6) !important; border-color: rgba(79, 124, 255, 0.15) !important; backdrop-filter: blur(8px) !important; } body.theme-ai-futuristic .ds-btn-secondary:hover { border-color: rgba(79, 124, 255, 0.35) !important; background: rgba(79, 124, 255, 0.08) !important; box-shadow: 0 0 15px rgba(79, 124, 255, 0.1) !important; } body.theme-ai-futuristic .ds-kpi-card { background: rgba(15, 20, 40, 0.7) !important; backdrop-filter: blur(12px) !important; border-color: rgba(79, 124, 255, 0.1) !important; } body.theme-ai-futuristic .ds-kpi-card:hover { border-color: rgba(79, 124, 255, 0.25) !important; box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), 0 0 20px rgba(79, 124, 255, 0.08) !important; } body.theme-ai-futuristic .exec-card { background: rgba(15, 20, 40, 0.7) !important; backdrop-filter: blur(12px) !important; border-color: rgba(79, 124, 255, 0.1) !important; } body.theme-ai-futuristic .exec-card:hover { border-color: rgba(79, 124, 255, 0.25) !important; box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12) !important; } body.theme-ai-futuristic .ds-select, body.theme-ai-futuristic .ds-input { background: rgba(15, 20, 40, 0.6) !important; border-color: rgba(79, 124, 255, 0.12) !important; } body.theme-ai-futuristic .ds-select:focus, body.theme-ai-futuristic .ds-input:focus { border-color: #4F7CFF !important; box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.15), 0 0 15px rgba(79, 124, 255, 0.1) !important; } body.theme-ai-futuristic .ds-section-title, body.theme-ai-futuristic .ds-page-title { color: #F0F4FF !important; } /* ── Footer ── */ body.theme-ai-futuristic .apex-footer, body.theme-ai-futuristic .apex-global-footer, body.theme-ai-futuristic [class*="footer"] { background: rgba(5, 8, 22, 0.92) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(79, 124, 255, 0.08) !important; box-shadow: inset 0 1px 0 rgba(79, 124, 255, 0.04) !important; } body.theme-ai-futuristic .apex-global-footer a.footer-link { transition: all 0.2s ease !important; position: relative !important; } body.theme-ai-futuristic .apex-global-footer a.footer-link:hover { color: #4F7CFF !important; text-shadow: 0 0 20px rgba(79, 124, 255, 0.3) !important; } body.theme-ai-futuristic .apex-global-footer h4 { color: rgba(79, 124, 255, 0.5) !important; letter-spacing: 0.12em !important; } body.theme-ai-futuristic .apex-global-footer [style*="border-top"] { border-top-color: rgba(79, 124, 255, 0.06) !important; } /* ── Pagination ── */ body.theme-ai-futuristic .pagination a, body.theme-ai-futuristic .pagination span { background: rgba(15, 20, 40, 0.5) !important; border: 1px solid rgba(79, 124, 255, 0.1) !important; color: #8899CC !important; border-radius: 6px !important; } body.theme-ai-futuristic .pagination .current { background: linear-gradient(135deg, #4F7CFF, #7C5CFF) !important; border-color: transparent !important; color: #fff !important; } /* ── Tooltips ── */ body.theme-ai-futuristic [class*="tooltip"] { background: rgba(10, 14, 30, 0.95) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(79, 124, 255, 0.15) !important; color: #F0F4FF !important; font-size: 12px !important; border-radius: 6px !important; padding: 4px 10px !important; } /* ── Role Cards (Onboarding) ── */ body.theme-ai-futuristic .role-card { background: rgba(15, 20, 40, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(79, 124, 255, 0.1) !important; border-radius: 12px !important; } body.theme-ai-futuristic .role-card:hover { border-color: rgba(79, 124, 255, 0.3) !important; box-shadow: 0 4px 20px rgba(79, 124, 255, 0.15), var(--shadow-glow-primary) !important; } body.theme-ai-futuristic .role-card input:checked + *, body.theme-ai-futuristic .role-card:has(input:checked) { border-color: #4F7CFF !important; background: rgba(79, 124, 255, 0.08) !important; box-shadow: 0 0 20px rgba(79, 124, 255, 0.2), inset 0 0 20px rgba(79, 124, 255, 0.04) !important; } /* ── Floating Dock ── */ body.theme-ai-futuristic .floating-dock-btn { background: rgba(15, 20, 40, 0.8) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(79, 124, 255, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } body.theme-ai-futuristic .floating-dock-btn:hover { border-color: rgba(79, 124, 255, 0.3) !important; box-shadow: 0 8px 30px rgba(79, 124, 255, 0.2), var(--shadow-glow-primary) !important; } body.theme-ai-futuristic .did-you-know-card { background: rgba(15, 20, 40, 0.75) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(79, 124, 255, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; } /* ── Motion & Animation Reduction ── */ @media (prefers-reduced-motion: reduce) { body.theme-ai-futuristic, body.theme-ai-futuristic *, body.theme-ai-futuristic *::before, body.theme-ai-futuristic *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } body.theme-ai-futuristic::before { animation: none !important; } }