/* ─── Admin-specific styles (extends main.css tokens) ───────────────────────── */

/* ─── Admin Shell ────────────────────────────────────────────────────────────── */
.admin-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}

.admin-header-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 52px;
  position: relative; /* anchors the mobile nav-menu dropdown below */
}

.admin-logo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.admin-logo span { color: var(--accent); }
.admin-logo em { color: var(--text-muted); font-style: normal; }

/* On desktop this wrapper is transparent to layout (display:contents), so
   .admin-nav and .admin-user behave exactly as if they were direct flex
   children of .admin-header-inner — desktop layout is unchanged. On
   mobile it becomes the collapsible dropdown panel; see the Mobile
   Navigation rules in main.css (.nav-toggle-*) plus the admin-specific
   panel styling in the Responsive section below. */
.admin-header-menu { display: contents; }

.admin-nav {
  display: flex;
  gap: 0.15rem;
  flex: 1;
  flex-wrap: wrap;
}

.admin-nav-link {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-nav-link:hover { color: var(--text); background: var(--bg-hover); }
.admin-nav-link.active { color: var(--accent); background: var(--accent-dim); }

.admin-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.admin-main {
  /* width: 100% — see the long comment on .main-content in main.css: this
     is a flex item of the same kind of column flex shell, and without an
     explicit width, `margin: 0 auto`'s auto side-margins were disabling
     stretch and shrinking this to fit its content instead of filling the
     available space up to max-width. Same fix, same reason. */
  width: 100%;
  /* Fluid cap: dense admin tables benefit from real room on a 1920px+
     monitor, so this grows instead of stopping dead at a fixed number —
     but a % ceiling keeps a small margin instead of full-bleed content
     touching the sidebar edge. Padding is fluid for the same reason
     .main-content's is (see main.css). */
  max-width: min(1900px, 97%);
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.5rem) clamp(1.25rem, 0.5rem + 1.4vw, 2.25rem);
}

/* ─── Login Screen ───────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2.5rem;
  width: 100%;
  max-width: 380px;
}

.login-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.login-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.login-warning {
  background: rgba(241,196,15,0.08);
  border: 1px solid rgba(241,196,15,0.25);
  border-radius: var(--r);
  padding: 0.65rem 0.9rem;
  font-size: 0.75rem;
  color: var(--yellow);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.error-text { color: var(--red); font-size: 0.8rem; margin-top: 0.5rem; min-height: 1.2rem; }

/* ─── Admin Sections ──────────────────────────────────────────────────────────── */
.admin-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-section-header h2 {
  /* Was a flat 1.1rem — too small to read as a page/section title,
     especially against the wider .admin-main container above. */
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
}

.header-actions { display: flex; gap: 0.5rem; }
.header-danger-action { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid var(--border); }

