.panel {
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--card-bg-strong);
  padding: 18px;
}

#roster-count,
#transaction-window {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: right;
}

.coaches-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.coach-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
  background: var(--inner-card-bg, #0a1015);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.coach-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.roster-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.roster-tab {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.roster-tab span {
  color: currentColor;
  font-weight: 800;
}

#optioned-tab {
  padding-inline: 8px;
  font-size: var(--text-small);
  white-space: nowrap;
}

.roster-tab:hover,
.roster-tab:focus {
  border-color: var(--line-bright);
  color: #fff;
  background: rgba(196, 206, 211, 0.12);
}

.roster-tab.active {
  border-color: var(--control-active-border);
  color: var(--control-active-ink);
  background: var(--control-active-bg);
}

.roster-groups {
  display: grid;
  gap: 18px;
}

.roster-group {
  min-width: 0;
}

.roster-list,
.feed {
  overflow: visible;
}

.feed {
  gap: 10px !important;
}

.roster-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.roster-link {
  min-width: 0;
  min-height: 112px;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: var(--inner-card-bg, #0a1015);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  text-align: left;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  text-decoration: none;
}

.aaa-roster-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 16px;
}

.aaa-roster-link {
  min-width: 0;
  min-height: 74px;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: var(--inner-card-bg, #0a1015);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px 5px 6px;
  text-decoration: none;
}

.aaa-roster-link:hover,
.aaa-roster-link:focus {
  color: var(--ink);
  background: var(--inner-card-bg, #0a1015);
}

.roster-card-headshot.aaa-roster-headshot {
  width: 54px;
  height: 54px;
  align-self: end;
}

.roster-card-headshot.aaa-roster-headshot.is-fallback {
  width: 30px;
  height: 30px;
  align-self: center;
}

.aaa-roster-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1.12;
}

.aaa-roster-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.aaa-roster-name strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aaa-roster-name b {
  flex: 0 0 auto;
  color: #9ac7ff;
  font-size: 0.72rem;
}

.aaa-roster-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aaa-roster-copy .aaa-roster-position {
  color: #dcecff;
}

.roster-link:hover,
.roster-link:focus {
  color: #fff;
  background: var(--inner-card-bg, #0a1015);
}

.roster-card-headshot {
  width: 92px;
  height: 92px;
  align-self: end;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
}

.roster-card-headshot.is-fallback {
  width: 58px;
  height: 58px;
  align-self: center;
  justify-self: center;
}

.roster-card-copy,
.coach-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.roster-card-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.roster-card-name strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-card-name b {
  flex: 0 0 auto;
  color: #9ac7ff;
  font-size: var(--text-small);
}

.roster-card-copy small,
.coach-card-copy small,
.feed small {
  color: var(--muted);
  font-weight: 800;
}

.roster-card-position {
  color: #dcecff !important;
}

.feed article {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-bright);
  border-radius: 6px;
  background: var(--card-bg-strong);
  padding: 10px 12px;
}

.feed article.recalled {
  --transaction-accent: #4db38a;
}

.feed article.optioned {
  --transaction-accent: #f1b434;
}

.feed article.il {
  --transaction-accent: #d85c6a;
}

.feed article.activated {
  --transaction-accent: #58a6ff;
}

.feed article.selected {
  --transaction-accent: #9cc7ff;
}

.feed article.assigned {
  --transaction-accent: #c4ced4;
}

.feed article.acquired {
  --transaction-accent: #b08cff;
}

.feed article.signed {
  --transaction-accent: #7fd1b9;
}

.feed article.released {
  --transaction-accent: #ff9b7c;
}

.feed article.other {
  --transaction-accent: var(--line-bright);
}

.feed article.transaction-card {
  min-height: 86px;
  border: 0;
  border-radius: 6px;
  background: #0a1015 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 8px;
}

.transaction-card .transaction-badge {
  min-height: 0;
  border: 0;
  border-radius: 0;
  color: var(--transaction-accent, var(--yankees-silver));
  background: transparent;
  padding: 0;
  text-transform: none;
}

.transaction-content {
  min-width: 0;
}

.transaction-headshot.roster-card-headshot {
  width: 64px;
  height: 64px;
  align-self: end;
}

.transaction-headshot.roster-card-headshot.is-fallback {
  width: 42px;
  height: 42px;
  align-self: center;
}

.transaction-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.transaction-badge {
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--transaction-accent, var(--line-bright)) 68%, transparent);
  border-radius: 999px;
  color: #06152e;
  background: var(--transaction-accent, var(--yankees-silver));
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.feed p {
  margin: 4px 0 0;
  color: #e2e7f4;
}

.transaction-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
}

.pagination-summary {
  min-height: 36px;
  border-radius: 999px;
  color: #fff;
  background: #101720;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pagination-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 180px) 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.transaction-pagination .pagination-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 700;
}

.pagination-button:first-child {
  border-radius: 6px 0 0 6px;
}

.pagination-button:last-child {
  border-radius: 0 6px 6px 0;
}

.pagination-button:hover:not(:disabled),
.pagination-button:focus:not(:disabled),
.pagination-button.active {
  border-color: var(--line-bright);
  color: #fff;
  background: rgba(196, 206, 211, 0.14);
}

.pagination-button.active {
  border-color: rgba(196, 206, 211, 0.62);
}

.pagination-button:disabled {
  color: rgba(247, 248, 255, 0.36);
  cursor: not-allowed;
  opacity: 0.62;
}

@media (min-width: 576px) {
  .pagination-controls {
    width: fit-content;
  }
}

.empty,
.error {
  color: var(--muted);
  font-weight: 700;
  padding: 14px;
}

.error {
  color: #ffbec4;
}

@media (max-width: 1199.98px) {
  .roster-list,
  .coaches-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aaa-roster-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .aaa-roster-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .roster-list,
  .coaches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aaa-roster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-body .roster-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px !important;
    border-radius: 10px !important;
    background: #1b222d !important;
    padding: 4px !important;
  }

  .overview-body .roster-tab {
    min-height: 44px;
    border: 0 !important;
    border-radius: 6px !important;
    color: #aebfe5 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-inline: 8px;
    font-size: var(--text-small);
  }

  .overview-body .roster-tab:hover,
  .overview-body .roster-tab:focus {
    border: 0 !important;
    color: #fff !important;
    background: rgba(16, 23, 32, 0.62) !important;
  }

  .overview-body .roster-tab.active,
  .overview-body .roster-tab[aria-selected="true"] {
    border: 0 !important;
    color: #fff !important;
    background: #101720 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 575.98px) {
  .header-actions,
  .status-pill {
    width: 100%;
  }

  .roster-list,
  .coaches-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .aaa-roster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5px;
    row-gap: 12px;
  }

  .coach-card {
    padding: 10px;
  }

  .roster-link,
  .coach-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .roster-card-headshot {
    width: 82px;
    height: 82px;
  }

  .transaction-pagination,
  .pagination-controls {
    width: 100%;
  }

  .pagination-summary {
    min-width: 0;
  }
}