/* ─── Table Component — Soft Neumorphism ─── */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--nm-flat); /* Nhúng nguyên khối container bảng */
  padding: 8px; /* Tạo khoảng trống để thấy hiệu ứng nhúng */
}

/* Scrollbar mỏng trên desktop */
.table-wrap::-webkit-scrollbar {
  height: 4px;
}
.table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 2px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 2px;
}

.plx-table {
  width: 100%;
  border-collapse: separate; /* Chuyển sang separate để bo góc dòng nếu cần */
  border-spacing: 0;
  font-size: .875rem;
  background: var(--surface);
  min-width: 600px;
}

.plx-table thead tr {
  background: var(--surface-2);
  box-shadow: inset 0 -2px 0 rgba(var(--primary-rgb), 0.1);
}

.plx-table th {
  padding: 14px 12px;
  text-align: left;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}

.plx-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.03); /* Đường kẻ cực mờ */
  vertical-align: middle;
  color: var(--text-main);
  transition: background var(--anim);
}

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

.plx-table tbody tr:hover td {
  background: rgba(var(--primary-rgb), .02);
}

/* Locked row state — Soft UI tint */
.row--locked {
  background: rgba(var(--accent-rgb), .03) !important;
  border-left: 4px solid var(--accent);
}

/* Dark mode adjustment for row borders */
body.dark .plx-table td {
  border-bottom-color: rgba(255,255,255,0.03);
}

.cell-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

/* Selection badge — approval table */
.selection-badge {
  display: inline-block;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
}