/* Invosari - brand colours, colour themes and invoicing components. Layout and shared components: css/base.css */
:root{--bg:#f4f7fb;--bg2:#e9eef6;--card:#fff;--ink:#14213d;--mut:#5c6b85;--line:#dde4ef;--pri-ink:#fff;--acc:#f59e0b;--ok:#059669;--warn:#d97706;--bad:#dc2626;--info:#2563eb;--violet:#7c3aed;
--sh:0 1px 2px rgba(20,33,61,.05),0 8px 24px rgba(20,33,61,.06);--r:14px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);color-scheme:light;
--pri:#1d4ed8;--pri2:#1e3a8a}
[data-theme=dark]{--bg:#0e1420;--bg2:#172033;--card:#131b2b;--ink:#e6ecf7;--mut:#94a3bd;--line:#26324a;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);color-scheme:dark;--ok:#34d399;--bad:#f87171}
[data-accent=sapphire]{--pri:#1d4ed8;--pri2:#1e3a8a}[data-theme=dark][data-accent=sapphire]{--pri:#60a5fa;--pri2:#93c5fd}
[data-accent=emerald]{--pri:#047857;--pri2:#065f46}[data-theme=dark][data-accent=emerald]{--pri:#34d399;--pri2:#6ee7b7}
[data-accent=plum]{--pri:#7e22ce;--pri2:#6b21a8}[data-theme=dark][data-accent=plum]{--pri:#c084fc;--pri2:#d8b4fe}
[data-accent=crimson]{--pri:#be123c;--pri2:#9f1239}[data-theme=dark][data-accent=crimson]{--pri:#fb7185;--pri2:#fda4af}
[data-accent=amber]{--pri:#b45309;--pri2:#92400e}[data-theme=dark][data-accent=amber]{--pri:#fbbf24;--pri2:#fcd34d}
[data-accent=slate]{--pri:#334155;--pri2:#1e293b}[data-theme=dark][data-accent=slate]{--pri:#a3b1c6;--pri2:#cbd5e1}
:root{--soft:color-mix(in srgb,var(--pri) 12%,var(--card));--grad:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#0b1a3a));--glow1:color-mix(in srgb,var(--pri) 24%,transparent);--glow2:color-mix(in srgb,var(--acc) 22%,transparent)}
[data-theme=dark] .btn.pri,[data-theme=dark] .fab,[data-theme=dark] .ptabs a.on{color:#0e1420}
[data-theme=dark] .kpi.pri{color:#fff}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.empty svg{width:42px;height:42px;stroke:var(--mut);fill:none;stroke-width:1.5;opacity:.7}
.av svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9}
/* greeting + kpis */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:2px 0 14px;flex-wrap:wrap}.hello h2{margin:0;font-size:1.4rem;letter-spacing:-.01em}.hello p{margin:2px 0 0}
a.kpi{color:inherit;text-decoration:none;display:block}a.kpi:hover{border-color:var(--pri)}
.kpi.late{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad) 6%,var(--card))}.kpi.late .v{color:var(--bad)}
.kp4{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:1100px){.kp4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kp3{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:600px){.kp3 .kpi{padding:10px}.kp3 .kpi .v{font-size:.98rem}.kp3 .kpi .l{font-size:.66rem}}
.aging{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:900px){.aging{grid-template-columns:repeat(3,minmax(0,1fr))}}
a.alert{text-decoration:none;flex-wrap:wrap}a.alert b{margin-right:4px}
.bad-t{color:var(--bad);font-weight:700}
/* lists */
.list-card{padding:4px 14px}
.li .amt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex:none;max-width:45%}.li .amt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.li.pay .ib{width:34px;height:34px}.li.pay .ib svg{width:18px;height:18px}
.li.pick{cursor:pointer}.li.pick input{width:20px;height:20px;accent-color:var(--pri);flex:none}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dgrid{grid-template-columns:1fr}@media(min-width:1100px){.dgrid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.monthnav{display:flex;align-items:center;gap:10px;margin:0 0 12px}.monthnav b{font-size:1.05rem;min-width:150px;text-align:center}.monthnav .ib{background:var(--card);border:1px solid var(--line);text-decoration:none;font-size:1.4rem}
.nolbl{margin:0}.nolbl select{margin:0;min-width:150px}
/* paper preview */
.paper{background:#fff;color:#1f2937;border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh);padding:22px;margin-bottom:14px;--brand:#1d4ed8;font-size:.92rem}
.paper .mut{color:#6b7280}.paper .ph{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:3px solid var(--brand)}
.paper .plogo{display:block;max-height:46px;max-width:150px;margin-bottom:6px;object-fit:contain}.paper .pbiz{display:block;font-size:1.02rem}
.paper .pt{text-align:right;display:flex;flex-direction:column}.paper .ptitle{font-size:1.5rem;font-weight:800;color:var(--brand);letter-spacing:.02em}
.paper .pmeta{display:flex;justify-content:space-between;gap:12px;margin:14px 0;flex-wrap:wrap}.paper .pmeta>div:first-child{display:flex;flex-direction:column}
.paper .kvs{display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:.85rem;align-content:start}.paper .kvs span{color:#6b7280}.paper .kvs b{text-align:right}
.paper .tbl th{color:#fff;background:var(--brand);border:0}.paper .tbl td{border-color:#e5e7eb;color:#1f2937}.paper .tbl tr:nth-child(odd) td{background:color-mix(in srgb,var(--brand) 5%,#fff)}
.paper .pill{background:#f3f4f6;color:#6b7280}
.paper.tpl-modern .ph{background:var(--brand);color:#fff;margin:-22px -22px 0;padding:20px 22px;border-radius:12px 12px 0 0;border:0}.paper.tpl-modern .ph .mut,.paper.tpl-modern .ptitle{color:#fff}.paper.tpl-modern .plogo{background:#fff;padding:4px;border-radius:6px}
.paper.tpl-modern .tbl th{background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand)}.paper.tpl-modern .tbl tr td{background:#fff}
.paper.tpl-minimal .ph{border-bottom:1px solid #d1d5db}.paper.tpl-minimal .ptitle{color:#111827;font-weight:400;letter-spacing:.3em}.paper.tpl-minimal .tbl th{background:#fff;color:#6b7280;border-bottom:1px solid #111827}.paper.tpl-minimal .tbl tr td{background:#fff}
.ptot{margin-left:auto;max-width:340px;display:flex;flex-direction:column;gap:2px}.ptot div{display:flex;justify-content:space-between;gap:14px;padding:4px 8px;font-size:.9rem}.ptot div b{font-variant-numeric:tabular-nums;font-weight:600}
.ptot div.em{background:var(--soft);border-radius:8px;font-weight:800;font-size:1rem}.ptot div.em b{font-weight:800}
.paper .ptot div.em{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand)}.paper.tpl-minimal .ptot div.em{background:#f3f4f6;color:#111827}
.paper .pnote{margin:14px 0 0;color:#4b5563}
/* line editor */
.lnh{display:none}
.ln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px;padding:12px 0;border-bottom:1px solid var(--line);align-items:end}
.ln textarea{grid-column:1/-1;min-height:44px;resize:vertical;margin:0}.ln label{display:flex;flex-direction:column;font-size:.72rem;font-weight:600;color:var(--mut);gap:3px}.ln .inp{margin:0;padding:8px 9px}
.ln .la{grid-column:1/3;font-variant-numeric:tabular-nums;align-self:center}.ln .lx{grid-column:3/5;display:flex;justify-content:flex-end;align-items:center;gap:2px}.ln .lx .chk{margin:0 6px 0 0}
.ln .ib{width:34px;height:34px}.ln .ib svg{width:18px;height:18px}.ln .ib[disabled]{opacity:.3}
@media(min-width:900px){
 .lnh{display:grid;grid-template-columns:minmax(0,3fr) 70px 70px 110px 70px 120px 116px;gap:8px;font-size:.72rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding:10px 0 4px;border-bottom:1px solid var(--line)}
 .ln{grid-template-columns:minmax(0,3fr) 70px 70px 110px 70px 120px 116px;align-items:start}.ln textarea{grid-column:auto;min-height:40px}.ln label span{display:none}.ln .la{grid-column:auto;text-align:right;padding-top:9px}.ln .lx{grid-column:auto}
}
/* receipt + logo */
.rcpt{border:1px dashed var(--line);border-radius:12px;padding:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.rcpt img{max-height:120px;max-width:180px;border-radius:8px;display:block;cursor:zoom-in}.rcpt img.big{max-height:none;max-width:100%;cursor:zoom-out}
.logo-row{display:flex;gap:12px;align-items:center;margin:4px 0 12px}.logo-box{width:120px;height:64px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:#fff;overflow:hidden}.logo-box img{max-width:110px;max-height:56px}
/* template picker */
.tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.tpl{border:2px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-weight:650;font-size:.85rem}.tpl.on{border-color:var(--pri);background:var(--soft)}.tpl input{display:none}
.tpl i{width:100%;height:64px;border-radius:6px;background:#fff;border:1px solid #e5e7eb;position:relative;overflow:hidden}
.tpl i::before,.tpl i::after{content:"";position:absolute;left:8px;right:8px}
.tp-classic::before{top:8px;height:5px;width:40%;background:#cbd5e1}.tp-classic::after{top:20px;height:2px;background:#1d4ed8;box-shadow:0 10px 0 4px #1d4ed8,0 18px 0 4px #eef2ff,0 26px 0 4px #fff}
.tp-modern::before{left:0!important;right:0!important;top:0;height:20px;background:#1d4ed8}.tp-modern::after{top:30px;height:7px;background:#dbeafe;box-shadow:0 12px 0 -1px #f3f4f6}
.tp-minimal::before{top:10px;height:4px;width:30%;left:auto!important;background:#111827}.tp-minimal::after{top:24px;height:1px;background:#9ca3af;box-shadow:0 10px 0 #e5e7eb,0 20px 0 #e5e7eb}
.tpl .btn{min-height:26px;padding:2px 8px;font-size:.75rem}
/* quick create */
.qmenu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(min-width:700px){.qmenu{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qm{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}.qm:hover{border-color:var(--pri)}
.qm svg{width:28px;height:28px;stroke:var(--pri);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media(max-width:600px){.paper{padding:14px;font-size:.78rem}.paper .tbl th,.paper .tbl td{padding:6px 4px;white-space:normal}.paper .tbl th{font-size:.66rem}.paper.tpl-modern .ph{margin:-14px -14px 0;padding:14px}.paper .ptitle{font-size:1.2rem}}
.paper .pt>span,.paper .pt>.mut{white-space:nowrap}