/* ============================================================================ BusinessOptix App Hub — shared chrome (header bar + platform drawer) SINGLE SOURCE OF TRUTH for the standard header styling. Style master = index. Supports BOTH markup conventions in the hub, so any app can drop it in: • handoff / index / KG scheme: #top · .ms · .vbar · .hsearch · .spacer · .logo · .model-ic • variant (agent_map) scheme: .bx-topbar · .material-symbols-outlined · .bx-div · .bx-search · .bx-right Shared in both: .bx-ico · .bx-titlewrap · .bx-title · .avatar · the drawer. Requires these fonts in the host page : Manrope (700,800) · Inter (400-700) · Material Symbols Outlined Pair with bo-chrome.js. See BOx-App-Chrome-Brief.md. ============================================================================ */ :root{ --box-navy:#00005f; --box-blue:#378fc7; --box-bg:#EEF2F8; --box-ink:#2A3550; --box-muted:#7A879B; --box-border:#E2E9F1; --box-pill-border:#d7defb; --box-hover:#EAF3FB; } /* Material Symbols base — both glyph class names supported */ .ms,.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal; line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap; direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24} /* ---- header bar --------------------------------------------------------- */ #top,.bx-topbar{display:flex;align-items:center;gap:13px;height:56px;padding:0 16px;background:#fff; border-bottom:1px solid var(--box-border);box-shadow:0 1px 4px rgba(0,0,95,.05); position:sticky;top:0;z-index:30;font-family:'Inter',ui-sans-serif,system-ui,sans-serif} .bx-chrome{flex:0 0 auto;z-index:30} .bx-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:12px;color:var(--box-navy);cursor:pointer;border:1px solid transparent; text-decoration:none;flex-shrink:0;transition:background .12s} .bx-ico:hover{background:var(--box-hover)} .bx-ico .ms,.bx-ico .material-symbols-outlined{font-size:22px} .vbar,.bx-div{width:1px;height:26px;background:var(--box-border);margin:0 3px} .logo img,.bx-logo img{height:32px;display:block;flex-shrink:0} .bx-titlewrap{display:flex;align-items:center;gap:9px;min-width:0} .bx-titlewrap .model-ic{width:21px;height:21px;color:var(--box-blue);flex-shrink:0} .bx-titlewrap .ms.model-ic{width:auto;height:auto;font-size:21px} .bx-titlewrap .material-symbols-outlined{font-size:21px;color:var(--box-blue)} .bx-title{font-family:'Manrope',ui-sans-serif,sans-serif;font-weight:800;font-size:17px; letter-spacing:-.02em;color:var(--box-navy);white-space:nowrap} /* spacer: master uses a .spacer div, variant uses .bx-right */ #top .spacer,.spacer{flex:1} .bx-right{margin-left:auto;display:flex;align-items:center;gap:9px} /* search pill: .hsearch (holds #search input) or .bx-search */ .hsearch,.bx-search{display:flex;align-items:center;gap:8px;height:34px;min-width:232px;padding:0 14px; border:1px solid var(--box-pill-border);background:#fff;border-radius:9999px;color:var(--box-muted);font-size:12.5px} .hsearch input,.hsearch #search,.bx-search input{font:inherit;font-size:12.5px;border:none;background:none;outline:none;color:var(--box-ink);flex:1;width:auto;padding:0} .hsearch .ms,.hsearch .material-symbols-outlined{font-size:18px;color:var(--box-muted)} .bx-search .ms,.bx-search .material-symbols-outlined{font-size:18px;color:var(--box-muted);margin-left:auto} /* optional pill buttons (Comments / Actions / refresh-as-pill) */ .bx-pillbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:9999px; border:1px solid var(--box-pill-border);background:#fff;color:var(--box-navy);font-family:'Inter',sans-serif; font-weight:600;font-size:12.5px;cursor:pointer;transition:background .12s} .bx-pillbtn:hover{background:var(--box-hover)} .bx-pillbtn .ms,.bx-pillbtn .material-symbols-outlined{font-size:17px;color:var(--box-blue)} .bx-pillbtn.primary{background:var(--box-navy);border-color:var(--box-navy);color:#fff} .bx-pillbtn.primary:hover{background:#000a4d;border-color:#000a4d} .bx-pillbtn.primary .ms,.bx-pillbtn.primary .material-symbols-outlined{color:#fff} .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--box-navy),var(--box-blue)); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px; flex-shrink:0;font-family:'Inter',sans-serif} /* ---- platform drawer (off the menu button) ------------------------------ */ #backdrop{position:fixed;inset:0;background:rgba(0,0,95,.35);opacity:0;visibility:hidden;transition:opacity .2s;z-index:40} #backdrop.open{opacity:1;visibility:visible} #drawer{position:fixed;top:0;left:0;height:100%;width:300px;background:#fff;box-shadow:4px 0 28px rgba(0,0,95,.18); transform:translateX(-100%);transition:transform .22s ease;z-index:50;display:flex;flex-direction:column;font-family:'Inter',sans-serif} #drawer.open{transform:none} .dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--box-border)} .dhead b{color:var(--box-navy);font-size:14px;font-family:'Manrope',sans-serif} .dhead img{height:30px} .dclose{border:none;background:none;cursor:pointer;color:#5A6B82;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center} .dclose:hover{background:var(--box-hover);color:var(--box-blue)} .dclose svg{width:18px;height:18px} .dsec{padding:16px 18px} .dsec h2{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--box-muted);margin-bottom:12px} .plat{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--box-ink);transition:background .12s} .plat:hover{background:var(--box-bg)} .plat .badge{width:34px;height:34px;border-radius:9px;background:var(--box-navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.02em} .plat .pn{flex:1;display:block;background:none;border:0;border-radius:0;padding:0;box-shadow:none;text-align:left;line-height:normal;position:static} .plat .pn b{display:block;font-size:13.5px;font-weight:500;color:var(--box-navy)}.plat .pn span{font-size:11.5px;color:var(--box-muted)} .plat .ext{color:var(--box-muted)}.plat:hover .ext{color:var(--box-blue)}.plat .ext svg{width:15px;height:15px} /* ---- optional: minimal GREY corner chrome (overlay, e.g. on a slide deck) - .bx-corner.left / .bx-corner.right wrappers holding .bx-ico / .avatar. ---- */ .bx-corner{position:fixed;top:12px;z-index:60;display:flex;align-items:center;gap:8px;transition:opacity .15s} .bx-corner.left{left:12px} .bx-corner.right{right:12px} .bx-corner .bx-ico{color:#5A6B82;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .bx-corner .bx-ico:hover{background:rgba(255,255,255,.96);color:var(--box-navy)} .bx-corner .avatar{background:#6b7280} /* grey, not the navy→blue gradient */ /* hide the corner controls while the menu is open (so they don't sit over the drawer) */ body:has(#backdrop.open) .bx-corner{opacity:0;visibility:hidden;pointer-events:none} /* ---- dark header variant: (pair with a white logo, e.g. bo-logo-white.png) Makes the top bar navy so a white wordmark + white icons/title read correctly. Drawer stays light. */ /* Matches the host app's own dark theme (its left toolbar/panel) via --panel/--border/--accent/--text, with fallbacks. */ body.bx-dark #top,body.bx-dark .bx-topbar{background:var(--panel,#1a2029);border-bottom-color:var(--border,rgba(255,255,255,.14));box-shadow:0 1px 4px rgba(0,0,0,.28)} body.bx-dark .bx-ico{color:var(--text,#fff)} body.bx-dark .bx-ico:hover{background:rgba(255,255,255,.10)} body.bx-dark .vbar,body.bx-dark .bx-div{background:var(--border,rgba(255,255,255,.20))} body.bx-dark .bx-title{color:var(--text,#fff)} body.bx-dark .bx-titlewrap .model-ic,body.bx-dark .bx-titlewrap .ms,body.bx-dark .bx-titlewrap .material-symbols-outlined{color:var(--accent,var(--box-blue))} body.bx-dark .hsearch,body.bx-dark .bx-search{background:rgba(255,255,255,.06);border-color:var(--border,rgba(255,255,255,.18));color:var(--muted,#cbd5e1)} body.bx-dark .hsearch input,body.bx-dark .hsearch #search,body.bx-dark .bx-search input{color:var(--text,#fff)} body.bx-dark .bx-pillbtn{background:transparent;border-color:var(--border,rgba(255,255,255,.28));color:var(--text,#fff)} body.bx-dark .bx-pillbtn:hover{background:rgba(255,255,255,.10)}