@layer layout {
  /* Table-specific color variables */
  :root {
    --table-header-bg: color-mix(in oklch, var(--color-border) 50%, var(--color-canvas));
    --table-row-hover: color-mix(in oklch, var(--color-primary) 5%, var(--color-canvas));
    --table-row-stripe: color-mix(in oklch, var(--color-border) 5%, var(--color-canvas));
  }

  /* Base table */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-normal);
    color: var(--color-ink);
  }

  .table th,
  .table td {
    padding: var(--block-space-half) var(--inline-space);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-light);
  }

  .table th {
    font-weight: 600;
    color: var(--color-ink-muted);
    background: var(--table-header-bg);
    white-space: nowrap;
  }

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

  /* Hover variant */
  .table--hover tbody tr:hover {
    background: var(--table-row-hover);
  }

  /* Striped variant */
  .table--striped tbody tr:nth-child(even) {
    background: var(--table-row-stripe);
  }

  /* Bordered variant */
  .table--bordered {
    border: 1px solid var(--color-border);
  }

  .table--bordered th,
  .table--bordered td {
    border: 1px solid var(--color-border-light);
  }

  /* Compact variant */
  .table--compact th,
  .table--compact td {
    padding: var(--block-space-half) var(--inline-space-half);
    font-size: var(--text-normal);
  }

  /* Relaxed variant */
  .table--relaxed th,
  .table--relaxed td {
    padding: var(--block-space) var(--inline-space-double);
  }

  /* Alignment utilities */
  .table .text-right {
    text-align: right;
  }

  .table .text-center {
    text-align: center;
  }

  .table .align-middle {
    vertical-align: middle;
  }

  /* Minimal-width columns */
  .table .col-checkbox {
    width: 1%;
    padding-inline: var(--inline-space-half);
    vertical-align: middle;
  }

  .sales-invoice-line-item .line-vat,
  .sales-invoice-line-item .line-total {
    vertical-align: middle;
  }

  .table .col-shrink {
    width: 1%;
    min-width: 8rem;
    white-space: nowrap;
  }


  /* Numeric column */
  .table .col-numeric {
    text-align: right;
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Status row colors */
  .table tr.row--positive {
    background: var(--color-positive-soft);
  }

  .table tr.row--negative {
    background: var(--color-negative-soft);
  }

  .table tr.row--warning {
    background: color-mix(in oklch, var(--color-warning) 12%, var(--color-canvas));
  }

  /* Sticky header */
  .table--sticky-header thead th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
    z-index: 1;
  }

  /* Responsive wrapper */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table--compact {
    font-size: var(--text-normal);
  }

  .table--compact td,
  .table--compact th {
    padding: var(--block-space-half) var(--inline-space-half);
  }

  .table--borderless,
  .table--borderless td,
  .table--borderless th {
      border: none;
  }

  .table--compact tbody tr:nth-child(odd) {
    background: var(--color-border-light);
  }

  .table--compact td {
    padding: var(--block-space-half) var(--inline-space);
  }

  .tfoot--bold {
    font-weight: 600;
  }

  .tfoot--bold td {
    padding-top: var(--block-space);
    border-top: 2px solid var(--color-border);
  }

  .table--details {
    width: 100%;
  }

  .table--details th {
    text-align: left;
    font-weight: normal;
    color: var(--color-ink-muted);
    width: 10%;
  }

  .table--details td {
    text-align: left;
  }

  .table--details th,
  .table--details td {
    padding: var(--block-space-half) 0;
    vertical-align: top;
  }

  .table__row--clickable {
    cursor: pointer;
  }

  .table__row--clickable:hover {
    background: var(--color-primary-soft);
  }
}