/* ═══════════════════════════════════════════════════
   PORTFOLIO OS — css/layout.css
   Navigation, topbar, page grid, allocation, FX, settings
═══════════════════════════════════════════════════ */

/* ── APP SHELL ───────────────────────────────────────── */
#app { display: flex; flex-direction: row; min-height: 100vh; }
.app-main { flex: 1; display: flex; flex-direction: column; min-height: 100vh; margin-left: var(--sidebar-w); transition: margin-left 0.2s ease; padding-top: 0; }
.sidebar.collapsed ~ .app-main { margin-left: var(--sidebar-collapsed); }

/* ── SIDEBAR ────────────────────────────────────────── */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w); z-index: 150;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
}

/* Sidebar header — collapse toggle */
.sb-header {
  display: flex; align-items: center; justify-content: flex-end;
  height: 56px; padding: 0 10px; flex-shrink: 0; background: var(--bg); z-index: 2;
  border-bottom: 1px solid var(--border);
}
.sidebar.collapsed .sb-header { justify-content: center; padding: 8px 6px; }
.sb-logo {
  font-family: Arial, sans-serif; font-size: 16px; font-weight: 800;
  letter-spacing: -0.5px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.sb-logo span { color: var(--gold); }
.sidebar.collapsed .sb-logo { display: none; }
.sb-collapse-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 14px; transition: all 0.15s;
}
.sb-collapse-btn:hover { background: var(--gold-bg); color: var(--gold); border-color: var(--gold-bdr); }

/* Sidebar navigation area — scrollable, header & bottom stay fixed */
.sb-nav {
  flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Collapsible sections */
.sb-section { margin-bottom: 2px; }
.sb-section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all 0.12s; white-space: nowrap;
  position: relative; letter-spacing: 0.5px;
}
.sb-section-header:hover { background: var(--bg2); }
.sb-section-header .sb-icon { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; }
.sb-chevron {
  margin-left: auto; flex-shrink: 0; transition: transform 0.2s ease;
  color: var(--text3);
}
.sb-section.open > .sb-section-header .sb-chevron { transform: rotate(90deg); }
.sb-section-header.active { color: var(--gold); }
.sb-section-header.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--gold);
}

/* Section children — hidden by default, shown when .open */
.sb-section-items {
  display: none; padding-left: 20px;
  flex-direction: column; gap: 1px;
}
.sb-section.open > .sb-section-items { display: flex; }

/* Sub-labels within a section (e.g. "Payments" under Banking) */
.sb-sub-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text3); opacity: 0.7;
  padding: 10px 12px 3px; white-space: nowrap;
}

/* Divider between sections */
.sb-divider {
  height: 1px; background: var(--border); margin: 4px 10px;
}

/* Nav items (children) */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all 0.12s; white-space: nowrap;
  position: relative; overflow: hidden; text-overflow: ellipsis;
}
.sb-item:hover { background: var(--gold-bg); color: var(--gold); }
.sb-item.active {
  background: var(--gold-bg); color: var(--gold); font-weight: 600;
  border-left: 3px solid var(--gold); padding-left: 9px;
}
.sb-icon { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; }

/* Bottom section (user chip).
   Hard top border + own stacking context so the drop-up panel above can never
   bleed pointer events into the chip below it. */
.sb-bottom {
  flex-shrink: 0; padding: 8px 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  isolation: isolate;
}
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; overflow: hidden;
  cursor: pointer; transition: background 0.12s;
}
.sb-user:hover { background: var(--gold-bg); }
.sb-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sb-user-info { overflow: hidden; }
.sb-user-name { font-size: 12px; font-weight: 500; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 10px; color: var(--text4, var(--text3)); }
/* User popup menu */
.sb-bottom { position: relative; }
.sb-user-menu {
  display: none; position: absolute; bottom: calc(100% + 12px); left: 10px;
  width: calc(100% - 20px); max-width: 280px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  padding: 4px; z-index: 200;
  animation: sbMenuIn 0.12s ease;
}
/* Hard divider line + clear gap above the user chip below.
   Prevents any optical merge between the drop-up's last row and the chip. */
.sb-user-menu::after {
  content: ''; position: absolute;
  left: 6px; right: 6px; bottom: -7px; height: 1px;
  background: var(--border);
  pointer-events: none;
}
.sb-user-menu.open { display: block; }
/* HOVER-activated menu: open on hover over bottom area, stay open while hovering menu */
.sb-bottom:hover .sb-user-menu,
.sb-user-menu:hover { display: block; }
/* Bridge so the menu does not close when moving the cursor from chip to menu.
   MUST be at least as tall as the gap the menu sits above .sb-bottom, which is
   the 12px in `bottom: calc(100% + 12px)` above. It was 8px against a 12px gap,
   leaving a 4px band where the cursor was over neither .sb-bottom nor the menu:
   both :hover tests went false mid-travel and the menu closed as the user
   reached for it. 14px covers the gap with 2px of tolerance. Keep the two
   numbers in step if either changes. */
