/* =========================================================
   Mobile pass — TEST ONLY on 2025-schedule.html
   ========================================================= */

/* ----- Tighter top bar (phone) ----- */
@media (max-width: 767px) {
  body.mobile-pass-2025 {
    --topbar-h: 46px;
  }
  body.mobile-pass-2025 .app-topbar {
    height: var(--topbar-h);
    padding: 0 0.55rem 0 0.65rem;
    gap: 0.4rem;
  }
  body.mobile-pass-2025 .app-topbar-title {
    font-size: 0.82rem;
    max-width: 42vw;
  }
  body.mobile-pass-2025 .app-topbar-sub {
    display: none !important;
  }
  body.mobile-pass-2025 .app-topbar-theme {
    padding: 0.12rem;
  }
  body.mobile-pass-2025 .app-topbar-theme button {
    font-size: 0.65rem;
    padding: 0.22rem 0.45rem;
    min-height: 28px;
  }
  body.mobile-pass-2025 .app-mobile-menu {
    width: 34px;
    height: 34px;
  }
  body.mobile-pass-2025 .app-main {
    padding: 0.65rem 0.55rem 2rem;
  }
  /* Page chrome inside 2025 */
  body.mobile-pass-2025 .app-main h1 {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }
  body.mobile-pass-2025 .page-actions {
    gap: 0.3rem;
    margin-bottom: 0.65rem;
  }
  body.mobile-pass-2025 .page-action-btn {
    font-size: 0.68rem;
    padding: 0.35rem 0.55rem;
    min-height: 34px;
  }
}

/* ----- Larger card tab pills ----- */
body.mobile-pass-2025 .team-card .flex.border-b,
body.mobile-pass-2025 .team-card .card-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0 0.35rem;
  scrollbar-width: none;
  border-bottom: 1px solid var(--main-border) !important;
  margin-bottom: 0.65rem !important;
}
body.mobile-pass-2025 .team-card .flex.border-b::-webkit-scrollbar {
  display: none;
}
body.mobile-pass-2025 .card-tab-btn {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 1px solid var(--main-border) !important;
  border-bottom-width: 1px !important;
  background: var(--main-surface-2) !important;
  color: var(--main-text-muted) !important;
  white-space: nowrap !important;
}
body.mobile-pass-2025 .card-tab-btn.border-blue-500,
body.mobile-pass-2025 .card-tab-btn.text-blue-600,
body.mobile-pass-2025 .card-tab-btn.is-active {
  background: var(--link) !important;
  color: #fff !important;
  border-color: var(--link) !important;
}

@media (max-width: 767px) {
  body.mobile-pass-2025 .card-tab-btn {
    min-height: 44px !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
  }
  body.mobile-pass-2025 .team-header {
    min-height: 52px !important;
    padding: 0.7rem 0.85rem !important;
  }
  body.mobile-pass-2025 .team-header .font-semibold.text-lg {
    font-size: 0.95rem !important;
  }
}

/* ----- Tables: horizontal scroll + sticky first text column ----- */
body.mobile-pass-2025 .mp-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--main-border);
  border-radius: 10px;
  margin: 0.5rem 0 0.85rem;
  background: var(--main-surface);
  max-width: 100%;
}
body.mobile-pass-2025 .mp-table-scroll table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  margin: 0 !important;
}
body.mobile-pass-2025 .mp-table-scroll th,
body.mobile-pass-2025 .mp-table-scroll td {
  white-space: nowrap;
  padding: 0.5rem 0.65rem !important;
  font-size: 0.78rem;
}
/* Sticky team name column (usually 2nd col after RK) */
body.mobile-pass-2025 .mp-table-scroll th:nth-child(2),
body.mobile-pass-2025 .mp-table-scroll td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--main-surface);
  box-shadow: 1px 0 0 var(--main-border);
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.mobile-pass-2025 .mp-table-scroll thead th:nth-child(2) {
  background: var(--table-head);
  z-index: 3;
}
body.mobile-pass-2025 .mp-table-scroll tr.champion-row td:nth-child(2) {
  background: var(--champion-bg);
}
/* If first col is team name (no RK) */
body.mobile-pass-2025 .mp-table-scroll.mp-sticky-first th:first-child,
body.mobile-pass-2025 .mp-table-scroll.mp-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--main-surface);
  box-shadow: 1px 0 0 var(--main-border);
}
body.mobile-pass-2025 .mp-table-scroll.mp-sticky-first thead th:first-child {
  background: var(--table-head);
  z-index: 3;
}

@media (max-width: 767px) {
  body.mobile-pass-2025 .mp-table-scroll table {
    min-width: 32rem;
  }
  body.mobile-pass-2025 .mp-table-scroll th,
  body.mobile-pass-2025 .mp-table-scroll td {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.72rem;
  }
  body.mobile-pass-2025 .mp-table-scroll th:nth-child(2),
  body.mobile-pass-2025 .mp-table-scroll td:nth-child(2) {
    max-width: 7rem;
  }
  /* Season note a bit tighter */
  body.mobile-pass-2025 .bg-blue-50 {
    font-size: 0.8rem !important;
    padding: 0.65rem 0.75rem !important;
  }
  /* Playoff mini tables inside cards */
  body.mobile-pass-2025 .team-card table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Hint strip above wide tables */
body.mobile-pass-2025 .mp-scroll-hint {
  display: none;
  font-size: 0.68rem;
  color: var(--main-text-muted);
  margin: 0.15rem 0 0.25rem;
}
@media (max-width: 767px) {
  body.mobile-pass-2025 .mp-scroll-hint {
    display: block;
  }
}