/* ==========================================================================
   PixelCore — report / filter forms that fit their screen by themselves

   Rule of the layout, at every width and on every page:
     row 1   all the fields share ONE line and divide it evenly
             (from, to, range, client, number, CLI ... whatever the page has)
     row 2   "Group By" on the left, the actions (Export / Show Report / Reset) on the right
   Below the width where a field would get too narrow, the row wraps by itself;
   on a phone the short fields pair up and the date-times take a full line.
   ========================================================================== */

/* ── desktop and tablet ─────────────────────────────────────────────────── */
body.tnui .zp-filters-card { gap: var(--ui-s3) var(--ui-s3); }
body.tnui .zp-filters-card .zp-filters .form-group { flex: 1 1 110px; width: auto; min-width: 105px; max-width: 420px; }
/* compact controls so six fields fit one line: slimmer padding, 13px text */
body.tnui .zp-filters-card .zp-filters .form-group :is(input, select):not([type="checkbox"]) {
  font-size: 13px; padding-left: 10px; padding-right: 10px; text-overflow: ellipsis;
}
body.tnui .zp-filters-card .zp-filters .form-group .search-wrap input,
body.tnui .zp-filters-card .zp-filters .form-group .ui-sb input { padding-left: 32px; }
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"]) { flex: 1.3 1 184px; min-width: 178px; max-width: 420px; }
body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="datetime-local"]) input { padding-right: 6px; }
body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="text"], input[type="search"], input:not([type])) { flex: 1.1 1 120px; min-width: 118px; }
body.tnui .zp-filters-card:has(.zp-groupby) .zp-groupby {
  order: 3 !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; align-self: center;
  border-top: 0 !important;
}
body.tnui .zp-filters-card:has(.zp-groupby) .zp-filter-actions {
  order: 4 !important; margin: 0 0 0 auto !important; align-self: center; flex-wrap: nowrap;
}
/* a thin rule between the fields and the Group By / actions row */
body.tnui .zp-filters-card:has(.zp-groupby)::after { content: ""; order: 2; flex: 0 0 100%; height: 0; margin: 0; padding: 0; border: 0; }
body.tnui .zp-filters-card .zp-groupby { column-gap: var(--ui-s5); }

/* Admin / legacy `.filters-bar` forms: fields share the line evenly, Group By + actions sit on the next one */
body.tnui .card > .filters-bar:has(> :is(input, select):not([type="radio"], [type="checkbox"])) { flex-wrap: wrap; gap: var(--ui-s3); }
body.tnui .card > .filters-bar > :is(input, select):not([type="radio"], [type="checkbox"]) {
  flex: 1 1 120px !important; min-width: 110px !important; width: auto !important; max-width: 420px; font-size: 13px;
}
body.tnui .card > .filters-bar > .ui-clr { flex: 1.3 1 140px; min-width: 130px; max-width: 420px; }
body.tnui .card > .filters-bar > :is(input[type="date"], input[type="datetime-local"]) { flex: 1.25 1 150px !important; min-width: 146px !important; }
body.tnui .card > .filters-bar:has(> :is(input, select):not([type="radio"], [type="checkbox"])) + .filters-bar { margin-top: var(--ui-s3) !important; padding-top: 0 !important; }

/* Test Panel: the same idea for its own markup */
body.tn-testpanel.tnui .cdr-row > input:not([type="checkbox"]), body.tn-testpanel.tnui .cdr-row > select {
  flex: 1 1 110px; min-width: 100px !important; max-width: 300px;
}
body.tn-testpanel.tnui .cdr-row + .cdr-row { margin-top: var(--ui-s3); padding-top: var(--ui-s3); }

