/* H48 — mobile/PWA viewport, overlay, and global UI stability.
 * Loaded last by /app/ so legacy vh rules cannot push controls under iOS browser chrome.
 * Desktop/public-site layouts are intentionally untouched.
 */
:root{
  --osrilo-safe-top:env(safe-area-inset-top,0px);
  --osrilo-safe-right:env(safe-area-inset-right,0px);
  --osrilo-safe-bottom:env(safe-area-inset-bottom,0px);
  --osrilo-safe-left:env(safe-area-inset-left,0px);
  --osrilo-mobile-nav-reserve:82px;
}


@media(max-width:820px){
  html{
    min-height:100%;
    overflow-x:hidden;
  }

  body:not(.landing-visible){
    min-height:100svh;
    min-height:100dvh;
    overflow-x:hidden;
  }

  /* The fixed bar's painted height, including the Home Indicator inset, must
     belong to the actual buttons. A padded grid left inert strips around them. */
  body:not(.landing-visible) .mobile-bottom-nav{
    min-height:calc(68px + var(--osrilo-safe-bottom));
    gap:0;
    padding-top:0;
    padding-bottom:0;
    pointer-events:auto;
  }
  body:not(.landing-visible) .mobile-bottom-nav>.mobile-nav-button{
    width:100%;
    height:100%;
    min-height:calc(67px + var(--osrilo-safe-bottom));
    padding:10px 2px calc(11px + var(--osrilo-safe-bottom));
    pointer-events:auto;
  }
  body:not(.landing-visible) .mobile-bottom-nav>.mobile-nav-button>*{
    pointer-events:none;
  }

  body:not(.landing-visible) :where(
    .app-content,
    .dashboard-page,
    .dashboard-page>*,
    .dashboard-section,
    .lead-form-card,
    .access-card,
    .modal,
    .mobile-action-sheet,
    .mobile-sheet,
    .onboarding-card,
    .auth-card
  ){
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
  }

  body:not(.landing-visible) :where(
    .page-heading,
    .section-heading,
    .details-modal-header,
    .modal-actions,
    .form-grid,
    .filter-bar,
    .estimate-filter-bar,
    .invoice-filter-bar,
    .material-filter-bar
  )>*{
    min-width:0;
  }

  body:not(.landing-visible) :where(h1,h2,h3,p,strong,span,small,label){
    overflow-wrap:anywhere;
  }

  /* Auth/setup screens do not use the signed-in mobile navigation reserve. */
  body:not(.landing-visible):has(> .auth-shell:not([hidden])),
  body:not(.landing-visible):has(#businessOnboardingScreen:not([hidden])){
    padding-bottom:0!important;
  }

  body:not(.landing-visible):has(> .auth-shell:not([hidden])) :where(.mobile-bottom-nav,.mobile-fab),
  body:not(.landing-visible):has(#businessOnboardingScreen:not([hidden])) :where(.mobile-bottom-nav,.mobile-fab){
    display:none!important;
  }

  body:not(.landing-visible) .auth-shell{
    min-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom))!important;
    padding-top:max(8px,var(--osrilo-safe-top));
    padding-right:max(8px,var(--osrilo-safe-right));
    padding-bottom:max(8px,var(--osrilo-safe-bottom));
    padding-left:max(8px,var(--osrilo-safe-left));
  }

  /* First-run setup: page scrolls naturally; sticky actions remain inside the viewport. */
  body:not(.landing-visible) #businessOnboardingScreen{
    box-sizing:border-box;
    min-height:100dvh!important;
    height:auto!important;
    place-items:start center!important;
    padding-top:max(8px,var(--osrilo-safe-top))!important;
    padding-right:max(8px,var(--osrilo-safe-right))!important;
    padding-bottom:max(8px,var(--osrilo-safe-bottom))!important;
    padding-left:max(8px,var(--osrilo-safe-left))!important;
    overflow:visible!important;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-card-first-run{
    box-sizing:border-box;
    width:100%!important;
    min-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:16px 14px 0!important;
    overflow:visible!important;
    border-radius:16px;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-header{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:10px 12px;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-osrilo-logo{
    grid-column:1;
    grid-row:1;
    max-width:46px;
    max-height:46px;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-header>div:not(.onboarding-account-actions){
    grid-column:2;
    grid-row:1;
    min-width:0;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-account-actions{
    grid-column:1 / -1!important;
    grid-row:2;
    display:grid!important;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-account-actions .onboarding-close-button{
    grid-column:auto!important;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-account-actions button{
    width:100%;
    min-width:0;
    min-height:44px;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-progress-wrap{
    margin:16px 0 20px!important;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-step{
    min-width:0;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:12;
    margin:20px -14px 0!important;
    padding:10px 14px calc(10px + var(--osrilo-safe-bottom))!important;
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.98);
    box-shadow:0 -8px 24px rgba(15,23,42,.07);
    backdrop-filter:blur(10px);
  }

  /* Any open dialog owns the mobile viewport. Do not leave navigation/FAB controls
     competing with dialog actions underneath it. */
  body:not(.landing-visible):has(.modal-backdrop:not([hidden])){
    overflow:hidden!important;
  }

  body:not(.landing-visible):has(.modal-backdrop:not([hidden])) :where(
    .mobile-bottom-nav,
    .mobile-fab,
    .ask-osrilo-launcher
  ){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body:not(.landing-visible) .modal-backdrop:not([hidden]){
    box-sizing:border-box;
    overflow:hidden!important;
    padding-top:max(8px,var(--osrilo-safe-top))!important;
    padding-right:max(7px,var(--osrilo-safe-right))!important;
    padding-bottom:max(8px,var(--osrilo-safe-bottom))!important;
    padding-left:max(7px,var(--osrilo-safe-left))!important;
    align-items:flex-end;
  }

  body:not(.landing-visible) .modal:not(.service-call-schedule-modal):not(.service-call-complete-modal){
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    overflow-x:hidden!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-block:64px calc(96px + var(--osrilo-safe-bottom));
  }

  /* Walkthroughs are a contained five-row dialog. The guide body is the scroll area;
     header/help/actions never disappear beneath Safari or the PWA nav. */
  body:not(.landing-visible) .tutorial-backdrop{
    padding-top:max(8px,var(--osrilo-safe-top))!important;
    padding-right:max(8px,var(--osrilo-safe-right))!important;
    padding-bottom:max(8px,var(--osrilo-safe-bottom))!important;
    padding-left:max(8px,var(--osrilo-safe-left))!important;
  }

  body:not(.landing-visible) .tutorial-modal{
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    width:100%!important;
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    margin:0!important;
    padding:14px 14px 0!important;
    overflow:hidden!important;
  }

  body:not(.landing-visible) .tutorial-modal .details-modal-header{
    min-width:0;
  }

  body:not(.landing-visible) .tutorial-modal-progress{
    margin:10px 0!important;
  }

  body:not(.landing-visible) .tutorial-modal-body{
    min-height:0!important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.landing-visible) .tutorial-ask-osrilo{
    min-height:0;
    max-height:min(32dvh,250px);
    margin-top:10px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  body:not(.landing-visible) .tutorial-modal-actions{
    position:relative;
    z-index:2;
    margin:10px -14px 0!important;
    padding:10px 14px calc(10px + var(--osrilo-safe-bottom))!important;
    border-top:1px solid var(--line);
    background:#fff;
  }

  /* Common mobile panels discovered in the PWA sweep. Replace legacy vh caps with
     the dynamic viewport while keeping each component's existing layout/behavior. */
  body:not(.landing-visible) :where(
    .details-modal,
    .invoice-modal,
    .estimate-modal,
    .material-modal,
    .business-settings-modal,
    .assignment-manager-modal,
    .manual-reminder-modal,
    .profit-detail-modal,
    .profit-edit-modal,
    .labor-rate-modal,
    .bug-report-modal,
    .job-photo-upload-modal,
    .job-photo-viewer-modal,
    .whats-new-modal
  ){
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.landing-visible) .mobile-sheet,
  body:not(.landing-visible) .mobile-navigation-sheet{
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.landing-visible) .notification-panel{
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 104px)!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.landing-visible).mobile-sheet-open{
    overflow:hidden!important;
  }

  body:not(.landing-visible).mobile-sheet-open :where(
    .mobile-bottom-nav,
    .mobile-fab,
    .ask-osrilo-launcher
  ){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body:not(.landing-visible) :where(
    .account-menu-panel,
    .tutorial-coach-card,
    .customer-more-popover,
    .card-action-popover,
    .page-filter-more-grid,
    .inline-action-menu>div,
    .price-book-quick-edit-grid
  ){
    max-height:calc(100dvh - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 104px)!important;
    max-width:calc(100vw - var(--osrilo-safe-left) - var(--osrilo-safe-right) - 16px);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body:not(.landing-visible) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ){
    max-width:100%;
  }

  body:not(.landing-visible) :where(
    .modal,
    .mobile-sheet,
    .onboarding-card-first-run,
    .auth-card
  ){
    scroll-padding-bottom:calc(110px + var(--osrilo-safe-bottom));
  }
}

@media(max-width:390px){
  body:not(.landing-visible) #businessOnboardingScreen .onboarding-card-first-run{
    padding-right:11px!important;
    padding-left:11px!important;
  }

  body:not(.landing-visible) #businessOnboardingScreen .onboarding-actions{
    margin-right:-11px!important;
    margin-left:-11px!important;
    padding-right:11px!important;
    padding-left:11px!important;
  }

  body:not(.landing-visible) .tutorial-modal{
    padding-right:11px!important;
    padding-left:11px!important;
  }

  body:not(.landing-visible) .tutorial-modal-actions{
    margin-right:-11px!important;
    margin-left:-11px!important;
    padding-right:11px!important;
    padding-left:11px!important;
  }
}


/* H49 — Monday 28 interaction and overlay hardening.
   Feedback is a root-level layer above every product panel. Hidden interactive
   surfaces never intercept the first tap, and touch controls use direct manipulation. */
.osrilo-global-feedback-layer{
  position:fixed;
  inset:0;
  z-index:7200;
  overflow:visible;
  pointer-events:none;
}

.osrilo-global-feedback-layer .toast{
  z-index:1!important;
  pointer-events:none!important;
}

body:not(.landing-visible) #confirmModal:not([hidden]){
  z-index:7100!important;
}

body:not(.landing-visible) :where(
  .modal-backdrop[hidden],
  .mobile-sheet-backdrop[hidden],
  .notification-panel[hidden],
  .account-menu-panel[hidden]
){
  display:none!important;
  pointer-events:none!important;
}

body:not(.landing-visible) :where(
  button:not([disabled]),
  [role="button"],
  summary,
  a[href],
  input[type="button"],
  input[type="submit"]
){
  touch-action:manipulation;
}

/* Photo corrections and Price Book copy use a consistent left reading edge. */
body:not(.landing-visible) .dashboard-page,
body:not(.landing-visible) .modal{ text-align:left; }
body:not(.landing-visible) .dashboard-page :where(.section-heading,.section-help,.empty-state),
body:not(.landing-visible) .modal :where(.field,.empty-state){ text-align:left; }
body:not(.landing-visible) .dashboard-page .empty-state,
body:not(.landing-visible) .modal .empty-state{ padding-inline:16px; }

body:not(.landing-visible) #addItemModal .estimate-price-book-quick-main{
  width:100%;
  min-width:0;
  justify-content:stretch;
  justify-items:stretch;
  text-align:left;
}
body:not(.landing-visible) #addItemModal .estimate-price-book-quick-item{
  text-align:left;
}
body:not(.landing-visible) #addItemModal .add-item-choice-grid button{
  justify-content:flex-start;
  text-align:left;
}

body:not(.landing-visible) #materialsPage .price-book-start-here{
  position:relative;
  z-index:3;
  text-align:left;
}
body:not(.landing-visible) #materialsPage .inline-action-menu>div{
  width:min(274px,calc(100vw - 28px));
  min-width:0;
  gap:6px;
  padding:8px;
}
body:not(.landing-visible) #materialsPage .inline-action-menu>div button{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  width:100%;
  min-width:0;
  min-height:46px;
  padding:9px 12px;
  text-align:left;
  white-space:normal;
  line-height:1.25;
}
body:not(.landing-visible) #materialsPage .inline-action-menu>div button small{
  display:block;
  margin:0;
  line-height:1.25;
}

