/* Cards on phones (Oct 16, 2026; James chose "option 1 — cards"; replaces the slim-table version live at 6:19 PM).
   Each table row becomes a card: the first cell (salesperson, vehicle, vendor, date) is the card's title across the
   top, then every other cell sits in a three-column grid with its column header as a small label above it, so no
   number is behind a sideways scroll. Labels come from phone-cards.js (data-label); app.js is untouched.
   Only at 640px and below; computers and tablets keep the tables. Not touched on purpose: .comm-deal-table (its own
   card layout at 680px and below), .claude-usage-table (its Everyone totals sit in a tfoot) and .rp-table (Home and
   Corridor rank lists already fit).
   :not(#phone-cards) only raises the cell rules above styles.css's sticky first-column rule (.table-wrap .data-table
   :is(th, td):first-child, 820px and below), whose divider shadow and sticky position would otherwise stay. */
@media (max-width: 640px) {
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table),
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody {
    display: block;
    width: 100%;
  }

  /* Card tables never keep a computer-width minimum (Corridor competitors set min-width: 760px). */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) {
    min-width: 0;
  }

  /* Headers stay for screen readers; on screen each value carries its own label. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody {
    padding: 4px 12px 12px;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr {
    display: grid;
    /* Up to three columns; a narrow card (the Sales Team detail float at 375px) drops to two so no label splits. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr));
    gap: 10px 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-hairline);
    border-radius: 14px;
    background: var(--color-surface-1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Nothing inside a card may be wider than the card (Corridor's "dealer · VIN" line is nowrap on a computer). Lines
     wrap between words; a word breaks only when it alone is wider than the card. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr :is(td, th) * {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* VINs stay on one line (17 characters fit across a phone): a cell holding one takes the card's full width. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th):is(:has(.vin), .corridor-mono) {
    grid-column: 1 / -1;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr :is(.vin, .corridor-mono) {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th) {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: var(--font-size-body);
  }

  /* The card's title: the first cell across the full width. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th):first-child {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-hairline);
    font-weight: var(--font-weight-medium);
  }

  /* A value's label above it (the column header, copied by phone-cards.js). */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th)[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    /* A label wraps between words only ("Appointmen/ts" was split mid-word). */
    overflow-wrap: normal;
    word-break: keep-all;
    color: var(--color-ink-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  /* Unlabelled cells (action buttons, row-wide notes, empty states) take the full width. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th):not([data-label]):not(:first-child),
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr td[colspan] {
    grid-column: 1 / -1;
  }

  /* An empty state ("No team members match this view.") is a plain note: no title divider under it. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr td[colspan]:only-child {
    padding-bottom: 0;
    border-bottom: 0;
    font-weight: inherit;
    color: var(--color-ink-2);
  }

  /* Advertising: each lead source sits indented under its vendor's card, with a lighter border. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr.source-detail-row {
    margin-left: 16px;
    width: calc(100% - 16px);
    border-style: dashed;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr.source-detail-row :is(td, th):first-child {
    font-weight: var(--font-weight-regular);
    color: var(--color-ink-2);
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th):empty {
    display: none;
  }

  /* A cell with a status badge ("3d overdue · $1,250.00") takes the card's full width, so the badge stays one pill
     and its amount never splits. */
  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table):not(#phone-cards) tbody tr :is(td, th):has(.badge):not(:first-child) {
    grid-column: 1 / -1;
  }

  :is(.data-table, .activity-history-table):not(.comm-deal-table):not(.claude-usage-table) tbody tr :is(td, th) .badge {
    max-width: 100%;
    overflow-wrap: normal;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
  }

  /* Inventory keeps hiding Cost on narrow screens (styles.css, 820px and below). */
  .inventory-management-table:not(#phone-cards) tbody tr td:nth-child(5) {
    display: none;
  }

  /* The salesperson title keeps the avatar and coaching note; the rank number moves out of the way. */
  .data-table .rep-cell {
    min-width: 0;
  }

  .data-table .rep-cell .rank-number {
    display: none;
  }
}