/* pos-tablet.css — makes the FULL POS usable on a tablet.
 *
 * Loaded last in pos.html so it wins ties on document order without a
 * wall of !important. Everything here is presentation only: no layout is
 * rebuilt, no element is hidden, no behaviour changes. The tablet gets
 * the same system the desktop does, sized for a finger.
 *
 * Keyed on `pointer: coarse` rather than width. Width tells you the size
 * of the glass; pointer tells you what is touching it, which is the
 * thing that actually decides how big a button has to be. A 1366px iPad
 * Pro in landscape is "desktop width" and still needs 44px targets, and
 * a touchscreen laptop needs them too.
 *
 * The POS layout is already flexbox with flex:1 and min-width:0
 * throughout, so it reflows to tablet widths on its own. What it did not
 * have was finger-sized controls, protection from iOS's focus-zoom, and
 * safe-area awareness.
 */

/* ── 1. Stop iOS zooming the page when an input takes focus ──────────
 * Mobile Safari zooms in on focus whenever the field's font-size is
 * under 16px, then leaves the page scrolled sideways. Every field in the
 * POS is 11-13px, so this fires constantly — it is the single most
 * disruptive thing about using the POS on an iPad today. 16px on the
 * CONTROL only; labels and table text stay as they are.
 */
@media (pointer: coarse) {
  input, select, textarea,
  .fld, .co-field, .sup-field, .admin-input, .search-input {
    font-size: 16px;
  }
  /* Safari also grows text on rotate unless told not to. */
  html { -webkit-text-size-adjust: 100%; }
}

/* ── 2. Finger-sized targets ─────────────────────────────────────────
 * ~44px is Apple's guideline and about right for a fingertip. Padding
 * rather than height so nothing is clipped, and min-height as the floor.
 */
@media (pointer: coarse) {
  .primary-btn, .ghost-btn, .danger-btn, .inv-btn, .be-bar-btn,
  .ci-add-btn, .ci-special-btn, .pay-btn, .sale-back-btn,
  .co-btn-complete, .co-btn-back, .modal-close {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
  }
  /* Top nav: the most-tapped strip in the app. */
  .tb-tab, .tb-ai-btn {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 12.5px;
  }
  .tb-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tb-tabs::-webkit-scrollbar { display: none; }
  .topbar { height: auto; min-height: 56px; padding-top: 4px; padding-bottom: 4px; }

  /* Cart line controls are the smallest thing in the app (9px text,
     4px padding) and the ones you press most during a sale. */
  .cart-action-btn { min-height: 36px; padding: 7px 12px; font-size: 11px; }

  /* Anything that is a bare icon-sized control gets a floor too. */
  .modal-close { min-width: 44px; }
}

/* ── 3. Tables ───────────────────────────────────────────────────────
 * Row height is the tap target for every list in the app — inventory,
 * open orders, reports. Wide tables scroll inside their own container
 * rather than pushing the page sideways.
 */
@media (pointer: coarse) {
  .admin-table td, .admin-table th { padding: 12px 10px; }
  .admin-table { font-size: 13px; }
  .admin-table td button, .admin-table td .ghost-btn { min-height: 38px; }
}

/* ── 4. Hover is a lie on a touchscreen ──────────────────────────────
 * A tapped row keeps its :hover state until something else is tapped,
 * so the last row you touched looks selected. Neutralise the hover
 * highlights where they mislead; :active still gives feedback.
 */
@media (hover: none) {
  .admin-table tr:hover td { background: transparent; }
  .sup-row:hover { background: transparent; }
  .tb-tab:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); }
  .tb-tab.active:hover { color: #fff; border-color: #60a5fa; }
}

/* ── 5. Safe areas ───────────────────────────────────────────────────
 * An iPad has no notch but does have a home indicator, and a Chromebook
 * tablet in landscape can have rounded corners. Cheap insurance.
 */
@supports (padding: env(safe-area-inset-left)) {
  @media (pointer: coarse) {
    .topbar { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
    .view   { padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* ── 6. Portrait tablet ──────────────────────────────────────────────
 * The New Sale screen is a three-column layout (sidebar | cart | totals).
 * At ~768px portrait the sidebar squeezes the cart to nothing. Drop the
 * Today's-Sales sidebar to a narrow rail and let the cart have the room;
 * it is a convenience list, not part of ringing a sale. Landscape keeps
 * the full three columns.
 */
@media (max-width: 900px) and (orientation: portrait) {
  .sale-sidebar { width: 132px; }
  .sale-sidebar .sale-back-btn { padding: 5px 8px; font-size: 10px; }
}

/* Narrower still (a big phone in landscape, or a small tablet in
   portrait): the sidebar stops earning its width entirely. */
@media (max-width: 760px) {
  .sale-sidebar { display: none; }
}

/* ── 7. Modals on a tablet ───────────────────────────────────────────
 * Several modals are sized for a 1080px-tall desktop window. On a
 * landscape iPad (810px) the action buttons fall below the fold with
 * nothing to scroll. Cap the height and let the body scroll.
 */
@media (pointer: coarse) {
  .modal { max-height: 88vh; display: flex; flex-direction: column; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 8. iOS viewport height ──────────────────────────────────────────
 * pos.html sets html,body{height:100%}. On iOS Safari the URL bar
 * collapses on scroll and 100% is measured against the LARGER viewport,
 * so the bottom of the app sits under the toolbar and cannot be reached.
 * dvh tracks the live viewport; -webkit-fill-available covers older iOS.
 * Both are behind @supports so no other browser is affected.
 */
@supports (height: 100dvh) {
  @media (pointer: coarse) {
    html, body { height: 100dvh; }
  }
}
@supports (-webkit-touch-callout: none) and (not (height: 100dvh)) {
  html, body { height: -webkit-fill-available; }
}

/* ── 9. Text selection on long-press ─────────────────────────────────
 * Long-pressing a button or a table row to scroll pops the iOS text
 * selection callout. Buttons and headers are not content anyone needs
 * to select; inputs and real content deliberately keep selection.
 */
@media (pointer: coarse) {
  .tb-tab, .primary-btn, .ghost-btn, .danger-btn, .pay-btn,
  .cart-action-btn, .inv-btn, .admin-table th, .tab, .sup-tab {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}