/* ═══════════════════════════════════════════════════
   PIGOPS Mobile Polish v1
   Comprehensive mobile fixes for all PigOps pages.
   Targets inline-styled grids, tables, cards, nav.
   ═══════════════════════════════════════════════════ */

@media (max-width: 820px) {
  /* ───── NAV BAR ───── */
  nav[style*="sticky"] {
    padding: 8px 10px !important;
  }
  nav[style*="sticky"] > div {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    scrollbar-width: none;
  }
  nav[style*="sticky"] > div::-webkit-scrollbar { display: none; }
  nav[style*="sticky"] a[style*="padding"] {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ───── PAGE HEADER ───── */
  div[style*="PIGOPS COMMAND CENTER"],
  div[style*="minHeight"] > div:first-child h1 {
    font-size: 22px !important;
  }

  /* ───── TAB BAR (centrum) ───── */
  div[style*="gap: 0"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  div[style*="gap: 0"]::-webkit-scrollbar { display: none; }
  div[style*="gap: 0"] > button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
  }

  /* ───── GRIDS → stacking ───── */
  div[style*="grid-template-columns"],
  div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-col for small KPI cards */
  div[style*="minmax(140px"],
  div[style*="minmax(160px"],
  div[style*="minmax(120px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ───── COUNTRY CARDS ───── */
  div[style*="minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Each card smaller */
  div[style*="minmax(200px"] > a,
  div[style*="minmax(200px"] > div {
    padding: 12px !important;
  }

  /* ───── ALERT CARDS ───── */
  a[style*="borderLeft: \"3px"],
  div[style*="borderLeft: \"3px"],
  a[style*="border-left"],
  div[style*="border-left: 3px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  /* ───── CALCULATOR ───── */
  div[style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Calculator input grid (2-col → 1-col) */
  div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ───── BENCHMARK BARS ───── */
  div[style*="minmax(180px"] {
    grid-template-columns: 1fr !important;
  }

  /* ───── BIG NUMBERS ───── */
  div[style*="fontSize: 36"],
  div[style*="font-size: 36px"],
  span[style*="fontSize: 36"],
  div[style*="fontSize: 48"],
  span[style*="fontSize: 48"] {
    font-size: 24px !important;
  }

  /* ───── TABLES ───── */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw !important;
    font-size: 11px !important;
  }
  table th, table td {
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* ───── MAIN CONTENT PADDING ───── */
  div[style*="padding: \"28px 40px\""],
  div[style*="padding: 28px"],
  div[style*="padding: \"20px 30px\""],
  div[style*="padding: 20px 30px"],
  div[style*="padding: \"0 40px\""],
  main[style*="padding"],
  div[style*="maxWidth: 1500px"],
  div[style*="max-width: 1500px"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ───── SECTION TITLES ───── */
  div[style*="letterSpacing"] {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  /* ───── FOOTER / BOTTOM NAV ───── */
  div[style*="position: fixed"][style*="bottom: 0"],
  div[style*="position: \"fixed\""][style*="bottom"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  div[style*="position: fixed"][style*="bottom: 0"] a,
  div[style*="position: fixed"][style*="bottom: 0"] button {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* ───── PIGOPS SPECIFIC PAGES ───── */
  /* Transport page — make grid stack */
  .transport-grid, div[style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* Mapa page — sidebar smaller */
  div[style*="width: 350px"],
  div[style*="width: \"350px\""],
  div[style*="minWidth: 320px"],
  div[style*="min-width: 320px"] {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100vw !important;
  }

  /* Vademecum — scroll containers */
  div[style*="overflow-x: auto"],
  div[style*="overflowX: \"auto\""] {
    -webkit-overflow-scrolling: touch;
  }

  /* ───── HIDE SPARKLINES ON VERY SMALL ───── */
  /* Keep sparklines but make them smaller */
  svg[style*="sparkline"],
  svg[width="100"] {
    width: 60px !important;
  }

  /* ───── MODALS / POPUPS ───── */
  div[style*="position: fixed"][style*="inset: 0"] > div,
  div[style*="position: \"fixed\""][style*="inset"] > div {
    width: calc(100vw - 20px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  div[style*="minmax(200px"],
  div[style*="minmax(160px"],
  div[style*="minmax(140px"] {
    grid-template-columns: 1fr !important;
  }
  
  nav[style*="sticky"] a[style*="padding"] {
    font-size: 10px !important;
    padding: 5px 8px !important;
  }

  div[style*="gap: 0"] > button {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  h1, div[style*="fontSize: 32"] {
    font-size: 18px !important;
  }
}