/* Phone fixes for the ServiceM8 iOS webview (~390px wide), which is served the
   same desktop layout as the browser. Everything here is scoped to small
   screens so the desktop panel is untouched. */

@media (max-width: 767px) {
  /* The PO item list is a flex "table": every .table-cell is flex:1, so five
     equal columns land at ~78px each and long text wraps one word per line.
     Give the row a real minimum width and let the container scroll sideways. */
  .table-like {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-like .table-row {
    min-width: 660px;
  }

  /* Description carries the most text - weight it over the numeric columns. */
  .table-like .table-cell:nth-child(2) {
    flex: 2.5;
  }

  /* Centred text wastes width and reads badly once wrapped. */
  .table-like .table-cell {
    text-align: left;
  }

  /* Stop form controls forcing the row wider than its min-width. */
  .table-like .table-cell input,
  .table-like .table-cell select {
    max-width: 100%;
  }

  /* Mazer's content wrapper keeps desktop gutters that cost ~48px on a phone. */
  .content-wrapper.container {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}