/* CPPLC — printable sheets.
   Loaded for all media: the on-screen preview and the printer share one layout,
   so what you see is what comes out. Sheets are always light-on-white; they are
   paper, not UI, and never follow the app's dark theme. */

.sheet {
  --sheet-ink: #000;
  --sheet-rule: #000;
  --sheet-faint: #555;

  position: relative;
  background: #fff;
  color: var(--sheet-ink);
  /* Families and size come from Settings; everything else on the sheet is sized
     in em relative to this, so one number scales the whole document.

     The Latin face is listed first on purpose. A font stack is resolved per
     character, not per element: the browser takes each character from the first
     family that actually has a glyph for it. A Latin face has no Khmer glyphs,
     so it claims the digits and roman letters — the dates, card numbers and
     telephone numbers — and every Khmer character falls straight through to the
     Khmer face behind it. That is what lets two scripts be set in two chosen
     faces without marking up which is which. */
  font-family: var(--font-latin, "Times New Roman"), var(--font-khmer, "Khmer OS Battambang"),
               "Khmer OS", "Noto Serif Khmer", "Noto Sans Khmer", "Khmer Sangam MN",
               "Khmer MN", Hanuman, Battambang, serif;
  font-size: var(--sheet-font-size, 11pt);
  line-height: 1.85;
  box-sizing: border-box;
  overflow: hidden;

  /* Force the printer to render fills — the yellow grouping headers on the
     master list and the grey table headers are backgrounds, which browsers drop
     by default unless the user finds the "Background graphics" checkbox. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Exact A4. The 0.2mm shaved off the height keeps sub-pixel rounding from
   spilling one page into two blank ones when @page margin is 0. */
.sheet.landscape { width: 297mm; height: 209.8mm; padding: 8mm 10mm; }
.sheet.portrait  { width: 210mm; height: 296.8mm; padding: 10mm 12mm; }

/* ---------- shared document furniture ---------- */

.doc-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 6mm;
  font-size: 1.048em;
}
.doc-head .dh-left  { text-align: left; }
.doc-head .dh-right { text-align: right; }
.doc-head .dh-mid   { display: flex; justify-content: center; padding-top: 1mm; }

/* Default emblem: extracted from the source document photo (assets/emblem.png).
   Settings can replace it with a higher-resolution file. */
.emblem {
  display: block;
  width: 25mm;
  height: 23.5mm;
  background-image: url("../assets/emblem.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.emblem.custom {
  background-image: var(--emblem-src);
  width: 26mm;
  height: 26mm;
}
.emblem.none { background: none; }

/* The Settings preview shows this same artwork, but must not inherit the print
   sizes above: those are millimetres chosen for how the sheet looks on paper
   and they change, whereas the preview box is a fixed pixel panel in the app.
   Coupling the two meant enlarging the printed emblem silently overflowed the
   preview out of its card. It fills its own box instead. */
.emblem.preview { width: 100%; height: 100%; }

.doc-title {
  text-align: center;
  font-size: 1.333em;
  font-weight: 700;
  margin: 3mm 0 3mm;
}

.fill {
  display: inline-block;
  min-width: 22mm;
  border-bottom: 1px dotted var(--sheet-faint);
  text-align: center;
  font-weight: 600;
}
.fill.wide { min-width: 34mm; }
.fill.blank { font-weight: 400; }

/* ---------- Form A: household member list ---------- */

table.reg {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.905em;
  line-height: 1.6;
}
table.reg th, table.reg td {
  border: 0.4mm solid var(--sheet-rule);
  padding: 1mm 1.5mm;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  word-break: break-word;
}
/* The header carries the longest strings on the sheet — ទំនាក់ទំនងក្នុងគ្រួសារបក្ស
   has to sit in 30mm — so it is the first thing to break when the sheet font
   size rises. It is therefore sized and spaced independently of the data rows:
   a tighter line box and narrower side padding together buy about a line of
   height across the whole header, which is what keeps the signature block from
   being pushed off the bottom of the page at 11pt. (.sheet clips its overflow,
   so anything pushed past the page edge is lost silently rather than visibly.)

   overflow-wrap:anywhere rather than the shared word-break:break-word — Khmer
   is written without spaces between words, so the header only fits by breaking
   mid-string, and 'anywhere' breaks between grapheme clusters instead of inside
   one. It also lets the fixed table layout measure the column honestly. */
table.reg thead th {
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1.25;
  padding: 1mm 0.6mm;
  word-break: normal;
  overflow-wrap: anywhere;
}
table.reg td.name { text-align: left; }
/* The numeric columns pinned to the Latin face chosen in Settings, so dates and
   card numbers stay in one typeface across the sheet rather than in whatever
   the system happens to hand out. */
table.reg td.num { font-family: var(--font-latin, system-ui), -apple-system, "Segoe UI", sans-serif; }
table.reg tbody tr { height: 9mm; }

/* The signature block follows the table rather than being pushed to the foot of
   the page: the table is only as long as the household, and the signatures
   belong directly under it, as on the paper original. */
.doc-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  margin-top: 7mm;
  font-size: 1.048em;
}
.doc-foot .role { font-weight: 700; margin-top: 1mm; }
.doc-foot .sig-space { height: 16mm; }
.doc-foot .sig-name { font-weight: 600; }

