/* Kovac Property Command Center — mobile layout corrections.
 *
 * Companion to redesign.css. Framework-free and source-controlled, because the
 * React source is not in this repository (KOV-01) and CSS is the only layer we
 * can change that survives an eventual frontend rebuild.
 *
 * Measured problem (2026-07-26, at 375x812):
 *   The compiled app renders 11 tables; 5 of them sit directly inside a card
 *   with no scroll container. A 7-column Transactions row is 536px wide and a
 *   6-column Documents row is 560px, so on a 375px screen the TABLE pushes the
 *   PAGE sideways — every other element on the screen shifts with it, which is
 *   what "nothing fits on mobile" actually looks like.
 *
 *   Before: page scrollWidth 543px at a 375px viewport.
 *   After:  page scrollWidth 375px; the table scrolls inside its own box.
 *
 * The KPI figures were the obvious suspect and were NOT the problem: the widest
 * realistic figure ($1,138,316.30 at 1.5rem) measures 152px against 341px of
 * available card width, and the stat grid already collapses to one column below
 * 640px. Left alone deliberately — shrinking type that already fits would make
 * the app harder to read for no reason.
 */

@media (max-width: 860px) {
  /* Any element that directly wraps a table becomes the scroll container, so a
     wide table never widens the page. `:has()` lets this reach tables inside the
     compiled bundle that we cannot add a wrapper element to. */
  main :where(*:has(> table)),
  .rv2-root :where(*:has(> table)),
  .tx2-root :where(*:has(> table)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* keep the scrollbar from cropping the last row's descenders */
    padding-bottom: 2px;
  }

  /* Let the table take its natural width inside that container rather than
     being crushed into 375px, which would wrap every cell to three lines. */
  main :where(*:has(> table)) > table,
  .rv2-root :where(*:has(> table)) > table,
  .tx2-root :where(*:has(> table)) > table {
    min-width: max-content;
  }

  /* Money must never wrap mid-figure — "$1,138,\n316.30" is unreadable and is
     easy to misread as a different number. */
  .kpi-value,
  .stat-value,
  main td:has(> .tabular-nums),
  main .tabular-nums {
    white-space: nowrap;
  }

  /* A last-resort guard: nothing in the app shell may widen the viewport. If a
     future page introduces another wide element, it clips here rather than
     silently shifting the whole layout. */
  body {
    overflow-x: hidden;
  }
}