/* AITradePro V72.1 Mobile Compatibility Patch
   Isolated file — does NOT modify mobile-app.css or mobile-trading.css (Phase 1/2 frozen).
   Fixes only the 5 verified issues from MOBILE_PRODUCTION_REPORT.md. */

/* Objective 1: academy.html — sidebar (.uni-menu inside .uni-wrap) clipped at narrow phone
   widths. Root cause A: .uni-wrap inline grid-template-columns:240px 1fr does not fit narrow
   phones. Root cause B: lesson-content card grids use inline
   grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) which forces a 330px floor per
   column, wider than any phone viewport. Both are overridden only up to 430px (phone range);
   desktop/tablet are completely untouched since neither rule applies above that width. */
@media (max-width: 430px) {
  .uni-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .uni-menu { width: 100% !important; box-sizing: border-box !important; }
  #uni-content [style*="minmax(330px"] { grid-template-columns: 1fr !important; }
}

/* Objective 2: credits.html — transaction table overflowed its .section container.
   mobile-compat-patch.js tags the table's containing .section with this class;
   scroll is contained locally, the page itself never scrolls horizontally. */
.aitp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Objective 3: leaderboard.html
   Part A: .lb-row 4 visible columns (Rank/Trader/Balance/P&L) plus gaps exceeded available
   width at narrow phone widths. Tighten columns/gap only up to 430px; desktop/tablet untouched.
   Part B: #lb-rows renders trader rows as long unbroken text runs (e.g. a username directly
   concatenated with balance/PnL figures with no space), which cannot wrap by default and
   forced page-level overflow independent of the grid fix. overflow-wrap makes long runs
   break instead of pushing the page wider; applied unconditionally since it is harmless at
   any width and only activates when a genuinely unbreakable run is present. */
@media (max-width: 430px) {
  .lb-row { grid-template-columns: 32px minmax(0,1fr) 64px 58px !important; gap: 6px !important; }
}
#lb-rows { overflow-wrap: anywhere; word-break: break-word; }

/* Objective 4: market-detail.html — header (flex, nowrap) overflowed at narrow phone widths.
   Allow the right-side (source/refresh) group to wrap to its own line only when needed. */
@media (max-width: 430px) {
  header { flex-wrap: wrap !important; row-gap: 6px !important; }
}

/* Objective 5: BUY/SELL direction toggle (#dir-buy/#dir-sell) — visual size unchanged,
   invisible pseudo-element enlarges the tappable area only. Values kept small/asymmetric
   to avoid overlapping neighboring price-box/input columns that sit flush against the buttons. */
.dir-btn { position: relative; }
#dir-buy::after, #dir-sell::after {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -8px;
  left: -2px;
  right: -2px;
}