/* Pay Docly — the invoice document sheet and its line-item editor.
   Loaded after base.css + tool.css. Generic app chrome lives in tool.css. */

/* ---- Line-item editor ----
   6 columns: description, qty, rate, tax %, computed amount, actions.
   `.no-tax` on the container collapses the tax column without rebuilding the markup. */
.inv-head,.inv-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 62px 96px 60px 96px 74px;
  gap:6px;align-items:start
}
.inv-head{
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted-2);
  padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:8px
}
.inv-head span:nth-child(2),.inv-head span:nth-child(3),.inv-head span:nth-child(4){text-align:right}
.inv-head span:nth-child(5){text-align:right}
.inv-row{margin-bottom:7px}
.inv-row input,.inv-row textarea{padding:9px 10px}
.inv-row input[type=number]{text-align:right}
.inv-desc{min-height:38px;height:38px;resize:none;overflow:hidden;line-height:1.4}
.inv-amt{
  display:flex;align-items:center;justify-content:flex-end;min-height:38px;padding:0 4px;
  font-size:12px;font-weight:850;color:var(--ink);overflow:hidden;text-overflow:ellipsis
}
.inv-acts{display:flex;gap:3px;align-items:center;min-height:38px}
.inv-acts .mini{background:#f2f4f7;color:#475467;padding:6px 6px;line-height:1}
.inv-acts .mini:hover{background:#e4e7ec}
.inv-acts .remove-btn{width:28px;height:30px;font-size:16px}
.items-editor.no-tax .inv-head,.items-editor.no-tax .inv-row{
  grid-template-columns:minmax(0,1fr) 62px 96px 96px 74px
}
.items-editor.no-tax .inv-tax,.items-editor.no-tax #taxColHead{display:none}

/* Live totals panel under the line items */
.totals-panel{
  margin-top:14px;margin-left:auto;max-width:320px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;background:#fbfcfe
}
.tot-row{display:flex;justify-content:space-between;gap:14px;font-size:12px;padding:4px 0;color:var(--muted)}
.tot-row span:last-child{color:var(--ink);font-weight:700}
.tot-row.grand{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-size:14px}
.tot-row.grand span{color:var(--ink);font-weight:900}

.record-item .badge{
  font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;
  padding:2px 7px;margin-left:5px;vertical-align:middle
}
.badge.draft{background:#f2f4f7;color:#475467}
.badge.sent{background:var(--brand-soft);color:var(--brand)}
.badge.paid{background:var(--success-soft);color:#027a48}

.field-inline{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.field-inline input[type=checkbox]{width:auto;margin:0}
.field-inline label{margin:0;font-weight:700}

/* ---- The invoice document ---- */
.invoice .doc-meta{min-width:210px}
.invoice .inv-title{font-size:26px;font-weight:900;letter-spacing:.04em;color:var(--brand)}
.invoice .inv-number{font-size:13px;font-weight:850;margin-top:2px}
.invoice .inv-dates{width:100%;border-collapse:collapse;font-size:11px;margin-top:10px}
.invoice .inv-dates td{padding:3px 0}
.invoice .inv-dates td:first-child{color:#667085;text-align:left}
.invoice .inv-dates td:last-child{text-align:right}
.invoice .inv-stamp{
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;border-radius:5px;
  padding:3px 7px;vertical-align:middle;margin-left:6px
}
.invoice .inv-stamp.sent{background:var(--brand-soft);color:var(--brand)}
.invoice .inv-stamp.paid{background:var(--success-soft);color:#027a48}

.invoice .inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:26px 0 22px}
.invoice .party-name{font-size:13px;font-weight:850}
.invoice .party-lines{font-size:11.5px;color:#667085;line-height:1.55;margin-top:3px;white-space:pre-line}
.invoice .party-tax{font-size:11px;color:#667085;margin-top:5px}

.invoice .inv-table{width:100%;border-collapse:collapse;font-size:11.5px}
.invoice .inv-table th{
  background:#f4f6f8;font-weight:850;text-align:left;padding:9px 10px;
  border-bottom:1px solid #e4e7ec;font-size:10px;text-transform:uppercase;letter-spacing:.05em
}
.invoice .inv-table td{padding:9px 10px;border-bottom:1px solid #edf0f4;vertical-align:top}
.invoice .inv-table .c-num{width:26px;color:#98a2b3}
.invoice .inv-table .c-desc{white-space:pre-line}
.invoice .inv-table .c-qty,.invoice .inv-table .c-rate,.invoice .inv-table .c-tax,.invoice .inv-table .c-amt{
  text-align:right;white-space:nowrap
}
.invoice .inv-table .c-qty{width:52px}
.invoice .inv-table .c-rate{width:92px}
.invoice .inv-table .c-tax{width:52px}
.invoice .inv-table .c-amt{width:100px;font-weight:850}

.invoice .inv-foot{display:grid;grid-template-columns:1fr 260px;gap:26px;margin-top:20px;align-items:start}
.invoice .inv-note{margin-bottom:12px;font-size:10.5px;line-height:1.6}
.invoice .inv-note strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#667085;margin-bottom:3px}
.invoice .inv-note span{color:#475467;white-space:pre-line}
.invoice .inv-sums{border:1px solid #e4e7ec;border-radius:10px;overflow:hidden}
.invoice .inv-sum-row{display:flex;justify-content:space-between;gap:14px;padding:8px 13px;font-size:11.5px}
.invoice .inv-sum-row span:first-child{color:#667085}
.invoice .inv-sum-row.grand{background:#ecfdf3;font-weight:900;font-size:13px;border-top:1px solid #d1e7dd}
.invoice .inv-sum-row.grand span:first-child{color:var(--ink)}

.invoice .inv-tax-summary{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:18px}
.invoice .inv-tax-summary th,.invoice .inv-tax-summary td{
  border:1px solid #e4e7ec;padding:6px 9px;text-align:right
}
.invoice .inv-tax-summary th{background:#f4f6f8;font-weight:850;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em}

@media(max-width:820px){
  /* the 6-column row cannot survive a narrow screen — stack into a labelled card */
  .inv-head{display:none}
  .inv-row{
    grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line);border-radius:12px;
    padding:11px;margin-bottom:10px;background:#fff
  }
  .items-editor.no-tax .inv-row{grid-template-columns:1fr 1fr}
  .inv-desc{grid-column:1/-1}
  .inv-amt{grid-column:1/-1;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px;min-height:0}
  .inv-amt::before{content:"Amount";font-size:10px;font-weight:800;color:var(--muted-2)}
  .inv-acts{grid-column:1/-1;justify-content:flex-end}
  .totals-panel{max-width:none}
}
@media(max-width:640px){
  .invoice .inv-parties,.invoice .inv-foot{grid-template-columns:1fr;gap:18px}
  .invoice .inv-table{font-size:11px}
  .invoice .inv-table .c-rate,.invoice .inv-table .c-tax{display:none}
}
@media print{
  /* repeat the table header when an invoice runs onto a second page */
  .invoice .inv-table thead{display:table-header-group}
  .invoice .inv-table tr{page-break-inside:avoid}
  .invoice .inv-parties,.invoice .inv-foot{display:grid!important}
  .invoice .inv-table .c-rate,.invoice .inv-table .c-tax{display:table-cell!important}
}