/* ==========================================================================
   Viewers Pro League — Site Styles (responsive, dual-mode)
   ========================================================================== */

/* THEME TOKENS */
:root{
  --accent:#ef4444;           /* vivid red */
  --accent-ink:#ffffff;

  /* light (white & red) */
  --bg:#f8fafc;               /* page background */
  --card:#ffffff;             /* surface/card background */
  --ink:#0f172a;              /* primary text */
  --muted:#475569;            /* secondary text */
  --line:#e5e7eb;             /* borders/dividers */

  /* fluid type/space */
  --fs-1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --fs-2: clamp(0.90rem, 0.85rem + 0.4vw, 1.00rem);
  --fs-3: clamp(1.05rem, 0.98rem + 0.6vw, 1.20rem);
  --fs-4: clamp(1.30rem, 1.12rem + 1.0vw, 1.60rem);
  --pad-1: clamp(8px, 6px + 0.6vw, 14px);
  --pad-2: clamp(10px, 8px + 0.8vw, 18px);
  --radius: 16px;
}
:root[data-theme="dark"]{
  --bg:#0b0f16;
  --card:#0f1622;
  --ink:#e5e7eb;
  --muted:#9aa4b2;
  --line:#1f2a37;
}

/* BASE */
html{ color-scheme: light; }
:root[data-theme="dark"] html{ color-scheme: dark; }
*{ box-sizing:border-box; }
body{
  margin:0; color:var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  font-size: var(--fs-2);
  line-height: 1.45;
  background:
    radial-gradient(800px 600px at -10% -10%, color-mix(in oklab,var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(800px 600px at 110% 110%, color-mix(in oklab,var(--accent) 12%, transparent), transparent 60%),
    var(--bg);
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ display:block; }

/* UTIL */
.hidden{ display:none !important; }
.small{ font-size:.82rem; color:var(--muted); }
.container{ max-width:1120px; margin:0 auto; padding:var(--pad-2); }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.link-quiet{ color:inherit; text-decoration:none; }
.link-quiet:hover{ text-decoration:underline; }
.spacer{ flex:1 1 auto; }

/* HEADER (legacy util bits) */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--card); border-bottom:1px solid var(--line);
  box-shadow: 0 2px 0 0 var(--accent);
}
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--ink); text-decoration:none; }
.brand img{ height:48px; width:48px; object-fit:contain; background:transparent; }
.brand .title{ font-size:var(--fs-4); font-weight:900; letter-spacing:.2px; }
.brand .subtitle{ font-size:.8rem; color:var(--muted); margin-top:-2px; }
.nav a{ color:var(--ink); opacity:.9; }
.nav a:hover{ opacity:1; text-decoration:underline; }
.theme-toggle{
  border:1px solid var(--line); background:var(--card);
  color:var(--ink); border-radius:999px; padding:.4rem .8rem; font-size:.8rem;
}
.theme-toggle strong{ color:var(--accent); }

/* FORMS & BUTTONS */
.input,.select,.btn{
  padding:.55rem .8rem; border:1px solid var(--line); border-radius:.75rem;
  background:var(--card); color:var(--ink);
}
.input::placeholder{ color:color-mix(in oklab, var(--muted) 80%, transparent); }
.select{ appearance:none; }
.btn{ cursor:pointer; }
.btn:hover{ border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-accent{
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent);
}
.btn-accent:hover{ filter:brightness(1.05); }

/* Fancy pill-style Filters button */
.btn-filter{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .95rem;
  border-radius:9999px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--card) 92%, transparent),
      color-mix(in oklab,var(--card) 100%, transparent));
  border:1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 0 0 2px color-mix(in oklab, var(--accent) 12%, transparent) inset;
  color:var(--ink);
  cursor:pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn-filter:hover{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow:
    0 2px 10px rgba(0,0,0,.08),
    0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent) inset;
}
.btn-filter:active{ transform: translateY(1px); }
.btn-filter .chev{
  width:10px; height:10px;
  border:2px solid currentColor; border-left:0; border-top:0;
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.9;
}
.btn-filter[aria-expanded="true"] .chev{ transform: rotate(-135deg); }