.sb-user-menu::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
}
@keyframes sbMenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.sb-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all 0.12s;
}
.sb-user-menu-item:hover { background: var(--gold-bg); color: var(--gold); }
.sb-user-menu-logout:hover { background: rgba(220,38,38,0.08); color: var(--red); }
.sb-user-menu-divider { height: 1px; background: var(--border); margin: 2px 8px; }
.sb-menu-toggle-state {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2, #f5f5f5);
  color: var(--text3);
  border: 1px solid var(--border);
}
.sb-menu-toggle-state.is-on {
  background: var(--gold-bg, rgba(212,175,55,.1));
  color: var(--gold);
  border-color: var(--gold-bdr, rgba(212,175,55,.3));
}
.sb-menu-pf-name {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gold-bg, rgba(212,175,55,.1));
  color: var(--gold);
  border: 1px solid var(--gold-bdr, rgba(212,175,55,.3));
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-menu-select-row { cursor: default; }
.sb-menu-select-row:hover { background: transparent; color: var(--text2); }
.sb-menu-select {
  margin-left: auto; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--text);
  background: var(--surface); cursor: pointer; outline: none;
}
.sb-menu-select:focus { border-color: var(--gold); }

/* Notification badge on user avatar */
.sb-user-avatar-wrap { position: relative; flex-shrink: 0; }
.sb-notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 0 4px;
  border: 2px solid var(--surface);
}
/* Badge inside menu item */
.sb-menu-badge {
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 0 4px;
  margin-left: auto;
}

/* ── COLLAPSED STATE ────────────────────────────────── */
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .sb-item-text,
.sidebar.collapsed .sb-user-info,
.sidebar.collapsed .sb-sub-label,
.sidebar.collapsed .sb-chevron { display: none !important; }
.sidebar.collapsed .sb-header { justify-content: center; padding: 12px 8px; }
.sidebar.collapsed .sb-nav { padding: 6px 4px; }
.sidebar.collapsed .sb-section-header {
  justify-content: center; padding: 12px 0; border-radius: 6px;
}
.sidebar.collapsed .sb-section-header .sb-icon { width: auto; margin: 0; }
.sidebar.collapsed .sb-section-items { display: none !important; }
.sidebar.collapsed .sb-bottom { padding: 6px 4px; }
.sidebar.collapsed .sb-user { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .sb-user svg { display: none; }

/* ── PORTFOLIO SWITCHER — topnav (relocated 2026-08-12) ────────────────────
   Was a bottom-of-sidebar drop-up chip (`.sb-portfolio-*`, added 2026-04-22).
   Amir asked for it beside the greeting, so the trigger now lives in
   `.topnav-right` and the panel drops DOWN from it. Every capability of the
   old chip is preserved: active tick, per-row Share (owned) / Remove (shared
   with me), shared badge + permission level, "+ New Portfolio".

   Anchoring uses `inset-inline-end` so the panel hangs off the trigger's
   trailing edge — the right edge in English, the left edge in Arabic — and
   therefore always opens into the viewport, never out of it.               */
.topnav-pf {
  position: relative;
  display: flex; align-items: center;
  flex: 0 1 auto; min-width: 0;
}

.topnav-pf-trigger {
  display: flex; align-items: center; gap: 8px;
  height: 32px; min-width: 0; max-width: 300px;
  padding-inline: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.topnav-pf-trigger:hover { border-color: var(--gold-bdr, var(--gold)); background: var(--gold-bg); }
.topnav-pf-trigger:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-bdr, rgba(212,175,55,.25)); }
.topnav-pf-trigger[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-bg); }

/* Brass hairline — the switcher's only ornament. */
.topnav-pf-rail {
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--gold); flex-shrink: 0;
}
.topnav-pf-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text3);
  flex-shrink: 0;
}
/* A portfolio NAME is not a monetary value (D39), so it may ellipsise. */
.topnav-pf-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  line-height: 1.25; max-width: 190px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topnav-pf-caret {
  color: var(--text3); flex-shrink: 0;
  transition: transform .18s ease, color .18s ease;
}
.topnav-pf-trigger[aria-expanded="true"] .topnav-pf-caret {
  transform: rotate(180deg); color: var(--gold);
}

