/* ===========================================================================
   Billing Babu for CAs — shared self-contained theme.
   Every page links this. Brand values copied from the real app
   (style.css / dashboard.css) so it matches without the fragile multi-file
   mobile-first cascade. DO NOT redefine these per page.
   =========================================================================== */
:root{
  --primary:#6C47FF; --primary-dark:#5430E8; --primary-light:#EDE5FF; --secondary:#FF6B35;
  --bg:#f6f7fb; --surface:#ffffff; --ink:#141b2d; --ink-2:#1f2937; --muted:#6f7892; --border:#e7e9f2;
  --ok:#1f9d68; --okbg:#e8f7ee; --warn:#b07e00; --warnbg:#fff8e6; --danger:#d83b63; --dangerbg:#fdeaf0;
  --r:16px; --r-lg:20px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

.ca-app{ display:flex; min-height:100vh; }

/* ── Sidebar ── */
.ca-sidebar{ width:264px; flex:0 0 264px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.ca-brand{ display:flex; align-items:center; gap:10px; padding:22px 22px 18px; }
.ca-brand .mk{ width:34px; height:34px; }
.ca-brand .wm{ font-size:1.45rem; font-weight:800; letter-spacing:-.5px; line-height:1; }
.ca-brand .wm .k{ color:var(--primary); }
.ca-fortag{ font-size:.58rem; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--primary); background:var(--primary-light); padding:3px 6px; border-radius:6px; }
.ca-nav{ flex:1; overflow-y:auto; padding:4px 12px 12px; }
.ca-navlabel{ font-size:.66rem; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#aab0c0; padding:16px 10px 6px; }
.ca-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; color:#4b5365; font-size:.9rem; font-weight:550; margin-bottom:2px; }
.ca-link svg{ width:19px; height:19px; flex:0 0 19px; color:#8a90a0; }
.ca-link:hover{ background:#f5f5fb; color:var(--ink); }
.ca-link.active{ background:var(--primary); color:#fff; box-shadow:0 8px 18px -10px rgba(108,71,255,.8); }
.ca-link.active svg{ color:#fff; }
.ca-badge{ margin-left:auto; background:var(--secondary); color:#fff; font-size:.66rem; font-weight:800; min-width:19px; height:19px; padding:0 5px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.ca-foot{ border-top:1px solid var(--border); padding:14px 16px; }
.ca-user{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.ca-avatar{ width:38px;height:38px;flex:0 0 38px;border-radius:50%; background:linear-gradient(135deg,var(--primary),#9576ff); color:#fff; font-weight:800; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
.ca-user .ui strong{ display:block; font-size:.85rem; }
.ca-user .ui span{ display:block; font-size:.74rem; color:var(--muted); }
.ca-logout{ display:flex; align-items:center; gap:10px; color:#6f7892; font-size:.86rem; font-weight:600; padding:9px 12px; border-radius:10px; width:100%; background:none; border:0; cursor:pointer; font-family:inherit; }
.ca-logout:hover{ background:#f5f5fb; color:var(--danger); }
.ca-logout svg{ width:18px;height:18px; }

/* ── Main / topbar ── */
.ca-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ca-topbar{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; gap:20px; }
.ca-topbar h2{ margin:0; font-size:1.3rem; font-weight:800; letter-spacing:-.4px; }
.ca-topbar .sub{ margin:3px 0 0; font-size:.84rem; color:var(--muted); }
.ca-tactions{ display:flex; align-items:center; gap:10px; }
.ca-tbtn{ width:40px;height:40px;border-radius:50%; border:1px solid var(--border); background:#fff; color:#4b5365; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.ca-tbtn svg{ width:19px;height:19px; }
.ca-lang{ height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#4b5365; font-weight:700; font-size:.8rem; cursor:pointer; }
.ca-dot{ position:absolute; top:9px; right:10px; width:7px;height:7px;border-radius:50%; background:var(--danger); }
.ca-content{ padding:6px 32px 60px; }
.ca-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.84rem; font-weight:600; margin-bottom:4px; }
.ca-back svg{ width:16px;height:16px; }

/* ── Buttons ── */
.ca-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); background:#fff; color:var(--ink); font-family:inherit; font-weight:700; font-size:.88rem; padding:11px 16px; border-radius:12px; cursor:pointer; }
.ca-btn svg{ width:16px;height:16px; }
.ca-btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 12px 24px -14px rgba(108,71,255,.85); }
.ca-btn.primary:hover{ background:var(--primary-dark); }
.ca-btn.ghost{ background:transparent; border-color:transparent; color:var(--primary); }
.ca-btn.lg{ padding:14px 20px; font-size:.95rem; border-radius:13px; }
.ca-btn.block{ width:100%; }

/* ── Hero band ── */
.ca-hero{ display:flex; align-items:center; gap:30px; background:radial-gradient(120% 160% at 0% 0%, #7d5bff 0%, #6C47FF 45%, #5a36e6 100%); color:#fff; border-radius:var(--r-lg); padding:26px 30px; margin-bottom:20px; box-shadow:0 20px 44px -24px rgba(108,71,255,.75); }
.ca-hero-main{ border-right:1px solid rgba(255,255,255,.22); padding-right:30px; }
.ca-hero-label{ font-size:.82rem; color:rgba(255,255,255,.82); font-weight:500; }
.ca-hero-val{ font-size:2.7rem; font-weight:800; line-height:1.05; letter-spacing:-1px; margin:4px 0 2px; display:inline-block; }
.ca-hero-sub{ font-size:.82rem; color:rgba(255,255,255,.8); }
.ca-hero-minis{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; flex:1; }
.ca-mini .ml{ font-size:.74rem; color:rgba(255,255,255,.78); }
.ca-mini .mv{ font-size:1.55rem; font-weight:800; letter-spacing:-.5px; }

/* ── Deadline banner ── */
.ca-deadline{ display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#6C47FF 0%,#7d5bff 55%,#9576ff 100%); color:#fff; border-radius:var(--r); padding:16px 20px; margin-bottom:22px; box-shadow:0 14px 30px -18px rgba(108,71,255,.7); }
.ca-deadline .ic{ width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center; }
.ca-deadline .ic svg{ width:23px;height:23px; }
.ca-deadline h3{ margin:0; font-size:1rem; font-weight:800; }
.ca-deadline p{ margin:2px 0 0; font-size:.82rem; color:rgba(255,255,255,.85); }
.ca-dl-actions{ margin-left:auto; display:flex; gap:10px; }
.ca-dl-btn{ border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; padding:11px 16px; border-radius:11px; background:#fff; color:var(--primary); display:inline-flex; align-items:center; gap:7px; }
.ca-dl-btn.ghost{ background:rgba(255,255,255,.16); color:#fff; }
.ca-dl-btn svg{ width:16px;height:16px; }

/* ── Quick actions ── */
.ca-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.ca-qcard{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:18px; transition:box-shadow .15s, transform .15s; }
.ca-qcard:hover{ box-shadow:0 14px 30px -18px rgba(20,20,50,.35); transform:translateY(-1px); }
.ca-qcard .iw{ width:46px;height:46px;flex:0 0 46px;border-radius:13px; display:flex; align-items:center; justify-content:center; }
.ca-qcard .iw svg{ width:23px;height:23px; }
.iw.primary{ background:var(--primary-light); color:var(--primary); }
.iw.violet{ background:#efe9ff; color:#5430e8; }
.iw.orange{ background:#fff0e9; color:var(--secondary); }
.iw.green{ background:var(--okbg); color:var(--ok); }
.ca-qcard .qt{ font-weight:700; font-size:.95rem; }
.ca-qcard .qs{ font-size:.8rem; color:var(--muted); margin-top:2px; }

/* ── Cards / lists ── */
.ca-split{ display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-bottom:22px; }
.ca-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ca-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:20px 22px; margin-bottom:20px; }
.ca-card.pad0{ padding:0; overflow:hidden; }
.ca-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.ca-card-head h3{ margin:0; font-size:1rem; font-weight:750; letter-spacing:-.2px; }
.ca-card-head a{ font-size:.82rem; font-weight:650; color:var(--primary); }
.ca-section-title{ font-size:.72rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#9aa0ab; margin:0 0 10px; }
.ca-qrow{ display:flex; align-items:center; gap:14px; padding:12px 8px; border-radius:12px; color:inherit; }
a.ca-qrow:hover{ background:#faf9ff; }
.ca-qdot{ width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:flex;align-items:center;justify-content:center; }
.ca-qdot svg{ width:18px;height:18px; }
.ca-qrow strong{ font-size:.92rem; font-weight:650; }
.ca-qsub{ font-size:.78rem; color:var(--muted); margin-top:1px; }
.ca-qchev{ margin-left:auto; color:#c4c4d0; } .ca-qchev svg{ width:18px;height:18px; }

/* ── Chips ── */
.ca-chip{ font-size:.7rem; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; display:inline-block; }
.ca-chip.urgent{ background:#fff1e9; color:#d9480f; }
.ca-chip.blocked{ background:var(--dangerbg); color:#c2255c; }
.ca-chip.ready{ background:var(--okbg); color:var(--ok); }
.ca-chip.review{ background:var(--warnbg); color:var(--warn); }
.ca-chip.filed{ background:#eef1f6; color:#566077; }
.ca-chip.kyc{ background:#ede9ff; color:#5430e8; }
.ca-tag-bb{ font-size:.58rem; font-weight:800; color:var(--primary); background:var(--primary-light); padding:2px 5px; border-radius:5px; vertical-align:middle; margin-left:5px; }

/* ── Tables ── */
.ca-table{ width:100%; border-collapse:collapse; }
.ca-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:#9aa0ab; font-weight:700; padding:0 10px 10px; border-bottom:1px solid var(--border); }
.ca-table td{ padding:13px 10px; border-bottom:1px solid #f4f4f8; font-size:.88rem; }
.ca-table tr:last-child td{ border-bottom:0; }
.ca-table tbody tr.clickable{ cursor:pointer; }
.ca-table tbody tr.clickable:hover{ background:#faf9ff; }
.ca-cname{ font-weight:650; }
.ca-gstin{ font-family:ui-monospace,Menlo,monospace; font-size:.78rem; color:#8a90a0; }
.ca-due{ color:#d9480f; font-weight:650; }
.ca-num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ── Filter / search bar ── */
.ca-filterbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.ca-search{ flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:11px; padding:10px 14px; }
.ca-search svg{ width:17px;height:17px;color:#9aa0ab; }
.ca-search input{ border:0; outline:0; font-family:inherit; font-size:.9rem; width:100%; background:none; }
.ca-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.ca-filter{ border:1px solid var(--border); background:#fff; color:#4b5365; font-family:inherit; font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; }
.ca-filter.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ── Return journey (timeline + step panel) ── */
.ca-journey{ display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
.ca-timeline{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:14px; position:sticky; top:16px; }
.ca-step{ display:flex; gap:12px; padding:12px 10px; border-radius:12px; color:inherit; align-items:flex-start; }
.ca-step:hover{ background:#faf9ff; }
.ca-step .n{ width:26px;height:26px;flex:0 0 26px;border-radius:50%; border:1.5px solid var(--border); color:#9aa0ab; font-size:.78rem; font-weight:700; display:flex;align-items:center;justify-content:center; }
.ca-step .st{ font-size:.9rem; font-weight:650; }
.ca-step .ss{ font-size:.75rem; color:var(--muted); margin-top:2px; }
.ca-step.active{ background:var(--primary-light); }
.ca-step.active .n{ background:var(--primary); border-color:var(--primary); color:#fff; }
.ca-step.done .n{ background:var(--ok); border-color:var(--ok); color:#fff; }
.ca-step.done .st{ color:var(--muted); }
.ca-panel{ display:none; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:24px; }
.ca-panel.show{ display:block; }
.ca-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ca-panel-head h2{ margin:0; font-size:1.2rem; font-weight:800; letter-spacing:-.3px; }
.ca-stat-row{ display:flex; gap:30px; margin-bottom:20px; }
.ca-stat .sl{ font-size:.76rem; color:var(--muted); } .ca-stat .sv{ font-size:1.5rem; font-weight:800; letter-spacing:-.4px; }
.ca-cta-row{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.ca-payable{ background:var(--primary-light); border-radius:14px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.ca-payable .pl{ font-size:.84rem; color:var(--primary-dark); font-weight:600; } .ca-payable .pv{ font-size:1.5rem; font-weight:800; color:var(--primary-dark); }

/* exception rows */
.ca-exrow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f4f4f8; }
.ca-exrow:last-child{ border-bottom:0; }
.ca-exrow .et{ font-size:.9rem; font-weight:600; } .ca-exrow .es{ font-size:.78rem; color:var(--muted); }

/* IMS accept/reject/pending segmented control */
.ca-ims{ display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.ca-ims button{ border:0; background:#fff; color:#6f7892; font-family:inherit; font-size:.76rem; font-weight:700; padding:6px 12px; cursor:pointer; }
.ca-ims button+button{ border-left:1px solid var(--border); }
.ca-ims button.on.acc{ background:var(--okbg); color:var(--ok); }
.ca-ims button.on.rej{ background:var(--dangerbg); color:#c2255c; }
.ca-ims button.on.pend{ background:var(--warnbg); color:var(--warn); }
.ca-imsnote{ display:flex; gap:8px; font-size:.8rem; color:var(--warn); background:var(--warnbg); border-radius:10px; padding:10px 12px; margin-top:12px; }

/* ── Forms / KYC / verify ── */
.ca-field{ margin-bottom:16px; }
.ca-label{ display:block; font-size:.82rem; font-weight:650; color:#374151; margin-bottom:7px; }
.ca-input{ width:100%; border:1.5px solid #e2e2ec; border-radius:11px; padding:12px 14px; font-size:.92rem; font-family:inherit; color:var(--ink); background:#fff; }
.ca-input.lock{ background:#fafafb; font-family:ui-monospace,Menlo,monospace; letter-spacing:.4px; }
.ca-row{ display:flex; gap:12px; align-items:center; }
.ca-note{ display:flex; gap:9px; background:#f6f3ff; border:1px solid #e4ddff; color:#4a3aa8; border-radius:11px; padding:12px 14px; font-size:.84rem; line-height:1.5; }
.ca-note svg{ width:18px;height:18px;flex:0 0 18px;color:var(--primary);margin-top:1px; }
.ca-verpill{ display:inline-flex; align-items:center; gap:6px; background:var(--okbg); color:var(--ok); font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:999px; }
.ca-verpill svg{ width:14px;height:14px; }
.ca-otp{ display:flex; gap:10px; }
.ca-otp input{ width:46px; height:54px; text-align:center; font-size:1.3rem; font-weight:700; border:1.5px solid #e2e2ec; border-radius:11px; font-family:inherit; }

/* segmented tab (Billing Babu vs Other client) */
.ca-seg{ display:flex; gap:10px; margin-bottom:20px; }
.ca-seg .opt{ flex:1; }
.ca-seg .opt input{ position:absolute; opacity:0; pointer-events:none; }
.ca-seg .opt label{ display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border:1.5px solid #e2e2ec; border-radius:12px; font-weight:650; font-size:.92rem; color:#4b5563; cursor:pointer; }
.ca-seg .opt label svg{ width:18px; height:18px; flex:0 0 18px; }
.ca-seg .opt input:checked + label{ background:var(--primary); color:#fff; border-color:var(--primary); }
/* Safety net: any icon not covered by a specific rule must never balloon. */
.ca-app svg:not([width]){ max-width:28px; max-height:28px; }

/* dropzone */
.ca-dropzone{ border:2px dashed #cdbcff; border-radius:16px; background:#faf7ff; padding:30px; text-align:center; color:var(--muted); cursor:pointer; display:block; }
.ca-dropzone svg{ width:30px;height:30px;color:var(--primary); margin-bottom:8px; }
.ca-dropzone strong{ display:block; color:var(--ink); font-size:.95rem; margin-bottom:3px; }
.ca-maparrow{ color:var(--primary); }

/* generic step progress (wizard-ish, optional) */
.ca-prog{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.ca-prog .p{ display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:650; color:#9aa0ab; }
.ca-prog .p .pn{ width:22px;height:22px;border-radius:50%;border:1.5px solid #d7d7e0;font-size:.72rem;display:flex;align-items:center;justify-content:center; }
.ca-prog .p.act{ color:var(--ink); } .ca-prog .p.act .pn{ background:var(--primary);border-color:var(--primary);color:#fff; }
.ca-prog .p.done .pn{ background:var(--ok);border-color:var(--ok);color:#fff; }
.ca-prog .line{ flex:1; height:1.5px; background:var(--border); }

@media (max-width:900px){ .ca-split,.ca-grid-2,.ca-journey{ grid-template-columns:1fr; } .ca-hero{ flex-direction:column; align-items:flex-start; } .ca-hero-main{ border-right:0; padding-right:0; } }