/* INVOICES. Page: /ui/invoices-page.js. Tokens and components: /ui/rl-ui.css;
   the page frame: /ui/rl-page.css.

   A ledger, so the design answers three questions in order: what am I owed,
   what is late, and what do I do about this one. The figures carry the first
   two; a row is a sentence that answers the third. */

.rlx.iv-pg{overflow:hidden}

/* ── the figures ──────────────────────────────────────────────────────────
   Money first, at a size you can read across the room. Overdue is the only
   one allowed to wear a colour, because it is the only one that asks for
   something today. */
.rlx .iv-figs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.rlx .iv-fig{position:relative;overflow:hidden;padding:14px 16px 15px;border-radius:var(--rl-r16);
  background:linear-gradient(180deg,#fff,#fcfcfe);box-shadow:var(--rl-sh-xs),inset 0 0 0 1px var(--rl-line)}
.rlx .iv-fig::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,transparent)}
.rlx .iv-fig b{display:block;font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--rl-ink);
  font-variant-numeric:tabular-nums}
.rlx .iv-fig span{display:block;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--rl-ink2)}
.rlx .iv-fig i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--rl-ink4)}
.rlx .iv-fig.is-overdue{--c:var(--rl-warn)}
.rlx .iv-fig.is-overdue b{color:var(--rl-warn)}
.rlx .iv-fig.is-paid{--c:var(--rl-ok)}
.rlx .iv-warn{flex:none;margin-bottom:14px}
.rlx .iv-warn .rl-btn{flex:none;align-self:center}

/* ── the list ─────────────────────────────────────────────────────────────
   One grid for the column heads and every row, so nothing can drift out of
   line. A row is not a table row: it is a name, a number, a state and a
   sentence about what is happening to it. */
.rlx .iv-hd,.rlx .iv-row{display:grid;grid-template-columns:minmax(0,1.5fr) 128px 156px minmax(0,1.7fr) auto;
  gap:16px;align-items:center}
.rlx .iv-hd{padding:9px 16px;border-bottom:1px solid var(--rl-line);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .iv-hd .a{text-align:right}
.rlx .iv-rows{padding-bottom:6px}
.rlx .iv-row{padding:13px 16px;border-bottom:1px solid var(--rl-line);cursor:pointer;transition:background .12s}
.rlx .iv-row:hover{background:var(--rl-surface2)}
.rlx .iv-row:focus-visible{outline:0;background:var(--rl-surface2);box-shadow:inset 3px 0 0 var(--rl-acc)}
.rlx .iv-row.is-flag{background:color-mix(in srgb,var(--rl-warn) 5%,#fff)}
.rlx .iv-row .who{min-width:0}
.rlx .iv-row .who b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--rl-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .iv-row .who .sub{display:block;margin-top:2px;font-size:12px;color:var(--rl-ink4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .iv-row .amt{text-align:right;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .iv-row .ln{min-width:0;font-size:12.5px;line-height:1.5;color:var(--rl-ink3)}
.rlx .iv-row .act{display:flex;align-items:center;gap:6px;justify-content:flex-end}
/* The row's own action appears on hover on a pointer, and is always there on
   touch — a button that only exists on hover is a button a phone cannot press. */
@media (hover: hover) and (pointer: fine){
  .rlx .iv-row .act .rl-btn:not([data-act="menu"]){opacity:0;transition:opacity .12s}
  .rlx .iv-row:hover .act .rl-btn,.rlx .iv-row:focus-within .act .rl-btn{opacity:1}
}

/* The state pill. The dot carries the colour; the words stay calm. */
.rlx .iv-pill{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px 0 8px;border-radius:999px;
  font-size:11px;font-weight:700;white-space:nowrap;color:var(--rl-ink3);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair)}
.rlx .iv-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.rlx .iv-pill.is-paid{color:var(--rl-ok);background:color-mix(in srgb,var(--rl-ok) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-ok) 20%,transparent)}
.rlx .iv-pill.is-overdue{color:var(--rl-warn);background:color-mix(in srgb,var(--rl-warn) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-warn) 26%,transparent)}
.rlx .iv-pill.is-sent{color:var(--rl-info);background:color-mix(in srgb,var(--rl-info) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-info) 20%,transparent)}
.rlx .iv-pill.is-cancelled{color:var(--rl-ink4)}

.rlx .iv-row.is-skel{cursor:default;pointer-events:none}
.rlx .iv-row.is-skel .who b{width:56%;height:12px;border-radius:5px;background:var(--rl-surface3)}
.rlx .iv-row.is-skel .who .sub{width:38%;height:9px;margin-top:6px;border-radius:5px;background:var(--rl-surface2)}
.rlx .iv-row.is-skel .amt,.rlx .iv-row.is-skel .st,.rlx .iv-row.is-skel .ln{height:11px;border-radius:5px;background:var(--rl-surface2)}

.rlx .iv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:300px;padding:40px 24px;text-align:center}
.rlx .iv-empty svg{color:var(--rl-ink4);margin-bottom:6px}
.rlx .iv-empty b{font-size:15px;font-weight:700;color:var(--rl-ink)}
.rlx .iv-empty p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--rl-ink3);max-width:46ch}

/* ── the segmented filter ─────────────────────────────────────────────────*/
.rlx .iv-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--rl-r10);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .iv-seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--rl-r8);
  font-size:12.5px;font-weight:600;color:var(--rl-ink3);white-space:nowrap}