/* Drop-down panel */
.topnav-pf-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 5px;
  max-height: min(420px, calc(100vh - 110px));
  overflow-y: auto;
  z-index: 210;
  animation: topnavPfIn .16s ease;
}
.topnav-pf-menu.open { display: block; }
@keyframes topnavPfIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.topnav-pf-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  min-width: 0;
  outline: none;
}
.topnav-pf-menu-item:hover,
.topnav-pf-menu-item:focus-visible { background: var(--gold-bg); }
.topnav-pf-menu-item.active { background: var(--gold-bg); }
.topnav-pf-menu-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.topnav-pf-menu-item-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25; max-width: 100%;
}
.topnav-pf-menu-item-meta {
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  color: var(--text3);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.topnav-pf-menu-item.active .topnav-pf-menu-item-name { color: var(--gold); }
.topnav-pf-menu-item-tick { color: var(--gold); flex-shrink: 0; }

.topnav-pf-menu-divider { height: 1px; background: var(--border); margin: 5px 8px; }
.topnav-pf-menu-empty {
  padding: 14px 12px; font-size: 11.5px; color: var(--text3);
  text-align: center;
}
.topnav-pf-menu-item.add-new {
  color: var(--gold);
  font-weight: 700;
  justify-content: center;
  font-size: 12.5px;
  letter-spacing: .2px;
}
.topnav-pf-menu-item.add-new:hover { background: var(--gold-bg); }
.topnav-pf-menu-item.add-new svg { color: var(--gold); }

body.dark .topnav-pf-menu,
body.theme-noir .topnav-pf-menu { box-shadow: 0 14px 34px rgba(0,0,0,0.55); }

/* Progressive tightening — the name shrinks before anything else in the bar. */
@media (max-width: 1100px) { .topnav-pf-name { max-width: 150px; } }
@media (max-width: 900px)  {
  .topnav-pf-name { max-width: 130px; }
  /* 44px tap target (WCAG 2.5.5) without growing the 32px visual box. */
  .topnav-pf-trigger { position: relative; height: 34px; }
  .topnav-pf-trigger::after { content: ''; position: absolute; inset: -5px -3px; }
}
@media (max-width: 600px) {
  /* The greeting is already hidden at this width (see .topnav-greeting below),
     so the switcher inherits the space. The eyebrow goes — the brass rail is
     enough of a label once the control is the only chip in the bar. */
  .topnav-pf-eyebrow { display: none; }
  .topnav-pf-trigger { gap: 6px; max-width: none; }
  .topnav-pf-name { max-width: 150px; }
  /* The switcher is the ONLY shrinkable item in the bar, so a squeeze always
     lands on the portfolio name (which may ellipsise) and never on the
     hamburger or the brand mark. */
  .hamburger { flex-shrink: 0; }
  /* Pin the panel to the viewport, not the trigger: at 360px an edge-anchored
     panel would sit half off-screen. Bottom is capped clear of the tab bar. */
  .topnav-pf-menu {
    position: fixed;
    top: calc(56px + var(--safe-t, 0px) + 6px);
    inset-inline: 12px;
    width: auto; max-width: none;
    max-height: calc(100dvh - 56px - var(--safe-t, 0px) - var(--tabbar-total, 56px) - 28px);
  }
}
@media (max-width: 400px) { .topnav-pf-name { max-width: 120px; } }

/* Collapsed — flyout sub-menu on hover */
.sidebar.collapsed .sb-section { position: relative; }
.sidebar.collapsed .sb-section:hover > .sb-section-items {
  display: flex !important;
  position: fixed;
  left: var(--sidebar-collapsed);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 8px;
  z-index: 9999;
  flex-direction: column;
  gap: 2px;
  animation: ddFadeIn 0.12s ease;
}
/* Hover-safe bridge between the rail and the flyout — prevents flicker when cursor crosses the gap */
.sidebar.collapsed .sb-section:hover > .sb-section-items::after {
  content: ''; position: absolute;
  left: -12px; top: 0; bottom: 0; width: 12px;
  background: transparent;
}
.sidebar.collapsed .sb-section:hover > .sb-section-items::before {
  content: attr(data-tooltip);
  display: block;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gold); padding: 6px 12px 4px;
}
.sidebar.collapsed .sb-section:hover > .sb-section-items .sb-item {
  justify-content: flex-start;
  padding: 9px 14px;
}
.sidebar.collapsed .sb-section:hover > .sb-section-items .sb-item-text {
  display: inline !important;
}
.sidebar.collapsed .sb-section:hover > .sb-section-items .sb-sub-label {
  display: block !important;
  padding: 10px 12px 3px;
  font-size: 10px;
}
/* Collapsed tooltip for single items (Wallet — no children) */
.sidebar.collapsed .sb-section-header { position: relative; }
.sidebar.collapsed .sb-section:not(:has(.sb-section-items)) .sb-section-header:hover::after {
  content: attr(data-tooltip);
  position: fixed; left: calc(var(--sidebar-collapsed) + 8px);
  background: var(--text); color: #fff; padding: 5px 12px;
  border-radius: 6px; font-size: 12px; font-weight: 500;
  white-space: nowrap; z-index: 9999; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Collapsed user menu — position it properly above the user chip */
.sidebar.collapsed .sb-bottom { position: relative; }
.sidebar.collapsed .sb-user-menu {
  position: fixed !important;
  left: calc(var(--sidebar-collapsed) + 6px) !important;
  right: auto !important;
  bottom: 10px !important;
  width: 280px !important;
  min-width: 260px;
  max-width: calc(100vw - var(--sidebar-collapsed) - 16px);
  z-index: 9999;
}
/* Hover-safe bridge to the left — covers the gap between the collapsed rail and the flyout menu */
.sidebar.collapsed .sb-bottom:hover .sb-user-menu::after,
.sidebar.collapsed .sb-user-menu:hover::after {
  content: ''; position: absolute;
  left: -12px; top: 0; bottom: 0; width: 12px;
  background: transparent;
  /* This bridge reuses ::after, which the divider rule above sets to
     pointer-events: none. Without restoring it the bridge is invisible to
     hit-testing and bridges nothing — the collapsed flyout closed the moment
     the cursor left the rail. */
  pointer-events: auto;
}

/* ── MOBILE SIDEBAR ─────────────────────────────────── */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 140; backdrop-filter: blur(2px);
}
body.sidebar-open .sidebar-backdrop { display: block; }

