body {
      font-family: 'Cairo', 'Tajawal', sans-serif;
      background-color: #f1f5f9;
      color: #0f172a;
    }

    /* Official Paper Form Styling & Table Borders */
    .official-sheet {
      background: #ffffff;
      box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.12);
    }

    .form-table {
      width: 100%;
      border-collapse: collapse;
      border: 1.5px solid #000000;
    }

    .form-table th,
    .form-table td {
      border: 1px solid #000000;
      padding: 4px 8px;
      vertical-align: middle;
    }

    .bg-official-gray {
      background-color: #c4c4c4;
    }

    .bg-official-darkgray {
      background-color: #a8a8a8;
    }

    /* Dotted input lines matching the paper form */
    .dotted-input {
      border: none;
      border-bottom: 1.5px dotted #334155;
      background: transparent;
      padding: 1px 6px;
      outline: none;
      transition: all 0.2s ease;
      font-weight: 600;
      color: #0f172a;
    }

    .dotted-input:focus {
      border-bottom: 2px solid #b91c1c;
      background-color: rgba(254, 226, 226, 0.25);
    }

    /* Clean box inputs inside table cells */
    .cell-input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      padding: 2px 6px;
      font-weight: 600;
      color: #0f172a;
      transition: background-color 0.2s;
    }

    .cell-input:focus {
      background-color: rgba(254, 242, 242, 0.7);
      border-radius: 4px;
    }

    /* Interactive Yes/No Radio Pills inside Table Cells */
    .yn-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 28px;
      cursor: pointer;
      user-select: none;
      font-weight: 700;
      transition: all 0.15s ease;
    }

    .yn-btn:hover {
      background-color: rgba(0, 0, 0, 0.06);
    }

    .yn-btn.selected-yes {
      background-color: #dcfce7;
      color: #166534;
      box-shadow: inset 0 0 0 2px #16a34a;
    }

    .yn-btn.selected-no {
      background-color: #fee2e2;
      color: #991b1b;
      box-shadow: inset 0 0 0 2px #dc2626;
    }

    /* Official Print Mode overrides */
    body.official-print-mode .yn-btn.selected-yes,
    body.official-print-mode .yn-btn.selected-no {
      background-color: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
    }

    body.official-print-mode .dotted-input,
    body.official-print-mode .cell-input {
      background: transparent !important;
    }

    /* Custom Checkbox matching official square box */
    .official-checkbox {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border: 1.5px solid #000;
      border-radius: 2px;
      display: inline-grid;
      place-content: center;
      cursor: pointer;
      background-color: #fff;
      flex-shrink: 0;
    }

    .official-checkbox::before {
      content: "✓";
      font-size: 12px;
      font-weight: 900;
      color: #b91c1c;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
    }

    .official-checkbox:checked::before {
      transform: scale(1);
    }

    /* Signature Canvas */
    .sig-canvas {
      touch-action: none;
      cursor: crosshair;
    }

    /* Print Styles — fitted to exactly ONE A4 page */
    @media print {
      @page {
        size: A4 portrait;
        margin: 4mm;
      }
      body {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        /* Kill min-h-screen / pb-12: they force a phantom second page in print */
        min-height: 0 !important;
        height: auto !important;
      }
      html {
        min-height: 0 !important;
        height: auto !important;
      }
      .no-print {
        display: none !important;
      }
      /* Remove the page wrapper's screen spacing */
      main {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
      }
      .official-sheet {
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
      }
      /* Fixed-height A4 page box (297mm - 8mm margins = 289mm usable).
         Flex column so the questionnaire table can stretch to fill the
         page: the browser distributes the extra table height across rows. */
      #bloodDonationForm {
        height: 285mm;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      #questionnaireTable {
        flex: 1 1 auto;
        min-height: 0; /* allow shrinking instead of pushing the page to 2 pages */
        overflow: hidden; /* if it must shrink, clip here rather than overlap below */
      }
      /* Section gaps sized to spread the form across the full page height */
      .official-sheet > * {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
      }
      /* Uniform page-filling type scale: overrides Tailwind text-xs / sm:text-sm */
      .official-sheet,
      .official-sheet * {
        font-size: 11px !important;
        line-height: 1.2 !important;
      }
      .official-sheet h1 {
        font-size: 20px !important;
      }
      .official-sheet h2 {
        font-size: 14px !important;
      }
      .official-sheet p {
        font-size: 12px !important;
      }
      .form-table {
        page-break-inside: auto;
      }
      .form-table tr {
        page-break-inside: avoid;
      }
      .form-table th,
      .form-table td {
        padding: 2px 6px !important;
      }
      /* Yes/No cells: thin but readable rows */
      .yn-btn {
        min-height: 14px !important;
        padding: 1px 0 !important;
      }
      /* Form controls at print scale */
      .dotted-input,
      .cell-input {
        padding: 1px 6px !important;
      }
      .official-checkbox {
        width: 13px !important;
        height: 13px !important;
      }
      .official-checkbox::before {
        font-size: 9px;
      }
      .official-sheet input[type="radio"],
      .official-sheet input[type="checkbox"] {
        width: 13px !important;
        height: 13px !important;
      }
      /* Full-size top header (title + logo) */
      .official-sheet svg {
        width: 130px !important;
        height: auto !important;
      }
      #barcodeVisual {
        height: 22px !important;
        margin: 1px 0 !important;
      }
      /* Full-size consent + donor signature row */
      #donorSigCanvas {
        height: 36px !important;
      }
      .official-sheet .h-7 {
        height: 26px !important;
      }
      .bg-official-gray {
        background-color: #c4c4c4 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .bg-official-darkgray {
        background-color: #a8a8a8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .yn-btn.selected-yes::after {
        content: " (✓)";
        font-weight: 900;
      }
      .yn-btn.selected-no::after {
        content: " (✓)";
        font-weight: 900;
      }
    }