/* nba-props-toolbar.css — the NBA workbench's NFL-convention chrome
 * (2026-10 layout pass): the mobile props toolbar (<=1000px), the wide
 * table's market chips + tints, and the build-panel trims.
 *
 * The toolbar is NFL's (css/nfl/nfl-props-toolbar.css) with the same nptb-*
 * markup (js/nba/nba-workbench-section/nbaPropsToolbar.js), kept as NBA's own
 * sheet the way NFL kept its own copy of MLB's: it loads only on NBA pages
 * (templates/index.html), and NFL's calibration can move without touching
 * NBA. Every size below is NFL's, settled for the 980px scaled canvas (the
 * page has NO viewport meta, so a phone shows ~0.4x of these layout px).
 *
 * NBA has three buttons (Games / Markets / Sort): no Line (NBA has no
 * confidence mode) and no Positions (NFL's rule).
 */

/* ── STICKY ENABLERS (NFL's, see nfl-props-toolbar.css) ─────────────────────
   position:sticky fails silently under a scroll container: the root's
   overflow-x:hidden and .glass-panel{overflow:hidden} both are one. `clip`
   suppresses overflow the same way without creating one. Scoped to the
   workbench via the html class the toolbar module sets. */
html.is-nba-wb,
html.is-nba-wb body {
  overflow-x: clip;
}

@media (max-width: 1000px) {
  html.is-nba-wb .glass-panel {
    overflow: clip;
  }
}

/* Body scroll lock while a sheet is open (position:fixed form). */
body.nptb-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* ── Legacy tab row: hidden (shared scaffold markup; nothing wires it) ────── */
@media (max-width: 1000px) {
  .nptb-host .filter-mode-toggle,
  .nptb-host #props-game-filter,
  .nptb-host #props-market-filter,
  .nptb-host #props-position-filter,
  .nptb-host #props-defense-filter,
  .nptb-host #props-hitrate-filter,
  .nptb-host #props-grade-filter,
  .nptb-host #props-rate-filter,
  .nptb-host #props-form-filter {
    display: none !important;
  }
}

/* ── Separator + section heading (non-sticky sibling of the bar) ─────────── */
.nptb-sep { display: none; }

