/* ═══════════════════════════════════════════════════
   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: 40px; 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) */
.sb-bottom {
  flex-shrink: 0; padding: 8px 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.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-user-menu {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 10px; right: 10px;
  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;
}
.sb-user-menu.open { display: block; }
@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-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; }

/* 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;
}
.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: var(--sidebar-collapsed) !important;
  bottom: 10px !important;
  min-width: 200px;
  z-index: 9999;
}

/* ── 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 {
    transform: translateX(-100%);
    width: 280px !important;
    z-index: 160;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .sidebar.collapsed { width: 280px !important; }
  .sidebar.collapsed .sb-label,
  .sidebar.collapsed .sb-user-info,
  .sidebar.collapsed .sb-item-text { display: initial; }
  .sidebar.collapsed .sb-logo { display: initial; }
  .sidebar.collapsed .sb-item { justify-content: flex-start; padding: 9px 12px; }
  .sidebar.collapsed .sb-header { justify-content: space-between; padding: 16px 16px 12px; }
}

/* 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: 12px; 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); }

/* ── TOPNAV ──────────────────────────────────────────── */
.topnav {
  height: 40px !important; background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 20px; position: sticky; top: 0 !important; z-index: 100;
  gap: 8px; overflow: visible; margin: 0 !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;
}

.topnav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 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; }

/* ── Page-level tab buttons (used in FixedNote, etc.) ── */
.sn-tab { border: 1px solid var(--border); color: var(--text3); background: transparent; transition: all .15s; padding: 4px 12px; font-size: 11px; border-radius: 6px; white-space: nowrap; }
.sn-tab:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,134,11,.06); }
.sn-tab.active { border-color: var(--gold); color: var(--gold); background: rgba(184,134,11,.1); font-weight: 700; }

/* ── 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; }

  /* ensure topnav right side wraps on tiny viewports */
  .topnav-right { flex-wrap: wrap; gap: 4px; }
  .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;
}