/* ============================================================
   Getting paid: the Stripe connection (Settings), the invoice in a
   lead's Money section, and the Invoices screen. Tokens only, so both
   themes follow. The list borrows the Quotes rows on purpose: an
   invoice is the second half of a quote and should read like one.
   ============================================================ */

/* ------------------------------------------- connect card (Invoices) */

.payments-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-color: var(--line-2);
  box-shadow: inset 3px 0 0 var(--accent), var(--edge-top);
}
.payments-state { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.payments-title { margin: 0; font-size: var(--t-20, 1.25rem); font-weight: 650; color: var(--text); }
.payments-copy { margin: 0; font-size: var(--t-14); color: var(--text-2); max-width: 62ch; line-height: 1.55; }
.payments-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.payments-actions .btn { text-decoration: none; }

/* Once payments are on, the connection is one quiet line under the list. */
.payments-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-13);
}
.payments-line .btn { text-decoration: none; }

@media (max-width: 720px) {
  .payments-go { width: 100%; min-height: 48px; justify-content: center; font-size: var(--t-15); }
}

/* ---------------------------------------------- lead panel block */

.panel-invoice { margin-top: var(--s3); }
.panel-invoice.is-empty { display: none; }
.invoice-body { gap: var(--s2); align-items: flex-start; }

.invoice-line {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.invoice-line-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.invoice-line p { margin: 0; font-size: var(--t-12); }
.invoice-amount { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

.invoice-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.invoice-actions .btn { text-decoration: none; }
.invoice-hint { margin: 0; font-size: var(--t-13); }
.invoice-all { font-size: var(--t-13); }

/* ------------------------------------------------------- dialog */

.invoice-kinds { display: flex; flex-direction: column; gap: var(--s2); }

.invoice-preview {
  margin: 0;
  padding: var(--s3);
  list-style: none;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-2);
  font-size: var(--t-13);
  font-variant-numeric: tabular-nums;
}
.invoice-preview li { display: flex; gap: var(--s3); color: var(--text-2); }
.invoice-preview-total {
  margin: 0;
  text-align: right;
  font-size: var(--t-15);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ------------------------------------------------ Invoices screen */

.invoices-top { display: flex; margin-bottom: calc(var(--s2) * -1); }

.invoice-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }

.invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--edge-top);
  transition: border-color var(--fast) var(--ease);
}
.invoice-row:hover { border-color: var(--line-2); }
/* Overdue carries the same attention rule as a quote worth chasing. */
.invoice-row.is-chase { box-shadow: inset 3px 0 0 var(--attention), var(--edge-top); }

.invoice-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
}
.invoice-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.invoice-row-main:hover .quote-who { text-decoration: underline; text-underline-offset: 2px; }

.invoice-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.invoice-row-side .invoice-actions { justify-content: flex-end; margin-top: 0; }

@media (max-width: 720px) {
  .invoice-row { grid-template-columns: 1fr; gap: var(--s2); }
  .invoice-row-side { align-items: flex-start; }
  .invoice-row-side .invoice-actions { justify-content: flex-start; }
}

/* ------------------------------------------------- on a phone
   The pay link is sent from the lot, one-handed. Buttons grow to a full
   thumb target and the text button takes the whole row. */
.panel-getpaid .panel-invoice { margin-top: 0; }
.panel-getpaid:has(.panel-invoice.is-empty) { display: none; }

@media (max-width: 720px) {
  .invoice-actions { width: 100%; }
  .invoice-actions .btn { min-height: 44px; padding-inline: var(--s4); font-size: var(--t-14); }
  .invoice-actions .invoice-text { flex: 1 1 100%; justify-content: center; }
  .panel-invoice > .invoice-body > .btn { width: 100%; min-height: 48px; justify-content: center; font-size: var(--t-15); }
}

/* ------------------------------------------------ ready to invoice */

.invoice-ready { display: flex; flex-direction: column; gap: var(--s2); }
.invoice-ready-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.invoice-ready-head h2 { margin: 0; font-size: var(--t-15); font-weight: 650; color: var(--text); }
.invoice-waiting { margin: 0; font-size: var(--t-13); }

