/* Global mobile responsive overrides.
 *
 * Applies at viewport widths below 768px (Tailwind md breakpoint).
 *
 * Most templates hardcode desktop grids via inline styles like
 *   grid-template-columns: 1fr 360px
 *   grid-template-columns: repeat(8, 1fr)
 * which are unusable on phones. These rules catch the common patterns
 * via attribute selectors and force them to stack or wrap.
 *
 * Pages that genuinely need a different mobile layout (e.g. future
 * planner that benefits from horizontal scroll instead of stacking)
 * should opt out by using a class instead of inline style, then
 * override the class in their own stylesheet.
 */

@media (max-width: 767px) {

  /* ---- two-column "main + sidebar" layouts -> stack vertically ---- */
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns: 460px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- high-column inline grids -> stack or wrap ---- */
  [style*="grid-template-columns: repeat(8, 1fr)"],
  [style*="grid-template-columns: repeat(7, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Tailwind grid-cols-N (no responsive prefix) ---- */
  .grid.grid-cols-3:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.grid-cols-4:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.grid-cols-5:not([class*=":grid-cols-"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- wide fixed-width table rows -> horizontal scroll ---- */
  .row-grid,
  .term-row,
  .rank-row,
  .course-row,
  .rubric-row {
    min-width: 720px;
  }
  /* Wrap any element that contains a .row-grid / .term-row / etc.
     in a scrollable container.  Templates use a generic wrapper div
     around the table header + rows, so target the immediate parent
     by walking up via a sibling selector trick — simpler to set
     overflow on the closest semantic ancestor that templates already
     have: section, .app-card. */
  section .row-grid,
  section .term-row,
  section .rank-row,
  section .course-row,
  section .rubric-row,
  .app-card .row-grid,
  .app-card .term-row,
  .app-card .rank-row,
  .app-card .course-row,
  .app-card .rubric-row {
    /* row min-width handled above; the parent section / card
       needs overflow-x:auto */
  }
  section:has(.row-grid),
  section:has(.term-row),
  section:has(.rank-row),
  section:has(.course-row),
  section:has(.rubric-row),
  .app-card:has(.row-grid),
  .app-card:has(.term-row),
  .app-card:has(.rank-row),
  .app-card:has(.course-row),
  .app-card:has(.rubric-row) {
    overflow-x: auto;
  }

  /* ---- bottom tabbar safety: don't let content hide behind it ---- */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  /* ---- container padding tighter on phones ---- */
  main.container,
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---- larger tap targets ---- */
  .btn-sm,
  button.btn-sm,
  a.btn-sm {
    min-height: 38px;
  }

  /* ---- text size adjust to prevent iOS zoom on input focus ---- */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- hero stat cards (.app-card.p-4) tighter on small screens ---- */
  .app-card.p-4 {
    padding: 12px;
  }
}