/* ================================================================ VaultMTD — Left navigation (Phase 44 Step 2) ================================================================ File : app/static/css/nav.css Purpose : The 64px icon rail + the panel that slides OVER the page. Loaded : injected on every /financial page by inject_pwa_tags(). THE RULE (Alberto): opening the menu must NOT move the page. So the rail is fixed and the page is padded for it once; the open panel is an overlay that sits on top. Nothing reflows, so nothing can look cheap while animating. Every colour is a theme token, so the nav works on mocha / sky / navy / carbon / light / bright / paper without a single per-theme rule. ================================================================ */ :root { --vm-nav-rail : 64px; --vm-nav-open : 232px; --vm-nav-top : 56px; /* topbar height — see topbar.css section 1 */ } /* Make room for the rail exactly once, on , so this works no matter how an individual page wraps its content (there are ~132 standalone templates). The topbar is pulled back out so it still spans the full width. */ body.vm-has-nav { padding-left: var(--vm-nav-rail); } body.vm-has-nav .topbar { margin-left : calc(-1 * var(--vm-nav-rail)); width : calc(100% + var(--vm-nav-rail)); } .vm-nav { position : fixed; top : var(--vm-nav-top); left : 0; bottom : 0; width : var(--vm-nav-rail); z-index : 90; /* under the topbar (100), over content */ background : var(--panel-alt, var(--bg-2)); border-right: 1px solid var(--border-md); padding : 12px 13px 16px; overflow-x : hidden; overflow-y : auto; transition : width 0.24s cubic-bezier(0.4, 0, 0.2, 1); /* A default scrollbar eats ~15px of a 64px rail and looks cheap on a short screen. 3px, width always reserved so nothing ever reflows, and the thumb painted in the rail's own colour until the pointer is over the nav -- invisible without using any transparency. */ } /* IMPORTANT -- do NOT add `scrollbar-width` to .vm-nav here. Chromium 121+ supports the standard property, and when it is set the browser IGNORES every ::-webkit-scrollbar rule below. That silently defeated the 3px width: the rail kept rendering at Chromium's own "thin" (~11px). Firefox, which has no ::-webkit-scrollbar, is handled in the @supports block underneath. */ .vm-nav::-webkit-scrollbar { width: 3px; } .vm-nav::-webkit-scrollbar-track { background: transparent; } .vm-nav::-webkit-scrollbar-thumb { background : var(--panel-alt, var(--bg-2)); /* same as the rail = unseen */ border-radius: 999px; } /* Reveal is driven by a CLASS (nav.js pointerenter/leave), not :hover. Two reasons, both seen live: * a `::-webkit-scrollbar-thumb:hover` rule latches -- move the pointer out across the thumb and Chromium can keep the hovered colour until you go back in and out again. That rule is gone entirely. * :hover on a scrolling container repaints its scrollbar pseudo-elements lazily, so the thumb lingered for a beat after the pointer left. A class toggle changes the element's own computed style, which repaints immediately, and pointerleave fires reliably even on a fast exit. */ .vm-nav--peek::-webkit-scrollbar-thumb { background: var(--border-str); } /* Firefox only: it does not implement ::-webkit-scrollbar, so this block is skipped by Chromium (which keeps the 3px rules above) and applied by Firefox, where `thin` is the narrowest option available. */ @supports not selector(::-webkit-scrollbar) { .vm-nav { scrollbar-width: thin; scrollbar-color: var(--panel-alt, var(--bg-2)) transparent; } .vm-nav--peek { scrollbar-color: var(--border-str) transparent; } } body.vm-nav-open .vm-nav { width: var(--vm-nav-open); } /* A support / impersonation banner pushes the topbar down by 44px. */ body.support-banner-open .vm-nav, body.imp-banner-open .vm-nav { top: calc(var(--vm-nav-top) + 44px); } /* ── groups ───────────────────────────────────────────────────── */ .vm-nav__group + .vm-nav__group { margin-top: 14px; } .vm-nav__group-label { font-size : 0.66rem; font-weight : 700; letter-spacing: 0.07em; text-transform: uppercase; color : var(--text-3); padding : 0 10px 6px; height : 22px; white-space : nowrap; } /* Hidden, NOT removed, while collapsed — keeps the same height so items never jump vertically as the panel opens. */ body:not(.vm-nav-open) .vm-nav__group-label { visibility: hidden; } /* ── items ────────────────────────────────────────────────────── */ .vm-nav__item { display : flex; align-items : center; gap : 11px; padding : 8px 10px; border-radius : var(--radius-md, 8px); color : var(--text); text-decoration: none; font-size : 0.86rem; position : relative; white-space : nowrap; } .vm-nav__item + .vm-nav__item { margin-top: 1px; } /* 13px panel padding + 10px item padding + half of an 18px icon = 32px, dead centre of the 64px rail AND unchanged when open, so icons never shift. */ .vm-nav__item i { width : 18px; text-align : center; font-size : 0.9rem; color : var(--text-3); flex-shrink: 0; } .vm-nav__item:hover { background: var(--bg-3); color: var(--text); } .vm-nav__item:hover i { color: var(--text); } .vm-nav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .vm-nav__item.is-active { background : var(--accent-dim); color : var(--accent); font-weight: 600; } .vm-nav__item.is-active i { color: var(--accent); } .vm-nav__item.is-active::before { content : ''; position : absolute; left : -10px; top : 6px; bottom : 6px; width : 3px; border-radius: 0 3px 3px 0; background : var(--accent); } .vm-nav__item.is-locked { color: var(--text-3); } .vm-nav__lock { margin-left: auto; font-size: 0.7rem !important; } .vm-nav__label { overflow: hidden; text-overflow: ellipsis; } /* visibility, not opacity — no alpha compositing (brief 7.5). The delay lets the width animation start before the text appears. */ .vm-nav__label { transition: visibility 0s linear 0.12s; } body:not(.vm-nav-open) .vm-nav__label { visibility: hidden; transition-delay: 0s; } /* ── counts: visible even on the CLOSED rail so nothing is missed ── */ .vm-nav__badge { margin-left : auto; font-size : 0.66rem; font-weight : 700; background : var(--negative); color : #fff; border-radius: 999px; padding : 1px 6px; min-width : 18px; text-align : center; } body:not(.vm-nav-open) .vm-nav__badge { position : absolute; top : 2px; left : 22px; margin : 0; min-width : 0; padding : 0 4px; height : 15px; line-height: 15px; font-size : 0.6rem; border : 1.5px solid var(--panel-alt, var(--bg-2)); } /* ── tooltip while collapsed ──────────────────────────────────── */ body:not(.vm-nav-open) .vm-nav__item::after { content : attr(data-tip); position : absolute; left : calc(100% + 6px); top : 50%; transform : translateY(-50%); background : var(--text); color : var(--bg); font-size : 0.72rem; font-weight : 600; padding : 5px 9px; border-radius: 7px; white-space : nowrap; visibility : hidden; pointer-events: none; z-index : 95; } body:not(.vm-nav-open) .vm-nav__item:hover::after { visibility: visible; } .vm-nav__foot { margin-top : 16px; padding-top: 12px; border-top : 1px solid var(--border); } .vm-nav__item--all { color: var(--text-3); font-size: 0.82rem; } /* ── the topbar toggle button ─────────────────────────────────── */ .vm-nav-toggle { width : 16px; height : 34px; border-radius : var(--radius-md, 8px); border : 1px solid transparent; background : transparent; color : var(--text-2); font-size : 0.95rem; cursor : pointer; display : flex; align-items : center; justify-content: center; flex-shrink : 0; } .vm-nav-toggle:hover { background: var(--bg-3); color: var(--text); } .vm-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* On phones the rail itself is hidden; the menu opens as a full overlay. */ /* --------------------------------------------------------------------------- MOBILE (Phase 44 Step 7) --------------------------------------------------------------------------- On a phone the 64px rail would eat 17% of a 375px screen for icons nobody can read, so it collapses to nothing and the drawer becomes the whole menu. That makes the drawer a MODAL layer, and it has to behave like one: a scrim behind it, and the page underneath must not scroll. Without the scrim the page behind stays fully lit and the drawer reads as a rendering glitch rather than a menu; without the scroll lock, swiping the menu drags the page behind it, which feels broken on touch. --------------------------------------------------------------------------- */ @media (max-width: 700px) { body.vm-has-nav { padding-left: 0; } body.vm-has-nav .topbar { margin-left: 0; width: 100%; } .vm-nav { width: 0; padding-left: 0; padding-right: 0; border-right: none; } body.vm-nav-open .vm-nav { width : var(--vm-nav-open); padding-left : 13px; padding-right: 13px; border-right : 1px solid var(--border-md); box-shadow : 4px 0 24px rgba(0, 0, 0, 0.28); } /* Scrim. Sits under the rail (90) and over everything else, starting below the topbar so the close control stays reachable. */ body.vm-nav-open::after { content : ''; position : fixed; top : var(--vm-nav-top); left : 0; right : 0; bottom : 0; z-index : 89; background: rgba(0, 0, 0, 0.45); } body.support-banner-open.vm-nav-open::after, body.imp-banner-open.vm-nav-open::after { top: calc(var(--vm-nav-top) + 44px); } /* Nothing floating should compete with an open menu. */ body.vm-nav-open .vm-fab, body.vm-nav-open .vm-dock, body.vm-nav-open .vera-root { display: none; } } /* The flyout chip is pointless on a phone: the drawer is the only way in, and it shows the real labels. */ @media (max-width: 700px) { .vm-nav__tip { display: none; } } /* Set by nav.js only while the mobile drawer is open. */ body.vm-scroll-lock { overflow: hidden; } @media print { .vm-nav, .vm-nav-toggle { display: none !important; } } /* ================================================================ ACCOUNT MENU (Phase 44 Step 3) ---------------------------------------------------------------- Photo (or two initials) + name is the button. Settings, Billing, Team, Help and Log out live inside it, and the ROLE BADGE appears only in the menu -- never loose in the topbar. Replaces the old .user-badge + .btn-logout + injected settings gear, which are hidden below rather than deleted from ~134 duplicated templates. ================================================================ */ /* Retire the old topbar chrome wherever the account menu is present. */ body.vm-has-acct .user-badge, body.vm-has-acct .btn-logout, /* The eight Household Budget templates hand-roll their own topbar and use `.btn-topbar-icon` for the Settings gear, so the `#settings-gear` rule above -- which only ever matched the JS-injected one -- never reached them and the gear survived beside the account menu (Renato 2026-08-26). Every use of this class in the codebase is that gear; there is no other kind. */ body.vm-has-acct .btn-topbar-icon, body.vm-has-acct #settings-gear { display: none !important; } /* Practice moved into the left menu (Renato: the topbar got crowded on mobile). Hidden rather than deleted because a few pages hardcode the link. */ body.vm-has-nav .topbar-practice-link { display: none !important; } .vm-acct { position: relative; order: 99; } /* always last in the flex row */ .vm-acct__trigger { display : flex; align-items : center; gap : 9px; padding : 4px 10px 4px 4px; background : transparent; border : 1px solid transparent; border-radius : var(--radius-pill, 999px); cursor : pointer; color : var(--text); font-family : inherit; font-size : 0.85rem; max-width : 220px; } .vm-acct__trigger:hover, .vm-acct__trigger[aria-expanded="true"] { background : var(--bg-3); border-color: var(--border-md); } .vm-acct__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vm-acct__avatar { width : 32px; height : 32px; border-radius : 50%; flex-shrink : 0; background : var(--accent-dim); color : var(--accent); display : flex; align-items : center; justify-content: center; font-size : 0.72rem; font-weight : 700; letter-spacing : 0.02em; overflow : hidden; text-transform : uppercase; } .vm-acct__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .vm-acct__avatar--lg { width: 38px; height: 38px; font-size: 0.8rem; } .vm-acct__name { font-weight : 600; white-space : nowrap; overflow : hidden; text-overflow: ellipsis; } .vm-acct__caret { font-size: 0.62rem; color: var(--text-3); } .vm-acct__menu { position : absolute; top : calc(100% + 8px); right : 0; width : 250px; background : var(--bg-3); border : 1px solid var(--border-md); border-radius: var(--radius-lg, 12px); box-shadow : var(--shadow-md); padding : 6px; display : none; z-index : 300; } .vm-acct__menu.is-open { display: block; } .vm-acct__head { display : flex; align-items : center; gap : 10px; padding : 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .vm-acct__ident { min-width: 0; } .vm-acct__head-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); } .vm-acct__email { display : block; font-size : 0.72rem; color : var(--text-3); white-space : nowrap; overflow : hidden; text-overflow: ellipsis; } /* The role lives HERE and nowhere else in the chrome. */ .vm-acct__role { display : inline-block; margin-top : 4px; font-size : 0.62rem; font-weight : 700; letter-spacing: 0.04em; text-transform: uppercase; color : var(--accent); background : var(--accent-dim); border-radius : var(--radius-pill, 999px); padding : 2px 8px; } .vm-acct__item { display : flex; align-items : center; gap : 10px; padding : 9px 10px; border-radius : var(--radius-md, 8px); font-size : 0.85rem; color : var(--text); text-decoration: none; } /* Send feedback is a