/* Receivables table, ported from the 1280 mockup Shrish approved on 2026-10-05
   (docs/design/2026-10-05-receivables-table-1280-mockup.html, wcs-rcvtable lane).
   Markup and tokens come from the mockup; every rule is scoped to #table so the phone cards
   and the other rooms keep their own styles. Mockup tokens live on #table, not :root: the
   live re-theme is its own lane. Deliberate departures, each forced by a frozen RCVUX-1 gate:
   money cells keep an 8px gutter both sides (T4), the head band keeps the app's compact
   label size and a one-line totals row (T1), the handler select stays the control under
   the chip and is 44px tall on a coarse pointer (T14). */

#table {
  --rt-ink: #1D3C5A; --rt-ink-2: #202522; --rt-ink-soft: #5B6670; --rt-muted: #68716C;
  --rt-line: #DDE2DE; --rt-line-soft: #EBEEEC; --rt-surface-2: #F0F2F0;
  --rt-forest: #2A5D3C; --rt-tint: #C4E4D7; --rt-navy: #1D3C5A;
  --rt-accent-soft: #EAF5EF; --rt-mint-row: #EEF8F3;
  --rt-warn: #A65B08; --rt-risk: #B42318;
  --rt-b0: #C4E4D7; --rt-b1: #5EBB8C; --rt-b2: #F2B544; --rt-b3: #E07B24; --rt-b4: #C8372D;
  --rt-head-bg: #FAFBFA; --rt-hover: #F7F9F8; --rt-picked: #F2F9F5; --rt-btn-bg: #FFFFFF;
  --rt-today-bg: #FDF1E1; --rt-dash: #B9C3BD; --rt-on-risk: #FFFFFF;
}
/* Dark theme: the mockup is light only, so dark maps each token onto the app's dark tokens. */
html.dark #table {
  --rt-ink: var(--ink); --rt-ink-2: var(--ink); --rt-ink-soft: var(--ink-soft); --rt-muted: var(--muted);
  --rt-line: var(--line); --rt-line-soft: var(--line); --rt-surface-2: var(--surface-2);
  --rt-forest: var(--accent-ink); --rt-tint: var(--accent-soft); --rt-navy: var(--accent-ink);
  --rt-accent-soft: var(--accent-soft);
  /* opaque, so the detail cell and the .rt-expand on it composite to the row's colour */
  --rt-mint-row: color-mix(in srgb, var(--accent) 14%, var(--raised));
  --rt-warn: var(--warn); --rt-risk: var(--risk);
  --rt-head-bg: var(--raised); --rt-hover: var(--surface-2); --rt-picked: var(--accent-soft); --rt-btn-bg: var(--surface);
  --rt-today-bg: rgba(245,158,11,.16); --rt-dash: var(--muted); --rt-on-risk: #0d1413;
}
.rt-b0 { background: var(--rt-b0); } .rt-b1 { background: var(--rt-b1); } .rt-b2 { background: var(--rt-b2); }
.rt-b3 { background: var(--rt-b3); } .rt-b4 { background: var(--rt-b4); }
/* visually hidden, still in the DOM and the accessibility tree; the table view's Remind label and
   caret text read through it too (#1032) */
.rt-sr,
#table td.col-fu .rj-remind-btn > .rj-remind-txt,
#table > tbody > tr.expandable > td.nm .nm-toggle > .nm-glyph { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- columns: the mockup's width math at 1280, Notes takes the rest ----------
   Every measure stays on the one 8px statement scale (LANED-1): the variables change, the
   width rules in styles.css that read them stay live. */
@media (min-width: 601px) {
  #table {
    --statement-column-action: calc(var(--statement-column-unit) * 3.5);   /* 28 */
    --statement-column-customer: calc(var(--statement-column-unit) * 25);  /* 200 */
    --statement-column-handler: calc(var(--statement-column-unit) * 6);    /* 48 */
    /* T4 keeps an 8px gutter both sides of every figure; a crore total needs 112px at the
       app's type size, so money is 112 (mockup 104) and Notes gives up the 16px. */
    --statement-column-money: calc(var(--statement-column-unit) * 14);     /* 112 */
    --statement-column-aging: calc(var(--statement-column-unit) * 24);     /* 192 */
    --statement-column-followup: calc(var(--statement-column-unit) * 15.75); /* 126 */
    --statement-column-notes: auto;
  }
  #table th.col-aging { width: var(--statement-column-aging); }
  #table th.col-fu { width: var(--statement-column-followup); }
  #table td.col-select { padding: 0 0 0 10px; text-align: left; }
}
/* Below 1280 the sidebar collapses and the wrapper is about 980px down to the 940 floor:
   Customer gives up 40px so Notes keeps a readable line. */
@media (min-width: 601px) and (max-width: 1279px) {
  #table { --statement-column-customer: calc(var(--statement-column-unit) * 20); } /* 160 */
}

