/* ============================================================================
   MOBILE POLISH (2026-07-07) — page-level mobile refinements, loaded AFTER
   the legacy mobile stylesheets so it wins ties. Scope: ≤768px only.
   Philosophy: mobile renders the SAME pages as the web, tidied for a
   narrow viewport — not a separate product.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Global type scale: desktop headings are oversized on phones ── */
  .mobile-content-wrapper h1 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
  .mobile-content-wrapper h2 {
    font-size: 17px !important;
  }

  /* ── Page-header action clusters: one swipeable chip row instead of
       three stacked rows of buttons ── */
  .play-leads-container .flex.justify-between .flex.gap-2,
  .play-leads-container > .flex.gap-2 {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .play-leads-container .flex.gap-2::-webkit-scrollbar {
    display: none;
  }
  /* header wrapper must allow the scroll row to take the full width */
  .play-leads-container > .flex.justify-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .play-leads-container .flex.justify-between .flex.gap-2 > button {
    flex-shrink: 0;
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
  }

  /* ── Play Leads: filters as a tight 2-column grid; search spans full ── */
  .play-leads-container .grid.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .play-leads-container .grid.md\:grid-cols-4 > div:first-child {
    grid-column: 1 / -1;
  }
  .play-leads-container .grid.md\:grid-cols-4 input,
  .play-leads-container .grid.md\:grid-cols-4 select {
    font-size: 13.5px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* grid children must be allowed to shrink (date inputs overflow otherwise) */
  .mobile-content-wrapper .grid > *,
  .play-leads-container .grid > * {
    min-width: 0;
  }
  .mobile-content-wrapper .grid input,
  .mobile-content-wrapper .grid select {
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* ── Generic filter panels (most pages use a white card with a
       grid of inputs): tighten to 2 columns on phones ── */
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-3,
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-4,
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-5,
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Stat-card rows keep breathing but stack 2-up instead of 1-up */
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-3.gap-4,
  .mobile-content-wrapper .grid.grid-cols-1.md\:grid-cols-4.gap-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Cards: soften — match the F2P page-skin look everywhere ── */
  .mobile-content-wrapper .rounded-lg.shadow,
  .mobile-content-wrapper .rounded-lg.shadow-md {
    border-radius: 14px !important;
    border: 1px solid #e9ebef;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px -6px rgba(16,24,40,.08) !important;
  }

  /* ── Checkboxes/radios must NOT stretch full width (legacy input
       rules force width on all inputs, which stacked toggle labels) ── */
  .mobile-content-wrapper input[type="checkbox"],
  .mobile-content-wrapper input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    flex-shrink: 0;
  }

  /* ── Travel Leads: the desktop header (gradient quick-action cards +
       right-aligned bulk buttons) collapses into two swipeable chip
       rows; the Lead/Client toggle becomes a full-width segmented
       control. Scoped via the router's data-active-tab attribute. ── */
  [data-active-tab="leads"] .flex.items-start.justify-between.gap-3 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  [data-active-tab="leads"] .flex.items-start.justify-between.gap-3 > .flex.gap-2,
  [data-active-tab="leads"] .flex.gap-1.flex-wrap.justify-end {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  [data-active-tab="leads"] .flex.items-start.justify-between.gap-3 > .flex.gap-2::-webkit-scrollbar,
  [data-active-tab="leads"] .flex.gap-1.flex-wrap.justify-end::-webkit-scrollbar {
    display: none;
  }
  /* gradient cards → compact pills: hide subtitles, tame emoji */
  [data-active-tab="leads"] button.bg-gradient-to-r {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    flex-shrink: 0;
  }
  [data-active-tab="leads"] button.bg-gradient-to-r .text-xs.opacity-80 {
    display: none;
  }
  [data-active-tab="leads"] button.bg-gradient-to-r .text-lg {
    font-size: 14px !important;
  }
  /* bulk chips */
  [data-active-tab="leads"] .flex.gap-1.flex-wrap.justify-end > button {
    flex-shrink: 0;
    border-radius: 999px !important;
    font-size: 12px !important;
    padding: 7px 13px !important;
    min-height: 0 !important;
  }
  /* Lead/Client toggle: full-width segmented */
  [data-active-tab="leads"] .flex.bg-gray-100.rounded-lg.p-1 {
    width: 100%;
  }
  [data-active-tab="leads"] .flex.bg-gray-100.rounded-lg.p-1 > button {
    flex: 1;
    justify-content: center;
  }

  /* ── Travel Leads: the lead table becomes true cards on mobile.
       Column order: Contact / Event / Assignment / Status / Temp /
       Value / Actions — self-describing without headers. ── */
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container { overflow-x: visible !important; }
  /* the wrapper chain shrink-fits around the table's old intrinsic
     width — force it open so cards span the screen */
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container,
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .overflow-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table,
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody {
    display: block;
    width: 100%;
  }
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > thead { display: none; }
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr {
    display: block;
    background: #fff;
    border: 1px solid #e9ebef;
    border-radius: 14px;
    margin: 0 0 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px -6px rgba(16,24,40,.08);
  }
  .dark :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr {
    background: #1f2937; border-color: #374151;
  }
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr > td {
    display: block;
    padding: 3px 0 !important;
    border: none !important;
    white-space: normal !important;
    max-width: none !important;
  }
  /* status + temp chips sit inline together */
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr > td:nth-child(4),
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr > td:nth-child(5) {
    display: inline-block;
    margin-right: 8px;
  }
  /* actions row: separated, horizontal */
  :is([data-active-tab="leads"], [data-active-tab="myactions"]) .table-container > table > tbody > tr > td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 1px dashed #e5e7eb !important;
  }

  /* ── Coach Repository: hide desktop bulk operations on phones
       (Bulk Map / Bulk Delete / Reallocate — children 3,4,5 of the
       header action row); compact the rest into pills. ── */
  [data-active-tab="play-coach-repository"] .flex.flex-wrap.gap-2 > button:nth-child(3),
  [data-active-tab="play-coach-repository"] .flex.flex-wrap.gap-2 > button:nth-child(4),
  [data-active-tab="play-coach-repository"] .flex.flex-wrap.gap-2 > button:nth-child(5) {
    display: none;
  }
  [data-active-tab="play-coach-repository"] .flex.flex-wrap.gap-2 > button {
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
  }

  /* ── Travel Leads: mobile IS Lead View — the Lead/Client toggle card
       is desktop-only (Client View unusable on a phone), and it was
       sticky-eating 340px of every screen. ── */
  [data-active-tab="leads"] .lead-client-toggle-container {
    display: none !important;
  }
  /* Filter fields: 2 per row, search spanning the full width. Kills the
     capped-width Period box (LM/CM/LW checkboxes were wrapping one per
     line inside a max-w-[130px] container) and the Status/Event fields
     bleeding past the right edge. */
  [data-active-tab="leads"] .filters-search-container > .flex.flex-wrap.gap-2 > div {
    flex: 1 1 calc(50% - 6px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  [data-active-tab="leads"] .filters-search-container > .flex.flex-wrap.gap-2 > div:first-child {
    flex-basis: 100% !important;
  }
  [data-active-tab="leads"] .filters-search-container select,
  [data-active-tab="leads"] .filters-search-container input:not([type="checkbox"]):not([type="radio"]):not([type="date"]) {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* period checkbox group: the page's Tailwind build lacks .grid-cols-3,
     so the six period toggles (T/Y/LW/CW/LM/CM) stacked one per line —
     flow them as a wrapping chip row instead */
  [data-active-tab="leads"] .filters-search-container .grid.grid-cols-3 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  /* period checkboxes: natural size, three per row */
  [data-active-tab="leads"] .filters-search-container input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
  }
  /* date-range row: calendar icon + both dates inline */
  [data-active-tab="leads"] .filters-search-container input[type="date"],
  [data-active-tab="leads"] .mt-3 input[type="date"] {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }

  /* ── Coach Repository: filters as a 2-col grid (was one long single
       column), search spanning both columns. ── */
  [data-active-tab="play-coach-repository"] .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  [data-active-tab="play-coach-repository"] .grid.grid-cols-1.md\:grid-cols-2 > .md\:col-span-2 {
    grid-column: 1 / -1;
  }
  [data-active-tab="play-coach-repository"] .rounded-xl.shadow-lg.p-6 {
    padding: 14px !important;
  }

  /* ── Modals must overlay the bottom tab bar (nav is z-1100; some
       modals are z-[60]) and their footers must stay reachable ── */
  div.fixed.inset-0[class*="z-[6"],
  div.fixed.inset-0[class*="z-50"],
  div.fixed.inset-0[class*="z-40"] {
    z-index: 9998 !important;
  }

  /* ── Detail modals (lead detail & friends): the tab strip
       (.flex.space-x-8) wraps into 3-4 rows on phones — make it one
       swipeable row; compact modal padding. ── */
  div[class*="fixed"][class*="inset-0"] .flex.space-x-8 {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px !important;
  }
  div[class*="fixed"][class*="inset-0"] .flex.space-x-8::-webkit-scrollbar { display: none; }
  div[class*="fixed"][class*="inset-0"] .flex.space-x-8 > * {
    flex-shrink: 0;
    margin-left: 0 !important;
    white-space: nowrap;
  }

  /* ── Pagination rows and toolbars shouldn't wrap awkwardly ── */
  .mobile-content-wrapper .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 8px;
  }
}