/* NFL Dashboard Dark Theme CSS */
:root {
  --nfl-bg: #000000;
  --nfl-panel: #1c1c1c;
  --nfl-panel-2: #2d2d2d;
  --nfl-text: #f0f0f3;
  --nfl-muted: #a8a8b0;
  --nfl-accent: #e6b800; /* light gold accent */
  --nfl-accent-2: #4ecdc4; /* teal */
  --nfl-border: rgba(255,255,255,0.12);
  --nfl-border-strong: rgba(255,255,255,0.24);
  --nfl-row-hover: rgba(230,184,0,0.12);
  --nfl-sticky-bg: linear-gradient(135deg, rgba(28,28,28,0.96), rgba(45,45,45,0.92));
}

.nfl-table-wrap {
  width: 100% !important;
  overflow: auto !important;
  border-radius: 16px !important;
  background: var(--nfl-panel) !important;
  border: 2px solid var(--nfl-border) !important;
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.4), 
    0 2px 8px rgba(230,184,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
}

.nfl-dashboard-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font: 600 14px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial !important;
  color: var(--nfl-text) !important;
  background: transparent !important;
}

.nfl-dashboard-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: var(--nfl-text);
  background: var(--nfl-sticky-bg);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 2px solid var(--nfl-accent);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(230,184,0,0.2);
}

.nfl-dashboard-table th:first-child {
  border-top-left-radius: 16px;
}
.nfl-dashboard-table th:last-child {
  border-top-right-radius: 16px;
}

.nfl-dashboard-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--nfl-border);
  text-align: center;
  vertical-align: middle;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nfl-dashboard-table tbody tr:nth-child(even) td {
  background: var(--nfl-panel-2);
}

/* Ensure sticky columns always maintain their background */
.nfl-dashboard-table tbody tr:nth-child(even) td.sticky-col {
}
.nfl-dashboard-table tbody tr:nth-child(odd) td.sticky-col {
}

.nfl-dashboard-table tbody tr:hover td {
  background: var(--nfl-row-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230,184,0,0.15);
}

.nfl-dashboard-table td, .nfl-dashboard-table th {
  border-right: 1px solid var(--nfl-border);
}
.nfl-dashboard-table td:last-child, .nfl-dashboard-table th:last-child {
  border-right: none;
}

.nfl-dashboard-table .sticky-col {
  position: sticky;
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  z-index: 6;
  box-shadow: 2px 0 8px rgba(230,184,0,0.08);
}
.nfl-dashboard-table .first-col { left: 0; min-width: 48px; max-width: 64px; }
.nfl-dashboard-table .second-col { left: 64px; min-width: 240px; }

.nfl-dashboard-table .player-cell {
  text-align: left !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.nfl-dashboard-table .player-meta {
  display: inline-flex;
  gap: 10px;
  margin-left: 10px;
  font-weight: 500;
  color: var(--nfl-muted);
  font-size: 12px;
}
.nfl-dashboard-table .pill {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--nfl-accent-2);
  background: linear-gradient(135deg, rgba(78,205,196,0.1), rgba(78,205,196,0.05));
  color: var(--nfl-accent-2);
  font-weight: 600;
  text-shadow: none;
}

.nfl-dashboard-table td.num { 
  text-align: right; 
  font-variant-numeric: tabular-nums; 
  font-weight: 600;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.nfl-dashboard-table td.muted { color: var(--nfl-muted); opacity: 0.8; }

.nfl-dashboard-table .hdr-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 10px;
  border: 2px solid var(--nfl-accent);
  background: linear-gradient(135deg, rgba(230,184,0,0.15), rgba(230,184,0,0.05));
  color: var(--nfl-accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(230,184,0,0.2);
}

.nfl-dashboard-table a { 
  color: var(--nfl-accent-2); 
  text-decoration: none; 
  border-bottom: 2px solid transparent;
  font-weight: 600;
  transition: all 200ms ease;
}
.nfl-dashboard-table a:hover { 
  border-bottom-color: var(--nfl-accent-2);
  color: #5ff0e7;
  text-shadow: 0 0 8px rgba(78,205,196,0.4);
}

.nfl-dashboard-table thead + thead th { 
  padding: 10px 10px; 
  font-size: 11px; 
  opacity: 0.9;
  background: linear-gradient(135deg, rgba(28,28,28,0.9), rgba(45,45,45,0.9));
  border-bottom: 1px solid var(--nfl-border-strong);
}

@media (max-width: 1024px) {
  .nfl-dashboard-table { font-size: 13px; }
  .nfl-dashboard-table .second-col { min-width: 200px; left: 62px; }
  .nfl-dashboard-table .first-col { min-width: 44px; }
  .nfl-dashboard-table thead th { padding: 10px 8px; }
  .nfl-dashboard-table tbody td { padding: 9px 8px; }
}

.nfl-dashboard-table td[style*="background-color"] { 
  color: #ffffff; 
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.nfl-dashboard-table .sticky-col:first-child::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  opacity: 0.3;
}

.nfl-table-wrap {
  animation: tableEntry 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tableEntry {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.salary {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}