/* Mobile audit fixes — overflow/crowding repairs, ≤430px (owned by mobile-audit agent) */
/* =====================================================================
   MOBILE AUDIT (Jul 2 2026) — phone-width overflow + crowding repairs.
   Audited programmatically at 360/390/430px across every view + every
   Business/Health sub-tab. Offenders found (all Business tables + two
   crowding items):
     · #bp-sidekicks roster table  → 709px wide at 390 (worst — Nick's report)
     · #bp-rotracker Open ROs table → 533px
     · #toolsTable (Finance)        → 464px
     · #bp-clients roster table     → 455px
     · #bp-profitability table      → 389px (360 only)
     · .biz-flag dismiss ✓ 22×22 / roster ↗ links 10×15 (tap targets)
     · #hp-chantelle .dc-m value clipped at 360 (no ellipsis)
   Strategy per the fix rules: (b) hide low-value columns — every roster
   ROW is itself tappable and opens the full Monday item, so hidden
   columns stay reachable — PLUS (a) horizontal-scroll safety net on the
   table cards. CSS only; no hooks touched; desktop widths unaffected.
   ===================================================================== */

@media (max-width: 480px) {

  /* ---- (a) scroll safety net: any Business card holding a roster table
     can scroll sideways instead of stretching the document. Dormant when
     the table fits (the normal case after the column trims below). ---- */
  #view-business .hp-panel section.card:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- (b) column trims — least-valuable columns per table.
     Safe: app.js renders every data <tr> with onclick=window.open(<Monday
     item URL>), so the full record (role, SSM, stage, HSM, needs…) is one
     tap away; the ↗ cell duplicated that same row click. Single-cell
     "Loading…/No matches" rows use one td[colspan] (nth-child(1)) and are
     never matched by these selectors. ---- */

  /* Sidekicks roster (Sidekick·Client·Role·Status·Hrs·SSM·↗):
     hide Role(3), SSM(6), ↗(7) → keep Sidekick/Client/Status/Hrs */
  #bp-sidekicks table th:nth-child(3), #bp-sidekicks table td:nth-child(3),
  #bp-sidekicks table th:nth-child(6), #bp-sidekicks table td:nth-child(6),
  #bp-sidekicks table th:nth-child(7), #bp-sidekicks table td:nth-child(7) {
    display: none;
  }

  /* Client roster (Client·Status·Stage·Health·HSM·↗):
     hide Stage(3), HSM(5), ↗(6) → keep Client/Status/Health */
  #bp-clients table th:nth-child(3), #bp-clients table td:nth-child(3),
  #bp-clients table th:nth-child(5), #bp-clients table td:nth-child(5),
  #bp-clients table th:nth-child(6), #bp-clients table td:nth-child(6) {
    display: none;
  }

  /* Open ROs — first card's table in RO Tracker (RO·Stage·Priority·Needs·
     Days·↗): hide Needs(4), ↗(6) → keep RO/Stage/Priority/Days */
  #bp-rotracker section:nth-of-type(1) table th:nth-child(4),
  #bp-rotracker section:nth-of-type(1) table td:nth-child(4),
  #bp-rotracker section:nth-of-type(1) table th:nth-child(6),
  #bp-rotracker section:nth-of-type(1) table td:nth-child(6) {
    display: none;
  }

  /* SaaS tools (Tool·Category·Plan·Card·$/mo·↗): hide only the ↗ column —
     :last-child (not nth-child) because the JS "Total / mo" row has a
     colspan=4 lead cell; its trailing empty spacer td is also :last-child
     so the total stays aligned. :not([colspan]) protects the single-cell
     Loading/error row. */
  #toolsTable th:last-child,
  #toolsTable td:last-child:not([colspan]) {
    display: none;
  }

  /* ---- let squeezed tables actually wrap instead of forcing width ---- */
  /* headers were globally white-space:nowrap (styles.css) — allow 2 lines */
  #view-business .card table th { white-space: normal; }
  /* app.js writes inline white-space:nowrap on the Hrs cell + its
     "⚠︎ combined / n heroes" span — the single biggest width forcer */
  #view-business .card table td[style*="white-space"],
  #view-business .card table td span[style*="white-space"] {
    white-space: normal !important;
  }
  /* long unbreakable strings (client names, plan text, URLs-as-names) */
  #view-business .card table td { overflow-wrap: anywhere; }
  /* …but never split a number ("$434" / "38.2h" / day counts) mid-wrap —
     numeric cells are short, so nowrap can't force table overflow */
  #view-business .card table td.num { overflow-wrap: normal; white-space: nowrap; }

  /* ---- tap targets ---- */
  /* surviving ↗ links (e.g. Wins table): pad the hit box to ≥40px without
     visually growing the glyph; negative margins keep row layout intact */
  #view-business .card table td .lnk {
    display: inline-block;
    padding: 13px 15px;
    margin: -13px -10px;
  }
  /* roster rows read better + tap easier with a touch more rhythm */
  #view-business .card table td { padding-top: 11px; padding-bottom: 11px; }

  /* Overview flag dismiss ✓ — app.js inlines 22×22. Grow the hit box to
     40×40 via a transparent border (background-clip keeps the visible
     circle ~28px); !important needed to beat the inline styles. */
  #view-business .biz-flag > button[onclick^="bizDismissFlag"] {
    width: 40px !important;
    height: 40px !important;
    top: 2px !important;
    right: 2px !important;
    border: 6px solid transparent !important;
    background-clip: padding-box !important;
  }
  /* keep flag titles clear of the bigger button (inline pad was 26px) */
  #view-business .biz-flag .ttl { padding-right: 44px !important; }

  /* hp sub-tab pills (Health people / Business sections) are ~28px tall —
     extend the touch box to ~40px invisibly, same visual pill */
  .hp-btn {
    border: 6px solid transparent;
    background-clip: padding-box;
    margin: -6px;
  }

  /* chart-legend entries are click-to-open-modal — give them a real pad */
  #biz-skLegend > span, #biz-statusLegend > span {
    padding: 6px 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  /* ---- KPI tiles: inline grid-template-columns:repeat(4,1fr) crushes
     labels ("Clients : sidekicks" etc.) into ~75px columns with hidden
     clipping. 2×2 at phone widths; desktop keeps the inline 4-across. ---- */
  #view-business .biz-kpis { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Health (Chantelle tab, 360px): metric value + unit clipped by the
     card's overflow:hidden with no ellipsis — allow the value to wrap ---- */
  .dc-m .val { overflow-wrap: anywhere; }
}