/* The Launch Era — clean iPhone foundation */
@media(max-width:680px){
 :root{--m-pad:11px;--m-gap:8px;--m-radius:14px}
 body.shell-app #appShell>.main{padding-left:10px!important;padding-right:10px!important;padding-bottom:calc(72px + env(safe-area-inset-bottom))!important}
 body.shell-app #appShell .view.active{width:100%!important;max-width:100%!important}
 body.shell-app #appShell .view.active>.section-intro{margin:4px 0 9px!important}
 body.shell-app #appShell .view.active>.section-intro h2{margin:0 0 2px!important;font-size:22px!important;line-height:1.05!important}
 body.shell-app #appShell .view.active>.section-intro p{margin:0!important;font-size:11px!important;line-height:1.3!important}
 body.shell-app #appShell .view.active :is(.panel,.client-card,.service-card,.supply-card,.followup-card,.quote-growth-card,.job-block,.mobile-record-card,.settings-section,.timer-card,.share-access-card){min-height:0!important;padding:var(--m-pad)!important;border-radius:var(--m-radius)!important;margin-bottom:var(--m-gap)!important}
 body.shell-app #appShell .view.active :is(.panel,.client-card,.service-card,.supply-card,.followup-card,.quote-growth-card,.job-block,.mobile-record-card) p{margin:3px 0!important;line-height:1.3!important}
 body.shell-app #appShell :is(#clientsGrid,#servicesGrid,#teamGrid,#suppliesGrid){display:grid!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;gap:7px!important;overflow:visible!important;padding:0!important}
 body.shell-app #appShell :is(#clientsGrid,#servicesGrid,#teamGrid,#suppliesGrid)>*{width:100%!important;min-width:0!important}
 body.shell-app #appShell .mobile-record-card{gap:3px!important}
 body.shell-app #appShell .mobile-record-card>.record-primary{padding:0 0 6px!important}
 body.shell-app #appShell .mobile-record-card>.record-primary strong{font-size:15px!important;line-height:1.15!important}
 body.shell-app #appShell .mobile-record-card>.record-primary small{font-size:10px!important}
 body.shell-app #appShell .mobile-record-card>.record-field{min-height:22px!important;display:grid!important;grid-template-columns:minmax(82px,34%) minmax(0,1fr)!important;gap:8px!important;align-items:start!important;padding:2px 0!important;font-size:10.5px!important;line-height:1.25!important}
 body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.followup-card-actions){gap:5px!important;margin-top:6px!important}
 body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.followup-card-actions) button{min-height:38px!important;padding:8px 10px!important;border-radius:11px!important}
 body.shell-app #appShell :is(.entity-form,.booking-step-panel,.settings-section) label{font-size:10.5px!important;line-height:1.2!important}
 body.shell-app #appShell :is(.entity-form,.booking-step-panel,.settings-section) :is(input,select,textarea){width:100%!important;max-width:100%!important;box-sizing:border-box!important;min-height:44px!important;padding:10px 11px!important;border-radius:11px!important;font-size:16px!important}
 body.shell-app #appShell :is(.entity-form,.booking-step-panel,.settings-section) textarea{min-height:78px!important}
 body.shell-app #appShell .form-grid{gap:9px!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-layout{gap:7px!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-panel{padding:9px!important;border-radius:14px!important}
 body.shell-app #appShell [data-page="calendar"] :is(.day-detail-card,.calendar-detail,.job-detail,.job-block){min-height:0!important;padding:10px!important;border-radius:13px!important;margin:5px 0!important}
 body.shell-app #appShell [data-page="quotes"] #quotesBoard.kanban{grid-auto-columns:minmax(270px,86vw)!important;gap:8px!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
 body.shell-app #appShell [data-page="quotes"] .quote-growth-col{padding:9px!important;border-radius:14px!important}
 body.shell-app #appShell [data-page="reports"] .report-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
 body.shell-app #appShell [data-page="reports"] .report-grid .panel{min-height:100px!important}
 body.shell-app #appShell [data-page="reports"] .report-grid .panel>strong{font-size:25px!important;margin:5px 0!important}
 body.shell-app #appShell [data-page="time"] .timer-card>strong{font-size:32px!important;margin:7px 0!important}
 body.shell-app #appShell [data-page="route"] .route-layout{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
 body.shell-app #appShell button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 body.shell-app #appShell :is(.main,.nav-list,.timeline,.kanban){-webkit-overflow-scrolling:touch}
}
@media(max-width:860px){
 body.shell-app #sidebar.sidebar{filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 body.shell-app #sidebar.sidebar:not(.open){pointer-events:none!important}
 body.shell-app #sidebar.sidebar.open{pointer-events:auto!important;z-index:1002!important}
 body.shell-app #sidebarScrim[hidden]{display:none!important;pointer-events:none!important}
 body.shell-app #sidebarScrim:not([hidden]){pointer-events:auto!important;z-index:1001!important}
}

