/* ============================================================
   TENDI CHILDREN LIST: the command bar reskin
   ------------------------------------------------------------
   Port of reskin-harness/children-A-command.html. Every value here is the value in that
   mockup; the mockup inlines a verbatim copy of tendi-tokens.css, so the two render identically
   as long as nothing below hardcodes a colour. ZERO hex in this file: everything is var(--token).

   SCOPE: `.tendi-skin.tnd-children-page`. The page markup opts in with that class, so this file
   is a no-op everywhere else and is safe to load globally from head.php.

   LOADED AFTER tendi-skin.css so the page-scoped rules win over the generic list rules
   (same specificity would otherwise be decided by source order).
   ============================================================ */

/* ---------- 0. neutralise the generic list chrome this page replaces ---------- */
/* The shared list page renders a DataTables search pill in .tnd-dt-toolbar2. This page draws its
   own search inside the command bar and drives .search() directly, so the stock one is dropped
   from the dom string rather than hidden; this rule only kills the empty wrapper's margin. */
.tendi-skin.tnd-children-page .tnd-dt-toolbar2 { display: none; }
.tendi-skin.tnd-children-page .tnd-dt-toolbar { margin: 0; }

/* ---------- 1. page head ---------- */
.tendi-skin.tnd-children-page .tnd-page-head { align-items: center; margin-bottom: 14px; }
.tendi-skin.tnd-children-page .tnd-page-head .tnd-head-ico { width: 44px; height: 44px; }
.tendi-skin.tnd-children-page .tnd-page-head--icon .tnd-dt-title { font-size: 27px; margin-bottom: 4px; }
.tendi-skin.tnd-children-page .tnd-page-head--icon .tnd-dt-subtitle { font-size: 13px; font-variant-numeric: tabular-nums; }
.tendi-skin.tnd-children-page .tnd-dt-subtitle b { color: var(--ink-2); font-weight: 600; }
.tendi-skin.tnd-children-page .tnd-dt-subtitle .sep { color: var(--ink-5); margin: 0 7px; }
.tendi-skin.tnd-children-page .tnd-page-head--icon .btnContainer { padding-top: 0; align-items: center; }

/* Buttons. `.tnd-btn` exists in tendi-skin.css only scoped to other components, so this page
   defines its own copy; the values are the mockup's. */
.tendi-skin.tnd-children-page .tnd-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
  font-weight: 600; font-size: 13px; line-height: 1; padding: 0 15px; height: 38px;
  border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); color: var(--ink-2); cursor: pointer; white-space: nowrap;
  text-decoration: none; box-shadow: none; text-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tendi-skin.tnd-children-page .tnd-btn svg { width: 15px; height: 15px; display: block; color: var(--ink-4); flex: none; }
.tendi-skin.tnd-children-page .tnd-btn:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin.tnd-children-page .tnd-btn:hover svg { color: var(--ink-3); }
.tendi-skin.tnd-children-page .tnd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin.tnd-children-page .tnd-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--paper-2); }
.tendi-skin.tnd-children-page .tnd-btn--primary svg { color: var(--paper-2); }
.tendi-skin.tnd-children-page .tnd-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--paper-2); }

/* ---------- 2. the command bar ---------- */
.tendi-skin .tnd-chl-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 9px;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  padding: 7px 9px; margin-bottom: 10px;
}
.tendi-skin .tnd-chl-div { width: 1px; height: 24px; background: var(--paper-edge); flex: none; margin: 0 2px; }

/* view switcher */
.tendi-skin .tnd-viewsw { position: relative; flex: none; }
.tendi-skin .tnd-viewsw-trg {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: var(--radius-md); border: 1px solid transparent; background: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em;
  color: var(--ink); cursor: pointer; transition: 0.14s; max-width: 260px;
}
.tendi-skin .tnd-viewsw-trg .vname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-viewsw-trg:hover { background: var(--cream-2); }
.tendi-skin .tnd-viewsw-trg .car { width: 14px; height: 14px; color: var(--ink-4); transition: transform 0.15s; flex: none; }
.tendi-skin .tnd-viewsw.is-open .tnd-viewsw-trg { background: var(--cream-2); }
.tendi-skin .tnd-viewsw.is-open .tnd-viewsw-trg .car { transform: rotate(180deg); }
.tendi-skin .tnd-viewsw-trg .cnt {
  font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums; background: var(--cream-2); padding: 2px 7px;
  border-radius: var(--radius-full); flex: none;
}
.tendi-skin .tnd-viewsw.is-open .tnd-viewsw-trg .cnt { background: var(--paper-2); }
.tendi-skin .tnd-viewsw-trg > svg:first-child { width: 15px; height: 15px; color: var(--primary); flex: none; }