/* ─── Forms ──────────────────────────────────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  transition: border-color 0.15s;
  outline: none;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-dim); }

select.input { cursor: pointer; }

.inline-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.inline-form .input { max-width: 280px; }
.inline-form .input-sm { max-width: 110px; }

.participant-bulk-form {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
}

.participant-bulk-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.participant-bulk-input {
  display: block;
  width: 100%;
  max-width: 520px;
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.card-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card-form h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.helper-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.helper-text code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.8em;
  color: var(--accent);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 0.5rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border-light); background: var(--bg-hover); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(231,76,60,0.3);
}
.btn-danger:hover:not(:disabled) { background: rgba(231,76,60,0.1); border-color: var(--red); }

.btn-sm { font-size: 0.75rem; padding: 0.3rem 0.7rem; }

/* ─── Tables ──────────────────────────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.admin-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--bg-hover); }
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table th.sortable { cursor: pointer; user-select: none; }
.admin-table th.sortable:hover { color: var(--text); }
.admin-table th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
.admin-table th.sort-desc::after { content: ' ↓'; color: var(--accent); }

.row-active td:first-child { border-left: 2px solid var(--accent); }
.action-cell { white-space: nowrap; display: flex; gap: 0.35rem; }

.badge-current {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.5rem;
}

/* ─── Participant List ───────────────────────────────────────────────────────── */
.participant-list { list-style: none; }
.participant-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.participant-row:last-child { border-bottom: none; }
.p-num { font-size: 0.8rem; color: var(--text-muted); width: 1.5rem; text-align: right; }
.p-name { font-weight: 600; flex: 1; }
.p-team { font-size: 0.8rem; color: var(--text-muted); }
.p-actions { margin-left: auto; display: flex; gap: 0.35rem; }
.p-entry-fee { display: flex; align-items: center; gap: 0.5rem; }
.status-paid   { background: #1a2a1a; color: #5ecf5e; }
.status-unpaid { background: #2a2a1a; color: #f0d060; }

/* ─── Player Table ───────────────────────────────────────────────────────────── */
.table-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.search-input { max-width: 320px; }
.player-count { font-size: 0.8rem; color: var(--text-muted); margin-left: auto; }

/* ─── CSV Import ──────────────────────────────────────────────────────────────── */
.csv-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  cursor: default;
}
.csv-drop-zone.dragover { border-color: var(--accent); background: var(--accent-dim); }

.file-label {
  cursor: pointer;
  display: inline-flex;
}
.hidden-input { position: absolute; opacity: 0; width: 0; height: 0; }

#csvPreview { margin-bottom: 1rem; }

.import-summary-list {
  max-height: 220px;
  overflow-y: auto;
  margin: 0.25rem 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.85rem;
}
.import-summary-list li { padding: 0.15rem 0; }

/* ─── Draft Order / DuckRace ─────────────────────────────────────────────────── */
.orders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.order-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.order-card-header h3 { font-size: 0.95rem; font-weight: 700; }

.order-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.order-current {
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--bg-card);
  border-radius: var(--r);
}
.order-current h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; }

.order-list { padding-left: 1.4rem; }
.order-list li { padding: 0.15rem 0; font-size: 0.9rem; }

.order-editor h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; }

/* Drag list */
.drag-list { list-style: none; margin-bottom: 1rem; }

.drag-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 0.35rem;
  cursor: grab;
  user-select: none;
  transition: border-color 0.12s, opacity 0.12s;
}
.drag-item:hover { border-color: var(--border-light); }
.drag-item.dragging { opacity: 0.4; cursor: grabbing; }
.drag-handle { color: var(--text-dim); font-size: 0.9rem; cursor: grab; }
.drag-num { font-size: 0.75rem; color: var(--text-muted); width: 1.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.drag-name { font-weight: 600; font-size: 0.9rem; }

/* Snake preview */
.snake-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.snake-preview h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }

.snake-round { margin-bottom: 1rem; }
.snake-round-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.snake-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.snake-pick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
}
.pick-num { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.pick-name { color: var(--text-muted); }

/* ─── Player Draft (Phase 2 engine; Phase 10.3 redesign below) ────────────────── */
.draft-status-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.status-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.status-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ─── Team Assignment ────────────────────────────────────────────────────────── */
.assignment-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
}

.assignment-queue { }
.assignment-queue h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.75rem; }
.queue-list { display: flex; flex-direction: column; gap: 0.35rem; }

.queue-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.85rem;
}
.queue-row.done { opacity: 0.6; }
.queue-row.next { border-color: var(--accent); background: var(--accent-dim); }
.queue-num { color: var(--text-muted); font-size: 0.75rem; width: 1rem; text-align: right; }
.queue-name { font-weight: 600; flex: 1; }
.queue-assigned { font-size: 0.75rem; color: var(--green); }
.queue-pending { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }

.team-picker h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; }

