/* =========================================================================
   request-detail.css — what a promotion adds to the request page

   Only the promotion-side parts live here: the engagement card, the materials
   the buyer looked at but did not ask for, and the per-line decision control.
   The page's original table and side-card rules stay in its own <style> block
   until that block is extracted as a whole.
   ========================================================================= */

/* ---- Promotion engagement ------------------------------------------------
   Two figures answer what a rep actually asks before picking up the phone:
   how long this buyer has been circling, and how hard. They are read as a
   pair, so they sit as a pair — number first, label beside it. */
.rq-eng { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rq-eng-stat { display: inline-flex; align-items: baseline; gap: 7px; }
.rq-eng-stat .v {
  font-size: 1.375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.rq-eng-stat .k { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

/* The sentence that changes what happens next. A buyer who opened the room
   three weeks ago and asked today is not the same lead as one who asked in
   the first hour, and no other figure on the page says which this is. */
.rq-eng-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--color-text-subtle); }

/* ---- Also seen in this room ---------------------------------------------
   The request is what they asked for; this is what they wanted. One row per
   promotion product the buyer opened and left off the request, carrying what
   they did to it and a way to put it on the quote. */
.rq-seen-row { display: flex; align-items: center; gap: 10px; }
.rq-seen-row .cell-stack { flex: 1; min-width: 0; }
.rq-seen-when { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
/* Added, not removed: taking the row away would make the operator wonder
   whether the click landed, and the same product must not be added twice. */
.rq-seen-row.is-added { opacity: .5; }

/* ---- Per-line decision ---------------------------------------------------
   A stone request rarely survives intact — one slab is out of stock, one is
   held, the rest are fine — so the decision is taken per line and the quote
   carries only what was approved. Nothing starts chosen: a line nobody decided
   is a line nobody decided, and it does not travel. */
.rq-dec {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--color-control);
  border: 1px solid var(--color-border);
  border-radius: 7px;
}
.rq-dec button {
  width: 30px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 0; border-radius: 5px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.rq-dec button svg { width: 14px; height: 14px; }
.rq-dec button:hover { color: var(--color-primary-700); }
.rq-dec button[aria-pressed="true"] { font-weight: 600; box-shadow: var(--shadow-sm); }
.rq-dec button[data-dec="yes"][aria-pressed="true"] { background: var(--color-success-50); color: var(--color-success); }
.rq-dec button[data-dec="sub"][aria-pressed="true"] { background: var(--color-warn-50); color: var(--color-warn); }
.rq-dec button[data-dec="no"][aria-pressed="true"]  { background: var(--color-danger-50); color: var(--color-danger); }

/* A declined line stays on the page — the buyer asked for it and the reason
   belongs next to it — but it must not read as part of the money. */
tr.rq-line--no .col-prod,
tr.rq-line--no .col-spec,
tr.rq-line--no .col-qty,
tr.rq-line--no .col-price,
tr.rq-line--no .col-total { opacity: .45; }
tr.rq-line--no .col-total { text-decoration: line-through; }

/* What the footer is about to carry, in words, before the button is pressed. */
.rq-carry { margin-right: auto; font-size: 13px; color: var(--color-text-muted); }
.rq-carry strong { color: var(--color-text); }

/* ---- Substitute picker ---------------------------------------------------
   Opens showing every alternative on the promotion, with none of them chosen.
   A picker that has already answered itself is not offering a choice, and the
   one product the operator must NOT pick by accident is the one that was out
   of stock in the first place. */
.rq-sub-list { display: flex; flex-direction: column; gap: 6px; }
.rq-sub-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  background: var(--color-control);
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  font-family: inherit; font-size: 13px; color: var(--color-text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.rq-sub-opt .cell-stack { flex: 1; min-width: 0; }
.rq-sub-opt:hover { border-color: var(--color-primary); }
.rq-sub-opt[aria-pressed="true"] {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
}
.rq-sub-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- The two page columns ------------------------------------------------
   An `fr` track will not shrink below its content's min-content width, so the
   items table's own min-width and the four-control decision row were each
   holding their column open wider than its share — the pair added up past the
   right edge of the page and the notes card was cut off there. minmax(0, …)
   puts the 1:2 ratio back in charge of the width. Anything still too wide for
   the column it lands in scrolls inside its own box, which is what .table-wrap
   and .rq-stepper were already built to do. */
.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* Ignore, a sentence, two outline buttons and the approve button do not fit on
   one line in a third of the page, and squeezing them there is what made the
   sentence read one word per line. They wrap instead — approve stays last. */
#rq-decide { flex-wrap: wrap; }

/* ---- The request state ---------------------------------------------------
   Two rows: the buyer asked, and we answered. No numbers on the markers —
   numbering a two-row list where the second row is a fork (approved OR denied)
   implies a third step that never comes. The marker carries the answer instead:
   a tick for asked and for approved, a cross for denied, a clock while the
   request is still sitting in someone's queue.

   The connector is the same short vertical mark used elsewhere on this page,
   drawn on the row above so the last row does not trail a line into nothing. */
.rq-state { display: flex; flex-direction: column; gap: 16px; }
.rq-state__row { position: relative; display: flex; align-items: flex-start; gap: 11px; }
.rq-state__row:not(:last-child)::after {
  content: ""; position: absolute; left: 13.5px; top: 30px;
  width: 1px; height: 14px; background: var(--color-border-strong);
}
.rq-state__icn {
  flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}
.rq-state__row.is-done .rq-state__icn { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.rq-state__row.is-denied .rq-state__icn { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
/* The mark takes the colour of what it leads TO, so a request still waiting on
   an answer is joined by a neutral line rather than one that reads as finished,
   and a refused one is not led into in the colour of a good end. */
.rq-state__row:has(+ .rq-state__row.is-done)::after { background: var(--color-success); }
.rq-state__row:has(+ .rq-state__row.is-denied)::after { background: var(--color-danger); }
.rq-state__txt { display: flex; flex-direction: column; min-width: 0; padding-top: 3px; }
.rq-state__label { font-size: 13px; font-weight: 600; }
.rq-state__when { font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }

/* ---- Line items — columns addressed by class, never by position ----------
   The same table renders with and without the two money columns: a sample or
   a hold carries no price, and dropping a column must not move the ones that
   stay. Product absorbs whatever the pinned columns leave, in both shapes.

   Measured headlessly at min-content / max-content across all twenty-one
   requests; the comment on each line is measured → preferred / floor. The
   table sits in two thirds of the page, not the whole of it — 756px of content
   at a 1440 screen — so each column carries a floor UNDER its preferred width
   as well: the preferred width is what it takes when there is room, the floor
   is what it will not go below when there is not. The floors add up to what
   .rq-items--decide asks for, which is what makes the six-column shape fit a
   1440 screen without the box scrolling sideways.

   Format / Finish is the column that gives way first, and is pinned under its
   widest string on purpose: when the row runs out of room something has to
   wrap, and a descriptor wrapping costs less than the product name — the row's
   identity — wrapping. */
.rq-items { table-layout: auto; min-width: 607px; max-width: 1947px; }
.rq-items thead th.col-prod  { width: 100%; }                                  /* absorber — 175 min → 293 max */
.rq-items thead th.col-spec  { width: 145px; min-width: 130px; }               /*  83 → 164, gives way first */
.rq-items thead th.col-qty   { width: 108px; min-width:  96px; }               /*  90 → 90 */
.rq-items thead th.col-price { width: 140px; min-width: 112px; }               /* 110 → 175 unstacked */
.rq-items thead th.col-total { width: 106px; min-width:  94px; }               /*  88 → 88 */
/* Sixth column, and only on an open quote — the three controls are a fixed
   shape (104px with the substitute button, 71 without), so it is pinned like
   the other non-absorbing ones — wide enough that the "YOUR APPROVAL" header
   keeps to one line. The table's min-width rises with it; without that the
   absorber pays for the column. */
.rq-items thead th.col-decide { width: 142px; min-width: 128px; }
.rq-items--decide { min-width: 735px; }

/* Unit price with a discount — list price struck through, sold price in accent */
.rq-list { text-decoration: line-through; color: var(--color-text-subtle); font-weight: 400; margin-right: 5px; }
/* In the line-item table the struck list price takes its own line above the
   figure that replaced it, rather than sitting beside it. Side by side the two
   figures were the widest thing in the column by 60px, and that width was
   being taken from the product name and the format beside it — for a price
   nobody is being charged. */
.col-price .rq-list { display: block; margin-right: 0; font-size: 11px; }
.rq-sold { color: var(--color-primary-700); font-weight: 700; }

/* ---- Decline reasons -----------------------------------------------------
   Four mutually exclusive reasons as loose chips, deliberately NOT the
   .subtabs--choice segmented control: that is a two-column grid meant for a
   Yes/No pair, and four options inside its bordered track render as a boxed
   2x2 that reads as two choices rather than four. Dropping the track leaves
   four separate things, which is what they are.

   Each chip sits on the control ground with a real border — the modal is
   white, and a near-white chip on white was the whole of the readability
   complaint. The chosen one goes solid rather than tinted, so which reason is
   selected survives a glance. */
.rq-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-reason {
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  padding: 8px 14px; cursor: pointer;
  color: var(--color-text);
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: 7px;
}
.rq-reason:hover { border-color: var(--color-primary); color: var(--color-primary-700); }
.rq-reason.active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; font-weight: 600;
}

/* ---- PDF export ----------------------------------------------------------
   The same artwork the catalog toolbar uses (img/ExportPDF.png), at the same
   34px. Carried on a bare button rather than a .btn-outline: the mark is drawn
   with its own edges, so a button box around it reads as a border on a border.
   Sized here rather than inline, which is where the catalog still does it. */
.pdf-export {
  display: inline-flex; align-items: center;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.pdf-export img { display: block; height: 34px; width: auto; }