@layer base, components, utilities;

/* Safety: define critical CSS variables outside layers to avoid undefined in edge builds */
:root {
  --accent: #0964A0;
  --accent-weak: #2B82B6;
  --text-strong: #E8F2F9;

  /* Shared UI tokens (single source of truth) */
  --card-bg: var(--bg-elev);
  --card-border: var(--border);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  --radius: 12px;
  --radius-lg: 16px;

  --shadow-1: 0 4px 16px rgba(0,0,0,.2);
  --shadow-2: 0 8px 24px rgba(0,0,0,.25);

  /* Toggle defaults (overridable in scopes like #fund-nav) */
  --toggle-bg: rgba(173, 173, 173, 0.2);
  --toggle-border: #ADADAD;
  --toggle-label: #424242;
}
/* .app-header { box-sizing: border-box; } */
/* #outer-site-wrapper, #inner-site-wrapper { 
  margin: 0; padding: 0; min-height: 0; height: 100%; 
} */
html, body { height: 100%; overflow: hidden; }
/* .home-dashboard { padding-bottom: 0; box-sizing: border-box; height: 100%; } */


.ag-theme-balham.small-grid {
  /* Text + base spacing */
  --ag-font-size: 11px;          /* was 12px */
  --ag-grid-size: 3px;           /* base spacing unit; smaller = denser */

  /* Row & header heights (explicit, for predictable density) */
  --ag-row-height: 28px;         /* default ~32px+ depending on theme */
  --ag-header-height: 30px;

  /* Cell padding */
  --ag-cell-horizontal-padding: 4px;

  /* Side panels / menus / lists */
  --ag-list-item-height: 22px;

  /* Icons & checkboxes (filter menus, selects, etc.) */
  --ag-icon-size: 12px;
  --ag-checkbox-size: 12px;

  /* Optional: smaller border radius for a tighter look */
  --ag-borders: solid 1px;
  --ag-border-radius: 3px;
}

/* .dashboard-grid > :last-child { margin-bottom: 0; } */
/* Force grid layout to override any legacy CSS */
.app-shell .app-body,
.app-body {
  display: grid !important;
  grid-template-columns: var(--sidebar-w) 1fr !important;
  min-height: calc(100dvh - var(--header-h) - 20px) !important;
  transition: grid-template-columns var(--transition) !important;
  gap: 0 !important;
  position: relative !important;
}

/* Flatten terminal wrapper so child aside/main become grid items */
.app-body > #etf-terminal-wrapper { display: contents !important; }

/* Ensure sidebar and main are grid items */
.app-body .app-sidebar,
.app-body aside,
.app-body #etf-sidebar-sub {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
}
/* .app-shell .app-body .app-main { height: calc(100dvh - var(--header-h) - 1px); } */
.app-header {
  box-sizing: border-box;
}

.app-body .app-main,
.app-body main,
.app-body #app-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
}
/* Ensure dashboard wrappers propagate height to inner viewport panes */
.app-body .terminal-wrapper,
.app-body #dash-wrapper,
.app-body .etf-content-main,
.app-body #landscape-dash-summary-stats {
  height: 100%;
  min-height: 0;
}
  /* Ensure inner terminal wrappers can size to viewport */
  .app-body .terminal-wrapper { height: 100%; min-height: 0; }

  /* Override only problematic positioning (avoid nuking child positions) */
  .app-body .etf-col-right,
  .app-body .etf-row,
  .app-body .terminal-container {
    position: static !important;
    height: 100%;
  }

.app-body .app-sidebar,
.app-body aside,
.app-body #etf-sidebar-sub,
.app-body .app-main,
.app-body main,
.app-body #app-main {
  position: relative !important;
  overflow-y: scroll;
}

@layer base {
  :root {
    --brand-h: 212;
    --brand-s: 90%;
    --brand-l: 50%;
    --bg: #0b0e13;
    --bg-elev: #111520;
    --text: #e6e9f0;
    --muted: #ADADAD;
    --border: #1e2433;
    --text-strong: #E8F2F9;
    --success: #1fa971;
    --warning: #e2b534;
    --danger: #e05b5b;

    --header-h: 55px;
    --sidebar-w: 280px;
    --sidebar-w-collapsed: 76px;
    
    --transition: 0.2s ease;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f7f9fc;
      --bg-elev: #ffffff;
      --text: #0f172a;
      --muted: #4b5563;
      --border: #e5e7eb;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --transition: 0s;
    }
  }

  html, body { 
    height: 100%; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0;
    font: 12px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    font-family: "Muli", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  .visually-hidden { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    white-space: nowrap; 
  }
  
  :focus-visible { 
    outline: 2px solid var(--accent); 
    outline-offset: 2px; 
    border-radius: 4px; 
  }
}

@layer components {
  /* Modern summary bar (legacy: .etf-summary-bar-new) */
  .etf-summary-bar-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
  }
  .etf-summary-bar-new > * {
    flex: 0 1 auto;
  }
  .etf-summary-bar-new .etf-stat-item {
    display: flex;
    flex-direction: column;
    margin: 0; /* override legacy left margin */
    padding: 0 6px;
    min-width: 120px;
  }
  .etf-summary-bar-new label {
    display: block;
    margin: 0 0 1px 0;
    font-size: 11px;
    font-weight: 600; /* keep strong for quick scanning */
    color: var(--muted);
    border-bottom: 1px solid var(--card-border); /* subtle underline */
    padding-bottom: 1px;
    line-height: 1.1;
    letter-spacing: .2px;
  }
  .etf-summary-bar-new .etf-header-stat-new {
    font-size: 13px; /* compact but readable */
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
  }
  /* Subtle separators between items */
  .etf-summary-bar-new .etf-stat-item + .etf-stat-item {
    border-left: 1px solid var(--card-border);
    padding-left: 10px;
    margin-left: 2px;
  }
  /* .app-shell { 
    min-height: 100dvh; 
  } */

  /* Auth layout (login/signup) */
  .auth-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100%; padding: 48px 16px; }
  .auth-header { background: var(--bg-elev); color: var(--text); border-bottom: 1px solid var(--border); padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow-1); }
  .auth-card {
    width: 100%;
    max-width: 520px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 20px;
  }
  .auth-card .form-control.small input,
  .auth-card .form-control.small select {
    width: 100%;
  }

  /* Override legacy CSS that conflicts with grid layout */
  /* (Consolidated app-body grid rules earlier in the file) */
  
  .app-body .etf-col-right {
    float: none !important;
    width: auto !important;
    display: block !important;
  }
  
  .app-body .terminal-container {
    display: none !important;
    float: none !important;
    width: auto !important;
  }
  
  .app-body .terminal-container.active {
    display: block !important;
  }
  
  .app-body .etf-sidebar,
  .app-body .app-sidebar {
    float: none !important;
    width: auto !important;
    position: static !important;
  }
  
  .app-body .etf-row {
    display: contents !important;
  }
  
  .app-body .etf-col-xs-12,
  .app-body .etf-col-lg-4,
  .app-body .etf-col-lg-8 {
    float: none !important;
    width: auto !important;
  }
  
  .app-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 2px 16px; 
    background: var(--bg-elev); 
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-h);
    overflow: hidden;
  }
  

  .app-sidebar { 
    background: var(--bg-elev); 
    border-right: 1px solid var(--border); 
    display: flex; 
    flex-direction: column;
    overflow: visible;
    width: var(--sidebar-w);
  }

  /* Desktop: keep sidebar within viewport and scroll internally */
  @media (min-width: 768px) {
    .app-shell .app-body .app-sidebar {
      position: sticky !important;
      top: var(--header-h) !important;
      height: calc(100dvh - var(--header-h)) !important;
      max-height: calc(100dvh - var(--header-h)) !important;
      overflow: hidden !important;
      z-index: 150; /* ensure flyouts render above main content */
      align-self: start; /* ensure sticky works inside CSS grid */
    }
    .app-shell .app-body .sidebar-scroll {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* When collapsed, allow flyouts to escape the sticky sidebar box */
    .app-shell.is-collapsed .app-body .app-sidebar {
      overflow: visible !important;
    }
    /* Also allow the inner scroll container to not confine flyouts */
    .app-shell.is-collapsed .app-body .sidebar-scroll {
      overflow: visible !important;
    }
  }
  
  .sidebar-scroll { 
    overflow: auto; 
    overscroll-behavior: contain; 
    padding: 0; 
    flex: 1;
    pointer-events: auto;
    z-index: 1;
  }
  .is-collapsed .sidebar-scroll { overflow: visible; }
  .sidebar-item-group { position: relative; }

  /* Sidebar section labels — lightweight divider + all-caps heading
     used to group multiple sidebar-item-groups under one category */
  .sidebar-section-label {
    padding: 20px 24px 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .55;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
  }
  .sidebar-section-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 12px;
  }
  .is-collapsed .sidebar-section-label {
    font-size: 0;
    padding: 12px 24px 4px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Admin-only badge — small lock icon shown next to sidebar items visible only to admins */
  .sidebar-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 9px;
    color: #e2a634;
    opacity: .7;
    vertical-align: middle;
  }
  .is-collapsed .sidebar-admin-badge {
    display: none;
  }

  /*
   * Enterprise-feature lock badge & locked sidebar entries.
   *
   * Features like 13F Filings and Form ADV are enterprise-only. For users
   * who don't have the permission we still render them in the sidebar so
   * they're discoverable, but the entries are visually dimmed with a small
   * lock icon. Clicking is intercepted by navigationV2.js -> opens an
   * "Enterprise feature" modal instead of navigating.
   */
  .sidebar-enterprise-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 9px;
    color: #6aa9ff;
    opacity: .8;
    vertical-align: middle;
  }
  .is-collapsed .sidebar-enterprise-badge {
    display: none;
  }

  /* Locked sub-items: slightly dimmed, subtle hover to signal "click to learn more" */
  .sidebar-link-locked {
    opacity: .72;
    cursor: pointer;
  }
  .sidebar-link-locked:hover {
    opacity: 1;
    background-color: rgba(106, 169, 255, 0.08);
  }
  .sidebar-link-locked .sidebar-enterprise-badge {
    margin-left: 6px;
  }

  /* Locked group head — keep chevron usable (toggles the list) but dim the
     whole block so it reads as "preview / gated" alongside unlocked groups. */
  .sidebar-group-locked > .etf-sidebar-head {
    opacity: .85;
  }
  
  .sidebar-footer { 
    margin-top: auto; 
    padding: 16px 12px; 
    border-top: 1px solid var(--border); 
    background: rgba(255, 255, 255, 0.02);
  }

  .app-main { 
    /* padding: 16px;  */
    min-width: 0; 
    overflow: auto;
  }

  /* Desktop: cap main content to viewport and delegate scrolling to inner content */
  @media (min-width: 768px) {
    .app-shell .app-body .app-main {
      height: calc(100dvh - var(--header-h) - 0px);
      max-height: calc(100dvh - var(--header-h) - 0px);
      overflow: hidden; /* let inner panes handle scrolling */
    }
  }


  
  /* Header Components */
  .header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .header-brand img {
    height: 45px;
    width: auto;
    /* max-width: 90px; */
    /* object-fit: contain; */
  }


  .header-search {
    flex: 1;
    max-width: 400px;
    margin: 0 16px;
  }

  .header-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
  }

  .header-search input:focus {
    border-color: var(--accent);
    outline: none;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--transition);
  }

  .btn-ghost:hover {
    background: rgba(9, 100, 160, 0.12);
    color: var(--text-strong, var(--text));
  }

  .btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Sidebar Styling */
  .etf-sidebar-head {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
    font-weight: 500;
    color: var(--muted);
    border-radius: 0;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .is-collapsed .etf-sidebar-head { padding: 12px 0; }
  .is-collapsed .etf-sidebar-head h4 { justify-content: center; gap: 0;padding: 6px 20px; }
  .is-collapsed .etf-sidebar-head i.fa-fw { width: auto; margin: 0; }

  .etf-sidebar-head:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
  }

  .app-sidebar .etf-sidebar-head.active,
  .etf-sidebar-head.active,
  .etf-sidebar-head.active:hover {
    background: var(--accent);
    color: #fff;
  }

  .etf-sidebar-head h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.3px;
    flex-grow: 1;
  }
  .is-collapsed .etf-sidebar-head h4 span { display: none; }
  .is-collapsed .etf-sidebar-head h4 { justify-content: center; width: 100%; }
  .is-collapsed .pill { display: none; }
  .is-collapsed .sidebar-footer { padding: 12px; }

  .etf-sidebar-head .fa-angle-right { transition: transform var(--transition); font-size: 11px; opacity: 0.7; }
  .etf-sidebar-head .fa-angle-right.down { transform: rotate(90deg); opacity: 1; }
  .etf-sidebar-head .rotate { transition: transform var(--transition); margin-left: auto; }
  .is-collapsed .etf-sidebar-head .rotate { display: none; }
  .etf-sidebar-head.active .rotate { transform: rotate(90deg); }

  .etf-sidebar-body {
    list-style: none;
    padding-left: 0;
    display: none;
    margin: 0;
  }
  .app-shell:not(.is-collapsed) .app-sidebar .etf-sidebar-body {
    padding-left: 18px;
    border-left: 1px solid var(--border);
    margin: 0 0 12px 30px;
  }

  .app-shell:not(.is-collapsed) .app-sidebar .etf-sidebar-body.is-open { display: block; }

  .is-collapsed .etf-sidebar-head .rotate {
    display: none !important;
  }

  

  .is-collapsed .etf-sidebar-body {
    display: none !important;
    position: absolute;
    left: 100%;
    top: -6px;
    z-index: 1000;
    width: 220px;
    max-height: calc(100dvh - var(--header-h) - 20px);
    overflow-y: auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: none;
    box-shadow: var(--shadow-1);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 8px;
  }
  .is-collapsed .sidebar-item-group { overflow: visible; }
  .is-collapsed .sidebar-item-group:hover > .etf-sidebar-body { display: block !important; }

  .etf-sidebar-list-head {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 12px;
    position: relative;
    color: var(--muted);
    border-radius: 0;
    white-space: nowrap;
  }
  .is-collapsed .etf-sidebar-list-head { border-radius: 6px; }

  .etf-sidebar-list-head:hover {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
  }

  .etf-sidebar-list-head.active {
    /* color: var(--text-strong); */
    /* background-color: #D3D3D3; */
    font-weight: 500;
  }

  .app-sidebar:not(.is-collapsed) .etf-sidebar-list-head.active::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background: var(--accent);
    border-radius: 2px;
  }

  .etf-sidebar-list-head.locked { color: var(--muted); opacity: 0.9; cursor: pointer; }
  .etf-sidebar-list-head.locked:hover { background: transparent; }

  .etf-sidebar-list-head .fa-lock {
    margin-left: auto;
    font-size: 10px;
    /* opacity: 0.6; */
  }

  /* Collapsed sidebar styling */

  /* Spacing and subtle dividers between groups */
  .sidebar-scroll > .etf-sidebar-head + .etf-sidebar-body { margin-top: 4px; }
  .sidebar-scroll > .etf-sidebar-body + .etf-sidebar-head { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }

  /* Flyout header */
  .flyout-header {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: black;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    display: none;
  }
  .is-collapsed .flyout-header { display: block; }

  /* Nested sub-groups inside sidebar body (e.g. Intelligence inside Issuer Workspace) */
  .etf-sidebar-sub-group {
    list-style: none;
    margin: 2px 0;
  }
  .etf-sidebar-sub-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition);
    border-radius: 0;
  }
  .etf-sidebar-sub-head:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
  }
  .etf-sidebar-sub-head .rotate {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  .etf-sidebar-sub-head .rotate.down {
    transform: rotate(90deg);
  }
  .etf-sidebar-sub-body {
    list-style: none;
    padding: 0 0 0 14px;
    margin: 0;
    display: none;
    border-left: 1px solid var(--border);
    margin-left: 16px;
  }
  .etf-sidebar-sub-body.is-open {
    display: block;
  }
  .is-collapsed .etf-sidebar-sub-head .rotate { display: none; }
  .is-collapsed .etf-sidebar-sub-body { display: none !important; }
  .is-collapsed .sidebar-item-group:hover .etf-sidebar-sub-body.is-open { display: block !important; }

  /* Content Area - styles moved above to override legacy CSS */

  /* Utility Classes */
  .pill { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 4px 10px; 
    border-radius: 999px; 
    background: rgba(9, 100, 160, 0.10); 
    font-size: 12px;
  }
  
  .kbd { 
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 
    padding: 2px 6px; 
    border-radius: 6px; 
    border: 1px solid rgba(9, 100, 160, 0.25); 
    background: var(--bg); 
    font-size: 11px;
  }
}

@layer utilities {
  .is-collapsed .app-body { 
    grid-template-columns: max-content 1fr !important; 
  }
  .is-collapsed .app-sidebar { width: auto !important; }
  /* Opt-in legacy light body styling */
  body.legacy-light {
    background: #ffffff;
    color: #1c2634;
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }
  .hide-when-collapsed { 
    display: inline; 
  }
  
  .is-collapsed .hide-when-collapsed { 
    display: none; 
  }
  
  .grow { 
    flex: 1 1 auto; 
  }

  /* Responsive Design */
  @media (max-width: 1279px) {
    .app-body { grid-template-columns: max-content 1fr; }
    .app-shell:not(.is-collapsed) .app-body { grid-template-columns: var(--sidebar-w) 1fr; }
  }

  @media (max-width: 767px) {
    .app-shell .app-body,
    .app-body {
      grid-template-columns: 1fr !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .app-shell .app-body .app-main,
    .app-body .app-main,
    .app-body main,
    .app-body #app-main {
      grid-column: 1 !important;
      width: 100% !important;
      max-width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    .app-sidebar,
    .app-shell .app-sidebar,
    .app-shell .app-body .app-sidebar {
      position: fixed !important;
      top: var(--header-h) !important;
      left: 0 !important;
      right: 0;
      bottom: 0 !important;
      width: 100% !important;
      max-width: 280px;
      height: calc(100dvh - var(--header-h)) !important;
      z-index: 200;
      transform: translateX(-100%);
      transition: transform var(--transition);
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .app-shell .app-sidebar .sidebar-scroll,
    .app-shell:not(.is-collapsed) .app-sidebar .sidebar-scroll {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      height: 0;
    }

    .app-shell:not(.is-collapsed) .app-sidebar {
      transform: translateX(0);
    }

    /* Hide sidebar column space when collapsed on mobile */
    .app-shell.is-collapsed .app-body {
      grid-template-columns: 1fr !important;
    }

    /* Ensure all content wrappers take full width on mobile */
    .app-body .terminal-wrapper,
    .app-body .etf-content-main,
    .app-body .etf-col-sm-12,
    .app-body .etf-col-xs-12 {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Page header full width on mobile */
    .page-header {
      margin: 0 0 6px 0;
      padding: 8px 10px;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }

    /* Ensure page-grid fills width on mobile */
    .page-grid {
      width: 100% !important;
      max-width: 100% !important;
    }

    .sidebar-backdrop {
      position: fixed;
      top: var(--header-h);
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 190;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition), visibility var(--transition);
    }
    
    .app-shell:not(.is-collapsed) .sidebar-backdrop {
      opacity: 1;
      visibility: visible;
    }
    
    .header-search {
      display: none;
    }
  }

  /* Global modal base (unified modern UX) */
  .modal-base {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px) saturate(120%);
    z-index: 1000;
  }
  /* Hide any modals by default; show only when opened */
  .etf-modals > * { display: none !important; }
  .etf-modals > [aria-hidden="false"],
  .etf-modals > .is-open { display: block !important; }
  /* Support existing v2 modal class (possibly rendered outside etf-modals) */
  body > .etf-v2-modal { display: none !important; }
  body > .etf-v2-modal[aria-hidden="false"], body > .etf-v2-modal.is-open { display: block !important; }
  .modal-base[aria-hidden="false"],
  .modal-base.is-open {
    display: flex;
  }
  .modal-panel {
    width: min(720px, 92vw);
    max-height: 86vh;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .modal-title { font-weight: 600; font-size: 16px; margin: 0; }
  .modal-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; }
  .modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
  .modal-body { padding: 16px; overflow: auto; }
  .modal-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
}



@layer components {
  /* Shared modal component (new system) */
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px) saturate(120%);
    z-index: 1000;
  }
  .modal[aria-hidden="false"],
  .modal.is-open { display: flex; }

  .modal__panel {
    width: min(720px, 92vw);
    max-height: 86vh;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .modal__body { padding: 16px; overflow: auto; }
  .modal__footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
}
/* Legacy modal compatibility for IDB (align to new modal design) + Save View custom */
@layer components {
  /* Backdrop + centering */
  #view-save-modal-new,
  #filter-save-modal,
  #idb-view-columns-modal {
    position: fixed;
    inset: 0;
    display: none; /* toggled by aria or .is-open */
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px) saturate(120%);
    z-index: 1000;
  }
  #view-save-modal-new[aria-hidden="false"],
  #filter-save-modal[aria-hidden="false"],
  #idb-view-columns-modal[aria-hidden="false"] {
    display: flex !important;
  }

  /* Panel: assume first-level child is content wrapper */
  #view-save-modal-new > *,
  #filter-save-modal > *,
  #idb-view-columns-modal > * {
    width: min(720px, 92vw);
    max-height: 86vh;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Try to normalize common inner sections if present */
  #view-save-modal-new .modal-header,
  #filter-save-modal .modal-header,
  #idb-view-columns-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  #view-save-modal-new .modal-body,
  #filter-save-modal .modal-body,
  #idb-view-columns-modal .modal-body { padding: 16px; overflow: auto; }
  #view-save-modal-new .modal-footer,
  #filter-save-modal .modal-footer,
  #idb-view-columns-modal .modal-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

  /* Fallback if legacy classes used (etf-v2) */
  #view-save-modal-new .etf-v2-modal-content,
  #filter-save-modal .etf-v2-modal-content,
  #idb-view-columns-modal .etf-v2-modal-content {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow: hidden;
  }
}

@layer components {
  /* Generic modal overlay fallback to ensure centering */
  .modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  .modal-overlay.open,
  .modal-overlay[aria-hidden="false"] { display: flex !important; }
  .modal-overlay .modal-content {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: var(--shadow-2);
    border: 1px solid var(--card-border);
    padding: 20px;
    width: min(520px, 92vw);
    max-height: 86vh;
    overflow: auto;
  }
}

@layer components {
  /* Save View modal (scoped to exact design provided) */
  #view-save-modal-new.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #view-save-modal-new.modal-overlay.open { opacity: 1; visibility: visible; }
  #view-save-modal-new[aria-hidden="false"] { opacity: 1; visibility: visible; }
  #view-save-modal-new .modal-content {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: min(56rem, 96vw); /* wider but responsive */
    padding: 1.5rem;
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }
  #view-save-modal-new.modal-overlay.open .modal-content,
  #view-save-modal-new[aria-hidden="false"] .modal-content { transform: scale(1); }
  #view-save-modal-new .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  #view-save-modal-new .modal-title { font-size: 1.25rem; font-weight: 600; color: #111827; }
  #view-save-modal-new .close-button { background: none; border: none; cursor: pointer; color: #6b7280; padding: 0.25rem; border-radius: 0.25rem; }
  #view-save-modal-new .close-button:hover { background-color: #f3f4f6; color: #111827; }
  #view-save-modal-new .modal-body { display: flex; flex-direction: column; gap: 1.25rem; max-width: 100%; overflow-x: hidden; }
  #view-save-modal-new .radio-group { display: flex; gap: 1rem; }
  #view-save-modal-new .radio-item { display: flex; align-items: center; gap: 0.5rem; }
  #view-save-modal-new .hidden { display: none; }
  #view-save-modal-new .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
  #view-save-modal-new .modal-content,
  #view-save-modal-new .modal-header,
  #view-save-modal-new .modal-body,
  #view-save-modal-new .modal-footer,
  #view-save-modal-new .form-group { box-sizing: border-box; }
  #view-save-modal-new .input,
  #view-save-modal-new .select { width: 100%; max-width: 100%; box-sizing: border-box; }
}

@layer components {
  /* Save Filters modal (scoped to modern design) */
  #filter-save-modal.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #filter-save-modal.modal-overlay.open { opacity: 1; visibility: visible; }
  #filter-save-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
  #filter-save-modal .modal-content {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: min(48rem, 96vw);
    padding: 1.5rem;
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }
  #filter-save-modal.modal-overlay.open .modal-content,
  #filter-save-modal[aria-hidden="false"] .modal-content { transform: scale(1); }
  #filter-save-modal .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  #filter-save-modal .modal-title { font-size: 1.25rem; font-weight: 600; color: #111827; }
  #filter-save-modal .close-button { background: none; border: none; cursor: pointer; color: #6b7280; padding: 0.25rem; border-radius: 0.25rem; }
  #filter-save-modal .close-button:hover { background-color: #f3f4f6; color: #111827; }
  #filter-save-modal .modal-body { display: flex; flex-direction: column; gap: 1.25rem; max-width: 100%; overflow-x: hidden; }
  #filter-save-modal .radio-group { display: flex; gap: 1rem; }
  #filter-save-modal .radio-item { display: flex; align-items: center; gap: 0.5rem; }
  #filter-save-modal .hidden { display: none; }
  #filter-save-modal .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
  #filter-save-modal .modal-content,
  #filter-save-modal .modal-header,
  #filter-save-modal .modal-body,
  #filter-save-modal .modal-footer,
  #filter-save-modal .form-group { box-sizing: border-box; }
  #filter-save-modal .input,
  #filter-save-modal .select { width: 100%; max-width: 100%; box-sizing: border-box; }
}

@layer components {
  /* Save Watchlist modal (scoped to modern design) */
  #inst-screen-save-modal.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #inst-screen-save-modal.modal-overlay.open { opacity: 1; visibility: visible; }
  #inst-screen-save-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
  #inst-screen-save-modal .modal-content {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: min(48rem, 96vw);
    padding: 1.5rem;
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }
  #inst-screen-save-modal.modal-overlay.open .modal-content,
  #inst-screen-save-modal[aria-hidden="false"] .modal-content { transform: scale(1); }
  #inst-screen-save-modal .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  #inst-screen-save-modal .modal-title { font-size: 1.25rem; font-weight: 600; color: #111827; }
  #inst-screen-save-modal .close-button { background: none; border: none; cursor: pointer; color: #6b7280; padding: 0.25rem; border-radius: 0.25rem; }
  #inst-screen-save-modal .close-button:hover { background-color: #f3f4f6; color: #111827; }
  #inst-screen-save-modal .modal-body { display: flex; flex-direction: column; gap: 1.25rem; max-width: 100%; overflow-x: hidden; }
  #inst-screen-save-modal .radio-group { display: flex; gap: 1rem; }
  #inst-screen-save-modal .radio-item { display: flex; align-items: center; gap: 0.5rem; }
  #inst-screen-save-modal .hidden { display: none; }
  #inst-screen-save-modal .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
  #inst-screen-save-modal .modal-content,
  #inst-screen-save-modal .modal-header,
  #inst-screen-save-modal .modal-body,
  #inst-screen-save-modal .modal-footer,
  #inst-screen-save-modal .form-group { box-sizing: border-box; }
  #inst-screen-save-modal .input,
  #inst-screen-save-modal .select { width: 100%; max-width: 100%; box-sizing: border-box; }
}

@layer components {
  /* Upload CRD List modal (scoped modern overlay) */
  #idb-upload-firms.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  #idb-upload-firms.modal-overlay.open { opacity: 1; visibility: visible; }
  #idb-upload-firms[aria-hidden="false"] { opacity: 1; visibility: visible; }
  /* Support either modern .modal-content or legacy direct child wrapper */
  #idb-upload-firms .modal-content,
  #idb-upload-firms > *:not(script) {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: min(44rem, 96vw);
    padding: 1.5rem;
    box-sizing: border-box;
  }
  #idb-upload-firms .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
  #idb-upload-firms .modal-title { font-size: 1.1rem; font-weight: 600; color: #111827; }
  #idb-upload-firms .modal-body { display: flex; flex-direction: column; gap: 12px; max-width: 100%; overflow-x: hidden; }
  #idb-upload-firms .input,
  #idb-upload-firms input[type=\"text\"], #idb-upload-firms input[type=\"file\"], #idb-upload-firms select { width: 100%; max-width: 100%; box-sizing: border-box; }
  #idb-upload-firms .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
  #idb-upload-firms .drop-zone {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: 8px; min-height: 180px; padding: 24px;
    border: 2px dashed var(--border); border-radius: 10px; background: var(--bg);
    color: var(--text); cursor: pointer;
  }
  #idb-upload-firms .drop-zone__icon { font-size: 28px; opacity: 0.85; }
  #idb-upload-firms .drop-zone__prompt { font-size: 12px; color: var(--muted); }
}

/* Generic legacy modal compatibility (etf-modal markup to modern look) */
@layer components {
  .etf-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px) saturate(120%);
    z-index: 1000;
  }
  .etf-modal[aria-hidden="false"] { display: flex !important; }

  .etf-modal-content {
    width: min(720px, 92vw);
    max-height: 86vh;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .etf-modal-header-light {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .etf-modal-header-light h3 { margin: 0; font-weight: 600; font-size: 16px; }
  .etf-modal-header-light .modal-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; }
  .etf-modal-header-light .modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

  .etf-modal-body { padding: 16px; overflow: auto; }

  /* Form controls inside legacy modals */
  .etf-modal-body input[type="text"],
  .etf-modal-body select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    box-sizing: border-box;
  }
  .etf-modal-body label { font-size: 12px; color: var(--muted); display: block; margin: 6px 0; }
  .etf-modal-body button,
  .etf-modal-body #m-submit-view,
  .etf-modal-body #m-submit-filter,
  .etf-modal-body #m-inst-submit-screen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
  }
  .etf-modal-body button:hover,
  .etf-modal-body #m-submit-view:hover,
  .etf-modal-body #m-submit-filter:hover,
  .etf-modal-body #m-inst-submit-screen:hover { filter: brightness(0.95); }

  /* Columns modal specific tweaks: allow larger canvas */
  #idb-view-columns-modal .etf-modal-content { width: min(900px, 96vw); }
  #idb-view-columns-modal .etf-modal-body { max-height: calc(86vh - 52px); }
  #idb-view-columns-modal .ag-theme-balham { height: 420px; }
}

/* Modern form patterns (reusable across modals) */
@layer components {
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-label { font-size: 12px; font-weight: 600; color: var(--muted); }

  .input,
  .select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  }
  .input:focus,
  .select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .btn-secondary:hover { filter: brightness(1.05); }
}
/* Control Toggles */
.dashboard-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  /* margin-bottom: var(--spacing-md); */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  grid-column: 1 / -1; /* own row below sparklines */
  grid-row: 2;
}

.data-switch-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: 22px;
  padding: 2px;
  gap: 4px;
  height: 28px;
  box-sizing: border-box;
  backdrop-filter: saturate(140%) blur(2px);
}

.data-switch-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.data-switch-toggle label {
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--toggle-label);
  cursor: pointer;
  border-radius: 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.data-switch-toggle input:checked + label {
  background: var(--accent);
  color: #fff;
}

.data-switch-toggle label:hover {
  background: rgba(0, 0, 0, 0.05);
}

.data-switch-toggle input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.data-switch-toggle label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Fund Navigator: tab-style view toggle */
#fund-nav-view-toggle {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
  padding: 0;
  height: auto;
  gap: 0;
}
#fund-nav-view-toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#fund-nav-view-toggle label {
  background: transparent !important;
  border-radius: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
#fund-nav-view-toggle input:checked + label {
  background: transparent !important;
  color: var(--text);
  border-bottom-color: var(--accent);
}
#fund-nav-view-toggle label:hover { background: transparent; color: var(--text); }
#fund-nav-view-toggle label.disabled { opacity: 0.4; cursor: not-allowed; }

/* Institutional Ownership / Filer Profile: tab-style view toggle */
#io-view-toggle {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
  padding: 0;
  height: auto;
  gap: 0;
}
#io-view-toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#io-view-toggle label {
  background: transparent !important;
  border-radius: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
#io-view-toggle input:checked + label {
  background: transparent !important;
  color: var(--text);
  border-bottom-color: var(--accent);
}
#io-view-toggle label:hover { background: transparent; color: var(--text); }

