@import "tailwindcss";

/* Index tables become card lists on phones.

   These pages are used walking around a property, so the phone is the primary
   target. A six-column table in a horizontally scrolling container put the
   figures people actually open the app for — the run-out date, the vacation
   balance — off the right edge of the screen where nobody saw them.

   Below md the table collapses: each row becomes a card, each cell stacks with
   its column name printed above it (from data-label), and cells marked
   data-secondary drop out entirely so the card stays scannable. Above md it is
   an ordinary table again. */
@media (max-width: 767px) {
  table.cards-on-mobile,
  table.cards-on-mobile tbody,
  table.cards-on-mobile tr,
  table.cards-on-mobile td {
    display: block;
    width: 100%;
  }

  table.cards-on-mobile thead {
    display: none;
  }

  table.cards-on-mobile tr {
    padding: 0.75rem 1rem 1rem;
  }

  table.cards-on-mobile td {
    padding: 0.375rem 0;
    text-align: left;
  }

  /* The first cell is the row's identity: no label, no extra padding. */
  table.cards-on-mobile td:first-child {
    padding-top: 0;
  }

  table.cards-on-mobile td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-500);
  }

  table.cards-on-mobile td[data-secondary] {
    display: none;
  }

  /* Actions sit on their own line, left-aligned like everything else. */
  table.cards-on-mobile td[data-actions] {
    padding-top: 0.75rem;
    text-align: left;
  }

  table.cards-on-mobile td[data-actions] > div {
    justify-content: flex-start;
  }

  /* An empty-state cell must not inherit the card padding. */
  table.cards-on-mobile td[colspan] {
    padding: 0;
  }
}

/* Comfortable touch targets on coarse pointers, without inflating the
   desktop UI where a mouse is precise. */
@media (pointer: coarse) {
  a[class*="text-sm"],
  button:not([class*="p-"]),
  summary {
    min-height: 44px;
  }

  nav a,
  td a,
  td button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}