/* ============================================================
   Signal Cup Dashboard — Responsive Patch (additive, non-invasive)
   ------------------------------------------------------------
   This file ONLY adds responsive overrides for small screens.
   It does NOT modify the compiled React bundle (index-NEWFIX.js)
   or the main stylesheet. Injected via index.html as an extra
   <link>. If anything here fails, it degrades gracefully — the
   app keeps working as before.
   ============================================================ */

/* ---------- Global base: never horizontal overflow ---------- */
html, body, #root {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}

/* ============================================================
   MOBILE (<= 640px) — phones
   ============================================================ */
@media (max-width: 640px) {

  /* Fixed 3/4 column grids -> collapse to 2, then 1 on very small */
  .grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.grid-cols-4.divide-x { grid-template-columns: repeat(2, 1fr); }

  /* Stats divider rows -> remove vertical dividers, add spacing */
  .grid-cols-4.divide-x > * {
    border-right: none !important;
    border-left: none !important;
    padding: 0.5rem 0;
  }

  /* Header bars: shrink horizontal padding */
  [class*="px-6"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce section card padding on small screens */
  [class*="p-8"] { padding: 1.25rem !important; }
  [class*="p-6"] { padding: 1rem !important; }

  /* Ensure inputs/buttons use full available width */
  input, select, textarea, button {
    max-width: 100%;
  }

  /* Wrap button rows instead of overflowing */
  [class*="flex items-center justify-between"],
  [class*="flex items-center justify-end"],
  [class*="flex items-center gap-4"],
  [class*="flex items-center gap-3"] {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Header title + actions must wrap on phones */
  .border-b.flex.items-center { flex-wrap: wrap; }
  .flex.items-center.gap-4 { flex-wrap: wrap; }

  /* Page header rows (title left, buttons right) */
  [class*="py-4 flex items-center justify-between"] {
    align-items: flex-start;
  }

  /* Keep tables scrollable horizontally instead of breaking layout */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .table { display: block; overflow-x: auto; }
}

/* ============================================================
   SMALL PHONES (<= 400px) — collapse 2-col grids to 1
   ============================================================ */
@media (max-width: 400px) {
  .grid.grid-cols-2 { grid-template-columns: 1fr; }
  .grid.grid-cols-3 { grid-template-columns: 1fr; }
  .grid.grid-cols-4 { grid-template-columns: 1fr; }
  .grid-cols-4.divide-x { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLETS (641px - 1024px)
   ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 4-col grids -> 2 cols on tablets */
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.grid-cols-4.divide-x { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Bigger tap targets & legibility on touch devices
   ============================================================ */
@media (pointer: coarse) {
  button, [role="button"], select, .cursor-pointer {
    min-height: 40px;
  }
}

/* ---------- Fix for the stats row on tablets ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-cols-4.divide-x > * {
    border-right: none !important;
  }
}