.job-photo-info-editor{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:15px;
  border:1px solid #cbdedb;
  border-radius:12px;
  background:#f7fbfa;
  text-align:left;
}
.job-photo-info-note{margin:0;color:#5e7076;font-size:12px}
.job-photo-info-editor .field{margin:0}
.job-photo-info-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:600px){.job-photo-info-fields{grid-template-columns:1fr}}
@media(max-width:760px){
  body:not(.landing-visible) #materialsPage .inline-action-menu>div{
    width:auto;
    left:12px;
    right:12px;
  }
}

/* Friday October 2: explain projected service time on the field screen. */
.day-forecast { margin: 12px 0 18px; padding: 16px; border: 1px solid var(--border-color, #d6e2e9); border-radius: 14px; background: var(--surface-color, #fff); text-align: left; }
.day-forecast.is-warning { border-left: 4px solid #d97706; }
.day-forecast-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.day-forecast-heading > div { display: grid; gap: 4px; }
.day-forecast-heading strong { font-size: 1.1rem; }
.day-forecast-heading small, .day-forecast-heading > span { color: var(--muted-text, #536b7a); font-size: .85rem; }
.day-forecast-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.day-forecast-metrics > div { display: grid; gap: 5px; text-align: left; }
.day-forecast-metrics span { font-size: .82rem; color: var(--muted-text, #536b7a); }
.day-forecast p { margin: 10px 0; line-height: 1.5; }
.day-forecast-warnings { padding-left: 20px; line-height: 1.5; }
.day-forecast details { border-top: 1px solid #e0e8ed; padding: 12px 0; }
.day-forecast summary { cursor: pointer; font-weight: 650; }
.day-forecast-sees ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.day-forecast-sees li { display: grid; gap: 4px; }
.day-forecast-sees li span { font-size: .9rem; color: var(--muted-text, #536b7a); }
.day-forecast-correction { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.day-forecast-correction label { grid-column: 1 / -1; }
.day-forecast-correction input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.day-forecast-correction small { grid-column: 1 / -1; }
.day-operations-item.is-forecast-cause { border-left: 4px solid #d97706; }
.day-operations-item.is-over-capacity { border-left: 4px solid #b45309; }
.day-operations-main, .day-operations-time, .weather-reschedule-item-copy { text-align: left; }
@media (max-width: 600px) { .day-forecast-metrics { grid-template-columns: 1fr; } .day-forecast-correction { grid-template-columns: 1fr; } .day-forecast { padding: 12px; } }

/* Guided Help shares the global feedback host above product panels. */
.osrilo-global-feedback-layer .customer-walkthrough-card{position:fixed;z-index:0;pointer-events:auto;box-sizing:border-box;padding:16px;border:1px solid #5bada2;border-radius:16px;background:#fff;color:#172126;box-shadow:0 12px 42px #0f172a33;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.customer-walkthrough-card h3{font-size:18px;margin:6px 0}.customer-walkthrough-card p{font-size:14px;line-height:1.5;margin:6px 0 12px}.customer-walkthrough-actions{display:flex;flex-wrap:wrap;gap:8px}.customer-walkthrough-actions button{min-height:44px;padding:8px 12px}.customer-walkthrough-highlight{position:fixed;pointer-events:none;border:3px solid #0f8f83;border-radius:8px;box-shadow:0 0 0 3px #fff9}
.customer-walkthrough-card [hidden],.customer-walkthrough-highlight[hidden]{display:none!important}
body.customer-walkthrough-open #customerFormCard .customer-editor-modal{scroll-padding-block:100px 300px;padding-bottom:300px}

/* Shared keyboard frame: preserve the shell; resize/scroll only the active panel. */
@media(max-width:820px){
  body:not(.landing-visible).osrilo-panel-editing{min-height:var(--osrilo-shell-height)!important}
  body.osrilo-panel-editing .osrilo-editing-panel{
    position:fixed!important;
    top:var(--osrilo-panel-top,0px)!important;
    bottom:auto!important;
    height:var(--osrilo-panel-height)!important;
    max-height:var(--osrilo-panel-height)!important;
    box-sizing:border-box;
    overscroll-behavior:contain;
  }
  body.osrilo-panel-editing .modal-backdrop.osrilo-editing-panel .modal{
    max-height:calc(var(--osrilo-panel-height) - var(--osrilo-safe-top) - var(--osrilo-safe-bottom) - 16px)!important;
    min-height:0;
    overflow-y:auto;
  }
  body.osrilo-panel-editing .ask-osrilo-dock.osrilo-editing-panel{
    height:calc(var(--osrilo-panel-height) - 16px)!important;
    margin-top:8px;
  }
  body.osrilo-panel-editing #askOsriloSection.osrilo-editing-panel{
    left:8px;right:8px;width:auto;z-index:2050;margin:0;
    display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;
    overflow:hidden;background:var(--surface,#fff);
  }
  body.osrilo-panel-editing #askOsriloSection.osrilo-editing-panel .ask-osrilo-transcript{
    min-height:0;max-height:none;overflow-y:auto;
  }
  /* The #46 report action adds a header control. Keep the composer reachable
     in #47's keyboard frame while retaining the title and report action. */
  body.osrilo-keyboard-open #askOsriloSection.osrilo-editing-panel .ask-osrilo-heading .page-subtitle{display:none}
  body.osrilo-panel-editing :where(input,textarea,select){font-size:16px!important}
  body.osrilo-keyboard-open :where(.mobile-bottom-nav,.mobile-fab,.ask-osrilo-launcher){visibility:hidden!important;pointer-events:none!important}
  body.osrilo-panel-editing .ask-osrilo-flag-form{scroll-margin:12px}
  body.osrilo-panel-editing .ask-osrilo-flag-form textarea{max-height:80px}
}