/* iPhone invoices — single stable action system; obsolete overflow version removed */
@media(max-width:680px){
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable{display:flex!important;position:static!important;width:100%!important;margin-top:10px!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable .safe-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable button{min-height:38px!important;width:auto!important}
}

/* customer editor full-screen mobile fix */
@media(max-width:680px){
 body.shell-app .modal-backdrop:not([hidden]){
   display:block!important;position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;padding:0!important;background:#FAF8F3!important;z-index:2000!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
 }
 body.shell-app .modal-backdrop .modal{
   position:relative!important;inset:auto!important;width:100%!important;min-height:100dvh!important;height:auto!important;max-width:none!important;max-height:none!important;
   margin:0!important;padding:calc(18px + env(safe-area-inset-top)) 18px calc(92px + env(safe-area-inset-bottom))!important;
   border-radius:0!important;background:#FAF8F3!important;box-shadow:none!important;overflow:visible!important;
 }
 body.shell-app .modal-backdrop .modal::before{display:none!important}
 body.shell-app .modal-backdrop .modal-close{position:fixed!important;top:calc(14px + env(safe-area-inset-top))!important;right:16px!important;z-index:4!important}
 body.shell-app .modal-backdrop .entity-form{width:100%!important;max-width:none!important;margin-top:18px!important;padding:0!important}
 body.shell-app .modal-backdrop .form-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;width:100%!important}
 body.shell-app .modal-backdrop .form-grid>label,body.shell-app .modal-backdrop .form-grid>.full{grid-column:1/-1!important;width:100%!important;min-width:0!important}
 body.shell-app .modal-backdrop .form-grid :is(input,select,textarea){width:100%!important;max-width:none!important;box-sizing:border-box!important}
 body.shell-app .modal-backdrop .form-footer{
   position:static!important;bottom:auto!important;z-index:auto!important;
   display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
   margin:20px 0 0!important;
   padding:12px 0 calc(14px + env(safe-area-inset-bottom))!important;background:#FAF8F3!important;
   border-top:1px solid #DEDAD2!important;
 }
 body.shell-app .modal-backdrop .form-footer>button{width:100%!important;min-width:0!important;min-height:48px!important}
}


/* 2026-10-06 iPhone recovery: services + owner admin */
@media(max-width:680px){
 body.shell-app #appShell [data-page="services"] .service-card{overflow:visible!important}
 body.shell-app #appShell [data-page="services"] .service-card :is(.card-actions,.record-actions,.safe-actions){
   display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important;overflow:visible!important
 }
 body.shell-app #appShell [data-page="services"] .service-card :is(.card-actions,.record-actions,.safe-actions)>button{
   width:100%!important;min-width:0!important;min-height:46px!important;padding:10px 12px!important;
   font-size:14px!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important
 }
 body.shell-app #appShell [data-page="services"] .service-card :is(.card-actions,.record-actions,.safe-actions)>button:last-child:nth-child(odd){
   grid-column:1/-1!important
 }

 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel{
   overflow:visible!important;padding:16px!important;min-height:0!important
 }
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-accordion-panel:not(.compact-panel-open){
   padding:16px!important;min-height:72px!important
 }
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-trigger-h3>h3{
   display:flex!important;align-items:center!important;min-height:44px!important;margin:0!important;padding:6px 44px 6px 0!important
 }
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-trigger-h3>h3::after{
   right:4px!important;font-size:22px!important
 }
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-panel-open.compact-trigger-h3>:not(h3){
   display:flex!important
 }
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-panel-open.compact-trigger-h3>.role-legend,
 body.shell-app #appShell [data-page="admin"] .admin-grid>.panel.compact-panel-open.compact-trigger-h3>#membersList{
   display:grid!important
 }
}


