/* PhotoBridge v904R56 — one authoritative status strip + compact print/album order row.
   Fixes the desktop duplicate status controls and keeps each order's workflow states
   in the same top row as its summary/actions. */

/* Desktop: React renders both a mobile and desktop copy of the print status controls.
   Only the desktop copy may participate in layout. Older mirrored/proxy rows are also
   excluded here so a second four-button strip cannot reappear below the header. */
@media (min-width:821px){
  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;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Print and album use exactly the same four-button geometry. */
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop,
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop > .albumHeaderStatuses{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop > button,
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop > .albumHeaderStatuses > button{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  /* A live order is one compact information row. The disclosure wrappers are made
     transparent to CSS Grid, so the actual timeline can sit beside the order facts. */
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderCard.liveOrderCard{
    padding:11px 14px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveOrderMainRow{
    display:grid!important;
    grid-template-columns:minmax(150px,.56fr) minmax(235px,.82fr) minmax(430px,1.72fr) max-content!important;
    grid-auto-rows:max-content!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:8px!important;
    width:100%!important;
    min-width:0!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderHead{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderFacts{
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderFacts > span{
    min-height:44px!important;
    height:44px!important;
    padding:2px 8px!important;
    display:grid!important;
    align-content:center!important;
    justify-items:center!important;
    border-inline-start:1px solid #eef1f5!important;
  }

  /* Flatten disclosure wrappers only on desktop. Its workflow rail becomes column 3;
     secondary details/payments remain full-width rows below when they exist. */
  html body #root .ordersWorkspace.liveCustomerOrders .mobileOrderDisclosure,
  html body #root .ordersWorkspace.liveCustomerOrders .mobileOrderDisclosureBody,
  html body #root .ordersWorkspace.liveCustomerOrders .mobileOrderDisclosure.open > .mobileOrderDisclosureBody{
    display:contents!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .mobileOrderDisclosureToggle{
    display:none!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!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:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:3px 4px!important;
    border:1px solid #e4e7ec!important;
    border-radius:9px!important;
    background:#fff!important;
    display:grid!important;
    grid-template-columns:16px minmax(0,1fr)!important;
    grid-template-rows:1fr auto!important;
    grid-template-areas:"dot label" "dot time"!important;
    align-items:center!important;
    column-gap:4px!important;
    row-gap:0!important;
    overflow:hidden!important;
    text-align:right!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline > div::before{
    display:none!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline .timelineDot{
    grid-area:dot!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    min-height:16px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    font-size:8px!important;
    line-height:16px!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline b{
    grid-area:label!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:right!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .liveTimeline small{
    grid-area:time!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    font-size:6.8px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:right!important;
  }

  /* The actions are the last item in the row. The repeated date/delivery line is not
     needed here because the same information already exists in the detail content. */
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderQuickRail.compactOrderActionRail{
    grid-column:4!important;
    grid-row:1!important;
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderQuickRail.compactOrderActionRail > span{
    display:none!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderQuickActions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderQuickActions > button{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:52px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    margin:0!important;
    padding:0 9px!important;
    font-size:9px!important;
    line-height:1!important;
  }

  /* Everything other than the compact workflow rail gets a normal full-width row.
     The footer duplicates data already shown above, so keep it out of the compact card. */
  html body #root .ordersWorkspace.liveCustomerOrders .customerOrderFoot{
    display:none!important;
  }
  html body #root .ordersWorkspace.liveCustomerOrders .albumOrderSummary.compact,
  html body #root .ordersWorkspace.liveCustomerOrders .liveOrderExtras,
  html body #root .ordersWorkspace.liveCustomerOrders .prepayOrderCard,
  html body #root .ordersWorkspace.liveCustomerOrders .prepayPaidConfirmation,
  html body #root .ordersWorkspace.liveCustomerOrders .customerCourierCard,
  html body #root .ordersWorkspace.liveCustomerOrders .customerFixNotice{
    grid-column:1/-1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
    margin-top:2px!important;
  }
}

/* On phones keep only the mobile/proxy implementation. Never let the desktop copy join it. */
@media (max-width:820px){
  html body #root .photographerMain.photographerPrintWorkspace .photographerContextStatusesDesktop,
  html body #root .photographerMain.photographerPrintWorkspace .photographerAlbumHeaderStatusDesktop{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
}