:root {

/* iOS/WebKit "text autosizing" silently scales text up (~6.7% was measured off a printed invoice
   from an iPhone: our 8.5px table text arrived as 6.8pt instead of 6.4pt, the 11px body as 8.8pt).
   On screen that is merely different; on a PRINTED invoice it is fatal — the wider text pushes the
   13-column item table past its box so the AMOUNT column gets starved and clipped, and the taller
   document spills onto a second page. A laptop never does this, which is why printing from one
   always looked fine. 100% (not `none`) opts out without disabling pinch-zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  color-scheme: light;   /* light-only app — never let the OS dark mode darken native controls */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --ink: #1a2233;
  --muted: #64708a;
  --line: #e3e8f2;
  --brand: #0e8ca2;        /* SAGACITY teal */
  --brand-dark: #0a6d7e;
  --brand-soft: #e4f4f6;   /* tint for hovers / active backgrounds */
  --teal: #14b8a6;
  --sidebar: #0c2b33;      /* deep teal-slate */
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --shadow: 0 1px 3px rgba(20, 30, 60, .08), 0 6px 24px rgba(20, 30, 60, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
.hidden { display: none !important; }

/* ---------- Public landing (responsive, mobile-first) ---------- */
#login { min-height: 100vh; background: var(--bg); overflow-y: auto; overflow-x: hidden; }
.lp-wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(18px, 6vw, 88px); width: 100%; }
/* nav */
.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 5vw, 48px); background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.lp-brand img { width: 34px; height: 34px; object-fit: contain; }
.lp-brand b { font-size: 17px; letter-spacing: .5px; display: block; line-height: 1.05; }
.lp-brand small { color: var(--muted); font-size: 11px; }
.lp-burger { display: none; background: none; border: 0; font-size: 24px; color: var(--ink); line-height: 1; padding: 4px 8px; }
.lp-navlinks { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.lp-navlinks a { color: var(--muted); font-weight: 600; font-size: 14px; }
.lp-navlinks a:hover { color: var(--brand); }
/* hero */
.lp-hero { background: radial-gradient(1200px 500px at 80% -10%, #e4f4f6 0%, transparent 60%), var(--bg); padding: clamp(36px, 6vw, 72px) 0; }
.lp-hero-inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(18px, 6vw, 88px); }
.lp-eyebrow { display: inline-block; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.lp-hero-txt h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.5px; }
.lp-hero-txt h1 span { color: var(--brand);
  background: linear-gradient(90deg, var(--brand), var(--teal), var(--brand-dark), var(--teal), var(--brand));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: heroGrad 6s linear infinite; }
@keyframes heroGrad { to { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .lp-hero-txt h1 span { animation: none; } }
.lp-hero-txt > p { font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); line-height: 1.65; margin: 0 0 24px; max-width: 560px; }
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero-cta .btn { padding: 13px 22px; font-size: 15px; }
.lp-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.lp-ticks li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ink); }
.lp-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.lp-hero .login-card { width: 100%; max-width: 420px; justify-self: end; box-shadow: 0 12px 40px rgba(20,30,60,.12); }
.lp-nolog { font-size: 13px; margin: 12px 0 0; text-align: center; }
/* generic sections */
.lp-section { padding: clamp(40px, 6vw, 72px) 0; }
.lp-section h2, .lp-band h2, .lp-cta h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 8px; text-align: center; }
.lp-sub { text-align: center; color: var(--muted); margin: 0 auto 30px; max-width: 640px; line-height: 1.6; }
/* stats band */
.lp-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(28px, 5vw, 52px) 0; }
.lp-stats .lp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.lp-stats b { display: block; font-size: 26px; color: var(--brand); }
.lp-stats span { color: var(--muted); font-size: 13px; }
/* features */
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-feat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; transition: transform .12s, box-shadow .12s; }
.lp-feat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.lp-feat b { display: block; font-size: 15.5px; margin-bottom: 6px; }
.lp-feat span { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
/* how it works */
.lp-how { background: linear-gradient(180deg, #f7fafc, #fff); }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.lp-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.lp-step .lp-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 700; margin-bottom: 12px; }
.lp-step b { font-size: 16px; } .lp-step p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; }
/* pricing (no prices — request-based) */
.lp-price-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.lp-plan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; }
.lp-plan.featured { border-color: var(--brand); box-shadow: 0 10px 34px rgba(14,140,162,.18); position: relative; }
.lp-plan .lp-badge { align-self: flex-start; background: var(--brand-soft); color: var(--brand-dark);
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }
.lp-plan h3 { margin: 0 0 4px; font-size: 18px; }
.lp-plan .lp-tag { color: var(--muted); font-size: 13px; min-height: 40px; margin-bottom: 8px; line-height: 1.45; }
.lp-plan .lp-limits { font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft);
  padding: 5px 10px; border-radius: 8px; margin-bottom: 12px; }