/* 2026-10-06 full-workspace bento direction
   The reference video uses one visual language everywhere: calm canvas,
   compact modular cards, clear hierarchy, roomy desktop/tablet grids,
   and a clean single-column phone flow. */
body.shell-app #appShell{
  --workspace-canvas:#f7f8f5;
  --workspace-card:#fff;
  --workspace-border:#e7e9e3;
  --workspace-radius:18px;
  --workspace-gap:12px;
}
body.shell-app #appShell .main{background:var(--workspace-canvas)!important}
body.shell-app #appShell .view.active{max-width:1440px;margin:0 auto}
body.shell-app #appShell .view.active :is(.panel,.client-card,.service-card,.supply-card,.followup-card,.quote-growth-card,.job-block,.mobile-record-card,.settings-section,.timer-card,.share-access-card){
  background:var(--workspace-card)!important;border:1px solid var(--workspace-border)!important;
  border-radius:var(--workspace-radius)!important;box-shadow:0 5px 18px rgba(25,25,25,.035)!important;
}
body.shell-app #appShell .view.active :is(.panel,.client-card,.service-card,.supply-card,.followup-card,.quote-growth-card,.job-block,.mobile-record-card,.settings-section,.timer-card,.share-access-card){
  min-width:0!important;overflow-wrap:normal!important;word-break:normal!important;
}
body.shell-app #appShell .view.active :is(button,.primary-btn,.ghost-btn,.soft-btn){white-space:normal;word-break:normal}
body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.safe-actions,.followup-card-actions){
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.safe-actions,.followup-card-actions)>*{
  flex:0 1 auto;min-width:max-content;
}

@media(min-width:861px){
 body.shell-app #appShell .main{padding:0 24px 36px!important}\n body.shell-app #appShell .topbar{margin-top:0!important}
 body.shell-app #appShell .view.active>.section-intro{margin:2px 0 18px!important}
 body.shell-app #appShell :is(#clientsGrid,#servicesGrid,#teamGrid,#suppliesGrid,.admin-grid,.settings-grid){
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:start!important
 }
 body.shell-app #appShell [data-page="reports"] .report-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
 body.shell-app #appShell [data-page="route"] .route-layout{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;gap:14px!important;align-items:start!important}
}
@media(min-width:681px) and (max-width:1100px){
 body.shell-app #appShell .main{padding:18px!important}
 body.shell-app #appShell :is(#clientsGrid,#servicesGrid,#teamGrid,#suppliesGrid,.admin-grid,.settings-grid){
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important
 }
 body.shell-app #appShell [data-page="reports"] .report-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
 body.shell-app #appShell .main{padding-left:10px!important;padding-right:10px!important}
 body.shell-app #appShell .view.active{width:100%!important;max-width:100%!important;overflow:visible!important}
 body.shell-app #appShell .view.active>.section-intro{padding:2px 2px 4px!important}
 body.shell-app #appShell :is(#clientsGrid,#servicesGrid,#teamGrid,#suppliesGrid,.admin-grid,.settings-grid,.report-grid,.route-layout){
   display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;width:100%!important
 }
 body.shell-app #appShell .view.active :is(.panel,.client-card,.service-card,.supply-card,.followup-card,.quote-growth-card,.job-block,.mobile-record-card,.settings-section,.timer-card,.share-access-card){
   width:100%!important;max-width:100%!important;min-width:0!important;padding:12px!important;border-radius:15px!important
 }
 body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.safe-actions,.followup-card-actions){
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important
 }
 body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.safe-actions,.followup-card-actions)>*{
   width:100%!important;min-width:0!important;min-height:44px!important;font-size:13px!important;line-height:1.2!important
 }
 body.shell-app #appShell .view.active :is(.card-actions,.record-actions,.safe-actions,.followup-card-actions)>*:last-child:nth-child(odd){
   grid-column:1/-1!important
 }
 body.shell-app #appShell .view.active :is(.meta-grid,.service-meta,.record-meta,.summary-grid){
   max-width:100%!important;min-width:0!important;overflow:visible!important
 }
 body.shell-app #appShell [data-page="route"] :is(.route-actions,.route-cta,.route-summary){
   position:static!important;width:100%!important;max-width:100%!important;transform:none!important
 }
}

