/* ---- Receipt screen ---- */
.receipt-summary {
  margin-top: 16px;
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.summary-row .summary-label {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--muted-text);
  flex: 0 0 auto;
}

.summary-row .summary-value {
  font-size: 1.875rem;
  text-align: right;
  word-break: break-all;
}

.summary-row .summary-value.mono {
  font-family: 'Fira Mono', monospace;
  font-size: 1.625rem;
}

/* the exchange rate sits as a small secondary line under the NIM amount, not inline at full size */
.summary-row .summary-value .rate {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--muted-text);
  margin-top: 2px;
}

/* stacked rows (e.g. the full "Paid to" address): label on top, chunked address below */
.summary-row.stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* A Nimiq "Paid to" is the registry address-display, so the receipt shows the 3x3 block grid.
   The component's own 3rem is the wallet hero size; at 24px the block outweighs the amount that
   was actually paid, which is the receipt's real hero. 2rem keeps every block clearly readable,
   keeps the grid one step above the 1.625rem Reference and Tx values under it, and leaves the
   money on top. Deliberate, recorded as an accepted font-size in the conformance report. */
.summary-row.stacked .address-display {
  font-size: 2rem;
}

/* A USDC receipt carries an Ethereum-format address, which has no 3x3 grid: it stays a flat mono
   cell that wraps at the spaces. */
.summary-row.stacked .summary-value.addr {
  text-align: left;
  width: 100%;
  font-size: 1.625rem;
  line-height: 1.7;
  white-space: normal;     /* wrap the full address across lines... */
  word-break: keep-all;    /* ...but only at the spaces between 4-char chunks, never mid-chunk */
  overflow-wrap: normal;
}

.summary-row.total .summary-label,
.summary-row.total .summary-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.receipt-paid-line {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--nimiq-green);
  margin: 8px 0 0;
}

/* receipt line items reuse the transaction-list spacing pattern, no peer identicons */
.receipt-items .receipt-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.receipt-items .receipt-item + .receipt-item {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.receipt-items .rcpt-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.875rem;
}

.receipt-items .rcpt-qty {
  color: var(--muted-text);
  font-weight: 600;
}

.receipt-items .rcpt-total {
  flex: 0 0 auto;
  font-size: 1.875rem;
  font-weight: 700;
}

/* Per-line MERCHANT-ONLY note under its item line: small, muted, indented to read as a sub-line. */
.receipt-items .rcpt-note {
  margin: 0 0 4px;
  padding-left: 12px;
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
  overflow-wrap: anywhere;
}

/* Whole-order MERCHANT-ONLY note block on the receipt: stacked label + note text. */
.receipt-order-note {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.receipt-order-note .order-note-label {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
}

.receipt-order-note .order-note-text {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--nimiq-blue);
  overflow-wrap: anywhere;
}

/* Order-note affordance on the Checkout (Confirm and pay) panel. The panel is a navy surface, so
   the note text + action read on dark: white text, secondary-white action. */
