/* ==========================================================================
   "No middle name" — one field component, every form
   --------------------------------------------------------------------------
   The control used to be built three different ways across the app: an append
   folded into the input (teacher_register), a checkbox stacked on its own line
   underneath (register, students_edit), and an ad-hoc inline-styled label
   (students_create, students_enroll). They drifted on height, radius, colour
   and font size, and the stacked version pushed the rest of the name row down.

   This is the single shape: the text field and the checkbox are one joined
   control, so the checkbox can never overflow its column or add a row of its
   own. Markup is app/Views/partials/middle_name_field.php — the reason this
   file can be this small is that the geometry is identical everywhere.

   Two surfaces
   ------------
   The public register forms sit on a deep blue card; the admin forms sit on
   white. The component therefore reads its colours from custom properties with
   a light default, and the blue pages override them once (below) rather than
   re-declaring every rule. Without that split the checkbox segment would be
   white-on-white on the admin forms.
   ========================================================================== */

.mnf {
  --mnf-surface: #ffffff;          /* the text field        */
  --mnf-append-bg: #f1f5f9;        /* the checkbox segment  */
  --mnf-append-fg: #475569;
  --mnf-append-border: #cbd5e1;
  --mnf-append-hover: #e2e8f0;
  --mnf-radius: 8px;
  --mnf-font: 0.62rem;
  --mnf-box: 12px;

  display: flex;
  align-items: stretch;
  width: 100%;
}

.mnf__field {
  /* flex, not width:100% — inside a flex row that would fight the append for
     the row and let the append be squeezed out. min-width:0 stops a long value
     from forcing the group wider than its column. */
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* The checkbox segment. Kept as a <label> so the whole segment is a click
   target, not just the 13px box. */
.mnf__append {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding: 0 0.5rem;
  font-size: var(--mnf-font);
  /* 400, not 500. Times New Roman has only a regular and a bold cut, so an
     intermediate weight is not "medium" - the browser fakes it by smearing
     the bold one and the result is muddy. The same binary ladder
     public/css/typography.css declares at the root applies here. */
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--mnf-append-fg);
  background: var(--mnf-append-bg);
  border: 1px solid var(--mnf-append-border);
  border-left: 0;
  border-top-right-radius: var(--mnf-radius);
  border-bottom-right-radius: var(--mnf-radius);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mnf__append:hover {
  background: var(--mnf-append-hover);
  color: #1e293b;
}

/* The tick box itself. Bootstrap's .form-check-input carries a 1.475em margin
   and a fixed size that fights an inline flex parent, so it is sized here.
   --mnf-box is smaller than a default checkbox on purpose: at 14px the box
   read louder than the 0.62rem label beside it and pulled the eye to the
   opt-out rather than to the field it modifies. */
.mnf__append input[type='checkbox'] {
  width: var(--mnf-box);
  height: var(--mnf-box);
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--color-primary, #1e40af);
}

/* Ticked: the segment stops reading as an inert grey chip and matches the field
   it disables, so the state is visible on the control itself and not only in
   the (now dimmed) input. */
.mnf__append:has(input:checked) {
  background: var(--mnf-append-hover);
  color: #1e293b;
}

/* Toggled by toggleNoMiddleName(), which dims the field rather than disabling
   it outright. The border has to go pale too or the pair stops reading as one
   control. */
.mnf__field:disabled {
  background: #f8fafc;
}

/* --- Deep-blue surfaces (the public register forms) -----------------------
   .register-card is the blue panel on both /register and /teacher/register.
   Scoped by class rather than by page so a third blue form gets the treatment
   by reusing the panel, not by editing this file. */

.register-card .mnf {
  --mnf-append-bg: rgba(255, 255, 255, 0.10);
  --mnf-append-fg: rgba(255, 255, 255, 0.85);
  --mnf-append-border: rgba(255, 255, 255, 0.28);
  --mnf-append-hover: rgba(255, 255, 255, 0.18);
}

.register-card .mnf__append:hover,
.register-card .mnf__append:has(input:checked) {
  color: #ffffff;
}

/* The field is white on this panel, so "disabled" has to be a paler white —
   the light-surface #f8fafc would read as a grey box punched into the blue. */
.register-card .mnf__field:disabled {
  background: rgba(255, 255, 255, 0.72);
}

/* --- Narrow screens ------------------------------------------------------
   Below this the segment and its label stop fitting beside the field, and a
   squeezed input is worse than a taller one: the two stack, with the segment
   keeping its left edge so it still reads as attached. */

@media (max-width: 575.98px) {
  .mnf {
    flex-wrap: wrap;
  }

  .mnf__field {
    flex: 1 1 100%;
    border-radius: var(--mnf-radius) !important;
  }

  .mnf__append {
    flex: 1 1 100%;
    justify-content: flex-start;
    border-left: 1px solid var(--mnf-append-border);
    border-top: 0;
    border-radius: 0 0 var(--mnf-radius) var(--mnf-radius);
    padding: 0.4rem 0.65rem;
  }
}