/* ---------- Form B: party family book ---------- */

.book {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  height: 100%;
}
.book .panel { display: flex; flex-direction: column; }

.book h2 {
  text-align: center;
  font-size: 1.238em;
  font-weight: 700;
  margin: 0 0 4mm;
}
.book .panel-label { font-size: 1em; margin-bottom: 2mm; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm 3mm;
}
.photo-cell { display: flex; flex-direction: column; gap: 1mm; }
.photo-box {
  border: 0.3mm solid var(--sheet-rule);
  aspect-ratio: 3 / 4;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 0.952em;
  color: var(--sheet-faint);
  overflow: hidden;
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-box.head-photo { border-width: 0.5mm; }
.photo-cell .cap {
  font-size: 0.81em;
  line-height: 1.4;
  text-align: center;
  min-height: 5mm;
}

.book .cover-line { margin-bottom: 3.5mm; font-size: 1.048em; }
.book .squiggle {
  text-align: center;
  letter-spacing: -1px;
  font-size: 0.952em;
  margin: -2mm 0 3mm;
}
/* The member counts and the head's name on the left, the head's photo on the
   right, as on the paper original. An explicit row rather than a float: .panel
   is a flex column, so its children are flex items and `float` on one of them
   is ignored outright — the photo used to end up at the top left of the panel
   because of it. */
.book .cover-headrow {
  display: flex;
  align-items: flex-start;
  gap: 4mm;
}
.book .cover-headrow-lines { flex: 1 1 auto; min-width: 0; }
.book .cover-head-photo {
  flex: 0 0 auto;
  width: 24mm;
  height: 32mm;
  border: 0.3mm solid var(--sheet-rule);
  object-fit: cover;
  margin-bottom: 2mm;
}
/* Same on the back: the two committee lines follow the text above them rather
   than sitting at the bottom of the panel. */
.book .cover-foot {
  margin-top: 9mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  text-align: center;
  font-size: 1em;
}

/* ---------- Form C: name & photo table ---------- */

table.namephoto {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1.048em;
}
table.namephoto th, table.namephoto td {
  border: 0.4mm solid var(--sheet-rule);
  padding: 2mm;
}
table.namephoto thead th { text-align: center; font-weight: 700; }
table.namephoto td.np-name { vertical-align: bottom; }
table.namephoto td.np-photo { width: 52%; text-align: center; vertical-align: middle; padding: 3mm; }
table.namephoto td.np-photo img {
  width: 33mm; height: 44mm; object-fit: cover; display: block; margin: 0 auto;
}
table.namephoto td.np-photo .ph {
  width: 33mm; height: 44mm; margin: 0 auto;
  border: 0.3mm solid var(--sheet-faint);
  display: grid; place-items: center;
  color: var(--sheet-faint); font-size: 0.952em;
}

/* ---------- Form D: master list ---------- */

table.master {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.714em;
  line-height: 1.5;
}
table.master th, table.master td {
  border: 0.25mm solid #333;
  padding: 0.8mm 1mm;
  text-align: center;
  overflow: hidden;
  word-break: break-word;
}
/* Same treatment as Form A's header, and for the same reason: the master list
   has the most columns of any sheet, so its header is the tightest fit here. */
table.master thead th {
  font-weight: 700;
  font-size: 0.933em;
  line-height: 1.25;
  padding: 0.8mm 0.5mm;
  background: #f2f2f2;
  word-break: normal;
  overflow-wrap: anywhere;
}
table.master thead th.hl { background: #ffff00; }   /* the register highlights the grouping columns */
table.master td.name { text-align: left; }
table.master td.num { font-family: var(--font-latin, system-ui), -apple-system, sans-serif; }

/* ---------- print ---------- */

@media print {
  .sheet { break-after: page; page-break-after: always; box-shadow: none !important; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  table.reg, table.master, table.namephoto { break-inside: auto; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
}