/* ==========================================================================
   PixelCore — UI system (loaded LAST, after np-purple.css)
   One place for: tokens, icons, buttons, tables, forms, menus, overlays,
   states, badges and focus. Colours come from the panel's --tn-* tokens so
   light and dark both work; nothing here changes markup semantics or logic.
   Icons: Font Awesome Solid only (vendored). Remove this <link> to roll back.
   ========================================================================== */

/* ── 1. tokens ──────────────────────────────────────────────────────────── */
body.tnui {
  /* spacing: 4px grid */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px; --ui-s6: 24px; --ui-s8: 32px;
  /* radius */
  --ui-r-sm: 6px; --ui-r-md: 10px; --ui-r-lg: 14px; --ui-r-pill: 999px;
  /* control heights */
  --ui-h-sm: 32px; --ui-h-md: 40px; --ui-h-lg: 46px;
  /* type */
  --ui-fs-xs: 11.5px; --ui-fs-sm: 12.5px; --ui-fs-md: 13.5px; --ui-fs-lg: 15px; --ui-fs-xl: 18px; --ui-fs-2xl: 22px;
  /* elevation */
  --ui-sh-1: 0 1px 2px rgba(40, 30, 90, .06), 0 1px 3px rgba(40, 30, 90, .05);
  --ui-sh-2: 0 4px 12px rgba(40, 30, 90, .10);
  --ui-sh-3: 0 16px 40px rgba(20, 12, 60, .22);
  /* motion */
  --ui-ease: cubic-bezier(.2, .7, .2, 1); --ui-t: 160ms;
  /* colour roles (aliases of the panel tokens) */
  --ui-primary: var(--tn-primary);      --ui-primary-h: var(--tn-primary-h);
  --ui-on-primary: var(--tn-on-primary);
  --ui-tint: var(--tn-tint-bg);         --ui-tint-ink: var(--tn-tint-ink);
  --ui-ink: var(--tn-ink);              --ui-ink-2: var(--tn-ink-2);      --ui-muted: var(--tn-muted);
  --ui-line: var(--tn-line);            --ui-ctrl: #C9C6DA;               --ui-card: var(--tn-card);
  --ui-danger: var(--tn-red);           --ui-danger-bg: var(--tn-bad-bg); --ui-danger-ink: var(--tn-bad-ink);
  --ui-ok-bg: var(--tn-ok-bg);          --ui-ok-ink: var(--tn-ok-ink);
  --ui-warn-bg: var(--tn-warn-bg);      --ui-warn-ink: var(--tn-warn-ink);
  --ui-ring: 0 0 0 3px rgba(123, 95, 192, .38);
}
body.tnui.tn-dark { --ui-ctrl: #3A3458; --ui-ring: 0 0 0 3px rgba(156, 143, 224, .45); --ui-sh-1: 0 1px 2px rgba(0, 0, 0, .4); }

body.tnui [hidden] { display: none !important; }

/* ── 2. icons (Font Awesome Solid, one size ramp) ──────────────────────── */
body.tnui i.fas, body.tnui i.fa-solid { line-height: 1; display: inline-block; text-align: center; }
body.tnui .tn-item i.ic {
  flex: 0 0 auto; width: 20px; font-size: 15px; color: var(--tn-muted);
  background: none; padding: 0; border-radius: 0; transform: none; transition: color var(--ui-t);
}
body.tnui .tn-item:hover i.ic, body.tnui .tn-group.open > .tn-item i.ic,
body.tnui .tn-item.nav-item.active i.ic { color: var(--tn-primary); background: none; }
body.tnui .tn-g-priv > .tn-item i.ic { color: var(--tn-red); }
body.tnui .tn-item i.chev { width: 14px; font-size: 11px; opacity: .7; transition: transform var(--ui-t) var(--ui-ease); }
body.tnui .tn-group.open > .tn-item i.chev { transform: rotate(90deg); }
body.tnui .tn-tool i { font-size: 17px; }
body.tnui .tn-burger i { font-size: 19px; }
body.tnui .tn-avatar i { font-size: 16px; color: var(--tn-primary); }
body.tnui .tn-fab i { font-size: 16px; }
body.tnui .tn-sup-ic i { font-size: 13px; }
body.tnui .tn-crumb::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f015"; background: none; -webkit-mask: none; mask: none; width: auto; height: auto; font-size: 12px; margin-right: 10px; color: var(--tn-primary); }
body.tnui .tn-stat-ic i, body.tnui .tn-sms-ic i { font-size: 21px; }
body.tnui .tn-trend i { font-size: 11px; }
body.tnui .tn-prof a i { flex: 0 0 auto; width: 18px; font-size: 14px; color: var(--ui-muted); }

/* ── 3. focus (every interactive thing gets one visible ring) ─────────── */
body.tnui a:focus-visible, body.tnui button:focus-visible, body.tnui input:focus-visible,
body.tnui select:focus-visible, body.tnui textarea:focus-visible, body.tnui summary:focus-visible,
body.tnui [tabindex]:focus-visible, body.tnui .tn-item:focus-visible, body.tnui .zp-sel-btn:focus-visible {
  outline: 2px solid var(--tn-primary); outline-offset: 2px; box-shadow: var(--ui-ring);
}
body.tnui .tn-top :focus-visible, body.tnui .tn-prof-head :focus-visible { outline-color: #fff; box-shadow: none; }

/* ── 4. buttons ─────────────────────────────────────────────────────────
   variants: primary / secondary / outline / ghost / danger / link
   sizes:    btn-sm 32 / default 40 / btn-lg 46
   states:   hover, active, focus-visible (§3), disabled, .is-loading      */
body.tnui .btn, body.tnui .tn-btn, body.tnui .tn-req {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2);
  height: var(--ui-h-md); padding: 0 var(--ui-s4); border-radius: var(--ui-r-sm);
  font-family: inherit; font-size: var(--ui-fs-md); font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; position: relative;
  transition: background var(--ui-t) var(--ui-ease), border-color var(--ui-t) var(--ui-ease),
              color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease), transform 90ms var(--ui-ease);
}
body.tnui .btn:active, body.tnui .tn-btn:active, body.tnui .tn-req:active { transform: translateY(1px); }
body.tnui .btn i, body.tnui .tn-btn i { font-size: 13px; }
body.tnui .btn-sm, body.tnui .tn-btn.sm { height: var(--ui-h-sm); padding: 0 var(--ui-s3); font-size: var(--ui-fs-sm); }
body.tnui .btn-lg { height: var(--ui-h-lg); padding: 0 var(--ui-s5); font-size: var(--ui-fs-lg); }
body.tnui .btn-icon, body.tnui .btn.icon-only { width: var(--ui-h-md); padding: 0; }
body.tnui .btn-sm.btn-icon, body.tnui .btn-sm.icon-only { width: var(--ui-h-sm); }
/* icon-only buttons inside a table row: quiet until hovered, colour says the meaning */
body.tnui td .btn.icon-only {
  width: var(--ui-h-sm); height: var(--ui-h-sm); padding: 0; background: transparent !important; border-color: transparent !important;
  color: var(--ui-muted) !important;
}
body.tnui td .btn.icon-only + .btn.icon-only { margin-left: 2px; }
body.tnui td .btn.icon-only i { font-size: 14px; color: inherit; }
body.tnui td .btn.icon-only:hover { background: var(--ui-tint) !important; color: var(--tn-primary) !important; }
body.tnui td .btn-danger.icon-only:hover { background: var(--ui-danger-bg) !important; color: var(--ui-danger-ink) !important; }
body.tnui td .btn-warning.icon-only:hover { background: var(--ui-warn-bg) !important; color: var(--ui-warn-ink) !important; }
body.tnui td .btn-success.icon-only:hover { background: var(--ui-ok-bg) !important; color: var(--ui-ok-ink) !important; }

body.tnui .btn-primary, body.tnui .tn-btn.blue, body.tnui .tn-req {
  background: var(--tn-primary) !important; color: var(--tn-on-primary) !important; border-color: var(--tn-primary) !important;
}
body.tnui .btn-primary:hover, body.tnui .tn-btn.blue:hover, body.tnui .tn-req:hover { background: var(--tn-primary-h) !important; border-color: var(--tn-primary-h) !important; }
body.tnui .btn-secondary { background: var(--ui-tint); color: var(--ui-tint-ink); border-color: transparent; }
body.tnui .btn-secondary:hover { filter: brightness(.96); }
body.tnui .btn-outline { background: var(--ui-card); color: var(--ui-ink-2); border-color: var(--ui-ctrl); }
body.tnui .btn-outline:hover { background: var(--ui-tint); color: var(--tn-primary); border-color: var(--tn-primary); }
body.tnui .btn-ghost { background: transparent; color: var(--ui-ink-2); border-color: transparent; }
body.tnui .btn-ghost:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .btn-danger { background: var(--ui-danger) !important; color: #fff !important; border-color: var(--ui-danger) !important; }
body.tnui .btn-danger:hover { filter: brightness(.92); }
body.tnui .btn-warning { background: var(--tn-orange) !important; color: #fff !important; border-color: var(--tn-orange) !important; }
body.tnui .btn-success { background: var(--tn-primary) !important; color: var(--tn-on-primary) !important; border-color: var(--tn-primary) !important; }
body.tnui .tn-btn.orange { background: var(--tn-orange); color: #fff; border-color: var(--tn-orange); }
body.tnui .btn-link { background: none; border-color: transparent; color: var(--tn-primary); padding: 0 var(--ui-s1); height: auto; font-weight: 600; }
body.tnui .btn-link:hover { text-decoration: underline; }
body.tnui .btn:disabled, body.tnui .tn-btn:disabled, body.tnui .tn-req:disabled,
body.tnui .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
/* loading: the label stays (no layout shift), a spinner takes over */
body.tnui .btn.is-loading, body.tnui .tn-btn.is-loading { color: transparent !important; pointer-events: none; }
body.tnui .btn.is-loading > *, body.tnui .tn-btn.is-loading > * { visibility: hidden; }
body.tnui .btn.is-loading::after, body.tnui .tn-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: uiSpin .7s linear infinite;
}
body.tnui .btn-outline.is-loading::after, body.tnui .btn-ghost.is-loading::after { border-color: var(--ui-ctrl); border-top-color: var(--tn-primary); }
@keyframes uiSpin { to { transform: rotate(360deg); } }

/* band actions sit on the lavender strip: same system, just compact */
body.tnui .tn-acts { gap: var(--ui-s2); padding-top: 0; }
body.tnui .tn-acts .btn, body.tnui .tn-acts button {
  height: var(--ui-h-sm); min-width: var(--ui-h-sm); padding: 0 var(--ui-s3); border-radius: var(--ui-r-sm) !important; font-size: var(--ui-fs-sm);
}
body.tnui .tn-acts .btn i, body.tnui .tn-acts button i { font-size: 12px; }

/* ── 5. tables ──────────────────────────────────────────────────────────── */
body.tnui .zp-toolbar.tn-tb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-s3); margin: 0 0 var(--ui-s4);
}
body.tnui .tn-tb .tn-show { display: flex; align-items: center; gap: var(--ui-s2); font-size: var(--ui-fs-sm); color: var(--ui-muted); font-weight: 500; }
body.tnui .tn-tb .tn-show select { width: 76px; min-width: 76px; height: var(--ui-h-sm); min-height: var(--ui-h-sm); padding: 0 28px 0 10px; }
body.tnui .tn-tb .tn-exp { order: 0; display: inline-flex; gap: 0; flex-wrap: nowrap; justify-content: flex-start; width: auto; border: 1px solid var(--ui-ctrl); border-radius: var(--ui-r-sm); overflow: hidden; background: var(--ui-card); }
body.tnui .tn-tb .tn-exp button {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ui-h-sm) - 2px); padding: 0 12px;
  background: transparent; color: var(--ui-ink-2); border: 0; border-radius: 0; font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--ui-t), color var(--ui-t);
}
body.tnui .tn-tb .tn-exp button + button { border-left: 1px solid var(--ui-line); }
body.tnui .tn-tb .tn-exp button i { font-size: 12px; color: var(--ui-muted); transition: color var(--ui-t); }
body.tnui .tn-tb .tn-exp button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .tn-tb .tn-exp button:hover i { color: var(--tn-primary); }
body.tnui .tn-tb .tn-srch { position: relative; display: block; margin-left: auto; }
body.tnui .tn-tb .tn-srch > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ui-muted); pointer-events: none; }
body.tnui .tn-tb .tn-srch input { width: 220px; max-width: 100%; height: var(--ui-h-sm); min-height: var(--ui-h-sm); padding: 0 12px 0 32px; border-radius: var(--ui-r-sm); }
body.tnui .tn-two .zp-toolbar.tn-tb { display: flex; flex-wrap: wrap; }
body.tnui .tn-two .tn-tb .tn-exp { order: 0; width: auto; }

