/* ========================================================================== 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 24px; width: 100%; box-sizing: border-box; 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: Full-width corporate control bar spanning 100% of the screen */ #financial-hud { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 24px; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } /* Consolidated Executive Financial Hub */ .executive-fin-hub { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; padding: 6px 14px; height: 48px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-color); flex-shrink: 0; box-shadow: var(--shadow-sm); box-sizing: border-box; transition: border-color 0.15s, background-color 0.15s; } .executive-fin-hub:hover { border-color: var(--border-subtle); } .fin-hub-main { display: flex; flex-direction: column; justify-content: center; min-width: 110px; } .fin-hub-divider { width: 1px; height: 30px; background: var(--border-color); flex-shrink: 0; } .fin-hub-details { display: flex; flex-direction: column; justify-content: center; 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.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .fin-detail-val { font-weight: 700; color: var(--text-primary); } .hud-label { font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin-bottom: 2px; } .hud-main-val { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; } .hud-sub-val { font-size: 0.70rem; font-weight: 700; line-height: 1; margin-top: 2px; } .rate-positive { color: var(--emerald-dark); } .text-equity { color: var(--purple-rnd); } /* Centered Sector Container in Sticky Header - Dynamic full expansion */ #header-sector-container { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 0; max-width: 100%; } #header-sector-container .production-toolbar { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px; height: 48px; display: flex; align-items: center; box-sizing: border-box; box-shadow: var(--shadow-sm); } #header-sector-container .sector-tabs-scroll { display: flex; gap: 6px; width: 100%; height: 100%; } #header-sector-container .sector-pill { flex: 1 1 0; height: 38px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-surface-sub); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; white-space: nowrap; transition: all 0.15s ease; box-sizing: border-box; font-size: 0.78rem; font-weight: 600; } #header-sector-container .sector-pill:hover { border-color: var(--border-subtle); background: var(--border-color); } #header-sector-container .sector-pill.active { background: var(--btn-active-bg); color: var(--btn-active-text); border-color: var(--btn-active-border); box-shadow: var(--shadow-sm); } #header-sector-container .sector-pill.active iconify-icon { color: var(--btn-active-icon) !important; } #header-sector-container .sector-pill.active .sector-pill-rate { color: var(--btn-active-rate); } /* Right Header Actions: Department Nav & Buy Multiplier */ .header-right-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-nav-group { display: flex; align-items: center; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px; height: 48px; box-sizing: border-box; box-shadow: var(--shadow-sm); } .header-nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.80rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; text-decoration: none; box-sizing: border-box; } .header-nav-btn iconify-icon { font-size: 1.15rem; } .header-nav-btn:hover { background: var(--bg-surface-sub); color: var(--text-primary); border-color: var(--border-color); } .header-nav-btn.active { background: var(--btn-active-bg); color: var(--btn-active-text); border-color: var(--btn-active-border); 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: var(--btn-active-icon); } .header-nav-btn .nav-pill-badge { margin-left: 2px; padding: 2px 6px; font-size: 0.65rem; font-weight: 800; border-radius: 10px; background: var(--amber-dark); color: #ffffff; } .hud-multiplier-box { display: flex; align-items: center; } .multi-button-group { display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px; height: 48px; gap: 3px; box-sizing: border-box; box-shadow: var(--shadow-sm); } .btn-multi-pill { background: transparent; border: 1px solid transparent; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono); display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; box-sizing: border-box; } .btn-multi-pill:hover { background: var(--bg-surface-sub); color: var(--text-primary); } .btn-multi-pill.active { background: var(--btn-active-bg); color: var(--btn-active-text); border-color: var(--btn-active-border); box-shadow: var(--shadow-sm); }