/* ── tablets / narrow laptops: a touch tighter so the single line survives ── */
@media (min-width: 721px) and (max-width: 1150px) {
  body.tnui .zp-filters-card { gap: 10px; }
  body.tnui .zp-filters-card .zp-filters .form-group :is(input, select):not([type="checkbox"]) { font-size: 12px; padding-left: 8px; padding-right: 4px; }
  body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="datetime-local"]) input { letter-spacing: -.2px; }
  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"]) { min-width: 166px; flex-basis: 166px; }
  body.tnui .zp-filters-card .zp-filters .form-group:has(input[type="text"], input[type="search"], input:not([type])) { min-width: 100px; flex-basis: 100px; }
  body.tnui .zp-filters-card .zp-filters .form-group:has(select) { min-width: 96px; flex-basis: 96px; }
}

/* ── phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.tnui .card > .filters-bar > .ui-clr, body.tnui .card > .filters-bar > select { flex: 1 1 100% !important; max-width: none; }
  body.tnui .zp-filters-card .zp-filters .form-group { flex: 0 0 calc(50% - 4px); min-width: 0; max-width: none; }
  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"]) { flex: 0 0 100%; }
  body.tnui .zp-filters-card:has(.zp-groupby) .zp-groupby { flex: 0 0 100% !important; }
  body.tnui .zp-filters-card:has(.zp-groupby) .zp-filter-actions { flex: 0 0 100%; margin-left: 0 !important; }
  body.tnui .zp-filters-card .zp-filter-actions .btn, body.tnui .zp-filters-card .zp-filter-actions .tn-btn { flex: 1 1 0; }
  body.tn-testpanel.tnui .cdr-row > input:not([type="checkbox"]), body.tn-testpanel.tnui .cdr-row > select { flex: 1 1 100%; max-width: none; }
}

/* ==========================================================================
   Table toolbars — one order on every page, every screen
     [ Rows ]  [ Copy CSV Excel PDF Print ]  [ All data ]  ............  [ Search ]
   (a toolbar without a search box pushes "All data" to the right edge)
   ========================================================================== */
body.tnui :is(.ui-legacy-tb, .tn-tb) { justify-content: flex-start !important; align-items: center; gap: var(--ui-s3); }
body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-show, .ui-lt-rows) { order: 0; }
body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-exp, .dt-export) { order: 1; margin: 0 !important; }
body.tnui :is(.ui-legacy-tb, .tn-tb) > .ui-xall { order: 2; }
body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-srch, .ui-lt-search, .ui-clr) { order: 3; margin-left: auto; }
body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> :is(.tn-srch, .ui-lt-search, .ui-clr))) > .ui-xall { margin-left: auto; }
/* a toolbar whose only extra is a Rows box (no search): keep it on the left too */
body.tnui .ui-legacy-tb > .ui-lt-rows:last-child:not(:first-child) { order: 0; margin-left: 0; }

/* ==========================================================================
   Bulk-action bars (Assign / Revoke / Return / Delete Selected)
   ========================================================================== */
body.tnui .ui-bulk-wrap { padding: 0 !important; margin: 0 0 var(--ui-s3) !important; }
body.tnui .ui-bulk {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--ui-s3); width: 100%;
  padding: var(--ui-s3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-tint, rgba(91,77,164,.05));
}
body.tnui .ui-bulk > select { flex: 0 1 190px; width: 190px; min-width: 150px; height: var(--ui-h-sm); min-height: var(--ui-h-sm); }
body.tnui .ui-bulk > .btn, body.tnui .ui-bulk > button { flex: 0 0 auto; height: var(--ui-h-sm); white-space: nowrap; }
body.tnui .ui-bulk > .ui-bk-count {
  margin-left: auto; padding: 4px 12px; border-radius: 999px; background: var(--ui-card); border: 1px solid var(--ui-line);
  font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-muted); white-space: nowrap;
}
/* one row: selects and actions share the line and divide it; only what does not fit wraps */
@media (min-width: 721px) {
  body.tnui .ui-bulk > select { flex: 1.3 1 160px; width: auto; min-width: 160px; max-width: 240px; padding-left: 10px; text-overflow: ellipsis; }
  body.tnui .ui-bulk > :is(.btn, button) { flex: 1 1 108px; min-width: 108px; max-width: 210px; justify-content: center; padding-left: 10px; padding-right: 10px; }
  body.tnui .ui-bulk > .ui-bk-count { flex: 0 0 auto; margin-left: auto; }
}
@media (max-width: 720px) {
  body.tnui .ui-bulk { gap: var(--ui-s2); padding: var(--ui-s2); }
  body.tnui .ui-bulk > select { flex: 1 1 100%; width: 100%; }
  body.tnui .ui-bulk > .btn, body.tnui .ui-bulk > button { flex: 1 1 calc(50% - 4px); justify-content: center; }
  body.tnui .ui-bulk > .ui-bk-count { flex: 1 1 100%; margin-left: 0; text-align: center; order: 9; }
  /* table toolbar on a phone: Rows + All data on one line, the export icons on one line, search below */
  body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-show, .ui-lt-rows) { flex: 1 1 auto; width: auto; }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > .ui-xall { order: 1; flex: none; margin-left: auto; width: auto; }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-exp, .dt-export) { order: 2; flex: 1 1 100%; width: 100%; }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-srch, .ui-lt-search, .ui-clr) { order: 3; flex: 1 1 100%; margin-left: 0; width: 100%; }
  body.tnui .tn-exp button, body.tnui .dt-export button { font-size: 0 !important; flex: 1 1 0; justify-content: center; }
  body.tnui .tn-exp button i, body.tnui .dt-export button i { font-size: 15px !important; }
}