body.tnui .table-wrap { max-height: none; overflow: auto; margin: 0 !important; padding: 0 0 1px !important; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); }
body.tnui table.zp-table, body.tnui .tn-table { border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-sm); }
body.tnui .zp-table thead th, body.tnui .tn-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--ui-tint); color: var(--ui-tint-ink);
  font-size: var(--ui-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 11px var(--ui-s3); border: 0; border-bottom: 1px solid var(--ui-line); text-align: left; white-space: nowrap;
}
body.tnui .zp-table tbody td, body.tnui .tn-table tbody td {
  padding: 12px var(--ui-s3); border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); color: var(--ui-ink); vertical-align: middle;
}
body.tnui .zp-table tbody tr:last-child td { border-bottom: 0; }
body.tnui .zp-table tbody tr:nth-child(odd) td, body.tnui .tn-table.striped tbody tr:nth-child(odd) td { background: transparent; }
body.tnui .zp-table tbody tr { transition: background var(--ui-t); }
body.tnui .zp-table tbody tr:hover td { background: var(--ui-tint); }
body.tnui .zp-table tbody td.empty-state { background: transparent !important; }
body.tnui .zp-table th.ui-num, body.tnui .zp-table td.ui-num { text-align: right; font-variant-numeric: tabular-nums; }
body.tnui .zp-table th.ui-act, body.tnui .zp-table td.ui-act { text-align: right; white-space: nowrap; }
/* sort affordance: one Font Awesome glyph instead of two CSS triangles */
body.tnui .zp-table th.zp-sort { cursor: pointer; padding-right: 28px; user-select: none; }
body.tnui .zp-table th.zp-sort::before { display: none; }
body.tnui .zp-table th.zp-sort::after {
  content: "\f0dc"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; border: 0; width: auto; height: auto;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .4; transition: opacity var(--ui-t);
}
body.tnui .zp-table th.zp-sort:hover::after { opacity: .8; }
body.tnui .zp-table th.zp-sort.asc::after { content: "\f0de"; opacity: 1; color: var(--tn-primary); }
body.tnui .zp-table th.zp-sort.desc::after { content: "\f0dd"; opacity: 1; color: var(--tn-primary); }
body.tnui .zp-table th.ui-num.zp-sort { padding-right: var(--ui-s3); padding-left: 28px; }
body.tnui .zp-table th.ui-num.zp-sort::after { right: auto; left: 10px; }

body.tnui .zp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-s3); margin-top: var(--ui-s4); }
body.tnui .zp-info { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .zp-pager { display: inline-flex; gap: var(--ui-s1); margin-left: auto; }
body.tnui .zp-pager button {
  min-width: var(--ui-h-sm); height: var(--ui-h-sm); padding: 0 8px; margin: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm) !important;
  background: var(--ui-card); color: var(--ui-ink-2); font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--ui-t), color var(--ui-t), border-color var(--ui-t);
}
body.tnui .zp-pager button:hover:not(:disabled):not(.active) { background: var(--ui-tint); color: var(--tn-primary); border-color: var(--tn-primary); }
body.tnui .zp-pager button.active { background: var(--tn-primary); border-color: var(--tn-primary); color: var(--tn-on-primary); }
body.tnui .zp-pager button:disabled { opacity: .4; cursor: not-allowed; }
body.tnui .zp-pager button i { font-size: 11px; }

/* row actions: quiet icon buttons that colour up on hover */
body.tnui .zp-actions, body.tnui .tn-rowbtns { display: inline-flex; gap: var(--ui-s1); }
body.tnui .zp-actions .btn, body.tnui .tn-rowbtns .btn, body.tnui .tn-dl button {
  width: var(--ui-h-sm) !important; height: var(--ui-h-sm) !important; padding: 0 !important; border-radius: var(--ui-r-sm) !important;
  background: transparent !important; border: 1px solid transparent !important; color: var(--ui-muted) !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
body.tnui .zp-actions .btn i, body.tnui .tn-rowbtns .btn i { color: inherit !important; font-size: 14px; }
body.tnui .zp-actions .btn:hover, body.tnui .tn-rowbtns .btn:hover { background: var(--ui-tint) !important; color: var(--tn-primary) !important; }
body.tnui .zp-actions .btn-danger:hover, body.tnui .tn-dl .r:hover { background: var(--ui-danger-bg) !important; color: var(--ui-danger-ink) !important; }
body.tnui .zp-actions .btn-warning:hover { background: var(--ui-warn-bg) !important; color: var(--ui-warn-ink) !important; }
body.tnui .tn-dl { display: inline-flex; gap: var(--ui-s1); }
body.tnui .tn-dl button { background: transparent; color: var(--ui-muted); }
body.tnui .tn-dl button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .zp-table input[type="checkbox"], body.tnui input[type="checkbox"], body.tnui input[type="radio"] { accent-color: var(--tn-primary); width: 16px; height: 16px; min-height: 0; }

/* np-pro.css flips the ink of every FILLED button to a dark colour in dark mode
   (!important). The export bar, row actions and download buttons are ghost
   buttons now, so they take the normal ink back. */
body.tnui.tn-dark .tn-tb .tn-exp button { color: var(--ui-ink-2) !important; }
body.tnui.tn-dark .tn-tb .tn-exp button:hover { color: var(--tn-primary) !important; }
body.tnui.tn-dark .tn-tb .tn-exp button i { color: var(--ui-muted); }
body.tnui.tn-dark .zp-actions .btn, body.tnui.tn-dark .zp-actions .btn i,
body.tnui.tn-dark .tn-dl button, body.tnui.tn-dark .tn-rowbtns .btn { color: var(--ui-muted) !important; }
body.tnui.tn-dark .zp-actions .btn:hover, body.tnui.tn-dark .zp-actions .btn:hover i,
body.tnui.tn-dark .tn-dl button:hover, body.tnui.tn-dark .tn-rowbtns .btn:hover { color: var(--tn-primary) !important; }
body.tnui.tn-dark .zp-actions .btn-danger:hover, body.tnui.tn-dark .zp-actions .btn-danger:hover i { color: var(--ui-danger-ink) !important; }
body.tnui.tn-dark .zp-actions .btn-warning:hover, body.tnui.tn-dark .zp-actions .btn-warning:hover i { color: var(--ui-warn-ink) !important; }
body.tnui.tn-dark .btn-outline, body.tnui.tn-dark .btn-ghost, body.tnui.tn-dark .btn-secondary { color: var(--ui-ink-2); }

/* section headings inside a card sit UNDER the page title in weight */
body.tnui .tn-h20 { font-size: var(--ui-fs-lg); font-weight: 700; margin: 0 0 var(--ui-s3); letter-spacing: -.1px; }
body.tnui .tn-two { gap: var(--ui-s6); }
body.tnui .tn-title { font-size: var(--ui-fs-xl); }

/* ── 6. forms ───────────────────────────────────────────────────────────── */
body.tnui input:not([type]), body.tnui input[type="text"], body.tnui input[type="number"], body.tnui input[type="email"],
body.tnui input[type="password"], body.tnui input[type="date"], body.tnui input[type="datetime-local"],
body.tnui input[type="search"], body.tnui input[type="tel"], body.tnui input[type="url"], body.tnui select, body.tnui .zp-sel-btn {
  height: var(--ui-h-md); min-height: var(--ui-h-md); padding: 0 var(--ui-s3); border-radius: var(--ui-r-sm);
  border: 1px solid var(--ui-ctrl); background-color: var(--ui-card); color: var(--ui-ink); font-family: inherit; font-size: var(--ui-fs-md); font-weight: 400; line-height: 1.2;
  transition: border-color var(--ui-t), box-shadow var(--ui-t);
}
body.tnui textarea { min-height: 96px; padding: var(--ui-s3); border-radius: var(--ui-r-sm); border: 1px solid var(--ui-ctrl); font-family: inherit; font-size: var(--ui-fs-md); }
body.tnui select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
body.tnui input:hover:not(:disabled), body.tnui select:hover:not(:disabled) { border-color: var(--ui-muted); }
body.tnui input:focus, body.tnui select:focus, body.tnui textarea:focus { border-color: var(--tn-primary); box-shadow: var(--ui-ring); }
body.tnui input:disabled, body.tnui select:disabled, body.tnui textarea:disabled { background-color: var(--tn-stripe); color: var(--ui-muted); cursor: not-allowed; }
body.tnui input[readonly] { background-color: var(--tn-stripe); }
body.tnui input[aria-invalid="true"], body.tnui .zp-field-err { border-color: var(--ui-danger); }
body.tnui .form-label, body.tnui label.form-label {
  display: block; margin: 0 0 var(--ui-s1); font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-ink-2);
}
body.tnui .form-label .req, body.tnui .req { color: var(--ui-danger); margin-left: 2px; }
body.tnui .form-hint, body.tnui .form-help { display: block; margin-top: var(--ui-s1); font-size: var(--ui-fs-xs); color: var(--ui-muted); }
body.tnui .form-error { display: block; margin-top: var(--ui-s1); font-size: var(--ui-fs-xs); color: var(--ui-danger-ink); font-weight: 600; }
/* filter rows: labels are visible again, every field is the same height */
body.tnui .zp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-s3) var(--ui-s4); }
body.tnui .zp-filters .form-group { margin: 0; width: 190px; max-width: 100%; }
body.tnui .zp-filters .form-group .form-label { display: block; }
body.tnui .zp-filters input, body.tnui .zp-filters select { width: 100%; height: var(--ui-h-md); min-height: var(--ui-h-md); }
body.tnui .zp-filters .form-group:has(> .btn), body.tnui .zp-filters .form-group:has(> .tn-btn) { width: auto; }
body.tnui .zp-sel-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s2); width: 100%; cursor: pointer; text-align: left; }
body.tnui .zp-sel-btn .zp-ph { color: var(--ui-muted); }
body.tnui .zp-sel-btn i { font-size: 10px; color: var(--ui-muted); }
body.tnui .zp-sel-drop { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); box-shadow: var(--ui-sh-2); background: var(--ui-card); overflow: hidden; }
body.tnui .zp-sel-opt { padding: 9px var(--ui-s3); font-size: var(--ui-fs-md); }
body.tnui .zp-sel-opt:hover, body.tnui .zp-sel-opt.on { background: var(--tn-primary); color: #fff; }
body.tnui .zp-filter-actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s3); }
body.tnui .zp-filter-actions .btn i { display: inline-block; }

/* ── 7. navigation, profile menu ────────────────────────────────────────── */
body.tnui .tn-prof { width: 264px; border-radius: var(--ui-r-md); box-shadow: var(--ui-sh-3); border: 1px solid var(--ui-line); padding-bottom: var(--ui-s2); }
body.tnui .tn-prof a, body.tnui .tn-prof a:nth-of-type(1), body.tnui .tn-prof a:nth-of-type(2), body.tnui .tn-prof a:nth-of-type(3), body.tnui .tn-prof a:nth-of-type(n) {
  display: flex; align-items: center; gap: var(--ui-s3); height: 42px; margin: 2px var(--ui-s2) 0; padding: 0 var(--ui-s3);
  background: transparent; color: var(--ui-ink); border: 0; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-md); font-weight: 500;
  text-align: left; justify-content: flex-start; cursor: pointer; text-decoration: none;
  transition: background var(--ui-t), color var(--ui-t);
}
body.tnui .tn-prof a:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .tn-prof a:hover i { color: var(--tn-primary); }
body.tnui .tn-prof a:last-child { margin-top: var(--ui-s2); position: relative; color: var(--ui-danger-ink); }
body.tnui .tn-prof a:last-child::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; border-top: 1px solid var(--ui-line); }
body.tnui .tn-prof a:last-child i { color: var(--ui-danger-ink); }
body.tnui .tn-prof a:last-child:hover { background: var(--ui-danger-bg); color: var(--ui-danger-ink); }
body.tnui .tn-prof a:last-child:hover i { color: var(--ui-danger-ink); }

/* header account button: a circle with a white ring, like the avatar in the menu */
body.tnui .tn-avatar {
  width: 38px; height: 38px; margin: 0 0 0 var(--ui-s2); padding: 0; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .22); border: 0; box-shadow: 0 0 0 2px #fff;
  transition: box-shadow var(--ui-t), transform 90ms var(--ui-ease);
}
body.tnui .tn-avatar:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, .28); }
body.tnui .tn-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 50%; display: block; }
body.tnui .tn-avatar i { color: #fff; }

/* profile menu head: photo centred in the purple band, ringed in white */
body.tnui .tn-prof-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ui-s5) var(--ui-s4) var(--ui-s4); }
body.tnui .tn-prof-head .tn-me-av {
  width: 76px; height: 76px; margin: 0 auto var(--ui-s3); grid-row: auto; overflow: hidden; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(20, 12, 60, .28);
}
body.tnui .tn-prof-head .tn-me-av::after { display: none; }
body.tnui .tn-prof-head .tn-me-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 50%; }
body.tnui .tn-prof-name { font-size: var(--ui-fs-lg); font-weight: 700; }
body.tnui .tn-prof-role {
  margin-top: var(--ui-s1); padding: 2px 10px; border-radius: var(--ui-r-pill); background: rgba(255, 255, 255, .2);
  font-size: var(--ui-fs-xs); font-weight: 600; opacity: 1;
}
body.tnui .tn-prof { top: 56px; right: 14px; }