.checkout-note {
  margin: 16px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.checkout-note .checkout-note-text {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

.checkout-note .checkout-note-action {
  color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
  .checkout-note .checkout-note-action:hover {
    color: #fff;
  }
}

/* Note editor overlay: reuses the manager-gate overlay shell; the remaining-char hint is plain
   muted text (no colored pill). */
.note-overlay .note-field {
  margin-top: 8px;
}

.note-overlay .note-hint {
  margin: 6px 0 0;
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* ---- Share receipt (receipt screen): QR + copyable public link ---- */
.share-receipt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.share-receipt .share-title {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--muted-text);
  margin: 0;
}

.share-receipt .share-qr .qr-code {
  display: block;
}

.share-receipt .copyable {
  font-size: 1.5rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 12px;
}

/* ---- Receipt + sell footer: a secondary action row above the primary CTA ---- */
/* The secondary action row (Receipt's View sales / Show buyer / Refund, Import's Accessibility).
   It is the FIRST thing in the pinned footer, so without a top margin it sits flush against the
   scrolling body above it: whatever row the merchant happened to stop scrolling on ends up butting
   straight into the pills, which is what Andrew photographed on the receipt with the "Paid to"
   address running into them. 16px matches the 2rem top margin .page-footer already gives the primary
   button below, so the footer keeps one rhythm instead of two. */
.footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 12px;
}

/* ---- Dashboard (analytics) ---- */
.dash-card {
  padding: 20px 0;
}

.dash-card + .dash-card {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.dash-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dash-card-head .dash-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.dash-card-head .dash-sub {
  font-size: 1.5rem;
  color: var(--muted-text);
}

.dash-gross {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.dash-gross .fiat-amount {
  font-size: 4rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.dash-gross .dash-nim .amount {
  font-size: 2rem;
  color: var(--muted-text);
}

.dash-stats {
  display: flex;
  gap: 32px;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-stat .ds-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.dash-stat .ds-label {
  font-size: 1.5rem;
  color: var(--muted-text);
}

.top-items {
  display: flex;
  flex-direction: column;
}

.top-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.top-item + .top-item {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.top-item .top-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.875rem;
}

.top-item .top-qty {
  color: var(--muted-text);
  font-weight: 600;
}

.top-item .top-gross {
  flex: 0 0 auto;
  font-size: 1.875rem;
  font-weight: 700;
}

/* Right column of a top-item: gross on top, a muted margin sub-line under it. Stacks so the
   margin reads as secondary, never competing with the gross figure. */
.top-item .top-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.top-item .top-margin {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* Margin summary block (dashboard) + close-out Margin section. Reuses .dash-card / .top-items /
   .totals-row rhythm; the coverage caveat is a muted note (reuses .empty-note tokens). No new
   colors — margin is a neutral figure, not success/green. */
.margin-block .top-items {
  margin-top: 8px;
}

.coverage-caveat {
  margin: 6px 0 0;
  font-size: 1.5rem;
  color: var(--muted-text);
}

/* ---- Close-out (end-of-day Z-report). Reuses the dashboard visual language (.dash-card,
   .top-items, .by-staff) with a few small additions. No new colors/gradients: navy total +
   secondary-navy captions + the existing hairline divider, all from the Nimiq palette. ---- */
.closeout-window {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.closeout-window .cw-label {
  font-size: 2rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.closeout-window .cw-range {
  font-size: 1.5rem;
  text-align: right;
  color: var(--muted-text);
}

/* R9 shift control bar on the close-out: session state (left) + open/close action (right). Reuses the
   palette + hairline (no new colors); the action is a standard nq-button-s. */
.shift-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 8px;
  box-shadow: inset 0 -1px 0 rgba(31, 35, 72, 0.06);
}

.shift-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shift-bar-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.shift-bar-meta {
  font-size: 1.5rem;
  color: var(--muted-text);
}

/* R10 void-reason picker: a vertical list of full-width reason pills (standard nq-button-s) in the
   overlay, so the merchant taps one reason before the manager gate. */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
}

.reason-list .reason-pill {
  width: 100%;
}

/* Hero card: same .dash-card surface, just no top hairline (it leads the screen). */
.dash-card.closeout-hero {
  padding-top: 0;
}

/* Totals breakdown: built on .top-items/.top-item rhythm. The Gross row is emphasized; a
   discount row is tinted with the warning accent (orange), never red/green (those stay
   error/success only per brand rules). */
.closeout-totals .totals-row,
.closeout-margin .totals-row,
.closeout-inventory .totals-row,
.closeout-drawer .totals-row,
.margin-block .totals-row,
.inventory-block .totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.closeout-totals .totals-row + .totals-row,
.closeout-margin .totals-row + .totals-row,
.closeout-inventory .totals-row + .totals-row,
.closeout-drawer .totals-row + .totals-row,
.margin-block .totals-row + .totals-row,
.inventory-block .totals-row + .totals-row {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

.closeout-totals .tr-label,
.closeout-margin .tr-label,
.closeout-inventory .tr-label,
.closeout-drawer .tr-label,
.margin-block .tr-label,
.inventory-block .tr-label {
  font-size: 1.875rem;
  color: var(--muted-text-strong);
}

.closeout-totals .tr-value,
.closeout-margin .tr-value,
.closeout-inventory .tr-value,
.closeout-drawer .tr-value,
.margin-block .tr-value,
.inventory-block .tr-value {
  font-size: 1.875rem;
}

.closeout-totals .tr-value .fiat-amount,
.closeout-margin .tr-value .fiat-amount,
.closeout-inventory .tr-value .fiat-amount,
.closeout-drawer .tr-value .fiat-amount,
.margin-block .tr-value .fiat-amount,
.inventory-block .tr-value .fiat-amount {
  font-size: 1.875rem;
}

.closeout-totals .totals-row.is-negative .tr-value .fiat-amount {
  color: var(--nimiq-orange);
}

/* S4: a SHORT drawer (counted < expected) tints the "Over / short" value with the same warning
   accent as a discount (orange, never red — red stays error-only per brand). The value is a plain
   text span (signed "-$X"), so target .tr-value directly rather than a nested .fiat-amount. */
.closeout-drawer .totals-row.is-negative .tr-value {
  color: var(--nimiq-orange);
}

.closeout-totals .totals-row.is-total .tr-label,
.closeout-margin .totals-row.is-total .tr-label,
.closeout-inventory .totals-row.is-total .tr-label {
  font-weight: 700;
  color: var(--nimiq-blue);
}

.closeout-totals .totals-row.is-total .tr-value .fiat-amount,
.closeout-margin .totals-row.is-total .tr-value .fiat-amount,
.closeout-inventory .totals-row.is-total .tr-value .fiat-amount {
  font-weight: 700;
  color: var(--nimiq-blue);
}

/* Refunds: an honest "not tracked" note (the schema persists no refund columns), styled as a
   muted caption so it never reads as $0.00 of reconciled refunds. */
.closeout-refunds {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.closeout-refunds .cr-label {
  font-size: 1.875rem;
  color: var(--muted-text-strong);
}

.closeout-refunds .cr-note {
  font-size: 1.5rem;
  text-align: right;
  margin: 0;
}

/* By-staff gross rollup: keep the gross navy + the appended count muted (reuses .bs-count tone). */
.by-staff-row .bs-gross {
  flex: 0 0 auto;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.by-staff-row .bs-gross .bs-count {
  font-weight: 400;
}

/* ---- Recent sales: server-backed list of the latest sales on the dashboard.
   Reuses the .top-item / .item-tap visual language (hairline dividers, navy total, secondary
   meta, the same press/hover affordance) so it reads as part of the same dashboard. PAID rows
   are <button class="recent-sale-row"> (tappable → reopen receipt); non-paid rows add .is-static
   (non-interactive). No new colors, no glassmorphism, no pulsing dots (brand rules). ---- */
.recent-sales {
  display: flex;
  flex-direction: column;
}

.recent-sale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  border-radius: 6px;
  transition: box-shadow 0.15s var(--nimiq-ease), transform 0.15s var(--nimiq-ease);
}

.recent-sale-row + .recent-sale-row {
  box-shadow: inset 0 1px 0 rgba(31, 35, 72, 0.06);
}

button.recent-sale-row {
  cursor: pointer;
}

@media (hover: hover) {
  button.recent-sale-row:hover {
    box-shadow: inset 0 0 0 2px rgba(5, 130, 202, 0.4);
  }
}

button.recent-sale-row:active {
  transform: translateY(1px);
}

.recent-sale-row.is-static {
  cursor: default;
}

.recent-sale-row .rs-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.recent-sale-row .rs-total {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}

.recent-sale-row .rs-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recent-sale-row .rs-time {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--muted-text);
}

.recent-sale-row .rs-ref {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--muted-text);
  white-space: nowrap;
}

/* Status chip: only paid is green (green = success ONLY). Pending neutral navy, expired/
   cancelled muted. Sentence case, no period, no dot. */
.recent-status {
  flex: 0 0 auto;
  font-size: 1.375rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.recent-status.paid {
  color: var(--nimiq-green);
  background: rgba(33, 188, 165, 0.12);
}

.recent-status.pending {
  color: var(--muted-text-strong);
  background: rgba(31, 35, 72, 0.08);
}

.recent-status.muted {
  color: rgba(31, 35, 72, 0.4);
  background: rgba(31, 35, 72, 0.05);
}

/* "Needs attention" status chips on the dashboard. Same chip sizing as .recent-status. Sold-out/86
   is the strong alert (red = error/critical), merely-low is the caution (orange = warning). The row
   reuses .by-staff-row so the name sits left and the chip sits right, non-interactive. */
.needs-attention {
  display: flex;
  flex-direction: column;
}

.na-chip {
  flex: 0 0 auto;
  font-size: 1.375rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.na-chip.alert {
  color: var(--nimiq-red);
  background: rgba(217, 68, 50, 0.12);
}

.na-chip.low {
  color: var(--nimiq-orange);
  background: rgba(252, 135, 2, 0.12);
}