/* teamroster.css (RESET + UNIFORM TABLES) */

/* ===== Eligibility badge ===== */
.elig-badge{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  background: #e9ecef;
  color: #333;
  vertical-align: middle;
}

/* Optional color coding by class year */
.elig-FR { background:#e3f2fd; color:#0d47a1; }
.elig-SO { background:#e8f5e9; color:#1b5e20; }
.elig-JR { background:#fff3e0; color:#e65100; }
.elig-SR { background:#fce4ec; color:#880e4f; }
.elig-GR { background:#ede7f6; color:#4527a0; }

/* Strike-through compatibility */
s .elig-badge{
  opacity: .7;
}

/* ===== Grade badges ===== */
.grade-badge{
  display: inline-block;
  min-width: 22px;
  padding: 3px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border-radius: 6px;
  background: #e9ecef;
  color: #222;
}

/* Letter grade colors */
.grade-A\+  { background:#092b0c; color:#fff; }
.grade-A  { background:#1b5e20; color:#fff; }
.grade-A- { background:#2e7d32; color:#fff; }

.grade-B\+  { background:#558b2f; color:#fff; }
.grade-B  { background:#7cb342; color:#fff; }
.grade-B- { background:#9ccc65; color:#1b5e20; }

.grade-C\+  { background:#fff59d; color:#795548; }
.grade-C  { background:#ffe082; color:#6d4c41; }
.grade-C- { background:#ffca28; color:#5d4037; }

.grade-D\+  { background:#ffab91; color:#4e342e; }
.grade-D  { background:#ff8a65; color:#fff; }

.grade-F  { background:#c62828; color:#fff; }

/* Make badges slightly smaller on dense tables */
.tr-table td .grade-badge{
  font-size: 14px;
  padding: 2px 6px;
}

/* Usage percentage chip */
.usage-chip{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  background: rgba(0,0,0,.06);
  color: #444;
  vertical-align: middle;
}

/* Dim low-usage grades automatically */
.usage-chip{
  opacity: .75;
}

.jersey-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:24px;
  margin-right:6px;
  border-radius:4px;
  background:linear-gradient(180deg,#00274D,#0C2340);
  color:#fff;
  font-weight:900;
  font-size:12px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.15);
}

.jersey-badge .num{
  line-height:1;
}


/* Optional: very low usage fades grade too */
.tr-table td .usage-chip + .grade-badge,
.tr-table td .grade-badge + .usage-chip{
  vertical-align: middle;
}

/* ===== Layout wrappers ===== */
.tr-wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

.tr-section{
  margin: 14px 0 22px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;

  /* If the table needs more width, this will scroll cleanly */
  overflow-x: auto;
  overflow-y: hidden;
}

.tr-section-title{
  padding: 10px 12px 10px 18px;
  font-weight: 800;
  color: #f5f6f9;
  letter-spacing: .9px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  /* background: rgba(0,0,0,.03); */
  background: rgba(0, 39, 77, 0.850);
}

/* ===== Table base ===== */
.tr-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;      /* obeys colgroup */
  min-width: 1100px;        /* prevents “crushed” desktop tables */
}

.tr-table th,
.tr-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.25;

  /* default behavior: keep cells compact */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr-table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.tr-table tbody tr:nth-child(even){
  background: rgba(0,0,0,.015);
}

/* ===== Key column overrides ===== */
/* Player: allow wrapping so it uses the width and doesn't look like “dead space” */
.tr-table td.player,
.tr-table th.player{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Long stat “blob” columns should wrap too (so they don't ellipsis instantly) */
.tr-table td.pass,
.tr-table td.rush,
.tr-table td.rec,
.tr-table td.rushing,
.tr-table td.receiving,
.tr-table td.passing,
.tr-table td.dstats,
.tr-table td.pstats,
.tr-table td.punts,
.tr-table td.punting,
.tr-table td.inside,
.tr-table td.fieldGoals,
.tr-table td.xps,
.tr-table td.points{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

/* Make Player links look like “primary text” */
.tr-table td.player a{
  font-weight: 800;
  text-decoration: none;
}
.tr-table td.player a:hover{ text-decoration: underline; }

/* Tighten Yr column spacing */
.tr-table td.yr,
.tr-table th.yr{
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* Tighten HW column */
.tr-table td.hw,
.tr-table th.hw{
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* Rating stands out */
.tr-table td.rating{
  font-weight: 900;
}

/* Origin should stay on one line */
.tr-table td.origin{
  white-space: nowrap;
}
.tr-table td.origin b{
  font-weight: 900;
}

/* Optional: reduce the visual “gap” between Player and Yr */
.tr-table td.player{ padding-right: 6px; }
.tr-table td.yr{ padding-left: 6px; }

/* ===== Mobile Cards ===== */
.tr-card{ display: none; } /* desktop default */

@media (max-width: 800px){
  /* Hide the table and show cards */
  .tr-table{ display:none; }

  .tr-card{
    display:block;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 10px 12px;
  }
  .tr-card:first-child{ border-top: 0; }

  .tr-card-head{
    font-weight: 900;
    margin-bottom: 8px;
  }

  .tr-card-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }

  .tr-kv .k{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .65;
    margin-bottom: 2px;
  }
  .tr-kv .v{
    font-size: 13px;
    font-weight: 700;
  }
}

@media (max-width: 600px){
  .tr-card-grid{ grid-template-columns: 1fr; }
  .tr-wrap{ padding: 8px; }
}

@media (max-width: 400px){
  .tr-card-head{ font-size: 14px; }
  .tr-kv .v{ font-size: 12px; }
}