@media (max-width: 720px) {
  .invoice-make { width: 100%; min-height: 44px; justify-content: center; font-size: var(--t-14); }
  .invoice-ready .invoice-row-side { width: 100%; }
}

/* The filters scroll sideways on a phone rather than wrapping a label
   onto two lines inside its button. */
.quotes .segmented button { white-space: nowrap; }

/* "Add their email", where a quote or invoice needs it. */
.email-gate-row { display: flex; gap: var(--s2); }
.email-gate-row .input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
  .email-gate-row { flex-direction: column; }
  .email-gate-row .btn { min-height: 44px; justify-content: center; }
}

/* ============================================================
   Quotes & invoices: one list of jobs, each opening in place.
   ============================================================ */

.bill-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }

.bill-row {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--edge-top);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  scroll-margin-top: var(--s4);
}
.bill-row:hover { border-color: var(--line-2); }
.bill-row.is-chase { box-shadow: inset 3px 0 0 var(--attention), var(--edge-top); }
.bill-row.is-open { border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent), var(--edge-top); }

.bill-row-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }

/* The whole left side is the tap target, padded to the row's edge, so a
   tap anywhere on the name, status or dates opens the job. */
.bill-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s4);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-card);
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.bill-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bill-row-main:hover .quote-who { text-decoration: underline; text-underline-offset: 2px; }
.bill-row-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s4) 0;
}
.bill-row-side .invoice-actions { justify-content: flex-end; margin-top: 0; }

/* ---------------------------------------------------- the editor */

.bill-editor, .bill-settled {
  border-top: 1px solid var(--line);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.bill-editor-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.bill-editor-saved { font-size: var(--t-12); min-width: 4.5em; text-align: right; }
.bill-editor-cols { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
/* The lines take the full width; the total and how to send it sit under
   them, side by side on a wide screen. */
.bill-editor-side {
  display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: var(--s5); align-items: start;
  padding-top: var(--s4); border-top: 1px solid var(--line);
}
.bill-editor-side > .bill-send { border-top: 0; padding-top: 0; }
.bill-editor h4.label { margin: 0 0 var(--s2); }

.bill-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.bill-lines-empty { padding: var(--s3); border: 1px dashed var(--line-2); border-radius: var(--r-card); font-size: var(--t-13); }
.bill-line {
  display: grid;
  grid-template-columns: 5rem minmax(12rem, 1fr) 7.5rem 8rem 6.5rem auto;
  gap: var(--s2);
  align-items: center;
}
.bill-line .input { min-height: 44px; padding-block: 8px; font-size: var(--t-15, 15px); }
.bill-line-kind {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3);
}
.bill-line-kind[data-kind="part"] { color: var(--trust-text, var(--text-2)); }
.bill-line-kind[data-kind="labor"] { color: var(--gold-text, var(--text-2)); }
.bill-line-qty-wrap { display: flex; align-items: center; gap: 4px; }
.bill-line-qty-wrap .input { width: 100%; text-align: right; }
.bill-line-price { text-align: right; }
.bill-line-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

.bill-add { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.bill-add-group { display: flex; flex-direction: column; gap: var(--s2); }
.bill-add-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }

.bill-total-input { font-size: var(--t-20, 1.25rem); font-weight: 650; font-variant-numeric: tabular-nums; max-width: 14rem; }
.bill-send { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.quote-or-invoice { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.bill-settled-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.bill-settled-lines li { display: flex; gap: var(--s3); color: var(--text-2); }
.bill-settled p { margin: 0; font-size: var(--t-13); }

@media (max-width: 860px) {
  .bill-editor-side { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .bill-row-line { grid-template-columns: 1fr; gap: 0; }
  .bill-row-side { align-items: stretch; padding: 0 var(--s4) var(--s4); }
  .bill-row-side .quote-price { order: -1; }
  .bill-row-side .invoice-actions { justify-content: flex-start; }
  /* On a phone a line is two rows: what it is, then count, price, total. */
  .bill-line {
    grid-template-columns: minmax(0, 1fr) 5rem 5.5rem auto;
    grid-template-areas: "kind kind kind remove" "name name name name" "qty price total total";
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line);
  }
  .bill-line-kind { grid-area: kind; }
  .bill-line-name { grid-area: name; }
  .bill-line-qty-wrap { grid-area: qty; }
  .bill-line-price { grid-area: price; }
  .bill-line-total { grid-area: total; }
  .bill-line-remove { grid-area: remove; justify-self: end; }
  .bill-line .input { min-height: 44px; font-size: 16px; }
  .bill-total-input { max-width: none; font-size: 22px; }
  .bill-editor-head .btn { min-height: 40px; }
}

/* The invoice dialog's preview reads like the invoice itself. */
.invoice-paper { display: flex; flex-direction: column; gap: var(--s2); }
.invoice-paper-note { margin: 0; font-size: var(--t-14); color: var(--text); }
.invoice-paper-meta, .invoice-paper-foot { margin: 0; font-size: var(--t-12); white-space: pre-wrap; }
.invoice-wording-edit { align-self: flex-start; font-size: var(--t-13); }

/* A discount line: what it is, $ or %, how much, and the minus amount. */
.bill-line.is-discount .bill-line-total { color: var(--go-text, var(--text)); }
.bill-line-kind[data-kind="discount"] { color: var(--go-text, var(--text-2)); }
.bill-line-mode { min-height: 44px; }
@media (max-width: 720px) {
  .bill-line.is-discount {
    grid-template-areas: "kind kind kind remove" "name name name name" "mode price total total";
  }
  .bill-line.is-discount .bill-line-mode { grid-area: mode; }
}

/* On a phone the service and part buttons are one row you swipe, so a
   shop with twenty services still sees the total without scrolling past
   all of them. */
@media (max-width: 720px) {
  .bill-add-group .quote-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--s4) * -1);
    padding: 2px var(--s4) 6px;
    scrollbar-width: none;
  }
  .bill-add-group .quote-chips::-webkit-scrollbar { display: none; }
  .bill-add-group .quote-chip { flex: none; scroll-snap-align: start; }
  .bill-add-buttons .btn { flex: 1 1 calc(50% - var(--s2)); min-height: 44px; justify-content: center; }
}

