/* Mobile optimization overlay — SoccerRecruitIQ
   Loaded AFTER index-kuXG9HCc.css so these rules win specificity ties. */

/* 1. Ensure minimum 44px tap targets on interactive controls on small screens */
@media (max-width: 767px) {
  /* Buttons, tab triggers, dropdown items, table row buttons */
  button,
  [role="tab"],
  [role="menuitem"],
  [role="option"],
  a.inline-flex,
  a.flex,
  .cursor-pointer {
    min-height: 44px;
  }
  /* Small "chip" buttons — only enforce if they are actionable */
  button.h-8,
  button.h-9 {
    min-height: 40px;
  }
  /* Table row buttons and links: give them breathing room */
  tbody button,
  tbody a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* 2. Tighter table density on small screens — reduce cell padding so more fits */
  table th,
  table td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.875rem;
  }
  /* School column should stay left-aligned and remain readable */
  table th:first-child,
  table td:first-child {
    padding-left: 0.75rem !important;
  }

  /* 3. Prevent horizontal overflow on wide tables — allow horizontal scroll if needed */
  table {
    display: table;
    max-width: 100vw;
  }
  /* Player detail / roster cards: stack in single column on mobile */
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* 4. Reduce heading sizes for tight screens */
  h1 { font-size: 1.5rem !important; line-height: 2rem !important; }
  h2 { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  h3 { font-size: 1.125rem !important; line-height: 1.5rem !important; }

  /* 5. Full-width cards & sheets on mobile */
  .max-w-lg,
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl {
    max-width: 100vw !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* 6. Sticky header safety: keep top bar tap-friendly */
  header, .sticky {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* 7. Player roster rows on team detail: turn table rows into cards on very small screens */
  @media (max-width: 480px) {
    /* Only apply to roster tables (heuristic: tables inside a card body) */
    section table tbody tr,
    .space-y-4 table tbody tr {
      display: block;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 0.5rem 0;
    }
    section table tbody td,
    .space-y-4 table tbody td {
      display: inline-block;
      padding: 0.15rem 0.5rem !important;
      border: none;
    }
    /* Team list table stays as table (it has hidden columns anyway) */
  }

  /* 8. Filter chips row: enable horizontal scroll if too many */
  [role="tablist"],
  .flex.gap-2.overflow-x-auto,
  .flex.flex-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

/* 9. On phones with really narrow widths (<360px), collapse to essentials */
@media (max-width: 360px) {
  table th,
  table td {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    font-size: 0.8rem;
  }
  /* Aggressively hide anything explicitly labeled with .hide-xs */
  .hide-xs { display: none !important; }
}

/* 10. Global: safe-area insets for iPhone notch */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 11. Score pill font size — force smaller than tier badges on all viewports.
   Tier badges use inline fontSize: 0.7rem (11.2px). Score pills should be smaller.
   Targeting the data-testid pattern uniquely identifies overview + detail score pills. */
[data-testid^="score-"] > span {
  font-size: 0.6rem !important;
  line-height: 1 !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
}
@media (max-width: 767px) {
  [data-testid^="score-"] > span {
    font-size: 0.65rem !important;
  }
}

/* ============================================================
   12. Team Detail Page — Mobile Optimization Pass
   SCOPED to detail page ONLY via body:has([data-testid="link-back"])
   which uniquely identifies the detail route ("All Programs" back link).
   ============================================================ */

@media (max-width: 767px) {
  /* ---- 12a. Detail-page header row — wrap when tight ---- */
  body:has([data-testid="link-back"]) .flex.items-center.gap-3 {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem !important;
  }

  /* ---- 12b. KPI stat cards — tighter padding + smaller big numbers ---- */
  body:has([data-testid="link-back"]) .grid.grid-cols-2 > .rounded-lg,
  body:has([data-testid="link-back"]) .grid.grid-cols-2 > .rounded-xl,
  body:has([data-testid="link-back"]) .grid.grid-cols-2 > .rounded-md {
    padding: 0.75rem !important;
  }
  body:has([data-testid="link-back"]) .grid.grid-cols-2 .text-3xl,
  body:has([data-testid="link-back"]) .grid.grid-cols-2 .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.75rem !important;
  }

  /* ---- 12c. Sr/Gr Departures by Position 4-col cards ---- */
  body:has([data-testid="link-back"]) .grid.grid-cols-4 > * {
    padding: 0.5rem 0.25rem !important;
  }
  body:has([data-testid="link-back"]) .grid.grid-cols-4 .text-2xl,
  body:has([data-testid="link-back"]) .grid.grid-cols-4 .text-3xl {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
  }

  /* ---- 12d. Section cards padding ---- */
  body:has([data-testid="link-back"]) section > .rounded-lg,
  body:has([data-testid="link-back"]) section > .rounded-xl,
  body:has([data-testid="link-back"]) .space-y-4 > .rounded-lg,
  body:has([data-testid="link-back"]) .space-y-4 > .rounded-xl,
  body:has([data-testid="link-back"]) .space-y-6 > .rounded-lg,
  body:has([data-testid="link-back"]) .space-y-6 > .rounded-xl {
    padding: 0.875rem !important;
  }

  /* ---- 12e. Full Roster table — hide # column, compact cells ---- */
  /* Detail-page roster is uniquely identified: table.text-xs inside .bg-card */
  body:has([data-testid="link-back"]) .bg-card table.text-xs thead th:first-child,
  body:has([data-testid="link-back"]) .bg-card table.text-xs tbody td:first-child {
    display: none !important;
  }
  body:has([data-testid="link-back"]) .bg-card table.text-xs th,
  body:has([data-testid="link-back"]) .bg-card table.text-xs td {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* ---- 12f. Likely Departing Players list ---- */
  body:has([data-testid="link-back"]) .grid.gap-1\.5 > * {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.85rem !important;
  }

  /* ---- 12g. Player search + dropdown row spacing ---- */
  body:has([data-testid="link-back"]) [data-testid="input-player-search"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Very narrow phones (<380px) — further compaction, detail page only */
@media (max-width: 380px) {
  body:has([data-testid="link-back"]) .grid.grid-cols-4 > * {
    padding: 0.375rem 0.15rem !important;
  }
  body:has([data-testid="link-back"]) .grid.grid-cols-4 .text-2xl,
  body:has([data-testid="link-back"]) .grid.grid-cols-4 .text-3xl {
    font-size: 1.1rem !important;
  }
  body:has([data-testid="link-back"]) .bg-card table.text-xs th,
  body:has([data-testid="link-back"]) .bg-card table.text-xs td {
    padding: 0.3rem 0.35rem !important;
    font-size: 0.75rem !important;
  }
}