@layer components {
  .table-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    overflow: hidden;
  }

  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: left;
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    background: var(--ink-50);
  }
  .data-table td {
    font-size: 14px;
    color: var(--ink-700, var(--ink-800));
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--ink-100);
    vertical-align: middle;
  }
  .data-table tr:hover td { background: var(--ink-50); }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table a { color: var(--ink-800); text-decoration: none; }
  .data-table a:hover { color: var(--forest-700); }
  .td-name { font-weight: 500; color: var(--ink-800); }
  .td-muted { color: var(--ink-400); font-size: 13px; }
  .td-actions { display: flex; gap: var(--s2); justify-content: flex-end; }

  @media (max-width: 768px) {
    .data-table th,
    .data-table td {
      padding: var(--s3);
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .data-table th,
    .data-table td {
      padding: var(--s2) var(--s3);
    }

    .data-table .td-muted {
      font-size: 12px;
    }
  }
}