/* Global mobile scroll fix: nothing on this site may ever scroll sideways.
   The header/nav wraps onto its own line instead of overflowing the
   viewport, and overflow-x is hidden everywhere as a hard safety net. */
html, body { overflow-x: hidden !important; }
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap !important;
    row-gap: 6px;
  }
  .site-header > nav {
    order: 3;
    width: 100% !important;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* The calendar was deliberately given min-width:700px + overflow:auto at
   max-width:780px (v2.css), turning it into a horizontally-scrollable box
   on mobile. That is exactly the sideways scroll that must never happen.
   Remove the floor so it can actually shrink to fit the screen instead. */
@media (max-width: 780px) {
  .calendar-weekdays, .calendar-grid {
    min-width: 0 !important;
  }
  .calendar {
    overflow: visible !important;
  }
}

/* job_edit.php / job forms: on mobile the form grid's single column used a
   bare 1fr, which does not override the browser's default grid-item
   min-width:auto. A long customer/address string inside the custom select
   widget then forced that column (and every field in it) wider than the
   screen, cutting off Customer/Job title/etc on the right edge. Force the
   column and its children to actually shrink to the container width. */
@media (max-width: 780px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-grid > * {
    min-width: 0 !important;
  }
  .form-grid input, .form-grid select, .form-grid textarea, .cp-select-wrap, .cp-select-trigger {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}