/* search: the hero */
.tendi-skin .tnd-chl-search { position: relative; flex: 1; min-width: 200px; }
.tendi-skin .tnd-chl-search > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-4); pointer-events: none;
}
.tendi-skin .tnd-chl-search input {
  width: 100%; height: 36px; padding: 0 74px 0 36px; border: 1px solid transparent;
  border-radius: var(--radius-md); background: var(--cream); font: inherit; font-size: 13.5px;
  color: var(--ink); transition: 0.14s;
}
.tendi-skin .tnd-chl-search input::placeholder { color: var(--ink-4); }
.tendi-skin .tnd-chl-search input:focus {
  outline: none; background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.tendi-skin .tnd-chl-search .hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
}
.tendi-skin .tnd-chl-search kbd {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink-4);
  border: 1px solid var(--paper-edge-strong); border-radius: 5px; padding: 1px 6px;
  background: var(--paper-2); line-height: 1.5; box-shadow: none;
}
.tendi-skin .tnd-chl-search .clr {
  display: none; width: 20px; height: 20px; border: 0; background: var(--cream-3); color: var(--ink-3);
  border-radius: var(--radius-full); cursor: pointer; place-items: center; padding: 0;
}
.tendi-skin .tnd-chl-search .clr svg { width: 11px; height: 11px; }
.tendi-skin .tnd-chl-search.has-val .clr { display: grid; }
.tendi-skin .tnd-chl-search.has-val kbd { display: none; }

/* inline hot filters (Branch + Class). Named tnd-chl-sel, NOT tnd-select: the global
   tendi-dropdown.js component owns .tnd-select and would fight these rules. */
.tendi-skin .tnd-chl-sel { position: relative; flex: none; }
.tendi-skin .tnd-chl-sel .trg {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: transparent;
  font-size: 13px; color: var(--ink-2); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: 0.14s; font-family: var(--font-sans);
}
.tendi-skin .tnd-chl-sel .trg:hover { background: var(--cream-2); }
.tendi-skin .tnd-chl-sel .trg .lbl { color: var(--ink-4); font-weight: 500; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.tendi-skin .tnd-chl-sel .trg svg.lead { width: 15px; height: 15px; color: var(--ink-4); flex: none; }
.tendi-skin .tnd-chl-sel .trg .car { width: 14px; height: 14px; color: var(--ink-4); flex: none; transition: transform 0.15s; }
.tendi-skin .tnd-chl-sel.is-set .trg { background: var(--primary-tint); color: var(--primary); }
.tendi-skin .tnd-chl-sel.is-set .trg .lbl { color: var(--primary); font-weight: 600; }
.tendi-skin .tnd-chl-sel.is-set .trg svg.lead,
.tendi-skin .tnd-chl-sel.is-set .trg .car { color: var(--primary); }
.tendi-skin .tnd-chl-sel.is-open .trg { background: var(--cream-2); }
.tendi-skin .tnd-chl-sel.is-open .trg .car { transform: rotate(180deg); }

/* Filters button with a live count of what is hidden behind it */
.tendi-skin .tnd-filt-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px;
  border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong); background: var(--paper-2);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: 0.14s; flex: none;
}
.tendi-skin .tnd-filt-btn svg { width: 15px; height: 15px; color: var(--ink-4); }
.tendi-skin .tnd-filt-btn:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .tnd-filt-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-filt-btn .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--primary); color: var(--paper-2); font-size: 11px; font-weight: 700;
  display: none; place-items: center; font-variant-numeric: tabular-nums; line-height: 1;
}
.tendi-skin .tnd-filt-btn.has-n { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }
.tendi-skin .tnd-filt-btn.has-n svg { color: var(--primary); }
.tendi-skin .tnd-filt-btn.has-n .badge { display: grid; }
.tendi-skin .tnd-filt-btn.is-icon { padding: 0 10px; }

/* enrollment window segmented */
.tendi-skin .tnd-chl-seg {
  display: inline-flex; background: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md); padding: 3px; gap: 2px; flex: none;
}
.tendi-skin .tnd-chl-seg button {
  border: 0; background: transparent; color: var(--ink-3); font-weight: 600; font-size: 12.5px;
  font-family: var(--font-sans); height: 30px; padding: 0 14px; border-radius: 7px;
  cursor: pointer; transition: 0.14s; box-shadow: none;
}
.tendi-skin .tnd-chl-seg button:not(.is-active):hover { color: var(--ink); background: var(--paper-2); }
.tendi-skin .tnd-chl-seg button.is-active { background: var(--paper-2); color: var(--primary); box-shadow: var(--shadow-overlay-sm); }