.lp-plan ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: var(--ink); flex: 1; }
.lp-plan ul li { padding: 4px 0 4px 22px; position: relative; line-height: 1.4; }
.lp-plan ul li::before { content: "✓"; color: var(--green); position: absolute; left: 0; font-weight: 700; }
.lp-plan .btn { width: 100%; }
/* CTA band */
.lp-cta { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; padding: clamp(40px, 6vw, 64px) 0; text-align: center; }
.lp-cta h2 { color: #fff; } .lp-cta p { color: #d9f1f4; margin: 8px 0 22px; font-size: 15px; }
.lp-cta-btn { background: #fff; color: var(--brand-dark); font-size: 15px; padding: 13px 28px; }
.lp-cta-btn:hover { background: #eefafb; }
/* footer (dark) */
.lp-foot { background: var(--sidebar); color: #c7d2d6; padding: clamp(36px, 5vw, 56px) 0 20px; }
.lp-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.35fr .9fr; gap: 28px; }
.lp-foot h4 { color: #fff; font-size: 14px; margin: 0 0 12px; }
.lp-foot a { display: block; color: #a9bcc2; font-size: 13.5px; margin-bottom: 9px; }
.lp-foot a:hover { color: #fff; }
.lp-foot-brand p { color: #93a8ae; font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 260px; }
.lp-addr { color: #93a8ae; font-size: 13px; line-height: 1.6; margin: 4px 0 0; }
.lp-social { display: flex; gap: 8px; margin-bottom: 14px; }
.lp-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.08); color: #cfe0e4; margin: 0; transition: transform .12s, background .15s; }
.lp-social a svg { width: 18px; height: 18px; }
.lp-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.lp-wa { display: inline-flex; align-items: center; gap: 6px; background: #25d366; color: #063; font-weight: 700;
  padding: 9px 14px; border-radius: 9px; font-size: 13px; }
.lp-foot-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: #8ea3a9; }
.lp-legal a { display: inline; color: #8ea3a9; margin: 0 0 0 14px; }
.lp-legal a:hover { color: #fff; }

/* ---- Why Sagacity / Who it's for ---- */
.lp-why-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.lp-lead { font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); line-height: 1.7; margin: 6px 0 18px; }
.lp-why-list { list-style: none; margin: 0 0 24px; padding: 0; }
.lp-why-list li { position: relative; padding: 8px 0 8px 30px; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.lp-why-list li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.lp-who h3 { font-size: 17px; margin: 0 0 12px; }
.lp-who-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.lp-who-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.lp-who-card span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---- "See it in action" animated explainers ---- */
.lp-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-anim { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 0; overflow: hidden; }
.lp-anim-tag { position: absolute; top: 12px; right: 12px; background: var(--brand-soft); color: var(--brand-dark);
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.lp-anim figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ---- feature slider (landing #demo) ---------------------------------------
   Auto-advancing showcase of the billing add-ons. The art is drawn in CSS, not
   screenshots: it stays sharp at any density, weighs nothing, and never goes
   stale when a screen is redesigned. */
.lp-slider { margin-top: 22px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 8px 8px 14px; }
.lp-slide-wrap { position: relative; display: grid; }
.lp-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 200px 1fr;
  gap: 22px; align-items: center; padding: 26px 22px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.lp-slide.is-on { opacity: 1; visibility: visible; transform: none; }
.lp-slide-txt b { display: block; font-size: 19px; margin-bottom: 7px; color: var(--ink); }
.lp-slide-txt p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 46ch; }
.lp-slide-art { height: 132px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--brand-soft), #fbfdfe);
  border: 1px solid var(--line); border-radius: 12px; }

/* controls */
.lp-slider-ui { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lp-sl-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand-dark); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s; }
.lp-sl-arrow:hover { background: var(--brand-soft); border-color: var(--brand); }
.lp-sl-arrow:focus-visible, .lp-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lp-dots { display: flex; gap: 7px; }
.lp-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: #cbd6e6; transition: width .25s, background .25s; }
.lp-dot.on { width: 20px; border-radius: 4px; background: var(--brand); }

/* slide art — abstractions, not fake screenshots */
.lp-slide-art .sl-row { display: block; height: 6px; border-radius: 3px; background: #cfe3e7; }
.sl-row.w95 { width: 95%; } .sl-row.w80 { width: 80%; } .sl-row.w70 { width: 70%; }
.sl-row.w60 { width: 60%; }  .sl-row.w55 { width: 55%; }
.sl-phone { width: 72px; height: 108px; border: 2px solid var(--brand-dark); border-radius: 10px;
  background: #fff; padding: 9px 8px; display: flex; flex-direction: column; gap: 6px; }
.sl-phone .sl-bar { height: 3px; width: 26px; border-radius: 2px; background: #9fc6ce; margin: 0 auto 3px; }
.sl-phone .sl-tot { margin-top: auto; height: 12px; border-radius: 3px; background: var(--brand); }
.sl-scan { display: flex; align-items: center; gap: 16px; }
.sl-code { display: flex; align-items: flex-end; gap: 2px; height: 52px; }
.sl-code i { width: 3px; background: var(--brand-dark); border-radius: 1px; height: 100%; }
.sl-code i:nth-child(2n) { height: 66%; } .sl-code i:nth-child(3n) { height: 84%; width: 5px; }
.sl-rcpt { width: 46px; background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.sl-rcpt span { height: 4px; border-radius: 2px; background: #cfe3e7; }
.sl-rcpt span:last-child { width: 60%; background: var(--brand); }
.sl-off { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sl-cloud { position: relative; font-size: 34px; line-height: 1; color: #9fc6ce; }
.sl-cloud b { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 42px; color: var(--red); font-weight: 400; }
.sl-q { display: flex; gap: 6px; }
.sl-q i { width: 9px; height: 9px; border-radius: 50%; background: #cfe3e7; }
.sl-q i.on { background: var(--green); }
.sl-share { display: flex; align-items: center; gap: 14px; }
.sl-bub { width: 78px; background: #fff; border: 1px solid var(--line); border-radius: 10px 10px 10px 2px;
  padding: 11px 10px; display: flex; flex-direction: column; gap: 6px; }
.sl-qr { width: 46px; height: 46px; border-radius: 4px; background-color: #fff;
  background-image: conic-gradient(var(--brand-dark) 25%, #fff 0 50%, var(--brand-dark) 0 75%, #fff 0);
  background-size: 12px 12px; border: 2px solid var(--brand-dark); }
.sl-age { display: flex; align-items: flex-end; gap: 9px; height: 74px; }
.sl-age i { width: 13px; border-radius: 3px 3px 0 0; background: #a9d3da; height: var(--h); }
.sl-age i.hot { background: var(--amber); }
.sl-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.sl-cal i { width: 13px; height: 13px; border-radius: 3px; background: #d3e6ea; }
.sl-cal i.on { background: var(--brand); }

@media (max-width: 720px) {
  .lp-slide { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; text-align: center; }
  .lp-slide-txt p { margin-inline: auto; }
  .lp-slide-art { height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-slide { transition: none; }
}
/* explainer 1 — pipeline */
.af-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 34px 6px 12px; min-height: 150px; }
.af-line { position: absolute; top: 58px; left: 12.5%; right: 12.5%; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.af-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); animation: afFill 12s ease-in-out infinite; }
@keyframes afFill { 0%,18%{width:0} 33%{width:33.3%} 58%{width:66.6%} 83%,100%{width:100%} }
.af-step { text-align: center; }
.af-dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px;
  background: #fff; border: 2px solid var(--line); font-size: 21px; position: relative; z-index: 1; }
.af-step b { display: block; font-size: 12.5px; color: var(--ink); }
.af-step small { font-size: 10.5px; color: var(--muted); }
.af-step .af-dot { animation: afInactive 12s infinite; }
.af-step.s1 .af-dot { animation-name: afS1; } .af-step.s2 .af-dot { animation-name: afS2; }
.af-step.s3 .af-dot { animation-name: afS3; } .af-step.s4 .af-dot { animation-name: afS4; }
@keyframes afInactive { 0%,100%{} }
@keyframes afS1 { 0%,3%{background:#fff;border-color:var(--line);transform:none} 8%,96%{background:var(--brand);border-color:var(--brand);transform:scale(1.12);box-shadow:0 6px 16px rgba(14,140,162,.35)} 100%{background:#fff;border-color:var(--line);transform:none} }
@keyframes afS2 { 0%,28%{background:#fff;border-color:var(--line);transform:none} 33%,96%{background:var(--brand);border-color:var(--brand);transform:scale(1.12);box-shadow:0 6px 16px rgba(14,140,162,.35)} 100%{background:#fff;border-color:var(--line);transform:none} }
@keyframes afS3 { 0%,53%{background:#fff;border-color:var(--line);transform:none} 58%,96%{background:var(--brand);border-color:var(--brand);transform:scale(1.12);box-shadow:0 6px 16px rgba(14,140,162,.35)} 100%{background:#fff;border-color:var(--line);transform:none} }
@keyframes afS4 { 0%,78%{background:#fff;border-color:var(--line);transform:none} 83%,96%{background:var(--green);border-color:var(--green);transform:scale(1.15);box-shadow:0 6px 16px rgba(22,163,74,.4)} 100%{background:#fff;border-color:var(--line);transform:none} }
/* explainer 2 — reconciliation */
.ar-reco { padding: 12px 6px 6px; }
.ar-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 9px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; opacity: 0; }
.ar-txt { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ar-amt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ar-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 12px; transform: scale(0); }
.ar-row.r1 { animation: arRow1 12s infinite; } .ar-row.r1 .ar-tick { animation: arTick1 12s infinite; }
.ar-row.r2 { animation: arRow2 12s infinite; } .ar-row.r2 .ar-tick { animation: arTick2 12s infinite; }
.ar-row.r3 { animation: arRow3 12s infinite; } .ar-row.r3 .ar-tick { animation: arTick3 12s infinite; }
@keyframes arRow1 { 0%,4%{opacity:0;transform:translateX(-10px)} 11%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes arRow2 { 0%,22%{opacity:0;transform:translateX(-10px)} 29%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes arRow3 { 0%,40%{opacity:0;transform:translateX(-10px)} 47%,96%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes arTick1 { 0%,13%{transform:scale(0)} 19%,96%{transform:scale(1)} 100%{transform:scale(0)} }
@keyframes arTick2 { 0%,31%{transform:scale(0)} 37%,96%{transform:scale(1)} 100%{transform:scale(0)} }
@keyframes arTick3 { 0%,49%{transform:scale(0)} 55%,96%{transform:scale(1)} 100%{transform:scale(0)} }
.ar-meter { position: relative; height: 34px; border-radius: 9px; background: var(--brand-soft); overflow: hidden; margin-top: 12px; }
.ar-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); animation: arMeter 12s infinite; }
.ar-meter-lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); z-index: 1; }
@keyframes arMeter { 0%,6%{width:0} 30%{width:34%} 54%{width:67%} 74%,100%{width:100%} }
/* ---- Free resources (gated downloads) ---- */
.lp-res { background: linear-gradient(180deg, #f7fafc, #fff); }
.lp-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-res-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.lp-res-ic { font-size: 30px; }
.lp-res-meta { font-size: 10.5px; color: var(--brand-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.lp-res-card h3 { font-size: 16px; margin: 0 0 6px; }
.lp-res-card p { color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; margin: 0 0 16px; }
.lp-res-card .btn { width: 100%; }
/* explainer videos */
.lp-video { width: 100%; display: block; border-radius: 12px; background: #0b1f24; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-vdl { margin-left: 8px; font-size: 11px; color: var(--brand); font-weight: 700; }
.lp-vdl:hover { color: var(--brand-dark); }

/* ---- Motion & polish ---- */
/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
/* floating hero blobs */
.lp-hero { position: relative; overflow: hidden; }
.lp-hero::before, .lp-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; z-index: 0; pointer-events: none; }
.lp-hero::before { width: 440px; height: 440px; background: #bfe9ef; top: -140px; right: -70px; animation: blobA 20s ease-in-out infinite; }
.lp-hero::after { width: 380px; height: 380px; background: #d9f1e6; bottom: -150px; left: -60px; animation: blobB 26s ease-in-out infinite; }
.lp-hero-inner { position: relative; z-index: 1; }
@keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-46px,34px) scale(1.06); } }
@keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-30px) scale(1.08); } }
/* nav shadow once scrolled */
.lp-nav { transition: box-shadow .2s ease, background .2s ease; }
.lp-nav.scrolled { box-shadow: 0 6px 24px rgba(10,25,40,.10); }
/* hover lifts */
.lp-plan, .lp-step, .lp-who-card, .lp-res-card { transition: transform .14s ease, box-shadow .14s ease; }
.lp-plan:hover, .lp-step:hover, .lp-who-card:hover, .lp-res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-hero-cta .btn, .lp-cta-btn, .lp-res-card .btn { transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.lp-hero-cta .btn:hover, .lp-cta-btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .af-fill, .af-step .af-dot, .ar-row, .ar-tick, .ar-meter-fill { animation: none !important; }
  .af-fill { width: 100%; } .ar-row { opacity: 1; } .ar-tick { transform: scale(1); } .ar-meter-fill { width: 100%; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-hero::before, .lp-hero::after { animation: none !important; }
}

/* ---- Floating action stack (chat + WhatsApp) ---- */
.lp-fab-stack { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.lp-fab { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); position: relative; transition: transform .12s; }
.lp-fab:hover { transform: scale(1.06); }
.lp-fab svg { width: 28px; height: 28px; }
.lp-fab-wa { background: #25d366; color: #fff; }
.lp-fab-chat { background: var(--brand); color: #fff; }
.lp-fab-badge { position: absolute; top: -6px; right: -6px; background: #ff5a4d; color: #fff; font-size: 9.5px;
  font-weight: 800; padding: 2px 6px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* ---- AI chat widget ---- */
.lp-chat { position: fixed; right: 20px; bottom: 88px; z-index: 61; width: 370px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 120px); background: var(--surface); border-radius: 18px; overflow: hidden;
  display: none; flex-direction: column; box-shadow: 0 20px 60px rgba(10,25,40,.35); border: 1px solid var(--line); }
.lp-chat.open { display: flex; animation: chatpop .18s ease; }
@keyframes chatpop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.lp-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; }
.lp-chat-id { display: flex; align-items: center; gap: 10px; }
.lp-chat-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 800; }
.lp-chat-id b { display: block; font-size: 14px; } .lp-chat-id small { font-size: 11.5px; color: #d9f1f4; }
.lp-chat-x { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.lp-chat-lead { padding: 18px 16px; overflow-y: auto; }
.lp-chat-intro { font-size: 13.5px; color: var(--ink); line-height: 1.55; margin: 0 0 14px; background: var(--brand-soft); padding: 12px 14px; border-radius: 12px; }
.lp-chat-lead label { margin: 10px 0 4px; } .lp-chat-lead input { padding: 10px 12px; }
.lp-chat-privacy { font-size: 11px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.lp-chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lp-chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lp-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.lp-msg.bot { background: #eef2f7; color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.lp-msg.me { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.lp-msg.typing { color: var(--muted); font-style: italic; }
.lp-chat-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.lp-chat-sugg button { background: #fff; border: 1px solid var(--brand); color: var(--brand); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lp-chat-sugg button:hover { background: var(--brand-soft); }
.lp-chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.lp-chat-input input { flex: 1; padding: 10px 12px; }
.lp-chat-input .btn { padding: 10px 14px; flex: 0 0 auto; }
/* ---- responsive ---- */
@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero .login-card { justify-self: stretch; max-width: 460px; margin: 0 auto; }
  .lp-feat-grid, .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-price-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; }
  .lp-why-wrap { grid-template-columns: 1fr; }
  .lp-res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lp-burger { display: block; }
  .lp-navlinks { position: absolute; top: 58px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: 0; overflow: hidden; transition: max-height .2s ease; }
  .lp-navlinks.lp-open { max-height: 340px; }
  .lp-navlinks a { padding: 13px clamp(16px, 5vw, 48px); border-top: 1px solid var(--line); }
  .lp-navlinks .btn { margin: 10px clamp(16px, 5vw, 48px) 14px; }
  .lp-ticks, .lp-stats .lp-wrap { grid-template-columns: 1fr; }
  .lp-feat-grid, .lp-steps, .lp-price-grid, .lp-foot-grid,
  .lp-demo-grid, .lp-res-grid { grid-template-columns: 1fr; }
  .lp-foot-bot { flex-direction: column; align-items: flex-start; }
  .lp-legal a { margin: 0 14px 0 0; }
  .lp-chat { right: 12px; left: 12px; bottom: 84px; width: auto; max-width: none; height: calc(100vh - 104px); }
  .lp-fab-stack { right: 14px; bottom: 14px; }
}
.login-card {
  background: var(--surface);
  width: 380px;
  max-width: 92vw;
  padding: 34px 32px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .sub { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.login-logo { display: block; height: 120px; width: auto; max-width: 100%; margin: 0 auto 8px; }
.brandmark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--teal));
  display: grid; place-items: center; color: #fff; font-weight: 700;
  margin-bottom: 16px; font-size: 18px;
}
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; background: #fbfcfe; color: var(--ink);
  -webkit-text-fill-color: var(--ink);   /* iOS dark mode otherwise blanks the typed text */
  font-family: inherit; resize: vertical;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(14, 140, 162, .25); border-color: var(--brand); }
.kv { display: flex; gap: 12px; padding: 5px 0; font-size: 14px; }
.kv > span { color: var(--muted); min-width: 120px; }
.btn {
  background: var(--brand); color: #fff; border: none; padding: 11px 16px;
  border-radius: 9px; font-weight: 600; font-size: 14px;
}
.btn:hover { background: var(--brand-dark); }
.btn.full { width: 100%; margin-top: 18px; }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
/* "Try the demo" — replaced the old .demo-hint block that printed live credentials on the page */
.demo-try {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; text-align: center;
}
.demo-try span { font-size: 12px; color: var(--muted); line-height: 1.5; }
.demo-try .btn:disabled { opacity: .65; cursor: default; }
.error { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- App shell ---------- */
#app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: #b7c9cd; padding: 18px 14px; }
.sidebar .logo { display: flex; align-items: center; gap: 11px; color: #fff; margin-bottom: 22px; padding: 4px 6px; }
.sidebar .logo .brand-icon { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.sidebar .logo .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar .logo .brand-name { font-weight: 800; font-size: 17px; letter-spacing: 1.5px; color: #fff; }
.sidebar .logo .brand-tag { font-size: 9.5px; letter-spacing: .8px; color: #7fb9c2; text-transform: uppercase; margin-top: 2px; }
.nav a { display: flex; gap: 10px; align-items: center; color: #b7c9cd; padding: 10px 12px; border-radius: 9px; margin-bottom: 3px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(14,140,162,.35); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  min-height: 60px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 24px;
}
#topTitle { order: 1; font-weight: 600; white-space: nowrap; }
.topbar > .row { order: 2; margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* the scope/period controls always wrap to their own full-width tier below the title */
.ctxbar { order: 3; flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 9px; border-top: 1px solid var(--line); }
.ctxbar:empty { display: none; }
.ctx-lbl { font-weight: 600; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ctxbar select { width: auto; min-width: 120px; max-width: 190px; padding: 7px 10px; font-size: 13px; }
.ctx-range { display: inline-flex; align-items: center; gap: 6px; }
.ctxbar input[type=date] { width: auto; padding: 6px 8px; font-size: 13px; }
.ctx-dash { color: var(--muted); }
.ctx-chips { display: inline-flex; gap: 6px; margin-left: auto; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; line-height: 1.2; }
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.topbar .who { text-align: right; line-height: 1.25; }
.topbar .who .name { font-weight: 600; }
.topbar .who .firm { font-size: 12px; color: var(--muted); }
/* extra bottom clearance so the floating Quick-Add "+" button never rests on top of the last row / pager */
.content { padding: 26px 26px 96px; overflow: auto; }
/* app-shell mobile drawer (hidden on desktop) */
.app-burger { display: none; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink); padding: 4px 8px; cursor: pointer; order: 0; }
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(8,20,24,.5); z-index: 45; }
.sb-backdrop.open { display: block; }
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  .app-burger { display: inline-block; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw; z-index: 46;
    transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto;
    box-shadow: 2px 0 22px rgba(0,0,0,.3); }
  .sidebar.open { transform: translateX(0); }
  .topbar { padding: 10px 16px; }
  .content { padding: 18px 14px 96px; }
  .topbar > .row { gap: 8px; }
  .ctxbar select { max-width: 46vw; }
}
.page-title { font-size: 20px; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 20px; }

/* cards / grid */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.card .k { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.card .v { font-size: 28px; font-weight: 700; margin-top: 6px; }
.card .v.small { font-size: 18px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 20px; }
.panel h3 { margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.panel .body { padding: 16px 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }

/* Collapsible panel. The summary is styled to be indistinguishable from a normal .panel-head, so
   an open panel looks exactly as it always did — only the chevron says it can fold. Whether it
   starts open is decided at render time by viewport (collapsed on a phone, open on a desktop),
   because `open` is a single attribute and cannot vary by media query.
   Action buttons live INSIDE the summary, so their click must not toggle the panel — wireFoldPanels
   stops that. */
.pfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 14px 18px; }
.pfold > summary::-webkit-details-marker { display: none; }
.pfold > summary::marker { content: ""; }
.pfold > summary > h3 { border: 0; padding: 0; margin: 0; }
.pfold[open] > summary { border-bottom: 1px solid var(--line); }
/* inline-block, not inline: `transform` is ignored on a non-replaced inline element, so the
   chevron silently never turned. */
.pfold-chev { display: inline-block; color: var(--muted); font-size: 11px;
  transition: transform .15s; flex: 0 0 auto; }
.pfold[open] .pfold-chev { transform: rotate(180deg); }
.pfold > summary:hover .pfold-chev { color: var(--ink); }
.pfold > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 14px; }
/* the actions + chevron group sits at the right of the summary */
.pfold-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Period picker: FY selector + month/quarter selector sit inline, auto-width. */
.panel-head .row #fy, .panel-head .row #period { width: auto; }
.panel-head .row #fy { font-weight: 600; background: #eef1f6; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
tr.click:hover { background: #f7f9ff; cursor: pointer; }
.empty { color: var(--muted); padding: 24px; text-align: center; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.green { background: #e6f6ec; color: var(--green); }
.badge.amber { background: #fdf1e0; color: var(--amber); }
.badge.red { background: #fdeaea; color: var(--red); }
.badge.blue { background: #eaeeff; color: var(--brand); }
.badge.gray { background: #eef1f6; color: var(--muted); }
.rating { font-weight: 700; width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; }
.rating.A { background: #e6f6ec; color: var(--green); }
.rating.B { background: #eaeeff; color: var(--brand); }
.rating.C { background: #fdf1e0; color: var(--amber); }
.rating.D { background: #fdeaea; color: var(--red); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.pill { background: #eef1f6; color: var(--ink); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; }

/* Bulk-action bar: inline "move to ledger/party" control */
.bulk-move { display: inline-flex; gap: 6px; align-items: center; }
.bulk-move input { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.undo-toast { display: flex; align-items: center; gap: 12px; }
.undo-toast .undo-btn { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 6px; padding: 3px 10px; font-weight: 600; cursor: pointer; }
.undo-toast .undo-btn:hover { background: rgba(255,255,255,.15); }

/* Ageing report — bucket summary tiles */
.ag-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ag-tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ag-tile .ag-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.ag-tile .ag-val { font-size: 18px; }
.ag-tile.strong { border-color: #b9c2e0; background: #f6f8fc; }
.ag-tile.overdue { border-color: #f5c6c2; background: #fdf1f0; }
.ag-tile.overdue .ag-val { color: var(--red); }

/* Split-account warning: the same customer name sitting under two GSTINs. Deliberately loud —
   a reader who misses it takes one row's total for the whole account. */
.ag-split-note { background: #fffaf0; border: 1px solid #f0d9a8; border-left: 3px solid var(--amber);
  border-radius: 8px; padding: 11px 14px; margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #4a3a1a; }
.ag-split-note b { color: #3d2f12; }
.ag-split-note ul { margin: 7px 0 0; padding-left: 18px; }
.ag-split-note li { margin-bottom: 3px; }
.ag-split-note code { background: #fff; border: 1px solid #ead9b4; border-radius: 3px;
  padding: 0 4px; font-size: 11.5px; }
.badge.ag-split { margin-left: 6px; cursor: help; }

/* Bank book — month-wise register blocks (collapsible) */
.bb-month { margin-bottom: 10px; }
.bb-mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #f6f8fc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer;
  user-select: none; transition: background .12s; }
.bb-mhead:hover { background: #eef2fb; }
.bb-month.open .bb-mhead { border-bottom: 0; border-radius: 8px 8px 0 0; }
.bb-mhead b { font-size: 14px; }
.bb-mhead .muted { font-size: 12px; }
.bb-caret { display: inline-block; width: 14px; color: var(--muted); font-size: 11px; }
.bb-month .tblscroll { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
.bb-month table.grid tbody tr[data-je] { cursor: pointer; }
.bb-month table.grid tbody tr[data-je]:hover { background: #f3f7ff; }

/* Totals row on a data grid. Both the stock summary and the item ledger close with a <tfoot>, but
   nothing styled it, so the totals read as just one more body row. */
table.grid tfoot td, table.grid tfoot th { border-top: 2px solid var(--line); background: #f6f8fc;
  font-weight: 600; padding: 9px 10px; }

/* A row arrived at from elsewhere ("open the entry behind this movement"). The register has no
   single-voucher page, so the row itself is the destination and has to be findable. */
/* Copy-ready field list for the income-tax portal hand-off: the value is what gets copied, the
   label never is, so a mis-click cannot paste "Major head" into an amount box. */
.cp-box { border: 1px solid #e5e8f0; border-radius: 8px; background: #fafbfd; padding: 4px 10px; }
.cp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eef1f7; }
.cp-row:last-child { border-bottom: 0; }
.cp-lbl { font-size: 12px; color: #64748b; min-width: 128px; }
.cp-val { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.cp-btn { padding: 1px 7px; }
.cp-hint { font-size: 11px; }

/* Trial balance / ledgers list group tree: nature band -> standard group -> sub-group -> ledger. */
tr.tb-grp2 > td { background: #f4f7fd; font-weight: 700; padding: 8px 10px; border-top: 1px solid var(--line); }
tr.tb-grp3 > td { background: #fafbfe; font-weight: 600; padding-left: 24px; color: #334155; }

/* Ageing report grouped by the sub-group a party's ledger is filed in. The heading carries that
   group's own total, and its parties indent under it. */
tr.ag-grp > td { background: #f4f7fd; border-top: 1px solid var(--line); padding-top: 9px; }
tr.ag-in-grp > td:first-child { padding-left: 24px; }

/* Sub-group subtotal inside a balance-sheet / P&L sub-head: main head -> sub-head -> SUB-GROUP ->
   ledger. Sits between the two, so it is indented less than a ledger and more than the sub-head. */
.bsv-led.bsv-ledgrp .bsv-ledlbl { padding-left: 30px; color: #334155; font-weight: 600; }
.bsv-led.bsv-ledgrp td { background: #fbfcfe; }
.bsv-led.bsv-lednest .bsv-ledlbl { padding-left: 62px; }

tr.rowfocus > td { background: #fff8e1; box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, .10); }
tr.rowfocus > td:first-child { box-shadow: inset 3px 0 0 var(--amber), inset 0 0 0 9999px rgba(245, 158, 11, .10); }

/* A ledger row that opens its source document. Row-level cursor:pointer alone was too quiet — the
   reference is the thing you click, so it looks like the link it is. */
table.grid a.lnk { color: var(--brand); text-decoration: none; border-bottom: 1px dotted currentColor; }
table.grid tbody tr[data-ri]:hover > td { background: #f3f7ff; }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(16, 25, 58, .45); display: grid; place-items: center; z-index: 50; }
.modal { background: #fff; border-radius: 14px; width: 440px; max-width: 92vw; padding: 22px; box-shadow: var(--shadow); }
.modal:has(.jsonbox) { width: 680px; }
.jsonbox { background: #0f1836; color: #d7e0f5; border-radius: 10px; padding: 14px; font-family: "Consolas", monospace;
  font-size: 12px; line-height: 1.5; max-height: 60vh; overflow: auto; white-space: pre; }
.modal:has(table) { width: 640px; }
/* GSTR return summary view */
.ret-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 16px; }
/* File-return cross-check band: client / GSTIN / return / period — made impossible to miss. */
.file-xcheck { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 12px; }
.file-xcheck > div { background: var(--card, #fff); padding: 10px 14px; }
.file-xcheck > div > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 3px; }
.file-xcheck > div > b { font-size: 14px; }
.file-xcheck .muted { font-size: 11.5px; }
.file-xcheck select { width: 100%; padding: 5px 8px; margin-top: 2px; }
/* GSTR-1 expandable section table — click a section to drill to invoice / rate / HSN level. */
.g1-sectbl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.g1-sechd, .g1-grand, .g1-sum { display: grid; grid-template-columns: 22px minmax(150px, 1fr) auto 130px 130px; gap: 8px; align-items: center; }
.g1-sechd { background: #f6f8fc; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; font-size: 11px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.g1-grand { background: #f6f8fc; font-weight: 700; padding: 10px 12px; border-top: 1px solid var(--line); }
.g1-sec { border-bottom: 1px solid var(--line); }
.g1-sec:last-of-type { border-bottom: 0; }
.g1-sec[open] { background: #fbfcfe; }
.g1-sum { padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13px; }
.g1-sum::-webkit-details-marker { display: none; }
.g1-tw { color: var(--muted); transition: transform .15s; }
.g1-sec[open] .g1-tw { transform: rotate(90deg); }
.g1-name { font-weight: 600; }
.g1-sub { color: var(--muted); font-size: 12px; white-space: nowrap; }
.g1-tv, .g1-tx { font-variant-numeric: tabular-nums; }
.g1-detail { padding: 2px 12px 12px 34px; overflow-x: auto; }
.g1-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.g1-tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.g1-tbl td { padding: 5px 8px; border-bottom: 1px solid #f0f2f6; }
.g1-tbl th.num, .g1-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* HSN/SAC search-as-you-type dropdown (correction window + item create). */
.hsn-dd { position: fixed; z-index: 9999; min-width: 280px; max-width: 460px; max-height: 260px; overflow-y: auto; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 30, 60, .14); }
.hsn-opt { padding: 6px 10px; cursor: pointer; font-size: 12.5px; border-bottom: 1px solid #f0f2f6; white-space: nowrap; }
.hsn-opt:last-child { border-bottom: 0; }
.hsn-opt:hover { background: #f2f6ff; }
.ret-card { background: #f6f8fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ret-card span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.ret-card b { font-size: 15px; word-break: break-word; }
.ret-sechead { font-weight: 600; font-size: 13px; margin: 16px 0 6px; color: var(--ink); }
.sumtbl tr.ret-total td { border-top: 2px solid var(--line); background: #f6f8fc; }
.ret-rawwrap { margin-top: 14px; }
.val-ok { background: #e6f6ec; color: #16a34a; border: 1px solid #b7e4c7; border-radius: 10px;
  padding: 14px 16px; font-weight: 600; margin-bottom: 8px; }
.val-warn { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; }
.modal h3 { margin: 0 0 14px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* Actions row on the standalone new-invoice page (not inside a modal). */
.panel .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.field-row { display: flex; gap: 12px; }
.field-row > div { flex: 1; }
/* Keyboard-shortcuts reference page — responsive card grid */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
/* Tally sync page — responsive 3-card grid */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
/* Goods/Service selector on an invoice line */
.ni-type { padding: 5px 4px; border: 1px solid #d5dae2; border-radius: 7px; background: #fff; font-size: 12px; min-width: 92px; }
.ni-lines input:disabled { background: #f3f4f6; color: #9aa1ad; }
/* Overview command-centre quick actions */
.qa-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: #334155; }
.qa-btn:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.qa-btn kbd { font-weight: 400; }
/* Supplier-bill sub-panel on the expense voucher — visually groups the vendor's bill ref. */
.jf-billbox { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line);
  border-left: 3px solid #f59e0b; border-radius: 10px; background: #fffdf6; }
.jf-billbox-head { font-size: 12.5px; font-weight: 600; color: #92610a; margin-bottom: 8px; }
.jf-billbox-head .muted { font-weight: 400; }
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 8px; }

/* client workspace tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 20px; }
.tabs a { padding: 10px 16px; cursor: pointer; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.tabs a:hover { color: var(--ink); background: #f5f7ff; }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
/* Reports secondary nav — lighter, wraps on small screens */
.sub-tabs { flex-wrap: wrap; margin: 0 0 14px; gap: 2px; font-size: 13px; }
.sub-tabs a { padding: 7px 12px; font-size: 13px; }
/* dropdown tabs in the client tab bar (Filing ▾ / More ▾) */
.tabs .tab-dd { position: relative; display: inline-flex; }
.tabs .tabdd-btn { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.tabs .tabdd-btn:hover { color: var(--ink); background: #f5f7ff; }
.tabs .tabdd-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .tab-dd .dropdown-menu { left: 0; right: auto; top: calc(100% - 2px); min-width: 160px; }
/* pill-style sub-tabs (e.g. inside Reconciliation) */
.subtabs { display: flex; gap: 6px; margin: 0 0 16px; }
.subtabs a { padding: 7px 15px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted);
  background: #eef1f6; border-radius: 999px; user-select: none; }
.subtabs a:hover:not(.active) { color: var(--brand); }
.subtabs a.active { background: var(--brand); color: #fff; }
.rlink { color: var(--brand); cursor: pointer; font-size: 12px; font-weight: 600; }
.rlink:hover { text-decoration: underline; }
.crumb a { cursor: pointer; }
.toast { position: fixed; bottom: 22px; right: 22px; background: #10193a; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 60; }

.block-banner { background: #fdeaea; border: 1px solid #f5b5b5; color: #9b1c1c; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.block-banner .btn { margin-left: auto; background: #dc2626; }
.block-banner .btn:hover { background: #b91c1c; }

.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.upload-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfcfe; }
.upload-card .uc-title { font-weight: 600; }
.upload-card .uc-hint { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.upload-card input[type=file] { font-size: 12px; margin-bottom: 10px; }
.upload-card input[type=file]::file-selector-button { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 5px 10px; margin-right: 8px; cursor: pointer; }

/* ---- import / export center ---- */
.muted { color: var(--muted); }
.row.wrap { flex-wrap: wrap; }
.io-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.io-row .io-lbl { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.io-row select, .io-row input[type=file] { width: auto; }
.io-row input[type=file] { font-size: 13px; }
.io-row input[type=file]::file-selector-button { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 6px 10px; margin-right: 8px; cursor: pointer; }
.io-group { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.io-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.io-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.val-warn { background: #fdf1e0; color: #8a5a12; border: 1px solid #f2d9ac; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.mapwrap { margin-top: 10px; }
.tblscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.maptbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.maptbl th { text-align: left; background: #f6f8fc; padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.maptbl td { padding: 6px 10px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.maptbl tr:last-child td { border-bottom: 0; }
.maptbl td.src-h { font-weight: 600; }
.maptbl select { width: 100%; padding: 5px 8px; font-size: 12px; }
.sumtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sumtbl th { text-align: left; background: #f6f8fc; padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sumtbl td { padding: 7px 10px; border-bottom: 1px solid #eef1f6; }
.sumtbl tr:last-child td { border-bottom: 0; }
.sumtbl tr.sumtbl-tot td { border-top: 2px solid var(--line); background: #f6f8fc; font-weight: 600; }
.sumtbl .num, .maptbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.io-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.io-card { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 10px; padding: 12px 14px; background: #fbfcfe; }
.io-card.green { border-left-color: var(--green); }
.io-card.amber { border-left-color: var(--amber); }
.io-card.red { border-left-color: var(--red); }
.io-card.gray { border-left-color: var(--muted); }
.io-card .ic-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.io-card .ic-value { font-size: 20px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.io-card .ic-hint { font-size: 11px; color: var(--muted); }
/* clickable reconciliation rows (month rows + invoice-line rows open a drill-down) */
.reco-row:hover, .turn-mrow:hover, .itc-mrow:hover { background: var(--brand-soft); }
/* reconciliation line drill-down modal: Books / 2A / 2B side-by-side */
.reco-detail th:first-child, .reco-detail td:first-child { text-align: left; color: var(--muted); font-weight: 600; }
.reco-detail thead th { text-align: right; }
.reco-detail tr.reco-gap td { background: #fdeaea; }
/* match-own-transfers: AI flags a pair as unlikely to be a real transfer */
.sumtbl tr.ot-warn > td { background: #fff8ec; }
.reco-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); background: #f6f8fc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }

/* ---- invoices: toolbar + paginated sticky table ---- */
.inv-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.inv-search { flex: 1; max-width: 340px; padding: 8px 12px; }
.inv-toolbar select { width: auto; }
/* padding-bottom keeps the last invoice row scrollable above the floating "+" button */
/* No bottom padding. A sticky `bottom: 0` child pins to the bottom of the CONTENT box, so
   padding here pushes the totals row that far up the table — it then floats over a data row with
   dead space beneath it. The 64px was clearance for the mobile "+" FAB, which only ever renders
   on the client workspace home; this container exists only on the invoice register. */
.invscroll { max-height: 62vh; overflow: auto; }
.invtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.invtbl thead th { position: sticky; top: 0; z-index: 1; background: #f6f8fc; text-align: left;
  padding: 9px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.invtbl tbody td { padding: 9px 12px; border-bottom: 1px solid #eef1f6; }
.invtbl tbody tr:hover { background: #fafbff; }
.invtbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invtbl th.sortable { cursor: pointer; user-select: none; }
.invtbl th.sortable:hover { color: var(--brand); }
.invtbl th.active { color: var(--brand); }
.invtbl th .sort-ind { font-size: 11px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.pager button[disabled] { opacity: .45; cursor: default; }
.inv-row { cursor: pointer; }
.inv-toolbar select { width: auto; }

/* ---- always-visible period summary above the invoice grid ---- */
.inv-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(#fbfcfe, #f4f7fc);
  margin: 2px 0 12px; overflow: hidden; }
.inv-summary .sum-cell { display: flex; flex-direction: column; gap: 2px; padding: 9px 16px;
  border-right: 1px solid #eaeef5; min-width: 96px; }
.inv-summary .sum-lbl { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.inv-summary .sum-val { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-summary .sum-cell.strong { background: #eef4ff; }
.inv-summary .sum-cell.strong .sum-val { color: var(--brand); }
.inv-summary .sum-scope { margin-left: auto; align-self: center; padding: 0 16px; font-size: 12px; color: var(--muted); font-style: italic; }
.invtbl tfoot td { padding: 9px 12px; border-top: 2px solid var(--line); background: #f6f8fc;
  font-weight: 700; font-size: 13px; position: sticky; bottom: 0; }
.invtbl .num.strong, .invtbl td.strong { font-weight: 700; }
.lt-sum:empty { display: none; }
/* ---- printed financial statements (BS / P&L: T-format + schedules) ---- */
.fs-face { display: flex; gap: 0; border: 1.5px solid #1f2a44; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.fs-face .fs-tbl { flex: 1 1 0; }
.fs-face .fs-tbl:first-child { border-right: 1.5px solid #1f2a44; }
.fs-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fs-tbl thead th { background: transparent; color: #1f2a44; text-align: left; padding: 7px 12px; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; border-bottom: 2px solid #1f2a44; }
.fs-tbl tbody td { padding: 6px 12px; border-bottom: 1px solid #e9edf5; vertical-align: top; }
/* T-format: the shorter side's table stretches to equal height — keep its rows pinned to the TOP
   (Owners' Funds/Capital sits at the top of the liabilities side, never floated to the middle). */
.fs-face .fs-tbl { align-self: stretch; }
.fs-face .fs-tbl tbody { vertical-align: top; }
.fs-tbl .fs-grp { font-weight: 600; color: #1f2a44; }
.fs-tbl .fs-sch { color: #8a90a6; font-size: 10.5px; white-space: nowrap; }
.fs-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-tbl .fs-extra td { font-style: italic; color: #334155; }
.fs-tbl tfoot .fs-tot td { border-top: 2px solid #1f2a44; border-bottom: 3px double #1f2a44; font-weight: 700;
  background: transparent; padding: 7px 12px; }
/* Clean two-level T-format side: main-head row (with the group total) → indented sub-heads. 2 cols. */
.bst-tbl .bst-main td { font-weight: 700; color: #1f2a44; padding-top: 7px; padding-bottom: 7px;
  background: #eef1f6; border-top: 1px solid #cbd5e1; border-bottom: 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* full-FS / Schedule III section headers (I. EQUITY & LIABILITIES, II. ASSETS, Revenue, Expenses) */
.fs-tbl .fs-grp2 td, .fs-tbl tr.fs-grp2 > td { background: #eef1f6; font-weight: 700; color: #1f2a44;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bst-tbl .bst-sub .bst-lbl { padding-left: 24px; color: #334155; font-weight: 400; }
.bst-tbl .bst-sub td { border-bottom: 0; padding-top: 3px; padding-bottom: 3px; font-weight: 400; color: #334155; }
/* inline schedule reference (e.g. "Capital Account  Sch 1") — muted, no separate column */
.fs-schin { color: #8a90a6; font-size: 10px; font-weight: 400; white-space: nowrap; }
/* Standard VERTICAL statement (print): full-width, Equity & Liabilities above Assets (BS) /
   Income above Expenses (P&L). Ruled columns so it reads like a proper statement. */
.bsv-wrap { border: 1.5px solid #1f2a44; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.bsv-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bsv-pyin { display: none; }   /* previous-year figure stacked in the current cell — phones only (see mobile block) */
.bsv-tbl thead th { background: transparent; color: #1f2a44; text-align: left; padding: 7px 12px; font-size: 11.5px;
  letter-spacing: .03em; text-transform: uppercase; border-bottom: 2px solid #1f2a44; border-right: 1px solid #d9e0ee; }
.bsv-tbl thead th.bsv-sch, .bsv-tbl thead th.bsv-in, .bsv-tbl thead th.bsv-out { text-align: right; }
.bsv-tbl td { padding: 5px 12px; }
/* vertical column rules between Particulars | Sch | inner ₹ | outer ₹ */
.bsv-tbl td.bsv-sch, .bsv-tbl td.bsv-in, .bsv-tbl th.bsv-sch, .bsv-tbl th.bsv-in { border-right: 1px solid #d9e0ee; }
.bsv-tbl td.bsv-out, .bsv-tbl th.bsv-out { border-left: 1px solid #c7d2e8; }
.bsv-sch { width: 68px; text-align: right; color: #8a90a6; font-size: 10.5px; white-space: nowrap; }
.bsv-in, .bsv-out { width: 160px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsv-sec td { background: #eef1f6; color: #1f2a44; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 11.5px; padding: 7px 12px; border-top: 1.5px solid #1f2a44;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bsv-tbl tbody tr:first-child.bsv-sec td { border-top: 0; }
.bsv-main td { font-weight: 700; color: #1f2a44; padding-top: 7px; padding-bottom: 7px;
  border-top: 1px solid #cbd5e1; border-bottom: 0; background: transparent; }
.bsv-main .bsv-out { font-weight: 700; }        /* group total on the group row, in front of the name */
.bsv-sub .bsv-lbl { padding-left: 30px; color: #334155; font-weight: 400; }
.bsv-sub td { border-bottom: 0; padding-top: 3px; padding-bottom: 3px; font-weight: 400; color: #334155; }
.bsv-sectot td { background: transparent; font-weight: 800; color: #111827; border-top: 2px solid #1f2a44;
  border-bottom: 2px solid #1f2a44; padding: 8px 12px; }
.bsv-netrow td { background: transparent; color: #1f2a44; font-weight: 800; padding: 8px 12px; font-size: 13px;
  border-top: 2px solid #1f2a44; border-bottom: 3px double #1f2a44; }
.bsv-netrow .bsv-out, .bsv-netrow .bsv-cy, .bsv-netrow .bsv-py { color: #1f2a44; }
/* comparatives: Current | Previous year amount columns */
.bsv-cy, .bsv-py { width: 150px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsv-tbl thead th.bsv-cy, .bsv-tbl thead th.bsv-py { text-align: right; }
.bsv-tbl td.bsv-cy, .bsv-tbl th.bsv-cy { border-left: 1px solid #c7d2e8; }
.bsv-tbl td.bsv-py, .bsv-tbl th.bsv-py { border-left: 1px solid #d9e0ee; }
.bsv-comp .bsv-main .bsv-cy, .bsv-comp .bsv-main .bsv-py, .bsv-comp .bsv-sectot .bsv-cy, .bsv-comp .bsv-sectot .bsv-py { font-weight: 700; }
.bsv-comp .bsv-sub .bsv-py { color: #64748b; }
/* interactive drill: clickable sub-heads + indented ledger rows */
.bsv-drill { cursor: pointer; }
.bsv-drill:hover .bsv-lbl { color: #3552d6; }
.bsv-led td { background: #fafbfe; border-bottom: 1px solid #eef1f6; }
.bsv-led .bsv-ledlbl { padding-left: 46px; color: #475569; font-weight: 400; }
.bsv-led[data-acc] { cursor: pointer; }
.bsv-led[data-acc]:hover .bsv-ledlbl { color: #3552d6; text-decoration: underline; }
.fs-sched.fs-sched-comp .fs-amt { width: 132px; }   /* two amount cols; more specific so it wins */
/* rule between the Current (2nd col) and Previous (3rd col) amount columns */
.fs-sched-comp thead th:nth-child(2), .fs-sched-comp tbody td:nth-child(2), .fs-sched-comp tfoot td:nth-child(2) { border-right: 1px solid #e3e9f4; }
/* Place / signing-date control on the statement toolbar */
.pd-bar { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; color: #475569; }
.pd-bar label { display: inline-flex; gap: 4px; align-items: center; }
.pd-bar input { border: 1px solid #cbd5e1; border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.pd-bar input[type="text"] { width: 92px; }
/* statement layout toggle (T-format ⇄ ICAI vertical) */
.stmt-fmt { display: inline-flex; align-items: center; gap: 6px; }
.stmt-fmt .sf-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 12px;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.stmt-fmt .sf-btn.on { background: #1f2a44; border-color: #1f2a44; color: #fff; }
.fs-sched .bss-grp td { font-weight: 600; color: #1f2a44; background: transparent; border-top: 1px solid #e3e9f4; }
.fs-tbl .fs-subtot td { border-top: 1px solid #c7d2e8; font-weight: 700; background: transparent; }
/* Blank signing space above a signature line. A class, not an inline height, so the print and
   PDF paths can tighten it when a statement has to fit on one page. */
.sig-gap { height: 30px; }
.sig-gap-ca { height: 40px; }
.fs-net { text-align: right; font-size: 13px; margin: 8px 2px 4px; }
/* The statutory face (Balance Sheet / Statement of Profit and Loss). It has to fill the page. At the
   old 460px cap it occupied about two-thirds of an A4 content width, and once the mandatory
   comparative added a fourth column the Particulars column was so starved that Schedule III's own
   line descriptions wrapped onto three lines with the figure orphaned below them. */
.fs-single { width: 100%; max-width: 100%; border: 1.5px solid #1f2a44; border-radius: 6px; overflow: hidden; }
.fs-single thead { display: table-header-group; }   /* repeat the column heads on a continued page */
.fs-single tfoot { display: table-footer-group; }
.fs-single tr { break-inside: avoid; page-break-inside: avoid; }   /* never split a line in half */
/* Notes screen: the per-note print switch */
.fsn-pr { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: #475569; margin-right: 4px; }
.fsn-pr input { margin: 0; }
.fs-sched-h { margin: 22px 0 10px; font-weight: 700; font-size: 13.5px; color: #1f2a44;
  border-bottom: 2px solid #1f2a44; padding-bottom: 4px; }
/* Notes to Accounts (non-corporate) — Significant Accounting Policies + disclosure notes */
.fs-note { margin: 12px 0 16px; break-inside: avoid; }
.fs-note-h { font-weight: 700; font-size: 12.5px; color: #1f2a44; margin: 10px 0 6px;
  border-bottom: 1px solid #c7d2e8; padding-bottom: 3px; }
.fs-note-pt { font-size: 11.5px; line-height: 1.5; color: #2b3550; margin: 4px 0; text-align: justify; }
.fs-disc-h { margin: 20px 0 6px; font-weight: 700; font-size: 12.5px; color: #4a5573;
  text-transform: uppercase; letter-spacing: .04em; }
@media print { .no-print { display: none !important; } }
/* Practitioner's Report (CA certificate) */
.pract-doc { font-size: 12.5px; line-height: 1.55; color: #1f2a44; }
.pract-doc .pract-h { font-weight: 700; margin: 12px 0 2px; text-transform: uppercase; font-size: 11.5px; letter-spacing: .03em; color: #334155; }
.pract-ol { margin: 4px 0 4px 18px; padding: 0; }
.pract-ol > li { margin: 6px 0; text-align: justify; }
.pract-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 28px; flex-wrap: wrap; page-break-inside: avoid; }
/* PPE / fixed-asset movement schedule (Note 11) — multi-column, so override the 2-col schedule layout */
.fs-sched.fs-sched-ppe { table-layout: auto; }
.fs-sched.fs-sched-ppe .fs-amt { width: auto; min-width: 74px; white-space: nowrap; }
.fs-sched.fs-sched-ppe thead th { font-size: 11px; }
.fs-sched-grid { display: block; }   /* plain block so schedules paginate cleanly (no flex blank space) */
.fs-sched { margin: 16px 0; }   /* stacked one under another, with clear space above each box */
/* clear breathing room between the statement heading and the first schedule box */
.fs-sched-grid > .fs-sched:first-child, .fs-block > .fs-sched:first-of-type { margin-top: 22px; }
/* statutory statement heading (company · statement · period) */
.fs-head { text-align: center; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #1f2a44; }
.fs-co { font-size: 17px; font-weight: 800; color: #111827; letter-spacing: .01em; }
.fs-co-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }
.fs-stmt { font-size: 14px; font-weight: 700; color: #1f2a44; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.fs-period { font-size: 12px; color: #374151; margin-top: 2px; }
.fs-sched-sep { margin-top: 18px; padding-top: 4px; border-top: 1px dashed #c7d2e8; }
.fs-sched { width: 100%; border-collapse: collapse; font-size: 11.5px; break-inside: auto; table-layout: fixed; }   /* fixed layout so the name|₹ divider lines up across ALL schedules (no zig-zag) */
.fs-sched .fs-amt { width: 210px; }   /* every schedule's amount column is the same width → dividers align */
.fs-sched thead { display: table-header-group; }   /* repeat the schedule header on each continued page */
.fs-sched tr { break-inside: avoid; }              /* but never split a single row */
.fs-sched { border: 1px solid #cbd5e8; }                          /* clean outer frame per schedule */
.fs-sched thead th { background: transparent; color: #1f2a44; text-align: left; padding: 5px 10px;
  border-bottom: 1.5px solid #1f2a44; font-size: 11px; }
.fs-sched tbody td { padding: 4px 10px; border-bottom: 1px solid #eef1f6; }
.fs-sched th:first-child, .fs-sched td:first-child { border-right: 1px solid #e3e9f4; }  /* rule between name | ₹ */
.fs-sched tfoot .fs-tot td { border-top: 1.5px solid #1f2a44; font-weight: 700; padding: 5px 10px; }
/* T-format side: rule between Particulars | Amount, so the two sides read as clean columns */
.fs-face .fs-tbl td:first-child, .fs-face .fs-tbl th:first-child { border-right: 1px solid #e3e9f4; }
.fs-title { font-size: 15px; font-weight: 700; color: #1f2a44; margin: 4px 0 8px; letter-spacing: .01em;
  border-bottom: 2px solid #1f2a44; padding-bottom: 4px; }
/* each statement / the schedules start on a fresh page when printing (no blank pages) */
.fs-newpage { break-before: page; page-break-before: always; }
/* keep the coloured headers/totals when printing (browsers drop backgrounds otherwise) */
.fs-tbl thead th, .fs-tbl tfoot .fs-tot td, .fs-sched thead th, .fs-sched tfoot .fs-tot td {
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fs-onscreen { max-width: 900px; }
@media print { .fs-onscreen { max-width: none; } }
/* ---- multi-page camera capture thumbnails ---- */
.cap-thumbs { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.cap-thumb { position: relative; width: 92px; height: 120px; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: #f6f8fc; }
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-thumb .cap-n { position: absolute; left: 4px; bottom: 4px; background: rgba(15,23,42,.75); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.cap-thumb .cap-rm { position: absolute; top: 2px; right: 2px; }
/* ---- bank-import setup: numbered steps ---- */
.bi-step { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bi-step:last-of-type { border-bottom: 0; }
.bi-step-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.bi-step-b { flex: 1; min-width: 0; }
.bi-step-b input[type=file] { font-size: 13px; }
.inv-hints { font-size: 11px; margin-top: 8px; text-align: right; }
.inv-hints b { color: var(--ink); font-family: ui-monospace, monospace; font-weight: 600; }

/* ---- single invoice: GST tax invoice, full-page A4 bordered document ---- */
.modal.inv-modal { width: 900px; max-width: 96vw; }
.modal.inv-modal #invPrintArea { max-height: 80vh; overflow: auto; background: #e8ecf4;
  padding: 18px; border-radius: 10px; }
/* Firm-wide GST reconciliation table */
.fr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fr-tbl thead th { position: sticky; top: 0; background: #f6f8fc; z-index: 1; text-align: left;
  padding: 8px 10px; font-size: 12px; color: #39435f; font-weight: 700; border-bottom: 1px solid #e3e8f2; }
.fr-tbl th.fr-grp { text-align: center; background: #eef2fa; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; border-left: 1px solid #e3e8f2; }
.fr-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.fr-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-name { font-weight: 600; color: var(--ink); }
.fr-sub { font-size: 11px; color: var(--muted); }
.fr-row { cursor: pointer; }
.fr-row:hover td { background: #f6f8fc; }
.fr-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.fr-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; height: 19px; line-height: 19px;
  border-radius: 10px; background: #e0574b; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.nav a.active .nav-badge { background: #fff; color: #b4362b; }
.nav-badge.hidden { display: none; }

/* Full-page invoice view (dedicated page, not a modal) — a clean toolbar over a document viewer. */
.inv-view-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 12px; background: #fff; border: 1px solid #e3e8f2;
  border-radius: 12px; box-shadow: 0 1px 2px rgba(16,25,58,.04);
  position: sticky; top: 0; z-index: 20; }   /* stays put while scrolling a long invoice */
.inv-view-actions .ivx-spacer { flex: 1 1 auto; }
.inv-copies { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 600; }
.inv-copies select { width: auto; font-size: 13px; padding: 6px 8px; font-weight: 500; }
/* Document viewer: the A4 page centred on a soft grey desk; scrolls on very narrow screens. */
#invPrintArea { background: #eef1f7; padding: 28px 24px; border-radius: 12px; overflow-x: auto;
  display: flex; justify-content: center; }
#invPrintArea > .ip-doc { flex: 0 0 auto; }   /* keep the fixed 794px page (don't let flex squash it) */
/* On-screen preview mirrors the printed page: same fixed layout, same type sizes, same dense step,
   so what the user reads here is what comes off the printer (the doc is a fixed 794px = A4 @ 96dpi).
   table-layout:fixed matters as much on screen as in print — without it these columns are measured
   from their content and the Amount column is the one that gets squeezed. */
#invPrintArea .ip-lines, #invPrintArea .ip-taxsum { table-layout: fixed; }
#invPrintArea .ip-lines, #invPrintArea .ip-lines th, #invPrintArea .ip-lines td,
#invPrintArea .ip-taxsum, #invPrintArea .ip-taxsum th, #invPrintArea .ip-taxsum td { font-size: 10px; }
#invPrintArea .ip-lines th, #invPrintArea .ip-lines td,
#invPrintArea .ip-taxsum th, #invPrintArea .ip-taxsum td { padding: 4px 4px; }
#invPrintArea .ip-lines-dense th, #invPrintArea .ip-lines-dense td { font-size: 9px; padding: 4px 3px; }
#invPrintArea .ip-lines .ip-desc { min-width: 0; overflow-wrap: anywhere; }
#invPrintArea .ip-lines .num, #invPrintArea .ip-taxsum .num { white-space: normal; overflow-wrap: break-word; }
/* A4 at 96dpi ≈ 794×1123px; a bordered white page whose sections fill it top-to-bottom */
.ip-doc { width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto; background: #fff;
  color: #16203a; font-size: 12.5px; box-sizing: border-box; display: flex; flex-direction: column;
  border: 1.5px solid var(--ip-rule); box-shadow: 0 4px 18px rgba(16,25,58,.18); }
.ip-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
  border-bottom: 1.5px solid var(--ip-rule); }
.ip-title { font-size: 21px; font-weight: 800; letter-spacing: .5px; }
.ip-copy { font-size: 10px; color: var(--muted); font-weight: 600; }
.ip-brand { display: flex; align-items: center; gap: 12px; }
.ip-logo { max-height: 48px; max-width: 170px; object-fit: contain; }
.ip-brandname { font-weight: 700; font-size: 15px; }
.ip-top { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 1.5px solid var(--ip-rule); }
.ip-block { padding: 10px 14px; border-right: 1.5px solid var(--ip-rule); }
.ip-label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.ip-block .ip-name { font-weight: 700; font-size: 13.5px; }
.ip-block > div { line-height: 1.5; }
.ip-meta { padding: 10px 14px; }
.ip-meta > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ip-meta span { color: var(--muted); }
/* item table STRETCHES to fill the page; a filler row keeps the column grid visible
   down to the Total row, so there is no plain-white tamperable void */
.ip-itemsec { flex: 1; display: flex; flex-direction: column; border-bottom: 1.5px solid var(--ip-rule); }
.ip-itemsec > .ip-lines { flex: 1; }
.ip-lines { width: 100%; border-collapse: collapse; }
.ip-lines th, .ip-lines td { border: 1px solid var(--ip-grid); padding: 6px 8px; border-top: 0; }
.ip-lines th:first-child, .ip-lines td:first-child { border-left: 0; }
.ip-lines th:last-child, .ip-lines td:last-child { border-right: 0; }
.ip-lines thead th { background: var(--ip-tint); font-size: 10px; color: var(--ip-tint-fg); font-weight: 700; text-align: left; }
.ip-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-lines .ip-desc { min-width: 150px; }
.ip-lines tbody td { vertical-align: top; }
/* Goods vs service marker on a mixed invoice line */
.ip-svc, .ip-gds { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .3px;
  padding: 0 4px; border-radius: 3px; vertical-align: middle; border: 1px solid; }
.ip-svc { color: #92610a; border-color: #f0c987; background: #fdf6e7; }
.ip-gds { color: #334155; border-color: #cbd5e1; background: #f1f5f9; }
.ip-fill td { height: 100%; }                 /* absorbs the slack -> grid fills the page */
.ip-itot td { border-top: 1.5px solid var(--ip-rule); font-weight: 700; background: var(--ip-tot-bg); }
.ip-itot .ip-tlabel { text-align: right; }
.ip-cgen { text-align: center; font-size: 10px; color: var(--muted); padding: 7px; font-style: italic; }
/* e-Invoice strip (IRN + QR) */
.ip-einvbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 8px 14px; border-bottom: 1.5px solid var(--ip-rule); background: #f7f9fd; }
.ip-einv-l { font-size: 11px; line-height: 1.6; }
.ip-einv-l .ip-blabel { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.ip-einv-l .ip-irn { word-break: break-all; }
.ip-einv-pending { color: #8a5a12; }
.ip-qr { flex-shrink: 0; }
.ip-qr-img { width: 92px; height: 92px; }
.ip-qr-ph { width: 92px; height: 92px; border: 1px dashed #9aa4c0; border-radius: 6px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--muted);
  font-weight: 700; text-align: center; }
.ip-qr-ph span { font-size: 9px; font-weight: 400; }
label.chk { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink);
  text-transform: none; margin-top: 14px; }
label.chk input { width: auto; }

/* ---- manual new-invoice form ---- */
.modal.ni-modal { width: 980px; max-width: 97vw; }
.ac-sandbox { background: #eef6ff; border: 1px solid #bcdcff; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 12px; color: #24466b; }
.ac-sandbox a { color: #1b64c4; font-weight: 600; }
.ac-sandbox ol { font-size: 12px; }
.ac-gsp { border: 1px solid #d7deea; border-radius: 10px; margin: 0 0 14px; background: #fbfcfe; }
.ac-gsp > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: #24466b; user-select: none; }
.ac-gsp[open] > summary { border-bottom: 1px solid #e6eaf2; }
.ac-gsp-body { padding: 12px 14px; }
.ac-gsp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ac-gsp-cols ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: #33415c; }
.ac-gsp-cols li { margin: 3px 0; }
.ac-gsp-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #5a6885; }
.ac-gsp-done { margin-top: 10px; padding: 8px 12px; background: #eafaf1; border: 1px solid #bfe9cf; border-radius: 8px; font-size: 12px; color: #1c6b3e; }
.btn.danger { color: #b42318; }
.btn.danger:not(.ghost) { background: #d92d20; border-color: #d92d20; color: #fff; }
.btn.ghost.danger { border-color: #f2b8b1; }
.badge.red { background: #fde7e6; color: #b42318; border: 1px solid #f5c6c2; }
.row-cancelled { opacity: 0.62; }
.row-cancelled td:first-child { text-decoration: line-through; text-decoration-color: #d92d20; }
.ip-cancelled { background: #fde7e6; color: #b42318; border: 1.5px solid #e6a19b; border-radius: 6px;
  padding: 6px 12px; margin: 0 0 10px; font-weight: 700; letter-spacing: .5px; text-align: center; font-size: 13px; }
.ip-cancel-meta { font-weight: 500; letter-spacing: 0; font-size: 11px; margin-top: 3px; opacity: .85; }
/* invoice audit trail (in the detail modal, not printed) */
.inv-audit:empty { display: none; }
.inv-audit { margin: 14px 0 4px; border-top: 1px solid #e3e8f2; padding-top: 10px; }
.inv-audit .ia-h { font-size: 12px; font-weight: 700; color: #55618a; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.inv-audit .ia-list { list-style: none; margin: 0; padding: 0; }
.inv-audit .ia-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 0; font-size: 13px; }
.inv-audit .ia-dot { width: 8px; height: 8px; border-radius: 50%; background: #2a9d5c; flex: 0 0 auto; align-self: center; }
.inv-audit .ia-dot.red { background: #b42318; }
.inv-audit .ia-meta { color: #7a8199; font-size: 12px; margin-left: auto; }
/* Debtors/Creditors segmented toggle + drill-down rows */
.seg { display: inline-flex; border: 1.5px solid #c7cede; border-radius: 9px; overflow: hidden; }
.seg-btn { border: 0; background: #fff; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: #55618a; }
.seg-btn + .seg-btn { border-left: 1.5px solid #c7cede; }
.seg-btn.active { background: var(--brand, #4a4ae0); color: #fff; }
.led-row, .tb-acc { cursor: pointer; }
.led-row:hover, .tb-acc:hover { background: #eef2fb; }
/* payment form allocation block */
.pf-alloc { border: 1px dashed #c7cede; border-radius: 9px; padding: 10px 12px; margin: 10px 0 4px; }
.pf-billtbl th, .pf-billtbl td { padding: 5px 8px; font-size: 13px; }
.pf-ai { text-align: right; }
/* money receipt (printed) */
.rcpt-doc { max-width: 620px; }
.rcpt-body { margin: 6px 0; }
.rcpt-amt { text-align: right; font-size: 22px; font-weight: 800; border-top: 2px solid #2a3352; margin-top: 12px; padding-top: 8px; }
/* bank-import preview */
.wide-modal { max-width: 940px; width: 96vw; }
.bk-tbl th, .bk-tbl td { padding: 5px 8px; font-size: 13px; vertical-align: middle; }
.bk-tbl input[type=text], .bk-tbl .bk-party { padding: 4px 6px; }
/* clickable transaction count → expandable per-transaction breakdown */
.bk-count { background: none; border: 1px solid transparent; color: var(--brand); cursor: pointer;
  font: inherit; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 6px; }
.bk-count:hover { background: var(--brand-soft); border-color: var(--brand); }
.bk-tbl tr.bk-open > td { border-bottom: 0; }
.bk-tbl tr.bk-sub > td { background: #f8fafc; border-bottom: 1px solid #eef1f6; }
/* per-line narration: show the FULL bank particular (wraps), not a cut version */
.bk-tbl td.bk-narr { white-space: normal; word-break: break-word; max-width: 520px; line-height: 1.35; }
.bk-tbl tr.bk-sub:hover > td { background: #f2f6ff; }
/* compliance toolbar: period pickers + Run + Returns dropdown */
.comp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comp-toolbar .ct-period { display: flex; align-items: center; gap: 6px; padding-right: 6px; margin-right: 2px; border-right: 1.5px solid #e3e8f2; }
/* Global autocomplete popup (replaces the native <datalist> dropdown; see autocompleteEnhancer). */
.ac-pop { position: fixed; z-index: 9600; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(15, 23, 42, .18); overflow-y: auto;
  overscroll-behavior: contain; padding: 4px; -webkit-overflow-scrolling: touch; }
.ac-item { padding: 10px 11px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item:hover, .ac-item.on { background: var(--brand-soft, #e8f4f7); }
.ac-item b { color: var(--brand, #0e8ca2); font-weight: 700; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 170px;
  background: #fff; border: 1.5px solid #c7cede; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,28,54,.16);
  padding: 5px; display: flex; flex-direction: column; }
.dropdown-menu[hidden] { display: none; }
.dropdown-menu button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; cursor: pointer; color: #1b2340; }
.dropdown-menu button:hover { background: #eef2fb; }
/* Overview two-column layout: details | registrations */
.ov-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
.ov-cols > .panel { margin: 0; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.kv2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv2 > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #8a91a8; }
.kv2 > b { font-size: 14px; color: #1b2340; word-break: break-word; }
.kv2.wide { grid-column: 1 / -1; }
@media screen and (max-width: 860px) { .ov-cols { grid-template-columns: 1fr; } .kv-grid { grid-template-columns: 1fr; } }
/* trial balance group rows + journal entry table */
.tb-grp td { font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 11px; color: #55618a; background: transparent; border-top: 1px solid #d7deec; }
.jf-tbl th, .jf-tbl td { padding: 5px 8px; }
.jf-tbl input, .jf-tbl select { padding: 5px 7px; }
.drcr-sel { font-weight: 700; text-align: center; }
/* strict selection fields (must resolve to a real ledger / item) */
input.field-invalid { border-color: #dc2626 !important; background: #fef2f2; }
input.ro-derived { background: #eef1f6; color: #55618a; cursor: not-allowed; }
.seg-wrap { flex-wrap: wrap; }
/* financial statements (P&L / BS / CFS) */
.fin-doc { max-width: 560px; }
.fin-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #1b2340; margin-bottom: 8px; }
.fin-sub td { font-weight: 700; border-top: 1px solid #d7deec; background: transparent; }
.bs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bs-cols .fin-doc { max-width: none; }
/* two-level interactive balance sheet: main head banner + indented sub-groups */
.fin-mainhead td { border-top: 1.5px solid #cdd6ea; background: #eef2fb; color: #1b2340;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 7px; padding-bottom: 7px; }
.fin-mainhead:first-child td { border-top: 0; }
.fin-subgrp td:first-child { font-weight: 600; }
@media screen and (max-width: 860px) { .bs-cols { grid-template-columns: 1fr; } }
/* client dashboard cards */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dash-grid:empty { display: none; }
.dash-card { position: relative; background: #fff; border: 1px solid #e6eaf3; border-radius: 14px;
  padding: 14px 15px; min-width: 0; overflow: hidden; transition: box-shadow .15s, border-color .15s, transform .15s; }
/* Category accent: a soft top hairline in the card's own colour. */
.dash-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--brand)); opacity: .85; }
.dash-card.link { cursor: pointer; }
.dash-card.link:hover { border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, #e6eaf3);
  box-shadow: 0 6px 18px rgba(20,28,54,.09); transform: translateY(-1px); }
.dc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; min-width: 0; }
.dc-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; line-height: 1; background: color-mix(in srgb, var(--accent, var(--brand)) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--brand)) 24%, #fff); }
.dc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6b7590;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Value must never spill past the card: tabular figures, shrink slightly, wrap only if truly huge. */
.dc-value { font-size: 22px; font-weight: 800; color: #131a33; line-height: 1.12;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-card.warn .dc-value { color: #92610a; }
.dc-sub { font-size: 11.5px; color: #7a8199; margin-top: 4px; }
.dash-card.pos .dc-value { color: #1a7a45; }
.dash-card.neg .dc-value { color: #b42318; }

/* ---- SA command-centre dashboard ---- */
.dash-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-grid-tight { margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.dash-2col > .panel { margin: 0; }
/* attention banner */
.dash-attn { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.dash-attn > b { color: #9a3412; font-size: 13px; }
.dash-attn-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dash-attn-item { background: #fff; border: 1px solid #fdba74; color: #9a3412; border-radius: 9px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.dash-attn-item span { color: #c2410c; } .dash-attn-item:hover { background: #fff1e0; }
/* subscriptions panel */
.subs-mrr { font-size: 28px; font-weight: 800; color: var(--brand-dark); line-height: 1; margin-bottom: 12px; }
.subs-mrr span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 3px; }
.plan-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #eef2f7; margin-bottom: 8px; }
.pb-seg { height: 100%; } .pb-seg.s-active { background: var(--green); } .pb-seg.s-trial { background: #f59e0b; } .pb-seg.s-lapsed { background: #cbd5e1; }
.plan-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.plan-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.plan-legend i.s-active { background: var(--green); } .plan-legend i.s-trial { background: #f59e0b; } .plan-legend i.s-lapsed { background: #cbd5e1; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-chip { background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.plan-chip b { margin-left: 3px; }
.subs-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 14px 0 8px; }
/* lead / trial rows */
.lead-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.lead-item:first-of-type { border-top: 0; }
.lead-item.click { cursor: pointer; } .lead-item.click:hover { background: var(--brand-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
/* trade documents (orders / challans / memos) */
.doc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.doc-tabs .chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.dl-tbl th, .dl-tbl td { padding: 4px 6px; }
.dl-tbl input { padding: 6px 8px; margin: 0; }
/* filing-status summary chips */
.fs-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fs-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.fs-chip.ok { background: #dcfce7; color: #166534; } .fs-chip.warn { background: #fef3c7; color: #92610a; }
.fs-chip.bad { background: #fee2e2; color: #b42318; } .fs-chip.na { background: #eef2f7; color: #64708a; }
.mf-ck { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 8px 0; }
.mf-ck input { width: auto; margin: 0; }
/* upgrade-plan chooser */
.up-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.up-plan { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.up-plan.cur { border-color: var(--brand); background: var(--brand-soft); }
.up-plan h4 { margin: 0 0 4px; font-size: 15px; }
/* Holds "Pricing on request", not a figure — prices are quoted per customer, never published.
   Sized for a short phrase rather than the big ₹ number this used to carry. */
.up-price { font-size: 14.5px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; line-height: 1.3; }
.up-price small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.up-plan ul { list-style: none; margin: 0 0 12px; padding: 0; font-size: 12px; color: var(--ink); flex: 1; }
.up-plan ul li { padding: 2px 0 2px 16px; position: relative; line-height: 1.4; }
.up-plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.up-plan .btn { width: 100%; }
@media (max-width: 860px) { .dash-2col { grid-template-columns: 1fr; } }
/* ---- client onboarding: Add-client wizard + Get-started panel ---- */
/* Get-started checklist folds away once every step is done — on a phone a screenful of ticks is
   nothing to act on. Styled as a plain heading so it does not look like a control when open. */
.onb-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.onb-fold > summary::-webkit-details-marker { display: none; }
.onb-fold > summary b { font-size: 15px; }
.onb-fold:not([open]) > summary { margin: 0; }
.onb-fold[open] > summary { margin-bottom: 4px; }

.onb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.onb-steps { display: flex; gap: 6px; }
.onb-dot { font-size: 11px; font-weight: 700; color: var(--muted); background: #eef1f6; border-radius: 999px; padding: 4px 10px; }
.onb-dot.active { background: var(--brand); color: #fff; }
.onb-profile { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.onb-profile-h { font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }
.onb-svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.onb-svc { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-size: 13px; }
.onb-svc:hover { border-color: var(--brand); }
.onb-svc input { width: auto; margin-top: 2px; }
.onb-svc span span.muted { display: block; font-size: 11px; }
@media screen and (max-width: 620px) { .onb-svcgrid { grid-template-columns: 1fr; } }
.onb-panfind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.onb-gstlist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.onb-gstrow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.onb-gstrow:hover { border-color: var(--brand); }
.onb-gstrow input { width: auto; }
.onb-gstrow b { font-variant-numeric: tabular-nums; }
/* Get-started panel on the overview */
.onb-panel { border: 1.5px solid color-mix(in srgb, var(--brand) 30%, var(--line)); }
.onb-scope { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.onb-bar { height: 7px; background: #eef1f6; border-radius: 999px; overflow: hidden; margin: 12px 0; }
.onb-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }
.onb-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media screen and (max-width: 820px) { .onb-grid { grid-template-columns: 1fr; } }
.onb-step { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.onb-step:last-child { border-bottom: 0; }
.onb-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #eef1f6; color: var(--muted); font-size: 12px; }
.onb-step.done .onb-check { background: #e6f6ec; color: var(--green); }
.onb-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.onb-step-main .muted { font-size: 11.5px; }
.onb-side { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.onb-sec-h { font-size: 12.5px; font-weight: 700; color: #1b2340; }
.onb-backlog { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.chip.onb-bl { display: inline-flex; align-items: center; gap: 4px; }
.ip-doc-cancelled { position: relative; }
.ip-doc-cancelled::after { content: "CANCELLED"; position: absolute; top: 42%; left: 0; right: 0;
  text-align: center; font-size: 72px; font-weight: 800; color: rgba(217,45,32,0.12);
  transform: rotate(-24deg); pointer-events: none; letter-spacing: 6px; }
@media (max-width: 760px) { .ac-gsp-cols { grid-template-columns: 1fr; } }
.ni-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; margin-bottom: 14px; }
.ni-grid label { margin: 6px 0 4px; }
.ni-grid .ni-static { padding: 10px 12px; background: #eef1f6; border-radius: 9px; font-size: 13px; font-weight: 600; }
.ni-grid .ni-chk { display: flex; align-items: flex-end; }
.ni-grid .ni-chk label.chk { margin: 0 0 8px; }
.ni-lines { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.ni-lines th { background: #f6f8fc; text-align: left; padding: 6px 6px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.ni-lines td { padding: 3px 4px; border-bottom: 1px solid #eef1f6; }
.ni-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ni-lines tfoot td { border-top: 2px solid var(--line); padding: 7px 6px; }
.ni-lines input { width: 100%; padding: 6px 7px; font-size: 13px; }
.ni-lines input.num { text-align: right; }
.ni-lines .ni-hsn { width: 70px; } .ni-lines .ni-qty { width: 52px; } .ni-lines .ni-uqc { width: 52px; }
.ni-lines .ni-rate { width: 48px; } .ni-lines .ni-tax, .ni-lines .ni-cess { width: 88px; }
/* Non-GST (unregistered) client → a plain invoice: hide the GST-only columns (HSN, rate, tax). */
.ni-lines.nongst .gcol { display: none; }
.ni-lines.nongst { min-width: 0; }

/* Estimated financials corridor */
.ef-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ef-h { border: 0; padding: 0; font-size: 14px; margin: 0 0 10px; }
.ef-sub { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.ef-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.ef-kpi { flex: 1 1 120px; background: #f6f8fc; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.ef-kpi span { font-size: 11px; color: var(--muted); }
.ef-kpi b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ef-kpi.pos b { color: #15803d; } .ef-kpi.neg b { color: #b91c1c; }
.ef-kpi.pos { background: #ecfdf3; } .ef-kpi.neg { background: #fef2f2; }
.ef-kpi.warn { background: #fffbeb; } .ef-kpi.warn b { color: #b45309; }
/* expense-head pin: a pinned figure is held exactly, an unpinned one flexes to hold net profit */
.ef-pin { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 24px; height: 24px;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0; opacity: .45; }
.ef-pin:hover { opacity: 1; background: #eef1f6; }
.ef-pin.on { opacity: 1; border-color: #c7d2fe; background: #eef2ff; }
tr.ef-pinned input.ef-eh[data-f="amount"] { border-color: #a5b4fc; background: #f8faff; font-weight: 600; }
/* pinned BY PERCENT: the % is the figure the accountant set, the amount follows from it */
tr.ef-pctpin input.ef-ep { border-color: #a5b4fc; background: #f8faff; font-weight: 600; }
tr.ef-pctpin input.ef-eh[data-f="amount"] { border-color: var(--line); background: #fff; font-weight: 400; }
input.ef-ep { text-align: right; }

/* 5 · Balance sheet — two sides, one block per accounting group, ledgers inside a block */
.ef-bs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ef-bs-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 0 0 6px; border-bottom: 2px solid var(--line); margin: 0 0 8px; }
.ef-bs-title b { font-size: 14px; letter-spacing: 0; color: var(--text, #1f2937); font-variant-numeric: tabular-nums; }
.ef-bs-grp { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; background: var(--card, #fff); }
.ef-bs-grp.empty { background: #fbfcfe; border-style: dashed; }
.ef-bs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.ef-bs-name { font-size: 12.5px; font-weight: 600; }
.ef-bs-tot { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.ef-bs-grp:not(.empty) .ef-bs-tot { color: var(--text, #1f2937); }
.ef-bs-hint { font-size: 11px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.ef-bs-led { display: flex; gap: 5px; align-items: center; margin: 0 0 5px; flex-wrap: nowrap; }
.ef-bs-led input { padding: 5px 7px; font-size: 12.5px; }
.ef-bs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; padding: 4px 0; }
.ef-bs-row.ro { color: var(--muted); border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }
.ef-bs-row.ro b { font-variant-numeric: tabular-nums; color: var(--text, #1f2937); }
.ef-bs-ro { padding: 7px 9px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfe;
  font-variant-numeric: tabular-nums; font-size: 13px; }
.ef-bs-cap .field-row { margin-bottom: 6px; }
.ef-bs-add { margin-top: 2px; }
@media (max-width: 900px) { .ef-bs { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ef-grid { grid-template-columns: 1fr; } }
.ni-del { border: 1px solid var(--line); background: #fff; color: var(--red); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; font-size: 15px; line-height: 1; }
.ni-del:hover { background: #fdeaea; }
.ni-edit { border: 1px solid var(--line); background: #fff; color: var(--brand); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; margin-right: 4px; }
.ni-edit:hover { background: #eef1f6; }
/* compact per-row invoice actions (edit / reclassify / delete) */
td.rowacts { white-space: nowrap; text-align: right; }
.iact { border: 1px solid var(--line); background: #fff; color: var(--brand); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; margin-right: 4px; }
.iact:hover { background: var(--brand-soft); border-color: var(--brand); }
.ni-fetchrow { display: flex; gap: 6px; align-items: center; }
.ni-fetchrow input { flex: 1; }
.ni-fetchrow .btn { white-space: nowrap; }
/* customer picker: custom autocomplete dropdown (works where <datalist> is flaky, e.g. iOS) */
.ni-ac { position: relative; }
.ac-dd { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 2px;
  background: #fff; border: 1.5px solid #c7cede; border-radius: 9px; box-shadow: 0 8px 24px rgba(20,28,54,.16);
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ac-item { padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #eef1f6; font-size: 14px; line-height: 1.3; }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item:active { background: #eef2fb; }
.ac-item b { font-weight: 600; }
/* bottom section: two columns — words/bank/terms/declaration | totals + signature */
.ip-below { display: grid; grid-template-columns: 1.5fr 1fr; }
.ip-below-l { border-right: 1.5px solid var(--ip-rule); display: flex; flex-direction: column; }
.ip-words { padding: 9px 14px; border-bottom: 1px solid var(--ip-rule-soft); display: flex; gap: 8px; align-items: baseline; }
.ip-words span { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 700; }
.ip-einv { padding: 8px 14px; font-size: 11px; border-bottom: 1px solid var(--ip-rule-soft); }
.ip-irn { word-break: break-all; }
.ip-bank, .ip-terms { padding: 9px 14px; font-size: 11px; line-height: 1.6; border-bottom: 1px solid var(--ip-rule-soft); }
.ip-blabel { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
/* Bank details + the "Scan to pay" UPI QR share one row; the QR keeps its intrinsic size and the
   bank block takes the slack. When only one of the two exists it spans the full width. */
.ip-pay { display: flex; align-items: stretch; border-bottom: 1px solid var(--ip-rule-soft); }
.ip-pay .ip-bank { flex: 1 1 auto; border-bottom: 0; }
.ip-upi { flex: 0 0 auto; padding: 8px 14px; text-align: center; border-left: 1px solid var(--ip-rule-soft);
  font-size: 11px; line-height: 1.35; }
.ip-pay > .ip-upi:only-child { border-left: 0; }
.ip-upi-img { display: block; width: 92px; height: 92px; margin: 2px auto 4px; }
.ip-upi-amt { font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.ip-upi-vpa { color: var(--muted); font-size: 10px; word-break: break-all; }
.ip-upi-note { color: var(--muted); font-size: 9px; margin-top: 2px; }
.ip-decl { padding: 10px 14px; font-size: 11px; color: var(--muted); margin-top: auto; }
.ip-below-r { display: flex; flex-direction: column; }
.ip-tot { width: 100%; border-collapse: collapse; }
.ip-tot td { padding: 6px 14px; border-bottom: 1px solid var(--ip-rule-soft); }
.ip-tot td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ip-tot-grand td { font-weight: 800; font-size: 15px; background: var(--ip-grand-bg); border-top: 1.5px solid var(--ip-rule); }
.ip-sign { padding: 14px; text-align: right; font-size: 12px; margin-top: auto; }
.ip-signline { margin-top: 42px; font-size: 11px; color: var(--muted); }
/* HSN/SAC-wise tax break-up */
.ip-taxsec { border-top: 1.5px solid var(--ip-rule); padding: 10px 14px; }
.ip-taxsec .ip-label, .ip-taxsec .ip-blabel { margin-bottom: 6px; }
.ip-taxsum { width: 100%; border-collapse: collapse; }
.ip-taxsum th, .ip-taxsum td { border: 1px solid var(--ip-grid); padding: 5px 8px; font-size: 11px; }
.ip-taxsum thead th { background: var(--ip-tint); color: var(--ip-tint-fg); font-weight: 700; text-align: left; font-size: 10px; }
.ip-taxsum .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-taxsum-tot td { font-weight: 800; background: #f6f8fc; }
.ip-taxwords { font-size: 11px; margin-top: 6px; }
.ip-note { padding: 7px 14px; font-size: 10px; color: #8a5a12; background: #fdf7ec; border-top: 1.5px solid var(--ip-rule); }
.logo-prev { max-height: 60px; max-width: 200px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }

/* Print: show only the invoice; it fills the A4 printable area (297mm − 24mm margins) */
#printRoot { display: none; }
@media print {
  /* base rule sets html,body{height:100%} which makes <body> exactly one page tall; the doc's
     margin then tips the total onto a blank 2nd page. Let them size to content when printing. */
  html, body { height: auto !important; min-height: 0 !important; margin: 0 !important; }
  /* The app's page background (var(--bg), a light grey) must NOT tint the printed page — force
     white so the statement/invoice prints on a clean white sheet even with "Background graphics" on. */
  html, body { background: #fff !important; }
  #printRoot, #printRoot .report-print-doc, #printRoot .ip-doc, #printRoot .fs-onscreen,
  #printRoot .fs-block { background: #fff !important; }
  body.printing > *:not(#printRoot) { display: none !important; }
  body.printing #printRoot { display: block !important; }
  /* Single A4 page. --ip-top-mm is the configurable top margin (raised when printing on
     pre-printed letterhead); the doc's min-height shrinks to match so it still fills to
     the bottom without ever spilling onto a 2nd page. @page margin:0 drops the browser's
     auto header/footer. The bordered sections span edge-to-edge (no inner padding). */
  #printRoot .ip-doc { width: auto; max-width: none; box-sizing: border-box;
    margin: var(--ip-top-mm, 5mm) 5mm 5mm 5mm;
    /* The box stretches to fill the page so there's no tamperable white void under the totals.
       How tall "the page" is depends on margins the BROWSER picks: our `@page { margin: 0 }` gives
       the full 297mm, but Chrome's print dialog overrides it whenever the user leaves Margins on
       "Default" (which is also when it stamps the URL / "Page 1 of 2" footer). Hard-coding 287mm
       therefore built a 292mm block that silently spilled onto a second page on a default-margin
       print. Measuring a real Chrome print (off a reported PDF) showed it applies 14.1mm margins,
       not the 10mm first assumed — a 268.8mm printable area. 245mm keeps the whole block (box +
       its 5mm top/bottom margins) at a constant 250mm for ANY --ip-top-mm. That clears 14.1mm
       margins with 19mm to spare and still fits drivers that take up to ~23mm, at the cost of
       some white space on a zero-margin print. Never spilling matters more than filling.
       (100vh would track the real page box and fill it perfectly, but Chrome is not guaranteed to
       resolve viewport units against the page box in print — resolving them against a tall screen
       viewport instead would overflow far worse than the bug being fixed. Not worth the gamble for
       the last 25mm of a page that is already filled with content.) */
    min-height: calc(245mm - var(--ip-top-mm, 5mm));
    padding: 0; box-shadow: none; border: 1.5px solid #2a3352; font-size: 11px; }

  /* WHEN an invoice genuinely needs two pages (many line items, or a statutory e-invoice block),
     it must break BETWEEN things, never through them. `page-break-inside: avoid` used to sit on
     .ip-doc, which told the browser to keep the whole invoice together — so when it could not, it
     gave up and sliced wherever the page ended, cutting through a row of figures and even through
     the middle of a line of text. Instead: let the document break, and forbid breaking inside the
     parts that must stay whole. */
  #printRoot .ip-doc { break-inside: auto; }
  #printRoot .ip-lines tr, #printRoot .ip-taxsum tr { break-inside: avoid; page-break-inside: avoid; }
  #printRoot .ip-head, #printRoot .ip-top, #printRoot .ip-einvbar,
  #printRoot .ip-below, #printRoot .ip-taxsec, #printRoot .ip-pay,
  #printRoot .ip-words, #printRoot .ip-sign, #printRoot .ip-decl {
    break-inside: avoid; page-break-inside: avoid; }
  /* Column headings repeat on every page, so a CONTINUED item table is still readable. Only the
     item table — the HSN break-up is a handful of rows and is kept whole below, so repeating its
     header just produced a sliver of heading stranded at the foot of page 1. */
  #printRoot .ip-lines thead { display: table-header-group; }
  #printRoot .ip-lines tfoot { display: table-footer-group; }
  /* The break-up is small: move it to the next page entire rather than splitting its header off.
     The closing line belongs with it. */
  #printRoot .ip-taxsum, #printRoot .ip-taxsum thead, #printRoot .ip-taxsum tbody,
  #printRoot .ip-taxsec, #printRoot .ip-cgen { break-inside: avoid; page-break-inside: avoid; }
  /* A heading must never be the last thing on a page with its content overleaf. */
  #printRoot .ip-blabel { break-after: avoid; page-break-after: avoid; }
  #printRoot .ip-doc > * { orphans: 3; widows: 3; }
  /* The filler row exists to close the grid on a short invoice; on a continued one it would just
     push the totals onto another page. */
  #printRoot .ip-fill { break-inside: avoid; }
  /* Reports/statements are NOT .ip-doc — they size to their own content and may span pages. Page
     margins come from PADDING (side padding on the doc; top/bottom padding on each statement block
     and schedule box) rather than an @page margin — an @page margin makes Chrome print its own
     header/footer (date · title · URL · page no) in that band, which we don't want on a statement.
     @page margin:0 suppresses that chrome; the padding (which survives page breaks) keeps content
     off the edges on every page, including spilled schedule pages. */
  #printRoot .report-print-doc { box-sizing: border-box; padding: 0 9mm; font-size: 11px; color: #111; }
  #printRoot .report-print-doc .fs-block { padding-top: 12mm; padding-bottom: 12mm; }
  /* …but NOT on a block whose neighbour already forces a page break. That 12mm sits below the
     signatures of a statement that now fills its page, so it spilled past the bottom edge and
     claimed a second sheet — which the next statement's break-before then skipped, leaving a page
     blank but for the browser's own footer. The forced break supplies the separation; the padding
     only had to supply it for a block that is followed by something on the SAME page. */
  #printRoot .report-print-doc .fs-block:has(+ .fs-newpage) { padding-bottom: 0; }
  /* A rounded, clipped box cannot span a page break: overflow:hidden crops whatever falls past the
     break, and the rounded frame closes on neither page — which is exactly how a statement that ran
     over came out cut, with no border along the tear. Square it off for print so every page of the
     table carries a full frame. */
  #printRoot .fs-single { border-radius: 0; overflow: visible; }
  /* A Schedule III Balance Sheet is ~30 prescribed lines and a Statement of P&L ~26, and each has to
     sit on ONE page with its signature panel — a statement whose totals and signatures fall on a
     second page reads as two documents. At the on-screen 12.5px/6px the Balance Sheet ran four lines
     over and took the signatures with it. These are the statutory faces only; the notes and
     schedules keep their own sizing. */
  #printRoot .fs-single { font-size: 9.2px; }
  #printRoot .fs-single tbody td { padding: 1.5px 6px; }
  #printRoot .fs-single thead th { padding: 2px 6px; }
  #printRoot .fs-single tfoot .fs-tot td, #printRoot .fs-single tr.fs-tot td { padding: 2px 6px; }
  #printRoot .fs-block .fs-sign { margin-top: 14px; }
  #printRoot .fs-head { margin-bottom: 8px; padding-bottom: 5px; }
  /* The Balance Sheet and the Statement of Profit and Loss are each ONE page, signatures included.
     Without this the face fills the sheet and the signature panel — which may not be split — is
     thrown whole onto the next one, so the statement reads as two documents and the totals sit on a
     page with nothing to total. The engine falls back to breaking anyway if a face ever genuinely
     exceeds a page, so this cannot strand content. */
  #printRoot .fs-face-page { break-inside: avoid; page-break-inside: avoid; }
  #printRoot .report-print-doc .fs-face-page { padding-top: 6mm; }
  #printRoot .fs-face-page .fs-sign { margin-top: 10px; padding-top: 0; }
  #printRoot .fs-face-page .fs-sign > div:first-child { gap: 16px; }
  /* Reclaim height from the furniture rather than the figures — the type on a statutory statement
     should not go below 9px to make room. */
  #printRoot .fs-face-page .sig-gap { height: 18px; }
  #printRoot .fs-face-page .sig-gap-ca { height: 24px; }
  #printRoot .fs-face-page .fs-co { font-size: 14px; }
  #printRoot .fs-face-page .fs-stmt { font-size: 12.5px; margin-top: 4px; }
  /* repeating thead/tfoot spacers give a top & bottom margin on EVERY schedule page (incl. spilled
     continuation pages) — see schedulesFrame(). The fs-block padding only pads page 1 of a section. */
  #printRoot .sched-frame { width: 100%; border-collapse: collapse; }
  #printRoot .sched-frame > thead { display: table-header-group; }
  #printRoot .sched-frame > tfoot { display: table-footer-group; }
  #printRoot .sched-frame .sched-frame-top { height: 10mm; padding: 0; }
  #printRoot .sched-frame .sched-frame-bot { height: 8mm; padding: 0; }
  #printRoot .sched-frame > tbody > tr > td { padding: 0; }
  #printRoot .ip-title { font-size: 21px; }
  /* Keep the wide item/tax tables inside the page border. The intra-state layout is 13 columns wide
     (Qty/UQC/Rate + CGST/SGST/Cess rate+amt + Amount); at the on-screen size it overflows A4 and the
     last AMOUNT column gets clipped off the right edge (both in the browser's Print/PDF and the emailed
     PDF). Shrink the font + padding for print so every column stays inside the border. */
  /* Never let the platform resize this text — see the html rule at the top of the file. */
  #printRoot, #printRoot * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* 8px was chosen back when this table was content-measured, where every extra point of type
     risked starving a column. table-layout:fixed removed that coupling — the <colgroup> percentages
     ARE the layout now, so size only decides where text wraps. Measured against the worst case the
     app can produce (13 columns, crore-scale figures, an 8-digit HSN): data cells stay intact to
     11.7px and headings to 11.0px. 10px sits well inside that and is the smallest size a customer
     should have to read a legal document at. */
  #printRoot .ip-lines, #printRoot .ip-lines th, #printRoot .ip-lines td,
  #printRoot .ip-taxsum, #printRoot .ip-taxsum th, #printRoot .ip-taxsum td { font-size: 10px; }
  #printRoot .ip-lines th, #printRoot .ip-lines td,
  #printRoot .ip-taxsum th, #printRoot .ip-taxsum td { padding: 3px 3px; }
  /* THE fix for columns being cut. With auto layout a table's columns are sized by measuring
     their content, so the moment a platform renders text bigger than we asked — iOS scales a
     printed page by ~6.7%, measured off three separate reported PDFs — the total exceeds the box
     and the browser squeezes some column below its content. It picked AMOUNT, leaving ~5mm for a
     15mm number. table-layout:fixed makes the <colgroup> percentages in buildInvoiceHtml the
     layout, so column widths no longer depend on font metrics at all and this cannot recur —
     for any invoice, on any device, without per-invoice tuning. */
  #printRoot .ip-lines, #printRoot .ip-taxsum { table-layout: fixed; }
  /* An 11- or 13-column invoice (cess present) has to fit the same paper as a 10-column one, so
     the type steps down rather than the figures being cut. Column COUNT decides this, not the
     particular invoice — that is the difference between a rule and per-invoice tuning. One point
     down from the base is enough: the sweep above puts this layout's ceiling at 11.0px. */
  #printRoot .ip-lines-dense th, #printRoot .ip-lines-dense td { font-size: 9px; padding: 3px 2px; }
  #printRoot .ip-lines .ip-desc { overflow-wrap: anywhere; white-space: normal; }
  /* Last-resort safety net. Declared widths plus the density step should mean no figure ever
     exceeds its column — but if some combination of many items, cess and a platform's own text
     scaling still does, the number must WRAP, not be cut off. A wrapped total is ugly; a truncated
     one is wrong, and this is a legal document. break-word only breaks when it genuinely has to,
     so normal invoices are unaffected. */
  #printRoot .ip-lines .num, #printRoot .ip-taxsum .num {
    white-space: normal; overflow-wrap: break-word; }
  #printRoot .ip-lines .ip-desc { min-width: 0; }
  /* e-Invoice strip (IRN details + QR): WeasyPrint mis-sizes the `1fr auto` CSS grid (and flex/float)
     and pushes the QR box off the right edge. Lay it out as a table for print — WeasyPrint's table
     layout is exact, so a `width:100%` table with a fixed-width QR cell always stays inside the border. */
  #printRoot .ip-einvbar { display: table; width: 100%; }
  #printRoot .ip-einv-l { display: table-cell; vertical-align: middle; padding-right: 12px; }
  #printRoot .ip-qr { display: table-cell; vertical-align: middle; text-align: right; width: 96px; }
  /* printing on letterhead: hide our own brand header so it doesn't clash with the paper */
  #printRoot.on-letterhead .ip-head { display: none; }
  /* each statutory copy (Original/Duplicate/Triplicate) prints on its own A4 page */
  #printRoot .ip-doc:not(:last-child) { page-break-after: always; }
  /* force header/total shading + borders to actually print */
  #printRoot, #printRoot * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ---- Print ink: paper is not a backlit screen -----------------------------------------------
     The palette is tuned for a monitor: labels are --muted (#64708a, a light blue-grey), body text
     is --ink (#1a2233, navy rather than black), and a 12/13-column invoice steps its item type
     down to 6.8px to fit the width. A screen carries all of that easily. Toner does not — thin
     strokes in a light colour below ~7px come off the sheet half-there, which is exactly how the
     Invoice No. / Invoice Date / Supply type / Reverse charge labels and the item DESCRIPTION
     column were printing. An invoice is a legal document: every Rule 46 particular has to be
     legible on the PAPER copy, not just in the preview.
     So print retints the document to real ink and gives the smallest type a half-step of weight.
     These are colour and weight rules only — no widths, paddings or break rules change, so the
     column-fit and single-page maths above are untouched. Shared with the emailed PDF, which
     renders this same stylesheet through WeasyPrint (backend/app/pdf/html_pdf.py). */
  #printRoot { --muted: #333b4d; }              /* still secondary, but solid on paper */
  #printRoot .ip-doc { --ip-tint-fg: #1b2233;   /* table column headings */
    color: #000; }                              /* body/figures: true black, not navy */
  #printRoot .ip-lines tbody td, #printRoot .ip-taxsum tbody td, #printRoot .ip-tot td { color: #000; }
  /* Labels set at ~10-11px in a lighter colour need the weight too — colour alone still drops out
     on a low-toner or draft-mode print. Only the ones that render at 400 are lifted; .ip-label /
     .ip-blabel / .ip-copy / .ip-words span are already 600-700. */
  #printRoot .ip-meta span, #printRoot .ip-decl,
  #printRoot .ip-signline, #printRoot .ip-cgen { font-weight: 500; }
  /* The description is the one long stretch of small text on the sheet, and it states what was
     actually supplied — the last thing that may print faint. */
  #printRoot .ip-lines .ip-desc { font-weight: 500; }
  @page { size: A4; margin: 0; }
}

/* ---------- Two-step confirmation dialog ---------- */
.confirm-bg { z-index: 60; }
.confirm-modal { width: 460px; }
.confirm-modal h3 { margin: 0 0 12px; font-size: 17px; }
.cf-intro { background: #f5f7ff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.cf-effects { border: 1px solid #d7deea; border-radius: 10px; padding: 10px 14px; background: #fbfcfe; }
.cf-effects.danger { background: #fdf3f2; border-color: #f2c9c4; }
.cf-eh { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #5a6885; margin-bottom: 4px; }
.cf-effects.danger .cf-eh { color: #b42318; }
.cf-effects ul { margin: 4px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: #33415c; }
.cf-effects li { margin: 4px 0; }
.btn.lg { padding: 12px 20px; font-size: 15px; }

/* Labelled document-action cell (IRN / e-Way rows) */
.doc-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-cell > span { font-variant-numeric: tabular-nums; }
.grid td .btn.sm, .doc-cell .btn.sm { padding: 5px 9px; font-size: 12px; }

/* Make any table inside a panel scroll horizontally rather than overflow the page */
.panel .body { overflow-x: auto; }

/* ---------- Mobile / responsive (screen only — never affects print) ---------- */
@media screen and (max-width: 860px) {
  body { font-size: 15px; }                 /* a touch larger for touch */
  /* App shell: sidebar is an off-canvas drawer (see .sidebar rules under the 860px block above) */
  .topbar { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .topbar .who { text-align: left; }
  .content { padding: 14px 14px 92px; }
  .page-title { font-size: 18px; }

  /* Tables: let them scroll sideways inside their panel instead of squashing */
  .tblscroll, .invscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }               /* keeps columns readable; panel scrolls */
  .cards, .ret-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* Forms: stack the two-up rows */
  .field-row, .ni-grid { grid-template-columns: 1fr !important; display: grid; gap: 10px; }
  .ac-gsp-cols { grid-template-columns: 1fr; }

  /* Modals: near-full-screen sheets, scrollable, comfortable buttons */
  .modal { width: 96vw !important; max-height: 92vh; overflow-y: auto; padding: 18px; }
  .modal.ni-modal, .modal.inv-modal { width: 96vw !important; }
  .actions { position: sticky; bottom: 0; background: #fff; padding-top: 10px; }
  .actions .btn { flex: 1; }                 /* full-width action buttons */
  .btn { padding: 12px 16px; }               /* bigger tap targets */
  .btn.sm { padding: 9px 12px; }

  /* Panel header actions wrap under the title */
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .inv-toolbar { flex-wrap: wrap; }

  /* Main tab bar SWIPES on mobile — one row, not three.
     It used to wrap because a scroll container clips the Filing/More dropdown menus. That is now
     solved properly: _clampDropdown positions an open menu `fixed` against the button's viewport
     rect, so it escapes the strip entirely and cannot be clipped by it (and closes on scroll,
     since a fixed menu would otherwise drift away from its tab). */
  .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; row-gap: 0;
    /* the same edge shading the invoice table uses, so a cut-off strip reads as swipeable */
    background:
      linear-gradient(to right, var(--bg) 30%, rgba(244,246,251,0)) left center / 22px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 30%, rgba(244,246,251,0)) right center / 22px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(16,24,48,.13), rgba(16,24,48,0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16,24,48,.13), rgba(16,24,48,0)) right center / 10px 100% no-repeat scroll;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs .tabdd-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 11px; }
  .subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .subtabs a { flex: 0 0 auto; white-space: nowrap; }
  .subtabs::-webkit-scrollbar { height: 3px; }
  /* Cap dropdown width to the viewport; JS (wireClientTabs) flips left/right so it stays on-screen
     wherever the tab wrapped to. */
  .tabs .tab-dd .dropdown-menu { max-width: calc(100vw - 20px); }

  /* Data tables (invoice grid, masters, e-docs) keep readable column widths and scroll */
  .invtbl, .grid { min-width: 560px; }
}

/* ============================================================================
   GLOBAL MOBILE PASS — make every page usable on a phone. Stops the topbar
   action row and page toolbars (Export / Print / format toggles / date bars)
   from running off the right edge; wraps every control cluster; collapses
   two-column layouts; wide tables still scroll inside their own container.
   ============================================================================ */
@media screen and (max-width: 860px) {
  /* No element may push the page wider than the screen — the root cause of
     "buttons cut off the right edge". Wide tables still scroll via .tblscroll. */
  html, body { overflow-x: hidden; }
  .content { overflow-x: hidden; }          /* content is its own scroll box — clip its x too */
  #app, .main, .content, .panel, .panel .body, .panel-head, #view { max-width: 100%; min-width: 0; }

  /* Topbar: the right-hand cluster (who / logout / page actions) wraps under the
     title instead of overflowing off-screen. */
  .topbar > .row { flex-wrap: wrap; row-gap: 6px; }
  .topbar .who { font-size: 13px; }

  /* Every toolbar / control cluster wraps rather than overflowing. Covers the
     class-based ones AND any inline display:flex toolbar built in JS. */
  .panel-head, .panel-head .row, .pd-bar, .stmt-fmt, .inv-toolbar, .bulkbar,
  .lt-bar, .actions, .row,
  .content [style*="display:flex"], .content [style*="display: flex"] { flex-wrap: wrap; }
  .pd-bar, .stmt-fmt { row-gap: 8px; }

  /* Search inputs take the full width of their (now-wrapped) row. */
  .inv-search, .lt-q, #rr_search { max-width: 100%; flex: 1 1 160px; }

  /* Export / action dropdown menus never spill past the screen edge. Default anchoring is
     right:0 (opens leftward), which runs off the LEFT edge once a toolbar wraps its button to
     the left on mobile — so open them from the button's LEFT edge instead, and cap the width.
     JS (positionDropdownMenu) nudges any that still overflow. */
  .dropdown-menu { left: 0; right: auto; max-width: calc(100vw - 24px); }

  /* Two-column / grid layouts collapse to one column everywhere. */
  .ov-cols, .kv-grid, .bs-cols, .dash-2col, .ef-bs, .ef-grid,
  .onb-grid, .onb-svcgrid, .ac-gsp-cols, .field-row, .ni-grid { grid-template-columns: 1fr !important; }

  /* Every data table can scroll sideways within its panel. */
  .tblscroll, .invscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Statement tables (vertical BS/P&L, full FS, T-format) must SCROLL inside their own
     box, not clip — a comparative statement is wider than a phone, and their wrappers use
     overflow:hidden. Give the tables a readable min-width and let the box scroll. */
  .bsv-wrap, .fs-single, .fin-doc { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fs-single, .fin-doc { max-width: 100%; }
  /* Tighter cells so a SINGLE-year statement fits a phone without scrolling; only the wider
     comparative (extra previous-year column) needs a small horizontal scroll. */
  .bsv-tbl td, .bsv-tbl th, .fs-single td, .fs-single th, .fin-doc .grid td, .fin-doc .grid th {
    padding-left: 8px; padding-right: 8px; font-size: 11.5px; }
  .bsv-tbl { min-width: 340px; }
  .bsv-tbl.bsv-comp { min-width: 520px; }      /* extra column when the previous year is shown */
  .fs-tbl.fs-single { min-width: 340px; }
  .fin-doc .grid { min-width: 320px; }
}

/* Phones: tighten spacing and give primary controls a full row so nothing clips. */
@media screen and (max-width: 560px) {
  .content { padding: 14px 12px 92px; }
  .page-title { font-size: 17px; }
  .panel .body { padding: 14px 12px; }
  .panel h3, .panel-head { padding-left: 14px; padding-right: 14px; }
  .btn { padding: 11px 14px; }
  .btn.sm { padding: 9px 12px; }
  .pd-bar, .stmt-fmt { width: 100%; }        /* layout toggle + date bar each on their own row */
  .topbar { padding: 8px 12px; }

  /* ---- Scope bar: three rows down to two -------------------------------------------------
     The From/To date inputs are only meaningful once "Custom range" is picked, but they were
     always rendered — two empty boxes taking a full row on a 390px screen. Show them only when
     a custom range is actually in play (renderCtxBar toggles .ctx-custom). */
  .ctxbar:not(.ctx-custom) .ctx-range { display: none; }
  .ctx-lbl-t { display: none; }              /* keep the 📅, drop the word "Scope" */
  .ctxbar { gap: 6px; padding-top: 7px; }
  .ctxbar select { min-width: 0; flex: 1 1 auto; padding: 7px 8px; font-size: 12.5px; }
  /* chips share one row instead of being pushed to their own by margin-left:auto */
  .ctx-chips { margin-left: 0; flex: 1 1 100%; gap: 5px; }
  .ctx-chips .chip { flex: 1 1 auto; text-align: center; padding: 6px 8px; }
  .modal { width: 96vw !important; padding: 16px; }

  /* ---- Client workspace on a phone -------------------------------------------------------
     The overview was ~10 screens of scrolling: eight KPI cards stacked ONE per row (the
     auto-fit minmax(184px) can only fit a single column at ~358px of usable width), a dozen
     full-width shortcut buttons, then four always-open panels. Most of it is read at a glance,
     so it should be scannable, not scrollable. */

  /* Two cards per row, sized down to match. Eight cards go from ~1000px of scroll to ~420px. */
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-card { padding: 10px 11px; border-radius: 11px; }
  .dc-top { gap: 7px; margin-bottom: 6px; }
  .dc-ic { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
  .dc-label { font-size: 9.5px; letter-spacing: .3px; }
  .dc-value { font-size: 16px; }
  .dc-sub { font-size: 10.5px; margin-top: 2px; }

  /* Shortcut chips: an even 2-up grid instead of a ragged wrap, and drop the keyboard hints —
     a phone has no keyboard to press "n s" on. */
  .qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .qa-btn { padding: 10px 11px; font-size: 12.5px; gap: 7px; justify-content: flex-start; }
  .qa-btn kbd { display: none; }

  /* A 6-column table cannot fit 390px — it was clipping the Role and Rights columns with no
     hint that it scrolled. Reflow each row into a labelled card instead. */
  .m-cards, .m-cards thead { display: block; }
  .m-cards thead { display: none; }
  .m-cards tbody, .m-cards tr, .m-cards td { display: block; width: auto; }
  .m-cards tr { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
    margin-bottom: 9px; background: #fff; }
  .m-cards td { border: 0; padding: 3px 0; display: flex; gap: 10px; align-items: baseline; }
  .m-cards td::before { content: attr(data-label); flex: 0 0 82px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; }
  .m-cards td:empty { display: none; }
  .m-cards td[data-label=""] { padding-top: 8px; }
  .m-cards td[data-label=""]::before { content: none; }
}

/* ---------- Invoice document on mobile: reflow to fit, keep it readable ----------
   SCREEN only — printing (even from a phone) must always use the A4 layout below,
   never this stacked reflow, so the invoice stays on a single page. */
@media screen and (max-width: 860px) {
  .modal.inv-modal { width: 96vw !important; padding: 12px; }
  .modal.inv-modal #invPrintArea { max-height: 74vh; padding: 8px; }
  .ip-doc { width: 100%; min-height: auto; }
  .ip-head { flex-wrap: wrap; gap: 6px; }
  .ip-head > div[style*="right"] { text-align: left !important; }
  /* stack the supplier/recipient + meta blocks */
  .ip-top { grid-template-columns: 1fr; }
  .ip-top .ip-block { border-bottom: 1px solid var(--ip-grid); }
  .ip-meta { border-top: 1px solid var(--ip-tint); }
  /* stack the e-invoice bar (IRN details above the QR) */
  .ip-einvbar { grid-template-columns: 1fr; }
  .ip-qr { justify-self: start; }
  /* Give the document the screen. 24px of side padding on a 390px phone squeezed an A4 page into
     318px — the invoice ended up smaller than it needed to be for no benefit. */
  #invPrintArea { padding: 8px; }

  /* the wide line-item table scrolls sideways within its section */
  .ip-itemsec, .ip-taxsec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ip-lines { min-width: 620px; }

  /* The totals are a two-column label/amount list — they never needed 480px, and forcing it made
     a SECOND sideways-scrolling region on the page. Swiping one and seeing the other move is what
     makes a phone invoice read as broken. Let them fit. */
  .ip-taxsum { min-width: 0; }
  .ip-taxsum td { padding-left: 6px; padding-right: 6px; }

  /* A cut-off table with no affordance looks like a bug, so show the classic scroll shadow: the
     right edge is shaded while there is more to see and clears when you reach the end. Pure CSS —
     `local` gradients scroll with the content, `scroll` ones stay pinned to the edges. */
  .ip-itemsec {
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(16,24,48,.16), rgba(16,24,48,0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16,24,48,.16), rgba(16,24,48,0)) right center / 12px 100% no-repeat scroll;
  }
  /* stack amount-in-words / totals */
  .ip-below { grid-template-columns: 1fr; }
  .ip-below-l { border-right: 0; border-bottom: 1.5px solid var(--ip-rule); }
}

.s-sec { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin: 16px 0 4px; border-top: 1px solid var(--line); padding-top: 12px; }

.ip-endorse { border-bottom: 1.5px solid var(--ip-rule); padding: 6px 14px; background: #fff8e8; font-weight: 700; font-size: 11px; letter-spacing: .2px; color: #6b4e00; text-transform: uppercase; }
.ip-endorse > div { padding: 1px 0; }
@media print { #printRoot .ip-endorse { background: #fff8e8; } }
/* PRINTING FROM A PHONE.
   The narrow-screen invoice overrides above live in `@media screen and (max-width: 860px)`, so in
   theory they never apply to print. In practice mobile browsers lay a print job out against the
   current screen viewport, so on a phone they DO stay in force — and they wreck the page:
     .ip-lines{min-width:620px} + .ip-itemsec{overflow-x:auto}  → a table wider than its box, and
        print cannot scroll, so the right-hand columns are simply cut off (the reported
        "amount goes out of the box");
     .ip-below / .ip-top {grid-template-columns:1fr}            → columns stack, the document grows
        by ~40mm and spills onto a second page;
     .ip-doc{width:100%;min-height:auto}                        → loses A4 sizing altogether.
   A laptop never showed any of this because its viewport is wider than 860px.
   These restore the A4 layout for print no matter what the viewport is. `#printRoot .x` (id+class)
   outranks the plain `.x` in the screen block, so specificity alone settles it. */
@media print {
  #printRoot .ip-doc { width: auto; }
  #printRoot .ip-top { grid-template-columns: 1.5fr 1fr; }
  #printRoot .ip-top .ip-block { border-bottom: 0; }
  #printRoot .ip-meta { border-top: 0; }
  #printRoot .ip-einvbar { grid-template-columns: 1fr auto; }
  /* never clip: print has no scrollbars, so overflow here means lost figures */
  #printRoot .ip-itemsec, #printRoot .ip-taxsec { overflow: visible; }
  #printRoot .ip-lines, #printRoot .ip-taxsum { min-width: 0; width: 100%; }
  #printRoot .ip-below { grid-template-columns: 1.5fr 1fr; }
  #printRoot .ip-below-l { border-right: 1.5px solid var(--ip-rule); border-bottom: 0; }
}

/* Last few millimetres: the on-screen breathing room is generous for a page that has to hold a
   whole invoice. Trimmed only in print. */
@media print {
  #printRoot .ip-signline { margin-top: 20px; }
  /* The label wrapping beside the words squeezes them into a narrow ribbon that runs many lines
     deep. Stacking the label lets the amount use the column's full width. */
  #printRoot .ip-words { flex-wrap: wrap; gap: 0 8px; }
  #printRoot .ip-words span { flex: 0 0 100%; }
  #printRoot .ip-decl { padding: 6px 14px; }
  #printRoot .ip-words { padding: 6px 14px; }
  #printRoot .ip-taxsec { padding: 7px 14px; }
  #printRoot .ip-block, #printRoot .ip-meta > div { line-height: 1.35; }
}
/* The UPI QR must survive printing: keep it whole, at a scannable size, and never let the
   browser's "no background graphics" setting wash it out. It also lies DOWN when printed — the
   stacked on-screen version costs ~45mm of a page that has to hold the whole invoice. */
@media print {
  #printRoot .ip-pay { page-break-inside: avoid; break-inside: avoid; }
  /* Lay the QR beside its text, but CONTAINED: this block lives in the left column of .ip-below,
     and an unconstrained flex row overflowed into the totals column on the right, printing "Any
     UPI app…" straight through the SGST figures. wrap + min-width:0 keep it inside its column. */
  #printRoot .ip-upi { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
    text-align: left; padding: 5px 14px; max-width: 100%; min-width: 0; overflow: hidden; }
  #printRoot .ip-upi .ip-blabel { flex: 0 0 100%; margin: 0; }
  #printRoot .ip-upi-img { width: 13mm; height: 13mm; margin: 0; flex: 0 0 auto;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #printRoot .ip-upi-amt { font-size: 11px; }
  #printRoot .ip-upi-vpa { max-width: 40mm; }
  /* "Any UPI app · GPay, PhonePe…" is app-store chatter: the widest thing in the block, and
     meaningless on paper next to an actual QR code. */
  #printRoot .ip-upi-note { display: none; }
  /* An invoice with no IRN yet prints a full-width "report this to the IRP" bar plus an empty QR
     box — an internal reminder to the accountant, on the customer's copy, costing ~29mm of the
     one page it has to fit in. A real IRN + signed QR is statutory and always prints. */
  #printRoot .ip-einvbar-pending { display: none !important; }
}

/* Bulk select / delete on registers */
.bulkbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 8px 12px;
  background: #fff4f2; border: 1px solid #f2c6bf; border-radius: 8px; font-size: 13px; }
.bulkbar b { color: #b42318; }
/* Ledger-register / trial-balance bulk bar is a compile action, not a delete — neutral blue, no red */
.bulkbar.led-bulkbar { background: #eef2ff; border-color: #c7d2fe; flex-wrap: wrap; }
.bulkbar.led-bulkbar b { color: inherit; }
th.selcol, td.selcol { width: 30px; text-align: center; padding-left: 6px; padding-right: 4px; }
th.selcol input, td.selcol input { cursor: pointer; }
/* Bulk square-off helper strip on the journal page */
.jf-bulkctl { margin: 0 0 10px; }
.jf-bulkctl-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.jf-postmode { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.jf-preset { margin: 2px 0; }

/* ---- Mobile / small-screen refinements ------------------------------------------------ */
@media (max-width: 720px) {
  /* Two-column form rows stack to one column so nothing is cramped or clipped */
  .field-row { flex-direction: column; gap: 10px; }
  .field-row > div { width: 100%; }
  /* Modals fit the viewport and scroll (bottom actions never get cut off) */
  .modal { width: 96vw; max-width: 96vw; max-height: 88vh; overflow-y: auto; padding: 18px; }
  .modal.inv-modal, .modal.ni-modal { width: 96vw; max-width: 96vw; }
  .modal .actions, .panel .actions { flex-wrap: wrap; }
  /* "New transaction" lives in the sidebar drawer on mobile — nothing floats over the page. */
  /* Wide content scrolls inside its own box instead of overflowing the page */
  .tblscroll { overflow-x: auto; }
  /* Dedicated full-page forms: comfortable single column, full width */
  #view .panel .body[style*="max-width"] { max-width: 100% !important; }
  .page-head, .panel-head { flex-wrap: wrap; gap: 8px; }
}

/* "New transaction" — a permanent section in the sidebar nav (client pages), replacing the old
   floating quick-add popup that covered content on mobile and the nav on desktop. */
.sidebar { overflow-y: auto; }                 /* nav scrolls if the transaction list overflows */
.qa-nav { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.qa-nav-h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
            color: #8aa0a6; padding: 0 12px 6px; }
.qa-nav-item { display: flex; gap: 8px; align-items: center; color: #cdd9dd; padding: 8px 12px;
               border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.qa-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- public invoice link (/i/<token>) ------------------------------------
   A customer opening their bill from a WhatsApp link. Mobile-first: the pay panel comes BEFORE
   the document, because "how much and how do I pay" is the whole reason they tapped. */
#pubview { min-height: 100vh; background: var(--bg); }
.pub-wrap { max-width: 860px; margin: 0 auto; padding: 16px 14px 48px; }
.pub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.pub-from { font-size: 18px; font-weight: 800; color: #1b2340; line-height: 1.25; }
.pub-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.pub-card { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px; overflow-x: auto; }
.pub-card .ip-doc { margin: 0 auto; }
.pub-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }

/* pay panel */
.pub-pay { display: flex; gap: 18px; align-items: center; justify-content: space-between;
  background: #eef7f0; border: 1px solid #cfe6d6; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; }
.pub-pay-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #166534; }
.pub-pay-amt { font-size: 30px; font-weight: 800; color: #14532d; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
.pub-pay-btn { background: #166534; border-color: #166534; text-decoration: none;
  display: inline-block; padding: 11px 20px; font-size: 15px; }
.pub-pay-btn:hover { background: #14532d; border-color: #14532d; }
.pub-pay-hint { color: #47624f; font-size: 11.5px; line-height: 1.5; margin-top: 8px; }
.pub-pay-r { text-align: center; flex: 0 0 auto; }
.pub-pay-r img { display: block; width: 132px; height: 132px; background: #fff;
  border: 1px solid #cfe6d6; border-radius: 10px; padding: 6px; }
.pub-pay-vpa { font-size: 11px; color: #47624f; margin-top: 5px; word-break: break-all;
  max-width: 144px; }
.pub-paid { background: #eef7f0; border: 1px solid #cfe6d6; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 14px; color: #14532d; font-weight: 600; }

/* expired / invalid link */
.pub-gone { text-align: center; padding: 44px 24px; }
.pub-gone-ic { font-size: 40px; margin-bottom: 8px; }
.pub-gone h2 { margin: 0 0 8px; font-size: 20px; }
.pub-gone p { margin: 0 0 6px; color: #45506e; }

/* On a phone the QR is secondary — the "Pay now" button opens the UPI app directly. */
@media (max-width: 640px) {
  .pub-wrap { padding: 12px 10px 40px; }
  .pub-pay { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .pub-pay-amt { font-size: 27px; }
  .pub-pay-btn { display: block; width: 100%; padding: 13px 20px; }
  .pub-pay-r img { margin: 0 auto; width: 116px; height: 116px; }
  .pub-pay-vpa { max-width: none; }
  .pub-card { padding: 8px; }
}
/* share dialog: the "customer can pay from this link" note + copy button */
.sh-link { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: #f1f5f9; border-radius: 8px; padding: 8px 10px; }
.sh-link span { font-size: 11.5px; color: #45506e; line-height: 1.45; }
.sh-link .btn { flex: 0 0 auto; }
.pub-cancelled { background: #fef2f2; border: 1px solid #f3c9c5; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 14px; color: #a11c12; font-weight: 600; line-height: 1.5; }
/* "last reminded" badge on the ageing report — sits inline after the party name / bell */
.rem-badge { margin-left: 6px; white-space: nowrap; font-weight: 600; cursor: help; }

/* ---- phone-native invoice (public page) ----------------------------------
   The printed invoice is a fixed 794px A4 grid; on a phone it needs pinching and sideways
   scrolling. This renders the same figures as a stacked, readable document. The A4 version is
   one tap away and is still what Print produces. */
.mi-doc { font-size: 14px; color: #16203c; }
.mi-sec { padding: 12px 2px; border-bottom: 1px solid var(--line); }
.mi-sec:last-child { border-bottom: 0; }
.mi-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px; }
.mi-num { font-size: 19px; font-weight: 800; letter-spacing: .2px; }
.mi-date { color: var(--muted); font-size: 13px; margin-top: 1px; }
.mi-name { font-weight: 700; font-size: 15px; line-height: 1.35; }
.mi-meta { color: #45506e; font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.mi-irn { word-break: break-all; }
.mi-eqr { width: 96px; height: 96px; margin-top: 8px; display: block; }

/* items: description + amount on one line, the maths underneath */
.mi-item { padding: 9px 0; border-bottom: 1px dashed #e3e8f2; }
.mi-item:last-child { border-bottom: 0; }
.mi-item-top { display: flex; align-items: baseline; gap: 8px; }
.mi-item-n { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 700;
  min-width: 14px; }
.mi-item-desc { flex: 1 1 auto; font-weight: 600; line-height: 1.4; word-break: break-word; }
.mi-item-amt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.mi-item-sub { color: var(--muted); font-size: 12px; margin: 2px 0 0 22px; }

/* totals */
.mi-totals { padding-top: 10px; }
.mi-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
  font-size: 13.5px; }
.mi-row span { color: #45506e; }
.mi-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-grand { border-top: 1.5px solid #2a3352; margin-top: 7px; padding-top: 9px; font-size: 17px; }
.mi-grand span { color: #16203c; font-weight: 700; }
.mi-grand b { font-weight: 800; }
.mi-words { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; }
.mi-note { font-size: 12px; color: #45506e; padding: 10px 2px 0; }
.mi-cancelled { background: #fef2f2; border: 1px solid #f3c9c5; color: #a11c12; font-weight: 700;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 4px; font-size: 12.5px; }

/* the A4 document, when the customer switches to it, scrolls inside its own card */
.pub-card-a4 { overflow-x: auto; }
.pub-card-a4 .ip-doc { min-width: 794px; }
.pub-viewtoggle { text-align: center; margin-top: 12px; }

/* ---- Quick Bill: the phone-first billing screen (#/client/{id}/bill) -------
   Three zones — customer, items, sticky total + one primary button. Sized for thumbs: every
   control is at least 44px tall. Works on a desktop too (centred, max 620px) so a user who
   prefers it isn't forced onto the 13-column form. */
.qb-wrap { max-width: 620px; margin: 0 auto; padding-bottom: 96px; }
.qb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qb-headtxt { flex: 1 1 auto; min-width: 0; }
.qb-title { font-size: 19px; font-weight: 800; line-height: 1.2; }
.qb-sub { color: var(--muted); font-size: 12.5px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-full { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; }
.qb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; }
.qb-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qb-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.qb-card input { width: 100%; min-height: 44px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
.qb-chip { display: inline-block; margin-top: 8px; background: #eef2fb; color: #33406b;
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.qb-hint { color: var(--muted); font-size: 12px; margin-top: 7px; }
.qb-empty { color: var(--muted); font-size: 13px; padding: 14px 2px; text-align: center; }

/* customer autocomplete */
.qb-ac { position: relative; }
.qb-acmenu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(20,28,54,.16);
  max-height: 260px; overflow-y: auto; }
.qb-acitem { padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #eef1f7; }
.qb-acitem:last-child { border-bottom: 0; }
.qb-acitem:hover { background: #f5f8ff; }
.qb-acitem b { display: block; font-size: 14px; font-weight: 600; }
.qb-acitem span { color: var(--muted); font-size: 11.5px; }

/* item rows */
.qb-line { padding: 11px 0; border-bottom: 1px dashed #e3e8f2; }
.qb-line:last-child { border-bottom: 0; }
.qb-line-top { display: flex; align-items: baseline; gap: 8px; }
.qb-line-name { flex: 1 1 auto; font-weight: 600; line-height: 1.35; word-break: break-word; }
.qb-line-amt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-x { flex: 0 0 auto; background: none; border: 0; color: #b42318; font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1; }
.qb-line-ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qb-step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; flex: 0 0 auto; }
.qb-stepb { width: 40px; height: 42px; border: 0; background: #f3f6fc; font-size: 19px;
  cursor: pointer; color: #33406b; line-height: 1; }
.qb-stepb:active { background: #e6ecf8; }
.qb-card .qb-qty { width: 56px; min-height: 42px; border: 0; border-radius: 0; text-align: center;
  font-variant-numeric: tabular-nums; }
.qb-mul { color: var(--muted); flex: 0 0 auto; }
.qb-card .qb-price { flex: 1 1 auto; min-width: 0; min-height: 42px; text-align: right;
  font-variant-numeric: tabular-nums; }
.qb-line-tax { flex: 0 0 auto; color: var(--muted); font-size: 12px; min-width: 30px; text-align: right; }

/* summary + the collapsed bill details */
.qb-sumrow { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.qb-sumrow span { color: #45506e; }
.qb-sumrow b { font-variant-numeric: tabular-nums; }
.qb-more { margin-top: 8px; }
.qb-more summary { cursor: pointer; font-size: 12.5px; color: #2f6fd8; font-weight: 600;
  padding: 6px 0; list-style: none; }
.qb-more summary::-webkit-details-marker { display: none; }
.qb-more summary::before { content: "⌄ "; }
.qb-detail { padding-top: 6px; }
.qb-detail .qb-lbl { margin-top: 10px; }

/* sticky footer: running total + the one primary action */
.qb-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(20,28,54,.08); }
.qb-foot-tot { flex: 1 1 auto; min-width: 0; }
.qb-foot-tot span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.qb-foot-tot b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qb-save { flex: 0 0 auto; min-height: 48px; padding: 0 22px; font-size: 15px; }
.qb-save[disabled] { opacity: .45; cursor: not-allowed; }

/* item picker sheet */
.qb-picklist { max-height: 46vh; overflow-y: auto; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 12px; }
.qb-pick { padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #eef1f7; }
.qb-pick:last-child { border-bottom: 0; }
.qb-pick:hover { background: #f5f8ff; }
.qb-pick b { display: block; font-size: 14px; font-weight: 600; }
.qb-pick span { color: var(--muted); font-size: 11.5px; }
.qb-pick-new b { color: #1a7a45; }

@media (max-width: 640px) {
  .qb-wrap { padding-bottom: 104px; }
  .qb-card { padding: 12px; border-radius: 12px; }
  .qb-foot-tot b { font-size: 19px; }
  .qb-save { padding: 0 18px; }
}

/* ---- offline / PWA --------------------------------------------------------
   A single strip under the top bar: amber while disconnected, blue when reconnected with bills
   still waiting to sync. It is the one place the app admits it is working from local data. */
.off-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff7e8; border-bottom: 1px solid #f0dcb4; color: #7a5310;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; }
.off-bar.hidden { display: none; }
.off-bar.off-pending { background: #eef4ff; border-bottom-color: #cfdcf6; color: #23407e; }
.off-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9822b; flex: 0 0 auto; }
.off-bar.off-pending .off-dot { background: #2f6fd8; }
.off-bar .btn { margin-left: auto; }

/* Quick Bill: offline state + the "reserve numbers" prompt */
.qb-off { background: #fff7e8; border: 1px solid #f0dcb4; color: #7a5310; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; }
.qb-off-left { display: inline-block; margin-left: 6px; background: #f5e3c2; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; }
.qb-prep .qb-prep-t { font-size: 13.5px; margin-bottom: 4px; }
.qb-prep .qb-prep-d { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.qb-prep-on { background: #f2f9f4; border-color: #cfe6d6; }
.qb-prep-on .qb-prep-t { color: #166534; margin: 0; }

/* offline bill share sheet */
.ob-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: #f1f5f9; border-radius: 10px; padding: 10px 12px; }
.ob-sum span { color: #45506e; font-size: 13px; }
.ob-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- POS till (#/client/{id}/pos) -----------------------------------------
   A counter surface. Big targets, the scan box always in reach, and the running total pinned
   where the operator and the customer can both see it. */
.pos-wrap { max-width: 720px; margin: 0 auto; padding-bottom: 96px; }
.pos-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pos-headtxt { flex: 1 1 auto; min-width: 0; }
.pos-title { font-size: 19px; font-weight: 800; line-height: 1.2; }
.pos-sub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* scan bar - the one control that must never lose focus for long */
.pos-scanbar { display: flex; gap: 8px; margin-bottom: 10px; position: relative; }
.pos-scanbar input { flex: 1 1 auto; min-height: 52px; font-size: 17px; padding: 0 14px;
  border: 2px solid var(--brand); border-radius: 12px; }
.pos-scanbar .btn { flex: 0 0 auto; min-height: 52px; font-size: 20px; padding: 0 16px; }
.pos-sugg { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20,28,54,.16); margin: -4px 0 10px; overflow: hidden; }
.pos-sitem { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px;
  cursor: pointer; border-bottom: 1px solid #eef1f7; }
.pos-sitem:last-child { border-bottom: 0; }
.pos-sitem:hover { background: #f5f8ff; }
.pos-sitem span { color: var(--muted); font-size: 12.5px; }
.pos-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 700;
  background: #f1f5f9; border-radius: 8px; padding: 8px 12px; text-align: center; letter-spacing: .5px; }

/* camera scanning */
.pos-cam { margin-bottom: 10px; text-align: center; }
.pos-cam video { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px;
  background: #000; }

/* cart */
.pos-cart { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px 12px; margin-bottom: 12px; }
.pos-empty { color: var(--muted); text-align: center; padding: 26px 8px; font-size: 13.5px; }
.pos-line { padding: 10px 0; border-bottom: 1px dashed #e3e8f2; }
.pos-line:last-child { border-bottom: 0; }
.pos-line-top { display: flex; align-items: baseline; gap: 8px; }
.pos-line-name { flex: 1 1 auto; font-weight: 600; word-break: break-word; }
.pos-line-amt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-x { flex: 0 0 auto; background: none; border: 0; color: #b42318; font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1; }
.pos-line-ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pos-stepb { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: #f3f6fc; font-size: 19px; cursor: pointer; color: #33406b; line-height: 1; }
.pos-cart .pos-qty { width: 62px; min-height: 42px; text-align: center;
  font-variant-numeric: tabular-nums; }
.pos-mul { color: var(--muted); }
.pos-cart .pos-price { flex: 1 1 auto; min-width: 0; min-height: 42px; text-align: right;
  font-variant-numeric: tabular-nums; }
.pos-rate { color: var(--muted); font-size: 12px; min-width: 30px; text-align: right; }

/* totals + payment */
.pos-tot { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; }
.pos-totrow { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.pos-totrow span { color: #45506e; }
.pos-totrow b { font-variant-numeric: tabular-nums; }
.pos-grand { border-top: 1.5px solid #2a3352; margin-top: 8px; padding-top: 9px; font-size: 17px; }
.pos-grand span { color: #16203c; font-weight: 700; }
.pos-pay { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.pos-modes { display: flex; gap: 8px; }
.pos-modes .btn { flex: 1 1 0; min-height: 44px; }
.pos-cash { margin-top: 10px; }
.pos-cash input { width: 100%; min-height: 46px; font-size: 17px; text-align: right;
  font-variant-numeric: tabular-nums; }
.pos-change { margin-top: 8px; text-align: right; font-size: 16px; color: #166534; }
.pos-change b { font-size: 19px; font-weight: 800; }

/* sticky footer */
.pos-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex;
  align-items: center; gap: 12px; background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(20,28,54,.08); }
.pos-foot-tot { flex: 1 1 auto; min-width: 0; }
.pos-foot-tot span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.pos-foot-tot b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-save { flex: 0 0 auto; min-height: 50px; padding: 0 22px; font-size: 15px; }
.pos-save[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
  .pos-wrap { padding-bottom: 104px; }
  .pos-scanbar input { font-size: 16px; }   /* 16px stops iOS zooming on focus */
}

/* ---- thermal receipt (58mm / 80mm rolls) -----------------------------------
   Not a shrunken A4 invoice: ONE narrow column, no table grid, and the page height is auto so a
   continuous roll is cut right after the last line instead of ejecting a full sheet. --tr-w is set
   from the chosen roll width. */
.tr-doc { width: var(--tr-w, 80mm); box-sizing: border-box; padding: 3mm 3mm 6mm;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 10px; line-height: 1.35; color: #000; background: #fff; }
.tr-head { text-align: center; }
.tr-shop { font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  line-height: 1.25; }
.tr-meta { font-size: 9px; line-height: 1.4; word-break: break-word; }
.tr-center { text-align: center; }
.tr-split { display: flex; justify-content: space-between; gap: 6px; }
.tr-rule { border-top: 1px dashed #000; margin: 2mm 0; }
.tr-item { margin-bottom: 1.4mm; }
.tr-item-n { font-weight: 700; word-break: break-word; }
.tr-item-r { display: flex; justify-content: space-between; gap: 8px; }
.tr-item-r b { font-variant-numeric: tabular-nums; }
.tr-row { display: flex; justify-content: space-between; gap: 8px; padding: .4mm 0; }
.tr-row b { font-variant-numeric: tabular-nums; }
.tr-grand { font-size: 13px; font-weight: 800; border-top: 1px solid #000; margin-top: 1mm;
  padding-top: 1mm; }
.tr-qr { text-align: center; margin: 2mm 0 0; }
.tr-qr img { width: 26mm; height: 26mm; }
.tr-thanks { text-align: center; font-size: 10px; font-weight: 700; margin-top: 1mm; }

@media print {
  /* the till UI disappears; only the receipt prints, at the roll's full width */
  body.printing #printRoot.thermal { display: block !important; width: var(--tr-w, 80mm); }
  #printRoot.thermal .tr-doc { width: var(--tr-w, 80mm); box-shadow: none; }
  /* a receipt is one continuous strip - never break it into pages */
  #printRoot.thermal .tr-doc, #printRoot.thermal .tr-item, #printRoot.thermal .tr-row {
    break-inside: avoid; page-break-inside: avoid; }
  /* thermal printers are monochrome: force real black, and keep the dashed rules visible */
  #printRoot.thermal, #printRoot.thermal * { color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- invoice themes -------------------------------------------------------
   A theme changes how the invoice LOOKS, never what it says or where anything sits. Every rule
   below touches colour, weight or padding only — the <colgroup> widths, table-layout:fixed and the
   page-break rules stay exactly as they are, because those are what stop figures being cut.

   Defaults reproduce the original document, so an unset client sees no change at all. */
.ip-doc {
  --ip-accent: #2a3352;                       /* the client's chosen colour */
  --ip-rule: var(--ip-accent);                /* heavy structural rules */
  --ip-rule-soft: #d7ddf0;                    /* light dividers inside blocks */
  --ip-grid: #c9d0e3;                         /* item-table cell borders */
  --ip-tint: #eef2fa;                         /* table heading fill */
  --ip-tint-fg: #39435f;                      /* table heading text */
  --ip-tot-bg: #f5f7fc;                       /* item-table total row */
  --ip-grand-bg: #eef1ff;                     /* grand-total row */
}

/* MODERN — an accent band across the top, lighter grid inside. */
.ip-theme-modern .ip-head { background: var(--ip-accent); border-bottom: 0; }
.ip-theme-modern .ip-head, .ip-theme-modern .ip-title,
.ip-theme-modern .ip-brandname { color: #fff; }
.ip-theme-modern .ip-copy { color: rgba(255,255,255,.82); }
.ip-theme-modern { --ip-grid: #dbe1ee; --ip-tint: #f3f6fc; }
.ip-theme-modern .ip-tot-grand td { background: color-mix(in srgb, var(--ip-accent) 12%, #fff); }

/* MINIMAL — no fills, hairline rules, plenty of white. */
.ip-theme-minimal { --ip-rule: #6b7280; --ip-rule-soft: #e5e7eb; --ip-grid: #e5e7eb;
  --ip-tint: transparent; --ip-tint-fg: #4b5563; --ip-tot-bg: transparent;
  --ip-grand-bg: transparent; }
.ip-theme-minimal, .ip-theme-minimal .ip-head, .ip-theme-minimal .ip-top,
.ip-theme-minimal .ip-itemsec { border-width: 1px; }
.ip-theme-minimal .ip-block { border-right-width: 1px; }
.ip-theme-minimal .ip-lines thead th { border-bottom: 1px solid var(--ip-rule); }
.ip-theme-minimal .ip-tot-grand td { border-top: 1.5px solid var(--ip-rule); }
.ip-theme-minimal .ip-title { color: var(--ip-accent); }

/* BOLD — heavy accent rules and a strongly tinted totals block. */
.ip-theme-bold { --ip-tint: color-mix(in srgb, var(--ip-accent) 14%, #fff);
  --ip-tint-fg: var(--ip-accent);
  --ip-grand-bg: color-mix(in srgb, var(--ip-accent) 20%, #fff); }
.ip-theme-bold .ip-head { border-bottom-width: 3px; }
.ip-theme-bold .ip-title { color: var(--ip-accent); font-weight: 900; }
.ip-theme-bold .ip-itot td { border-top-width: 2px; }
.ip-theme-bold .ip-tot-grand td { border-top-width: 2px; }

/* COMPACT — classic colours, tighter rhythm. Buys vertical room on a long invoice. */
.ip-theme-compact .ip-head { padding: 8px 14px; }
.ip-theme-compact .ip-block, .ip-theme-compact .ip-meta { padding: 7px 12px; }
.ip-theme-compact .ip-lines th, .ip-theme-compact .ip-lines td { padding: 4px 6px; }
.ip-theme-compact .ip-words, .ip-theme-compact .ip-decl { padding: 6px 12px; }
.ip-theme-compact .ip-tot td { padding: 4px 12px; }
.ip-theme-compact .ip-sign { padding: 10px 12px; }
.ip-theme-compact .ip-signline { margin-top: 28px; }

/* Themes must survive printing: the accent fills are the point of them, and a browser drops
   backgrounds by default. */
@media print {
  #printRoot .ip-doc, #printRoot .ip-doc * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* theme picker (invoice settings) */
.thm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px;
  margin: 6px 0 4px; }
.thm-card { border: 2px solid var(--line); border-radius: 12px; padding: 8px; cursor: pointer;
  background: #fff; text-align: left; transition: border-color .15s, box-shadow .15s; }
.thm-card:hover { border-color: #b9c6e6; }
.thm-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47,111,216,.15); }
.thm-name { font-size: 12px; font-weight: 700; margin-top: 6px; }
/* a miniature of the document: header band, two rules, a tinted total */
.thm-mini { height: 62px; border: 1px solid var(--tc, #2a3352); border-radius: 4px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column; }
.thm-mini i { display: block; background: var(--tc, #2a3352); }
.thm-mini .m-head { height: 13px; }
.thm-mini .m-body { flex: 1; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.thm-mini .m-row { height: 4px; background: #e6eaf3; border-radius: 1px; }
.thm-mini .m-row.w70 { width: 70%; } .thm-mini .m-row.w50 { width: 50%; }
.thm-mini .m-tot { height: 8px; margin-top: auto; background: var(--tt, #eef1ff); border-radius: 1px; }
.thm-mini.minimal { border-color: #9aa3b2; }
.thm-mini.minimal .m-head { height: 3px; }
.thm-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.thm-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.thm-sw.on { box-shadow: 0 0 0 2px var(--brand); }
/* language picker (top bar) */
.lang-pick { display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; background: #fff; }
.lang-btn { border: 0; background: none; cursor: pointer; padding: 4px 10px; font-size: 12px;
  font-weight: 600; color: #45506e; line-height: 1.6; }
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn.on { background: var(--brand); color: #fff; }
/* Devanagari needs a little more line height than Latin at the same size, or matras clip. */
html[lang="hi"], html[lang="mr"] { --dev: 1; }
html[lang="hi"] body, html[lang="mr"] body { line-height: 1.55; }
html[lang="hi"] .btn, html[lang="mr"] .btn { line-height: 1.5; }
/* recurring invoices */
.rc-alert { background: #fff7e8; border: 1px solid #f0dcb4; color: #7a5310; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.rc-line { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.rc-line input { min-height: 36px; }
.rc-line .rc-desc { flex: 1 1 auto; min-width: 0; }
/* price lists */
.qb-card { background: #eef7f0; color: #166534; }
.pr-rate { min-height: 34px; }
/* item photos */
.it-tile { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
  background: #f1f5f9; border: 1px solid var(--line); }
.it-tile-ph { display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #7b86a3; letter-spacing: .5px; }
.it-row { display: flex; align-items: center; gap: 10px; }
.it-txt { min-width: 0; flex: 1 1 auto; }
.pos-sitem .it-tile { margin-right: 2px; }
.it-prev { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto;
  background: #f8fafc; text-align: center; }
.it-prev img { width: 100%; height: 100%; object-fit: cover; }

/* Quick Bill — what was handed over at the counter. Sits directly above the fixed total bar so
   the operator sees bill, payment and balance as one block without scrolling. App tokens only:
   this is a light-only UI (see :root), so the palette is the app's, not a new one. */
.qb-pay { padding: 14px; }   /* .qb-card supplies the surface — this only tunes the inner spacing */
.qb-pay .qb-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.qb-pay-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
/* Amount on its own line, the four modes on the next: at a phone width they otherwise wrap
   mid-row and the last mode strands by itself. */
.qb-pay-row #qbPaid { flex: 1 1 100%; font-size: 19px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums; }
.qb-mode { flex: 1 1 0; text-align: center; }
.qb-mode { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-weight: 600; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.qb-mode:hover { border-color: var(--brand); color: var(--brand); }
.qb-mode.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.qb-mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.qb-pay-note { font-size: 12.5px; margin-top: 7px; min-height: 17px; }
.qb-pay-note.ok  { color: var(--green); font-weight: 600; }
.qb-pay-note.due { color: var(--amber); font-weight: 700; }

/* ---------- Printed accounting documents (.led-doc) ------------------------------------------
   Used by every ledger-shaped print: party ledger, account ledger, cash book, bank book and the
   generic list printer. The pages are laid out in ledgerDocHtml() — each <section class="led-page">
   is exactly one sheet, already carrying its own heading, column headings and carried-forward
   totals — so all this file does is dress them and enforce the breaks. */
.led-doc { color: #111; font-size: 11.5px; }
.led-page { box-sizing: border-box; padding: 11mm 12mm 9mm; background: #fff; }

.led-brand { border-bottom: 2px solid #1f2937; padding-bottom: 5px; }
.led-firm { font-size: 17px; font-weight: 800; letter-spacing: .2px; color: #111827; }
.led-faddr { font-size: 10.5px; color: #4b5563; margin-top: 1px; }
.led-doctitle { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; margin: 7px 0 8px; color: #1f2937; }

/* who the ledger belongs to (left) and what it covers (right) */
.led-subject { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  border: 1px solid #cbd5e1; border-radius: 5px; padding: 8px 10px; }
.led-subj-l { min-width: 0; }
.led-subj-lbl { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #6b7280; }
.led-subj-name { font-size: 14px; font-weight: 800; color: #111827; line-height: 1.25; }
.led-subj-sub { font-size: 10.5px; color: #4b5563; margin-top: 1px; }
.led-addr { font-size: 10.5px; color: #374151; margin-top: 4px; line-height: 1.45; }
.led-subj-r { flex: 0 0 auto; text-align: right; }
.led-kv { font-size: 10.5px; color: #4b5563; white-space: nowrap; }
.led-kv span { color: #6b7280; }
.led-kv b { color: #111827; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* the four figures every page states the same way */
.led-sum { display: flex; gap: 0; margin: 8px 0 0; border: 1px solid #cbd5e1; border-radius: 5px;
  overflow: hidden; }
.led-sum-c { flex: 1 1 0; padding: 5px 9px; border-right: 1px solid #e2e8f0; min-width: 0; }
.led-sum-c:last-child { border-right: 0; }
.led-sum-c span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #6b7280; }
.led-sum-c b { font-size: 12px; color: #111827; font-variant-numeric: tabular-nums; }
.led-sum-c.on { background: #f1f5f9; }
.led-sum-c.on b { font-weight: 800; }

.led-tbl { width: 100%; border-collapse: collapse; margin-top: 9px; table-layout: fixed; }
.led-tbl th { background: #eef2f7; border: 1px solid #b8c2cf; padding: 5px 7px; font-size: 10px;
  font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #334155;
  text-align: left; }
.led-tbl td { border: 1px solid #d5dbe3; padding: 3px 6px; vertical-align: top;
  word-wrap: break-word; overflow-wrap: anywhere; }
/* A wrapped date doubles the height of every row and costs a whole sheet on a long ledger. */
.led-tbl th.nw, .led-tbl td.nw { white-space: nowrap; }
/* Right-align and tabular-space every money column. Columns ran together on the old print
   because the totals row had no alignment of its own. */
.led-tbl th.num, .led-tbl td.num { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.led-tbl tbody tr:nth-child(even) td { background: #fafbfc; }
.led-empty { text-align: center; color: #6b7280; padding: 14px 7px; }

/* carried / brought forward and the subtotal rows */
.led-tbl .led-bf td, .led-tbl .led-cf td { background: #f3f6fa; font-weight: 700; font-style: italic;
  color: #334155; }
.led-tbl .led-cf td { border-top: 1.5px solid #94a3b8; }
.led-tbl .led-sub td { background: #eef2f7; font-weight: 700; }
.led-tbl .led-grand td { background: #e2e8f0; font-weight: 800; border-top: 1.5px solid #475569;
  border-bottom: 3px double #475569; }

.led-mini { display: flex; justify-content: space-between; gap: 12px; font-size: 10px;
  color: #4b5563; border-bottom: 1px solid #cbd5e1; padding-bottom: 4px; }
.led-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  padding-top: 4px; border-top: 1px solid #d5dbe3; font-size: 9.5px; color: #6b7280; }

/* A report with seven or more columns is unreadable squeezed onto a portrait sheet, so those
   turn the paper instead. A NAMED page is the only way to say that per-document — @page on its own
   would turn every printed page in the app, invoices included. */
@page ledgerLandscape { size: A4 landscape; margin: 0; }

@media print {
  #printRoot .led-doc.wide .led-page { page: ledgerLandscape; }
  /* one <section> = one sheet; the last must not push out a trailing blank page */
  #printRoot .led-page { page-break-after: always; break-after: page; }
  #printRoot .led-page:last-child { page-break-after: auto; break-after: auto; }
  /* a heading, a carried-forward line or a total must never be split down the middle */
  #printRoot .led-brand, #printRoot .led-subject, #printRoot .led-sum,
  #printRoot .led-tbl tr, #printRoot .led-foot { break-inside: avoid; page-break-inside: avoid; }
  /* the tints ARE the structure here — a row you cannot tell from a total is worse than no tint */
  #printRoot .led-doc, #printRoot .led-doc * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #printRoot .led-doc { font-size: 10.5px; }
}

/* Control account strip on the ageing — the four figures the ledger states for the whole group. */
.ag-control { border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; margin: 0 0 10px;
  overflow: hidden; }
.ag-control-h { padding: 7px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
  font-size: 12px; font-weight: 700; color: #334155; }
.ag-control-r { display: flex; flex-wrap: wrap; }
.ag-control-c { flex: 1 1 150px; padding: 8px 12px; border-right: 1px solid #eef2f7; min-width: 0; }
.ag-control-c:last-child { border-right: 0; }
.ag-control-c span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #64748b; }
.ag-control-c b { font-size: 15px; color: #0f172a; font-variant-numeric: tabular-nums; }
.ag-control-c.on { background: #f1f5f9; }

/* "Money tied to no bill" prompt on the ageing. */
.ag-alloc { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 10px; font-size: 13px; color: #78350f; }
.ag-alloc .muted { color: #92400e; opacity: .85; }

/* What the bank itself printed, under the tidy summary — for tallying against a passbook. */
.led-narr { font-size: 11px; line-height: 1.35; margin-top: 2px; max-width: 460px;
  white-space: normal; word-break: break-word; color: #64748b; }

/* Set a depreciation rate where you read it — on the schedule itself. */
.dep-rate { width: 58px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 6px;
  text-align: right; font-size: 13px; }
.dep-rate:focus { border-color: var(--brand); outline: none; }
.dep-cls { margin-top: 3px; padding: 2px 4px; border: 1px solid #d5dae2; border-radius: 6px;
  background: #fff; font-size: 11px; max-width: 190px; color: #475569; }

/* Schedule III drill — click a face line to reveal the ledgers behind its note, a ledger for its
   book. Print hides both the caret and any expanded rows: a signed statement shows the statutory
   face, never the reader's exploration of it. */
.s3-drill { cursor: pointer }
.s3-drill:hover > td { background: #f8fafc }
.s3-caret { color: #64748b; font-size: 11px; user-select: none }
.s3-led > td { font-size: 11.5px; color: #475569 }
.s3-led[data-acc], .s3-noteled[data-acc] { cursor: pointer }
.s3-led[data-acc]:hover > td, .s3-noteled[data-acc]:hover > td { background: #eef2f7; color: #0f172a }
@media print {
  .s3-caret { display: none }
  .s3-led { display: none !important }
}