/* ===================================================================
   Global resets & App grid
   =================================================================== */
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--color-text);
  font: 14px/1.45 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.rs-app {
  display:grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-areas:
    "header header"
    "nav    main";

  /* Let the document scroll naturally (better for iPad pinch/pan) */
  height: auto;
  min-height: 0;
  max-width:var(--content-max);
  margin:0 auto;
  width: 100%;
  min-width: 0; /* critical: don't let a wide child set the app's width */

}

/* public/css/layout.css — replace the old boot rule */

/* Keep header, left nav, filterbar and tabbar visible; only fade the panels */
.is-booting .rs-app { visibility: visible; }

.is-booting .rs-panel {
  opacity: 0.35;
  transition: opacity 120ms linear;
  pointer-events: none; /* prevents accidental clicks while data hydrates */
}

/* Ensure these remain fully visible during boot */
.is-booting .rs-header,
.is-booting .rs-nav,
.is-booting .rs-filterbar,
.is-booting .rs-tabbar {
  opacity: 1;
  pointer-events: auto;
}



/* ===================================================================
   Header (sticky, token-driven height, brand cluster, title)
   =================================================================== */
.rs-header {
  grid-area: header;
  position: static;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: var(--header-h);      /* token-driven height */
  padding: var(--header-pad-y) 16px;

  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.rs-header__left{
  display:flex;
  align-items:center;
  gap: var(--header-left-gap, 12px);
}

/* Logo element is the thing with .rs-logo (img or svg) */
.rs-header .rs-logo{
  height: var(--logo-h);
  width: auto;
  display: block;
  max-width: 100%;
  margin: 0;                                      /* neutralize any defaults */
  margin-left: var(--logo-offset-x, 0px) !important;  /* ← nudge control */
  line-height: 0;                                  /* avoid stray inline gap */
}

/* Explicit, token-driven logo sizing (covers <img> or inline <svg>) */
.rs-header .brand .rs-logo,
.rs-header .brand img,
.rs-header .brand svg {
  height: var(--logo-h);
  width: auto;
  display: block;
  max-width: 100%;
  margin: 0;
}
.rs-header__right { display:flex; align-items:center; gap:8px; }

/* Move the title (“Performance”) independently */
.rs-title{
  font-size: var(--fs-20);
  font-weight: 700;
  margin-left: var(--title-offset-x, 0px) !important; /* ← nudge control */
}

.rs-chip {
  padding:4px 10px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  font-weight:600;
}

/* ===================================================================
   Left Navigation (sticky under header, its own scroller)
   =================================================================== */
.rs-nav {
  grid-area: nav;
  position: static;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 12px 8px;

  max-height: none;
  overflow: visible;
}

.rs-nav__group { margin-bottom: 8px; }

.rs-nav__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;

  background: transparent;
  color: inherit;
  cursor: pointer;

  /* UI font, crisp weight */
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 1.1rem;                       /* larger menu font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rs-nav__item:hover {
  background: var(--panel);
}

/* Active (current page) — keep your brand primary treatment */
.rs-nav__item[aria-current="page"] {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ===================================================================
   Main area & Filter Bar container (grid)
   =================================================================== */
.rs-main {
  grid-area: main;
  padding:16px;

  /* KEY: let children (tabs/panels) become the scroller when needed */
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;  /* ADD THIS */
}


.rs-filterbar{
  display: grid;
  grid-template-columns: repeat(var(--filter-cols), minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: var(--filters-tabs-gap);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 0;
  margin-bottom: var(--filters-panel-gap);  /* filter → panel spacing */
}
.rs-filterbar > * { min-width: 0; } /* prevents intrinsic min-width blowups */

/* ===================================================================
   Filter Bar: spans per control (keeps controls proportioned)
   =================================================================== */
/* Make Date & Home/Away narrower; Opponent & Arena wider; reserve 2 cols */
.rs-filterbar #filterDates    { grid-column: span var(--span-date);  }
.rs-filterbar #filterOpponent { grid-column: span var(--span-opp);   }
.rs-filterbar #filterArena    { grid-column: span var(--span-arena); }
.rs-filterbar #filterGameType { grid-column: span var(--span-type);  }
.rs-filterbar #filterHomeAway { grid-column: span var(--span-ha);    }
.rs-filterbar #filterPlayer   { grid-column: span var(--span-player);}
.rs-filterbar #filterUnitType { grid-column: span var(--span-unit);  }

/* Make form controls fill their grid cell */
#datesSelect,
#opponentSelect,
#arenaSelect,
#typeSelect,
#haSelect,
#playerSelect{
  width: 100%;
  max-width: 100%;
}

/* Unit buttons row inside the filter card */
#filterUnitType .unit-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Unit buttons (ES/PP/PK): default white, clean ring on active, no shadows */
#filterUnitType .unit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Unit buttons (ES/PP/PK): single source of truth */
#filterUnitType [data-unit] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;                 /* always white */
  color: var(--color-text);
  font: 600 0.9rem/1 var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  cursor: pointer;
  box-shadow: none !important;      /* kill any shadows */
  outline: none !important;         /* kill browser outlines */
}

#filterUnitType [data-unit].is-active,
#filterUnitType [data-unit][aria-pressed="true"] {
  background: #fff;                 /* stay white when selected */
  border-color: var(--color-secondary);
  border-width: 2px;                /* thicker green border = the “ring” */
  box-shadow: none !important;      /* no glow behind */
  outline: none !important;         /* ensure no overlapping outline */
}

