/* Raycin Stats — mobile/responsive overrides.
 * Loaded after stats.css. Targets phones + small tablets.
 * Key fixes: tables become horizontally scrollable; the tracks page's
 * fixed master-detail height collapses cleanly; long sticky sidebars
 * un-stick; nav rows scroll horizontally instead of multi-line wrapping.
 */

/* ── Tablet & smaller (<=900px) — existing breakpoints stack the grid; we add: ── */
@media (max-width: 900px) {
  .rvs-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Section nav (Home / Tracks / Cars / Lap Times / Live / etc.) becomes scrollable
   * instead of wrapping to 3+ lines that push content way down the page. */
  .rvs-secnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .rvs-secnav a { flex: 0 0 auto; }

  /* Left nav inside the sidebar — list expands rather than scrolls awkwardly */
  .rvs-cats { max-height: 260px; }

  /* Tracks page: master-detail layout uses calc(100vh - 340px) which goes
   * negative or tiny on a phone. Let it size naturally. */
  .tracks-layout {
    height: auto !important;
    min-height: 0 !important;
  }
  .track-list-panel { max-height: 60vh; }
  .track-map-container { height: 55vh !important; min-height: 280px; }

  /* Track-list toolbar dropdowns shouldn't share one row when cramped */
  .tracks-toolbar .track-list-filters { gap: 6px; }
  .tracks-toolbar #trk-search { flex: 1 1 100%; }
  .cr-select { flex: 1 1 100%; }

  /* Tables stay as proper tables (so columns line up); the PARENT scrolls
   * horizontally when there isn't room. display:block on a table breaks the
   * column model and visually collapses everything into ~2 cells. */
  .panel,
  .rvs-card2,
  .rv-pricewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rvs-lb,
  .cr-table,
  .rv-price-table {
    min-width: 520px;
  }
  .rvs-lb thead th,
  .cr-table thead th { white-space: nowrap; }
}

/* ── Phone (<=620px) ── */
@media (max-width: 620px) {
  .rvs-wrap {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .rvs-title,
  .page-title { font-size: 19px; }

  /* Cards grid — keep 2 columns where it still works, otherwise 1 */
  .rvs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .rvs-card-title { font-size: 13px; }
  .rvs-best-t { font-size: 13px; }
  .rvs-card-stats { padding: 6px 0; gap: 4px; }
  .rvs-card-stats span { font-size: 8px; }
  .rvs-card-stats b { font-size: 12px; }
  .rvs-card-body { padding: 9px 10px; gap: 6px; }

  /* Stat boxes — go full-width 2-col already at 700px, then make them snug */
  .stat-box { padding: 10px 12px; }
  .stat-value { font-size: 22px; }

  /* Home server card — flex-wrap so Connect button sits on its own line cleanly */
  .home-server-card { padding: 12px 14px; }
  .server-status-row { gap: 10px; }
  .server-name-big { font-size: 17px; }
  .btn-green,
  .btn-gold {
    margin-left: 0;
    flex: 1 1 100%;
    text-align: center;
  }

  /* Track detail panel — hero name + meta tighten up */
  .track-detail-name { font-size: 18px; }
  .track-detail-info { padding: 12px 14px; gap: 12px; }
  .track-map-container { height: 45vh !important; min-height: 240px; }

  /* H2H side-by-side columns stack */
  .h2h-row { flex-direction: column; gap: 8px; align-items: stretch; }
  .h2h-col { min-width: 0; }
  .h2h-vs { padding: 0; text-align: center; }
  .h2h-score { gap: 1rem; padding: 0.5rem 0; }
  .h2h-num { font-size: 1.8rem; }

  /* Bar-chart label column dominates on phones; cut its width */
  .bar-row { grid-template-columns: 100px 1fr 60px; gap: 6px; }
  .bar-label { font-size: 12px; }
  .bar-count { font-size: 11px; }

  /* Tag-filter family chips — tighter */
  .rvs-tag-families { gap: 4px 10px; }
  .rvs-tag-toggle { padding: 2px 8px; font-size: 11px; }

  /* Section nav pills slimmer */
  .rvs-secnav a { padding: 6px 10px; font-size: 12px; }

  /* Tag-manager group cards single-column */
  .rtm-tag-grid { grid-template-columns: 1fr; }
  .rtm-header { gap: 12px; }

  /* Bulk action bar at bottom — let buttons wrap onto multiple rows */
  .rtb-action-bar { padding: 10px 14px; gap: 8px; }
  .rtb-bar-row,
  .rtb-op-row { gap: 8px; }
  .rtb-apply { flex: 1 1 100%; padding: 10px; }
}

/* ── Small phone (<=420px) ── */
@media (max-width: 420px) {
  .rvs-grid { grid-template-columns: 1fr; }
  .rvs-title,
  .page-title { font-size: 17px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 20px; }
  /* Hide secondary inline meta on the smallest screens to keep cards uncluttered */
  .rvs-card-img.noimg::after { font-size: 11px; }
  .track-item-meta { font-size: 10px; }
}