/* icon-only buttons get a real tooltip (np-ui.js moves title -> data-tip) */
:where(body.tnui [data-tip]) { position: relative; }
body.tnui [data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 120; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(-2px);
  padding: 5px 9px; border-radius: var(--ui-r-sm); background: #1F1A33; color: #fff; font-size: var(--ui-fs-xs); font-weight: 600; line-height: 1.2;
  white-space: nowrap; pointer-events: none; display: none;
}
/* display (not opacity) so a hidden tooltip never widens a scrolling table wrapper */
body.tnui [data-tip]:hover::after, body.tnui [data-tip]:focus-visible::after { display: block; animation: uiFade 120ms ease; }
body.tnui td [data-tip]::after { top: auto; bottom: calc(100% + 6px); }
body.tnui .tn-acts [data-tip]::after { left: auto; right: 0; transform: none; }

/* ── 8. overlays and feedback ───────────────────────────────────────────── */
body.tnui .modal-overlay { background: rgba(20, 14, 44, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.tnui .modal {
  border-radius: var(--ui-r-lg); box-shadow: var(--ui-sh-3); border: 1px solid var(--ui-line);
  max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden;
}
body.tnui .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: var(--ui-s4) var(--ui-s5); border-bottom: 1px solid var(--ui-line); }
body.tnui .modal-header h3 { margin: 0; font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-ink); }
body.tnui .modal-header button {
  width: var(--ui-h-sm); height: var(--ui-h-sm); border-radius: var(--ui-r-sm); border: 0; background: transparent; color: var(--ui-muted); cursor: pointer;
}
body.tnui .modal-header button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .modal-body { padding: var(--ui-s5); overflow: auto; }
body.tnui .modal-footer, body.tnui .ui-dlg-foot { display: flex; justify-content: flex-end; gap: var(--ui-s2); padding: var(--ui-s3) var(--ui-s5) var(--ui-s4); border-top: 1px solid var(--ui-line); }

/* styled confirmation (replaces the browser confirm box) */
.ui-dlg-back {
  position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 16px;
  background: rgba(20, 14, 44, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: uiFade 160ms ease;
}
.ui-dlg {
  width: min(420px, 100%); background: var(--tn-card, #fff); color: var(--tn-ink, #332E38); border-radius: 14px;
  border: 1px solid var(--tn-line, #E6E5EF); box-shadow: 0 16px 40px rgba(20, 12, 60, .28); overflow: hidden;
  animation: uiPop 200ms cubic-bezier(.2, .7, .2, 1); font-family: inherit;
}
.ui-dlg-body { display: flex; gap: 14px; padding: 22px 22px 8px; }
.ui-dlg-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: var(--tn-tint-bg, #F3F0FF); color: var(--tn-primary, #5B4DA4);
}
.ui-dlg.danger .ui-dlg-ic { background: var(--tn-bad-bg, #FCEBEB); color: var(--tn-bad-ink, #A83A3A); }
.ui-dlg h2 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; }
.ui-dlg p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tn-ink-2, #56566A); }
.ui-dlg .ui-dlg-foot { border-top: 0; padding: 14px 22px 20px; }
@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

body.tnui .toast-container { position: fixed; right: var(--ui-s4); top: 64px; z-index: 2147483200; display: flex; flex-direction: column; gap: var(--ui-s2); pointer-events: none; }
body.tnui .toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--ui-s3); min-width: 240px; max-width: min(420px, calc(100vw - 32px));
  padding: 12px var(--ui-s4); border-radius: var(--ui-r-md); background: var(--ui-card); color: var(--ui-ink);
  border: 1px solid var(--ui-line); border-left: 4px solid var(--tn-primary); box-shadow: var(--ui-sh-2); font-size: var(--ui-fs-md); animation: uiPop 200ms var(--ui-ease);
}
body.tnui .toast i { font-size: 16px; }
body.tnui .toast.success { border-left-color: var(--tn-green); } body.tnui .toast.success i { color: var(--tn-green); }
body.tnui .toast.error { border-left-color: var(--ui-danger); } body.tnui .toast.error i { color: var(--ui-danger); }
body.tnui .toast.warning { border-left-color: var(--tn-orange); } body.tnui .toast.warning i { color: var(--tn-orange); }
body.tnui .toast.info { border-left-color: var(--tn-sky); } body.tnui .toast.info i { color: var(--tn-sky); }

/* ── 9. states: loading skeleton, empty, error ─────────────────────────── */
.ui-skel { display: grid; gap: 14px; }
.ui-skel-bar, .ui-skel-row i {
  display: block; border-radius: 8px; height: 14px;
  background: linear-gradient(90deg, var(--tn-stripe, #EBEAF4) 25%, var(--tn-tint-bg, #F3F0FF) 50%, var(--tn-stripe, #EBEAF4) 75%);
  background-size: 200% 100%; animation: uiShimmer 1.3s linear infinite;
}
.ui-skel-bar.h { height: 22px; width: 38%; } .ui-skel-bar.w2 { width: 72%; } .ui-skel-bar.w3 { width: 56%; }
.ui-skel-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 16px; }
@keyframes uiShimmer { to { background-position: -200% 0; } }
body.tnui .empty-state { text-align: center; color: var(--ui-muted); }
body.tnui .empty-state > i, body.tnui td.empty-state > i {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto var(--ui-s2); border-radius: 50%;
  background: var(--ui-tint); color: var(--tn-primary); font-size: 18px;
}
body.tnui .empty-state.is-bad > i { background: var(--ui-danger-bg); color: var(--ui-danger-ink); }
body.tnui .empty-state p { margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-ink-2); }
body.tnui .empty-state .btn { margin-top: var(--ui-s1); }
body.tnui .spinner { width: 28px; height: 28px; border: 3px solid var(--ui-line); border-top-color: var(--tn-primary); border-radius: 50%; animation: uiSpin .8s linear infinite; margin: 0 auto; }

/* ── 10. badges: one colour per meaning, everywhere ────────────────────── */
body.tnui .badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs); font-weight: 700; line-height: 1; letter-spacing: .1px; border: 0;
}
body.tnui .badge-green, body.tnui .badge-success { background: var(--ui-ok-bg); color: var(--ui-ok-ink); }
body.tnui .badge-red, body.tnui .badge-danger { background: var(--ui-danger-bg); color: var(--ui-danger-ink); }
body.tnui .badge-yellow, body.tnui .badge-warning { background: var(--ui-warn-bg); color: var(--ui-warn-ink); }
body.tnui .badge-blue, body.tnui .badge-purple, body.tnui .badge-primary { background: var(--ui-tint); color: var(--ui-tint-ink); }
body.tnui .badge-cyan, body.tnui .badge-info { background: rgba(31, 162, 192, .13); color: #16809C; }
body.tnui .badge-gray, body.tnui .badge-grey { background: var(--tn-stripe); color: var(--ui-ink-2); }
body.tnui.tn-dark .badge-cyan, body.tnui.tn-dark .badge-info { color: #7DD6E4; }

/* cards */
body.tnui .card { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); box-shadow: var(--ui-sh-1); }
body.tnui .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); margin-bottom: var(--ui-s4); }
body.tnui .card-title { font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-ink); }

/* ── 11. AI Manager: same purple system ────────────────────────────────── */
/* a solid brand-colour button with one clear glyph and an "online" dot */
body.tnui .nx-ai-fab {
  background: var(--tn-primary); border: 0; box-shadow: 0 8px 20px rgba(60, 40, 130, .35); animation: none; color: #fff;
}
body.tnui .nx-ai-fab:hover { background: var(--tn-primary-h); box-shadow: 0 0 0 5px rgba(123, 95, 192, .2), 0 8px 20px rgba(60, 40, 130, .35); }
body.tnui .nx-ai-fab i { font-size: 22px; color: #fff; }
body.tnui .nx-ai-dot {
  position: absolute; right: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: #22A35B; border: 2px solid var(--tn-card); box-shadow: 0 0 0 0 rgba(34, 163, 91, .5); animation: uiDot 2.4s ease-out infinite;
}
@keyframes uiDot { 0% { box-shadow: 0 0 0 0 rgba(34, 163, 91, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 163, 91, 0); } }

/* ── 11b. page header: title plate and first card read as one card ─────
   The old geometry pulled the card up over a tall plate (74px of padding, -70px
   margin). The band is a slim strip now, so the plate is only as tall as its
   heading and the card sits directly under it.                              */
body.tnui:not(.tn-dash):not(.tn-has-lead) .tn-title { padding: 16px var(--ui-s5); margin-bottom: var(--ui-s4); border: 1px solid var(--ui-line); box-shadow: var(--ui-sh-1); }
body.tnui:not(.tn-dash) .tn-main:has(#page-content > .tn-merge) .tn-title {
  padding: 18px var(--ui-s5) 10px; margin-bottom: 0; border: 1px solid var(--ui-line); border-bottom: 0; box-shadow: none;
  border-radius: var(--ui-r-md) var(--ui-r-md) 0 0;
}
body.tnui.tn-has-lead:not(.tn-dash) .tn-main:has(#page-content > .tn-merge) .tn-title { padding-bottom: 46px; }
body.tnui:not(.tn-dash) #page-content > .tn-merge {
  margin-top: 0 !important; border-top: 0; border-radius: 0 0 var(--ui-r-md) var(--ui-r-md); box-shadow: var(--ui-sh-1);
}
body.tnui .tn-lead { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .ui-filter-row { margin-bottom: var(--ui-s3); }
body.tnui .ui-filter-note { display: flex; align-items: center; height: var(--ui-h-md); }
body.tnui .ui-filter-note .badge { height: 26px; }


/* ── 11c. page layout blocks (CR API, Bulk Allocations, Statements) ─────── */
body.tnui .ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-s6); }
body.tnui .ui-panel { display: flex; flex-direction: column; gap: var(--ui-s4); min-width: 0; padding: var(--ui-s5); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); }
body.tnui .ui-panel .tn-f { margin: 0; }
body.tnui .ui-h { display: flex; align-items: center; gap: var(--ui-s3); margin: 0; font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-ink); }
body.tnui .ui-h i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-r-sm); background: var(--ui-tint); color: var(--tn-primary); font-size: 14px; }
body.tnui .ui-h-gap { margin-top: var(--ui-s3); padding-top: var(--ui-s5); border-top: 1px solid var(--ui-line); }
body.tnui .ui-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s4) var(--ui-s5); align-items: start; }
body.tnui .ui-grid2 .tn-f { margin: 0; }
body.tnui .ui-grid-tight { gap: var(--ui-s3); }
body.tnui .ui-copyfield { display: flex; gap: var(--ui-s2); }
body.tnui .ui-copyfield input { flex: 1 1 auto; min-width: 0; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--ui-fs-sm); background: var(--tn-stripe); }
body.tnui .tn-url {
  min-height: var(--ui-h-md); margin: 0; padding: 10px var(--ui-s3); border: 1px dashed var(--ui-ctrl); border-radius: var(--ui-r-sm);
  background: var(--tn-stripe); color: var(--ui-ink-2); font-size: var(--ui-fs-sm); line-height: 1.5; word-break: break-all;
}
body.tnui .tn-resp {
  margin: 0; min-height: 280px; max-height: 440px; overflow: auto; padding: var(--ui-s4); border: 0; border-radius: var(--ui-r-md);
  background: #17122E; color: #E4DCFB; font-size: var(--ui-fs-sm); line-height: 1.6; white-space: pre-wrap; word-break: break-word; box-shadow: none;
}
body.tnui .ui-form-actions { display: flex; justify-content: flex-end; margin-top: var(--ui-s5); }
body.tnui .ui-divider { height: 1px; margin: var(--ui-s6) 0; background: var(--ui-line); }

/* opening balance: a proper summary tile above the table, not a badge in the corner */
body.tnui #zs-open { width: 100%; margin: 0 0 var(--ui-s4); }
body.tnui .zp-head-actions:has(> .ui-balance) { width: 100%; }
body.tnui .ui-balance {
  display: inline-flex; align-items: center; gap: var(--ui-s3); padding: 10px var(--ui-s5) 10px 10px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-tint);
}
body.tnui .ui-balance-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--tn-primary); font-size: 16px; }
body.tnui .ui-balance-l, body.tnui .ui-balance-v { display: block; }
body.tnui .ui-balance-l { font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ui-muted); }
body.tnui .ui-balance-v { font-size: var(--ui-fs-2xl); font-weight: 800; line-height: 1.15; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
body.tnui .ui-balance-v small { font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-muted); }