@media (max-width: 900px) {
  .sidebar {
    /* Pin to viewport so the drawer never causes horizontal page scroll, and
       so its own contents (long nav) scroll inside the drawer. */
    position: fixed;
    top: 0; left: 0;
    height: 100dvh; max-height: 100dvh;
    transform: translateX(-100%);
    width: 280px !important;
    max-width: 86vw;
    z-index: 160;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  /* Stop the page underneath from scrolling while the drawer is open. */
  body.sidebar-open { overflow: hidden; touch-action: none; }
  .app-main { margin-left: 0 !important; }
  /* Force-expand the sidebar on mobile — desktop "collapsed" (icon-only) mode
     should never apply on a slide-out drawer. !important needed to defeat the
     desktop !important rules at lines 236-249. */
  .sidebar.collapsed { width: 280px !important; }
  .sidebar.collapsed .sb-item-text,
  .sidebar.collapsed .sb-label,
  .sidebar.collapsed .sb-user-info,
  .sidebar.collapsed .sb-sub-label,
  .sidebar.collapsed .sb-chevron { display: initial !important; }
  /* Sections are an ACCORDION on mobile: only the open one shows its items.
     This previously forced every section's items visible regardless of state,
     so an expanded section appeared on top of an already-open list. */
  .sidebar.collapsed .sb-section-items { display: none !important; }
  .sidebar.collapsed .sb-section.open > .sb-section-items,
  .sidebar .sb-section.open > .sb-section-items { display: flex !important; }

  /* Kill the desktop collapsed-rail FLYOUT on touch. It positions the items as
     a fixed popup on :hover — and on a touch device :hover sticks after a tap,
     so expanding a section also popped out a second floating menu beside it.
     Reset every property the flyout sets, and drop its hover bridge/arrow. */
  .sidebar.collapsed .sb-section:hover > .sb-section-items {
    position: static !important;
    left: auto !important;
    min-width: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: auto !important;
    animation: none !important;
    display: none !important;
  }
  .sidebar.collapsed .sb-section.open:hover > .sb-section-items { display: flex !important; }
  .sidebar.collapsed .sb-section:hover > .sb-section-items::after,
  .sidebar.collapsed .sb-section:hover > .sb-section-items::before { content: none !important; }
  .sidebar.collapsed .sb-logo { display: initial !important; }
  .sidebar.collapsed .sb-item { justify-content: flex-start !important; padding: 9px 12px !important; }
  .sidebar.collapsed .sb-header { justify-content: space-between !important; padding: 16px 16px 12px !important; }
  .sidebar.collapsed .sb-section-header { justify-content: flex-start !important; }
  .sidebar.collapsed .sb-section-header .sb-icon { width: 18px !important; margin-right: 10px !important; }
  /* Re-show the user-info block on the bottom chip */
  .sidebar.collapsed .sb-user { justify-content: flex-start !important; }
  .sidebar.collapsed .sb-user svg { display: initial !important; }
  /* Override the desktop-collapsed flyout positioning for the user menu —
     on mobile the drawer is full-width, so the menu must drop up inside the
     drawer (not as a viewport-pinned flyout). */
  .sidebar.collapsed .sb-user-menu {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(100% + 12px) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Touch-friendly minimum tap heights (44px per Apple HIG / WCAG 2.5.5). */
  .sb-item,
  .sb-section-header,
  .sb-user,
  .sb-user-menu-item,
  .topnav-pf-menu-item { min-height: 44px; }

  /* Mobile: kill the desktop hover-to-open behaviour. On touch screens "hover"
     fires on first tap and merges with the chip's tap zone, which is exactly
     the bug Amir reported (tap Settings → Logout fires). Click-to-toggle only. */
  .sb-bottom:hover .sb-user-menu,
  .sb-user-menu:hover { display: none; }
  .sb-user-menu.open { display: block; }
  /* Disable the invisible bridge on mobile — it inflates the drop-up's hit
     area towards the chip and is unnecessary for tap interaction. */
  .sb-user-menu::before { display: none; }

  /* Render the user drop-up full-width on mobile, with a clear 12px gap and a
     hard divider line above the chip below. (The portfolio switcher left the
     sidebar on 2026-08-12 — it is pinned to the viewport from the topnav.) */
  .sb-user-menu {
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
    bottom: calc(100% + 12px) !important;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.22);
  }
  .sb-user-menu-item,
  .topnav-pf-menu-item { padding: 12px 14px; }
}

/* Hamburger — hidden on desktop, shown on mobile */
.hamburger { display: none !important; }
@media (max-width: 900px) { .hamburger { display: flex !important; } }

/* Hide notification bells in topnav — notifications are in user popup now */
.notif-bell { display: none !important; }
.notif-panel { display: none !important; }
.topnav-bell { display: none !important; }

/* Topnav greeting */
.topnav-greeting {
  font-size: 14px; font-weight: 400; color: var(--text3);
  margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
.topnav-greeting strong { font-weight: 600; color: var(--text2); }

/* Topnav — slim utility bar with logo on the right */
.topnav-logo {
  font-size: 24px; font-weight: 900; color: var(--text);
  letter-spacing: -0.5px; cursor: pointer; flex-shrink: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.topnav-logo span { color: var(--gold); }
/* Dark-mode swap for SVG lockup */
body.dark .topnav-logo .topnav-logo-ink { display: none !important; }
body.dark .topnav-logo .topnav-logo-cream { display: block !important; }

/* Below 600px the full 320x56 lockup costs ~206px of a 358px bar, which leaves
   the portfolio switcher (added to the topnav 2026-08-12) too little room to
   show a readable name. The official monogram carries the brand in 76px, so
   the lockup yields and the switcher keeps the space. Brand chrome is the
   least valuable pixel on a handset; the active-portfolio label is the most. */
.topnav-logo-mono { display: none; flex-shrink: 0; }
@media (max-width: 600px) {
  /* The extra class on `img` is deliberate: it has to out-specify the
     theme swaps at layout.css:600 and design-system.css:3751, both of which
     are `!important` and land later in the cascade. */
  .topnav-logo img.topnav-logo-ink,
  .topnav-logo img.topnav-logo-cream,
  body.dark .topnav-logo img.topnav-logo-cream,
  body.theme-noir .topnav-logo img.topnav-logo-cream { display: none !important; }
  .topnav-logo-mono {
    display: block;
    width: 76px; height: 30px;
    background: url('../img/cvi-brand/logo-monogram-ink.svg') center / contain no-repeat;
  }
  body.dark .topnav-logo-mono,
  body.theme-noir .topnav-logo-mono {
    background-image: url('../img/cvi-brand/logo-monogram-cream.svg');
  }
}

/* ── TOPNAV ──────────────────────────────────────────── */
.topnav {
  height: 56px !important; min-height: 56px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch; justify-content: center;
  padding: 0; position: sticky; top: 0 !important; z-index: 100;
  overflow: visible; margin: 0 !important;
}
/* Inner wrapper mirrors .ds-page gutter so logo + greeting align with page content.
   Wide mode: full width with 36px horizontal padding (matches .ds-page).
   Narrow mode: max-width 1100px, centred. */
.topnav-inner {
  flex: 1; display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 0 36px; max-width: 100%; width: 100%;
  box-sizing: border-box;
}
body.narrow-layout .topnav-inner {
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 900px) {
  .topnav-inner { padding: 0 16px; }
}
@media (max-width: 600px) {
  .topnav-inner { padding: 0 12px; }
  .topnav-greeting { display: none !important; }
}
.topnav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent 60%);
  opacity: 0.4;
}
.topnav-brand {
  font-size: 18px; font-weight: 800; color: var(--text);
  letter-spacing: -0.5px; cursor: pointer; flex-shrink: 0;
}
.topnav-brand span { color: var(--gold); }
.nav-links  { display: flex; gap: 3px; flex-shrink: 0; margin: 0 auto; }
.nav-link {
  padding: 6px 16px; border-radius: var(--r); font-size: 13.5px;
  font-weight: 600; color: var(--text3); cursor: pointer;
  transition: all 0.15s; border: 1px solid var(--border); white-space: nowrap;
  letter-spacing: 0.2px; background: var(--surface);
}
.nav-link:hover { color: var(--text); background: var(--bg2); border-color: var(--gold); }
.nav-link.active { color: var(--gold); background: var(--bg2); border-color: var(--gold); font-weight: 700; }

/* ── NAV DROPDOWNS ──────────────────────────────────── */
.nav-dd {
  position: relative;
  padding-bottom: 6px;
  margin-bottom: -6px;
}
.nav-dd .nav-link {
  display: flex; align-items: center;
}
.nav-dd-menu {
  display: none; position: absolute;
  top: 100%; left: 0; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 6px; padding-top: 10px; z-index: 200;
  animation: ddFadeIn .15s ease;
}
@keyframes ddFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.nav-dd:hover:not(.closing) .nav-dd-menu { display: block; }
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd.closing .nav-dd-menu { display: none !important; }
/* On touch devices, rely on .open class instead of hover */
@media (hover: none) {
  .nav-dd:hover .nav-dd-menu { display: none !important; }
  .nav-dd.open .nav-dd-menu { display: block !important; }
}
.nav-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.nav-dd-item:hover {
  background: var(--gold-bg); color: var(--gold); font-weight: 600;
}
.nav-dd-item.active {
  background: var(--gold-bg); color: var(--gold); font-weight: 600;
}
.nav-dd-divider {
  height: 1px; background: var(--border); margin: 4px 8px;
}
/* Mega menu — wider two-column dropdown */
.nav-dd-mega {
  min-width: 340px !important;
  padding: 12px 8px !important;
}
.nav-mega-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
}
.nav-mega-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  padding: 4px 14px 4px;
  opacity: .8;
}

