/*
 * The fee receipt, laid out like the school's own printed one: Times serif, a thin ruled box,
 * logo left and the school's name and address centred to its right, a dashed rule, FEE RECEIPT,
 * the two columns of facts with their colons aligned, the bordered S.no / Particulars / Amount
 * table, then the payment line, the signature line and the note. Two copies per A4 page, with a
 * dashed cut line between them.
 */
.rc-page { max-width: 820px; margin: 0 auto; background: #fff; padding: 18px 22px 24px; color: #111;
  font-family: "Times New Roman", Times, "Liberation Serif", serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.rc-stamp { text-align: right; font-size: 12px; margin: 0 2px 4px; }

.rc { position: relative; border: 1px solid #8a8a8a; padding: 14px 16px 12px; overflow: hidden; }
.rc-head { display: flex; align-items: stretch; gap: 10px; }
.rc-logo { width: 31%; max-width: 250px; height: auto; object-fit: contain; align-self: center; }
.rc-school { flex: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 14px 0 2px; }
.rc-school h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: .005em; }
.rc-school p { font-size: 14.5px; font-weight: 700; margin: 18px 0 0; }
.rc-rule { border-top: 1px dashed #555; margin: 6px -10px 6px; }
.rc-title { font-size: 15px; font-weight: 700; text-align: center; margin: 4px 0 8px; letter-spacing: .02em; }

.rc-info { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
/* Measured off the school's printed receipt: first colon at 29% of the box, second label at 55%,
   second colon at 72%. The 25-character transaction ID needs the whole first value column. */
.rc-info col.l1 { width: 27.5%; } .rc-info col.c1 { width: 1.4%; } .rc-info col.v1 { width: 26%; }
.rc-info col.l2 { width: 16.6%; } .rc-info col.c2 { width: 1.4%; } .rc-info col.v2 { width: auto; }
.rc-info th { text-align: left; font-weight: 700; padding: 3px 0; vertical-align: middle; }
.rc-info td { padding: 3px 0; vertical-align: middle; }
.rc-info td.c { text-align: left; }
.rc-info td:not(.c) { padding-left: 4px; padding-right: 8px; }

.rc-items { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-items col.sno { width: 12%; } .rc-items col.part { width: 65.5%; } .rc-items col.amt { width: auto; }
.rc-items th, .rc-items td { border: 1px solid #8a8a8a; padding: 3px 4px; text-align: left; }
.rc-items th { font-weight: 700; }
.rc-total td { font-weight: 700; }
.rc-total td:first-child { text-align: right; }

.rc-paid { font-size: 14px; margin: 14px 0 0; }
.rc-sign { font-size: 14px; font-weight: 700; text-align: right; margin: 22px 0 6px; }
.rc-note { font-size: 13px; font-weight: 700; margin: 0; line-height: 1.4; }
.rc-cut { border-top: 2px dashed #555; margin: 22px 0 20px; }

.rc-void { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font: 700 78px/1 "Times New Roman", serif;
  color: rgba(180, 35, 24, .22); border: 6px solid rgba(180, 35, 24, .22); padding: 6px 22px; letter-spacing: .08em; pointer-events: none; }

/* On a phone SCREEN the two columns of facts become one: each <tr> is a 3-column grid, so its
   six cells (label : value, label : value) flow onto two lines. Printing keeps the exact layout. */
@media screen and (max-width: 640px) {
  .rc-page { padding: 10px; }
  .rc { padding: 10px; }
  .rc-info, .rc-items { font-size: 12.5px; }
  .rc-info, .rc-info tbody { display: block; }
  .rc-info colgroup { display: none; }
  .rc-info tr { display: grid; grid-template-columns: 44% 10px minmax(0, 1fr); }
  .rc-info td:not(.c) { padding: 2px 0; overflow-wrap: anywhere; }
  .rc-school h1 { font-size: 17px; }
  .rc-school p { font-size: 12px; margin-top: 8px; }
}

@media print {
  @page { size: A4 portrait; }
  body { background: #fff; }
  .no-print, .top, .toasts { display: none !important; }
  .page { max-width: none; padding: 0; margin: 0; }
  .rc-page { box-shadow: none; max-width: none; padding: 0; }
  /* Paper sizes, read off the school's own print (text ≈ 12px at A4 width): both copies and the
     cut line fit one A4 sheet at the browser's default margins. */
  .rc-stamp { font-size: 10.5px; margin-bottom: 2px; }
  .rc { padding: 10px 12px 9px; }
  .rc-logo { width: 28%; }
  .rc-school { padding-top: 8px; }
  .rc-school h1 { font-size: 18px; }
  .rc-school p { font-size: 12px; margin-top: 12px; }
  .rc-rule { margin: 4px -8px 4px; }
  .rc-title { font-size: 13px; margin: 2px 0 5px; }
  .rc-info, .rc-items { font-size: 12.5px; }
  .rc-info th, .rc-info td { padding: 1.5px 0; }
  .rc-items th, .rc-items td { padding: 2px 4px; }
  .rc-info { margin-bottom: 6px; }
  .rc-paid { font-size: 12.5px; margin-top: 9px; }
  .rc-sign { font-size: 12.5px; margin: 14px 0 4px; }
  .rc-note { font-size: 11.5px; line-height: 1.35; }
  .rc-cut { margin: 14px 0 12px; }
  .rc, .rc-cut { break-inside: avoid; }
  .rc-void { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}