/* American Group shared mobile layer - phones & iPads (CRM, Staff, Fin, Fleet).
   Edit HERE in L:\inetpub\_shared\ag-mobile.css, then run sync-org-sites.ps1.
   Added 2026-10-03 (mobile-fix-20261003). Layout only: no logic.
   Goals: wide tables scroll sideways inside their box (page never runs off the right),
   text boxes keep a usable width, inputs are >=16px so iOS does not zoom on tap. */

/* ---------- all screen sizes: nothing wider than its box ---------- */
input, select, textarea { max-width: 100%; }
.main img, main img { max-width: 100%; }

/* ---------- phones + iPad portrait (same 900px break as the menu drawer) ---------- */
@media screen and (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* 16px stops iPhone/iPad Safari zooming in when a box is tapped. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }

  /* Grid/flex children may shrink below their content (stops long <select> text pushing the page wide). */
  .form-grid > *, .split > *, .grid > *, .field, .card, .inputs > *, .dot-meta > * { min-width: 0; }

  /* Button rows wrap instead of running off the right edge (some rows set nowrap inline). */
  .toolbar, .acts, .unit-acts, .row-actions, .topbar { flex-wrap: wrap !important; white-space: normal !important; }
  .toolbar { flex-shrink: 1 !important; max-width: 100%; }
  .toolbar > *, .topbar > * { max-width: 100%; }

  /* Tables: scroll sideways inside their own box. */
  table:not(.qb-lines):not(.docs):not(.ag-rows) {
    position: relative; /* keeps absolutely-positioned bits (screen-reader labels) inside the scroller */
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .form-sheet table, .bid-doc table { display: table; overflow: visible; }
  .table-wrap, .reg-wrap { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Boxes inside table cells keep a readable size; the table scrolls instead of squeezing them. */
  td input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])),
  td select { min-width: 7rem; }
  td input[type="number"], td input[inputmode="decimal"], td input[inputmode="numeric"],
  td input[type="time"], td input[type="date"] { min-width: 5.5rem; }
  td textarea { min-width: 15rem; }

  /* Page-specific boxes that were squeezed to a sliver on phones. */
  .bid-lines select.item-pick { min-width: 10rem; max-width: none; }       /* CRM Create Bid: item  */
  .bid-lines input[name="qty"] { min-width: 4.5rem; }                      /* CRM Create Bid: qty   */
  .bid-lines input[name="rate"] { min-width: 6rem; }                       /* CRM Create Bid: rate  */
  .bid-lines textarea.line-desc { min-width: 16rem; }                      /* CRM Create Bid: desc  */
  .ts-table input[name^="description"] { min-width: 14rem; }               /* Staff Timesheets: what you did */

  /* Printable 8.5x11 forms (bid / invoice print): scroll the sheet, not the whole page. */
  .main:has(.form-sheet) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- phones only: form boxes use the full width of their column ---------- */
@media screen and (max-width: 640px) {
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  .field select,
  .field textarea,
  .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  .form-grid select,
  .form-grid textarea { width: 100%; }
  .toolbar > input:where(:not([type="checkbox"], [type="radio"])), .toolbar > select { flex: 1 1 12rem; min-width: min(12rem, 100%); }
}

/* List tables: stack each field onto its own line through iPad landscape.
   A 1024px window still has the sidebar, and six columns were wrapping a date into a sliver. */
@media screen and (max-width: 1100px) {
  table.ag-rows,
  table.ag-rows tbody,
  table.ag-rows tr,
  table.ag-rows td {
    display: block;
    width: auto;
    min-width: 0 !important;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
  }
  table.ag-rows thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  table.ag-rows tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.ag-rows td { border: 0; padding: 3px 0; }
  table.ag-rows td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  table.ag-rows td.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  table.ag-rows td.row-actions::before { flex: 1 0 100%; }
}

/* Bid lines: on a phone or iPad, item and description take a full line.
   Qty and rate share the next line so neither is squeezed into a sliver. */
@media screen and (max-width: 900px) {
  table.bid-lines,
  table.bid-lines tbody,
  table.bid-lines tr { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: visible; }
  table.bid-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.bid-lines td {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border: 0;
    padding: 4px 0;
  }
  table.bid-lines tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.bid-lines td:nth-child(2),
  table.bid-lines td:nth-child(3) {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }
  table.bid-lines td:nth-child(3) { margin-left: 4%; }
  table.bid-lines select.item-pick,
  table.bid-lines input[name="qty"],
  table.bid-lines input[name="rate"],
  table.bid-lines textarea.line-desc {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  table.bid-lines td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- iPads / touch screens wider than a phone: form text boxes never collapse to a sliver ---------- */
@media screen and (min-width: 641px) and (pointer: coarse) {
  .field input[type="text"], .field input:not([type]), .field input[type="email"], .field input[type="search"],
  .field input[type="tel"], .field input[type="url"], .field select, .field textarea,
  .form-grid input[type="text"], .form-grid input:not([type]), .form-grid select, .form-grid textarea { min-width: 12rem; }
}