/* Delivery-history drawer — right-side slide-out opened from a line-item
   card's "Delivery history" action. Spec: Figma order delivery-history
   panel (status stat row + lifecycle pipeline + State/Received log).
   Shares the line-item dot vocabulary (line_item.css .line-item-dot*) so
   an order's progress reads identically on the card and in here. */

.delivery-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

/* Scroll-lock the page behind the drawer. Pure CSS — see the drawer
   component's note; `html { scrollbar-gutter: stable }` in main.css keeps
   this from shifting the layout. */
body:has(.delivery-drawer) {
  overflow: hidden;
}

.delivery-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: all;
  animation: delivery-drawer-fade 0.2s ease;
}

.delivery-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40rem;
  max-width: calc(100 * var(--vwx));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.25);
  pointer-events: all;
  outline: none;
  animation: delivery-drawer-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes delivery-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes delivery-drawer-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-drawer__panel,
  .delivery-drawer__backdrop {
    animation: none;
  }
}

/* ── Chrome (close / open-full / overflow menu) ─────────────── */

.delivery-drawer__chrome {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
}

.delivery-drawer__chrome-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.delivery-drawer__icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0.5rem;
  color: #242424;
  cursor: pointer;
  transition: background-color 0.15s;
}

.delivery-drawer__icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.delivery-drawer__menu-wrap {
  position: relative;
}

/* Invisible catcher so an outside click closes the overflow menu —
   below the menu itself so its items stay clickable. Mirrors
   .orders-type-filter__backdrop. */
.delivery-drawer__menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: transparent;
}

.delivery-drawer__menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 2;
  min-width: 11rem;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.12);
}

.delivery-drawer__menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.delivery-drawer__menu-item:hover {
  background: #f5f5f5;
}

/* ── Scroll body ───────────────────────────────────────────── */

.delivery-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 3rem;
}

.delivery-drawer__title {
  margin: 0 0 1.5rem;
  text-align: right;
  font-size: clamp(1.75rem, calc(4 * var(--vwx)), 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  word-break: break-word;
}

/* ── Stat tiles ────────────────────────────────────────────── */

.delivery-drawer__stats {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.delivery-drawer__stat {
  box-sizing: border-box;
  /* Basis `auto` (= content width), so each tile is as wide as its own
     widest line and the leftover row width is shared out on top of that —
     the status tile stays narrow, "Delivery Date  Requested" gets the room
     it needs to stay on ONE line. `1 1 0` made all four equal and forced
     the long labels to wrap. Tiles that genuinely can't fit wrap to a
     second row rather than shrinking (flex line-breaking uses the basis). */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid #e3e3e3;
  border-radius: 0.5rem;
}

 /* Values run at display size — the tiles are content-sized (above), so
   nothing has to be shrunk to make four equal columns fit. */
.delivery-drawer__stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delivery-drawer__stat-value .money {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
}

/* The status tile's dots sit where the other tiles' number sits, so give
   them the same optical height as a 1.5rem line of text. Also drop the
   card's 6.5rem min-width — in here the dots sit next to their label, not
   in a fixed table-ish column. */
.delivery-drawer .line-item-progress {
  width: auto;
  min-width: 0;
}

/* `.line-item-progress` is a COLUMN flex with `justify-content: center` —
   on that axis both of those centre the dots HORIZONTALLY in the tile,
   which the design doesn't do (the dots sit flush left, directly above
   their label). Flip to a row and pin the main axis to the start: the dots
   then sit left, vertically centred in a text-line-tall box. */
.delivery-drawer__stat-value .line-item-progress {
  min-height: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* Block, not flex — the label and its qualifier ("Delivery Date" +
   "Requested") must reflow as ONE sentence when the tile is narrow, not
   as two flex items each wrapping on its own. */
.delivery-drawer__stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4d4d4d;
  white-space: nowrap;
}

.delivery-drawer__stat-qualifier {
  margin-left: 0.375rem;
  font-weight: 400;
  color: #9c9c9c;
}

/* ── Lifecycle pipeline ────────────────────────────────────── */

.delivery-drawer__pipeline {
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ececec;
}

.delivery-drawer__track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0.25rem;
}

.delivery-drawer__track-cart {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  color: #4d4d4d;
  background: #fff;
}

/* Lead-in from the cart marker to the first lifecycle node: a fixed short
   stub, NOT a full segment. Only the segments BETWEEN states carry meaning
   and share the width equally. */
.delivery-drawer__track-cart + .delivery-drawer__track-line {
  flex: 0 0 0.875rem;
}

.delivery-drawer__track-line {
  flex: 1 1 auto;
  height: 0;
  border-top: 2px solid #20852a;
}

.delivery-drawer__track-line--open {
  border-top-style: dashed;
  border-top-color: #c9c9c9;
}

.delivery-drawer__track-node {
  flex: none;
  box-sizing: border-box;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  /* Ring, gap, dot — the node is a light-ringed white circle with a
     coloured centre; the STATE is carried by the dot's colour, not by the
     ring. Inset shadows paint first-on-top, so the 3px white gap covers
     the outer edge of the fill and leaves a ~10px dot. */
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #d5d5d5;
}

.delivery-drawer__track-node--reached {
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #20852a;
}

/* Node colours mirror .line-item-dot--* exactly (line_item.css), so a
   quote's pipeline and its status chip can never disagree. */
.delivery-drawer__track-node--yellow {
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #ffc107;
}

.delivery-drawer__track-node--red {
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #d94f4f;
}

/* Half = the dots' "in-between" fill: pale centre, coloured ring. */
.delivery-drawer__track-node--half {
  border-color: #2e7d4f;
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #e0f2e9;
}

.delivery-drawer__track-node--yellow.delivery-drawer__track-node--half {
  border-color: #ad8425;
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #fff08b;
}

.delivery-drawer__track-node--red.delivery-drawer__track-node--half {
  border-color: #d94f4f;
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 0.5rem #fde8e8;
}

.delivery-drawer__track-captions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Inset to the track's own padding so the rule lines up with the ends of
     the pipeline it captions, not with the panel edge. */
  margin: 1.75rem 0.25rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid #ececec;
}