/* `min-width: 0` lets the portfolio switcher's name ellipsise instead of
   forcing the bar wider than the viewport. */
.topnav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }

/* Notification bell in topbar */
.topnav-bell {
  position: relative; width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); transition: all 0.15s;
}
.topnav-bell:hover { color: var(--gold); border-color: var(--gold-bdr); background: var(--gold-bg); }
.topnav-bell svg { width: 20px; height: 20px; }
.topnav-bell-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; border: 1.5px solid var(--bg);
}

.user-chip {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px 0 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text3);
  letter-spacing: .3px; transition: all 0.15s;
}
.user-chip:hover { border-color: var(--border2); color: var(--text); background: var(--bg2); }
.user-avatar {
  width: 24px; height: 24px; border-radius: calc(var(--r) - 2px);
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
/* ── TOOLBAR ACTIONS (unified style) ─────────────────── */
.tb-action {
  height: 30px; padding: 0 9px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text3);
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  transition: all 0.15s; flex-shrink: 0; user-select: none;
}
.tb-action:hover { border-color: var(--border2); color: var(--text); background: var(--bg2); }
.tb-action.active, .tb-action[data-page].active {
  border-color: var(--gold); color: var(--gold); background: var(--gold-bg);
}

/* ── TICKER STRIP ────────────────────────────────────── */
.ticker-strip {
  position: sticky; top: 0; z-index: 101;
  height: 34px; width: 100%;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  display: flex; align-items: center;
}
.ticker-restore {
  z-index: 101;
}
.ticker-overflow {
  flex: 1; min-width: 0; height: 100%; overflow: hidden;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 95%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 2%, black 95%, transparent 100%);
}
.ticker-track {
  display: inline-flex; align-items: center;
  white-space: nowrap; will-change: transform;
  /* Scrolled by JS requestAnimationFrame — no CSS animation */
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 18px; height: 34px; flex-shrink: 0;
  border-right: 1px solid var(--border);
}
.ticker-label { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: .03em; }
.ticker-price { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text); }
.ticker-chg   { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.ticker-chg.up { color: var(--green); }
.ticker-chg.dn { color: var(--red); }
.ticker-sep   { display: inline-block; flex-shrink: 0; padding: 0 10px; color: var(--border2); font-size: 12px; user-select: none; }
/* × close/toggle button */
.ticker-close {
  flex-shrink: 0; width: 22px; height: 22px; margin: 0 8px;
  border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text4);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; font-family: inherit; padding: 0;
}
.ticker-close:hover { color: var(--text2); border-color: var(--border2); background: var(--surface2); }
/* Thin restore bar shown when ticker is hidden */
.ticker-restore {
  position: sticky; top: var(--nav-h); z-index: 98;
  height: 18px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 10px; font-weight: 600;
  color: var(--text4); gap: 4px; letter-spacing: .05em;
  transition: background .15s, color .15s;
}
.ticker-restore:hover { background: var(--surface2); color: var(--text3); }

