/* Receipt page (also what prints) */
.receipt-page { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.receipt {
  background: var(--paper); border-radius: 6px; box-shadow: var(--shadow); padding: 1.6rem 1.4rem 1.8rem; font-size: 0.95rem;
  position: relative; max-width: 380px; width: 100%;
}
.receipt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px;
  background: linear-gradient(-45deg, transparent 6px, var(--paper) 0) 0 0 / 12.6px 100% repeat-x, linear-gradient(45deg, transparent 6px, var(--paper) 0) 0 0 / 12.6px 100% repeat-x; }
.receipt-head { text-align: center; padding-bottom: 0.9rem; border-bottom: 2px dashed var(--line-strong); margin-bottom: 0.9rem; }
.receipt-head h2 { font-size: 1.3rem; }
.receipt-head p { color: var(--ink-2); font-size: 0.88rem; }
.receipt-meta { display: grid; gap: 0.1rem; color: var(--ink-2); font-size: 0.9rem; margin-bottom: 0.8rem; }
.receipt-lines { border-top: 1px dotted var(--line-strong); }
.receipt-line { display: grid; grid-template-columns: 1fr auto; gap: 0 0.8rem; padding: 0.5rem 0; border-bottom: 1px dotted var(--line-strong); }
.receipt-line small { color: var(--ink-3); grid-column: 1; }
.receipt-sums { padding-top: 0.7rem; display: grid; gap: 0.25rem; }
.receipt-sums .sum-total { font-size: 1.7rem; border-top: 2px dashed var(--line-strong); margin-top: 0.4rem; padding-top: 0.6rem; }
.receipt-foot { text-align: center; margin-top: 1.1rem; color: var(--ink-2); font-size: 0.9rem; }
.void-stamp { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); border: 4px solid var(--red); color: var(--red); font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; padding: 0.1rem 1rem; border-radius: 8px; opacity: 0.8; pointer-events: none; }
.success-banner { display: flex; align-items: center; gap: 1rem; background: var(--green-soft); color: var(--green-dark); border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.success-banner .icon { width: 2rem; height: 2rem; }
.success-banner strong { font-family: var(--font-display); font-size: 1.3rem; display: block; }
.side-stack { display: grid; gap: 1rem; }

/* Product form */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; align-items: start; }
.photo-box { display: grid; gap: 0.7rem; justify-items: center; text-align: center; }
.photo-preview { width: 100%; aspect-ratio: 1; border-radius: 16px; background: #e8edf1; object-fit: cover; display: grid; place-items: center; color: var(--ink-3); overflow: hidden; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .icon { width: 2.6rem; height: 2.6rem; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.inline-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.inline-form .input { width: auto; flex: 1 1 140px; min-height: 40px; }
.stock-form { display: flex; gap: 0.4rem; align-items: center; }
.stock-form .input { width: 84px; min-height: 40px; padding: 0.3rem 0.6rem; }
.filters { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters .search { flex: 1 1 260px; max-width: 420px; }
.filters .select { width: auto; min-width: 170px; }
.movement-in { color: var(--green-dark); font-weight: 700; }
.movement-out { color: var(--red); font-weight: 700; }

@media (max-width: 900px) {
  .receipt-page, .form-grid { grid-template-columns: 1fr; }
  .photo-box { grid-template-columns: 110px 1fr; justify-items: start; text-align: left; align-items: center; }
  .photo-preview { width: 110px; }
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); }
  .table-stack td { border: 0; padding: 0.15rem 0; }
  .table-stack td.actions, .table-stack td.right { text-align: left; }
  .table-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 0.88rem; }
  .table-stack td.cell-title::before { content: none; }
}

/* Printing: only the receipt, sized for an 80mm paper roll. */
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .toasts, .no-print, .scrim, .page-head, .success-banner, .side-stack, .back { display: none !important; }
  .shell { display: block; }
  .page { padding: 0; max-width: none; }
  .receipt-page { display: block; }
  .receipt { box-shadow: none; max-width: 80mm; margin: 0; padding: 0 2mm; font-size: 11pt; background: #fff; }
  .receipt::after { display: none; }
  .void-stamp { opacity: 1; }
  @page { margin: 4mm; }
}

/* Ticket-only page (what the hidden print frame loads): 80 mm paper, nothing else */
.ticket-body { background: #fff; margin: 0; }
.ticket-body .receipt { box-shadow: none; max-width: 80mm; margin: 0 auto; padding: 4mm 3mm; background: #fff; font-size: 11pt; }
.ticket-body .receipt::after { display: none; }

/* Logo on the ticket: centered, black and white so thermal printers get clean contrast */
.receipt-logo { display: block; max-width: 70%; max-height: 24mm; margin: 0 auto 0.6rem; object-fit: contain; filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; }

/* Sale detail */
.sale-method { display: flex; align-items: center; gap: 0.5rem; font-size: 1.6rem; }
.sale-method .icon { width: 1.3rem; height: 1.3rem; color: var(--ink-3); }
.receipt-col { display: grid; gap: 0.6rem; justify-items: start; }
.receipt-caption { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-3); font-weight: 600; margin: 0; }
.table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
@media print { .receipt-col { display: block; } }

/* Inventory: missing costs callout */
.stat-note-warn { color: var(--amber); font-weight: 650; }
.cost-callout {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem 1.3rem; align-items: center; margin: 0 0 1.2rem; padding: 1.2rem 1.4rem;
  background: linear-gradient(120deg, var(--tag-soft) 0%, #fff9e3 100%); border: 1.5px solid #f3d982; border-radius: var(--radius-lg);
}
.cost-callout-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tag); color: var(--tag-ink); }
.cost-callout-icon .icon { width: 28px; height: 28px; }
.cost-callout h2 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.cost-callout p { color: #5a4300; max-width: 62ch; }
.cost-progress { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; max-width: 460px; }
.cost-progress .hbar-track { flex: 1; background: rgb(58 42 0 / 0.14); }
.cost-progress .hbar-fill { background: var(--green); }
.cost-progress span { white-space: nowrap; color: #5a4300; font-size: 0.92rem; }
.cost-samples { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.cost-samples .chip { min-height: 34px; padding: 0.15rem 0.8rem; background: #fff; font-size: 0.92rem; }
.cost-callout-action { white-space: nowrap; }
@media (max-width: 800px) { .cost-callout { grid-template-columns: 1fr; } .cost-callout-icon { width: 44px; height: 44px; } .cost-callout-action { justify-self: start; } }

/* Quick purchase-price entry inside the products list */
.cost-cell { min-width: 210px; }
.cost-quick { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: center; }
.cost-quick .input-group { width: 128px; }
.cost-quick .input { min-height: 36px; padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.95rem; }
.cost-quick .input::placeholder { font-size: 0.82rem; }
@media (max-width: 900px) { .cost-quick { justify-content: flex-start; } }