@import url('/styles/order-fulfillment.css');
.fulfillment-next{margin-bottom:24px}
.fulfillment-history-note{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:12px;background:var(--staff-surface,#fff);padding:18px 22px;margin:0 0 24px}
.fulfillment-history-note strong{font-size:15px}.fulfillment-history-note p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.fulfillment-history-note .btn{flex-shrink:0}
@media(max-width:680px){.fulfillment-history-note{align-items:flex-start;flex-direction:column}.fulfillment-next .actions .btn{white-space:normal}}
.fulfillment-resource-cell>a,.fulfillment-resource-cell>small{display:block}.fulfillment-resource-cell>small{margin-top:6px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.fulfillment-resource-cell>a{font-weight:600}
.fulfillment-owner{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;margin:-8px 0 24px;font-size:14px;color:var(--muted)}.fulfillment-owner a{font-weight:600}.fulfillment-owner .mono{overflow-wrap:anywhere}
.fulfillment-next{display:flex;justify-content:space-between;gap:24px;align-items:center;background:var(--staff-surface,#fff);border:1px solid var(--line);border-left:4px solid var(--primary,#2a51bd);border-radius:14px;padding:24px}.fulfillment-next>div:first-child{max-width:720px}.fulfillment-next h2{font-size:24px;margin:6px 0}.fulfillment-next p{font-size:15px;color:var(--muted);line-height:1.7;margin:10px 0 0}.fulfillment-eyebrow{font-size:13px;font-weight:600;color:var(--muted)}.fulfillment-next .actions{flex-wrap:wrap;max-width:380px;justify-content:flex-end}.fulfillment-attention{padding:24px;background:var(--staff-surface,#fff);border:1px solid var(--line);border-radius:12px}.fulfillment-attention p{margin:8px 0 0;color:var(--muted)}
.fulfillment-filter{display:flex;align-items:end;gap:14px;padding:24px;flex-wrap:wrap}.fulfillment-filter label{display:grid;gap:8px;font-size:14px}.fulfillment-filter .fulfillment-query{flex:1;min-width:220px}.fulfillment-filter input,.fulfillment-filter select{height:46px}.fulfillment-filter .text-link{padding:12px 0}.fulfillment-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;color:var(--muted);font-size:14px}.fulfillment-pagination>div{display:flex;gap:8px}.fulfillment-events{list-style:none;padding:24px;margin:0;display:grid;gap:20px}.fulfillment-events li{display:grid;gap:6px;border-left:2px solid var(--line);padding-left:16px}.fulfillment-events span,.fulfillment-events p{font-size:14px;color:var(--muted);margin:0}.fulfillment-advanced{padding:16px;border:1px solid var(--line);border-radius:10px;margin-top:12px}.fulfillment-advanced summary{cursor:pointer;font-size:14px;font-weight:600}
@media(max-width:1000px){.fulfillment-next{display:block}.fulfillment-next .actions{margin-top:20px;justify-content:flex-start;max-width:none}}@media(max-width:600px){.fulfillment-filter label,.fulfillment-filter .fulfillment-query{width:100%;min-width:0}.fulfillment-pagination{flex-wrap:wrap}}

.fulfillment-attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.fulfillment-attention > div { max-width: 760px; }
.fulfillment-attention > .btn { flex-shrink: 0; }
.fulfillment-action-summary {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--staff-hover, #f2f6fb);
}
.fulfillment-action-summary > strong { font-size: 17px; }
.fulfillment-action-summary p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.fulfillment-action-summary dl { margin: 16px 0 0; }
.fulfillment-action-summary dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
}
.fulfillment-action-summary dt { color: var(--muted); }
.fulfillment-action-summary dd { margin: 0; font-weight: 600; }
.fulfillment-action-summary .fulfillment-total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fulfillment-total dd { font-size: 22px; }
.fulfillment-early-note {
  border-left: 3px solid var(--staff-accent, #2a51bd);
  padding-left: 16px;
}
.fulfillment-early-note p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.fulfillment-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.fulfillment-field-grid label { min-width: 0; }
.fulfillment-advanced[open] {
  display: grid;
  gap: 18px;
}
@media (max-width: 680px) {
  .fulfillment-attention { align-items: flex-start; flex-direction: column; }
  .fulfillment-field-grid { grid-template-columns: minmax(0, 1fr); }
  .fulfillment-action-summary { padding: 16px; }
  .fulfillment-action-summary dl > div { flex-wrap: wrap; gap: 6px; }
}
/* Order registration keeps recipient selection and buyer details in one form. */
#action-dialog:has([data-sale-fields]), #action-dialog:has(.paid-sale-customer) { width: min(760px, calc(100vw - 32px)); }
[data-sale-fields]:not([hidden]) { display: grid; gap: 16px; }
[data-sale-picker] { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
[data-sale-picker] summary { cursor: pointer; flex-wrap: wrap; }
[data-sale-picker] .task-pick-result { background: var(--surface, white); }
.paid-sale-customer { border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin: 4px 0 0; display: grid; gap: 14px; min-width: 0; }
.paid-sale-customer legend { font-size: 16px; font-weight: 700; padding: 0 10px 0 0; }
.paid-sale-customer .help { margin: 0; }