/* Phase 2 – invoices (public/js/pages/invoices.js). Classes are prefixed iv-; only tokens from theme.css. Look follows UI mockup 2
   (calm white cards, soft pills, solid teal create buttons). No all-caps labels, no thick coloured left borders. Phone: the line grid
   becomes one compact card per line (390 px without horizontal scrolling). */

.iv-gap { margin-bottom: 14px; } .iv-gap-top { margin-top: var(--gap); }
.iv-kpis { margin-bottom: var(--gap); }
.iv-kpis .kpi .val { font-size: 22px; font-variant-numeric: tabular-nums; }
.iv-steps { margin-bottom: 14px; }

/* soft pills (overdue, credit note, proof number, released) */
.iv-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: var(--neutral-bg); color: var(--text-2); text-decoration: none; vertical-align: middle; }
.iv-pill.ok { background: var(--st-done-bg); color: var(--st-done); } .iv-pill.warn { background: var(--st-progress-bg); color: var(--st-progress); }
.iv-pill.err { background: var(--st-cancelled-bg); color: var(--st-cancelled); } .iv-pill.info { background: var(--st-planned-bg); color: var(--st-planned); }

.iv-gaps { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-sm); }
.iv-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); }

/* line grid (editor) */
.iv-grid { display: flex; flex-direction: column; }
.iv-row { display: grid; grid-template-columns: 34px minmax(180px, 1fr) 84px 96px 84px 104px 108px 108px; gap: 8px; align-items: start; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.iv-head { padding-top: 10px; padding-bottom: 10px; background: var(--th-bg); color: var(--th-ink); font-size: var(--fs-xs); font-weight: 650; align-items: center; }
.iv-head .r, .iv-row .r { text-align: right; }
.iv-pos { padding-top: 8px; color: var(--text-3); font-weight: 650; font-variant-numeric: tabular-nums; }
.iv-desc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iv-desc textarea { min-height: 38px; resize: vertical; }
.iv-linked { display: inline-flex; gap: 4px; align-items: center; }
.iv-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-cell .input { width: 100%; min-width: 0; }
.iv-lbl { display: none; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.iv-sum { align-items: flex-end; padding-top: 8px; font-variant-numeric: tabular-nums; }
.iv-tools { display: flex; gap: 2px; justify-content: flex-end; padding-top: 2px; }
.iv-add { padding: 12px 18px; }
.iv-tbl td { vertical-align: top; } .iv-desc-ro { white-space: pre-line; min-width: 220px; }

/* totals */
.iv-totals-wrap { display: flex; justify-content: flex-end; padding: 14px 18px 18px; border-top: 1px solid var(--border); }
.iv-totals { width: min(100%, 380px); }
.iv-sum-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: var(--fs-sm); }
.iv-sum-dl dt { color: var(--text-2); } .iv-sum-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.iv-sum-dl .iv-total { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border-strong); font-weight: 750; font-size: var(--fs-md); color: var(--text); }

/* side cards */
.iv-actions .iv-btns { display: flex; flex-direction: column; gap: 8px; }
.iv-actions .iv-btns .btn { justify-content: center; width: 100%; }
.iv-paid { color: var(--success); display: flex; gap: 6px; align-items: center; }
.iv-addr { white-space: pre-line; color: var(--text-2); margin: 4px 0 10px; }
.iv-cu-dl { margin-bottom: 12px; }
.iv-hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.iv-hash code { overflow-wrap: anywhere; }
.iv-jobs li { display: flex; gap: 8px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.iv-jobs li:last-child { border-bottom: 0; }
.iv-job-main { flex: 1; min-width: 0; }
.iv-sends li { display: flex; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); } .iv-sends li:last-child { border-bottom: 0; }
.iv-send-main { min-width: 0; flex: 1; }
.iv-mail-prev { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }

/* from jobs */
.iv-jobs-tbl tr.iv-off td { color: var(--text-3); }
.iv-reason { color: var(--st-progress); }
.iv-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .iv-foot .btn { margin-left: auto; }

@media (max-width: 980px) {
  .iv-row { grid-template-columns: 30px minmax(0, 1fr) 76px 90px 76px 96px 100px 40px; }
  .iv-tools [data-move] { display: none; }
}
/* phone: one card per line */
@media (max-width: 720px) {
  .iv-head { display: none; }
  .iv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: 'desc desc desc desc' 'qty unit tax price' 'sum sum tools tools'; padding: 12px 14px; row-gap: 10px; column-gap: 6px; }
  .iv-pos { display: none; } .iv-desc { grid-area: desc; }
  .iv-qty { grid-area: qty; } .iv-unit { grid-area: unit; } .iv-tax { grid-area: tax; } .iv-price { grid-area: price; }
  .iv-sum { grid-area: sum; flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; justify-content: flex-start; }
  .iv-cell .input.sm { padding-left: 6px; padding-right: 6px; }
  .iv-tools { grid-area: tools; }
  .iv-lbl { display: block; }
  .iv-sum .iv-lbl { display: inline; }
  .iv-totals-wrap { padding: 12px 14px 14px; }
  .iv-desc-ro { min-width: 160px; }
  .iv-foot .btn { width: 100%; margin-left: 0; justify-content: center; }
}
@media (max-width: 1100px) { .iv-detail .cols-2-1 { grid-template-columns: minmax(0, 1fr); } }
.iv-detail .cols-2-1 > * { min-width: 0; }