/* ECR Connect — invoices (2026-10-05), from the approved mockup: on a client's panel, on a
   lead, and the Invoices screen. ECR's site only; Sam's site never loads this. Built on the
   Leads screen's pieces (ecr-leads.css, always loaded with it). */

#invApp[hidden] { display: none; }
#invApp { max-width: 1000px; margin: 0 auto; font-size: 14px; }
.iv-main { display: flex; flex-direction: column; gap: 14px; }

.iv-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.iv-note { font-size: 12px; color: var(--dk-ink-2, var(--gray)); }
.iv-section { display: flex; flex-direction: column; gap: 10px; }

/* The three totals. Each colour is told apart by lightness as well as hue, and every text
   colour clears 4.5:1 on its own tile. */
.iv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.iv-tile { border: 1px solid; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.iv-tile b { font-size: 18px; font-weight: 800; }
.iv-tile span { font-size: 12px; }
.iv-tile .iv-tile-label { font-weight: 700; }
.iv-tiles .iv-overdue { border-color: var(--dk-bad-line, #f2d3cf); background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); }
.iv-tiles .iv-open { border-color: var(--dk-warn-line, #f0e0b8); background: var(--dk-warn-soft, #fff8e8); color: var(--dk-warn-text, #7a4f00); }
.iv-tiles .iv-paid { border-color: var(--dk-good-line, #cfe6d6); background: var(--dk-good-soft, #eef8f1); color: var(--dk-good-text, #1d6b3a); }

.iv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-pills button { border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); font: 700 12.5px Helvetica, Arial, sans-serif;
  padding: 6px 12px; border-radius: 999px; min-height: 32px; cursor: pointer; }
.iv-pills button[aria-pressed="true"] { border-color: var(--dk-accent-line, var(--purple)); background: var(--purple); color: #fff; }

.iv-list { display: flex; flex-direction: column; }
.iv-item { border-bottom: 1px solid var(--dk-line, #eef2f3); }
.iv-item.iv-expanded { border: 1.5px solid var(--dk-accent-line, var(--purple)); border-radius: 10px; margin: 4px 0; }
.iv-head { width: 100%; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px;
  border: 0; background: transparent; text-align: left; cursor: pointer; font: 14px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.iv-head:hover { background: var(--dk-tint-accent, #faf9fd); }
.iv-expanded .iv-head { background: var(--dk-tint-accent, #faf9fd); border-radius: 10px 10px 0 0; }
.iv-num { font-weight: 700; color: var(--dk-accent-text, var(--purple)); }
.iv-who { display: flex; flex-direction: column; min-width: 0; }
.iv-who b { font-weight: 600; overflow-wrap: anywhere; }
.iv-who span { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.iv-chip { justify-self: end; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.iv-chip-overdue { color: var(--dk-bad-text, #9a2617); background: var(--dk-bad-soft, #fdf0ee); }
.iv-chip-open { color: var(--dk-warn-text, #7a4f00); background: var(--dk-warn-soft, #fff8e8); }
.iv-chip-paid { color: var(--dk-good-text, #1d6b3a); background: var(--dk-good-soft, #eef8f1); }
.iv-more { padding: 10px 12px 12px; border-top: 1px solid var(--dk-accent-line-soft, #ece8f6); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.iv-more[hidden] { display: none; }
.iv-facts { margin: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 10px; }
.iv-facts dt { color: var(--dk-ink-2, var(--gray)); }
.iv-facts dd { margin: 0; overflow-wrap: anywhere; }
#invApp .iv-list { background: var(--dk-surface, #fff); border: 1px solid var(--dk-accent-line-soft, #e6e2f2); border-radius: 12px; padding: 4px 8px; }
#ivList[aria-busy="true"] { opacity: .45; transition: opacity .15s; }