/* PR review recovery: tablet invoice controls must remain actionable */
@media(min-width:681px) and (max-width:1100px){
 body.shell-app #appShell [data-page="invoices"] :is(.invoice-actions-stable,.invoice-status-meta,.invoice-contact-list){display:flex!important;visibility:visible!important;opacity:1!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable{position:static!important;width:100%!important;flex-wrap:wrap!important;gap:8px!important}
}

@media(max-width:680px){
 body.shell-app #appShell [data-page="supplies"] .supply-card{overflow:visible!important}
 body.shell-app #appShell [data-page="supplies"] .supply-meta{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;width:100%!important}
 body.shell-app #appShell [data-page="supplies"] .supply-meta>span{min-width:0!important;overflow:visible!important;white-space:normal!important}
 body.shell-app #appShell [data-page="supplies"] .supply-meta>span:last-child{text-align:right!important}
 body.shell-app #appShell [data-page="supplies"] .card-actions{position:static!important;margin-top:10px!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 body.shell-app #appShell [data-page="supplies"] .card-actions button{position:static!important;width:100%!important;min-width:0!important;min-height:44px!important}
}


/* 2026-10-06 r53 — iPhone card containment: route, services, booking center, leads */
@media(max-width:680px){
 body.shell-app #appShell [data-page="route"] :is(.panel,.route-summary,.route-card,.job-block){overflow:hidden!important;min-width:0!important;max-width:100%!important}
 body.shell-app #appShell [data-page="route"] :is(.route-actions,.route-cta,.safe-actions,.card-actions){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important;max-width:100%!important}
 body.shell-app #appShell [data-page="route"] :is(.route-actions,.route-cta,.safe-actions,.card-actions)>*{position:static!important;transform:none!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
 body.shell-app #appShell [data-page="services"] :is(.panel,.service-card){width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .service-card>*{min-width:0!important;max-width:100%!important}
 body.shell-app #appShell [data-page="services"] .service-card :is(h3,strong,p,span,small){overflow-wrap:anywhere!important}
 body.shell-app #appShell [data-page="services"] .service-card :is(.service-price,.price){position:static!important;max-width:100%!important;white-space:normal!important}
 body.shell-app #appShell [data-page="booking"] :is(.panel,.service-card,.booking-step-panel,.settings-section){width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="booking"] :is(.service-addons,.addons,.addon-list,.service-meta,.record-meta){display:flex!important;flex-wrap:wrap!important;gap:6px!important;width:100%!important;max-width:100%!important;min-width:0!important}
 body.shell-app #appShell [data-page="booking"] :is(.service-addons,.addons,.addon-list)>*{flex:0 1 auto!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
 body.shell-app #appShell [data-page="leads"] :is(.panel,.client-card,.mobile-record-card){width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="leads"] :is(.mobile-record-card,.client-card)>*{min-width:0!important;max-width:100%!important}
 body.shell-app #appShell [data-page="leads"] .mobile-record-card>.record-primary{display:block!important;width:100%!important}
 body.shell-app #appShell [data-page="leads"] .mobile-record-card>.record-primary :is(strong,small){display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
 body.shell-app #appShell [data-page="leads"] .mobile-record-card>.record-field{display:grid!important;grid-template-columns:minmax(72px,28%) minmax(0,1fr)!important;gap:8px!important;width:100%!important;max-width:100%!important}
 body.shell-app #appShell [data-page="leads"] .mobile-record-card>.record-field>*{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
 body.shell-app #appShell [data-page="leads"] :is(.card-actions,.record-actions,.safe-actions){position:static!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:100%!important}
 body.shell-app #appShell [data-page="leads"] :is(.card-actions,.record-actions,.safe-actions)>*{position:static!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}
 body.shell-app #appShell [data-page="leads"] :is(.card-actions,.record-actions,.safe-actions)>*:last-child:nth-child(odd){grid-column:1/-1!important}
}


