/* v680 - desktop viewing drawer: Outcome bar removed, its buttons fill the two empty spots. Roll back: remove this <link> in index.html. */
@media (min-width:721px){
  /* row 1: Confirmation | Reception | [Mark lost  Reject  Delete] ; the Viewing Pass takes the full row below */
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-primary-action-grid{ align-items:stretch; }
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-pass-action{ flex:1 1 100%!important; }
  #vcDetailModal .vc-ticket-modal .vcd-danger{ flex:1 1 230px; min-width:0; display:flex; gap:6px; align-items:stretch; }
  #vcDetailModal .vc-ticket-modal .vcd-danger .vc-secondary-action{
    flex:1 1 0; min-width:0; height:34px!important; padding:0 8px!important; justify-content:center; gap:5px!important;
    font-size:11px!important; border-radius:8px!important; white-space:nowrap;
  }
  #vcDetailModal .vc-ticket-modal .vcd-danger .vc-secondary-action span{ overflow:hidden; text-overflow:ellipsis; }
  /* row 2: Viewing Pass ......... Edit request | Open unit */
  #vcDetailModal .vc-ticket-modal .vcd-more{ margin-left:auto; display:flex; gap:6px; align-items:center; padding-left:10px; border-left:1px solid rgba(120,130,150,.28); }
  #vcDetailModal .vc-ticket-modal .vcd-more .vc-booking-action{ height:26px!important; padding:0 12px!important; white-space:nowrap; }
  /* row 3: the contact buttons share the whole width */
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-action-section-contact{ flex:1 1 100%; }
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-contact-action-row{ width:100%; }
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-contact-action{ flex:1 1 0; justify-content:center; }
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-contact-action:nth-child(3){ flex-grow:1.6; }
  #vcDetailModal .vc-ticket-modal .vcd-desk .vc-action-section-booking.vcd-empty{ display:none!important; }
}

/* Activity log (desktop): the round icon is absolutely positioned at left:0 (16px wide) and needs 26px of left padding on the row.
   css/124 sets that padding, but css/238 (ID selector, !important, desktop) resets it to "5px 0", so the icon sat on top of the first
   letters ("Confirmation" -> "nfirmation") and its navy background erased them. Restore the offset with a selector that wins over 238. */
@media (min-width:721px){
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item{ padding:5px 0 5px 26px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>i:first-child{ left:0!important; top:6px!important; width:18px!important; height:18px!important; display:grid!important; place-items:center; z-index:1; background:transparent!important; box-shadow:none!important; }
}

/* Activity icon hover: the wiggle (css/250) moves the <i>; it used to carry a solid navy square (css/103, there to hide the timeline rail, which is hidden on desktop anyway),
   so a dark box wiggled over the lighter hover tint. The box is now transparent: only the glyph moves. */