@media (max-width: 720px) { body.tnui .ui-xall-btn span { display: inline !important; } }

body.tnui :is(.ui-bk-count, .zp-selinfo, #zb-count)[hidden] { display: none !important; }

/* nothing selected: the bulk bar (Assign / Revoke / Delete Selected...) stays out of the way */
/* nothing ticked yet: the bar stays, its actions wait greyed out until numbers are picked */
body.tnui .ui-bulk.ui-bulk-off > :is(.btn, button) { opacity: .45; pointer-events: none; filter: saturate(.55); box-shadow: none; }

/* half-width cards (two-column pages): export group on its own line, search full width under it */
body.tnui :is(.ui-legacy-tb, .tn-tb).ui-tb-narrow > :is(.tn-srch, .ui-lt-search, .ui-clr) { flex: 1 1 100%; margin-left: 0; width: 100%; order: 3; }
body.tnui :is(.ui-legacy-tb, .tn-tb).ui-tb-narrow > :is(.tn-srch, .ui-lt-search) input { width: 100%; }
body.tnui :is(.ui-legacy-tb, .tn-tb).ui-tb-narrow > :is(.tn-exp, .dt-export) { flex: 1 1 300px; width: auto; }
body.tnui :is(.ui-legacy-tb, .tn-tb).ui-tb-narrow > :is(.tn-exp, .dt-export) button { flex: 1 1 0; justify-content: center; }

/* quick date-range chips */
body.tnui .ui-qr {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ui-ctrl);
  background: var(--ui-card); color: var(--ui-ink-2); font: inherit; 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 .ui-qr:hover { border-color: var(--tn-primary); color: var(--tn-primary); }
body.tnui .ui-qr.on { background: var(--tn-primary); border-color: var(--tn-primary); color: var(--tn-on-primary); cursor: default; }
body.tnui .ui-qr-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 720px) {
  body.tnui .ui-qr-bar > label { display: none; }
  body.tnui .ui-qr-bar > input[type="date"] { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  body.tnui .ui-qr-bar > .btn { flex: 1 1 100%; justify-content: center; }
  body.tnui .ui-qr-bar > .ui-qr-row { flex: 1 1 100%; }
}

/* ==========================================================================
   Invoices
   ========================================================================== */
body.tnui .ui-inote { margin: 0 0 var(--ui-s3); color: var(--ui-muted); font-size: var(--ui-fs-sm); line-height: 1.5; }
body.tnui .ui-isums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ui-s3); }
body.tnui .ui-isum { display: flex; flex-direction: column; gap: 2px; padding: var(--ui-s3) var(--ui-s4); border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); }
body.tnui .ui-isum span { font-size: var(--ui-fs-sm); color: var(--ui-muted); font-weight: 600; }
body.tnui .ui-isum b { font-size: 22px; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
body.tnui .ui-isum small { color: var(--ui-muted); font-size: 12px; }
body.tnui .ui-itabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ui-s3); }
body.tnui .ui-ifilters { margin-bottom: var(--ui-s3); }
body.tnui .ui-ifilters > select { flex: 0 1 180px; }
body.tnui .ui-ifilters > input { flex: 1 1 220px; max-width: 360px; }
body.tnui .ui-isub { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
body.tnui .ui-inum { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
body.tnui .ui-iacts { white-space: nowrap; text-align: right; }
body.tnui .ui-iacts > * + * { margin-left: 6px; }
body.tnui .ui-ilink { color: var(--tn-primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
body.tnui .ui-ilink:hover { text-decoration: underline; }
body.tnui .ui-ipill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
body.tnui .ui-ip-open { background: var(--tn-tint-bg); color: var(--tn-primary); border-color: color-mix(in srgb, var(--tn-primary) 35%, transparent); }
body.tnui .ui-ip-issued { background: #FFF3DF; color: #8A5200; border-color: #F0CF9A; }
body.tnui .ui-ip-paid { background: #E3F5EA; color: #13663A; border-color: #A9DDBD; }
body.tnui.tn-dark .ui-ip-issued { background: #3A2C10; color: #F3C677; border-color: #6B4F1B; }
body.tnui.tn-dark .ui-ip-paid { background: #11301F; color: #86D9A6; border-color: #24583B; }
body.tnui .ui-idetail h4 { margin: var(--ui-s4) 0 var(--ui-s2); font-size: 14px; }
body.tnui .ui-idetail h4 small { font-weight: 500; color: var(--ui-muted); }
body.tnui .ui-idhead { display: flex; justify-content: space-between; gap: var(--ui-s4); align-items: flex-start; flex-wrap: wrap; }
body.tnui .ui-idamt { text-align: right; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.tnui .ui-idmeta { display: flex; flex-wrap: wrap; gap: var(--ui-s2) var(--ui-s4); margin: var(--ui-s3) 0; color: var(--ui-muted); font-size: var(--ui-fs-sm); }
body.tnui .ui-idmeta b { color: var(--ui-ink); }
body.tnui .ui-idfoot { margin-top: var(--ui-s4); display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
  body.tnui .ui-ifilters > select, body.tnui .ui-ifilters > input { flex: 1 1 100%; max-width: none; }
  body.tnui .ui-iacts { white-space: normal; }
}

/* Opening balance: outlined capsule, the currency as a solid badge on the right */
body.tnui .ui-balance {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ui-s3); padding: 7px 8px 7px 14px;
  border: 1.5px solid var(--tn-primary); border-radius: 999px; background: var(--ui-card);
}
body.tnui .ui-balance-ic { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--tn-primary); font-size: 14px; display: inline-flex; }
body.tnui .ui-balance-l { display: inline; }
body.tnui .ui-balance-v { display: inline; font-size: 18px; line-height: 1; }
body.tnui .ui-balance-c { padding: 5px 11px; border-radius: 999px; background: var(--tn-primary); color: var(--tn-on-primary); font-size: var(--ui-fs-xs); font-weight: 800; letter-spacing: .4px; }

/* ==========================================================================
   Tables with a real grid: a line between every column and every row
   ========================================================================== */
body.tnui :is(.zp-table, .tn-table) :is(th, td) { border-right: 1px solid var(--ui-line); }
body.tnui :is(.zp-table, .tn-table) :is(th, td):last-child { border-right: 0; }
body.tnui :is(.zp-table, .tn-table) thead th { border-bottom: 1px solid var(--ui-ctrl); }
body.tnui :is(.zp-table, .tn-table) tbody tr:last-child td { border-bottom: 0; }
body.tnui :is(.zp-table, .tn-table) td.empty-state, body.tnui :is(.zp-table, .tn-table) td[colspan] { border-right: 0; }
/* a table that is not inside a scrolling wrapper (modals, small cards) gets its own outer frame */
body.tnui :not(.table-wrap) > table:is(.zp-table, .tn-table) { border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); overflow: hidden; }
body.tnui :is(.zp-table, .tn-table) thead th { border-right-color: color-mix(in srgb, var(--ui-ctrl) 70%, transparent); }
body.tnui :is(.zp-table, .tn-table) thead th:last-child { border-right: 0; }
body.tnui .ui-ip-completed { background: #E6F1FB; color: #1A4E86; border-color: #B5D4F4; }
body.tnui.tn-dark .ui-ip-completed { background: #11263D; color: #8FC1F2; border-color: #28527F; }

/* range rate table in the edit modal, and the payout chips in the ranges list */
body.tnui .er-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ui-s2) var(--ui-s3); margin-top: var(--ui-s2); }
body.tnui .er-rate { display: flex; flex-direction: column; gap: 2px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-ink-2); }
body.tnui .er-rate small { color: var(--ui-muted); font-weight: 500; }
body.tnui .rng-rate { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: 999px; background: var(--ui-tint); color: var(--ui-tint-ink); font-size: 12px; white-space: nowrap; }
body.tnui .rng-rate b { margin-right: 4px; }

body.tnui .tn-rq-terms { display: flex; flex-direction: column; gap: var(--ui-s2); }
body.tnui .tn-rq-term { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); cursor: pointer; font-size: var(--ui-fs-sm); }
body.tnui .tn-rq-term span { color: var(--ui-muted); }
body.tnui .tn-rq-term em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--ui-ink); }
body.tnui .tn-rq-term:has(input:checked) { border-color: var(--tn-primary); background: var(--ui-tint); }

/* Opening balance: one full-width capsule that follows the screen like the filter row —
   label on the left, amount and currency on the right; on a phone they stack */
body.tnui .ui-balance { display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: var(--ui-s2) var(--ui-s3); padding: 8px 10px 8px 16px; }
body.tnui .ui-balance-l { flex: 1 1 auto; }
body.tnui .ui-balance-v { font-size: 20px; }
@media (max-width: 520px) {
  body.tnui .ui-balance { border-radius: var(--ui-r-md); padding: 10px 12px; }
  body.tnui .ui-balance-ic { order: 0; }
  body.tnui .ui-balance-l { flex: 1 1 calc(100% - 40px); }
  body.tnui .ui-balance-v { margin-left: auto; }
}

/* ==========================================================================
   Table toolbar on a phone: two equal halves on the first line (Rows | All data),
   the export icons across the full width, then the search — nothing floats in
   the middle and no stray text
   ========================================================================== */
@media (max-width: 720px) {
  body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-show, .ui-lt-rows) {
    display: flex; align-items: center; gap: var(--ui-s3); flex: 1 1 40%; min-width: 0; width: auto;
  }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > :is(.tn-show, .ui-lt-rows) select { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > .ui-xall { flex: 1 1 40%; min-width: 0; margin-left: 0; }
  body.tnui :is(.ui-legacy-tb, .tn-tb) > .ui-xall .ui-xall-btn { width: 100%; justify-content: center; height: var(--ui-h-sm); }
  body.tnui .ui-rowinfo { display: none; }
}

/* one "Showing …" line per table: when the card already prints "Showing x to y of z entries" the pager does not repeat it */
body.tnui :has(> .u-16d75e):has(> .pagination) > .pagination > .pg-info { display: none; }
body.tnui :has(> .u-16d75e):has(> .pagination) > .pagination { border-top: 0; padding-top: 0; margin-top: 0; width: auto; }
@media (max-width: 720px) {
  body.tnui :has(> .u-16d75e):has(> .pagination) { display: flex; flex-direction: column; align-items: center; gap: var(--ui-s3); text-align: center; }
}

/* phone, no "All data" button: Rows stays compact and the export icons take the rest of the line,
   so nothing is stretched or left empty */
@media (max-width: 720px) {
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-show, .ui-lt-rows) { flex: 0 0 auto; }
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-show, .ui-lt-rows) select { flex: 0 0 76px; width: 76px; }
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-exp, .dt-export) { order: 1; flex: 1 1 0; width: auto; min-width: 0; }
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-srch, .ui-lt-search, .ui-clr) { order: 3; }
}
@media (max-width: 380px) {
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-exp, .dt-export) { flex: 1 1 100%; order: 2; }
  body.tnui :is(.ui-legacy-tb, .tn-tb):not(:has(> .ui-xall)) > :is(.tn-show, .ui-lt-rows) { flex: 1 1 100%; }
}

