/* =============================================================================
   Clinical / data entry form styling (forms.css)
   Paper-form look for the consultation screen — specs.md §8
   ========================================================================== */
.clinical-card { max-width: 1120px; margin: 0 auto; }

/* Brand block on the form: logo + hospital name + address */
.form-brand {
  border-bottom: 2px solid var(--lseh-primary, #2E86AB);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.form-brand-logo { height: 54px; object-fit: contain; }
.form-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #2E86AB;
  margin-top: 4px;
}
.form-brand-addr { font-size: 13px; color: #6c757d; }

/* Section headings inside the form */
.section-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #2E86AB;
  border-bottom: 1px dashed #cfdde6;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.clinical-card textarea { resize: vertical; }
.clinical-card .form-label { color: var(--text-color, #405264); font-size: 0.95rem; font-weight: 500; }
.clinical-card small, .clinical-card .text-muted.small { font-size: 0.88rem; }

/* ---------------- Vision / refraction table ---------------- */
.vision-table { font-size: 14px; border-color: #dee2e6; }
.vision-table thead th {
  background: #eaf4f9;
  color: #24698a;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
}
.vision-table thead th.od-col { background: #e3f0f8; }
.vision-table thead th.os-col { background: #e2f5f1; color: #157f74; }
.vision-table tbody th { background: #fbfcfd; font-weight: 600; white-space: nowrap; }
.vision-table td { min-width: 130px; }
.vision-table td .form-control { max-width: 190px; }
.vision-table .group-row th {
  background: #f1f5f9 !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a5c6d;
  text-align: left;
}
/* Auto R / Distance / Near* sub-column grid: compact cells so the wider
   table still fits the form card and a single A4 print page */
.vision-table td.sub { min-width: 58px; padding: 3px 4px; }
.vision-table td.sub .form-control { max-width: none; width: 100%; font-size: 12px; padding: 1px 4px; }
/* REFRACTION / OPTICAL section below IOP: full-width bold centred heading
   with a top border (separates it from IOP above), then the SPH / CYL /
   Axis / V-A column header row (first cell blank, no OD/OS labels here). */
.vision-table .refraction-heading th {
  text-align: center;
  font-weight: 700;
  border-top: 2px solid #2E86AB;
}
.vision-table .sub-header th {
  background: #eaf4f9;
  color: #24698a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
}
.vision-table .sub-header th.od-col { background: #e3f0f8; }
.vision-table .sub-header th.os-col { background: #e2f5f1; color: #157f74; }
/* subtle vertical divider between the right-eye and left-eye sub-groups */
.vision-table .sub-header th:nth-of-type(5),
.vision-table td.sub:nth-of-type(4) { border-right: 2px solid #9dbdd4; }

/* ---------------- History checkboxes ---------------- */
.hx-checks .form-check-inline { margin-right: 14px; }
.hx-checks .form-check-input:checked { background-color: #2E86AB; border-color: #2E86AB; }

/* ---------------- Eye examination boxes ---------------- */
.exam-row .exam-box {
  background: #f8fafc;
  border: 1px solid #e9eef2;
  border-radius: 8px;
  padding: 10px;
  height: 100%;
}
.exam-box-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #2E86AB;
  margin-bottom: 6px;
}

/* ---------------- Disease group grid (18 checkboxes) ---------------- */
.disease-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e9eef2;
  border-radius: 8px;
  padding: 12px;
}
.disease-check {
  background: #fff;
  border: 1px solid #e3e8ec;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 0;
  font-size: 13px;
  transition: border-color .2s ease, background .2s ease;
}
.disease-check .form-check-input { margin-top: .15em; }
.disease-check:has(.form-check-input:checked) {
  border-color: #2E86AB;
  background: #eef7fb;
}
.disease-check:has(.form-check-input:checked) .form-check-label { font-weight: 600; color: #24698a; }

/* ---------------- Prognosis radios ---------------- */
.prognosis-radios .form-check-inline {
  border: 1px solid #dde3e8;
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 6px;
}
.prognosis-radios .form-check-input:checked { background-color: #2E86AB; border-color: #2E86AB; }

/* ---------------- Prescription list ---------------- */
.rx-table { font-size: 13px; }
.rx-table thead th { font-size: 11px; text-transform: uppercase; color: #5a6b7b; }
.rx-table .rx-remove {
  border: 0;
  background: #fdecee;
  color: #DC3545;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rx-table .rx-remove:hover { background: #fadadd; }
#rxEmpty i { color: #2E86AB; }

/* =============================================================================
   Checkbox size (FIX 4)
   Bootstrap's .form-check-input renders at ~1em (~12-14px), which is too small
   to see and tick comfortably on the clinical form. Checkboxes only - radio
   buttons (type="radio") keep the Bootstrap size, no other form control is
   touched here.
   ========================================================================== */
.form-check-input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: .2rem;
  border-width: 2px;
}
.form-check-label {
  font-size: 14px;
  padding-left: 4px;
}
/* For the operation plan section specifically, make it even more prominent */
#needs_operation.form-check-input {
  width: 22px;
  height: 22px;
}