/* nimiq.sale app CSS, part 9 — the tail of app.1.css (Review screen catalog rows).
   Split out ONLY to stay under the repo's 800-line-per-file CI guard. It is linked in index.html
   IMMEDIATELY AFTER app.1.css, so every rule keeps the exact cascade position it had. Do not
   reorder the link: the shell's rhythm depends on byte-order, same as the app.4/app.7 pairing. */

/* ---- Review screen: catalog rows structured by whitespace, no table borders ---- */
.catalog-list {
  display: flex;
  flex-direction: column;
}

/* THREE stacked bands, each an internally uniform grid. The old row was one wrapping flex holding
   eleven controls, so on a phone the wrap point decided the reading order and labels landed after
   the fields they named. Nothing here wraps by accident any more. */
.catalog-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  transition: opacity 0.2s ease;
}

/* Band 1: picture, name, price. Fixed outer columns, name takes the rest, identical on every row. */
.catalog-row .row-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 84px;
  align-items: center;
  gap: 8px;
}

/* Band 2: how it files and keys, its status, and the disclosure. Wraps only as a last resort, and
   the two inputs share the slack evenly so neither ever truncates its own placeholder. */
.catalog-row .row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.catalog-row .row-meta .row-category,
.catalog-row .row-meta .row-code {
  flex: 1 1 0;
  min-width: 96px;
}

/* The disclosure sits at the far end of the meta row, where a "More" always is. */
.catalog-row .row-more {
  margin-left: auto;
  flex: none;
  font-size: 1.625rem;
}

.catalog-row .row-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding: 12px;
  border-radius: 8px;
  /* A light nuanced grey derived from the main colour, per the palette's second rule: this is a
     panel that opened, and it needs to read as attached to its row without a border drawing a box. */
  background: rgba(31, 35, 72, 0.035);
}

.catalog-row .row-detail-actions {
  display: flex;
  justify-content: flex-end;
}

/* When the taxable toggle is present the row carries an extra control on the fixed 420px
   card, so tighten the fixed-width columns to keep the name input legible (it was clipping to
   2 chars). The name still flexes; only the rigid columns shrink. */
.catalog-row .price-field {
  width: 84px;
}

.catalog-row .taxable-toggle {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.5rem;
}

.catalog-row .row-status {
  width: 34px;
  font-size: 1.375rem;
}

.catalog-row + .catalog-row {
  /* whitespace, not a rule, but a hairline derived from navy keeps long lists legible */
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.catalog-row.saving {
  opacity: 0.4;
  pointer-events: none;
}

/* Per-row stock panel: ONE labelled line per thing, in a fixed two-column grid. Every line shares
   the same label column, so the panel reads as a list of settings instead of a run of controls. */
.stock-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stock-control .stock-field {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.stock-control .stock-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stock-control .stock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Line the actions up with the controls above them, not with the labels. */
  margin-left: 94px;
}

.stock-control .stock-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* flex: none + nowrap is the fix for "Untracked" colliding with the stepper: inside a flex row with
   min-width: 0 the count box was allowed to shrink below its own text, so the word overflowed its
   box and ran into the minus button. It is a value, so it gets exactly the width its text needs. */
.stock-control .stock-count {
  flex: none;
  min-width: 24px;
  white-space: nowrap;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--nimiq-blue);
}

.stock-control .stock-stepper {
  flex: none;
}

.stock-control .stock-stepper {
  display: inline-flex;
  gap: 4px;
}

.stock-control .stock-stepper .nq-button-s {
  min-width: 32px;
  padding-left: 0;
  padding-right: 0;
  font-size: 2rem;
  line-height: 1;
}

.stock-control .stock-set-input {
  width: 84px;
  text-align: center;
  font-size: 1.625rem;
}

/* (the 86 action used to be pushed right with margin-left:auto; it now sits in .stock-actions) */

