/* ══════════════════════════════════════════════════════════════════
   INVOICES — editor on the left, live document preview on the right.
   The preview deliberately mirrors what the PDF writer draws, so what
   you see is what your client receives.
   Scoped under .inv-app so nothing leaks into the rest of the shell.
   ══════════════════════════════════════════════════════════════════ */
.inv-app [hidden]{display:none!important}          /* the suite's [hidden]-vs-display trap */

.inv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:18px;align-items:start}
@media(max-width:1080px){.inv-grid{grid-template-columns:minmax(0,1fr)}}

.inv-card{background:var(--card,#fff);border:1px solid var(--line,#e4e9f2);border-radius:14px;padding:16px 16px 18px;margin-bottom:14px}
.inv-card h3{margin:0 0 12px;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#6b7688)}
.inv-hint{font-size:.78rem;color:var(--muted,#6b7688);margin:6px 0 0;line-height:1.5}

/* toolbar */
.inv-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.inv-bar .inv-sp{flex:1 1 auto}
.inv-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--line,#dfe4ec);
  border-radius:9px;background:#fff;color:var(--ink,#1c2737);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  transition:background .12s,border-color .12s,transform .12s}
.inv-btn:hover{background:#eef4ff;border-color:#1159da;color:#1159da;transform:translateY(-1px)}
.inv-btn-pri{background:#1159da;border-color:#1159da;color:#fff}
.inv-btn-pri:hover{background:#0d47b1;border-color:#0d47b1;color:#fff}
.inv-pro-chip{margin-left:5px;padding:1px 6px;border-radius:999px;background:#f6c344;color:#3b2c00;font-size:.63rem;font-weight:800;letter-spacing:.05em}

/* form fields */
.inv-f{display:block;margin-bottom:10px}
.inv-f > span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7688);margin-bottom:4px}
.inv-app input[type=text],.inv-app input[type=date],.inv-app input[type=number],.inv-app input[type=email],
.inv-app select,.inv-app textarea{
  width:100%;height:34px;padding:0 10px;border:1px solid var(--line,#dfe4ec);border-radius:8px;background:#fff;
  color:var(--ink,#1c2737);font:inherit;font-size:.86rem}
.inv-app textarea{height:auto;min-height:60px;padding:8px 10px;line-height:1.45;resize:vertical}
.inv-app input:focus,.inv-app select:focus,.inv-app textarea:focus{outline:0;border-color:#1159da;box-shadow:0 0 0 3px rgba(17,89,218,.12)}
.inv-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inv-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* line items */
.inv-head,.inv-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 60px 86px 92px 30px;gap:6px;align-items:center}
.inv-head{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7688);padding:0 2px 6px}
.inv-head .r{text-align:right}
.inv-row{margin-bottom:6px}
.inv-i-amt{text-align:right;font-size:.84rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink,#1c2737)}
.inv-x{width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:#98a3b5;font-size:17px;line-height:1;cursor:pointer}
.inv-x:hover{background:#ffe9e9;color:#d33}

/* taxes */
.inv-taxrow{display:grid;grid-template-columns:minmax(0,1fr) 84px 18px 30px;gap:6px;align-items:center;margin-bottom:6px}
.inv-t-pcts{font-size:.8rem;color:var(--muted,#6b7688)}

/* totals */
.inv-totals{margin-top:12px;border-top:1px solid var(--line,#e4e9f2);padding-top:10px}
.inv-totals div{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:.86rem;color:var(--muted,#6b7688)}
.inv-totals b{color:var(--ink,#1c2737);font-variant-numeric:tabular-nums}
.inv-totals .inv-grand{margin-top:7px;padding-top:9px;border-top:1px solid var(--line,#e4e9f2);font-size:1rem}
.inv-totals .inv-grand span{font-weight:700;color:var(--ink,#1c2737)}
.inv-totals .inv-grand b{font-size:1.28rem;color:#0e7d3f}

/* workspace pull */
.inv-pull{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.inv-logo-wrap{display:flex;align-items:center;gap:10px}
.inv-logo-prev{max-width:120px;max-height:46px;border:1px solid var(--line,#e4e9f2);border-radius:6px;background:#fff;padding:3px}

/* ── live document preview ─────────────────────────────────────── */
.inv-prev-wrap{position:sticky;top:14px}
.inv-prev{background:#fff;border:1px solid var(--line,#e4e9f2);border-radius:12px;padding:26px 24px;
  box-shadow:0 6px 26px rgba(16,24,40,.07);font-size:11.5px;line-height:1.5;color:#1c2737}
.ivp-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.ivp-from{max-width:58%}
.ivp-logo{display:block;max-width:130px;max-height:46px;margin-bottom:8px}
.ivp-from b{display:block;font-size:13.5px;margin-bottom:3px}
.ivp-from span,.ivp-billto span{display:block;color:#69758c;font-size:10.5px}
.ivp-meta{text-align:right;min-width:150px}
.ivp-meta h4{margin:0 0 8px;font-size:21px;letter-spacing:.06em;color:#16233a}
.ivp-meta div{display:flex;justify-content:flex-end;gap:8px;font-size:10.5px;padding:1px 0}
.ivp-meta div span{color:#8a94a6}
.ivp-meta div b{font-variant-numeric:tabular-nums}
.ivp-billto{margin:18px 0 4px;padding-top:14px;border-top:1px solid #eceff5}
.ivp-billto > span:first-child{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a94a6}
.ivp-billto b{display:block;font-size:12.5px;margin:3px 0 2px}
.ivp-tbl{width:100%;border-collapse:collapse;margin-top:14px}
.ivp-tbl th{font-size:8.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a94a6;
  text-align:left;padding:0 0 6px;border-bottom:1px solid #dfe4ec}
.ivp-tbl th.r,.ivp-tbl td.r{text-align:right}
.ivp-tbl td{padding:7px 0;border-bottom:1px solid #f2f4f8;font-size:11px;vertical-align:top;font-variant-numeric:tabular-nums}
.ivp-tbl td:first-child{padding-right:12px;font-variant-numeric:normal}
.ivp-tot{margin-top:12px;margin-left:auto;width:56%}
.ivp-tot div{display:flex;justify-content:space-between;padding:2.5px 0;font-size:11px;color:#69758c}
.ivp-tot b{color:#1c2737;font-variant-numeric:tabular-nums}
.ivp-grand{margin-top:6px;padding-top:8px;border-top:1px solid #dfe4ec;font-size:13px!important}
.ivp-grand span{font-weight:700;color:#1c2737}
.ivp-grand b{font-size:15px}
.ivp-note{margin-top:16px;padding-top:12px;border-top:1px solid #f2f4f8;font-size:10.5px;color:#69758c}
.ivp-note b{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a94a6;margin-bottom:3px}

/* history modal */
.inv-ov{position:fixed;inset:0;z-index:80;background:rgba(16,24,40,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.inv-ov-box{background:#fff;border-radius:15px;width:min(560px,100%);max-height:78vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(16,24,40,.28)}
.inv-ov-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line,#e4e9f2)}
.inv-ov-head h3{margin:0;font-size:1rem}
.inv-ov-body{padding:12px 18px 18px;overflow:auto}
.inv-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line,#eef1f6)}
.inv-hrow b{display:block;font-size:.88rem}
.inv-hrow span{font-size:.75rem;color:var(--muted,#6b7688)}
.inv-hamt{font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums}
.inv-hrow button[data-act=open]{height:28px;padding:0 11px;border:1px solid var(--line,#dfe4ec);border-radius:7px;background:#fff;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.inv-hrow button[data-act=open]:hover{background:#eef4ff;border-color:#1159da;color:#1159da}

/* dark mode — the document itself stays paper-white on purpose */
html.dark .inv-card{background:#141a23;border-color:#232b38}
html.dark .inv-app input,html.dark .inv-app select,html.dark .inv-app textarea{background:#0f141b;border-color:#232b38;color:#e6ebf3}
html.dark .inv-btn{background:#0f141b;border-color:#232b38;color:#e6ebf3}
html.dark .inv-ov-box{background:#141a23}

/* ── company book + design picker ────────────────────────────────── */
.inv-coy{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px;gap:6px}
.inv-coy .inv-btn{justify-content:center;padding:0}
.inv-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.inv-theme{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:9px 10px;
  border:1.5px solid var(--line,#dfe4ec);border-radius:10px;background:#fff;cursor:pointer;font:inherit;
  transition:border-color .12s,transform .12s}
.inv-theme:hover{border-color:#1159da;transform:translateY(-1px)}
.inv-theme.on{border-color:#1159da;box-shadow:0 0 0 3px rgba(17,89,218,.12)}
.inv-theme-sw{width:100%;height:16px;border-radius:4px}
.inv-theme-nm{font-size:.76rem;font-weight:700;color:var(--ink,#1c2737)}
.inv-theme-x{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;background:#fff;
  border:1px solid var(--line,#dfe4ec);color:#98a3b5;font-size:13px;line-height:17px;text-align:center}
.inv-theme-x:hover{background:#ffe9e9;color:#d33;border-color:#f3b9b9}

/* ── theme variants for the live preview (mirror the PDF writer) ─── */
.inv-prev{--ivp-accent:#1159da}
.ivp-meta h4{color:var(--ivp-accent)}
/* band: coloured header strip with the logo + INVOICE reversed out */
.ivp-band{padding-top:0;overflow:hidden}
.ivp-band .ivp-top{background:var(--ivp-accent);margin:0 -24px 16px;padding:20px 24px 18px;color:#fff;align-items:flex-end}
.ivp-band .ivp-from b{color:#fff}
.ivp-band .ivp-from span{color:rgba(255,255,255,.82)}
.ivp-band .ivp-meta h4{color:#fff}
.ivp-band .ivp-meta div span{color:rgba(255,255,255,.72)}
.ivp-band .ivp-meta div b{color:#fff}
/* filled table header */
.ivp-headfill .ivp-tbl th{background:var(--ivp-accent);color:#fff;padding:6px 8px;border-bottom:0}
.ivp-headfill .ivp-tbl th:first-child{border-radius:5px 0 0 5px}
.ivp-headfill .ivp-tbl th:last-child{border-radius:0 5px 5px 0}
/* no rules */
.ivp-norules .ivp-tbl td{border-bottom:0}
.ivp-norules .ivp-billto{border-top:0}
/* total in a filled block */
.ivp-totalbox .ivp-grand{margin-top:8px;padding:9px 11px;border-top:0;border-radius:7px;
  background:var(--ivp-accent);color:#fff}
.ivp-totalbox .ivp-grand span,.ivp-totalbox .ivp-grand b{color:#fff}
/* no caps */
.ivp-nocaps .ivp-billto > span:first-child,.ivp-nocaps .ivp-tbl th,.ivp-nocaps .ivp-note b{text-transform:none;letter-spacing:.02em}
html.dark .inv-theme{background:#0f141b;border-color:#232b38}
html.dark .inv-theme-nm{color:#e6ebf3}

/* ── paste / CSV line-item import ─────────────────────────────────── */
.inv-itemacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.inv-imp{margin-top:12px;padding:12px;border:1px dashed var(--line,#dfe4ec);border-radius:10px;background:#f8fafd}
.inv-imp textarea{width:100%;margin-top:8px;padding:9px 11px;border:1px solid var(--line,#dfe4ec);border-radius:8px;
  background:#fff;color:inherit;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;
  white-space:pre;overflow-x:auto}
.inv-imp textarea:focus{outline:none;border-color:#1159da;box-shadow:0 0 0 3px rgba(17,89,218,.12)}
.inv-imp-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:9px}
.inv-imp-bar .inv-f{flex:1 1 190px;min-width:0}
.inv-imp-sp{flex:1 1 auto}
.inv-file{cursor:pointer;margin:0}
.inv-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.inv-btn[disabled]:hover{background:#fff;border-color:var(--line,#dfe4ec);color:inherit}
.inv-hint.inv-ok{color:#0e7d3f;font-weight:600}
.inv-hint.inv-warn{color:#b4402c;font-weight:600}
html.dark .inv-imp{background:#0d1219;border-color:#232b38}
html.dark .inv-imp textarea{background:#0f141b;border-color:#232b38;color:#e6ebf3}
html.dark .inv-btn[disabled]:hover{background:#0f141b;border-color:#232b38;color:#e6ebf3}
html.dark .inv-hint.inv-ok{color:#4ade80}
html.dark .inv-hint.inv-warn{color:#fca5a5}

/* ── line items: reflow before the description column collapses ──────
   The editor pane is ~655px at a 1440 viewport but only ~374px once the
   left rail appears on a narrower screen, and the fixed Qty/Unit/Rate/
   Amount columns alone eat 372px of that — which squeezed the description
   input down to 4px and made the row unusable. Below that point the row
   stacks and the hidden per-field labels come out, because the single
   column header at the top of the list can no longer sit above anything. */
.inv-i-lbl{display:none}
.inv-card{container-type:inline-size}
@container (max-width: 600px){
  .inv-head{display:none}
  .inv-row{
    /* minmax(0,…), NOT bare 1fr — a bare 1fr floors each track at its
       content's min-width, which pulled these four apart to 25/161/32/72px.
       Rate and Amount are weighted wider; they hold the long numbers. */
    grid-template-columns:minmax(0,.82fr) minmax(0,.78fr) minmax(0,1.15fr) minmax(0,1.25fr) 30px;
    grid-template-areas:"d d d d x" "lq lu lr la x" "q u r a x";
    row-gap:3px;margin-bottom:10px;padding:9px 9px 10px;
    border:1px solid var(--line,#dfe4ec);border-radius:10px;background:#fbfcfe}
  .inv-i-desc{grid-area:d;margin-bottom:3px}
  .inv-i-lbl{display:block;grid-area:l;font-size:.62rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted,#6b7688);padding-left:2px}
  .lb-q{grid-area:lq} .lb-u{grid-area:lu} .lb-r{grid-area:lr} .lb-a{grid-area:la;text-align:right;padding-right:2px}
  .inv-i-qty{grid-area:q} .inv-i-unit{grid-area:u} .inv-i-rate{grid-area:r}
  .inv-i-amt{grid-area:a;align-self:center}
  /* scoped to .inv-row — .inv-x is shared with the tax rows, whose grid has
     no "x" area, and an unknown grid-area there spawns implicit tracks that
     drop the × onto a line of its own */
  .inv-row .inv-x{grid-area:x;align-self:center}
}
html.dark .inv-row{background:transparent}
@container (max-width: 600px){ html.dark .inv-row{background:#0d1219;border-color:#232b38} }

/* ══ TABS ══════════════════════════════════════════════════════════ */
.inv-tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:1px solid var(--line,#dfe4ec);flex-wrap:wrap}
.inv-tab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:0;background:none;
  font:600 .84rem/1 inherit;color:var(--muted,#6b7688);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s,border-color .15s}
.inv-tab:hover{color:#1159da}
.inv-tab.on{color:#1159da;border-bottom-color:#1159da}
.inv-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:9px;background:var(--line,#e6eaf1);color:var(--muted,#6b7688);font-size:.66rem;font-weight:800}
.inv-tab.on .inv-tab-n{background:#1159da;color:#fff}

/* ══ REGISTER ══════════════════════════════════════════════════════ */
.inv-lbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.inv-chips{display:flex;gap:5px;flex-wrap:wrap}
.inv-chips button{height:32px;padding:0 13px;border:1px solid var(--line,#dfe4ec);border-radius:16px;background:#fff;
  font:600 .78rem/1 inherit;color:var(--muted,#6b7688);cursor:pointer;transition:.15s}
.inv-chips button:hover{border-color:#1159da;color:#1159da}
.inv-chips button.on{background:#1159da;border-color:#1159da;color:#fff}
.inv-search{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--line,#dfe4ec);
  border-radius:16px;background:#fff;color:var(--muted,#6b7688);font-size:.78rem}
.inv-search input{border:0;background:none;outline:none;font:inherit;color:inherit;width:150px}
.inv-list{border:1px solid var(--line,#dfe4ec);border-radius:10px;overflow:hidden}
.inv-lrow{display:grid;grid-template-columns:88px 104px minmax(0,1fr) 132px 96px 100px 100px 168px;gap:8px;
  align-items:center;padding:10px 12px;border-bottom:1px solid var(--line,#eef1f6);font-size:.82rem}
.inv-lrow:last-child{border-bottom:0}
.inv-lrow:hover{background:#f8fafd}
.inv-lhead{background:#f4f7fb;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted,#6b7688)}
.inv-lhead:hover{background:#f4f7fb}
.inv-lrow .r{text-align:right}
.inv-lc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-lnum{font-weight:700;color:#1159da}
.inv-lbal{font-weight:800;font-variant-numeric:tabular-nums}
.inv-lrow .r{font-variant-numeric:tabular-nums}
.inv-part{font-style:normal;font-size:.66rem;color:var(--muted,#6b7688);display:block;margin-top:2px}
.inv-lacts{display:flex;gap:5px;justify-content:flex-end;align-items:center}
.inv-lacts button{height:27px;padding:0 9px;border:1px solid var(--line,#dfe4ec);border-radius:6px;background:#fff;
  font:600 .72rem/1 inherit;color:var(--muted,#6b7688);cursor:pointer;white-space:nowrap;transition:.15s}
.inv-lacts button:hover{border-color:#1159da;color:#1159da}
.inv-lacts .inv-x{width:27px;padding:0}
.inv-empty{padding:26px 18px;text-align:center;font-size:.85rem}

/* status badges — one look, wherever a status is shown */
.inv-badge{display:inline-block;padding:3px 8px;border-radius:5px;font-size:.66rem;font-weight:800;letter-spacing:.04em;
  white-space:nowrap}
.b-paid {background:#e7f7ee;color:#0e7d3f}
.b-due  {background:#e9f0ff;color:#1159da}
.b-over {background:#fdeceb;color:#b4402c}
.b-open {background:#f2f4f8;color:#6b7688}
.b-draft{background:#f2f4f8;color:#8a93a6}

/* ══ DASHBOARD ═════════════════════════════════════════════════════ */
.inv-curbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.inv-cur{height:30px;padding:0 12px;border:1px solid var(--line,#dfe4ec);border-radius:15px;background:#fff;
  font:700 .76rem/1 inherit;color:var(--muted,#6b7688);cursor:pointer}
.inv-cur i{font-style:normal;opacity:.6;font-size:.68rem}
.inv-cur.on{background:#1159da;border-color:#1159da;color:#fff}
.inv-dcard{border:1px solid var(--line,#dfe4ec);border-radius:12px;padding:15px 16px 16px;margin-bottom:14px;background:#fff}
.inv-dhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.inv-dhead h4{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#6b7688)}
.inv-dhead b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink,#1c2737)}
.inv-agebar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eef1f6;margin-bottom:14px}
.inv-agebar span{display:block;height:100%}
.ab-current{background:#4a7dff} .ab-d15{background:#f3c04a} .ab-d30{background:#eda93c}
.ab-d45{background:#e08a35} .ab-d45p{background:#d4602e} .ab-none{background:#eef1f6;width:100%}
.inv-agegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}
.ag{display:flex;flex-direction:column;gap:3px}
.ag-l{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7688)}
.ag-cur{color:#1159da} .ag-ovr{color:#b4402c}
.ag b{font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink,#1c2737)}
.ag-sep{border-left:1px solid var(--line,#e6eaf1);padding-left:12px}
.inv-key{font-size:.7rem;color:var(--muted,#6b7688);display:inline-flex;align-items:center;gap:5px}
.inv-key i{display:inline-block;width:9px;height:9px;border-radius:2px}
i.k-b{background:#4a7dff} i.k-g{background:#3fb27f}
.inv-chart{display:flex;align-items:flex-end;gap:8px;height:132px}
.inv-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;height:100%}
.inv-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%}
.inv-bars i{display:block;width:44%;max-width:20px;border-radius:2px 2px 0 0;min-height:1px}
.inv-col span{font-size:.62rem;color:var(--muted,#6b7688);white-space:nowrap}
.inv-wins{border:1px solid var(--line,#eef1f6);border-radius:8px;overflow:hidden}
.inv-wrow{display:grid;grid-template-columns:minmax(0,1fr) 1fr 1fr 1fr;gap:8px;padding:8px 12px;font-size:.82rem;
  border-bottom:1px solid var(--line,#eef1f6);font-variant-numeric:tabular-nums}
.inv-wrow:last-child{border-bottom:0}
.inv-whead{background:#f4f7fb;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7688)}
.inv-wrow .r{text-align:right}
.inv-ov-sm .inv-ov-box{max-width:420px}
.inv-paywho{margin:0;font-weight:800;font-size:.95rem;color:var(--ink,#1c2737)}
.inv-payacts{display:flex;align-items:center;gap:8px;margin-top:14px}

/* The register is a wide table, and the panel it sits in is far narrower
   than the window — ~800px at a 1148px viewport. A viewport media query
   therefore never fires when it is actually needed, and the Client column
   collapses to zero while the row overflows. Query the CONTAINER. */
.inv-view{container-type:inline-size}
@container (max-width:940px){
  .inv-lhead{display:none}
  .inv-lrow{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px;
    border-bottom:1px solid var(--line,#eef1f6)}
  .inv-lc{white-space:normal}
  .inv-lc:before{content:attr(data-l) " ";font-size:.62rem;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted,#8a93a6);margin-right:5px}
  .inv-lrow .inv-lc.r{text-align:left}
  .inv-lacts{grid-column:1/-1;justify-content:flex-start;margin-top:6px}
}

html.dark .inv-tab-n{background:#232b38;color:#9aa6b8}
html.dark .inv-chips button,html.dark .inv-search,html.dark .inv-cur,html.dark .inv-lacts button{background:#0f141b;border-color:#232b38;color:#9aa6b8}
html.dark .inv-chips button.on,html.dark .inv-cur.on{background:#1159da;border-color:#1159da;color:#fff}
html.dark .inv-list,html.dark .inv-dcard,html.dark .inv-wins{background:#0d1219;border-color:#232b38}
html.dark .inv-lrow,html.dark .inv-wrow{border-color:#1b2230}
html.dark .inv-lhead,html.dark .inv-whead,html.dark .inv-lhead:hover{background:#131a24}
html.dark .inv-lrow:hover{background:#131a24}
html.dark .inv-dhead b,html.dark .ag b,html.dark .inv-paywho{color:#e6ebf3}
html.dark .inv-agebar{background:#1b2230}
html.dark .b-open,html.dark .b-draft{background:#1b2230;color:#9aa6b8}

/* ══ EDIT ON THE DOCUMENT ══════════════════════════════════════════════
   The invoice page IS the editor: one renderer, one set of markup, so the
   thing you click is literally the thing your client reads. The form view
   is still there behind the toggle — it holds the settings that have no
   home on a printed page (currency, design, company, Workspace). */
.inv-modesw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:.8rem;
  font-weight:600;color:var(--muted,#6b7688)}
.inv-modesw input{position:absolute;opacity:0;pointer-events:none}
.inv-modesw > span{width:36px;height:20px;border-radius:10px;background:#d7dde7;position:relative;transition:background .16s;flex:none}
.inv-modesw > span:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.28);transition:transform .16s}
.inv-modesw input:checked + span{background:#1159da}
.inv-modesw input:checked + span:after{transform:translateX(16px)}
.inv-modesw input:focus-visible + span{box-shadow:0 0 0 3px rgba(17,89,218,.28)}

/* document mode: the page goes full width and centres; the form column
   becomes a setup drawer you open only when you need it */
.inv-docmode .inv-grid{grid-template-columns:minmax(0,1fr)}
.inv-docmode .inv-edit{display:none}
.inv-docmode .inv-prev-wrap{position:static;max-width:780px;margin:0 auto;width:100%}
.inv-docmode .inv-prev{padding:34px 32px}

/* the editable affordance — invisible until you go near it, because this
   is a document first and a form second */
.ivp-ed{border-radius:3px;transition:background .12s,box-shadow .12s;outline:none;min-width:12px}
.ivp-live .ivp-ed:hover{background:rgba(17,89,218,.06);box-shadow:0 0 0 2px rgba(17,89,218,.10)}
.ivp-live .ivp-ed:focus{background:rgba(17,89,218,.07);box-shadow:0 0 0 2px rgba(17,89,218,.34)}
/* :empty only — do NOT try :has(br:only-child) here: :only-child counts
   ELEMENT children, so "text<br>more text" matches it and the placeholder
   prints straight over real content. Browsers leave a stray <br> behind
   when a contenteditable is cleared; that is scrubbed in JS instead. */
.ivp-live .ivp-ed:empty:before{
  content:attr(data-ph);color:#b3bccc;font-weight:400;pointer-events:none}
.ivp-live b.ivp-ed:empty:before{font-weight:inherit}
.ivp-live .ivp-d{display:block;min-height:1.4em}
.ivp-live .ivp-q,.ivp-live .ivp-u,.ivp-live .ivp-r,.ivp-live .ivp-tl,.ivp-live .ivp-tp{font-style:normal;display:inline-block}
.ivp-live .ivp-q,.ivp-live .ivp-r,.ivp-live .ivp-tp{min-width:22px;text-align:right}
.ivp-live .ivp-u{min-width:16px;color:#69758c}
.ivp-live .ivp-tlab{font-style:normal}
.ivp-live .ivp-nm:empty:before{color:#c3ccda}
/* dates: the ISO text the PDF prints, plus a picker button. The native
   input is kept only to open the calendar — it is never what you read. */
.ivp-dt{display:inline-flex;align-items:center;gap:2px;position:relative}
.ivp-dv{font-variant-numeric:tabular-nums}
.ivp-cal{border:0;background:none;padding:0 2px;color:#b3bccc;font-size:9.5px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .12s,color .12s}
.ivp-dt:hover .ivp-cal,.ivp-cal:focus-visible{opacity:1}
.ivp-cal:hover{color:#1159da}
.ivp-dhide{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none}
/* logo */
.ivp-logoadd{display:inline-block;margin-bottom:8px;padding:5px 11px;border:1px dashed #c3ccda;border-radius:7px;
  background:none;color:#8a94a6;font:600 10px/1 inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.ivp-logoadd:hover{border-color:#1159da;color:#1159da}
.ivp-live .ivp-logo{cursor:pointer;border-radius:3px}
.ivp-live .ivp-logo:hover{box-shadow:0 0 0 2px rgba(17,89,218,.34)}
/* per-row delete, revealed on hover so the page stays clean */
.ivp-xcol{width:20px;padding:0!important}
.ivp-xrow{width:18px;height:18px;border:0;border-radius:4px;background:none;color:#c3ccda;font-size:15px;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .12s}
.ivp-tbl tr:hover .ivp-xrow,.ivp-taxr:hover .ivp-xrow,.ivp-xrow:focus-visible{opacity:1}
.ivp-xrow:hover{background:#ffe9e9;color:#d33}
.ivp-addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ivp-addrow button,.ivp-addtax button{border:1px dashed #d7dde7;border-radius:7px;background:none;padding:5px 11px;
  color:#8a94a6;font:600 10.5px/1 inherit;cursor:pointer;transition:.12s}
.ivp-addrow button:hover,.ivp-addtax button:hover{border-color:#1159da;color:#1159da;border-style:solid}
.ivp-addtax{display:flex;justify-content:flex-end;padding:3px 0}
.ivp-taxr span{display:inline-flex;align-items:center;gap:2px}
.inv-docmode .inv-prev-wrap > .inv-hint{max-width:780px;margin-left:auto;margin-right:auto}

html.dark .inv-modesw > span{background:#2b3444}
html.dark .ivp-logoadd,html.dark .ivp-addrow button,html.dark .ivp-addtax button{border-color:#39445a;color:#8b96a8}

/* ── the client book ──────────────────────────────────────────────── */
.inv-share{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line,#e4e9f2);cursor:pointer;user-select:none}
.inv-share input{position:absolute;opacity:0;pointer-events:none}
.inv-share > span{width:34px;height:19px;border-radius:10px;background:#d7dde7;position:relative;flex:none;transition:background .16s}
.inv-share > span:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.28);transition:transform .16s}
.inv-share input:checked + span{background:#0e7d3f}
.inv-share input:checked + span:after{transform:translateX(15px)}
.inv-share input:focus-visible + span{box-shadow:0 0 0 3px rgba(14,125,63,.3)}
.inv-share b{font-size:.82rem;font-weight:700;color:var(--ink,#1c2737)}
html.dark .inv-share > span{background:#2b3444}
html.dark .inv-share b{color:#e6ebf3}

/* ══ CLIENTS TAB ═══════════════════════════════════════════════════ */
.inv-cform{border:1px solid #1159da;border-radius:12px;padding:15px 16px 16px;margin-bottom:14px;
  background:#f7faff;box-shadow:0 4px 18px rgba(17,89,218,.09)}
.inv-cform h4{margin:0 0 12px;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1159da}
.inv-cfacts{display:flex;align-items:center;gap:8px;margin-top:12px}
.inv-cfacts .inv-sp{flex:1 1 auto}
.inv-clist{border:1px solid var(--line,#dfe4ec);border-radius:10px;overflow:hidden}
.inv-crow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 13px;
  border-bottom:1px solid var(--line,#eef1f6)}
.inv-crow:last-child{border-bottom:0}
.inv-crow:hover{background:#f8fafd}
.inv-cmain{min-width:0}
.inv-cmain b{display:block;font-size:.9rem;color:var(--ink,#1c2737)}
.inv-cmain span{display:block;font-size:.76rem;color:var(--muted,#6b7688);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-cbadge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;background:#e9f0ff;color:#1159da;
  font-size:.62rem;font-weight:800;letter-spacing:.04em;font-style:normal;vertical-align:1px}
.inv-cacts{display:flex;gap:5px;align-items:center;flex:none}
.inv-cacts button{height:28px;padding:0 10px;border:1px solid var(--line,#dfe4ec);border-radius:7px;background:#fff;
  font:600 .74rem/1 inherit;color:var(--muted,#6b7688);cursor:pointer;white-space:nowrap;transition:.15s}
.inv-cacts button:hover{border-color:#1159da;color:#1159da}
.inv-cacts .inv-x{width:28px;padding:0;border-color:transparent}

/* ══ DESIGNS TAB ═══════════════════════════════════════════════════ */
.inv-dsgn{max-width:760px;margin:0 auto 18px}
.inv-dsgn-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.inv-dsgn-bar .inv-f{flex:0 0 170px;margin:0}
.inv-dsgn-prev{max-width:780px;margin:0 auto;width:100%;position:static}
.inv-dsgn-prev .inv-prev{pointer-events:none}

/* ══ CLIENT TYPEAHEAD ══════════════════════════════════════════════ */
.inv-ac{position:absolute;z-index:120;max-width:420px;max-height:288px;overflow:auto;background:#fff;
  border:1px solid var(--line,#dfe4ec);border-radius:11px;box-shadow:0 14px 40px rgba(16,24,40,.18);padding:5px}
.inv-ac-row{padding:7px 10px;border-radius:7px;cursor:pointer}
.inv-ac-row b{display:block;font-size:.85rem;font-weight:700;color:var(--ink,#1c2737)}
.inv-ac-row span{display:block;font-size:.74rem;color:var(--muted,#6b7688);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-ac-row:hover,.inv-ac-row.on{background:#eef4ff}
.inv-ac-new{border-top:1px solid var(--line,#eef1f6);margin-top:4px;padding-top:9px;border-radius:0 0 7px 7px}
.inv-ac-new b{color:#1159da}
html.dark .inv-ac{background:#0f141b;border-color:#232b38}
html.dark .inv-ac-row b{color:#e6ebf3}
html.dark .inv-ac-row:hover,html.dark .inv-ac-row.on{background:#182130}
html.dark .inv-cform{background:#101724;border-color:#1159da}
html.dark .inv-clist{background:#0d1219;border-color:#232b38}
html.dark .inv-crow{border-color:#1b2230}
html.dark .inv-crow:hover{background:#131a24}
html.dark .inv-cmain b{color:#e6ebf3}
html.dark .inv-cacts button{background:#0f141b;border-color:#232b38;color:#9aa6b8}

/* ── share with the client ────────────────────────────────────────── */
.inv-shbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:12px}
.inv-shbox input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem}
.inv-lacts button[data-act="lshare"]{border-color:#c9d8f6;color:#1159da}
.inv-lacts button[data-act="lshare"]:hover{background:#eef4ff}
html.dark .inv-lacts button[data-act="lshare"]{border-color:#26375c;color:#7ea6ff}


/* ══ POPOVERS ══════════════════════════════════════════════════════════
   The four controls a printed invoice has no room for. Each hangs off the
   thing that calls for it — Business and Currency from the toolbar, hours
   and paste/import from the buttons under the line items — instead of all
   four living in a drawer that also duplicated the whole form. */
.inv-pop{position:absolute;z-index:130;min-width:290px;max-width:min(460px,92vw);
  background:#fff;border:1px solid var(--line,#dfe4ec);border-radius:13px;padding:14px 15px 15px;
  box-shadow:0 18px 48px rgba(16,24,40,.19)}
.inv-pop h4{margin:0 0 11px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted,#6b7688)}
.inv-pop .inv-pop-body > *:last-child{margin-bottom:0}
.inv-pop .inv-imp{margin-top:0;border:0;padding:0;background:none}
.inv-pop .inv-pull{grid-template-columns:1fr 1fr}
.inv-pop #invPullWrap .inv-hint{margin-top:9px}
.inv-pop .inv-logo-wrap{margin-top:11px}
/* the two toolbar triggers belong to document mode only — in form view their
   controls have moved back into the column, so the popover would be empty */
.inv-popbtn{display:none}
.inv-docmode .inv-popbtn{display:inline-flex}
.inv-popbtn.on{background:#eef4ff;border-color:#1159da;color:#1159da}
.inv-popbtn .fa-angle-down{font-size:.7em;opacity:.6}
/* the invoice is centred on its own now that nothing sits beside it */
.inv-docmode .inv-edit{display:none}
html.dark .inv-pop{background:#0f141b;border-color:#232b38}
html.dark .inv-popbtn.on{background:#182130;border-color:#1159da;color:#7ea6ff}