/* =====================================================================
   CPI Portal — Global Mobile Layout Fixes
   Loaded on every portal page. Uses high specificity + !important to
   defeat inline styles and older page-local media queries.
   ===================================================================== */

@media (max-width: 768px) {

  /* Topbar compact on phones */
  .topbar { padding: 0 12px !important; }
  .topbar-right { gap: 8px !important; }
  .portal-name { display: none !important; }
  .retail-badge { display: none !important; }
  .investor-chip {
    font-size: 11px !important;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-btn { display: flex !important; }

  /* Sidebar slide-in */
  .sidebar {
    position: fixed !important;
    top: var(--topbar-h, 48px) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 40 !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar-overlay.open { display: block !important; }

  /* ------------------------------------------------------------------
     PERFORMANCE BAR — override any inline grid-template-columns:repeat(N,1fr)
     so stats reflow into 2 columns regardless of N.
     ------------------------------------------------------------------ */
  .perf-bar,
  .perf-bar[style] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: wrap !important;
  }
  .perf-stat {
    padding: 10px 12px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
  }
  .perf-stat:nth-child(even) { border-right: none !important; }
  /* Orphaned last stat spans full width when count is odd */
  .perf-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    border-right: none !important;
  }
  .perf-value { font-size: 18px !important; line-height: 1.1 !important; }
  .perf-label { font-size: 8.5px !important; letter-spacing: 0.12em !important; }
  .perf-sub { font-size: 9.5px !important; }

  /* ------------------------------------------------------------------
     MAIN CONTENT — tighten padding and collapse two-col grids
     ------------------------------------------------------------------ */
  .content { padding: 12px !important; }
  .two-col,
  .three-col,
  .split-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ------------------------------------------------------------------
     TABLES — enable horizontal scroll so 6-column tables don't blow
     out the viewport.
     ------------------------------------------------------------------ */
  .portfolio-table,
  .holdings-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* .doc-table holds admin-published (free-text) titles in col 1. Wrap long
     / unbroken titles instead of overflowing past the clipped viewport edge,
     which would push the nowrap VIEW button off-screen. */
  .doc-table td:first-child {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Cards tighten padding */
  .chart-area,
  .re-alloc-card,
  .widget-body { padding: 12px !important; }

  /* Any generic grid with 3+ cols fallback to 1 col on phone */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Prevent body-level horizontal overflow from breaking the layout */
  html, body { overflow-x: hidden !important; }
}

/* Extra-small phones (iPhone SE, small Androids) */
@media (max-width: 420px) {
  .investor-chip { display: none !important; }
  .perf-value { font-size: 15.5px !important; }
  .perf-label { font-size: 8px !important; }
  .content { padding: 10px !important; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   MOBILE — NO SIDE-SCROLL. Dense holdings tables become stacked cards,
   stat bars reflow, and every text block wraps inside the viewport so the
   phone never needs horizontal scrolling. (Added 2026-06-17.)
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- Holdings .data-table -> stacked cards -----------------------
     pwa.js stamps each <td> with data-label = its column header; we show
     that label on the left and the value on the right. The expand-detail
     row (.holding-expand-row) is excluded so its panel keeps its layout. */
  table.data-table { display: block !important; width: 100% !important; }
  table.data-table thead { display: none !important; }   /* labels replace the header */
  table.data-table tbody { display: block !important; }

  table.data-table tbody tr:not(.holding-expand-row) {
    display: block !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    background: var(--bg2);
    padding: 6px 12px;
    margin-bottom: 8px;
  }
  table.data-table tbody tr:not(.holding-expand-row) > td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border: none !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  table.data-table tbody tr:not(.holding-expand-row) > td + td {
    border-top: 1px solid rgba(37,42,51,0.5) !important;
  }
  table.data-table tbody tr:not(.holding-expand-row) > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    text-align: left;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* cells with no label (or the index "#") don't print a label / are hidden */
  table.data-table tbody tr:not(.holding-expand-row) > td:not([data-label])::before,
  table.data-table tbody tr:not(.holding-expand-row) > td[data-label=""]::before { content: none; }
  table.data-table tbody tr:not(.holding-expand-row) > td[data-label="#"] { display: none !important; }
  /* Ticker reads as the card's headline — content-driven (.ticker) so it
     works whether ticker is its own column (static/guest tables) or combined
     with the name in column 1 (live IBKR tables from accredited-default.js). */
  table.data-table tbody tr:not(.holding-expand-row) > td .ticker { font-size: 15px; font-weight: 600; }
  /* The hidden index cell ("#") still counts for `td + td`, so clear the
     stray divider it would otherwise draw above the first visible cell. */
  table.data-table tbody tr:not(.holding-expand-row) > td[data-label="#"] + td { border-top: none !important; }

  /* The clicked-ticker expand panel: full width, wrap its text */
  table.data-table tbody tr.holding-expand-row { display: block !important; }
  table.data-table tbody tr.holding-expand-row > td {
    display: block !important;
    white-space: normal !important;
    padding: 0 !important;
  }

  /* ---- Stat / metric bars reflow instead of overflowing ------------- */
  .portfolio-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .portfolio-stats-bar .ps-stat {
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    min-width: 0 !important;
  }
  .portfolio-stats-bar .ps-stat:nth-child(even) { border-right: none !important; }
  .acct-stats-bar { grid-template-columns: 1fr 1fr !important; }
  .acct-stats-bar .acct-stat:nth-child(even) { border-right: none !important; }
  .acct-stats-bar .acct-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ---- Fixed-width label columns must not force overflow ------------ */
  .bank-table td:first-child,
  .profile-table td:first-child {
    width: auto !important;
    white-space: normal !important;
  }

  /* ---- Text blocks always wrap inside the viewport ------------------ */
  .report-body, .report-body *,
  .he-block-text, .he-bullets li,
  .mi-headline, .mi-body,
  .pedro-msg-bubble, .pedro-msg-bubble * {
    overflow-wrap: anywhere !important;
    word-break: break-word;
    min-width: 0;
  }
}