/* Tyso Scale V10.3.0 responsive device layer
   Desktop layout is intentionally unchanged. These rules activate only on tablets/phones. */

@supports (padding: max(0px)) {
  @media (max-width:1180px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .mobile-call { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  }
}

@media (max-width:1180px) {
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:92px; }
  html,body { width:100%; max-width:100%; overflow-x:hidden; }
  body { min-height:100dvh; }
  img,svg,video,canvas,iframe { max-width:100%; }
  pre,code { max-width:100%; overflow-wrap:anywhere; }

  /* Keep tablet layouts roomy without inheriting desktop-only fixed widths. */
  .container,
  .shell,
  .page-shell,
  .portal-shell,
  .customer-portal-shell,
  .admin-shell,
  .scheduler-shell,
  .sales-shell,
  .staff-shell,
  .report-shell,
  .workspace,
  main { max-width:100%; }

  /* iPad/tablet navigation: use the menu instead of squeezing desktop actions. */
  .header .container.nav,.nav { position:relative; }
  .menu { display:grid!important; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; margin-left:auto; border-radius:12px; }
  .header-actions-triad,.head-actions,.headact { display:none!important; }
  .navlinks .mobile-portal-link { display:block!important; width:100%; padding:11px 12px!important; border-radius:10px; }
  .navlinks { max-height:calc(100dvh - 92px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

  /* Tablet grids should not become cramped 3/4-column desktop cards. */
  .grid4,.portal-stat-grid,.stats,.scheduler-stats { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .grid3,.product-grid,.directory,.subcategory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Allow actions to wrap instead of causing viewport overflow. */
  .actions,.toolbar,.panel-head,.detail-actions,.wo-actions,.report-editor-actions,.report-savebar,
  .header-actions,.filters,.filterbar,.button-row,.btn-row { flex-wrap:wrap!important; min-width:0; }
  .actions > *, .toolbar > *, .detail-actions > * { max-width:100%; }

  /* Portal/staff/report tabs wrap rather than forcing sideways navigation. */
  .customer-portal-tabs,.portal-top-tabs,.staff-tabs,.report-subnav,.subtabs,.tabs {
    max-width:100%!important;
    overflow:visible!important;
    flex-wrap:wrap!important;
  }
  .staff-tabs { white-space:normal!important; }
  .staff-tabs a,.report-subnav a,.portal-top-tabs a { flex:0 1 auto; }

  /* Constrain common fixed panels and dialogs to the viewport. */
  dialog,.modal,.modal-card,.modal-content,.gallery-shell,.edit-time-form,.staff-more-menu,.staff-role-menu {
    max-width:calc(100vw - 24px)!important;
  }

  /* Tables can scroll inside their own panel rather than moving the whole page. */
  .tablewrap,.table-wrap,.table-wrapper,.mini-table,.cal-table-wrap,.report-table-wrap {
    max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  }
  table { max-width:100%; }

  /* Long labels/identifiers can wrap on a narrow screen. */
  th,td,.card,.panel,.box,.stat,.notice,.detail-kv,.cell,.info-cell { overflow-wrap:anywhere; }
}

@media (max-width:900px) {
  /* iPad portrait and large Android tablets */
  .container { width:min(calc(100% - 28px),var(--max,1440px))!important; }
  .hero-grid,.pagehero-grid,.content-grid,.page-grid,.recurring-layout,.billing-layout,
  .dispatch-grid,.load-board,.timesheet-grid,.report-workspace-grid,.asset-layout,.field-time-layout,
  .wo-top-grid,.wo-signoff,.signature-grid,.iso-auto-card,.standard-auto-card {
    grid-template-columns:1fr!important;
  }
  .portal-overview-actions { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .customer-portal-tabs,.portal-top-tabs { grid-template-columns:repeat(3,minmax(0,1fr))!important; }

  .footer-grid { grid-template-columns:1fr!important; gap:20px!important; }
  .footer-right { text-align:left!important; justify-items:start!important; }
  .footer-links { justify-content:flex-start!important; }

  /* Scheduler/admin rows collapse cleanly. */
  .dispatch-row { min-width:0!important; }
  .schedule-form .row2,.row2 { grid-template-columns:1fr!important; }

  /* Mobile-friendly admin/staff navigation: wrap, don't scroll sideways. */
  .staffbar-inner { max-width:100%; }
  .staff-tabs { width:100%; display:flex; gap:7px; }
  .staff-tabs a,.staff-tabs button { min-height:40px; }
}

@media (max-width:720px) {
  html { scroll-padding-top:74px; }
  .container { width:min(calc(100% - 22px),var(--max,1440px))!important; }

  /* Prevent iOS Safari zoom and make all form controls touch-friendly. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea {
    width:100%; max-width:100%; min-height:46px; font-size:16px!important; line-height:1.25;
  }
  textarea { min-height:112px; resize:vertical; }
  input[type="checkbox"],input[type="radio"] { width:20px; height:20px; min-width:20px; flex:0 0 20px; }

  button,.btn,.btn-outline,.btn-light,.act,.filter,.pillbtn,.save,.header-action,
  .portal-overview-action,.wizard-step-btn,.wizard-actions button,.sch-chip,.catbtn,.dirtrigger {
    min-height:44px;
  }
  button,.btn,.act,.pillbtn,.save { max-width:100%; }

  /* One-column forms and cards on phones. */
  .grid2,.grid3,.grid4,.row,.row2,.form-grid,.formgrid,.field-grid,.detail-grid,
  .asset-grid2,.asset-grid3,.asset-meta,.component-fields,.component-form,.component-scale-fields,
  .indicator-builder-fields,.indicator-add-form,.report-grid2,.report-grid3,.check-grid,.ppe-grid,
  .service-plan-grid,.time-row,.action-grid,.completion-checklist,.job-photo-grid,.portal-overview-actions {
    grid-template-columns:1fr!important;
  }
  .field.full,.wide,[class*="span-"] { grid-column:auto!important; }

  /* Portal tabs remain visible without any left/right gesture. */
  .customer-portal-tabs,.portal-top-tabs { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; }
  .customer-portal-tabs a,.portal-top-tabs a { min-height:50px; padding:9px 8px!important; font-size:.92rem!important; }
  .portal-nav-stack { position:relative!important; top:auto!important; }

  /* Headings scale down without losing hierarchy. */
  h1,.hero h1,.pagehero h1 { font-size:clamp(2rem,9vw,2.8rem)!important; line-height:1.06!important; }
  h2 { font-size:clamp(1.45rem,7vw,2rem); line-height:1.12; }
  h3 { line-height:1.18; }

  /* Forms/cards get useful breathing room instead of desktop padding. */
  .panel,.card,.box,.browser-card,.sidebar,.dircard,.form,.panel-body,.detail-section { max-width:100%; }
  .panel-head,.report-editor-head,.report-savebar,.billing-alert,.portal-account-strip,.portal-hero-account {
    align-items:stretch!important; flex-direction:column!important;
  }

  /* Compact action groups are full-width and easy to tap. */
  .actions,.wizard-actions,.wo-actions,.report-editor-actions,.report-savebar>div:last-child {
    width:100%; align-items:stretch; justify-content:flex-start!important;
  }
  .actions .btn,.wizard-actions .btn,.wizard-actions button { flex:1 1 100%; }

  /* Keep dropdown menus and floating editors on-screen. */
  .staff-more-menu,.staff-role-menu,.edit-time-form {
    position:fixed!important; left:10px!important; right:10px!important; width:auto!important; max-width:none!important;
    max-height:calc(100dvh - 100px)!important; overflow:auto!important;
  }

  /* General table safeguard. Portal tables that already become cards keep their page-specific styling. */
  .tablewrap,.table-wrap,.table-wrapper { width:100%; }
  table:not(.email-table) { font-size:.88rem; }
  th,td { padding-left:8px; padding-right:8px; }

  /* Fixed bottom call bar respects modern phone home indicators. */
  .mobile-call { left:10px!important; right:10px!important; bottom:max(8px,env(safe-area-inset-bottom))!important; width:auto!important; min-height:48px; }

  /* Media, iframes and maps scale to the phone width. */
  iframe,.mapbox,.mapbox iframe { width:100%!important; max-width:100%!important; }
  .mapbox,.mapbox iframe { min-height:280px!important; height:300px!important; }

  /* Avoid fixed minimum widths inherited from desktop widgets. */
  .dispatch-search,.filter input,.filter select,.req-field,.field,.cell,.info-cell { min-width:0!important; max-width:100%!important; }
}

@media (max-width:480px) {
  .container { width:min(calc(100% - 18px),var(--max,1440px))!important; }
  .customer-portal-tabs,.portal-top-tabs { grid-template-columns:1fr 1fr!important; }
  .portal-stat-grid,.scheduler-stats,.stats { grid-template-columns:1fr!important; }
  .month-preview { grid-template-columns:1fr 1fr!important; }
  .brandbox img,.brand-box img { max-height:42px!important; }
  .navlinks { left:8px!important; right:8px!important; }
  .phone { display:none!important; }
  .panel,.card,.box { border-radius:14px; }
}

/* Coarse-pointer devices: improve hit area even on large iPads/Android tablets. */
@media (hover:none) and (pointer:coarse) and (max-width:1180px) {
  a,button,label[for],summary,select { touch-action:manipulation; }
  button,.btn,.act,.pillbtn,.filter,.header-action,.customer-portal-tabs a,.portal-top-tabs a,.staff-tabs a { min-height:44px; }
  summary { min-height:44px; display:flex; align-items:center; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* Tyso v10.3.0 low-bandwidth / low-power rendering optimizations */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto!important}
  .header,.site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:800px}
  .panel,.card,.service-card,.portal-card{box-shadow:none!important}
}
img{content-visibility:auto}
@media (max-width:900px){
  main .panel,main .card,main .service-card,main .portal-card{content-visibility:auto;contain-intrinsic-size:520px}
  table{content-visibility:auto;contain-intrinsic-size:500px}
}