/* ==========================================================================
   BILLING — payments list, closing the till, the receipt, the payments box
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .bil-.

   The receipt paper is the one place that deliberately looks the same in light
   and dark: a receipt is a piece of paper, and is printed on one. It keeps its
   own ink-on-paper colours, set from the neutral scale, in every theme.

   Contents
     1  Lists and filters
     2  Closing the till
     3  The receipt: page layout and the paper
     4  Forms inside cards (refund, void, take a payment)
     5  The payments box on an application
     6  Public receipt check
     7  Print
   ========================================================================== */


/* ==========================================================================
   1 · LISTS AND FILTERS
   ========================================================================== */

.bil-filters {
  align-items: end;
}

/* A second, smaller line under a table cell: the receipt number, what was refunded. */
.bil-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.bil-strong { font-weight: var(--font-weight-semibold); }
.bil-faint { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

/* Numbers, dates and amounts are read whole: they never break across lines. */
.bil-nowrap { white-space: nowrap; }

/* Wide layout of the payments list: the citizen is the cell people read first, so it keeps its room; who recorded the
   payment is a footnote and gives way (its full name is in the cell's title). Without this the name wrapped to one word
   per line while the footnote took three. */
@media (min-width: 48rem) {
  .bil-table .bil-cell-person { min-inline-size: 10rem; }
  .bil-table .bil-cell-clip { max-inline-size: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The tiles are narrow, and "425.00 ₪" at the default size would wrap. */
.bil-kpis .stat-tile__value { font-size: var(--font-size-xl); white-space: nowrap; }

/* A table cannot be read at 375px. Under 48rem every row becomes a card: the cells stack
   two to a line, each labelled from its data-label, and the header row — which the labels
   replace — is kept for assistive technology but not painted. */
@media (max-width: 47.99rem) {
  .bil-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .bil-table,
  .bil-table tbody,
  .bil-table tfoot { display: block; }

  .bil-table tbody tr,
  .bil-table tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .bil-table tbody tr:last-child { border-block-end: 0; }

  .bil-table td,
  .bil-table tfoot th {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    text-align: start;
  }

  .bil-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  /* The first cell is the card's heading: full width, no label. */
  .bil-table .bil-cell-head {
    grid-column: 1 / -1;
    font-size: var(--font-size-md);
  }
  .bil-table td.bil-cell-head::before { content: none; }

  .bil-table .table__num { text-align: start; }
}


/* ==========================================================================
   2 · CLOSING THE TILL
   ========================================================================== */

.bil-range {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4);
}

.bil-notice { margin-block-start: var(--space-3); }

.bil-till {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bil-till__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* The one figure the cashier is closing the drawer against, so it is the largest thing here. */
.bil-cash {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
}

.bil-cash__label { font-weight: var(--font-weight-semibold); }

.bil-cash__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-link);
}

.bil-cash__hint { flex-basis: 100%; }

.bil-total th,
.bil-total td {
  font-weight: var(--font-weight-semibold);
  background: transparent;
  text-align: start;
  border-block-start: 2px solid var(--color-border-strong);
}

.bil-total td.table__num { text-align: end; }

.bil-rule { max-inline-size: 60ch; margin: 0; }


/* ==========================================================================
   3 · THE RECEIPT
   ========================================================================== */

.bil-page {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .bil-page { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
}

.bil-page__side { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }

.bil-void-reason { display: block; margin-block-start: var(--space-1); }

/* The paper. Opaque, ink on paper, regardless of theme. */
.bil-paper {
  --bil-paper-bg: var(--neutral-0);
  --bil-paper-ink: var(--neutral-900);
  --bil-paper-soft: var(--neutral-600);
  --bil-paper-rule: var(--neutral-300);
  --bil-paper-void: var(--red-600);

  /* Whatever sits on the paper and borrows a theme text token borrows the paper's ink instead: the theme's muted and
     subtle greys are light greys in dark mode, and light grey on white paper is 2.6:1. */
  --color-text: var(--bil-paper-ink);
  --color-text-muted: var(--bil-paper-soft);
  --color-text-subtle: var(--bil-paper-soft);

  position: relative;
  max-inline-size: 28rem;
  padding: var(--space-6);
  color: var(--bil-paper-ink);
  background: var(--bil-paper-bg);
  border: 1px solid var(--bil-paper-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.bil-paper__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 2px solid var(--bil-paper-ink);
}

.bil-paper__office { min-inline-size: 0; flex: 1 1 10rem; }

.bil-paper__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.bil-paper__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--bil-paper-soft);
}

.bil-paper__title { text-align: end; }
.bil-paper__kind { margin: 0; font-size: var(--font-size-xs); color: var(--bil-paper-soft); }
.bil-paper__number { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }

.bil-facts { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }

.bil-facts > div {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.bil-facts dt { color: var(--bil-paper-soft, var(--color-text-muted)); }
.bil-facts dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }

/* The side panel's facts read as label above value, on a narrow card. */
.bil-facts--stacked > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.bil-facts--stacked dt { color: var(--color-text-muted); }

.bil-lines {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.bil-lines th,
.bil-lines td {
  padding: var(--space-2) var(--space-1);
  text-align: start;
  border-block-end: 1px solid var(--bil-paper-rule);
}

.bil-lines thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--bil-paper-soft);
  border-block-end: 1px solid var(--bil-paper-ink);
}