/* ---------- 3. active-filter chips (only rendered when something is on) ---------- */
.tendi-skin .tnd-afbar { display: none; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; padding: 0 3px; }
.tendi-skin .tnd-afbar.is-on { display: flex; }
.tendi-skin .tnd-afchip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 11px;
  border-radius: var(--radius-full); background: var(--paper-2); border: 1px solid var(--paper-edge-strong);
  font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.tendi-skin .tnd-afchip .k { color: var(--ink-4); font-weight: 500; }
.tendi-skin .tnd-afchip button {
  width: 18px; height: 18px; border: 0; background: transparent; color: var(--ink-4);
  border-radius: var(--radius-full); cursor: pointer; display: grid; place-items: center; padding: 0; transition: 0.13s;
}
.tendi-skin .tnd-afchip button svg { width: 11px; height: 11px; }
.tendi-skin .tnd-afchip button:hover { background: var(--critical-tint); color: var(--critical); }
.tendi-skin .tnd-afclear {
  border: 0; background: transparent; color: var(--primary); font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm);
}
.tendi-skin .tnd-afclear:hover { background: var(--primary-tint); }

/* ---------- 4. filter popover ---------- */
.tendi-skin .tnd-fpop-wrap { position: relative; flex: none; }
.tendi-skin .tnd-fpop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 640px; background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay);
  z-index: 70; display: none;
}
.tendi-skin .tnd-fpop.is-open { display: block; }
.tendi-skin .tnd-fpop-body { padding: 18px 20px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.tendi-skin .tnd-fgroup { padding-bottom: 16px; }
.tendi-skin .tnd-fgroup + .tnd-fgroup { border-top: 1px solid var(--paper-edge); padding-top: 15px; }
.tendi-skin .tnd-fgroup:nth-child(2) { border-top: 0; padding-top: 0; }
.tendi-skin .tnd-fgroup h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 11px;
}
.tendi-skin .tnd-frow { display: flex; gap: 10px; margin-bottom: 10px; }
.tendi-skin .tnd-ffield { flex: 1; min-width: 0; }
.tendi-skin .tnd-ffield > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 5px; }
.tendi-skin .tnd-fhelp { font-size: 11px; color: var(--ink-5); margin: 5px 0 0; line-height: 1.45; }

/* the popover's own selects reuse the real TndSelect component; only sizing is set here */
.tendi-skin .tnd-fpop .tnd-select .tnd-select-trigger { height: 36px; font-size: 13px; }