/* footer: quiet, centred, on a hairline — not a floating card */
body.tnui .tn-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--ui-s2);
  margin: 0 var(--ui-s6); padding: var(--ui-s4) 0 var(--ui-s5); background: transparent; border: 0; border-top: 1px solid var(--ui-line);
  border-radius: 0; box-shadow: none; font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-muted); text-align: center;
}
body.tnui .tn-foot b { color: var(--ui-ink-2); font-weight: 700; }
body.tnui .tn-main { padding-bottom: 72px; } /* clears the floating AI / back-to-top buttons */

/* ── 11d. export buttons: same look and icons everywhere ────────────────── */
body.tnui .dt-export { display: inline-flex; gap: 0; border: 1px solid var(--ui-ctrl); border-radius: var(--ui-r-sm); overflow: hidden; background: var(--ui-card); }
body.tnui .dt-export button {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ui-h-sm) - 2px); padding: 0 12px; margin: 0;
  background: transparent; color: var(--ui-ink-2); border: 0; border-radius: 0; font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--ui-t), color var(--ui-t);
}
body.tnui .dt-export button + button { border-left: 1px solid var(--ui-line); }
body.tnui .dt-export button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui.tn-dark .dt-export button { color: var(--ui-ink-2) !important; }
body.tnui .dt-export button i { font-size: 12px; }
/* each format keeps one colour, so Copy/CSV/Excel/PDF/Print read the same on every page */
body.tnui { --ex-copy: #6A4FC4; --ex-csv: #0E8A7A; --ex-excel: #1D7A46; --ex-pdf: #C0392B; --ex-print: #56566A; --ex-txt: #6E6E85; }
body.tnui.tn-dark { --ex-copy: #B7AAF0; --ex-csv: #5FD3C2; --ex-excel: #6FD79A; --ex-pdf: #F28B82; --ex-print: #C6C2DA; --ex-txt: #9A95B4; }
body.tnui .tn-exp button i.fa-copy, body.tnui .dt-export button i.fa-copy, body.tnui .btn-outline i.fa-copy { color: var(--ex-copy); }
body.tnui .tn-exp button i.fa-file-csv, body.tnui .dt-export button i.fa-file-csv, body.tnui .btn i.fa-file-csv { color: var(--ex-csv); }
body.tnui .tn-exp button i.fa-file-excel, body.tnui .dt-export button i.fa-file-excel, body.tnui .btn i.fa-file-excel { color: var(--ex-excel); }
body.tnui .tn-exp button i.fa-file-pdf, body.tnui .dt-export button i.fa-file-pdf, body.tnui .btn i.fa-file-pdf { color: var(--ex-pdf); }
body.tnui .tn-exp button i.fa-print, body.tnui .dt-export button i.fa-print, body.tnui .btn-outline i.fa-print { color: var(--ex-print); }
body.tnui .dt-export button i.fa-file-lines, body.tnui .tn-exp button i.fa-file-lines { color: var(--ex-txt); }
body.tnui .tn-tb .tn-exp button:hover i, body.tnui .dt-export button:hover i { filter: none; }

/* ── 11e. Test Panel pages ───────────────────────────────────────────────
   These pages draw their own tables (panel-box / dt-* / table.dt) and older
   sheets pin colours with !important, so the same design language is restated
   here with matching weight.                                                 */
body.tn-testpanel.tnui .page-intro {
  margin: 0 0 var(--ui-s4); padding: 0; background: transparent !important; box-shadow: none; color: var(--ui-muted) !important; font-size: var(--ui-fs-md);
}
body.tn-testpanel.tnui .two-col-panel { gap: var(--ui-s6) !important; }
body.tn-testpanel.tnui .panel-box, body.tn-testpanel.tnui .cdr-panel, body.tn-testpanel.tnui .chart-box {
  background: var(--ui-card) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r-md) !important;
  box-shadow: var(--ui-sh-1); margin-bottom: var(--ui-s6); overflow: hidden;
}
body.tn-testpanel.tnui .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); padding: var(--ui-s4) var(--ui-s5);
  border-bottom: 1px solid var(--ui-line) !important; color: var(--ui-ink) !important; font-size: var(--ui-fs-lg); font-weight: 700; text-transform: none; letter-spacing: 0;
}
body.tn-testpanel.tnui .panel-head > span:first-child { display: inline-flex; align-items: center; gap: var(--ui-s3); }
body.tn-testpanel.tnui .panel-head > span:first-child i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-r-sm); background: var(--ui-tint); color: var(--tn-primary); font-size: 14px;
}
body.tn-testpanel.tnui .panel-body { padding: var(--ui-s5); }
body.tn-testpanel.tnui .section-title { display: flex; align-items: center; gap: var(--ui-s3); margin: var(--ui-s5) 0 var(--ui-s3); font-size: var(--ui-fs-lg); font-weight: 700; text-transform: none; color: var(--ui-ink); }
body.tn-testpanel.tnui .section-title i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-r-sm); background: var(--ui-tint); color: var(--tn-primary); font-size: 14px; }

/* filter row: one line of controls, no grey slab */
body.tn-testpanel.tnui .filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); min-height: var(--ui-h-md); margin-bottom: var(--ui-s4); padding: 0;
  background: transparent !important; border: 0 !important; border-radius: 0;
}
body.tn-testpanel.tnui .filter-bar select { flex: 1 1 180px; min-width: 0; }
body.tn-testpanel.tnui .ui-live { display: inline-flex; align-items: center; gap: var(--ui-s2); font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-muted); }
body.tn-testpanel.tnui .ui-dot { width: 9px; height: 9px; border-radius: 50%; background: #22A35B; animation: uiDot 2.4s ease-out infinite; }

/* controls */
body.tn-testpanel.tnui input:not([type="checkbox"]):not([type="radio"]), body.tn-testpanel.tnui select {
  height: var(--ui-h-md); padding: 0 var(--ui-s3); background-color: var(--ui-card) !important; border: 1px solid var(--ui-ctrl) !important;
  border-radius: var(--ui-r-sm) !important; color: var(--ui-ink) !important; font-size: var(--ui-fs-md);
}
body.tn-testpanel.tnui select { padding-right: 32px; }
body.tn-testpanel.tnui input:focus, body.tn-testpanel.tnui select:focus { border-color: var(--tn-primary) !important; box-shadow: var(--ui-ring) !important; outline: 0 !important; }
body.tn-testpanel.tnui .btn-blue, body.tn-testpanel.tnui .btn-red, body.tn-testpanel.tnui .btn-orange, body.tn-testpanel.tnui .btn-outline-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2); height: var(--ui-h-md); padding: 0 var(--ui-s4);
  border-radius: var(--ui-r-sm) !important; font-size: var(--ui-fs-md); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--ui-t), border-color var(--ui-t), color var(--ui-t);
}
body.tn-testpanel.tnui .btn-blue, body.tn-testpanel.tnui .btn-red {
  background: var(--tn-primary) !important; border: 1px solid var(--tn-primary) !important; color: var(--tn-on-primary) !important;
}
body.tn-testpanel.tnui .btn-blue:hover, body.tn-testpanel.tnui .btn-red:hover { background: var(--tn-primary-h) !important; border-color: var(--tn-primary-h) !important; filter: none; }
body.tn-testpanel.tnui .btn-orange, body.tn-testpanel.tnui .btn-outline-sm {
  background: var(--ui-card) !important; border: 1px solid var(--ui-ctrl) !important; color: var(--ui-ink-2) !important;
}
body.tn-testpanel.tnui .btn-orange:hover, body.tn-testpanel.tnui .btn-outline-sm:hover { background: var(--ui-tint) !important; border-color: var(--tn-primary) !important; color: var(--tn-primary) !important; }
body.tn-testpanel.tnui .btn-orange i { color: var(--tn-orange); }

/* table toolbar: rows-per-page, export group, search */
body.tn-testpanel.tnui .dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-s3); margin-bottom: var(--ui-s4); }
body.tn-testpanel.tnui .dt-toolbar > div { align-items: center; }
body.tn-testpanel.tnui .dt-per-wrap { display: inline-flex; align-items: center; gap: var(--ui-s2); font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-muted) !important; }
body.tn-testpanel.tnui .dt-per-wrap select { width: 76px; height: var(--ui-h-sm); padding: 0 28px 0 10px; }
body.tn-testpanel.tnui .dt-search-wrap { position: relative; display: block; }
body.tn-testpanel.tnui .dt-search-wrap > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ui-muted); pointer-events: none; }
body.tn-testpanel.tnui .dt-search-wrap input { width: 220px; max-width: 100%; height: var(--ui-h-sm) !important; padding-left: 32px !important; }
body.tn-testpanel.tnui .dt-right { display: inline-flex; align-items: center; gap: var(--ui-s3); }
body.tn-testpanel.tnui .show-hide-btn {
  height: var(--ui-h-sm); padding: 0 var(--ui-s3); background: var(--ui-card) !important; border: 1px solid var(--ui-ctrl) !important; border-radius: var(--ui-r-sm) !important;
  color: var(--ui-ink-2) !important; font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
}
body.tn-testpanel.tnui .dt-export button {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--ui-ink-2) !important;
  height: calc(var(--ui-h-sm) - 2px); padding: 0 12px; font-size: var(--ui-fs-sm); font-weight: 600;
}
body.tn-testpanel.tnui .dt-export button + button { border-left: 1px solid var(--ui-line) !important; }
body.tn-testpanel.tnui .dt-export button:hover { background: var(--ui-tint) !important; color: var(--tn-primary) !important; }

/* the table itself: same header, rows and hover as the shared kit */
body.tn-testpanel.tnui #tn-wrap, body.tn-testpanel.tnui #rs-wrap, body.tn-testpanel.tnui #cdr-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s3); }
body.tn-testpanel.tnui table.dt {
  flex: 0 0 100%; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); overflow: hidden; font-size: var(--ui-fs-sm);
}
body.tn-testpanel.tnui table.dt thead th, body.tn-testpanel.tnui .dt th {
  background: var(--ui-tint) !important; color: var(--ui-tint-ink) !important; padding: 11px var(--ui-s3); border: 0 !important; border-bottom: 1px solid var(--ui-line) !important;
  font-size: var(--ui-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-align: left; white-space: nowrap;
}
body.tn-testpanel.tnui table.dt tbody td, body.tn-testpanel.tnui .dt td {
  padding: 12px var(--ui-s3); border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; background: transparent !important; color: var(--ui-ink) !important;
}
body.tn-testpanel.tnui table.dt tbody tr:last-child td { border-bottom: 0 !important; }
body.tn-testpanel.tnui table.dt tbody tr:hover td { background: var(--ui-tint) !important; }
body.tn-testpanel.tnui table.dt td.empty-state { padding: 36px var(--ui-s3); text-align: center; color: var(--ui-muted) !important; font-weight: 600; }
body.tn-testpanel.tnui .dt-info { order: 1; font-size: var(--ui-fs-sm); color: var(--ui-muted) !important; }
body.tn-testpanel.tnui .dt-pager { order: 2; display: inline-flex; gap: var(--ui-s1); margin-left: auto; }
body.tn-testpanel.tnui .dt-pager button {
  min-width: var(--ui-h-sm); height: var(--ui-h-sm); padding: 0 8px; margin: 0; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r-sm) !important;
  background: var(--ui-card) !important; color: var(--ui-ink-2) !important; font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
}
body.tn-testpanel.tnui .dt-pager button i { font-size: 11px; }
body.tn-testpanel.tnui .dt-pager button:hover:not(:disabled):not(.active) { background: var(--ui-tint) !important; color: var(--tn-primary) !important; border-color: var(--tn-primary) !important; }
body.tn-testpanel.tnui .dt-pager button.active { background: var(--tn-primary) !important; border-color: var(--tn-primary) !important; color: var(--tn-on-primary) !important; }
body.tn-testpanel.tnui .dt-pager button:disabled { opacity: .4; cursor: not-allowed; }

/* report filters */
body.tn-testpanel.tnui .cdr-panel { padding: var(--ui-s5); }
body.tn-testpanel.tnui .cdr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s3); }
body.tn-testpanel.tnui .cdr-row > input:not([type="checkbox"]), body.tn-testpanel.tnui .cdr-row > select {
  flex: 1 1 170px; width: auto !important; min-width: 150px !important; max-width: 100%;
}
body.tn-testpanel.tnui .cdr-row + .cdr-row { margin-top: var(--ui-s4); padding-top: var(--ui-s4); border-top: 1px solid var(--ui-line); }
body.tn-testpanel.tnui .grp-label { font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-ink-2) !important; }
body.tn-testpanel.tnui .cdr-chk { font-size: var(--ui-fs-md); color: var(--ui-ink); }
body.tn-testpanel.tnui .badge { border-radius: var(--ui-r-pill) !important; }
body.tn-testpanel.tnui .badge-green { background: var(--ui-ok-bg) !important; color: var(--ui-ok-ink) !important; }
body.tn-testpanel.tnui .badge-red { background: var(--ui-danger-bg) !important; color: var(--ui-danger-ink) !important; }
body.tn-testpanel.tnui .badge-yellow { background: var(--ui-warn-bg) !important; color: var(--ui-warn-ink) !important; }
body.tn-testpanel.tnui .badge-blue { background: var(--ui-tint) !important; color: var(--ui-tint-ink) !important; }
@media (max-width: 900px) {
  body.tn-testpanel.tnui .two-col-panel { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  body.tn-testpanel.tnui .panel-body { padding: var(--ui-s4); overflow-x: visible !important; }
  body.tn-testpanel.tnui .dt-toolbar { flex-direction: column; align-items: stretch; }
  body.tn-testpanel.tnui .dt-toolbar > div, body.tn-testpanel.tnui .dt-right { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  body.tn-testpanel.tnui .dt-export { display: flex; width: 100%; }
  body.tn-testpanel.tnui .dt-export button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  body.tn-testpanel.tnui .dt-search-wrap { width: 100%; }
  body.tn-testpanel.tnui .dt-search-wrap input { width: 100% !important; }
  body.tn-testpanel.tnui .filter-bar select { flex: 1 1 100%; }
  body.tn-testpanel.tnui .filter-bar .btn-red, body.tn-testpanel.tnui .filter-bar .btn-blue, body.tn-testpanel.tnui .filter-bar .btn-outline-sm { flex: 1 1 0; }
  body.tn-testpanel.tnui table.dt td.empty-state { white-space: normal !important; }
  body.tn-testpanel.tnui .dt-pager { margin: 0 auto; flex-wrap: wrap; justify-content: center; }
  body.tn-testpanel.tnui .dt-info { width: 100%; text-align: center; }
}

/* inactivity warning (np-session.js) */
.ui-sess {
  position: fixed; left: 50%; bottom: 24px; z-index: 2147483200; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: min(520px, calc(100vw - 24px)); padding: 14px 16px;
  background: var(--tn-card, #fff); color: var(--tn-ink, #332E38); border: 1px solid var(--tn-line, #E6E5EF);
  border-left: 4px solid #F59E0B; border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 12, 60, .28); animation: uiPop 200ms cubic-bezier(.2, .7, .2, 1);
}
.ui-sess-ic { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(245, 158, 11, .14); color: #C27A06; font-size: 16px; }
.ui-sess-tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ui-sess-tx b { font-size: 14px; }
.ui-sess-tx span { color: var(--tn-muted, #6E6E85); }
.ui-sess-tx em { font-style: normal; font-weight: 700; color: var(--tn-ink, #332E38); }
@media (max-width: 480px) { .ui-sess { flex-wrap: wrap; } .ui-sess .btn { width: 100%; } }
/* ── 12. responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.tnui .tn-tb .tn-srch { margin-left: 0; flex: 1 1 200px; }
  body.tnui .tn-tb .tn-srch input { width: 100%; }
}
@media (max-width: 900px) {
  body.tnui .ui-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.tnui .ui-grid2 { grid-template-columns: minmax(0, 1fr); }
  body.tnui .ui-panel { padding: var(--ui-s4); }
  body.tnui .ui-form-actions .tn-btn { width: 100%; }
  body.tnui .tn-foot { margin: 0 var(--ui-s4); }
  body.tnui .dt-export { display: flex; width: 100%; }
  body.tnui .dt-export button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  body.tnui .dt-export button span { display: none; }
  /* breadcrumb on its own row, page actions underneath at full width */
  body.tnui .tn-band { padding: 8px 14px 10px; }
  body.tnui .tn-band-in { grid-template-columns: minmax(0, 1fr); gap: var(--ui-s2); }
  body.tnui .tn-acts { justify-content: flex-start; flex-wrap: wrap; }
  body.tnui .tn-acts:empty { display: none; }
  body.tnui .tn-tb .tn-exp button i { font-size: 15px; }
  body.tnui .zp-toolbar.tn-tb { gap: var(--ui-s2); }
  body.tnui .tn-tb .tn-exp { width: 100%; }
  body.tnui .tn-tb .tn-exp button { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  body.tnui .tn-tb .tn-exp button span { display: none; }
  body.tnui .zp-filters .form-group { width: 100%; }
  body.tnui .zp-filters .tn-btn, body.tnui .zp-filters .btn { width: 100%; }
  body.tnui .zp-foot { justify-content: center; }
  body.tnui .zp-pager { margin: 0 auto; flex-wrap: wrap; justify-content: center; }
  body.tnui .toast-container { left: var(--ui-s3); right: var(--ui-s3); top: 60px; }
  body.tnui .toast { min-width: 0; }
  body.tnui .table-wrap { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.tnui *, .ui-dlg-back, .ui-dlg, .ui-skel-bar { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 12. one colour per meaning, one control language ─────────────────────
   export = green · destructive = red · approve = green · pause/suspend = amber ·
   cancel/close = neutral outline · everything else = the brand purple.
   np-ui.js tags each button from its own label (ui-b-*), so a page that
   still ships btn-warning for "Export Report" gets the right colour anyway.  */
body.tnui {
  --ui-export: #1F8A5B; --ui-export-h: #187049;
  --ui-amber: #B45309;  --ui-amber-h: #92400E;
}
body.tnui.tn-dark { --ui-export: #2FA36F; --ui-export-h: #3CB47E; --ui-amber: #D9962B; --ui-amber-h: #E6A63C; }
body.tnui .btn-warning, body.tnui .tn-btn.orange, body.tnui .btn-orange {
  background: var(--ui-amber) !important; border-color: var(--ui-amber) !important; color: #fff !important;
}
body.tnui.tn-dark .btn-warning, body.tnui.tn-dark .tn-btn.orange, body.tnui.tn-dark .btn-orange { color: #1A1200 !important; }
body.tnui .ui-b-danger.ui-b-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
body.tnui.tn-dark .ui-b-danger.ui-b-danger { color: #2A0808 !important; }
body.tnui .ui-b-ok.ui-b-ok { background: var(--tn-primary) !important; border-color: var(--tn-primary) !important; color: var(--tn-on-primary) !important; }
body.tnui .ui-b-warn.ui-b-warn { background: var(--ui-amber) !important; border-color: var(--ui-amber) !important; color: #fff !important; }
body.tnui.tn-dark .ui-b-warn.ui-b-warn { color: #1A1200 !important; }
body.tnui .ui-b-ok.ui-b-ok:hover, body.tnui .ui-b-warn.ui-b-warn:hover, body.tnui .ui-b-danger.ui-b-danger:hover { filter: brightness(.92); }
body.tnui .ui-b-neutral.ui-b-neutral {
  background: var(--tn-stripe) !important; color: var(--ui-ink-2) !important; border: 1px solid var(--ui-ctrl) !important;
}
body.tnui .ui-b-neutral.ui-b-neutral:hover { background: var(--ui-line) !important; color: var(--ui-ink) !important; }

/* report / filter forms: every action the same height and weight */
body.tnui .zp-filter-actions { align-items: center; }
body.tnui .zp-filter-actions .btn, body.tnui .zp-filter-actions .tn-btn,
body.tnui .zp-filters > .btn, body.tnui .zp-filters > .tn-btn,
body.tnui .filters-bar .btn, body.tnui .filters-bar .tn-btn { height: var(--ui-h-md); padding: 0 var(--ui-s5); font-size: var(--ui-fs-md); font-weight: 600; }
body.tnui .zp-filters .tn-btn.sm { height: var(--ui-h-md); font-size: var(--ui-fs-md); }
body.tnui .zp-filter-actions .btn:not(.icon-only) i, body.tnui .filters-bar .btn:not(.icon-only) i { display: none; }
body.tnui .zp-filters > .btn, body.tnui .zp-filters > .tn-btn { align-self: flex-end; }

/* Group By: a real inline group of radios / checkboxes, on any page */
body.tnui .zp-groupby, body.tnui .ui-groupby {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--ui-s2) var(--ui-s5); margin-top: var(--ui-s4);
}
body.tnui .ui-groupby > span:first-child, body.tnui .zp-groupby .zp-gb-title {
  font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-ink-2); margin-right: var(--ui-s1);
}
body.tnui .zp-groupby label, body.tnui .ui-groupby label {
  display: inline-flex !important; align-items: center; gap: var(--ui-s2); margin: 0; font-size: var(--ui-fs-md); font-weight: 500;
  color: var(--ui-ink); cursor: pointer; width: auto !important; white-space: nowrap;
}
body.tnui input[type="radio"], body.tnui input[type="checkbox"] {
  flex: none !important; width: 16px !important; min-width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; cursor: pointer;
}
body.tnui .ui-groupby-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--ui-s3) var(--ui-s5) !important; }
body.tnui .ui-groupby-row > .ui-push { margin-left: auto !important; display: flex; gap: var(--ui-s2); flex-wrap: wrap; }

/* balance tiles (Payment Requests): flat, tinted, one per currency */
body.tnui .tn-bal { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: var(--ui-s4); margin-bottom: var(--ui-s5); }
body.tnui .tn-bal > div {
  display: flex; align-items: center; gap: var(--ui-s3); min-width: 0 !important; padding: 12px var(--ui-s5) 12px 12px !important;
  font-size: var(--ui-fs-md) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md) !important; background: var(--bt, var(--ui-tint)) !important;
}
body.tnui .tn-bal .usd { --bt: rgba(31, 138, 91, .10);  --bi: #1F8A5B; }
body.tnui .tn-bal .eur { --bt: rgba(123, 95, 192, .12); --bi: #7B5FC0; }
body.tnui .tn-bal .gbp { --bt: var(--ui-tint);          --bi: var(--tn-primary); }
body.tnui.tn-dark .tn-bal .usd { --bi: #4CC38A; }
body.tnui.tn-dark .tn-bal .eur { --bi: #B7AAF0; }
body.tnui .tn-bal-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--ui-r-sm); background: var(--ui-card); color: var(--bi); font-size: 16px; }
body.tnui .tn-bal-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.tnui .tn-bal-l { font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ui-muted); }
body.tnui .tn-bal-v { font-size: var(--ui-fs-2xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* brand chips on the Live OTP counters */
body.tnui .stat-card .stat-icon.ui-brand-wa { background: rgba(37, 211, 102, .15); color: #1DA851; }
body.tnui .stat-card .stat-icon.ui-brand-tg { background: rgba(34, 158, 217, .14); color: #1B84B8; }
body.tnui .stat-card .stat-icon.ui-brand-g  { background: rgba(234, 67, 53, .12);  color: #D93025; }
body.tnui .stat-icon i.fab { font-size: 22px; }

/* legacy "Show [25] entries … Search:" bars, brought in line with the table kit */
body.tnui .ui-legacy-tb { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-s3); margin: 0 0 var(--ui-s4) !important; }
body.tnui .ui-legacy-tb select { width: 76px; min-width: 76px; height: var(--ui-h-sm); min-height: var(--ui-h-sm); padding: 0 28px 0 10px; }
body.tnui .ui-legacy-tb label, body.tnui .ui-legacy-tb span { font-size: var(--ui-fs-sm); color: var(--ui-muted); font-weight: 500; }
body.tnui .ui-legacy-tb .ui-lt-rows { display: flex; align-items: center; gap: var(--ui-s2); }
body.tnui .ui-legacy-tb .ui-lt-search { display: flex; align-items: center; }
body.tnui .ui-legacy-tb .ui-clr input { width: 220px; max-width: 100%; height: var(--ui-h-sm); min-height: var(--ui-h-sm); }

/* search boxes: magnifier on the left, a clear (x) on the right once there is text */
body.tnui .ui-clr { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
body.tnui .ui-clr > input { width: 100%; padding-right: 32px !important; }
body.tnui .ui-clr.ui-has-ic > input { padding-left: 32px !important; }
body.tnui .ui-clr > i.ui-mag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ui-muted); pointer-events: none; }
body.tnui .ui-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; place-items: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer; font-size: 12px;
}
body.tnui .ui-clr.ui-filled > .ui-clear, body.tnui .tn-srch.ui-filled > .ui-clear { display: grid; }
body.tnui .ui-clear:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .tn-srch .ui-clear { right: 8px; }
body.tnui .tn-srch input { padding-right: 32px; }

@media (max-width: 720px) {
  body.tnui .tn-bal { grid-template-columns: minmax(0, 1fr); gap: var(--ui-s2); }
  body.tnui .ui-groupby-row > .ui-push { margin-left: 0 !important; width: 100%; }
  body.tnui .ui-groupby-row > .ui-push .btn { flex: 1 1 0; }
  body.tnui .ui-legacy-tb > *, body.tnui .ui-legacy-tb .ui-clr { width: 100%; }
  body.tnui .ui-legacy-tb .ui-clr input { width: 100%; }
}

body.tnui .form-group > .ui-clr, body.tnui .ui-clr.ui-block { display: flex; width: 100%; }

/* the closed drawer sits just off-screen; its shadow must not bleed onto the page edge */
body.tnui .tn-drawer:not(.open) { box-shadow: none !important; }

/* the old olive "warning" brown becomes a true amber everywhere (badges, stat chips, buttons) */
body.tnui { --tn-orange: #B45309; --tn-warn-bg: rgba(245, 158, 11, .15); --tn-warn-ink: #93500A; }
body.tnui.tn-dark { --tn-warn-bg: rgba(245, 158, 11, .16); --tn-warn-ink: #F2BE5C; }

/* Private Access: flat danger tint + flat red action instead of gradients */
body.tnui .pv-warn { background: var(--ui-danger-bg) !important; }
body.tnui .pv-btn { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
body.tnui .pv-btn:hover { filter: brightness(.92); }

/* buttons are flat: no legacy gradient fills */
body.tnui .btn, body.tnui .tn-btn, body.tnui .tn-req { background-image: none !important; }
body.tnui .zp-btn-blue, body.tnui .zp-btn-cyan { background-color: var(--tn-primary) !important; border-color: var(--tn-primary) !important; color: var(--tn-on-primary) !important; }

body.tnui .zp-sel-btn, body.tnui .zp-sel-btn span { font-size: var(--ui-fs-md); font-weight: 400; }
body.tnui .zp-sel-btn .zp-ph { color: var(--ui-muted); }

/* ── 13. compact density: filters in one flow, actions beside them ─────────
   The report card is a single flex flow: fields, then the action buttons, and the
   Group By line underneath. On a wide screen everything that fits sits on one
   row (like the reference panel); on a phone fields pair up two per row.       */
body.tnui .zp-filters-card {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-s3) var(--ui-s3);
  padding: var(--ui-s4) var(--ui-s5) var(--ui-s5) !important; margin-bottom: var(--ui-s4) !important;
}
body.tnui .zp-filters-card > .zp-filters { display: contents; }
body.tnui .zp-filters-card > .zp-alert, body.tnui .zp-filters-card > .alert { flex: 0 0 100%; }
body.tnui .zp-filters-card .zp-filters .form-group { width: 168px; }
body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="datetime-local"]),
body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="date"]) { width: 212px; }
body.tnui .zp-filters-card .zp-groupby { order: 3; flex: 0 0 100%; margin-top: 0; padding-top: var(--ui-s1); }
body.tnui .zp-filters-card .zp-filter-actions { order: 2; margin: 0; flex: none; flex-wrap: nowrap; }
/* form-group labels: tighter, so a row of fields is not taller than it has to be */
body.tnui .zp-filters .form-label { margin-bottom: 4px; }

/* report cards: less air above/below the title and toolbar */
body.tnui .zp-toolbar.tn-tb { margin-bottom: var(--ui-s3); }
body.tnui .zp-foot { margin-top: var(--ui-s3); }

@media (max-width: 720px) {
  body.tnui .zp-filters-card { gap: var(--ui-s2) var(--ui-s2); padding: var(--ui-s3) var(--ui-s3) var(--ui-s4) !important; }
  /* phone: short fields pair up, date-times stay full width */
  body.tnui .zp-filters-card .zp-filters .form-group { width: calc(50% - 4px) !important; }
  body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="datetime-local"]),
  body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="date"]) { width: 100% !important; }
  /* the description under the title is hidden on a phone, so its reserved space goes too */
  body.tnui.tn-has-lead:not(.tn-dash) .tn-main:has(#page-content > .tn-merge) .tn-title { padding-bottom: 12px; }
  body.tnui .zp-filters-card .zp-filter-actions { order: 4; flex: 0 0 100%; }
  body.tnui .zp-filters-card .zp-filter-actions .btn, body.tnui .zp-filters-card .zp-filter-actions .tn-btn { flex: 1 1 0; width: auto; }
  body.tnui .zp-filters-card .zp-groupby { gap: var(--ui-s2) var(--ui-s4); }
  body.tnui .zp-groupby label { font-size: var(--ui-fs-sm); }
  body.tnui .zp-filters .form-label { font-size: var(--ui-fs-xs); margin-bottom: 3px; }
  body.tnui .zp-filters input, body.tnui .zp-filters select, body.tnui .zp-filters .zp-sel-btn { height: 38px; min-height: 38px; font-size: var(--ui-fs-sm); }
  body.tnui .zp-filters input[type="datetime-local"], body.tnui .zp-filters input[type="date"] { font-size: var(--ui-fs-md); }
  /* table toolbar: Rows + export buttons share the first line, search sits under them */
  body.tnui .zp-toolbar.tn-tb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); }
  body.tnui .tn-tb .tn-show { flex: none; }
  body.tnui .tn-tb .tn-exp { flex: 1 1 0; width: auto; min-width: 0; }
  body.tnui .tn-tb .tn-srch { flex: 1 1 100%; margin-left: 0; }
  body.tnui .tn-tb .tn-srch input { width: 100%; }
}
@media (max-width: 720px) {
  body.tnui .zp-filters .ui-clr input { font-size: 12px; padding-left: 28px !important; padding-right: 26px !important; }
  body.tnui .zp-filters .ui-clr > i.ui-mag { left: 9px; }
}

/* an open select list must paint over the card that follows the filter card */
body.tnui .zp-filters-card, body.tnui .card:has(.zp-sel) { position: relative; z-index: 6; }

body.tnui .ui-b-primary.ui-b-primary { background: var(--tn-primary) !important; border-color: var(--tn-primary) !important; color: var(--tn-on-primary) !important; }
body.tnui .ui-b-primary.ui-b-primary:hover { background: var(--tn-primary-h) !important; border-color: var(--tn-primary-h) !important; }

body.tnui .ui-grid2 > .ui-span2 { grid-column: 1 / -1; }
@media (max-width: 720px) { body.tnui .ui-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* ── 14. payout card: a ticket — balance chart on the left, pay-day stub on the right ── */
body.tnui .ui-pay {
  display: flex; margin: 0 0 var(--ui-s5); background: var(--ui-card); border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md); box-shadow: var(--ui-sh-1); color: var(--ui-ink);
}
body.tnui .ui-pay-main { flex: 1; min-width: 0; padding: var(--ui-s4) var(--ui-s5); }
body.tnui .ui-pay-head { display: flex; align-items: center; gap: var(--ui-s3); flex-wrap: wrap; margin-bottom: var(--ui-s3); }
body.tnui .ui-pay-head b { font-size: var(--ui-fs-md); font-weight: 700; }
body.tnui .ui-pay-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: var(--ui-r-pill); background: var(--ui-tint); color: var(--ui-tint-ink); font-size: var(--ui-fs-xs); font-weight: 700; }
body.tnui .ui-pay-chip i { font-size: 11px; }
body.tnui .ui-pay-chip.is-wait { background: var(--ui-warn-bg); color: var(--ui-warn-ink); }
body.tnui .ui-pay-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--ui-s5); align-items: center; }
body.tnui .ui-pay-stats small, body.tnui .ui-pay-stub small { display: block; font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ui-muted); }
body.tnui .ui-pay-amt { font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.tnui .ui-pay-delta { margin: 0 0 var(--ui-s2); font-size: var(--ui-fs-sm); font-weight: 700; color: var(--tn-primary); }
body.tnui .ui-pay-delta.is-flat { color: var(--ui-muted); font-weight: 500; }
body.tnui .ui-pay-row { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s3); padding: 7px 0; border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-sm); }
body.tnui .ui-pay-row:last-child { border-bottom: 0; }
body.tnui .ui-pay-row span { color: var(--ui-muted); }
body.tnui .ui-pay-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
body.tnui .ui-pay-row b.is-ok { color: var(--tn-primary); }
body.tnui .ui-pay-row b.is-warn { color: var(--ui-amber); }
body.tnui .ui-pay-chart { min-width: 0; height: 150px; }
body.tnui .ui-pay-svg { display: block; max-width: 100%; overflow: visible; }
body.tnui .ui-pay-ax text { font-size: 10px; fill: var(--ui-muted); }
body.tnui .ui-pay-ax .g { stroke: var(--ui-line); stroke-width: 1; }
body.tnui .ui-pay-min { stroke: var(--ui-amber); stroke-width: 1.3; stroke-dasharray: 5 4; }
body.tnui .ui-pay-minbg { fill: var(--ui-warn-bg); }
body.tnui .ui-pay-mint { font-size: 10px; font-weight: 700; fill: var(--ui-warn-ink); }
body.tnui .ui-pay-area { fill: var(--ui-tint); }
body.tnui .ui-pay-line { fill: none; stroke: var(--tn-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.tnui .ui-pay-cross { fill: var(--ui-card); stroke: var(--tn-primary); stroke-width: 2; }
body.tnui .ui-pay-gap { stroke: var(--ui-amber); stroke-width: 1.6; stroke-dasharray: 2 2; fill: none; }
body.tnui .ui-pay-short { font-size: 10px; font-weight: 700; fill: var(--ui-warn-ink); }
body.tnui .ui-pay-dot { fill: var(--tn-primary); }
body.tnui .ui-pay-tag { fill: var(--tn-primary); }
body.tnui .ui-pay-tagt { font-size: 10.5px; font-weight: 700; fill: var(--tn-on-primary); }
body.tnui .ui-pay-reqs { display: flex; flex-wrap: wrap; gap: var(--ui-s2) var(--ui-s5); margin-top: var(--ui-s3); padding-top: var(--ui-s3); border-top: 1px solid var(--ui-line); }
body.tnui .ui-pay-req { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ui-fs-sm); color: var(--ui-ink-2); text-decoration: none; }
body.tnui .ui-pay-req i { font-size: 14px; color: var(--tn-primary); }
body.tnui .ui-pay-req.is-todo i { color: var(--ui-amber); }
body.tnui a.ui-pay-req.is-todo:hover { text-decoration: underline; }
/* the cut between the ticket and its stub */
body.tnui .ui-pay-cut { position: relative; width: 0; margin: 10px 0; border-left: 2px dashed var(--ui-line); }
body.tnui .ui-pay-cut i { position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--tn-page); border: 1px solid var(--ui-line); }
body.tnui .ui-pay-cut i:first-child { top: -19px; }
body.tnui .ui-pay-cut i:last-child { bottom: -19px; }
body.tnui .ui-pay-stub { flex: none; width: 168px; padding: var(--ui-s4) var(--ui-s3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
/* today -> pay day: how far along the week is */
body.tnui .ui-pay-line { width: 100%; margin: var(--ui-s3) 0 var(--ui-s1); padding: 0 var(--ui-s2); box-sizing: border-box; }
body.tnui .ui-pay-track { position: relative; height: 16px; }
body.tnui .ui-pay-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--ui-tint); }
body.tnui .ui-pay-track > i { position: absolute; left: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--tn-primary); transition: width 1s var(--ui-ease); }
body.tnui .ui-pay-track .s { position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--tn-primary); }
body.tnui .ui-pay-track .e { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-card); border: 2px solid var(--tn-primary); }
body.tnui .ui-pay-track .e i { width: 6px; height: 6px; border-radius: 50%; background: var(--tn-primary); }
body.tnui .ui-pay-track .e.is-now { background: var(--tn-primary); }
body.tnui .ui-pay-track .e.is-now i { background: var(--tn-on-primary); }
body.tnui .ui-pay-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
body.tnui .ui-pay-stub b { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--tn-primary); }
body.tnui .ui-pay-stub .btn { margin-top: var(--ui-s3); width: 100%; }
body.tnui .ui-pay-note { margin-top: var(--ui-s3); font-size: var(--ui-fs-xs); line-height: 1.4; color: var(--ui-muted); }
@media (max-width: 720px) {
  body.tnui .ui-pay { flex-direction: column; }
  body.tnui .ui-pay-body { grid-template-columns: minmax(0, 1fr); gap: var(--ui-s3); }
  body.tnui .ui-pay-cut { width: auto; margin: 0 10px; border-left: 0; border-top: 2px dashed var(--ui-line); }
  body.tnui .ui-pay-cut i { top: -10px !important; bottom: auto !important; }
  body.tnui .ui-pay-cut i:first-child { left: -20px; }
  body.tnui .ui-pay-cut i:last-child { left: auto; right: -20px; }
  body.tnui .ui-pay-stub { width: auto; padding: var(--ui-s4); }
}

/* ── 15. allocation forms: three columns, the action sits in the last cell ── */
body.tnui .ui-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s3) var(--ui-s4); align-items: start; }
body.tnui .ui-grid3 .tn-f { margin: 0; }
body.tnui .ui-grid3 .ui-act-cell .tn-btn { width: 100%; }
body.tnui .card > .ui-grid3 { margin-top: var(--ui-s1); }
body.tnui .ui-divider { margin: var(--ui-s5) 0 var(--ui-s4); }
@media (max-width: 900px) { body.tnui .ui-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  body.tnui .ui-grid3 { grid-template-columns: minmax(0, 1fr); }
  body.tnui .ui-grid3 .ui-act-cell > label { display: none; }
}

body.tnui .tn-f select, body.tnui .tn-f input { font-size: var(--ui-fs-md); }

body.tnui .ui-nomatch td { padding: 22px var(--ui-s3); text-align: center; color: var(--ui-muted); font-weight: 600; background: transparent !important; }
body.tnui .ui-auto-tb { margin-bottom: var(--ui-s3); }

/* "All data" server export, sits beside the Copy / CSV / Excel group: same solid purple as every action */
body.tnui .ui-xall { position: relative; display: inline-flex; }
body.tnui .ui-xall-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--ui-h-sm); padding: 0 12px; border: 1px solid var(--tn-primary); border-radius: var(--ui-r-sm);
  background: var(--tn-primary); color: var(--tn-on-primary); font-size: var(--ui-fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap;
}
body.tnui .ui-xall-btn:hover { background: var(--tn-primary-h); border-color: var(--tn-primary-h); }
body.tnui .ui-xall-btn i { font-size: 12px; }
body.tnui .ui-xall-c { font-size: 9px !important; opacity: .8; }
body.tnui .ui-xmenu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 150px; padding: 4px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md); background: var(--ui-card); box-shadow: var(--ui-sh-3);
}
body.tnui .ui-xmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--ui-r-sm);
  background: transparent; color: var(--ui-ink); font-size: var(--ui-fs-md); font-weight: 600; cursor: pointer; text-align: left;
}
body.tnui .ui-xmenu button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .ui-xmenu button i { width: 16px; color: var(--ui-muted); }
@media (max-width: 720px) { body.tnui .ui-xall { flex: none; } body.tnui .ui-xall-btn span { display: none; } }


