/* ── Shared Application Header (app-header component) * * Visual reference: contacts.html contacts-header styles (v2 pass). * Rendered by js/components/app-header.js into
. * * Requires: core/tokens.css (--surface-elevated, --border-subtle, etc.) * Requires: components/icon.css (.icon sizing) * Requires: components/status-indicator.css (#api-status pill) * * Preserved selectors (JS contract): * .header .container — auth-bootstrap.js injects #mega-auth-bar here * .nav-link — main.js event delegation (click + active toggle) * .nav-link.active — main.js navigateTo() * data-page attr — main.js dataset.page * #org-picker-slot — platform-admin-org-switcher.js mount point * #api-status — main.js classList .connected / .error * #api-status-text — main.js textContent (sr-only announcement) * * Flash mitigation: this file is loaded in so the placeholder * has its height reserved before JS fires. * ──────────────────────────────────────────────────────────────────── */ /* ── Placeholder: reserve height before JS renders ───────────────── */ #app-header { min-height: var(--layout-header-height, 64px); } /* ── Outer shell ─────────────────────────────────────────────────── */ .header.app-header { background: var(--surface-elevated, #1A1A1F); border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); position: sticky; top: 0; z-index: 200; } /* ── Inner container (auth-bootstrap injects #mega-auth-bar here) ── */ .header.app-header .container { max-width: var(--layout-container-max, 1440px); margin: 0 auto; padding: 0 var(--layout-page-padding-x, 32px); height: var(--layout-header-height, 64px); display: flex; align-items: center; gap: var(--space-6, 24px); } /* ── Brand ───────────────────────────────────────────────────────── */ .header.app-header .header-brand { flex-shrink: 0; } .header.app-header .brand-link { display: flex; align-items: center; gap: var(--space-2, 8px); text-decoration: none; color: var(--color-brand-500, #3B82F6); font-weight: 600; font-size: 1rem; white-space: nowrap; } .header.app-header .brand-link:hover { opacity: 0.85; } .header.app-header .brand-link .icon { width: 22px; height: 22px; flex-shrink: 0; } /* ── Navigation ──────────────────────────────────────────────────── */ /* LAYOUT NOTE: navigation is the middle flexible zone. * flex: 1 1 0 lets it grow into available space (good) and shrink when the * right cluster (header-status + injected #mega-auth-bar) needs room (good). * overflow-x: auto + min-width: 0 allow nav to scroll rather than clip nav * links when viewport is tight; scrollbar is hidden for clean appearance. * Right cluster priority: .header-status has flex-shrink:0, auth-bar has * flex-shrink:1 — both are placed AFTER nav in DOM so they always get their * natural/minimum width; nav absorbs any remaining deficit. */ .header.app-header .navigation { display: flex; align-items: center; gap: var(--space-1, 4px); flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE */ } .header.app-header .navigation::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .header.app-header .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-base, 8px); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary, rgba(255,255,255,0.55)); text-decoration: none; transition: color 0.15s, background 0.15s; white-space: nowrap; flex-shrink: 0; } .header.app-header .nav-link .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s; } .header.app-header .nav-link:hover { color: var(--text-primary, rgba(255,255,255,0.9)); background: rgba(255,255,255,0.06); } .header.app-header .nav-link:hover .icon { opacity: 1; } .header.app-header .nav-link.active { color: var(--color-brand-500, #3B82F6); background: rgba(59,130,246,0.12); } .header.app-header .nav-link.active .icon { opacity: 1; } /* Focus ring (WCAG 2.2 AA) */ .header.app-header .nav-link:focus-visible, .header.app-header .brand-link:focus-visible { outline: 2px solid var(--focus-ring-color, #3B82F6); outline-offset: 2px; } /* ── Right-side status area ──────────────────────────────────────── */ .header.app-header .header-status { display: flex; align-items: center; gap: var(--space-3, 12px); margin-left: auto; flex-shrink: 0; } /* org-picker-slot: platform-admin-org-switcher.js renders a