/* Operational history with audited cancellation. The table scrolls within its region; phones use cards. */
.order-history { min-width: 0; }
.history-head { margin-bottom: var(--space-4); }
.history-head > div > p { margin-top: var(--space-1); }
.history-filters { display: grid; grid-template-columns: minmax(17rem,1fr) minmax(15rem,1.5fr) minmax(10rem,.65fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.history-filters > div { min-width: 0; }
.history-filters label, .history-date-fields legend { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.history-filters input, .history-filters select { width: 100%; min-width: 0; min-height: 2.75rem; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.history-date-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.history-date-fields label { font-weight: var(--fw-normal); }
.history-toolbar, .history-presets, .history-result-line, .history-live { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.history-toolbar { justify-content: space-between; padding-block: var(--space-3); }
.history-presets .is-active { color: var(--brand-dark); background: var(--brand-tint); border-color: var(--brand-soft); }
.history-live { color: var(--ok); font-size: var(--text-xs); }
.history-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.history-live.is-offline { color: var(--warn); }
.history-live.is-invalid { color: var(--danger); }
.history-live > span:last-child { color: var(--muted); }
.history-result-line { justify-content: space-between; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-3); }
.history-result-line p { margin: 0; color: var(--ink-soft); font-weight: var(--fw-semibold); }
.history-result-line small { margin-left: auto; }
.history-table-wrap { padding: 0; overflow-x: auto; }
.history-table { width: 100%; min-width: 76rem; font-size: var(--text-sm); margin: 0; }
.history-table th { padding: var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.history-table td { padding: var(--space-3); vertical-align: top; line-height: 1.45; }
.history-table tbody tr, .history-card { cursor: pointer; }
.history-table tbody tr:nth-child(even), .history-card:nth-child(even) { background: var(--bg); }
.history-table tbody tr:hover, .history-table tbody tr:focus-within, .history-card:hover, .history-card:focus-within { background: var(--fill-muted); }
.history-table tbody tr:focus-visible, .history-card:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.history-column-number { width: 8rem; }
.history-column-customer { width: 24%; min-width: 14rem; }
.history-column-staff { width: 14%; min-width: 9rem; }
.history-column-times { width: 10rem; min-width: 10rem; }
.history-column-status { width: 8rem; }
.history-column-payment { width: 10rem; }
.history-column-amount { width: 7rem; text-align: right; }
.history-number { font-variant-numeric: var(--num); font-weight: var(--fw-bold); color: var(--brand-dark); white-space: nowrap; }
.history-date, .history-source, .history-contact, .history-address, .history-staff-name + small, .history-status + small, .history-payment-state, .history-assignment { display: block; }
.history-date, .history-source { color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.history-source { overflow-wrap: anywhere; }
.history-contact { color: var(--ink-soft); font-variant-numeric: var(--num); margin-top: var(--space-1); }
a.history-contact { text-decoration: underline; text-decoration-color: var(--line-strong); }
span.history-contact { width: fit-content; max-width: 100%; cursor: text; user-select: text; }
.history-customer-name, .history-staff-name, .history-payment-method, .history-address, .history-contact { overflow-wrap: anywhere; }
.history-address, .history-staff-name + small, .history-status + small, .history-assignment, .history-payment-state { font-size: var(--text-xs); color: var(--muted); }
.history-payment-method { font-weight: var(--fw-medium); }
.history-payment-state.is-paid { color: var(--ok); }
.history-assignment { margin-top: var(--space-1); }
.history-unknown { color: var(--muted); }
.history-times { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-1) var(--space-3); margin: 0; min-width: 8.5rem; }
.history-times > div { min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.history-times dt { font-size: var(--text-xs); color: var(--muted); }
.history-times dd { margin: 0; font-size: var(--text-xs); font-variant-numeric: var(--num); white-space: nowrap; }
.history-times time small { display: block; font-size: var(--text-xs); color: var(--muted); }
.history-amount { font-variant-numeric: var(--num); font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; }
.history-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.history-pagination small { color: var(--muted); font-size: var(--text-xs); }
.history-empty { padding: var(--space-6); text-align: center; color: var(--muted); }
.history-empty p { margin-bottom: var(--space-2); font-weight: var(--fw-semibold); color: var(--ink); }
.history-cards { display: none; }
@media (max-width: 75rem) {
    .history-filters { grid-template-columns: minmax(17rem,1fr) minmax(15rem,1fr); }
    .history-filters > button { justify-self: end; }
}
@media (max-width: 48rem) {
    .history-filters { grid-template-columns: minmax(0,1fr); padding: var(--space-3); }
    .history-filters > button { justify-self: stretch; }
    .history-table-wrap { display: none; }
    .history-cards { display: grid; gap: var(--space-3); }
    .history-card { padding: var(--space-4); }
    .history-card-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
    .history-card-head .history-date { display: inline; margin-left: var(--space-2); }
    .history-card-customer { margin-block: var(--space-3); }
    .history-card-state { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); color: var(--ink-soft); }
    .history-card-facts { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-2); padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm); }
    .history-card-facts .history-times { gap: var(--space-2) var(--space-4); }
    .history-result-line small { width: 100%; margin-left: 0; }
}
@media (max-width: 22.5rem) {
    .history-date-fields { grid-template-columns: minmax(0,1fr); }
    .history-card-head .history-date { display: block; margin-left: 0; }
}

.history-column-target { width: 6rem; min-width: 6rem; }
.history-column-variance { width: 6rem; min-width: 6rem; text-align: center; }
.history-column-actions { width: 4rem; text-align: center; }
.history-target { font-variant-numeric: var(--num); white-space: nowrap; }
.history-target.is-requested { font-weight: var(--fw-bold); }
.history-target span { font-weight: var(--fw-normal); color: var(--muted); font-size: var(--text-xs); }
.history-target small { display: block; font-size: var(--text-xs); color: var(--muted); }
.history-variance { display: inline-block; min-width: 4.5rem; padding: var(--space-2); border-radius: var(--r-sm); font-variant-numeric: var(--num); font-weight: var(--fw-bold); white-space: nowrap; }
.history-variance small { font-weight: var(--fw-normal); font-size: var(--text-xs); }
.history-variance.is-good { color: var(--ok); background: var(--ok-tint); }
.history-variance.is-warning { color: var(--ink); background: var(--warn-tint); }
.history-variance.is-late { color: var(--danger); background: var(--danger-tint); }
.history-cancel-button { min-height: 2.75rem; min-width: 2.75rem; color: var(--danger); }
.history-cancel-button:hover { border-color: var(--danger); background: var(--danger-tint); }
.history-action-unavailable { display: inline-flex; padding: var(--space-2); color: var(--muted); }
.history-timing-legend { display: flex; gap: var(--space-2) var(--space-5); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-3); }
.history-timing-legend a { text-decoration: underline; }
.history-card-timing { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.history-card-timing dt { font-size: var(--text-xs); color: var(--muted); }
.history-card-timing dd { margin: var(--space-1) 0 0; }
.history-card-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
body.history-dialog-open { overflow: hidden; }
.history-cancel-dialog { padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); width: min(36rem,calc(100% - var(--space-6))); max-width: none; max-height: calc(100dvh - var(--space-6)); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); }
.history-cancel-dialog::backdrop { background: color-mix(in srgb,var(--ink) 45%,transparent); }
.history-cancel-form { display: flex; flex-direction: column; max-height: calc(100dvh - var(--space-8)); }
.history-cancel-head, .history-cancel-footer { padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.history-cancel-head { justify-content: space-between; border-bottom: 1px solid var(--line); }
.history-cancel-head h2 { font-size: var(--text-xl); margin: 0; }
.history-cancel-body { padding: var(--space-5); overflow-y: auto; min-height: 0; }
.history-cancel-body .alert { margin-block: var(--space-4); }
.history-cancel-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.history-cancel-summary strong { overflow-wrap: anywhere; }
.history-cancel-summary > strong:nth-child(2) { font-variant-numeric: var(--num); white-space: nowrap; }
.history-cancel-summary span { font-size: var(--text-sm); color: var(--muted); }
.history-cancel-footer { justify-content: flex-end; border-top: 1px solid var(--line); background: var(--bg); }
@media (max-width: 30rem) {
    .history-cancel-head, .history-cancel-body, .history-cancel-footer { padding: var(--space-4); }
    .history-cancel-footer { flex-direction: column-reverse; align-items: stretch; }
    .history-cancel-head h2 { font-size: var(--text-lg); }
}

.history-refund-confirm { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); margin-top: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); font-size: var(--text-sm); }
.history-refund-confirm input { flex-shrink: 0; margin-top: var(--space-1); width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }

/* Shared live delay cues: visible words and estimates accompany the colour. */
.order-delay { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-2); min-width: 0; max-width: 100%; font-size: var(--text-xs); line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.order-delay-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); background: var(--warn-tint); color: var(--ink); font-weight: var(--fw-semibold); }
.order-delay-label .ico { flex-shrink: 0; color: var(--warn); }
.order-delay.tone-danger .order-delay-label { color: var(--danger); background: var(--danger-tint); }
.order-delay.tone-danger .order-delay-label .ico { color: inherit; }
.order-delay-original, .order-delay-estimate, .order-delay-context, .order-delay-notification { display: block; color: var(--muted); }
.order-delay-estimate time { color: var(--ink); font-variant-numeric: var(--num); font-weight: var(--fw-semibold); }
.order-delay-notification { border-left: 2px solid var(--line-strong); padding-left: var(--space-2); }
.order-delay-notification.is-issue { color: var(--danger); border-color: var(--danger); }
.order-delay-channels { display: flex; flex-direction: column; margin-top: var(--space-1); }
.history-column-status { min-width: 12rem; }
.history-column-actions { min-width: 10rem; }
.history-delay-action { display: inline-flex; gap: var(--space-1); white-space: normal; margin-bottom: var(--space-2); text-align: left; }
.history-card-actions { flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.history-card-actions .history-delay-action { margin: 0; }
.row-delay-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 2.5rem; padding: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--brand-dark); text-decoration: underline; white-space: normal; text-align: center; }
.order-row .order-delay.is-compact { margin-top: var(--space-1); }
@media (max-width: 48rem) { .history-card > .order-delay { margin-block: var(--space-3); } }
.order-row .bc-state { min-width: 0; }
.order-row .row-act:has(.row-delay-action) { flex-wrap: wrap; }
.order-row .row-delay-action { flex: 1 1 100%; order: 10; min-height: 2.75rem; }
@media (max-width: 64rem) {
    .order-row .bc-state { flex-wrap: wrap; flex: 1 1 10rem; }
    .order-row .bc-state .order-delay { flex-basis: 100%; }
}