@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    line-height: 1.1;
    font-weight: 600;
    font-size: 12px;
  }

  /* Button sizes */
  .btn-sm { padding: 4px 8px; font-size: 11px; }
  .btn-md { padding: 6px 10px; font-size: 12px; } /* default */
  .btn-lg { padding: 8px 14px; font-size: 13px; }

  .btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
  }

  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .btn-primary:hover { background: var(--accent-weak); border-color: var(--accent-weak); }

  /* Success (alias for legacy .btn-positive) */
  .btn-success,
  .btn-positive { background: var(--success); border-color: var(--success); color: #0b0e13; }
  .btn-success:hover,
  .btn-positive:hover { filter: brightness(0.95); }

  /* Danger */
  .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
  .btn-danger:hover { filter: brightness(0.95); }

  /* Outline */
  .btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--accent);
  }
  .btn-outline:hover { background: rgba(9, 100, 160, 0.12); color: var(--text-strong, var(--text)); }

  /* Link button */
  .btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
    padding: 0;
  }
  .btn-link:hover { text-decoration: underline; }

  .btn-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

  /* Toolbar */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    /* border-radius: var(--radius); */
  }
  .toolbar-item { display: inline-flex; align-items: center; gap: 6px; }

  /* Section toggle (caret rotate) */
  .section-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
  .section-toggle .rotate { transition: transform var(--transition); }
  .section-toggle.is-open .rotate { transform: rotate(90deg); }

  /* Custom dropdown */
  .custom-dropdown {
    position: relative;
    min-width: 220px;
  }
  .custom-dropdown .dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    min-height: 28px;
    min-width: 220px;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .custom-dropdown .dropdown-selected:hover {
    border-color: var(--accent);
  }
  .custom-dropdown .dropdown-selected::after {
    content: '';
    border: solid var(--muted);
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: auto;
    flex-shrink: 0;
  }
  .custom-dropdown.open .dropdown-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.2);
  }
  .custom-dropdown.open .dropdown-selected::after {
    transform: rotate(-135deg);
  }
  .custom-dropdown .dropdown-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    max-height: 280px;
    overflow: auto;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: none;
    padding: 4px;
  }
  .custom-dropdown.open .dropdown-options {
    display: block;
  }
  .custom-dropdown .dropdown-option-header {
    padding: 8px 10px 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    background: transparent;
  }
  .custom-dropdown .dropdown-option {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: var(--radius);
    transition: background-color 100ms ease, color 100ms ease;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .custom-dropdown .dropdown-option:hover,
  .custom-dropdown .dropdown-option:focus {
    background: var(--accent);
    color: #ffffff;
    outline: none;
  }
  .custom-dropdown .dropdown-option:hover .delete-icon,
  .custom-dropdown .dropdown-option:focus .delete-icon {
    color: rgba(255, 255, 255, 0.7);
  }
  .custom-dropdown .delete-icon {
    margin-left: auto;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .custom-dropdown .delete-icon:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
  }

  /* Light theme dropdown overrides (page-header, toolbar) */
  .page-header .custom-dropdown .dropdown-selected,
  .toolbar .custom-dropdown .dropdown-selected {
    border-color: #D1D5DB;
    background: #ffffff;
    color: #374151;
  }
  .page-header .custom-dropdown .dropdown-selected:hover,
  .toolbar .custom-dropdown .dropdown-selected:hover {
    border-color: #1C98D4;
  }
  .page-header .custom-dropdown.open .dropdown-selected,
  .toolbar .custom-dropdown.open .dropdown-selected {
    border-color: #1C98D4;
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .page-header .custom-dropdown .dropdown-selected::after,
  .toolbar .custom-dropdown .dropdown-selected::after {
    border-color: #6B7280;
  }
  .page-header .custom-dropdown .dropdown-options,
  .toolbar .custom-dropdown .dropdown-options {
    background: #ffffff;
    color: #374151;
    border-color: #E5E7EB;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
  .page-header .custom-dropdown .dropdown-option-header,
  .toolbar .custom-dropdown .dropdown-option-header {
    color: #6B7280;
    border-color: #E5E7EB;
  }
  .page-header .custom-dropdown .dropdown-option,
  .toolbar .custom-dropdown .dropdown-option {
    color: #374151;
  }
  .page-header .custom-dropdown .dropdown-option:hover,
  .toolbar .custom-dropdown .dropdown-option:hover {
    background: #0964A0;
    color: #ffffff;
  }

  /* =========================================================================
   * Country Selector - Custom searchable dropdown with flags
   * ========================================================================= */
  .country-selector {
    position: relative;
    min-width: 160px;
  }
  .country-selector--compact {
    min-width: auto;
  }
  .country-selector--compact .country-selector__trigger {
    padding: 4px 8px;
  }
  .country-selector--compact .country-selector__label {
    font-weight: 600;
    font-size: 12px;
  }
  .country-selector__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius);
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    font-size: 12px;
    min-height: 28px;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .country-selector__trigger:hover {
    border-color: var(--accent);
  }
  .country-selector.is-open .country-selector__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .country-selector__flag.fi {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  }
  .country-selector__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .country-selector__chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6B7280;
    transition: transform var(--transition);
    flex-shrink: 0;
  }
  .country-selector.is-open .country-selector__chevron {
    transform: rotate(180deg);
  }

  /* Dropdown panel */
  .country-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1000;
    min-width: 220px;
    max-height: 320px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    overflow: hidden;
  }
  .country-selector.is-open .country-selector__dropdown {
    display: block;
  }

  /* Search input */
  .country-selector__search {
    padding: 8px;
    border-bottom: 1px solid #E5E7EB;
  }
  .country-selector__search-input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius);
    font-size: 12px;
    background: #F9FAFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E") 8px center / 14px 14px no-repeat;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .country-selector__search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .country-selector__search-input::placeholder {
    color: #9CA3AF;
  }

  /* Options list */
  .country-selector__options {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
  }
  .country-selector__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: background var(--transition);
  }
  .country-selector__option:hover {
    background: #F3F4F6;
  }
  .country-selector__option.is-selected {
    background: rgba(9, 100, 160, 0.08);
  }
  .country-selector__option.is-selected:hover {
    background: rgba(9, 100, 160, 0.12);
  }
  .country-selector__option-flag.fi {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  }
  .country-selector__option-text {
    flex: 1;
    font-size: 13px;
    color: #374151;
  }
  .country-selector__option-code {
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 500;
  }
  .country-selector__option.is-selected .country-selector__option-text {
    font-weight: 600;
    color: var(--accent);
  }
  .country-selector__option.is-hidden {
    display: none;
  }

  /* No results message */
  .country-selector__no-results {
    padding: 16px;
    text-align: center;
    color: #9CA3AF;
    font-size: 12px;
    display: none;
  }
  .country-selector__options:empty + .country-selector__no-results,
  .country-selector__options.has-no-visible + .country-selector__no-results {
    display: block;
  }

  /* =========================================================================
   * Currency Selector - Custom searchable dropdown with flags
   * ========================================================================= */
  .currency-selector {
    position: relative;
    min-width: 130px;
  }
  .currency-selector__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .currency-selector__trigger:hover {
    border-color: var(--accent);
  }
  .currency-selector.is-open .currency-selector__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .currency-selector__flag.fi {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  }
  .currency-selector__label {
    flex: 1;
    white-space: nowrap;
    font-weight: 500;
  }
  .currency-selector__chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #9CA3AF;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .currency-selector.is-open .currency-selector__chevron {
    transform: rotate(180deg);
  }

  /* Dropdown panel */
  .currency-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    display: none;
    overflow: hidden;
  }
  .currency-selector.is-open .currency-selector__dropdown {
    display: block;
  }

  /* Search input */
  .currency-selector__search {
    padding: 8px;
    border-bottom: 1px solid #E5E7EB;
  }
  .currency-selector__search-input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 8px center no-repeat;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .currency-selector__search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .currency-selector__search-input::placeholder {
    color: #9CA3AF;
  }

  /* Options list */
  .currency-selector__options {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
  }
  .currency-selector__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition);
  }
  .currency-selector__option:hover {
    background: #F3F4F6;
  }
  .currency-selector__option.is-selected {
    background: rgba(9, 100, 160, 0.08);
  }
  .currency-selector__option.is-selected:hover {
    background: rgba(9, 100, 160, 0.12);
  }
  .currency-selector__option-flag.fi {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  }
  .currency-selector__option-text {
    flex: 1;
    font-size: 13px;
    color: #374151;
  }
  .currency-selector__option-code {
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 500;
  }
  .currency-selector__option.is-selected .currency-selector__option-text {
    font-weight: 600;
    color: var(--accent);
  }
  .currency-selector__option.is-hidden {
    display: none;
  }

  /* No results message */
  .currency-selector__no-results {
    padding: 16px;
    text-align: center;
    color: #9CA3AF;
    font-size: 12px;
    display: none;
  }
  .currency-selector__options:empty + .currency-selector__no-results,
  .currency-selector__options.has-no-visible + .currency-selector__no-results {
    display: block;
  }

  /* Disabled state */
  .control-item.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* =========================================================================
   * Watchlist Content Panel — overlays the grid area
   * ========================================================================= */
  #v2-etf-database { position: relative; }
  .v2-wl-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    border: 1px solid #D1D5DB;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* ── Panel header / toolbar ── */
  .v2-wl-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
  }
  .v2-wl-panel__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .v2-wl-panel__title i { color: #6B7280; font-size: 13px; }
  .v2-wl-panel__actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
  }
  .v2-wl-panel__close {
    background: none;
    border: none;
    font-size: 14px;
    color: #9CA3AF;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background .12s, color .12s;
  }
  .v2-wl-panel__close:hover { background: #F3F4F6; color: #374151; }

  /* ── Panel body (sidebar + detail) ── */
  .v2-wl-panel__body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    overflow: hidden;
  }
  .v2-wl-panel__sidebar {
    border-right: 1px solid #E5E7EB;
    overflow-y: auto;
    padding: 8px;
    background: #FAFAFA;
  }
  .v2-wl-panel__sidebar::-webkit-scrollbar { width: 4px; }
  .v2-wl-panel__sidebar::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
  .v2-wl-panel__detail {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .v2-wl-panel__empty {
    text-align: center;
    padding: 48px 24px;
    color: #9CA3AF;
    font-size: 13px;
  }

  /* ── Sidebar empty state ── */
  .v2-wl-sidebar__empty {
    text-align: center;
    padding: 32px 16px;
    color: #9CA3AF;
  }
  .v2-wl-sidebar__empty i { font-size: 28px; margin-bottom: 8px; display: block; }
  .v2-wl-sidebar__empty p { font-size: 13px; font-weight: 500; color: #6B7280; margin: 0 0 2px; }
  .v2-wl-sidebar__empty span { font-size: 11px; }

  /* ── Watchlist sidebar cards ── */
  .v2-wl-card {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    position: relative;
  }
  .v2-wl-card:hover {
    background: #F3F4F6;
  }
  .v2-wl-card--active {
    border-color: #0964a0;
    background: rgba(9,100,160,0.05);
  }
  .v2-wl-card--active:hover {
    background: rgba(9,100,160,0.07);
  }
  .v2-wl-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-wl-card__info { flex: 1; min-width: 0; }
  .v2-wl-card__name {
    font-size: 12.5px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .v2-wl-card__meta {
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 1px;
  }
  .v2-wl-card__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
  }
  .v2-wl-card:hover .v2-wl-card__actions,
  .v2-wl-card--active .v2-wl-card__actions { opacity: 1; }
  .v2-wl-card__btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: #6B7280;
    transition: background .12s, color .12s;
  }
  .v2-wl-card__btn:hover { background: #E5E7EB; color: #111827; }
  .v2-wl-card__btn--apply:hover { background: #DBEAFE; color: #1D4ED8; }
  .v2-wl-card__btn--delete:hover { background: #FEE2E2; color: #DC2626; }

  /* ── Detail pane ── */
  .v2-wl-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #F3F4F6;
    flex-shrink: 0;
  }
  .v2-wl-detail__name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
  }
  .v2-wl-detail__status {
    font-size: 11px;
    color: #9CA3AF;
  }
  .v2-wl-detail__grid-wrap {
    flex: 1;
    overflow: hidden;
  }

  /* Panel toolbar buttons */
  .v2-wl-panel__actions .v2-btn-sm {
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
  }
  .v2-wl-panel__actions .v2-btn-sm:hover { background: #F3F4F6; border-color: #9CA3AF; }
  .v2-wl-panel__actions .v2-btn-sm i { font-size: 11px; }
  .dark-theme .v2-wl-panel__actions .v2-btn-sm {
    background: #1a2030;
    border-color: #1e2433;
    color: #8b92a5;
  }
  .dark-theme .v2-wl-panel__actions .v2-btn-sm:hover {
    background: #232b3b;
    border-color: #334155;
    color: #e6e9f0;
  }
  .v2-wl-btn--apply {
    margin-left: auto;
    background: var(--accent, #0964a0) !important;
    color: #fff !important;
    border-color: var(--accent, #0964a0) !important;
  }
  .v2-wl-btn--apply:hover {
    background: var(--accent-hover, #07537e) !important;
    border-color: var(--accent-hover, #07537e) !important;
  }

  /* =========================================================================
   * Global Settings Drawer — slides in from right
   * ========================================================================= */
  .v2-settings-drawer {
    position: fixed;
    top: var(--header-h, 48px);
    right: 0;
    width: 360px;
    bottom: 0;
    z-index: 1100;
    background: #fff;
    border-left: 1px solid var(--border, #e5e7eb);
    box-shadow: -4px 0 24px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .v2-settings-drawer.is-open {
    transform: translateX(0);
    display: flex !important;
  }
  .v2-settings-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .v2-settings-drawer__header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-settings-drawer__close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .v2-settings-drawer__close:hover { background: rgba(0,0,0,0.06); }
  .v2-settings-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
  }
  .v2-settings-section { margin-bottom: 24px; }
  .v2-settings-section__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted, #6b7280);
    margin: 0 0 10px 0;
  }
  .v2-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
  }
  .v2-settings-row__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #374151);
  }
  .v2-settings-theme-toggle {
    display: flex;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
  }
  .v2-settings-theme-toggle__option {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted, #6b7280);
    background: var(--bg-secondary, #f9fafb);
  }
  .v2-settings-theme-toggle__option:not(:last-child) {
    border-right: 1px solid var(--border, #e5e7eb);
  }
  .v2-settings-theme-toggle__option.is-active {
    background: var(--accent, #0964a0);
    color: #fff;
  }

  /* Chart panel + loader */
  .chart-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); position: relative; }
  .component-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
    background-size: 400% 100%;
    animation: loader-shimmer 1.4s ease infinite;
    border-radius: var(--radius);
  }
  .component-loader::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px; /* center without transform to avoid stacking issues */
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--text);
    animation: loader-rotate 0.8s linear infinite;
  }
  @keyframes loader-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @keyframes loader-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  /* Titles */
  .title-text { font-size: 12px; font-weight: 600; color: var(--text); }

  /* Viewport-filling pane: first row auto (toolbar), second row grows */
  .viewport-pane {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
  }

  /* Page-level grid: toolbar, optional charts, then growing content */
  .page-grid {
    display: grid;
    grid-template-rows: auto 1fr; /* default: 2 rows (charts hidden) */
    /* gap: 8px; */
    height: 100%;
    min-height: 0;
  }
  .page-grid.is-charts-open {
    grid-template-rows: auto auto 1fr; /* charts visible: 3 rows */
  }

  /* Charts grid: 1 column mobile; 2 columns on large screens (50/50) */
  .fund-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  @media (min-width: 1024px) {
    .fund-charts { grid-template-columns: 1fr 1fr; }
  }
  .fund-chart-full { grid-column: 1 / -1; }

  /* Chart section controls row */
  .fund-chart-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 8px; }

  /* AG Grid theme variables */
  .ag-theme-balham {
    --ag-background-color: var(--card-bg);
    --ag-foreground-color: var(--text);
    --ag-border-color: var(--card-border);
    --ag-header-background-color: var(--bg-elev);
    --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
    --ag-row-hover-color: rgba(255, 255, 255, 0.05);
  }
  .ag-theme-balham, .ag-theme-balham .ag-root-wrapper, .ag-root-wrapper-body, .ag-center-cols-viewport {
    width: 100%;
  }

  /* Fund Navigator scoped variables */
  #fund-nav {
    --accent: #0964A0;
    --accent-weak: #2B82B6;
    --toggle-bg: rgba(173, 173, 173, 0.2);
    --toggle-border: #ADADAD;
    --toggle-label: #424242;
    height: 100%;
    min-height: 0;
  }
}

@layer utilities {
  /* Spacing */
  .p-0 { padding: 0; }
  .p-sm { padding: 8px; }
  .p-md { padding: 16px; }
  .p-lg { padding: 24px; }
  .px-sm { padding-left: 8px; padding-right: 8px; }
  .px-md { padding-left: 16px; padding-right: 16px; }
  .px-lg { padding-left: 24px; padding-right: 24px; }
  .mx-sm { margin-left: 8px; margin-right: 8px; }
  .mx-md { margin-left: 16px; margin-right: 16px; }
  .mx-lg { margin-left: 24px; margin-right: 24px; }
  .mb-sm { margin-bottom: 8px; }
  .mb-md { margin-bottom: 16px; }
  .mb-lg { margin-bottom: 24px; }
  .mt-sm { margin-top: 8px; }
  .mt-md { margin-top: 16px; }
  .mt-lg { margin-top: 24px; }

  /* Typography */
  .text-xs { font-size: 12px; }
  .font-bold { font-weight: 700; }
  .text-center { text-align: center; }

  /* Layout */
  .w-100 { width: 100%; }
  .ml-auto { margin-left: auto; }

  /* Surfaces */
  .bg-card { background: var(--card-bg); }
  .border { border: 1px solid var(--card-border); }
  .rounded-md { border-radius: var(--radius); }

  /* Heights */
  .h-500 { height: 500px; }
  .h-750 { height: 750px; }
  .h-100 { height: 100%; }
  .max-h-550 { max-height: 550px; }
  .max-h-800 { max-height: 800px; }

  /* Display and alignment */
  .d-flex { display: flex; }
  .items-center { align-items: center; }
  .inline-block { display: inline-block; }
  .w-auto { width: auto; }
  .va-middle { vertical-align: middle; }
  .cursor-pointer { cursor: pointer; }
  .pos-rel { position: relative; }

  /* More spacing utilities */
  .pt-sm { padding-top: 8px; }
  .pr-sm { padding-right: 8px; }
  .ml-sm { margin-left: 8px; }
  .m-auto { margin: auto; }
  .min-h-0 { min-height: 0; }
  .hidden { display: none !important; }

  /* Flex utilities */
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }
  .flex-col { flex-direction: column; }
  .flex-row { flex-direction: row; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .gap-2 { gap: 8px; }
  .gap-3 { gap: 12px; }
  .gap-4 { gap: 16px; }
  .space-x-2 > *:not(:first-child) { margin-left: 8px; }
}

/* ============================================
   PAGE HEADER COMPONENT
   Modern card-based header for database pages
   ============================================ */
@layer components {
  /* Primary header container */
  .page-header {
    display: block !important;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(173, 173, 173, 0.4);
    padding: 10px 12px;
    margin-bottom: 6px;
  }

  /* Controls row - flex container for all controls */
  .controls-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
  }
  @media (min-width: 1024px) {
    .controls-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
  }

  /* Control groups - logical groupings of related controls */
  .control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  @media (min-width: 768px) {
    .control-group { gap: 8px 12px; }
  }

  /* Individual control item (label + input + button) */
  .control-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Control labels */
  .control-label {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  @media (max-width: 899px) {
    .control-label { display: none; }
  }
  .control-label.always-show { display: block; }

  /* Styled select inputs */
  .control-select {
    padding: 4px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-size: 12px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 26px;
  }
  .control-select:focus {
    outline: none;
    border-color: #1C98D4;
    box-shadow: 0 0 0 1px rgba(28, 152, 212, 0.2);
  }
  .control-select.w-xs { width: 64px; }
  .control-select.w-sm { width: 120px; }
  .control-select.w-md { width: 150px; }
  .control-select.w-lg { width: 180px; }

  /* Primary action button (bright blue) */
  .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    background: #1C98D4;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease;
    white-space: nowrap;
    height: 26px;
  }
  .btn-action:hover { background: #0964A0; }
  .btn-action:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(28, 152, 212, 0.3);
  }
  .btn-action svg { width: 14px; height: 14px; }
  .btn-action .btn-text { margin-left: 2px; }
  @media (max-width: 1199px) {
    .btn-action .btn-text { display: none; }
  }

  /* Utility button (gray background) */
  .btn-utility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 11px;
    color: #4B5563;
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease;
    height: 26px;
    width: 26px;
  }
  .btn-utility:hover { background: #E5E7EB; }
  .btn-utility:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.2);
    border-color: rgba(9, 100, 160, 0.5);
  }
  .btn-utility svg { width: 14px; height: 14px; }

  /* Utility button with text label */
  .btn-utility--labeled {
    width: auto;
    gap: 5px;
    padding: 5px 10px;
    font-weight: 500;
    white-space: nowrap;
  }
  .btn-utility--labeled span { font-size: 12px; }

  /* Compact page header variant */
  .page-header--compact {
    padding: 6px 12px;
    margin-bottom: 4px;
  }
  .page-header--compact .controls-row {
    margin-bottom: 0;
  }

  /* Inline separator (vertical line between control groups) */
  .controls-row__separator {
    width: 1px;
    height: 20px;
    background: #E5E7EB;
    flex-shrink: 0;
  }

  /* Grid utilities group with separator */
  .grid-utils {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  @media (min-width: 1024px) {
    .grid-utils {
      padding-left: 10px;
      margin-left: 6px;
      border-left: 1px solid #E5E7EB;
    }
  }

  /* Separator between control groups */
  .control-separator {
    display: flex;
  }
  @media (min-width: 1024px) {
    .control-separator {
      padding-right: 10px;
      margin-right: 2px;
      border-right: 1px solid #E5E7EB;
    }
  }

  /* Mobile: stack controls vertically */
  @media (max-width: 767px) {
    .controls-row {
      gap: 6px;
    }
    .control-group {
      width: 100%;
      justify-content: flex-start;
    }
    .control-item {
      flex: 1 1 auto;
      min-width: 0;
    }
    .control-select {
      flex: 1;
      min-width: 0;
    }
    .control-separator {
      padding-right: 0;
      margin-right: 0;
      border-right: none;
      padding-bottom: 6px;
      margin-bottom: 2px;
      border-bottom: 1px solid #E5E7EB;
      width: 100%;
    }
    .grid-utils {
      padding-left: 0;
      margin-left: 0;
      border-left: none;
      padding-top: 6px;
      border-top: 1px solid #E5E7EB;
      width: 100%;
      justify-content: flex-end;
    }
  }
}

/* ============================================
   SUMMARY GRID COMPONENT
   Metrics display in card format
   ============================================ */
@layer components {
  .summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
    padding-top: 8px;
    border-top: 1px solid #E5E7EB;
  }
  @media (min-width: 768px) {
    .summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  .summary-card {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 4px 8px;
  }

  .summary-card__label {
    font-size: 9px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .summary-card__value {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    line-height: 1.3;
    margin: 0;
  }
  .summary-card__value.text-accent { color: #0964A0; }

  /* Mobile: show 2 columns */
  @media (max-width: 479px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-card__label { font-size: 8px; }
    .summary-card__value { font-size: 13px; }
  }
}

/* ============================================
   DISCLOSURE BAR COMPONENT
   ============================================ */
@layer components {
  .disclosure-bar {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid #E5E7EB;
  }

  .disclosure-bar__text {
    font-size: 10px;
    color: #9CA3AF;
    margin: 0;
    line-height: 1.4;
  }

  .disclosure-bar__text strong {
    color: #6B7280;
    font-weight: 600;
  }

  /* Grid container for ag-grid tables */
  .grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .grid-container > .viewport-pane {
    flex: 1;
    min-height: 0;
  }

  /* Ensure page-grid children maintain proper box model */
  .page-grid > .grid-container {
    display: flex !important;
  }
}

/* ============================================
   FILER PROFILE PAGE STYLES
   ============================================ */
@layer components {
  /* Filer profile frame - tab-based layout using CSS Grid */
  /* Row 1: Search toolbar, Row 2: Tab toggle, Row 3: Tab content */
  .filer-profile-frame {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  /* Tab content panels - HIDDEN by default, occupy third row */
  #filer-profile > #io-profile-chart-cont,
  #filer-profile > #filer-profile-table-cont {
    grid-row: 3;
    display: none !important;
  }
  /* Active Charts tab - scrollable content, constrained to grid row */
  #filer-profile > #io-profile-chart-cont.active {
    /* display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px;
    box-sizing: border-box; */
    display: grid !important;
    grid-template-rows: auto 1fr;
  }
  /* Active Table tab - grid layout for toolbar + ag-grid */
  #filer-profile > #filer-profile-table-cont.active {
    display: grid !important;
    grid-template-rows: auto 1fr;
  }
  .filer-profile-frame #instOwnGrid {
    min-height: 400px;
  }

  /* Filer name display */
  .filer-name-display {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    padding: 4px 8px;
    background: #F3F4F6;
    border-radius: 4px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filer-name-display:empty {
    display: none;
  }

  /* Chart toggle button styling */
  .section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 5px 10px;
  }
  .section-toggle .rotate {
    transition: transform 0.2s ease;
    font-size: 12px;
  }
  .section-toggle.is-open .rotate {
    transform: rotate(90deg);
  }

  /* Charts section */
  .filer-charts-section {
    padding: 12px;
    background: #F9FAFB;
    overflow-y: auto;
  }

  /* Profile top row: Profile card + Bar chart side by side */
  .profile-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 1024px) {
    .profile-top-row {
      grid-template-columns: 1fr;
    }
  }

  /* Profile card */
  .profile-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
  }

  .profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
  }
  @media (max-width: 767px) {
    .profile-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 479px) {
    .profile-grid {
      grid-template-columns: 1fr;
    }
  }

  .profile-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .profile-item label {
    font-size: 10px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .profile-item p {
    font-size: 13px;
    font-weight: 500;
    color: #1F2937;
    margin: 0;
    word-break: break-word;
  }
  .profile-item-wide {
    grid-column: span 2;
  }
  .profile-item-full {
    grid-column: 1 / -1;
  }
  @media (max-width: 479px) {
    .profile-item-wide {
      grid-column: span 1;
    }
  }

  .profile-disclaimer {
    font-size: 10px;
    color: #9CA3AF;
    font-style: italic;
    margin: 12px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
  }

  /* Chart panel wrapper */
  .chart-panel-wrapper {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px;
  }

  /* Top trades grid (buys/sells side by side) */
  .top-trades-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 767px) {
    .top-trades-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Autocomplete input styling */
  .etf-autocomplete-new {
    display: inline-flex;
    position: relative;
  }
  .etf-autocomplete-new .etf-auto-input {
    width: 220px;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .etf-autocomplete-new .etf-auto-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  }
  .etf-autocomplete-new .etf-auto-input::placeholder {
    color: var(--muted);
  }
  /* Page header context */
  .page-header .etf-autocomplete-new .etf-auto-input {
    width: 200px;
  }
  /* Toolbar context */
  .toolbar .etf-autocomplete-new .etf-auto-input {
    width: 250px;
  }
  @media (max-width: 767px) {
    .etf-autocomplete-new .etf-auto-input,
    .page-header .etf-autocomplete-new .etf-auto-input,
    .toolbar .etf-autocomplete-new .etf-auto-input {
      width: 180px;
    }
  }

  /* Autocomplete dropdown items */
  .etf-autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
  }
  .etf-autocomplete-items div {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
  }
  .etf-autocomplete-items div:last-child {
    border-bottom: none;
  }
  .etf-autocomplete-items div:hover {
    background: var(--hover-bg);
  }
  .autocomplete-active {
    background: var(--accent) !important;
    color: #fff !important;
  }
}

/* ============================================
   V2 CARD COMPONENT
   Reusable card architecture for dashboard metrics
   ============================================ */
