/* Tyso Scale V10.3.15 — phone + iPad/tablet stabilization layer
   Loaded last. Desktop (>1180px) is intentionally unchanged. */

@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-left:max(16px,env(safe-area-inset-left));
      padding-right:max(16px,env(safe-area-inset-right));
      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:88px;
  }
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }
  body{min-height:100dvh;}
  *,*::before,*::after{min-width:0;}
  img,svg,video,canvas,iframe{max-width:100%;height:auto;}

  /* Correctness over aggressive mobile rendering optimizations on Safari/iPadOS. */
  main>section,
  main .panel,
  main .card,
  main .service-card,
  main .portal-card,
  table{
    content-visibility:visible!important;
    contain:none!important;
  }

  /* One consistent collapsed header on iPad and phones. */
  .header .container.nav,
  .header .nav{
    width:min(calc(100% - 28px),1440px)!important;
    min-height:74px!important;
    height:74px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
    position:relative!important;
  }
  .header .brand{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    margin:0!important;
    flex:0 0 52px!important;
    display:grid!important;
    place-items:center!important;
  }
  .header .brandbox,
  .header .brand-box{
    width:50px!important;
    min-width:50px!important;
    height:50px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .header .brandbox img,
  .header .brand-box img{
    display:block!important;
    width:auto!important;
    height:46px!important;
    max-width:48px!important;
    max-height:46px!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:auto!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
  }
  .header .brandcopy,.header .brand-copy{display:none!important;}
  .header .header-actions-triad,.header .head-actions,.header .headact{display:none!important;}
  .header .menu{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin-left:auto!important;
    padding:0!important;
    flex:0 0 44px!important;
    order:90!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:12px!important;
    background:#000C0C!important;
    color:#fff!important;
    font-size:1.55rem!important;
    line-height:1!important;
  }
  .header .navlinks{
    display:none!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 1px)!important;
    z-index:500!important;
    width:auto!important;
    max-height:calc(100dvh - 86px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    margin:0!important;
    padding:12px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:0 0 16px 16px!important;
    background:#000C0C!important;
    box-shadow:0 18px 36px rgba(0,0,0,.3)!important;
    white-space:normal!important;
  }
  .header .navlinks.open{display:flex!important;}
  .header .navlinks>a{
    width:100%!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    font-size:.95rem!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .header .navlinks>a:after{display:none!important;}
  .header .navlinks .mobile-portal-link{
    display:flex!important;
    justify-content:center!important;
    text-align:center!important;
    background:#E10F24!important;
    color:#fff!important;
    font-weight:900!important;
  }
  .header .navlinks .mobile-portal-link + .mobile-portal-link{
    background:#15191d!important;
    border:1px solid rgba(255,255,255,.18)!important;
  }

  /* Keep all common shells inside the tablet viewport. */
  .container,.shell,.page-shell,.portal-shell,.customer-portal-shell,.admin-shell,
  .scheduler-shell,.sales-shell,.staff-shell,.report-shell,.workspace,main{
    max-width:100%!important;
  }
  .actions,.toolbar,.panel-head,.detail-actions,.wo-actions,.report-editor-actions,
  .report-savebar,.header-actions,.filters,.filterbar,.button-row,.btn-row,
  .invoice-payment-actions,.invoice-doc-actions,.config-actions{
    flex-wrap:wrap!important;
    min-width:0!important;
  }

  /* iPad-friendly grids. */
  .grid4,.portal-stat-grid,.stats,.scheduler-stats,.statrow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .grid3,.product-grid,.customer-photo-grid,.job-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .store-shell{grid-template-columns:1fr!important;}
  .store-shell .sidebar{position:static!important;top:auto!important;}
  .store-shell .catlist{max-height:none!important;}
  .directory{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .subcategory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #product-grid,.store-shell .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* Tables/dialogs stay contained instead of widening the whole page. */
  .tablewrap,.table-wrap,.table-wrapper,.mini-table,.cal-table-wrap,.report-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  dialog,.modal,.modal-card,.modal-content,.gallery-shell,.config-shell,
  .edit-time-form,.staff-more-menu,.staff-role-menu{
    max-width:calc(100vw - 24px)!important;
  }
  th,td,.card,.panel,.box,.stat,.notice,.detail-kv,.cell,.info-cell{
    overflow-wrap:anywhere;
  }

  /* Full logo: consistent aspect ratio, no stretching or square-image artifacts. */
  .statebox img[src*="brand-logo"],
  .hero-card img[src*="brand-logo"],
  .hero-art img[src*="brand-logo"],
  .page-art img[src*="brand-logo"],
  .pagehero img[src*="brand-logo"]{
    display:block!important;
    width:min(100%,250px)!important;
    height:auto!important;
    max-width:250px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    margin-inline:auto!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .footer .footer-brand img[src*="brand-logo"]{
    width:96px!important;
    height:auto!important;
    max-width:96px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    background:transparent!important;
    filter:none!important;
  }

  /* Touch targets. */
  button,.btn,.btn-outline,.btn-light,.btn-ghost,.act,.filter,.pillbtn,.save,
  .portal-overview-action,.wizard-step-btn,.sch-chip,.catbtn,.dirtrigger,
  .customer-portal-tabs a,.portal-top-tabs a,.staff-tabs a,summary{
    min-height:44px;
    touch-action:manipulation;
  }
}

/* iPad portrait + landscape: reduce desktop density before it becomes cramped. */
@media (max-width:1024px) {
  .hero-grid,.pagehero-grid,.page-grid,.content-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,.overview-grid{
    grid-template-columns:1fr!important;
  }
  .hero-grid,.pagehero-grid,.page-grid{gap:24px!important;}
  .hero-art,.page-art,.statebox,.hero-card{min-width:0!important;}
  .pagehero .statebox,.hero .statebox,.hero-card{max-width:100%!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;}
  .portal-grid,.portal-grid-2{grid-template-columns:1fr!important;}

  .controlbar{grid-template-columns:1fr!important;}
  .toolbar{justify-content:flex-start!important;}
  .section-head{align-items:flex-start!important;flex-direction:column!important;}

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

@media (max-width:850px) {
  html{scroll-padding-top:76px;}
  .header .container.nav,.header .nav{
    width:min(calc(100% - 22px),1440px)!important;
    min-height:70px!important;
    height:70px!important;
  }
  .header .brand{width:46px!important;min-width:46px!important;height:46px!important;flex-basis:46px!important;}
  .header .brandbox,.header .brand-box{width:44px!important;min-width:44px!important;height:44px!important;}
  .header .brandbox img,.header .brand-box img{height:40px!important;max-width:42px!important;max-height:40px!important;}
  .header .menu{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;flex-basis:42px!important;}

  .container{width:min(calc(100% - 24px),var(--max,1440px))!important;}
  .directory{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .subcategory-grid{grid-template-columns:1fr!important;}
  #product-grid,.store-shell .grid{grid-template-columns:1fr!important;}
  .grid3,.product-grid,.customer-photo-grid,.job-photo-grid{grid-template-columns:1fr!important;}

  .footer .footer-brand{justify-content:center!important;flex-direction:column!important;gap:8px!important;text-align:center!important;}
  .footer .footer-brand img[src*="brand-logo"]{width:88px!important;max-width:88px!important;}
  .footer-links{justify-content:center!important;}
  .footer-right{justify-items:center!important;text-align:center!important;}

  .statebox img[src*="brand-logo"],
  .hero-card img[src*="brand-logo"],
  .hero-art img[src*="brand-logo"],
  .page-art img[src*="brand-logo"],
  .pagehero img[src*="brand-logo"]{
    width:min(100%,220px)!important;
    max-width:220px!important;
  }

  .customer-portal-tabs,.portal-top-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .portal-nav-stack{position:relative!important;top:auto!important;}

  .staff-tabs,.report-subnav,.subtabs,.tabs{
    max-width:100%!important;
    overflow:visible!important;
    flex-wrap:wrap!important;
    white-space:normal!important;
  }
  .staff-tabs a,.staff-tabs button,.report-subnav a,.portal-top-tabs a{flex:1 1 auto;}
}

@media (max-width:720px) {
  .container{width:min(calc(100% - 20px),var(--max,1440px))!important;}

  input:not([type="checkbox"]):not([type="radio"]),select,textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
    font-size:16px!important;
    line-height:1.25!important;
  }
  textarea{min-height:112px!important;resize:vertical;}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-width:20px;flex:0 0 20px;}

  h1,.hero h1,.pagehero h1{
    font-size:clamp(2rem,9vw,2.75rem)!important;
    line-height:1.05!important;
    overflow-wrap:break-word;
  }
  h2{font-size:clamp(1.5rem,7vw,2.05rem)!important;line-height:1.1!important;}
  h3{line-height:1.18;}

  .grid2,.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,.portal-overview-actions,.portal-grid-2,.statrow{
    grid-template-columns:1fr!important;
  }
  .field.full,.wide,[class*="span-"]{grid-column:auto!important;}

  .panel,.card,.box,.browser-card,.sidebar,.dircard,.form,.panel-body,.detail-section{
    max-width:100%!important;
  }
  .panel-head,.report-editor-head,.report-savebar,.billing-alert,.portal-account-strip,
  .portal-hero-account,.invoice-payment-alert,.invoice-payment-current{
    align-items:stretch!important;
    flex-direction:column!important;
  }

  .actions,.hero-actions,.wizard-actions,.wo-actions,.report-editor-actions,
  .report-savebar>div:last-child,.invoice-payment-actions,.invoice-doc-actions,
  .config-actions{
    width:100%!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
  }
  .actions .btn,.actions .btn-light,.hero-actions .btn,.hero-actions .btn-light,
  .wizard-actions .btn,.wizard-actions button,.invoice-payment-actions a,
  .invoice-doc-actions a,.config-actions .btn,.config-actions .pillbtn{
    width:100%!important;
    flex:1 1 100%!important;
    text-align:center!important;
  }

  .toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:8px!important;}
  .toolbar>*{min-width:0!important;width:100%!important;}
  .toolbar>*:first-child:nth-last-child(3){grid-column:1/-1;}

  table:not(.email-table){font-size:.88rem;}
  th,td{padding-left:8px!important;padding-right:8px!important;}

  .mapbox,.mapbox iframe,.map-placeholder,.map-placeholder iframe{
    width:100%!important;
    max-width:100%!important;
    min-height:280px!important;
    height:300px!important;
  }

  .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;
  }

  .mobile-call{
    left:10px!important;
    right:10px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:48px!important;
    border-radius:14px!important;
  }
  body:has(.mobile-call){padding-bottom:max(78px,calc(70px + env(safe-area-inset-bottom)))!important;}

  .cartfab,.quote-fab{bottom:max(76px,calc(68px + env(safe-area-inset-bottom)))!important;right:10px!important;}

  .gallery-modal,.config-modal{padding:0!important;}
  .gallery-shell,.config-shell{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
}

@media (max-width:480px) {
  .container{width:min(calc(100% - 16px),var(--max,1440px))!important;}
  .header .container.nav,.header .nav{width:min(calc(100% - 16px),1440px)!important;}
  .header .navlinks{left:-1px!important;right:-1px!important;}

  .directory{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .dirtrigger{min-height:56px!important;height:auto!important;padding:9px!important;font-size:.8rem!important;}

  .portal-stat-grid,.scheduler-stats,.stats{grid-template-columns:1fr!important;}
  .month-preview{grid-template-columns:1fr 1fr!important;}
  .customer-portal-tabs,.portal-top-tabs{grid-template-columns:1fr 1fr!important;}
  .customer-portal-tabs a,.portal-top-tabs a{padding:8px 7px!important;font-size:.88rem!important;}

  .statebox img[src*="brand-logo"],
  .hero-card img[src*="brand-logo"],
  .hero-art img[src*="brand-logo"],
  .page-art img[src*="brand-logo"],
  .pagehero img[src*="brand-logo"]{
    width:min(100%,190px)!important;
    max-width:190px!important;
  }
  .footer .footer-brand img[src*="brand-logo"]{width:80px!important;max-width:80px!important;}
  .panel,.card,.box,.browser-card,.sidebar,.dircard{border-radius:14px!important;}
}

/* Field Service: iPad gets a narrower rail; phone uses the existing slide-out rail. */
@media (min-width:761px) and (max-width:1180px) {
  .tech-shell{grid-template-columns:minmax(245px,28vw) minmax(0,1fr)!important;}
  .rail-inner{padding:10px!important;}
  .workspace-body{padding:14px!important;}
  .tech-top{padding-inline:12px!important;}
  .top-title{margin-left:6px!important;}
  .asset-report-create.compact{min-width:0!important;}
}

@media (max-width:760px) {
  .tech-top{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important;}
  .workspace-body{padding:10px!important;}
  .jobbar{padding:8px 10px!important;}
  .jobbar-status{max-width:42vw!important;text-align:right!important;}
  .report-links{grid-template-columns:1fr!important;}
  .asset-workbench-title,.asset-workbench-switch,.asset-report-create{align-items:stretch!important;flex-direction:column!important;}
  .asset-workbench-switch label,.asset-report-create.compact{min-width:0!important;width:100%!important;}
}

@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;}
}

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

/* V10.3.15 final visual pass: robust logo targeting and floating-control spacing. */
@media (max-width:1180px) {
  .statebox>img,
  .hero-card>img,
  .hero-art img,
  .page-art img,
  .pagehero .statebox>img{
    display:block!important;
    width:min(100%,250px)!important;
    height:auto!important;
    max-width:250px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    margin-inline:auto!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .footer .footer-brand>img{
    width:96px!important;
    height:auto!important;
    max-width:96px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:none!important;
  }
}

/* iPad gets the compact menu but not the phone-only persistent call bar. */
@media (min-width:721px) and (max-width:1180px) {
  .mobile-call{display:none!important;}
  body{padding-bottom:0!important;}
}

@media (max-width:720px) {
  .statebox,.hero-card{padding:18px!important;}
  .statebox>img,
  .hero-card>img,
  .hero-art img,
  .page-art img,
  .pagehero .statebox>img{
    width:min(100%,190px)!important;
    max-width:190px!important;
  }
  .footer .footer-brand>img{width:80px!important;max-width:80px!important;}

  /* Store/cart pages already have a persistent cart control; avoid stacking two floating bars. */
  body:has(.cartfab) .mobile-call,
  body:has(.quote-fab) .mobile-call{display:none!important;}
  body:has(.cartfab),body:has(.quote-fab){padding-bottom:18px!important;}
  .cartfab,.quote-fab{
    top:80px!important;
    right:10px!important;
    bottom:auto!important;
    min-height:44px!important;
    padding:9px 12px!important;
    z-index:180!important;
  }
}
@media (max-width:720px) {
  .cartfab ~ .mobile-call,
  .quote-fab ~ .mobile-call{display:none!important;}
}