.delivery-drawer__caption {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.9375rem;
  min-width: 0;
}

.delivery-drawer__track-captions .delivery-drawer__caption:last-child {
  text-align: right;
}

.delivery-drawer__caption-lead {
  font-weight: 700;
  color: #1a1a1a;
}

.delivery-drawer__caption-label {
  color: #737373;
}

.delivery-drawer__caption-date {
  color: #3d3d3d;
  white-space: nowrap;
}

/* ── Shipping updates ─ */

.delivery-drawer__shipment {
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #ececec;
}

.delivery-drawer__section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.delivery-drawer__shipment .shipment-card {
  margin-top: 0;
}

.delivery-drawer__shipment .shipment-card__timeline {
  flex-direction: column;
  gap: 0.625rem;
}

.delivery-drawer__shipment .shipment-card__milestone {
  align-items: flex-start;
}

/* Dot centred on the label's first line, not on the whole two-line body. */
.delivery-drawer__shipment .shipment-card__dot {
  flex: 0 0 auto;
  margin-top: 0.3125rem;
}

.delivery-drawer__shipment .shipment-card__milestone-body {
  min-width: 0;
}

.delivery-drawer__shipment .shipment-card__milestone-caption {
  white-space: normal;
}

/* A long tracking number wraps instead of shoving Track package out of
   the panel. */
.delivery-drawer__shipment .shipment-card__no {
  overflow-wrap: anywhere;
}

/* ── State / Received log ──────────────────────────────────── */

.delivery-drawer__log {
  display: flex;
  flex-direction: column;
}

.delivery-drawer__log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}

.delivery-drawer__log-col {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
}

.delivery-drawer__log-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.delivery-drawer__log-chev {
  display: inline-flex;
  color: #6b6b6b;
  transition: transform 0.15s;
}

.delivery-drawer__log-chev--up {
  transform: rotate(180deg);
}

.delivery-drawer__log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #ececec;
}

.delivery-drawer__log-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.delivery-drawer__log-cart {
  display: inline-flex;
  color: #4d4d4d;
}

.delivery-drawer__log-label {
  font-size: 1rem;
  font-weight: 700;
  color: #242424;
}

.delivery-drawer__log-label--note {
  font-size: 0.9375rem;
}

/* Dates read as quiet metadata next to the state they belong to: 14px,
   regular weight, #6b6b6b — same treatment in the Received column and
   inline in a note. */
.delivery-drawer__log-note-value,
.delivery-drawer__log-date {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b6b6b;
}

/* A second, quieter line under a note's label (e.g. the day's total change
   under the line change). Takes the full row of the wrapping state cell. */
.delivery-drawer__log-detail {
  flex: 0 0 100%;
  margin-top: -0.25rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: #6b6b6b;
}

.delivery-drawer__log-note-sep {
  font-size: 0.9375rem;
  color: #737373;
}

/* "UTC ± 0" — the timezone the date is stated in, set apart from the date
   itself but in the same voice. Only rendered for real timestamps. */
.delivery-drawer__log-utc {
  margin-left: 0.5rem;
}

.delivery-drawer__log-note-sep {
  font-weight: 700;
  color: #242424;
}

.delivery-drawer__log-date {
  flex: none;
  white-space: nowrap;
}

/* (The former width media query at 40rem block is gone: its width: 100%
   was already guaranteed by the panel's max-width: calc(100 * var(--vwx)),
   and its flex-grow: 1 was already the stat's base `flex: 1 1 auto`.) */