/* Shipping app: tracking timeline, zone-mapping rows, courier test result. Tokens from admin.css only; kit classes (bk-*, ord-chan*) are in orders.css. */
tr.shp-failed > td { background: var(--danger-soft); }
.shp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.shp-ev { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.shp-ev::before { content: ""; position: absolute; inset-block: 14px 0; inset-inline-start: 6px; width: 2px; background: var(--line); }
.shp-ev:last-child::before { display: none; }
.shp-dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--info); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.shp-ev.st-delivered .shp-dot { background: var(--ok); }
.shp-ev.st-returned .shp-dot, .shp-ev.st-failed .shp-dot { background: var(--danger); }
.shp-ev.st-cancelled .shp-dot { background: var(--muted); }
.shp-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shp-ev-note { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }

.shp-test { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shp-zone-body { display: grid; gap: 12px; padding-block: 12px; container: zones / inline-size; }
.shp-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shp-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-zone input, .shp-zone select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-zone .icon-btn { width: 44px; height: 44px; }
.shp-area { display: grid; gap: 6px; min-width: 0; }
.shp-zone-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:root:root .shp-zone-tools .btn { min-height: 44px; }
@container zones (max-width: 640px) {
  .shp-zone { grid-template-columns: minmax(0, 1fr) auto; }
  .shp-zone .field { grid-column: 1; }
  .shp-zone .icon-btn { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ---------------------------------------------------------------------------------------------------------------------------------
   Courier settlements (list, document, new-settlement dialog) and courier reports. Classes: shp-set-* (settlements), shp-rep-* (reports).
   --------------------------------------------------------------------------------------------------------------------------------- */
tr.shp-set-cancelled > td { color: var(--muted); }
.shp-set-mainbox { display: grid; gap: 20px; min-width: 0; }
.shp-set-sidebox { display: grid; gap: 16px; min-width: 0; }
.shp-set-sidebox > div:empty { display: none; }
.shp-set-sec { display: grid; gap: 10px; min-width: 0; }
.shp-set-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.shp-set-sec-head .form-section { margin: 0; border: 0; padding: 0; }
.shp-set-sec > .btn { justify-self: start; }
.shp-set-sec a.link { white-space: nowrap; }
.shp-set-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.shp-set-banners { display: grid; gap: 8px; }
.shp-set-banners:empty { display: none; }
.shp-set-banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-sm); font-size: 13.5px; border: 1px solid var(--line); background: var(--warn-soft); }
.shp-set-banner > .ico { flex: 0 0 auto; margin-top: 1px; }
.shp-set-banner > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shp-set-banner.tone-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.shp-set-banner.tone-warn > .ico { color: var(--warn-ink); }
.shp-set-banner.tone-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, var(--line)); }
.shp-set-banner.tone-info > .ico { color: var(--info-ink); }
.shp-set-banner.tone-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.shp-set-banner.tone-ok > .ico { color: var(--ok-ink); }
.shp-set-banner.tone-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.shp-set-banner.tone-danger > .ico { color: var(--danger-ink); }
:root:root .shp-set-banner > .btn { flex: 0 0 auto; min-height: 44px; }
.shp-set-bl { margin: 2px 0 0; padding-inline-start: 18px; display: grid; gap: 2px; }
.shp-set-table .data-table td, .shp-set-table .data-table th { white-space: nowrap; padding-inline: 8px; }
.shp-set-table .data-table th { white-space: normal; font-size: 11px; letter-spacing: 0; text-transform: none; vertical-align: bottom; line-height: 1.25; }
.shp-set-cur { padding: 0 8px 6px; }
.shp-set-flag { display: grid; gap: 2px; max-width: 170px; white-space: normal; }
.shp-set-reason { white-space: normal; min-width: 160px; overflow-wrap: anywhere; }
.shp-set-cards { display: none; }
.shp-set-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-set-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shp-set-card-total { background: var(--panel-2); }
.shp-set-card .kv-list { gap: 5px 12px; }
.shp-set-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shp-set-upload input[type=file] { flex: 1 1 220px; min-width: 0; max-width: 100%; min-height: 44px; }
.shp-set-chips, .shp-set-awbs { display: flex; flex-wrap: wrap; gap: 8px; }
.shp-set-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--panel-3); }
a.shp-set-chip { text-decoration: none; min-height: 32px; align-items: center; }
.shp-set-chip.tone-ok { background: var(--ok-soft); color: var(--ok-ink); }
.shp-set-chip.tone-danger { background: var(--danger-soft); color: var(--danger-ink); }
.shp-set-chip.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.shp-set-chip.tone-info { background: var(--info-soft); color: var(--info-ink); }
/* receipt + totals */
.shp-set-rec { display: grid; gap: 12px; }
.shp-set-rec input[type=number], .shp-set-rec input[type=date], .shp-set-rec input[type=text], .shp-set-rec select { width: 100%; min-height: 40px; }
.shp-set-rec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shp-set-xfer-list { display: grid; gap: 2px; }
.shp-set-xfers ul { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.shp-set-totals { display: grid; gap: 7px; font-size: 13.5px; }
.shp-set-trow { display: flex; justify-content: space-between; gap: 12px; }
.shp-set-trow > span { color: var(--muted); }
.shp-set-trow.grand { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-size: 15px; }
.shp-set-trow.grand > span { color: var(--ink); font-weight: 700; }
.shp-set-trow.sum { border-top: 1px dashed var(--line); padding-top: 7px; }
.shp-set-diff { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; margin-top: 6px; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 700; }
.shp-set-diff b { font-size: 18px; }
.shp-set-diff small { grid-column: 1 / -1; font-weight: 400; }
.shp-set-diff.ok { background: var(--ok-soft); color: var(--ok-ink); }
.shp-set-diff.bad { background: var(--danger-soft); color: var(--danger-ink); }
.shp-set-note { margin-top: 12px; }
.shp-set-note:empty { display: none; }
.shp-set-notetext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the shipments to pick from (new settlement, add shipments) */
.shp-set-new-list { display: grid; gap: 10px; min-height: 60px; }
.shp-set-pick ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 42vh; overflow-y: auto; }
.shp-set-pick-all { padding: 4px 2px; }
.shp-set-pick-row { display: grid; grid-template-columns: 24px minmax(0, 1.3fr) auto minmax(0, 2fr); gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.shp-set-pick li:last-child .shp-set-pick-row { border-bottom: 0; }
.shp-set-pick-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.shp-set-pick-main { display: grid; min-width: 0; }
.shp-set-pick-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-set-pick-figs { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
.shp-set-pick-figs span { display: grid; text-align: end; font-variant-numeric: tabular-nums; }
.shp-set-pick-figs small { color: var(--muted); font-size: 11px; }
.shp-set-pick-total { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.shp-set-none { padding: 14px 0; }
.shp-set-radios { display: grid; gap: 4px; margin-bottom: 8px; }
.shp-set-radio { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.modal .shp-set-radio input[type=radio] { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--accent); }
.shp-set-radio > span { display: grid; min-width: 0; }
.shp-set-radio small { overflow-wrap: anywhere; }
/* a table that becomes cards on a phone (responsive() in settlements.js sets the data-label of each cell) */
@media (max-width: 600px) {
  .shp-set-table { display: none; }
  .shp-set-cards { display: grid; gap: 10px; }
  .shp-set-rt thead { display: none; }
  .shp-set-rt, .shp-set-rt tbody, .shp-set-rt tfoot { display: block; }
  .shp-set-rt tr { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; background: var(--panel); }
  .shp-set-rt td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; border: 0; text-align: end; white-space: normal; }
  .shp-set-rt td[data-label]:not([data-label=""])::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; text-align: start; flex: 0 0 auto; }
  .shp-set-rt td:first-child { justify-content: flex-start; text-align: start; }
  .shp-set-rt .num { text-align: end; }
  .shp-set-pick-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .shp-set-pick-figs { grid-column: 2 / -1; justify-content: flex-start; }
  .shp-set-pick-figs span { text-align: start; }
  :root:root .shp-set-doc .dh-actions .btn { min-height: 44px; }
  :root:root .shp-set-banner > .btn { flex: 1 1 100%; }
  .shp-set-banner { flex-wrap: wrap; }
}
/* reports */
.shp-rep-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.shp-rep-tabs::-webkit-scrollbar { display: none; }
.shp-rep-tabs .tab { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 700; color: var(--muted); white-space: nowrap; text-decoration: none; }
.shp-rep-tabs .tab:hover { color: var(--ink); }
.shp-rep-tabs .tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.shp-rep-page { min-width: 0; max-width: 100%; }
.shp-rep-card { padding: 14px; min-width: 0; max-width: 100%; }
.shp-rep-body > *, .shp-rep-panel > * { min-width: 0; }
.shp-rep-table th { white-space: normal; font-size: 11px; letter-spacing: 0; text-transform: none; vertical-align: bottom; line-height: 1.25; }
.shp-rep-panel { display: grid; gap: 12px; min-width: 0; }
.shp-rep-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.shp-rep-ctl { display: grid; gap: 4px; }
.shp-rep-ctl .chip-select, .shp-rep-ctl .date-in { min-height: 40px; }
.shp-rep-body { display: grid; gap: 14px; min-width: 0; }
.shp-rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.shp-rep-table td, .shp-rep-table th { vertical-align: top; }
.shp-rep-note { min-width: 160px; overflow-wrap: anywhere; }
.shp-rep-empty { padding: 24px 0; text-align: center; }
:root:root .shp-rep-start { min-height: 36px; margin-top: 6px; padding-inline: 10px; font-size: 12.5px; }
@media (max-width: 600px) {
  .shp-rep-card { padding: 10px; }
  .shp-rep-bar > .shp-rep-ctl { flex: 1 1 140px; }
  :root:root .shp-rep-start { min-height: 44px; }
  .shp-rep-kpis { grid-template-columns: 1fr 1fr; }
}


/* ------------------------------------------------------------ fulfilment: lifecycle steps, courier contract, delivery settings, pickups & own deliveries (shp-ful-*, shp-con-*) */
.shp-ev.st-handed_over .shp-dot { background: var(--info); }
.shp-ev.st-refused .shp-dot, .shp-ev.st-compensation_claimed .shp-dot { background: var(--warn); }
.shp-ev.st-lost .shp-dot { background: var(--danger); }
.shp-ev.st-compensation_settled .shp-dot { background: var(--ok); }
.shp-ful-count { margin-inline-start: 8px; padding: 1px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.shp-ful-attlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shp-ful-attlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-ful-attlist .shp-ev-note { flex: 1 1 100%; margin: 0; }
.shp-ful-link { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.shp-ful-rowact { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 140px; }
.shp-ful-how { display: grid; gap: 2px; justify-items: start; }
.side-card .kv-list + .btn { margin-top: 10px; }
:root:root .shp-ful-rowact .btn { min-height: 44px; }

/* delivery settings: the three default choices and the per-channel rows */
.shp-ful-set { display: grid; gap: 14px; }
.shp-ful-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shp-ful-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }
.shp-ful-opt.on { border-color: var(--accent); background: var(--accent-soft); }
:root:root .shp-ful-opt input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; border: 0; accent-color: var(--accent); flex: 0 0 auto; }
.shp-ful-opt-t { display: grid; gap: 2px; min-width: 0; }
.shp-ful-opt-t small { font-size: 12.5px; line-height: 1.4; }
.shp-ful-chans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shp-ful-chan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-ful-chan select { min-height: 44px; min-width: 200px; max-width: 100%; }

/* courier contract panel */
.shp-con { margin-top: 4px; }
.shp-con-body { display: grid; gap: 12px; padding-block: 12px; min-width: 0; }
.shp-con-form { display: grid; gap: 12px; }
.shp-con-form .form-grid { align-items: start; }
.shp-con-form input, .shp-con-form select { width: 100%; min-height: 44px; }
.shp-con-hist { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; background: var(--panel); }
.shp-con-hist > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.shp-con-log { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.shp-con-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shp-con-diff { margin: 4px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
:root:root .shp-con-fees { min-height: 44px; justify-self: start; }
/* the version of the terms waiting for another person's approval */
.shp-con-pending { flex-wrap: wrap; align-items: center; }
.shp-con-pending > div { flex: 1 1 240px; }
.shp-con-pending .btn { min-height: 44px; }

@media (max-width: 720px) {
  .shp-ful-opts { grid-template-columns: 1fr; }
  .shp-ful-how { justify-items: end; }
  .shp-ful-chan { flex-wrap: wrap; }
  .shp-ful-chan select { width: 100%; min-width: 0; }
}