.nba-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.nba-team-tile {
  padding: 0.65rem 0.75rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
.nba-team-tile.available {
  cursor: pointer;
  background: var(--bg);
}
.nba-team-tile.available:hover { border-color: var(--accent); background: var(--accent-dim); }
.nba-team-tile.taken { opacity: 0.4; cursor: not-allowed; background: var(--bg-card); }

.tile-abbr { display: block; font-weight: 800; font-size: 1rem; color: var(--accent); }
.tile-name { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.2; }
.tile-owner { display: block; font-size: 0.68rem; color: var(--green); margin-top: 0.2rem; }

.assign-panel {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.assign-panel h4 { font-size: 0.9rem; margin-bottom: 0.75rem; }
.assign-panel h4 span { color: var(--accent); }

.success-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(46,204,113,0.08);
  border: 1px solid rgba(46,204,113,0.3);
  border-radius: var(--r-lg);
  color: var(--green);
  font-size: 0.9rem;
}

/* ─── Phase 7: Schedule (admin-only bits — round tabs/matchup rows are in
   main.css, shared with the public schedule view) ─────────────────────────── */
.score-panel {
  margin-top: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.score-panel h4 { font-size: 0.9rem; margin-bottom: 0.9rem; }
.score-entry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ─── Mobile Navigation (admin header) ────────────────────────────────────────
   The admin header carries 10 nav links plus the user/logout block, so it
   needs to collapse to a hamburger well before the public header does (see
   the shared 860px rule in main.css) — otherwise .admin-nav's flex-wrap
   would wrap onto a second line inside the header's fixed 52px height and
   visually overlap the page content below it. This block re-declares the
   toggle behavior at a wider breakpoint, scoped to .admin-header only, so
   it takes over from the shared rule earlier without affecting the public
   site-header. ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .admin-header .nav-toggle-btn { display: flex; }

  .admin-header-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(0,0,0,0.4);
    padding: 0.75rem 1rem 1rem;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
  }
  .nav-toggle-input:checked ~ .admin-header-menu { display: flex; }

  .admin-nav { flex-direction: column; flex-wrap: nowrap; gap: 0.15rem; width: 100%; }
  .admin-nav-link { padding: 0.7rem 0.6rem; text-align: left; }

  .admin-user {
    margin: 0.5rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0.5rem;
  }
  .admin-user #adminUsername { font-size: 0.85rem; }

  .admin-header-inner { gap: 0.75rem; }
  .admin-logo { font-size: 0.64rem; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .orders-grid { grid-template-columns: 1fr; }
  .assignment-layout { grid-template-columns: 1fr; }
  .draft-layout { grid-template-columns: 1fr; }
  .score-entry-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-section { padding: 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ─── Plain .admin-table fallback (mobile) ──────────────────────────────────────
   Pages that give their table a dedicated mobile treatment (Financial's
   card-transform via :has() in admin-financial-theme.css, Rosters'
   column-hiding in admin-pages-theme.css) already win here — those
   selectors are more specific than the plain .admin-table below, so they
   still take over regardless of load order. This is only the fallback for
   the remaining plain .admin-table pages (Seasons, Trades' history table,
   etc.) that had no mobile handling at all: instead of the browser
   squeezing every column to fit a 375px screen (wrapping "2026 Aspakan
   Season" onto 3 lines, truncating the "Participants" header), the table
   keeps its natural column widths and scrolls horizontally within its
   card. No JS/HTML change needed — .admin-section is already the table's
   direct scroll-capable ancestor. */
@media (max-width: 700px) {
  .admin-section { overflow-x: auto; }
  /* width: auto (not a min-width floor — see above), PLUS nowrap cells:
     without nowrap, table auto-layout still wraps the longest cell's text
     to shrink that column instead of growing the table past its scroll
     container. nowrap is what actually forces the browser to give every
     column its full natural width and let the table (now legitimately
     wider than the card) scroll horizontally instead. */
  .admin-table { width: auto; }
  .admin-table th, .admin-table td { white-space: nowrap; }
}

/* ─── Phase 4A: Rosters ──────────────────────────────────────────────────────── */

.roster-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.roster-cap-control,
.roster-init-control {
  /* reuse card-form panel */
}

.roster-grid-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}

.roster-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.roster-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.roster-card--over {
  border-color: rgba(231, 76, 60, 0.5);
}

.roster-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.roster-card-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.roster-card-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Rating cap bar (shared between admin roster and public roster) ── */
.cap-bar-wrap {
  padding: 0.6rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.cap-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 0.35rem;
}

.cap-bar-current {
  font-weight: 700;
  color: var(--text);
}

.cap-bar-cap {
  color: var(--text-muted);
}

.cap-bar-remaining {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.2rem;
}

.cap-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.cap-bar-track--sm {
  height: 4px;
}

.cap-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.cap-bar-fill--ok   { background: var(--green); }
.cap-bar-fill--warn { background: #f0a500; }
.cap-bar-fill--over { background: var(--red, #e74c3c); }

.cap-over-text { color: var(--red, #e74c3c); font-weight: 700; }

.roster-pick-num {
  color: var(--text-muted);
  font-size: 0.8rem;
  width: 24px;
}

/* ── Revision 2: Manual Roster Editor ── */
.roster-manual-actions {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}

.btn-icon-sm {
  background: none;
  border: none;
  color: var(--text-dim, var(--text-muted));
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.btn-icon-sm:hover {
  color: var(--accent);
  background: var(--accent-dim, rgba(52, 152, 219, 0.1));
}

.roster-manual-actions .btn-icon-sm[title="Remove"]:hover {
  color: var(--red, #e74c3c);
  background: rgba(231, 76, 60, 0.1);
}

.roster-manual-editor-controls {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
}

.roster-manual-picker {
  margin: 0 1rem 1rem;
}

.roster-manual-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.roster-row-empty td { opacity: 0.6; font-style: italic; }

.info-banner {
  padding: 0.75rem 1rem;
  border-radius: var(--r-lg);
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.3);
  color: #5dade2;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.warn-banner {
  background: rgba(240, 165, 0, 0.1);
  border-color: rgba(240, 165, 0, 0.3);
  color: #f0a500;
}

@media (max-width: 900px) {
  .roster-controls-row { grid-template-columns: 1fr; }
  .roster-cards { grid-template-columns: 1fr; }
}

/* ─── Phase 10.3: Draft — 2K-style draft console ──────────────────────────────── */

.draft-v2 { display: flex; flex-direction: column; gap: 1rem; }

/* ── Topbar: search + pool tabs + actions ── */
.draft-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.draft-search-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.draft-search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  font-size: 0.85rem; opacity: 0.6; pointer-events: none;
}
.draft-search-input {
  width: 100%;
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.6rem 2.2rem 0.6rem 2.2rem;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-ui);
}
.draft-search-input:focus { outline: none; border-color: var(--accent); }
.draft-search-clear {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-dim); font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: 0.1rem 0.35rem; border-radius: 4px;
}
.draft-search-clear:hover { color: var(--text); background: var(--bg-hover); }

.draft-search-dropdown {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 60;
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.draft-search-dropdown.hidden { display: none; }

.draft-search-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.draft-search-row:last-of-type { border-bottom: none; }
.draft-search-row:hover:not(.disabled) { background: var(--accent-dim); }
.draft-search-row.disabled { cursor: not-allowed; opacity: 0.5; }
.dsr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr-pos { color: var(--text-muted); font-size: 0.75rem; }
.dsr-ovr { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.dsr-status { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); grid-column: 1 / -1; }

.draft-search-empty { padding: 0.85rem; font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.draft-search-footer {
  padding: 0.55rem 0.85rem; font-size: 0.75rem; font-weight: 600;
  color: var(--accent); text-align: center; cursor: pointer; background: var(--bg);
}
.draft-search-footer:hover { background: var(--bg-hover); }

.draft-pool-tabs { flex-shrink: 0; margin-bottom: 0; }
.draft-topbar-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }

/* ── Body: sidebar + main position board ── */
.draft-body {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.draft-sidebar { display: flex; flex-direction: column; gap: 0.9rem; position: sticky; top: 1rem; }

.draft-card {
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.9rem 1rem;
}
.draft-card-label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem;
}
.draft-roster-count { color: var(--text-dim); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* On the Clock */
.draft-otc-card { border-color: var(--accent); }
.otc-team-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.otc-identity { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.otc-participant-name { font-size: 1.15rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otc-team-name { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otc-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* Draft Roster — chronological pick list, NOT grouped by position */
.draft-roster-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 320px; overflow-y: auto; }
.draft-roster-row {
  display: grid; grid-template-columns: 1.1rem 2.2rem 1fr auto;
  align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.4rem; border-radius: 6px; font-size: 0.8rem;
}
.draft-roster-row:nth-child(odd) { background: var(--bg); }
.drr-num { color: var(--text-dim); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.drr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drr-ovr { font-weight: 800; font-variant-numeric: tabular-nums; }

.draft-pos-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
  border-radius: 5px; padding: 0.15rem 0;
  width: 2.2rem; text-align: center;
}
.draft-pos-chip-green { background: var(--pool-green-dim); color: var(--pool-green); }
.draft-pos-chip-blue { background: var(--pool-blue-dim); color: var(--pool-blue); }
/* Joker Pick (live-draft): same pink tint as the existing PINK
   classification badge (.pick-color-pink below) — reused, not a new
   color scheme. */
.draft-pos-chip-joker { background: rgba(255, 105, 180, 0.15); color: #c2185b; }
.draft-joker-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #c2185b;
  margin-right: 0.15rem;
}

/* Position Needs */
.position-need-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.position-need-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.position-need-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.position-need-pill--complete .position-need-dot { background: var(--green, #2ecc71); }
.position-need-pill--needed .position-need-dot { background: #f0a500; }

.draft-needs-legend {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; color: var(--text-muted); margin-top: 0.6rem;
}
.legend-dot-sm { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot-sm.complete { background: var(--green, #2ecc71); }
.legend-dot-sm.needed { background: #f0a500; margin-left: 0.6rem; }

@media (max-width: 700px) {
  .position-need-row { gap: 0.3rem; }
  .position-need-pill { font-size: 0.68rem; padding: 0.18rem 0.42rem; gap: 0.28rem; }
}

/* ── Main: position board (reuses .pos-table-grid etc from shared-utils Players
   component — see main.css) with a draft-specific clickable/selectable state ── */
.draft-main .pos-table-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pos-table-row.selectable { cursor: pointer; }
.pos-table-row.selectable:hover,
.pos-table-row.selectable:focus-visible {
  background: var(--accent-dim);
  box-shadow: inset 2px 0 0 var(--accent);
  outline: none;
}

/* ── Confirmation modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 8, 12, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Manual roster replacement uses the shared modal primitives, mounted at
   document.body so admin layout stacking contexts cannot cover the overlay. */
#manualReplacePlayerOverlay.modal-overlay { z-index: 10000; padding: 1rem; background: rgba(4,7,13,.82); backdrop-filter: blur(7px); }
#manualRosterEntryOverlay.modal-overlay { z-index: 10000; padding: 1rem; background: rgba(4,7,13,.82); backdrop-filter: blur(7px); }
#manualReplacePlayerOverlay .manual-replace-modal { width: min(680px, 100%); max-width: 680px; max-height: min(88dvh, 820px); display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; border-color: var(--border-light); border-radius: 16px; background: var(--bg-card); }
#manualRosterEntryOverlay .manual-roster-entry-modal { width: min(560px, 100%); max-width: 560px; max-height: min(88dvh, 720px); display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; border-color: var(--border-light); border-radius: 16px; background: var(--bg-card); }
.manual-roster-modal-header, .manual-roster-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.manual-roster-modal-header { border-bottom: 1px solid var(--border); }
.manual-roster-modal-header h2 { margin: .15rem 0 0; }
.manual-roster-modal-body { min-width: 0; padding: 1.1rem 1.25rem; overflow-y: auto; overflow-x: hidden; }
.manual-roster-modal-body > .input { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: .7rem 0; }
.manual-roster-modal-footer { justify-content: flex-end; border-top: 1px solid var(--border); }
.manual-roster-candidates { display: flex; min-width: 0; max-height: min(42dvh, 440px); flex-direction: column; gap: .4rem; overflow-x: hidden; overflow-y: auto; }
.manual-roster-candidate { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; color: var(--text); text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); cursor: pointer; }
.manual-roster-candidate:hover, .manual-roster-candidate:focus-visible, .manual-roster-candidate.is-selected { border-color: var(--accent); background: var(--accent-dim); outline: none; }
.manual-candidate-main { display: flex; min-width: 0; flex-direction: column; gap: .2rem; overflow-wrap: anywhere; }
.manual-candidate-main small, .manual-candidate-ovr small { color: var(--text-muted); font-size: .72rem; font-weight: 500; }
.manual-candidate-ovr { flex: 0 0 auto; white-space: nowrap; }
.manual-roster-selected { display: flex; min-width: 0; align-items: center; gap: .75rem; margin-top: .8rem; padding: .75rem; overflow-wrap: anywhere; border: 1px solid var(--accent); border-radius: 8px; }
.manual-roster-selected span { margin-right: auto; color: var(--text-muted); }
.manual-roster-edit-row { cursor: pointer; }
.manual-roster-edit-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.manual-roster-entry-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.manual-roster-entry-facts > div { display: flex; min-width: 0; flex-direction: column; gap: .2rem; padding: .65rem .75rem; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); }
.manual-roster-entry-facts span { color: var(--text-muted); font-size: .72rem; }
.manual-roster-entry-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.manual-transfer-warning { margin: .6rem 0; padding: .8rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-dim); }
.manual-transfer-warning p { margin: .3rem 0 .7rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  #manualReplacePlayerOverlay.modal-overlay { align-items: flex-end; padding: .5rem; }
  #manualRosterEntryOverlay.modal-overlay { align-items: flex-end; padding: .5rem; }
  #manualReplacePlayerOverlay .manual-replace-modal { max-height: 94dvh; border-radius: 16px 16px 8px 8px; }
  #manualRosterEntryOverlay .manual-roster-entry-modal { max-height: 94dvh; border-radius: 16px 16px 8px 8px; }
  .manual-roster-modal-header, .manual-roster-modal-footer { padding: .85rem 1rem; }
  .manual-roster-modal-body { padding: .9rem 1rem; }
  .manual-roster-entry-actions { padding: .85rem 1rem; }
  .manual-roster-candidates { max-height: 40dvh; }
}
.modal-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.modal-player-name { font-size: 1.4rem; font-weight: 900; margin-bottom: 0.3rem; }
.modal-player-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; }
.modal-prompt { font-size: 0.9rem; margin-bottom: 1.25rem; }
.draft-joker-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 600;
  margin-bottom: 0.75rem; cursor: pointer;
}
.draft-joker-position-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.draft-joker-position-row label { font-size: 0.78rem; color: var(--text-muted); }
.draft-joker-position-row select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.5rem; font-size: 0.85rem;
}
.modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ── Hall of Fame admin modal (Phase 6.14) ──────────────────────────────────
   The base .modal-card above caps at 380px, sized for a short confirm
   dialog — too narrow for a 10-row roster editor. Same override pattern
   already used for a taller/wider feature-specific form on top of the
   shared .modal-overlay/.modal-card (see .manual-edit-modal in
   css/admin-nba2k-theme.css): a wider max-width plus max-height +
   overflow-y so the form scrolls internally instead of exceeding the
   viewport, with a mobile full-width override matching the same file's
   convention. No other modal or .modal-card use is affected. */
.hof-admin-modal {
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  padding-top: 2.5rem;
}
@media (max-width: 700px) {
  .hof-admin-modal { max-width: 100%; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .draft-main .pos-table-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 900px) {
  .draft-body { grid-template-columns: 1fr; }
  .draft-sidebar { position: static; }
  .draft-body .draft-main { order: 2; }
  .draft-body .draft-sidebar { order: 1; }
}
@media (max-width: 700px) {
  .draft-topbar { flex-direction: column; align-items: stretch; }
  .draft-topbar-actions { justify-content: stretch; }
  .draft-topbar-actions .btn { flex: 1; }
  /* The position board scrolls horizontally within its own container —
     the page/body itself never overflows (see main.css body{overflow-x:hidden}). */
  .draft-main { overflow-x: auto; }
  .draft-main .pos-table-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); width: max-content; min-width: 100%; }
}

/* ─── Phase 5: Trading / Swap System ──────────────────────────────────────── */

.pot-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.pot-summary-strip > div {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}
.pot-summary-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.pot-summary-value { display: block; font-size: 1.1rem; font-weight: 800; margin-top: 0.15rem; }

.trades-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

.validation-summary {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
}
.validation-summary h4 { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; margin-bottom: 0.6rem; }

.valid-badge, .invalid-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.valid-badge { color: var(--green); background: rgba(46, 204, 113, 0.12); }
.invalid-badge { color: var(--red); background: rgba(231, 76, 60, 0.12); }

.check-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.check-list li { font-size: 0.82rem; }
.check-pass { color: var(--green); }
.check-fail { color: var(--red); }

/* ─── Trades: pot summary strip — 4 columns is too tight on phones ────────── */
@media (max-width: 700px) {
  .pot-summary-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Swap tab: current-player card + position-filtered, pool-grouped,
   OVR-sorted replacement list. UI/presentation only — no swap rule lives
   here; all validation still comes from AdminActions.evaluateSwap. ────── */
.swap-current-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.swap-current-card {
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  min-width: 220px;
}
.swap-current-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.swap-current-ovr { font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.swap-current-name { font-size: 1rem; font-weight: 700; margin-top: 0.1rem; }
.swap-current-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

.swap-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-dim);
  line-height: 1.1;
}
.swap-arrow-icon { font-size: 1.3rem; }
.swap-arrow-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.swap-replacement-panel { margin-top: 0.5rem; }
.swap-replacement-header {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

.swap-pool-section { margin-bottom: 0.9rem; }
.swap-pool-heading {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.25rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.pool-heading-green { color: var(--pool-green); border-bottom-color: var(--pool-green-dim); }
.pool-heading-blue  { color: var(--pool-blue);  border-bottom-color: var(--pool-blue-dim); }
.pool-heading-white { color: var(--pool-white, #d7dae0); border-bottom-color: var(--pool-white-dim, rgba(215,218,224,0.14)); }

.swap-replacement-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 260px;
  overflow-y: auto;
}
.swap-replacement-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr 3rem auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  cursor: pointer;
}
.swap-replacement-row:hover { background: var(--bg-hover); border-color: var(--border-light); }
.swap-replacement-row.is-selected { border-color: var(--accent); background: var(--accent-dim); }
.swap-replacement-ovr { font-weight: 800; text-align: right; }
.swap-replacement-name { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-replacement-pos { font-size: 0.72rem; color: var(--text-muted); text-align: center; }

.swap-empty-state {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  color: var(--text-muted);
}
.swap-empty-title { font-weight: 800; color: var(--text); margin-bottom: 0.2rem; }

@media (max-width: 700px) {
  .swap-replacement-row { grid-template-columns: 2rem 1fr auto; }
  .swap-replacement-pos { display: none; }
}

/* ─── F5: Financial Management ────────────────────────────────────────────── */
.financial-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.financial-summary-strip > div {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}
.recon-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.recon-strip strong { color: var(--text); }
.recon-off { color: #f0d060; }
.recon-off strong { color: #f0d060; }
.recon-ok { color: var(--green); }
.recon-ok strong { color: var(--green); }
.financial-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.financial-detail-grid > div {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

/* ─── Firestore Backup admin view (js/admin/backup.js) ────────────────────── */
.backup-intro { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; max-width: 60ch; }
.backup-muted { color: var(--text-muted); font-size: 0.85rem; }

.backup-result { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
.backup-result-success { background: rgba(52, 209, 124, 0.1); border: 1px solid var(--green); color: var(--text); }
.backup-result-success strong { color: var(--green); display: block; margin-bottom: 0.25rem; }
.backup-result-error { background: rgba(240, 90, 90, 0.1); border: 1px solid var(--red); color: var(--text); }
.backup-result-error strong { color: var(--red); display: block; margin-bottom: 0.25rem; }

/* Revision — Display Original Pick Color: RED/YELLOW/PINK classification
   badge for the roster tables, same darkened-tint pill style used
   elsewhere in this file (see .backup-result-success/.backup-result-error
   above) rather than solid fills. */
.pick-color-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.pick-color-red    { background: rgba(231, 76, 60, 0.12);  color: var(--red, #c0392b); }
.pick-color-yellow { background: rgba(241, 196, 15, 0.15); color: #8a6d00; }
.pick-color-pink   { background: rgba(255, 105, 180, 0.15); color: #c2185b; }

/* NBA 2K27 Position Sorting Mode — fast one-position-at-a-time
   workstation. Minimal, functional styling: large one-click assignment
   buttons and a clear toolbar, matching this file's existing pill/card
   conventions rather than introducing a new visual language. */
.p27sort-toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.p27sort-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.p27sort-filters input,
.p27sort-filters select {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: var(--bg-elevated, #1e1e1e);
  color: var(--text);
}
.p27sort-card {
  border: 1px solid var(--border, #444);
  border-radius: 10px;
  padding: 1.5rem;
  max-width: 480px;
  text-align: center;
}
.p27sort-player-name { font-size: 1.4rem; font-weight: 700; }
.p27sort-player-meta { color: var(--text-muted); margin: 0.25rem 0 1.25rem; }
.p27sort-assign-row {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.p27sort-assign-row .btn {
  min-width: 4.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.9rem 0;
}
.p27sort-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}