/* Sacred Command Center · invoices module styles. Owned by the new-modules agent. Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2).
   The board and the record page reuse the Leads and Projects classes (css/modules/leads.css, projects.css). */
.module--invoices .rp-id { flex: 0 1 17rem; }
.module--invoices .rp-facts { flex: 1 1 26rem; gap: var(--s-2) var(--s-4); }
.module--invoices .rs-grid:empty { display: none; }
.view:has(.module--invoices .rp .lv-main) { height: auto; overflow: visible; display: block; }

/* The money strip: the tiles above the AR board, Invoices and Aging. Each reads Not connected until a billing source is confirmed. */
.inv-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); padding: var(--s-1) 0 var(--s-2); min-width: 0; }
.inv-tile { display: inline-flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.inv-tile-l { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.inv-tile-v { font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.inv-strip-s { margin-left: auto; }
.inv-strip > .state { white-space: normal; }
.inv-strip > .state .state-why { margin-left: var(--s-1); }

/* Aging */
.inv-aging { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.inv-aging-t { max-width: 44rem; }
.inv-aging-t .table-wrap { height: auto; }

/* On a phone the page head already says "Not connected. Billing source not confirmed.", so the strip would say it three more times. */
@media (max-width: 719px) { .inv-strip { display: none; } }

/* ── Late payments (F9): every part is off, so the page says what is planned and what each part waits on ──────────────────── */
.inv-bd { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.inv-late { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; max-width: 72rem; }
.inv-late-top { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.inv-late-sw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.inv-late-sw .eyebrow { margin: 0; }
.inv-why { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding-left: var(--s-4); list-style: disc; color: var(--text-2); max-width: var(--measure); }
.inv-why b { color: var(--text); }
.inv-c18 { margin: 0; max-width: var(--measure); }
.inv-d { margin: 0; max-width: var(--measure); }
.inv-off { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.inv-rules { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 0 var(--s-3); }
.inv-rules .table-wrap { height: auto; border: 0; border-radius: 0; }
.inv-thr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: 0 var(--s-3); }
.inv-thr .field { max-width: 22rem; }
.inv-thr-in { width: 8rem; font-variant-numeric: tabular-nums; }
.inv-thr .caption { margin: 0; max-width: var(--measure); }
.inv-agree { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-button); color: var(--text); max-width: var(--measure); }
.inv-agree .i, .inv-agree .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent-mark); stroke-width: 1.75; }
.inv-notices, .inv-dry { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); }
.inv-nl { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.inv-notice { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); max-width: var(--measure); }
.inv-notice-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.inv-notice-s { color: var(--text); }
.inv-copy { margin-top: var(--s-1); padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-button); color: var(--text-2); }
.inv-copy p { margin: 0 0 var(--s-2); white-space: pre-line; overflow-wrap: anywhere; }
.inv-copy p:last-child { margin-bottom: 0; }
.inv-ph { max-width: var(--measure); }
.inv-ph dt { font-family: inherit; font-weight: 700; color: var(--text); }
.inv-dry-form { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(8rem, 1fr) minmax(9rem, 1fr) auto; align-items: end; gap: var(--s-2) var(--s-3); }
.inv-dry-form .input { width: 100%; }
.inv-dry-add { display: flex; align-items: flex-end; }
.inv-dry-as { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); }
.inv-dry-as .field { min-width: 10rem; }
.inv-dry-t .table-wrap { height: auto; }
.inv-sd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.inv-would { color: var(--text); font-weight: 700; }
.inv-lines { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.inv-lines li { color: var(--text-2); }
.inv-lines li.is-today { color: var(--text); font-weight: 700; }
.inv-lines li.is-past { color: var(--text-3); }
.inv-dry-sum { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); max-width: var(--measure); }
.inv-dry-clear { display: flex; }
@media (max-width: 719px) {
  .inv-late-top { padding: var(--s-3); }
  .inv-dry-form { grid-template-columns: minmax(0, 1fr); }
  .inv-dry-add .btn { width: 100%; }
  .inv-notices, .inv-dry { padding: var(--s-3) var(--s-2); }
}

/* Cells that carry a sentence or a list wrap instead of cutting it (the kit's Table cuts a cell at one line). */
.inv-wrap .td { height: auto; min-height: var(--row-h); padding-top: var(--s-2); padding-bottom: var(--s-2); white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; overflow-wrap: anywhere; }
.inv-wrap .td .inv-lines li { overflow-wrap: anywhere; }

