/* =========================================================
   Reverse Game Log – Static Blue/Grey/White/Black Theme
   ========================================================= */

/* --------- Palette (static) --------- */
:root{
  --brand:       #2d5f9a;   /* blue */
  --brand-dark:  #1f3f66;   /* darker blue for headers */
  --ink:         #111827;   /* nearly black */
  --ink-subtle:  #4b5563;   /* grey for hints/labels */
  --card:        #ffffff;   /* white cards */
  --page:        #f6f8fb;   /* light page background */
  --line:        #e5e7eb;   /* light grey borders */
  --stripe-1:    rgba(17,24,39,0.03);
  --stripe-2:    rgba(17,24,39,0.06);
}

/* Page text baseline */
.rgl-wrap{ color:var(--ink); }

/* Optional page background if your base template is dark */
body .rgl-wrap { background: transparent; }

/* --------- Header strip --------- */
.rgl-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:12px 0 20px; flex-wrap:wrap;
}
.rgl-title{ display:flex; align-items:center; gap:10px; }
.rgl-title h2{ margin:0; font-weight:800; letter-spacing:.02em; color:var(--ink); }

/* --------- Pills / Segments / Chips --------- */
.pill{
  border:1px solid var(--line);
  padding:2px 8px; border-radius:999px; font-size:.9em; color:var(--ink-subtle);
  background:#fff;
}

.seg{ display:inline-flex; border:1px solid var(--brand); border-radius:10px; overflow:hidden }
.seg a{
  padding:6px 12px; text-decoration:none; color:var(--ink); background:#fff;
}
.seg a.active{ background:var(--brand); color:#fff; font-weight:600; }
.seg a:hover{ background:#f3f4f6; }

.rgl-chipset{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--brand); padding:6px 12px; border-radius:999px;
  cursor:pointer; text-decoration:none; color:var(--ink); background:#fff;
}
.chip.active{ background:var(--brand); color:#fff; font-weight:600; }
.chip:hover{ background:#f3f4f6; }

.rgl-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.num{
  width:64px; padding:6px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink);
}

/* --------- Game card --------- */
.rgl-game{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  margin:14px 0;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.rgl-game h4{
  margin:0 0 8px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.rgl-game h4 .subtle{ color:var(--ink-subtle); }

/* --------- Table --------- */
.rgl-table{ width:100%; border-collapse:collapse; }

.rgl-table th, .rgl-table td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--line);
  color:var(--ink); font-size:.95rem;
}

/* Fixed header row: dark blue with white text */
.rgl-table thead th{
  background:var(--brand-dark);
  color:#ffffff;
  font-weight:700;
}

/* Zebra striping */
.rgl-table tbody tr:nth-child(odd){  background:var(--stripe-1); }
.rgl-table tbody tr:nth-child(even){ background:var(--stripe-2); }

/* POS/labels readable */
.subtle{ color:var(--ink-subtle); opacity:1 !important; }

/* Rank badge: pill with strong contrast */
.rank-badge{
  display:inline-block; min-width:28px; text-align:center;
  border-radius:8px; background:var(--brand); color:#fff;
  font-weight:800; padding:2px 8px;
}

/* --------- Misc --------- */
.team-logo{ max-height:80px; }
.team-logo-container h1{ color:var(--ink); }
.rgl-game a{ color:var(--brand-dark); }
.rgl-game a:hover{ text-decoration:underline; }

/* Focus states for accessibility */
.seg a:focus, .chip:focus, .num:focus{
  outline:2px solid var(--brand); outline-offset:2px;
  box-shadow:0 0 0 2px rgba(45,95,154,.2);
}