/**
 * HEALIST TABLES - Design 4 Prestige
 * ===================================
 * Table styling for data display
 */

/* ============================================
   DATA TABLES
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--brand-border);
}

.data-table th {
  background: var(--brand-surface-elevated);
  font-weight: var(--font-semibold);
  color: var(--brand-text);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  border-bottom: 2px solid var(--brand-border);
}

.data-table td {
  color: var(--brand-text);
}

.data-table tr:hover td {
  background: var(--brand-surface-elevated);
}

/* Cell alignments */
.data-table .cell-center { text-align: center; }
.data-table .cell-right { text-align: right; }
.data-table .cell-left { text-align: left; }

/* Table container for scroll */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-border);
}

/* Metric tables (device data) */
.metric-table {
  width: 100%;
  max-width: 200px;
  border-collapse: collapse;
}

.metric-table th,
.metric-table td {
  padding: 10px;
  border-bottom: 1px solid var(--brand-border);
}

.metric-table th {
  text-align: left;
  border-bottom: 2px solid var(--brand-border);
}

.metric-table td:last-child {
  text-align: right;
}

/* Empty state for tables */
.table-empty {
  padding: 20px;
  background-color: var(--brand-surface-elevated);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--brand-text-muted);
}