/* ── New invoice (W2): the sheet, laid out as Option B, the Work Order ───────────────────────────────────────────────────────── */
.inv-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.inv-form-h { margin: var(--s-2) 0 calc(var(--s-2) * -1); }
.inv-billto { display: flex; flex-direction: column; gap: var(--s-3); }
.inv-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.inv-row2 { align-items: start; }
.inv-due-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.inv-due-row .input { flex: 1 1 8rem; min-width: 0; }
.inv-net { max-width: 7rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { #inv-sheet.sheet--wide { width: min(820px, calc(100vw - var(--s-3))); } }
.inv-ta { min-height: 72px; }
.inv-job-note { margin: 0; max-width: var(--measure); }
#inv-sheet .sheet-f .inv-send-why { flex: 1 1 14rem; min-width: 0; }
.inv-err { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-left: 3px solid var(--accent-mark); border-radius: var(--r-button); color: var(--text); font-weight: 600; }
.inv-err .i, .inv-err .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent-mark); stroke-width: 1.75; }

/* client search: the matches as a short list under the field, the chosen client as a line with Change */
.inv-client-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-button); overflow: hidden; }
.inv-client-list li + li { border-top: 1px solid var(--line); }
.inv-client-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); text-align: left; color: var(--text); font-weight: 600; }
.inv-client-b:hover, .inv-client-b:focus-visible { background: var(--hover); }
.inv-client-none { padding: var(--s-2) var(--s-3); }
.inv-client-chosen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-height: var(--tap); align-content: center; }
.inv-client-chosen b { font-size: var(--fs-h3); color: var(--text); }

/* the lines: Description, Qty, Rate, Amount, remove; a numbered row like the printed work order */
.inv-wo { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.inv-wo-h, .inv-wo-line { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 4.5rem 7.5rem 7.5rem 2.75rem; gap: var(--s-2); align-items: start; }
.inv-wo-h { padding: 0 0 var(--s-1); border-bottom: 2px solid var(--line-strong); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.inv-wo-h span:first-child { grid-column: 2; }
.inv-wo-h span:nth-child(2), .inv-wo-h span:nth-child(3), .inv-wo-h span:nth-child(4) { text-align: right; }
.inv-wo-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.inv-wo-line { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.inv-wo-n { align-self: center; color: var(--accent-mark); font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-wo-c { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.inv-wo-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-wo-q .input, .inv-wo-p .input { text-align: right; font-variant-numeric: tabular-nums; }
.inv-wo-a { align-self: center; align-items: flex-end; font-weight: 700; color: var(--text); }
.inv-wo-x { align-self: center; }
.inv-wo-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-top: var(--s-1); }
.inv-wo-total { display: flex; align-items: baseline; gap: var(--s-4); margin-left: auto; padding-top: var(--s-2); border-top: 2px solid var(--line-strong); font-weight: 700; color: var(--text); }
.inv-wo-total b { font-size: var(--fs-h3); }
@media (max-width: 719px) {
  .inv-row2 { grid-template-columns: minmax(0, 1fr); }
  .inv-wo-h { display: none; }
  .inv-wo-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto 2.75rem; grid-template-areas: 'name name name x' 'q p a a'; row-gap: var(--s-2); }
  .inv-wo-n { display: none; } .inv-wo-name { grid-area: name; } .inv-wo-q { grid-area: q; } .inv-wo-p { grid-area: p; } .inv-wo-a { grid-area: a; align-self: end; padding-bottom: var(--s-3); } .inv-wo-x { grid-area: x; }
  .inv-wo-q .inv-wo-l, .inv-wo-p .inv-wo-l { position: static; width: auto; height: auto; clip: auto; font-size: var(--fs-caption); color: var(--text-3); }
  .inv-wo-total { width: 100%; justify-content: space-between; }
}

/* the invoice page: why Send is off, written under the card */
.inv-rec-why { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); color: var(--text-2); }
.inv-rec-why .i, .inv-rec-why .icon { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.module--invoices > .rp > .rp-cols .inv-err { margin-bottom: var(--s-3); }

/* the phone's floating +: on Invoices & AR it makes an invoice, in place of the shell's capture button */
.app:has(#main .inv-fab) .fab:not(.inv-fab) { display: none; }