/* Invoices: the list, the printable invoice and credit note, and the print
   stylesheet. Colours and shapes from studio.css (look C, Studio Line). */

/* ---------- the list ---------- */
.inv-list .inv-card { padding: 20px 20px 12px; margin-bottom: 16px; }
.inv-banner { margin-bottom: 14px; }
.inv-row { flex-wrap: wrap; }
.inv-link { color: inherit; text-decoration: none; }
.inv-link:hover { background: #F4FAF8; }
.inv-no { font-size: 16px; min-width: 150px; color: var(--teal-dd); }
.inv-late { color: var(--note); font-weight: 700; }
.inv-preview { background: var(--ground); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.inv-preview .ln { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- the invoice page ---------- */
.inv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-hint { margin-bottom: 10px; }
.inv-doc { position: relative; background: #fff; border-radius: 24px; padding: 28px 30px; max-width: 980px; box-shadow: 0 14px 40px rgba(11, 79, 69, 0.10); display: flex; flex-direction: column; gap: 18px; font-size: 14px; }
.inv-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px dotted var(--line2); }
.inv-seller { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.inv-legal { font-size: 18px; font-weight: 800; }
.inv-seller .inv-legal { font-size: 22px; }
.inv-addr { color: var(--ink2); }
.inv-meta h1 { margin: 0 0 8px; font-size: 26px; }
.inv-meta dl { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 0; }
.inv-meta dt { color: var(--ink3); font-weight: 700; }
.inv-meta dd { margin: 0; font-weight: 800; }
.inv-to { display: flex; flex-direction: column; gap: 2px; }
.inv-sub { font-size: 12px; color: var(--ink3); font-weight: 600; }
.inv-missing { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 0 6px; font-weight: 800; }

.inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inv-lines { width: 100%; border-collapse: collapse; min-width: 720px; }
.inv-lines th { text-align: left; font-size: 12px; color: var(--ink3); font-weight: 800; padding: 8px 6px; border-bottom: 2px solid var(--line2); white-space: nowrap; }
.inv-lines td { padding: 10px 6px; border-bottom: 2px dotted var(--line); vertical-align: top; }
.inv-lines tfoot td { border-bottom: 0; border-top: 2px solid var(--line2); font-weight: 800; }
.inv-lines .r { text-align: right; white-space: nowrap; }
.inv-item { min-width: 160px; }
.inv-note { font-size: 12px; color: var(--ink3); }

.inv-sum { align-self: flex-end; min-width: min(340px, 100%); display: flex; flex-direction: column; gap: 6px; }
.inv-sum .ln { display: flex; justify-content: space-between; gap: 16px; }
.inv-total { padding-top: 8px; border-top: 2px dashed var(--line2); align-items: baseline; }
.inv-total .d { font-size: 24px; }

.inv-foot { border-top: 2px dotted var(--line2); padding-top: 12px; color: var(--ink2); font-size: 12px; }
.inv-foot p { margin: 0 0 4px; }
.inv-sign { align-self: flex-end; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink2); }
.inv-sign-line { height: 48px; }

.inv-stamp { align-self: flex-start; background: var(--warn-bg); color: var(--warn); border: 2px solid var(--warn-line); border-radius: 12px; padding: 6px 12px; font-weight: 800; letter-spacing: 0.02em; }
.inv-doc.is-cancelled .inv-lines, .inv-doc.is-cancelled .inv-sum { opacity: 0.75; }

@media (max-width: 760px) {
  .inv-doc { padding: 20px 16px; border-radius: 20px; }
  .inv-no { min-width: 0; width: 100%; }
}

/* ---------- printing: only the invoice, on white ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  body:has(.inv-doc) .band, body:has(.inv-doc) .tabbar, body:has(.inv-doc) .toast,
  body:has(.inv-doc) .scrim, .no-print { display: none !important; }
  body:has(.inv-doc) main.page { padding: 0; max-width: none; }
  .inv-doc { box-shadow: none; border-radius: 0; padding: 0; max-width: none; font-size: 11pt; }
  .inv-scroll { overflow: visible; }
  .inv-lines { min-width: 0; }
  .inv-lines tr { break-inside: avoid; }
  .inv-missing { background: none; border: 1px solid currentColor; }
  .inv-stamp { background: none; border: 2px solid #000; color: #000; }
  .inv-doc.is-cancelled .inv-lines, .inv-doc.is-cancelled .inv-sum { opacity: 1; }
  /* The staging copy's band must still show on paper, so a made-up
     invoice can never pass for a real one. */
  .staging-band { position: static; background: none; color: #000; border: 3px solid #000; box-shadow: none; }
}