/* 2026-10-06 r54 — Services catalog: restore general add-ons + hard mobile containment */
@media(max-width:680px){
 body.shell-app #appShell [data-page="services"] .service-type-group{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .service-type-grid{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .service-row-card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 body.shell-app #appShell [data-page="services"] .service-row-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 body.shell-app #appShell [data-page="services"] .service-row-copy{min-width:0!important;max-width:100%!important}
 body.shell-app #appShell [data-page="services"] .service-row-copy>strong{max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important}
 body.shell-app #appShell [data-page="services"] .service-row-side{min-width:0!important;max-width:42vw!important;justify-self:end!important}
 body.shell-app #appShell [data-page="services"] .service-row-side>b{font-size:16px!important;white-space:nowrap!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:10px!important;box-sizing:border-box!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card>.addon-list{display:grid!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;border-top:0!important;gap:7px!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card .addon-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:10px!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card .addon-row>span:first-child{min-width:0!important;max-width:100%!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card .addon-row :is(strong,small){max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card .addon-row .card-actions{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;width:auto!important;max-width:100%!important;min-width:0!important}
 body.shell-app #appShell [data-page="services"] .general-addon-card .addon-row .card-actions button{width:auto!important;min-width:44px!important;margin:0!important}
}


/* 2026-10-06 r54b — Leads + Route: fix the actual mobile layout roots */
@media(max-width:680px){
 body.shell-app #appShell [data-page="leads"] #leadsTable{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important;gap:9px!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:14px!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-primary{grid-column:1!important;width:100%!important;min-width:0!important;padding:0 0 4px!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-primary strong{font-size:18px!important;line-height:1.15!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-primary small{font-size:12px!important;line-height:1.3!important;overflow-wrap:anywhere!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-field{grid-column:1!important;display:grid!important;grid-template-columns:90px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:100%!important;min-width:0!important;padding:7px 0!important;border-bottom:1px solid var(--app-line)!important;font-size:13px!important;line-height:1.25!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-field::before{position:static!important;display:block!important;width:auto!important;margin:0!important;font-size:9px!important;line-height:1!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-field .status{width:auto!important;max-width:100%!important;justify-self:start!important;padding:6px 10px!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-actions{grid-column:1!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;width:100%!important;min-width:0!important;margin-top:3px!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-actions>.safe-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;width:100%!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-actions :is(button,.record-delete-btn){width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
 body.shell-app #appShell [data-page="leads"] #leadsTable>.mobile-record-card>.record-actions>.record-delete-btn{grid-column:1!important}
 body.shell-app #appShell [data-page="route"] .route-map-empty{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="route"] .route-map-empty>.map-label{display:none!important}
 body.shell-app #appShell [data-page="route"] #routeVisual{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="route"] .route-command-summary{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;text-align:center!important}
 body.shell-app #appShell [data-page="route"] .route-command-summary>*{position:static!important;transform:none!important;max-width:100%!important;min-width:0!important;margin:0!important}
 body.shell-app #appShell [data-page="route"] .route-command-summary .route-best-btn{display:block!important;width:min(100%,260px)!important;max-width:100%!important;margin:4px auto 0!important}
}


