/* css/livePBP.css
   Namespaced styles for the Live PBP dashboard (header like screenshot)
*/

:root {
  --lpbp-bg: rgba(5, 14, 18, 0.75);
  --lpbp-card: rgba(255, 255, 255, 0.06);
  --lpbp-border: rgba(255, 255, 255, 0.08);
  --lpbp-text: #eaf2f7;
  --lpbp-subtext: #9fb6c3;
  --lpbp-good: #16a34a;
  --lpbp-bad: #ef4444;
}

#livepbp-root.lpbp-root {
  position: relative;
  z-index: 20;
  padding: 16px clamp(12px, 2vw, 24px);
  /* background: var(--lpbp-bg);
  backdrop-filter: blur(12px); */
  background: transparent;
  border-radius: 14px;
  border: 0px solid var(--lpbp-border);
  margin: 12px;
  color: var(--lpbp-text);
  box-sizing: border-box;
}

.lpbp-actions {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  padding: .75rem var(--wb-padx);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}

.lpbp-btn {
  padding: 8px 16px;
  font-size: 24px;
  border:1px solid rgba(34,221,182,.45); 
  color:#071317;
  background-image:linear-gradient(180deg, rgba(124,227,216,.98), rgba(34,221,182,.98));
  box-shadow:0 6px 24px rgba(34,221,182,.25), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: .75;
  font-weight: 500;

  border-radius: 12px;  
  margin-top: 10px;
  margin-bottom: 0px;
}
.lpbp-btn:hover { filter: brightness(1.05); }

/* ---------------- Header (screenshot style) ---------------- */
.lpbp-header { 
  margin-bottom: 14px;   
  background:  var(--lpbp-card);
  border-radius: 12px;
  padding: 12px 20px;
}

.hdr-row {
  display: grid;
  grid-template-columns: 1.2fr .5fr 1.6fr .5fr 1.2fr;
  align-items: center;
  gap: clamp(6px, 1.8vw, 16px);

}

.hdr-cell { min-width: 0; }

.hdr-team .teamline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#livepbp-root .hdr-team .teamline .team-pill{
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;           /* optional: removes pill padding */
}

/* Optional: drop the text glow if you want it flatter in PBP */
#livepbp-root .hdr-team .team-text,
#livepbp-root .hdr-team .team-name{
  text-shadow: none;
  margin: 0;
}

.hdr-team .ball-icon { display: none; font-size: 18px; }
.hdr-team.has-ball .ball-icon { display: inline; }

.hdr-score .num {
  display: block;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.3px;
  font-size: clamp(22px, 3.2vw, 32px);
}

.hdr-middle {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.hdr-middle .net {
  font-size: 12px;
  color: var(--lpbp-subtext);
  letter-spacing: 0.3px;
}
.hdr-middle .qt-line {
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 24px);
}
.hdr-middle .down-line,
.hdr-middle .spot-line {
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--lpbp-subtext);
}

/* -------- Mobile tabs -------- */
.lpbp-tabs, .lpbp-tabs-panels { display: none; }
.lpbp-tabs {
  display: none;
  margin: 10px 0 8px;
  gap: 10px;
  justify-content: center;
}
.lpbp-tab {
  appearance: none;
  border: 1px solid var(--lpbp-border);
  background: var(--lpbp-card);
  color: var(--lpbp-text);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lpbp-tab.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lpbp-good), transparent 30%);
  background: color-mix(in srgb, var(--lpbp-card), var(--lpbp-good) 10%);
}

.lpbp-tabs-panels .tab-panel { display: none; }
.lpbp-tabs-panels .tab-panel.active { display: block; }

/* -------- Desktop grid -------- */
.lpbp-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
@media (max-width: 1024px) {
  .lpbp-grid { display: none; }
  .lpbp-tabs, .lpbp-tabs-panels { display: block; }
}

/* Panels */
.lpbp-panel {
  background: var(--lpbp-card);
  border: 1px solid var(--lpbp-border);
  border-radius: 12px;
  overflow: clip;
}
.lpbp-panel + .lpbp-panel { margin-top: 12px; }

.lpbp-panel-title {
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 1px solid var(--lpbp-border);
  background: color-mix(in srgb, var(--lpbp-card), transparent 10%);
  font-size: 15px;
}

/* Plays */
.lpbp-body {
  max-height: min(60vh, 560px);
  overflow: auto;
  padding: 10px;
}
.lpbp-plays {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lpbp-play {
  display: grid;
  gap: 4px;
  padding: 10px 8px;
  border-bottom: 1px dashed var(--lpbp-border);
}
.lpbp-play:last-child { border-bottom: none; }
.lpbp-play-meta {
  color: var(--lpbp-subtext);
  font-size: 13px;
  letter-spacing: 0.2px;
}
.lpbp-play-text {
  color: var(--lpbp-text);
  font-size: 15px;
  line-height: 1.35;
}

/* Scoring summary */
#lpbp-scoring-panel .lpbp-scoring,
#lpbp-scoring-tabpanel .lpbp-scoring {
  list-style: none;
  padding: 8px 12px 12px 12px;
  margin: 0;
}
.scoring-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--lpbp-border);
  font-size: 15px;
}
.scoring-item:last-child { border-bottom: none; }
.scoring-text { flex: 1 1 auto; color: var(--lpbp-text); }
.scoring-score {
  flex: 0 0 auto;
  background: var(--lpbp-card);
  border: 1px solid var(--lpbp-border);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--lpbp-text);
  font-weight: 700;
  font-size: 12px;
}

