/* SAF MRP — shared mobile / tablet optimizations.
   Loaded after each page's inline <style> so these rules win.
   Desktop layout is untouched; everything here lives behind max-width queries. */

/* Tablet and below */
@media (max-width: 900px) {
  main { padding: 18px 16px; }
  .grid { grid-template-columns: 1fr !important; }
}

/* Phone / small tablet */
@media (max-width: 720px) {
  /* ── Header → brand on top, nav becomes a scrollable tab bar ── */
  header {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  header .brand .logo { height: 34px; }
  header .brand .brand-label { font-size: 16px; }
  header .page-label { display: none; }
  header nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a {
    margin-left: 0;
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 13px;
  }
  header nav a.active { padding-bottom: 6px; }

  /* ── Stats: two-up cards ── */
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .stat { padding: 12px 14px; }
  .stat .value { font-size: 22px; }

  /* ── Toolbar: stack controls full width ── */
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
  .toolbar input[type=text],
  .toolbar input[type=date],
  .toolbar select,
  .toolbar .btn,
  .toolbar a.btn,
  .toolbar button { width: 100%; min-width: 0; }
  .toolbar .info { order: -1; }

  /* ── Tables scroll horizontally instead of squashing ── */
  main table, .modal table, .mrpscan-sheet table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* ── Prevent iOS zoom-on-focus (needs >=16px) ── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Bigger tap targets ── */
  .btn { min-height: 44px; }
  .row-actions { flex-wrap: wrap; }

  /* ── Modals become bottom sheets ── */
  .modal-back { align-items: flex-end; }
  .modal {
    max-width: 100% !important;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    max-height: 92vh;
  }
  .field.row { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }

  /* ── Hand-off page specifics ── */
  .selected-fg .qty-row { flex-wrap: wrap; gap: 10px; }
  .selected-fg .qty-row > div { min-width: 30%; }
  .footer-actions { flex-direction: column-reverse; }
  .footer-actions .btn { width: 100%; }
}

/* Very small phones */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
}

/* Label print sheet: 2-up on phones; stack its toolbars */
@media (max-width: 720px) {
  .sheet.cols-3, .sheet.cols-2 { grid-template-columns: 1fr 1fr !important; }
  .sheet-toolbar, .sel-bar { flex-wrap: wrap; }
  header .mrp-auth-chip { margin-left: auto; }
}
/* Hide the bug-report FAB while a page modal is open */
body:has(.modal-back.open) .mrpbug-fab { display: none; }