.table-container { overflow-x: auto; }
.data-table,
.table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td,
.table th, .table td {
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid var(--border-subtle, #e8e0d4);
  font-size: 14px;
}
[dir="ltr"] .data-table th, [dir="ltr"] .data-table td,
[dir="ltr"] .table th, [dir="ltr"] .table td { text-align: left; }
.data-table th,
.table th {
  background: var(--cream, #F4EDE1);
  font-weight: 600;
  font-size: 13px;
  color: var(--warm-gray, #8B7355);
  white-space: nowrap;
}
.data-table th.sortable,
.table th.sortable { cursor: pointer; user-select: none; transition: background 0.2s; }
.data-table th.sortable:hover,
.table th.sortable:hover { background: var(--cream-dark, #e8e0d4); }
.data-table .sort-icon,
.table .sort-icon { font-size: 10px; margin-inline-start: 4px; opacity: 0.5; }
.data-table .sort-icon.active,
.table .sort-icon.active { opacity: 1; color: var(--copper, #CD9668); }
.data-table tbody tr,
.table tbody tr {
  transition: background 0.15s ease-out;
}
.data-table tbody tr:hover,
.table tbody tr:hover { background: var(--copper-glow, rgba(205, 150, 104, 0.08)); }

@media (max-width: 768px) {
  .data-table thead,
  .table thead { display: none; }
  .data-table tbody tr,
  .table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle, #e8e0d4);
    border-radius: var(--radius-md, 10px);
    padding: 14px;
    background: var(--ivory, #FDFBF7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .data-table td,
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(232, 224, 212, 0.4);
  }
  .data-table td:last-child,
  .table td:last-child { border-bottom: none; }
  .data-table td::before,
  .table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--warm-muted, #a09080);
    flex-shrink: 0;
    min-width: 70px;
  }
}