/* Leaders */
.leaders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px 12px;
}
.leaders-box {
  background: color-mix(in srgb, var(--lpbp-card), transparent 8%);
  border: 1px dashed var(--lpbp-border);
  border-radius: 10px;
  padding: 10px;
}
.leaders-title { font-weight: 800; margin-bottom: 8px; }
.leader-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}
.leader-row .ln { color: var(--lpbp-text); }
.leader-row .lv { color: var(--lpbp-subtext); }
.leaders-empty, .teamstats-empty, .props-empty {
  padding: 12px 14px;
  color: var(--lpbp-subtext);
}

/* Team stats */
.teamstats-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px 12px;
  padding: 12px;
}
.ts-cell, .ts-row {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--lpbp-card), transparent 8%);
  border: 1px dashed var(--lpbp-border);
  border-radius: 8px;
}
.ts-head { font-weight: 800; }
.ts-label { font-weight: 700; }
.ts-val { text-align: right; }

/* ---------------- Props Tracker ---------------- */
.props-board {
  display: grid;
  gap: 14px;
  padding: 12px;
}
/* visitor | POS | home, with a header row for the chip+dashes */
.props-row {
  display: grid;
  grid-template-columns: 1fr minmax(56px, 64px) 1fr;
  grid-template-rows: auto auto;          /* row 1 = dashes + chip, row 2 = lists */
  gap: 12px;
  align-items: start;
  min-width: 0;
}

/* dashed rails (match rosterDisplay look; uses --wb-dash if present) */
.props-row .dash{
  grid-row: 1;
  height: 0;
  border-top: 2px dashed var(--wb-dash, rgba(148,163,184,0.45));
  align-self: center;
}
.props-row .dash-left  { grid-column: 1 / 2; }
.props-row .dash-right { grid-column: 3 / 4; }

/* place the lists under the header row */
.props-row .props-side       { grid-row: 2; }
.props-row .props-visitor    { grid-column: 1 / 2; }
.props-row .props-home       { grid-column: 3 / 4; }

.props-side { min-width: 0; }
.props-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}

#livepbp-root .props-row .pos-chip{
  grid-row: 1;
  grid-column: 2 / 3;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, .65);
  background: radial-gradient(circle at 50% 30%, rgba(59,130,246,.95), rgba(56,189,248,.85));
  color: #0b1424;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  height: 2.25rem;
  padding: 0 .75rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.50);
  justify-self: center; /* ensure centered in the middle column */
}


.player-card {
  position: relative;
  background: color-mix(in srgb, var(--lpbp-card), transparent 6%);
  border: 1px solid var(--lpbp-border);
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.player-card.hit { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lpbp-good), transparent 40%); }
.player-card.miss { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lpbp-bad), transparent 40%); }

.player-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.player-name { font-weight: 800; font-size: 15px; }

.player-bars { display: grid; gap: 8px; min-width: 0; }
.prop-line-row { display: grid; gap: 6px; min-width: 0; }
.prop-line-label {
  color: var(--lpbp-subtext);
  font-size: 13px;
  min-width: 0;
}
.prop-line-label .prop-line-val { margin-left: 4px; color: var(--lpbp-text); font-weight: 700; }
.prop-line-label .prop-odds { margin-left: 8px; opacity: 0.9; }

.prop-bar {
  position: relative;
  height: 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lpbp-card), transparent 15%);
  border: 1px solid var(--lpbp-border);
  overflow: hidden;
  min-width: 0;
}
.prop-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 280ms ease;
}
.prop-bar-fill.under { background: color-mix(in srgb, var(--lpbp-bad), transparent 30%); }
.prop-bar-fill.over  { background: color-mix(in srgb, var(--lpbp-good), transparent 30%); }

.prop-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #f4f9ff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ---------------- Mobile upsizing ---------------- */
@media (max-width: 1000px) {
  #livepbp-root.lpbp-root { padding: 16px 14px; margin-top: -165px; }
  .lpbp-btn {
    padding: 10px 20px;
    font-size: 32px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .hdr-row {
    grid-template-columns: 1fr auto 1.4fr auto 1fr;
    gap: 10px;
  }
  .hdr-team .team-name { font-size: 48px !important; padding: 12px 18px; }
  .hdr-score .num { font-size: 48px !important; font-weight: 600 !important; }
  .hdr-team .ball-icon { font-size: 32px; }
  .hdr-middle .qt-line { font-size: 32px !important; }
  .hdr-middle .down-line, .hdr-middle .spot-line, .hdr-middle .net  { font-size: 24px !important; }
  .lpbp-panel-title { font-size: 32px; }
  .lpbp-tab { font-size: 36px; padding: 14px 22px; text-align: center; }
  .lpbp-tabs { display: flex; }
  .lpbp-play-text { font-size: 32px; }
  .lpbp-play-meta { font-size: 28px; }
  .leader-row { font-size: 30px; }
  .scoring-item { font-size: 32px; }
  .player-name { font-size: 32px; }
  .prop-line-label { font-size: 28px; }
  .prop-bar { height: 22px; }
  /* Make the center column skinny and let the pill span full width like roster */
  #livepbp-root .props-row {
    grid-template-columns: 2.8fr minmax(2px, 2px) 2.8fr;
  }
  #livepbp-root .props-row .pos-chip{
    grid-column: 1 / -1;      /* pill centered across all columns */
    position: relative;
    z-index: 2;
    font-size: 18px;          /* same scale bump as roster */
  }
  .lpbp-body {
    max-height: 1000px;
    padding: 10px;
  }

}