/* =============================================================================
   QuickBooks Replace — touch.css
   Everything here is scoped to body[data-touch="on"], which ui/touch.js sets
   from the pointer media query (or from the user's forced choice in the View
   menu).  With a mouse attached nothing in this file applies, so the desktop
   rendering stays pixel-faithful.
   ========================================================================== */

/* Kill the 300ms tap delay and double-tap-to-zoom everywhere, so the
   double-tap that opens a transaction is reliable rather than a gamble.
   Safe on desktop too — it only affects touch gestures. */
html, body { touch-action: manipulation; }

/* Let people pinch-zoom the form paper if they want a closer look, but never
   let a stray gesture rubber-band the whole shell. */
body { overscroll-behavior: none; }

body[data-touch="on"] {
  /* Apple's guidance is a 44pt target; a spreadsheet grid cannot honour that
     and stay a spreadsheet, so these are the largest sizes that keep the
     QuickBooks proportions recognisable. */
  --qb-row-h: 34px;
  --qb-row-h-1line: 30px;
  --qb-header-h: 30px;
  --qb-field-h: 34px;
  --qb-btn-h: 34px;
  --qb-menubar-h: 34px;
  --qb-titlebar-h: 32px;
  --qb-fs: 13px;
  --qb-fs-sm: 12px;
}

/* ---- hit targets --------------------------------------------------------- */
body[data-touch="on"] .qb-check input,
body[data-touch="on"] .qb-radio input { width: 22px; height: 22px; }

body[data-touch="on"] .qb-grid tbody td { padding: 0 8px; }
body[data-touch="on"] .qb-grid thead th { padding: 0 8px; }
body[data-touch="on"] .qb-grid.editable tbody td > input,
body[data-touch="on"] .qb-grid.editable tbody td > .qb-cellwrap > input {
  height: calc(var(--qb-row-h) - 1px); font-size: 13px; padding: 0 8px;
}

body[data-touch="on"] .qb-menubar .qb-menu-title { padding: 0 12px; }
body[data-touch="on"] .qb-menu-item { padding: 9px 24px 9px 30px; }
body[data-touch="on"] .qb-menu-popup { min-width: 240px; }
body[data-touch="on"] .qb-droplist .qb-dl-item { padding: 9px 12px; }

body[data-touch="on"] .qb-btn { min-height: 34px; padding: 0 14px; }
body[data-touch="on"] .qb-toolbar { min-height: 42px; }
body[data-touch="on"] .qb-toolbar .qb-tb-item { height: 32px; padding: 0 12px; }
body[data-touch="on"] .qb-subtabs .qb-subtab { padding: 10px 18px; }
body[data-touch="on"] .qb-tabs .qb-tab { padding: 9px 18px; }

body[data-touch="on"] .qb-ib-item { height: 44px; }
body[data-touch="on"] .qb-ib-sections .qb-ib-sect { padding: 12px 12px; }

body[data-touch="on"] .qb-rpt-table td,
body[data-touch="on"] .qb-rpt-table th { padding: 5px 10px; }

body[data-touch="on"] .qb-win-caption { height: 34px; }
body[data-touch="on"] .qb-win-caption .qb-wc-btn { width: 38px; height: 30px; }
body[data-touch="on"] .qb-win-resize { width: 22px; height: 22px; }

body[data-touch="on"] .qb-fieldwrap .qb-drop { width: 26px; }
body[data-touch="on"] .qb-fieldwrap.has-drop .qb-field { padding-right: 30px; }

/* ---- affordances that were hover-only ------------------------------------
   A finger has no hover, so the in-cell dropdown caret has to be permanent. */
body[data-touch="on"] .qb-grid.editable tbody td .qb-cellwrap .qb-cell-drop {
  display: flex; width: 24px;
}
body[data-touch="on"] .qb-grid.editable tbody td .qb-cellwrap > input {
  padding-right: 26px;
}

/* Long-press feedback, so hold-to-open feels deliberate rather than laggy. */
body[data-touch="on"] .qb-grid tbody tr:active td { background: #D8E9FB; }
body[data-touch="on"] .qb-menu-item:active { background: #CDE3F7; }

/* ---- scrolling ----------------------------------------------------------- */
body[data-touch="on"] .qb-gridwrap,
body[data-touch="on"] .qb-scroll,
body[data-touch="on"] .qb-rpt-page,
body[data-touch="on"] .qb-form-scroll,
body[data-touch="on"] .qb-home-canvas,
body[data-touch="on"] .qb-ib-scroll { -webkit-overflow-scrolling: touch; }

/* Thin scrollbars waste no space on a trackpad but are unusable on glass;
   on touch the content scrolls by dragging, so reclaim the gutter. */
body[data-touch="on"] ::-webkit-scrollbar { width: 10px; height: 10px; }

/* ---- narrow screens (iPad portrait, ~820px) ------------------------------
   The menu bar is the only band that genuinely runs out of room.  The extras
   on the right shed their labels first, then ui/menu.js moves whole menus
   into an overflow button. */
@media (max-width: 1100px) {
  .qb-menubar .qb-menu-right .qb-link { display: none; }
  .qb-menubar .qb-menu-right .qb-era-btn span { display: none; }
  .qb-menubar .qb-menu-right .qb-era-btn { padding: 0 6px; }
}
@media (max-width: 900px) {
  /* The icon bar becomes an icon rail: the glyphs stay, the captions go, and
     the four section buttons keep short wrapped labels so View Balances and
     Open Windows are still reachable. */
  .qb-iconbar { width: 78px; }
  .qb-iconbar .qb-ib-item span:not(.qb-ib-ico) { display: none; }
  .qb-iconbar .qb-ib-item { justify-content: center; padding: 0; height: 46px; }
  .qb-iconbar .qb-ib-sectionhdr { display: none; }
  .qb-iconbar .qb-ib-search { padding: 6px 0; justify-content: center; }
  .qb-iconbar .qb-ib-search input { display: none; }
  .qb-iconbar .qb-ib-collapse { display: none; }
  .qb-iconbar .qb-ib-sections .qb-ib-sect {
    font-size: 9px; line-height: 11px; padding: 7px 3px;
    text-align: center; display: block; white-space: normal;
  }
  .qb-iconbar .qb-ib-sections .qb-ib-sect span:last-child { display: none; }
  .qb-iconbar .qb-ib-link {
    font-size: 9px; line-height: 11px; padding: 6px 3px; text-align: center; white-space: normal;
  }
  .qb-iconbar .qb-ib-item .qb-ib-val { display: none; }

  /* The status strip keeps the company and the cash position; the rest goes. */
  .qb-statusbar span:nth-child(n+6) { display: none; }
  .qb-statusbar .qb-sb-right { display: none; }
}

/* The overflow button ui/menu.js adds when the menus do not fit. */
.qb-menubar .qb-menu-overflow { padding: 0 10px; font-weight: 700; }