/* css/roster-layout-popup.css — Compact chip-row popup (v2) */

:root{
  --wb-text: #e8f0ff;
  --wb-muted: rgba(186, 220, 255, 0.85);
  --wb-muted-2: rgba(147, 197, 253, 0.90);
  --wb-card: rgba(255,255,255,0.04);
  --wb-border: rgba(59,130,246,0.25);
  --wb-border-2: rgba(56,189,248,0.45);
  --wb-primary: rgba(59,130,246,0.90);
  --wb-shadow: 0 10px 40px -12px rgba(0,0,0,0.7);
}

html.wb-modal-open,
body.wb-modal-open {
  overflow: hidden !important; /* no background scroll */
  height: 100%;                /* avoid overscroll */
  overscroll-behavior: none;   /* block pull-to-refresh/bounce */
  touch-action: none;          /* stop touch scrolling on mobile */
}

body.wb-modal-open{ overflow: hidden; }

.wb-modal{
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
}
.wb-modal__backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.65); backdrop-filter: blur(3px); }
.wb-modal__card{
  position: relative; z-index: 1;
  width: min(900px,96vw); max-height: 86vh; overflow: hidden;
  border: 1px solid var(--wb-border-2); border-radius: 1rem;
  background: rgba(7,19,23,.92); box-shadow: 0 20px 80px rgba(0,0,0,.6);
  display: grid; grid-template-rows: auto 1fr; color: var(--wb-text);
}
.wb-modal__header{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--wb-border); background: rgba(7,19,23,.85); }
.wb-modal__title{ font-weight:800; letter-spacing:.02em; font-size:1.1rem; }
.wb-modal__close{ appearance:none; border:none; background:transparent; color:var(--wb-muted); font-size:1.5rem; cursor:pointer; }
.wb-modal__close:hover{ color:var(--wb-text); }

.wb-modal__body{ overflow:auto; padding:.75rem 1rem 1rem; display:grid; gap:1rem; }
.wb-modal__section{ display:grid; gap:.75rem; }
.wb-modal__section-title{ color: var(--wb-muted-2); font-weight:700; letter-spacing:.02em; }
.wb-modal__loading, .wb-modal__empty{
  color: var(--wb-muted); padding:.75rem; border:1px dashed var(--wb-border); border-radius:.5rem; text-align:center;
}

