/**
 * public-theme.css — Phase 6: retheme the six public participant-facing
 * pages (Dashboard, Rosters, Schedule, Standings, Playoffs, Players) onto
 * the design system established in Phases 1–5 (the Draft page is the
 * reference implementation this follows).
 *
 * PRESENTATION ONLY. Every class name below already exists in main.css
 * and is rendered by the existing, unmodified view files
 * (js/views/home.js, roster.js, schedule.js, standings.js, playoffs.js,
 * players.js) — this file only overrides how those classes look. No
 * view file's DOM structure changed except:
 *   - home.js: added a "Live Draft" status section (new markup, still
 *     100% read-only, see the file itself for the small diff)
 *   - playoffs.js: added an optional mobile round quick-jump row
 * Nothing else was touched — same data sources, same LeagueData calls,
 * same routing, same IDs/classes JS depends on.
 *
 * SCOPING: this file is loaded ONLY by index.html. admin.html does not
 * include it, so admin pages that share some of these class names
 * (Teams, Players, cap-bar) are completely unaffected — they keep
 * rendering with main.css/admin.css's original dark theme until their
 * own turn in a later phase. Because of that, rules here are NOT
 * scoped with a wrapper class (unlike admin-draft-theme.css, which had
 * to coexist with admin.html on the same page) — this is the only
 * stylesheet touching these classes on index.html.
 *
 * Loaded after main.css/shell.css/draft-public.css.
 */

