/* The fee receipt - public/js/receipt.js.

   A document, so it is drawn as paper in both themes: dark ink on white, in
   the report card's blue so everything the school prints looks like one
   family. The screen shows the family's copy; paper gets both copies, one
   above the other on an A4 sheet, with a dashed line to cut along. */

.rcpt {
  --rc-accent: #00719c;
  --rc-accent-soft: #e6f4fa;
  --rc-ink: #1d1f25;
  --rc-muted: #5a5e69;
  --rc-rule: #d6dae2;
  --rc-void: #c3001a;
  position: relative;
  overflow: hidden;
  padding: 20px 24px 18px;
  background: #ffffff;
  color: var(--rc-ink);
  border: 1px solid var(--rc-rule);
  border-block-start: 4px solid var(--rc-accent);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.rcpt-preview {
  max-width: 780px;
  margin-inline: auto;
  box-shadow: 0 10px 30px rgba(20, 24, 40, 0.12);
  border-radius: 12px;
}
.rcpt-actions { margin-block-end: 14px; }
.rcpt-actions .subtle { font-size: 13px; }

/* ------------------------------------------------------------------ head */

.rcpt__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block-end: 12px;
  border-block-end: 1.5px solid var(--rc-accent);
}
.rcpt__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: none;
}
.rcpt__school { flex: 1; min-width: 0; }
.rcpt__school-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rc-accent);
}
.rcpt__school-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-block-start: 2px;
  font-size: 12px;
  color: var(--rc-muted);
}
.rcpt__meta { text-align: end; flex: none; }
.rcpt__title { font-size: 14px; font-weight: 700; }
.rcpt__no {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
}
.rcpt__date { font-size: 12px; color: var(--rc-muted); }

.rcpt__copy {
  display: inline-block;
  margin-block: 10px 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--rc-accent-soft);
  color: var(--rc-accent);
  font-size: 11px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ body */

.rcpt__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.rcpt__fields { margin: 0; }
.rcpt__row {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 10px;
  padding-block: 5px;
  border-block-end: 1px dotted var(--rc-rule);
}
.rcpt__row dt { color: var(--rc-muted); font-size: 12px; }
.rcpt__row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.rcpt__amount {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px;
  border: 1.5px solid var(--rc-accent);
  border-radius: 10px;
  background: var(--rc-accent-soft);
}
.rcpt__amount-label { font-size: 12px; font-weight: 700; color: var(--rc-accent); }
.rcpt__amount-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.rcpt__words { font-size: 12.5px; }
.rcpt__words-label { color: var(--rc-muted); }
.rcpt__balance {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  margin-block-start: 2px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--rc-rule);
  font-size: 12.5px;
}
.rcpt__balance strong { white-space: nowrap; }

.rcpt--reversal .rcpt__amount { border-color: var(--rc-void); background: #fff3f5; }
.rcpt--reversal .rcpt__amount-label,
.rcpt--reversal .rcpt__amount-value { color: var(--rc-void); }

/* The line that ties a void and its reversal together. */
.rcpt__link {
  margin-block-start: 12px;
  padding: 6px 11px;
  border: 1px solid var(--rc-void);
  border-radius: 8px;
  background: #fff3f5;
  color: var(--rc-void);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ foot */

.rcpt__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-block-start: 20px;
}
.rcpt__sign { font-size: 12px; color: var(--rc-muted); }
.rcpt__sign-line { height: 28px; margin-block-end: 4px; border-block-end: 1px solid var(--rc-ink); }
.rcpt__stamp {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 8px;
  border: 1.5px dashed #a3a8b3;
  border-radius: 50%;
  color: #8a8f9a;
  font-size: 10px;
  text-align: center;
  line-height: 1.25;
}
.rcpt__keep { margin: 12px 0 0; font-size: 11px; color: var(--rc-muted); }

/* Across the whole copy, so it shows on any part a photocopy keeps. */
.rcpt__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: rgba(195, 0, 26, 0.17);
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(-16deg);
}

@media (max-width: 640px) {
  .rcpt { padding: 16px; }
  .rcpt__head { flex-wrap: wrap; }
  .rcpt__meta { flex-basis: 100%; text-align: start; }
  .rcpt__body { grid-template-columns: 1fr; }
  .rcpt__row { grid-template-columns: 8em minmax(0, 1fr); }
  .rcpt__foot { grid-template-columns: 1fr 1fr; }
  .rcpt__stamp { display: none; }
}

/* ----------------------------------------------------------------- paper

   print.css sets A4 at 10mm: 277mm of height. Two 133mm copies and the cut
   line between them fill it, so each copy is exactly half a sheet whatever
   the content, and the cut always falls in the same place. */
@media print {
  .rcpt-sheet { display: block; }
  .rcpt {
    box-sizing: border-box;
    height: 133mm;
    padding: 6mm 7mm 5mm;
    border: 0.75pt solid var(--rc-rule);
    border-block-start: 2.5pt solid var(--rc-accent);
    border-radius: 0;
    font-size: 9.5pt;
    break-inside: avoid;
  }
  .rcpt-cut {
    height: 0;
    margin-block: 4.5mm;
    border-block-start: 0.75pt dashed #777777;
  }
  .rcpt__logo { width: 15mm; height: 15mm; }
  .rcpt__school-name { font-size: 14pt; }
  .rcpt__school-sub,
  .rcpt__date,
  .rcpt__row dt,
  .rcpt__sign,
  .rcpt__words,
  .rcpt__balance,
  .rcpt__link { font-size: 8.5pt; }
  .rcpt__title { font-size: 10.5pt; }
  .rcpt__no { font-size: 15pt; }
  .rcpt__copy { font-size: 8pt; margin-block: 3mm 1.5mm; }
  .rcpt__row { padding-block: 1.2mm; }
  .rcpt__amount-label { font-size: 8.5pt; }
  .rcpt__amount-value { font-size: 19pt; }
  .rcpt__foot { margin-block-start: 5mm; }
  .rcpt__sign-line { height: 8mm; }
  .rcpt__stamp { width: 21mm; height: 21mm; font-size: 7pt; }
  .rcpt__keep { margin-block-start: 2.5mm; font-size: 7.5pt; }
  .rcpt__watermark { font-size: 64pt; }
}