/*
 * Tables on phones.
 *
 * A wide table in a phone screen needs a sideways swipe to reach its right-hand
 * columns -- which is exactly where the action buttons live (Remove, New
 * password, Resend, Cancel). Inside a card with rounded, clipped corners and a
 * backdrop blur, iOS Safari often swallows that swipe, so the buttons were
 * simply unreachable.
 *
 * Below 640px every table is laid out as a stack of cards instead: one card per
 * row, each value on its own line with its column name beside it (the names are
 * copied from the header by mobile-tables.js). Nothing needs scrolling sideways.
 *
 * A table that reads better as a grid even on a phone can opt out with
 * data-keep-table.
 */
@media (max-width: 639px) {
  table:not([data-keep-table]) {
    display: block;
    width: 100%;
  }
  table:not([data-keep-table]) thead {
    display: none;
  }
  table:not([data-keep-table]) tbody,
  table:not([data-keep-table]) tfoot {
    display: block;
  }
  table:not([data-keep-table]) tr {
    display: block;
    margin: 0.75rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
  }
  table:not([data-keep-table]) td,
  table:not([data-keep-table]) th {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.35rem 0.75rem !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word;
  }
  table:not([data-keep-table]) td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  /* A cell with no column name -- the action buttons -- gets the full width,
     laid out as a row of tappable buttons. */
  table:not([data-keep-table]) td[data-label=""]::before,
  table:not([data-keep-table]) td:not([data-label])::before {
    content: none;
  }
  table:not([data-keep-table]) td[data-label=""],
  table:not([data-keep-table]) td:not([data-label]) {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: left !important;
  }
  table:not([data-keep-table]) td form.inline,
  table:not([data-keep-table]) td form {
    display: inline-flex;
  }
  /* The card is the scroll-free layout now; the wrapper no longer needs to
     scroll, and an empty-state row spanning every column still reads fine. */
  .overflow-x-auto:has(> table:not([data-keep-table])) {
    overflow-x: visible;
  }
}