/* ═══════════════════════════════════════════════════════════════════ Command Center Premium Overrides Activates ONLY when data-color-theme="command-center" is set on . Loaded after v6-design-system.css for higher cascade priority. ═══════════════════════════════════════════════════════════════════ */ /* ── SIDEBAR ─────────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-sidebar { background: linear-gradient(180deg, #0B1221 0%, #0E1729 100%); border-right: 1px solid rgba(212, 168, 67, 0.08); } [data-color-theme="command-center"] .v6-sidebar-logo { color: var(--colors-brand-primary, #D4A843); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; letter-spacing: 0.5px; } [data-color-theme="command-center"] .v6-sidebar-logo svg path, [data-color-theme="command-center"] .v6-sidebar-logo .logo-icon { fill: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-sidebar-item--active { background: rgba(212, 168, 67, 0.08); border-left: 3px solid var(--colors-brand-primary, #D4A843); color: var(--colors-brand-primary, #D4A843); box-shadow: inset 3px 0 12px rgba(212, 168, 67, 0.06); } [data-color-theme="command-center"] .v6-sidebar-item:hover:not(.v6-sidebar-item--active) { background: rgba(212, 168, 67, 0.04); } [data-color-theme="command-center"] .v6-nav-section-label { color: var(--colors-brand-primary, #D4A843); opacity: 0.6; letter-spacing: 0.12em; } [data-color-theme="command-center"] .v6-sidebar-user .v6-avatar-circle { border: 2px solid var(--colors-brand-primary, #D4A843); box-shadow: 0 0 12px rgba(212, 168, 67, 0.15); } [data-color-theme="command-center"] .v6-nav-group { border-bottom: 1px solid rgba(212, 168, 67, 0.06); } /* ── TOPBAR ──────────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-topbar { border-bottom: 1px solid rgba(212, 168, 67, 0.1); background: rgba(12, 21, 32, 0.95); backdrop-filter: blur(16px); } [data-color-theme="command-center"] .v6-topbar-title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; color: var(--colors-text-primary, #F8FAFC); } [data-color-theme="command-center"] .v6-ask-ai-btn { background: linear-gradient(135deg, var(--colors-brand-primary, #D4A843), var(--colors-brand-primary-dark, #B8922E)); color: var(--colors-brand-secondary, #0E1729); border: none; box-shadow: 0 2px 12px rgba(212, 168, 67, 0.2); font-weight: 600; } [data-color-theme="command-center"] .v6-ask-ai-btn:hover { box-shadow: 0 4px 16px rgba(212, 168, 67, 0.3); filter: brightness(1.1); } [data-color-theme="command-center"] .v6-topbar-icon-btn:hover { border-color: rgba(212, 168, 67, 0.3); background: rgba(212, 168, 67, 0.06); } [data-color-theme="command-center"] .v6-topbar .v6-avatar-circle { border: 1.5px solid rgba(212, 168, 67, 0.4); } /* ── CARDS ────────────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-card { background: rgba(20, 30, 44, 0.85); border: 1px solid rgba(212, 168, 67, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(212, 168, 67, 0.03); transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; } [data-color-theme="command-center"] .v6-card:hover { border-color: rgba(212, 168, 67, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(212, 168, 67, 0.04); } [data-color-theme="command-center"] .v6-card-hero { background: linear-gradient(135deg, rgba(212, 168, 67, 0.06) 0%, rgba(20, 30, 44, 0.9) 60%); border: 1px solid rgba(212, 168, 67, 0.18); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(212, 168, 67, 0.05); position: relative; overflow: hidden; } [data-color-theme="command-center"] .v6-card-hero::before { content: ''; position: absolute; top: -30%; left: -10%; width: 50%; height: 160%; background: radial-gradient(ellipse, rgba(212, 168, 67, 0.04) 0%, transparent 70%); pointer-events: none; } [data-color-theme="command-center"] .v6-card-hero .v6-card-hero-greeting { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 24px; background: linear-gradient(135deg, #FFFFFF 30%, var(--colors-brand-primary, #D4A843) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-color-theme="command-center"] .v6-insight-card { background: rgba(20, 30, 44, 0.85); border: 1px solid rgba(212, 168, 67, 0.1); border-left: 3px solid var(--colors-brand-primary, #D4A843); box-shadow: inset 3px 0 8px rgba(212, 168, 67, 0.05); } [data-color-theme="command-center"] .v6-insight-card--gold { border-left-color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-insight-card--teal { border-left-color: var(--colors-brand-accent, #34D399); } /* ── METRIC CARDS ────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-metric-card { background: rgba(20, 30, 44, 0.85); border: 1px solid rgba(212, 168, 67, 0.1); border-radius: var(--shape-border-radius-lg, 14px); transition: border-color 0.3s; } [data-color-theme="command-center"] .v6-metric-card:hover { border-color: rgba(212, 168, 67, 0.2); } [data-color-theme="command-center"] .v6-metric-icon { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1C2839, #0E1729); position: relative; display: flex; align-items: center; justify-content: center; } [data-color-theme="command-center"] .v6-metric-icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, #D4A843 0%, #8B6914 50%, #D4A843 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } [data-color-theme="command-center"] .v6-metric-icon.teal-bg, [data-color-theme="command-center"] .v6-metric-icon.green-bg, [data-color-theme="command-center"] .v6-metric-icon.gold-bg, [data-color-theme="command-center"] .v6-metric-icon.amber-bg { background: radial-gradient(circle at 35% 35%, #1C2839, #0E1729); } [data-color-theme="command-center"] .v6-metric-value { font-size: 22px; font-weight: 800; } [data-color-theme="command-center"] .v6-metric-label { color: var(--colors-gray-600, #8899AA); letter-spacing: 0.04em; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-display { font-family: Georgia, 'Times New Roman', serif; font-style: italic; background: linear-gradient(135deg, #FFFFFF 20%, var(--colors-brand-primary, #D4A843) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-color-theme="command-center"] .v6-h1 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; } [data-color-theme="command-center"] .v6-h2 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; } [data-color-theme="command-center"] .v6-overline { color: var(--colors-brand-primary, #D4A843); letter-spacing: 0.12em; opacity: 0.7; } [data-color-theme="command-center"] .v6-teal-link { color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-teal-link:hover { color: var(--colors-brand-primary-light, #F0D78C); } /* ── JOURNEY BADGE ───────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-journey-badge { background: rgba(212, 168, 67, 0.1); border: 1px solid rgba(212, 168, 67, 0.25); box-shadow: 0 0 8px rgba(212, 168, 67, 0.06); } [data-color-theme="command-center"] .v6-journey-dot { background: var(--colors-brand-primary, #D4A843); box-shadow: 0 0 4px rgba(212, 168, 67, 0.3); } [data-color-theme="command-center"] .v6-journey-dot--empty { border-color: rgba(212, 168, 67, 0.3); } /* ── ACTION ITEMS ────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-action-checkbox.done { background: var(--colors-brand-primary, #D4A843); border-color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-action-item { border-bottom: 1px solid rgba(212, 168, 67, 0.06); } /* ── BUDGET CARD ─────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-card .budget-progress-track { background: rgba(212, 168, 67, 0.08); border-radius: 4px; } /* ── BUTTONS ─────────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-btn-gold { background: linear-gradient(135deg, #D4A843, #B8922E, #D4A843); background-size: 200% 100%; box-shadow: 0 2px 12px rgba(212, 168, 67, 0.2); transition: background-position 0.3s, box-shadow 0.3s, transform 0.2s; } [data-color-theme="command-center"] .v6-btn-gold:hover { background-position: 100% 0; box-shadow: 0 4px 16px rgba(212, 168, 67, 0.3); transform: translateY(-1px); } [data-color-theme="command-center"] .v6-btn-outline { border-color: rgba(212, 168, 67, 0.4); color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-btn-outline:hover { background: rgba(212, 168, 67, 0.08); border-color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-btn-ghost { color: var(--colors-brand-primary, #D4A843); } [data-color-theme="command-center"] .v6-btn-ghost:hover { background: rgba(212, 168, 67, 0.06); } /* ── PAGE BACKGROUND ─────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-body { background: #0E1729; background-image: radial-gradient(ellipse at 50% 0%, rgba(212, 168, 67, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 20% 100%, rgba(212, 168, 67, 0.02) 0%, transparent 30%), radial-gradient(ellipse at 80% 100%, rgba(212, 168, 67, 0.02) 0%, transparent 30%); } [data-color-theme="command-center"] .v6-main-content { position: relative; } [data-color-theme="command-center"] .v6-main-content::before { content: ''; position: fixed; top: 0; left: 240px; right: 0; height: 120px; background-image: linear-gradient(rgba(212, 168, 67, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 168, 67, 0.03) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%); pointer-events: none; z-index: 0; } /* ── ADVISOR PANEL ───────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-advisor-panel { background: #0E1729; border-left: 1px solid rgba(212, 168, 67, 0.1); } [data-color-theme="command-center"] .v6-advisor-panel-header { border-bottom: 1px solid rgba(212, 168, 67, 0.08); } [data-color-theme="command-center"] .v6-chat-bubble--advisor { background: rgba(212, 168, 67, 0.06); border: 1px solid rgba(212, 168, 67, 0.1); } /* ── TABLES ──────────────────────────────────────────────────────── */ [data-color-theme="command-center"] .v6-table th { color: var(--colors-brand-primary, #D4A843); opacity: 0.6; } [data-color-theme="command-center"] .v6-table tr:hover td { background: rgba(212, 168, 67, 0.04); } /* ── SCROLLBAR ───────────────────────────────────────────────────── */ [data-color-theme="command-center"] ::-webkit-scrollbar { width: 6px; } [data-color-theme="command-center"] ::-webkit-scrollbar-track { background: transparent; } [data-color-theme="command-center"] ::-webkit-scrollbar-thumb { background: rgba(212, 168, 67, 0.15); border-radius: 3px; } [data-color-theme="command-center"] ::-webkit-scrollbar-thumb:hover { background: rgba(212, 168, 67, 0.25); }