/* ---------- head ---------- */
#table > thead > tr:first-child > th { color: var(--rt-muted); border-bottom: 1px solid var(--rt-line); }
#table > thead > tr:first-child > th.sorted { color: var(--rt-ink); }
#table > thead > tr:first-child > th:not([data-sort])::after { content: none; }
#table th.col-net, #table th.col-aged { background: var(--raised); color: var(--rt-muted); }
#table th.col-handler .rt-ic { vertical-align: -2px; }
.rt-legend { display: inline-flex; gap: 3px; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rt-muted); }
.rt-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 1px; margin-right: 2px; vertical-align: -1px; }
#table > thead > tr.totals-row > td { background: var(--rt-head-bg); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--rt-line); }
#table > thead > tr.totals-row > td.col-net { color: var(--rt-ink); background: var(--rt-head-bg); }
#table > thead > tr.totals-row > td.col-aged { color: var(--rt-risk); background: var(--rt-head-bg); }
/* T1: the head band is one label line plus one totals line, so the totals Aged cell shows
   the 60+ figure and carries 30+ on its title. */
#table > thead > tr.totals-row > td.agm .v30 { display: none; }

/* ---------- rows: 40px, name plus contact line ---------- */
#table > tbody > tr.expandable > td { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle; border-bottom: 1px solid var(--rt-line-soft); }
#table > tbody > tr.expandable > td.nm { padding-left: 4px; padding-right: 4px; }
#table > tbody > tr.expandable:hover > td { background: var(--rt-hover); }
#table > tbody > tr.expandable:has(.row-select:checked) > td { background: var(--rt-picked); }
/* add-on 2 (mockup "one tint"): the open row and its detail share --rt-mint-row, and the :hover
   selector keeps hover (and the money cells' hover rule below) from repainting an open row. */
#table > tbody > tr.expandable:has([aria-expanded="true"]) > td,
#table > tbody > tr.expandable:has([aria-expanded="true"]):hover > td { background: var(--rt-mint-row); border-bottom-color: transparent; }
#table > tbody > tr.bill-detail > td { background: var(--rt-mint-row); }
#table td.nm .nm-name { font-weight: 600; color: var(--rt-ink-2); line-height: 17px; }
/* add-on 1 (mockup chevron): every row's caret draws the mockup's stroked chevron (ICON.chev,
   12px, stroke 1.5) as a ::before mask; the DC-1 factory's text caret (.nm-glyph) stays in the
   DOM, visually hidden by the .rt-sr rule, so its glyph and a11y facts are untouched. Direction is the glyph's rotation, as in
   the mockup: closed 90deg (down, muted), open -90deg (up, white on a filled forest square).
   One caret box for both states, 18px square; -5px left and 2px right keep the old 15px
   footprint so the name does not move; -2px top and bottom keep the 18px box out of the line
   height (an 18px inline box grew plain rows from 40px to 51px). The glyph is centred by absolute positioning, not a
   grid: the factory's text node was a second grid row and pushed the glyph 1.75px up. */
#table > tbody > tr.expandable > td.nm .nm-toggle {
  display: inline-block; position: relative; vertical-align: middle; width: 18px; height: 18px;
  margin: -2px 2px -2px -5px; color: transparent; line-height: 0; transform: none; transition: none;
}
#table > tbody > tr.expandable > td.nm .nm-toggle::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px;
  background: var(--rt-muted); transform: rotate(90deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#table > tbody > tr.expandable > td.nm[aria-expanded="true"] .nm-toggle {
  border-radius: 4px; background: var(--rt-forest);
}
#table > tbody > tr.expandable > td.nm[aria-expanded="true"] .nm-toggle::before { background: #FFFFFF; transform: rotate(-90deg); }
html.dark #table > tbody > tr.expandable > td.nm[aria-expanded="true"] .nm-toggle::before { background: #06201d; }
#table td.nm .nm-meta { font-size: var(--text-2xs); line-height: 14px; margin-top: 0; color: var(--rt-muted); }

/* money: no column tints in the mockup, figures carry the colour */
#table td.col-net { font-weight: 600; color: var(--rt-ink); background: transparent; }
#table tbody tr:hover td.col-net, #table tbody tr:hover td.col-aged { background: var(--rt-hover); }
#table td.col-aged { background: transparent; color: var(--rt-risk); font-weight: 500; }
#table td.agm { line-height: 15px; }
#table td.agm .v60 { display: block; color: var(--rt-risk); font-weight: 500; }
#table td.agm .v30 { display: block; color: var(--rt-warn); font-size: 11px; }