/* CARDS */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  transition:.18s ease;
}
.card.pad{ padding:var(--pad-1); }
.card:hover{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* CHIPS & BADGES */
.chip{
  font-size:.75rem; background:color-mix(in oklab, var(--accent) 12%, transparent);
  color:var(--ink);
  border:1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  border-radius:9999px; padding:.15rem .55rem; white-space:nowrap;
}
.badge{
  font-size:.70rem; background:color-mix(in oklab, var(--accent) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  border-radius:6px; padding:.1rem .45rem; white-space:nowrap;
}

/* IMAGES — strict transparent backgrounds */
.club-dot{ width:28px; height:28px; object-fit:contain; background:transparent; }
.mini-logo{ width:18px; height:18px; object-fit:contain; background:transparent; }
.face{
  width:64px; height:64px; border-radius:12px; object-fit:contain;
  background:transparent;
}

/* UNIFORM PLAYER/CLUB CARD GRID */
.player-card{
  display:grid; grid-template-columns:64px 1fr; gap:12px; min-height:112px;
}
.player-card .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.player-card .line{ margin-top:4px; }

/* LOAN SYMBOL */
.icon-loan{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--accent) 12%, transparent);
  font-size:.95rem; line-height:1;
}

/* COLLAPSIBLE FILTER BAR */
.filter-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filters-grid{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.count-pill{
  font-size:.72rem; padding:.2rem .6rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
}

/* TABLES */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card);
}
.table th, .table td{ padding:.6rem .8rem; border-bottom:1px solid var(--line); }
.table th{
  text-align:left; font-weight:700; color:var(--muted); font-size:.8rem;
  background:color-mix(in oklab,var(--accent) 6%, var(--card));
}
.table tr:last-child td{ border-bottom:none; }

/* ====== RESPONSIVE LAYOUT MODES ====== */
:root[data-view="compact"] .container{ max-width:680px; }
:root[data-view="compact"] .card.pad{ padding:10px; }
:root[data-view="compact"] .brand img{ height:40px; width:40px; }
:root[data-view="compact"] .brand .title{ font-size: clamp(1.05rem, 2.5vw, 1.25rem); }
:root[data-view="compact"] .grid-auto{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
:root[data-view="compact"] .player-card{ grid-template-columns:56px 1fr; }
:root[data-view="compact"] .face{ height:56px; width:56px; }

@media (max-width: 900px){
  :root:not([data-view]) .container{ max-width:680px; }
  :root:not([data-view]) .card.pad{ padding:10px; }
  :root:not([data-view]) .brand img{ height:40px; width:40px; }
  :root:not([data-view]) .brand .title{ font-size: clamp(1.05rem, 2.5vw, 1.25rem); }
  :root:not([data-view]) .grid-auto{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  :root:not([data-view]) .player-card{ grid-template-columns:56px 1fr; }
  :root:not([data-view]) .face{ height:56px; width:56px; }
}

html[data-view="compact"] body::before{
  content:"COMPACT";
  position:fixed; right:8px; bottom:8px; z-index:99999;
  font:600 11px/1.2 ui-sans-serif, system-ui;
  padding:.25rem .45rem; border-radius:6px;
  background:rgba(239,68,68,.9); color:#fff;
}

/* ===== Compact fit tweaks ===== */
:root[data-view="compact"] .container{ max-width:680px; padding:12px; }
:root[data-view="compact"] body{ font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1rem); }
:root[data-view="compact"] .input,
:root[data-view="compact"] .select,
:root[data-view="compact"] .btn{ padding:.42rem .6rem; border-radius:.6rem; font-size:.95em; }
:root[data-view="compact"] .club-dot{ width:22px; height:22px; }
:root[data-view="compact"] .brand .subtitle{ display:none; }
:root[data-view="compact"] .grid-auto{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }

/* Scrollable wrapper for any table (auto-injected by JS) */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; }
.table-wrap > table{ min-width:720px; }

/* If your tables already have .table, keep padding tighter on phones */
:root[data-view="compact"] .table th,
:root[data-view="compact"] .table td{ padding:.45rem .55rem; }

/* Optional helpers to show/hide chunks per mode */
.only-wide{ display:initial; }
.only-compact{ display:none; }
:root[data-view="compact"] .only-wide{ display:none !important; }
:root[data-view="compact"] .only-compact{ display:initial !important; }
/* === Wide-grid safety net (works for .tbl and any similar grid) === */