/* Optional: remove default focus ring to avoid double outlines */
#filterUnitType [data-unit]:focus {
  outline: none !important;
  box-shadow: none !important;
}



/* ===================================================================
   Responsive (<= 900px): collapse nav, 2-col filter grid
   =================================================================== */
/* Removed responsive collapsing/wrapping: prefer pinch zoom + pan instead */

/* ===================================================================
   Panels (card) + table wrap margin
   =================================================================== */
.rs-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;

  /* ensure panels can consume remaining height under the sticky controls */
  flex: 1 1 auto;
  min-height: 0;
}

/* The content card itself fills the available space and IS the only scroller */
.rs-panel.is-active {
  display: flex;            /* vertical stack inside the card */
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;            /* allow child to shrink within viewport */
  overflow: visible;        /* let the window scroll */
}
.rs-panel.is-active > * {
  min-width: 0;
  max-width: 100%;
}


/* place the gap between the tabs underline and the table wrapper */
.rs-panel .gs-table-wrap{
  margin-top: var(--tabs-to-table-gap);
}

/* ===================================================================
   Tabs header (sticky inside panel, under header+filterbar)
   =================================================================== */
.rs-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Tab buttons (rectangular) */
.rs-tab {
  padding: 6px 12px;            /* ↓ was 10px 14px */
  border-radius: 6px;
  cursor: pointer;
  background: var(--panel);
  color: var(--color-text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-family: var(--font-ui, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-weight: 600;
  font-size: 1.02rem;           /* keep readable while shorter */
  letter-spacing: 0.01em;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.rs-tab[aria-selected="true"] {
  background: #fff;
  border-color: var(--color-secondary);
  border-width: 3px;
  box-shadow: none;
}

/* ===================================================================
   Viewport/scroll policy + scroller containment
   =================================================================== */
/* Lock the page viewport; no window scroll */
html, body {
  height: auto;
  overflow: auto;
}

/* Left nav already has its own scroll; keep it constrained to viewport */
/* nav no longer has its own scroll */
/* Table area already scrolls via .gs-table-wrap */

/* ===================================================================
   Filter Bar sizing guardrails (caps + horizontal overflow)
   =================================================================== */

/* Prevent the filterbar from creating a second row on narrow screens;
   if it overflows, allow a horizontal scrollbar instead. */
.rs-filterbar {
  overflow-x: auto;            /* allows horizontal scroll when needed */
}

/* Standardize control widths so they don't expand unpredictably.
   Adjust the min/max if you prefer slightly different bounds. */
.rs-filterbar select,
.rs-filterbar input[type="text"],
.rs-filterbar input[type="search"],
.rs-filterbar input[type="number"],
.rs-filterbar .rs-select,
.rs-filterbar .rs-input,
.rs-filterbar .rs-button,
.rs-filterbar .rs-control {
  min-width: 150px;
  max-width: 240px;
  width: 100%;
}

/* If any filter control is a flex child, prevent it from growing beyond the cap */
.rs-filterbar > * {
  flex: 0 0 auto;              /* no flex-grow beyond max-width */
}

/* Optional: keep labels from forcing growth if you use inline labels */
.rs-filterbar label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================================================================
   Filterbar shrink/overflow guards (intrinsic width + unit wrap)
   =================================================================== */

/* 1) Let native form controls actually shrink inside their grid cells */
.rs-filterbar .rs-field,
.rs-filterbar > * {
  min-width: 0;                 /* critical: allow grid items to shrink */
  overflow: hidden;             /* clip any internal overflow instead of overlapping */
}

.rs-filterbar select,
.rs-filterbar .rs-select,
.rs-filterbar input[type="text"],
.rs-filterbar input[type="search"],
.rs-filterbar input[type="number"],
.rs-filterbar .rs-input {
  min-width: 0;                 /* defeat intrinsic min-content width */
  width: 100%;                  /* fill the assigned grid span */
  max-width: 100%;
  display: block;               /* ensure width is respected */
}

/* Special case: Opponent is a <select multiple>, which tends to have a big intrinsic min-width */
#filterOpponent select[multiple],
#filterOpponent .rs-select[multiple] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}

/* 2) Unit buttons: allow wrapping so they don’t "eat" into Home/Away */
#filterUnitType .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;                     /* keep your spacing */
}
#filterUnitType .row > * {
  flex: 0 0 auto;               /* don’t stretch buttons weirdly */
}

/* (Optional safety) Keep neighboring cell from visually tucking under a wide control */
#filterHomeAway { position: relative; z-index: 1; }


/* Separate Tab Bar card, same style as filter bar */
.rs-tabbar{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: var(--filters-panel-gap);
}

/* Right-side Jump To inside the shared tab bar */
#tabBar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--rs-space-12);
}