/* handler chip, the select laid over it stays the control */
#table > tbody > tr.expandable > td.handler-cell { min-width: 0; width: auto; padding-left: 8px; padding-right: 4px; }
#table .hchip-wrap { position: relative; display: inline-grid; }
#table .hchip { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--rt-tint); color: var(--rt-navy); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .03em; }
#table .hchip.none { background: transparent; border: 1px dashed var(--rt-dash); color: var(--rt-muted); font-weight: 600; }
#table .hchip-wrap .handler { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
#table .hchip-wrap:focus-within .hchip { outline: 2px solid var(--rt-forest); outline-offset: 1px; }

/* aging bar with the five-bucket hover tip */
#table td.col-aging { overflow: visible; }
#table .aging-wrap { position: relative; padding: 2px 0; cursor: default; }
#table .aging-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-2xs); line-height: 15px; white-space: nowrap; }
#table .aging-top .lbl { color: var(--rt-muted); }
#table .aging-top .lbl b { color: var(--rt-ink); font-weight: 600; }
#table .aging-top .pc { color: var(--rt-ink-soft); }
#table .bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--rt-line-soft); margin-top: 4px; gap: 1px; }
#table .bar span { display: block; height: 100%; min-width: 2px; }
#table .bar-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); background: #1F2528; color: #fff; border-radius: 8px; padding: 8px 10px; z-index: 50; font-size: var(--text-2xs); line-height: 1.5; min-width: 236px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); pointer-events: none; }
#table .aging-wrap:hover .bar-tip { display: block; }
#table .bar-tip .tr { display: grid; grid-template-columns: 12px 68px 1fr 34px; gap: 6px; align-items: center; white-space: nowrap; }
#table .bar-tip .sq { width: 9px; height: 9px; border-radius: 2px; }
#table .bar-tip .am { text-align: right; }
#table .bar-tip .pc { text-align: right; color: #A9B4B0; }
/* the first rows open their tip downward, under the sticky head */
#table > tbody > tr.expandable:nth-child(-n+8) .bar-tip { bottom: auto; top: calc(100% + 6px); }

/* notes (bigger notes, 2026-10-07 mockup): body size on two 18px lines inside the 40px row, full note on hover */
#table td.comments-cell { overflow: hidden; white-space: normal; padding-right: 10px; vertical-align: middle; }
#table .comments-cell .nt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; color: var(--rt-ink-soft); font-size: var(--text-sm); line-height: 18px; }
#table .comments-cell .nt b { color: var(--rt-ink-2); font-weight: 600; }
#table .comments-cell .nt.none { color: var(--rt-forest); font-weight: 600; opacity: .75; cursor: pointer; }

/* follow-up: bell (the row's Remind), date chip, note count */
#table td.col-fu { white-space: nowrap; overflow: hidden; padding-left: 6px; padding-right: 6px; }
#table .fu-in { display: flex; align-items: center; gap: 4px; }
#table td.col-fu .rj-remind-btn {
  flex: 0 0 auto; position: relative; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--rt-forest); border-radius: 6px; background: var(--rt-btn-bg); color: var(--rt-forest);
  line-height: 0; display: grid; place-items: center; cursor: pointer;
}
#table td.col-fu .rj-remind-btn::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V7a4 4 0 0 1 8 0v4l1 1.5H3Zm2.5 2.5a1.6 1.6 0 0 0 3 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V7a4 4 0 0 1 8 0v4l1 1.5H3Zm2.5 2.5a1.6 1.6 0 0 0 3 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
#table td.col-fu .rj-remind-btn:hover { background: var(--rt-accent-soft); }
#table td.col-fu .rj-remind-btn.quiet { border-color: var(--rt-line); color: var(--rt-muted); }
#table .dchip { display: inline-block; height: 22px; line-height: 22px; padding: 0 6px; border-radius: 6px; font-size: var(--text-2xs); font-weight: 500; background: var(--rt-accent-soft); color: var(--rt-forest); white-space: nowrap; }
#table .dchip.today { background: var(--rt-today-bg); color: var(--rt-warn); }
#table .dchip.over { background: var(--rt-risk); color: var(--rt-on-risk); }
#table .dchip.set { background: transparent; border: 1px dashed var(--rt-dash); color: var(--rt-muted); line-height: 20px; }
#table .ncount { font-size: var(--text-2xs); color: var(--rt-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }

/* coarse pointer (T14): the touch targets keep 44px without growing the row */
@media (pointer: coarse) {
  #table .hchip-wrap .handler { inset: auto; left: 0; top: 50%; width: 100%; height: 44px; min-height: 44px; transform: translateY(-50%); }
  #table td.col-fu .rj-remind-btn { width: 32px; height: 32px; }
}

/* header cells: the mockup's paddings (select 10px left, numbers 4px left) */
#table > thead > tr:first-child > th.col-select { padding: 3px 0 3px 10px; text-align: left; }
#table > thead > tr:first-child > th.num { padding-left: 4px; padding-right: 8px; }
#table > thead > tr:first-child > th.col-handler { padding: 3px 0 3px 14px; }
#table > thead > tr:first-child > th.col-aging { padding-left: 6px; padding-right: 4px; }