.bil-lines .bil-lines__amount { text-align: end; white-space: nowrap; }

.bil-lines tfoot th,
.bil-lines tfoot td {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  border-block-start: 2px solid var(--bil-paper-ink);
  border-block-end: 0;
}

.bil-facts--payment { margin-block-end: var(--space-2); }

.bil-paper__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--bil-paper-rule);
}

.bil-qr { display: flex; align-items: center; gap: var(--space-3); margin: 0; }

/* Black modules on white with their quiet zone, whatever the theme: a code on a dark
   background does not scan. */
.bil-qr__code {
  inline-size: 8.25rem;
  block-size: 8.25rem;
  flex: none;
  background: var(--neutral-0);
}

.bil-qr__code svg { display: block; inline-size: 100%; block-size: 100%; }

.bil-qr__caption {
  max-inline-size: 12ch;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--bil-paper-soft);
}

.bil-paper__token { margin: 0; font-size: var(--font-size-xs); color: var(--bil-paper-soft); }

/* A voided receipt: a stamp across it, and the paper greyed, so it cannot be mistaken for a
   valid one even in a photograph. The word is text, not just colour. */
.bil-paper.is-void .bil-lines,
.bil-paper.is-void .bil-facts { opacity: 0.55; }

.bil-stamp {
  position: absolute;
  inset-block-start: 38%;
  inset-inline: 0;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 3.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.25rem;
  color: var(--bil-paper-void);
  opacity: 0.8;
  transform: rotate(-14deg);
  pointer-events: none;
}

[dir='rtl'] .bil-stamp { letter-spacing: 0; transform: rotate(14deg); }

.bil-paper__voided {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--bil-paper-void);
}

.bil-refund { display: flex; flex-direction: column; gap: var(--space-1); }


/* ==========================================================================
   4 · FORMS INSIDE CARDS
   ========================================================================== */

.bil-panel {
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.bil-panel--danger { border-color: var(--color-danger-border); }

.bil-panel__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   5 · THE PAYMENTS BOX
   ========================================================================== */

.bil-panelbox { min-inline-size: 0; }

/* On an application's page the cards are ordered by .apl-card--* (applications.css); the payments
   card sits with the fees it settles — the same order, so it follows them in the document. */
.apl-card--payments { order: 4; }

.bil-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.bil-due__label { color: var(--color-text-muted); }
.bil-due__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); white-space: nowrap; }
.bil-due__value.is-clear { color: var(--color-success); }

.bil-split {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* Only when the cashier is choosing the split does it become a boxed group of inputs. */
.bil-split.is-open {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.bil-split__legend { padding-inline: 0; }
.bil-split.is-open .bil-split__legend { padding-inline: var(--space-1); }

.bil-allocated { margin: 0; font-variant-numeric: tabular-nums; }

.bil-payments { margin: 0; }

.bil-payment { display: flex; flex-direction: column; gap: var(--space-1); }
.bil-payment p { margin: 0; }


/* ==========================================================================
   6 · PUBLIC RECEIPT CHECK
   ========================================================================== */

.verify-body { background: var(--color-bg); }

.bil-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  min-block-size: 100dvh;
  padding: var(--space-8) var(--space-4);
}

.bil-verify__card {
  inline-size: 100%;
  max-inline-size: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.bil-verify__card.is-valid { border-color: var(--color-success-border); }
.bil-verify__card.is-void { border-color: var(--color-danger-border); }

.bil-verify__icon { inline-size: 3.5rem; block-size: 3.5rem; }
.bil-verify__card.is-valid .bil-verify__icon { color: var(--color-success); }
.bil-verify__card.is-void .bil-verify__icon { color: var(--color-danger); }
.bil-verify__card.is-missing .bil-verify__icon { color: var(--color-text-muted); }

.bil-verify__verdict { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.bil-verify__verdict-en { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bil-verify__hint { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.bil-verify__facts {
  inline-size: 100%;
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  text-align: start;
  border-block-start: 1px solid var(--color-border);
}

.bil-verify__facts dt { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bil-verify__facts dd { margin: var(--space-1) 0 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }

.bil-verify__note {
  max-inline-size: 30rem;
  margin: 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   7 · PRINT
   --------------------------------------------------------------------------
   app.css already drops the shell, buttons and .no-print. What is added is
   the receipt on a half-page of its own, and the till report as a plain page.
   ========================================================================== */

@media print {
  @page { margin: 12mm; }

  .bil-page { display: block; }

  .bil-paper {
    max-inline-size: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .bil-stamp { color: var(--neutral-900); border: 3px solid var(--neutral-900); padding-inline: 1rem; }

  .bil-cash {
    border: 2px solid var(--neutral-900);
    background: transparent;
  }

  .bil-cash__value { color: var(--neutral-900); }

  .bil-verify__card { box-shadow: none; }
}