/* ==========================================================================
   IN CHỨNG TỪ — hợp đồng & phiếu thu (ADR-050)
   ==========================================================================
   Nạp SAU shared.css. File riêng vì đây là MỘT MÔI TRƯỜNG KHÁC, không phải một
   màn hình khác: trên giấy không có màu nền, không có bóng đổ, không có thanh
   cuộn, và đơn vị đo là mm chứ không phải pixel.

   🔴 Khối `.print-root` LUÔN ẩn trên màn hình. Nó chỉ tồn tại lúc in. Bỏ dòng
      ẩn đó là chứng từ hiện lù lù dưới đáy mọi màn hình.
   ========================================================================== */

.print-root { display: none; }

/* 🔴 LỀ GIẤY NẰM Ở `padding` CỦA .doc-page, KHÔNG NẰM Ở `@page margin`.
   ---------------------------------------------------------------------------
   Bản đầu chỉ đặt `@page { margin: 12mm 14mm }` và chữ in ra sát mép giấy.
   Lý do: `@page margin` là GỢI Ý mặc định — hộp thoại in của trình duyệt có ô
   "Lề" riêng, và người dùng chọn "Không có" (hoặc đã chọn từ lần in trước, vì
   Chrome nhớ lựa chọn đó) thì nó ghi đè sạch.

   `padding` thì không ai ghi đè được: nó là NỘI DUNG chứ không phải lề giấy.
   Nên đặt `@page margin: 0` và để padding cầm toàn bộ khoảng cách — in ra luôn
   có lề, bất kể ô "Lề" trong hộp thoại đang để gì.

   Đánh đổi đã cân: nếu người dùng chọn "Lề: Mặc định" thì lề tổng sẽ rộng hơn
   một chút (lề của trình duyệt cộng thêm padding này). Rộng hơn thì vẫn đọc
   được; sát mép thì không. */
@page {
  size: A4;
  margin: 0;
}