/* "86" and "Un-86" are plain neutral nq-button-s pills. An earlier build tinted the 86 action
   orange with an inset orange ring; both read as off-brand (orange on white measures 2.44:1, and
   the ring lints as a colored glow shadow), and the warning was redundant anyway: the SOLD OUT
   .stock-badge already carries the 86d state, which is where a status color belongs. The action
   button just performs the action (#36). */

/* Cost field inside the dense stock-control row. The shared .price-field is 84px in a catalog-row;
   inside this row size it to the compact stock-input rhythm so the row still wraps cleanly on the
   fixed 420px card and at 1.5x accessibility text. The leading "$" symbol stays inline. */
.stock-control .price-field {
  width: 78px;
  flex: 0 0 auto;
}

.stock-control .price-field .nq-input {
  font-size: 1.625rem;
}

.catalog-row .row-name {
  flex: 1 1 auto;
  min-width: 64px;
}

.catalog-row .row-name input {
  width: 100%;
}

/* price field: plain nq-input with a $ adornment, inset box-shadow border (rule 1). */
.price-field {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
}

.price-field .currency-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-text);
  font-size: 2rem;
  pointer-events: none;
}

.price-field input {
  width: 100%;
  padding-left: 28px;
  text-align: right;
}

/* percent field: sibling of .price-field with a trailing '%' (the tax-rate setup input).
   Reuses the inset box-shadow border via .nq-input (rule 1); the symbol sits on the right. */
.percent-field {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
}

.percent-field .percent-symbol {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-text);
  font-size: 2rem;
  pointer-events: none;
}

.percent-field input {
  width: 100%;
  padding-right: 28px;
  text-align: right;
}

/* The setup tax field is full-width like the address/name inputs, not the narrow catalog-row
   price box, so override the fixed width when it sits in a .setup-field. */
.setup-field .percent-field {
  width: 100%;
  box-sizing: border-box;
}

/* per-item taxable toggle on catalog + add-item rows: an nq-button-s pill reusing the same
   light-blue .selected state as the tip/discount pills (no new component). Compact so it does
   not crowd the price field + status + delete on the fixed card. */
.taxable-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.taxable-toggle.selected {
  background: var(--nimiq-light-blue);
  color: #fff;
}

@media (hover: hover) {
  .taxable-toggle.selected:hover {
    background: var(--nimiq-light-blue);
  }
}

.row-status {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--muted-text);
  width: 40px;
  text-align: center;
}

/* Sold-out / 86 pill. Small, uppercase, orange (warning) text on a soft orange tint, fully
   rounded — reuses the .row-status sizing language. This is the system warning-state marker, not a
   decorative kicker (the ONE allowed pill per the brand rules). */
.stock-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nimiq-orange);
  background: rgba(252, 135, 2, 0.12);
  border-radius: 500px;
}

/* Low-stock caution badge: same orange (warning) token + pill as the sold-out/86 badge family,
   shown inline on a tracked item whose count has reached its reorder par. Caution, not error. */
.stock-badge.low {
  color: var(--nimiq-orange);
  background: rgba(252, 135, 2, 0.12);
}

/* The reorder-par input reuses the .stock-set-input sizing; nudge it visually distinct from the
   Set field only by its adjacent "Par" label (no new chrome). */
.stock-control .stock-par-input {
  width: 64px;
}

/* Catalog-level auto-86 toggle row at the top of the Review screen: a single label + pill on one
   line, separated from the catalog list by whitespace (not a box), matching the screen's rhythm. */
.auto-86-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.auto-86-row .auto-86-label {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--nimiq-blue);
}

/* The add-item form is a distinct 'compose' zone, clearly separated from the list above
   by whitespace (not a box). Generous space above; the page-body bottom padding keeps it
   fully revealable above the pinned footer. */
.add-item-block {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 32px;
}

.add-item-block .row-name {
  flex: 1 1 auto;
  min-width: 0;
}

.add-item-block .add-label {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
  margin-bottom: 6px;
}