/* ── PAGES ───────────────────────────────────────────── */
.page { display: none; padding: 0; margin: 0; }
.page.active { display: block; }
.page-content { padding: 28px 36px 36px; max-width: 100%; margin: 0; background: var(--surface); min-height: calc(100vh - 60px); box-sizing: border-box; overflow-x: hidden; }
.page-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px; gap: 10px;
  flex-wrap: nowrap; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  max-height: 52px; min-height: 40px;
}
.page-header > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; }
.page-sub   { font-size: 11px; color: var(--text4); margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; flex-wrap: nowrap; overflow-x: auto; }
.page-actions .btn { padding: 4px 12px; font-size: 11px; border-radius: 6px; white-space: nowrap; }

/* .sn-tab moved to css/design-system.css (Page-scoped utilities section) 2026-04-20 */

/* ── METRICS GRID ────────────────────────────────────── */
.metrics-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 26px; }
.metrics-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 26px; }

/* ── TWO COLUMN ──────────────────────────────────────── */
.two-col    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.col-2-1    { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* ── ALLOCATION ──────────────────────────────────────── */
.alloc-bar  { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; display: flex; margin-bottom: 14px; }
.alloc-seg  { height: 100%; transition: width 0.4s ease; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.alloc-item { display: flex; align-items: flex-start; gap: 8px; }
.alloc-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.alloc-name { font-size: 12.5px; color: var(--text2); }
.alloc-pct  { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text3); margin-top: 1px; }

/* ── FX GRID ─────────────────────────────────────────── */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; padding: 20px; }
.fx-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fx-pair { font-size: 13px; font-weight: 600; color: var(--text2); }
.fx-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.fx-input {
  width: 96px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 7px 10px; color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  text-align: right; outline: none; transition: border-color 0.15s;
}
.fx-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }

/* ── SETTINGS LAYOUT ─────────────────────────────────── */
.stg-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: start;
}

.stg-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 6px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  box-shadow: var(--shadow);
}

.stg-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border-radius: var(--r); border: none; outline: none;
  background: transparent; color: var(--text3);
  font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: all 0.15s; font-family: inherit;
}
.stg-nav-item:hover { background: var(--bg2); color: var(--text2); }
.stg-nav-item.active { background: var(--gold-bg); color: var(--gold); font-weight: 600; }
.stg-nav-item svg { flex-shrink: 0; opacity: 0.6; }
.stg-nav-item.active svg { opacity: 1; color: var(--gold); }

.stg-section { display: none; }
.stg-section.active { display: block; }

/* ── SETTINGS ROWS ───────────────────────────────────── */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.settings-row:last-child { border-bottom: none; }
.settings-key  { font-size: 14px; font-weight: 500; color: var(--text2); }
.settings-desc { font-size: 12px; color: var(--text3); margin-top: 3px; }

