/* Foldable and tablet layout. Width changes automatically as the browser moves
   between the outer display and the full inner display. */

@media screen and (max-width:1100px){
  body.app-ready main .bc-table-shell > table{
    min-width:max(100%,640px)!important;
    max-width:none!important;
    table-layout:auto!important;
  }
  body.app-ready main .bc-table-shell{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* An opened phone has room for navigation and the working page together. */
@media screen and (min-width:721px) and (max-width:1100px){
  body.app-ready{--bc-app-sidebar:clamp(176px,22vw,210px)}
  body.app-ready #bc-real-sidebar,
  body.app-ready.bc-menu-open #bc-real-sidebar{
    width:var(--bc-app-sidebar)!important;
    max-width:none!important;
    transform:none!important;
  }
  body.app-ready .main-header,
  body.app-ready header.main-header,
  body.app-ready main,
  body.app-ready footer{
    width:calc(100% - var(--bc-app-sidebar))!important;
    margin-left:var(--bc-app-sidebar)!important;
  }
  body.app-ready #bc-mobile-menu-toggle,
  body.app-ready #bc-sidebar-overlay,
  body.app-ready #bc-mobile-backdrop{display:none!important}
  body.app-ready .main-header .brandbar{
    padding:10px 16px!important;
    min-height:68px!important;
  }
  body.app-ready main{padding:18px 16px 32px!important}
  body.app-ready #dashboard .bc-dash-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.app-ready #dashboard .bc-dash-grid-main,
  body.app-ready #dashboard .bc-dash-grid-bottom{
    grid-template-columns:1fr!important;
  }
  body.app-ready #dashboard .bc-dash-hero{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  body.app-ready #prModal .pr-form-layout{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.app-ready #prModal .pr-form-layout .purpose{grid-column:1/-1!important}
  body.app-ready #rfqModal .form.erp-form,
  body.app-ready #poModal .form.erp-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media screen and (min-width:900px) and (max-width:1100px){
  body.app-ready #dashboard .bc-dash-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* On the outer screen, content fills the width and the menu remains a drawer. */
@media screen and (max-width:720px){
  body.app-ready{--bc-app-sidebar:0px}
  body.app-ready .main-header,
  body.app-ready header.main-header,
  body.app-ready main,
  body.app-ready footer{
    width:100%!important;
    margin-left:0!important;
  }
  body.app-ready #bc-real-sidebar{
    width:min(270px,85vw)!important;
    transform:translateX(-105%)!important;
  }
  body.app-ready.bc-menu-open #bc-real-sidebar{
    transform:translateX(0)!important;
  }
  body.app-ready main{padding:16px 12px 30px!important}
  body.app-ready .main-header .brandbar{padding-left:62px!important}
  body.app-ready #dashboard .bc-dash-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.app-ready #dashboard .bc-dash-grid-main,
  body.app-ready #dashboard .bc-dash-grid-bottom{
    grid-template-columns:1fr!important;
  }
  body.app-ready #dashboard .bc-dash-hero{flex-wrap:wrap;align-items:flex-start}
  body.app-ready #prModal .modalbox.erp-modalbox,
  body.app-ready #rfqModal .modalbox.erp-modalbox,
  body.app-ready #poModal .modalbox.erp-modalbox{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
  }
  body.app-ready #prModal .pr-form-layout,
  body.app-ready #rfqModal .form.erp-form,
  body.app-ready #poModal .form.erp-form{
    grid-template-columns:1fr!important;
  }
}

@media screen and (max-width:420px){
  body.app-ready #dashboard .bc-dash-kpis{grid-template-columns:1fr!important}
}

@media print{
  body.app-ready #bc-real-sidebar{display:none!important}
  body.app-ready .main-header,
  body.app-ready header.main-header,
  body.app-ready main,
  body.app-ready footer{width:100%!important;margin-left:0!important}
}