/* ipad.css — the iPad switch (Luis, 2026-10-05).
   Made for the 12.9" iPad Pro: 1366 x 1024 landscape, 1024 x 1366 portrait.

   A per-device choice, off by default. The rail's iPad button puts
   html.ipad-mode on the page and remembers it in localStorage `pos_ipad`;
   sidenav.php links this sheet and shows the button only on pages that set
   $ipad_mode_page. Every rule that changes a page sits under html.ipad-mode,
   so with the switch off nothing here applies — the only unscoped rules are
   the button's own look.

   responsive.css (live-only, June) already turns the rail into a slide-in
   drawer at 1024px and below, which covers portrait. Landscape is wider than
   every breakpoint the pages have, which is why it broke; most of this sheet
   gives landscape the layout the pages already use on a narrow window. */

/* ── The button on the rail ───────────────────────────────────────────── */
.nav-ipad { width: 100%; border: 0; font: inherit; text-align: left; }
.nav-ipad .nav-icon { position: relative; }
.nav-ipad .nav-ipad-dot { position: absolute; right: -3px; top: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: #3f7a68; box-shadow: 0 0 0 2px rgba(63, 122, 104, 0.25); opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .3s var(--ease-liquid, ease); }
.nav-ipad-on { display: none; }
html.ipad-mode .nav-ipad-on  { display: inline; }
html.ipad-mode .nav-ipad-off { display: none; }
html.ipad-mode .nav-ipad .nav-ipad-dot { opacity: 1; transform: scale(1); }

/* ── Touch ────────────────────────────────────────────────────────────── */
/* No double-tap-to-zoom wait on anything that takes a tap, and no grey flash. */
html.ipad-mode :is(a, button, input, select, textarea, label, summary, [role="button"], [onclick]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.ipad-mode { -webkit-text-size-adjust: 100%; }

/* The rail stays a rail. It opens on hover with a mouse; on a touch screen
   hover sticks after a tap, so the rail would stay open over the page after
   the iPad or pin button was pressed. "Keep open" still pins it full width.
   At 1024px and below responsive.css makes it a drawer with !important
   widths, which still win over these. */
html.ipad-mode:not(.nav-pinned) .sidenav:hover { width: 64px; }
html.ipad-mode:not(.nav-pinned) .sidenav:hover :is(.nav-label, .nav-badge, .nav-section-label, .nav-arrow) { opacity: 0; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
/* The bar is built for 1500px and up. On the iPad: the strapline goes, the
   two drawer pills keep their icon and count but drop the words, and the
   chevron treads beside the quick links go. */
html.ipad-mode .topbar-brand-sub { display: none !important; }
html.ipad-mode .topbar-notch::before,
html.ipad-mode .topbar-notch::after { display: none !important; }
html.ipad-mode .topbar-drawer-label { display: none !important; }
html.ipad-mode .topbar-icon-btn.topbar-drawer-labelled { width: 40px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; }
html.ipad-mode .topbar-end .topbar-right { gap: 8px !important; }
html.ipad-mode .topbar-end > #searchWrap.is-open { min-width: 150px; margin: 0 10px !important; }
/* The avatar stays; the name and role under it give their width to the search. */
html.ipad-mode .topbar-user-info { display: none !important; }
/* Portrait: the quick links are already in the drawer (responsive.css), so
   the brand keeps its logo and gives its name's width to the search too. */
@media (max-width: 1100px) {
  html.ipad-mode .topbar-brand > div { display: none !important; }
  html.ipad-mode .topbar > .topbar-left { flex: 0 0 auto !important; }
}

/* ── Dashboard ────────────────────────────────────────────────────────── */
/* One column at any width — the stack index.css already uses under 1100px.
   Two half-width columns leave the right-hand cards narrower than their
   own content at 1366, so they ran off the screen. */
html.ipad-mode .dashboard-layout { grid-template-columns: 1fr; }
html.ipad-mode .dashboard-left .table-wrap { max-height: none; overflow-y: visible; }
html.ipad-mode .dashboard-right .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Repairs checkout ─────────────────────────────────────────────────── */
/* The cart was being pushed off the right edge in portrait: the toolbar's
   own minimum (search box + brand bar, ~960px) set the parts column's
   width, and the cart took whatever was left past the screen. The columns
   may shrink now, the cart gets a fixed width it can hold its buttons in,
   and the parts take the rest. */
html.ipad-mode .pos-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
html.ipad-mode :is(.pos-left, .pos-right) { min-width: 0; }
@media (max-width: 1100px) {
  html.ipad-mode .pos-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Search on a row of its own, full width; the brand bar under it. */
html.ipad-mode .pos-toolbar { grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px; }
html.ipad-mode .tb-left { grid-column: 1; width: 100%; }
html.ipad-mode .tb-left .search-wrapper { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
html.ipad-mode .tb-right { grid-column: 1 !important; justify-self: stretch !important; min-width: 0; }
/* Parts table: on a laptop names stay on one line and the table scrolls
   sideways when short of room. Sideways scrolling is awkward by touch, so
   here long names wrap and + ADD stays on screen. */
html.ipad-mode .pt-scroller { width: auto; max-width: 100%; }
html.ipad-mode .pt-table { width: 100%; }
html.ipad-mode :is(.pt-name, .pt-meta) { white-space: normal; flex-wrap: wrap; }
html.ipad-mode .pt-c-name { min-width: 0; }

/* Cards view: two per row at any width (Luis, 2026-10-05) — part_card.css
   gives three above 1500px, which read as cramped. Inside, the card is
   sized for ~600px: at half a column the price ran out past the edge. So
   each card is its own size container and its insides follow ITS width,
   not the window's — the same card, wherever iPad mode is on. */
html.ipad-mode .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html.ipad-mode .products-grid .gsm-card { container-type: inline-size; }
@container (max-width: 520px) {
  html.ipad-mode .gsm-card .gsm-mid { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 10px; padding: 10px 12px 14px; }
  html.ipad-mode .gsm-card .gsm-imgwrap img { max-height: 130px; }
  html.ipad-mode .gsm-card .gsm-heroes { gap: 10px; }
  html.ipad-mode .gsm-card .gsm-hero b { font-size: clamp(22px, 8cqi, 42px); }
  html.ipad-mode .gsm-card .gsm-stock-dot { width: 48px; height: 48px; }
  html.ipad-mode .gsm-card .gsm-stock-dot b { font-size: 20px; }
}
/* Portrait: too narrow for photo and figures side by side — the photo goes
   on top, and the four tiles go two by two. */
@container (max-width: 340px) {
  html.ipad-mode .gsm-card .gsm-mid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html.ipad-mode .gsm-card .gsm-imgwrap img { max-height: 110px; }
  html.ipad-mode .gsm-card .gsm-hero b { font-size: clamp(22px, 10cqi, 42px); }
  html.ipad-mode .gsm-card .gsm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ipad-mode .gsm-card .gsm-tile:nth-child(3) { border-left: 0; }
  html.ipad-mode .gsm-card .gsm-tile:nth-child(n+3) { border-top: 1px solid rgba(30, 50, 90, .07); }
}