/* Installed applications keep decorative surfaces at the large viewport size.
   Scroll locking never fixes the document itself. Controls remain inside the
   dynamic viewport when WebKit reports a smaller usable height. */
@media screen {
  html:root {
    --sg-navigation-height: 100vh;
    --sg-navigation-gap: 0px;
  }
  @supports (height: 100dvh) {
    html:root { --sg-navigation-height: 100dvh; }
  }
  html:root :is(.suite-sidebar-scroll,.nav-scroll,#suite-mobile-navigation) {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (display-mode: standalone) {
  @supports (height: 100lvh) {
    html:root {
      --sg-navigation-height: 100lvh;
      --sg-navigation-gap: max(0px,100lvh - 100dvh);
      --sg-viewport-height: 100lvh;
    }
  }
  html:root .suite-app-boot {
    min-height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
  }
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root {
    --sg-pattern-frame-height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
  }
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after {
    bottom: auto;
    height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
  }

  /* Full-screen scrims share the same extent as the installed splash. */
  html:root :is(.menu-backdrop,.sidebar-overlay,.sidebar-scrim,.nav-veil,.mobile-scrim,#expanded-nav .nav-scrim),
  html:root #suite-mobile-navigation::backdrop {
    bottom: auto;
    height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
  }

  @media (max-width:700px) {
    html[data-sg-app="punch"] #sidebar,
    html[data-sg-app="facturation"] .app>.sidebar,
    html[data-sg-app="tracker"] .app-shell>.sidebar,
    html[data-sg-app="suite"] #suite-mobile-navigation {
      bottom: auto;
      height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
      max-height: none;
      box-sizing: border-box;
    }
    html[data-sg-app="punch"] #sidebar {
      padding-bottom: calc(max(18px,env(safe-area-inset-bottom,0px)) + var(--sg-navigation-gap));
    }
    html[data-sg-app="facturation"] .app>.sidebar {
      padding-bottom: calc(13px + env(safe-area-inset-bottom,0px) + var(--sg-navigation-gap));
    }
    html[data-sg-app="tracker"] .app-shell>.sidebar {
      padding-bottom: calc(22px + env(safe-area-inset-bottom,0px) + var(--sg-navigation-gap));
    }
    html[data-sg-app="suite"] #suite-mobile-navigation {
      padding-bottom: calc(28px + env(safe-area-inset-bottom,0px) + var(--sg-navigation-gap));
    }
  }
  @media (max-width:800px) {
    html[data-sg-app="comptabilite"] #accounting-navigation {
      bottom: auto;
      height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
      max-height: none;
      padding-bottom: calc(max(18px,env(safe-area-inset-bottom,0px)) + var(--sg-navigation-gap));
      box-sizing: border-box;
    }
    html[data-sg-app="dispatch"] .dispatch-app>.sidebar {
      bottom: auto;
      height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1) - 56px - env(safe-area-inset-top,0px));
      max-height: none;
      padding-bottom: calc(max(25px,env(safe-area-inset-bottom,0px)) + var(--sg-navigation-gap));
      box-sizing: border-box;
    }
  }
  @media (max-width:780px) {
    html[data-sg-app="atelier"] .sidebar {
      bottom: auto;
      height: calc(var(--sg-navigation-height,100vh) / var(--sg-ui-scale,1));
      max-height: none;
      padding-bottom: calc(20px + env(safe-area-inset-bottom,0px) + var(--sg-navigation-gap));
      box-sizing: border-box;
    }
  }
  /* QG's drawer stays above its existing bottom navigation. It is not a
     full-height side panel; only its backdrop is extended. */
}

/* Hamburger drawers keep their glass surface without an optical frame.
   Transparent borders retain the existing spacing. Only the drawer's direct
   decorative edge is hidden; controls and their focus indicators are intact. */
@media screen {
  html[data-sg-app="command-center"] #expanded-nav>.nav-drawer {
    border-color: transparent !important;
    box-shadow: var(--sg-drawer-shadow,0 14px 40px -18px var(--glass-shadow,rgba(0,0,0,.3))) !important;
  }
  html[data-sg-app="command-center"] #expanded-nav>.nav-drawer>.sg-reflection-edge {
    display: none !important;
  }
}
@media screen and (max-width:700px) {
  html[data-sg-app="punch"] #sidebar,
  html[data-sg-app="suite"] #suite-mobile-navigation,
  html[data-sg-app="facturation"] .app>.sidebar,
  html[data-sg-app="tracker"] .app-shell>.sidebar {
    border-color: transparent !important;
    box-shadow: var(--sg-drawer-shadow,0 14px 40px -18px var(--glass-shadow,rgba(0,0,0,.3))) !important;
  }
  html[data-sg-app="punch"] #sidebar>.sg-reflection-edge,
  html[data-sg-app="suite"] #suite-mobile-navigation>.sg-reflection-edge,
  html[data-sg-app="facturation"] .app>.sidebar>.sg-reflection-edge,
  html[data-sg-app="tracker"] .app-shell>.sidebar>.sg-reflection-edge {
    display: none !important;
  }
}
@media screen and (max-width:800px) {
  html[data-sg-app="comptabilite"] #accounting-navigation,
  html[data-sg-app="dispatch"] .dispatch-app>.sidebar {
    border-color: transparent !important;
    box-shadow: var(--sg-drawer-shadow,0 14px 40px -18px var(--glass-shadow,rgba(0,0,0,.3))) !important;
  }
  html[data-sg-app="comptabilite"] #accounting-navigation>.sg-reflection-edge,
  html[data-sg-app="dispatch"] .dispatch-app>.sidebar>.sg-reflection-edge {
    display: none !important;
  }
}
@media screen and (max-width:780px) {
  html[data-sg-app="atelier"] #sidebar {
    border-color: transparent !important;
    box-shadow: var(--sg-drawer-shadow,0 14px 40px -18px var(--glass-shadow,rgba(0,0,0,.3))) !important;
  }
  html[data-sg-app="atelier"] #sidebar>.sg-reflection-edge {
    display: none !important;
  }
}

@media screen and (prefers-reduced-transparency:reduce),
       screen and (prefers-contrast:more),
       screen and (forced-colors:active) {
  html:root { --sg-drawer-shadow: none; }
}
