/* Mobile reflow for the wide AV data tables (<=680px).
   Stacks each row into a labeled card instead of forcing horizontal scroll.
   Pairs with js/responsive-tables.js, which copies <thead> headers onto each
   body cell as data-label (re-applied after the tools re-render rows). */
@media (max-width: 680px) {
  .table-wrap { overflow: visible !important; }
  .table-wrap > table,
  .table-wrap table { min-width: 0 !important; width: 100% !important; display: block !important; }
  .table-wrap thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody { display: block !important; }
  .table-wrap tbody tr {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    scroll-margin-bottom: 132px !important;
  }
  .table-wrap tbody td,
  .table-wrap tbody th {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 8px 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .table-wrap tbody tr > :last-child { border-bottom: none !important; }
  .table-wrap tbody td::before,
  .table-wrap tbody th::before {
    content: attr(data-label);
    font: 600 10px/1.3 ui-monospace, "JetBrains Mono", monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .table-wrap tbody td:not([data-label])::before,
  .table-wrap tbody th:not([data-label])::before,
  .table-wrap tbody td[data-label=""]::before,
  .table-wrap tbody th[data-label=""]::before { content: none; }
  /* Colspanned cells are empty-state / loading messages — full width, no label. */
  .table-wrap tbody td[colspan],
  .table-wrap tbody th[colspan] { text-align: center !important; }
  .table-wrap tbody td[colspan]::before,
  .table-wrap tbody th[colspan]::before { content: none !important; }
  .table-wrap tbody td > input,
  .table-wrap tbody td > textarea,
  .table-wrap tbody td > select,
  .table-wrap tbody th > input,
  .table-wrap tbody th > textarea,
  .table-wrap tbody th > select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box;
  }
  .table-wrap tbody td > textarea,
  .table-wrap tbody th > textarea { min-height: 64px !important; }
}