/* The Invoices pages: list, invoice page and composer. Tokens come from the portal. */
.iv-foot{font-size:12px;color:var(--subtle);padding:10px 2px}
/* The list pages, console and portal: a summary panel and a table panel. */
.iv-panel{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);margin-bottom:20px}
.iv-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.iv-panel-head .k{font-size:12px;color:var(--subtle)}
.iv-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.iv-metrics.narrow{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.iv-metric{padding:16px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin:0 -1px -1px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.iv-metric .k{font-size:12px;color:var(--subtle)}
.iv-metric .v{font-size:24px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.iv-metric .v.bad{color:var(--bad)}
.iv-metric .sub{font-size:12px;color:var(--subtle);min-height:16px}
.iv-panel-attn{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bad-wash);border-top:1px solid #f9dcd8;font-size:13px}
.iv-panel-attn .dot{width:7px;height:7px;border-radius:50%;background:var(--bad);flex-shrink:0}
.iv-panel-attn .msg{flex:1;min-width:0;color:var(--ink-2)}
.iv-panel-attn .msg b{color:var(--ink);font-weight:600;margin-right:4px}
.iv-panel-attn .go{border:0;background:none;padding:0;font:500 13px var(--font);color:var(--bad);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.iv-panel-attn .go:hover{text-decoration:underline}
/* segmented choices: status tabs and currency tabs */
.iv-seg{display:flex;flex-wrap:wrap;background:var(--surface-3,#f4f4f4);border-radius:7px;padding:3px;gap:2px}
.iv-seg button{display:flex;align-items:center;gap:6px;padding:4px 10px;border:0;border-radius:5px;background:transparent;font:13px var(--font);color:var(--subtle);cursor:pointer}
.iv-seg button:hover{color:var(--ink)}
.iv-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.iv-seg .n{font:11px var(--font-mono);color:var(--subtle)}
.iv-seg.cur button{font:12px var(--font-mono)}
.iv-seg .tg-flag{width:14px;height:14px;border-radius:50%;display:block}
/* the table panel's toolbar */
.iv-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.iv-find{flex:0 1 320px;min-width:220px;display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--subtle)}
.iv-find.wide{flex:1 1 320px}
.iv-find input{border:0;outline:0;flex:1;min-width:0;font:13px var(--font);background:transparent;color:var(--ink)}
.iv-find button{border:0;background:none;width:22px;height:22px;cursor:pointer;color:var(--subtle);font-size:16px;line-height:1}
.iv-find:focus-within{border-color:var(--ink-2)}
.iv-filter{height:32px;padding:0 28px 0 10px;background-color:var(--surface);border:1px solid var(--line);border-radius:7px;font:13px var(--font);color:var(--ink)}
/* the table inside a panel */
.iv-scroll{overflow-x:auto}
.iv-grid{width:100%;border-collapse:collapse;font-size:13px}
.iv-grid th{font-weight:400;font-size:12px;color:var(--subtle);text-align:left;padding:10px 16px;white-space:nowrap;background:none;border:0;text-transform:none;letter-spacing:0}
.iv-grid th.sort{cursor:pointer}
.iv-grid th.sorted{color:var(--ink);font-weight:500}
.iv-grid th.r,.iv-grid td.r{text-align:right}
.iv-grid td{padding:12px 16px;border-top:1px solid var(--line-soft);vertical-align:middle}
.iv-grid td.mono{font:12px var(--font-mono)}
.iv-grid td.amt{font:500 12px var(--font-mono);text-align:right;white-space:nowrap}
.iv-grid td.paid{font:12px var(--font-mono);text-align:right;color:var(--subtle);white-space:nowrap}
.iv-grid td.date{color:var(--muted);white-space:nowrap}
.iv-grid .sub{font-size:12px;color:var(--subtle)}
.iv-grid tr.click{cursor:pointer}
.iv-grid tr.click:hover td{background:var(--surface-2)}
.iv-ini{font:10px var(--font-mono);color:var(--subtle);background:var(--surface-3,#f4f4f4);border-radius:4px;padding:2px 5px}
.iv-src{font-size:12px;padding:3px 8px;border-radius:5px;background:var(--surface-3,#f4f4f4);color:var(--muted)}
.iv-panel-empty{padding:32px 16px;text-align:center;font-size:13px;color:var(--subtle)}
.iv-panel-empty b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.iv-panel-empty .btn{margin-top:12px}
.iv-panel .iv-foot{border-top:1px solid var(--line-soft);padding:10px 16px}
.iv-headbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* invoice page */
.iv-crumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.iv-crumb a{cursor:pointer;color:var(--muted);text-decoration:none}.iv-crumb a:hover{color:var(--ink)}
.iv-crumb .sep{margin:0 6px;color:var(--subtle)}
.iv-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.iv-head h2{display:flex;align-items:center;gap:10px;margin:0}
.iv-head .sub{margin-top:4px;color:var(--muted);font-size:13px}
.iv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:relative}
.iv-more{position:absolute;right:0;top:38px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(10,10,10,.12);padding:6px;min-width:260px;z-index:30}
.iv-more button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;font:13px var(--font);cursor:pointer;color:var(--ink)}
.iv-more button:hover{background:var(--surface-2)}
.iv-more button small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.iv-more button.danger{color:var(--bad)}
.iv-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.iv-side{display:flex;flex-direction:column;gap:14px}
.iv-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.iv-card h4{margin:0 0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);font-weight:600}
.iv-kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}
.iv-kv .k{color:var(--muted)}.iv-kv .v{text-align:right;font-variant-numeric:tabular-nums}
.iv-link{display:flex;gap:8px;align-items:center;font:12px var(--font-mono);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;word-break:break-all}
.iv-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.iv-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13px}
.iv-timeline small{display:block;color:var(--subtle);font-size:12px}
.iv-overdue{border:1px solid #f1c9c4;background:var(--bad-wash);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.iv-readonly{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 14px;margin-bottom:14px;color:var(--muted);font-size:13px}
/* the document, as the customer sees it */
.iv-doc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:36px 40px;font-size:13px;color:#16171a;min-width:0}
.iv-doc .top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:28px}
.iv-doc .who{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px}
.iv-doc .mark{width:28px;height:28px;border-radius:6px;background:#111;color:#c8f53b;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.iv-doc .title{font-size:22px;font-weight:600;letter-spacing:-.02em;text-align:right}
.iv-doc .title small{display:block;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:2px}
.iv-doc .meta{display:grid;grid-template-columns:1fr auto;gap:18px;margin-bottom:24px}
.iv-doc .meta .lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:4px}
.iv-doc .meta .bill div{line-height:1.5}
.iv-doc .dates{display:grid;grid-template-columns:auto auto;gap:4px 16px;text-align:right}
.iv-doc table{width:100%;border-collapse:collapse;margin-bottom:12px}
.iv-doc th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--subtle);text-align:left;padding:8px 0;border-bottom:1px solid var(--line);font-weight:600}
.iv-doc th.r,.iv-doc td.r{text-align:right}
.iv-doc td{padding:10px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;font-variant-numeric:tabular-nums}
.iv-doc .totals{margin-left:auto;width:min(300px,100%)}
.iv-doc .totals div{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}
.iv-doc .totals .grand{font-weight:600;font-size:15px;border-top:1px solid var(--line);margin-top:4px;padding-top:8px}
.iv-doc .totals .due{font-weight:600}
.iv-doc .pay{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.iv-doc .pay .btn-fake{background:#111;color:#fff;border-radius:8px;padding:9px 18px;font-weight:600;font-size:13px}
.iv-doc .memo{margin-top:16px;color:var(--ink-2);white-space:pre-wrap;line-height:1.5}
.iv-doc .foot{margin-top:24px;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--subtle);font-size:12px;display:flex;justify-content:space-between;gap:12px}
/* composer */
.iv-comp{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:24px;align-items:start}
.iv-form{display:flex;flex-direction:column;gap:18px}
.iv-sec{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.iv-sec h4{margin:0 0 10px;font-size:13px;font-weight:600}
.iv-sec .err{color:var(--bad);font-size:12px;margin-top:6px}
.iv-chips{display:flex;gap:6px;flex-wrap:wrap}
.iv-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font:13px var(--font);cursor:pointer}
.iv-chip.on{border-color:var(--ink);background:var(--surface-3);font-weight:500}
.iv-chip:disabled{opacity:.5;cursor:not-allowed}
.iv-line{display:grid;grid-template-columns:minmax(0,1fr) 64px 100px 90px 24px;gap:8px;align-items:center;margin-bottom:8px}
.iv-line input{width:100%;box-sizing:border-box;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:13px var(--font)}
.iv-line .tot{text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-2)}
.iv-line-cat input[data-f=unit]{background:var(--surface-2);color:var(--ink-2);font-family:var(--font-mono)}
.iv-addrow{display:flex;gap:8px;flex-wrap:wrap}
.iv-catpick{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
.iv-catpick button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px 12px;font:13px var(--font);color:var(--ink);cursor:pointer}
.iv-catpick button:hover:not(:disabled){border-color:var(--ink-2)}
.iv-catpick button:disabled{opacity:.5;cursor:not-allowed}
.iv-catpick .grow{flex:1;min-width:0}
.iv-catpick small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.iv-line-head{display:grid;grid-template-columns:minmax(0,1fr) 64px 100px 90px 24px;gap:8px;font-size:11px;color:var(--subtle);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.iv-cust{display:flex;align-items:center;gap:10px;justify-content:space-between}
.iv-pick{border:1px solid var(--line);border-radius:8px;margin-top:8px;max-height:260px;overflow:auto}
.iv-pick button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;font:13px var(--font);cursor:pointer;border-bottom:1px solid var(--line-soft)}
.iv-pick button:hover{background:var(--surface-2)}
.iv-pick small{display:block;color:var(--muted)}
.iv-sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13px;margin-top:10px;font-variant-numeric:tabular-nums}
.iv-bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg,#fff);padding:12px 0}
.iv-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.iv-fields label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.iv-fields input,.iv-fields textarea,.iv-sec input[type=text],.iv-sec input[type=email],.iv-sec input[type=search],.iv-sec input[type=date],.iv-sec textarea{width:100%;box-sizing:border-box;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:13px var(--font)}
.iv-sec textarea{height:72px;padding:8px 10px;resize:vertical}
@media (max-width:1000px){.iv-layout,.iv-comp{grid-template-columns:minmax(0,1fr)}.iv-stats,.iv-stats.five{grid-template-columns:minmax(0,1fr)}.iv-doc{padding:24px 18px}}
@media (max-width:560px){.iv-line,.iv-line-head{grid-template-columns:minmax(0,1fr) 56px 84px 22px}.iv-line .tot,.iv-line-head .t{display:none}.iv-fields{grid-template-columns:1fr}}
@media print{.iv-doc{border:0;padding:0}}