/* Roster layout on top of the shared theme. */

.roster-section > h2,
.roster-section > p.section-sub,
.roster-section > .empty-state {
  max-width: 64rem;
}

.account-block + .account-block {
  margin-top: 2.75rem;
}

.table-scroll {
  max-width: 64rem;
  margin: 0 auto;
  overflow-x: auto;
}

.roster-table {
  max-width: none;
  width: 100%;
  min-width: 36rem;
  margin-left: 0;
  margin-right: 0;
}

.roster-table th:nth-child(1) { width: 26%; }
.roster-table th:nth-child(2) { width: 22%; }
.roster-table th:nth-child(3) { width: 22%; }
.roster-table th:nth-child(4) { width: 30%; }

.roster-table td {
  vertical-align: middle;
}

.level-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.level-stepper form {
  display: inline-flex;
  margin: 0;
}

.level-value {
  display: inline-block;
  min-width: 2.25rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--anima-gold);
  letter-spacing: 0.04em;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  filter: none;
}

.form-stack select,
.form-stack input[type="number"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #1a1a1a;
  background: #0a0a0a;
  color: var(--text-main);
}

html[data-theme="light"] .form-stack select,
html[data-theme="light"] .form-stack input[type="number"] {
  border-color: var(--bi-line);
  background: var(--bi-surface);
  color: var(--text-main);
}

.form-stack select:focus,
.form-stack input[type="number"]:focus {
  outline: 1px solid var(--anima-gold);
  outline-offset: 0;
}

.account-count {
  font-variant-numeric: tabular-nums;
}

.form-stack label {
  display: block;
  margin-bottom: 0.35rem;
}