/* Receipt detail page.

   Replaces the page-local <style> block that previously lived in
   pages/receipt_detail.html. Receipts are financial trust artifacts;
   colors and typography come from the design token layer so they
   adapt to themes and stay consistent on print.

   Status palette mapping (kept here so writers and reviewers can
   audit which receipt kind reads which semantic color):
     payment → --c-success (positive close-out)
     tip     → --c-primary (acknowledgment)
     refund  → --c-warn    (attention; the buyer paid before)
*/

.receipt-card {
  max-width: 640px;
  margin: 24px auto;
  background: var(--c-surface);
  border-radius: var(--r-1);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.receipt-header {
  color: var(--c-on-primary, #fff);
  padding: 22px 24px;
  text-align: center;
}

.receipt-header--payment { background: var(--c-success); }
.receipt-header--tip     { background: var(--c-primary); }
.receipt-header--refund  { background: var(--c-warn); }

.receipt-header h1 {
  margin: 0;
  font-size: var(--fs-xl);
}

.receipt-header .num {
  opacity: 0.9;
  font-size: var(--fs-sm);
  margin-top: 6px;
}

.receipt-parties {
  display: table;
  width: 100%;
  border-collapse: collapse;
  background: var(--c-bg);
}

.receipt-parties > div {
  display: table-cell;
  padding: 14px 24px;
  vertical-align: top;
  width: 50%;
}

.receipt-parties .label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.receipt-parties .value {
  font-size: var(--fs-base);
  color: var(--c-text);
  font-weight: 500;
}

.receipt-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-border);
}

.receipt-section:last-of-type {
  border-bottom: none;
}

.receipt-section h3 {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.receipt-items {
  width: 100%;
  border-collapse: collapse;
}

.receipt-items td {
  padding: 8px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-divider, var(--c-border));
}

.receipt-items tr:last-child td {
  border-bottom: none;
}

.receipt-items td.amount {
  text-align: right;
}

.receipt-items tr.total td {
  font-weight: 700;
  padding-top: 14px;
  border-top: 2px solid var(--c-text);
}

.void-banner {
  background: color-mix(in srgb, var(--c-warn) 18%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-warn) 40%, transparent);
  color: color-mix(in srgb, var(--c-warn) 60%, var(--c-text));
  padding: 10px;
  margin: 12px 24px;
  border-radius: var(--r-1);
  text-align: center;
  font-weight: 700;
}

.receipt-footer {
  padding: 14px 24px;
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  text-align: center;
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  .receipt-card {
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
}