/* ─── Generic building blocks used across every public page ────────────── */
.empty-state {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.empty-state h2 { color: var(--nb-text); }
.empty-state p { color: var(--nb-text-muted); }
.coming-soon { color: var(--nb-text-dim); }
.muted { color: var(--nb-text-muted); }
.helper-text { color: var(--nb-text-muted); }

.section-title {
  color: var(--nb-text-muted);
  border-bottom: 1px solid var(--nb-surface-border);
}
.section-header-row { border-bottom: 1px solid var(--nb-surface-border); }
.section-link { color: var(--nb-primary); }

.table-controls .input,
.search-input {
  font-family: var(--font-ui);
  border-radius: var(--nb-r);
  border: 1px solid var(--nb-surface-border);
  background: var(--nb-surface-card);
  color: var(--nb-text);
}
.search-input:focus { outline: none; border-color: var(--nb-primary); }

.table-scroll { border-radius: var(--nb-r-lg); }

/* Status chips (season/game status pills) — same darkened-tint pattern
   used everywhere else in the redesign, not the original dark-bg tints. */
.status-chip { border-radius: 999px; font-weight: 700; }
.status-setup            { background: var(--nb-primary-dim); color: var(--nb-primary); }
.status-draft            { background: var(--nb-gold-dim); color: #7a5a00; }
.status-team_assignment  { background: rgba(155,89,182,0.12); color: #8e44ad; }
.status-regular_season   { background: rgba(52,152,219,0.12); color: #2471a3; }
.status-playoffs         { background: rgba(231,76,60,0.12); color: #c0392b; }
.status-complete         { background: rgba(31,169,113,0.12); color: var(--nb-positive); }

/* Revision — Display Original Pick Color: RED/YELLOW/PINK classification
   badge for the public roster tables — same darkened-tint pill pattern as
   .status-chip above. */
.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: #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; }
.status-scheduled        { background: var(--nb-primary-dim); color: var(--nb-primary); }
.status-bye              { background: var(--nb-surface); color: var(--nb-text-dim); }

/* ─── Dashboard ──────────────────────────────────────────────────────────── */
.league-hero {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.league-hero::before { display: none; } /* drop the old dark-theme glow/photo accent */
.league-hero-eyebrow { color: var(--nb-primary); }
.league-hero-title { color: var(--nb-text); }
.league-hero-meta { color: var(--nb-text-muted); }

.stat-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.stat-num { color: var(--nb-primary); }
.stat-label { color: var(--nb-text-muted); }

.team-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
}
.team-card:hover { border-color: var(--nb-primary); }
.team-owner { color: var(--nb-text); }
.team-nba { color: var(--nb-text-muted); }

.mini-standings-row:nth-child(odd) { background: var(--nb-surface); }
.mini-standings-rank { color: var(--nb-text-dim); }
.mini-standings-rank.top4 { color: #7a5a00; font-weight: 800; } /* corrected — raw --nb-gold at this size/weight repeats the exact contrast mistake fixed on Tier A; using the same darkened treatment instead */
.mini-standings-name { color: var(--nb-text); }
.mini-standings-record { color: var(--nb-text-muted); }

.mini-schedule-row {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r);
}
.matchup-vs-divider { color: var(--nb-text-dim); }

.seasons-list .season-row {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r);
  color: var(--nb-text);
}
.season-row.active { border-color: var(--nb-primary); }

.bracket-champion-banner {
  background: var(--nb-gold-dim);
  color: #7a5a00;
  border: 1px solid var(--nb-gold);
  border-radius: var(--nb-r-lg);
}

/* Live Draft status card (home.js addition) — same visual language as the
   Draft page's own on-the-clock treatment, so the link to Draft feels
   like a continuation of the same page, not a different product. */
.dash-draft-live {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3);
  background: var(--nb-gold-dim);
  border: 1px solid var(--nb-gold);
  border-radius: var(--nb-r-lg);
  padding: var(--nb-space-4);
  margin-bottom: var(--nb-space-5);
  text-decoration: none;
}
.dash-draft-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--nb-gold);
  flex-shrink: 0;
  animation: nb-pulse 1.4s ease-in-out infinite;
}
.dash-draft-live-text { flex: 1; min-width: 0; }
.dash-draft-live-eyebrow { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #7a5a00; }
.dash-draft-live-name { font-size: 1.05rem; font-weight: 800; color: var(--nb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-draft-live-cta { font-size: 0.78rem; font-weight: 700; color: #7a5a00; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ─── Rosters ────────────────────────────────────────────────────────────── */
.all-rosters-title { color: var(--nb-text); }
.all-rosters-cap-note { color: var(--nb-text-muted); }

/* Old Season Roster Viewer */
.all-rosters-season-label { color: var(--nb-text-muted); }
.all-rosters-season-picker {
  border: 1px solid var(--nb-surface-border);
  background: var(--nb-surface-card);
  color: var(--nb-text);
}
.all-rosters-season-picker:focus { outline: none; border-color: var(--nb-primary); }
.all-rosters-old-season-badge {
  background: var(--nb-surface-border);
  color: var(--nb-text-muted);
}

.roster-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.roster-card-name { color: var(--nb-text); }
.roster-card-count { color: var(--nb-text-muted); }
.roster-card-ovr-total { color: var(--nb-primary); }
.roster-card-cap-value, .roster-card-remaining { color: var(--nb-text-muted); }
.roster-card-source { color: var(--nb-text-dim); }
.cap-over-text { color: var(--nb-negative); }

.cap-bar-track { background: var(--nb-surface); border: 1px solid var(--nb-surface-border); }
.cap-bar-fill--ok   { background: var(--nb-positive); }
.cap-bar-fill--warn { background: var(--nb-gold); }
.cap-bar-fill--over { background: var(--nb-negative); }

.roster-table th { color: var(--nb-text-muted); border-bottom: 1px solid var(--nb-surface-border); }
.roster-table td { border-bottom: 1px solid var(--nb-surface-border); color: var(--nb-text); }
.roster-table tbody tr:hover { background: var(--nb-surface); }
.roster-table .ovr { color: var(--nb-primary); }
.empty-roster { color: var(--nb-text-muted); }

/* Fix (Phase 6): drop the least-essential column (Source) on narrow
   phones instead of relying on the mini-table's own horizontal scroll —
   the brief's priority list for Rosters is Team / Participant / Players /
   Position / Overall; Source is secondary and the first thing that can
   go to keep the rest comfortably scannable without scrolling. */
@media (max-width: 480px) {
  .roster-card-table th:last-child,
  .roster-card-table td:last-child { display: none; }
}

/* ─── Hall of Fame ───────────────────────────────────────────────────────── */
.hof-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.hof-card-head { border-bottom: 1px solid var(--nb-surface-border); }
.hof-season { color: var(--nb-text-muted); }
.hof-champion { color: var(--nb-text); }
.hof-champion-badge { background: var(--nb-gold-dim); color: #7a5a00; }
.hof-row { border-bottom: 1px solid var(--nb-surface-border); color: var(--nb-text); }
.hof-row-slot, .hof-row-pos { color: var(--nb-text-muted); }
.hof-row-ovr { color: var(--nb-primary); }
.hof-toggle-btn {
  color: var(--nb-text-muted);
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r);
}
.hof-toggle-btn:hover { color: var(--nb-text); border-color: var(--nb-primary); }

/* ─── Schedule ───────────────────────────────────────────────────────────── */
.round-tabs { border-bottom: 1px solid var(--nb-surface-border); }
.round-tab {
  color: var(--nb-text-muted);
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r);
}
.round-tab:hover { color: var(--nb-text); border-color: var(--nb-primary); }
.round-tab.active { color: var(--nb-primary); background: var(--nb-primary-dim); border-color: var(--nb-primary); }

.matchup-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
}
.matchup-card.is-completed { border-color: var(--nb-surface-border); }
.matchup-card-status.status-complete { background: rgba(31,169,113,0.12); color: var(--nb-positive); }
.matchup-card-streamer { color: var(--nb-text-muted); }
.matchup-side-name { color: var(--nb-text); }
.matchup-side.winner .matchup-side-name { color: var(--nb-primary); }
.matchup-side.winner .matchup-side-score { color: var(--nb-text); }
.matchup-side:not(.winner) .matchup-side-score { color: var(--nb-text-dim); }
.matchup-card.is-bye .matchup-card-body { color: var(--nb-text-dim); }

/* Fix (Phase 6): comfortable ~44px tap target for round tabs, same
   invisible-hit-area technique used on the Draft page's tabs/chips. */
.round-tabs { gap: var(--nb-space-2); flex-wrap: wrap; }
.round-tab { position: relative; padding: 0.6rem 0.9rem; }
.round-tab::before { content: ''; position: absolute; inset: -6px -2px; }

/* ─── Standings ──────────────────────────────────────────────────────────── */
.standings-table-wrap {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
}
.standings-table th { color: var(--nb-text-muted); border-bottom: 1px solid var(--nb-surface-border); }
.standings-table td { border-bottom: 1px solid var(--nb-surface-border); color: var(--nb-text); }
.standings-table tbody tr:hover { background: var(--nb-surface); }
.standings-table .pd-pos { color: var(--nb-positive); }
.standings-table .pd-neg { color: var(--nb-negative); }
.standings-abbr { color: #7a5a00; font-weight: 800; }

.standings-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
}
.standings-card-rank { color: var(--nb-text-dim); }
.standings-card-rank.top4 { color: #7a5a00; }
.standings-card-owner { color: var(--nb-text); }
.standings-card-record { color: var(--nb-text-muted); }
.standings-card-pd.pd-pos { color: var(--nb-positive); }
.standings-card-pd.pd-neg { color: var(--nb-negative); }

.streamer-table th { color: var(--nb-text-muted); border-bottom: 1px solid var(--nb-surface-border); }
.streamer-table td { border-bottom: 1px solid var(--nb-surface-border); color: var(--nb-text); }

/* ─── Playoffs ───────────────────────────────────────────────────────────── */
.bracket-col-header { color: var(--nb-text); }
.bracket-col-sub { color: var(--nb-text-dim); }
.bracket-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r);
  box-shadow: var(--nb-surface-shadow);
}
.bracket-card.active { border-color: var(--nb-gold); }
.bracket-card.decided { border-color: var(--nb-surface-border); }
.bracket-card-row { border-bottom: 1px solid var(--nb-surface-border); }
.bracket-card-row.won { background: var(--nb-primary-dim); }
.bracket-card-row.won .bracket-team-name { color: var(--nb-primary); }
.bracket-seed { color: var(--nb-text-dim); }
.bracket-team-name { color: var(--nb-text); }
.bracket-card-tbd { color: var(--nb-text-dim); }
.bracket-format-tag { color: var(--nb-text-muted); }

/* Fix (Phase 6): the bracket already had a contained horizontal-scroll
   fallback (.bracket-scroll) — kept, since the brief explicitly allows
   it as a valid mobile strategy. Added on top: a round quick-jump row
   (playoffs.js) so a phone user can jump straight to "Current round"
   instead of scrolling through every column to find it — a lighter
   addition than a full alternate round-by-round view. */
.bracket-jump { display: none; gap: var(--nb-space-2); margin-bottom: var(--nb-space-3); flex-wrap: wrap; }
.bracket-jump-btn {
  position: relative;
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  color: var(--nb-text-muted);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.bracket-jump-btn::before { content: ''; position: absolute; inset: -7px; }
.bracket-jump-btn.current { color: var(--nb-primary); border-color: var(--nb-primary); background: var(--nb-primary-dim); }
@media (max-width: 900px) {
  .bracket-jump { display: flex; }
}

/* ─── Players (public pool browser) ─────────────────────────────────────── */
.player-db-title { color: var(--nb-text); }
.player-db-subtitle { color: var(--nb-text-muted); }

.pool-info-card {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-left-width: 3px;
  border-radius: var(--nb-r);
}
.pool-info-card-desc { color: var(--nb-text-muted); }

.pool-tabs { border-bottom: none; }
.pool-tab { background: var(--nb-surface-card); border: 1px solid var(--nb-surface-border); }
.pool-tab.active.pool-tab-green { background: var(--nb-positive); color: #fff; border-color: var(--nb-positive); }
.pool-tab.active.pool-tab-blue { background: var(--nb-primary); color: #fff; border-color: var(--nb-primary); }

/* Same-page component, same visual language as the Draft page — the
   grouped-by-position layout is kept deliberately (see js/views/draft.js
   header comment for why: this is a reference/browse page, where
   comparing all players at one position is more useful than Draft's
   flat "who's pickable right now" list) but every color now comes from
   the same --nb-* tokens Draft uses, so it reads as the same product. */
.pos-table {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
}
.pos-table-green .pos-table-head { background: rgba(31,169,113,0.1); color: var(--nb-positive); border-bottom: 1px solid rgba(31,169,113,0.25); }
.pos-table-blue .pos-table-head { background: var(--nb-primary-dim); color: var(--nb-primary); border-bottom: 1px solid rgba(91,91,240,0.25); }
.pos-table-columns-head { color: var(--nb-text-dim); border-bottom: 1px solid var(--nb-surface-border); }
.pos-table-empty { color: var(--nb-text-dim); }
.pos-table-row { border-bottom: 1px solid var(--nb-surface-border); }
.pos-table-row:hover { background: var(--nb-surface); }
.pos-rank { color: var(--nb-text-dim); }
.pos-name { color: var(--nb-text); }
.pos-ovr { color: var(--nb-text-muted); }
.pos-ovr-elite { color: var(--nb-positive); }
.pos-ovr-good { color: var(--nb-text); }
.pos-drafted-tag { background: var(--nb-surface); color: var(--nb-text-dim); }
.pos-locked-tag { color: #7a5a00; background: var(--nb-gold-dim); }
.pos-table-row.drafted .pos-name, .pos-table-row.drafted .pos-ovr { color: var(--nb-text-dim); }

.drafted-note {
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  color: var(--nb-text-muted);
}
.drafted-note .swatch { background: var(--nb-surface); border: 1px solid var(--nb-surface-border); }

.pool-legend-footer { color: var(--nb-text-muted); }
.pool-legend-footer .legend-dot.green { background: var(--nb-positive); }
.pool-legend-footer .legend-dot.blue { background: var(--nb-primary); }
.pool-legend-footer .legend-dot.white { background: var(--pool-white, #b9bec9); }
.pool-legend-footer .legend-dot.live { background: var(--nb-positive); }

/* teamBadge() abbreviation text — same fix as draft-public.css, applied
   here since these pages use the same shared component. */
.team-identity-abbr { color: var(--nb-text-muted); }

/* ─── Phase 11: public NBA 2K27 Player View (js/views/nba2k27.js) ───────
 * Scoped to `.pub2k27-*` classes (new) plus the `.nba2k-attr-*` /
 * `.nba2k-badge-*` / `.nba2k-category-chip*` / `.nba2k-detail-*` /
 * `.nba2k-avatar*` class names also used by the admin NBA2K detail
 * modal (css/admin-nba2k-theme.css) — safe to reuse those names
 * unmodified here since admin-nba2k-theme.css is never loaded on this
 * page (admin.html only) and vice versa (this file is index.html only),
 * so there is no collision, only two independently-themed renderings of
 * the same design already sharing --nb-* tokens. Reuses .player-db-*
 * (main.css), .pool-info-*/.pool-dot (main.css), .empty-state/
 * .helper-text/.search-input (above in this file), and .pos-ovr(-elite|
 * -good|-role) (main.css) as-is — nothing in this section restyles any
 * of those.
 */

/* Attribute bars + badges + category chip + avatar/header — copied from
   the admin NBA2K detail modal's equivalent rules (same --nb-* tokens,
   so this renders identically) so the public detail view matches the
   admin one's existing attribute/badge design exactly, per the Phase 11
   requirement to reuse rather than reinvent it. */
.nba2k-detail-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--nb-surface-border);
}
.nba2k-avatar {
  position: relative;
  width: 72px; height: 72px;
  flex: none;
  border-radius: var(--nb-r);
  overflow: hidden;
  background: var(--nb-primary-dim);
  display: flex; align-items: center; justify-content: center;
}
.nba2k-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nba2k-avatar-fallback { font-weight: 800; font-size: 1.1rem; color: var(--nb-primary); }
.nba2k-detail-name { font-size: 1.25rem; font-weight: 900; color: var(--nb-text); }
.nba2k-detail-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: center;
  margin: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--nb-text-muted);
}
.nba2k-detail-ovr { font-size: 0.95rem; font-weight: 800; }
.nba2k-detail-physicals {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  font-size: 0.78rem;
  color: var(--nb-text-dim);
}

.nba2k-attr-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.nba2k-attr-section h4 {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nb-primary); margin-bottom: 0.5rem;
}
.nba2k-attr-row { display: grid; grid-template-columns: 108px 1fr 28px; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.78rem; }
.nba2k-attr-label { color: var(--nb-text-muted); }
.nba2k-attr-bar-track { height: 6px; border-radius: 3px; background: var(--nb-surface-border); overflow: hidden; }
.nba2k-attr-bar-fill { height: 100%; border-radius: 3px; }
.nba2k-attr-elite { background: var(--nb-positive); }
.nba2k-attr-good  { background: var(--nb-primary); }
.nba2k-attr-mid   { background: var(--nb-gold); }
.nba2k-attr-low   { background: var(--nb-text-dim); }
.nba2k-attr-value { text-align: right; font-weight: 700; color: var(--nb-text); }

.nba2k-badges-section h4 {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nb-primary); margin-bottom: 0.6rem;
}
.nba2k-badge-group { margin-bottom: 0.75rem; }
.nba2k-badge-tier { font-size: 0.72rem; font-weight: 700; margin-bottom: 0.35rem; }
.nba2k-badge-tier-legendary    { color: #9b3fd6; }
.nba2k-badge-tier-hall-of-fame { color: var(--nb-gold); }
.nba2k-badge-tier-gold         { color: #a8790a; }
.nba2k-badge-tier-silver       { color: #6b7280; }
.nba2k-badge-tier-bronze       { color: #93511f; }
.nba2k-badge-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nba2k-badge-chip { font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--nb-surface-border); color: var(--nb-text); }

.nba2k-category-chip { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.08rem 0.5rem; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.nba2k-category-chip-curr  { background: var(--pool-green-dim); color: var(--pool-green); }
.nba2k-category-chip-class { background: var(--pool-blue-dim); color: var(--pool-blue); }
.nba2k-category-chip-allt  { background: rgba(155,63,214,0.14); color: #9b3fd6; }
.nba2k-category-chip-other { background: var(--nb-surface-border); color: var(--nb-text-muted); }

/* Pool tag — Phase 10's third pool (White), not otherwise covered by
   the existing green/blue-only .pool-info-card/.pool-dot rules above. */
.pub2k27-pool-info-white { border-left-color: var(--pool-white, #b9bec9); }
.pub2k27-pool-info-white .pool-info-card-title { color: var(--pool-white-ink, #6b7280); }
.pub2k27-pool-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 700;
  padding: 0.08rem 0.5rem; border-radius: 999px;
}
.pub2k27-pool-tag-green { background: var(--pool-green-dim); color: var(--pool-green); }
.pub2k27-pool-tag-blue  { background: var(--pool-blue-dim); color: var(--pool-blue); }
.pub2k27-pool-tag-white { background: rgba(107,114,128,0.14); color: #6b7280; }
.pub2k27-pool-tag-unknown { background: var(--nb-surface-border); color: var(--nb-text-muted); }

/* Controls row + card grid (the browsable list) */
.pub2k27-controls .input { flex: 1 1 150px; min-width: 130px; }
.pub2k27-controls .search-input { flex: 2 1 220px; }

.pub2k27-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.pub2k27-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--nb-surface-card);
  border: 1px solid var(--nb-surface-border);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
  padding: 0.85rem;
  cursor: pointer;
}
.pub2k27-card:hover { border-color: var(--nb-primary); }
.pub2k27-card:focus-visible { outline: 2px solid var(--nb-primary); outline-offset: -2px; }
.pub2k27-card-orphan { cursor: default; opacity: 0.7; }
.pub2k27-card-orphan:hover { border-color: var(--nb-surface-border); }
.pub2k27-card-avatar {
  position: relative;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--nb-r);
  overflow: hidden;
  background: var(--nb-primary-dim);
  display: flex; align-items: center; justify-content: center;
}
.pub2k27-card-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub2k27-card-avatar-fallback { font-weight: 800; font-size: 0.85rem; color: var(--nb-primary); }
.pub2k27-card-body { min-width: 0; flex: 1; }
.pub2k27-card-name { font-weight: 800; color: var(--nb-text); margin-bottom: 0.15rem; }
.pub2k27-card-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--nb-text-muted); margin-bottom: 0.4rem; }
.pub2k27-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Detail modal — this page's own overlay/card chrome (admin.html has
   .modal-overlay/.modal-card in admin.css; this page has none yet, so
   these are new, following the same overlay+centered-card shape). */
.pub2k27-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 17, 23, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  z-index: 500;
}
.pub2k27-modal-card {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--nb-surface-card);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-surface-shadow);
  padding: 2.5rem 1.5rem 1.5rem;
}
.pub2k27-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  background: none; border: none;
  font-size: 1.5rem; line-height: 1;
  color: var(--nb-text-muted);
  cursor: pointer;
}
.pub2k27-modal-close:hover { color: var(--nb-text); }

/* ─── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pub2k27-grid { grid-template-columns: 1fr; }
  .nba2k-attr-groups { grid-template-columns: 1fr; }
  .nba2k-attr-row { grid-template-columns: 92px 1fr 24px; }
  .nba2k-detail-header { flex-wrap: wrap; }
  .pub2k27-modal-card { padding: 2.25rem 1rem 1.25rem; max-height: 92vh; }
  .pub2k27-controls .input { flex: 1 1 100%; }
}