@layer components {
  /* Table styling */
  .table {
    background-color: var(--color-canvas);
    border-collapse: collapse;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    inline-size: 100%;
    overflow: hidden;
  }

  /* Fixed column widths — opt-in for tables that need consistent columns
     across paginated pages. Headers truncate with ellipsis. */
  .table--fixed {
    table-layout: fixed;
  }

  .table--fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table thead {
    background-color: var(--color-gray-50);
  }

  .table th {
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: start;
    text-transform: uppercase;
  }

  .table td {
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }

  .table tbody tr {
    border-block-start: var(--border);
  }

  .table__row--warning {
    background-color: var(--color-negative-light);
  }

  /* Paired row group: main row + detail row with no border between them */
  .table__row-group + .table__row-detail {
    border-block-start: 0;
  }

  .table .table__row-detail td {
    color: var(--color-ink-medium);
    padding-block-start: 0;
  }

  /* Responsive table - hide columns on mobile */
  @media (max-width: 639px) {
    .table .hide-mobile {
      display: none;
    }

    .table col.hide-mobile {
      visibility: collapse;
    }
  }

  /* Actions cell layout */
  .table__actions {
    display: flex;
    gap: 0.5rem;
  }

  /* Hide on desktop (visible only on mobile) */
  @media (min-width: 640px) {
    .table .hide-desktop {
      display: none;
    }
  }

  /* Chevron link for mobile navigation */
  .table__chevron {
    padding-inline-start: 0;
    text-align: end;

    a {
      align-items: center;
      color: inherit;
      display: inline-flex;
      font-size: var(--text-large);
      justify-content: center;
      line-height: 1;
      min-block-size: 32px;
      min-inline-size: 32px;
      text-decoration: none;
    }

    .icon--chevron-right {
      transition: rotate 150ms ease-out;
    }
  }

  .table__chevron--open .icon--chevron-right {
    rotate: 90deg;
  }

  /* Action cell pushed to the end */
  .table__action-end {
    display: flex;
    justify-content: end;
  }

  /* Compact table variant - reduced padding for dense tables */
  .table--compact th {
    padding: 0.5rem 0.4rem;
  }

  .table--compact td {
    padding: 0.35rem 0.4rem;
  }

  .table--compact .input {
    --input-padding: 0.35em 0.4em;
  }

  .table__cell-numeric {
    padding-inline-end: 1em;
    text-align: end;
  }

  .table td .stepper {
    justify-content: center;
  }

  /* Vertical dividers between columns */
  .table__divider-left {
    border-inline-start: var(--border);
  }

  .table__divider-right {
    border-inline-end: var(--border);
  }

  /* Inline edit row styling */
  .table__row--editing {
    background-color: var(--color-selected);
  }

  .table__row--editing .input--compact {
    block-size: 1.75rem;
    border: var(--border);
    border-radius: 0.25rem;
    font-size: var(--text-small);
    padding: 0.125rem 0.375rem;
  }

  .table__row--editing .input--checkbox {
    cursor: pointer;
  }

  .table__row--editing .contents {
    display: contents;
  }

  /* Empty placeholder row for new-item insertion */
  .table--empty-row td {
    padding: 0;
  }

  /* Matrix table variant - crossbreed grid */
  .table--matrix th,
  .table--matrix td {
    text-align: center;
    padding: 0.35rem 0.5rem;
  }

  .table--matrix__corner {
    text-align: start !important;
    white-space: nowrap;
  }

  .table--matrix thead th {
    color: var(--color-ink);
    font-weight: 600;
  }

  .table--matrix tbody th {
    background-color: var(--color-gray-50);
    color: var(--color-ink);
    font-weight: 600;
    text-align: start;
  }

  .table--matrix__standard {
    color: var(--color-ink-light);
    font-size: var(--text-small);
  }

  .table--matrix__select {
    inline-size: 5rem;
    font-size: var(--text-x-small);
    padding: 0.125rem 0.25rem;
  }

  .table__matrix-heading {
    font-size: var(--text-normal);
    font-weight: 600;
    margin-block: 1.5rem 0.75rem;
  }

  .table__scroll {
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    overflow-x: auto;
  }

  .table__scroll > .table {
    box-shadow: none;
  }

  /* Expandable group header row (location totals) */
  .table__col-chevron {
    cursor: pointer;
    width: 1.5rem;
    padding-inline-end: 0;
  }

  .table__group-header {
    background-color: var(--color-gray-50);
    cursor: pointer;
  }

  .table__group-header td {
    font-weight: 600;
  }

  .table__group-header .icon--chevron-right {
    display: inline-block;
    transition: rotate 150ms ease-out;
  }

  .table__group-header--open .icon--chevron-right {
    rotate: 90deg;
  }

  /* Nested table inside disclosure detail rows */
  .table--nested {
    border: none;
    box-shadow: none;
    margin: 0;
  }

  .table--nested th {
    max-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table--nested .table__row-detail {
    border-block-start: 0;
  }

  .table__col--count {
    text-align: center;
  }

  /* Inline error disclosure inside table cells */
  .table__error {
    display: inline;

    > summary {
      cursor: pointer;
      display: inline;
      list-style: none;
    }

    > .table__error-text {
      color: var(--color-negative);
      font-size: var(--text-small);
      white-space: normal;
    }
  }

  /* Clickable row hover */
  .table tbody tr.cursor-pointer {
    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-ink-lightest);
      }
    }
  }

  /* Tfoot total/subtotal row styling */
  .table tfoot tr {
    border-block-start: var(--border);
    background-color: var(--color-gray-50);
  }
}