/* Relationship Map and Delivery Log — `modal - relationship-map` 18153:134534
   and `modal - delivery-log` 18153:133677. MEASURED, not eyeballed.

   Every 1px line in both frames is a Figma stroke with strokeAlign INSIDE, so
   it is an inset box-shadow here and never a CSS border. The connectors and
   the header rule are the exception: those are filled RECTANGLE nodes, so they
   are real elements.                                                        */

/* the footer gains a left-hand slot: the legend on one modal, a button on the
   other, actions staying right */
.sheet__ft.has-left { justify-content: space-between; }
.sheet__ft.has-left > :first-child { margin-right: auto; }

/* ---------- Relationship Map --------------------------------------------- */

.rm { display: block; }

/* 1232x480 at the frame's three deliveries; the height is computed from the
   real delivery count, so a two-delivery quote draws a shorter canvas */
.rm__graph {
  position: relative; border-radius: 12px; background: #f8f8f8; overflow: hidden;
}

.rm__card {
  position: absolute; width: 200px; border-radius: 10px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  overflow: hidden;                      /* the head strip's corners come from here */
}

/* THE HEAD STRIP IS THE TYPE-CODING SYSTEM: its fill is the tone at 7% and its
   label the tone at full strength, and the five kinds are not interchangeable.
   The business partner is the one neutral, on a solid grey rather than a tint. */
.rm__head { height: 25px; padding: 0 12px; display: flex; align-items: center; }
.rm__kind { font-size: 9px; font-weight: 600; letter-spacing: .05em; }

