/* assets/css/main.css */
/* ============================================================
   ROUND CHECKBOX
   Native-style checkbox appearance, but round.
   ============================================================ */
.round-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  border: 1.5px solid #CBD5E1;
  border-radius: 9999px;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.round-checkbox:hover {
  border-color: #94A3B8;
}

.round-checkbox:checked {
  border-color: #1877F2;
}

.round-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.2);
}

.round-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #1877F2;
  border-width: 0 2px 2px 0;
  box-sizing: border-box;
}

.round-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small variant for academic settings toggles */
.round-checkbox-sm {
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  border-width: 1.25px;
}

.round-checkbox-sm:checked::after {
  width: 3px;
  height: 6px;
  border-width: 0 1.5px 1.5px 0;
}

/* REPORT CARD */
#report-card {
  width: 210mm;
  min-height: 297mm;
  /* Added 20px top/bottom margin so the shadow doesn't clip against the container */
  margin: 20px auto;
  background: white;
  padding: 15mm;
  /* Changed X/Y offsets from 20px to 0 so the shadow is perfectly even on all 4 sides */
  box-shadow:
    0 0 40px rgba(15, 23, 42, 0.12),
    0 0 10px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  border-radius: 2px;
}

@media print {
  @page {
    size: A4 portrait;
    /* Removed 8mm external margin to prevent the paper dimension from exceeding A4 */
    margin: 0;
  }

  /* Force grey fills to actually print */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Lock viewport dimensions — this is what prevents the phantom page 2 */
  html,
  body {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Completely collapse wrapper elements that hold invisible space */
  .print-collapse {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Hide everything, reveal only the report card */
  body * {
    visibility: hidden !important;
  }

  #report-card,
  #report-card * {
    visibility: visible !important;
  }

  #report-card {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important; /* Allow exact height snapping */
    max-height: 100% !important;
    margin: 0 !important;
    padding: 8mm !important; /* The 8mm margin moved here as internal padding */
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    font-size: 11.5px;
    line-height: 1.3;
  }

  /* Headings */
  #report-card h1 { font-size: 19px; margin: 0 0 5px 0; line-height: 1.15; }
  #report-card h2 { font-size: 15px; margin: 0 0 5px 0; }
  #report-card p  { font-size: 11px; margin: 0 0 3px 0; }

  table {
    width: 100% !important;
    border-collapse: collapse;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Bigger cell text — was 8.5px */
  #report-card th,
  #report-card td {
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.25;
  }

  /* Grey section headers stay grey */
  #report-card .bg-gray-200 {
    background-color: #e5e7eb !important;
  }
  #report-card .bg-gray-100,
  #report-card .bg-gray-50 {
    background-color: #f3f4f6 !important;
  }

  .no-print {
    display: none !important;
  }
}