/* EYE v2 — shared sidebar partial styles.
*
* Loaded from ``; we
* push it right by the sidebar width via `padding-left` so the
* fixed sidebar never overlaps content.
* - state lives in two places:
* * `` — set inline
* in BEFORE first paint to avoid a flash of
* expanded-then-collapsing.
* * `localStorage["sidebar_collapsed"]` — survives reloads.
* - responsive defaults are pure CSS media queries; the JS toggle
* overrides via the data-attribute when the user has set a
* preference.
*/
:root {
--eye-sidebar-w: 240px;
--eye-sidebar-w-collapsed: 64px;
--eye-sidebar-bg: #ffffff;
--eye-sidebar-fg: #1A1F2C;
--eye-sidebar-muted: #6E7E99;
--eye-sidebar-line: rgba(0, 0, 0, 0.08);
--eye-sidebar-active-bg: var(--eye-brand, #E8291C);
--eye-sidebar-active-fg: #ffffff;
--eye-sidebar-hover-bg: #F5F5FA;
--eye-sidebar-transition: 250ms ease;
}
/* ── Page wrapper ────────────────────────────────────────────────── */
/* `eye-shell` wraps everything except the fixed sidebar. We push it
right by the sidebar's current width so content never sits under
the fixed bar. Width is derived from the data-attr on . */
html[data-sidebar-collapsed="false"] .eye-shell {
padding-left: var(--eye-sidebar-w);
}
html[data-sidebar-collapsed="true"] .eye-shell {
padding-left: var(--eye-sidebar-w-collapsed);
}
.eye-shell {
transition: padding-left var(--eye-sidebar-transition);
min-height: 100vh;
}
/* ── Sidebar root ────────────────────────────────────────────────── */
.eye-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--eye-sidebar-w);
background: var(--eye-sidebar-bg);
border-right: 1px solid var(--eye-sidebar-line);
display: flex;
flex-direction: column;
z-index: 100;
transition: width var(--eye-sidebar-transition),
transform var(--eye-sidebar-transition);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
"Helvetica Neue", Arial, sans-serif;
overflow: hidden;
}
html[data-sidebar-collapsed="true"] .eye-sidebar {
width: var(--eye-sidebar-w-collapsed);
}
/* ── Brand row ───────────────────────────────────────────────────── */
.eye-sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 16px 12px 16px;
text-decoration: none;
color: var(--eye-sidebar-fg);
font-weight: 700;
white-space: nowrap;
}
.eye-sidebar-brand-mark {
width: 18px;
height: 18px;
background: var(--eye-brand, #E8291C);
border-radius: 4px;
flex-shrink: 0;
}
.eye-sidebar-brand-name {
color: var(--eye-brand, #E8291C);
letter-spacing: 0.5px;
font-size: 1rem;
}
.eye-sidebar-brand-tag {
display: block;
font-size: 0.68rem;
font-weight: 500;
color: var(--eye-sidebar-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-brand-text,
html[data-sidebar-collapsed="true"] .eye-sidebar-tenant {
display: none;
}
.eye-sidebar-tenant {
padding: 0 16px 8px 16px;
font-size: 0.78rem;
color: var(--eye-sidebar-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Toggle button ───────────────────────────────────────────────── */
.eye-sidebar-toggle {
position: absolute;
top: 16px;
right: 8px;
width: 24px;
height: 24px;
border: 1px solid var(--eye-sidebar-line);
border-radius: 4px;
background: #fff;
color: var(--eye-sidebar-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-family: inherit;
padding: 0;
line-height: 1;
}
.eye-sidebar-toggle:hover {
color: var(--eye-sidebar-fg);
border-color: var(--eye-sidebar-muted);
}
.eye-sidebar-toggle:focus-visible {
outline: 2px solid var(--eye-brand, #E8291C);
outline-offset: 1px;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-toggle {
right: 50%;
transform: translateX(50%);
top: 48px;
}
/* ── Nav list ────────────────────────────────────────────────────── */
.eye-sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 8px 16px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.eye-sidebar-section {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--eye-sidebar-muted);
padding: 12px 12px 4px 12px;
white-space: nowrap;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-section {
visibility: hidden;
height: 6px;
padding: 0;
}
.eye-sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
color: var(--eye-sidebar-fg);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
white-space: nowrap;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
}
.eye-sidebar-link:hover {
background: var(--eye-sidebar-hover-bg);
text-decoration: none;
}
.eye-sidebar-link.active {
background: var(--eye-sidebar-active-bg);
color: var(--eye-sidebar-active-fg);
}
.eye-sidebar-link-icon {
flex-shrink: 0;
width: 20px;
text-align: center;
font-size: 1rem;
line-height: 1;
}
.eye-sidebar-link-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-link-label {
display: none;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-link {
justify-content: center;
padding: 8px 0;
}
/* ── User footer ─────────────────────────────────────────────────── */
.eye-sidebar-user {
border-top: 1px solid var(--eye-sidebar-line);
padding: 10px 8px;
position: relative;
}
.eye-sidebar-user-trigger {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 8px;
border-radius: 6px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
color: var(--eye-sidebar-fg);
}
.eye-sidebar-user-trigger:hover {
background: var(--eye-sidebar-hover-bg);
}
.eye-sidebar-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--eye-brand, #E8291C);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.eye-sidebar-user-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.eye-sidebar-user-email {
font-size: 0.82rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eye-sidebar-user-role {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--eye-sidebar-muted);
}
html[data-sidebar-collapsed="true"] .eye-sidebar-user-meta {
display: none;
}
/* User-menu popover (dropdown) — positioned above the trigger row. */
.eye-sidebar-user-menu {
position: absolute;
bottom: calc(100% - 4px);
left: 8px;
right: 8px;
background: #fff;
border: 1px solid var(--eye-sidebar-line);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
padding: 8px;
display: none;
flex-direction: column;
gap: 4px;
z-index: 102;
}
.eye-sidebar-user-menu.open {
display: flex;
}
html[data-sidebar-collapsed="true"] .eye-sidebar-user-menu {
left: 100%;
right: auto;
bottom: 8px;
margin-left: 6px;
width: 240px;
}
.eye-sidebar-user-menu .eye-sidebar-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 5px;
font-size: 0.88rem;
color: var(--eye-sidebar-fg);
text-decoration: none;
background: transparent;
border: none;
font-family: inherit;
cursor: pointer;
text-align: left;
width: 100%;
}
.eye-sidebar-user-menu .eye-sidebar-menu-item:hover {
background: var(--eye-sidebar-hover-bg);
}
.eye-sidebar-menu-divider {
height: 1px;
background: var(--eye-sidebar-line);
margin: 4px 0;
}
.eye-sidebar-menu-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--eye-sidebar-muted);
padding: 6px 10px 2px 10px;
}
/* Language picker chips inside the user menu. */
.eye-sidebar-lang {
display: flex;
gap: 4px;
padding: 4px 10px 6px 10px;
}
.eye-sidebar-lang-btn {
flex: 1;
background: #fff;
border: 1px solid var(--eye-sidebar-line);
cursor: pointer;
font: inherit;
font-size: 0.72rem;
font-weight: 600;
color: var(--eye-sidebar-muted);
padding: 5px 8px;
border-radius: 4px;
letter-spacing: 0.04em;
}
.eye-sidebar-lang-btn:hover {
background: var(--eye-sidebar-hover-bg);
color: var(--eye-sidebar-fg);
}
.eye-sidebar-lang-btn.active {
background: var(--eye-brand, #E8291C);
color: #fff;
border-color: var(--eye-brand, #E8291C);
}
/* Run Valuation pill — keeps the legacy `eye-pill-valuation` class so
existing dashboard tests (test_dashboard_kpi.py) still detect it. */
.eye-sidebar-user-menu .eye-pill-valuation {
margin: 4px 6px;
padding: 7px 12px;
border: 1px solid var(--eye-sidebar-line);
border-radius: 999px;
background: #fff;
color: var(--eye-sidebar-fg);
cursor: pointer;
font-size: 0.82rem;
font-weight: 500;
font-family: inherit;
white-space: nowrap;
text-align: left;
}
.eye-sidebar-user-menu .eye-pill-valuation:hover {
border-color: var(--eye-brand, #E8291C);
color: var(--eye-brand, #E8291C);
}
/* Role chip palette — mirrors admin_users.html. */
.eye-sidebar-role-chip {
display: inline-block;
padding: 1px 6px;
border-radius: 8px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.eye-sidebar-role-chip.tag-superuser { background: #FCE3E0; color: #B22D22; }
.eye-sidebar-role-chip.tag-admin { background: #FFE9CC; color: #8A4B00; }
.eye-sidebar-role-chip.tag-treasury { background: #E1F0E5; color: #1F8A4C; }
.eye-sidebar-role-chip.tag-operator { background: #E5EDFA; color: #2A4F8B; }
.eye-sidebar-role-chip.tag-compliance{ background: #EFE3F8; color: #6A2DA1; }
.eye-sidebar-role-chip.tag-auditor { background: #EAEEF4; color: #3B4A60; }
.eye-sidebar-role-chip.tag-default { background: #EAEEF4; color: #3B4A60; }
/* ── Mobile hamburger + overlay ─────────────────────────────────── */
.eye-sidebar-hamburger {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 99;
width: 36px;
height: 36px;
background: #fff;
border: 1px solid var(--eye-sidebar-line);
border-radius: 6px;
cursor: pointer;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
padding: 0;
}
.eye-sidebar-hamburger span {
width: 18px;
height: 2px;
background: var(--eye-sidebar-fg);
display: block;
}
.eye-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 99;
}
/* ── Responsive defaults ─────────────────────────────────────────── */
/* >= 1280: expanded by default — handled by data-attr fallback below. */
/* 768–1279: collapsed by default. */
@media (max-width: 1279px) and (min-width: 769px) {
html:not([data-sidebar-collapsed]) .eye-sidebar { width: var(--eye-sidebar-w-collapsed); }
html:not([data-sidebar-collapsed]) .eye-shell { padding-left: var(--eye-sidebar-w-collapsed); }
html:not([data-sidebar-collapsed]) .eye-sidebar-brand-text,
html:not([data-sidebar-collapsed]) .eye-sidebar-tenant,
html:not([data-sidebar-collapsed]) .eye-sidebar-link-label,
html:not([data-sidebar-collapsed]) .eye-sidebar-section,
html:not([data-sidebar-collapsed]) .eye-sidebar-user-meta { display: none; }
}
/* <= 768: hidden + hamburger. Sidebar slides in via .open. */
@media (max-width: 768px) {
.eye-sidebar {
transform: translateX(-100%);
}
html[data-sidebar-mobile-open="true"] .eye-sidebar {
transform: translateX(0);
width: var(--eye-sidebar-w);
}
html[data-sidebar-mobile-open="true"] .eye-sidebar-backdrop {
display: block;
}
.eye-sidebar-hamburger { display: flex; }
.eye-shell { padding-left: 0 !important; }
/* Hide the desktop toggle on mobile — close-X is rendered separately. */
.eye-sidebar-toggle { display: none; }
/* Mobile keeps labels visible while open. */
html[data-sidebar-mobile-open="true"] .eye-sidebar-brand-text,
html[data-sidebar-mobile-open="true"] .eye-sidebar-link-label,
html[data-sidebar-mobile-open="true"] .eye-sidebar-user-meta,
html[data-sidebar-mobile-open="true"] .eye-sidebar-section { display: revert; }
}
/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.eye-sidebar,
.eye-shell { transition: none; }
}