/* Shared mobile/responsive overrides, included on every page after its own <style>.
   Scoped to small screens so desktop is untouched. Targets the design vocabulary the
   pages share (.container, .kpis, .toolbar, tables, .form-grid, .modal). Uses !important
   because each page defines these classes in its own inline <style>. */

@media (max-width: 700px) {
  /* Page frame */
  .container { padding: 14px 14px !important; }
  h1 { font-size: 19px !important; }
  p.lede, .lede { font-size: 12px !important; }

  /* KPI tiles: 2-up instead of 4-up */
  .kpis { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .kpi .value { font-size: 20px !important; }

  /* Toolbars: stack controls full-width and let them wrap */
  .toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .toolbar > input,
  .toolbar > select,
  .toolbar > button { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: none !important; }

  /* Wide tables scroll horizontally instead of overflowing the viewport */
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* …but small in-modal sub-tables/diff tables can stay as normal tables */
  .sub-table, .diff-table { white-space: normal; }

  /* Multi-column forms collapse to a single column */
  .form-grid { grid-template-columns: 1fr !important; }
  /* Fields fill the column and may shrink. Without this, long <option> text (customer
     names, product descriptions) gives selects a large min-content width that forces the
     field — and the whole form — wider than the viewport (right-edge overflow). */
  .form-grid, .ff { min-width: 0 !important; }
  .ff input, .ff select, .ff textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* …except checkboxes — a 100%-wide checkbox stretches across the column and shoves its
     label to the far edge. Keep them intrinsic-width and left-aligned with their text. */
  .ff input[type="checkbox"] { width: auto !important; max-width: none !important; }
  /* Native <select> on Android WebView renders as a grey menulist widget whose text reads
     oversized/bold and ignores our CSS. Strip the native chrome so selects match the text
     inputs (white bg, 16px — not smaller, or iOS Safari auto-zooms on focus) and draw our
     own chevron. */
  .ff select, .toolbar select {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%3E%3Cpath%20d='M1%201%206%206%2011%201'%20stroke='%236b7280'%20stroke-width='1.6'%20fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
    font-size: 16px !important; line-height: 1.35 !important; color: #1a1a1a !important;
  }
  /* Native date/time inputs also render as grey oversized widgets on Android — flatten them
     to match. The picker indicator stays as the affordance; tapping still opens the picker. */
  .ff input[type="date"], .ff input[type="datetime-local"], .ff input[type="time"], .ff input[type="month"] {
    -webkit-appearance: none !important; appearance: none !important;
    background-color: #fff !important;
    font-size: 16px !important; line-height: 1.35 !important; color: #1a1a1a !important;
  }
  .ff input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; }

  /* Modals go (near) full-screen so content isn't cramped */
  .modal-backdrop { padding: 0 !important; align-items: stretch !important; }
  .modal { max-width: 100% !important; width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; }

  /* Editor line-item grids (PO/SO) — let them scroll rather than squish */
  .le-row { overflow-x: auto; }

  /* Utility: hide lower-priority table columns on small screens (tag the th + td). */
  .hide-sm { display: none !important; }

  /* Wrap the long text column on the remaining list tables (tables still scroll, but
     the long name/description column wraps within a cap instead of one giant line). */
  #customers-table td:nth-child(1),
  #so-table td:nth-child(3),
  #po-table td:nth-child(2),
  #tbl td:nth-child(2),
  #vendors-table td:nth-child(1),
  #mo-table td:nth-child(3) { white-space: normal !important; max-width: 160px; line-height: 1.25; }
}