/* ==========================================================================
 * 船联汇 VesselNexus — B1 Data Table Component
 * ==========================================================================
 * §1. Base Table
 * §2. Striped & Hover Rows
 * §3. Sortable Headers
 * §4. Responsive Wrapper (horizontal scroll)
 * §5. Compact & Dense Variants
 * §6. Fixed Header (scrollable body)
 * §7. Empty State
 * §8. Table Actions Bar (bulk select, search, export)
 *
 * 依赖: vnx-design-tokens.css
 * @package VesselNexus
 * @version 2.2.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. BASE TABLE
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-wrapper {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  overflow: hidden;
}

.vnx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-normal);
}

/* ── Header ── */
.vnx-table thead {
  background: var(--vnx-gray-50);
  border-bottom: 2px solid var(--vnx-border-default);
}

.vnx-table th {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  text-align: left;
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vnx-tracking-wider);
  white-space: nowrap;
  user-select: none;
}

/* ── Body ── */
.vnx-table td {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  color: var(--vnx-text-primary);
  border-bottom: 1px solid var(--vnx-border-light);
  vertical-align: middle;
}

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

/* ── Footer ── */
.vnx-table tfoot {
  background: var(--vnx-gray-50);
  border-top: 2px solid var(--vnx-border-default);
}

.vnx-table tfoot td {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. STRIPED & HOVER ROWS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Striped ── */
.vnx-table--striped tbody tr:nth-child(even) {
  background: var(--vnx-gray-50);
}

/* ── Hover ── */
.vnx-table--hover tbody tr:hover {
  background: var(--vnx-ocean-50);
}

/* ── Selected Row ── */
.vnx-table tbody tr.vnx-table__row--selected {
  background: var(--vnx-ocean-100);
  box-shadow: inset 3px 0 0 var(--vnx-ocean-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. SORTABLE HEADERS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table th.vnx-table__sort {
  cursor: pointer;
  transition: color var(--vnx-duration-fast);
  padding-right: var(--vnx-space-6);
}

.vnx-table th.vnx-table__sort:hover {
  color: var(--vnx-ocean-500);
}

/* Sort arrow indicator */
.vnx-table th.vnx-table__sort::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--vnx-space-1);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
  opacity: 0.3;
}

/* Unsorted: show both arrows stacked */
.vnx-table th.vnx-table__sort::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: -8px; /* overlap with ::after */
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.3;
  transform: translateY(-2px);
}

.vnx-table th.vnx-table__sort::after {
  border-top: 4px solid currentColor;
  border-bottom: none;
  transform: translateY(2px);
}

/* Sort ascending (↑ highlighted) */
.vnx-table th.vnx-table__sort--asc::before {
  opacity: 1;
  color: var(--vnx-ocean-500);
  border-bottom-color: var(--vnx-ocean-500);
}
.vnx-table th.vnx-table__sort--asc::after {
  opacity: 0.3;
}

/* Sort descending (↓ highlighted) */
.vnx-table th.vnx-table__sort--desc::after {
  opacity: 1;
  color: var(--vnx-ocean-500);
  border-top-color: var(--vnx-ocean-500);
}
.vnx-table th.vnx-table__sort--desc::before {
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. RESPONSIVE WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-wrapper--responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vnx-table-wrapper--responsive .vnx-table {
  min-width: 700px; /* ensure horizontal scroll triggers */
}

/* ── Sticky first column (vessel name, ID etc.) ── */
.vnx-table--sticky-col th:first-child,
.vnx-table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}

.vnx-table--sticky-col thead th:first-child {
  background: var(--vnx-gray-50);
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. COMPACT & DENSE VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table--compact th,
.vnx-table--compact td {
  padding: var(--vnx-space-2) var(--vnx-space-3);
  font-size: var(--vnx-text-xs);
}

.vnx-table--dense th,
.vnx-table--dense td {
  padding: var(--vnx-space-2) var(--vnx-space-4);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. FIXED HEADER (scrollable tbody)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-wrapper--fixed-header {
  max-height: 480px;
  overflow-y: auto;
}

.vnx-table-wrapper--fixed-header thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.vnx-table-wrapper--fixed-header thead th {
  background: var(--vnx-gray-50);
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-empty {
  text-align: center;
  padding: var(--vnx-space-12) var(--vnx-space-6);
}

.vnx-table-empty__icon {
  display: block;
  font-size: 3rem;
  margin-bottom: var(--vnx-space-3);
  opacity: 0.3;
}

.vnx-table-empty__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-base);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-1);
}

.vnx-table-empty__description {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §8. TABLE ACTIONS BAR
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vnx-space-4);
  padding: var(--vnx-space-3) var(--vnx-space-5);
  border-bottom: 1px solid var(--vnx-border-light);
  background: var(--vnx-white);
  flex-wrap: wrap;
}

.vnx-table-actions__left {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
}

.vnx-table-actions__right {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
}

/* Bulk select count */
.vnx-table-actions__count {
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-secondary);
}

/* Search input in table toolbar */
.vnx-table-search {
  height: 36px;
  padding: 0 var(--vnx-space-3);
  border: 1.5px solid var(--vnx-border-default);
  border-radius: var(--vnx-radius-md);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-primary);
  background: var(--vnx-white);
  width: 220px;
  transition: border-color var(--vnx-duration-fast), box-shadow var(--vnx-duration-fast);
}

.vnx-table-search:focus {
  outline: none;
  border-color: var(--vnx-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 123, 196, 0.15);
}

/* ── Cell alignment helpers ── */
.vnx-table--center th,
.vnx-table--center td { text-align: center; }

.vnx-table td.vnx-table__cell--right { text-align: right; }
.vnx-table td.vnx-table__cell--center { text-align: center; }
.vnx-table td.vnx-table__cell--nowrap { white-space: nowrap; }

/* ── Cell content variants ── */
.vnx-table__cell-highlight {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-ocean-600);
}

.vnx-table__cell-muted {
  color: var(--vnx-text-tertiary);
}

/* Price cell */
.vnx-table__price {
  font-family: var(--vnx-font-family-mono);
  font-weight: var(--vnx-font-semibold);
  white-space: nowrap;
}

/* Status dot */
.vnx-table__status {
  display: inline-flex;
  align-items: center;
  gap: var(--vnx-space-1);
}
.vnx-table__status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vnx-table__status--active::before  { background: var(--vnx-color-success); }
.vnx-table__status--pending::before { background: var(--vnx-color-warning); }
.vnx-table__status--inactive::before { background: var(--vnx-gray-400); }
.vnx-table__status--alert::before   { background: var(--vnx-color-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   §9. TABLE PAGINATION BAR (integrated below table)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vnx-space-3) var(--vnx-space-5);
  border-top: 1px solid var(--vnx-border-light);
  background: var(--vnx-gray-50);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
}

@media (max-width: 639px) {
  .vnx-table-actions {
    flex-direction: column;
    gap: var(--vnx-space-2);
  }

  .vnx-table-search {
    width: 100%;
  }

  .vnx-table-footer {
    flex-direction: column;
    gap: var(--vnx-space-2);
    text-align: center;
  }
}