.rlx .iv-seg button:hover{color:var(--rl-ink)}
.rlx .iv-seg button.is-on{color:var(--rl-ink);background:var(--rl-surface);box-shadow:var(--rl-sh-xs)}
.rlx .iv-seg button i{font-style:normal;font-size:11px;color:var(--rl-ink4);font-variant-numeric:tabular-nums}
.rlx .iv-seg button.is-on i{color:var(--rl-ink3)}
.rlx .iv-seg.is-sm button{height:26px;padding:0 10px;font-size:12px}
.rlx .rl-res-hd .iv-seg{margin-left:auto}

/* ── the editor ───────────────────────────────────────────────────────────*/
.rlx .iv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rlx .iv-items{padding:14px;border-radius:var(--rl-r12);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .iv-items-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.rlx .iv-items-h b{font-size:13px;font-weight:700}
.rlx .iv-items-h .sp{flex:1}
.rlx .iv-incl{background:var(--rl-surface);margin-bottom:10px}
.rlx .iv-itbl{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.rlx .iv-ith,.rlx .iv-itrow{display:grid;grid-template-columns:minmax(0,1fr) 74px 104px 78px 96px 32px;gap:7px;align-items:center}
.rlx .iv-items:has([data-k="taxRate"]) .iv-ith,.rlx .iv-items:has([data-k="taxRate"]) .iv-itrow{grid-template-columns:minmax(0,1fr) 74px 104px 78px 96px 32px}
.rlx .iv-items:not(:has([data-k="taxRate"])) .iv-ith,.rlx .iv-items:not(:has([data-k="taxRate"])) .iv-itrow{grid-template-columns:minmax(0,1fr) 74px 104px 96px 32px}
.rlx .iv-ith{padding:0 2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .iv-ith .n{text-align:right}
.rlx .iv-itrow .rl-ipt{height:38px;min-height:38px!important;font-size:13px!important}
.rlx .iv-itrow .rl-ipt.n{text-align:right}
.rlx .iv-itrow .amt{text-align:right;font-size:13px;font-weight:700;color:var(--rl-ink);font-variant-numeric:tabular-nums}

/* The total is what the panel is about, so it reads like a receipt rather
   than a box in a corner. */
.rlx .iv-sum{margin-left:auto;width:min(340px,100%);padding:14px 16px;border-radius:var(--rl-r12);
  background:var(--rl-surface);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .iv-sum .r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;font-size:13px;color:var(--rl-ink2)}
.rlx .iv-sum .r b{font-weight:700;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .iv-sum .r .rl-ipt{width:118px;height:34px;min-height:34px!important;text-align:right;font-size:13px!important}
.rlx .iv-sum .r.is-total{margin-top:6px;padding-top:11px;border-top:1px solid var(--rl-ink);font-size:15px;color:var(--rl-ink)}
.rlx .iv-sum .r.is-total b{font-size:19px;letter-spacing:-.03em}

/* ── the business profile ─────────────────────────────────────────────────*/
.rlx .iv-grp{margin:6px 0 -2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .iv-grp:first-child{margin-top:0}
.rlx .iv-sub{display:flex;flex-direction:column;gap:12px;margin:-2px 0 0 0;padding:14px;border-radius:var(--rl-r12);
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .iv-sub .rl-rowline{background:var(--rl-surface)}
.rlx .iv-map:not(:empty){margin-top:2px}

@media (max-width: 1080px){
  .rlx .iv-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .iv-hd,.rlx .iv-row{grid-template-columns:minmax(0,1.4fr) 110px 150px auto}
  .rlx .iv-hd span:nth-child(4),.rlx .iv-row .ln{display:none}
}
@media (max-width: 760px){
  .rlx .iv-prof{width:38px;padding:0;justify-content:center}
  .rlx .iv-figs{gap:10px;margin-bottom:12px}
  .rlx .iv-fig{padding:12px 13px}
  .rlx .iv-fig b{font-size:20px}
  /* A row becomes a card: the money and the state on top, who it is under
     them, and the sentence back — on a phone there is room for it again. */
  .rlx .iv-hd{display:none}
  .rlx .iv-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px}
  .rlx .iv-row .amt{order:1;text-align:left;font-size:17px}
  .rlx .iv-row .st{order:2;text-align:right}
  .rlx .iv-row .who{order:3;grid-column:1 / -1}
  .rlx .iv-row .ln{order:4;display:block;grid-column:1 / -1;margin-top:3px}
  .rlx .iv-row .act{order:5;grid-column:1 / -1;justify-content:flex-start;margin-top:9px}
  .rlx .iv-row .act .rl-btn{opacity:1}
  .rlx .rl-res-hd{flex-wrap:wrap}
  .rlx .rl-res-hd .iv-seg{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .rlx .rl-res-hd .iv-seg::-webkit-scrollbar{display:none}
  .rlx .rl-res-hd .iv-seg button{flex:none}
  .rlx .iv-two{grid-template-columns:minmax(0,1fr)}
  .rlx .iv-ith{display:none}
  .rlx .iv-items:has([data-k="taxRate"]) .iv-itrow,
  .rlx .iv-items:not(:has([data-k="taxRate"])) .iv-itrow{grid-template-columns:repeat(2,minmax(0,1fr)) 32px;gap:6px}
  .rlx .iv-itrow .rl-ipt:first-child{grid-column:1 / -1}
  .rlx .iv-itrow .amt{grid-column:1 / span 2;text-align:left;color:var(--rl-ink3)}
  .rlx .iv-sum{width:100%}
  .rlx .iv-warn{flex-wrap:wrap}
  .rlx .iv-warn .rl-btn{margin-left:29px}
}