.a4-pager {
  width: 210mm;
  min-height: 297mm;
  margin: 0px auto; /* Center the page on screen */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* Include padding and border in the width/height */
  padding: 20mm; /* Match @page margin or adjust for content */
}

@media print {
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, fangsong, "宋体", sans-serif;
  }

  @page {
    size: A4;
    margin: 20mm;
  }

  .a4-pager {
    width: auto;
    min-height: auto;
    margin: 0;
    box-shadow: none;
    padding: 10mm; /* @page margins handle this */
  }

  input[type="checkbox"] {
    /* Ensure no background fill */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent !important; /* Important to override Tailwind defaults */
    border: 1px solid #000 !important; /* Black border for visibility */
    width: 16px !important; /* Adjust size as needed */
    height: 16px !important; /* Adjust size as needed */
    flex-shrink: 0; /* Prevent shrinking in flex containers */
  }

  input[type="checkbox"]:checked {
    /* Show a checkmark using a pseudo-element or background image */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Optional: If you use a custom checkmark icon, ensure it's black for print */
  input[type="checkbox"]:checked + label::before,
  input[type="checkbox"]:checked ~ .custom-checkmark {
    background-color: transparent !important;
    color: #000 !important; /* Ensure checkmark color is black */
  }

  input[type="checkbox"].print\:checkmark-only {
    /* Base styles for all checkboxes when using this utility in print */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent !important;
    border-width: 0 !important; /* Ensure no border */
    outline: none !important; /* Remove any outline */
    box-shadow: none !important; /* Remove any box shadow */
    width: 16px !important; /* Set a consistent size for the checkmark */
    height: 16px !important; /* Set a consistent size for the checkmark */
    flex-shrink: 0;
  }

  input[type="checkbox"].print\:checkmark-only:checked {
    /* Display the checkmark when checked */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}