/* Grid and flex children default to "never narrower than my content",
   and a swipeable row's content is as wide as all its buttons. These
   are allowed to be narrower than that, so the row scrolls instead of
   pushing the whole editor past the edge of the screen. */
.bill-editor, .bill-editor-cols, .bill-editor-cols > *, .bill-editor-main, .bill-add, .bill-add-group,
.bill-editor-side, .bill-editor-side > * { min-width: 0; }
.bill-row, .bill-list { min-width: 0; max-width: 100%; }

.bill-editor-side .link-btn { align-self: flex-start; text-align: left; }
.bill-editor-side .field { display: flex; flex-direction: column; gap: var(--s2); }

/* Sending, on a phone: every button is a full-width thumb target. */
@media (max-width: 720px) {
  .bill-send .btn, .quote-or-invoice .btn { width: 100%; min-height: 46px; justify-content: center; font-size: var(--t-15); }
  .quote-or-invoice { flex-direction: column; align-items: stretch; }
  .bill-send .quote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .bill-send .quote-actions .btn { width: 100%; }
}
@media (max-width: 720px) {
  .bill-settled .invoice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .bill-settled .invoice-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .bill-settled .invoice-actions .invoice-text { grid-column: 1 / -1; }
}

/* Services & parts, on a phone: the title gets its own line and the two
   add buttons share the row under it, instead of squeezing each other. */
@media (max-width: 720px) {
  .catalog-head { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .catalog-head h2 { font-size: var(--t-20, 1.25rem); }
  .catalog-head > .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .catalog-head > .row .btn { width: 100%; min-height: 44px; justify-content: center; }
  .catalog-head > .row .btn:only-child, .catalog-head > .row .btn:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .catalog-card-foot .btn { min-height: 40px; padding-inline: var(--s4); }
}