@layer components {
  /* Card container */
  .v2-card {
    background: var(--v2-bg-surface, #ffffff);
    border: 1px solid var(--v2-border, #E5E7EB);
    border-radius: 8px;
    box-shadow: var(--v2-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Card header */
  .v2-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--v2-border, #E5E7EB);
    background: var(--v2-bg-elevated, #F9FAFB);
    gap: 12px;
    flex-shrink: 0;
  }

  .v2-card__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .v2-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text-primary, #1F2937);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .v2-card__subtitle {
    font-size: 11px;
    color: var(--v2-text-muted, #6B7280);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .v2-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Card body */
  .v2-card__body {
    padding: 0;
    position: relative;
    min-height: 320px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* View containers inside card body */
  .v2-view {
    width: 100%;
    height: 100%;
    min-height: 320px;
    position: relative;
  }

  .v2-view.is-hidden {
    display: none !important;
  }

  .v2-view--chart {
    padding: 8px;
  }

  .v2-view--grid {
    padding: 0;
  }

  .v2-view--grid .ag-theme-balham {
    height: 100%;
    min-height: 320px;
  }

  /* Segmented toggle button group */
  .v2-segToggle {
    display: inline-flex;
    align-items: center;
    background: var(--v2-bg-elevated, #F3F4F6);
    border: 1px solid var(--v2-border, #D1D5DB);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
  }

  .v2-segToggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-text-secondary, #4B5563);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
  }

  .v2-segToggle__btn:hover {
    background: var(--v2-bg-hover, #E5E7EB);
    color: var(--v2-text-primary, #1F2937);
  }

  .v2-segToggle__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .v2-segToggle__btn.is-active,
  .v2-segToggle__btn[aria-pressed="true"] {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .v2-segToggle__btn.is-active:hover,
  .v2-segToggle__btn[aria-pressed="true"]:hover {
    background: var(--accent-weak);
  }

  .v2-segToggle__btn i {
    font-size: 10px;
  }

  /* Card grid layouts */
  .v2-card-grid {
    display: grid;
    gap: 16px;
    padding: 16px;
  }

  .v2-card-grid--2col {
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .v2-card-grid--2col {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .v2-card-grid--3col {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .v2-card-grid--3col {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .v2-card-grid--3col {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .v2-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    .v2-card-grid--4col {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .v2-card--full-width {
    grid-column: 1 / -1;
  }

  /* Fund Navigator page container */
  #v2-fund-navigator {
    height: 100%;
    overflow: hidden;
    background: #F3F4F6;
  }

  .v2-fund-nav-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .v2-fund-nav-header {
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
  }

  .v2-fund-nav-header__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .v2-fund-nav-header__title h1 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
  }

  .v2-fund-nav-header__title p {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
  }

  .v2-fund-nav-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .v2-fund-nav-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  /* Fund Navigator toolbar (toggle + nav buttons) */
  .fn-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
    gap: 12px;
  }
  .fn-toolbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .fn-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fn-row-count {
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
  }
  .dark-theme .fn-toolbar { background: #111520; border-color: #1e2433; }
  .dark-theme .fn-row-count { color: #8b92a5; }

  /* Column-group toggle pills */
  .fn-toggle {
    display: inline-flex;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    overflow: hidden;
  }
  .fn-toggle__btn {
    background: #fff;
    border: none;
    border-right: 1px solid #D1D5DB;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .fn-toggle__btn:last-child { border-right: none; }
  .fn-toggle__btn:hover { background: #F3F4F6; color: #374151; }
  .fn-toggle__btn--active {
    background: #4F46E5;
    color: #fff;
  }
  .fn-toggle__btn--active:hover {
    background: #4338CA;
    color: #fff;
  }

  /* Deep Dive navigation buttons */
  .fn-nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    text-transform: uppercase;
    margin-right: 2px;
  }
  .fn-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .fn-nav-btn i { font-size: 11px; color: #6366F1; }
  .fn-nav-btn:hover {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #4338CA;
  }

  .fn-universe-bar {
    flex-shrink: 0;
    border-bottom: 1px solid #E5E7EB;
  }
  .fn-universe-bar:empty { display: none; }

  .fn-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Card loading state */
  .v2-card__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: #6B7280;
    gap: 12px;
  }

  .v2-card__loading i {
    font-size: 24px;
    color: var(--accent);
  }
}

/* ============================================
   V2 SECURITY LOOKUP TOOL STYLES
   Scoped styles for Security Lookup dashboard
   ============================================ */
/* Security Lookup pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-security-lookup.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}

@layer components {
  .v2-sec-lookup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 40px;
  }

  /* Cards inside Security Lookup should shrink-wrap their content,
     not stretch to fill the viewport like explorer-style cards */
  .v2-sec-lookup .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* Header */
  .v2-sec-lookup__header {
    margin-bottom: 4px;
  }
  .v2-sec-lookup__header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #1F2937);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-sec-lookup__header h1 i {
    color: var(--accent, #0964A0);
    font-size: 20px;
  }
  .v2-sec-lookup__header p {
    font-size: 13px;
    color: var(--muted, #6B7280);
    margin: 4px 0 0;
  }

  /* Input row */
  .v2-sec-lookup__input-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg, #f7f9fc);
    min-height: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color 0.15s;
  }
  .v2-sec-lookup__input-row:focus-within {
    border-color: var(--accent, #0964A0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .v2-sec-lookup__input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text, #1F2937);
    flex: 1;
    min-width: 140px;
    padding: 4px 0;
  }
  .v2-sec-lookup__input::placeholder {
    color: var(--muted, #9CA3AF);
  }

  /* Chips */
  .v2-sec-lookup__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .v2-sec-lookup__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent, #0964A0) 12%, transparent);
    color: var(--accent, #0964A0);
    white-space: nowrap;
  }
  .v2-sec-lookup__chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted, #6B7280);
    padding: 0 2px;
    font-size: 10px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.1s;
  }
  .v2-sec-lookup__chip-remove:hover {
    color: var(--danger, #DC2626);
  }

  /* AutocompleteV2 inside chip input rows */
  .v2-sec-lookup__input-row .v2-autocomplete {
    position: relative;
    flex: 1;
    min-width: 140px;
    border: none;
    padding: 0;
    background: transparent;
  }
  .v2-sec-lookup__input-row .v2-auto-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 13px;
    color: var(--text, #1F2937);
    padding: 4px 0;
    width: 100%;
    min-width: 100px;
  }
  .v2-sec-lookup__input-row .v2-auto-input::placeholder {
    color: var(--muted, #9CA3AF);
  }

  /* Earnings fund autocomplete inline */
  .v2-earnings__control-group .v2-autocomplete {
    flex: 1;
    position: relative;
  }
  .v2-earnings__control-group .v2-auto-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border, #D1D5DB);
    border-radius: 6px;
    background: var(--bg, #f7f9fc);
    color: var(--text, #1F2937);
  }
  .v2-earnings__control-group .v2-auto-input:focus {
    border-color: var(--accent, #0964A0);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }

  /* Quick picks */
  .v2-sec-lookup__quick-picks {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .v2-sec-lookup__quick-label {
    font-size: 11px;
    color: var(--muted, #6B7280);
    font-weight: 600;
  }
  .v2-sec-lookup__quick-btn {
    background: var(--bg-elev, #ffffff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--text, #1F2937);
    cursor: pointer;
    transition: all 0.12s;
  }
  .v2-sec-lookup__quick-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent, #0964A0);
    color: var(--accent, #0964A0);
  }

  /* KPI Row */
  .v2-sec-lookup__kpi-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .v2-sec-lookup__kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elev, #ffffff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 12px 16px;
    flex: 1;
    min-width: 160px;
  }
  .v2-sec-lookup__kpi-icon {
    font-size: 18px;
    color: var(--accent, #0964A0);
    opacity: 0.8;
  }
  .v2-sec-lookup__kpi-content {
    display: flex;
    flex-direction: column;
  }
  .v2-sec-lookup__kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #1F2937);
    line-height: 1.2;
  }
  .v2-sec-lookup__kpi-label {
    font-size: 11px;
    color: var(--muted, #6B7280);
    margin-top: 2px;
  }

  /* Exposure progress bar (in AG Grid cell) */
  .v2-sec-lookup__exposure-track {
    width: 80px;
    height: 6px;
    background: var(--border, #E5E7EB);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .v2-sec-lookup__exposure-fill {
    height: 100%;
    background: var(--accent, #0964A0);
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  /* Portfolio Weight Widget — vertical list of ticker weight ranges */
  .v2-wt-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .v2-wt-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .v2-wt-item__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .v2-wt-item__ticker {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #1F2937);
  }
  .v2-wt-item__avg {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent, #0964A0);
  }
  .v2-wt-item__avg-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted, #6B7280);
  }
  .v2-wt-item__track {
    position: relative;
    height: 6px;
    background: var(--border, #E5E7EB);
    border-radius: 3px;
    margin: 2px 0;
  }
  .v2-wt-item__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: color-mix(in srgb, var(--accent, #0964A0) 35%, transparent);
    border-radius: 3px;
  }
  .v2-wt-item__marker--avg {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--accent, #0964A0);
    border: 2px solid var(--bg-elev, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-shadow: 0 0 0 1px var(--accent, #0964A0);
  }
  .v2-wt-item__labels {
    display: flex;
    justify-content: space-between;
  }
  .v2-wt-item__label {
    font-size: 10px;
    color: var(--muted, #6B7280);
  }

  /* Responsive: stack KPIs on narrow screens */
  @media (max-width: 768px) {
    .v2-sec-lookup {
      padding: 12px 12px 32px;
    }
    .v2-sec-lookup__kpi-row {
      flex-direction: column;
    }
    .v2-sec-lookup__kpi {
      min-width: unset;
    }
  }
}

/* ============================================
   V2 FUND OVERLAP TOOL STYLES
   Scoped styles for Fund Overlap dashboard
   ============================================ */
/* Fund Overlap pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-fund-overlap.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}
@layer components {
  .v2-overlap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 40px;
  }

  /* Header */
  .v2-overlap__header {
    margin-bottom: 4px;
  }
  .v2-overlap__header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-overlap__header h1 i {
    color: var(--accent, #0964A0);
    font-size: 20px;
  }
  .v2-overlap__header p {
    font-size: 13px;
    color: var(--muted, #6B7280);
    margin: 0;
  }

  /* Card body shrink-wrap inside overlap tool */
  .v2-overlap .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* Allow the autocomplete dropdown to escape the card */
  #overlap-input-card {
    overflow: visible !important;
    position: relative;
    z-index: 10;
  }
  #overlap-input-card > .v2-card__body {
    overflow: visible !important;
  }

  /* Small grid helper — tighter rows for matrix */
  .small-grid .ag-row {
    line-height: 1.3;
  }

  /* Responsive: stack KPIs on narrow screens */
  @media (max-width: 768px) {
    .v2-overlap {
      padding: 12px 12px 32px;
    }
  }
}

/* ============================================
   V2 CORRELATION ANALYZER TOOL STYLES
   Scoped styles for Correlation Analyzer dashboard
   ============================================ */
/* Correlation pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-correlation.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}
@layer components {
  .v2-corr {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 40px;
  }

  /* Card body shrink-wrap */
  .v2-corr .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* Header */
  .v2-corr__header { margin-bottom: 4px; }
  .v2-corr__header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-corr__header h1 i { color: var(--accent, #0964A0); font-size: 20px; }
  .v2-corr__header p { font-size: 13px; color: var(--muted, #6B7280); margin: 0; }

  /* Settings row */
  .v2-corr__settings-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  /* Period toggle pills */
  .v2-corr__period-toggles {
    display: flex;
    gap: 2px;
    background: var(--border, #E5E7EB);
    border-radius: 6px;
    padding: 2px;
  }
  .v2-corr__period-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .v2-corr__period-btn:hover { background: rgba(255,255,255,0.6); }
  .v2-corr__period-btn.is-active {
    background: var(--bg-elev, #fff);
    color: var(--accent, #0964A0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }

  /* Tabs */
  .v2-corr__tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    padding: 4px;
    overflow-x: auto;
    flex-shrink: 0;
  }
  .v2-corr__tab {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
  }
  .v2-corr__tab:hover { background: var(--border, #F3F4F6); }
  .v2-corr__tab.is-active {
    background: var(--accent, #0964A0);
    color: #fff;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .v2-corr { padding: 12px 12px 32px; }
    .v2-corr__settings-row { flex-direction: column; align-items: flex-start; }
    .v2-corr__tabs { flex-wrap: wrap; }
  }
}

/* ============================================
   V2 ETF COMPETITOR ANALYSIS (FUND COMPS) STYLES
   Scoped styles for Fund Comps dashboard
   ============================================ */
/* Fund Comps pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-fund-comps.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}
@layer components {
  .v2-comps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 40px;
  }

  /* Card body shrink-wrap */
  .v2-comps .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* ---- Top Bar (header + search) ---- */
  .v2-comps__top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .v2-comps__top-left h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-comps__top-left h1 i { color: var(--accent, #0964A0); font-size: 20px; }
  .v2-comps__top-left p { font-size: 13px; color: var(--muted, #6B7280); margin: 0; }

  .v2-comps__search {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 240px;
  }
  .v2-comps__search .v2-autocomplete {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border, #D1D5DB);
    border-radius: 8px;
    padding: 6px 12px;
    flex: 1;
  }
  .v2-comps__search-icon { color: var(--muted, #6B7280); font-size: 13px; flex-shrink: 0; }
  .v2-comps__search-input {
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    color: var(--text-strong, #1F2937);
    flex: 1;
    min-width: 100px;
  }
  .v2-comps__search .v2-autocomplete:focus-within {
    border-color: var(--accent, #0964A0);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }
  .v2-comps__search .v2-auto-input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
  }
  .v2-comps__universe-select {
    border: 1px solid var(--border, #D1D5DB);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-elev, #fff);
    color: var(--accent, #0964A0);
    font-weight: 600;
    cursor: pointer;
  }

  /* ---- Fund Banner Card ---- */
  .v2-comps__fund-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
  }
  .v2-comps__fund-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 48px;
    padding: 0 16px;
    background: var(--accent, #0964A0);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    border-radius: 8px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }
  .v2-comps__fund-info { flex: 1; min-width: 200px; }
  .v2-comps__fund-name { font-size: 16px; font-weight: 700; color: var(--text-strong, #1F2937); }
  .v2-comps__fund-meta { font-size: 12px; color: var(--muted, #6B7280); display: flex; gap: 16px; margin-top: 2px; }
  .v2-comps__fund-stats { display: flex; gap: 28px; flex-wrap: wrap; }
  .v2-comps__fund-stat { display: flex; flex-direction: column; gap: 1px; }
  .v2-comps__fund-stat-label { font-size: 10px; font-weight: 600; color: var(--muted, #9CA3AF); text-transform: uppercase; letter-spacing: 0.3px; }
  .v2-comps__fund-stat-value { font-size: 14px; font-weight: 700; color: var(--text-strong, #1F2937); }
  .v2-comps__fund-stat-value.positive { color: #059669; }
  .v2-comps__fund-stat-value.negative { color: #DC2626; }

  /* ---- Main Grid (Peers + Scatter) ---- */
  .v2-comps__main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
  }
  @media (max-width: 1024px) {
    .v2-comps__main-grid { grid-template-columns: 1fr; }
  }

  /* ---- Peers Card ---- */
  .v2-comps__peers-card {
    max-height: 520px;
    display: flex;
    flex-direction: column;
  }
  .v2-comps__peers-card .v2-card__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .v2-comps__peer-filters {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    flex-shrink: 0;
  }
  .v2-comps__peer-filter {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border, #D1D5DB);
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .v2-comps__peer-filter:hover { background: var(--bg-elev, #F9FAFB); }
  .v2-comps__peer-filter.is-active {
    background: var(--accent, #0964A0);
    color: #fff;
    border-color: var(--accent, #0964A0);
  }

  .v2-comps__peer-list { display: flex; flex-direction: column; }
  .v2-comps__peer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--border, #F3F4F6);
  }
  .v2-comps__peer-item:hover { background: var(--bg-elev, #F9FAFB); }
  .v2-comps__peer-item.is-selected {
    background: rgba(9, 100, 160, 0.06);
    border-left: 3px solid var(--accent, #0964A0);
  }
  .v2-comps__peer-left { min-width: 0; flex: 1; }
  .v2-comps__peer-ticker {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .v2-comps__peer-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
  }
  .v2-comps__peer-tag--cheap { background: #D1FAE5; color: #059669; }
  .v2-comps__peer-name { font-size: 11px; color: var(--muted, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
  .v2-comps__peer-meta { font-size: 10px; color: var(--muted, #9CA3AF); display: flex; gap: 10px; margin-top: 2px; }
  .v2-comps__peer-meta .positive { color: #059669; }
  .v2-comps__peer-meta .negative { color: #DC2626; }
  .v2-comps__peer-right { flex-shrink: 0; text-align: right; }
  .v2-comps__peer-match { font-size: 13px; font-weight: 700; color: var(--accent, #0964A0); }

  /* ---- Overlap Analysis ---- */
  .v2-comps__alt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #D1FAE5;
    color: #059669;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
  }
  .v2-comps__overlap-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
  }
  @media (max-width: 768px) {
    .v2-comps__overlap-grid { grid-template-columns: 1fr; justify-items: center; }
  }
  .v2-comps__donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .v2-comps__donut-label { font-size: 11px; color: var(--muted, #6B7280); text-align: center; max-width: 200px; line-height: 1.4; }

  .v2-comps__shared-wrap { flex: 1; min-width: 0; }
  .v2-comps__shared-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .v2-comps__shared-header span:first-child {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .v2-comps__shared-header span:first-child i { color: var(--accent, #0964A0); }
  .v2-comps__shared-sub { font-size: 10px; color: var(--muted, #9CA3AF); font-style: italic; }

  .v2-comps__shared-list { display: flex; flex-direction: column; gap: 6px; }
  .v2-comps__shared-row { display: grid; grid-template-columns: 50px 1fr 44px; gap: 8px; align-items: center; }
  .v2-comps__shared-ticker { font-size: 12px; font-weight: 700; color: var(--text-strong, #1F2937); }
  .v2-comps__shared-bar-track {
    height: 8px;
    background: var(--border, #E5E7EB);
    border-radius: 4px;
    overflow: hidden;
  }
  .v2-comps__shared-bar-fill {
    height: 100%;
    background: var(--accent, #0964A0);
    border-radius: 4px;
    transition: width 0.3s ease;
  }
  .v2-comps__shared-pct { font-size: 11px; font-weight: 600; color: var(--muted, #6B7280); text-align: right; }

  /* Responsive */
  @media (max-width: 768px) {
    .v2-comps { padding: 12px 12px 32px; }
    .v2-comps__top-bar { flex-direction: column; }
    .v2-comps__search { width: 100%; }
    .v2-comps__fund-banner { flex-direction: column; align-items: flex-start; }
    .v2-comps__fund-stats { width: 100%; justify-content: space-between; }
  }
}

/* ============================================
   V2 EARNINGS SCORECARD TOOL STYLES
   Scoped styles for Earnings Scorecard dashboard
   ============================================ */
/* Earnings Scorecard pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-earnings-scorecard.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}
@layer components {
  .v2-earnings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 40px;
  }

  /* Header */
  .v2-earnings__header {
    margin-bottom: 4px;
  }
  .v2-earnings__header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-strong, #1F2937);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-earnings__header h1 i {
    color: var(--accent, #0964A0);
    font-size: 20px;
  }
  .v2-earnings__header p {
    font-size: 13px;
    color: var(--muted, #6B7280);
    margin: 0;
  }

  /* Card body shrink-wrap */
  .v2-earnings .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* Let the autocomplete dropdown (.v2-ac-dropdown) escape the short controls
     card. The generic .v2-card rule sets overflow:hidden, and the tool pane
     (#v2-earnings-scorecard) uses overflow-y:auto/overflow-x:hidden which
     clips absolutely-positioned descendants. earningsScorecardPageV2.js flips
     the dropdown to position:fixed (tracked to the input's bounding rect)
     when it opens, so it overlays the page instead of being clipped. */
  .v2-earnings #earnings-controls-card,
  .v2-earnings #earnings-controls-card .v2-card__body {
    overflow: visible;
  }
  .v2-earnings #earnings-controls-card .v2-autocomplete {
    position: relative;
  }
  /* Room to the right of the fund input so the dropdown (and its wider
     suggestion rows) don't butt up against the "Quarter" label. */
  .v2-earnings__control-group--fund {
    margin-right: 16px;
  }
  /* Tighten the dropdown's min-width so it can hug the input when floated;
     also bump z-index well above AG Grid / tooltips. */
  .v2-earnings #earnings-controls-card .v2-ac-dropdown,
  .v2-earnings__fund-dropdown-floating {
    min-width: 0 !important;
    z-index: 10000;
  }
  /* When we float the dropdown (class toggled from JS), position is driven
     by inline top/left/width so we neutralize the stock absolute layout. */
  .v2-earnings__fund-dropdown-floating {
    position: fixed !important;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0 !important;
  }

  /* Loading state: overlay + spinner shown on the KPI row, chart card, and
     grid card while earnings data is being fetched. Toggled from JS by
     adding/removing the `is-loading` class on a host element that contains
     a `.v2-earnings__loading` child. */
  .v2-earnings__loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.72);
    z-index: 5;
    color: var(--v2-text-secondary, #475569);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: inherit;
    pointer-events: all;
  }
  .dark-theme .v2-earnings__loading {
    background: rgba(17, 21, 32, 0.72);
    color: #c4c9d4;
  }
  .v2-earnings .is-loading { position: relative; }
  .v2-earnings .is-loading > .v2-earnings__loading { display: flex; }
  .v2-earnings__spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(9, 100, 160, 0.18);
    border-top-color: var(--v2-accent, #0964A0);
    animation: v2EarningsSpin 0.9s linear infinite;
  }
  .dark-theme .v2-earnings__spinner {
    border-color: rgba(13, 124, 196, 0.22);
    border-top-color: #0d7cc4;
  }
  @keyframes v2EarningsSpin {
    to { transform: rotate(360deg); }
  }
  /* Give the (initially empty) KPI row height while loading so the overlay
     spinner is visible before any KPI cards render. */
  .v2-earnings #earnings-kpis.is-loading {
    min-height: 80px;
  }

  /* Controls row */
  .v2-earnings__controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .v2-earnings__control-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .v2-earnings__control-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .v2-earnings__select {
    padding: 6px 10px;
    border: 1px solid var(--border, #D1D5DB);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-elev, #ffffff);
    color: var(--text-strong, #374151);
    cursor: pointer;
    min-width: 140px;
  }
  .v2-earnings__select:focus {
    outline: none;
    border-color: var(--accent, #0964A0);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }

  /* KPI positive/negative coloring for earnings-specific values */
  .v2-sec-lookup__kpi-value.positive { color: #059669; }
  .v2-sec-lookup__kpi-value.negative { color: #DC2626; }

  /* Responsive: stack controls on narrow screens */
  @media (max-width: 768px) {
    .v2-earnings {
      padding: 12px 12px 32px;
    }
    .v2-earnings__controls {
      flex-direction: column;
      align-items: flex-start;
    }
    .v2-earnings__select {
      width: 100%;
    }
  }
}

/* ============================================
   V2 SECURITY PROFILE PAGE STYLES
   Premium card-based profile experience
   ============================================ */
@layer components {
  /* Page Container */
  .v2-sp {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--v2-bg-page, #F3F4F6);
    overflow: hidden;
  }

  /* Sticky Profile Header */
  .v2-sp__header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--v2-bg-surface, #ffffff);
    border-bottom: 1px solid var(--v2-border, #E5E7EB);
    padding: 8px 20px;
    flex-shrink: 0;
  }

  .v2-sp__header-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
  }

  .v2-sp__identity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .v2-sp__header-row2 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--v2-border, #E5E7EB);
  }

  .v2-sp__ticker {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    margin: 0;
    line-height: 1;
  }

  .v2-sp__name {
    font-size: 14px;
    color: var(--v2-text-muted, #6B7280);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
  }

  .v2-sp__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--v2-accent-bg, #EBF5FF);
    color: var(--v2-accent, #0964A0);
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
  }

  .v2-sp__header-sep {
    color: var(--v2-text-muted, #9CA3AF);
    font-size: 12px;
  }

  .v2-sp__factsheet-link {
    font-size: 12px;
    color: #0964A0;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .v2-sp__factsheet-link:hover {
    text-decoration: underline;
  }

  .v2-sp__price-block {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
  }

  .v2-sp__price-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .v2-sp__price-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--v2-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .v2-sp__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    line-height: 1;
  }

  .v2-sp__change {
    font-size: 14px;
    font-weight: 600;
  }

  .v2-sp__change.positive { color: #059669; }
  .v2-sp__change.negative { color: #DC2626; }

  .v2-sp__price-volume {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text-primary, #1F2937);
  }

  /* Stats Strip */
  .v2-sp__stats-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .v2-sp__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex-shrink: 0;
    text-align: left;
  }

  .v2-sp__stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--v2-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .v2-sp__stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    white-space: nowrap;
  }

  .v2-sp__stat-value.positive { color: #059669; }
  .v2-sp__stat-value.negative { color: #DC2626; }

  /* In-tab Universe Toggle */
  .v2-sp__tab-universe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: flex-end;
  }
  .v2-sp__controls-row .v2-sp__tab-universe {
    margin-bottom: 0;
  }

  /* Benchmark Autocomplete */
  .v2-sp__autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 340px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--v2-bg-surface, #fff);
    border: 1px solid var(--v2-border, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 1000;
  }
  .v2-sp__ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  .v2-sp__ac-item:hover { background: #f0f5ff; }
  .v2-sp__ac-ticker { font-weight: 700; color: #0964A0; min-width: 55px; }
  .v2-sp__ac-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #374151; }
  .v2-sp__ac-type { font-size: 10px; color: #9CA3AF; text-transform: uppercase; }

  .dark-theme .v2-sp__autocomplete-dropdown {
    background: #111520;
    border-color: #1e2433;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
  }
  .dark-theme .v2-sp__ac-item { border-color: #1e2433; }
  .dark-theme .v2-sp__ac-item:hover { background: rgba(255,255,255,0.05); }
  .dark-theme .v2-sp__ac-name { color: #e6e9f0; }
  .dark-theme .v2-sp__ac-ticker { color: var(--v2-accent, #0d7cc4); }

  /* Controls Row */
  .v2-sp__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .v2-sp__control-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .v2-sp__control-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--v2-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .v2-sp__select {
    padding: 4px 8px;
    border: 1px solid var(--v2-border, #D1D5DB);
    border-radius: 5px;
    font-size: 12px;
    background: var(--v2-bg-input, #ffffff);
    color: var(--v2-text-secondary, #374151);
    cursor: pointer;
    min-width: 120px;
  }

  .v2-sp__select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(9, 100, 160, 0.15);
  }

  .v2-sp__select--sm {
    padding: 4px 8px;
    min-width: 100px;
  }

  .v2-sp__select-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-text-muted, #6B7280);
  }

  .v2-sp__actions {
    display: flex;
    gap: 6px;
    margin-left: 4px;
    position: relative;
  }

  /* ── Tools & Reports Popup ── */
  .v2-sp-tr-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    width: 320px;
    background: var(--v2-bg-primary, #fff);
    border: 1px solid var(--v2-border, #e2e5ea);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease;
    pointer-events: none;
  }
  .v2-sp-tr-popup.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .v2-sp-tr-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--v2-border, #e2e5ea);
  }
  .v2-sp-tr-popup__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--v2-text-muted, #6B7280);
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 120ms;
  }
  .v2-sp-tr-popup__close:hover {
    color: var(--v2-text-primary, #333);
  }

  .v2-sp-tr-popup__body {
    padding: 8px 0 6px;
  }
  .v2-sp-tr-popup__section.is-hidden {
    display: none;
  }

  .v2-sp-tr-popup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 12px 10px;
  }

  .v2-sp-tr-popup__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px 10px;
    border-radius: 8px;
    background: var(--v2-bg-hover, #f5f7fa);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
  }
  .v2-sp-tr-popup__item:hover {
    background: var(--v2-accent-bg, rgba(9,100,160,.08));
    border-color: var(--v2-accent, #0964A0);
    box-shadow: 0 2px 8px rgba(9,100,160,.1);
  }

  .v2-sp-tr-popup__icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--v2-accent, #0964A0);
    background: var(--v2-accent-bg, rgba(9,100,160,.08));
    border-radius: 7px;
  }

  .v2-sp-tr-popup__label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v2-text-primary, #333);
    text-align: center;
    line-height: 1.2;
  }

  /* Dark theme
     Tool/report tiles sit on a near-black surface with a subtle
     rgba(255,255,255,.05) background — at that contrast ratio the default
     #e6e9f0 primary text looked dim on 10.5px labels. Bumped everything
     (labels, icons, close button) to near-white with !important so they
     beat the base `var(--v2-text-primary, #333)` fallback that was
     resolving to the off-white token but still reading as grey on the
     tile bg. */
  .dark-theme .v2-sp-tr-popup {
    background: var(--v2-bg-primary, #1a1d24);
    border-color: var(--v2-border, #2e3240);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  }
  .dark-theme .v2-sp-tr-popup__close {
    color: #c4c9d4 !important;
  }
  .dark-theme .v2-sp-tr-popup__close:hover {
    color: #ffffff !important;
  }
  .dark-theme .v2-sp-tr-popup__header {
    border-bottom-color: var(--v2-border, #2e3240);
  }
  .dark-theme .v2-sp-tr-popup__item {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
  }
  .dark-theme .v2-sp-tr-popup__item:hover {
    background: rgba(43,130,182,.18);
    border-color: var(--v2-accent, #1C98D4);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
  }
  .dark-theme .v2-sp-tr-popup__icon {
    color: #4db5e0 !important;
    background: rgba(77,181,224,.16);
  }
  .dark-theme .v2-sp-tr-popup__label {
    color: #f1f3f7 !important;
  }

  /* ── Watchlist Overlay ── */
  .v2-wl-overlay {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    width: 280px;
    background: var(--v2-bg-surface, #fff);
    border: 1px solid var(--v2-border, #D1D5DB);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* Header */
  .v2-wl-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--v2-border, #E5E7EB);
  }
  .v2-wl-overlay__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-text-primary, #111827);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .v2-wl-overlay__title i { color: #D97706; font-size: 12px; }
  .v2-wl-overlay__close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--v2-text-muted, #9CA3AF);
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    border-radius: 4px;
    transition: background .15s, color .15s;
  }
  .v2-wl-overlay__close:hover { background: var(--v2-bg-hover, #F3F4F6); color: var(--v2-text-secondary, #374151); }

  /* Body / list */
  .v2-wl-overlay__body {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
  }
  .v2-wl-overlay__body::-webkit-scrollbar { width: 4px; }
  .v2-wl-overlay__body::-webkit-scrollbar-thumb { background: var(--v2-border, #D1D5DB); border-radius: 2px; }

  .v2-wl-overlay__loading,
  .v2-wl-overlay__empty {
    text-align: center;
    padding: 24px 14px;
    font-size: 12px;
    color: var(--v2-text-muted, #9CA3AF);
  }

  /* Individual watchlist row */
  .v2-wl-overlay__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--v2-text-secondary, #374151);
    text-align: left;
    transition: background .12s;
  }
  .v2-wl-overlay__item:hover { background: var(--v2-bg-hover, #F3F4F6); }
  .v2-wl-overlay__item + .v2-wl-overlay__item { border-top: 1px solid var(--v2-border-light, #F3F4F6); }
  .v2-wl-overlay__item--loading { opacity: .45; pointer-events: none; }
  .v2-wl-overlay__item--added {
    background: #F0FDF4;
    cursor: default;
  }
  .v2-wl-overlay__item--added:hover { background: #F0FDF4; }

  .v2-wl-overlay__item-name {
    font-weight: 500;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .v2-wl-overlay__item-count {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--v2-text-muted, #6B7280);
    background: var(--v2-bg-elevated, #F3F4F6);
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1.3;
  }
  .v2-wl-overlay__item-check {
    color: #059669;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Footer */
  .v2-wl-overlay__footer {
    padding: 8px 14px;
    border-top: 1px solid var(--v2-border, #E5E7EB);
  }
  .v2-wl-overlay__footer .btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 5px 0;
    border-radius: 4px;
    border: 1px solid var(--v2-border, #D1D5DB);
    background: var(--v2-bg-surface, #fff);
    color: var(--v2-text-secondary, #374151);
    cursor: pointer;
    font-weight: 500;
    transition: background .12s, border-color .12s;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .v2-wl-overlay__footer .btn:hover { background: var(--v2-bg-hover, #F9FAFB); border-color: #9CA3AF; }

  /* Tab Bar */
  .v2-sp__tabs {
    display: flex;
    background: var(--v2-bg-surface, #ffffff);
    border-bottom: 1px solid var(--v2-border, #E5E7EB);
    padding: 0 20px;
    overflow-x: auto;
    flex-shrink: 0;
    gap: 4px;
  }

  .v2-sp__tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text-muted, #6B7280);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
  }

  .v2-sp__tab:hover {
    color: var(--v2-text-primary, #1F2937);
    background: var(--v2-bg-hover, #F9FAFB);
  }

  .v2-sp__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }

  .v2-sp__tab i {
    font-size: 12px;
    opacity: 0.8;
  }

  /* Tab Content */
  .v2-sp__content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
  }

  .v2-sp__tab-view {
    display: block;
  }

  .v2-sp__tab-view.is-hidden,
  .v2-sp__comp-section.is-hidden,
  #risk-stats-view.is-hidden,
  #risk-scenario-view.is-hidden,
  #mp-risk-stats-view.is-hidden,
  #mp-risk-scenario-view.is-hidden,
  #sp-stock-risk-stats-view.is-hidden,
  #sp-stock-risk-scenario-view.is-hidden,
  #fund-equity-val-view.is-hidden,
  #fund-equity-earn-view.is-hidden {
    display: none !important;
  }

  /* ======================================================================
   * Risk Metrics table (model / stock risk tab)
   * Scoped class so light- and dark-theme rows stay readable even when
   * the containing card doesn't fully propagate --v2-* variables.
   * ====================================================================== */
  .mp-risk-metrics-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--v2-bg-surface, #ffffff);
    color: var(--v2-text-primary, #1e293b);
  }
  .mp-risk-metrics-table__head {
    border-bottom: 2px solid var(--v2-border, #e5e7eb);
    background: var(--v2-bg-surface, #ffffff);
  }
  .mp-risk-metrics-table__th {
    text-align: right;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-text-muted, #64748b);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .mp-risk-metrics-table__th--left { text-align: left; }
  .mp-risk-metrics-table__group-row { background: var(--v2-bg-elevated, #f8fafc); }
  .mp-risk-metrics-table__group-cell {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--v2-text-secondary, #475569);
    background: var(--v2-bg-elevated, #f8fafc);
  }
  .mp-risk-metrics-table__row {
    border-bottom: 1px solid var(--v2-border, #e5e7eb);
  }
  .mp-risk-metrics-table__row > td { background: transparent; }
  .mp-risk-metrics-table__label {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text-primary, #1e293b);
  }
  .mp-risk-metrics-table__val {
    padding: 8px 16px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
  }
  .mp-risk-metrics-table__bench {
    padding: 8px 16px;
    text-align: right;
    font-size: 13px;
    color: var(--v2-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
  }
  .mp-risk-metrics-table__delta {
    padding: 8px 16px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  /* Dark-theme overrides with hard-coded hex to defeat page-level
   * CSS variable redefinitions. */
  .dark-theme .mp-risk-metrics-table {
    background: #111520 !important;
    color: #e6e9f0 !important;
  }
  .dark-theme .mp-risk-metrics-table__head {
    background: #111520 !important;
    border-bottom-color: #252d3d !important;
  }
  .dark-theme .mp-risk-metrics-table__th {
    color: #8b92a5 !important;
    background: #111520 !important;
  }
  .dark-theme .mp-risk-metrics-table__group-row,
  .dark-theme .mp-risk-metrics-table__group-cell {
    background: #1a2030 !important;
    color: #c4c9d4 !important;
  }
  .dark-theme .mp-risk-metrics-table__row {
    border-bottom-color: #1e2433 !important;
  }
  .dark-theme .mp-risk-metrics-table__label {
    color: #e6e9f0 !important;
  }
  .dark-theme .mp-risk-metrics-table__val {
    color: #f1f3f7 !important;
  }
  .dark-theme .mp-risk-metrics-table__val[style*="#ef4444"] {
    color: #ef4444 !important;
  }
  .dark-theme .mp-risk-metrics-table__bench {
    color: #8b92a5 !important;
  }

  .v2-sp__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--v2-text-muted, #6B7280);
    gap: 12px;
  }

  .v2-sp__loading i {
    font-size: 24px;
    color: var(--accent);
  }

  /* Grid Layouts */
  .v2-sp__grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
  }

  .v2-sp__grid--2col {
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .v2-sp__grid--2col {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .v2-sp__grid--3col {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .v2-sp__grid--3col {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .v2-sp__grid--3col {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Valuation & Growth: 3 paired table+chart sections */
  .v2-sp__vg-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .v2-sp__vg-pair {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .v2-sp__vg-pair {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 1280px) {
    .v2-sp__vg-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .v2-sp__vg-pair {
      grid-template-columns: 1fr;
    }
  }

  .v2-sp__vg-pair .v2-card {
    min-width: 0;
  }

  .v2-sp__vg-pair .v2-sp__metrics-table {
    font-size: 11px;
  }

  .v2-sp__grid--60-40 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .v2-sp__grid--60-40 {
      grid-template-columns: 3fr 2fr;
    }
  }

  .v2-sp__grid--65-35 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 1024px) {
    .v2-sp__grid--65-35 {
      grid-template-columns: 65fr 35fr;
    }
  }

  .v2-sp__stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* KPI Row */
  .v2-sp__kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
  }

  @media (min-width: 768px) {
    .v2-sp__kpi-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .v2-sp__kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--v2-bg-surface, #ffffff);
    border: 1px solid var(--v2-border, #E5E7EB);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--v2-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  }

  .v2-sp__kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--v2-accent-bg, #EBF5FF);
    color: var(--accent);
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
  }

  .v2-sp__kpi-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .v2-sp__kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    line-height: 1.2;
  }

  .v2-sp__kpi-value.positive { color: #059669; }
  .v2-sp__kpi-value.negative { color: #DC2626; }

  .v2-sp__kpi-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-text-secondary, #374151);
  }

  .v2-sp__kpi-subtitle {
    font-size: 10px;
    color: var(--v2-text-muted, #9CA3AF);
  }

  /* ── 50/50 Grid ──────────────────── */
  .v2-sp__grid--50-50 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 768px) {
    .v2-sp__grid--50-50 {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ── Scenario Analysis ──────────────────── */
  .v2-sp__scenario-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .v2-sp__scenario-pill {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--pill-color, #94A3B8);
    border-radius: 20px;
    background: transparent;
    color: var(--pill-color, #475569);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .v2-sp__scenario-pill:hover {
    background: color-mix(in srgb, var(--pill-color, #94A3B8) 10%, transparent);
  }
  .v2-sp__scenario-pill.is-active {
    background: var(--pill-color, #DC2626);
    color: #fff;
    border-color: var(--pill-color, #DC2626);
  }
  .v2-sp__grid--scenario {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
  }
  @media (max-width: 900px) {
    .v2-sp__grid--scenario { flex-direction: column; }
  }
  .v2-sp__scenario-detail {
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
  .v2-sp__scenario-comparison {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .v2-sp__scenario-comp-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v2-text-muted, #6B7280);
    text-transform: uppercase;
  }
  .v2-sp__scenario-comp-row {
    display: flex;
    gap: 16px;
  }
  .v2-sp__scenario-comp-box {
    flex: 1;
    text-align: center;
  }
  .v2-sp__scenario-comp-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--v2-text-primary, #1F2937);
  }
  .v2-sp__scenario-comp-value.negative { color: #DC2626; }
  .v2-sp__scenario-comp-value.positive { color: #16A34A; }
  .v2-sp__scenario-comp-sub {
    font-size: 11px;
    color: #94A3B8;
    display: block;
    margin-top: 2px;
  }
  .v2-sp__scenario-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.02em;
  }
  .v2-sp__scenario-badge--lg {
    padding: 8px 24px;
    font-size: 14px;
    border-radius: 6px;
  }
  .v2-sp__scenario-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .v2-sp__scenario-table th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--v2-text-muted, #6B7280);
    border-bottom: 2px solid var(--v2-border, #E5E7EB);
    background: var(--v2-bg-elevated, #F9FAFB);
  }
  .v2-sp__scenario-table td {
    padding: 12px;
    border-bottom: 1px solid var(--v2-border-light, #F3F4F6);
    vertical-align: middle;
  }
  .v2-sp__scenario-table-row {
    cursor: pointer;
    transition: background 0.1s ease;
  }
  .v2-sp__scenario-table-row:hover {
    background: var(--v2-bg-hover, #F8FAFC);
  }
  .v2-sp__scenario-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .v2-sp__scenario-bar {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* ── Trading Tab ──────────────────── */
  .v2-sp__trading-date {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .v2-sp__signal-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 4px;
  }
  @media (min-width: 768px) {
    .v2-sp__signal-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .v2-sp__signal-card {
    background: var(--v2-bg-surface, #fff);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s;
  }
  .v2-sp__signal-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .v2-sp__signal-card-icon {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .v2-sp__signal-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--v2-text-muted, #6b7280);
    margin-bottom: 6px;
  }

  .v2-sp__signal-card-value {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* 52-Week Range Bar */
  .v2-52w {
    background: var(--v2-bg-surface, #fff);
    border: 1px solid var(--v2-border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 20px;
  }
  .v2-52w__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .v2-52w__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-text-muted, #64748b);
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--v2-bg-elevated, #f1f5f9);
    border-radius: 4px;
    padding: 3px 8px;
  }
  .v2-52w__price {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .v2-52w__price--low  { color: #16a34a; }
  .v2-52w__price--high { color: var(--v2-text-secondary, #374151); }
  .v2-52w__track {
    flex: 1;
    position: relative;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    min-width: 200px;
  }
  .v2-52w__gradient {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(to right, #ef4444 0%, #f97316 18%, #eab308 35%, #84cc16 55%, #22c55e 72%, #bbf7d0 100%);
  }
  .v2-52w__tick {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 14px;
    border-left: 3px solid;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: auto;
  }
  .v2-52w__dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #1e293b;
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    pointer-events: auto;
  }
  .v2-52w__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 4px;
  }
  .v2-52w__legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-text-muted, #64748b);
    white-space: nowrap;
  }
  .v2-52w__legend-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
  }

  /* Range Bars */
  .v2-sp__range-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .v2-sp__range-label {
    width: 110px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text-secondary, #374151);
  }
  .v2-sp__range-track {
    flex: 1;
    height: 8px;
    background: var(--v2-border, #e5e7eb);
    border-radius: 4px;
    position: relative;
    overflow: visible;
  }
  .v2-sp__range-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
  }
  .v2-sp__range-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 14px;
    background: #1f2937;
    border-radius: 2px;
    transform: translateX(-50%);
  }
  .v2-sp__range-value {
    width: 70px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Trading Tables */
  .v2-sp__trading-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .v2-sp__trading-table thead th {
    background: var(--v2-bg-elevated, #f8fafc);
    padding: 8px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--v2-text-muted, #6b7280);
    border-bottom: 1px solid var(--v2-border, #e5e7eb);
  }
  .v2-sp__trading-table tbody td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--v2-border-light, #f1f5f9);
    color: var(--v2-text-secondary, #374151);
    font-variant-numeric: tabular-nums;
  }
  .v2-sp__trading-table tbody tr:last-child td {
    border-bottom: none;
  }
  .v2-sp__trading-table tbody tr:hover {
    background: var(--v2-bg-hover, #f8fafc);
  }
  .v2-sp__trading-table td.positive { color: #16a34a; font-weight: 600; }
  .v2-sp__trading-table td.negative { color: #dc2626; font-weight: 600; }

  .v2-sp__trading-table--volume tbody td:nth-child(2),
  .v2-sp__trading-table--volume tbody td:nth-child(3),
  .v2-sp__trading-table--volume thead th:nth-child(2),
  .v2-sp__trading-table--volume thead th:nth-child(3) {
    text-align: right;
  }

  /* ── Trading & Liquidity Stats Card ── */
  .v2-tl__stats {
    padding: 8px 16px;
  }
  .v2-tl__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--v2-border-light, #f1f5f9);
  }
  .v2-tl__row:last-child { border-bottom: none; }
  .v2-tl__label {
    font-size: 13px;
    color: var(--v2-text-muted, #64748b);
    font-weight: 500;
  }
  .v2-tl__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-text-primary, #1e293b);
    text-align: right;
  }
  .v2-tl__value--bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-tl__bar-track {
    width: 80px;
    height: 8px;
    background: var(--v2-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
  }
  .v2-tl__bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(to right, #93c5fd, #3b82f6);
    border-radius: 4px;
    transition: width 0.3s ease;
  }
  .v2-tl__bar-num {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    min-width: 18px;
  }

  /* ── Performance Returns Grid (styled AG Grid) ── */

  #perf-trailing-grid .ag-header-cell-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  #perf-trailing-grid .ag-header {
    border-bottom: 2px solid #e2e8f0 !important;
  }
  #perf-trailing-grid .ag-row {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.15s ease;
  }
  #perf-trailing-grid .ag-row:hover {
    background: var(--v2-bg-hover, #f8fafc) !important;
  }
  #perf-trailing-grid .ag-row.perf-benchmark-row {
    border-left: 3px solid #cbd5e1;
  }
  #perf-trailing-grid .ag-row.perf-fund-row {
    border-left: 3px solid transparent;
  }
  #perf-trailing-grid .ag-row.perf-rank-row {
    background: #fafbfc;
    border-bottom: 1px solid #e9ecef !important;
  }
  #perf-trailing-grid .ag-row.perf-rank-first {
    border-top: 2px solid #e2e8f0 !important;
  }
  #perf-trailing-grid .ag-cell {
    display: flex !important;
    align-items: center;
    line-height: 1.4;
  }
  #perf-trailing-grid .ag-cell-focus {
    border: none !important;
    outline: none !important;
  }
  #perf-trailing-grid .ag-root-wrapper {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
  }
  #perf-trailing-grid .ag-right-aligned-cell {
    font-variant-numeric: tabular-nums;
  }

  /* ── Performance Grid Legend ── */
  .perf-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    color: #64748b;
  }
  .perf-grid-legend__group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .perf-grid-legend__label {
    font-weight: 600;
    color: #475569;
  }
  .perf-grid-legend__text {
    color: #64748b;
  }
  .perf-grid-legend__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }
  .perf-q-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 6px;
  }

  /* ── Model Performance Table ── */
  .mp-perf-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
  }
  .mp-perf-th {
    text-align: right;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
  }
  .mp-perf-th--name {
    text-align: left;
    min-width: 140px;
    position: sticky;
    left: 0;
    background: var(--v2-bg-surface, #fff);
    z-index: 1;
  }
  .mp-perf-row {
    border-bottom: 1px solid #f1f5f9;
  }
  .mp-perf-row:last-child {
    border-bottom: none;
  }
  .mp-perf-row--bench {
    background: #fafbfc;
  }
  .mp-perf-row--bench .mp-perf-cell--name {
    background: #fafbfc;
  }
  .mp-perf-cell {
    text-align: right;
    padding: 6px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .mp-perf-cell--name {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--v2-bg-surface, #fff);
    z-index: 1;
  }

  /* ── Indicator Select Table (Technicals tab) ── */

  .v2-sp__indicator-select-table thead th:first-child,
  .v2-sp__indicator-select-table tbody td:first-child {
    width: 28px;
    text-align: center;
    padding-left: 8px;
    padding-right: 0;
  }
  .v2-sp__ind-check {
    accent-color: #2563EB;
    cursor: pointer;
    width: 14px;
    height: 14px;
  }
  .v2-sp__ind-row {
    cursor: pointer;
  }
  .v2-sp__ind-row:hover {
    background: #f1f5f9;
  }
  .v2-sp__ind-row.is-active {
    background: #eff6ff;
  }

  /* ── Risk Stats AG Grid ────────────────────── */

  #risk-table-grid .ag-row:not(.ag-full-width-row):hover {
    background-color: var(--v2-bg-hover, #f8fafc) !important;
  }
  #risk-table-grid .ag-full-width-row {
    border-bottom: none !important;
  }
  #risk-table-grid .risk-group-header-row {
    background: var(--v2-bg-elevated, #f8fafc) !important;
  }

  /* Stock profile risk grid — mirrors the model profile rules so the
   * grid body stays readable in dark mode. */
  #sp-stock-risk-grid .ag-row:not(.ag-full-width-row):hover {
    background-color: var(--v2-bg-hover, #f8fafc) !important;
  }
  #sp-stock-risk-grid .ag-full-width-row {
    border-bottom: none !important;
  }
  #sp-stock-risk-grid .risk-group-header-row {
    background: var(--v2-bg-elevated, #f8fafc) !important;
  }
  /* Class-based cell colors so a theme switch re-paints without needing
   * to re-render the grid. Light mode values pulled from the original
   * inline styles (#1e293b for label/value, #64748b for bench). */
  #sp-stock-risk-grid .sp-stock-risk-grid__label,
  #sp-stock-risk-grid .sp-stock-risk-grid__val {
    color: #1e293b;
  }
  #sp-stock-risk-grid .sp-stock-risk-grid__val--neg,
  #sp-stock-risk-grid .sp-stock-risk-grid__bench--neg {
    color: #ef4444;
  }
  #sp-stock-risk-grid .sp-stock-risk-grid__bench { color: #64748b; }
  #sp-stock-risk-grid .sp-stock-risk-grid__muted { color: #94a3b8; }
  #sp-stock-risk-grid .sp-stock-risk-grid__group-inner {
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 24px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    color: #475569;
  }

  /* ── Overview Summary Cards ──────────────────── */

  .v2-sp__ov-card {
    display: flex;
    flex-direction: column;
  }

  .v2-sp__ov-body {
    padding: 14px 16px !important;
    min-height: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Card header icon badges */
  .v2-sp__ov-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .v2-sp__ov-icon--blue    { background: #DBEAFE; color: #1D4ED8; }
  .v2-sp__ov-icon--indigo  { background: #E0E7FF; color: #4338CA; }
  .v2-sp__ov-icon--emerald { background: #D1FAE5; color: #047857; }
  .v2-sp__ov-icon--teal    { background: #CCFBF1; color: #0F766E; }
  .v2-sp__ov-icon--amber   { background: #FEF3C7; color: #B45309; }
  .v2-sp__ov-icon--slate   { background: #E2E8F0; color: #475569; }
  .v2-sp__ov-icon--rose    { background: #FFE4E6; color: #BE123C; }
  .v2-sp__ov-icon--violet  { background: #EDE9FE; color: #6D28D9; }

  /* "View Report →" link */
  .v2-sp__ov-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #0964A0);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
  }
  .v2-sp__ov-link:hover { color: #064E7B; text-decoration: underline; }
  .v2-sp__ov-link i { font-size: 10px; }

  /* Mini table (Performance, Holdings) */
  .v2-sp__ov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .v2-sp__ov-table th {
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--v2-border, #E5E7EB);
  }
  .v2-sp__ov-table td {
    padding: 8px 0;
    color: var(--v2-text-secondary, #374151);
    border-bottom: 1px solid var(--v2-border-light, #F3F4F6);
  }
  .v2-sp__ov-table tr:last-child td { border-bottom: none; }
  .v2-sp__ov-table .text-right { text-align: right; }
  .v2-sp__ov-table .positive { color: #059669; font-weight: 600; }
  .v2-sp__ov-table .negative { color: #DC2626; font-weight: 600; }

  /* Holdings variant */
  .v2-sp__ov-table--holdings th { font-size: 10px; letter-spacing: 0.06em; }
  .v2-sp__ov-hold-ticker { font-weight: 600; color: var(--v2-text-primary, #1F2937); }
  .v2-sp__ov-hold-total {
    margin-top: auto;
    padding-top: 10px;
    text-align: right;
    font-size: 12px;
    color: var(--v2-text-muted, #6B7280);
  }

  /* 2x2 stat grid (Risk) */
  .v2-sp__ov-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .v2-sp__ov-stat-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--v2-border, #E5E7EB);
    border-radius: 6px;
    background: var(--v2-bg-elevated, #F9FAFB);
  }
  .v2-sp__ov-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--v2-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .v2-sp__ov-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    line-height: 1.2;
  }
  .v2-sp__ov-stat-value.positive { color: #059669; }
  .v2-sp__ov-stat-value.negative { color: #DC2626; }

  /* AUM hero */
  .v2-sp__ov-aum-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .v2-sp__ov-aum-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    line-height: 1.2;
  }
  .v2-sp__ov-aum-flow {
    font-size: 13px;
    font-weight: 600;
  }
  .v2-sp__ov-aum-flow.positive { color: #059669; }
  .v2-sp__ov-aum-flow.negative { color: #DC2626; }
  .v2-sp__ov-aum-sublabel {
    display: block;
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 2px;
  }

  /* Key-value list (Composition) */
  .v2-sp__ov-kv-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .v2-sp__ov-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .v2-sp__ov-kv-label {
    font-size: 13px;
    color: var(--v2-text-muted, #6B7280);
  }
  .v2-sp__ov-kv-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-text-primary, #1F2937);
    text-align: right;
  }
  .v2-sp__ov-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #065F46;
    background: #D1FAE5;
    border-radius: 4px;
  }

  /* Progress bars (Fundamentals) */
  .v2-sp__ov-bar-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .v2-sp__ov-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .v2-sp__ov-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .v2-sp__ov-bar-label {
    font-size: 13px;
    color: var(--v2-text-muted, #6B7280);
  }
  .v2-sp__ov-bar-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
  }
  .v2-sp__ov-bar-track {
    width: 100%;
    height: 8px;
    background: var(--v2-bg-elevated, #F3F4F6);
    border-radius: 4px;
    overflow: hidden;
  }
  .v2-sp__ov-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
  }
  .v2-sp__ov-bar-fill--blue  { background: #2563EB; }
  .v2-sp__ov-bar-fill--amber { background: #D97706; }

  /* Trading overview card */
  .v2-sp__ov-trading-signal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 10px;
  }
  .v2-sp__ov-trading-signal-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7280;
  }
  .v2-sp__ov-trading-signal-value {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .v2-sp__ov-trading-signal-value.positive { color: #16A34A; }
  .v2-sp__ov-trading-signal-value.negative { color: #DC2626; }
  .v2-sp__ov-trading-range { margin-bottom: 10px; }
  .v2-sp__ov-trading-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
    letter-spacing: 0.03em;
  }
  .v2-sp__ov-range-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #DC2626 0%, #FBBF24 50%, #16A34A 100%);
    border-radius: 3px;
    margin: 4px 0;
  }
  .v2-sp__ov-range-marker {
    position: absolute;
    top: -4px;
    width: 12px;
    height: 14px;
    background: #1F2937;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transform: translateX(-50%);
  }
  .v2-sp__ov-stat-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .v2-sp__ov-stat-grid--3 .v2-sp__ov-stat-value {
    font-size: 11px;
  }

  /* Loading / empty states for async cards */
  .v2-sp__ov-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    color: #94A3B8;
    font-size: 13px;
  }
  .v2-sp__ov-empty,
  .v2-sp__ov-deferred {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    gap: 6px;
    color: #CBD5E1;
    font-size: 13px;
  }
  .v2-sp__ov-empty i,
  .v2-sp__ov-deferred i { font-size: 20px; }

  /* Placeholder text */
  .v2-sp__placeholder {
    color: var(--v2-text-muted, #9CA3AF);
    font-style: italic;
  }

  /* Controls Row */
  .v2-sp__controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  /* Strategy Text */
  .v2-sp__strategy-text {
    font-size: 14px;
    color: var(--v2-text-secondary, #4B5563);
    line-height: 1.6;
    margin: 0;
  }
  .v2-sp__strategy-text + .v2-sp__insight { margin-top: 16px; }
  .v2-sp__read-more + .v2-sp__insight { margin-top: 12px; }

  /* Truncated text + Read more link */
  .v2-sp__clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v2-sp__read-more {
    display: inline-block;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #0964A0);
    cursor: pointer;
  }
  .v2-sp__read-more:hover { text-decoration: underline; }
  .v2-sp__read-more--insight { color: #92400E; }
  .v2-sp__read-more--insight:hover { color: #78350F; }

  /* Insight Box */
  .v2-sp__insight {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 16px;
  }

  .v2-sp__insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
    margin-bottom: 8px;
  }

  .v2-sp__insight-header i {
    color: #F59E0B;
  }

  .v2-sp__insight p {
    font-size: 13px;
    color: #78350F;
    line-height: 1.5;
    margin: 0;
  }

  /* Links */
  .v2-sp__link {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .v2-sp__link:hover {
    text-decoration: underline;
  }

  /* Style Map — square heatmap (matches Global Markets layout) */
  .v2-sp__style-map {
    display: grid;
    grid-template-columns: 44px repeat(3, 1fr);
    gap: 3px;
    font-size: 11px;
    max-width: 360px;
    margin: 0 auto;
  }

  .v2-sp__style-map-corner { display: block; }

  .v2-sp__style-map-col-label,
  .v2-sp__style-map-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    font-weight: 700;
    color: var(--v2-text-muted, #6c757d);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  .v2-sp__style-map-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px;
    border-radius: 6px;
    cursor: default;
    transition: opacity .15s, transform .1s;
    position: relative;
  }
  .v2-sp__style-map-cell:hover {
    opacity: .85;
    transform: scale(1.04);
  }

  .v2-sp__style-map-cell-label {
    font-weight: 600;
    font-size: 8px;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .3px;
  }

  .v2-sp__style-map-cell-val {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
  }

  .v2-sp__style-map-cell-bench {
    font-size: 8px;
    opacity: .6;
  }

  .v2-sp__style-map-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }
  .v2-sp__style-map-cell:hover .v2-sp__style-map-tooltip { display: block; }

  .v2-sp__style-weighted-avg {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: var(--v2-text-secondary, #495057);
  }

  /* Factor Profile */
  .v2-sp__factor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .v2-sp__factor-label {
    font-size: 10px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
  }

  .v2-sp__factor-values {
    font-size: 11px;
    color: #4B5563;
    text-align: right;
    white-space: nowrap;
  }

  .v2-sp__factor-bar {
    position: relative;
  }

  .v2-sp__factor-track {
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    position: relative;
    overflow: visible;
  }

  .v2-sp__factor-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
  }

  .v2-sp__factor-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: #6B7280;
    transform: translateX(-50%);
  }

  .v2-sp__factor-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 11px;
    color: #6B7280;
  }

  .v2-sp__legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 4px;
  }

  .v2-sp__legend-line {
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #6B7280;
    margin-right: 4px;
    vertical-align: middle;
  }

  /* Rating Gauges — segmented bar with markers (Factor Profile / Concentration) */

  .v2-rating-gauges {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .v2-rating-gauge {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .v2-rating-gauge__label {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
  }

  .v2-rating-gauge__track {
    position: relative;
    display: flex;
    height: 16px;
    border-radius: 3px;
    overflow: visible;
  }

  .v2-rating-gauge__seg {
    flex: 1;
    border-radius: 2px;
  }

  .v2-rating-gauge__marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: auto;
    /* `cursor: help` rendered a question-mark next to the pointer on hover,
       which users found confusing. Default is fine — the marker already
       shows its value via the native `title` tooltip. */
    cursor: default;
  }

  .v2-rating-gauge__marker--fund svg {
    display: block;
  }

  .v2-rating-gauge__marker--cat svg {
    display: block;
  }

  .v2-rating-gauge__labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    padding: 0 2px;
  }

  .v2-rating-gauge__divider {
    border-top: 1px solid #e2e8f0;
    margin: 4px 0;
    padding-top: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #94a3b8;
    text-transform: uppercase;
  }

  .v2-rating-gauge__legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
  }

  .v2-rating-gauge__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Stat Boxes (Composition / Fundamentals header row) */
  .v2-sp__stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
  }

  @media (min-width: 768px) {
    .v2-sp__stat-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .v2-sp__stat-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--v2-bg-surface, #ffffff);
    border: 1px solid var(--v2-border, #E5E7EB);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .v2-sp__stat-box .v2-sp__stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--v2-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .v2-sp__stat-box .v2-sp__stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    line-height: 1.2;
  }

  .v2-sp__stat-value--positive { color: #059669; }
  .v2-sp__stat-value--negative { color: #DC2626; }

  .v2-sp__stat-sub {
    font-size: 11px;
    color: #2563EB;
    font-weight: 500;
  }

  /* Factor Profile — updated layout (label | bar | values) */
  .v2-sp__factor-row {
    display: grid;
    grid-template-columns: 90px 1fr 120px;
    gap: 12px;
    align-items: center;
  }

  .v2-sp__factor-sep {
    color: #D1D5DB;
    margin: 0 2px;
  }

  /* Metrics Table (Fundamentals — replaces AG Grid) */
  .v2-sp__metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .v2-sp__metrics-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--v2-border, #E5E7EB);
    background: var(--v2-bg-elevated, #FAFAFA);
  }

  .v2-sp__metrics-table thead th:not(:first-child) {
    text-align: right;
  }

  .v2-sp__metrics-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--v2-border-light, #F3F4F6);
    color: var(--v2-text-secondary, #374151);
  }

  .v2-sp__metrics-table tbody td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .v2-sp__metrics-fund {
    font-weight: 700;
    color: #2563EB !important;
  }

  .v2-sp__metrics-diff {
    color: #9CA3AF;
  }

  .v2-sp__metrics-pos {
    color: #059669 !important;
  }

  .v2-sp__metrics-neg {
    color: #DC2626 !important;
  }

  .v2-sp__metrics-table tbody tr:hover {
    background: var(--v2-bg-hover, #F9FAFB);
  }

  /* Allocation Table (Composition tab — Table view) */
  .v2-sp__alloc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .v2-sp__alloc-table thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--v2-text-muted, #6c757d);
    border-bottom: 2px solid var(--v2-border, #E5E7EB);
    background: var(--v2-bg-elevated, #FAFAFA);
  }

  .v2-sp__alloc-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--v2-border-light, #F3F4F6);
    color: var(--v2-text-secondary, #374151);
  }

  .v2-sp__alloc-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }

  .v2-sp__alloc-table thead th.v2-sp__alloc-num {
    text-align: right;
  }

  .v2-sp__alloc-parent td {
    font-weight: 500;
    background: var(--v2-bg-elevated, #FAFBFC);
  }

  .v2-sp__alloc-child td {
    font-size: 11px;
  }

  .v2-sp__alloc-table tbody tr:hover {
    background: var(--v2-bg-hover, #F0F4FF);
  }

  /* Small toggle variant */
  .v2-segToggle--sm .v2-segToggle__btn {
    padding: 4px 12px;
    font-size: 11px;
  }

  /* Fund Management Tab */
  .v2-sp__mgmt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 768px) {
    .v2-sp__mgmt-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .v2-sp__mgmt-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .v2-sp__mgmt-header {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .v2-sp__mgmt-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }

  .v2-sp__mgmt-identity {
    flex: 1;
    min-width: 0;
  }

  .v2-sp__mgmt-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-text-primary, #1F2937);
    margin: 0;
    line-height: 1.3;
  }

  .v2-sp__mgmt-title {
    font-size: 12px;
    color: var(--v2-text-muted, #6B7280);
    display: block;
    margin-top: 2px;
  }

  .v2-sp__mgmt-tenure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    background: #EFF6FF;
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 48px;
  }

  .v2-sp__mgmt-tenure-num {
    font-size: 20px;
    font-weight: 700;
    color: #2563EB;
    line-height: 1;
  }

  .v2-sp__mgmt-tenure-label {
    font-size: 9px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .v2-sp__mgmt-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .v2-sp__mgmt-badge {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--v2-bg-elevated, #F3F4F6);
    color: var(--v2-text-secondary, #374151);
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
  }

  .v2-sp__mgmt-location {
    font-size: 11px;
    color: var(--v2-text-muted, #9CA3AF);
  }

  .v2-sp__mgmt-location i {
    margin-right: 3px;
    color: #D1D5DB;
  }

  .v2-sp__mgmt-bio {
    font-size: 12px;
    line-height: 1.6;
    color: var(--v2-text-secondary, #4B5563);
    margin: 0;
  }

  .v2-sp__mgmt-readmore {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #2563EB;
    cursor: pointer;
  }
  .v2-sp__mgmt-readmore:hover {
    text-decoration: underline;
  }

  .v2-sp__mgmt-contact {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--v2-border-light, #F3F4F6);
  }

  .v2-sp__mgmt-contact-link {
    font-size: 11px;
    color: #2563EB;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .v2-sp__mgmt-contact-link:hover {
    text-decoration: underline;
  }

  .v2-sp__mgmt-contact-link i {
    font-size: 10px;
    color: #93C5FD;
  }

  /* Locked (enterprise-only) contact teaser. Shown to non-enterprise users
     in place of live email/phone links; clicking opens the Enterprise modal
     via QuotaGateV2.showEnterpriseModal (same pattern as locked sidebar
     entries like Form ADV and 13F Filings). */
  .v2-sp__mgmt-contact--locked {
    cursor: pointer;
    align-items: center;
    position: relative;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .v2-sp__mgmt-contact--locked .v2-sp__mgmt-contact-link {
    color: #9CA3AF;
    pointer-events: none;
  }
  .v2-sp__mgmt-contact--locked .v2-sp__mgmt-contact-link i {
    color: #C7D2FE;
  }
  .v2-sp__mgmt-contact-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 6px;
    background: #EEF2FF;
    color: #4338CA;
    border-radius: 4px;
    font-size: 10px;
  }
  .v2-sp__mgmt-contact--locked:hover {
    background: rgba(79, 70, 229, 0.04);
  }
  .v2-sp__mgmt-contact--locked:hover .v2-sp__mgmt-contact-lock {
    background: #E0E7FF;
  }
  .v2-sp__mgmt-contact--locked:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
  }

  /* Badges */
  .v2-sp__sector-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: var(--v2-bg-elevated, #F3F4F6);
    color: var(--v2-text-secondary, #4B5563);
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
  }

  .v2-sp__action-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
  }

  .v2-sp__type-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: #DBEAFE;
    color: #1E40AF;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
  }

  /* Highlight Card (new entry) */
  .v2-sp__highlight-card {
    background: linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 100%);
    border-color: #0964A0;
  }

  .v2-sp__highlight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(9, 100, 160, 0.2);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
  }

  .v2-sp__highlight-body {
    padding: 16px;
  }

  .v2-sp__highlight-ticker {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
  }

  .v2-sp__highlight-name {
    font-size: 14px;
    color: #4B5563;
    margin-bottom: 12px;
  }

  .v2-sp__highlight-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6B7280;
  }

  /* Growth Card (distributions) */
  .v2-sp__growth-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-color: #059669;
  }
  .v2-sp__growth-card .v2-card__body { min-height: 0; flex: none; }

  .v2-sp__growth-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(5, 150, 105, 0.15);
    font-size: 13px;
    font-weight: 600;
    color: #059669;
  }

  .v2-sp__growth-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex: 1;
  }

  .v2-sp__growth-metrics {
    display: flex;
    flex-direction: column;
  }

  .v2-sp__growth-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(5, 150, 105, 0.1);
  }

  .v2-sp__growth-metric-label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
  }

  .v2-sp__growth-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: #059669;
    font-variant-numeric: tabular-nums;
  }

  .v2-sp__growth-streak {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: auto;
    background: rgba(5, 150, 105, 0.06);
  }

  .v2-sp__growth-streak-value {
    font-size: 20px;
    font-weight: 700;
    color: #059669;
    line-height: 1;
  }

  .v2-sp__growth-streak-label {
    font-size: 11px;
    color: #047857;
    line-height: 1.3;
  }

  /* Distribution chart card — compact */
  .v2-sp__dist-chart-card .v2-card__body {
    min-height: 0;
    flex: none;
  }

  /* Payout Timeline */
  .v2-sp__payout-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .v2-sp__payout-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .v2-sp__payout-label {
    font-size: 12px;
    color: var(--v2-text-muted, #6B7280);
  }

  .v2-sp__payout-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-text-primary, #1F2937);
  }

  .v2-sp__payout-countdown {
    text-align: center;
    padding: 12px;
    background: var(--v2-bg-elevated, #F3F4F6);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
  }

  /* Placeholder */
  .v2-sp__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--v2-text-muted, #9CA3AF);
    gap: 12px;
  }

  .v2-sp__placeholder i {
    font-size: 48px;
    opacity: 0.5;
  }

  /* Error State */
  .v2-sp-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #DC2626;
    font-size: 16px;
  }

  /* Responsive Adjustments */
  @media (max-width: 767px) {
    .v2-sp__header {
      padding: 8px 12px;
    }

    .v2-sp__header-row1 {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }

    .v2-sp__header-row2 {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .v2-sp__stats-strip {
      margin-left: 0;
    }

    .v2-sp__price-block {
      flex-wrap: wrap;
      gap: 12px;
    }

    .v2-sp__price-item {
      align-items: flex-start;
    }

    .v2-sp__ticker {
      font-size: 18px;
    }

    .v2-sp__actions {
      margin-left: 0;
    }

    .v2-sp__content {
      padding: 16px;
    }

    .v2-sp__tabs {
      padding: 0 12px;
    }

    .v2-sp__tab {
      padding: 10px 12px;
      font-size: 12px;
    }

    .v2-sp__tab span {
      display: none;
    }
  }
}


/* ============================================================================
   SECURITY PROFILE — DARK THEME OVERRIDES
   Scoped under .dark-theme (set on <html> by themeToggleV2.js).
   Uses the dark palette variables defined in v2-overlay.css.
   ============================================================================ */

/* ── Page Shell ─────────────────────────────────────────────────────────── */
.dark-theme .v2-sp {
  background: #0c111a !important;
}

.dark-theme .v2-sp__header {
  background: #111520 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-sp__header-row2 {
  border-top-color: #1e2433 !important;
}

.dark-theme .v2-sp__ticker {
  color: #e6e9f0;
}

.dark-theme .v2-sp__name {
  color: #ADADAD;
}

.dark-theme .v2-sp__badge {
  background: rgba(9,100,160,0.2);
  color: var(--v2-accent, #0d7cc4);
}

.dark-theme .v2-sp__header-sep {
  color: #ADADAD;
}

.dark-theme .v2-sp__price {
  color: #e6e9f0;
}

.dark-theme .v2-sp__price-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__price-volume {
  color: #e6e9f0;
}

.dark-theme .v2-sp__stat-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__stat-value {
  color: #e6e9f0;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__tabs,
.dark-theme .v2-sp .v2-sp__tabs {
  background: #111520 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-sp__tab,
.dark-theme .v2-sp .v2-sp__tab {
  color: #8b92a5 !important;
}

.dark-theme .v2-sp__tab:hover,
.dark-theme .v2-sp .v2-sp__tab:hover {
  color: #e6e9f0 !important;
  background: rgba(255,255,255,0.05) !important;
}

.dark-theme .v2-sp__tab.is-active,
.dark-theme .v2-sp .v2-sp__tab.is-active {
  color: var(--v2-accent, #0d7cc4) !important;
}

.dark-theme .v2-sp__loading {
  color: #ADADAD;
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__control-label {
  color: #8b92a5 !important;
}

.dark-theme .v2-sp__select {
  background: var(--v2-bg-input, rgba(255,255,255,0.05)) !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}

.dark-theme .v2-sp__select-label {
  color: #ADADAD !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.dark-theme .v2-card,
.dark-theme .v2-sp .v2-card {
  background: #111520 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dark-theme .v2-card__header,
.dark-theme .v2-sp .v2-card__header {
  background: #161b26 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-card__title,
.dark-theme .v2-sp .v2-card__title {
  color: #e6e9f0 !important;
}

.dark-theme .v2-card__subtitle,
.dark-theme .v2-sp .v2-card__subtitle {
  color: #ADADAD !important;
}

/* ── Segmented Toggle ───────────────────────────────────────────────────── */
.dark-theme .v2-segToggle,
.dark-theme .v2-sp .v2-segToggle {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}

.dark-theme .v2-segToggle__btn,
.dark-theme .v2-sp .v2-segToggle__btn {
  color: #c4c9d4 !important;
}

.dark-theme .v2-segToggle__btn:hover,
.dark-theme .v2-sp .v2-segToggle__btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #e6e9f0 !important;
}

/* ── Watchlist Overlay ──────────────────────────────────────────────────── */
.dark-theme .v2-wl-overlay {
  background: #111520 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.25);
}

.dark-theme .v2-wl-overlay__header {
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-wl-overlay__title {
  color: #e6e9f0;
}

.dark-theme .v2-wl-overlay__close {
  color: #ADADAD;
}

.dark-theme .v2-wl-overlay__close:hover {
  background: rgba(255,255,255,0.08);
  color: #e6e9f0;
}

.dark-theme .v2-wl-overlay__loading,
.dark-theme .v2-wl-overlay__empty {
  color: #8b92a5;
}

.dark-theme .v2-wl-overlay__item {
  color: #c4c9d4;
}

.dark-theme .v2-wl-overlay__item:hover {
  background: rgba(255,255,255,0.05);
}

.dark-theme .v2-wl-overlay__item + .v2-wl-overlay__item {
  border-top-color: #1e2433;
}

.dark-theme .v2-wl-overlay__item--added {
  background: rgba(5,150,105,0.1);
}

.dark-theme .v2-wl-overlay__item--added:hover {
  background: rgba(5,150,105,0.1);
}

.dark-theme .v2-wl-overlay__item-count {
  background: #161b26;
  color: #ADADAD;
}

.dark-theme .v2-wl-overlay__footer {
  border-top-color: #1e2433;
}

.dark-theme .v2-wl-overlay__footer .btn {
  background: #161b26;
  border-color: #1e2433;
  color: #c4c9d4;
}

.dark-theme .v2-wl-overlay__footer .btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: #8b92a5;
}

.dark-theme .v2-wl-overlay__body::-webkit-scrollbar-thumb {
  background: #1e2433;
}

/* ── KPI Cards ──────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__kpi-card {
  background: #111520 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dark-theme .v2-sp__kpi-icon {
  background: rgba(9,100,160,0.15) !important;
}

.dark-theme .v2-sp__kpi-value {
  color: #e6e9f0 !important;
}

.dark-theme .v2-sp__kpi-title {
  color: #c4c9d4 !important;
}

.dark-theme .v2-sp__kpi-subtitle {
  color: #8b92a5 !important;
}

/* ── Overview Summary Cards ─────────────────────────────────────────────── */
.dark-theme .v2-sp__ov-stat-box {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}

.dark-theme .v2-sp__ov-stat-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__ov-stat-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__ov-aum-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__ov-aum-sublabel {
  color: #8b92a5;
}

.dark-theme .v2-sp__ov-kv-label {
  color: #ADADAD;
}

.dark-theme .v2-sp__ov-kv-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__ov-badge {
  background: rgba(5,150,105,0.15);
  color: #34D399;
}

.dark-theme .v2-sp__ov-bar-label {
  color: #ADADAD;
}

.dark-theme .v2-sp__ov-bar-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__ov-bar-track {
  background: #161b26;
}

.dark-theme .v2-sp__ov-link:hover {
  color: #0a9bea;
}

/* ── Overview Table (Performance, Holdings) ─────────────────────────────── */
.dark-theme .v2-sp__ov-table th {
  color: #8b92a5 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-sp__ov-table td {
  color: #c4c9d4 !important;
  border-bottom-color: #252d3d !important;
}

.dark-theme .v2-sp__ov-hold-ticker {
  color: #e6e9f0;
}

.dark-theme .v2-sp__ov-hold-total {
  color: #ADADAD;
}

.dark-theme .v2-sp__ov-loading {
  color: #8b92a5;
}

.dark-theme .v2-sp__ov-empty,
.dark-theme .v2-sp__ov-deferred {
  color: #8b92a5;
}

/* ── Overview Trading Card ──────────────────────────────────────────────── */
.dark-theme .v2-sp__ov-trading-signal-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__ov-trading-range-labels {
  color: #8b92a5;
}

.dark-theme .v2-sp__ov-range-marker {
  background: #e6e9f0;
  border-color: #111520;
}

/* ── Overview Icon Badges (adjust for dark bg) ──────────────────────────── */
.dark-theme .v2-sp__ov-icon--blue    { background: rgba(59,130,246,0.15); color: #60A5FA; }
.dark-theme .v2-sp__ov-icon--indigo  { background: rgba(99,102,241,0.15); color: #818CF8; }
.dark-theme .v2-sp__ov-icon--emerald { background: rgba(16,185,129,0.15); color: #34D399; }
.dark-theme .v2-sp__ov-icon--teal    { background: rgba(20,184,166,0.15); color: #2DD4BF; }
.dark-theme .v2-sp__ov-icon--amber   { background: rgba(245,158,11,0.15); color: #FBBF24; }
.dark-theme .v2-sp__ov-icon--slate   { background: rgba(148,163,184,0.15); color: #94A3B8; }
.dark-theme .v2-sp__ov-icon--rose    { background: rgba(244,63,94,0.15); color: #FB7185; }
.dark-theme .v2-sp__ov-icon--violet  { background: rgba(139,92,246,0.15); color: #A78BFA; }

/* ── Scenario Analysis ──────────────────────────────────────────────────── */
.dark-theme .v2-sp__scenario-comp-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__scenario-comp-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__scenario-comp-sub {
  color: #8b92a5;
}

.dark-theme .v2-sp__scenario-table th {
  color: #8b92a5 !important;
  border-bottom-color: #1e2433 !important;
  background: #161b26 !important;
}

.dark-theme .v2-sp__scenario-table td {
  border-bottom-color: #252d3d !important;
}

.dark-theme .v2-sp__scenario-table-row:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ── Trading Tab ────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__trading-date {
  color: #ADADAD;
}

.dark-theme .v2-sp__signal-card {
  background: #111520 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dark-theme .v2-sp__signal-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-theme .v2-sp__signal-card-label {
  color: #8b92a5;
}

/* ── 52-Week Range ──────────────────────────────────────────────────────── */
.dark-theme .v2-52w {
  background: #111520 !important;
  border-color: #1e2433 !important;
}

.dark-theme .v2-52w__label {
  color: #c4c9d4;
  background: #161b26;
}

.dark-theme .v2-52w__price--high {
  color: #c4c9d4;
}

.dark-theme .v2-52w__legend-item {
  color: #8b92a5;
}

.dark-theme .v2-52w__dot {
  background: #e6e9f0;
  border-color: #111520;
}

/* ── Range Bars ─────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__range-label {
  color: #c4c9d4;
}

.dark-theme .v2-sp__range-track {
  background: #161b26;
}

.dark-theme .v2-sp__range-marker {
  background: #e6e9f0;
}

/* ── Trading & Liquidity Stats ──────────────────────────────────────────── */
.dark-theme .v2-tl__row {
  border-bottom-color: #252d3d;
}

.dark-theme .v2-tl__label {
  color: #8b92a5;
}

.dark-theme .v2-tl__value {
  color: #e6e9f0;
}

.dark-theme .v2-tl__bar-track {
  background: #161b26;
}

/* ── Trading Table ──────────────────────────────────────────────────────── */
.dark-theme .v2-sp__trading-table thead th {
  background: #161b26 !important;
  color: #8b92a5 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .v2-sp__trading-table tbody td {
  color: #c4c9d4 !important;
  border-bottom-color: #252d3d !important;
}

.dark-theme .v2-sp__trading-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ── Indicator Select (Technicals Tab) ──────────────────────────────────── */
.dark-theme .v2-sp__ind-row:hover {
  background: rgba(255,255,255,0.04);
}

.dark-theme .v2-sp__ind-row.is-active {
  background: rgba(9,100,160,0.12);
}

/* ── Performance Returns Grid ───────────────────────────────────────────── */
.dark-theme #perf-trailing-grid .ag-header-cell-label {
  color: #8b92a5 !important;
}

.dark-theme #perf-trailing-grid .ag-header {
  border-bottom-color: #1e2433 !important;
}

.dark-theme #perf-trailing-grid .ag-row {
  border-bottom-color: #252d3d !important;
}

.dark-theme #perf-trailing-grid .ag-row:hover {
  background: rgba(255,255,255,0.03) !important;
}

.dark-theme #perf-trailing-grid .ag-row.perf-benchmark-row {
  border-left-color: #8b92a5;
}

.dark-theme #perf-trailing-grid .ag-row.perf-rank-row {
  background: #161b26;
  border-bottom-color: #1e2433 !important;
}

.dark-theme #perf-trailing-grid .ag-row.perf-rank-first {
  border-top-color: #1e2433 !important;
}

.dark-theme #perf-trailing-grid .ag-root-wrapper {
  border-color: #1e2433 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);
}

/* ── Performance Grid Legend ────────────────────────────────────────────── */
.dark-theme .perf-grid-legend {
  color: #8b92a5;
  border-top-color: #252d3d;
}

.dark-theme .perf-grid-legend__label {
  color: #c4c9d4;
}

.dark-theme .perf-grid-legend__text {
  color: #8b92a5;
}

/* ── Model Performance Table ────────────────────────────────────────────── */
.dark-theme .mp-perf-th {
  color: #8b92a5 !important;
  border-bottom-color: #1e2433 !important;
}

.dark-theme .mp-perf-th--name {
  background: #111520 !important;
}

.dark-theme .mp-perf-row {
  border-bottom-color: #252d3d !important;
}

.dark-theme .mp-perf-row--bench {
  background: #161b26 !important;
}

.dark-theme .mp-perf-row--bench .mp-perf-cell--name {
  background: #161b26 !important;
}

.dark-theme .mp-perf-cell--name {
  background: #111520 !important;
}

/* ── Stat Boxes (Composition / Fundamentals) ────────────────────────────── */
.dark-theme .v2-sp__stat-box {
  background: #111520 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.dark-theme .v2-sp__stat-box .v2-sp__stat-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__stat-box .v2-sp__stat-value {
  color: #e6e9f0;
}

/* ── Metrics Table (Fundamentals) ───────────────────────────────────────── */
.dark-theme .v2-sp__metrics-table thead th {
  color: #8b92a5 !important;
  border-bottom-color: #1e2433 !important;
  background: #161b26 !important;
}

.dark-theme .v2-sp__metrics-table tbody td {
  color: #c4c9d4 !important;
  border-bottom-color: #252d3d !important;
}

.dark-theme .v2-sp__metrics-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}

.dark-theme .v2-sp__metrics-fund {
  color: #60A5FA !important;
}

/* ── Allocation Table (Composition) ─────────────────────────────────────── */
.dark-theme .v2-sp__alloc-table thead th {
  border-bottom-color: #1e2433 !important;
  background: #161b26 !important;
}

.dark-theme .v2-sp__alloc-table tbody td {
  color: #c4c9d4 !important;
  border-bottom-color: #252d3d !important;
}

.dark-theme .v2-sp__alloc-parent td {
  background: #161b26 !important;
}

.dark-theme .v2-sp__alloc-table tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ── Factor Profile ─────────────────────────────────────────────────────── */
.dark-theme .v2-sp__factor-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__factor-values {
  color: #c4c9d4;
}

.dark-theme .v2-sp__factor-track {
  background: #161b26;
}

.dark-theme .v2-sp__factor-marker {
  background: #ADADAD;
}

.dark-theme .v2-sp__factor-legend {
  color: #8b92a5;
}

.dark-theme .v2-sp__legend-line {
  background: #ADADAD;
}

.dark-theme .v2-sp__factor-sep {
  color: #1e2433;
}

/* ── Rating Gauges ──────────────────────────────────────────────────────── */
.dark-theme .v2-rating-gauge__label {
  color: #e6e9f0;
}

.dark-theme .v2-rating-gauge__labels {
  color: #8b92a5;
}

.dark-theme .v2-rating-gauge__divider {
  border-top-color: #1e2433;
  color: #8b92a5;
}

.dark-theme .v2-rating-gauge__legend {
  border-top-color: #1e2433;
  color: #8b92a5;
}

/* ── Risk Stats Grid ────────────────────────────────────────────────────── */
.dark-theme #risk-table-grid .ag-row:not(.ag-full-width-row):hover,
.dark-theme #sp-stock-risk-grid .ag-row:not(.ag-full-width-row):hover {
  background-color: rgba(255,255,255,0.06) !important;
}
.dark-theme #risk-table-grid .risk-group-header-row,
.dark-theme #sp-stock-risk-grid .risk-group-header-row {
  background: #1a2030 !important;
  color: #c4c9d4 !important;
  font-weight: 600 !important;
}
/* Keep the AG Grid data rows on a matching dark surface so values never
 * render "white text on white row" in dark mode. */
.dark-theme #sp-stock-risk-grid .ag-row:not(.ag-full-width-row),
.dark-theme #sp-stock-risk-grid .ag-cell {
  background-color: #111520 !important;
  color: #e6e9f0 !important;
  border-color: #1e2433 !important;
}
.dark-theme #sp-stock-risk-grid .ag-header,
.dark-theme #sp-stock-risk-grid .ag-header-row,
.dark-theme #sp-stock-risk-grid .ag-header-cell {
  background-color: #1a2030 !important;
  color: #c4c9d4 !important;
  border-color: #1e2433 !important;
}
/* Dark-theme class-based overrides for the cell renderers — these pair
 * with the light-theme defaults added above so the grid re-paints on
 * theme toggle without needing a re-render. */
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__label,
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__val {
  color: #f1f3f7 !important;
}
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__val--neg,
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__bench--neg {
  color: #ef4444 !important;
}
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__bench {
  color: #8b92a5 !important;
}
.dark-theme #sp-stock-risk-grid .sp-stock-risk-grid__group-inner {
  background: #1a2030 !important;
  color: #c4c9d4 !important;
}

/* ── AG Grid global dark overrides ─────────────────────────────────────── */
.dark-theme .ag-theme-balham .ag-root-wrapper {
  background-color: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .ag-theme-balham .ag-header,
.dark-theme .ag-theme-balham .ag-header-viewport,
.dark-theme .ag-theme-balham .ag-header-container,
.dark-theme .ag-theme-balham .ag-header-row {
  background-color: #161b26 !important;
  border-bottom-color: #1e2433 !important;
}
.dark-theme .ag-theme-balham .ag-header-cell,
.dark-theme .ag-theme-balham .ag-header-group-cell {
  background-color: #161b26 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .ag-theme-balham .ag-header-cell-label { color: #8b92a5 !important; }
.dark-theme .ag-theme-balham .ag-header-cell:hover { background-color: #1a2030 !important; }
.dark-theme .ag-theme-balham .ag-row {
  background-color: #111520 !important;
  color: #e6e9f0 !important;
  border-bottom-color: #252d3d !important;
}
.dark-theme .ag-theme-balham .ag-row-odd { background-color: #0e1219 !important; }
.dark-theme .ag-theme-balham .ag-row:hover,
.dark-theme .ag-theme-balham .ag-row-hover {
  background-color: rgba(255,255,255,.06) !important;
}
.dark-theme .ag-theme-balham .ag-row-selected { background-color: rgba(9,100,160,.15) !important; }
.dark-theme .ag-theme-balham .ag-cell {
  color: #e6e9f0 !important;
  border-color: #252d3d !important;
}
.dark-theme .ag-theme-balham .ag-full-width-row { background-color: #161b26 !important; }
.dark-theme .ag-theme-balham .ag-body-viewport { background-color: #111520 !important; }
.dark-theme .ag-theme-balham .ag-paging-panel {
  background-color: #161b26 !important;
  border-top-color: #1e2433 !important;
  color: #8b92a5 !important;
}
.dark-theme .ag-theme-balham .ag-icon { color: #8b92a5 !important; }
.dark-theme .ag-theme-balham .ag-pinned-left-header,
.dark-theme .ag-theme-balham .ag-pinned-right-header {
  background-color: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .ag-theme-balham input[class^="ag-"] {
  background: #161b26 !important;
  color: #e6e9f0 !important;
  border-color: #1e2433 !important;
}

/* ── Fund Management ────────────────────────────────────────────────────── */
.dark-theme .v2-sp__mgmt-name {
  color: #e6e9f0;
}

.dark-theme .v2-sp__mgmt-title {
  color: #ADADAD;
}

.dark-theme .v2-sp__mgmt-tenure {
  background: rgba(37,99,235,0.12) !important;
}

.dark-theme .v2-sp__mgmt-tenure-label {
  color: #8b92a5;
}

.dark-theme .v2-sp__mgmt-badge {
  background: #161b26 !important;
  color: #c4c9d4 !important;
}

.dark-theme .v2-sp__mgmt-location {
  color: #8b92a5;
}

.dark-theme .v2-sp__mgmt-location i {
  color: #1e2433;
}

.dark-theme .v2-sp__mgmt-bio {
  color: #c4c9d4;
}

.dark-theme .v2-sp__mgmt-contact {
  border-top-color: #252d3d;
}

.dark-theme .v2-sp__mgmt-contact-link {
  color: #60A5FA;
}

.dark-theme .v2-sp__mgmt-contact-link i {
  color: #93C5FD;
}

.dark-theme .v2-sp__mgmt-contact--locked .v2-sp__mgmt-contact-link {
  color: #6b7280;
}
.dark-theme .v2-sp__mgmt-contact--locked .v2-sp__mgmt-contact-link i {
  color: #4F46E5;
}
.dark-theme .v2-sp__mgmt-contact-lock {
  background: rgba(79, 70, 229, 0.18);
  color: #C7D2FE;
}
.dark-theme .v2-sp__mgmt-contact--locked:hover {
  background: rgba(99, 102, 241, 0.08);
}
.dark-theme .v2-sp__mgmt-contact--locked:hover .v2-sp__mgmt-contact-lock {
  background: rgba(99, 102, 241, 0.28);
}

/* ── Highlight Card ─────────────────────────────────────────────────────── */
.dark-theme .v2-sp__highlight-card {
  background: linear-gradient(135deg, rgba(9,100,160,0.12) 0%, rgba(9,100,160,0.06) 100%) !important;
}

.dark-theme .v2-sp__highlight-ticker {
  color: #e6e9f0;
}

.dark-theme .v2-sp__highlight-name {
  color: #c4c9d4;
}

.dark-theme .v2-sp__highlight-meta {
  color: #ADADAD;
}

/* ── Growth Card (Distributions) ────────────────────────────────────────── */
.dark-theme .v2-sp__growth-card {
  background: linear-gradient(135deg, rgba(5,150,105,0.1) 0%, rgba(16,185,129,0.06) 100%) !important;
}

.dark-theme .v2-sp__growth-metric-label {
  color: #c4c9d4;
}

.dark-theme .v2-sp__growth-streak {
  background: rgba(5,150,105,0.08);
}

.dark-theme .v2-sp__growth-streak-label {
  color: #34D399;
}

/* ── Distributions ──────────────────────────────────────────────────────── */
.dark-theme .v2-sp__payout-label {
  color: #ADADAD;
}

.dark-theme .v2-sp__payout-value {
  color: #e6e9f0;
}

.dark-theme .v2-sp__payout-countdown {
  background: #161b26 !important;
}

/* ── Insight Box ────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__insight {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.25) !important;
}

.dark-theme .v2-sp__insight-header {
  color: #FBBF24;
}

.dark-theme .v2-sp__insight p {
  color: #c4c9d4;
}

.dark-theme .v2-sp__read-more--insight {
  color: #FBBF24;
}

.dark-theme .v2-sp__read-more--insight:hover {
  color: #F59E0B;
}

/* ── Strategy ───────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__strategy-text {
  color: #c4c9d4;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.dark-theme .v2-sp__sector-badge {
  background: #161b26 !important;
  color: #c4c9d4 !important;
}

.dark-theme .v2-sp__type-badge {
  background: rgba(37,99,235,0.15) !important;
  color: #60A5FA !important;
}

/* ── Placeholder / Error ────────────────────────────────────────────────── */
.dark-theme .v2-sp__placeholder {
  color: #8b92a5;
}

/* ── Style Map (dark) ──────────────────────────────────────────────────── */
.dark-theme .v2-sp__style-map-col-label,
.dark-theme .v2-sp__style-map-row-label {
  color: #8b92a5 !important;
}
.dark-theme .v2-sp__style-map-cell {
  color: #e6e9f0 !important;
}
.dark-theme .v2-sp__style-map-cell-label {
  color: rgba(255,255,255,.7) !important;
}
.dark-theme .v2-sp__style-map-cell-bench {
  color: rgba(255,255,255,.6) !important;
}
.dark-theme .v2-sp__style-weighted-avg {
  color: #8b92a5 !important;
}
.dark-theme .v2-sp__style-map-tooltip {
  background: #161b26;
  color: #e6e9f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ── Profile Home / Search (dark) ──────────────────────────────────────── */
.dark-theme .v2-profile-home-container {
  background: #0c111a !important;
}
.dark-theme .v2-profile-home-title {
  color: #e6e9f0 !important;
}
.dark-theme .v2-profile-home-subtitle {
  color: #8b92a5 !important;
}
.dark-theme .v2-profile-home-icon {
  color: #0d7cc4 !important;
}
.dark-theme .v2-type-btn {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #8b92a5 !important;
}
.dark-theme .v2-type-btn:hover {
  background: #1a2030 !important;
  border-color: #0d7cc4 !important;
  color: #0d7cc4 !important;
}
.dark-theme .v2-type-btn.active {
  background: #0964A0 !important;
  border-color: #0964A0 !important;
  color: #fff !important;
}
.dark-theme .v2-profile-home-search-input {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}
.dark-theme .v2-profile-home-search-input:focus {
  background: #111520 !important;
  border-color: #0964A0 !important;
  box-shadow: 0 0 0 3px rgba(9,100,160,.2) !important;
}
.dark-theme .v2-profile-home-search-input::placeholder {
  color: #6b7280 !important;
}
.dark-theme .v2-profile-home-search-input-wrapper > i {
  color: #6b7280 !important;
}
.dark-theme .v2-search-kbd {
  background: #252d3d !important;
  color: #6b7280 !important;
}
.dark-theme .v2-profile-home-search-dropdown {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
.dark-theme .v2-ph-dd-item:hover,
.dark-theme .v2-ph-dd-item.active {
  background: #1e2433 !important;
}
.dark-theme .v2-ph-dd-name {
  color: #e6e9f0 !important;
}
.dark-theme .v2-ph-dd-ticker {
  color: #0d7cc4 !important;
}
.dark-theme .v2-ph-dd-type {
  color: #6b7280 !important;
}
.dark-theme .v2-ph-dd-empty {
  color: #6b7280 !important;
}
.dark-theme .v2-profile-home-recent-title {
  color: #8b92a5 !important;
}
.dark-theme .v2-profile-home-clear-recent {
  color: #6b7280 !important;
}
.dark-theme .v2-profile-home-clear-recent:hover {
  color: #0d7cc4 !important;
}
.dark-theme .v2-profile-home-recent-item {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-profile-home-recent-item:hover {
  background: rgba(9,100,160,.15) !important;
  border-color: #0964A0 !important;
}
.dark-theme .v2-recent-item-id {
  color: #0d7cc4 !important;
}
.dark-theme .v2-recent-item-name {
  color: #8b92a5 !important;
}
.dark-theme .v2-profile-home-empty-recent {
  color: #6b7280 !important;
}
.dark-theme .v2-profile-home-quicklink {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #8b92a5 !important;
}
.dark-theme .v2-profile-home-quicklink:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: #0964A0 !important;
  color: #0d7cc4 !important;
}
.dark-theme .v2-profile-home-quicklink i {
  color: #0d7cc4 !important;
}

/* ── Research Top Bar / Universe Bar (dark) ─────────────────────────────── */
.dark-theme .rc-top-bar {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .rc-top-bar__label {
  color: #6b7280 !important;
}
.dark-theme .rc-top-bar__value {
  color: #8b92a5 !important;
}
.dark-theme .rc-top-bar__value--active {
  color: #e6e9f0 !important;
}
.dark-theme .rc-top-chip {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .rc-top-chip--active {
  background: rgba(99,102,241,.15) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}
.dark-theme .rc-top-sep {
  color: #6b7280 !important;
}
.dark-theme .rc-top-fund-count {
  color: #6b7280 !important;
}
.dark-theme .rc-top-btn {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .rc-top-btn:hover:not(.disabled):not(:disabled) {
  background: #1a2030 !important;
  border-color: #6366f1 !important;
  color: #6366f1 !important;
}
.dark-theme .rc-top-btn--accent {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .rc-top-btn--accent:hover:not(.disabled):not(:disabled) {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}
.dark-theme .rc-top-btn--clear {
  background: transparent !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.dark-theme .rc-top-btn--clear:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
}
.dark-theme .rc-top-badge {
  background: rgba(99,102,241,.2) !important;
  color: #818cf8 !important;
  border-color: #6366f1 !important;
}

/* ── Country Selector (dark) ───────────────────────────────────────────── */
.dark-theme .country-selector__trigger {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .country-selector__trigger:hover {
  border-color: #6366f1 !important;
}
.dark-theme .country-selector.is-open .country-selector__trigger {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
}
.dark-theme .country-selector__label {
  color: #e6e9f0 !important;
}
.dark-theme .country-selector__chevron {
  border-top-color: #8b92a5 !important;
}
.dark-theme .country-selector__dropdown {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-theme .country-selector__search {
  border-bottom-color: #1e2433 !important;
}
.dark-theme .country-selector__search-input {
  background: #111520 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .country-selector__search-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
}
.dark-theme .country-selector__search-input::placeholder {
  color: #6b7280 !important;
}
.dark-theme .country-selector__option:hover {
  background: rgba(255,255,255,.05) !important;
}
.dark-theme .country-selector__option.is-selected {
  background: rgba(99,102,241,.1) !important;
}
.dark-theme .country-selector__option.is-selected:hover {
  background: rgba(99,102,241,.15) !important;
}
.dark-theme .country-selector__option-text {
  color: #c4c9d4 !important;
}
.dark-theme .country-selector__option-code {
  color: #6b7280 !important;
}
.dark-theme .country-selector__option.is-selected .country-selector__option-text {
  color: #818cf8 !important;
}
.dark-theme .country-selector__no-results {
  color: #6b7280 !important;
}

/* ── Chart Lab (dark) ──────────────────────────────────────────────────── */

/* Sidebar */
.dark-theme .cb-sidebar {
  background: #111520 !important;
  color: #e6e9f0 !important;
  border-right-color: #1e2433 !important;
}
.dark-theme .cb-sidebar-header {
  border-bottom-color: #1e2433 !important;
}
.dark-theme .cb-sidebar-logo {
  color: #818cf8 !important;
}
.dark-theme .cb-toggle-btn {
  color: #8b92a5 !important;
  border-color: #252d3d !important;
  background: transparent !important;
}
.dark-theme .cb-toggle-btn:hover {
  background: rgba(99,102,241,.1) !important;
  color: #818cf8 !important;
  border-color: #6366f1 !important;
}

/* Content area */
.dark-theme .cb-content {
  background: #0c111a !important;
}

/* Zoom / period toolbar */
.dark-theme .cb-zoom-toolbar {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-zoom-group {
  background: #111520 !important;
}
.dark-theme .cb-zoom-btn {
  color: #8b92a5 !important;
}
.dark-theme .cb-zoom-btn:hover {
  color: #e6e9f0 !important;
  background: rgba(255,255,255,.06) !important;
}
.dark-theme .cb-zoom-btn.active {
  background: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .cb-zoom-reset-btn {
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-zoom-reset-btn:hover {
  color: #818cf8 !important;
  border-color: #6366f1 !important;
  background: rgba(99,102,241,.08) !important;
}

/* Date inputs */
.dark-theme .cb-date-input {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-date-separator {
  border-color: #1e2433 !important;
}
.dark-theme .cb-date-dash {
  color: #6b7280 !important;
}

/* Action buttons bar */
.dark-theme .cb-action-buttons {
  background: #111520 !important;
}
.dark-theme .cb-action-btn {
  color: #8b92a5 !important;
}
.dark-theme .cb-action-btn:hover {
  color: #e6e9f0 !important;
  background: rgba(255,255,255,.06) !important;
}
.dark-theme .cb-action-settings.active {
  background: #6366f1 !important;
  color: #fff !important;
}

/* Upload logo button */
.dark-theme .cb-upload-logo-btn {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-upload-logo-btn:hover {
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}

/* Main chart container */
.dark-theme #cb-main-chart {
  background: #111520 !important;
  border-color: #1e2433 !important;
}

/* Empty state */
.dark-theme .cb-empty-state {
  color: #6b7280 !important;
}
.dark-theme .cb-empty-state p {
  color: #8b92a5 !important;
}

/* Sidebar form inputs */
.dark-theme .cb-init-input,
.dark-theme #cb-ticker-input,
.dark-theme .cb-chart-title-input,
.dark-theme .cb-compare-input,
.dark-theme .cb-popover-search,
.dark-theme .cb-modal-input,
.dark-theme .cb-modal-select,
.dark-theme .cb-formula-input,
.dark-theme .cb-footer-input {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-init-input::placeholder,
.dark-theme #cb-ticker-input::placeholder,
.dark-theme .cb-chart-title-input::placeholder,
.dark-theme .cb-compare-input::placeholder,
.dark-theme .cb-popover-search::placeholder,
.dark-theme .cb-modal-input::placeholder,
.dark-theme .cb-footer-input::placeholder {
  color: #6b7280 !important;
}
.dark-theme .cb-init-input:focus,
.dark-theme #cb-ticker-input:focus,
.dark-theme .cb-chart-title-input:focus,
.dark-theme .cb-compare-input:focus,
.dark-theme .cb-popover-search:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
}

/* Labels */
.dark-theme .cb-init-label,
.dark-theme .cb-init-section,
.dark-theme .cb-chart-title-label,
.dark-theme .cb-add-data-header,
.dark-theme .cb-widget-section-title,
.dark-theme .cb-per-metric-section-label,
.dark-theme .cb-popover-panel-title {
  color: #8b92a5 !important;
}

/* Widget header */
.dark-theme .cb-widget-header {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-widget-ticker-symbol {
  color: #e6e9f0 !important;
}
.dark-theme .cb-widget-ticker-label {
  color: #8b92a5 !important;
}
.dark-theme .cb-widget-reset-btn {
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-widget-reset-btn:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Metric blocks */
.dark-theme .cb-metric-block {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-metric-block-header {
  background: #1a2030 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-metric-block-title {
  color: #e6e9f0 !important;
}
.dark-theme .cb-metric-drag-handle {
  color: #6b7280 !important;
}
.dark-theme .cb-metric-action-btn {
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-metric-action-btn:hover {
  background: rgba(99,102,241,.1) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}
.dark-theme .cb-metric-action-btn.remove:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Metric settings */
.dark-theme .cb-metric-settings {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-settings-row label,
.dark-theme .cb-metric-funds-label {
  color: #8b92a5 !important;
}
.dark-theme .cb-settings-select,
.dark-theme .cb-settings-number,
.dark-theme .cb-settings-color,
.dark-theme .cb-type-select,
.dark-theme .cb-dataset-select,
.dark-theme .cb-entity-dropdown,
.dark-theme .cb-formula-field input,
.dark-theme .cb-formula-field select,
.dark-theme .cb-draw-width-select,
.dark-theme .cb-draw-dash-select,
.dark-theme .cb-draw-color-input {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-fund-chip {
  background: #1a2030 !important;
  color: #c4c9d4 !important;
}

/* Add data trigger / popover */
.dark-theme .cb-add-data-trigger {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-add-data-trigger:hover {
  border-color: #6366f1 !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-add-data-trigger-selected {
  color: #e6e9f0 !important;
  background: rgba(99,102,241,.06) !important;
  border-color: #6366f1 !important;
}
.dark-theme .cb-add-data-clear {
  background: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-add-data-clear:hover {
  background: rgba(239,68,68,.1) !important;
  color: #ef4444 !important;
}
.dark-theme .cb-metric-trigger {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-metric-trigger:hover {
  border-color: #6366f1 !important;
  color: #e6e9f0 !important;
}

/* Popover panels */
.dark-theme .cb-add-data-popover-fixed,
.dark-theme .cb-mega-menu {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-theme .cb-popover-master,
.dark-theme .cb-mega-sources {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-popover-nav-item {
  color: #8b92a5 !important;
}
.dark-theme .cb-popover-nav-item:hover {
  color: #e6e9f0 !important;
  background: rgba(255,255,255,.05) !important;
}
.dark-theme .cb-popover-nav-item.cb-popover-nav-active {
  color: #818cf8 !important;
  background: rgba(99,102,241,.1) !important;
  border-color: #6366f1 !important;
}
.dark-theme .cb-popover-list-item {
  color: #c4c9d4 !important;
}
.dark-theme .cb-popover-list-item:hover {
  background: rgba(99,102,241,.08) !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-popover-item-selected {
  color: #818cf8 !important;
  background: rgba(99,102,241,.1) !important;
}
.dark-theme .cb-popover-empty {
  color: #6b7280 !important;
}
.dark-theme .cb-per-metric-popover-header {
  background: #111520 !important;
  border-color: #1e2433 !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-per-metric-popover-header strong {
  color: #e6e9f0 !important;
}

/* Mega menu categories / options */
.dark-theme .cb-mega-category-list {
  background: #111520 !important;
}
.dark-theme .cb-mega-category-item {
  color: #c4c9d4 !important;
}
.dark-theme .cb-mega-category-item:hover,
.dark-theme .cb-mega-category-item.active {
  background: rgba(99,102,241,.1) !important;
  color: #818cf8 !important;
}
.dark-theme .cb-mega-option {
  border-color: #1e2433 !important;
}
.dark-theme .cb-mega-option:hover {
  background: rgba(255,255,255,.04) !important;
}
.dark-theme .cb-mega-option-name {
  color: #e6e9f0 !important;
}
.dark-theme .cb-mega-option-desc {
  color: #6b7280 !important;
}
.dark-theme .cb-mega-search {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}

/* Econ browser */
.dark-theme .cb-econ-category-header {
  border-color: #1e2433 !important;
  color: #818cf8 !important;
}
.dark-theme .cb-econ-unit-badge {
  background: #1a2030 !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-econ-series-item:hover {
  background: rgba(255,255,255,.04) !important;
}

/* Buttons (primary) */
.dark-theme .cb-init-btn,
.dark-theme .cb-add-metric-btn,
.dark-theme .cb-metric-modal-done-btn,
.dark-theme .cb-formula-calculate-btn,
.dark-theme .cb-logo-apply-btn,
.dark-theme .cb-action-apply-all,
.dark-theme .cb-draw-done {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .cb-init-btn:hover,
.dark-theme .cb-add-metric-btn:hover,
.dark-theme .cb-metric-modal-done-btn:hover,
.dark-theme .cb-formula-calculate-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* Secondary / cancel buttons */
.dark-theme .cb-active-action-btn,
.dark-theme .cb-modal-btn-cancel,
.dark-theme .cb-formula-cancel-btn,
.dark-theme .cb-action-create-new,
.dark-theme .cb-add-formula-btn {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-active-action-btn:hover,
.dark-theme .cb-modal-btn-cancel:hover,
.dark-theme .cb-formula-cancel-btn:hover,
.dark-theme .cb-action-create-new:hover,
.dark-theme .cb-add-formula-btn:hover {
  background: #1a2030 !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}

/* Save button */
.dark-theme .cb-modal-btn-save {
  background: #059669 !important;
  color: #fff !important;
}

/* Modals – content shells */
.dark-theme .cb-metric-modal-content,
.dark-theme .cb-modal-overlay > div,
.dark-theme #save-chart-modal > div,
.dark-theme #delete-chart-modal > div,
.dark-theme .cb-share-hub-content,
.dark-theme .cb-share-save-popover__inner,
.dark-theme .cb-formula-modal-content,
.dark-theme .cb-wu-modal-content,
.dark-theme .cb-logo-modal-content,
.dark-theme .cb-snapshot-modal-content,
.dark-theme #custom-formula-modal > div,
.dark-theme #wu-selection-modal > div,
.dark-theme #logo-upload-modal > div {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}

/* Modals – headers */
.dark-theme .cb-metric-modal-header,
.dark-theme .cb-metric-modal-footer,
.dark-theme .cb-modal-header,
.dark-theme .cb-share-hub-header,
.dark-theme .cb-formula-modal-header,
.dark-theme .cb-wu-modal-header,
.dark-theme .cb-logo-modal-header,
.dark-theme .cb-snapshot-modal-header,
.dark-theme .cb-formula-modal-footer {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-metric-modal-header h3,
.dark-theme .cb-modal-header h3,
.dark-theme .cb-share-hub-header h3,
.dark-theme .cb-formula-modal-header h3,
.dark-theme .cb-wu-modal-header h3,
.dark-theme .cb-logo-modal-header h3,
.dark-theme .cb-snapshot-modal-header h3 {
  color: #e6e9f0 !important;
}
.dark-theme .cb-metric-modal-footer-info {
  color: #8b92a5 !important;
}

/* Modals – close buttons */
.dark-theme .cb-modal-close,
.dark-theme .cb-share-hub-close,
.dark-theme .cb-logo-modal-close {
  border-color: #252d3d !important;
  color: #8b92a5 !important;
  background: transparent !important;
}
.dark-theme .cb-modal-close:hover,
.dark-theme .cb-share-hub-close:hover,
.dark-theme .cb-logo-modal-close:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Modals – body content */
.dark-theme .cb-modal-body,
.dark-theme .cb-share-hub-body,
.dark-theme .cb-formula-modal-body,
.dark-theme .cb-wu-modal-body,
.dark-theme .cb-logo-modal-body {
  color: #e6e9f0 !important;
}

/* Share hub sections */
.dark-theme .cb-share-section + .cb-share-section {
  border-color: #1e2433 !important;
}
.dark-theme .cb-share-section-title {
  color: #e6e9f0 !important;
}
.dark-theme .cb-share-section-desc {
  color: #8b92a5 !important;
}
.dark-theme .cb-share-section-icon.social {
  background: rgba(99,102,241,.1) !important;
  color: #818cf8 !important;
}
.dark-theme .cb-share-section-icon.image {
  background: rgba(16,185,129,.1) !important;
  color: #34d399 !important;
}
.dark-theme .cb-share-link-input {
  background: #111520 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-share-link-copy {
  background: #1a2030 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-share-link-copy:hover {
  background: #252d3d !important;
}
.dark-theme .cb-share-social-btn {
  border-color: #252d3d !important;
  background: #111520 !important;
}
.dark-theme .cb-share-social-btn.btn-x {
  color: #c4c9d4 !important;
}
.dark-theme .cb-share-social-btn.btn-x:hover {
  background: #1a2030 !important;
}
.dark-theme .cb-share-image-btn {
  border-color: #252d3d !important;
  background: #111520 !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-share-image-btn:hover {
  background: #1a2030 !important;
  border-color: #6b7280 !important;
}
.dark-theme .cb-share-image-thumb {
  border-color: #252d3d !important;
  background: #111520 !important;
}

/* WU modal tabs */
.dark-theme .cb-wu-modal-tabs {
  border-color: #1e2433 !important;
}
.dark-theme .wu-tab-btn {
  color: #8b92a5 !important;
  border-color: transparent !important;
}
.dark-theme .wu-tab-btn:hover {
  color: #e6e9f0 !important;
  background: rgba(255,255,255,.04) !important;
}
.dark-theme .wu-tab-btn.active {
  color: #818cf8 !important;
  border-color: #6366f1 !important;
}
.dark-theme .wu-item-row {
  color: #c4c9d4 !important;
}
.dark-theme .wu-item-row:hover {
  background: rgba(99,102,241,.06) !important;
}

/* Logo modal */
.dark-theme .cb-logo-modal-preview {
  background: #111520 !important;
  border-color: #252d3d !important;
}
.dark-theme .cb-logo-modal-hint {
  color: #6b7280 !important;
}

/* Formula modal – variable map */
.dark-theme .cb-variable-map {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-variable-desc {
  color: #c4c9d4 !important;
}
.dark-theme .cb-variable-clickable:hover {
  background: rgba(255,255,255,.04) !important;
}
.dark-theme .cb-formula-field label {
  color: #8b92a5 !important;
}

/* ── Security Lookup (dark) ───────────────────────────────────────────── */

/* Header */
.dark-theme .v2-sec-lookup__header h1 {
  color: #e6e9f0 !important;
}
.dark-theme .v2-sec-lookup__header h1 i {
  color: #818cf8 !important;
}
.dark-theme .v2-sec-lookup__header p {
  color: #8b92a5 !important;
}

/* Input row */
.dark-theme .v2-sec-lookup__input-row {
  background: #161b26 !important;
  border-color: #252d3d !important;
}
.dark-theme .v2-sec-lookup__input-row:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
}
.dark-theme .v2-sec-lookup__input {
  color: #e6e9f0 !important;
}
.dark-theme .v2-sec-lookup__input::placeholder {
  color: #6b7280 !important;
}

/* Chips */
.dark-theme .v2-sec-lookup__chip {
  background: rgba(99,102,241,.12) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #818cf8 !important;
}

/* Quick picks */
.dark-theme .v2-sec-lookup__quick-label {
  color: #8b92a5 !important;
}
.dark-theme .v2-sec-lookup__quick-btn {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .v2-sec-lookup__quick-btn:hover {
  background: rgba(99,102,241,.1) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}

/* KPI cards */
.dark-theme .v2-sec-lookup__kpi {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup__kpi-icon {
  color: #818cf8 !important;
}
.dark-theme .v2-sec-lookup__kpi-value {
  color: #e6e9f0 !important;
}
.dark-theme .v2-sec-lookup__kpi-label {
  color: #8b92a5 !important;
}

/* Exposure bar track in grid */
.dark-theme .v2-sec-lookup__exposure-track {
  background: #252d3d !important;
}
.dark-theme .v2-sec-lookup__exposure-fill {
  background: #6366f1 !important;
}

/* v2-card overrides for Security Lookup cards */
.dark-theme .v2-sec-lookup .v2-card {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .v2-card__header {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .v2-card__title {
  color: #e6e9f0 !important;
}
.dark-theme .v2-sec-lookup .v2-card__title i {
  color: #818cf8 !important;
}
.dark-theme .v2-sec-lookup .v2-card__subtitle {
  color: #8b92a5 !important;
}
.dark-theme .v2-sec-lookup .v2-card__body {
  background: #111520 !important;
}

/* Analyze button */
.dark-theme .v2-sec-lookup #sec-lookup-analyze-btn {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .v2-sec-lookup #sec-lookup-analyze-btn:hover {
  background: #4f46e5 !important;
}

/* Export button */
.dark-theme .v2-sec-lookup .btn-utility {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .v2-sec-lookup .btn-utility:hover {
  background: rgba(99,102,241,.1) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}

/* AG Grid inside Security Lookup */
.dark-theme .v2-sec-lookup .ag-theme-balham {
  --ag-background-color: #111520 !important;
  --ag-header-background-color: #161b26 !important;
  --ag-odd-row-background-color: #0e1219 !important;
  --ag-row-hover-color: rgba(255,255,255,.06) !important;
  --ag-border-color: #1e2433 !important;
  --ag-header-foreground-color: #8b92a5 !important;
  --ag-foreground-color: #c4c9d4 !important;
  --ag-secondary-foreground-color: #8b92a5 !important;
  --ag-input-border-color: #252d3d !important;
  --ag-range-selection-background-color: rgba(99,102,241,.15) !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-root-wrapper {
  background-color: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header,
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header-viewport,
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header-container,
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header-row {
  background-color: #161b26 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header-cell,
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-header-group-cell {
  background-color: #161b26 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-row {
  background-color: #111520 !important;
  color: #c4c9d4 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-row-odd {
  background-color: #0e1219 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-row:hover,
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-row-hover {
  background-color: rgba(255,255,255,.06) !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-cell {
  color: #c4c9d4 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-body-viewport {
  background-color: #111520 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-paging-panel {
  background-color: #161b26 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-paging-button {
  color: #8b92a5 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-icon {
  color: #8b92a5 !important;
}

/* Detail grid (master/detail) */
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-details-row {
  background-color: #0e1219 !important;
}
.dark-theme .v2-sec-lookup .ag-theme-balham .ag-full-width-row {
  background-color: #0e1219 !important;
}

/* ── Fund Overlap (dark) ──────────────────────────────────────────────── */

/* Header */
.dark-theme .v2-overlap__header h1 {
  color: #e6e9f0 !important;
}
.dark-theme .v2-overlap__header h1 i {
  color: #818cf8 !important;
}
.dark-theme .v2-overlap__header p {
  color: #8b92a5 !important;
}

/* Cards */
.dark-theme .v2-overlap .v2-card {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .v2-card__header {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .v2-card__title {
  color: #e6e9f0 !important;
}
.dark-theme .v2-overlap .v2-card__title i {
  color: #818cf8 !important;
}
.dark-theme .v2-overlap .v2-card__subtitle {
  color: #8b92a5 !important;
}
.dark-theme .v2-overlap .v2-card__body {
  background: #111520 !important;
}

/* Clear button */
.dark-theme .v2-overlap .btn-outline {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .v2-overlap .btn-outline:hover {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Filter input in holdings card */
.dark-theme .v2-overlap #overlap-holdings-filter {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .v2-overlap #overlap-holdings-filter::placeholder {
  color: #6b7280 !important;
}
.dark-theme .v2-overlap #overlap-holdings-filter:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
}

/* Export button */
.dark-theme .v2-overlap .btn-utility {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #8b92a5 !important;
}
.dark-theme .v2-overlap .btn-utility:hover {
  background: rgba(99,102,241,.1) !important;
  border-color: #6366f1 !important;
  color: #818cf8 !important;
}

/* AG Grid inside Fund Overlap */
.dark-theme .v2-overlap .ag-theme-balham {
  --ag-background-color: #111520 !important;
  --ag-header-background-color: #161b26 !important;
  --ag-odd-row-background-color: #0e1219 !important;
  --ag-row-hover-color: rgba(255,255,255,.06) !important;
  --ag-border-color: #1e2433 !important;
  --ag-header-foreground-color: #8b92a5 !important;
  --ag-foreground-color: #c4c9d4 !important;
  --ag-secondary-foreground-color: #8b92a5 !important;
  --ag-input-border-color: #252d3d !important;
  --ag-range-selection-background-color: rgba(99,102,241,.15) !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-root-wrapper {
  background-color: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-header,
.dark-theme .v2-overlap .ag-theme-balham .ag-header-viewport,
.dark-theme .v2-overlap .ag-theme-balham .ag-header-container,
.dark-theme .v2-overlap .ag-theme-balham .ag-header-row {
  background-color: #161b26 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-header-cell,
.dark-theme .v2-overlap .ag-theme-balham .ag-header-group-cell {
  background-color: #161b26 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-row {
  background-color: #111520 !important;
  color: #c4c9d4 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-row-odd {
  background-color: #0e1219 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-row:hover,
.dark-theme .v2-overlap .ag-theme-balham .ag-row-hover {
  background-color: rgba(255,255,255,.06) !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-cell {
  color: #c4c9d4 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-body-viewport {
  background-color: #111520 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-paging-panel {
  background-color: #161b26 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-paging-button {
  color: #8b92a5 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-icon {
  color: #8b92a5 !important;
}
.dark-theme .v2-overlap .ag-theme-balham .ag-group-expanded,
.dark-theme .v2-overlap .ag-theme-balham .ag-group-contracted {
  color: #8b92a5 !important;
}

/* Saved charts dropdown */
.dark-theme .cb-saved-charts-trigger {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-saved-chart-item {
  color: #c4c9d4 !important;
}
.dark-theme .cb-saved-chart-item:hover {
  background: rgba(255,255,255,.05) !important;
}
.dark-theme .cb-saved-chart-item.active {
  background: rgba(99,102,241,.1) !important;
  color: #818cf8 !important;
}

/* Export dropdown */
.dark-theme #export-dropdown {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-theme .cb-export-option {
  color: #c4c9d4 !important;
}
.dark-theme .cb-export-option:hover {
  background: rgba(255,255,255,.05) !important;
}

/* Settings / popover menus */
.dark-theme #settings-popover-menu,
.dark-theme #global-settings-popover,
.dark-theme #logo-controls-popover {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-theme .cb-settings-section {
  border-color: #1e2433 !important;
}
.dark-theme .cb-settings-section-title {
  color: #8b92a5 !important;
}

/* Draw toolbar */
.dark-theme .cb-draw-toolbar {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-draw-group-label {
  color: #6b7280 !important;
}
.dark-theme .cb-draw-btn {
  color: #8b92a5 !important;
}
.dark-theme .cb-draw-btn:hover {
  background: rgba(255,255,255,.06) !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-draw-btn.active {
  background: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .cb-draw-sep {
  border-color: #1e2433 !important;
}

/* Constituents */
.dark-theme .cb-constituents-master-toggle {
  border-color: #1e2433 !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-constituents-master-toggle:hover {
  background: rgba(255,255,255,.04) !important;
}
.dark-theme .cb-constituents-panel {
  border-color: #1e2433 !important;
}
.dark-theme .cb-constituent-chip {
  background: #1a2030 !important;
  border-color: #252d3d !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-constituent-type-badge {
  background: #1a2030 !important;
  color: #8b92a5 !important;
}
.dark-theme .cb-constituent-count {
  color: #6b7280 !important;
}

/* Formula cards */
.dark-theme .cb-formula-card {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-formula-card-header {
  background: #1a2030 !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-formula-card-expr {
  background: #111520 !important;
  color: #c4c9d4 !important;
}

/* Snapshot modal */
.dark-theme .cb-snapshot-modal-content {
  background: #161b26 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-snapshot-toggle {
  background: #111520 !important;
  border-color: #252d3d !important;
}
.dark-theme .cb-snapshot-toggle-btn {
  color: #8b92a5 !important;
}
.dark-theme .cb-snapshot-toggle-btn.active {
  background: #6366f1 !important;
  color: #fff !important;
}
.dark-theme .cb-snapshot-table th {
  background: #1a2030 !important;
  color: #8b92a5 !important;
  border-color: #1e2433 !important;
}
.dark-theme .cb-snapshot-table td {
  border-color: #1e2433 !important;
  color: #c4c9d4 !important;
}
.dark-theme .cb-snapshot-table tr:hover td {
  background: rgba(255,255,255,.04) !important;
}

/* Toast overrides */
.dark-theme .cb-toast {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}
.dark-theme .cb-toast.success {
  background: rgba(5,150,105,.12) !important;
  border-color: #059669 !important;
  color: #34d399 !important;
}
.dark-theme .cb-toast.error {
  background: rgba(220,38,38,.12) !important;
  border-color: #dc2626 !important;
  color: #f87171 !important;
}
.dark-theme .cb-toast.warning {
  background: rgba(217,119,6,.12) !important;
  border-color: #d97706 !important;
  color: #fbbf24 !important;
}

/* Loader */
.dark-theme #cb-chart-loader {
  background: #111520 !important;
}
.dark-theme .cb-loader-text {
  color: #8b92a5 !important;
}

/* Toggle switch knob */
.dark-theme .cb-toggle-slider::before {
  background-color: #e6e9f0 !important;
}

/* Chart Highcharts overrides */
.dark-theme #cb-main-chart .highcharts-background {
  fill: #111520 !important;
}
.dark-theme #cb-main-chart .highcharts-plot-background {
  fill: #111520 !important;
}
.dark-theme #cb-main-chart text {
  fill: #8b92a5 !important;
}
.dark-theme #cb-main-chart .highcharts-axis-line,
.dark-theme #cb-main-chart .highcharts-grid-line,
.dark-theme #cb-main-chart .highcharts-tick {
  stroke: #1e2433 !important;
}
.dark-theme #cb-main-chart .highcharts-tooltip-box {
  fill: #161b26 !important;
  stroke: #1e2433 !important;
}
.dark-theme #cb-main-chart .highcharts-legend-item text {
  fill: #c4c9d4 !important;
}
.dark-theme #cb-main-chart .highcharts-axis-resizer {
  stroke: #252d3d !important;
}
.dark-theme #cb-main-chart .highcharts-crosshair-label rect {
  fill: #161b26 !important;
  stroke: #252d3d !important;
}
.dark-theme #cb-main-chart .highcharts-crosshair-label text {
  fill: #e6e9f0 !important;
}
.dark-theme #cb-main-chart .highcharts-label.highcharts-tooltip-header rect,
.dark-theme #cb-main-chart .highcharts-tooltip rect.highcharts-label-box {
  fill: #161b26 !important;
  stroke: #1e2433 !important;
}
.dark-theme #cb-main-chart .highcharts-tooltip text,
.dark-theme #cb-main-chart .highcharts-tooltip span {
  fill: #e6e9f0 !important;
  color: #e6e9f0 !important;
}
.dark-theme #cb-main-chart .highcharts-label.highcharts-tooltip text tspan {
  fill: #e6e9f0 !important;
}

/* Saved charts dropdown */
.dark-theme .cb-saved-charts-menu {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
.dark-theme .cb-saved-charts-label {
  color: #8b92a5 !important;
}

/* Active metrics section */
.dark-theme .cb-widget-section-title {
  border-color: #1e2433 !important;
}

/* ── Highcharts Dark Theme Integration ──────────────────────────────────── */
.dark-theme .v2-sp .highcharts-background {
  fill: #111520;
}

.dark-theme .v2-sp .highcharts-title,
.dark-theme .v2-sp .highcharts-subtitle {
  fill: #e6e9f0 !important;
}

.dark-theme .v2-sp .highcharts-axis-title,
.dark-theme .v2-sp .highcharts-axis-labels text {
  fill: #ADADAD !important;
}

.dark-theme .v2-sp .highcharts-grid-line {
  stroke: #1e2433;
}

.dark-theme .v2-sp .highcharts-tooltip-box {
  fill: #111520;
  stroke: #1e2433;
}

.dark-theme .v2-sp .highcharts-tooltip text,
.dark-theme .v2-sp .highcharts-tooltip span {
  color: #e6e9f0 !important;
  fill: #e6e9f0 !important;
}

.dark-theme .v2-sp .highcharts-label text {
  fill: #e6e9f0 !important;
}

.dark-theme .v2-sp .highcharts-data-label text {
  fill: #c4c9d4 !important;
}

.dark-theme .v2-sp .highcharts-legend-item text {
  fill: #c4c9d4 !important;
}

.dark-theme .v2-sp .highcharts-legend-item-hidden text {
  fill: #8b92a5 !important;
}

.dark-theme .v2-sp .highcharts-plot-line-label {
  fill: #ADADAD;
}

.dark-theme .v2-sp .highcharts-crosshair {
  stroke: #8b92a5;
}

.dark-theme .v2-sp .highcharts-yaxis .highcharts-axis-line,
.dark-theme .v2-sp .highcharts-xaxis .highcharts-axis-line {
  stroke: #1e2433;
}

.dark-theme .v2-sp .highcharts-tick {
  stroke: #1e2433;
}

/* ── Highcharts Export / Hamburger Menu Button ────────────────────────────── */
.dark-theme .highcharts-button-box { fill: #161b26 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-button-symbol { stroke: #c4c9d4 !important; }
.dark-theme .highcharts-button:hover .highcharts-button-box { fill: #252d3d !important; }
.dark-theme .highcharts-contextbutton .highcharts-button-box { fill: #161b26 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-contextbutton:hover .highcharts-button-box { fill: #252d3d !important; }

.dark-theme .highcharts-contextmenu {
  background: #161b26 !important;
  border: 1px solid #252d3d !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
  padding: 4px 0 !important;
}
.dark-theme .highcharts-contextmenu hr { border-color: #252d3d !important; }
.dark-theme .highcharts-menu-item {
  color: #c4c9d4 !important;
  background: transparent !important;
  transition: background .15s;
}
.dark-theme .highcharts-menu-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: #e6e9f0 !important;
}

/* ── Highcharts Range Selector Buttons (1M, 3M, YTD…) ───────────────────── */
.dark-theme .highcharts-range-selector-buttons .highcharts-button rect,
.dark-theme .highcharts-range-selector-buttons .highcharts-button-box { fill: #161b26 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-range-selector-buttons .highcharts-button text { fill: #8b92a5 !important; }
.dark-theme .highcharts-range-selector-buttons .highcharts-button:hover rect,
.dark-theme .highcharts-range-selector-buttons .highcharts-button:hover .highcharts-button-box { fill: #252d3d !important; }
.dark-theme .highcharts-range-selector-buttons .highcharts-button:hover text { fill: #e6e9f0 !important; }

.dark-theme .highcharts-range-selector-buttons .highcharts-button-pressed rect,
.dark-theme .highcharts-range-selector-buttons .highcharts-button-pressed .highcharts-button-box { fill: #0964A0 !important; stroke: #0964A0 !important; }
.dark-theme .highcharts-range-selector-buttons .highcharts-button-pressed text { fill: #ffffff !important; font-weight: 600 !important; }

.dark-theme .highcharts-range-selector-buttons .highcharts-button-disabled rect { fill: #0f1219 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-range-selector-buttons .highcharts-button-disabled text { fill: #3a4255 !important; }

/* ── Highcharts Range Input Boxes (Date Inputs) ──────────────────────────── */
.dark-theme .highcharts-range-input rect { fill: #161b26 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-range-input text { fill: #c4c9d4 !important; }
.dark-theme .highcharts-range-label text { fill: #8b92a5 !important; }
.dark-theme .highcharts-input-group text { fill: #8b92a5 !important; }

/* ── Highcharts Navigator ────────────────────────────────────────────────── */
.dark-theme .highcharts-navigator-mask-inside { fill: rgba(9,100,160,.1) !important; }
.dark-theme .highcharts-navigator-mask-outside { fill: rgba(12,17,26,.7) !important; }
.dark-theme .highcharts-navigator-outline { stroke: #1e2433 !important; }
.dark-theme .highcharts-navigator-series .highcharts-area { fill: rgba(9,100,160,.2) !important; }
.dark-theme .highcharts-navigator-xaxis .highcharts-axis-labels text { fill: #8b92a5 !important; }
.dark-theme .highcharts-scrollbar-track-background { fill: #0c111a !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-scrollbar-thumb { fill: #252d3d !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-scrollbar-rifles { stroke: #8b92a5 !important; }
.dark-theme .highcharts-scrollbar-button { fill: #161b26 !important; stroke: #1e2433 !important; }
.dark-theme .highcharts-scrollbar-arrow { fill: #8b92a5 !important; }

/* ── AG Grid Dark Theme (Security Profile) ──────────────────────────────── */
.dark-theme .v2-sp .ag-theme-balham,
.dark-theme .v2-sp .ag-theme-balham .ag-root-wrapper {
  --ag-background-color: #111520;
  --ag-header-background-color: #161b26;
  --ag-odd-row-background-color: #0c111a;
  --ag-foreground-color: #e6e9f0;
  --ag-secondary-foreground-color: #ADADAD;
  --ag-border-color: #1e2433;
  --ag-row-hover-color: rgba(255,255,255,0.05);
  --ag-header-foreground-color: #8b92a5;
  --ag-row-border-color: #252d3d;
  --ag-cell-horizontal-border: 1px solid #252d3d;
  --ag-selected-row-background-color: rgba(9,100,160,0.15);
}


/* ============================================================================
   MODEL EXCHANGE (me-*)
   ============================================================================ */

/* Force block display for Model Exchange panes (override v2-overlay.css grid) */
#v2-model-exchange.v2-tool-pane.active,
#v2-model-exchange-detail.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}

/* ---------- Landing Page ---------- */
.me-landing {
  padding: 24px;
  overflow-y: auto;
  height: 100%;
}

.me-landing__header {
  margin-bottom: 24px;
}

.me-landing__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.me-landing__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 4px 0;
}

.me-landing__title i {
  color: var(--accent);
  margin-right: 8px;
}

.me-landing__subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* ---------- Search ---------- */
.me-landing__search-row {
  margin-bottom: 12px;
}

.me-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 600px;
}

.me-search__icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.me-search__input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.me-search__input:focus {
  border-color: var(--accent);
}

.me-search__input::placeholder {
  color: var(--muted);
}

.me-search__clear {
  position: absolute;
  right: 8px;
  padding: 4px;
  color: var(--muted);
}

.me-search__clear:hover {
  color: var(--text);
}

/* ---------- Filters ---------- */
.me-landing__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.me-filter-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me-filter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}

.me-filter-select {
  min-width: 140px;
  font-size: 12px;
}

.me-filter-clear {
  margin-left: auto;
}

/* ---------- Sections ---------- */
.me-section {
  margin-bottom: 28px;
}

.me-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.me-section__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.me-section__count {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.me-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* ---------- Marketplace Card ---------- */
.me-mp-card {
  cursor: pointer;
  padding: 18px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.me-mp-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(9, 100, 160, 0.15);
  transform: translateY(-2px);
}

.me-mp-card--invitation {
  border-left: 3px solid #8b5cf6;
}

.me-mp-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.me-mp-card__logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(9, 100, 160, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 22px;
}

/* Logo box accommodates both square icons and wider wordmark logos.
 * `width: auto` + `max-width` lets wordmarks render wider than tall while
 * `object-fit: contain` keeps the full image visible inside the box. */
.me-mp-card__logo {
  height: 56px;
  width: auto;
  max-width: 140px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
}

.me-mp-card__title-area {
  flex: 1;
  min-width: 0;
}

.me-mp-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-mp-card__provider {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0 0;
}

.me-mp-card__fav {
  flex-shrink: 0;
  padding: 4px;
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s;
}

.me-mp-card__fav:hover {
  transform: scale(1.2);
}

.me-mp-card__desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.me-mp-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.me-mp-card__stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.me-mp-card__stat strong {
  color: var(--text-strong);
}

.me-mp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.me-mp-card__tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.me-mp-card__enter {
  flex-shrink: 0;
}

/* ---------- Tags ---------- */
.me-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(173, 173, 173, 0.12);
  color: var(--muted);
  white-space: nowrap;
}

.me-tag--green {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.me-tag--muted {
  background: rgba(173, 173, 173, 0.08);
  color: var(--muted);
}

/* ---------- Badges ---------- */
.me-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.me-badge--included {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.me-badge--approved {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.me-badge--invitation {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.me-badge--featured {
  background: color-mix(in srgb, var(--warning, #e2b534) 12%, transparent);
  color: var(--warning, #e2b534);
}

.me-badge--platform {
  background: rgba(9, 100, 160, 0.12);
  color: var(--accent);
}

/* ---------- Returns ---------- */
.me-return--pos { color: #22c55e; }
.me-return--neg { color: #ef4444; }

/* ---------- Empty State ---------- */
.me-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.me-empty__icon {
  font-size: 48px;
  color: var(--muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.me-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 8px 0;
}

.me-empty__subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px 0;
}

/* ---------- Loading ---------- */
.me-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.me-loading__icon {
  font-size: 36px;
  color: var(--accent);
  margin-bottom: 12px;
}

.me-loading__msg {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Upsell Panel ---------- */
.me-upsell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  max-width: 480px;
  margin: 24px auto;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.me-upsell__icon {
  font-size: 36px;
  color: #8b5cf6;
  margin-bottom: 12px;
  opacity: 0.7;
}

.me-upsell__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 8px 0;
}

.me-upsell__desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* ---------- KPI Card ---------- */
.me-kpi {
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.me-kpi__icon {
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 8px;
}

.me-kpi__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  display: block;
}

.me-kpi__label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Tabs ---------- */
.me-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}

.me-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.me-tab:hover {
  color: var(--text);
}

.me-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.me-tab--premium {
  opacity: 0.7;
}

/* ---------- Breadcrumb ---------- */
.me-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.me-breadcrumb__link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.me-breadcrumb__link:hover {
  text-decoration: underline;
}

.me-breadcrumb__sep {
  color: var(--muted);
  font-size: 10px;
}

.me-breadcrumb__current {
  color: var(--text-strong);
  font-weight: 500;
}

/* ---------- Detail Page ---------- */
.me-detail {
  padding: 24px;
  overflow-y: auto;
  height: 100%;
}

.me-detail__header {
  padding: 20px;
  margin-bottom: 20px;
}

.me-detail__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}

.me-detail__header-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
}

.me-detail__provider-logo {
  height: 72px;
  min-width: 72px;
  max-width: 180px;
  border-radius: 12px;
  background: rgba(9, 100, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}
.me-detail__provider-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.me-detail__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 2px 0;
}

.me-detail__provider {
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 6px 0;
  font-weight: 500;
}

.me-detail__desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  max-width: 700px;
}

.me-detail__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.me-detail__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.me-detail__platform-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  background: rgba(9, 100, 160, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
}

/* ---------- Models Layout (inline filters, no sidebar) ---------- */
.me-models-layout {
}

.me-models-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.me-models-toolbar .me-search {
  max-width: 280px;
  flex-shrink: 0;
}

.me-models-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.me-models-filters .me-filter-item {
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.me-models-filters .me-filter-label {
  font-size: 11px;
  margin: 0;
}

.me-models-filters .me-filter-select {
  min-width: 120px;
  width: auto;
}

.me-models-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.me-models-main {
  min-width: 0;
}

/* ---------- Overview ---------- */
.me-overview__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.me-overview__charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.me-overview__chart-card {
  min-height: 340px;
}

/* ---------- Document Row ---------- */
.me-doc-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.me-doc-row:last-child {
  border-bottom: none;
}

.me-doc-row--gated {
  opacity: 0.5;
}

.me-doc-row__name {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

a.me-doc-row__name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.me-doc-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.me-doc-row__model {
  font-size: 11px;
  color: var(--muted);
}

/* ---------- Factsheets & Commentary Containers ---------- */
.me-factsheets,
.me-commentary,
.me-contact {
  max-width: 800px;
}

.me-docs-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.me-docs-list .me-doc-row {
  padding: 12px 16px;
}

/* ---------- Commentary Card ---------- */
.me-commentary-card {
  padding: 18px;
  margin-bottom: 14px;
}

.me-commentary-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.me-commentary-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.me-commentary-card__date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.me-commentary-card__author {
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 8px 0;
}

.me-commentary-card__author i {
  margin-right: 4px;
  opacity: 0.7;
}

.me-commentary-card__excerpt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px 0;
}

/* ---------- Contact ---------- */
.me-contact__card {
  padding: 24px;
}

.me-contact__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 12px 0;
}

.me-contact__row {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.me-contact__row i {
  width: 18px;
  color: var(--accent);
  margin-right: 8px;
}

.me-contact__row a {
  color: var(--accent);
  text-decoration: none;
}

.me-contact__row a:hover {
  text-decoration: underline;
}

.me-contact__actions {
  display: flex;
  gap: 8px;
}

.me-contact__resources {
  padding: 18px;
}

.me-contact__resources h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 10px 0;
}

/* ---------- Model Drawer ---------- */
.me-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
}

.me-drawer.is-open {
  pointer-events: auto;
}

.me-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 1000;
}

.me-drawer.is-open .me-drawer__overlay {
  opacity: 1;
}

.me-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 90vw;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
}

.me-drawer.is-open .me-drawer__panel {
  transform: translateX(0);
}

.me-drawer__header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.me-drawer__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.me-drawer__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 6px 0;
}

.me-drawer__subtitle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.me-drawer__close {
  font-size: 18px;
  padding: 4px 6px;
}

.me-drawer__quick-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.me-drawer__stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.me-drawer__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}

.me-drawer__stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.me-drawer__actions {
  display: flex;
  gap: 8px;
}

.me-drawer__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}

.me-drawer__tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

.me-drawer__tab:hover {
  color: var(--text);
}

.me-drawer__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.me-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.me-drawer__section {
  margin-bottom: 24px;
}

.me-drawer__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.me-drawer__text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.me-drawer__metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.me-drawer__metric {
  background: rgba(173, 173, 173, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me-drawer__metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.me-drawer__metric-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.me-drawer__specs {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.me-drawer__spec-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.me-drawer__spec-row:last-child {
  border-bottom: none;
}

.me-drawer__spec-label {
  color: var(--muted);
}

.me-drawer__spec-value {
  color: var(--text-strong);
  font-weight: 500;
}

/* Body scroll lock when drawer is open */
body.me-drawer-open {
  overflow: hidden;
}

/* ---------- Commentary Reader Overlay ---------- */
.me-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.me-reader-overlay.is-open {
  pointer-events: auto;
}

.me-reader-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2000;
}

.me-reader-overlay.is-open .me-reader-backdrop {
  opacity: 1;
}

.me-reader-panel {
  position: relative;
  z-index: 2001;
  width: 760px;
  max-width: 95vw;
  height: 100vh;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.me-reader-overlay.is-open .me-reader-panel {
  transform: translateY(0);
  opacity: 1;
}

.me-reader-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 32px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.me-reader-header__info {
  flex: 1;
  min-width: 0;
}

.me-reader-header__source {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.me-reader-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.me-reader-header__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.me-reader-header__author {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.me-reader-header__author i,
.me-reader-header__date i {
  margin-right: 5px;
  opacity: 0.7;
}

.me-reader-header__date {
  font-size: 13px;
  color: var(--muted);
}

.me-reader-header__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
}

.me-reader-close {
  font-size: 18px;
  padding: 4px 8px;
}

.me-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.me-reader-article {
  padding: 28px 32px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}

.me-reader-article h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 28px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.me-reader-article h3:first-child {
  margin-top: 0;
}

.me-reader-article p {
  margin: 0 0 16px 0;
}

.me-reader-article ul {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.me-reader-article li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.me-reader-article strong {
  color: var(--text-strong);
}

.me-reader-footer {
  padding: 20px 32px 28px;
  border-top: 1px solid var(--border);
}

.me-reader-disclaimer {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(173, 173, 173, 0.06);
  border-radius: 8px;
  margin-bottom: 16px;
}

.me-reader-disclaimer i {
  margin-right: 4px;
  color: var(--accent);
}

.me-reader-footer__actions {
  display: flex;
  justify-content: space-between;
}

body.me-reader-open {
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .me-landing {
    padding: 16px;
  }

  .me-section__grid {
    grid-template-columns: 1fr;
  }

  .me-models-layout {
    grid-template-columns: 1fr;
  }

  .me-models-filters {
    display: none; /* collapse on mobile - future: toggle */
  }

  .me-overview__charts {
    grid-template-columns: 1fr;
  }

  .me-detail__header-top {
    flex-direction: column;
  }

  .me-drawer__panel {
    width: 100%;
    max-width: 100vw;
  }

  .me-reader-panel {
    width: 100%;
    max-width: 100vw;
  }

  .me-reader-header {
    padding: 16px;
  }

  .me-reader-article {
    padding: 20px 16px;
    font-size: 14px;
  }

  .me-reader-footer {
    padding: 16px;
  }
}

/* ============================================
   V2 MARKETPLACE PAGE (was My Marketplace)
   ============================================ */

.mp-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mp-header {
  flex-shrink: 0;
  padding: 20px 24px 0;
}

.mp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mp-title-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

.mp-title i {
  color: var(--accent);
  margin-right: 8px;
}

.mp-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(173,173,173,0.08);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px 4px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mp-source-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  color: var(--accent);
  border-radius: 4px;
  transition: background 0.15s;
}

.mp-source-toggle:hover {
  background: rgba(173,173,173,0.12);
}

.mp-model-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.mp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Toolbar ---------- */

.mp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.mp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mp-toolbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mp-view-select {
  min-width: 160px;
  font-size: 13px;
}

/* ---------- Model Type Toggles ---------- */

.mp-type-toggles {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.mp-type-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid var(--border);
}

.mp-type-btn:last-child {
  border-right: none;
}

.mp-type-btn:hover {
  background: rgba(173,173,173,0.08);
  color: var(--text);
}

.mp-type-btn--active {
  background: var(--accent);
  color: #fff;
}

.mp-type-btn--active:hover {
  background: var(--accent);
  color: #fff;
}

/* ---------- Grid ---------- */

.mp-grid-wrap {
  flex: 1 1 0%;
  min-height: 0;
  padding: 0 24px 0;
  overflow: hidden;
}

#mp-grid {
  width: 100%;
  height: 100%;
}

/* ---------- Source Icon (own vs favorite) ---------- */

.mp-source-icon {
  font-size: 12px;
}

.mp-source-icon--own {
  color: var(--accent, #6366f1);
}

.mp-source-icon--fav {
  color: #e8467c;
}

/* ---------- Favorite Star ---------- */

.mp-fav-star {
  cursor: pointer;
  color: var(--border, #ccc);
  font-size: 13px;
  transition: color 0.15s;
}

.mp-fav-star:hover {
  color: #f5a623;
}

.mp-fav-star--active {
  color: #f5a623;
}

/* Positive / Negative value colors in grid */
.v2-pos { color: #22a06b; }
.v2-neg { color: #de350b; }

/* ---------- Compare / Blend Tray ---------- */

.mp-tray {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--bg-card, #fff);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  padding: 10px 24px;
}

.mp-tray-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-tray-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.mp-tray-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  min-width: 0;
}

.mp-tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(173,173,173,0.1);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text);
}

.mp-tray-chip-remove {
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  margin-left: 2px;
  line-height: 1;
}

.mp-tray-chip-remove:hover {
  color: var(--v2-danger, #de350b);
}

.mp-tray-more {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.mp-tray-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-accent {
  background: var(--v2-accent-alt, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}

.btn-accent:hover {
  filter: brightness(1.1);
}

/* ---------- Marketplace Picker Overlay ---------- */

.mp-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-picker-panel {
  background: var(--bg-card, #fff);
  border-radius: var(--radius, 10px);
  width: 480px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.mp-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.mp-picker-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}

.mp-picker-header h3 i {
  margin-right: 8px;
  color: var(--accent);
}

.mp-picker-close {
  font-size: 16px;
  padding: 4px 6px;
}

.mp-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.mp-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(173,173,173,0.06);
}

.mp-picker-item:hover {
  background: rgba(173,173,173,0.06);
}

.mp-picker-item--active {
  background: rgba(var(--accent-rgb, 99,102,241),0.06);
  border-left: 3px solid var(--accent);
}

.mp-picker-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(173,173,173,0.08);
  border-radius: 8px;
  font-size: 16px;
  color: var(--accent);
}

.mp-picker-logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
}

.mp-picker-item-info {
  flex: 1;
  min-width: 0;
}

.mp-picker-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-picker-item-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.mp-picker-check {
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}

.mp-picker-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .mp-header { padding: 16px 16px 0; }
  .mp-grid-wrap { padding: 0 16px; }
  .mp-toolbar { flex-wrap: wrap; }
  .mp-picker-panel { width: 95vw; }
  .mp-tray { padding: 10px 16px; }
  .mp-tray-content { flex-wrap: wrap; }
}

/* ── Dark theme: Model Exchange Marketplace ── */
.dark-theme .mp-title { color: #e6e9f0; }
.dark-theme .mp-source-pill {
  background: rgba(255,255,255,0.06);
  border-color: #1e2433;
  color: #e6e9f0;
}
.dark-theme .me-mp-card {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .me-mp-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(9,100,160,0.25);
}
.dark-theme .me-mp-card__name { color: #e6e9f0; }
.dark-theme .me-mp-card__provider { color: #8b92a5; }
.dark-theme .me-mp-card__desc { color: #8b92a5; }
.dark-theme .me-mp-card__stats { color: #8b92a5; }
.dark-theme .me-mp-card__stat strong { color: #e6e9f0; }

/* ============================================
   V2 ISSUER CHANNEL (TEAM CHANNELS – LEGACY PORT)
   Scoped styles for the Issuer Team Channel
   ============================================ */

/* Issuer Channel pane override — MUST be outside @layer to beat
   the unlayered .v2-tool-pane rules in v2-overlay.css */
#v2-issuer-channel.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@layer components {

  /* Container */
  .v2-issuer-ch {
    padding: 20px 24px 0;
  }

  /* Card body shrink-wrap + restore padding
     (global .v2-card__body has padding:0 + min-height:320px + flex:1;
      AG Grid containers override padding to 0 via inline style="padding:0") */
  .v2-issuer-ch .v2-card__body {
    min-height: 0;
    flex: none;
    padding: 12px 16px;
  }

  /* Zero out the global .v2-card-grid padding inside the issuer channel
     because the wrapper .v2-issuer-ch already provides outer padding */
  .v2-issuer-ch .v2-card-grid { padding: 0; }

  /* Allow header text to wrap inside issuer channel grids so that long
     field names are fully visible when `wrapHeaderText` + `autoHeaderHeight`
     are enabled on the column defs. */
  .v2-issuer-ch .ag-header-cell-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
  }
  .v2-issuer-ch .ag-header-cell-text {
    white-space: normal;
    line-height: 1.15;
  }

  /* ── Header ──────────────────────────────── */
  .v2-issuer-ch__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .v2-issuer-ch__header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-strong, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v2-issuer-ch__header h2 i { color: var(--accent, #0964A0); font-size: 20px; }
  .v2-issuer-ch__subtitle { font-size: 13px; color: var(--muted, #6B7280); margin: 2px 0 0; }

  /* Dashboard selector */
  .v2-issuer-ch__dash-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .v2-issuer-ch__dash-select label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    white-space: nowrap;
  }
  .v2-issuer-ch__dash-select select {
    padding: 4px 8px;
    border: 2px solid var(--accent, #0964A0);
    border-radius: 4px;
    background: var(--bg-elev, #fff);
    color: var(--text-strong, #111827);
    font-size: 12px;
    cursor: pointer;
  }

  /* ── Tabs ─────────────────────────────────── */
  .v2-issuer-ch__tabs {
    display: flex;
    gap: 2px;
    background: var(--border, #F3F4F6);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .v2-issuer-ch__tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--muted, #6B7280);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .v2-issuer-ch__tab:hover { background: rgba(255,255,255,0.6); }
  .v2-issuer-ch__tab.active {
    background: var(--accent, #0964A0);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .v2-issuer-ch__tab i { font-size: 12px; }

  /* ── Toggle buttons ──────────────────────── */
  .ic-toggle-btn {
    padding: 5px 12px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    background: var(--bg-elev, #fff);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }
  .ic-toggle-btn:hover { background: var(--border, #F3F4F6); }
  .ic-toggle-btn.ic-toggle-btn--active {
    background: var(--accent, #0964A0); color: #fff; border-color: var(--accent, #0964A0);
  }
  .ic-toggle-btn.ic-toggle-btn--active:hover { filter: brightness(1.1); }

  /* ── KPI Cards ───────────────────────────── */
  .ic-kpi-card { min-width: 0; }
  .ic-kpi-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
  }
  .ic-kpi-icon { font-size: 26px; flex-shrink: 0; }
  .ic-kpi-text { flex: 1; min-width: 0; }
  .ic-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-strong, #111827);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ic-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ── Activity Feed ───────────────────────── */
  .v2-issuer-ch__feed { max-height: 400px; overflow-y: auto; }
  .ic-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #F3F4F6);
  }
  .ic-feed-item:last-child { border-bottom: none; }
  .ic-feed-icon { flex-shrink: 0; font-size: 15px; margin-top: 2px; }
  .ic-feed-text { flex: 1; font-size: 13px; color: var(--text-strong, #111827); }
  .ic-feed-time { font-size: 11px; color: var(--muted, #6B7280); white-space: nowrap; flex-shrink: 0; }

  /* ── Opportunities ───────────────────────── */
  .ic-opp-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #F3F4F6);
  }
  .ic-opp-item:last-child { border-bottom: none; }
  .ic-opp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  .ic-opp-head strong { font-size: 13px; color: var(--text-strong, #111827); }
  .ic-opp-badge {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ic-opp-item p { font-size: 12px; color: var(--muted, #6B7280); margin: 0 0 4px; }
  .ic-opp-aum { font-size: 11px; font-weight: 700; color: var(--accent, #0964A0); }

  /* ── Campaign Snapshot ───────────────────── */
  .ic-camp-snap {
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #F3F4F6);
  }
  .ic-camp-snap:last-child { border-bottom: none; }
  .ic-camp-snap-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .ic-camp-snap-head strong { font-size: 13px; color: var(--text-strong, #111827); }
  .ic-camp-snap-progress { font-size: 12px; font-weight: 700; color: var(--accent, #0964A0); }
  .ic-camp-snap-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--muted, #6B7280);
    flex-wrap: wrap;
  }

  /* Progress bar */
  .ic-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border, #E5E7EB);
    border-radius: 3px;
    overflow: hidden;
  }
  .ic-progress-fill {
    height: 100%;
    background: var(--accent, #0964A0);
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  /* ── Campaign Status Badge ───────────────── */
  .ic-camp-status {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }

  /* ── Campaign Card ───────────────────────── */
  .ic-camp-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    transition: all 0.15s ease;
  }

  /* ── Reports Table ───────────────────────── */
  .ic-reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .ic-reports-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border, #E5E7EB);
  }
  .ic-reports-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #F3F4F6);
    color: var(--text-strong, #111827);
  }
  .ic-reports-table tr:hover td { background: var(--border, #F9FAFB); }

  /* ── Pinned Chips ────────────────────────── */
  .ic-pinned-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong, #111827);
    background: var(--bg-elev, #fff);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .ic-pinned-chip:hover { border-color: var(--accent, #0964A0); color: var(--accent, #0964A0); }
  .ic-pinned-chip i { color: var(--accent, #0964A0); font-size: 11px; }

  /* ── AG Grid cell helpers ────────────────── */
  .ag-cell-positive { color: #16a34a; }
  .ag-cell-negative { color: #dc2626; }

  /* ═══════════════════════════════════════════════════════
   *  EXPERT ASSIST / CAMPAIGN ENHANCEMENTS
   * ═══════════════════════════════════════════════════════ */

  /* Campaign list + detail 2-column layout */
  .ic-camp-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
  }
  .ic-camp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;          /* prevent cards stretching to row height */
  }
  @media (min-width: 1100px) {
    .ic-camp-list { grid-template-columns: repeat(2, 1fr); }
  }
  .ic-camp-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

  /* Campaign card body needs padding (global .v2-card__body is padding:0) */
  .ic-camp-card .v2-card__body {
    padding: 12px 16px;
    display: block;       /* reset flex column so inline spans flow naturally */
  }
  .ic-camp-card .v2-card__header {
    overflow: visible;    /* prevent badge clipping                          */
  }

  /* Expert Assist upsell panel (sidebar) */
  .ic-ea-panel { min-width: 0; }
  .ic-ea-panel-card { position: sticky; top: 12px; }
  .ic-ea-panel-card .v2-card__body {
    padding: 14px 16px;
    display: block;
  }
  .ic-ea-panel-card .v2-card__header {
    overflow: visible;
  }

  .ic-ea-value-props {
    list-style: none; margin: 0 0 10px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px;
  }
  .ic-ea-value-props li {
    display: flex; align-items: baseline; gap: 6px;
    color: var(--text-strong, #111827);
  }
  .ic-ea-teaser {
    font-size: 11px; color: var(--muted, #6B7280);
    margin: 0 0 10px; line-height: 1.45;
  }

  /* Expert badge */
  .ic-ea-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff; letter-spacing: 0.3px;
  }

  /* Accent buttons */
  .ic-toggle-btn.ic-ea-accent {
    background: var(--accent, #0964A0);
    color: #fff; border-color: var(--accent, #0964A0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .ic-toggle-btn.ic-ea-accent:hover { filter: brightness(1.1); }
  .ic-toggle-btn.ic-ea-accent-outline {
    background: transparent;
    color: var(--accent, #0964A0);
    border: 1px solid var(--accent, #0964A0);
  }
  .ic-toggle-btn.ic-ea-accent-outline:hover { background: var(--accent, #0964A0); color: #fff; }

  /* Package grid (used in modals + request form) */
  .ic-ea-pkg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 8px;
  }
  .ic-ea-pkg-grid--wide .ic-ea-pkg-card { min-width: 160px; }
  .ic-ea-pkg-card {
    position: relative; padding: 14px;
    border: 2px solid var(--border, #E5E7EB); border-radius: 8px;
    background: var(--bg-elev, #fff);
    cursor: pointer; transition: border-color 0.15s;
    font-size: 12px;
  }
  .ic-ea-pkg-card:hover { border-color: var(--accent, #0964A0); }
  .ic-ea-pkg-card.is-selected { border-color: var(--accent, #0964A0); box-shadow: 0 0 0 2px rgba(9,100,160,0.2); }
  .ic-ea-pkg-card h4 { margin: 0 0 4px; font-size: 15px; color: var(--text-strong, #111827); }
  .ic-ea-pkg-card .ic-ea-pkg-price { font-weight: 700; color: var(--accent, #0964A0); margin-bottom: 8px; }
  .ic-ea-pkg-card ul { list-style: none; margin: 0; padding: 0; }
  .ic-ea-pkg-card ul li { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
  .ic-ea-pkg--rec { border-color: #f59e0b; }
  .ic-ea-pkg-rec-badge {
    position: absolute; top: -10px; right: 12px;
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    background: #f59e0b; color: #fff; padding: 2px 8px; border-radius: 4px;
    letter-spacing: 0.3px;
  }

  /* Create chooser */
  .ic-create-chooser {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .ic-create-option { transition: box-shadow 0.15s; }
  .ic-create-option:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

  /* Form helpers */
  .ic-form-grid {
    display: flex; flex-direction: column; gap: 10px;
  }
  .ic-form-grid label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 12px; font-weight: 600;
    color: var(--text-strong, #111827);
  }
  .ic-form-input {
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--border, #E5E7EB); border-radius: 6px;
    background: var(--bg-elev, #fff);
    color: var(--text-strong);
    outline: none; transition: border-color 0.15s;
  }
  .ic-form-input:focus { border-color: var(--accent, #0964A0); }

  /* Deliverable buttons */
  .ic-deliv-view, .ic-deliv-gen {
    padding: 2px 8px; border-radius: 4px; font-weight: 600;
  }

  /* ══════════════════════════════════════════════════════
   *  HQ MANAGER / CAMPAIGN EDITOR / PLAYBOOK LIBRARY
   * ══════════════════════════════════════════════════════ */

  .v2-hqm {
    padding: 20px 24px 40px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
  }
  .v2-hqm .v2-card__body { min-height: 0; flex: none; padding: 12px 16px; }
  .v2-hqm .v2-card-grid { padding: 0; }

  .v2-hqm__header {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
    margin-bottom: 14px;
  }
  .v2-hqm__header h2 {
    margin: 0; font-size: 22px; font-weight: 700;
    color: var(--text-strong);
    display: flex; align-items: center; gap: 8px;
  }
  .v2-hqm__header h2 i { color: var(--accent, #0964A0); font-size: 20px; }
  .v2-hqm__subtitle { font-size: 13px; color: var(--muted, #6B7280); margin: 2px 0 0; }

  /* HQ Manager tabs */
  .v2-hqm__tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    padding-bottom: 8px;
  }
  .v2-hqm__tab {
    padding: 7px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--muted, #6B7280);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s, color 0.15s;
  }
  .v2-hqm__tab:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
  .v2-hqm__tab.active {
    background: var(--accent, #0964A0);
    color: #fff;
  }
  .v2-hqm__tab i { font-size: 12px; }

  /* Toggle labels */
  .hqm-toggles { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .hqm-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--text-strong, #111827); cursor: pointer;
  }
  .hqm-toggle input[type="checkbox"],
  .hqm-toggle input[type="radio"] { accent-color: var(--accent, #0964A0); }

  /* Mute rules */
  .hqm-mute-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px solid var(--border, #E5E7EB);
    font-size: 12px;
  }

  /* Manual posts list */
  .hqm-post-row {
    padding: 6px 0; border-bottom: 1px solid var(--border, #E5E7EB);
  }

  /* Kit banner */
  .hqm-kit-banner {
    padding: 8px 14px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-radius: 6px;
    font-size: 12px; color: var(--text-strong);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }

  /* Campaign status badge */
  .ic-camp-status {
    display: inline-block; padding: 2px 8px;
    border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff;
  }

  /* List item editor rows (talking points, objections) */
  .hqm-list-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #E5E7EB);
  }
  .hqm-list-item:last-child { border-bottom: none; }

  /* Rich text area */
  .hqm-rich-text {
    width: 100%; box-sizing: border-box;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    resize: vertical;
  }

  /* Markdown preview */
  .hqm-md-preview {
    padding: 10px 14px; border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px; background: var(--bg, #fff);
    font-size: 13px; line-height: 1.6;
  }
  .hqm-md-body h4 { color: var(--text-strong, #111827); }
  .hqm-md-body li { margin-left: 18px; }

  /* Release row (admin) */
  .hqm-release-row {
    padding: 8px 0; border-bottom: 1px solid var(--border, #E5E7EB);
  }
  .hqm-release-row:last-child { border-bottom: none; }

  /* Simple reports table */
  .ic-reports-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
  }
  .ic-reports-table th {
    text-align: left; padding: 6px 8px;
    font-weight: 700; color: var(--muted, #6B7280);
    border-bottom: 2px solid var(--border, #E5E7EB);
  }
  .ic-reports-table td {
    padding: 5px 8px; border-bottom: 1px solid var(--border, #E5E7EB);
    color: var(--text-strong);
  }
  .ic-reports-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }

  /* ── Dark theme: Issuer Channel + HQ Manager ── */
  .dark-theme .v2-issuer-ch__tabs {
    background: #1e2433;
  }
  .dark-theme .v2-issuer-ch__tab {
    color: #8b92a5;
  }
  .dark-theme .v2-issuer-ch__tab:hover {
    background: rgba(255,255,255,0.08);
    color: #e6e9f0;
  }
  .dark-theme .v2-issuer-ch__tab.active {
    background: var(--accent, #0964A0);
    color: #fff;
  }
  .dark-theme .v2-issuer-ch .v2-card__body {
    background: #111520;
    color: #e6e9f0;
  }
  .dark-theme .v2-issuer-ch .highcharts-range-selector-buttons text { fill: #ccc !important; }
  .dark-theme .v2-issuer-ch .highcharts-button-normal rect { fill: #111520 !important; stroke: #333 !important; }
  .dark-theme .v2-issuer-ch .highcharts-button-normal text { fill: #8b92a5 !important; }
  .dark-theme .v2-issuer-ch .highcharts-button-pressed rect { fill: var(--accent, #0964A0) !important; }
  .dark-theme .v2-issuer-ch .highcharts-button-pressed text { fill: #fff !important; }
  .dark-theme .v2-issuer-ch .highcharts-button-hover rect { fill: #1a2030 !important; }
  .dark-theme .v2-hqm__header h2 { color: #e6e9f0; }
  .dark-theme .v2-hqm__subtitle { color: #8b92a5; }
  .dark-theme .v2-hqm__tabs { border-color: #1e2433; }
  .dark-theme .v2-hqm__tab { color: #8b92a5; }
  .dark-theme .v2-hqm__tab:hover { background: #1a2030; color: #e6e9f0; }
  .dark-theme .v2-hqm__tab.active { background: var(--accent, #0964A0); color: #fff; }
  .dark-theme .hqm-toggle { color: #e6e9f0; }
  .dark-theme .hqm-kit-banner { color: #e6e9f0; }
  .dark-theme .hqm-kit-info-card { border-color: #1e2433; }
  .dark-theme .hqm-md-preview { background: #161b26; border-color: #1e2433; color: #e6e9f0; }
  .dark-theme .hqm-md-body h4 { color: #e6e9f0; }
  .dark-theme .ic-reports-table th { color: #8b92a5; border-color: #1e2433; }
  .dark-theme .ic-reports-table td { color: #e6e9f0; border-color: #1e2433; }

  /* ── Workflow Bar (Admin Library) ── */
  .clib-wf-bar .v2-card__body { display: flex; flex-direction: column; gap: 10px; }
  .clib-wf-steps {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .clib-wf-step {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: color-mix(in srgb, var(--muted) 15%, transparent);
    color: var(--muted);
    transition: background 0.15s;
  }
  .clib-wf-step--active {
    background: var(--accent, #0964A0); color: #fff;
  }
  .clib-wf-step--done {
    background: color-mix(in srgb, var(--positive, #10B981) 15%, transparent);
    color: var(--positive, #10B981);
  }
  .clib-wf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

  /* Workflow badge (inline) */
  .clib-wf-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0.5px;
  }

  /* Version pill */
  .clib-ver-pill {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: 700; color: var(--accent, #0964A0);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  /* Update available badge */
  .clib-update-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    color: var(--warning, #e2b534);
    background: color-mix(in srgb, var(--warning, #e2b534) 15%, transparent);
  }
  .clib-update-badge i { font-size: 10px; }

  /* Status filter chips (Admin Library list) */
  .clib-status-chips {
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  .clib-chip {
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    color: var(--muted);
    border: 1px solid transparent; cursor: pointer; transition: all 0.15s;
  }
  .clib-chip:hover { background: color-mix(in srgb, var(--muted) 20%, transparent); }
  .clib-chip.active {
    background: var(--accent, #0964A0); color: #fff;
    border-color: var(--accent, #0964A0);
  }

  /* Playbook Status card (issuer campaign editor) */
  .hqm-playbook-status .v2-card__body { padding: 12px 16px; }

  /* Update banner (issuer campaigns tab) */
  .hqm-update-banner {
    padding: 10px 16px;
    background: color-mix(in srgb, var(--warning, #e2b534) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #e2b534) 25%, transparent);
    border-radius: 8px; font-size: 12px;
    color: var(--text-strong);
    display: flex; align-items: center; gap: 8px;
  }

  /* Kit info card (create modal) */
  .hqm-kit-info-card {
    padding: 10px 14px; margin-top: 4px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }

  /* Update preview sections (modal) */
  .hqm-preview-section {
    padding: 8px 0; border-bottom: 1px solid var(--border, #E5E7EB);
  }
  .hqm-preview-section:last-child { border-bottom: none; }
  .hqm-preview-changed { background: color-mix(in srgb, var(--warning, #e2b534) 6%, transparent); padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; }
  .hqm-preview-compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px;
  }
  .hqm-preview-col { min-width: 0; }
  .hqm-preview-label {
    font-size: 10px; font-weight: 700; color: var(--muted, #6B7280);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
  }
  .hqm-preview-val {
    font-size: 11px; color: var(--text-strong, #111827);
    word-break: break-word; line-height: 1.4;
    max-height: 60px; overflow: hidden;
  }

  /* HQ Manager tab frames — flex gap instead of per-card margin */
  .v2-hqm__frame {
    display: flex; flex-direction: column; gap: 16px;
  }

  /* "What changed" callout (issuer campaign editor) */
  .hqm-change-callout {
    margin-top: 8px; padding: 8px 12px;
    background: color-mix(in srgb, var(--warning, #e2b534) 8%, transparent);
    border-radius: 6px;
    border-left: 3px solid var(--warning, #e2b534);
  }
  .hqm-change-callout ul { margin: 0 0 8px 14px; }

  /* Release row status indicator (left border) */
  .hqm-release-row[data-rel-status="RELEASED"] { border-left: 3px solid var(--positive, #10B981); padding-left: 8px; }
  .hqm-release-row[data-rel-status="STAGED"]   { border-left: 3px solid var(--warning, #e2b534); padding-left: 8px; }
  .hqm-release-row[data-rel-status="REVOKED"]  { border-left: 3px solid var(--negative, #ef4444); padding-left: 8px; }

  /* ── Responsive ──────────────────────────── */
  @media (max-width: 768px) {
    .v2-issuer-ch { padding: 12px 12px 32px; }
    .v2-issuer-ch__header { flex-direction: column; }
    .v2-issuer-ch__tabs { flex-wrap: wrap; }
    .v2-issuer-ch__tab { padding: 6px 10px; font-size: 12px; }
    .ic-kpi-value { font-size: 16px; }
    .ic-kpi-icon { font-size: 20px; }
    .ic-camp-layout { grid-template-columns: 1fr; }
    .ic-camp-list { grid-template-columns: 1fr; }
    .ic-ea-pkg-grid { grid-template-columns: 1fr; }
    .ic-create-chooser { grid-template-columns: 1fr; }
    .v2-hqm { padding: 12px 12px 40px; }
    .v2-hqm__tabs { flex-wrap: wrap; }
    .v2-hqm__tab { padding: 6px 10px; font-size: 12px; }
    .hqm-toggles { flex-direction: column; }
    .clib-wf-steps { gap: 4px; }
    .clib-wf-step { padding: 4px 10px; font-size: 11px; }
    .hqm-preview-compare { grid-template-columns: 1fr; }
  }

}

/* HQ Manager pane override */
#v2-hq-manager.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}

/* Campaign Library pane override */
#v2-campaign-library.v2-tool-pane.active {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════
 *  Modal + Toast (outside @layer so they sit on top)
 * ═══════════════════════════════════════════════════════ */

.ic-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ic-modal {
  background: var(--bg-elev, #fff);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  width: 100%; max-width: 640px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.ic-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border, #E5E7EB);
}
.ic-modal__header h3 { margin: 0; font-size: 16px; color: var(--text-strong, #111827); }
.ic-modal__close {
  background: none; border: none; font-size: 22px;
  color: var(--muted, #6B7280); cursor: pointer; line-height: 1;
}
.ic-modal__close:hover { color: var(--text-strong, #111827); }
.ic-modal__body {
  padding: 20px; overflow-y: auto; flex: 1;
}

.ic-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--positive, #16a34a); color: #fff;
  padding: 10px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 100000; opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.ic-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── Chart period bar ─────────────────────── */
  .ic-period-bar {
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  .ic-period-btn {
    padding: 3px 10px;
    font-size: 11px; font-weight: 600;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 4px;
    background: transparent;
    color: var(--muted, #9CA3AF);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .ic-period-btn:hover {
    background: var(--border, #F3F4F6);
    color: var(--text, #374151);
  }
  .ic-period-btn.active {
    background: var(--accent, #0964A0);
    color: #fff;
    border-color: var(--accent, #0964A0);
  }

/* ================================================================
 * Campaign / Playbook Editor Wizard Overlay
 * ================================================================ */
.v2-camp-wiz-overlay {
  position: fixed; inset: 0; z-index: 99000;
  background: var(--card-bg, #fff);
  display: flex; overflow: hidden;
}
.v2-camp-wiz {
  display: flex; width: 100%; height: 100%;
}

/* ── Sidebar ── */
.v2-camp-wiz__sidebar {
  width: 260px; min-width: 260px;
  background: var(--bg-sidebar, #111827);
  color: #fff; display: flex; flex-direction: column;
  border-right: 1px solid var(--border, rgba(255,255,255,.08));
}
.v2-camp-wiz__sidebar-hdr {
  padding: 20px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.v2-camp-wiz__sidebar-hdr h2 {
  font-size: 15px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 6px;
}
.v2-camp-wiz__sidebar-sub {
  font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-camp-wiz__stepper { flex: 1; padding: 12px 0; overflow-y: auto; }
.v2-camp-wiz__sidebar-foot {
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Steps ── */
.v2-camp-wiz__steps { display: flex; flex-direction: column; }
.v2-camp-wiz__step {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  font-size: 12px; color: rgba(255,255,255,.45);
  transition: background .15s, color .15s;
}
.v2-camp-wiz__step:hover { background: rgba(255,255,255,.04); }
.v2-camp-wiz__step.completed { color: rgba(255,255,255,.65); }
.v2-camp-wiz__step.active {
  color: #fff; background: rgba(255,255,255,.06);
  font-weight: 600;
}
.v2-camp-wiz__step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.18);
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.v2-camp-wiz__step.active .v2-camp-wiz__step-dot {
  border-color: var(--accent, #3b82f6); background: var(--accent, #3b82f6); color: #fff;
}
.v2-camp-wiz__step.completed .v2-camp-wiz__step-dot {
  border-color: var(--positive, #16a34a); background: var(--positive, #16a34a); color: #fff;
}
.v2-camp-wiz__step-label { white-space: nowrap; }

/* ── Main ── */
.v2-camp-wiz__main {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; background: var(--card-bg, #fff);
}
.v2-camp-wiz__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.v2-camp-wiz__step-num { font-size: 10px; font-weight: 600; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .5px; }
.v2-camp-wiz__step-title {
  font-size: 16px; font-weight: 700; margin: 2px 0 0;
  color: var(--text-strong, #111827);
  display: flex; align-items: center; gap: 6px;
}
.v2-camp-wiz__step-title i { color: var(--accent, #3b82f6); font-size: 14px; }

.v2-camp-wiz__content {
  flex: 1; overflow-y: auto; padding: 24px;
}
.v2-camp-wiz__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0; gap: 8px;
}
.v2-camp-wiz__footer-l, .v2-camp-wiz__footer-r { display: flex; gap: 8px; align-items: center; }

/* ── Buttons (scoped) ── */
.v2-camp-wiz__btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  background: var(--card-bg, #fff); color: var(--text-strong, #111827);
}
.v2-camp-wiz__btn:hover { border-color: var(--accent, #3b82f6); }
.v2-camp-wiz__btn--primary {
  background: var(--accent, #3b82f6); color: #fff;
  border-color: var(--accent, #3b82f6);
}
.v2-camp-wiz__btn--primary:hover { filter: brightness(1.08); }
.v2-camp-wiz__btn--secondary {
  background: var(--bg-offset, #f3f4f6); border-color: var(--border, #d1d5db);
  color: var(--text-strong, #111827);
}
.v2-camp-wiz__btn--secondary:hover { background: var(--border, #e5e7eb); }
.v2-camp-wiz__btn--ghost {
  background: transparent; border-color: transparent;
  color: var(--muted, #6b7280);
}
.v2-camp-wiz__btn--ghost:hover { color: var(--text-strong, #111827); background: var(--bg-offset, #f3f4f6); }
.v2-camp-wiz__btn--sm { padding: 4px 10px; font-size: 11px; }
.v2-camp-wiz__close { font-size: 16px; }

/* ── Forms ── */
.v2-camp-wiz__step-body { max-width: 720px; margin: 0 auto; }
.v2-camp-wiz__form-grid { display: grid; gap: 14px; }
.v2-camp-wiz__form-grid--2 { grid-template-columns: 1fr 1fr; }
.v2-camp-wiz__form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.v2-camp-wiz__form-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .v2-camp-wiz__form-grid--2 { grid-template-columns: 1fr; }
  .v2-camp-wiz__form-grid--3 { grid-template-columns: 1fr; }
}
.v2-camp-wiz__form-group { display: flex; flex-direction: column; gap: 4px; }
.v2-camp-wiz__label { font-size: 11px; font-weight: 700; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .3px; }
.v2-camp-wiz__hint { font-size: 10px; color: var(--muted, #9ca3af); }
.v2-camp-wiz__input {
  font-size: 13px; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--card-bg, #fff); color: var(--text-strong, #111827);
  font-family: inherit;
  width: 100%; box-sizing: border-box;
}
.v2-camp-wiz__input:focus { outline: none; border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.v2-camp-wiz__textarea { resize: vertical; min-height: 60px; line-height: 1.55; }

/* ── Intro text ── */
.v2-camp-wiz__intro { font-size: 13px; color: var(--muted, #6b7280); margin: 0 0 14px; }

/* ── Callout ── */
.v2-camp-wiz__callout {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 18px; padding: 10px 14px; border-radius: 6px;
  background: var(--bg-offset, #f3f4f6); font-size: 12px; color: var(--muted, #6b7280);
}
.v2-camp-wiz__callout > i { margin-top: 2px; color: var(--accent, #3b82f6); flex-shrink: 0; }

/* ── List editor (Talking Points / Objections) ── */
.v2-camp-wiz__list-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.v2-camp-wiz__list { display: flex; flex-direction: column; gap: 8px; }
.v2-camp-wiz__list-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-offset, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  transition: border-color .15s;
}
.v2-camp-wiz__list-item:hover { border-color: var(--accent, #3b82f6); }
.v2-camp-wiz__list-item-num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent, #3b82f6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
}
.v2-camp-wiz__list-item-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ── Empty state ── */
.v2-camp-wiz__empty {
  text-align: center; padding: 32px 16px;
  color: var(--muted, #9ca3af); font-size: 13px;
}
.v2-camp-wiz__empty i { font-size: 28px; margin-bottom: 8px; display: block; color: var(--border, #d1d5db); }
.v2-camp-wiz__empty p { margin: 0 0 4px; font-weight: 600; color: var(--muted, #6b7280); }
.v2-camp-wiz__empty span { font-size: 11px; }

/* ── Cards (within wizard) ── */
.v2-camp-wiz__card {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  overflow: hidden;
}
.v2-camp-wiz__card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-offset, #f3f4f6);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-camp-wiz__card-hdr h4 { margin: 0; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.v2-camp-wiz__card-body { padding: 12px 14px; }

/* ── Markdown preview ── */
.v2-camp-wiz__md-preview {
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  padding: 12px 14px; background: var(--bg-offset, #f9fafb);
  font-size: 13px; line-height: 1.6; max-height: 360px; overflow-y: auto;
}

/* ── Review step ── */
.v2-camp-wiz__review-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  margin-bottom: 18px;
}
.v2-camp-wiz__review-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--bg-offset, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
}
.v2-camp-wiz__review-card > i { font-size: 18px; color: var(--accent, #3b82f6); }
.v2-camp-wiz__review-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted, #6b7280); display: block; }
.v2-camp-wiz__review-value { font-size: 14px; font-weight: 700; color: var(--text-strong, #111827); display: block; }
.v2-camp-wiz__review-sub { font-size: 11px; color: var(--muted, #9ca3af); }

.v2-camp-wiz__validation {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 12px;
}
.v2-camp-wiz__validation--warn {
  background: rgba(234,179,8,.08); border: 1px solid var(--warning, #e2b534); color: var(--text-strong, #111827);
}
.v2-camp-wiz__validation--warn h4 { margin: 0 0 4px; font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--warning, #e2b534); }
.v2-camp-wiz__validation--warn ul { margin: 0; padding-left: 18px; }
.v2-camp-wiz__validation--ok {
  background: rgba(22,163,106,.06); border: 1px solid var(--positive, #16a34a); color: var(--positive, #16a34a);
  display: flex; align-items: center; gap: 6px; font-weight: 600;
}

.v2-camp-wiz__review-section {
  margin-bottom: 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 12px 14px;
}
.v2-camp-wiz__review-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-strong, #111827); }
.v2-camp-wiz__review-text { font-size: 12px; color: var(--muted, #6b7280); max-height: 180px; overflow-y: auto; }
.v2-camp-wiz__review-item {
  padding: 6px 0; border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 12px; color: var(--text-strong, #111827);
}
.v2-camp-wiz__review-item:last-child { border-bottom: none; }

/* ── Releases (admin wizard) ── */
.v2-camp-wiz__release-list { display: flex; flex-direction: column; gap: 8px; }
.v2-camp-wiz__release-row {
  padding: 10px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.v2-camp-wiz__release-row-hdr { font-size: 13px; }
.v2-camp-wiz__release-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-camp-wiz__release-row-policy { display: flex; align-items: center; gap: 6px; }
.v2-camp-wiz__release-row[data-rel-status="RELEASED"] { border-left: 3px solid var(--positive, #16a34a); }
.v2-camp-wiz__release-row[data-rel-status="STAGED"] { border-left: 3px solid var(--warning, #e2b534); }
.v2-camp-wiz__release-row[data-rel-status="REVOKED"] { border-left: 3px solid var(--negative, #ef4444); }

/* ── Deliverables list ── */
.v2-camp-wiz__deliv-list { display: flex; flex-direction: column; gap: 4px; }
.v2-camp-wiz__deliv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 4px;
  background: var(--bg-offset, #f3f4f6); font-size: 12px;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .v2-camp-wiz__sidebar { width: 200px; min-width: 200px; }
  .v2-camp-wiz__content { padding: 16px; }
  .v2-camp-wiz__step-body { max-width: 100%; }
}
@media (max-width: 500px) {
  .v2-camp-wiz { flex-direction: column; }
  .v2-camp-wiz__sidebar {
    width: 100%; min-width: 100%; flex-direction: row;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.08);
    max-height: 60px; overflow-x: auto;
  }
  .v2-camp-wiz__sidebar-hdr { display: none; }
  .v2-camp-wiz__sidebar-foot { display: none; }
  .v2-camp-wiz__steps { flex-direction: row; }
  .v2-camp-wiz__step { padding: 8px 12px; }
  .v2-camp-wiz__step-label { display: none; }
}

/* ── Checkbox grid (signal types in playbook editor) ── */
.v2-camp-wiz__check-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px;
}
.v2-camp-wiz__check-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-strong, #111827);
  cursor: pointer; padding: 3px 0;
}
.v2-camp-wiz__check-label input[type="checkbox"] { accent-color: var(--accent, #3b82f6); }

/* ════════════════════════════════════════════════════════════════════
 *  ISSUER WORKSPACE — Sidebar + Shell
 * ════════════════════════════════════════════════════════════════════ */

/* Workspace content area */
.v2-iw-content {
  padding: 24px 28px; overflow-y: auto; height: 100%;
}
.v2-iw-content__header {
  margin-bottom: 20px;
}
.v2-iw-content__header h1 {
  font-size: 22px; font-weight: 700; color: var(--text-strong, #111827); margin: 0 0 4px;
}
.v2-iw-content__header p {
  font-size: 13px; color: var(--muted, #6b7280); margin: 0;
}

/* Placeholder / Coming Soon cards */
.v2-iw-placeholder {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 60px 24px; max-width: 520px; margin: 40px auto;
}
.v2-iw-placeholder i.fa-3x { font-size: 48px; color: var(--muted, #6b7280); margin-bottom: 16px; }
.v2-iw-placeholder h3 { font-size: 18px; font-weight: 600; color: var(--text-strong, #111827); margin: 0 0 8px; }
.v2-iw-placeholder p { font-size: 13px; color: var(--muted, #6b7280); line-height: 1.5; margin: 0 0 16px; }
.v2-iw-placeholder__features {
  list-style: none; padding: 0; margin: 0 0 16px; text-align: left;
}
.v2-iw-placeholder__features li {
  font-size: 12px; color: var(--text-strong, #111827); padding: 4px 0;
}
.v2-iw-placeholder__features li i { color: var(--accent, #3b82f6); width: 16px; margin-right: 6px; }
.v2-iw-placeholder__phase {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--bg-offset, #f3f4f6); padding: 3px 10px; border-radius: 4px;
  color: var(--muted, #6b7280);
}

/* Intelligence landing tiles */
.v2-iw-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin-top: 16px;
}
.v2-iw-tile {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 20px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
  background: var(--card-bg, #fff);
}
.v2-iw-tile:hover { border-color: var(--accent, #3b82f6); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.v2-iw-tile__icon { font-size: 24px; color: var(--accent, #3b82f6); margin-bottom: 10px; }
.v2-iw-tile__title { font-size: 14px; font-weight: 600; color: var(--text-strong, #111827); margin-bottom: 4px; }
.v2-iw-tile__desc { font-size: 12px; color: var(--muted, #6b7280); line-height: 1.4; }
.v2-iw-tile--locked { opacity: .5; cursor: default; }
.v2-iw-tile--locked:hover { border-color: var(--border, #e5e7eb); box-shadow: none; }
.v2-iw-tile__badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: var(--warning, #f59e0b); color: #fff;
  padding: 1px 5px; border-radius: 3px; margin-left: 6px;
}

/* Global scope bar */
.v2-iw-scope-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; margin-bottom: 16px;
  background: var(--bg-offset, #f9fafb); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; flex-wrap: wrap;
}
.v2-iw-scope-bar__left,
.v2-iw-scope-bar__right {
  display: flex; align-items: center; gap: 8px;
}
.v2-iw-scope-bar__label {
  font-size: 11px; font-weight: 600; color: var(--text-strong, #111827);
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.v2-iw-scope-bar__select {
  padding: 5px 10px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px; font-size: 12px; font-weight: 500;
  background: var(--card-bg, #fff); color: var(--text-strong, #111827);
  max-width: 240px; cursor: pointer;
}
.v2-iw-scope-bar__select:focus {
  outline: none; border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

/* Opportunity drawer (right-panel detail) */
.v2-iw-drawer-overlay {
  position: fixed; inset: 0; z-index: 900; display: flex; justify-content: flex-end;
  background: rgba(0,0,0,.3); animation: v2FadeIn .15s ease;
}
.v2-iw-drawer {
  width: 520px; max-width: 90vw; height: 100%; background: var(--card-bg, #fff);
  box-shadow: -4px 0 24px rgba(0,0,0,.12); overflow-y: auto; padding: 24px;
  animation: v2SlideLeft .2s ease;
}
@keyframes v2SlideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes v2FadeIn { from { opacity: 0; } to { opacity: 1; } }

.v2-iw-drawer__header {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.v2-iw-drawer__close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--muted); padding: 4px;
}
.v2-iw-drawer__close:hover { color: var(--text-strong); }

/* Stage pipeline chips */
.v2-iw-stage-pipeline {
  display: flex; gap: 2px; margin: 12px 0;
}
.v2-iw-stage-chip {
  padding: 4px 10px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; transition: all .15s; background: transparent;
  color: var(--muted);
}
.v2-iw-stage-chip:hover { border-color: var(--accent); color: var(--accent); }
.v2-iw-stage-chip.active {
  background: var(--accent, #3b82f6); color: #fff; border-color: var(--accent);
}

/* Activity timeline */
.v2-iw-timeline { list-style: none; padding: 0; margin: 0; }
.v2-iw-timeline__item {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-timeline__item:last-child { border-bottom: none; }
.v2-iw-timeline__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; flex-shrink: 0;
  background: var(--accent, #3b82f6);
}
.v2-iw-timeline__body { flex: 1; min-width: 0; }
.v2-iw-timeline__meta {
  font-size: 10px; color: var(--muted); margin-bottom: 2px;
}
.v2-iw-timeline__text { font-size: 12px; color: var(--text-strong); line-height: 1.4; }
.v2-iw-timeline__nextstep {
  font-size: 11px; color: var(--accent); margin-top: 4px; font-weight: 500;
}

/* Campaign wizard — progress steps */
.v2-iw-wizard-steps {
  display: flex; gap: 0; margin-bottom: 20px;
  background: var(--card-bg, #fff); border-radius: 8px;
  overflow: hidden; border: 1px solid var(--border, #e5e7eb);
}
.v2-iw-wizard-step {
  flex: 1; padding: 12px 16px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.v2-iw-wizard-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px;
  background: var(--bg-offset, #f3f4f6); color: var(--muted);
  transition: all .2s;
}
.v2-iw-wizard-step.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(59,130,246,.04); }
.v2-iw-wizard-step.active .v2-iw-wizard-step__num { background: var(--accent); color: #fff; }
.v2-iw-wizard-step.done { color: var(--positive, #22c55e); border-bottom-color: var(--positive, #22c55e); }
.v2-iw-wizard-step.done .v2-iw-wizard-step__num { background: var(--positive, #22c55e); color: #fff; }

/* Campaign wizard — two-column layout */
.v2-iw-wiz-twocol {
  display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start;
}
.v2-iw-wiz-main { min-width: 0; }
.v2-iw-wiz-sidebar { position: sticky; top: 16px; }

/* Campaign wizard — summary card */
.v2-iw-wiz-summary {
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 16px; font-size: 12px;
}
.v2-iw-wiz-summary__title {
  font-size: 13px; font-weight: 700; color: var(--text-strong);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-wiz-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; gap: 8px;
}
.v2-iw-wiz-summary__row span { color: var(--muted); flex-shrink: 0; }
.v2-iw-wiz-summary__row strong {
  color: var(--text-strong); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-iw-wiz-summary__divider {
  height: 1px; background: var(--border, #e5e7eb);
  margin: 8px 0;
}

/* Campaign wizard — step titles & descriptions */
.v2-iw-wiz-step-title {
  font-size: 15px; font-weight: 700; color: var(--text-strong);
  margin: 0 0 4px; display: flex; align-items: center; gap: 6px;
}
.v2-iw-wiz-step-desc {
  font-size: 12px; color: var(--muted); margin: 0 0 16px; line-height: 1.4;
}

/* Campaign wizard — form fields */
.v2-iw-wiz-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-strong);
  margin-bottom: 4px;
}
.v2-iw-wiz-input {
  display: block; width: 100%; padding: 8px 12px;
  border: 1px solid var(--border, #d1d5db); border-radius: 6px;
  font-size: 13px; color: var(--text-strong, #111);
  background: var(--card-bg, #fff); box-sizing: border-box;
  transition: border-color .15s;
}
.v2-iw-wiz-input:focus {
  outline: none; border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.1);
}
.v2-iw-wiz-field-row { display: flex; gap: 12px; }
.v2-iw-wiz-field-row > div { flex: 1; }

/* Campaign wizard — filter bar */
.v2-iw-wiz-filters {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.v2-iw-wiz-filters > div { flex: 1; min-width: 160px; }
.v2-iw-wiz-grid-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}

/* Campaign wizard — cluster banner */
.v2-iw-wiz-cluster-banner {
  padding: 10px 14px; margin-bottom: 12px; border-radius: 6px;
  background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.15);
  font-size: 12px; color: var(--accent); font-weight: 500;
}
.v2-iw-wiz-cluster-banner i { margin-right: 6px; }

/* Campaign wizard — messaging banner */
.v2-iw-wiz-msg-banner {
  padding: 10px 14px; margin-bottom: 16px; border-radius: 6px;
  background: var(--bg-offset, #f3f4f6); font-size: 11px;
  color: var(--muted); font-weight: 500;
}

/* Campaign wizard — talking point rows */
.v2-iw-wiz-tp-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.v2-iw-wiz-tp-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-offset, #f3f4f6); color: var(--muted);
  font-size: 10px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.v2-iw-wiz-tp-row .v2-iw-wiz-input { flex: 1; }
.v2-iw-wiz-tp-remove {
  width: 24px; height: 24px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.v2-iw-wiz-tp-remove:hover { background: rgba(239,68,68,.1); color: var(--negative, #ef4444); }

/* Campaign wizard — objection rows */
.v2-iw-wiz-obj-row { margin-bottom: 8px; }
.v2-iw-wiz-obj-pair { display: flex; gap: 8px; align-items: flex-start; }

/* Campaign wizard — quickstart */
.v2-iw-wiz-quickstart {
  padding: 12px 16px; margin-bottom: 16px; border-radius: 8px;
  background: rgba(245,158,11,.04); border: 1px solid rgba(245,158,11,.15);
}

/* Campaign wizard — navigation bar */
.v2-iw-wiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.v2-iw-wiz-btn-primary {
  background: var(--accent, #3b82f6) !important;
  color: #fff !important; border-color: var(--accent, #3b82f6) !important;
  font-weight: 600;
}
.v2-iw-wiz-btn-primary:disabled {
  opacity: .5; cursor: not-allowed;
}
.v2-iw-wiz-btn-launch {
  background: var(--positive, #22c55e) !important;
  color: #fff !important; border-color: var(--positive, #22c55e) !important;
  font-weight: 700; font-size: 13px !important; padding: 10px 20px !important;
}

/* Campaign wizard — warning text */
.v2-iw-wiz-warning {
  font-size: 11px; color: var(--warning, #f59e0b); margin-top: 8px;
}

/* Campaign wizard — review step */
.v2-iw-wiz-review-section {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-wiz-review-section:last-of-type { border-bottom: none; }
.v2-iw-wiz-review-heading {
  font-size: 13px; font-weight: 700; color: var(--text-strong);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: .5px;
}
.v2-iw-wiz-review-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.v2-iw-wiz-review-item {
  display: flex; justify-content: space-between; font-size: 12px;
  padding: 4px 0;
}
.v2-iw-wiz-review-item span { color: var(--muted); }
.v2-iw-wiz-review-item strong { color: var(--text-strong); }

/* Campaign messaging snapshot (read-only) */
.v2-iw-msg-section { margin-bottom: 16px; }
.v2-iw-msg-section h4 {
  font-size: 12px; font-weight: 700; color: var(--text-strong);
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: .5px;
}
.v2-iw-msg-section p,
.v2-iw-msg-section li {
  font-size: 12px; color: var(--text-strong); line-height: 1.5;
}
.v2-iw-msg-section ul { padding-left: 18px; margin: 0; }

/* Campaign list — KPI strip */
.v2-iw-camp-kpi-strip {
  display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.v2-iw-camp-kpi {
  flex: 1; min-width: 160px; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
}
.v2-iw-camp-kpi__icon { font-size: 18px; }
.v2-iw-camp-kpi__value {
  font-size: 20px; font-weight: 700; color: var(--text-strong, #111);
  line-height: 1.1;
}
.v2-iw-camp-kpi__label {
  font-size: 10px; color: var(--muted, #6b7280); font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Campaign list — status pill */
.v2-iw-camp-status-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 10px; color: #fff;
  white-space: nowrap; letter-spacing: .2px; line-height: 1;
}

/* Campaign list — name cell with stage badges */
.v2-iw-camp-name-cell { line-height: 1.3; }
.v2-iw-camp-name-cell__primary {
  font-weight: 600; color: var(--text-strong, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-iw-camp-name-cell__badges {
  display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap;
}
.v2-iw-camp-stage-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}

/* ── Campaign Detail Dashboard ── */
.v2-iw-cd-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.v2-iw-cd-header__left { flex: 1; min-width: 0; }
.v2-iw-cd-header__actions { display: flex; gap: 8px; flex-shrink: 0; }
.v2-iw-cd-subline {
  font-size: 12px; color: var(--muted, #6b7280); margin: 0;
}

.v2-iw-cd-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.v2-iw-cd-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
}
.v2-iw-cd-kpi__value { font-size: 22px; font-weight: 700; color: var(--text-strong, #111); line-height: 1; }
.v2-iw-cd-kpi__label { font-size: 10px; color: var(--muted, #6b7280); font-weight: 500; text-transform: uppercase; letter-spacing: .3px; }

.v2-iw-cd-funnel-bar {
  display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 10px;
}
.v2-iw-cd-funnel-seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  transition: width .3s ease;
}
.v2-iw-cd-funnel-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.v2-iw-cd-funnel-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text, #374151); }
.v2-iw-cd-funnel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.v2-iw-cd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.v2-iw-cd-table th {
  padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted, #6b7280); background: var(--bg-offset, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-cd-table td {
  padding: 6px 12px; border-bottom: 1px solid var(--border, #e5e7eb);
  color: var(--text, #374151);
}

.v2-iw-cd-msg-notice {
  font-size: 11px; color: var(--muted, #6b7280); background: var(--bg-offset, #f0f4ff);
  padding: 8px 12px; border-radius: 6px; margin-bottom: 12px;
  display: flex; align-items: center;
}

/* ── Manager Overview Command Center ── */
.v2-iw-mo-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.v2-iw-mo-header__left { flex: 1; min-width: 0; }
.v2-iw-mo-header__actions {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
}
.v2-iw-mo-subline { font-size: 12px; color: var(--muted, #6b7280); margin: 4px 0 0; }

.v2-iw-mo-select {
  font-size: 11px; padding: 4px 8px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; background: var(--card-bg, #fff); color: var(--text-strong, #111);
  cursor: pointer; outline: none;
}
.v2-iw-mo-select:focus { border-color: var(--accent); }

.v2-iw-mo-tw-toggle {
  display: flex; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; overflow: hidden;
}
.v2-iw-mo-tw-btn {
  font-size: 11px; padding: 4px 10px; border: none; background: var(--card-bg, #fff);
  color: var(--muted, #6b7280); cursor: pointer; font-weight: 600;
  border-right: 1px solid var(--border, #e5e7eb);
  transition: background .15s, color .15s;
}
.v2-iw-mo-tw-btn:last-child { border-right: none; }
.v2-iw-mo-tw-btn.active {
  background: var(--accent, #3b82f6); color: #fff;
}
.v2-iw-mo-tw-btn:hover:not(.active) { background: var(--bg-offset, #f3f4f6); }

.v2-iw-mo-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px;
}
.v2-iw-mo-kpi {
  display: flex; align-items: center; gap: 12px; position: relative;
  padding: 14px 16px; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  transition: box-shadow .15s;
}
.v2-iw-mo-kpi[data-iw-kpi-href] { cursor: pointer; }
.v2-iw-mo-kpi[data-iw-kpi-href]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.v2-iw-mo-kpi__icon { font-size: 18px; flex-shrink: 0; }
.v2-iw-mo-kpi__value { font-size: 22px; font-weight: 700; color: var(--text-strong, #111); line-height: 1; }
.v2-iw-mo-kpi__label {
  font-size: 10px; color: var(--muted, #6b7280); font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px;
}
.v2-iw-mo-kpi__arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--accent, #3b82f6); opacity: .5;
}

.v2-iw-mo-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.v2-iw-mo-table th {
  padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted, #6b7280); background: var(--bg-offset, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-mo-table td {
  padding: 6px 12px; border-bottom: 1px solid var(--border, #e5e7eb);
  color: var(--text, #374151);
}
.v2-iw-mo-table tbody tr:hover { background: var(--bg-offset, #f9fafb); }

/* Opportunities manager intelligence — KPIs + territory chart */
.v2-iw-opps-intel {
  display: flex; gap: 16px; margin-bottom: 16px; align-items: stretch;
}
.v2-iw-opps-intel__kpis {
  display: flex; gap: 10px; flex-wrap: wrap; flex: 1;
}
.v2-iw-opps-kpi {
  flex: 1; min-width: 130px; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
}
.v2-iw-opps-kpi__value {
  font-size: 20px; font-weight: 700; color: var(--text-strong, #111); line-height: 1.1;
}
.v2-iw-opps-kpi__label {
  font-size: 10px; color: var(--muted, #6b7280); font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px;
}

/* Territory breakdown mini-chart */
.v2-iw-opps-intel__terr {
  min-width: 260px; max-width: 320px; padding: 12px 16px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.v2-iw-opps-intel__terr-title {
  font-size: 11px; font-weight: 700; color: var(--text-strong);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: .3px;
}
.v2-iw-opps-terr-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.v2-iw-opps-terr-label {
  font-size: 11px; font-weight: 600; color: var(--text-strong); min-width: 70px;
}
.v2-iw-opps-terr-bar {
  flex: 1; height: 10px; background: var(--bg-offset, #f3f4f6);
  border-radius: 5px; overflow: hidden;
}
.v2-iw-opps-terr-bar__bg {
  height: 100%; background: rgba(59,130,246,.15); border-radius: 5px;
  position: relative; min-width: 2px;
}
.v2-iw-opps-terr-bar__fill {
  height: 100%; background: var(--accent, #3b82f6); border-radius: 5px;
}
.v2-iw-opps-terr-count {
  font-size: 10px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; min-width: 80px; text-align: right;
}

/* Motion badge (colored pill in grid + drawer) */
.v2-iw-motion-badge {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 10px; color: #fff; white-space: nowrap;
  letter-spacing: .2px;
}

/* Signal-type badge (Why Now column + drawer) */
.v2-iw-signal-badge {
  display: inline-block; font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 8px; color: #fff; white-space: nowrap;
  letter-spacing: .3px; text-transform: uppercase;
}

/* Why Now structured list inside drawer */
.v2-iw-why-now-list {
  list-style: none; padding: 0; margin: 0;
}

/* My / All toggle group */
.v2-iw-toggle-group {
  display: inline-flex; border: 1px solid var(--border, #d1d5db); border-radius: 6px; overflow: hidden;
}
.v2-iw-toggle-btn {
  padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--bg-card, #fff); color: var(--muted); border: none;
  transition: background .15s, color .15s;
}
.v2-iw-toggle-btn:not(:last-child) {
  border-right: 1px solid var(--border, #d1d5db);
}
.v2-iw-toggle-btn:hover { background: var(--bg-offset, #f3f4f6); color: var(--text-strong); }
.v2-iw-toggle-btn.active {
  background: var(--accent, #3b82f6); color: #fff;
}

/* Inline quick-action buttons inside AG Grid row */
.v2-iw-inline-actions {
  display: flex; gap: 4px; align-items: center; height: 100%;
}
.v2-iw-inline-action {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--muted); transition: all .15s;
  padding: 0;
}
.v2-iw-inline-action:hover {
  border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,.06);
}
.v2-iw-inline-action:active { transform: scale(.92); }

/* Active view filter badge */
.v2-iw-view-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 12px; background: var(--accent, #3b82f6); color: #fff;
}

/* Quick-log modal overlay */
.v2-iw-modal-overlay {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); animation: v2FadeIn .12s ease;
}
.v2-iw-modal {
  width: 420px; max-width: 92vw; background: var(--card-bg, #fff);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  animation: v2ModalPop .18s ease;
}
@keyframes v2ModalPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.v2-iw-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-iw-modal__body { padding: 16px 18px; }

/* ── Firm Detail — Header ── */
.v2-iw-firm-header {
  margin-bottom: 16px;
}
.v2-iw-firm-header__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.v2-iw-crd-badge {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; background: var(--bg-offset, #f3f4f6); color: var(--muted);
  vertical-align: middle; margin-left: 6px;
}
.v2-iw-firm-action {
  white-space: nowrap;
}

/* Relationship Health Strip */
.v2-iw-health-strip {
  display: flex; gap: 20px; padding: 12px 16px;
  background: var(--bg-offset, #f3f4f6); border-radius: 8px;
  flex-wrap: wrap;
}
.v2-iw-health-stat {
  display: flex; align-items: center; gap: 8px;
}

/* ── Firm Detail — Tabs ── */
.v2-iw-firm-tabs {
  display: flex; gap: 0; overflow-x: auto;
  border-bottom: 2px solid var(--border, #e5e7eb);
}
.v2-iw-firm-tab {
  padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); transition: all .15s; white-space: nowrap;
  margin-bottom: -2px;
}
.v2-iw-firm-tab:hover { color: var(--text-strong); }
.v2-iw-firm-tab.active {
  color: var(--accent, #3b82f6); border-bottom-color: var(--accent, #3b82f6);
}
.v2-iw-firm-tab i { margin-right: 4px; font-size: 11px; }

/* ── Activity Filter Chips ── */
.v2-iw-filter-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.v2-iw-filter-chip {
  padding: 4px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
  background: var(--bg-offset, #f3f4f6); color: var(--muted);
  border: 1px solid var(--border, #d1d5db); border-radius: 16px;
  transition: all .15s;
}
.v2-iw-filter-chip:hover {
  border-color: var(--accent); color: var(--accent);
}
.v2-iw-filter-chip.active {
  background: var(--accent, #3b82f6); color: #fff; border-color: var(--accent, #3b82f6);
}

/* Activity timeline — linked opp tag */
.v2-iw-timeline__opp-link {
  font-size: 10px; font-weight: 600; color: var(--accent, #3b82f6);
  margin: 2px 0; cursor: pointer;
}
.v2-iw-timeline__opp-link:hover { text-decoration: underline; }

/* Dark theme adjustments */
[data-theme="dark"] .v2-iw-tile { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-tile:hover { border-color: var(--accent); }
[data-theme="dark"] .v2-iw-scope-bar { background: var(--bg-offset, #1e1e2e); }
[data-theme="dark"] .v2-iw-drawer { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-modal { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-toggle-btn { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-inline-action { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-health-strip { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-crd-badge { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-filter-chip { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-camp-kpi { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-opps-kpi { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-opps-intel__terr { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-opps-terr-bar { background: rgba(255,255,255,.06); }
[data-theme="dark"] .v2-iw-opps-terr-bar__bg { background: rgba(59,130,246,.2); }
[data-theme="dark"] .v2-iw-wizard-steps { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-wiz-summary { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-wiz-input { background: var(--card-bg, #1e1e2e); color: var(--text-strong); }
[data-theme="dark"] .v2-iw-wiz-quickstart { background: rgba(245,158,11,.08); }
[data-theme="dark"] .v2-iw-wiz-cluster-banner { background: rgba(59,130,246,.1); }
[data-theme="dark"] .v2-iw-wiz-msg-banner { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-wiz-tp-num { background: rgba(255,255,255,.08); }
[data-theme="dark"] .v2-iw-wiz-tp-remove:hover { background: rgba(239,68,68,.15); }
[data-theme="dark"] .v2-iw-mo-kpi { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-mo-select { background: var(--card-bg, #1e1e2e); color: var(--text-strong); }
[data-theme="dark"] .v2-iw-mo-tw-btn { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-mo-tw-btn:hover:not(.active) { background: rgba(255,255,255,.05); }
[data-theme="dark"] .v2-iw-mo-table th { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-mo-table tbody tr:hover { background: rgba(255,255,255,.03); }
[data-theme="dark"] .v2-iw-cd-kpi { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-cd-table th { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-iw-cd-msg-notice { background: rgba(59,130,246,.08); }
[data-theme="dark"] .v2-iw-cd-funnel-legend-item { color: var(--text-strong, #e5e5e5); }
[data-theme="dark"] .v2-iw-timeline__icon { opacity: .9; }

/* .dark-theme equivalents (app uses .dark-theme class, not data-theme attr) */
.dark-theme .v2-iw-scope-bar { background: #111520; border-color: #1e2433; }
.dark-theme .v2-iw-scope-bar__label { color: #e6e9f0; }
.dark-theme .v2-iw-scope-bar__select { background: #161b26; border-color: #1e2433; color: #e6e9f0; }
.dark-theme .v2-iw-tile { background: #111520; border-color: #1e2433; }
.dark-theme .v2-iw-tile:hover { border-color: var(--accent); }
.dark-theme .v2-iw-drawer { background: #111520; border-color: #1e2433; }
.dark-theme .v2-iw-modal { background: #111520; border-color: #1e2433; }
.dark-theme .v2-iw-toggle-btn { background: #111520; border-color: #1e2433; color: #e6e9f0; }
.dark-theme .v2-iw-inline-action { background: #111520; }
.dark-theme .v2-iw-health-strip { background: #111520; }
.dark-theme .v2-iw-crd-badge { background: #161b26; }
.dark-theme .v2-iw-filter-chip { background: #161b26; }
.dark-theme .v2-iw-camp-kpi { background: #111520; }
.dark-theme .v2-iw-opps-kpi { background: #111520; }
.dark-theme .v2-iw-opps-intel__terr { background: #111520; }
.dark-theme .v2-iw-wizard-steps { background: #111520; }
.dark-theme .v2-iw-wiz-input { background: #161b26; color: #e6e9f0; border-color: #1e2433; }
.dark-theme .v2-iw-mo-kpi { background: #111520; }
.dark-theme .v2-iw-mo-select { background: #161b26; color: #e6e9f0; border-color: #1e2433; }
.dark-theme .v2-iw-mo-table th { background: #111520; }
.dark-theme .v2-iw-cd-kpi { background: #111520; }
.dark-theme .v2-iw-cd-table th { background: #111520; }

/* Responsive */
@media (max-width: 768px) {
  .v2-iw-content { padding: 16px; }
  .v2-iw-tiles { grid-template-columns: 1fr; }
  .v2-iw-scope-bar { flex-direction: column; align-items: stretch; }
  .v2-iw-drawer { width: 100%; max-width: 100vw; }
  .v2-iw-modal { width: 100%; max-width: 100vw; border-radius: 0; }
  .v2-iw-toggle-group { width: 100%; }
  .v2-iw-toggle-btn { flex: 1; text-align: center; }
  .v2-iw-firm-header__top { flex-direction: column; }
  .v2-iw-health-strip { flex-direction: column; gap: 10px; }
  .v2-iw-firm-tabs { flex-wrap: wrap; }
  .v2-iw-camp-kpi-strip { flex-direction: column; }
  .v2-iw-mo-kpis { grid-template-columns: repeat(2, 1fr); }
  .v2-iw-mo-header { flex-direction: column; }
  .v2-iw-mo-header__actions { flex-wrap: wrap; }
  .v2-iw-cd-kpis { grid-template-columns: repeat(2, 1fr); }
  .v2-iw-cd-header { flex-direction: column; }
  .v2-iw-opps-intel { flex-direction: column; }
  .v2-iw-opps-intel__terr { max-width: 100%; }
  .v2-iw-wiz-twocol { grid-template-columns: 1fr; }
  .v2-iw-wiz-sidebar { position: static; }
  .v2-iw-wiz-filters { flex-direction: column; }
  .v2-iw-wiz-field-row { flex-direction: column; }
  .v2-iw-wiz-obj-pair { flex-direction: column; }
  .v2-iw-wiz-review-grid { grid-template-columns: 1fr; }
}

/* ─── Dashboard Editor (Settings page) ─────────────────────────── */

.v2-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
}
.v2-modal {
  background: var(--card-bg, #fff); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18); overflow: hidden;
  max-height: 90vh; display: flex; flex-direction: column;
}
.v2-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.v2-modal__header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.v2-modal__close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--muted, #6b7280); padding: 4px 8px; border-radius: 4px;
}
.v2-modal__close:hover { background: var(--bg-offset, #f3f4f6); }
.v2-modal__body { padding: 20px; overflow-y: auto; }

.v2-input {
  padding: 7px 10px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 5px; font-size: 13px; background: var(--card-bg, #fff);
  color: var(--text-strong, #111827);
}
.v2-input:focus {
  outline: none; border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.v2-btn--sm { padding: 5px 12px; font-size: 12px; font-weight: 500; border-radius: 5px; cursor: pointer; border: none; }
.v2-btn--xs { padding: 3px 8px; font-size: 11px; font-weight: 500; border-radius: 4px; cursor: pointer; border: none; }
.v2-btn--accent { background: var(--accent, #3b82f6); color: #fff; }
.v2-btn--accent:hover { opacity: .9; }
.v2-btn--outline {
  background: transparent; color: var(--text-strong, #111827);
  border: 1px solid var(--border, #e5e7eb);
}
.v2-btn--outline:hover { background: var(--bg-offset, #f3f4f6); }

[data-theme="dark"] .v2-modal { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .v2-modal__header { border-color: var(--border, #2d3748); }
[data-theme="dark"] .v2-input { background: var(--bg, #111520); color: #e6e9f0; border-color: var(--border, #2d3748); }
[data-theme="dark"] .v2-btn--outline { color: #e6e9f0; border-color: var(--border, #2d3748); }
[data-theme="dark"] .v2-btn--outline:hover { background: var(--bg-elev, #1a1f2e); }

/* Compact icon-only action buttons inside ag-grid cells. The base class
   `.v2-grid-action-btn` is defined in adminCrmV2.css; here we tighten the
   sizing for grid use and add a destructive (--danger) variant used by the
   delete column in the IW Settings dashboard editor. */
.v2-grid-action-btn {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-grid-action-btn i { font-size: 11px; }
.v2-grid-action-btn--danger { color: #b91c1c; }
.v2-grid-action-btn--danger:hover { background: rgba(231,76,60,.12); color: #b91c1c; }
[data-theme="dark"] .v2-grid-action-btn--danger { color: #f87171; }
[data-theme="dark"] .v2-grid-action-btn--danger:hover { background: rgba(248,113,113,.15); color: #fca5a5; }

/* ========================================================================
   MARKETPLACE SIDEBAR FAVORITES
   ======================================================================== */

.mp-sidebar-favorites {
  cursor: pointer;
}

.mp-fav-star {
  color: var(--warning, #ff9800);
  font-size: 11px;
}

/* ========================================================================
   ADMIN MARKETPLACES PAGE
   ======================================================================== */

.amp-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 2px;
  color: var(--text-muted, #666);
  font-size: 13px;
  border-radius: 4px;
  vertical-align: middle;
  transition: background .12s ease, color .12s ease;
}
.amp-act-btn:last-child { margin-right: 0; }
.amp-act-btn:hover { background: var(--hover-bg, #f5f5f5); }
.amp-edit-btn:hover { color: var(--primary, #1976d2); }
.amp-del-btn:hover { color: var(--danger, #e53935); }
.mpa-edit-btn:hover { color: var(--primary, #1976d2); }
.mpa-members-btn:hover { color: var(--primary, #1976d2); }
.mpa-role-btn:hover { color: var(--primary, #1976d2); }
.mpa-remove-btn:hover { background: rgba(239, 68, 68, .10); }

/* Action cell: center icons vertically in 40–48 px ag-grid rows */
.ag-theme-balham .mpa-actions-cell,
.ag-theme-balham .mpa-logo-cell,
.ag-theme-balham .mpa-center-cell {
  display: flex;
  align-items: center;
}
.ag-theme-balham .mpa-center-cell { justify-content: center; }
.ag-theme-balham .mpa-logo-cell { justify-content: center; padding: 4px; }
.mpa-logo-thumb {
  max-width: 56px;
  max-height: 36px;
  border-radius: 4px;
  object-fit: contain;
}
.mpa-logo-placeholder {
  color: var(--text-muted, #9ca3af);
  font-size: 18px;
}
.mpa-muted-dash { color: var(--text-muted, #9ca3af); }

/* Admin Marketplace page grid fills the remaining pane row */
#v2-marketplace-admin .mpa-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Empty / error / loading states */
.mpa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  background: var(--bg, #fff);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  margin: 16px;
}
.mpa-empty i { font-size: 28px; color: var(--text-muted, #9ca3af); }
.mpa-empty-title { font-size: 15px; font-weight: 600; color: var(--text, #111827); }
.mpa-empty-sub { font-size: 13px; }
.mpa-empty--error { color: var(--danger, #de350b); border-color: rgba(222, 53, 11, .3); }
.mpa-empty--error i { color: var(--danger, #de350b); }
.mpa-empty--loading { border-style: solid; opacity: .75; }

.amp-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amp-modal {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border-radius: 10px;
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

.amp-modal--wide {
  width: 880px;
  height: 80vh;
  max-height: 720px;
}

/* Secondary (stacked) overlay sits above a base overlay */
.amp-modal-overlay--stack { z-index: 9010; }

.amp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}

.amp-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong, #222);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mpa-modal-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--bg-elev, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  padding: 2px;
  flex-shrink: 0;
}
.mpa-modal-logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
  font-size: 14px;
}
.mpa-modal-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mpa-modal-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amp-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--text-muted, #999);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.amp-modal-close:hover { color: var(--text-strong, #222); }

.amp-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.amp-modal-body--flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.amp-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}

.mpa-members-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.amp-required { color: var(--danger, #e53935); }

.amp-form-user-row {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--text, #333);
}

.amp-form-group {
  margin-bottom: 16px;
}

.amp-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #666);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.amp-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text, #333);
  background: var(--bg, #fff);
  box-sizing: border-box;
}
.amp-input:focus {
  outline: none;
  border-color: var(--primary, #1976d2);
  box-shadow: 0 0 0 2px rgba(25,118,210,.15);
}

.amp-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.amp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text, #333);
  cursor: pointer;
}

.amp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}

/* Logo upload row in Edit Marketplace modal */
.amp-logo-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.amp-logo-preview {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 1px dashed var(--border, #cbd5e1);
  background: var(--bg-elev, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.amp-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.amp-logo-preview-icon {
  font-size: 32px;
  color: var(--text-muted, #cbd5e1);
}
.amp-logo-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.amp-logo-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.amp-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.amp-upload-status {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}
.amp-upload-status--success { color: var(--success, #10b981); }
.amp-upload-status--error { color: var(--danger, #ef4444); }
.amp-form-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

[data-theme="dark"] .amp-modal { background: var(--card-bg, #1e1e2e); }
[data-theme="dark"] .amp-modal-header,
[data-theme="dark"] .amp-modal-toolbar { border-color: var(--border, #2d3748); }
[data-theme="dark"] .amp-modal-footer { border-color: var(--border, #2d3748); }
[data-theme="dark"] .amp-input { background: var(--bg, #111520); color: #e6e9f0; border-color: var(--border, #2d3748); }
[data-theme="dark"] .amp-act-btn:hover { background: var(--bg-elev, #1a1f2e); }
[data-theme="dark"] .amp-logo-preview {
  background: var(--bg, #111520);
  border-color: var(--border, #2d3748);
}
[data-theme="dark"] .mpa-modal-logo {
  background: var(--bg, #111520);
  border-color: var(--border, #2d3748);
}
[data-theme="dark"] .mpa-empty {
  background: var(--card-bg, #1e1e2e);
  border-color: var(--border, #2d3748);
  color: var(--text-muted, #9ca3af);
}
[data-theme="dark"] .mpa-empty-title { color: #e6e9f0; }

/* ====================================================================== */
/* V2 ALERTS — Badge, Dropdown, Toast                                     */
/* ====================================================================== */

.v2-alerts-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center;
  color: #fff;
  background: var(--v2-danger, #dc3545);
  border-radius: 10px;
  pointer-events: none;
}

.v2-alerts-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 380px; max-height: 480px;
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: var(--radius, 12px);
  box-shadow: var(--v2-shadow-lg, 0 12px 40px rgba(0,0,0,.15));
  z-index: 20000;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.v2-alerts-dropdown.is-open {
  opacity: 1; transform: translateY(0);
}

.v2-alerts-dropdown__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}
.v2-alerts-dropdown__title {
  font-size: 14px; font-weight: 700;
  color: var(--v2-text-primary, #212529);
}
.v2-alerts-dropdown__mark-all {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--v2-accent, #0964A0);
  padding: 0; font-weight: 500;
}
.v2-alerts-dropdown__mark-all:hover { text-decoration: underline; }

.v2-alerts-dropdown__list {
  flex: 1; overflow-y: auto;
  max-height: 360px;
}

.v2-alerts-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 16px; color: var(--v2-text-muted, #6c757d);
}
.v2-alerts-empty i { font-size: 28px; margin-bottom: 8px; }
.v2-alerts-empty p { font-size: 13px; margin: 0; }

.v2-alerts-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--v2-border-light, #f0f0f0);
  transition: background .15s ease;
}
.v2-alerts-item:hover { background: var(--v2-bg-elevated, #f8f9fa); }
.v2-alerts-item--unread { background: var(--v2-accent-bg, rgba(9,100,160,.04)); }
.v2-alerts-item--unread:hover { background: var(--v2-accent-bg, rgba(9,100,160,.08)); }

.v2-alerts-item__icon {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--v2-bg-page, #f8f9fa);
  font-size: 14px;
}
.v2-alerts-item__body { flex: 1; min-width: 0; }
.v2-alerts-item__title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--v2-text-primary, #212529);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-alerts-item__message {
  font-size: 12px; line-height: 1.4; margin-top: 2px;
  color: var(--v2-text-secondary, #495057);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-alerts-item__time {
  font-size: 11px; color: var(--v2-text-muted, #6c757d); margin-top: 4px;
}

.v2-alerts-dropdown__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--v2-border, #dee2e6);
  text-align: center;
}
.v2-alerts-dropdown__view-all {
  font-size: 13px; font-weight: 500;
  color: var(--v2-accent, #0964A0); cursor: pointer;
}
.v2-alerts-dropdown__view-all:hover { text-decoration: underline; }

/* Toast */
.v2-alert-toast {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; gap: 12px; align-items: flex-start;
  width: 360px; padding: 14px 16px;
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: var(--radius, 12px);
  box-shadow: var(--v2-shadow-lg, 0 12px 40px rgba(0,0,0,.18));
  z-index: 50000; cursor: pointer;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.v2-alert-toast.is-visible { opacity: 1; transform: translateY(0); }
.v2-alert-toast.is-leaving { opacity: 0; transform: translateY(16px); }

.v2-alert-toast__icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.v2-alert-toast__body { flex: 1; min-width: 0; }
.v2-alert-toast__title { font-size: 13px; font-weight: 600; color: var(--v2-text-primary, #212529); }
.v2-alert-toast__message { font-size: 12px; color: var(--v2-text-secondary, #495057); margin-top: 2px; }
.v2-alert-toast__close {
  background: none; border: none; font-size: 18px; line-height: 1;
  color: var(--v2-text-muted, #6c757d); cursor: pointer; padding: 0;
}

/* Dark theme */
.dark-theme .v2-alerts-dropdown {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .v2-alerts-dropdown__header { border-bottom-color: #1e2433; }
.dark-theme .v2-alerts-dropdown__title { color: #e6e9f0; }
.dark-theme .v2-alerts-dropdown__footer { border-top-color: #1e2433; }

.dark-theme .v2-alerts-item { border-bottom-color: #1e2433; }
.dark-theme .v2-alerts-item:hover { background: rgba(255,255,255,.05); }
.dark-theme .v2-alerts-item--unread {
  background: rgba(13,124,196,.12);
}
.dark-theme .v2-alerts-item--unread:hover {
  background: rgba(13,124,196,.18);
}
.dark-theme .v2-alerts-item__icon { background: #0c111a; }
.dark-theme .v2-alerts-item__title { color: #e6e9f0; }
.dark-theme .v2-alerts-item__message { color: #c4c9d4; }
.dark-theme .v2-alerts-item__time { color: #8b92a5; }

.dark-theme .v2-alerts-empty { color: #8b92a5; }

.dark-theme .v2-alert-toast { background: #111520; border-color: #1e2433; }
.dark-theme .v2-alert-toast__title { color: #e6e9f0; }
.dark-theme .v2-alert-toast__message { color: #c4c9d4; }

/* ====================================================================== */
/* V2 ACCOUNT DROPDOWN                                                     */
/* ====================================================================== */

.v2-account-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 260px;
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: var(--radius, 12px);
  box-shadow: var(--v2-shadow-lg, 0 12px 40px rgba(0,0,0,.15));
  z-index: 20000;
  overflow: hidden;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.v2-account-dropdown.is-open {
  opacity: 1; transform: translateY(0);
}

.v2-account-dropdown__header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}
.v2-account-dropdown__name {
  font-size: 14px; font-weight: 700;
  color: var(--v2-text-primary, #212529);
}
.v2-account-dropdown__email {
  font-size: 12px; color: var(--v2-text-muted, #6c757d);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.v2-account-dropdown__body {
  padding: 6px 0;
}
.v2-account-dropdown__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--v2-text-primary, #212529);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.v2-account-dropdown__item:hover {
  background: var(--v2-bg-elevated, #f5f6f8);
}
.v2-account-dropdown__item i {
  font-size: 13px;
  color: var(--v2-text-muted, #6c757d);
  width: 18px; text-align: center;
}
.v2-account-dropdown__divider {
  height: 1px; margin: 4px 12px;
  background: var(--v2-border, #dee2e6);
}

/* Dark theme
   The dropdown is appended inside `.header-actions` where several page-level
   CSS files redefine `--v2-text-primary` / `--v2-text-muted`, so the
   var(..., #212529) fallbacks in the base rules were bleeding dark text onto
   the dark dropdown surface. Pin every text + separator colour to explicit
   hex values so the menu reads cleanly regardless of host-page variables. */
.dark-theme .v2-account-dropdown {
  background: #111520 !important;
  border-color: #1e2433 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55) !important;
}
.dark-theme .v2-account-dropdown__header {
  border-bottom-color: #1e2433 !important;
}
.dark-theme .v2-account-dropdown__name {
  color: #f1f3f7 !important;
}
.dark-theme .v2-account-dropdown__email {
  color: #b0b7c5 !important;
}
.dark-theme .v2-account-dropdown__item {
  color: #e6e9f0 !important;
}
.dark-theme .v2-account-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}
.dark-theme .v2-account-dropdown__item i {
  color: #b0b7c5 !important;
}
.dark-theme .v2-account-dropdown__item:hover i {
  color: #4db5e0 !important;
}
.dark-theme .v2-account-dropdown__divider {
  background: #1e2433 !important;
}

/* ====================================================================== */
/* V2 REPORT MODAL                                                        */
/* ====================================================================== */

.v2-report-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 30000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.v2-report-modal-overlay.is-open {
  opacity: 1; visibility: visible;
}

.v2-report-modal {
  width: 720px; max-width: 95vw;
  max-height: 85vh;
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--v2-shadow-lg, 0 12px 40px rgba(0,0,0,.2));
  display: flex; flex-direction: column;
  transform: scale(.96) translateY(8px);
  transition: transform .25s ease;
}
.v2-report-modal-overlay.is-open .v2-report-modal {
  transform: scale(1) translateY(0);
}

.v2-report-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}
.v2-report-modal__header h3 {
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--v2-text-primary, #212529);
}
.v2-report-modal__close {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: var(--v2-text-muted, #6c757d); cursor: pointer; padding: 4px;
  border-radius: 6px; transition: background .15s;
}
.v2-report-modal__close:hover { background: var(--v2-bg-page, #f8f9fa); }

.v2-report-modal__body {
  flex: 1;
  /* overflow-y must be 'visible' (not 'auto') so the absolutely-positioned
     autocomplete dropdown can escape the body bounds. Report forms are short
     in practice, so clipping is rare; when truly long, the modal itself will
     overflow the viewport rather than clip dropdowns — acceptable tradeoff. */
  overflow-y: visible;
  padding: 20px 24px;
}

/* Two-column grid for report fields; compact rows + wrap cleanly on narrow
   viewports. Individual fields can opt into a full-width span via
   .v2-report-field--full (template picker, Email CC, textareas). */
#v2-rm-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 4px;
}
#v2-rm-form .v2-report-field { min-width: 0; }
#v2-rm-form .v2-report-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  #v2-rm-form { grid-template-columns: 1fr; }
}

.v2-report-field {
  margin-bottom: 12px;
}
.v2-report-field label {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--v2-text-secondary, #495057);
}
.v2-report-field label .v2-req { color: var(--v2-danger, #dc3545); margin-left: 2px; }
.v2-report-field input,
.v2-report-field select,
.v2-report-field textarea {
  width: 100%; padding: 8px 10px;
  font-size: 13px; line-height: 1.4;
  color: var(--v2-text-primary, #212529);
  background: var(--v2-bg-page, #f8f9fa);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.v2-report-field input:focus,
.v2-report-field select:focus,
.v2-report-field textarea:focus {
  outline: none;
  border-color: var(--v2-accent, #0964A0);
  box-shadow: 0 0 0 3px var(--v2-accent-bg, rgba(9,100,160,.12));
}
.v2-report-field textarea { min-height: 80px; resize: vertical; }

.v2-report-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--v2-border, #dee2e6);
}

.v2-report-btn {
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  border-radius: 8px; border: none; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.v2-report-btn--primary {
  background: var(--v2-accent, #0964A0); color: #fff;
}
.v2-report-btn--primary:hover { background: var(--v2-accent-hover, #075280); }
.v2-report-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.v2-report-btn--secondary {
  background: var(--v2-bg-page, #f8f9fa);
  color: var(--v2-text-primary, #212529);
  border: 1px solid var(--v2-border, #dee2e6);
}
.v2-report-btn--secondary:hover { background: var(--v2-bg-elevated, #e9ecef); }

/* Autocomplete inside report modal */
.v2-report-field .v2-autocomplete { position: relative; width: 100%; }
.v2-report-field .v2-auto-input {
  width: 100%; padding: 8px 10px;
  font-size: 13px; line-height: 1.4;
  color: var(--v2-text-primary, #212529);
  background: var(--v2-bg-page, #f8f9fa);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.v2-report-field .v2-auto-input:focus {
  outline: none;
  border-color: var(--v2-accent, #0964A0) !important;
  box-shadow: 0 0 0 3px var(--v2-accent-bg, rgba(9,100,160,.12)) !important;
}
.v2-report-field .v2-ac-dropdown {
  border-radius: 8px; margin-top: 4px;
  max-height: 280px;
}

/* Dark */
.dark-theme .v2-report-modal { background: var(--v2-bg-surface, #111520); border-color: var(--v2-border, #1e2433); }
.dark-theme .v2-report-modal__close:hover { background: var(--v2-bg-elevated, #161b26); }
.dark-theme .v2-report-field input,
.dark-theme .v2-report-field select,
.dark-theme .v2-report-field textarea { background: var(--v2-bg-page, #0c111a); border-color: var(--v2-border, #1e2433); color: var(--v2-text-primary, #e6e9f0); }
.dark-theme .v2-report-field .v2-auto-input { background: var(--v2-bg-page, #0c111a); border-color: var(--v2-border, #1e2433); color: var(--v2-text-primary, #e6e9f0); }
/* Force dark button styling with !important + hard-coded hex so page-level
 * redefinitions of --v2-bg-page / --v2-text-primary can't flip these back
 * to the light theme (reported on /profile/notifications). */
.dark-theme .v2-report-btn--secondary {
  background: #161b26 !important;
  color: #e6e9f0 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-report-btn--secondary:hover {
  background: #1e2433 !important;
  color: #ffffff !important;
}

/* Notification filter active state */
.v2-notif-filter.is-active {
  background: var(--v2-accent, #0964A0) !important;
  color: #fff !important;
  border-color: var(--v2-accent, #0964A0) !important;
}
.dark-theme .v2-notif-filter.is-active {
  background: var(--v2-accent, #0964A0) !important;
  color: #fff !important;
  border-color: var(--v2-accent, #0964A0) !important;
}

/* Notifications list (Profile → Notifications) ---------------------------- */
.v2-notif-list {
  display: flex; flex-direction: column;
  gap: 0;
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: 10px;
  overflow: hidden;
  background: var(--v2-bg-surface, #fff);
}
.v2-notif-row {
  display: flex; gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--v2-bg-surface, #fff);
  border-bottom: 1px solid var(--v2-border, #dee2e6);
  border-left: 3px solid transparent;
  transition: background .15s ease, border-left-color .15s ease, box-shadow .15s ease;
}
.v2-notif-row:last-child { border-bottom: none; }
.v2-notif-row.is-unread { border-left-color: var(--v2-accent, #0964A0); }
.v2-notif-row.is-read { opacity: .75; }
.v2-notif-row:hover {
  background: var(--v2-bg-hover, #f1f3f4);
}
.v2-notif-row:hover.is-read { opacity: 1; }

.v2-notif-row__icon {
  font-size: 18px; flex-shrink: 0; margin-top: 2px;
}
.v2-notif-row__icon--success { color: var(--v2-success, #28a745); }
.v2-notif-row__icon--danger  { color: var(--v2-danger,  #dc3545); }
.v2-notif-row__icon--accent  { color: var(--v2-accent,  #0964A0); }

.v2-notif-row__body { flex: 1; min-width: 0; }
.v2-notif-row__title {
  font-size: 13px; font-weight: 600;
  color: var(--v2-text-primary, #212529);
}
.v2-notif-row__msg {
  font-size: 12px;
  color: var(--v2-text-secondary, #495057);
  margin-top: 2px;
}
.v2-notif-row__time {
  font-size: 11px;
  color: var(--v2-text-muted, #6c757d);
  margin-top: 4px;
}

.dark-theme .v2-notif-list    { background: var(--v2-bg-surface, #111520); border-color: var(--v2-border, #1e2433); }
.dark-theme .v2-notif-row     { background: var(--v2-bg-surface, #111520); border-bottom-color: var(--v2-border, #1e2433); }
.dark-theme .v2-notif-row:hover { background: rgba(255,255,255,.05); }
.dark-theme .v2-notif-row__title { color: #e6e9f0; }
.dark-theme .v2-notif-row__msg   { color: #c4c9d4; }
.dark-theme .v2-notif-row__time  { color: #8b92a5; }

/* ====================================================================== */
/* V2 REPORTS PAGE                                                        */
/* ====================================================================== */

.v2-reports-page { padding: 24px; }
.v2-reports-page__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.v2-reports-page__title {
  font-size: 24px; font-weight: 700; margin: 0;
  color: var(--v2-text-primary, #212529);
}
.v2-reports-page__subtitle {
  font-size: 13px; color: var(--v2-text-muted, #6c757d); margin: 4px 0 0;
}

.v2-reports-section { margin-bottom: 32px; }
.v2-reports-section__title {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--v2-text-secondary, #495057);
  margin-bottom: 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-border, #dee2e6);
}

.v2-template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.v2-template-card {
  background: var(--v2-bg-surface, #fff);
  border: 1px solid var(--v2-border, #dee2e6);
  border-radius: var(--radius, 12px);
  padding: 16px; cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.v2-template-card:hover {
  border-color: var(--v2-accent, #0964A0);
  box-shadow: var(--v2-shadow-md, 0 4px 16px rgba(0,0,0,.1));
}
.v2-template-card__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--v2-accent-bg, rgba(9,100,160,.08));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 18px;
  color: var(--v2-accent, #0964A0);
}
.v2-template-card__name {
  font-size: 14px; font-weight: 600; margin-bottom: 4px;
  color: var(--v2-text-primary, #212529);
}
.v2-template-card__desc {
  font-size: 12px; line-height: 1.4;
  color: var(--v2-text-muted, #6c757d);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Past reports table */
.v2-past-reports-grid { min-height: 300px; }

.v2-report-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: 6px;
}
.v2-report-status--pending { background: rgba(255,193,7,.12); color: #b8860b; }
.v2-report-status--complete { background: rgba(40,167,69,.12); color: #1e7e34; }
.v2-report-status--error { background: rgba(220,53,69,.12); color: #bd2130; }

/* Dark */
.dark-theme .v2-reports-page__title { color: #e6e9f0; }
.dark-theme .v2-reports-page__subtitle { color: #8b92a5; }
.dark-theme .v2-reports-section__title { color: #8b92a5; border-color: #1e2433; }
.dark-theme .v2-template-card { background: var(--v2-bg-surface, #111520); border-color: var(--v2-border, #1e2433); }
.dark-theme .v2-template-card:hover { border-color: var(--v2-accent, #0d7cc4); }

/* Highcharts fullscreen: override browser default black :fullscreen background */
:fullscreen { background: #ffffff !important; }
:-webkit-full-screen { background: #ffffff !important; }
.dark-theme :fullscreen { background: #111520 !important; }
.dark-theme :-webkit-full-screen { background: #111520 !important; }