/* Crew-only mobile refinements.
   Scoped by .is-crew-shell so admin/participant layouts stay unchanged. */
@media (max-width: 767.98px) {
  body.is-crew-shell .app-main {
    padding: 0.75rem;
    padding-bottom: 4.5rem;
  }

  body.is-crew-shell .app-main .container {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    max-width: 100% !important;
  }

  body.is-crew-shell .app-main h1.text-3xl,
  body.is-crew-shell .app-main h1.text-2xl {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  body.is-crew-shell .app-main h2.text-xl,
  body.is-crew-shell .app-main h2.text-lg {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }

  body.is-crew-shell .app-main .btn,
  body.is-crew-shell .app-main button,
  body.is-crew-shell .app-main a.px-2,
  body.is-crew-shell .app-main a.px-2\.5,
  body.is-crew-shell .app-main a.px-3,
  body.is-crew-shell .app-main a.px-4 {
    min-height: 2.4rem;
  }

  body.is-crew-shell .app-main input[type="text"],
  body.is-crew-shell .app-main input[type="search"],
  body.is-crew-shell .app-main input[type="email"],
  body.is-crew-shell .app-main select {
    min-height: 2.5rem;
    font-size: 16px !important;
  }

  body.is-crew-shell .app-main .grid,
  body.is-crew-shell .app-main [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* Keep bottom mobile tabbar horizontal (4 items) */
  body.is-crew-shell .mobile-tabbar-grid.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.is-crew-shell .mobile-tabbar-nav a {
    min-height: 3.25rem;
  }

  body.is-crew-shell .app-main .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.is-crew-shell .app-main table {
    min-width: 740px;
    font-size: 13px;
  }

  body.is-crew-shell .app-main th,
  body.is-crew-shell .app-main td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    vertical-align: top;
  }

  body.is-crew-shell .app-main summary {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}