/* 2026-10-06 r56 — one mobile Services + Pricing control center */
@media(max-width:680px){
 body.shell-app #appShell [data-page="services"] .section-intro{align-items:stretch!important}
 body.shell-app #appShell [data-page="services"] .section-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
 body.shell-app #appShell [data-page="services"] .section-actions>*{width:100%!important}
 body.shell-app #appShell [data-page="services"] .pricing-center-tools{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-top:14px!important}
 body.shell-app #appShell [data-page="services"] .pricing-center-panel{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;box-sizing:border-box!important}
 body.shell-app #appShell [data-page="services"] #servicesEstimateCalculatorMount,
 body.shell-app #appShell [data-page="services"] #servicesDiscountsList{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="services"] .service-owned-addons{display:grid!important;gap:7px!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:10px!important;box-sizing:border-box!important;border-top:1px solid var(--app-line)!important}
 body.shell-app #appShell [data-page="services"] .addon-list-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;min-width:0!important}
 body.shell-app #appShell [data-page="services"] .addon-list-head button{width:auto!important;min-width:0!important}
 body.shell-app #appShell [data-page="services"] .service-owned-addons .addon-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important}
}


/* 2026-10-06 r57 — tablet calendar: use the tablet canvas instead of a phone-width card */
@media(min-width:721px) and (max-width:1180px){
 body.shell-app #appShell [data-page="calendar"]{width:100%!important;max-width:none!important}
 body.shell-app #appShell [data-page="calendar"] .section-intro{width:100%!important;max-width:none!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;width:100%!important;max-width:none!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-panel{width:100%!important;max-width:none!important;min-width:0!important;padding:20px!important;border-radius:20px!important;box-sizing:border-box!important}
 body.shell-app #appShell [data-page="calendar"] #calendarWeekRow.two-week-calendar{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:none!important;overflow:visible!important}
 body.shell-app #appShell [data-page="calendar"] #calendarWeekRow>[data-calendar-day]{min-width:0!important;min-height:92px!important;padding:10px 7px!important;border-radius:14px!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-range-head{width:100%!important}
 body.shell-app #appShell [data-page="calendar"] .calendar-layout>article:not(.calendar-panel){width:100%!important;max-width:none!important}
}


/* 2026-10-06 r58 — tablet invoices: readable cards, no desktop table compression */
@media(min-width:721px) and (max-width:1180px){
 body.shell-app #appShell [data-page="invoices"]{width:100%!important;max-width:none!important}
 body.shell-app #appShell [data-page="invoices"] .section-intro{width:100%!important;max-width:none!important}
 body.shell-app #appShell [data-page="invoices"] .metric-grid.compact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;width:100%!important}
 body.shell-app #appShell [data-page="invoices"] .table-card{display:grid!important;gap:12px!important;width:100%!important;max-width:none!important;min-width:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
 body.shell-app #appShell [data-page="invoices"] .table-head{display:none!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-growth-row{display:grid!important;grid-template-columns:minmax(145px,.72fr) minmax(110px,.55fr) minmax(145px,.72fr) minmax(0,1.45fr)!important;grid-template-areas:"primary badge meta client" "actions actions actions actions"!important;gap:12px 16px!important;align-items:start!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:18px!important;box-sizing:border-box!important;border:1px solid var(--app-line)!important;border-radius:18px!important;background:var(--app-card,#fff)!important;overflow:hidden!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-growth-primary{grid-area:primary!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-status-badge{grid-area:badge!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-status-meta{grid-area:meta!important;display:grid!important;gap:6px!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-client-field{grid-area:client!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-contact-list{display:grid!important;gap:4px!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-contact-row{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:6px!important;min-width:0!important;max-width:100%!important;white-space:normal!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-contact-row>span:last-child{min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable{grid-area:actions!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;border-top:1px solid var(--app-line)!important;padding-top:12px!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable .safe-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] .invoice-actions-stable button{position:static!important;transform:none!important;white-space:normal!important;max-width:100%!important;margin:0!important}
 body.shell-app #appShell [data-page="invoices"] .record-delete-btn{margin-left:auto!important}
}
@media(min-width:721px) and (max-width:900px){
 body.shell-app #appShell [data-page="invoices"] .invoice-growth-row{grid-template-columns:minmax(135px,.75fr) minmax(100px,.55fr) minmax(0,1.35fr)!important;grid-template-areas:"primary badge meta" "client client client" "actions actions actions"!important}
}