/* toggle pills */
.tendi-skin .tnd-fpills { display: flex; flex-wrap: wrap; gap: 7px; }
.tendi-skin .tnd-fpill {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
  border-radius: var(--radius-full); border: 1px solid var(--paper-edge-strong); background: var(--paper-2);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; transition: 0.14s; white-space: nowrap;
}
.tendi-skin .tnd-fpill:hover { border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-fpill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-fpill .tick { width: 13px; height: 13px; flex: none; opacity: 0; transition: opacity 0.12s; }
.tendi-skin .tnd-fpill .n { font-size: 11px; font-weight: 700; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.tendi-skin .tnd-fpill.is-on { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-fpill.is-on .tick { opacity: 1; }
.tendi-skin .tnd-fpill.is-on .n { color: var(--primary); }

/* the date field, styled (never a bare native control) */
.tendi-skin .tnd-fdate { position: relative; }
.tendi-skin .tnd-fdate input {
  width: 100%; height: 36px; padding: 0 34px 0 11px; border: 1px solid var(--paper-edge-strong);
  border-radius: var(--radius-md); background: var(--paper-2); font: inherit; font-size: 13px; color: var(--ink-2);
}
.tendi-skin .tnd-fdate input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-fdate input::-webkit-calendar-picker-indicator {
  opacity: 0; position: absolute; right: 0; width: 34px; height: 100%; cursor: pointer;
}
.tendi-skin .tnd-fdate > svg {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-4); pointer-events: none;
}
.tendi-skin .tnd-fpop-foot {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--paper-edge);
  background: var(--cream); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.tendi-skin .tnd-fpop-foot .spacer { flex: 1; }
.tendi-skin .tnd-fpop-foot .lnk {
  border: 0; background: transparent; color: var(--ink-3); font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 9px; border-radius: var(--radius-sm);
}
.tendi-skin .tnd-fpop-foot .lnk:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .tnd-fpop-foot .lnk.save { color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }
.tendi-skin .tnd-fpop-foot .lnk.save svg { width: 13px; height: 13px; }
.tendi-skin .tnd-fpop-foot .lnk.save:hover { background: var(--primary-tint); }

/* ---------- 5. shared flyout menu (views / options / row actions) ---------- */
.tendi-skin .tnd-chl-menu {
  position: absolute; top: calc(100% + 7px); min-width: 236px; background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
  padding: 6px; z-index: 80; display: none;
}
.tendi-skin .tnd-chl-menu.r { right: 0; }
.tendi-skin .tnd-chl-menu.l { left: 0; }
/* Flex column with a gap rather than plain block: adjacent rows each paint a rounded background on
   hover / when selected, and with no gap those backgrounds butt together and read as one block.
   The wrappers the lists render into need the same gap, since they are flex ITEMS here, not the
   parents of the rows. */
.tendi-skin .tnd-chl-menu.is-open { display: flex; flex-direction: column; gap: 3px; }
.tendi-skin .tnd-chl-menu.is-open > div:not(.tnd-chl-msep):not(.tnd-chl-mhead):not(.tnd-chl-mi) {
  display: flex; flex-direction: column; gap: 3px;
}
.tendi-skin .tnd-chl-mi {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  background: transparent; border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  text-align: left; transition: 0.12s;
}
.tendi-skin .tnd-chl-mi > svg { width: 15px; height: 15px; color: var(--ink-4); flex: none; }
.tendi-skin .tnd-chl-mi .sp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tendi-skin .tnd-chl-mi .n { font-size: 11.5px; font-weight: 600; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.tendi-skin .tnd-chl-mi:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .tnd-chl-mi:hover > svg { color: var(--ink-3); }
.tendi-skin .tnd-chl-mi.is-active { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.tendi-skin .tnd-chl-mi.is-active > svg,
.tendi-skin .tnd-chl-mi.is-active .n { color: var(--primary); }
.tendi-skin .tnd-chl-mi.danger { color: var(--critical); }
.tendi-skin .tnd-chl-mi.danger > svg { color: var(--critical); }
.tendi-skin .tnd-chl-mi.danger:hover { background: var(--critical-tint); color: var(--critical); }
.tendi-skin .tnd-chl-msep { height: 1px; background: var(--paper-edge); margin: 5px 2px; }
.tendi-skin .tnd-chl-mhead {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-5); padding: 8px 10px 5px;
}
.tendi-skin .tnd-chl-mnote { font-size: 11px; color: var(--ink-5); line-height: 1.5; padding: 4px 10px 7px; margin: 0; }
.tendi-skin .tnd-chl-mnote b { color: var(--ink-3); font-weight: 600; }

/* view rows carry a star (default) and, when saved, a delete */
.tendi-skin .tnd-chl-mi.viewrow { padding-right: 6px; }
.tendi-skin .viewrow .rowacts { display: flex; align-items: center; gap: 2px; flex: none; margin-left: 4px; }
.tendi-skin .viewrow .ra {
  width: 22px; height: 22px; border: 0; background: transparent; border-radius: 6px;
  color: var(--ink-5); cursor: pointer; display: grid; place-items: center; padding: 0;
  opacity: 0; transition: 0.12s;
}
.tendi-skin .viewrow .ra svg { width: 13px; height: 13px; }
.tendi-skin .viewrow:hover .ra,
.tendi-skin .viewrow .ra:focus-visible { opacity: 1; }
.tendi-skin .viewrow .ra:hover { background: var(--cream-3); color: var(--ink-2); }
.tendi-skin .viewrow .ra.del:hover { background: var(--critical-tint); color: var(--critical); }
.tendi-skin .viewrow .ra.star.is-on { opacity: 1; color: var(--attention); }
.tendi-skin .viewrow .ra.star.is-on svg { fill: currentColor; }

/* locked columns read as locked, never as an unchecked checkbox */
.tendi-skin .colrow.is-locked { cursor: default; color: var(--ink-4); }
.tendi-skin .colrow.is-locked:hover { background: transparent; }
.tendi-skin .colrow .lockwrap { display: flex; align-items: center; gap: 6px; flex: none; }
.tendi-skin .colrow .lock { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-5); }
.tendi-skin .colrow .lockwrap svg { width: 12px; height: 12px; color: var(--ink-5); }

/* ---------- 6. table cells ---------- */
.tendi-skin.tnd-children-page .tnd-list-table tbody td { padding: 9px 11px; vertical-align: middle; }
.tendi-skin.tnd-children-page.tnd-dens-compact .tnd-list-table tbody td { padding: 5px 11px; }
.tendi-skin.tnd-children-page.tnd-dens-roomy .tnd-list-table tbody td { padding: 14px 11px; }
/* the generic list skin centres every cell; this table is left-aligned so names scan */
.tendi-skin.tnd-children-page .tnd-list-table tbody td,
.tendi-skin.tnd-children-page .tnd-list-table thead th { text-align: left; }

.tendi-skin .tnd-namecell { display: flex; align-items: center; gap: 10px; }
.tendi-skin .tnd-rowav {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-full); display: grid;
  place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  color: var(--paper-2); letter-spacing: -0.01em; overflow: hidden;
}
.tendi-skin .tnd-rowav.has-img { background: var(--cream-2); }
.tendi-skin .tnd-rowav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendi-skin .tnd-rowav.acc-plum { background: var(--plum-deep); }
.tendi-skin .tnd-rowav.acc-teal { background: var(--teal-deep); }
.tendi-skin .tnd-rowav.acc-rose { background: var(--rose-deep); }
.tendi-skin .tnd-rowav.acc-sage { background: var(--sage-deep); }
.tendi-skin .tnd-rowav.acc-sky { background: var(--sky-deep); }
.tendi-skin .tnd-rowav.acc-apricot { background: var(--apricot-deep); }
.tendi-skin .tnd-rowav.acc-lavender { background: var(--lavender-deep); }
.tendi-skin .tnd-rowav.acc-coral { background: var(--coral-deep); }
.tendi-skin .tnd-rowav.acc-mint { background: var(--mint-deep); }
.tendi-skin .tnd-rowav.acc-sun { background: var(--sun-deep); }

.tendi-skin .tnd-nm { min-width: 0; }
.tendi-skin .tnd-nm .n1 {
  font-weight: 600; color: var(--ink); font-size: 13.5px; letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 6px;
}
.tendi-skin .tnd-nm .n2 { font-size: 11.5px; color: var(--ink-5); font-weight: 500; margin-top: 1px; display: block; }
/* !important on the box properties: a global `.is-empty` rule and the legacy `.child_note` styling
   both used to reach this element and paint it as an amber chip. It carries neither class now, but
   the reset is kept so a future global rule cannot turn a 16px icon back into a block. */
.tendi-skin .tnd-noteflag {
  flex: none; display: inline-grid !important; place-items: center;
  width: 16px !important; height: 16px !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: var(--ink-5); cursor: pointer;
}
.tendi-skin .tnd-noteflag svg { width: 14px; height: 14px; }
.tendi-skin .tnd-noteflag:hover { color: var(--primary); }
.tendi-skin .tnd-noteflag:focus-visible { outline: none; color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 4px !important; }
/* the "no note yet" affordance stays invisible until the row is hovered, so an empty column
   does not become a wall of grey marks the way the old "Click to update" text did */
.tendi-skin .tnd-noteflag--add { opacity: 0; transition: opacity 0.12s; }
.tendi-skin .tnd-list-table tbody tr:hover .tnd-noteflag--add { opacity: 1; }

.tendi-skin .tnd-cls { font-weight: 600; color: var(--ink-2); }
.tendi-skin .tnd-cls .br { display: block; font-size: 11.5px; color: var(--ink-5); font-weight: 500; margin-top: 1px; }
.tendi-skin .tnd-age { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tendi-skin .tnd-age .d { display: block; font-size: 11.5px; color: var(--ink-5); font-weight: 500; margin-top: 1px; }
.tendi-skin .tnd-enr {
  display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.tendi-skin .tnd-enr svg { width: 13px; height: 13px; color: var(--ink-5); flex: none; }
.tendi-skin .tnd-enr .open { color: var(--ink-5); font-style: normal; }
.tendi-skin .tnd-enr.is-soon { color: var(--attention); font-weight: 600; }
.tendi-skin .tnd-enr.is-soon svg { color: var(--attention); }

.tendi-skin .tnd-pgs { display: flex; gap: 4px; flex-wrap: wrap; }
.tendi-skin .tnd-pg {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.tendi-skin .tnd-pg.hs { background: var(--info-tint); color: var(--info); }
.tendi-skin .tnd-pg.ln { background: var(--ok-tint); color: var(--ok); }
.tendi-skin .tnd-pg.vc { background: var(--attention-tint); color: var(--attention); }
.tendi-skin .tnd-pg.tag { background: var(--cream-2); color: var(--ink-3); }

.tendi-skin .tnd-trn {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tendi-skin .tnd-trn i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.tendi-skin .tnd-trn svg { width: 14px; height: 14px; color: var(--ink-4); }
.tendi-skin .tnd-trn .bus svg { color: var(--primary); }
.tendi-skin .tnd-dash { color: var(--ink-5); }

.tendi-skin .tnd-st {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px;
  padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.tendi-skin .tnd-st .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.tendi-skin .tnd-st.is-active { color: var(--ok); background: var(--ok-tint); }
.tendi-skin .tnd-st.is-inactive { color: var(--ink-3); background: var(--cream-2); }
.tendi-skin .tnd-st.is-trash { color: var(--critical); background: var(--critical-tint); }

/* row actions: one kebab, only drawn on hover so 50 rows are not 50 buttons */
.tendi-skin .tnd-rowmenu { position: relative; display: inline-flex; }
.tendi-skin .tnd-kebab {
  width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-4); cursor: pointer; display: grid; place-items: center; transition: 0.13s;
}
.tendi-skin .tnd-kebab svg { width: 15px; height: 15px; }
.tendi-skin .tnd-list-table tbody tr:hover .tnd-kebab { border-color: var(--paper-edge-strong); background: var(--paper-2); }
.tendi-skin .tnd-kebab:hover,
.tendi-skin .tnd-rowmenu.is-open .tnd-kebab { background: var(--cream-2); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-kebab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin.tnd-children-page .tnd-list-table td.tnd-col-act { width: 44px; text-align: right; padding-right: 12px; }

/* ---------- 6b. the table must use border-collapse: SEPARATE ----------
   Bootstrap's `.table` sets `border-collapse: collapse`, and Chrome does not lay out
   `position: sticky` table cells reliably under collapsed borders: the frozen <th>s rendered in the
   wrong place until some unrelated style change forced a reflow, so the header sat offset from the
   body it was labelling. `separate` with zero spacing is the supported combination and looks
   identical here, because every rule in this table is drawn with `border-bottom` on the cells rather
   than by the collapsed grid. `.table-bordered`'s per-cell box is cancelled for the same reason:
   under `separate` it would double every line. */
.tendi-skin.tnd-children-page .tnd-list-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.tendi-skin.tnd-children-page .tnd-list-table > thead > tr > th,
.tendi-skin.tnd-children-page .tnd-list-table > tbody > tr > td {
  border-left: 0; border-right: 0; border-top: 0;
}

/* ---------- 7. frozen identity columns, WIDE SCREENS ONLY ----------
   A sticky column costs its own width out of the scrollable area. On a 1366-wide Chromebook or a
   13" laptop that makes the horizontal scroll worse, not better, so below the breakpoint these
   columns simply scroll with the rest of the table. */
@media (min-width: 1500px) {
  .tendi-skin.tnd-children-page .tnd-list-table th.tnd-f1,
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f1 { position: sticky; left: 0; }
  /* The Child column is pinned at the checkbox column's REAL width, not a guessed one. Auto table
     layout negotiates that cell down (a declared 40px came out 38px), and the 2px difference was a
     slot the scrolling columns showed through, just left of the avatar. tendi-children-list.js
     measures the cell and writes --tnd-f1w after every draw; the 40px here is only the pre-measure
     fallback. */
  .tendi-skin.tnd-children-page .tnd-list-table th.tnd-f2,
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f2 { position: sticky; left: var(--tnd-f1w, 40px); }
  /* Body cells: the scrolling <td>s are unpositioned, so any z-index above 0 wins. f1 sits above f2
     so the checkbox column stays on top as the name column slides under it. */
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f1 { z-index: 4; }
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f2 { z-index: 3; }
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f1,
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f2 { background: var(--paper-2); }
  .tendi-skin.tnd-children-page .tnd-list-table tbody tr:hover td.tnd-f1,
  .tendi-skin.tnd-children-page .tnd-list-table tbody tr:hover td.tnd-f2 { background: var(--cream); }
  /* The header's frozen cells sit ON TOP of the columns scrolling under them, so they need an
     opaque background (the header band colour) and a HIGHER z-index than their siblings.
     This is the bit that was wrong: the shared skin already gives EVERY `thead th` z-index 5 for the
     vertical sticky header, so matching that value left the frozen cells tied with the scrolling
     ones, and a tie is broken by dom order, which means the later column painted over the frozen
     one. The header read "Enrollment" where the pinned "Child" should have been. */
  .tendi-skin.tnd-children-page .tnd-list-table th.tnd-f1 { z-index: 7; background: var(--cream-2); }
  .tendi-skin.tnd-children-page .tnd-list-table th.tnd-f2 { z-index: 6; background: var(--cream-2); }
  .tendi-skin.tnd-children-page .tnd-list-table td.tnd-f2::after,
  .tendi-skin.tnd-children-page .tnd-list-table th.tnd-f2::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--paper-edge);
  }
}
/* min/max as well as width: on an auto-layout table a bare `width` is only a suggestion, and the
   browser shrinking this cell is what opened the gap the frozen Child column was meant to close. */
.tendi-skin.tnd-children-page .tnd-list-table th.tnd-f1,
.tendi-skin.tnd-children-page .tnd-list-table td.tnd-f1 {
  width: 40px; min-width: 40px; max-width: 40px; padding-left: 14px; padding-right: 4px;
}
.tendi-skin.tnd-children-page .tnd-list-table th.tnd-f2,
.tendi-skin.tnd-children-page .tnd-list-table td.tnd-f2 { min-width: 236px; }

/* The optional Note column. `.child_note` carries legacy styling that renders it as an amber chip;
   inside this table it is just text, and the empty state is a quiet prompt rather than a filled
   block repeated down the column. The element keeps its class because the update-description modal
   writes back into `.child_note[data-id]`. */
.tendi-skin.tnd-children-page .tndcol-note .child_note {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.45; cursor: pointer;
  max-width: 260px; white-space: normal;
}
.tendi-skin.tnd-children-page .tndcol-note .child_note:hover { color: var(--primary); }
.tendi-skin.tnd-children-page .tndcol-note .tnd-note-empty { color: var(--ink-5); }

/* ---------- 7b. column visibility ----------
   Hiding is done in CSS, NOT with DataTables' column().visible(). That API REMOVES the <th> from
   the dom, so the next `destroy: true` re-init (every filter change on this page re-inits the
   table) saw 9 header cells against the 15 columns the server returns and threw
   "Cannot read properties of undefined (reading 'style')" mid-draw, leaving the list empty.
   A class on the page root sidesteps the whole interaction: the column count never changes. */
.tendi-skin.tnd-hide-class  .tndcol-class,
.tendi-skin.tnd-hide-age    .tndcol-age,
.tendi-skin.tnd-hide-enroll .tndcol-enroll,
.tendi-skin.tnd-hide-prog   .tndcol-prog,
.tendi-skin.tnd-hide-trans  .tndcol-trans,
.tendi-skin.tnd-hide-status .tndcol-status,
.tendi-skin.tnd-hide-recid  .tndcol-recid,
.tendi-skin.tnd-hide-cir    .tndcol-cir,
.tendi-skin.tnd-hide-lp     .tndcol-lp,
.tendi-skin.tnd-hide-vouch  .tndcol-vouch,
.tendi-skin.tnd-hide-tag    .tndcol-tag,
.tendi-skin.tnd-hide-note   .tndcol-note { display: none !important; }

/* ---------- 8. selection dock ---------- */
.tendi-skin .tnd-seldock {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); z-index: 90;
  display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 16px; background: var(--ink);
  border-radius: var(--radius-full); box-shadow: var(--shadow-overlay);
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
}
.tendi-skin .tnd-seldock.is-on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.tendi-skin .tnd-seldock .cnt { color: var(--paper-2); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tendi-skin .tnd-seldock .vdiv { width: 1px; height: 20px; background: var(--paper-edge-strong); margin: 0 3px; }
.tendi-skin .tnd-dockbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px;
  border-radius: var(--radius-full); border: 0; background: var(--cream-3); color: var(--ink);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: 0.14s; white-space: nowrap;
}
.tendi-skin .tnd-dockbtn svg { width: 14px; height: 14px; }
.tendi-skin .tnd-dockbtn:hover { background: var(--paper-2); }
.tendi-skin .tnd-dockbtn.danger { background: var(--critical-tint); color: var(--critical); }
.tendi-skin .tnd-dockbtn.danger:hover { background: var(--critical); color: var(--paper-2); }
.tendi-skin .tnd-dockx {
  width: 30px; height: 30px; border-radius: var(--radius-full); border: 0; background: transparent;
  color: var(--ink-5); cursor: pointer; display: grid; place-items: center;
}
.tendi-skin .tnd-dockx svg { width: 14px; height: 14px; }
.tendi-skin .tnd-dockx:hover { background: var(--ink-2); color: var(--paper-2); }

/* ============================================================
   9. MODALS
   ------------------------------------------------------------
   NOT scoped under `.tendi-skin`: these modals are deliberately siblings of the list container
   (tendi-skin.css exempts `.modal` from the rule that collapses what follows it), so the skin's
   scoped selectors cannot reach them. They carry `.tnd-modal` and are styled directly.
   Bootstrap 3 still owns show/hide, `.fade` and `.in`; only the looks are ours.
   ============================================================ */
.tnd-modal .tnd-modal-dialog { width: 560px; max-width: calc(100vw - 32px); margin: 48px auto; }
.tnd-modal .tnd-modal-content {
  background: var(--paper-2);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
}

.tnd-modal .tnd-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--paper-edge);
}
.tnd-modal .tnd-modal-htext { flex: 1; min-width: 0; }
.tnd-modal .tnd-modal-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--ink); margin: 0; line-height: 1.2;
}
.tnd-modal .tnd-modal-sub {
  margin: 4px 0 0; font-size: 13px; color: var(--ink-4); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tnd-modal .tnd-modal-sub:empty { display: none; }
.tnd-modal .tnd-modal-x {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink-4);
  cursor: pointer; display: grid; place-items: center; padding: 0; transition: 0.13s;
  opacity: 1; text-shadow: none; font-size: 0;
}
.tnd-modal .tnd-modal-x svg { width: 16px; height: 16px; }
.tnd-modal .tnd-modal-x:hover { background: var(--cream-2); color: var(--ink); opacity: 1; }
.tnd-modal .tnd-modal-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.tnd-modal .tnd-modal-body { padding: 18px 22px 20px; }
.tnd-modal .tnd-modal-label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin: 0 0 6px;
}
.tnd-modal .tnd-modal-textarea {
  width: 100%; min-height: 150px; resize: vertical;
  padding: 11px 13px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md);
  background: var(--paper-2); font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  box-shadow: none;
}
.tnd-modal .tnd-modal-textarea::placeholder { color: var(--ink-5); }
.tnd-modal .tnd-modal-textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.tnd-modal .tnd-modal-help { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-5); line-height: 1.45; }

