/* ========================================================================== EXECUTIVE STICKY HEADER & FINANCIAL HUD ========================================================================== */ #executive-header { position: sticky; top: 0; z-index: 100; background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } #corporate-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border-color); } .corporate-brand { display: flex; align-items: center; gap: 10px; } .brand-logo-icon { width: 32px; height: 32px; background: var(--primary-blue-light); color: var(--primary-blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .brand-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); } .brand-subtitle { font-size: 0.72rem; font-weight: 600; color: var(--primary-blue); margin-left: 6px; background: var(--primary-blue-light); padding: 2px 6px; border-radius: 4px; } .status-right { display: flex; align-items: center; gap: 8px; } .btn-icon-soft { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface-sub); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-icon-soft:hover { background: var(--border-color); color: var(--text-primary); } .btn-user-badge { background: none; border: 1px solid var(--border-color); color: var(--primary-blue); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: var(--font-mono); } .btn-user-badge:hover { background: var(--primary-blue-light); } /* Financial HUD: Desktop 3-part layout (Left: Finances, Center: Sector Bar, Right: Dept Buttons & Multiplier) */ #financial-hud { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 16px; max-width: 1680px; margin: 0 auto; box-sizing: border-box; } /* Consolidated Executive Financial Hub */ .executive-fin-hub { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 6px 14px; border-radius: var(--radius-md); background: #f8faff; border: 1px solid #bfdbfe; flex-shrink: 0; min-width: 270px; box-shadow: var(--shadow-sm); } .fin-hub-main { display: flex; flex-direction: column; } .fin-hub-divider { width: 1px; height: 38px; background: #cbd5e1; } .fin-hub-details { display: flex; flex-direction: column; gap: 2px; } .fin-detail-row { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; white-space: nowrap; } .fin-detail-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .fin-detail-val { font-weight: 700; color: var(--text-primary); } .hud-label { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .hud-main-val { font-size: 1.20rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: 1px 0; } .hud-sub-val { font-size: 0.72rem; font-weight: 700; } .rate-positive { color: var(--emerald-dark); } .text-equity { color: var(--purple-rnd); } /* Centered Sector Container in Sticky Header */ #header-sector-container { flex: 1; display: flex; justify-content: center; min-width: 0; max-width: 820px; } #header-sector-container .production-toolbar { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px 6px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } #header-sector-container .sector-pill { padding: 6px 4px; } /* Right Header Actions: Department Nav & Buy Multiplier */ .header-right-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .header-nav-group { display: flex; align-items: center; gap: 4px; background: var(--bg-surface-sub); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 3px; } .header-nav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none; line-height: 1; } .header-nav-btn iconify-icon { font-size: 1.05rem; } .header-nav-btn:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .header-nav-btn.active { background: var(--primary-blue); color: #ffffff; border-color: var(--primary-blue); box-shadow: var(--shadow-sm); } .header-nav-btn.active .nav-pill-badge { background: #ffffff; color: var(--primary-blue); } .header-nav-btn.active iconify-icon { color: #ffffff; } .header-nav-btn .nav-pill-badge { margin-left: 2px; padding: 1px 5px; font-size: 0.65rem; } .hud-multiplier-box { display: flex; align-items: center; } .multi-button-group { display: flex; background: var(--bg-surface-sub); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .btn-multi-pill { background: transparent; border: none; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono); transition: all 0.15s; } .btn-multi-pill.active { background: var(--text-primary); color: #ffffff; box-shadow: var(--shadow-sm); }