/* ===========================================================================
   mobile.css — patch_mobile_responsive_v1
   One responsive layer shared by every page shell:
     includes/header.php        (177 pages, also loads style.css)
     admin/_nav.php             (20 admin pages, admin.css has NO media queries)
     includes/oms_layout.php    (OMS module, no media queries)
     the one-off pages (login, driver app, attendance, portals, reports)
   Load it LAST so it wins over the shell's own rules.

   EVERY rule is inside a max-width media query, so desktop is untouched.
   Nothing here changes behaviour or markup — layout only.
   =========================================================================== */

/* ── Tablets and phones ─────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* 1. Nothing may push the page sideways. Wide content scrolls inside its
        own box instead (see rule 3). */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

  /* 2. Fixed pixel widths written into the page are the main cause of content
        running off screen. Cap them, but only for things that are safe to
        shrink — never whole layouts. */
  .card, .section-card, .panel, .box, .modal-content,
  table, pre, .form-control, .form-select, input, select, textarea { max-width: 100% !important; }
  input[style*="min-width"], select[style*="min-width"], textarea[style*="min-width"],
  .form-control[style*="min-width"], .form-select[style*="min-width"] { min-width: 0 !important; width: 100% !important; }

  /* 3. Tables scroll sideways inside their own box instead of widening the page.
        mobile.js wraps any over-wide table in a .table-responsive box at load time;
        squeezing the columns instead would make the text unreadable. */
  .table-responsive { -webkit-overflow-scrolling: touch; max-width: 100%; }
  td, th { overflow-wrap: anywhere; }

  /* 4. Tap targets. 40px is the smallest comfortable finger target; many of
        these links are currently 5px x 11px of padding. */
  .btn, .nav-link, .dropdown-item, .admin-bar a, .oms-side a, .oms-top a,
  .tab-pill, .chip-btn, .card-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .btn-sm, .chip-btn { min-height: 34px; }
  .form-control, .form-select { min-height: 42px; }
  .form-check-input { width: 1.15em; height: 1.15em; }
  /* Row actions ("Edit", "Reset") were 21px tall — too small to hit reliably. */
  td a, th a, td .btn, td button { display: inline-block; padding: 7px 9px; min-height: 34px; }

  /* 5. iOS zooms the page in when a focused field is under 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* 6. Toolbars, filter rows and button groups wrap instead of overflowing. */
  .d-flex, .btn-group, .filters-row, .toolbar, .actions, .card-head,
  .perm-toolbar, .tb-actions, .nc-filters { flex-wrap: wrap !important; }
  .btn-group > .btn { flex: 1 1 auto; }

  /* 7. Modals and dropdowns fit the screen. */
  .modal-dialog:not(.modal-sm) { max-width: calc(100% - 1rem) !important; margin: 0.5rem !important; }
  .modal-body { max-height: 75vh; overflow-y: auto; }
  .dropdown-menu { max-width: calc(100vw - 1rem); overflow-x: hidden; }

  /* ── Admin shell (admin/_nav.php + admin.css) ─────────────────────────── */
  .admin-bar { padding: 8px 12px !important; gap: 6px !important; }
  /* The nav links become one swipeable row rather than a tall stack. */
  .admin-nav-links { display: flex; flex-wrap: nowrap; overflow-x: auto;
                     -webkit-overflow-scrolling: touch; gap: 4px; width: 100%; padding-bottom: 4px; }
  .admin-nav-links::-webkit-scrollbar { height: 0; }
  .admin-nav-links a { flex: 0 0 auto; padding: 8px 12px !important; font-size: .8rem !important; }
  .admin-bar-title, .badge-admin { display: none; }

  /* ── OMS shell (includes/oms_layout.php) ──────────────────────────────── */
  /* A 220px sidebar next to the content guarantees overflow on a phone. */
  .oms-shell { display: block !important; }
  /* width:auto, not 100% — the OMS shell doesn't use border-box, so 100% plus
     padding measured 391px against a 375px screen and was merely clipped. */
  aside.oms-side { width: auto !important; min-height: 0 !important; border-right: 0 !important;
                   display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px !important; }
  aside.oms-side, main.oms-main, header.oms-top, .admin-bar, .admin-nav-links { box-sizing: border-box; }
  aside.oms-side a { flex: 0 0 auto; }
  main.oms-main { padding: 14px !important; }
  header.oms-top { flex-wrap: wrap !important; gap: 10px !important; padding: 8px 12px !important; }
  header.oms-top nav.main { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  /* Label-above-field instead of a fixed 200px label column. */
  .form-grid { display: block !important; }
  .form-grid > * { width: 100% !important; margin-bottom: 10px; }

  /* ── Page furniture ───────────────────────────────────────────────────── */
  .container, .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
  .card-body, .section-body { padding: 1rem !important; }
  .page-header { padding: 1rem !important; }
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  .page-header h1, .page-sub { font-size: 1.15rem; }
  /* Stat tiles two-up rather than four-up and unreadable. */
  .row-cols-3 > .col, .row-cols-4 > .col, .row-cols-md-4 > .col { flex: 0 0 50% !important; max-width: 50% !important; }
  /* Buttons that sat side by side take the full width. */
  .btn-block-mobile, form .btn + .btn { margin-top: .4rem; }
  table td, table th { font-size: .8rem; padding: .45rem .5rem !important; }
  /* Long email addresses and store names stop forcing a wide table. */
  td, th, .rcpt, .mono { overflow-wrap: anywhere; word-break: break-word; }
}