.rm__card--grey   .rm__head { background: #e5e7eb; }
.rm__card--grey   .rm__kind { color: #364153; }
.rm__card--blue   .rm__head { background: rgba(39, 92, 211, .07); }
.rm__card--blue   .rm__kind { color: var(--wrc-rackman); }
.rm__card--green  .rm__head { background: rgba(0, 128, 95, .07); }
.rm__card--green  .rm__kind { color: var(--status-green); }
.rm__card--orange .rm__head { background: rgba(229, 90, 51, .07); }
.rm__card--orange .rm__kind { color: var(--status-orange); }

.rm__body {
  padding: 10px 12px 11px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px;
}
.rm__no   { font-size: 13px; font-weight: 600; color: #101828; }
.rm__meta { font-size: 10.5px; font-weight: 500; color: #656772; }
.rm__amt  { font-size: 12px; font-weight: 600; color: #364153; font-variant-numeric: tabular-nums; }
/* an invoice's amount is money OWED, and the frame colours it as such */
.rm__amt.is-due { color: var(--status-orange); }

/* two chip sizes, not one at two heights: the 24px chip carries 11px on 8/11
   padding, the 18px one 10px on 3/8 */
/* HEIGHT PINNED, not left to the line box. The card totals are measured - 123
   for a quote, order or invoice and 117 for a delivery - and they only come out
   right if the chip is exactly 24 (or 18 for the small one); leaving it to
   line-height made every card 6px tall. */
.rm__chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1;
}
.rm__chip.is-s { height: 18px; padding: 0 8px; font-size: 10px; }
.rm__chip--blue   { background: rgba(39, 92, 211, .12); color: var(--wrc-rackman); }
.rm__chip--green  { background: rgba(0, 128, 95, .12);  color: var(--status-green); }
.rm__chip--orange { background: rgba(229, 90, 51, .12); color: var(--status-orange); }
.rm__chip.is-s.rm__chip--green  { background: rgba(0, 128, 95, .07); }
.rm__chip.is-s.rm__chip--orange { background: rgba(229, 90, 51, .07); }
.rm__chip.is-s.rm__chip--blue   { background: rgba(39, 92, 211, .07); }

/* the wires: filled 1.5px rectangles and an 8x8 solid triangle, exactly as the
   frame draws them */
.rm__conn  { position: absolute; background: rgba(0, 0, 0, .35); }
.rm__arrow {
  position: absolute; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 8px solid rgba(0, 0, 0, .35);
}

.rm__legend { display: flex; align-items: center; gap: 16px; }
.rm__leg { display: inline-flex; align-items: center; gap: 6px;
           font-size: 11.5px; font-weight: 500; color: #656772; }
.rm__sw { width: 10px; height: 10px; border-radius: 3px; }
.rm__sw--blue   { background: rgba(39, 92, 211, .07); box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
.rm__sw--green  { background: rgba(0, 128, 95, .07);  box-shadow: inset 0 0 0 1px var(--status-green); }
.rm__sw--orange { background: rgba(229, 90, 51, .07); box-shadow: inset 0 0 0 1px var(--status-orange); }

/* the mobile chain is built alongside the graph and hidden on desktop — one
   render, two layouts, so neither has to be rebuilt on a resize */
.rm__chain { display: none; }

/* ---------- Delivery Log -------------------------------------------------- */

.dl { display: flex; flex-direction: column; gap: 14px; }

.dl__search { display: flex; align-items: center; gap: 14px; }
.dl__field {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: flex; align-items: center; gap: 8px;
}
.dl__field input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 12.5px; color: #101828;
}
.dl__field input::placeholder { color: #656772; }
.dl__field svg { flex: none; color: #656772; }
.dl__count { flex: none; font-size: 11.5px; font-weight: 500; color: #656772; }

/* nine columns, no gaps between them — the padding lives on the row */
.dl__thead, .dl__tr {
  display: grid;
  grid-template-columns: 130px 130px 100px 92px 64px minmax(160px, 230px) 136px minmax(140px, 206px) 148px;
  padding: 0 18px; align-items: center;
}
.dl__thead { height: 37px; background: #f8f8f8; }
.dl__th {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 500; letter-spacing: .05em; color: #000;
  white-space: nowrap;
}
.dl__th svg { flex: none; color: #656772; }

.dl__tr {
  min-height: 54px; background: var(--white);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07);
}
/* the frame draws no rule under the last row */
.dl__tr:last-child { box-shadow: none; }
.dl__td { font-size: 12.5px; color: #364153; min-width: 0; padding-right: 10px; }
.dl__doc { font-weight: 600; color: #101828; }
.dl--remarks, .dl--report { color: #656772; }
.dl--cust { display: flex; flex-direction: column; gap: 2px; }
.dl__cname { font-size: 12.5px; color: #364153; }
.dl__ccode { font-size: 10.5px; color: #656772; }

.dl__chip {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.dl__chip.is-info { background: rgba(39, 92, 211, .07); color: var(--wrc-rackman); }
.dl__chip.is-ok   { background: rgba(0, 128, 95, .07);  color: var(--status-green); }
.dl__chip.is-grey { background: #f8f8f8; color: #656772; }

.dl__none { margin: 0; padding: 24px 18px; font-size: 12.5px; color: var(--text-light); }

/* ---------- mobile -------------------------------------------------------- */

@media (max-width: 900px) {
  /* the graph cannot reflow — it is absolutely positioned — so the mobile twin
     is a separate vertical chain, which the frame draws rather than scaling */
  .rm__graph { display: none; }
  .rm__chain { display: flex; flex-direction: column; align-items: stretch; }
  .rm__chain .rm__card { position: static; width: auto; }

  /* the 2x18 tick between cards, and note the frame drops it to 15% here from
     the 35% the desktop wires use */
  .rm__tick { align-self: flex-start; width: 2px; height: 18px; margin-left: 14px;
              background: rgba(0, 0, 0, .15); }
  .rm__sec {
    padding: 14px 0 8px; font-size: 10px; font-weight: 500;
    letter-spacing: .05em; color: #656772;
  }
  /* an invoice is indented under the delivery it settles */
  .rm__wrap { padding-left: 14px; display: flex; flex-direction: column; gap: 4px; }
  .rm__cap { font-size: 11px; color: #656772; }
  .rm__cap--none { padding: 8px 0 0 14px; }

  .rm__legend { flex-wrap: wrap; gap: 10px 16px; }

  /* the log keeps its columns and scrolls: nine fields folded into a card is
     less readable than a sideways drag */
  .dl__tbl { overflow-x: auto; }
  .dl__thead, .dl__tr { min-width: 1100px; }
}