@layer components {
  .hm-c-table {
    overflow-x: auto;
    border: 1px solid var(--hm-color-border);
    border-radius: var(--hm-radius-md);
    background: var(--hm-color-surface);
  }

  .hm-c-table__content {
    width: 100%;
    border-collapse: collapse;
  }

  .hm-c-table__header,
  .hm-c-table__cell {
    padding: var(--hm-space-sm) var(--hm-space-md);
    border-bottom: 1px solid var(--hm-color-border);
    text-align: left;
  }

  .hm-c-table__header {
    color: var(--hm-color-text-muted);
    font-size: var(--hm-font-size-sm);
    font-weight: 600;
  }

  .hm-c-table__row:last-child .hm-c-table__cell {
    border-bottom: none;
  }

  .hm-c-table__row:hover {
    background: var(--hm-color-surface-hover);
  }

  .hm-c-table__cell.hm-m-muted {
    color: var(--hm-color-text-muted);
  }

  .hm-c-table__empty {
    margin: 0;
    padding: var(--hm-space-lg);
    color: var(--hm-color-text-muted);
    text-align: center;
  }
}