/* Em*-topbar — mirrors EmStatus/static/style.css `.topbar` block and EmCrm client/src/components/top-bar.tsx. Topbar is always dark (em*-signature); body theme switches via [data-theme] on . */ :root { /* Topbar tokens — always-dark, family signature */ --em-topbar-bg: #1A2F3F; --em-topbar-border: #FCD55B; --em-topbar-text: #f8fafc; --em-topbar-muted: rgba(248, 250, 252, 0.62); --em-topbar-gold: #FCD55B; --em-topbar-gold-soft: rgba(252, 213, 91, 0.10); --em-topbar-gold-border: rgba(252, 213, 91, 0.25); --em-topbar-danger: #f87171; --em-topbar-height: 52px; /* Body tokens — light by default; overridden by [data-theme="dark"] */ --em-bg: #ffffff; --em-bg-alt: #f8fafc; --em-surface: #ffffff; --em-text: #0f172a; --em-text-muted: #475569; --em-border: #e2e8f0; } html[data-theme="dark"] { --em-bg: #0f172a; --em-bg-alt: #111c33; --em-surface: #1e293b; --em-text: #f8fafc; --em-text-muted: #94a3b8; --em-border: #334155; } /* Apply body tokens broadly. Existing AnonQuick AQ-tokens (custom.css) win where set, so legacy components keep their look in light mode. In dark mode we override the AQ-tokens too so cards/sidebar tint correctly. */ body { background: var(--em-bg); color: var(--em-text); padding-top: 0; /* topbar is sticky, no offset needed */ } html[data-theme="dark"] body { --aq-bg: #0f172a; --aq-bg-alt: #111c33; --aq-card: #1e293b; --aq-border: #334155; --aq-text: #f8fafc; --aq-text-muted: #94a3b8; } html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #1e293b 0%, #111c33 100%) !important; border-right: 1px solid #334155 !important; } html[data-theme="dark"] .card { background: #1e293b !important; border-color: #334155 !important; color: #f8fafc; } html[data-theme="dark"] .main-content { background: #0f172a !important; } html[data-theme="dark"] .sidebar-link { color: rgba(248, 250, 252, 0.72); } html[data-theme="dark"] .sidebar-link:hover { color: #f8fafc; background: rgba(252, 213, 91, 0.06); } html[data-theme="dark"] .sidebar-link.active { color: #FCD55B; background: rgba(252, 213, 91, 0.10); } .em-topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 1100; display: flex; align-items: center; justify-content: space-between; height: var(--em-topbar-height); padding: 0 1.25rem; background: var(--em-topbar-bg); border-bottom: 2px solid var(--em-topbar-border); color: var(--em-topbar-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; } .em-topbar__left, .em-topbar__center, .em-topbar__right { display: flex; align-items: center; gap: 1rem; } .em-topbar__right { gap: 0.6rem; } .em-brand { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--em-topbar-text); letter-spacing: -0.01em; } .em-brand__expert { font-weight: 900; font-style: italic; font-size: 1.05rem; } .em-brand__maker { font-weight: 300; font-style: italic; font-size: 1.05rem; } .em-brand__app { margin-left: 0.6rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--em-topbar-gold); } .em-topbar__center a { color: var(--em-topbar-muted); text-decoration: none; font-size: 0.92rem; padding: 0.25rem 0.1rem; border-bottom: 2px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; } .em-topbar__center a:hover { color: var(--em-topbar-text); } .em-topbar__center a.is-active { color: var(--em-topbar-text); border-bottom-color: var(--em-topbar-gold); } .em-topbar__cta { background: var(--em-topbar-gold); color: #1a365d; padding: 0.4rem 0.9rem; border-radius: 0.375rem; font-weight: 600; font-size: 0.85rem; text-decoration: none; } .em-topbar__cta:hover { background: #f59e0b; color: #1a365d; } /* Icon button (theme toggle, future hooks) */ .em-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 0.375rem; color: var(--em-topbar-muted); cursor: pointer; transition: color 0.12s ease, background 0.12s ease; } .em-icon-btn:hover { color: var(--em-topbar-text); background: rgba(255, 255, 255, 0.06); } .em-icon-btn .em-icon { display: block; } .em-icon-btn .em-icon--sun { display: block; } .em-icon-btn .em-icon--moon { display: none; } html[data-theme="dark"] .em-icon-btn .em-icon--sun { display: none; } html[data-theme="dark"] .em-icon-btn .em-icon--moon { display: block; } /* Tenant pill (mirrors EmCrm's TenantBadge) */ .em-tenant { position: relative; } .em-tenant__pill { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 500; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--em-topbar-gold-border); background: var(--em-topbar-gold-soft); color: var(--em-topbar-gold); transition: opacity 0.12s ease; } .em-tenant__pill::-webkit-details-marker { display: none; } .em-tenant__pill:hover { opacity: 0.9; } .em-tenant__slug { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-tenant__chev { font-size: 0.7rem; opacity: 0.85; } .em-tenant__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 1200; min-width: 18rem; max-width: 24rem; background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 0.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); max-height: 60vh; overflow-y: auto; } .em-tenant__item-form { margin: 0; } .em-tenant__item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 0.45rem 0.6rem; font-size: 0.85rem; color: rgba(248, 250, 252, 0.78); border-radius: 0.3rem; cursor: pointer; font-family: inherit; } .em-tenant__item:hover { background: rgba(255, 255, 255, 0.06); color: #f8fafc; } .em-tenant__item.is-active { color: var(--em-topbar-gold); font-weight: 700; } /* User menu */ .em-user-menu { position: relative; } .em-user-menu__trigger { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; color: var(--em-topbar-text); font-size: 0.88rem; padding: 0.25rem 0.4rem; border-radius: 0.375rem; } .em-user-menu__trigger::-webkit-details-marker { display: none; } .em-user-menu__trigger:hover { background: rgba(255, 255, 255, 0.06); } .em-user-menu__avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--em-topbar-gold); color: #1a365d; font-weight: 700; font-size: 0.78rem; } .em-user-menu__name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-user-menu__chev { font-size: 0.75rem; color: var(--em-topbar-muted); } .em-user-menu__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 1200; min-width: 16rem; background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 0.85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color: var(--em-topbar-text); } .em-user-menu__head { display: flex; flex-direction: column; gap: 0.15rem; } .em-user-menu__name-bold { font-weight: 600; font-size: 0.92rem; } .em-user-menu__email { font-size: 0.8rem; color: var(--em-topbar-muted); overflow: hidden; text-overflow: ellipsis; } .em-user-menu__role { font-size: 0.78rem; color: var(--em-topbar-muted); } .em-user-menu__divider { height: 1px; background: #334155; margin: 0.7rem 0; } .em-user-menu__item { display: block; padding: 0.4rem 0.2rem; font-size: 0.88rem; color: var(--em-topbar-text); text-decoration: none; border-radius: 0.25rem; } .em-user-menu__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--em-topbar-text); } .em-user-menu__item--logout { color: var(--em-topbar-danger); font-weight: 500; }