/* Keep the desktop navigation when the browser spans the unfolded display. */
@media screen and (min-width:600px) and (max-width:1100px){
  body.app-ready{--bc-app-sidebar:clamp(154px,21vw,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 #bc-real-sidebar #bc-sidebar-title{
    font-size:11px!important;
    text-align:left!important;
    padding:8px 12px!important;
  }
  body.app-ready #bc-real-sidebar > #nav button{
    font-size:12px!important;
    text-align:left!important;
    padding:10px 9px!important;
  }
  body.app-ready #bc-real-sidebar #nav .bc-nav-label{display:inline!important}
  body.app-ready .main-header .brandbar{
    padding:10px 14px!important;
    min-height:68px!important;
  }
  body.app-ready main{padding:16px 14px 30px!important}
  body.app-ready #bc-command-bar .bc-command-copy,
  body.app-ready #bc-command-bar .bc-command-copy small{display:block!important}
  body.app-ready #bc-command-bar .bc-command-left{flex:1 1 auto}
  body.app-ready #bc-command-bar .bc-command-right{gap:6px}
  body.app-ready .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.app-ready #prModal .pr-form-layout,
  body.app-ready #rfqModal .form.erp-form,
  body.app-ready #poModal .form.erp-form,
  body.app-ready .erp-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.app-ready #prModal .pr-form-layout .purpose,
  body.app-ready .erp-form .span-2{grid-column:1/-1!important}
}

/* Fit dashboard and department panels side by side on the inner screen. */
@media screen and (min-width:720px) and (max-width:1100px){
  body.app-ready #dashboard .bc-dash-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.app-ready #dashboard .bc-dash-grid-main,
  body.app-ready #dashboard .bc-dash-grid-bottom,
  body.app-ready main .grid,
  body.app-ready .bc-wh-grid,
  body.app-ready .bc-hr-grid-2,
  body.app-ready .bc-report-grid,
  body.app-ready .bc-approval-grid,
  body.app-ready .bc-exec-grid,
  body.app-ready .erp-bottom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.app-ready #dashboard .bc-dash-hero{
    flex-direction:row!important;
    flex-wrap:wrap;
    align-items:center!important;
  }
  body.app-ready #dashboard .bc-dash-kpi{padding:10px;gap:8px}
  body.app-ready #dashboard .bc-dash-kpi .icon{width:32px;height:32px}
  body.app-ready #dashboard .bc-dash-panel-head{flex-wrap:wrap;gap:6px}
}