/* invoice.css: the Invoices tab composer, the form beside the paper it fills in (2026-11-01). Byte copy in every brand hub
   (tools/sync-finance-model.mjs); tokens only, so it holds in each hub's look and in light and dark.
   DIRECTION a receipt laid beside the form that is copying it. SIGNATURE the paper's folded corner. Motion: none. */
.inv-composer{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:24px; align-items:start; }
@media(min-width:1100px){
  .inv-composer{ grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); }
  .inv-composer.no-paper{ grid-template-columns:minmax(0,1fr); }
  .inv-paper{ position:sticky; top:96px; }
}
.inv-composer.no-paper .inv-paper{ display:none; }
.inv-composer .inv-form{ display:block; margin:0; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.ic-sec + .ic-sec{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.ic-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.ic-title{ margin:0; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.ic-sub{ margin:2px 0 0; font-size:12px; color:var(--muted); }
.ic-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ic-fields{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
@media(min-width:560px){ .ic-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ic-wide{ grid-column:1/-1; } }
.ic-f{ display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; color:var(--muted); }
.ic-f .exp-in{ width:100%; flex:none; min-height:38px; border-radius:8px; box-sizing:border-box; }
.inv-composer .inv-kinds{ margin:0 0 14px; }
.inv-composer .inv-imgs{ margin:0 0 14px; }
.inv-composer .inv-confirm{ margin:0 0 12px; }
.inv-composer .inv-lines{ margin:0; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.inv-composer .inv-line{ padding:7px 8px; gap:6px; border-top:1px solid var(--line); margin:0; }
.inv-composer .inv-line .exp-in{ border-radius:6px; min-width:0; width:100%; box-sizing:border-box; }
.inv-composer .inv-line-head{ border-top:0; background:var(--hoverbg); text-transform:none; letter-spacing:0; font-size:12px; }
.inv-composer .inv-line-head span:nth-child(5){ text-align:end; }
.inv-composer .inv-lines .pl-empty{ padding:16px 12px; margin:0; border-top:1px solid var(--line); }
.ic-lines-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }
.ic-lines-foot .exp-cancel{ border-radius:8px; }
.ic-lines-foot .inv-hint{ margin:0; }
.inv-composer .inv-sum{ display:block; margin-top:10px; }
.ic-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:20px; }
.ic-actions button{ border-radius:8px; min-height:40px; }
.inv-scan-btn{ border-radius:8px; cursor:pointer; }
.ic-toggle{ display:none; border-radius:8px; }
@media(min-width:1100px){ .ic-toggle{ display:inline-block; } }

.ip-sheet{ position:relative; padding:24px 22px 22px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--ink);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%); }
.ip-sheet::after{ content:""; position:absolute; top:-1px; inset-inline-end:-1px; width:22px; height:22px; background:var(--line); clip-path:polygon(0 0,0 100%,100% 100%); }
[dir="rtl"] .ip-sheet{ clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px); }
.ip-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-inline-end:18px; margin-bottom:16px; }
.ip-title{ margin:0; font-size:24px; font-weight:500; letter-spacing:-.02em; }
.ip-kind{ font-size:12px; color:var(--muted); }
.ip-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:0 0 18px; }
.ip-meta dt{ font-size:12px; color:var(--muted); }
.ip-meta dd{ margin:2px 0 0; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.ip-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
.ip-table th{ text-align:start; font-size:12px; font-weight:400; color:var(--muted); padding:0 0 8px; border-bottom:1px solid var(--line); }
.ip-table td{ padding:9px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.ip-table .ip-n{ text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums; padding-inline-start:12px; }
.ip-item{ overflow-wrap:anywhere; }
.ip-code{ display:block; font-size:11px; color:var(--muted); }
.ip-none{ margin:0 0 14px; padding:18px 0; font-size:13px; color:var(--muted); border-block:1px solid var(--line); }
.ip-sums{ display:grid; gap:7px; font-size:13px; }
.ip-sum{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); }
.ip-sum > span:last-child{ font-variant-numeric:tabular-nums; color:var(--ink); }
.ip-total{ font-weight:500; color:var(--ink); padding-top:8px; border-top:1px solid var(--line); font-size:15px; }
.ip-due > span:last-child, .ip-warn > span:last-child{ color:var(--red); }
.ip-note{ margin:12px 0 0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
@media(max-width:760px){ .ic-f .exp-in{ font-size:16px; } .inv-composer .inv-form{ padding:16px; } .ip-sheet{ padding:20px 16px 18px; } }