/* ==========================================================
   WHALE OS Table System - Relate Style
   ========================================================== */

:root {
  --table-row-height: 44px;
  --table-header-height: 38px;
  --table-cell-padding: 8px 14px;
  --table-header-bg: #f8fafc;
  --table-row-hover: #f1f5f9;
  --table-border-color: var(--stone-divider, #e2e8f0);
}

/* Wrapper */
.table-wrap,
.table-container {
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid var(--table-border-color);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-relate-card);
  position: relative;
}

/* Table */
.table,
table.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--midnight-ink, #020520);
  font-size: var(--fs-body, 13px);
  text-align: start;
}

.table thead,
table.data-table thead {
  background: var(--table-header-bg);
}

.table thead th,
table.data-table thead th {
  height: var(--table-header-height);
  padding: var(--table-cell-padding);
  text-align: start;
  color: var(--ash-helper, #6b7280);
  font-size: var(--fs-caption, 11.5px);
  font-weight: var(--fw-semibold, 600);
  border-bottom: 1px solid var(--table-border-color);
  white-space: nowrap;
  letter-spacing: 0.01em;
  user-select: none;
}

.table tbody td,
table.data-table tbody td {
  min-height: var(--table-row-height);
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--table-border-color);
  vertical-align: middle;
  color: var(--graphite-body, #14141e);
  font-variant-numeric: tabular-nums;
}

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

.table tbody tr,
table.data-table tbody tr {
  transition: background-color 0.15s ease;
}

.table tbody tr:hover,
table.data-table tbody tr:hover {
  background-color: var(--table-row-hover);
}

/* Zebra */
.table-zebra tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

/* Compact Mode */
.table-compact thead th,
.table-compact tbody td {
  padding: 6px 10px;
  font-size: 12px;
}

/* Sticky Header */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-header-bg);
}

/* Selection / Row Highlight */
.table-selectable tbody tr {
  cursor: pointer;
}

.table-selectable tbody tr:hover {
  background-color: var(--lavender-wash, #f0f4fe);
}

[dir="rtl"] .table-selectable tbody tr.is-selected {
  box-shadow: inset -3px 0 0 var(--primary, #145aff);
  background-color: var(--lavender-wash, #f0f4fe);
}

[dir="ltr"] .table-selectable tbody tr.is-selected {
  box-shadow: inset 3px 0 0 var(--primary, #145aff);
  background-color: var(--lavender-wash, #f0f4fe);
}

/* Status Indicators in Cells */
.cell-success { color: var(--mint-win, #16ca2e); font-weight: 500; }
.cell-warning { color: var(--amber-pending, #ffa64d); font-weight: 500; }
.cell-danger  { color: var(--coral-lost, #f26052); font-weight: 500; }
.cell-info    { color: var(--primary, #145aff); font-weight: 500; }

/* Numeric alignment */
.table .text-num,
table.data-table .text-num {
  text-align: end;
  font-family: var(--font-metrics, Inter, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* Empty State in Table */
.table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ash-helper, #6b7280);
  font-size: 13px;
}