/* R1122 — the photographer's six primary destinations must occupy ONE row. 
   Earlier shared CSS assigns four columns to these six buttons, causing a second row. */
@media (max-width:820px){
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-auto-flow:column!important;
    column-gap:2px!important;
    row-gap:0!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    transform:none!important;
  }
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid > button{
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:3px 0!important;
    margin:0!important;
    line-height:1.2!important;
  }
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid > button em{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    font-size:8.6px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid > button .photographerBottomNavIcon{
    flex:0 0 auto!important;
    width:24px!important;
    height:24px!important;
  }

  /* R100F39 hides the native status rail to make room for its shared header.
     Restore access to exactly the existing React status filters INSIDE the order page. */
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > #pbR1122PrintOrderStatuses{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    padding:1px 2px 4px!important;
    position:relative!important;
    inset:auto!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    z-index:auto!important;
  }
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > #pbR1122PrintOrderStatuses > button{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    width:100%!important;
    min-height:45px!important;
    height:auto!important;
    margin:0!important;
    padding:6px 2px!important;
    border:1px solid #dce5f1!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#344054!important;
    box-shadow:none!important;
    font:800 9px/1.25 Vazirmatn,Tahoma,sans-serif!important;
    cursor:pointer!important;
    white-space:normal!important;
    text-align:center!important;
  }
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > #pbR1122PrintOrderStatuses > button b{
    font-size:11px!important;
    line-height:1!important;
    color:inherit!important;
    font-weight:950!important;
  }
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > #pbR1122PrintOrderStatuses > button.active{
    color:#fff!important;
    border-color:#315efb!important;
    background:#315efb!important;
  }
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > .customerOrderGrid.liveOrderGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:max-content!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    visibility:visible!important;
    opacity:1!important;
    align-content:start!important;
  }
}
@media(max-width:390px){
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid{column-gap:0!important}
  html body #root main.photographerMain > nav.photographerMobileUtilityRail.photographerBottomAppNav:not(.labBottomAppNav) > .mobileRailPrimaryGroup.photographerBottomAppNavGrid > button em{font-size:7.8px!important}
  html body #root main.photographerMain .ordersWorkspace.liveCustomerOrders > #pbR1122PrintOrderStatuses > button{font-size:8px!important;padding-inline:1px!important}
}
/* Keep one visible status rail while the original React buttons remain click targets. */
@media(max-width:820px){
 html body.pbF37PrintMode:has(#pbR1122PrintOrderStatuses) #root main.photographerMain .photographerContextStatuses{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
 }
}

@media(max-width:820px){html body.pbF37PrintMode #root main.photographerMain .ordersWorkspace.liveCustomerOrders:has(>.pb761PhotoStatuses)>#pbR1122PrintOrderStatuses{display:none!important}}