@media (max-width: 800px) {
  .stg-layout { grid-template-columns: 1fr; }
  .stg-sidebar { position: static; display: flex; gap: 4px; flex-wrap: wrap; }
  .stg-nav-item { flex: 1; justify-content: center; min-width: 100px; }
}

/* ── ADMIN STATS ─────────────────────────────────────── */
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 26px; }
.admin-stat  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 20px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
}
.admin-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.admin-stat-val  { font-size: 22px; font-weight: 700; line-height: 1; }
.admin-stat-lbl  { font-size: 12px; color: var(--text3); margin-top: 3px; }

/* ── STATUS INDICATOR ────────────────────────────────── */
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-gray   { background: var(--text4); }

/* ── LOGIN PAGE ──────────────────────────────────────── */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bg);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px; width: 440px; box-shadow: var(--shadow2);
}
.login-brand { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 4px; }
.login-brand span { color: var(--gold); }
.login-tag   { font-size: 12px; color: var(--text3); }
.login-err   { background: var(--red-bg); border: 1px solid rgba(220,38,38,.2); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--red); margin-bottom: 14px; }
.role-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.role-card   { border: 1.5px solid var(--border); border-radius: var(--r); padding: 12px; cursor: pointer; text-align: center; transition: all 0.15s; background: var(--surface2); }
.role-card:hover { border-color: var(--gold); background: var(--gold-bg); }
.role-card.on    { border-color: var(--gold); background: var(--gold-bg); }
.role-icon { font-size: 20px; margin-bottom: 4px; }
.role-name { font-size: 12px; font-weight: 600; color: var(--text2); }
.role-card.on .role-name { color: var(--gold); }
.role-desc { font-size: 10.5px; color: var(--text3); margin-top: 1px; }
.login-hint { margin-top: 18px; padding: 12px; background: var(--bg); border-radius: var(--r); border: 1px solid var(--border); font-size: 11.5px; color: var(--text3); text-align: center; }

/* ── NAV CHART ───────────────────────────────────────── */
.chart-wrap { position: relative; padding: 20px; }
.chart-empty { text-align: center; padding: 48px; color: var(--text3); font-size: 13px; }

/* AI report container (direct HTML) */
#ai-report-container { min-height: 400px; padding: 12px; }
#nav-chart-container svg { max-width: 100%; max-height: 220px; }
@media (max-width: 640px) {
  #nav-chart-container svg { height: 160px !important; }
}

/* ── PORTFOLIO SELECTOR ──────────────────────────────── */
.pf-selector {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2);
  transition: border-color 0.15s;
}
.pf-selector:hover { border-color: var(--border2); }
.pf-selector-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .metrics-grid   { grid-template-columns: repeat(2,1fr); }
  .metrics-grid-3 { grid-template-columns: repeat(2,1fr); }
  .three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .topnav { min-height: 48px; }
  .nav-links { display: none; }
  .two-col, .col-2-1 { grid-template-columns: 1fr; }
  .page-content { padding: 16px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }

  /* compact header scrolls actions on narrow screens */
  .page-header { flex-wrap: nowrap; }
  .page-actions { overflow-x: auto; flex-shrink: 1; }
  .page-sub { display: none; }

  /* nav period buttons should scroll horizontally */
  #nav-period-btns { display: flex; gap: 6px; overflow-x: auto; }
}

/* mobile menu toggle and styling */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  padding: 4px 8px;
}
@media (max-width: 900px) {
  .hamburger { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    padding: 10px 0;
    background: var(--surface);
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 90;
  }
  .nav-links.show { display: flex; }
  .nav-link { padding: 12px 20px; font-size: 15px; }
  /* Mobile dropdowns: stack vertically, no absolute positioning */
  .nav-dd { position: static; }
  .nav-dd .nav-dd-menu {
    position: static; box-shadow: none; border: none;
    background: var(--surface2); border-radius: 0;
    padding: 0 0 0 16px; margin: 0;
    animation: none;
  }
  .nav-dd:hover .nav-dd-menu { display: none !important; }
  .nav-dd.open .nav-dd-menu { display: block !important; }
  .nav-dd-item { padding: 10px 20px; font-size: 14px; }
}

@media (max-width: 640px) {
  .metrics-grid, .metrics-grid-3 { grid-template-columns: 1fr; }
  .form-grid, .form-grid3 { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: repeat(2,1fr); }
  .admin-stats { grid-template-columns: 1fr; }
  .topnav { padding: 0 10px; }
  .topnav-brand { font-size: 15px; }
  #btn-add-asset span { display: none; }

  /* The topnav is a fixed-height bar — it must never wrap, or the second row
     is clipped. The portfolio switcher absorbs the squeeze by ellipsising its
     name (see .topnav-pf-name breakpoints). */
  .topnav-right { flex-wrap: nowrap; gap: 8px; }
  .topnav-right .btn { font-size: 12px; padding: 4px 8px; }

  /* page content tighter */
  .page-content { padding: 12px; }
  .page-title { font-size: 14px; }
  .page-sub { display: none; }
  .page-header { margin-bottom: 12px; gap: 8px; }

  /* force nav summary to stack on small screens */
  #nav-summary > div {
    flex-direction: column !important;
  }
  #nav-summary > div > div {
    width: 100% !important;
    margin-bottom: 12px;
  }

  /* chart fits better */
  .chart-wrap { padding: 10px 4px; }

  /* filter pills smaller on mobile */
  .filter-row { gap: 6px; }
  .fpill { padding: 5px 12px; font-size: 12px; }

  /* modal full-width on phones */
  .overlay { padding: 8px; }
  .modal { border-radius: 12px; max-height: 95vh; }
  .modal-header { padding: 16px 16px 14px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px 16px; }

  /* metric cards tighter */
  .metric-card { padding: 16px 14px; }
  .metric-val { font-size: 22px; }
}