/* 1) Make wide grids horizontally scrollable by default */
.tbl{
  overflow-x: auto;                 /* was hidden; let it scroll */
  overscroll-behavior-x: contain;   /* nicer touch scroll */
  -webkit-overflow-scrolling: touch;
}

/* 2) Ensure the inner grid has a minimum width so columns don't squish to nonsense.
      (This matches your current 40px + 1fr + 9*64px ≈ ~ 40 + flex + 576 + 64) */
.tbl > .tbl-head,
.tbl > .tbl-row{
  min-width: 820px;                 /* tweak if you add/remove columns */
}

/* Optional: a subtle edge-fade so users see there's more to scroll */
.tbl::-webkit-scrollbar{ height: 8px; }
.tbl{ mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%); }

/* 3) Compact mode: tighten columns so it fits better before we resort to scroll */
:root[data-view="compact"] .tbl > .tbl-head,
:root[data-view="compact"] .tbl > .tbl-row{
  /* shrink the fixed columns a touch on phones */
  grid-template-columns: 32px 1fr repeat(6, 56px) 56px !important;
  min-width: 720px;   /* still allow scroll if needed, but tighter than desktop */
}

/* 4) Global header overflow fallback (so nav never traps taps on phones) */
:root[data-view="compact"] .site-header .nav{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* ===== tables.html hard-fix (force proper grid + horizontal scroll) ===== */
:root .tbl{
  display:block !important;                 /* container stays block */
  overflow-x:auto !important;               /* allow pan horizontally */
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
}

/* FORCE the rows to be grid (if page-level CSS fails or is overridden) */
:root .tbl > .tbl-head,
:root .tbl > .tbl-row{
  display:grid !important;
  grid-template-columns: 40px 1fr repeat(8,64px) 64px !important;  /* desktop/wide */
  align-items:center !important;
  min-width: 960px !important;               /* guarantees horizontal overflow instead of wrapping */
}

/* compact phones: tighter columns so scroll isn’t crazy wide */
:root[data-view="compact"] .tbl > .tbl-head,
:root[data-view="compact"] .tbl > .tbl-row{
  grid-template-columns: 32px 1fr repeat(6,56px) 56px !important;
  min-width: 720px !important;
}

/* nicer mobile scroll hint + small scrollbar */
:root .tbl{
  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%) !important;
}
:root .tbl::-webkit-scrollbar{ height:8px }
/* ===== Tables: compact-friendly full grid with sticky first columns ===== */
:root .tbl{
  --col-pos: 44px;                                 /* width of the first (#) column */
  display:block !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%) !important;
}

/* grid layout + a min-width so content scrolls instead of wrapping */
:root .tbl > .tbl-head,
:root .tbl > .tbl-row{
  display:grid !important;
  grid-template-columns: var(--col-pos) minmax(160px,1.2fr) repeat(8,64px) 64px !important;
  align-items:center !important;
  min-width: 980px !important;                     /* wide enough for all columns */
}

/* compact mode: slightly tighter grid + narrower first column */
:root[data-view="compact"] .tbl{ --col-pos: 36px; }
:root[data-view="compact"] .tbl > .tbl-head,
:root[data-view="compact"] .tbl > .tbl-row{
  grid-template-columns: var(--col-pos) minmax(140px,1.4fr) repeat(6,56px) 56px !important;
  min-width: 840px !important;
}

/* Freeze the first two columns while horizontally scrolling */
:root .tbl .tbl-head > :nth-child(1),
:root .tbl .tbl-row  > :nth-child(1){
  position: sticky; left: 0; z-index: 3;
  background: var(--surface, var(--card));
}

:root .tbl .tbl-head > :nth-child(2),
:root .tbl .tbl-row  > :nth-child(2){
  position: sticky; left: var(--col-pos); z-index: 2;
  background: var(--surface, var(--card));
}

/* subtle divider/shadow to separate frozen columns from scrolling area */
:root .tbl .tbl-head > :nth-child(2),
:root .tbl .tbl-row  > :nth-child(2){
  box-shadow: 6px 0 8px rgba(0,0,0,.10);
}

/* Keep headers readable when scrolled horizontally */
:root .tbl .tbl-head{
  position: sticky; top: 0; z-index: 4;
  background: var(--surface);
}

/* Ensure club cell truncates nicely */
:root .tbl .clubcell .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }