/* ═══════════════════════════════════════════════════════════ Shared top navigation header (wo-*) Used by both _ReceptionLayout.cshtml and the public layouts. Supplies the 52px sticky glass bar with logo, mode tabs, language dropdown, theme toggle, and user/login buttons. Dark mode is default; body.wo-light flips to the light variant. ═══════════════════════════════════════════════════════════ */ :root { --wo-primary: #6366f1; --wo-primary-hover: #4f46e5; --wo-bg: #0f172a; --wo-bg2: #1e293b; --wo-bg3: #334155; --wo-bg-deep: #0b1120; --wo-text: #e2e8f0; --wo-text-muted: #64748b; --wo-text-dim: #94a3b8; --wo-border: #334155; --wo-red: #ef4444; } /* ─── Header (translucent glass) ─── */ .wo-header { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: rgba(11, 17, 32, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(99, 102, 241, 0.30); height: 52px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; } .wo-logo { font-size: 18px; font-weight: 800; color: var(--wo-primary); white-space: nowrap; text-decoration: none; } .wo-logo:hover { color: var(--wo-primary); } .wo-logo span { color: var(--wo-text-dim); font-weight: 400; font-size: 12px; margin-inline-start: 6px; } .wo-mode-tabs { display: flex; gap: 3px; margin-inline-start: 16px; background: rgba(30, 41, 59, 0.55); border-radius: 8px; padding: 3px; } .wo-mode-tab { padding: 6px 16px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--wo-text-dim); transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .wo-mode-tab:hover { color: #e2e8f0; } .wo-mode-tab.active { background: var(--wo-primary); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .wo-mode-tab .bi { font-size: 14px; } .wo-mode-tab .badge { display: inline-block; background: var(--wo-red); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-inline-start: 5px; } .wo-spacer { flex: 1; } .wo-hdr-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.30); background: rgba(30, 41, 59, 0.55); color: var(--wo-text-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .wo-hdr-btn:hover { border-color: var(--wo-primary); color: #fff; background: rgba(99, 102, 241, 0.18); } .wo-hdr-btn.primary { background: linear-gradient(135deg, #6366f1, #4f46e5); border-color: #6366f1; color: #fff; } .wo-hdr-btn.primary:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); color: #fff; } /* Lang menu */ .wo-lang-wrap { position: relative; } .wo-lang-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 200; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 8px; min-width: 140px; padding: 6px 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); direction: ltr; } [dir="rtl"] .wo-lang-menu { right: auto; left: 0; } /* Header itself is locked to dir="ltr" to keep controls on the right in both directions. The rule above still matches because is an ancestor, so re-pin menus to the right edge when inside the LTR header. */ .wo-header[dir="ltr"] .wo-lang-menu { right: 0; left: auto; } .wo-lang-menu.show { display: block; } .wo-lang-menu a { display: block; padding: 7px 14px; font-size: 13px; color: var(--wo-text-dim); text-decoration: none; transition: all 0.15s; } .wo-lang-menu a:hover { background: rgba(99, 102, 241, 0.2); color: #fff; } /* User menu */ .wo-user-wrap { position: relative; } .wo-user-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 200; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 8px; min-width: 200px; padding: 6px 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } [dir="rtl"] .wo-user-menu { right: auto; left: 0; } .wo-header[dir="ltr"] .wo-user-menu { right: 0; left: auto; } /* Header is dir="ltr" so controls stay on the right in both page directions, but the profile menu's own items should read RTL when the page is RTL. */ [dir="rtl"] .wo-header .wo-user-menu { direction: rtl; text-align: right; } .wo-user-menu.show { display: block; } .wo-user-menu-name { padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--wo-text); border-bottom: 1px solid rgba(99, 102, 241, 0.25); margin-bottom: 4px; } .wo-user-menu-divider { border-top: 1px solid rgba(99, 102, 241, 0.25); margin: 4px 0; } .wo-user-menu a { display: block; padding: 8px 14px; font-size: 13px; color: var(--wo-text-dim); text-decoration: none; transition: all 0.15s; } .wo-user-menu a:hover { background: rgba(99, 102, 241, 0.2); color: #fff; } .wo-logout-link:hover { color: var(--wo-red) !important; } /* Navbar keeps its dark-mode look in both themes — only the .wo-view content re-colors when body.wo-light is set. (Old light-mode header overrides removed per product decision.) */