/* ============================================================
   TENDI SKIN: scoped "paper / cream" design system (v1)
   Tokens (color/type/shadow): tendi-tokens.css, the single source of truth.
   SCOPING CONTRACT: every rule is scoped under `.tendi-skin`.
   Wrap the reskinned content in <div class="tendi-skin">…</div>.
   The global `*{}` / html / body reset from the comp has been
   REMOVED and re-scoped to `.tendi-skin *` so it cannot leak into
   the surrounding devoops/Bootstrap shell (this page loads as a
   fragment inside that shell). Do NOT add bare-element rules here.
   TODO(reskin): self-host these fonts for offline / MDM builds.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/* Tokens live in ONE place now; see tendi-tokens.css (the single source of
   truth for color/type/shadow). This file only consumes them via var(). */
@import url("tendi-tokens.css");

/* ---- scoped reset (replaces the comp's global *{} / body reset) ---- */
.tendi-skin, .tendi-skin *, .tendi-skin *::before, .tendi-skin *::after { box-sizing: border-box; }
.tendi-skin * { margin: 0; padding: 0; }
/* the [hidden] attribute must always win, even over our flex/grid display rules */
.tendi-skin [hidden] { display: none !important; }

.tendi-skin {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.tendi-skin button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
.tendi-skin a { color: inherit; text-decoration: none; }
.tendi-skin em { font-style: normal; }   /* no italics anywhere */
.tendi-skin input, .tendi-skin select, .tendi-skin textarea { font-family: inherit; font-size: inherit; color: inherit; }

.tendi-skin .mono {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}

/* ============================================================
   APP SHELL (full cream chrome, used later for the global shell
   reskin; the children fragment only uses .page-body downward)
   ============================================================ */
.tendi-skin .app { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }
.tendi-skin .sidebar-shell { display: flex; position: sticky; top: 0; height: 100vh; z-index: 40; }
.tendi-skin .sidebar {
  width: 88px; flex-shrink: 0; background: var(--cream);
  border-right: 1px solid var(--paper-edge);
  padding: 22px 0 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.tendi-skin .logo { width: 60px; height: 30px; display: grid; place-items: center; margin-bottom: 22px; color: var(--brand-logo); }
.tendi-skin .logo svg { width: 100%; height: auto; display: block; }
.tendi-skin .nav { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 10px; flex: 1; }
.tendi-skin .nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 4px 9px; border-radius: 12px; color: var(--ink-3);
  transition: all 0.18s ease; cursor: pointer; position: relative;
}
.tendi-skin .nav-item:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .nav-item.active { background: var(--primary-tint); color: var(--primary); }
.tendi-skin .nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 22px;
  background: var(--primary); border-radius: 0 3px 3px 0;
}
.tendi-skin .nav-item i { font-size: 17px; }
.tendi-skin .nav-label {
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; line-height: 1;
}
.tendi-skin .sidebar-footer { width: 100%; padding: 0 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tendi-skin .sidebar-divider { width: 28px; height: 1px; background: var(--paper-edge-strong); margin: 6px 0; }
.tendi-skin .sidebar-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink-3); cursor: pointer;
}
.tendi-skin .sidebar-icon-btn:hover { background: var(--cream-2); color: var(--ink); }

.tendi-skin .sub-pane {
  width: 232px; flex-shrink: 0; background: var(--paper);
  border-right: 1px solid var(--paper-edge);
  display: flex; flex-direction: column; overflow: hidden;
}
.tendi-skin .sub-pane-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 24px 22px 20px;
  border-bottom: 1px solid var(--paper-edge); flex-shrink: 0;
}
.tendi-skin .sub-pane-title .mono { color: var(--ink-4); margin-bottom: 6px; }
.tendi-skin .sub-pane-title h4 {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap;
}
.tendi-skin .sub-pane-collapse {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--ink-4); cursor: pointer; font-size: 12px;
}
.tendi-skin .sub-pane-collapse:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .sub-nav { flex: 1; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.tendi-skin .sub-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; font-size: 13.5px; color: var(--ink-2); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.tendi-skin .sub-item:hover { background: var(--cream); color: var(--ink); }
.tendi-skin .sub-item.active { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.tendi-skin .sub-item.active .sub-bullet { background: var(--primary); transform: scale(1.4); }
.tendi-skin .sub-bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-5); flex-shrink: 0; }
.tendi-skin .sub-pane-footer { padding: 14px 18px 18px; border-top: 1px solid var(--paper-edge); flex-shrink: 0; }
.tendi-skin .sub-pane-hint {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.tendi-skin .main { display: flex; flex-direction: column; min-width: 0; }
.tendi-skin .topbar {
  height: 68px; padding: 0 28px;
  display: flex; align-items: center; gap: 18px;
  background: var(--cream); border-bottom: 1px solid var(--paper-edge);
  position: sticky; top: 0; z-index: 30;
}
.tendi-skin .org-switcher {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px 7px 7px; background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: 999px; cursor: pointer;
}
.tendi-skin .org-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rose-deep);
  display: grid; place-items: center; color: var(--paper);
  font-weight: 600; font-size: 11px;
}
.tendi-skin .org-text { display: flex; flex-direction: column; line-height: 1.15; padding-right: 4px; }
.tendi-skin .org-text .lbl {
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.tendi-skin .org-text .name { font-weight: 600; font-size: 13px; color: var(--ink); }
.tendi-skin .org-pill {
  margin-left: 8px; padding: 3px 9px; background: var(--cream-2); border-radius: 999px;
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.tendi-skin .org-switcher .chev { color: var(--ink-4); font-size: 10px; margin-left: 4px; }

.tendi-skin .breadcrumbs {
  flex: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
.tendi-skin .breadcrumbs a { color: var(--ink-3); }
.tendi-skin .breadcrumbs a:hover { color: var(--ink); }
.tendi-skin .breadcrumbs .sep { color: var(--ink-5); }
.tendi-skin .breadcrumbs .current { color: var(--ink); font-weight: 600; }

.tendi-skin .topbar-actions { display: flex; align-items: center; gap: 6px; }
.tendi-skin .icon-btn {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer;
  position: relative;
}
.tendi-skin .icon-btn:hover { background: var(--cream-2); }
.tendi-skin .icon-btn.dark { background: var(--ink); color: var(--paper); }
.tendi-skin .icon-btn .dot {
  position: absolute; top: 9px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--critical); border: 1.5px solid var(--cream);
}
.tendi-skin .icon-btn.dark .dot { border-color: var(--ink); }

.tendi-skin .user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px; margin-left: 6px;
  border-radius: 999px; cursor: pointer;
}
.tendi-skin .user-chip:hover { background: var(--cream-2); }
.tendi-skin .user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lavender-deep);
  display: grid; place-items: center; color: var(--paper);
  font-weight: 600; font-size: 11.5px;
}
.tendi-skin .user-info { display: flex; flex-direction: column; line-height: 1.15; }
.tendi-skin .user-info .name { font-weight: 600; font-size: 13px; }
.tendi-skin .user-info .role {
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ============================================================
   PAGE BODY (form column + right context rail)
   ============================================================ */
.tendi-skin .page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 22px;
  padding: 28px 32px 60px;
  align-items: start;
}
.tendi-skin .canvas { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* pills */
.tendi-skin .pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; white-space: nowrap;
}
.tendi-skin .pill.active { background: var(--ok-tint); color: var(--ok); }
.tendi-skin .pill.active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.tendi-skin .pill.outline { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--paper-edge); }

/* ============================================================
   CONTEXT RAIL (right side, sticky)
   ============================================================ */
.tendi-skin .context-rail {
  position: sticky; top: 88px;
  max-height: calc(100vh - 108px);
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; padding-right: 2px;
}
.tendi-skin .context-rail::-webkit-scrollbar { width: 4px; }
.tendi-skin .context-rail::-webkit-scrollbar-thumb { background: var(--paper-edge-strong); border-radius: 2px; }
.tendi-skin .rail-card {
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
}
.tendi-skin .rail-identity { padding: 22px 18px 18px; text-align: center; }
.tendi-skin .rail-identity .photo {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--plum-deep);
  display: grid; place-items: center; color: var(--paper);
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: 30px; letter-spacing: -0.02em; margin: 0 auto 12px;
  position: relative; box-shadow: 0 0 0 4px var(--paper-2);
}
.tendi-skin .rail-identity .photo .status-ring {
  position: absolute; bottom: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok); border: 3px solid var(--paper-2);
}
.tendi-skin .rail-identity .eyebrow {
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; margin-bottom: 6px;
}
.tendi-skin .rail-identity h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.12; letter-spacing: -0.018em;
  color: var(--ink); font-feature-settings: "ss01"; margin-bottom: 4px;
}
.tendi-skin .rail-identity h2 em { font-style: normal; color: var(--primary); font-weight: 500; }
.tendi-skin .rail-identity .hebrew {
  font-family: var(--font-display); font-size: 16px; color: var(--ink-3);
  direction: rtl; margin-bottom: 12px;
}
.tendi-skin .rail-identity .pills {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px;
}
.tendi-skin .rail-identity .facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding-top: 12px; border-top: 1px dashed var(--paper-edge-strong); text-align: left;
}
.tendi-skin .rail-identity .fact .k {
  font-family: var(--font-label); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; margin-bottom: 2px;
}
.tendi-skin .rail-identity .fact .v {
  font-size: 12.5px; color: var(--ink); font-weight: 600; letter-spacing: -0.005em;
}
.tendi-skin .rail-allergies {
  background: var(--critical-tint); border: 1px solid color-mix(in srgb, var(--critical) 22%, transparent);
  border-left: 3px solid var(--critical); border-radius: 12px; padding: 12px 14px;
}
.tendi-skin .rail-allergies .head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--critical); font-weight: 600; margin-bottom: 6px;
}
.tendi-skin .rail-allergies .head i { font-size: 11px; }
.tendi-skin .rail-allergies .body { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.tendi-skin .rail-allergies .body strong { color: var(--ink); font-weight: 700; }
.tendi-skin .rail-nav .nav-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); font-weight: 500;
}
.tendi-skin .rail-nav .nav-head .progress {
  font-family: var(--font-display); font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 400;
}
.tendi-skin .rail-nav .nav-head .progress strong { color: var(--ink); font-weight: 600; }
.tendi-skin .rail-nav .nav-list { display: flex; flex-direction: column; gap: 1px; }
.tendi-skin .rail-nav .nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 10px; font-size: 13px; color: var(--ink-2); font-weight: 500;
  transition: all 0.15s; cursor: pointer; letter-spacing: -0.005em; position: relative;
}
.tendi-skin .rail-nav .nav-link:hover { background: var(--cream); color: var(--ink); }
.tendi-skin .rail-nav .nav-link.active { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.tendi-skin .rail-nav .nav-link.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; background: var(--primary); border-radius: 0 2px 2px 0;
}
.tendi-skin .rail-nav .nav-num {
  font-family: var(--font-label); font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink-4); font-weight: 600; width: 22px; flex-shrink: 0;
}
.tendi-skin .rail-nav .nav-link.active .nav-num { color: var(--primary); }
.tendi-skin .rail-nav .nav-link.muted { opacity: 0.45; }
.tendi-skin .rail-nav .nav-link.dirty .nav-dot {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--apricot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apricot) 30%, transparent);
}
.tendi-skin .rail-actions { display: flex; flex-direction: column; gap: 4px; }
.tendi-skin .rail-action {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; color: var(--ink-2); font-weight: 500;
  cursor: pointer; transition: all 0.15s; letter-spacing: -0.005em;
}
.tendi-skin .rail-action:hover { background: var(--cream); color: var(--ink); }
.tendi-skin .rail-action i { font-size: 12px; color: var(--ink-4); width: 16px; }
.tendi-skin .rail-action.danger { color: var(--critical); }
.tendi-skin .rail-action.danger i { color: var(--critical); }
.tendi-skin .rail-action.danger:hover { background: var(--critical-tint); }
.tendi-skin .rail-save { background: var(--ink); color: var(--paper); padding: 16px 18px 14px; }
.tendi-skin .rail-save .save-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); font-weight: 500; margin-bottom: 6px;
}
.tendi-skin .rail-save .save-head .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--apricot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apricot) 28%, transparent);
}
.tendi-skin .rail-save .save-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  letter-spacing: -0.015em; margin-bottom: 10px; color: var(--paper);
}
.tendi-skin .rail-save .save-title em { font-style: normal; color: var(--apricot); font-weight: 500; }
.tendi-skin .rail-save .save-list { font-size: 12px; color: var(--cream-2); line-height: 1.5; margin-bottom: 14px; }
.tendi-skin .rail-save .save-list .sec-tag {
  display: inline-block; font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.1em;
  background: rgba(255,255,255,0.08); padding: 2px 7px; border-radius: 5px; margin-right: 4px; margin-top: 4px;
}
.tendi-skin .rail-save .save-buttons { display: flex; gap: 6px; }
.tendi-skin .rail-save .save-buttons button {
  flex: 1; padding: 9px 12px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.tendi-skin .rail-save .discard { background: transparent; color: var(--cream-2); }
.tendi-skin .rail-save .discard:hover { background: rgba(255,255,255,0.08); color: var(--paper); }
.tendi-skin .rail-save .save-primary { background: var(--paper); color: var(--ink); }
.tendi-skin .rail-save .save-primary:hover { background: var(--cream); }

/* ============================================================
   SECTION CARD
   ============================================================ */
.tendi-skin .section {
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden;
}
.tendi-skin .section-head {
  padding: 22px 28px 18px; border-bottom: 1px solid var(--paper-edge);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
}
.tendi-skin .section-head .titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tendi-skin .section-head .mono { color: var(--ink-4); }
.tendi-skin .section-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
}
.tendi-skin .section-head h2 em { font-style: normal; color: var(--primary); font-weight: 500; }
.tendi-skin .section-head .head-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px;
  font-family: var(--font-label); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-3);
  background: var(--cream); border: 1px solid var(--paper-edge);
  cursor: pointer; flex-shrink: 0;
}
.tendi-skin .section-head .head-action:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .section-head .head-action i { font-size: 11px; }
.tendi-skin .section-body { padding: 22px 28px 24px; }
.tendi-skin .section-body + .section-body { border-top: 1px solid var(--paper-edge); }
.tendi-skin .section.is-hidden { display: none; }
.tendi-skin .section[data-collapsed="true"] .section-body { display: none; }

/* subsection */
.tendi-skin .subsection { margin-top: 22px; }
.tendi-skin .subsection:first-child { margin-top: 0; }
.tendi-skin .subsection-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0 14px; border-bottom: 1px dashed var(--paper-edge-strong); margin-bottom: 16px;
}
.tendi-skin .subsection-head h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; letter-spacing: -0.015em; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.tendi-skin .subsection-head h3::before { content: "›"; color: var(--ink-5); font-weight: 500; font-size: 18px; }

/* ============================================================
   FORM GRID + FIELDS
   ============================================================ */
.tendi-skin .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.tendi-skin .form-grid.cols-1 { grid-template-columns: 1fr; }
.tendi-skin .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tendi-skin .form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tendi-skin .form-grid > .col-full { grid-column: 1 / -1; }
.tendi-skin .form-grid > .col-half { grid-column: span 2; }

.tendi-skin .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tendi-skin .field-label {
  font-family: var(--font-label); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.tendi-skin .field-label .req { color: var(--critical); font-weight: 700; }
.tendi-skin .field-label .opt { color: var(--ink-4); font-weight: 400; }

/* ============================================================
   INFO TOOLTIP, library component. Markup:
     <span class="tnd-info" tabindex="0" role="button" aria-label="About X"
           data-tip="Short explanation.">…svg…</span>
   Behaviour lives in assets/admin/js/tendi-tooltip.js (hover + keyboard focus;
   the bubble is portalled to <body> so a scrollable pane can't clip it).
   Inside a `.field-label` / `.control-label` it right-aligns itself, so it sits
   at the far end of the label, flush with the right edge of the field below.
   ============================================================ */
.tendi-skin .tnd-info {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--ink-5); cursor: pointer; border-radius: 50%; vertical-align: middle;
  transition: color 0.14s;
}
.tendi-skin .tnd-info:hover { color: var(--primary); }
.tendi-skin .tnd-info:focus { outline: none; }
.tendi-skin .tnd-info:focus-visible { color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.tendi-skin .tnd-info svg { width: 15px; height: 15px; display: block; }
/* Right-align inside a label. A label that CONTAINS the icon is forced into a flex row:
   several per-context rules (e.g. `.vB-editcard .field > .field-label`) set `display:block`
   with higher specificity, which would kill the `margin-left:auto` push. `!important` here is
   deliberate. It is the component's layout contract, so one instance behaves identically in
   every label context across the app. */
.tendi-skin .field-label:has(> .tnd-info),
.tendi-skin .control-label:has(> .tnd-info),
.tendi-skin label:has(> .tnd-info) { display: flex !important; align-items: center; gap: 6px; }
.tendi-skin .field-label > .tnd-info,
.tendi-skin .control-label > .tnd-info,
.tendi-skin label > .tnd-info { margin-left: auto; }
/* inside a toggle's text block the icon sits BESIDE the wording (not pushed to the far right),
   so the switch keeps its own `text | track` layout */
.tendi-skin .vB-toggle .tnd-info { margin-left: 6px; }
/* horizontal forms (label column left, field right): keep the icon off the field's edge,
   right-aligned it would otherwise sit flush against the input with no gap */
.tendi-skin .control-label > .tnd-info { margin-right: 12px; }
/* the Users/record pane shows the edit FORM in read-only mode too (as plain text),
   so the hint only makes sense while actually editing */
.tendi-skin .tnd-pane.is-readonly .tnd-info { display: none !important; }

/* the bubble itself: PORTALLED to <body>, so it is deliberately NOT scoped under
   `.tendi-skin` (tokens are on :root, so they still resolve). position:fixed means a
   scrollable pane / drawer / modal can never clip it. */
.tnd-tip {
  /* z-index must clear every overlay the icon can live inside: the side pane is 3010, its
     scrim 3000, drawers/dialogs up to 3200, Bootstrap modals 1040/1050. At 2200 the bubble
     opened correctly but painted BEHIND the opaque pane: visible cursor, invisible tooltip.
     9000 sits above all of those and still below the 9999 toast layer. */
  position: fixed; z-index: 9000; display: none; max-width: 264px;
  background: var(--ink, #1f1a2e); color: #fff;
  font-family: var(--font-sans, Inter, -apple-system, sans-serif);
  font-size: 12.5px; font-weight: 450; line-height: 1.5; letter-spacing: -0.003em;
  padding: 9px 12px; border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-overlay, 0 14px 38px -10px rgba(31, 26, 46, 0.26));
  opacity: 0; transform: translateY(2px); pointer-events: none;   /* never eats the hover */
  transition: opacity 0.13s ease, transform 0.13s ease;
}
.tnd-tip.is-open { opacity: 1; transform: none; }
.tnd-tip::after {                                   /* arrow, follows the trigger's centre */
  content: ""; position: absolute; left: var(--tnd-tip-ax, 50%); margin-left: -4.5px;
  width: 9px; height: 9px; background: inherit; transform: rotate(45deg);
}
.tnd-tip[data-place="top"]::after { bottom: -4px; }
.tnd-tip[data-place="bottom"]::after { top: -4px; }
@media (prefers-reduced-motion: reduce) { .tnd-tip { transition: none; } }

.tendi-skin .field-input,
.tendi-skin .field input[type="text"],
.tendi-skin .field input[type="email"],
.tendi-skin .field input[type="tel"],
.tendi-skin .field input[type="number"],
.tendi-skin .field input[type="date"],
.tendi-skin .field input[type="time"],
.tendi-skin .field input[type="password"],
.tendi-skin .field select,
.tendi-skin .field textarea {
  width: 100%; padding: 10px 14px;
  background: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); font-family: var(--font-sans);
  font-size: 13.5px; color: var(--ink); font-weight: 500;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; letter-spacing: -0.005em;
}
.tendi-skin .field input::placeholder, .tendi-skin .field textarea::placeholder, .tendi-skin .field select::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin .field input:hover, .tendi-skin .field select:hover, .tendi-skin .field textarea:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .field input:focus, .tendi-skin .field select:focus, .tendi-skin .field textarea:focus {
  outline: none; background: var(--paper-2); border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.tendi-skin .field textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.tendi-skin .field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239a93ad' d='M5 6L0 0h10z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.tendi-skin .field .field-help { font-size: 11.5px; color: var(--ink-4); font-style: normal; letter-spacing: 0; }

/* date / time input with icon */
.tendi-skin .input-with-icon { position: relative; }
.tendi-skin .input-with-icon input { padding-right: 40px; }
.tendi-skin .input-with-icon .icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 12px; pointer-events: none;
}

/* ── BASE CHECKBOX ────────────────────────────────────────────────────────────
   Styles the REAL input, so every checkbox on a reskinned page picks up the skin
   without touching markup. There are ~170 checkboxes across the admin views in
   two legacy shapes, and neither looked right:

     a) legacy/devoops:  <label><input type=checkbox><i class="far fa-square"></i>
        style.css hides the input (position:absolute; clip:rect(0,0,0,0)) and draws
        a Font Awesome glyph, swapping it via `input:checked + i:before{content:"\f046"}`.
        That glyph is a different weight/shape from everything else in the skin.
     b) bare <input type="checkbox"> outside those wrappers -> raw browser control.

   This rule undoes the legacy hiding and paints the same box the .checkbox
   component below draws. The tick is an inline SVG data-URI rather than a
   pseudo-element: ::before/::after on <input> is not reliable across browsers,
   and an SVG keeps the stroke crisp at any zoom.

   DELIBERATELY PLACED FIRST so the bespoke checkbox treatments further down
   (.checkbox/.box, .tnd-chk, .tnd-classes-wrap, #vaccine-forms-requirements,
   .toggle-switch, .tnd-filter-chip) still win. They hide the input and draw
   their own visual, and every one of them is either more specific or later in
   this file. Scoped to .tendi-skin, so un-reskinned pages are untouched.       */
.tendi-skin input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  position: static; clip: auto;              /* undo the legacy off-screen hiding */
  width: 20px; height: 20px; margin: 0 6px 0 0; padding: 0;
  flex-shrink: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid var(--paper-edge-strong); border-radius: 6px;
  background-color: var(--paper-2); background-repeat: no-repeat; background-position: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.tendi-skin input[type="checkbox"]:hover { border-color: var(--primary); }
.tendi-skin input[type="checkbox"]:checked {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}
.tendi-skin input[type="checkbox"]:indeterminate {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}
.tendi-skin input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-tint); }
.tendi-skin input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.tendi-skin input[type="checkbox"]:disabled:hover { border-color: var(--paper-edge-strong); }
/* the legacy glyph is now a duplicate box sitting next to the real one */
.tendi-skin input[type="checkbox"] + i[class*="fa-square"],
.tendi-skin input[type="checkbox"] + i[class*="fa-check-square"] { display: none !important; }
/* legacy wrappers reserved room for the off-screen input; it is in flow now */
.tendi-skin .checkbox-inline label,
.tendi-skin .checkbox label { padding-left: 0; display: inline-flex; align-items: center; gap: 2px; }

/* Legacy style.css carries a global `.box { position: relative; z-index: 1999 }` for the old
   panel chrome. Checkbox visuals that reuse that class name silently inherit the stacking and
   paint OVER anything above them: the branch/capability checkboxes in the Users side pane were
   punching through an open dropdown menu (z-index 60). Keep position (the tick is positioned
   against it) and drop only the stacking. Same collision the file-upload checkbox dodged by
   renaming .box -> .fu-cbx further down this file. */
.tendi-skin .vB-chk .box,
.tendi-skin .checkbox .box { z-index: auto; }

/* checkbox: whole label is the (large) hit target; crisp drawn check */
.tendi-skin .checkbox {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 6px 6px 2px; margin: -6px -6px -6px -2px;   /* enlarge hit area without shifting layout */
  font-size: 13.5px; color: var(--ink-2); font-weight: 500; user-select: none;
}
.tendi-skin .checkbox input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tendi-skin .checkbox .box {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; position: relative;
  background: var(--paper-2); border: 1.5px solid var(--paper-edge-strong);
  transition: background 0.15s, border-color 0.15s;
}
.tendi-skin .checkbox .box::after {
  content: ""; position: absolute; left: 6.5px; top: 3px;
  width: 5px; height: 9px; border: solid var(--paper-2); border-width: 0 2px 2px 0;
  transform: rotate(45deg); opacity: 0; transition: opacity 0.15s;
}
.tendi-skin .checkbox:hover .box { border-color: var(--primary); }
.tendi-skin .checkbox input:checked + .box { background: var(--primary); border-color: var(--primary); }
.tendi-skin .checkbox input:checked + .box::after { opacity: 1; }
.tendi-skin .checkbox input:focus-visible + .box { box-shadow: 0 0 0 3px var(--primary-tint); }

/* radio group inline */
.tendi-skin .radio-group {
  display: flex; gap: 6px; background: var(--cream);
  border: 1px solid var(--paper-edge); border-radius: 10px; padding: 3px;
}
.tendi-skin .radio { flex: 1; cursor: pointer; position: relative; }
.tendi-skin .radio input { display: none; }
.tendi-skin .radio span {
  display: block; padding: 7px 10px; border-radius: 7px;
  font-family: var(--font-label); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-3); text-align: center; transition: all 0.15s;
}
.tendi-skin .radio:hover span { color: var(--ink); }
.tendi-skin .radio input:checked + span { background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }

/* toggle (boolean checkbox visual) */
.tendi-skin .toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; background: var(--cream);
  border: 1px solid var(--paper-edge); border-radius: 12px;
  cursor: pointer; user-select: none;
}
.tendi-skin .toggle-row:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .toggle-row .toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tendi-skin .toggle-row .toggle-text .lbl { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.tendi-skin .toggle-row .toggle-text .sub { font-size: 12px; color: var(--ink-3); }
/* toggle = a real checkbox (visually a switch); clicking the label/row toggles it */
.tendi-skin .toggle {
  position: relative; display: inline-block; vertical-align: middle;
  width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;
}
.tendi-skin .toggle input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tendi-skin .toggle .toggle-track {
  display: block; width: 100%; height: 100%; background: var(--cream-3);
  border-radius: 999px; transition: background 0.18s; pointer-events: none;
}
.tendi-skin .toggle .toggle-track::after {
  content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px;
  background: var(--paper-2); border-radius: 50%; box-shadow: none; transition: left 0.18s;
}
.tendi-skin .toggle input:checked + .toggle-track { background: var(--primary); }
.tendi-skin .toggle input:checked + .toggle-track::after { left: 21px; }
.tendi-skin .toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--primary-tint); }

/* file upload */
.tendi-skin .file-upload {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--cream); border: 1px dashed var(--paper-edge-strong); border-radius: 12px;
}
.tendi-skin .file-upload .preview {
  width: 56px; height: 56px; border-radius: 10px; background: var(--cream-2);
  display: grid; place-items: center; color: var(--ink-4); font-size: 18px; flex-shrink: 0; overflow: hidden;
}
.tendi-skin .file-upload .preview.has-image {
  background: var(--plum-deep); color: var(--paper);
  font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 22px;
}
.tendi-skin .file-upload .info { flex: 1; min-width: 0; }
.tendi-skin .file-upload .info .name { font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.tendi-skin .file-upload .info .meta { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-4); text-transform: uppercase; }
.tendi-skin .file-upload .actions { display: flex; gap: 6px; }

/* small button: squircle, sentence-case (the standard button; supersedes the old pill/uppercase look) */
.tendi-skin .btn-sm {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--paper-edge-strong); cursor: pointer; transition: all 0.15s;
}
.tendi-skin .btn-sm:hover { background: var(--cream-2); color: var(--ink); border-color: var(--primary); }
.tendi-skin .btn-sm[disabled], .tendi-skin .btn-sm:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.tendi-skin .btn-sm.danger { color: var(--critical); }
.tendi-skin .btn-sm.danger:hover { background: var(--critical-tint); border-color: var(--critical); }
.tendi-skin .btn-sm.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.tendi-skin .btn-sm.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tendi-skin .btn-sm i { font-size: 12px; }

/* parent contact row */
.tendi-skin .contact-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px;
  align-items: flex-start; padding: 18px 0; border-bottom: 1px dashed var(--paper-edge-strong);
}
.tendi-skin .contact-row:last-child { border-bottom: none; }
.tendi-skin .contact-row .who { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.tendi-skin .contact-row .who-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--paper); font-weight: 600; font-size: 11.5px; flex-shrink: 0;
}
.tendi-skin .contact-row .who-avatar.father { background: var(--sky-deep); }
.tendi-skin .contact-row .who-avatar.mother { background: var(--rose-deep); }
.tendi-skin .contact-row .who-avatar.home   { background: var(--cream-3); color: var(--ink-3); }
.tendi-skin .contact-row .who-role {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; margin-bottom: 2px;
}
.tendi-skin .contact-row .who-name { font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.005em; }
.tendi-skin .contact-row .field { gap: 6px; }
.tendi-skin .contact-row .notify { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   DYNAMIC ROW (repeaters)
   ============================================================ */
.tendi-skin .dyn-rows { display: flex; flex-direction: column; gap: 10px; }
.tendi-skin .dyn-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: 12px;
}
.tendi-skin .dyn-row.no-handle { grid-template-columns: 1fr auto; }
.tendi-skin .dyn-row .handle { color: var(--ink-5); cursor: grab; font-size: 13px; display: grid; place-items: center; }
.tendi-skin .dyn-row .handle:hover { color: var(--ink-3); }
.tendi-skin .dyn-row .row-fields { display: grid; gap: 12px; min-width: 0; }
.tendi-skin .dyn-row .row-fields.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tendi-skin .dyn-row .row-fields.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tendi-skin .dyn-row .row-fields.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tendi-skin .dyn-row .row-fields.cols-5 { grid-template-columns: repeat(5, 1fr); }
.tendi-skin .dyn-row .row-fields .field-label { display: none; }
.tendi-skin .dyn-row .row-fields .field input,
.tendi-skin .dyn-row .row-fields .field select { padding: 8px 12px; font-size: 13px; background: var(--paper-2); }
.tendi-skin .dyn-row .row-fields .field input:focus,
.tendi-skin .dyn-row .row-fields .field select:focus { background: var(--paper-2); }
.tendi-skin .dyn-row .row-fields .field-mini-label {
  font-family: var(--font-label); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; margin-bottom: 4px;
}
.tendi-skin .dyn-row .remove-btn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-4); cursor: pointer;
}
.tendi-skin .dyn-row .remove-btn:hover { background: var(--critical-tint); color: var(--critical); }
.tendi-skin .dyn-add {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 10px;
  background: var(--paper-2); border: 1px dashed var(--paper-edge-strong);
  font-family: var(--font-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all 0.15s;
}
.tendi-skin .dyn-add:hover { background: var(--cream); border-color: var(--primary); color: var(--primary); }

/* ============================================================
   INLINE NOTE / chips / pay-type / conditional / card / price
   ============================================================ */
/* Inline note (info / warn / critical).
   A calm, low-saturation tinted block, NOT a loud alert box and NOT an accent-bar
   callout. The semantic colour is barely washed into the surface (a whisper on white),
   a hairline edge gives it quiet containment, and a single semantic glyph carries the
   meaning (colour is never the only signal). The whole semantic is driven by one local
   --note var, so each variant only re-points the colour. Wrapped lines hang-indent under
   the first text line (not under the icon) for a tidy multi-line read. */
.tendi-skin .inline-note {
  --note: var(--info);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--note) 7%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--note) 22%, transparent);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
/* crisp line icon (inline <svg> with stroke=currentColor), vertically centered on the
   first text line via the line box, so a one-line note centers and a wrapped note keeps
   the icon on the first line. */
.tendi-skin .inline-note > svg {
  flex-shrink: 0; width: 16px; height: 16px; color: var(--note);
  margin-top: calc((1lh - 16px) / 2);
}
.tendi-skin .inline-note > :not(svg) { min-width: 0; }   /* text column → enables hanging indent */
.tendi-skin .inline-note strong { color: var(--ink); font-weight: 600; }
.tendi-skin .inline-note.warn { --note: var(--attention); }
.tendi-skin .inline-note.critical { --note: var(--critical); }

.tendi-skin .chip-picker {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px;
  background: var(--cream); border: 1px solid var(--paper-edge); border-radius: 12px;
}
.tendi-skin .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  font-size: 12.5px; color: var(--ink-2); cursor: pointer; font-weight: 500; transition: all 0.15s;
}
.tendi-skin .chip:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .chip.on { background: var(--primary-tint); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, transparent); font-weight: 600; }
.tendi-skin .chip i { font-size: 10px; }

.tendi-skin .pay-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tendi-skin .pay-type {
  padding: 14px 14px 12px; background: var(--cream); border: 1.5px solid var(--paper-edge);
  border-radius: 12px; cursor: pointer; transition: all 0.15s; position: relative;
}
.tendi-skin .pay-type:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .pay-type.on { background: var(--primary-tint); border-color: var(--primary); }
.tendi-skin .pay-type input { display: none; }
.tendi-skin .pay-type .lbl {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 4px;
}
.tendi-skin .pay-type.on .lbl { color: var(--primary); }
.tendi-skin .pay-type .desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

.tendi-skin .conditional {
  margin-top: 14px; padding: 16px 18px; background: var(--cream);
  border-left: 3px solid var(--primary); border-radius: 8px;
}
.tendi-skin .conditional .field input,
.tendi-skin .conditional .field select,
.tendi-skin .conditional .field textarea { background: var(--paper-2); }
.tendi-skin .conditional .label-row {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.tendi-skin .conditional .label-row::before { content: "↳"; color: var(--primary); font-weight: 500; }

.tendi-skin .card-payment { padding: 18px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: 14px; }
.tendi-skin .card-payment .card-display {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--ink); color: var(--paper);
  border-radius: 12px; margin-bottom: 12px;
}
.tendi-skin .card-payment .card-display .chip {
  width: 32px; height: 24px; background: var(--apricot-deep);
  border-radius: 4px; flex-shrink: 0; cursor: default; padding: 0; border: none;
}
.tendi-skin .card-payment .card-display .num { font-family: var(--font-label); font-size: 14px; letter-spacing: 0.18em; font-weight: 500; }
.tendi-skin .card-payment .card-actions { display: flex; gap: 8px; align-items: center; }

.tendi-skin .price-with-history { display: flex; align-items: stretch; gap: 6px; }
.tendi-skin .price-with-history input { flex: 1; }
.tendi-skin .history-btn {
  width: 40px; border-radius: 10px; background: var(--cream); border: 1px solid var(--paper-edge);
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: all 0.15s;
}
.tendi-skin .history-btn:hover { background: var(--cream-2); color: var(--primary); }

/* ============================================================
   CUSTOM DROPDOWN (.tnd-select): JS-enhanced select
   Behaviour lives in assets/admin/js/tendi-dropdown.js.
   Markup: .tnd-select > [.tnd-select-trigger > .tnd-select-label + caret]
                       + [.tnd-select-menu > (.tnd-select-search?) + .tnd-select-options(.tnd-option*) + .tnd-select-empty]
                       + <input type="hidden">  (the real form value)
   ============================================================ */
.tendi-skin .tnd-select { position: relative; width: 100%; }

/* trigger (looks like a field) */
.tendi-skin .tnd-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); font-weight: 500;
  cursor: pointer; text-align: left; letter-spacing: -0.005em;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tendi-skin .tnd-select-trigger:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .tnd-select-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-select-label.is-placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin .tnd-select-caret { flex-shrink: 0; color: var(--ink-4); font-size: 11px; transition: transform 0.18s; display: grid; place-items: center; }
.tendi-skin .tnd-select.is-open .tnd-select-trigger {
  background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.tendi-skin .tnd-select.is-open .tnd-select-caret { transform: rotate(180deg); }
/* "×" clear button (non-required selects): shown only when a real value is chosen */
.tendi-skin .tnd-select-clear {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin: -2px -2px -2px 0; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--ink-4); font-size: 11px; line-height: 1; border-radius: var(--radius-full); transition: background 0.15s, color 0.15s;
}
.tendi-skin .tnd-select-clear:hover { background: var(--cream-3); color: var(--ink); }
.tendi-skin .tnd-select-clear[hidden] { display: none; }
/* a prompt option ("- Select -") is the placeholder, never a menu item */
.tendi-skin .tnd-option.is-placeholder { display: none !important; }

/* menu (width follows the field; flips up via .is-up) */
.tendi-skin .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); border: 1px solid var(--paper-edge); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px;
}
.tendi-skin .tnd-select.is-open .tnd-select-menu { display: flex; }
.tendi-skin .tnd-select.is-up .tnd-select-menu { top: auto; bottom: calc(100% + 6px); }

/* search */
.tendi-skin .tnd-select-search { position: relative; padding: 2px 2px 8px; flex-shrink: 0; }
.tendi-skin .tnd-select-search i { display: none !important; }   /* no magnifier glyph in the dropdown search (component-level) */
.tendi-skin .tnd-select-search input {
  width: 100%; padding: 9px 12px; background: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: 9px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 500;
}
.tendi-skin .tnd-select-search input::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin .tnd-select-search input:focus { outline: none; background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* options list (scrolls) */
.tendi-skin .tnd-select-options { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 2px; margin: -2px; }
.tendi-skin .tnd-select-options::-webkit-scrollbar { width: 9px; }
.tendi-skin .tnd-select-options::-webkit-scrollbar-thumb { background: var(--paper-edge-strong); border-radius: 5px; border: 2.5px solid var(--paper-2); }

.tendi-skin .tnd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2);
  font-weight: 500; cursor: pointer; letter-spacing: -0.005em; user-select: none;
}
.tendi-skin .tnd-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-check { color: var(--primary); font-size: 12px; opacity: 0; flex-shrink: 0; }
.tendi-skin .tnd-option.is-active { background: var(--cream-2); color: var(--ink); }       /* keyboard / hover cursor */
.tendi-skin .tnd-option.is-selected { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.tendi-skin .tnd-option.is-selected .tnd-check { opacity: 1; }
.tendi-skin .tnd-option.is-hidden { display: none; }

/* noted option: label + a short "what it's for" note on ONE line (Role picker).
   The note is pushed right, greys back, and truncates before the label does: the
   label keeps its natural width so the role name is never the thing that gets cut. */
.tendi-skin .tnd-option--noted { gap: 12px; }
.tendi-skin .tnd-option--noted .tnd-opt-label { flex: 0 0 auto; }
.tendi-skin .tnd-opt-note {
  flex: 0 1 auto; min-width: 0; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; color: var(--ink-4); text-align: right;
}
.tendi-skin .tnd-option--noted.is-active .tnd-opt-note { color: var(--ink-3); }
.tendi-skin .tnd-option--noted.is-selected .tnd-opt-note { color: var(--primary); opacity: 0.75; }

/* split option: name (+ sub) on the left, meta (e.g. price) on the right */
.tendi-skin .tnd-option--split .tnd-opt-name { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tendi-skin .tnd-option--split .tnd-opt-name b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-option--split .tnd-opt-name small { font-weight: 500; font-size: 11.5px; color: var(--ink-4); }
.tendi-skin .tnd-option--split .tnd-opt-end { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.tendi-skin .tnd-option--split .tnd-opt-meta {
  font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--ink-3);
  background: var(--cream); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tendi-skin .tnd-option--split.is-active .tnd-opt-meta { background: var(--cream-3); }
.tendi-skin .tnd-option--split.is-selected .tnd-opt-meta { background: var(--paper-2); color: var(--primary); }
.tendi-skin .tnd-option--split.is-selected .tnd-opt-name small { color: var(--primary); opacity: 0.7; }

/* empty / no-results */
.tendi-skin .tnd-select-empty { padding: 18px 12px; text-align: center; color: var(--ink-4); font-size: 13px; }
.tendi-skin .tnd-select-empty[hidden] { display: none; }

/* ============================================================
   DATA TABLE / LIST PAGE  (server-side DataTables, reskinned in place)
   ------------------------------------------------------------
   Sits on top of the legacy devoops `.box` + Bootstrap `.table` markup,
   so several rules intentionally OVERRIDE legacy chrome (zebra stripes,
   cell borders, the box-header). Everything stays scoped under .tendi-skin.
   The scoped reset zeroes padding on ALL descendants, so every legacy
   sub-control we keep (pagination, length, the status switch, alerts)
   is re-padded explicitly here.
   ============================================================ */

/* --- compact the legacy shell: reclaim vertical space + give the page breathing room --- */
.tendi-skin .box { background: transparent; border: none; box-shadow: none; margin: 0; padding: 0; }
.tendi-skin .box-content { box-shadow: none !important; }   /* kill the legacy devoops drop shadow */
.tendi-skin .box-header { display: none; }              /* title now lives in the toolbar */
/* horizontal padding → gray gutters so the toolbar + table card float as a contained panel */
.tendi-skin .box-content { padding: 8px 22px 26px; background: transparent; border: none; }
.tendi-skin .table-responsive { overflow: visible; border: none; }   /* inner .tnd-table-scroll owns scrolling */

/* legacy alert messages (messages partial): re-pad after the reset */
.tendi-skin .alert { padding: 11px 15px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; }

.tendi-skin .tnd-list-crumbs { display: none; }   /* title + subtitle carry wayfinding (reference has no crumb) */

/* --- page header: title + subtitle (left) · actions (right) · big search · filter row --- */
/* toolbar = header-text block + filter row, then the gap down to the table
   (tokenized rhythm; see --list-* in tendi-tokens) */
.tendi-skin .tnd-dt-toolbar {
  display: flex; flex-direction: column; gap: var(--list-head-gap);
  margin-bottom: var(--list-head-to-table);
}
.tendi-skin .tnd-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tendi-skin .tnd-page-head-text { min-width: 0; }
/* page title, matches the Tendi-Global "Karla" list-page hero: Inter bold, 28px,
   leading-none, -0.02em (its `font-serif` display class maps to Inter, NOT a separate
   display face, one clean sans for everything; presence comes from size/weight/tracking). */
.tendi-skin .tnd-dt-title {
  margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.05;
  text-transform: capitalize;   /* Title-Case the heading (model labels like "Bus routes" → "Bus Routes") */
}
.tendi-skin .tnd-dt-title i { display: none; }
.tendi-skin .tnd-dt-subtitle { margin: var(--list-title-sub-gap) 0 0; font-size: 14.5px; color: var(--ink-4); font-weight: 400; letter-spacing: -0.005em; }
.tendi-skin .tnd-page-head .btnContainer { margin: 0; display: flex; gap: 10px; flex-shrink: 0; }

/* ---- Users page v4 (mockup parity): icon-tile page-header lockup ----
   The Users page is the new gold reference: a 46px primary-tint icon tile + a Plus Jakarta
   (display) title + subtitle + the Add/Delete actions. Scoped to the `--icon` modifier so the
   shared title-only header on the other list pages is unaffected. Mirrors `.pay-head`. */
.tendi-skin .tnd-page-head--icon { align-items: flex-start; gap: 14px; }
/* pages without a subtitle (most generic pages): vertically centre the tile against the title */
.tendi-skin .tnd-page-head--icon:not(:has(.tnd-dt-subtitle)) { align-items: center; }
.tendi-skin .tnd-page-head--icon .tnd-head-ico {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: var(--primary-tint); color: var(--primary); display: grid; place-items: center;
}
.tendi-skin .tnd-page-head--icon .tnd-head-ico svg { width: 24px; height: 24px; display: block; }
.tendi-skin .tnd-page-head--icon .tnd-page-head-text { flex: 1; min-width: 0; }
.tendi-skin .tnd-page-head--icon .tnd-dt-title { font-family: var(--font-display); font-size: 30px; line-height: 1.05; letter-spacing: -0.022em; }
.tendi-skin .tnd-page-head--icon .tnd-dt-subtitle { font-size: 14px; }
.tendi-skin .tnd-page-head--icon .btnContainer { padding-top: 5px; flex: none; }
/* page-level action buttons (e.g. Children's Import/Export, Generate PDF, More dropdowns) that
   tendi-list.js relocates into the header: laid out inline with the Add/Delete buttons. */
.tendi-skin .tnd-head-actions { display: inline-flex; align-items: center; gap: 10px; }

/* SECONDARY header action (.btn-default next to the page title). A toolbar of three filled violet
   buttons gives every action the same weight; primary is reserved for the ONE that matters (Add).
   Bootstrap's bare .btn-default renders transparent in here, so it needs a real treatment: paper
   fill, hairline edge, violet on hover — the same secondary look Settings uses. */
.tendi-skin .tnd-head-actions .btn-default {
  background: var(--paper-2) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--paper-edge-strong) !important;
  box-shadow: none !important;
}
.tendi-skin .tnd-head-actions .btn-default:hover,
.tendi-skin .tnd-head-actions .btn-default:focus,
.tendi-skin .tnd-head-actions .open > .btn-default.dropdown-toggle {
  background: var(--cream-2) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.tendi-skin .tnd-head-actions .btn-default .fa,
.tendi-skin .tnd-head-actions .btn-default svg { color: inherit; }
/* keep Children's raw action bar hidden so it never FLASHES in its pre-relocation spot above the
   box; tendi-list.js moves its buttons into the header (.tnd-page-head) once the table has drawn. */
.tendi-skin .children-action-bar { display: none; }

/* ---- page-head action DROPDOWN MENUS (Import/Export, Generate PDF, More) ----
   The relocated Bootstrap .dropdown-menu had NO skin styling: it picked up the legacy dark
   style.css theme (`background:#352D7D !important` on items) and the fa→svg icon swap left the
   menu-item SVGs unsized (100% width → giant glyphs). Restyle as a floating skin panel:
   !important where needed to beat the legacy !important rules. */
.tendi-skin .tnd-page-head .btn-group { position: relative; }
.tendi-skin .tnd-page-head .dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; float: none; z-index: 3000;
  min-width: 232px; margin: 0; padding: 6px; display: none;
  background: var(--paper-2) !important; border: 1px solid var(--paper-edge) !important;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay) !important;
}
.tendi-skin .tnd-page-head .open > .dropdown-menu { display: block; }
.tendi-skin .tnd-page-head .dropdown-menu > li > a {
  display: flex !important; align-items: center; gap: 10px;
  padding: 9px 12px !important; border-radius: 9px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink-2) !important; background: transparent !important;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .13s, color .13s;
}
.tendi-skin .tnd-page-head .dropdown-menu > li > a:hover,
.tendi-skin .tnd-page-head .dropdown-menu > li > a:focus { background: var(--cream) !important; color: var(--ink) !important; }
/* menu-item icons: size BOTH the raw fa <i> and the tendi-list swapped stroked <svg> */
.tendi-skin .tnd-page-head .dropdown-menu > li > a i { width: 15px; text-align: center; color: var(--ink-4); font-size: 13px; flex: none; }
.tendi-skin .tnd-page-head .dropdown-menu svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); }
.tendi-skin .tnd-page-head .dropdown-menu > li > a:hover svg,
.tendi-skin .tnd-page-head .dropdown-menu > li > a:hover i { color: var(--primary); }
.tendi-skin .tnd-page-head .dropdown-menu .divider { height: 1px; margin: 6px 4px; padding: 0; background: var(--paper-edge); border: 0; }
/* the Moodnote date field embedded in the Generate PDF menu */
.tendi-skin .tnd-page-head .dropdown-menu .moodnote-date-wrap { padding: 6px 12px 8px; }
.tendi-skin .tnd-page-head .dropdown-menu .moodnote-date-wrap label {
  display: block; margin: 0 0 5px; font-family: var(--font-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4);
}
.tendi-skin .tnd-page-head .dropdown-menu .moodnote-date-wrap input {
  width: 100%; height: 34px; padding: 0 10px; background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}
.tendi-skin .tnd-page-head .dropdown-menu .moodnote-date-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* the swapped date input's calendar glyph was white-inverted for the legacy dark menu: undo */
.tendi-skin .tnd-page-head .dropdown-menu .moodoteDate::-webkit-calendar-picker-indicator { filter: none; }

/* big elevated search bar (full width) */
.tendi-skin .tnd-search-card { width: 100%; }
.tendi-skin .tnd-dt-search { position: relative; width: 100%; }
.tendi-skin .tnd-dt-search > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 15px; pointer-events: none; }
.tendi-skin .tnd-dt-search input {
  width: 100%; height: 54px; padding: 0 54px 0 50px; background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: 14px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); font-weight: 450; box-shadow: var(--shadow-sm);
}
.tendi-skin .tnd-dt-search input::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin .tnd-dt-search input:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .tnd-dt-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-dt-search-hint {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-4); font-weight: 600;
  background: var(--cream-2); border: 1px solid var(--paper-edge); border-radius: 7px; padding: 3px 9px; line-height: 1.3;
  pointer-events: none; transition: opacity 0.15s; box-shadow: none;   /* kill Bootstrap's kbd inset shadow */
}
.tendi-skin .tnd-dt-search input:focus ~ .tnd-dt-search-hint,
.tendi-skin .tnd-dt-search input:not(:placeholder-shown) ~ .tnd-dt-search-hint { opacity: 0; }

/* filter row above the table */
.tendi-skin .tnd-filter-row { display: flex; align-items: center; gap: 12px; }
/* segmented status filter */
.tendi-skin .tnd-seg { display: inline-flex; height: 40px; background: var(--cream-2); border: 1px solid var(--paper-edge); border-radius: 11px; padding: 4px; gap: 2px; }
.tendi-skin .tnd-seg-btn {
  display: inline-flex; align-items: center; padding: 0 16px; border-radius: 8px; font-family: var(--font-sans); font-size: 13px;
  letter-spacing: -0.005em; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.tendi-skin .tnd-seg-btn:hover { color: var(--ink); }
.tendi-skin .tnd-seg-btn.is-active { background: var(--paper-2); color: var(--primary); box-shadow: var(--shadow-sm); }

/* action buttons: 40px height, forest-green primary + ghost danger */
.tendi-skin .tnd-dt-toolbar .btnContainer { display: flex; gap: 10px; }
.tendi-skin .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; transition: all 0.15s; border: 1px solid transparent; line-height: 1; white-space: nowrap;
  text-transform: capitalize;   /* Title-Case every button label (first letter of each word) */
}
/* neutralise the legacy devoops `.btn-label-left span` (padding:7px + position:relative left:-10px),
   which doubled the icon→label gap. The flex `gap:7px` on `.btn` now owns the spacing (= the mockup). */
.tendi-skin .btn span { display: inline-flex; align-items: center; padding: 0; position: static; left: auto; }
.tendi-skin .btn span i { font-size: 12px; }
/* Stroked SVG button icons. Without an explicit size an inline <svg> in a flex row has no intrinsic
   box to lay out against and renders at whatever the viewBox suggests, which is far too big. Sized
   to sit with the 12px glyphs the older buttons still use, so a page part-way through conversion
   does not look ragged. */
.tendi-skin .btn span svg { width: 15px; height: 15px; display: block; flex: none; }
/* A settings row that offers more than one action: wraps on a narrow screen instead of pushing the
   help text sideways. */
.tendi-skin .tnd-set-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* A styled file picker. The native control renders as a grey browser box that ignores the design
   system entirely, so the real <input type=file> is hidden and this label stands in for it. */
.tendi-skin .tnd-file { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px;
	border: 1px dashed var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2);
	color: var(--ink-3); font-size: 13.5px; font-weight: 500; cursor: pointer; max-width: 320px;
	transition: border-color .15s, background .15s, color .15s; }
.tendi-skin .tnd-file:hover { border-color: var(--primary); background: var(--cream-2); color: var(--primary); }
.tendi-skin .tnd-file svg { width: 16px; height: 16px; flex: none; }
.tendi-skin .tnd-file.has-file { border-style: solid; border-color: var(--primary); color: var(--ink); font-weight: 600; }
.tendi-skin .tnd-file .tnd-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Preview of an already-stored image. */
.tendi-skin .tnd-img-preview { margin-top: 10px; display: inline-block; padding: 8px; background: var(--paper-2);
	border: 1px solid var(--paper-edge); border-radius: var(--radius-md); }
.tendi-skin .tnd-img-preview img { display: block; max-width: 150px; height: auto; border-radius: var(--radius-sm); }
.tendi-skin .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tendi-skin .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tendi-skin .btn-danger { background: var(--paper-2); color: var(--critical); border-color: var(--paper-edge-strong); box-shadow: var(--shadow-sm); }
.tendi-skin .btn-danger:hover { background: var(--critical); color: #fff; border-color: var(--critical); }

/* ============================================================
   GENERIC LIST PAGES (.tnd-list-generic): the page header (title + subtitle + actions)
   is now rendered by the SHARED partial `common/inc/list_header.php` (a
   .tnd-dt-toolbar > .tnd-page-head, identical to the Users reference) → ONE source of
   truth, no parallel title styling. The legacy .box-header stays hidden by the global
   `.tendi-skin .box-header { display:none }` above. The shared .tnd-dt-foot / table /
   pager / loader / popup styles all still apply.
   ============================================================ */

/* ---- filter bar: lay the page's filter dropdowns (Branch/Class/Type, moved up by
   consolidateFilters) + Show-trashed into ONE clean, labeled, aligned row ---- */
/* ===== unified filter row, applies whether a page wraps filters in #frmBatchOperations OR in a
   plain .box-content row (e.g. Tax Credit), so field widths / spacing / labels are IDENTICAL on
   every datatable page ===== */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row,
.tendi-skin.tnd-list-generic .box-content .row:has(> [class*="col-sm-"].textbox-form) {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 14px;
}
/* ---- the DataTables search, moved INTO the filter row by consolidateFilters and wrapped as a
   `.tnd-dt-search.tnd-inrow` pill so it matches the Users search (magnifier + "/" keycap). Sits on
   the same row as the dropdowns, bottom-aligned with their fields. ---- */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow {
  position: relative; flex: 0 0 auto; width: 250px; max-width: 100%; margin: 0;
}
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input {
  width: 100%; height: 42px; padding: 0 38px 0 40px; box-sizing: border-box; margin: 0;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); font-weight: 450; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input:hover { border-color: var(--paper-edge-strong); }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none;
}
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow .tnd-dt-search-hint {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--ink-4);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); border-radius: 7px; box-shadow: none;
  transition: opacity .15s;
}
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input:focus ~ .tnd-dt-search-hint,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-dt-search.tnd-inrow input:not(:placeholder-shown) ~ .tnd-dt-search-hint { opacity: 0; }
/* once the search has moved into the row, the DataTables `f` strip is empty: collapse it */
.tendi-skin.tnd-list-page .tnd-dt-toolbar2:not(:has(input)) { display: none; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row > [class*="col-sm-"],
.tendi-skin.tnd-list-generic .box-content .row:has(> [class*="col-sm-"].textbox-form) > [class*="col-sm-"] {
  float: none; width: auto; min-width: 0; max-width: none; padding: 0; margin: 0;
}
/* every filter label → ONE style (was 9.5px for moved filters vs 11px for .control-label, now unified) */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .control-label,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-moved-filter > label,
.tendi-skin.tnd-list-generic .box-content .textbox-form > label {
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 6px; line-height: 1.1; cursor: default; display: block;
}
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-moved-filter > label { display: flex; flex-direction: column; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .tnd-moved-filter br { display: none; }
/* ONE filter-field width on every page: wide enough to read the dropdown items */
.tendi-skin.tnd-list-generic .textbox-form .tnd-select { width: 184px; min-width: 184px; }
/* filter dropdown panels grow to fit their option text (so long branch/class names are readable) */
.tendi-skin.tnd-list-generic .textbox-form .tnd-select .tnd-select-menu { min-width: 100%; width: max-content; max-width: 340px; right: auto; }
/* Children's Branch filter is a legacy select2 MULTI-select (branches[]): restyle its box to match
   the .tnd-select dropdowns (clean field, "All" placeholder, chevron, violet chips when selected) */
.tendi-skin.tnd-list-generic .textbox-form .select2-container.branches {
  width: 184px !important; min-width: 184px; min-height: 40px; position: relative; display: block;
  border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-md) !important; background: var(--paper-2) !important; box-shadow: none !important;
}
.tendi-skin.tnd-list-generic .select2-container.branches.select2-container-active,
.tendi-skin.tnd-list-generic .select2-container.branches:hover { border-color: var(--primary) !important; }
.tendi-skin.tnd-list-generic .select2-container.branches .select2-choices {
  position: static; min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0; padding: 4px 32px 4px 10px; list-style: none;
  border: none !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.tendi-skin.tnd-list-generic .select2-container.branches::after {
  content: ""; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; z-index: 1;
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a93ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.tendi-skin.tnd-list-generic .select2-container.branches .select2-choices:not(:has(.select2-search-choice))::before {
  content: "All"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 13.5px; pointer-events: none;
}
.tendi-skin.tnd-list-generic .select2-container.branches .select2-search-choice {
  margin: 0; padding: 2px 7px 2px 9px; background: var(--primary-tint); border: 1px solid var(--primary); border-radius: var(--radius-full);
  color: var(--primary); font-size: 12px; font-weight: 600; line-height: 1.4; display: inline-flex; align-items: center; gap: 5px; cursor: default;
}
.tendi-skin.tnd-list-generic .select2-container.branches .select2-search-choice div { padding: 0; }
.tendi-skin.tnd-list-generic .select2-container.branches .select2-search-choice-close {
  position: static; display: inline-block; width: 12px; height: 12px; margin: 0; top: auto; right: auto; opacity: 0.7;
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a3fc2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.tendi-skin.tnd-list-generic .select2-container.branches .select2-search-field input.select2-input {
  height: 24px; min-height: 0; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink);
}
/* Show-trashed → tidy chip aligned to the dropdown baseline (kill the legacy inline margin-top hack) */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row > [class*="col-sm-"]:has(.checkbox-inline) { margin-top: 0 !important; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .checkbox-inline { margin: 0; padding: 0; height: 42px; display: inline-flex; align-items: center; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .checkbox-inline label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ===== unified toolbar filter chips =====
   Every above-table boolean filter (Show trashed, log types, etc.) becomes one pill component,
   matching the Children filter row. enhanceFilterChips() in tendi-list.js adds .tnd-filter-chip to
   each toolbar checkbox <label>. !important is needed to beat the legacy #frmBatchOperations rules. */
.tendi-skin.tnd-list-generic label.tnd-filter-chip {
  display: inline-flex !important; align-items: center; gap: 6px; vertical-align: middle;
  margin: 0 8px 7px 0 !important; padding: 7px 14px !important;
  border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-full) !important;
  background: var(--paper-2) !important; color: var(--ink-2) !important;
  font-family: var(--font-sans); font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.15 !important;
  height: auto !important; cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.tendi-skin.tnd-list-generic label.tnd-filter-chip:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.tendi-skin.tnd-list-generic label.tnd-filter-chip input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none; }
.tendi-skin.tnd-list-generic label.tnd-filter-chip > i { display: none !important; }   /* legacy fake-checkbox glyph */
.tendi-skin.tnd-list-generic label.tnd-filter-chip.is-on { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(95,67,178,.22) !important; }
.tendi-skin.tnd-list-generic label.tnd-filter-chip.is-on::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* align the Children page's bespoke .filter-chip (predates the shared component) to the v4 tokens */
.tendi-skin.tnd-list-generic .children-filter-chips .filter-chip:hover { border-color: var(--primary); color: var(--primary); }
/* A selected chip MUST state its own text colour. It only set a purple background, so the :hover
   rule above kept applying color:var(--primary) on top of it: purple on purple, and the label
   disappeared the moment you moved the mouse over a filter you had turned on. */
.tendi-skin.tnd-list-generic .children-filter-chips .filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(95,67,178,.22); }
.tendi-skin.tnd-list-generic .children-filter-chips .filter-chip.active:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
/* a lone chip (e.g. "Show trashed") sharing the filter-dropdown row → bottom-align with the dropdowns */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .checkbox-inline:has(.tnd-filter-chip) { height: auto !important; align-items: flex-end; }

/* Legacy DIRECT-child .btnContainer (the few emptied ones left in box-content): kept tidy.
   The header's own .btnContainer (inside .tnd-page-head, via the shared partial) is NOT a
   direct child, so it uses the shared `.tnd-page-head .btnContainer` rule → identical button
   placement on Users + every generic page. */
.tendi-skin.tnd-list-generic .box-content > .btnContainer { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 14px; padding: 0; }

/* DataTables search (the `f` control) → a clean pill in its own toolbar row */
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 { margin: 0 0 14px; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter { margin: 0; text-align: left; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter label:has(input[type="search"]),
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter label:has(input.custom-search-input) { margin: 0; font-size: 0; color: transparent; display: inline-flex; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input {
  width: 320px; max-width: 100%; height: 40px; margin: 0; padding: 0 16px 0 40px;
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-full); font-family: var(--font-sans);
  font-size: 14px; color: var(--ink); font-weight: 450; -webkit-appearance: none; appearance: none;
}
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input:hover { border-color: var(--paper-edge-strong); }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* "/" keycap hint on the generic list search (matches the Users search) */
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter label { position: relative; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter input { padding-right: 42px; }
.tendi-skin.tnd-list-page .tnd-dt-toolbar2 .dataTables_filter .tnd-dt-search-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--ink-4);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); border-radius: 7px;
  box-shadow: none;   /* kill Bootstrap's `kbd { box-shadow: inset 0 -1px 0 rgba(0,0,0,.25) }` */
}
/* the search input's focus ring must not get clipped on its top/left by the DataTables
   wrapper (legacy overflow:hidden), the table scrolls inside .tnd-table-scroll, so the
   wrapper can overflow visibly. (Users is unaffected: its search sits outside this wrapper.) */
.tendi-skin.tnd-list-page .dataTables_wrapper { overflow: visible; }

/* generic list-page filter controls (native selects/inputs some pages place above the table).
   Scoped to the filter row / textbox-form wrappers so it never touches the foot length select. */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row input.form-control,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row select.form-control,
.tendi-skin.tnd-list-generic .box-content .textbox-form input.form-control,
.tendi-skin.tnd-list-generic .box-content .textbox-form select.form-control {
  height: 40px; width: 184px; min-width: 184px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 12px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none; max-width: 100%;
}
/* date/text filter inputs → same 184px as the dropdowns (uniform field width) */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row input.form-control[name*="date" i],
.tendi-skin.tnd-list-generic .box-content .textbox-form input.form-control[name*="date" i] { width: 184px; }
/* …and their nested .col-sm-12 wrapper must lay the date columns side-by-side (auto width + gap) so
   the inputs don't overflow the narrow grid columns and overlap each other */
.tendi-skin.tnd-list-generic #frmBatchOperations .col-sm-12.no-padding:has(.textbox-form input[name*="date" i]) { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.tendi-skin.tnd-list-generic #frmBatchOperations .col-sm-12.no-padding:has(.textbox-form input[name*="date" i]) > .textbox-form { width: auto; float: none; padding: 0; margin: 0; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row textarea.form-control { height: auto; padding: 8px 12px; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row .form-control:focus,
.tendi-skin.tnd-list-generic .box-content .textbox-form .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row label.control-label,
.tendi-skin.tnd-list-generic .box-content .textbox-form > label { display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 5px; }
/* checkbox/radio filter labels stay INLINE with a gap (don't take the block field-label treatment) */
.tendi-skin.tnd-list-generic .box-content .checkbox-inline { display: inline-flex; align-items: center; }
.tendi-skin.tnd-list-generic .box-content .checkbox-inline label,
.tendi-skin.tnd-list-generic .box-content .checkbox label,
.tendi-skin.tnd-list-generic .box-content .radio label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 500; text-transform: none; letter-spacing: 0; }
.tendi-skin.tnd-list-generic .box-content .checkbox-inline input[type="checkbox"],
.tendi-skin.tnd-list-generic .box-content .checkbox-inline input[type="radio"],
.tendi-skin.tnd-list-generic .box-content .checkbox input { position: static; margin: 0; flex-shrink: 0; }
/* the filter row sits above the table as a tidy wrap */
.tendi-skin.tnd-list-generic #frmBatchOperations > .row { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 14px; align-items: flex-end; }
.tendi-skin.tnd-list-generic #frmBatchOperations > .row > [class*="col-sm-"] { width: auto; min-width: 150px; padding: 0; float: none; }

/* ============================================================
   TABLE CARD + STICKY HEADER + CLEAN ROWS (no zebra)
   ============================================================ */
.tendi-skin .tnd-table-scroll {
  max-height: calc(100vh - 264px); overflow: auto;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-2xl); background: var(--paper-2);
}
.tendi-skin .tnd-table-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.tendi-skin .tnd-table-scroll::-webkit-scrollbar-thumb { background: var(--paper-edge-strong); border-radius: 6px; border: 3px solid var(--paper-2); }

.tendi-skin table.tnd-list-table {
  width: 100%; border-collapse: collapse; background: var(--paper-2);
  font-size: 14px; color: var(--ink-2); letter-spacing: -0.006em;
  border: none;   /* drop the legacy bootstrap 1px #ddd table border. It doubled up against
                     the rounded container's border on the straight edges (the corner showed
                     only the container's 1px, so the edges read as "thicker than the radius") */
}

/* sticky header: quiet warm-gray band, micro-caps */
.tendi-skin table.tnd-list-table thead th {
  position: sticky; top: -1px; z-index: 5;
  box-shadow: 0 -2px 0 var(--cream-2);   /* mask the sub-pixel sliver of rows above the stuck header */
  background: var(--cream-2); color: var(--ink-3);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  text-align: left; vertical-align: middle; padding: 15px 18px; border: none; border-bottom: 1px solid var(--paper-edge);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.tendi-skin table.tnd-list-table thead th[data-orderable="false"] { cursor: default; }
.tendi-skin table.tnd-list-table thead th:hover:not([data-orderable="false"]) { color: var(--ink-2); }

/* body cells: flat, no zebra, comfortable height, hairline row separators */
.tendi-skin table.tnd-list-table tbody td {
  padding: 15px 18px; border: none; border-bottom: 1px solid var(--paper-edge); background: var(--paper-2);
  vertical-align: middle; color: var(--ink-3);
}
.tendi-skin table.tnd-list-table tbody tr:last-child td { border-bottom: none; }
/* kill Bootstrap .table-striped zebra explicitly (both parities → solid white) */
.tendi-skin table.tnd-list-table tbody tr:nth-of-type(odd) td,
.tendi-skin table.tnd-list-table tbody tr:nth-of-type(even) td { background: var(--paper-2); }
/* whole row is clickable → pointer + hover wash.
   !important: legacy style.css `.table-hover>tbody>tr:hover>td` paints a TRANSLUCENT gray
   (rgba(219,219,219,.3) !important) that both reads wrong AND lets columns scrolled under the
   sticky Action cell bleed through it: outrank it with the opaque cream wash. */
.tendi-skin table.tnd-list-table tbody tr { cursor: pointer; transition: background 0.12s; }
.tendi-skin table.tnd-list-table tbody tr:hover td,
.tendi-skin table.tnd-list-table.table-hover > tbody > tr:hover > td { background: var(--cream) !important; }
/* trashed records (surfaced by the "Show trashed" filter): a QUIET critical-tint wash + muted
   name ink, replacing the legacy saturated inline #d78080 solid (the pages' rowCallback now just
   adds this class). Hover deepens the tint slightly so the row still responds. */
.tendi-skin table.tnd-list-table tbody tr.tnd-row-trashed td { background: var(--critical-tint) !important; }
.tendi-skin table.tnd-list-table tbody tr.tnd-row-trashed:hover td { background: color-mix(in srgb, var(--critical) 9%, var(--critical-tint)) !important; }
.tendi-skin table.tnd-list-table tbody tr.tnd-row-trashed .tnd-user-name { color: var(--ink-3); }
/* opted-out lists (.tnd-no-rowpane, e.g. read-only Logs): rows aren't clickable → no pointer affordance */
.tendi-skin.tnd-no-rowpane table.tnd-list-table tbody tr { cursor: default; }
.tendi-skin table.tnd-list-table tbody td.text-center,
.tendi-skin table.tnd-list-table thead th.text-center { text-align: center; }

/* ---- Users table v4 (mockup parity): tighter density + type scale than the shared default.
   Applies to ALL reskinned list pages (Users + generic): unified v4 table styling. Was the
   density until the v4 direction is rolled out to them. Mirrors .pay-table. ---- */
.tendi-skin.tnd-list-page table.tnd-list-table { font-size: 13px; }
.tendi-skin.tnd-list-page table.tnd-list-table thead th { font-size: 10px; letter-spacing: 0.06em; font-weight: 700; padding: 11px 11px; }
.tendi-skin.tnd-list-page table.tnd-list-table tbody td { padding: 12px 11px; color: var(--ink-2); }
/* Users table frame: mockup `.pay-tablewrap > .pay-scroll`. An outer `.tnd-table-clip` owns the
   border + rounded corners with overflow:hidden, so the inner scroll's native scrollbar CANNOT
   square off the top corner or paint over the border. The scroll element drops its own frame and
   floats its thumb on a transparent track (no white ring). */
.tendi-skin.tnd-list-page .tnd-table-clip {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-xl); overflow: hidden;
}
.tendi-skin.tnd-list-page .tnd-table-clip .tnd-table-scroll { border: 0; border-radius: 0; background: transparent; }
.tendi-skin.tnd-list-page .tnd-table-scroll::-webkit-scrollbar-track { background: transparent; }
.tendi-skin.tnd-list-page .tnd-table-scroll::-webkit-scrollbar-thumb { background: var(--paper-edge-strong); background-clip: padding-box; border: 3px solid transparent; }

/* ---- empty-state: shown in the table body when a search/filter returns no rows. Rendered via
   DataTables `zeroRecords`/`emptyTable` into `td.dataTables_empty` (Users init in tendi-users.js):
   a soft icon tile + title + hint, centred in the cell. ---- */
.tendi-skin td.dataTables_empty { padding: 0 !important; background: var(--paper-2) !important; border: 0 !important; text-align: center; }
/* no row-hover effect on the empty-state (beats legacy `.table-hover ... td { …!important }` via higher specificity) */
.tendi-skin table.tnd-list-table tbody tr:hover td.dataTables_empty,
.tendi-skin table.tnd-list-table tbody tr:hover > td.dataTables_empty { background-color: var(--paper-2) !important; cursor: default; }
.tendi-skin .tnd-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 54px 20px 58px; text-align: center; }
.tendi-skin .tnd-empty-ico { width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--cream-2); color: var(--ink-4); display: grid; place-items: center; margin-bottom: 6px; }
.tendi-skin .tnd-empty-ico svg { width: 25px; height: 25px; }
.tendi-skin .tnd-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink-2); }
.tendi-skin .tnd-empty-sub { font-size: 13px; color: var(--ink-4); font-weight: 450; }
/* Generic list pages: each header label must sit directly above its (left-aligned) data.
   Legacy per-view markup adds .text-center / .table-heading centering, which floats labels
   like NAME to the column centre, away from the left-aligned cell content. Force left for
   every header + cell here (Users (.tnd-list-page without .tnd-list-generic), already left,
   untouched). The selection checkbox column stays centered. */
.tendi-skin.tnd-list-generic table.tnd-list-table thead th,
.tendi-skin.tnd-list-generic table.tnd-list-table tbody td { text-align: left !important; }
.tendi-skin.tnd-list-generic table.tnd-list-table thead th:first-child,
.tendi-skin.tnd-list-generic table.tnd-list-table tbody td:first-child { text-align: center !important; }

/* sortable columns → pretty chevron sort icons (th is position:sticky, so ::after anchors to it) */
.tendi-skin table.tnd-list-table thead th.sorting_asc,
.tendi-skin table.tnd-list-table thead th.sorting_desc { color: var(--ink); }
/* icon sits inline, right next to the label */
.tendi-skin table.tnd-list-table thead th.sorting::after,
.tendi-skin table.tnd-list-table thead th.sorting_asc::after,
.tendi-skin table.tnd-list-table thead th.sorting_desc::after {
  content: ""; display: inline-block; vertical-align: middle; width: 13px; height: 14px; margin: -2px 0 0 6px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.tendi-skin table.tnd-list-table thead th.sorting::after { opacity: 0.65; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2016'%3E%3Cpath%20d='M3.5%206%207%203%2010.5%206'%20fill='none'%20stroke='%239a93ad'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M3.5%2010%207%2013%2010.5%2010'%20fill='none'%20stroke='%239a93ad'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tendi-skin table.tnd-list-table thead th.sorting_asc::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M3.5%208.5%207%205%2010.5%208.5'%20fill='none'%20stroke='%235a3fc2'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tendi-skin table.tnd-list-table thead th.sorting_desc::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M3.5%205.5%207%209%2010.5%205.5'%20fill='none'%20stroke='%235a3fc2'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --- per-column sizing (assessed widths; shrink on smaller screens) --- */
.tendi-skin .tnd-col-id    { display: none; }   /* id now reads as a sub-line under the name */
.tendi-skin td.tnd-col-name  { min-width: 160px; font-weight: 600; color: var(--ink); }
.tendi-skin .tnd-col-uname { width: 160px; }
.tendi-skin td.tnd-col-uname { color: var(--ink-3); font-weight: 500; }
.tendi-skin td.tnd-col-email { color: var(--ink-4); }
.tendi-skin .tnd-col-email { min-width: 180px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-col-type  { width: 130px; }
.tendi-skin .tnd-col-status{ width: 100px; }
.tendi-skin .tnd-col-action{ width: 64px; }

/* Type as a quiet neutral badge (wrapped client-side in tendi-users.js drawCallback) */
.tendi-skin td.tnd-col-type { text-align: center; }
.tendi-skin .tnd-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3); border: 1px solid var(--paper-edge);
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em; text-transform: capitalize; line-height: 1.4;
}
/* inline-editable Notes cell (.tnd-note, formerly .child_note): a quiet, clickable note that edits in place (no modal/pane) */
.tendi-skin.tnd-list-generic .tnd-note,
.tendi-skin.tnd-list-generic .child_note { display: inline-block; max-width: 100%; text-align: left; vertical-align: middle; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); cursor: text; padding: 5px 9px; border-radius: var(--radius-md); border: 1px solid transparent; white-space: normal; overflow: hidden; text-overflow: ellipsis; transition: background .14s, border-color .14s; }
.tendi-skin.tnd-list-generic .tnd-note:hover { background: var(--cream); border-color: var(--paper-edge); }
.tendi-skin.tnd-list-generic .tnd-note.is-empty { color: var(--ink-5); font-style: italic; }
.tendi-skin.tnd-list-generic .tnd-note-edit { width: 100%; min-height: 52px; border: 1px solid var(--primary); border-radius: var(--radius-md); background: var(--paper-2); font: inherit; font-size: 12.5px; color: var(--ink); padding: 7px 9px; resize: vertical; box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.tendi-skin.tnd-list-generic .tnd-note-saving { color: var(--ink-4); font-style: italic; font-size: 12px; }

/* Name → two-line "Name / #id" cell (wrapped client-side) */
.tendi-skin .tnd-user { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tendi-skin .tnd-user-name { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-user-id { font-size: 12px; color: var(--ink-5); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* secondary line under a row name (e.g. a branch's friendly name): lighter + slightly smaller */
.tendi-skin .tnd-user-sub { font-size: 12.5px; color: var(--ink-4); font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   SELECTION GUTTER (left rail; checkboxes hidden until the header
   checkmark toggle is clicked: "checkmarks outside the table")
   ============================================================ */
.tendi-skin .tnd-check-th,
.tendi-skin td.tnd-check-cell {
  width: 46px; min-width: 46px; padding: 0 !important; text-align: center; vertical-align: middle;
  background: transparent !important; border-right: none !important; border-bottom-color: var(--paper-edge) !important;
}
.tendi-skin .tnd-check-th { background: var(--cream-2) !important; border-bottom: 1px solid var(--paper-edge) !important; }

/* header bulk-select icon button (swaps to the select-all checkbox in select mode) */
.tendi-skin .tnd-select-toggle {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-4); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tendi-skin .tnd-select-toggle svg { width: 17px; height: 17px; display: block; }
.tendi-skin .tnd-select-toggle:hover { background: var(--paper-2); color: var(--primary); }
.tendi-skin .tnd-select-toggle.is-on { background: var(--primary-tint); color: var(--primary); }

/* custom DRAWN checkbox: header "select all" + per-row select (the real design-system mark) */
.tendi-skin .tnd-cbox { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }
.tendi-skin .tnd-cbox input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tendi-skin .tnd-cbox-box {
  position: relative; width: 19px; height: 19px; flex-shrink: 0; border-radius: 6px;
  background: var(--paper-2); border: 1.5px solid var(--paper-edge-strong); transition: background 0.15s, border-color 0.15s;
}
.tendi-skin .tnd-cbox-box::after {
  content: ""; position: absolute; left: 6.5px; top: 3px; width: 4px; height: 8px;
  border: solid var(--paper-2); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.12s;
}
.tendi-skin .tnd-cbox:hover .tnd-cbox-box { border-color: var(--primary); }
.tendi-skin .tnd-cbox input:checked + .tnd-cbox-box { background: var(--primary); border-color: var(--primary); }
.tendi-skin .tnd-cbox input:checked + .tnd-cbox-box::after { opacity: 1; }
.tendi-skin .tnd-cbox input:focus-visible + .tnd-cbox-box { box-shadow: 0 0 0 3px var(--focus-ring); }

/* reveal logic: header icon <-> select-all swap; row selects appear only in select mode */
.tendi-skin .tnd-check-th .tnd-markall { display: none; }
.tendi-skin td.tnd-check-cell .tnd-cbox { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.tendi-skin.tnd-selecting .tnd-check-th .tnd-select-toggle { display: none; }
.tendi-skin.tnd-selecting .tnd-check-th .tnd-markall { display: inline-flex; }
.tendi-skin.tnd-selecting td.tnd-check-cell .tnd-cbox { opacity: 1; pointer-events: auto; }

/* ---- Users page v4: ONE-STEP, always-visible selection (mockup parity) ----
   No reveal "two-step": the row checkboxes + the header select-all are always shown, and the legacy
   `.tnd-select-toggle` icon is removed from the markup. Clicking the header select-all checks every
   row AND fetches all matching ids (tendi-users.js → /allIds) so a batch op covers ALL records, not
   just the visible page. The drawn checkbox is sized to the mockup `.usr-cbox` (17px / radius 5px).
   Scoped to Users so the other list pages keep their gutter-reveal until the v4 rollout. */
.tendi-skin.tnd-list-page td.tnd-check-cell .tnd-cbox { opacity: 1; pointer-events: auto; }
.tendi-skin.tnd-list-page .tnd-check-th .tnd-markall { display: inline-flex; }
.tendi-skin.tnd-list-page .tnd-cbox-box { width: 17px; height: 17px; border-radius: 5px; }
.tendi-skin.tnd-list-page .tnd-cbox-box::after { left: 5.5px; top: 2.5px; }

/* ============================================================
   STATUS SWITCH (legacy .toggle-switch in the Status column): reskinned
   to our switch look without touching the markup/JS (input drives toggleSwitch()).
   ============================================================ */
.tendi-skin .tnd-list-table .toggle-switch { width: 40px !important; height: 22px; position: relative; display: inline-block; vertical-align: middle; margin: 0; }
.tendi-skin .tnd-list-table .toggle-switch label { display: block; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tendi-skin .tnd-list-table .toggle-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-inner { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; background: var(--cream-3); background-image: none !important; border-radius: 999px; transition: background 0.18s; }
/* the legacy switch paints "Active"/"Inactive" via pseudo-elements: hide them for a clean switch */
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-inner::before,
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-inner::after { content: ""; display: none; }
/* crisp white knob: force off any legacy gradient/colour */
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-switch { position: absolute; top: 2px; left: 2px; right: auto; width: 18px; height: 18px; background: #fff !important; background-image: none !important; border: none; border-radius: 50%; box-shadow: 0 1px 2px rgba(24,24,27,0.28); transition: left 0.18s; }
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-switch i,
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-switch::before,
.tendi-skin .tnd-list-table .toggle-switch .toggle-switch-switch::after { display: none; }
.tendi-skin .tnd-list-table .toggle-switch input:checked ~ .toggle-switch-inner { background: var(--primary); }
.tendi-skin .tnd-list-table .toggle-switch input:checked ~ .toggle-switch-switch { left: 20px; }

/* ============================================================
   3-DOT ROW ACTION FLYOUT (wraps the preserved Edit/Delete anchors)
   ============================================================ */
.tendi-skin .tnd-rowmenu { position: relative; display: inline-block; }
.tendi-skin .tnd-rowmenu-trigger {
  width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center;
  color: var(--ink-4); cursor: pointer; transition: all 0.15s; font-size: 14px;
}
.tendi-skin .tnd-rowmenu-trigger:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin .tnd-rowmenu.is-open .tnd-rowmenu-trigger { background: var(--cream-2); color: var(--ink); }
/* position:fixed + JS-computed coords so the menu escapes the table's overflow:auto clip */
.tendi-skin .tnd-rowmenu-pop {
  position: fixed; z-index: 2050; display: none; flex-direction: column;
  min-width: 152px; padding: 5px; background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: 11px; box-shadow: var(--shadow-md); text-align: left;
}
.tendi-skin .tnd-rowmenu.is-open .tnd-rowmenu-pop { display: flex; }
/* menu items: neutralise the inherited bootstrap .btn look into list rows */
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start;
  padding: 9px 11px; border-radius: 8px; background: transparent; border: none; box-shadow: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item span { display: inline-flex; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item i { font-size: 12px; color: var(--ink-4); width: 14px; text-align: center; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item:hover { background: var(--cream); color: var(--ink); }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger { color: var(--critical); }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger i { color: var(--critical); }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger:hover { background: var(--critical-tint); color: var(--critical); }

/* ============================================================
   DATATABLES FOOT (info · length · pagination): re-padded + reskinned
   ============================================================ */
/* foot = a pinned bar: info (left) · pager (centered) · length (right) */
.tendi-skin .tnd-dt-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 6px 4px; flex: 0 0 auto; }
.tendi-skin .tnd-dt-info, .tendi-skin .dataTables_info { justify-self: start; font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.tendi-skin .tnd-dt-pages { justify-self: center; }
.tendi-skin .tnd-dt-controls { justify-self: end; display: flex; align-items: center; gap: 12px; }
.tendi-skin .dataTables_length { display: flex; align-items: center; }
.tendi-skin .dataTables_length label { display: inline-flex; align-items: center; gap: 9px; margin: 0; }
.tendi-skin .dataTables_length label::before { content: "Rows per page"; font-size: 12.5px; font-weight: 500; color: var(--ink-4); white-space: nowrap; }
.tendi-skin .dataTables_length select {
  appearance: none; -webkit-appearance: none; height: 34px; padding: 0 32px 0 13px; background: var(--paper-2);
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%203l4%204%204-4'%20fill='none'%20stroke='%236b6480'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; transition: border-color 0.15s, box-shadow 0.15s;
}
.tendi-skin .dataTables_length select:hover { border-color: var(--primary); }
.tendi-skin .dataTables_length select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* generic list rows: action flyout centered (checkbox styling is in the CHECKBOXES & RADIOS block at EOF) */
.tendi-skin.tnd-list-generic table.tnd-list-table td .tnd-rowmenu { display: inline-block; }

/* native <select>s upgraded to the custom .tnd-select dropdown */
.tendi-skin .tnd-dt-controls .tnd-select { width: auto; min-width: 96px; }
/* Rows-per-page pill (foot): FIXED width wide enough to show the widest option ("200") in BOTH the
   trigger and the dropdown menu. The menu is left:0/right:0 of the .tnd-select so it inherits this
   width; too narrow clips the option numbers. No clear "×" (required choice, handled in tendi-dropdown.js). */
.tendi-skin .dataTables_length .tnd-select { width: 90px; min-width: 90px; }
.tendi-skin .dataTables_length .tnd-select .tnd-select-trigger { height: 38px; min-height: 0; padding: 0 12px; gap: 8px; }
.tendi-skin .dataTables_length .tnd-select .tnd-select-label { font-weight: 600; }
/* the menu can grow past the trigger if an option ever needs it, but never shrink below it */
.tendi-skin .dataTables_length .tnd-select .tnd-select-menu { min-width: 100%; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-trigger { border-color: transparent !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; pointer-events: none; font-weight: 600; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-caret,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-clear { display: none !important; }
/* no clear "×" anywhere in a read-only pane (broaden beyond .tnd-pane-edit so the
   cascade dropdowns and bespoke Users pane never show the clear affordance in view) */
.tendi-skin .tnd-pane.is-readonly .tnd-select-clear,
.tendi-skin .tnd-pane.is-readonly .tnd-select-caret { display: none !important; }

/* ---- class-assignment cascade + chip cleanup (component-level) ----
   Legacy get_classes() emits each class as a <label><input><name><i class="far fa-square">.
   Once the label is a violet chip, that leftover square/check glyph is pure clutter: drop it
   in both modes so a chip reads as just its name (violet = selected). */
.tendi-skin .tnd-drawer .checkbox-inline label > i,
.tendi-skin .tnd-drawer .checkbox label > i,
.tendi-skin .tnd-drawer label:has(> input[type="checkbox"]) > i,
.tendi-skin .tnd-drawer label:has(> input[type="radio"]) > i,
.tendi-skin .tnd-classes-wrap label > i,
.tendi-skin .tnd-pane .tnd-classes-wrap label > i { display: none !important; }
/* read-only cascade: show ONLY the selected class chips. The "All" toggle and the
   branch group headers (both .col-sm-12) are an edit-time affordance: hide them in view. */
.tendi-skin .tnd-pane.is-readonly .tnd-classes-wrap .col-sm-12 { display: none !important; }
/* pager: Bootstrap markup is <ul.pagination><li.paginate_button><a>; the visible
   button is the <a>. Scoped !important defeats the legacy bootstrap boxes (§8). */
.tendi-skin .dataTables_paginate { display: inline-flex; align-items: center; }
.tendi-skin .dataTables_paginate ul.pagination { display: inline-flex; align-items: center; gap: 5px; margin: 0 !important; padding: 0 !important; list-style: none; border-radius: 0; }
.tendi-skin .dataTables_paginate .paginate_button { list-style: none; margin: 0 !important; background: none !important; border: none !important; display: inline-flex; }
.tendi-skin .dataTables_paginate .paginate_button > a {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 11px !important; margin: 0 !important;
  border-radius: var(--radius-md) !important; font-family: var(--font-sans); font-size: 13px !important; font-weight: 600; line-height: 1; color: var(--ink-3) !important; cursor: pointer;
  background: transparent !important; background-image: none !important; border: 1px solid transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.tendi-skin .dataTables_paginate .paginate_button > a:hover { background: var(--cream-2) !important; color: var(--ink) !important; }
.tendi-skin .dataTables_paginate .paginate_button.active > a,
.tendi-skin .dataTables_paginate .paginate_button.active > a:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.tendi-skin .dataTables_paginate .paginate_button.disabled > a { color: var(--ink-5) !important; opacity: 0.45; cursor: default; pointer-events: none; }
.tendi-skin .dataTables_paginate .paginate_button.ellipsis > a,
.tendi-skin .dataTables_paginate .paginate_button.ellipsis { color: var(--ink-5) !important; pointer-events: none; }
.tendi-skin .dataTables_paginate .paginate_button.first,
.tendi-skin .dataTables_paginate .paginate_button.last { display: none !important; }
/* prev/next as chevrons */
.tendi-skin .dataTables_paginate .paginate_button.previous > a,
.tendi-skin .dataTables_paginate .paginate_button.next > a { font-size: 0 !important; padding: 0 9px !important; }
.tendi-skin .dataTables_paginate .paginate_button.previous > a::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.tendi-skin .dataTables_paginate .paginate_button.next > a::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ============================================================
   ADMIN SHELL LAYOUT: pin the shell to the viewport so inner regions scroll
   internally (one scrollbar per region), not the whole window. SCOPED via
   :has() to ONLY reskinned full pages (`.tnd-list-page`), so every other
   (un-reskinned) admin page keeps its normal window scroll untouched. The
   navbar is a fixed 50px bar; overrides the legacy faux-column padding (3000px).
   Add the page's marker class here as more pages are reskinned.
   ============================================================ */
/* overflow-y:scroll on <html>, not `overflow:hidden`, so the scrollbar's width stays
   reserved here exactly as it is on every other page (tendi-shell.css sets the same on
   the bare html). These pages scroll internally, so the track is inert, but without it
   a list page reserves 0 and a normal page reserves 15, and every move between the two
   slides the whole shell and the fixed navbar sideways. This selector is (0,1,1) and
   beats the shell's (0,0,1), which is why it has to say it again rather than inherit. */
html:has(.tnd-list-page) { height: 100%; overflow-x: hidden; overflow-y: scroll; }
html:has(.tnd-list-page) body { height: 100%; overflow: hidden; }
/* min-height:0 !important kills devoops' inline `min-height: <innerHeight-49>px` (set once at load,
   never updated on resize), otherwise shrinking the window leaves the shell sized to the STALE
   height and the pinned foot lands below the viewport, unreachable. */
body:has(.tnd-list-page) #main { height: calc(100vh - 50px); min-height: 0 !important; overflow: hidden; }
body:has(.tnd-list-page) #main > .row { height: 100%; }
/* overflow-y:auto (not hidden): when a filter-heavy page (e.g. Children) + the table's min-height
   floor genuinely can't fit the viewport, the page scrolls instead of clipping the table + pager. */
body:has(.tnd-list-page) #content { height: 100%; overflow: hidden auto; display: flex; flex-direction: column; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
body:has(.tnd-list-page) #content > #ajax-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* legacy views append a fixed-height spacer (<div style="height:40px">) + a <script> AFTER the
   .tnd-list-page fragment; that spacer made #content overflow → a 2nd page scrollbar. Let the list
   page flex-fill and collapse anything trailing it, so ONLY the table body (.tnd-table-scroll)
   scrolls, matching the Users page. */
body:has(.tnd-list-page) #content > #ajax-content > .tnd-list-page { flex: 1 1 auto; min-height: 0; }
/* `:not(.modal)` matters: pages keep their Bootstrap modals as siblings AFTER the list fragment, and
   collapsing those meant a modal's backdrop appeared with no dialog (the !important here beats the
   inline display:block Bootstrap sets on open), which reads as a dead grey screen that only a reload
   clears. Modals are position:fixed overlays and never contribute to this flex column, so exempting
   them costs nothing and keeps the spacer/script collapse this rule is actually for. */
body:has(.tnd-list-page) #content > #ajax-content > .tnd-list-page ~ *:not(.modal) { display: none !important; }
body:has(.tnd-list-page) #sidebar-left { height: calc(100vh - 50px); overflow-y: auto; padding-bottom: 16px !important; margin-bottom: 0 !important; }
/* drop the legacy "Tendi © … All Rights Reserved." shell footer on EVERY admin page
   (owner request). `#main footer` matches only the shell's <footer> (modal footers are
   .modal-footer divs, untouched). List pages keep bottom breathing room via
   .tnd-list-page padding-bottom; legacy pages keep their own. */
#main footer, footer.row-fluid { display: none !important; }

/* ============================================================
   LIST PAGE FILLS its content area, only the TABLE BODY scrolls; the foot
   (count + centered pager) stays pinned at the bottom. The legacy bootstrap
   chain is float-based, so flatten it to a flex column.
   ============================================================ */
/* the lavender page owns the top/bottom breathing room (so the legacy gray #content
   padding never shows as a band, and the foot isn't flush to the viewport edge) */
/* overflow VISIBLE (not hidden): with the .tnd-table-scroll min-height floor below, a short
   viewport can make the page's content taller than its pinned 100% height. The excess must
   escape up to #content's overflow-y:auto scroller instead of being clipped unreachable. */
.tendi-skin.tnd-list-page { height: 100%; overflow: visible; display: flex; flex-direction: column; padding-top: 18px; padding-bottom: 32px; }
.tendi-skin.tnd-list-page > .row-fluid,
.tendi-skin.tnd-list-page > .row-fluid > .col-xs-12,
.tendi-skin.tnd-list-page > .col-xs-12,
.tendi-skin.tnd-list-page .box,
.tendi-skin.tnd-list-page .box-content,
.tendi-skin.tnd-list-page #frmBatchOperations,
.tendi-skin.tnd-list-page .tnd-list-tablewrap,
.tendi-skin.tnd-list-page .table-responsive,
.tendi-skin.tnd-list-page .dataTables_wrapper {
  display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; float: none !important;
}
.tendi-skin.tnd-list-page .tnd-dt-toolbar,
.tendi-skin.tnd-list-page .tnd-dt-toolbar2,
.tendi-skin.tnd-list-page .box-header,
.tendi-skin.tnd-list-page .btnContainer,
.tendi-skin.tnd-list-page .breadcrumbs,
.tendi-skin.tnd-list-page .alert,
.tendi-skin.tnd-list-page .form-group { flex: 0 0 auto; }
.tendi-skin.tnd-list-page .tnd-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
/* GUARANTEED table height: on filter-heavy pages (Children) the header bands could squeeze the
   flex-filled table body to a sliver. Floor the CLIP layer (it owns overflow:hidden, a floor on
   the inner scroll alone would just get clipped) at ~5 rows; combined with #content's
   overflow-y:auto the page then scrolls rather than starving the table. (Bus Changes opts out
   below. Its two tables size to content and the whole page scrolls.) */
.tendi-skin.tnd-list-page.tnd-list-generic:not(.tnd-bus-changes) .tnd-table-clip { min-height: 320px; }
/* close residual dead space under the table: the legacy box's bottom padding + the
   empty batch <form>'s trailing form-group (only held a now-unused hidden loader) */
.tendi-skin.tnd-list-page .box-content { padding-bottom: 0 !important; }
.tendi-skin.tnd-list-page #frmBatchOperations > .form-group { margin: 0 !important; }

/* ---- List-page rhythm, generous symmetric gutters + hero top via the --list-* tokens.
   Rolled out to EVERY reskinned list page (Users + generic). ---- */
.tendi-skin.tnd-list-page { padding-top: var(--list-top); padding-bottom: var(--list-bottom); }
.tendi-skin.tnd-list-page .box-content { padding-left: var(--list-gutter); padding-right: var(--list-gutter); padding-top: 0; }
/* (Generic-page legacy .box-header is hidden by the global `.box-header{display:none}`;
   generic pages now render their title via the shared list_header partial.) */

/* ============================================================
   LOADERS: replace the legacy bubblingG panel / gif with a clean spinner.
   The table loader is a soft VEIL over the table so page-changes don't blink
   (it covers the tbody swap). DataTables toggles the element's inline display,
   so we never set display here, only veil + an ::after spinner.
   ============================================================ */
@keyframes tndSpin { to { transform: rotate(360deg); } }

.tendi-skin.tnd-list-page .dataTables_wrapper { position: relative; }   /* anchor for the veil */
.tendi-skin .dataTables_processing {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  background: color-mix(in srgb, var(--paper-2) 60%, transparent) !important;
  border: none !important; box-shadow: none !important; border-radius: var(--radius-2xl) !important;
  z-index: 20 !important; font-size: 0 !important; color: transparent !important;
}
.tendi-skin .dataTables_processing > * { display: none !important; }   /* hide the legacy bubblingG / preloader */
.tendi-skin .dataTables_processing::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--cream-3); border-top-color: var(--primary); animation: tndSpin 0.7s linear infinite;
}

/* batch-ops loader (legacy gif → clean spinner) */
.tendi-skin .loader { text-align: center; padding: 20px 0; }
.tendi-skin .loader img { display: none; }
.tendi-skin .loader::after {
  content: ""; display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--cream-3); border-top-color: var(--primary); animation: tndSpin 0.7s linear infinite;
}

/* ============================================================
   ALERT / CONFIRM POPUP (jAlert / jConfirm): component-level redesign.
   Unscoped IDs (the popup is appended to <body>); tokens are global :root vars.
   ============================================================ */
/* SCOPED via :has() to reskinned pages only, every other admin page keeps the
   legacy popup. (Add each new reskinned page's marker class here, like the shell-pin.) */
body:has(.tnd-list-page) #popup_overlay { background: rgba(24, 24, 27, 0.45) !important; }
body:has(.tnd-list-page) #popup_container {
  min-width: 360px !important; max-width: 420px !important; padding: 0 !important; margin: 0 !important;
  background: var(--paper-2) !important; border: 1px solid var(--paper-edge) !important;
  border-radius: var(--radius-2xl) !important; box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important; overflow: hidden !important;
}
body:has(.tnd-list-page) #popup_title {
  font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 700 !important;
  letter-spacing: -0.01em !important; color: var(--ink) !important; background: none !important; border: none !important;
  padding: 20px 24px 0 !important; margin: 0 !important; cursor: default !important; text-shadow: none !important;
}
body:has(.tnd-list-page) #popup_content { padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; }
body:has(.tnd-list-page) #popup_message {
  padding: 8px 24px 20px !important; margin: 0 !important; font-size: 14px !important; color: var(--ink-2) !important;
  line-height: 1.55 !important; background: none !important;
}
body:has(.tnd-list-page) #popup_panel {
  display: flex !important; flex-direction: row-reverse !important; justify-content: flex-start !important; gap: 10px !important;
  padding: 14px 24px !important; margin: 0 !important; background: var(--cream) !important; border-top: 1px solid var(--paper-edge) !important;
}
body:has(.tnd-list-page) #popup_ok, body:has(.tnd-list-page) #popup_cancel {
  -webkit-appearance: none !important; appearance: none !important; width: auto !important; min-width: 0 !important; height: 38px !important;
  padding: 0 18px !important; margin: 0 !important; border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important;
  cursor: pointer !important; border: 1px solid transparent !important; box-shadow: none !important; transition: background 0.15s, border-color 0.15s;
}
body:has(.tnd-list-page) #popup_cancel { background: var(--paper-2) !important; color: var(--ink-2) !important; border-color: var(--paper-edge-strong) !important; }
body:has(.tnd-list-page) #popup_cancel:hover { background: var(--cream-2) !important; color: var(--ink) !important; }
body:has(.tnd-list-page) #popup_ok { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
body:has(.tnd-list-page) #popup_ok:hover { background: var(--primary-hover) !important; }
body:has(.tnd-list-page) #popup_container.alert-danger #popup_ok { background: var(--critical) !important; border-color: var(--critical) !important; }
body:has(.tnd-list-page) #popup_container.alert-danger #popup_ok:hover { background: var(--critical) !important; filter: brightness(0.94); }

/* ============================================================
   SIDE PANE (row detail + inline quick-edit): right drawer
   ============================================================ */
/* portalled to <body> (above the admin header z=2000 and the .box z=1999) */
.tendi-skin .tnd-pane-scrim { position: fixed; inset: 0; z-index: 3000; background: rgba(24,24,27,0.45); opacity: 0; transition: opacity 0.24s ease; }
.tendi-skin .tnd-pane-scrim.is-open { opacity: 1; }
.tendi-skin .tnd-pane {
  position: fixed; top: 0; right: 0; z-index: 3010; height: 100vh; width: 600px; max-width: 94vw;
  display: flex; flex-direction: column; background: var(--paper-2); border-left: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22,0.61,0.36,1);
}
.tendi-skin .tnd-pane.is-open { transform: translateX(0); }

.tendi-skin .tnd-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 26px 20px; border-bottom: 1px solid var(--paper-edge); flex-shrink: 0; }
.tendi-skin .tnd-pane-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tendi-skin .tnd-pane-heading-text { min-width: 0; }
.tendi-skin .tnd-pane-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-pane-eyebrow { margin-top: 3px; font-size: 13px; color: var(--ink-4); font-weight: 400; }
.tendi-skin .tnd-pane-close { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-4); cursor: pointer; flex-shrink: 0; font-size: 14px; }
.tendi-skin .tnd-pane-close:hover { background: var(--cream-2); color: var(--ink); }
/* Edit / Save / Cancel live fixed at the pane's top-right (head is flex-shrink:0, so it stays put) */
.tendi-skin .tnd-pane-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tendi-skin .tnd-pane-head-actions .btn-sm[hidden] { display: none; }

/* icon tile: rounded square, soft indigo-tint bg, indigo glyph (the reference's signature) */
.tendi-skin .tnd-tile { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--primary-tint); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.tendi-skin .tnd-tile-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 19px; }

.tendi-skin .tnd-pane-body { flex: 1; overflow-y: auto; padding: 22px 26px 28px; }

/* view = icon-tile sections with two-column fields */
.tendi-skin .tnd-pane-view { display: flex; flex-direction: column; }
/* a display:* rule beats the [hidden] UA default, so restore hide-when-hidden explicitly */
.tendi-skin .tnd-pane-view[hidden], .tendi-skin .tnd-pane-edit[hidden] { display: none; }
.tendi-skin .tnd-pane-section { padding: 6px 0 4px; }
.tendi-skin .tnd-pane-section + .tnd-pane-section { border-top: 1px solid var(--paper-edge); margin-top: 22px; padding-top: 22px; }
.tendi-skin .tnd-pane-section-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.tendi-skin .tnd-pane-section-text { min-width: 0; }
.tendi-skin .tnd-pane-section-title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.015em; color: var(--ink); }
.tendi-skin .tnd-pane-section-sub { margin-top: 2px; font-size: 12.5px; color: var(--ink-4); }
.tendi-skin .tnd-pane-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
.tendi-skin .tnd-pane-field { min-width: 0; }
.tendi-skin .tnd-pane-flabel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-4); font-weight: 500; margin-bottom: 6px; }
.tendi-skin .tnd-pane-flabel i { font-size: 12px; color: var(--ink-5); width: 14px; text-align: center; }
.tendi-skin .tnd-pane-fval { font-size: 14.5px; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; word-break: break-word; }
.tendi-skin .tnd-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.tendi-skin .tnd-status-dot.is-active { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.tendi-skin .tnd-status-dot.is-inactive { background: var(--ink-5); box-shadow: 0 0 0 3px var(--cream-2); }

/* tabbed editor */
.tendi-skin .tnd-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--paper-edge); margin-bottom: 18px; }
.tendi-skin .tnd-tab {
  padding: 9px 0; margin: 0 18px -1px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-4);
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; letter-spacing: -0.005em; white-space: nowrap;
}
.tendi-skin .tnd-tab:last-child { margin-right: 0; }
.tendi-skin .tnd-tab:hover { color: var(--ink-2); }
.tendi-skin .tnd-tab.is-active { color: var(--ink); border-bottom-color: var(--primary); }
.tendi-skin .tnd-tabpanel { display: flex; flex-direction: column; gap: 14px; }
.tendi-skin .tnd-tabpanel[hidden] { display: none; }

/* assignment checklists (branches / kitchens / capabilities) */
.tendi-skin .tnd-checklist { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 11px 13px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: 10px; }
.tendi-skin .tnd-chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.tendi-skin .tnd-chk span { user-select: none; }
.tendi-skin .tnd-chk input[type="checkbox"],
.tendi-skin .tnd-classes-wrap input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; margin: 0; flex-shrink: 0; }

/* injected get_classes HTML: neutralise the legacy bootstrap grid into a clean wrap.
   The legacy markup splits the options across SEVERAL sibling .row blocks ("All" alone,
   then header+chips, then more chips), so each .row was its own flex context, chips
   couldn't flow continuously and the lone-"All" row reserved dead height. Make the WRAP
   itself the single flex-wrap and collapse every .row with display:contents, so every
   col (All / branch headers / chips) is a direct item flowing under one even gap. */
.tendi-skin .tnd-classes-wrap { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); }
.tendi-skin .tnd-classes-empty { font-size: 12.5px; color: var(--ink-4); }
.tendi-skin .tnd-classes-wrap .row { display: contents; }
/* spacing is via item MARGINS, NOT flex gap: with display:contents rows, flex `gap`
   reserves a slot for every display:none item too (read-only hides most chips), so the
   first visible chip was pushed in by ~13 phantom gaps and gaps read as uneven. Margins
   only apply to rendered items, so both modes get one clean, even 8px rhythm. */
.tendi-skin .tnd-classes-wrap [class*="col-sm-"] { width: auto; padding: 0; margin: 0 8px 8px 0; float: none; flex: 0 0 auto; }
.tendi-skin .tnd-classes-wrap .col-sm-12 { flex: 0 0 100%; width: 100%; margin-right: 0; }   /* header / "All" → own line */
/* branch group header: a touch more space above to read as a group start */
.tendi-skin .tnd-classes-wrap .col-sm-12.mt-3 { margin-top: 4px; }
/* branch group header (a direct label in a full-width col, e.g. "34U -2") */
.tendi-skin .tnd-classes-wrap .col-sm-12 > label {
  display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
}
/* SVG branch glyph (replaces the legacy "»"): a small building, marking a branch group */
.tendi-skin .tnd-classes-wrap .col-sm-12 > label::before {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l8-4v18M19 21V11l-6-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* each class (and the "All" select-all) → a pill chip; selected = violet */
.tendi-skin .tnd-classes-wrap .checkbox-inline { padding: 0; margin: 0; }
.tendi-skin .tnd-classes-wrap .checkbox-inline label {
  display: inline-flex; align-items: center; margin: 0; cursor: pointer; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--radius-full); background: var(--paper-2); border: 1px solid var(--paper-edge);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tendi-skin .tnd-classes-wrap .checkbox-inline label:hover { border-color: var(--paper-edge-strong); color: var(--ink); }
.tendi-skin .tnd-classes-wrap .checkbox-inline label:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-classes-wrap input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tendi-skin .tnd-classes-wrap .far, .tendi-skin .tnd-classes-wrap .fa-square, .tendi-skin .tnd-classes-wrap i.small { display: none; }

/* photo upload (Profile tab) */
.tendi-skin .tnd-photo { display: flex; align-items: center; gap: 14px; }
.tendi-skin .tnd-photo-preview {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: var(--cream-2); border: 1px solid var(--paper-edge);
  display: grid; place-items: center; color: var(--ink-4); font-size: 22px; transition: opacity 0.15s;
}
.tendi-skin .tnd-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendi-skin .tnd-photo-preview.is-loading { opacity: 0.45; }
.tendi-skin .tnd-photo-btn { cursor: pointer; }
.tendi-skin .tnd-photo-side { min-width: 0; }
.tendi-skin .tnd-photo-hint { font-size: 11px; color: var(--ink-4); margin-top: 7px; line-height: 1.4; }

/* edit form (reuses .field / .toggle-row) */
.tendi-skin .tnd-pane-edit .form-grid { gap: 14px; }
.tendi-skin .tnd-pane-error { margin-top: 14px; padding: 10px 13px; border-radius: 9px; background: var(--critical-tint); border: 1px solid color-mix(in srgb, var(--critical) 24%, transparent); color: var(--critical); font-size: 12.5px; font-weight: 500; }
.tendi-skin .tnd-pane-error[hidden] { display: none; }

/* foot */
.tendi-skin .tnd-pane-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--paper-edge); background: var(--paper); }
.tendi-skin .tnd-pane-fulledit { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.tendi-skin .tnd-pane-fulledit:hover { color: var(--primary); }
.tendi-skin .tnd-pane-actions { display: flex; align-items: center; gap: 8px; }
.tendi-skin .tnd-pane-actions .btn-sm[hidden] { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1340px) {
  .tendi-skin .page-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; padding: 24px 22px 60px; }
  .tendi-skin .pay-type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .tendi-skin .page-body { grid-template-columns: minmax(0, 1fr); }
  .tendi-skin .context-rail { position: static; max-height: none; }
  /* drop the lower-priority columns first */
  .tendi-skin .tnd-col-uname { display: none; }
}
@media (max-width: 980px) {
  .tendi-skin .form-grid { grid-template-columns: 1fr; }
  .tendi-skin .contact-row { grid-template-columns: 1fr; gap: 12px; }
  .tendi-skin .tnd-dt-title { font-size: 22px; }               /* keep the page heading, just smaller */
  .tendi-skin .tnd-dt-search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .tendi-skin .tnd-col-email { display: none; }                /* email folds into the side pane */
  .tendi-skin .tnd-col-id { display: none; }
  .tendi-skin .tnd-table-scroll { max-height: calc(100vh - 300px); }
}

/* ============================================================
   USER-DETAIL PANE: "card-stack, airy" redesign (variant C)
   Presentation layer over the .tnd-pane drawer shell (which still
   owns fixed positioning + slide-in). New classes are `up-` prefixed;
   the existing .tnd-pane-* structures are restyled here. Every colour
   is var(--token); fully flat (no gradients). All JS hooks preserved.
   ============================================================ */

/* --- shell: head = calm eyebrow + actions bar; body = soft canvas so cards float --- */
.tendi-skin .tnd-pane-head { align-items: center; padding: 15px 20px; }
.tendi-skin .up-head-eyebrow {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
}
.tendi-skin .up-head-spacer { flex: 1; }
.tendi-skin .tnd-pane .up-eb-edit { display: none; }
.tendi-skin .tnd-pane.is-editing .up-eb-view { display: none; }
.tendi-skin .tnd-pane.is-editing .up-eb-edit { display: inline; }

.tendi-skin .tnd-pane-body { background: var(--cream); padding: 22px 22px 30px; display: flex; flex-direction: column; gap: 16px; }
.tendi-skin .tnd-pane-view { gap: 16px; }
.tendi-skin .tnd-pane-edit { display: flex; flex-direction: column; gap: 16px; }

/* --- identity header (view) --- */
.tendi-skin .up-identity {
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-sm);
  padding: 30px 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tendi-skin .up-avatar {
  width: 84px; height: 84px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  color: var(--paper-2); letter-spacing: -0.01em; box-shadow: var(--shadow-sm);
  overflow: hidden; flex-shrink: 0; background: var(--plum-deep);
}
.tendi-skin .up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendi-skin .up-avatar.acc-plum { background: var(--plum-deep); }
.tendi-skin .up-avatar.acc-teal { background: var(--teal-deep); }
.tendi-skin .up-avatar.acc-rose { background: var(--rose-deep); }
.tendi-skin .up-avatar.acc-sky { background: var(--sky-deep); }
.tendi-skin .up-avatar.acc-lavender { background: var(--lavender-deep); }
.tendi-skin .up-avatar.acc-mint { background: var(--mint-deep); }
.tendi-skin .up-avatar.acc-apricot { background: var(--apricot-deep); }
.tendi-skin .up-avatar.acc-sun { background: var(--sun-deep); }
.tendi-skin .up-avatar.acc-coral { background: var(--coral-deep); }
.tendi-skin .up-identity-eyebrow {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); margin: 16px 0 6px;
}
.tendi-skin .up-name {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; margin: 0;
}
.tendi-skin .up-subline { font-size: 13px; color: var(--ink-3); margin-top: 6px; font-weight: 500; text-transform: capitalize; }
.tendi-skin .up-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* status pill (reused in identity summary + access card) */
.tendi-skin .up-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border: 1px solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3;
}
.tendi-skin .up-pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.tendi-skin .up-pill.is-active { background: var(--ok-tint); color: var(--ok); }
.tendi-skin .up-pill.is-inactive { background: var(--cream-2); color: var(--ink-3); }

/* summary stat chip */
.tendi-skin .up-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--radius-full);
  background: var(--cream); border: 1px solid var(--paper-edge);
  font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; line-height: 1.3;
}
.tendi-skin .up-stat i { font-size: 11px; color: var(--ink-4); }
.tendi-skin .up-stat b { color: var(--ink); font-weight: 700; }

/* --- soft card (one per concern) --- */
.tendi-skin .up-card {
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 22px 24px 24px;
}
.tendi-skin .up-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tendi-skin .up-card-ico {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-tint); color: var(--primary); font-size: 12px; flex-shrink: 0;
}
.tendi-skin .up-card-eyebrow {
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
}
.tendi-skin .up-card .up-head-spacer { flex: 1; }

.tendi-skin .up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.tendi-skin .up-grid .col-full { grid-column: 1 / -1; }
.tendi-skin .up-kv-label {
  font-family: var(--font-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px;
}
.tendi-skin .up-kv-value { font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; word-break: break-word; }
.tendi-skin .up-kv-value.is-muted { color: var(--ink-4); }
.tendi-skin .up-hint { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ink-4); line-height: 1.5; }
.tendi-skin .up-hint i { font-size: 11px; margin-top: 2px; color: var(--ink-5); }

/* --- EDIT: tab bar (segmented) + each panel becomes a card --- */
.tendi-skin .tnd-pane-edit .tnd-tabs {
  margin: 0; padding: 5px; gap: 3px; display: flex; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.tendi-skin .tnd-pane-edit .tnd-tab {
  margin: 0; padding: 8px 13px; border-radius: var(--radius-md); border-bottom: none;
  font-size: 12.5px; color: var(--ink-3);
}
.tendi-skin .tnd-pane-edit .tnd-tab:hover { color: var(--ink); background: var(--cream-2); }
.tendi-skin .tnd-pane-edit .tnd-tab.is-active { color: var(--primary); background: var(--primary-tint); border-bottom: none; }

.tendi-skin .tnd-pane-edit .tnd-tabpanel:not([hidden]) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; align-content: start;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 22px 24px 24px;
}
/* full-width rows inside the field grid (applies to Users .field markup AND the generic .form-group) */
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-grid,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .toggle-row,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .tnd-asn-section,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .tnd-photo-field,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .field-help,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > h3,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > h4,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > legend,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > hr,
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .field:has(textarea),
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .field:has(.tnd-checklist),
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has(textarea),
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has(.checkbox-inline),
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has(.tnd-classes-wrap),
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has([id*="map" i]) { grid-column: 1 / -1; }
.tendi-skin .tnd-pane-edit .tnd-cls-group + .tnd-cls-group { margin-top: 14px; }
/* multi-select (e.g. employee Type, Group) → a violet chip/tag picker: enhanceMultiSelects() hides the
   native <select multiple> and renders .tnd-tags chips (click to toggle). Spans full width. (#14) */
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has(select[multiple]) { grid-column: 1 / -1; }
.tendi-skin .tnd-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tendi-skin .tnd-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-full);
  background: var(--paper-2); border: 1px solid var(--paper-edge); color: var(--ink-3);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tendi-skin .tnd-tag:hover { border-color: var(--paper-edge-strong); color: var(--ink); }
.tendi-skin .tnd-tag.is-on { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-tag .tnd-tag-x { font-size: 9px; opacity: 0.5; }
.tendi-skin .tnd-tag:hover .tnd-tag-x, .tendi-skin .tnd-tag.is-on .tnd-tag-x { opacity: 1; }
.tendi-skin .tnd-pane.is-readonly .tnd-tags { display: none !important; }   /* read-only shows the .tnd-ro-multi text instead */
/* read-only: never show a multi-select's editor affordances (e.g. the Groups "Select All" checkbox) */
.tendi-skin .tnd-pane.is-readonly .form-group:has(select[multiple]) .checkbox-inline,
.tendi-skin .tnd-pane.is-readonly .form-group:has(.group_ids) .checkbox-inline { display: none !important; }
/* front-end "Select all / Clear all" toggle: a dashed action pill, distinct from the solid option chips */
.tendi-skin .tnd-tag-all { background: transparent; border-style: dashed; border-color: var(--paper-edge-strong); color: var(--ink-3); }
.tendi-skin .tnd-tag-all:hover { border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-tag-all::after { content: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-tag-all { display: none !important; }
/* the front-end chip toggle replaces the legacy Groups "Select All" checkbox: hide it in the drawer (both modes) */
.tendi-skin .tnd-pane .form-group:has(.group_ids) .checkbox-inline { display: none !important; }
/* ===== list-table column widths + uniform 2-line rows + sticky Action column ===== */
/* No word-break on cells: a long token (email) keeps its min-content width so auto table-layout
   never crushes the column to one-char-per-line: wide tables overflow & scroll instead. */
.tendi-skin.tnd-list-generic table.tnd-list-table tbody td { vertical-align: middle; line-height: 1.4; }
.tendi-skin.tnd-list-generic table.tnd-list-table tbody tr td { height: 50px; }   /* baseline fits ~2 lines; 3+ lines grow the row */
/* long text cells (Email/Branch/Class + any long value): cap content in a fixed-width box clamped
   to 2 lines (reliable in table-layout:auto, where a cell's own max-width is ignored). The box gives
   the column a definite width so it can't collapse to its longest word and stack into many lines. */
.tendi-skin.tnd-list-generic td.tnd-clip, .tendi-skin.tnd-list-generic th.tnd-clip { max-width: none; overflow: visible; white-space: normal; }
.tendi-skin.tnd-list-generic table.tnd-list-table td .tnd-cellwrap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 156px; white-space: normal; word-break: break-word; line-height: 1.4; }
.tendi-skin.tnd-list-generic th.tnd-clip { max-width: 170px; }
/* per-type column hints */
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-name { min-width: 150px; }
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-status { white-space: nowrap; }
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-type { white-space: nowrap; }
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-phone { white-space: nowrap; }
/* Notes column: the inner note box drives a reliable wide column (auto-layout ignores cell width) */
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-notes { min-width: 260px; }
.tendi-skin.tnd-list-generic table.tnd-list-table td.tnd-c-notes .tnd-note,
.tendi-skin.tnd-list-generic table.tnd-list-table td.tnd-c-notes .child_note { width: 252px; max-width: 252px; }
/* pin the Action column to the right edge → the 3-dot flyout is always reachable, even mid horizontal-scroll */
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-action { position: sticky; right: 0; width: 56px; min-width: 56px; max-width: 56px; text-align: center; padding-left: 4px; padding-right: 4px; }
.tendi-skin.tnd-list-generic table.tnd-list-table tbody td.tnd-c-action { background: var(--paper-2); z-index: 3; box-shadow: -9px 0 9px -9px rgba(31,26,46,.16); }
.tendi-skin.tnd-list-generic table.tnd-list-table tbody tr:hover td.tnd-c-action { background: var(--cream); }
.tendi-skin.tnd-list-generic table.tnd-list-table thead th.tnd-c-action { position: sticky; right: 0; z-index: 5; background: var(--cream-2); box-shadow: -9px 0 9px -9px rgba(31,26,46,.16); }
/* when its 3-dot flyout is open, lift this Action cell above every other pinned cell so the pop
   (and its hover states) render on top instead of under the next row's sticky cell */
.tendi-skin.tnd-list-generic table.tnd-list-table td.tnd-c-action.tnd-rowmenu-cell-open { z-index: 2060; }
/* a row action opted out of the flyout (`.tnd-rowaction-keep`) and renders inline next to the
   ⋮ trigger. The column has to grow past its 56px sliver to hold it */
.tendi-skin.tnd-list-generic table.tnd-list-table .tnd-c-action.tnd-has-inline {
  width: auto; min-width: 150px; max-width: none; text-align: right; white-space: nowrap;
}
.tendi-skin .tnd-rowaction-inline {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  height: 30px; padding: 0 11px; margin-right: 4px;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-sm);
  background: var(--paper-2); color: var(--ink-2);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; box-shadow: none; text-shadow: none; transition: border-color .14s, color .14s;
}
.tendi-skin .tnd-rowaction-inline:hover { border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-rowaction-inline svg { width: 14px; height: 14px; flex: none; }
/* Vaccine/Forms requirement checkboxes (#vaccine-forms-requirements, AJAX-reloaded on Type change) →
   the SAME violet chip toggles as the Type picker. Each `.col-md-12 > input + label[for]` becomes a pill:
   the native checkbox is hidden, the label is the chip, the wrapper :has(:checked) → violet. CSS-only so it
   styles the AJAX-injected markup too. Full-width field. */
.tendi-skin .tnd-pane-edit .tnd-tabpanel > .form-group:has(#vaccine-forms-requirements) { grid-column: 1 / -1; }
.tendi-skin #vaccine-forms-requirements { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tendi-skin #vaccine-forms-requirements > div { margin: 0 !important; padding: 0; width: auto; float: none; }
.tendi-skin #vaccine-forms-requirements input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tendi-skin #vaccine-forms-requirements label {
  display: inline-flex; align-items: center; margin: 0; padding: 7px 12px; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-full); background: var(--paper-2); border: 1px solid var(--paper-edge);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: background .15s, border-color .15s, color .15s;
}
.tendi-skin #vaccine-forms-requirements label:hover { border-color: var(--paper-edge-strong); color: var(--ink); }
.tendi-skin #vaccine-forms-requirements label::after { content: "+"; margin-left: 8px; font-size: 12px; opacity: 0.5; }
.tendi-skin #vaccine-forms-requirements > div:has(input:checked) label { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin #vaccine-forms-requirements > div:has(input:checked) label::after { content: "\00d7"; opacity: 1; }   /* × on selected */
/* read-only: only the checked chips, non-interactive (matches Type's view) */
.tendi-skin .tnd-pane.is-readonly #vaccine-forms-requirements { pointer-events: none; }
.tendi-skin .tnd-pane.is-readonly #vaccine-forms-requirements label::after { display: none; }
.tendi-skin .tnd-pane.is-readonly #vaccine-forms-requirements > div:not(:has(input:checked)) { display: none; }
/* dropdown clear "×": subtle by default, only solid on hover, quieter, cleaner (#15) */
.tendi-skin .tnd-select-clear { opacity: 0.5; transition: opacity 0.15s, color 0.15s; color: var(--ink-4); }
.tendi-skin .tnd-select-clear:hover { opacity: 1; color: var(--ink-2); }

/* photo block → bordered inset row */
.tendi-skin .tnd-photo-field { gap: 8px; }
.tendi-skin .tnd-photo {
  padding: 14px 16px; background: var(--cream);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-xl);
}

/* assignment checklists → pill chips (selected = violet); native box kept for state */
.tendi-skin .tnd-checklist { background: transparent; border: none; padding: 0; gap: 8px; }
.tendi-skin .tnd-chk {
  padding: 8px 15px; border-radius: var(--radius-full);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* selection is shown by the violet pill state, so the native box is visually hidden (still focusable) */
.tendi-skin .tnd-chk input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }

/* ============================================================
   USERS LIST (DataTable): toolbar, columns, selection, flyout polish
   ============================================================ */

/* --- compact search: short, pill-shaped, inline with the status filter --- */
.tendi-skin .tnd-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tendi-skin .tnd-filter-row .tnd-seg { margin-left: auto; }   /* push the status filter to the right */
.tendi-skin .tnd-dt-search { position: relative; width: 320px; max-width: 100%; }
.tendi-skin .tnd-dt-search input {
  width: 100%; height: 40px; padding: 0 42px 0 38px;
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); font-weight: 500; box-shadow: none;
}
.tendi-skin .tnd-dt-search > i { left: 15px; font-size: 13px; }
.tendi-skin .tnd-dt-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* the "/" key hint: a small, quiet keycap */
.tendi-skin .tnd-dt-search-hint {
  right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; line-height: 1;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--ink-4);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); border-radius: 7px;
  box-shadow: none;
}

/* --- name cell: monogram/photo avatar + name + #id --- */
.tendi-skin .tnd-user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tendi-skin .tnd-row-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--paper-2);
  background: var(--plum-deep); letter-spacing: -0.01em;
}
.tendi-skin .tnd-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendi-skin .tnd-row-avatar.acc-plum { background: var(--plum-deep); }
.tendi-skin .tnd-row-avatar.acc-teal { background: var(--teal-deep); }
.tendi-skin .tnd-row-avatar.acc-rose { background: var(--rose-deep); }
.tendi-skin .tnd-row-avatar.acc-sky { background: var(--sky-deep); }
.tendi-skin .tnd-row-avatar.acc-lavender { background: var(--lavender-deep); }
.tendi-skin .tnd-row-avatar.acc-mint { background: var(--mint-deep); }
.tendi-skin .tnd-row-avatar.acc-apricot { background: var(--apricot-deep); }
.tendi-skin .tnd-row-avatar.acc-sun { background: var(--sun-deep); }
.tendi-skin .tnd-row-avatar.acc-coral { background: var(--coral-deep); }

/* --- new columns: Branch + Last login --- */
.tendi-skin .tnd-col-branch { min-width: 130px; max-width: 220px; }
.tendi-skin td.tnd-col-branch { color: var(--ink-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendi-skin .tnd-col-login { width: 116px; }
.tendi-skin td.tnd-col-login { color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tendi-skin td.tnd-col-login .tnd-never { color: var(--ink-5); }

/* --- status as a read-only pill (toggle removed) --- */
.tendi-skin .tnd-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.tendi-skin .tnd-status-pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.tendi-skin .tnd-status-pill.is-active { background: var(--ok-tint); color: var(--ok); }
.tendi-skin .tnd-status-pill.is-inactive { background: var(--cream-2); color: var(--ink-3); }
/* Created but never signed in: waiting on its invite, not switched off. Attention rather than
   grey, because it is a state someone still has to act on. */
.tendi-skin .tnd-status-pill.is-pending { background: var(--attention-tint, #f6ecd8); color: var(--attention, #9d6b10); }
/* Two more semantic states, added for the Therapy board but deliberately put HERE rather than in a
   module sheet: the pill already had ok / neutral / attention, and `.tnd-bx` further down has long
   carried an is-rejected in critical, so info + critical were a gap in the general component.
   is-info    = in progress, nothing wrong (a child is out at a session)
   is-critical = needs someone to act now (the child is overdue back) */
.tendi-skin .tnd-status-pill.is-info { background: var(--info-tint); color: var(--info); }
.tendi-skin .tnd-status-pill.is-critical { background: var(--critical-tint); color: var(--critical); }
/* A genuinely LIVE state gets the one piece of motion on the page. Opt-in via .is-live so a
   static pill never animates, and silenced for reduced-motion users. */
.tendi-skin .tnd-status-pill.is-live .dot { animation: tndPillPulse 2s ease-in-out infinite; }
@keyframes tndPillPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tendi-skin .tnd-status-pill.is-live .dot { animation: none; } }
/* Type column: quiet cream pill (mockup parity) */
.tendi-skin .usr-type { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); background: var(--cream-2); padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }

/* (selection gutter + drawn checkbox styles are consolidated in the SELECTION GUTTER block above) */

/* --- 3-dot row action flyout: clean list (neutralise legacy .btn bleed) --- */
.tendi-skin .tnd-rowmenu-pop {
  min-width: 170px; padding: 6px; gap: 2px; border-radius: var(--radius-lg);
  background: var(--paper-2); border: 1px solid var(--paper-edge); box-shadow: var(--shadow-lg);
}
/* scoped !important defeats the devoops .btn / .btn-primary / .btn-danger theme bleed (§8) */
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item {
  display: flex !important; align-items: center; gap: 11px; width: 100%; justify-content: flex-start;
  padding: 9px 12px !important; margin: 0 !important; border-radius: var(--radius-md) !important;
  border: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important;
  font-family: var(--font-sans); font-size: 13px !important; font-weight: 500 !important; color: var(--ink-2) !important;
  cursor: pointer; text-transform: none !important; letter-spacing: -0.005em; line-height: 1.2; min-height: 0; height: auto;
}
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item span { margin: 0; padding: 0; background: none !important; color: inherit; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item i { width: 15px; font-size: 12px; color: var(--ink-4) !important; text-align: center; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item:hover { background: var(--cream-2) !important; color: var(--ink) !important; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger { color: var(--critical) !important; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger i { color: var(--critical) !important; }
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item.danger:hover { background: var(--critical-tint) !important; color: var(--critical) !important; }

/* Users page v4: row-action flyout matched to the mockup .usr-menu (radius-md card, radius-sm
   option rows, soft overlay). Scoped to Users; the kebab TRIGGER stays plain (no white box) per owner. */
.tendi-skin.tnd-list-page .tnd-rowmenu-pop { min-width: 172px; padding: 6px; border-radius: var(--radius-md); box-shadow: var(--shadow-overlay) !important; }
.tendi-skin.tnd-list-page .tnd-rowmenu-pop .tnd-rowmenu-item { padding: 8px 10px !important; gap: 10px; border-radius: var(--radius-sm) !important; }

/* ============================================================
   OVERLAY ELEVATION: floating things get a soft shadow so they read as lifted
   above the (intentionally flat) surfaces. Applied here because the --shadow-*
   tokens are 'none'. Surfaces (table/cards/buttons) stay shadowless.
   ============================================================ */
.tendi-skin .tnd-rowmenu-pop,
.tendi-skin .tnd-select-menu { box-shadow: var(--shadow-overlay-sm) !important; }
.tendi-skin .tnd-pane,
.tendi-skin .tnd-drawer { box-shadow: var(--shadow-overlay) !important; }
body:has(.tnd-list-page) #popup_container { box-shadow: var(--shadow-overlay) !important; }

/* --- responsive: drop the new lower-priority columns first --- */
@media (max-width: 1280px) { .tendi-skin .tnd-col-login { display: none; } }
@media (max-width: 1120px) { .tendi-skin .tnd-col-branch { display: none; } }

/* ============================================================
   PANE READ-ONLY VIEW. The tabbed form shows read-only until Edit.
   Inputs render as plain text; assignment chips/classes show only what's
   selected; photo upload + Security are edit-only.
   ============================================================ */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit select,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit textarea {
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
  padding-left: 0 !important; padding-right: 0 !important; min-height: 0 !important;
  color: var(--ink); font-weight: 600; pointer-events: none; resize: none;
  -webkit-appearance: none; appearance: none;
}
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit select { background-image: none !important; }
/* multi/size selects (e.g. Type, Groups) would render as a tall listbox in read-only: JS
   (readonlyDashes) hides them and prints the selected labels as .tnd-ro-multi text instead. */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit select.tnd-ro-hide,
.tendi-skin .tnd-pane-edit select.tnd-ro-hide { display: none !important; }
.tendi-skin .tnd-pane-edit .tnd-ro-multi { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
/* date inputs: drop the native calendar picker indicator in read-only so the date reads as plain text */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="date"]::-webkit-calendar-picker-indicator,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="time"]::-webkit-calendar-picker-indicator,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="date"]::-webkit-inner-spin-button { display: none !important; -webkit-appearance: none; }
/* the legacy form's own Save/Cancel button row is redundant in the drawer (the head has them and
   proxies to the hidden in-form submit): hide its whole .form-group so it leaves no empty grid cell. */
.tendi-skin .tnd-drawer .tnd-pane-edit .form-group:has(> .btnContainer) { display: none !important; }
/* empty fields read as a muted "-" (JS swaps the placeholder text in read-only) */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input::placeholder,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit textarea::placeholder { color: var(--ink-4) !important; opacity: 1; }

/* ============================================================
   READ-ONLY VIEW = stacked concern CARDS (the approved "card-stack" design).
   Identity lays on the canvas; each form section becomes a white card with a
   violet icon header + a read-only label→value grid. Edit mode keeps the tabs.
   ============================================================ */
/* scoped to .tnd-pane → applies to BOTH the generic drawer (#tndDrawer) AND the Users bespoke pane
   (#tndUserPane), so they share ONE card-stack view styling (the Users behavior/endpoints are untouched). */
/* hide the tab bar; render ALL section panels as stacked cards */
.tendi-skin .tnd-pane.is-readonly .tnd-tabs { display: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .form-horizontal { display: flex; flex-direction: column; gap: 16px; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-tabpanel,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-tabpanel[hidden] {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px 20px; align-content: start;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 20px 22px 22px;
}
/* a role-hidden section (Users) stays hidden even in the stacked view */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-tabpanel.tnd-rolehidden { display: none !important; }
/* the violet icon + title card header (spans the card grid) */
/* NOTE: tendi-dashboard.css defines .tnd-card-head/.tnd-card-title UNSCOPED (dashboard widgets),
   which collides with the pane card-stack. Declare every property we rely on here so the unscoped
   rule cannot leak in (it was forcing justify-content:space-between + padding + a border-bottom,
   which shoved the card title to the far right). See docs/reskin/AGENT-COORDINATION.md. */
.tendi-skin .tnd-pane .tnd-card-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 0 2px; padding: 0; border: 0; }
.tendi-skin .tnd-pane .tnd-card-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }

/* ---- v4 icon set: the Users page swapped its Font Awesome glyphs for the mockup's stroked SVGs
   (Lucide/Feather style). Size each per context to match the mockup; `currentColor` makes them
   inherit the surrounding text/button colour. These match ONLY where an inline <svg> now exists
   (Users), so other admin pages' FA `<i>` icons are unaffected. Icon→label spacing stays on the
   button COMPONENT (`.btn`/`.btn-sm` already carry gap:7px = the mockup). ---- */
.tendi-skin .btn span svg { width: 15px; height: 15px; display: block; }
.tendi-skin .btn-sm svg { width: 14px; height: 14px; display: block; flex: none; }
.tendi-skin .tnd-rowmenu-trigger svg { width: 15px; height: 15px; }
.tendi-skin .tnd-dt-search > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; }
.tendi-skin .tnd-pane-close svg { width: 16px; height: 16px; }
.tendi-skin .up-stat svg { width: 12px; height: 12px; color: var(--ink-4); }
.tendi-skin .tnd-pane .tnd-card-ico svg { width: 14px; height: 14px; }
.tendi-skin .tnd-photo-preview svg { width: 26px; height: 26px; color: var(--ink-4); }
.tendi-skin .tnd-pane .tnd-card-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: -.01em; }
.tendi-skin .tnd-pane.is-editing form:has(.tnd-tabs) .tnd-card-head { display: none; }   /* the tab bar names sections in edit */
/* identity lays ON the canvas (not a card), horizontal: avatar + name/pills */
.tendi-skin .tnd-pane .up-identity { background: transparent; border: 0; box-shadow: none; border-radius: 0; flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 2px 4px 4px; }
.tendi-skin .tnd-pane .up-identity .up-avatar { width: 62px; height: 62px; font-size: 23px; border-radius: var(--radius-xl); }
.tendi-skin .tnd-pane .up-idtext { min-width: 0; flex: 1; }
.tendi-skin .tnd-pane .up-identity .up-identity-eyebrow { margin: 0 0 3px; }
.tendi-skin .tnd-pane .up-identity .up-name { font-size: 21px; }
.tendi-skin .tnd-pane .up-identity .up-subline { margin-top: 3px; }
.tendi-skin .tnd-pane .up-identity .up-summary { justify-content: flex-start; margin-top: 9px; }
/* read-only fields inside a card: clean label→value, no row hairlines (the card groups them) */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .field,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .form-group { gap: 3px; margin: 0; padding: 0; border-bottom: 0; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .field-label,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .control-label { color: var(--ink-4); }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .form-control,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit textarea,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-trigger { font-size: 14px; color: var(--ink); font-weight: 600; }
/* a field with no value collapses its (hidden) control and shows a muted "-" so a label never floats alone */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty input,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty textarea,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty .tnd-select,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty .tnd-photo,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty .tnd-checklist { display: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-empty::after { content: "-"; color: var(--ink-5); font-size: 14px; font-weight: 500; }
/* a single boolean field → clean "Yes" / "No" (the control is hidden, the field label kept) */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-yes > :not(.field-label):not(.control-label),
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-no > :not(.field-label):not(.control-label) { display: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-yes::after { content: "Yes"; font-size: 14px; font-weight: 600; color: var(--ok); }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-ro-no::after { content: "No"; font-size: 14px; font-weight: 600; color: var(--ink-4); }

/* edit-only controls hidden in read-only */
.tendi-skin .tnd-pane.is-readonly .tnd-photo-field,
.tendi-skin .tnd-pane.is-readonly .tnd-tab[data-tab="security"] { display: none !important; }
/* hide the Security PANEL in view too (the password field is edit-only, matches the mockup).
   Needs `.tnd-pane-edit` in the selector to beat the readonly `.tnd-tabpanel[hidden]` show-rule (0,6,0). */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-tabpanel[data-panel="security"] { display: none !important; }

/* toggles read-only: show the state, strip the row chrome, non-interactive */
.tendi-skin .tnd-pane.is-readonly .toggle-row { pointer-events: none; background: transparent; border-color: transparent; padding: 4px 0; }
.tendi-skin .tnd-pane.is-readonly .toggle input { pointer-events: none; }
/* read-only: NO interactive switch in view. The toggle reads as a static Yes/No value
   (matches .tnd-ro-yes/no). Hide the track + input; :has(input:checked) still reflects the
   real state (display:none doesn't drop :checked). The .toggle sizes to the text on the right. */
.tendi-skin .tnd-pane.is-readonly .toggle { width: auto; height: auto; }
.tendi-skin .tnd-pane.is-readonly .toggle .toggle-track,
.tendi-skin .tnd-pane.is-readonly .toggle input { display: none !important; }
.tendi-skin .tnd-pane.is-readonly .toggle::after { font-size: 14px; font-weight: 600; }
.tendi-skin .tnd-pane.is-readonly .toggle:has(input:checked)::after { content: "Yes"; color: var(--ok); }
.tendi-skin .tnd-pane.is-readonly .toggle:not(:has(input:checked))::after { content: "No"; color: var(--ink-4); }

/* assignment chips read-only: show ONLY the selected ones */
.tendi-skin .tnd-pane.is-readonly .tnd-checklist { padding: 0; }
.tendi-skin .tnd-pane.is-readonly .tnd-chk { pointer-events: none; }
.tendi-skin .tnd-pane.is-readonly .tnd-chk:not(:has(input:checked)) { display: none; }
/* read-only: flatten the cascade box to match .tnd-checklist, selected chips sit
   directly on the card (no cream box / border / padding) for a consistent view */
.tendi-skin .tnd-pane.is-readonly .tnd-classes-wrap { pointer-events: none; background: transparent !important; border: 0 !important; padding: 0 !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-classes-wrap .checkbox-inline:not(:has(input:checked)) { display: none; }
/* read-only: collapse the WHOLE wrapper col of any unchecked option (incl. the "All" row) so
   no empty grid cell / gap is reserved; branch headers (no checkbox) stay. Also drop the first
   header's top margin so it sits tight under the box padding (no big gap above it). */
.tendi-skin .tnd-pane.is-readonly .tnd-classes-wrap [class*="col-sm-"]:has(.checkbox-inline):not(:has(input:checked)) { display: none; }
.tendi-skin .tnd-pane.is-readonly .tnd-classes-wrap .col-sm-12.mt-3 { margin-top: 0; }
/* hide an entire assignment group when nothing in it is selected (no lonely labels) */
.tendi-skin .tnd-pane.is-readonly .tnd-asn-section:not(:has(input:checked)) { display: none; }
/* bus-route day / direction chips (legacy .checkbox-inline/.radio-inline, NOT .tnd-chk) read-only:
   show ONLY the selected day(s) + the chosen direction: same convention as the .tnd-chk chips above */
.tendi-skin .tnd-pane.is-readonly.tnd-drawer .checkbox-inline,
.tendi-skin .tnd-pane.is-readonly.tnd-drawer .radio-inline { pointer-events: none; }
.tendi-skin .tnd-pane.is-readonly.tnd-drawer .checkbox-inline:not(:has(input:checked)),
.tendi-skin .tnd-pane.is-readonly.tnd-drawer .radio-inline:not(:has(input:checked)) { display: none; }
/* required asterisks are an edit-time affordance: drop them in the read-only view */
.tendi-skin .tnd-pane.is-readonly.tnd-drawer .control-label .astric { display: none; }

/* nudge the actions when a click-away is blocked by unsaved edits */
@keyframes tndNudge { 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-4px); } 60%{ transform: translateX(4px); } }
.tendi-skin .tnd-pane.tnd-nudge .tnd-pane-head-actions { animation: tndNudge 0.3s ease; }
.tendi-skin .tnd-chk:hover { border-color: var(--paper-edge-strong); color: var(--ink); }
.tendi-skin .tnd-chk:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-chk:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ============================================================
   CHECKBOXES & RADIOS: big, custom-drawn, on-brand (appearance:none + drawn mark).
   Generic list pages (rows / markAll / filters) + the edit drawer. The Users page uses its own
   .tnd-cbox/.tnd-chk drawn controls (visually-hidden native input), so those are untouched.
   ============================================================ */
.tendi-skin.tnd-list-generic input[type="checkbox"],
.tendi-skin.tnd-list-generic input[type="radio"],
.tendi-skin .tnd-drawer input[type="checkbox"],
.tendi-skin .tnd-drawer input[type="radio"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  box-sizing: border-box; aspect-ratio: 1 / 1;
  width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px;
  margin: 0; padding: 0; flex: 0 0 20px; display: inline-block; vertical-align: middle;
  border: 1.5px solid var(--paper-edge-strong); background-color: var(--paper-2); background-repeat: no-repeat; background-position: center;
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tendi-skin.tnd-list-generic input[type="checkbox"], .tendi-skin .tnd-drawer input[type="checkbox"] { border-radius: 6px; }
.tendi-skin.tnd-list-generic input[type="radio"], .tendi-skin .tnd-drawer input[type="radio"] { border-radius: 50%; }
.tendi-skin.tnd-list-generic input[type="checkbox"]:hover, .tendi-skin.tnd-list-generic input[type="radio"]:hover,
.tendi-skin .tnd-drawer input[type="checkbox"]:hover, .tendi-skin .tnd-drawer input[type="radio"]:hover { border-color: var(--primary); }
.tendi-skin.tnd-list-generic input[type="checkbox"]:checked,
.tendi-skin .tnd-drawer input[type="checkbox"]:checked {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 15px 15px;
}
.tendi-skin.tnd-list-generic input[type="radio"]:checked,
.tendi-skin .tnd-drawer input[type="radio"]:checked {
  border-color: var(--primary);
  background-image: radial-gradient(circle at center, var(--primary) 0 5px, transparent 5.5px);
}
.tendi-skin.tnd-list-generic input[type="checkbox"]:focus-visible, .tendi-skin.tnd-list-generic input[type="radio"]:focus-visible,
.tendi-skin .tnd-drawer input[type="checkbox"]:focus-visible, .tendi-skin .tnd-drawer input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ============================================================
   GENERIC EDIT DRAWER (tendi-list.js): the entity's existing add/edit form,
   reused inside a slide-in side panel + reskinned from the legacy
   .form-horizontal layout into a clean vertical form. Scoped to .tnd-drawer
   so the full-page legacy forms are untouched.
   ============================================================ */
.tendi-skin .tnd-drawer { width: 600px; }
.tendi-skin .tnd-drawer .tnd-pane-body { padding: 22px 26px 30px; }
/* neutralise the legacy box / bootstrap grid wrappers */
.tendi-skin .tnd-drawer .row-fluid,
.tendi-skin .tnd-drawer .col-xs-12,
.tendi-skin .tnd-drawer .box,
.tendi-skin .tnd-drawer .box-content,
.tendi-skin .tnd-drawer fieldset { display: block; width: 100%; padding: 0; margin: 0; background: transparent; border: none; box-shadow: none; float: none; }
.tendi-skin .tnd-drawer .box-icons, .tendi-skin .tnd-drawer .no-move { display: none !important; }
.tendi-skin .tnd-drawer .meta { display: none; }

/* legacy .form-horizontal fields restyled to be IDENTICAL to the Users .field/.field-label/input */
.tendi-skin .tnd-drawer .form-group { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; gap: 6px; min-width: 0; }
.tendi-skin .tnd-drawer .control-label,
.tendi-skin .tnd-drawer label.col-sm-3 { display: flex; align-items: center; gap: 6px; width: auto; max-width: none; text-align: left; float: none; padding: 0; margin: 0;
  font-family: var(--font-label); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.tendi-skin .tnd-drawer .control-label .astric { color: var(--critical); font-weight: 700; margin-left: 2px; }
.tendi-skin .tnd-drawer [class*="col-sm-"] { width: 100%; max-width: 100%; padding: 0; float: none; }
.tendi-skin .tnd-drawer .form-control {
  width: 100%; height: auto; border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); background: var(--cream);
  padding: 10px 14px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.tendi-skin .tnd-drawer textarea.form-control { height: auto; min-height: 78px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
/* readonly date-picker inputs must stay clickable (some legacy CSS sets pointer-events:none) */
.tendi-skin .tnd-drawer input[readonly], .tendi-skin .tnd-drawer input.hasDatepicker, .tendi-skin .tnd-drawer input.date_picker { pointer-events: auto !important; cursor: pointer; background: var(--paper-2); }
.tendi-skin .tnd-drawer .form-control:hover { border-color: var(--paper-edge-strong); }
.tendi-skin .tnd-drawer .form-control:focus { outline: none; background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-drawer input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper-2); cursor: pointer; vertical-align: middle; }
.tendi-skin .tnd-drawer input[type="file"] { font-size: 12.5px; color: var(--ink-4); }
.tendi-skin .tnd-drawer input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tendi-skin .tnd-drawer input[type="file"]::file-selector-button:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-drawer input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tendi-skin .tnd-drawer input[type="checkbox"], .tendi-skin .tnd-drawer input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); vertical-align: middle; position: static; flex-shrink: 0; margin: 0; }
/* checkbox/radio WRAPPED IN A LABEL → pill chips (selection shown by the violet state), matching
   the Users .tnd-chk / get_classes chips. The native box is visually hidden (kept for state + submit).
   Standalone boxes (not inside a label) keep the drawn-checkbox treatment above. */
.tendi-skin .tnd-drawer label:has(> input[type="checkbox"]):not(.vB-toggle),
.tendi-skin .tnd-drawer label:has(> input[type="radio"]):not(.vB-toggle),
.tendi-skin .tnd-drawer .checkbox label, .tendi-skin .tnd-drawer .checkbox-inline label {
  display: inline-flex; align-items: center; gap: 0; width: auto; padding: 8px 15px; margin: 0 8px 8px 0;
  border-radius: var(--radius-full); background: var(--paper-2); border: 1px solid var(--paper-edge-strong);
  text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tendi-skin .tnd-drawer label:has(> input[type="checkbox"]):hover,
.tendi-skin .tnd-drawer label:has(> input[type="radio"]):hover,
.tendi-skin .tnd-drawer .checkbox label:hover, .tendi-skin .tnd-drawer .checkbox-inline label:hover { border-color: var(--primary); color: var(--ink); }
.tendi-skin .tnd-drawer label:has(> input[type="checkbox"]:checked),
.tendi-skin .tnd-drawer label:has(> input[type="radio"]:checked),
.tendi-skin .tnd-drawer .checkbox label:has(input:checked), .tendi-skin .tnd-drawer .checkbox-inline label:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin .tnd-drawer label:has(> input[type="checkbox"]) > input,
.tendi-skin .tnd-drawer label:has(> input[type="radio"]) > input,
.tendi-skin .tnd-drawer .checkbox label input, .tendi-skin .tnd-drawer .checkbox-inline label input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.tendi-skin .tnd-drawer .text-muted, .tendi-skin .tnd-drawer small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-4); }
/* section sub-headers + inline-styled divider rows */
.tendi-skin .tnd-drawer h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 14px; }
.tendi-skin .tnd-drawer h4 i { color: var(--primary); margin-right: 7px; }
.tendi-skin .tnd-drawer .row[style*="border-top"] { border-top: 1px solid var(--paper-edge) !important; margin-top: 22px !important; padding-top: 20px !important; }
/* validation messages */
.tendi-skin .tnd-drawer label.error { display: block; margin-top: 5px; color: var(--critical); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tendi-skin .tnd-drawer .form-control.error { border-color: var(--critical); }
/* the legacy in-form Save/Cancel footer is replaced by the drawer-HEAD actions (matches the Users pane) */
.tendi-skin .tnd-drawer fieldset .btnContainer { display: none !important; }
.tendi-skin .tnd-drawer fieldset .form-group { display: block; margin: 0; padding: 0; border: none; }
.tendi-skin .tnd-drawer fieldset { margin: 6px 0 0; }

/* save-error banner (safety net for legacy forms with no ajax-error handler) */
.tendi-skin .tnd-drawer .tnd-drawer-error { margin: 0 0 16px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--critical-tint, #fdecec); color: var(--critical); border: 1px solid var(--critical); font-size: 13px; font-weight: 500; }

/* jQuery-UI datepicker popup (used by date inputs in forms): reskin to match. Scoped to when a
   reskinned page is active (the widget is appended to <body>, outside .tendi-skin). */
/* NOTE: legacy style.css ships a DARK datepicker theme via `#ui-datepicker-div ... !important`,
   so we must match it with the same ID + !important (and higher specificity) to re-light it. */
body:has(.tnd-list-page) #ui-datepicker-div,
body:has(.tnd-list-page) #ui-datepicker-div.ui-widget-content {
  padding: 10px !important; border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-lg) !important;
  background: var(--paper-2) !important; background-image: none !important; color: var(--ink) !important;
  box-shadow: var(--shadow-overlay) !important; font-family: var(--font-sans) !important; z-index: 3100 !important; width: 270px !important;
}
body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-header,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-header { background: transparent !important; background-image: none !important; border: none !important; padding: 2px 0 8px !important; color: var(--ink) !important; }
body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink) !important; }
body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-prev, body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-next { cursor: pointer; top: 6px; background: transparent !important; border: none !important; }
body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-prev:hover, body:has(.tnd-list-page) #ui-datepicker-div .ui-datepicker-next:hover { background: var(--cream-2) !important; border-radius: 8px; }
body:has(.tnd-list-page) #ui-datepicker-div table, body:has(.tnd-list-page) #ui-datepicker-div table.ui-datepicker-calendar { font-size: 12.5px !important; margin: 0 !important; background: transparent !important; }
body:has(.tnd-list-page) #ui-datepicker-div th, body:has(.tnd-list-page) #ui-datepicker-div table.ui-datepicker-calendar thead th { color: var(--ink-4) !important; background: transparent !important; font-weight: 600; font-size: 11px; padding: 5px 0; border: none !important; }
body:has(.tnd-list-page) #ui-datepicker-div td { padding: 1px !important; border: none !important; background: transparent !important; }
body:has(.tnd-list-page) #ui-datepicker-div .ui-state-default,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-content .ui-state-default,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-header .ui-state-default {
  display: block; text-align: center; padding: 6px 0 !important; border: none !important; background: transparent !important; background-image: none !important;
  border-radius: 8px; color: var(--ink-2) !important; font-weight: 500;
}
body:has(.tnd-list-page) #ui-datepicker-div .ui-state-hover,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-content .ui-state-hover,
body:has(.tnd-list-page) #ui-datepicker-div .ui-state-focus,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-content .ui-state-focus { background: var(--cream-2) !important; color: var(--ink) !important; }
body:has(.tnd-list-page) #ui-datepicker-div .ui-state-active,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-content .ui-state-active,
body:has(.tnd-list-page) #ui-datepicker-div .ui-state-highlight,
body:has(.tnd-list-page) #ui-datepicker-div .ui-widget-content .ui-state-highlight { background: var(--primary) !important; color: #fff !important; }
body:has(.tnd-list-page) #ui-datepicker-div select { height: 30px; border: 1px solid var(--paper-edge) !important; border-radius: 8px; padding: 0 6px; font-size: 13px; background: var(--paper-2) !important; color: var(--ink) !important; }

/* drawer loading spinner */
.tendi-skin .tnd-drawer-loading { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.tendi-skin .tnd-drawer-loading .tnd-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--paper-edge); border-top-color: var(--primary); animation: tndSpin 0.7s linear infinite; }

/* The generic drawer now emits the Users .up-* / .tnd-pane-edit class structure, so the identity
   card, segmented tabs, .tnd-tabpanel cards and the .tnd-pane.is-readonly read-only treatment are
   all INHERITED from the Users pane CSS above, no parallel styles. Only the bridge for the reused
   LEGACY form (.form-horizontal markup, which differs from the Users hand-built .field markup): */
/* legacy form rows stack as single-column fields inside each tab card (matches the .field flow) */
.tendi-skin .tnd-drawer .tnd-pane-edit .row { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.tendi-skin .tnd-drawer .tnd-pane-edit .row > h3,
.tendi-skin .tnd-drawer .tnd-pane-edit .row > h4,
.tendi-skin .tnd-drawer .tnd-pane-edit .row > legend { margin: 2px 0 0; }
/* read-only: the custom dropdown + file/color render as text / hidden (native inputs are handled by
   the Users `.tnd-pane.is-readonly .tnd-pane-edit input/select/textarea` rule above) */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-trigger { border-color: transparent !important; background: transparent !important; padding-left: 0 !important; pointer-events: none; box-shadow: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .tnd-select-caret { display: none !important; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="file"],
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit .text-muted,
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit small { display: none; }
/* read-only color → a small static swatch (shows the chosen colour, not hidden) */
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="color"] {
  display: inline-block !important; width: 40px; height: 22px; padding: 0 !important; pointer-events: none;
  -webkit-appearance: auto !important; appearance: auto !important;
  border: 1px solid var(--paper-edge) !important; border-radius: 6px !important;
}
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.tendi-skin .tnd-pane.is-readonly .tnd-pane-edit input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }

/* the in-form Save/submit is replaced by the drawer HEAD Save (head Save still proxies to it):
   hide every in-form submit, not just the ones in a .btnContainer/fieldset */
.tendi-skin .tnd-drawer .tnd-pane-body button[type="submit"],
.tendi-skin .tnd-drawer .tnd-pane-body input[type="submit"],
.tendi-skin .tnd-drawer .tnd-pane-body button#Save,
.tendi-skin .tnd-drawer .tnd-pane-body .btnContainer { display: none !important; }

/* ============================================================
   BUS-ROUTE CHILDREN: chip multiselect (in the side-pane editor, Children tab)
   The bus-route form wraps the #children search input + the #children_wrapper
   chip list in a .tnd-childbox. Each selected child is a violet .tnd-child-chip
   pill (legacy class .child_row kept), mirroring the SMS-notice "Groups" chips:
   a .chipbox container holding .chip pills + an inline search input. The legacy
   style.css `.children_wrapper li>div{width:91%;background:#f5f5f5}` +
   `.remove_child{absolute;pink}` rules are RESET below; selectors carry enough
   specificity (2+ classes / ids) to outrank style.css without touching it.
   ADDITIVE: no id/class/name changed. Scoped to .tendi-skin so it applies in
   the drawer (its body is inside .tendi-skin) and any other skinned context.
   ============================================================ */
/* the field stacks full-width inside the drawer's field grid */
.tendi-skin .tnd-drawer .tnd-pane-edit .tnd-tabpanel > .form-group:has(.tnd-childbox) { grid-column: 1 / -1; }

/* ---- the chip box: cream surface, hairline, rounded, flex-wrap, focus ring ---- */
.tnd-childbox {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: var(--cream); border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  padding: 8px 9px; min-height: 42px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.tnd-childbox:focus-within {
  background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
/* the <ul> is a pass-through wrapper so its chip <li>s flow inline with the input. Scoped to the
   chipbox so it never dissolves a children_wrapper <ul> on any OTHER form rendered in the drawer. */
.tnd-childbox > ul.children_wrapper { display: contents; list-style: none; margin: 0; padding: 0; }

/* ---- the inline search input: borderless, transparent, grows to fill the row ---- */
.tnd-childbox .tnd-childbox-input,
.tnd-childbox input#children {
  flex: 1 1 160px; min-width: 140px; width: auto;
  border: none !important; background: transparent !important; box-shadow: none !important;
  outline: none !important; padding: 5px 4px; margin: 0; height: auto; min-height: 0;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.tnd-childbox .tnd-childbox-input::placeholder { color: var(--ink-4); font-weight: 400; }

/* ---- a child chip (legacy li.child_row): violet pill, exactly the SMS-notice .chip look ---- */
ul.children_wrapper li.child_row.tnd-child-chip {
  position: static; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  margin: 0; min-height: 0; cursor: default;             /* resets legacy .child_row cursor:all-scroll (reorder is disabled here) */
  padding: 4px 5px 4px 11px; border-radius: var(--radius-full); overflow: visible;
  background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary); transition: border-color .13s, background .13s; max-width: 100%;
}
ul.children_wrapper li.child_row.tnd-child-chip:hover { border-color: color-mix(in srgb, var(--primary) 32%, transparent); }
/* RESET the legacy inner .row (width:91% / grey fill / fixed padding). display:contents dissolves the
   wrapper so name + meta become DIRECT flex items of the (nowrap) chip → one slim single line, immune
   to any legacy block/float on the descendants. */
ul.children_wrapper li.child_row.tnd-child-chip > .tnd-chip-body,
ul.children_wrapper li.child_row.tnd-child-chip > .row {
  display: contents; width: auto; height: auto; margin: 0; padding: 0; background: transparent;
}
ul.children_wrapper li.child_row.tnd-child-chip .child-name {
  float: none; width: auto; padding: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--primary); line-height: 1.4; white-space: nowrap; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
/* the class badge: a quiet muted "· 808 / A" right after the name so the pill stays a slim single line */
ul.children_wrapper li.child_row.tnd-child-chip .branch-detail {
  float: none; display: inline-flex; align-items: baseline; flex: none; width: auto; padding: 0; margin: 0; text-align: left; white-space: nowrap;
}
ul.children_wrapper li.child_row.tnd-child-chip .branch-detail .branch-name,
ul.children_wrapper li.child_row.tnd-child-chip .branch-detail .class-name {
  display: inline; font-size: 10.5px; font-weight: 600; line-height: 1.4;
  color: color-mix(in srgb, var(--primary) 70%, var(--ink-3)); background: transparent;
  padding: 0; border-radius: 0; white-space: nowrap; opacity: .9;
}
ul.children_wrapper li.child_row.tnd-child-chip .branch-detail .branch-name::before { content: "·\00a0"; opacity: .55; }
/* the round × remove (legacy .remove_child > a.remove_child_block): tint on hover */
ul.children_wrapper li.child_row.tnd-child-chip .remove_child {
  position: static; float: none; width: auto; height: auto; background: transparent; border-radius: 0;
  flex: none; display: inline-flex; align-items: center; padding: 0; margin: 0;
}
ul.children_wrapper li.child_row.tnd-child-chip .remove_child_block {
  display: grid; place-items: center; width: 17px; height: 17px; padding: 0;
  border-radius: var(--radius-full); color: var(--primary); background: transparent; font-size: 9px;
  text-decoration: none; cursor: pointer; transition: background .13s; line-height: 1;
}
ul.children_wrapper li.child_row.tnd-child-chip .remove_child_block:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
}

/* the autocomplete validation error label (appended into #children_wrapper) sits BELOW the box */
#children_wrapper label.child_id_error {
  display: block; flex-basis: 100%; order: 99; margin: 0; color: var(--critical); font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: 0; padding: 0; background: none; border: none;
}

/* ---- READ-ONLY (the pane carries .tnd-pane.is-readonly): clean static pills, no add / no × ---- */
.tendi-skin .tnd-pane.is-readonly .tnd-childbox {
  background: transparent; border-color: transparent; box-shadow: none; padding: 0; gap: 7px; min-height: 0;
}
.tendi-skin .tnd-pane.is-readonly .tnd-childbox .tnd-childbox-input,
.tendi-skin .tnd-pane.is-readonly .tnd-childbox input#children { display: none !important; }
.tendi-skin .tnd-pane.is-readonly ul.children_wrapper li.child_row.tnd-child-chip .remove_child { display: none !important; }
.tendi-skin .tnd-pane.is-readonly ul.children_wrapper li.child_row.tnd-child-chip { padding: 4px 11px; }
/* no children selected → a muted "-" (matches the Users-pane empty convention) */
.tendi-skin .tnd-pane.is-readonly .tnd-childbox:not(:has(li.child_row))::after {
  content: "-"; color: var(--ink-5); font-size: 14px; font-weight: 500;
}

/* the #children jQuery-UI autocomplete dropdown is appended to <body> (outside .tendi-skin) and
   would otherwise show the legacy jQuery-UI theme. The form tags it `.tnd-child-menu` (autocomplete
   `open` callback) so this reskin applies wherever it opens (drawer OR full add/edit page), targets
   only the children menu, and never touches other pages. !important beats jquery-ui.min.css.
   Width is capped to the viewport; the JS `position.using` clamp keeps it ≥12px off every edge. */
ul.ui-autocomplete.ui-menu.tnd-child-menu {
  padding: 6px !important; border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-lg) !important;
  background: var(--paper-2) !important; box-shadow: var(--shadow-overlay) !important; z-index: 3200 !important;
  font-family: var(--font-sans) !important; max-height: 320px; overflow-y: auto;
  max-width: min(360px, calc(100vw - 24px)) !important; box-sizing: border-box !important; overflow-x: hidden;
}
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item { margin: 0 !important; list-style: none; }
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item a,
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item .ui-menu-item-wrapper {
  display: block; margin: 0 !important; padding: 8px 11px !important; border: none !important; border-radius: var(--radius-md) !important;
  background: transparent !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  cursor: pointer; white-space: normal;
}
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item:not(:last-child) a,
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item:not(:last-child) .ui-menu-item-wrapper { border-bottom: none !important; }
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item a.ui-state-focus,
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item a:hover,
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: var(--primary-tint) !important; color: var(--primary) !important; background-image: none !important;
}
ul.ui-autocomplete.ui-menu.tnd-child-menu .suggestion-box-address {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-4) !important;
}
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item a.ui-state-focus .suggestion-box-address,
ul.ui-autocomplete.ui-menu.tnd-child-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active .suggestion-box-address { color: var(--primary) !important; opacity: .8; }

/* ============================================================
   BUS ROUTE ITINERARY: reorder modal (#reorder_routes_children)
   Route-spine layout: children grouped into numbered, drag-sortable
   stops. Markup is injected by template.php's reorderRouteChildren().
   Scoped to the modal id + the injected `.tnd-itin` wrapper, with 2-class
   selectors so we cleanly outrank the legacy style.css `.children_wrapper`
   / `.child_row` rules without touching them.
   ============================================================ */

/* --- side pane: render the Bootstrap modal as a right-side drawer that slides in --- */
#reorder_routes_children.fade .modal-dialog { transform: translateX(100%); transition: transform .28s ease; }
/* Bootstrap 3 marks a shown modal with `.in` (BS4 uses `.show`): support both */
#reorder_routes_children.in .modal-dialog,
#reorder_routes_children.show .modal-dialog { transform: translateX(0); }
/* the modal is NOT inside a .tendi-skin wrapper, so set the design-system font here,
   otherwise the content inherits the legacy app font and reads "off" vs the mockup */
#reorder_routes_children { font-family: var(--font-sans); }
#reorder_routes_children .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: 600px; height: 100%; pointer-events: auto; }
#reorder_routes_children .modal-content { height: 100%; display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--paper-edge); border-radius: 0; background: var(--paper-2); box-shadow: var(--shadow-overlay); overflow: hidden; }
/* the form wraps header+body (so #save_reorder stays inside #frmReorderChild) → it is the flex column */
#reorder_routes_children #frmReorderChild { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* header is FIXED (non-scrolling): title left, Cancel / Save / × right */
#reorder_routes_children .modal-header { display: flex; flex: none; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--paper-edge); background: var(--paper); }
#reorder_routes_children .tnd-itin-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
/* Save/Cancel = .btn-sm pills (modal isn't in a .tendi-skin scope, so replicate the Users-page look) */
#reorder_routes_children .tnd-itin-actions .btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-full); font-family: var(--font-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--paper-edge); box-shadow: none; text-shadow: none; cursor: pointer; transition: all .15s; line-height: 1.4; }
#reorder_routes_children .tnd-itin-actions .btn-sm:hover { background: var(--cream); color: var(--ink); border-color: var(--paper-edge-strong); }
#reorder_routes_children .tnd-itin-actions .btn-sm.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
#reorder_routes_children .tnd-itin-actions .btn-sm.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
#reorder_routes_children .modal-body { flex: 1; min-height: 0; padding: 0; overflow-y: auto; background: var(--paper-2); }
/* close button: match the Users-page drawer's .tnd-pane-close (32px rounded, faint ink) */
#reorder_routes_children .modal-header .close { position: relative; float: none; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 9px; display: grid; place-items: center; color: var(--ink-4); opacity: 1; text-shadow: none; transition: background .13s, color .13s; }
#reorder_routes_children .modal-header .close:hover { background: var(--cream-2); color: var(--ink); opacity: 1; }
#reorder_routes_children .modal-header .close span { position: static !important; margin: 0 !important; font-size: 20px; line-height: 1; font-weight: 400; }

/* --- header lockup (set into .modal-title) --- */
#reorder_routes_children .modal-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font-weight: 600; }
.tnd-itin-busicon { flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; }
.tnd-itin-busicon svg { width: 20px; height: 20px; }
.tnd-itin-titlewrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tnd-itin-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; }
.tnd-itin-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tnd-itin-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); line-height: 1.5; }
.tnd-itin-pill svg { width: 12px; height: 12px; }
.tnd-itin-pill--dir { background: var(--primary-tint); color: var(--primary); text-transform: capitalize; }
.tnd-itin-pill--bus { background: var(--cream-2); color: var(--ink-3); text-transform: capitalize; }
.tnd-itin-count { font-size: 11.5px; color: var(--ink-4); font-weight: 500; }
.tnd-itin-count b { color: var(--ink-2); font-weight: 600; }

/* --- toolbar (sticky search) + body padding --- */
.tnd-itin-toolbar { position: sticky; top: 0; z-index: 3; background: var(--paper-2); padding: 10px 16px; border-bottom: 1px solid var(--paper-edge); }
.tnd-itin-search { position: relative; display: flex; align-items: center; margin: 0; }
.tnd-itin-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--ink-4); pointer-events: none; }
.tnd-itin-q { width: 100%; font-family: var(--font-sans); font-size: 13px; color: var(--ink); background: var(--cream); border: 1px solid var(--paper-edge); border-radius: var(--radius-md); padding: 7px 11px 7px 31px; transition: .15s; }
.tnd-itin-q::placeholder { color: var(--ink-4); }
.tnd-itin-q:hover { border-color: var(--paper-edge-strong); }
.tnd-itin-q:focus { outline: none; background: var(--paper-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-itin-body { padding: 14px 16px 18px; }

/* --- reset the legacy list chrome inside the spine --- */
.tnd-itin .tnd-itin-stops { list-style: none; width: auto; margin: 0; padding: 0; }

/* --- the connecting spine line + numbered nodes ---
   `.tnd-rail`/`.tnd-dot` would COLLIDE with tnd-nav.css's UNSCOPED sidebar `.tnd-rail`
   (flex-direction:column; align-items:stretch; padding:14px 10px 18px) which leaks in and
   pushes the badge off the line. Namespaced to `.tnd-itin-rail`/`.tnd-itin-dot` + made
   self-contained (explicit flex-direction/padding/gap) so nothing can bleed in. */
.tnd-itin .tnd-itin-rail { flex: none; width: 28px; padding: 0; gap: 0; position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; }
.tnd-itin .tnd-itin-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -10px; width: 2px; transform: translateX(-50%); background: var(--cream-3); }
.tnd-itin .tnd-itin-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink-5); background: var(--paper-2); box-shadow: 0 0 0 3px var(--paper-2); align-self: center; }
.tnd-itin-cap { display: flex; gap: 11px; align-items: center; min-height: 20px; }
.tnd-itin-cap--start .tnd-itin-rail::before { top: 50%; }
.tnd-itin-cap--end { margin-top: 6px; }
.tnd-itin-cap--end .tnd-itin-rail::before { top: 0; bottom: auto; height: 50%; }
.tnd-itin-caplbl { font-size: 10.5px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; }

/* --- a stop (the drag-sortable unit; li also carries legacy .child_row) --- */
.tnd-itin .tnd-stop { display: flex; gap: 11px; align-items: stretch; margin: 0 0 10px; min-height: 0; border-radius: 0; cursor: default; }
.tnd-itin .tnd-stop-num { align-self: flex-start; margin-top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--paper-2); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.tnd-itin .tnd-stop.is-gap .tnd-stop-num { background: var(--attention); }
/* the card is the bounded unit → strongest border; corners clipped.
   width/padding/height/box-shadow explicitly RESET the legacy `ul.children_wrapper li>div`
   rule (style.css), which would otherwise inject 91% width + 5px 7px padding INSIDE each card,
   insetting the header tint and shifting the content vs the mockup. */
.tnd-itin .tnd-stop-card { flex: 1; min-width: 0; width: auto; height: auto; padding: 0; margin: 0; border: 1.5px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); box-shadow: none; overflow: hidden; transition: border-color .13s; }
.tnd-itin .tnd-stop-card:hover { border-color: color-mix(in srgb, var(--primary) 42%, transparent); }
.tnd-itin .tnd-stop--match .tnd-stop-card { border-color: var(--primary); }

/* stop header: the drag handle, whisper-tinted so each stop has a clear top */
.tnd-itin .tnd-stop-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 11px; cursor: grab; background: color-mix(in srgb, var(--primary) 4.5%, var(--paper-2)); border-bottom: 1px solid var(--paper-edge); }
.tnd-itin .tnd-stop-head:active { cursor: grabbing; }
.tnd-itin .tnd-stop-addr { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnd-itin .tnd-stop-cnt { font-weight: 500; color: var(--ink-4); }
.tnd-itin .tnd-stop-end { margin-left: auto; flex: none; display: flex; align-items: center; gap: 7px; }
.tnd-itin .tnd-stop-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--attention); white-space: nowrap; }
.tnd-itin .tnd-stop-flag svg { width: 12px; height: 12px; }
.tnd-itin .tnd-stop-grip { flex: none; color: var(--ink-5); display: flex; align-items: center; justify-content: center; width: 22px; height: 24px; }
.tnd-itin .tnd-stop-grip svg { width: 13px; height: 16px; }

/* children, one dense line each, faint inset dividers */
.tnd-itin .tnd-kids { background: var(--paper-2); }
.tnd-itin .tnd-kid { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 11px; }
.tnd-itin .tnd-kid + .tnd-kid::before { content: ""; position: absolute; top: 0; left: 43px; right: 10px; height: 1px; background: color-mix(in srgb, var(--paper-edge) 50%, transparent); }
.tnd-itin .tnd-kid--match { background: var(--primary-tint); border-radius: var(--radius-sm); }
.tnd-itin .tnd-av { flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; }
.tnd-itin .tnd-kid-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnd-itin .tnd-kid-end { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.tnd-itin .tnd-kid-dest { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--cream); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.tnd-itin .tnd-kid-dest svg { width: 11px; height: 11px; color: var(--ink-4); }
.tnd-itin .tnd-kid-dest small { font-weight: 500; color: var(--ink-4); }

/* --- drag feedback: placeholder + lifted helper --- */
.tnd-itin .tnd-stop-placeholder { list-style: none; margin: 0 0 10px 39px; min-height: 44px; border: 1.5px dashed var(--primary); border-radius: var(--radius-md); background: var(--primary-tint); visibility: visible !important; }
.tnd-itin .ui-sortable-helper .tnd-stop-card { border-color: var(--primary); box-shadow: var(--shadow-overlay-sm); }
.tnd-itin .ui-sortable-helper .tnd-stop-head { cursor: grabbing; }

/* dedicated "open itinerary" icon button. Its own column in the bus-routes list,
   right before Action (so the row's 3-dot kebab can't hide it) */
.tnd-list-table .tnd-itin-open { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); color: var(--primary); background: var(--primary-tint); border: 1px solid transparent; transition: background .13s, color .13s; cursor: pointer; text-decoration: none; }
.tnd-list-table .tnd-itin-open:hover { background: var(--primary); color: #fff; }
.tnd-list-table .tnd-itin-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-list-table .tnd-itin-open svg { width: 16px; height: 16px; }
/* the itinerary item in the 3-dot kebab uses the same route SVG as its column
   (swapped in by tendi-list.js): size it like the flyout's <i> icons */
.tendi-skin .tnd-rowmenu-pop .tnd-rowmenu-item svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); }

/* ============================================================
   FILE UPLOAD pages (child/employee): token-hook scope `.tnd-file-upload`.
   Rebuilt to mirror reskin-harness/file-upload-reskin.html 1:1. NOT `.tendi-skin`
   (its *{} reset would wipe the Bootstrap grid). Additive: every legacy
   id/class/name/handler preserved. Fully flat (§4).
   ============================================================ */
.tnd-file-upload, .tnd-file-upload * { box-sizing: border-box; }
.tnd-file-upload { color: var(--ink); font-family: var(--font-sans); font-size: 14px; }
.tnd-file-upload .box { background: transparent; border: 0; box-shadow: none; margin: 0; }
.tnd-file-upload .box-header { display: none; }
/* also reset the legacy .box-content drop-shadow/radius (style.css): content sits flat on the canvas, no outer card (§4 no-shadow) */
.tnd-file-upload .box-content { background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.tnd-file-upload .row { margin: 0; }

/* --- header lockup --- */
.tnd-file-upload .fu-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.tnd-file-upload .fu-head .ico { flex: none; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; }
.tnd-file-upload .fu-head .ico svg { width: 23px; height: 23px; display: block; }
.tnd-file-upload .fu-head .htext { flex: 1; min-width: 0; }
.tnd-file-upload .fu-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.tnd-file-upload .fu-head p { margin: 0; font-size: 14.5px; color: var(--ink-4); line-height: 1.5; }

/* --- filter panel --- */
.tnd-file-upload .fu-filters { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.tnd-file-upload .fu-frow { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.tnd-file-upload .fld { display: inline-flex; flex-direction: column; gap: 5px; margin: 0; }
.tnd-file-upload .fld > span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.tnd-file-upload .fld > span .opt { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--ink-5); }

/* native <select> styled as the .tnd-select trigger (drawn caret) */
.tnd-file-upload .fu-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 38px; min-width: 150px; padding: 0 32px 0 11px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background-color: var(--paper-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.tnd-file-upload .fu-select:hover { border-color: var(--primary); }
.tnd-file-upload .fu-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* kitchen-sink .tnd-select on the filter row: each native <select> is wrapped in a .tendi-skin
   island so the component CSS applies on this non-.tendi-skin page; trigger tuned to the 38px fields */
.tnd-file-upload .fu-ddwrap { display: block; min-width: 160px; font-size: 13px; position: relative; }
/* the .tendi-skin island traps the menu's z-index; lift the whole dropdown above later filter
   rows (.fu-checks / .fu-statbar) when open so their checkbox boxes don't bleed over the menu */
.tnd-file-upload .fu-ddwrap:has(.tnd-select.is-open) { z-index: 200; }
.tnd-file-upload .fu-ddwrap .tnd-select-trigger { height: 38px; padding: 0 11px; background: var(--paper-2); border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; }
.tnd-file-upload .fu-ddwrap .tnd-select-trigger:hover { border-color: var(--primary); }
.tnd-file-upload .fu-ddwrap .tnd-select.is-open .tnd-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* trigger stays compact, but the open menu widens to fit the full option names (no truncation) */
.tnd-file-upload .fu-ddwrap .tnd-select-menu { right: auto; min-width: 100%; width: max-content; max-width: 340px; }

/* ============================================================
   FILE UPLOAD popups/dialogs: `.tnd-fu-pop` scope (added to each Bootstrap
   modal root). NOT `.tendi-skin` (its *{} reset breaks BS modal centering).
   Byte-matches reskin-harness/file-upload-reskin.html. `!important` only where
   it must beat the page's legacy `.modal-content` / `.btn` rules.
   ============================================================ */
.tnd-fu-pop, .tnd-fu-pop * { box-sizing: border-box; }
/* THE BACKDROP PAIRING: read this before touching either number.
   BOTH halves live here, globally, and NOWHERE ELSE. That is the whole point.

   They used to be declared in each page's inline <style>, at three different values for the same
   global selector: z:9 + #ddd on nine legacy pages, z:3040 + dark on the two file-upload pages,
   z:3000 on Vaccines & Forms. Because the shell INJECTS page fragments and never removes their
   <style> blocks, every page you visit leaves its rule behind in the DOM — so the winner was
   whichever page you happened to open last, at equal specificity. A modal was clickable or dead
   depending on your navigation history, which is why the bug kept "coming back somewhere else".

   Backdrop 3040 clears the z:2000 admin header; the dialog sits one layer above it at 3050.
   Modals are portalled to <body>, so neither can be scoped under .tendi-skin. Keep 3050 below the
   3100/3200 dropdown layers, which must stay clickable inside an open modal. If a page needs a
   different modal z-index, it is almost certainly wrong — fix it here instead. */
.modal-backdrop.in { z-index: 3040; background-color: rgba(24, 24, 27, 0.45); opacity: 1; }
.modal { z-index: 3050; }
.tnd-fu-pop.modal { z-index: 3050; }
/* …and the z:3050 above only reaches the header for modals that ARE portalled to <body>
   (the file-upload popups). Every other modal in the app is markup INSIDE the page
   fragment, i.e. inside `#content`, which legacy style.css gives `position:relative;
   z-index:10`. That is a STACKING CONTEXT: it traps its descendants, so a modal's 3050 is
   only ever compared with its siblings, and the whole dialog paints UNDER the fixed
   z:2000 admin header, the popup's top edge is tucked beneath the header bar on every
   page that has one.
   Fix without moving any DOM (portalling would strip a modal's `.tendi-skin` ancestry and
   duplicate ids when the SPA re-injects a fragment): drop the stacking context for as long
   as a modal is open. Bootstrap puts `.modal-open` on <body> exactly then, so this is inert
   at all other times, and #content returning to `z-index:auto` still sits under the fixed
   header (which keeps its own z:2000), only the modal layer moves above it.
   The backdrop is raised to sit right below the dialog so the dimmer covers the header too;
   a dozen page views already did this locally, this makes it uniform. */
body.modal-open #content { z-index: auto !important; }
body.modal-open .modal-backdrop,
body.modal-open .modal-backdrop.in { z-index: 3040 !important; }
.tnd-fu-pop .modal-dialog { width: 580px; max-width: 95%; margin: 40px auto; }
.tnd-fu-pop.fu-sm .modal-dialog { width: 460px; }
.tnd-fu-pop.fu-lg .modal-dialog { width: 720px; }
.tnd-fu-pop .modal-content { border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-overlay) !important; margin-top: 0 !important; background: var(--paper-2); overflow: hidden; font-family: var(--font-sans); color: var(--ink); }

/* head */
.tnd-fu-pop .fu-modal-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--paper-edge); }
.tnd-fu-pop .fu-modal-head .ttl { flex: 1; min-width: 0; }
.tnd-fu-pop .fu-modal-head .ttl h3, .tnd-fu-pop .fu-modal-head .ttl .modal-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; text-align: left; }
.tnd-fu-pop .fu-modal-head .ttl .sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.tnd-fu-pop .iconbtn { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong); background: var(--paper-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 1; float: none; margin: 0; text-shadow: none; }
.tnd-fu-pop .iconbtn:hover { border-color: var(--primary); color: var(--primary); background: var(--cream-2); }
.tnd-fu-pop .iconbtn svg { width: 16px; height: 16px; display: block; }
.tnd-fu-pop .iconbtn > span { position: static !important; margin: 0 !important; }

/* body + foot */
.tnd-fu-pop .fu-modal-body { padding: 18px; max-height: 74vh; overflow: auto; }
.tnd-fu-pop .fu-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--paper-edge); background: var(--cream); }
.tnd-fu-pop .fu-modal-foot .hint { font-size: 11.5px; color: var(--ink-4); }
.tnd-fu-pop .fu-modal-foot .hint.warn { color: var(--attention); font-weight: 600; }
.tnd-fu-pop .fu-modal-foot .foot-btns { display: flex; gap: 8px; align-items: center; }

/* buttons (modals aren't .tendi-skin → define here) */
.tnd-fu-pop .tnd-btn { display: inline-flex; align-items: center; gap: 7px; height: auto; font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1; padding: 9px 14px; 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; transition: background .15s, border-color .15s; text-decoration: none; box-shadow: none; text-shadow: none; }
.tnd-fu-pop .tnd-btn svg { width: 15px; height: 15px; display: block; }
.tnd-fu-pop .tnd-btn:hover { background: var(--cream-2); border-color: var(--primary); color: var(--ink); }
.tnd-fu-pop .tnd-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.tnd-fu-pop .tnd-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.tnd-fu-pop .tnd-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.tnd-fu-pop .tnd-btn--ghost:hover { background: var(--cream-2); border-color: transparent; color: var(--ink); }
.tnd-fu-pop .tnd-btn h5 { display: inline; margin: 0; padding: 0; font: inherit; }

/* fields */
.tnd-fu-pop .dlg-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tnd-fu-pop .dlg-fld > label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); text-align: left; margin: 0; }
.tnd-fu-pop .dlg-fld > label .opt { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--ink-5); }
.tnd-fu-pop .fu-in { height: 38px; padding: 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); width: 100%; }
.tnd-fu-pop .fu-in:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop .fu-ta { min-height: 96px; padding: 10px 11px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink); resize: vertical; width: 100%; }
.tnd-fu-pop .fu-ta:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop .tnd-date { height: 38px; padding: 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); }
.tnd-fu-pop .tnd-date:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop .fu-help { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.tnd-fu-pop .fu-help.spread { display: flex; justify-content: space-between; gap: 10px; }

/* merge tags */
.tnd-fu-pop .fu-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: var(--cream); border: 1px solid var(--paper-edge); border-radius: var(--radius-md); }
.tnd-fu-pop .fu-tags .lab { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin-right: 2px; }
.tnd-fu-pop .fu-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--primary); background: var(--primary-tint); border: 1px solid rgba(90,63,194,.18); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; transition: background .12s, color .12s; }
.tnd-fu-pop .fu-tag:hover { background: var(--primary); color: #fff; }

/* recipients mini-table */
.tnd-fu-pop .fu-mini-table { width: 100%; border-collapse: collapse; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); overflow: hidden; }
.tnd-fu-pop .fu-mini-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--cream-2); padding: 9px 11px; border: 0; border-bottom: 1px solid var(--paper-edge); }
.tnd-fu-pop .fu-mini-table td { padding: 9px 11px; border: 0; border-bottom: 1px solid var(--paper-edge); font-size: 12.5px; color: var(--ink-2); background: var(--paper-2); }
.tnd-fu-pop .fu-mini-table tr:last-child td { border-bottom: 0; }
.tnd-fu-pop .fu-mini-table .num { font-variant-numeric: tabular-nums; }
.tnd-fu-pop .fu-mini-table .id { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* nested DataTables controls inside fu-pop modals (the recipients picker is a
   DataTable + BS integration: .form-control length/search + ul.pagination). The
   list-page reskin is scoped to .tendi-skin.tnd-list-page, so restyle them here. */
.tnd-fu-pop .dataTables_wrapper { font-family: var(--font-sans); color: var(--ink-3); }
.tnd-fu-pop .dataTables_length, .tnd-fu-pop .dataTables_filter { margin-bottom: 11px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tnd-fu-pop .dataTables_length label, .tnd-fu-pop .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.tnd-fu-pop .dataTables_length select {
  width: auto; height: 32px; padding: 0 30px 0 11px; appearance: none; -webkit-appearance: none; box-shadow: none;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background-color: var(--paper-2); color: var(--ink); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%203l4%204%204-4'%20fill='none'%20stroke='%236b6480'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}
.tnd-fu-pop .dataTables_length select:hover { border-color: var(--primary); }
.tnd-fu-pop .dataTables_length select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop .dataTables_filter input {
  width: 240px; max-width: 100%; height: 34px; margin: 0; padding: 0 12px 0 34px; box-shadow: none;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13px; color: var(--ink);
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
}
.tnd-fu-pop .dataTables_filter input::placeholder { color: var(--ink-4); }
.tnd-fu-pop .dataTables_filter input:hover { border-color: var(--primary); }
.tnd-fu-pop .dataTables_filter input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop .dataTables_info { font-size: 12px; color: var(--ink-4); padding-top: 12px; }
.tnd-fu-pop .dataTables_paginate { padding-top: 8px; margin-top: 0; }
.tnd-fu-pop .dataTables_paginate ul.pagination { margin: 0; display: inline-flex; gap: 4px; }
/* kill the legacy devoops .paginate_button blue bg (color.css) that sits on the <li> */
.tnd-fu-pop .dataTables_paginate ul.pagination > li.paginate_button { background: transparent; }
.tnd-fu-pop .dataTables_paginate ul.pagination > li > a,
.tnd-fu-pop .dataTables_paginate ul.pagination > li > span {
  position: static; min-width: 30px; height: 30px; padding: 0 10px; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md) !important; background: var(--paper-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1;
}
.tnd-fu-pop .dataTables_paginate ul.pagination > li > a:hover { border-color: var(--primary); color: var(--primary); background: var(--cream-2); }
.tnd-fu-pop .dataTables_paginate ul.pagination > li.active > a,
.tnd-fu-pop .dataTables_paginate ul.pagination > li.active > span,
.tnd-fu-pop .dataTables_paginate ul.pagination > li.active > a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.tnd-fu-pop .dataTables_paginate ul.pagination > li.disabled > a,
.tnd-fu-pop .dataTables_paginate ul.pagination > li.disabled > span { color: var(--ink-5); background: var(--paper-2); border-color: var(--paper-edge); cursor: default; }

/* "Show N entries" upgraded to the custom .tnd-select (enhanced + wrapped in a .tendi-skin
   island in JS so the component CSS (scoped to .tendi-skin), applies inside the fu-pop modal) */
.tnd-fu-pop .dataTables_length .tnd-len-island { display: inline-block; vertical-align: middle; }
.tnd-fu-pop .dataTables_length .tnd-select { min-width: 78px; }
.tnd-fu-pop .dataTables_length .tnd-select-trigger { height: 32px; min-width: 78px; padding: 0 30px 0 12px; font-size: 12.5px; font-weight: 600; }

/* option rows (upcoming hub) */
.tnd-fu-pop .fu-optgroup { margin-bottom: 16px; }
.tnd-fu-pop .fu-optgroup > h4 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; text-align: left; }
.tnd-fu-pop .fu-optgroup > h4 .line { flex: 1; height: 1px; background: var(--paper-edge); }
.tnd-fu-pop .fu-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--paper-2); }
.tnd-fu-pop .fu-opt .oi { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; flex: none; }
.tnd-fu-pop .fu-opt .oi svg { width: 16px; height: 16px; display: block; }
.tnd-fu-pop .fu-opt .otext { flex: 1; min-width: 0; text-align: left; }
.tnd-fu-pop .fu-opt .otext b { font-weight: 600; font-size: 13px; color: var(--ink); display: block; }
.tnd-fu-pop .fu-opt .otext small { font-size: 11.5px; color: var(--ink-4); }
.tnd-fu-pop .fu-opt .tnd-date { height: 34px; min-width: 150px; }
.tnd-fu-pop .fu-opt > input[type="radio"] { accent-color: var(--primary); width: 17px; height: 17px; flex: none; margin: 0; cursor: pointer; }
/* keep JS-toggled hidden elements (.d-none) hidden: our .fu-opt/.tnd-btn rules would otherwise outrank the legacy non-!important .d-none */
.tnd-fu-pop .d-none { display: none !important; }

/* filetype pill (matches reports-reskin.html) */
.tnd-fu-pop .fmt { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: var(--radius-full); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; flex: none; }
.tnd-fu-pop .fmt.pdf { color: var(--critical); background: var(--critical-tint); }
.tnd-fu-pop .fmt.xlsx { color: var(--ok); background: var(--ok-tint); }
.tnd-fu-pop .fmt.zip { color: var(--ink-3); background: var(--cream-2); }

/* click-to-download rows (download docs) */
.tnd-fu-pop .fu-dlrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 8px; background: var(--paper-2); cursor: pointer; transition: border-color .12s, background .12s; }
.tnd-fu-pop .fu-dlrow:hover { border-color: var(--primary); background: var(--cream-2); }
.tnd-fu-pop .fu-dlrow .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; text-align: left; }
.tnd-fu-pop .fu-dlrow .dli { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; flex: none; transition: background .12s, color .12s; }
.tnd-fu-pop .fu-dlrow:hover .dli { background: var(--primary); color: #fff; }
.tnd-fu-pop .fu-dlrow .dli svg { width: 15px; height: 15px; display: block; }
/* generating state: download icon → spinning loader */
@keyframes fu-spin { to { transform: rotate(360deg); } }
.tnd-fu-pop .fu-dlrow.is-loading { pointer-events: none; }
.tnd-fu-pop .fu-dlrow.is-loading .dli { background: var(--primary-tint); color: var(--primary); }
.tnd-fu-pop .fu-dlrow.is-loading .dli svg { display: none; }
.tnd-fu-pop .fu-dlrow.is-loading .dli::after { content: ''; width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: fu-spin .6s linear infinite; }

/* native date field */
.tnd-file-upload .fu-date { height: 38px; min-width: 160px; padding: 0 11px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); }
.tnd-file-upload .fu-date:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* segmented (Past/Current/Future): legacy classes .date-filter-tabs/.tab-filter-btn/.active */
.tnd-file-upload .date-filter-tabs { display: inline-flex; height: 38px; background: var(--cream-2); border: 1px solid var(--paper-edge); border-radius: 11px; padding: 4px; gap: 2px; box-shadow: none; }
.tnd-file-upload .date-filter-tabs .tab-filter-btn { display: inline-flex; align-items: center; padding: 0 16px; height: auto; border: 0; background: transparent; color: var(--ink-3); font-family: var(--font-sans); font-weight: 600; font-size: 13px; border-radius: 8px; cursor: pointer; transition: all .14s; box-shadow: none; margin: 0; outline: none; }
.tnd-file-upload .date-filter-tabs .tab-filter-btn:hover:not(.active) { color: var(--ink); }
.tnd-file-upload .date-filter-tabs .tab-filter-btn.active { background: var(--paper-2); color: var(--primary); box-shadow: none; }

/* divider + drawn checkboxes */
.tnd-file-upload .fu-fdivider { height: 1px; background: var(--paper-edge); margin: 14px 0; }
.tnd-file-upload .fu-checks { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tnd-file-upload .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; user-select: none; margin: 0; font-weight: 500; }
.tnd-file-upload .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* drawn box renamed .box → .fu-cbx: legacy style.css has a global `.box{position:relative;z-index:1999}`
   (the devoops card) that the class-name collision was inheriting, floating the checkbox over the dropdown */
.tnd-file-upload .chk .fu-cbx { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--paper-edge-strong); background: var(--paper-2); display: grid; place-items: center; flex: none; }
.tnd-file-upload .chk .fu-cbx svg { width: 12px; height: 12px; color: #fff; opacity: 0; display: block; }
.tnd-file-upload .chk input:checked + .fu-cbx { background: var(--primary); border-color: var(--primary); }
.tnd-file-upload .chk input:checked + .fu-cbx svg { opacity: 1; }
.tnd-file-upload .chk input:focus-visible + .fu-cbx { box-shadow: 0 0 0 3px var(--focus-ring); }

/* --- status segment filters + search row --- */
.tnd-file-upload .fu-statbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tnd-file-upload .fu-stats { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tnd-file-upload .fu-stat { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--paper-edge-strong); background: var(--paper-2); cursor: pointer; transition: border-color .14s, background .14s; }
.tnd-file-upload .fu-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-4); }
.tnd-file-upload .fu-stat .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.tnd-file-upload .fu-stat .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.tnd-file-upload .fu-stat:hover { border-color: var(--primary); }
.tnd-file-upload .fu-stat.is-active { border-color: var(--primary); background: var(--primary-tint); box-shadow: 0 0 0 1px var(--primary) inset; }
.tnd-file-upload .fu-stat.t-ok .dot { background: var(--ok); }
.tnd-file-upload .fu-stat.t-missing .dot { background: var(--critical); }
.tnd-file-upload .fu-statbar .spacer { flex: 1; }

/* search (#fuSearch) */
.tnd-file-upload .fu-search { position: relative; min-width: 230px; }
.tnd-file-upload .fu-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); }
.tnd-file-upload .fu-search input { width: 100%; height: 38px; padding: 0 36px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.tnd-file-upload .fu-search input::placeholder { color: var(--ink-4); }
.tnd-file-upload .fu-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-file-upload .fu-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: 11px; color: var(--ink-4); border: 1px solid var(--paper-edge-strong); border-radius: 6px; padding: 1px 6px; background: var(--cream); }
/* hide the DataTables-injected search (replaced by #fuSearch) */
.tnd-file-upload .dataTables_filter { display: none; }

/* server-side loading veil → centered spinner over the table (legacy shows a mispositioned
   "Processing…"); mirrors the .tendi-skin list-page treatment, reusing the tndSpin keyframe */
.tnd-file-upload .dataTables_wrapper { position: relative; overflow: visible; }
.tnd-file-upload .dataTables_processing {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  background: color-mix(in srgb, var(--paper-2) 62%, transparent) !important;
  border: none !important; box-shadow: none !important; border-radius: var(--radius-lg) !important;
  z-index: 20 !important; font-size: 0 !important; color: transparent !important;
}
.tnd-file-upload .dataTables_processing > * { display: none !important; }
.tnd-file-upload .dataTables_processing::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--cream-3); border-top-color: var(--primary); animation: tndSpin 0.7s linear infinite;
}

/* --- action row (one primary, rest quiet) --- */
.tnd-file-upload .fu-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tnd-file-upload .fu-actions .spacer { flex: 1; }
.tnd-file-upload .fu-actions .tnd-btn { display: inline-flex; align-items: center; gap: 7px; height: auto; font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1; padding: 9px 14px; 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; transition: background .15s, border-color .15s; text-decoration: none; box-shadow: none; text-shadow: none; }
.tnd-file-upload .fu-actions .tnd-btn svg { width: 15px; height: 15px; display: block; }
.tnd-file-upload .fu-actions .tnd-btn:hover { background: var(--cream-2); border-color: var(--primary); color: var(--ink); }
.tnd-file-upload .fu-actions .tnd-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.tnd-file-upload .fu-actions .tnd-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.tnd-file-upload .fu-actions .tnd-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.tnd-file-upload .fu-actions .tnd-btn--ghost:hover { background: var(--cream-2); border-color: transparent; color: var(--ink); }

/* --- table card --- */
/* overflow:visible (card + .children-manage) so the foot's rows-per-page dropdown opens below the
   card without being clipped; the table itself scrolls + gets its rounded top corners via .fu-tscroll */
.tnd-file-upload .fu-tablewrap { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); overflow: visible; }
.tnd-file-upload .fu-tablewrap .children-manage { overflow: visible; border: 0; }
.tnd-file-upload table.fu-table { width: 100%; border-collapse: collapse; border: 0; margin: 0; background: var(--paper-2); font-size: 13px; }
.tnd-file-upload table.fu-table > thead > tr > th { background: var(--cream-2); color: var(--ink-3); text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 11px; white-space: nowrap; border: 0; border-bottom: 1px solid var(--paper-edge); vertical-align: middle; }
.tnd-file-upload table.fu-table > tbody > tr > td { padding: 11px; border: 0; border-bottom: 1px solid var(--paper-edge); vertical-align: middle; color: var(--ink-2); background: var(--paper-2); }
.tnd-file-upload table.fu-table > tbody > tr:hover > td { background: var(--cream) !important; }  /* outranks legacy .table-hover's translucent gray */
.tnd-file-upload table.fu-table > tbody > tr:last-child > td { border-bottom: 0; }
.tnd-file-upload table.fu-table a[href*="/edit/"] { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.tnd-file-upload table.fu-table a[href*="/edit/"]:hover { text-decoration: underline; }
.tnd-file-upload table.fu-table input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.tnd-file-upload table.fu-table .vaccineFormStyle { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }

/* status chips (controller + modal-close refresher) */
.tnd-file-upload .tnd-vfchip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; }
.tnd-file-upload .tnd-vfchip.is-missing { color: var(--critical); background: var(--critical-tint); border-color: rgba(217,69,56,.18); }
.tnd-file-upload .tnd-vfchip.is-ok { color: var(--ok); background: var(--ok-tint); border-color: rgba(31,122,77,.18); }
.tnd-file-upload .tnd-vfchip.is-letter { color: var(--info); background: var(--info-tint); border-color: rgba(63,111,153,.20); }
.tnd-file-upload .tnd-vfchip.is-appt { color: var(--attention); background: var(--attention-tint); border-color: rgba(157,107,16,.20); }

/* Notes cell: quiet inline note matching the Children list (was a heavy attention-yellow box) */
.tnd-file-upload .child_note { display: inline-block; max-width: 210px; text-align: left; vertical-align: middle; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); padding: 5px 9px; cursor: pointer; white-space: normal; transition: background .14s, border-color .14s; }
.tnd-file-upload .child_note:hover { background: var(--cream); border-color: var(--paper-edge); }
.tnd-file-upload .child_note .fa-edit { font-size: 12px !important; color: var(--ink-4); opacity: .75; }
.tnd-file-upload [class*="next_due_date_info_"] { font-variant-numeric: tabular-nums; }

/* row upload button (.btn-icon emitted by controller) */
.tnd-file-upload table.fu-table .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-md); background: var(--primary); color: #fff; border: 1px solid var(--primary); box-shadow: none; text-shadow: none; }
.tnd-file-upload table.fu-table .btn-icon:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tnd-file-upload table.fu-table .btn-icon i { color: #fff !important; }

/* --- DataTables foot (length / info / pagination) --- */
/* PAGINATION FOOTER, identical to the Users page: a .tnd-dt-foot bar (info left, pill/chevron
   pager centered, "Rows per page" select right). Table is wrapped in its own .fu-tscroll so a wide
   table scrolls horizontally without dragging the footer. Mirrors `.tendi-skin .tnd-dt-foot/-pages`. */
.tnd-file-upload .fu-tscroll { width: 100%; overflow-x: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tnd-file-upload .tnd-dt-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--paper-edge); }
.tnd-file-upload .tnd-dt-info, .tnd-file-upload .dataTables_info { justify-self: start; padding: 0; margin: 0; border: 0; font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
.tnd-file-upload .tnd-dt-pages { justify-self: center; }
.tnd-file-upload .tnd-dt-controls { justify-self: end; display: flex; align-items: center; gap: 12px; }
.tnd-file-upload .tnd-dt-controls .dataTables_length { padding: 0; display: flex; align-items: center; }
.tnd-file-upload .dataTables_length label { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 0; }
.tnd-file-upload .dataTables_length label::before { content: "Rows per page"; font-size: 12.5px; font-weight: 500; color: var(--ink-4); white-space: nowrap; }
.tnd-file-upload .dataTables_length select {
  appearance: none; -webkit-appearance: none; height: 34px; width: auto; padding: 0 32px 0 13px; margin: 0; background: var(--paper-2);
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%203l4%204%204-4'%20fill='none'%20stroke='%236b6480'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}
.tnd-file-upload .dataTables_length select:hover { border-color: var(--primary); }
.tnd-file-upload .dataTables_length select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* rows-per-page upgraded to the custom .tnd-select (enhanced + wrapped in a .tendi-skin island in JS) */
.tnd-file-upload .tnd-dt-controls .tnd-len-island { display: inline-flex; }
.tnd-file-upload .tnd-dt-controls .tnd-select { width: auto; min-width: 84px; }
.tnd-file-upload .tnd-dt-controls .tnd-select-trigger { height: 34px; min-width: 84px; padding: 0 32px 0 13px; font-size: 13px; font-weight: 600; }
/* pager: Bootstrap <ul.pagination><li.paginate_button><a>: the <a> is the visible button */
.tnd-file-upload .dataTables_paginate { display: inline-flex; align-items: center; padding: 0; }
.tnd-file-upload .dataTables_paginate ul.pagination { display: inline-flex; align-items: center; gap: 5px; margin: 0 !important; padding: 0 !important; list-style: none; }
.tnd-file-upload .dataTables_paginate .paginate_button { list-style: none; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; display: inline-flex; }
.tnd-file-upload .dataTables_paginate .paginate_button > a {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 11px !important; margin: 0 !important;
  border-radius: var(--radius-md) !important; font-family: var(--font-sans); font-size: 13px !important; font-weight: 600; line-height: 1; color: var(--ink-3) !important; cursor: pointer;
  background: transparent !important; background-image: none !important; border: 1px solid transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; transition: background .15s, color .15s;
}
.tnd-file-upload .dataTables_paginate .paginate_button > a:hover { background: var(--cream-2) !important; color: var(--ink) !important; }
.tnd-file-upload .dataTables_paginate .paginate_button.active > a,
.tnd-file-upload .dataTables_paginate .paginate_button.active > a:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.tnd-file-upload .dataTables_paginate .paginate_button.disabled > a { color: var(--ink-5) !important; opacity: .45; cursor: default; pointer-events: none; }
.tnd-file-upload .dataTables_paginate .paginate_button.ellipsis > a,
.tnd-file-upload .dataTables_paginate .paginate_button.ellipsis { color: var(--ink-5) !important; pointer-events: none; }
.tnd-file-upload .dataTables_paginate .paginate_button.first,
.tnd-file-upload .dataTables_paginate .paginate_button.last { display: none !important; }
.tnd-file-upload .dataTables_paginate .paginate_button.previous > a,
.tnd-file-upload .dataTables_paginate .paginate_button.next > a { font-size: 0 !important; padding: 0 9px !important; }
.tnd-file-upload .dataTables_paginate .paginate_button.previous > a::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.tnd-file-upload .dataTables_paginate .paginate_button.next > a::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.tnd-file-upload hr { display: none; }

/* ============================================================
   EMPLOYEE FILE-UPLOAD extras: the clearance-branches filter (legacy select2 v3
   MULTI) on the page, plus the clearance-setup modal's dynamic form rows.
   ============================================================ */
/* clearance-branches filter: legacy select2 v3 multi → match the .tnd-select field (fixed width like the others) */
.tnd-file-upload .select2-container.clearance_branches_filter {
  width: 184px !important; min-width: 184px; max-width: 100%; min-height: 38px; position: relative; display: block;
  border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important; background: var(--paper-2) !important; box-shadow: none !important;
}
.tnd-file-upload .select2-container.clearance_branches_filter.select2-container-active,
.tnd-file-upload .select2-container.clearance_branches_filter:hover { border-color: var(--primary) !important; }
.tnd-file-upload .select2-container.clearance_branches_filter .select2-choices {
  position: static; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0; padding: 4px 30px 4px 10px; list-style: none; border: none !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); cursor: pointer;
}
.tnd-file-upload .select2-container.clearance_branches_filter::after {
  content: ""; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; z-index: 1;
  background: no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a93ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.tnd-file-upload .select2-container.clearance_branches_filter .select2-choices:not(:has(.select2-search-choice))::before {
  content: "All branches"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 13px; pointer-events: none;
}

/* violet chips + clean search input for every clearance select2 (page filter + modal rows).
   !important: select2.css is <link>'d in the views AFTER tendi-skin.css and ties on specificity. */
.tnd-file-upload .select2-container .select2-search-choice,
.tnd-fu-pop .select2-container .select2-search-choice {
  margin: 0 !important; padding: 2px 7px 2px 9px !important; background: var(--primary-tint) !important; border: 1px solid var(--primary) !important; border-radius: var(--radius-full) !important;
  color: var(--primary) !important; font-size: 12px !important; font-weight: 600; line-height: 1.4; display: inline-flex !important; align-items: center; gap: 5px; cursor: default; box-shadow: none !important; text-shadow: none !important; background-image: none !important;
}
.tnd-file-upload .select2-container .select2-search-choice div,
.tnd-fu-pop .select2-container .select2-search-choice div { padding: 0 !important; }
.tnd-file-upload .select2-container .select2-search-choice-close,
.tnd-fu-pop .select2-container .select2-search-choice-close {
  position: static !important; display: inline-block; width: 12px !important; height: 12px !important; margin: 0 !important; top: auto !important; right: auto !important; left: auto !important; opacity: .7;
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a3fc2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
}
.tnd-file-upload .select2-container .select2-search-field input.select2-input,
.tnd-fu-pop .select2-container .select2-search-field input.select2-input {
  height: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}
/* the OPEN select2 dropdown (appended to <body>, so scoped via dropdownCssClass='tnd-select2-drop')
   → match the .tnd-select menu. select2's own default drop z-index (high) stays, so it clears modals. */
.select2-drop.tnd-select2-drop {
  background: var(--paper-2) !important; border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-overlay) !important; margin-top: 4px; padding: 5px; overflow: hidden; font-family: var(--font-sans);
}
.select2-drop.tnd-select2-drop .select2-results { margin: 0 !important; padding: 0 !important; max-height: 260px; }
.select2-drop.tnd-select2-drop .select2-results .select2-result-label { padding: 8px 10px !important; border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.select2-drop.tnd-select2-drop .select2-results .select2-highlighted { background: transparent !important; color: inherit !important; }
.select2-drop.tnd-select2-drop .select2-results .select2-highlighted .select2-result-label { background: var(--cream-2) !important; color: var(--ink) !important; }
.select2-drop.tnd-select2-drop .select2-results .select2-result.select2-selected .select2-result-label { color: var(--primary) !important; font-weight: 600; }
.select2-drop.tnd-select2-drop .select2-results .select2-no-results,
.select2-drop.tnd-select2-drop .select2-results .select2-searching { padding: 9px 10px !important; font-size: 12.5px; color: var(--ink-4); background: transparent !important; }
.select2-drop.tnd-select2-drop .select2-search { padding: 4px 4px 6px !important; }
.select2-drop.tnd-select2-drop .select2-search input {
  height: 34px !important; border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important; background: var(--paper-2) !important; box-shadow: none !important;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); padding: 0 11px !important;
}
.select2-drop.tnd-select2-drop .select2-search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }

/* clearance-setup modal: wide dialog + dynamic rows (built by appendClearanceFields) */
.tnd-fu-pop .modal-dialog.customLargeModal { width: 80%; max-width: 1080px; }
.tnd-fu-pop .fu-clearance-add { margin: 2px 0 6px; }
.tnd-fu-pop #clearanceForm .clearance-row {
  position: relative; border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); background: var(--paper-2);
  margin: 0 0 12px; padding: 30px 6px 2px;
}
.tnd-fu-pop #clearanceForm label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 5px; display: block; }
.tnd-fu-pop #clearanceForm .form-control {
  height: 38px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); box-shadow: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); padding: 0 11px; width: 100%;
}
.tnd-fu-pop #clearanceForm select.form-control {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M2%203l4%204%204-4'%20fill='none'%20stroke='%236b6480'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
}
.tnd-fu-pop #clearanceForm .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-fu-pop #clearanceForm input[type="file"].form-control {
  height: auto; padding: 8px 10px; background: var(--cream); border: 1.5px dashed var(--paper-edge-strong); font-size: 12px; color: var(--ink-3); cursor: pointer;
}
.tnd-fu-pop #clearanceForm input[type="file"].form-control::file-selector-button { font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 5px 10px; margin-right: 9px; cursor: pointer; }
/* select2 multi inside the modal rows → field look */
.tnd-fu-pop #clearanceForm .select2-container { width: 100% !important; min-height: 38px; position: relative; display: block; border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important; background: var(--paper-2) !important; box-shadow: none !important; }
.tnd-fu-pop #clearanceForm .select2-container.select2-container-active { border-color: var(--primary) !important; }
.tnd-fu-pop #clearanceForm .select2-container .select2-choices { position: static; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 4px 10px; list-style: none; border: none !important; background: transparent !important; box-shadow: none !important; }
.tnd-fu-pop #clearanceForm .select2-container .select2-search-field input.select2-input { width: auto !important; }
/* remove-row button → ghost icon, pinned top-right of the card */
.tnd-fu-pop #clearanceForm .btn-remove-clearance-row {
  position: absolute !important; top: 9px; right: 10px; float: none !important; margin: 0 !important; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong); background: var(--paper-2); color: var(--ink-4); box-shadow: none;
}
.tnd-fu-pop #clearanceForm .btn-remove-clearance-row:hover { border-color: var(--critical); color: var(--critical); background: var(--critical-tint); }
.tnd-fu-pop #clearanceForm .btn-remove-clearance-row i { color: inherit !important; font-size: 13px; }
.tnd-fu-pop #clearanceForm .validation-error { font-size: 11.5px; color: var(--critical); margin-top: 4px; }
.tnd-fu-pop #clearanceForm .existing-file { margin-top: 6px; }
.tnd-fu-pop #clearanceForm .existing-file img { border-radius: var(--radius-sm) !important; border: 1px solid var(--paper-edge) !important; }

/* ============================================================
   UPLOAD EDITOR MODAL `#upload_file`: rebuilt to mirror the mockup's dense
   per-item rows (builder in template.php emits .fu-item/.fu-item-top/
   .fu-item-body/.fu-sub/.fu-statetag; visibility = .fu-item.on toggled by the
   .include_next_date checkbox). Flat surfaces; modal keeps a soft overlay
   shadow (floating overlay exception, §4).
   ============================================================ */
#upload_file .modal-dialog { width: 920px; max-width: 95%; }
#upload_file .modal-content { border-radius: var(--radius-xl) !important; border: 1px solid var(--paper-edge) !important; box-shadow: var(--shadow-overlay) !important; margin-top: 40px !important; overflow: hidden; font-family: var(--font-sans); }
#upload_file .modal-content * { box-sizing: border-box; }

/* header lockup: avatar + title/sub + save-state + envelope + close */
#upload_file .modal-header { padding: 15px 18px; border-bottom: 1px solid var(--paper-edge); display: flex; align-items: center; gap: 12px; }
#upload_file .fu-avatar { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary-tint); color: var(--primary); display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
#upload_file .fu-modal-ttl { flex: 1; min-width: 0; }
#upload_file .modal-header .modal-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; margin: 0; }
#upload_file .fu-modal-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
#upload_file .fu-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ok); background: var(--ok-tint); padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; }
#upload_file .fu-savestate svg { width: 13px; height: 13px; display: block; }
#upload_file .modal-header .close { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong); background: var(--paper-2); color: var(--ink-3); opacity: 1; text-shadow: none; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; float: none; margin: 0; }
#upload_file .modal-header .close:hover { border-color: var(--primary); color: var(--primary); background: var(--cream-2); }
#upload_file .modal-header .btn-success { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-md); background: var(--paper-2); border: 1px solid var(--paper-edge-strong); color: var(--ink-3); box-shadow: none; text-shadow: none; float: none; margin: 0; }
#upload_file .modal-header .btn-success:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }

#upload_file .modal-body { padding: 18px; max-height: 74vh; overflow: auto; }
#upload_file #recycle_bin_toolbar .btn { border-radius: var(--radius-md); border: 1px solid var(--paper-edge-strong); background: var(--paper-2); color: var(--ink-2); box-shadow: none; padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
#upload_file #recycle_bin_toolbar .btn:hover { border-color: var(--primary); color: var(--primary); }

/* group (Forms / Vaccines): light wrapper + group header (item borders carry the weight) */
#upload_file .form_background { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 18px; }
#upload_file .form_background h3 { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--paper-edge); }

/* each item = bordered card */
#upload_file .fu-item { border: 1.5px solid var(--paper-edge-strong); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 9px; background: var(--paper-2); }
#upload_file .fu-item:hover { border-color: rgba(90,63,194,.30); }
#upload_file .fu-item.on { border-color: rgba(90,63,194,.34); background: var(--cream); }
#upload_file .fu-item-top { display: flex; align-items: center; gap: 11px; cursor: pointer; }
#upload_file .fu-item-name { flex: 1; min-width: 0; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); }

/* expander. The row opens on click; this is the affordance that says so */
#upload_file .fu-expand { flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: transparent; color: var(--ink-4); cursor: pointer; transition: transform .15s ease; }
#upload_file .fu-expand svg { width: 15px; height: 15px; display: block; }
#upload_file .fu-item-top:hover .fu-expand { border-color: var(--paper-edge-strong); background: var(--paper-2); color: var(--primary); }
#upload_file .fu-item.open .fu-expand { transform: rotate(180deg); }

/* drawn checkbox (the include_next_date toggle) */
#upload_file .fu-chk { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
#upload_file .fu-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#upload_file .fu-chk-box { width: 19px; height: 19px; border-radius: 6px; border: 1px solid var(--paper-edge-strong); background: var(--paper-2); display: grid; place-items: center; }
#upload_file .fu-chk-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; display: block; }
#upload_file .fu-chk input:checked + .fu-chk-box { background: var(--primary); border-color: var(--primary); }
#upload_file .fu-chk input:checked + .fu-chk-box svg { opacity: 1; }
#upload_file .fu-chk input:focus-visible + .fu-chk-box { box-shadow: 0 0 0 3px var(--focus-ring); }

/* status tag */
#upload_file .fu-statetag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
#upload_file .fu-statetag svg { width: 11px; height: 11px; display: block; }
#upload_file .fu-statetag.uploaded { color: var(--ok); background: var(--ok-tint); }
#upload_file .fu-statetag.missing { color: var(--critical); background: var(--critical-tint); }

/* dense body: collapsed until the row is OPENED. Opening is separate from being on file
   (.on): the upload field lives in here, so tying it to the "we have it" checkbox made
   uploading unreachable for anything not already marked complete. */
#upload_file .fu-item-body { display: none; }
#upload_file .fu-item.open .fu-item-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--paper-edge-strong); align-items: start; }
#upload_file .fu-sub { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#upload_file .fu-sub.span2 { grid-column: 1 / -1; }
#upload_file .fu-sub > label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
#upload_file .fu-sub > label .opt { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--ink-5); }

/* fields */
#upload_file .fu-item-body input[type="date"],
#upload_file .fu-item-body .dc_fields { width: 100%; height: 38px; border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important; background: var(--paper-2) !important; font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); padding: 0 11px; box-shadow: none; }
#upload_file .fu-item-body input[type="date"]:focus,
#upload_file .fu-item-body .dc_fields:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring); }

/* file inputs (form upload / appointment / doctor) → clean upload control */
#upload_file .fu-item-body input[type="file"] { width: 100%; background: var(--cream) !important; border: 1.5px dashed var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important; height: auto !important; padding: 8px 10px !important; font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); cursor: pointer; }
#upload_file .fu-item-body input[type="file"]:hover { border-color: var(--primary) !important; background: var(--primary-tint) !important; }
#upload_file .fu-item-body input[type="file"]::file-selector-button { font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 6px 11px; margin-right: 10px; cursor: pointer; }
#upload_file .fu-item-body input[type="file"]::file-selector-button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* DC# row */
#upload_file .fu-dc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#upload_file .fu-dc .dc_fields { width: 110px !important; flex: none; }
#upload_file .add-dc-id-field { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px dashed var(--paper-edge-strong); color: var(--primary); display: inline-grid; place-items: center; cursor: pointer; font-size: 13px; }
#upload_file .add-dc-id-field:hover { border-color: var(--primary); background: var(--primary-tint); }

/* existing-file rows (appended into .appointmentImagesDisplay / .letterDoctorImages) */
#upload_file .file-list-item, #upload_file .file-list-item-doctor { width: 100%; }
#upload_file .file-list-item ul, #upload_file .file-list-item-doctor ul { width: 100%; margin: 0; padding: 0; }
#upload_file .file-list-item ul li,
#upload_file .file-list-item-doctor ul li { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 9px; border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-md); background: var(--paper-2); margin: 0 0 6px; height: auto; min-height: 40px; padding: 7px 10px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); }
#upload_file .file-list-item ul li button,
#upload_file .file-list-item-doctor ul li button { width: 28px; height: 28px; border-radius: var(--radius-sm) !important; display: inline-flex; align-items: center; justify-content: center; border: 0; }
#upload_file .file-list-item ul li button.viewFile,
#upload_file .file-list-item-doctor ul li button.viewFileLetterDoctor { background: var(--primary) !important; }
#upload_file .file-list-item ul li button.delete-file,
#upload_file .file-list-item-doctor ul li button.delete-file-letter-doctor { background: var(--critical) !important; }
#upload_file .file-list-item ul li button i,
#upload_file .file-list-item-doctor ul li button i { font-size: 13px !important; color: #fff !important; }

/* recycle bin (admin-only) */
#upload_file #recycle_bin_section .form_background { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); padding: 14px; }

/* footer Close */
#upload_file .modal-body > div:last-child { padding-top: 4px; }
#upload_file .modal-body > div:last-child .btn-primary { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--radius-md); background: var(--primary); color: #fff; border: 1px solid var(--primary); box-shadow: none; text-shadow: none; font-family: var(--font-sans); font-weight: 600; font-size: 13px; }
#upload_file .modal-body > div:last-child .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* ============================================================
   LEGACY CONFIRM / PROMPT DIALOGS (jquery.alerts plugin): reskin to v4.
   jAlert (no callback) is shimmed to toasts by tendi-toast.js; jConfirm /
   jPrompt / jCustomConfirm stay MODAL and were never restyled (old blue
   "devoops" dialog). GLOBAL: the plugin appends #popup_overlay / #popup_container
   to <body> at z 99998 / 99999 (so they already clear the header. This only
   restyles them). `body` prefix + !important beats the plugin's own #id
   !important rules regardless of stylesheet load order. Mirrors .tnd-fu-pop.
   ============================================================ */
body #popup_overlay { background: rgba(24, 24, 27, 0.45) !important; opacity: 1 !important; }
body #popup_container {
  background: var(--paper-2) !important; color: var(--ink) !important;
  border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-overlay) !important; font-family: var(--font-sans) !important; overflow: hidden !important;
}
body #popup_title {
  background: transparent !important; color: var(--ink) !important; font-family: var(--font-display) !important;
  font-weight: 700 !important; font-size: 17px !important; line-height: 1.2 !important;
  padding: 18px 22px 8px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
}
body #popup_content, body #popup_content.alert { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--ink-3) !important; }
body #popup_message { padding: 0 22px 6px !important; margin: 0 !important; color: var(--ink-3) !important; font-size: 14px !important; line-height: 1.55 !important; }
body #popup_panel { text-align: right !important; padding: 16px 22px 18px !important; margin: 6px 0 0 !important; }
/* squircle buttons (component standard): OK = primary violet, Cancel = ghost outline */
body #popup_ok, body #popup_cancel {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; width: auto !important; height: 38px !important; padding: 0 18px !important; margin: 0 0 0 8px !important;
  border: 1px solid transparent !important; border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important; font-size: 13.5px !important; font-weight: 600 !important;
  cursor: pointer !important; box-shadow: none !important; text-shadow: none !important; background-position: 0 0 !important;
  transition: background .14s, border-color .14s, color .14s !important;
}
body #popup_ok, body #popup_ok:active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
body #popup_ok:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: #fff !important; }
body #popup_cancel, body #popup_cancel:active { background: var(--paper-2) !important; border-color: var(--paper-edge-strong) !important; color: var(--ink-2) !important; }
body #popup_cancel:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: var(--cream-2) !important; }
/* destructive confirm → red OK + red title */
body #popup_container.alert-danger #popup_ok, body #popup_container.alert-danger #popup_ok:hover { background: var(--critical) !important; border-color: var(--critical) !important; color: #fff !important; }
body #popup_container.alert-danger #popup_title { color: var(--critical) !important; }
/* prompt input */
body #popup_prompt {
  width: 100% !important; height: 38px !important; padding: 0 12px !important; margin: 10px 0 0 !important;
  border: 1px solid var(--paper-edge-strong) !important; border-radius: var(--radius-md) !important;
  background: var(--paper-2) !important; color: var(--ink) !important; font-family: var(--font-sans) !important; font-size: 14px !important;
}
body #popup_prompt:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }

/* ============================================================
   FORM PAGES (add / edit): v4 reskin. Marker `.tnd-form-page` is added to each
   form view's root `.row-fluid`. Restyles the shared legacy markup
   (`.box`/`.box-header`/`.form-horizontal`/`.form-control`/`.control-label`/`.btn-lg`)
   into a clean v4 card + inputs, lifting all ~21 add/edit forms at once.
   Complex per-form widgets / modals are intentionally left for a later pass.
   ============================================================ */
.tendi-skin.tnd-form-page { padding: 18px 0 44px; }
.tendi-skin.tnd-form-page .box {
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm); overflow: visible; max-width: 940px; margin: 0 auto;
}
/* header: clean icon-tile lockup; drop the legacy collapse/expand/close controls */
.tendi-skin.tnd-form-page .box-header {
  background: var(--cream); border-bottom: 1px solid var(--paper-edge);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: 17px 24px; height: auto; display: flex; align-items: center;
}
.tendi-skin.tnd-form-page .box-header .box-icons,
.tendi-skin.tnd-form-page .box-header .no-move { display: none !important; }
.tendi-skin.tnd-form-page .box-name { display: flex; align-items: center; gap: 13px; float: none; }
.tendi-skin.tnd-form-page .box-name > i {
  width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--primary-tint); color: var(--primary);
  display: inline-grid; place-items: center; font-size: 17px; flex: none;
}
.tendi-skin.tnd-form-page .box-name > span {
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2;
}
.tendi-skin.tnd-form-page .box-name .meta { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-4); letter-spacing: 0; margin-top: 3px; }
.tendi-skin.tnd-form-page .box-content { padding: 6px 26px 22px; background: transparent; border: 0; }
/* fields: keep the Bootstrap grid, layer v4 styling on top */
.tendi-skin.tnd-form-page .form-group { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--paper-edge); }
.tendi-skin.tnd-form-page .form-group::after { content: ""; display: table; clear: both; }
.tendi-skin.tnd-form-page fieldset:last-of-type .form-group:last-child { border-bottom: 0; }
.tendi-skin.tnd-form-page .control-label {
  padding-top: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-3); text-align: left;
}
.tendi-skin.tnd-form-page .astric { color: var(--critical); margin-left: 2px; font-weight: 700; }
.tendi-skin.tnd-form-page .form-control {
  height: 42px; padding: 0 14px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md);
  background: var(--paper-2); font-family: var(--font-sans); font-size: 14px; color: var(--ink); box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.tendi-skin.tnd-form-page textarea.form-control { height: auto; min-height: 92px; padding: 10px 14px; line-height: 1.5; }
.tendi-skin.tnd-form-page select.form-control[multiple] { height: auto; padding: 6px; }
.tendi-skin.tnd-form-page .form-control:hover { border-color: var(--paper-edge-strong); }
.tendi-skin.tnd-form-page .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
.tendi-skin.tnd-form-page .form-control::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin.tnd-form-page select.form-control { cursor: pointer; }
/* section headers */
.tendi-skin.tnd-form-page .tnd-section-head {
  width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); margin: 10px 0 4px;
}
.tendi-skin.tnd-form-page .checkbox label, .tendi-skin.tnd-form-page .radio label,
.tendi-skin.tnd-form-page .checkbox-inline, .tendi-skin.tnd-form-page .radio-inline { font-size: 14px; color: var(--ink-2); font-weight: 500; }
/* buttons: primary Save + ghost Cancel */
.tendi-skin.tnd-form-page .btnContainer { display: flex; gap: 10px; padding-top: 20px; float: none; }
.tendi-skin.tnd-form-page .btn.btn-lg { height: 42px; padding: 0 20px; font-size: 13.5px; border-radius: var(--radius-md); line-height: 1; }
.tendi-skin.tnd-form-page button[name="Save"], .tendi-skin.tnd-form-page #Save { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: var(--shadow-sm); }
.tendi-skin.tnd-form-page button[name="Save"]:hover, .tendi-skin.tnd-form-page #Save:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.tendi-skin.tnd-form-page .ajax-page-link.btn { background: var(--paper-2) !important; color: var(--ink-2) !important; border-color: var(--paper-edge-strong) !important; box-shadow: none; }
.tendi-skin.tnd-form-page .ajax-page-link.btn:hover { background: var(--cream-2) !important; color: var(--ink) !important; border-color: var(--primary) !important; }
/* file inputs: v4 pill "Choose file" button (mirrors the drawer treatment) */
.tendi-skin.tnd-form-page input[type="file"] { font-size: 13px; color: var(--ink-4); max-width: 100%; }
.tendi-skin.tnd-form-page input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 15px; border-radius: var(--radius-full); border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tendi-skin.tnd-form-page input[type="file"]::file-selector-button:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tendi-skin.tnd-form-page input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--paper-edge-strong);
  background: var(--paper-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* profile-photo field: current avatar preview + styled picker */
.tendi-skin.tnd-form-page .tnd-photo-field { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tendi-skin.tnd-form-page .tnd-photo-current {
  width: 66px; height: 66px; border-radius: var(--radius-full); overflow: hidden; flex: none;
  border: 1px solid var(--paper-edge); background: var(--cream-2); display: grid; place-items: center;
}
.tendi-skin.tnd-form-page .tnd-photo-current img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendi-skin.tnd-form-page .tnd-photo-current.is-empty { border-style: dashed; color: var(--ink-4); }
.tendi-skin.tnd-form-page .tnd-photo-current.is-empty svg { width: 26px; height: 26px; }
.tendi-skin.tnd-form-page .tnd-photo-input { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tendi-skin.tnd-form-page .tnd-field-hint { margin: 0; font-size: 11.5px; color: var(--ink-4); }
/* legends: rendered as section heads. Styling the element (rather than rewriting each
   view to .tnd-section-head) keeps legends inside conditional fieldsets working. */
.tendi-skin.tnd-form-page legend {
  display: block; width: 100%; border: 0; padding: 0; margin: 20px 0 2px; background: none;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.5;
}
.tendi-skin.tnd-form-page fieldset:first-of-type > legend { margin-top: 6px; }
/* helper / muted text under a field */
.tendi-skin.tnd-form-page .help-block,
.tendi-skin.tnd-form-page .form-group small,
.tendi-skin.tnd-form-page .form-group > .col-sm-4 > p { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
/* A field the site can set but that will not take effect until Tendi enables it. Louder than a
   help-block on purpose: this one is the difference between "saved" and "will actually happen". */
.tendi-skin.tnd-form-page .help-block.tnd-gate-note,
.tendi-skin.tnd-form-page .form-group > .col-sm-4 > p.tnd-gate-note {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--attention-tint); color: var(--attention); border: 1px solid var(--attention-tint);
}
/* logo / image preview tile */
.tendi-skin.tnd-form-page .tnd-img-preview {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 8px;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-md); max-width: 100%;
}
.tendi-skin.tnd-form-page .tnd-img-preview img { max-width: 170px; max-height: 84px; height: auto; display: block; }

/* ---- TABS: Bootstrap 3 `.nav-tabs` markup is left intact so BS tab JS keeps working;
   only the appearance is re-skinned (underline tabs in the v4 language). ---- */
/* NOTE: the rail-nav rule `.tendi-skin .nav` (flex COLUMN, width:100%, padding) also matches
   `.nav.nav-tabs`, which would stack the tabs full-width: every one of those is reset here. */
.tendi-skin.tnd-form-page .nav-tabs {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; list-style: none;
  padding: 0; margin: 0; width: 100%; flex: 0 0 auto;
  border-bottom: 1px solid var(--paper-edge);
}
/* Bootstrap 3 puts a `:before`/`:after` clearfix on `.nav`; inside a flex container
   those become phantom flex items and push the tabs onto separate rows. */
.tendi-skin.tnd-form-page .nav-tabs::before,
.tendi-skin.tnd-form-page .nav-tabs::after { display: none; }
/* the legacy admin theme forces `.nav-tabs > li { width:100% }` (stacked tabs), reset it */
.tendi-skin.tnd-form-page .nav-tabs > li { float: none; margin: 0; width: auto; flex: 0 0 auto; }
.tendi-skin.tnd-form-page .nav-tabs > li > a {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; margin: 0 0 -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; line-height: 1; color: var(--ink-3);
  transition: color .14s, border-color .14s;
}
.tendi-skin.tnd-form-page .nav-tabs > li > a svg { width: 16px; height: 16px; flex: none; }
.tendi-skin.tnd-form-page .nav-tabs > li > a:hover,
.tendi-skin.tnd-form-page .nav-tabs > li > a:focus { background: transparent; color: var(--ink); border-bottom-color: var(--paper-edge-strong); outline: none; }
.tendi-skin.tnd-form-page .nav-tabs > li.active > a,
.tendi-skin.tnd-form-page .nav-tabs > li.active > a:hover,
.tendi-skin.tnd-form-page .nav-tabs > li.active > a:focus { background: transparent; color: var(--primary); border: 0; border-bottom: 2px solid var(--primary); }
.tendi-skin.tnd-form-page .tab-content { padding-top: 18px; }
.tendi-skin.tnd-form-page .tab-content > .tab-pane { display: none; }
.tendi-skin.tnd-form-page .tab-content > .tab-pane.active { display: block; }

/* ---- SMS USAGE panel (Settings › SMS Usage): read-only meter + facts ---- */
.tendi-skin.tnd-form-page .tnd-sms { max-width: 700px; }
.tendi-skin.tnd-form-page .tnd-sms-intro { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin-bottom: 18px; }
.tendi-skin.tnd-form-page .tnd-sms-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.tendi-skin.tnd-form-page .tnd-sms-num { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tendi-skin.tnd-form-page .tnd-sms-of { font-size: 13.5px; color: var(--ink-4); }
.tendi-skin.tnd-form-page .tnd-sms-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1; padding: 5px 11px;
  border-radius: var(--radius-full); border: 1px solid transparent;
}
.tendi-skin.tnd-form-page .tnd-sms-pill.is-ok { color: var(--ok); background: var(--ok-tint); border-color: rgba(31,122,77,.18); }
.tendi-skin.tnd-form-page .tnd-sms-pill.is-warn { color: var(--attention); background: var(--attention-tint); border-color: rgba(157,107,16,.20); }
.tendi-skin.tnd-form-page .tnd-sms-pill.is-critical { color: var(--critical); background: var(--critical-tint); border-color: rgba(217,69,56,.18); }
.tendi-skin.tnd-form-page .tnd-sms-pill.is-info { color: var(--info); background: var(--info-tint); border-color: rgba(63,111,153,.20); }
.tendi-skin.tnd-form-page .tnd-sms-pill.is-neutral { color: var(--ink-3); background: var(--cream-2); border-color: var(--paper-edge); }
.tendi-skin.tnd-form-page .tnd-sms-meter { height: 8px; border-radius: var(--radius-full); background: var(--cream-3); overflow: hidden; margin-bottom: 22px; }
.tendi-skin.tnd-form-page .tnd-sms-meter > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary); }
.tendi-skin.tnd-form-page .tnd-sms-meter > span.is-ok { background: var(--ok); }
.tendi-skin.tnd-form-page .tnd-sms-meter > span.is-warn { background: var(--attention); }
.tendi-skin.tnd-form-page .tnd-sms-meter > span.is-critical { background: var(--critical); }
.tendi-skin.tnd-form-page .tnd-sms-meter > span.is-info,
.tendi-skin.tnd-form-page .tnd-sms-meter > span.is-neutral { background: var(--info); }
.tendi-skin.tnd-form-page .tnd-sms-facts { border: 1px solid var(--paper-edge); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.tendi-skin.tnd-form-page .tnd-sms-row { display: flex; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--paper-edge); font-size: 13px; }
.tendi-skin.tnd-form-page .tnd-sms-row:last-child { border-bottom: 0; }
.tendi-skin.tnd-form-page .tnd-sms-row > dt { flex: 0 0 44%; color: var(--ink-4); font-weight: 500; }
.tendi-skin.tnd-form-page .tnd-sms-row > dd { flex: 1; min-width: 0; margin: 0; color: var(--ink-2); }
.tendi-skin.tnd-form-page .tnd-sms-row > dd strong { color: var(--ink); font-weight: 600; }
.tendi-skin.tnd-form-page .tnd-sms-sub { color: var(--ink-5); }
.tendi-skin.tnd-form-page .tnd-sms-note,
.tendi-skin.tnd-form-page .tnd-sms-empty { display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.tendi-skin.tnd-form-page .tnd-sms-note { font-size: 11.5px; color: var(--ink-4); }
.tendi-skin.tnd-form-page .tnd-sms-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.tendi-skin.tnd-form-page .tnd-sms-empty {
  padding: 18px; background: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); font-size: 13px; color: var(--ink-3);
}
.tendi-skin.tnd-form-page .tnd-sms-empty svg { width: 17px; height: 17px; flex: none; color: var(--info); margin-top: 1px; }
/* when an add/edit form loads INSIDE a side drawer/pane (generic list editors), drop the full-page
   card chrome + duplicate header so it sits flush in the drawer (inputs keep their v4 styling). */
.tnd-pane .tnd-form-page, #tndDrawer .tnd-form-page, #tndUserPane .tnd-form-page { padding: 0; }
.tnd-pane .tnd-form-page .box, #tndDrawer .tnd-form-page .box, #tndUserPane .tnd-form-page .box { background: transparent; border: 0; box-shadow: none; max-width: none; border-radius: 0; margin: 0; }
.tnd-pane .tnd-form-page .box-header, #tndDrawer .tnd-form-page .box-header, #tndUserPane .tnd-form-page .box-header { display: none; }
.tnd-pane .tnd-form-page .box-content, #tndDrawer .tnd-form-page .box-content, #tndUserPane .tnd-form-page .box-content { padding: 0; }

/* ============================================================
   USERS SIDE PANE, Option B: icon-led VIEW + tab-less EDIT.
   Byte-identical to reskin-harness/users-pane-option-b.html. The pane FRAME
   (.tnd-pane-head / .tnd-pane-body / head buttons) is reused; this adds the
   `.vB-*` CONTENT component + a TRUE view<->edit swap (replaces the old
   "read-only form" view). All scoped to #tndUserPane. Nothing else affected.
   ============================================================ */
.tendi-skin #tndUserPane.is-readonly .tnd-pane-edit { display: none !important; }
.tendi-skin #tndUserPane.is-editing .tnd-pane-view { display: none !important; }
.tendi-skin #tndUserPane .tnd-pane-body { background: var(--cream); padding: 24px 20px 30px; }
.tendi-skin #tndUserPane .tnd-pane-view,
.tendi-skin #tndUserPane .tnd-pane-edit { display: flex; flex-direction: column; gap: 22px; }
.tendi-skin #tndUserPane .tnd-pane-error { margin: 0; }

/* ---- hero (view) ---- */
.tendi-skin .vB-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 4px 4px}
.tendi-skin .vB-avatar{width:74px;height:74px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:26px;color:#fff;letter-spacing:-.01em;flex:none;margin-bottom:14px;box-shadow:0 6px 18px -8px rgba(31,26,46,.45);overflow:hidden}
.tendi-skin .vB-avatar img{width:100%;height:100%;object-fit:cover}
.tendi-skin .vB-avatar.acc-plum{background:var(--plum-deep)}
.tendi-skin .vB-avatar.acc-teal{background:var(--teal-deep)}
.tendi-skin .vB-avatar.acc-rose{background:var(--rose-deep)}
.tendi-skin .vB-avatar.acc-sky{background:var(--sky-deep)}
.tendi-skin .vB-avatar.acc-lavender{background:var(--lavender-deep)}
.tendi-skin .vB-avatar.acc-mint{background:var(--mint-deep)}
.tendi-skin .vB-avatar.acc-apricot{background:var(--apricot-deep)}
.tendi-skin .vB-avatar.acc-sun{background:var(--sun-deep)}
.tendi-skin .vB-avatar.acc-coral{background:var(--coral-deep)}
.tendi-skin .vB-name{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.022em;line-height:1.1;color:var(--ink);margin:0}
.tendi-skin .vB-hero-meta{display:flex;align-items:center;gap:9px;margin-top:7px;font-family:var(--font-sans);font-size:13px;color:var(--ink-3)}
.tendi-skin .vB-role{font-weight:600;color:var(--ink-2);text-transform:capitalize}
.tendi-skin .vB-dotsep{width:3px;height:3px;border-radius:var(--radius-full);background:var(--ink-5);flex:none}
.tendi-skin .vB-idtag{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-4)}
.tendi-skin .vB-status{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:6px 14px;border-radius:var(--radius-full);
  font-family:var(--font-label);font-size:12px;font-weight:700;border:1px solid transparent}
.tendi-skin .vB-status .dot{width:7px;height:7px;border-radius:var(--radius-full);background:currentColor;flex:none}
.tendi-skin .vB-status.is-active{color:var(--ok);background:var(--ok-tint);border-color:rgba(31,122,77,.18)}
.tendi-skin .vB-status.is-inactive{color:var(--ink-3);background:var(--cream-2)}

/* ---- groups + rows (view) ---- */
.tendi-skin .vB-group{display:flex;flex-direction:column;gap:8px}
.tendi-skin .vB-group-label{font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin:0 0 1px;padding-left:4px}
.tendi-skin .vB-group-label.role{color:var(--primary)}
.tendi-skin .vB-list{background:var(--paper-2);border:1px solid var(--paper-edge);border-radius:var(--radius-xl);overflow:hidden}
.tendi-skin .vB-row{display:flex;align-items:center;gap:14px;padding:13px 16px;text-decoration:none;color:inherit;border-bottom:1px solid var(--paper-edge);transition:background .14s}
.tendi-skin .vB-row:last-child{border-bottom:0}
.tendi-skin .vB-row-ico{flex:none;width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--primary-tint);color:var(--primary)}
.tendi-skin .vB-row-ico svg{width:18px;height:18px}
.tendi-skin .vB-row-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tendi-skin .vB-row-label{font-family:var(--font-label);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);line-height:1}
.tendi-skin .vB-row-value{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.006em;word-break:break-word}
.tendi-skin .vB-row-value.vB-mono{font-variant-numeric:tabular-nums}
.tendi-skin .vB-row-value.vB-muted{color:var(--ink-5);font-weight:500;font-style:italic}
.tendi-skin .vB-row.is-empty .vB-row-ico{background:var(--cream-2);color:var(--ink-4)}
.tendi-skin .vB-row--action{cursor:pointer}
.tendi-skin .vB-row--action:hover{background:var(--cream)}
.tendi-skin .vB-row--action .vB-row-value{color:var(--primary)}
.tendi-skin .vB-row-cta{flex:none;width:26px;height:26px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--ink-4);background:var(--cream-2);transition:.14s}
.tendi-skin .vB-row-cta svg{width:14px;height:14px}
.tendi-skin .vB-row--action:hover .vB-row-cta{background:var(--primary);color:#fff;transform:translateX(2px)}
.tendi-skin .vB-flag{flex:none;width:24px;height:24px;border-radius:var(--radius-full);display:grid;place-items:center}
.tendi-skin .vB-flag svg{width:13px;height:13px}
.tendi-skin .vB-flag.is-on{background:var(--ok-tint);color:var(--ok)}
.tendi-skin .vB-chip{flex:none;font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--primary);background:var(--primary-tint);padding:4px 11px;border-radius:var(--radius-full)}

/* ---- edit: compact identity strip ---- */
.tendi-skin .vB-idstrip{display:flex;align-items:center;gap:13px;padding:2px}
.tendi-skin .vB-idstrip .vB-avatar{width:48px;height:48px;font-size:17px;margin:0;box-shadow:none}
.tendi-skin .vB-idstrip-main{min-width:0}
.tendi-skin .vB-idstrip-name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.tendi-skin .vB-idstrip-sub{font-size:12.5px;color:var(--ink-4);margin-top:2px;text-transform:capitalize}

/* ---- edit: section card + fields (scoped → overrides the legacy .field look) ---- */
.tendi-skin .vB-editcard{background:var(--paper-2);border:1px solid var(--paper-edge);border-radius:var(--radius-xl);padding:17px 18px}
.tendi-skin .vB-editcard .field{margin-bottom:14px}
.tendi-skin .vB-editcard .field:last-child{margin-bottom:0}
.tendi-skin .vB-editcard .field > .field-label,
.tendi-skin .vB-editcard .field > label{display:block;font-family:var(--font-label);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.tendi-skin .vB-editcard .field .req{color:var(--critical);font-weight:700;margin-left:1px}
.tendi-skin .vB-editcard .field .opt{color:var(--ink-5);font-weight:500;letter-spacing:0;text-transform:none}
.tendi-skin .vB-editcard .field input[type=text],.tendi-skin .vB-editcard .field input[type=email],.tendi-skin .vB-editcard .field input[type=password],.tendi-skin .vB-editcard .field input[type=number]{
  width:100%;border:1px solid var(--paper-edge-strong);border-radius:var(--radius-md);background:var(--cream);font:inherit;font-size:14px;color:var(--ink);padding:11px 13px;height:42px}
.tendi-skin .vB-editcard .field input::placeholder{color:var(--ink-4)}
.tendi-skin .vB-editcard .field input:focus{outline:none;background:var(--paper-2);border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.tendi-skin .vB-editcard .field-help,.tendi-skin .vB-editcard .field .help{font-size:11.5px;color:var(--ink-4);margin-top:6px;line-height:1.45}
.tendi-skin .vB-editcard .form-grid.cols-2,.tendi-skin .vB-editcard .field-row{display:flex;gap:13px}
.tendi-skin .vB-editcard .form-grid.cols-2 .field,.tendi-skin .vB-editcard .field-row .field{flex:1;margin-bottom:14px}
/* Role select (native or the enhanced .tnd-select) → match the v4 input */
.tendi-skin .vB-editcard .field select{width:100%;height:42px;padding:0 12px;border:1px solid var(--paper-edge-strong);border-radius:var(--radius-md);background:var(--cream);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.tendi-skin .vB-editcard .tnd-select{width:100%}
.tendi-skin .vB-editcard .tnd-select .tnd-select-trigger{background:var(--cream);height:42px}
/* photo control */
.tendi-skin .vB-photo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tendi-skin .vB-photo-pre{flex:none;width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;background:var(--plum-deep);overflow:hidden}
.tendi-skin .vB-photo-pre img{width:100%;height:100%;object-fit:cover}
.tendi-skin .vB-photo-side{min-width:0}
.tendi-skin .vB-photo-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--radius-md);border:1px solid var(--paper-edge-strong);background:var(--paper-2);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.tendi-skin .vB-photo-btn svg{width:14px;height:14px;color:var(--ink-4)}
.tendi-skin .vB-photo-hint{font-size:11px;color:var(--ink-4);margin-top:7px;line-height:1.4}
/* toggle row (checkbox-driven, no JS) */
.tendi-skin .vB-toggle{display:flex;align-items:center;gap:13px;padding:13px 14px;background:var(--cream);border:1px solid var(--paper-edge);border-radius:var(--radius-lg);cursor:pointer;margin-bottom:11px}
.tendi-skin .vB-toggle:last-child{margin-bottom:0}
.tendi-skin .vB-toggle > input{display:none}
.tendi-skin .vB-toggle .tt{flex:1;min-width:0}
.tendi-skin .vB-toggle .tt .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.tendi-skin .vB-toggle .tt .sub{display:block;font-size:11.5px;color:var(--ink-4);margin-top:2px}
.tendi-skin .vB-toggle .track{flex:none;width:40px;height:23px;border-radius:var(--radius-full);background:var(--cream-3);position:relative;transition:background .15s}
.tendi-skin .vB-toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:var(--radius-full);background:var(--paper-2);box-shadow:var(--shadow-overlay-sm);transition:transform .15s}
.tendi-skin .vB-toggle > input:checked ~ .track{background:var(--primary)}
.tendi-skin .vB-toggle > input:checked ~ .track::after{transform:translateX(17px)}
/* checklist (checkbox-driven, no JS) */
.tendi-skin .vB-chklist{display:flex;flex-direction:column;gap:8px}
.tendi-skin .vB-chk{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--paper-edge);border-radius:var(--radius-md);background:var(--cream);font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.tendi-skin .vB-chk > input{display:none}
.tendi-skin #tndUserPane .tnd-select.is-open{z-index:100}   /* open dropdown above the rows below it */
/* class-cascade boxes (#tndClasses + before/after/sunday hour): redesigned to a uniform toggle-chip
   grid, branch-grouped. Was a mishmash of circular short chips + faint outline-selected pills sitting
   taller/lighter than the .vB-chk rows. Now: container matches the field radius; the empty-state ("No
   class is available.") is a slim muted line at field height; chips are even pills with a bold filled-
   violet selected state. */
.tendi-skin #tndUserPane .tnd-classes-wrap{padding:12px 14px 4px;border-radius:var(--radius-md)}
.tendi-skin #tndUserPane .tnd-classes-wrap:has(.mt-2){padding:12px 14px}
.tendi-skin #tndUserPane .tnd-classes-wrap .mt-2{margin:0 !important;font-size:12.5px;color:var(--ink-4)}
.tendi-skin #tndUserPane .tnd-classes-wrap .col-sm-12.mt-3{margin-top:12px}
.tendi-skin #tndUserPane .tnd-classes-wrap > .row:first-child > .col-sm-12.mt-3:first-child{margin-top:0}
.tendi-skin #tndUserPane .tnd-classes-wrap .col-sm-12 > label{font-size:10.5px;letter-spacing:.12em;margin-bottom:1px}
.tendi-skin #tndUserPane .tnd-classes-wrap .checkbox-inline label{justify-content:center;height:33px;min-width:48px;padding:0 15px;border-color:var(--paper-edge-strong);color:var(--ink-2);font-size:13px}
.tendi-skin #tndUserPane .tnd-classes-wrap .checkbox-inline label:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}
.tendi-skin #tndUserPane .tnd-classes-wrap .checkbox-inline label:has(input:checked){background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 9px -3px rgba(90,63,194,.45)}
/* ============================================================
   Generic list drawer (#tndDrawer): FULL parity with the Users pane (#tndUserPane):
   a true view<->edit SWAP (rich .vB-* read-only view  ↔  .vB-group/.vB-editcard form),
   cream body, and a .tnd-tabs bar for data-heavy records (shown in view AND edit).
   ============================================================ */
.tendi-skin #tndDrawer.is-readonly .tnd-pane-edit{display:none !important}
.tendi-skin #tndDrawer.is-editing .tnd-pane-view{display:none !important}
.tendi-skin #tndDrawer .tnd-pane-body{background:var(--cream);padding:24px 20px 30px}
.tendi-skin #tndDrawer .tnd-pane-view,
.tendi-skin #tndDrawer .tnd-pane-edit{display:flex;flex-direction:column;gap:22px}
/* heavy-record tabs: each .vB-group is a switchable panel; [hidden] must beat the flex display */
.tendi-skin #tndDrawer .vB-group[hidden]{display:none !important}
/* tab bar: same pill style in the view and the edit trees */
/* underline tab bar (NOT pills) so it clearly reads as section NAVIGATION, not assignable chips:
   inactive = plain muted text, active = violet text + a violet underline. Wraps to show all tabs. */
.tendi-skin #tndDrawer .tnd-pane-view .tnd-tabs,
.tendi-skin #tndDrawer .tnd-pane-edit .tnd-tabs{display:flex !important;flex-wrap:wrap;gap:2px 20px;border:0;margin:0 0 14px;padding:0;box-shadow:inset 0 -1px 0 0 var(--paper-edge)}
.tendi-skin #tndDrawer .tnd-pane-view .tnd-tab,
.tendi-skin #tndDrawer .tnd-pane-edit .tnd-tab{border:0;background:none;border-radius:0;padding:8px 1px;margin:0;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-4);cursor:pointer;border-bottom:2px solid transparent}
.tendi-skin #tndDrawer .tnd-pane-view .tnd-tab:hover,
.tendi-skin #tndDrawer .tnd-pane-edit .tnd-tab:hover{color:var(--ink-2);border-bottom-color:var(--paper-edge-strong)}
.tendi-skin #tndDrawer .tnd-pane-view .tnd-tab.is-active,
.tendi-skin #tndDrawer .tnd-pane-edit .tnd-tab.is-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700;background:none}
/* edit card: normalise legacy bootstrap field units (.form-group/.control-label) to the vB field look */
.tendi-skin #tndDrawer .vB-editcard .form-group{margin:0 0 14px;padding:0;border:0;display:block}
.tendi-skin #tndDrawer .vB-editcard .form-group:last-child{margin-bottom:0}
.tendi-skin #tndDrawer .vB-editcard .control-label,
.tendi-skin #tndDrawer .vB-editcard .form-group > label:first-child:not(.vB-toggle){display:block;float:none;width:auto;text-align:left;font-family:var(--font-label);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin:0 0 7px;padding:0}
.tendi-skin #tndDrawer .vB-editcard .controls{margin:0;padding:0}
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=text],
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=email],
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=password],
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=number],
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=tel],
.tendi-skin #tndDrawer .vB-editcard .form-group input[type=date],
.tendi-skin #tndDrawer .vB-editcard .form-group input:not([type]),
.tendi-skin #tndDrawer .vB-editcard .form-group textarea{width:100%;border:1px solid var(--paper-edge-strong);border-radius:var(--radius-md);background:var(--cream);font:inherit;font-size:14px;color:var(--ink);padding:11px 13px}
.tendi-skin #tndDrawer .vB-editcard .form-group input:focus,
.tendi-skin #tndDrawer .vB-editcard .form-group textarea:focus{outline:none;background:var(--paper-2);border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
/* colour swatch inside a view row value */
.tendi-skin .vB-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--paper-edge-strong);vertical-align:-2px;margin-right:7px}
/* a few entity forms continuously rebuild their own DOM (e.g. complaints, bus_routes), so they can't
   be reliably wrapped in .vB-editcard cards: their fields stay loose but styled, and their own section
   headings remain. Render those headings as the small-caps section labels used everywhere else.
   (Structured forms strip their headings into .vB-group-label, so only loose-form headings match here.) */
.tendi-skin #tndDrawer .tnd-pane-edit h3:not(.vB-group-label),
.tendi-skin #tndDrawer .tnd-pane-edit h4:not(.vB-group-label),
.tendi-skin #tndDrawer .tnd-pane-edit legend:not(.vB-group-label){font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin:12px 0 2px;padding:0;border:0;background:none;line-height:1.5}
/* multi-value VIEW rows render as wrapped chips (not a CSV): e.g. Vaccine/Forms, Groups */
.tendi-skin .vB-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tendi-skin .vB-chip{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--primary);background:var(--primary-tint);padding:5px 11px;border-radius:var(--radius-full);line-height:1.2}
.tendi-skin .vB-row.vB-row--chips{align-items:flex-start}
.tendi-skin .vB-row.vB-row--chips .vB-row-ico{margin-top:1px}
/* EDIT: Vaccine/Forms chip labels are `.control-label`, so the generic field-label rule above was
   force-uppercasing + relabelling them (and the uppercase overflowed). Restore the clean pill look. */
/* the Vaccine/Forms checkbox labels are `.control-label`, so the generic field-label rule above
   stripped them to display:block/padding:0 (cramped). Restore the EXACT .tnd-tag pill look so they
   match the GROUP/Type chips. (Specificity: 2 ids beats the .vB-editcard .control-label rule.) */
.tendi-skin #tndDrawer #vaccine-forms-requirements label{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--radius-full);background:var(--paper-2);border:1px solid var(--paper-edge);color:var(--ink-3);font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;margin:0;width:auto;max-width:100%;white-space:nowrap;line-height:1.5;cursor:pointer;float:none}
.tendi-skin #tndDrawer #vaccine-forms-requirements label:hover{border-color:var(--paper-edge-strong);color:var(--ink)}
.tendi-skin #tndDrawer #vaccine-forms-requirements label::after{content:"\00d7";font-size:9px;opacity:.5;margin-left:0}
.tendi-skin #tndDrawer #vaccine-forms-requirements > div:has(input:checked) label{background:var(--primary-tint);border-color:var(--primary);color:var(--primary)}
.tendi-skin #tndDrawer #vaccine-forms-requirements > div:has(input:checked) label::after{opacity:1}
/* multi-value chip groups (GROUP/Type via .tnd-tags, Vaccine/Forms via #vaccine-forms-requirements)
   sit in a contained, padded inset surface so they read as a proper field control, not chips
   floating edge-to-edge with no padding (mirrors the Users pane's .tnd-classes-wrap). */
.tendi-skin #tndDrawer .vB-editcard #vaccine-forms-requirements,
.tendi-skin #tndDrawer .vB-editcard .tnd-tags{width:100%;float:none;background:var(--cream-2);border:1px solid var(--paper-edge-strong);border-radius:var(--radius-md);padding:14px;row-gap:8px}
.tendi-skin .vB-chk .box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--paper-edge-strong);background:var(--paper-2);display:grid;place-items:center}
.tendi-skin .vB-chk .box svg{width:11px;height:11px;color:#fff;opacity:0}
.tendi-skin .vB-chk > input:checked ~ .box{background:var(--primary);border-color:var(--primary)}

/* =====================================================================
   BESPOKE-PAGE TOOLBAR: portable v4 toolbar for the NON-generic pages
   (Contact Cards, Classroom Photos, Meals, Bus Changes, Bus Reports,
   Route Playground). These render on a plain `.row-fluid` (no .tendi-skin
   reset), so this component is self-contained + token-based: it reproduces
   the generic filter-row look (184px fields, 11px uppercase labels, drawn
   select caret, v4 chips/segments/buttons) WITHOUT the reset.
   APPLY: root wrapper gets `.tnd-bx`; the filter row gets `.tnd-toolbar`.
   Page-head: legacy `.box-header > .box-name` is restyled to the v4 icon
   lockup (add a `.tnd-sub` span for the subtitle); window chrome is hidden.
   ===================================================================== */
.tnd-bx .box-icons, .tnd-bx .no-move { display: none !important; }
.tnd-bx, .tnd-bx .box, .tnd-bx .box-content { background: transparent; border: 0; box-shadow: none; }
.tnd-bx .box { margin: 0; }
.tnd-bx .box-header {
  background: transparent; border: 0; padding: 4px 0 0; margin: 0;
  min-height: 0; height: auto; overflow: visible; display: block;
}
.tnd-bx .box-header .box-name { display: flex; align-items: center; gap: 13px; float: none; padding: 0; }
.tnd-bx .box-header .box-name > i {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius-lg);
  background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; font-size: 20px;
}
.tnd-bx .box-header .box-name > span {
  display: block; font-family: var(--font-display, var(--font-sans)); font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; text-transform: capitalize;
}
.tnd-bx .box-header .box-name > span .tnd-sub,
.tendi-skin.tnd-form-page .box-name > span .tnd-sub {
  display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; color: var(--ink-4);
  letter-spacing: 0; margin-top: 3px; text-transform: none;
}
.tnd-bx .box-content { padding: 0; }

/* --- the toolbar (filter row) --- */
.tnd-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 16px 0 18px; }
.tnd-toolbar .tnd-tb-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tnd-toolbar .tnd-tb-fld > label,
.tnd-toolbar > label,
.tnd-toolbar .tnd-tb-label {
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); margin: 0; line-height: 1.1; cursor: default; white-space: nowrap;
}
.tnd-toolbar .tnd-tb-spacer { margin-left: auto; }
.tnd-toolbar .tnd-tb-actions { display: flex; align-items: flex-end; gap: 10px; }

/* native selects + text/date inputs → v4 field */
.tnd-toolbar select,
.tnd-toolbar input[type=text],
.tnd-toolbar input[type=date],
.tnd-toolbar input[type=search],
.tnd-toolbar input[type=number],
.tnd-toolbar .form-control {
  height: 40px; width: 184px; max-width: 100%; box-sizing: border-box;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 12px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none; margin: 0;
}
.tnd-toolbar select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8fb8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.tnd-toolbar select:hover,
.tnd-toolbar input:hover,
.tnd-toolbar .form-control:hover { border-color: var(--paper-edge-strong); }
.tnd-toolbar select:focus,
.tnd-toolbar input:focus,
.tnd-toolbar .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-toolbar input::placeholder { color: var(--ink-4); font-weight: 400; }

/* a compact search field (icon + input), mirrors the generic .tnd-dt-search */
.tnd-toolbar .tnd-tb-search { position: relative; }
.tnd-toolbar .tnd-tb-search > svg,
.tnd-toolbar .tnd-tb-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; font-size: 14px; }
.tnd-toolbar .tnd-tb-search input { width: 240px; padding-left: 38px; }

/* legacy Bootstrap .textbox-form / col-sm filter columns laid into a .tnd-toolbar */
.tnd-toolbar .textbox-form, .tnd-toolbar > [class*="col-sm-"] { float: none; width: auto; min-width: 0; max-width: 100%; padding: 0; margin: 0; }
.tnd-toolbar .textbox-form { display: flex; flex-direction: column; gap: 6px; }
.tnd-toolbar .control-label,
.tnd-toolbar .textbox-form > label {
  display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); margin: 0; line-height: 1.1; cursor: default; white-space: nowrap;
}
.tnd-toolbar .textbox-form > small { font-size: 10px; color: var(--ink-4); text-transform: none; letter-spacing: 0; font-weight: 400; margin: -2px 0 0; }

/* inline radio set inside a toolbar (e.g. Route Playground direction radios) → quiet chip-radios */
.tnd-toolbar .tnd-radioset { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 1px; }
.tnd-toolbar .tnd-radioset > label {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; margin: 0;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-full); background: var(--paper-2);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer;
  text-transform: none; letter-spacing: 0; white-space: nowrap; transition: all 0.15s;
}
.tnd-toolbar .tnd-radioset > label:hover { border-color: var(--primary); color: var(--ink); }
.tnd-toolbar .tnd-radioset input[type=radio] { width: auto; height: auto; margin: 0; accent-color: var(--primary); }
.tnd-toolbar .tnd-radioset > label:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }

/* buttons whose label is wrapped in a legacy <h5><strong> (Export Bus Pins / Pull live …) */
.tnd-bx .btn h5, .tnd-toolbar .btn h5 { margin: 0; padding: 0; font-size: 13.5px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tnd-bx .btn h5 strong, .tnd-toolbar .btn h5 strong { font-weight: 600; }

/* legacy DataTables search + length controls on a .tnd-bx page → v4 field look */
.tnd-bx .dataTables_filter { margin: 0 0 12px; }
.tnd-bx .dataTables_filter label { color: var(--ink-3); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.tnd-bx .dataTables_filter input, .tnd-bx input.custom-search-input {
  height: 40px; width: 260px; max-width: 100%; border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  background: var(--paper-2); padding: 0 14px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); margin: 0; box-shadow: none;
}
.tnd-bx .dataTables_filter input:focus, .tnd-bx input.custom-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-bx .dataTables_length label { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tnd-bx .dataTables_length select {
  height: 36px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 10px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); margin: 0 7px;
}

/* section titles / legends / dividers on a .tnd-bx page */
.tnd-bx legend, .tnd-bx .table-title, .tnd-bx h4.table-title, .tnd-bx .sms_title legend,
.tnd-bx .upcoming-title, .tnd-bx .ongoing_routes_title h4 {
  font-family: var(--font-sans); font-weight: 700; font-size: 16.5px; color: var(--ink); border: 0; width: auto;
  margin: 6px 0 12px; padding: 0; letter-spacing: -0.01em; text-transform: none; line-height: 1.2;
}
.tnd-bx hr { border: 0; border-top: 1px solid var(--paper-edge); margin: 22px 0; }
.tnd-bx .ongoing_routes_title, .tnd-bx .meals-toolbar-row,
.tnd-bx .table-title-div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.tnd-bx .ongoing_routes_title h4, .tnd-bx .table-title-div h4 { margin: 0; }

/* a checkbox styled as a v4 filter chip (e.g. Contact Cards "Hebrew") */
.tnd-tb-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; margin: 0;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-full); background: var(--paper-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer;
  white-space: nowrap; transition: all 0.15s; user-select: none;
}
.tnd-tb-chip:hover { border-color: var(--primary); color: var(--ink); }
.tnd-tb-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tnd-tb-chip .tnd-tb-chip-box {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--paper-edge-strong);
  display: grid; place-items: center; flex: none; transition: all 0.15s;
}
.tnd-tb-chip .tnd-tb-chip-box::after { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #fff; transform: scale(0); transition: transform 0.15s; }
.tnd-tb-chip:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }
.tnd-tb-chip:has(input:checked) .tnd-tb-chip-box { border-color: rgba(255,255,255,.7); }
.tnd-tb-chip:has(input:checked) .tnd-tb-chip-box::after { transform: scale(1); }

/* a v4 segmented control (e.g. Classroom Photos View: Submitted/Drafts/Trash) */
.tnd-bx .tnd-tb-seg { display: inline-flex; height: 40px; background: var(--cream-2); border: 1px solid var(--paper-edge); border-radius: 11px; padding: 4px; gap: 2px; }
.tnd-bx .tnd-tb-seg > .tnd-tb-seg-btn,
.tnd-bx .tnd-tb-seg > button, .tnd-bx .tnd-tb-seg > a {
  display: inline-flex; align-items: center; padding: 0 16px; border-radius: 8px; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none;
}
.tnd-bx .tnd-tb-seg > .is-active,
.tnd-bx .tnd-tb-seg > .active { background: var(--paper-2); color: var(--primary); box-shadow: var(--shadow-sm); }

/* --- buttons → v4 (whole bespoke page, for cross-page consistency) --- */
.tnd-bx .btn, .tnd-toolbar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer; transition: all 0.15s; line-height: 1; white-space: nowrap; box-shadow: none; text-shadow: none;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--paper-edge-strong);  /* default = ghost; variants override below */
}
.tnd-bx .btn:hover, .tnd-toolbar .btn:hover { border-color: var(--primary); color: var(--ink); }
.tnd-bx .btn-sm, .tnd-bx .btn-xs, .tnd-toolbar .btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.tnd-bx .btn-primary, .tnd-toolbar .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tnd-bx .btn-primary:hover, .tnd-bx .btn-primary:focus, .tnd-toolbar .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.tnd-bx .btn-default, .tnd-bx .btn-white, .tnd-toolbar .btn-default { background: var(--paper-2); color: var(--ink-2); border-color: var(--paper-edge-strong); }
.tnd-bx .btn-default:hover, .tnd-bx .btn-white:hover, .tnd-toolbar .btn-default:hover { background: var(--cream-2); color: var(--ink); border-color: var(--primary); }
.tnd-bx .btn-success { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tnd-bx .btn-success:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.tnd-bx .btn-info { background: var(--paper-2); color: var(--primary); border-color: var(--paper-edge-strong); }
.tnd-bx .btn-info:hover { background: var(--primary-tint); border-color: var(--primary); }
.tnd-bx .btn-warning { background: var(--paper-2); color: #b8860b; border-color: var(--paper-edge-strong); }
.tnd-bx .btn-warning:hover { background: #fff8e6; border-color: #d9a400; }
.tnd-bx .btn-danger { background: var(--paper-2); color: var(--critical); border-color: var(--paper-edge-strong); }
.tnd-bx .btn-danger:hover { background: var(--critical); color: #fff; border-color: var(--critical); }
.tnd-bx .btn > i, .tnd-toolbar .btn > i { font-size: 12px; }
/* neutralise the legacy devoops `.btn-label-left span` padding/offset (the .tendi-skin rule
   doesn't reach these non-.tendi-skin pages) so the flex gap owns the icon→label spacing */
.tnd-bx .btn span, .tnd-toolbar .btn span { display: inline-flex; align-items: center; padding: 0; position: static; left: auto; }
.tnd-bx .btn span i, .tnd-toolbar .btn span i { font-size: 12px; }
.tnd-bx .btn-label-left, .tnd-toolbar .btn-label-left { padding-left: 16px; }

/* select2 v3 widget inside a toolbar → match the v4 native field (Classroom Photos branch/class/child) */
.tnd-toolbar .select2-container { width: 184px !important; max-width: 100%; }
.tnd-toolbar .select2-container .select2-choice {
  height: 40px; line-height: 38px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  background: var(--paper-2); box-shadow: none; padding: 0 12px; color: var(--ink); font-family: var(--font-sans); font-size: 13.5px;
}
.tnd-toolbar .select2-container .select2-choice .select2-arrow { background: transparent; border: 0; }
.tnd-toolbar .select2-container .select2-choice .select2-arrow b { background: none; }
.tnd-toolbar .select2-container .select2-choice .select2-arrow::after {
  content: ""; position: absolute; right: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8fb8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px;
}
.tnd-toolbar .select2-container.select2-container-active .select2-choice { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-toolbar .select2-container .select2-choice > .select2-chosen { color: var(--ink); margin-right: 22px; }
/* select2 v3 MULTI box (Route Playground Branch) → match the v4 field + violet chips */
.tnd-toolbar .select2-container-multi { width: 184px !important; max-width: 100%; }
.tnd-toolbar .select2-container-multi .select2-choices {
  min-height: 40px; border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-md); background: var(--paper-2) !important;
  background-image: none !important; box-shadow: none !important; padding: 2px 6px;
}
.tnd-toolbar .select2-container-multi.select2-container-active .select2-choices { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-toolbar .select2-container-multi .select2-choices .select2-search-field input { height: 32px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.tnd-toolbar .select2-container-multi .select2-choices .select2-search-choice {
  background: var(--primary-tint); border: 1px solid var(--primary); color: var(--primary); border-radius: var(--radius-full);
  padding: 3px 8px 3px 20px; margin: 4px 4px 2px 0; font-size: 12px; font-weight: 600; box-shadow: none; line-height: 1.4;
}
.tnd-toolbar .select2-container-multi .select2-search-choice .select2-search-choice-close { left: 6px; top: 5px; }

/* ---- Meals planner toolbar, overrides the page's own inline cp-* / meals- styles
   (which are 2-3 class selectors loaded after this file, so these need .tnd-meals to win) ---- */
.tnd-meals .meals-toolbar-row { align-items: flex-end; }
.tnd-meals .meals-toolbar-row > [class*="col-sm-"] { padding: 0; }
.tnd-meals .changeDate-group {
  display: inline-flex; align-items: stretch; height: 40px; min-width: 0; max-width: none; margin: 0;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2); overflow: hidden;
}
.tnd-meals .changeDate-group .changeDate {
  height: auto; border: 0; border-left: 1px solid var(--paper-edge); border-right: 1px solid var(--paper-edge);
  border-radius: 0; width: 150px; padding: 0 10px; background: transparent; box-shadow: none;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); margin: 0;
}
.tnd-meals .changeDate-group .changeDateBtn {
  border: 0; background: transparent; color: var(--ink-3); width: 36px; height: auto; padding: 0; cursor: pointer; border-radius: 0;
}
.tnd-meals .changeDate-group .changeDateBtn:hover { background: var(--cream-2); color: var(--primary); }
.tnd-meals .meals-toolbar-row .btnToday {
  height: 40px; margin: 0 0 0 8px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); color: var(--ink-2); font-weight: 600; font-size: 12.5px;
}
.tnd-meals .meals-toolbar-row .btnToday:hover { background: var(--cream-2); border-color: var(--primary); color: var(--ink); }
.tnd-meals .meals-toolbar-row .kitchens.form-control {
  height: 40px; width: 184px; max-width: 100%; border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  background-color: var(--paper-2); color: var(--ink); font-family: var(--font-sans); font-size: 13.5px; box-shadow: none; margin: 0;
  -webkit-appearance: none; appearance: none; padding: 0 34px 0 12px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8fb8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.tnd-meals .meals-toolbar-row .meals-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tnd-meals .meals-toolbar-row .btnMenuLibrary,
.tnd-meals .meals-toolbar-row .btnChildrenReport {
  height: 40px; padding: 0 14px; border-radius: var(--radius-md); background: var(--paper-2);
  border: 1px solid var(--paper-edge-strong); color: var(--ink-2); font-weight: 600; font-size: 12.5px;
}
.tnd-meals .meals-toolbar-row .btnMenuLibrary:hover,
.tnd-meals .meals-toolbar-row .btnChildrenReport:hover { background: var(--cream-2); border-color: var(--primary); color: var(--ink); }
.tnd-meals .meals-toolbar-row .btn-generate-pdf {
  height: 40px; padding: 0 14px; border-radius: var(--radius-md); background: var(--primary);
  border: 1px solid var(--primary); color: #fff; font-weight: 600; font-size: 12.5px; box-shadow: var(--shadow-sm);
}
.tnd-meals .meals-toolbar-row .btn-generate-pdf:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.tnd-meals .meals-toolbar-row .horizontal-list {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; align-items: center;
}
.tnd-meals .meals-toolbar-row .horizontal-list li {
  padding: 6px 11px; border: 1px solid var(--paper-edge); border-radius: var(--radius-full); background: var(--paper-2);
  color: var(--ink-3); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; margin: 0;
}
.tnd-meals .meals-toolbar-row .horizontal-list li:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
/* menu-items left rail header + search */
.tnd-meals .menu_items_main > span b { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--ink); }
.tnd-meals .menu_items_main .btnAddMenuItem {
  height: 32px; padding: 0 12px; border-radius: var(--radius-md); background: var(--primary); border: 1px solid var(--primary);
  color: #fff; font-weight: 600; font-size: 12px;
}
.tnd-meals .menu_items_main .menuItemSearch.form-control {
  height: 38px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 12px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); box-shadow: none;
}
.tendi-skin .vB-chk > input:checked ~ .box svg{opacity:1}

/* =====================================================================
   BESPOKE-PAGE MODALS: v4 chrome reskin for the legacy Bootstrap-3 modals
   opened from the .tnd-bx pages (Route Playground pull dialog, Meals config
   modals, etc.). Bootstrap 3 keeps the .modal in its DOM position (inside
   .tnd-bx), so this reaches it. Chrome only: modal CONTENT markup unchanged.
   ===================================================================== */
.tnd-bx .modal .modal-content {
  border: 1px solid var(--paper-edge); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay);
  background: var(--paper-2); overflow: hidden; font-family: var(--font-sans); color: var(--ink);
}
.tnd-bx .modal .modal-header {
  padding: 14px 18px; border-bottom: 1px solid var(--paper-edge); background: var(--paper-2);
  display: flex; align-items: center; gap: 12px; min-height: 0;
}
.tnd-bx .modal .modal-title {
  margin: 0; font-family: var(--font-display, var(--font-sans)); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; flex: 1; min-width: 0; text-align: left;
}
.tnd-bx .modal .modal-header .close {
  float: none; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; background: transparent;
  border-radius: 9px; display: grid; place-items: center; color: var(--ink-4); opacity: 1; text-shadow: none;
  font-size: 20px; font-weight: 400; line-height: 1; flex: none;
}
.tnd-bx .modal .modal-header .close:hover { background: var(--cream-2); color: var(--ink); opacity: 1; }
.tnd-bx .modal .modal-header .close > span { position: static !important; margin: 0 !important; }
.tnd-bx .modal .modal-body { padding: 18px; background: var(--paper-2); color: var(--ink-2); }
.tnd-bx .modal .modal-footer {
  padding: 13px 18px; border-top: 1px solid var(--paper-edge); background: var(--cream);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0;
}
.tnd-bx .modal .modal-footer .btn + .btn { margin: 0; }
/* form controls inside a .tnd-bx modal → v4 fields */
.tnd-bx .modal .form-control {
  height: 40px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 12px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none;
}
.tnd-bx .modal textarea.form-control { height: auto; min-height: 80px; padding: 9px 12px; line-height: 1.5; }
.tnd-bx .modal select.form-control { cursor: pointer; }
.tnd-bx .modal .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-bx .modal .form-control::placeholder { color: var(--ink-4); font-weight: 400; }
.tnd-bx .modal label, .tnd-bx .modal .control-label {
  font-family: var(--font-sans); color: var(--ink-3); font-weight: 600; font-size: 12.5px;
}
.tnd-bx .modal .modal-body table.table { background: var(--paper-2); }
.tnd-bx .modal .modal-body table.table > thead > tr > th {
  background: var(--cream-2); color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; border: 0; border-bottom: 1px solid var(--paper-edge); padding: 10px 12px;
}
.tnd-bx .modal .modal-body table.table > tbody > tr > td { border-top: 1px solid var(--paper-edge); padding: 9px 12px; color: var(--ink-2); }

/* Monthly Report mini-form (opened from Bus Reports) */
.tnd-monthly .box-content > div { background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-xl); padding: 20px 22px; }
.tnd-monthly .box-content h3 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; color: var(--ink); text-align: left; letter-spacing: -0.01em; }
.tnd-monthly .box-content .control-label { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4) !important; }
.tnd-monthly .box-content .form-control {
  height: 40px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  padding: 0 12px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none;
}
.tnd-monthly .box-content .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-monthly #bus_box { border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-md); background: var(--paper-2) !important; }
.tnd-monthly #bus_box .bus_item { padding: 5px 4px !important; }
.tnd-monthly .help-block { color: var(--ink-4); }

/* ════════════════════════════════════════════════════════════════════════
   GENERIC LIST TOOLBAR: control parity vs the KITCHEN SINK (2026-06-30)
   Audit found the filter controls drifted from the kitchen-sink canonical:
   the `.tnd-select` dropdown is cream / --radius-lg (14px) / --paper-edge
   (the canonical, matches kitchen-sink input + native-select + dropdown),
   but the native date/text filter inputs were white / --radius-md (10px) and
   the list search was white / pill. Unify EVERY filter control to the one
   canonical field look so dropdowns, date/text inputs and the search read as
   the same material in a row. Placed last → wins over the earlier per-control
   rules. Scoped to `.tendi-skin.tnd-list-generic` so only the list toolbars
   change (form drawers + the kitchen-sink base are untouched).
   ════════════════════════════════════════════════════════════════════════ */
.tendi-skin.tnd-list-generic .box-content .textbox-form input.form-control,
.tendi-skin.tnd-list-generic .box-content .textbox-form select.form-control,
.tendi-skin.tnd-list-generic #frmBatchOperations .textbox-form input.form-control,
.tendi-skin.tnd-list-generic #frmBatchOperations .textbox-form select.form-control,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row input.form-control,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row select.form-control {
  height: 42px; background-color: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none;
}
/* search bar (compact list variant + any DataTables-native filter input) → same field look */
.tendi-skin.tnd-list-generic .tnd-dt-search input,
.tendi-skin.tnd-list-generic .tnd-filter-row .tnd-dt-search input,
.tendi-skin.tnd-list-generic .tnd-dt-toolbar2 .dataTables_filter input {
  height: 42px; background-color: var(--cream); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); box-shadow: none;
}
/* the dropdown trigger → pin to the SAME 42px so dropdowns + inputs align on the row */
.tendi-skin.tnd-list-generic .textbox-form .tnd-select-trigger,
.tendi-skin.tnd-list-generic #frmBatchOperations .tnd-select-trigger { height: 42px; min-height: 42px; }
/* focus parity across all of them */
.tendi-skin.tnd-list-generic .box-content .textbox-form .form-control:focus,
.tendi-skin.tnd-list-generic #frmBatchOperations .form-control:focus,
.tendi-skin.tnd-list-generic .tnd-dt-search input:focus,
.tendi-skin.tnd-list-generic .tnd-dt-toolbar2 .dataTables_filter input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); outline: none;
}

/* relocated DataTables filters (e.g. Employees' TYPE) land in a `.tnd-moved-filter`
   column with a `Label<br><select>` markup. The flex-column + label styling was
   scoped to `#frmBatchOperations > .row` only, so on a plain `.box-content .row` the
   select sat ~6px high and the column ran wider than 184px → it misaligned (vertically
   AND horizontally) with the sibling `.textbox-form` dropdowns. Normalise it to the
   exact same 184px field, label-on-top with a 6px gap, bottom-aligned. */
.tendi-skin.tnd-list-generic .box-content .row > .tnd-moved-filter,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row > .tnd-moved-filter {
  flex: 0 0 184px; width: 184px; min-width: 184px; max-width: 184px; padding: 0; margin: 0; float: none;
}
.tendi-skin.tnd-list-generic .tnd-moved-filter > label {
  display: flex; flex-direction: column; gap: 6px; width: 100% !important; margin: 0 !important; cursor: default;
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-4); line-height: 1.1;  /* !important beats JS inline width:200px + the .textbox-form>label margin:0 0 6px (col has both classes) */
}
.tendi-skin.tnd-list-generic .tnd-moved-filter > label br { display: none; }
.tendi-skin.tnd-list-generic .tnd-moved-filter .tnd-select { width: 100% !important; min-width: 0; max-width: 100%; }

/* LEFT-ALIGN the filter row with the title + search. Bootstrap's `.row::before/::after`
   clearfix becomes a ZERO-WIDTH FLEX ITEM in these flex filter rows, so the row's
   `column-gap` pushes the first real filter ~14px right of the page-head/search left
   edge. Remove the pseudo clearfix on the generic filter rows so item 1 sits flush-left. */
.tendi-skin.tnd-list-generic .box-content .row:has(> [class*="col-sm-"].textbox-form)::before,
.tendi-skin.tnd-list-generic .box-content .row:has(> [class*="col-sm-"].textbox-form)::after,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row::before,
.tendi-skin.tnd-list-generic #frmBatchOperations > .row::after { display: none; }

/* DROPDOWN CASING: the selected value + options always render in the data's NATURAL
   casing. Never inherit a wrapping label's transform: relocated filters (e.g. Employees'
   TYPE) sit inside an uppercase eyebrow <label>, which was rendering "All" → "ALL" and
   the options "Administration" → "ADMINISTRATION". The eyebrow LABEL text stays uppercase;
   only the .tnd-select content is reset. */
.tendi-skin .tnd-select-trigger,
.tendi-skin .tnd-select-label,
.tendi-skin .tnd-select-menu,
.tendi-skin .tnd-option { text-transform: none; }
/* "/" search keycap, kill Bootstrap's `kbd { box-shadow: inset 0 -1px 0 rgba(0,0,0,.25) }`
   on EVERY .tnd-dt-search-hint regardless of page scope. Unscoped + !important because the
   Reports page is wrapped in `.tnd-reports` (NOT `.tendi-skin`), so the scoped resets miss it. */
.tnd-dt-search-hint { box-shadow: none !important; }

/* =====================================================================
   BESPOKE-PAGE LIST TABLE: bring the generic .tnd-list-table look + the
   status pill + the 3-dot row menu (kebab) to .tnd-bx pages WITHOUT the
   .tendi-skin reset (so they can't break the page's Bootstrap-grid markup).
   Mirrors the .tendi-skin component values. Used by Bus Changes / Bus Reports.
   Apply `tnd-list-table` to the table; controller emits .tnd-status-pill +
   .tnd-rowmenu in the cells. 2026-06-30.
   ===================================================================== */
.tnd-bx .table-responsive { border: 1px solid var(--paper-edge); border-radius: var(--radius-xl); background: var(--paper-2); overflow: auto; margin-bottom: 14px; }
.tnd-bx table.tnd-list-table {
  width: 100%; border-collapse: collapse; background: var(--paper-2);
  font-size: 13px; color: var(--ink-2); letter-spacing: -0.006em; border: none; margin: 0;
}
.tnd-bx table.tnd-list-table thead th {
  position: sticky; top: -1px; z-index: 5; box-shadow: 0 -2px 0 var(--cream-2);
  background: var(--cream-2); color: var(--ink-3);
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  text-align: left; vertical-align: middle; padding: 12px 13px; border: none; border-bottom: 1px solid var(--paper-edge); white-space: nowrap;
}
.tnd-bx table.tnd-list-table tbody td {
  padding: 12px 13px; border: none; border-bottom: 1px solid var(--paper-edge); background: var(--paper-2);
  vertical-align: middle; color: var(--ink-2);
}
.tnd-bx table.tnd-list-table tbody tr:last-child td { border-bottom: none; }
.tnd-bx table.tnd-list-table tbody tr:nth-of-type(odd) td,
.tnd-bx table.tnd-list-table tbody tr:nth-of-type(even) td { background: var(--paper-2); }
.tnd-bx table.tnd-list-table tbody tr { transition: background 0.12s; }
.tnd-bx table.tnd-list-table tbody tr:hover td { background: var(--cream) !important; }  /* outranks legacy .table-hover's translucent gray */
.tnd-bx table.tnd-list-table td.text-center, .tnd-bx table.tnd-list-table th.text-center { text-align: center; }
.tnd-bx table.tnd-list-table .dataTables_empty { text-align: center; color: var(--ink-4); padding: 26px 13px; }
/* drop the legacy bordered/striped look the table still carries */
.tnd-bx table.tnd-list-table.table-bordered > thead > tr > th,
.tnd-bx table.tnd-list-table.table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }

/* status pill */
.tnd-bx .tnd-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  background: var(--cream-2); color: var(--ink-3); text-transform: capitalize;
}
.tnd-bx .tnd-status-pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.tnd-bx .tnd-status-pill.is-active, .tnd-bx .tnd-status-pill.is-approved { background: var(--ok-tint); color: var(--ok); }
.tnd-bx .tnd-status-pill.is-rejected { background: var(--critical-tint); color: var(--critical); }
.tnd-bx .tnd-status-pill.is-pending, .tnd-bx .tnd-status-pill.is-initiated { background: var(--primary-tint); color: var(--primary); }
.tnd-bx .tnd-status-pill.is-completed { background: var(--cream-2); color: var(--ink-3); }

/* quiet neutral badge (e.g. transportation / source cells) */
.tnd-bx .tnd-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-3); border: 1px solid var(--paper-edge);
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em; text-transform: capitalize; line-height: 1.4;
}

/* 3-dot row menu (kebab), pop is position:fixed, positioned by the page's small toggle JS */
.tnd-bx .tnd-rowmenu { position: relative; display: inline-block; }
.tnd-bx .tnd-rowmenu-trigger {
  width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center;
  color: var(--ink-4); cursor: pointer; transition: all 0.15s; font-size: 14px; border: 0; background: transparent; padding: 0;
}
.tnd-bx .tnd-rowmenu-trigger:hover, .tnd-bx .tnd-rowmenu.is-open .tnd-rowmenu-trigger { background: var(--cream-2); color: var(--ink); }
.tnd-rowmenu-pop {
  position: fixed; z-index: 3050; display: none; flex-direction: column;
  min-width: 152px; padding: 5px; background: var(--paper-2); border: 1px solid var(--paper-edge);
  border-radius: 11px; box-shadow: var(--shadow-md); text-align: left;
}
.tnd-rowmenu.is-open .tnd-rowmenu-pop { display: flex; }
.tnd-rowmenu-pop .tnd-rowmenu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start;
  padding: 9px 11px; border-radius: 8px; background: transparent; border: none; box-shadow: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.tnd-rowmenu-pop .tnd-rowmenu-item i { font-size: 12px; color: var(--ink-4); width: 14px; text-align: center; }
.tnd-rowmenu-pop .tnd-rowmenu-item:hover { background: var(--cream); color: var(--ink); text-decoration: none; }
.tnd-rowmenu-pop .tnd-rowmenu-item.danger { color: var(--critical); }
.tnd-rowmenu-pop .tnd-rowmenu-item.danger i { color: var(--critical); }
.tnd-rowmenu-pop .tnd-rowmenu-item.danger:hover { background: var(--critical-tint); color: var(--critical); }

/* legend/section title spacing for the secondary "Bus Change Requests" table */
.tnd-bx .sms_title { padding: 0; }

/* .tnd-bx list search: match the generic search look (magnifier icon + 14px radius) */
.tnd-bx .dataTables_filter { margin: 0 0 12px; }
.tnd-bx .dataTables_filter label { font-size: 0; color: transparent; }
.tnd-bx .dataTables_filter input {
  width: 300px; padding-left: 40px; border-radius: var(--radius-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
}
.tnd-bx .dataTables_filter input::placeholder { color: var(--ink-4); font-weight: 400; }

/* Bus Changes (.tnd-bx + .tnd-list-generic hybrid): title column + requests section */
.tnd-bx .box-header .box-name .tnd-bx-titlewrap { display: flex; flex-direction: column; min-width: 0; }
.tnd-bx .box-header .box-name .tnd-bx-titlewrap > span {
  display: block; font-family: var(--font-display, var(--font-sans)); font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; text-transform: capitalize;
}
.tnd-bx .box-header .box-name .tnd-bx-titlewrap > .tnd-sub {
  display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13.5px; color: var(--ink-4);
  letter-spacing: 0; margin-top: 3px; text-transform: none;
}
/* the secondary "Bus Change Requests" table: separate it from the header + give it room */
.tnd-bx .bus_schedule_request_container { margin: 22px 0 0; }
.tnd-bx .bus_schedule_request_container .sms_title legend {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--ink-2);
  border: 0; width: auto; margin: 0 0 10px; padding: 0; text-transform: none; letter-spacing: -0.005em;
}

/* Bus Changes selection gutter, always show the row checkmarks + the header select-all
   (the Users-page behaviour, normally gated behind .tnd-list-page which we can't use here
   because the two-table layout needs natural flow, not the full-height internal scroll). */
.tendi-skin.tnd-bus-changes td.tnd-check-cell .tnd-cbox { opacity: 1; pointer-events: auto; }
.tendi-skin.tnd-bus-changes .tnd-check-th .tnd-markall { display: inline-flex; }
.tendi-skin.tnd-bus-changes .tnd-check-th .tnd-select-toggle { display: none; }

/* ============================================================================
   Bus Changes: NATURAL-SCROLL two-table layout.
   The single-viewport sticky .tnd-list-page layout suits ONE table, not two: it
   left the main list a cramped little internal scroll strip. So we KEEP
   .tnd-list-page purely for its flat footer / pagination / length styling (the
   devoops `dom` hook is gated on that class), but UNDO its fixed-height /
   overflow:hidden machinery here so the whole PAGE scrolls. The nav rail is
   position:fixed, so it stays put while the content scrolls.
   ============================================================================ */
/* keep the reserved scrollbar gutter here too (see the .tnd-list-page rule above): this page
   really does scroll the window, so it gets a live scrollbar rather than an inert track. */
html:has(.tnd-bus-changes) { height: auto !important; overflow-x: visible !important; overflow-y: scroll !important; }
html:has(.tnd-bus-changes) body { height: auto !important; overflow: visible !important; }
body:has(.tnd-bus-changes) #main { height: auto !important; overflow: visible !important; }
body:has(.tnd-bus-changes) #main > .row { height: auto !important; }
body:has(.tnd-bus-changes) #content { height: auto !important; overflow: visible !important; display: block !important; }
body:has(.tnd-bus-changes) #content > #ajax-content { display: block !important; min-height: 0 !important; }
body:has(.tnd-bus-changes) #content > #ajax-content > .tnd-list-page { min-height: 0 !important; }
.tendi-skin.tnd-bus-changes.tnd-list-page { height: auto !important; overflow: visible !important; display: block !important; padding-bottom: 28px; }
.tendi-skin.tnd-bus-changes .box,
.tendi-skin.tnd-bus-changes .box-content,
.tendi-skin.tnd-bus-changes #frmBatchOperations { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
/* both tables size to content (no flex:1 internal scroller), the page scrolls, wide tables
   still scroll horizontally inside their own clip. */
.tendi-skin.tnd-bus-changes .tnd-table-scroll { flex: 0 0 auto !important; max-height: none !important; }

/* The "Bus Change Requests" queue is secondary. When it HAS rows, cap it with its own scroll so
   a long queue can't dwarf the main list. When it's EMPTY, drop the table chrome (legend, header,
   search) and show a gentle one-line notice instead of an empty white card. */
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-table-scroll { max-height: 320px; overflow-y: auto; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_container:has(.tnd-empty) .sms_title,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) thead,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .tnd-dt-toolbar2,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .tnd-dt-foot { display: none; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .tnd-table-clip,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .tnd-table-scroll,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) table.tnd-list-table,
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) table.tnd-list-table tbody td {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .tnd-table-scroll { max-height: none; overflow: visible; }
/* empty requests → a single compact horizontal line (icon · title · sub), not a tall stacked card */
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-empty { flex-flow: row wrap; align-items: center; justify-content: center; gap: 2px 11px; padding: 8px 18px; text-align: left; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-empty-ico { width: 30px; height: 30px; margin-bottom: 0; flex: none; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-empty-ico svg { width: 16px; height: 16px; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-empty-title { font-size: 14px; }
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper .tnd-empty-sub { font-size: 12.5px; }
.tendi-skin.tnd-bus-changes .box-content > hr { margin: 16px 0 18px; }
/* when the queue is empty, tighten the band around the notice (compact line + divider, not a big gap) */
.tendi-skin.tnd-bus-changes .bus_schedule_request_container:has(.tnd-empty) { margin-top: 6px; }
.tendi-skin.tnd-bus-changes .box-content:has(.tnd-empty) > hr { margin: 9px 0 14px; }
/* the .table-responsive wrapper carries the white bg + hairline border for the table card: drop
   it too when the requests queue is empty so the gentle notice floats cleanly on the page (this
   was the stray "white container" left around the empty state). */
.tendi-skin.tnd-bus-changes .bus_schedule_request_wrapper:has(.tnd-empty) .table-responsive { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* ---- fit the 12-column changes table into the narrow content column ----
   It's a single sticky-header table (not DataTables scrollX), so hiding th+td by position
   is clean. Show the essentials (child · bus · date · actions); every other field stays one
   click away in the row detail pane (whole-row → .tnd-list-generic side pane). Tuned for the
   current column order (no reorder column; checkbox present). */
.tendi-skin.tnd-bus-changes #datatable-1 { width: 100%; }
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(4),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(4),   /* Transportation */
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(6),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(6),   /* Address */
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(7),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(7),   /* Contact */
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(8),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(8),   /* Is recurring */
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(9),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(9),   /* Date (a messy multi-date list, full range is in the pane) */
.tendi-skin.tnd-bus-changes #datatable-1 > thead > tr > th:nth-child(10),
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(10) { display: none !important; }  /* Source */
/* Child fills the row (stays readable); Bus wraps name + (branch) within a cap; the Status pill stays. */
.tendi-skin.tnd-bus-changes #datatable-1 > tbody > tr > td:nth-child(5) { max-width: 138px; overflow: hidden; overflow-wrap: anywhere; }  /* Bus */
/* toolbar: vertically centre the row and inline the Branch label so the filter block isn't
   taller than the toggle / buttons sitting beside it (tightens the whole toolbar band) */
.tendi-skin.tnd-bus-changes .tnd-toolbar { align-items: center; row-gap: 10px; }
.tendi-skin.tnd-bus-changes .tnd-toolbar > .textbox-form { flex-direction: row; align-items: center; gap: 8px; }
.tendi-skin.tnd-bus-changes .tnd-toolbar > .textbox-form > .control-label { margin: 0; white-space: nowrap; }
/* the page now renders the STANDARD list_header partial (.tnd-page-head): re-hide the legacy
   box-header that the .tnd-bx variant re-shows, so there's exactly one header (the canonical one) */
.tendi-skin.tnd-bus-changes .box-header { display: none !important; }
/* this page carries THREE header actions (Export Bus Pins · UFN Review · Add): more than the
   title row can hold in the narrow content column. Let the head wrap: title keeps its width,
   the action cluster drops to a second right-aligned line when tight (one row on wide screens). */
.tendi-skin.tnd-bus-changes .tnd-page-head { flex-wrap: wrap; }
.tendi-skin.tnd-bus-changes .tnd-page-head .tnd-page-head-text { flex: 1 1 220px; }
.tendi-skin.tnd-bus-changes .tnd-page-head .btnContainer { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; row-gap: 8px; }

/* ============================================================
   LOGS PAGE: activity TIMELINE (replaces the DataTable at #logs).
   Full-page adaptation of the .tnd-hist audit timeline: colour-coded
   nodes by event category, sticky day headers, clickable cards that
   open the child's record. Markup + behaviour: views/admin/logs_manage.php,
   fed by admin/logs/get_history. Page-head lockup comes from list_header.
   ============================================================ */
/* toolbar sits above the timeline; the timeline scroll region grows to fill (flex chain) */
.tendi-skin.tnd-logs-page .tnd-logs-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 2px 0 14px; }
.tendi-skin.tnd-logs-page .tnd-logs-search { position: relative; flex: 0 1 280px; min-width: 170px; }
.tendi-skin.tnd-logs-page .tnd-logs-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 13px; pointer-events: none; }
.tendi-skin.tnd-logs-page .tnd-logs-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2); font-family: var(--font-sans); font-size: 13px; color: var(--ink); }
.tendi-skin.tnd-logs-page .tnd-logs-search input::placeholder { color: var(--ink-4); }
.tendi-skin.tnd-logs-page .tnd-logs-search input:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px var(--primary-tint); }

.tendi-skin.tnd-logs-page .tnd-logs-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tendi-skin.tnd-logs-page .tlchip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-full); background: var(--paper-2); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.tendi-skin.tnd-logs-page .tlchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-5); transition: background .14s; }
.tendi-skin.tnd-logs-page .tlchip.cat-fail .dot { background: var(--critical); }
.tendi-skin.tnd-logs-page .tlchip.cat-warn .dot { background: var(--attention); }
.tendi-skin.tnd-logs-page .tlchip.cat-undo .dot { background: var(--info); }
.tendi-skin.tnd-logs-page .tlchip:hover { border-color: var(--paper-edge-strong); color: var(--ink); background: var(--cream-2); }
.tendi-skin.tnd-logs-page .tlchip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tendi-skin.tnd-logs-page .tlchip.is-on .dot { background: #fff; }
.tendi-skin.tnd-logs-page .tlchip.cat-fail.is-on { background: var(--critical); border-color: var(--critical); }
.tendi-skin.tnd-logs-page .tlchip.cat-warn.is-on { background: var(--attention); border-color: var(--attention); }
.tendi-skin.tnd-logs-page .tlchip.cat-undo.is-on { background: var(--info); border-color: var(--info); }

/* "Types" expander + the drill-down palette (multi-select individual log types) */
.tendi-skin.tnd-logs-page .tlchip-more { gap: 7px; color: var(--ink-3); }
.tendi-skin.tnd-logs-page .tlchip-more .chev { font-size: 9px; color: var(--ink-4); transition: transform .18s; }
.tendi-skin.tnd-logs-page .tlchip-more.is-open { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.tendi-skin.tnd-logs-page .tlchip-more.is-open .chev { transform: rotate(180deg); color: var(--primary); }
.tendi-skin.tnd-logs-page .tnd-logs-types { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; padding: 12px 2px 2px; border-top: 1px dashed var(--paper-edge); }
.tendi-skin.tnd-logs-page .tnd-logs-types[hidden] { display: none; }
.tendi-skin.tnd-logs-page .tnd-logs-types .tlabel { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-5); margin-right: 4px; }
.tendi-skin.tnd-logs-page .tltype { display: inline-flex; align-items: center; gap: 7px; height: 31px; padding: 0 12px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-full); background: var(--paper-2); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.tendi-skin.tnd-logs-page .tltype .dot { width: 7px; height: 7px; border-radius: 50%; }
.tendi-skin.tnd-logs-page .tltype.cat-fail .dot { background: var(--critical); }
.tendi-skin.tnd-logs-page .tltype.cat-warn .dot { background: var(--attention); }
.tendi-skin.tnd-logs-page .tltype.cat-undo .dot { background: var(--info); }
.tendi-skin.tnd-logs-page .tltype:hover { background: var(--cream-2); color: var(--ink); }
.tendi-skin.tnd-logs-page .tltype.is-on { color: var(--ink); }
.tendi-skin.tnd-logs-page .tltype.cat-fail.is-on { background: var(--critical-tint); border-color: rgba(217,69,56,.30); }
.tendi-skin.tnd-logs-page .tltype.cat-warn.is-on { background: var(--attention-tint); border-color: rgba(157,107,16,.30); }
.tendi-skin.tnd-logs-page .tltype.cat-undo.is-on { background: var(--info-tint); border-color: rgba(63,111,153,.30); }

.tendi-skin.tnd-logs-page .tnd-logs-dates { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tendi-skin.tnd-logs-page .tnd-logs-date { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-full); background: var(--paper-2); }
.tendi-skin.tnd-logs-page .tnd-logs-date > i { color: var(--ink-4); font-size: 12px; }
.tendi-skin.tnd-logs-page .tnd-logs-date input { border: 0; background: transparent; width: 62px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tendi-skin.tnd-logs-page .tnd-logs-date input::placeholder { color: var(--ink-4); font-weight: 500; }
.tendi-skin.tnd-logs-page .tnd-logs-date input:focus { outline: none; }
.tendi-skin.tnd-logs-page .tnd-logs-dash { color: var(--ink-4); }
.tendi-skin.tnd-logs-page .tnd-logs-reset { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; text-decoration: none !important; }
.tendi-skin.tnd-logs-page .tnd-logs-reset:hover { color: var(--primary); background: var(--cream-2); }

/* the scroll region, grows to fill remaining height, scrolls internally (sticky ancestor) */
.tendi-skin.tnd-logs-page .tnd-logs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 2px 8px; background: var(--cream); }
.tendi-skin.tnd-logs-page .tnd-logtl { list-style: none; margin: 0; padding: 0 0 6px; position: relative; max-width: 720px; }

/* sticky day header, pins to the top of the scroll area until the next day takes over */
.tendi-skin.tnd-logs-page .tnd-logtl-day { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 0 0 9px; padding: 9px 0 7px; background: var(--cream); }
.tendi-skin.tnd-logs-page .tnd-logtl-day-label { font-family: var(--font-sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.tendi-skin.tnd-logs-page .tnd-logtl-day-line { flex: 1; height: 1px; background: var(--paper-edge); }

/* event row: node column + card, connected by a spine */
.tendi-skin.tnd-logs-page .tnd-logtl-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 11px; margin: 0 0 7px; }
.tendi-skin.tnd-logs-page .tnd-logtl-item::before { content: ""; position: absolute; left: 13px; top: 13px; bottom: -7px; width: 2px; background: var(--paper-edge-strong); z-index: 0; }
.tendi-skin.tnd-logs-page .tnd-logtl-item.is-daylast::before,
.tendi-skin.tnd-logs-page .tnd-logtl-item:last-child::before { display: none; }
.tendi-skin.tnd-logs-page .tnd-logtl-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; z-index: 1; background: var(--ct, var(--primary-tint)); color: var(--c, var(--primary)); box-shadow: 0 0 0 3px var(--cream); }
.tendi-skin.tnd-logs-page .tnd-logtl-item.cat-fail { --c: var(--critical); --ct: var(--critical-tint); }
.tendi-skin.tnd-logs-page .tnd-logtl-item.cat-warn { --c: var(--attention); --ct: var(--attention-tint); }
.tendi-skin.tnd-logs-page .tnd-logtl-item.cat-undo { --c: var(--info); --ct: var(--info-tint); }

.tendi-skin.tnd-logs-page .tnd-logtl-card { position: relative; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-md); padding: 9px 14px; transition: border-color .15s, box-shadow .15s; }
/* clickable cards (row has a resolvable child) open the child's record */
.tendi-skin.tnd-logs-page .tnd-logtl-item.is-link .tnd-logtl-card { padding-right: 30px; cursor: pointer; }
.tendi-skin.tnd-logs-page .tnd-logtl-item.is-link .tnd-logtl-card:hover { border-color: var(--c, var(--paper-edge-strong)); box-shadow: var(--shadow-overlay-sm); }
.tendi-skin.tnd-logs-page .tnd-logtl-item.is-link .tnd-logtl-card::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 13px; top: 50%; transform: translateY(-50%) translateX(-4px); color: var(--ink-5); font-size: 11px; opacity: 0; transition: opacity .15s, transform .15s; }
.tendi-skin.tnd-logs-page .tnd-logtl-item.is-link .tnd-logtl-card:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); color: var(--c, var(--primary)); }

.tendi-skin.tnd-logs-page .tnd-logtl-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.tendi-skin.tnd-logs-page .tnd-logtl-tag { font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); background: var(--ct); color: var(--c); flex-shrink: 0; }
.tendi-skin.tnd-logs-page .tnd-logtl-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tendi-skin.tnd-logs-page .tnd-logtl-time { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-4); white-space: nowrap; flex-shrink: 0; }
.tendi-skin.tnd-logs-page .tnd-logtl-time i { font-size: 10.5px; }
.tendi-skin.tnd-logs-page .tnd-logtl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tendi-skin.tnd-logs-page .tnd-logtl-meta .m { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); font-weight: 500; }
.tendi-skin.tnd-logs-page .tnd-logtl-meta .m i { font-size: 11px; color: var(--ink-4); width: 13px; text-align: center; flex-shrink: 0; }
.tendi-skin.tnd-logs-page .tnd-logtl-meta .m.is-empty { color: var(--ink-5); }

/* loader / end / empty */
.tendi-skin.tnd-logs-page .tnd-logtl-loader { display: flex; justify-content: center; padding: 18px; }
.tendi-skin.tnd-logs-page .tnd-logtl-spin { width: 22px; height: 22px; border: 2.5px solid var(--primary-tint); border-top-color: var(--primary); border-radius: 50%; animation: tndLogSpin .7s linear infinite; }
@keyframes tndLogSpin { to { transform: rotate(360deg); } }
.tendi-skin.tnd-logs-page .tnd-logtl-end { max-width: 720px; text-align: center; padding: 14px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-5); font-weight: 500; }
.tendi-skin.tnd-logs-page .tnd-logtl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--ink-4); }
.tendi-skin.tnd-logs-page .tnd-logtl-empty i { font-size: 32px; color: var(--ink-5); }
.tendi-skin.tnd-logs-page .tnd-logtl-empty span { font-size: 13.5px; font-weight: 500; }

/* scrollbar */
.tendi-skin.tnd-logs-page .tnd-logs-scroll::-webkit-scrollbar { width: 9px; }
.tendi-skin.tnd-logs-page .tnd-logs-scroll::-webkit-scrollbar-track { background: transparent; }
.tendi-skin.tnd-logs-page .tnd-logs-scroll::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: var(--radius-full); border: 2px solid var(--cream); }

/* Bus-change edit form: the read-only .pane-summary fields exist ONLY to feed the side-pane view
   builder (it reads their label + value). Never render them as inputs in the edit form / the
   standalone add-edit page: the interactive date editors above are the real controls. */
.pane-summary { display: none !important; }

/* Toggle switch (e.g. Bus Changes "Show past changes"). */
.tnd-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font: 500 13px/1.1 var(--font-sans, inherit); color: var(--ink-2, #3a3550); margin: 0; }
.tnd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tnd-switch .tnd-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--paper-edge, #d9d2e6); transition: background .18s ease; flex: 0 0 auto; }
.tnd-switch .tnd-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s ease; }
.tnd-switch input:checked + .tnd-switch-track { background: var(--primary, #5a3fc2); }
.tnd-switch input:checked + .tnd-switch-track::after { transform: translateX(16px); }
.tnd-switch input:focus-visible + .tnd-switch-track { box-shadow: 0 0 0 3px var(--focus-ring, rgba(90,63,194,.3)); }
.tnd-showpast-wrap { display: inline-flex; align-items: center; }

/* ============================================================
   ROUTE PLAYGROUND (#route_playground): the drag-and-drop bus
   staging board (route_playground_manage.php). The wrapper already
   carries .tnd-bx (toolbar kit) + the page hook .tnd-route-playground;
   this section skins the board itself: the unassigned-children pool,
   the horizontally-scrolling bus columns, the pager, and the two
   modals (which sit OUTSIDE the wrapper → id-scoped). Everything is
   an ADDITIVE override of the view's local <style> block + the legacy
   style.css ul.children_wrapper/ul.bus_wrapper rules: outscored by
   specificity/order, no legacy hook renamed.
   JS constraints (custom.js + the view's inline script):
   - setBusColumnsWidth/setContainerHeight measure + set inline
     geometry, and .busColumns scrolls via translateX → never change
     the position/display scheme of .busColumnsParent/.busColumns.
   - li.child_row is a jQuery-UI draggable that must escape its
     column mid-drag → NO overflow:hidden on .busAssignedChildren,
     and no transforms/position transitions on the cards.
   ============================================================ */
.tnd-route-playground { font-family: var(--font-sans); }

/* --- the unassigned-children pool (4 columns) --- */
.tnd-route-playground ul.children_wrapper { margin: 0; padding: 0; }
.tnd-route-playground ul.children_wrapper li.child_row { min-height: 0; margin-top: 7px; cursor: grab; }
.tnd-route-playground ul.children_wrapper li.child_row:active { cursor: grabbing; }
.tnd-route-playground ul.children_wrapper li.child_row > div {
  width: 100%; height: auto; padding: 8px 11px; background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  transition: border-color .14s ease, background .14s ease;
}
.tnd-route-playground ul.children_wrapper li.child_row:hover > div { border-color: var(--paper-edge-strong); }
/* the name link sits above the plain-text address inside .child-name */
.tnd-route-playground ul.children_wrapper li .child-name { font-size: 11px; line-height: 1.5; color: var(--ink-4); }
.tnd-route-playground ul.children_wrapper li .child-name a { font-size: 13px; font-weight: 600; line-height: 1.25; }
.tnd-route-playground a.blackColor { color: var(--ink); text-decoration: none; }
.tnd-route-playground a.blackColor:hover { color: var(--primary); }
.tnd-route-playground .branch-detail { font-size: 10.5px; }
.tnd-route-playground .branch-detail .branch-name,
.tnd-route-playground .branch-detail .class-name { font-size: 10.5px; font-weight: 500; color: var(--ink-4); }

/* --- total + pager under the pool --- */
.tnd-route-playground .totalCountChildren { font-size: 12.5px; color: var(--ink-3); }
.tnd-route-playground .totalCountChildren b { font-weight: 700; color: var(--ink); }
.tnd-route-playground .paginationM .btn {
  height: 30px; min-width: 30px; padding: 0 9px; font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm); background: var(--paper-2);
  border: 1px solid var(--paper-edge-strong); color: var(--ink-3); box-shadow: none;
}
.tnd-route-playground .paginationM .btn:hover { border-color: var(--primary); color: var(--ink); }
.tnd-route-playground .paginationM .btn[disabled] { background: transparent; border-color: transparent; color: var(--ink-5); }
.tnd-route-playground .paginationM .selected-page-btn,
.tnd-route-playground .paginationM .selected-page-btn:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* --- "Search for bus route" field (its row is NOT a .tnd-toolbar) --- */
.tnd-route-playground label[for="bus_name"] {
  display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 6px; line-height: 1.1;
}
.tnd-route-playground input#bus_name {
  height: 40px; width: 240px; max-width: 100%; padding: 0 12px; margin: 0;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md); background: var(--paper-2);
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none;
}
.tnd-route-playground input#bus_name:hover { border-color: var(--paper-edge-strong); }
.tnd-route-playground input#bus_name:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tnd-route-playground input#bus_name::placeholder { color: var(--ink-4); font-weight: 400; }

/* --- custom dropdowns (Batch / Neighborhood / route time) ---
   The native selects are wrapped in a `.tendi-skin.tnd-rp-dd` ISLAND span
   (the file-upload `.fu-ddwrap` pattern) so the .tendi-skin-scoped .tnd-select
   component CSS applies, then upgraded via TndSelect.enhance() in the view.
   The trigger is normalized to the 40px toolbar-field look. */
.tnd-route-playground .tnd-rp-dd { display: block; width: 184px; max-width: 100%; position: relative; font-size: 13px; }
.tnd-route-playground .tnd-rp-dd:has(.tnd-select.is-open) { z-index: 200; }
.tnd-route-playground .tnd-rp-dd .tnd-select-trigger {
  height: 40px; padding: 0 12px; background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500;
}
.tnd-route-playground .tnd-rp-dd .tnd-select-trigger:hover { border-color: var(--paper-edge-strong); }
.tnd-route-playground .tnd-rp-dd .tnd-select.is-open .tnd-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
/* trigger stays compact; the open menu widens to fit full option names */
.tnd-route-playground .tnd-rp-dd .tnd-select-menu { right: auto; min-width: 100%; width: max-content; max-width: 340px; }

/* branch select2 multi: label the empty state + chevron instead of a blank white box
   (the Children page's `.branches` treatment, adapted to this toolbar) */
.tnd-route-playground .tnd-toolbar .select2-container-multi { position: relative; }
.tnd-route-playground .tnd-toolbar .select2-container-multi::after {
  content: ""; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; z-index: 1;
  background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a93ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.tnd-route-playground .tnd-toolbar .select2-container-multi .select2-choices { padding-right: 30px; }
.tnd-route-playground .tnd-toolbar .select2-container-multi .select2-choices:not(:has(.select2-search-choice))::before {
  content: "All branches"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 13.5px; pointer-events: none;
}
.tnd-route-playground .tnd-toolbar .select2-container-multi .select2-choices { position: relative; }
/* while focused/typing the search input takes over: drop the placeholder so text never overlaps */
.tnd-route-playground .tnd-toolbar .select2-container-multi.select2-container-active .select2-choices::before { content: none; }

/* --- the bus columns (drop targets) --- */
.tnd-route-playground .busAssignedChildren {
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong);
  border-radius: var(--radius-lg);
}
.tnd-route-playground .displayBusChildrens {
  padding: 9px 8px 9px 12px; background: var(--cream-2);
  border-bottom: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tnd-route-playground .busLabel { text-align: left; min-width: 0; }
.tnd-route-playground .busLabel b {
  font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
/* the expand-to-reorder icon → quiet icon button */
.tnd-route-playground .bus_assigned_childrens_modal {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--ink-4); font-size: 12px;
  transition: background .13s, color .13s;
}
.tnd-route-playground .bus_assigned_childrens_modal:hover { background: var(--primary-tint); color: var(--primary); }

/* column body list (the local .bus_wrapper padding-bottom:40px!important
   stays. It reserves room for the absolute bottom name bar) */
.tnd-route-playground ul.bus_wrapper { margin: 0; padding: 4px 8px; min-height: 38px; }
/* empty column → invitation text (the JS renders a truly empty <ul>) */
.tnd-route-playground ul.bus_wrapper:empty::after {
  content: "No children assigned \2014  drag a child here";
  display: block; padding: 10px 8px 12px; text-align: center; font-size: 11px; color: var(--ink-5);
}
.tnd-route-playground ul.bus_wrapper li { min-height: 0; margin-top: 6px; padding: 0; cursor: grab; }
.tnd-route-playground ul.bus_wrapper li:active { cursor: grabbing; }
.tnd-route-playground ul.bus_wrapper li > div {
  width: 100%; height: auto; padding: 7px 10px; background: var(--cream-2);
  border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  transition: border-color .14s ease;
}
.tnd-route-playground ul.bus_wrapper li:hover > div { border-color: var(--paper-edge-strong); }
.tnd-route-playground ul.bus_wrapper li .bus-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tnd-route-playground ul.bus_wrapper li .address { font-size: 10.5px; color: var(--ink-4); line-height: 1.45; }

/* a mid-drag card floats → violet edge + real shadow (overlay, so a shadow is allowed).
   Placed AFTER both card :hover rules and matching their ul-scoped specificity so the
   violet edge wins while the cursor (necessarily) hovers the dragged card. */
.tnd-route-playground ul.children_wrapper li.child_row.ui-draggable-dragging > div,
.tnd-route-playground ul.bus_wrapper li.child_row.ui-draggable-dragging > div {
  border-color: var(--primary); box-shadow: var(--shadow-overlay-sm); background: var(--paper-2);
}

/* the anchored bus-name bar at the column foot (was black-on-grey) */
.tnd-route-playground .bus_name_div {
  height: 35px; line-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 10px; background: var(--cream-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  border-top: 1px solid var(--paper-edge);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* =============================================================
   The two playground modals: OUTSIDE .tnd-route-playground, so
   id-scoped. The view's local <style> hits .modal-content globally
   with !important box-shadow → matched with !important here.
   ============================================================= */
#pull_live_childs_bus_routes .modal-dialog { width: 440px; max-width: 95%; }
#bus_assign_children_modal .modal-dialog { width: 560px; max-width: 95%; }
#pull_live_childs_bus_routes .modal-content,
#bus_assign_children_modal .modal-content {
  border: 1px solid var(--paper-edge) !important; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay) !important; background: var(--paper-2);
  color: var(--ink); font-family: var(--font-sans); overflow: hidden;
}
#pull_live_childs_bus_routes .modal-header,
#bus_assign_children_modal .modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--paper-edge); background: var(--paper);
}
#pull_live_childs_bus_routes .modal-title,
#bus_assign_children_modal .modal-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.2; text-align: left;
  text-transform: none;   /* style.css capitalizes every .modal-title, sentence case here */
}
/* close button: neutralize the inline-positioned × span (same trick as #reorder_routes_children) */
#pull_live_childs_bus_routes .modal-header .close,
#bus_assign_children_modal .modal-header .close {
  float: none; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent;
  border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink-4);
  opacity: 1; text-shadow: none; transition: background .13s, color .13s;
}
#pull_live_childs_bus_routes .modal-header .close:hover,
#bus_assign_children_modal .modal-header .close:hover { background: var(--cream-2); color: var(--ink); opacity: 1; }
#pull_live_childs_bus_routes .modal-header .close span,
#bus_assign_children_modal .modal-header .close span {
  position: static !important; margin: 0 !important; font-size: 20px; line-height: 1; font-weight: 400;
}

/* --- "Pull live data to playground" body --- */
#pull_live_childs_bus_routes .modal-body { padding: 22px 22px 24px; }
#pull_live_childs_bus_routes .modal-body label {
  display: block; text-align: left; font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 6px; line-height: 1.1;
}
#pull_live_childs_bus_routes .modal-body .form-control {
  height: 40px; padding: 0 12px; border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
  background: var(--paper-2); font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); box-shadow: none;
}
#pull_live_childs_bus_routes .modal-body .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
#pull_live_childs_bus_routes .btn-pull-live-childs {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px;
  border-radius: var(--radius-md); background: var(--primary); border: 1px solid var(--primary);
  color: #fff; box-shadow: var(--shadow-sm); text-decoration: none !important;
}
#pull_live_childs_bus_routes .btn-pull-live-childs:hover,
#pull_live_childs_bus_routes .btn-pull-live-childs:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
#pull_live_childs_bus_routes .btn-pull-live-childs[disabled] { opacity: .55; }
#pull_live_childs_bus_routes .btn-pull-live-childs h5 {
  margin: 0; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; gap: 7px; color: #fff;
}
#pull_live_childs_bus_routes .btn-pull-live-childs h5 i { font-size: 12px; }

/* --- per-bus reorder modal: numbered, drag-sortable stop rows --- */
#bus_assign_children_modal .modal-body { padding: 14px 18px 18px; max-height: 70vh; overflow-y: auto; }
#bus_assign_children_modal ul.bus_wrapper {
  margin: 0; padding: 0 0 4px !important; list-style: none; counter-reset: tndstop;
}
#bus_assign_children_modal li.child_row_stop_numbers {
  counter-increment: tndstop; position: relative; min-height: 0; margin: 7px 0 0;
  padding: 8px 12px 8px 46px; text-align: left; cursor: grab;
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius-md);
}
#bus_assign_children_modal li.child_row_stop_numbers:active { cursor: grabbing; }
#bus_assign_children_modal li.child_row_stop_numbers::before {
  content: counter(tndstop); position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary); font-size: 11px; font-weight: 700;
}
#bus_assign_children_modal li.child_row_stop_numbers > div {
  width: 100%; height: auto; margin: 0; padding: 0; background: transparent;
}
#bus_assign_children_modal li.child_row_stop_numbers { font-size: 13px; font-weight: 600; color: var(--ink); }
#bus_assign_children_modal li.child_row_stop_numbers .branch-detail { font-size: 10.5px; }
#bus_assign_children_modal li.child_row_stop_numbers .branch-name,
#bus_assign_children_modal li.child_row_stop_numbers .class-name { font-size: 10.5px; font-weight: 500; color: var(--ink-4); }
#bus_assign_children_modal li.child_row_stop_numbers .address { font-size: 11px; font-weight: 400; color: var(--ink-4); line-height: 1.45; }
/* jQuery-UI sortable drop slot */
#bus_assign_children_modal .sortable-placeholder {
  margin-top: 7px; min-height: 41px; list-style: none;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--radius-md); background: var(--primary-tint);
}
/* the row being dragged floats above its siblings */
#bus_assign_children_modal li.child_row_stop_numbers.ui-sortable-helper {
  border-color: var(--primary); box-shadow: var(--shadow-overlay-sm);
}

/* ============================================================
   SETUP PROGRESS PILL (admin header): guided tenant onboarding.
   Mirrors .tnd-hist-pill / .tnd-al-pill so the header stays one visual family.
   ============================================================ */
.tnd-setup-btn { text-decoration: none; }
.tnd-setup-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-full, 999px); border: 1px solid var(--primary, #5a3fc2);
  background: var(--primary, #5a3fc2); color: #fff; font-size: 12.5px; font-weight: 650; line-height: 1;
  transition: filter .15s; }
.tnd-setup-btn:hover .tnd-setup-pill { filter: brightness(1.08); }
.tnd-setup-pill svg { width: 14px; height: 14px; }
.tnd-setup-count { font-variant-numeric: tabular-nums; opacity: .85; font-weight: 700; }
@media (max-width: 1200px) { .tnd-setup-label { display: none; } }

/* ============================================================
   EMPTY-STATE AWARENESS (Part D). A list nobody has populated yet.
   Distinct from `.tnd-empty` (a filter matched nothing): this one names the gap
   and links to the fix. Copy comes from the setup entity registry, so the hub,
   the list page and the dropdown all say the same thing.
   ============================================================ */
/* --- inside an enhanced dropdown --- */
.tendi-skin .tnd-option--empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 14px; cursor: default; background: transparent !important; }
.tendi-skin .tnd-option--empty .tnd-opt-label { color: var(--ink-3, #6a7085); font-size: 13px; }
.tendi-skin .tnd-option--empty .tnd-opt-label b { color: var(--ink, #23283b); font-weight: 650; }
.tendi-skin .tnd-opt-add { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--primary, #5a3fc2); text-decoration: none; }
.tendi-skin .tnd-opt-add:hover { text-decoration: underline; }
.tendi-skin .tnd-opt-add svg { width: 12px; height: 12px; }
.tendi-skin .tnd-opt-add.is-plain { color: var(--ink-4, #8a90a2); font-weight: 500; }

/* --- next to a field --- */
.tendi-skin .tnd-empty-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-4, #8a90a2); }
.tendi-skin .tnd-empty-hint a { color: var(--primary, #5a3fc2); font-weight: 600; text-decoration: none; }
.tendi-skin .tnd-empty-hint a:hover { text-decoration: underline; }

/* --- full list-page state: never populated (vs. filtered to nothing) --- */
.tendi-skin .tnd-empty--virgin .tnd-empty-ico { background: var(--cream-2, #f3f0ff); color: var(--primary, #5a3fc2); }
.tendi-skin .tnd-empty-cta { margin-top: 10px; }
.tendi-skin .tnd-empty-cta a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-sm, 6px); border: 1px solid var(--primary, #5a3fc2); color: var(--primary, #5a3fc2);
  font-size: 13px; font-weight: 600; text-decoration: none; }
.tendi-skin .tnd-empty-cta a:hover { background: var(--cream-2, #f3f0ff); }

/* ---- CHIP INPUT (`.tnd-chips`): a stored comma-list edited as removable tokens.
   Settings > Text messages uses it for the staff alert recipients. The posted value lives in a
   sibling hidden input; this box is only the editor, so it deliberately mimics `.form-control`
   (same height, radius, border and focus ring) rather than inventing a second field language. */
.tendi-skin .tnd-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 5px 8px;
  border: 1px solid var(--paper-edge-strong); border-radius: var(--radius-md); background: var(--paper-2);
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tendi-skin .tnd-chips.is-focused { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tendi-skin .tnd-chips.has-error { border-color: var(--critical); box-shadow: 0 0 0 3px var(--critical-tint); }
.tendi-skin .tnd-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; padding: 0 4px 0 11px;
  border: 1px solid var(--primary); border-radius: var(--radius-full); background: var(--primary-tint);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--primary); white-space: nowrap;
}
.tendi-skin .tnd-chip-x {
  display: inline-grid; place-items: center; width: 19px; height: 19px; padding: 0; flex: none;
  border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; cursor: pointer;
  opacity: .6; transition: background .14s, opacity .14s;
}
.tendi-skin .tnd-chip-x:hover, .tendi-skin .tnd-chip-x:focus { background: rgba(90, 63, 194, .16); opacity: 1; outline: none; }
.tendi-skin .tnd-chip-x svg { width: 11px; height: 11px; display: block; }
.tendi-skin .tnd-chips-entry {
  flex: 1 1 140px; min-width: 140px; height: 30px; padding: 0 2px; margin: 0;
  border: 0; background: transparent; box-shadow: none; outline: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
}
.tendi-skin .tnd-chips-entry::placeholder { color: var(--ink-4); font-weight: 400; }
.tendi-skin .tnd-chips-err { margin: 5px 0 0; font-size: 11.5px; font-weight: 500; color: var(--critical); line-height: 1.45; }

/* ---- CHECKLIST (`.tnd-checklist`): a stack of checkboxes where each option needs a line of
   explanation, so `.checkbox-inline` (one word per box, all on one row) does not fit. ---- */
.tendi-skin .tnd-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tendi-skin .tnd-checklist > li { margin: 0; }
.tendi-skin .tnd-checklist label {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-weight: 400;
  transition: background .14s, border-color .14s;
}
.tendi-skin .tnd-checklist label:hover { background: var(--cream-2); border-color: var(--paper-edge); }
.tendi-skin .tnd-checklist input[type="checkbox"] { margin: 2px 0 0; flex: none; }
.tendi-skin .tnd-checklist-text { display: block; min-width: 0; }
.tendi-skin .tnd-checklist-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.tendi-skin .tnd-checklist-desc { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
/* the option is real but its detector is switched off elsewhere, so ticking it sends nothing:
   flag it on the row rather than let it read as a working setting */
.tendi-skin .tnd-checklist-warn {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--caution-wash); color: var(--caution-deep); border: 1px solid rgba(157, 107, 16, .22);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE FLOOR: nothing ends flush against the bottom of the scroll area.
   On a list page the gap is removed twice over, deliberately and elsewhere:
   `.box-content` gets `padding-bottom: 0 !important` (to close the dead space
   under a table) and the legacy 40px spacer the views append is collapsed.
   `.tnd-list-page` is pinned to `height:100%`, so once the content outgrows
   the viewport it overflows the box and the box's own padding-bottom stays
   behind with it: the last row sits on the floor. A trailing block INSIDE the
   flow is honoured either way, which is what this reserves. `flex:none`
   because `.box-content` is a flex column on list pages and the pseudo would
   otherwise be shrunk to nothing.
   ════════════════════════════════════════════════════════════════════════ */
.tendi-skin.tnd-form-page .settings-tab-content::after,
.tendi-skin.tnd-feat .box-content::after,
.tendi-skin.tnd-emptypes .box-content::after {
  content: ""; display: block; flex: none; height: var(--list-bottom);
}

/* ---- Info icon sits with the words it explains ----
   `.tnd-info` was pushed to the far end of its label with margin-left:auto.
   On a wide label that stranded it: the Settings col-sm-3 column and the
   Employee Types add-bar both showed the 'i' floating alone at the right edge,
   visually detached from the text it annotates. Keep it adjacent and move the
   whole lockup instead: a horizontal form's label column is right-aligned, so
   justify-content puts text and icon together at that right edge, which is
   where the icon already appeared. The existing
   `.control-label > .tnd-info { margin-right: 12px }` still keeps it off the
   field edge, and `.vB-toggle .tnd-info` (0,3,0) still wins for switches.
   Equal specificity to the rule it replaces, so source order decides and this
   block must stay below it. */
.tendi-skin .field-label > .tnd-info,
.tendi-skin .control-label > .tnd-info,
.tendi-skin label > .tnd-info { margin-left: 0; }
/* Bootstrap 3 only right-aligns .control-label from 768px up, so right-packing below that
   would push info-bearing labels opposite every plain one. And the 12px margin-right on
   line 477 existed to hold the icon off the field edge WHILE margin-left:auto pushed it
   there; once the lockup is right-packed that same 12px just insets the whole label from
   its neighbours in the column, so it goes to 0 in this context only. */
@media (min-width: 768px) {
  .tendi-skin .form-horizontal .control-label:has(> .tnd-info) { justify-content: flex-end; }
  .tendi-skin .form-horizontal .control-label:has(> .tnd-info) > .tnd-info { margin-right: 0; }
}

/* ============================================================
   EDIT ACCOUNT (common/edit_account.php, Trello #74)
   The page reuses the Users side-pane vocabulary (.vB-group / .vB-editcard /
   .field / .vB-photo), so it is grid-free; only the page-level lockup below
   is its own. Scoped to .tendi-skin.tnd-form-page.tnd-account-page so it
   always wins over the generic .tnd-form-page rules above.
   ============================================================ */
.tendi-skin.tnd-form-page.tnd-account-page .box-content { padding: 18px 26px 22px; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-group { margin-bottom: 22px; }
.tendi-skin.tnd-form-page.tnd-account-page fieldset:last-of-type .tnd-acct-group { margin-bottom: 0; }

/* identity lockup: avatar + name/handle, with the account's timestamps alongside */
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 4px 2px 20px; margin-bottom: 20px; border-bottom: 1px solid var(--paper-edge);
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero .vB-avatar {
  width: 62px; height: 62px; font-size: 21px; margin: 0; box-shadow: none;
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero-main { flex: 1; min-width: 0; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero-name {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0;
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero-sub {
  display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: 13px; color: var(--ink-4);
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero-uname { font-weight: 600; color: var(--ink-3); }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-hero-uname::before { content: "@"; color: var(--ink-5); }

/* timestamps as quiet label/value pairs (replaces the old italic parenthetical) */
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-facts { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-fact { min-width: 0; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-fact dt {
  font-family: var(--font-label); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-5); line-height: 1; margin-bottom: 5px;
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-fact dd {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 0; white-space: nowrap;
}

/* photo control: the preview tile carries the remove "x"; initials show when there is no photo */
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo { align-items: flex-start; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-tile { position: relative; flex: none; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo .vB-photo-pre { width: 72px; height: 72px; font-size: 23px; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-x {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0;
  display: none; place-items: center; border-radius: var(--radius-full);
  background: var(--paper-2); border: 1px solid var(--paper-edge-strong); color: var(--ink-3);
  box-shadow: var(--shadow-overlay-sm); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo.has-photo .tnd-acct-photo-x { display: grid; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-x:hover {
  background: var(--critical-tint); border-color: var(--critical); color: var(--critical);
}
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-x svg { width: 13px; height: 13px; display: block; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-photo .vB-photo-hint.is-pending { color: var(--attention); font-weight: 600; }

/* validation: jQuery-validate messages sit under the control they belong to */
.tendi-skin.tnd-form-page.tnd-account-page .field label.error,
.tendi-skin.tnd-form-page.tnd-account-page label.error {
  display: block; margin-top: 6px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--critical); line-height: 1.45;
}
.tendi-skin.tnd-form-page.tnd-account-page .field input.error { border-color: var(--critical); background: var(--critical-tint); }
.tendi-skin.tnd-form-page.tnd-account-page .field input.error:focus {
  border-color: var(--critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 18%, transparent);
}

/* narrow viewports: the two-up rows stack */
@media (max-width: 700px) {
  .tendi-skin.tnd-form-page.tnd-account-page .vB-editcard .form-grid.cols-2 { flex-direction: column; gap: 0; }
  .tendi-skin.tnd-form-page.tnd-account-page .tnd-acct-facts { gap: 18px; }
}

/* ---- Users side pane: username-rule feedback (tendi-users.js + #tndUnameMsg) ---- */
.tendi-skin #tndUserPane .field-help.is-error { color: var(--critical); font-weight: 600; }
.tendi-skin #tndUserPane .vB-editcard .field input.tnd-input-invalid {
  border-color: var(--critical); background: var(--critical-tint);
}
.tendi-skin #tndUserPane .vB-editcard .field input.tnd-input-invalid:focus {
  border-color: var(--critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 18%, transparent);
}