/* ===== Cancel label (js/shipping-label-cancel.js) =====
   The confirm sheet and the VOID view build on the shared bottom sheet (css/sheet.css), and the history row's refund
   states (admin_tickets.html renderExistingShippingLabels) use the chips below. Tokens only. */
/* Both sheets open from INSIDE the shipping label modal (.modal-overlay, z 10000), so, like the print sheet (#4098,
   css/shipping-label-print.css), their scrim and sheet sit above the modal band, below toasts (20001) and the
   feedback widget (99997+). Two classes, so these win over .ds-sheet-scrim / .ds-sheet whatever the link order. */
.ds-sheet-scrim.slc-sheet-scrim { z-index: 10100; }
.ds-sheet.slc-sheet { z-index: 10101; }

.slc-summary-row { cursor: default; justify-content: space-between; }
.slc-summary-row:hover { background: var(--bg-card); }
.slc-summary-key { color: var(--text-muted); flex: 0 0 auto; }
.slc-summary-val { color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.slc-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.slc-error {
  margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: 8px;
  background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border);
}
.slc-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.85rem; }
.slc-actions .ds-btn { width: 100%; min-height: 44px; }
/* The destructive action: the solid danger token (white on it passes AA), not the brand blue. Hover as the other solid
   buttons do (design-system.css .btn-*-solid:hover). */
.ds-btn.slc-confirm { background: var(--danger-solid-bg); color: #fff; }
.ds-btn.slc-confirm:hover { background: var(--danger-solid-bg); opacity: 0.9; }
.slc-loading { margin: 0.5rem 0; color: var(--text-muted); }
.slc-void-img {
  display: block; margin: 0 auto 0.5rem; max-width: 100%; max-height: 62dvh; width: auto; height: auto;
  border: 1px solid var(--border); border-radius: 6px; background: white;
}
@media (min-width: 700px) {
  .slc-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 2rem)); border-radius: 14px; padding-bottom: 1rem; max-height: 90dvh;
  }
  .slc-sheet .ds-sheet-grab { display: none; }
  .slc-actions { flex-direction: row-reverse; }
  .slc-actions .ds-btn { width: auto; flex: 1 1 0; }
}

/* ---- The history row's refund state (scoped to the shipping modal's label list) ---- */
#ship-existing-labels .sh-label-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
#ship-existing-labels .sh-label-text { flex: 1 1 12rem; min-width: 0; font-size: 0.82rem; }
#ship-existing-labels .sh-label-row.is-voided .sh-label-text { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-muted); }
#ship-existing-labels .sh-label-actions { display: flex; gap: 0.35rem; flex: 0 0 auto; margin-left: auto; }
/* Phone: every row the same shape, whatever its chip: the label's text on its own line, then the chip and the buttons
   (frames 2026-10-08: with flex-wrap alone the rows took three different shapes by chip width). */
@media (max-width: 699px) {
  #ship-existing-labels .sh-label-text { flex-basis: 100%; }
}
#ship-existing-labels .sh-label-actions .ds-btn { font-size: 0.72rem; padding: 0.2rem 0.45rem; }
.slc-chip {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; text-decoration: none; vertical-align: 1px; white-space: nowrap;
}
.slc-chip-pending { background: var(--warning-bg); color: var(--warning-text); }
.slc-chip-done { background: var(--success-bg); color: var(--success-text); }
.slc-chip-failed { background: var(--error-bg); color: var(--error-text); }
/* The reason for a failed refund: plain muted text under the row, never inside the pill (loop326: a two-line pill reads
   as a blob on a phone). */
#ship-existing-labels .slc-reason { flex-basis: 100%; font-size: 0.78rem; color: var(--text-muted); overflow-wrap: anywhere; }