/*
 * PRC Universal Mobile-First Shield (Standing Order #194)
 * Phone Repair Centre (www.prcrepair.com.au | admin.prcrepair.com.au | r.prcrepair.com.au)
 *
 * Guarantees 100% smartphone usability across 360px (Samsung Galaxy) and 390px (iPhone)
 * viewports for every past, present, and future HTML module served by PRC Commerce Core.
 * Scoped strictly to @media screen so desktop (> 768px) and @media print (A4 PDFs,
 * statutory deeds, and workshop thermal labels) remain 100% untouched.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
.btn,
a.btn,
[role="button"],
summary {
  touch-action: manipulation;
}

.sig-pad-box,
.sig-canvas,
canvas[data-signature-pad] {
  touch-action: none;
}

@media screen {
  /* Prevent horizontal scroll-strip tabs & pills from squishing below text width */
  .filter-tabs,
  .filter-tabs-nav,
  .case-tabs-nav,
  .tab-bar,
  .tabs,
  .top-tabs,
  .cap-tabs,
  .cat-tabs-row,
  .dr-tabs-bar,
  .drawer-tabs,
  .dual-cut-tabs,
  .market-tabs-nav,
  .warr-tabs-nav,
  .wz-tabs,
  .sbb-tabs-strip,
  .sbb-nav-tabs,
  .corp-nav-links,
  .quick-pills-row,
  .filter-pills-bar,
  .action-pills-bar,
  .model-pills-row,
  .pills,
  .stepper-wrap,
  .dr-stepper-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-tabs > *,
  .filter-tabs-nav > *,
  .case-tabs-nav > *,
  .tab-bar > *,
  .tabs > *,
  .top-tabs > *,
  .cap-tabs > *,
  .cat-tabs-row > *,
  .dr-tabs-bar > *,
  .drawer-tabs > *,
  .dual-cut-tabs > *,
  .market-tabs-nav > *,
  .warr-tabs-nav > *,
  .wz-tabs > *,
  .sbb-tabs-strip > *,
  .sbb-nav-tabs > *,
  .corp-nav-links > *,
  .quick-pills-row > *,
  .filter-pills-bar > *,
  .action-pills-bar > *,
  .model-pills-row > *,
  .pills > *,
  .stepper-wrap > *,
  .dr-stepper-wrap > * {
    flex-shrink: 0 !important;
  }

  /* Universal key-value row value wrapping to prevent long emails/URLs/IDs from clipping */
  .info-val,
  .data-val,
  .kv-val,
  .ds-dd {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media screen and (max-width: 768px) {
  html:not(.prc-desktop-exact),
  body:not(.prc-desktop-exact):not(.prc-thermal-label) {
    max-width: 100vw;
    overflow-x: clip;
  }

  body:not(.prc-desktop-exact):not(.prc-thermal-label) img,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) video,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) iframe {
    max-width: 100%;
  }

  /* Collapse multi-column card/form grids into clean single-column mobile stacks */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .grid-2,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .grid-3,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .grid-4,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .grid2,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .sig-grid,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .custom-grid,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .sim-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* KPI grids collapse to 2 balanced columns on tablets/large phones */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Prevent iOS Safari / Android Chrome auto-zoom on form field focus (< 16px) */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  body:not(.prc-desktop-exact):not(.prc-thermal-label) select,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Allow long button labels inside cards/forms to wrap cleanly on mobile instead of overflowing right/left */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) button:not(.case-tab-btn):not(.tab-btn):not(.prcfb-pill),
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .btn:not(.case-tab-btn):not(.tab-btn):not(.prcfb-pill),
  body:not(.prc-desktop-exact):not(.prc-thermal-label) a.btn:not(.case-tab-btn):not(.tab-btn):not(.prcfb-pill),
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .ds-btn:not(.case-tab-btn):not(.tab-btn):not(.prcfb-pill) {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    height: auto;
    max-width: 100%;
  }

  /* Keep horizontal scroll-strip tab containers and buttons strictly single-line on mobile */
  .filter-tabs,
  .filter-tabs-nav,
  .case-tabs-nav,
  .tab-bar,
  .tabs,
  .top-tabs,
  .cap-tabs,
  .cat-tabs-row,
  .dr-tabs-bar,
  .drawer-tabs,
  .dual-cut-tabs,
  .market-tabs-nav,
  .warr-tabs-nav,
  .wz-tabs,
  .sbb-tabs-strip,
  .sbb-nav-tabs,
  .corp-nav-links,
  .quick-pills-row,
  .filter-pills-bar,
  .action-pills-bar,
  .model-pills-row,
  .pills,
  .stepper-wrap,
  .dr-stepper-wrap {
    flex-wrap: nowrap !important;
  }

  .filter-tabs > *,
  .filter-tabs-nav > *,
  .case-tabs-nav > *,
  .tab-bar > *,
  .tabs > *,
  .top-tabs > *,
  .cap-tabs > *,
  .cat-tabs-row > *,
  .dr-tabs-bar > *,
  .drawer-tabs > *,
  .dual-cut-tabs > *,
  .market-tabs-nav > *,
  .warr-tabs-nav > *,
  .wz-tabs > *,
  .sbb-tabs-strip > *,
  .sbb-nav-tabs > *,
  .corp-nav-links > *,
  .quick-pills-row > *,
  .filter-pills-bar > *,
  .action-pills-bar > *,
  .model-pills-row > *,
  .pills > *,
  .stepper-wrap > *,
  .dr-stepper-wrap > * {
    white-space: nowrap !important;
  }

  /* Smooth touch-scrollable wide data tables without breaking card widths */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .table-wrap,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .table-scroll,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .prc-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Clamp modals, dialogs, and popups inside small phone viewports */
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .modal-content,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .modal,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .dialog,
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .popup {
    max-width: calc(100vw - 20px) !important;
    max-height: 92dvh;
    overflow-y: auto;
  }
}

@media screen and (max-width: 420px) {
  body:not(.prc-desktop-exact):not(.prc-thermal-label) .kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}