/* ═══════════════════════════════════════════════════════════════════════════════
   CARD TABLES ON PHONES — table.tbl-cards
   ═══════════════════════════════════════════════════════════════════════════════
   At ≤700px every row of a `table.tbl-cards` becomes a card and every cell a
   labelled line (the label comes from the cell's own `data-label`). Below 700px a
   900px-wide table is otherwise a sideways scroller with the Status column and
   everything right of it off-screen until the reader swipes.

   This lives in its OWN file, and not in crucible-v2.css where it grew up, because
   two different shells need it and they do not share a base stylesheet:

     · the crucible-v2 shell  (fragments/crucible-shell.html) — firm, portal, ops,
       journey, employee;
     · the legacy CA/expert shell (fragments/cashell.html + crucible.css + app.css)
       — /ca/queue, /ca/everify, /ca/reports, /ca/team, which stayed real tables at
       390px long after every other surface had left that behind.

   Load it AFTER the shell's own stylesheet. Everything here is inside
   `@media (max-width: 700px)`: no rule in this file can reach a desktop.
   Guarded by CardTablePhoneLayoutTest.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- data tables become stacked cards (one record per card) --- */
@media (max-width: 700px) {
  .card:has(> table.tbl-cards) { overflow-x: visible !important; }
  table.tbl-cards { min-width: 0 !important; display: block; }
  table.tbl-cards thead { display: none; }
  table.tbl-cards tbody, table.tbl-cards tr, table.tbl-cards td { display: block; width: auto; }
  table.tbl-cards tbody { padding: 10px 10px 2px; }
  table.tbl-cards tr {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px 11px; margin: 0 0 10px; box-shadow: var(--shadow-sm);
  }
  table.tbl-cards tr:hover { border-color: var(--accent); background: var(--surface); }
  table.tbl-cards td { border: none !important; padding: 4px 0 !important; display: flex; align-items: center; gap: 10px; font-size: 13px !important; }
  table.tbl-cards td::before {
    content: attr(data-label); flex: none; width: 96px;
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4);
  }
  /* the record's name leads the card; its code sits under it as a chip */
  table.tbl-cards td[data-primary]::before { display: none; }
  table.tbl-cards td[data-primary] { padding: 0 0 2px !important; font-size: 15.5px !important; order: -1; }
  table.tbl-cards td[data-primary] > div:first-child { font-size: 15.5px; line-height: 1.3; }
  table.tbl-cards td[data-mcode]::before { display: none; }
  table.tbl-cards td[data-mcode] { padding: 0 0 9px !important; }
  table.tbl-cards tr { display: flex; flex-direction: column; }
}

/* card-table refinements */
@media (max-width: 700px) {
  /* checkbox cell sits inline with the title, not as its own row */
  table.tbl-cards td.td-check { position: absolute; right: 12px; top: 12px; padding: 0 !important; }
  table.tbl-cards tr { position: relative; }
  table.tbl-cards td.td-check::before { display: none; }
  /* report tables have generated columns — stack without labels */
  table.tbl-nolabel td::before { display: none !important; }
  table.tbl-nolabel td { display: block !important; }
  table.tbl-nolabel td:first-child { font-weight: 600; font-size: 14.5px !important; }
  /* right-aligned action cells (toggles, reassign) go left on cards */
  table.tbl-cards td[style*="text-align:right"] { text-align: left !important; }
  table.tbl-cards td[data-label="Reassign all"] > div,
  table.tbl-cards td[data-label="Enabled"] > * { margin-left: 0; }
  /* labels a touch narrower so values get room */
  table.tbl-cards td::before { width: 88px; }
  /* A cell whose content is a block plus anything else (a title over its meta line, a date over
     its sub-line, a chip over its reason) stacks on the desktop — block boxes break the line.
     As a flex ROW those pieces sat side by side: the title squeezed to a word or two a line and
     the meta line ellipsised beside it. As a grid they stack again, one child a row, in a value
     column that starts exactly where every other card value starts (label column + 10px gap);
     the label spans the rows and stays centred. Phone-only: nothing here reaches the desktop. */
  table.tbl-cards td:has(> :is(div, p) ~ *), table.tbl-cards td:has(> * ~ :is(div, p)) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px;
    align-items: center; justify-items: start; align-content: center;
  }
  table.tbl-cards td:has(> :is(div, p) ~ *)::before, table.tbl-cards td:has(> * ~ :is(div, p))::before { grid-column: 1; grid-row: 1 / span 6; }
  table.tbl-cards td:has(> :is(div, p) ~ *) > *, table.tbl-cards td:has(> * ~ :is(div, p)) > * { grid-column: 2; max-width: 100%; }
  table.tbl-cards td[data-primary]:has(> :is(div, p) ~ *), table.tbl-cards td[data-primary]:has(> * ~ :is(div, p)) { grid-template-columns: minmax(0, 1fr); }
  table.tbl-cards td[data-primary]:has(> :is(div, p) ~ *) > *, table.tbl-cards td[data-primary]:has(> * ~ :is(div, p)) > * { grid-column: 1; }
  /* A cell with nothing in it (an Actions cell whose only control this row does not offer — a
     filed return with no document to download) is not drawn as a label over nothing. */
  table.tbl-cards td:empty { display: none; }
  /* An empty-state row is ONE cell spanning the whole table — "No cases yet." It has no column,
     so it gets no label gutter and no centring across a width that no longer exists. (Before the
     list stacked, each /ca page carried its own copy of a sticky-left workaround for the
     horizontal scroller; there is no scroller here, so the workaround is gone with it.) */
  table.tbl-cards td.empty-cell::before { display: none; }
  table.tbl-cards td.empty-cell { text-align: left !important; padding: 14px 2px !important; }
  table.tbl-cards td.empty-cell > span { display: inline-block; }
  /* A cell that is pure furniture between two labelled ones (the handoff arrow) is not a row. */
  table.tbl-cards td.ca-arrow { display: none; }
}

@media (max-width: 700px) {
  /* card-stacked tables need no min-width and no scrolling */
  .card:has(> table.tbl-cards) { overflow-x: visible !important; }
  table.tbl-cards { min-width: 0 !important; }
}

/* Phones: a card list hides its header row (thead is display:none at ≤700px), and with it every
   sort button — so no list could be sorted on a phone. A SORTABLE card list keeps its header as a
   strip of those same buttons above the cards: same keys, same URL, same aria-sort, nothing new.
   Columns that do not sort (Actions, checkboxes) stay hidden. */
@media (max-width: 700px) {
  table.tbl-cards[data-sortable] thead { display: block; padding: 10px 10px 0; }
  /* the header row is not a card: undo the card-row styling (column flex, border, padding, shadow) */
  table.tbl-cards[data-sortable] thead tr,
  table.tbl-cards[data-sortable] thead tr:hover {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px;
    border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0 4px; margin: 0;
  }
  table.tbl-cards[data-sortable] thead tr::before {
    content: 'Sort'; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-4); margin-right: 2px;
  }
  table.tbl-cards[data-sortable] thead th { display: none; }
  table.tbl-cards[data-sortable] thead th[data-sort-key] {
    display: block; padding: 0 !important; border: 0; width: auto !important;
  }
  table.tbl-cards[data-sortable] thead th .sort-btn {
    height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); font-size: 11px; white-space: nowrap;
  }
  table.tbl-cards[data-sortable] thead th .sort-btn.on { border-color: var(--accent); }
}