/*
 * Table — the data grid for ledgers, registers, and reports. White
 * surface, hairline row separators, a quiet uppercase header. Drop one
 * inside a `.card.card--flush` for a contained card-table, or use it
 * bare for full-width data. Amount cells use `.numeric`.
 */

@layer components {
  /* Wrap a wide table so it scrolls horizontally instead of being clipped by a
     `.card--flush` (overflow: hidden). Keeps every column reachable on any screen. */
  .table-scroll {
    overflow-x: auto;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .table th {
    text-align: left;
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-body);
    padding: var(--space-2-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    background: var(--color-slate-50);
  }

  .table td {
    padding: var(--space-2-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-heading);
    vertical-align: top;
  }

  .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .table tbody tr {
    transition: background-color var(--duration-base) var(--ease-out);
  }

  /* Hover highlight — for tables whose rows are scannable / clickable. */
  .table--hover tbody tr:hover {
    background: var(--color-bg-hover-quiet);
  }

  /* Denser body text (12px, matching the chart of accounts) for many-column tables like the
     documents library, so every column fits inside the card. */
  .table--compact {
    font-size: var(--text-xs);
  }

  /* Linked rows — the whole row navigates (wrap the cells' content in a
     link, or attach a row click); the cursor signals it. */
  .table--linked tbody tr {
    cursor: pointer;
  }

  /* A subdued cell — secondary metadata next to the primary value. */
  .table__muted {
    color: var(--color-text-body);
  }

  /* Bulk-action on a selectable table (e.g. the bank-transaction list): the action
     button stays hidden until at least one row's checkbox is ticked. Each view
     renders only the one action that fits, so this reveals exactly that button. */
  .bulk-select__action {
    display: none;
  }

  .bulk-select:has(.bulk-select__check:checked) .bulk-select__action {
    display: inline-flex;
  }

  /* A contextual action bar — a card floating at the bottom of the viewport, over the
     page content, shown only while a .bulk-select surface has rows ticked. */
  .bulk-bar {
    display: none;
    align-items: center;
    gap: var(--space-3);

    position: fixed;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: var(--z-nav);

    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
  }

  .bulk-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .bulk-select:has(.bulk-select__check:checked) .bulk-bar {
    display: flex;
  }

  /* Per-row raw-payload expand on the bank-transaction list. Long/unbroken values
     (a bank originalText, a JSON blob) must WRAP — grid items default to
     min-width: auto, which would force the table wider than its `.card--flush`
     (overflow: hidden) parent and clip the chevron out of reach. The chevron
     flips when its row is open so "close" reads clearly. */
  .bank-tx-detail dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bank-tx__toggle svg {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .is-open .bank-tx__toggle svg {
    transform: rotate(180deg);
  }
}