/* Served raw by Propshaft, not run through the Tailwind CLI build — left
   unlayered like barcode_labels.css so this BEM-scoped .bill geometry can't
   be beaten by Tailwind v4's own @layer utilities. */

.bill {
  --bill-inline-size: 78mm;
  box-sizing: border-box;
  inline-size: var(--bill-inline-size);
  margin-inline: auto;
  padding: 3mm;
  background: #fff;
  color: #000;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 3mm;
  line-height: 1.4;
}

.bill__header {
  text-align: center;
  margin-block-end: 2mm;
}

.bill__logo {
  display: block;
  inline-size: 16mm;
  block-size: 16mm;
  object-fit: contain;
  margin-inline: auto;
  margin-block-end: 1mm;
}

.bill__store-name {
  font-weight: 700;
  font-size: 3.6mm;
}

.bill__meta {
  text-align: center;
  font-size: 2.6mm;
}

.bill__divider {
  border-block-end: 1px dashed #000;
  margin-block: 2mm;
}

.bill__customer p,
.bill__totals p {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
}

.bill__items {
  inline-size: 100%;
  border-collapse: collapse;
}

.bill__items th {
  text-align: start;
  font-weight: 700;
  font-size: 2.6mm;
  border-block-end: 1px solid #000;
  padding-block-end: 1mm;
}

.bill__items th:nth-child(2),
.bill__items td:nth-child(2),
.bill__items th:last-child,
.bill__items td:last-child {
  text-align: end;
}

.bill__items td {
  padding-block: 1mm;
  vertical-align: top;
}

.bill__item-options {
  font-size: 2.4mm;
  color: #333;
}

.bill__total {
  font-weight: 700;
  font-size: 3.4mm;
}

.bill__footer {
  text-align: center;
  margin-block-start: 2mm;
  font-size: 2.6mm;
}

@media screen {
  .bill {
    outline: 1px dashed #cbd5e1;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  }
}

@media print {
  @page {
    size: 80mm auto;
    margin: 4mm;
  }

  /* The receipt Stimulus controller relocates .bill to be a direct child of
     <body> before printing — that's what lets this hide the whole app
     chrome without any other layout changes. */
  body > * {
    display: none !important;
  }

  body > .bill {
    display: block !important;
    outline: none;
    box-shadow: none;
  }
}