/* Consolidated from sharpmodels.com's sharpmodels-table.css (final
   computed state, trimmed of the file's own layered patch history).
   New here: zone-shaded rows and a draw column, which sharpmodels.com's
   W-L-only US sports tables never needed. */

.ssm-scope {
  --sm-table-bg: #ffffff;
  --sm-table-border: #d7e0eb;
  --sm-table-border-strong: #c2cddb;
  --sm-table-text: #13233a;
  --sm-table-text-soft: #67778f;
  --sm-table-head-bg: #e6f6f9;
  --sm-table-hover: #f2fafc;
  /* Matches the real site's own --sm-table-link exactly (sharpmodels-
     unified-v19.css) -- was the cyan brand accent, which reads fine as
     a nav pill color but is too bright/low-contrast for dense table
     link text next to plain black numbers. --sm-link-color below is
     the same navy family used for non-table links (breadcrumbs,
     sidebar, buttons -- NFL's own value there, #163f78). */
  --sm-table-link: #133f78;
  --sm-table-link-hover: #0f315d;
  --sm-link-color: #163f78;
  --sm-link-color-hover: #0f315d;
  --sm-table-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
  --sm-table-radius: 12px;
  --sm-table-pad-x: 14px;
  --sm-table-pad-y: 10px;
}

.ssm-scope .sm-table-wrap { margin: 0 0 22px 0; color: var(--sm-table-text); font-family: var(--sm-font-body); }

.ssm-scope .sm-table-card {
  background: var(--sm-table-bg);
  border: 1px solid var(--sm-table-border);
  border-radius: var(--sm-table-radius);
  box-shadow: var(--sm-table-shadow);
  overflow: hidden;
}

.ssm-scope .sm-table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sm-table-border);
}

.ssm-scope .sm-table-toolbar__title {
  margin: 0;
  font-family: var(--sm-font-heading);
  font-size: 1.4rem;
  color: var(--sm-table-text);
}

.ssm-scope .sm-table-toolbar__meta { margin-top: 4px; color: var(--sm-table-text-soft); font-size: 0.86rem; }

.ssm-scope .sm-table-scroll { width: 100%; overflow-x: auto; }

.ssm-scope .sm-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.ssm-scope .sm-table th, .ssm-scope .sm-table td {
  padding: var(--sm-table-pad-y) var(--sm-table-pad-x);
  border-bottom: 1px solid var(--sm-table-border);
  text-align: left;
  vertical-align: middle;
}

.ssm-scope .sm-table tbody tr:last-child td { border-bottom: 0; }

.ssm-scope .sm-table thead th {
  background: var(--sm-table-head-bg);
  color: #2f5a3f;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  border-bottom: 1px solid var(--sm-table-border-strong);
}

.ssm-scope .sm-table tbody tr:hover td { background: var(--sm-table-hover); }

.ssm-scope .sm-table__cell--num { text-align: right; white-space: nowrap; }
.ssm-scope .sm-table__cell--center { text-align: center; }

.ssm-scope .sm-table__team-link { color: var(--sm-table-link); text-decoration: none; font-weight: 700; }
.ssm-scope .sm-table__team-link:hover { color: var(--sm-table-link-hover); text-decoration: underline; }

/* --- Team-in-cell: jersey icon + name, the soccer equivalent of
   sharpmodels.com's helmet-in-cell component (.sm-standard-team). --- */
.ssm-scope .sm-jersey { display: block; flex: 0 0 auto; }
.ssm-scope .sm-badge { display: block; flex: 0 0 auto; object-fit: contain; }
.ssm-scope .sm-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  font-size: 1.35rem;
  line-height: 1;
}
.ssm-scope .sm-team-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sm-table-link);
  text-decoration: none;
  font-weight: 700;
  max-width: 100%;
  min-width: 0;
}
.ssm-scope .sm-team-cell:hover { color: var(--sm-table-link-hover); }
.ssm-scope .sm-team-cell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssm-scope .sm-team-cell--plain { color: var(--sm-table-text); cursor: default; }
.ssm-scope .sm-team-cell--plain:hover { color: var(--sm-table-text); }

/* --- Standings zone shading: a left-edge colour bar + tinted row, keyed
   off data-zone so the same table markup works for every competition's
   different zone layout (4-tier England pyramid vs single-tier others). --- */
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:first-child { position: relative; }

.ssm-scope .sm-table tr[data-zone] td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}

.ssm-scope .sm-table tr[data-zone="champions-league"] td { background: #e6f7ec; }
.ssm-scope .sm-table tr[data-zone="champions-league"] td:first-child::before { background: var(--sm-color-brand-accent); }

.ssm-scope .sm-table tr[data-zone="europa"] td { background: #eef4ff; }
.ssm-scope .sm-table tr[data-zone="europa"] td:first-child::before { background: #3b82f6; }

/* Conference zone gets cyan (the site's original pre-green accent) rather
   than a second green, since champions-league/automatic-promotion now
   occupy the brand green itself -- keeps all 6 zones visually distinct. */
.ssm-scope .sm-table tr[data-zone="conference"] td { background: #e0f7fa; }
.ssm-scope .sm-table tr[data-zone="conference"] td:first-child::before { background: #0891b2; }

.ssm-scope .sm-table tr[data-zone="automatic-promotion"] td { background: #e6f7ec; }
.ssm-scope .sm-table tr[data-zone="automatic-promotion"] td:first-child::before { background: var(--sm-color-brand-accent); }

.ssm-scope .sm-table tr[data-zone="promotion-playoff"] td { background: #fef6e7; }
.ssm-scope .sm-table tr[data-zone="promotion-playoff"] td:first-child::before { background: #d97706; }

.ssm-scope .sm-table tr[data-zone="relegation"] td { background: #fdeeee; }
.ssm-scope .sm-table tr[data-zone="relegation"] td:first-child::before { background: #dc2626; }

.ssm-scope .sm-table tr[data-zone="relegation-playoff"] td { background: #fdf3ee; }
.ssm-scope .sm-table tr[data-zone="relegation-playoff"] td:first-child::before { background: #ea580c; }

.ssm-scope .sm-table-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--sm-table-border); background: #f7fdf9; font-size: 0.82rem; color: var(--sm-table-text-soft); }
.ssm-scope .sm-table-legend__item { display: flex; align-items: center; gap: 7px; }
.ssm-scope .sm-table-legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

/* column widths for standings (Pos, Team, then P W D L GF GA GD Pts) */
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table th:nth-child(1),
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(1) { width: 46px; }
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table th:nth-child(2),
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(2) { width: 220px; }
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table th:nth-child(n+3),
.ssm-scope .sm-table-wrap[data-sm-layout="standings"] .sm-table td:nth-child(n+3) { width: 54px; text-align: right; }

@media (max-width: 720px) {
  .ssm-scope .sm-table { min-width: 560px; }
}