/* Tamra site v2 — Expenses module page (modules/expenses.html).
   Mock-ups drawn from src/modules/accounting/Expenses.jsx (the claim editor, 921-1603), components/FilesRail.jsx,
   expenses/claimActions.jsx + ui/Dialog.jsx (approve), expenses/ClaimDialogs.jsx + ui/Modal.jsx (reimburse) and
   expenses/Advances.jsx. Every selector is scoped under .vg-xp / .vg-xa (mock-ups) or .xp- (page). */

/* ── the claim editor: EXP-0042, with the receipts of its lines in the Files rail ─────────────────── */
.vg-xp .page{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:18px;padding:14px 16px 0 22px}
.vg-xp .xp-ed{min-width:0;position:relative}
.vg-xp .xp-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.vg-xp .xp-h1{display:flex;align-items:center;gap:10px;font:800 22px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-xp .xp-pill{display:inline-grid;font:700 11.5px/1.4 "Inter",sans-serif;letter-spacing:.02em}
.vg-xp .xp-pill em{grid-area:1/1;padding:3px 10px;border-radius:999px;white-space:nowrap;transition:opacity .4s ease}
.vg-xp .xp-pill .s-dr{background:rgba(0,0,0,.06);color:#626976;border:1px solid rgba(0,0,0,.08)}
.vg-xp .xp-pill .s-sb{background:rgba(37,99,235,.10);color:#2563EB;border:1px solid rgba(37,99,235,.22);opacity:0}
.vg-xp .xp-pill .s-ap{background:rgba(30,142,90,.10);color:#1E8E5A;border:1px solid rgba(30,142,90,.22);opacity:0}
.vg-xp[data-state=approve] .xp-pill .s-dr,.vg-xp[data-state=pay] .xp-pill .s-dr{opacity:0}
.vg-xp[data-state=approve] .xp-pill .s-sb,.vg-xp[data-state=pay] .xp-pill .s-ap{opacity:1}
.vg-xp .xp-sub{display:flex;align-items:center;gap:8px;margin-top:5px}
.vg-xp .xp-emp{font-size:11.5px;color:#626976}
.vg-xp .xp-acts{display:flex;align-items:center;gap:8px}
.vg-xp .xp-fb{border-color:#1E8E5A;background:rgba(0,0,0,.04);color:#0F1A2B}
.vg-xp .xp-fb i,.vg-xp .xf-h em{display:inline-grid}
.vg-xp .xp-fb i b,.vg-xp .xf-h em b{grid-area:1/1;font:inherit}
.vg-xp .xp-fb i .n1,.vg-xp .xp-fb i .n2,.vg-xp .xf-h em .n0,.vg-xp .xf-h em .n1,.vg-xp .xf-h em .n2{opacity:0}

.vg-xp label{display:block;font:700 10px/1.2 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.vg-xp .in{display:flex;align-items:center;justify-content:space-between;gap:8px;height:31px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid #D6DEE8;font-size:13px;color:#0F1A2B;white-space:nowrap;overflow:hidden}
.vg-xp .in .ic{width:13px;height:13px;color:#626976}
.vg-xp .xp-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:11px 16px;border-radius:12px;background:#fff;border:1px solid #D6DEE8;margin-bottom:10px}
.vg-xp .xp-stack{display:grid}
.vg-xp .xp-stack>div{grid-area:1/1}
.vg-xp .xp-stack b{display:block;font:800 20px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;letter-spacing:-.005em}
.vg-xp .xp-stack small{display:block;font-size:11px;color:#626976;margin-top:1px}
.vg-xp .xp-stack .k0,.vg-xp .xp-stack .k1,.vg-xp .xp-stack .k2,.vg-xp .xp-lf .k0,.vg-xp .xp-lf .k1,.vg-xp .xp-lf .k2{opacity:0}

/* the lines table (Expenses.jsx 1410-1567): header band, one row per line, its tax-receipt row and its notes */
.vg-xp .xp-lines{border-radius:12px;background:#fff;border:1px solid #D6DEE8;overflow:hidden}
.vg-xp .xp-g{display:grid;grid-template-columns:104px minmax(0,1fr) 84px 52px 46px 78px 136px 64px 98px 30px;column-gap:8px;padding:0 8px}
.vg-xp .xp-lh{background:#F1F4F8;border-bottom:1px solid #D6DEE8;font:800 9.5px/1 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#444D5A;padding-top:9px;padding-bottom:9px}
.vg-xp .r{text-align:right;justify-content:flex-end}
.vg-xp .xp-ln{border-bottom:1px solid rgba(0,0,0,.03)}
.vg-xp .xp-lr{align-items:start;padding-top:5px;padding-bottom:5px}
.vg-xp .xp-lr>span{min-width:0}
.vg-xp .f{position:relative;display:flex;align-items:center;height:26px;padding:0 6px;border-radius:8px;border:1px solid #D6DEE8;background:#fff;font-size:11px;line-height:1;color:#0F1A2B;white-space:nowrap;overflow:hidden}
.vg-xp .f>em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vg-xp .f.s{padding-right:18px}
.vg-xp .f.s>.ic{position:absolute;right:5px;top:50%;width:11px;height:11px;margin-top:-5.5px;color:#626976}
.vg-xp .f .ph{position:absolute;left:6px;top:50%;transform:translateY(-50%);color:#9AA3AF;opacity:0}
.vg-xp .f.s .ph{color:#0F1A2B}
.vg-xp .f.r .ph{left:auto;right:6px}
.vg-xp .xp-vat{display:flex;flex-direction:column}
.vg-xp .xp-va,.vg-xp .xp-x,.vg-xp .xp-n,.vg-xp .xp-dup{display:grid;grid-template-rows:1fr}
.vg-xp .xp-va>span,.vg-xp .xp-x>div,.vg-xp .xp-n>div,.vg-xp .xp-dup>div{min-height:0;overflow:hidden}
.vg-xp .xp-va .f{height:22px;margin-top:3px}
.vg-xp .b{position:relative;display:block;padding-top:7px;text-align:right;font-size:11px;color:#444D5A}
.vg-xp .b .ph{position:absolute;right:0;top:7px;opacity:0}
.vg-xp .rc{position:relative;display:grid;align-items:center;justify-items:start;height:26px}
.vg-xp .rc>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.vg-xp .rc .ic{width:10px;height:10px}
.vg-xp .rc-up{padding:4px 8px;border-radius:4px;border:1px dashed rgba(0,0,0,.15);color:#444D5A;font-size:10px;opacity:0}
.vg-xp .rc-up.on{opacity:1}
.vg-xp .rc-rd{font:600 10px/1 "Inter",sans-serif;color:#444D5A;opacity:0}
.vg-xp .rc-rd .ic{width:11px;height:11px}
.vg-xp .rc-rd b{font-weight:600;margin-left:-1px}
.vg-xp .vw{display:inline-flex;align-items:center;gap:3px;padding:4px 6px;border-radius:4px;border:1px solid rgba(37,99,235,.3);background:rgba(37,99,235,.08);color:#2563EB;font-size:10px}
.vg-xp .rr{display:inline-flex;padding:3px 5px;border-radius:4px;border:1px solid rgba(0,0,0,.12);color:#444D5A}
.vg-xp .rr .ic{width:11px;height:11px}
.vg-xp .rx{color:#E11D48}
.vg-xp .xp-tg{display:flex;align-items:center;gap:3px;padding-top:7px}
.vg-xp .xp-tg .ic{width:12px;height:12px;color:#626976}
.vg-xp .xp-tg .rx{color:#E11D48}
/* the tax-receipt row: supplier, TRN and receipt number, for the VAT return */
.vg-xp .xp-xr{display:flex;align-items:center;gap:6px;padding:0 8px 6px;font-size:10.5px;color:#626976}
.vg-xp .xl{font:700 9.5px/1 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.vg-xp .xp-xr .f{height:24px;padding:0 8px}
.vg-xp .w1{width:196px}.vg-xp .w2{width:148px}.vg-xp .w3{width:118px}
.vg-xp .xt{flex:1;min-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the notes under a line: what reading the receipt filled, and anything it noticed */
.vg-xp .xp-nb{margin:0 8px 6px;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.025)}
.vg-xp .xp-nb p{display:flex;align-items:flex-start;gap:6px;font-size:11px;line-height:1.45;color:#626976}
.vg-xp .xp-nb p .ic{width:11px;height:11px;flex:none;margin-top:2px}
.vg-xp .xp-nb a{margin-left:8px;color:#2563EB;font-weight:700}
.vg-xp .xp-nb .w{color:#9A5B00;padding-top:3px}
.vg-xp .xp-dup{grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.vg-xp[data-state=dup] .xp-dup{grid-template-rows:1fr}
.vg-xp[data-state=dup] .xp-dup .w{animation:xpWarn 1.6s ease .45s}
@keyframes xpWarn{25%{background:rgba(154,91,0,.10)}}
/* mileage: distance × the category's rate, no VAT */
.vg-xp .xp-cur,.vg-xp .xp-nv{display:block;padding-top:7px;font-size:11px;color:#444D5A}
.vg-xp .xp-nv{text-align:right;font-size:10.5px;color:#626976}
.vg-xp .xp-km{display:block}
.vg-xp .xp-km .f{justify-content:flex-end;padding-right:24px;font-size:12px}
.vg-xp .xp-km i{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;color:#626976}
.vg-xp .xp-km small{display:block;margin-top:2px;text-align:right;font-size:9.5px;color:#626976;white-space:nowrap}
.vg-xp .xp-mile .xp-lr{padding-bottom:7px}
/* footer and the add row */
.vg-xp .xp-lf{background:#F1F4F8;font-weight:700;padding-top:9px;padding-bottom:9px;align-items:baseline}
.vg-xp .xp-lfl{grid-column:1/8;display:grid;justify-items:end;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#444D5A}
.vg-xp .xp-lft{display:grid;justify-items:end;font-size:14px;color:#0F1A2B}
.vg-xp .xp-lf em{grid-area:1/1;white-space:nowrap}
.vg-xp .xp-add{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid #E6ECF2}
.vg-xp .ab{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;border:1px dashed rgba(0,0,0,.15);color:#444D5A;font:600 11px/1.2 "Inter",sans-serif}
.vg-xp .ab .ic{width:11px;height:11px}
.vg-xp .an{font-size:10.5px;color:#626976}
.vg-xp .xp-notes{margin-top:12px}
.vg-xp .xp-notes .in{height:auto;padding:8px 10px;white-space:normal;align-items:flex-start;min-height:52px;color:#444D5A}

/* the Files rail: the receipts of the lines (FilesRail.jsx 218-284) */
.vg-xp .xp-files{align-self:start;height:714px;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff;overflow:hidden}
.vg-xp .xf-h{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-bottom:1px solid rgba(0,0,0,.07)}
.vg-xp .xf-h>.ic{width:13px;height:13px;color:#626976}
.vg-xp .xf-h>b{font:700 12px/1 "Inter",sans-serif;letter-spacing:.01em}
.vg-xp .xf-h em{font-size:11px;color:#626976}
.vg-xp .xf-tools{margin-left:auto;display:flex;gap:4px;color:#626976}
.vg-xp .xf-tools .ic{width:26px;height:26px;padding:6.5px}
.vg-xp .xf-chips{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.07);overflow:hidden}
.vg-xp .xf-row{display:flex;gap:6px;transform:translateX(var(--xf-shift,-178px))}
.vg-xp .xf-c{display:inline-flex;align-items:center;gap:6px;max-width:180px;flex:none;padding:5px 9px;border-radius:999px;border:1px solid rgba(0,0,0,.10);font-size:11.5px;color:#444D5A;white-space:nowrap;overflow:hidden}
.vg-xp .xf-c span{overflow:hidden;text-overflow:ellipsis}
.vg-xp .xf-c .ic{width:12px;height:12px}
.vg-xp .xf-c.c3{border-color:#1E8E5A;background:rgba(0,0,0,.04);color:#0F1A2B;font-weight:600}
.vg-xp .xf-view{position:relative;flex:1;min-height:0;background:rgba(0,0,0,.03);overflow:hidden}
.vg-xp .xf-empty{position:absolute;left:0;right:0;top:0;padding:40px 20px;text-align:center;font-size:12.5px;line-height:1.6;color:#626976;opacity:0}
.vg-xp .xf-img{position:absolute;left:0;right:0;top:0;padding:10px;opacity:0}
.vg-xp .xf-3{opacity:1}
.vg-xp .xf-foot{display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid rgba(0,0,0,.07);font-size:11px;color:#626976}
.vg-xp .xf-fn{flex:1;display:grid;min-width:0}
.vg-xp .xf-fn em{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-xp .xf-fn .n1,.vg-xp .xf-fn .n2{opacity:0}
.vg-xp .xf-z{display:inline-flex;align-items:center;gap:10px;padding-right:6px}
.vg-xp .xf-z .ic{width:12px;height:12px}
/* the hotel's folio, as the PDF page the rail draws */
.vg-xp .fo{position:relative;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(15,23,42,.12);padding:20px 18px 16px;height:452px;font-size:8.5px;color:#1F2937;font-variant-numeric:tabular-nums}
.vg-xp .fo-h{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:2px solid #2F5D62}
.vg-xp .fo-logo{width:32px;height:32px;border-radius:50%;background:#2F5D62;color:#fff;display:grid;place-items:center;font:800 11px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.04em}
.vg-xp .fo-h b{display:inline-block;font:800 11.5px/1.2 "Plus Jakarta Sans",sans-serif;color:#17363A;letter-spacing:.06em}
.vg-xp .fo-h small{display:block;font-size:7.5px;color:#6B7280;margin-top:2px}
.vg-xp .fo-h small.rf{display:inline-block}
.vg-xp .fo-t{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.vg-xp .fo-t small{display:block;font-size:7px;color:#6B7280;letter-spacing:.06em}
.vg-xp .fo-t b{display:block;font-size:9.5px;margin:2px 0 1px}
.vg-xp .fo-no{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.vg-xp .fo-no b{font:800 10.5px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:.07em;color:#17363A;margin:0 0 2px}
.vg-xp .fo-l{display:grid;grid-template-columns:1fr 40px 60px;gap:6px;padding:6px 2px;border-bottom:1px solid #EEF0F3}
.vg-xp .fo-l span:nth-child(n+2){text-align:right}
.vg-xp .fo-lh{margin-top:18px;background:#EAF1F1;border-bottom:0;font-weight:700;font-size:7.5px;color:#17363A}
.vg-xp .fo-tot{width:58%;margin:10px 0 0 auto;padding:2px}
.vg-xp .fo-tot div{display:flex;justify-content:space-between;padding:3px 0}
.vg-xp .fo-tot .g{font-weight:800;border-top:1px solid #17363A;margin-top:3px;padding-top:5px;font-size:9.5px}
.vg-xp .fo-f{position:absolute;left:18px;right:18px;bottom:14px;padding-top:8px;border-top:1px solid #EEF0F3}
.vg-xp .fo-f small{font-size:7px;color:#6B7280}
/* thermal receipts, photographed: the paper on a counter */
.vg-xp .xf-img.pho{height:476px}
.vg-xp .xf-img.pho::before{content:"";position:absolute;inset:10px;border-radius:4px;background:radial-gradient(120% 90% at 30% 20%,#D8D3CA,#C4BEB3 60%,#B3AC9F);box-shadow:inset 0 0 40px rgba(60,50,35,.18)}
.vg-xp .tr{position:relative;width:204px;margin:46px auto 0;padding:18px 14px 22px;background:#FBFAF6;display:flex;flex-direction:column;align-items:center;gap:2px;
  font:500 8.5px/1.5 "SF Mono",Monaco,ui-monospace,"Courier New",monospace;color:#2A2A2A;text-align:center;box-shadow:0 1px 2px rgba(40,30,15,.18),0 10px 22px -8px rgba(40,30,15,.45)}
.vg-xp .tr-a{transform:rotate(-1.6deg)}
.vg-xp .tr-b{transform:rotate(1.2deg);margin-top:64px}
.vg-xp .tr::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:6px;background:linear-gradient(-45deg,transparent 3px,#FBFAF6 0) 0 0/6px 6px repeat-x,linear-gradient(45deg,transparent 3px,#FBFAF6 0) 0 0/6px 6px repeat-x}
.vg-xp .tr-n{font-size:10.5px;font-weight:800;letter-spacing:.05em}
.vg-xp .tr-big{font-size:17px;letter-spacing:.12em}
.vg-xp .tr small{font-size:8px;color:#4B4B4B}
.vg-xp .tr-s{margin-top:4px;font-weight:700;letter-spacing:.12em}
.vg-xp .tr-l{display:flex;justify-content:space-between;align-self:stretch;gap:8px}
.vg-xp .tr-l em{font-style:normal}
.vg-xp .tr-t{font-weight:800;font-size:9.5px;margin-top:2px}
.vg-xp .tr-hr{display:block;align-self:stretch;height:0;border-top:1px dashed #9A9A9A;margin:5px 0}
.vg-xp .tr-c{margin-top:8px}
.vg-xp .rf{border-radius:2px}
.vg-xp .scan{position:absolute;left:-6px;right:-6px;top:0;height:2px;z-index:2;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,142,90,0),#1E8E5A 18%,#34C27F 50%,#1E8E5A 82%,rgba(30,142,90,0));box-shadow:0 0 12px 3px rgba(52,194,127,.45)}

/* ── the approve dialog (claimActions.jsx 31-36 through ui/Dialog.jsx's confirm) ──────────────────── */
.vg-xp .xp-ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.vg-xp .xp-ok{background:rgba(4,6,12,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.vg-xp .xp-pay{background:rgba(7,11,20,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vg-xp[data-state=approve] .xp-ok,.vg-xp[data-state=pay] .xp-pay{opacity:1;visibility:visible;transition:opacity .45s ease}
.vg-xp .xp-cd,.vg-xp .xp-md{transform:translateY(8px) scale(.985);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vg-xp[data-state=approve] .xp-cd,.vg-xp[data-state=pay] .xp-md{transform:none}
.vg-xp .xp-cd{width:460px;padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.vg-xp .cd-h{display:flex;gap:13px;align-items:flex-start}
.vg-xp .cd-i{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(245,158,11,.12);color:#F59E0B}
.vg-xp .cd-i .ic{width:17px;height:17px}
.vg-xp .cd-h b{display:block;padding-top:1px;font:800 15px/1.35 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-xp .cd-h p{font-size:12.5px;line-height:1.6;color:#444D5A;margin-top:5px}
.vg-xp .cd-h p+p{margin-top:20px}
.vg-xp .cd-b{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.vg-xp .cd-no,.vg-xp .cd-yes{padding:8px 15px;border-radius:9px;font:700 12.5px/1.2 "Plus Jakarta Sans",sans-serif}
.vg-xp .cd-no{border:1px solid rgba(0,0,0,.14);color:#626976}
.vg-xp .cd-yes{padding:8px 17px;background:#1E8E5A;color:#fff}
/* ── the reimburse dialog (ClaimDialogs.jsx 182-291; the older Modal kit, its own light colours) ── */
.vg-xp .xp-md{width:500px;border-radius:10px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 2px 6px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06),0 30px 60px -20px rgba(7,11,20,.35);overflow:hidden}
.vg-xp .md-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #E2E8F0}
.vg-xp .md-bar{width:3px;height:22px;border-radius:3px;background:#0F1A2B;flex:none}
.vg-xp .md-h b{display:block;font:700 16px/1.25 "Plus Jakarta Sans",sans-serif;color:#0F172A;letter-spacing:-.01em}
.vg-xp .md-h small{display:block;font-size:11px;color:#64748B;margin-top:2px}
.vg-xp .md-h>.ic{margin-left:auto;width:16px;height:16px;color:#0F172A;opacity:.7}
.vg-xp .md-b{padding:20px}
.vg-xp .md-b label{margin-bottom:5px}
.vg-xp .md-how{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.vg-xp .md-how span{padding:7px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.12);font:700 12px/1.2 "Inter",sans-serif;color:#444D5A}
.vg-xp .md-how .on{background:#0F1A2B;border-color:#0F1A2B;color:#fff}
.vg-xp .md-how .off{opacity:.45}
.vg-xp .md-row{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-bottom:12px}
.vg-xp .mi{display:flex;align-items:center;justify-content:space-between;height:37px;padding:0 10px;border-radius:8px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.10);font-size:13px;color:#0F1A2B;margin-bottom:12px}
.vg-xp .md-row .mi{margin-bottom:0}
.vg-xp .mi .ic{width:13px;height:13px;color:#626976}
.vg-xp .md-facts{padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.07)}
.vg-xp .md-facts p{display:flex;gap:8px;font-size:12px;line-height:1.5;color:#444D5A}
.vg-xp .md-facts p+p{margin-top:4px}
.vg-xp .md-facts i{font-style:normal;color:#626976}
.vg-xp .md-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #E2E8F0;background:#FAFBFC}
.vg-xp .md-1,.vg-xp .md-2{padding:10px 20px;border-radius:12px;font:600 13px/1.2 "Inter",sans-serif}
.vg-xp .md-2{background:#fff;color:#334155;border:1px solid #E2E8F0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.vg-xp .md-1{background:linear-gradient(135deg,#1E40AF,#0EA5E9);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── the hero plays the reading once: each receipt is uploaded, read (a scan passes over it), and its line fills ──
   Per line: --t (when its receipt arrives) and --r (how long the reading takes), in ms; each field has --f, its turn. */
@property --xp-pct{syntax:"<integer>";inherits:false;initial-value:0}
.motion .m-shot:not(.in) .vg-xp [data-read] .v{opacity:0}
.motion .m-shot:not(.in) .vg-xp [data-read] .ph{opacity:1}
.motion .m-shot:not(.in) .vg-xp [data-read] .xp-va,.motion .m-shot:not(.in) .vg-xp [data-read] .xp-x,.motion .m-shot:not(.in) .vg-xp [data-read] .xp-n{grid-template-rows:0fr}
.motion .m-shot:not(.in) .vg-xp [data-read] .rc-vw{opacity:0}
.motion .m-shot:not(.in) .vg-xp [data-read] .rc-up{opacity:1}
.motion .m-shot:not(.in) .vg-xp .xp-stack .k0,.motion .m-shot:not(.in) .vg-xp .xp-lf .k0{opacity:1}
.motion .m-shot:not(.in) .vg-xp .xp-stack .k3,.motion .m-shot:not(.in) .vg-xp .xp-lf .k3{opacity:0}
.motion .m-shot:not(.in) .vg-xp .xp-fb{opacity:.38;border-color:rgba(0,0,0,.06);color:#626976}
.motion .m-shot:not(.in) .vg-xp .xp-fb i{opacity:0}
.motion .m-shot:not(.in) .vg-xp .xf-h em .n3{opacity:0}
.motion .m-shot:not(.in) .vg-xp .xf-h em .n0{opacity:1}
.motion .m-shot:not(.in) .vg-xp .xf-c{opacity:0}
.motion .m-shot:not(.in) .vg-xp .xf-row{transform:none}
.motion .m-shot:not(.in) .vg-xp .xf-c.c3{border-color:rgba(0,0,0,.10);background:transparent;color:#444D5A;font-weight:500}
.motion .m-shot:not(.in) .vg-xp .xf-empty{opacity:1}
.motion .m-shot:not(.in) .vg-xp .xf-img{opacity:0}
.motion .m-shot:not(.in) .vg-xp .xf-foot>*{opacity:0}

.motion .m-shot.in .vg-xp [data-read] .v{animation:xpFill .45s cubic-bezier(.2,.7,.2,1) calc((var(--t) + var(--r) + 150 + var(--f) * 70) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .ph{animation:xpGone .2s ease calc((var(--t) + var(--r) + 150 + var(--f) * 70) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .xp-va{animation:xpOpen .4s cubic-bezier(.2,.7,.2,1) calc((var(--t) + var(--r) + 430) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .xp-x{animation:xpOpen .45s cubic-bezier(.2,.7,.2,1) calc((var(--t) + var(--r) + 480) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .xp-n{animation:xpOpen .45s cubic-bezier(.2,.7,.2,1) calc((var(--t) + var(--r) + 820) * 1ms) both}
/* the dinner line has no tax-receipt row (No VAT, chosen by hand): its notes open straight after its fields */
.motion .m-shot.in .vg-xp [data-read].xp-hand .xp-n{animation-delay:calc((var(--t) + var(--r) + 480) * 1ms)}
.motion .m-shot.in .vg-xp [data-read] .rc-up{animation:xpOut .15s ease calc((var(--t) + 150) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .rc-rd{animation:xpIn .15s ease calc((var(--t) + 150) * 1ms) both,xpOut .15s ease calc((var(--t) + var(--r) + 150) * 1ms) forwards}
.motion .m-shot.in .vg-xp [data-read] .rc-rd .ic{animation:xpSpin 1s linear infinite}
.motion .m-shot.in .vg-xp [data-read] .rc-rd b{counter-reset:xpp var(--xp-pct);animation:xpPct calc((var(--r) - 150) * 1ms) cubic-bezier(.3,.1,.6,1) calc((var(--t) + 250) * 1ms) both}
.motion .m-shot.in .vg-xp [data-read] .rc-rd b::after{content:"\00a0" counter(xpp) "%"}
.motion .m-shot.in .vg-xp [data-read] .rc-vw{animation:xpIn .3s ease calc((var(--t) + var(--r) + 150) * 1ms) both}
/* the totals follow each amount as it lands */
.motion .m-shot.in .vg-xp .k0{animation:xpOut .25s ease 2010ms both}
.motion .m-shot.in .vg-xp .xf-h em .n0{animation:xpOut .2s ease 450ms both}
.motion .m-shot.in .vg-xp .k1{animation:xpIn .3s ease 2010ms both,xpOut .25s ease 3270ms forwards}
.motion .m-shot.in .vg-xp .k2{animation:xpIn .3s ease 3270ms both,xpOut .25s ease 4810ms forwards}
.motion .m-shot.in .vg-xp .k3{animation:xpIn .3s ease 4810ms both}
/* the rail: each receipt arrives as a chip, shows in the preview and is scanned while it is read */
.motion .m-shot.in .vg-xp .xp-fb{animation:xpOnBtn .3s ease 450ms both}
.motion .m-shot.in .vg-xp .xp-fb i{animation:xpIn .25s ease 450ms both}
.motion .m-shot.in .vg-xp .n1{animation:xpIn .2s ease 450ms both,xpOut .2s ease 2250ms forwards}
.motion .m-shot.in .vg-xp .n2{animation:xpIn .2s ease 2250ms both,xpOut .2s ease 3650ms forwards}
.motion .m-shot.in .vg-xp .xp-fb i .n3,.motion .m-shot.in .vg-xp .xf-h em .n3,.motion .m-shot.in .vg-xp .xf-fn .n3{animation:xpIn .2s ease 3650ms both}
.motion .m-shot.in .vg-xp .xf-empty{animation:xpOut .2s ease 450ms both}
.motion .m-shot.in .vg-xp .xf-foot>*{animation:xpIn .3s ease 450ms both}
.motion .m-shot.in .vg-xp .xf-c.c1{animation:xpChip .4s cubic-bezier(.2,.7,.2,1) 450ms both,xpSel 1.8s steps(1,end) 450ms both}
.motion .m-shot.in .vg-xp .xf-c.c2{animation:xpChip .4s cubic-bezier(.2,.7,.2,1) 2250ms both,xpSel 1.4s steps(1,end) 2250ms both}
.motion .m-shot.in .vg-xp .xf-c.c3{animation:xpChip .4s cubic-bezier(.2,.7,.2,1) 3650ms both,xpSelOn .01s linear 3650ms both}
.motion .m-shot.in .vg-xp .xf-row{animation:xpShift .6s cubic-bezier(.4,0,.2,1) 3650ms both}
.motion .m-shot.in .vg-xp .xf-1{animation:xpIn .35s ease 450ms both,xpOut .35s ease 2250ms forwards}
.motion .m-shot.in .vg-xp .xf-2{animation:xpIn .35s ease 2250ms both,xpOut .35s ease 3650ms forwards}
.motion .m-shot.in .vg-xp .xf-3{animation:xpIn .35s ease 3650ms both}
.motion .m-shot.in .vg-xp .xf-img .scan{animation:xpScan calc(var(--r) * 1ms) cubic-bezier(.45,.05,.55,.95) calc((var(--t) + 200) * 1ms) both}
.motion .m-shot.in .vg-xp .xf-img .rf{animation:xpRead 1.2s ease calc((var(--t) + 200 + var(--k) * var(--r)) * 1ms) both}
@keyframes xpFill{0%{opacity:0;transform:translateY(3px)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes xpGone{from{opacity:1}to{opacity:0}}
@keyframes xpIn{from{opacity:0}to{opacity:1}}
@keyframes xpOut{from{opacity:1}to{opacity:0}}
@keyframes xpOpen{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
@keyframes xpSpin{to{transform:rotate(360deg)}}
@keyframes xpPct{from{--xp-pct:1}to{--xp-pct:99}}
@keyframes xpOnBtn{from{opacity:.38;border-color:rgba(0,0,0,.06);color:#626976}to{opacity:1;border-color:#1E8E5A;color:#0F1A2B}}
@keyframes xpChip{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes xpSel{0%{border-color:#1E8E5A;background:rgba(0,0,0,.04);color:#0F1A2B}100%{border-color:rgba(0,0,0,.10);background:transparent;color:#444D5A}}
@keyframes xpSelOn{from,to{border-color:#1E8E5A;background:rgba(0,0,0,.04);color:#0F1A2B;font-weight:600}}
@keyframes xpShift{from{transform:none}to{transform:translateX(var(--xf-shift,-178px))}}
@keyframes xpScan{0%{opacity:0;top:0}8%{opacity:1}90%{opacity:1}100%{opacity:0;top:100%}}
@keyframes xpRead{0%{box-shadow:0 0 0 0 rgba(30,142,90,0);background:rgba(30,142,90,0)}25%{box-shadow:0 0 0 2px rgba(30,142,90,.55);background:rgba(30,142,90,.12)}100%{box-shadow:0 0 0 2px rgba(30,142,90,0);background:rgba(30,142,90,0)}}

/* ── cash advances (Expenses → Reimbursements → Advances; expenses/Advances.jsx 150-217) ───────────────── */
.vg-xa{background:#fff;padding:26px 30px}
.vg-xa .xa-h1{font:800 24px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B}
.vg-xa .xa-sub{font-size:12.5px;color:#626976;margin-top:4px}
.vg-xa .xa-tabs{display:flex;gap:6px;margin:14px 0 16px}
.vg-xa .xa-tabs span{padding:7px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.10);font:700 12px/1.2 "Inter",sans-serif;color:#444D5A;white-space:nowrap}
.vg-xa .xa-tabs em{opacity:.55;margin-left:6px}
.vg-xa .xa-tabs .on{background:#0F1A2B;border-color:#0F1A2B;color:#fff}
.vg-xa .xa-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.vg-xa .xa-intro p{font-size:12px;line-height:1.5;color:#626976;max-width:620px}
.vg-xa .xa-ms{display:flex;align-items:stretch;border:1px solid #D6DEE8;border-radius:14px;background:#fff;overflow:hidden;margin-bottom:18px}
.vg-xa .xa-ms>div{flex:1;min-width:0;padding:14px 22px;border-right:1px solid rgba(0,0,0,.06)}
.vg-xa .xa-ms small{display:block;font:600 11px/1.3 "Inter",sans-serif;color:#626976}
.vg-xa .xa-ms b{display:grid;font:700 22px/1.25 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;margin-top:3px;color:#0F1A2B;white-space:nowrap}
.vg-xa .xa-ms b.w{color:#9A5B00}
.vg-xa .xa-ms em{grid-area:1/1}
.vg-xa .xa-col{width:40px;flex:none;display:grid;place-items:center;border-left:1px solid rgba(0,0,0,.06);color:#626976}
.vg-xa .xa-col .ic{width:14px;height:14px;transform:rotate(180deg)}
.vg-xa .xa-t{border-radius:12px;background:#fff;border:1px solid #D6DEE8;overflow:hidden}
.vg-xa .xa-g{display:grid;grid-template-columns:28px 130px minmax(0,1fr) 108px 108px 108px 108px 92px;align-items:center}
.vg-xa .xa-th{background:#F1F4F8;border-bottom:1px solid #D6DEE8}
.vg-xa .xa-th span{padding:11px 14px;font:800 10.5px/1.2 "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#444D5A;white-space:nowrap}
.vg-xa .xa-r{font-size:12px;border-top:1px solid #E6ECF2}
.vg-xa .xa-th+.xa-r{border-top:0}
.vg-xa .xa-r>span{padding:11px 14px;min-width:0}
.vg-xa .xa-r .cv{padding:0 0 0 12px;display:flex;color:#626976}
.vg-xa .cv .ic{width:13px;height:13px}
.vg-xa .no{font:700 12px/1.3 "SF Mono",Monaco,ui-monospace,monospace;color:#0F1A2B;white-space:nowrap}
.vg-xa .ep{color:#444D5A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-xa .ep b{font-weight:600;color:#0F1A2B}
.vg-xa .r{text-align:right;white-space:nowrap}
.vg-xa .m{color:#444D5A}
.vg-xa .lf{font-weight:800;color:#0F1A2B}
.vg-xa .z{color:#626976}
.vg-xa .xa-sw{display:grid}
.vg-xa .xa-sw>*{grid-area:1/1;opacity:0}
.vg-xa .xa-sw .s2{opacity:1}
.vg-xa .xa-sw.r{justify-items:end}
.vg-xa .xa-sw.st{justify-items:start}
.vg-xa .sp{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font:700 10.5px/1.4 "Inter",sans-serif;letter-spacing:.02em;font-style:normal;white-space:nowrap}
.vg-xa .sp.op{color:#2563EB;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.22)}
.vg-xa .sp.ok{color:#1E8E5A;background:rgba(30,142,90,.10);border:1px solid rgba(30,142,90,.22)}
.vg-xa .xa-d{padding:10px 16px 14px;background:#F6F9FC;border-top:1px solid #E6ECF2}
.vg-xa .xa-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11.5px;color:#444D5A;margin-bottom:8px}
.vg-xa .xa-sr{display:grid;grid-template-rows:1fr}
.vg-xa .xa-none{max-height:0;overflow:hidden;font-size:12px;line-height:1.5;color:#626976;opacity:0}
.vg-xa .xa-sr>div{min-height:0;overflow:hidden;display:flex;align-items:center;gap:10px;font-size:12px}
.vg-xa .xa-sr>div>span{padding:6px 0}
.vg-xa .xa-sr{border-top:1px solid #E6ECF2}
.vg-xa .dt{width:92px;flex:none;color:#626976}
.vg-xa .tx{flex:1;min-width:0;color:#0F1A2B}
.vg-xa .tx b{font:700 12px/1 "SF Mono",Monaco,ui-monospace,monospace;color:#2563EB}
.vg-xa .am{font-weight:700;color:#0F1A2B;white-space:nowrap}
.vg-xa .un{display:grid;place-items:center;width:28px;height:28px;padding:0!important;border-radius:8px;border:1px solid rgba(0,0,0,.08);color:#626976}
.vg-xa .un .ic{width:13px;height:13px}
.vg-xa .xa-doors{display:flex;gap:8px;max-height:0;opacity:0;overflow:hidden}
/* plays once: a claim is settled from the advance, the rest comes back, the advance is settled */
.motion .shot:not(.in) .vg-xa .xa-sw .s2{opacity:0}
.motion .shot:not(.in) .vg-xa .xa-sw .s0{opacity:1}
.motion .shot:not(.in) .vg-xa .xa-none{max-height:30px;padding:4px 0;opacity:1}
.motion .shot:not(.in) .vg-xa .xa-sr{grid-template-rows:0fr;border-top-color:transparent}
.motion .shot:not(.in) .vg-xa .xa-doors{max-height:44px;opacity:1;margin-top:10px}
.motion .shot.in .vg-xa .xa-sw .s0:not(.s1){animation:xpOut .3s ease 900ms both}
.motion .shot.in .vg-xa .xa-sw .s0.s1:not(.s2){animation:xpOut .3s ease 2100ms both}
.motion .shot.in .vg-xa .xa-sw .s1.s2:not(.s0){animation:xpIn .35s ease 900ms both}
.motion .shot.in .vg-xa .xa-sw .s1:not(.s0):not(.s2){animation:xpIn .35s ease 900ms both,xpOut .3s ease 2100ms forwards}
.motion .shot.in .vg-xa .xa-sw .s2:not(.s1){animation:xpIn .35s ease 2100ms both}
.motion .shot.in .vg-xa .xa-none{animation:xaShut .45s ease 900ms both}
.motion .shot.in .vg-xa .xa-sr.r1{animation:xaOpen .5s cubic-bezier(.2,.7,.2,1) 900ms both}
.motion .shot.in .vg-xa .xa-sr.r2{animation:xaOpen .5s cubic-bezier(.2,.7,.2,1) 2100ms both}
.motion .shot.in .vg-xa .xa-cancel{animation:xpOut .3s ease 900ms both}
.motion .shot.in .vg-xa .xa-doors{animation:xaDoors .45s ease 2100ms both}
.motion .shot.in .vg-xa .a0{animation:xpOut .3s ease 900ms both}
.motion .shot.in .vg-xa .a1{animation:xpIn .3s ease 900ms both,xpOut .3s ease 2100ms forwards}
.motion .shot.in .vg-xa .a2,.motion .shot.in .vg-xa .o1{animation:xpIn .3s ease 2100ms both}
.motion .shot.in .vg-xa .o0{animation:xpOut .3s ease 2100ms both}
.vg-xa .a0,.vg-xa .a1,.vg-xa .o0{opacity:0}
.motion .shot:not(.in) .vg-xa .a0,.motion .shot:not(.in) .vg-xa .o0{opacity:1}
.motion .shot:not(.in) .vg-xa .a2,.motion .shot:not(.in) .vg-xa .o1{opacity:0}
@keyframes xaOpen{from{grid-template-rows:0fr;border-top-color:transparent}to{grid-template-rows:1fr;border-top-color:#E6ECF2}}
@keyframes xaShut{from{max-height:30px;padding:4px 0;opacity:1}to{max-height:0;padding:0;opacity:0}}
@keyframes xaDoors{from{max-height:44px;opacity:1;margin-top:10px}to{max-height:0;opacity:0;margin-top:0}}