@media print {
  /* Giấu toàn bộ giao diện app, chỉ chừa chứng từ. `body > *` thay vì liệt kê
     từng id: thêm một khối mới vào index.html sau này cũng tự động bị giấu. */
  body > * { display: none !important; }
  body > .print-root { display: block !important; }

  /* 🔴 PHẢI ÉP CHIỀU NGANG — không thì tờ giấy tự co lại vừa nội dung.
     ---------------------------------------------------------------------
     `body` mang class `.app` nên nó là một khung FLEX dọc, và `.print-root`
     là một phần tử con của khung đó. Phần tử flex không được ép thì co về bề
     rộng nội dung (shrink-to-fit).

     Hợp đồng không lộ lỗi này vì chữ của nó dài, tự kéo hết bề ngang. Tờ QR
     thì nội dung hẹp (mã 110mm), nên cả tờ co còn ~55% và dồn về mép trái —
     `align-items: center` bên trong vẫn đúng, chỉ là căn giữa một khung hẹp.

     Đo được: 553px trên khung 1265px. Ép 100% thì về đúng 1265px. */
  body > .print-root { inline-size: 100%; }

  /* 🔴 `body.app` CHỨ KHÔNG PHẢI `body` — bẫy ĐỘ ƯU TIÊN, không phải thứ tự file.
     -------------------------------------------------------------------------
     Bản đầu viết `body { background: #fff }` mà nền in ra vẫn xám. Lý do:
     index.html là `<body class="app app-shell">`, còn shared.css có
     `.app { background: var(--color-paper) }`. Class (0-1-0) thắng element
     (0-0-1) BẤT KỂ print.css nạp sau — nên dòng cũ chưa bao giờ có tác dụng.

     Nền xám chỉ hiện khi người dùng bật "Đồ hoạ nền" trong hộp thoại in, nên
     nhìn bản xem trước không chắc thấy. Cách kiểm chắc chắn: đọc
     getComputedStyle ở emulateMedia(print). */
  body.app { background: #fff; }

  .doc-page {
    /* Lề thật của tờ giấy — xem chú thích ở khối @page phía trên. */
    padding: 14mm 15mm;
    /* Chặn lớp hai: tờ chứng từ tự giữ nền trắng của nó. */
    background: #fff;
    font-family: var(--font-sans);
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
  }
  /* Điều khoản sang trang mới — mẫu của khách in chúng ở mặt sau. */
  .doc-page-break { break-before: page; }

  .doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8mm;
  }
  .doc-company { font-size: 13pt; font-weight: 700; text-transform: uppercase; }
  .doc-company-inline { font-weight: 700; text-transform: uppercase; }
  .doc-logo { inline-size: 22mm; block-size: 22mm; object-fit: contain; }

  .doc-title {
    margin-block: 6mm 1mm;
    font-size: 15pt;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
  }
  .doc-subtitle { text-align: center; font-size: 10.5pt; }

  .doc-section {
    margin-block: 4mm 1.5mm;
    padding-block-end: 1mm;
    border-block-end: 0.3mm solid #000;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
  }

  .doc-line { margin-block: 0.8mm; }
  .doc-label { font-weight: 700; }

  /* Hai cột cho những cặp nhãn ngắn (Họ tên · Giới tính). Tự xuống một cột khi
     một trong hai ô rỗng — vì ô rỗng không được vẽ ra. */
  .doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8mm;
  }

  .doc-consent { margin-block-start: 5mm; font-style: italic; }

  .doc-sign {
    margin-block-start: 8mm;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
    text-align: center;
    /* Không tách khối chữ ký sang trang khác: một chữ ký đứng một mình ở đầu
       trang sau là tờ giấy trông như thiếu nội dung. */
    break-inside: avoid;
  }
  .doc-sign-title { font-weight: 700; }
  /* Chừa chỗ ký tay. 18mm là đủ cho một chữ ký bình thường. */
  .doc-sign-name { margin-block-start: 18mm; }

  .doc-footnote { margin-block-start: 5mm; font-size: 9pt; }

  /* Điều khoản: giữ nguyên xuống dòng người dùng đã gõ trong ô soạn thảo. */
  .doc-terms {
    white-space: pre-wrap;
    font-size: 9.5pt;
    line-height: 1.5;
    text-align: justify;
  }

  /* ── TỜ QR ĐIỂM DANH DÁN TƯỜNG ────────────────────────────────────────
     Khác hẳn hợp đồng: tờ này không ai ĐỌC, người ta chỉ NHÌN từ xa 1–2m rồi
     giơ điện thoại lên. Nên mọi thứ đều to, căn giữa, và không có chữ thừa. */
  .qr-sheet {
    /* Chiếm trọn chiều cao trang để khối nội dung nằm giữa tờ giấy, không dồn
       lên đầu. 297mm là chiều cao A4; trừ đi lề trên dưới của .doc-page. */
    min-block-size: calc(297mm - 28mm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10mm;
    text-align: center;
  }
  /* Mỗi chi nhánh một tờ riêng. Tờ đầu KHÔNG ngắt trang (không thì trang 1 trống). */
  .qr-sheet + .qr-sheet { break-before: page; }

  .qr-sheet-logo { inline-size: 55mm; block-size: 40mm; object-fit: contain; }
  /* Chưa tải logo thì in TÊN phòng tập — tờ giấy không có gì nhận dạng thì
     dán ở đâu cũng giống nhau. */
  .qr-sheet-name { font-size: 24pt; font-weight: 700; }
  .qr-sheet-branch { font-size: 14pt; color: #000; }

  /* 110mm: quét được từ ~2m bằng camera điện thoại phổ thông. Nhỏ hơn thì
     khách phải bước sát tường, mà lúc đó hàng người sẽ dồn lại ở cửa. */
  .qr-sheet-code { inline-size: 110mm; block-size: 110mm; }

  .qr-sheet-caption {
    font-size: 20pt;
    font-weight: 700;
    line-height: 1.3;
    max-inline-size: 150mm;
  }
  /* Hai liên phiếu thu trên một trang, ngăn bằng đường kẻ đứt để cắt. */
  .doc-copy { break-inside: avoid; }
  .doc-cut {
    margin-block: 6mm;
    border-block-start: 0.3mm dashed #000;
  }
}