/* Safety Auto receipt — landscape layout matching the original pre-printed
   pad (see public/assets/reference/safety-auto-receipt-reference.png).
   Default paper: exact A6 landscape, 148mm x 105mm, 3mm print margin so
   the red border sits close to the page edge like the original. The
   actual @page size/margin is set by an inline <style> tag generated in
   public/js/print.js from the business's configured paper dimensions
   (Settings > Receipt Layout), since @page can't read CSS custom
   properties — these are just the fallback values if that ever fails to
   run. Calibrate against an actual printed test receipt before relying on
   this for production; printer hardware imposes its own non-printable
   margin that can differ from this software default. */

@page {
  size: 148mm 105mm;
  margin: 3mm;
}

/* This stylesheet is loaded both on the dedicated print page AND inline in
   the dashboard (for the live receipt preview in New Receipt / Settings).
   Base html/body colors must therefore stay scoped to @media print only —
   otherwise they'd override the dashboard's own light/dark theme (see
   app.css) for the whole page, not just the .receipt element, which is
   exactly the bug this comment is here to prevent reintroducing.
   The "receipt must always print in its own configured colors, regardless
   of dashboard dark/light mode" requirement is still satisfied: the
   .receipt element's colors come from the --receipt-* custom properties
   set inline per-receipt (see receiptTemplate.js), and this @media print
   rule guarantees the printed PAGE background behind it is white even if
   the browser/OS tries to force a dark print background. */
@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
  }
}

.receipt, .receipt * {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-style: normal;
  box-sizing: border-box;
}

.receipt {
  --receipt-primary: #F21B18;
  --receipt-accent: #F21B18;
  --receipt-border: #F21B18;
  --receipt-text: #F21B18;
  --receipt-background: #FFFFFF;
  --receipt-logo-scale: 1;
  --receipt-name-scale: 1;
  --receipt-header-spacing-scale: 1;
  --receipt-border-thickness-scale: 1;
  --receipt-field-spacing-scale: 1;
  --receipt-label-scale: 1;

  width: 142mm;
  height: 99mm;
}

.receipt-card {
  width: 100%;
  height: 100%;
  background: var(--receipt-background);
  border: calc(2.6mm * var(--receipt-border-thickness-scale)) solid var(--receipt-border);
  border-radius: 9mm;
  padding: 3.2mm 5mm 3mm;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.receipt-header {
  display: grid;
  grid-template-columns: calc(22mm * var(--receipt-logo-scale)) 1fr auto;
  align-items: center;
  column-gap: 2.5mm;
  margin-bottom: calc(1.6mm * var(--receipt-header-spacing-scale));
}

.receipt-logo {
  width: calc(22mm * var(--receipt-logo-scale));
  height: calc(22mm * var(--receipt-logo-scale));
}
.receipt-logo-svg, .receipt-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.receipt-heading { text-align: center; }
.receipt-business-name {
  font-size: calc(8.6mm * var(--receipt-name-scale));
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--receipt-text);
  line-height: 1;
}
.receipt-underline {
  display: flex;
  flex-direction: column;
  gap: 0.5mm;
  margin: 0.9mm auto 0.7mm;
  width: 68%;
}
.receipt-underline .bar {
  height: 0.35mm;
  background: var(--receipt-accent);
  display: block;
}
.receipt-location {
  font-size: calc(4mm * var(--receipt-name-scale));
  font-weight: 700;
  color: var(--receipt-text);
  letter-spacing: 0.5px;
}

.receipt-phones {
  font-size: 3mm;
  font-weight: 700;
  color: var(--receipt-text);
  text-align: right;
  line-height: 1.5;
  white-space: nowrap;
}

.receipt-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(1.2mm * var(--receipt-header-spacing-scale)) 0 calc(2.2mm * var(--receipt-header-spacing-scale));
  font-size: 3.6mm;
  line-height: 1;
  color: var(--receipt-text);
}
.receipt-no {
  font-weight: 600;
  display: flex;
  align-items: center;
}
.receipt-no-value {
  font-weight: 700;
  font-size: 4.6mm;
  margin-left: 2mm;
  line-height: 1;
}
.receipt-date {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  font-weight: 600;
  line-height: 1;
}
.receipt-date-value {
  min-width: 28mm;
  display: inline-block;
  line-height: 1;
  border-bottom: 0.3mm dotted var(--receipt-text);
  padding-bottom: 0.4mm;
}

.receipt-fields {
  display: flex;
  flex-direction: column;
  gap: calc(1.6mm * var(--receipt-field-spacing-scale));
  flex: 1;
  min-height: 0;
}

.receipt-field {
  box-sizing: border-box;
  border: 0.35mm solid var(--receipt-border);
  border-radius: 3mm;
  padding: 1.4mm 3mm;
  display: flex;
  align-items: center;
  gap: 2.5mm;
  flex: 1;
  min-height: 0;
}

.field-label {
  font-size: calc(3.5mm * var(--receipt-label-scale));
  font-weight: 700;
  line-height: 1;
  color: var(--receipt-text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.field-value {
  font-size: 3.7mm;
  font-weight: 600;
  line-height: 1.15;
  color: #1a1a1a;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
}

.pending-note {
  margin-top: 1mm;
  text-align: center;
  font-size: 2.4mm;
  font-weight: 500;
  color: var(--receipt-text);
}

/* Hide every app chrome element when printing the full app page; the
   dedicated print page (print.html) never includes them in the first
   place, but this stays as a safety net if printed from elsewhere. */
@media print {
  .app, .sidebar, .topbar, .toast-root, nav, header, .no-print {
    display: none !important;
  }
}