/* Push Jump To to the right edge of the row */
.rs-jumpto {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--rs-space-8);
}

/* Basic select styling that matches your inputs */
.rs-jumpto select {
  height: 32px;
  padding: 0 var(--rs-space-12);
  border: 1px solid var(--rs-gray-300);
  border-radius: var(--rs-radius-8);
  background: var(--rs-surface);
  color: var(--rs-gray-900);
}

/* Hide utility (already used elsewhere) */
.is-hidden { display: none !important; }

/* Screen-reader only helper if not present already */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ================================================================
   Mobile/Tablet "pan-able canvas" (do not affect desktop)
   ================================================================ */
@media (max-width: 900px) {

  /* 1) Let the window scroll both directions */
  html, body {
    overflow: auto;              /* vertical + horizontal if wider than viewport */
  }

  /* 2) Unstick header, tabs, and nav so the whole page moves together */
  .rs-header { position: static; top: auto; }
  .rs-tabs   { position: static; top: auto; z-index: auto; }
  .rs-nav    { position: static; top: auto; max-height: none; overflow: visible; }

  /* 3) Keep the nav visible on mobile (override earlier "display:none") */
  .rs-nav { display: block; }

  /* 4) Make the app a wide canvas so phones can pan horizontally
        Use your existing max-width token as a fixed width here. */
  .rs-app {
    width: var(--content-max);   /* was max-width on desktop; now fixed width canvas */
    max-width: none;             /* ensure we don't shrink to viewport on phones */
    margin: 0;                   /* no centering on a narrow viewport; allow pan */
    grid-template-columns: var(--nav-w) 1fr; /* keep two columns side-by-side */
    grid-template-areas:
      "header header"
      "nav    main";
  }

  /* 5) Keep filter bar in its normal 100-col grid (no forced 2-col squeeze) */
  .rs-filterbar {
    grid-template-columns: repeat(var(--filter-cols), minmax(0, 1fr));
    overflow-x: visible;         /* its content will scroll with the page */
  }
}


/* === Panels: let the WINDOW scroll (avoid nested scroll traps) === */
.rs-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

/* === The sticky wrapper for FilterBar + TabBar === */
.rs-controls {
  position: static;
  top: auto;
  z-index: auto;
}

/* Keep spacing and separators consistent while stuck */
.rs-controls .rs-filterbar {
  margin-bottom: var(--filters-panel-gap);
}
.rs-controls .rs-tabbar {
  margin: 0 0 var(--tabs-to-table-gap) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

@media (max-width: 900px) {
  /* Make the whole Game → Trends view pan with the page */
  #panel-game.rs-panel { overflow: visible; }
}