.tnd-modal .tnd-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 14px 22px; background: var(--cream); border-top: 1px solid var(--paper-edge);
}
.tnd-modal .tnd-mbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 17px;
  border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; box-shadow: none; text-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tnd-modal .tnd-mbtn:hover { background: var(--cream-2); color: var(--ink); }
.tnd-modal .tnd-mbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-modal .tnd-mbtn--primary { background: var(--primary); border-color: var(--primary); color: var(--paper-2); }
.tnd-modal .tnd-mbtn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--paper-2); }
.tnd-modal .tnd-mbtn[disabled] { opacity: 0.6; pointer-events: none; }

@media (max-width: 600px) {
  .tnd-modal .tnd-modal-dialog { margin: 20px auto; }
  .tnd-modal .tnd-modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .tnd-modal .tnd-mbtn { justify-content: center; }
}

/* ---------- 10. responsive ---------- */
/* Below ~1180 the bar cannot hold everything on one line. It wraps rather than scrolls, so nothing
   becomes unreachable; search keeps the full width of its row. */
@media (max-width: 1180px) {
  .tendi-skin .tnd-chl-bar { flex-wrap: wrap; }
  .tendi-skin .tnd-chl-search { order: -1; flex-basis: 100%; min-width: 0; }
  .tendi-skin .tnd-chl-div { display: none; }
}
@media (max-width: 720px) {
  .tendi-skin .tnd-fpop { width: min(92vw, 640px); }
  .tendi-skin .tnd-fpop-body { grid-template-columns: 1fr; }
  .tendi-skin .tnd-fgroup:nth-child(2) { border-top: 1px solid var(--paper-edge); padding-top: 15px; }
  .tendi-skin .tnd-fgroup:first-child { padding-top: 0; border-top: 0; }
  .tendi-skin .tnd-seldock { left: 12px; right: 12px; transform: none; overflow-x: auto; }
  .tendi-skin .tnd-seldock.is-on { transform: none; }
}