/* ═══════════════════════════════════════════════════════
   MtSign Mobile Responsive Styles
   Activates below 768px. Desktop is completely untouched.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Global mobile overrides */
  body { margin: 8px !important; padding: 0 8px !important; font-size: 14px; }
  h1 { font-size: 1.2em; padding-bottom: 6px; }
  h2 { font-size: 1.1em; }

  /* Touch-friendly buttons */
  button, .btn, .bsm, .abtn { min-height: 44px; font-size: 14px !important; }

  /* Nav bar wraps on mobile */
  nav { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
  nav a { margin-right: 6px !important; font-size: 12px !important; padding: 4px 0; }

  /* Tables scroll horizontally */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 6px 8px !important; font-size: 12px !important; }

  /* KPI strips stack */
  .kpi-strip { flex-direction: column; }
  .kpi { min-width: unset !important; padding: 10px 14px; }

  /* Full-width inputs */
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom */

  /* Review page: stack panels vertically */
  .panels { flex-direction: column !important; height: auto !important; }
  .left-panel { width: 100% !important; max-width: 100% !important; height: 220px !important;
    border-right: none !important; border-bottom: 1px solid #dde; }
  .right-panel { padding: 10px !important; }

  /* Photo grids wrap tighter */
  .photos { gap: 4px !important; }
  .pi img { width: 80px !important; height: 60px !important; }
  .pe-box { width: 80px !important; height: 60px !important; }

  /* Approval bands full width */
  .ap-band { padding: 10px !important; margin: 6px 0 !important; }
  .ar { flex-direction: column; }
  .rfull { width: 100% !important; min-width: unset !important; }
  .btn { width: 100%; }

  /* Form cards */
  .card { padding: 14px !important; margin-top: 10px !important; }

  /* Engineer strip stacks */
  #engineers-strip { flex-direction: column; }

  /* Map smaller on mobile */
  .map-box { height: 160px !important; }

  /* Filter bars wrap */
  .left-toolbar { flex-wrap: wrap; }
  #searchBox { width: 100% !important; }
}

/* Tablet — minor tweaks */
@media (min-width: 768px) and (max-width: 1024px) {
  .left-panel { width: 35% !important; min-width: 240px !important; }
  .pi img { width: 90px !important; height: 68px !important; }
}