/* 
  Table Component Styles
  Defines consistent table styling across the application
*/

/* Dark theme table styles */
table th,
.table th,
table thead th,
.table thead th {
  padding: var(--space-3) var(--space-4);
  color: var(--clr-light-a30);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  font-size: var(--text-xs);
  background-color: var(--clr-surface-a90);
  border-bottom: 1px solid var(--clr-surface-a70);
}

table td,
.table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--clr-surface-a30);
  vertical-align: middle;
}

/* Team logos and images in tables */
td .flex img,
.team-logo,
table img,
.table img {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  flex-shrink: 0;
  object-fit: cover;
}

/* Prop bet stats table */
.prop-bet-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.prop-bet-stats-table th {
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a30);
  font-weight: var(--font-medium);
  text-align: left;
  padding: var(--space-2) var(--space-3);
}

.prop-bet-stats-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--clr-surface-a10);
}

.prop-bet-stats-table tbody tr:nth-child(odd) {
  background-color: var(--clr-surface-a90);
}

.prop-bet-stats-table tbody tr:nth-child(even) {
  background-color: var(--clr-surface-a80);
}

.prop-bet-stats-table tbody tr:hover {
  background-color: var(--clr-surface-a70);
}

.table {
  width: 100%;
  margin-bottom: var(--space-4);
  color: var(--clr-light-gray-a0);
  vertical-align: top;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-3);
  vertical-align: middle;
  line-height: 1.5;
}

.table th {
  font-weight: var(--font-semibold);
  text-align: start;
  background-color: var(--clr-surface-a10);
  color: var(--clr-dark-a40);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.table thead th {
  font-weight: var(--font-medium);
  color: var(--clr-light-a30);
  text-align: inherit;
  vertical-align: bottom;
  border-bottom: 1px solid var(--clr-surface-a30);
  padding: var(--space-2) var(--space-3);
}

.table thead th {
  padding-bottom: var(--space-4);
}

.table-spacer {
  height: var(--space-4);
  background-color: transparent;
  border: none;
}

.table-spacer td {
  padding: 0;
  border: none;
}

.table tbody tr {
  border-bottom: 1px solid var(--clr-surface-a20);
}

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

/* Table with hover effect */
.table-hover tbody tr:hover {
  background-color: var(--clr-surface-a10);
  color: var(--clr-primary-a20);
}

/* Table with alternating row colors */
.table-striped tbody tr:nth-child(odd) {
  background-color: var(--clr-surface-a10);
}

/* Table with borders */
.table-bordered {
  border: 1px solid var(--clr-surface-a30);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--clr-surface-a30);
}

/* Compact table */
.table-sm th,
.table-sm td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

/* Table with fixed layout */
.table-fixed {
  table-layout: fixed;
}

/* Text alignment utilities for tables */
.table .text-start {
  text-align: start;
}

.table .text-center {
  text-align: center;
}

.table .text-end {
  text-align: end;
}

/* Responsive table */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table with action column */
.table .action-column {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}

/* Table with status column */
.table .status-column {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* Table caption */
.table-caption {
  color: var(--clr-surface-a50);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Empty table state */
.table-empty-state {
  padding: var(--space-8);
  text-align: center;
  color: var(--clr-surface-a50);
  background-color: var(--clr-surface-a5);
  font-style: italic;
}

/* Table with team matchup styling (specific to prop bets) */
.matchup-table th {
  background-color: var(--clr-surface-a10);
}

.matchup-table .team-home {
  text-align: end;
}

.matchup-table .team-away {
  text-align: start;
}

.matchup-table .kickoff-time {
  text-align: center;
  white-space: nowrap;
}

/* Player stats table */
.player-stats-table img.player-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline-end: var(--space-2);
  border: 1px solid var(--clr-surface-a20);
}

.player-stats-table .player-name {
  display: flex;
  align-items: center;
}

.table tfoot {
  background-color: var(--clr-surface-a20);
}