/* PhotoBridge v904R57 — compact desktop print/album status controls.
   Keep the correct header row in its original slot, but stop it stretching across
   the whole header. Order workflow stages are also reduced so they live inside
   the order summary row in both print and album views. */

@media (min-width:821px){
  /* Header status filters: compact group on the physical left of the same header. */
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    direction:rtl!important;
    width:max-content!important;
    min-width:0!important;
    max-width:calc(100% - 24px)!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin-left:0!important;
    margin-right:auto!important;
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop>button{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:92px!important;
    max-width:132px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:9px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    font-size:9.2px!important;
    line-height:1!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop>button b{
    font-size:8.2px!important;
    line-height:1!important;
    margin:0!important;
  }

  /* Album uses the same compact geometry and the same physical-left alignment. */
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop{
    display:block!important;
    visibility:visible!important;
    pointer-events:auto!important;
    width:max-content!important;
    min-width:0!important;
    max-width:calc(100% - 24px)!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin-left:0!important;
    margin-right:auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop>.albumHeaderStatuses{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    direction:rtl!important;
    width:max-content!important;
    min-width:0!important;
    max-width:100%!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop>.albumHeaderStatuses>button{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:92px!important;
    max-width:132px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:9px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    font-size:9.2px!important;
    line-height:1!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop>.albumHeaderStatuses>button b{
    font-size:8.2px!important;
    line-height:1!important;
    margin:0!important;
  }

  /* Do not allow any mirrored/proxy status row to become a second desktop row. */
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesMobile,
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusMobile,
  html body #root .photographerMain.photographerPrintWorkspace .pb752OrderStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb754AlbumStageRail,
  html body #root .photographerMain.photographerPrintWorkspace .pb755OrderStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb756PhotoStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb756AlbumStageStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb757PhotoStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb757AlbumStageStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb758PhotoStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb758AlbumStageStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb759PhotoStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb759AlbumStageStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb761PhotoStatuses,
  html body #root .photographerMain.photographerPrintWorkspace .pb761AlbumStageStatuses{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Order row: reserve less room for the workflow and keep it truly inside the card. */
  html body #root .ordersWorkspace.liveCustomerOrders .liveOrderMainRow{
    grid-template-columns:minmax(140px,.55fr) minmax(200px,.78fr) minmax(320px,1.45fr) max-content!important;
    column-gap:10px!important;
    row-gap:6px!important;
    align-items:center!important;
  }

  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline>div{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:1 1 0!important;
    min-width:0!important;
    width:auto!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    margin:0!important;
    padding:2px 3px!important;
    border:1px solid #e4e7ec!important;
    border-radius:7px!important;
    background:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline>div::before{display:none!important}
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline .timelineDot{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 12px!important;
    width:12px!important;
    height:12px!important;
    min-width:12px!important;
    min-height:12px!important;
    margin:0!important;
    font-size:6px!important;
    line-height:12px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline b{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    font-size:7.2px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }
  /* The timestamp was what made every stage tall; status remains visible in the compact row. */
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline small{
    display:none!important;
  }

  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderFacts>span{
    min-height:38px!important;
    height:38px!important;
    padding:2px 6px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderQuickActions>button{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    min-width:48px!important;
    padding:0 8px!important;
    font-size:8.5px!important;
  }
}

/* On mobile the workflow boxes should still fit inside an expanded order instead of
   turning into large tiles. This changes only their geometry, not disclosure behavior. */
@media (max-width:820px){
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:40px!important;
    gap:5px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline>div{
    min-height:40px!important;
    height:40px!important;
    max-height:40px!important;
    padding:4px!important;
    gap:2px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline .timelineDot{
    width:13px!important;height:13px!important;min-width:13px!important;min-height:13px!important;
    line-height:13px!important;font-size:6px!important
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline b{font-size:7.5px!important;line-height:1.1!important}
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline small{font-size:6px!important;line-height:1!important}
}