/* Sections */
.trend-section{
  border:1px solid var(--wb-border); background:var(--wb-card);
  border-radius:.75rem; padding:.75rem; display:grid; gap:.6rem;
}
.trend-pos-title{ text-align:center; font-weight:800; letter-spacing:.02em; color:#dbeafe; }

/* Filters */
.metric-filters{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.metric-filters .fchip{
  appearance:none; border:1px solid var(--wb-border-2);
  background: rgba(17,28,48,.55); color:#E6F0FF; font-weight:700;
  padding:.25rem .6rem; border-radius:999px; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
  font-size:.85rem;
}
.metric-filters .fchip.active{ background: rgba(56,189,248,.2); border-color: var(--wb-primary); }

/* Row layout */
.trend-rows{ display:grid; gap:.5rem; }
.trend-row{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:.6rem .75rem;
  padding:.5rem .6rem; border:1px solid rgba(56,189,248,.12); border-radius:.6rem; background: rgba(255,255,255,.02);
}

/* Left chips */
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:.6rem; border:1px solid var(--wb-border-2); background: rgba(10,17,32,.55); font-weight:700; }
.chip-team{ font-weight:800; letter-spacing:.02em; }
.chip-metric{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.chip-metric .mname{ color:#e6f0ff; font-weight:800; }
.chip-metric .mval{ color:#93c5fd; font-weight:800; }

/* Rank badge (green→yellow→red) */
.rank-badge{ padding:.05rem .35rem; border-radius:.45rem; font-size:.75rem; font-weight:800; border:1px solid transparent; }
.rank-badge.badge-good{ background: rgba(16,185,129,.18); color:#bbf7d0; border-color: rgba(16,185,129,.35); } /* green */
.rank-badge.badge-warn{ background: rgba(245,158,11,.18); color:#fde68a; border-color: rgba(245,158,11,.35); } /* yellow */
.rank-badge.badge-bad{  background: rgba(239,68,68,.18);  color:#fecaca; border-color: rgba(239,68,68,.35); } /* red */

/* Mid text (two-line friendly) */
.row-mid{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .5rem;
  color: var(--wb-muted); line-height:1.35;
}
.row-mid .player-name{ color:#e2e8f0; font-weight:800; }
.row-mid .mlabel{ color:#e6f0ff; font-weight:700; }
.row-mid .mval{ color:#e0f2fe; font-weight:800; }
.row-mid .odds{ color: var(--wb-muted); }
.row-mid .sep{ opacity:.6; }

/* + / ✓ button */
.add-to-parlay{
  width:2rem; height:2rem; display:grid; place-items:center; border-radius:9999px;
  border:1px solid var(--wb-primary); color:var(--wb-primary); background:rgba(255,255,255,.03);
  cursor:pointer; transition:background-color .15s ease, transform .05s ease;
}
.add-to-parlay:hover{ background: rgba(59,130,246,.10); }
.add-to-parlay:active{ transform: scale(.95); }
.add-to-parlay.in-parlay{ background: var(--wb-primary); border-color:transparent; color:#081a2e; }
.add-to-parlay .inner-plus{ font-weight:700; }

/* Responsive */
@media (max-width: 1000px){
  /* #open-game-trends{
    font-size: 26px;
    background-image: linear-gradient(180deg, rgba(82,218,203,.7), rgba(27,177,146,.7));
    font-weight: 500;
    color: black;
  } */
  .wb-modal{
    margin-top: 125px;
  }
  .wb-modal__title{ font-size:28px; }
  .wb-modal__close{ font-size: 56px; font-weight: 700;}
    .trend-row {
    grid-template-columns: 1fr auto; /* left block + button */
    grid-auto-rows: auto;
    padding: 12px 10px;
  }
  .trend-row .row-left {
    grid-column: 1 / 2; /* top row, full left span */
  }
  .trend-row .row-mid {
    grid-column: 1 / 2; /* force below the left chips */
    margin-top: 6px; /* small breathing room */
    margin-left: 18px;
  }
  .trend-row .add-to-parlay {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;   /* sit on the right, centered between rows */
    align-self: center;
    justify-self: end;
  }
  .wb-modal__card{ width:950px; }
  .chip{ font-size: 26px; padding: 8px 20px;}
  .row-mid{ font-size: 26px; }
  .rank-badge{ padding: 4px 8px; font-size:18px; margin-left: 8px; }

  .add-to-parlay{
    width:56px; height:56px;
  }

  .trend-pos-title{ font-size: 32px; margin-bottom: 8px; }
  .metric-filters{ gap:.6rem; }
  .metric-filters .fchip{
    padding: 12px 20px;
    font-size:26px;
    margin-bottom: 8px;
  }

}


/* ===== Subtle Tech-Blue Themes for the popup ===== */
/* Usage (JS in openGameTrendsModal):  $modal.addClass('techblue-azure');  */

/* Base: gradient hairline border option for all themes */
#wb-modal[class*="techblue-"] .wb-modal__card::before{
  content:""; position:absolute; inset:0; border-radius:1rem; pointer-events:none;
  background: linear-gradient(120deg, rgba(56,189,248,.35), rgba(99,102,241,.35));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; /* hairline */
}

/* ---------- Theme 1: Azure Glass ---------- */
#wb-modal.techblue-azure{
  --wb-card: rgba(18, 30, 47, 0.5);
  --wb-border: rgba(56, 189, 248, .28);
  --wb-border-2: rgba(56, 189, 248, .45);
  --wb-primary: rgba(56, 189, 248, .94);  /* CTA / + button */
  --wb-shadow: 0 24px 80px rgba(3, 20, 46, .6);
}
#wb-modal.techblue-azure .wb-modal__backdrop{
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(50% 50% at 85% 80%, rgba(99,102,241,.14), transparent 60%),
    rgba(2, 6, 23, .65);
}
#wb-modal.techblue-azure .wb-modal__card{
  background: linear-gradient(180deg, rgba(6,14,28,.96), rgba(7,18,34,.94));
  border: 1px solid var(--wb-border-2);
  box-shadow: var(--wb-shadow);
}
#wb-modal.techblue-azure .wb-modal__header{
  background: rgba(18, 30, 47, 0.5) !important;
  border-bottom-color: rgba(56,189,248,.45) !important;
}

/* Optional: align chips with the theme (subtle) */
#wb-modal[class*="techblue-"] .chip{
  background: rgba(15, 30, 56, .55);
  border-color: var(--wb-border-2);
}
#wb-modal[class*="techblue-"] .metric-filters .fchip.active{
  background: rgba(56,189,248,.18);
  border-color: var(--wb-primary);
}