@media (max-width: 1000px) {
  .nptb-sep {
    display: block;
    margin-top: 4px;
    padding-top: 24px;
    /* 2px: a 1px layout border antialiases away at the ~0.44x scale. */
    border-top: 2px solid rgba(255, 255, 255, 0.16);
  }
  .nptb-sep .nptb-title {
    font-size: 24px;
    margin-bottom: 6px;
  }
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.nptb { display: none; }

@media (max-width: 1000px) {
  .nptb {
    display: block;
    position: sticky;
    top: 0;
    z-index: 30;
    /* Bleed the sticky background to the panel edges (12px = the column's
       mobile padding) with margins, not a spread shadow. */
    margin: 0 -12px 14px;
    padding: 14px 12px 12px;
    background: var(--theme-bg-base, #0a0e14);
  }

  .nptb-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nptb-bar::-webkit-scrollbar { display: none; }
  /* Auto side margins keep the row centred while it fits and scrolling
     correctly (nothing hidden off the left edge) once it does not. */
  .nptb-bar > .nptb-btn:first-child { margin-left: auto; }
  .nptb-bar > .nptb-btn:last-child  { margin-right: auto; }

  /* 82px tall is ~36 device px at the canvas scale (NFL's settled value). */
  .nptb-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 17px 27px;
    min-width: 0;
    border-radius: 22px;
    /* The V2 liquid glass of the footer's Link / Save buttons. */
    background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 6px 16px rgba(0,0,0,.55);
    color: rgba(255,255,255,.92);
    font-family: inherit;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  /* A button with a filter applied is teal-tinted glass. */
  .nptb-btn.is-set {
    background: linear-gradient(180deg, rgba(45,212,191,.22) 0%, rgba(45,212,191,.12) 100%);
    border-color: rgba(45,212,191,.7);
    color: #2dd4bf;
  }
  .nptb-caret { font-size: 26px; opacity: 0.7; }

  /* ── Active-selection chips ── */
  .nptb-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
  }
  .nptb-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(2, 210, 167, 0.38);
    background: rgba(2, 210, 167, 0.12);
    color: #7ee0c0;
    font-family: inherit;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  .nptb-chip i { font-size: 23px; opacity: 0.8; }
  .nptb-clear {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 12px 18px;
    border: 0;
    background: none;
    color: #d98c8c;
    font-family: inherit;
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
  }
}

/* ── Bottom sheet ────────────────────────────────────────────────────────── */
/* z-index clears the parlay pill (10050) on the same bottom edge; 2147483645/6
   is the tier the repo's other modals use. */
.nptb-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nptb-sheet-bd {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nptb-sheet-wrap.open .nptb-sheet-bd { opacity: 1; }

.nptb-sheet {
  position: relative;
  z-index: 2147483646;
  width: 100%;
  max-width: none;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #0d1014;
  border-top: 1px solid #202730;
  border-radius: 34px 34px 0 0;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}
.nptb-sheet-wrap.open .nptb-sheet { transform: translateY(0); }

.nptb-sheet-head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px 18px;
}
.nptb-sheet-title {
  margin: 24px 0 0;
  font-size: 34px;
  font-weight: 700;
  color: #e7ebf0;
}
.nptb-sheet-x {
  margin-top: 24px;
  min-width: 56px; min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: 0;
  color: #8b95a1;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

.nptb-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 26px 10px;
}

/* ── Option rows ── */
.nptb-opts { display: flex; flex-direction: column; }
.nptb-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 96px;
  padding: 20px 4px;
  border: 0;
  border-bottom: 1px solid #1a2029;
  background: none;
  color: #cdd5df;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.nptb-opt:last-child { border-bottom: 0; }
.nptb-opt-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nptb-opt-lbl { font-size: 30px; font-weight: 600; }
.nptb-opt-sub { font-size: 23px; color: #7e8894; }
.nptb-opt.on .nptb-opt-lbl { color: #7ee0c0; }

.nptb-tick {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 11px;
  border: 2px solid #2b333d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 22px;
}
.nptb-opt.on .nptb-tick {
  background: #02d2a7;
  border-color: #02d2a7;
  color: #04120e;
}

/* ── Game rows: [crest] Nets @ Cavs [crest], all on one line ── */
.nptb-opt--game { align-items: center; }
.nptb-game {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.nptb-team-logo {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}
.nptb-team-name {
  font-size: 30px;
  font-weight: 600;
  color: #e7ebf0;
  white-space: nowrap;
}
.nptb-opt--game.on .nptb-team-name { color: #7ee0c0; }
.nptb-at {
  font-size: 24px;
  font-weight: 700;
  color: #5f6874;
  padding: 0 2px;
}

/* ── Sort direction ── */
.nptb-dir { padding: 24px 4px 8px; }
.nptb-dir.is-disabled { opacity: 0.4; pointer-events: none; }
.nptb-dir-lbl {
  font-size: 22px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7e8894;
  margin-bottom: 14px;
}
.nptb-seg { display: flex; gap: 12px; }
.nptb-seg-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 78px;
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px solid #2b333d;
  background: rgba(255, 255, 255, 0.02);
  color: #98a2b3;
  font-family: inherit;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
}
.nptb-seg-btn.on {
  border-color: #02d2a7;
  background: rgba(2, 210, 167, 0.12);
  color: #7ee0c0;
}

/* ── Sheet footer ── */
.nptb-sheet-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px 26px;
  border-top: 1px solid #1a2029;
}
.nptb-sheet-clear {
  min-height: 68px;
  padding: 0 8px;
  background: none;
  border: 0;
  color: #d98c8c;
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
}
.nptb-sheet-done {
  min-height: 68px;
  padding: 0 48px;
  border-radius: 16px;
  border: 0;
  background: #02d2a7;
  color: #04120e;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
}

.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUILD PANEL (every width). NFL's trims: no "Customize" entry point beside
   Build Parlay (the placeholder already carries Build By Game / Build By
   Market), and no Positions group in its popup (the builder's position set
   is empty on NBA too). Keyed on the NBA trigger / popup ids.
   ═══════════════════════════════════════════════════════════════════════ */
#nba-filter-trigger,
.filter-container:has(#nba-filter-trigger) {
  display: none !important;
}
#nba-filter-popup .nbaf-section-positions { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WIDE NBA TABLE (>=1001px): MLB / NFL's layout.
   The market chips are MLB's in-table strip (.tv-mlb-prop-pills, rendered by
   tableView-core inside #suggested-props-table); they write through the
   Prop Markets dropdown, which stays in the DOM and is hidden the way MLB
   and NFL hide it. The legend swatches take the cell palette below (teal =
   Strong, as on NFL). body.is-nba-shell is the server's NBA marker, NOT
   is-nba-route (tableView sets that on NFL too).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  body.is-nba-shell .table-filter-markets-dropdown { display: none; }
  body.is-nba-shell .tv-mlb-leg-dot[data-tier="great"] { background: #00F5D4; }
  body.is-nba-shell .tv-mlb-leg-dot[data-tier="good"]  { background: #4ade80; }
}

/* Full-cell tier tints on L10 / Vs Opp (L5 takes NFL's shared
   .cell-l5[data-tier] rule in workbench-table.css): the NBA row stamps the
   tier on the TD (tableView-core), same 0.18 palette as the Score and
   Matchup cells so the row reads as one strip. */
body.is-nba-shell .props-table .cell-l10[data-tier="excellent"],
body.is-nba-shell .props-table .cell-vs-opp[data-tier="excellent"] {
  --tv-tint: rgba(0, 245, 212, 0.18);
  background: var(--tv-tint);
}
body.is-nba-shell .props-table .cell-l10[data-tier="good"],
body.is-nba-shell .props-table .cell-vs-opp[data-tier="good"] {
  --tv-tint: rgba(74, 222, 128, 0.18);
  background: var(--tv-tint);
}
body.is-nba-shell .props-table .cell-l10[data-tier="average"],
body.is-nba-shell .props-table .cell-vs-opp[data-tier="average"] {
  --tv-tint: rgba(250, 204, 21, 0.10);
  background: var(--tv-tint);
}
body.is-nba-shell .props-table .cell-l10[data-tier="poor"],
body.is-nba-shell .props-table .cell-vs-opp[data-tier="poor"] {
  --tv-tint: rgba(234, 88, 12, 0.18);
  background: var(--tv-tint);
}
body.is-nba-shell .props-table .cell-l10[data-tier="bad"],
body.is-nba-shell .props-table .cell-vs-opp[data-tier="bad"] {
  --tv-tint: rgba(239, 68, 68, 0.18);
  background: var(--tv-tint);
}
/* Hover keeps the tint; an expanded chart cell takes the neutral chart teal
   (NFL's two rules for .cell-l5 / .cell-season, extended to these cells). */
body.is-nba-shell .props-table .cell-l10.clickable[data-tier]:not(.no-data):hover,
body.is-nba-shell .props-table .cell-vs-opp.clickable[data-tier]:not(.no-data):hover {
  background: var(--tv-tint, rgba(0, 211, 189, 0.08));
}
body.is-nba-shell .props-table .cell-l10.expanded,
body.is-nba-shell .props-table .cell-vs-opp.expanded {
  --tv-tint: rgba(0, 211, 189, 0.06);
  background: rgba(0, 211, 189, 0.06);
}