/* Currency picker options */
.ccy-option {
  padding: 8px 16px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .1s;
}
.ccy-option:hover  { background: var(--bg2); }
.ccy-option.ccy-active { font-weight: 700; }

/* Topnav never wraps */
.topnav { flex-wrap: nowrap; }
.nav-links { overflow: visible; }

/* ── Currency picker trigger button ─────────────── */
/* ccy-trigger inherits tb-action look — kept for backward compat */
.ccy-trigger {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 12px; font-weight: 600;
  color: var(--text3); letter-spacing: .3px;
  transition: all .15s; user-select: none;
}
.ccy-trigger:hover { border-color: var(--border2); color: var(--text); background: var(--bg2); }

/* ── Currency picker dropdown ────────────────────── */
#ccy-picker {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 9999;
  min-width: 150px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  padding: 4px 0;
}
#ccy-picker.open { display: block; }

.ccy-option {
  padding: 9px 16px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text); background: transparent;
  transition: background .1s; white-space: nowrap;
}
.ccy-option:hover   { background: var(--bg2); }
.ccy-option.ccy-active { font-weight: 700; color: var(--gold); }

/* ── RTL Support ──────────────────────────────────────── */
[dir="rtl"] .topnav-brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .nav-links    { direction: rtl; }
[dir="rtl"] .topnav-right { flex-direction: row-reverse; }
[dir="rtl"] .page-header  { flex-direction: row-reverse; }
[dir="rtl"] .page-actions { flex-direction: row-reverse; }
[dir="rtl"] .stg-layout   { direction: rtl; }
[dir="rtl"] .stg-sidebar  { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .card-header  { flex-direction: row-reverse; }
[dir="rtl"] .settings-row { flex-direction: row-reverse; }
[dir="rtl"] .r            { text-align: left; }
[dir="rtl"] table th,
[dir="rtl"] table td      { text-align: right; }
[dir="rtl"] table th.r,
[dir="rtl"] table td.r    { text-align: left; }
[dir="rtl"] table th.c,
[dir="rtl"] table td.c    { text-align: center; }
[dir="rtl"] .mono         { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .admin-stats  { direction: rtl; }
[dir="rtl"] .metrics-grid { direction: rtl; }

/* ═══════════════════════════════════════════════════
   DASHBOARD LAYOUT — Phase 3
═══════════════════════════════════════════════════ */
.dash-row {
  display: flex; gap: 16px; align-items: stretch;
  margin-bottom: 20px;
}
.dash-hero {
  flex: 1.4; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow);
  padding: 22px 26px;
}
.dash-panel {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--shadow);
  padding: 20px 22px; overflow: hidden;
}
.dash-panel-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 14px;
}
.dash-kpi-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.dash-nav-value {
  font-size: 38px !important; font-weight: 800 !important; line-height: 1;
  letter-spacing: -1px; font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.dash-nav-change {
  font-size: 12px; font-weight: 600; display: flex;
  align-items: center; gap: 6px;
}

/* Dashboard responsive */
@media (max-width: 1100px) {
  .dash-row { flex-wrap: wrap; }
  .dash-hero { flex: 1 1 100%; }
  .dash-panel { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .dash-row { flex-direction: column; }
  .dash-hero, .dash-panel { flex: 1 1 100%; }
  .dash-nav-value { font-size: 28px; }
  .dash-hero { padding: 18px 16px; }
  .dash-panel { padding: 16px 14px; }
}
@media (max-width: 480px) {
  .dash-nav-value { font-size: 24px; }
  .dash-kpi-row { gap: 6px; }
  .kpi-chip { min-width: 70px; padding: 5px 8px; }
  .kpi-chip-value { font-size: 11px; }
}

/* ── View-as-Client Mode ─────────────────────────────── */
body.viewing-as-client .ticker-restore {
  top: calc(var(--nav-h) + 44px);
}
#impersonate-banner {
  font-family: inherit;
}

/* Admin v2 sidebar icons — added 2026-04-21, overrides earlier rule */
.sb-sub-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-sub-label svg.ds-icon {
  color: var(--gold-text, #B8935A);
  opacity: 1;
  flex-shrink: 0;
}
.sb-item .ds-icon {
  color: var(--text3);
  opacity: 0.75;
  flex-shrink: 0;
  margin-right: 2px;
}
.sb-item:hover .ds-icon,
.sb-item.active .ds-icon {
  color: var(--gold, #D4AF37);
  opacity: 1;
}