/* ============================================================
   TENDI ENROLLMENT REQUIREMENTS (card "Tendi resell" #91 · §7B)
   ------------------------------------------------------------
   The visual half of "it must be obvious what is required, and the answer differs for a
   waiting-list child versus an enrolled one".

   Everything here is driven by ONE source of truth, application/helpers/enrollment_helper.php.
   The form stamps `data-enroll-level="required|optional|na"` on each field group from that
   matrix; this file only decides how each level LOOKS. Nothing in here encodes which field is
   required, on purpose: a rule that lives in a stylesheet is a rule nobody can enforce on the
   server.

   Why a separate file rather than more tendi-skin.css: the skin is the shared design system and
   is owned by the reskin lead. This is one feature's chrome (level markers, tab counters, the
   save-blocked summary) and is scoped tightly enough to be inert on every page that does not
   render an enrollment form.

   Scoping: every rule sits under `.tendi-skin`, which covers BOTH surfaces the child form shows
   up on, the standalone `.tendi-skin.tnd-form-page` add/edit fragment and the portalled
   `.tendi-skin .tnd-drawer` side pane. Loads AFTER tendi-skin.css so the few overrides here win.
   Tokens come from tendi-tokens.css; no hardcoded hex.
   ============================================================ */

/* ------------------------------------------------------------------
   1. LEVELS
   `na` = not applicable to this enrollment status. Not rendered, not validated, not written.
   This is the rule that used to be an accident: the waitlist JS hid the Class field and jQuery
   Validate's default `ignore: ":hidden"` quietly skipped it, so "hidden" and "not required"
   were the same thing by coincidence. They are separate now, and this is the ONLY selector that
   hides a field for a business reason.
   `!important` because several of these groups also carry legacy inline/utility display rules
   (`.d-none`, `style="display:none"`) that the form's own JS still toggles for other reasons.
   ------------------------------------------------------------------ */
.tendi-skin [data-enroll-level="na"] { display: none !important; }

/* The required marker. `.astric` already exists in the markup and in tendi-skin.css; the form's
   JS now owns WHICH labels carry one, so an astric it did not put there must not linger. */
.tendi-skin [data-enroll-level="optional"] > label .astric,
.tendi-skin [data-enroll-level="optional"] > .control-label .astric,
.tendi-skin [data-enroll-level="na"] .astric { display: none !important; }

/* A required field the user has left empty, AFTER they tried to save. Quiet until then: nagging
   someone about a field they have not reached yet is how a form teaches people to ignore red.
   `.tnd-enroll-missing` lands on the field's own group whether the requirement came from the
   matrix or from one of the form's own rules, so both look the same to the person filling it in. */
.tendi-skin .tnd-enroll-armed .tnd-enroll-missing .form-control,
.tendi-skin .tnd-enroll-armed .tnd-enroll-missing .tnd-select-trigger {
  border-color: var(--critical);
  background: var(--critical-tint);
}
.tendi-skin .tnd-enroll-armed .tnd-enroll-missing .form-control:focus,
.tendi-skin .tnd-enroll-armed .tnd-enroll-missing .tnd-select-trigger:focus {
  background: var(--paper-2);
  box-shadow: 0 0 0 3px rgba(217, 69, 56, 0.16);
}

/* ------------------------------------------------------------------
   2. THE STATUS HINT under the enroll/waiting-list toggle
   One sentence, generated from the matrix, saying what this status does and does not need. It is
   the answer to "why did the Class field just disappear?", given at the moment it disappears.
   ------------------------------------------------------------------ */
.tendi-skin .tnd-enroll-hint {
  display: block;
  margin: 8px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary-tint);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
}
.tendi-skin .tnd-enroll-hint strong { font-weight: 700; color: var(--ink); }
/* read-only pane: the hint is guidance for someone filling the form in, not a record field */
.tendi-skin .tnd-pane.is-readonly .tnd-enroll-hint { display: none; }

/* ------------------------------------------------------------------
   3. TAB COUNTERS
   Each tab in the side pane carries what is waiting behind it:
     .tnd-tab-req  how many REQUIRED fields on that tab are still empty (critical, and it grows
                   louder once a save has been attempted)
     .tnd-tab-opt  how many OPTIONAL fields are still empty (muted: information, not a demand)
   Numbers only, no glyphs. Each carries a title + aria-label spelling out what it counts, so the
   number is never ambiguous to a screen reader or to a hovering mouse.
   ------------------------------------------------------------------ */
.tendi-skin .tnd-tab-req,
.tendi-skin .tnd-tab-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: 1px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* before a save attempt: present, readable, not shouting */
.tendi-skin .tnd-tab-req {
  background: var(--critical-tint);
  color: var(--critical);
  border: 1px solid rgba(217, 69, 56, 0.28);
}
/* after a failed save: the same badge, now solid, so the eye lands on it without a new element */
.tendi-skin .tnd-enroll-armed .tnd-tab-req {
  background: var(--critical);
  color: #fff;
  border-color: var(--critical);
}
.tendi-skin .tnd-tab-opt {
  background: transparent;
  color: var(--ink-4);
  border: 1px solid var(--paper-edge-strong);
  font-weight: 600;
}
/* an active tab's own counters must not out-shout the tab label itself */
.tendi-skin .tnd-tab.is-active .tnd-tab-opt { color: var(--ink-3); }