/* 2026-10-06 r59 — definitive tablet invoice card reflow */
@media(min-width:681px) and (max-width:1180px){
 body.shell-app #appShell [data-page="invoices"] #invoicesTable>.invoice-growth-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"primary badge" "meta meta" "client client" "actions actions"!important;grid-template-rows:auto auto auto auto!important;gap:10px 14px!important;align-items:start!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:16px!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-growth-primary{grid-area:primary!important;position:static!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-status-badge{grid-area:badge!important;position:static!important;justify-self:end!important;align-self:start!important;max-width:170px!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-status-meta{grid-area:meta!important;position:static!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px!important;width:100%!important;min-width:0!important;margin:0!important;padding:9px 0!important;border-top:1px solid var(--app-line)!important;border-bottom:1px solid var(--app-line)!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-client-field{grid-area:client!important;position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-row{position:static!important;display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;align-items:center!important;min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;white-space:normal!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-row.is-address{grid-column:1/-1!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-row>span:last-child,body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-row>a{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-actions-stable{grid-area:actions!important;position:static!important;inset:auto!important;transform:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:11px 0 0!important;border-top:1px solid var(--app-line)!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-actions-stable .safe-actions{display:flex!important;position:static!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;min-width:0!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-actions-stable button,body.shell-app #appShell [data-page="invoices"] #invoicesTable .record-delete-btn{position:static!important;inset:auto!important;transform:none!important;float:none!important;width:auto!important;max-width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;padding:9px 12px!important;white-space:normal!important;overflow-wrap:anywhere!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .record-delete-btn{justify-self:end!important}
}
@media(min-width:681px) and (max-width:820px){
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .invoice-contact-list{grid-template-columns:minmax(0,1fr)!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable>.invoice-growth-row>.invoice-actions-stable{grid-template-columns:minmax(0,1fr)!important}
 body.shell-app #appShell [data-page="invoices"] #invoicesTable .record-delete-btn{justify-self:stretch!important;width:100%!important}
}

/* Keep native iPhone fields and team choices inside the editor. */
@media(max-width:680px){
 body.shell-app .modal-backdrop .modal,
 body.shell-app .modal-backdrop .form-grid,
 body.shell-app .modal-backdrop .form-grid :is(label,.full){box-sizing:border-box!important;min-width:0!important}
 body.shell-app .modal-backdrop .form-grid{grid-template-columns:minmax(0,1fr)!important}
 body.shell-app .modal-backdrop .form-grid :is(input,select,textarea){min-width:0!important;max-width:100%!important}
 body.shell-app .modal-backdrop .form-grid :is(input[type="date"],input[type="time"]){display:block!important;inline-size:100%!important;min-inline-size:0!important}
 body.shell-app .modal-backdrop .form-grid :is(input[type="date"],input[type="time"])::-webkit-date-and-time-value{min-width:0;text-align:left}
 body.shell-app .modal-backdrop .form-grid .job-team-option{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:100%!important;max-width:100%!important}
 body.shell-app .modal-backdrop .form-grid .job-team-option>span{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
 body.shell-app .modal-backdrop .form-grid input:is([type="checkbox"],[type="radio"]){width:24px!important;min-width:24px!important;max-width:24px!important;height:24px!important;min-height:24px!important;margin:0!important;padding:0!important;flex:0 0 24px!important}
}

/* Restore the existing More drawer on iOS PWA resume without changing
   the closed state or any desktop navigation. */
@media(max-width:860px){
  body.shell-app.sidebar-is-open #sidebar.open{
    display:flex!important;
    position:fixed!important;
    width:min(78vw,304px)!important;
    max-width:304px!important;
    height:100dvh!important;
  }
}