/* responsive-tables.css — mobile card conversion for user-facing lists.
 *
 * On <=640px, Bootstrap `.table-responsive > .table` and a couple of custom
 * tables (`.ref-table`, `.lt-hist`) collapse into stacked row-cards so the
 * user no longer has to scroll horizontally to see status/amount/date.
 *
 * Excluded on purpose:
 *   - `.data-tbl` (rules.php reference tables — dense specs, scroll wins)
 *   - `.no-stack` (per-table opt-out escape hatch)
 *   - Comparison tables like `.ct` on landing.php (semantic column compare)
 *   - `.ol-t` on store_orders.php (already has its own card layout)
 */

@media (max-width: 640px) {

  /* Kill the horizontal scroll on wrappers that we handle here. */
  .table-responsive:has(> table.table:not(.data-tbl):not(.no-stack)) {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }

  /* Blockify the table itself. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack),
  table.ref-table:not(.no-stack),
  table.lt-hist:not(.no-stack) {
    display: block;
  }

  /* Hide the header row — column labels don't fit a card layout, and every
   * cell we keep is already self-describing (nickname, badge, amount, date). */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) thead,
  table.ref-table:not(.no-stack) thead,
  table.lt-hist:not(.no-stack) thead {
    display: none;
  }

  /* tbody + tr as blocks so each row becomes its own container. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tbody,
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tr,
  table.ref-table:not(.no-stack) tbody,
  table.ref-table:not(.no-stack) tr,
  table.lt-hist:not(.no-stack)  tbody,
  table.lt-hist:not(.no-stack)  tr {
    display: block;
    width: 100%;
  }

  /* The row card. Flex + wrap so 2..5 remaining cells lay out on their own
   * line under the primary cell without pushing off-screen. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tbody > tr,
  table.ref-table:not(.no-stack)  tbody > tr,
  table.lt-hist:not(.no-stack)   tbody > tr {
    padding: 10px 12px;
    border: 1px solid var(--bd, rgba(255,255,255,.12));
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    align-items: baseline;
    background: transparent;
  }

  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tbody > tr:last-child,
  table.ref-table:not(.no-stack)  tbody > tr:last-child,
  table.lt-hist:not(.no-stack)   tbody > tr:last-child {
    margin-bottom: 0;
  }

  /* Cells lose the table-cell padding/border — the tr owns those now. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) td,
  table.ref-table:not(.no-stack) td,
  table.lt-hist:not(.no-stack)  td {
    border: 0 !important;
    padding: 0 !important;
    font-size: .82rem;
    line-height: 1.35;
    white-space: normal;
  }

  /* First cell is the "row title" — full width, bolder, one step larger. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tbody > tr > td:first-child,
  table.ref-table:not(.no-stack)  tbody > tr > td:first-child,
  table.lt-hist:not(.no-stack)   tbody > tr > td:first-child {
    flex: 1 1 100%;
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 2px;
  }

  /* Last cell (usually date or amount) drifts to the right of its line. */
  .table-responsive > table.table:not(.data-tbl):not(.no-stack) tbody > tr > td:last-child:not(:first-child),
  table.ref-table:not(.no-stack)  tbody > tr > td:last-child:not(:first-child),
  table.lt-hist:not(.no-stack)   tbody > tr > td:last-child:not(:first-child) {
    margin-left: auto;
    color: var(--t3, inherit);
  }

  /* Bootstrap nav-tabs (e.g. activity.php's Recent/Logins/Tokens/Downloads)
   * often overflow on narrow screens. Turn the tab strip into a horizontal
   * scroll rail; hide the ugly scrollbar. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* Fallback for browsers without :has() — replay the wrapper-scroll kill in
 * an unconditional block so the layout still fixes up. Safari <15.4 and
 * older Firefox lose the scroll on rules.php wrappers, but the inner
 * `.data-tbl` remains a table so it renders fine (dense but readable). */
@supports not (selector(:has(*))) {
  @media (max-width: 640px) {
    .table-responsive { overflow-x: visible; }
  }
}