:root { --pad: 14px; --border: #e5e7eb; --muted:#6b7280; }

* { box-sizing: border-box; }

body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0b1220;
  background:#0a0f18;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1400px;           /* widened so admin tables/cards fit */
  margin: 0 auto;
  padding: 0 18px;
}

.muted { color: #9aa4b2; }

.flash {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.flash--ok { background: rgba(16,185,129,.10); color: #d1fae5; }
.flash--err { background: rgba(239,68,68,.10); color: #fee2e2; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10,15,24,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
}
.brand { font-weight: 800; letter-spacing: .3px; color: #e8eefb; }
.nav { display:flex; gap: 10px; flex-wrap: wrap; }
.nav a {
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.06);
  color:#e8eefb;
  background: rgba(255,255,255,.04);
}
.nav a:hover { background: rgba(255,255,255,.08); }
.nav__admin { background: rgba(59,130,246,.15)!important; border-color: rgba(59,130,246,.25)!important; }

main.container { padding-top: 18px; padding-bottom: 40px; }

h1 { color:#eef4ff; margin: 12px 0 8px; font-size: 30px; }
h2 { color:#eef4ff; margin: 18px 0 10px; font-size: 20px; }
h3 { color:#eef4ff; margin: 12px 0 8px; font-size: 16px; }

.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 55px rgba(0,0,0,.45);

  /* IMPORTANT: prevents tables/inner content from bleeding past rounded border */
  overflow: hidden;
  min-width: 0;
}
.card + .card { margin-top: 14px; }

.btn {
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#f3f6ff;
  font-weight: 650;
}
.btn:hover { background: rgba(255,255,255,.10); }
.btn--small { padding: 8px 10px; font-size: 14px; }

.in, input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color:#eef4ff;
  outline: none;
}
input::placeholder, textarea::placeholder { color: rgba(226,232,240,.55); }
label { display:block; color:#c9d3e6; font-weight: 650; margin: 6px 0 6px; }

.form-row { display:grid; gap: 12px; margin-bottom: 10px; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.grid {
  display:grid;
  gap: 14px;
}
.grid--2 {
  /* IMPORTANT: allows grid items to shrink instead of overflowing */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.grid > * { min-width: 0; }

.kpi { display:flex; flex-wrap: wrap; gap: 10px; align-items:center; }

/* TABLES - wrap instead of forcing horizontal scroll */
.table {
  width:100%;
  border-collapse: collapse;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  table-layout: fixed;           /* IMPORTANT: stops overflow */
}
.table th {
  text-align:left;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 12px;
  color:#dbe6ff;
  background: rgba(255,255,255,.06);

  /* allow headers to wrap */
  white-space: normal;
}
.table td {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  color:#eef4ff;

  /* allow cell text to wrap instead of pushing wider */
  white-space: normal;
  word-break: break-word;
}
.table tr:nth-child(2n) td { background: rgba(255,255,255,.02); }

/* action buttons wrap nicely */
.table-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* Remove horizontal scroll wrappers (no sliders) */
.table-wrap{
  width:100%;
  overflow: visible;             /* IMPORTANT: no horizontal sliders */
}

/* Pills */
.pills { display:flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#e8eefb;
  font-weight: 700;
}
.pill:hover { background: rgba(255,255,255,.10); }
.pill--active { background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.35); }

/* ===========================
   Strength pills (public boxscore)
   =========================== */
.str-pill{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 9999px; /* pill */
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2px;
  color: #fff;
  white-space: nowrap;
}
.str-pill--pp{ background:#dc2626; } /* PP = Red */
.str-pill--sh{ background:#2563eb; } /* SH = Blue */
.str-pill--en{ background:#16a34a; } /* EN = Green */

.gamecard {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.gamecard__left { display:flex; flex-direction: column; gap: 4px; }
.gamecard__teams { font-weight: 800; color:#eef4ff; }
.gamecard__meta { color:#9aa4b2; font-size: 13px; }
.gamecard__right { display:flex; align-items:center; gap: 10px; }

.badge {
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#eef4ff;
  font-weight: 800;
  font-size: 13px;
}
.badge--final { background: rgba(16,185,129,.13); border-color: rgba(16,185,129,.25); }
.badge--live { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22); }
.badge--scheduled { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }

/* Standings: team logo + name layout (CW-style) */
.table--standings td:nth-child(2),
.table--standings th:nth-child(2) {
  text-align: left;
}

.teamcell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;                 /* allow shrink */
}

.teamcell__logo{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  background: rgba(255,255,255,0.08);
  flex: 0 0 auto;
}

/* ✅ UPDATED: show FULL team names (no dots) */
.teamcell__name{
  font-weight:700;
  line-height:1.15;
  white-space: normal;     /* allow wrap */
  overflow: visible;       /* no clipping */
  text-overflow: unset;    /* no ellipsis */
  max-width: none;         /* remove cap */
}

/* Small buttons consistency (used on tables) */
.btn.btn--small{
  padding:.35rem .6rem;
  font-size:.9rem;
}

/* Responsive */
@media (max-width: 980px){
  .grid--2 { grid-template-columns: 1fr; }
  .form-row--2, .form-row--3 { grid-template-columns: 1fr; }
  .container { padding: 0 14px; }
  .teamcell__name { white-space: normal; } /* on mobile let team names wrap */
}

/* ===========================
   Public Box Score Banner (CW-style)
   =========================== */

.boxbanner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin: 14px 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
  overflow: hidden;
}

/* angled color blocks */
.boxbanner::before,
.boxbanner::after{
  content:"";
  position:absolute;
  top:0;
  width: 220px;
  height: 100%;
  opacity: .95;
  z-index: 0;
}

.boxbanner::before{
  left:0;
  background: var(--homeColor, #0b1220);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}

.boxbanner::after{
  right:0;
  background: var(--awayColor, #0b1220);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.boxbanner__side,
.boxbanner__center{
  position: relative;
  z-index: 1;
}

.boxbanner__side{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 280px;
}

.boxbanner__side--away{
  justify-content:flex-end;
}

.boxbanner__teamName{
  font-size: 20px;
  font-weight: 850;
  color:#eef4ff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.boxbanner__team--right{
  text-align:right;
}

.boxbanner__logo{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}

.boxbanner__logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boxbanner__logoFallback{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
}

.boxbanner__center{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.boxbanner__scoreRow{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align:center;
}

.boxbanner__score{
  font-size: 52px;
  font-weight: 900;
  letter-spacing: .02em;
  color:#eef4ff;
  min-width: 64px;
}

.boxbanner__status{
  font-size: 20px;
  font-weight: 850;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#eef4ff;
}

/* responsive */
@media (max-width: 980px){
  .boxbanner{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .boxbanner::before,
  .boxbanner::after{
    width: 160px;
  }
  .boxbanner__side{
    min-width: 0;
    justify-content: center;
  }
  .boxbanner__side--away{
    justify-content: center;
  }
  .boxbanner__teamName{
    max-width: 75vw;
  }
  .boxbanner__score{
    font-size: 44px;
  }
}

.teamcell__logoFallback{
  width:34px;
  height:34px;
  border-radius:50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

/* === FIX: Standings team names breaking/jumbling === */
.table.table--standings{
  table-layout: auto;          /* override global fixed layout */
}

.table--standings th:nth-child(2),
.table--standings td:nth-child(2){
  width: 420px;                /* give the TEAM column room */
  white-space: normal;         /* allow wrapping */
  word-break: normal;          /* don't break words */
  overflow-wrap: normal;       /* don't force mid-word wrap */
}

.table--standings .teamcell{
  min-width: 0;
}

.table--standings .teamcell__name{
  white-space: normal;         /* wrap on spaces */
  overflow: visible;           /* no clipping */
  text-overflow: clip;         /* no dots */
  max-width: none;             /* don't constrain */
}

/* ===========================
   Score Strip (scrollable cards)
   =========================== */

.scorestrip{
  margin: 14px 0 18px;
}

.scorestrip__rail{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px 12px;
  scroll-snap-type: x mandatory;
}

.scorestrip__rail::-webkit-scrollbar{ height: 10px; }
.scorestrip__rail::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}
.scorestrip__rail::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}

.scorecard{
  flex: 0 0 auto;
  width: 320px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  padding: 12px 12px 10px;
  scroll-snap-align: start;
}

.scorecard:hover{
  background: rgba(255,255,255,.06);
}

.scorecard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.scorestrip__badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#eef4ff;
  letter-spacing: .06em;
}

.scorestrip__badge--final{ background: rgba(16,185,129,.13); border-color: rgba(16,185,129,.25); }
.scorestrip__badge--live{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22); }
.scorestrip__badge--scheduled{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); }

.scorecard__when{
  color:#9aa4b2;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.scorecard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.scorecard__team{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 0;
}

.scorecard__team--right{
  justify-content:flex-end;
}

.scorecard__logo{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 auto;
}

.scorecard__logoFallback{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}

.scorecard__name{
  color:#eef4ff;
  font-weight: 850;
  line-height: 1.15;
  font-size: 14px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.scorecard__mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  flex: 0 0 auto;
}

.scorecard__at{
  color:#9aa4b2;
  font-weight: 900;
}

.scorecard__score{
  color:#eef4ff;
  font-weight: 950;
  font-size: 18px;
  letter-spacing:.02em;
}

.scorecard__time{
  color:#dbe6ff;
  font-weight: 850;
  font-size: 13px;
}