/* ------------------------------------------------------------------
   4. THE SAVE-BLOCKED SUMMARY
   A single line under the pane head naming every tab that is holding the save up ("2 required on
   Details, 1 on Parents"). Sticky, because the pane body scrolls and the whole point is that it
   stays visible while the user walks the tabs fixing things.
   ------------------------------------------------------------------ */
.tendi-skin .tnd-enroll-summary {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid var(--critical);
  border-radius: var(--radius-md);
  background: var(--critical-tint);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--critical);
  font-weight: 600;
}
.tendi-skin .tnd-enroll-summary[hidden] { display: none; }
.tendi-skin .tnd-enroll-summary-ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.tendi-skin .tnd-enroll-summary-ico svg { width: 16px; height: 16px; display: block; }
.tendi-skin .tnd-enroll-summary-text { min-width: 0; }
/* jumping between the offending tabs straight from the summary */
.tendi-skin .tnd-enroll-jump {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tendi-skin .tnd-enroll-jump:hover { color: var(--ink); }
.tendi-skin .tnd-pane.is-readonly .tnd-enroll-summary { display: none !important; }

/* ------------------------------------------------------------------
   5. THE DRAWER HEAD CHIP
   Sits immediately left of Save and says what is still outstanding, so the count is visible from
   the one place the user is looking when they decide to save. Fixed head = always on screen,
   whatever tab is open and however far the body has scrolled.
   ------------------------------------------------------------------ */
.tendi-skin .tnd-enroll-outstanding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  margin-right: 2px;
  border: 1px solid rgba(217, 69, 56, 0.30);
  border-radius: var(--radius-full);
  background: var(--critical-tint);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--critical);
  white-space: nowrap;
}
.tendi-skin .tnd-enroll-outstanding[hidden] { display: none; }
.tendi-skin .tnd-enroll-outstanding svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* everything-filled state: the same chip, in the "nothing owing" voice */
.tendi-skin .tnd-enroll-outstanding.is-clear {
  border-color: rgba(31, 122, 77, 0.28);
  background: var(--ok-tint);
  color: var(--ok);
}
/* the head chip belongs to editing; the read-only pane has no Save to qualify */
.tendi-skin .tnd-pane.is-readonly .tnd-enroll-outstanding { display: none !important; }

/* narrow pane / phone: the head is tight enough without a chip competing with Save */
@media (max-width: 560px) {
  .tendi-skin .tnd-enroll-outstanding { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Custom dropdowns inside the lifecycle modals (Enroll, Remove from waiting
   list, Enrollment history).

   Those modals deliberately live OUTSIDE `.tendi-skin`, because as descendants
   they picked up the skin's own styling and the list page collapses what
   follows its container (see the note in children_manage.php). The whole
   TndSelect stylesheet is scoped `.tendi-skin ...`, so out there the enhanced
   dropdown loses the one rule that matters most: its menu is never collapsed.
   Every enhanced select in those modals therefore rendered with its full option
   list permanently expanded, reported as `display: block` while
   `aria-expanded="false"`.

   Pre-existing for the Class and Reason pickers; the Tuition type picker added
   for §7B inherited it. Mirrored here rather than widening the rule in
   tendi-skin.css, both to keep the blast radius at these modals and because
   that file is being edited by other work right now.
   --------------------------------------------------------------------------- */
.tnd-modal .tnd-select { position: relative; width: 100%; }
.tnd-modal .tnd-select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  display: none; flex-direction: column; max-height: 320px;
  background: var(--paper-2, #fff); border: 1px solid var(--paper-edge, #e6e3f2);
  border-radius: 12px; box-shadow: var(--shadow-overlay-sm, 0 8px 24px rgba(24, 18, 48, .14));
  padding: 6px; overflow: auto;
}
.tnd-modal .tnd-select.is-open .tnd-select-menu { display: flex; }
.tnd-modal .tnd-select.is-up .tnd-select-menu { top: auto; bottom: calc(100% + 6px); }
.tnd-modal .tnd-option.is-placeholder { display: none !important; }

/* ---------------------------------------------------------------------------
   Status pill states for the lifecycle (§7B).

   The pill used to render `children.status`, so every row on the Waiting list
   view read "Active": true of the record, and useless to someone who can
   already see which list they are looking at. It says where the child is now.

   Base `.tnd-st` and its active/inactive/trash variants live in
   tendi-children.css; these are the additive states, kept here so that file
   does not have to change.
   --------------------------------------------------------------------------- */
.tendi-skin .tnd-st.is-waitlist { color: var(--primary); background: var(--primary-tint); }
.tendi-skin .tnd-st.is-future   { color: var(--info);    background: var(--info-tint); }
.tendi-skin .tnd-st.is-pending  { color: var(--info);    background: var(--info-tint); }
/* Left and Past are both "no longer with us": quiet, not alarming. Red is for
   trashed, which is a thing somebody did, not a date passing. */
.tendi-skin .tnd-st.is-ended    { color: var(--ink-3);   background: var(--cream-2); }
.tendi-skin .tnd-st.is-past     { color: var(--ink-3);   background: var(--cream-2); }