/* the page's own export group (.dt-export -> .tn-exp) outside a kit toolbar: same look */
body.tnui .tn-exp.ui-alone { order: 0; display: inline-flex; gap: 0; flex-wrap: nowrap; justify-content: flex-start; width: auto; border: 1px solid var(--ui-ctrl); border-radius: var(--ui-r-sm); overflow: hidden; background: var(--ui-card); }
body.tnui .tn-exp.ui-alone button {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ui-h-sm) - 2px); padding: 0 12px;
  background: transparent; color: var(--ui-ink-2); border: 0; border-radius: 0; font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--ui-t), color var(--ui-t);
}
body.tnui .tn-exp.ui-alone button + button { border-left: 1px solid var(--ui-line); }
body.tnui .tn-exp.ui-alone button i { font-size: 12px; color: var(--ui-muted); transition: color var(--ui-t); }
body.tnui .tn-exp.ui-alone button:hover { background: var(--ui-tint); color: var(--tn-primary); }
body.tnui .tn-exp.ui-alone button:hover i { color: var(--tn-primary); }
body.tnui .tn-two .tn-exp.ui-alone { order: 0; width: auto; }
so they take the normal ink back. */
body.tnui.tn-dark .tn-exp.ui-alone button { color: var(--ui-ink-2) !important; }
body.tnui.tn-dark .tn-exp.ui-alone button:hover { color: var(--tn-primary) !important; }
body.tnui.tn-dark .tn-exp.ui-alone button i { color: var(--ui-muted); }
body.tnui .tn-exp.ui-alone button:hover i { filter: none; }
body.tnui .tn-exp.ui-alone { display: inline-flex; flex-wrap: nowrap; }
body.tnui .tn-exp.ui-alone button i.fa-copy { color: var(--ex-copy); }
body.tnui .tn-exp.ui-alone button i.fa-file-csv { color: var(--ex-csv); }
body.tnui .tn-exp.ui-alone button i.fa-file-excel { color: var(--ex-excel); }
body.tnui .tn-exp.ui-alone button i.fa-file-pdf { color: var(--ex-pdf); }
body.tnui .tn-exp.ui-alone button i.fa-print { color: var(--ex-print); }
body.tnui .tn-exp.ui-alone button i.fa-file-lines { color: var(--ex-txt); }


body.tnui .ui-xall-btn, body.tnui .ui-xall-btn span, body.tnui .ui-legacy-tb .ui-xall-btn span { color: var(--tn-on-primary) !important; }

/* ── 99. one colour per kind of action ─────────────────────────────────────
   Purple = do it (Show Report, Assign, Save, Search...), red = destroy (Delete, Reject...).
   Everything else carries its own hue so a row of buttons reads at a glance.
   np-ui.js tags each button from its label: ui-b-<kind>.                     */
body.tnui {
  --ab-reset: #D96A0E;  --ab-clear: #9A3412;  --ab-export: #0F766E;  --ab-download: #0E7490;
  --ab-upload: #2563EB; --ab-transfer: #B45309; --ab-return: #7C3AED; --ab-approve: #15803D; --ab-revoke: #BE185D;
}
body.tnui :is(.ui-b-reset, .ui-b-clear, .ui-b-export, .ui-b-download, .ui-b-upload, .ui-b-transfer, .ui-b-return, .ui-b-revoke, .ui-b-ok).ui-b-reset,
body.tnui .ui-b-clear.ui-b-clear, body.tnui .ui-b-export.ui-b-export, body.tnui .ui-b-download.ui-b-download, body.tnui .ui-b-upload.ui-b-upload,
body.tnui .ui-b-transfer.ui-b-transfer, body.tnui .ui-b-return.ui-b-return, body.tnui .ui-b-revoke.ui-b-revoke, body.tnui .ui-b-ok.ui-b-ok { color: #fff !important; }
body.tnui .ui-b-reset.ui-b-reset { background: var(--ab-reset) !important; border-color: var(--ab-reset) !important; }
body.tnui .ui-b-clear.ui-b-clear { background: var(--ab-clear) !important; border-color: var(--ab-clear) !important; }
body.tnui .ui-b-export.ui-b-export { background: var(--ab-export) !important; border-color: var(--ab-export) !important; }
body.tnui .ui-b-download.ui-b-download { background: var(--ab-download) !important; border-color: var(--ab-download) !important; }
body.tnui .ui-b-upload.ui-b-upload { background: var(--ab-upload) !important; border-color: var(--ab-upload) !important; }
body.tnui .ui-b-transfer.ui-b-transfer { background: var(--ab-transfer) !important; border-color: var(--ab-transfer) !important; }
body.tnui .ui-b-return.ui-b-return { background: var(--ab-return) !important; border-color: var(--ab-return) !important; }
body.tnui .ui-b-revoke.ui-b-revoke { background: var(--ab-revoke) !important; border-color: var(--ab-revoke) !important; }
body.tnui .ui-b-ok.ui-b-ok { background: var(--ab-approve) !important; border-color: var(--ab-approve) !important; }
body.tnui :is(.ui-b-reset, .ui-b-clear, .ui-b-export, .ui-b-download, .ui-b-upload, .ui-b-transfer, .ui-b-return, .ui-b-revoke, .ui-b-ok):hover { filter: brightness(.9); }
body.tnui :is(.ui-b-reset, .ui-b-clear, .ui-b-export, .ui-b-download, .ui-b-upload, .ui-b-transfer, .ui-b-return, .ui-b-revoke, .ui-b-ok) i { color: inherit !important; }
/* the "All data" menu keeps the primary purple, like Assign Selected */
body.tnui .ui-xall-btn { background: var(--tn-primary) !important; border-color: var(--tn-primary) !important; }
body.tnui .ui-xall-btn:hover { filter: none; background: var(--tn-primary-h) !important; border-color: var(--tn-primary-h) !important; }

/* ── 100. sidebar identity card ─────────────────────────────────────────────
   avatar with a live (green) dot, name, role as a quiet purple pill — the whole
   block sits in one soft card instead of floating above a hairline.          */
body.tnui .tn-drawer .tn-me {
  margin: 12px 12px 6px; padding: 12px 12px; border: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line);
  border-radius: 12px; background: var(--tn-tint-bg);
  grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px;
}
body.tnui .tn-drawer .tn-me-av { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--tn-card), 0 0 0 3px color-mix(in srgb, var(--tn-primary) 35%, transparent); }
body.tnui .tn-drawer .tn-me-av::after {
  width: 11px; height: 11px; top: auto; bottom: 0; right: 0; background: #22A06B; border: 2px solid var(--tn-tint-bg);
}
body.tnui .tn-drawer .tn-me-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
body.tnui .tn-drawer .tn-me-role {
  margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: var(--tn-card); color: var(--tn-primary); border: 1px solid color-mix(in srgb, var(--tn-primary) 30%, transparent);
}

