/* HayOrder 1.1.31: readable order details, stopped final timers and horizontal workflow. */

/* All available actions share one row and one visual rhythm. */
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;justify-content:center!important;gap:10px!important;width:min(100%,790px)!important;margin-inline:auto!important
}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons form,
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>button{display:block!important;width:100%!important;min-width:0!important;margin:0!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons button{
  width:100%!important;min-width:0!important;min-height:52px!important;padding:9px 12px!important;border-radius:13px!important;font-size:13px!important;font-weight:780!important;line-height:1.25!important;letter-spacing:-.01em!important;white-space:normal!important
}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>.ho54-print:only-child{grid-column:2!important}

/* The next-step action follows the colour of the target status. */
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-action-accept{border-color:#38d98d!important;color:#062817!important;background:linear-gradient(135deg,#52e3a0,#2fca80)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-action-processing{border-color:#efa64b!important;color:#2b1904!important;background:linear-gradient(135deg,#ffc26b,#e89a38)!important;box-shadow:0 8px 20px rgba(232,154,56,.15)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-action-ready{border-color:#38cbe8!important;color:#05242c!important;background:linear-gradient(135deg,#65dcf1,#2ebbd8)!important;box-shadow:0 8px 20px rgba(46,187,216,.15)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-action-complete{border-color:#73d98d!important;color:#092711!important;background:linear-gradient(135deg,#91e7a5,#5dcc7a)!important;box-shadow:0 8px 20px rgba(93,204,122,.15)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-cancel{border-color:#e3707d!important;color:#fff!important;background:linear-gradient(135deg,#b94755,#983744)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-print{border-color:#fff!important;color:#15202a!important;background:#fff!important;box-shadow:none!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-print .icon{color:#15202a!important}

/* A final state freezes at 00:00 and never receives overdue styling. */
#orders-ajax-root.ho-orders-127 .ho122-status-elapsed.is-stopped{color:var(--detail-soft,#aab6c0)!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho128-summary-row:has(.ho122-status-elapsed.is-overdue){background:transparent!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho128-summary-row:has(.ho122-status-elapsed.is-stopped){background:transparent!important}

/* A real left-to-right timeline replaces the separate status tiles. */
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho55-timeline-frame{overflow:hidden!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-timeline{
  position:relative!important;display:flex!important;grid-template-columns:none!important;gap:0!important;align-items:flex-start!important;margin:0!important;padding:4px 2px 10px!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;scrollbar-width:thin!important;background:linear-gradient(var(--detail-line),var(--detail-line)) 18px 19px/calc(100% - 36px) 2px no-repeat!important
}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event{
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:start!important;flex:1 0 150px!important;min-width:150px!important;min-height:88px!important;gap:9px!important;margin:0!important;padding:0 13px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event::before,
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event::after{display:none!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-dot{
  position:relative!important;z-index:2!important;display:block!important;width:13px!important;height:13px!important;margin:9px 0 2px!important;border:3px solid #718394!important;border-radius:50%!important;background:#13202c!important;box-shadow:0 0 0 5px #13202c!important
}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event.is-done .ho-timeline-dot{border-color:#3cd992!important;background:#3cd992!important;box-shadow:0 0 0 5px #13202c!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event.is-cancelled .ho-timeline-dot{border-color:#ed7180!important;background:#ed7180!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event strong{font-size:13px!important;line-height:1.3!important;font-weight:760!important}
body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event small{margin-top:5px!important;font-size:10.5px!important;line-height:1.4!important}

/* Responsive type remains clearly readable without making the dialog wider. */
@media(max-width:700px){
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-detail-header{padding:15px 16px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-detail-identity-line h2{font-size:23px!important;line-height:1.12!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-order-detail-kicker{font-size:10px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .pill{font-size:11px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-card-title,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-order-section-head strong,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho55-section-heading h3{font-size:17px!important;line-height:1.3!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-contact dt,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho128-summary-row>span{font-size:9.5px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho54-contact dd,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho128-summary-row strong{font-size:14px!important;line-height:1.35!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho128-summary-row small,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-order-section-head span,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .muted{font-size:11px!important;line-height:1.45!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-order-product strong{font-size:13.5px!important;line-height:1.35!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho56-product-options{font-size:11px!important;line-height:1.4!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho55-notes-section p,
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho55-test-tools-copy>span{font-size:12px!important;line-height:1.5!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;width:100%!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>form:has(.ho-action-accept),
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>form:has(.ho54-primary-action){grid-column:auto!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons button{min-height:50px!important;padding:8px 6px!important;font-size:12.5px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons>.ho54-print{grid-column:auto!important}
}
@media(max-width:430px){
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-modal-footer{padding:9px 8px max(9px,env(safe-area-inset-bottom))!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons{gap:5px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho68-footer-buttons button{min-height:48px!important;padding:7px 4px!important;font-size:11.5px!important;border-radius:10px!important}
  body #orders-ajax-root.ho-orders-127 .ho124-detail .ho-timeline-event{flex-basis:142px!important;min-width:142px!important;padding-inline:10px!important}
}