/* ---------- queue toolbar: the mockup's 48px chip row above the table ----------
   App tokens, not the #table ones, so light and dark both follow the shell. */
.rcv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.tb-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); font-size: var(--text-xs); white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
.tb-chip[hidden] { display: none; }
.tb-chip > svg { color: var(--muted); flex: 0 0 auto; }
.tb-chip b { color: var(--ink); font-weight: 600; }
.tb-chip label { cursor: pointer; }
.tb-chip select.handler-filter { border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; padding: 0 2px; height: 26px; min-width: 0; max-width: 112px; cursor: pointer; }
.tb-chip .overdue-wrap { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-soft); }
.tb-chip input.overdue-filter { width: 44px; height: 24px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
.tb-chip .x { border: 0; background: transparent; color: var(--muted); width: 20px; height: 20px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; padding: 0; flex: 0 0 auto; }
.tb-chip .x:hover, .tb-chip .x:focus-visible { background: var(--surface-2); color: var(--ink); }
.tb-add { position: relative; }
.chip-add { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; padding: 0; }
.chip-add:hover, .chip-add[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.add-menu { position: absolute; top: 34px; left: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.3); padding: 4px; z-index: 30; }
.add-menu[hidden] { display: none; }
.add-menu .menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: var(--text-xs); color: var(--ink); cursor: pointer; }
.add-menu .menu-item:hover, .add-menu .menu-item:focus-visible { background: var(--surface-2); outline: none; }
.add-menu .menu-item.on { font-weight: 600; }
.add-menu .menu-count { color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.add-menu .menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.tb-count { margin-left: auto; font-size: var(--text-2xs); color: var(--muted); white-space: nowrap; }
/* Mouse: the mockup's compact 30px chips and title-row controls. Touch keeps the shell's 44px floor. */
@media (pointer: fine) and (min-width: 721px) {
  .tb-chip select.handler-filter, .tb-chip input.overdue-filter { min-height: 0; }
  #queue-panel .filters .search { min-height: 0; height: 32px; width: 240px; padding: 0 10px; font-size: var(--text-xs); border-radius: 8px; }
  #queue-panel .filters #export-excel { min-height: 0; height: 32px; padding: 0 12px; font-size: var(--text-xs); border-radius: 8px; }
}
@media (pointer: coarse) {
  .tb-chip { height: auto; min-height: 44px; }
}
@media (max-width: 720px) {
  .tb-chip { height: auto; min-height: 44px; }
  .chip-add, .tb-chip .x { min-width: 44px; min-height: 44px; }
  .tb-count { margin-left: 0; }
}

/* ---------- in-row expand: the mockup's mint panel at the head of an open row ---------- */
#table .rt-expand { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 20px; align-items: start; background: var(--rt-mint-row); margin: -4px -12px 12px; padding: 4px 12px 12px 34px; border-bottom: 1px solid var(--rt-line); }
#table .rt-expand .bk { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-xs); background: transparent; }
/* add-on 3 (mockup mini header): sentence case, weight 500, 24px, a --rt-line hairline below */
#table .rt-expand .bk th { position: static; background: transparent; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rt-muted); text-align: left; height: 24px; padding: 0 8px; border-bottom: 1px solid var(--rt-line); }
#table .rt-expand .bk td { height: 30px; padding: 0 8px; border-bottom: 1px dashed var(--rt-tint); white-space: nowrap; background: transparent; }
#table .rt-expand .bk tr:last-child td { border-bottom: 0; }
#table .rt-expand .bk .r { text-align: right; font-variant-numeric: tabular-nums; }
#table .rt-expand .bk .sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
#table .rt-expand .note-card { background: var(--surface); border: 1px solid var(--rt-tint); border-radius: 10px; padding: 12px 14px; }
#table .rt-expand .note-card .k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rt-muted); margin-bottom: 4px; }
#table .rt-expand .note-card .when { font-size: var(--text-xs); color: var(--rt-muted); }
#table .rt-expand .note-card .when[hidden] { display: none; }
#table .rt-expand .note-card .txt { font-size: var(--text-sm); line-height: 1.45; color: var(--rt-ink-2); margin: 2px 0 10px; white-space: normal; }
#table .rt-expand .note-card .txt.none { color: var(--rt-muted); }
#table .rt-expand .remind-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rt-line-soft); }
#table .rt-expand .rt-remind { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rt-forest); background: var(--rt-forest); color: #fff; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
html.dark #table .rt-expand .rt-remind { color: #06201d; }
@media (pointer: coarse) { #table .rt-expand .rt-remind { min-height: 44px; } }
#table .rt-expand .bk thead th::after { content: none; }