/* ── 101. AI sparkle icon (Font Awesome free has no sparkles): a mask on an <i>, so it takes the text colour like every other glyph */
.fa-ai-sparkle { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 3c.4 4.3 2.7 6.6 7 7-4.3.4-6.6 2.7-7 7-.4-4.3-2.7-6.6-7-7 4.3-.4 6.6-2.7 7-7z%22/%3E%3Cpath d=%22M18.5 13c.2 2.2 1.3 3.3 3.5 3.5-2.2.2-3.3 1.3-3.5 3.5-.2-2.2-1.3-3.3-3.5-3.5 2.2-.2 3.3-1.3 3.5-3.5z%22/%3E%3Cpath d=%22M18 2c.15 1.6 1 2.4 2.6 2.6-1.6.15-2.4 1-2.6 2.6-.15-1.6-1-2.4-2.6-2.6 1.6-.15 2.4-1 2.6-2.6z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 3c.4 4.3 2.7 6.6 7 7-4.3.4-6.6 2.7-7 7-.4-4.3-2.7-6.6-7-7 4.3-.4 6.6-2.7 7-7z%22/%3E%3Cpath d=%22M18.5 13c.2 2.2 1.3 3.3 3.5 3.5-2.2.2-3.3 1.3-3.5 3.5-.2-2.2-1.3-3.3-3.5-3.5 2.2-.2 3.3-1.3 3.5-3.5z%22/%3E%3Cpath d=%22M18 2c.15 1.6 1 2.4 2.6 2.6-1.6.15-2.4 1-2.6 2.6-.15-1.6-1-2.4-2.6-2.6 1.6-.15 2.4-1 2.6-2.6z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.fa-ai-sparkle::before { content: none !important; }
body.tnui .tn-item i.ic.fa-ai-sparkle { width: 19px; height: 19px; font-size: 19px; }

/* ── 102. "online" dot: sits on the rim of the avatar (half in, half out) and pulses ── */
body.tnui .tn-drawer .tn-me-av { overflow: visible; }
body.tnui .tn-drawer .tn-me-av img { border-radius: 50%; }
body.tnui .tn-drawer .tn-me-av::after {
  content: ""; position: absolute; width: 9px; height: 9px; right: 2px; bottom: 2px; top: auto; left: auto;
  border-radius: 50%; background: #22C55E; border: 2px solid var(--tn-card); box-sizing: content-box; margin: -2px -2px 0 0;
  animation: ui-online 2s ease-out infinite; z-index: 2;
}
@keyframes ui-online {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { body.tnui .tn-drawer .tn-me-av::after { animation: none; } }

/* tooltips follow the panel theme and always sit above the cards */
body.tnui [data-tip]::after { background: var(--ui-primary); color: var(--ui-on-primary, #fff); box-shadow: var(--ui-sh-2); z-index: 9999; }
body.tnui .ui-clear[data-tip]::after, body.tnui .tn-srch [data-tip]::after { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; transform: none; }
body.tnui .tn-srch, body.tnui .ui-lt-search { position: relative; z-index: 5; }


/* Group By as one dropdown (np-ui.js hides the original radios / checkboxes and clicks them for you) */
body.tnui .gb-src, body.tnui .zp-groupby label.gb-src, body.tnui .ui-groupby label.gb-src, body.tnui .zp-groupby .gb-src { display: none !important; }
body.tnui .gb-dd { position: relative; flex: 0 0 auto; }
body.tnui .gb-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); min-width: 230px; max-width: 100%;
  height: var(--ui-h-md); padding: 0 var(--ui-s3); border: 1px solid var(--ui-ctrl); border-radius: var(--ui-r-md);
  background: var(--ui-card); color: var(--ui-ink); font: inherit; font-size: var(--ui-fs-md); cursor: pointer; text-align: left;
}
body.tnui .gb-btn:hover { border-color: var(--ui-primary); }
body.tnui .gb-dd.open .gb-btn { border-color: var(--ui-primary); box-shadow: var(--ui-ring); }
body.tnui .gb-btn b { font-weight: 600; margin-left: 2px; }
body.tnui .gb-btn i { font-size: 10px; color: var(--ui-muted); transition: transform var(--ui-t) var(--ui-ease); }
body.tnui .gb-dd.open .gb-btn i { transform: rotate(180deg); }
.gb-panel {
  position: fixed; z-index: 4000; padding: var(--ui-s1, 4px); border: 1px solid var(--tn-line, #DDD9EC); border-radius: 10px;
  background: var(--tn-card, #fff); box-shadow: 0 16px 40px rgba(20, 12, 60, .22); max-height: min(60vh, 360px); overflow: auto;
}
.gb-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--tn-ink, #2B2640); user-select: none; }
.gb-opt:hover { background: var(--tn-tint-bg, #F1EEFA); }
.gb-opt.on { font-weight: 600; color: var(--tn-primary, #5B4DA4); }
.gb-tick { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--tn-muted, #8A84A8); background: transparent; display: inline-grid; place-items: center; }
.gb-tick.c { border-radius: 4px; }
.gb-tick.r { border-radius: 50%; }
.gb-opt.on .gb-tick { border-color: var(--tn-primary, #5B4DA4); background: var(--tn-primary, #5B4DA4); }
.gb-opt.on .gb-tick.c::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.gb-opt.on .gb-tick.r::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (max-width: 720px) { body.tnui .gb-dd, body.tnui .gb-btn { width: 100%; } }

/* Group By reads as one more field of the form: label above, same box, same type size as its neighbours */
body.tnui .gb-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
body.tnui .gb-field > .form-label { margin: 0; }
body.tnui .gb-field .gb-dd { width: 100%; }
body.tnui .gb-btn { font-size: 13px; padding: 0 10px; min-width: 0; width: 100%; }
body.tnui .gb-btn .gb-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tnui .gb-btn .gb-txt.gb-ph { color: var(--ui-muted); }
/* the Group By label is the same label as From / To / Range: same size, weight, colour and spacing */
body.tnui .gb-field { gap: 0; }
body.tnui .gb-field > label.form-label, body.tnui .zp-groupby .gb-field > label.form-label, body.tnui .ui-groupby .gb-field > label.form-label {
  display: block !important; margin: 0 0 4px !important; font-size: var(--ui-fs-sm) !important; font-weight: 600 !important; color: var(--ui-ink-2) !important;
}

/* dropdown text is never cut off at the bottom (the tail of g, y, p, q): room for the descenders */
body.tnui .zp-sel-btn span, body.tnui .gb-btn .gb-txt { line-height: 1.5; padding: 1px 0; }

/* Group By label follows the other labels down to phone size */
@media (max-width: 720px) {
  body.tnui .gb-field > label.form-label, body.tnui .zp-groupby .gb-field > label.form-label, body.tnui .ui-groupby .gb-field > label.form-label { font-size: var(--ui-fs-xs) !important; margin-bottom: 3px !important; }
}
/* table-toolbar controls (Rows, date range, CLI search, Search button) share one height */
body.tnui :is(.dt-toolbar, .ui-legacy-tb, .tn-tb) :is(input:not([type="checkbox"]):not([type="radio"]), select, .zp-sel-btn) { height: 34px !important; min-height: 34px !important; }
body.tnui :is(.dt-toolbar, .ui-legacy-tb) > div > :is(.btn, button):not(.zp-sel-btn):not(.gb-btn) { height: 34px; }
/* classic page numbers (First / 1 2 3 / Last) wrap and centre on a phone instead of running off both edges */
body.tnui .pagination { flex-wrap: wrap !important; justify-content: center; gap: 6px; max-width: 100%; }
body.tnui .pagination button { min-width: 34px; }
@media (max-width: 720px) { body.tnui .pagination button { min-width: 30px; height: 30px; padding: 0 6px; } }

/* request tabs: the count inside a pill */
body.tnui .ui-qr .ui-qr-n { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(91, 77, 164, .14); font-size: 11px; font-weight: 700; text-align: center; }
body.tnui .ui-qr.on .ui-qr-n { background: rgba(255, 255, 255, .25); }
body.tnui .ui-qr .ui-qr-n.hot { background: #FDEBC8; color: #8A5A00; }

/* an empty table's message stays centred in the part of the table you can see, however wide the columns make the table */
body.tnui .table-wrap { container-type: inline-size; }
body.tnui td.empty-state > .zp-empty-in { position: sticky; left: 0; width: 100cqw; max-width: 100%; box-sizing: border-box; padding: 0 var(--ui-s3); }
body.tnui td.empty-state > .zp-empty-in { display: flex; flex-direction: column; align-items: center; gap: var(--ui-s2); text-align: center; }
body.tnui td.empty-state > .zp-empty-in br { display: none; }
body.tnui td.empty-state > .zp-empty-in > i { margin: 0 !important; }


/* ── Live Access ───────────────────────────────────────────────────────── */
body.tnui .la-card { padding-bottom: var(--ui-s4); }
body.tnui .la-head { margin-bottom: var(--ui-s3); }
body.tnui .la-title { font-size: var(--ui-fs-xl); font-weight: 700; color: var(--ui-ink); }
body.tnui .la-sub { margin-top: 2px; color: var(--ui-muted); font-size: var(--ui-fs-md); }
body.tnui .la-chips { align-items: center; }
body.tnui .la-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .la-live i { width: 8px; height: 8px; border-radius: 50%; background: #1FA463; box-shadow: 0 0 0 0 rgba(31, 164, 99, .5); animation: la-pulse 1.8s infinite; }
@keyframes la-pulse { 70% { box-shadow: 0 0 0 8px rgba(31, 164, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 164, 99, 0); } }
body.tnui .la-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s3); margin: var(--ui-s4) 0; }
body.tnui .la-tile { padding: var(--ui-s3) var(--ui-s4); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-tint); display: flex; flex-direction: column; gap: 2px; }
body.tnui .la-tile b { font-size: 24px; font-weight: 800; color: var(--ui-primary); line-height: 1.2; }
body.tnui .la-tile span { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .la-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-weight: 700; font-size: 14px; flex: none; }
body.tnui .la-app { display: inline-flex; align-items: center; gap: 10px; }
body.tnui .la-bar { display: inline-block; vertical-align: middle; width: 90px; height: 7px; border-radius: 99px; background: var(--ui-tint); overflow: hidden; margin-right: 8px; }
body.tnui .la-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ui-primary); }
body.tnui .la-rng { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 10px; border-radius: 99px; background: var(--ui-tint); color: var(--ui-tint-ink); font-size: var(--ui-fs-sm); white-space: nowrap; }
body.tnui .la-rng em { font-style: normal; font-weight: 700; margin-left: 4px; }
body.tnui .la-more { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .la-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ui-s3); margin-top: var(--ui-s4); }
body.tnui .la-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); min-width: 0; }
body.tnui .la-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-ink); }
body.tnui .la-rk { flex: none; width: 24px; text-align: center; font-weight: 800; color: var(--ui-primary); }
body.tnui .la-modal h4 { margin: var(--ui-s3) 0 var(--ui-s2); font-size: var(--ui-fs-lg); }
@media (max-width: 720px) {
  body.tnui .la-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2); }
  body.tnui .la-tile { padding: var(--ui-s2) var(--ui-s3); }
  body.tnui .la-tile b { font-size: 19px; }
  body.tnui .la-live { margin-left: 0; width: 100%; }
  body.tnui .la-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2); }
}
@media (max-width: 480px) {
  body.tnui .la-chip { padding: 8px 10px; gap: 8px; }
  body.tnui .la-chip .la-av { width: 26px; height: 26px; font-size: 13px; }
  body.tnui .la-rk { width: 16px; font-size: 12px; }
}


/* ── CLI Search ────────────────────────────────────────────────────────── */
body.tnui .cs-bar { display: flex; gap: var(--ui-s3); align-items: center; margin-bottom: var(--ui-s3); }
body.tnui .cs-in { flex: 1 1 auto; min-width: 0; max-width: 560px; }
body.tnui .cs-in input { width: 100%; height: var(--ui-h-md); }
body.tnui .cs-bar .tn-btn { flex: 0 0 auto; height: var(--ui-h-md); }
body.tnui .cs-tag { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: var(--ui-fs-sm); font-weight: 600; background: var(--ui-tint); color: var(--ui-muted); }
body.tnui .cs-tag.on { background: var(--ui-ok-bg); color: var(--ui-ok-ink); }
@media (max-width: 720px) { body.tnui .cs-bar { flex-direction: row; } body.tnui .cs-in { max-width: none; } }
body.tnui .cs-in { position: relative; display: block; }
body.tnui .cs-in > i.fa-magnifying-glass { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; z-index: 1; }
body.tnui .cs-in input { padding-left: 38px !important; padding-right: 34px !important; }
body.tnui .cs-in .ui-x, body.tnui .cs-in > button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
body.tnui .cs-in input[type="search"]::-webkit-search-cancel-button, body.tnui .cs-in input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* CLI Search: one clean card, no table toolbar */
body.tnui .cs-page { padding-block: var(--ui-s4); }
body.tnui .cs-hint { margin: 0 0 var(--ui-s3); color: var(--ui-muted); font-size: var(--ui-fs-md); }
body.tnui .cs-table .zp-toolbar, body.tnui .cs-table .zp-head-actions, body.tnui .cs-table .zp-top, body.tnui .cs-table .zp-colvis { display: none !important; }
body.tnui .cs-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--ui-s3); }
body.tnui .cs-recent:empty { display: none; }
body.tnui .cs-recent-l { font-size: var(--ui-fs-sm); color: var(--ui-muted); margin-right: 2px; }
body.tnui .cs-chip { height: 28px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 99px; background: var(--ui-card, #fff); color: var(--ui-ink); font-size: var(--ui-fs-sm); cursor: pointer; }
body.tnui .cs-chip:hover { border-color: #5B4DA4; color: #5B4DA4; }
body.tnui .cs-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: var(--ui-s2) 0 var(--ui-s3); padding-top: var(--ui-s3); border-top: 1px solid var(--ui-line); color: var(--ui-ink); }
body.tnui .cs-sum:empty { display: none; }
body.tnui .cs-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
body.tnui .cs-live i { width: 8px; height: 8px; border-radius: 50%; background: #1FA463; box-shadow: 0 0 0 0 rgba(31,164,99,.5); animation: la-pulse 1.8s infinite; }
@media (max-width: 560px) {
  body.tnui .cs-table th, body.tnui .cs-table td { padding-left: 8px !important; padding-right: 8px !important; }
  body.tnui .cs-table .cs-tag { padding: 2px 9px; font-size: 12px; white-space: nowrap; }
  body.tnui .cs-page { padding-inline: 14px; }
}

/* ── Tick boxes: real 16px boxes with a slim focus ring (the generic field height/ring made them 40px tall) ── */
body.tnui input[type="checkbox"], body.tnui input[type="radio"] { height: 16px !important; min-height: 0 !important; width: 16px !important; padding: 0 !important; box-shadow: none !important; flex: 0 0 auto; }
body.tnui input[type="checkbox"]:focus, body.tnui input[type="radio"]:focus { box-shadow: none !important; outline: none; }
body.tnui input[type="checkbox"]:focus-visible, body.tnui input[type="radio"]:focus-visible { outline: 2px solid var(--ui-primary, #5B4DA4); outline-offset: 2px; }

/* ── An open dropdown always sits above the cards that follow it ── */
body.tnui .card:has(.open), body.tnui .zp-filters-card:has(.open), body.tnui .panel-box:has(.open) { position: relative; z-index: 40 !important; }

/* ── Phones: stat cards become compact tiles (icon beside the number), two per row.
      A grid marked .stats-lead opens with one full-width hero tile (Today's SMS). ── */
@media (max-width: 640px) {
  body.tnui .page-content .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 12px !important; }
  body.tnui .page-content .stats-grid:not(.stats-lead) > .stat-card:last-child:nth-child(odd),
  body.tnui .page-content .stats-lead > .stat-card:last-child:nth-child(even) { grid-column: 1 / -1; }
  body.tnui .page-content .stat-card {
    flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;
    gap: 10px; min-height: 0; padding: 12px; border-radius: 12px;
  }
  body.tnui .page-content .stat-card > div:not(.stat-icon) { align-items: flex-start; min-width: 0; flex: 1 1 auto; }
  body.tnui .page-content .stat-card .stat-icon { width: 38px; height: 38px; margin: 0; flex: 0 0 auto; border-radius: 50%; }
  body.tnui .page-content .stat-card .stat-icon i { font-size: 16px; }
  body.tnui .page-content .stat-card .stat-value { font-size: 20px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.tnui .page-content .stat-card .stat-label { margin: 1px 0 0; font-size: 11px; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; max-width: 100%; }
  body.tnui .page-content .stat-card .stat-change { margin-top: 2px; font-size: 11px; line-height: 1.3; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.tnui .page-content .stat-card .nx-orb, body.tnui .page-content .stat-card .nx-sweep { display: none !important; }

  body.tnui .page-content .stats-lead > .stat-card:first-child {
    grid-column: 1 / -1; padding: 16px; gap: 14px;
    background: var(--ui-primary, #5B4DA4) !important; border-color: var(--ui-primary, #5B4DA4) !important; color: #fff;
  }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-icon { width: 46px; height: 46px; background: #fff !important; color: var(--ui-primary, #5B4DA4) !important; }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-icon i { font-size: 19px; }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-value { order: 1; font-size: 34px; color: #fff !important; }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-label { order: 0; font-size: 12px; color: #E4DEFA !important; margin: 0; }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-change { order: 2; color: #E4DEFA !important; }
  body.tnui .page-content .stats-lead > .stat-card:first-child .stat-change.up { background: transparent !important; }
}
body.tnui .ui-qr { white-space: nowrap; }