/* ==========================================================================
   Row actions and tick columns — the same on every table of every panel
   ========================================================================== */
/* Action stays part of the table, exactly like the other columns: right-aligned, with a little room so the icons never touch the edge */
body.tnui .zp-table :is(th, td).ui-act { text-align: right; white-space: nowrap; padding-right: var(--ui-s4); }
body.tnui .zp-table td.ui-act > * + * { margin-left: 6px; }
/* each action has its own colour */
body.tnui .zp-table td :is(a, button) i.fa-eye, body.tnui .zp-table td :is(a, button) i.fa-key, body.tnui .zp-table td :is(a, button) i.fa-copy { color: #5B4DA4 !important; }
body.tnui .zp-table td :is(a, button) i:is(.fa-pen, .fa-edit, .fa-pen-to-square, .fa-pencil, .fa-pause) { color: #B45309 !important; }
body.tnui .zp-table td :is(a, button) i:is(.fa-trash, .fa-trash-can, .fa-user-slash) { color: #C0392B !important; }
body.tnui .zp-table td :is(a, button) i:is(.fa-ban, .fa-rotate-left, .fa-share-from-square) { color: #BE185D !important; }
body.tnui .zp-table td :is(a, button) i:is(.fa-money-bill, .fa-money-bill-wave, .fa-money-bill-1, .fa-coins, .fa-wallet, .fa-dollar-sign, .fa-play, .fa-circle-check) { color: #15803D !important; }
body.tnui .zp-table td :is(a, button) i:is(.fa-download, .fa-file-arrow-down, .fa-circle-down) { color: #0E7490 !important; }
body.tnui .zp-table td :is(a, button):hover i { filter: brightness(.85); }
body.tnui.tn-dark .zp-table td :is(a, button) i { filter: brightness(1.35); }
/* ticks and crosses: centred in the column, green / red in a small round chip */
body.tnui .zp-table :is(th, td).ui-ctr { text-align: center; }
body.tnui .zp-table td.ui-ctr i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; vertical-align: middle; }
body.tnui .zp-table td.ui-ctr i:is(.fa-check, .fa-circle-check) { background: #E3F5EA; color: #13663A !important; }
body.tnui .zp-table td.ui-ctr i:is(.fa-xmark, .fa-times, .fa-circle-xmark) { background: #FBE7E7; color: #A32D2D !important; }
body.tnui.tn-dark .zp-table td.ui-ctr i:is(.fa-check, .fa-circle-check) { background: #11301F; color: #86D9A6; }
body.tnui.tn-dark .zp-table td.ui-ctr i:is(.fa-xmark, .fa-times, .fa-circle-xmark) { background: #3A1616; color: #F29A9A; }

/* ==========================================================================
   Small row buttons (re-allocate, take back, …): soft tinted squares, icon colour = meaning
   ========================================================================== */
body.tnui #page-content table td .btn-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: #F3F1FA !important; border: 1px solid #E1DCF1 !important; box-shadow: none; transition: background .15s, border-color .15s, transform .15s;
}
body.tnui #page-content table td .btn-icon i { font-size: 12px; color: #5B4DA4 !important; }
body.tnui #page-content table td .btn-icon:has(i:is(.fa-pen, .fa-edit, .fa-pen-to-square, .fa-pencil)) { background: #FEF3E2 !important; border-color: #F5DDB4 !important; }
body.tnui #page-content table td .btn-icon:has(i:is(.fa-pen, .fa-edit, .fa-pen-to-square, .fa-pencil)):hover { background: #FCE6C2 !important; border-color: #EDC785 !important; }
body.tnui #page-content table td .btn-icon:has(i:is(.fa-rotate-left, .fa-share-from-square, .fa-ban, .fa-user-minus)) { background: #FDEBF3 !important; border-color: #F6CFE1 !important; }
body.tnui #page-content table td .btn-icon:has(i:is(.fa-rotate-left, .fa-share-from-square, .fa-ban, .fa-user-minus)):hover { background: #FAD6E6 !important; border-color: #EDAFCB !important; }
body.tnui #page-content table td .btn-icon:hover { transform: translateY(-1px); }
body.tnui.tn-dark #page-content table td .btn-icon { background: #2A2542 !important; border-color: #3B3560 !important; }
body.tnui.tn-dark #page-content table td .btn-icon:has(i:is(.fa-pen, .fa-edit, .fa-pen-to-square, .fa-pencil)) { background: #3A2C14 !important; border-color: #5A4220 !important; }
body.tnui.tn-dark #page-content table td .btn-icon:has(i:is(.fa-rotate-left, .fa-share-from-square, .fa-ban, .fa-user-minus)) { background: #3A1A2A !important; border-color: #5C2A44 !important; }
/* who holds the number: name, a small role tag, then the two buttons — one tidy line */
body.tnui .ui-owner-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
body.tnui .ui-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
body.tnui .ui-owner .ui-role { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #EEEAFA; color: #5B4DA4; }
body.tnui .ui-owner .ui-role.mgr { background: #E3F2F7; color: #0E7490; }
body.tnui .ui-owner .ui-role.cli { background: #E3F5EA; color: #13663A; }
body.tnui .ui-owner-cell .ui-btns { display: inline-flex; gap: 6px; margin-left: auto; }
body.tnui.tn-dark .ui-owner .ui-role { background: #2E2850; color: #CFC7F5; }

/* the bulk bar of the Manager / Agent number tables sits right under the filter row: give it a little air */
body.tnui .zp-filters + .ui-bulk-wrap { margin-top: var(--ui-s3) !important; }


/* ==========================================================================
   Filter forms that divide themselves (np-ui.js: filterGrids)
   --fcols  how many equal cells a row holds (worked out from the width and the cell count)
   --fau    how many cells the button group needs
   ========================================================================== */
html body.tnui .fgrid.fgrid.fgrid {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: var(--fgap, 12px) !important;
  --fcols: 4;
}
html body.tnui .fgrid.fgrid.fgrid::after { display: none !important; }
html body.tnui .fgrid.fgrid.fgrid > .fg-contents { display: contents !important; }
html body.tnui .fgi.fgi.fgi.fgi.fgi.fgi {
  flex: 1 1 calc((100% - (var(--fcols) - 1) * var(--fgap, 12px)) / var(--fcols)) !important;
  min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important;
  order: 0 !important; align-self: flex-end !important;
}
/* only the old Group By strip had a rule line above it; every other cell keeps its own border */
html body.tnui .zp-groupby.fgi.fgi.fgi.fgi.fgi.fgi { padding-top: 0 !important; border-top: 0 !important; }
html body.tnui .fgi.fg-act.fg-act.fg-act.fg-act.fg-act {
  display: flex !important; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: var(--ui-s2);
  flex: 0 0 auto !important; max-width: 100% !important;
}
/* on a phone the button group spans whole cells so its buttons share the width */
html body.tnui .fgrid.fg-narrow .fgi.fg-act.fg-act.fg-act.fg-act.fg-act {
  flex: 0 0 calc(var(--fau, 1) * ((100% - (var(--fcols) - 1) * var(--fgap, 12px)) / var(--fcols)) + (var(--fau, 1) - 1) * var(--fgap, 12px)) !important;
}
html body.tnui .fgrid.fg-narrow .fg-act > :is(.btn, .tn-btn, button) { flex: 1 1 0; justify-content: center; }
/* a field's control always fills its cell */
html body.tnui .fgi :is(input:not([type="checkbox"]):not([type="radio"]), select, .zp-sel, .zp-sel-btn, .gb-btn, .ui-clr) { width: 100% !important; max-width: none !important; min-width: 0 !important; }
html body.tnui .fgi.gb-dd .gb-btn, html body.tnui .fgi .gb-dd .gb-btn { width: 100%; min-width: 0; }
html body.tnui .fgi .zp-groupby, html body.tnui .zp-groupby.fgi { margin: 0 !important; padding: 0 !important; }
html body.tnui .zp-groupby.fgi { display: block !important; }
html body.tnui .fgi.gb-dd { position: relative; }
html body.tnui .fgi.fg-wide.fg-wide.fg-wide.fg-wide.fg-wide.fg-wide { flex: 1 1 100% !important; }

/* ==========================================================================
   Toolbars that carry extra controls next to "Rows" (date range, CLI search, a Search button):
   they wrap instead of running off the edge of their card
   ========================================================================== */
body.tnui :is(.dt-toolbar, .ui-legacy-tb, .tn-tb) > div:not(.dt-export):not(.tn-exp), body.tnui .ui-lt-rows { flex-wrap: wrap !important; row-gap: var(--ui-s2); max-width: 100%; min-width: 0; }
@media (max-width: 720px) {
  body.tnui :is(.dt-toolbar, .ui-legacy-tb) > div:not(.dt-export):not(.tn-exp) > :is(input:not([type="checkbox"]):not([type="radio"]), .btn, button),
  body.tnui .ui-lt-rows > :is(input:not([type="checkbox"]):not([type="radio"]), .btn, button) {
    flex: 1 1 130px; width: auto !important; min-width: 0 !important; max-width: 100%;
  }
  body.tnui :is(.dt-toolbar, .ui-legacy-tb) > div:not(.dt-export):not(.tn-exp) > label, body.tnui .ui-lt-rows > label { flex: 0 0 auto; }
}


/* Bulk Allocation: tick lists for receivers and ranges, and a preview that does the sum */
body.tnui .alloc-box { max-height: 220px; overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-r-md); padding: var(--ui-s1); background: var(--ui-card); }
body.tnui .alloc-all { display: flex; align-items: center; gap: var(--ui-s2); margin: var(--ui-s2) 0; font-size: var(--ui-fs-sm); color: var(--ui-ink-2); cursor: pointer; }
body.tnui .alloc-row { display: flex !important; align-items: center; gap: var(--ui-s2); padding: 6px 8px !important; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-md); cursor: pointer; }
body.tnui .alloc-row:hover { background: var(--ui-tint); }
body.tnui .alloc-rrow .alloc-rname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tnui .alloc-rrow .alloc-rmeta { flex: 0 0 auto; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
body.tnui .alloc-sum { display: flex; flex-direction: column; align-items: center; gap: var(--ui-s2); padding: var(--ui-s6) var(--ui-s4); text-align: center; }
body.tnui .alloc-sum-big { font-size: 40px; font-weight: 800; color: var(--ui-primary); line-height: 1.1; }
body.tnui .alloc-sum-sub { color: var(--ui-muted); font-size: var(--ui-fs-md); }
body.tnui .alloc-sum-eq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--ui-s2) var(--ui-s3); margin-top: var(--ui-s3); }
body.tnui .alloc-sum-eq span { padding: 6px 12px; border-radius: 999px; background: var(--ui-tint); color: var(--ui-tint-ink); font-size: var(--ui-fs-md); }
body.tnui .alloc-sum-eq i { font-style: normal; color: var(--ui-muted); }
body.tnui .alloc-sum-note { margin-top: var(--ui-s3); max-width: 340px; font-size: var(--ui-fs-sm); color: var(--ui-muted); }

/* invoice summary cards: one line per currency */
body.tnui .ui-isum b.is-multi { display: flex; flex-direction: column; gap: 2px; font-size: 19px; }
body.tnui .ui-isum .ui-isum-cur { font-style: normal; display: flex; align-items: baseline; gap: 8px; }
body.tnui .ui-isum .ui-isum-cur i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ui-muted); min-width: 28px; }