/* OtoSend scroll hotfix 2026-08-23.
   One explicit viewport scroller avoids html/body overflow conflicts in
   Android WebView, installed PWA, iOS Safari, tablet and desktop browsers. */
html,
html.premium-auth-html{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

body,
body.app-page,
body.auth-page,
body.premium-auth,
body.menu-open,
body.app-is-loading{
  position:relative!important;
  width:100%!important;
  height:100vh!important;
  min-height:100vh!important;
  max-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}

@supports(height:100dvh){
  body,
  body.app-page,
  body.auth-page,
  body.premium-auth,
  body.menu-open,
  body.app-is-loading{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
  }
}

.app-shell,.main,.content,.footer{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
.app-shell,.main{min-height:100%!important}
.app-loader,.app-loader.is-visible{pointer-events:none!important;touch-action:pan-y!important}
.sidebar-backdrop{touch-action:pan-y!important}
.sidebar-nav{overflow-y:auto!important;touch-action:pan-y!important}

html.premium-auth-html body.premium-auth .premium-login-shell,
body.premium-auth .premium-login-intro,
body.premium-auth .premium-login-card{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
html.premium-auth-html body.premium-auth .premium-login-shell{min-height:100%!important}

/* Phone */
@media(max-width:767px){
  body.app-page{padding-top:0!important;padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
  .mobile-app-header{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;
    width:100%!important;transform:none!important;z-index:100!important;
  }
  .content{width:100%!important;padding:14px 12px 128px!important}
  .grid.stats,.quick-grid,.split,.dashboard-grid,.device-layout,.member-connect-grid,.form-grid,.form-grid-2{grid-template-columns:minmax(0,1fr)!important}
  .table-wrap{max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important}
  .page-devices .qr-status-card{padding:15px 13px!important;overflow:visible!important}
  .page-devices .qr-status-card .card-header{display:grid!important;gap:11px!important;margin-bottom:12px!important}
  .page-devices .qr-status-card .card-header h2{font-size:19px!important;line-height:1.25!important;margin:0!important}
  .page-devices .qr-status-card .card-subtitle{font-size:12px!important;line-height:1.55!important;margin:5px 0 0!important}
  .page-devices .connection-badges{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .page-devices .connection-badges .badge{width:100%!important;justify-content:center!important;white-space:normal!important;text-align:center!important;line-height:1.35!important;padding:8px 10px!important}
  .page-devices .qr-box[data-state="qr"]{min-height:0!important;height:auto!important;padding:13px 10px 16px!important;border-radius:20px!important}
  .page-devices .qr-box[data-state="qr"]::before{inset:7px!important;border-radius:16px!important}
  .page-devices .qr-box[data-state="qr"] .qr-live{gap:9px!important}
  .page-devices .qr-box[data-state="qr"] .qr-frame{
    width:min(240px,68vw)!important;max-width:240px!important;height:auto!important;aspect-ratio:1/1!important;
    padding:8px!important;border-radius:20px!important;
  }
  .page-devices .qr-box[data-state="qr"] .qr-frame img{padding:5px!important;border-radius:12px!important}
  .page-devices .qr-live-note{font-size:11px!important;line-height:1.35!important;padding:7px 10px!important}
  .page-devices .device-qr-help{margin:10px 2px 0!important;font-size:11px!important;line-height:1.45!important}
  .mobile-dock{bottom:max(8px,env(safe-area-inset-bottom))!important}
}

/* Tablet */
@media(min-width:768px) and (max-width:1180px){
  .main{margin-left:0!important;width:100%!important}
  .content{width:100%!important;max-width:1100px!important;margin-inline:auto!important;padding:22px!important}
  .split,.dashboard-grid,.device-layout,.member-connect-grid{grid-template-columns:minmax(0,1fr)!important}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* PC */
@media(min-width:1181px){
  .main{margin-left:272px!important;width:calc(100% - 272px)!important}
  .content,.footer{width:100%!important;max-width:1680px!important}
  .grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}