/* Tables, and the column widths that line them up. Phones: wide tables scroll
   inside themselves instead of widening the page, with tighter cells. */

@layer base {
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;

    @media (max-width: 640px) { display: block; overflow-x: auto; }
  }
  th, td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;

    @media (max-width: 640px) { padding: 0.5rem 0.5rem; }
  }
  thead th {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 2px solid var(--ink);
  }
  tfoot th {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    font-weight: 800;
  }
  tbody tr:hover { background: #fafafa; }
  .table-scroll { overflow-x: auto; }

  /* Tables of the same kind line up from one business section to the next. */
  .business table {
    table-layout: fixed;

    @media (max-width: 640px) { table-layout: auto; }
  }
  .col-money { width: 9rem; }
  .col-count { width: 8rem; }
  .col-status { width: 8rem; }
  .col-plus { width: 4rem; }
  .col-edit { width: 6rem; }
}