/* ═══════════════════════════════════════════
   Billing Saathi v2 — Public App CSS
   ═══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
/* Only lock body scroll when the SPA dashboard is active; everywhere else
   (landing, sign-in, sign-up, trial, pricing) we want a normal scrollable page */
body.ma-app-active{overflow:hidden;height:100vh}
:root{
  /* ── v3.9.309 — NEW BLUE/PURPLE PALETTE
        Full theme change from teal-green identity to a modern blue-based
        palette. Primary blue var(--brand) with purple secondary, cyan accent.
        Chart colors: Sales=blue, Purchase=purple, Expenses=amber,
        Profit=cyan, Loss=red. */
  --brand:#2563EB;--brand-d:#1D4ED8;--brand-dd:#1E40AF;--brand-bg:#EFF6FF;--brand-bg2:#DBEAFE;
  --header:#2563EB;--header-d:#1D4ED8;
  --secondary:#7C3AED;--secondary-d:#6D28D9;--secondary-bg:#F5F3FF;
  --accent:#06B6D4;--accent-d:#0891B2;--accent-bg:#ECFEFF;
  --dark:#111827;--dark2:#1F2937;
  --surf:#FFFFFF;--surf2:#F8FAFC;--surf3:#F3F4F6;
  --bdr:#E5E7EB;--text:#111827;--muted:#475569;--hint:#94A3B8;
  --heading:#111827;--body:#475569;--icon:#64748B;
  --green:#0EA5E9;--green-bg:#E0F2FE;
  --red:#EF4444;--red-bg:#FEE2E2;
  --amber:#F59E0B;--amber-bg:var(--brand-bg);
  --success:#0EA5E9;--success-bg:#E0F2FE;
  --info:#3B82F6;--info-bg:var(--brand-bg2);
  --danger:#EF4444;--danger-bg:#FEE2E2;
  --warning:#F59E0B;--warning-bg:#FEF3C7;
  --shadow:0 1px 3px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 6px 24px rgba(15,23,42,.08);
  --r:10px;--rl:14px;
}


#ma-shell{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--text);min-height:100vh;display:flex;flex-direction:column;background:var(--surf);transition:opacity .2s ease}
body.ma-app-active #ma-shell{height:100vh;min-height:100vh;overflow:hidden}


/* ────────────────────────────────────
   LANDING
──────────────────────────────────── */
.ma-land{background:var(--dark);color:#fff;min-height:100vh}
.ma-nav{display:flex;align-items:center;padding:16px 40px;border-bottom:1px solid rgba(255,255,255,.08);gap:16px}
.ma-nav-logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;text-decoration:none;color:#fff}
.ma-logo-box{width:36px;height:36px;background:var(--brand);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff}
.ma-nav-logo span{color:var(--brand)}
.ma-nav-links{margin-left:auto;display:flex;gap:8px}
.btn-outline-w{padding:8px 20px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;background:transparent;font-size:13px;font-weight:600;transition:all .15s}
.btn-outline-w:hover{background:rgba(255,255,255,.1)}
.btn-brand{padding:9px 20px;background:var(--brand);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:13px;font-weight:700;transition:all .15s}
.btn-brand:hover{background:var(--brand-d)}

.ma-hero{padding:72px 40px 52px;text-align:center;max-width:780px;margin:0 auto}
.ma-hero h1{font-size:46px;font-weight:900;line-height:1.12;margin-bottom:18px;color:#fff;letter-spacing:-1px}
.ma-hero h1 span{color:var(--brand)}
.ma-hero p{font-size:17px;color:#94a3b8;margin-bottom:36px;line-height:1.75;max-width:600px;margin-left:auto;margin-right:auto}
.ma-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-hero-p{padding:15px 36px;background:var(--brand);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:all .15s}
.btn-hero-p:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn-hero-o{padding:15px 36px;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:#fff;background:transparent;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-hero-o:hover{background:rgba(255,255,255,.08)}

.ma-stats-strip{display:flex;justify-content:center;gap:56px;padding:28px 40px;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin:0 0 52px}
.ma-stat-s .n{font-size:30px;font-weight:900;color:var(--brand);text-align:center}
.ma-stat-s .l{font-size:12px;color:#64748b;text-align:center;margin-top:3px}

.ma-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 40px 60px;max-width:1000px;margin:0 auto}
.ma-feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:22px}
.ma-feat-icon{font-size:26px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--brand-bg, rgba(37,99,235,.08));color:var(--brand);}
.ma-feat h3{font-size:14px;font-weight:700;color:#f1f5f9;margin-bottom:6px}
.ma-feat p{font-size:12px;color:#94a3b8;line-height:1.65}

/* ────────────────────────────────────
   AUTH
──────────────────────────────────── */
.ma-auth{background:var(--surf2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.ma-auth-wrap{width:100%;max-width:430px}
.ma-back-btn{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer;margin-bottom:18px;background:none;border:none;padding:0}
.ma-back-btn:hover{color:var(--text)}
.ma-auth-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:34px;box-shadow:0 2px 16px rgba(0,0,0,.06)}
.ma-auth-logo{display:flex;align-items:center;gap:8px;margin-bottom:24px;justify-content:center}
.ma-auth-logo-txt{font-size:18px;font-weight:800;color:var(--text)}
.ma-auth-logo-txt span{color:var(--brand)}
.ma-auth-tabs{display:flex;border-bottom:1px solid var(--bdr);margin-bottom:22px}
.ma-auth-tab{flex:1;padding:10px;text-align:center;cursor:pointer;font-size:13px;color:var(--muted);border-bottom:2.5px solid transparent;transition:all .12s;font-weight:500}
.ma-auth-tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
.ma-auth-title{font-size:20px;font-weight:800;margin-bottom:3px}
.ma-auth-sub{font-size:13px;color:var(--muted);margin-bottom:20px}
.ma-auth-hint{text-align:center;font-size:12px;color:var(--hint);margin-top:13px}

/* ────────────────────────────────────
   SETUP WIZARD
──────────────────────────────────── */
.ma-setup{background:var(--surf2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.ma-setup-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:34px;width:100%;max-width:520px;box-shadow:0 2px 16px rgba(0,0,0,.06)}
.ma-steps{display:flex;gap:6px;margin-bottom:26px}
.ma-step-dot{flex:1;height:4px;border-radius:2px;background:var(--bdr);transition:background .3s}
.ma-step-dot.done{background:var(--brand)}
.ma-setup-ttl{font-size:20px;font-weight:800;margin-bottom:4px}
.ma-setup-sub{font-size:13px;color:var(--muted);margin-bottom:20px}
.ma-setup-step{display:none}.ma-setup-step.on{display:block}

/* ────────────────────────────────────
   FORM ELEMENTS
──────────────────────────────────── */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:8px;font-size:14px;color:var(--text);background:var(--surf);outline:none;font-family:inherit;transition:border-color .12s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fg input[readonly]{background:var(--surf2)!important;color:var(--hint)!important;cursor:default!important;border-color:var(--bdr)!important;user-select:none!important;pointer-events:none}
.fg input[readonly]:focus{border-color:var(--bdr)!important;box-shadow:none!important;outline:none!important}
/* v3.9.803 — the Invoice / Bill No. box was greyed out and carried
   pointer-events:none, so it could not be clicked into at all. It is
   an ordinary field now: type a number to choose one, or leave it and
   the next free number is filled in. A saved document still locks it
   through the [readonly] rule above. */
#b-invno,#pu-invno{background:var(--surf)!important;color:var(--text)!important;cursor:text!important;pointer-events:auto!important;user-select:text!important}
#b-invno[readonly],#pu-invno[readonly]{background:var(--surf2)!important;color:var(--hint)!important;cursor:default!important;pointer-events:none!important}
.fg-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ────────────────────────────────────
   BUTTONS
──────────────────────────────────── */
.btn-full{width:100%;padding:11px;background:var(--brand);color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-full:hover{background:var(--brand-d)}
.ma-btn{padding:8px 16px;border:1.5px solid var(--bdr);border-radius:8px;background:var(--surf);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit}
.ma-btn:hover{background:var(--surf3)}
.ma-btn.p{background:var(--brand);color:#fff;border-color:var(--brand)}.ma-btn.p:hover{background:var(--brand-d)}
.ma-btn.e{background:#fef3c7;color:#92400e;border-color:#fde68a}.ma-btn.e:hover{background:#fde68a}
.ma-btn.s{background:var(--green-bg);color:var(--green);border-color:var(--green-bg)}
.ma-btn.d{background:var(--red-bg);color:var(--red);border-color:var(--red-bg)}
.ma-btn.dl{background:#f0fdf4;color:#0EA5E9;border-color:#BAE6FD}.ma-btn.dl:hover{background:#E0F2FE}
.ma-btn.sm{padding:5px 11px;font-size:12px;border-radius:6px}

/* ────────────────────────────────────
   APP SHELL
──────────────────────────────────── */
.ma-app{display:flex;flex-direction:column;min-height:100vh}

/* ── GREEN HEADER BAR ── */
.ma-topbar{height:58px;background:var(--header);background:linear-gradient(180deg,var(--header) 0%,var(--header-d) 100%);display:flex;align-items:center;padding:0 22px;gap:14px;position:sticky;top:0;z-index:80;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.ma-topbar-logo{display:flex;align-items:center;gap:10px}
.ma-topbar-biz{font-size:15px;font-weight:800;color:#fff;line-height:1.1}
.ma-topbar-type{font-size:11px;color:rgba(255,255,255,.78);line-height:1.2}
/* centered clock in green header */
/* ══════════════════════════════════════════════════════════════════════
   v3.9.320 — Global search + Ask AI button (replaces the header clock)
════════════════════════════════════════════════════════════════════════ */
/* v3.9.716 — the search and Ask AI sit in the bar's own row rather than
   floating over it. Pinned in the middle with position:absolute they took no
   part in the layout, so on anything but a very wide screen the Ask AI button
   ran into the Create button beside it. */
.ma-topbar-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  max-width:560px;
  margin:0 auto;
}
.ma-topbar-search{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  padding:0 10px 0 34px;
  height:38px;
  transition:background .15s, border-color .15s;
}
.ma-topbar-search:hover{ background:rgba(255,255,255,.20); }
.ma-topbar-search:focus-within{
  background:#ffffff;
  border-color:#ffffff;
}
.ma-topbar-search:focus-within .ma-search-ico{ color:#64748B; }
.ma-topbar-search:focus-within input{ color:#111827; }
.ma-topbar-search:focus-within input::placeholder{ color:#9CA3AF; }
.ma-search-ico{
  position:absolute;
  left:11px; top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.75);
  pointer-events:none;
  transition:color .15s;
}
.ma-topbar-search input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#ffffff;
  font-size:13.5px;
  font-family:inherit;
  height:100%;
  padding:0;
  min-width:0;
}
.ma-topbar-search input::placeholder{ color:rgba(255,255,255,.68); font-weight:500; }
.ma-search-clear{
  background:none; border:none; cursor:pointer;
  color:#64748B; padding:4px; margin-right:-4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.ma-search-clear:hover{ background:#F3F4F6; color:#111827; }
.ma-search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  background:#ffffff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(15,23,42,.14);
  max-height:60vh;
  overflow-y:auto;
  z-index:100;
  display:none;
}
.ma-search-results.on{ display:block; }
.ma-search-sec{
  padding:6px 8px;
  border-top:1px solid #F3F4F6;
}
.ma-search-sec:first-child{ border-top:none; }
.ma-search-sec-h{
  font-size:10.5px;
  font-weight:700;
  color:#9CA3AF;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:8px 12px 4px;
}
.ma-search-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  cursor:pointer;
  border-radius:6px;
  font-size:13px;
  color:#111827;
}
.ma-search-item:hover, .ma-search-item.focus{
  background:var(--brand-bg);
  color:var(--brand-d);
}
.ma-search-item-ico{
  width:28px; height:28px;
  border-radius:7px;
  background:#F3F4F6;
  color:#64748B;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-search-item:hover .ma-search-item-ico,
.ma-search-item.focus .ma-search-item-ico{
  background:var(--brand-bg2);
  color:var(--brand);
}
.ma-search-item-txt{ flex:1; min-width:0; }
.ma-search-item-name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-search-item-meta{
  font-size:11.5px;
  color:#9CA3AF;
  font-weight:500;
  margin-top:1px;
}
.ma-search-empty{
  padding:24px 16px;
  text-align:center;
  color:#9CA3AF;
  font-size:13px;
}

/* Ask AI button — animated gradient border pill matching the reference image */
.ma-ask-ai-btn{
  position:relative;
  height:38px;
  border-radius:10px;
  padding:2px;
  /* Animated gradient — moves the colour band across the border on hover */
  background:linear-gradient(90deg, var(--brand) 0%, #7C3AED 33%, #EC4899 66%, var(--brand) 100%);
  background-size:200% 100%;
  animation:aiBorderShift 3.6s linear infinite;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .14s, box-shadow .14s, filter .14s;
  overflow:hidden;
}
.ma-ask-ai-btn::before{
  /* Soft glow behind the button that pulses gently */
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--brand),#7C3AED,#EC4899);
  filter:blur(10px);
  opacity:.25;
  z-index:-1;
  animation:aiGlowPulse 2.8s ease-in-out infinite;
}
.ma-ask-ai-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.15);
  box-shadow:0 6px 20px rgba(124,58,237,.4);
  animation-duration:1.4s;                     /* border cycles faster on hover */
}
.ma-ask-ai-btn:hover::before{ opacity:.55; }
.ma-ask-ai-inner{
  display:flex;
  align-items:center;
  gap:6px;
  height:100%;
  padding:0 16px;
  background:#ffffff;
  border-radius:8px;
  color:#111827;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
/* Subtle diagonal shimmer sweeping across the button surface */
.ma-ask-ai-inner::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(124,58,237,.14) 45%, rgba(236,72,153,.18) 55%, transparent 100%);
  transform:skewX(-18deg);
  animation:aiShimmer 3.4s ease-in-out infinite;
  pointer-events:none;
}
.ma-ask-ai-ico{
  flex-shrink:0;
  animation:aiIconSpin 6s ease-in-out infinite;
  transform-origin:center;
}
.ma-ask-ai-txt{
  background:linear-gradient(90deg,var(--brand),#7C3AED,#EC4899,var(--brand));
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:aiTextShift 3.6s linear infinite;
}
@keyframes aiBorderShift{
  0%   { background-position:  0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes aiTextShift{
  0%   { background-position:  0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes aiGlowPulse{
  0%,100% { opacity:.20; transform:scale(1); }
  50%     { opacity:.35; transform:scale(1.04); }
}
@keyframes aiShimmer{
  0%   { left:-60%; }
  60%  { left:120%; }
  100% { left:120%; }
}
@keyframes aiIconSpin{
  0%, 80%, 100% { transform:rotate(0deg) scale(1); }
  85%           { transform:rotate(15deg) scale(1.15); }
  90%           { transform:rotate(-10deg) scale(1.1); }
  95%           { transform:rotate(0deg) scale(1); }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ma-ask-ai-btn,
  .ma-ask-ai-btn::before,
  .ma-ask-ai-inner::after,
  .ma-ask-ai-ico,
  .ma-ask-ai-txt{ animation:none !important; }
}

/* Ask AI CTA inside the empty-search-state */
.ma-search-ask-ai{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border:none;
  border-radius:8px;
  background:linear-gradient(90deg,var(--brand),#7C3AED,#EC4899);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:transform .12s, box-shadow .12s;
}
.ma-search-ask-ai:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(124,58,237,.32);
}

/* Mobile: hide search in favor of dedicated icon */
@media(max-width:920px){
  .ma-topbar-search-wrap{
    position:static;
    transform:none;
    width:auto;
    max-width:none;
    margin-left:auto;
    order:5;
  }
  .ma-topbar-search{ display:none; }
  .ma-ask-ai-inner{ padding:0 12px; font-size:12.5px; }
}
@media(max-width:640px){
  .ma-ask-ai-txt{ display:none; }
  .ma-ask-ai-inner{ padding:0 10px; }
}

/* v3.9.322 — Removed the custom .ma-ai-pg full-page CSS —
   it conflicted with the existing Billing Saathi Chat panel which
   uses the same .ma-ai-* namespace. Ask AI button now opens the
   existing chatbot in fullpage mode. */


.ma-topbar-clock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;user-select:none;text-align:center;display:none}
.ma-clock-time{font-size:18px;font-weight:800;letter-spacing:.4px;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.ma-clock-ampm{font-size:11px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.5px;vertical-align:middle;margin-left:2px}
.ma-clock-meta{display:flex;align-items:center;gap:5px;margin-top:1px}
.ma-clock-day{font-size:11px;font-weight:700;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.6px}
.ma-clock-sep{font-size:11px;color:rgba(255,255,255,.6)}
.ma-clock-date{font-size:11px;color:rgba(255,255,255,.85);font-weight:600}
/* keep the centered clock clear of the right cluster on narrower desktops */
@media(max-width:1280px){.ma-gst-tag{display:none!important}}
@media(max-width:1080px){.ma-topbar-user{display:none!important}}
@media(max-width:920px) and (min-width:769px){.ma-topbar-clock{display:none}}
.ma-topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.ma-gst-tag{font-size:11px;background:rgba(255,255,255,.18);color:#fff;padding:3px 10px;border-radius:20px;font-weight:700}
.ma-topbar-user{font-size:12px;color:rgba(255,255,255,.92);font-weight:600}
/* Create button + FY pill in header */
.ma-create-wrap{position:relative}
.ma-hd-create{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--brand-dd);border:none;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ma-hd-create:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.ma-create-caret{transition:transform .18s;margin-left:1px}
.ma-create-wrap.open .ma-create-caret{transform:rotate(180deg)}
.ma-create-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:#fff;border:1px solid var(--bdr);border-radius:12px;box-shadow:0 12px 34px rgba(15,23,42,.18);padding:6px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .14s,transform .14s,visibility .14s}
.ma-create-wrap.open .ma-create-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.ma-create-menu::before{content:"";position:absolute;top:-6px;right:20px;width:12px;height:12px;background:#fff;border-left:1px solid var(--bdr);border-top:1px solid var(--bdr);transform:rotate(45deg)}
.ma-create-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:background .1s,color .1s;position:relative;z-index:1}
.ma-create-item svg{color:var(--brand);flex-shrink:0}
.ma-create-item:hover{background:var(--brand-bg);color:var(--brand-dd)}
.ma-create-item:hover svg{color:var(--brand-dd)}
.ma-create-sep{height:1px;background:var(--surf3);margin:5px 10px}
.ma-hd-fy{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background .12s}
.ma-hd-fy:hover{background:rgba(255,255,255,.26)}
.ma-fy-wrap{position:relative}
.ma-fy-caret{transition:transform .18s}
.ma-fy-wrap.open .ma-fy-caret{transform:rotate(180deg)}
.ma-fy-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:170px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--bdr);border-radius:12px;box-shadow:0 12px 34px rgba(15,23,42,.18);padding:6px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .14s,transform .14s,visibility .14s}
.ma-fy-wrap.open .ma-fy-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.ma-fy-item{display:block;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap}
.ma-fy-item:hover{background:var(--brand-bg);color:var(--brand-dd)}
.ma-fy-item.active{background:var(--brand-bg);color:var(--brand-dd)}
.ma-fy-item.active::after{content:"✓";float:right;font-weight:800}

/* ── Header avatar button ── */
.ma-hd-avatar{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--brand-dd);border:2px solid rgba(255,255,255,.5);font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.3px;transition:transform .12s,box-shadow .12s;flex-shrink:0}
.ma-hd-avatar:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.2)}

/* ── Account / profile slide-in drawer ── */
.ma-pd-overlay{position:fixed;inset:0;background:rgba(15,40,34,.42);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:300}
.ma-pd-overlay.show{opacity:1;visibility:visible}
.ma-profile-drawer{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;background:var(--surf);box-shadow:-12px 0 40px rgba(15,23,42,.18);z-index:310;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:18px}
.ma-profile-drawer.open{transform:translateX(0)}
.ma-pd-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--surf3);margin-bottom:14px}
.ma-pd-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dd));color:#fff;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-pd-id{flex:1;min-width:0}
.ma-pd-name{font-size:15px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-pd-role{font-size:12px;color:var(--muted)}
.ma-pd-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--surf3);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;transition:background .12s}
.ma-pd-close:hover{background:var(--bdr);color:var(--text)}
.ma-pd-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ma-pd-link{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1px solid var(--bdr);border-radius:10px;background:var(--surf);color:var(--brand-dd);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s}
.ma-pd-link:hover{background:var(--brand-bg);border-color:var(--brand)}
.ma-pd-logout{color:var(--red)}
.ma-pd-logout:hover{background:var(--red-bg);border-color:var(--red)}
.ma-pd-stat{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--bdr);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:background .12s}
.ma-pd-stat:hover{background:var(--surf2)}
.ma-pd-stat-ic{color:var(--brand);display:inline-flex}
.ma-pd-stat-k{font-size:13px;font-weight:600;color:var(--text)}
.ma-pd-stat-v{margin-left:auto;font-size:13px;font-weight:800;color:var(--brand-dd)}
.ma-pd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}
.ma-pd-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border:1px solid var(--bdr);border-radius:12px;background:var(--surf);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,transform .12s}
.ma-pd-tile svg{color:var(--brand)}
.ma-pd-tile:hover{background:var(--brand-bg);border-color:var(--brand);transform:translateY(-1px)}
.ma-pd-section{font-size:11px;font-weight:800;color:var(--hint);text-transform:uppercase;letter-spacing:.6px;margin:16px 4px 8px}
.ma-pd-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:none;background:none;border-radius:10px;color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;text-align:left;transition:background .12s}
.ma-pd-item svg{color:var(--muted);flex-shrink:0}
.ma-pd-item:hover{background:var(--surf2)}
.ma-pd-item:hover svg{color:var(--brand)}
.ma-pd-chev{margin-left:auto;color:var(--hint);font-size:18px;font-weight:700}
.ma-pd-support{display:flex;align-items:flex-start;gap:11px;padding:14px;background:var(--surf2);border-radius:12px;margin-top:6px}
.ma-pd-support svg{color:var(--brand);flex-shrink:0;margin-top:2px}
.ma-pd-support-h{font-size:13px;font-weight:700;color:var(--text)}
.ma-pd-support-p{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:480px){.ma-profile-drawer{width:100%;max-width:100%}}

/* ── Ledger ── */
.ma-led-filters{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:14px;align-items:end}
.ma-led-tbl td,.ma-led-tbl th{white-space:nowrap}
.ma-led-tbl tbody tr:last-child{font-weight:600}
@media(max-width:680px){.ma-led-filters{grid-template-columns:1fr}}

/* Top-level ledger tabs (Party / Account) */
.ma-led-tabs{display:flex;gap:4px;background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;padding:4px;margin-bottom:14px;width:fit-content}
.ma-led-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:none;background:none;border-radius:7px;color:var(--muted);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.ma-led-tab svg{flex-shrink:0}
.ma-led-tab:hover{color:var(--text)}
.ma-led-tab.on{background:var(--surf);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ma-led-pane{display:none}
.ma-led-pane.on{display:block}

/* Customer / Supplier and Account sub-tabs */
.ma-led-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.ma-led-subtab{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1.5px solid var(--bdr);background:var(--surf);border-radius:20px;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.ma-led-subtab:hover{border-color:var(--brand);color:var(--brand)}
.ma-led-subtab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.ma-led-subtab.on .ma-led-subtab-dot{background:#fff}
.ma-led-subtab-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.ma-led-subtab-dot.bg-b{background:#3b82f6}
.ma-led-subtab-dot.bg-r{background:#ef4444}

.ma-acct-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid var(--bdr);background:var(--surf);border-radius:7px;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.ma-acct-tab svg{flex-shrink:0}
.ma-acct-tab:hover{border-color:var(--brand);color:var(--brand)}
.ma-acct-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ────────────────────────────────────────────────────────────────
   Company Ledger — Report  (redesigned to match target mockup)
   ──────────────────────────────────────────────────────────────── */

/* Card */
.ma-clr-card{padding:22px 26px;margin-bottom:22px;position:relative}
.ma-clr-hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ma-clr-title{font-size:15px;font-weight:800;color:var(--text)}
.ma-clr-hdr-actions{display:flex;gap:10px;flex-wrap:wrap}
.ma-clr-toggle-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-size:13px}
.ma-clr-toggle-btn.on{background:var(--brand-bg);color:var(--brand-dd);border-color:var(--brand)}

/* Primary filter grid — 4 across on desktop, wraps down on smaller screens */
.ma-clr-filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 22px;margin-bottom:6px}
.ma-clr-filter-grid .fg{margin:0}
.ma-clr-filter-grid .fg label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.ma-clr-filter-grid input[type="text"],
.ma-clr-filter-grid input[type="date"],
.ma-clr-filter-grid select{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:6px;font-size:13.5px;color:var(--text);background:var(--surf);outline:none;font-family:inherit;transition:border-color .12s}
.ma-clr-filter-grid input:focus,
.ma-clr-filter-grid select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-clr-fg-wide{grid-column:span 1}

@media(max-width:1100px){.ma-clr-filter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ma-clr-filter-grid{grid-template-columns:1fr}}

/* Customer/Vendor tag-input */
.ma-clr-tag-input{position:relative;min-height:40px;border:1.5px solid var(--bdr);border-radius:6px;background:var(--surf);padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text;transition:border-color .12s}
.ma-clr-tag-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-clr-tags{display:contents}
.ma-clr-tag{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:600;padding:4px 8px 4px 10px;border-radius:4px;white-space:nowrap;line-height:1.3}
.ma-clr-tag-x{cursor:pointer;font-weight:700;font-size:14px;line-height:1;opacity:.9;padding:0 2px}
.ma-clr-tag-x:hover{opacity:1}
.ma-clr-tag-typer{flex:1;min-width:120px;border:none;outline:none;background:transparent;font-size:13.5px;padding:4px 2px;font-family:inherit;color:var(--text)}
.ma-clr-tag-drop{position:absolute;top:100%;left:0;right:0;background:var(--surf);border:1.5px solid var(--bdr);border-top:none;border-radius:0 0 6px 6px;box-shadow:0 8px 20px rgba(0,0,0,.08);max-height:280px;overflow-y:auto;z-index:20;display:none;margin-top:-1px}
.ma-clr-tag-drop.open{display:block}
.ma-clr-tag-list{padding:4px 0}
.ma-clr-tag-opt{padding:9px 12px;cursor:pointer;font-size:13px;color:var(--text);border-bottom:1px solid var(--surf3)}
.ma-clr-tag-opt:last-child{border-bottom:none}
.ma-clr-tag-opt:hover,.ma-clr-tag-opt.hi{background:var(--brand-bg);color:var(--brand-dd)}
.ma-clr-tag-opt.special{font-style:italic;color:var(--muted)}
.ma-clr-tag-opt.special:hover{color:var(--brand-dd)}
.ma-clr-tag-empty{padding:12px;text-align:center;color:var(--muted);font-size:12.5px}
.ma-clr-tag-opt-sub{font-size:11px;color:var(--muted);margin-top:2px}

/* Collapsible panels */
.ma-clr-panel{border-top:1px solid var(--bdr);padding:16px 0 4px;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ma-clr-panel-hdr{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ma-clr-panel-title{font-size:13px;font-weight:700;color:var(--text)}
.ma-clr-panel-cust{margin-top:14px}

/* Checkbox rows */
.ma-clr-chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--brand-dd);cursor:pointer;padding:2px 0}
.ma-clr-chk input[type="checkbox"]{margin:0;width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.ma-clr-chk span{line-height:1.4}

/* Customize-columns 5-column grid */
.ma-clr-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 16px;padding:4px 0 6px}
@media(max-width:1100px){.ma-clr-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ma-clr-cols{grid-template-columns:repeat(2,1fr)}}

/* Search button row */
.ma-clr-search-row{display:flex;justify-content:flex-end;margin-top:22px;padding-top:6px}
.ma-clr-search-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;font-size:13.5px;font-weight:700}

/* ─── Output card ─── */
.ma-clr-out-card{padding:26px 30px;margin-bottom:80px}
.ma-clr-biz{margin-bottom:18px}
.ma-clr-biz-name{font-size:15px;font-weight:800;color:var(--text)}
.ma-clr-biz-line{font-size:13px;color:var(--text);line-height:1.5}
.ma-clr-out-title{text-align:center;font-size:16px;font-weight:700;color:var(--text);margin:8px 0 4px}
.ma-clr-out-date{text-align:center;font-size:12.5px;color:var(--muted);margin-bottom:20px}

.ma-clr-tbl-wrap{overflow-x:auto}
.ma-clr-tbl{width:100%;border-collapse:collapse}
.ma-clr-tbl thead th{text-align:left;padding:10px 12px;font-size:12px;font-weight:700;color:var(--text);border-bottom:1.5px solid var(--text);background:transparent;text-transform:none}
.ma-clr-tbl tbody td{padding:14px 12px;font-size:13px;color:var(--text);vertical-align:top;border:none}
.ma-clr-tbl tbody tr{border-bottom:none}
.ma-clr-tbl tbody .clr-part-main{font-weight:700}
.ma-clr-tbl tbody .clr-part-sub{color:var(--muted);font-size:12px;margin-top:2px}
.ma-clr-tbl tbody .clr-inv-link{color:var(--brand);text-decoration:none;font-weight:600}
.ma-clr-tbl tbody .clr-inv-link:hover{text-decoration:underline}
.ma-clr-tbl tfoot .clr-tot-row td{border-top:1px solid var(--text);padding:14px 12px;font-weight:700;font-size:13px}
.ma-clr-tbl tfoot .clr-close-row td{padding:14px 12px;font-weight:600;font-size:13px;border-top:1px solid var(--text)}
.ma-clr-tbl .r{text-align:right}

/* Floating action bar (Print / E-Mail / Export / Download) */
.ma-clr-actionbar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111827;border-radius:10px;padding:8px;display:inline-flex;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:50}
.ma-clr-act-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;color:#fff;cursor:pointer;font-family:inherit;transition:filter .12s}
.ma-clr-act-btn:hover{filter:brightness(1.1)}
.ma-clr-act-btn svg{flex-shrink:0}
.ma-clr-act-print{background:var(--brand)}
.ma-clr-act-mail{background:#ef4444}
.ma-clr-act-export{background:#0ea5e9}
.ma-clr-act-dl{background:#f59e0b}

@media print{.ma-clr-actionbar{display:none!important}}

/* ────────────────────────────────────────────────────────────────
   Dashboard Analytics Redesign — v3.9.278
   ──────────────────────────────────────────────────────────────── */

.ma-dash2{margin-bottom:22px}

/* ── Top header row: Last Updated · Date Range · Refresh ── */
.ma-dash2-hdr{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.ma-dash2-lu{font-size:13px;color:var(--muted)}
.ma-dash2-lu span{color:var(--text);font-weight:600}
.ma-dash2-dp-wrap{position:relative}
.ma-dash2-dr{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .12s}
.ma-dash2-dr:hover{filter:brightness(1.05)}
.ma-dash2-refresh{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter .12s}
.ma-dash2-refresh:hover{filter:brightness(1.05)}
.ma-dash2-refresh svg{transition:transform .5s ease}
.ma-dash2-refresh.spin svg{transform:rotate(360deg)}

/* ── Date picker popup ── */
.ma-dash2-dp{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.15);z-index:100;display:flex;flex-direction:column;overflow:hidden;min-width:720px}
.ma-dash2-dp{display:flex}
.ma-dash2-dp[style*="display: none"], .ma-dash2-dp[style*="display:none"]{display:none!important}
.ma-dash2-dp-side{background:#fff;border-right:1px solid #eef0f2;padding:10px 0;min-width:150px}
.ma-dash2-dp-preset{padding:9px 20px;font-size:13px;color:var(--text);cursor:pointer;transition:background .12s}
.ma-dash2-dp-preset:hover,.ma-dash2-dp-preset.active{background:var(--brand-bg);color:var(--brand-dd);font-weight:600}
.ma-dash2-dp-cals{display:flex;padding:16px;gap:22px;flex:1}
.ma-dash2-cal{min-width:250px}
.ma-dash2-cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:6px}
.ma-dash2-cal-nav{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:var(--text)}
.ma-dash2-cal-nav:hover{background:#f0f2f4}
.ma-dash2-cal-mon,.ma-dash2-cal-yr{position:relative;font-size:14px;font-weight:600;padding:4px 22px 4px 8px;cursor:pointer;border-radius:4px;background:none;border:none;color:var(--text);font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.ma-dash2-cal-mon::after,.ma-dash2-cal-yr::after{content:'▾';position:absolute;right:6px;font-size:10px;color:var(--muted)}
.ma-dash2-cal-mon:hover,.ma-dash2-cal-yr:hover{background:#f0f2f4}
.ma-dash2-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ma-dash2-cal-dow{text-align:center;font-size:11px;color:var(--muted);font-weight:600;padding:6px 0}
.ma-dash2-cal-day{text-align:center;padding:8px 0;font-size:12.5px;cursor:pointer;border-radius:4px;color:var(--text);position:relative}
.ma-dash2-cal-day.empty{visibility:hidden}
.ma-dash2-cal-day:hover:not(.empty){background:#e6f5f0}
.ma-dash2-cal-day.in{background:var(--brand-bg2);color:var(--brand-dd)}
.ma-dash2-cal-day.start,.ma-dash2-cal-day.end{background:var(--brand);color:#fff;font-weight:700}
.ma-dash2-cal-day.today{outline:1px dashed var(--brand);outline-offset:-2px}

/* Month/Year dropdown (inline picker) */
.ma-dash2-cal-picker{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--bdr);border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.1);z-index:5;padding:6px;max-height:220px;overflow-y:auto;min-width:100px}
.ma-dash2-cal-picker-item{padding:6px 10px;font-size:13px;cursor:pointer;border-radius:4px;color:var(--text)}
.ma-dash2-cal-picker-item:hover,.ma-dash2-cal-picker-item.active{background:var(--brand-bg);color:var(--brand-dd);font-weight:600}

.ma-dash2-dp-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #eef0f2;gap:12px}
.ma-dash2-dp-sel{font-size:13px;color:var(--text);font-weight:600}
.ma-dash2-dp-btns{display:flex;gap:8px}
.ma-dash2-dp-cancel{background:#fff;border:1px solid var(--bdr);color:var(--text);border-radius:6px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ma-dash2-dp-cancel:hover{background:#f0f2f4}
.ma-dash2-dp-apply{background:var(--brand);border:none;color:#fff;border-radius:6px;padding:7px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ma-dash2-dp-apply:hover{filter:brightness(1.05)}

/* ── Three top cards ── */
.ma-dash2-topcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px}
@media(max-width:1100px){.ma-dash2-topcards{grid-template-columns:1fr}}

/* v3.9.282 — top cards match target spacing (padding, height, chart proportions) */
.ma-dash2-tc{padding:24px 28px;min-height:210px;display:flex;flex-direction:column}
.ma-dash2-tc-hdr{font-size:15px;font-weight:700;color:var(--text);margin-bottom:18px}
.ma-dash2-tc-body{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex:1}
.ma-dash2-tc-left{min-width:0;flex-shrink:0}
.ma-dash2-tc-month{font-size:13px;color:var(--text);margin-bottom:8px}
.ma-dash2-tc-amt{font-size:26px;font-weight:800;color:var(--text);white-space:nowrap;letter-spacing:-.3px;line-height:1.1}
.ma-dash2-tc-gst{font-size:12.5px;color:var(--muted);margin-top:8px}
.ma-dash2-tc-gst span{color:var(--brand);font-weight:600}
/* Chart takes right half; fills full available width for a fat-bar sparkline */
.ma-dash2-tc-chart{flex:1;min-width:200px;max-width:280px;height:110px;position:relative;align-self:flex-end}
.ma-dash2-tc-chart svg{width:100%;height:100%;display:block;overflow:visible}
.ma-dash2-tc-bar{fill:#93C5FD;transition:fill .15s;cursor:pointer}
.ma-dash2-tc-bar.on{fill:var(--brand)}
.ma-dash2-tc-bar:hover{fill:var(--brand)}
.ma-dash2-tc-tip{position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:10px 12px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:10;pointer-events:none;min-width:210px;display:none}
.ma-dash2-tc-tip.on{display:block}
.ma-dash2-tc-tip-h{font-weight:600;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #eef0f2;color:var(--text)}
.ma-dash2-tc-tip-r{display:flex;justify-content:space-between;gap:16px;padding:2px 0;color:var(--text)}
.ma-dash2-tc-tip-r b{font-weight:600}

/* v3.9.283 — Expense/Income chart-type toggle + bar view + tooltip variants */
.ma-dash2-ei-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);color:var(--muted);cursor:pointer;padding:0;margin-left:6px;transition:all .15s}
.ma-dash2-ei-toggle:hover{border-color:var(--brand);color:var(--brand)}
.ma-dash2-ei-toggle svg{display:block}

/* Bar view (mirrors sale/purchase mini-bar with fatter last bar) */
.ma-dash2-ei-bars{position:relative;flex:1;display:flex;justify-content:center;align-items:flex-end;height:140px}
.ma-dash2-ei-bars svg{width:100%;max-width:280px;height:100%;display:block;overflow:visible}
.ma-dash2-ei-bar{fill:#93C5FD;transition:fill .15s;cursor:pointer}
.ma-dash2-ei-bar.on{fill:var(--brand)}
.ma-dash2-ei-bar:hover{fill:var(--brand)}
.ma-dash2-ei-empty{color:var(--muted);font-size:13px;padding:40px 0;text-align:center;width:100%}

/* Donut-view tooltip — green pill (matches target Image 1) */
.ma-dash2-ei-tip-donut{background:var(--brand);color:#fff;border-radius:6px;padding:8px 12px;font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap;min-width:0}

/* Bar-view tooltip — white card with header + rows (matches target Image 2) */
.ma-dash2-ei-tip-bar{background:#fff;color:var(--text);border:1px solid #e5e7eb;border-radius:6px;padding:10px 12px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:220px;white-space:nowrap}
.ma-dash2-ei-tip-bar .ma-dash2-ei-tip-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #eef0f2;font-weight:600}
.ma-dash2-ei-tip-bar .ma-dash2-ei-tip-h b{font-weight:600}
.ma-dash2-ei-tip-r{display:flex;align-items:center;gap:8px;padding:3px 0}
.ma-dash2-ei-tip-r b{margin-left:auto;font-weight:600}
.ma-dash2-ei-tip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* Expense / Income card — v3.9.282 matches target: bigger donut, values below-left/right */
.ma-dash2-ei-hdr{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--text);margin-bottom:18px}
.ma-dash2-ei-hdr-r{display:flex;align-items:center;gap:8px}
.ma-dash2-ei-body{display:flex;align-items:center;justify-content:center;flex:1;position:relative;min-height:140px}
.ma-dash2-ei-donut{position:relative;display:flex;justify-content:center;align-items:center}
.ma-dash2-ei-donut svg{width:140px;height:140px;overflow:visible;display:block}
.ma-dash2-ei-slice{transition:opacity .15s;cursor:pointer}
.ma-dash2-ei-slice:hover{opacity:.85}
/* Absolutely positioned value labels flanking the donut, matching the target */
.ma-dash2-ei-legend{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0 18px}
.ma-dash2-ei-lval,.ma-dash2-ei-rval{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap}
.ma-dash2-ei-tip{position:absolute;background:var(--brand);color:#fff;border-radius:6px;padding:7px 12px;font-size:12.5px;font-weight:600;z-index:10;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ma-dash2-ei-tip.on{display:block}

/* ── Outstanding cards ── */
.ma-dash2-outrow{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
@media(max-width:900px){.ma-dash2-outrow{grid-template-columns:1fr}}

/* v3.9.302 — polished outstanding-card spacing + typography (matches target
   image from the initial dashboard-redesign brief exactly). */
.ma-dash2-oc{padding:22px 26px 24px}
.ma-dash2-oc-hdr{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px}
.ma-dash2-oc-hdr svg{color:var(--muted);cursor:pointer}
.ma-dash2-oc-hdr svg:hover{color:var(--brand)}
.ma-dash2-oc-nofilter{display:inline-flex;align-items:center;color:var(--muted);cursor:help;position:relative;padding:2px}
.ma-dash2-oc-nofilter:hover{color:var(--brand)}
.ma-dash2-oc-total{font-size:13.5px;color:var(--muted);margin-bottom:10px;font-weight:500}
.ma-dash2-oc-total b{color:var(--text);font-weight:700;margin-left:6px;font-size:14.5px}
.ma-dash2-oc-bar{width:100%;height:10px;background:#eef0f2;border-radius:5px;overflow:hidden;margin-bottom:22px}
.ma-dash2-oc-fill{height:100%;background:var(--brand);border-radius:5px;transition:width .4s ease}
.ma-dash2-oc-legend{display:grid;grid-template-columns:1fr 3fr;gap:22px;align-items:start}
.ma-dash2-oc-col{min-width:0}
.ma-dash2-oc-lbl{font-size:12px;font-weight:700;color:var(--text);margin-bottom:11px;letter-spacing:.6px;text-transform:uppercase}
.ma-dash2-oc-item{display:flex;align-items:center;gap:9px}
/* v3.9.302 — bigger, more visible dots with subtle shadow for depth */
.ma-dash2-oc-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.ma-dash2-oc-item b{font-weight:700;font-size:14.5px;color:var(--text);letter-spacing:-.2px}
.ma-dash2-oc-ovd{border-left:1px dashed #d5d8dc;padding-left:22px}
.ma-dash2-oc-ovd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ma-dash2-oc-ovd-i{min-width:0}
.ma-dash2-oc-sub{font-size:11.5px;color:var(--muted);margin-top:6px;padding-left:20px;font-weight:500}

/* v3.9.302 — mobile-tuned outstanding cards: at ≤640px the OVERDUE column
   drops beneath CURRENT with a top separator, and the 3 aging buckets stay
   in a row but tighten to fit. */
@media(max-width:640px){
  .ma-dash2-oc{padding:18px 18px 20px}
  .ma-dash2-oc-hdr{font-size:14px}
  .ma-dash2-oc-total{font-size:12.5px}
  .ma-dash2-oc-total b{font-size:13.5px}
  .ma-dash2-oc-bar{margin-bottom:18px}
  .ma-dash2-oc-legend{grid-template-columns:1fr;gap:14px}
  .ma-dash2-oc-ovd{border-left:none;padding-left:0;border-top:1px dashed #d5d8dc;padding-top:14px}
  .ma-dash2-oc-lbl{font-size:11px;margin-bottom:9px}
  .ma-dash2-oc-item b{font-size:13.5px}
  .ma-dash2-oc-sub{font-size:11px;padding-left:0;text-align:center}
  .ma-dash2-oc-ovd-row{gap:10px}
  .ma-dash2-oc-ovd-i{display:flex;flex-direction:column;align-items:center}
  .ma-dash2-oc-ovd-i .ma-dash2-oc-item{flex-direction:column;gap:4px}
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.307 — REDESIGNED Outstanding cards (new ma-oc2 namespace)
   Modern KPI-style with icon badge, meta info, segmented aging bar,
   and 4-cell equal-width grid. Replaces the previous split layout.
════════════════════════════════════════════════════════════════════════ */
.ma-oc2{
  padding:22px 24px 22px;
  border-radius:14px;
  border:1px solid var(--bdr);
  background:var(--surf);
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.ma-oc2:hover{box-shadow:0 6px 18px rgba(15,23,42,.06)}

/* Header: icon + title + meta on the left, status pill on the right */
.ma-oc2-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.ma-oc2-hdr-l{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1}
.ma-oc2-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-oc2-sale .ma-oc2-icon{background:rgba(37,99,235,.10);color:var(--brand)}
.ma-oc2-pur  .ma-oc2-icon{background:rgba(124,58,237,.10);color:#7C3AED}
.ma-oc2-hdr-txt{min-width:0;flex:1}
.ma-oc2-title{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.1px;line-height:1.25;display:flex;align-items:center;gap:6px}
.ma-oc2-info{display:inline-flex;align-items:center;color:var(--hint);cursor:help;position:relative;padding:2px;border-radius:4px;transition:color .12s}
.ma-oc2-info:hover,.ma-oc2-info:focus{color:var(--brand);outline:none}
.ma-oc2-info[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:#0f172a;color:#fff;padding:8px 12px;border-radius:6px;
  font-size:11.5px;font-weight:500;line-height:1.4;width:220px;text-align:left;
  z-index:10;opacity:0;pointer-events:none;transition:opacity .15s;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.ma-oc2-info:hover::after,.ma-oc2-info:focus::after{opacity:1}
.ma-oc2-meta{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}
.ma-oc2-meta span{color:var(--text);font-weight:600}

/* Status pill — colour depends on overdue proportion */
.ma-oc2-status{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:14px;
  font-size:11px;font-weight:700;background:#f1f5f9;color:#64748b;
  white-space:nowrap;flex-shrink:0;letter-spacing:.2px;text-transform:uppercase;
}
.ma-oc2-status-dot{width:6px;height:6px;border-radius:50%;background:#64748b}
.ma-oc2-status.healthy{background:rgba(14,165,233,.12);color:#0369a1}
.ma-oc2-status.healthy .ma-oc2-status-dot{background:#0EA5E9}
.ma-oc2-status.watch{background:rgba(245,158,11,.14);color:#b45309}
.ma-oc2-status.watch .ma-oc2-status-dot{background:#f59e0b}
.ma-oc2-status.attention{background:rgba(239,68,68,.12);color:#b91c1c}
.ma-oc2-status.attention .ma-oc2-status-dot{background:#ef4444}

/* Big total */
.ma-oc2-amt-row{margin-bottom:16px}
.ma-oc2-amt{
  font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.5px;
  line-height:1.1;font-variant-numeric:tabular-nums;word-break:break-word;
}
.ma-oc2-amt-lbl{font-size:12px;color:var(--muted);margin-top:2px;font-weight:500}

/* Segmented aging bar: widths reflect actual proportions */
.ma-oc2-bar{
  display:flex;width:100%;height:8px;background:#eef0f2;border-radius:6px;
  overflow:hidden;margin-bottom:20px;gap:2px;
}
.ma-oc2-seg{height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:0}
.ma-oc2-seg-cur{background:var(--brand)}
.ma-oc2-seg-o1{background:#f59e0b}
.ma-oc2-seg-o2{background:#f97316}
.ma-oc2-seg-o3{background:#ef4444}
.ma-oc2-seg-empty{flex:1;background:transparent}
.ma-oc2-bar .ma-oc2-seg:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}

/* 4-cell equal-width grid for details */
.ma-oc2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ma-oc2-cell{
  padding:10px 12px 11px;background:#f9fafb;border-radius:9px;min-width:0;
  display:flex;flex-direction:column;gap:5px;transition:background .12s;
}
.ma-oc2-cell:hover{background:#f3f5f7}
.ma-oc2-cell-hdr{display:flex;align-items:center;gap:6px;min-width:0}
.ma-oc2-cell-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ma-oc2-cell-lbl{
  font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ma-oc2-cell-amt{
  font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ma-oc2-cell-pct{font-size:11px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* Responsive */
@media(max-width:1200px){
  .ma-oc2{padding:20px 20px}
  .ma-oc2-amt{font-size:24px}
}
@media(max-width:640px){
  .ma-oc2{padding:18px 16px}
  .ma-oc2-hdr{margin-bottom:14px}
  .ma-oc2-icon{width:34px;height:34px}
  .ma-oc2-title{font-size:13.5px}
  .ma-oc2-amt{font-size:22px}
  .ma-oc2-status{font-size:10px;padding:4px 8px}
  .ma-oc2-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ma-oc2-cell{padding:9px 10px 10px}
  .ma-oc2-cell-amt{font-size:13px}
  .ma-oc2-info[data-tip]::after{width:180px;left:auto;right:0;transform:none}
}
@media(max-width:400px){
  .ma-oc2-amt{font-size:20px}
}
/* ══════════ END v3.9.307 outstanding redesign ══════════════════════ */

/* Contra modal indicator */
.ma-contra-arrow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:14px;padding:10px 14px;background:linear-gradient(135deg,var(--surf2),var(--surf));border:1.5px dashed var(--brand);border-radius:8px}
.ma-contra-arrow-from,.ma-contra-arrow-to{text-align:center;font-size:11px;font-weight:800;color:var(--brand);letter-spacing:1.5px;padding:3px 10px;background:var(--surf);border-radius:4px}
.ma-contra-arrow-mid{font-size:22px;font-weight:800;color:var(--brand);text-align:center;animation:contraPulse 1.6s ease-in-out infinite}
@keyframes contraPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

/* ════════════════════════════════════════════
   SETTINGS — LEFT NAV + SECTION PANELS  (v3.9.38 redesign)
   v3.9.454 — Fix for missing/cut-off sections.
   Previous approach used `height:calc(100vh - 132px)` which was
   wrong: `.ma-set2` lives inside `.ma-main`, which is already the
   scroll container (overflow-y:auto, fills flex parent). `100vh`
   there doesn't equal .ma-main's usable height — the guessed 132px
   offset was too small on some screens, so .ma-set2 overflowed
   past .ma-main's bottom edge and hid the last few nav links and
   the tail of any long right-pane section.

   New approach: #pg-settings itself becomes a flex column that
   fills .ma-main's height (which is already bounded). .ma-set2
   flex-grows to occupy remaining space below the "Business
   settings" header. Both columns then have their own overflow-y
   inside a properly-bounded parent — no viewport math required.

   v3.9.455 — Switch outer container from flex to grid, and negate
   .ma-main's bottom padding on this page:
     • Grid `grid-template-rows: auto 1fr` is more deterministic than
       `flex:1 1 auto` — the 1fr track fills remaining space exactly,
       so `.ma-set2` reliably occupies everything below the header.
     • .ma-main{padding:22px} was leaving a 22px grey strip below the
       settings block; we cancel just the bottom padding here so the
       block flushes to .ma-main's bottom edge.
     • .ma-set2-body gets extra bottom padding for breathing room so
       the Save button and last card aren't cramped against the edge.
════════════════════════════════════════════ */
#pg-settings.on{
  display:grid;                     /* was flex */
  grid-template-rows:auto 1fr;      /* header takes natural size, .ma-set2 fills the rest */
  height:100%;
  min-height:0;
  padding-bottom:0;
}
/* Kill the parent's bottom padding for this page only — otherwise a
   22px grey strip appears below the settings block. Uses :has() so
   we don't need to touch JS. Falls back gracefully on older browsers
   (they get the 22px strip, which is the pre-fix behaviour). */
.ma-main:has(> #pg-settings.on){ padding-bottom:0; }

.ma-set2{
  display:grid;
  grid-template-columns:320px 1fr;  /* v3.9.453 — was 282px; widened so long link labels fit */
  grid-template-rows:1fr;           /* v3.9.455 — single row that fills parent cell */
  gap:20px;
  align-items:stretch;
  min-height:0;   /* required so grid children can shrink and enable scroll */
  overflow:hidden;
}

/* ── Sidebar: two stacked panels (Account Settings / Application Settings) ── */
.ma-set2-nav{
  display:flex; flex-direction:column; gap:14px;
  background:transparent; border:none; padding:4px 8px 20px 0;
  box-shadow:none;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  /* v3.9.453 — Fade edges so it's visually obvious the list scrolls
     when the nav is taller than the viewport. */
  mask-image: linear-gradient(to bottom,
     transparent 0,
     #000 12px,
     #000 calc(100% - 12px),
     transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
     transparent 0,
     #000 12px,
     #000 calc(100% - 12px),
     transparent 100%);
}
/* v3.9.453 — Larger, coloured scrollbar so the user actually sees
   that the sidebar can scroll. Previously 6px transparent was
   invisible on most themes, which made link entries below the fold
   look like they'd been removed. */
.ma-set2-nav::-webkit-scrollbar{ width:10px; }
.ma-set2-nav::-webkit-scrollbar-track{ background:transparent; }
.ma-set2-nav::-webkit-scrollbar-thumb{
  background:var(--bdr);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:6px;
}
.ma-set2-nav::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; }
/* Firefox */
.ma-set2-nav{ scrollbar-width:thin; scrollbar-color:var(--bdr) transparent; }

.ma-set2-panel{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--shadow);overflow:hidden;flex:0 0 auto}
.ma-set2-panel-hdr{font-size:14px;font-weight:700;color:var(--text);padding:14px 18px;border-bottom:1px solid var(--bdr);background:var(--surf)}
.ma-set2-panel-body{padding:6px}

/* ── Sidebar links (one per row, full width) ── */
.ma-set2-group{display:none}
.ma-set2-link{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:none;background:none;border-radius:8px;color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;text-align:left;transition:background .12s,color .12s;position:relative}
/* v3.9.453 — Allow long labels to wrap gracefully in the (still narrow)
   column instead of getting truncated by the icon+text row. Line-height
   kept tight so a wrapped 2-line label doesn't feel bulky. */
.ma-set2-link span{ line-height:1.3; }
.ma-set2-link svg{color:var(--muted);flex-shrink:0;transition:color .12s}
.ma-set2-link:hover{background:var(--surf2);color:var(--brand-dd)}
.ma-set2-link:hover svg{color:var(--brand)}
.ma-set2-link.active{background:transparent;color:var(--brand);font-weight:700}
.ma-set2-link.active svg{color:var(--brand)}
.ma-set2-link.active::before{content:"";position:absolute;left:-7px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--brand)}

/* Right content column — its own scrollbar */
.ma-set2-body{
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  /* v3.9.455 — bumped bottom padding 20→40 so the last card + Save
     button have breathing room and don't sit right on the bottom
     edge of the pane. */
  padding:0 4px 40px 0;
  min-height:0;
}
.ma-set2-body::-webkit-scrollbar{ width:10px; }
.ma-set2-body::-webkit-scrollbar-track{ background:transparent; }
.ma-set2-body::-webkit-scrollbar-thumb{
  background:var(--bdr);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:6px;
}
.ma-set2-body::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; }
.ma-set2-body{ scrollbar-width:thin; scrollbar-color:var(--bdr) transparent; }

.ma-set2-sec{display:none}
.ma-set2-sec.active{display:block;animation:maSetFade .2s ease}
@keyframes maSetFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ma-set2-sec .ma-settings-card+.ma-settings-card{margin-top:16px}

/* Mobile: revert to single-column natural page scroll — dual
   independent scrollbars don't fit a narrow viewport. */
@media (max-width:900px){
  #pg-settings.on{
    display:block;
    height:auto;
  }
  .ma-set2{
    grid-template-columns:1fr;
    height:auto;
    flex:none;
    overflow:visible;
  }
  .ma-set2-nav,
  .ma-set2-body{
    overflow:visible;
    padding:0;
    /* Turn off the fade mask on mobile — the full nav is meant to be
       visible as part of the natural page scroll. */
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* ── Organisation Detail / Bank Detail card (no icon, just clean header) ── */
.ma-org-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--shadow);padding:0;overflow:hidden}
.ma-org-card-hdr{font-size:14px;font-weight:700;color:var(--text);padding:16px 22px;border-bottom:1px solid var(--bdr)}
.ma-org-card-body{padding:22px}

/* ── Label-on-left form row ── */
.ma-org-row{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;margin-bottom:14px}
.ma-org-row>label{font-size:13px;color:var(--text);font-weight:500;line-height:1.35}
.ma-org-row .req{color:#e11d48;margin-left:1px}
.ma-org-row>.ma-org-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.ma-org-row input[type="text"],
.ma-org-row input[type="email"],
.ma-org-row input[type="tel"],
.ma-org-row input[type="url"],
.ma-org-row select,
.ma-org-row textarea{width:100%;border:1px solid var(--bdr);border-radius:8px;padding:10px 13px;font-size:13px;background:var(--surf);color:var(--text);font-family:inherit;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.ma-org-row input:focus,
.ma-org-row select:focus,
.ma-org-row textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.ma-org-row .hint{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:2px}
.ma-org-row textarea{resize:vertical;min-height:42px}

/* ── GSTIN row with Auto Fill button on the right ── */
.ma-org-gst-wrap{display:flex;border:1px solid var(--bdr);border-radius:8px;overflow:hidden;background:var(--surf);transition:border-color .12s,box-shadow .12s}
.ma-org-gst-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.ma-org-gst-wrap input{flex:1;border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-width:0}
.ma-org-gst-wrap input:focus{box-shadow:none!important}
.ma-org-gst-btn{background:var(--surf2);border:none;border-left:1px solid var(--bdr);padding:0 18px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.ma-org-gst-btn:hover{background:var(--brand);color:#fff}

/* ── Update GSTIN checkbox row ── */
.ma-org-chk-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.ma-org-chk-row input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand);flex-shrink:0}

/* ── Bank block (each bank slot has a labelled section header) ── */
.ma-bank-block{margin-bottom:20px}
.ma-bank-block-hdr{display:inline-block;background:var(--surf2);font-size:13px;font-weight:700;color:var(--text);padding:8px 16px;border-radius:6px;margin-bottom:14px;border:1px solid var(--bdr)}
.ma-bank-block:last-child{margin-bottom:8px}

/* ── Save button (sticky at bottom right of section) ── */
.ma-org-actions{display:flex;justify-content:flex-end;margin-top:20px;padding:16px 0 4px;border-top:1px solid var(--bdr)}
.ma-org-save-btn{background:var(--brand);color:#fff;border:none;padding:10px 22px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:filter .12s,box-shadow .12s;font-family:inherit}
.ma-org-save-btn:hover{filter:brightness(.95);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ma-org-save-btn svg{width:16px;height:16px}

/* ── Responsive: stack label above field, sidebar above body on small screens ── */
@media(max-width:980px){
  .ma-set2{grid-template-columns:1fr}
  .ma-set2-nav{position:static}
}
@media(max-width:680px){
  .ma-org-row{grid-template-columns:1fr;gap:6px}
  .ma-org-row>label{font-weight:600}
  .ma-org-card-body{padding:16px}
}
.ma-hd-iconbtn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.14);border:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .12s}
.ma-hd-iconbtn:hover{background:rgba(255,255,255,.26)}
/* header logout button override */
.ma-topbar .ma-btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}
.ma-topbar .ma-btn:hover{background:rgba(255,255,255,.28)}

/* Body is now a vertical stack: [tabnav] [main] */
.ma-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

/* ────────────────────────────────────
   HORIZONTAL TAB NAV  (desktop primary navigation)
──────────────────────────────────── */
.ma-tabnav{display:flex;align-items:stretch;gap:0;background:var(--surf);border-bottom:1.5px solid var(--bdr);padding:0;overflow-x:auto;overflow-y:hidden;position:sticky;top:58px;z-index:70;scrollbar-width:none;flex-shrink:0;box-shadow:var(--shadow)}
.ma-tabnav::-webkit-scrollbar{display:none}
.ma-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 8px 9px;cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;border-bottom:2.5px solid transparent;border-right:1px solid var(--surf3);transition:color .12s,background .12s;position:relative;min-width:0}
.ma-tab:last-child{border-right:none}
.ma-tab .ma-nav-icon{width:20px;height:20px;color:var(--hint);transition:color .12s}
.ma-tab:hover{color:var(--brand);background:var(--brand-bg)}
.ma-tab:hover .ma-nav-icon{color:var(--brand)}
.ma-tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
.ma-tab.on .ma-nav-icon{color:var(--brand)}
.ma-tabnav .ma-nav-badge{position:absolute;top:5px;right:10px;margin:0;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}

/* ── Grouped tab bar with hover dropdown submenus ── */
/* Allow dropdowns to overflow the bar (only ~9 top tabs now, so no scroll needed) */
.ma-tabnav{overflow:visible}
.ma-tab.ma-has-sub{padding:0;position:relative}
/* The clickable "header" part of a tab that has a submenu keeps the column look */
.ma-tab-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;padding:11px 8px 9px;cursor:pointer}
.ma-caret{font-size:9px;opacity:.55;margin-left:1px;display:inline-block;transition:transform .15s}
.ma-tab.ma-has-sub:hover .ma-caret{transform:translateY(1px)}
/* Highlight the whole tab when hovering its submenu area too */
.ma-tab.ma-has-sub:hover{color:var(--brand);background:var(--brand-bg)}
.ma-tab.ma-has-sub:hover .ma-nav-icon{color:var(--brand)}

.ma-subnav{
  display:none;position:absolute;top:100%;left:0;min-width:230px;
  background:var(--surf);border:1.5px solid var(--bdr);border-top:2.5px solid var(--brand);
  border-radius:0 0 12px 12px;box-shadow:0 16px 36px rgba(0,0,0,.18);
  padding:6px;z-index:200;text-align:left;animation:maSubIn .14s ease;
}
@keyframes maSubIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ma-tab.ma-has-sub:hover .ma-subnav{display:block}
/* Right-edge tabs: align dropdown to the right so it doesn't run off-screen */
.ma-tab.ma-sub-right .ma-subnav{left:auto;right:0}
.ma-subnav-lnk{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;cursor:pointer;line-height:1.2;
}
.ma-subnav-lnk svg{width:15px;height:15px;color:var(--hint);flex:0 0 auto;transition:color .12s}
.ma-subnav-lnk:hover{background:var(--brand-bg);color:var(--brand)}
.ma-subnav-lnk:hover svg{color:var(--brand)}
.ma-subnav-lnk.on{background:var(--brand-bg);color:var(--brand)}
.ma-subnav-lnk.on svg{color:var(--brand)}

/* Keep all 9 top tabs readable & non-overlapping on smaller desktops
   (the whole bar is hidden below 768px, where the sidebar takes over). */
.ma-tab > span:not(.ma-nav-icon),
.ma-tab-main > span:not(.ma-nav-icon){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){
  .ma-tab{font-size:11px}
  .ma-tab{padding-left:4px;padding-right:4px}
  .ma-tab-main{padding-left:4px;padding-right:4px}
}

/* ────────────────────────────────────
   SIDEBAR  (mobile slide-in drawer only)
──────────────────────────────────── */
.ma-sidebar{display:none;width:215px;background:var(--surf);border-right:1.5px solid var(--bdr);padding:10px 0;flex-shrink:0;overflow-y:auto;height:100%;min-height:0}
.ma-nav-grp{font-size:10px;font-weight:700;color:var(--hint);text-transform:uppercase;letter-spacing:.7px;padding:10px 16px 3px}
.ma-nav-lnk{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);margin:1px 8px;transition:all .1s;text-decoration:none}
.ma-nav-lnk:hover{background:var(--surf3);color:var(--text)}
.ma-nav-lnk.on{background:var(--brand-bg);color:var(--brand);font-weight:700}
.ma-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}
.ma-nav-badge{margin-left:auto;background:var(--red-bg);color:var(--red);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}

/* ────────────────────────────────────
   PAGES
──────────────────────────────────── */
.ma-main{flex:1;padding:22px;background:var(--surf2);overflow-y:auto;min-height:0;height:100%}
.ma-pg{display:none}.ma-pg.on{display:block}
.ma-pg-hdr{margin-bottom:20px}
.ma-pg-title{font-size:20px;font-weight:800}
.ma-pg-sub{font-size:13px;color:var(--muted);margin-top:2px}

/* ────────────────────────────────────
   COMPLETE-YOUR-PROFILE CARD
──────────────────────────────────── */
.ma-profile-card{position:relative;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.ma-profile-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px}
.ma-profile-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;line-height:1;color:var(--hint);cursor:pointer;padding:0}
.ma-profile-x:hover{color:var(--text)}
.ma-profile-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--surf3)}
.ma-profile-row:first-of-type{border-top:none}
.ma-profile-info{flex:1;min-width:0}
.ma-profile-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.ma-profile-p{font-size:12px;color:var(--muted);line-height:1.5}
.ma-profile-btn{flex-shrink:0;background:#fff;color:var(--brand-dd);border:1.5px solid var(--brand);border-radius:8px;padding:8px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s}
.ma-profile-btn:hover{background:var(--brand-bg)}
@media(max-width:560px){.ma-profile-row{flex-direction:column;align-items:flex-start;gap:8px}.ma-profile-btn{width:100%}}

/* ────────────────────────────────────
   STATS CARDS
──────────────────────────────────── */
.ma-dash-filter-bar{display:flex;gap:6px;margin-bottom:12px}
.ma-dash-fpill{padding:5px 14px;border-radius:20px;border:1.5px solid var(--bdr);background:var(--surf);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;font-family:inherit}
.ma-dash-fpill:hover{background:var(--surf3);color:var(--text)}
.ma-dash-fpill.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.ma-today-bar{display:flex;align-items:center;gap:0;background:var(--surf);border:1.5px solid var(--brand);border-radius:var(--rl);padding:10px 16px;margin-bottom:14px;flex-wrap:wrap;gap:4px 0}
.ma-today-lbl{font-size:11px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.5px;margin-right:14px;white-space:nowrap}
.ma-today-item{display:flex;flex-direction:column;align-items:center;padding:0 14px}
.ma-today-key{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.ma-today-val{font-size:16px;font-weight:900;color:var(--text);white-space:nowrap}
.ma-today-sep{width:1px;background:var(--bdr);height:32px;align-self:center}
.ma-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}
.ma-sc{position:relative;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:16px 18px;box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .15s,transform .15s}
.ma-sc:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.ma-sc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);opacity:.9}
.ma-sc-lbl{font-size:11px;color:var(--hint);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.ma-sc-val{font-size:22px;font-weight:900;color:var(--text)}
.ma-sc-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-top:6px}
.bg-g{background:var(--green-bg);color:var(--green)}
.bg-b{background:var(--brand-bg);color:var(--brand-dd)}
.bg-a{background:var(--amber-bg);color:var(--amber)}
.bg-r{background:var(--red-bg);color:var(--red)}

/* ────────────────────────────────────
   CARDS & TABLES
──────────────────────────────────── */
.ma-card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
/* Report filter bars (Product Report / Stock Report) — padded grid + action row */
.prod-rep-filters,.stk-rep-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end;padding:16px}
.prod-rep-actions,.stk-rep-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 16px 16px}
.prod-rep-filters .fg label,.stk-rep-filters .fg label{margin-bottom:5px}
.prod-rep-filters select,.prod-rep-filters input,.stk-rep-filters select,.stk-rep-filters input{height:40px}
@media(max-width:640px){.prod-rep-filters,.stk-rep-filters{grid-template-columns:1fr 1fr;gap:10px;padding:12px}.prod-rep-actions,.stk-rep-actions{padding:0 12px 12px}}
/* Modal form grids (price list, letter) — two-column on desktop, one column on mobile */
.pcl-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.pcl-form-grid .fg{margin:0}
@media(max-width:640px){.pcl-form-grid{grid-template-columns:1fr;gap:8px}}
/* Price-list entries section inside the modal */
.pcl-section-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.pcl-section-title{font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
.pcl-add-row{display:flex;gap:8px;align-items:center}
.pcl-add-row select{height:36px;min-width:170px}
.pcl-entries{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.pcl-entries-empty{padding:18px;text-align:center;color:var(--muted);background:var(--surf2);border:1.5px dashed var(--bdr);border-radius:8px;font-size:13px}
.pcl-entry{background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px}
.pcl-entry-grid{display:grid;grid-template-columns:160px 1fr 130px 36px;gap:10px;align-items:end}
.pcl-entry-grid .fg label{font-size:10.5px;margin-bottom:3px}
.pcl-entry-grid select,.pcl-entry-grid input{height:36px}
.pcl-entry-del{align-self:end;height:36px;min-width:36px;padding:0 10px}
.pcl-all-pill{padding:9px 12px;background:var(--brand-bg);border:1.5px dashed #bfdbfe;border-radius:6px;color:var(--brand);font-weight:600;font-size:12.5px;height:36px;display:flex;align-items:center}
@media(max-width:640px){.pcl-entry-grid{grid-template-columns:1fr 1fr;gap:8px}.pcl-entry-del{grid-column:span 2}}
/* GSTR-2B reconciliation layout */
.gstr2b-steps{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text);line-height:1.5}
.gstr2b-steps>div{flex:1;min-width:200px}
.gstr2b-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.gstr2b-controls input[type=file]{font-size:13px;max-width:100%}
.gstr2b-controls .ma-btn{height:40px;white-space:nowrap}
@media(max-width:640px){.gstr2b-steps{gap:10px}.gstr2b-steps>div{min-width:0;flex:1 1 100%}.gstr2b-controls{gap:10px}.gstr2b-controls .fg{flex:1 1 100%!important;min-width:0!important}.gstr2b-controls .ma-btn{width:100%}}
#pg-gstr2b .ma-card-hdr,#pg-gstr3b .ma-card-hdr{flex-wrap:wrap;gap:6px}
#pg-gstr2b .ma-card-hdr .ma-btn.sm{margin-left:auto}
.ma-bill-box{overflow:visible!important}
/* Cards that host a searchable combo (e.g. Ledger party picker) must let the
   dropdown overflow the card bounds — overrides the default overflow:hidden and
   the mobile overflow-x:auto rules so the menu is never clipped. */
.ma-card.ma-card-combo{overflow:visible!important}
/* Styled filter dropdown (e.g. the "All types" voucher filter in the card header).
   Native selects render unstyled; this gives them the same look as .fg inputs
   with a custom chevron and brand focus ring. */
.ma-filter-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:8px 34px 8px 13px;
  border:1.5px solid var(--bdr);border-radius:8px;
  font-size:13px;font-weight:600;font-family:inherit;
  color:var(--text);background-color:var(--surf);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
  cursor:pointer;outline:none;line-height:1.2;
  transition:border-color .12s,box-shadow .12s;
}
.ma-filter-select:hover{border-color:var(--brand)}
.ma-filter-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-card-hdr{padding:13px 17px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:10px}
.ma-card-title{font-size:13px;font-weight:700}
.ma-card-body{padding:16px 17px}
.ma-tbl{width:100%;border-collapse:collapse}
.ma-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--hint);font-weight:700;padding:9px 14px;text-align:left;background:var(--surf2);border-bottom:1px solid var(--bdr)}
.ma-tbl td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--surf3);vertical-align:middle}
.ma-tbl tr:last-child td{border-bottom:none}
.ma-tbl tbody tr:hover td{background:var(--surf2)}
.pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px}
.p-g{background:var(--green-bg);color:var(--green)}
.p-r{background:var(--red-bg);color:var(--red)}
.p-a{background:var(--amber-bg);color:var(--amber)}
.p-b{background:var(--brand-bg);color:var(--brand-dd)}
.p-gr{background:var(--surf3);color:var(--muted)}

/* ────────────────────────────────────
   BILLING
──────────────────────────────────── */
.ma-bill-box{background:var(--surf);border:1.5px solid var(--bdr);border-radius:var(--rl);padding:20px;margin-bottom:16px}
.ma-bill-top{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.ma-bill-hdr{display:grid;grid-template-columns:2.5fr .6fr .6fr 1fr .7fr 1.1fr 1fr 30px;gap:7px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--hint);font-weight:700;padding:7px 0;border-bottom:1.5px solid var(--bdr);margin-bottom:8px}
.ma-bill-row{display:grid;grid-template-columns:2.5fr .6fr .6fr 1fr .7fr 1.1fr 1fr 30px;gap:7px;align-items:start;margin-bottom:8px}
.ma-bill-row input,.ma-bill-row select{padding:7px 9px;border:1.5px solid var(--bdr);border-radius:7px;font-size:12px;width:100%;background:var(--surf);color:var(--text);outline:none}
.ma-bill-row input:focus,.ma-bill-row select:focus{border-color:var(--brand)}
/* Warranty cell wrapper */
.ma-warr-wrap{display:block;width:100%}
.ma-warr-wrap select{display:block;width:100%;font-size:12px;padding:7px 9px;border:1.5px solid var(--bdr);border-radius:7px;background:var(--surf);color:var(--text);outline:none;cursor:pointer}
.ma-warr-wrap select:focus{border-color:var(--brand)}
.ma-warr-custom{display:block;width:100%!important;font-size:12px!important;padding:7px 9px!important;border:1.5px solid var(--brand)!important;border-radius:7px!important;background:#f0f7ff!important;color:var(--text)!important;outline:none!important;margin-top:5px!important;box-sizing:border-box!important}
.ma-del-btn{width:28px;height:28px;background:var(--red-bg);color:var(--red);border:none;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-bill-totals{border-top:1.5px solid var(--bdr);padding-top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:10px}
.ma-tot-row{display:flex;gap:48px;font-size:13px;min-width:260px;justify-content:flex-end}
.ma-tot-lbl{color:var(--muted)}
.ma-tot-grand{font-size:17px;font-weight:900;border-top:1.5px solid var(--bdr);padding-top:10px;margin-top:4px}

/* ────────────────────────────────────
   IMEI SECTION
──────────────────────────────────── */
.ma-imei-box{background:var(--brand-bg);border:1.5px solid var(--brand-bg2);border-radius:10px;padding:14px 16px;margin:12px 0}
.ma-imei-title{font-size:12px;font-weight:800;color:#92400e;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.ma-imei-product{margin-bottom:14px}
.ma-imei-product-name{font-size:13px;font-weight:700;margin-bottom:7px;color:var(--text)}
.ma-imei-product-name small{color:var(--muted);font-weight:500}
.ma-imei-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px;min-height:20px}
.ma-imei-tag{display:flex;align-items:center;gap:5px;background:#fff;border:1.5px solid #fde68a;border-radius:20px;padding:4px 11px;font-size:11px;font-weight:700;font-family:monospace;color:#92400e}
.ma-imei-tag button{background:none;border:none;cursor:pointer;color:var(--red);font-size:13px;padding:0;line-height:1;margin-left:2px}
.ma-imei-input-row{display:flex;gap:8px;align-items:center}
.ma-imei-input{flex:1;padding:8px 11px;border:1.5px solid #fbbf24;border-radius:8px;font-size:13px;background:#fff;font-family:monospace;letter-spacing:1px;outline:none}
.ma-imei-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-imei-warn{font-size:11px;color:var(--amber);font-weight:700;margin-top:5px}
.ma-imei-err{display:none;background:var(--red-bg);color:var(--red);font-size:13px;font-weight:700;padding:10px 14px;border-radius:8px;margin-top:10px}
.ma-imei-slots{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ma-imei-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ma-imei-slot-label{font-size:11px;font-weight:700;color:var(--muted);min-width:44px}
.ma-imei-select{flex:1;max-width:320px;padding:7px 10px;border:1.5px solid #fbbf24;border-radius:8px;font-size:13px;font-family:monospace;background:#fff;color:var(--text);cursor:pointer;outline:none}
.ma-imei-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-imei-chosen{font-size:11px;font-weight:700;color:var(--green);font-family:monospace}
.ma-imei-no-stock{font-size:11px;color:var(--red);font-weight:700}
/* Searchable IMEI combo (replaces the native <select>) */
.ma-imei-combo{position:relative;flex:1;max-width:340px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ma-imei-combo-input-row{display:flex;flex:1;min-width:0;border:1.5px solid #fbbf24;border-radius:8px;overflow:hidden;background:#fff;transition:border-color .12s,box-shadow .12s}
.ma-imei-combo-input-row:hover,.ma-imei-combo[data-open=true] .ma-imei-combo-input-row{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-imei-combo-input{flex:1;border:none;padding:7px 10px;font-size:13px;font-family:monospace;background:transparent;color:var(--text);outline:none;min-width:0}
.ma-imei-combo-input::placeholder{color:#94a3b8;font-family:inherit}
.ma-imei-combo-arrow{display:flex;align-items:center;justify-content:center;padding:0 10px;background:var(--surf2);border-left:1.5px solid #fbbf24;color:var(--muted);cursor:pointer;font-size:13px;user-select:none}
.ma-imei-combo-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surf);border:1.5px solid var(--brand);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:200;max-height:240px;overflow:hidden;display:none;flex-direction:column}
.ma-imei-combo-drop.open{display:flex}
.ma-imei-combo-search{padding:8px 10px;border:none;border-bottom:1.5px solid var(--bdr);background:var(--surf2);font-size:12px;font-family:monospace;color:var(--text);outline:none;border-radius:8px 8px 0 0;width:100%;box-sizing:border-box}
.ma-imei-combo-list{overflow-y:auto;max-height:188px}
.ma-imei-combo-opt{padding:8px 12px;font-size:13px;font-family:monospace;color:var(--text);cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .1s}
.ma-imei-combo-opt:hover,.ma-imei-combo-opt.hi{background:var(--brand-bg);color:var(--brand)}
.ma-imei-combo-opt:last-child{border-bottom:none}
.ma-imei-combo-empty{padding:12px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:760px){.ma-imei-combo{max-width:100%;width:100%}}
/* Custom-item flag row (purchase) — appears under a row when "Custom item" is picked */
.ma-pu-flags{display:flex;gap:18px;flex-wrap:wrap;padding:8px 14px;margin:2px 0 6px;background:linear-gradient(135deg,var(--brand-bg) 0%,#f8fafc 70%);border:1.5px dashed #bfdbfe;border-radius:8px;font-size:12.5px}
.ma-pu-flag{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--text);font-weight:600;user-select:none}
.ma-pu-flag input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}

/* ────────────────────────────────────
   QUICK ACTIONS
──────────────────────────────────── */
.ma-qa{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.ma-qa-btn{display:flex;align-items:center;gap:7px;padding:10px 16px;background:var(--surf);border:1.5px solid var(--bdr);border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);transition:all .12s}
.ma-qa-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-bg)}

/* ────────────────────────────────────
   MISC
──────────────────────────────────── */
.ma-search-row{display:flex;gap:10px;margin-bottom:15px;align-items:center}
.ma-search-inp{flex:1;padding:9px 13px;border:1.5px solid var(--bdr);border-radius:9px;font-size:13px;background:var(--surf);color:var(--text);outline:none}
.ma-search-inp:focus{border-color:var(--brand)}
.ma-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ma-action-row{display:flex;gap:9px;flex-wrap:wrap}
.ma-empty{text-align:center;padding:36px 20px;color:var(--hint)}
.ma-empty .ei{font-size:38px;margin-bottom:10px}
.ma-stock-bar{width:76px;height:5px;border-radius:3px;background:var(--bdr);overflow:hidden}
.ma-stock-fill{height:100%;border-radius:3px}
.ma-chart-bars{display:flex;align-items:flex-end;gap:7px;height:120px;padding:0 2px}
.ma-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.ma-bar{width:100%;background:var(--brand-bg);border-radius:4px 4px 0 0;min-height:3px}
.ma-bar.cur{background:var(--brand)}
.ma-bar-lbl{font-size:10px;color:var(--hint)}
.ma-bar-val{font-size:10px;color:var(--hint)}

/* MODAL */
.ma-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;
  /* v3.9.172 — Modal is appended to <body>, outside #ma-shell, so it doesn't
     inherit the app's font-family. Without this, WordPress' body font
     (Open Sans on many sites) leaks into the modal — the user reported
     seeing a different font inside the Import section. Setting the same
     stack as #ma-shell here keeps typography consistent app-wide. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--text)}
.ma-modal{background:var(--surf);border-radius:var(--rl);padding:26px 28px;width:100%;max-width:580px;border:1.5px solid var(--bdr);max-height:90vh;overflow-y:auto}
.ma-modal-lg{max-width:760px;padding:22px 24px}
/* Wider modal variant — used for Quotation / Job Work create-edit screens
   where the items/parts table needs room to breathe. */
.ma-modal.ma-modal-wide{max-width:920px}
/* Per-row item combos inside the Quotation items table need the dropdown
   to escape the cell — the table itself can't have overflow:visible without
   breaking layout, so we let the table cell scroll-clip while the dropdown
   floats above on its own positioning context. */
.ma-qt-items{overflow:visible}
.ma-qt-items td{overflow:visible}
.ma-qt-items .qt-item-combo{position:relative}
.ma-qt-items .qt-item-combo .ma-combo-drop{min-width:280px}
.ma-modal-title{font-size:17px;font-weight:800;margin-bottom:18px}
.ma-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* NOTICE */
.ma-notice{padding:11px 15px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:10px;animation:slideIn .25s ease;line-height:1.45}
.ma-notice.ok{background:var(--green-bg);color:var(--green)}
.ma-notice.err{background:var(--red-bg);color:var(--red)}
#auth-notices:empty{display:none}
#auth-notices{margin-bottom:4px}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px) & MOBILE (≤ 640px)
   Three breakpoints:
   1024px  = tablet landscape / small laptop
    768px  = tablet portrait
    640px  = large phone
    480px  = standard phone
════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.ma-hamburger{
  display:none!important;
  flex-direction:column;justify-content:center;align-items:center;
  width:40px;height:40px;gap:5px;
  background:none;border:1.5px solid var(--bdr);border-radius:8px;
  cursor:pointer;padding:0;flex-shrink:0;margin-right:4px;
  transition:background .12s;
}
.ma-hamburger:hover{background:var(--surf3)}
.ma-hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .2s}
@media screen and (max-width:768px){
  .ma-hamburger{display:flex!important}
}

/* ── Sidebar close button (hidden on desktop) ── */
.ma-sidebar-header{display:none}
.ma-sidebar-close{display:none}

/* ── Sidebar overlay backdrop ── */
.ma-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;backdrop-filter:blur(1px)}
.ma-sidebar-overlay.open{display:block}

/* Logout text — hide on very small screens */
.ma-logout-txt{display:inline}

/* ════ TABLET LANDSCAPE ≤ 1024px ════ */
@media(max-width:1024px){
  /* sidebar narrower */
  .ma-sidebar{width:185px}
  /* hero text */
  .ma-hero h1{font-size:38px}
  /* stats: 2×2 grid */
  .ma-stats{grid-template-columns:repeat(2,1fr)}
  /* feature grid 2-col */
  .ma-feats{grid-template-columns:repeat(2,1fr);padding:0 24px 48px}
  /* stats strip tighter */
  .ma-stats-strip{gap:32px}
  /* main padding */
  .ma-main{padding:18px}
  /* billing top grid */
  .ma-bill-top{grid-template-columns:1fr 1fr}
}

/* ════ TABLET PORTRAIT ≤ 768px ════ */
@media screen and (max-width:768px){
  /* ── Show hamburger, hide sidebar by default ── */
  .ma-sidebar-header{
    display:flex!important;align-items:center;justify-content:space-between;
    padding:14px 16px 10px;border-bottom:1.5px solid var(--bdr);margin-bottom:6px;
  }
  .ma-sidebar-close{
    display:flex!important;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;border:1.5px solid var(--bdr);
    background:none;cursor:pointer;color:var(--muted);transition:all .12s;
  }
  .ma-sidebar-close:hover{background:var(--surf3);color:var(--text)}

  /* ── Hide horizontal tab nav on mobile; sidebar drawer takes over ── */
  .ma-tabnav{display:none!important}

  /* ── Sidebar becomes a slide-in drawer ── */
  .ma-sidebar{
    display:block!important;
    position:fixed!important;top:0!important;left:0!important;height:100vh!important;z-index:200!important;
    width:260px!important;transform:translateX(-100%)!important;
    transition:transform .25s cubic-bezier(.4,0,.2,1)!important;
    box-shadow:4px 0 24px rgba(0,0,0,.12)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .ma-sidebar.open{transform:translateX(0)!important}

  /* ── Topbar adjustments ── */
  .ma-topbar{padding:0 12px!important;height:54px!important;gap:8px}
  .ma-topbar-biz{font-size:13px}
  .ma-topbar-type{display:none!important}
  .ma-gst-tag{display:none!important}
  .ma-topbar-user{display:none!important}
  .ma-logout-txt{display:none!important}
  .ma-hd-fy{display:none!important}
  .ma-topbar-clock{display:none!important}
  .ma-hd-create .ma-hd-create-txt{display:none}
  .ma-hd-create{padding:8px 10px}

  /* ── Main content full width ── */
  .ma-body{flex-direction:column!important;overflow-y:visible!important;min-height:0;flex:1}
  .ma-main{padding:14px;height:auto;min-height:0;overflow-y:visible}

  /* ── Hero section ── */
  .ma-hero h1{font-size:30px;letter-spacing:-.5px}
  .ma-hero{padding:40px 20px 30px}
  .ma-hero p{font-size:15px}
  .ma-nav{padding:12px 16px}
  .ma-nav-links{gap:6px}
  .btn-outline-w,.btn-brand{padding:7px 14px;font-size:12px}

  /* ── Stats strip ── */
  .ma-stats-strip{gap:20px;padding:18px 16px;flex-wrap:wrap;justify-content:center}
  .ma-stat-s .n{font-size:22px}

  /* ── Feature grid ── */
  .ma-feats{grid-template-columns:repeat(2,1fr);padding:0 16px 36px;gap:12px}
  .ma-feat{padding:16px}

  /* ── Dashboard stats ── */
  .ma-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .ma-sc-val{font-size:18px}

  /* ── Two-column layout → single ── */
  .ma-two{grid-template-columns:1fr}
  .fg-2{grid-template-columns:1fr 1fr}

  /* ── Billing form ── */
  .ma-bill-top{grid-template-columns:1fr}
  .ma-bill-hdr{display:none}  /* hide header row; data labels implicit */
  .ma-bill-row{
    grid-template-columns:1fr 1fr;
    gap:8px;padding:10px;background:var(--surf);
    border:1.5px solid var(--bdr);border-radius:10px;margin-bottom:10px;
  }
  .ma-bill-row>select{grid-column:1/-1}
  .ma-bill-row .ma-warr-wrap{grid-column:1/-1}
  .ma-bill-row>*:nth-child(5){display:none}  /* hide amount col, show in total */

  /* ── Tables — horizontal scroll ── */
  .ma-card{overflow-x:auto}
  .ma-tbl{min-width:520px}

  /* ── Quick action buttons — wrap neatly ── */
  .ma-qa{gap:7px}
  .ma-qa-btn{padding:8px 12px;font-size:12px}

  /* ── Page header ── */
  .ma-pg-title{font-size:17px}
  .ma-pg-hdr{margin-bottom:14px}

  /* ── Search row ── */
  .ma-search-row{flex-wrap:wrap}
  .ma-search-inp{min-width:0;flex:1}

  /* ── Bill totals ── */
  .ma-tot-row{gap:24px;min-width:200px}

  /* ── Data IO page ── */
  .ma-dio-grid{grid-template-columns:1fr}
  .ma-dio-format-cards{flex-wrap:wrap}
  .ma-dio-section{padding:16px}
}

/* ════ PHONE ≤ 480px ════ */
@media(max-width:480px){
  .btn-trial{display: none;}
  .btn-brand{padding: 9px 15px;}
  .ma-nav{gap:3px;}
  /* ── Hero ── */
  .ma-hero h1{font-size:25px}
  .ma-hero p{font-size:14px}
  .btn-hero-p,.btn-hero-o{padding:12px 22px;font-size:14px}

  /* ── Feature grid single col ── */
  .ma-feats{grid-template-columns:1fr;gap:10px}
  .ma-feat{padding:14px;display:flex;align-items:flex-start;gap:12px}
  .ma-feat-icon{flex-shrink:0;margin-bottom:0;width:40px;height:40px}
  .ma-feat h3{margin-bottom:3px}

  /* ── Stats strip 2×2 ── */
  .ma-stats-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:16px}

  /* ── Stats cards single col ── */
  .ma-stats{grid-template-columns:1fr 1fr}
  .ma-sc{padding:12px 13px}
  .ma-sc-val{font-size:17px}

  /* ── Form grids ── */
  .fg-2{grid-template-columns:1fr}
  .fg-3{grid-template-columns:1fr}

  /* ── Auth card ── */
  .ma-auth-card{padding:22px 18px}
  .ma-setup-card{padding:22px 18px}
  .ma-auth{padding:16px}
  .ma-setup{padding:16px}

  /* ── Main padding ── */
  .ma-main{padding:10px}

  /* ── Topbar ── */
  .ma-topbar{padding:0 10px;gap:8px}
  .ma-topbar-clock{display:none}

  /* ── Modal ── */
  .ma-modal{padding:18px 16px;margin:8px}

  /* ── Bill row single col ── */
  .ma-bill-row{grid-template-columns:1fr 1fr;gap:6px}

  /* ── Quick actions 2-per-row ── */
  .ma-qa{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .ma-qa-btn{justify-content:center}

  /* ── Search row ── */
  .ma-search-row{flex-direction:column;align-items:stretch}
  .ma-search-inp{width:100%}

  /* ── Bill totals ── */
  .ma-bill-totals{align-items:stretch}
  .ma-tot-row{justify-content:space-between;gap:12px;min-width:0}

  /* ── Data IO ── */
  .ma-dio-format-cards{flex-direction:row;gap:8px}
  .ma-dio-fmt{flex:1;min-width:60px;padding:10px 8px;font-size:11px}
  .ma-dio-sec-hdr{flex-direction:column;gap:10px}

  /* ── Tables scroll hint ── */
  .ma-card::before{
    content:'← Scroll to see more →';
    display:block;font-size:10px;color:var(--hint);
    padding:4px 14px;text-align:center;
  }
  .ma-tbl{min-width:460px}
}

/* ════ VERY SMALL PHONES ≤ 360px ════ */
@media(max-width:360px){
  .ma-hero h1{font-size:22px}
  .ma-stats{grid-template-columns:1fr}
  .ma-qa{grid-template-columns:1fr}
  .ma-dio-format-cards{flex-direction:column}
  .ma-dio-fmt{flex-direction:row;min-width:0;padding:10px 14px}
  .ma-feats{padding:0 10px 28px}
}

/* ─── Logo Upload UI ─── */
.ma-logo-upload-box {
  background: var(--surf2);
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: border-color .2s;
}
.ma-logo-upload-box:hover { border-color: var(--brand); }
.ma-logo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.ma-logo-upload-btn:hover { background: var(--brand-d); }

/* ─── Purchase Bill notices ─── */
#pu-notices { margin-bottom: 6px; }

/* ─── Purchase bill table header search ─── */
#pu-search {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--surf);
  color: var(--text);
}

/* ════════════════════════════════════════════
   DATA & BACKUP PAGE
════════════════════════════════════════════ */
.ma-dio-section{background:var(--surf);border:1.5px solid var(--bdr);border-radius:14px;padding:24px 26px;margin-bottom:20px}
.ma-dio-sec-hdr{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.ma-dio-sec-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-dio-sec-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:3px}
.ma-dio-sec-sub{font-size:13px;color:var(--muted);line-height:1.5}
.ma-dio-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
@media(max-width:600px){.ma-dio-grid{grid-template-columns:1fr}}
.ma-dio-label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.ma-dio-chips{display:flex;flex-wrap:wrap;gap:7px}
.ma-dio-chip{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bdr);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted);transition:all .12s}
.ma-dio-chip.on{border-color:var(--brand);color:var(--brand);background:var(--brand-bg,rgba(37,99,235,.08))}
.ma-dio-chip:hover:not(.on){border-color:var(--brand);color:var(--brand)}
.ma-dio-format-cards{display:flex;gap:10px}
.ma-dio-fmt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;border:1.5px solid var(--bdr);border-radius:12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all .12s;min-width:72px;text-align:center}
.ma-dio-fmt.on{border-color:var(--brand);color:var(--brand);background:var(--brand-bg,rgba(37,99,235,.08))}
.ma-dio-fmt:hover:not(.on){border-color:var(--brand);color:var(--brand)}

/* Import drop zone */
.ma-dio-import-zone{border:2px dashed var(--bdr);border-radius:12px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:all .15s;cursor:default}
.ma-dio-import-zone.drag-over{border-color:var(--brand);background:var(--brand-bg,rgba(37,99,235,.06))}
.ma-dio-drop-txt{font-size:13.5px;color:var(--muted)}

/* Import preview */
.ma-dio-preview{margin-top:18px;background:var(--surf2);border-radius:10px;padding:16px 18px}
.ma-dio-preview-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:12px}
.ma-dio-preview-stats{display:flex;flex-wrap:wrap;gap:8px}
.ma-dio-stat-pill{display:flex;align-items:center;gap:7px;padding:5px 12px;background:var(--brand-bg,rgba(37,99,235,.08));border:1px solid var(--brand);border-radius:20px;font-size:12px;color:var(--brand)}
.ma-dio-stat-n{font-weight:800;font-size:14px}

/* Backup info */
.ma-dio-backup-info{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ma-dio-bk-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ma-dio-bk-item svg{color:var(--green);flex-shrink:0}

/* ════════════════════════════════════════════
   PRICING / SUBSCRIPTION SCREEN
════════════════════════════════════════════ */
.ma-pricing-screen{
  min-height:100vh;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px 60px;overflow-y:auto;
}
.ma-pricing-wrap{width:100%;max-width:960px}

.ma-pricing-header{text-align:center;margin-bottom:40px}
.ma-pricing-title{font-size:32px;font-weight:900;color:#fff;margin-bottom:10px;letter-spacing:-.5px}
.ma-pricing-sub{font-size:16px;color:#94a3b8;margin:0}

.ma-pricing-badge{
  display:inline-block;padding:6px 18px;border-radius:20px;
  font-size:13px;font-weight:700;margin-bottom:16px;
  background:rgba(37,99,235,.2);color:#a5b4fc;border:1px solid rgba(37,99,235,.4);
}
.ma-pricing-badge.expired{
  background:rgba(220,38,38,.15);color:#fca5a5;border-color:rgba(220,38,38,.3);
}

/* ── Plan grid ── */
.ma-plans-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;
  align-items:stretch;
}
@media(max-width:768px){.ma-plans-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto 32px}}
@media(max-width:480px){.ma-pricing-title{font-size:24px}}

/* (Legacy dark-themed .ma-plan-card / .ma-plan-features / .ma-plan-popular
   styles previously here have been removed. The active definitions live
   farther down — they target the white-card layout used today.) */

.ma-plan-btn{
  width:100%;padding:14px 18px;border:none;border-radius:11px;
  font-size:15px;font-weight:700;letter-spacing:.2px;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;
  box-shadow:0 6px 18px rgba(37,99,235,.25);
  transition:transform .15s,box-shadow .15s,background .2s;
}
.ma-plan-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(37,99,235,.35);
}
.ma-plan-btn:active{transform:translateY(0)}
.ma-plan-btn:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}

/* ── Footer trust badges ── */
.ma-pricing-footer{text-align:center}
.ma-pricing-trust{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:4px;
}
.ma-pricing-trust span{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:#64748b;
}
.ma-pricing-trust span svg{color:#7DD3FC}

/* ── Subscription badge in topbar ── */
.ma-sub-badge{
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;cursor:default;
}
.ma-sub-badge.active{background:#E0F2FE;color:#0EA5E9}
.ma-sub-badge.expiring{background:#fef3c7;color:#F59E0B;cursor:pointer}
.ma-sub-badge.expiring:hover{background:#fde68a}

/* ════════════════════════════════════════════
   TRIAL BADGE ON SIGNUP SCREEN
════════════════════════════════════════════ */
.ma-trial-badge-top{
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;font-weight:800;font-size:13px;
  padding:6px 18px;border-radius:20px;
  display:inline-block;margin:0 auto 12px;
  text-align:center;letter-spacing:.3px;
}

/* ════════════════════════════════════════════
   SUBSCRIPTION PAGE — ACTIVE CARD
════════════════════════════════════════════ */
.ma-sub-active-card{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,#7c3aed 100%);
  border-radius:18px;padding:28px 32px;color:#fff;
  margin-bottom:16px;gap:16px;flex-wrap:wrap;
  box-shadow:0 8px 32px rgba(37,99,235,.28);
}
.ma-sub-ac-left{flex:1;min-width:160px}
.ma-sub-ac-label{font-size:11px;opacity:.9;font-weight:700;margin-bottom:8px;letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.ma-sub-ac-name{font-size:22px;font-weight:800;margin-bottom:6px;line-height:1.2}
.ma-sub-ac-dates{font-size:12px;opacity:.8;margin-bottom:16px;letter-spacing:.2px}
.ma-sub-upgrade-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.35);
  color:#fff;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s,transform .1s;
  backdrop-filter:blur(4px);
}
.ma-sub-upgrade-btn:hover{background:rgba(255,255,255,0.25);transform:translateY(-1px)}
.ma-sub-ac-right{display:flex;align-items:center}
.ma-sub-days-ring{position:relative;width:84px;height:84px}
.ma-sub-ring-txt{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;color:#fff;
}
.ma-sub-ring-txt span{font-size:22px;font-weight:800;line-height:1;display:block}
.ma-sub-ring-txt small{font-size:9px;opacity:.8;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}

/* No active plan notice */
.ma-sub-no-active{
  background:var(--surface);border:2px dashed var(--border);
  border-radius:16px;padding:36px 28px;text-align:center;margin-bottom:16px;
}
.ma-sub-no-icon{font-size:42px;margin-bottom:10px;line-height:1}
.ma-sub-no-title{font-weight:800;font-size:18px;margin-bottom:6px;color:var(--text)}
.ma-sub-no-desc{color:var(--muted);font-size:13px;margin-bottom:20px;max-width:340px;margin-left:auto;margin-right:auto;line-height:1.6}
.ma-sub-no-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:none;border-radius:10px;
  padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .1s;box-shadow:0 4px 14px rgba(37,99,235,.3);
}
.ma-sub-no-btn:hover{background:var(--brand-d);transform:translateY(-1px)}

/* ════════════════════════════════════════════
   SUBSCRIPTION TIMELINE BAR
════════════════════════════════════════════ */
.ma-sub-timeline-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px 24px;margin-bottom:16px;
}
.ma-sub-tl-hdr{font-weight:700;font-size:13px;margin-bottom:14px;color:var(--text);display:flex;align-items:center;gap:7px}
.ma-sub-tl-bar-wrap{}
.ma-sub-tl-bar{
  height:10px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:10px;
}
.ma-sub-tl-fill{
  height:100%;background:var(--brand);border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.ma-sub-tl-labels{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--muted);
}
.ma-sub-tl-pct-val{font-weight:700;color:var(--brand);font-size:12px}

/* ════════════════════════════════════════════
   SUBSCRIPTION HISTORY LIST
════════════════════════════════════════════ */
.ma-sub-history-list{padding:4px 0}
.ma-sub-hist-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.ma-sub-hist-item:last-child{border-bottom:none}
.ma-sub-hist-item.current{
  background:linear-gradient(90deg,rgba(37,99,235,.06) 0%,transparent 100%);
  margin:0 -20px;padding:16px 20px;border-radius:10px;border-bottom:none;
  margin-bottom:1px;
}
.ma-sub-hist-icon{
  font-size:20px;line-height:1;margin-top:3px;min-width:32px;text-align:center;
  background:var(--surf2);border-radius:8px;padding:6px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.ma-sub-hist-item.current .ma-sub-hist-icon{background:rgba(37,99,235,.12);color:var(--brand)}
.ma-sub-hist-body{flex:1}
.ma-sub-hist-name{font-weight:700;font-size:14px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ma-sub-hist-dates{font-size:12px;color:var(--muted);margin-bottom:3px;display:flex;align-items:center;gap:5px}
.ma-sub-hist-rem{font-size:12px;color:var(--brand);font-weight:600;margin-top:2px}
.ma-sub-hist-order{font-size:11px;color:var(--muted);margin-top:2px}

/* History status badges */
.ma-sub-hist-badge{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;
}
.ma-sub-hist-badge.active{background:#E0F2FE;color:#0EA5E9}
.ma-sub-hist-badge.expired{background:#fee2e2;color:#dc2626}
.ma-sub-hist-badge.cancelled{background:#f1f5f9;color:#64748b}
.ma-sub-hist-badge.pending{background:#fef3c7;color:#F59E0B}

/* ── Keyboard Shortcut Toggle ── */
.ma-shortcut-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.ma-shortcut-toggle input{opacity:0;width:0;height:0}
.ma-shortcut-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:.25s}
.ma-shortcut-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ma-shortcut-toggle input:checked+.ma-shortcut-slider{background:var(--brand)}
.ma-shortcut-toggle input:checked+.ma-shortcut-slider:before{transform:translateX(20px)}

/* ── Item Enable/Disable Toggle Switch ── */
.ma-item-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;vertical-align:middle}
.ma-item-toggle input{opacity:0;width:0;height:0;position:absolute}
.ma-item-slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:34px;transition:.22s}
.ma-item-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.22s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ma-item-toggle input:checked+.ma-item-slider{background:var(--brand)}
.ma-item-toggle input:checked+.ma-item-slider:before{transform:translateX(18px)}
.ma-item-toggle input:focus+.ma-item-slider{outline:2px solid var(--brand);outline-offset:2px}

/* ── Shortcut Reference Chart ── */
.ma-shortcut-grid{display:flex;flex-direction:column;gap:4px}
.ma-sk-row{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:8px;background:var(--surf2);transition:background .15s}
.ma-sk-row:hover{background:var(--surf3,#e8eaf0)}
.ma-sk-badge{display:flex;align-items:center;gap:3px;min-width:120px;flex-shrink:0}
.ma-sk-badge kbd{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;font-size:11px;font-weight:700;font-family:inherit;color:var(--text);padding:2px 6px;min-width:22px;line-height:1.4;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.ma-sk-desc{font-size:13px;color:var(--text);font-weight:500}

/* ── Invoice / Purchase Gap Reuse Chips ── */
.ma-gap-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.ma-gap-chips{display:flex;flex-wrap:wrap;gap:5px}
.ma-gap-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  background:var(--surf2);color:var(--text);border:1.5px solid var(--border);
  transition:all .15s;user-select:none;
}
.ma-gap-chip:hover{border-color:var(--brand);color:var(--brand);background:rgba(37,99,235,.07)}
.ma-gap-chip.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(37,99,235,.25)}

/* ── Pagination ── */
.ma-pagination{display:flex;align-items:center;justify-content:center;gap:5px;padding:14px 0 4px;flex-wrap:wrap}
.ma-pagination .ma-pg-info{font-size:12px;color:var(--muted);margin:0 8px;white-space:nowrap}
.ma-pagination button{min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--surf);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center}
.ma-pagination button:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:rgba(37,99,235,.07)}
.ma-pagination button.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.ma-pagination button:disabled{opacity:.35;cursor:not-allowed}

/* ── Settings Two-Column Grid ── */
.ma-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:860px){
  .ma-settings-grid{grid-template-columns:1fr}
}
.ma-settings-col{display:flex;flex-direction:column}
.ma-settings-card{padding:22px 22px 18px}
.ma-settings-card-hdr{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.ma-settings-card-icon{font-size:22px;line-height:1;flex-shrink:0}
.ma-settings-card-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.3}
.ma-settings-card-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ── Customer / Supplier combo-box ── */
.ma-combo-wrap{position:relative;width:100%}
.ma-combo-input-row{display:flex;gap:0}
.ma-combo-input-row input{flex:1;border-radius:7px 0 0 7px!important;border-right:none!important;min-width:0}
.ma-combo-arrow{display:flex;align-items:center;justify-content:center;padding:0 10px;background:var(--surf2);border:1.5px solid var(--bdr);border-left:none;border-radius:0 7px 7px 0;cursor:pointer;color:var(--muted);transition:background .15s;flex-shrink:0;font-size:13px}
.ma-combo-arrow:hover{background:var(--surf3);color:var(--brand)}
.ma-combo-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surf);border:1.5px solid var(--brand);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:999;max-height:220px;overflow:hidden;display:none;flex-direction:column}
.ma-combo-drop.open{display:flex}
.ma-combo-search{padding:8px 10px;border:none;border-bottom:1.5px solid var(--bdr);background:var(--surf2);font-size:12px;color:var(--text);outline:none;border-radius:8px 8px 0 0;width:100%;box-sizing:border-box}
.ma-combo-list{overflow-y:auto;max-height:168px}
.ma-combo-opt{padding:9px 12px;font-size:13px;cursor:pointer;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--bdr)}
.ma-combo-opt:last-child{border-bottom:none}
.ma-combo-opt:hover,.ma-combo-opt.hi{background:var(--brand-bg,var(--brand-bg))}
.ma-combo-opt-name{font-weight:600;color:var(--text);line-height:1.3}
.ma-combo-opt-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ma-combo-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.381 — RICH-SEARCH DROPDOWN (rb-cs-*)
   Modern dropdown for Create Sale Invoice: colored avatar circles, two-line
   rows, amount on the right, sticky "+ Create" links on top and bottom.
   Applied to customer/vendor, phone, GSTIN and item pickers.
   Namespaced separately so legacy .ma-combo-* dropdowns keep working.
   ══════════════════════════════════════════════════════════════════════════ */
.rb-cs-drop{
  /* Overrides for .ma-combo-drop when this class is added to it */
  max-height:none;                 /* Own sizing below */
  border:1px solid var(--bdr);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(15,23,42,.14);
  overflow:hidden;
}
.rb-cs-drop.open{display:flex}

/* Sticky header — "Select X" title + "+ Create X" link
   v3.9.387 — Header tint now uses var(--brand-bg) so it changes when
   the user picks a different theme colour in Settings → Colour & Font.
   Previously hardcoded to #EFF6FF (light blue) which looked wrong on
   red/green/purple themes. */
.rb-cs-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; gap:12px;
  background:var(--brand-bg);
  border-bottom:1px solid var(--bdr);
  flex-shrink:0;
}
.rb-cs-head-title{
  font-size:12.5px; font-weight:700; color:var(--text); letter-spacing:.2px;
}
.rb-cs-head-add{
  font-size:12.5px; font-weight:700; color:var(--brand);
  cursor:pointer; background:none; border:0; padding:0;
  display:inline-flex; align-items:center; gap:3px;
}
.rb-cs-head-add:hover{text-decoration:underline}

/* v3.9.393 — Centered header variant. Used by the item picker where
   the header no longer has a "+ Create Product" button (that action
   is now covered by the "Custom Product" row and the sticky footer
   pill). Without justify-content:center, the lone title sat awkwardly
   on the left with dead space on the right. */
.rb-cs-head.rb-cs-head-center{
  justify-content:center;
  text-align:center;
}
.rb-cs-head.rb-cs-head-center .rb-cs-head-title{
  font-size:13.5px; letter-spacing:.3px;
}

/* Search input — pill-shaped container with real SVG icon
   v3.9.385 — Complete redesign. Previous background-image icon was
   not rendering on some mobile browsers (data-URI CSP or subtle CSS
   inheritance). Now the wrap ITSELF is the bordered pill; the SVG
   and <input> live inside it as plain flex children. No absolute
   positioning, no data URIs, no padding-math to get wrong. This
   cannot fail because it's just three visible flex children:
     [ icon (16px) ] [ input (fills rest) ] */
.rb-cs-search-wrap{
  display:flex; align-items:center; gap:8px;
  margin:10px 12px;
  padding:10px 12px;
  border:1.5px solid var(--bdr);
  border-radius:10px;
  /* v3.9.388 — surf2 (subtle grey) instead of surf (pure white) so the
     search pill stands out from the sheet's own white background. On
     dark mode surf2 is a lighter navy than surf, giving the same
     "input sits above the panel" visual cue. */
  background:var(--surf2);
  flex-shrink:0;
}
.rb-cs-search-wrap:focus-within{border-color:var(--brand)}
.rb-cs-search-wrap svg{
  flex:0 0 auto;
  width:16px; height:16px;
  color:var(--muted);
  display:block;
  stroke:currentColor;
}
.rb-cs-search-wrap input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  border:0; outline:0;
  padding:0; margin:0;
  background:transparent;
  font-size:14px; line-height:1.4;
  color:var(--text); font-family:inherit;
}
.rb-cs-search-wrap input::placeholder{color:var(--muted); opacity:1}

/* Scrolling list — sized to show ~5-6 rows before scroll (~60px per row) */
.rb-cs-list{
  overflow-y:auto;
  max-height:360px;                /* 6 rows × ~60px */
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-height:0;
}

/* Row — avatar circle, two-line text, right-aligned amount
   v3.9.387 — Border colour uses var(--bdr) so it follows theme
   (subtle grey in light mode, subtle dark in dark mode). */
.rb-cs-opt{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  cursor:pointer; border-bottom:1px solid var(--bdr);
  min-height:56px;
  transition:background .12s;
  background:var(--surf);
}
.rb-cs-opt:last-child{border-bottom:none}
.rb-cs-opt:hover,.rb-cs-opt.hi{background:var(--surf2)}

/* Colored circular avatar with initials.
   Text colour uses var(--heading) so it stays readable when the user
   switches to dark mode (where --heading is light instead of near-black). */
.rb-cs-av{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:#0f172a;
  letter-spacing:.3px; user-select:none;
}
/* Avatar palette — kept as fixed pastels because they act as visual
   IDs (each customer needs a distinct hue). Text colour on top is
   always dark navy — these are chosen light enough to keep contrast. */
.rb-cs-av-0{background:#FED7AA}   /* peach */
.rb-cs-av-1{background:#BBF7D0}   /* mint */
.rb-cs-av-2{background:#FED7AA}   /* peach 2 */
.rb-cs-av-3{background:#DDD6FE}   /* lavender */
.rb-cs-av-4{background:#FBCFE8}   /* pink */
.rb-cs-av-5{background:#A7F3D0}   /* teal */
.rb-cs-av-6{background:#BAE6FD}   /* sky */
.rb-cs-av-7{background:#FDE68A}   /* yellow */

/* Two-line text column (name + secondary) */
.rb-cs-body{flex:1 1 auto; min-width:0}
.rb-cs-name{
  font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rb-cs-name-ph{color:var(--muted); font-weight:500}   /* phone in parens */
.rb-cs-sub{
  font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Right-side amount pill — colours pulled from the theme's semantic
   palette so red/green track dark-mode + user tweaks. */
.rb-cs-amt{
  flex:0 0 auto; font-size:13px; font-weight:700; margin-left:auto;
  text-align:right; padding-left:8px;
}
.rb-cs-amt-red{color:var(--danger)}
.rb-cs-amt-green{color:var(--success)}
.rb-cs-amt-grey{color:var(--muted)}

/* Sticky footer "+ Create X" button */
.rb-cs-foot{
  padding:12px; text-align:center;
  border-top:1px solid var(--bdr); background:var(--surf); flex-shrink:0;
}
.rb-cs-foot-add{
  background:none; border:0; color:var(--brand); font-size:13px; font-weight:700;
  cursor:pointer; padding:2px 8px; display:inline-flex; align-items:center; gap:4px;
  font-family:inherit;
}
.rb-cs-foot-add:hover{text-decoration:underline}

/* Empty state */
.rb-cs-empty{
  padding:32px 20px; text-align:center; color:var(--muted); font-size:13px;
}
.rb-cs-empty small{display:block; margin-top:6px; color:var(--brand); font-size:11.5px}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.390 — PRODUCT ROW LAYOUT (rb-ip-*)
   Product picker rows differ from the customer picker layout:
     • No colored avatar circles (rows are clean and dense)
     • Product name bold on the left
     • "Avl. qty: X.XX UNT" line below the name — green if in stock,
       red if zero / negative
     • Price top-right, "incl tax X%" small grey line below
     • Optional secondary text (HSN / barcode) shown in muted grey
   Uses the same .rb-cs-drop / .rb-cs-list / .rb-cs-head shell so
   sticky header, search, and mobile bottom-sheet all work identically.
   ══════════════════════════════════════════════════════════════════════ */
.rb-ip-row{
  display:flex; align-items:flex-start; gap:14px;
  padding:12px 16px;
  cursor:pointer;
  border-bottom:1px solid var(--bdr);
  min-height:56px;
  transition:background .12s;
}
.rb-ip-row:last-child{border-bottom:none}
.rb-ip-row:hover,.rb-ip-row.hi{background:var(--surf2)}

/* Left column — name on top, qty line below, optional sub */
.rb-ip-left{flex:1 1 auto; min-width:0}
.rb-ip-name{
  font-size:13.5px; font-weight:700; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rb-ip-meta{
  margin-top:3px; font-size:11px; line-height:1.35;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
/* "Avl. qty:" label muted, number bold; colour depends on stock.
   Uses proper green/red rather than --green (which is defined as cyan
   #0EA5E9 in this plugin's palette) so the qty pop reads as intended
   in both light and dark modes. */
.rb-ip-qty-lbl{color:var(--muted); font-weight:600}
.rb-ip-qty-in {color:#16A34A; font-weight:700}     /* stock > 0 — emerald */
.rb-ip-qty-out{color:#DC2626; font-weight:700}     /* stock ≤ 0 — red */
.rb-ip-qty-uom{color:var(--muted); font-weight:500; text-transform:uppercase}
.rb-ip-code{color:var(--muted); font-weight:500; margin-left:6px}

/* Right column — price on top, tax line below */
.rb-ip-right{
  flex:0 0 auto; text-align:right; padding-left:10px;
  display:flex; flex-direction:column; align-items:flex-end;
}
.rb-ip-price{
  font-size:14px; font-weight:700; color:var(--text); line-height:1.3;
  white-space:nowrap;
}
.rb-ip-tax{
  margin-top:2px; font-size:10.5px; color:var(--muted);
  white-space:nowrap;
}

/* Custom-item row — pinned at top, blue-brand hint */
.rb-ip-custom{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; cursor:pointer;
  border-bottom:1px solid var(--bdr);
  background:var(--brand-bg);
  transition:background .12s;
}
.rb-ip-custom:hover{background:var(--brand-bg2, var(--brand-bg))}
.rb-ip-custom-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surf); color:var(--brand);
  font-size:18px; font-weight:700;
}
.rb-ip-custom-body{flex:1 1 auto; min-width:0}
.rb-ip-custom-title{font-size:13.5px; font-weight:700; color:var(--brand); line-height:1.35}
.rb-ip-custom-sub  {font-size:11px; color:var(--muted); margin-top:2px; line-height:1.35}

/* ── Product picker footer — "⊕ Add New Product →" pill button ─────
   Kept ONLY on the item picker (not customer/phone/GST) per user
   request. Styled as a clear centered pill to feel like a proper CTA. */
.rb-ip-foot{
  padding:12px 16px;
  border-top:1px solid var(--bdr);
  background:var(--surf);
  flex-shrink:0;
  text-align:center;
}
.rb-ip-foot-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px;
  background:transparent;
  border:0;
  border-radius:24px;
  color:var(--brand);
  font-size:14px; font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s;
}
.rb-ip-foot-btn:hover{
  background:var(--brand-bg);
  color:var(--brand-d);
}
.rb-ip-foot-btn .rb-ip-foot-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:15px; line-height:1;
}
.rb-ip-foot-btn .rb-ip-foot-arrow{font-size:16px; line-height:1}

/* Mobile — bump touch target sizes and make the footer pill fuller */
@media (max-width:640px){
  .rb-ip-row{padding:13px 16px; min-height:64px; gap:12px}
  .rb-ip-name{font-size:14.5px}
  .rb-ip-meta{font-size:11.5px}
  .rb-ip-price{font-size:14.5px}
  .rb-ip-tax{font-size:11px}
  .rb-ip-custom{padding:13px 16px}
  .rb-ip-foot{padding:14px 16px}
  .rb-ip-foot-btn{padding:12px 24px; font-size:15px}
}

/* v3.9.395 — Product picker desktop dimensions.
   Extended to cover ALL item pickers (Sale Invoice bi-*, Purchase
   Invoice pu-*, and CDC/Quotation/DC/PL/PO/SO/CN/DN/Proforma cdc-*)
   so they all render at the same 620×480 size. */
[id^="bi-item-drop"].rb-cs-drop,
[id^="pu-item-drop"].rb-cs-drop,
[id^="cdc-item-drop"].rb-cs-drop{ min-width:620px }
[id^="bi-item-drop"] .rb-cs-list,
[id^="pu-item-drop"] .rb-cs-list,
[id^="cdc-item-drop"] .rb-cs-list{ max-height:480px }

/* v3.9.394 — CRITICAL FIX for desktop "old dropdown" issue.

   The Sale Invoice items table has a legacy rule at line 6052:
       .gst-items-tbl .ma-combo-drop { max-width:320px; max-height:340px }
   That caps the drop to 320px wide / 340px tall — even when my inline
   `width:620px !important` in _gstPositionItemDrop tries to override
   (because `max-width` always trumps `width`). Result: on desktop the
   dropdown appeared cramped to the item column with only 4 rows visible,
   which is what the user was seeing as "old dropdown".

   These rules use `.gst-items-tbl .ma-combo-drop.rb-cs-drop` (specificity
   0,0,3,0) — one higher than the offending rule (0,0,2,0) — so my
   overrides win the cascade AND unlock the ceiling with !important so
   inline width/height can actually reach 620px.

   v3.9.395 — Also targets purchase invoice's `.ma-bill-row` wrapper so
   pu-item-drop* isn't clipped by any parent overflow rules. */
.gst-items-tbl .ma-combo-drop.rb-cs-drop,
.ma-qt-v2-items .ma-combo-drop.rb-cs-drop,
.ma-bill-row .ma-combo-drop.rb-cs-drop,
.ma-qt-items .ma-combo-drop.rb-cs-drop{
  max-width:none !important;
  max-height:none !important;
  min-width:620px !important;
  border:1px solid var(--bdr) !important;
  border-radius:12px !important;
}
.gst-items-tbl .ma-combo-drop.rb-cs-drop .rb-cs-list,
.ma-qt-v2-items .ma-combo-drop.rb-cs-drop .rb-cs-list,
.ma-bill-row .ma-combo-drop.rb-cs-drop .rb-cs-list,
.ma-qt-items .ma-combo-drop.rb-cs-drop .rb-cs-list{
  max-height:480px !important;
}
/* Mobile: kill both caps on the rich drop inside items-tbl too, so the
   bottom-sheet fills the full viewport unimpeded. */
@media (max-width:640px){
  .gst-items-tbl .ma-combo-drop.rb-cs-drop,
  .ma-qt-v2-items .ma-combo-drop.rb-cs-drop,
  .ma-bill-row .ma-combo-drop.rb-cs-drop,
  .ma-qt-items .ma-combo-drop.rb-cs-drop{
    max-width:none !important;
    max-height:78vh !important;
    min-width:0 !important;
    border-radius:18px 18px 0 0 !important;
  }
}

/* v3.9.390 — Dark-mode tweaks for both rich-search (customer picker)
   and product picker. Brighter red/green so contrast stays readable
   on slate surfaces; softer row divider using the subtle raise var. */
html[data-theme="dark"] .rb-cs-drop{box-shadow:0 12px 40px rgba(0,0,0,.55)}
html[data-theme="dark"] .rb-cs-opt,
html[data-theme="dark"] .rb-ip-row{border-bottom-color:var(--surf3)}
html[data-theme="dark"] .rb-ip-qty-in {color:#4ADE80}    /* green-400 */
html[data-theme="dark"] .rb-ip-qty-out{color:#F87171}    /* red-400 */

/* ── Mobile responsive: ≤ 640px ──────────────────────────────────
   v3.9.386 — Bottom-sheet redesign. Previous version anchored the
   dropdown to top:64px with position:fixed, which detached it from
   wherever the user tapped — if the customer field was scrolled far
   down the form, the picker appeared way above and felt broken.

   New pattern: the dropdown slides up from the BOTTOM of the screen
   like a native iOS/Android picker sheet. It always occupies the
   same slot regardless of the input's position, so users know where
   to look. A dark backdrop with tap-to-dismiss sits behind it.

   Layout:
     ┌─────────────────────────────────────┐
     │  (backdrop, tap to close)           │
     │                                     │
     │  ┌───────────────────────────────┐  │
     │  │ Select Customer  + Create Cus │  │  ← sticky header
     │  ├───────────────────────────────┤  │
     │  │ 🔍 Search customers…          │  │  ← sticky search
     │  ├───────────────────────────────┤  │
     │  │ 👤 Default Customer   ₹10k    │  │
     │  │ 👤 kuldeep gandu       ₹0     │  │  ← scrolling list
     │  │ 👤 Trupal Amreliya     ₹0     │  │     (5-6 rows visible)
     │  │ …                             │  │
     │  └───────────────────────────────┘  │
     └─────────────────────────────────────┘ */
@media (max-width:640px){
  /* Full-screen backdrop — tap outside the sheet closes it via the
     existing click-outside handlers in each opener function. */
  .rb-cs-drop.open::before{
    content:'';
    position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    z-index:-1;
    pointer-events:none;
  }

  /* iOS-style drag-handle indicator at the top of the sheet — a small
     grey pill that signals "this is a bottom sheet you can dismiss".
     v3.9.387 addition for native-feel polish. */
  .rb-cs-drop.open::after{
    content:'';
    position:absolute;
    top:6px; left:50%;
    width:36px; height:4px;
    margin-left:-18px;
    background:var(--bdr);
    border-radius:2px;
    pointer-events:none;
    z-index:2;
  }

  /* Bottom-sheet — full width, anchored to the bottom of the screen.
     v3.9.387 — Explicit background:var(--surf) so the sheet always
     reads as an opaque panel over the dark backdrop. Extra top-padding
     leaves room for the drag handle. */
  .rb-cs-drop{
    position:fixed !important;
    top:auto !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:78vh !important;
    height:auto !important;
    z-index:10000 !important;
    background:var(--surf) !important;
    border:0 !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -12px 40px rgba(15,23,42,.28) !important;
    overflow:hidden !important;
    animation:rbCsSheetUp .24s cubic-bezier(.22,.61,.36,1);
    padding-top:14px !important;   /* clears the drag-handle indicator */
  }
  .rb-cs-drop.open{display:flex !important; flex-direction:column}

  /* Header — chunkier, no border-radius issues because sheet has its own */
  .rb-cs-head{padding:12px 16px}
  .rb-cs-head-title{font-size:14px}
  .rb-cs-head-add{font-size:14px; padding:6px 4px}

  /* Search — v3.9.391 mobile flush redesign. Previously the pill had a
     grey border and 10px margin, which read as a "grey background" band
     around the input. Now the search sits flush with the sheet edges
     with just a subtle bottom border to separate it from the list.
     No pill styling on mobile — cleaner, more native-feeling. */
  .rb-cs-search-wrap{
    margin:0 !important;
    padding:12px 16px !important;
    border:0 !important;
    border-bottom:1px solid var(--bdr) !important;
    border-radius:0 !important;
    background:var(--surf) !important;
  }
  .rb-cs-search-wrap svg{width:18px; height:18px}
  .rb-cs-search-wrap input{font-size:16px}

  /* List fills remaining space between search and the sheet's bottom.
     min-height:0 lets the flex child shrink so overflow-y:auto works. */
  .rb-cs-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    background:var(--surf);
    /* Bottom safe-area padding for notched phones. */
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  /* Row — Apple HIG-style 60px min-height tap target. */
  .rb-cs-opt{padding:12px 14px; min-height:60px; gap:12px}
  .rb-cs-av{width:38px; height:38px; font-size:13px}
  .rb-cs-name{font-size:14.5px}
  .rb-cs-sub{font-size:12px}
  .rb-cs-amt{font-size:13.5px}

  /* Footer — sits above the safe-area on notched phones. */
  .rb-cs-foot{
    padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .rb-cs-foot-add{
    font-size:14px; padding:8px 14px;
    background:var(--brand-bg); border-radius:8px;
  }
}

@keyframes rbCsSheetUp{
  from{transform:translateY(100%)}
  to  {transform:translateY(0)}
}

/* ── Small phones: ≤ 400px — even tighter spacing ────────────────── */
@media (max-width:400px){
  .rb-cs-drop{max-height:82vh !important}
  .rb-cs-head{padding:11px 14px}
  .rb-cs-search-wrap{margin:8px 10px; padding:10px 12px}
  .rb-cs-opt{padding:11px 12px; gap:10px}
  .rb-cs-av{width:34px; height:34px; font-size:12px}
  .rb-cs-name{font-size:14px}
}

/* ════════════════════════════════════════════
   MOBILE RESPONSIVE — FULL USER CONTROL PANEL
   Extended fixes for all pages & components
════════════════════════════════════════════ */

/* ── Bill row: item field always full-width on mobile ── */
@media(max-width:768px){
  /* Item combo-wrap spans full row width */
  .ma-bill-row>div:first-child{grid-column:1/-1}

  /* HSN + Qty side by side */
  .ma-bill-row input[id^="bi-h"],
  .ma-bill-row input[id^="bi-q"],
  .ma-bill-row input[id^="pu-h"],
  .ma-bill-row input[id^="pu-q"]{width:100%}

  /* Warranty wrapper spans full row on mobile */
  .ma-bill-row .ma-warr-wrap{grid-column:1/-1;width:100%}

  /* Amount field and delete side by side */
  .ma-bill-row input[id^="bi-a"],
  .ma-bill-row input[id^="pu-a"]{flex:1}

  /* Delete button — bigger tap target */
  .ma-del-btn{
    min-width:36px;min-height:36px;
    border-radius:8px;font-size:15px;
    display:flex;align-items:center;justify-content:center;
  }

  /* Bill box padding reduced */
  .ma-bill-box{padding:14px 12px}

  /* Action row — wrap & full-width buttons */
  .ma-action-row{flex-direction:column;gap:8px}
  .ma-action-row .ma-btn{width:100%;justify-content:center;text-align:center}

  /* GST report 4-col → 2-col */
  .ma-stats[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}

  /* Page sub header wrapping */
  .ma-pg-sub{font-size:12px;line-height:1.5}

  /* Stamp row text wrapping */
  #b-stamp-row,#pu-stamp-row{flex-wrap:wrap}
  #b-stamp-hint,#pu-stamp-hint{display:block;margin-top:3px}

  /* IMEI section mobile fixes */
  .ma-imei-input-row{flex-direction:column}
  .ma-imei-input-row .ma-btn{width:100%}
  .ma-imei-slot{flex-direction:column;align-items:stretch}
  .ma-imei-select{max-width:100%}

  /* Combo drop — prevent clipping */
  .ma-combo-wrap{overflow:visible!important}
  .ma-combo-drop{min-width:260px}

  /* Bill totals — full width on mobile */
  .ma-bill-totals{align-items:stretch}
  .ma-tot-row{justify-content:space-between;min-width:0;width:100%}

  /* Notes + discount row */
  .ma-bill-box>[style*="display:flex"][style*="gap:16px"]{flex-direction:column;gap:10px}
  .ma-bill-box>[style*="display:flex"][style*="gap:16px"] .fg{min-width:0!important;max-width:100%!important;flex:1 1 auto}

  /* Quick action buttons — 3-per-row grid on tablet */
  .ma-qa{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ma-qa-btn{justify-content:center;padding:9px 8px;font-size:12px}

  /* Search row spacing */
  .ma-search-row{gap:8px}
  .ma-search-inp{font-size:14px}

  /* Dashboard two-column chart area */
  .ma-chart-bars{height:100px}

  /* Modal — centered sheet with max height */
  .ma-modal-bg{align-items:flex-end;padding:0}
  .ma-modal{
    border-radius:18px 18px 0 0;
    max-width:100%;
    width:100%;
    max-height:85vh;
    padding:22px 18px 28px;
    margin:0;
  }
  .ma-modal::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--bdr);border-radius:2px;
    margin:0 auto 18px;
  }
  .ma-modal-actions{flex-direction:column-reverse;gap:8px}
  .ma-modal-actions .ma-btn{width:100%;justify-content:center}

  /* Tables in cards — hide scroll hint on tablet */
  .ma-card::before{display:none}
  .ma-tbl{min-width:480px}

  /* Pagination smaller on mobile */
  .ma-pagination button{min-width:30px;height:30px;font-size:12px}
}

/* ════ PHONE ≤ 480px ════ */
@media(max-width:480px){
  /* Bill row → fully stacked single column */
  .ma-bill-row{
    grid-template-columns:1fr!important;
    gap:7px;
    padding:12px;
  }
  .ma-bill-row>*{width:100%!important;grid-column:1/-1!important}
  .ma-bill-row>select{grid-column:1/-1!important;width:100%!important}
  .ma-bill-row .ma-warr-wrap{grid-column:1/-1!important;width:100%!important}

  /* Show previously-hidden amount column */
  .ma-bill-row>*:nth-child(5){display:block!important}

  /* Delete button full-width on phone */
  .ma-del-btn{
    width:100%;border-radius:8px;
    padding:7px;font-size:13px;
    background:var(--red-bg,#fee2e2);color:var(--red,#dc2626);
    border:1.5px solid var(--red-bg,#fee2e2);
  }
  .ma-del-btn:hover{background:var(--red,#dc2626);color:#fff}

  /* Quick actions — 2-per-row */
  .ma-qa{grid-template-columns:1fr 1fr}

  /* Bill box tighter */
  .ma-bill-box{padding:12px 10px;border-radius:10px}

  /* Page header */
  .ma-pg-hdr{margin-bottom:12px}
  .ma-pg-title{font-size:16px}

  /* Topbar tighter */
  .ma-topbar-logo img{display:none}
  .ma-topbar-biz{font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Stats — 1×2 on very small */
  .ma-sc{padding:11px 12px}
  .ma-sc-val{font-size:16px}
  .ma-sc-lbl{font-size:11px}

  /* GST/PL 4-col forced to 2×2 */
  .ma-stats[style*="repeat(4"]{grid-template-columns:1fr 1fr!important}

  /* Settings grid */
  .ma-settings-card{padding:16px 14px 14px}
  .ma-settings-card-hdr{gap:10px;margin-bottom:12px;padding-bottom:10px}

  /* fg-2 fields → stack */
  .fg-2{grid-template-columns:1fr!important}

  /* IMEI tags wrapping */
  .ma-imei-tags{gap:5px}
  .ma-imei-tag{font-size:10px;padding:3px 9px}

  /* Combo drop wider on phone */
  .ma-combo-drop{min-width:calc(100vw - 32px);left:0;right:auto}

  /* Bill actions */
  .ma-action-row{gap:7px}
  .ma-action-row .ma-btn{padding:10px 14px;font-size:13px}

  /* Modal full bottom sheet */
  .ma-modal{max-height:92vh;padding:18px 16px 24px}

  /* Table hint visible again on phone */
  .ma-card::before{
    display:block;
    font-size:10px;color:var(--hint);
    padding:4px 14px;text-align:center;
  }

  /* Purchase invoice action buttons */
  #pg-purchase .ma-action-row .ma-btn:last-child{margin-left:0!important;margin-top:0}

  /* Pagination */
  .ma-pagination{gap:3px}
  .ma-pagination .ma-pg-info{display:none}
}

/* ════ VERY SMALL ≤ 360px ════ */
@media(max-width:360px){
  .ma-topbar{padding:0 8px;gap:6px}
  .ma-qa{grid-template-columns:1fr}
  .ma-bill-box{padding:10px 8px}
  .ma-main{padding:8px}
  .ma-pg-title{font-size:15px}
  .ma-stats[style*="repeat(4"]{grid-template-columns:1fr!important}
  .ma-modal{padding:16px 12px 20px}
}

/* ── Smooth dropdown on mobile touch ── */
@media(hover:none){
  .ma-combo-opt:active{background:var(--brand-bg,var(--brand-bg))}
  .ma-qa-btn:active,.ma-btn:active{opacity:.8;transform:scale(.98)}
  .ma-nav-lnk:active{background:var(--surf3)}
}

/* ── Prevent horizontal overflow on body ── */
@media(max-width:768px){
  body{overflow-x:hidden}
  .ma-main{overflow-x:hidden;padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}
  #bill-rows,#pu-bill-rows{overflow:visible}
}

/* ── Safe area for notched phones ── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  @media(max-width:768px){
    /* sidebar padding-bottom already set inline above */
    .ma-topbar{padding-top:env(safe-area-inset-top)}
  }
}

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE — USER CONTROL PANEL
   Full coverage: Dashboard · Invoices · Stock · Customers ·
   Purchase · GST · P&L · Expenses · Settings · Data & Backup
   ══════════════════════════════════════════════════════════ */

/* ── iOS/Android: prevent auto-zoom on input focus (min 16px) ── */
@media(max-width:768px){
  input,select,textarea{font-size:16px!important}
  .ma-combo-search{font-size:15px!important}
  .ma-bill-row input,.ma-bill-row select{font-size:14px!important}
}

/* ══════════════════════════════════════════════════════════
   TOPBAR  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .ma-topbar-right{gap:6px}
  .ma-topbar-right .ma-btn{padding:6px 10px;font-size:12px}

  /* biz name ellipsis on overflow */
  .ma-topbar-biz{
    max-width:140px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER with action buttons  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .ma-pg-hdr{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin-bottom:14px;
  }
  .ma-pg-hdr .ma-btn{margin-left:auto;white-space:nowrap}
  .ma-pg-sub{width:100%;margin-top:0}
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Quick action pills — 2×2 grid */
  .ma-qa{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .ma-qa-btn{
    justify-content:center;text-align:center;
    padding:10px 8px;font-size:13px;
    border-radius:10px;
  }

  /* Stats cards — 2 per row */
  .ma-stats{grid-template-columns:1fr 1fr!important;gap:10px}
  .ma-sc{padding:12px 13px}
  .ma-sc-val{font-size:18px}
  .ma-sc-lbl{font-size:11px}
  .ma-sc-badge{font-size:10px;padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}

  /* Two-column chart + recent invoices → stack */
  .ma-two{grid-template-columns:1fr}

  /* Chart bar height */
  .ma-chart-bars{height:90px}
}

@media(max-width:480px){
  /* Quick actions — 2 per row on phone */
  .ma-qa{grid-template-columns:1fr 1fr}
  .ma-qa-btn{font-size:12px;padding:9px 6px}

  /* Stats — still 2-col on phone, text smaller */
  .ma-stats{grid-template-columns:1fr 1fr!important}
  .ma-sc-val{font-size:16px}
}

@media(max-width:360px){
  /* Stats single column on very small phones */
  .ma-stats{grid-template-columns:1fr!important}
  .ma-qa{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   TABLES — per-page min-width tuning  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Customers — 7 cols */
  #pg-customers .ma-tbl{min-width:620px}
  /* Stock — 9 cols */
  #pg-stock .ma-tbl{min-width:700px}
  /* Sale invoices — 6 cols */
  #pg-invoices .ma-tbl{min-width:540px}
  /* Purchase invoices — 6 cols */
  #pg-purchase-invoices .ma-tbl{min-width:540px}
  /* GST slab/invoice tables */
  #pg-gst .ma-tbl{min-width:500px}
  /* P&L table */
  #pg-pl .ma-tbl{min-width:360px}
  /* Expenses table — 5 cols */
  #pg-expenses .ma-tbl{min-width:460px}

  /* Scroll hint bar shown on all tables */
  .ma-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ══════════════════════════════════════════════════════════
   SEARCH ROWS  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-search-row{flex-direction:column;gap:8px}
  .ma-search-row .ma-btn{width:100%;justify-content:center}
  .ma-search-inp{width:100%;box-sizing:border-box}
}

/* ══════════════════════════════════════════════════════════
   GST REPORT PAGE  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #pg-gst>[style*="display:flex"]{
    flex-direction:column;align-items:stretch!important;gap:10px!important
  }
  #pg-gst .fg{margin:0!important;width:100%}
  #pg-gst .fg input{width:100%;box-sizing:border-box}
  #pg-gst .ma-btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════
   PROFIT & LOSS PAGE  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  #pg-pl .ma-stats{grid-template-columns:1fr 1fr!important}
  #pg-pl .ma-sc-val{font-size:15px}
}

/* ══════════════════════════════════════════════════════════
   EXPENSES PAGE  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  #pg-expenses .ma-bill-box{max-width:100%!important}
  #pg-expenses .fg-2{grid-template-columns:1fr}
  #pg-expenses .ma-btn{width:100%;margin-top:4px;justify-content:center}
}

/* ══════════════════════════════════════════════════════════
   SETTINGS PAGE  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Main settings 2-col → 1-col */
  .ma-settings-grid{grid-template-columns:1fr!important}

  /* Password section grid override (inline style) */
  #pg-settings>[style*="margin-top:28px"] .ma-settings-grid{
    grid-template-columns:1fr!important
  }

  /* Settings cards — tighter padding */
  .ma-settings-card{padding:16px 14px 14px}
  .ma-settings-card-hdr{gap:10px;margin-bottom:12px;padding-bottom:10px}
  .ma-settings-card-icon{font-size:18px}
  .ma-settings-card-title{font-size:13px}

  /* FG grids inside settings → single column */
  .ma-settings-card .fg-2{grid-template-columns:1fr}
  .ma-settings-card .fg-3{grid-template-columns:1fr}

  /* Logo upload box */
  .ma-logo-upload-box{padding:12px}
  .ma-logo-upload-btn{width:100%;justify-content:center;box-sizing:border-box}

  /* Save button full width */
  #pg-settings .ma-btn.p{width:100%;justify-content:center}

  /* Keyboard shortcut section */
  .ma-shortcut-grid{gap:6px}
  .ma-sk-row{flex-direction:column;align-items:flex-start;gap:4px;padding:6px 0}
  .ma-sk-badge{flex-wrap:wrap;gap:3px}
  .ma-sk-badge kbd{font-size:10px;padding:2px 5px}
  .ma-sk-desc{font-size:12px}

  /* Toggle switch position */
  .ma-settings-card-hdr .ma-shortcut-toggle{flex-shrink:0}
}

@media(max-width:480px){
  /* Password field full width */
  #chpw-new,#chpw-confirm{font-size:15px}

  /* Password rules cards — smaller text */
  .chpw-rule{padding:8px 10px!important;gap:8px!important}
  .chpw-rule-icon{font-size:15px!important;min-width:20px!important}
  #chpw-rules>[div]>div>div:first-child{font-size:12px!important}
  #chpw-rules>[div]>div>div:last-child{font-size:10px!important}

  /* Change password button */
  #chpw-btn{font-size:13px!important;padding:10px!important}
}

/* ══════════════════════════════════════════════════════════
   DATA & BACKUP PAGE  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .ma-dio-section{padding:14px 14px}
  .ma-dio-sec-hdr{flex-direction:column;gap:10px}
  .ma-dio-sec-icon{width:36px;height:36px}
  .ma-dio-grid{grid-template-columns:1fr}
  .ma-dio-chips{flex-wrap:wrap;gap:6px}
  .ma-dio-chip{font-size:12px;padding:5px 12px}
  .ma-dio-format-cards{flex-wrap:wrap;gap:8px}
  .ma-dio-fmt{flex:1 1 calc(50% - 8px);min-width:80px}
}

@media(max-width:480px){
  .ma-dio-fmt{flex:1 1 calc(33% - 8px);min-width:70px;font-size:11px;padding:9px 6px}
}

/* ══════════════════════════════════════════════════════════
   CARD HEADERS with flex buttons  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-card-hdr{flex-wrap:wrap;gap:6px}
  .ma-card-hdr .ma-btn{font-size:11px;padding:5px 10px}
}

/* ══════════════════════════════════════════════════════════
   MODAL BOTTOM SHEET — complete on mobile  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-modal-bg{align-items:flex-end!important;padding:0!important}
  .ma-modal{
    border-radius:20px 20px 0 0!important;
    max-width:100%!important;width:100%!important;
    max-height:90vh!important;
    padding:20px 16px 28px!important;
    margin:0!important;
    overflow-y:auto;
  }
  /* Drag handle */
  .ma-modal::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--bdr);border-radius:2px;
    margin:0 auto 16px;
  }
  .ma-modal-actions{flex-direction:column-reverse;gap:8px}
  .ma-modal-actions .ma-btn{width:100%!important;justify-content:center}

  /* Form grids inside modals → single column */
  .ma-modal .fg-2{grid-template-columns:1fr!important}
  .ma-modal .fg-3{grid-template-columns:1fr!important}
}

/* ══════════════════════════════════════════════════════════
   BILL / PURCHASE INVOICE FORM  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  /* Bill top section stack */
  .ma-bill-top{grid-template-columns:1fr!important}

  /* Action row full-width buttons */
  .ma-action-row{flex-direction:column;gap:8px}
  .ma-action-row .ma-btn{
    width:100%!important;justify-content:center;
    padding:11px 14px;font-size:13px;
  }

  /* Notes / discount inline row → stacked */
  .ma-bill-box>[style*="display:flex"]{flex-direction:column!important;gap:10px!important}

  /* Bill totals — full width, label + value spread */
  .ma-bill-totals{align-items:stretch!important}
  .ma-tot-row{
    justify-content:space-between!important;
    gap:8px!important;min-width:0!important;
    width:100%!important;
  }
  .ma-tot-grand{font-size:15px}

  /* Print/save buttons in purchase page */
  #pg-purchase .ma-bill-box>[style*="display:flex;gap"] .ma-btn{
    flex:1 1 auto;justify-content:center;
  }
}

/* ══════════════════════════════════════════════════════════
   COMBO DROPDOWN  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-combo-drop{
    min-width:calc(100vw - 24px)!important;
    left:0!important;right:auto!important;
    max-height:50vh;
  }
  .ma-combo-list{max-height:calc(50vh - 50px)}
  .ma-combo-search{font-size:15px!important;padding:10px 12px}
  .ma-combo-opt{padding:11px 12px}
  .ma-combo-opt-name{font-size:14px}
  .ma-combo-opt-sub{font-size:11px}
}

/* ══════════════════════════════════════════════════════════
   PAGINATION  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-pagination{gap:3px;flex-wrap:wrap;justify-content:center}
  .ma-pagination button{min-width:32px;height:32px;font-size:12px}
  .ma-pg-info{display:none}
}

/* ══════════════════════════════════════════════════════════
   IMEI SECTION  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-imei-input-row{flex-direction:column;gap:8px}
  .ma-imei-input-row .ma-btn{width:100%;justify-content:center}
  .ma-imei-tags{gap:5px;flex-wrap:wrap}
  .ma-imei-tag{font-size:11px;padding:4px 10px}
}

/* ══════════════════════════════════════════════════════════
   HORIZONTAL SCROLL HINT on tables  ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media(max-width:480px){
  .ma-card::before{
    content:'← Scroll →';
    display:block;font-size:10px;color:var(--hint);
    padding:5px 14px;text-align:center;letter-spacing:.5px;
  }
  /* v3.9.480 — Hide the hint on cards that don't have horizontally-
     scrollable content (dashboard chart cards, summary cards, etc.).
     The hint made sense on data tables that overflow; on chart cards
     which fit the viewport it just wastes vertical space. */
  .ma-inv-summary-card::before,
  .ma-nve-card::before,
  .ma-card:has(> .ma-card-body > .ma-graph)::before,
  .ma-card:has(.ma-dash-svp-chart)::before,
  .ma-card:has(.ma-dash-ive-chart)::before,
  .ma-card:has(.ma-dash-paysum-donut)::before,
  .ma-card:has(.ma-kpi3-eichart-donut)::before,
  .ma-card:has(.ma-kpi3-eichart-bars)::before{
    display:none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PREVENT HORIZONTAL OVERFLOW  ≤ 768px
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100vw}
  .ma-main{overflow-x:hidden;max-width:100%}
  .ma-pg{max-width:100%;overflow-x:hidden}
  *{box-sizing:border-box}
}

/* ══════════════════════════════════════════════════════════
   TOUCH DEVICE — larger tap targets & active states
   ══════════════════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  .ma-btn{min-height:40px}
  .ma-qa-btn{min-height:44px}
  .ma-nav-lnk{min-height:42px}
  .ma-combo-opt{min-height:44px}
  .ma-del-btn{min-width:40px;min-height:40px}
  .ma-tbl td{padding:11px 14px}

  /* Active states for touch feedback */
  .ma-btn:active{opacity:.8;transform:scale(.98)}
  .ma-qa-btn:active{opacity:.8;transform:scale(.98)}
  .ma-combo-opt:active{background:var(--brand-bg,var(--brand-bg))}
  .ma-nav-lnk:active{background:var(--surf3)}
}

/* ══════════════════════════════════════════════════════════
   PENDING PAYMENTS PAGE
   ══════════════════════════════════════════════════════════ */
#pg-pending-payment .ma-pg-title { color: var(--ma-danger, #dc3545); }

/* Customer row – click effect */
#pp-cust-tbody tr { transition: background .15s; }
#pp-cust-tbody tr:hover { background: var(--surf2, #f8f9fa); cursor: default; }

/* Amount – negative (pending) */
.pp-neg { color: var(--ma-danger, #dc3545); font-weight: 700; }
/* Amount – positive (cleared) */
.pp-pos { color: var(--ma-success, #0EA5E9); font-weight: 700; }

/* Back button row */
#pp-invoice-view .ma-search-row { gap: 10px; margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════
   MOBILE SCROLL FIX — ensure all sections fully visible
   Fixes: sidebar items clipped, main content bottom cutoff
   ══════════════════════════════════════════════════════════ */
@media screen and (max-width:768px){
  /* Let the page scroll naturally on mobile */
  html,body{
    height:auto!important;
    min-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  #ma-shell{
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
  }
  .ma-body{
    overflow:visible!important;
    flex:1!important;
    min-height:0!important;
  }
  .ma-main{
    overflow-y:visible!important;
    height:auto!important;
    min-height:0!important;
    /* extra bottom clearance so content isn't hidden behind browser chrome */
    padding-bottom:80px!important;
  }
  /* Sidebar drawer: fixed, full height, internally scrollable */
  .ma-sidebar{
    position:fixed!important;
    top:0!important;left:0!important;
    height:100%!important;
    height:100dvh!important; /* dynamic viewport height - accounts for browser chrome */
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SUBSCRIPTION / PRICING / PLAN-GATE  (added v2.6 — plan flow)
   ════════════════════════════════════════════════════════════════ */

/* Landing page button additions */
.btn-ghost{padding:9px 20px;background:transparent;border:1.5px solid var(--bdr);border-radius:8px;color:#e2e8f0;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-hero-s{padding:15px 36px;background:#fff;border:1.5px solid var(--bdr);border-radius:10px;color:var(--text);font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-hero-s:hover{border-color:var(--brand);color:var(--brand)}
.ma-nav-links{display:flex;gap:10px;align-items:center}

/* Pricing / plan-gate page wrapper */
.ma-pricing{min-height:100vh;background:linear-gradient(135deg,#f8fafc 0%,var(--brand-bg) 100%);padding:40px 20px;overflow-y:auto}
.ma-pricing-wrap{max-width:560px;margin:0 auto}
/* Wider wrapper when showing the 3-plan grid */
#ma-pricing .ma-pricing-wrap{max-width:1140px}
.ma-pricing-head{text-align:center;margin-bottom:32px}
.ma-pricing-title{font-size:32px;font-weight:800;letter-spacing:-.5px;margin:14px 0 6px;color:var(--text)}
.ma-pricing-sub{font-size:15px;color:var(--muted);margin:0 auto 18px;max-width:480px;line-height:1.5}
.ma-plan-grid{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.ma-plan-card{
  background:#fff;border:1.5px solid var(--bdr);border-radius:18px;
  padding:30px 26px 26px;width:100%;max-width:440px;
  box-shadow:0 6px 22px rgba(15,23,42,.05);
  position:relative;transition:transform .18s,box-shadow .18s;
  display:flex;flex-direction:column;            /* flex column so the button can pin to bottom */
}
.ma-plan-card.popular{border-color:var(--brand);box-shadow:0 10px 32px rgba(37,99,235,.15)}
.ma-plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(37,99,235,.18)}
.ma-plan-badge{position:absolute;top:-12px;right:24px;background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.4px;text-transform:uppercase}
.ma-plan-name{font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;white-space:nowrap}
.ma-plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.ma-plan-amt{font-size:42px;font-weight:900;color:var(--brand);letter-spacing:-1px;line-height:1}
.ma-plan-period{font-size:14px;color:var(--muted);font-weight:600}
.ma-plan-tag{font-size:12px;color:#0EA5E9;font-weight:700;background:#f0fdf4;display:inline-block;padding:4px 10px;border-radius:6px;margin-bottom:18px;align-self:flex-start}
.ma-plan-feats{list-style:none;padding:0;margin:0 0 22px;font-size:14px;color:var(--text);line-height:1.7;flex:1 1 auto}
.ma-plan-feats li{padding:4px 0;color:#334155}
.ma-plan-feats li strong{color:var(--text);font-weight:700}
/* Strong override for the purchase button — the legacy .ma-plan-btn rule
   uses a translucent-white background which becomes invisible on the
   new pricing-card's white background. We force a solid brand gradient. */
.ma-plan-card .ma-plan-btn,
.ma-plan-card .btn-full.ma-plan-btn{
  width:100%!important;
  padding:15px 18px!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
  border:none!important;
  border-radius:11px!important;
  cursor:pointer!important;
  background:linear-gradient(135deg,var(--brand),var(--brand-d))!important;
  color:#fff!important;
  box-shadow:0 6px 18px rgba(37,99,235,.25)!important;
  transition:transform .15s,box-shadow .15s,background .2s!important;
  margin-top:auto!important;                     /* pin button to bottom of card */
}
.ma-plan-card .ma-plan-btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 24px rgba(37,99,235,.35)!important;
}
.ma-plan-card .ma-plan-btn:active{transform:translateY(0)!important}
.ma-plan-card .ma-plan-btn:disabled{
  opacity:.6!important;cursor:wait!important;transform:none!important;
}
.ma-plan-secure{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}
.ma-pricing-foot{text-align:center;margin-top:32px;padding:24px;background:#fff;border:1px solid var(--bdr);border-radius:12px}

/* 3-plan grid override — replaces the simpler version I appended earlier */
.ma-plan-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;                            /* all cards stretch to tallest */
  max-width:1080px;
  margin:0 auto;
}
.ma-plan-grid-3 .ma-plan-card{
  max-width:none;                                  /* let the grid control width */
  padding:28px 22px 24px;
}
.ma-plan-grid-3 .ma-plan-name{font-size:20px}     /* slightly smaller so it never wraps */
.ma-plan-grid-3 .ma-plan-amt{font-size:36px}
.ma-plan-grid-3 .ma-plan-feats{font-size:13.5px;margin-bottom:18px}

@media (max-width:880px){
  .ma-plan-grid-3{grid-template-columns:1fr;max-width:440px}
  .ma-plan-grid-3 .ma-plan-name{font-size:22px}
  .ma-plan-grid-3 .ma-plan-amt{font-size:42px}
}

@media (max-width:480px){
  .ma-pricing{padding:24px 14px}
  .ma-pricing-title{font-size:26px}
  .ma-plan-card{padding:24px 22px}
  .ma-plan-amt{font-size:36px}
}

/* ══════════════════════════════════════════════════════════════════
   v3.9.439 — Modern pricing card refresh (opt-in via .v2 / .ma-plan-grid-v2)
   Kept alongside the legacy .ma-plan-card styles so nothing else in
   the app breaks. Cards using the .v2 class get: airier padding,
   cleaner typography, a subtle gradient hero card, a tick pill,
   a top-corner "Save X" tag, and a stronger MOST POPULAR badge.
══════════════════════════════════════════════════════════════════ */
.ma-plan-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  max-width:1120px;
  margin:0 auto;
  align-items:stretch;
}
@media (max-width: 980px){
  .ma-plan-grid-v2{ grid-template-columns:1fr; max-width:460px; }
}

.ma-plan-card.v2{
  background:#fff;
  border:1.5px solid #eaeef4;
  border-radius:20px;
  padding:30px 26px 24px;
  max-width:none;
  position:relative;
  display:flex; flex-direction:column;
  box-shadow:0 4px 18px rgba(15,23,42,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ma-plan-card.v2:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 38px rgba(15,23,42,.08);
  border-color:#dbe3ef;
}
.ma-plan-card.v2.popular{
  background:linear-gradient(180deg, #f9fbff 0%, #ffffff 55%);
  border-color:#4f46e5;
  box-shadow:0 14px 42px rgba(79,70,229,.14);
  transform:translateY(-4px);
}
.ma-plan-card.v2.popular:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(79,70,229,.18);
}

/* MOST POPULAR badge — pill above the card */
.ma-plan-badge-v2{
  position:absolute;
  top:-12px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, #6366f1, #4f46e5);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.2px;
  padding:6px 14px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(79,70,229,.32);
}

.ma-plan-card.v2 .ma-plan-name{
  font-size:15px;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin:0 0 6px;
  white-space:nowrap;
}
.ma-plan-card.v2.popular .ma-plan-name{ color:#4f46e5; }

.ma-plan-tag-top{
  font-size:12px;
  color:#059669;
  font-weight:600;
  margin-bottom:16px;
  min-height:16px;
}
.ma-plan-card.v2.popular .ma-plan-tag-top{ color:#4f46e5; }

.ma-plan-card.v2 .ma-plan-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-bottom:24px;
  padding-bottom:22px;
  border-bottom:1px solid #f1f4f9;
}
.ma-plan-cur{
  font-size:20px;
  font-weight:700;
  color:#111;
  line-height:1;
  margin-right:2px;
}
.ma-plan-card.v2 .ma-plan-amt{
  font-size:46px;
  font-weight:800;
  color:#111;
  letter-spacing:-1.5px;
  line-height:1;
}
.ma-plan-card.v2 .ma-plan-period{
  font-size:14px;
  color:#6b7280;
  font-weight:500;
  margin-left:4px;
}

.ma-plan-card.v2 .ma-plan-feats{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  font-size:13.5px;
  color:#374151;
  line-height:1.5;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ma-plan-card.v2 .ma-plan-feats li{
  padding:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#374151;
}
.ma-plan-card.v2 .ma-plan-feats li b{ color:#111; font-weight:700; }

.ma-plan-tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:#dcfce7;
  color:#16a34a;
  flex-shrink:0;
  margin-top:1px;
}
.ma-plan-card.v2.popular .ma-plan-tick{
  background:#e0e7ff;
  color:#4f46e5;
}

.ma-plan-card.v2 .ma-plan-btn.v2,
.ma-plan-card.v2 .btn-full.ma-plan-btn.v2{
  width:100%;
  padding:14px 18px;
  font-size:14.5px;
  font-weight:700;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  color:#374151;
  cursor:pointer;
  transition:all .15s ease;
  margin-top:auto;
  box-shadow:none;
  letter-spacing:.2px;
}
.ma-plan-card.v2 .ma-plan-btn.v2:hover{
  background:#f9fafb;
  border-color:#4f46e5;
  color:#4f46e5;
}
.ma-plan-card.v2 .ma-plan-btn.v2.featured,
.ma-plan-card.v2 .btn-full.ma-plan-btn.v2.featured{
  background:linear-gradient(135deg, #6366f1, #4f46e5);
  border-color:#4f46e5;
  color:#fff;
  box-shadow:0 6px 20px rgba(79,70,229,.28);
}
.ma-plan-card.v2 .ma-plan-btn.v2.featured:hover{
  background:linear-gradient(135deg, #4f46e5, #4338ca);
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(79,70,229,.36);
  color:#fff;
}

@media (max-width:480px){
  .ma-plan-card.v2{ padding:26px 22px 22px; }
  .ma-plan-card.v2 .ma-plan-amt{ font-size:40px; }
}

/* Dark mode support for the v2 cards */
html[data-theme="dark"] .ma-plan-card.v2{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .ma-plan-card.v2.popular{ background:linear-gradient(180deg,#1a2440 0%,#1e293b 60%); }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-name{ color:#94a3b8; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-price{ border-color:#334155; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-amt,
html[data-theme="dark"] .ma-plan-cur{ color:#f1f5f9; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-feats li{ color:#cbd5e1; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-feats li b{ color:#f1f5f9; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-btn.v2{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-btn.v2:hover{ background:#1e293b; color:#a5b4fc; border-color:#4f46e5; }

/* My Subscription page */
.ma-sub-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media (max-width:760px){.ma-sub-grid{grid-template-columns:1fr}}
.ma-sub-card{background:#fff;border:1px solid var(--bdr);border-radius:14px;padding:24px;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.ma-sub-card.primary{background:linear-gradient(135deg,var(--brand-bg) 0%,#fff 60%);border-color:#bfdbfe}
.ma-sub-card.warn{text-align:center;padding:40px 24px;border-color:#fbbf24;background:var(--brand-bg)}
.ma-sub-plan-name{font-size:24px;font-weight:800;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ma-sub-trial-tag{font-size:11px;font-weight:700;background:var(--brand-bg2);color:#92400e;padding:3px 9px;border-radius:6px;letter-spacing:.3px;text-transform:uppercase}
.ma-sub-status-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ma-sub-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.ma-sub-badge.active{background:#E0F2FE;color:#0369A1}
.ma-sub-badge.expired{background:#fee2e2;color:#b91c1c}
.ma-sub-badge.cancelled{background:#f1f5f9;color:#64748b}
.ma-sub-badge.pending{background:#fef3c7;color:#92400e}
.ma-sub-days{display:flex;align-items:baseline;gap:8px;margin:14px 0 10px}
.ma-sub-days-num{font-size:48px;font-weight:900;color:var(--brand);letter-spacing:-1.5px;line-height:1}
.ma-sub-days-num.warn{color:#dc2626}
.ma-sub-days-lbl{font-size:14px;color:var(--muted);font-weight:600}
.ma-sub-progress{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-top:6px}
.ma-sub-progress-bar{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-d));transition:width .4s}
.ma-sub-progress-bar.warn{background:linear-gradient(90deg,#f59e0b,#dc2626)}
.ma-sub-section-ttl{font-size:13px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.ma-sub-deet{width:100%;font-size:14px;border-collapse:collapse}
.ma-sub-deet th{text-align:left;padding:8px 0;color:var(--muted);font-weight:500;width:140px;font-size:13px}
.ma-sub-deet td{padding:8px 0;color:var(--text);font-weight:600}
.ma-sub-history{width:100%;border-collapse:collapse;font-size:13px}
.ma-sub-history th{text-align:left;padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--bdr);font-weight:700;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.ma-sub-history td{padding:10px 12px;border-bottom:1px solid #f1f5f9;color:var(--text)}
.ma-sub-history tr:last-child td{border-bottom:0}

/* ─── Trial & 3-plan layout additions ─── */
.btn-trial{padding:8px 16px;border-radius:8px;border:1.5px solid var(--brand-d);background:transparent;color:var(--brand-d);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.btn-trial:hover{background:var(--brand-d);color:#fff}
.btn-hero-trial{padding:14px 28px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;border:2px solid var(--brand-d);background:transparent;color:var(--brand-d);transition:.18s}
.btn-hero-trial:hover{background:var(--brand-d);color:#fff;transform:translateY(-1px)}

/* When the pricing screen shows 3 plans, give it a wider container */
#ma-pricing .ma-pricing-wrap{max-width:1140px}

.ma-plan-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
  margin-top:8px;
}
.ma-plan-grid-3 .ma-plan-card{
  display:flex;
  flex-direction:column;
  max-width:none;
  width:auto;
  padding:32px 26px 28px;
  margin:0;
}
.ma-plan-grid-3 .ma-plan-card.popular{
  border-width:2px;
  border-color:var(--brand);
  box-shadow:0 14px 40px rgba(37,99,235,.18);
  position:relative;
}
.ma-plan-grid-3 .ma-plan-name{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-plan-grid-3 .ma-plan-amt{font-size:36px}
.ma-plan-grid-3 .ma-plan-tag{font-size:11px;padding:3px 9px;white-space:nowrap}
.ma-plan-grid-3 .ma-plan-feats{flex:1 1 auto;margin-bottom:18px;font-size:13.5px;line-height:1.65}
.ma-plan-grid-3 .ma-plan-feats li{padding:3px 0}
.ma-plan-grid-3 .ma-plan-card .ma-plan-btn{
  margin-top:auto;
  font-size:14px!important;
  padding:13px 14px!important;
  white-space:nowrap;
}
.ma-plan-grid-3 .ma-plan-secure{margin-top:10px;font-size:11px}

@media(max-width:880px){
  .ma-plan-grid-3{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .ma-plan-grid-3 .ma-plan-name{font-size:22px;white-space:normal}
}

.ma-plan-btn.featured{background:linear-gradient(135deg,var(--brand),#7c3aed)!important;box-shadow:0 6px 20px rgba(37,99,235,.35)!important}
.ma-plan-btn.featured:hover{box-shadow:0 8px 28px rgba(37,99,235,.5)!important}

/* ════════════════════════════════════════════
   LANDING PAGE — DEEP-DIVE SECTIONS
═══════════════════════════════════════════ */
.ma-deep{padding:80px 24px;background:#fff}
.ma-deep.alt{background:linear-gradient(180deg,#f8fafc,#fff)}
.ma-deep-row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ma-deep-row.reverse .ma-deep-text{order:2}
.ma-deep-row.reverse .ma-deep-mock{order:1}
.ma-deep-tag{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--brand-bg2);color:var(--brand-dd);font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:14px}
.ma-deep-text h2{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.2;margin:0 0 14px;color:var(--text)}
.ma-deep-text > p{font-size:16px;color:#475569;line-height:1.65;margin:0 0 22px}
.ma-deep-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ma-deep-list li{padding-left:24px;position:relative;font-size:14.5px;color:#334155;line-height:1.55}
.ma-deep-list li::before{content:"✓";position:absolute;left:0;top:0;color:#0EA5E9;font-weight:900;font-size:15px}
.ma-deep-list li strong{color:var(--text);font-weight:700}
.ma-deep-mock{display:flex;justify-content:center}

/* Mock visual cards */
.ma-mock-card{
  width:100%;max-width:380px;background:#fff;border:1.5px solid var(--bdr);border-radius:14px;
  padding:20px;box-shadow:0 12px 36px rgba(15,23,42,.08);font-size:13.5px
}
.ma-mock-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-weight:700}
.ma-mock-row.sub{font-weight:500;color:var(--muted);font-size:12px;padding:2px 0 12px;border-bottom:1px dashed #e2e8f0;margin-bottom:8px}
.ma-mock-line{display:flex;justify-content:space-between;padding:5px 0;color:#334155}
.ma-mock-tot{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed #e2e8f0;color:#475569;font-weight:600}
.ma-mock-tot.grand{font-weight:900;font-size:15px;color:var(--text);border-top:2px solid var(--text);margin-top:4px}
.ma-mock-stock{display:grid;grid-template-columns:1fr 110px 36px;gap:10px;align-items:center;padding:6px 0;font-size:13px}
.ma-mock-stock .bar{display:block;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.ma-mock-stock .bar > span{display:block;height:100%;border-radius:3px}
.ma-mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 14px}
.ma-mock-grid .lbl{font-size:11px;color:var(--muted);font-weight:600}
.ma-mock-grid .num{font-size:17px;font-weight:800;margin-top:2px}

/* HOW IT WORKS */
.ma-howto{padding:70px 24px 60px;background:#f8fafc}
.ma-howto-title{text-align:center;font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 36px;color:var(--text)}
.ma-howto-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ma-howto-card{background:#fff;border:1.5px solid var(--bdr);border-radius:16px;padding:30px 24px;text-align:center;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.ma-howto-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.ma-howto-card h3{font-size:18px;font-weight:800;margin:0 0 8px;color:var(--text)}
.ma-howto-card p{font-size:14px;color:#475569;line-height:1.6;margin:0}

/* FAQ */
.ma-faq{padding:60px 24px;max-width:780px;margin:0 auto}
.ma-faq-title{text-align:center;font-size:28px;font-weight:800;letter-spacing:-.5px;margin:0 0 28px;color:#fff;}
.ma-faq-q{background:#fff;border:1.5px solid var(--bdr);border-radius:12px;padding:0;margin-bottom:10px;overflow:hidden;transition:.15s}
.ma-faq-q:hover{border-color:var(--brand)}
.ma-faq-q summary{padding:16px 20px;cursor:pointer;font-weight:700;font-size:15px;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center}
.ma-faq-q summary::-webkit-details-marker{display:none}
.ma-faq-q summary::after{content:"+";font-size:22px;font-weight:300;color:var(--muted);transition:.2s}
.ma-faq-q[open] summary::after{transform:rotate(45deg)}
.ma-faq-q p{margin:0;padding:0 20px 18px;font-size:14px;color:#475569;line-height:1.65}

/* FINAL CTA */
.ma-final-cta{padding:70px 24px;text-align:center;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dd) 100%);color:#fff}
.ma-final-cta h2{font-size:34px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
.ma-final-cta > p{font-size:16px;opacity:.92;margin:0 0 24px}
.ma-final-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ma-final-cta .btn-hero-p,.ma-final-cta .btn-hero-trial{padding:14px 26px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.ma-final-cta .btn-hero-p{background:#fff;color:var(--brand);border:none}
.ma-final-cta .btn-hero-p:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.ma-final-cta .btn-hero-trial{background:transparent;border:2px solid #fff;color:#fff}
.ma-final-cta .btn-hero-trial:hover{background:#fff;color:var(--brand-d)}

@media (max-width:760px){
  .ma-deep{padding:50px 18px}
  .ma-deep-row{grid-template-columns:1fr;gap:32px}
  .ma-deep-row.reverse .ma-deep-text{order:1}
  .ma-deep-row.reverse .ma-deep-mock{order:2}
  .ma-deep-text h2{font-size:24px}
  .ma-howto-grid{grid-template-columns:1fr;max-width:440px}
  .ma-howto-title,.ma-faq-title{font-size:24px}
  .ma-final-cta h2{font-size:26px}
}

/* ════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Only visible on screens ≤ 768px
════════════════════════════════════════════ */
.ma-bottom-nav{
  display:none; /* hidden on desktop */
}

@media screen and (max-width:768px){
  /* Show the bar */
  .ma-bottom-nav{
    display:flex;
    align-items:center;
    justify-content:space-around;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:62px;
    background:var(--surf);
    border-top:1.5px solid var(--bdr);
    z-index:300;
    padding:0 4px;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
  }

  /* Add bottom padding to main content so it's not hidden behind nav */
  .ma-main{
    padding-bottom:calc(74px + env(safe-area-inset-bottom))!important;
  }

  /* Each tab button */
  .ma-bn-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px 0 4px;
    color:var(--muted);
    transition:color .15s;
    -webkit-tap-highlight-color:transparent;
    outline:none;
    min-width:0;
  }

  .ma-bn-item:active{
    transform:scale(.94);
  }

  .ma-bn-item.active{
    color:var(--brand);
  }

  .ma-bn-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:8px;
    transition:background .15s;
  }

  .ma-bn-item.active .ma-bn-icon{
    background:rgba(37,99,235,.1);
  }

  .ma-bn-label{
    font-size:10px;
    font-weight:600;
    letter-spacing:.2px;
    line-height:1;
  }

  /* Centre FAB (+) button */
  .ma-bn-fab{
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--brand);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-bottom:10px;
    box-shadow:0 4px 18px rgba(37,99,235,.45);
    transition:transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color:transparent;
    outline:none;
    position:relative;
    z-index:1;
  }

  .ma-bn-fab:active{
    transform:scale(.92);
    box-shadow:0 2px 10px rgba(37,99,235,.3);
  }
}

/* ════════════════════════════════════════════
   DASHBOARD — INDIA MAP, PAYMENTS, INVENTORY
════════════════════════════════════════════ */
.ma-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* India map */
.ma-mapcard .ma-card-hdr{flex-wrap:wrap;gap:8px}
.ma-map-toggle{display:inline-flex;gap:4px;background:var(--surf3);border-radius:20px;padding:3px}
.ma-map-pill{border:none;background:none;padding:5px 16px;border-radius:18px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s}
.ma-map-pill.active{background:var(--brand);color:#fff;box-shadow:0 1px 4px rgba(37,99,235,.4)}
.ma-two-map{align-items:stretch}
.ma-two-map > .ma-card{margin-bottom:0}
.ma-map-wrap{display:flex;flex-direction:column;gap:12px}
.ma-map-stage{position:relative;width:100%;display:flex;justify-content:center;align-items:center}
#ind-map-svg{width:auto;max-width:100%;height:auto;max-height:360px;display:block;margin:0 auto}
.ind-state{fill:#e1ece9;stroke:#fff;stroke-width:.8;transition:fill .15s,opacity .15s;cursor:pointer}
.ind-state:hover{opacity:.85;stroke:var(--brand-dd);stroke-width:1.2}
.ma-map-tip{position:absolute;pointer-events:none;z-index:5;background:#0f2c25;color:#fff;border-radius:8px;padding:8px 11px;font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;display:none}
.ma-map-tip.show{opacity:1;transform:translateY(0);display:block}
.ma-map-tip b{font-weight:800}
.ma-map-tip .v{color:#93C5FD;font-weight:800}
.ma-map-side{display:flex;flex-direction:column;gap:10px}
.ma-map-side-h{font-size:11px;font-weight:800;color:var(--hint);text-transform:uppercase;letter-spacing:.5px}
.ma-map-toprow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--surf3)}
.ma-map-toprow:last-child{border-bottom:none}
.ma-map-toprow .rank{width:20px;height:20px;border-radius:6px;background:var(--brand-bg);color:var(--brand-dd);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-map-toprow .nm{font-size:12.5px;font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-map-toprow .amt{font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap}
.ma-map-legend{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:10px;color:var(--muted);flex-wrap:wrap}
.ma-map-legend .sw{width:22px;height:9px;border-radius:3px;display:inline-block}
.ma-map-legend .lg-item{display:inline-flex;align-items:center;gap:4px}

/* Payment cards */
.ma-pay-body{display:flex;align-items:center;gap:16px}
.ma-pay-ring{width:74px;height:74px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff}
.ma-pay-in{background:radial-gradient(circle at 30% 30%,var(--brand),var(--brand));box-shadow:0 6px 16px rgba(37,99,235,.3)}
.ma-pay-out{background:radial-gradient(circle at 30% 30%,#fbbf6b,#f59e0b);box-shadow:0 6px 16px rgba(245,158,11,.3)}
.ma-pay-ring-ic{font-weight:900;line-height:1}
.ma-pay-lbl{font-size:11px;color:var(--hint);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ma-pay-val{font-size:22px;font-weight:900;color:var(--text)}

/* Inventory card */
/* v3.9.291 — match target: label + value close together, not spread apart */
.ma-inv-top{display:flex;gap:24px;margin-bottom:0;padding-bottom:0;border-bottom:none}
.ma-inv-k{font-size:14px;color:var(--text);font-weight:700;letter-spacing:0;text-transform:none}
.ma-inv-v{font-size:20px;font-weight:800;color:var(--text);margin-top:4px}
.ma-inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.ma-inv-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);font-weight:500}
.ma-inv-item b{color:var(--text);font-weight:700;margin-left:6px}
.ma-inv-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.ma-inv-dot.d-in{background:var(--brand)}
.ma-inv-dot.d-zero{background:#f6a44b}
.ma-inv-dot.d-low{background:#a878d3}
.ma-inv-dot.d-neg{background:#ee6f78}

/* ── Analytics charts (New vs Existing · Invoice Count · Invoice Amount) ── */
.ma-chart-legend{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.ma-cl-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
/* v3.9.294 — bottom-centered legend variant for Invoice Count/Amount summary */
.ma-chart-legend-bottom{display:flex;justify-content:center;gap:22px;margin-top:14px;padding-top:8px}
.ma-chart-legend-bottom .ma-cl-item{font-size:12px;color:var(--text);font-weight:500}
.ma-chart-legend-bottom .ma-cl-sw{width:12px;height:12px;border-radius:2px;display:inline-block}
.ma-inv-summary-body{padding:18px 22px 14px}
.ma-inv-summary-card .ma-card-hdr{padding:16px 20px}
.ma-inv-summary-card .ma-card-title{font-size:15px;font-weight:700;color:var(--text)}
.ma-cl-sw{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.ma-graph{width:100%}
.ma-graph-svg{width:100%;height:auto;display:block;overflow:visible}
.ma-graph-empty{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--hint);font-size:13px;font-weight:600}
.ma-graph-svg rect,.ma-graph-svg circle{transition:opacity .12s}
.ma-graph-svg rect:hover,.ma-graph-svg circle:hover{opacity:.82}

/* Floating tooltip for hovering bars & dots
   v3.9.294 — light theme matches target: white bg, grey border, dark text */
.ma-graph{position:relative}
.ma-graph-tip{
  position:absolute;pointer-events:none;z-index:8;
  background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;border-radius:6px;
  padding:9px 12px;font-size:12px;line-height:1.55;min-width:140px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;
  display:none;
}
.ma-graph-tip.show{opacity:1;transform:translateY(0);display:block}
.ma-graph-tip .ma-gt-h{font-weight:600;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #eef0f2;color:#0f172a;letter-spacing:0}
.ma-graph-tip .ma-gt-row{display:flex;align-items:center;gap:6px;font-weight:500;margin-bottom:3px;color:#334155;font-size:12px}
.ma-graph-tip .ma-gt-row:last-child{margin-bottom:0}
.ma-graph-tip .ma-gt-row b{font-weight:700;color:#0f172a;margin-left:auto}
.ma-graph-tip .ma-gt-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;display:inline-block}
.ma-graph-tip .ma-gt-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;display:inline-block}
.ma-graph-tip .ma-gt-kv{display:flex;justify-content:space-between;gap:14px;font-size:12px}
.ma-graph-tip .ma-gt-kv span{color:#64748b;font-weight:500}
.ma-graph-tip .ma-gt-kv b{color:#0f172a;font-weight:700}

/* ── Ranged map legend (value bands, dark → light) ── */
.ma-map-legend-ranged{flex-direction:column;align-items:stretch;gap:5px;margin-top:2px}
.ma-map-legend-ranged .ma-lg-row{display:flex;align-items:center;gap:9px}
.ma-map-legend-ranged .sw{width:22px;height:13px;border-radius:3px;flex-shrink:0;display:inline-block}
.ma-map-legend-ranged .rng{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ── Product leaderboards: Best · Least · Low Stock ─────────────────── */
.ma-prodlead .ma-pl-card{position:relative;overflow:hidden;border-radius:var(--rl);transition:transform .15s ease,box-shadow .15s ease}
.ma-prodlead .ma-pl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* Tinted accent strip at the top of each card */
.ma-prodlead .ma-pl-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--rl) var(--rl) 0 0;
}
.ma-pl-best::before {background:linear-gradient(90deg,var(--brand),var(--brand))}
.ma-pl-least::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.ma-pl-low::before  {background:linear-gradient(90deg,#ef4444,#f87171)}

.ma-prodlead .ma-card-hdr{gap:8px}
.ma-pl-icon{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ma-pl-icon-best {background:linear-gradient(135deg,var(--brand),var(--brand));box-shadow:0 2px 6px rgba(37,99,235,.28)}
.ma-pl-icon-least{background:linear-gradient(135deg,#f59e0b,#F59E0B);box-shadow:0 2px 6px rgba(245,158,11,.28)}
.ma-pl-icon-low  {background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 6px rgba(239,68,68,.28)}
.ma-pl-viewall{margin-left:auto;border-radius:14px;font-size:11px !important;padding:3px 12px !important;background:var(--surf2) !important;color:var(--brand-dd) !important;border:1px solid var(--bdr) !important;font-weight:700}
.ma-pl-viewall:hover{background:var(--brand-bg) !important;color:var(--brand-dd) !important;border-color:var(--brand) !important}

.ma-pl-body{padding:8px 14px 12px}
.ma-pl-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;border-bottom:1px solid var(--surf3);
  font-size:10.5px;font-weight:800;color:var(--hint);text-transform:uppercase;letter-spacing:.5px}
.ma-pl-list{display:flex;flex-direction:column}

.ma-pl-row{display:flex;align-items:center;gap:10px;
  padding:9px 6px;border-bottom:1px dashed var(--surf3);transition:background .12s,transform .12s}
.ma-pl-row:last-child{border-bottom:none}
.ma-pl-row:hover{background:var(--surf2)}
.ma-pl-row .ma-pl-rank{width:18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-feature-settings:"tnum"}
.ma-pl-rank-best {background:#E0F2FE;color:#0369A1}
.ma-pl-rank-least{background:#fef3c7;color:#a16207}
.ma-pl-avatar{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;letter-spacing:.2px;text-transform:uppercase}
.ma-pl-name{font-size:12.5px;font-weight:600;color:var(--text);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-pl-qty{font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:14px;white-space:nowrap;font-feature-settings:"tnum"}
.ma-pl-qty-best {background:#E0F2FE;color:#0369A1}
.ma-pl-qty-least{background:#fef3c7;color:#a16207}
.ma-pl-qty-low  {background:#fef3c7;color:#a16207}
.ma-pl-qty-zero {background:#fee2e2;color:#b91c1c}
.ma-pl-qty-neg  {background:#fee2e2;color:#b91c1c}
/* Pulse animation on negative-stock badge to subtly flag attention */
.ma-pl-qty-neg{animation:plNegPulse 2.4s ease-in-out infinite}
@keyframes plNegPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  50%    {box-shadow:0 0 0 4px rgba(239,68,68,.18)}
}

.ma-pl-empty{padding:22px 8px;text-align:center;color:var(--hint);font-size:12.5px;font-weight:600}

@media(max-width:1024px){
  .ma-prodlead{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ma-pl-row{gap:8px}
  .ma-pl-avatar{width:26px;height:26px;font-size:12px}
}

@media(max-width:1024px){
  .ma-three{grid-template-columns:1fr}
  .ma-map-wrap{grid-template-columns:1fr}
  .ma-map-side{flex-direction:column}
}
@media(max-width:560px){
  .ma-inv-grid{grid-template-columns:1fr}
  .ma-pay-val{font-size:19px}
}

/* ════════════════════════════════════════════
   BILL CUSTOMIZATION  (Settings → Bill Customization)
════════════════════════════════════════════ */
.ma-bc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ma-bc-tab{padding:8px 14px;border:1.5px solid var(--bdr);border-radius:9px;background:var(--surf);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .14s;font-family:inherit;white-space:nowrap}
.ma-bc-tab:hover{border-color:var(--accent,#1a56db);color:var(--text)}
.ma-bc-tab.active{background:var(--accent,#1a56db);border-color:var(--accent,#1a56db);color:#fff}
.ma-bc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;margin-top:16px;align-items:start}
.ma-bc-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.ma-bc-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ma-bc-tplcard{border:1.5px solid var(--bdr);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .14s;background:var(--surf)}
.ma-bc-tplcard:hover{border-color:var(--accent,#1a56db)}
.ma-bc-tplcard.active{border-color:var(--accent,#1a56db);box-shadow:0 0 0 2px rgba(26,86,219,.18)}
.ma-bc-tplcard .tpl-mini{height:54px;border-radius:6px;overflow:hidden;border:1px solid var(--bdr);margin-bottom:7px;display:flex;flex-direction:column}
.ma-bc-tplcard .tpl-name{font-size:12px;font-weight:700;color:var(--text)}
.ma-bc-tplcard .tpl-sub{font-size:10px;color:var(--muted);margin-top:1px}
.tpl-mini .tm-bar{height:13px;flex:0 0 auto}
.tpl-mini .tm-body{flex:1;background:#fff;padding:3px 4px;display:flex;flex-direction:column;gap:2px}
.tpl-mini .tm-line{height:2.5px;background:#e2e6ea;border-radius:2px}
.tpl-mini .tm-line.s{width:60%}
.ma-bc-color-row{display:flex;align-items:center;gap:10px}
.ma-bc-color-row input[type=color]{width:46px;height:38px;padding:2px;border:1.5px solid var(--bdr);border-radius:8px;background:var(--surf);cursor:pointer}
.ma-bc-swatches{display:flex;gap:6px;flex-wrap:wrap}
.ma-bc-sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--bdr);transition:transform .1s}
.ma-bc-sw:hover{transform:scale(1.12)}
.ma-bc-sw.active{box-shadow:0 0 0 2px var(--text)}
.ma-bc-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.ma-bc-fld{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--bdr);border-radius:8px;background:var(--bg2,#f7f7f8)}
.ma-bc-fld span{font-size:12.5px;color:var(--text);font-weight:500}
.ma-bc-preview-wrap{position:sticky;top:12px}
.ma-bc-preview{border:1px solid var(--bdr);border-radius:12px;background:#eef1f4;padding:16px;min-height:360px;overflow:auto}
/* preview internal bill mock */
.bcp-bill{background:#fff;border:1px solid #000;font-family:Arial,sans-serif;color:#000;font-size:9px;line-height:1.3}
.bcp-hdr{display:flex;align-items:center;gap:8px;border-bottom:1px solid #000;padding:6px 8px}
.bcp-logo{width:30px;height:30px;border-radius:5px;background:#dce3ea;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.bcp-bizname{font-size:14px;font-weight:900}
.bcp-bizaddr{font-size:8px;color:#333;margin-top:1px}
.bcp-memo{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #000;padding:2px 8px;font-weight:700;font-size:8px}
.bcp-memo .c{font-weight:900;letter-spacing:2px;font-size:10px}
.bcp-meta{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid #000;font-size:8.5px}
.bcp-meta .l{padding:5px 8px;border-right:1px solid #000}
.bcp-meta .r{padding:5px 8px}
.bcp-meta .row{display:flex;gap:4px;margin-bottom:1px}
.bcp-meta .k{color:#444;min-width:62px}
.bcp-tbl{width:100%;border-collapse:collapse}
.bcp-tbl th{font-size:8px;border-bottom:1px solid #000;padding:3px 4px;text-align:left;background:#f0f2f4}
.bcp-tbl td{font-size:8px;border-bottom:1px solid #e4e8ec;padding:3px 4px}
.bcp-tbl .num{text-align:right}
.bcp-foot{display:grid;grid-template-columns:1.4fr 1fr;border-top:1px solid #000}
.bcp-foot .fl{padding:6px 8px;border-right:1px solid #000;font-size:8px}
.bcp-foot .fr{padding:6px 8px;font-size:8px}
.bcp-tot{display:flex;justify-content:space-between;padding:2px 0}
.bcp-tot.grand{font-weight:900;font-size:10px;border-top:1px solid #000;margin-top:3px;padding-top:3px}
.bcp-sec-title{font-weight:700;text-decoration:underline;margin-bottom:2px}
.bcp-sig{margin-top:18px;text-align:center;border-top:1px solid #888;padding-top:2px;font-size:8px}
/* voucher preview mock */
.bcp-vch{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.1);font-family:Inter,Arial,sans-serif;color:#1f2937}
.bcp-vch-band{padding:14px 16px;color:#fff;display:flex;align-items:center;gap:12px}
.bcp-vch-band .vlogo{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:15px}
.bcp-vch-band .vbiz{font-size:15px;font-weight:800}
.bcp-vch-band .vtag{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-top:1px}
.bcp-vch-band .vcontact{font-size:8px;opacity:.85;margin-top:3px}
.bcp-vch-band .vtype{margin-left:auto;font-size:10px;font-weight:700;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:6px}
.bcp-vch-body{padding:16px;position:relative}
.bcp-vch-wm{position:absolute;right:12px;top:8px;font-size:34px;font-weight:900;color:rgba(0,0,0,.05);letter-spacing:3px}
.bcp-vch-party{font-size:9px;color:#64748b}
.bcp-vch-pname{font-size:14px;font-weight:800;margin-top:1px}
.bcp-vch-amt{margin-top:12px;border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.bcp-vch-amt .fig{font-size:18px;font-weight:900}
.bcp-vch-words{font-size:8.5px;opacity:.9}
.bcp-vch-notes{font-size:9px;color:#475569;margin-top:10px;background:#f1f5f9;border-radius:6px;padding:7px 9px}
.bcp-vch-sign{display:flex;gap:14px;margin-top:20px}
.bcp-vch-sign .b{flex:1;border-top:1px solid #94a3b8;padding-top:3px;font-size:8px;color:#64748b;text-align:center}
.bcp-vch-bottom{border-top:1px solid #e2e8f0;padding:7px 16px;font-size:8px;color:#64748b;display:flex;justify-content:space-between}
@media(max-width:900px){.ma-bc-grid{grid-template-columns:1fr}.ma-bc-preview-wrap{position:static}.ma-bc-fields{grid-template-columns:1fr}}

/* Field-toggle group headers inside Bill Customization */
.ma-bc-fgroup{margin-bottom:14px}
.ma-bc-fgroup:last-child{margin-bottom:0}
.ma-bc-fgroup-hdr{font-size:11px;font-weight:700;color:var(--accent,#1a56db);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px dashed var(--bdr)}
.ma-bc-fgroup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
@media(max-width:900px){.ma-bc-fgroup-grid{grid-template-columns:1fr}}

/* Colour-theme presets in Bill Customization */
.ma-bc-presets{display:flex;flex-wrap:wrap;gap:8px}
.ma-bc-preset{display:flex;align-items:center;gap:8px;padding:7px 11px 7px 8px;border:1.5px solid var(--bdr);border-radius:9px;background:var(--surf);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);transition:all .12s}
.ma-bc-preset:hover{border-color:var(--brand)}
.ma-bc-preset.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.ma-bc-preset-sw{display:inline-flex;border-radius:5px;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.ma-bc-preset-sw span{width:16px;height:20px;display:block}
.ma-bc-color-row input[type=text]{padding:9px 10px;border:1.5px solid var(--bdr);border-radius:8px;font-size:13px;color:var(--text);background:var(--surf);font-family:ui-monospace,monospace;outline:none;min-width:0}
.ma-bc-color-row input[type=text]:focus{border-color:var(--brand)}

/* ════════════════════════════════════════════
   DARK MODE  (applied via <html data-theme="dark">)
════════════════════════════════════════════ */
html[data-theme="dark"]{
  --surf:#1E293B;          /* cards / surfaces — v3.9.341 lighter/richer  */
  --surf2:#0F172A;         /* page background — deep slate                */
  --surf3:#334155;         /* subtle raised / hover                       */
  --bdr:#334155;           /* borders — matches surf3 for cohesion        */
  --text:#F1F5F9;          /* primary text                                */
  --muted:#94A3B8;         /* secondary text                              */
  --hint:#64748B;          /* faint text                                  */
  /* v3.9.338 → 341 — headings/body/icon overrides — bumped to brighter
     tones so titles read cleanly on the darker slate surfaces. */
  --heading:#F8FAFC;
  --body:#CBD5E1;
  --icon:#94A3B8;
  --brand-bg:rgba(37,99,235,.12);   /* tinted brand background     */
  --brand-bg2:rgba(37,99,235,.18);
  --green-bg:rgba(34,197,94,.14);
  --red-bg:rgba(239,68,68,.14);
  --amber-bg:rgba(245,158,11,.14);
  --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 8px 30px rgba(0,0,0,.55);
}
html[data-theme="dark"] body{background:var(--surf2)}
html[data-theme="dark"] #ma-shell{background:var(--surf2)}
/* Popovers / menus / cards that hard-code white → dark surface */
html[data-theme="dark"] .ma-create-menu,
html[data-theme="dark"] .ma-create-menu::before,
html[data-theme="dark"] .ma-fy-menu,
html[data-theme="dark"] .ma-auth-card,
html[data-theme="dark"] .ma-setup-card,
html[data-theme="dark"] .ma-profile-drawer,
html[data-theme="dark"] .ma-card,
html[data-theme="dark"] .ma-panel,
html[data-theme="dark"] .ma-modal,
html[data-theme="dark"] .ma-modal-card,
html[data-theme="dark"] .ma-sheet,
html[data-theme="dark"] .ma-bill-box,
html[data-theme="dark"] .ma-settings-card,
html[data-theme="dark"] .ma-org-card,
html[data-theme="dark"] .ma-set2-panel{background:var(--surf)!important}
html[data-theme="dark"] .ma-auth,
html[data-theme="dark"] .ma-setup{background:var(--surf2)}
/* Inputs / selects / textareas */
html[data-theme="dark"] input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .fg input[readonly],
html[data-theme="dark"] #b-invno[readonly],html[data-theme="dark"] #pu-invno[readonly]{background:var(--surf2)!important;color:var(--hint)!important}
/* Tables */
html[data-theme="dark"] table{color:var(--text)}
html[data-theme="dark"] th{background:var(--surf3)!important;color:var(--text)}
html[data-theme="dark"] td{border-color:var(--bdr)}
html[data-theme="dark"] tr:nth-child(even) td{background:rgba(255,255,255,.02)}
/* Bill-customization preview backdrop reads better dark */
html[data-theme="dark"] .ma-bc-preview{background:#0b0e13}
html[data-theme="dark"] .ma-bc-tab,
html[data-theme="dark"] .ma-bc-tplcard,
html[data-theme="dark"] .ma-bc-preset,
html[data-theme="dark"] .ma-bc-fld{background:var(--surf3)}
/* Misc white chips that should darken */
html[data-theme="dark"] .btn-hero-s{background:var(--surf3)}
/* Keep printed bill/voucher preview cards WHITE (they emulate paper) */
html[data-theme="dark"] .bcp-bill,
html[data-theme="dark"] .bcp-vch{background:#fff;color:#000}

/* Theme + language controls in Settings */
.ma-pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--bdr)}
.ma-pref-row:last-child{border-bottom:none}
.ma-pref-info .t{font-size:14px;font-weight:700;color:var(--text)}
.ma-pref-info .s{font-size:12px;color:var(--muted);margin-top:2px}
.ma-theme-seg{display:inline-flex;border:1.5px solid var(--bdr);border-radius:10px;overflow:hidden}
.ma-theme-seg button{padding:9px 16px;background:var(--surf);color:var(--muted);border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:7px;transition:all .12s}
.ma-theme-seg button.active{background:var(--brand);color:#fff}
.ma-lang-select{min-width:190px;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:9px;font-size:13px;font-weight:600;color:var(--text);background:var(--surf);cursor:pointer;font-family:inherit}

/* ════════════════════════════════════════════
   JOB WORK
════════════════════════════════════════════ */
.fg-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.fg-3{grid-template-columns:1fr}}
/* status summary cards */
.ma-jw-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
@media(max-width:900px){.ma-jw-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.ma-jw-summary{grid-template-columns:repeat(2,1fr)}}
.ma-jw-card{position:relative;overflow:hidden;text-align:left;border:1.5px solid var(--bdr);border-radius:12px;background:var(--surf);padding:12px 14px;cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s}
.ma-jw-card:hover{border-color:var(--brand)}
.ma-jw-card.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.ma-jw-card-n{display:block;font-size:22px;font-weight:900;color:var(--text);line-height:1}
.ma-jw-card-l{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px}
.ma-jw-card-bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.ma-jw-card-bar.bg-all{background:var(--brand)}
.ma-jw-card-bar.bg-a{background:var(--amber)}.ma-jw-card-bar.bg-b{background:#3b82f6}
.ma-jw-card-bar.bg-g{background:var(--green)}.ma-jw-card-bar.bg-r{background:var(--red)}
.ma-jw-card-bar.bg-x{background:#64748b}
/* inline status select with coloured pill */
.ma-jw-stwrap{display:inline-block;border-radius:8px;padding:1px}
.ma-jw-stwrap.bg-a{background:var(--amber-bg)}.ma-jw-stwrap.bg-b{background:var(--brand-bg)}
.ma-jw-stwrap.bg-g{background:var(--green-bg)}.ma-jw-stwrap.bg-r{background:var(--red-bg)}
.ma-jw-stwrap.bg-x{background:var(--surf3)}
.ma-jw-stsel{border:none;background:transparent;font-size:12px;font-weight:700;color:var(--text);padding:4px 8px;border-radius:7px;cursor:pointer;font-family:inherit;outline:none;max-width:130px}

/* ════════════════════════════════════════════════════════════════════════
   v3.9.419 — Custom status pill + floating menu for Sale Order and
   Purchase Order rows. Replaces the native <select> so the drop-down
   matches the reference mockup exactly (red-pill "New" + floating
   white panel with New / Pending / In-Work / Completed).
════════════════════════════════════════════════════════════════════════ */
.qt-st-btn-wrap{padding:0}
.qt-st-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border:none;
  border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:700;
  cursor:pointer;
  transition:filter .12s, box-shadow .12s;
  min-width:96px; justify-content:center;
}
.qt-st-btn:hover{filter:brightness(.94); box-shadow:0 1px 4px rgba(0,0,0,.10)}
.qt-st-btn:active{transform:translateY(1px)}
.qt-st-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.qt-st-btn.bg-r{background:#fca5a5; color:#7f1d1d}
.qt-st-btn.bg-a{background:#fcd34d; color:#78350f}
.qt-st-btn.bg-b{background:#93c5fd; color:#1e3a8a}
.qt-st-btn.bg-g{background:#86efac; color:#14532d}
.qt-st-btn.bg-x{background:#e2e8f0; color:#334155}
.qt-st-btn-lbl{white-space:nowrap}
.qt-st-btn-caret{font-size:10px; opacity:.8; margin-left:2px}

/* Floating menu (appended to <body>, positioned in JS) */
.qt-st-menu{
  position:fixed;
  z-index:10800;
  min-width:150px;
  padding:6px 0;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  font-size:13px;
  color:var(--text);
  animation:qt-st-menu-in .12s ease-out;
}
@keyframes qt-st-menu-in{
  from{opacity:0; transform:translateY(-4px)}
  to  {opacity:1; transform:translateY(0)}
}
.qt-st-menu-item{
  padding:8px 14px;
  cursor:pointer;
  line-height:1.3;
  transition:background .1s, color .1s;
  outline:none;
}
.qt-st-menu-item:hover,
.qt-st-menu-item:focus{background:var(--surf2); color:var(--text)}
.qt-st-menu-item.on{
  font-weight:600;
  color:var(--brand-d);
}
.qt-st-menu-item.on::before{
  content:"✓ ";
  color:var(--brand);
  font-weight:700;
  margin-right:2px;
}

/* Dark mode — softer pill backgrounds so text stays readable */
html[data-theme="dark"] .qt-st-btn.bg-r{background:#7f1d1d; color:#fecaca}
html[data-theme="dark"] .qt-st-btn.bg-a{background:#78350f; color:#fde68a}
html[data-theme="dark"] .qt-st-btn.bg-b{background:#1e3a8a; color:#bfdbfe}
html[data-theme="dark"] .qt-st-btn.bg-g{background:#14532d; color:#bbf7d0}
html[data-theme="dark"] .qt-st-btn.bg-x{background:#334155; color:#e2e8f0}
html[data-theme="dark"] .qt-st-menu{background:#1e293b; border-color:#334155}
html[data-theme="dark"] .qt-st-menu-item:hover,
html[data-theme="dark"] .qt-st-menu-item:focus{background:#0f172a}

/* Mobile: give the menu a bit more tap area */
@media (max-width:640px){
  .qt-st-btn{min-width:88px; padding:7px 10px}
  .qt-st-menu-item{padding:10px 14px}
}
/* modal section headers */
.ma-jw-sec{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-dd);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px dashed var(--bdr)}
.ma-jw-sec:first-of-type{margin-top:4px}

/* v3.9.206 — Section header variant that fits a corner "+ Add custom column"
   button on the right (used by the shared SO/PO/PL/PI quotation modal). */
.ma-jw-sec.qt-sec-with-cf{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.ma-jw-sec.qt-sec-with-cf > span{ flex:1; min-width:0; }
.qt-sec-cf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  padding:0;
  background:transparent;
  border:1px solid var(--bdr);
  border-radius:6px;
  color:var(--brand);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.qt-sec-cf-btn:hover{
  background:rgba(37,99,235,.08);
  border-color:var(--brand);
  color:var(--brand-dd);
}
.qt-sec-cf-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.qt-sec-cf-btn svg{ display:block; }
/* parts table */
.ma-jw-parts,.ma-qt-items{width:100%;border-collapse:collapse}
.ma-jw-parts th,.ma-qt-items th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:0 6px 6px;font-weight:700}
.ma-jw-parts td,.ma-qt-items td{padding:3px 4px;vertical-align:middle}
.ma-jw-parts input,.ma-qt-items input,.ma-qt-items select{width:100%;padding:7px 9px;border:1.5px solid var(--bdr);border-radius:7px;font-size:13px;color:var(--text);background:var(--surf);outline:none;font-family:inherit}
.ma-jw-parts input:focus,.ma-qt-items input:focus,.ma-qt-items select:focus{border-color:var(--brand)}
.ma-jw-del{width:26px;height:26px;border:none;border-radius:6px;background:var(--red-bg);color:var(--red);cursor:pointer;font-size:13px;font-weight:700;line-height:1}
.ma-jw-del:hover{background:var(--red);color:#fff}
/* totals box */
.ma-jw-totals{margin-top:12px;border:1px solid var(--bdr);border-radius:10px;overflow:hidden}
.ma-jw-trow{display:flex;justify-content:space-between;padding:7px 14px;font-size:13px;color:var(--text)}
.ma-jw-trow span{color:var(--muted)}
.ma-jw-trow.grand{background:var(--surf2);font-weight:800;font-size:14px}
.ma-jw-trow.grand span{color:var(--text)}
.ma-jw-trow.due{background:var(--red-bg)}.ma-jw-trow.due b,.ma-jw-trow.due span{color:var(--red)}
.ma-jw-trow.ok b{color:var(--green)}
html[data-theme="dark"] .ma-jw-card,html[data-theme="dark"] .ma-jw-parts input{background:var(--surf3)}

/* ════════════════════════════════════════════
   CASHBOOK
════════════════════════════════════════════ */
.ma-cb-bymode{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ma-cb-mode{border:1px solid var(--bdr);border-radius:9px;padding:9px 12px;background:var(--surf2)}
.ma-cb-mode-h{font-size:12px;font-weight:800;color:var(--brand-dd);letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.ma-cb-mode-r{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:1px 0}
.ma-cb-mode-r b{color:var(--text)}
.ma-cb-mode-r.net{margin-top:3px;padding-top:4px;border-top:1px dashed var(--bdr);font-weight:700}
.ma-cb-kind{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;vertical-align:middle}
.ma-cb-kind-invoice{background:var(--green-bg);color:var(--green)}
.ma-cb-kind-purchase{background:var(--amber-bg);color:var(--amber)}
.ma-cb-kind-voucher{background:var(--brand-bg);color:var(--brand-dd)}
.ma-cb-kind-contra{background:#e0e7ff;color:#4338ca}
.ma-cb-kind-expense{background:var(--red-bg);color:var(--red)}
html[data-theme="dark"] .ma-cb-mode{background:var(--surf3)}
html[data-theme="dark"] .ma-cb-kind-contra{background:#1e1b4b;color:#a5b4fc}

/* ════════════════════════════════════════════
   CUSTOMER / VENDOR — type filter, badges, full form
════════════════════════════════════════════ */

/* Type-filter pill row above the contacts table */
.ma-cv-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ma-cv-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--surf2);border:1.5px solid var(--bdr);font-size:13px;font-weight:700;color:var(--muted);
  cursor:pointer;transition:all .12s}
.ma-cv-pill:hover{background:var(--brand-bg);color:var(--brand-dd);border-color:var(--brand)}
.ma-cv-pill.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.ma-cv-pill .ma-cv-count{background:rgba(255,255,255,.25);color:inherit;padding:1px 8px;border-radius:999px;
  font-size:11px;font-weight:800;min-width:22px;text-align:center;font-feature-settings:"tnum"}
.ma-cv-pill:not(.active) .ma-cv-count{background:var(--surf3);color:var(--text)}

/* Row-level badges (Customer / Vendor / Both) */
.ma-cv-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.2px}
.ma-cv-b-cust  {background:#E0F2FE;color:#0369A1}
.ma-cv-b-vendor{background:#fef3c7;color:#a16207}
.ma-cv-b-both  {background:var(--brand-bg2);color:var(--brand-d)}
.ma-cv-disabled{display:inline-block;font-size:10px;font-weight:800;padding:1px 7px;border-radius:4px;background:var(--surf3);color:var(--hint);text-transform:uppercase;letter-spacing:.3px;margin-left:4px;vertical-align:middle}

/* ── Customer / Vendor FORM ───────────────────────────────────────── */
.ma-req{color:#dc2626;font-weight:700}
.ma-cv-form{display:flex;flex-direction:column;gap:18px;margin:6px 0 16px}

.ma-cv-section{border:1px solid var(--surf3);border-radius:12px;overflow:hidden;background:var(--surf)}
.ma-cv-sec-h{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--surf2);
  border-bottom:1px solid var(--surf3);font-size:13px;font-weight:800;color:var(--text);letter-spacing:.1px}
.ma-cv-sec-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;background:var(--brand-bg);color:var(--brand-dd);font-size:13px;flex-shrink:0}

.ma-cv-grid{padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.ma-cv-row{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:start}
.ma-cv-row > label{font-size:12.5px;font-weight:600;color:var(--text);padding-top:9px;line-height:1.35}
.ma-cv-row > input,
.ma-cv-row > select,
.ma-cv-row > textarea{width:100%;padding:8px 12px;border:1.5px solid var(--bdr);border-radius:8px;
  font-size:13.5px;color:var(--text);background:var(--surf);outline:none;font-family:inherit;
  transition:border-color .12s,box-shadow .12s}
.ma-cv-row > input:focus,
.ma-cv-row > select:focus,
.ma-cv-row > textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-cv-row > textarea{resize:vertical;min-height:60px}

/* Company-type radio chips */
.ma-cv-radios{display:flex;flex-wrap:wrap;gap:18px;padding-top:8px}
.ma-cv-radio{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.ma-cv-radio input[type="radio"]{margin:0;width:16px;height:16px;accent-color:var(--brand)}

/* Inline input + button (GSTIN auto-fill, distance auto-fill) */
.ma-cv-input-act{display:flex;gap:8px;align-items:stretch}
.ma-cv-input-act > input{flex:1;padding:8px 12px;border:1.5px solid var(--bdr);border-radius:8px;
  font-size:13.5px;color:var(--text);background:var(--surf);outline:none}
.ma-cv-input-act > input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-cv-input-act > .ma-btn{flex-shrink:0;border-radius:8px}

/* Opening-balance input + select */
.ma-cv-bal{display:flex;gap:8px;align-items:stretch}
.ma-cv-bal > input{flex:2;padding:8px 12px;border:1.5px solid var(--bdr);border-radius:8px;
  font-size:13.5px;color:var(--text);background:var(--surf);outline:none}
.ma-cv-bal > select{flex:1;padding:8px 12px;border:1.5px solid var(--bdr);border-radius:8px;
  font-size:13.5px;color:var(--text);background:var(--surf);outline:none;font-weight:700}
.ma-cv-bal > input:focus,.ma-cv-bal > select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-cv-hint{font-size:12px;font-weight:700;padding-top:8px}
/* Note: .is-pay and .is-recv colours are set later using theme variables
   (var(--danger) / var(--success)) so they follow the user's palette. */

/* "Enable" checkbox row */
.ma-cv-enable{display:inline-flex;align-items:center;gap:9px;padding-top:9px;font-size:13px;color:var(--text);cursor:pointer}
.ma-cv-enable input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}

@media(max-width:680px){
  .ma-cv-row{grid-template-columns:1fr;gap:6px}
  .ma-cv-row > label{padding-top:0;font-size:12px}
  .ma-modal-lg{padding:18px 16px}
  .ma-cv-sec-h{padding:10px 12px;font-size:12.5px}
  .ma-cv-grid{padding:12px 12px}

  /* v3.9.388 — Opening balance row on mobile.
     Previously the amount input took 2/3 width and the Credit/Debit
     select was crammed into 1/3 with tiny native picker chrome — hard
     to tap and the "Credit"/"Debit" label got clipped. Widen the
     select so it can breathe, bump the tap target height, and keep
     the amount input flexible. */
  .ma-cv-bal{gap:8px}
  .ma-cv-bal > input{
    flex:1 1 auto;
    min-width:0;
    height:44px;                  /* comfortable thumb-tap height */
    font-size:16px;                /* stops iOS auto-zoom on focus */
  }
  .ma-cv-bal > select{
    flex:0 0 120px;                /* fixed 120px so "Credit"/"Debit" fits */
    min-width:110px;
    height:44px;
    font-size:15px;
    /* Explicit native chevron so users see the select is a dropdown
       — some Android browsers strip the default arrow. */
    background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                     linear-gradient(-45deg, transparent 50%, var(--muted) 50%);
    background-position:calc(100% - 14px) 50%, calc(100% - 8px) 50%;
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:26px;
  }
  .ma-cv-hint{padding-top:6px}
}

/* v3.9.388 — Semantic hint colours use theme variables so they follow
   dark mode and any custom palette instead of hardcoded red/blue. */
.ma-cv-hint.is-pay { color: var(--danger); }
.ma-cv-hint.is-recv{ color: var(--success); }

/* ════════════════════════════════════════════
   v3.9.64 — Shared modal redesign (form-modal-v2)
   Pixel-faithful match to the supplied reference:
   Open Sans · 14px labels · light blue-gray section
   header bars · custom green radios + checkbox ·
   38px-tall inputs · "Find" outlined button ·
   130px suffix selects next to amount + unit fields.

   Applied to:
     • Add / Edit Product / Service   (_itemFormHTML)
     • Add / Edit Customer / Vendor   (_custFormHTML)

   Scoped to .ma-form-modal-v2 so older modals that
   still use plain .ma-cv-* (e.g. Business edit) keep
   their previous look.
   ════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

.ma-form-modal-v2,
.ma-form-modal-v2 *{
  font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Title */
.ma-form-modal-v2 .ma-modal-title{
  font-size:18px;font-weight:700;color:#1f2937;margin:0 0 16px;
}

/* Section card — cleaner border, lighter header bar */
.ma-form-modal-v2 .ma-cv-section{
  border:1px solid #e5e7eb;border-radius:8px;background:#fff;overflow:hidden;
}
.ma-form-modal-v2 .ma-cv-sec-h{
  background:#eef2f5;padding:11px 18px;
  border-bottom:1px solid #e5e7eb;
  font-size:14.5px;font-weight:700;color:#1f2937;letter-spacing:.1px;
  gap:10px;
}
.ma-form-modal-v2 .ma-cv-sec-ic{
  width:22px;height:22px;background:transparent;color:inherit;
  font-size:15px;border-radius:0;
}

/* Two-column rows: label 200px | field */
.ma-form-modal-v2 .ma-cv-grid{padding:16px 18px;gap:10px}
.ma-form-modal-v2 .ma-cv-row{
  grid-template-columns:200px 1fr;gap:14px;align-items:center;
}
.ma-form-modal-v2 .ma-cv-row > label{
  font-size:14px;font-weight:600;color:#4b5563;
  padding-top:0;line-height:1.4;
}

/* Inputs — 38px tall, lighter border, green focus ring */
.ma-form-modal-v2 .ma-cv-row > input,
.ma-form-modal-v2 .ma-cv-row > select,
.ma-form-modal-v2 .ma-cv-row > textarea,
.ma-form-modal-v2 .ma-cv-input-act > input,
.ma-form-modal-v2 .ma-cv-bal > input,
.ma-form-modal-v2 .ma-cv-bal > select{
  font-size:14px;height:38px;padding:7px 12px;
  border:1px solid #d1d5db;border-radius:5px;
  color:#1f2937;background:#fff;font-weight:500;
}
.ma-form-modal-v2 .ma-cv-row > textarea{
  height:auto;min-height:78px;line-height:1.5;padding:9px 12px;font-weight:400;
}
.ma-form-modal-v2 .ma-cv-row > input:focus,
.ma-form-modal-v2 .ma-cv-row > select:focus,
.ma-form-modal-v2 .ma-cv-row > textarea:focus,
.ma-form-modal-v2 .ma-cv-input-act > input:focus,
.ma-form-modal-v2 .ma-cv-bal > input:focus,
.ma-form-modal-v2 .ma-cv-bal > select:focus{
  border-color:var(--brand-dd);
  box-shadow:0 0 0 .15rem rgba(30,64,175,.15);
}
.ma-form-modal-v2 .ma-cv-row > input::placeholder{color:#9ca3af;font-weight:400}

/* Custom radio dots (Item Type, Stock Type) */
.ma-form-modal-v2 .ma-cv-radios{padding-top:0;gap:22px}
.ma-form-modal-v2 .ma-cv-radio{
  font-size:14px;font-weight:500;color:#1f2937;gap:8px;position:relative;
}
.ma-form-modal-v2 .ma-cv-radio input[type="radio"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.ma-form-modal-v2 .ma-cv-radio::before{
  content:'';width:16px;height:16px;border:1.5px solid #94a3b8;border-radius:50%;
  background:#fff;flex-shrink:0;transition:border-color .15s,background .15s;
}
.ma-form-modal-v2 .ma-cv-radio:has(input:checked)::before{
  background:var(--brand-dd);border-color:var(--brand-dd);
  box-shadow:inset 0 0 0 3px #fff;
}

/* Custom checkbox ("No-ITC", Manufacturing, Enable, etc.) */
.ma-form-modal-v2 .ma-cv-enable{
  padding-top:0;gap:9px;font-size:14px;font-weight:600;color:#1f2937;
  position:relative;
}
.ma-form-modal-v2 .ma-cv-enable input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.ma-form-modal-v2 .ma-cv-enable::before{
  content:'';width:16px;height:16px;border:1.5px solid #94a3b8;border-radius:3px;
  background:#fff;flex-shrink:0;transition:border-color .15s,background .15s;
}
.ma-form-modal-v2 .ma-cv-enable:has(input:checked)::before{
  background:var(--brand-dd);border-color:var(--brand-dd);
}
.ma-form-modal-v2 .ma-cv-enable:has(input:checked)::after{
  content:'';position:absolute;left:4.5px;top:50%;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-65%) rotate(45deg);
}

/* HSN row: input + Find button */
.ma-form-modal-v2 .ma-cv-input-act{gap:10px}
.ma-form-modal-v2 .ma-cv-input-act > .ma-btn{
  height:38px;padding:0 18px;border-radius:5px;
  background:#fff;border:1px solid #d1d5db;color:#4b5563;
  font-size:14px;font-weight:600;
}
.ma-form-modal-v2 .ma-cv-input-act > .ma-btn:hover{
  background:#f9fafb;border-color:#9ca3af;color:#1f2937;
}

/* CESS Amount + Sale Discount: narrow suffix dropdown */
.ma-form-modal-v2 .ma-cv-bal{gap:10px;align-items:stretch}
.ma-form-modal-v2 .ma-cv-bal > input{flex:1 1 auto}
.ma-form-modal-v2 .ma-cv-bal > select{
  flex:0 0 130px;width:130px;font-weight:500;
}

/* Modal action buttons (Close / Save) */
.ma-form-modal-v2 .ma-modal-actions{
  padding:14px 0 0;margin-top:14px;
  border-top:1px solid #e5e7eb;
  display:flex;gap:10px;justify-content:flex-end;
}
.ma-form-modal-v2 .ma-modal-actions .ma-btn{
  font-size:14px;font-weight:600;padding:8px 22px;border-radius:5px;
  background:#fff;border:1px solid #d1d5db;color:#4b5563;
}
.ma-form-modal-v2 .ma-modal-actions .ma-btn:hover{
  background:#f3f4f6;color:#1f2937;
}
.ma-form-modal-v2 .ma-modal-actions .ma-btn.p{
  background:var(--brand-dd);border-color:var(--brand-dd);color:#fff;
}
.ma-form-modal-v2 .ma-modal-actions .ma-btn.p:hover{
  background:#125e3c;border-color:#125e3c;color:#fff;
}

/* Responsive — phones: stack label above field */
@media(max-width:680px){
  .ma-form-modal-v2 .ma-cv-row{grid-template-columns:1fr;gap:4px;align-items:stretch}
  .ma-form-modal-v2 .ma-cv-row > label{padding-top:0;font-size:14px}
  .ma-form-modal-v2 .ma-cv-sec-h{padding:10px 12px}
  .ma-form-modal-v2 .ma-cv-grid{padding:12px 12px}
  .ma-form-modal-v2 .ma-cv-bal > select{flex:0 0 110px;width:110px}
}
@media(min-width:681px) and (max-width:900px){
  .ma-form-modal-v2 .ma-cv-row{grid-template-columns:170px 1fr}
}

/* ════════════════════════════════════════════
   PRODUCT / SERVICE — image upload + HSN picker
════════════════════════════════════════════ */

/* Product image grid */
.ma-pi-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.ma-pi-grid:empty{margin-bottom:0}
.ma-pi-thumb{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden;
  border:1.5px solid var(--bdr);background:var(--surf2)}
.ma-pi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ma-pi-del{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;font-size:14px;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .12s}
.ma-pi-del:hover{background:#dc2626}

.ma-pi-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:160px;min-height:96px;padding:14px;border:2px dashed var(--bdr);border-radius:10px;
  background:var(--surf2);cursor:pointer;transition:all .12s;color:var(--muted)}
.ma-pi-upload:hover{border-color:var(--brand);background:var(--brand-bg);color:var(--brand-dd)}
.ma-pi-up-icon{font-size:22px;margin-bottom:4px;opacity:.7}
.ma-pi-up-text{font-size:12.5px;font-weight:700}
.ma-pi-up-hint{font-size:10.5px;font-weight:500;color:var(--hint);margin-top:2px}

/* v3.9.412 — HSN / SAC Finder as a right-side sidebar (was: small
   centered popup). Redesigned to match the reference:
     - Full-height panel that slides in from the right (~480 px wide)
     - Dark scrim overlays the underlying form so the picker feels modal
     - Header: "HSN / SAC Finder" title + close (×) icon button
     - Intro line + prominent search field
     - Scrollable list of ~180 common HSN / SAC codes
     - "No codes match" empty-state message when search returns nothing
     - Bottom-anchored explanatory note
   Users can browse OR search — no need to know a code up-front. */
/* v3.9.816 — the finder is opened from INSIDE the Add / Edit Product
   sidebar, which sits at z-index 10600. At 10000 it opened underneath
   that sidebar: nothing appeared to happen on "Find", and the finder only
   came into view once the product sidebar was closed. It now sits above
   every sidebar and dropdown (the highest is 10800) and still below the
   toasts and confirm dialogs (99997 and up). */
#ma-hsn-picker{
  position:fixed;
  inset:0;
  z-index:10900;
  pointer-events:none;
}
#ma-hsn-picker .ma-hsn-scrim{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:auto;
}
#ma-hsn-picker.open .ma-hsn-scrim{ opacity:1; }
.ma-hsn-pop{
  position:absolute;
  top:0; right:0; bottom:0;
  width:100%;
  max-width:480px;
  background:var(--surf, #fff);
  border-left:1.5px solid var(--bdr, #e5e7eb);
  box-shadow:-8px 0 30px rgba(15,23,42,.16);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  pointer-events:auto;
}
#ma-hsn-picker.open .ma-hsn-pop{ transform:translateX(0); }
.ma-hsn-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--surf3, #f3f4f6);
  font-size:16px;
  font-weight:700;
  color:var(--text, #111);
  flex-shrink:0;
}
.ma-hsn-x{
  background:none;
  border:none;
  padding:6px;
  margin:-6px;
  cursor:pointer;
  color:var(--muted, #6b7280);
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, color .12s;
}
.ma-hsn-x:hover{ background:var(--surf2, #f3f4f6); color:var(--text, #111); }
.ma-hsn-intro{
  padding:16px 20px 4px;
  font-size:13.5px;
  color:var(--muted, #6b7280);
  text-align:center;
  flex-shrink:0;
}
.ma-hsn-search-wrap{
  padding:12px 20px 8px;
  flex-shrink:0;
}
.ma-hsn-search-wrap input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  font-size:14px;
  outline:none;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-family:inherit;
  transition:border-color .12s, box-shadow .12s;
}
.ma-hsn-search-wrap input:focus{
  border-color:var(--brand, #2563EB);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.ma-hsn-empty{
  margin-top:12px;
  padding:14px;
  text-align:center;
  color:var(--muted, #6b7280);
  font-size:13px;
  background:var(--surf2, #f9fafb);
  border-radius:8px;
}
.ma-hsn-list{
  overflow-y:auto;
  padding:4px 12px 8px;
  flex:1;
  min-height:0;
}
.ma-hsn-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .1s;
}
.ma-hsn-row:hover{ background:var(--brand-bg, #EFF6FF); }
.ma-hsn-c{
  font-weight:800;
  color:var(--brand-dd, #1E40AF);
  background:var(--brand-bg, #EFF6FF);
  padding:4px 10px;
  border-radius:6px;
  font-size:12.5px;
  font-feature-settings:"tnum";
  min-width:60px;
  text-align:center;
  flex-shrink:0;
}
.ma-hsn-row:hover .ma-hsn-c{
  background:var(--brand, #2563EB);
  color:#fff;
}
.ma-hsn-n{
  font-size:13.5px;
  color:var(--text, #111);
  line-height:1.35;
}
.ma-hsn-note{
  padding:6px 20px 10px;
  font-size:12.5px;
  color:var(--muted, #6b7280);
  text-align:center;
  flex-shrink:0;
  font-style:italic;
  background:transparent;
}
.ma-hsn-note a{
  color:var(--brand, #2563EB);
  text-decoration:none;
  font-weight:600;
}
.ma-hsn-note a:hover{ text-decoration:underline; }

/* v3.9.412 — Centered subtitle right under the header, matches
   Go-GST-Bill "Find HSN / SAC Codes & GST Rates ..." line. */
.ma-hsn-title{
  padding:14px 20px 6px;
  text-align:center;
  font-size:15px;
  color:var(--muted, #64748b);
  font-weight:500;
}

/* v3.9.412 — Table layout: sticky-header two-column results
   (HSN Code | Description). Zebra rows, hover highlight, click to pick. */
.ma-hsn-tbl-wrap{
  overflow-y:auto;
  padding:0 20px 12px;
  flex:1;
  min-height:0;
}
.ma-hsn-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.ma-hsn-tbl thead th{
  position:sticky;
  top:0;
  background:var(--surf, #fff);
  padding:10px 12px;
  text-align:left;
  font-weight:700;
  color:var(--text, #111);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  z-index:1;
}
.ma-hsn-tbl .ma-hsn-th-c{ width:130px; }
.ma-hsn-tr{
  cursor:pointer;
  transition:background .1s;
}
.ma-hsn-tr:hover{ background:var(--brand-bg, #EFF6FF); }
.ma-hsn-tr:nth-child(even){ background:var(--surf2, #f9fafb); }
.ma-hsn-tr:nth-child(even):hover{ background:var(--brand-bg, #EFF6FF); }
.ma-hsn-td-c,
.ma-hsn-td-n{
  padding:10px 12px;
  border-bottom:1px solid var(--surf3, #f3f4f6);
  vertical-align:top;
  color:var(--text, #111);
  line-height:1.4;
}
.ma-hsn-td-c{
  color:var(--brand-dd, #1E40AF);
  font-weight:600;
  white-space:nowrap;
  font-feature-settings:"tnum";
}
.ma-hsn-code{ display:inline-block; }

/* v3.9.412 — Search-term highlighting pill (green like the reference) */
.ma-hsn-hi{
  background:#10B981;
  color:#fff;
  padding:1px 5px;
  border-radius:4px;
  font-weight:600;
}

/* Mobile — full-screen instead of side panel */
@media (max-width:640px){
  .ma-hsn-pop{
    max-width:100%;
    border-left:none;
  }
  .ma-hsn-tbl-wrap{ padding:0 12px 12px; }
  .ma-hsn-tbl thead th,
  .ma-hsn-td-c,
  .ma-hsn-td-n{ padding:8px 8px; }
  .ma-hsn-tbl .ma-hsn-th-c{ width:96px; }
}

/* Items table — first-column thumbnail */
.ma-item-cell{display:flex;align-items:center;gap:10px;min-width:0}
.ma-item-cell-name{font-weight:700;color:var(--text);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-item-thumb{width:34px;height:34px;border-radius:7px;object-fit:cover;
  background:var(--surf2);border:1px solid var(--surf3);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ma-item-thumb-x{color:var(--hint)}

/* ════════════════════════════════════════════
   GST INVOICE REDESIGN (Sale / Purchase)
   GoGstBill-style card layout
════════════════════════════════════════════ */
.gst-bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:1100px){.gst-bill-grid{grid-template-columns:1fr}}
.gst-card{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:0;overflow:visible}
.gst-card-hdr{padding:11px 15px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;background:var(--surf2);border-radius:10px 10px 0 0;position:relative}
.gst-card-title{font-weight:700;font-size:14px;color:var(--text);letter-spacing:.2px}
.gst-card-body{padding:14px 15px}

/* Row layout inside cards: label on left, control on right */
.gst-fr{display:grid;grid-template-columns:135px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.gst-fr:last-child{margin-bottom:0}
.gst-fr label{font-size:12.5px;color:var(--text);font-weight:500;margin:0}
.gst-fr label .req{color:#dc2626;font-weight:700}
.gst-fr input,.gst-fr select,.gst-fr textarea{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:13px;background:var(--surf);color:var(--text);outline:none;font-family:inherit}
.gst-fr input:focus,.gst-fr select:focus,.gst-fr textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(26,86,219,.10)}
.gst-fr textarea{resize:vertical;min-height:38px}

/* Invoice no triplet (Inv Pre. | No. | Inv Post.) */
.gst-invno{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.gst-invno input{padding:7px 9px}
.gst-invno input[readonly]{background:var(--surf2);color:var(--muted);cursor:default;text-align:center;font-weight:700}

/* Compact 2-column inside cards (e.g. Transport ID + Vehicle No, Trans.Doc NO + Trans.Doc Date) */
.gst-fr-2{display:grid;grid-template-columns:135px 1fr 110px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.gst-fr-2 label{font-size:12.5px;color:var(--text);font-weight:500;margin:0}
.gst-fr-2 input,.gst-fr-2 select{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:13px;background:var(--surf);color:var(--text);outline:none;font-family:inherit}
.gst-fr-2 input:focus,.gst-fr-2 select:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(26,86,219,.10)}

/* "Date" field on the right of Invoice No row */
.gst-invrow{display:grid;grid-template-columns:135px 1fr 75px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.gst-invrow label{font-size:12.5px;color:var(--text);font-weight:500;margin:0}
.gst-invrow input,.gst-invrow select{width:100%;padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:13px;background:var(--surf);color:var(--text);outline:none;font-family:inherit}

/* "Add Transport" link */
.gst-add-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:12.5px;font-weight:600;cursor:pointer;border:none;background:transparent;padding:6px 10px}
.gst-add-link:hover{color:var(--brand)}
.gst-add-link svg{width:16px;height:16px}

/* Bottom grid: Terms+notes on left, Amount Detail on right */
.gst-bottom-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:1100px){.gst-bottom-grid{grid-template-columns:1fr}}

/* Amount Detail card rows */
.gst-amt-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--bdr);font-size:13.5px}
.gst-amt-row:last-child{border-bottom:none}
.gst-amt-row .l{color:var(--muted);font-weight:500}
.gst-amt-row .v{font-weight:700;font-size:14px;color:var(--text)}
.gst-amt-row.grand{background:var(--brand-bg);border-radius:7px;padding:11px 12px;margin:5px -4px;border:1px solid var(--brand-bg2)}
html[data-theme="dark"] .gst-amt-row.grand{background:#3f3a18;border-color:#5c5012}
.gst-amt-row.grand .l{font-weight:800;color:var(--text);font-size:14.5px}
.gst-amt-row.grand .v{font-weight:900;font-size:17px;color:var(--text)}

/* Round Off toggle pill */
.gst-toggle{position:relative;width:38px;height:20px;background:var(--bdr);border-radius:11px;cursor:pointer;transition:background .14s;flex-shrink:0;display:inline-block}
.gst-toggle::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .14s}
.gst-toggle.on{background:var(--brand)}
.gst-toggle.on::after{left:20px}

/* Payment Type 4-button row */
.gst-pmt-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.gst-pmt-btn{padding:7px 4px;border:1.5px solid var(--bdr);border-radius:7px;background:var(--surf);color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;letter-spacing:.5px;transition:all .14s;font-family:inherit}
.gst-pmt-btn:hover{border-color:var(--brand);color:var(--text)}
.gst-pmt-btn.on[data-pmt="CREDIT"]{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.gst-pmt-btn.on[data-pmt="CASH"]{background:var(--brand-bg2);border-color:var(--brand);color:var(--brand-dd)}
.gst-pmt-btn.on[data-pmt="CHEQUE"]{background:var(--brand-bg2);border-color:#3b82f6;color:var(--brand-dd)}
.gst-pmt-btn.on[data-pmt="ONLINE"]{background:#ede9fe;border-color:#8b5cf6;color:#5b21b6}

/* Smart Suggestion card */
.gst-smart{background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;margin-top:10px}
.gst-smart-hdr{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:13px}
.gst-smart-body{display:none;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gst-smart.open .gst-smart-body{display:grid}
.gst-smart-chk{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;font-weight:500}
.gst-smart-chk input{cursor:pointer;width:15px;height:15px;accent-color:var(--brand)}

/* Item table (Product Items section) — v3.9.137 column layout (matches reference image) */
/* SR | Product / Other Charges | Qty/Stock | UOM | Price(Rs) | Discount | IGST | Total | Act */
.gst-items-tbl{width:100%;border-collapse:collapse}
.gst-items-tbl thead th{background:var(--surf2);font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:11px 8px;text-align:left;border-bottom:1.5px solid var(--bdr);border-top:1px solid var(--bdr);white-space:nowrap}
.gst-items-tbl thead th.r{text-align:right}
.gst-items-tbl thead th.c{text-align:center}
.gst-items-tbl tbody td{padding:10px 8px;vertical-align:top;border-bottom:1px solid var(--bdr);background:var(--surf)}
.gst-items-tbl tbody td input,.gst-items-tbl tbody td select{width:100%;padding:7px 9px;border:1px solid var(--bdr);border-radius:5px;font-size:12.5px;background:var(--surf);color:var(--text);outline:none;font-family:inherit}
.gst-items-tbl tbody td input:focus,.gst-items-tbl tbody td select:focus{border-color:var(--brand)}
/* Yellow Item Note (matches reference image) */
.gst-items-tbl .gst-item-note{margin-top:6px;background:var(--brand-bg);border:1px solid var(--brand-bg2);border-radius:6px;padding:6px 9px}
html[data-theme="dark"] .gst-items-tbl .gst-item-note{background:#3f3a18;border-color:#5c5012}
.gst-items-tbl .gst-item-note textarea{width:100%;background:transparent;border:none;font-size:12px;color:var(--text);resize:vertical;min-height:26px;font-family:inherit;outline:none;padding:0}
.gst-items-tbl .gst-item-note textarea::placeholder{color:#a3a3a3;font-style:normal}
/* Yellow footer "Total Inv. Val" row */
.gst-items-tbl tfoot td{background:var(--brand-bg);font-weight:800;font-size:13px;padding:11px 8px;border-top:1.5px solid var(--brand-bg2)}
html[data-theme="dark"] .gst-items-tbl tfoot td{background:#3f3a18;border-top-color:#5c5012}
.gst-items-tbl .del-btn{background:transparent;border:none;color:#dc2626;cursor:pointer;font-size:15px;line-height:1;padding:3px 5px}

/* SR cell: bold + centered like the image */
.gst-items-tbl tbody td.gst-c-sr{font-weight:700;color:var(--muted);text-align:center;font-size:13px;vertical-align:middle}
/* v3.9.137 — Hide HSN column ONLY inside Sale Invoice (#pg-bill) and Purchase
   Invoice (#pg-purchase). Other pages using .gst-items-tbl (e.g. Machinery
   Invoice at #pg-mc-invoice) still need the HSN column, so we scope this
   defensively rather than hiding globally. */
/* v3.9.771 — the two #pg-mc-invoice selectors are gone from this list. The
   comment above always said the multi-currency page still needs HSN, but the
   page was named in the hide rule anyway, so the column stayed invisible there
   no matter what the markup did. */
#pg-bill .gst-items-tbl thead th.gst-c-hsn-h,

#pg-bill .gst-items-tbl tbody td.gst-c-hsn,

#pg-purchase .gst-items-tbl thead th.gst-c-hsn-h,
#pg-purchase .gst-items-tbl tbody td.gst-c-hsn,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.138 — Product Items TWO-ROW layout (matches reference image 1:1)
   Each item spans two <tr>:
     .gst-item-row-a — input row (SR, Product input, Qty, UOM, Price, Disc, IGST select, Total, + button)
     .gst-item-row-b — note row  (blank, Item Note textarea, grey blank cells, IGST amount, blank)
   Scoped tightly to Sale (#pg-bill) and Purchase (#pg-purchase) invoice pages
   so the Machinery invoice at #pg-mc-invoice is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
#pg-bill .gst-items-tbl,
#pg-mc-invoice .gst-items-tbl,

#pg-purchase .gst-items-tbl,

#pg-create-jobwork .gst-items-tbl,
#pg-create-delivery-challan .gst-items-tbl,
#pg-create-packing-list .gst-items-tbl,


#pg-create-proforma .gst-items-tbl{

  table-layout:fixed;
  border-collapse:collapse;
  min-width:960px;
}

/* ── column widths — v3.9.299:
      • SR: fixed 3% (narrow serial number)
      • PRODUCT: fixed 20% (wider — combo/name + note)
      • TOTAL: fixed 20% (wider — big number)
      • ACT: fixed 3% (narrow +/- button)
      • QTY / UOM / PRICE / DISCOUNT / IGST: NO fixed width so `table-layout:fixed`
        auto-distributes the remaining 54% equally across them (~10.8% each
        for the default 5 middle cols). When custom columns are injected before
        DISCOUNT they participate in the same equal-share bucket automatically.
      Totals to 100% regardless of custom-column count. */
#pg-bill .gst-items-tbl thead th.gst-c-sr-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-sr-h,

#pg-purchase .gst-items-tbl thead th.gst-c-sr-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-sr-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-sr-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-sr-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-sr-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-sr-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-sr-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-sr-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-sr-h{width:3%; min-width:38px}
#pg-bill .gst-items-tbl thead th.gst-c-prod-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-prod-h,

#pg-purchase .gst-items-tbl thead th.gst-c-prod-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-prod-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-prod-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-prod-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-prod-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-prod-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-prod-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-prod-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-prod-h{width:20%; min-width:180px !important}
/* Middle columns — no explicit width so table-layout:fixed distributes them
   equally. min-width keeps them readable on narrow viewports (still wraps
   inside the .gst-items-tbl min-width:960px scroll region). */
#pg-bill .gst-items-tbl thead th.gst-c-qty-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-qty-h,

#pg-purchase .gst-items-tbl thead th.gst-c-qty-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-qty-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-qty-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-qty-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-qty-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-qty-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-qty-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-qty-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-qty-h{min-width:70px}
#pg-bill .gst-items-tbl thead th.gst-c-uom-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-uom-h,

#pg-purchase .gst-items-tbl thead th.gst-c-uom-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-uom-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-uom-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-uom-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-uom-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-uom-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-uom-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-uom-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-uom-h{min-width:70px}
#pg-bill .gst-items-tbl thead th.gst-c-price-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-price-h,

#pg-purchase .gst-items-tbl thead th.gst-c-price-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-price-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-price-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-price-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-price-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-price-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-price-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-price-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-price-h{min-width:80px}
#pg-bill .gst-items-tbl thead th.gst-c-disc-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-disc-h,

#pg-purchase .gst-items-tbl thead th.gst-c-disc-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-disc-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-disc-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-disc-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-disc-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-disc-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-disc-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-disc-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-disc-h{min-width:75px}
#pg-bill .gst-items-tbl thead th.gst-c-igst-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-igst-h,

#pg-purchase .gst-items-tbl thead th.gst-c-igst-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-igst-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-igst-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-igst-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-igst-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-igst-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-igst-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-igst-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-igst-h{min-width:80px}
#pg-bill .gst-items-tbl thead th.gst-c-total-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-total-h,

#pg-purchase .gst-items-tbl thead th.gst-c-total-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-total-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-total-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-total-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-total-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-total-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-total-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-total-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-total-h{width:20%; min-width:130px}
#pg-bill .gst-items-tbl thead th.gst-c-act-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-act-h,

#pg-purchase .gst-items-tbl thead th.gst-c-act-h,

#pg-create-jobwork .gst-items-tbl thead th.gst-c-act-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-act-h, #pg-create-delivery-challan .gst-items-tbl thead th.gst-c-act-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-act-h, #pg-create-jobwork .gst-items-tbl thead th.gst-c-act-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-act-h, #pg-create-packing-list .gst-items-tbl thead th.gst-c-act-h, #pg-create-proforma .gst-items-tbl thead th.gst-c-act-h{width:3%; min-width:46px}

/* ── header (uppercase, muted grey background, thin bottom border) ── */
#pg-bill .gst-items-tbl thead th,
#pg-mc-invoice .gst-items-tbl thead th,

#pg-purchase .gst-items-tbl thead th,

#pg-create-jobwork .gst-items-tbl thead th,
#pg-create-delivery-challan .gst-items-tbl thead th,
#pg-create-packing-list .gst-items-tbl thead th,


#pg-create-proforma .gst-items-tbl thead th{

  background:var(--surf);
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.7px;
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid var(--bdr);
  border-right:1px solid var(--bdr);
  white-space:nowrap;
}
#pg-bill .gst-items-tbl thead th:last-child,
#pg-mc-invoice .gst-items-tbl thead th:last-child,

#pg-purchase .gst-items-tbl thead th:last-child,

#pg-create-jobwork .gst-items-tbl thead th:last-child, #pg-create-proforma .gst-items-tbl thead th:last-child, #pg-create-delivery-challan .gst-items-tbl thead th:last-child, #pg-create-proforma .gst-items-tbl thead th:last-child, #pg-create-jobwork .gst-items-tbl thead th:last-child, #pg-create-proforma .gst-items-tbl thead th:last-child, #pg-create-packing-list .gst-items-tbl thead th:last-child, #pg-create-proforma .gst-items-tbl thead th:last-child{border-right:none}
#pg-bill .gst-items-tbl thead th.c,
#pg-mc-invoice .gst-items-tbl thead th.c,

#pg-purchase .gst-items-tbl thead th.c,

#pg-create-jobwork .gst-items-tbl thead th.c, #pg-create-proforma .gst-items-tbl thead th.c, #pg-create-delivery-challan .gst-items-tbl thead th.c, #pg-create-proforma .gst-items-tbl thead th.c, #pg-create-jobwork .gst-items-tbl thead th.c, #pg-create-proforma .gst-items-tbl thead th.c, #pg-create-packing-list .gst-items-tbl thead th.c, #pg-create-proforma .gst-items-tbl thead th.c{text-align:center}
#pg-bill .gst-items-tbl thead th.r,
#pg-mc-invoice .gst-items-tbl thead th.r,

#pg-purchase .gst-items-tbl thead th.r,

#pg-create-jobwork .gst-items-tbl thead th.r, #pg-create-proforma .gst-items-tbl thead th.r, #pg-create-delivery-challan .gst-items-tbl thead th.r, #pg-create-proforma .gst-items-tbl thead th.r, #pg-create-jobwork .gst-items-tbl thead th.r, #pg-create-proforma .gst-items-tbl thead th.r, #pg-create-packing-list .gst-items-tbl thead th.r, #pg-create-proforma .gst-items-tbl thead th.r{text-align:right}

/* ── every body cell gets a subtle vertical divider like the image ── */
#pg-bill .gst-items-tbl tbody td,
#pg-mc-invoice .gst-items-tbl tbody td,

#pg-purchase .gst-items-tbl tbody td,

#pg-create-jobwork .gst-items-tbl tbody td,
#pg-create-delivery-challan .gst-items-tbl tbody td,
#pg-create-packing-list .gst-items-tbl tbody td,


#pg-create-proforma .gst-items-tbl tbody td{

  padding:10px 10px;
  vertical-align:top;
  border-right:1px solid var(--bdr);
  background:var(--surf);
}
#pg-bill .gst-items-tbl tbody td:last-child,
#pg-mc-invoice .gst-items-tbl tbody td:last-child,

#pg-purchase .gst-items-tbl tbody td:last-child,

#pg-create-jobwork .gst-items-tbl tbody td:last-child, #pg-create-proforma .gst-items-tbl tbody td:last-child, #pg-create-delivery-challan .gst-items-tbl tbody td:last-child, #pg-create-proforma .gst-items-tbl tbody td:last-child, #pg-create-jobwork .gst-items-tbl tbody td:last-child, #pg-create-proforma .gst-items-tbl tbody td:last-child, #pg-create-packing-list .gst-items-tbl tbody td:last-child, #pg-create-proforma .gst-items-tbl tbody td:last-child{border-right:none}

/* ── ROW-A (input row): NO bottom border (visually joined to row-B) ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td{border-bottom:none}

/* ── ROW-B (note row): bottom border = the separator between items ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b > td,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b > td,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b > td,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b > td, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b > td{border-bottom:1px solid var(--bdr)}

/* ── SR cell: bold big number, centered, spans full row-a height ── */
#pg-bill .gst-items-tbl tbody td.gst-c-sr,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-sr,

#pg-purchase .gst-items-tbl tbody td.gst-c-sr,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-sr,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-sr,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-sr,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-sr{

  text-align:center;
  font-weight:600; color:var(--text); font-size:13px;
  vertical-align:top;
  padding-top:14px;
  position:relative;   /* anchor for the hover-delete button */
}

/* ── v3.9.138 — Hover-only red ✕ delete badge sitting on the row ──
   Replaces the always-visible +/- action column (the image has no such
   column). Appears on row hover in the top-left corner of the SR cell,
   fully accessible for click. Add-row is still available via the
   "+ Add Line Item" button below the table.

   v3.9.144 — Action column with visible + / − buttons was restored, so this
   duplicate hover-only ✕ is no longer needed. Kept in DOM (still emitted by
   row builders for backwards-compat) but hidden. */
#pg-bill .gst-items-tbl .gst-row-del-hover,
#pg-mc-invoice .gst-items-tbl .gst-row-del-hover,

#pg-purchase .gst-items-tbl .gst-row-del-hover,

#pg-create-jobwork .gst-items-tbl .gst-row-del-hover, #pg-create-proforma .gst-items-tbl .gst-row-del-hover, #pg-create-delivery-challan .gst-items-tbl .gst-row-del-hover, #pg-create-proforma .gst-items-tbl .gst-row-del-hover, #pg-create-jobwork .gst-items-tbl .gst-row-del-hover, #pg-create-proforma .gst-items-tbl .gst-row-del-hover, #pg-create-packing-list .gst-items-tbl .gst-row-del-hover, #pg-create-proforma .gst-items-tbl .gst-row-del-hover{display:none !important}

/* ── v3.9.144 — Action column restored (was hidden by v3.9.138). Buttons are
   defined further down; nothing to hide here anymore. */

/* ── ROW-A input styling: transparent inputs like image (no visible box) ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td input[type="text"],
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td input[type="text"],

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td input[type="text"],
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"],


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td input[type="number"]{

  width:100%;
  padding:8px 10px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:13px;
  outline:none;
  font-family:inherit;
  min-width:0;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td input::placeholder{

  color:#94a3b8; font-weight:400;
}

/* Selects (UOM, IGST) look like plain text with a soft dropdown arrow */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td select,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td select,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td select,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td select,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td select,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td select,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td select{

  width:100%;
  padding:8px 22px 8px 10px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:13px;
  outline:none;
  font-family:inherit;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  cursor:pointer;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked),


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td select:has(option[value=""]:checked){

  color:#94a3b8;
}

/* ── Product cell (row-a) — thin green outline on focus like the image ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod, #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod{padding:6px 8px}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a td.gst-c-prod:focus-within{

  box-shadow:inset 0 0 0 1.5px var(--brand);
  border-radius:4px;
}

/* ── Qty cell (row-a) — centered text, tiny stock hint below ── */
#pg-bill .gst-items-tbl tbody td.gst-c-qty,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty,

#pg-purchase .gst-items-tbl tbody td.gst-c-qty,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty{text-align:center}
#pg-bill .gst-items-tbl tbody td.gst-c-qty input,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty input,

#pg-purchase .gst-items-tbl tbody td.gst-c-qty input,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty input, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty input, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty input, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty input{text-align:center}

/* ── Discount cell (row-a) — centered ── */
#pg-bill .gst-items-tbl tbody td.gst-c-disc,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-disc,

#pg-purchase .gst-items-tbl tbody td.gst-c-disc,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc{text-align:center}
#pg-bill .gst-items-tbl tbody td.gst-c-disc input,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-disc input,

#pg-purchase .gst-items-tbl tbody td.gst-c-disc input,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc input, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-disc input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc input, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc input, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-disc input, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc input{text-align:center}

/* ── Price cell (row-a) — info icon on left, price on right ── */
#pg-bill .gst-items-tbl tbody td.gst-c-price,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-price,

#pg-purchase .gst-items-tbl tbody td.gst-c-price,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price{padding:10px 10px}
#pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,

#pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-wrap{

  position:relative; display:flex; align-items:center; width:100%;
}
#pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-info,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-info,

#pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-info,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-info,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-info,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-info,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info{

  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#1f2937;
  flex-shrink:0; z-index:2; cursor:help;
}
html[data-theme="dark"] #pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-info,
html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-info,

html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-info, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info{color:#e5e7eb}
#pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-info svg,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-info svg,

#pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-info svg,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-info svg, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-info svg{display:block}
#pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,

#pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input{

  width:100%; padding:6px 4px 6px 26px !important;
  text-align:right; font-size:13px;
  border:none !important; background:transparent !important;
  outline:none;
}

/* ── IGST cell (row-a): dropdown only ── */
#pg-bill .gst-items-tbl tbody td.gst-c-igst,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-igst,

#pg-purchase .gst-items-tbl tbody td.gst-c-igst,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst{text-align:center}

/* ── Total cell (row-a): muted "Total" placeholder until calc writes a number ── */
#pg-bill .gst-items-tbl tbody td.gst-c-total,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-total,

#pg-purchase .gst-items-tbl tbody td.gst-c-total,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-total,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-total,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-total{

  text-align:right;
  padding:14px 10px;
}
#pg-bill .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-total .gst-total-cell,

#pg-purchase .gst-items-tbl tbody td.gst-c-total .gst-total-cell,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-total .gst-total-cell,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-total .gst-total-cell{

  font-size:13px; font-weight:600; color:var(--text);
}
#pg-bill .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,

#pg-purchase .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder{

  color:#94a3b8; font-weight:400;
}

/* ── ROW-B blank cells: light-grey placeholder background (matches image) ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank{

  background:#f5f6f7;
  padding:0;
  min-height:44px;
}
html[data-theme="dark"] #pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,
html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank,

html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank{
  background:#1e2530;
}

/* ── ROW-B product-note cell: yellow Item Note textarea with soft yellow border ──
      v3.9.142 — Border was `var(--brand)` (bright green) — that's what caused
      the item note to look like it was permanently focused / in error state.
      Reference image shows a soft yellow/tan border. Fixed. */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note{

  padding:0 8px 10px 8px;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note{

  margin-top:0;
  background:var(--brand-bg);
  border:1px solid var(--brand-bg2);          /* soft yellow — matches reference image */
  border-radius:6px;
  padding:6px 10px;
  transition:border-color .12s, box-shadow .12s;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within{

  border-color:#fbbf24;              /* amber — subtle focus (still yellow family) */
  box-shadow:0 0 0 2px rgba(251,191,36,.18);
}
html[data-theme="dark"] #pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,

html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note{
  background:#3f3a18;
  border-color:#78630a;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea{

  width:100%;
  background:transparent;
  border:none;
  outline:none;
  resize:vertical;
  min-height:28px;                   /* v3.9.142 — trimmed from 32 to feel closer to the image */
  font-size:12.5px;
  color:var(--text);
  font-family:inherit;
  padding:0;
  line-height:1.45;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder{

  color:#a3a3a3;                     /* neutral grey placeholder — matches image */
  font-style:normal;
}

/* ── ROW-B IGST amount cell: single "0" (muted, centered) ── */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell{

  background:#f5f6f7;
  text-align:center;
  padding:8px 10px;
}
html[data-theme="dark"] #pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,
html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell,

html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell{
  background:#1e2530;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell .gst-igst-amt{

  font-size:12.5px; color:var(--muted); font-weight:500;
  margin:0;
}

/* ── ACTION cell (rowspan=2): centered green + circular button.
      v3.9.146 — Both + (add) and − (delete) are ALWAYS visible on every row
      (matching the reference image). Previous "hover-only" opacity trick
      removed. Row #1 hides its − via `.gst-first-row` (see v3.9.145). */
#pg-bill .gst-items-tbl tbody td.gst-c-act,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act,

#pg-purchase .gst-items-tbl tbody td.gst-c-act,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act{

  vertical-align:middle;
  text-align:center;
  white-space:nowrap;
  padding:8px 6px;
}
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn{

  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:none; background:var(--brand); color:#fff;
  font-size:20px; font-weight:400; line-height:1; padding:0;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(37,99,235,.35);
  transition:transform .12s, background .12s;
  /* v3.9.146 — no opacity:0 / pointer-events:none — button is ALWAYS shown */
}
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover{

  transform:scale(1.08); background:var(--brand);
}
/* v3.9.144 — Delete button is now VISIBLE by default (red circle). Both
   + (add) and − (delete) buttons show at the far right of every row, exactly
   as the reference image shows. */
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{

  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:none; background:#ef4444; color:#fff;
  font-size:18px; font-weight:600; line-height:1; padding:0;
  margin-left:6px;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(220,38,38,.30);
  transition:transform .12s, background .12s;
}
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn:hover{

  transform:scale(1.08); background:#dc2626;
}

/* ── Yellow "Total Inv. Val" footer row ── */
#pg-bill .gst-items-tbl tfoot td,
#pg-mc-invoice .gst-items-tbl tfoot td,

#pg-purchase .gst-items-tbl tfoot td,

#pg-create-jobwork .gst-items-tbl tfoot td,
#pg-create-delivery-challan .gst-items-tbl tfoot td,
#pg-create-packing-list .gst-items-tbl tfoot td,


#pg-create-proforma .gst-items-tbl tfoot td{

  background:var(--brand-bg);
  font-weight:800; font-size:13px;
  padding:11px 10px;
  border-top:1.5px solid var(--brand-bg2);
  border-right:1px solid var(--brand-bg2);
}
#pg-bill .gst-items-tbl tfoot td:last-child,
#pg-mc-invoice .gst-items-tbl tfoot td:last-child,

#pg-purchase .gst-items-tbl tfoot td:last-child,

#pg-create-jobwork .gst-items-tbl tfoot td:last-child, #pg-create-proforma .gst-items-tbl tfoot td:last-child, #pg-create-delivery-challan .gst-items-tbl tfoot td:last-child, #pg-create-proforma .gst-items-tbl tfoot td:last-child, #pg-create-jobwork .gst-items-tbl tfoot td:last-child, #pg-create-proforma .gst-items-tbl tfoot td:last-child, #pg-create-packing-list .gst-items-tbl tfoot td:last-child, #pg-create-proforma .gst-items-tbl tfoot td:last-child{border-right:none}
html[data-theme="dark"] #pg-bill .gst-items-tbl tfoot td,
html[data-theme="dark"] #pg-purchase .gst-items-tbl tfoot td,

html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tfoot td, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tfoot td{background:#3f3a18;border-color:#5c5012}

/* ── Stock hint under Qty (kept muted, small) ── */
#pg-bill .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,

#pg-purchase .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint{

  text-align:center; font-size:11px; color:var(--muted);
  margin-top:3px; font-weight:500;
}
#pg-bill .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low,

#pg-purchase .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:#dc2626;font-weight:600}

/* ── Combo dropdown arrow (▾) inside Product cell ── */
#pg-bill .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,

#pg-purchase .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow{

  color:var(--muted); font-size:12px;
  right:8px; padding:0 4px; background:transparent; border:none;
  cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.188 — Cell hover border + centered footer totals
   User wanted: (1) the numeric footer values center-aligned; (2) a subtle
   teal outline on any input cell in row-A when hovered, so the "fillable"
   area is visually obvious to the user.
   Scoped to #pg-bill and #pg-purchase so no other tables are affected.
   ═══════════════════════════════════════════════════════════════════════ */

/* (1) Footer alignment classes — previously `.gst-items-tbl tfoot td.r/.c`
   had no rules, so class="r" was a no-op. Add both so the HTML changes
   actually take effect. v3.9.192 — added #pg-create-jobwork. */
#pg-bill .gst-items-tbl tfoot td.c,
#pg-mc-invoice .gst-items-tbl tfoot td.c,

#pg-purchase .gst-items-tbl tfoot td.c,
#pg-create-jobwork .gst-items-tbl tfoot td.c, #pg-create-proforma .gst-items-tbl tfoot td.c, #pg-create-delivery-challan .gst-items-tbl tfoot td.c, #pg-create-proforma .gst-items-tbl tfoot td.c, #pg-create-jobwork .gst-items-tbl tfoot td.c, #pg-create-proforma .gst-items-tbl tfoot td.c, #pg-create-packing-list .gst-items-tbl tfoot td.c, #pg-create-proforma .gst-items-tbl tfoot td.c{text-align:center}
#pg-bill .gst-items-tbl tfoot td.r,
#pg-mc-invoice .gst-items-tbl tfoot td.r,

#pg-purchase .gst-items-tbl tfoot td.r,
#pg-create-jobwork .gst-items-tbl tfoot td.r, #pg-create-proforma .gst-items-tbl tfoot td.r, #pg-create-delivery-challan .gst-items-tbl tfoot td.r, #pg-create-proforma .gst-items-tbl tfoot td.r, #pg-create-jobwork .gst-items-tbl tfoot td.r, #pg-create-proforma .gst-items-tbl tfoot td.r, #pg-create-packing-list .gst-items-tbl tfoot td.r, #pg-create-proforma .gst-items-tbl tfoot td.r{text-align:right}

/* (2) Row-A hover-border on the "fillable" cells (Qty, UOM, Price, Discount,
   IGST, Total). Uses inset box-shadow so we don't shift any layout — same
   technique already used for `.gst-c-prod:focus-within` above.
   v3.9.192 — added #pg-create-jobwork. */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,
#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:hover,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:hover,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:hover,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:hover,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:hover,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-total:hover,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,

#pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,
#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,
#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-qty:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-uom:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-price:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-disc:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-igst:focus-within{

  box-shadow:inset 0 0 0 1.5px var(--brand);
  border-radius:4px;
  transition:box-shadow .12s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END v3.9.138 two-row layout
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.190 — Mobile Product-Items: hide the redundant row-B
   ───────────────────────────────────────────────────────────────────────────
   The desktop layout uses TWO <tr> per item (row-A = inputs, row-B = note +
   grey blank cells + IGST amount). The existing v3.9.137 mobile card CSS
   (see @media (max-width:760px) below) turns every <tr> into a card via
   grid-template-areas — but since it was written before row-B existed, it
   ends up rendering row-B as an EMPTY card full of grey blank boxes below
   every item ("6 empty boxes" in the user's terms).

   Fix: on mobile, kill row-B outright with !important (defeats every less-
   specific display: block/grid rule below). The note textarea it used to
   contain has already been moved into row-A's product cell by
   _maMobilizeItems (v3.9.189 JS), so we lose nothing user-facing. The
   little IGST-amount indicator is redundant on mobile — the Total column
   already shows the aggregated amount, and the "Amount Detail" panel that
   appears further down the page has the full breakdown.

   Breakpoint is 760px to match the existing mobile card CSS — everything
   snaps to card mode together, avoiding the 641-760px gap where row-B
   would otherwise leak back in.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){
  /* v3.9.192 — added #pg-create-jobwork to every scoped selector below. */
  #pg-bill .gst-items-tbl tbody tr.gst-item-row-b,
  #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b,

  #pg-purchase .gst-items-tbl tbody tr.gst-item-row-b,
  #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b,
  #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b,
  #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b,


  #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b{

    display: none !important;
  }

  /* Style the moved-in note wrap that now lives inside row-A's product cell.
     Yellow background matches the desktop styling; a small top-margin
     visually separates it from the product-name combo above. */
  #pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,

  #pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,


  #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note{

    margin-top: 8px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-bg2);
    border-radius: 6px;
    padding: 6px 10px;
    display: block;
  }
  html[data-theme="dark"] #pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note,
  html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note, html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note{
    background: #3f3a18;
    border-color: #78630a;
  }
  #pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,
  #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,

  #pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,
  #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,
  #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,
  #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea,


  #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea{

    width: 100%;
    background: transparent;
    border: none;
    resize: vertical;
    outline: none;
    min-height: 28px;
    font-size: 12.5px;
    color: var(--text);
    font-family: inherit;
    padding: 0;
    line-height: 1.45;
  }
  #pg-bill .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,
  #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,

  #pg-purchase .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,
  #pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,
  #pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,
  #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder,


  #pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod > .gst-item-note textarea::placeholder{

    color: #a3a3a3;
    font-style: normal;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   END v3.9.190 mobile — hide row-B
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.210 — CREATE PACKING LIST — specific styling
   ───────────────────────────────────────────────────────────────────────────
   The Packing List items table has a different column set than Sale
   Invoice / DC / SO / PO (no money columns — instead shipment columns:
   Pkg No / Sr / Product Description / Quantity / No. of Package /
   Net Weight / Kind of Package / Gross Weight / Dimension). Widths are
   tuned so all 9 columns fit at ~1200px without horizontal scroll, and
   inputs inside cells look like the reference PDF (borderless with focus
   underline).
   ═══════════════════════════════════════════════════════════════════════════ */
#pg-create-packing-list .cpk-items-tbl{ table-layout:fixed; }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-pkgno-h  { width:6%;  min-width:70px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-sr-h     { width:4%;  min-width:44px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-desc-h   { width:20%; min-width:180px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-qty-h    { width:9%;  min-width:95px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-nopkg-h  { width:10%; min-width:110px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-netwt-h  { width:10%; min-width:105px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-kind-h   { width:12%; min-width:120px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-grosswt-h{ width:10%; min-width:105px }
#pg-create-packing-list .cpk-items-tbl thead th.cpk-c-dim-h    { width:14%; min-width:120px }

/* Inputs inside packing-list cells — borderless, focus-highlighted. */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno   input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-qty     input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-nopkg   input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-netwt   input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind    input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim     input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea{
  width:100%;
  padding:6px 8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  outline:none;
  border-radius:4px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea{
  resize:vertical;
  min-height:32px;
  line-height:1.4;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno   input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-qty     input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-nopkg   input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-netwt   input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind    input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim     input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea:focus{
  border-color:var(--brand);
  background:#f0fdf4;
}

/* Item-note row (bottom half of each row on desktop) — yellow product-note
   textarea like other create pages. */
#pg-create-packing-list .cpk-items-tbl tbody td.gst-c-prod-note{
  padding:0 8px 10px;
  background:transparent;
  border-bottom:1px solid var(--bdr);
}
#pg-create-packing-list .cpk-items-tbl tbody td.gst-c-prod-note .gst-item-note{
  background:var(--brand-bg);
  border:1px solid var(--brand-bg2);
  border-radius:6px;
  padding:6px 10px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.gst-c-prod-note textarea{
  width:100%;
  background:transparent;
  border:none;
  resize:vertical;
  outline:none;
  min-height:28px;
  font-size:12.5px;
  color:var(--text);
  font-family:inherit;
  padding:0;
  line-height:1.45;
}

/* Center yellow "Total Pkg. Val" footer row (matches reference). */
#pg-create-packing-list .cpk-items-tbl tfoot td{
  background:var(--brand-bg);
  color:var(--text);
  font-weight:700;
  padding:11px 8px;
  border-top:1.5px solid var(--brand-bg2);
}
#pg-create-packing-list .cpk-items-tbl tfoot td.c{ text-align:center; }

/* Yellow tint on the first (Pkg No) column across the table body — matches
   the reference PDF's soft yellow band on the far-left column. */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno{
  background:var(--brand-bg);
  border-right:1px solid var(--brand-bg2);
}

/* Row-B hider on mobile (same pattern as other pages). */
@media (max-width: 760px){
  #pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b{
    display:none !important;
  }
}

/* ═══ MOBILE CARD LAYOUT for Create Packing List's items table ═══
   The 9-column shipment layout can't fit on phones. Below 640px we
   collapse each row into a card with two-column mini-grid labels
   (Qty | No. of Package, Net Wt | Kind, Gross Wt | Dimension).
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  #pg-create-packing-list .cpk-items-tbl,
  #pg-create-packing-list .cpk-items-tbl thead,
  #pg-create-packing-list .cpk-items-tbl tbody,
  #pg-create-packing-list .cpk-items-tbl tfoot,
  #pg-create-packing-list .cpk-items-tbl tr,
  #pg-create-packing-list .cpk-items-tbl td,
  #pg-create-packing-list .cpk-items-tbl th{
    display:block;
    width:auto;
  }
  #pg-create-packing-list .cpk-items-tbl thead{ display:none; }

  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a{
    position:relative;
    padding:14px 12px 12px;
    margin-bottom:10px;
    border:1px solid var(--bdr);
    border-radius:10px;
    background:var(--surf);
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }

  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td{
    display:block;
    padding:6px 0;
    border:none;
    background:transparent;
    position:relative;
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-pkgno{
    grid-column:1 / span 2;
    padding-bottom:8px;
    border-bottom:1px dashed var(--bdr);
    background:transparent;
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-sr{ display:none; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-desc{
    grid-column:1 / span 2;
    padding-bottom:10px;
    border-bottom:1px dashed var(--bdr);
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.gst-c-act{
    position:absolute;
    top:10px; right:10px;
    display:inline-flex;
    gap:4px;
  }

  /* Auto pseudo-labels above each input field. */
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td::before{
    display:block;
    font-size:10.5px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:4px;
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-pkgno::before  { content:"Pkg No.";  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-desc::before   { content:"Product Description"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-qty::before    { content:"Quantity"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-nopkg::before  { content:"No. of Package"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-netwt::before  { content:"Net Weight"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-kind::before   { content:"Kind of Package"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-grosswt::before{ content:"Gross Weight"; }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-dim::before    { content:"Dimension"; }

  /* Bordered inputs on mobile (better tap targets). */
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td input,
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td textarea{
    border:1px solid var(--bdr);
    background:var(--surf);
    padding:8px 10px;
    font-size:14px;
    border-radius:6px;
  }

  /* Item Note moves inside the desc cell on mobile (via _maMobilizeItems).
     Style the moved-in note. */
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-desc > .gst-item-note{
    margin-top:8px;
    background:var(--brand-bg);
    border:1px solid var(--brand-bg2);
    border-radius:6px;
    padding:6px 10px;
    display:block;
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-desc > .gst-item-note textarea{
    width:100%; background:transparent; border:none; resize:vertical; outline:none;
    min-height:28px; font-size:12.5px; color:var(--text); font-family:inherit;
    padding:0; line-height:1.45;
  }

  /* Full-width tfoot row on mobile — collapse to grid. */
  #pg-create-packing-list .cpk-items-tbl tfoot tr{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:4px;
    padding:12px;
    background:var(--brand-bg);
    border-radius:8px;
    margin-bottom:12px;
  }
  #pg-create-packing-list .cpk-items-tbl tfoot td{
    background:transparent;
    padding:6px 4px;
    border-top:none;
    font-size:12.5px;
    text-align:center;
  }
  #pg-create-packing-list .cpk-items-tbl tfoot td:first-child{
    grid-column:1 / span 3;
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.212 — GROUPED PACKAGE LAYOUT + INLINE INVOICE ROW
   ───────────────────────────────────────────────────────────────────────────
   Adds a proper inline "Invoice No. | input | Invoice Date | input" row
   (label BESIDE input, not above) and styles the new rowspan cells
   (Pkg No, Kind of Package, Gross Weight, Dimension) for the grouped
   product-items table.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Invoice No + Invoice Date on ONE row with inline labels. Matches the
   "gst-invrow" pattern (label|input) but with two label|input pairs
   packed in a 4-column grid. */
#pg-create-packing-list .gst-invrow.gst-invrow--pair{
  grid-template-columns: 120px 1fr 120px 170px;
  gap: 8px 14px;
  align-items: center;
}
#pg-create-packing-list .gst-invrow.gst-invrow--pair > label{
  font-size:12.5px;
  font-weight:500;
  color:var(--text);
}
#pg-create-packing-list .gst-invrow.gst-invrow--pair > label.gst-invrow-secondary-lbl{
  text-align:right;
  padding-right:4px;
}
#pg-create-packing-list .gst-invrow.gst-invrow--pair > input{
  padding:7px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  outline:none;
  background:var(--surf);
  color:var(--text);
  min-width:0;
}
#pg-create-packing-list .gst-invrow.gst-invrow--pair > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Prefix / Postfix in the Packing No row — v3.9.212 uses regular
   (non-readonly) styling now so they're clearly editable. Placeholder
   text ("Prefix", "Postfix") stays subtle-grey via ::placeholder rule. */
#pg-create-packing-list .gst-invno input{
  background:var(--surf);
  color:var(--text);
  text-align:left;
  font-weight:400;
  cursor:text;
}
#pg-create-packing-list .gst-invno input::placeholder{
  color:var(--muted);
  opacity:1;
}

/* PKG NO cell — the rowspan cell that groups multiple product rows.
   Yellow tint (matches reference image) with vertical center alignment
   so the PKG number sits mid-way between the grouped rows. */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno{
  background:var(--brand-bg);
  border-right:1px solid var(--brand-bg2);
  vertical-align:middle;
  text-align:center;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno .cpk-pkgno-input{
  width:52px;
  padding:5px 6px;
  border:1px solid transparent;
  background:transparent;
  text-align:center;
  font-weight:600;
  font-size:14px;
  color:var(--text);
  outline:none;
  border-radius:4px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno .cpk-pkgno-input:focus{
  border-color:var(--brand);
  background:#fff;
}

/* SR cell — small centered number, no input (auto-numbered per rebuild) */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-sr{
  text-align:center;
  vertical-align:middle;
  font-weight:500;
  color:var(--text);
}

/* Product Description cell — description on top, yellow item note stacked
   underneath in the SAME cell (v3.9.212 replaced the row-B pattern with
   this single-cell layout so the reference image is matched exactly). */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc{
  vertical-align:top;
  padding:6px 8px 8px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea[data-fld="desc"]{
  width:100%;
  padding:6px 8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  outline:none;
  border-radius:4px;
  resize:vertical;
  min-height:28px;
  line-height:1.4;
  margin-bottom:6px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea[data-fld="desc"]:focus{
  border-color:var(--brand);
  background:#f0fdf4;
}
/* Item Note textarea in yellow — nested inside the description cell. */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc .gst-item-note{
  background:var(--brand-bg);
  border:1px solid var(--brand-bg2);
  border-radius:6px;
  padding:5px 8px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc .gst-item-note textarea{
  width:100%;
  background:transparent;
  border:none;
  resize:vertical;
  outline:none;
  min-height:22px;
  font-size:12.5px;
  color:var(--text);
  font-family:inherit;
  padding:0;
  line-height:1.45;
}

/* Net Weight cell — hosts the input + the + / − action buttons stacked
   vertically on the right (matches image 2). */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-netwt{
  vertical-align:middle;
}
#pg-create-packing-list .cpk-netwt-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
#pg-create-packing-list .cpk-netwt-wrap > input{
  flex:1;
  min-width:0;
  padding:6px 8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  outline:none;
  border-radius:4px;
}
#pg-create-packing-list .cpk-netwt-wrap > input:focus{
  border-color:var(--brand);
  background:#f0fdf4;
}
#pg-create-packing-list .cpk-row-actions{
  display:flex;
  flex-direction:column;
  gap:4px;
}
#pg-create-packing-list .cpk-row-actions .gst-add-row-btn,
#pg-create-packing-list .cpk-row-actions .gst-del-row-btn{
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#pg-create-packing-list .cpk-row-actions .gst-add-row-btn{ background:var(--brand); }
#pg-create-packing-list .cpk-row-actions .gst-add-row-btn:hover{ background:var(--brand-d); }
#pg-create-packing-list .cpk-row-actions .gst-del-row-btn{ background:#ef4444; }
#pg-create-packing-list .cpk-row-actions .gst-del-row-btn:hover{ background:#dc2626; }
/* Hide the delete button when there's only 1 package with 1 row (nothing
   to delete). Handled via a body class or per-row test — simpler to
   always show; deletion is silently ignored when it would empty the table. */

/* Kind of Package / Gross Weight / Dimension cells — rowspan cells,
   vertically centered so their single input sits mid-way through the
   grouped product rows. */
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim{
  vertical-align:middle;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt input,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim input{
  width:100%;
  padding:6px 8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  outline:none;
  border-radius:4px;
}
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt input:focus,
#pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim input:focus{
  border-color:var(--brand);
  background:#f0fdf4;
}

/* Dimension cell — hosts the corner "+ Add Package" button (matches
   image 2's small green plus at top-right of Dimension column). */
#pg-create-packing-list .cpk-dim-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}
#pg-create-packing-list .cpk-dim-wrap > input{ flex:1; min-width:0; }
#pg-create-packing-list .cpk-add-pkg-btn{
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  background:var(--brand);
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex:0 0 auto;
}
#pg-create-packing-list .cpk-add-pkg-btn:hover{ background:var(--brand-d); }

/* Row borders — subtle horizontal separators between product rows,
   but the border extends across the non-rowspan cells only (SR, Desc,
   Qty, NoPkg, NetWt). The rowspan cells (Pkg No, Kind, Gross, Dim)
   have no internal borders because they visually merge the group. */
#pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td{
  border-bottom:1px solid var(--bdr);
}
#pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-pkgno,
#pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-kind,
#pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-grosswt,
#pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-dim{
  border-bottom:1px solid var(--bdr);
  border-right:1px solid var(--bdr);
}

/* ═══ MOBILE (≤640px) — full stacked-card layout for the grouped model.
   Each product row becomes its own card. The rowspan cells are shown
   INSIDE the first row's card of each package (with pseudo-labels), so
   you can still edit Pkg No / Kind / Gross / Dim on mobile. */
@media (max-width: 640px){
  /* Hide the desktop netwt action wrapper's compact layout — replace with
     a spanning row inside each card. Actually leave it as-is; the card
     layout below handles positioning. */

  /* Show/hide rowspan cells on mobile — they appear only in the first
     row of each package (data-first-in-pkg="1"), so hide them everywhere
     else. Also strip the rowspan attribute's visual effect since each
     row is now a card. */
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a{
    /* Keep grid layout from v3.9.210 mobile block */
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-pkgno,
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-kind,
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-grosswt,
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-dim{
    /* Mobile ignores desktop rowspan — cells behave as if rowspan=1 */
    grid-column:auto;
    border:none;
  }
  #pg-create-packing-list .cpk-items-tbl tbody tr.gst-item-row-a > td.cpk-c-pkgno .cpk-pkgno-input{
    width:100%;
    text-align:left;
    padding:8px 10px;
    border:1px solid var(--bdr);
    background:var(--surf);
    border-radius:6px;
  }
  #pg-create-packing-list .cpk-netwt-wrap{ gap:8px; }
  #pg-create-packing-list .cpk-row-actions{ flex-direction:row; }
  #pg-create-packing-list .cpk-dim-wrap{ gap:8px; }
}

/* Section heading inside Product Items (with discount toggle on right) */
.gst-items-hdr{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;border-bottom:1px solid var(--bdr);background:var(--surf2);border-radius:10px 10px 0 0}
.gst-items-hdr-title{font-weight:700;font-size:14px}
.gst-disc-toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.gst-disc-toggle .gst-disc-seg{display:inline-flex;border:1px solid var(--bdr);border-radius:20px;overflow:hidden;background:var(--surf)}
.gst-disc-toggle .gst-disc-seg button{padding:5px 14px;border:none;background:transparent;cursor:pointer;font-weight:700;font-size:11.5px;color:var(--muted);font-family:inherit}
.gst-disc-toggle .gst-disc-seg button.on{background:var(--brand);color:#fff}

/* Action row at bottom */
.gst-action-row{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px;padding:14px 0}
.gst-action-row .left{margin-right:auto;display:flex;gap:8px}
.gst-action-row button{padding:9px 22px;font-weight:700;font-size:13px;border-radius:7px;border:1.5px solid var(--bdr);background:var(--surf);color:var(--text);cursor:pointer;font-family:inherit}
.gst-action-row button.save{background:var(--brand);border-color:var(--brand);color:#fff}
.gst-action-row button.save:hover{filter:brightness(1.07)}
.gst-action-row button.save-print{background:#fff;color:var(--brand);border-color:var(--brand)}
.gst-action-row button.disc{color:#dc2626;border-color:#fca5a5;background:#fef2f2}

/* Bank Detail show/hide select */
.gst-bank-sel{padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;font-size:13px;background:var(--surf);color:var(--text);outline:none;font-family:inherit;width:100%}

/* Payment Type expanded panel */
.gst-pmt-panel{display:none;margin-top:10px;padding:10px;background:var(--surf2);border:1px dashed var(--bdr);border-radius:8px}
.gst-pmt-panel.on{display:block}
.gst-pmt-row{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;margin-bottom:8px;font-size:12.5px}
.gst-pmt-row:last-child{margin-bottom:0}
.gst-pmt-row label{color:var(--muted);font-weight:500;margin:0}
.gst-pmt-row input,.gst-pmt-row select{width:100%;padding:6px 9px;border:1px solid var(--bdr);border-radius:5px;font-size:12.5px;background:var(--surf);color:var(--text);outline:none;font-family:inherit}

/* "Add Additional Charge" row */
.gst-extra-charge{display:grid;grid-template-columns:1.4fr .7fr .8fr .8fr 32px;gap:5px;align-items:center;margin:7px 0;font-size:12px}
.gst-extra-charge input,.gst-extra-charge select{padding:6px 8px;border:1px solid var(--bdr);border-radius:5px;font-size:12px;background:var(--surf);color:var(--text);outline:none;width:100%;font-family:inherit}
.gst-extra-charge .rm{background:#fef2f2;border:1px solid #fca5a5;color:#dc2626;border-radius:50%;width:24px;height:24px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px;line-height:1;padding:0}

/* v3.9.224 — Extra-charge row variant with a combo dropdown of saved
   charges (Delivery Challan / Quotation / etc.). Reference image (Image 3)
   shows: [Name combo] [Price] [Tax dropdown] [Total] [− remove]. The
   dropdown pops out from the name input; a green "+ Add New" pinned at
   the top opens the same Add Products / Services sidebar as the 3-dot
   menu, with the charge preset. */
.cdc-charge-combo-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin:7px 0;
  font-size:12px;
}
.cdc-charge-combo-row .ma-combo-wrap{
  position:relative;
  flex:1;
  min-width:0;
}
.cdc-charge-combo-row .ma-combo-input-row{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--bdr);
  border-radius:5px;
  background:var(--surf);
  overflow:hidden;
}
.cdc-charge-combo-row .ma-combo-input-row input{
  flex:1;
  padding:6px 8px;
  border:none;
  background:transparent;
  outline:none;
  font-size:12px;
  color:var(--text);
  font-family:inherit;
}
.cdc-charge-combo-row .ma-combo-arrow{
  padding:6px 10px;
  cursor:pointer;
  color:var(--muted);
  font-size:11px;
  border-left:1px solid var(--bdr);
  user-select:none;
}
.cdc-charge-combo-row .ma-combo-arrow:hover{
  background:var(--surf2);
  color:var(--text);
}
.cdc-charge-combo-row .ma-combo-drop{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  min-width:280px;
  max-height:280px;
  overflow-y:auto;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 6px 20px rgba(15,40,34,.16);
  z-index:100;
  display:none;
}
.cdc-charge-combo-row .ma-combo-drop.open{ display:block; }
.cdc-charge-combo-row .ma-combo-opt{
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--surf2);
  transition:background .12s;
}
.cdc-charge-combo-row .ma-combo-opt:hover{
  background:rgba(37,99,235,.08);
}
.cdc-charge-combo-row .ma-combo-opt-custom{
  border-bottom:1px solid var(--bdr);
  background:var(--surf2);
}
.cdc-charge-combo-row .ma-combo-opt-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
}
.cdc-charge-combo-row .ma-combo-opt-sub{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}
.cdc-charge-combo-row .ma-combo-empty{
  padding:12px 14px;
  font-size:11.5px;
  color:var(--muted);
  text-align:center;
}
.cdc-charge-combo-row input[data-fld],
.cdc-charge-combo-row select[data-fld]{
  padding:6px 8px;
  border:1px solid var(--bdr);
  border-radius:5px;
  font-size:12px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
}
.cdc-charge-combo-row .rm{
  background:#fef2f2;
  border:1px solid #fca5a5;
  color:#dc2626;
  border-radius:50%;
  width:24px;
  height:24px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  line-height:1;
  padding:0;
  flex-shrink:0;
}
/* On phones stack the combo above and let the price/tax/total wrap. */
@media (max-width:640px){
  .cdc-charge-combo-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .cdc-charge-combo-row .ma-combo-wrap{
    grid-column:1 / -1;
  }
  .cdc-charge-combo-row input[data-fld],
  .cdc-charge-combo-row select[data-fld]{
    width:100%;
  }
  .cdc-charge-combo-row .rm{
    justify-self:end;
  }
}

/* Page top header bar (Create Sale Invoice + Create Another Invoice on right) */
.gst-pg-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.gst-pg-bar h2{margin:0;font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.gst-pg-bar .ma-btn{font-size:13px;font-weight:700}

/* ════════════════════════════════════════════
   GST INVOICE REDESIGN — Phase 2 (image-match polish)
════════════════════════════════════════════ */

/* Item-picker dropdown — position:fixed so it escapes ancestor overflow.
   v3.9.140 — Width tightened further to 220-320 (was 260-380) so it feels
   snug against the narrower PRODUCT column. */
.gst-items-tbl .ma-combo-drop{
  position:fixed !important;
  z-index:9999 !important;
  min-width:220px;
  max-width:320px;
  width:auto;
  max-height:340px;
  background:var(--surf);
  border:1.5px solid var(--brand);
  border-radius:9px;
  box-shadow:0 12px 32px rgba(0,0,0,.20);
  overflow:hidden;         /* single-scroll surface — inner list scrolls */
  display:none;
  flex-direction:column;
}
.gst-items-tbl .ma-combo-drop.open{display:flex}
.gst-items-tbl .ma-combo-drop .ma-combo-search{
  padding:10px 12px;
  border-bottom:1.5px solid var(--bdr);
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  border-radius:9px 9px 0 0;
  flex:0 0 auto;
}
.gst-items-tbl .ma-combo-drop .ma-combo-list{
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
}
/* Custom Product row — always first in the list (JS emits it first).
   Visually highlighted so users spot it immediately as an entry point for
   one-off product names. NOT sticky (that was the v3.9.137 bug). */
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom{
  background:rgba(37,99,235,.08);
  border-bottom:1px dashed var(--brand);
}
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom:hover,
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom.hi{
  background:var(--brand); color:#fff;
}
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom:hover .ma-combo-opt-name,
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom.hi .ma-combo-opt-name{color:#fff !important}
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom:hover .ma-combo-opt-sub,
.gst-items-tbl .ma-combo-drop .ma-combo-opt-custom.hi .ma-combo-opt-sub{color:rgba(255,255,255,.92) !important}
/* Regular option rows */
.gst-items-tbl .ma-combo-drop .ma-combo-opt{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--bdr)}
.gst-items-tbl .ma-combo-drop .ma-combo-opt:last-child{border-bottom:none}
.gst-items-tbl .ma-combo-drop .ma-combo-opt:hover,
.gst-items-tbl .ma-combo-drop .ma-combo-opt.hi{background:var(--brand);color:#fff}
.gst-items-tbl .ma-combo-drop .ma-combo-opt:hover .ma-combo-opt-name,
.gst-items-tbl .ma-combo-drop .ma-combo-opt.hi .ma-combo-opt-name,
.gst-items-tbl .ma-combo-drop .ma-combo-opt:hover .ma-combo-opt-sub,
.gst-items-tbl .ma-combo-drop .ma-combo-opt.hi .ma-combo-opt-sub{color:#fff}
.gst-items-tbl .ma-combo-drop .ma-combo-empty{padding:14px 12px;text-align:center;color:var(--muted);font-size:12.5px}
/* "+ Add item note" mini-link below the product input */
/* v3.9.141 — Item Note is ALWAYS visible again (matches reference image).
   The "+ Add Note" link from v3.9.140 is retired but the class stays hidden
   so any residual markup doesn't render. */
.gst-row-note-link{display:none !important}

/* v3.9.137 — Min width reduced (one column removed: HSN gone) so the table
   fits tighter on smaller viewports without horizontal scroll. */
.gst-items-tbl{min-width:960px}

/* ════════════════════════════════════════════
   MOBILE & TABLET RESPONSIVENESS
════════════════════════════════════════════ */

/* Tablet (768–1100px): the card grids already collapse via the existing rules;
   here we just shrink table padding so it fits a tablet viewport better. */
@media (max-width:1100px){
  .gst-fr{grid-template-columns:115px 1fr;gap:8px;margin-bottom:8px}
  .gst-fr-2{grid-template-columns:115px 1fr 90px 1fr;gap:8px;margin-bottom:8px}
  .gst-invrow{grid-template-columns:115px 1fr 65px 1fr;gap:8px}
  .gst-card-body{padding:12px}
  .gst-pmt-row{grid-template-columns:110px 1fr;gap:7px;font-size:12px}
  .gst-pmt-row input,.gst-pmt-row select{padding:5px 7px;font-size:12px}
}

/* Phone (≤760px): stack each invoice-row into a "card" with data-labels */
@media (max-width:760px){
  /* Outer page bar — wrap header + button */
  .gst-pg-bar{flex-direction:column;align-items:stretch;gap:8px}
  .gst-pg-bar h2{font-size:15px}
  .gst-pg-bar .ma-btn{align-self:flex-end}

  /* Top grid columns → 1 column (already at 1100px, but ensure spacing) */
  .gst-bill-grid,.gst-bottom-grid{gap:10px}
  .gst-fr{grid-template-columns:1fr;gap:4px;margin-bottom:9px}
  .gst-fr label{font-size:11.5px;color:var(--muted)}
  .gst-fr-2{grid-template-columns:1fr 1fr;gap:8px}
  .gst-fr-2 label{grid-column:span 2;font-size:11.5px;color:var(--muted)}
  .gst-fr-2 label:nth-of-type(2){grid-column:span 2}
  /* v3.9.490 — Invoice-No + Date row.
     Before: `.gst-invrow` used 2 cols on mobile → the invoice-no
     triplet only got ~50% of the viewport, squeezing each of the 3
     sub-inputs into ~55 px (INV / 002 / Pos all truncated).
     Now: rows fully stack — every label + input gets full width,
     so the triplet spreads across the entire card width and each
     sub-input becomes readable (~100+ px wide on typical phones). */
  .gst-invrow{grid-template-columns:1fr;gap:6px}
  .gst-invrow label{font-size:11.5px;color:var(--muted);margin-top:4px}
  .gst-invno{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .gst-invno input{padding:9px 10px;font-size:13.5px;min-height:38px}

  /* Card paddings tighter */
  .gst-card-hdr{padding:9px 12px}
  .gst-card-title{font-size:13px}
  .gst-card-body{padding:11px 12px}
  .gst-items-hdr{padding:9px 12px;flex-direction:row;flex-wrap:wrap;gap:8px}
  .gst-items-hdr-title{font-size:13px}

  /* Items table — v3.9.137 card-per-row (HSN column removed) */
  .gst-items-tbl{min-width:0;width:100%;table-layout:auto}
  .gst-items-tbl thead{display:none}
  .gst-items-tbl tfoot{display:none}   /* yellow totals row hidden; Amount Detail card shows them */

  .gst-items-tbl tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "prod prod"
      "qty  uom"
      "price price"
      "disc igst"
      "total total"
      "act act";
    gap:9px 10px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:9px;
    padding:12px 12px 10px;
    margin:0 12px 10px;
    position:relative;
  }
  .gst-items-tbl tbody td{padding:0;border:none;display:block;font-size:12.5px;min-width:0}
  .gst-items-tbl tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:9.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;
  }
  .gst-items-tbl tbody td[data-label=""]::before{content:none}

  /* SR pill — absolutely positioned top-left so it doesn't occupy a grid slot */
  .gst-c-sr{
    position:absolute;top:10px;left:12px;
    width:28px;height:28px;
    background:var(--surf2);
    color:var(--brand) !important;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:13px !important;font-weight:700;
    margin:0;padding:0;
  }
  .gst-c-sr::before{content:none !important}

  /* Product cell spans both columns; left-padding clears the SR pill */
  .gst-c-prod{grid-area:prod;padding-left:42px;max-width:none}
  .gst-c-prod::before{padding-left:0}
  .gst-c-prod .ma-combo-input-row input{font-size:13.5px;padding:10px 26px 10px 10px;width:100%}
  .gst-c-prod .ma-combo-arrow{right:8px;font-size:13px}
  .gst-c-prod .gst-row-note-link{font-size:11px}
  /* Item-note textarea inside the Product cell */
  .gst-c-prod .gst-item-note textarea{min-height:54px;font-size:12.5px}

  /* Standard cells — assign to their grid areas (HSN removed in Sale/Purchase only) */
  #pg-bill .gst-c-hsn,
  #pg-mc-invoice .gst-c-hsn,

  #pg-purchase .gst-c-hsn{display:none !important}
  .gst-c-qty  {grid-area:qty}
  .gst-c-uom  {grid-area:uom}
  .gst-c-price{grid-area:price}
  .gst-c-disc {grid-area:disc}
  .gst-c-igst {grid-area:igst}
  .gst-c-total{grid-area:total;background:var(--brand-bg);border-radius:6px;padding:8px 10px !important;margin-top:2px}
  html[data-theme="dark"] .gst-c-total{background:#3f3a18}

  .gst-c-qty input,
  .gst-c-uom select,.gst-c-disc input,
  .gst-c-igst select{width:100%;padding:9px 10px;font-size:13px}

  /* Price field with info icon, full width of its grid cell */
  .gst-c-price{padding:0 !important}
  .gst-c-price::before{content:attr(data-label);display:block;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;padding:0}
  .gst-c-price .gst-price-wrap{background:var(--surf);border:1px solid var(--bdr);border-radius:5px;display:flex;align-items:center;position:relative}
  .gst-c-price .gst-price-wrap input{width:100%;padding:9px 10px 9px 28px !important;text-align:left;font-size:13px;border:none;background:transparent;outline:none;font-family:inherit;color:var(--text)}
  .gst-c-price .gst-price-wrap input:focus{box-shadow:none}
  .gst-c-price .gst-price-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}
  .gst-c-price .gst-price-info{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:#1f2937;flex-shrink:0;pointer-events:none}
  html[data-theme="dark"] .gst-c-price .gst-price-info{color:#e5e7eb}
  .gst-c-price .gst-price-dot{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#374151;flex-shrink:0;pointer-events:none}

  /* Total cell — label inline-left, value inline-right */
  .gst-c-total::before{display:inline;float:left;margin:0;padding:0;font-size:11px;color:var(--text);font-weight:700}
  .gst-c-total .gst-total-cell{float:right;font-size:14px;font-weight:800}
  .gst-c-total::after{content:'';display:block;clear:both}

  /* Action buttons — bottom-right (grid area `act`) */
  .gst-c-act{
    grid-area:act;
    display:flex;flex-direction:row;justify-content:flex-end;align-items:center;
    gap:6px;padding:0 !important;margin-top:2px;
  }
  .gst-c-act::before{content:none}
  .gst-c-act .gst-add-row-btn,
  .gst-c-act .gst-del-row-btn{width:32px;height:32px;font-size:18px;flex-shrink:0}

  /* Stock hint left-aligned */
  .gst-stock-hint{text-align:left;font-size:11px}

  /* Serial / Batch sub-rows tighter */
  .gst-item-serial,.gst-item-batch{margin-top:5px}
  .gst-item-serial select,.gst-item-serial input,
  .gst-item-batch input{width:100%;font-size:12.5px;padding:8px 10px}

  /* IGST: select on top, amount below */
  .gst-c-igst select{margin-bottom:2px}
    .gst-igst-amt{margin-top:2px}

  /* Payment buttons → smaller, still 4 across */
  .gst-pmt-btns{gap:5px}
  .gst-pmt-btn{padding:7px 2px;font-size:10.5px;letter-spacing:.3px}
  .gst-pmt-row{grid-template-columns:1fr;gap:3px}
  .gst-pmt-row label{font-size:11.5px;color:var(--muted)}
  .gst-pmt-panel{padding:9px}

  /* Smart Suggestion checkboxes stack */
  .gst-smart-body{grid-template-columns:1fr;gap:7px}

  /* Action row at the bottom of the page */
  .gst-action-row{flex-wrap:wrap;gap:7px;padding:10px 0}
  .gst-action-row .left{order:2;width:100%;justify-content:space-between}
  .gst-action-row button{padding:9px 14px;font-size:12.5px;flex:1;min-width:120px}

  /* Amount-detail rows: keep two-column but tighter */
  .gst-amt-row{font-size:13px;padding:7px 0}
  .gst-amt-row.grand{padding:9px 10px}
  .gst-amt-row.grand .v{font-size:15px}

  /* Extra-charge inline grid stacks vertically below 760 */
  .gst-extra-charge{grid-template-columns:1fr 1fr 1fr;gap:5px;align-items:end}
  .gst-extra-charge input[data-fld="name"]{grid-column:1/span 3}
  .gst-extra-charge .rm{grid-column:3;margin-left:auto}
}

/* Phone (≤480px): even tighter, single-column extra-charges */
@media (max-width:480px){
  .gst-extra-charge{grid-template-columns:1fr 1fr;gap:5px}
  .gst-extra-charge input[data-fld="name"]{grid-column:1/span 2}
  .gst-extra-charge .rm{grid-column:2;margin-left:auto}
  .gst-pmt-btn{font-size:10px;padding:7px 1px}
}

/* ════════════════════════════════════════════
   Item-picker dropdown — mobile/tablet (v3.9.12)
   ──────────────────────────────────────────────
   On phones the dropdown becomes a full-width modal-style overlay
   anchored just below the input. Positioning is still done by JS
   via _gstPositionDropdown(), but width and edge insets switch.
════════════════════════════════════════════ */
@media (max-width:760px){
  .gst-items-tbl .ma-combo-drop{
    min-width:0 !important;
    max-width:none !important;
    width:calc(100vw - 16px) !important;
    left:8px !important;
    right:8px !important;
    max-height:60vh;
  }
  .gst-items-tbl .ma-combo-drop .ma-combo-opt{padding:11px 13px}
  .gst-items-tbl .ma-combo-drop .ma-combo-opt-name{font-size:14px}
  .gst-items-tbl .ma-combo-drop .ma-combo-opt-sub{font-size:11.5px;white-space:normal;line-height:1.35}
}

/* Backdrop hint for the open dropdown on mobile (subtle, doesn't block) */
@media (max-width:760px){
  body.gst-drop-mobile-open::before{
    content:'';
    position:fixed;inset:0;
    background:rgba(0,0,0,.18);
    z-index:1099;
    pointer-events:none;
    backdrop-filter:blur(1px);
  }
}

/* ════════════════════════════════════════════
   SALE / PURCHASE OUTSTANDING (v3.9.14)
   Aging-breakdown stacked bar — visual representation of how much is
   owed in each aging bucket (0-30 / 31-60 / 61-90 / 90+ days).
════════════════════════════════════════════ */
.ma-aging-bar{display:flex;height:42px;width:100%;border-radius:9px;overflow:hidden;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bdr);transition:all .3s ease}
.ma-aging-seg{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-weight:600;font-size:11px;padding:4px 8px;min-width:0;text-align:center;transition:flex .3s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.ma-aging-seg .lbl{font-size:10px;opacity:.92;letter-spacing:.2px}
.ma-aging-seg .amt{font-size:12px;font-weight:800;margin-top:1px}
.ma-aging-seg[data-empty="1"]{flex:0 0 0;padding:0;opacity:0}
.ma-aging-seg.solo{flex:1 !important}
.ma-aging-bar.is-empty{align-items:center;justify-content:center;background:var(--surf2);color:var(--muted);font-size:12.5px;font-weight:600;border:1px dashed var(--bdr)}
.ma-aging-bar.is-empty::before{content:'✓ No outstanding amount in this period'}

/* Aging row inside the table — small inline tag */
.ma-aging-cell{font-weight:600;font-size:12.5px}
.ma-aging-cell.zero{color:var(--muted);font-weight:400}

/* Outstanding party-row click target hint */
.ma-out-row{cursor:pointer;transition:background .12s}
.ma-out-row:hover{background:var(--surf2)}
.ma-out-days-pill{display:inline-block;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700;letter-spacing:.2px}
.ma-out-days-pill.green{background:var(--brand-bg2);color:var(--brand-dd)}
.ma-out-days-pill.amber{background:var(--brand-bg);color:#92400e}
.ma-out-days-pill.orange{background:#ffedd5;color:#9a3412}
.ma-out-days-pill.red{background:#fee2e2;color:#991b1b}

/* Mobile responsive */
@media (max-width:760px){
  .ma-aging-bar{flex-wrap:wrap;height:auto}
  .ma-aging-seg{flex:1 1 50% !important;padding:8px;min-height:50px}
  #pg-sale-outstanding .ma-stats,
  #pg-purchase-outstanding .ma-stats,

  #pg-purchase-outstanding .ma-stats{grid-template-columns:1fr !important;gap:8px}
  #pg-sale-outstanding .ma-tbl thead,
  #pg-purchase-outstanding .ma-tbl thead,

  #pg-purchase-outstanding .ma-tbl thead{font-size:10.5px}
  #pg-sale-outstanding .ma-tbl tbody td,
  #pg-purchase-outstanding .ma-tbl tbody td,

  #pg-purchase-outstanding .ma-tbl tbody td{font-size:11.5px;padding:8px 6px}
}

/* ════════════════════════════════════════════
   GST INVOICE ROW POLISH (v3.9.15) — match GoGstBill video
   ──────────────────────────────────────────────
   - clean price field with dot indicator (no Unicode ⓘ glyph)
   - stock-hint sub-text below qty
   - green hover state for item dropdown
   - tight green + / red − action buttons at row end
   - batch-no inline row (shown when item is batch-tracked)
   - proper mobile card-row layout that keeps the price field
     readable instead of squashed into a tiny column
════════════════════════════════════════════ */

/* ─── Item-dropdown styling (rules win via specificity) ─── */
.gst-items-tbl .ma-combo-opt{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--bdr);transition:background .12s,color .12s}
.gst-items-tbl .ma-combo-opt:last-child{border-bottom:none}
.gst-items-tbl .ma-combo-opt-name{font-size:13.5px;font-weight:700;color:var(--brand);margin-bottom:2px;line-height:1.25}
.gst-items-tbl .ma-combo-opt-sub{font-size:11.5px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px;line-height:1.3}
/* Hover / keyboard-highlighted state — GREEN (matches GoGstBill video) */
.gst-items-tbl .ma-combo-opt:hover,
.gst-items-tbl .ma-combo-opt.hi{background:var(--brand);color:#fff}
.gst-items-tbl .ma-combo-opt:hover .ma-combo-opt-name,
.gst-items-tbl .ma-combo-opt.hi .ma-combo-opt-name{color:#fff}
.gst-items-tbl .ma-combo-opt:hover .ma-combo-opt-sub,
.gst-items-tbl .ma-combo-opt.hi .ma-combo-opt-sub{color:rgba(255,255,255,.92)}

/* ─── v3.9.137 — Price cell with proper info icon (matches reference image) ─── */
.gst-c-price{padding:0 !important}
.gst-c-price .gst-price-wrap{position:relative;display:flex;align-items:center;width:100%}
/* Dark filled circle info icon (matches image "ⓘ" bullet) */
.gst-c-price .gst-price-info{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#1f2937;flex-shrink:0;pointer-events:auto;cursor:help;z-index:2;
}
html[data-theme="dark"] .gst-c-price .gst-price-info{color:#e5e7eb}
.gst-c-price .gst-price-info svg{display:block}
/* Legacy dot fallback (kept so any stale row markup still looks sane) */
.gst-c-price .gst-price-dot{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#374151;flex-shrink:0;pointer-events:none;z-index:2
}
.gst-c-price .gst-price-wrap input{
  width:100%;
  padding:7px 8px 7px 28px !important;   /* left room for the info icon */
  border:none !important;background:transparent !important;
  font-size:13px;font-weight:500;text-align:right;color:var(--text);
  outline:none;font-family:inherit;
  min-width:0;
}
.gst-c-price .gst-price-wrap input::placeholder{color:var(--muted);font-weight:400}
.gst-c-price .gst-price-wrap input:focus{box-shadow:inset 0 0 0 1.5px var(--brand);border-radius:5px}

/* ─── Stock hint below qty (e.g. "7.00 PCS") ─── */
.gst-stock-hint{font-size:10.5px;color:var(--muted);text-align:center;margin-top:3px;font-weight:500;letter-spacing:.2px}
.gst-stock-hint.low{color:#dc2626;font-weight:600}

/* ─── UOM + IGST selects ─── */
.gst-uom-sel,.gst-igst-sel{padding:7px 8px !important;font-size:12px}
.gst-uom-sel option[value=""],.gst-igst-sel option[value=""]{color:var(--muted)}
/* v3.9.137 — IGST cell: dropdown on top, "0" amount muted below (matches image) */
.gst-c-igst{text-align:center;vertical-align:top}
.gst-c-igst .gst-igst-sel{margin-bottom:4px}
.gst-igst-amt{font-size:12px;color:var(--muted);margin-top:2px;font-weight:500;text-align:center}

/* v3.9.137 — Text alignment matching the reference image */
.gst-c-qty{text-align:center;vertical-align:top}
.gst-c-qty input{text-align:center}
.gst-c-disc{text-align:center;vertical-align:top}
.gst-c-disc input{text-align:center}
.gst-c-uom{vertical-align:top}
.gst-c-prod{vertical-align:top}

/* ─── v3.9.137 — Total cell (matches reference image) ─── */
.gst-c-total{text-align:right;vertical-align:top;padding-top:12px !important}
.gst-total-cell{font-weight:700;color:var(--text);font-size:13px}
/* When the row is untouched, the raw text "Total" is inside the span — render
   it as a muted placeholder (matches image row 2). calcTotals() will overwrite
   with the numeric string as soon as any input in the row changes. */
tr[id^="brow-"] .gst-c-total .gst-total-cell:not(:has(*)),
tr[id^="purow-"] .gst-c-total .gst-total-cell:not(:has(*)){color:var(--text)}
.gst-c-total .gst-total-cell.is-placeholder{color:var(--muted);font-weight:400}

/* ─── Batch No. inline sub-row inside Product cell ─── */
.gst-item-batch{margin-top:5px;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:5px;padding:4px 7px}
html[data-theme="dark"] .gst-item-batch{background:#0c2e44;border-color:#0e4f74}
.gst-item-batch input{width:100%;background:transparent;border:none;font-size:11.5px;color:var(--text);outline:none;font-family:inherit;font-weight:500}

/* ─── Action cell: tight green + and red − inline ─── */
.gst-c-act{text-align:center;vertical-align:middle;white-space:nowrap;padding:6px 4px !important}
.gst-c-act .gst-add-row-btn,
.gst-c-act .gst-del-row-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:none;
  font-size:18px;font-weight:700;line-height:1;padding:0;
  cursor:pointer;transition:transform .12s, box-shadow .12s;
  font-family:inherit;color:#fff;
}
.gst-c-act .gst-add-row-btn{background:var(--brand);box-shadow:0 1px 3px rgba(37,99,235,.35)}
.gst-c-act .gst-del-row-btn{background:#dc2626;margin-left:5px;box-shadow:0 1px 3px rgba(220,38,38,.30)}
.gst-c-act .gst-add-row-btn:hover{transform:scale(1.08);background:var(--brand)}
.gst-c-act .gst-del-row-btn:hover{transform:scale(1.08);background:#b91c1c}

/* Ensure row inputs are tight and tidy on desktop */
.gst-items-tbl tbody td input[type="text"],
.gst-items-tbl tbody td input[type="number"]{
  padding:7px 8px;font-size:13px;border:1px solid var(--bdr);border-radius:5px;
  background:var(--surf);color:var(--text);outline:none;font-family:inherit;
}
.gst-items-tbl tbody td input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}

/* Column widths tuned to match the video */
.gst-items-tbl{min-width:1100px}
.gst-items-tbl thead th.gst-c-sr-h{width:42px}
.gst-items-tbl thead th.gst-c-act-h{width:62px}

/* ════════════════════════════════════════════
   MOBILE (≤ 760px) — proper card-stack layout
   The previous mobile rules squeezed the price into a tiny column,
   making it unreadable. We now lay each row out as a 2-column grid
   (label · value) with the product cell spanning the full width.
════════════════════════════════════════════ */
@media (max-width:760px){
  .gst-items-tbl{min-width:0;width:100%}
  .gst-items-tbl thead{display:none}
  .gst-items-tbl tfoot{display:none}      /* footer totals are duplicated in the Amount Detail card */

  .gst-items-tbl tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 10px;
    padding:11px 11px 9px;
    margin:0 8px 10px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:9px;
    position:relative;
  }
  .gst-items-tbl tbody td{
    display:block;
    padding:0;
    border:none;
    font-size:12.5px;
  }
  .gst-items-tbl tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:9.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;
  }
  .gst-items-tbl tbody td[data-label=""]::before{content:none}

  /* SR pill (top-left) */
  .gst-c-sr{
    position:absolute;top:11px;left:11px;
    background:var(--surf2);
    color:var(--brand) !important;
    border-radius:50%;
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px !important;font-weight:700;
  }
  .gst-c-sr::before{content:none !important}

  /* Action buttons (top-right) */
  .gst-c-act{
    position:absolute;top:8px;right:8px;
    display:flex;flex-direction:row;gap:4px;
    padding:0 !important;
  }
  .gst-c-act .gst-add-row-btn,
  .gst-c-act .gst-del-row-btn{width:30px;height:30px;font-size:18px}

  /* Product cell — spans both columns and pushes content below SR/action row */
  .gst-c-prod{grid-column:1 / -1;margin-top:30px}
  .gst-c-prod input{font-size:13px;padding:9px 10px}

  /* All other cells fall into the 2-col grid naturally — HSN removed in Sale/Purchase */
  #pg-bill .gst-c-hsn,
  #pg-mc-invoice .gst-c-hsn,

  #pg-purchase .gst-c-hsn{display:none !important}
  .gst-c-qty,.gst-c-uom,.gst-c-price,.gst-c-disc,.gst-c-igst,.gst-c-total{display:block}
  .gst-c-qty input,.gst-c-uom select,
  .gst-c-disc input,.gst-c-igst select{padding:8px 9px;font-size:13px;width:100%}

  /* Price field — full-width row with the info icon inside */
  .gst-c-price{grid-column:1 / -1}
  .gst-c-price .gst-price-wrap{background:var(--surf);border:1px solid var(--bdr);border-radius:5px}
  .gst-c-price .gst-price-wrap input{padding:9px 10px 9px 28px !important;text-align:left;font-size:14px}
  .gst-c-price .gst-price-wrap input:focus{box-shadow:none;border:none}
  .gst-c-price .gst-price-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}

  /* IGST display tweak — keep amount inline with select */
  .gst-c-igst select{margin-bottom:3px}
  .gst-igst-amt{text-align:right;font-size:11px}

  /* Total cell — make the value prominent */
  .gst-c-total{grid-column:1 / -1;background:var(--brand-bg);border-radius:6px;padding:8px 10px !important;margin-top:2px}
  html[data-theme="dark"] .gst-c-total{background:#3f3a18}
  .gst-c-total::before{display:inline;float:left;margin:0;font-size:11px;color:var(--text);font-weight:600}
  .gst-c-total .gst-total-cell{float:right;font-size:14px;font-weight:800}

  /* Stock hint */
  .gst-stock-hint{text-align:left;font-size:11px}

  /* Add Line Item / +Add Additional Charge buttons row — wrap nicely */
  .gst-card .ma-btn.sm{font-size:11.5px;padding:7px 10px}
}

@media (max-width:480px){
  .gst-items-tbl tbody tr{grid-template-columns:1fr 1fr;gap:6px 8px;padding:10px 10px 8px}
  .gst-c-prod{margin-top:34px}
}

/* ════════════════════════════════════════════
   DASHBOARD OUTSTANDING TILES (v3.9.15)
   Two summary tiles directly below the 4-stat grid, showing the
   total Sale Outstanding (₹ customers owe) and Purchase Outstanding
   (₹ we owe suppliers). Click → drill into the full report.
════════════════════════════════════════════ */
.ma-dash-outstanding{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-bottom:20px;
}
.ma-out-tile{
  position:relative;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:var(--rl);
  padding:18px 20px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  overflow:hidden;
}
.ma-out-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ma-out-tile.sale{background:linear-gradient(135deg,#fef2f2 0%, var(--surf) 60%);border-color:#fecaca}
.ma-out-tile.sale:hover{border-color:#fca5a5}
.ma-out-tile.purchase{background:linear-gradient(135deg,#F5F3FF 0%, var(--surf) 60%);border-color:#DDD6FE}
.ma-out-tile.purchase:hover{border-color:#fcd34d}
html[data-theme="dark"] .ma-out-tile.sale{background:linear-gradient(135deg,#3a1f1f 0%, var(--surf) 60%);border-color:#6b2424}
html[data-theme="dark"] .ma-out-tile.purchase{background:linear-gradient(135deg,#3a2e10 0%, var(--surf) 60%);border-color:#6b4c0e}
.ma-out-tile.sale::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#dc2626}
.ma-out-tile.purchase::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#f59e0b}

.ma-out-tile-top{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.ma-out-tile-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-out-tile-meta{flex:1;min-width:0}
.ma-out-tile-lbl{font-weight:700;font-size:13px;color:var(--text);letter-spacing:.1px}
.ma-out-tile-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.ma-out-tile-arrow{color:var(--muted);opacity:.6;transition:transform .15s, opacity .15s}
.ma-out-tile:hover .ma-out-tile-arrow{opacity:1;transform:translateX(3px)}
.ma-out-tile-val{font-size:26px;font-weight:800;line-height:1.15;margin:6px 0 4px;letter-spacing:.2px}
.ma-out-tile-foot{font-size:11.5px;color:var(--muted);font-weight:500}

.ma-out-tile-aging{margin-top:11px;padding-top:10px;border-top:1px dashed var(--bdr)}
.ma-out-aging-mini{display:flex;gap:5px;flex-wrap:wrap}
.ma-out-aging-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:11px;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.2px;line-height:1.25}
.ma-out-aging-pill.empty{display:none}

.ma-out-tile.loading .ma-out-tile-val::after{
  content:'';display:inline-block;width:14px;height:14px;
  border:2px solid var(--bdr);border-top-color:var(--brand);
  border-radius:50%;animation:ma-spin .7s linear infinite;
  margin-left:8px;vertical-align:middle;
}
@keyframes ma-spin{to{transform:rotate(360deg)}}

@media (max-width:760px){
  .ma-dash-outstanding{grid-template-columns:1fr;gap:10px}
  .ma-out-tile{padding:15px 16px}
  .ma-out-tile-val{font-size:22px}
  .ma-out-aging-pill{font-size:9.5px;padding:2px 6px}
}

/* ════════════════════════════════════════════
   v3.9.16 — ITEM-ROW REDESIGN + CHIP INPUT + BATCH TABLE
   Matches the GoGstBill reference video and screenshots:
   - PRODUCT cell narrower so HSN/SAC, QTY, UOM columns get room
   - Serial No sub-row inside Product cell (shown for serial-tracked items)
   - Mobile layout properly wraps the entire Product Items card
   - Serial chip input (green pills with × to remove)
   - Batch entry table with per-batch pricing
═══════════════════════════════════════════════ */

/* ─── v3.9.137 — Item-row column widths tuned to match the reference image ───
     Columns: SR | Product / Other Charges | Qty. / Stock | UOM | Price (Rs) | Discount | IGST | Total | Action
     The HSN column has been removed (its input lives hidden inside the product cell now). */
.gst-items-tbl{min-width:960px;table-layout:fixed}
.gst-items-tbl thead th{padding:11px 8px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left}
.gst-items-tbl tbody td{padding:9px 8px;vertical-align:top}
.gst-items-tbl col.col-sr,
.gst-items-tbl thead th.gst-c-sr-h{width:46px;text-align:center}
.gst-items-tbl thead th.gst-c-prod-h{width:auto;min-width:180px}    /* v3.9.140 — narrowed so other columns get proper room */
.gst-items-tbl thead th.gst-c-qty-h{width:110px}
.gst-items-tbl thead th.gst-c-uom-h{width:110px}
.gst-items-tbl thead th.gst-c-price-h{width:130px}
.gst-items-tbl thead th.gst-c-disc-h{width:100px}
.gst-items-tbl thead th.gst-c-igst-h{width:110px}
.gst-items-tbl thead th.gst-c-total-h{width:110px}
.gst-items-tbl thead th.gst-c-act-h{width:70px}

/* Product cell input — expanded now that HSN is gone */
.gst-c-prod{max-width:none}
.gst-c-prod .ma-combo-input-row input{font-size:13px;padding:8px 26px 8px 10px}
.gst-c-prod .ma-combo-input-row input::placeholder{color:#94a3b8;text-transform:none}

/* ─── Serial No / Batch No / Item Note sub-rows ─── */
.gst-item-serial,.gst-item-batch{margin-top:5px;border-radius:5px;padding:0}
.gst-item-serial{background:transparent;border:none}
.gst-item-serial input,.gst-item-batch input{
  width:100%;
  padding:7px 9px;
  font-size:12px;
  font-family:inherit;
  color:var(--text);
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:5px;
  outline:none;
}
.gst-item-serial input{border-color:#BAE6FD;background:#f0fdf4}
.gst-item-serial input::placeholder{color:#64748B}
.gst-item-batch input{border-color:#7dd3fc;background:#e0f2fe}
.gst-item-batch input::placeholder{color:#0369a1}
html[data-theme="dark"] .gst-item-serial input{background:#0d2418;border-color:#225c3a;color:#fff}
html[data-theme="dark"] .gst-item-batch input{background:#0c2e44;border-color:#0e4f74;color:#fff}
.gst-item-serial input:focus,.gst-item-batch input:focus{box-shadow:0 0 0 2px rgba(37,99,235,.15)}

/* ─── Chip-input (serial numbers in product modal) ─── */
.ma-chip-input{
  display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;
  min-height:42px;
  padding:7px 9px;
  border:1px solid var(--bdr);
  border-radius:7px;
  background:var(--surf);
  cursor:text;
  transition:border-color .15s;
}
.ma-chip-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}
.ma-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--brand);
  color:#fff;
  font-size:12px;font-weight:600;
  padding:4px 8px;
  border-radius:5px;
  line-height:1.25;
  letter-spacing:.2px;
}
.ma-chip-x{
  background:none;border:none;color:#fff;
  cursor:pointer;font-size:14px;font-weight:700;
  padding:0 0 0 4px;line-height:1;
  opacity:.85;
}
.ma-chip-x:hover{opacity:1}
.ma-chip-input input{
  flex:1;min-width:120px;
  border:none;background:transparent;outline:none;
  padding:4px 2px;font-size:13px;color:var(--text);
  font-family:inherit;
}

/* ─── Batch entries table (product modal) ─── */
.ma-batch-tbl-wrap{
  overflow-x:auto;
  border:1px solid var(--bdr);
  border-radius:7px;
  background:var(--surf);
}
.ma-batch-tbl{width:100%;min-width:720px;border-collapse:collapse;font-size:12px}
.ma-batch-tbl thead{background:var(--surf2)}
.ma-batch-tbl th{
  padding:9px 8px;
  text-align:left;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.3px;
  border-bottom:1px solid var(--bdr);
  text-transform:uppercase;
}
.ma-batch-tbl td{
  padding:6px 7px;
  border-bottom:1px solid var(--bdr);
}
.ma-batch-tbl tbody tr:last-child td{border-bottom:none}
.ma-batch-tbl input[type="text"],.ma-batch-tbl input[type="number"]{
  width:100%;
  padding:6px 7px;
  font-size:12px;
  border:1px solid var(--bdr);
  border-radius:4px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
}
.ma-batch-tbl input:focus{border-color:var(--brand);box-shadow:0 0 0 1.5px rgba(37,99,235,.12)}
.ma-batch-del{
  background:#fee2e2;color:#dc2626;border:none;
  width:24px;height:24px;border-radius:50%;
  font-size:14px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.ma-batch-del:hover{background:#fecaca}

/* ─── Payment Received: hint for extra amount (Return / Advance) ─── */
.gst-pmt-extra-hint{
  margin:4px 0 8px;
  padding:7px 12px;
  background:var(--brand-bg2);
  border-radius:6px;
  color:var(--brand-dd);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}
.gst-pmt-extra-hint b{font-weight:700}
html[data-theme="dark"] .gst-pmt-extra-hint{background:var(--brand-dd);color:#7DD3FC}

/* ════════════════════════════════════════════
   v3.9.19 — Bill items mobile redesign
   Earlier mobile rules used absolute-positioned SR/action buttons that
   could overlap the product input and cut it off. We now use a clean
   named-grid: top row has SR pill, product input, and action stack
   side-by-side. Every input has box-sizing:border-box so percentages
   never cause horizontal overflow. The wrapper around the table also
   stops enforcing horizontal scroll once each row is a card.
═══════════════════════════════════════════════ */
@media (max-width:760px){
  /* Make the create-invoice page edges flush to the screen */
  #pg-bill,#pg-purchase{padding:0;overflow-x:hidden}
  #pg-bill .gst-card,#pg-purchase .gst-card,
  #pg-mc-invoice .gst-card,#pg-purchase .gst-card{

    margin-left:8px;margin-right:8px;
    padding:12px 10px;
    border-radius:9px;
    overflow:visible;
  }
  /* Items table — full width, card per row */
  #pg-bill .gst-card .gst-items-tbl,
  #pg-mc-invoice .gst-card .gst-items-tbl,

  #pg-purchase .gst-card .gst-items-tbl{
    min-width:0;width:100%;table-layout:auto;
  }
  /* The inline wrapper around the table shouldn't enforce horizontal scroll
     once each row is a card (that was triggering the right-edge clipping) */
  #pg-bill .gst-card > div[style*="overflow-x:auto"],
  #pg-mc-invoice .gst-card > div[style*="overflow-x:auto"],

  #pg-purchase .gst-card > div[style*="overflow-x:auto"]{
    overflow-x:visible !important;
  }
  /* Universal box-sizing inside bill rows so percentage widths never overflow */
  .gst-items-tbl input,.gst-items-tbl select,.gst-items-tbl textarea{box-sizing:border-box}

  /* Page-header & subnav stay readable */
  .ma-pg-hdr{padding:0 8px}

  /* Card-grid row layout — named grid, no absolute positioning (v3.9.137: scoped
     to Sale/Purchase pages so it doesn't disturb the Machinery Invoice grid). */
  #pg-bill .gst-items-tbl tbody tr,
  #pg-mc-invoice .gst-items-tbl tbody tr,

  #pg-purchase .gst-items-tbl tbody tr,

  #pg-create-jobwork .gst-items-tbl tbody tr,
  #pg-create-delivery-challan .gst-items-tbl tbody tr,
  #pg-create-packing-list .gst-items-tbl tbody tr,


  #pg-create-proforma .gst-items-tbl tbody tr{

    display:grid;
    grid-template-columns:34px 1fr 76px;
    grid-template-areas:
      "sr   prod  act"
      "qty  uom   price"
      "disc igst  total";
    gap:8px 8px;
    padding:10px 11px 11px;
    margin:0 0 10px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:9px;
    align-items:start;
    width:100%;
    box-sizing:border-box;
  }
  .gst-items-tbl tbody td{display:block;padding:0;border:none;font-size:12.5px;min-width:0}
  .gst-items-tbl tbody td::before{
    content:attr(data-label);display:block;
    font-size:9.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;
  }
  .gst-items-tbl tbody td[data-label=""]::before{content:none}

  /* SR — circular badge on the left of the top row */
  .gst-c-sr{
    grid-area:sr;align-self:center;
    background:var(--surf2);color:var(--brand) !important;
    border-radius:50%;
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px !important;font-weight:700;margin:0;padding:0 !important;
  }
  .gst-c-sr::before{content:none !important}

  /* Product cell — fills the middle column of the top row */
  .gst-c-prod{grid-area:prod;max-width:none;min-width:0}
  .gst-c-prod::before{content:none}
  .gst-c-prod .ma-combo-wrap{width:100%;min-width:0}
  .gst-c-prod .ma-combo-input-row{width:100%}
  .gst-c-prod .ma-combo-input-row input{
    width:100%;min-width:0;font-size:13.5px;padding:10px 32px 10px 10px;
    box-sizing:border-box;
  }
  .gst-c-prod .ma-combo-arrow{font-size:14px}

  /* Action buttons — fixed-width stack on the right of the top row */
  .gst-c-act{
    grid-area:act;
    display:flex;flex-direction:row;gap:4px;
    justify-content:flex-end;align-items:center;
    padding:0;align-self:center;
  }
  .gst-c-act::before{content:none}
  .gst-c-act .gst-add-row-btn,
  .gst-c-act .gst-del-row-btn{width:32px;height:32px;font-size:18px}

  /* HSN spans full width on its own row */
  .gst-c-hsn{grid-area:hsn;max-width:none}
  .gst-c-hsn input{width:100%;padding:9px 10px;font-size:13px;box-sizing:border-box}

  /* Qty / UOM / Price row */
  .gst-c-qty{grid-area:qty;max-width:none}
  .gst-c-uom{grid-area:uom;max-width:none}
  .gst-c-price{grid-area:price;max-width:none;padding:0 !important;min-width:0}
  .gst-c-qty input,.gst-c-uom select{
    width:100%;padding:9px 10px;font-size:13px;box-sizing:border-box;
  }
  .gst-c-price::before{content:attr(data-label);display:block;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
  .gst-c-price .gst-price-wrap{background:var(--surf);border:1px solid var(--bdr);border-radius:5px;display:flex;align-items:center;overflow:hidden}
  .gst-c-price .gst-price-wrap input{padding:9px 10px 9px 22px !important;text-align:left;font-size:13px;width:100%;box-sizing:border-box;border:none;background:transparent}
  .gst-c-price .gst-price-wrap input:focus{box-shadow:none;outline:none}
  .gst-c-price .gst-price-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}

  /* Discount / IGST / Total row */
  .gst-c-disc{grid-area:disc;max-width:none;min-width:0}
  .gst-c-igst{grid-area:igst;max-width:none;min-width:0}
  .gst-c-total{grid-area:total;max-width:none;min-width:0;background:var(--brand-bg);border-radius:6px;padding:6px 8px !important;align-self:end;text-align:right}
  html[data-theme="dark"] .gst-c-total{background:#3f3a18}
  .gst-c-disc input{width:100%;padding:9px 10px;font-size:13px;box-sizing:border-box}
  .gst-c-igst select{width:100%;padding:9px 10px;font-size:13px;box-sizing:border-box;margin-bottom:2px}
  .gst-igst-amt{text-align:right;font-size:11px}
  .gst-c-total::before{display:block;font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;text-align:right}
  .gst-c-total .gst-total-cell{font-size:14px;font-weight:800;display:block;text-align:right;float:none}

  /* Stock hint left-aligned */
  .gst-stock-hint{text-align:left;font-size:11px}

  /* Serial + Batch sub-rows tighter on phones */
  .gst-item-serial,.gst-item-batch{margin-top:6px}
  .gst-item-serial input,.gst-item-batch input{font-size:12.5px;padding:8px 10px;width:100%;box-sizing:border-box}

  /* Item note tighter */
  .gst-item-note{margin-top:6px}
  .gst-item-note textarea{width:100%;box-sizing:border-box}
  .gst-row-note-link{font-size:11px;margin-top:4px}

  /* Product-modal batch table needs horizontal scroll on phones */
  .ma-batch-tbl-wrap{max-width:100%;overflow-x:auto}
  .ma-batch-tbl{min-width:680px}

  /* Chip input — smaller chips on phones */
  .ma-chip{font-size:11.5px;padding:3px 7px}

  /* Payment Type buttons — wrap on tiny screens */
  .gst-pmt-btns{flex-wrap:wrap;gap:6px}
  .gst-pmt-btn{flex:1 1 calc(50% - 3px);min-width:0;font-size:12px;padding:9px 6px}
}

@media (max-width:420px){
  .gst-items-tbl tbody tr{
    grid-template-columns:30px 1fr 72px;
    gap:7px 7px;
    padding:9px 8px 10px;
  }
  .gst-c-act .gst-add-row-btn,
  .gst-c-act .gst-del-row-btn{width:30px;height:30px;font-size:17px}
  .gst-c-sr{width:26px;height:26px;font-size:12px !important}
  /* On very narrow phones, keep Disc / IGST / Total still readable by
     letting the labels stay above each input rather than crammed inline */
  .gst-c-disc input,.gst-c-igst select{padding:8px 9px;font-size:12.5px}
}

/* ════════════════════════════════════════════
   v3.9.20 — Serial No DROPDOWN styling
   The Serial No sub-row in the invoice item picker is now a <select>
   (populated from the catalog item's stored serial numbers).
═══════════════════════════════════════════════ */
.gst-serial-sel{
  width:100%;
  padding:7px 28px 7px 10px;
  font-size:12.5px;
  font-family:inherit;
  font-weight:500;
  color:var(--text);
  background:#f0fdf4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23065f46' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
  border:1px solid #BAE6FD;
  border-radius:5px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}
.gst-serial-sel:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.gst-serial-sel option{background:var(--surf);color:var(--text);padding:6px}
.gst-serial-sel option:disabled{color:var(--muted);font-style:italic}
html[data-theme="dark"] .gst-serial-sel{background-color:#0d2418;border-color:#225c3a;color:#fff}

/* Sale-mode: dropdown only.  Purchase-mode: dropdown + free-text "new serial" input. */
.gst-item-serial input[type="text"]{
  width:100%;
  padding:8px 10px;
  font-size:12.5px;
  font-family:inherit;
  color:var(--text);
  background:var(--surf);
  border:1px dashed #BAE6FD;
  border-radius:5px;
  outline:none;
  margin-top:5px;
}
.gst-item-serial input[type="text"]::placeholder{color:#64748B;font-style:italic}
.gst-item-serial input[type="text"]:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10);border-style:solid}
html[data-theme="dark"] .gst-item-serial input[type="text"]{background:#0d2418;border-color:#225c3a;color:#fff}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.20 — CANONICAL MOBILE ITEM-CARD DESIGN  (overrides ALL earlier rules)
   ────────────────────────────────────────────────────────────────────────────
   Matches the user's "sale_invoice.png" reference exactly:
   - SR pill top-left, no separate action-buttons row at top
   - Product Name input on the same row as SR (small pill + wide input)
   - Product Note as its own full-width row underneath
   - HSN/SAC | Qty   — 2 equal columns
   - UOM     | Price — 2 equal columns (price has dot indicator)
   - Disc.   | IGST  — 2 equal columns (IGST shows label + computed value)
   - Total full-width
   - Green `+` and red `−` action buttons at BOTTOM-right
   - Placeholders inside inputs serve as the visual labels (no ::before text)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── outer table (v3.9.137: scoped so MC-invoice table keeps its own layout) ── */
  #pg-bill .gst-items-tbl,
  #pg-mc-invoice .gst-items-tbl,

  #pg-purchase .gst-items-tbl,

  #pg-create-jobwork .gst-items-tbl, #pg-create-proforma .gst-items-tbl, #pg-create-delivery-challan .gst-items-tbl, #pg-create-proforma .gst-items-tbl, #pg-create-jobwork .gst-items-tbl, #pg-create-proforma .gst-items-tbl, #pg-create-packing-list .gst-items-tbl, #pg-create-proforma .gst-items-tbl{min-width:0 !important;width:100% !important;table-layout:auto !important}
  #pg-bill .gst-items-tbl thead,
  #pg-mc-invoice .gst-items-tbl thead,

  #pg-purchase .gst-items-tbl thead,
  #pg-bill .gst-items-tbl tfoot,
  #pg-mc-invoice .gst-items-tbl tfoot,

  #pg-purchase .gst-items-tbl tfoot,

  #pg-create-jobwork .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-delivery-challan .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-jobwork .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-packing-list .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot{display:none !important}   /* totals shown in Amount Detail card */

  /* ── each row = a card ── */
  #pg-bill .gst-items-tbl tbody tr,
  #pg-mc-invoice .gst-items-tbl tbody tr,

  #pg-purchase .gst-items-tbl tbody tr,

  #pg-create-jobwork .gst-items-tbl tbody tr,
  #pg-create-delivery-challan .gst-items-tbl tbody tr,
  #pg-create-packing-list .gst-items-tbl tbody tr,


  #pg-create-proforma .gst-items-tbl tbody tr{

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "prod prod"
      "qty  uom"
      "price price"
      "disc igst"
      "total total"
      "act  act" !important;
    gap:11px 10px !important;
    background:var(--surf) !important;
    border:1px solid var(--bdr) !important;
    border-radius:10px !important;
    padding:14px 14px 12px !important;
    margin:0 10px 12px !important;
    position:relative !important;
  }

  /* ── every cell: no ::before label (placeholder IS the label) ── */
  .gst-items-tbl tbody td{
    display:block !important;
    padding:0 !important;
    border:none !important;
    font-size:13px !important;
    min-width:0 !important;
  }
  .gst-items-tbl tbody td::before{content:none !important}

  /* ── SR pill: top-left of card ── */
  .gst-items-tbl .gst-c-sr{
    position:absolute !important;
    top:13px !important; left:13px !important;
    width:28px !important; height:28px !important;
    padding:0 !important; margin:0 !important;
    background:var(--surf2) !important;
    color:var(--brand) !important;
    border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:13px !important; font-weight:700 !important;
    grid-area:unset !important;
  }
  .gst-items-tbl .gst-c-sr::before{content:none !important}

  /* ── Product cell: full-width, left-padded to clear the SR pill ── */
  .gst-items-tbl .gst-c-prod{
    grid-area:prod !important;
    padding:0 0 0 42px !important;
    margin:0 !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .gst-items-tbl .gst-c-prod .ma-combo-input-row input{
    width:100% !important;
    padding:11px 28px 11px 12px !important;
    font-size:13.5px !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    box-sizing:border-box !important;
  }
  .gst-items-tbl .gst-c-prod .ma-combo-input-row input::placeholder{color:var(--muted);opacity:.9}
  .gst-items-tbl .gst-c-prod .ma-combo-input-row input:focus{
    border-color:var(--brand) !important;
    box-shadow:0 0 0 2px rgba(37,99,235,.10) !important;
  }
  .gst-items-tbl .gst-c-prod .ma-combo-arrow{
    right:10px !important; font-size:13px !important; top:50% !important; transform:translateY(-50%) !important;
  }

  /* Product Note / Serial / Batch sub-rows below the Product Name */
  .gst-items-tbl .gst-c-prod .gst-item-note,
  .gst-items-tbl .gst-c-prod .gst-item-serial,
  .gst-items-tbl .gst-c-prod .gst-item-batch{margin-top:7px !important}
  .gst-items-tbl .gst-c-prod .gst-item-note textarea{
    width:100% !important;
    min-height:64px !important;
    padding:11px 12px !important;
    font-size:13px !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    resize:vertical !important;
    box-sizing:border-box !important;
    font-family:inherit !important;
  }
  .gst-items-tbl .gst-c-prod .gst-row-note-link{font-size:11.5px !important;display:inline-block !important;margin-top:5px !important}

  /* ── HSN / Qty / UOM / Disc / IGST cells ── */
  .gst-items-tbl .gst-c-hsn   {grid-area:hsn  !important}
  .gst-items-tbl .gst-c-qty   {grid-area:qty  !important}
  .gst-items-tbl .gst-c-uom   {grid-area:uom  !important}
  .gst-items-tbl .gst-c-price {grid-area:price !important; padding:0 !important}
  .gst-items-tbl .gst-c-disc  {grid-area:disc !important}
  .gst-items-tbl .gst-c-igst  {grid-area:igst !important}
  .gst-items-tbl .gst-c-total {grid-area:total !important}

  /* Generic input / select styling for these cells */
  .gst-items-tbl tbody tr .gst-c-hsn   input,
  .gst-items-tbl tbody tr .gst-c-qty   input,
  .gst-items-tbl tbody tr .gst-c-uom   select,
  .gst-items-tbl tbody tr .gst-c-disc  input,
  .gst-items-tbl tbody tr .gst-c-igst  select{
    width:100% !important;
    padding:11px 10px !important;
    font-size:13px !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    color:var(--text) !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
  .gst-items-tbl tbody tr .gst-c-uom select{
    appearance:none !important; -webkit-appearance:none !important;
    background:var(--surf) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center !important;
    padding-right:26px !important;
  }
  /* Stock hint under Qty */
  .gst-items-tbl .gst-c-qty .gst-stock-hint{
    text-align:left !important; font-size:11px !important; margin-top:4px !important;
  }

  /* ── Price cell with dot indicator ── */
  .gst-items-tbl .gst-c-price .gst-price-wrap{
    width:100% !important; position:relative !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    display:flex !important; align-items:center !important;
  }
  .gst-items-tbl .gst-c-price .gst-price-wrap input{
    width:100% !important;
    padding:11px 10px 11px 24px !important;
    font-size:13px !important;
    border:none !important; background:transparent !important;
    outline:none !important;
    text-align:left !important;
    font-family:inherit !important;
    color:var(--text) !important;
    box-sizing:border-box !important;
  }
  .gst-items-tbl .gst-c-price .gst-price-wrap input:focus{box-shadow:none !important}
  .gst-items-tbl .gst-c-price .gst-price-wrap:focus-within{
    border-color:var(--brand) !important;
    box-shadow:0 0 0 2px rgba(37,99,235,.10) !important;
  }
  .gst-items-tbl .gst-c-price .gst-price-dot{
    position:absolute !important; left:9px !important; top:50% !important; transform:translateY(-50%) !important;
    width:6px !important; height:6px !important; border-radius:50% !important;
    background:#374151 !important; flex-shrink:0 !important; pointer-events:none !important;
  }

  /* ── IGST: select + computed amount inline below ── */
  .gst-items-tbl .gst-c-igst{position:relative !important}
  .gst-items-tbl .gst-c-igst select{
    appearance:none !important; -webkit-appearance:none !important;
    background:var(--surf) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center !important;
    padding-right:26px !important;
  }
  .gst-items-tbl .gst-c-igst .gst-igst-amt{
    text-align:center !important; font-size:12px !important; color:var(--muted) !important;
    margin-top:4px !important; font-weight:600 !important;
  }

  /* ── Total cell: full-width yellow-highlight box ── */
  .gst-items-tbl .gst-c-total{
    background:var(--brand-bg) !important;
    border-radius:6px !important;
    padding:11px 14px !important;
    margin-top:2px !important;
    text-align:right !important;
    font-weight:700 !important;
  }
  html[data-theme="dark"] .gst-items-tbl .gst-c-total{background:#3f3a18 !important}
  .gst-items-tbl .gst-c-total .gst-total-cell{
    font-size:15px !important; font-weight:800 !important; color:var(--text) !important;
  }
  /* Show "TOTAL" hint inline-left if value not yet entered */
  .gst-items-tbl .gst-c-total::before{
    content:'TOTAL' !important; display:inline !important;
    float:left !important; margin:0 !important; padding:0 !important;
    font-size:10.5px !important; color:var(--muted) !important;
    font-weight:700 !important; letter-spacing:.5px !important;
    text-transform:uppercase !important;
  }
  .gst-items-tbl .gst-c-total::after{content:'' !important; display:block !important; clear:both !important}

  /* ── Action buttons: BOTTOM-RIGHT of card, green + then red − ── */
  .gst-items-tbl .gst-c-act{
    grid-area:act !important;
    position:static !important;             /* override earlier absolute rules */
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:7px !important;
    padding:0 !important;
    margin-top:3px !important;
    top:auto !important; right:auto !important;
  }
  .gst-items-tbl .gst-c-act::before{content:none !important}
  .gst-items-tbl .gst-c-act .gst-add-row-btn,
  .gst-items-tbl .gst-c-act .gst-del-row-btn{
    width:34px !important; height:34px !important;
    font-size:20px !important; line-height:1 !important;
    flex-shrink:0 !important;
    border-radius:50% !important;
  }

  /* Serial No dropdown styling stays the same on mobile (already responsive) */
  .gst-items-tbl .gst-item-serial select,
  .gst-items-tbl .gst-item-serial input,
  .gst-items-tbl .gst-item-batch input{
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* ── Outer card paddings tighter ── */
  #pg-bill .gst-card,
  #pg-mc-invoice .gst-card,

  #pg-purchase .gst-card{margin-left:8px !important; margin-right:8px !important}
}

/* Very small phones: keep things readable */
@media (max-width:380px){
  .gst-items-tbl tbody tr{padding:12px 11px 10px !important; margin:0 8px 10px !important}
  .gst-items-tbl .gst-c-act .gst-add-row-btn,
  .gst-items-tbl .gst-c-act .gst-del-row-btn{width:32px !important; height:32px !important}
}

/* ── v3.9.141 — Item Note always visible on mobile too (matches reference image).
   The "+ Add Note" link is not used; hidden globally by the rule above. ── */
@media (max-width:760px){
  .gst-items-tbl .gst-c-prod .gst-item-note{display:block !important}
  .gst-items-tbl .gst-c-prod .gst-row-note-link{display:none !important}
}

/* ════════════════════════════════════════════════════════════
   v3.9.21 — Sale / Purchase Invoice list redesign
   Header bar with Unsaved / Summary / Search / + Add New pills,
   table with payment-type pill, view/print + edit + ▾ actions.
   ──────────────────────────────────────────────────────────── */
.ma-list-hdr{display:flex;align-items:center;justify-content:space-between;background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--shadow);flex-wrap:wrap;gap:10px}
.ma-list-title{font-size:15px;font-weight:600;color:var(--text)}
.ma-list-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ma-list-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--surf);border:1px solid var(--bdr);border-radius:7px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;transition:background .12s,border-color .12s;font-family:inherit}
.ma-list-pill:hover{background:var(--surf2);border-color:#cbd5e1}
.ma-list-pill svg{color:var(--muted)}
.ma-list-add{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;background:var(--brand);border:none;border-radius:7px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s;font-family:inherit}
.ma-list-add:hover{background:var(--brand-dark, var(--brand))}

/* List table */
.ma-list-card{padding:0;border-radius:10px;overflow:visible}
.ma-list-tbl{margin:0}
.ma-list-tbl thead th{background:var(--surf);color:var(--text);font-weight:500;font-size:13px;padding:14px 14px;border-bottom:1px solid var(--bdr);text-transform:none;letter-spacing:normal}
.ma-list-tbl thead th.c{text-align:center}
.ma-list-tbl thead th.r{text-align:right}
.ma-list-tbl tbody td{padding:18px 14px;font-size:13.5px;vertical-align:middle;border-bottom:1px solid var(--bdr)}
.ma-list-tbl tbody td.c{text-align:center}
.ma-list-tbl tbody td.r{text-align:right}
.ma-list-tbl tbody tr:hover{background:#f8fafc}
.ma-list-tbl tbody tr:last-child td{border-bottom:none}
.ma-cb-col{width:42px;text-align:center}
.ma-act-col{width:160px;text-align:right;position:relative}
.ma-list-invno{font-weight:500;color:var(--text)}
.ma-list-sortable{cursor:pointer;user-select:none}
.ma-list-sortable .ma-sort-caret{font-size:10px;color:var(--muted);margin-left:3px}
.ma-list-sortable:hover{color:var(--brand)}
.ma-col-pick{background:transparent;border:none;cursor:pointer;color:var(--muted);padding:4px;margin-left:6px;vertical-align:middle;border-radius:4px;display:inline-flex;align-items:center}
.ma-col-pick:hover{background:var(--surf2);color:var(--text)}

/* Payment type pill */
.ma-pay-wrap{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.ma-pay-pill{display:inline-block;padding:5px 14px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.ma-pay-pill.cash{background:var(--brand-bg2);color:var(--brand-dd)}
.ma-pay-pill.credit{background:#fee2e2;color:#b91c1c}
.ma-pay-pill.cancelled{background:#f1f5f9;color:#64748b;text-decoration:line-through}
.ma-pay-bell{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--brand-bg2);color:var(--brand-d);border:none;border-radius:5px;cursor:pointer;padding:0;transition:background .12s}
.ma-pay-bell:hover{background:#bfdbfe}

/* v3.9.462 — Redesigned reminder bell for pending / partial rows.
   Amber tint at rest = subtle "attention" cue that pairs well with
   the yellow-orange badges on those rows without shouting. On hover:
   the amber fill deepens, the icon lifts + scales a touch, and a soft
   ring pulse fires once so the interaction feels alive. */
.ma-pay-bell-v2{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;height:30px;
  background:#FEF3C7;                    /* amber-100 */
  color:#B45309;                         /* amber-700 */
  border:1px solid #FDE68A;              /* amber-200 */
  border-radius:8px;
  cursor:pointer;
  padding:0;
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             transform .18s ease, box-shadow .18s ease;
  overflow:visible;
}
.ma-pay-bell-v2 svg{
  transition:transform .22s cubic-bezier(.36,1.4,.5,1);
  transform-origin:50% 20%;
}
.ma-pay-bell-v2:hover{
  background:#F59E0B;                    /* amber-500 */
  color:#fff;
  border-color:#D97706;                  /* amber-600 */
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(245,158,11,.28);
}
.ma-pay-bell-v2:hover svg{
  /* Little "ring" wobble on the bell icon */
  animation:mapbShake .55s ease-in-out;
}
.ma-pay-bell-v2:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(245,158,11,.22);
}
.ma-pay-bell-v2:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(245,158,11,.35);
}
/* Soft one-shot pulse ring on hover — reinforces the CTA without
   spinning continuously (which would be annoying on a busy list). */
.ma-pay-bell-pulse{
  position:absolute;inset:0;
  border-radius:8px;
  pointer-events:none;
  opacity:0;
}
.ma-pay-bell-v2:hover .ma-pay-bell-pulse{
  animation:mapbPulse .7s ease-out;
}
@keyframes mapbShake{
  0%   { transform:rotate(0deg); }
  20%  { transform:rotate(-12deg); }
  40%  { transform:rotate(10deg); }
  60%  { transform:rotate(-6deg); }
  80%  { transform:rotate(4deg); }
  100% { transform:rotate(0deg); }
}
@keyframes mapbPulse{
  0%   { opacity:.55; box-shadow:0 0 0 0 rgba(245,158,11,.55); }
  100% { opacity:0;   box-shadow:0 0 0 10px rgba(245,158,11,0); }
}

/* Dark mode variant */
html[data-theme="dark"] .ma-pay-bell-v2{
  background:#3f2f10;
  color:#FCD34D;
  border-color:#4d3b18;
}
html[data-theme="dark"] .ma-pay-bell-v2:hover{
  background:#D97706;
  color:#fff;
  border-color:#B45309;
  box-shadow:0 4px 12px rgba(217,119,6,.35);
}

/* Clickable payment-type pill — opens the "Add Payment Receipt" sidebar
   so the user can change the payment type for a Sale Invoice. */
.ma-pay-pill.clickable{cursor:pointer;transition:filter .12s,transform .1s,box-shadow .12s;user-select:none}
.ma-pay-pill.clickable:hover{filter:brightness(.94);box-shadow:0 1px 4px rgba(0,0,0,.10)}
.ma-pay-pill.clickable:active{transform:translateY(1px)}
.ma-pay-pill.clickable:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ════════════════════════════════════════════════════════════════════════
   "Add Payment Receipt" sidebar (opened from the Sale Invoice list pill).
   Reuses the .ec-side / .ec-scrim / .ip-side-body / .ip-fg framework so
   spacing, typography, and inputs match the rest of the app; only the
   wrapper (#ipt-sidebar-wrap) is scoped separately so its open/close
   animation is independent of the other side sheets.
════════════════════════════════════════════════════════════════════════ */
#ipt-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#ipt-sidebar-wrap.open{pointer-events:auto}
#ipt-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ipt-sidebar-wrap.open .ec-scrim{opacity:1}
#ipt-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
  font-family:inherit;
}
#ipt-sidebar-wrap.open .ec-side{transform:translateX(0)}

/* Remaining Amount is shown as plain text (matches the reference mockup:
   no input box, just the number aligned with the other field controls). */
#ipt-sidebar-wrap .ipt-plain{
  min-height:38px;
  padding:9px 2px;
  font-size:14px;
  color:var(--text);
  font-weight:500;
  display:flex; align-items:center;
}

/* ════════════════════════════════════════════════════════════════════════
   "Send Payment Reminder" sidebar (opened from the bell button next to
   the Payment-Type pill). Three tabs — Email / WhatsApp / SMS.
   Reuses the .ec-side / .ec-scrim shell for slide-in animation.
════════════════════════════════════════════════════════════════════════ */
#pr-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#pr-sidebar-wrap.open{pointer-events:auto}
#pr-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#pr-sidebar-wrap.open .ec-scrim{opacity:1}
#pr-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(760px, 96vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
  font-family:inherit;
}
#pr-sidebar-wrap.open .ec-side{transform:translateX(0)}

/* Tab bar under the header */
.pr-tabs{
  display:flex; align-items:center;
  gap:6px;
  padding:8px 20px 0;
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  flex-shrink:0;
}
.pr-tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  border:none; background:transparent;
  font:inherit; font-size:13px; font-weight:500;
  color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s, border-color .12s;
}
.pr-tab:hover{color:var(--text)}
.pr-tab.on{
  color:#10b981;
  border-bottom-color:#10b981;
}
.pr-tab svg{opacity:.9}
.pr-tab .pr-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:#f59e0b; color:#fff;
  font-size:9px; font-weight:700;
  margin-left:2px; cursor:help;
}

/* Panel body */
.pr-body{padding:22px 22px 14px}
.pr-panel{display:block}

/* Field row (label + control) */
.pr-fg{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.pr-fg.pr-fg-top{align-items:start}
.pr-fg > label{
  font-size:13px; color:var(--text); font-weight:500;
}
.pr-fg > label .req{color:#dc2626; margin-left:1px}
.pr-fg > input[type="text"],
.pr-fg > input[type="tel"],
.pr-fg > input[type="email"],
.pr-fg > textarea,
.pr-fg > select{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.pr-fg > input:focus,
.pr-fg > select:focus,
.pr-fg > textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.pr-fg > textarea{resize:vertical; min-height:70px; font-family:inherit; line-height:1.55}

/* Column wrap so the "note" hint sits below the input */
.pr-col{display:flex; flex-direction:column; gap:4px}
.pr-col > input,
.pr-col > select,
.pr-col > textarea{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.pr-col > input:focus,
.pr-col > textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.pr-note{
  font-size:11.5px; color:var(--muted); font-style:italic;
  margin-top:2px;
}

/* Phone row: country code + number */
.pr-phone-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
}
.pr-phone-row > select,
.pr-phone-row > input{
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  min-width:0;
}
.pr-phone-row > select:focus,
.pr-phone-row > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}

/* Attachment checkbox */
.pr-check{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text); cursor:pointer;
}
.pr-check input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:var(--brand);
  cursor:pointer;
}

/* Rich-text-style toolbar above the email body */
.pr-toolbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:2px;
  padding:6px 8px;
  border:1px solid var(--bdr);
  border-bottom:none;
  border-radius:6px 6px 0 0;
  background:var(--surf2);
}
.pr-tb-lbl{
  padding:0 8px 0 4px;
  font-size:12px; color:var(--text);
  border-right:1px solid var(--bdr);
  margin-right:4px;
  line-height:24px;
}
.pr-tb-sep{
  width:1px; height:18px; background:var(--bdr);
  margin:0 3px;
}
.pr-tb-btn{
  min-width:26px; height:26px;
  padding:0 6px;
  border:none; background:transparent;
  color:var(--text); font-size:13px;
  cursor:pointer; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit;
  transition:background .1s;
}
.pr-tb-btn:hover{background:var(--surf)}

/* Contenteditable email body */
.pr-body-edit{
  min-height:200px;
  max-height:340px; overflow-y:auto;
  padding:12px 14px;
  border:1px solid var(--bdr);
  border-radius:0 0 6px 6px;
  background:var(--surf);
  font-size:13px; color:var(--text);
  line-height:1.55;
  outline:none;
}
.pr-body-edit:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.pr-body-edit p{margin:0 0 10px}

/* SMS message is intentionally shorter — style with a soft mint tint to
   match the reference mockup. */
.pr-sms-msg{
  background:#f0fdf4 !important;
  min-height:90px;
}

/* Green "Send" button in the footer */
#pr-sidebar-wrap .pr-send-btn{
  background:#10b981 !important;
  border-color:#10b981 !important;
  color:#fff !important;
}
#pr-sidebar-wrap .pr-send-btn:hover{
  background:#059669 !important;
  border-color:#059669 !important;
}

/* Mobile: stack label above control, tabs scroll horizontally */
@media (max-width:640px){
  .pr-body{padding:16px 14px 10px}
  .pr-fg{grid-template-columns:1fr; gap:6px; align-items:start}
  .pr-fg > label{margin-bottom:2px}
  .pr-tabs{overflow-x:auto; padding:8px 12px 0}
  .pr-tab{white-space:nowrap; padding:9px 10px; font-size:12.5px}
  .pr-toolbar{overflow-x:auto; flex-wrap:nowrap}
}

html[data-theme="dark"] .pr-sms-msg{background:rgba(16,185,129,.08) !important}
html[data-theme="dark"] .pr-tab.on{color:#34d399; border-bottom-color:#34d399}

/* Action column buttons */
.ma-list-act{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.ma-list-act-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;padding:7px 12px;background:var(--surf);border:1px solid var(--bdr);border-radius:5px;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:background .12s,border-color .12s}
.ma-list-act-btn:hover{background:var(--surf2);border-color:#cbd5e1}
.ma-list-act-btn.view{background:var(--surf);border-color:var(--bdr)}
.ma-list-act-btn.edit{flex:1}
.ma-list-act-btn svg{color:var(--muted);flex-shrink:0}
.ma-list-act-row{display:flex;gap:4px;align-items:stretch}
.ma-list-act-more{flex-shrink:0;width:34px;background:var(--surf);border:1px solid var(--bdr);border-radius:5px;cursor:pointer;color:var(--text);font-size:11px;font-family:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}
.ma-list-act-more:hover{background:var(--surf2)}

/* Action menu dropdown */
.ma-list-act-menu{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:6px;overflow-y:auto;display:none;font-size:13px}
.ma-list-act-menu.open{display:block}
.ma-list-act-section{padding:8px 10px 4px;font-size:11.5px;font-weight:700;color:var(--brand-d);border-bottom:1px solid var(--brand-bg2);margin:4px 0 2px;letter-spacing:.3px}
.ma-list-act-item{padding:8px 10px;border-radius:5px;cursor:pointer;color:var(--text);font-size:13px;line-height:1.3;transition:background .1s,color .1s}
.ma-list-act-item:hover{background:var(--brand);color:#fff}

/* Mobile adjustments */
@media (max-width:880px){
  .ma-list-hdr{padding:12px 14px}
  .ma-list-actions{width:100%;gap:7px}
  .ma-list-pill,.ma-list-add{flex:1 1 auto;justify-content:center;padding:8px 10px;font-size:12.5px}
  .ma-list-pill span:not(:first-child){white-space:nowrap}
}
@media (max-width:760px){
  .ma-list-card{overflow-x:auto}
  .ma-list-tbl{min-width:920px}
  .ma-list-tbl thead th{padding:11px 10px;font-size:12px}
  .ma-list-tbl tbody td{padding:13px 10px;font-size:12.5px}
  .ma-list-act-btn{padding:6px 8px;font-size:11.5px}
  .ma-list-act-more{width:28px}
}
@media (max-width:480px){
  .ma-list-hdr{padding:10px 12px;gap:8px}
  .ma-list-title{font-size:14px;font-weight:700}
  .ma-list-pill{padding:7px 8px;font-size:12px;flex:1 1 calc(50% - 4px)}
  .ma-list-pill svg{width:12px;height:12px}
  .ma-list-add{flex:1 1 calc(50% - 4px)}
}

/* Dark mode tweaks */
html[data-theme="dark"] .ma-pay-pill.cash{background:var(--brand-dd);color:#7DD3FC}
html[data-theme="dark"] .ma-pay-pill.credit{background:#7f1d1d;color:#fecaca}
html[data-theme="dark"] .ma-pay-pill.cancelled{background:#1e293b;color:#94a3b8}
html[data-theme="dark"] .ma-pay-bell{background:#1e3a8a;color:#bfdbfe}
html[data-theme="dark"] .ma-pay-bell:hover{background:var(--brand-dd)}
html[data-theme="dark"] .ma-list-tbl tbody tr:hover{background:#0f172a}
html[data-theme="dark"] .ma-list-act-section{color:#38BDF8;border-bottom-color:var(--brand-dd)}

/* ════════════════════════════════════════════════════════════
   v3.9.22 — Customer/Vendor + Product/Service list refinements
   The filter tabs now sit inside the same card as the table
   (matching the screenshot), and the Get-Outstanding link uses
   the brand colour.
   ──────────────────────────────────────────────────────────── */
.ma-cv-card{padding:0;overflow:visible}
.ma-cv-card .ma-cv-filter{margin:0;padding:14px 18px 0;gap:0;border-bottom:1px solid var(--bdr);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.ma-cv-card .ma-cv-pill{background:transparent;border:none;border-radius:0;padding:10px 16px 14px;color:var(--muted);font-weight:500;font-size:13px;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.ma-cv-card .ma-cv-pill:hover{background:transparent;color:var(--text);border-bottom-color:transparent}
.ma-cv-card .ma-cv-pill.active{background:transparent;color:var(--brand);border-bottom-color:var(--brand);box-shadow:none;font-weight:600}
.ma-cv-card .ma-cv-pill.active .ma-cv-count{background:var(--brand);color:#fff}
.ma-cv-card .ma-cv-pill .ma-cv-count{background:var(--surf2);color:var(--muted);font-weight:700}
.ma-cv-card .ma-list-tbl{margin-top:0}

/* "Get Outstanding" link in the Get Outstanding column */
.ma-get-outstanding{color:var(--brand);text-decoration:none;font-weight:500;font-size:13px}
.ma-get-outstanding:hover{text-decoration:underline}

/* Item thumbnail next to the name */
.ma-item-cell{display:flex;align-items:center;gap:8px}
.ma-item-thumb{width:30px;height:30px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surf2);display:flex;align-items:center;justify-content:center;font-size:16px}
.ma-item-thumb-x{font-size:16px;color:var(--muted)}
.ma-item-cell-name{font-weight:500}

/* Mobile — keep filter tabs scrollable and slimmer */
@media (max-width:760px){
  .ma-cv-card .ma-cv-filter{padding:10px 12px 0;gap:4px}
  .ma-cv-card .ma-cv-pill{padding:8px 12px 12px;font-size:12.5px}
  .ma-cv-card .ma-search-row{padding:0 12px !important}
}
@media (max-width:480px){
  .ma-cv-card .ma-cv-pill{padding:8px 10px 11px;font-size:12px}
  .ma-cv-card .ma-cv-pill .ma-cv-count{padding:0 6px;font-size:10.5px}
}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.23 — SALE / PURCHASE PRODUCT REPORT  (matches the GoGstBill reference)
   Clean filter card with "Advance Filter" toggle, 5-column primary filter grid,
   a 3-column advanced filter grid (revealed on demand), and a Reset + Search
   row anchored bottom-right.
══════════════════════════════════════════════════════════════════════════════ */
.ma-spr-card{padding:20px 22px 16px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl)}
.ma-spr-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--bdr);
}
.ma-spr-title{font-size:15px;font-weight:600;color:var(--text)}
.ma-spr-adv{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surf2);border:1px solid var(--bdr);border-radius:6px;
  padding:7px 12px;font-size:12.5px;font-weight:500;color:var(--text);
  cursor:pointer;transition:background .15s,border-color .15s;
}
.ma-spr-adv:hover{background:var(--bdr)}
.ma-spr-adv svg{flex-shrink:0;opacity:.7}

.ma-spr-filters{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px 18px;
}
.ma-spr-filters .fg{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.ma-spr-filters .fg label{font-size:12.5px;color:var(--text);font-weight:500}
.ma-spr-filters .fg input,
.ma-spr-filters .fg select{
  width:100%;padding:9px 11px;font-size:13px;
  border:1px solid var(--bdr);border-radius:6px;background:var(--surf);color:var(--text);outline:none;
  font-family:inherit;box-sizing:border-box;
}
.ma-spr-filters .fg input:focus,
.ma-spr-filters .fg select:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10)}

.ma-spr-filters-adv{
  margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--bdr);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.ma-spr-actions{
  display:flex;justify-content:flex-end;align-items:center;
  gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--bdr);
}
.ma-spr-actions .ma-btn{padding:9px 18px;font-size:13px;display:inline-flex;align-items:center;gap:6px}

/* Compact tweaks for tablet + phone */
@media (max-width:1024px){
  .ma-spr-filters{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px 14px}
  .ma-spr-filters-adv{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:680px){
  .ma-spr-card{padding:15px 14px 12px}
  .ma-spr-filters,.ma-spr-filters-adv{grid-template-columns:1fr 1fr;gap:10px 12px}
  .ma-spr-hdr{padding-bottom:11px;margin-bottom:11px}
  .ma-spr-actions{flex-wrap:wrap}
  .ma-spr-actions .ma-btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:440px){
  .ma-spr-filters,.ma-spr-filters-adv{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.25 — Import drop-zone, View button, SPR dropdown clipping fix
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Drag-and-drop file picker for inline Import modals ─── */
.ma-import-drop{
  display:block;
  padding:32px 20px;
  border:2px dashed var(--bdr);
  border-radius:9px;
  background:var(--surf);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ma-import-drop:hover,
.ma-import-drop.on{
  border-color:var(--brand);
  background:var(--brand-bg);
}
html[data-theme="dark"] .ma-import-drop:hover,
html[data-theme="dark"] .ma-import-drop.on{background:#0a3621}

/* ─── View button in product list ─── */
.ma-list-act-btn.view{
  background:var(--surf2);
  border:1px solid var(--bdr);
  color:var(--text);
}
.ma-list-act-btn.view:hover{
  background:var(--bdr);
  color:var(--brand);
}

/* ─── Make sure SPR card never clips its combo dropdowns ─── */
.ma-spr-card{overflow:visible !important}
.ma-spr-card .ma-combo-wrap{position:relative}
.ma-spr-card .ma-combo-drop{z-index:1100}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.26 — CANONICAL MOBILE LIST CARDS for Products + Customers
   Converts the wide list tables on Products / Services and Customers / Vendors
   pages into clean card-per-row layout on phones. Goes at the END of the file
   with !important so it always wins the cascade against any older rules.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* Outer card padding tighter on phones */
  #__disabled_pg_stock__ .ma-card,
  #__disabled_pg_customers__ .ma-card{margin-left:8px !important;margin-right:8px !important}

  /* List header — stack title on top, action pills wrap below */
  #__disabled_pg_stock__ .ma-list-hdr,
  #__disabled_pg_customers__ .ma-list-hdr{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:10px 12px !important;
  }
  #__disabled_pg_stock__ .ma-list-title,
  #__disabled_pg_customers__ .ma-list-title{font-size:15px !important;font-weight:700 !important}
  #__disabled_pg_stock__ .ma-list-actions,
  #__disabled_pg_customers__ .ma-list-actions{
    display:flex !important;flex-wrap:wrap !important;gap:6px !important;width:100% !important;
  }
  #__disabled_pg_stock__ .ma-list-actions .ma-list-pill,
  #__disabled_pg_customers__ .ma-list-actions .ma-list-pill{
    flex:1 1 calc(50% - 3px) !important;
    min-width:0 !important;
    font-size:11.5px !important;padding:7px 9px !important;
    justify-content:center !important;
  }
  #__disabled_pg_stock__ .ma-list-actions .ma-list-add,
  #__disabled_pg_customers__ .ma-list-actions .ma-list-add{
    flex:1 1 100% !important;font-size:13px !important;padding:9px 12px !important;
    justify-content:center !important;font-weight:700 !important;
  }

  /* Type filter pills (All / Customer / Vendor / Product / Service / etc.) */
  #__disabled_pg_stock__ .ma-cv-filter,
  #__disabled_pg_customers__ .ma-cv-filter{
    overflow-x:auto !important;flex-wrap:nowrap !important;
    padding:8px 8px !important;gap:6px !important;
    -webkit-overflow-scrolling:touch;
  }
  #__disabled_pg_stock__ .ma-cv-filter .ma-cv-pill,
  #__disabled_pg_customers__ .ma-cv-filter .ma-cv-pill{flex:0 0 auto !important;font-size:11.5px !important;padding:7px 11px !important}

  /* Bulk action bars wrap */
  #__disabled_pg_stock__ .ma-bulk-bar,
  #item-bulk-bar,#cust-bulk-bar{flex-wrap:wrap !important}

  /* ── HIDE thead, convert each row into a card ── */
  #__disabled_pg_stock__ .ma-tbl thead,
  #__disabled_pg_customers__ .ma-tbl thead{display:none !important}

  #__disabled_pg_stock__ .ma-tbl tbody tr,
  #__disabled_pg_customers__ .ma-tbl tbody tr{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "name name"
      "f1   f2"
      "f3   f4"
      "f5   f6"
      "act  act" !important;
    gap:8px 11px !important;
    background:var(--surf) !important;
    border:1px solid var(--bdr) !important;
    border-radius:9px !important;
    padding:13px 13px 11px !important;
    margin:0 10px 10px !important;
    position:relative !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td,
  #__disabled_pg_customers__ .ma-tbl tbody td{
    display:block !important;
    padding:0 !important;
    border:none !important;
    font-size:13px !important;
    min-width:0 !important;
    text-align:left !important;
  }
  /* Show data-label as a tiny uppercase header above each value */
  #__disabled_pg_stock__ .ma-tbl tbody td[data-label]:not([data-label=""])::before,
  #__disabled_pg_customers__ .ma-tbl tbody td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    display:block;
    font-size:9.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.4px;
    margin-bottom:2px;
  }

  /* Checkbox column — float to top-right of card so the Name has room */
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-cb-col,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-cb-col{
    position:absolute !important;
    top:11px !important;right:13px !important;
    width:18px !important;height:18px !important;
    grid-area:unset !important;
    z-index:1 !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-cb-col input,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-cb-col input{width:18px !important;height:18px !important;margin:0 !important}
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-cb-col::before,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-cb-col::before{content:none !important}

  /* Name cell spans both columns at the top of the card */
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-list-invno,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-list-invno{
    grid-area:name !important;
    padding-right:32px !important;            /* clear the checkbox */
    font-size:14px !important;font-weight:700 !important;color:var(--text) !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-list-invno::before,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-list-invno::before{content:none !important}
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-list-invno .ma-item-thumb{width:36px !important;height:36px !important;font-size:18px !important;flex-shrink:0}
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-list-invno .ma-item-cell-name{font-size:14px !important;font-weight:700 !important}

  /* Empty row spans both columns */
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-empty,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-empty{
    grid-column:1 / -1 !important;
    text-align:center !important;
    padding:32px 16px !important;
  }

  /* Middle data cells — auto-assign grid areas in row order f1..f6 */
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(3),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(3){grid-area:f1 !important}
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(4),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(4){grid-area:f2 !important}
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(5),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(5){grid-area:f3 !important}
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(6),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(6){grid-area:f4 !important}
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(7),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(7){grid-area:f5 !important}
  #__disabled_pg_stock__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(8),
  #__disabled_pg_customers__ .ma-tbl tbody tr td:not(.ma-cb-col):not(.ma-list-invno):not(.ma-act-col):nth-of-type(8){grid-area:f6 !important}

  /* Right-aligned numeric cells (Price, Sell Price, Outstanding) stay left in card layout */
  #__disabled_pg_stock__ .ma-tbl tbody td.r,
  #__disabled_pg_customers__ .ma-tbl tbody td.r{text-align:left !important}

  /* Action column — full-width row at bottom of card with the buttons inline */
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col{
    grid-area:act !important;
    margin-top:4px !important;padding-top:10px !important;
    border-top:1px dashed var(--bdr) !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col::before,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col::before{content:none !important}
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col .ma-list-act,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col .ma-list-act{
    display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;
    gap:6px !important;justify-content:flex-end !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col .ma-list-act-row,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col .ma-list-act-row{
    display:flex !important;gap:6px !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col .ma-list-act-btn,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col .ma-list-act-btn{
    padding:6px 10px !important;font-size:11.5px !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody td.ma-act-col .ma-list-act-more,
  #__disabled_pg_customers__ .ma-tbl tbody td.ma-act-col .ma-list-act-more{
    padding:6px 9px !important;font-size:11.5px !important;width:auto !important;
  }

  /* Pagination padding tighter */
  #__disabled_pg_stock__ .ma-pagination,
  #__disabled_pg_customers__ .ma-pagination{padding:10px 8px !important;flex-wrap:wrap !important}
}

/* Very small phones */
@media (max-width:380px){
  #__disabled_pg_stock__ .ma-tbl tbody tr,
  #__disabled_pg_customers__ .ma-tbl tbody tr{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "name"
      "f1"
      "f2"
      "f3"
      "f4"
      "f5"
      "f6"
      "act" !important;
  }
  #__disabled_pg_stock__ .ma-list-actions .ma-list-pill,
  #__disabled_pg_customers__ .ma-list-actions .ma-list-pill{flex:1 1 100% !important}
}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.27 — Force the customer + product LIST TABLES to flow as blocks on
   phones so the grid-row layout from v3.9.26 actually shows. The earlier
   `.ma-tbl{min-width:620px}` / 700px rules were forcing horizontal scroll.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  #__disabled_pg_stock__ .ma-tbl,
  #__disabled_pg_stock__ .ma-list-tbl,
  #__disabled_pg_customers__ .ma-list-tbl{
    min-width:0 !important;
    width:100% !important;
    display:block !important;
    overflow:visible !important;
  }
  #__disabled_pg_stock__ .ma-tbl tbody,
  #__disabled_pg_customers__ .ma-tbl tbody{display:block !important}
  /* Outer scrolling wrapper no longer needs to scroll horizontally */
  #__disabled_pg_stock__ .ma-card,
  #__disabled_pg_customers__ .ma-card{overflow-x:visible !important}
  /* Hide the columns-picker icon since cards always show every field */
  #__disabled_pg_stock__ .ma-tbl thead .ma-col-pick,
  #__disabled_pg_stock__ .ma-list-tbl thead .ma-col-pick,
  #__disabled_pg_customers__ .ma-list-tbl thead .ma-col-pick{display:none !important}
}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.28 — CANONICAL CREATE-SALE / CREATE-PURCHASE ITEM SECTION DESIGN
   Matches the user's "Product Items" reference images exactly:
   - Item Note is ALWAYS VISIBLE as a yellow sub-row below the Product Name
   - Three-dot ⋮ menu in card header (Add Product / Add Charges / Custom Columns)
   - Desktop columns: SR | Product | HSN/SAC | Qty/Stock | UOM | Price | Disc | IGST | Total
   - Mobile: SR pill + Product Name on row 1, then Product Note full-width,
     then HSN|Qty, UOM|Price, Disc|IGST, Total alone, then green + button
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Card-header three-dot menu ─── */
.gst-items-menu-wrap{position:relative;display:inline-block;margin-left:6px}
.gst-items-menu-btn{
  background:var(--surf2);
  border:1px solid var(--bdr);
  border-radius:50%;
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);
  transition:background .12s,border-color .12s;
}
.gst-items-menu-btn:hover{background:var(--bdr);border-color:var(--brand);color:var(--brand)}
.gst-items-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:200px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px;
  z-index:50;
  display:none;
}
.gst-items-menu.open{display:block}
.gst-items-menu-item{
  padding:9px 12px;
  font-size:13px;
  color:var(--text);
  border-radius:5px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s;
}
.gst-items-menu-item:hover{background:var(--surf2);color:var(--brand)}

/* ─── Item Note: always visible, yellow background ─── */
.gst-item-note{margin-top:5px;display:block !important}
.gst-item-note textarea{
  width:100%;
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  background:var(--brand-bg);
  border:1px solid var(--brand-bg2);
  border-radius:6px;
  outline:none;
  resize:vertical;
  min-height:32px;
  line-height:1.4;
}
.gst-item-note textarea::placeholder{color:#b45309;font-style:italic;opacity:.85}
.gst-item-note textarea:focus{
  border-color:#f59e0b;
  box-shadow:0 0 0 2px rgba(245,158,11,.15);
}
html[data-theme="dark"] .gst-item-note textarea{
  background:#3f3a18;border-color:#78630a;color:var(--brand-bg);
}
html[data-theme="dark"] .gst-item-note textarea::placeholder{color:#d6b56c}

/* v3.9.140 — The "+ Add Note" link is now the primary way to reveal the item
   note, so it must be visible. Old rule that hid it globally has been removed.
   Style comes from the rescoped block below. */

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE (≤ 760 px) — exact match to image 3
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* Outer card spacing tight on phones */
  #pg-bill .gst-card,
  #pg-mc-invoice .gst-card,

  #pg-purchase .gst-card{padding:12px 10px !important;border-radius:10px !important;margin:0 8px 12px !important}

  /* Discount toggle + ⋮ menu wrap properly */
  #pg-bill .gst-items-hdr,
  #pg-mc-invoice .gst-items-hdr,

  #pg-purchase .gst-items-hdr{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:6px 4px 12px !important;
  }
  #pg-bill .gst-items-hdr-title,
  #pg-mc-invoice .gst-items-hdr-title,

  #pg-purchase .gst-items-hdr-title{font-size:15px !important;font-weight:600 !important}
  #pg-bill .gst-disc-toggle,
  #pg-mc-invoice .gst-disc-toggle,

  #pg-purchase .gst-disc-toggle{font-size:12px !important;gap:6px !important}

  /* Table → block: hide thead, hide tfoot's wide totals row */
  #pg-bill .gst-items-tbl,
  #pg-mc-invoice .gst-items-tbl,

  #pg-purchase .gst-items-tbl,

  #pg-create-jobwork .gst-items-tbl,
  #pg-create-delivery-challan .gst-items-tbl,
  #pg-create-packing-list .gst-items-tbl,


  #pg-create-proforma .gst-items-tbl{

    display:block !important;min-width:0 !important;width:100% !important;table-layout:auto !important;
  }
  #pg-bill .gst-items-tbl thead,
  #pg-mc-invoice .gst-items-tbl thead,

  #pg-purchase .gst-items-tbl thead,
  #pg-bill .gst-items-tbl tfoot,
  #pg-mc-invoice .gst-items-tbl tfoot,

  #pg-purchase .gst-items-tbl tfoot,

  #pg-create-jobwork .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-delivery-challan .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-jobwork .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot, #pg-create-packing-list .gst-items-tbl tfoot, #pg-create-proforma .gst-items-tbl tfoot{display:none !important}
  #pg-bill .gst-items-tbl tbody,
  #pg-mc-invoice .gst-items-tbl tbody,

  #pg-purchase .gst-items-tbl tbody,

  #pg-create-jobwork .gst-items-tbl tbody, #pg-create-proforma .gst-items-tbl tbody, #pg-create-delivery-challan .gst-items-tbl tbody, #pg-create-proforma .gst-items-tbl tbody, #pg-create-jobwork .gst-items-tbl tbody, #pg-create-proforma .gst-items-tbl tbody, #pg-create-packing-list .gst-items-tbl tbody, #pg-create-proforma .gst-items-tbl tbody{display:block !important}

  /* Each row → a card */
  #pg-bill .gst-items-tbl tbody tr,
  #pg-mc-invoice .gst-items-tbl tbody tr,

  #pg-purchase .gst-items-tbl tbody tr,

  #pg-create-jobwork .gst-items-tbl tbody tr,
  #pg-create-delivery-challan .gst-items-tbl tbody tr,
  #pg-create-packing-list .gst-items-tbl tbody tr,


  #pg-create-proforma .gst-items-tbl tbody tr{

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "prod  prod"
      "note  note"
      "qty   uom"
      "price price"
      "disc  igst"
      "total ."
      "act   act" !important;
    gap:10px 10px !important;
    background:var(--surf) !important;
    border:1px solid var(--bdr) !important;
    border-radius:10px !important;
    padding:14px 12px 12px !important;
    margin:0 0 12px !important;
    position:relative !important;
  }
  #pg-bill .gst-items-tbl tbody td,
  #pg-mc-invoice .gst-items-tbl tbody td,

  #pg-purchase .gst-items-tbl tbody td,

  #pg-create-jobwork .gst-items-tbl tbody td,
  #pg-create-delivery-challan .gst-items-tbl tbody td,
  #pg-create-packing-list .gst-items-tbl tbody td,


  #pg-create-proforma .gst-items-tbl tbody td{

    display:block !important;
    padding:0 !important;
    border:none !important;
    font-size:13px !important;
    min-width:0 !important;
    text-align:left !important;
  }
  /* No data-label headers on mobile — the placeholders are the labels */
  #pg-bill .gst-items-tbl tbody td::before,
  #pg-mc-invoice .gst-items-tbl tbody td::before,

  #pg-purchase .gst-items-tbl tbody td::before,

  #pg-create-jobwork .gst-items-tbl tbody td::before, #pg-create-proforma .gst-items-tbl tbody td::before, #pg-create-delivery-challan .gst-items-tbl tbody td::before, #pg-create-proforma .gst-items-tbl tbody td::before, #pg-create-jobwork .gst-items-tbl tbody td::before, #pg-create-proforma .gst-items-tbl tbody td::before, #pg-create-packing-list .gst-items-tbl tbody td::before, #pg-create-proforma .gst-items-tbl tbody td::before{content:none !important}

  /* SR pill — top-left of card, on the same row as Product Name */
  #pg-bill .gst-items-tbl tbody td.gst-c-sr,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-sr,

  #pg-purchase .gst-items-tbl tbody td.gst-c-sr,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-sr,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-sr,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-sr,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-sr{

    grid-area:unset !important;
    position:absolute !important;
    top:18px !important;left:14px !important;
    width:32px !important;height:32px !important;
    background:var(--surf2) !important;color:var(--text) !important;
    border-radius:6px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    font-size:13px !important;font-weight:600 !important;
    margin:0 !important;padding:0 !important;
    z-index:1 !important;
  }

  /* Product cell — full top row, left-padded to clear the SR pill */
  #pg-bill .gst-items-tbl tbody td.gst-c-prod,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod{

    grid-area:prod !important;
    padding-left:46px !important;
    max-width:none !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-input-row input{

    width:100% !important;
    padding:10px 28px 10px 12px !important;
    font-size:13px !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    box-sizing:border-box !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .ma-combo-arrow{right:10px !important;top:50% !important;transform:translateY(-50%) !important;font-size:12px !important;color:var(--muted) !important;border:none !important;background:transparent !important;cursor:pointer}

  /* The Item Note lives INSIDE .gst-c-prod — pull it out to its own grid row */
  #pg-bill .gst-items-tbl tbody td.gst-c-prod .gst-item-note,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .gst-item-note,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod .gst-item-note,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .gst-item-note,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod .gst-item-note,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod .gst-item-note,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .gst-item-note{

    margin-left:-46px !important;   /* span back over the SR-pill padding */
    margin-top:9px !important;
  }
  /* Serial / Batch sub-rows just below the product name input */
  #pg-bill .gst-items-tbl tbody td.gst-c-prod .gst-item-serial,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .gst-item-serial,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod .gst-item-serial,
  #pg-bill .gst-items-tbl tbody td.gst-c-prod .gst-item-batch,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-prod .gst-item-batch,

  #pg-purchase .gst-items-tbl tbody td.gst-c-prod .gst-item-batch,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-prod .gst-item-batch, #pg-create-proforma .gst-items-tbl tbody td.gst-c-prod .gst-item-batch{margin-top:7px !important;margin-left:-46px !important}

  /* Standard cells get grid areas */
  #pg-bill .gst-items-tbl tbody td.gst-c-hsn,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-hsn,

  #pg-purchase .gst-items-tbl tbody td.gst-c-hsn,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-hsn, #pg-create-proforma .gst-items-tbl tbody td.gst-c-hsn{grid-area:hsn !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-qty,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty,

  #pg-purchase .gst-items-tbl tbody td.gst-c-qty,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty, #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty{grid-area:qty !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-uom,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-uom,

  #pg-purchase .gst-items-tbl tbody td.gst-c-uom,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-uom, #pg-create-proforma .gst-items-tbl tbody td.gst-c-uom, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-uom, #pg-create-proforma .gst-items-tbl tbody td.gst-c-uom, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-uom, #pg-create-proforma .gst-items-tbl tbody td.gst-c-uom, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-uom, #pg-create-proforma .gst-items-tbl tbody td.gst-c-uom{grid-area:uom !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-price,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price,

  #pg-purchase .gst-items-tbl tbody td.gst-c-price,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price, #pg-create-proforma .gst-items-tbl tbody td.gst-c-price{grid-area:price !important;padding:0 !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-disc,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-disc,

  #pg-purchase .gst-items-tbl tbody td.gst-c-disc,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-disc, #pg-create-proforma .gst-items-tbl tbody td.gst-c-disc{grid-area:disc !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-igst,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-igst,

  #pg-purchase .gst-items-tbl tbody td.gst-c-igst,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-igst, #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst{grid-area:igst !important}
  #pg-bill .gst-items-tbl tbody td.gst-c-total,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-total,

  #pg-purchase .gst-items-tbl tbody td.gst-c-total,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-total, #pg-create-proforma .gst-items-tbl tbody td.gst-c-total, #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total, #pg-create-proforma .gst-items-tbl tbody td.gst-c-total, #pg-create-jobwork .gst-items-tbl tbody td.gst-c-total, #pg-create-proforma .gst-items-tbl tbody td.gst-c-total, #pg-create-packing-list .gst-items-tbl tbody td.gst-c-total, #pg-create-proforma .gst-items-tbl tbody td.gst-c-total{grid-area:total !important}

  /* Field styling — all inputs/selects look the same: outlined rounded boxes */
  #pg-bill .gst-items-tbl tbody td input[type="text"],
  #pg-mc-invoice .gst-items-tbl tbody td input[type="text"],

  #pg-bill .gst-items-tbl tbody td input[type="number"],
  #pg-mc-invoice .gst-items-tbl tbody td input[type="number"],

  #pg-bill .gst-items-tbl tbody td select,
  #pg-mc-invoice .gst-items-tbl tbody td select,

  #pg-purchase .gst-items-tbl tbody td input[type="text"],
  #pg-purchase .gst-items-tbl tbody td input[type="number"],
  #pg-purchase .gst-items-tbl tbody td select,

  #pg-create-jobwork .gst-items-tbl tbody td select,
  #pg-create-delivery-challan .gst-items-tbl tbody td select,
  #pg-create-packing-list .gst-items-tbl tbody td select,


  #pg-create-proforma .gst-items-tbl tbody td select{

    width:100% !important;
    padding:10px 12px !important;
    font-size:13px !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    color:var(--text) !important;
    box-sizing:border-box !important;
    outline:none !important;
    text-align:left !important;
    font-family:inherit !important;
  }
  #pg-bill .gst-items-tbl tbody td select,
  #pg-mc-invoice .gst-items-tbl tbody td select,

  #pg-purchase .gst-items-tbl tbody td select,

  #pg-create-jobwork .gst-items-tbl tbody td select,
  #pg-create-delivery-challan .gst-items-tbl tbody td select,
  #pg-create-packing-list .gst-items-tbl tbody td select,


  #pg-create-proforma .gst-items-tbl tbody td select{

    appearance:none !important; -webkit-appearance:none !important;
    background:var(--surf) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center !important;
    padding-right:26px !important;
  }
  #pg-bill .gst-items-tbl tbody td input:focus,
  #pg-mc-invoice .gst-items-tbl tbody td input:focus,

  #pg-bill .gst-items-tbl tbody td select:focus,
  #pg-mc-invoice .gst-items-tbl tbody td select:focus,

  #pg-purchase .gst-items-tbl tbody td input:focus,
  #pg-purchase .gst-items-tbl tbody td select:focus,

  #pg-create-jobwork .gst-items-tbl tbody td select:focus,
  #pg-create-delivery-challan .gst-items-tbl tbody td select:focus,
  #pg-create-packing-list .gst-items-tbl tbody td select:focus,


  #pg-create-proforma .gst-items-tbl tbody td select:focus{

    border-color:var(--brand) !important;
    box-shadow:0 0 0 2px rgba(37,99,235,.10) !important;
  }

  /* Price cell — dot indicator inside */
  #pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,

  #pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-wrap,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-wrap{

    width:100% !important;position:relative !important;
    border:1px solid var(--bdr) !important;border-radius:6px !important;background:var(--surf) !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,

  #pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-wrap input{

    border:none !important;background:transparent !important;
    padding:10px 12px 10px 26px !important;
    box-shadow:none !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,

  #pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-wrap:focus-within{

    border-color:var(--brand) !important;box-shadow:0 0 0 2px rgba(37,99,235,.10) !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-price .gst-price-dot,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-dot,

  #pg-purchase .gst-items-tbl tbody td.gst-c-price .gst-price-dot,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-price .gst-price-dot,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-price .gst-price-dot,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-price .gst-price-dot,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-price .gst-price-dot{

    position:absolute !important;left:10px !important;top:50% !important;transform:translateY(-50%) !important;
    width:7px !important;height:7px !important;border-radius:50% !important;
    background:#374151 !important;flex-shrink:0 !important;pointer-events:none !important;
  }

  /* IGST cell — select on top, computed amount centered below */
  #pg-bill .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,

  #pg-purchase .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-igst .gst-igst-amt{

    text-align:center !important;font-size:12px !important;color:var(--muted) !important;
    margin-top:5px !important;font-weight:500 !important;
  }

  /* Stock hint below Qty */
  #pg-bill .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,

  #pg-purchase .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint{

    text-align:center !important;font-size:11px !important;font-style:italic !important;color:var(--muted) !important;
    margin-top:5px !important;
  }

  /* Total cell — half-width on its own row, plain outlined input */
  #pg-bill .gst-items-tbl tbody td.gst-c-total,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-total,

  #pg-purchase .gst-items-tbl tbody td.gst-c-total,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-total,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-total,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-total{

    background:transparent !important;padding:0 !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-total .gst-total-cell,

  #pg-purchase .gst-items-tbl tbody td.gst-c-total .gst-total-cell,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-total .gst-total-cell,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-total .gst-total-cell,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-total .gst-total-cell{

    display:block !important;
    width:100% !important;
    padding:10px 12px !important;
    font-size:13px !important;
    color:var(--muted) !important;
    font-weight:500 !important;
    border:1px solid var(--bdr) !important;
    border-radius:6px !important;
    background:var(--surf) !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }

  /* Action buttons — floating bottom-right of the card, green + only (red − next to it) */
  #pg-bill .gst-items-tbl tbody td.gst-c-act,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act,

  #pg-purchase .gst-items-tbl tbody td.gst-c-act,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-act,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-act,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-act{

    grid-area:act !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:6px !important;
    padding:0 !important;
    margin-top:0 !important;
    border:none !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

  #pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
  #pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

  #pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{

    width:34px !important;height:34px !important;
    border-radius:50% !important;
    font-size:18px !important;line-height:1 !important;
    border:none !important;cursor:pointer !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

  #pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn{

    background:var(--brand) !important;color:#fff !important;
  }
  #pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

  #pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,


  #pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{

    background:transparent !important;color:#dc2626 !important;font-size:24px !important;
  }
}

/* Tiny phones — single column for HSN/Qty etc */
@media (max-width:380px){
  #pg-bill .gst-items-tbl tbody tr,
  #pg-mc-invoice .gst-items-tbl tbody tr,

  #pg-purchase .gst-items-tbl tbody tr,

  #pg-create-jobwork .gst-items-tbl tbody tr, #pg-create-proforma .gst-items-tbl tbody tr, #pg-create-delivery-challan .gst-items-tbl tbody tr, #pg-create-proforma .gst-items-tbl tbody tr, #pg-create-jobwork .gst-items-tbl tbody tr, #pg-create-proforma .gst-items-tbl tbody tr, #pg-create-packing-list .gst-items-tbl tbody tr, #pg-create-proforma .gst-items-tbl tbody tr{padding:12px 10px 10px !important}
}

/* ════════════════════════════════════════════════════════════
   v3.9.29 — Multi-Currency Invoice page
   ──────────────────────────────────────────────────────────── */
#pg-mc-invoice .mc-ship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
#pg-mc-invoice .mc-ship-grid .fg{margin:0}
#pg-mc-invoice .mc-ship-grid .fg label{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:4px;display:block}
#pg-mc-invoice .mc-ship-grid input,#pg-mc-invoice .mc-ship-grid select{width:100%;padding:7px 9px;border:1px solid var(--bdr);border-radius:5px;font-size:13px;background:var(--surf);box-sizing:border-box}

/* Discount toggle Rs / % */
.mc-disc-toggle{display:inline-flex;border:1px solid var(--bdr);border-radius:5px;overflow:hidden}
.mc-disc-toggle button{background:var(--surf);border:none;padding:5px 11px;cursor:pointer;font-size:12px;color:var(--text);font-weight:600;font-family:inherit}
.mc-disc-toggle button:not(:last-child){border-right:1px solid var(--bdr)}
.mc-disc-toggle button.active{background:var(--brand);color:#fff}

/* Totals strip on the right */
.mc-totals-row{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:1px solid var(--bdr);font-size:13.5px}
.mc-totals-row:last-of-type{border-bottom:none}
.mc-totals-grand{background:var(--brand-bg);font-weight:700;font-size:14.5px;padding:10px 8px;border-radius:6px;margin-top:6px;border-bottom:none}
html[data-theme="dark"] .mc-totals-grand{background:#3f3a18}

@media (max-width:760px){
  #pg-mc-invoice .mc-ship-grid{grid-template-columns:1fr 1fr;gap:8px}
}
@media (max-width:480px){
  #pg-mc-invoice .mc-ship-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   v3.9.30 — Dashboard redesign: profile card, tab switcher, Quick Links
   ──────────────────────────────────────────────────────────── */

/* Complete-your-profile card */
.ma-profile-card2{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:18px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.ma-profile2-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:14px}
.ma-profile2-list{display:flex;flex-direction:column;gap:0}
.ma-profile2-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-top:1px solid var(--bdr)}
.ma-profile2-row:first-child{border-top:none;padding-top:6px}
.ma-profile2-info{flex:1;min-width:0}
.ma-profile2-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}
.ma-profile2-p{font-size:12.5px;color:var(--muted);line-height:1.5}
.ma-profile2-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 18px;background:var(--surf);border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,color .12s}
.ma-profile2-btn.mail-sent{background:var(--brand-bg2);color:var(--brand-dd);border:1px solid #7DD3FC}
.ma-profile2-btn.mail-sent:hover{background:#7DD3FC}
.ma-profile2-btn.add-action{background:var(--surf);color:var(--brand);border:1.5px solid var(--brand)}
.ma-profile2-btn.add-action:hover{background:var(--brand);color:#fff}

/* Dashboard tab switcher (Analytics / Quick Links) */
.ma-dash-tabs{display:flex;justify-content:center;gap:0;margin:8px 0 18px;background:var(--surf);border:1px solid var(--bdr);border-radius:24px;padding:3px;width:fit-content;margin-left:auto;margin-right:auto;box-shadow:var(--shadow)}
.ma-dash-tab{padding:9px 30px;border:none;background:transparent;border-radius:22px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.ma-dash-tab.active{background:var(--brand);color:#fff}
.ma-dash-tab:hover:not(.active){color:var(--text)}

/* Quick Links grid */
.ma-ql-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.ma-ql-tile{background:var(--surf);border:1px solid var(--bdr);border-radius:10px;padding:20px 14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:var(--shadow);min-height:108px;justify-content:center}
.ma-ql-tile:hover{background:var(--brand);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.18)}
.ma-ql-tile:hover .ma-ql-icon,.ma-ql-tile:hover .ma-ql-lbl{color:#fff}
.ma-ql-icon{color:var(--brand);transition:color .15s}
.ma-ql-icon svg{width:28px;height:28px}
.ma-ql-lbl{font-size:12.5px;font-weight:600;color:var(--text);transition:color .15s;line-height:1.25}

/* v3.9.371 — Grouped Quick Links: section headers group related tiles
   (Sales, Purchases, Reports, etc.) matching the top nav's tab layout.
   With 63 tiles across 10 groups this keeps the pane scannable and
   navigable — same visual grammar as the top nav sub-menus. */
.ma-ql-section{ margin-bottom:22px }
.ma-ql-section:last-child{ margin-bottom:0 }
.ma-ql-section-hdr{
  font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin:4px 2px 10px;padding-left:2px;
  display:flex;align-items:center;gap:8px;
}
.ma-ql-section-hdr::after{
  content:"";flex:1;height:1px;background:var(--bdr);
  margin-left:4px;
}

@media (max-width:1024px){.ma-ql-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .ma-ql-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .ma-ql-tile{padding:14px 8px;min-height:90px;gap:6px}
  .ma-ql-icon svg{width:24px;height:24px}
  .ma-ql-lbl{font-size:11px}
  .ma-ql-section{margin-bottom:16px}
  .ma-ql-section-hdr{font-size:11px;margin-bottom:6px}
}
@media (max-width:400px){
  .ma-ql-grid{grid-template-columns:repeat(2,1fr)}
  .ma-ql-lbl{font-size:11.5px}
}
@media (max-width:480px){
  .ma-profile2-row{flex-direction:column;align-items:flex-start;gap:8px}
  .ma-profile2-btn{align-self:stretch;justify-content:center}
  .ma-dash-tab{padding:8px 24px;font-size:13px}
}

/* Bank-details / Business-info modal form */
.ma-bank-form{display:flex;flex-direction:column;gap:14px;margin:8px 0 18px}
.ma-bank-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:14px}
.ma-bank-row label{font-size:13px;color:var(--text);font-weight:500}
.ma-bank-row input,.ma-bank-row textarea{padding:9px 11px;border:1px solid var(--bdr);border-radius:6px;font-size:13.5px;width:100%;box-sizing:border-box;background:var(--surf);color:var(--text);font-family:inherit}
.ma-bank-row input:focus,.ma-bank-row textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-req{color:var(--red,#dc2626)}

@media (max-width:640px){
  .ma-bank-row{grid-template-columns:1fr;gap:4px}
  .ma-bank-row label{margin-bottom:0}
}

/* Dark mode */
html[data-theme="dark"] .ma-profile2-btn.mail-sent{background:var(--brand-dd);color:#7DD3FC;border-color:var(--brand-dd)}
html[data-theme="dark"] .ma-dash-tabs{background:var(--surf2)}
html[data-theme="dark"] .ma-ql-tile:hover{background:var(--brand-dd)}

/* ════════════════════════════════════════════════════════════
   v3.9.31 — Service Request status & priority pills
   ──────────────────────────────────────────────────────────── */
.sr-pill{display:inline-block;padding:4px 12px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;line-height:1.4}
.sr-st-recv {background:var(--brand-bg2);color:var(--brand-d)}
.sr-st-prog {background:var(--brand-bg);color:#92400e}
.sr-st-ready{background:var(--brand-bg2);color:var(--brand-dd)}
.sr-st-deliv{background:#f1f5f9;color:#64748b}
.sr-st-cncl {background:#fee2e2;color:#b91c1c;text-decoration:line-through}
.sr-pr-low  {background:#f1f5f9;color:#64748b}
.sr-pr-norm {background:#e0e7ff;color:#4338ca}
.sr-pr-high {background:#fed7aa;color:#9a3412}
.sr-pr-urg  {background:#fecaca;color:#991b1b}

/* Dark mode tweaks */
html[data-theme="dark"] .sr-st-recv {background:#1e3a8a;color:#bfdbfe}
html[data-theme="dark"] .sr-st-prog {background:#78350f;color:#fde68a}
html[data-theme="dark"] .sr-st-ready{background:var(--brand-dd);color:#7DD3FC}
html[data-theme="dark"] .sr-st-deliv{background:#1e293b;color:#cbd5e1}
html[data-theme="dark"] .sr-st-cncl {background:#7f1d1d;color:#fecaca}
html[data-theme="dark"] .sr-pr-low  {background:#1e293b;color:#cbd5e1}
html[data-theme="dark"] .sr-pr-norm {background:#312e81;color:#c7d2fe}
html[data-theme="dark"] .sr-pr-high {background:#7c2d12;color:#fed7aa}
html[data-theme="dark"] .sr-pr-urg  {background:#7f1d1d;color:#fecaca}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.32 — Service Request modal combo dropdowns + Multi-Currency item picker
══════════════════════════════════════════════════════════════════════════════ */

/* ─── SR modal: make sure the customer + item combo dropdowns escape the
       overflow:hidden of the modal body via position:fixed treatment.
       Style the priority/status selects to match the rest of the form. ─── */
.ma-bank-row .ma-combo-wrap{position:relative}
.ma-bank-row .ma-combo-drop{
  position:absolute !important;
  z-index:1100 !important;
  top:calc(100% + 4px) !important;
  left:0 !important;right:0 !important;
}

.ma-sr-select{
  width:100%;padding:9px 11px;
  border:1px solid var(--bdr);border-radius:6px;
  background:var(--surf);color:var(--text);
  font-size:13px;font-family:inherit;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:26px;
}
.ma-sr-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}

/* ─── MC Invoice: per-row combo dropdown styling ─── */
#mc-items-tbody .ma-combo-wrap{position:relative;width:100%}
#mc-items-tbody .ma-combo-input-row{
  display:flex;align-items:center;
  border:1px solid var(--bdr);border-radius:5px;
  background:var(--surf);
  transition:border-color .12s,box-shadow .12s;
}
#mc-items-tbody .ma-combo-input-row:focus-within{
  border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.10);
}
#mc-items-tbody .ma-combo-input-row input{
  flex:1;border:none !important;background:transparent !important;
  padding:7px 9px !important;font-size:12px !important;outline:none !important;
  color:var(--text) !important;
}
#mc-items-tbody .ma-combo-arrow{
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);font-size:11px;padding:0 8px;
}
#mc-items-tbody .ma-combo-drop{
  position:absolute !important;
  top:calc(100% + 3px) !important;left:0 !important;
  width:auto !important;min-width:280px !important;
  z-index:1100 !important;
  max-height:280px !important;
  background:var(--surf);
  border:1.5px solid var(--brand);
  border-radius:7px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  display:none;flex-direction:column;
  overflow:hidden;
}
#mc-items-tbody .ma-combo-drop.open{display:flex}
#mc-items-tbody .ma-combo-search{
  margin:6px;padding:6px 9px;font-size:12px;
  border:1px solid var(--bdr);border-radius:4px;
  background:var(--surf);color:var(--text);
}
#mc-items-tbody .ma-combo-list{flex:1;overflow-y:auto;max-height:230px}
#mc-items-tbody .ma-combo-opt{
  padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--bdr);
}
#mc-items-tbody .ma-combo-opt:last-child{border-bottom:none}
#mc-items-tbody .ma-combo-opt:hover{background:var(--surf2)}
#mc-items-tbody .ma-combo-opt-name{font-size:12.5px;font-weight:500;color:var(--text)}
#mc-items-tbody .ma-combo-opt-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
#mc-items-tbody .ma-combo-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px}

/* ════════════════════════════════════════════════════════════
   v3.9.33 — View Products / Services modal
   Sectioned key/value layout matching the GoGSTBill reference.
   Each section has an icon + title and a row-per-field grid.
   ──────────────────────────────────────────────────────────── */
.ma-pv-card{background:var(--surf);border-left:3px solid var(--brand);border-radius:8px;overflow:hidden}
.ma-pv-titlebar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--bdr);background:var(--surf)}
.ma-pv-title{font-size:15px;font-weight:600;color:var(--text)}
.ma-pv-actions{display:flex;align-items:center;gap:10px}
.ma-pv-x{background:transparent;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;border-radius:4px;transition:color .12s;font-family:inherit}
.ma-pv-x:hover{color:var(--text)}

.ma-pv-sec-hdr{display:flex;align-items:center;gap:10px;padding:22px 22px 12px;color:var(--text)}
.ma-pv-sec-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.ma-pv-sec-title{font-size:15px;font-weight:600}

/* Section field-grid: a single-column list of label / value rows
   with a thin top border that visually separates it from the section header */
.ma-pv-grid{padding:0;border-top:1px solid var(--bdr);margin:0 22px}
.ma-pv-row{display:grid;grid-template-columns:240px 1fr;align-items:start;gap:14px;padding:11px 0}
.ma-pv-lbl{color:var(--text);font-size:13px;font-weight:400}
.ma-pv-val{color:var(--text);font-size:13px;font-weight:500;min-width:0;word-break:break-word}

@media (max-width:760px){
  .ma-pv-titlebar{padding:12px 16px}
  .ma-pv-sec-hdr{padding:18px 16px 10px}
  .ma-pv-grid{margin:0 16px}
  .ma-pv-row{grid-template-columns:1fr 1fr;gap:8px;padding:9px 0;font-size:12.5px}
  .ma-pv-lbl,.ma-pv-val{font-size:12.5px}
}
@media (max-width:420px){
  .ma-pv-row{grid-template-columns:140px 1fr}
}

/* Dark-mode subtle adjustments */
html[data-theme="dark"] .ma-pv-card{border-left-color:#38BDF8}

/* ════════════════════════════════════════════════════════════
   v3.9.35 — Price List modal polish
   Clean card-based entry rows instead of a cramped table, so
   there's no horizontal scroll and the form looks balanced.
   ──────────────────────────────────────────────────────────── */
.pcl-active-row{margin-top:4px}
.pcl-active-lbl{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-weight:normal;line-height:1.45;color:var(--text);font-size:13px;text-transform:none;letter-spacing:0}
.pcl-active-lbl input[type=checkbox]{width:16px;height:16px;margin-top:2px;cursor:pointer;accent-color:var(--brand);flex-shrink:0}
.pcl-active-lbl b{color:var(--text);font-weight:600}

/* Add-entry strip above the entries list */
.pcl-add-row{display:flex;align-items:flex-end;gap:10px;margin-top:14px;padding:12px 14px;background:var(--surf2);border:1px solid var(--bdr);border-radius:9px}
.pcl-add-row-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pcl-add-row-left label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin:0}
.pcl-add-row-left select{padding:8px 11px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);font-size:13.5px;color:var(--text);width:100%;box-sizing:border-box;font-family:inherit}
.pcl-add-btn{padding:9px 18px;font-weight:600;flex-shrink:0;align-self:flex-end}

/* Entries list — card per entry, no horizontal scrolling */
.pcl-entries-card{margin-top:10px;background:var(--surf);border:1px solid var(--bdr);border-radius:9px;padding:10px;max-height:360px;overflow-y:auto}
.pcl-entries-list{display:flex;flex-direction:column;gap:8px}
.pcl-empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:13px}

.pcl-entry{display:grid;grid-template-columns:170px 1fr 130px 36px;gap:10px;align-items:end;padding:10px;background:var(--surf2);border:1px solid var(--bdr);border-radius:7px}
.pcl-entry-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.pcl-entry-lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pcl-entry select,.pcl-entry input[type="number"]{padding:8px 10px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);font-size:13px;color:var(--text);width:100%;box-sizing:border-box;font-family:inherit}
.pcl-entry select:focus,.pcl-entry input[type="number"]:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.pcl-entry-target .ma-combo-wrap{width:100%}
.pcl-entry-target .ma-combo-input-row input{width:100%;padding:8px 10px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);font-size:13px;box-sizing:border-box}
.pcl-entry-del{align-items:center;justify-content:center}
.pcl-entry-rm{width:36px;height:36px;border:none;background:transparent;color:var(--muted);border-radius:6px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;transition:background .12s,color .12s}
.pcl-entry-rm:hover{background:#fee2e2;color:#dc2626}

/* Pretty up the original .fg labels here too */
#pcl-name,#pcl-desc,#pcl-appl,#pcl-target{font-family:inherit}

@media (max-width:640px){
  .pcl-entry{grid-template-columns:1fr 1fr;gap:8px}
  .pcl-entry-mode{grid-column:1 / -1}
  .pcl-entry-del{grid-column:2;align-items:flex-end;justify-content:flex-end}
  .pcl-entry-del .pcl-entry-rm{align-self:center}
  .pcl-add-row{flex-direction:column;align-items:stretch;gap:8px}
  .pcl-add-btn{width:100%}
}

/* Dark mode */
html[data-theme="dark"] .pcl-entry-rm:hover{background:#7f1d1d;color:#fecaca}

/* ════════════════════════════════════════════════════════════
   v3.9.39 — Settings page redesign matching GoGSTBill reference
   ──────────────────────────────────────────────────────────── */

/* Section heading bar (white card with title at top) */
.ma-set2-sec-hdr{padding:14px 22px;font-size:14.5px;font-weight:700;color:var(--text);background:var(--surf);border:1px solid var(--bdr);border-bottom:none;border-top-left-radius:9px;border-top-right-radius:9px}
.ma-set2-sec-body{padding:18px 22px;background:var(--surf);border:1px solid var(--bdr);border-bottom-left-radius:9px;border-bottom-right-radius:9px;box-shadow:var(--shadow)}

/* Sub-section pill ("Logo and Signature Setting", "Header Print Setting", etc.) */
.ma-sub-pill{display:inline-block;padding:7px 16px;background:#e5e7eb;color:#1f2937;border-radius:6px;font-size:12.5px;font-weight:600;margin-bottom:14px;letter-spacing:.2px}
html[data-theme="dark"] .ma-sub-pill{background:#374151;color:#e5e7eb}

/* Checkbox row */
.ma-cb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);padding:6px 0;cursor:pointer;font-weight:500;line-height:1.4}
.ma-cb input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand);flex-shrink:0;margin:0}

/* Required asterisk */
.req{color:#dc2626;font-weight:600}

/* Membership cards (Free + Premium side by side) */
.ma-mb-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
.ma-mb-card{background:var(--surf);border:1px solid var(--bdr);border-radius:9px;padding:22px 18px}
.ma-mb-card-premium{background:linear-gradient(180deg,var(--brand) 0%,var(--brand) 64px,var(--surf) 64px,var(--surf) 100%)}
.ma-mb-card-premium .ma-mb-title{color:#fff}
.ma-mb-title{font-weight:700;color:var(--brand);text-align:center;letter-spacing:1px;font-size:13.5px;margin-bottom:14px}
.ma-mb-toggle{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.ma-mb-toggle button{padding:6px 16px;border-radius:18px;border:none;background:transparent;color:var(--text);font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:600}
.ma-mb-toggle button.active{background:var(--brand);color:#fff}
.ma-mb-save{background:#dc2626;color:#fff;padding:2px 7px;border-radius:4px;font-size:10.5px;margin-left:6px}
.ma-mb-price{font-size:30px;font-weight:700;text-align:center;color:var(--text);line-height:1.1}
.ma-mb-price small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px}
.ma-mb-feat{list-style:none;padding:0;margin:18px 0 0;font-size:12.5px;color:var(--text);line-height:1.9}
.ma-mb-feat li{color:var(--text)}
.ma-mb-feat-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* Credit pricing cards */
.ma-cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:6px}
.ma-cr-card{background:linear-gradient(180deg,var(--brand) 0%,var(--brand) 46px,var(--surf) 46px,var(--surf) 100%);border:1px solid var(--bdr);border-radius:9px;padding:0 0 18px;overflow:hidden;text-align:center}
.ma-cr-tag{padding:13px 8px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px}
.ma-cr-price{font-size:36px;font-weight:700;color:var(--text);padding:20px 0 6px}
.ma-cr-price small{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.ma-cr-card .ma-btn{margin:14px auto 0;display:inline-block;padding:7px 26px;border:1px solid var(--brand);color:var(--brand);background:transparent;font-weight:700}
.ma-credit-badge{float:right;background:var(--brand);color:#fff;padding:3px 14px;border-radius:14px;font-size:13px;font-weight:700}

/* WhatsApp radio cards */
.ma-wa-radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ma-wa-radio{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500}
.ma-wa-radio input[type="radio"]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
.ma-wa-radio:has(input:checked){border-color:var(--brand);background:#f0fdf4}
html[data-theme="dark"] .ma-wa-radio:has(input:checked){background:var(--brand-dd)}

/* Accordion (Print Template, Document Options) */
.ma-acc-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.ma-acc-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--surf);font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer;transition:background .12s}
.ma-acc-row + .ma-acc-row{border-top:1px solid var(--bdr)}
.ma-acc-row:hover{background:var(--surf2)}
.ma-acc-row.open{color:var(--brand);font-weight:700}
.ma-acc-plus{font-size:18px;font-weight:300;color:var(--muted)}
.ma-acc-row.open .ma-acc-plus{color:var(--brand);transform:rotate(45deg)}

/* Export table — keep aligned with the rest of ma-tbl */
.ma-export-tbl th.c, .ma-export-tbl td.c{text-align:center}
.ma-export-tbl input[type="checkbox"]{width:36px;height:20px;-webkit-appearance:none;appearance:none;background:#e5e7eb;border-radius:11px;position:relative;cursor:pointer;transition:background .15s;vertical-align:middle;margin:0}
.ma-export-tbl input[type="checkbox"]::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.ma-export-tbl input[type="checkbox"]:checked{background:var(--brand)}
.ma-export-tbl input[type="checkbox"]:checked::after{left:19px}

/* Floating "Save" button bar at the bottom of the settings body */
.ma-set2-savebar{position:sticky;bottom:14px;display:flex;justify-content:center;margin-top:24px;pointer-events:none;z-index:50}
.ma-set2-savebtn{pointer-events:auto;background:#0f172a;color:#fff;border:none;border-radius:8px;padding:10px 26px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 22px rgba(0,0,0,.18);font-family:inherit;transition:background .15s,transform .12s}
.ma-set2-savebtn:hover{background:#1e293b;transform:translateY(-1px)}
.ma-set2-savebtn svg{stroke:var(--brand)}

/* Pills */
.pill.p-success{background:var(--brand-bg2);color:var(--brand-dd)}
html[data-theme="dark"] .pill.p-success{background:var(--brand-dd);color:#7DD3FC}

/* Mobile */
@media (max-width:920px){
  .ma-set2{grid-template-columns:1fr}
  .ma-set2-nav{position:static;top:0}
  .ma-mb-grid,.ma-cr-grid,.ma-wa-radio-grid{grid-template-columns:1fr}
  .ma-mb-feat-2col{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   v3.9.39+ — Accordion expansion panels (Doc Options, Print Template)
   ──────────────────────────────────────────────────────────── */
.ma-acc-panel{background:var(--surf2);border-left:3px solid var(--brand);border-right:1px solid var(--bdr);padding:18px 20px;animation:maAccOpen .18s ease;border-bottom:1px solid var(--bdr)}
.ma-acc-list .ma-acc-row + .ma-acc-panel{border-top:none}
@keyframes maAccOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* v3.9.60 — Print Template accordion (Sale Invoice, Delivery Challan,
   Quotation, Proforma, Purchase Order, etc.). The OPEN row gets a green
   left strip that visually merges with the panel's existing left strip.
   The panel uses a transparent body so the gallery cards inside read as
   "floating" rather than nested in a tinted box. */
.ma-ptmpl-acc .ma-acc-row.open{border-left:3px solid var(--brand);padding-left:15px;background:var(--surf)}
.ma-acc-panel.ma-ptmpl-panel{background:var(--surf);padding:16px 20px 20px}
.ma-ptmpl-panel .ma-ptcard{border:1px solid var(--bdr)}

/* v3.9.61 — Print Options accordion: per-doc field-visibility toggles.
   Field groups stack vertically with a small header strip, and toggles
   within each group flow in a responsive 2-column grid. */
.ma-popt-acc .ma-acc-row.open{border-left:3px solid var(--brand);padding-left:15px;background:var(--surf)}
.ma-acc-panel.ma-popt-panel{background:var(--surf);padding:14px 20px 18px}
.ma-popt-group{margin-bottom:14px}
.ma-popt-group:last-child{margin-bottom:0}
.ma-popt-group-hdr{font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.3px;text-transform:uppercase;padding:6px 10px;background:var(--surf2);border-radius:5px;margin-bottom:8px;display:inline-block}
.ma-popt-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;padding:2px 4px}
@media (max-width:780px){.ma-popt-group-grid{grid-template-columns:1fr}}
.ma-popt-fld{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0;font-size:13px;color:var(--text);cursor:pointer}
.ma-popt-fld:hover{color:var(--brand)}
.ma-popt-fld-name{flex:1;min-width:0}

/* Sale Invoice — series + status sub-panels */
.ma-docopt-series-tbl input[type="text"]{padding:6px 9px;border:1px solid var(--bdr);border-radius:5px;font-size:12.5px;width:100%;box-sizing:border-box;background:var(--surf);color:var(--text);font-family:inherit}
.ma-docopt-series-tbl input[readonly]{background:var(--surf2);color:var(--muted)}
.ma-docopt-series-tbl th,.ma-docopt-series-tbl td{padding:7px 8px;font-size:12px}

/* iOS-style toggle for the Status column in the series table */
.ma-tog{display:inline-block;position:relative;width:34px;height:18px;cursor:pointer}
.ma-tog input{opacity:0;width:0;height:0}
.ma-tog span{position:absolute;inset:0;background:#cbd5e1;border-radius:11px;transition:.18s}
.ma-tog span::before{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ma-tog input:checked + span{background:var(--brand)}
.ma-tog input:checked + span::before{left:18px}
.ma-tog input:disabled + span{opacity:.6;cursor:not-allowed}

/* Status rows (color + label + remove) */
.ma-docopt-statuses{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;max-width:420px}
.ma-docopt-status-row{display:grid;grid-template-columns:50px 1fr 32px;gap:8px;align-items:center}
.ma-docopt-status-row input[type="color"]{width:50px;height:32px;padding:0;border:1px solid var(--bdr);border-radius:5px;cursor:pointer;background:var(--surf)}
.ma-docopt-status-row input[type="text"]{padding:7px 10px;border:1px solid var(--bdr);border-radius:5px;font-size:13px;background:var(--surf);color:var(--text);font-family:inherit}
.ma-docopt-st-rm{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;border-radius:5px;height:32px;font-family:inherit;transition:background .12s,color .12s}
.ma-docopt-st-rm:hover{background:#fee2e2;color:#dc2626}
html[data-theme="dark"] .ma-docopt-st-rm:hover{background:#7f1d1d;color:#fecaca}

/* ════════════════════════════════════════════════════════════
   v3.9.40 — Backup / Restore / Auto-Backup UI inside
   Settings → Export Data
   ──────────────────────────────────────────────────────────── */

/* Full-backup info card — small green checkmarked notes above the download button */
.ma-bk-info{display:flex;flex-direction:column;gap:6px;background:linear-gradient(135deg,var(--brand-bg) 0%,var(--surf) 70%);border:1px solid var(--brand-bg2);border-radius:8px;padding:12px 14px;margin-top:6px}
.ma-bk-info-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text);line-height:1.5}
.ma-bk-info-row svg{color:var(--brand);flex-shrink:0}
.ma-bk-info-row strong{color:#92400e;font-weight:700}
html[data-theme="dark"] .ma-bk-info{background:linear-gradient(135deg,#451a03 0%,var(--surf) 70%);border-color:#78350f}
html[data-theme="dark"] .ma-bk-info-row strong{color:var(--brand-bg2)}

/* Auto-backup schedule card — checkbox + frequency dropdown + time picker */
.ma-bk-sched{display:flex;flex-direction:column;gap:14px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;padding:14px 16px}
.ma-bk-tog{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);cursor:pointer;font-weight:500}
.ma-bk-tog input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.ma-bk-sched-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--text)}
.ma-bk-sched-row label{font-weight:500;color:var(--muted);margin:0}
.ma-bk-sched-row select,.ma-bk-sched-row input[type="time"]{padding:7px 11px;border:1px solid var(--bdr);border-radius:6px;background:var(--surf);color:var(--text);font-size:13px;font-family:inherit;min-width:115px}
.ma-bk-sched-row select:focus,.ma-bk-sched-row input[type="time"]:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ma-bk-sched-row .ma-btn{margin-left:auto}

/* Stored auto-backups list — header with the "Backup Now" pill on the right */
.ma-bk-list-hdr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px}
#ab-list-body{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
#ab-list-body > div + div{border-top:1px solid var(--bdr)}

/* Import-backup drop zone — dashed border with hover effect */
.ma-bk-import{border:2px dashed var(--bdr);border-radius:9px;padding:24px 18px;text-align:center;background:var(--surf2);display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .12s,border-color .12s}
.ma-bk-import:hover,.ma-bk-import.dragover,.ma-bk-import.drag-over{border-color:var(--brand);background:#f0fdf4}
html[data-theme="dark"] .ma-bk-import:hover,html[data-theme="dark"] .ma-bk-import.dragover,html[data-theme="dark"] .ma-bk-import.drag-over{background:var(--brand-dd)}
.ma-bk-import label.ma-btn{margin:0}

/* Import preview card — green-tinted box that appears once a file is parsed */
.ma-bk-preview{background:#f0fdf4;border:1px solid #7DD3FC;border-radius:8px;padding:14px 16px;margin-top:14px}
html[data-theme="dark"] .ma-bk-preview{background:var(--brand-dd);border-color:var(--brand)}

/* ════════════════════════════════════════════════════════════════════════════
   v3.9.41 — Print Template gallery (Settings → Print Template)
   Thumbnail cards with hover Preview / Select overlay.
══════════════════════════════════════════════════════════════════════════════ */
.ma-ptpl-hint{
  background:var(--brand-bg);border:1px solid #bfdbfe;border-radius:7px;
  padding:11px 14px;font-size:12.5px;color:#1e3a8a;line-height:1.55;
  margin-bottom:18px;
}
html[data-theme="dark"] .ma-ptpl-hint{background:#0c1f3d;border-color:#1e3a8a;color:#bfdbfe}

.ma-ptpl-group{margin-bottom:26px}
.ma-ptpl-group-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 2px 10px;margin-bottom:12px;border-bottom:1px solid var(--bdr);
}
.ma-ptpl-group-title{font-size:14px;font-weight:600;color:var(--text)}
.ma-ptpl-active-label{font-size:12px;color:var(--brand);font-weight:600}

.ma-ptpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}
.ma-ptpl-loading{
  grid-column:1 / -1;
  padding:30px;text-align:center;color:var(--muted);font-size:13px;
}

.ma-ptpl-card{
  border:2px solid var(--bdr);
  border-radius:9px;
  background:var(--surf);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ma-ptpl-card:hover{
  border-color:var(--brand);
  box-shadow:0 6px 18px rgba(37,99,235,.18);
  transform:translateY(-2px);
}
.ma-ptpl-card.active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

.ma-ptpl-thumb{
  position:relative;
  background:#f9fafb;
  aspect-ratio:210/280;
  display:flex;align-items:center;justify-content:center;
  padding:10px;
  overflow:hidden;
}
.ma-ptpl-thumb svg{
  width:100%;height:100%;
  display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  border-radius:3px;
}
.ma-ptpl-badge{
  position:absolute;top:8px;right:8px;
  background:var(--brand);color:#fff;
  padding:4px 9px;border-radius:99px;
  font-size:10.5px;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  letter-spacing:.3px;
}

/* Hover overlay with Preview + Select */
.ma-ptpl-hover{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  background:rgba(17,24,39,.62);
  opacity:0;
  transition:opacity .18s;
  pointer-events:none;
}
.ma-ptpl-card:hover .ma-ptpl-hover{opacity:1;pointer-events:auto}
.ma-ptpl-hover-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;
  font-size:12px;font-weight:600;
  border:none;border-radius:6px;
  cursor:pointer;
  background:#fff;color:#111;
  box-shadow:0 4px 10px rgba(0,0,0,.20);
  transition:transform .12s, background .12s;
}
.ma-ptpl-hover-btn:hover{transform:translateY(-1px)}
.ma-ptpl-hover-btn.preview{background:#fff;color:#111}
.ma-ptpl-hover-btn.preview:hover{background:#f3f4f6}
.ma-ptpl-hover-btn.select{background:var(--brand);color:#fff}
.ma-ptpl-hover-btn.select:hover{background:var(--brand)}
.ma-ptpl-hover-btn.select.is-active{background:#9ca3af;cursor:default}
.ma-ptpl-hover-btn.select.is-active:hover{transform:none}

.ma-ptpl-meta{padding:12px 14px;border-top:1px solid var(--bdr)}
.ma-ptpl-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.ma-ptpl-desc{font-size:11.5px;color:var(--muted);line-height:1.5}

/* Mobile: stack to 2 cols then 1 */
@media (max-width:760px){
  .ma-ptpl-grid{grid-template-columns:repeat(2, 1fr);gap:12px}
  .ma-ptpl-hover{opacity:1;pointer-events:auto;background:rgba(17,24,39,.45)}  /* always show on touch */
  .ma-ptpl-hover-btn{padding:7px 10px;font-size:11px}
}
@media (max-width:440px){
  .ma-ptpl-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   v3.9.44 — Search-row filter dropdown (SO/PO list status filter)
   plus order summary modal grid.
   ──────────────────────────────────────────────────────────── */
.ma-search-filter{padding:9px 13px;border:1.5px solid var(--bdr);border-radius:9px;font-size:13px;background:var(--surf);color:var(--text);outline:none;cursor:pointer;min-width:170px;font-family:inherit;flex-shrink:0}
.ma-search-filter:focus{border-color:var(--brand)}

.ma-osum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:14px}
.ma-osum-card{background:var(--surf2);border-radius:7px;padding:12px 14px;border:1px solid var(--bdr)}
.ma-osum-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ma-osum-val{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

@media (max-width:540px){
  .ma-search-row{flex-direction:column;align-items:stretch}
  .ma-search-filter{min-width:0;width:100%}
}

/* ════════════════════════════════════════════════════════════
   v3.9.46 — Settings → Print Template — new card layout
   Matches the GoGSTBill reference: a "Sale Invoice" / "Purchase
   Invoice" green strip at the top of each group, then two stacked
   cards (Invoice Header Type + Print Template grid).
   ──────────────────────────────────────────────────────────── */

.ma-ptgrp{display:flex;flex-direction:column;gap:14px}

/* Green strip header above each doc group */
.ma-ptgrp-strip{background:var(--brand);color:#fff;padding:9px 16px;border-radius:7px;font-weight:600;font-size:13.5px;letter-spacing:.3px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* The two stacked cards inside each group */
.ma-ptcard{background:var(--surf);border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.ma-ptcard-hdr{padding:11px 16px;border-bottom:1px solid var(--bdr);font-size:13px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;background:var(--surf2)}
.ma-ptcard-body{padding:18px}

/* "Template Editor" green button on the right of the Print Template hdr */
.ma-pt-editor-btn{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;transition:background .12s,transform .1s}
.ma-pt-editor-btn:hover{background:var(--brand);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.59 — Print Template section REDESIGN
   ─────────────────────────────────────────────────────────────────
   Matches the user-supplied WhatsApp video reference. Key changes:
     - 5-column card grid (responsive fallbacks for smaller widths)
     - Cleaner card visuals: 1px subtle border, smaller padding,
       softer shadow on hover, 2px green border + check badge for active
     - White overlay on hover (NOT dark) with two pill buttons stacked
       vertically (Preview + Select), matching the video
     - Same hover/active treatment for Invoice Header Type cards
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Invoice Header Type cards (Default / Designed / Letterpad) ─── */
.ma-pthdr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:560px}
.ma-pthdr-card{
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:6px;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
html[data-theme="dark"] .ma-pthdr-card{background:#1e293b;border-color:#334155}
.ma-pthdr-card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.ma-pthdr-card.active{border:2px solid var(--brand);padding:5px}
.ma-pthdr-card.active::before{
  content:"";
  position:absolute;
  top:-7px;left:-7px;
  width:24px;height:24px;
  background:var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
  border-radius:50%;
  z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.ma-pthdr-thumb{
  aspect-ratio:170/130;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9.5px;
  font-weight:600;
  color:#9ca3af;
  text-align:center;
  line-height:1.3;
  overflow:hidden;
}
html[data-theme="dark"] .ma-pthdr-thumb{background:#f8fafc}

/* Default header thumb — show a tiny ruled invoice */
.ma-pthdr-thumb.t-default{background:#fff;background-image:
  linear-gradient(180deg, transparent 0 17%, #d1d5db 17% calc(17% + 1px), transparent calc(17% + 1px) 32%, #fbbf24 32% calc(32% + 8px), transparent calc(32% + 8px) 50%, #d1d5db 50% calc(50% + 1px), transparent calc(50% + 1px) 100%);
  background-size:100% 100%;background-repeat:no-repeat}
.ma-pthdr-thumb.t-default::after{content:"";display:block;width:60%;height:30%;background:repeating-linear-gradient(180deg,#e5e7eb 0 1px,transparent 1px 5px);align-self:center}
/* Designed header thumb */
.ma-pthdr-thumb.t-designed{background:linear-gradient(135deg,var(--brand-bg2) 0%,#fff 100%);color:var(--brand-dd);font-weight:700;font-size:8.5px;padding:8px}
/* Letterpad header thumb — almost blank, faint diagonal lines */
.ma-pthdr-thumb.t-letterpad{background:repeating-linear-gradient(45deg,#fff 0 6px,#f3f4f6 6px 7px)}

.ma-pthdr-name{margin-top:8px;font-size:12.5px;font-weight:500;color:var(--text)}
.ma-pthdr-info{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:#374151;color:#fff;border-radius:50%;font-size:10px;font-weight:600;margin-left:3px;cursor:help;font-style:normal}

/* Hover overlay for header cards — same Preview/Select pattern as
   template cards below. Triggered via .ma-pthdr-hover when needed. */
.ma-pthdr-hover{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:rgba(255,255,255,.92);
  border-radius:8px;
  opacity:0;
  transition:opacity .18s;
  pointer-events:none;
}
.ma-pthdr-card:hover .ma-pthdr-hover{opacity:1;pointer-events:auto}

/* ═══ Print Template card grid — 5-column layout matching the video ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   v3.9.325 — REDESIGNED template gallery cards
   Persistent action buttons at the bottom (no more hover-only dropdown),
   prominent "SELECTED" ribbon on the active card, larger click-to-preview
   thumbnail area with a soft overlay hint.
════════════════════════════════════════════════════════════════════════════ */
.ma-pttpl-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
@media (max-width:1180px){.ma-pttpl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:820px){.ma-pttpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:480px){.ma-pttpl-grid{grid-template-columns:1fr;gap:14px}}

.ma-ptcard-tpl{
  position:relative;
  background:#ffffff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:0;
  cursor:default;
  transition:border-color .18s, box-shadow .18s, transform .14s;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html[data-theme="dark"] .ma-ptcard-tpl{background:#1E293B;border-color:#334155}
.ma-ptcard-tpl:hover{
  border-color:#93C5FD;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(15,23,42,.10);
}
.ma-ptcard-tpl.active{
  border:2px solid var(--brand);
  box-shadow:0 6px 20px rgba(37,99,235,.18);
}
.ma-ptcard-tpl.active:hover{ border-color:var(--brand-d); }

/* Ribbon across the top of the active card */
.ma-ptcard-ribbon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 10px;
  background:linear-gradient(90deg,var(--brand),var(--brand-d));
  color:#ffffff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.ma-ptcard-ribbon svg{ flex-shrink:0; }

/* Thumbnail area — takes up ~75% of card height */
.ma-ptcard-thumb-wrap{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  background:#F8FAFC;
}
.ma-ptcard-thumb{
  position:relative;
  aspect-ratio:198/265;
  background:#ffffff;
  overflow:hidden;
  transition:transform .3s ease;
}
html[data-theme="dark"] .ma-ptcard-thumb{background:#F8FAFC}
.ma-ptcard-thumb-wrap:hover .ma-ptcard-thumb{ transform:scale(1.04); }

/* Soft overlay hint appears on hover — encourages click-to-preview */
.ma-ptcard-thumb-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,23,42,.72) 100%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  padding:12px;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.ma-ptcard-thumb-wrap:hover .ma-ptcard-thumb-overlay{ opacity:1; }
.ma-ptcard-thumb-overlay svg{ flex-shrink:0; }

/* Footer row: label + persistent action buttons */
.ma-ptcard-foot{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 12px 12px;
  border-top:1px solid #F3F4F6;
  background:#ffffff;
}
html[data-theme="dark"] .ma-ptcard-foot{background:#1E293B;border-top-color:#334155}
.ma-ptcard-lbl{
  font-size:13.5px;
  font-weight:700;
  color:#111827;
  line-height:1.2;
  letter-spacing:-.1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-theme="dark"] .ma-ptcard-lbl{color:#F1F5F9}
.ma-ptcard-tpl.active .ma-ptcard-lbl{ color:var(--brand-d); }
.ma-ptcard-actions{
  display:flex;
  gap:6px;
  align-items:stretch;
}
.ma-ptcard-mini{
  width:34px;
  height:32px;
  border:1px solid #E5E7EB;
  background:#ffffff;
  border-radius:7px;
  color:#64748B;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color .12s, color .12s, background .12s;
  font-family:inherit;
}
.ma-ptcard-mini:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--brand-bg);
}
html[data-theme="dark"] .ma-ptcard-mini{background:#0F172A;border-color:#334155;color:#94A3B8}
.ma-ptcard-select{
  flex:1;
  height:32px;
  border:1px solid var(--brand);
  background:#ffffff;
  color:var(--brand);
  border-radius:7px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background .12s, color .12s, border-color .12s;
  font-family:inherit;
  letter-spacing:.2px;
}
.ma-ptcard-select:hover{ background:var(--brand); color:#ffffff; }
.ma-ptcard-select.is-active{
  background:var(--brand);
  color:#ffffff;
  border-color:var(--brand);
  cursor:default;
}
.ma-ptcard-select.is-active:hover{ background:var(--brand-d); border-color:var(--brand-d); }
.ma-ptcard-select svg{ flex-shrink:0; }

/* ══════════ END v3.9.325 template gallery redesign ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.327 — Mobile header cleanup + mobile drawer dark theme + dark-mode
   text-visibility fixes
   ────────────────────────────────────────────────────────────────────────
   Bundles three related fixes:

   1) Mobile topbar (≤720px) — hide the extra buttons that were pushing the
      layout so only what matters is visible: company name, Create button
      and the profile avatar. F.Y., notifications, shortcuts, theme, the
      search input and Ask AI all get moved off the mobile header (they're
      still reachable from the side menu / their normal in-page paths).

   2) Mobile side drawer (≤720px) — dark navy styling on the CORRECT
      class names this time (.ma-msec-*, not .ma-nav-lnk). Previous
      v3.9.326 targeted the desktop sidebar's .ma-nav-lnk classes which
      never existed in the mobile drawer, so the styling never applied.
      Also removes the trailing spacer that was pushing the "Notification"
      item off the bottom of the scroll area.

   3) Dark-mode text-visibility overrides for recent components (KPI,
      Outstanding, Template gallery, header search, Ask AI button).
════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Mobile topbar cleanup ── */
@media (max-width:720px){
  /* Hide non-essential topbar items so the mobile header is not cramped */
  .ma-hd-fy,
  .ma-hd-fy-wrap,
  .ma-fy-wrap,
  .ma-topbar-search-wrap,
  .ma-ask-ai-btn,
  #ma-notif-btn,
  #ma-hd-shortcuts,
  #ma-hd-theme,
  .ma-hd-notif,
  .ma-hd-shortcuts,
  .ma-hd-theme,
  .ma-topbar-clock,
  .ma-topbar-type,
  .ma-topbar-user,
  .ma-logout-txt,
  .ma-gst-tag,
  .ma-cs-add-link{
    display:none !important;
  }
  /* Topbar layout — hamburger + logo/company + spacer + create + avatar */
  .ma-topbar{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 12px !important;
    height:56px !important;
  }
  .ma-topbar-logo{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .ma-topbar-biz{
    font-size:14px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    min-width:0;
  }
  .ma-topbar-right{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
  /* Create button — icon-only pill */
  .ma-hd-create{
    padding:8px 10px !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.24) !important;
    border-radius:8px !important;
    color:#fff !important;
  }
  .ma-hd-create .ma-hd-create-txt,
  .ma-hd-create .ma-create-caret{ display:none !important; }
  .ma-create-wrap{ display:inline-block !important; }
  /* Profile avatar — always visible on mobile */
  .ma-hd-avatar{
    width:34px !important;
    height:34px !important;
    font-size:12px !important;
    display:inline-flex !important;
  }
}

/* ── 2. Mobile drawer — dark-mode-ONLY overrides (v3.9.407 fix: gated on html[data-theme="dark"] so light-mode users no longer see dark drawer) ── */
@media (max-width:720px){
  html[data-theme="dark"] .ma-sidebar {
    background:#0F172A !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
    box-shadow:6px 0 30px rgba(0,0,0,.4) !important;
    padding-bottom:20px !important;         /* was 74px — was clipping last item */
  }
  html[data-theme="dark"] .ma-sidebar-header {
    background:linear-gradient(180deg,#1E293B,#0F172A) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  html[data-theme="dark"] .ma-sidebar-header .ma-auth-logo > div:last-child {
    color:#F1F5F9 !important;
  }
  html[data-theme="dark"] .ma-sidebar-close {
    color:#94A3B8 !important;
  }
  html[data-theme="dark"] .ma-sidebar-close:hover {
    color:#F1F5F9 !important;
    background:rgba(255,255,255,.06) !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-list {
    padding:12px 10px 32px !important;
    gap:5px !important;
  }
  /* Section card */
  html[data-theme="dark"] .ma-sidebar .ma-msec {
    background:rgba(255,255,255,.04) !important;
    border-radius:10px !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec.open {
    background:rgba(37,99,235,.14) !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-hdr {
    color:#E2E8F0 !important;
    padding:13px 14px !important;
    font-weight:500;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-hdr:hover {
    opacity:1 !important;
    background:rgba(255,255,255,.03) !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-ico {
    color:#94A3B8 !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec.open .ma-msec-ico {
    color:#60A5FA !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-lbl {
    color:#E2E8F0 !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec.open .ma-msec-lbl {
    color:#93C5FD !important;
    font-weight:700;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec-chev {
    color:#64748B !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msec.open .ma-msec-chev {
    color:#60A5FA !important;
  }
  /* Removed section-lock styling — sections are no longer locked, but keep
     the rule in case any dynamic content adds .ma-msec-lock somewhere */
  html[data-theme="dark"] .ma-sidebar .ma-msec-lock {
    background:rgba(255,255,255,.06) !important;
    color:#94A3B8 !important;
  }
  /* Section body */
  html[data-theme="dark"] .ma-sidebar .ma-msec-body {
    padding:2px 12px 12px 42px !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msub-lnk {
    color:#CBD5E1 !important;
    font-size:13px !important;
    padding:8px 6px !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msub-lnk:hover,
  html[data-theme="dark"] .ma-sidebar .ma-msub-lnk:active {
    background:rgba(37,99,235,.16) !important;
    color:#FFFFFF !important;
  }
  html[data-theme="dark"] .ma-sidebar .ma-msub-bullet {
    color:#64748B !important;
  }
  /* Notification badge on Notification menu row */
  html[data-theme="dark"] .ma-sidebar .ma-msec-badge {
    background:#EF4444 !important;
    color:#FFFFFF !important;
    box-shadow:0 0 0 2px rgba(239,68,68,.20) !important;
  }
  /* Backdrop */
  html[data-theme="dark"] .ma-sidebar-overlay,
  html[data-theme="dark"] #ma-sidebar-overlay {
    background:rgba(0,0,0,.55) !important;
  }
  /* Make sure the drawer scrolls smoothly and the last item is reachable */
  html[data-theme="dark"] .ma-sidebar {
    -webkit-overflow-scrolling:touch !important;
    overflow-y:auto !important;
  }
}

/* ── 3. Dark-mode component overrides (for site's dark theme, all viewports) ── */
html[data-theme="dark"] .ma-kpi3-card{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-kpi3-card:hover{
  border-color:#3F4B5F !important;
  box-shadow:0 4px 14px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .ma-kpi3-label,
html[data-theme="dark"] .ma-kpi3-amt,
html[data-theme="dark"] .ma-kpi3-metric-val{ color:var(--text) !important; }
html[data-theme="dark"] .ma-kpi3-sub,
html[data-theme="dark"] .ma-kpi3-metric-lbl,
html[data-theme="dark"] .ma-kpi3-dot{ color:var(--muted) !important; }
html[data-theme="dark"] .ma-kpi3-metrics{ border-top-color:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .ma-kpi3-badge{ background:rgba(37,99,235,.16) !important; }
html[data-theme="dark"] .ma-kpi3-purchase .ma-kpi3-badge{ background:rgba(124,58,237,.18) !important; }
html[data-theme="dark"] .ma-kpi3-expense .ma-kpi3-badge{ background:rgba(245,158,11,.18) !important; }
html[data-theme="dark"] .ma-kpi3-trend{ background:rgba(37,99,235,.18) !important; color:#93C5FD !important; }
html[data-theme="dark"] .ma-kpi3-trend.down{ background:rgba(239,68,68,.16) !important; color:#FCA5A5 !important; }
html[data-theme="dark"] .ma-kpi3-trend.flat{ background:rgba(255,255,255,.06) !important; color:#94A3B8 !important; }
html[data-theme="dark"] .d2-mini-baseline{ stroke:rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .d2-mini-lbl,
html[data-theme="dark"] .d2-mini-yr{ fill:#94A3B8 !important; }
html[data-theme="dark"] .ma-dash2-tc-tip{
  background:#0B1220 !important;
  color:#F1F5F9 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.5) !important;
}

/* Outstanding cards — dark mode */
html[data-theme="dark"] .ma-oc2{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-oc2-title,
html[data-theme="dark"] .ma-oc2-amt,
html[data-theme="dark"] .ma-oc2-cell-amt{ color:var(--text) !important; }
html[data-theme="dark"] .ma-oc2-meta,
html[data-theme="dark"] .ma-oc2-amt-lbl,
html[data-theme="dark"] .ma-oc2-cell-lbl,
html[data-theme="dark"] .ma-oc2-cell-pct{ color:var(--muted) !important; }
html[data-theme="dark"] .ma-oc2-meta span{ color:var(--text) !important; }
html[data-theme="dark"] .ma-oc2-bar{ background:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .ma-oc2-cell{ background:rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .ma-oc2-cell:hover{ background:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .ma-oc2-status{ background:rgba(255,255,255,.06) !important; color:#94A3B8 !important; }

/* Template gallery cards — dark mode */
html[data-theme="dark"] .ma-ptcard-tpl{ background:var(--surf) !important; border-color:var(--bdr) !important; }
html[data-theme="dark"] .ma-ptcard-tpl:hover{ border-color:#3F4B5F !important; box-shadow:0 8px 22px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .ma-ptcard-thumb-wrap{ background:var(--surf3) !important; }
html[data-theme="dark"] .ma-ptcard-foot{ background:var(--surf) !important; border-top-color:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .ma-ptcard-lbl{ color:var(--text) !important; }
html[data-theme="dark"] .ma-ptcard-tpl.active .ma-ptcard-lbl{ color:#93C5FD !important; }
html[data-theme="dark"] .ma-ptcard-mini{ background:transparent !important; border-color:var(--bdr) !important; color:var(--muted) !important; }
html[data-theme="dark"] .ma-ptcard-mini:hover{ background:rgba(37,99,235,.14) !important; border-color:var(--brand) !important; color:#93C5FD !important; }
html[data-theme="dark"] .ma-ptcard-select{ background:transparent !important; color:#93C5FD !important; }
html[data-theme="dark"] .ma-ptcard-select:hover{ background:var(--brand) !important; color:#ffffff !important; }

/* Header search dropdown — dark mode */
html[data-theme="dark"] .ma-search-results{ background:var(--surf) !important; border-color:var(--bdr) !important; box-shadow:0 10px 30px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .ma-search-sec{ border-top-color:rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .ma-search-sec-h{ color:var(--hint) !important; }
html[data-theme="dark"] .ma-search-item{ color:var(--text) !important; }
html[data-theme="dark"] .ma-search-item:hover,
html[data-theme="dark"] .ma-search-item.focus{ background:rgba(37,99,235,.14) !important; color:#93C5FD !important; }
html[data-theme="dark"] .ma-search-item-ico{ background:var(--surf3) !important; color:var(--muted) !important; }
html[data-theme="dark"] .ma-search-item:hover .ma-search-item-ico,
html[data-theme="dark"] .ma-search-item.focus .ma-search-item-ico{ background:rgba(37,99,235,.22) !important; color:#93C5FD !important; }
html[data-theme="dark"] .ma-search-item-meta{ color:var(--hint) !important; }
html[data-theme="dark"] .ma-search-empty{ color:var(--hint) !important; }
html[data-theme="dark"] .ma-search-clear{ color:var(--muted) !important; }
html[data-theme="dark"] .ma-search-clear:hover{ background:var(--surf3) !important; color:var(--text) !important; }

/* Ask AI button — dark-mode inner surface */
html[data-theme="dark"] .ma-ask-ai-inner{ background:#0B1220 !important; color:#F1F5F9 !important; }

/* Also apply dark drawer styles inside the site's dark theme so mobile
   drawer stays consistent when the whole app is in dark mode */
html[data-theme="dark"] .ma-sidebar .ma-msec{
  background:rgba(255,255,255,.04) !important;
}
html[data-theme="dark"] .ma-sidebar .ma-msec.open{
  background:rgba(37,99,235,.14) !important;
}
html[data-theme="dark"] .ma-sidebar .ma-msec-hdr,
html[data-theme="dark"] .ma-sidebar .ma-msec-lbl{ color:#E2E8F0 !important; }
html[data-theme="dark"] .ma-sidebar .ma-msub-lnk{ color:#CBD5E1 !important; }
/* ══════════ END v3.9.327 mobile header + drawer + dark-mode fixes ══════════ */


/* ─── Mini thumbnails inside each card (faux invoice mockups) ─── */
.ptpl-thumb-inner{position:absolute;inset:0;padding:5px;display:flex;flex-direction:column;gap:2px;font-size:5px;line-height:1.2;color:#1f2937}

/* Template 1 mini (classic ruled) */
.ptpl-t1 .ptpl-c-hdr{display:flex;flex-direction:column;align-items:center;padding:3px 0;border:1px solid #6b7280;border-bottom:none;gap:2px}
.ptpl-t1 .ptpl-c-name{width:60%;height:5px;background:#1f2937;border-radius:1px}
.ptpl-t1 .ptpl-c-addr{width:80%;height:3px;background:#9ca3af;border-radius:1px}
.ptpl-t1 .ptpl-c-memo{display:flex;justify-content:space-between;align-items:center;padding:1.5px 3px;border:1px solid #6b7280;border-top:none;font-size:4.5px}
.ptpl-t1 .ptpl-c-memo span:not(.ptpl-c-title){display:block;width:18%;height:3px;background:#9ca3af;border-radius:1px}
.ptpl-t1 .ptpl-c-title{font-weight:700;font-size:4.5px;color:#1f2937}
.ptpl-t1 .ptpl-c-meta{display:grid;grid-template-columns:1fr 1fr;border:1px solid #6b7280;border-top:none}
.ptpl-t1 .ptpl-c-meta>div{height:14px;border-right:0.6px solid #6b7280}
.ptpl-t1 .ptpl-c-meta>div:last-child{border-right:none;background:#f3f4f6}
.ptpl-t1 .ptpl-c-thead{height:5px;background:var(--brand-bg2);border:1px solid #6b7280;border-top:none}
.ptpl-t1 .ptpl-c-rows{flex:1;display:flex;flex-direction:column;border:1px solid #6b7280;border-top:none;border-bottom:none}
.ptpl-t1 .ptpl-c-rows>div{flex:1;border-bottom:0.5px solid #d1d5db;display:flex;align-items:center;padding:0 3px}
.ptpl-t1 .ptpl-c-rows>div::before{content:"";display:block;width:78%;height:1.2px;background:#9ca3af}
.ptpl-t1 .ptpl-c-tot{height:8px;background:#fff;border:1px solid #6b7280;border-top:none;display:flex;align-items:center;justify-content:flex-end;padding:0 3px}
.ptpl-t1 .ptpl-c-tot::after{content:"";display:block;width:24%;height:1.5px;background:#1f2937}
.ptpl-t1 .ptpl-c-foot{display:grid;grid-template-columns:1.5fr 1fr;min-height:18px;border:1px solid #6b7280;border-top:none}
.ptpl-t1 .ptpl-c-foot>div{padding:2px 3px;border-right:0.6px solid #6b7280}
.ptpl-t1 .ptpl-c-foot>div:last-child{border-right:none}

/* Template 2 mini (GoGSTBill detailed) */
.ptpl-t2 .ptpl-top{display:flex;padding:3px 4px;gap:4px;border:1px solid #c7d2da;border-bottom:none;align-items:center}
.ptpl-t2 .ptpl-logo{width:14px;height:14px;background:linear-gradient(135deg,#3b82f6,var(--brand-dd));border-radius:2px;flex-shrink:0}
.ptpl-t2 .ptpl-tb{flex:1;display:flex;flex-direction:column;gap:1.5px}
.ptpl-t2 .ptpl-name{height:5px;background:#1f2937;border-radius:1px;width:60%}
.ptpl-t2 .ptpl-addr{height:2.5px;background:#9ca3af;border-radius:1px;width:90%}
.ptpl-t2 .ptpl-addr.s{width:65%}
.ptpl-t2 .ptpl-strip{display:flex;align-items:center;justify-content:space-between;padding:1.5px 4px;border:1px solid #c7d2da;font-size:4px;background:#fff}
.ptpl-t2 .ptpl-gst{display:block;width:24%;height:3px;background:#9ca3af;border-radius:1px}
.ptpl-t2 .ptpl-title{font-size:6px;font-weight:700;color:#1976d2;letter-spacing:.5px}
.ptpl-t2 .ptpl-orig{display:block;width:24%;height:3px;background:#9ca3af;border-radius:1px}
.ptpl-t2 .ptpl-trio{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #c7d2da;border-top:none}
.ptpl-t2 .ptpl-trio>div{display:flex;flex-direction:column;gap:1px;padding:1px 2px;border-right:0.5px solid #c7d2da}
.ptpl-t2 .ptpl-trio>div:last-child{border-right:none}
.ptpl-t2 .ptpl-th{height:2.5px;background:#cbd5e1;border-radius:1px}
.ptpl-t2 .ptpl-tl{height:1.5px;background:#e5e7eb;border-radius:1px;width:88%}
.ptpl-t2 .ptpl-thead{height:4px;background:#cbd5e1;border:1px solid #c7d2da;border-top:none}
.ptpl-t2 .ptpl-rows{flex:1;display:flex;flex-direction:column;border:1px solid #c7d2da;border-top:none;border-bottom:none}
.ptpl-t2 .ptpl-rows>div{flex:1;border-bottom:0.4px solid #e2e8ee;display:flex;align-items:center;padding:0 2px}
.ptpl-t2 .ptpl-rows>div:nth-child(odd){background:#fafbfc}
.ptpl-t2 .ptpl-rows>div::before{content:"";display:block;width:75%;height:1px;background:#cbd5e1}
.ptpl-t2 .ptpl-tot{height:5px;background:#eef3f8;border:1px solid #c7d2da;border-top:none}
.ptpl-t2 .ptpl-hsn{display:grid;grid-template-columns:1fr;gap:0;border:1px solid #c7d2da;border-top:none;min-height:7px}
.ptpl-t2 .ptpl-hsn>div{height:3px;background:linear-gradient(to right,#e5e7eb 40%,transparent 40%);border-bottom:0.4px solid #e2e8ee}
.ptpl-t2 .ptpl-foot{display:grid;grid-template-columns:1.2fr .8fr .8fr;border:1px solid #c7d2da;border-top:none;min-height:12px}
.ptpl-t2 .ptpl-bank{display:flex;flex-direction:column;gap:1px;padding:1.5px 2px;border-right:0.5px solid #c7d2da}
.ptpl-t2 .ptpl-bank span{height:1.5px;background:#cbd5e1;border-radius:1px;width:80%}
.ptpl-t2 .ptpl-bank span:last-child{width:60%}
.ptpl-t2 .ptpl-qr{background:#1f2937;background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 2px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 2px);border-right:0.5px solid #c7d2da;margin:1.5px}
.ptpl-t2 .ptpl-sig{background:linear-gradient(180deg,transparent 0 60%,#9ca3af 60% calc(60% + 0.5px),transparent calc(60% + 0.5px) 100%)}

/* Responsive — drop to two columns on narrow screens */
@media (max-width:780px){
  .ma-pttpl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .ma-pthdr-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
}

/* ════════════════════════════════════════════
   v3.9.68 — E-Way Bill page
   • Setup wizard card with 2 numbered steps
   • 5-up stat cards
   • API banner (manual-mode notice)
   Reuses existing list classes for the toolbar + table.
   ════════════════════════════════════════════ */

/* Wizard */
.ma-ewb-wizard{margin-top:8px}
.ma-ewb-wiz-card{
  background:#fff;border:1px solid var(--bdr);border-radius:12px;
  padding:24px 28px;max-width:880px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.ma-ewb-wiz-hdr{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.ma-ewb-wiz-ico{
  width:54px;height:54px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand-dd),#0e4a30);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.ma-ewb-wiz-title{font-size:18px;font-weight:700;color:#1f2937}
.ma-ewb-wiz-sub{font-size:13px;color:#64748b;margin-top:2px}
.ma-ewb-wiz-step{display:flex;gap:16px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px dashed #e5e7eb}
.ma-ewb-wiz-step:last-of-type{border-bottom:none;padding-bottom:0}
.ma-ewb-wiz-num{
  width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ma-ewb-wiz-step-body{flex:1;min-width:0}
.ma-ewb-wiz-step-title{font-size:15px;font-weight:600;color:#1f2937;margin-bottom:4px}
.ma-ewb-req{font-size:11px;background:#fee2e2;color:#b91c1c;padding:2px 7px;border-radius:10px;font-weight:600;margin-left:6px}
.ma-ewb-opt{font-size:11px;background:#e0e7ff;color:#4338ca;padding:2px 7px;border-radius:10px;font-weight:600;margin-left:6px}
.ma-ewb-wiz-step-help{font-size:13px;color:#64748b;margin-bottom:10px;line-height:1.55}
.ma-ewb-wiz-step-help code{background:#f1f5f9;padding:1px 6px;border-radius:3px;font-size:12px}
.ma-ewb-wiz-step-help a{color:var(--brand);text-decoration:underline}
.ma-ewb-wiz-help-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;margin:8px 0 12px;font-size:13px;color:#475569}
.ma-ewb-wiz-help-box ol{margin:0;padding-left:20px;line-height:1.7}
.ma-ewb-wiz-input{margin-top:8px}
.ma-ewb-wiz-input input{
  width:100%;max-width:380px;height:38px;font-size:14px;padding:7px 12px;
  border:1px solid #d1d5db;border-radius:5px;color:#1f2937;
}
.ma-ewb-wiz-input input:focus{border-color:var(--brand-dd);box-shadow:0 0 0 .15rem rgba(30,64,175,.15);outline:none}
.ma-ewb-wiz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:none}
.ma-ewb-wiz-grid2 label{display:block;font-size:12.5px;font-weight:600;color:#4b5563;margin-bottom:4px}
.ma-ewb-wiz-grid2 input{max-width:none;width:100%}
@media (max-width:680px){ .ma-ewb-wiz-grid2{grid-template-columns:1fr} }
.ma-ewb-wiz-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb}

/* Stat cards */
.ma-ewb-cards{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;margin-bottom:18px;
}
@media (max-width:1000px){ .ma-ewb-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .ma-ewb-cards{grid-template-columns:1fr} }
.ma-ewb-card{
  background:#fff;border:1px solid var(--bdr);border-radius:10px;
  padding:14px 16px;position:relative;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.ma-ewb-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.06);border-color:var(--brand)}
.ma-ewb-card-lbl{font-size:11.5px;color:#64748b;font-weight:600;letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px}
.ma-ewb-card-val{font-size:24px;font-weight:800;color:#1f2937;line-height:1}
.ma-ewb-card-ico{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#fff;opacity:.92;
}
.ma-ewb-card-ico.bg-b{background:#3b82f6}
.ma-ewb-card-ico.bg-g{background:#0EA5E9}
.ma-ewb-card-ico.bg-a{background:#f59e0b}
.ma-ewb-card-ico.bg-r{background:#dc2626}

/* API banner */
.ma-ewb-api-banner{
  background:var(--brand-bg);border:1px solid var(--brand-bg2);border-radius:8px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.ma-ewb-api-banner-ico{color:#a16207;flex-shrink:0}
.ma-ewb-api-banner-text{flex:1;font-size:13px;color:#713f12;line-height:1.5}
.ma-ewb-api-banner-text b{color:#422006}

/* Status badges (used in the table) */
.ma-ewb-badge{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:600;letter-spacing:.2px;
}
.ma-ewb-badge.draft     {background:#f1f5f9;color:#475569}
.ma-ewb-badge.active    {background:#E0F2FE;color:#0369A1}
.ma-ewb-badge.cancelled {background:#fee2e2;color:#b91c1c}
.ma-ewb-badge.failed    {background:#ffedd5;color:#9a3412}
.ma-ewb-badge.expired   {background:var(--brand-bg);color:#92400e}

/* ════════════════════════════════════════════════════════════════════
   v3.9.70 — Government-portal-styled E-Way Bill form
   Matches ewaybillgst.gov.in's "e-WayBill Entry Form" page 1:1:
     • blue title bar at top
     • dark-blue section header bars
     • horizontal radio strips for Supply Type / Sub Type / Mode
     • two-column Bill From + Dispatch From / Bill To + Ship To
     • item table with light-blue totals strip
     • centered PART-B sub-card
     • Preview · Submit · Exit buttons
   Also styles the E-Waybill Preview modal (matches the gov't preview).
   ════════════════════════════════════════════════════════════════════ */

.ma-ewb-gov-form{
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  background:#fff;color:#212529;
}
.ma-ewb-gov-form *{box-sizing:border-box}

/* Title bar (the light-blue strip at the very top) */
.ma-ewb-gov-title-bar{
  text-align:center;font-size:18px;font-weight:700;color:var(--brand-dd);
  background:linear-gradient(180deg,#dceeff 0%,#bfdcfb 100%);
  padding:10px 16px;border:1px solid #94c0ea;border-radius:4px;
  margin-bottom:8px;
}
.ma-ewb-gov-hint{
  text-align:right;font-size:11.5px;color:#475569;margin-bottom:14px;
}
.ma-ewb-dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin:0 2px}
.ma-ewb-dot.r{background:#dc2626}
.ma-ewb-dot.g{background:#0EA5E9}

/* Mode toggle bar */
.ma-ewb-mode-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;
  padding:10px 14px;margin-bottom:14px;
}
.ma-ewb-mode-lbl{font-size:13px;font-weight:600;color:#1f2937}
.ma-ewb-mode-pills{display:inline-flex;gap:0;border:1px solid #d1d5db;border-radius:6px;overflow:hidden}
.ma-ewb-mode-pill{
  background:#fff;color:#4b5563;border:none;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;
}
.ma-ewb-mode-pill:not(:last-child){border-right:1px solid #d1d5db}
.ma-ewb-mode-pill.on{background:var(--brand);color:#fff}
.ma-ewb-mode-hint{font-size:12px;color:#64748b;flex:1;text-align:right}

/* Section card */
.ma-ewb-gov-section{
  background:#fff;border:1px solid #cdd6e0;border-radius:4px;
  margin-bottom:12px;overflow:hidden;
}
.ma-ewb-gov-sec-h{
  background:var(--brand);color:#fff;padding:8px 14px;
  font-size:14px;font-weight:600;letter-spacing:.2px;
}
.ma-ewb-gov-sec-body{padding:12px 14px;background:#fff}

/* Two-column layout for Bill/Dispatch From, Bill/Ship To */
.ma-ewb-gov-twocol{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;
}
.ma-ewb-gov-twocol > .ma-ewb-gov-section{margin-bottom:0}
@media (max-width:780px){ .ma-ewb-gov-twocol{grid-template-columns:1fr} }

/* Field grids */
.ma-ewb-gov-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.ma-ewb-gov-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
@media (max-width:780px){
  .ma-ewb-gov-grid4{grid-template-columns:repeat(2,1fr)}
  .ma-ewb-gov-grid3{grid-template-columns:1fr}
}

/* Single field block */
.ma-ewb-gov-field label{
  display:block;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:3px;
}
.ma-ewb-gov-field input,
.ma-ewb-gov-field select,
.ma-ewb-gov-field textarea{
  width:100%;height:34px;font-size:13px;padding:5px 9px;
  border:1px solid #cdd6e0;border-radius:3px;color:#1f2937;background:#fff;
}
.ma-ewb-gov-field textarea{height:auto;min-height:54px;padding:7px 9px;line-height:1.4}
.ma-ewb-gov-field input:focus,
.ma-ewb-gov-field select:focus,
.ma-ewb-gov-field textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 .12rem rgba(44,91,156,.18)}

/* Field with label inline (used inside Bill From / Bill To columns) */
.ma-ewb-gov-field-row{
  display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;margin-bottom:8px;
}
.ma-ewb-gov-field-row label{
  font-size:12.5px;font-weight:600;color:#374151;text-align:right;
}
.ma-ewb-gov-field-row input,
.ma-ewb-gov-field-row select{
  width:100%;height:34px;font-size:13px;padding:5px 9px;
  border:1px solid #cdd6e0;border-radius:3px;color:#1f2937;background:#fff;
}
.ma-ewb-gov-field-row input:focus,
.ma-ewb-gov-field-row select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 .12rem rgba(44,91,156,.18)}

/* Supply Type + Sub Type strip */
.ma-ewb-gov-row-strip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;
}
.ma-ewb-gov-side-lbl{
  background:#eef2f5;border:1px solid #d1d5db;padding:7px 12px;
  font-size:12.5px;font-weight:600;color:var(--brand-dd);border-radius:2px;
  white-space:nowrap;
}
.ma-ewb-gov-radio-line{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ma-ewb-gov-radio-line label{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#1f2937;cursor:pointer;font-weight:500;
}
.ma-ewb-gov-radio-line input[type="radio"]{accent-color:var(--brand);width:14px;height:14px;margin:0}

/* Item Details table */
.ma-ewb-gov-items-wrap{padding:0 14px 12px;background:#fff;overflow-x:auto}
.ma-ewb-gov-items{
  width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;
}
.ma-ewb-gov-items thead th{
  background:#dceeff;color:var(--brand-dd);font-weight:600;
  padding:7px 8px;border:1px solid #94c0ea;font-size:12px;text-align:left;white-space:nowrap;
}
.ma-ewb-gov-items tbody td{
  padding:5px;border:1px solid #cdd6e0;background:#f1f7ff;
}
.ma-ewb-gov-items input,
.ma-ewb-gov-items select{
  height:30px;font-size:12.5px;padding:4px 6px;
  border:1px solid #cdd6e0;border-radius:2px;background:#fff;
}
.ma-ewb-gov-items input:focus,
.ma-ewb-gov-items select:focus{border-color:var(--brand);outline:none}
.ma-ewb-gov-prod-sel{width:100%;background:#fff;font-weight:600}
.ma-ewb-gov-add-btn{
  background:var(--brand);color:#fff;border:none;border-radius:18px;
  padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;
}
.ma-ewb-gov-add-btn:hover{background:#1f4675}
.ma-ewb-gov-del-btn{
  background:transparent;border:none;color:#dc2626;font-size:20px;line-height:1;
  cursor:pointer;padding:0 4px;font-weight:700;
}

/* Totals strip */
.ma-ewb-gov-totals{
  display:grid;grid-template-columns:repeat(8,1fr);gap:0;
  background:#dceeff;border:1px solid #94c0ea;border-radius:3px;
  margin-top:6px;padding:8px;
}
.ma-ewb-gov-totals > div{padding:4px 6px;font-size:11.5px}
.ma-ewb-gov-totals .lbl{font-weight:600;color:var(--brand-dd);margin-bottom:3px;line-height:1.2}
.ma-ewb-gov-totals input{
  width:100%;height:28px;font-size:12.5px;padding:4px 8px;text-align:right;font-weight:600;
  border:1px solid #94c0ea;border-radius:2px;background:#fff;color:var(--brand-dd);
}
@media (max-width:1100px){ .ma-ewb-gov-totals{grid-template-columns:repeat(4,1fr)} }
@media (max-width:600px){  .ma-ewb-gov-totals{grid-template-columns:repeat(2,1fr)} }

/* Auto-calculated PIN to PIN line */
.ma-ewb-gov-autopin{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-size:13px;color:#1f2937;margin-bottom:8px;
}
.ma-ewb-gov-autopin .num{
  background:#dceeff;color:var(--brand-dd);padding:3px 12px;font-weight:700;border-radius:3px;
  border:1px solid #94c0ea;font-size:14px;
}

/* PART-B sub-card */
.ma-ewb-gov-partb{
  max-width:640px;margin:14px auto 6px;
  background:#eef2f5;border:1px solid #cdd6e0;border-radius:4px;overflow:hidden;
}
.ma-ewb-gov-partb-h{
  background:#cbd5e1;color:var(--brand-dd);padding:6px 14px;font-size:13px;font-weight:700;letter-spacing:.3px;
}
.ma-ewb-gov-partb-body{padding:14px 18px}
.ma-ewb-gov-partb-row{
  display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;margin-bottom:10px;
}
.ma-ewb-gov-partb-row > label{font-size:13px;font-weight:600;color:#374151}
.ma-ewb-gov-partb-row input{
  height:32px;font-size:13px;padding:4px 9px;
  border:1px solid #cdd6e0;border-radius:3px;background:#fff;
}

/* EBN entry card */
.ma-ewb-gov-ebn-card{
  background:var(--brand-bg);border:1px dashed var(--brand-bg2);border-radius:4px;
  padding:12px 14px;margin-top:14px;
}
.ma-ewb-gov-ebn-h{font-size:12.5px;font-weight:600;color:#a16207;margin-bottom:10px}

/* Bottom buttons */
.ma-ewb-gov-actions{
  display:flex;justify-content:center;gap:12px;margin:16px 0 10px;
}
.ma-ewb-gov-btn{
  padding:8px 28px;font-size:13.5px;font-weight:600;color:#fff;
  border:none;border-radius:3px;cursor:pointer;letter-spacing:.3px;
}
.ma-ewb-gov-btn.preview{background:#1f6cb0}
.ma-ewb-gov-btn.preview:hover{background:#175894}
.ma-ewb-gov-btn.submit {background:var(--brand)}
.ma-ewb-gov-btn.submit:hover{background:#1f4675}
.ma-ewb-gov-btn.exit   {background:#dc2626}
.ma-ewb-gov-btn.exit:hover{background:#b91c1c}

.ma-ewb-gov-foot-note{
  text-align:center;background:var(--brand-bg);border:1px solid var(--brand-bg2);
  padding:8px 14px;border-radius:4px;font-size:12px;color:#713f12;
  max-width:560px;margin:6px auto 0;
}
.ma-ewb-gov-foot-note code{background:#fff;padding:1px 5px;border-radius:2px}

/* ── Preview modal ──────────────────────────────────────────────── */
.ma-ewb-preview{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:13px;color:#212529}
.ma-ewb-preview-title{
  text-align:center;font-size:18px;font-weight:700;color:var(--brand-dd);
  background:linear-gradient(180deg,#dceeff 0%,#bfdcfb 100%);
  padding:12px 16px;border:1px solid #94c0ea;border-radius:4px;margin-bottom:12px;
}
.ma-ewb-preview-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;padding:10px 14px;background:#fff;font-size:13px}
.ma-ewb-preview-addr{padding:10px 14px;background:#f8fafc;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;white-space:pre-line;color:#1f2937}
.ma-ewb-preview-items{width:100%;border-collapse:collapse;margin:6px 0}
.ma-ewb-preview-items th{background:#eef2f5;color:var(--brand-dd);padding:6px 8px;border:1px solid #cdd6e0;font-size:12px;text-align:left}
.ma-ewb-preview-items td{padding:6px 8px;border:1px solid #cdd6e0;font-size:12px;background:#fff}
.ma-ewb-preview-totline{
  background:#f8fafc;border:1px solid #cdd6e0;padding:10px 14px;
  font-size:12.5px;line-height:1.7;color:#1f2937;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.71 — Full-screen modal variant for the E-Way Bill entry form
   Triggered by openModal(html, 'full'). Replaces the centered popup
   with a flush-edge overlay that fills the viewport — easier to fit
   the 4-column transaction details + 10-column item table on smaller
   screens without horizontal scrolling.
   ════════════════════════════════════════════════════════════════════ */

/* The backdrop becomes opaque-white when full-screen is active */
.ma-modal-bg.ma-modal-bg-full{
  background:#f6f8fb;          /* light gray app-like background */
  padding:0;
  align-items:stretch;
  justify-content:stretch;
}

/* The full-screen modal panel fills the whole viewport */
.ma-modal-bg .ma-modal.ma-modal-full{
  width:100vw;
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  padding:18px 28px 28px;       /* generous inner padding */
  overflow:auto;                /* whole modal scrolls vertically */
  background:#f6f8fb;
}

/* Make sure the close X (if any) sits at the very top-right of the viewport */
.ma-modal-bg .ma-modal.ma-modal-full > :first-child{margin-top:0}

/* When full-screen, the EWB government form gets a max-width and centers
   itself so it doesn't look stretched on ultrawide monitors. */
.ma-modal-bg .ma-modal.ma-modal-full .ma-ewb-gov-form{
  max-width:1280px;
  margin:0 auto;
}

/* Phones: drop the side padding and let the form go edge-to-edge */
@media (max-width:680px){
  .ma-modal-bg .ma-modal.ma-modal-full{padding:10px 8px 14px}
  .ma-modal-bg .ma-modal.ma-modal-full .ma-ewb-gov-form{padding:0 4px}
  .ma-modal-bg .ma-modal.ma-modal-full .ma-ewb-gov-title-bar{font-size:15px;padding:8px 10px}
  .ma-modal-bg .ma-modal.ma-modal-full .ma-ewb-gov-sec-h{font-size:13px;padding:7px 11px}
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.72 — E-Way Bill list row: 4 explicit action buttons
   ────────────────────────────────────────────────────────────────────
   Replaces the Edit/View+▾ combo with 4 visible buttons + ▾ more menu:
   Edit · View · PDF · Print · ▾
   ════════════════════════════════════════════════════════════════════ */
.ma-ewb-row-acts{display:inline-flex;gap:4px;flex-wrap:nowrap;align-items:center}
.ma-ewb-row-act{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;font-size:11.5px;font-weight:600;
  background:#fff;border:1px solid #d1d5db;border-radius:4px;
  color:#4b5563;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.ma-ewb-row-act:hover{border-color:#9ca3af;color:#111}
.ma-ewb-row-act.edit:hover {background:var(--brand-bg);border-color:#3b82f6;color:var(--brand-dd)}
.ma-ewb-row-act.view:hover {background:var(--brand-bg);border-color:var(--brand);color:var(--brand-dd)}
.ma-ewb-row-act.pdf:hover  {background:#fef2f2;border-color:#ef4444;color:#991b1b}
.ma-ewb-row-act.print:hover{background:var(--brand-bg);border-color:#f59e0b;color:#92400e}
.ma-ewb-row-act.more{
  width:28px;padding:5px 0;justify-content:center;font-size:13px;color:#64748b;
}
.ma-ewb-row-act.more:hover{background:#f3f4f6;color:#111}
.ma-ewb-row-act svg{flex-shrink:0}
@media (max-width:780px){
  .ma-ewb-row-act span{display:none}   /* icons only on phones */
  .ma-ewb-row-act{padding:6px 8px}
}

/* Searchable item picker inside the EWB item table
   (uses the same .ma-combo-* classes as the sale invoice picker for the
   list items — we only style the trigger + drop wrapper here.) */
.ma-ewb-pick-wrap{position:relative;width:100%;min-width:160px}
.ma-ewb-pick-trigger{
  display:flex;align-items:center;gap:0;
  border:1px solid #cdd6e0;border-radius:3px;background:#fff;
  height:30px;cursor:pointer;
}
.ma-ewb-pick-trigger:focus-within{border-color:var(--brand);box-shadow:0 0 0 .12rem rgba(44,91,156,.15)}
.ma-ewb-pick-trigger input{
  flex:1;border:none;outline:none;background:transparent;
  padding:4px 8px;font-size:12.5px;font-family:inherit;color:#1f2937;
  width:100%;
}
.ma-ewb-pick-arrow{padding:0 8px;color:#94a3b8;font-size:11px;user-select:none}
.ma-ewb-pick-drop{
  display:none;
  /* v3.9.73 — position:fixed + dynamic top/left set by _ewbPositionDrop().
     z-index very high so it floats above the full-screen modal layer. */
  position:fixed;
  background:#fff;border:1px solid #cdd6e0;border-radius:4px;
  box-shadow:0 8px 24px rgba(15,23,42,.18);
  max-height:260px;overflow-y:auto;
  z-index:2147483000;
  min-width:300px;
}
.ma-ewb-pick-drop.open{display:block}

/* ════════════════════════════════════════════════════════════════════
   v3.9.74 — New "Create Quotation" layout (Go GST Bill / Diginest style)
   Two cards top (Customer Info | Quotation Detail), full-width item
   table, two-column bottom (Bank+Terms+Note | Totals+Actions).
   Scoped to .ma-qt-v2-page so the legacy DC/PL/PO/SO/proforma modals
   keep their existing styling.
   ════════════════════════════════════════════════════════════════════ */
.ma-qt-v2-page{
  font-family:Inter,'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#f4f6fa;color:#1f2937;padding:6px 0 22px;
}
.ma-qt-v2-page *{box-sizing:border-box}

.ma-qt-v2-crumb{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#1f2937;margin:0 0 14px 4px;
}
.ma-qt-v2-crumb svg{color:#64748b}

/* ── TOP grid (two cards) ─────────────────────────────────────────── */
.ma-qt-v2-top-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;
}
@media (max-width:980px){ .ma-qt-v2-top-grid{grid-template-columns:1fr} }

.ma-qt-v2-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:visible;
}
.ma-qt-v2-card-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 4px;font-size:14.5px;font-weight:600;color:#0f172a;
}
.ma-qt-v2-card-act{
  background:transparent;border:none;color:#94a3b8;font-size:18px;
  cursor:pointer;padding:0 4px;line-height:1;
}
.ma-qt-v2-card-act:hover{color:#0f172a}
.ma-qt-v2-card-body{padding:8px 18px 16px}

/* ── Form rows: label | input ─────────────────────────────────────── */
.ma-qt-v2-row{
  display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center;
  padding:6px 0;
}
.ma-qt-v2-row > label{
  font-size:13px;font-weight:500;color:#374151;
}
.ma-qt-v2-req{color:#dc2626;margin-left:2px}
.ma-qt-v2-row input[type="text"],
.ma-qt-v2-row input[type="number"],
.ma-qt-v2-row input[type="date"],
.ma-qt-v2-row select,
.ma-qt-v2-row textarea{
  width:100%;font-size:13.5px;padding:7px 10px;
  border:1px solid #d1d5db;border-radius:4px;background:#fff;color:#1f2937;
  font-family:inherit;
}
.ma-qt-v2-row input:focus,
.ma-qt-v2-row select:focus,
.ma-qt-v2-row textarea:focus{
  border-color:var(--brand);outline:none;box-shadow:0 0 0 .12rem rgba(37,99,235,.18);
}
.ma-qt-v2-row textarea{resize:vertical;line-height:1.45}

/* Quotation No. — prefix | number | postfix */
.ma-qt-v2-num-cells{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ── ITEMS card ────────────────────────────────────────────────────── */
.ma-qt-v2-items-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);margin-bottom:18px;overflow:hidden;
}
.ma-qt-v2-items-card .ma-qt-v2-card-h{padding:14px 18px}
.ma-qt-v2-discount-pills{
  display:flex;align-items:center;gap:10px;
}
.ma-qt-v2-discount-lbl{font-size:12.5px;color:#475569}
.ma-qt-v2-disc-toggle{
  display:inline-flex;border:1px solid #d1d5db;border-radius:14px;
  overflow:hidden;background:#f1f5f9;
}
.ma-qt-v2-disc-toggle button{
  padding:4px 14px;font-size:12.5px;font-weight:600;
  border:none;background:transparent;color:#475569;cursor:pointer;
}
.ma-qt-v2-disc-toggle button.on{background:var(--brand);color:#fff}

.ma-qt-v2-items-wrap{overflow-x:auto;padding:0 0 4px}
.ma-qt-v2-items{
  width:100%;border-collapse:collapse;font-size:12.5px;
}
.ma-qt-v2-items thead th{
  background:#f8fafc;color:#0f172a;font-weight:600;font-size:11.5px;
  letter-spacing:.3px;padding:10px 12px;text-align:left;
  border-bottom:1px solid #e5e7eb;
}
.ma-qt-v2-items tbody td{
  padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:top;
}
.ma-qt-v2-items-total-row td{
  background:var(--brand-bg);border-top:1px solid var(--brand-bg2);
  border-bottom:1px solid var(--brand-bg2) !important;padding:9px 12px;
}

/* ── BOTTOM grid (Bank/Terms/Note  |  Totals/Actions) ─────────────── */
.ma-qt-v2-bottom-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:flex-start;
}
@media (max-width:980px){ .ma-qt-v2-bottom-grid{grid-template-columns:1fr} }

.ma-qt-v2-left-col{padding:0 8px}
.ma-qt-v2-section-title{
  font-size:14px;font-weight:600;color:#0f172a;margin:14px 0 10px;
}
.ma-qt-v2-add-notes{
  margin-top:8px;background:#fff;border:1px solid #d1d5db;color:#374151;
  font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:18px;cursor:pointer;
}
.ma-qt-v2-add-notes:hover{background:#f9fafb;color:#0f172a}

.ma-qt-v2-right-col{padding:0 4px 0 14px;border-left:1px solid #e5e7eb;min-width:0}
.ma-qt-v2-tot-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-top:1px solid #e5e7eb;font-size:13.5px;color:#1f2937;
}
.ma-qt-v2-tot-row > span:first-child{color:#475569}
.ma-qt-v2-tot-row > span:last-child{font-weight:600}
.ma-qt-v2-grand{
  background:var(--brand-bg);margin:6px -8px;padding:9px 12px !important;
  border:1px solid var(--brand-bg2);border-radius:4px;
}
.ma-qt-v2-grand > span:first-child{color:#0f172a;font-weight:700}
.ma-qt-v2-grand > span:last-child{font-weight:800;font-size:15px;color:#0f172a}

/* Round-off toggle */
.ma-qt-v2-switch{
  display:inline-flex;width:34px;height:18px;background:#cbd5e1;border-radius:10px;
  position:relative;cursor:pointer;margin-left:6px;vertical-align:middle;
}
.ma-qt-v2-switch input{display:none}
.ma-qt-v2-switch-knob{
  position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;
  border-radius:50%;transition:left .15s,background .15s;
}
.ma-qt-v2-switch input:checked + .ma-qt-v2-switch-knob{left:18px}
.ma-qt-v2-switch input:checked ~ *,
.ma-qt-v2-switch:has(input:checked){background:var(--brand)}

.ma-qt-v2-suggest{margin-top:14px;border:1px solid #e5e7eb;border-radius:6px;background:#fff}
.ma-qt-v2-suggest-h{
  background:var(--brand);color:#fff;padding:7px 12px;font-size:12.5px;font-weight:600;
  border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;
}
.ma-qt-v2-suggest-h button{
  background:#fff;color:var(--brand);border:none;width:20px;height:20px;border-radius:3px;
  font-weight:700;cursor:pointer;
}
.ma-qt-v2-suggest-body{padding:10px 12px;font-size:12px;color:#475569}
.ma-qt-v2-suggest.collapsed .ma-qt-v2-suggest-body{display:none}

.ma-qt-v2-share{margin-top:12px;font-size:12.5px;color:#475569}
.ma-qt-v2-share label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}

.ma-qt-v2-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap;
}
.ma-qt-v2-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;font-size:13px;font-weight:600;border-radius:5px;cursor:pointer;
  border:1px solid #d1d5db;background:#fff;color:#374151;
}
.ma-qt-v2-btn:hover{background:#f3f4f6;color:#111}
.ma-qt-v2-btn.print{background:var(--brand);border-color:var(--brand);color:#fff}
.ma-qt-v2-btn.print:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.ma-qt-v2-btn.save {background:var(--brand);border-color:var(--brand);color:#fff}
.ma-qt-v2-btn.save:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

/* ════════════════════════════════════════════════════════════════════
   v3.9.76 — Quotation modal: keep the app bars visible
   ────────────────────────────────────────────────────────────────────
   The "+ New Quotation" form uses the ma-modal-full layout which would
   otherwise cover the topbar (58px) + tabnav (~50px) at the top and the
   mobile bottom-nav (62px) at the bottom. By adding the dedicated
   .ma-modal-bg-qt class on the backdrop (only for quotations), we leave
   room so users can still navigate using the tabs while editing.
   ════════════════════════════════════════════════════════════════════ */
.ma-modal-bg.ma-modal-bg-qt.ma-modal-bg-full{
  top: 110px;                /* topbar 58 + tabnav ~52 */
  z-index: 60;               /* below topbar (80) + tabnav (70) so they stay clickable */
}
.ma-modal-bg.ma-modal-bg-qt.ma-modal-bg-full .ma-modal.ma-modal-full{
  height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
}
@media (max-width:768px){
  .ma-modal-bg.ma-modal-bg-qt.ma-modal-bg-full{
    bottom: 62px;            /* don't cover the mobile bottom-nav */
  }
  .ma-modal-bg.ma-modal-bg-qt.ma-modal-bg-full .ma-modal.ma-modal-full{
    height: auto;
    max-height: calc(100vh - 110px - 62px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.76 — Quotation V2 item row: 10-cell layout matching the
   9-column header (SR / PRODUCT / HSN / QTY / UOM / PRICE / DISCOUNT
   / IGST / TOTAL) plus a narrow delete column.
   Mirrors the look of the sale-invoice items table.
   ════════════════════════════════════════════════════════════════════ */
/* v3.9.78 — Quotation V2 items: use table-layout:fixed with explicit column
   widths so PRODUCT no longer eats all the space and the other fields stay
   readable. The wrap div has overflow-x:auto so the table scrolls on narrow
   modals without squishing. */
.ma-qt-v2-items { table-layout:fixed; min-width:1080px; }
.ma-qt-v2-items thead th.qt-c-sr    { width:46px;  text-align:center }
.ma-qt-v2-items thead th.qt-c-name  { width:280px }
.ma-qt-v2-items thead th.qt-c-hsn   { width:110px }
.ma-qt-v2-items thead th.qt-c-qty   { width:88px }
.ma-qt-v2-items thead th.qt-c-uom   { width:88px }
.ma-qt-v2-items thead th.qt-c-price { width:110px }
.ma-qt-v2-items thead th.qt-c-disc  { width:100px }
.ma-qt-v2-items thead th.qt-c-tax   { width:92px }
.ma-qt-v2-items thead th.qt-c-total { width:120px; text-align:right }
.ma-qt-v2-items thead th.qt-c-del   { width:46px }

.ma-qt-v2-items tbody td input[type="text"],
.ma-qt-v2-items tbody td input[type="number"],
.ma-qt-v2-items tbody td select{
  width:100%; padding:6px 8px; font-size:12.5px;
  border:1px solid #d1d5db; border-radius:5px; background:#fff; color:#0f172a;
  height:32px; box-sizing:border-box;
}
.ma-qt-v2-items tbody td input:focus,
.ma-qt-v2-items tbody td select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-qt-v2-items tbody td.qt-cell-sr{
  text-align:center; font-weight:600; color:#475569; padding-top:14px;
}
.ma-qt-v2-items tbody td.qt-cell-total{
  text-align:right; font-weight:700; color:#0f172a; padding-top:14px;
}
.ma-qt-v2-items tbody td.qt-cell-del{
  text-align:center; vertical-align:middle;
}
.ma-qt-v2-items tbody td.qt-cell-del .ma-jw-del{
  width:26px; height:26px; padding:0; border-radius:5px;
  background:#fff; border:1px solid #fecaca; color:#dc2626;
  font-size:14px; cursor:pointer; line-height:1;
}
.ma-qt-v2-items tbody td.qt-cell-del .ma-jw-del:hover{
  background:#fee2e2; border-color:#fca5a5;
}

/* The item combo on quotation rows uses the same look as elsewhere. */
.ma-qt-v2-items .qt-item-combo{ position:relative; min-width:160px; }
.ma-qt-v2-items .qt-item-combo .ma-combo-input-row{
  display:flex; align-items:center; gap:0;
  border:1px solid #d1d5db; border-radius:5px; background:#fff;
  height:32px; overflow:hidden;
}
.ma-qt-v2-items .qt-item-combo .ma-combo-input-row:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-qt-v2-items .qt-item-combo .ma-combo-input-row input{
  flex:1; border:none !important; outline:none; height:30px !important;
  padding:0 8px; font-size:12.5px; background:transparent;
  box-shadow:none !important;
}
.ma-qt-v2-items .qt-item-combo .ma-combo-arrow{
  width:28px; height:32px; display:flex; align-items:center; justify-content:center;
  color:#64748b; cursor:pointer; user-select:none; font-size:12px;
  border-left:1px solid #e5e7eb; background:#f8fafc;
}
.ma-qt-v2-items .qt-item-combo .ma-combo-arrow:hover{ background:#f1f5f9; color:#0f172a; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.78 — Quotation V2: additional-charges list inside the
   right-column totals strip. Each row is label + amount + GST + ✕.
   ════════════════════════════════════════════════════════════════════ */
.qt-v2-charges{
  padding:8px 0 4px;border-top:1px dashed #e5e7eb;margin-top:2px;
}
.qt-v2-charges:empty{ display:none }
.qt-v2-charge-row{
  display:grid;grid-template-columns:1fr 88px 70px 28px;gap:6px;
  align-items:center;padding:5px 0;
}
.qt-v2-charge-row input,
.qt-v2-charge-row select{
  height:30px;font-size:12.5px;padding:4px 8px;
  border:1px solid #d1d5db;border-radius:5px;background:#fff;color:#0f172a;
  box-sizing:border-box;
}
.qt-v2-charge-row input:focus,
.qt-v2-charge-row select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg2);
}
.qt-v2-charge-row .qt-ch-del{
  width:26px;height:26px;padding:0;border-radius:5px;line-height:1;
  background:#fff;border:1px solid #fecaca;color:#dc2626;
  font-size:13px;cursor:pointer;
}
.qt-v2-charge-row .qt-ch-del:hover{ background:#fee2e2;border-color:#fca5a5; }

/* Make the round-off switch reliably clickable: the inner checkbox stays
   visually hidden but remains in the accessibility tree, and clicks on
   the label area are caught by the global document handler regardless. */
.ma-qt-v2-switch{ user-select:none; }
.ma-qt-v2-switch input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.79 — Quotation V2: polished M/S. + Phone No customer combos
   ────────────────────────────────────────────────────────────────────
   The markup was wired but the dropdown trigger looked unstyled because
   the .ma-combo-input-row / .ma-combo-arrow base rules didn't sit well
   inside the V2 grid rows. These rules give the combo the same look as
   any other field in the card.
   ════════════════════════════════════════════════════════════════════ */
.ma-qt-v2-row .ma-combo-wrap{ width:100%; min-width:0; }
.ma-qt-v2-row .ma-combo-input-row{
  display:flex; align-items:stretch; gap:0; width:100%;
  border:1px solid #d1d5db; border-radius:5px; background:#fff;
  overflow:hidden;
}
.ma-qt-v2-row .ma-combo-input-row:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-qt-v2-row .ma-combo-input-row input{
  flex:1; min-width:0; height:32px;
  padding:6px 8px; font-size:12.5px; color:#0f172a;
  border:none !important; border-radius:0 !important;
  background:transparent; outline:none; box-shadow:none !important;
  width:auto;
}
.ma-qt-v2-row .ma-combo-input-row .ma-combo-arrow{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:0; background:#f8fafc;
  border:none; border-left:1px solid #e5e7eb;
  border-radius:0; color:#64748b; font-size:12px;
  cursor:pointer; user-select:none;
}
.ma-qt-v2-row .ma-combo-input-row .ma-combo-arrow:hover{
  background:#f1f5f9; color:#0f172a;
}
/* Dropdown panel — float just under the input, full row width */
.ma-qt-v2-row .ma-combo-drop{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1.5px solid var(--brand); border-radius:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  z-index:1100; max-height:280px; overflow:hidden;
  display:none; flex-direction:column;
}
.ma-qt-v2-row .ma-combo-drop.open{ display:flex; }
.ma-qt-v2-row .ma-combo-drop .ma-combo-search{
  position:sticky; top:0; background:#fff; z-index:2;
  padding:8px 10px; border-bottom:1px solid #e5e7eb;
  font-size:12.5px; border-radius:7px 7px 0 0;
  height:32px; box-sizing:border-box; width:100%;
  border:none; outline:none;
}
.ma-qt-v2-row .ma-combo-drop .ma-combo-list{
  overflow-y:auto; flex:1; min-height:0; padding:4px;
}
.ma-qt-v2-row .ma-combo-drop .ma-combo-opt{
  padding:7px 10px; border-radius:5px; cursor:pointer;
  display:flex; justify-content:space-between; gap:8px;
}
.ma-qt-v2-row .ma-combo-drop .ma-combo-opt:hover,
.ma-qt-v2-row .ma-combo-drop .ma-combo-opt.hi{ background:#f1f5f9; }
.ma-qt-v2-row .ma-combo-drop .ma-combo-opt-name{
  font-weight:600; color:#0f172a; font-size:12.5px;
}
.ma-qt-v2-row .ma-combo-drop .ma-combo-opt-sub{
  font-size:11px; color:#64748b; margin-top:2px;
}
.ma-qt-v2-row .ma-combo-drop .ma-combo-empty{
  padding:14px 12px; text-align:center; color:#64748b; font-size:12px;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.80 — General Options: Logo & Signature image tiles
   Four "click to upload" tiles stacked vertically (one per row) — the
   reference design has the tiles arranged column-style, not in a wide
   grid, so the layout stays readable on any modal width.
   ════════════════════════════════════════════════════════════════════ */
.ma-img-grid{
  display:flex; flex-direction:column;
  gap:18px; padding:8px 4px 4px;
  max-width:560px;
}
.ma-img-tile-wrap{ display:flex; flex-direction:column; gap:6px; }
.ma-img-tile-toggle{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:#374151; cursor:pointer; padding:2px 0;
}
.ma-img-tile-toggle input[type="checkbox"]{
  width:14px; height:14px; cursor:pointer; accent-color:var(--brand);
}
.ma-img-tile-label{
  font-size:13px; font-weight:600; color:#0f172a;
}
.ma-img-tile{
  display:flex; align-items:center; justify-content:center;
  min-height:160px; padding:14px;
  border:1.5px dashed #cbd5e1; border-radius:8px;
  background:#f8fafc; cursor:pointer; position:relative;
  transition:border-color .12s, background .12s;
  overflow:hidden;
}
.ma-img-tile:hover{ border-color:var(--brand); background:#f0fdf4; }
.ma-img-tile.ma-img-tile-tall{ min-height:200px; }
.ma-img-tile img{
  max-width:100%; max-height:180px; width:auto; height:auto;
  object-fit:contain; display:block;
}
.ma-img-tile-empty{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  color:#64748b; pointer-events:none;
}
.ma-img-tile-empty svg{ margin-bottom:4px; }
.ma-img-tile-cta{ font-size:13px; font-weight:600; color:#0f172a; margin-top:4px; }
.ma-img-tile-meta{ font-size:11.5px; color:#64748b; line-height:1.4; }
.ma-img-tile-meta:first-of-type{ color:#1976d2; }
.ma-img-tile-remove{
  align-self:flex-start; margin-top:2px;
  padding:4px 10px; font-size:11.5px; font-weight:600;
  background:#fff; color:#dc2626;
  border:1px solid #fecaca; border-radius:5px; cursor:pointer;
}
.ma-img-tile-remove:hover{ background:#fee2e2; border-color:#fca5a5; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.83 — General Setting card (redesigned to match reference)
   Compact checkbox-list layout: green checkbox on the left, label
   on the right, dropdowns / textareas inline below their label.
   "General Setting" is shown as a small pill/tab at the top of the card.
   ════════════════════════════════════════════════════════════════════ */
.ma-gen-card{
  position:relative;
  padding:0;                     /* let the inner form supply its own padding */
  overflow:hidden;
}
.ma-gen-tab-label{
  display:inline-block;
  background:#f1f5f9; color:#0f172a;
  font-size:13px; font-weight:600;
  padding:8px 18px;
  border-bottom:1px solid #e5e7eb;
  border-radius:8px 8px 0 0;
}
.ma-gen-form{
  display:flex; flex-direction:column; gap:14px;
  padding:18px 22px 22px;
}

/* Checkbox-style settings rows */
.ma-gen-check{
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; user-select:none;
  font-size:13.5px; color:#0f172a; line-height:1.5;
}
.ma-gen-check input[type="checkbox"]{
  width:16px; height:16px; flex-shrink:0;
  margin-top:2px; cursor:pointer;
  accent-color:var(--brand);          /* green when checked, supported everywhere modern */
}
.ma-gen-check span{ flex:1; }
.ma-gen-check:hover span{ color:var(--brand-dd); }

/* (?) help icon shown next to "Search Products by Any Word" */
.ma-gen-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:4px;
  color:#94a3b8; cursor:help; flex-shrink:0;
}
.ma-gen-info:hover{ color:#0f172a; }

/* Labelled dropdown / textarea field block */
.ma-gen-field{ display:flex; flex-direction:column; gap:6px; }
.ma-gen-field-lbl{
  font-size:12.5px; font-weight:500; color:#374151;
}
.ma-gen-select, .ma-gen-input{
  height:36px; max-width:280px;
  padding:6px 12px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-gen-select:focus, .ma-gen-input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-gen-textarea{
  width:100%; max-width:520px;
  padding:8px 12px; font-size:13px;
  color:#0f172a; border:1px solid #d1d5db; border-radius:6px;
  background:#fff; resize:vertical; min-height:60px;
  font-family:inherit; box-sizing:border-box;
}
.ma-gen-textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}

/* "Note: ... tags ..." hint block under File format */
.ma-gen-hint{
  width:100%; max-width:520px;
  font-size:12px; color:#475569;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-top:4px;
}
.ma-gen-hint code{
  background:#f1f5f9; color:#475569;
  padding:2px 8px; border-radius:4px;
  font-family:Menlo, Consolas, monospace; font-size:11.5px;
  margin:0;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.85 — Small explanatory hint shown under Number Setting dropdowns
   (E-Invoice / E-Way Bill support notes). Quieter than the file-format
   tag hint — single line, muted text colour.
   ════════════════════════════════════════════════════════════════════ */
.ma-gen-hint-small{
  font-size:11.5px; color:#64748b; line-height:1.5;
  margin-top:2px; max-width:520px;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.88 — Indented sub-group used under "Enable Strict Mode" to list
   the five document types that should enforce serial-number entry.
   ════════════════════════════════════════════════════════════════════ */
.ma-gen-subgroup{
  display:flex; flex-direction:column; gap:10px;
  margin:4px 0 0 26px; padding:8px 12px;
  border-left:2px solid #e5e7eb; background:#fafafa;
  border-radius:0 6px 6px 0;
}
.ma-gen-subgroup .ma-gen-check{ font-size:13px; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.89 — Batch Setting table (Field Name / Batch Type / Status /
   Required / Print / Input Option). Looks like a settings grid, with
   small pill-style toggle switches inline.
   ════════════════════════════════════════════════════════════════════ */
.ma-batch-table-wrap{ padding:18px 22px 22px; overflow-x:auto; }
.ma-batch-table{
  width:100%; border-collapse:collapse;
  font-size:13px; color:#0f172a;
}
.ma-batch-table thead th{
  text-align:left; font-weight:600; font-size:12.5px; color:#475569;
  padding:0 12px 10px; border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}
.ma-batch-table thead th.ma-bt-tog,
.ma-batch-table thead th.ma-bt-input{ text-align:center; }
.ma-batch-table tbody td{
  padding:12px; vertical-align:middle;
  border-bottom:1px solid #f1f5f9;
}
.ma-batch-table tbody tr:last-child td{ border-bottom:none; }
.ma-batch-table .ma-bt-tog{ width:80px; }
.ma-batch-table .ma-bt-type{ width:120px; }
.ma-batch-table .ma-bt-input{ width:160px; }
.ma-batch-table td.ma-batch-na{ color:#cbd5e1; text-align:center; }

.ma-batch-input{
  width:100%; max-width:220px; height:34px;
  padding:6px 10px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-batch-input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-batch-type{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:#475569;
}
.ma-batch-type-date{ color:#0369a1; }
.ma-batch-type svg{ flex-shrink:0; opacity:.85; }

.ma-batch-select{
  width:100%; max-width:140px; height:32px;
  padding:4px 10px; font-size:12.5px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-batch-select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}

/* Compact toggle pill used in the table */
.ma-batch-toggle{
  position:relative; display:inline-block;
  width:34px; height:18px; cursor:pointer; user-select:none;
}
.ma-batch-toggle input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.ma-batch-slider{
  position:absolute; inset:0;
  background:#cbd5e1; border-radius:11px;
  transition:background .15s;
}
.ma-batch-slider::before{
  content:""; position:absolute;
  top:2px; left:2px; width:14px; height:14px;
  background:#fff; border-radius:50%;
  transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.ma-batch-toggle input:checked + .ma-batch-slider{ background:var(--brand); }
.ma-batch-toggle input:checked + .ma-batch-slider::before{ left:18px; }
/* Center the toggles in their cells */
.ma-batch-table tbody td:has(.ma-batch-toggle){ text-align:center; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.90 — Invoice Series + Invoice Status sections (Document Options
   → Sale Invoice accordion). Re-skins the existing series table & status
   rows to match the modern tab-pill + clean-table design we use for
   Batch Setting and General Setting.
   ════════════════════════════════════════════════════════════════════ */

/* Invoice Series table — reuses .ma-batch-table base styling */
.ma-is-table .ma-is-type{ width:110px; font-weight:600; color:#0f172a; }
.ma-is-table .ma-is-tog { width:80px; text-align:center; }
.ma-is-table tbody td.ma-is-type{
  font-size:13px; color:#0f172a; padding:14px 12px;
}
.ma-is-table input[readonly]{ background:#f8fafc; color:#64748b; cursor:default; }

/* Invoice Status — list of editable status options */
.ma-docopt-statuses{
  display:flex; flex-direction:column; gap:8px;
  margin:6px 0 8px; max-width:560px;
}
.ma-status-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:#f8fafc;
  border:1px solid #e5e7eb; border-radius:6px;
}
.ma-status-color-wrap{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #d1d5db; border-radius:5px;
  padding:2px 6px 2px 2px;
}
.ma-status-color{
  width:30px; height:30px; padding:0; border:none; cursor:pointer;
  background:transparent; border-radius:3px;
}
.ma-status-color::-webkit-color-swatch-wrapper{ padding:0; }
.ma-status-color::-webkit-color-swatch{ border:1px solid #d1d5db; border-radius:3px; }
.ma-status-hex{
  width:80px; height:26px;
  border:none; outline:none; background:transparent;
  font-family:Menlo, Consolas, monospace; font-size:12px;
  color:#0f172a; text-transform:uppercase;
}
.ma-status-hex:focus{ background:#fff; }
.ma-status-label{
  flex:1; min-width:0; height:34px;
  padding:6px 12px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-status-label:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-status-rm-btn{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#dc2626;
  border:1px solid #fecaca; border-radius:5px;
  cursor:pointer; padding:0;
}
.ma-status-rm-btn:hover{ background:#fee2e2; border-color:#fca5a5; }

/* "Add more" button styled to match the design idiom */
.ma-status-add-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; margin-top:4px;
  font-size:12.5px; font-weight:600; color:var(--brand);
  background:#fff; border:1.5px dashed var(--brand); border-radius:6px;
  cursor:pointer; transition:background .12s;
}
.ma-status-add-btn:hover{ background:#f0fdf4; }
.ma-status-add-btn svg{ flex-shrink:0; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.102 — Payment Type editable list (Multi Currency Invoice).
   Simpler than the Status list — just stacked text inputs + a small
   red remove button per row.
   ════════════════════════════════════════════════════════════════════ */
.ma-docopt-pmts{
  display:flex; flex-direction:column; gap:8px;
  margin:6px 0 8px; max-width:420px;
}
.ma-pmt-row{ display:flex; align-items:center; gap:8px; }
.ma-pmt-input{
  flex:1; min-width:0; height:36px;
  padding:6px 12px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-pmt-input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.ma-pmt-rm-btn{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#dc2626;
  border:1px solid #fecaca; border-radius:5px;
  cursor:pointer; padding:0;
}
.ma-pmt-rm-btn:hover{ background:#fee2e2; border-color:#fca5a5; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.107 — Per-doc "Disable TAX" / "Disable price" toggles
   (Document Options). Columns indices for .ma-qt-items table:
   1 Item | 2 HSN | 3 Qty | 4 Rate | 5 GST % | 6 Amount | 7 Del
   ════════════════════════════════════════════════════════════════════ */
.ma-qt-items.qt-tbl-no-price th:nth-child(4),
.ma-qt-items.qt-tbl-no-price td:nth-child(4),
.ma-qt-items.qt-tbl-no-price th:nth-child(6),
.ma-qt-items.qt-tbl-no-price td:nth-child(6) { display: none; }
.ma-qt-items.qt-tbl-no-tax th:nth-child(5),
.ma-qt-items.qt-tbl-no-tax td:nth-child(5) { display: none; }
/* When price is hidden, amount (col 6) goes with it since amount = qty * rate */

/* ════════════════════════════════════════════════════════════════════
   v3.9.107 — Per-document Disable TAX / Disable Price toggles from
   Document Options. When the table gets these classes, the matching
   columns disappear from both the header row, each item row, and the
   totals footer. Used by Quotation / Delivery Challan / Proforma /
   Purchase Order / Sale Order / Job Work / Packing List / Service.
   ════════════════════════════════════════════════════════════════════ */
.ma-qt-v2-items.qt-tbl-no-tax .qt-c-tax,
.ma-qt-v2-items.qt-tbl-no-tax thead th:nth-child(8),
.ma-qt-v2-items.qt-tbl-no-tax tbody td:nth-child(8),
.ma-qt-v2-items.qt-tbl-no-tax tfoot td:nth-child(8){ display:none; }

.ma-qt-v2-items.qt-tbl-no-price .qt-c-price,
.ma-qt-v2-items.qt-tbl-no-price .qt-c-disc,
.ma-qt-v2-items.qt-tbl-no-price .qt-c-tax,
.ma-qt-v2-items.qt-tbl-no-price .qt-c-total,
.ma-qt-v2-items.qt-tbl-no-price thead th:nth-child(6),
.ma-qt-v2-items.qt-tbl-no-price thead th:nth-child(7),
.ma-qt-v2-items.qt-tbl-no-price thead th:nth-child(8),
.ma-qt-v2-items.qt-tbl-no-price thead th:nth-child(9),
.ma-qt-v2-items.qt-tbl-no-price tbody td:nth-child(6),
.ma-qt-v2-items.qt-tbl-no-price tbody td:nth-child(7),
.ma-qt-v2-items.qt-tbl-no-price tbody td:nth-child(8),
.ma-qt-v2-items.qt-tbl-no-price tbody td:nth-child(9),
.ma-qt-v2-items.qt-tbl-no-price tfoot td:nth-child(6),
.ma-qt-v2-items.qt-tbl-no-price tfoot td:nth-child(7),
.ma-qt-v2-items.qt-tbl-no-price tfoot td:nth-child(8),
.ma-qt-v2-items.qt-tbl-no-price tfoot td:nth-child(9){ display:none; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.114 — Translation Options accordion panel styling.
   Each accordion row, when expanded, shows one or more cards. Each
   card has a tab-label header (small green-tab style) optionally
   followed by a tiny ALL-CAPS divider, then a form of compact
   "label-left, input-right" rows. The DIFFERENT-addresses card uses
   a 2-column layout for side-by-side billing/shipping renames.
   ════════════════════════════════════════════════════════════════════ */
.ma-trans-card{ overflow:hidden; }
.ma-trans-card .ma-trans-card-hdr{
  display:block;
  padding:10px 18px;
  font-size:13px; font-weight:600; color:var(--brand);
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.ma-trans-card .ma-trans-hdr-tiny{
  font-size:11px; font-weight:600; color:#94a3b8;
  letter-spacing:.5px; background:#fff;
}
.ma-trans-form{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 22px 22px;
}
.ma-trans-row{
  display:flex; align-items:center; gap:14px;
  max-width:520px;
}
.ma-trans-row label{
  flex:0 0 130px;
  font-size:12.5px; color:#475569; line-height:1.35;
}
.ma-trans-sublbl{
  display:inline-block; margin-top:2px;
  font-size:11px; font-style:italic; color:#94a3b8;
}

/* v3.9.126 — Italic "Only visible on document print" hint that sits
   above the Product Details translation card (and any future panels
   where the same clarification helps). */
.ma-trans-print-hint{
  margin:2px 0 12px;
  padding:0 4px;
  font-size:12px; font-style:italic; color:#94a3b8;
}
.ma-trans-row input{
  flex:1; min-width:0; height:34px;
  padding:6px 12px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box;
}
.ma-trans-row input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}

/* 2-column layout for the DIFFERENT-addresses card */
.ma-trans-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  padding:18px 22px 22px;
}
.ma-trans-col{ display:flex; flex-direction:column; gap:10px; }
.ma-trans-col .ma-trans-row{ max-width:none; }
.ma-trans-col .ma-trans-row label{ flex:0 0 150px; }

@media (max-width: 900px){
  .ma-trans-cols{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.130 — Full-page Manufacture create/edit form. Layout mirrors
   the reference: two-column top (Product | Detail), full-width Raw
   Material + Other Outcomes tables with soft-yellow highlights on the
   placeholder row and the footer Total row, and a two-column bottom
   (Terms & Conditions | numerical Summary).
   ════════════════════════════════════════════════════════════════════ */
#pg-manufacture-form{ padding:0 }

/* Layout grids */
.mfg-form-topgrid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:14px;
}
.mfg-form-bot{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:14px;
}
@media (max-width: 900px){
  .mfg-form-topgrid, .mfg-form-bot{ grid-template-columns:1fr; }
}

/* Cards */
.mfg-form-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  overflow:hidden;
}
.mfg-form-card-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 12px;
  font-size:13.5px; font-weight:600; color:#0f172a;
  border-bottom:1px solid #f1f5f9;
}
.mfg-form-body{ padding:16px 20px 20px; }

/* Back arrow icon (top-right of Manufacture Detail card) */
.mfg-back-icon{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#64748b;
  border:1px solid #e5e7eb; border-radius:6px;
  cursor:pointer;
}
.mfg-back-icon:hover{ background:#f8fafc; color:#0f172a; }

/* Field rows */
.mfg-frow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:12px; min-height:36px;
}
.mfg-frow > label{
  flex:0 0 105px; font-size:12.5px; color:#475569; line-height:1.35;
}
.mfg-frow > label .req{ color:#ef4444; margin-left:1px; }
.mfg-frow > input, .mfg-frow > select, .mfg-frow > textarea,
.mfg-frow > .mfg-ta-wrap{
  flex:1; min-width:0;
}
.mfg-frow input[type="text"],
.mfg-frow input[type="number"]{
  height:36px; padding:6px 12px; font-size:13px; color:#0f172a;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box; width:100%;
}
.mfg-frow input:focus, .mfg-frow textarea:focus, .mfg-frow select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg2);
}
.mfg-frow input:disabled{ background:#f1f5f9; color:#94a3b8; }
.mfg-frow textarea{
  padding:8px 12px; font-size:13px; color:#0f172a; font-family:inherit;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
  box-sizing:border-box; width:100%; resize:vertical;
}
.mfg-frow-2col{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.mfg-frow-2col .mfg-frow{ margin-bottom:12px; }
.mfg-frow-ta{ align-items:flex-start; }
.mfg-frow-ta > label{ padding-top:6px; }
.mfg-hint-em{
  display:block; font-size:11px; font-style:italic;
  color:#94a3b8; margin-top:2px;
}

/* Textarea with expand button */
.mfg-ta-wrap{ position:relative; }
.mfg-ta-wrap textarea{ padding-right:28px; }
.mfg-ta-expand{
  position:absolute; left:6px; bottom:6px;
  width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#64748b;
  border:none; cursor:pointer; padding:0;
}

/* Add Notes button */
.mfg-add-notes-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; font-size:12px; color:#0f172a; font-weight:500;
  background:#fff; border:1px solid #cbd5e1; border-radius:5px;
  cursor:pointer;
}
.mfg-add-notes-btn:hover{ background:#f8fafc; border-color:#94a3b8; }

/* Tables (Raw Material / Other Outcomes) */
.mfg-tbl-card .mfg-form-card-hdr{ border-bottom:0; }
.mfg-tbl{
  width:100%; border-collapse:collapse; font-size:13px;
  border-top:1px solid #f1f5f9;
}
.mfg-tbl thead th{
  padding:10px 12px; font-size:10.5px; font-weight:600; color:#64748b;
  text-transform:uppercase; letter-spacing:.4px; text-align:left;
  border-bottom:1px solid #e5e7eb; background:#fff;
}
.mfg-tbl thead th.mfg-c-num{ text-align:left; }
.mfg-tbl thead th.mfg-c-sr{ width:44px; text-align:center; color:#94a3b8; font-weight:500; }
.mfg-tbl tbody td{
  padding:10px 12px; border-bottom:1px solid #f1f5f9;
  vertical-align:top;
}
.mfg-tbl tbody td:first-child{
  color:#94a3b8; text-align:center; font-size:12.5px;
  padding-top:22px;
}
.mfg-tbl tbody input,
.mfg-tbl tbody textarea{
  width:100%; padding:6px 10px; font-size:13px; color:#0f172a;
  border:none; background:var(--brand-bg);
  box-sizing:border-box; font-family:inherit;
}
.mfg-tbl tbody td:not(:nth-child(2)) input,
.mfg-tbl tbody td:not(:nth-child(2)) textarea{
  background:transparent;
}
.mfg-tbl tbody textarea{ min-height:56px; resize:vertical; }
.mfg-tbl tbody input:focus,
.mfg-tbl tbody textarea:focus{
  outline:none; box-shadow:0 0 0 2px var(--brand-bg2);
}
.mfg-tbl tfoot .mfg-tot-row td{
  padding:10px 12px; font-size:12.5px; font-weight:600; color:#0f172a;
  background:var(--brand-bg);
}
.mfg-tbl tfoot .mfg-tot-row td:nth-child(2){ padding-left:16px; }
.mfg-tbl .c{ text-align:center; }

/* Summary side (right of the bottom split) */
.mfg-sum-body{ padding:14px 20px; }
.mfg-sum-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; font-size:13px; color:#0f172a;
  border-bottom:1px solid #f1f5f9;
}
.mfg-sum-row span:last-child{ font-weight:600; }
.mfg-grand-row{
  background:var(--brand-bg);
  padding:12px 12px;
  margin:6px -8px;
  border-radius:4px;
  border-bottom:0;
}
.mfg-grand-row span:last-child{ font-weight:700; font-size:14px; }

/* Adjustment row */
.mfg-adj-row{
  display:grid; grid-template-columns:1fr 60px 1fr 60px; gap:8px;
  padding:12px 0;
  border-bottom:1px solid #f1f5f9;
}
.mfg-adj-row input, .mfg-adj-row select{
  height:34px; padding:6px 10px; font-size:12.5px;
  border:1px solid #d1d5db; border-radius:5px; background:#fff;
  box-sizing:border-box; width:100%;
}
.mfg-adj-row select{ font-size:12.5px; color:#64748b; }
.mfg-adj-lbl{ color:#94a3b8; }

/* Total in words */
.mfg-sum-words-wrap{
  padding:12px 0;
  border-bottom:1px solid #f1f5f9;
}
.mfg-sum-words-lbl{
  font-size:12.5px; color:#0f172a; margin-bottom:2px;
}
.mfg-sum-words-val{
  font-size:12.5px; color:#64748b; font-weight:500;
  text-transform:uppercase; letter-spacing:.3px;
}

/* Action bar */
.mfg-form-actions{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px;
  margin-top:6px;
}
.mfg-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; font-size:13px; color:#0f172a; font-weight:500;
  background:#fff; border:1px solid #cbd5e1; border-radius:6px;
  cursor:pointer;
}
.mfg-back-btn:hover{ background:#f8fafc; border-color:#94a3b8; }
.mfg-save-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 22px; font-size:13px; color:#fff; font-weight:600;
  background:var(--brand); border:none; border-radius:6px;
  cursor:pointer;
  margin-left:auto;
}
.mfg-save-btn:hover{ background:var(--brand-d); }

/* ════════════════════════════════════════════════════════════════════
   v3.9.131 — Manufacture form refinements
   ═══════════════════════════════════════════════════════════════════ */

/* Item cell — Product Name (top, white) + Item Note (below, yellow) */
.mfg-f-item-cell{
  padding:8px 12px !important;
  vertical-align:top;
}
.mfg-f-item-cell .mfg-f-name{
  width:100%; padding:6px 10px;
  font-size:13px; color:#0f172a;
  border:none; background:#fff !important;
  box-sizing:border-box;
  margin-bottom:6px;
}
.mfg-f-item-cell .mfg-f-note{
  width:100%; padding:6px 10px;
  font-size:13px; color:#0f172a; font-family:inherit;
  border:none; background:var(--brand-bg) !important;
  box-sizing:border-box; min-height:52px; resize:vertical;
}
.mfg-f-item-cell .mfg-f-name:focus,
.mfg-f-item-cell .mfg-f-note:focus{
  outline:none; box-shadow:0 0 0 2px var(--brand-bg2);
}

/* Row-# cell */
.mfg-f-sr{
  width:44px; text-align:center;
  color:#94a3b8; font-size:12.5px;
  padding-top:22px !important;
}

/* Actions column with add / delete buttons */
.mfg-tbl thead th.mfg-c-actions{ width:56px; }
.mfg-f-actions-cell{
  width:56px; padding:12px 8px !important;
  text-align:center; vertical-align:top;
}
.mfg-f-add-btn,
.mfg-f-del-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin:2px 0;
  border:none; border-radius:50%;
  color:#fff; cursor:pointer;
}
.mfg-f-add-btn{ background:var(--brand); }
.mfg-f-add-btn:hover{ background:var(--brand-d); }
.mfg-f-del-btn{ background:#ef4444; }
.mfg-f-del-btn:hover{ background:#dc2626; }

/* Note blocks (multiple T&C entries) */
.mfg-note-block{ position:relative; }
.mfg-note-sep{
  height:1px; background:#e5e7eb;
  margin:14px -20px 14px;
}
.mfg-note-del{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-top:4px;
  background:transparent; color:#94a3b8;
  border:1px solid #e5e7eb; border-radius:5px;
  cursor:pointer;
}
.mfg-note-del:hover{ color:#ef4444; border-color:#ef4444; }

/* Combobox (M/S) — reuse Sale Invoice pattern (z-index tuning lives
   in the v3.9.133 fix block below). */
#mfg-ms-wrap{ position:relative; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE — full-page Manufacture form on ≤ 768px screens.
   Tables collapse into stacked cards (matching the reference mobile
   image). Two-column grids become single-column.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .mfg-form-topgrid,
  .mfg-form-bot{ grid-template-columns:1fr; }

  .mfg-form-body{ padding:14px 14px 18px; }
  .mfg-form-card-hdr{ padding:12px 14px 10px; font-size:13px; }
  .mfg-frow{ flex-direction:column; align-items:stretch; gap:6px; }
  .mfg-frow > label{ flex:0 0 auto; font-size:12px; }
  .mfg-frow-2col{ grid-template-columns:1fr 1fr; gap:10px; }
  .mfg-frow-2col .mfg-frow{ flex-direction:column; }

  /* Tables → stacked card rows on mobile */
  .mfg-tbl thead{ display:none; }
  .mfg-tbl tbody, .mfg-tbl tfoot, .mfg-tbl tr, .mfg-tbl td{ display:block; }
  .mfg-tbl tbody tr.mfg-f-row{
    position:relative;
    background:#f8fafc;
    border:1px solid #e5e7eb; border-radius:8px;
    padding:10px 12px 46px;
    margin:0 14px 12px;
  }
  .mfg-tbl tbody tr.mfg-f-row td{
    padding:6px 0 !important;
    border:none;
  }
  .mfg-tbl tbody tr.mfg-f-row .mfg-f-sr{ display:none; }
  .mfg-f-item-cell{ padding:0 !important; }
  .mfg-f-item-cell .mfg-f-name{
    border:1px solid #d1d5db !important; border-radius:6px;
    padding:8px 10px;
    background:#fff !important;
  }
  .mfg-f-item-cell .mfg-f-note{
    border:1px solid #d1d5db !important; border-radius:6px;
    padding:8px 10px;
    background:#fff !important;
    margin-top:8px;
  }
  /* Qty / UOM side by side, Price / Estimated Price side by side */
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(3),
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(4),
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(5),
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(6){
    display:inline-block;
    width:calc(50% - 4px);
    vertical-align:top;
  }
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(3){ margin-right:6px; margin-top:8px; }
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(5){ margin-right:6px; }
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(3) input,
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(4) input,
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(5) input,
  .mfg-tbl tbody tr.mfg-f-row td:nth-child(6) input{
    border:1px solid #d1d5db !important; border-radius:6px;
    padding:8px 10px;
    background:#fff !important;
  }
  /* Action buttons float bottom-right of the card */
  .mfg-f-actions-cell{
    position:absolute;
    right:10px; bottom:10px;
    width:auto; padding:0 !important;
    display:flex; gap:6px;
  }
  /* Footer Total row on mobile — full-width card */
  .mfg-tbl tfoot tr.mfg-tot-row{
    display:flex; flex-wrap:wrap; align-items:center;
    padding:10px 14px;
    margin:0 14px 8px;
    background:var(--brand-bg);
    border-radius:6px;
  }
  .mfg-tbl tfoot .mfg-tot-row td{
    background:transparent !important;
    padding:2px 8px !important;
    font-size:12px;
  }
  .mfg-tbl tfoot .mfg-tot-row td:empty{ display:none; }

  /* Summary panel — Grand Total row visible full-width */
  .mfg-sum-row{ padding:12px 4px; font-size:12.5px; }
  .mfg-adj-row{ grid-template-columns:1fr; gap:6px; }
  .mfg-form-actions{ padding:14px; }
  .mfg-save-btn, .mfg-back-btn{ padding:10px 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.132 — Manufacture form: fix z-index, cell borders, drag notes,
   action buttons.
   ═══════════════════════════════════════════════════════════════════ */

/* Fix 1: M/S dropdown z-index. The parent .mfg-form-card had
   overflow:hidden which clipped the dropdown. Allow the top-grid
   cards to overflow (only they need it — the tables below still
   clip their content correctly).
   v3.9.133 — Lower z-index values so the top tab-nav subnav
   (Job Work / Ledger / Multi-Currency Invoice / etc.) still floats
   above the manufacture form when the user hovers a top tab.
   .ma-tabnav sits at z-index 70; keeping the form's stacking below
   that. */
#pg-manufacture-form{ position:relative; }
.mfg-form-topgrid .mfg-form-card{ overflow:visible; }
#mfg-ms-wrap{ position:relative; }
#mfg-ms-drop{
  position:absolute; top:100%; left:0; right:0;
  z-index:10;
  margin-top:2px;
  background:#fff;
  border:1px solid #d1d5db; border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  max-height:360px; overflow-y:auto;
  display:none;
}
#mfg-ms-drop.open{ display:block; }
#mfg-ms-drop .ma-combo-search{
  width:100%; padding:8px 12px; margin:8px;
  border:1px solid #d1d5db; border-radius:5px;
  font-size:13px; box-sizing:border-box;
  width:calc(100% - 16px);
}
#mfg-ms-drop .ma-combo-list{
  max-height:260px; overflow-y:auto;
}
#mfg-ms-drop .ma-combo-item{
  padding:8px 14px; font-size:13px; cursor:pointer;
  border-top:1px solid #f1f5f9;
}
#mfg-ms-drop .ma-combo-item:hover{ background:#f8fafc; }
#mfg-ms-drop .ma-combo-empty{
  padding:20px; text-align:center; color:#94a3b8; font-size:12.5px;
}

/* Fix 2: Item table cell borders — make it a proper grid with
   visible vertical borders between columns, matching the reference. */
.mfg-tbl thead th,
.mfg-tbl tbody td,
.mfg-tbl tfoot td{
  border-left:1px solid #e5e7eb;
}
.mfg-tbl thead th:first-child,
.mfg-tbl tbody td:first-child,
.mfg-tbl tfoot td:first-child{
  border-left:none;
}
.mfg-tbl thead th:last-child,
.mfg-tbl tbody td:last-child{
  border-right:none;
}
.mfg-tbl tbody tr{
  border-bottom:1px solid #e5e7eb;
}
.mfg-tbl thead th{
  border-bottom:1px solid #e5e7eb;
}

/* Fix 3: Drag-to-reorder notes. Adds a 4-arrow move handle next to
   the trash icon on each note block. During drag, the source shows
   a dashed border on a pale background (matching the reference). */
.mfg-note-block{
  position:relative;
  padding:4px 0;
  transition:background .12s ease;
}
.mfg-note-block.dragging{
  border:1px dashed #94a3b8;
  background:var(--brand-bg);
  border-radius:6px;
  padding:8px 10px;
  opacity:.9;
}
.mfg-note-block.drop-target{
  background:#e0f2fe;
  border-top:2px solid #3b82f6;
}
.mfg-note-actions{
  display:inline-flex; gap:6px; align-items:center;
  margin-top:4px;
}
.mfg-note-drag,
.mfg-note-del{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  background:transparent; color:#94a3b8;
  border:1px solid #e5e7eb; border-radius:5px;
  cursor:pointer;
}
.mfg-note-drag{ cursor:grab; }
.mfg-note-drag:active{ cursor:grabbing; }
.mfg-note-drag:hover{ color:#0f172a; border-color:#94a3b8; }
.mfg-note-del:hover{ color:#ef4444; border-color:#ef4444; }

/* Fix 4: Manufacture list action-column redesign — a "View / Print"
   pill with an eye icon on top, an "Edit" pill with pencil icon
   plus a small dropdown chevron for a menu of secondary actions. */
.mfg-act-cell{
  display:flex; flex-direction:column; gap:6px;
  align-items:flex-end;
}
.mfg-act-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px;
  font-size:12px; font-weight:500; color:#0369a1;
  background:#f0f9ff; border:1px solid #bae6fd;
  border-radius:5px; cursor:pointer;
  min-width:96px; justify-content:center;
}
.mfg-act-btn:hover{ background:#e0f2fe; }
.mfg-act-edit-wrap{
  display:inline-flex; gap:0;
}
.mfg-act-edit{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px;
  font-size:12px; font-weight:500; color:#0f172a;
  background:#fff; border:1px solid #cbd5e1;
  border-radius:5px 0 0 5px; cursor:pointer;
  min-width:70px; justify-content:center;
}
.mfg-act-edit:hover{ background:#f8fafc; }
.mfg-act-edit-arr{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; padding:0;
  background:#fff; border:1px solid #cbd5e1; border-left:none;
  border-radius:0 5px 5px 0; cursor:pointer; color:#64748b;
}
.mfg-act-edit-arr:hover{ background:#f8fafc; }
.mfg-act-menu{
  position:absolute; z-index:20;
  right:0; top:100%; margin-top:4px;
  min-width:140px; padding:4px 0;
  background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  display:none;
}
.mfg-act-menu.open{ display:block; }
.mfg-act-menu-item{
  display:block; padding:8px 14px;
  font-size:12.5px; color:#0f172a; text-align:left;
  background:transparent; border:none; cursor:pointer; width:100%;
}
.mfg-act-menu-item:hover{ background:#f8fafc; }
.mfg-act-menu-item.d{ color:#ef4444; }

/* ════════════════════════════════════════════════════════════════════
   v3.9.134 — Product Name combobox on every raw-material / other-
   outcomes row. Uses the same tuned-down z-index strategy as the M/S
   combo: high enough to float above the tables below, low enough that
   the top nav's Other Documents submenu (effective root z-index ~70)
   still floats above.
   ═══════════════════════════════════════════════════════════════════ */

/* Item table cards need overflow:visible so per-row combo dropdowns
   can escape the card boundary — same fix as the top grid uses. */
.mfg-tbl-card{ overflow:visible; }

/* Combo wrapper — provides the offset parent for the absolute drop */
.mfg-item-combo{ position:relative; }
.mfg-item-combo .mfg-f-name{
  cursor:pointer;
}

/* Dropdown panel */
.mfg-item-combo-drop{
  position:absolute; top:100%; left:0; right:0;
  z-index:20;
  margin-top:2px;
  background:#fff;
  border:1px solid #d1d5db; border-radius:6px;
  box-shadow:0 8px 24px rgba(15,23,42,.15);
  max-height:280px; overflow-y:auto;
  display:none;
  min-width:240px;
}
.mfg-item-combo-drop.open{ display:block; }

.mfg-item-combo-list{ padding:2px 0; }
.mfg-item-combo-item{
  padding:8px 12px;
  font-size:12.5px;
  border-top:1px solid #f1f5f9;
  cursor:pointer;
  line-height:1.35;
}
.mfg-item-combo-item:first-child{ border-top:none; }
.mfg-item-combo-item:hover{ background:#f0fdf4; }
.mfg-item-combo-empty{
  padding:16px 12px;
  text-align:center; font-size:12px; color:#94a3b8;
}

/* ════════════════════════════════════════════════════════════════════
   v3.9.135 — "Custom Product" option pinned at the TOP of the Sale
   Invoice and Purchase Invoice item pickers. Styled with a soft
   green tinted background and a solid green bottom separator so it
   visually stands apart from the catalog rows below.

   v3.9.142 — REMOVED position:sticky. The sticky was making the Custom
   Product option float over the catalog rows when the user scrolled the
   dropdown, which overlapped the search box and covered whatever item
   was under it. It's still the FIRST row of the list (JS emits it first),
   so users see it at the top on open — but it now scrolls normally with
   the rest of the list, matching every other picker in the app.
   ═══════════════════════════════════════════════════════════════════ */
.ma-combo-opt-custom{
  background:linear-gradient(180deg, #f0fdf4 0%, var(--brand-bg) 100%);
  border-bottom:2px solid var(--brand);
  padding:10px 14px !important;
  /* position:sticky was here — removed in v3.9.142 (see comment above). */
}
.ma-combo-opt-custom:hover,
.ma-combo-opt-custom.hi{
  background:linear-gradient(180deg, #E0F2FE 0%, var(--brand-bg2) 100%);
}
.ma-combo-opt-custom .ma-combo-opt-name{
  display:inline-flex; align-items:center;
  font-size:13px !important;
}
.ma-combo-opt-custom .ma-combo-opt-sub{
  font-size:11px; margin-top:2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.139 — Feature-module styles
   Corresponds to the JS module appended at the end of public/js/app.js.
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Terms & Condition / Additional Note — repeatable blocks ───────────── */
.gst-note-block{
  display:flex;
  gap:8px;
  padding:8px 8px 4px;
  border:1px solid transparent;
  border-radius:8px;
  margin-bottom:8px;
  transition:background .15s, border-color .15s;
}
.gst-note-block + .gst-note-block{margin-top:0}
.gst-note-block.is-dragging{opacity:.55; background:var(--surf2)}
.gst-note-block.is-drop-target{border-color:var(--brand); background:rgba(37,99,235,.06)}

.gst-note-side{
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  gap:6px;
  padding-top:26px;   /* aligns with the top of the Title input */
  flex-shrink:0;
}
.gst-note-drag,.gst-note-del{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:0;
  transition:background .12s, color .12s, border-color .12s;
}
.gst-note-drag{cursor:grab}
.gst-note-drag:hover{background:var(--surf2); color:var(--brand); border-color:var(--bdr)}
.gst-note-drag:active{cursor:grabbing}
.gst-note-del:hover{background:#fef2f2; color:#dc2626; border-color:#fecaca}

.gst-note-body{flex:1; min-width:0}
.gst-note-body .gst-fr{margin-bottom:8px}
.gst-note-body .gst-fr:last-child{margin-bottom:0}


/* ─── Custom Column sidebar ─────────────────────────────────────────────── */
body.cc-sidebar-open{overflow:hidden}

#cc-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10500;
  pointer-events:none;
}
#cc-sidebar-wrap.open{pointer-events:auto}

#cc-sidebar-wrap .cc-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#cc-sidebar-wrap.open .cc-scrim{opacity:1}

.cc-side{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(760px, 96vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#cc-sidebar-wrap.open .cc-side{transform:translateX(0)}

.cc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--bdr);
  flex-shrink:0;
}
.cc-title{font-weight:600; font-size:15px; color:var(--text)}
.cc-x{
  width:32px; height:32px; border-radius:50%;
  border:none; background:transparent; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s;
}
.cc-x:hover{background:var(--surf2); color:var(--text)}

.cc-body{
  flex:1; overflow-y:auto;
  padding:18px 20px;
}
.cc-foot{
  display:flex; justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid var(--bdr);
  background:var(--surf);
  flex-shrink:0;
}

/* Table-like grid */
.cc-tbl{
  display:flex; flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:14px;
}
.cc-row{
  display:grid;
  grid-template-columns:38px 60px 55px 90px minmax(140px,1fr) minmax(150px,1fr) 150px;
  align-items:center;
  gap:8px;
  padding:10px 6px;
  font-size:12.5px;
}
.cc-row.hdr{
  font-weight:600; color:var(--muted);
  font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  border-bottom:1px solid var(--bdr);
  background:transparent;
}
.cc-row:not(.hdr){border-bottom:1px solid var(--bdr)}
.cc-row:not(.hdr):last-child{border-bottom:none}

.cc-c.num{text-align:center; color:var(--muted); font-weight:600}
.cc-c.stat,.cc-c.prnt,.cc-c.nfmt{display:flex; justify-content:center}
.cc-c.cfn input,
.cc-c.dval input,
.cc-c.pos select{
  width:100%;
  padding:7px 9px;
  font-size:13px;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
}
.cc-c.cfn input:focus,
.cc-c.dval input:focus,
.cc-c.pos select:focus{border-color:var(--brand)}

/* Toggle switch */
.cc-tog{
  position:relative; display:inline-block;
  width:34px; height:18px;
  cursor:pointer;
}
.cc-tog input{
  position:absolute; opacity:0;
  width:0; height:0;
}
.cc-tog span{
  position:absolute; inset:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:background .18s;
}
.cc-tog span::before{
  content:''; position:absolute;
  top:2px; left:2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  transition:transform .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.cc-tog input:checked + span{background:var(--brand)}
.cc-tog input:checked + span::before{transform:translateX(16px)}
.cc-tog input:disabled + span{opacity:.5; cursor:not-allowed}

/* Global options below table */
.cc-gopt{
  display:grid;
  grid-template-columns:180px 1fr;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--bdr);
  font-size:13px;
}
.cc-gopt:last-of-type{border-bottom:none}
.cc-gopt > label{color:var(--text); font-weight:500}
.cc-gopt select,
.cc-gopt input[type="text"]{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
}
.cc-gopt select:focus,
.cc-gopt input[type="text"]:focus{border-color:var(--brand)}

.cc-note{
  color:var(--muted); font-size:11.5px; font-style:italic;
  padding:0 0 8px 192px;
  margin-top:-4px;
}

/* Footer buttons */
.cc-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:6px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--text);
  font-size:13px; font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
.cc-btn:hover{background:var(--surf2)}
.cc-btn.primary{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.cc-btn.primary:hover{filter:brightness(.94)}

/* Mobile — sidebar becomes almost full-width */
@media (max-width:760px){
  .cc-side{width:100vw; box-shadow:none; border-left:none}
  .cc-row{
    grid-template-columns:32px 52px 48px 78px 1fr 1fr 130px;
    font-size:11.5px;
    gap:5px;
  }
  .cc-gopt{grid-template-columns:120px 1fr}
  .cc-note{padding-left:132px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.144 — DEFINITIVE Item Note border (last-word override)

   Multiple rules in this file (and third-party stylesheets that may load
   after us) can set a green `var(--brand)` border on focused textareas. The
   .gst-item-note is a yellow-family element and should NEVER pick up a
   green border, even on focus. These rules use both maximal specificity
   (id + multiple class + descendant + pseudo) and `!important` to guarantee
   they win the cascade regardless of load order.
══════════════════════════════════════════════════════════════════════════════ */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note{

  background:var(--brand-bg) !important;
  border:1px solid var(--brand-bg2) !important;
  border-radius:6px !important;
  padding:6px 10px !important;
  margin-top:0 !important;
  box-shadow:none !important;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note:focus-within{

  border:1px solid #fbbf24 !important;
  box-shadow:0 0 0 2px rgba(251,191,36,.22) !important;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea{

  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:28px !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  color:var(--text) !important;
  resize:vertical !important;
  width:100% !important;
  font-family:inherit !important;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea:focus{

  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  border-color:transparent !important;
}
#pg-bill .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-prod-note .gst-item-note textarea::placeholder{

  color:#a3a3a3 !important;
  font-style:normal !important;
  opacity:1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.145 — First-row policy
   The FIRST item row (marked `.gst-first-row` by _renumberBillSr / _renumberPuSr
   after any add or delete) hides its red delete button. Users cannot delete
   SR #1; the invoice always keeps at least one item. The green + (add) button
   remains fully clickable — that's how new rows get added.
══════════════════════════════════════════════════════════════════════════════ */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn{

  display:none !important;
}

/* Numeric SR cell — keeps the number centred and bold, same look as before
   but now the number comes from the .gst-sr-num span so JS can update it in
   place after every add / delete. */
#pg-bill .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,

#pg-purchase .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-sr .gst-sr-num,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-sr .gst-sr-num{

  display:inline-block;
  font-weight:600;
  color:var(--text);
  font-size:13px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.147 — Hover-only + / − buttons

   The green + (add row) and red − (delete row) circles are HIDDEN by default
   and fade in when the user hovers the item row. This matches the user's
   video reference. The row-a's :hover state also covers the rowspan=2 action
   cell so the buttons appear whenever the mouse is over any Row-A cell.
   SR #1 still keeps its − hidden always (via .gst-first-row).
══════════════════════════════════════════════════════════════════════════════ */
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,

#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{

  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .15s ease, transform .12s, background .12s !important;
}
/* Reveal when the item row (or its paired note row) is hovered. The action td
   has rowspan=2 and belongs to Row-A, so Row-A:hover covers the cell area
   itself; we also add a Row-B:hover reveal via JS-added class .is-hovered
   for when the user is typing an item note. */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn{

  opacity:1 !important;
  pointer-events:auto !important;
}
/* SR #1 still has no delete button — hover state doesn't change that */
#pg-bill .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,

#pg-purchase .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,

#pg-create-jobwork .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn,


#pg-create-proforma .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn{

  display:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.149 — "Create Staff Account" FULL PAGE (Settings ▸ Staff ▸ + Add Staff)

   Rewrites v3.9.148 modal styles into a proper page layout that matches the
   reference PDF pixel-for-pixel:
   - White card fills the page
   - Small title row at top ("Create Staff Account")
   - Each form row = label on the left (~130-160px) + control on the right
   - Permissions table nested under the "User Allowed to" row
   - Save + Back buttons aligned with the control column
══════════════════════════════════════════════════════════════════════════════ */

#pg-staff-create{padding:0}
#pg-staff-create .staff-page-card{
  /* v3.9.150 — Full-screen card. Previously capped at 1360px which looked
     off-center on wide displays; now the card spans the full width of the
     content area, just like the reference PDF. */
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
}

.staff-page-title-row{
  padding:14px 22px 12px;
  border-bottom:1px solid var(--bdr);
}
.staff-page-title{
  margin:0; font-size:14px; font-weight:600; color:var(--text);
}

.staff-form-body{
  padding:22px 26px 26px;
  display:block;   /* v3.9.149 — one column of rows; label on left, control on right */
}

/* Every form row is a two-column grid: left label ~150px, right control */
.staff-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  margin-bottom:16px;
  align-items:center;
}
.staff-lbl{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  margin:0;
  padding-top:0;
}
.staff-lbl .req{color:#dc2626; margin-left:1px}

.staff-ctrl{max-width:820px; min-width:0}
.staff-ctrl > input[type="text"],
.staff-ctrl > input[type="email"],
.staff-ctrl > input[type="tel"],
.staff-ctrl > input[type="password"]{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
  box-sizing:border-box;
}
.staff-ctrl > input:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* Password field with an eye toggle at the right edge */
.staff-ctrl-pw{position:relative; display:flex; align-items:center}
.staff-ctrl-pw > input{padding-right:38px}
.staff-pw-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:5px;
  border:none; background:transparent;
  color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; padding:0;
}
.staff-pw-eye:hover{background:var(--surf2); color:var(--text)}

/* Enable row: green filled checkbox + hint text */
.staff-enable-row{display:flex; align-items:center; gap:10px}
.staff-check-green{
  width:18px; height:18px; accent-color:var(--brand);
  cursor:pointer; flex-shrink:0;
}
.staff-enable-hint{color:var(--text); font-size:13px}

/* Account Active Hours slide toggle */
.staff-switch{position:relative; display:inline-block; width:34px; height:18px; cursor:pointer}
.staff-switch input{position:absolute; opacity:0; width:0; height:0}
.staff-switch > span{
  position:absolute; inset:0;
  background:#cbd5e1; border-radius:999px;
  transition:background .16s;
}
.staff-switch > span::before{
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.staff-switch input:checked + span{background:var(--brand)}
.staff-switch input:checked + span::before{transform:translateX(16px)}

/* Permissions row: label on left, table on right */
.staff-row-perms{align-items:flex-start; margin-bottom:0}
.staff-row-perms .staff-lbl{padding-top:8px}
.staff-perms-ctrl{max-width:920px}

.staff-perms-topbar{
  margin-bottom:6px;
}
.staff-select-all{
  padding:5px 14px;
  border:1px solid var(--bdr);
  border-radius:5px;
  background:var(--surf); color:var(--text);
  font-size:12px; font-weight:500;
  cursor:pointer;
  transition:background .12s;
  font-family:inherit;
}
.staff-select-all:hover{background:var(--surf2)}

.staff-perms-tbl{
  border:none;
  border-radius:0;
  overflow:hidden;
  background:var(--surf);
}
.staff-perms-thead{
  display:grid;
  grid-template-columns:1fr 60px 60px 60px 70px;
  padding:9px 12px;
  border-bottom:1px solid var(--bdr);
  font-size:12px; font-weight:600; color:var(--text);
}
.staff-perms-thead-cell.c{text-align:center}

.staff-perms-row{
  display:grid;
  grid-template-columns:1fr 60px 60px 60px 70px;
  padding:8px 12px;
  border-bottom:1px solid var(--bdr);
  align-items:center;
  font-size:12.5px;
}
.staff-perms-row:last-child{border-bottom:none}
.staff-perms-cell.c{text-align:center}
.staff-perms-cell.name{color:var(--text)}
.staff-perms-cell.name.indent{padding-left:12px}
.staff-perms-cell input[type="checkbox"]{
  width:14px; height:14px;
  accent-color:var(--brand);
  cursor:pointer;
}

/* Group header (Expense Income / Other Documents / Report / Setting / Other Options) */
.staff-perms-grp-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px;
  border-bottom:1px solid var(--bdr);
  font-weight:600; color:var(--text); font-size:13px;
}
.staff-perms-grp-toggle{
  width:24px; height:24px; border-radius:50%;
  background:#e5e7eb; color:var(--muted);
  border:none;
  cursor:pointer;
  font-size:14px; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.staff-perms-grp-toggle:hover{background:#d1d5db; color:var(--text)}
.staff-perms-grp-body{background:var(--surf)}

/* v3.9.150 — .staff-flag-tog removed. Other Options rows now use the same
   plain <input type="checkbox"> as every other permissions row so the look
   is uniform. Browsers render the "checked" state green because we set
   `accent-color: var(--brand)` on the checkboxes further up. */

/* Bottom Save / Back button row */
.staff-row-actions{margin-top:22px; align-items:center; margin-bottom:0}
.staff-page-actions{
  display:flex; gap:10px;
}
.staff-save-btn{padding:8px 24px !important; font-weight:600}
.staff-back-btn{padding:8px 24px !important}

/* Responsive: on narrow viewports, stack the label above the control */
@media (max-width:760px){
  .staff-row{grid-template-columns:1fr; gap:6px}
  .staff-lbl{padding-top:0}
  .staff-ctrl,.staff-perms-ctrl{max-width:none}
  .staff-perms-thead,
  .staff-perms-row{grid-template-columns:1fr 44px 44px 44px 50px; font-size:11.5px; padding:8px 8px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.151 — Daily Expenses redesign (toolbar, empty state, category sidebar,
   add-expense page, summary modal)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar shared by Daily Expenses + Expense Category pages ── */
.de-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.de-toolbar-title{
  font-size:15px; font-weight:600; color:var(--text);
}
.de-toolbar-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Search row (revealed via Search pill) */
.de-search-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.de-search-row > input[type="text"]{
  flex:1; min-width:220px;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
}
.de-search-row > input:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* Empty-state block (Daily Expenses + Expense Category) */
.de-empty-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px;
  text-align:center;
}
.de-empty-title{
  margin-top:12px;
  font-size:15px; color:var(--muted); font-weight:500;
}
.de-empty-actions{
  display:flex; align-items:center; gap:12px;
  margin-top:16px;
  flex-wrap:wrap; justify-content:center;
}
.de-empty-or{
  color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════════
   Add Expense Category — slide-in sidebar (right side)
══════════════════════════════════════════════════════════════════════════════ */
#ec-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10500;
  pointer-events:none;
}
#ec-sidebar-wrap.open{pointer-events:auto}

#ec-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ec-sidebar-wrap.open .ec-scrim{opacity:1}

.ec-side{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(600px, 92vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
  /* v3.9.380 — Sidebar is appended to document.body (outside #ma-shell),
     so it doesn't automatically inherit the app's font-family. Explicit
     inherit ensures it picks up the body-level UI font that we set at
     the top of this stylesheet. Without this, inputs and labels inside
     the sidebar fell back to Times New Roman on some browsers. */
  font-family:inherit;
}
#ec-sidebar-wrap.open .ec-side{transform:translateX(0)}

.ec-side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--bdr);
  flex-shrink:0;
}
.ec-side-title{font-weight:600; font-size:15px; color:var(--text)}
.ec-side-x{
  width:32px; height:32px; border-radius:50%;
  border:none; background:transparent; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s;
}
.ec-side-x:hover{background:var(--surf2); color:var(--text)}

.ec-side-body{
  flex:1; overflow-y:auto;
  padding:22px 22px 14px;
}

.ec-fg{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.ec-fg > label{
  font-size:13px; color:var(--text); font-weight:500;
}
.ec-fg > label .req{color:#dc2626; margin-left:1px}
.ec-fg > input[type="text"]{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ec-fg > input[type="text"]:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* Green filled check with white ✓ (matches reference image) */
.ec-check-green{
  width:22px; height:22px;
  accent-color:var(--brand);
  cursor:pointer;
}

.ec-side-foot{
  display:flex; justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid var(--bdr);
  background:var(--surf);
  flex-shrink:0;
}
.ec-close-btn,.ec-save-btn{padding:8px 20px !important}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.153 — Add Expense page (rebuilt to match the real Add Expense screen)
══════════════════════════════════════════════════════════════════════════════ */

/* Root spacing */
#pg-add-expense{padding:0 20px 20px}
#pg-add-expense .gst-pg-bar{
  padding:14px 4px 18px;
  background:transparent; border:none;
}
#pg-add-expense .gst-pg-bar h2{
  font-size:15px; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:8px; margin:0;
}

/* Expense Detail card: GST | M/S on row 1; Expense No. | Expense Date | Category
   on row 2. Three-column grid, label-left + control-right per cell. */
.ax-detail-card{margin-bottom:16px}
.ax-detail-card .gst-card-body{padding:24px 28px}
.ax-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  column-gap:40px;
  row-gap:18px;
}
/* GST cell stays in col 1; M/S spans cols 2+3 to feel wide like the reference */
.ax-fg-gst{grid-column:1 / span 1}
.ax-fg-ms{grid-column:2 / span 2}
/* When GST is off, hide the M/S row (space collapses because the row only holds
   GST + M/S — Expense No. / Date / Category sit on the next row). */
.ax-fg-ms.is-hidden{display:none}
.ax-fg{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:14px;
}
.ax-fg > label{
  font-size:13px; color:var(--text); font-weight:500; margin:0;
}
.ax-fg > label .req{color:#dc2626; margin-left:2px}
.ax-fg > input[type="text"],
.ax-fg > input[type="date"],
.ax-fg > input[type="number"],
.ax-fg > select{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ax-fg > input:focus,.ax-fg > select:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}
/* Category / M/S combo field — inherits the plugin's global .ma-combo-* rules
   (same as Sale Invoice). No scoped overrides here, so behaviour matches the
   proven Sale Invoice dropdown exactly. */
#pg-add-expense .ax-fg .ma-combo-wrap{width:100%}
/* Expense No. group: prefix pill snugly attached to the number input */
.ax-no-group{
  display:flex; align-items:stretch; gap:0;
  height:38px;
}
.ax-prefix-pill{
  width:60px !important; flex:0 0 60px;
  height:38px;
  text-align:center; font-weight:600;
  background:var(--surf2) !important;
  border:1px solid var(--bdr) !important;
  border-right:none !important;
  border-radius:6px 0 0 6px !important;
  text-transform:uppercase;
  padding:0 8px !important;
  font-size:12px !important;
  color:var(--muted);
  box-sizing:border-box;
}
.ax-no-input{
  flex:1; min-width:0;
  height:38px;
  padding:0 12px;
  border:1px solid var(--bdr);
  border-radius:0 6px 6px 0;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ax-no-input:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* 3-dot header menu button in Expense Detail card — reuse .ma-qa-btn styling */
.ax-hdr-menu{
  border:1px solid var(--bdr); background:var(--surf);
  width:32px; height:32px; border-radius:6px;
  cursor:pointer; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
  padding:0;
}
.ax-hdr-menu:hover{background:var(--surf2); color:var(--text); border-color:var(--brand)}
@media (max-width:1100px){
  .ax-detail-grid{grid-template-columns:1fr 1fr; column-gap:30px}
  .ax-fg-ms{grid-column:2 / span 1}
}
@media (max-width:900px){
  .ax-detail-grid{grid-template-columns:1fr; column-gap:0}
  .ax-fg-gst,.ax-fg-ms{grid-column:1 / span 1}
}

/* Add-New link inside the combo dropdowns */
.ma-combo-addnew{
  display:block; width:100%;
  padding:9px 12px;
  border:none; border-top:1px solid var(--bdr);
  background:var(--surf); color:var(--brand);
  font-size:12.5px; font-weight:600; text-align:left;
  cursor:pointer; font-family:inherit;
}
.ma-combo-addnew:hover{background:var(--surf2)}
.ma-combo-empty{padding:10px 12px; color:var(--muted); font-size:12.5px}

/* Manage Columns button + dropdown on the Expense Items header */
.ax-cols-btn{
  border:1px solid var(--bdr); background:var(--surf);
  width:30px; height:30px; border-radius:6px;
  cursor:pointer; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.ax-cols-btn:hover{background:var(--surf2); color:var(--text)}
.ax-cols-menu{
  position:absolute; top:38px; right:0; z-index:200;
  width:180px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:6px;
}
.ax-cols-menu-hdr{
  font-size:12px; font-weight:700; color:var(--muted);
  padding:6px 8px 8px; text-transform:uppercase; letter-spacing:.3px;
}
.ax-cols-opt{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:5px;
  font-size:13px; color:var(--text); cursor:pointer;
}
.ax-cols-opt:hover{background:var(--surf2)}
.ax-cols-opt input{width:15px; height:15px; accent-color:var(--brand); cursor:pointer}



/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.152 — Add Expense items table
   Same look and behaviour as the Sale Invoice items table (which is scoped to
   #pg-bill / #pg-purchase). We scope our copy to #pg-add-expense so the
   selectors stay symmetric and nothing bleeds across pages.
══════════════════════════════════════════════════════════════════════════════ */
#pg-add-expense .gst-items-tbl{
  width:100%; min-width:900px; border-collapse:collapse;
}
#pg-add-expense .gst-items-tbl thead th{
  background:var(--surf2);
  padding:10px 8px;
  font-size:12px; font-weight:600; color:var(--text);
  border-bottom:1px solid var(--bdr);
  text-transform:uppercase; letter-spacing:.3px;
}
/* 10-column widths (SR / PROD / QTY / UOM / PRICE / DISC / IGST / CESS / TOTAL / ACT) */
#pg-add-expense .gst-items-tbl thead th.gst-c-sr-h    {width:4%;  min-width:44px}
#pg-add-expense .gst-items-tbl thead th.gst-c-prod-h  {width:20%; min-width:190px}
#pg-add-expense .gst-items-tbl thead th.gst-c-qty-h   {width:9%;  min-width:85px}
#pg-add-expense .gst-items-tbl thead th.gst-c-uom-h   {width:9%;  min-width:80px}
#pg-add-expense .gst-items-tbl thead th.gst-c-price-h {width:9%;  min-width:95px}
#pg-add-expense .gst-items-tbl thead th.gst-c-disc-h  {width:9%;  min-width:85px}
#pg-add-expense .gst-items-tbl thead th.gst-c-igst-h  {width:9%;  min-width:85px}
#pg-add-expense .gst-items-tbl thead th.gst-c-cess-h  {width:9%;  min-width:85px}
#pg-add-expense .gst-items-tbl thead th.gst-c-total-h {width:17%; min-width:120px}
#pg-add-expense .gst-items-tbl thead th.gst-c-act-h   {width:4%;  min-width:56px}
/* CESS column cell styling (percent input) */
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess{text-align:center; padding-top:8px}
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess input{
  width:60px; padding:8px 6px; text-align:center;
  border:1px solid transparent; border-radius:5px;
  font-size:13px; background:transparent; color:var(--text);
  outline:none; font-family:inherit; box-sizing:border-box;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess input:focus{border-color:var(--brand); background:var(--surf)}

/* Row-A (input row) — cells have vertical separators AND each input has a
   visible box border, matching the reference image exactly */
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a > td{
  padding:10px 8px;
  vertical-align:middle;
  font-size:13px;
  border-bottom:none;
  border-right:1px solid var(--bdr);
}
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a > td:last-child{border-right:none}
#pg-add-expense .gst-items-tbl tbody td.gst-c-sr{
  text-align:center; font-weight:600; padding-top:16px; font-size:13px; color:var(--text);
}
/* Each editable cell has an input with its own VISIBLE border box */
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-qty input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-uom input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-price input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-disc input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-igst select,
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-qty input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-price input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-disc input{text-align:right}
#pg-add-expense .gst-items-tbl tbody td.gst-c-uom input,
#pg-add-expense .gst-items-tbl tbody td.gst-c-igst select,
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess input{text-align:center}
#pg-add-expense .gst-items-tbl tbody td input:focus,
#pg-add-expense .gst-items-tbl tbody td select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
/* Placeholder text inside each input stays visible + muted */
#pg-add-expense .gst-items-tbl tbody td input::placeholder,
#pg-add-expense .gst-items-tbl tbody td select{color:#94a3b8}
#pg-add-expense .gst-items-tbl tbody td select{color:var(--text)}
#pg-add-expense .gst-items-tbl tbody td.gst-c-cess input{width:100%; padding:8px 6px}

/* Total cell (right-aligned, placeholder grey while zero) */
#pg-add-expense .gst-items-tbl tbody td.gst-c-total{
  text-align:right; padding:10px 12px !important; vertical-align:middle;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-total .gst-total-cell{
  display:inline-block; width:100%;
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--surf);
  font-weight:600; color:var(--text);
  text-align:right;
  box-sizing:border-box;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-total .gst-total-cell.is-placeholder{color:#94a3b8; font-weight:400}

/* Header row: keep vertical separators between columns for polished look */
#pg-add-expense .gst-items-tbl thead th{
  border-right:1px solid var(--bdr);
}
#pg-add-expense .gst-items-tbl thead th:last-child{border-right:none}

/* Row-B (item-note row + IGST amount cell) — align vertical separators
   with Row-A so the "box" look extends across both rows */
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-b > td{
  padding:0 8px 10px;
  border-bottom:1px solid var(--bdr);
  border-right:1px solid var(--bdr);
  vertical-align:top;
}
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-b > td:last-child{border-right:none}
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod-note{padding-top:0}
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod-note .gst-item-note{
  background:var(--brand-bg) !important;
  border:1px solid var(--brand-bg2) !important;
  border-radius:6px !important;
  padding:6px 10px !important;
  margin-top:2px !important;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod-note .gst-item-note textarea{
  width:100%;
  background:transparent;
  border:none; outline:none;
  resize:vertical;
  min-height:28px;
  font-size:12.5px; font-family:inherit;
  color:var(--text);
  padding:0;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod-note .gst-item-note textarea::placeholder{color:#a3a3a3}
#pg-add-expense .gst-items-tbl tbody td.gst-c-prod-note .gst-item-note:focus-within{
  border-color:#fbbf24 !important;
  box-shadow:0 0 0 2px rgba(251,191,36,.20) !important;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-igst-amt-cell{text-align:center}
#pg-add-expense .gst-items-tbl tbody td.gst-c-igst-amt-cell .gst-igst-amt{
  color:var(--muted); font-size:12px;
}

/* Action cell (rowspan=2): hover-only + / − buttons, matches Sale Invoice */
#pg-add-expense .gst-items-tbl tbody td.gst-c-act{
  text-align:center; vertical-align:middle; white-space:nowrap; padding:8px 6px;
  border-bottom:1px solid var(--bdr);
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-add-expense .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:none; color:#fff;
  font-size:16px; font-weight:600; line-height:1; padding:0;
  cursor:pointer;
  transition:opacity .15s ease, transform .12s, background .12s;
  opacity:0 !important; pointer-events:none !important;
}
#pg-add-expense .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn{background:var(--brand); box-shadow:0 2px 5px rgba(37,99,235,.35)}
#pg-add-expense .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{background:#ef4444; margin-left:6px; box-shadow:0 2px 5px rgba(220,38,38,.30)}
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-add-row-btn,
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a:hover .gst-c-act .gst-del-row-btn,
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-add-row-btn,
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a.is-hovered .gst-c-act .gst-del-row-btn{
  opacity:1 !important; pointer-events:auto !important;
}
#pg-add-expense .gst-items-tbl tbody tr.gst-item-row-a.gst-first-row .gst-c-act .gst-del-row-btn{
  display:none !important;
}

/* Yellow "Total Expense Val" footer */
#pg-add-expense .gst-items-tbl tfoot td{
  background:var(--brand-bg);
  font-weight:800; font-size:13px; color:var(--text);
  padding:12px 10px;
  border-top:1px solid var(--bdr);
}
#pg-add-expense .gst-items-tbl tfoot td.c{text-align:center}
#pg-add-expense .gst-items-tbl tfoot td.r{text-align:right}

/* Cell-blank rules (empty spacer cells in Row-B) */
#pg-add-expense .gst-items-tbl tbody td.gst-cell-blank{padding:0}

/* Discount Rs/% pill segment (reuse Sale Invoice style if defined; otherwise) */
.gst-disc-seg{
  display:inline-flex;
  background:var(--surf2);
  border-radius:999px;
  padding:2px;
}
.gst-disc-seg button{
  border:none; background:transparent;
  padding:4px 14px; border-radius:999px;
  font-size:12px; font-weight:600;
  color:var(--muted); cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s;
}
.gst-disc-seg button.on{
  background:var(--brand); color:#fff;
}


/* ── Bottom: empty left + Amount Detail right (matches reference) ── */
.ax-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:16px 0 8px;
}
@media (max-width:900px){
  .ax-bottom-grid{grid-template-columns:1fr}
}
.ax-amt-card{
  display:flex; flex-direction:column;
}
.ax-amt-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 4px;
  border-bottom:1px solid var(--bdr);
  font-size:14px;
}
.ax-amt-row .l{color:var(--text); font-weight:600}
.ax-amt-row .v{color:var(--text); font-weight:600}
.ax-amt-row.grand{
  background:var(--brand-bg);
  padding:12px 12px;
  margin:0 -12px;
  font-weight:800;
}
.ax-amt-row.grand .l,.ax-amt-row.grand .v{font-weight:800; font-size:15px}
.ax-amt-words{
  padding:12px 4px;
  border-bottom:1px solid var(--bdr);
}
.ax-amt-words .lbl{font-size:13px; color:var(--text); font-weight:600; margin-bottom:3px}
.ax-amt-words .val{font-size:12.5px; color:var(--muted); text-transform:uppercase}
.ax-pay-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 4px 4px;
  gap:12px;
}
.ax-pay-row .l{font-size:14px; color:var(--text); font-weight:600}
.ax-pay-row .l .req{color:#dc2626}
.ax-pay-pills{display:flex; gap:10px}
.ax-pay-pill{
  padding:8px 20px;
  border:1.5px solid var(--bdr);
  border-radius:7px;
  background:var(--surf); color:var(--text);
  font-size:12px; font-weight:700; letter-spacing:.3px;
  cursor:pointer; font-family:inherit;
  transition:background .12s, color .12s, border-color .12s;
}
.ax-pay-pill:hover{border-color:var(--brand)}
.ax-pay-pill[data-pay="CASH"].on{background:var(--surf); color:var(--brand-d); border-color:var(--brand-d)}
.ax-pay-pill[data-pay="CHEQUE"].on{background:var(--surf); color:#0ea5e9; border-color:#0ea5e9}
.ax-pay-pill[data-pay="ONLINE"].on{background:var(--surf); color:#8b5cf6; border-color:#8b5cf6}

/* Action bar */
.ax-action-bar{
  display:flex; align-items:center; gap:10px;
  padding:16px 0 24px;
}
.ax-back-btn{padding:8px 22px !important}
.ax-save-btn,.ax-saveprint-btn{padding:8px 22px !important; font-weight:600}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.155 — Right-slide form sidebar (Add / Edit Customer or Vendor,
   Add / Edit Product or Service)
══════════════════════════════════════════════════════════════════════════════ */
#form-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#form-sidebar-wrap.open{pointer-events:auto}

#form-sidebar-wrap .form-sidebar-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .24s ease;
}
#form-sidebar-wrap.open .form-sidebar-scrim{opacity:1}

.form-sidebar-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(880px, 96vw);
  background:var(--surf);
  border-left:1px solid var(--bdr);
  box-shadow:-14px 0 44px rgba(0,0,0,.20);
  transform:translateX(100%);
  transition:transform .30s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
#form-sidebar-wrap.open .form-sidebar-panel{transform:translateX(0)}

.form-sidebar-x{
  position:absolute;
  top:12px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:none; background:transparent; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s, color .12s;
  z-index:2;
}
.form-sidebar-x:hover{background:var(--surf2); color:var(--text)}

.form-sidebar-body{
  flex:1;
  overflow-y:auto;
  padding:22px 26px 26px;
}
/* The form HTML from _custFormHTML / _itemFormHTML was designed for a modal
   container. Since we now host it in a sidebar, unbind any absolute modal
   sizing so it fills the panel naturally. */
.form-sidebar-body .ma-form-modal-v2{
  max-width:none;
  width:100%;
  padding:0;
  margin:0;
  background:transparent;
  box-shadow:none;
  border:none;
}
.form-sidebar-body .ma-modal-title{
  padding:0 0 14px;
  margin:0 0 18px;
  border-bottom:1px solid var(--bdr);
  font-size:16px; font-weight:600; color:var(--text);
}
/* Sticky footer for the Save / Cancel buttons that live inside the form */
.form-sidebar-body .ma-modal-actions{
  position:sticky; bottom:-26px;
  margin:22px -26px -26px;
  padding:14px 26px;
  background:var(--surf);
  border-top:1px solid var(--bdr);
  display:flex; gap:10px; justify-content:flex-end;
  z-index:3;
}

@media (max-width:640px){
  .form-sidebar-panel{width:100vw}
  .form-sidebar-body{padding:18px 16px}
  .form-sidebar-body .ma-modal-actions{margin:22px -16px -18px; padding:12px 16px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.156 — Quick-add 3-dot menu (Sale & Purchase Invoice headers)
══════════════════════════════════════════════════════════════════════════════ */
.ma-qa-wrap{display:inline-block; margin-left:8px}
.ma-qa-btn{
  width:34px; height:34px; border-radius:6px;
  border:1px solid var(--bdr); background:var(--surf);
  color:var(--muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
  padding:0;
}
.ma-qa-btn:hover{background:var(--surf2); color:var(--text); border-color:var(--brand)}

.ma-qa-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:224px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(15,23,42,.16);
  padding:6px;
  z-index:2000;
  animation:qa-fade .12s ease;
}
@keyframes qa-fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}

.ma-qa-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:9px 12px;
  border:none; background:transparent;
  color:var(--text);
  font-size:13px; text-align:left; font-family:inherit;
  border-radius:6px; cursor:pointer;
  transition:background .12s;
}
.ma-qa-item:hover{background:var(--surf2); color:var(--brand)}
.ma-qa-item svg{flex-shrink:0; color:var(--muted)}
.ma-qa-item:hover svg{color:var(--brand)}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.161 — Modern alert / warning / confirm popup
══════════════════════════════════════════════════════════════════════════════ */
.ma-alert-wrap{
  position:fixed; inset:0;
  /* v3.9.817 — alerts and "are you sure?" boxes sit above EVERYTHING.
     At 100000 they opened underneath the layers numbered higher than
     that: the bank sidebar (100045), the header designer (100040) and
     the print-template editor (100050). A warning raised from inside any
     of those was hidden behind it. */
  z-index:2147483640;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  pointer-events:none;
}
.ma-alert-wrap.open{pointer-events:auto}

.ma-alert-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
.ma-alert-wrap.open .ma-alert-scrim{opacity:1}

.ma-alert-box{
  position:relative;
  width:min(440px, 100%);
  background:var(--surf);
  border-radius:14px;
  padding:32px 28px 24px;
  box-shadow:
    0 24px 60px rgba(15,23,42,.22),
    0 8px 20px rgba(15,23,42,.10);
  text-align:center;
  transform:scale(.92);
  opacity:0;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), opacity .20s ease;
  font-family:inherit;
}
.ma-alert-wrap.open .ma-alert-box{transform:scale(1); opacity:1}

/* Icon badge (colored circle with matching SVG inside) */
.ma-alert-icon-wrap{
  position:relative;
  width:72px; height:72px;
  margin:0 auto 20px;
}
.ma-alert-icon-halo{
  position:absolute; inset:0;
  border-radius:50%;
  opacity:.35;
  transform:scale(1.35);
  animation:ma-alert-pulse 1.8s ease-in-out infinite;
}
.ma-alert-icon{
  position:absolute; inset:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ma-alert-icon svg{width:36px; height:36px}
@keyframes ma-alert-pulse{
  0%,100%{transform:scale(1.20); opacity:.28}
  50%{transform:scale(1.45); opacity:.10}
}

/* Type-specific icon coloring */
.ma-alert-error   .ma-alert-icon      {background:#fee2e2; color:#dc2626}
.ma-alert-error   .ma-alert-icon-halo {background:#fee2e2}
.ma-alert-warning .ma-alert-icon      {background:#fef3c7; color:#F59E0B}
.ma-alert-warning .ma-alert-icon-halo {background:#fef3c7}
.ma-alert-success .ma-alert-icon      {background:#D1FAE5; color:#059669}
.ma-alert-success .ma-alert-icon-halo {background:#D1FAE5}
.ma-alert-info    .ma-alert-icon      {background:var(--brand-bg2); color:var(--brand)}
.ma-alert-info    .ma-alert-icon-halo {background:var(--brand-bg2)}
.ma-alert-question .ma-alert-icon      {background:#ede9fe; color:#7c3aed}
.ma-alert-question .ma-alert-icon-halo {background:#ede9fe}
/* v3.9.817 — "are you sure you want to delete?" : red bin, red button */
.ma-alert-delete  .ma-alert-icon      {background:#fee2e2; color:#dc2626}
.ma-alert-delete  .ma-alert-icon-halo {background:#fee2e2}
.ma-alert-delete  .ma-alert-icon svg  {width:32px; height:32px}
.ma-alert-delete  .ma-alert-primary{ background:#dc2626; border-color:#dc2626; box-shadow:0 1px 3px rgba(220,38,38,.28); }
.ma-alert-delete  .ma-alert-primary:hover{ background:#b91c1c; border-color:#b91c1c; }
/* a message with line breaks (a list of items, a two-part warning) keeps
   them, reads from the left, and scrolls rather than outgrowing the screen */
.ma-alert-msg{ white-space:pre-line; }
.ma-alert-multiline .ma-alert-msg{ text-align:left; max-height:46vh; overflow-y:auto; }

.ma-alert-title{
  font-size:18px; font-weight:700; color:var(--text);
  margin:0 0 10px;
  line-height:1.3;
}
.ma-alert-msg{
  font-size:14px; color:var(--muted); line-height:1.55;
  margin:0 0 26px;
  word-wrap:break-word;
}

/* When there's no title (e.g. quick validation popups), tighten the message
   spacing so the box feels balanced. v3.9.162 — matches the reference. */
.ma-alert-wrap.ma-alert-notitle .ma-alert-msg{
  font-size:15.5px; color:var(--text); font-weight:500;
  margin:0 0 24px;
}

.ma-alert-actions{
  display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap;
}
.ma-alert-btn{
  min-width:110px;
  padding:10px 22px;
  border:1px solid var(--bdr);
  border-radius:8px;
  background:var(--surf); color:var(--text);
  font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:background .14s, transform .06s, border-color .12s, color .12s;
}
.ma-alert-btn:hover{background:var(--surf2); border-color:var(--bdr)}
.ma-alert-btn:active{transform:scale(.97)}
.ma-alert-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Primary button — always the brand green (matches the reference screenshot
   where a warning popup still shows a green OK button). This is the modern
   convention: the ICON conveys the type, the BUTTON is the action. */
.ma-alert-primary{
  background:var(--brand,var(--brand)); color:#fff; border-color:var(--brand,var(--brand));
  box-shadow:0 1px 3px rgba(37,99,235,.28);
  min-width:120px;
  padding:11px 28px;
}
.ma-alert-primary:hover{background:var(--brand-d); border-color:var(--brand-d)}

/* v3.9.474 — Colour-match the primary button to the popup type so the
   whole popup reads as one coherent unit (red-icon → red-button for
   errors, amber-icon → amber-button for warnings, etc.). Info +
   question keep the default brand colour. */
.ma-alert-error   .ma-alert-primary{ background:#dc2626; border-color:#dc2626; box-shadow:0 1px 3px rgba(220,38,38,.28); }
.ma-alert-error   .ma-alert-primary:hover{ background:#b91c1c; border-color:#b91c1c; }
.ma-alert-warning .ma-alert-primary{ background:#F59E0B; border-color:#F59E0B; box-shadow:0 1px 3px rgba(245,158,11,.28); }
.ma-alert-warning .ma-alert-primary:hover{ background:#D97706; border-color:#D97706; }
.ma-alert-success .ma-alert-primary{ background:#059669; border-color:#059669; box-shadow:0 1px 3px rgba(5,150,105,.28); }
.ma-alert-success .ma-alert-primary:hover{ background:#047857; border-color:#047857; }

/* Cancel button (in confirms) — muted, clearly secondary */
.ma-alert-cancel{color:var(--muted)}
.ma-alert-cancel:hover{color:var(--text)}

/* Mobile: full-width buttons, tighter padding */
@media (max-width:520px){
  .ma-alert-box{padding:26px 20px 20px; border-radius:12px}
  .ma-alert-title{font-size:16.5px}
  .ma-alert-msg{font-size:13.5px}
  .ma-alert-actions{flex-direction:column-reverse; gap:8px}
  .ma-alert-btn{width:100%}
}

/* Dark theme (respect existing dark mode variables) */
html[data-theme="dark"] .ma-alert-box{background:#1e2436; box-shadow:0 24px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.35)}
html[data-theme="dark"] .ma-alert-scrim{background:rgba(0,0,0,.65)}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.165 — INWARD / OUTWARD PAYMENT redesign
   Scoped to #pg-inward-payment / #pg-outward-payment plus their shared #ip-*
   toolbar / search / list / empty-state / sidebar bits.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar (title left · Summary/Search/Add-New right) ────────────────── */
#pg-inward-payment, #pg-outward-payment{padding:0 20px 20px}
.ip-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom:14px;
}
.ip-toolbar-title{font-size:15px; font-weight:600; color:var(--text)}
.ip-toolbar-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ── Search panel (hidden by default; toggled via "Search" pill) ─────────── */
.ip-search-panel{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  padding:18px;
  margin-bottom:14px;
}
.ip-search-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px 16px;
}
.ip-search-panel .ip-fg{display:flex; flex-direction:column; gap:5px}
.ip-search-panel .ip-fg > label{
  font-size:12.5px; color:var(--text); font-weight:500;
}
.ip-search-panel .ip-fg > input,
.ip-search-panel .ip-fg > select{
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  width:100%;
}
.ip-search-panel .ip-fg > input:focus,
.ip-search-panel .ip-fg > select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.ip-search-actions{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:16px;
}
.ip-search-actions .ma-btn{display:inline-flex; align-items:center; gap:6px}

/* Responsive search grid */
@media (max-width:1200px){ .ip-search-grid{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:900px) { .ip-search-grid{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px) { .ip-search-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:420px) { .ip-search-grid{grid-template-columns:1fr} }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ip-list-card{padding:0; overflow:hidden}
.ip-empty-wrap{
  display:flex; flex-direction:column; align-items:center;
  padding:70px 20px 80px; gap:16px;
}
.ip-empty-title{
  font-size:15px; color:var(--muted); font-weight:500; margin-top:4px;
}
.ip-empty-wrap .ma-btn{padding:9px 22px !important}

/* ── List table ──────────────────────────────────────────────────────────── */
.ip-tbl{width:100%; border-collapse:collapse}
.ip-tbl thead th{
  padding:12px 14px;
  font-size:12.5px; font-weight:600; color:var(--muted);
  text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  text-align:left;
}
.ip-tbl thead th.r{text-align:right}
.ip-tbl thead th.ma-list-sortable{cursor:pointer; user-select:none}
.ip-tbl thead th.ma-list-sortable:hover{color:var(--text)}
.ip-tbl tbody td{
  padding:14px;
  font-size:13px;
  border-bottom:1px solid var(--bdr);
  color:var(--text);
  vertical-align:middle;
}
.ip-tbl tbody td.r{text-align:right}
.ip-tbl tbody tr:last-child td{border-bottom:none}
.ip-cb-col{width:40px; padding-left:14px !important; padding-right:0 !important}
.ip-cb-col input[type="checkbox"]{width:15px; height:15px; accent-color:var(--brand); cursor:pointer}
.ip-recno{color:var(--text)}
.ip-adv-cell{white-space:nowrap}
.ip-adv-cell .ip-adv-sync{
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;
  color:var(--brand);
}

/* Action column */
.ip-tbl thead th.ip-act-col{text-align:right; padding-right:20px}
.ip-tbl tbody td.ip-act-col{text-align:right}
.ip-act-row{
  display:inline-flex; gap:6px; align-items:center;
  justify-content:flex-end;
}
.ip-act-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--text);
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
}
.ip-act-btn:hover{background:var(--surf2); border-color:var(--brand); color:var(--brand)}
.ip-act-btn.ip-act-view svg{color:var(--brand)}
.ip-act-btn.ip-act-edit svg{color:#3b82f6}
.ip-act-more{
  padding:6px 10px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--text);
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  transition:background .12s;
}
.ip-act-more:hover{background:var(--surf2)}

/* Mobile — stack action buttons */
@media (max-width:900px){
  .ip-act-row{flex-direction:column; align-items:stretch; gap:4px}
  .ip-act-btn{width:100%; justify-content:center}
}

/* v3.9.380 — Horizontal scroll for the Inward/Outward Payment list
   tables on mobile. Without this, the 9-column table gets squished
   into whatever card width is available and cells overflow or get
   clipped by the parent card's overflow:hidden. We give the wrapper
   its own scroll axis and set a comfortable min-width on the table
   itself so every column stays legible while the user swipes across. */
#ip-table-wrap-inward,
#ip-table-wrap-outward{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;   /* momentum scroll on iOS */
}
@media (max-width:900px){
  /* Give the tables a comfortable min-width so cells don't collapse.
     900px keeps all 9 columns (checkbox + 7 data + action) readable. */
  #ip-table-wrap-inward .ip-tbl,
  #ip-table-wrap-outward .ip-tbl{ min-width:900px }
  /* Let the parent card allow the scroll rather than clipping it. */
  #pg-inward-payment .ip-list-card,
  #pg-outward-payment .ip-list-card{ overflow:visible }
}

/* ══════════════════════════════════════════════════════════════════════════
   Create/Edit sidebar (right slide-in) — reuses the .ec-side / .ec-scrim
   framework introduced for Add Expense Category. Only new bits: .ip-*
   grid, three-part Receipt-No row, readonly display fields, Share
   checkboxes, and the Attachment click-to-upload zone.
════════════════════════════════════════════════════════════════════════════ */
#ip-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#ip-sidebar-wrap.open{pointer-events:auto}
#ip-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ip-sidebar-wrap.open .ec-scrim{opacity:1}
#ip-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#ip-sidebar-wrap.open .ec-side{transform:translateX(0)}

.ip-side-body{padding:20px 24px 20px}

/* Field row: label (fixed) + control (fills) */
.ip-side-body .ip-fg{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
}
.ip-side-body .ip-fg.ip-fg-top{align-items:start}
.ip-side-body .ip-fg > label{
  font-size:13px; color:var(--text); font-weight:500;
}
.ip-side-body .ip-fg > label .req{color:#dc2626; margin-left:1px}
.ip-side-body .ip-fg > input[type="text"],
.ip-side-body .ip-fg > input[type="number"],
.ip-side-body .ip-fg > input[type="date"],
.ip-side-body .ip-fg > select,
.ip-side-body .ip-fg > textarea{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ip-side-body .ip-fg > input:focus,
.ip-side-body .ip-fg > select:focus,
.ip-side-body .ip-fg > textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.ip-side-body .ip-fg > textarea{resize:vertical; min-height:60px; font-family:inherit}

/* Receipt No — three inputs side-by-side */
.ip-rec-group{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  width:100%;
}
.ip-rec-group input{
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  width:100%;
}
.ip-rec-group input#ip-rec-prefix,
.ip-rec-group input#ip-rec-postfix{
  background:var(--surf2);
  color:var(--muted);
}
.ip-rec-group input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
  background:var(--surf);
  color:var(--text);
}

/* Readonly display fields (Address, GSTIN, Total Outstanding) */
.ip-readonly{
  min-height:38px;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--surf2);
  font-size:13px;
  color:var(--muted);
  box-sizing:border-box;
  display:flex; align-items:center;
  word-break:break-word;
}
.ip-readonly.ip-outstanding{color:var(--text); font-weight:500}

/* Combo wrap inside sidebar takes full width */
.ip-side-body .ip-fg .ma-combo-wrap{width:100%}

/* Share checkboxes stack vertically like the mockup */
.ip-share{display:flex; flex-direction:column; gap:8px}
.ip-share-lbl{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text); cursor:pointer;
}
.ip-share-lbl input[type="checkbox"]{
  width:18px; height:18px;
  accent-color:var(--brand);
  cursor:pointer;
}

/* Attachment click-to-upload zone */
.ip-attach{
  border:1.5px dashed var(--bdr);
  border-radius:8px;
  background:var(--surf2);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ip-attach:hover{
  border-color:var(--brand);
  background:var(--surf);
}
.ip-attach-icon{margin-bottom:8px; display:flex; justify-content:center}
.ip-attach-lbl{
  font-size:13px;
  color:var(--muted);
  font-weight:500;
}

/* Mobile: collapse the label-left / control-right into a stacked layout */
@media (max-width:640px){
  .ip-side-body .ip-fg{grid-template-columns:1fr; gap:6px; align-items:start}
  .ip-side-body .ip-fg > label{margin-bottom:2px}
  .ip-rec-group{grid-template-columns:1fr 1fr}
  #ip-rec-postfix{grid-column:1 / span 2}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.166 — Fix M/S + Category combo styling in Add Expense and Inward /
              Outward Payment sidebar.

   THE PROBLEM (before v3.9.166)
   The two containers .ax-fg and .ip-fg (inside .ip-side-body) both style their
   direct-child inputs with padding/border/etc using the direct-child combinator:

        .ax-fg > input[type="text"] { ... }
        .ip-side-body .ip-fg > input[type="text"] { ... }

   But the actual customer / category input sits nested one level deeper, inside
   .ma-combo-wrap > .ma-combo-input-row > input. So the direct-child rule never
   matched it — the combo input rendered with NO padding, NO border-top/left/
   bottom, no font-size, no background. Meanwhile the shared base rule at
   line 1225 (.ma-combo-input-row input) only sets flex/border-radius/
   min-width — it deliberately leaves the box-model bits to the parent scope
   (that's how Sale Invoice's .gst-fr input rule fills them in via descendant
   selector).

   THE FIX
   Two scoped descendant rules — one for the Add Expense page and one for the
   Payment sidebar — that provide the missing padding/border/height/background,
   plus a matching-height arrow button. Everything mirrors the proven Sale
   Invoice look so all three combos now render identically.
════════════════════════════════════════════════════════════════════════════════ */

/* Combo input inside .ax-fg (Add Expense — M/S + Category) and inside
   .ip-side-body .ip-fg (Payment sidebar — Company Name). */
.ax-fg .ma-combo-input-row > input,
.ip-side-body .ip-fg .ma-combo-input-row > input{
  height:38px;
  padding:0 12px;
  border:1px solid var(--bdr);
  /* Leave border-right:none untouched from the shared base rule */
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
  box-sizing:border-box;
}
.ax-fg .ma-combo-input-row > input:focus,
.ip-side-body .ip-fg .ma-combo-input-row > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
  /* Lift focused input above the arrow so its focus ring isn't clipped */
  position:relative;
  z-index:1;
}

/* Matching-height arrow button so input + arrow form one clean pill */
.ax-fg .ma-combo-arrow,
.ip-side-body .ip-fg .ma-combo-arrow{
  height:38px;
  padding:0 12px;
  border:1px solid var(--bdr);
  border-left:none;
  border-radius:0 6px 6px 0;
  background:var(--surf2);
  color:var(--muted);
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  transition:background .15s, color .15s;
}
.ax-fg .ma-combo-arrow:hover,
.ip-side-body .ip-fg .ma-combo-arrow:hover{
  background:var(--surf3, #f1f5f9);
  color:var(--brand);
}

/* Dropdown itself — inherits the shared .ma-combo-drop base rule (bordered
   box, shadow, animation). Just make sure it sits above sibling fields inside
   the sidebar's scrollable body. */
.ip-side-body .ma-combo-drop{z-index:10}
.ax-fg .ma-combo-drop{z-index:10}

/* And the search box inside the drop — its base rule has border:none, but
   without !important the descendant rule above would win. So add explicit
   scoped rules matching the shared base look. */
.ax-fg .ma-combo-drop .ma-combo-search,
.ip-side-body .ip-fg .ma-combo-drop .ma-combo-search{
  height:auto;
  padding:8px 10px;
  border:none;
  border-bottom:1.5px solid var(--bdr);
  border-radius:8px 8px 0 0;
  background:var(--surf2);
  font-size:12px;
  color:var(--text);
  outline:none;
  width:100%;
  box-sizing:border-box;
}
.ax-fg .ma-combo-drop .ma-combo-search:focus,
.ip-side-body .ip-fg .ma-combo-drop .ma-combo-search:focus{
  box-shadow:none;
  border-color:transparent;
  border-bottom-color:var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.167 — OTHER INCOME redesign
   ──────────────────────────────────────────────────────────────────────────────
   Four related pages: Other Income (list), Income Category (list + sidebar),
   Import Other Income, and Add / Edit Income (full-page form).
   Uses .oi-* prefix for shared list/toolbar chrome, .ic-* for category-specific
   bits, .ii-* for the Import page, and .ai-* for the Add Income form.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar (shared across Other Income + Income Category) ───────────── */
#pg-other-income, #pg-income-category, #pg-import-income, #pg-quotations, #pg-stock, #pg-item-bulk-edit{padding:0 20px 20px}
.oi-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom:14px;
}
.oi-toolbar-title{font-size:15px; font-weight:600; color:var(--text)}
.oi-toolbar-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ── Search panel (hidden by default; toggled via "Search" button) ─────── */
.oi-search-panel{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  padding:18px;
  margin-bottom:14px;
}
.oi-search-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px 16px;
}
.oi-search-panel .oi-fg{display:flex; flex-direction:column; gap:5px}
.oi-search-panel .oi-fg > label{
  font-size:12.5px; color:var(--text); font-weight:500;
}
.oi-search-panel .oi-fg > input,
.oi-search-panel .oi-fg > select{
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  width:100%;
}
.oi-search-panel .oi-fg > input:focus,
.oi-search-panel .oi-fg > select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.oi-search-actions{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:16px;
}
.oi-search-actions .ma-btn{display:inline-flex; align-items:center; gap:6px}

@media (max-width:1200px){ .oi-search-grid{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:900px) { .oi-search-grid{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px) { .oi-search-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:420px) { .oi-search-grid{grid-template-columns:1fr} }

/* ── Empty state ───────────────────────────────────────────────────────── */
.oi-list-card{padding:0; overflow:hidden}
.oi-empty-wrap{
  display:flex; flex-direction:column; align-items:center;
  padding:70px 20px 80px; gap:16px;
}
.oi-empty-title{
  font-size:15px; color:var(--muted); font-weight:500; margin-top:4px;
}
.oi-empty-wrap .ma-btn{padding:9px 22px !important}
.oi-empty-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
}
.oi-empty-actions .ma-btn{
  flex:0 0 auto;    /* don't stretch — keep intrinsic width */
  width:auto;
}
.oi-empty-or{
  font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.5px;
}

/* ── List table (shared with Income Category) ─────────────────────────── */
.oi-tbl{width:100%; border-collapse:collapse}
.oi-tbl thead th{
  padding:12px 14px;
  font-size:12.5px; font-weight:600; color:var(--muted);
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  text-align:left;
}
.oi-tbl thead th.r{text-align:right}
.oi-tbl tbody td{
  padding:14px;
  font-size:13px;
  border-bottom:1px solid var(--bdr);
  color:var(--text);
  vertical-align:middle;
}
.oi-tbl tbody td.r{text-align:right}
.oi-tbl tbody tr:last-child td{border-bottom:none}
.oi-cb-col{width:40px; padding-left:14px !important; padding-right:0 !important}
.oi-cb-col input[type="checkbox"]{width:15px; height:15px; accent-color:var(--brand); cursor:pointer}
.oi-tbl thead th.oi-act-col{text-align:right; padding-right:20px}
.oi-tbl tbody td.oi-act-col{text-align:right}
.oi-act-row{
  display:inline-flex; gap:6px; align-items:center;
  justify-content:flex-end;
}
.oi-act-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--text);
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
}
.oi-act-btn:hover{background:var(--surf2); border-color:var(--brand); color:var(--brand)}
.oi-act-btn.oi-act-view svg{color:var(--brand)}
.oi-act-btn.oi-act-edit svg{color:#3b82f6}
.oi-act-more{
  padding:6px 10px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--text);
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  transition:background .12s;
}
.oi-act-more:hover{background:var(--surf2)}
@media (max-width:900px){
  .oi-act-row{flex-direction:column; align-items:stretch; gap:4px}
  .oi-act-btn{width:100%; justify-content:center}
}

/* Enable toggle inside Income Category rows */
.ic-tgl{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12px}
.ic-tgl input[type="checkbox"]{width:18px; height:18px; accent-color:var(--brand); cursor:pointer}

/* ══════════════════════════════════════════════════════════════════════════
   Add / Edit Income Category — slide-in sidebar (reuses .ec-side framework)
════════════════════════════════════════════════════════════════════════════ */
#ic-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#ic-sidebar-wrap.open{pointer-events:auto}
#ic-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ic-sidebar-wrap.open .ec-scrim{opacity:1}
#ic-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#ic-sidebar-wrap.open .ec-side{transform:translateX(0)}

.ic-side-body{padding:24px 28px 14px}
.ic-side-body .ic-fg{
  display:grid;
  grid-template-columns:120px 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}
.ic-side-body .ic-fg > label{
  font-size:13px; color:var(--text); font-weight:500;
}
.ic-side-body .ic-fg > label .req{color:#dc2626; margin-left:2px}
.ic-side-body .ic-fg > input[type="text"]{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ic-side-body .ic-fg > input[type="text"]:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}

@media (max-width:640px){
  .ic-side-body .ic-fg{grid-template-columns:1fr; gap:6px; align-items:start}
}

/* ══════════════════════════════════════════════════════════════════════════
   Import Other Income page
════════════════════════════════════════════════════════════════════════════ */
.ii-card{padding:0}
.ii-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--bdr);
}
.ii-hdr-title{font-size:15px; font-weight:600; color:var(--text)}
.ii-body{padding:26px 22px}
.ii-fg{
  display:grid;
  grid-template-columns:180px 1fr;
  align-items:start;
  gap:18px;
  margin-bottom:24px;
}
.ii-fg > label{font-size:13px; color:var(--text); font-weight:500; line-height:1.5}
.ii-sub{font-size:11.5px; color:var(--muted); font-weight:400}
.ii-file-wrap input[type="file"]{
  padding:8px;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--surf);
  font-size:13px;
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
}
.ii-actions{display:flex; gap:10px; margin-left:198px}
@media (max-width:640px){
  .ii-fg{grid-template-columns:1fr; gap:8px}
  .ii-actions{margin-left:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.168 — Add / Edit Income — full-page form (#pg-add-income)
   Rebuilt from scratch to match the user-supplied reference precisely:
     • Simple page-title row (no bar / no box)
     • Two cards: Income Detail + Income Items with header + tiny action btn
     • 3 side-by-side fields (label-LEFT of input, narrow label column so
       "Income Date *" wraps naturally, matching the reference)
     • Items table with orange SR, yellow item-note textarea, yellow footer
     • Right-aligned totals + payment column (NO bordered box)
     • Yellow "Grand Total" full-width bar, colour-coded payment pills
       (CASH=green, CHEQUE/ONLINE=violet)
     • Bottom row: Back left, Save & Print + Save right — all within the
       right-aligned column
════════════════════════════════════════════════════════════════════════════ */
#pg-add-income{padding:0 20px 20px}

/* ── Page title (simple text row) ──────────────────────────────────────── */
.ai-page-title{
  display:flex; align-items:center; gap:8px;
  padding:16px 4px 12px;
  font-size:15px; font-weight:500;
  color:var(--text);
}
.ai-page-title svg{color:#3b82f6}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.ai-card{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom:14px;
  overflow:hidden;
}
/* v3.9.170 — The Income Detail card must allow overflow so its Category
   dropdown can hang below the card and float above the Items card that
   follows. Without this, `.ai-card {overflow:hidden}` clips the dropdown
   at the card's rounded bottom edge (visible as a "cut-off" or hidden
   dropdown even with high z-index). Also lift the card in the stacking
   order and start a new stacking context via position:relative + z-index
   so the dropdown's z-index actually beats the sibling Items card. */
.ai-card-detail{
  overflow:visible;
  position:relative;
  z-index:5;
}
.ai-card-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--bdr);
}
.ai-card-title{font-size:14px; font-weight:600; color:var(--text)}
.ai-card-btn{
  width:32px; height:32px; padding:0;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--surf);
  color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
}
.ai-card-btn:hover{background:var(--surf2); color:var(--brand); border-color:var(--brand)}
.ai-card-body{padding:18px 20px}
.ai-items-body{padding:0}

/* ── Income Detail: 3 fields in one row (label-LEFT of input) ─────────── */
.ai-detail-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px 30px;
}
.ai-field{
  display:grid;
  grid-template-columns:75px 1fr;   /* narrow label so "Income Date *" wraps */
  align-items:center;
  gap:10px;
}
.ai-field > label{
  font-size:13px; color:var(--text); font-weight:500;
  line-height:1.35;
}
.ai-field > label .req{color:#dc2626; margin-left:3px}
.ai-field > input[type="text"],
.ai-field > input[type="date"],
.ai-field > input[type="number"]{
  width:100%;
  height:38px;
  padding:0 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ai-field > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.ai-field .ma-combo-wrap{width:100%}

/* Combo input (Category) — same "direct-child-vs-descendant" fix as v3.9.166 */
.ai-field .ma-combo-input-row > input{
  height:38px;
  padding:0 12px;
  border:1px solid var(--bdr);
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.ai-field .ma-combo-input-row > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
  position:relative; z-index:1;
}
.ai-field .ma-combo-arrow{
  height:38px; padding:0 12px;
  border:1px solid var(--bdr); border-left:none;
  border-radius:0 6px 6px 0;
  background:var(--surf2); color:var(--muted);
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:background .15s, color .15s;
}
.ai-field .ma-combo-arrow:hover{background:var(--surf3, #f1f5f9); color:var(--brand)}
.ai-field .ma-combo-drop{z-index:100}
.ai-field .ma-combo-drop .ma-combo-search{
  height:auto; padding:8px 10px;
  border:none;
  border-bottom:1.5px solid var(--bdr);
  border-radius:8px 8px 0 0;
  background:var(--surf2);
  font-size:12px; color:var(--text);
  outline:none; width:100%; box-sizing:border-box;
}

@media (max-width:1024px){ .ai-detail-row{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:640px) { .ai-detail-row{grid-template-columns:1fr; gap:12px} }

/* ══════════════════════════════════════════════════════════════════════════
   Income Items table
════════════════════════════════════════════════════════════════════════════ */
.ai-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  /* v3.9.169 — Fixed layout so the colgroup percentage widths
     (SR 15% / ITEM NAME 50% / PRICE 35%) are respected instead of
     the browser auto-sizing columns to their content. */
  table-layout:fixed;
}
.ai-tbl thead th{
  padding:12px 14px;
  font-size:11.5px; font-weight:600;
  color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  text-align:left;
}
.ai-tbl thead th.ai-th-sr   {text-align:center}
.ai-tbl thead th.ai-th-price{text-align:center}
.ai-tbl tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--bdr);
  vertical-align:top;
  background:var(--surf);
}
.ai-tbl tbody tr:last-child td{border-bottom:none}

.ai-td-sr{
  text-align:center;
  font-weight:600;
  color:#ea580c;   /* Orange, matching reference */
  padding-top:22px !important;
  font-size:14px;
}
.ai-td-name{position:relative}
.ai-td-price{padding-top:12px !important}

/* Item Name input (top) */
.ai-in-name{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  margin-bottom:6px;
}
.ai-in-name:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* Item Note textarea (bottom, yellow like reference) */
.ai-in-note{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--brand-bg2);
  border-radius:6px;
  font-size:12.5px;
  background:var(--brand-bg);   /* light yellow */
  color:#78350f;
  outline:none; font-family:inherit;
  resize:vertical; min-height:48px;
  box-sizing:border-box;
}
.ai-in-note::placeholder{color:#a16207; opacity:.75}
.ai-in-note:focus{border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.18)}

/* Price input */
.ai-in-price{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  text-align:center;
  box-sizing:border-box;
}
.ai-in-price:focus{border-color:var(--brand); box-shadow:0 0 0 2px rgba(37,99,235,.14)}

/* Price cell: flex row so the input sits next to the add/remove circles */
.ai-td-price{padding:12px 10px !important}
.ai-price-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.ai-price-row .ai-in-price{
  flex:1;
  min-width:0;   /* let the input shrink so buttons never overflow */
  margin:0;
}

/* v3.9.170 — Round green (+) add-row and red (−) remove-row buttons, styled
   to match the reference exactly. They sit inside the price cell, aligned
   with the price input. */
.ai-row-btn{
  width:28px; height:28px;
  padding:0;
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.ai-row-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}
.ai-row-btn:active{transform:translateY(0)}
.ai-row-btn.ai-row-add{background:var(--brand)}
.ai-row-btn.ai-row-add:hover{background:var(--brand-d)}
.ai-row-btn.ai-row-del{background:#ef4444}
.ai-row-btn.ai-row-del:hover{background:#dc2626}
.ai-row-btn svg{stroke:#fff; pointer-events:none}

/* Total Inv. Val footer (yellow, both label and value CENTERED per reference) */
.ai-tbl tfoot .ai-total-row td{
  padding:14px 12px;
  background:var(--brand-bg);
  border-top:1px solid var(--brand-bg2);
  border-bottom:none;
  font-weight:600;
  font-size:14px;
  color:var(--text);
  text-align:center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bottom: right-aligned totals + payment + buttons (NO bordered box)
   v3.9.169 — widened from 560px → 720px so the "Round Off … 0.00" row,
              yellow "Grand Total" bar and "Payment Type* [CASH][CHEQUE]
              [ONLINE]" line all have the same spacious feel as the
              reference. Also bumped row padding for a less cramped look.
════════════════════════════════════════════════════════════════════════════ */
.ai-bottom{
  display:flex; justify-content:flex-end;
  padding:6px 0 20px;
}
.ai-bottom-inner{
  /* v3.9.169 — Widened the right-side totals column so it feels visually
     balanced against the wide items table above. On typical 1400–1600px
     screens this now takes ~50–55% width instead of the previous ~35%. */
  width:min(820px, 55%);
  min-width:340px;
  display:flex; flex-direction:column;
  gap:0;
}

/* Round Off + Payment rows */
.ai-line{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px;
  font-size:14px;
}
.ai-line-lbl{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--text); font-weight:500;
}
.ai-line-lbl .req{color:#dc2626}
.ai-line-val{color:var(--text); font-weight:500; font-size:14.5px}

/* Grand Total — yellow highlighted bar spanning the whole right column */
.ai-line.ai-grand{
  background:var(--brand-bg);
  padding:14px 18px;
  margin:0;
  border-radius:4px;
  font-weight:600;
}
.ai-line.ai-grand .ai-line-lbl{font-weight:600; font-size:15px}
.ai-line.ai-grand .ai-line-val{font-weight:700; font-size:16px}

/* Total in words block */
.ai-words{
  padding:14px 12px 4px;
  font-size:13.5px;
  color:var(--text);
}
.ai-words-lbl{font-weight:600; margin-bottom:4px}
.ai-words-val{font-weight:500}

/* Payment Type row */
.ai-pay-row{padding:18px 12px 6px}
.ai-pay-pills{display:flex; gap:10px}
.ai-pay-pill{
  padding:7px 22px;
  border:1px solid #a78bfa;      /* Violet default (matches reference) */
  border-radius:4px;
  background:var(--surf);
  font-size:12.5px; font-weight:600;
  color:#7c3aed;                 /* Violet-600 */
  cursor:pointer;
  transition:all .12s;
  letter-spacing:.5px;
}
.ai-pay-pill:hover{background:rgba(124,58,237,.05)}
/* CASH pill: always green outlined */
.ai-pay-pill[data-pay="CASH"]{
  color:var(--brand);
  border-color:var(--brand);
}
.ai-pay-pill[data-pay="CASH"]:hover{background:rgba(37,99,235,.05)}
/* Selected state — bolder outline, subtle bg tint */
.ai-pay-pill.on{
  background:rgba(37,99,235,.06);
  box-shadow:inset 0 0 0 1px currentColor;
}
.ai-pay-pill[data-pay="CHEQUE"].on,
.ai-pay-pill[data-pay="ONLINE"].on{
  background:rgba(124,58,237,.06);
}

/* Bottom button row: Back left, Save & Print + Save right */
.ai-btn-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 8px 6px;
  gap:12px;
}
.ai-btn-back{
  display:inline-flex; align-items:center; gap:6px;
}
.ai-btn-right{display:flex; gap:10px}
.ai-btn-right .ma-btn{display:inline-flex; align-items:center; gap:5px}

/* Mobile */
@media (max-width:640px){
  .ai-bottom-inner{width:100%}
  .ai-btn-row{flex-direction:column; align-items:stretch}
  .ai-btn-back{justify-content:center}
  .ai-btn-right{flex-direction:column-reverse}
  .ai-pay-row{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.171 — Quotation page redesign
   Reuses .oi-toolbar / .oi-search-panel / .oi-search-grid / .oi-empty-wrap
   from Other Income; only adds:
     • Unsaved(N) pill states — warning tint (drafts exist) and active
       tint (unsaved-only filter engaged).
     • Advance Filter row (Field / Operator / Value + green ⊕ chip list)
════════════════════════════════════════════════════════════════════════════════ */

/* Unsaved (N) pill — warning state when drafts exist */
#pg-quotations .qt-pill-warn{
  color:#b45309;
  border-color:#fde68a;
  background:#fef3c7;
}
#pg-quotations .qt-pill-warn:hover{background:#fde68a}
/* Active state — used when the user clicks the pill to filter to drafts only */
#pg-quotations .qt-pill-active{
  color:var(--brand-dd);
  border-color:var(--brand);
  background:rgba(37,99,235,.08);
}
#pg-quotations .qt-pill-active:hover{background:rgba(37,99,235,.14)}

/* ── Advance Filter block ─────────────────────────────────────────────── */
.qt-adv-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--bdr);
}
.qt-adv-lbl{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.qt-adv-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 40px;
  gap:12px;
  align-items:center;
}
.qt-adv-row > select,
.qt-adv-row > input{
  padding:8px 10px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf);
  color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
  width:100%;
}
.qt-adv-row > select:focus,
.qt-adv-row > input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.qt-adv-add{
  width:36px; height:36px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
  transition:transform .12s, background .12s, box-shadow .12s;
}
.qt-adv-add:hover{
  background:var(--brand-d);
  transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}
.qt-adv-add svg{stroke:#fff; pointer-events:none}

/* Added-filter chips list (below the row) */
.qt-adv-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:10px;
}
.qt-adv-list:empty{margin-top:0}
.qt-adv-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 6px 5px 12px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.25);
  border-radius:16px;
  font-size:12px;
  color:var(--text);
}
.qt-adv-chip b{color:var(--brand); font-weight:600; margin:0 2px}
.qt-adv-chip button{
  width:20px; height:20px;
  padding:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:#ef4444;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.qt-adv-chip button:hover{background:#fee2e2}

/* Responsive advance filter row */
@media (max-width:900px){
  .qt-adv-row{grid-template-columns:1fr 1fr; gap:8px}
  .qt-adv-row > *:nth-child(3){grid-column:1 / span 2}
  .qt-adv-row > *:nth-child(4){grid-column:2}
}
@media (max-width:520px){
  .qt-adv-row{grid-template-columns:1fr; gap:8px}
  .qt-adv-row > *:nth-child(3),
  .qt-adv-row > *:nth-child(4){grid-column:1}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.172 — Customer / Vendor page redesign
   Reuses .oi-toolbar / .oi-search-panel / .oi-empty-wrap (shared with Other
   Income + Quotations). Only new bits:
     • .cust-tabs   — Underline-style tabs with count badges
     • .cust-tab-cnt — Small rounded count badge
     • .cv-view-*   — View-customer modal fields
     • #cc-sidebar-wrap / .cc-* — Column-picker slide-in sidebar
════════════════════════════════════════════════════════════════════════════════ */
#pg-customers{padding:0 20px 20px}

/* Card that contains the tabs + table so background stays clean */
#pg-customers .ma-cv-card{padding:0; overflow:hidden}

/* ── Underline-style tabs ─────────────────────────────────────────────── */
/* v3.9.406 — Customer / Vendor tabs: match the polished WooCommerce-style
   pill layout used by Products / Services (.ma-prod-subtabs). Was: a
   sub-toolbar with an underline animation that felt disconnected from
   the rest of the app. Now: a rounded pill container with an active
   tab that "lifts" via a white background + soft shadow — visually
   consistent with the Product / Categories / Attributes tabs one page
   over. Count badges (.cust-tab-cnt) preserved. Original hover/focus
   animations retained but re-scoped to the new layout. */
.cust-tabs{
  display:inline-flex;
  gap:2px;
  padding:4px;
  margin:14px 18px 12px;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  width:fit-content;
  overflow-x:auto;
  overflow-y:visible;
  max-width:calc(100% - 36px);
}
.cust-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:transparent;
  border:0;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted, #6b7280);
  cursor:pointer !important;
  font-family:inherit;
  transition:background .12s, color .12s, box-shadow .12s;
  white-space:nowrap;
  user-select:none;
  -webkit-tap-highlight-color:rgba(37,99,235,.12);
  outline:none;
  position:relative;
}
.cust-tab:hover{ color:var(--text, #111); }
.cust-tab:focus-visible{
  color:var(--text, #111);
  box-shadow:0 0 0 2px rgba(37,99,235,.25);
}
.cust-tab.active,
.cust-tab.active:hover{
  background:var(--surf, #ffffff);
  color:var(--brand, #2563EB);
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
/* Count badge — pill next to the label. Kept the same shape, adjusted
   the palette so the neutral state blends with the pill background. */
.cust-tab-cnt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px;
  padding:0 8px;
  background:var(--surf3, #e5e7eb);
  color:var(--muted, #6b7280);
  border-radius:11px;
  font-size:11px; font-weight:700;
  transition:background .12s, color .12s;
}
.cust-tab.active .cust-tab-cnt{
  background:var(--brand, #2563EB);
  color:#fff;
}
.cust-tab:hover .cust-tab-cnt{
  color:var(--text, #111);
}
.cust-tab.active:hover .cust-tab-cnt{
  color:#fff;
}

/* ── View-customer modal (opened from the row's View button) ─────────── */
.cv-view-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  margin-bottom:14px;
}
.cv-view-row{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 0;
  border-bottom:1px dashed var(--bdr);
}
.cv-view-row:nth-last-child(-n+2){border-bottom:none}
.cv-view-lbl{
  font-size:11.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:500;
}
.cv-view-val{
  font-size:13.5px;
  color:var(--text);
  font-weight:500;
}
.cv-view-block{
  margin-top:8px;
  padding:10px 12px;
  background:var(--surf2);
  border-radius:6px;
}
.cv-view-block .cv-view-lbl{margin-bottom:4px}
@media (max-width:640px){ .cv-view-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════════
   Columns sidebar — slide-in panel with a checkbox per column
════════════════════════════════════════════════════════════════════════════ */
#cc-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  /* v3.9.179 — same font-family fix as #cv-view-sidebar-wrap. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--text);
}
#cc-sidebar-wrap.open{pointer-events:auto}
#cc-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#cc-sidebar-wrap.open .ec-scrim{opacity:1}
#cc-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 92vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#cc-sidebar-wrap.open .ec-side{transform:translateX(0)}

.cc-side-body{padding:20px 24px 12px}
.cc-hint{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:16px;
  padding:10px 12px;
  background:var(--surf2);
  border-radius:6px;
}
.cc-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px;
  border-bottom:1px solid var(--bdr);
  cursor:pointer;
  font-size:13.5px;
  color:var(--text);
}
.cc-item:last-child{border-bottom:none}
.cc-item:hover{color:var(--brand)}
.cc-toggle{
  width:20px; height:20px;
  accent-color:var(--brand);
  cursor:pointer;
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.174 — View-Customer sidebar ("Company Details") + Polished Mobile view
   Rebuilt from scratch to match the reference video + mockup screenshots.
════════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   VIEW SIDEBAR — "Company Details"
   Right slide-in panel with sectioned layout: green icon in tinted bubble
   + section title, then a two-column label / value list. Matches the
   reference exactly (Billing Address, Shipping Address with count + Manage,
   Contact, Opening Balance, Custom Fields, Additional Details).
   ──────────────────────────────────────────────────────────────────────── */
#cv-view-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  /* v3.9.179 — these sidebars are appended to <body>, outside #ma-shell, so
     the app font stack doesn't propagate. WordPress' body font (Open Sans on
     many themes) would otherwise leak into every label / value. Force the
     app's font stack here so the whole sidebar reads consistently. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--text);
}
#cv-view-sidebar-wrap.open{pointer-events:auto}
#cv-view-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.42);
  opacity:0;
  transition:opacity .22s ease;
}
#cv-view-sidebar-wrap.open .ec-scrim{opacity:1}
#cv-view-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  /* v3.9.177 — widened from 560px → 720px so the two-column label/value
     rows have more breathing room on desktop / laptop. Still capped at
     96vw so it never overflows small screens. */
  width:min(720px, 96vw);
  background:#fafbfc;
  box-shadow:-14px 0 44px rgba(0,0,0,.20);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#cv-view-sidebar-wrap.open .ec-side{transform:translateX(0)}

.cv-side-head{
  padding:16px 24px !important;
  background:var(--surf);
  border-bottom:1px solid var(--bdr);
}
.cv-side-head .ec-side-title{
  font-size:16px !important;
  font-weight:600 !important;
  color:var(--text);
}
.cv-side-head .ec-side-x{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--surf2);
  color:var(--muted);
  border:none;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.cv-side-head .ec-side-x:hover{background:#e5e7eb; color:var(--text)}

.cv-side-body{
  padding:16px 20px 20px;
  overflow-y:auto;
  flex:1;
  background:#fafbfc;
}

/* Company name + type badge (top of body) */
.cv-side-hdr-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 4px 12px;
  margin-bottom:6px;
}
.cv-side-hdr-name{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-side-type-badge{
  display:inline-flex; align-items:center;
  padding:3px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  flex-shrink:0;
}
.cv-side-type-badge.is-cust{background:var(--brand-bg2); color:var(--brand-d)}
.cv-side-type-badge.is-supp{background:#fee2e2; color:#b91c1c}
.cv-side-type-badge.is-both{background:var(--brand-bg); color:#b45309}

/* Sections — each in its own white rounded card, matching reference */
.cv-side-sec{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}
.cv-side-sec-h{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--bdr);
  font-size:14px; font-weight:600;
  color:var(--text);
}
.cv-side-sec:has(.cv-side-list) .cv-side-sec-h,
.cv-side-sec:has(.cv-side-empty) .cv-side-sec-h{border-bottom:1px solid var(--bdr)}
.cv-side-sec:not(:has(.cv-side-list)):not(:has(.cv-side-empty)) .cv-side-sec-h{border-bottom:none}

.cv-side-sec-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  background:var(--brand-bg);   /* light green tint */
  color:var(--brand);
  border-radius:6px;
  flex-shrink:0;
}
.cv-side-sec-t{flex:1}
.cv-side-sec-r{
  display:inline-flex; align-items:center; gap:10px;
}
.cv-side-sec-cnt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px;
  padding:0 8px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:11.5px; font-weight:700;
  line-height:1;
}
.cv-side-sec-btn{
  padding:6px 16px;
  border:none;
  border-radius:6px;
  background:var(--brand);
  color:#fff;
  font-size:12px; font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.cv-side-sec-btn:hover{background:var(--brand-d)}

/* Two-column label / value rows inside a section */
.cv-side-list{padding:6px 18px 12px}
.cv-side-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:14px;
  padding:9px 0;
  font-size:13px;
  border-bottom:1px dashed transparent;
}
.cv-side-row:not(:last-child){border-bottom:1px solid #f1f5f9}
.cv-side-lbl{color:var(--text); font-weight:500}
.cv-side-val{color:var(--text); word-break:break-word}
.cv-side-dash{color:var(--muted)}
.cv-side-empty{
  padding:16px 18px 20px;
  color:var(--muted);
  font-size:12.5px; font-style:italic;
  text-align:center;
}

/* Footer: just a Close button, matching reference */
.cv-side-foot{
  padding:12px 22px !important;
  background:var(--surf);
  border-top:1px solid var(--bdr);
  display:flex; justify-content:flex-start !important;
  gap:10px;
}
.cv-side-foot .ma-btn{
  padding:8px 18px !important;
  font-size:13px;
  border-radius:8px;
  display:inline-flex; align-items:center;
}

@media (max-width:640px){
  #cv-view-sidebar-wrap .ec-side{width:100vw}
  .cv-side-row{grid-template-columns:1fr; gap:2px; padding:8px 0}
  .cv-side-lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
  .cv-side-val{font-size:13.5px; font-weight:500}
  .cv-side-list{padding:6px 16px 10px}
  .cv-side-sec-h{padding:12px 16px}
  .cv-side-body{padding:12px 14px 14px}
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.175 — Customer / Vendor MOBILE VIEW, rebuilt to match user's images
   ──────────────────────────────────────────────────────────────────────────────
   Reference (two static screenshots the user provided):

     COLLAPSED (image 1):
       ┌─────────────────────────────────────────┐
       │ [☐] Name                          [☰]   │  ← header row (light gray label + column icon)
       ├─────────────────────────────────────────┤
       │ [☐] Theme Markets                 [+]   │  ← data row (black name + circled +)
       └─────────────────────────────────────────┘

     EXPANDED (image 2):
       ┌─────────────────────────────────────────┐
       │ [☐] Name                          [☰]   │
       ├─────────────────────────────────────────┤
       │ [☐] Theme Markets                 [−]   │  ← name in GREEN, row has GRAY BG
       ├─────────────────────────────────────────┤
       │ Contact Person          Theme Markets   │  ← bold black label ┃ value on right
       │ Get Outstanding         Get Oustanding  │  ← value in GREEN
       │ Phone                                 - │
       │ Type                            Customer│
       │ State                            Gujarat│
       │ City                              Rajkot│
       ├─────────────────────────────────────────┤
       │ Action                           [Edit] │  ← Edit on its own line
       │                          [View] [ ▾ ]   │  ← then View + dropdown below
       └─────────────────────────────────────────┘

   Key rules:
     • ONE white card wraps the whole list (not one per row)
     • Header row visible on mobile — only Name + column-picker icon
     • Data row → simple flex line: [cb] Name [toggle]
     • Expanded name row: light gray bg + name text turns green
     • Detail cells become "Label ┃ Value" rows using ::before pseudo
     • Action cell becomes "Action ┃ [buttons stacked right]"
     • Toggle is a bordered circle (light gray border, white bg, muted color)
════════════════════════════════════════════════════════════════════════════════ */

/* Desktop: hide mobile-only pieces so nothing leaks */
.ma-cust-toggle{display:none}
.ma-cust-sub{display:none}
/* v3.9.180 — same for Products / Services.
   v3.9.324 — SCOPED to the products/stock list. The unscoped
   `.ma-item-toggle{display:none}` rule was clobbering the
   Print Options on/off switches in Settings (they reuse the same
   class name for the on/off checkbox slider).  We only want the
   MOBILE row-expand chevron in #pg-stock hidden on desktop. */
#pg-stock .ma-list-tbl .ma-item-toggle{display:none}
#pg-stock .ma-list-tbl .ma-item-sub{display:none}
.cust-kebab-btn{display:none}

@media (max-width:720px){
  /* ── Page frame: gentle gray canvas around the card ───────────────── */
  #pg-customers{
    padding:12px;
    background:#f5f6f8;
    min-height:calc(100vh - 60px);
  }

  /* ── Toolbar: single rounded white card with icon-only buttons ────── */
  #pg-customers .oi-toolbar{
    padding:14px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    margin-bottom:12px;
    gap:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-customers .oi-toolbar-title{
    font-size:14px;
    font-weight:600;
    flex:1; min-width:0;
    color:var(--text);
  }
  #pg-customers .oi-toolbar-actions{gap:6px !important; flex-wrap:nowrap}
  /* Hide button text labels — keep icons only.
     v3.9.177 — hide only the "Add New" text label; keep the "+" glyph
     visible so the green button shows something on mobile (was rendering
     as a blank green square before). */
  #pg-customers .oi-toolbar-actions .ma-list-pill span,
  #pg-customers .oi-toolbar-actions .cust-add-lbl{display:none}
  /* Also hide the Import pill entirely on mobile (available via ⋮ menu).
     Uses combined class selector `.ma-list-pill.cust-imp-pill` for higher
     specificity than the later `.ma-list-pill{display:inline-flex!important}`
     rule (equal specificity → source order wins → later would win). */
  #pg-customers .oi-toolbar-actions .ma-list-pill.cust-imp-pill{display:none !important}
  /* Show the kebab on mobile */
  #pg-customers .cust-kebab-btn{
    display:inline-flex !important;
    width:38px !important; height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    align-items:center;
    justify-content:center;
    color:var(--muted);
  }
  /* All toolbar pills become 38x38 icon squares */
  #pg-customers .oi-toolbar-actions .ma-list-pill{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
  /* Green + button — just the plus icon, no text.
     v3.9.177 — the visible child is `.cust-add-plus` (a <span>+</span>);
     scale it up so the glyph fills the 38x38 button nicely. */
  #pg-customers .oi-toolbar-actions .ma-list-add{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    background:var(--brand);
    color:#fff;
    border:none;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    font-size:20px; line-height:1;
    cursor:pointer;
  }
  #pg-customers .oi-toolbar-actions .ma-list-add .cust-add-plus{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:400;
    color:#fff;
    margin:0 !important;
  }

  /* ── Search panel: 2-col grid ─────────────────────────────────────── */
  #pg-customers .oi-search-panel{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:14px 14px 16px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-customers .oi-search-grid{grid-template-columns:1fr 1fr; gap:12px}
  #pg-customers .qt-adv-row{grid-template-columns:1fr; gap:8px}

  /* ── Tabs: their own rounded card, underline style ────────────────── */
  #pg-customers .ma-cv-card{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  #pg-customers .cust-tabs{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:0 4px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    justify-content:space-around;
  }
  #pg-customers .cust-tab{
    padding:12px 8px;
    font-size:13px;
    flex:1;
    justify-content:center;
  }

  /* ══════════════════════════════════════════════════════════════════
     THE LIST: one white card wrapping the whole table.
  ══════════════════════════════════════════════════════════════════ */
  #pg-customers .ma-list-tbl{
    display:block;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    /* v3.9.175 — override the legacy `.ma-list-tbl{min-width:920px}` rule
       from the @media (max-width:760px) block above (line ~4721). Without
       this the table forces 920px width and the whole card overflows the
       viewport horizontally. */
    min-width:0 !important;
  }
  /* Also make sure the wrapping card doesn't add horizontal scroll */
  #pg-customers #cust-table-wrap{overflow:visible; min-width:0}

  /* ── HEADER ROW ────────────────────────────────────────────────────
     Show only: checkbox, "Name" label, column-picker icon on the right.
     Everything else in the thead is hidden.                            */
  #pg-customers .ma-list-tbl thead{display:block}
  #pg-customers .ma-list-tbl thead tr{
    display:flex;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid #e5e7eb;
    background:transparent;
  }
  #pg-customers .ma-list-tbl thead th{
    padding:0;
    background:transparent;
    border:none;
    font-size:13.5px;
    font-weight:600;
    color:var(--muted);
    text-align:left;
    text-transform:none;    /* override any uppercase styling */
    letter-spacing:normal;
  }
  #pg-customers .ma-list-tbl thead th.ma-cb-col{
    width:auto;
    margin-right:14px;
    padding:0;
  }
  #pg-customers .ma-list-tbl thead th.ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    display:block;
  }
  #pg-customers .ma-list-tbl thead th[data-col="name"]{
    flex:1;
    color:var(--text);
    font-weight:600;
  }
  /* Hide all other column headers on mobile */
  #pg-customers .ma-list-tbl thead th[data-col="contact"],
  #pg-customers .ma-list-tbl thead th[data-col="outstanding"],
  #pg-customers .ma-list-tbl thead th[data-col="phone"],
  #pg-customers .ma-list-tbl thead th[data-col="type"],
  #pg-customers .ma-list-tbl thead th[data-col="state"],
  #pg-customers .ma-list-tbl thead th[data-col="city"]{display:none !important}
  /* Action header: keep only the column-picker icon */
  #pg-customers .ma-list-tbl thead th.ma-act-col{
    width:auto;
    text-align:right;
    padding:0;
  }
  #pg-customers .ma-list-tbl thead th.ma-act-col .ma-th-label{display:none}
  #pg-customers .ma-list-tbl thead th.ma-act-col .ma-col-pick{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:36px; height:32px;
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    border-radius:8px;
    color:#6b7280;
    padding:0;
    cursor:pointer;
    margin:0;
  }
  #pg-customers .ma-list-tbl thead th.ma-act-col .ma-col-pick:hover{
    background:#e5e7eb;
    color:var(--brand);
    border-color:var(--brand);
  }

  /* ── BODY ROWS ─────────────────────────────────────────────────────── */
  #pg-customers .ma-list-tbl tbody{display:block}

  #pg-customers .ma-list-tbl tr.ma-cust-row{
    display:block;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    margin:0;
    box-shadow:none;
    position:relative;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row:not(:last-child){
    border-bottom:1px solid #f3f4f6;
  }

  /* Every td starts as block/no-border; overrides below turn some back on */
  #pg-customers .ma-list-tbl tr.ma-cust-row td{
    display:block;
    padding:0;
    border:none;
    font-size:13.5px;
    color:var(--text);
    line-height:1.4;
  }

  /* ── THE NAME ROW: flex — [☐] name [+/-] ────────────────────────── */
  /* On mobile the checkbox td + name td render as one flex line. */
  #pg-customers .ma-list-tbl tr.ma-cust-row .ma-cb-col{
    display:inline-block;
    padding:0;
    margin:0;
    vertical-align:middle;
    position:absolute;
    top:14px;
    left:16px;
    z-index:1;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row .ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    cursor:pointer;
    display:block;
  }

  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno{
    display:block;
    padding:14px 60px 14px 46px;    /* leaves room for cb-left and toggle-right */
    color:var(--text);
    position:relative;
    min-height:20px;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno .ma-cust-name{
    display:inline;
    font-size:13.5px;
    font-weight:500;
    color:var(--text);
    line-height:1.4;
  }
  /* Hide the subtitle we render — reference shows only the name */
  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno .ma-cust-sub{
    display:none !important;
  }

  /* Toggle button (+/-) — bordered circle, right-aligned in name row */
  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno .ma-cust-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    background:#fff;
    border:1.5px solid #d1d5db;
    color:#6b7280;
    border-radius:50%;
    padding:0;
    cursor:pointer;
    transition:border-color .12s, color .12s, background .12s;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno .ma-cust-toggle:hover{
    border-color:var(--brand);
    color:var(--brand);
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row .ma-cust-toggle-minus{display:none}
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded .ma-cust-toggle-plus{display:none}
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded .ma-cust-toggle-minus{display:inline-block}

  /* ── EXPANDED STATE: gray tint on name row + green name ─────────── */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-list-invno{
    background:#f9fafb;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-list-invno .ma-cust-name{
    color:var(--brand);
    font-weight:600;
  }
  /* Toggle button on expanded row */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-list-invno .ma-cust-toggle{
    background:#fff;
    border-color:#9ca3af;
    color:#6b7280;
  }

  /* ── DETAIL ROWS (visible only when expanded) ─────────────────────
     Each td becomes: "Label ............ Value"
     Label is bold black on left, value on right.                       */

  /* Hidden by default */
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="Contact Person"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="Get Outstanding"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="Phone"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="Type"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="State"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td[data-label="City"],
  #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-act-col{
    display:none;
  }

  /* Shown when expanded — flex row with label + value */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="Contact Person"],
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="Get Outstanding"],
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="Phone"],
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="Type"],
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="State"],
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="City"]{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    border-top:1px solid #f3f4f6;
    font-size:13px;
    color:var(--text);
    text-align:right;
  }

  /* Label pseudo-element on the LEFT of every detail row */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{
    content: attr(data-label);
    font-weight:700;
    color:#111827;
    font-size:13px;
    text-align:left;
    flex:0 0 auto;
    margin-right:12px;
  }

  /* Get Outstanding value in green */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label="Get Outstanding"] .ma-get-outstanding{
    color:var(--brand);
    text-decoration:none;
    font-weight:500;
  }

  /* ── ACTION ROW ─────────────────────────────────────────────────── */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:12px 16px;
    border-top:1px solid #f3f4f6;
    text-align:left;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col::before{
    content: "Action";
    font-weight:700;
    color:#111827;
    font-size:13px;
    padding-top:7px;    /* aligns with first button vertically */
    flex:0 0 auto;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act{
    display:flex !important;
    flex-direction:column !important;    /* Edit on top, [View ▾] below */
    align-items:flex-end;
    gap:8px;
  }

  /* Edit / View buttons — gray pill boxes with icon + label */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-btn{
    display:inline-flex;
    align-items:center; gap:6px;
    padding:7px 14px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12.5px !important;
    font-weight:500 !important;
    width:auto !important;
    height:auto !important;
    min-width:0;
    cursor:pointer;
    text-transform:none;    /* prevent any leaked uppercase */
    letter-spacing:normal;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-btn:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }
  /* Show the label text (was hidden earlier) */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act .ma-act-lbl{
    display:inline !important;
  }
  /* View + dropdown row (second line of the action stack) */
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-row{
    display:inline-flex;
    gap:6px;
    flex-direction:row;
    align-items:center;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-more{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:7px 12px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    height:auto;
    width:auto;
    min-width:0;
  }
  #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-more:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }

  /* ── EMPTY STATE inside the card ────────────────────────────────── */
  #pg-customers .oi-empty-wrap{
    padding:40px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #pg-customers .oi-empty-title{
    font-size:14px;
    color:#6b7280;
    text-align:center;
  }
  #pg-customers .oi-empty-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:100%;
  }
  #pg-customers .oi-empty-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:10px 16px !important;
  }
  #pg-customers .oi-empty-or{text-align:center; padding:2px 0; color:var(--muted); font-size:12px}

  /* Bulk-select bar tighter on mobile */
  #pg-customers #cust-bulk-bar{
    margin:0 0 12px !important;
    border-radius:12px;
    flex-wrap:wrap;
  }

  /* Pagination centered */
  #pg-customers .ma-pagination{
    margin-top:8px;
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.175 — Kebab dropdown popover + Sort-By sidebar (restored)
   These styles were lost when the old v3.9.174 block was pruned during the
   mobile-view rewrite. They're needed by openCustKebabMenu / openCustSortSidebar
   in app.js.
════════════════════════════════════════════════════════════════════════════════ */

/* Kebab dropdown menu (floats near the 3-dot button on mobile) */
.cust-kebab-menu{
  position:fixed;
  z-index:10800;
  min-width:210px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:10px;
  padding:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  animation:cust-kebab-in .14s ease;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
@keyframes cust-kebab-in{
  from{opacity:0; transform:translateY(-4px)}
  to  {opacity:1; transform:translateY(0)}
}
.cust-kebab-item{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:13.5px;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:6px;
  transition:background .12s;
}
.cust-kebab-item:hover{background:var(--surf2)}
.cust-kebab-item svg{color:var(--muted); flex-shrink:0}
.cust-kebab-item:hover svg{color:var(--brand)}

/* Sort-By sidebar (opened from the kebab → Sort By) */
#cust-sort-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  /* v3.9.179 — same font-family fix. */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--text);
}
#cust-sort-wrap.open{pointer-events:auto}
#cust-sort-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#cust-sort-wrap.open .ec-scrim{opacity:1}
#cust-sort-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 92vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#cust-sort-wrap.open .ec-side{transform:translateX(0)}
.cs-side-body{padding:20px 24px}
.cs-fg{margin-bottom:18px}
.cs-fg > label{
  display:block;
  font-size:13px;
  color:var(--text);
  font-weight:500;
  margin-bottom:8px;
}
.cs-fg > select{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13px;
  background:var(--surf); color:var(--text);
  outline:none; font-family:inherit;
  box-sizing:border-box;
}
.cs-fg > select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.cs-radio-row{display:flex; flex-direction:column; gap:10px}
.cs-radio-row label{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
  transition:border-color .12s, background .12s;
}
.cs-radio-row label:hover{border-color:var(--brand); background:var(--surf2)}
.cs-radio-row input[type="radio"]{accent-color:var(--brand)}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.178 — Products / Services page redesign
     • #pg-stock inherits the customer/vendor layout (.oi-toolbar, .oi-search-*,
       .cust-tabs, .oi-empty-wrap, .qt-adv-*) with only minor scoped tweaks.
     • #pg-item-bulk-edit is a brand-new page for the Excel upload flow shown
       in the reference image 2.
════════════════════════════════════════════════════════════════════════════════ */

/* Products page — cleaner card container matching customer page */
#pg-stock .ma-cv-card{padding:0; overflow:hidden}

/* ── Bulk Edit Products page ──────────────────────────────────────── */
#pg-item-bulk-edit .ibe-body-card{
  padding:24px 26px 22px;
}
#pg-item-bulk-edit .ibe-upload-row{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:6px 0 18px;
}
#pg-item-bulk-edit .ibe-upload-lbl{
  flex:0 0 auto;
  min-width:130px;
  padding-top:6px;
}
#pg-item-bulk-edit .ibe-upload-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
}
#pg-item-bulk-edit .ibe-upload-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
#pg-item-bulk-edit .ibe-upload-input{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:4px;
}
#pg-item-bulk-edit .ibe-choose-btn{
  display:inline-flex;
  align-items:center;
  padding:7px 16px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:7px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
#pg-item-bulk-edit .ibe-choose-btn:hover{
  background:var(--surf2);
  border-color:var(--brand);
  color:var(--brand);
}
#pg-item-bulk-edit .ibe-file-name{
  font-size:13px;
  color:var(--muted);
}
#pg-item-bulk-edit .ibe-actions{
  display:flex;
  gap:10px;
  padding-top:6px;
}
#pg-item-bulk-edit .ibe-actions .ma-btn{
  padding:9px 18px !important;
  font-size:13px;
}

/* v3.9.180 — old #pg-stock mobile block removed; superseded by the customer/vendor-mirror block below */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.179 — Item Columns picker sidebar + font fix
   The sidebar matches the "Select Columns to Display" reference: a scrollable
   list with a drag-handle icon on the left, column label, and a green toggle
   switch on the right. Header has close X. Footer has Close + green Save.
════════════════════════════════════════════════════════════════════════════════ */
#ic-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  /* Same font fix as other body-appended sidebars */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--text);
}
#ic-sidebar-wrap.open{pointer-events:auto}
#ic-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ic-sidebar-wrap.open .ec-scrim{opacity:1}
#ic-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#ic-sidebar-wrap.open .ec-side{transform:translateX(0)}

.ic-side-head{
  padding:16px 22px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.ic-side-head .ec-side-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
.ic-side-head .ec-side-x{
  width:32px; height:32px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
.ic-side-head .ec-side-x:hover{background:var(--surf2); color:var(--text)}

.ic-side-body{
  flex:1 1 auto;
  padding:8px 4px;
  overflow-y:auto;
}
.ic-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 20px;
  cursor:pointer;
  font-size:14px;
  color:var(--text);
  transition:background .12s;
}
.ic-item:hover{background:var(--surf2)}
.ic-left{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.ic-handle{
  display:inline-flex;
  align-items:center; justify-content:center;
  color:#9ca3af;
  flex-shrink:0;
}
.ic-label{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* iOS-style toggle switch */
.ic-toggle{
  position:relative;
  display:inline-block;
  width:38px; height:22px;
  flex-shrink:0;
}
.ic-toggle input[type="checkbox"]{
  opacity:0;
  position:absolute;
  inset:0;
  margin:0;
  width:100%; height:100%;
  cursor:pointer;
  z-index:2;
}
.ic-toggle-track{
  position:absolute;
  inset:0;
  background:#d1d5db;
  border-radius:11px;
  transition:background .18s;
}
.ic-toggle-track::before{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .18s;
}
.ic-toggle input[type="checkbox"]:checked + .ic-toggle-track{
  background:var(--brand);
}
.ic-toggle input[type="checkbox"]:checked + .ic-toggle-track::before{
  transform:translateX(16px);
}

.ic-side-foot{
  padding:12px 18px;
  border-top:1px solid var(--bdr);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:var(--surf);
}
.ic-side-foot .ma-btn{
  padding:9px 20px !important;
  font-size:13px;
  display:inline-flex;
  align-items:center;
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.180 — Products / Services MOBILE VIEW
   ──────────────────────────────────────────────────────────────────────────────
   Mirrors the customer/vendor mobile card pattern so #pg-stock rows behave
   identically: single white card wraps the whole list, header row with
   [☐] Name [☰], data rows collapsed to [☐] name [+], expand for details
   (Product Group / Purchase Price / Sell Price / HSN Code) + action row.
════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* ── Page frame: gentle gray canvas around the card ───────────────── */
  #pg-stock{
    padding:12px;
    background:#f5f6f8;
    min-height:calc(100vh - 60px);
  }

  /* ── Toolbar: single rounded white card with icon-only buttons ────── */
  #pg-stock .oi-toolbar{
    padding:14px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    margin-bottom:12px;
    gap:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-stock .oi-toolbar-title{
    font-size:14px;
    font-weight:600;
    flex:1; min-width:0;
    color:var(--text);
  }
  #pg-stock .oi-toolbar-actions{gap:6px !important; flex-wrap:nowrap}
  /* Hide button text labels — keep icons only.
     v3.9.177 — hide only the "Add New" text label; keep the "+" glyph
     visible so the green button shows something on mobile (was rendering
     as a blank green square before). */
  #pg-stock .oi-toolbar-actions .ma-list-pill span,
  #pg-stock .oi-toolbar-actions .item-add-lbl{display:none}
  /* Also hide the Import pill entirely on mobile (available via ⋮ menu).
     Uses combined class selector `.ma-list-pill.item-imp-pill` for higher
     specificity than the later `.ma-list-pill{display:inline-flex!important}`
     rule (equal specificity → source order wins → later would win). */
  #pg-stock .oi-toolbar-actions .ma-list-pill.item-imp-pill{display:none !important}
  /* Show the kebab on mobile */
  #pg-stock .item-kebab-btn{
    display:inline-flex !important;
    width:38px !important; height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    align-items:center;
    justify-content:center;
    color:var(--muted);
  }
  /* All toolbar pills become 38x38 icon squares */
  #pg-stock .oi-toolbar-actions .ma-list-pill{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
  /* Green + button — just the plus icon, no text.
     v3.9.177 — the visible child is `.item-add-plus` (a <span>+</span>);
     scale it up so the glyph fills the 38x38 button nicely. */
  #pg-stock .oi-toolbar-actions .ma-list-add{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    min-width:0;
    border-radius:8px !important;
    background:var(--brand);
    color:#fff;
    border:none;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    font-size:20px; line-height:1;
    cursor:pointer;
  }
  #pg-stock .oi-toolbar-actions .ma-list-add .item-add-plus{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:400;
    color:#fff;
    margin:0 !important;
  }

  /* ── Search panel: 2-col grid ─────────────────────────────────────── */
  #pg-stock .oi-search-panel{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:14px 14px 16px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-stock .oi-search-grid{grid-template-columns:1fr 1fr; gap:12px}
  #pg-stock .qt-adv-row{grid-template-columns:1fr; gap:8px}

  /* ── Tabs: their own rounded card, underline style ────────────────── */
  #pg-stock .ma-cv-card{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  #pg-stock .cust-tabs{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:0 4px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    justify-content:space-around;
  }
  #pg-stock .cust-tab{
    padding:12px 8px;
    font-size:13px;
    flex:1;
    justify-content:center;
  }

  /* ══════════════════════════════════════════════════════════════════
     THE LIST: one white card wrapping the whole table.
  ══════════════════════════════════════════════════════════════════ */
  #pg-stock .ma-list-tbl{
    display:block;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    /* v3.9.175 — override the legacy `.ma-list-tbl{min-width:920px}` rule
       from the @media (max-width:760px) block above (line ~4721). Without
       this the table forces 920px width and the whole card overflows the
       viewport horizontally. */
    min-width:0 !important;
  }
  /* Also make sure the wrapping card doesn't add horizontal scroll */
  #pg-stock #cust-table-wrap{overflow:visible; min-width:0}

  /* ── HEADER ROW ────────────────────────────────────────────────────
     Show only: checkbox, "Name" label, column-picker icon on the right.
     Everything else in the thead is hidden.                            */
  #pg-stock .ma-list-tbl thead{display:block}
  #pg-stock .ma-list-tbl thead tr{
    display:flex;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid #e5e7eb;
    background:transparent;
  }
  #pg-stock .ma-list-tbl thead th{
    padding:0;
    background:transparent;
    border:none;
    font-size:13.5px;
    font-weight:600;
    color:var(--muted);
    text-align:left;
    text-transform:none;    /* override any uppercase styling */
    letter-spacing:normal;
  }
  #pg-stock .ma-list-tbl thead th.ma-cb-col{
    width:auto;
    margin-right:14px;
    padding:0;
  }
  #pg-stock .ma-list-tbl thead th.ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    display:block;
  }
  #pg-stock .ma-list-tbl thead th[data-col="name"]{
    flex:1;
    color:var(--text);
    font-weight:600;
  }
  /* v3.9.182 — hide every non-Name column header on mobile using a broad
     selector so newly added columns don't need to be listed here. */
  #pg-stock .ma-list-tbl thead th[data-col]:not([data-col="name"]){display:none !important}
  /* Action header: keep only the column-picker icon */
  #pg-stock .ma-list-tbl thead th.ma-act-col{
    width:auto;
    text-align:right;
    padding:0;
  }
  #pg-stock .ma-list-tbl thead th.ma-act-col .ma-th-label{display:none}
  #pg-stock .ma-list-tbl thead th.ma-act-col .ma-col-pick{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:36px; height:32px;
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    border-radius:8px;
    color:#6b7280;
    padding:0;
    cursor:pointer;
    margin:0;
  }
  #pg-stock .ma-list-tbl thead th.ma-act-col .ma-col-pick:hover{
    background:#e5e7eb;
    color:var(--brand);
    border-color:var(--brand);
  }

  /* ── BODY ROWS ─────────────────────────────────────────────────────── */
  #pg-stock .ma-list-tbl tbody{display:block}

  #pg-stock .ma-list-tbl tr.ma-item-row{
    display:block;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    margin:0;
    box-shadow:none;
    position:relative;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row:not(:last-child){
    border-bottom:1px solid #f3f4f6;
  }

  /* Every td starts as block/no-border; overrides below turn some back on */
  #pg-stock .ma-list-tbl tr.ma-item-row td{
    display:block;
    padding:0;
    border:none;
    font-size:13.5px;
    color:var(--text);
    line-height:1.4;
  }

  /* ── THE NAME ROW: flex — [☐] name [+/-] ────────────────────────── */
  /* On mobile the checkbox td + name td render as one flex line. */
  #pg-stock .ma-list-tbl tr.ma-item-row .ma-cb-col{
    display:inline-block;
    padding:0;
    margin:0;
    vertical-align:middle;
    position:absolute;
    top:14px;
    left:16px;
    z-index:1;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row .ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    cursor:pointer;
    display:block;
  }

  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno{
    display:block;
    padding:14px 60px 14px 46px;    /* leaves room for cb-left and toggle-right */
    color:var(--text);
    position:relative;
    min-height:20px;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno .ma-item-cell-name{
    display:inline;
    font-size:13.5px;
    font-weight:500;
    color:var(--text);
    line-height:1.4;
  }
  /* Hide the subtitle we render — reference shows only the name */
  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno .ma-item-sub{
    display:none !important;
  }

  /* Toggle button (+/-) — bordered circle, right-aligned in name row */
  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno .ma-item-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    background:#fff;
    border:1.5px solid #d1d5db;
    color:#6b7280;
    border-radius:50%;
    padding:0;
    cursor:pointer;
    transition:border-color .12s, color .12s, background .12s;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno .ma-item-toggle:hover{
    border-color:var(--brand);
    color:var(--brand);
  }
  #pg-stock .ma-list-tbl tr.ma-item-row .ma-item-toggle-minus{display:none}
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded .ma-item-toggle-plus{display:none}
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded .ma-item-toggle-minus{display:inline-block}

  /* ── EXPANDED STATE: gray tint on name row + green name ─────────── */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-list-invno{
    background:#f9fafb;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-list-invno .ma-item-cell-name{
    color:var(--brand);
    font-weight:600;
  }
  /* Toggle button on expanded row */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-list-invno .ma-item-toggle{
    background:#fff;
    border-color:#9ca3af;
    color:#6b7280;
  }

  /* ── DETAIL ROWS (visible only when expanded) ─────────────────────
     Each td becomes: "Label ............ Value"
     Label is bold black on left, value on right.                       */

  /* Hidden by default — v3.9.182: broad selector so newly added columns
     (Product Image / Stock Type / Product Note / UOM / Current Stock /
      Last Updated / Status / Tax / Purchase Price Incl. Tax / Sell Price
      Incl. Tax …) all get the same collapse behavior automatically. */
  #pg-stock .ma-list-tbl tr.ma-item-row td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col),
  #pg-stock .ma-list-tbl tr.ma-item-row td.ma-act-col{
    display:none;
  }

  /* Shown when expanded — flex row with label + value */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col){
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    border-top:1px solid #f3f4f6;
    font-size:13px;
    color:var(--text);
    text-align:right;
  }
  /* But if a column is hidden by the picker (`.col-hidden`), keep it hidden
     even when the row is expanded — the user chose not to see it. */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td[data-col].col-hidden{
    display:none !important;
  }

  /* Label pseudo-element on the LEFT of every detail row */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td[data-label]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{
    content: attr(data-label);
    font-weight:700;
    color:#111827;
    font-size:13px;
    text-align:left;
    flex:0 0 auto;
    margin-right:12px;
  }

  /* Sell Price is bold black — no special coloring needed */

  /* ── ACTION ROW ─────────────────────────────────────────────────── */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:12px 16px;
    border-top:1px solid #f3f4f6;
    text-align:left;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col::before{
    content: "Action";
    font-weight:700;
    color:#111827;
    font-size:13px;
    padding-top:7px;    /* aligns with first button vertically */
    flex:0 0 auto;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act{
    display:flex !important;
    flex-direction:column !important;    /* Edit on top, [View ▾] below */
    align-items:flex-end;
    gap:8px;
  }

  /* Edit / View buttons — gray pill boxes with icon + label */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-btn{
    display:inline-flex;
    align-items:center; gap:6px;
    padding:7px 14px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12.5px !important;
    font-weight:500 !important;
    width:auto !important;
    height:auto !important;
    min-width:0;
    cursor:pointer;
    text-transform:none;    /* prevent any leaked uppercase */
    letter-spacing:normal;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-btn:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }
  /* Show the label text (was hidden earlier) */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act .ma-act-lbl{
    display:inline !important;
  }
  /* View + dropdown row (second line of the action stack) */
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-row{
    display:inline-flex;
    gap:6px;
    flex-direction:row;
    align-items:center;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-more{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:7px 12px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    height:auto;
    width:auto;
    min-width:0;
  }
  #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-more:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }

  /* ── EMPTY STATE inside the card ────────────────────────────────── */
  #pg-stock .oi-empty-wrap{
    padding:40px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #pg-stock .oi-empty-title{
    font-size:14px;
    color:#6b7280;
    text-align:center;
  }
  #pg-stock .oi-empty-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    width:100%;
  }
  #pg-stock .oi-empty-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:10px 16px !important;
  }
  #pg-stock .oi-empty-or{text-align:center; padding:2px 0; color:var(--muted); font-size:12px}

  /* Bulk-select bar tighter on mobile */
  #pg-stock #item-bulk-bar{
    margin:0 0 12px !important;
    border-radius:12px;
    flex-wrap:wrap;
  }

  /* Pagination centered */
  #pg-stock .ma-pagination{
    margin-top:8px;
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.181 — Product/Service View sidebar + Open Sans font for the whole
   Products/Services section
   ──────────────────────────────────────────────────────────────────────────────
   • #pv-view-sidebar-wrap is the new right-slide sidebar opened by the View
     button on the products list. Layout mirrors the customer/vendor view
     sidebar (Company Details): sectioned Product Detail / Pricing / Tax /
     Product Group / Additional Details.
   • Open Sans is applied to #pg-stock, #pg-item-bulk-edit, and the new
     #pv-view-sidebar-wrap (which is body-appended so it needs the family
     declared on itself).
════════════════════════════════════════════════════════════════════════════════ */

/* ── Open Sans on the whole Products/Services section ──────────────── */
#pg-stock,
#pg-stock *,
#pg-item-bulk-edit,
#pg-item-bulk-edit *,
#pv-view-sidebar-wrap,
#pv-view-sidebar-wrap *,
#ic-sidebar-wrap,
#ic-sidebar-wrap *{
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ── Product View sidebar ──────────────────────────────────────────── */
#pv-view-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  color:var(--text);
}
#pv-view-sidebar-wrap.open{pointer-events:auto}

#pv-view-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.42);
  opacity:0;
  transition:opacity .22s ease;
}
#pv-view-sidebar-wrap.open .ec-scrim{opacity:1}

#pv-view-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px, 96vw);
  background:#fafbfc;
  box-shadow:-14px 0 44px rgba(0,0,0,.20);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#pv-view-sidebar-wrap.open .ec-side{transform:translateX(0)}

/* Header stripe */
#pv-view-sidebar-wrap .ec-side-head{
  background:var(--surf);
  border-bottom:1px solid var(--bdr);
  padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}
#pv-view-sidebar-wrap .ec-side-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
#pv-view-sidebar-wrap .ec-side-x{
  width:32px; height:32px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
#pv-view-sidebar-wrap .ec-side-x:hover{background:var(--surf2); color:var(--text)}

/* Scrollable body */
#pv-view-sidebar-wrap .pv-side-body{
  flex:1 1 auto;
  padding:0 18px 20px;
  overflow-y:auto;
}

/* Product name banner (below header, above sections) */
.pv-side-hdr-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:16px 4px;
}
.pv-side-hdr-name{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1 1 auto;
}
.pv-side-type-badge{
  display:inline-flex; align-items:center;
  padding:4px 12px;
  border-radius:12px;
  font-size:11.5px; font-weight:600;
  flex-shrink:0;
}
.pv-side-type-badge.is-prod{background:var(--brand-bg2); color:var(--brand-dd)}
.pv-side-type-badge.is-serv{background:var(--brand-bg); color:#92400e}
.pv-side-type-badge.is-chg{background:#e0e7ff; color:#3730a3}

/* Section cards */
.pv-side-sec{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:10px;
  margin:12px 0 0;
  padding:0;
  overflow:hidden;
}
.pv-side-sec-h{
  padding:14px 18px;
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
  font-size:13.5px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  color:var(--text);
}
.pv-side-sec-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  background:var(--surf2);
  color:var(--text);
  border-radius:6px;
  flex-shrink:0;
}

/* Two-column list */
.pv-side-list{padding:6px 18px 14px}
.pv-side-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed #f1f5f9;
  font-size:13px;
}
.pv-side-row:last-child{border-bottom:none}
.pv-side-lbl{
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
}
.pv-side-val{
  color:var(--text);
  font-size:13px;
  font-weight:500;
  word-break:break-word;
}
.pv-side-dash{color:var(--muted)}

/* Footer */
#pv-view-sidebar-wrap .ec-side-foot{
  background:var(--surf);
  border-top:1px solid var(--bdr);
  padding:12px 18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}
#pv-view-sidebar-wrap .ec-side-foot .ma-btn{
  padding:8px 18px !important;
  font-size:13px;
}

/* Mobile: sidebar goes full width */
@media (max-width:640px){
  #pv-view-sidebar-wrap .ec-side{width:100vw}
  .pv-side-row{grid-template-columns:1fr; gap:2px; padding:8px 0}
  .pv-side-lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted)}
  .pv-side-val{font-size:13.5px; font-weight:500}
  .pv-side-list{padding:6px 16px 10px}
  .pv-side-sec-h{padding:12px 16px}
  .pv-side-body{padding:12px 14px 14px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.182 — .col-hidden helper (applied by _itemApplyColPrefs to columns the
   user turned off in the "Select Columns to Display" sidebar).
   Uses !important so it beats the base .ma-list-tbl display:table-cell rules
   and any inline style="" that might sneak in via other paths.
════════════════════════════════════════════════════════════════════════════════ */
#pg-stock .ma-list-tbl .col-hidden{display:none !important}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.183 — Customer / Vendor Group section redesign
   ──────────────────────────────────────────────────────────────────────────────
   • Landing page uses the shared .oi-toolbar / .oi-search-panel / .oi-empty-wrap
     pattern (matches the customer/vendor + products/services pages).
   • Add / Edit opens a right-slide sidebar (#cg-add-sidebar-wrap) rather than
     a modal — matches reference image 3.
   • Search panel has a single Group Name field (matches reference image 2).
════════════════════════════════════════════════════════════════════════════════ */

/* Page padding (like the other list pages) */
#pg-customer-groups{padding:0 20px 20px}

/* Search panel — single-column grid (only Group Name) */
#pg-customer-groups .cg-search-grid{
  display:grid;
  grid-template-columns:minmax(240px, 320px);
  gap:14px 16px;
  margin-bottom:12px;
}

/* Status pill in the list column */
.cg-status-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:11px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2px;
}
.cg-status-pill.on{background:var(--brand-bg2); color:var(--brand-dd)}
.cg-status-pill.off{background:#fee2e2; color:#991b1b}

/* Count pill (Members column) */
.cg-cnt-pill{
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:26px;
  padding:2px 10px;
  border-radius:12px;
  background:var(--surf3, #f1f5f9);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

/* ── Add / Edit sidebar (matches reference image 3) ──────────────── */
#cg-add-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--text);
}
#cg-add-sidebar-wrap.open{pointer-events:auto}
#cg-add-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.42);
  opacity:0;
  transition:opacity .22s ease;
}
#cg-add-sidebar-wrap.open .ec-scrim{opacity:1}
#cg-add-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(720px, 96vw);
  background:var(--surf);
  box-shadow:-14px 0 44px rgba(0,0,0,.20);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#cg-add-sidebar-wrap.open .ec-side{transform:translateX(0)}

#cg-add-sidebar-wrap .ec-side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid var(--bdr);
}
#cg-add-sidebar-wrap .ec-side-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}
#cg-add-sidebar-wrap .ec-side-x{
  width:32px; height:32px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
#cg-add-sidebar-wrap .ec-side-x:hover{background:var(--surf2); color:var(--text)}

#cg-add-sidebar-wrap .cg-side-body{
  flex:1 1 auto;
  padding:22px 24px;
  overflow-y:auto;
}
.cg-side-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:16px;
  align-items:center;
  padding:10px 0;
}
.cg-side-lbl{
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
}
.cg-req{color:#dc2626; margin-left:2px}
.cg-side-input{min-width:0}
.cg-side-input > input[type="text"]{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:6px;
  font-size:13.5px;
  background:var(--surf);
  color:var(--text);
  outline:none;
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .12s, box-shadow .12s;
}
.cg-side-input > input[type="text"]:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

/* Enable row layout: [checkbox] [description] */
.cg-enable-row{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Custom green checkbox to match the reference */
.cg-check{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:22px; height:22px;
  cursor:pointer;
  flex-shrink:0;
}
.cg-check input[type="checkbox"]{
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  width:100%; height:100%;
  margin:0;
  z-index:2;
}
.cg-check-box{
  position:absolute; inset:0;
  border:1.5px solid var(--bdr);
  border-radius:5px;
  background:var(--surf);
  transition:background .12s, border-color .12s;
}
.cg-check-box::after{
  content:"";
  position:absolute;
  top:3px; left:7px;
  width:5px; height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;
  transition:opacity .12s;
}
.cg-check input:checked + .cg-check-box{
  background:var(--brand);
  border-color:var(--brand);
}
.cg-check input:checked + .cg-check-box::after{opacity:1}
.cg-check input:focus-visible + .cg-check-box{
  box-shadow:0 0 0 3px rgba(37,99,235,.22);
}
.cg-enable-hint{
  font-size:13px;
  color:var(--text);
}

#cg-add-sidebar-wrap .ec-side-foot{
  display:flex;
  justify-content:space-between;
  padding:14px 20px;
  border-top:1px solid var(--bdr);
  background:var(--surf);
}
#cg-add-sidebar-wrap .ec-side-foot .ma-btn{
  padding:9px 20px !important;
  font-size:13px;
  display:inline-flex;
  align-items:center;
}
#cg-add-sidebar-wrap .ec-side-foot .ec-close-btn{
  background:var(--surf2);
  border:1px solid var(--bdr);
  color:var(--text);
}
#cg-add-sidebar-wrap .ec-side-foot .ec-close-btn:hover{
  background:var(--surf3);
  color:var(--text);
}
#cg-add-sidebar-wrap .ec-side-foot .ec-save-btn{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
}
#cg-add-sidebar-wrap .ec-side-foot .ec-save-btn:hover{
  background:var(--brand-dd);
  border-color:var(--brand-dd);
}

/* v3.9.184 — old #pg-customer-groups mobile block removed; superseded below */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.184 — Customer / Vendor Group MOBILE VIEW
   ──────────────────────────────────────────────────────────────────────────────
   Reference (three screenshots):
     Image 1 (collapsed): Toolbar card with title on top and Search + Add New
       side-by-side below. List card shows [☐] Name (header) and a row like
       [☐] theme markets team [+].
     Image 2 (expanded): Same, but the row is expanded — gray-bg name row
       with [-], then detail rows Last Updated | 13-Jul-26, Status | Active
       (green), Action | [Edit] [▾].
     Image 3 (search open): Search panel with Group Name label + input, then
       full-width Search (green) and Show All (outlined) buttons stacked.
════════════════════════════════════════════════════════════════════════════════ */

/* Desktop — status text colors */
.cg-status-txt.on{color:var(--brand); font-weight:500}
.cg-status-txt.off{color:#dc2626; font-weight:500}
/* Hide the mobile toggle button on desktop */
#pg-customer-groups .ma-cg-toggle{display:none}

@media (max-width:720px){
  #pg-customer-groups{
    padding:12px;
    background:#f5f6f8;
    min-height:calc(100vh - 60px);
  }

  /* ── Toolbar card: title on top, both buttons on a row below ────── */
  #pg-customer-groups .oi-toolbar{
    display:block;
    padding:14px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-customer-groups .oi-toolbar-title{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:10px;
  }
  #pg-customer-groups .oi-toolbar-actions{
    display:flex !important;
    gap:8px;
    width:100%;
  }
  #pg-customer-groups .oi-toolbar-actions .ma-list-pill,
  #pg-customer-groups .oi-toolbar-actions .ma-list-add{
    flex:1 1 0;
    justify-content:center;
    padding:10px 14px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }
  #pg-customer-groups .oi-toolbar-actions .ma-list-add{
    background:var(--brand);
    color:#fff;
    border:none;
  }

  /* ── Search panel — full-width stacked buttons ──────────────────── */
  #pg-customer-groups .oi-search-panel{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:14px 16px 16px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-customer-groups .cg-search-grid{grid-template-columns:1fr; gap:12px}
  #pg-customer-groups .oi-search-actions{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  #pg-customer-groups .oi-search-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }

  /* ── List card & rows ────────────────────────────────────────────── */
  #pg-customer-groups .ma-card.oi-list-card{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  #pg-customer-groups .ma-list-tbl{
    display:block;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    min-width:0 !important;
  }
  #pg-customer-groups #cg-table-wrap{overflow:visible; min-width:0}

  /* Header row: [☐] Name only */
  #pg-customer-groups .ma-list-tbl thead{display:block}
  #pg-customer-groups .ma-list-tbl thead tr{
    display:flex;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid #e5e7eb;
  }
  #pg-customer-groups .ma-list-tbl thead th{
    padding:0;
    background:transparent;
    border:none;
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    text-align:left;
    text-transform:none;
    letter-spacing:normal;
  }
  #pg-customer-groups .ma-list-tbl thead th.ma-cb-col{
    width:auto;
    margin-right:14px;
  }
  #pg-customer-groups .ma-list-tbl thead th.ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    display:block;
  }
  #pg-customer-groups .ma-list-tbl thead th[data-col="name"]{flex:1}
  #pg-customer-groups .ma-list-tbl thead th[data-col]:not([data-col="name"]){display:none !important}
  #pg-customer-groups .ma-list-tbl thead th.ma-act-col{display:none}

  /* Body rows */
  #pg-customer-groups .ma-list-tbl tbody{display:block}
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row{
    display:block;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    margin:0;
    box-shadow:none;
    position:relative;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row:not(:last-child){
    border-bottom:1px solid #f3f4f6;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row td{
    display:block;
    padding:0;
    border:none;
    font-size:13.5px;
    color:var(--text);
    line-height:1.4;
  }

  /* Name row = checkbox + name + toggle */
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row .ma-cb-col{
    display:inline-block;
    padding:0; margin:0;
    vertical-align:middle;
    position:absolute;
    top:14px; left:16px;
    z-index:1;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row .ma-cb-col input[type="checkbox"]{
    width:18px; height:18px;
    accent-color:var(--brand);
    cursor:pointer;
    display:block;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row td.ma-list-invno{
    display:block;
    padding:14px 60px 14px 46px;
    color:var(--text);
    position:relative;
    min-height:20px;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row td.ma-list-invno .ma-cg-name{
    display:inline;
    font-size:13.5px;
    font-weight:500;
    color:var(--text);
  }
  #pg-customer-groups .ma-cg-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute;
    right:16px; top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    background:#fff;
    border:1.5px solid #d1d5db;
    color:#6b7280;
    border-radius:50%;
    padding:0;
    cursor:pointer;
    transition:border-color .12s, color .12s;
  }
  #pg-customer-groups .ma-cg-toggle:hover{border-color:var(--brand); color:var(--brand)}
  #pg-customer-groups .ma-cg-toggle-minus{display:none}
  #pg-customer-groups .ma-cg-row.is-expanded .ma-cg-toggle-plus{display:none}
  #pg-customer-groups .ma-cg-row.is-expanded .ma-cg-toggle-minus{display:inline-block}

  /* Expanded state: gray tint on name row + green name */
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-list-invno{background:#f9fafb}
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-list-invno .ma-cg-name{
    color:var(--brand);
    font-weight:600;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded .ma-cg-toggle{
    background:#fff;
    border-color:#9ca3af;
    color:#6b7280;
  }

  /* Detail rows: hidden by default, shown when expanded — broad selector so
     new columns don't need to be listed here explicitly. */
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col),
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row td.ma-act-col{display:none}

  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col){
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    border-top:1px solid #f3f4f6;
    font-size:13px;
    color:var(--text);
    text-align:right;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{
    content: attr(data-label);
    font-weight:700;
    color:#111827;
    font-size:13px;
    text-align:left;
    flex:0 0 auto;
    margin-right:12px;
  }

  /* Action row: label left, Edit + ▾ stacked or side-by-side right */
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-top:1px solid #f3f4f6;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col::before{
    content: "Action";
    font-weight:700;
    color:#111827;
    font-size:13px;
    flex:0 0 auto;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act{
    display:flex !important;
    flex-direction:row !important;
    gap:6px;
    align-items:center;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-btn{
    display:inline-flex;
    align-items:center; gap:6px;
    padding:7px 14px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12.5px !important;
    font-weight:500 !important;
    width:auto !important;
    height:auto !important;
    min-width:0;
    cursor:pointer;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-btn .ma-act-lbl{display:inline !important}
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-btn:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-more{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:7px 12px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    height:auto; width:auto;
  }
  #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-more:hover{
    background:#e5e7eb !important;
    color:var(--brand) !important;
    border-color:var(--brand) !important;
  }

  /* Empty state — full-width green button */
  #pg-customer-groups .oi-empty-wrap{
    padding:40px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    display:flex; flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #pg-customer-groups .oi-empty-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  #pg-customer-groups .oi-empty-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.185 — Product / Service Group section (desktop + mobile)
   ──────────────────────────────────────────────────────────────────────────────
   Layout mirrors the Customer / Vendor Group section, with two intentional
   differences drawn from the reference screenshots:
     1. No checkbox column on rows — only Name + toggle (image 5).
     2. Detail rows use inline "Label : value" (colon separator), NOT the
        label-left / value-right flex layout used by customer groups.
     3. Action row has no "Action" label prefix — just [Edit] + [▾].
   The toolbar also gains a kebab menu (3-dot) between Search and + with
   Manage Columns / Sort By / Select All (image 4).
════════════════════════════════════════════════════════════════════════════════ */

#pg-product-groups{padding:0 20px 20px}

/* Desktop — status text colors + hide the mobile toggle by default */
.ig-status-txt.on{color:var(--brand); font-weight:500}
.ig-status-txt.off{color:#dc2626; font-weight:500}
#pg-product-groups .ma-ig-toggle{display:none}
/* Kebab (3-dot) is mobile-only — image 1 desktop doesn't show it */
#pg-product-groups .ig-kebab-pill{display:none}
@media (max-width:720px){
  #pg-product-groups .ig-kebab-pill{display:inline-flex}
}

/* Kebab dropdown menu — same look as the ▾ action menu, but shows icons */
.ma-list-act-menu.ig-kebab-menu{
  min-width:200px;
  padding:6px 0;
}
.ma-list-act-menu.ig-kebab-menu .ma-list-act-item{
  display:flex;
  align-items:center;
  padding:11px 18px;
  font-size:13.5px;
  color:var(--text);
  cursor:pointer;
}
.ma-list-act-menu.ig-kebab-menu .ma-list-act-item:hover{
  background:var(--surf2);
  color:var(--brand);
}

/* Right-slide Add / Edit Product Group sidebar */
#ig-add-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  color:var(--text);
}
#ig-add-sidebar-wrap.open{pointer-events:auto}
#ig-add-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#ig-add-sidebar-wrap.open .ec-scrim{opacity:1}
#ig-add-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(560px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#ig-add-sidebar-wrap.open .ec-side{transform:translateX(0)}
#ig-add-sidebar-wrap .ec-side-head{
  padding:16px 22px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
#ig-add-sidebar-wrap .ec-side-title{
  font-size:15px; font-weight:600; color:var(--text);
}
#ig-add-sidebar-wrap .ec-side-x{
  width:32px; height:32px;
  border:none; background:transparent; color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
#ig-add-sidebar-wrap .ec-side-x:hover{background:var(--surf2); color:var(--text)}
#ig-add-sidebar-wrap .ec-side-body{
  flex:1 1 auto;
  padding:20px 22px;
  overflow-y:auto;
}
#ig-add-sidebar-wrap .ig-side-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
#ig-add-sidebar-wrap .ig-side-lbl{
  flex:0 0 110px;
  padding-top:9px;
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
}
#ig-add-sidebar-wrap .ig-req{color:#dc2626; margin-left:2px}
#ig-add-sidebar-wrap .ig-side-input{flex:1 1 auto; min-width:0}
#ig-add-sidebar-wrap .ig-side-input input[type="text"]{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:7px;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
  background:var(--surf);
  outline:none;
  box-sizing:border-box;
}
#ig-add-sidebar-wrap .ig-side-input input[type="text"]:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
#ig-add-sidebar-wrap .ig-enable-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:6px;
}
#ig-add-sidebar-wrap .ig-check{
  position:relative;
  display:inline-block;
  width:20px; height:20px;
  flex-shrink:0;
  cursor:pointer;
}
#ig-add-sidebar-wrap .ig-check input[type="checkbox"]{
  opacity:0; position:absolute; inset:0;
  width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
}
#ig-add-sidebar-wrap .ig-check-box{
  position:absolute; inset:0;
  border:1.5px solid #d1d5db;
  border-radius:5px;
  background:#fff;
  transition:background .15s, border-color .15s;
}
#ig-add-sidebar-wrap .ig-check input[type="checkbox"]:checked + .ig-check-box{
  background:var(--brand);
  border-color:var(--brand);
}
#ig-add-sidebar-wrap .ig-check input[type="checkbox"]:checked + .ig-check-box::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
#ig-add-sidebar-wrap .ig-enable-hint{
  font-size:13px;
  color:var(--text);
}
#ig-add-sidebar-wrap .ec-side-foot{
  padding:12px 18px;
  border-top:1px solid var(--bdr);
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:var(--surf);
}
#ig-add-sidebar-wrap .ec-side-foot .ma-btn{
  padding:9px 20px !important;
  font-size:13px;
  display:inline-flex;
  align-items:center;
}

/* ── Mobile view scoped to #pg-product-groups .ma-ig-row ────────────── */
@media (max-width:720px){
  #pg-product-groups{
    padding:12px;
    background:#f5f6f8;
    min-height:calc(100vh - 60px);
  }

  /* Toolbar: title on top, three buttons + green + on a row below.
     Per reference image 3: Search icon + kebab (3-dot) + green + (icon-only). */
  #pg-product-groups .oi-toolbar{
    display:block;
    padding:14px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-product-groups .oi-toolbar-title{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    display:inline-block;
  }
  #pg-product-groups .oi-toolbar-actions{
    display:flex !important;
    gap:8px;
    justify-content:flex-end;
    margin-top:-24px; /* pull up so title and buttons share the top line on wider mobiles */
  }
  #pg-product-groups .oi-toolbar-actions .ma-list-pill,
  #pg-product-groups .oi-toolbar-actions .ma-list-add{
    width:38px; height:38px;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    border-radius:8px !important;
    flex:0 0 auto;
  }
  #pg-product-groups .oi-toolbar-actions .ma-list-pill span,
  #pg-product-groups .oi-toolbar-actions .ig-add-lbl{display:none}
  #pg-product-groups .oi-toolbar-actions .ma-list-add{
    background:var(--brand);
    color:#fff;
    border:none;
  }
  #pg-product-groups .oi-toolbar-actions .ma-list-add .ig-add-plus{
    color:#fff;
    font-size:22px !important;
  }

  /* Fallback: if title + buttons don't fit on the same line, drop buttons. */
  @media (max-width:340px){
    #pg-product-groups .oi-toolbar-actions{margin-top:10px}
  }

  /* Search panel */
  #pg-product-groups .oi-search-panel{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:14px 16px 16px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-product-groups .ig-search-grid{grid-template-columns:1fr; gap:12px}
  #pg-product-groups .oi-search-actions{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  #pg-product-groups .oi-search-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }

  /* List card wraps every row */
  #pg-product-groups .ma-card.oi-list-card{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  #pg-product-groups .ma-list-tbl{
    display:block;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    min-width:0 !important;
  }
  #pg-product-groups #ig-table-wrap{overflow:visible; min-width:0}

  /* Header is hidden entirely on mobile — image 5 shows no header row */
  #pg-product-groups .ma-list-tbl thead{display:none}

  /* Body rows */
  #pg-product-groups .ma-list-tbl tbody{display:block}
  #pg-product-groups .ma-list-tbl tr.ma-ig-row{
    display:block;
    padding:0;
    position:relative;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row:not(:last-child){
    border-bottom:1px solid #f3f4f6;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row td{
    display:block;
    padding:0;
    border:none;
    font-size:13.5px;
    color:var(--text);
    line-height:1.4;
  }

  /* Name row (no checkbox — image 5) */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row td.ma-list-invno{
    display:block;
    padding:14px 60px 14px 18px;
    color:var(--text);
    position:relative;
    min-height:20px;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row td.ma-list-invno .ma-ig-name{
    display:inline;
    font-size:13.5px;
    font-weight:500;
    color:var(--text);
  }
  #pg-product-groups .ma-ig-toggle{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    position:absolute;
    right:16px; top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    background:#fff;
    border:1.5px solid #d1d5db;
    color:#6b7280;
    border-radius:50%;
    padding:0;
    cursor:pointer;
    transition:border-color .12s, color .12s;
  }
  #pg-product-groups .ma-ig-toggle:hover{border-color:var(--brand); color:var(--brand)}
  #pg-product-groups .ma-ig-toggle-minus{display:none}
  #pg-product-groups .ma-ig-row.is-expanded .ma-ig-toggle-plus{display:none}
  #pg-product-groups .ma-ig-row.is-expanded .ma-ig-toggle-minus{display:inline-block}

  /* Details hidden until expanded */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row td[data-col]:not(.ma-list-invno):not(.ma-act-col),
  #pg-product-groups .ma-list-tbl tr.ma-ig-row td.ma-act-col{display:none}

  /* Expanded — inline "Label : value" (colon separator per image 5). */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-act-col){
    display:block;
    padding:2px 18px;
    font-size:13px;
    color:var(--text);
    line-height:1.7;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-act-col):first-of-type{padding-top:8px}
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-act-col)::before{
    content: attr(data-label) " : ";
    font-weight:700;
    color:#111827;
  }
  /* Add horizontal separator below Status (before action row) */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td[data-col="status"]{
    padding-bottom:12px;
    border-bottom:1px solid #f3f4f6;
    margin-bottom:8px;
  }

  /* Action row — no "Action" label, just buttons right-aligned */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:10px 18px 14px;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col .ma-list-act{
    display:flex !important;
    flex-direction:row !important;
    gap:8px;
    align-items:center;
  }
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col .ma-list-act-btn{
    display:inline-flex;
    align-items:center; justify-content:center;
    gap:0;
    padding:7px 10px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12.5px !important;
    width:auto !important;
    height:auto !important;
    min-width:0;
    cursor:pointer;
  }
  /* Match reference image 5 — Edit shows only the pencil icon, no text */
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col .ma-list-act-btn .ma-act-lbl{display:none}
  #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col .ma-list-act-more{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:7px 12px !important;
    background:#f3f4f6 !important;
    border:1px solid #e5e7eb !important;
    color:#4b5563 !important;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    height:auto; width:auto;
  }

  /* Empty state — full-width green button (customer/vendor group pattern) */
  #pg-product-groups .oi-empty-wrap{
    padding:40px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    display:flex; flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #pg-product-groups .oi-empty-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  #pg-product-groups .oi-empty-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }

  /* Sidebar tightens up on mobile */
  #ig-add-sidebar-wrap .ec-side{width:100%}
  #ig-add-sidebar-wrap .ig-side-row{
    flex-direction:column;
    gap:6px;
    align-items:stretch;
  }
  #ig-add-sidebar-wrap .ig-side-lbl{padding-top:0; min-width:0; flex:0 0 auto}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.186 — Mobile sidebar rebuilt as collapsible sections
   ──────────────────────────────────────────────────────────────────────────────
   Each top-level menu item is now a rounded card. Sections with children have
   a chevron on the right; clicking expands the section and highlights it with
   a soft green tint (matches the reference image where Customer / Vendor is
   shown expanded). Locked sections show a small padlock icon before the
   chevron. The Notification item has a red badge showing unread count.
════════════════════════════════════════════════════════════════════════════════ */

/* The sidebar itself already has its own base styles; the new list container
   just controls padding for the sections. */
.ma-msec-list{
  padding:14px 12px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Each section card */
.ma-msec{
  background:#f3f4f6;
  border-radius:12px;
  overflow:hidden;
  transition:background .15s ease;
}
/* When expanded, a soft green tint on the whole card */
.ma-msec.open{
  background:#e6faf1;
}

/* Section header row: icon + label + optional lock + chevron */
.ma-msec-hdr{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  color:var(--text);
  font-size:14.5px;
  font-weight:500;
  min-height:22px;
}
.ma-msec-hdr:hover{opacity:.85}
.ma-msec-hdr:active{opacity:.7}

/* Icon on the left */
.ma-msec-ico{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.ma-msec.open .ma-msec-ico{color:var(--brand)}

/* Label takes remaining space */
.ma-msec-lbl{
  flex:1 1 auto;
  min-width:0;
  color:var(--text);
}
.ma-msec.open .ma-msec-lbl{
  color:var(--brand);
  font-weight:600;
}

/* Small padlock badge (for premium/locked sections) */
.ma-msec-lock{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:20px; height:20px;
  color:#9ca3af;
  background:#e5e7eb;
  border-radius:5px;
}

/* Chevron on the right — rotates when section is open */
.ma-msec-chev{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:22px; height:22px;
  color:#6b7280;
  transition:transform .2s ease;
}
.ma-msec.open .ma-msec-chev{
  transform:rotate(180deg);
  color:var(--brand);
}

/* Red notification badge */
.ma-msec-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:22px; height:22px;
  padding:0 7px;
  border-radius:11px;
  background:#dc2626;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* Section body — hidden by default, revealed when .open */
.ma-msec-body{
  display:none;
  padding:0 16px 12px 46px;
  background:transparent;
}
.ma-msec.open .ma-msec-body{
  display:block;
}

/* Child link (a bullet + label) */
.ma-msub-lnk{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 4px;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
  border-radius:6px;
  transition:background .12s;
}
.ma-msub-lnk:hover{background:rgba(37,99,235,.08)}
.ma-msub-lnk:active{background:rgba(37,99,235,.16)}
.ma-msub-bullet{
  flex:0 0 auto;
  color:#6b7280;
  font-size:11px;
  line-height:1;
}

/* Sidebar container: on mobile, remove the padding and old backgrounds that
   the legacy .ma-sidebar styles apply — the new section cards handle their
   own visual grouping. */
@media (max-width:900px){
  .ma-sidebar{
    padding:0 !important;
    background:var(--surf);
  }
  .ma-sidebar-header{
    padding:14px 16px !important;
    border-bottom:1px solid var(--bdr);
  }
}

/* Desktop: hide the new collapsible section markup — desktop still uses the
   flat sidebar structure. Actually since we removed the flat structure, we
   need to show the sections on desktop too when the sidebar is visible.
   The .ma-sidebar has display:none on desktop, so the collapsible sections
   will only appear on mobile. That's fine. */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.187 — Price List section (desktop + mobile)
   ──────────────────────────────────────────────────────────────────────────────
   Toolbar + empty state + search panel mirror the Customer/Vendor Group and
   Product Group patterns. The Add / Edit Price List sidebar is significantly
   richer than either — it has custom radio pills, a custom green checkbox,
   an Applied To picker that spawns dynamic entry cards, and conditional
   field rows inside each entry that show/hide based on the currently-selected
   radios (see reference video).
════════════════════════════════════════════════════════════════════════════════ */

#pg-price-lists{padding:0 20px 20px}

/* Desktop — status text colors + hide the mobile toggle by default */
.pl-status-txt.on{color:var(--brand); font-weight:500}
.pl-status-txt.off{color:#dc2626; font-weight:500}
#pg-price-lists .ma-pl-toggle{display:none}

/* Search panel single-column grid — matches the customer / vendor group pattern */
#pg-price-lists .pl-search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px 20px;
  margin-bottom:14px;
}

/* ── Right-slide Add / Edit Price List sidebar ─────────────────────── */
#pl-add-sidebar-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:14px;
  color:var(--text);
}
#pl-add-sidebar-wrap.open{pointer-events:auto}
#pl-add-sidebar-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#pl-add-sidebar-wrap.open .ec-scrim{opacity:1}
#pl-add-sidebar-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(880px, 96vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#pl-add-sidebar-wrap.open .ec-side{transform:translateX(0)}
#pl-add-sidebar-wrap .ec-side-head{
  padding:16px 22px;
  border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
#pl-add-sidebar-wrap .ec-side-title{
  font-size:15px; font-weight:600; color:var(--text);
}
#pl-add-sidebar-wrap .ec-side-x{
  width:32px; height:32px;
  border:none; background:transparent; color:var(--muted);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .12s, color .12s;
}
#pl-add-sidebar-wrap .ec-side-x:hover{background:var(--surf2); color:var(--text)}

#pl-add-sidebar-wrap .ec-side-body{
  flex:1 1 auto;
  padding:18px 22px;
  overflow-y:auto;
}

/* Every form row is a label-left / input-right layout — same skeleton as
   customer/vendor group + product group sidebars, wider label column. */
#pl-add-sidebar-wrap .pl-side-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
#pl-add-sidebar-wrap .pl-side-lbl{
  flex:0 0 140px;
  padding-top:9px;
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
}
#pl-add-sidebar-wrap .pl-req{color:#dc2626; margin-left:2px}
#pl-add-sidebar-wrap .pl-side-input{flex:1 1 auto; min-width:0}

#pl-add-sidebar-wrap .pl-side-input input[type="text"],
#pl-add-sidebar-wrap .pl-side-input textarea,
#pl-add-sidebar-wrap .pl-side-input select{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--bdr);
  border-radius:7px;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
  background:var(--surf);
  outline:none;
  box-sizing:border-box;
}
#pl-add-sidebar-wrap .pl-side-input textarea{
  resize:vertical;
  min-height:56px;
}
#pl-add-sidebar-wrap .pl-side-input input[type="text"]:focus,
#pl-add-sidebar-wrap .pl-side-input textarea:focus,
#pl-add-sidebar-wrap .pl-side-input select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Custom radio pill — dot follows an <input type="radio"> visually so we
   can style it without a plugin. */
#pl-add-sidebar-wrap .pl-radio-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px 24px;
  padding-top:7px;
}
#pl-add-sidebar-wrap .pl-radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:13.5px;
  color:var(--text);
  user-select:none;
}
#pl-add-sidebar-wrap .pl-radio input[type="radio"]{
  opacity:0;
  position:absolute;
  pointer-events:none;
}
#pl-add-sidebar-wrap .pl-radio-dot{
  width:16px; height:16px;
  border:1.5px solid #d1d5db;
  border-radius:50%;
  background:#fff;
  position:relative;
  flex-shrink:0;
  transition:border-color .12s, background .12s;
}
#pl-add-sidebar-wrap .pl-radio input[type="radio"]:checked + .pl-radio-dot{
  border-color:var(--brand);
  background:var(--brand);
}
#pl-add-sidebar-wrap .pl-radio input[type="radio"]:checked + .pl-radio-dot::after{
  content:"";
  position:absolute;
  inset:3px;
  background:#fff;
  border-radius:50%;
}

/* Active checkbox row */
#pl-add-sidebar-wrap .pl-active-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:6px;
}
#pl-add-sidebar-wrap .pl-check{
  position:relative;
  display:inline-block;
  width:20px; height:20px;
  flex-shrink:0;
  cursor:pointer;
}
#pl-add-sidebar-wrap .pl-check input[type="checkbox"]{
  opacity:0; position:absolute; inset:0;
  width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
}
#pl-add-sidebar-wrap .pl-check-box{
  position:absolute; inset:0;
  border:1.5px solid #d1d5db;
  border-radius:5px;
  background:#fff;
  transition:background .15s, border-color .15s;
}
#pl-add-sidebar-wrap .pl-check input[type="checkbox"]:checked + .pl-check-box{
  background:var(--brand);
  border-color:var(--brand);
}
#pl-add-sidebar-wrap .pl-check input[type="checkbox"]:checked + .pl-check-box::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
#pl-add-sidebar-wrap .pl-active-hint{
  font-size:13px;
  color:var(--text);
}

/* Applied To row: dropdown + green "Add" button side by side */
#pl-add-sidebar-wrap .pl-applied-row{
  display:flex;
  gap:12px;
  align-items:stretch;
}
#pl-add-sidebar-wrap .pl-applied-row select{
  flex:1 1 auto;
}
#pl-add-sidebar-wrap .pl-add-entry-btn{
  flex:0 0 auto;
  padding:9px 22px !important;
  align-self:stretch;
  font-size:13.5px !important;
}

/* Each dynamic Applied-To entry becomes its own gray card */
#pl-add-sidebar-wrap .pl-entry-card{
  background:#f9fafb;
  border:1px solid var(--bdr);
  border-radius:10px;
  padding:14px 16px;
  margin-top:14px;
}
#pl-add-sidebar-wrap .pl-entry-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--bdr);
}
#pl-add-sidebar-wrap .pl-entry-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
}
#pl-add-sidebar-wrap .pl-entry-del{
  width:28px; height:28px;
  border:1px solid var(--bdr);
  background:#fff;
  color:#dc2626;
  border-radius:6px;
  display:inline-flex;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
#pl-add-sidebar-wrap .pl-entry-del:hover{
  background:#fee2e2;
  border-color:#dc2626;
}
#pl-add-sidebar-wrap .pl-entry-body .pl-side-lbl{flex-basis:130px}

/* Sell Price row: text input + unit select */
#pl-add-sidebar-wrap .pl-sp-row{
  display:flex;
  gap:8px;
}
#pl-add-sidebar-wrap .pl-sp-row input[type="text"]{flex:1 1 auto}
#pl-add-sidebar-wrap .pl-sp-row select{flex:0 0 130px}

/* Conditional rows hidden by default, revealed via `display:flex` at runtime.
   _plToggleEntryFields toggles inline style; this class just ensures the
   initial state is hidden so no flash of unstyled content appears. */
#pl-add-sidebar-wrap .pl-cond{display:none}

/* Footer: Close (outlined) + Save (green), same as customer/vendor group */
#pl-add-sidebar-wrap .ec-side-foot{
  padding:12px 18px;
  border-top:1px solid var(--bdr);
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:var(--surf);
}
#pl-add-sidebar-wrap .ec-side-foot .ma-btn{
  padding:9px 20px !important;
  font-size:13px;
  display:inline-flex;
  align-items:center;
}

/* ── Mobile view scoped to #pg-price-lists ────────────────────────── */
@media (max-width:720px){
  #pg-price-lists{
    padding:12px;
    background:#f5f6f8;
    min-height:calc(100vh - 60px);
  }

  #pg-price-lists .oi-toolbar{
    display:block;
    padding:14px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-price-lists .oi-toolbar-title{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    margin-bottom:10px;
  }
  #pg-price-lists .oi-toolbar-actions{
    display:flex !important;
    gap:8px;
    width:100%;
  }
  #pg-price-lists .oi-toolbar-actions .ma-list-pill,
  #pg-price-lists .oi-toolbar-actions .ma-list-add{
    flex:1 1 0;
    justify-content:center;
    padding:10px 14px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }
  #pg-price-lists .oi-toolbar-actions .ma-list-add{
    background:var(--brand);
    color:#fff;
    border:none;
  }

  #pg-price-lists .oi-search-panel{
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    padding:14px 16px 16px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }
  #pg-price-lists .pl-search-grid{grid-template-columns:1fr; gap:12px}
  #pg-price-lists .oi-search-actions{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  #pg-price-lists .oi-search-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }

  /* Sidebar stacks label/input on mobile */
  #pl-add-sidebar-wrap .ec-side{width:100%}
  #pl-add-sidebar-wrap .pl-side-row{
    flex-direction:column;
    gap:6px;
    align-items:stretch;
  }
  #pl-add-sidebar-wrap .pl-side-lbl,
  #pl-add-sidebar-wrap .pl-entry-body .pl-side-lbl{padding-top:0; min-width:0; flex:0 0 auto}
  #pl-add-sidebar-wrap .pl-radio-row{gap:12px 18px; padding-top:2px}
  #pl-add-sidebar-wrap .pl-applied-row{flex-direction:column}
  #pl-add-sidebar-wrap .pl-add-entry-btn{width:100%}

  #pg-price-lists .oi-empty-wrap{
    padding:40px 16px;
    background:var(--surf);
    border:1px solid var(--bdr);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    display:flex; flex-direction:column;
    align-items:center;
    gap:10px;
  }
  #pg-price-lists .oi-empty-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  #pg-price-lists .oi-empty-actions .ma-btn{
    width:100%;
    justify-content:center;
    padding:11px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.188 — Sale Invoice: Customer Info 3-dot menu, Dispatch Address form
   sidebar, and Invoice Detail Custom Fields sidebar. Pass A (UI shell only).
══════════════════════════════════════════════════════════════════════════════ */

/* ── 3-dot button + popup menu in Customer Information card header ── */
.bci-menu-wrap .bci-menu-btn{
  width:28px; height:28px;
  border:none; background:transparent;
  color:var(--muted);
  border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.bci-menu-wrap .bci-menu-btn:hover{ background:var(--surf); color:var(--text); }
.bci-menu{
  position:absolute; top:100%; right:0;
  margin-top:4px;
  min-width:220px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  padding:6px;
  z-index:60;
  display:flex; flex-direction:column;
  animation:bci-menu-in .12s ease-out;
}
@keyframes bci-menu-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.bci-menu-item{
  display:block; text-align:left;
  padding:9px 12px;
  background:transparent; border:none;
  font-size:13px; color:var(--text);
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
}
.bci-menu-item:hover{ background:var(--surf2); }

/* ── Custom-column button in Invoice Detail card header ── */
.bci-cf-btn{
  width:32px; height:28px;
  border:1px solid var(--bdr);
  background:var(--surf);
  color:var(--muted);
  border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.bci-cf-btn:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── Shared sidebar wrappers (Dispatch Address form + Custom Fields) ── */
#bci-da-wrap, #bci-cf-wrap, #bci-dacf-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#bci-da-wrap.open, #bci-cf-wrap.open, #bci-dacf-wrap.open{ pointer-events:auto; }
#bci-da-wrap .ec-scrim, #bci-cf-wrap .ec-scrim, #bci-dacf-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#bci-da-wrap.open .ec-scrim, #bci-cf-wrap.open .ec-scrim, #bci-dacf-wrap.open .ec-scrim{ opacity:1; }
#bci-da-wrap .ec-side, #bci-cf-wrap .ec-side, #bci-dacf-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#bci-da-wrap.open .ec-side, #bci-cf-wrap.open .ec-side, #bci-dacf-wrap.open .ec-side{ transform:translateX(0); }
#bci-da-wrap .ec-side{ width:min(560px, 94vw); }
#bci-cf-wrap .ec-side{ width:min(760px, 94vw); }
#bci-dacf-wrap .ec-side{ width:min(560px, 94vw); }

#bci-da-wrap .ec-side-head, #bci-cf-wrap .ec-side-head, #bci-dacf-wrap .ec-side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--bdr);
  background:var(--surf);
}
#bci-da-wrap .ec-side-title, #bci-cf-wrap .ec-side-title, #bci-dacf-wrap .ec-side-title{
  font-size:15px; font-weight:600; color:var(--text);
}
#bci-da-wrap .ec-side-x, #bci-cf-wrap .ec-side-x, #bci-dacf-wrap .ec-side-x{
  width:30px; height:30px;
  background:transparent; border:none;
  color:var(--muted); border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
#bci-da-wrap .ec-side-x:hover, #bci-cf-wrap .ec-side-x:hover, #bci-dacf-wrap .ec-side-x:hover{
  background:var(--surf2); color:var(--text);
}
#bci-da-wrap .ec-side-body, #bci-cf-wrap .ec-side-body, #bci-dacf-wrap .ec-side-body{
  flex:1 1 auto; overflow-y:auto;
}
#bci-da-wrap .ec-side-foot, #bci-cf-wrap .ec-side-foot, #bci-dacf-wrap .ec-side-foot{
  padding:12px 20px;
  border-top:1px solid var(--bdr);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--surf);
}

/* ── Dispatch Address form sidebar ── */
.bci-da-title-wrap{ display:flex; align-items:center; gap:10px; }
.bci-da-cf-btn{
  width:28px; height:24px;
  border:1px solid var(--bdr); background:var(--surf); color:var(--muted);
  border-radius:5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.bci-da-cf-btn:hover{ background:var(--surf2); color:var(--text); }
.bci-da-body{ padding:18px 22px 12px; }
.bci-da-section{ margin-bottom:22px; }
.bci-da-section-hd{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  margin-bottom:14px;
}
.bci-da-row{
  display:grid; grid-template-columns:130px 1fr;
  align-items:center; gap:14px;
  margin-bottom:12px;
}
.bci-da-row > label{ font-size:13px; font-weight:500; color:var(--text); }
.bci-da-req{ color:#dc2626; margin-left:2px; }
.bci-da-row input[type="text"],
.bci-da-row input[type="tel"],
.bci-da-row input[type="email"],
.bci-da-row select{
  width:100%; padding:9px 12px;
  border:1px solid var(--bdr); border-radius:6px;
  font-size:13px; background:#fff; color:var(--text);
}
.bci-da-row input:focus, .bci-da-row select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.bci-da-gstin-row{ display:flex; gap:8px; }
.bci-da-gstin-row input{ flex:1 1 auto; }
.bci-da-af{
  flex:0 0 auto;
  padding:0 14px;
  background:transparent; border:none;
  font-size:13px; font-weight:600; color:var(--brand);
  cursor:pointer;
}
.bci-da-af:hover{ text-decoration:underline; }
.bci-da-err{
  grid-column:2; font-size:12px; color:#dc2626; margin-top:-8px;
}

/* ── Custom Fields sidebar (main variant, 6 columns) ── */
.bci-cf-body{ padding:8px 6px 12px; }
.bci-cf-hdrrow, .bci-cf-row{
  display:grid;
  grid-template-columns:44px 90px 66px 66px 76px 1fr;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  font-size:13px;
}
.bci-cf-hdrrow{
  font-weight:600; color:var(--muted);
  border-bottom:1px solid var(--bdr);
}
.bci-cf-row{ border-bottom:1px solid var(--bdr); }
.bci-cf-row:last-child{ border-bottom:none; }
.bci-cf-row:hover{ background:var(--surf2); }
.bci-cf-c.bci-cf-num{ color:var(--text); font-weight:500; }
.bci-cf-c.bci-cf-type{ display:flex; align-items:center; gap:6px; color:var(--text); }
.bci-cf-c.bci-cf-tog{ display:flex; justify-content:flex-start; }
.bci-cf-c.bci-cf-name{ position:relative; }
.bci-cf-c.bci-cf-name input[type="text"]{
  width:100%; padding:8px 11px;
  border:1px solid var(--bdr); border-radius:6px;
  font-size:13px; background:#fff; color:var(--text);
}
.bci-cf-c.bci-cf-name input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.bci-cf-addopt{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px;
  padding:0;
  background:transparent; border:none;
  color:var(--brand); font-size:12.5px; font-weight:600;
  cursor:pointer;
}
.bci-cf-addopt svg{ background:var(--brand); color:#fff; border-radius:50%; padding:2px; width:16px; height:16px; }
.bci-cf-addopt:hover{ text-decoration:underline; }
.bci-cf-optblk{
  display:grid;
  grid-template-columns:44px 90px 66px 66px 76px 1fr;
  gap:6px;
  padding:0 14px 14px;
  align-items:start;
}
.bci-cf-optblk .bci-cf-optlbl{
  grid-column:2 / span 4; font-size:13px; color:var(--text); font-weight:500;
  padding-top:8px;
}
.bci-cf-optblk .bci-cf-optright{ grid-column:6; }
.bci-cf-optblk textarea{
  width:100%; padding:8px 11px;
  border:1px solid var(--bdr); border-radius:6px;
  font-size:13px; background:#fff; color:var(--text);
  resize:vertical; min-height:60px;
}
.bci-cf-optblk textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.bci-cf-opthelp{ font-size:11.5px; color:var(--muted); margin-top:4px; font-style:italic; }

/* ── Dispatch Address Custom Field variant (4 columns) ── */
.bci-dacf-body{ padding:8px 6px 12px; }
.bci-dacf-hdrrow, .bci-dacf-row{
  display:grid;
  grid-template-columns:44px 190px 66px 1fr;
  align-items:center; gap:8px;
  padding:12px 16px;
  font-size:13px;
}
.bci-dacf-hdrrow{ font-weight:600; color:var(--muted); border-bottom:1px solid var(--bdr); }
.bci-dacf-row:hover{ background:var(--surf2); }
.bci-dacf-c.bci-dacf-type{ display:flex; align-items:center; gap:6px; color:var(--text); }
.bci-dacf-c.bci-dacf-name input[type="text"]{
  width:100%; padding:8px 11px;
  border:1px solid var(--bdr); border-radius:6px;
  font-size:13px; background:#fff; color:var(--text);
}
.bci-dacf-c.bci-dacf-name input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ── Toggle switch used across both sidebars ── */
.bci-sw{ display:inline-block; position:relative; width:38px; height:20px; cursor:pointer; }
.bci-sw input[type="checkbox"]{ opacity:0; width:0; height:0; position:absolute; }
.bci-sw-track{
  position:absolute; inset:0;
  background:#d1d5db;
  border-radius:20px;
  transition:background .15s ease;
}
.bci-sw-track::after{
  content:""; position:absolute;
  left:2px; top:2px;
  width:16px; height:16px;
  background:#fff; border-radius:50%;
  transition:transform .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.bci-sw input:checked + .bci-sw-track{ background:var(--brand); }
.bci-sw input:checked + .bci-sw-track::after{ transform:translateX(18px); }

/* ── Mobile stacking for the Dispatch Address form ── */
@media (max-width:720px){
  #bci-da-wrap .ec-side{ width:100%; }
  .bci-da-row{ grid-template-columns:1fr; gap:6px; }
  #bci-cf-wrap .ec-side{ width:100%; }
  .bci-cf-hdrrow, .bci-cf-row{
    grid-template-columns:36px 68px 52px 52px 60px 1fr;
    padding:10px 10px;
    font-size:12px;
    gap:4px;
  }
  .bci-cf-optblk{ grid-template-columns:1fr; }
  .bci-cf-optblk .bci-cf-optlbl{ grid-column:1; }
  .bci-cf-optblk .bci-cf-optright{ grid-column:1; }
  #bci-dacf-wrap .ec-side{ width:100%; }
  .bci-dacf-hdrrow, .bci-dacf-row{
    grid-template-columns:36px 160px 52px 1fr;
    padding:10px 10px;
    gap:6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.206 — TRUE PHONE LAYOUT for the Custom Fields sidebar.
   ──────────────────────────────────────────────────────────────────────────
   Squeezing 6 columns into <440px is unreadable, so at ≤640px we switch
   to a stacked "card" layout where each row is a self-contained block:
     ┌──────────────────────────────────────────────┐
     │ [1]  🔤 Text Field                           │
     │──────────────────────────────────────────────│
     │ Status:    [•───]     Print:    [───•]       │
     │ Required:  [•───]                            │
     │──────────────────────────────────────────────│
     │ [ Field Name input ..................... ]   │
     │ [+ Add Options]                              │
     └──────────────────────────────────────────────┘
   The column-header row is hidden (labels are absorbed into each row).
   Same technique used elsewhere in the plugin (Sale-Invoice list, etc.):
   pseudo-labels come from data attributes injected via CSS content, so
   the JS row template stays unchanged. Applies to #bci-cf-wrap (main)
   and #bci-dacf-wrap (Dispatch Address variant).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){

  /* Sidebar occupies full viewport width on phones. */
  #bci-cf-wrap .ec-side,
  #bci-dacf-wrap .ec-side,
  #bci-da-wrap  .ec-side{ width:100vw; max-width:100vw; }

  /* Head + foot get a little more breathing room and don't wrap. */
  #bci-cf-wrap .ec-side-head,
  #bci-dacf-wrap .ec-side-head,
  #bci-da-wrap  .ec-side-head{
    padding:14px 14px 12px;
  }
  #bci-cf-wrap .ec-side-title,
  #bci-dacf-wrap .ec-side-title,
  #bci-da-wrap  .ec-side-title{ font-size:15px; }
  #bci-cf-wrap .ec-side-foot,
  #bci-dacf-wrap .ec-side-foot,
  #bci-da-wrap  .ec-side-foot{
    padding:12px 14px;
    gap:8px;
  }
  #bci-cf-wrap .ec-side-foot button,
  #bci-dacf-wrap .ec-side-foot button,
  #bci-da-wrap  .ec-side-foot button{ flex:1; }

  /* Body wraps get a bit of horizontal padding pulled back so each card
     can use the full width. */
  #bci-cf-wrap .bci-cf-body,
  #bci-dacf-wrap .bci-dacf-body{ padding:8px 10px 12px; }

  /* Hide the desktop column-header row on phones. */
  #bci-cf-wrap .bci-cf-hdrrow,
  #bci-dacf-wrap .bci-dacf-hdrrow{ display:none !important; }

  /* Each field becomes a bordered card. */
  #bci-cf-wrap .bci-cf-row{
    display:block;
    padding:12px 14px;
    border:1px solid var(--bdr);
    border-radius:10px;
    margin-bottom:10px;
    background:var(--surf);
    font-size:13px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  #bci-cf-wrap .bci-cf-row:hover{ background:var(--surf); }

  /* Row 1: number badge + type name (icon + label). */
  #bci-cf-wrap .bci-cf-c.bci-cf-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px;
    background:var(--brand); color:#fff;
    border-radius:50%;
    font-weight:700; font-size:12.5px;
    margin-right:10px;
    vertical-align:middle;
  }
  #bci-cf-wrap .bci-cf-c.bci-cf-type{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:600; color:var(--text);
    vertical-align:middle;
  }

  /* Row 2: the three toggle switches sit in a 3-up mini-grid with
     inline pseudo-labels ("Status:", "Print:", "Required:"). */
  #bci-cf-wrap .bci-cf-c.bci-cf-tog{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 0 4px 0;
    margin-right:14px;
    min-width:0;
    font-size:12.5px; color:var(--muted); font-weight:500;
  }
  /* Auto-labels — order matches the JS-emitted <div>s: Status, Print, Required. */
  #bci-cf-wrap .bci-cf-row .bci-cf-c.bci-cf-tog:nth-of-type(3)::before{ content:"Status:"; }
  #bci-cf-wrap .bci-cf-row .bci-cf-c.bci-cf-tog:nth-of-type(4)::before{ content:"Print:";  }
  #bci-cf-wrap .bci-cf-row .bci-cf-c.bci-cf-tog:nth-of-type(5)::before{ content:"Required:"; }
  /* Wrap toggles into 2-per-row on very small viewports. */
  #bci-cf-wrap .bci-cf-c.bci-cf-tog{ flex-wrap:wrap; }

  /* Add a subtle separator between the two logical blocks. */
  #bci-cf-wrap .bci-cf-row .bci-cf-c.bci-cf-num,
  #bci-cf-wrap .bci-cf-row .bci-cf-c.bci-cf-type{
    padding-bottom:8px;
  }

  /* Row 3: the name input goes full-width on its own line. */
  #bci-cf-wrap .bci-cf-c.bci-cf-name{
    display:block;
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--bdr);
  }
  #bci-cf-wrap .bci-cf-c.bci-cf-name input[type="text"]{
    width:100%;
    font-size:14px;    /* iOS zooms in on <16px inputs; 14px keeps the balance */
    padding:9px 12px;
  }
  #bci-cf-wrap .bci-cf-addopt{ margin-top:8px; font-size:13px; }

  /* Options block underneath a text row — single column, no gutters. */
  #bci-cf-wrap .bci-cf-optblk{
    grid-template-columns:1fr;
    padding:0 14px 14px;
    margin-top:-6px;
  }
  #bci-cf-wrap .bci-cf-optblk .bci-cf-optlbl{ grid-column:1; padding-top:0; }
  #bci-cf-wrap .bci-cf-optblk .bci-cf-optright{ grid-column:1; }

  /* ── Same treatment for the Dispatch Address Custom Field variant ── */
  #bci-dacf-wrap .bci-dacf-row{
    display:block;
    padding:12px 14px;
    border:1px solid var(--bdr);
    border-radius:10px;
    margin-bottom:10px;
    background:var(--surf);
    font-size:13px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  #bci-dacf-wrap .bci-dacf-c.bci-dacf-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px;
    background:var(--brand); color:#fff;
    border-radius:50%; font-weight:700; font-size:12.5px;
    margin-right:10px; vertical-align:middle;
  }
  #bci-dacf-wrap .bci-dacf-c.bci-dacf-type{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:600; color:var(--text); vertical-align:middle;
  }
  #bci-dacf-wrap .bci-dacf-c.bci-dacf-tog{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 0 4px 0; margin-right:14px;
    font-size:12.5px; color:var(--muted); font-weight:500;
  }
  #bci-dacf-wrap .bci-dacf-row .bci-dacf-c.bci-dacf-tog:nth-of-type(3)::before{ content:"Required:"; }
  #bci-dacf-wrap .bci-dacf-c.bci-dacf-name{
    display:block;
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--bdr);
  }
  #bci-dacf-wrap .bci-dacf-c.bci-dacf-name input[type="text"]{
    width:100%; font-size:14px; padding:9px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.192 — Job Work list: status pill (matches reference), Remaining Quantity
   progress bar, and column-picker sidebar wrapper.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Status pill ──────────────────────────────────────────────────────── */
.jw-status-pill{
  display:inline-block;
  padding:5px 14px;
  border-radius:5px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.2px;
  color:#fff;
  min-width:64px; text-align:center;
}
.jw-status-pill.new       { background:#ef4444; }
.jw-status-pill.progress  { background:#f59e0b; }
.jw-status-pill.ready     { background:#3b82f6; }
.jw-status-pill.delivered { background:var(--brand); }
.jw-status-pill.cancelled { background:#6b7280; }
.jw-status-pill.draft     { background:#8b5cf6; }
.jw-status-pill.neutral   { background:#9ca3af; }

/* ── Remaining Quantity progress ─────────────────────────────────────── */
.jw-remaining{ min-width:130px; }
.jw-remaining-bar{
  width:100%; height:6px;
  background:#e5e7eb;
  border-radius:3px; overflow:hidden;
}
.jw-remaining-fill{
  height:100%;
  background:var(--brand);
  border-radius:3px;
  transition:width .18s ease;
}
.jw-remaining-txt{
  font-size:12px; color:var(--muted);
  margin-top:5px; text-align:center;
  font-weight:500;
}

/* ── Column-picker sidebar (reuses .ec-side framework) ───────────────── */
#jw-cols-wrap,


/* ── Column-picker sidebar (reuses .ec-side framework) ───────────────── */
#pf-cols-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#jw-cols-wrap.open,

#pf-cols-wrap.open{ pointer-events:auto; }
#jw-cols-wrap .ec-scrim,

#pf-cols-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#jw-cols-wrap.open .ec-scrim,

#pf-cols-wrap.open .ec-scrim{ opacity:1; }
#jw-cols-wrap .ec-side,

#pf-cols-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#jw-cols-wrap.open .ec-side,

#pf-cols-wrap.open .ec-side{ transform:translateX(0); }
#jw-cols-wrap .ec-side-head,

#pf-cols-wrap .ec-side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--bdr);
}
#jw-cols-wrap .ec-side-title,

#pf-cols-wrap .ec-side-title{ font-size:15px; font-weight:600; }
#jw-cols-wrap .ec-side-x,

#pf-cols-wrap .ec-side-x{
  width:30px; height:30px;
  background:transparent; border:none; color:var(--muted);
  border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
#jw-cols-wrap .ec-side-x:hover,

#pf-cols-wrap .ec-side-x:hover{ background:var(--surf2); color:var(--text); }
#jw-cols-wrap .ec-side-body,

#pf-cols-wrap .ec-side-body{ flex:1 1 auto; overflow-y:auto; padding:14px 8px; }
#jw-cols-wrap .ec-side-foot,

#pf-cols-wrap .ec-side-foot{
  padding:12px 20px;
  border-top:1px solid var(--bdr);
  display:flex; justify-content:space-between; gap:10px;
}

/* ── Job Work sort-caret tint (reuses .ma-list-sortable but tuned) ───── */
#jw-list-tbl .ma-list-sortable{ cursor:pointer; }
#jw-list-tbl .ma-sort-caret{ color:var(--muted); margin-left:2px; font-size:11px; }


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.200 — Sale Order list redesign
   Reuses .oi-toolbar / .oi-search-panel / .oi-search-grid / .oi-empty-wrap /
   .qt-adv-block from Quotation + Delivery Challan. Only adds:
     • Unsaved(N) pill states — warning tint when drafts exist and active
       tint when the unsaved-only filter is engaged (same visuals as
       #pg-quotations).
     • Trash toggle pill state — red-tinted when active.
════════════════════════════════════════════════════════════════════════════════ */

/* Unsaved (N) pill — warning state when drafts exist */
#pg-sale-orders .qt-pill-warn{
  color:#b45309;
  border-color:#fde68a;
  background:#fef3c7;
}
#pg-sale-orders .qt-pill-warn:hover{background:#fde68a}
/* Active state — used when the user clicks the pill to filter to drafts only */
#pg-sale-orders .qt-pill-active{
  color:var(--brand-dd);
  border-color:var(--brand);
  background:rgba(37,99,235,.08);
}
#pg-sale-orders .qt-pill-active:hover{background:rgba(37,99,235,.14)}

/* Trash toggle pill — active state (red-tinted) when trash view is on */
#pg-sale-orders #so-trash-toggle.so-trash-active{
  color:#b91c1c;
  border-color:#fecaca;
  background:#fee2e2;
}
#pg-sale-orders #so-trash-toggle.so-trash-active:hover{background:#fecaca}

/* Toolbar title on the redesigned Sale Order page */
#pg-sale-orders .oi-toolbar-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

/* Bulk action bar spacing tweak (used by Unsaved / Trash multi-select) */
#pg-sale-orders #so-bulk-bar{
  display:none;
}
#pg-sale-orders #so-bulk-bar.on{
  display:flex !important;
}

/* Mobile refinements for the Sale Order list — mirror quotations */
@media (max-width:640px){
  #pg-sale-orders .oi-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  #pg-sale-orders .oi-toolbar-actions{
    justify-content:flex-start;
  }
  #pg-sale-orders .oi-toolbar-actions .ma-list-pill,
  #pg-sale-orders .oi-toolbar-actions .ma-list-add{
    flex:1 1 auto;
    justify-content:center;
    min-height:36px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.201 — Purchase Order list redesign
   Same visual language as v3.9.200 (Sale Order). Reuses .oi-toolbar /
   .oi-search-panel / .oi-search-grid / .oi-empty-wrap / .qt-adv-block.
   Adds pg-purchase-orders specific pill states + a rule that hides the
   Rev. Charge field on the shared create form when in purchase_order mode.
════════════════════════════════════════════════════════════════════════════════ */

#pg-purchase-orders .qt-pill-warn{
  color:#b45309;
  border-color:var(--brand-bg2);
  background:var(--brand-bg);
}
#pg-purchase-orders .qt-pill-warn:hover{background:var(--brand-bg2)}
#pg-purchase-orders .qt-pill-active{
  color:var(--brand-dd);
  border-color:var(--brand);
  background:rgba(37,99,235,.08);
}
#pg-purchase-orders .qt-pill-active:hover{background:rgba(37,99,235,.14)}
#pg-purchase-orders #po-trash-toggle.po-trash-active{
  color:#b91c1c;
  border-color:#fecaca;
  background:#fee2e2;
}
#pg-purchase-orders #po-trash-toggle.po-trash-active:hover{background:#fecaca}
#pg-purchase-orders .oi-toolbar-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
#pg-purchase-orders #po-bulk-bar.on{ display:flex !important; }

@media (max-width:640px){
  #pg-purchase-orders .oi-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  #pg-purchase-orders .oi-toolbar-actions{ justify-content:flex-start; }
  #pg-purchase-orders .oi-toolbar-actions .ma-list-pill,
  #pg-purchase-orders .oi-toolbar-actions .ma-list-add{
    flex:1 1 auto;
    justify-content:center;
    min-height:36px;
  }
}

/* v3.9.201 — Hide the Rev. Charge field on the shared Create form
   when the page is being used to create a Purchase Order. The
   openPoModal reroute adds .cdc-form-po-mode to #pg-create-delivery-challan;
   this rule then hides the specific .gst-fr row that wraps #cdc-rev-charge. */
#pg-create-delivery-challan.cdc-form-po-mode .gst-fr:has(#cdc-rev-charge){
  display:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.207 — Service Request list redesign + full-page create form
════════════════════════════════════════════════════════════════════════════════ */

/* Toolbar pill states (mirrors SO/PO/QT) */
#pg-service-requests .qt-pill-warn{
  color:#b45309;
  border-color:var(--brand-bg2);
  background:var(--brand-bg);
}
#pg-service-requests .qt-pill-warn:hover{background:var(--brand-bg2)}
#pg-service-requests .qt-pill-active{
  color:var(--brand-dd);
  border-color:var(--brand);
  background:rgba(37,99,235,.08);
}
#pg-service-requests .qt-pill-active:hover{background:rgba(37,99,235,.14)}
#pg-service-requests #sr-trash-toggle.sr-trash-active{
  color:#b91c1c;
  border-color:#fecaca;
  background:#fee2e2;
}
#pg-service-requests #sr-trash-toggle.sr-trash-active:hover{background:#fecaca}
#pg-service-requests .oi-toolbar-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
}
#pg-service-requests #sr-bulk-bar.on{ display:flex !important; }

@media (max-width:640px){
  #pg-service-requests .oi-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  #pg-service-requests .oi-toolbar-actions{ justify-content:flex-start; }
  #pg-service-requests .oi-toolbar-actions .ma-list-pill,
  #pg-service-requests .oi-toolbar-actions .ma-list-add{
    flex:1 1 auto;
    justify-content:center;
    min-height:36px;
  }
}

/* Create Service Request page — inherits ALL layout from pg-bill's .gst-*
   rules (v3.9.208 rebuild uses the exact same class structure as #pg-bill),
   so no page-specific style overrides are needed. The v3.9.207 textarea
   min-height / focus rules that used to live here have been removed because
   pg-bill's existing .gst-card-body textarea styles handle them cleanly.
   Keeping this comment block as a marker so future audits can see the page
   is intentionally style-free. */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.213 — Topbar utility trio: Notifications · Shortcuts · Theme
════════════════════════════════════════════════════════════════════════════════ */

/* Wrapper for each utility button — enables absolute-positioned popovers */
.ma-hd-util-wrap{position:relative;display:inline-flex;align-items:center}

/* Base button — matches .ma-hd-fy tone but circular */
.ma-hd-util{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  cursor:pointer;font-family:inherit;
  transition:background .12s,transform .12s,box-shadow .12s;
  position:relative;
}
.ma-hd-util:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.ma-hd-util:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ma-hd-util[aria-expanded="true"]{background:rgba(255,255,255,.32)}

/* Unread badge on the notification bell */
.ma-hd-util-badge{
  position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;padding:0 4px;
  background:#ef4444;color:#fff;
  border-radius:9px;
  font-size:10px;font-weight:800;line-height:16px;
  border:2px solid var(--brand,var(--brand));
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  pointer-events:none;
}

/* Hide on mobile — used for the shortcut icon */
@media (max-width:768px){
  .ma-hd-hide-mobile{display:none!important}
}

/* ─── Popover panels (notifications + shortcuts) ────────────────────── */
.ma-hd-popover{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:340px;max-width:calc(100vw - 24px);
  background:#fff;color:var(--text,#111);
  border-radius:12px;
  border:1px solid var(--bdr,#e5e7eb);
  box-shadow:0 12px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  z-index:10000;
  display:none;
  overflow:hidden;
  animation:maHdPopIn .16s ease-out;
}
.ma-hd-popover.open{display:block}
@keyframes maHdPopIn{
  from{opacity:0;transform:translateY(-6px) scale(.98)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}
/* Little pointer arrow above the popover */
.ma-hd-popover::before{
  content:"";position:absolute;top:-6px;right:12px;
  width:12px;height:12px;background:#fff;
  border-top:1px solid var(--bdr,#e5e7eb);
  border-left:1px solid var(--bdr,#e5e7eb);
  transform:rotate(45deg);
}
.ma-hd-popover-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--bdr,#e5e7eb);
  background:linear-gradient(to bottom, #fafbfc, #fff);
}
.ma-hd-popover-title{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--text,#111);
  letter-spacing:.15px;
}
.ma-hd-popover-title svg{color:var(--brand-dd,var(--brand-dd))}
.ma-hd-popover-clear{
  background:none;border:none;padding:0;
  color:var(--brand-dd,var(--brand-dd));font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:color .12s;
}
.ma-hd-popover-clear:hover{color:var(--brand,var(--brand));text-decoration:underline}
.ma-hd-popover-body{
  max-height:60vh;overflow-y:auto;
  padding:8px 0;
}

/* Notification panel width */
.ma-notif-panel{width:360px}
.ma-notif-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 12px;
  color:var(--muted,#6b7280);font-size:13px;gap:10px;
}
.ma-notif-item{
  display:grid;grid-template-columns:32px 1fr auto;gap:10px;
  padding:10px 14px;
  border-bottom:1px solid #f3f4f6;
  cursor:default;
  transition:background .12s;
}
.ma-notif-item:hover{background:#f9fafb}
.ma-notif-item:last-child{border-bottom:none}
.ma-notif-icon{
  width:30px;height:30px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* v3.9.340 — Contextual notification icon palette */
.ma-notif-icon.success  { background:#DCFCE7; color:#166534; }
.ma-notif-icon.error    { background:#FEE2E2; color:#991B1B; }
.ma-notif-icon.warning  { background:#FEF3C7; color:#92400E; }
.ma-notif-icon.info     { background:var(--brand-bg); color:var(--brand-d); }
.ma-notif-icon.invoice  { background:var(--brand-bg); color:var(--brand-d); }
.ma-notif-icon.payment  { background:#DCFCE7; color:#166534; }
.ma-notif-icon.reminder { background:#FEF3C7; color:#92400E; }
.ma-notif-icon.customer { background:#F5F3FF; color:#6D28D9; }
.ma-notif-icon.product  { background:#ECFEFF; color:#0891B2; }
.ma-notif-icon.stock    { background:#FFEDD5; color:#C2410C; }
.ma-notif-icon.delete   { background:#FEE2E2; color:#991B1B; }
.ma-notif-icon.gst      { background:var(--brand-bg); color:var(--brand-dd); }
.ma-notif-icon.security { background:#F5F3FF; color:#6D28D9; }
.ma-notif-icon.email    { background:var(--brand-bg); color:var(--brand-d); }
.ma-notif-icon.whatsapp { background:#DCFCE7; color:#166534; }
/* Legacy aliases still supported so nothing breaks */
.ma-notif-icon.ok       { background:#DCFCE7; color:#166534; }
.ma-notif-icon.err      { background:#FEE2E2; color:#991B1B; }
.ma-notif-icon.warn     { background:#FEF3C7; color:#92400E; }

/* Dark-mode tinted backgrounds */
html[data-theme="dark"] .ma-notif-icon.success,
html[data-theme="dark"] .ma-notif-icon.payment,
html[data-theme="dark"] .ma-notif-icon.whatsapp,
html[data-theme="dark"] .ma-notif-icon.ok       { background:rgba(34,197,94,.18); color:#86EFAC; }
html[data-theme="dark"] .ma-notif-icon.error,
html[data-theme="dark"] .ma-notif-icon.delete,
html[data-theme="dark"] .ma-notif-icon.err      { background:rgba(239,68,68,.18); color:#FCA5A5; }
html[data-theme="dark"] .ma-notif-icon.warning,
html[data-theme="dark"] .ma-notif-icon.reminder,
html[data-theme="dark"] .ma-notif-icon.warn     { background:rgba(245,158,11,.18); color:#FCD34D; }
html[data-theme="dark"] .ma-notif-icon.info,
html[data-theme="dark"] .ma-notif-icon.invoice,
html[data-theme="dark"] .ma-notif-icon.gst,
html[data-theme="dark"] .ma-notif-icon.email    { background:rgba(37,99,235,.18); color:#93C5FD; }
html[data-theme="dark"] .ma-notif-icon.customer,
html[data-theme="dark"] .ma-notif-icon.security { background:rgba(124,58,237,.18); color:#C4B5FD; }
html[data-theme="dark"] .ma-notif-icon.product  { background:rgba(6,182,212,.18); color:#67E8F9; }
html[data-theme="dark"] .ma-notif-icon.stock    { background:rgba(234,88,12,.18); color:#FDBA74; }
.ma-notif-body{min-width:0;font-size:13px;color:var(--text,#111);line-height:1.35;word-break:break-word}
.ma-notif-time{font-size:11px;color:var(--muted,#9ca3af);white-space:nowrap}
.ma-notif-item.unread{background:var(--brand-bg)}
.ma-notif-item.unread:hover{background:var(--brand-bg2)}

/* Keyboard shortcuts popover */
.ma-kbd-panel{width:400px}
/* v3.9.482 — With 40+ shortcuts the panel is much taller. Cap the
   height and let the body scroll so the popup never overflows the
   viewport. Also style the new section headers (Go to / Create /
   Other) with a small colour dot + tiny hint pill on the right. */
.ma-kbd-panel .ma-hd-popover-body{
  max-height:min(70vh, 560px);
  overflow-y:auto;
  padding:0 0 6px;
}
.ma-kbd-section-hdr{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px 6px;
  font-size:11.5px;
  font-weight:700;
  color:#374151;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-top:1px solid #f1f5f9;
}
.ma-kbd-section-hdr:first-child{ border-top:none; }
.ma-kbd-section-dot{
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.ma-kbd-section-hint{
  margin-left:auto;
  font-size:10.5px;
  font-weight:600;
  color:#94a3b8;
  text-transform:none;
  letter-spacing:.02em;
  background:#f1f5f9;
  padding:2px 8px;
  border-radius:999px;
}
html[data-theme="dark"] .ma-kbd-section-hdr{
  color:#e2e8f0;
  border-top-color:rgba(255,255,255,.06);
}
html[data-theme="dark"] .ma-kbd-section-hint{
  background:rgba(255,255,255,.06);
  color:#94a3b8;
}
.ma-kbd-grid{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:6px 8px;
}
.ma-kbd-row{
  display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;
  padding:8px 10px;border-radius:6px;
  transition:background .12s;
}
.ma-kbd-row:hover{background:#f9fafb}
.ma-kbd-keys{display:inline-flex;align-items:center;gap:4px;justify-self:start;flex-wrap:nowrap}
.ma-kbd-keys kbd{
  display:inline-block;min-width:20px;
  padding:2px 6px;
  background:#f9fafb;
  border:1px solid #d1d5db;
  border-bottom-width:2px;
  border-radius:4px;
  font-family:inherit;font-size:11px;font-weight:700;
  color:var(--text,#111);text-align:center;
  line-height:1.4;
}
.ma-kbd-keys span{color:var(--muted,#9ca3af);font-size:11px}
.ma-kbd-desc{font-size:12.5px;color:var(--text,#111)}
.ma-kbd-hint{
  padding:10px 14px 14px;
  font-size:11px;color:var(--muted,#6b7280);
  border-top:1px solid #f3f4f6;
  background:#fafbfc;
}

/* ─── Dark-mode adjustments for the new popovers ─────────────────── */
html[data-theme="dark"] .ma-hd-popover{
  background:#1f2937;color:#f3f4f6;
  border-color:#374151;
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.2);
}
html[data-theme="dark"] .ma-hd-popover::before{
  background:#1f2937;border-color:#374151;
}
html[data-theme="dark"] .ma-hd-popover-hdr{
  background:linear-gradient(to bottom, #232f42, #1f2937);
  border-bottom-color:#374151;
}
html[data-theme="dark"] .ma-hd-popover-title{color:#f3f4f6}
html[data-theme="dark"] .ma-hd-popover-title svg{color:var(--brand,var(--brand))}
html[data-theme="dark"] .ma-notif-item{border-bottom-color:#374151}
html[data-theme="dark"] .ma-notif-item:hover{background:#2d3748}
html[data-theme="dark"] .ma-notif-item.unread{background:#1e3a5f}
html[data-theme="dark"] .ma-notif-item.unread:hover{background:var(--brand-dd)}
html[data-theme="dark"] .ma-notif-body{color:#f3f4f6}
html[data-theme="dark"] .ma-kbd-row:hover{background:#2d3748}
html[data-theme="dark"] .ma-kbd-desc{color:#f3f4f6}
html[data-theme="dark"] .ma-kbd-keys kbd{background:#374151;border-color:#4b5563;color:#f3f4f6}
html[data-theme="dark"] .ma-kbd-hint{background:#232f42;border-top-color:#374151;color:#9ca3af}

/* ─── Mobile refinements ─────────────────────────────────────────── */
@media (max-width:640px){
  .ma-hd-popover{
    /* Anchor to the viewport, not the button, so it doesn't clip */
    position:fixed;top:auto;right:12px;left:12px;
    max-width:none;min-width:0;width:auto;
  }
  .ma-hd-popover::before{display:none}
  .ma-notif-panel,.ma-kbd-panel{width:auto}
  .ma-hd-util{width:32px;height:32px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.214 — Topbar trio fixes
════════════════════════════════════════════════════════════════════════════════ */

/* ─── Notification item: dismiss button + meta row + Important pin ─── */
.ma-notif-item{
  grid-template-columns:32px 1fr 24px;
  align-items:start;
  padding:12px 14px;
}
.ma-notif-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:4px;
}
.ma-notif-pin{
  display:inline-block;padding:1px 6px;
  background:var(--brand-bg);color:#92400e;
  border-radius:8px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  line-height:1.5;
}
.ma-notif-close{
  background:transparent;border:none;padding:0;
  width:22px;height:22px;
  color:var(--muted,#9ca3af);font-size:14px;cursor:pointer;
  border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.ma-notif-close:hover{background:#fee2e2;color:#dc2626}
html[data-theme="dark"] .ma-notif-pin{background:#78350f;color:var(--brand-bg)}
html[data-theme="dark"] .ma-notif-close:hover{background:#7f1d1d;color:#fecaca}

/* ─── Theme confirmation modal ──────────────────────────────────────── */
.ma-theme-confirm{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  z-index:100000;
  padding:16px;
  animation:maThemeFadeIn .14s ease-out;
}
.ma-theme-confirm.open{display:flex}
@keyframes maThemeFadeIn{from{opacity:0}to{opacity:1}}

.ma-theme-confirm-card{
  background:#fff;border-radius:14px;
  padding:28px 24px 20px;
  max-width:380px;width:100%;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  animation:maThemeCardIn .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes maThemeCardIn{
  from{opacity:0;transform:translateY(12px) scale(.95)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
.ma-theme-confirm-icon{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-bg),var(--brand-bg2));
  color:var(--brand-dd,var(--brand-dd));
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.ma-theme-confirm-icon svg{width:32px;height:32px}
.ma-theme-confirm-title{
  font-size:18px;font-weight:700;color:var(--text,#111);
  margin-bottom:8px;
}
.ma-theme-confirm-sub{
  font-size:13.5px;line-height:1.45;color:var(--muted,#6b7280);
  margin-bottom:22px;
}
.ma-theme-confirm-actions{
  display:flex;gap:10px;justify-content:center;
}
.ma-theme-confirm-btn{
  flex:1;max-width:150px;
  padding:10px 18px;border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;border:1px solid transparent;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.ma-theme-confirm-btn.cancel{
  background:#f3f4f6;color:var(--text,#111);border-color:#e5e7eb;
}
.ma-theme-confirm-btn.cancel:hover{background:#e5e7eb}
.ma-theme-confirm-btn.ok{
  background:var(--brand,var(--brand));color:#fff;
  box-shadow:0 3px 10px rgba(37,99,235,.32);
}
.ma-theme-confirm-btn.ok:hover{
  background:var(--brand-d,var(--brand-d));
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(37,99,235,.42);
}
.ma-theme-confirm-btn:focus-visible{outline:2px solid var(--brand,var(--brand));outline-offset:2px}

html[data-theme="dark"] .ma-theme-confirm-card{background:#1f2937;box-shadow:0 25px 60px rgba(0,0,0,.65)}
html[data-theme="dark"] .ma-theme-confirm-icon{
  background:linear-gradient(135deg,#134e4a,var(--brand-dd));
  color:#7DD3FC;
}
html[data-theme="dark"] .ma-theme-confirm-title{color:#f3f4f6}
html[data-theme="dark"] .ma-theme-confirm-sub{color:#9ca3af}
html[data-theme="dark"] .ma-theme-confirm-btn.cancel{background:#374151;color:#f3f4f6;border-color:#4b5563}
html[data-theme="dark"] .ma-theme-confirm-btn.cancel:hover{background:#4b5563}

/* ─── Fixed / cleaned mobile popover ─── */
@media (max-width:640px){
  .ma-hd-popover{
    /* Anchor to the viewport as a bottom sheet-ish layout, not a floating popover */
    position:fixed;
    top:calc(var(--ma-topbar-h, 64px) + 8px);
    right:8px;left:8px;
    width:auto;min-width:0;max-width:none;
    max-height:calc(100vh - var(--ma-topbar-h, 64px) - 24px);
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .ma-hd-popover::before{display:none}
  .ma-hd-popover-body{
    max-height:calc(100vh - var(--ma-topbar-h, 64px) - 100px);
    -webkit-overflow-scrolling:touch;
  }
  .ma-notif-panel,.ma-kbd-panel{width:auto}
  /* Confirmation modal — snug to phone edges */
  .ma-theme-confirm-card{padding:22px 20px 18px;max-width:340px}
  .ma-theme-confirm-title{font-size:16.5px}
  .ma-theme-confirm-sub{font-size:13px;margin-bottom:18px}
  .ma-theme-confirm-actions{flex-direction:column-reverse}
  .ma-theme-confirm-btn{max-width:none;width:100%;padding:12px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.214 — Theme confirm modal + notification lifecycle + mobile fixes
════════════════════════════════════════════════════════════════════════════════ */

/* ─── Theme confirm modal ────────────────────────────────────────── */
.ma-theme-confirm-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
  align-items:center;justify-content:center;
  z-index:10100;
  padding:20px;
  animation:maThConfIn .18s ease-out;
}
.ma-theme-confirm-overlay.open{display:flex}
@keyframes maThConfIn{ from{opacity:0} to{opacity:1} }

.ma-theme-confirm-card{
  background:#fff;color:var(--text,#111);
  width:100%;max-width:360px;
  border-radius:16px;
  padding:26px 22px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.1);
  text-align:center;
  animation:maThConfCardIn .22s cubic-bezier(.2,1.1,.4,1);
}
@keyframes maThConfCardIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}
.ma-theme-confirm-icon{
  width:60px;height:60px;
  margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand-bg,var(--brand-bg)), var(--brand-bg2));
  color:var(--brand-dd,var(--brand-dd));
  display:inline-flex;align-items:center;justify-content:center;
}
.ma-theme-confirm-title{
  margin:0 0 6px;
  font-size:18px;font-weight:700;
  color:var(--text,#111);
  letter-spacing:.15px;
}
.ma-theme-confirm-msg{
  margin:0 0 22px;
  font-size:13.5px;color:var(--muted,#6b7280);
  line-height:1.5;
}
.ma-theme-confirm-actions{
  display:flex;gap:10px;
  justify-content:center;
}
.ma-theme-confirm-btn{
  flex:1;max-width:150px;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.ma-theme-confirm-btn.cancel{
  background:#f3f4f6;color:var(--text,#111);
  border:1px solid var(--bdr,#e5e7eb);
}
.ma-theme-confirm-btn.cancel:hover{background:#e5e7eb}
.ma-theme-confirm-btn.confirm{
  background:linear-gradient(135deg, var(--brand,var(--brand)), var(--brand-dd,var(--brand-dd)));
  color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,.35);
}
.ma-theme-confirm-btn.confirm:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.45);
}
.ma-theme-confirm-btn:focus-visible{
  outline:2px solid var(--brand,var(--brand));outline-offset:2px;
}

/* Dark mode variant of the confirm modal */
html[data-theme="dark"] .ma-theme-confirm-card{
  background:#1f2937;color:#f3f4f6;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
}
html[data-theme="dark"] .ma-theme-confirm-title{color:#f3f4f6}
html[data-theme="dark"] .ma-theme-confirm-msg{color:#9ca3af}
html[data-theme="dark"] .ma-theme-confirm-icon{
  background:linear-gradient(135deg, var(--brand-dd), var(--brand-dd));
  color:#BAE6FD;
}
html[data-theme="dark"] .ma-theme-confirm-btn.cancel{
  background:#374151;color:#f3f4f6;border-color:#4b5563;
}
html[data-theme="dark"] .ma-theme-confirm-btn.cancel:hover{background:#4b5563}

/* ─── Notification dismiss button + important pin ─────────────────── */
.ma-notif-item{position:relative}
.ma-notif-dismiss{
  position:absolute;top:8px;right:8px;
  width:20px;height:20px;
  padding:0;
  background:transparent;border:none;
  color:var(--muted,#9ca3af);
  cursor:pointer;
  border-radius:50%;
  display:none;
  align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.ma-notif-item:hover .ma-notif-dismiss{display:inline-flex}
.ma-notif-dismiss:hover{
  background:#fee2e2;color:#dc2626;
}
html[data-theme="dark"] .ma-notif-dismiss:hover{background:#7f1d1d;color:#fca5a5}
.ma-notif-item.important{border-left:3px solid #f59e0b}
.ma-notif-badge-pin{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  background:var(--brand-bg);color:#92400e;
  border-radius:8px;
  font-size:9px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;
  vertical-align:middle;
}
html[data-theme="dark"] .ma-notif-badge-pin{background:#78350f;color:#fde68a}

/* ─── Mobile fixes for popovers (was broken in v3.9.213) ─────────── */
@media (max-width:640px){
  .ma-hd-popover{
    /* Anchor to viewport, positioned just below the topbar. Use CSS vars
       so the topbar height is honoured even when it changes (e.g. via
       the CSS calc for --ma-topbar-h). */
    position:fixed !important;
    top:calc(var(--ma-topbar-h, 56px) + 8px) !important;
    right:8px !important;left:8px !important;
    bottom:auto;
    max-width:none;min-width:0;width:auto;
    max-height:calc(100vh - var(--ma-topbar-h, 56px) - 24px);
    display:none;
  }
  .ma-hd-popover.open{display:block}
  .ma-hd-popover::before{display:none}
  .ma-hd-popover-body{
    max-height:calc(100vh - var(--ma-topbar-h, 56px) - 100px);
    -webkit-overflow-scrolling:touch;
  }
  .ma-notif-panel,.ma-kbd-panel{width:auto}
  .ma-hd-util{width:32px;height:32px}
  .ma-hd-popover-hdr{padding:12px 14px 10px}
  .ma-notif-item{padding:10px 12px 10px 12px}
  .ma-notif-dismiss{display:inline-flex;top:6px;right:6px;background:rgba(0,0,0,.04)}
}

/* Provide the topbar-h var (default 56px on desktop, mobile might differ) */
:root{ --ma-topbar-h: 52px; }
@media (max-width:640px){ :root{ --ma-topbar-h: 52px; } }

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.216 — CN/DN detail extras visibility + HSN column widths
════════════════════════════════════════════════════════════════════════════════ */

/* Extras injected by the v3.9.216 patch are hidden by default and only
   revealed when the DC form is in Credit Note or Debit Note mode. */
#pg-create-delivery-challan .cdc-cndn-extra{ display:none; }
#pg-create-delivery-challan.cdc-form-cn-mode .cdc-cndn-extra,
#pg-create-delivery-challan.cdc-form-dn-mode .cdc-cndn-extra{ display:grid; }

/* Hint text is a plain block, not a grid */
#pg-create-delivery-challan.cdc-form-cn-mode .cdc-invref-hint,
#pg-create-delivery-challan.cdc-form-dn-mode .cdc-invref-hint{ display:block; margin:-4px 0 6px; }

/* In CN/DN mode, hide the DC form's native L.R. No. row because our
   v3.9.216 injected row provides L.R. + E-Way No. together */
#pg-create-delivery-challan.cdc-form-cn-mode #cdc-lr-no,
#pg-create-delivery-challan.cdc-form-dn-mode #cdc-lr-no{ display:none; }
#pg-create-delivery-challan.cdc-form-cn-mode #cdc-lr-no + label,
#pg-create-delivery-challan.cdc-form-dn-mode #cdc-lr-no + label{ display:none; }
/* Hide the entire native L.R. row (label sibling) */
#pg-create-delivery-challan.cdc-form-cn-mode .gst-fr:has(#cdc-lr-no),
#pg-create-delivery-challan.cdc-form-dn-mode .gst-fr:has(#cdc-lr-no){ display:none; }

/* HSN/SAC column width — narrow enough not to squeeze the price column */
.gst-items-tbl th.gst-c-hsn-h,
.gst-items-tbl td.gst-c-hsn{
  width:100px;
  min-width:80px;
  padding:6px 4px;
}
.gst-items-tbl td.gst-c-hsn input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--bdr,#e5e7eb);
  border-radius:4px;
  font-size:12.5px;
  font-family:inherit;
  text-align:center;
  outline:none;
  background:var(--surf,#fff);
  color:var(--text,#111);
  min-width:0;
}
.gst-items-tbl td.gst-c-hsn input:focus{
  border-color:var(--brand,var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}

/* Mobile — collapse into stacked layout via existing _maMobilizeItems
   pattern. Give the HSN cell a proper data-label. */
@media (max-width:640px){
  .gst-items-tbl td.gst-c-hsn::before{
    content:"HSN/SAC:";
    display:inline-block;
    font-weight:600;
    color:var(--muted,#6b7280);
    font-size:11px;
    margin-right:6px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.218 — MC Invoice Export Shipping (3-col label|input grid)
              + Product Items redesign (row-a/row-b pattern, no HSN column)
════════════════════════════════════════════════════════════════════════════════ */

/* ─── Export Shipping Detail v2 ───────────────────────────────────── */
#pg-mc-invoice .mc-ship-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px 32px;
}
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg{
  display:grid;
  grid-template-columns:130px 1fr;
  align-items:center;
  gap:10px;
  min-width:0;
}
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg label{
  font-size:12.5px;
  color:var(--text, #111);
  font-weight:500;
  margin:0;
  line-height:1.3;
  overflow-wrap:break-word;
}
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg input,
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg select{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:13px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-family:inherit;
  outline:none;
  min-width:0;
  box-sizing:border-box;
}
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg input:focus,
#pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg select:focus{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}

/* Retire the old mc-ship-grid rules so any lingering reference falls
   back to the v2 look (defense in depth). */
#pg-mc-invoice .mc-ship-grid{ display:contents; }

/* Mobile — collapse to a single column with label above input */
@media (max-width:900px){
  #pg-mc-invoice .mc-ship-grid-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 20px; }
}
@media (max-width:640px){
  #pg-mc-invoice .mc-ship-grid-v2{ grid-template-columns:1fr; gap:12px; }
  #pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg{
    grid-template-columns:1fr;
    gap:4px;
  }
  #pg-mc-invoice .mc-ship-grid-v2 .mc-ship-fg label{ font-weight:600; }
}


/* ─── Product Items header — right-side controls ──────────────────── */
#pg-mc-invoice .mc-items-hdr-right{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--muted, #6b7280);
}
#pg-mc-invoice .mc-items-hdr-disc-lbl{
  font-weight:500;
  color:var(--text, #111);
}
#pg-mc-invoice .mc-items-kebab{
  width:28px;height:28px;
  padding:0;
  background:#f9fafb;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:50%;
  color:var(--muted, #6b7280);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, color .12s;
}
#pg-mc-invoice .mc-items-kebab:hover{
  background:#e5e7eb;
  color:var(--text, #111);
}

/* ─── Product Items table — row-a/row-b ─────────────────────────── */
#pg-mc-invoice .mc-items-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
#pg-mc-invoice .mc-items-tbl thead th{
  padding:10px 8px;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted, #6b7280);
  letter-spacing:.4px;
  text-transform:uppercase;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:#fafbfc;
  text-align:center;
}
#pg-mc-invoice .mc-items-tbl thead th.gst-c-prod-h{
  text-align:left;
  padding-left:14px;
}
#pg-mc-invoice .mc-items-tbl thead th.r{ text-align:right; padding-right:12px; }

/* Row A — main input row */
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td{
  padding:8px 6px;
  border-bottom:none;
  vertical-align:top;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-sr{
  padding-top:14px;
  text-align:center;
  font-weight:600;
  color:var(--muted, #6b7280);
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-prod{
  padding-left:14px;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-total{
  text-align:right;
  padding-right:12px;
  padding-top:14px;
  font-weight:600;
  color:var(--text, #111);
}

/* Row A input styling — subtle borderless look until focus, matching
   the reference image where inputs blend into the cell background. */
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td input[type="text"],
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td input[type="number"]{
  width:100%;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:4px;
  font-size:13px;
  font-family:inherit;
  background:transparent;
  color:var(--text, #111);
  outline:none;
  min-width:0;
  box-sizing:border-box;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td input:hover{
  background:#f9fafb;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td input:focus{
  border-color:var(--brand, var(--brand));
  background:var(--surf, #fff);
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-qty input{ text-align:center; }
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-price input{
  text-align:right;
  padding-right:6px;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td.gst-c-disc input{ text-align:right; }

/* Price cell — flex row with info icon on the left of input */
#pg-mc-invoice .mc-price-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
#pg-mc-invoice .mc-price-info{
  color:var(--muted, #6b7280);
  cursor:help;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  position:relative;
}
#pg-mc-invoice .mc-price-info:hover{ color:var(--text, #111); }
#pg-mc-invoice .mc-price-info::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#111;color:#fff;
  padding:5px 9px;
  border-radius:5px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .12s;
  z-index:10;
}
#pg-mc-invoice .mc-price-info:hover::after{ opacity:1; }
#pg-mc-invoice .mc-price-wrap input{
  flex:1;
  min-width:0;
}

/* GST inputs (row-a) + amount lines (row-b) */
#pg-mc-invoice .mc-gst-inp{
  width:55px;
  padding:5px 6px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:4px;
  font-size:12px;
  text-align:center;
  background:var(--surf, #fff);
}
#pg-mc-invoice .mc-gst-amt{
  font-size:11px;
  color:var(--muted, #6b7280);
  text-align:center;
  padding-top:2px;
}

/* Row B — item note + amount lines */
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-b td{
  padding:0 6px 8px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  vertical-align:top;
  background:#fafbfc;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-b td.gst-c-prod-note{
  padding-left:14px;
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-b .gst-item-note{
  background:var(--brand-bg);
  border-radius:4px;
  padding:4px 8px;
  border:1px solid var(--brand-bg2);
}
#pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-b .gst-item-note textarea{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text, #111);
  font-family:inherit;
  font-size:12.5px;
  resize:vertical;
  outline:none;
  padding:0;
  min-height:22px;
}

/* Action column — rowspan=2, contains + and − buttons */
#pg-mc-invoice .mc-items-tbl tbody td.gst-c-act{
  padding:8px 6px;
  vertical-align:middle;
  text-align:center;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:#fafbfc;
  white-space:nowrap;
}
#pg-mc-invoice .mc-items-tbl .gst-add-row-btn,
#pg-mc-invoice .mc-items-tbl .gst-del-row-btn{
  width:26px;height:26px;
  padding:0;
  border-radius:50%;
  border:none;
  font-size:15px;
  font-weight:400;
  line-height:1;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s, box-shadow .12s;
  margin:2px;
}
#pg-mc-invoice .mc-items-tbl .gst-add-row-btn{
  background:var(--brand, var(--brand));
  box-shadow:0 1px 3px rgba(37,99,235,.35);
}
#pg-mc-invoice .mc-items-tbl .gst-add-row-btn:hover{
  transform:scale(1.08);
  background:var(--brand-d, var(--brand));
}
#pg-mc-invoice .mc-items-tbl .gst-del-row-btn{
  background:#ef4444;
  box-shadow:0 1px 3px rgba(239,68,68,.35);
}
#pg-mc-invoice .mc-items-tbl .gst-del-row-btn:hover{
  transform:scale(1.08);
  background:#dc2626;
}

/* Footer row — yellow highlight */
#pg-mc-invoice .mc-items-tbl tfoot .mc-items-foot-row td{
  background:var(--brand-bg);
  border-top:1px solid var(--brand-bg2);
  border-bottom:none;
  padding:10px 8px;
  font-weight:700;
  color:var(--text, #111);
}
#pg-mc-invoice .mc-items-tbl tfoot .mc-items-foot-row td.c{ text-align:center; }
#pg-mc-invoice .mc-items-tbl tfoot .mc-items-foot-row td.r{ text-align:right; padding-right:12px; }

/* Item picker combo dropdown — keep native look */
#pg-mc-invoice .mc-items-tbl .ma-combo-wrap{ position:relative; }
#pg-mc-invoice .mc-items-tbl .ma-combo-input-row{
  display:flex;
  align-items:center;
  gap:4px;
}
#pg-mc-invoice .mc-items-tbl .ma-combo-arrow{
  padding:2px 6px;
  background:transparent;
  border:none;
  color:var(--muted, #9ca3af);
  cursor:pointer;
  font-size:14px;
}
#pg-mc-invoice .mc-items-tbl .ma-combo-arrow:hover{ color:var(--text, #111); }


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.222 — Dispatch From sidebar: wider + Open Sans font
   ──────────────────────────────────────────────────────────────────────
   Open Sans is already imported via the @import at line ~2746 (added
   earlier for the .ma-form-modal-v2 modal), so the sidebar just needs
   the font-family rule below. Scoped strictly to `.bci-da-side` so no
   other part of the app changes.
════════════════════════════════════════════════════════════════════════════════ */

/* Wider variant — was width:min(600px, 92vw) from base .ec-side */
#bci-da-wrap .ec-side.bci-da-side{
  width:min(760px, 96vw);
}
@media (min-width:1400px){
  #bci-da-wrap .ec-side.bci-da-side{ width:820px; }
}

/* Open Sans applied to every text element inside the dispatch sidebar */
#bci-da-wrap .bci-da-side,
#bci-da-wrap .bci-da-side *{
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Slight polish on the section headers now that they're in Open Sans —
   the sans font reads best at 13.5/600 for these small labels */
#bci-da-wrap .bci-da-side .bci-da-section-hd{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.2px;
}
#bci-da-wrap .bci-da-side .ec-side-title{
  font-size:16px;
  font-weight:600;
  letter-spacing:.15px;
}
/* Row labels feel more balanced at 13/500 with Open Sans */
#bci-da-wrap .bci-da-side .bci-da-row > label{
  font-size:13px;
  font-weight:500;
}
/* Slightly increase input padding so the form breathes in the wider layout */
#bci-da-wrap .bci-da-side .bci-da-row input[type="text"],
#bci-da-wrap .bci-da-side .bci-da-row input[type="tel"],
#bci-da-wrap .bci-da-side .bci-da-row input[type="email"],
#bci-da-wrap .bci-da-side .bci-da-row select{
  padding:9px 12px;
  font-size:13.5px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.225 — Injected custom columns
   v3.9.226 — Border + auto-balanced widths fix
   ────────────────────────────────────────────────────────────────
   The v3.9.225 CSS made the injected input borderless and set a fixed
   min-width, which caused two visible bugs the user reported:
     1) "border not show between two field" — the injected input blended
        into the cell background so users couldn't see where the field
        started.
     2) "all field width arrange auto perfect like same width" — the
        fixed min-width forced other columns to shrink unevenly, and
        the injected input didn't visually match the price/qty inputs.

   Now:
     • Header + cell get an explicit right border so the column visually
       stands apart.
     • The input inside uses the SAME border style as every other
       .gst-items-tbl tbody td input (border:1px solid var(--bdr)).
     • Column is given a natural min-width and no max-width so it
       shares the leftover space with neighbours proportionally —
       matches the auto-balanced feel the user wants.
════════════════════════════════════════════════════════════════════════════════ */
.gst-items-tbl thead th.rb-cc-th{
  min-width:100px;
  padding:11px 8px;
  color:var(--muted, #6b7280);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-align:center;
  border-right:1px solid var(--bdr, #e5e7eb);
  background:var(--surf2, #fafbfc);
  white-space:nowrap;
}
.gst-items-tbl tbody td.rb-cc-td{
  min-width:100px;
  padding:10px 8px;
  vertical-align:top;
  text-align:center;
  border-right:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
}
/* Blank spacer cell in row-B — keep the vertical dividing border so the
   column separator continues under the item note as well */
.gst-items-tbl tbody tr.gst-item-row-b td.rb-cc-td{
  border-right:1px solid var(--bdr, #e5e7eb);
}
.gst-items-tbl tbody td.rb-cc-td .rb-cc-inp{
  /* Match every other input in the items table: same border, radius,
     padding, focus ring — so the custom column reads as a first-class
     field, not a floating box */
  width:100%;
  padding:7px 9px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:5px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-family:inherit;
  font-size:12.5px;
  text-align:center;
  outline:none;
  box-sizing:border-box;
  transition:border-color .12s, box-shadow .12s;
}
.gst-items-tbl tbody td.rb-cc-td .rb-cc-inp:focus{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}
.gst-items-tbl tfoot td.rb-cc-ft{
  min-width:100px;
  border-right:1px solid var(--bdr, #e5e7eb);
  background:inherit;
}

/* v3.9.299 — With custom columns injected, we KEEP Product (20%) and Total (20%)
   fixed so they don't shrink into the middle bucket. SR and Act stay narrow.
   Every other column (Qty / UOM / Price / Discount / IGST / custom) is `auto`
   with only a min-width — table-layout:fixed distributes the remaining ~54%
   equally across them, so:
      · 5 middle + 1 custom = 6 cols → each ~9%
      · 5 middle + 2 custom = 7 cols → each ~7.7%
      · 5 middle + 3 custom = 8 cols → each ~6.75%
   Product / Total keep their proportion regardless of how many customs. */
.gst-items-tbl.rb-has-cc thead th{
  width:auto;
  min-width:0;
}
.gst-items-tbl.rb-has-cc thead th.gst-c-sr-h{
  width:3%;
  min-width:38px;
}
.gst-items-tbl.rb-has-cc thead th.gst-c-act-h{
  width:3%;
  min-width:46px;
}
.gst-items-tbl.rb-has-cc thead th.gst-c-prod-h{
  width:20%;
  min-width:180px;   /* product still needs breathing room for the combo dropdown */
}
.gst-items-tbl.rb-has-cc thead th.gst-c-total-h{
  width:20%;
  min-width:130px;
}
.gst-items-tbl.rb-has-cc thead th.rb-cc-th{
  min-width:80px;
}
.gst-items-tbl.rb-has-cc thead th.gst-c-qty-h,
.gst-items-tbl.rb-has-cc thead th.gst-c-uom-h,
.gst-items-tbl.rb-has-cc thead th.gst-c-price-h,
.gst-items-tbl.rb-has-cc thead th.gst-c-disc-h,
.gst-items-tbl.rb-has-cc thead th.gst-c-igst-h{
  min-width:70px;
}/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.227 — Sales Report page (Report ▸ Sales)
════════════════════════════════════════════════════════════════════════════════ */
#pg-sales-report,
/*__CMT_1223__*/
#pg-notifications,
/*__CMT_1223__*/
#pg-gstr3b,
/*__CMT_1223__*/
#pg-gstr2b,
/*__CMT_1223__*/
#pg-gstr1,
/*__CMT_1223__*/
#pg-customer-wise-pl,
/*__CMT_1223__*/
#pg-bill-pl,
/*__CMT_1223__*/
#pg-day-wise-pl,
/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.227 — Sales Report page (Report ▸ Sales)
════════════════════════════════════════════════════════════════════════════════ */
#pg-daybook,
#pg-stock-report,
#pg-manufacture-report,
#pg-product-report,
#pg-company-outstanding-report,
#pg-other-document-product-report,
#pg-other-document-report,
#pg-outward-payment-report,
#pg-other-income-report,
#pg-product-wise-pl,
#pg-daily-expenses-report,
#pg-inward-payment-report,
/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.227 — Sales Report page (Report ▸ Sales)
════════════════════════════════════════════════════════════════════════════════ */
#pg-purchase-product-report,
#pg-sale-product-report,
/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.227 — Sales Report page (Report ▸ Sales)
════════════════════════════════════════════════════════════════════════════════ */
#pg-sale-outstanding{
  padding:24px;
  background:var(--bg, #f9fafb);
  min-height:100vh;
  padding-bottom:96px;   /* leave room for the fixed action bar */
}/* ─── Filter card ────────────────────────────────────────────── */
#pg-day-wise-pl .sr-card,
#pg-sales-report .sr-card,
#pg-notifications .sr-card,
#pg-gstr3b .sr-card,
#pg-gstr2b .sr-card,
#pg-gstr1 .sr-card,
#pg-customer-wise-pl .sr-card,
#pg-bill-pl .sr-card,
/* ─── Filter card ────────────────────────────────────────────── */
#pg-daybook .sr-card,
#pg-stock-report .sr-card,
#pg-manufacture-report .sr-card,
#pg-product-report .sr-card,
#pg-company-outstanding-report .sr-card,
#pg-other-document-product-report .sr-card,
#pg-other-document-report .sr-card,
#pg-outward-payment-report .sr-card,
#pg-other-income-report .sr-card,
#pg-product-wise-pl .sr-card,
#pg-daily-expenses-report .sr-card,
#pg-inward-payment-report .sr-card,
/* ─── Filter card ────────────────────────────────────────────── */
#pg-purchase-product-report .sr-card,
#pg-sale-product-report .sr-card,
/* ─── Filter card ────────────────────────────────────────────── */
#pg-sale-outstanding .sr-card,
#pg-purchase-outstanding .sr-card,
#pg-purchase-report .pr-card{

  background:var(--surf, #fff);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  overflow:hidden;
  margin-bottom:20px;
}#pg-sales-report .sr-card-hdr,
#pg-notifications .sr-card-hdr,
#pg-gstr3b .sr-card-hdr,
#pg-gstr2b .sr-card-hdr,
#pg-gstr1 .sr-card-hdr,
#pg-customer-wise-pl .sr-card-hdr,
#pg-bill-pl .sr-card-hdr,
#pg-day-wise-pl .sr-card-hdr,
#pg-daybook .sr-card-hdr,
#pg-stock-report .sr-card-hdr,
#pg-manufacture-report .sr-card-hdr,
#pg-product-report .sr-card-hdr,
#pg-company-outstanding-report .sr-card-hdr,
#pg-other-document-product-report .sr-card-hdr,
#pg-other-document-report .sr-card-hdr,
#pg-outward-payment-report .sr-card-hdr,
#pg-other-income-report .sr-card-hdr,
#pg-product-wise-pl .sr-card-hdr,
#pg-daily-expenses-report .sr-card-hdr,
#pg-inward-payment-report .sr-card-hdr,
#pg-purchase-product-report .sr-card-hdr,
#pg-sale-product-report .sr-card-hdr,
#pg-sale-outstanding .sr-card-hdr,
#pg-purchase-outstanding .sr-card-hdr,
#pg-purchase-report .pr-card-hdr{

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  gap:12px;
  flex-wrap:wrap;
}#pg-sales-report .sr-card-title,
#pg-notifications .sr-card-title,
#pg-gstr3b .sr-card-title,
#pg-gstr2b .sr-card-title,
#pg-gstr1 .sr-card-title,
#pg-customer-wise-pl .sr-card-title,
#pg-bill-pl .sr-card-title,
#pg-day-wise-pl .sr-card-title,
#pg-daybook .sr-card-title,
#pg-stock-report .sr-card-title,
#pg-manufacture-report .sr-card-title,
#pg-product-report .sr-card-title,
#pg-company-outstanding-report .sr-card-title,
#pg-other-document-product-report .sr-card-title,
#pg-other-document-report .sr-card-title,
#pg-outward-payment-report .sr-card-title,
#pg-other-income-report .sr-card-title,
#pg-product-wise-pl .sr-card-title,
#pg-daily-expenses-report .sr-card-title,
#pg-inward-payment-report .sr-card-title,
#pg-purchase-product-report .sr-card-title,
#pg-sale-product-report .sr-card-title,
#pg-sale-outstanding .sr-card-title,
#pg-purchase-outstanding .sr-card-title,
#pg-purchase-report .pr-card-title{

  font-size:14px;
  font-weight:600;
  color:var(--text, #111);
}#pg-sales-report .sr-card-hdr-actions,
#pg-notifications .sr-card-hdr-actions,
#pg-gstr3b .sr-card-hdr-actions,
#pg-gstr2b .sr-card-hdr-actions,
#pg-gstr1 .sr-card-hdr-actions,
#pg-customer-wise-pl .sr-card-hdr-actions,
#pg-bill-pl .sr-card-hdr-actions,
#pg-day-wise-pl .sr-card-hdr-actions,
#pg-daybook .sr-card-hdr-actions,
#pg-stock-report .sr-card-hdr-actions,
#pg-manufacture-report .sr-card-hdr-actions,
#pg-product-report .sr-card-hdr-actions,
#pg-company-outstanding-report .sr-card-hdr-actions,
#pg-other-document-product-report .sr-card-hdr-actions,
#pg-other-document-report .sr-card-hdr-actions,
#pg-outward-payment-report .sr-card-hdr-actions,
#pg-other-income-report .sr-card-hdr-actions,
#pg-product-wise-pl .sr-card-hdr-actions,
#pg-daily-expenses-report .sr-card-hdr-actions,
#pg-inward-payment-report .sr-card-hdr-actions,
#pg-purchase-product-report .sr-card-hdr-actions,
#pg-sale-product-report .sr-card-hdr-actions,
#pg-sale-outstanding .sr-card-hdr-actions,
#pg-purchase-outstanding .sr-card-hdr-actions,
#pg-purchase-report .pr-card-hdr-actions{

  display:flex;
  align-items:center;
  gap:8px;
}#pg-sales-report .sr-hdr-btn,
#pg-notifications .sr-hdr-btn,
#pg-gstr3b .sr-hdr-btn,
#pg-gstr2b .sr-hdr-btn,
#pg-gstr1 .sr-hdr-btn,
#pg-customer-wise-pl .sr-hdr-btn,
#pg-bill-pl .sr-hdr-btn,
#pg-day-wise-pl .sr-hdr-btn,
#pg-daybook .sr-hdr-btn,
#pg-stock-report .sr-hdr-btn,
#pg-manufacture-report .sr-hdr-btn,
#pg-product-report .sr-hdr-btn,
#pg-company-outstanding-report .sr-hdr-btn,
#pg-other-document-product-report .sr-hdr-btn,
#pg-other-document-report .sr-hdr-btn,
#pg-outward-payment-report .sr-hdr-btn,
#pg-other-income-report .sr-hdr-btn,
#pg-product-wise-pl .sr-hdr-btn,
#pg-daily-expenses-report .sr-hdr-btn,
#pg-inward-payment-report .sr-hdr-btn,
#pg-purchase-product-report .sr-hdr-btn,
#pg-sale-product-report .sr-hdr-btn,
#pg-sale-outstanding .sr-hdr-btn,
#pg-purchase-outstanding .sr-hdr-btn,
#pg-purchase-report .pr-hdr-btn{

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  background:#f9fafb;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  color:var(--text, #111);
  font-size:12.5px;
  font-family:inherit;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}#pg-sales-report .sr-hdr-btn:hover,
#pg-notifications .sr-hdr-btn:hover,
#pg-gstr3b .sr-hdr-btn:hover,
#pg-gstr2b .sr-hdr-btn:hover,
#pg-gstr1 .sr-hdr-btn:hover,
#pg-customer-wise-pl .sr-hdr-btn:hover,
#pg-bill-pl .sr-hdr-btn:hover,
#pg-day-wise-pl .sr-hdr-btn:hover,
#pg-daybook .sr-hdr-btn:hover,
#pg-stock-report .sr-hdr-btn:hover,
#pg-manufacture-report .sr-hdr-btn:hover,
#pg-product-report .sr-hdr-btn:hover,
#pg-company-outstanding-report .sr-hdr-btn:hover,
#pg-other-document-product-report .sr-hdr-btn:hover,
#pg-other-document-report .sr-hdr-btn:hover,
#pg-outward-payment-report .sr-hdr-btn:hover,
#pg-other-income-report .sr-hdr-btn:hover,
#pg-product-wise-pl .sr-hdr-btn:hover,
#pg-daily-expenses-report .sr-hdr-btn:hover,
#pg-inward-payment-report .sr-hdr-btn:hover,
#pg-purchase-product-report .sr-hdr-btn:hover,
#pg-sale-product-report .sr-hdr-btn:hover,
#pg-sale-outstanding .sr-hdr-btn:hover,
#pg-purchase-outstanding .sr-hdr-btn:hover,
#pg-purchase-report .pr-hdr-btn:hover{ background:#f3f4f6; }#pg-sales-report .sr-hdr-btn.on,
#pg-notifications .sr-hdr-btn.on,
#pg-gstr3b .sr-hdr-btn.on,
#pg-gstr2b .sr-hdr-btn.on,
#pg-gstr1 .sr-hdr-btn.on,
#pg-customer-wise-pl .sr-hdr-btn.on,
#pg-bill-pl .sr-hdr-btn.on,
#pg-day-wise-pl .sr-hdr-btn.on,
#pg-daybook .sr-hdr-btn.on,
#pg-stock-report .sr-hdr-btn.on,
#pg-manufacture-report .sr-hdr-btn.on,
#pg-product-report .sr-hdr-btn.on,
#pg-company-outstanding-report .sr-hdr-btn.on,
#pg-other-document-product-report .sr-hdr-btn.on,
#pg-other-document-report .sr-hdr-btn.on,
#pg-outward-payment-report .sr-hdr-btn.on,
#pg-other-income-report .sr-hdr-btn.on,
#pg-product-wise-pl .sr-hdr-btn.on,
#pg-daily-expenses-report .sr-hdr-btn.on,
#pg-inward-payment-report .sr-hdr-btn.on,
#pg-purchase-product-report .sr-hdr-btn.on,
#pg-sale-product-report .sr-hdr-btn.on,
#pg-sale-outstanding .sr-hdr-btn.on,
#pg-purchase-outstanding .sr-hdr-btn.on,
#pg-purchase-report .pr-hdr-btn.on{

  background:var(--brand-bg, var(--brand-bg));
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}#pg-sales-report .sr-card-toggle,
#pg-notifications .sr-card-toggle,
#pg-gstr3b .sr-card-toggle,
#pg-gstr2b .sr-card-toggle,
#pg-gstr1 .sr-card-toggle,
#pg-customer-wise-pl .sr-card-toggle,
#pg-bill-pl .sr-card-toggle,
#pg-day-wise-pl .sr-card-toggle,
#pg-daybook .sr-card-toggle,
#pg-stock-report .sr-card-toggle,
#pg-manufacture-report .sr-card-toggle,
#pg-product-report .sr-card-toggle,
#pg-company-outstanding-report .sr-card-toggle,
#pg-other-document-product-report .sr-card-toggle,
#pg-other-document-report .sr-card-toggle,
#pg-outward-payment-report .sr-card-toggle,
#pg-other-income-report .sr-card-toggle,
#pg-product-wise-pl .sr-card-toggle,
#pg-daily-expenses-report .sr-card-toggle,
#pg-inward-payment-report .sr-card-toggle,
#pg-purchase-product-report .sr-card-toggle,
#pg-sale-product-report .sr-card-toggle,
#pg-sale-outstanding .sr-card-toggle,
#pg-purchase-outstanding .sr-card-toggle,
#pg-purchase-report .pr-card-toggle{

  width:28px;height:28px;
  padding:0;
  background:var(--brand, var(--brand));
  border:none;
  border-radius:50%;
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  display:none;   /* mobile-only */
}/* Collapsed state on mobile — hide body */
#pg-day-wise-pl .sr-card.collapsed .sr-card-body,
#pg-sales-report .sr-card.collapsed .sr-card-body,
#pg-notifications .sr-card.collapsed .sr-card-body,
#pg-gstr3b .sr-card.collapsed .sr-card-body,
#pg-gstr2b .sr-card.collapsed .sr-card-body,
#pg-gstr1 .sr-card.collapsed .sr-card-body,
#pg-customer-wise-pl .sr-card.collapsed .sr-card-body,
#pg-bill-pl .sr-card.collapsed .sr-card-body,
/* Collapsed state on mobile — hide body */
#pg-daybook .sr-card.collapsed .sr-card-body,
#pg-stock-report .sr-card.collapsed .sr-card-body,
#pg-manufacture-report .sr-card.collapsed .sr-card-body,
#pg-product-report .sr-card.collapsed .sr-card-body,
#pg-company-outstanding-report .sr-card.collapsed .sr-card-body,
#pg-other-document-product-report .sr-card.collapsed .sr-card-body,
#pg-other-document-report .sr-card.collapsed .sr-card-body,
#pg-outward-payment-report .sr-card.collapsed .sr-card-body,
#pg-other-income-report .sr-card.collapsed .sr-card-body,
#pg-product-wise-pl .sr-card.collapsed .sr-card-body,
#pg-daily-expenses-report .sr-card.collapsed .sr-card-body,
#pg-inward-payment-report .sr-card.collapsed .sr-card-body,
/* Collapsed state on mobile — hide body */
#pg-purchase-product-report .sr-card.collapsed .sr-card-body,
#pg-sale-product-report .sr-card.collapsed .sr-card-body,
/* Collapsed state on mobile — hide body */
#pg-sale-outstanding .sr-card.collapsed .sr-card-body,
#pg-purchase-outstanding .sr-card.collapsed .sr-card-body,
#pg-purchase-report .pr-card.collapsed .pr-card-body{ display:none; }#pg-sales-report .sr-card.collapsed .sr-card-hdr,
#pg-notifications .sr-card.collapsed .sr-card-hdr,
#pg-gstr3b .sr-card.collapsed .sr-card-hdr,
#pg-gstr2b .sr-card.collapsed .sr-card-hdr,
#pg-gstr1 .sr-card.collapsed .sr-card-hdr,
#pg-customer-wise-pl .sr-card.collapsed .sr-card-hdr,
#pg-bill-pl .sr-card.collapsed .sr-card-hdr,
#pg-day-wise-pl .sr-card.collapsed .sr-card-hdr,
#pg-daybook .sr-card.collapsed .sr-card-hdr,
#pg-stock-report .sr-card.collapsed .sr-card-hdr,
#pg-manufacture-report .sr-card.collapsed .sr-card-hdr,
#pg-product-report .sr-card.collapsed .sr-card-hdr,
#pg-company-outstanding-report .sr-card.collapsed .sr-card-hdr,
#pg-other-document-product-report .sr-card.collapsed .sr-card-hdr,
#pg-other-document-report .sr-card.collapsed .sr-card-hdr,
#pg-outward-payment-report .sr-card.collapsed .sr-card-hdr,
#pg-other-income-report .sr-card.collapsed .sr-card-hdr,
#pg-product-wise-pl .sr-card.collapsed .sr-card-hdr,
#pg-daily-expenses-report .sr-card.collapsed .sr-card-hdr,
#pg-inward-payment-report .sr-card.collapsed .sr-card-hdr,
#pg-purchase-product-report .sr-card.collapsed .sr-card-hdr,
#pg-sale-product-report .sr-card.collapsed .sr-card-hdr,
#pg-sale-outstanding .sr-card.collapsed .sr-card-hdr,
#pg-purchase-outstanding .sr-card.collapsed .sr-card-hdr,
#pg-purchase-report .pr-card.collapsed .pr-card-hdr{ border-bottom:none; }/* ─── Filter form grid ─────────────────────────────────────── */
#pg-day-wise-pl .sr-card-body,
#pg-sales-report .sr-card-body,
#pg-notifications .sr-card-body,
#pg-gstr3b .sr-card-body,
#pg-gstr2b .sr-card-body,
#pg-gstr1 .sr-card-body,
#pg-customer-wise-pl .sr-card-body,
#pg-bill-pl .sr-card-body,
/* ─── Filter form grid ─────────────────────────────────────── */
#pg-daybook .sr-card-body,
#pg-stock-report .sr-card-body,
#pg-manufacture-report .sr-card-body,
#pg-product-report .sr-card-body,
#pg-company-outstanding-report .sr-card-body,
#pg-other-document-product-report .sr-card-body,
#pg-other-document-report .sr-card-body,
#pg-outward-payment-report .sr-card-body,
#pg-other-income-report .sr-card-body,
#pg-product-wise-pl .sr-card-body,
#pg-daily-expenses-report .sr-card-body,
#pg-inward-payment-report .sr-card-body,
/* ─── Filter form grid ─────────────────────────────────────── */
#pg-purchase-product-report .sr-card-body,
#pg-sale-product-report .sr-card-body,
/* ─── Filter form grid ─────────────────────────────────────── */
#pg-sale-outstanding .sr-card-body,
#pg-purchase-outstanding .sr-card-body,
#pg-purchase-report .pr-card-body{

  padding:20px;
}#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-day-wise-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{

  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:16px 20px;
  margin-bottom:16px;
}#pg-sales-report .sr-fg,
#pg-notifications .sr-fg,
#pg-gstr3b .sr-fg,
#pg-gstr2b .sr-fg,
#pg-gstr1 .sr-fg,
#pg-customer-wise-pl .sr-fg,
#pg-bill-pl .sr-fg,
#pg-day-wise-pl .sr-fg,
#pg-daybook .sr-fg,
#pg-stock-report .sr-fg,
#pg-manufacture-report .sr-fg,
#pg-product-report .sr-fg,
#pg-company-outstanding-report .sr-fg,
#pg-other-document-product-report .sr-fg,
#pg-other-document-report .sr-fg,
#pg-outward-payment-report .sr-fg,
#pg-other-income-report .sr-fg,
#pg-product-wise-pl .sr-fg,
#pg-daily-expenses-report .sr-fg,
#pg-inward-payment-report .sr-fg,
#pg-purchase-product-report .sr-fg,
#pg-sale-product-report .sr-fg,
#pg-sale-outstanding .sr-fg,
#pg-purchase-outstanding .sr-fg,
#pg-purchase-report .pr-fg{ display:flex; flex-direction:column; gap:6px; min-width:0; }#pg-sales-report .sr-fg > label,
#pg-notifications .sr-fg > label,
#pg-gstr3b .sr-fg > label,
#pg-gstr2b .sr-fg > label,
#pg-gstr1 .sr-fg > label,
#pg-customer-wise-pl .sr-fg > label,
#pg-bill-pl .sr-fg > label,
#pg-day-wise-pl .sr-fg > label,
#pg-daybook .sr-fg > label,
#pg-stock-report .sr-fg > label,
#pg-manufacture-report .sr-fg > label,
#pg-product-report .sr-fg > label,
#pg-company-outstanding-report .sr-fg > label,
#pg-other-document-product-report .sr-fg > label,
#pg-other-document-report .sr-fg > label,
#pg-outward-payment-report .sr-fg > label,
#pg-other-income-report .sr-fg > label,
#pg-product-wise-pl .sr-fg > label,
#pg-daily-expenses-report .sr-fg > label,
#pg-inward-payment-report .sr-fg > label,
#pg-purchase-product-report .sr-fg > label,
#pg-sale-product-report .sr-fg > label,
#pg-sale-outstanding .sr-fg > label,
#pg-purchase-outstanding .sr-fg > label,
#pg-purchase-report .pr-fg > label{

  font-size:12.5px;
  color:var(--text, #111);
  font-weight:500;
}#pg-sales-report .sr-fg input,
#pg-notifications .sr-fg input,
#pg-gstr3b .sr-fg input,
#pg-gstr2b .sr-fg input,
#pg-gstr1 .sr-fg input,
#pg-customer-wise-pl .sr-fg input,
#pg-bill-pl .sr-fg input,
#pg-daybook .sr-fg input,
#pg-stock-report .sr-fg input,
#pg-manufacture-report .sr-fg input,
#pg-product-report .sr-fg input,
#pg-company-outstanding-report .sr-fg input,
#pg-other-document-product-report .sr-fg input,
#pg-other-document-report .sr-fg input,
#pg-outward-payment-report .sr-fg input,
#pg-other-income-report .sr-fg input,
#pg-product-wise-pl .sr-fg input,
#pg-daily-expenses-report .sr-fg input,
#pg-inward-payment-report .sr-fg input,
#pg-purchase-product-report .sr-fg input,
#pg-sale-product-report .sr-fg input,
#pg-sale-outstanding .sr-fg input,
#pg-purchase-outstanding .sr-fg input,
#pg-purchase-report .pr-fg input,
#pg-day-wise-pl .sr-fg select,
#pg-sales-report .sr-fg select,
#pg-notifications .sr-fg select,
#pg-gstr3b .sr-fg select,
#pg-gstr2b .sr-fg select,
#pg-gstr1 .sr-fg select,
#pg-customer-wise-pl .sr-fg select,
#pg-bill-pl .sr-fg select,
#pg-daybook .sr-fg select,
#pg-stock-report .sr-fg select,
#pg-manufacture-report .sr-fg select,
#pg-product-report .sr-fg select,
#pg-company-outstanding-report .sr-fg select,
#pg-other-document-product-report .sr-fg select,
#pg-other-document-report .sr-fg select,
#pg-outward-payment-report .sr-fg select,
#pg-other-income-report .sr-fg select,
#pg-product-wise-pl .sr-fg select,
#pg-daily-expenses-report .sr-fg select,
#pg-inward-payment-report .sr-fg select,
#pg-purchase-product-report .sr-fg select,
#pg-sale-product-report .sr-fg select,
#pg-sale-outstanding .sr-fg select,
#pg-purchase-outstanding .sr-fg select,
#pg-purchase-report .pr-fg select{

  width:100%;
  padding:8px 10px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  background:var(--surf, #fff);
  color:var(--text, #111);
  outline:none;
  box-sizing:border-box;
}#pg-sales-report .sr-fg input:focus,
#pg-notifications .sr-fg input:focus,
#pg-gstr3b .sr-fg input:focus,
#pg-gstr2b .sr-fg input:focus,
#pg-gstr1 .sr-fg input:focus,
#pg-customer-wise-pl .sr-fg input:focus,
#pg-bill-pl .sr-fg input:focus,
#pg-daybook .sr-fg input:focus,
#pg-stock-report .sr-fg input:focus,
#pg-manufacture-report .sr-fg input:focus,
#pg-product-report .sr-fg input:focus,
#pg-company-outstanding-report .sr-fg input:focus,
#pg-other-document-product-report .sr-fg input:focus,
#pg-other-document-report .sr-fg input:focus,
#pg-outward-payment-report .sr-fg input:focus,
#pg-other-income-report .sr-fg input:focus,
#pg-product-wise-pl .sr-fg input:focus,
#pg-daily-expenses-report .sr-fg input:focus,
#pg-inward-payment-report .sr-fg input:focus,
#pg-purchase-product-report .sr-fg input:focus,
#pg-sale-product-report .sr-fg input:focus,
#pg-sale-outstanding .sr-fg input:focus,
#pg-purchase-outstanding .sr-fg input:focus,
#pg-purchase-report .pr-fg input:focus,
#pg-day-wise-pl .sr-fg select:focus,
#pg-sales-report .sr-fg select:focus,
#pg-notifications .sr-fg select:focus,
#pg-gstr3b .sr-fg select:focus,
#pg-gstr2b .sr-fg select:focus,
#pg-gstr1 .sr-fg select:focus,
#pg-customer-wise-pl .sr-fg select:focus,
#pg-bill-pl .sr-fg select:focus,
#pg-daybook .sr-fg select:focus,
#pg-stock-report .sr-fg select:focus,
#pg-manufacture-report .sr-fg select:focus,
#pg-product-report .sr-fg select:focus,
#pg-company-outstanding-report .sr-fg select:focus,
#pg-other-document-product-report .sr-fg select:focus,
#pg-other-document-report .sr-fg select:focus,
#pg-outward-payment-report .sr-fg select:focus,
#pg-other-income-report .sr-fg select:focus,
#pg-product-wise-pl .sr-fg select:focus,
#pg-daily-expenses-report .sr-fg select:focus,
#pg-inward-payment-report .sr-fg select:focus,
#pg-purchase-product-report .sr-fg select:focus,
#pg-sale-product-report .sr-fg select:focus,
#pg-sale-outstanding .sr-fg select:focus,
#pg-purchase-outstanding .sr-fg select:focus,
#pg-purchase-report .pr-fg select:focus{

  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}/* Product multi-select w/ dropdown */
#pg-day-wise-pl .sr-prod-wrap,
#pg-sales-report .sr-prod-wrap,
#pg-notifications .sr-prod-wrap,
#pg-gstr3b .sr-prod-wrap,
#pg-gstr2b .sr-prod-wrap,
#pg-gstr1 .sr-prod-wrap,
#pg-customer-wise-pl .sr-prod-wrap,
#pg-bill-pl .sr-prod-wrap,
/* Product multi-select w/ dropdown */
#pg-daybook .sr-prod-wrap,
#pg-stock-report .sr-prod-wrap,
#pg-manufacture-report .sr-prod-wrap,
#pg-product-report .sr-prod-wrap,
#pg-company-outstanding-report .sr-prod-wrap,
#pg-other-document-product-report .sr-prod-wrap,
#pg-other-document-report .sr-prod-wrap,
#pg-outward-payment-report .sr-prod-wrap,
#pg-other-income-report .sr-prod-wrap,
#pg-product-wise-pl .sr-prod-wrap,
#pg-daily-expenses-report .sr-prod-wrap,
#pg-inward-payment-report .sr-prod-wrap,
/* Product multi-select w/ dropdown */
#pg-purchase-product-report .sr-prod-wrap,
#pg-sale-product-report .sr-prod-wrap,
/* Product multi-select w/ dropdown */
#pg-sale-outstanding .sr-prod-wrap,
#pg-purchase-outstanding .sr-prod-wrap,
#pg-purchase-report .pr-prod-wrap{ position:relative; }#pg-sales-report .sr-prod-drop,
#pg-notifications .sr-prod-drop,
#pg-gstr3b .sr-prod-drop,
#pg-gstr2b .sr-prod-drop,
#pg-gstr1 .sr-prod-drop,
#pg-customer-wise-pl .sr-prod-drop,
#pg-bill-pl .sr-prod-drop,
#pg-day-wise-pl .sr-prod-drop,
#pg-daybook .sr-prod-drop,
#pg-stock-report .sr-prod-drop,
#pg-manufacture-report .sr-prod-drop,
#pg-product-report .sr-prod-drop,
#pg-company-outstanding-report .sr-prod-drop,
#pg-other-document-product-report .sr-prod-drop,
#pg-other-document-report .sr-prod-drop,
#pg-outward-payment-report .sr-prod-drop,
#pg-other-income-report .sr-prod-drop,
#pg-product-wise-pl .sr-prod-drop,
#pg-daily-expenses-report .sr-prod-drop,
#pg-inward-payment-report .sr-prod-drop,
#pg-purchase-product-report .sr-prod-drop,
#pg-sale-product-report .sr-prod-drop,
#pg-sale-outstanding .sr-prod-drop,
#pg-purchase-outstanding .sr-prod-drop,
#pg-purchase-report .pr-prod-drop{

  position:absolute;
  top:calc(100% + 2px); left:0; right:0;
  max-height:220px;
  overflow-y:auto;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  display:none;
  z-index:100;
}#pg-sales-report .sr-prod-drop.open,
#pg-notifications .sr-prod-drop.open,
#pg-gstr3b .sr-prod-drop.open,
#pg-gstr2b .sr-prod-drop.open,
#pg-gstr1 .sr-prod-drop.open,
#pg-customer-wise-pl .sr-prod-drop.open,
#pg-bill-pl .sr-prod-drop.open,
#pg-day-wise-pl .sr-prod-drop.open,
#pg-daybook .sr-prod-drop.open,
#pg-stock-report .sr-prod-drop.open,
#pg-manufacture-report .sr-prod-drop.open,
#pg-product-report .sr-prod-drop.open,
#pg-company-outstanding-report .sr-prod-drop.open,
#pg-other-document-product-report .sr-prod-drop.open,
#pg-other-document-report .sr-prod-drop.open,
#pg-outward-payment-report .sr-prod-drop.open,
#pg-other-income-report .sr-prod-drop.open,
#pg-product-wise-pl .sr-prod-drop.open,
#pg-daily-expenses-report .sr-prod-drop.open,
#pg-inward-payment-report .sr-prod-drop.open,
#pg-purchase-product-report .sr-prod-drop.open,
#pg-sale-product-report .sr-prod-drop.open,
#pg-sale-outstanding .sr-prod-drop.open,
#pg-purchase-outstanding .sr-prod-drop.open,
#pg-purchase-report .pr-prod-drop.open{ display:block; }#pg-sales-report .sr-prod-drop .sr-prod-item,
#pg-notifications .sr-prod-drop .sr-prod-item,
#pg-gstr3b .sr-prod-drop .sr-prod-item,
#pg-gstr2b .sr-prod-drop .sr-prod-item,
#pg-gstr1 .sr-prod-drop .sr-prod-item,
#pg-customer-wise-pl .sr-prod-drop .sr-prod-item,
#pg-bill-pl .sr-prod-drop .sr-prod-item,
#pg-day-wise-pl .sr-prod-drop .sr-prod-item,
#pg-daybook .sr-prod-drop .sr-prod-item,
#pg-stock-report .sr-prod-drop .sr-prod-item,
#pg-manufacture-report .sr-prod-drop .sr-prod-item,
#pg-product-report .sr-prod-drop .sr-prod-item,
#pg-company-outstanding-report .sr-prod-drop .sr-prod-item,
#pg-other-document-product-report .sr-prod-drop .sr-prod-item,
#pg-other-document-report .sr-prod-drop .sr-prod-item,
#pg-outward-payment-report .sr-prod-drop .sr-prod-item,
#pg-other-income-report .sr-prod-drop .sr-prod-item,
#pg-product-wise-pl .sr-prod-drop .sr-prod-item,
#pg-daily-expenses-report .sr-prod-drop .sr-prod-item,
#pg-inward-payment-report .sr-prod-drop .sr-prod-item,
#pg-purchase-product-report .sr-prod-drop .sr-prod-item,
#pg-sale-product-report .sr-prod-drop .sr-prod-item,
#pg-sale-outstanding .sr-prod-drop .sr-prod-item,
#pg-purchase-outstanding .sr-prod-drop .sr-prod-item,
#pg-purchase-report .pr-prod-drop .pr-prod-item{

  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
}#pg-sales-report .sr-prod-drop .sr-prod-item:hover,
#pg-notifications .sr-prod-drop .sr-prod-item:hover,
#pg-gstr3b .sr-prod-drop .sr-prod-item:hover,
#pg-gstr2b .sr-prod-drop .sr-prod-item:hover,
#pg-gstr1 .sr-prod-drop .sr-prod-item:hover,
#pg-customer-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-bill-pl .sr-prod-drop .sr-prod-item:hover,
#pg-day-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-daybook .sr-prod-drop .sr-prod-item:hover,
#pg-stock-report .sr-prod-drop .sr-prod-item:hover,
#pg-manufacture-report .sr-prod-drop .sr-prod-item:hover,
#pg-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-company-outstanding-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-document-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-document-report .sr-prod-drop .sr-prod-item:hover,
#pg-outward-payment-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-income-report .sr-prod-drop .sr-prod-item:hover,
#pg-product-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-daily-expenses-report .sr-prod-drop .sr-prod-item:hover,
#pg-inward-payment-report .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-sale-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-sale-outstanding .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-outstanding .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-report .pr-prod-drop .pr-prod-item:hover{ background:#f3f4f6; }#pg-sales-report .sr-prod-chip,
#pg-notifications .sr-prod-chip,
#pg-gstr3b .sr-prod-chip,
#pg-gstr2b .sr-prod-chip,
#pg-gstr1 .sr-prod-chip,
#pg-customer-wise-pl .sr-prod-chip,
#pg-bill-pl .sr-prod-chip,
#pg-day-wise-pl .sr-prod-chip,
#pg-daybook .sr-prod-chip,
#pg-stock-report .sr-prod-chip,
#pg-manufacture-report .sr-prod-chip,
#pg-product-report .sr-prod-chip,
#pg-company-outstanding-report .sr-prod-chip,
#pg-other-document-product-report .sr-prod-chip,
#pg-other-document-report .sr-prod-chip,
#pg-outward-payment-report .sr-prod-chip,
#pg-other-income-report .sr-prod-chip,
#pg-product-wise-pl .sr-prod-chip,
#pg-daily-expenses-report .sr-prod-chip,
#pg-inward-payment-report .sr-prod-chip,
#pg-purchase-product-report .sr-prod-chip,
#pg-sale-product-report .sr-prod-chip,
#pg-sale-outstanding .sr-prod-chip,
#pg-purchase-outstanding .sr-prod-chip,
#pg-purchase-report .pr-prod-chip{

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 6px 2px 8px;
  background:var(--brand, var(--brand));
  color:#fff;
  border-radius:4px;
  font-size:12px;
  margin:2px;
}#pg-sales-report .sr-prod-chip button,
#pg-notifications .sr-prod-chip button,
#pg-gstr3b .sr-prod-chip button,
#pg-gstr2b .sr-prod-chip button,
#pg-gstr1 .sr-prod-chip button,
#pg-customer-wise-pl .sr-prod-chip button,
#pg-bill-pl .sr-prod-chip button,
#pg-day-wise-pl .sr-prod-chip button,
#pg-daybook .sr-prod-chip button,
#pg-stock-report .sr-prod-chip button,
#pg-manufacture-report .sr-prod-chip button,
#pg-product-report .sr-prod-chip button,
#pg-company-outstanding-report .sr-prod-chip button,
#pg-other-document-product-report .sr-prod-chip button,
#pg-other-document-report .sr-prod-chip button,
#pg-outward-payment-report .sr-prod-chip button,
#pg-other-income-report .sr-prod-chip button,
#pg-product-wise-pl .sr-prod-chip button,
#pg-daily-expenses-report .sr-prod-chip button,
#pg-inward-payment-report .sr-prod-chip button,
#pg-purchase-product-report .sr-prod-chip button,
#pg-sale-product-report .sr-prod-chip button,
#pg-sale-outstanding .sr-prod-chip button,
#pg-purchase-outstanding .sr-prod-chip button,
#pg-purchase-report .pr-prod-chip button{

  background:none;border:none;color:#fff;cursor:pointer;padding:0 2px;font-size:14px;
}/* ─── Flag checkboxes ────────────────────────────────────── */
#pg-day-wise-pl .sr-flags,
#pg-sales-report .sr-flags,
#pg-notifications .sr-flags,
#pg-gstr3b .sr-flags,
#pg-gstr2b .sr-flags,
#pg-gstr1 .sr-flags,
#pg-customer-wise-pl .sr-flags,
#pg-bill-pl .sr-flags,
/* ─── Flag checkboxes ────────────────────────────────────── */
#pg-daybook .sr-flags,
#pg-stock-report .sr-flags,
#pg-manufacture-report .sr-flags,
#pg-product-report .sr-flags,
#pg-company-outstanding-report .sr-flags,
#pg-other-document-product-report .sr-flags,
#pg-other-document-report .sr-flags,
#pg-outward-payment-report .sr-flags,
#pg-other-income-report .sr-flags,
#pg-product-wise-pl .sr-flags,
#pg-daily-expenses-report .sr-flags,
#pg-inward-payment-report .sr-flags,
/* ─── Flag checkboxes ────────────────────────────────────── */
#pg-purchase-product-report .sr-flags,
#pg-sale-product-report .sr-flags,
/* ─── Flag checkboxes ────────────────────────────────────── */
#pg-sale-outstanding .sr-flags,
#pg-purchase-outstanding .sr-flags,
#pg-purchase-report .pr-flags{

  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--bdr, #e5e7eb);
}#pg-sales-report .sr-flags label,
#pg-notifications .sr-flags label,
#pg-gstr3b .sr-flags label,
#pg-gstr2b .sr-flags label,
#pg-gstr1 .sr-flags label,
#pg-customer-wise-pl .sr-flags label,
#pg-bill-pl .sr-flags label,
#pg-day-wise-pl .sr-flags label,
#pg-daybook .sr-flags label,
#pg-stock-report .sr-flags label,
#pg-manufacture-report .sr-flags label,
#pg-product-report .sr-flags label,
#pg-company-outstanding-report .sr-flags label,
#pg-other-document-product-report .sr-flags label,
#pg-other-document-report .sr-flags label,
#pg-outward-payment-report .sr-flags label,
#pg-other-income-report .sr-flags label,
#pg-product-wise-pl .sr-flags label,
#pg-daily-expenses-report .sr-flags label,
#pg-inward-payment-report .sr-flags label,
#pg-purchase-product-report .sr-flags label,
#pg-sale-product-report .sr-flags label,
#pg-sale-outstanding .sr-flags label,
#pg-purchase-outstanding .sr-flags label,
#pg-purchase-report .pr-flags label{

  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text, #111);
  cursor:pointer;
}#pg-sales-report .sr-flags input[type="checkbox"],
#pg-notifications .sr-flags input[type="checkbox"],
#pg-gstr3b .sr-flags input[type="checkbox"],
#pg-gstr2b .sr-flags input[type="checkbox"],
#pg-gstr1 .sr-flags input[type="checkbox"],
#pg-customer-wise-pl .sr-flags input[type="checkbox"],
#pg-bill-pl .sr-flags input[type="checkbox"],
#pg-day-wise-pl .sr-flags input[type="checkbox"],
#pg-daybook .sr-flags input[type="checkbox"],
#pg-stock-report .sr-flags input[type="checkbox"],
#pg-manufacture-report .sr-flags input[type="checkbox"],
#pg-product-report .sr-flags input[type="checkbox"],
#pg-company-outstanding-report .sr-flags input[type="checkbox"],
#pg-other-document-product-report .sr-flags input[type="checkbox"],
#pg-other-document-report .sr-flags input[type="checkbox"],
#pg-outward-payment-report .sr-flags input[type="checkbox"],
#pg-other-income-report .sr-flags input[type="checkbox"],
#pg-product-wise-pl .sr-flags input[type="checkbox"],
#pg-daily-expenses-report .sr-flags input[type="checkbox"],
#pg-inward-payment-report .sr-flags input[type="checkbox"],
#pg-purchase-product-report .sr-flags input[type="checkbox"],
#pg-sale-product-report .sr-flags input[type="checkbox"],
#pg-sale-outstanding .sr-flags input[type="checkbox"],
#pg-purchase-outstanding .sr-flags input[type="checkbox"],
#pg-purchase-report .pr-flags input[type="checkbox"]{

  width:16px; height:16px;
  accent-color:var(--brand, var(--brand));
  cursor:pointer;
}/* ─── Customize Report block ────────────────────────────── */
#pg-day-wise-pl .sr-cust-block,
#pg-sales-report .sr-cust-block,
#pg-notifications .sr-cust-block,
#pg-gstr3b .sr-cust-block,
#pg-gstr2b .sr-cust-block,
#pg-gstr1 .sr-cust-block,
#pg-customer-wise-pl .sr-cust-block,
#pg-bill-pl .sr-cust-block,
/* ─── Customize Report block ────────────────────────────── */
#pg-daybook .sr-cust-block,
#pg-stock-report .sr-cust-block,
#pg-manufacture-report .sr-cust-block,
#pg-product-report .sr-cust-block,
#pg-company-outstanding-report .sr-cust-block,
#pg-other-document-product-report .sr-cust-block,
#pg-other-document-report .sr-cust-block,
#pg-outward-payment-report .sr-cust-block,
#pg-other-income-report .sr-cust-block,
#pg-product-wise-pl .sr-cust-block,
#pg-daily-expenses-report .sr-cust-block,
#pg-inward-payment-report .sr-cust-block,
/* ─── Customize Report block ────────────────────────────── */
#pg-purchase-product-report .sr-cust-block,
#pg-sale-product-report .sr-cust-block,
/* ─── Customize Report block ────────────────────────────── */
#pg-sale-outstanding .sr-cust-block,
#pg-purchase-outstanding .sr-cust-block,
#pg-purchase-report .pr-cust-block{

  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--bdr, #e5e7eb);
}#pg-sales-report .sr-cust-hdr,
#pg-notifications .sr-cust-hdr,
#pg-gstr3b .sr-cust-hdr,
#pg-gstr2b .sr-cust-hdr,
#pg-gstr1 .sr-cust-hdr,
#pg-customer-wise-pl .sr-cust-hdr,
#pg-bill-pl .sr-cust-hdr,
#pg-day-wise-pl .sr-cust-hdr,
#pg-daybook .sr-cust-hdr,
#pg-stock-report .sr-cust-hdr,
#pg-manufacture-report .sr-cust-hdr,
#pg-product-report .sr-cust-hdr,
#pg-company-outstanding-report .sr-cust-hdr,
#pg-other-document-product-report .sr-cust-hdr,
#pg-other-document-report .sr-cust-hdr,
#pg-outward-payment-report .sr-cust-hdr,
#pg-other-income-report .sr-cust-hdr,
#pg-product-wise-pl .sr-cust-hdr,
#pg-daily-expenses-report .sr-cust-hdr,
#pg-inward-payment-report .sr-cust-hdr,
#pg-purchase-product-report .sr-cust-hdr,
#pg-sale-product-report .sr-cust-hdr,
#pg-sale-outstanding .sr-cust-hdr,
#pg-purchase-outstanding .sr-cust-hdr,
#pg-purchase-report .pr-cust-hdr{

  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}#pg-sales-report .sr-cust-hdr > label,
#pg-notifications .sr-cust-hdr > label,
#pg-gstr3b .sr-cust-hdr > label,
#pg-gstr2b .sr-cust-hdr > label,
#pg-gstr1 .sr-cust-hdr > label,
#pg-customer-wise-pl .sr-cust-hdr > label,
#pg-bill-pl .sr-cust-hdr > label,
#pg-day-wise-pl .sr-cust-hdr > label,
#pg-daybook .sr-cust-hdr > label,
#pg-stock-report .sr-cust-hdr > label,
#pg-manufacture-report .sr-cust-hdr > label,
#pg-product-report .sr-cust-hdr > label,
#pg-company-outstanding-report .sr-cust-hdr > label,
#pg-other-document-product-report .sr-cust-hdr > label,
#pg-other-document-report .sr-cust-hdr > label,
#pg-outward-payment-report .sr-cust-hdr > label,
#pg-other-income-report .sr-cust-hdr > label,
#pg-product-wise-pl .sr-cust-hdr > label,
#pg-daily-expenses-report .sr-cust-hdr > label,
#pg-inward-payment-report .sr-cust-hdr > label,
#pg-purchase-product-report .sr-cust-hdr > label,
#pg-sale-product-report .sr-cust-hdr > label,
#pg-sale-outstanding .sr-cust-hdr > label,
#pg-purchase-outstanding .sr-cust-hdr > label,
#pg-purchase-report .pr-cust-hdr > label{

  font-size:13px;
  font-weight:500;
  color:var(--text, #111);
}#pg-sales-report .sr-cust-selall,
#pg-notifications .sr-cust-selall,
#pg-gstr3b .sr-cust-selall,
#pg-gstr2b .sr-cust-selall,
#pg-gstr1 .sr-cust-selall,
#pg-customer-wise-pl .sr-cust-selall,
#pg-bill-pl .sr-cust-selall,
#pg-day-wise-pl .sr-cust-selall,
#pg-daybook .sr-cust-selall,
#pg-stock-report .sr-cust-selall,
#pg-manufacture-report .sr-cust-selall,
#pg-product-report .sr-cust-selall,
#pg-company-outstanding-report .sr-cust-selall,
#pg-other-document-product-report .sr-cust-selall,
#pg-other-document-report .sr-cust-selall,
#pg-outward-payment-report .sr-cust-selall,
#pg-other-income-report .sr-cust-selall,
#pg-product-wise-pl .sr-cust-selall,
#pg-daily-expenses-report .sr-cust-selall,
#pg-inward-payment-report .sr-cust-selall,
#pg-purchase-product-report .sr-cust-selall,
#pg-sale-product-report .sr-cust-selall,
#pg-sale-outstanding .sr-cust-selall,
#pg-purchase-outstanding .sr-cust-selall,
#pg-purchase-report .pr-cust-selall{

  padding:5px 12px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:5px;
  color:var(--text, #111);
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
}#pg-sales-report .sr-cust-selall:hover,
#pg-notifications .sr-cust-selall:hover,
#pg-gstr3b .sr-cust-selall:hover,
#pg-gstr2b .sr-cust-selall:hover,
#pg-gstr1 .sr-cust-selall:hover,
#pg-customer-wise-pl .sr-cust-selall:hover,
#pg-bill-pl .sr-cust-selall:hover,
#pg-day-wise-pl .sr-cust-selall:hover,
#pg-daybook .sr-cust-selall:hover,
#pg-stock-report .sr-cust-selall:hover,
#pg-manufacture-report .sr-cust-selall:hover,
#pg-product-report .sr-cust-selall:hover,
#pg-company-outstanding-report .sr-cust-selall:hover,
#pg-other-document-product-report .sr-cust-selall:hover,
#pg-other-document-report .sr-cust-selall:hover,
#pg-outward-payment-report .sr-cust-selall:hover,
#pg-other-income-report .sr-cust-selall:hover,
#pg-product-wise-pl .sr-cust-selall:hover,
#pg-daily-expenses-report .sr-cust-selall:hover,
#pg-inward-payment-report .sr-cust-selall:hover,
#pg-purchase-product-report .sr-cust-selall:hover,
#pg-sale-product-report .sr-cust-selall:hover,
#pg-sale-outstanding .sr-cust-selall:hover,
#pg-purchase-outstanding .sr-cust-selall:hover,
#pg-purchase-report .pr-cust-selall:hover{ background:#f3f4f6; }#pg-sales-report .sr-cust-chips,
#pg-notifications .sr-cust-chips,
#pg-gstr3b .sr-cust-chips,
#pg-gstr2b .sr-cust-chips,
#pg-gstr1 .sr-cust-chips,
#pg-customer-wise-pl .sr-cust-chips,
#pg-bill-pl .sr-cust-chips,
#pg-day-wise-pl .sr-cust-chips,
#pg-daybook .sr-cust-chips,
#pg-stock-report .sr-cust-chips,
#pg-manufacture-report .sr-cust-chips,
#pg-product-report .sr-cust-chips,
#pg-company-outstanding-report .sr-cust-chips,
#pg-other-document-product-report .sr-cust-chips,
#pg-other-document-report .sr-cust-chips,
#pg-outward-payment-report .sr-cust-chips,
#pg-other-income-report .sr-cust-chips,
#pg-product-wise-pl .sr-cust-chips,
#pg-daily-expenses-report .sr-cust-chips,
#pg-inward-payment-report .sr-cust-chips,
#pg-purchase-product-report .sr-cust-chips,
#pg-sale-product-report .sr-cust-chips,
#pg-sale-outstanding .sr-cust-chips,
#pg-purchase-outstanding .sr-cust-chips,
#pg-purchase-report .pr-cust-chips{

  min-height:34px;
  padding:8px 10px;
  background:#f9fafb;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  margin-bottom:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}#pg-sales-report .sr-cust-chip,
#pg-notifications .sr-cust-chip,
#pg-gstr3b .sr-cust-chip,
#pg-gstr2b .sr-cust-chip,
#pg-gstr1 .sr-cust-chip,
#pg-customer-wise-pl .sr-cust-chip,
#pg-bill-pl .sr-cust-chip,
#pg-day-wise-pl .sr-cust-chip,
#pg-daybook .sr-cust-chip,
#pg-stock-report .sr-cust-chip,
#pg-manufacture-report .sr-cust-chip,
#pg-product-report .sr-cust-chip,
#pg-company-outstanding-report .sr-cust-chip,
#pg-other-document-product-report .sr-cust-chip,
#pg-other-document-report .sr-cust-chip,
#pg-outward-payment-report .sr-cust-chip,
#pg-other-income-report .sr-cust-chip,
#pg-product-wise-pl .sr-cust-chip,
#pg-daily-expenses-report .sr-cust-chip,
#pg-inward-payment-report .sr-cust-chip,
#pg-purchase-product-report .sr-cust-chip,
#pg-sale-product-report .sr-cust-chip,
#pg-sale-outstanding .sr-cust-chip,
#pg-purchase-outstanding .sr-cust-chip,
#pg-purchase-report .pr-cust-chip{

  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px 3px 8px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #d1d5db);
  border-radius:4px;
  font-size:12px;
  color:var(--text, #111);
}#pg-sales-report .sr-cust-chip button,
#pg-notifications .sr-cust-chip button,
#pg-gstr3b .sr-cust-chip button,
#pg-gstr2b .sr-cust-chip button,
#pg-gstr1 .sr-cust-chip button,
#pg-customer-wise-pl .sr-cust-chip button,
#pg-bill-pl .sr-cust-chip button,
#pg-day-wise-pl .sr-cust-chip button,
#pg-daybook .sr-cust-chip button,
#pg-stock-report .sr-cust-chip button,
#pg-manufacture-report .sr-cust-chip button,
#pg-product-report .sr-cust-chip button,
#pg-company-outstanding-report .sr-cust-chip button,
#pg-other-document-product-report .sr-cust-chip button,
#pg-other-document-report .sr-cust-chip button,
#pg-outward-payment-report .sr-cust-chip button,
#pg-other-income-report .sr-cust-chip button,
#pg-product-wise-pl .sr-cust-chip button,
#pg-daily-expenses-report .sr-cust-chip button,
#pg-inward-payment-report .sr-cust-chip button,
#pg-purchase-product-report .sr-cust-chip button,
#pg-sale-product-report .sr-cust-chip button,
#pg-sale-outstanding .sr-cust-chip button,
#pg-purchase-outstanding .sr-cust-chip button,
#pg-purchase-report .pr-cust-chip button{

  background:none; border:none; color:var(--muted, #9ca3af);
  cursor:pointer; padding:0 2px; font-size:14px; font-weight:500;
}#pg-sales-report .sr-cust-chip button:hover,
#pg-notifications .sr-cust-chip button:hover,
#pg-gstr3b .sr-cust-chip button:hover,
#pg-gstr2b .sr-cust-chip button:hover,
#pg-gstr1 .sr-cust-chip button:hover,
#pg-customer-wise-pl .sr-cust-chip button:hover,
#pg-bill-pl .sr-cust-chip button:hover,
#pg-day-wise-pl .sr-cust-chip button:hover,
#pg-daybook .sr-cust-chip button:hover,
#pg-stock-report .sr-cust-chip button:hover,
#pg-manufacture-report .sr-cust-chip button:hover,
#pg-product-report .sr-cust-chip button:hover,
#pg-company-outstanding-report .sr-cust-chip button:hover,
#pg-other-document-product-report .sr-cust-chip button:hover,
#pg-other-document-report .sr-cust-chip button:hover,
#pg-outward-payment-report .sr-cust-chip button:hover,
#pg-other-income-report .sr-cust-chip button:hover,
#pg-product-wise-pl .sr-cust-chip button:hover,
#pg-daily-expenses-report .sr-cust-chip button:hover,
#pg-inward-payment-report .sr-cust-chip button:hover,
#pg-purchase-product-report .sr-cust-chip button:hover,
#pg-sale-product-report .sr-cust-chip button:hover,
#pg-sale-outstanding .sr-cust-chip button:hover,
#pg-purchase-outstanding .sr-cust-chip button:hover,
#pg-purchase-report .pr-cust-chip button:hover{ color:#dc2626; }#pg-sales-report .sr-cust-grid,
#pg-notifications .sr-cust-grid,
#pg-gstr3b .sr-cust-grid,
#pg-gstr2b .sr-cust-grid,
#pg-gstr1 .sr-cust-grid,
#pg-customer-wise-pl .sr-cust-grid,
#pg-bill-pl .sr-cust-grid,
#pg-day-wise-pl .sr-cust-grid,
#pg-daybook .sr-cust-grid,
#pg-stock-report .sr-cust-grid,
#pg-manufacture-report .sr-cust-grid,
#pg-product-report .sr-cust-grid,
#pg-company-outstanding-report .sr-cust-grid,
#pg-other-document-product-report .sr-cust-grid,
#pg-other-document-report .sr-cust-grid,
#pg-outward-payment-report .sr-cust-grid,
#pg-other-income-report .sr-cust-grid,
#pg-product-wise-pl .sr-cust-grid,
#pg-daily-expenses-report .sr-cust-grid,
#pg-inward-payment-report .sr-cust-grid,
#pg-purchase-product-report .sr-cust-grid,
#pg-sale-product-report .sr-cust-grid,
#pg-sale-outstanding .sr-cust-grid,
#pg-purchase-outstanding .sr-cust-grid,
#pg-purchase-report .pr-cust-grid{

  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px 20px;
}#pg-sales-report .sr-cust-grid label,
#pg-notifications .sr-cust-grid label,
#pg-gstr3b .sr-cust-grid label,
#pg-gstr2b .sr-cust-grid label,
#pg-gstr1 .sr-cust-grid label,
#pg-customer-wise-pl .sr-cust-grid label,
#pg-bill-pl .sr-cust-grid label,
#pg-day-wise-pl .sr-cust-grid label,
#pg-daybook .sr-cust-grid label,
#pg-stock-report .sr-cust-grid label,
#pg-manufacture-report .sr-cust-grid label,
#pg-product-report .sr-cust-grid label,
#pg-company-outstanding-report .sr-cust-grid label,
#pg-other-document-product-report .sr-cust-grid label,
#pg-other-document-report .sr-cust-grid label,
#pg-outward-payment-report .sr-cust-grid label,
#pg-other-income-report .sr-cust-grid label,
#pg-product-wise-pl .sr-cust-grid label,
#pg-daily-expenses-report .sr-cust-grid label,
#pg-inward-payment-report .sr-cust-grid label,
#pg-purchase-product-report .sr-cust-grid label,
#pg-sale-product-report .sr-cust-grid label,
#pg-sale-outstanding .sr-cust-grid label,
#pg-purchase-outstanding .sr-cust-grid label,
#pg-purchase-report .pr-cust-grid label{

  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  color:var(--text, #111);
  cursor:pointer;
  line-height:1.3;
}#pg-sales-report .sr-cust-grid input[type="checkbox"],
#pg-notifications .sr-cust-grid input[type="checkbox"],
#pg-gstr3b .sr-cust-grid input[type="checkbox"],
#pg-gstr2b .sr-cust-grid input[type="checkbox"],
#pg-gstr1 .sr-cust-grid input[type="checkbox"],
#pg-customer-wise-pl .sr-cust-grid input[type="checkbox"],
#pg-bill-pl .sr-cust-grid input[type="checkbox"],
#pg-day-wise-pl .sr-cust-grid input[type="checkbox"],
#pg-daybook .sr-cust-grid input[type="checkbox"],
#pg-stock-report .sr-cust-grid input[type="checkbox"],
#pg-manufacture-report .sr-cust-grid input[type="checkbox"],
#pg-product-report .sr-cust-grid input[type="checkbox"],
#pg-company-outstanding-report .sr-cust-grid input[type="checkbox"],
#pg-other-document-product-report .sr-cust-grid input[type="checkbox"],
#pg-other-document-report .sr-cust-grid input[type="checkbox"],
#pg-outward-payment-report .sr-cust-grid input[type="checkbox"],
#pg-other-income-report .sr-cust-grid input[type="checkbox"],
#pg-product-wise-pl .sr-cust-grid input[type="checkbox"],
#pg-daily-expenses-report .sr-cust-grid input[type="checkbox"],
#pg-inward-payment-report .sr-cust-grid input[type="checkbox"],
#pg-purchase-product-report .sr-cust-grid input[type="checkbox"],
#pg-sale-product-report .sr-cust-grid input[type="checkbox"],
#pg-sale-outstanding .sr-cust-grid input[type="checkbox"],
#pg-purchase-outstanding .sr-cust-grid input[type="checkbox"],
#pg-purchase-report .pr-cust-grid input[type="checkbox"]{

  width:16px; height:16px;
  margin-top:1px;
  flex-shrink:0;
  accent-color:var(--brand, var(--brand));
  cursor:pointer;
}/* ─── Advance Filter block ─────────────────────────────── */
#pg-day-wise-pl .sr-adv-block,
#pg-sales-report .sr-adv-block,
#pg-notifications .sr-adv-block,
#pg-gstr3b .sr-adv-block,
#pg-gstr2b .sr-adv-block,
#pg-gstr1 .sr-adv-block,
#pg-customer-wise-pl .sr-adv-block,
#pg-bill-pl .sr-adv-block,
/* ─── Advance Filter block ─────────────────────────────── */
#pg-daybook .sr-adv-block,
#pg-stock-report .sr-adv-block,
#pg-manufacture-report .sr-adv-block,
#pg-product-report .sr-adv-block,
#pg-company-outstanding-report .sr-adv-block,
#pg-other-document-product-report .sr-adv-block,
#pg-other-document-report .sr-adv-block,
#pg-outward-payment-report .sr-adv-block,
#pg-other-income-report .sr-adv-block,
#pg-product-wise-pl .sr-adv-block,
#pg-daily-expenses-report .sr-adv-block,
#pg-inward-payment-report .sr-adv-block,
/* ─── Advance Filter block ─────────────────────────────── */
#pg-purchase-product-report .sr-adv-block,
#pg-sale-product-report .sr-adv-block,
/* ─── Advance Filter block ─────────────────────────────── */
#pg-sale-outstanding .sr-adv-block,
#pg-purchase-outstanding .sr-adv-block,
#pg-purchase-report .pr-adv-block{

  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--bdr, #e5e7eb);
}#pg-sales-report .sr-adv-lbl,
#pg-notifications .sr-adv-lbl,
#pg-gstr3b .sr-adv-lbl,
#pg-gstr2b .sr-adv-lbl,
#pg-gstr1 .sr-adv-lbl,
#pg-customer-wise-pl .sr-adv-lbl,
#pg-bill-pl .sr-adv-lbl,
#pg-day-wise-pl .sr-adv-lbl,
#pg-daybook .sr-adv-lbl,
#pg-stock-report .sr-adv-lbl,
#pg-manufacture-report .sr-adv-lbl,
#pg-product-report .sr-adv-lbl,
#pg-company-outstanding-report .sr-adv-lbl,
#pg-other-document-product-report .sr-adv-lbl,
#pg-other-document-report .sr-adv-lbl,
#pg-outward-payment-report .sr-adv-lbl,
#pg-other-income-report .sr-adv-lbl,
#pg-product-wise-pl .sr-adv-lbl,
#pg-daily-expenses-report .sr-adv-lbl,
#pg-inward-payment-report .sr-adv-lbl,
#pg-purchase-product-report .sr-adv-lbl,
#pg-sale-product-report .sr-adv-lbl,
#pg-sale-outstanding .sr-adv-lbl,
#pg-purchase-outstanding .sr-adv-lbl,
#pg-purchase-report .pr-adv-lbl{

  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--text, #111);
  margin-bottom:10px;
}#pg-sales-report .sr-adv-row,
#pg-notifications .sr-adv-row,
#pg-gstr3b .sr-adv-row,
#pg-gstr2b .sr-adv-row,
#pg-gstr1 .sr-adv-row,
#pg-customer-wise-pl .sr-adv-row,
#pg-bill-pl .sr-adv-row,
#pg-day-wise-pl .sr-adv-row,
#pg-daybook .sr-adv-row,
#pg-stock-report .sr-adv-row,
#pg-manufacture-report .sr-adv-row,
#pg-product-report .sr-adv-row,
#pg-company-outstanding-report .sr-adv-row,
#pg-other-document-product-report .sr-adv-row,
#pg-other-document-report .sr-adv-row,
#pg-outward-payment-report .sr-adv-row,
#pg-other-income-report .sr-adv-row,
#pg-product-wise-pl .sr-adv-row,
#pg-daily-expenses-report .sr-adv-row,
#pg-inward-payment-report .sr-adv-row,
#pg-purchase-product-report .sr-adv-row,
#pg-sale-product-report .sr-adv-row,
#pg-sale-outstanding .sr-adv-row,
#pg-purchase-outstanding .sr-adv-row,
#pg-purchase-report .pr-adv-row{

  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:10px;
  align-items:center;
}#pg-sales-report .sr-adv-row select,
#pg-notifications .sr-adv-row select,
#pg-gstr3b .sr-adv-row select,
#pg-gstr2b .sr-adv-row select,
#pg-gstr1 .sr-adv-row select,
#pg-customer-wise-pl .sr-adv-row select,
#pg-bill-pl .sr-adv-row select,
#pg-daybook .sr-adv-row select,
#pg-stock-report .sr-adv-row select,
#pg-manufacture-report .sr-adv-row select,
#pg-product-report .sr-adv-row select,
#pg-company-outstanding-report .sr-adv-row select,
#pg-other-document-product-report .sr-adv-row select,
#pg-other-document-report .sr-adv-row select,
#pg-outward-payment-report .sr-adv-row select,
#pg-other-income-report .sr-adv-row select,
#pg-product-wise-pl .sr-adv-row select,
#pg-daily-expenses-report .sr-adv-row select,
#pg-inward-payment-report .sr-adv-row select,
#pg-purchase-product-report .sr-adv-row select,
#pg-sale-product-report .sr-adv-row select,
#pg-sale-outstanding .sr-adv-row select,
#pg-purchase-outstanding .sr-adv-row select,
#pg-purchase-report .pr-adv-row select,
#pg-day-wise-pl .sr-adv-row input,
#pg-sales-report .sr-adv-row input,
#pg-notifications .sr-adv-row input,
#pg-gstr3b .sr-adv-row input,
#pg-gstr2b .sr-adv-row input,
#pg-gstr1 .sr-adv-row input,
#pg-customer-wise-pl .sr-adv-row input,
#pg-bill-pl .sr-adv-row input,
#pg-daybook .sr-adv-row input,
#pg-stock-report .sr-adv-row input,
#pg-manufacture-report .sr-adv-row input,
#pg-product-report .sr-adv-row input,
#pg-company-outstanding-report .sr-adv-row input,
#pg-other-document-product-report .sr-adv-row input,
#pg-other-document-report .sr-adv-row input,
#pg-outward-payment-report .sr-adv-row input,
#pg-other-income-report .sr-adv-row input,
#pg-product-wise-pl .sr-adv-row input,
#pg-daily-expenses-report .sr-adv-row input,
#pg-inward-payment-report .sr-adv-row input,
#pg-purchase-product-report .sr-adv-row input,
#pg-sale-product-report .sr-adv-row input,
#pg-sale-outstanding .sr-adv-row input,
#pg-purchase-outstanding .sr-adv-row input,
#pg-purchase-report .pr-adv-row input{

  padding:8px 10px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  background:var(--surf, #fff);
  color:var(--text, #111);
  outline:none;
}#pg-sales-report .sr-adv-add,
#pg-notifications .sr-adv-add,
#pg-gstr3b .sr-adv-add,
#pg-gstr2b .sr-adv-add,
#pg-gstr1 .sr-adv-add,
#pg-customer-wise-pl .sr-adv-add,
#pg-bill-pl .sr-adv-add,
#pg-day-wise-pl .sr-adv-add,
#pg-daybook .sr-adv-add,
#pg-stock-report .sr-adv-add,
#pg-manufacture-report .sr-adv-add,
#pg-product-report .sr-adv-add,
#pg-company-outstanding-report .sr-adv-add,
#pg-other-document-product-report .sr-adv-add,
#pg-other-document-report .sr-adv-add,
#pg-outward-payment-report .sr-adv-add,
#pg-other-income-report .sr-adv-add,
#pg-product-wise-pl .sr-adv-add,
#pg-daily-expenses-report .sr-adv-add,
#pg-inward-payment-report .sr-adv-add,
#pg-purchase-product-report .sr-adv-add,
#pg-sale-product-report .sr-adv-add,
#pg-sale-outstanding .sr-adv-add,
#pg-purchase-outstanding .sr-adv-add,
#pg-purchase-report .pr-adv-add{

  width:32px;height:32px;
  padding:0;
  background:var(--brand, var(--brand));
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(37,99,235,.35);
}#pg-sales-report .sr-adv-add:hover,
#pg-notifications .sr-adv-add:hover,
#pg-gstr3b .sr-adv-add:hover,
#pg-gstr2b .sr-adv-add:hover,
#pg-gstr1 .sr-adv-add:hover,
#pg-customer-wise-pl .sr-adv-add:hover,
#pg-bill-pl .sr-adv-add:hover,
#pg-day-wise-pl .sr-adv-add:hover,
#pg-daybook .sr-adv-add:hover,
#pg-stock-report .sr-adv-add:hover,
#pg-manufacture-report .sr-adv-add:hover,
#pg-product-report .sr-adv-add:hover,
#pg-company-outstanding-report .sr-adv-add:hover,
#pg-other-document-product-report .sr-adv-add:hover,
#pg-other-document-report .sr-adv-add:hover,
#pg-outward-payment-report .sr-adv-add:hover,
#pg-other-income-report .sr-adv-add:hover,
#pg-product-wise-pl .sr-adv-add:hover,
#pg-daily-expenses-report .sr-adv-add:hover,
#pg-inward-payment-report .sr-adv-add:hover,
#pg-purchase-product-report .sr-adv-add:hover,
#pg-sale-product-report .sr-adv-add:hover,
#pg-sale-outstanding .sr-adv-add:hover,
#pg-purchase-outstanding .sr-adv-add:hover,
#pg-purchase-report .pr-adv-add:hover{ background:var(--brand-d, var(--brand)); }#pg-sales-report .sr-adv-list,
#pg-notifications .sr-adv-list,
#pg-gstr3b .sr-adv-list,
#pg-gstr2b .sr-adv-list,
#pg-gstr1 .sr-adv-list,
#pg-customer-wise-pl .sr-adv-list,
#pg-bill-pl .sr-adv-list,
#pg-day-wise-pl .sr-adv-list,
#pg-daybook .sr-adv-list,
#pg-stock-report .sr-adv-list,
#pg-manufacture-report .sr-adv-list,
#pg-product-report .sr-adv-list,
#pg-company-outstanding-report .sr-adv-list,
#pg-other-document-product-report .sr-adv-list,
#pg-other-document-report .sr-adv-list,
#pg-outward-payment-report .sr-adv-list,
#pg-other-income-report .sr-adv-list,
#pg-product-wise-pl .sr-adv-list,
#pg-daily-expenses-report .sr-adv-list,
#pg-inward-payment-report .sr-adv-list,
#pg-purchase-product-report .sr-adv-list,
#pg-sale-product-report .sr-adv-list,
#pg-sale-outstanding .sr-adv-list,
#pg-purchase-outstanding .sr-adv-list,
#pg-purchase-report .pr-adv-list{

  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}#pg-sales-report .sr-adv-chip,
#pg-notifications .sr-adv-chip,
#pg-gstr3b .sr-adv-chip,
#pg-gstr2b .sr-adv-chip,
#pg-gstr1 .sr-adv-chip,
#pg-customer-wise-pl .sr-adv-chip,
#pg-bill-pl .sr-adv-chip,
#pg-day-wise-pl .sr-adv-chip,
#pg-daybook .sr-adv-chip,
#pg-stock-report .sr-adv-chip,
#pg-manufacture-report .sr-adv-chip,
#pg-product-report .sr-adv-chip,
#pg-company-outstanding-report .sr-adv-chip,
#pg-other-document-product-report .sr-adv-chip,
#pg-other-document-report .sr-adv-chip,
#pg-outward-payment-report .sr-adv-chip,
#pg-other-income-report .sr-adv-chip,
#pg-product-wise-pl .sr-adv-chip,
#pg-daily-expenses-report .sr-adv-chip,
#pg-inward-payment-report .sr-adv-chip,
#pg-purchase-product-report .sr-adv-chip,
#pg-sale-product-report .sr-adv-chip,
#pg-sale-outstanding .sr-adv-chip,
#pg-purchase-outstanding .sr-adv-chip,
#pg-purchase-report .pr-adv-chip{

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:var(--brand-bg);
  border:1px solid #bfdbfe;
  border-radius:4px;
  font-size:12px;
  color:var(--brand-dd);
}#pg-sales-report .sr-adv-chip button,
#pg-notifications .sr-adv-chip button,
#pg-gstr3b .sr-adv-chip button,
#pg-gstr2b .sr-adv-chip button,
#pg-gstr1 .sr-adv-chip button,
#pg-customer-wise-pl .sr-adv-chip button,
#pg-bill-pl .sr-adv-chip button,
#pg-day-wise-pl .sr-adv-chip button,
#pg-daybook .sr-adv-chip button,
#pg-stock-report .sr-adv-chip button,
#pg-manufacture-report .sr-adv-chip button,
#pg-product-report .sr-adv-chip button,
#pg-company-outstanding-report .sr-adv-chip button,
#pg-other-document-product-report .sr-adv-chip button,
#pg-other-document-report .sr-adv-chip button,
#pg-outward-payment-report .sr-adv-chip button,
#pg-other-income-report .sr-adv-chip button,
#pg-product-wise-pl .sr-adv-chip button,
#pg-daily-expenses-report .sr-adv-chip button,
#pg-inward-payment-report .sr-adv-chip button,
#pg-purchase-product-report .sr-adv-chip button,
#pg-sale-product-report .sr-adv-chip button,
#pg-sale-outstanding .sr-adv-chip button,
#pg-purchase-outstanding .sr-adv-chip button,
#pg-purchase-report .pr-adv-chip button{

  background:none; border:none; color:var(--brand-dd);
  cursor:pointer; padding:0 2px;
}/* ─── Mobile-only buttons ─────────────────────────────── */
#pg-day-wise-pl .sr-mobile-btns,
#pg-sales-report .sr-mobile-btns,
#pg-notifications .sr-mobile-btns,
#pg-gstr3b .sr-mobile-btns,
#pg-gstr2b .sr-mobile-btns,
#pg-gstr1 .sr-mobile-btns,
#pg-customer-wise-pl .sr-mobile-btns,
#pg-bill-pl .sr-mobile-btns,
/* ─── Mobile-only buttons ─────────────────────────────── */
#pg-daybook .sr-mobile-btns,
#pg-stock-report .sr-mobile-btns,
#pg-manufacture-report .sr-mobile-btns,
#pg-product-report .sr-mobile-btns,
#pg-company-outstanding-report .sr-mobile-btns,
#pg-other-document-product-report .sr-mobile-btns,
#pg-other-document-report .sr-mobile-btns,
#pg-outward-payment-report .sr-mobile-btns,
#pg-other-income-report .sr-mobile-btns,
#pg-product-wise-pl .sr-mobile-btns,
#pg-daily-expenses-report .sr-mobile-btns,
#pg-inward-payment-report .sr-mobile-btns,
/* ─── Mobile-only buttons ─────────────────────────────── */
#pg-purchase-product-report .sr-mobile-btns,
#pg-sale-product-report .sr-mobile-btns,
/* ─── Mobile-only buttons ─────────────────────────────── */
#pg-sale-outstanding .sr-mobile-btns,
#pg-purchase-outstanding .sr-mobile-btns,
#pg-purchase-report .pr-mobile-btns{ display:none; }#pg-sales-report .sr-mobile-btn,
#pg-notifications .sr-mobile-btn,
#pg-gstr3b .sr-mobile-btn,
#pg-gstr2b .sr-mobile-btn,
#pg-gstr1 .sr-mobile-btn,
#pg-customer-wise-pl .sr-mobile-btn,
#pg-bill-pl .sr-mobile-btn,
#pg-day-wise-pl .sr-mobile-btn,
#pg-daybook .sr-mobile-btn,
#pg-stock-report .sr-mobile-btn,
#pg-manufacture-report .sr-mobile-btn,
#pg-product-report .sr-mobile-btn,
#pg-company-outstanding-report .sr-mobile-btn,
#pg-other-document-product-report .sr-mobile-btn,
#pg-other-document-report .sr-mobile-btn,
#pg-outward-payment-report .sr-mobile-btn,
#pg-other-income-report .sr-mobile-btn,
#pg-product-wise-pl .sr-mobile-btn,
#pg-daily-expenses-report .sr-mobile-btn,
#pg-inward-payment-report .sr-mobile-btn,
#pg-purchase-product-report .sr-mobile-btn,
#pg-sale-product-report .sr-mobile-btn,
#pg-sale-outstanding .sr-mobile-btn,
#pg-purchase-outstanding .sr-mobile-btn,
#pg-purchase-report .pr-mobile-btn{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px 14px;
  background:#f3f4f6;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  color:var(--text, #111);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  margin-bottom:8px;
}/* ─── Actions row (Reset / Search) ─────────────────────── */
#pg-day-wise-pl .sr-actions,
#pg-sales-report .sr-actions,
#pg-notifications .sr-actions,
#pg-gstr3b .sr-actions,
#pg-gstr2b .sr-actions,
#pg-gstr1 .sr-actions,
#pg-customer-wise-pl .sr-actions,
#pg-bill-pl .sr-actions,
/* ─── Actions row (Reset / Search) ─────────────────────── */
#pg-daybook .sr-actions,
#pg-stock-report .sr-actions,
#pg-manufacture-report .sr-actions,
#pg-product-report .sr-actions,
#pg-company-outstanding-report .sr-actions,
#pg-other-document-product-report .sr-actions,
#pg-other-document-report .sr-actions,
#pg-outward-payment-report .sr-actions,
#pg-other-income-report .sr-actions,
#pg-product-wise-pl .sr-actions,
#pg-daily-expenses-report .sr-actions,
#pg-inward-payment-report .sr-actions,
/* ─── Actions row (Reset / Search) ─────────────────────── */
#pg-purchase-product-report .sr-actions,
#pg-sale-product-report .sr-actions,
/* ─── Actions row (Reset / Search) ─────────────────────── */
#pg-sale-outstanding .sr-actions,
#pg-purchase-outstanding .sr-actions,
#pg-purchase-report .pr-actions{

  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--bdr, #e5e7eb);
}#pg-sales-report .sr-save-cust,
#pg-notifications .sr-save-cust,
#pg-gstr3b .sr-save-cust,
#pg-gstr2b .sr-save-cust,
#pg-gstr1 .sr-save-cust,
#pg-customer-wise-pl .sr-save-cust,
#pg-bill-pl .sr-save-cust,
#pg-day-wise-pl .sr-save-cust,
#pg-daybook .sr-save-cust,
#pg-stock-report .sr-save-cust,
#pg-manufacture-report .sr-save-cust,
#pg-product-report .sr-save-cust,
#pg-company-outstanding-report .sr-save-cust,
#pg-other-document-product-report .sr-save-cust,
#pg-other-document-report .sr-save-cust,
#pg-outward-payment-report .sr-save-cust,
#pg-other-income-report .sr-save-cust,
#pg-product-wise-pl .sr-save-cust,
#pg-daily-expenses-report .sr-save-cust,
#pg-inward-payment-report .sr-save-cust,
#pg-purchase-product-report .sr-save-cust,
#pg-sale-product-report .sr-save-cust,
#pg-sale-outstanding .sr-save-cust,
#pg-purchase-outstanding .sr-save-cust,
#pg-purchase-report .pr-save-cust{

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:#f9fafb;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  color:var(--text, #111);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
}#pg-sales-report .sr-btn,
#pg-notifications .sr-btn,
#pg-gstr3b .sr-btn,
#pg-gstr2b .sr-btn,
#pg-gstr1 .sr-btn,
#pg-customer-wise-pl .sr-btn,
#pg-bill-pl .sr-btn,
#pg-day-wise-pl .sr-btn,
#pg-daybook .sr-btn,
#pg-stock-report .sr-btn,
#pg-manufacture-report .sr-btn,
#pg-product-report .sr-btn,
#pg-company-outstanding-report .sr-btn,
#pg-other-document-product-report .sr-btn,
#pg-other-document-report .sr-btn,
#pg-outward-payment-report .sr-btn,
#pg-other-income-report .sr-btn,
#pg-product-wise-pl .sr-btn,
#pg-daily-expenses-report .sr-btn,
#pg-inward-payment-report .sr-btn,
#pg-purchase-product-report .sr-btn,
#pg-sale-product-report .sr-btn,
#pg-sale-outstanding .sr-btn,
#pg-purchase-outstanding .sr-btn,
#pg-purchase-report .pr-btn{

  padding:9px 22px;
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--bdr, #e5e7eb);
  display:inline-flex;
  align-items:center;
  gap:6px;
}#pg-sales-report .sr-btn-reset,
#pg-notifications .sr-btn-reset,
#pg-gstr3b .sr-btn-reset,
#pg-gstr2b .sr-btn-reset,
#pg-gstr1 .sr-btn-reset,
#pg-customer-wise-pl .sr-btn-reset,
#pg-bill-pl .sr-btn-reset,
#pg-day-wise-pl .sr-btn-reset,
#pg-daybook .sr-btn-reset,
#pg-stock-report .sr-btn-reset,
#pg-manufacture-report .sr-btn-reset,
#pg-product-report .sr-btn-reset,
#pg-company-outstanding-report .sr-btn-reset,
#pg-other-document-product-report .sr-btn-reset,
#pg-other-document-report .sr-btn-reset,
#pg-outward-payment-report .sr-btn-reset,
#pg-other-income-report .sr-btn-reset,
#pg-product-wise-pl .sr-btn-reset,
#pg-daily-expenses-report .sr-btn-reset,
#pg-inward-payment-report .sr-btn-reset,
#pg-purchase-product-report .sr-btn-reset,
#pg-sale-product-report .sr-btn-reset,
#pg-sale-outstanding .sr-btn-reset,
#pg-purchase-outstanding .sr-btn-reset,
#pg-purchase-report .pr-btn-reset{

  background:#f9fafb;
  color:var(--text, #111);
}#pg-sales-report .sr-btn-reset:hover,
#pg-notifications .sr-btn-reset:hover,
#pg-gstr3b .sr-btn-reset:hover,
#pg-gstr2b .sr-btn-reset:hover,
#pg-gstr1 .sr-btn-reset:hover,
#pg-customer-wise-pl .sr-btn-reset:hover,
#pg-bill-pl .sr-btn-reset:hover,
#pg-day-wise-pl .sr-btn-reset:hover,
#pg-daybook .sr-btn-reset:hover,
#pg-stock-report .sr-btn-reset:hover,
#pg-manufacture-report .sr-btn-reset:hover,
#pg-product-report .sr-btn-reset:hover,
#pg-company-outstanding-report .sr-btn-reset:hover,
#pg-other-document-product-report .sr-btn-reset:hover,
#pg-other-document-report .sr-btn-reset:hover,
#pg-outward-payment-report .sr-btn-reset:hover,
#pg-other-income-report .sr-btn-reset:hover,
#pg-product-wise-pl .sr-btn-reset:hover,
#pg-daily-expenses-report .sr-btn-reset:hover,
#pg-inward-payment-report .sr-btn-reset:hover,
#pg-purchase-product-report .sr-btn-reset:hover,
#pg-sale-product-report .sr-btn-reset:hover,
#pg-sale-outstanding .sr-btn-reset:hover,
#pg-purchase-outstanding .sr-btn-reset:hover,
#pg-purchase-report .pr-btn-reset:hover{ background:#f3f4f6; }#pg-sales-report .sr-btn-search,
#pg-notifications .sr-btn-search,
#pg-gstr3b .sr-btn-search,
#pg-gstr2b .sr-btn-search,
#pg-gstr1 .sr-btn-search,
#pg-customer-wise-pl .sr-btn-search,
#pg-bill-pl .sr-btn-search,
#pg-day-wise-pl .sr-btn-search,
#pg-daybook .sr-btn-search,
#pg-stock-report .sr-btn-search,
#pg-manufacture-report .sr-btn-search,
#pg-product-report .sr-btn-search,
#pg-company-outstanding-report .sr-btn-search,
#pg-other-document-product-report .sr-btn-search,
#pg-other-document-report .sr-btn-search,
#pg-outward-payment-report .sr-btn-search,
#pg-other-income-report .sr-btn-search,
#pg-product-wise-pl .sr-btn-search,
#pg-daily-expenses-report .sr-btn-search,
#pg-inward-payment-report .sr-btn-search,
#pg-purchase-product-report .sr-btn-search,
#pg-sale-product-report .sr-btn-search,
#pg-sale-outstanding .sr-btn-search,
#pg-purchase-outstanding .sr-btn-search,
#pg-purchase-report .pr-btn-search{

  background:var(--brand, var(--brand));
  color:#fff;
  border-color:var(--brand, var(--brand));
}#pg-sales-report .sr-btn-search:hover,
#pg-notifications .sr-btn-search:hover,
#pg-gstr3b .sr-btn-search:hover,
#pg-gstr2b .sr-btn-search:hover,
#pg-gstr1 .sr-btn-search:hover,
#pg-customer-wise-pl .sr-btn-search:hover,
#pg-bill-pl .sr-btn-search:hover,
#pg-day-wise-pl .sr-btn-search:hover,
#pg-daybook .sr-btn-search:hover,
#pg-stock-report .sr-btn-search:hover,
#pg-manufacture-report .sr-btn-search:hover,
#pg-product-report .sr-btn-search:hover,
#pg-company-outstanding-report .sr-btn-search:hover,
#pg-other-document-product-report .sr-btn-search:hover,
#pg-other-document-report .sr-btn-search:hover,
#pg-outward-payment-report .sr-btn-search:hover,
#pg-other-income-report .sr-btn-search:hover,
#pg-product-wise-pl .sr-btn-search:hover,
#pg-daily-expenses-report .sr-btn-search:hover,
#pg-inward-payment-report .sr-btn-search:hover,
#pg-purchase-product-report .sr-btn-search:hover,
#pg-sale-product-report .sr-btn-search:hover,
#pg-sale-outstanding .sr-btn-search:hover,
#pg-purchase-outstanding .sr-btn-search:hover,
#pg-purchase-report .pr-btn-search:hover{ background:var(--brand-d, var(--brand)); }/* ─── Results section ──────────────────────────────────── */
#pg-day-wise-pl .sr-results,
#pg-sales-report .sr-results,
#pg-notifications .sr-results,
#pg-gstr3b .sr-results,
#pg-gstr2b .sr-results,
#pg-gstr1 .sr-results,
#pg-customer-wise-pl .sr-results,
#pg-bill-pl .sr-results,
/* ─── Results section ──────────────────────────────────── */
#pg-daybook .sr-results,
#pg-stock-report .sr-results,
#pg-manufacture-report .sr-results,
#pg-product-report .sr-results,
#pg-company-outstanding-report .sr-results,
#pg-other-document-product-report .sr-results,
#pg-other-document-report .sr-results,
#pg-outward-payment-report .sr-results,
#pg-other-income-report .sr-results,
#pg-product-wise-pl .sr-results,
#pg-daily-expenses-report .sr-results,
#pg-inward-payment-report .sr-results,
/* ─── Results section ──────────────────────────────────── */
#pg-purchase-product-report .sr-results,
#pg-sale-product-report .sr-results,
/* ─── Results section ──────────────────────────────────── */
#pg-sale-outstanding .sr-results,
#pg-purchase-outstanding .sr-results,
#pg-purchase-report .pr-results{

  background:var(--surf, #fff);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  padding:24px;
  margin-bottom:80px;
}#pg-sales-report .sr-biz-hdr,
#pg-notifications .sr-biz-hdr,
#pg-gstr3b .sr-biz-hdr,
#pg-gstr2b .sr-biz-hdr,
#pg-gstr1 .sr-biz-hdr,
#pg-customer-wise-pl .sr-biz-hdr,
#pg-bill-pl .sr-biz-hdr,
#pg-day-wise-pl .sr-biz-hdr,
#pg-daybook .sr-biz-hdr,
#pg-stock-report .sr-biz-hdr,
#pg-manufacture-report .sr-biz-hdr,
#pg-product-report .sr-biz-hdr,
#pg-company-outstanding-report .sr-biz-hdr,
#pg-other-document-product-report .sr-biz-hdr,
#pg-other-document-report .sr-biz-hdr,
#pg-outward-payment-report .sr-biz-hdr,
#pg-other-income-report .sr-biz-hdr,
#pg-product-wise-pl .sr-biz-hdr,
#pg-daily-expenses-report .sr-biz-hdr,
#pg-inward-payment-report .sr-biz-hdr,
#pg-purchase-product-report .sr-biz-hdr,
#pg-sale-product-report .sr-biz-hdr,
#pg-sale-outstanding .sr-biz-hdr,
#pg-purchase-outstanding .sr-biz-hdr,
#pg-purchase-report .pr-biz-hdr{ margin-bottom:20px; }#pg-sales-report .sr-biz-name,
#pg-notifications .sr-biz-name,
#pg-gstr3b .sr-biz-name,
#pg-gstr2b .sr-biz-name,
#pg-gstr1 .sr-biz-name,
#pg-customer-wise-pl .sr-biz-name,
#pg-bill-pl .sr-biz-name,
#pg-day-wise-pl .sr-biz-name,
#pg-daybook .sr-biz-name,
#pg-stock-report .sr-biz-name,
#pg-manufacture-report .sr-biz-name,
#pg-product-report .sr-biz-name,
#pg-company-outstanding-report .sr-biz-name,
#pg-other-document-product-report .sr-biz-name,
#pg-other-document-report .sr-biz-name,
#pg-outward-payment-report .sr-biz-name,
#pg-other-income-report .sr-biz-name,
#pg-product-wise-pl .sr-biz-name,
#pg-daily-expenses-report .sr-biz-name,
#pg-inward-payment-report .sr-biz-name,
#pg-purchase-product-report .sr-biz-name,
#pg-sale-product-report .sr-biz-name,
#pg-sale-outstanding .sr-biz-name,
#pg-purchase-outstanding .sr-biz-name,
#pg-purchase-report .pr-biz-name{ font-size:15px; font-weight:600; color:var(--text, #111); }#pg-sales-report .sr-biz-addr,
#pg-notifications .sr-biz-addr,
#pg-gstr3b .sr-biz-addr,
#pg-gstr2b .sr-biz-addr,
#pg-gstr1 .sr-biz-addr,
#pg-customer-wise-pl .sr-biz-addr,
#pg-bill-pl .sr-biz-addr,
#pg-day-wise-pl .sr-biz-addr,
#pg-daybook .sr-biz-addr,
#pg-stock-report .sr-biz-addr,
#pg-manufacture-report .sr-biz-addr,
#pg-product-report .sr-biz-addr,
#pg-company-outstanding-report .sr-biz-addr,
#pg-other-document-product-report .sr-biz-addr,
#pg-other-document-report .sr-biz-addr,
#pg-outward-payment-report .sr-biz-addr,
#pg-other-income-report .sr-biz-addr,
#pg-product-wise-pl .sr-biz-addr,
#pg-daily-expenses-report .sr-biz-addr,
#pg-inward-payment-report .sr-biz-addr,
#pg-purchase-product-report .sr-biz-addr,
#pg-sale-product-report .sr-biz-addr,
#pg-sale-outstanding .sr-biz-addr,
#pg-purchase-outstanding .sr-biz-addr,
#pg-purchase-report .pr-biz-addr{ font-size:13px; color:var(--muted, #6b7280); }#pg-sales-report .sr-report-title,
#pg-notifications .sr-report-title,
#pg-gstr3b .sr-report-title,
#pg-gstr2b .sr-report-title,
#pg-gstr1 .sr-report-title,
#pg-customer-wise-pl .sr-report-title,
#pg-bill-pl .sr-report-title,
#pg-day-wise-pl .sr-report-title,
#pg-daybook .sr-report-title,
#pg-stock-report .sr-report-title,
#pg-manufacture-report .sr-report-title,
#pg-product-report .sr-report-title,
#pg-company-outstanding-report .sr-report-title,
#pg-other-document-product-report .sr-report-title,
#pg-other-document-report .sr-report-title,
#pg-outward-payment-report .sr-report-title,
#pg-other-income-report .sr-report-title,
#pg-product-wise-pl .sr-report-title,
#pg-daily-expenses-report .sr-report-title,
#pg-inward-payment-report .sr-report-title,
#pg-purchase-product-report .sr-report-title,
#pg-sale-product-report .sr-report-title,
#pg-sale-outstanding .sr-report-title,
#pg-purchase-outstanding .sr-report-title,
#pg-purchase-report .pr-report-title{ font-size:16px; font-weight:600; color:var(--text, #111); }#pg-sales-report .sr-report-sub,
#pg-notifications .sr-report-sub,
#pg-gstr3b .sr-report-sub,
#pg-gstr2b .sr-report-sub,
#pg-gstr1 .sr-report-sub,
#pg-customer-wise-pl .sr-report-sub,
#pg-bill-pl .sr-report-sub,
#pg-day-wise-pl .sr-report-sub,
#pg-daybook .sr-report-sub,
#pg-stock-report .sr-report-sub,
#pg-manufacture-report .sr-report-sub,
#pg-product-report .sr-report-sub,
#pg-company-outstanding-report .sr-report-sub,
#pg-other-document-product-report .sr-report-sub,
#pg-other-document-report .sr-report-sub,
#pg-outward-payment-report .sr-report-sub,
#pg-other-income-report .sr-report-sub,
#pg-product-wise-pl .sr-report-sub,
#pg-daily-expenses-report .sr-report-sub,
#pg-inward-payment-report .sr-report-sub,
#pg-purchase-product-report .sr-report-sub,
#pg-sale-product-report .sr-report-sub,
#pg-sale-outstanding .sr-report-sub,
#pg-purchase-outstanding .sr-report-sub,
#pg-purchase-report .pr-report-sub{ font-size:13px; color:var(--muted, #6b7280); margin-top:2px; }#pg-sales-report .sr-report-daterange,
#pg-notifications .sr-report-daterange,
#pg-gstr3b .sr-report-daterange,
#pg-gstr2b .sr-report-daterange,
#pg-gstr1 .sr-report-daterange,
#pg-customer-wise-pl .sr-report-daterange,
#pg-bill-pl .sr-report-daterange,
#pg-day-wise-pl .sr-report-daterange,
#pg-daybook .sr-report-daterange,
#pg-stock-report .sr-report-daterange,
#pg-manufacture-report .sr-report-daterange,
#pg-product-report .sr-report-daterange,
#pg-company-outstanding-report .sr-report-daterange,
#pg-other-document-product-report .sr-report-daterange,
#pg-other-document-report .sr-report-daterange,
#pg-outward-payment-report .sr-report-daterange,
#pg-other-income-report .sr-report-daterange,
#pg-product-wise-pl .sr-report-daterange,
#pg-daily-expenses-report .sr-report-daterange,
#pg-inward-payment-report .sr-report-daterange,
#pg-purchase-product-report .sr-report-daterange,
#pg-sale-product-report .sr-report-daterange,
#pg-sale-outstanding .sr-report-daterange,
#pg-purchase-outstanding .sr-report-daterange,
#pg-purchase-report .pr-report-daterange{ font-size:13px; color:var(--muted, #6b7280); margin-top:2px; }#pg-sales-report .sr-tbl-wrap,
#pg-notifications .sr-tbl-wrap,
#pg-gstr3b .sr-tbl-wrap,
#pg-gstr2b .sr-tbl-wrap,
#pg-gstr1 .sr-tbl-wrap,
#pg-customer-wise-pl .sr-tbl-wrap,
#pg-bill-pl .sr-tbl-wrap,
#pg-day-wise-pl .sr-tbl-wrap,
#pg-daybook .sr-tbl-wrap,
#pg-stock-report .sr-tbl-wrap,
#pg-manufacture-report .sr-tbl-wrap,
#pg-product-report .sr-tbl-wrap,
#pg-company-outstanding-report .sr-tbl-wrap,
#pg-other-document-product-report .sr-tbl-wrap,
#pg-other-document-report .sr-tbl-wrap,
#pg-outward-payment-report .sr-tbl-wrap,
#pg-other-income-report .sr-tbl-wrap,
#pg-product-wise-pl .sr-tbl-wrap,
#pg-daily-expenses-report .sr-tbl-wrap,
#pg-inward-payment-report .sr-tbl-wrap,
#pg-purchase-product-report .sr-tbl-wrap,
#pg-sale-product-report .sr-tbl-wrap,
#pg-sale-outstanding .sr-tbl-wrap,
#pg-purchase-outstanding .sr-tbl-wrap,
#pg-purchase-report .pr-tbl-wrap{ overflow-x:auto; }#pg-sales-report .sr-tbl,
#pg-notifications .sr-tbl,
#pg-gstr3b .sr-tbl,
#pg-gstr2b .sr-tbl,
#pg-gstr1 .sr-tbl,
#pg-customer-wise-pl .sr-tbl,
#pg-bill-pl .sr-tbl,
#pg-day-wise-pl .sr-tbl,
#pg-daybook .sr-tbl,
#pg-stock-report .sr-tbl,
#pg-manufacture-report .sr-tbl,
#pg-product-report .sr-tbl,
#pg-company-outstanding-report .sr-tbl,
#pg-other-document-product-report .sr-tbl,
#pg-other-document-report .sr-tbl,
#pg-outward-payment-report .sr-tbl,
#pg-other-income-report .sr-tbl,
#pg-product-wise-pl .sr-tbl,
#pg-daily-expenses-report .sr-tbl,
#pg-inward-payment-report .sr-tbl,
#pg-purchase-product-report .sr-tbl,
#pg-sale-product-report .sr-tbl,
#pg-sale-outstanding .sr-tbl,
#pg-purchase-outstanding .sr-tbl,
#pg-purchase-report .pr-tbl{

  width:100%;
  border-collapse:collapse;
  font-size:13px;
}#pg-sales-report .sr-tbl thead th,
#pg-notifications .sr-tbl thead th,
#pg-gstr3b .sr-tbl thead th,
#pg-gstr2b .sr-tbl thead th,
#pg-gstr1 .sr-tbl thead th,
#pg-customer-wise-pl .sr-tbl thead th,
#pg-bill-pl .sr-tbl thead th,
#pg-day-wise-pl .sr-tbl thead th,
#pg-daybook .sr-tbl thead th,
#pg-stock-report .sr-tbl thead th,
#pg-manufacture-report .sr-tbl thead th,
#pg-product-report .sr-tbl thead th,
#pg-company-outstanding-report .sr-tbl thead th,
#pg-other-document-product-report .sr-tbl thead th,
#pg-other-document-report .sr-tbl thead th,
#pg-outward-payment-report .sr-tbl thead th,
#pg-other-income-report .sr-tbl thead th,
#pg-product-wise-pl .sr-tbl thead th,
#pg-daily-expenses-report .sr-tbl thead th,
#pg-inward-payment-report .sr-tbl thead th,
#pg-purchase-product-report .sr-tbl thead th,
#pg-sale-product-report .sr-tbl thead th,
#pg-sale-outstanding .sr-tbl thead th,
#pg-purchase-outstanding .sr-tbl thead th,
#pg-purchase-report .pr-tbl thead th{

  padding:10px 8px;
  text-align:left;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  font-weight:600;
  color:var(--text, #111);
  white-space:nowrap;
}#pg-sales-report .sr-tbl tbody td,
#pg-notifications .sr-tbl tbody td,
#pg-gstr3b .sr-tbl tbody td,
#pg-gstr2b .sr-tbl tbody td,
#pg-gstr1 .sr-tbl tbody td,
#pg-customer-wise-pl .sr-tbl tbody td,
#pg-bill-pl .sr-tbl tbody td,
#pg-day-wise-pl .sr-tbl tbody td,
#pg-daybook .sr-tbl tbody td,
#pg-stock-report .sr-tbl tbody td,
#pg-manufacture-report .sr-tbl tbody td,
#pg-product-report .sr-tbl tbody td,
#pg-company-outstanding-report .sr-tbl tbody td,
#pg-other-document-product-report .sr-tbl tbody td,
#pg-other-document-report .sr-tbl tbody td,
#pg-outward-payment-report .sr-tbl tbody td,
#pg-other-income-report .sr-tbl tbody td,
#pg-product-wise-pl .sr-tbl tbody td,
#pg-daily-expenses-report .sr-tbl tbody td,
#pg-inward-payment-report .sr-tbl tbody td,
#pg-purchase-product-report .sr-tbl tbody td,
#pg-sale-product-report .sr-tbl tbody td,
#pg-sale-outstanding .sr-tbl tbody td,
#pg-purchase-outstanding .sr-tbl tbody td,
#pg-purchase-report .pr-tbl tbody td{

  padding:12px 8px;
  border-bottom:1px solid #f3f4f6;
  vertical-align:top;
}#pg-sales-report .sr-tbl tfoot td,
#pg-notifications .sr-tbl tfoot td,
#pg-gstr3b .sr-tbl tfoot td,
#pg-gstr2b .sr-tbl tfoot td,
#pg-gstr1 .sr-tbl tfoot td,
#pg-customer-wise-pl .sr-tbl tfoot td,
#pg-bill-pl .sr-tbl tfoot td,
#pg-day-wise-pl .sr-tbl tfoot td,
#pg-daybook .sr-tbl tfoot td,
#pg-stock-report .sr-tbl tfoot td,
#pg-manufacture-report .sr-tbl tfoot td,
#pg-product-report .sr-tbl tfoot td,
#pg-company-outstanding-report .sr-tbl tfoot td,
#pg-other-document-product-report .sr-tbl tfoot td,
#pg-other-document-report .sr-tbl tfoot td,
#pg-outward-payment-report .sr-tbl tfoot td,
#pg-other-income-report .sr-tbl tfoot td,
#pg-product-wise-pl .sr-tbl tfoot td,
#pg-daily-expenses-report .sr-tbl tfoot td,
#pg-inward-payment-report .sr-tbl tfoot td,
#pg-purchase-product-report .sr-tbl tfoot td,
#pg-sale-product-report .sr-tbl tfoot td,
#pg-sale-outstanding .sr-tbl tfoot td,
#pg-purchase-outstanding .sr-tbl tfoot td,
#pg-purchase-report .pr-tbl tfoot td{

  padding:12px 8px;
  border-top:1px solid var(--bdr, #e5e7eb);
  font-weight:600;
  color:var(--text, #111);
}#pg-sales-report .sr-tbl .sr-num,
#pg-notifications .sr-tbl .sr-num,
#pg-gstr3b .sr-tbl .sr-num,
#pg-gstr2b .sr-tbl .sr-num,
#pg-gstr1 .sr-tbl .sr-num,
#pg-customer-wise-pl .sr-tbl .sr-num,
#pg-bill-pl .sr-tbl .sr-num,
#pg-day-wise-pl .sr-tbl .sr-num,
#pg-daybook .sr-tbl .sr-num,
#pg-stock-report .sr-tbl .sr-num,
#pg-manufacture-report .sr-tbl .sr-num,
#pg-product-report .sr-tbl .sr-num,
#pg-company-outstanding-report .sr-tbl .sr-num,
#pg-other-document-product-report .sr-tbl .sr-num,
#pg-other-document-report .sr-tbl .sr-num,
#pg-outward-payment-report .sr-tbl .sr-num,
#pg-other-income-report .sr-tbl .sr-num,
#pg-product-wise-pl .sr-tbl .sr-num,
#pg-daily-expenses-report .sr-tbl .sr-num,
#pg-inward-payment-report .sr-tbl .sr-num,
#pg-purchase-product-report .sr-tbl .sr-num,
#pg-sale-product-report .sr-tbl .sr-num,
#pg-sale-outstanding .sr-tbl .sr-num,
#pg-purchase-outstanding .sr-tbl .sr-num,
#pg-purchase-report .pr-tbl .pr-num{ text-align:right; }#pg-sales-report .sr-empty,
#pg-notifications .sr-empty,
#pg-gstr3b .sr-empty,
#pg-gstr2b .sr-empty,
#pg-gstr1 .sr-empty,
#pg-customer-wise-pl .sr-empty,
#pg-bill-pl .sr-empty,
#pg-day-wise-pl .sr-empty,
#pg-daybook .sr-empty,
#pg-stock-report .sr-empty,
#pg-manufacture-report .sr-empty,
#pg-product-report .sr-empty,
#pg-company-outstanding-report .sr-empty,
#pg-other-document-product-report .sr-empty,
#pg-other-document-report .sr-empty,
#pg-outward-payment-report .sr-empty,
#pg-other-income-report .sr-empty,
#pg-product-wise-pl .sr-empty,
#pg-daily-expenses-report .sr-empty,
#pg-inward-payment-report .sr-empty,
#pg-purchase-product-report .sr-empty,
#pg-sale-product-report .sr-empty,
#pg-sale-outstanding .sr-empty,
#pg-purchase-outstanding .sr-empty,
#pg-purchase-report .pr-empty{

  text-align:center;
  padding:40px 20px;
  color:var(--muted, #6b7280);
  font-size:13px;
}/* ─── Fixed action bar ─────────────────────────────────── */
#pg-day-wise-pl .sr-action-bar,
#pg-sales-report .sr-action-bar,
#pg-notifications .sr-action-bar,
#pg-gstr3b .sr-action-bar,
#pg-gstr2b .sr-action-bar,
#pg-gstr1 .sr-action-bar,
#pg-customer-wise-pl .sr-action-bar,
#pg-bill-pl .sr-action-bar,
/* ─── Fixed action bar ─────────────────────────────────── */
#pg-daybook .sr-action-bar,
#pg-stock-report .sr-action-bar,
#pg-manufacture-report .sr-action-bar,
#pg-product-report .sr-action-bar,
#pg-company-outstanding-report .sr-action-bar,
#pg-other-document-product-report .sr-action-bar,
#pg-other-document-report .sr-action-bar,
#pg-outward-payment-report .sr-action-bar,
#pg-other-income-report .sr-action-bar,
#pg-product-wise-pl .sr-action-bar,
#pg-daily-expenses-report .sr-action-bar,
#pg-inward-payment-report .sr-action-bar,
/* ─── Fixed action bar ─────────────────────────────────── */
#pg-purchase-product-report .sr-action-bar,
#pg-sale-product-report .sr-action-bar,
/* ─── Fixed action bar ─────────────────────────────────── */
#pg-sale-outstanding .sr-action-bar,
#pg-purchase-outstanding .sr-action-bar,
#pg-purchase-report .pr-action-bar{

  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:900;
  display:flex;
  gap:2px;
  background:rgba(17, 24, 39, .95);
  border-radius:8px;
  padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}#pg-sales-report .sr-action-btn,
#pg-notifications .sr-action-btn,
#pg-gstr3b .sr-action-btn,
#pg-gstr2b .sr-action-btn,
#pg-gstr1 .sr-action-btn,
#pg-customer-wise-pl .sr-action-btn,
#pg-bill-pl .sr-action-btn,
#pg-day-wise-pl .sr-action-btn,
#pg-daybook .sr-action-btn,
#pg-stock-report .sr-action-btn,
#pg-manufacture-report .sr-action-btn,
#pg-product-report .sr-action-btn,
#pg-company-outstanding-report .sr-action-btn,
#pg-other-document-product-report .sr-action-btn,
#pg-other-document-report .sr-action-btn,
#pg-outward-payment-report .sr-action-btn,
#pg-other-income-report .sr-action-btn,
#pg-product-wise-pl .sr-action-btn,
#pg-daily-expenses-report .sr-action-btn,
#pg-inward-payment-report .sr-action-btn,
#pg-purchase-product-report .sr-action-btn,
#pg-sale-product-report .sr-action-btn,
#pg-sale-outstanding .sr-action-btn,
#pg-purchase-outstanding .sr-action-btn,
#pg-purchase-report .pr-action-btn{

  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border:none;
  border-radius:6px;
  color:#fff;
  font-size:13px;
  font-family:inherit;
  font-weight:500;
  cursor:pointer;
  transition:opacity .12s;
}#pg-sales-report .sr-action-btn:hover,
#pg-notifications .sr-action-btn:hover,
#pg-gstr3b .sr-action-btn:hover,
#pg-gstr2b .sr-action-btn:hover,
#pg-gstr1 .sr-action-btn:hover,
#pg-customer-wise-pl .sr-action-btn:hover,
#pg-bill-pl .sr-action-btn:hover,
#pg-day-wise-pl .sr-action-btn:hover,
#pg-daybook .sr-action-btn:hover,
#pg-stock-report .sr-action-btn:hover,
#pg-manufacture-report .sr-action-btn:hover,
#pg-product-report .sr-action-btn:hover,
#pg-company-outstanding-report .sr-action-btn:hover,
#pg-other-document-product-report .sr-action-btn:hover,
#pg-other-document-report .sr-action-btn:hover,
#pg-outward-payment-report .sr-action-btn:hover,
#pg-other-income-report .sr-action-btn:hover,
#pg-product-wise-pl .sr-action-btn:hover,
#pg-daily-expenses-report .sr-action-btn:hover,
#pg-inward-payment-report .sr-action-btn:hover,
#pg-purchase-product-report .sr-action-btn:hover,
#pg-sale-product-report .sr-action-btn:hover,
#pg-sale-outstanding .sr-action-btn:hover,
#pg-purchase-outstanding .sr-action-btn:hover,
#pg-purchase-report .pr-action-btn:hover{ opacity:.9; }#pg-sales-report .sr-a-print,
#pg-notifications .sr-a-print,
#pg-gstr3b .sr-a-print,
#pg-gstr2b .sr-a-print,
#pg-gstr1 .sr-a-print,
#pg-customer-wise-pl .sr-a-print,
#pg-bill-pl .sr-a-print,
#pg-day-wise-pl .sr-a-print,
#pg-daybook .sr-a-print,
#pg-stock-report .sr-a-print,
#pg-manufacture-report .sr-a-print,
#pg-product-report .sr-a-print,
#pg-company-outstanding-report .sr-a-print,
#pg-other-document-product-report .sr-a-print,
#pg-other-document-report .sr-a-print,
#pg-outward-payment-report .sr-a-print,
#pg-other-income-report .sr-a-print,
#pg-product-wise-pl .sr-a-print,
#pg-daily-expenses-report .sr-a-print,
#pg-inward-payment-report .sr-a-print,
#pg-purchase-product-report .sr-a-print,
#pg-sale-product-report .sr-a-print,
#pg-sale-outstanding .sr-a-print,
#pg-purchase-outstanding .sr-a-print,
#pg-purchase-report .pr-a-print{ background:var(--brand); }#pg-sales-report .sr-a-email,
#pg-notifications .sr-a-email,
#pg-gstr3b .sr-a-email,
#pg-gstr2b .sr-a-email,
#pg-gstr1 .sr-a-email,
#pg-customer-wise-pl .sr-a-email,
#pg-bill-pl .sr-a-email,
#pg-day-wise-pl .sr-a-email,
#pg-daybook .sr-a-email,
#pg-stock-report .sr-a-email,
#pg-manufacture-report .sr-a-email,
#pg-product-report .sr-a-email,
#pg-company-outstanding-report .sr-a-email,
#pg-other-document-product-report .sr-a-email,
#pg-other-document-report .sr-a-email,
#pg-outward-payment-report .sr-a-email,
#pg-other-income-report .sr-a-email,
#pg-product-wise-pl .sr-a-email,
#pg-daily-expenses-report .sr-a-email,
#pg-inward-payment-report .sr-a-email,
#pg-purchase-product-report .sr-a-email,
#pg-sale-product-report .sr-a-email,
#pg-sale-outstanding .sr-a-email,
#pg-purchase-outstanding .sr-a-email,
#pg-purchase-report .pr-a-email{ background:#f97316; }#pg-sales-report .sr-a-export,
#pg-notifications .sr-a-export,
#pg-gstr3b .sr-a-export,
#pg-gstr2b .sr-a-export,
#pg-gstr1 .sr-a-export,
#pg-customer-wise-pl .sr-a-export,
#pg-bill-pl .sr-a-export,
#pg-day-wise-pl .sr-a-export,
#pg-daybook .sr-a-export,
#pg-stock-report .sr-a-export,
#pg-manufacture-report .sr-a-export,
#pg-product-report .sr-a-export,
#pg-company-outstanding-report .sr-a-export,
#pg-other-document-product-report .sr-a-export,
#pg-other-document-report .sr-a-export,
#pg-outward-payment-report .sr-a-export,
#pg-other-income-report .sr-a-export,
#pg-product-wise-pl .sr-a-export,
#pg-daily-expenses-report .sr-a-export,
#pg-inward-payment-report .sr-a-export,
#pg-purchase-product-report .sr-a-export,
#pg-sale-product-report .sr-a-export,
#pg-sale-outstanding .sr-a-export,
#pg-purchase-outstanding .sr-a-export,
#pg-purchase-report .pr-a-export{ background:#3b82f6; }#pg-sales-report .sr-a-download,
#pg-notifications .sr-a-download,
#pg-gstr3b .sr-a-download,
#pg-gstr2b .sr-a-download,
#pg-gstr1 .sr-a-download,
#pg-customer-wise-pl .sr-a-download,
#pg-bill-pl .sr-a-download,
#pg-day-wise-pl .sr-a-download,
#pg-daybook .sr-a-download,
#pg-stock-report .sr-a-download,
#pg-manufacture-report .sr-a-download,
#pg-product-report .sr-a-download,
#pg-company-outstanding-report .sr-a-download,
#pg-other-document-product-report .sr-a-download,
#pg-other-document-report .sr-a-download,
#pg-outward-payment-report .sr-a-download,
#pg-other-income-report .sr-a-download,
#pg-product-wise-pl .sr-a-download,
#pg-daily-expenses-report .sr-a-download,
#pg-inward-payment-report .sr-a-download,
#pg-purchase-product-report .sr-a-download,
#pg-sale-product-report .sr-a-download,
#pg-sale-outstanding .sr-a-download,
#pg-purchase-outstanding .sr-a-download,
#pg-purchase-report .pr-a-download{ background:#eab308; }

/* ─── Responsive breakpoints ──────────────────────────── */
@media (max-width:1100px){#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-day-wise-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }#pg-sales-report .sr-cust-grid,
#pg-notifications .sr-cust-grid,
#pg-gstr3b .sr-cust-grid,
#pg-gstr2b .sr-cust-grid,
#pg-gstr1 .sr-cust-grid,
#pg-customer-wise-pl .sr-cust-grid,
#pg-bill-pl .sr-cust-grid,
#pg-day-wise-pl .sr-cust-grid,
#pg-daybook .sr-cust-grid,
#pg-stock-report .sr-cust-grid,
#pg-manufacture-report .sr-cust-grid,
#pg-product-report .sr-cust-grid,
#pg-company-outstanding-report .sr-cust-grid,
#pg-other-document-product-report .sr-cust-grid,
#pg-other-document-report .sr-cust-grid,
#pg-outward-payment-report .sr-cust-grid,
#pg-other-income-report .sr-cust-grid,
#pg-product-wise-pl .sr-cust-grid,
#pg-daily-expenses-report .sr-cust-grid,
#pg-inward-payment-report .sr-cust-grid,
#pg-purchase-product-report .sr-cust-grid,
#pg-sale-product-report .sr-cust-grid,
#pg-sale-outstanding .sr-cust-grid,
#pg-purchase-outstanding .sr-cust-grid,
#pg-purchase-report .pr-cust-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:900px){#pg-sales-report .sr-adv-row,
#pg-notifications .sr-adv-row,
#pg-gstr3b .sr-adv-row,
#pg-gstr2b .sr-adv-row,
#pg-gstr1 .sr-adv-row,
#pg-customer-wise-pl .sr-adv-row,
#pg-bill-pl .sr-adv-row,
#pg-day-wise-pl .sr-adv-row,
#pg-daybook .sr-adv-row,
#pg-stock-report .sr-adv-row,
#pg-manufacture-report .sr-adv-row,
#pg-product-report .sr-adv-row,
#pg-company-outstanding-report .sr-adv-row,
#pg-other-document-product-report .sr-adv-row,
#pg-other-document-report .sr-adv-row,
#pg-outward-payment-report .sr-adv-row,
#pg-other-income-report .sr-adv-row,
#pg-product-wise-pl .sr-adv-row,
#pg-daily-expenses-report .sr-adv-row,
#pg-inward-payment-report .sr-adv-row,
#pg-purchase-product-report .sr-adv-row,
#pg-sale-product-report .sr-adv-row,
#pg-sale-outstanding .sr-adv-row,
#pg-purchase-outstanding .sr-adv-row,
#pg-purchase-report .pr-adv-row{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }#pg-sales-report .sr-adv-row > *:nth-child(4),
#pg-notifications .sr-adv-row > *:nth-child(4),
#pg-gstr3b .sr-adv-row > *:nth-child(4),
#pg-gstr2b .sr-adv-row > *:nth-child(4),
#pg-gstr1 .sr-adv-row > *:nth-child(4),
#pg-customer-wise-pl .sr-adv-row > *:nth-child(4),
#pg-bill-pl .sr-adv-row > *:nth-child(4),
#pg-day-wise-pl .sr-adv-row > *:nth-child(4),
#pg-daybook .sr-adv-row > *:nth-child(4),
#pg-stock-report .sr-adv-row > *:nth-child(4),
#pg-manufacture-report .sr-adv-row > *:nth-child(4),
#pg-product-report .sr-adv-row > *:nth-child(4),
#pg-company-outstanding-report .sr-adv-row > *:nth-child(4),
#pg-other-document-product-report .sr-adv-row > *:nth-child(4),
#pg-other-document-report .sr-adv-row > *:nth-child(4),
#pg-outward-payment-report .sr-adv-row > *:nth-child(4),
#pg-other-income-report .sr-adv-row > *:nth-child(4),
#pg-product-wise-pl .sr-adv-row > *:nth-child(4),
#pg-daily-expenses-report .sr-adv-row > *:nth-child(4),
#pg-inward-payment-report .sr-adv-row > *:nth-child(4),
#pg-purchase-product-report .sr-adv-row > *:nth-child(4),
#pg-sale-product-report .sr-adv-row > *:nth-child(4),
#pg-sale-outstanding .sr-adv-row > *:nth-child(4),
#pg-purchase-outstanding .sr-adv-row > *:nth-child(4),
#pg-purchase-report .pr-adv-row > *:nth-child(4){ grid-column:1 / -1; justify-self:end; }
}
@media (max-width:640px){#pg-sales-report,
#pg-notifications,
#pg-gstr3b,
#pg-gstr2b,
#pg-gstr1,
#pg-customer-wise-pl,
#pg-bill-pl,
#pg-day-wise-pl,
#pg-daybook,
#pg-stock-report,
#pg-manufacture-report,
#pg-product-report,
#pg-company-outstanding-report,
#pg-other-document-product-report,
#pg-other-document-report,
#pg-outward-payment-report,
#pg-other-income-report,
#pg-product-wise-pl,
#pg-daily-expenses-report,
#pg-inward-payment-report,
#pg-purchase-product-report,
#pg-sale-product-report,
#pg-sale-outstanding{ padding:14px; padding-bottom:96px; }#pg-sales-report .sr-card-hdr,
#pg-notifications .sr-card-hdr,
#pg-gstr3b .sr-card-hdr,
#pg-gstr2b .sr-card-hdr,
#pg-gstr1 .sr-card-hdr,
#pg-customer-wise-pl .sr-card-hdr,
#pg-bill-pl .sr-card-hdr,
#pg-day-wise-pl .sr-card-hdr,
#pg-daybook .sr-card-hdr,
#pg-stock-report .sr-card-hdr,
#pg-manufacture-report .sr-card-hdr,
#pg-product-report .sr-card-hdr,
#pg-company-outstanding-report .sr-card-hdr,
#pg-other-document-product-report .sr-card-hdr,
#pg-other-document-report .sr-card-hdr,
#pg-outward-payment-report .sr-card-hdr,
#pg-other-income-report .sr-card-hdr,
#pg-product-wise-pl .sr-card-hdr,
#pg-daily-expenses-report .sr-card-hdr,
#pg-inward-payment-report .sr-card-hdr,
#pg-purchase-product-report .sr-card-hdr,
#pg-sale-product-report .sr-card-hdr,
#pg-sale-outstanding .sr-card-hdr,
#pg-purchase-outstanding .sr-card-hdr,
#pg-purchase-report .pr-card-hdr{ padding:12px 14px; }#pg-sales-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-notifications .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr3b .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr2b .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr1 .sr-card-hdr-actions .sr-hdr-btn,
#pg-customer-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-bill-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-day-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-daybook .sr-card-hdr-actions .sr-hdr-btn,
#pg-stock-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-manufacture-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-company-outstanding-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-document-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-document-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-outward-payment-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-income-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-product-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-daily-expenses-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-inward-payment-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-sale-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-sale-outstanding .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-outstanding .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-report .pr-card-hdr-actions .pr-hdr-btn{ display:none; }#pg-sales-report .sr-card-toggle,
#pg-notifications .sr-card-toggle,
#pg-gstr3b .sr-card-toggle,
#pg-gstr2b .sr-card-toggle,
#pg-gstr1 .sr-card-toggle,
#pg-customer-wise-pl .sr-card-toggle,
#pg-bill-pl .sr-card-toggle,
#pg-day-wise-pl .sr-card-toggle,
#pg-daybook .sr-card-toggle,
#pg-stock-report .sr-card-toggle,
#pg-manufacture-report .sr-card-toggle,
#pg-product-report .sr-card-toggle,
#pg-company-outstanding-report .sr-card-toggle,
#pg-other-document-product-report .sr-card-toggle,
#pg-other-document-report .sr-card-toggle,
#pg-outward-payment-report .sr-card-toggle,
#pg-other-income-report .sr-card-toggle,
#pg-product-wise-pl .sr-card-toggle,
#pg-daily-expenses-report .sr-card-toggle,
#pg-inward-payment-report .sr-card-toggle,
#pg-purchase-product-report .sr-card-toggle,
#pg-sale-product-report .sr-card-toggle,
#pg-sale-outstanding .sr-card-toggle,
#pg-purchase-outstanding .sr-card-toggle,
#pg-purchase-report .pr-card-toggle{ display:inline-flex; align-items:center; justify-content:center; }#pg-sales-report .sr-card-body,
#pg-notifications .sr-card-body,
#pg-gstr3b .sr-card-body,
#pg-gstr2b .sr-card-body,
#pg-gstr1 .sr-card-body,
#pg-customer-wise-pl .sr-card-body,
#pg-bill-pl .sr-card-body,
#pg-day-wise-pl .sr-card-body,
#pg-daybook .sr-card-body,
#pg-stock-report .sr-card-body,
#pg-manufacture-report .sr-card-body,
#pg-product-report .sr-card-body,
#pg-company-outstanding-report .sr-card-body,
#pg-other-document-product-report .sr-card-body,
#pg-other-document-report .sr-card-body,
#pg-outward-payment-report .sr-card-body,
#pg-other-income-report .sr-card-body,
#pg-product-wise-pl .sr-card-body,
#pg-daily-expenses-report .sr-card-body,
#pg-inward-payment-report .sr-card-body,
#pg-purchase-product-report .sr-card-body,
#pg-sale-product-report .sr-card-body,
#pg-sale-outstanding .sr-card-body,
#pg-purchase-outstanding .sr-card-body,
#pg-purchase-report .pr-card-body{ padding:16px 14px; }#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-day-wise-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 14px; }#pg-sales-report .sr-cust-grid,
#pg-notifications .sr-cust-grid,
#pg-gstr3b .sr-cust-grid,
#pg-gstr2b .sr-cust-grid,
#pg-gstr1 .sr-cust-grid,
#pg-customer-wise-pl .sr-cust-grid,
#pg-bill-pl .sr-cust-grid,
#pg-day-wise-pl .sr-cust-grid,
#pg-daybook .sr-cust-grid,
#pg-stock-report .sr-cust-grid,
#pg-manufacture-report .sr-cust-grid,
#pg-product-report .sr-cust-grid,
#pg-company-outstanding-report .sr-cust-grid,
#pg-other-document-product-report .sr-cust-grid,
#pg-other-document-report .sr-cust-grid,
#pg-outward-payment-report .sr-cust-grid,
#pg-other-income-report .sr-cust-grid,
#pg-product-wise-pl .sr-cust-grid,
#pg-daily-expenses-report .sr-cust-grid,
#pg-inward-payment-report .sr-cust-grid,
#pg-purchase-product-report .sr-cust-grid,
#pg-sale-product-report .sr-cust-grid,
#pg-sale-outstanding .sr-cust-grid,
#pg-purchase-outstanding .sr-cust-grid,
#pg-purchase-report .pr-cust-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }#pg-sales-report .sr-mobile-btns,
#pg-notifications .sr-mobile-btns,
#pg-gstr3b .sr-mobile-btns,
#pg-gstr2b .sr-mobile-btns,
#pg-gstr1 .sr-mobile-btns,
#pg-customer-wise-pl .sr-mobile-btns,
#pg-bill-pl .sr-mobile-btns,
#pg-day-wise-pl .sr-mobile-btns,
#pg-daybook .sr-mobile-btns,
#pg-stock-report .sr-mobile-btns,
#pg-manufacture-report .sr-mobile-btns,
#pg-product-report .sr-mobile-btns,
#pg-company-outstanding-report .sr-mobile-btns,
#pg-other-document-product-report .sr-mobile-btns,
#pg-other-document-report .sr-mobile-btns,
#pg-outward-payment-report .sr-mobile-btns,
#pg-other-income-report .sr-mobile-btns,
#pg-product-wise-pl .sr-mobile-btns,
#pg-daily-expenses-report .sr-mobile-btns,
#pg-inward-payment-report .sr-mobile-btns,
#pg-purchase-product-report .sr-mobile-btns,
#pg-sale-product-report .sr-mobile-btns,
#pg-sale-outstanding .sr-mobile-btns,
#pg-purchase-outstanding .sr-mobile-btns,
#pg-purchase-report .pr-mobile-btns{ display:block; margin-top:14px; }#pg-sales-report .sr-actions,
#pg-notifications .sr-actions,
#pg-gstr3b .sr-actions,
#pg-gstr2b .sr-actions,
#pg-gstr1 .sr-actions,
#pg-customer-wise-pl .sr-actions,
#pg-bill-pl .sr-actions,
#pg-day-wise-pl .sr-actions,
#pg-daybook .sr-actions,
#pg-stock-report .sr-actions,
#pg-manufacture-report .sr-actions,
#pg-product-report .sr-actions,
#pg-company-outstanding-report .sr-actions,
#pg-other-document-product-report .sr-actions,
#pg-other-document-report .sr-actions,
#pg-outward-payment-report .sr-actions,
#pg-other-income-report .sr-actions,
#pg-product-wise-pl .sr-actions,
#pg-daily-expenses-report .sr-actions,
#pg-inward-payment-report .sr-actions,
#pg-purchase-product-report .sr-actions,
#pg-sale-product-report .sr-actions,
#pg-sale-outstanding .sr-actions,
#pg-purchase-outstanding .sr-actions,
#pg-purchase-report .pr-actions{ flex-direction:column; }#pg-sales-report .sr-btn,
#pg-notifications .sr-btn,
#pg-gstr3b .sr-btn,
#pg-gstr2b .sr-btn,
#pg-gstr1 .sr-btn,
#pg-customer-wise-pl .sr-btn,
#pg-bill-pl .sr-btn,
#pg-daybook .sr-btn,
#pg-stock-report .sr-btn,
#pg-manufacture-report .sr-btn,
#pg-product-report .sr-btn,
#pg-company-outstanding-report .sr-btn,
#pg-other-document-product-report .sr-btn,
#pg-other-document-report .sr-btn,
#pg-outward-payment-report .sr-btn,
#pg-other-income-report .sr-btn,
#pg-product-wise-pl .sr-btn,
#pg-daily-expenses-report .sr-btn,
#pg-inward-payment-report .sr-btn,
#pg-purchase-product-report .sr-btn,
#pg-sale-product-report .sr-btn,
#pg-sale-outstanding .sr-btn,
#pg-purchase-outstanding .sr-btn,
#pg-day-wise-pl .sr-save-cust,
#pg-sales-report .sr-save-cust,
#pg-notifications .sr-save-cust,
#pg-gstr3b .sr-save-cust,
#pg-gstr2b .sr-save-cust,
#pg-gstr1 .sr-save-cust,
#pg-customer-wise-pl .sr-save-cust,
#pg-bill-pl .sr-save-cust,
#pg-daybook .sr-save-cust,
#pg-stock-report .sr-save-cust,
#pg-manufacture-report .sr-save-cust,
#pg-product-report .sr-save-cust,
#pg-company-outstanding-report .sr-save-cust,
#pg-other-document-product-report .sr-save-cust,
#pg-other-document-report .sr-save-cust,
#pg-outward-payment-report .sr-save-cust,
#pg-other-income-report .sr-save-cust,
#pg-product-wise-pl .sr-save-cust,
#pg-daily-expenses-report .sr-save-cust,
#pg-inward-payment-report .sr-save-cust,
#pg-purchase-product-report .sr-save-cust,
#pg-sale-product-report .sr-save-cust,
#pg-sale-outstanding .sr-save-cust,
#pg-purchase-outstanding .sr-save-cust,
#pg-purchase-report .pr-btn,
#pg-purchase-report .pr-save-cust{ width:100%; justify-content:center; }#pg-sales-report .sr-btn-search,
#pg-notifications .sr-btn-search,
#pg-gstr3b .sr-btn-search,
#pg-gstr2b .sr-btn-search,
#pg-gstr1 .sr-btn-search,
#pg-customer-wise-pl .sr-btn-search,
#pg-bill-pl .sr-btn-search,
#pg-day-wise-pl .sr-btn-search,
#pg-daybook .sr-btn-search,
#pg-stock-report .sr-btn-search,
#pg-manufacture-report .sr-btn-search,
#pg-product-report .sr-btn-search,
#pg-company-outstanding-report .sr-btn-search,
#pg-other-document-product-report .sr-btn-search,
#pg-other-document-report .sr-btn-search,
#pg-outward-payment-report .sr-btn-search,
#pg-other-income-report .sr-btn-search,
#pg-product-wise-pl .sr-btn-search,
#pg-daily-expenses-report .sr-btn-search,
#pg-inward-payment-report .sr-btn-search,
#pg-purchase-product-report .sr-btn-search,
#pg-sale-product-report .sr-btn-search,
#pg-sale-outstanding .sr-btn-search,
#pg-purchase-outstanding .sr-btn-search,
#pg-purchase-report .pr-btn-search{ order:2; }#pg-sales-report .sr-btn-reset,
#pg-notifications .sr-btn-reset,
#pg-gstr3b .sr-btn-reset,
#pg-gstr2b .sr-btn-reset,
#pg-gstr1 .sr-btn-reset,
#pg-customer-wise-pl .sr-btn-reset,
#pg-bill-pl .sr-btn-reset,
#pg-day-wise-pl .sr-btn-reset,
#pg-daybook .sr-btn-reset,
#pg-stock-report .sr-btn-reset,
#pg-manufacture-report .sr-btn-reset,
#pg-product-report .sr-btn-reset,
#pg-company-outstanding-report .sr-btn-reset,
#pg-other-document-product-report .sr-btn-reset,
#pg-other-document-report .sr-btn-reset,
#pg-outward-payment-report .sr-btn-reset,
#pg-other-income-report .sr-btn-reset,
#pg-product-wise-pl .sr-btn-reset,
#pg-daily-expenses-report .sr-btn-reset,
#pg-inward-payment-report .sr-btn-reset,
#pg-purchase-product-report .sr-btn-reset,
#pg-sale-product-report .sr-btn-reset,
#pg-sale-outstanding .sr-btn-reset,
#pg-purchase-outstanding .sr-btn-reset,
#pg-purchase-report .pr-btn-reset{ order:1; }/* On mobile,
we always show adv-filter + cust-block since the mobile-btns toggle them anyway */
  #pg-day-wise-pl .sr-adv-block,
#pg-sales-report .sr-adv-block,
#pg-notifications .sr-adv-block,
#pg-gstr3b .sr-adv-block,
#pg-gstr2b .sr-adv-block,
#pg-gstr1 .sr-adv-block,
#pg-customer-wise-pl .sr-adv-block,
#pg-bill-pl .sr-adv-block,
#pg-daybook .sr-adv-block,
#pg-stock-report .sr-adv-block,
#pg-manufacture-report .sr-adv-block,
#pg-product-report .sr-adv-block,
#pg-company-outstanding-report .sr-adv-block,
#pg-other-document-product-report .sr-adv-block,
#pg-other-document-report .sr-adv-block,
#pg-outward-payment-report .sr-adv-block,
#pg-other-income-report .sr-adv-block,
#pg-product-wise-pl .sr-adv-block,
#pg-daily-expenses-report .sr-adv-block,
#pg-inward-payment-report .sr-adv-block,
#pg-purchase-product-report .sr-adv-block,
#pg-sale-product-report .sr-adv-block,
#pg-sale-outstanding .sr-adv-block,
#pg-purchase-outstanding .sr-adv-block,
#pg-day-wise-pl .sr-cust-block,
#pg-sales-report .sr-cust-block,
#pg-notifications .sr-cust-block,
#pg-gstr3b .sr-cust-block,
#pg-gstr2b .sr-cust-block,
#pg-gstr1 .sr-cust-block,
#pg-customer-wise-pl .sr-cust-block,
#pg-bill-pl .sr-cust-block,
#pg-daybook .sr-cust-block,
#pg-stock-report .sr-cust-block,
#pg-manufacture-report .sr-cust-block,
#pg-product-report .sr-cust-block,
#pg-company-outstanding-report .sr-cust-block,
#pg-other-document-product-report .sr-cust-block,
#pg-other-document-report .sr-cust-block,
#pg-outward-payment-report .sr-cust-block,
#pg-other-income-report .sr-cust-block,
#pg-product-wise-pl .sr-cust-block,
#pg-daily-expenses-report .sr-cust-block,
#pg-inward-payment-report .sr-cust-block,
#pg-purchase-product-report .sr-cust-block,
#pg-sale-product-report .sr-cust-block,
#pg-sale-outstanding .sr-cust-block,
#pg-purchase-outstanding .sr-cust-block,
#pg-purchase-report .pr-adv-block,
#pg-purchase-report .pr-cust-block{ padding-top:12px; margin-top:12px; }#pg-sales-report .sr-action-bar,
#pg-notifications .sr-action-bar,
#pg-gstr3b .sr-action-bar,
#pg-gstr2b .sr-action-bar,
#pg-gstr1 .sr-action-bar,
#pg-customer-wise-pl .sr-action-bar,
#pg-bill-pl .sr-action-bar,
#pg-day-wise-pl .sr-action-bar,
#pg-daybook .sr-action-bar,
#pg-stock-report .sr-action-bar,
#pg-manufacture-report .sr-action-bar,
#pg-product-report .sr-action-bar,
#pg-company-outstanding-report .sr-action-bar,
#pg-other-document-product-report .sr-action-bar,
#pg-other-document-report .sr-action-bar,
#pg-outward-payment-report .sr-action-bar,
#pg-other-income-report .sr-action-bar,
#pg-product-wise-pl .sr-action-bar,
#pg-daily-expenses-report .sr-action-bar,
#pg-inward-payment-report .sr-action-bar,
#pg-purchase-product-report .sr-action-bar,
#pg-sale-product-report .sr-action-bar,
#pg-sale-outstanding .sr-action-bar,
#pg-purchase-outstanding .sr-action-bar,
#pg-purchase-report .pr-action-bar{ bottom:12px; padding:3px; }#pg-sales-report .sr-action-btn,
#pg-notifications .sr-action-btn,
#pg-gstr3b .sr-action-btn,
#pg-gstr2b .sr-action-btn,
#pg-gstr1 .sr-action-btn,
#pg-customer-wise-pl .sr-action-btn,
#pg-bill-pl .sr-action-btn,
#pg-day-wise-pl .sr-action-btn,
#pg-daybook .sr-action-btn,
#pg-stock-report .sr-action-btn,
#pg-manufacture-report .sr-action-btn,
#pg-product-report .sr-action-btn,
#pg-company-outstanding-report .sr-action-btn,
#pg-other-document-product-report .sr-action-btn,
#pg-other-document-report .sr-action-btn,
#pg-outward-payment-report .sr-action-btn,
#pg-other-income-report .sr-action-btn,
#pg-product-wise-pl .sr-action-btn,
#pg-daily-expenses-report .sr-action-btn,
#pg-inward-payment-report .sr-action-btn,
#pg-purchase-product-report .sr-action-btn,
#pg-sale-product-report .sr-action-btn,
#pg-sale-outstanding .sr-action-btn,
#pg-purchase-outstanding .sr-action-btn,
#pg-purchase-report .pr-action-btn{ padding:8px 12px; font-size:12px; }
}/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.228 — Sales Report follow-up fixes
   ────────────────────────────────────────────────────────────────
   1. Products / Customer chip field: chips stay INSIDE the border
      (previously overflowed via absolutely-positioned sr-prod-chip)
   2. Customer/Vendor combo dropdown (was plain input)
   3. Deselect All button next to Select All in Customize Report
   4. Print media query — landscape,
small font,
respects breaks
   5. Mobile action row moved to TOP of card body
════════════════════════════════════════════════════════════════════════════════ */

/* ── Chip field container (Products + Customer) ────────── */
#pg-day-wise-pl .sr-chip-field,
#pg-sales-report .sr-chip-field,
#pg-notifications .sr-chip-field,
#pg-gstr3b .sr-chip-field,
#pg-gstr2b .sr-chip-field,
#pg-gstr1 .sr-chip-field,
#pg-customer-wise-pl .sr-chip-field,
#pg-bill-pl .sr-chip-field,
/* ── Chip field container (Products + Customer) ────────── */
#pg-daybook .sr-chip-field,
#pg-stock-report .sr-chip-field,
#pg-manufacture-report .sr-chip-field,
#pg-product-report .sr-chip-field,
#pg-company-outstanding-report .sr-chip-field,
#pg-other-document-product-report .sr-chip-field,
#pg-other-document-report .sr-chip-field,
#pg-outward-payment-report .sr-chip-field,
#pg-other-income-report .sr-chip-field,
#pg-product-wise-pl .sr-chip-field,
#pg-daily-expenses-report .sr-chip-field,
#pg-inward-payment-report .sr-chip-field,
#pg-purchase-product-report .sr-chip-field,
#pg-sale-product-report .sr-chip-field,
#pg-sale-outstanding .sr-chip-field,
#pg-purchase-outstanding .sr-chip-field,
#pg-purchase-report .pr-chip-field{

  position:relative;
  min-height:38px;
  padding:4px 6px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  cursor:text;
  box-sizing:border-box;
  transition:border-color .12s, box-shadow .12s;
}#pg-sales-report .sr-chip-field:focus-within,
#pg-notifications .sr-chip-field:focus-within,
#pg-gstr3b .sr-chip-field:focus-within,
#pg-gstr2b .sr-chip-field:focus-within,
#pg-gstr1 .sr-chip-field:focus-within,
#pg-customer-wise-pl .sr-chip-field:focus-within,
#pg-bill-pl .sr-chip-field:focus-within,
#pg-day-wise-pl .sr-chip-field:focus-within,
#pg-daybook .sr-chip-field:focus-within,
#pg-stock-report .sr-chip-field:focus-within,
#pg-manufacture-report .sr-chip-field:focus-within,
#pg-product-report .sr-chip-field:focus-within,
#pg-company-outstanding-report .sr-chip-field:focus-within,
#pg-other-document-product-report .sr-chip-field:focus-within,
#pg-other-document-report .sr-chip-field:focus-within,
#pg-outward-payment-report .sr-chip-field:focus-within,
#pg-other-income-report .sr-chip-field:focus-within,
#pg-product-wise-pl .sr-chip-field:focus-within,
#pg-daily-expenses-report .sr-chip-field:focus-within,
#pg-inward-payment-report .sr-chip-field:focus-within,
#pg-purchase-product-report .sr-chip-field:focus-within,
#pg-sale-product-report .sr-chip-field:focus-within,
#pg-sale-outstanding .sr-chip-field:focus-within,
#pg-purchase-outstanding .sr-chip-field:focus-within,
#pg-purchase-report .pr-chip-field:focus-within{

  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}#pg-sales-report .sr-chip-field input,
#pg-notifications .sr-chip-field input,
#pg-gstr3b .sr-chip-field input,
#pg-gstr2b .sr-chip-field input,
#pg-gstr1 .sr-chip-field input,
#pg-customer-wise-pl .sr-chip-field input,
#pg-bill-pl .sr-chip-field input,
#pg-day-wise-pl .sr-chip-field input,
#pg-daybook .sr-chip-field input,
#pg-stock-report .sr-chip-field input,
#pg-manufacture-report .sr-chip-field input,
#pg-product-report .sr-chip-field input,
#pg-company-outstanding-report .sr-chip-field input,
#pg-other-document-product-report .sr-chip-field input,
#pg-other-document-report .sr-chip-field input,
#pg-outward-payment-report .sr-chip-field input,
#pg-other-income-report .sr-chip-field input,
#pg-product-wise-pl .sr-chip-field input,
#pg-daily-expenses-report .sr-chip-field input,
#pg-inward-payment-report .sr-chip-field input,
#pg-purchase-product-report .sr-chip-field input,
#pg-sale-product-report .sr-chip-field input,
#pg-sale-outstanding .sr-chip-field input,
#pg-purchase-outstanding .sr-chip-field input,
#pg-purchase-report .pr-chip-field input{

  flex:1;
  min-width:80px;
  padding:4px 4px;
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  font-family:inherit;
  color:var(--text, #111);
}/* Override the earlier sr-prod-chip so chips read as inline pills inside
   the chip-field (bg-white on brand-green,
text-white on brand-green). */
#pg-day-wise-pl .sr-chip-field .sr-prod-chip,
#pg-sales-report .sr-chip-field .sr-prod-chip,
#pg-notifications .sr-chip-field .sr-prod-chip,
#pg-gstr3b .sr-chip-field .sr-prod-chip,
#pg-gstr2b .sr-chip-field .sr-prod-chip,
#pg-gstr1 .sr-chip-field .sr-prod-chip,
#pg-customer-wise-pl .sr-chip-field .sr-prod-chip,
#pg-bill-pl .sr-chip-field .sr-prod-chip,
#pg-daybook .sr-chip-field .sr-prod-chip,
#pg-stock-report .sr-chip-field .sr-prod-chip,
#pg-manufacture-report .sr-chip-field .sr-prod-chip,
#pg-product-report .sr-chip-field .sr-prod-chip,
#pg-company-outstanding-report .sr-chip-field .sr-prod-chip,
#pg-other-document-product-report .sr-chip-field .sr-prod-chip,
#pg-other-document-report .sr-chip-field .sr-prod-chip,
#pg-outward-payment-report .sr-chip-field .sr-prod-chip,
#pg-other-income-report .sr-chip-field .sr-prod-chip,
#pg-product-wise-pl .sr-chip-field .sr-prod-chip,
#pg-daily-expenses-report .sr-chip-field .sr-prod-chip,
#pg-inward-payment-report .sr-chip-field .sr-prod-chip,
#pg-purchase-product-report .sr-chip-field .sr-prod-chip,
#pg-sale-product-report .sr-chip-field .sr-prod-chip,
#pg-sale-outstanding .sr-chip-field .sr-prod-chip,
#pg-purchase-outstanding .sr-chip-field .sr-prod-chip,
#pg-purchase-report .pr-chip-field .pr-prod-chip{

  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 4px 3px 10px;
  background:var(--brand, var(--brand));
  color:#fff;
  border-radius:4px;
  font-size:12.5px;
  line-height:1;
  height:24px;
  margin:0;   /* wrapper handles spacing */
}#pg-sales-report .sr-chip-field .sr-prod-chip button,
#pg-notifications .sr-chip-field .sr-prod-chip button,
#pg-gstr3b .sr-chip-field .sr-prod-chip button,
#pg-gstr2b .sr-chip-field .sr-prod-chip button,
#pg-gstr1 .sr-chip-field .sr-prod-chip button,
#pg-customer-wise-pl .sr-chip-field .sr-prod-chip button,
#pg-bill-pl .sr-chip-field .sr-prod-chip button,
#pg-day-wise-pl .sr-chip-field .sr-prod-chip button,
#pg-daybook .sr-chip-field .sr-prod-chip button,
#pg-stock-report .sr-chip-field .sr-prod-chip button,
#pg-manufacture-report .sr-chip-field .sr-prod-chip button,
#pg-product-report .sr-chip-field .sr-prod-chip button,
#pg-company-outstanding-report .sr-chip-field .sr-prod-chip button,
#pg-other-document-product-report .sr-chip-field .sr-prod-chip button,
#pg-other-document-report .sr-chip-field .sr-prod-chip button,
#pg-outward-payment-report .sr-chip-field .sr-prod-chip button,
#pg-other-income-report .sr-chip-field .sr-prod-chip button,
#pg-product-wise-pl .sr-chip-field .sr-prod-chip button,
#pg-daily-expenses-report .sr-chip-field .sr-prod-chip button,
#pg-inward-payment-report .sr-chip-field .sr-prod-chip button,
#pg-purchase-product-report .sr-chip-field .sr-prod-chip button,
#pg-sale-product-report .sr-chip-field .sr-prod-chip button,
#pg-sale-outstanding .sr-chip-field .sr-prod-chip button,
#pg-purchase-outstanding .sr-chip-field .sr-prod-chip button,
#pg-purchase-report .pr-chip-field .pr-prod-chip button{

  background:rgba(255,255,255,.25);
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0;
  font-size:11px;
  width:16px;height:16px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}#pg-sales-report .sr-chip-field .sr-prod-chip button:hover,
#pg-notifications .sr-chip-field .sr-prod-chip button:hover,
#pg-gstr3b .sr-chip-field .sr-prod-chip button:hover,
#pg-gstr2b .sr-chip-field .sr-prod-chip button:hover,
#pg-gstr1 .sr-chip-field .sr-prod-chip button:hover,
#pg-customer-wise-pl .sr-chip-field .sr-prod-chip button:hover,
#pg-bill-pl .sr-chip-field .sr-prod-chip button:hover,
#pg-day-wise-pl .sr-chip-field .sr-prod-chip button:hover,
#pg-daybook .sr-chip-field .sr-prod-chip button:hover,
#pg-stock-report .sr-chip-field .sr-prod-chip button:hover,
#pg-manufacture-report .sr-chip-field .sr-prod-chip button:hover,
#pg-product-report .sr-chip-field .sr-prod-chip button:hover,
#pg-company-outstanding-report .sr-chip-field .sr-prod-chip button:hover,
#pg-other-document-product-report .sr-chip-field .sr-prod-chip button:hover,
#pg-other-document-report .sr-chip-field .sr-prod-chip button:hover,
#pg-outward-payment-report .sr-chip-field .sr-prod-chip button:hover,
#pg-other-income-report .sr-chip-field .sr-prod-chip button:hover,
#pg-product-wise-pl .sr-chip-field .sr-prod-chip button:hover,
#pg-daily-expenses-report .sr-chip-field .sr-prod-chip button:hover,
#pg-inward-payment-report .sr-chip-field .sr-prod-chip button:hover,
#pg-purchase-product-report .sr-chip-field .sr-prod-chip button:hover,
#pg-sale-product-report .sr-chip-field .sr-prod-chip button:hover,
#pg-sale-outstanding .sr-chip-field .sr-prod-chip button:hover,
#pg-purchase-outstanding .sr-chip-field .sr-prod-chip button:hover,
#pg-purchase-report .pr-chip-field .pr-prod-chip button:hover{ background:rgba(255,255,255,.4); }/* ── Customer/Vendor combo (input + arrow + dropdown) ── */
#pg-day-wise-pl .sr-combo-wrap,
#pg-sales-report .sr-combo-wrap,
#pg-notifications .sr-combo-wrap,
#pg-gstr3b .sr-combo-wrap,
#pg-gstr2b .sr-combo-wrap,
#pg-gstr1 .sr-combo-wrap,
#pg-customer-wise-pl .sr-combo-wrap,
#pg-bill-pl .sr-combo-wrap,
/* ── Customer/Vendor combo (input + arrow + dropdown) ── */
#pg-daybook .sr-combo-wrap,
#pg-stock-report .sr-combo-wrap,
#pg-manufacture-report .sr-combo-wrap,
#pg-product-report .sr-combo-wrap,
#pg-company-outstanding-report .sr-combo-wrap,
#pg-other-document-product-report .sr-combo-wrap,
#pg-other-document-report .sr-combo-wrap,
#pg-outward-payment-report .sr-combo-wrap,
#pg-other-income-report .sr-combo-wrap,
#pg-product-wise-pl .sr-combo-wrap,
#pg-daily-expenses-report .sr-combo-wrap,
#pg-inward-payment-report .sr-combo-wrap,
/* ── Customer/Vendor combo (input + arrow + dropdown) ── */
#pg-purchase-product-report .sr-combo-wrap,
#pg-sale-product-report .sr-combo-wrap,
/* ── Customer/Vendor combo (input + arrow + dropdown) ── */
#pg-sale-outstanding .sr-combo-wrap,
#pg-purchase-outstanding .sr-combo-wrap,
#pg-purchase-report .pr-combo-wrap{ position:relative; }#pg-sales-report .sr-combo-inp-row,
#pg-notifications .sr-combo-inp-row,
#pg-gstr3b .sr-combo-inp-row,
#pg-gstr2b .sr-combo-inp-row,
#pg-gstr1 .sr-combo-inp-row,
#pg-customer-wise-pl .sr-combo-inp-row,
#pg-bill-pl .sr-combo-inp-row,
#pg-day-wise-pl .sr-combo-inp-row,
#pg-daybook .sr-combo-inp-row,
#pg-stock-report .sr-combo-inp-row,
#pg-manufacture-report .sr-combo-inp-row,
#pg-product-report .sr-combo-inp-row,
#pg-company-outstanding-report .sr-combo-inp-row,
#pg-other-document-product-report .sr-combo-inp-row,
#pg-other-document-report .sr-combo-inp-row,
#pg-outward-payment-report .sr-combo-inp-row,
#pg-other-income-report .sr-combo-inp-row,
#pg-product-wise-pl .sr-combo-inp-row,
#pg-daily-expenses-report .sr-combo-inp-row,
#pg-inward-payment-report .sr-combo-inp-row,
#pg-purchase-product-report .sr-combo-inp-row,
#pg-sale-product-report .sr-combo-inp-row,
#pg-sale-outstanding .sr-combo-inp-row,
#pg-purchase-outstanding .sr-combo-inp-row,
#pg-purchase-report .pr-combo-inp-row{

  display:flex;
  align-items:center;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  transition:border-color .12s, box-shadow .12s;
}#pg-sales-report .sr-combo-inp-row:focus-within,
#pg-notifications .sr-combo-inp-row:focus-within,
#pg-gstr3b .sr-combo-inp-row:focus-within,
#pg-gstr2b .sr-combo-inp-row:focus-within,
#pg-gstr1 .sr-combo-inp-row:focus-within,
#pg-customer-wise-pl .sr-combo-inp-row:focus-within,
#pg-bill-pl .sr-combo-inp-row:focus-within,
#pg-day-wise-pl .sr-combo-inp-row:focus-within,
#pg-daybook .sr-combo-inp-row:focus-within,
#pg-stock-report .sr-combo-inp-row:focus-within,
#pg-manufacture-report .sr-combo-inp-row:focus-within,
#pg-product-report .sr-combo-inp-row:focus-within,
#pg-company-outstanding-report .sr-combo-inp-row:focus-within,
#pg-other-document-product-report .sr-combo-inp-row:focus-within,
#pg-other-document-report .sr-combo-inp-row:focus-within,
#pg-outward-payment-report .sr-combo-inp-row:focus-within,
#pg-other-income-report .sr-combo-inp-row:focus-within,
#pg-product-wise-pl .sr-combo-inp-row:focus-within,
#pg-daily-expenses-report .sr-combo-inp-row:focus-within,
#pg-inward-payment-report .sr-combo-inp-row:focus-within,
#pg-purchase-product-report .sr-combo-inp-row:focus-within,
#pg-sale-product-report .sr-combo-inp-row:focus-within,
#pg-sale-outstanding .sr-combo-inp-row:focus-within,
#pg-purchase-outstanding .sr-combo-inp-row:focus-within,
#pg-purchase-report .pr-combo-inp-row:focus-within{

  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}#pg-sales-report .sr-combo-inp-row input,
#pg-notifications .sr-combo-inp-row input,
#pg-gstr3b .sr-combo-inp-row input,
#pg-gstr2b .sr-combo-inp-row input,
#pg-gstr1 .sr-combo-inp-row input,
#pg-customer-wise-pl .sr-combo-inp-row input,
#pg-bill-pl .sr-combo-inp-row input,
#pg-day-wise-pl .sr-combo-inp-row input,
#pg-daybook .sr-combo-inp-row input,
#pg-stock-report .sr-combo-inp-row input,
#pg-manufacture-report .sr-combo-inp-row input,
#pg-product-report .sr-combo-inp-row input,
#pg-company-outstanding-report .sr-combo-inp-row input,
#pg-other-document-product-report .sr-combo-inp-row input,
#pg-other-document-report .sr-combo-inp-row input,
#pg-outward-payment-report .sr-combo-inp-row input,
#pg-other-income-report .sr-combo-inp-row input,
#pg-product-wise-pl .sr-combo-inp-row input,
#pg-daily-expenses-report .sr-combo-inp-row input,
#pg-inward-payment-report .sr-combo-inp-row input,
#pg-purchase-product-report .sr-combo-inp-row input,
#pg-sale-product-report .sr-combo-inp-row input,
#pg-sale-outstanding .sr-combo-inp-row input,
#pg-purchase-outstanding .sr-combo-inp-row input,
#pg-purchase-report .pr-combo-inp-row input{

  flex:1;
  min-width:0;
  padding:8px 10px;
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  font-family:inherit;
  color:var(--text, #111);
}#pg-sales-report .sr-combo-arrow,
#pg-notifications .sr-combo-arrow,
#pg-gstr3b .sr-combo-arrow,
#pg-gstr2b .sr-combo-arrow,
#pg-gstr1 .sr-combo-arrow,
#pg-customer-wise-pl .sr-combo-arrow,
#pg-bill-pl .sr-combo-arrow,
#pg-day-wise-pl .sr-combo-arrow,
#pg-daybook .sr-combo-arrow,
#pg-stock-report .sr-combo-arrow,
#pg-manufacture-report .sr-combo-arrow,
#pg-product-report .sr-combo-arrow,
#pg-company-outstanding-report .sr-combo-arrow,
#pg-other-document-product-report .sr-combo-arrow,
#pg-other-document-report .sr-combo-arrow,
#pg-outward-payment-report .sr-combo-arrow,
#pg-other-income-report .sr-combo-arrow,
#pg-product-wise-pl .sr-combo-arrow,
#pg-daily-expenses-report .sr-combo-arrow,
#pg-inward-payment-report .sr-combo-arrow,
#pg-purchase-product-report .sr-combo-arrow,
#pg-sale-product-report .sr-combo-arrow,
#pg-sale-outstanding .sr-combo-arrow,
#pg-purchase-outstanding .sr-combo-arrow,
#pg-purchase-report .pr-combo-arrow{

  background:none;
  border:none;
  padding:6px 10px;
  cursor:pointer;
  color:var(--muted, #9ca3af);
  font-size:14px;
}#pg-sales-report .sr-combo-arrow:hover,
#pg-notifications .sr-combo-arrow:hover,
#pg-gstr3b .sr-combo-arrow:hover,
#pg-gstr2b .sr-combo-arrow:hover,
#pg-gstr1 .sr-combo-arrow:hover,
#pg-customer-wise-pl .sr-combo-arrow:hover,
#pg-bill-pl .sr-combo-arrow:hover,
#pg-day-wise-pl .sr-combo-arrow:hover,
#pg-daybook .sr-combo-arrow:hover,
#pg-stock-report .sr-combo-arrow:hover,
#pg-manufacture-report .sr-combo-arrow:hover,
#pg-product-report .sr-combo-arrow:hover,
#pg-company-outstanding-report .sr-combo-arrow:hover,
#pg-other-document-product-report .sr-combo-arrow:hover,
#pg-other-document-report .sr-combo-arrow:hover,
#pg-outward-payment-report .sr-combo-arrow:hover,
#pg-other-income-report .sr-combo-arrow:hover,
#pg-product-wise-pl .sr-combo-arrow:hover,
#pg-daily-expenses-report .sr-combo-arrow:hover,
#pg-inward-payment-report .sr-combo-arrow:hover,
#pg-purchase-product-report .sr-combo-arrow:hover,
#pg-sale-product-report .sr-combo-arrow:hover,
#pg-sale-outstanding .sr-combo-arrow:hover,
#pg-purchase-outstanding .sr-combo-arrow:hover,
#pg-purchase-report .pr-combo-arrow:hover{ color:var(--text, #111); }#pg-sales-report .sr-combo-drop,
#pg-notifications .sr-combo-drop,
#pg-gstr3b .sr-combo-drop,
#pg-gstr2b .sr-combo-drop,
#pg-gstr1 .sr-combo-drop,
#pg-customer-wise-pl .sr-combo-drop,
#pg-bill-pl .sr-combo-drop,
#pg-day-wise-pl .sr-combo-drop,
#pg-daybook .sr-combo-drop,
#pg-stock-report .sr-combo-drop,
#pg-manufacture-report .sr-combo-drop,
#pg-product-report .sr-combo-drop,
#pg-company-outstanding-report .sr-combo-drop,
#pg-other-document-product-report .sr-combo-drop,
#pg-other-document-report .sr-combo-drop,
#pg-outward-payment-report .sr-combo-drop,
#pg-other-income-report .sr-combo-drop,
#pg-product-wise-pl .sr-combo-drop,
#pg-daily-expenses-report .sr-combo-drop,
#pg-inward-payment-report .sr-combo-drop,
#pg-purchase-product-report .sr-combo-drop,
#pg-sale-product-report .sr-combo-drop,
#pg-sale-outstanding .sr-combo-drop,
#pg-purchase-outstanding .sr-combo-drop,
#pg-purchase-report .pr-combo-drop{

  position:absolute;
  top:calc(100% + 2px); left:0; right:0;
  max-height:260px;
  overflow-y:auto;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  display:none;
  z-index:110;
}#pg-sales-report .sr-combo-drop.open,
#pg-notifications .sr-combo-drop.open,
#pg-gstr3b .sr-combo-drop.open,
#pg-gstr2b .sr-combo-drop.open,
#pg-gstr1 .sr-combo-drop.open,
#pg-customer-wise-pl .sr-combo-drop.open,
#pg-bill-pl .sr-combo-drop.open,
#pg-day-wise-pl .sr-combo-drop.open,
#pg-daybook .sr-combo-drop.open,
#pg-stock-report .sr-combo-drop.open,
#pg-manufacture-report .sr-combo-drop.open,
#pg-product-report .sr-combo-drop.open,
#pg-company-outstanding-report .sr-combo-drop.open,
#pg-other-document-product-report .sr-combo-drop.open,
#pg-other-document-report .sr-combo-drop.open,
#pg-outward-payment-report .sr-combo-drop.open,
#pg-other-income-report .sr-combo-drop.open,
#pg-product-wise-pl .sr-combo-drop.open,
#pg-daily-expenses-report .sr-combo-drop.open,
#pg-inward-payment-report .sr-combo-drop.open,
#pg-purchase-product-report .sr-combo-drop.open,
#pg-sale-product-report .sr-combo-drop.open,
#pg-sale-outstanding .sr-combo-drop.open,
#pg-purchase-outstanding .sr-combo-drop.open,
#pg-purchase-report .pr-combo-drop.open{ display:block; }#pg-sales-report .sr-combo-drop .sr-cust-item,
#pg-notifications .sr-combo-drop .sr-cust-item,
#pg-gstr3b .sr-combo-drop .sr-cust-item,
#pg-gstr2b .sr-combo-drop .sr-cust-item,
#pg-gstr1 .sr-combo-drop .sr-cust-item,
#pg-customer-wise-pl .sr-combo-drop .sr-cust-item,
#pg-bill-pl .sr-combo-drop .sr-cust-item,
#pg-daybook .sr-combo-drop .sr-cust-item,
#pg-stock-report .sr-combo-drop .sr-cust-item,
#pg-manufacture-report .sr-combo-drop .sr-cust-item,
#pg-product-report .sr-combo-drop .sr-cust-item,
#pg-company-outstanding-report .sr-combo-drop .sr-cust-item,
#pg-other-document-product-report .sr-combo-drop .sr-cust-item,
#pg-other-document-report .sr-combo-drop .sr-cust-item,
#pg-outward-payment-report .sr-combo-drop .sr-cust-item,
#pg-other-income-report .sr-combo-drop .sr-cust-item,
#pg-product-wise-pl .sr-combo-drop .sr-cust-item,
#pg-daily-expenses-report .sr-combo-drop .sr-cust-item,
#pg-inward-payment-report .sr-combo-drop .sr-cust-item,
#pg-purchase-product-report .sr-combo-drop .sr-cust-item,
#pg-sale-product-report .sr-combo-drop .sr-cust-item,
#pg-sale-outstanding .sr-combo-drop .sr-cust-item,
#pg-purchase-outstanding .sr-combo-drop .sr-cust-item,
#pg-purchase-report .pr-combo-drop .pr-cust-item,
#pg-day-wise-pl .sr-combo-drop .sr-prod-item,
#pg-sales-report .sr-combo-drop .sr-prod-item,
#pg-notifications .sr-combo-drop .sr-prod-item,
#pg-gstr3b .sr-combo-drop .sr-prod-item,
#pg-gstr2b .sr-combo-drop .sr-prod-item,
#pg-gstr1 .sr-combo-drop .sr-prod-item,
#pg-customer-wise-pl .sr-combo-drop .sr-prod-item,
#pg-bill-pl .sr-combo-drop .sr-prod-item,
#pg-daybook .sr-combo-drop .sr-prod-item,
#pg-stock-report .sr-combo-drop .sr-prod-item,
#pg-manufacture-report .sr-combo-drop .sr-prod-item,
#pg-product-report .sr-combo-drop .sr-prod-item,
#pg-company-outstanding-report .sr-combo-drop .sr-prod-item,
#pg-other-document-product-report .sr-combo-drop .sr-prod-item,
#pg-other-document-report .sr-combo-drop .sr-prod-item,
#pg-outward-payment-report .sr-combo-drop .sr-prod-item,
#pg-other-income-report .sr-combo-drop .sr-prod-item,
#pg-product-wise-pl .sr-combo-drop .sr-prod-item,
#pg-daily-expenses-report .sr-combo-drop .sr-prod-item,
#pg-inward-payment-report .sr-combo-drop .sr-prod-item,
#pg-purchase-product-report .sr-combo-drop .sr-prod-item,
#pg-sale-product-report .sr-combo-drop .sr-prod-item,
#pg-sale-outstanding .sr-combo-drop .sr-prod-item,
#pg-purchase-outstanding .sr-combo-drop .sr-prod-item,
#pg-purchase-report .pr-combo-drop .pr-prod-item{

  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--text, #111);
}#pg-sales-report .sr-combo-drop .sr-cust-item:hover,
#pg-notifications .sr-combo-drop .sr-cust-item:hover,
#pg-gstr3b .sr-combo-drop .sr-cust-item:hover,
#pg-gstr2b .sr-combo-drop .sr-cust-item:hover,
#pg-gstr1 .sr-combo-drop .sr-cust-item:hover,
#pg-customer-wise-pl .sr-combo-drop .sr-cust-item:hover,
#pg-bill-pl .sr-combo-drop .sr-cust-item:hover,
#pg-daybook .sr-combo-drop .sr-cust-item:hover,
#pg-stock-report .sr-combo-drop .sr-cust-item:hover,
#pg-manufacture-report .sr-combo-drop .sr-cust-item:hover,
#pg-product-report .sr-combo-drop .sr-cust-item:hover,
#pg-company-outstanding-report .sr-combo-drop .sr-cust-item:hover,
#pg-other-document-product-report .sr-combo-drop .sr-cust-item:hover,
#pg-other-document-report .sr-combo-drop .sr-cust-item:hover,
#pg-outward-payment-report .sr-combo-drop .sr-cust-item:hover,
#pg-other-income-report .sr-combo-drop .sr-cust-item:hover,
#pg-product-wise-pl .sr-combo-drop .sr-cust-item:hover,
#pg-daily-expenses-report .sr-combo-drop .sr-cust-item:hover,
#pg-inward-payment-report .sr-combo-drop .sr-cust-item:hover,
#pg-purchase-product-report .sr-combo-drop .sr-cust-item:hover,
#pg-sale-product-report .sr-combo-drop .sr-cust-item:hover,
#pg-sale-outstanding .sr-combo-drop .sr-cust-item:hover,
#pg-purchase-outstanding .sr-combo-drop .sr-cust-item:hover,
#pg-purchase-report .pr-combo-drop .pr-cust-item:hover,
#pg-day-wise-pl .sr-combo-drop .sr-prod-item:hover,
#pg-sales-report .sr-combo-drop .sr-prod-item:hover,
#pg-notifications .sr-combo-drop .sr-prod-item:hover,
#pg-gstr3b .sr-combo-drop .sr-prod-item:hover,
#pg-gstr2b .sr-combo-drop .sr-prod-item:hover,
#pg-gstr1 .sr-combo-drop .sr-prod-item:hover,
#pg-customer-wise-pl .sr-combo-drop .sr-prod-item:hover,
#pg-bill-pl .sr-combo-drop .sr-prod-item:hover,
#pg-daybook .sr-combo-drop .sr-prod-item:hover,
#pg-stock-report .sr-combo-drop .sr-prod-item:hover,
#pg-manufacture-report .sr-combo-drop .sr-prod-item:hover,
#pg-product-report .sr-combo-drop .sr-prod-item:hover,
#pg-company-outstanding-report .sr-combo-drop .sr-prod-item:hover,
#pg-other-document-product-report .sr-combo-drop .sr-prod-item:hover,
#pg-other-document-report .sr-combo-drop .sr-prod-item:hover,
#pg-outward-payment-report .sr-combo-drop .sr-prod-item:hover,
#pg-other-income-report .sr-combo-drop .sr-prod-item:hover,
#pg-product-wise-pl .sr-combo-drop .sr-prod-item:hover,
#pg-daily-expenses-report .sr-combo-drop .sr-prod-item:hover,
#pg-inward-payment-report .sr-combo-drop .sr-prod-item:hover,
#pg-purchase-product-report .sr-combo-drop .sr-prod-item:hover,
#pg-sale-product-report .sr-combo-drop .sr-prod-item:hover,
#pg-sale-outstanding .sr-combo-drop .sr-prod-item:hover,
#pg-purchase-outstanding .sr-combo-drop .sr-prod-item:hover,
#pg-purchase-report .pr-combo-drop .pr-prod-item:hover{ background:#f3f4f6; }#pg-sales-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-notifications .sr-combo-drop .sr-cust-item.sr-all,
#pg-gstr3b .sr-combo-drop .sr-cust-item.sr-all,
#pg-gstr2b .sr-combo-drop .sr-cust-item.sr-all,
#pg-gstr1 .sr-combo-drop .sr-cust-item.sr-all,
#pg-customer-wise-pl .sr-combo-drop .sr-cust-item.sr-all,
#pg-bill-pl .sr-combo-drop .sr-cust-item.sr-all,
#pg-daybook .sr-combo-drop .sr-cust-item.sr-all,
#pg-stock-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-manufacture-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-product-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-company-outstanding-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-other-document-product-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-other-document-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-outward-payment-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-other-income-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-product-wise-pl .sr-combo-drop .sr-cust-item.sr-all,
#pg-daily-expenses-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-inward-payment-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-purchase-product-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-sale-product-report .sr-combo-drop .sr-cust-item.sr-all,
#pg-sale-outstanding .sr-combo-drop .sr-cust-item.sr-all,
#pg-purchase-outstanding .sr-combo-drop .sr-cust-item.sr-all,
#pg-purchase-report .pr-combo-drop .pr-cust-item.pr-all,
#pg-day-wise-pl .sr-combo-drop .sr-prod-item.sr-all,
#pg-sales-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-notifications .sr-combo-drop .sr-prod-item.sr-all,
#pg-gstr3b .sr-combo-drop .sr-prod-item.sr-all,
#pg-gstr2b .sr-combo-drop .sr-prod-item.sr-all,
#pg-gstr1 .sr-combo-drop .sr-prod-item.sr-all,
#pg-customer-wise-pl .sr-combo-drop .sr-prod-item.sr-all,
#pg-bill-pl .sr-combo-drop .sr-prod-item.sr-all,
#pg-daybook .sr-combo-drop .sr-prod-item.sr-all,
#pg-stock-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-manufacture-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-product-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-company-outstanding-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-other-document-product-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-other-document-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-outward-payment-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-other-income-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-product-wise-pl .sr-combo-drop .sr-prod-item.sr-all,
#pg-daily-expenses-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-inward-payment-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-purchase-product-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-sale-product-report .sr-combo-drop .sr-prod-item.sr-all,
#pg-sale-outstanding .sr-combo-drop .sr-prod-item.sr-all,
#pg-purchase-outstanding .sr-combo-drop .sr-prod-item.sr-all,
#pg-purchase-report .pr-combo-drop .pr-prod-item.pr-all{

  color:var(--muted, #6b7280);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  font-style:italic;
}#pg-sales-report .sr-combo-drop .sr-cust-city,
#pg-notifications .sr-combo-drop .sr-cust-city,
#pg-gstr3b .sr-combo-drop .sr-cust-city,
#pg-gstr2b .sr-combo-drop .sr-cust-city,
#pg-gstr1 .sr-combo-drop .sr-cust-city,
#pg-customer-wise-pl .sr-combo-drop .sr-cust-city,
#pg-bill-pl .sr-combo-drop .sr-cust-city,
#pg-day-wise-pl .sr-combo-drop .sr-cust-city,
#pg-daybook .sr-combo-drop .sr-cust-city,
#pg-stock-report .sr-combo-drop .sr-cust-city,
#pg-manufacture-report .sr-combo-drop .sr-cust-city,
#pg-product-report .sr-combo-drop .sr-cust-city,
#pg-company-outstanding-report .sr-combo-drop .sr-cust-city,
#pg-other-document-product-report .sr-combo-drop .sr-cust-city,
#pg-other-document-report .sr-combo-drop .sr-cust-city,
#pg-outward-payment-report .sr-combo-drop .sr-cust-city,
#pg-other-income-report .sr-combo-drop .sr-cust-city,
#pg-product-wise-pl .sr-combo-drop .sr-cust-city,
#pg-daily-expenses-report .sr-combo-drop .sr-cust-city,
#pg-inward-payment-report .sr-combo-drop .sr-cust-city,
#pg-purchase-product-report .sr-combo-drop .sr-cust-city,
#pg-sale-product-report .sr-combo-drop .sr-cust-city,
#pg-sale-outstanding .sr-combo-drop .sr-cust-city,
#pg-purchase-outstanding .sr-combo-drop .sr-cust-city,
#pg-purchase-report .pr-combo-drop .pr-cust-city{

  color:var(--muted, #9ca3af);
  font-size:12px;
}/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.229 — New combo widgets in the Sales Report filter grid
   ───────────────────────────────────────────────────────────────────────────
   • Reset button in the Customize Report header (matches Select All /
     Deselect All look,
but with a subtle amber tint so it reads as an
     "undo customisations" action).
   • Transaction Type combo drop has a search input pinned to the top
     (reference Image 1). The default "Select Transection Type" row gets a
     green highlight when it's the currently-selected value so the user
     can see at a glance which option is active — matches the image.
   • Customer/Vendor chip field reuses .sr-chip-field styles.
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset button in Customize Report header */
#pg-day-wise-pl .sr-cust-reset,
#pg-sales-report .sr-cust-reset,
#pg-notifications .sr-cust-reset,
#pg-gstr3b .sr-cust-reset,
#pg-gstr2b .sr-cust-reset,
#pg-gstr1 .sr-cust-reset,
#pg-customer-wise-pl .sr-cust-reset,
#pg-bill-pl .sr-cust-reset,
/* Reset button in Customize Report header */
#pg-daybook .sr-cust-reset,
#pg-stock-report .sr-cust-reset,
#pg-manufacture-report .sr-cust-reset,
#pg-product-report .sr-cust-reset,
#pg-company-outstanding-report .sr-cust-reset,
#pg-other-document-product-report .sr-cust-reset,
#pg-other-document-report .sr-cust-reset,
#pg-outward-payment-report .sr-cust-reset,
#pg-other-income-report .sr-cust-reset,
#pg-product-wise-pl .sr-cust-reset,
#pg-daily-expenses-report .sr-cust-reset,
#pg-inward-payment-report .sr-cust-reset,
#pg-purchase-product-report .sr-cust-reset,
#pg-sale-product-report .sr-cust-reset,
#pg-sale-outstanding .sr-cust-reset,
#pg-purchase-outstanding .sr-cust-reset,
#pg-purchase-report .pr-cust-reset{

  display:inline-flex;
  align-items:center;
  background:var(--brand-bg);
  color:#92400e;
  border:1px solid var(--brand-bg2);
  padding:5px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s;
  margin-left:6px;
}#pg-sales-report .sr-cust-reset:hover,
#pg-notifications .sr-cust-reset:hover,
#pg-gstr3b .sr-cust-reset:hover,
#pg-gstr2b .sr-cust-reset:hover,
#pg-gstr1 .sr-cust-reset:hover,
#pg-customer-wise-pl .sr-cust-reset:hover,
#pg-bill-pl .sr-cust-reset:hover,
#pg-day-wise-pl .sr-cust-reset:hover,
#pg-daybook .sr-cust-reset:hover,
#pg-stock-report .sr-cust-reset:hover,
#pg-manufacture-report .sr-cust-reset:hover,
#pg-product-report .sr-cust-reset:hover,
#pg-company-outstanding-report .sr-cust-reset:hover,
#pg-other-document-product-report .sr-cust-reset:hover,
#pg-other-document-report .sr-cust-reset:hover,
#pg-outward-payment-report .sr-cust-reset:hover,
#pg-other-income-report .sr-cust-reset:hover,
#pg-product-wise-pl .sr-cust-reset:hover,
#pg-daily-expenses-report .sr-cust-reset:hover,
#pg-inward-payment-report .sr-cust-reset:hover,
#pg-purchase-product-report .sr-cust-reset:hover,
#pg-sale-product-report .sr-cust-reset:hover,
#pg-sale-outstanding .sr-cust-reset:hover,
#pg-purchase-outstanding .sr-cust-reset:hover,
#pg-purchase-report .pr-cust-reset:hover{

  background:#fde68a;
  border-color:#f59e0b;
}#pg-sales-report .sr-cust-reset:active,
#pg-notifications .sr-cust-reset:active,
#pg-gstr3b .sr-cust-reset:active,
#pg-gstr2b .sr-cust-reset:active,
#pg-gstr1 .sr-cust-reset:active,
#pg-customer-wise-pl .sr-cust-reset:active,
#pg-bill-pl .sr-cust-reset:active,
#pg-day-wise-pl .sr-cust-reset:active,
#pg-daybook .sr-cust-reset:active,
#pg-stock-report .sr-cust-reset:active,
#pg-manufacture-report .sr-cust-reset:active,
#pg-product-report .sr-cust-reset:active,
#pg-company-outstanding-report .sr-cust-reset:active,
#pg-other-document-product-report .sr-cust-reset:active,
#pg-other-document-report .sr-cust-reset:active,
#pg-outward-payment-report .sr-cust-reset:active,
#pg-other-income-report .sr-cust-reset:active,
#pg-product-wise-pl .sr-cust-reset:active,
#pg-daily-expenses-report .sr-cust-reset:active,
#pg-inward-payment-report .sr-cust-reset:active,
#pg-purchase-product-report .sr-cust-reset:active,
#pg-sale-product-report .sr-cust-reset:active,
#pg-sale-outstanding .sr-cust-reset:active,
#pg-purchase-outstanding .sr-cust-reset:active,
#pg-purchase-report .pr-cust-reset:active{

  background:#fcd34d;
}/* Transaction Type combo — search input inside the dropdown,
matching Image 1 */
#pg-day-wise-pl .sr-combo-drop-search,
#pg-sales-report .sr-combo-drop-search,
#pg-notifications .sr-combo-drop-search,
#pg-gstr3b .sr-combo-drop-search,
#pg-gstr2b .sr-combo-drop-search,
#pg-gstr1 .sr-combo-drop-search,
#pg-customer-wise-pl .sr-combo-drop-search,
#pg-bill-pl .sr-combo-drop-search,
#pg-daybook .sr-combo-drop-search,
#pg-stock-report .sr-combo-drop-search,
#pg-manufacture-report .sr-combo-drop-search,
#pg-product-report .sr-combo-drop-search,
#pg-company-outstanding-report .sr-combo-drop-search,
#pg-other-document-product-report .sr-combo-drop-search,
#pg-other-document-report .sr-combo-drop-search,
#pg-outward-payment-report .sr-combo-drop-search,
#pg-other-income-report .sr-combo-drop-search,
#pg-product-wise-pl .sr-combo-drop-search,
#pg-daily-expenses-report .sr-combo-drop-search,
#pg-inward-payment-report .sr-combo-drop-search,
#pg-purchase-product-report .sr-combo-drop-search,
#pg-sale-product-report .sr-combo-drop-search,
#pg-sale-outstanding .sr-combo-drop-search,
#pg-purchase-outstanding .sr-combo-drop-search,
#pg-purchase-report .pr-combo-drop-search{

  padding:6px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
  position:sticky; top:0;
  z-index:2;
}#pg-sales-report .sr-combo-drop-search input,
#pg-notifications .sr-combo-drop-search input,
#pg-gstr3b .sr-combo-drop-search input,
#pg-gstr2b .sr-combo-drop-search input,
#pg-gstr1 .sr-combo-drop-search input,
#pg-customer-wise-pl .sr-combo-drop-search input,
#pg-bill-pl .sr-combo-drop-search input,
#pg-day-wise-pl .sr-combo-drop-search input,
#pg-daybook .sr-combo-drop-search input,
#pg-stock-report .sr-combo-drop-search input,
#pg-manufacture-report .sr-combo-drop-search input,
#pg-product-report .sr-combo-drop-search input,
#pg-company-outstanding-report .sr-combo-drop-search input,
#pg-other-document-product-report .sr-combo-drop-search input,
#pg-other-document-report .sr-combo-drop-search input,
#pg-outward-payment-report .sr-combo-drop-search input,
#pg-other-income-report .sr-combo-drop-search input,
#pg-product-wise-pl .sr-combo-drop-search input,
#pg-daily-expenses-report .sr-combo-drop-search input,
#pg-inward-payment-report .sr-combo-drop-search input,
#pg-purchase-product-report .sr-combo-drop-search input,
#pg-sale-product-report .sr-combo-drop-search input,
#pg-sale-outstanding .sr-combo-drop-search input,
#pg-purchase-outstanding .sr-combo-drop-search input,
#pg-purchase-report .pr-combo-drop-search input{

  width:100%;
  padding:7px 10px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:5px;
  font-size:13px;
  font-family:inherit;
  outline:none;
  background:var(--surf, #fff);
  color:var(--text, #111);
  box-sizing:border-box;
}#pg-sales-report .sr-combo-drop-search input:focus,
#pg-notifications .sr-combo-drop-search input:focus,
#pg-gstr3b .sr-combo-drop-search input:focus,
#pg-gstr2b .sr-combo-drop-search input:focus,
#pg-gstr1 .sr-combo-drop-search input:focus,
#pg-customer-wise-pl .sr-combo-drop-search input:focus,
#pg-bill-pl .sr-combo-drop-search input:focus,
#pg-day-wise-pl .sr-combo-drop-search input:focus,
#pg-daybook .sr-combo-drop-search input:focus,
#pg-stock-report .sr-combo-drop-search input:focus,
#pg-manufacture-report .sr-combo-drop-search input:focus,
#pg-product-report .sr-combo-drop-search input:focus,
#pg-company-outstanding-report .sr-combo-drop-search input:focus,
#pg-other-document-product-report .sr-combo-drop-search input:focus,
#pg-other-document-report .sr-combo-drop-search input:focus,
#pg-outward-payment-report .sr-combo-drop-search input:focus,
#pg-other-income-report .sr-combo-drop-search input:focus,
#pg-product-wise-pl .sr-combo-drop-search input:focus,
#pg-daily-expenses-report .sr-combo-drop-search input:focus,
#pg-inward-payment-report .sr-combo-drop-search input:focus,
#pg-purchase-product-report .sr-combo-drop-search input:focus,
#pg-sale-product-report .sr-combo-drop-search input:focus,
#pg-sale-outstanding .sr-combo-drop-search input:focus,
#pg-purchase-outstanding .sr-combo-drop-search input:focus,
#pg-purchase-report .pr-combo-drop-search input:focus{

  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.10);
}/* The default "Select Transection Type" row keeps a subtle grey label,
but when it's
   the currently-picked value it gets a solid green fill with white text — that's what
   the reference image shows. */
#pg-day-wise-pl .sr-txntype-item.sr-txntype-default,
#pg-sales-report .sr-txntype-item.sr-txntype-default,
#pg-notifications .sr-txntype-item.sr-txntype-default,
#pg-gstr3b .sr-txntype-item.sr-txntype-default,
#pg-gstr2b .sr-txntype-item.sr-txntype-default,
#pg-gstr1 .sr-txntype-item.sr-txntype-default,
#pg-customer-wise-pl .sr-txntype-item.sr-txntype-default,
#pg-bill-pl .sr-txntype-item.sr-txntype-default,
#pg-daybook .sr-txntype-item.sr-txntype-default,
#pg-stock-report .sr-txntype-item.sr-txntype-default,
#pg-manufacture-report .sr-txntype-item.sr-txntype-default,
#pg-product-report .sr-txntype-item.sr-txntype-default,
#pg-company-outstanding-report .sr-txntype-item.sr-txntype-default,
#pg-other-document-product-report .sr-txntype-item.sr-txntype-default,
#pg-other-document-report .sr-txntype-item.sr-txntype-default,
#pg-outward-payment-report .sr-txntype-item.sr-txntype-default,
#pg-other-income-report .sr-txntype-item.sr-txntype-default,
#pg-product-wise-pl .sr-txntype-item.sr-txntype-default,
#pg-daily-expenses-report .sr-txntype-item.sr-txntype-default,
#pg-inward-payment-report .sr-txntype-item.sr-txntype-default,
#pg-purchase-product-report .sr-txntype-item.sr-txntype-default,
#pg-sale-product-report .sr-txntype-item.sr-txntype-default,
#pg-sale-outstanding .sr-txntype-item.sr-txntype-default,
#pg-purchase-outstanding .sr-txntype-item.sr-txntype-default,
#pg-purchase-report .pr-txntype-item.pr-txntype-default{

  color:var(--text, #111);
  font-weight:500;
}#pg-sales-report .sr-txntype-item.sr-txntype-current,
#pg-notifications .sr-txntype-item.sr-txntype-current,
#pg-gstr3b .sr-txntype-item.sr-txntype-current,
#pg-gstr2b .sr-txntype-item.sr-txntype-current,
#pg-gstr1 .sr-txntype-item.sr-txntype-current,
#pg-customer-wise-pl .sr-txntype-item.sr-txntype-current,
#pg-bill-pl .sr-txntype-item.sr-txntype-current,
#pg-day-wise-pl .sr-txntype-item.sr-txntype-current,
#pg-daybook .sr-txntype-item.sr-txntype-current,
#pg-stock-report .sr-txntype-item.sr-txntype-current,
#pg-manufacture-report .sr-txntype-item.sr-txntype-current,
#pg-product-report .sr-txntype-item.sr-txntype-current,
#pg-company-outstanding-report .sr-txntype-item.sr-txntype-current,
#pg-other-document-product-report .sr-txntype-item.sr-txntype-current,
#pg-other-document-report .sr-txntype-item.sr-txntype-current,
#pg-outward-payment-report .sr-txntype-item.sr-txntype-current,
#pg-other-income-report .sr-txntype-item.sr-txntype-current,
#pg-product-wise-pl .sr-txntype-item.sr-txntype-current,
#pg-daily-expenses-report .sr-txntype-item.sr-txntype-current,
#pg-inward-payment-report .sr-txntype-item.sr-txntype-current,
#pg-purchase-product-report .sr-txntype-item.sr-txntype-current,
#pg-sale-product-report .sr-txntype-item.sr-txntype-current,
#pg-sale-outstanding .sr-txntype-item.sr-txntype-current,
#pg-purchase-outstanding .sr-txntype-item.sr-txntype-current,
#pg-purchase-report .pr-txntype-item.pr-txntype-current{

  background:linear-gradient(180deg, var(--brand) 0%, var(--brand) 100%);
  color:#fff;
  font-weight:600;
}#pg-sales-report .sr-txntype-item.sr-txntype-current:hover,
#pg-notifications .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr3b .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr2b .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr1 .sr-txntype-item.sr-txntype-current:hover,
#pg-customer-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-bill-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-day-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-daybook .sr-txntype-item.sr-txntype-current:hover,
#pg-stock-report .sr-txntype-item.sr-txntype-current:hover,
#pg-manufacture-report .sr-txntype-item.sr-txntype-current:hover,
#pg-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-company-outstanding-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-document-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-document-report .sr-txntype-item.sr-txntype-current:hover,
#pg-outward-payment-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-income-report .sr-txntype-item.sr-txntype-current:hover,
#pg-product-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-daily-expenses-report .sr-txntype-item.sr-txntype-current:hover,
#pg-inward-payment-report .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-sale-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-sale-outstanding .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-outstanding .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-report .pr-txntype-item.pr-txntype-current:hover{

  background:linear-gradient(180deg, var(--brand) 0%, var(--brand) 100%);
}#pg-sales-report .sr-txntype-item,
#pg-notifications .sr-txntype-item,
#pg-gstr3b .sr-txntype-item,
#pg-gstr2b .sr-txntype-item,
#pg-gstr1 .sr-txntype-item,
#pg-customer-wise-pl .sr-txntype-item,
#pg-bill-pl .sr-txntype-item,
#pg-day-wise-pl .sr-txntype-item,
#pg-daybook .sr-txntype-item,
#pg-stock-report .sr-txntype-item,
#pg-manufacture-report .sr-txntype-item,
#pg-product-report .sr-txntype-item,
#pg-company-outstanding-report .sr-txntype-item,
#pg-other-document-product-report .sr-txntype-item,
#pg-other-document-report .sr-txntype-item,
#pg-outward-payment-report .sr-txntype-item,
#pg-other-income-report .sr-txntype-item,
#pg-product-wise-pl .sr-txntype-item,
#pg-daily-expenses-report .sr-txntype-item,
#pg-inward-payment-report .sr-txntype-item,
#pg-purchase-product-report .sr-txntype-item,
#pg-sale-product-report .sr-txntype-item,
#pg-sale-outstanding .sr-txntype-item,
#pg-purchase-outstanding .sr-txntype-item,
#pg-purchase-report .pr-txntype-item{

  padding:9px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--text, #111);
  transition:background .10s;
}#pg-sales-report .sr-txntype-item:hover,
#pg-notifications .sr-txntype-item:hover,
#pg-gstr3b .sr-txntype-item:hover,
#pg-gstr2b .sr-txntype-item:hover,
#pg-gstr1 .sr-txntype-item:hover,
#pg-customer-wise-pl .sr-txntype-item:hover,
#pg-bill-pl .sr-txntype-item:hover,
#pg-day-wise-pl .sr-txntype-item:hover,
#pg-daybook .sr-txntype-item:hover,
#pg-stock-report .sr-txntype-item:hover,
#pg-manufacture-report .sr-txntype-item:hover,
#pg-product-report .sr-txntype-item:hover,
#pg-company-outstanding-report .sr-txntype-item:hover,
#pg-other-document-product-report .sr-txntype-item:hover,
#pg-other-document-report .sr-txntype-item:hover,
#pg-outward-payment-report .sr-txntype-item:hover,
#pg-other-income-report .sr-txntype-item:hover,
#pg-product-wise-pl .sr-txntype-item:hover,
#pg-daily-expenses-report .sr-txntype-item:hover,
#pg-inward-payment-report .sr-txntype-item:hover,
#pg-purchase-product-report .sr-txntype-item:hover,
#pg-sale-product-report .sr-txntype-item:hover,
#pg-sale-outstanding .sr-txntype-item:hover,
#pg-purchase-outstanding .sr-txntype-item:hover,
#pg-purchase-report .pr-txntype-item:hover{ background:#f3f4f6; }#pg-sales-report .sr-txntype-item.sr-txntype-current:hover,
#pg-notifications .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr3b .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr2b .sr-txntype-item.sr-txntype-current:hover,
#pg-gstr1 .sr-txntype-item.sr-txntype-current:hover,
#pg-customer-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-bill-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-day-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-daybook .sr-txntype-item.sr-txntype-current:hover,
#pg-stock-report .sr-txntype-item.sr-txntype-current:hover,
#pg-manufacture-report .sr-txntype-item.sr-txntype-current:hover,
#pg-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-company-outstanding-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-document-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-document-report .sr-txntype-item.sr-txntype-current:hover,
#pg-outward-payment-report .sr-txntype-item.sr-txntype-current:hover,
#pg-other-income-report .sr-txntype-item.sr-txntype-current:hover,
#pg-product-wise-pl .sr-txntype-item.sr-txntype-current:hover,
#pg-daily-expenses-report .sr-txntype-item.sr-txntype-current:hover,
#pg-inward-payment-report .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-sale-product-report .sr-txntype-item.sr-txntype-current:hover,
#pg-sale-outstanding .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-outstanding .sr-txntype-item.sr-txntype-current:hover,
#pg-purchase-report .pr-txntype-item.pr-txntype-current:hover{ /* keep green */ }/* Customer/Vendor chip field now uses the same styles as Products. Extra
   safety rule so chip color contrasts with the sky-blue chip background. */
#pg-day-wise-pl .sr-chip-field .sr-prod-chip,
#pg-sales-report .sr-chip-field .sr-prod-chip,
#pg-notifications .sr-chip-field .sr-prod-chip,
#pg-gstr3b .sr-chip-field .sr-prod-chip,
#pg-gstr2b .sr-chip-field .sr-prod-chip,
#pg-gstr1 .sr-chip-field .sr-prod-chip,
#pg-customer-wise-pl .sr-chip-field .sr-prod-chip,
#pg-bill-pl .sr-chip-field .sr-prod-chip,
/* Customer/Vendor chip field now uses the same styles as Products. Extra
   safety rule so chip color contrasts with the sky-blue chip background. */
#pg-daybook .sr-chip-field .sr-prod-chip,
#pg-stock-report .sr-chip-field .sr-prod-chip,
#pg-manufacture-report .sr-chip-field .sr-prod-chip,
#pg-product-report .sr-chip-field .sr-prod-chip,
#pg-company-outstanding-report .sr-chip-field .sr-prod-chip,
#pg-other-document-product-report .sr-chip-field .sr-prod-chip,
#pg-other-document-report .sr-chip-field .sr-prod-chip,
#pg-outward-payment-report .sr-chip-field .sr-prod-chip,
#pg-other-income-report .sr-chip-field .sr-prod-chip,
#pg-product-wise-pl .sr-chip-field .sr-prod-chip,
#pg-daily-expenses-report .sr-chip-field .sr-prod-chip,
#pg-inward-payment-report .sr-chip-field .sr-prod-chip,
/* Customer/Vendor chip field now uses the same styles as Products. Extra
   safety rule so chip color contrasts with the sky-blue chip background. */
#pg-purchase-product-report .sr-chip-field .sr-prod-chip,
#pg-sale-product-report .sr-chip-field .sr-prod-chip,
/* Customer/Vendor chip field now uses the same styles as Products. Extra
   safety rule so chip color contrasts with the sky-blue chip background. */
#pg-sale-outstanding .sr-chip-field .sr-prod-chip,
#pg-purchase-outstanding .sr-chip-field .sr-prod-chip,
#pg-purchase-report .pr-chip-field .pr-prod-chip{ margin:2px 4px 2px 0; }/* END v3.9.229 additions */

/* Product dropdown reuses .sr-combo-drop */
#pg-day-wise-pl .sr-prod-drop,
#pg-sales-report .sr-prod-drop,
#pg-notifications .sr-prod-drop,
#pg-gstr3b .sr-prod-drop,
#pg-gstr2b .sr-prod-drop,
#pg-gstr1 .sr-prod-drop,
#pg-customer-wise-pl .sr-prod-drop,
#pg-bill-pl .sr-prod-drop,
/* END v3.9.229 additions */

/* Product dropdown reuses .sr-combo-drop */
#pg-daybook .sr-prod-drop,
#pg-stock-report .sr-prod-drop,
#pg-manufacture-report .sr-prod-drop,
#pg-product-report .sr-prod-drop,
#pg-company-outstanding-report .sr-prod-drop,
#pg-other-document-product-report .sr-prod-drop,
#pg-other-document-report .sr-prod-drop,
#pg-outward-payment-report .sr-prod-drop,
#pg-other-income-report .sr-prod-drop,
#pg-product-wise-pl .sr-prod-drop,
#pg-daily-expenses-report .sr-prod-drop,
#pg-inward-payment-report .sr-prod-drop,
/* END v3.9.229 additions */

/* Product dropdown reuses .sr-combo-drop */
#pg-purchase-product-report .sr-prod-drop,
#pg-sale-product-report .sr-prod-drop,
/* END v3.9.229 additions */

/* Product dropdown reuses .sr-combo-drop */
#pg-sale-outstanding .sr-prod-drop,
#pg-purchase-outstanding .sr-prod-drop,
#pg-purchase-report .pr-prod-drop{

  position:absolute;
  top:calc(100% + 4px); left:0; right:0;
  max-height:260px;
  overflow-y:auto;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  display:none;
  z-index:110;
}#pg-sales-report .sr-prod-drop.open,
#pg-notifications .sr-prod-drop.open,
#pg-gstr3b .sr-prod-drop.open,
#pg-gstr2b .sr-prod-drop.open,
#pg-gstr1 .sr-prod-drop.open,
#pg-customer-wise-pl .sr-prod-drop.open,
#pg-bill-pl .sr-prod-drop.open,
#pg-day-wise-pl .sr-prod-drop.open,
#pg-daybook .sr-prod-drop.open,
#pg-stock-report .sr-prod-drop.open,
#pg-manufacture-report .sr-prod-drop.open,
#pg-product-report .sr-prod-drop.open,
#pg-company-outstanding-report .sr-prod-drop.open,
#pg-other-document-product-report .sr-prod-drop.open,
#pg-other-document-report .sr-prod-drop.open,
#pg-outward-payment-report .sr-prod-drop.open,
#pg-other-income-report .sr-prod-drop.open,
#pg-product-wise-pl .sr-prod-drop.open,
#pg-daily-expenses-report .sr-prod-drop.open,
#pg-inward-payment-report .sr-prod-drop.open,
#pg-purchase-product-report .sr-prod-drop.open,
#pg-sale-product-report .sr-prod-drop.open,
#pg-sale-outstanding .sr-prod-drop.open,
#pg-purchase-outstanding .sr-prod-drop.open,
#pg-purchase-report .pr-prod-drop.open{ display:block; }#pg-sales-report .sr-prod-drop .sr-prod-item,
#pg-notifications .sr-prod-drop .sr-prod-item,
#pg-gstr3b .sr-prod-drop .sr-prod-item,
#pg-gstr2b .sr-prod-drop .sr-prod-item,
#pg-gstr1 .sr-prod-drop .sr-prod-item,
#pg-customer-wise-pl .sr-prod-drop .sr-prod-item,
#pg-bill-pl .sr-prod-drop .sr-prod-item,
#pg-day-wise-pl .sr-prod-drop .sr-prod-item,
#pg-daybook .sr-prod-drop .sr-prod-item,
#pg-stock-report .sr-prod-drop .sr-prod-item,
#pg-manufacture-report .sr-prod-drop .sr-prod-item,
#pg-product-report .sr-prod-drop .sr-prod-item,
#pg-company-outstanding-report .sr-prod-drop .sr-prod-item,
#pg-other-document-product-report .sr-prod-drop .sr-prod-item,
#pg-other-document-report .sr-prod-drop .sr-prod-item,
#pg-outward-payment-report .sr-prod-drop .sr-prod-item,
#pg-other-income-report .sr-prod-drop .sr-prod-item,
#pg-product-wise-pl .sr-prod-drop .sr-prod-item,
#pg-daily-expenses-report .sr-prod-drop .sr-prod-item,
#pg-inward-payment-report .sr-prod-drop .sr-prod-item,
#pg-purchase-product-report .sr-prod-drop .sr-prod-item,
#pg-sale-product-report .sr-prod-drop .sr-prod-item,
#pg-sale-outstanding .sr-prod-drop .sr-prod-item,
#pg-purchase-outstanding .sr-prod-drop .sr-prod-item,
#pg-purchase-report .pr-prod-drop .pr-prod-item{

  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--text, #111);
}#pg-sales-report .sr-prod-drop .sr-prod-item:hover,
#pg-notifications .sr-prod-drop .sr-prod-item:hover,
#pg-gstr3b .sr-prod-drop .sr-prod-item:hover,
#pg-gstr2b .sr-prod-drop .sr-prod-item:hover,
#pg-gstr1 .sr-prod-drop .sr-prod-item:hover,
#pg-customer-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-bill-pl .sr-prod-drop .sr-prod-item:hover,
#pg-day-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-daybook .sr-prod-drop .sr-prod-item:hover,
#pg-stock-report .sr-prod-drop .sr-prod-item:hover,
#pg-manufacture-report .sr-prod-drop .sr-prod-item:hover,
#pg-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-company-outstanding-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-document-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-document-report .sr-prod-drop .sr-prod-item:hover,
#pg-outward-payment-report .sr-prod-drop .sr-prod-item:hover,
#pg-other-income-report .sr-prod-drop .sr-prod-item:hover,
#pg-product-wise-pl .sr-prod-drop .sr-prod-item:hover,
#pg-daily-expenses-report .sr-prod-drop .sr-prod-item:hover,
#pg-inward-payment-report .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-sale-product-report .sr-prod-drop .sr-prod-item:hover,
#pg-sale-outstanding .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-outstanding .sr-prod-drop .sr-prod-item:hover,
#pg-purchase-report .pr-prod-drop .pr-prod-item:hover{ background:#f3f4f6; }/* ── Deselect All button ──────────────────────────────── */
#pg-day-wise-pl .sr-cust-desall,
#pg-sales-report .sr-cust-desall,
#pg-notifications .sr-cust-desall,
#pg-gstr3b .sr-cust-desall,
#pg-gstr2b .sr-cust-desall,
#pg-gstr1 .sr-cust-desall,
#pg-customer-wise-pl .sr-cust-desall,
#pg-bill-pl .sr-cust-desall,
/* ── Deselect All button ──────────────────────────────── */
#pg-daybook .sr-cust-desall,
#pg-stock-report .sr-cust-desall,
#pg-manufacture-report .sr-cust-desall,
#pg-product-report .sr-cust-desall,
#pg-company-outstanding-report .sr-cust-desall,
#pg-other-document-product-report .sr-cust-desall,
#pg-other-document-report .sr-cust-desall,
#pg-outward-payment-report .sr-cust-desall,
#pg-other-income-report .sr-cust-desall,
#pg-product-wise-pl .sr-cust-desall,
#pg-daily-expenses-report .sr-cust-desall,
#pg-inward-payment-report .sr-cust-desall,
/* ── Deselect All button ──────────────────────────────── */
#pg-purchase-product-report .sr-cust-desall,
#pg-sale-product-report .sr-cust-desall,
/* ── Deselect All button ──────────────────────────────── */
#pg-sale-outstanding .sr-cust-desall,
#pg-purchase-outstanding .sr-cust-desall,
#pg-purchase-report .pr-cust-desall{

  padding:5px 12px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:5px;
  color:#b91c1c;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
}#pg-sales-report .sr-cust-desall:hover,
#pg-notifications .sr-cust-desall:hover,
#pg-gstr3b .sr-cust-desall:hover,
#pg-gstr2b .sr-cust-desall:hover,
#pg-gstr1 .sr-cust-desall:hover,
#pg-customer-wise-pl .sr-cust-desall:hover,
#pg-bill-pl .sr-cust-desall:hover,
#pg-day-wise-pl .sr-cust-desall:hover,
#pg-daybook .sr-cust-desall:hover,
#pg-stock-report .sr-cust-desall:hover,
#pg-manufacture-report .sr-cust-desall:hover,
#pg-product-report .sr-cust-desall:hover,
#pg-company-outstanding-report .sr-cust-desall:hover,
#pg-other-document-product-report .sr-cust-desall:hover,
#pg-other-document-report .sr-cust-desall:hover,
#pg-outward-payment-report .sr-cust-desall:hover,
#pg-other-income-report .sr-cust-desall:hover,
#pg-product-wise-pl .sr-cust-desall:hover,
#pg-daily-expenses-report .sr-cust-desall:hover,
#pg-inward-payment-report .sr-cust-desall:hover,
#pg-purchase-product-report .sr-cust-desall:hover,
#pg-sale-product-report .sr-cust-desall:hover,
#pg-sale-outstanding .sr-cust-desall:hover,
#pg-purchase-outstanding .sr-cust-desall:hover,
#pg-purchase-report .pr-cust-desall:hover{ background:#fee2e2; }

/* ── Print media query — landscape + tight font ──────── */
@media print{
  @page { size: A4 landscape; margin: 12mm; }
  body * { visibility:hidden; }
  #sr-print-frame, #sr-print-frame * { visibility:visible !important; }
  #sr-print-frame{ position:absolute; left:0; top:0; width:100%; }
}#pg-sales-report .sr-print-clone,
#pg-notifications .sr-print-clone,
#pg-gstr3b .sr-print-clone,
#pg-gstr2b .sr-print-clone,
#pg-gstr1 .sr-print-clone,
#pg-customer-wise-pl .sr-print-clone,
#pg-bill-pl .sr-print-clone,
#pg-day-wise-pl .sr-print-clone,
#pg-daybook .sr-print-clone,
#pg-stock-report .sr-print-clone,
#pg-manufacture-report .sr-print-clone,
#pg-product-report .sr-print-clone,
#pg-company-outstanding-report .sr-print-clone,
#pg-other-document-product-report .sr-print-clone,
#pg-other-document-report .sr-print-clone,
#pg-outward-payment-report .sr-print-clone,
#pg-other-income-report .sr-print-clone,
#pg-product-wise-pl .sr-print-clone,
#pg-daily-expenses-report .sr-print-clone,
#pg-inward-payment-report .sr-print-clone,
#pg-purchase-product-report .sr-print-clone,
#pg-sale-product-report .sr-print-clone,
#pg-sale-outstanding .sr-print-clone,
#pg-purchase-outstanding .sr-print-clone,
#pg-purchase-report .pr-print-clone{

  font-size:11px;
  color:#000;
}#pg-sales-report .sr-print-clone table,
#pg-notifications .sr-print-clone table,
#pg-gstr3b .sr-print-clone table,
#pg-gstr2b .sr-print-clone table,
#pg-gstr1 .sr-print-clone table,
#pg-customer-wise-pl .sr-print-clone table,
#pg-bill-pl .sr-print-clone table,
#pg-day-wise-pl .sr-print-clone table,
#pg-daybook .sr-print-clone table,
#pg-stock-report .sr-print-clone table,
#pg-manufacture-report .sr-print-clone table,
#pg-product-report .sr-print-clone table,
#pg-company-outstanding-report .sr-print-clone table,
#pg-other-document-product-report .sr-print-clone table,
#pg-other-document-report .sr-print-clone table,
#pg-outward-payment-report .sr-print-clone table,
#pg-other-income-report .sr-print-clone table,
#pg-product-wise-pl .sr-print-clone table,
#pg-daily-expenses-report .sr-print-clone table,
#pg-inward-payment-report .sr-print-clone table,
#pg-purchase-product-report .sr-print-clone table,
#pg-sale-product-report .sr-print-clone table,
#pg-sale-outstanding .sr-print-clone table,
#pg-purchase-outstanding .sr-print-clone table,
#pg-purchase-report .pr-print-clone table{

  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}#pg-sales-report .sr-print-clone th,
#pg-notifications .sr-print-clone th,
#pg-gstr3b .sr-print-clone th,
#pg-gstr2b .sr-print-clone th,
#pg-gstr1 .sr-print-clone th,
#pg-customer-wise-pl .sr-print-clone th,
#pg-bill-pl .sr-print-clone th,
#pg-daybook .sr-print-clone th,
#pg-stock-report .sr-print-clone th,
#pg-manufacture-report .sr-print-clone th,
#pg-product-report .sr-print-clone th,
#pg-company-outstanding-report .sr-print-clone th,
#pg-other-document-product-report .sr-print-clone th,
#pg-other-document-report .sr-print-clone th,
#pg-outward-payment-report .sr-print-clone th,
#pg-other-income-report .sr-print-clone th,
#pg-product-wise-pl .sr-print-clone th,
#pg-daily-expenses-report .sr-print-clone th,
#pg-inward-payment-report .sr-print-clone th,
#pg-purchase-product-report .sr-print-clone th,
#pg-sale-product-report .sr-print-clone th,
#pg-sale-outstanding .sr-print-clone th,
#pg-purchase-outstanding .sr-print-clone th,
#pg-purchase-report .pr-print-clone th,
#pg-day-wise-pl .sr-print-clone td,
#pg-sales-report .sr-print-clone td,
#pg-notifications .sr-print-clone td,
#pg-gstr3b .sr-print-clone td,
#pg-gstr2b .sr-print-clone td,
#pg-gstr1 .sr-print-clone td,
#pg-customer-wise-pl .sr-print-clone td,
#pg-bill-pl .sr-print-clone td,
#pg-daybook .sr-print-clone td,
#pg-stock-report .sr-print-clone td,
#pg-manufacture-report .sr-print-clone td,
#pg-product-report .sr-print-clone td,
#pg-company-outstanding-report .sr-print-clone td,
#pg-other-document-product-report .sr-print-clone td,
#pg-other-document-report .sr-print-clone td,
#pg-outward-payment-report .sr-print-clone td,
#pg-other-income-report .sr-print-clone td,
#pg-product-wise-pl .sr-print-clone td,
#pg-daily-expenses-report .sr-print-clone td,
#pg-inward-payment-report .sr-print-clone td,
#pg-purchase-product-report .sr-print-clone td,
#pg-sale-product-report .sr-print-clone td,
#pg-sale-outstanding .sr-print-clone td,
#pg-purchase-outstanding .sr-print-clone td,
#pg-purchase-report .pr-print-clone td{

  border:1px solid #444;
  padding:4px 6px;
  vertical-align:top;
  word-break:break-word;
}#pg-sales-report .sr-print-clone thead th,
#pg-notifications .sr-print-clone thead th,
#pg-gstr3b .sr-print-clone thead th,
#pg-gstr2b .sr-print-clone thead th,
#pg-gstr1 .sr-print-clone thead th,
#pg-customer-wise-pl .sr-print-clone thead th,
#pg-bill-pl .sr-print-clone thead th,
#pg-day-wise-pl .sr-print-clone thead th,
#pg-daybook .sr-print-clone thead th,
#pg-stock-report .sr-print-clone thead th,
#pg-manufacture-report .sr-print-clone thead th,
#pg-product-report .sr-print-clone thead th,
#pg-company-outstanding-report .sr-print-clone thead th,
#pg-other-document-product-report .sr-print-clone thead th,
#pg-other-document-report .sr-print-clone thead th,
#pg-outward-payment-report .sr-print-clone thead th,
#pg-other-income-report .sr-print-clone thead th,
#pg-product-wise-pl .sr-print-clone thead th,
#pg-daily-expenses-report .sr-print-clone thead th,
#pg-inward-payment-report .sr-print-clone thead th,
#pg-purchase-product-report .sr-print-clone thead th,
#pg-sale-product-report .sr-print-clone thead th,
#pg-sale-outstanding .sr-print-clone thead th,
#pg-purchase-outstanding .sr-print-clone thead th,
#pg-purchase-report .pr-print-clone thead th{

  background:#f0f0f0;
  font-weight:600;
}/* ── Mobile: hide desktop-only mobile-btns block ────── */
#pg-day-wise-pl .sr-mobile-btns,
#pg-sales-report .sr-mobile-btns,
#pg-notifications .sr-mobile-btns,
#pg-gstr3b .sr-mobile-btns,
#pg-gstr2b .sr-mobile-btns,
#pg-gstr1 .sr-mobile-btns,
#pg-customer-wise-pl .sr-mobile-btns,
#pg-bill-pl .sr-mobile-btns,
/* ── Mobile: hide desktop-only mobile-btns block ────── */
#pg-daybook .sr-mobile-btns,
#pg-stock-report .sr-mobile-btns,
#pg-manufacture-report .sr-mobile-btns,
#pg-product-report .sr-mobile-btns,
#pg-company-outstanding-report .sr-mobile-btns,
#pg-other-document-product-report .sr-mobile-btns,
#pg-other-document-report .sr-mobile-btns,
#pg-outward-payment-report .sr-mobile-btns,
#pg-other-income-report .sr-mobile-btns,
#pg-product-wise-pl .sr-mobile-btns,
#pg-daily-expenses-report .sr-mobile-btns,
#pg-inward-payment-report .sr-mobile-btns,
/* ── Mobile: hide desktop-only mobile-btns block ────── */
#pg-purchase-product-report .sr-mobile-btns,
#pg-sale-product-report .sr-mobile-btns,
/* ── Mobile: hide desktop-only mobile-btns block ────── */
#pg-sale-outstanding .sr-mobile-btns,
#pg-purchase-outstanding .sr-mobile-btns,
#pg-purchase-report .pr-mobile-btns{ display:none; }
@media (max-width:640px){#pg-sales-report .sr-mobile-btns,
#pg-notifications .sr-mobile-btns,
#pg-gstr3b .sr-mobile-btns,
#pg-gstr2b .sr-mobile-btns,
#pg-gstr1 .sr-mobile-btns,
#pg-customer-wise-pl .sr-mobile-btns,
#pg-bill-pl .sr-mobile-btns,
#pg-day-wise-pl .sr-mobile-btns,
#pg-daybook .sr-mobile-btns,
#pg-stock-report .sr-mobile-btns,
#pg-manufacture-report .sr-mobile-btns,
#pg-product-report .sr-mobile-btns,
#pg-company-outstanding-report .sr-mobile-btns,
#pg-other-document-product-report .sr-mobile-btns,
#pg-other-document-report .sr-mobile-btns,
#pg-outward-payment-report .sr-mobile-btns,
#pg-other-income-report .sr-mobile-btns,
#pg-product-wise-pl .sr-mobile-btns,
#pg-daily-expenses-report .sr-mobile-btns,
#pg-inward-payment-report .sr-mobile-btns,
#pg-purchase-product-report .sr-mobile-btns,
#pg-sale-product-report .sr-mobile-btns,
#pg-sale-outstanding .sr-mobile-btns,
#pg-purchase-outstanding .sr-mobile-btns,
#pg-purchase-report .pr-mobile-btns{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:16px;
  }#pg-sales-report .sr-mobile-btn,
#pg-notifications .sr-mobile-btn,
#pg-gstr3b .sr-mobile-btn,
#pg-gstr2b .sr-mobile-btn,
#pg-gstr1 .sr-mobile-btn,
#pg-customer-wise-pl .sr-mobile-btn,
#pg-bill-pl .sr-mobile-btn,
#pg-day-wise-pl .sr-mobile-btn,
#pg-daybook .sr-mobile-btn,
#pg-stock-report .sr-mobile-btn,
#pg-manufacture-report .sr-mobile-btn,
#pg-product-report .sr-mobile-btn,
#pg-company-outstanding-report .sr-mobile-btn,
#pg-other-document-product-report .sr-mobile-btn,
#pg-other-document-report .sr-mobile-btn,
#pg-outward-payment-report .sr-mobile-btn,
#pg-other-income-report .sr-mobile-btn,
#pg-product-wise-pl .sr-mobile-btn,
#pg-daily-expenses-report .sr-mobile-btn,
#pg-inward-payment-report .sr-mobile-btn,
#pg-purchase-product-report .sr-mobile-btn,
#pg-sale-product-report .sr-mobile-btn,
#pg-sale-outstanding .sr-mobile-btn,
#pg-purchase-outstanding .sr-mobile-btn,
#pg-purchase-report .pr-mobile-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 8px;
    background:var(--surf, #fff);
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:6px;
    color:var(--text, #111);
    font-size:12px;
    font-family:inherit;
    cursor:pointer;
    margin-bottom:0;   /* override earlier rule */
  }#pg-sales-report .sr-mobile-btn:hover,
#pg-notifications .sr-mobile-btn:hover,
#pg-gstr3b .sr-mobile-btn:hover,
#pg-gstr2b .sr-mobile-btn:hover,
#pg-gstr1 .sr-mobile-btn:hover,
#pg-customer-wise-pl .sr-mobile-btn:hover,
#pg-bill-pl .sr-mobile-btn:hover,
#pg-day-wise-pl .sr-mobile-btn:hover,
#pg-daybook .sr-mobile-btn:hover,
#pg-stock-report .sr-mobile-btn:hover,
#pg-manufacture-report .sr-mobile-btn:hover,
#pg-product-report .sr-mobile-btn:hover,
#pg-company-outstanding-report .sr-mobile-btn:hover,
#pg-other-document-product-report .sr-mobile-btn:hover,
#pg-other-document-report .sr-mobile-btn:hover,
#pg-outward-payment-report .sr-mobile-btn:hover,
#pg-other-income-report .sr-mobile-btn:hover,
#pg-product-wise-pl .sr-mobile-btn:hover,
#pg-daily-expenses-report .sr-mobile-btn:hover,
#pg-inward-payment-report .sr-mobile-btn:hover,
#pg-purchase-product-report .sr-mobile-btn:hover,
#pg-sale-product-report .sr-mobile-btn:hover,
#pg-sale-outstanding .sr-mobile-btn:hover,
#pg-purchase-outstanding .sr-mobile-btn:hover,
#pg-purchase-report .pr-mobile-btn:hover{ background:#f9fafb; }/* Give the customize/deselect header its own wrap on tiny screens */
  #pg-day-wise-pl .sr-cust-hdr,
#pg-sales-report .sr-cust-hdr,
#pg-notifications .sr-cust-hdr,
#pg-gstr3b .sr-cust-hdr,
#pg-gstr2b .sr-cust-hdr,
#pg-gstr1 .sr-cust-hdr,
#pg-customer-wise-pl .sr-cust-hdr,
#pg-bill-pl .sr-cust-hdr,
/* Give the customize/deselect header its own wrap on tiny screens */
  #pg-daybook .sr-cust-hdr,
#pg-stock-report .sr-cust-hdr,
#pg-manufacture-report .sr-cust-hdr,
#pg-product-report .sr-cust-hdr,
#pg-company-outstanding-report .sr-cust-hdr,
#pg-other-document-product-report .sr-cust-hdr,
#pg-other-document-report .sr-cust-hdr,
#pg-outward-payment-report .sr-cust-hdr,
#pg-other-income-report .sr-cust-hdr,
#pg-product-wise-pl .sr-cust-hdr,
#pg-daily-expenses-report .sr-cust-hdr,
#pg-inward-payment-report .sr-cust-hdr,
/* Give the customize/deselect header its own wrap on tiny screens */
  #pg-purchase-product-report .sr-cust-hdr,
#pg-sale-product-report .sr-cust-hdr,
/* Give the customize/deselect header its own wrap on tiny screens */
  #pg-sale-outstanding .sr-cust-hdr,
#pg-purchase-outstanding .sr-cust-hdr,
#pg-purchase-report .pr-cust-hdr{ flex-wrap:wrap; }/* Chip field: allow more vertical breathing room for wrapping chips */
  #pg-day-wise-pl .sr-chip-field,
#pg-sales-report .sr-chip-field,
#pg-notifications .sr-chip-field,
#pg-gstr3b .sr-chip-field,
#pg-gstr2b .sr-chip-field,
#pg-gstr1 .sr-chip-field,
#pg-customer-wise-pl .sr-chip-field,
#pg-bill-pl .sr-chip-field,
/* Chip field: allow more vertical breathing room for wrapping chips */
  #pg-daybook .sr-chip-field,
#pg-stock-report .sr-chip-field,
#pg-manufacture-report .sr-chip-field,
#pg-product-report .sr-chip-field,
#pg-company-outstanding-report .sr-chip-field,
#pg-other-document-product-report .sr-chip-field,
#pg-other-document-report .sr-chip-field,
#pg-outward-payment-report .sr-chip-field,
#pg-other-income-report .sr-chip-field,
#pg-product-wise-pl .sr-chip-field,
#pg-daily-expenses-report .sr-chip-field,
#pg-inward-payment-report .sr-chip-field,
/* Chip field: allow more vertical breathing room for wrapping chips */
  #pg-purchase-product-report .sr-chip-field,
#pg-sale-product-report .sr-chip-field,
/* Chip field: allow more vertical breathing room for wrapping chips */
  #pg-sale-outstanding .sr-chip-field,
#pg-purchase-outstanding .sr-chip-field,
#pg-purchase-report .pr-chip-field{ min-height:44px; }
}/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.243 — Z-INDEX FIX for combo/chip dropdowns on all Report pages
   ───────────────────────────────────────────────────────────────────────────
   The Customer/Vendor Group field lives in row-2 of the filter grid and its
   drop extends below into the Customize Report / actions row area. Without
   an explicit high z-index those elements paint on top and the drop appears
   hidden. The rule below forces every open drop to stack above everything
   in its card. Also ensures the .sr-fg / .sr-filter-grid parents don't clip
   the drop with overflow:hidden (they don't set it,
but be explicit).
   ═══════════════════════════════════════════════════════════════════════ */
#pg-day-wise-pl .sr-combo-drop.open,
#pg-sales-report .sr-combo-drop.open,
#pg-notifications .sr-combo-drop.open,
#pg-gstr3b .sr-combo-drop.open,
#pg-gstr2b .sr-combo-drop.open,
#pg-gstr1 .sr-combo-drop.open,
#pg-customer-wise-pl .sr-combo-drop.open,
#pg-bill-pl .sr-combo-drop.open,
#pg-daybook .sr-combo-drop.open,
#pg-stock-report .sr-combo-drop.open,
#pg-manufacture-report .sr-combo-drop.open,
#pg-product-report .sr-combo-drop.open,
#pg-company-outstanding-report .sr-combo-drop.open,
#pg-other-document-product-report .sr-combo-drop.open,
#pg-other-document-report .sr-combo-drop.open,
#pg-outward-payment-report .sr-combo-drop.open,
#pg-other-income-report .sr-combo-drop.open,
#pg-product-wise-pl .sr-combo-drop.open,
#pg-daily-expenses-report .sr-combo-drop.open,
#pg-day-wise-pl .sr-prod-drop.open,
#pg-sales-report .sr-prod-drop.open,
#pg-notifications .sr-prod-drop.open,
#pg-gstr3b .sr-prod-drop.open,
#pg-gstr2b .sr-prod-drop.open,
#pg-gstr1 .sr-prod-drop.open,
#pg-customer-wise-pl .sr-prod-drop.open,
#pg-bill-pl .sr-prod-drop.open,
#pg-daybook .sr-prod-drop.open,
#pg-stock-report .sr-prod-drop.open,
#pg-manufacture-report .sr-prod-drop.open,
#pg-product-report .sr-prod-drop.open,
#pg-company-outstanding-report .sr-prod-drop.open,
#pg-other-document-product-report .sr-prod-drop.open,
#pg-other-document-report .sr-prod-drop.open,
#pg-outward-payment-report .sr-prod-drop.open,
#pg-other-income-report .sr-prod-drop.open,
#pg-product-wise-pl .sr-prod-drop.open,
#pg-daily-expenses-report .sr-prod-drop.open,
#pg-purchase-report .pr-combo-drop.open,
#pg-purchase-report .pr-prod-drop.open,
#pg-sale-outstanding .sr-combo-drop.open,
#pg-sale-outstanding .sr-prod-drop.open,
#pg-purchase-outstanding .sr-combo-drop.open,
#pg-purchase-outstanding .sr-prod-drop.open,
#pg-sale-product-report .sr-combo-drop.open,
#pg-sale-product-report .sr-prod-drop.open,
#pg-purchase-product-report .sr-combo-drop.open,
#pg-purchase-product-report .sr-prod-drop.open,
#pg-inward-payment-report .sr-combo-drop.open,
#pg-inward-payment-report .sr-prod-drop.open{
  z-index: 9999 !important;
}#pg-sales-report .sr-fg,
#pg-notifications .sr-fg,
#pg-gstr3b .sr-fg,
#pg-gstr2b .sr-fg,
#pg-gstr1 .sr-fg,
#pg-customer-wise-pl .sr-fg,
#pg-bill-pl .sr-fg,
#pg-day-wise-pl .sr-fg,
#pg-daybook .sr-fg,
#pg-stock-report .sr-fg,
#pg-manufacture-report .sr-fg,
#pg-product-report .sr-fg,
#pg-company-outstanding-report .sr-fg,
#pg-other-document-product-report .sr-fg,
#pg-other-document-report .sr-fg,
#pg-outward-payment-report .sr-fg,
#pg-other-income-report .sr-fg,
#pg-product-wise-pl .sr-fg,
#pg-daily-expenses-report .sr-fg,
#pg-purchase-report .pr-fg,
#pg-sale-outstanding .sr-fg,
#pg-purchase-outstanding .sr-fg,
#pg-sale-product-report .sr-fg,
#pg-purchase-product-report .sr-fg,
#pg-inward-payment-report .sr-fg{
  position: relative;
  overflow: visible;
}#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-day-wise-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-purchase-report .pr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid{
  overflow: visible;
}/* Ensure the chip-field wrapper always allows drop overflow */
#pg-day-wise-pl .sr-chip-field,
#pg-sales-report .sr-chip-field,
#pg-notifications .sr-chip-field,
#pg-gstr3b .sr-chip-field,
#pg-gstr2b .sr-chip-field,
#pg-gstr1 .sr-chip-field,
#pg-customer-wise-pl .sr-chip-field,
#pg-bill-pl .sr-chip-field,
/* Ensure the chip-field wrapper always allows drop overflow */
#pg-daybook .sr-chip-field,
#pg-stock-report .sr-chip-field,
#pg-manufacture-report .sr-chip-field,
#pg-product-report .sr-chip-field,
#pg-company-outstanding-report .sr-chip-field,
#pg-other-document-product-report .sr-chip-field,
#pg-other-document-report .sr-chip-field,
#pg-outward-payment-report .sr-chip-field,
#pg-other-income-report .sr-chip-field,
#pg-product-wise-pl .sr-chip-field,
#pg-daily-expenses-report .sr-chip-field,
#pg-purchase-report .pr-chip-field,
#pg-sale-outstanding .sr-chip-field,
#pg-purchase-outstanding .sr-chip-field,
#pg-sale-product-report .sr-chip-field,
#pg-purchase-product-report .sr-chip-field,
#pg-inward-payment-report .sr-chip-field{
  overflow: visible;
}/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.245 — CARD OVERFLOW FIX for report pages
   ───────────────────────────────────────────────────────────────────────────
   .sr-card had overflow:hidden (used to clip corners with border-radius).
   That was clipping any dropdown that extended past the card edge — the
   root cause of the "z-index issue" the user reported. Since the drop is
   position:absolute inside the card,
no z-index value can escape a
   clipping ancestor.
   Setting overflow:visible on the card lets drops extend below the card
   freely. Border-radius still looks fine because .sr-card-hdr and
   .sr-card-body don't have backgrounds that would leak outside corners.
   Also set on .sr-card-body just for safety,
and on .sr-cust-block /
   .sr-adv-block / .sr-actions since they're siblings that could also
   accidentally clip a drop.
   ═══════════════════════════════════════════════════════════════════════ */
#pg-day-wise-pl .sr-card,
#pg-sales-report .sr-card,
#pg-notifications .sr-card,
#pg-gstr3b .sr-card,
#pg-gstr2b .sr-card,
#pg-gstr1 .sr-card,
#pg-customer-wise-pl .sr-card,
#pg-bill-pl .sr-card,
#pg-daybook .sr-card,
#pg-stock-report .sr-card,
#pg-manufacture-report .sr-card,
#pg-product-report .sr-card,
#pg-company-outstanding-report .sr-card,
#pg-other-document-product-report .sr-card,
#pg-other-document-report .sr-card,
#pg-purchase-report .pr-card,
#pg-sale-outstanding .sr-card,
#pg-purchase-outstanding .sr-card,
#pg-sale-product-report .sr-card,
#pg-purchase-product-report .sr-card,
#pg-inward-payment-report .sr-card,
#pg-outward-payment-report .sr-card,
#pg-other-income-report .sr-card,
#pg-product-wise-pl .sr-card,
#pg-daily-expenses-report .sr-card,
#pg-day-wise-pl .sr-card-body,
#pg-sales-report .sr-card-body,
#pg-notifications .sr-card-body,
#pg-gstr3b .sr-card-body,
#pg-gstr2b .sr-card-body,
#pg-gstr1 .sr-card-body,
#pg-customer-wise-pl .sr-card-body,
#pg-bill-pl .sr-card-body,
#pg-daybook .sr-card-body,
#pg-stock-report .sr-card-body,
#pg-manufacture-report .sr-card-body,
#pg-product-report .sr-card-body,
#pg-company-outstanding-report .sr-card-body,
#pg-other-document-product-report .sr-card-body,
#pg-other-document-report .sr-card-body,
#pg-purchase-report .pr-card-body,
#pg-sale-outstanding .sr-card-body,
#pg-purchase-outstanding .sr-card-body,
#pg-sale-product-report .sr-card-body,
#pg-purchase-product-report .sr-card-body,
#pg-inward-payment-report .sr-card-body,
#pg-outward-payment-report .sr-card-body,
#pg-other-income-report .sr-card-body,
#pg-product-wise-pl .sr-card-body,
#pg-daily-expenses-report .sr-card-body,
#pg-day-wise-pl .sr-cust-block,
#pg-sales-report .sr-cust-block,
#pg-notifications .sr-cust-block,
#pg-gstr3b .sr-cust-block,
#pg-gstr2b .sr-cust-block,
#pg-gstr1 .sr-cust-block,
#pg-customer-wise-pl .sr-cust-block,
#pg-bill-pl .sr-cust-block,
#pg-daybook .sr-cust-block,
#pg-stock-report .sr-cust-block,
#pg-manufacture-report .sr-cust-block,
#pg-product-report .sr-cust-block,
#pg-company-outstanding-report .sr-cust-block,
#pg-other-document-product-report .sr-cust-block,
#pg-other-document-report .sr-cust-block,
#pg-purchase-report .pr-cust-block,
#pg-sale-outstanding .sr-cust-block,
#pg-purchase-outstanding .sr-cust-block,
#pg-sale-product-report .sr-cust-block,
#pg-purchase-product-report .sr-cust-block,
#pg-inward-payment-report .sr-cust-block,
#pg-outward-payment-report .sr-cust-block,
#pg-other-income-report .sr-cust-block,
#pg-product-wise-pl .sr-cust-block,
#pg-daily-expenses-report .sr-cust-block,
#pg-day-wise-pl .sr-adv-block,
#pg-sales-report .sr-adv-block,
#pg-notifications .sr-adv-block,
#pg-gstr3b .sr-adv-block,
#pg-gstr2b .sr-adv-block,
#pg-gstr1 .sr-adv-block,
#pg-customer-wise-pl .sr-adv-block,
#pg-bill-pl .sr-adv-block,
#pg-daybook .sr-adv-block,
#pg-stock-report .sr-adv-block,
#pg-manufacture-report .sr-adv-block,
#pg-product-report .sr-adv-block,
#pg-company-outstanding-report .sr-adv-block,
#pg-other-document-product-report .sr-adv-block,
#pg-other-document-report .sr-adv-block,
#pg-purchase-report .pr-adv-block,
#pg-sale-outstanding .sr-adv-block,
#pg-purchase-outstanding .sr-adv-block,
#pg-sale-product-report .sr-adv-block,
#pg-purchase-product-report .sr-adv-block,
#pg-inward-payment-report .sr-adv-block,
#pg-outward-payment-report .sr-adv-block,
#pg-other-income-report .sr-adv-block,
#pg-product-wise-pl .sr-adv-block,
#pg-daily-expenses-report .sr-adv-block,
#pg-day-wise-pl .sr-actions,
#pg-sales-report .sr-actions,
#pg-notifications .sr-actions,
#pg-gstr3b .sr-actions,
#pg-gstr2b .sr-actions,
#pg-gstr1 .sr-actions,
#pg-customer-wise-pl .sr-actions,
#pg-bill-pl .sr-actions,
#pg-daybook .sr-actions,
#pg-stock-report .sr-actions,
#pg-manufacture-report .sr-actions,
#pg-product-report .sr-actions,
#pg-company-outstanding-report .sr-actions,
#pg-other-document-product-report .sr-actions,
#pg-other-document-report .sr-actions,
#pg-purchase-report .pr-actions,
#pg-sale-outstanding .sr-actions,
#pg-purchase-outstanding .sr-actions,
#pg-sale-product-report .sr-actions,
#pg-purchase-product-report .sr-actions,
#pg-inward-payment-report .sr-actions,
#pg-outward-payment-report .sr-actions,
#pg-other-income-report .sr-actions,
#pg-product-wise-pl .sr-actions,
#pg-daily-expenses-report .sr-actions,
#pg-day-wise-pl .sr-flags,
#pg-sales-report .sr-flags,
#pg-notifications .sr-flags,
#pg-gstr3b .sr-flags,
#pg-gstr2b .sr-flags,
#pg-gstr1 .sr-flags,
#pg-customer-wise-pl .sr-flags,
#pg-bill-pl .sr-flags,
#pg-daybook .sr-flags,
#pg-stock-report .sr-flags,
#pg-manufacture-report .sr-flags,
#pg-product-report .sr-flags,
#pg-company-outstanding-report .sr-flags,
#pg-other-document-product-report .sr-flags,
#pg-other-document-report .sr-flags,
#pg-purchase-report .pr-flags,
#pg-sale-outstanding .sr-flags,
#pg-purchase-outstanding .sr-flags,
#pg-sale-product-report .sr-flags,
#pg-purchase-product-report .sr-flags,
#pg-inward-payment-report .sr-flags,
#pg-outward-payment-report .sr-flags{
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.246 — PURCHASE REPORT chip & drop-item styling coverage
   ───────────────────────────────────────────────────────────────────────────
   The unified _rbBuildDrop factory generates chips with class
   `sr-prod-chip` and drop items with class `sr-cust-item` on EVERY page,
   including Purchase Report. But Purchase Report's page-scoped CSS was
   only written for the `pr-*` variants (`.pr-prod-chip`, `.pr-cust-item`),
   so my `sr-*`-classed elements ended up unstyled there.
   Simplest fix: add `#pg-purchase-report .sr-*` alongside the existing
   `#pg-purchase-report .pr-*` rules so both class families are covered.
   ═══════════════════════════════════════════════════════════════════════ */
#pg-purchase-report .sr-prod-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 6px 2px 8px;
  background:var(--brand, var(--brand));
  color:#fff;
  border-radius:4px;
  font-size:12px;
  margin:2px;
}
#pg-purchase-report .sr-prod-chip button{
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0 2px;
  font-size:14px;
}
#pg-purchase-report .sr-combo-drop .sr-cust-item,
#pg-purchase-report .sr-combo-drop .sr-prod-item,
#pg-purchase-report .pr-combo-drop .sr-cust-item,
#pg-purchase-report .pr-combo-drop .sr-prod-item{
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--text, #111);
}
#pg-purchase-report .sr-combo-drop .sr-cust-item:hover,
#pg-purchase-report .sr-combo-drop .sr-prod-item:hover,
#pg-purchase-report .pr-combo-drop .sr-cust-item:hover,
#pg-purchase-report .pr-combo-drop .sr-prod-item:hover{
  background:#f3f4f6;
}
#pg-purchase-report .pr-combo-drop .sr-cust-city{
  font-size:12px;
  color:#6b7280;
  margin-left:3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.9.253 — STOCK REPORT specific styles
   ───────────────────────────────────────────────────────────────────────────
   Vertical flag layout + optional Header Search button accent, only used
   on #pg-stock-report.
   ═══════════════════════════════════════════════════════════════════════ */
/* Thin separator inside filter panel */
#pg-stock-report .str-sep{
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0 14px 0;
}
/* 4 flags stacked vertically per Image 2 (SR default is inline) */
#pg-stock-report .str-flags-vertical{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
#pg-stock-report .str-flags-vertical label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
/* Header Search button styled like Customize Report (both plain white) */
#pg-stock-report .sr-hdr-btn-search{
  /* inherits base .sr-hdr-btn appearance */
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.257 — Notification popup footer + Full-View modal
════════════════════════════════════════════════════════════════════════════════ */

/* Popup footer with View All button */
.ma-hd-popover-foot{
  border-top:1px solid var(--bdr, #e5e7eb);
  padding:8px 12px;
  background:var(--surf, #fff);
  border-radius:0 0 10px 10px;
  display:flex;
  justify-content:center;
}
.ma-notif-view-all{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:transparent;
  border:none;
  color:var(--brand-dd, var(--brand-dd));
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.ma-notif-view-all:hover{
  background:rgba(37,99,235,.08);
}

/* Full-View modal (opens when View All clicked) */
.ma-notif-fullview{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
}
.ma-notif-fullview.open{
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.ma-notif-fullview-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(2px);
  animation:ma-notif-fade-in .15s ease-out;
}
.ma-notif-fullview-panel{
  position:relative;
  width:min(720px, calc(100vw - 32px));
  max-height:min(80vh, 720px);
  background:var(--surf, #fff);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:ma-notif-scale-in .18s cubic-bezier(.16,1,.3,1);
}
@keyframes ma-notif-fade-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes ma-notif-scale-in{
  from{ transform:scale(.95); opacity:0; }
  to  { transform:scale(1);   opacity:1; }
}
.ma-notif-fullview-hdr{
  padding:14px 18px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ma-notif-fullview-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color:var(--text, #1e293b);
  flex:1;
  min-width:200px;
}
.ma-notif-fullview-title svg{
  color:var(--brand-dd, var(--brand-dd));
}
.ma-notif-fullview-count{
  font-size:12px;
  color:var(--muted, #6b7280);
  font-weight:500;
  margin-left:4px;
}
.ma-notif-fullview-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.ma-notif-fullview-tabs{
  display:inline-flex;
  background:var(--surf2, #f3f4f6);
  border-radius:6px;
  padding:2px;
  margin-right:4px;
}
.ma-notif-fullview-tab{
  background:transparent;
  border:none;
  padding:4px 12px;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  color:var(--muted, #6b7280);
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s;
}
.ma-notif-fullview-tab.on{
  background:var(--surf, #fff);
  color:var(--brand-dd, var(--brand-dd));
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.ma-notif-fullview-mark,
.ma-notif-fullview-clear{
  background:transparent;
  border:1px solid var(--bdr, #d1d5db);
  color:var(--text, #374151);
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
.ma-notif-fullview-mark:hover{
  background:rgba(37,99,235,.08);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}
.ma-notif-fullview-clear{
  color:#dc2626;
  border-color:#fecaca;
}
.ma-notif-fullview-clear:hover{
  background:#fef2f2;
  border-color:#f87171;
}
.ma-notif-fullview-close{
  background:transparent;
  border:none;
  color:var(--muted, #6b7280);
  font-size:16px;
  width:28px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  transition:background .12s;
}
.ma-notif-fullview-close:hover{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #111);
}
.ma-notif-fullview-body{
  flex:1;
  overflow-y:auto;
  padding:8px;
}
.ma-notif-fullview-body .ma-notif-item{
  padding:12px 14px;
  margin:4px 0;
  border-radius:8px;
  transition:background .12s;
}
.ma-notif-fullview-body .ma-notif-item:hover{
  background:var(--surf2, #f9fafb);
}
.ma-notif-fullview-empty{
  padding:60px 20px;
  text-align:center;
  color:var(--muted, #9ca3af);
}
.ma-notif-fullview-empty svg{
  color:#d1d5db;
  margin-bottom:12px;
}

/* Mobile — full-screen sheet */
@media (max-width: 640px){
  .ma-notif-fullview-panel{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  .ma-notif-fullview-actions{
    width:100%;
    justify-content:space-between;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.258 — Billing Saathi Assistant (AI chat bot) styling
════════════════════════════════════════════════════════════════════════════════ */

.ma-ai-fab{
  position:fixed;
  bottom:22px;
  right:22px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(37,99,235,.32), 0 2px 6px rgba(0,0,0,.08);
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ma-ai-fab:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 12px 32px rgba(37,99,235,.4), 0 3px 8px rgba(0,0,0,.10);
}
.ma-ai-fab:active{ transform:translateY(0) scale(.98); }
.ma-ai-fab-dot{
  position:absolute;
  top:8px; right:8px;
  width:10px; height:10px;
  background:#ef4444;
  border:2px solid #fff;
  border-radius:50%;
}

.ma-ai-panel{
  position:fixed;
  bottom:90px;
  right:22px;
  width:min(400px, calc(100vw - 32px));
  height:min(600px, calc(100vh - 130px));
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.20), 0 4px 12px rgba(0,0,0,.06);
  z-index:99998;
  display:none;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
.ma-ai-panel.open{
  display:flex;
  opacity:1;
  transform:translateY(0) scale(1);
}

.ma-ai-hdr{
  padding:14px 14px 12px;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
}
.ma-ai-hdr-avatar{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ma-ai-hdr-text{ flex:1; min-width:0; }
.ma-ai-hdr-name{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}
.ma-ai-hdr-status{
  font-size:11.5px;
  opacity:.9;
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:5px;
}
.ma-ai-hdr-dot{
  width:6px; height:6px;
  background:#0EA5E9;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(37,99,235,.35);
  animation:ai-pulse 2s ease-in-out infinite;
}
@keyframes ai-pulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.5; }
}
.ma-ai-hdr-close{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:none;
  width:28px; height:28px;
  border-radius:50%;
  cursor:pointer;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  transition:background .12s;
}
.ma-ai-hdr-close:hover{ background:rgba(255,255,255,.28); }

.ma-ai-body{
  flex:1;
  overflow-y:auto;
  padding:16px 14px 8px;
  background:var(--surf2, #f9fafb);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ma-ai-body::-webkit-scrollbar{ width:6px; }
.ma-ai-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:3px; }

.ma-ai-msg{
  max-width:85%;
  padding:10px 13px;
  font-size:13.5px;
  line-height:1.55;
  border-radius:14px;
  word-wrap:break-word;
  animation:ai-msg-in .22s cubic-bezier(.16,1,.3,1);
}
@keyframes ai-msg-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
.ma-ai-msg.bot{
  background:var(--surf, #fff);
  color:var(--text, #1e293b);
  border:1px solid var(--bdr, #e5e7eb);
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
.ma-ai-msg.user{
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border-bottom-right-radius:4px;
  align-self:flex-end;
}
.ma-ai-msg-time{
  font-size:10.5px;
  color:var(--muted, #9ca3af);
  margin-top:4px;
  padding:0 4px;
}
.ma-ai-msg.user + .ma-ai-msg-time{ text-align:right; }

.ma-ai-msg h4{
  font-size:13px;
  margin:0 0 4px;
  color:var(--brand-dd, var(--brand-dd));
  font-weight:700;
}
.ma-ai-msg .ai-strong{
  font-weight:700;
  color:var(--brand-dd, var(--brand-dd));
}
.ma-ai-msg .ai-num{
  font-weight:700;
  color:var(--text, #111);
  font-size:15px;
}
.ma-ai-msg ul{
  margin:6px 0 2px;
  padding-left:18px;
}
.ma-ai-msg li{ margin:2px 0; }
.ma-ai-msg .ai-open-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:8px;
  padding:6px 12px;
  background:var(--brand, var(--brand));
  color:#fff;
  border:none;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, transform .12s;
}
.ma-ai-msg .ai-open-btn:hover{
  background:var(--brand-dd, var(--brand-dd));
  transform:translateX(2px);
}

/* Typing indicator */
.ma-ai-typing{
  align-self:flex-start;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:14px;
  border-bottom-left-radius:4px;
  padding:12px 16px;
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.ma-ai-typing span{
  width:6px; height:6px;
  background:var(--muted, #9ca3af);
  border-radius:50%;
  animation:ai-typing 1.2s ease-in-out infinite;
}
.ma-ai-typing span:nth-child(2){ animation-delay:.15s; }
.ma-ai-typing span:nth-child(3){ animation-delay:.30s; }
@keyframes ai-typing{
  0%,60%,100%{ transform:translateY(0);   opacity:.4; }
  30%        { transform:translateY(-4px); opacity:1;  }
}

/* Follow-up suggestion chips */
.ma-ai-chips{
  padding:8px 12px;
  border-top:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:104px;
  overflow-y:auto;
}
.ma-ai-chips:empty{ display:none; }
.ma-ai-chip{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #374151);
  border:1px solid var(--bdr, #e5e7eb);
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s, color .12s;
  white-space:nowrap;
}
.ma-ai-chip:hover{
  background:rgba(37,99,235,.08);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}

/* Input row */
.ma-ai-input{
  padding:10px 12px;
  border-top:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
  display:flex;
  align-items:center;
  gap:8px;
}
.ma-ai-input input{
  flex:1;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:20px;
  padding:9px 14px;
  font-size:13px;
  outline:none;
  font-family:inherit;
  transition:border-color .12s, box-shadow .12s;
}
.ma-ai-input input:focus{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.ma-ai-send{
  width:36px; height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .12s, box-shadow .12s;
}
.ma-ai-send:hover{
  transform:scale(1.06);
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.ma-ai-send:active{ transform:scale(.95); }

/* Mobile — full-screen sheet with FAB adjusted */
@media (max-width: 640px){
  .ma-ai-fab{
    bottom:calc(66px + env(safe-area-inset-bottom, 0px));
    right:14px;
    width:52px; height:52px;
  }
  .ma-ai-panel{
    bottom:0; right:0; left:0; top:0;
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    border:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.259 — Products/Services list — Image-first column + size guard
   ──────────────────────────────────────────────────────────────────────────
   Two changes in this build:
     1. In the Products/Services list, the Image column now appears BEFORE
        the Name column (HTML/JS swap already done — no CSS change needed).
     2. When users upload a custom product image (particularly large / tall
        photos), the base .ma-item-thumb rule at line 2947 sets 34×34px but
        without !important. Some browsers + the `img` intrinsic-size logic
        can cause the cell to expand to the natural image dimensions before
        the CSS constraint applies (especially before decode). This block
        force-locks every uploaded product image inside the list to exactly
        40×40px with `object-fit: cover` so tall/wide images crop to a
        square thumbnail cleanly and the row height stays consistent.
════════════════════════════════════════════════════════════════════════════════ */

/* Force-constrain the thumbnail in the product/service list — regardless of
   the source image's intrinsic width/height. Applies to BOTH the <img>
   (real photo) and <div> (emoji placeholder). */
#pg-stock td[data-col="image"] .ma-item-thumb,
#pg-stock td[data-col="image"] img.ma-item-thumb,
#pg-stock td[data-col="image"] div.ma-item-thumb{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  border-radius:8px !important;
  object-fit:cover !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle;
  flex-shrink:0;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  overflow:hidden;
}

/* Also freeze the image column width so a wide photo can't push the whole
   layout — 56px cell width leaves 8px padding + 40px image. */
#pg-stock .ma-tbl th[data-col="image"],
#pg-stock .ma-tbl td[data-col="image"]{
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  padding-left:8px !important;
  padding-right:8px !important;
  text-align:center;
}

/* Mobile card view — image sits at the top-left of the card, name to its
   right. The `data-label` chrome is dropped for the image cell so it
   doesn't look like a stray "Product Image:" label above a photo. */
@media (max-width: 700px){
  #pg-stock td[data-col="image"]::before{
    display:none !important;
  }
  #pg-stock td[data-col="image"]{
    padding:6px 8px !important;
    text-align:left;
  }
}/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.259 — Day Wise P&L specific styles
════════════════════════════════════════════════════════════════════════════════ */
#pg-day-wise-pl .dwpl-note,
/*__CMT_1345__*/
#pg-customer-wise-pl .dwpl-note,
/*__CMT_1344__*/
#pg-bill-pl .dwpl-note{
  margin-top:14px;
  padding:10px 14px;
  border-top:1px solid var(--bdr, #e5e7eb);
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted, #4b5563);
}#pg-day-wise-pl .dwpl-note-label,
#pg-customer-wise-pl .dwpl-note-label,
#pg-bill-pl .dwpl-note-label{
  font-weight:600;
  color:var(--text, #374151);
  margin-bottom:4px;
}#pg-day-wise-pl .dwpl-date-cell,
#pg-customer-wise-pl .dwpl-date-cell,
#pg-bill-pl .dwpl-date-cell{
  color:var(--brand-dd, var(--brand-dd));
  font-weight:500;
}#pg-day-wise-pl .dwpl-profit-pos,
#pg-customer-wise-pl .dwpl-profit-pos,
#pg-bill-pl .dwpl-profit-pos{
  color:var(--brand-dd, var(--brand-dd));
  font-weight:600;
}#pg-day-wise-pl .dwpl-profit-neg,
#pg-customer-wise-pl .dwpl-profit-neg,
#pg-bill-pl .dwpl-profit-neg{
  color:#dc2626;
  font-weight:600;
}#pg-day-wise-pl .dwpl-total-row td,
#pg-customer-wise-pl .dwpl-total-row td,
#pg-bill-pl .dwpl-total-row td{
  border-top:2px solid var(--bdr, #d1d5db);
  font-weight:700;
  padding-top:10px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.260 — Billing Saathi Assistant (redesigned chat bot)
   ────────────────────────────────────────────────────────────────
   Overrides v3.9.258 chatbot styles with a modern hero + tabbed layout.
   All colours use the plugin's brand-green palette (var(--brand)).
════════════════════════════════════════════════════════════════════════════════ */

/* Panel container — bigger, rounder, no overflow-hidden so the drop shadow flows */
.ma-ai-panel-v2{
  position:fixed;
  bottom:90px;
  right:22px;
  width:min(420px, calc(100vw - 32px));
  height:min(640px, calc(100vh - 130px));
  background:var(--surf, #fff);
  border:1px solid rgba(37,99,235,.12);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.16), 0 6px 20px rgba(37,99,235,.10);
  z-index:99998;
  display:none;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px) scale(.97);
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.ma-ai-panel-v2.open{
  display:flex;
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Tabs row (matches reference — pill-tabs on left, icons on right) */
.ma-ai-tabs{
  display:flex;
  align-items:center;
  padding:12px 12px 8px;
  gap:8px;
  background:var(--surf, #fff);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.ma-ai-tab-list{
  display:inline-flex;
  background:var(--surf2, #f3f4f6);
  border-radius:9px;
  padding:3px;
  flex:1;
  max-width:180px;
}
.ma-ai-tab{
  flex:1;
  background:transparent;
  border:none;
  color:var(--muted, #6b7280);
  padding:6px 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, color .12s, box-shadow .12s;
}
.ma-ai-tab.on{
  background:var(--surf, #fff);
  color:var(--text, #111);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.ma-ai-tab-actions{
  margin-left:auto;
  display:inline-flex;
  gap:4px;
}
.ma-ai-icon-btn{
  width:32px; height:32px;
  border-radius:8px;
  background:transparent;
  border:none;
  color:var(--muted, #6b7280);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  transition:background .12s, color .12s;
}
.ma-ai-icon-btn:hover{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #111);
}

/* Views (chat / history / lang) — stacked, only one visible at a time */
.ma-ai-view{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
.ma-ai-view::-webkit-scrollbar{ width:6px; }
.ma-ai-view::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.10); border-radius:3px; }

/* Hero (top of chat view) */
.ma-ai-hero{
  padding:32px 24px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.ma-ai-logo{
  width:64px;
  height:64px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.04));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-dd, var(--brand-dd));
  margin-bottom:8px;
  box-shadow:0 4px 14px rgba(37,99,235,.14);
}
.ma-ai-brand-name{
  font-size:14px;
  font-weight:600;
  color:var(--brand-dd, var(--brand-dd));
  letter-spacing:.3px;
  text-transform:uppercase;
}
.ma-ai-greeting{
  font-size:22px;
  font-weight:700;
  color:var(--text, #111);
  margin-top:6px;
  line-height:1.25;
}
.ma-ai-subtitle{
  font-size:14px;
  color:var(--muted, #6b7280);
  margin-top:2px;
}

/* Suggestions (sparkle-icon rows, per reference image) */
.ma-ai-suggestions{
  padding:6px 16px;
  display:flex;
  flex-direction:column;
}
.ma-ai-suggestion{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 12px;
  border-bottom:1px solid rgba(0,0,0,.05);
  background:transparent;
  border:none;
  border-radius:0;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  font-size:13.5px;
  color:var(--text, #1f2937);
  line-height:1.5;
  transition:background .12s;
  width:100%;
}
.ma-ai-suggestion:hover{
  background:rgba(37,99,235,.05);
}
.ma-ai-suggestion:last-child{ border-bottom:none; }
.ma-ai-suggestion-icon{
  flex-shrink:0;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-dd, var(--brand-dd));
  margin-top:1px;
}

/* Category chips (horizontal scroll) */
.ma-ai-chips-area{
  padding:8px 0;
  border-top:1px solid rgba(0,0,0,.05);
  background:var(--surf, #fff);
}
.ma-ai-categories{
  display:flex;
  gap:6px;
  padding:4px 14px 6px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ma-ai-categories::-webkit-scrollbar{ display:none; }
.ma-ai-cat{
  flex-shrink:0;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  color:var(--text, #374151);
  padding:6px 14px;
  border-radius:20px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s, color .12s;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.ma-ai-cat:hover{
  background:rgba(37,99,235,.06);
  border-color:rgba(37,99,235,.3);
}
.ma-ai-cat.on{
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.04));
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}
.ma-ai-cat-icon{
  display:inline-flex;
  align-items:center;
  color:var(--brand-dd, var(--brand-dd));
}

/* Follow-up chips (after an answer) */
.ma-ai-followup{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 14px 6px;
  max-height:104px;
  overflow-y:auto;
}
.ma-ai-followup-chip{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #374151);
  border:1px solid var(--bdr, #e5e7eb);
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s, color .12s;
  white-space:normal;
  line-height:1.35;
  max-width:100%;
  text-align:left;
}
.ma-ai-followup-chip:hover{
  background:rgba(37,99,235,.08);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}

/* Messages (once user asks anything) */
.ma-ai-messages{
  flex:1;
  overflow-y:auto;
  padding:12px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ma-ai-msg{
  max-width:88%;
  padding:10px 13px;
  font-size:13.5px;
  line-height:1.55;
  border-radius:14px;
  word-wrap:break-word;
  animation:ma-ai-msg-in .22s cubic-bezier(.16,1,.3,1);
}
@keyframes ma-ai-msg-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
.ma-ai-msg.bot{
  background:var(--surf, #fff);
  color:var(--text, #1f2937);
  border:1px solid rgba(37,99,235,.15);
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
.ma-ai-msg.user{
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border-bottom-right-radius:4px;
  align-self:flex-end;
}
.ma-ai-msg-time{
  font-size:10.5px;
  color:var(--muted, #9ca3af);
  padding:0 4px;
  margin-top:-4px;
}
.ma-ai-msg.user + .ma-ai-msg-time{ text-align:right; }
.ma-ai-msg h4{
  font-size:13px;
  margin:0 0 4px;
  color:var(--brand-dd, var(--brand-dd));
  font-weight:700;
}
.ma-ai-msg .ai-strong{ font-weight:700; color:var(--brand-dd, var(--brand-dd)); }
.ma-ai-msg .ai-num{ font-weight:700; color:var(--text, #111); font-size:15px; }
.ma-ai-msg ul{ margin:6px 0 2px; padding-left:18px; }
.ma-ai-msg li{ margin:2px 0; }
.ma-ai-msg .ai-open-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  padding:6px 14px;
  background:var(--brand, var(--brand));
  color:#fff;
  border:none;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, transform .12s;
}
.ma-ai-msg .ai-open-btn:hover{
  background:var(--brand-dd, var(--brand-dd));
  transform:translateX(2px);
}

.ma-ai-typing{
  align-self:flex-start;
  background:var(--surf, #fff);
  border:1px solid rgba(37,99,235,.15);
  border-radius:14px;
  border-bottom-left-radius:4px;
  padding:12px 16px;
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.ma-ai-typing span{
  width:6px; height:6px;
  background:var(--brand, var(--brand));
  border-radius:50%;
  animation:ma-ai-typing 1.2s ease-in-out infinite;
}
.ma-ai-typing span:nth-child(2){ animation-delay:.15s; }
.ma-ai-typing span:nth-child(3){ animation-delay:.30s; }
@keyframes ma-ai-typing{
  0%,60%,100%{ transform:translateY(0);   opacity:.4; }
  30%        { transform:translateY(-4px); opacity:1;  }
}

/* Input area — rounded with mic-style send button */
.ma-ai-input-wrap{
  padding:8px 14px 12px;
  background:var(--surf, #fff);
  border-top:1px solid rgba(0,0,0,.05);
}
.ma-ai-input-box{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px 6px 16px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #d1d5db);
  border-radius:22px;
  transition:border-color .12s, box-shadow .12s;
}
.ma-ai-input-box:focus-within{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
.ma-ai-input-box input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:8px 0;
  font-size:13.5px;
  font-family:inherit;
  color:var(--text, #111);
}
.ma-ai-input-box input::placeholder{ color:var(--muted, #9ca3af); }
.ma-ai-send{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s, box-shadow .12s;
}
.ma-ai-send:hover{
  transform:scale(1.06);
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.ma-ai-send:active{ transform:scale(.95); }
.ma-ai-disclaimer{
  text-align:center;
  font-size:11px;
  color:var(--muted, #9ca3af);
  margin-top:8px;
  line-height:1.4;
}

/* Language picker view */
.ma-ai-lang-hero{
  padding:26px 24px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ma-ai-lang-title{
  font-size:22px;
  font-weight:700;
  color:var(--text, #111);
  margin-top:6px;
}
.ma-ai-lang-subtitle{
  font-size:13.5px;
  color:var(--muted, #6b7280);
  max-width:280px;
  line-height:1.5;
}
.ma-ai-lang-list{
  flex:1;
  overflow-y:auto;
  padding:8px 12px 16px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.ma-ai-lang-item{
  padding:14px 16px;
  background:var(--surf, #fff);
  border:1.5px solid var(--bdr, #e5e7eb);
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .12s, background .12s, transform .12s;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  text-align:left;
}
.ma-ai-lang-item:hover{
  border-color:var(--brand, var(--brand));
  background:rgba(37,99,235,.04);
  transform:translateY(-1px);
}
.ma-ai-lang-item.selected{
  border-color:var(--brand, var(--brand));
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.02));
}
.ma-ai-lang-native{
  font-size:16px;
  font-weight:700;
  color:var(--text, #111);
  line-height:1.2;
}
.ma-ai-lang-english{
  font-size:11.5px;
  color:var(--muted, #6b7280);
}

/* History view */
.ma-ai-history-hdr{
  padding:14px 18px 10px;
  font-size:13px;
  font-weight:600;
  color:var(--muted, #6b7280);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.ma-ai-history-list{
  flex:1;
  overflow-y:auto;
  padding:0 12px 16px;
}
.ma-ai-history-item{
  padding:12px 14px;
  border-radius:10px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  margin-bottom:6px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
  font-size:13px;
  color:var(--text, #1f2937);
  line-height:1.45;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ma-ai-history-item:hover{
  border-color:var(--brand, var(--brand));
  background:rgba(37,99,235,.04);
}
.ma-ai-history-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--muted, #9ca3af);
  font-size:13px;
}
.ma-ai-history-icon{
  color:var(--brand-dd, var(--brand-dd));
  flex-shrink:0;
  margin-top:2px;
}
.ma-ai-history-time{
  font-size:10.5px;
  color:var(--muted, #9ca3af);
  margin-top:4px;
}

/* Mobile — full-screen sheet */
@media (max-width: 640px){
  .ma-ai-panel-v2{
    bottom:0; right:0; left:0; top:0;
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    border:none;
  }
  .ma-ai-lang-list{ grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.261 — Billing Saathi Assistant improvements
   ──────────────────────────────────────────────────────────────────────────
   Adds:
     • 3-dot settings menu (Change Language / New Chat / Clear History / End Chat)
     • Refined mobile view (proper safe-area, keyboard-friendly, smaller hero,
       compact chips, sticky input, better use of dynamic viewport height)
     • Farewell / end-chat animation
════════════════════════════════════════════════════════════════════════════════ */

/* 3-dot menu container */
.ma-ai-menu-wrap{
  position:relative;
  display:inline-flex;
}
#ma-ai-menu-btn.on{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #111);
}

/* Dropdown menu */
.ma-ai-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:210px;
  background:var(--surf, #fff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.08);
  padding:6px;
  z-index:100000;
  opacity:0;
  transform:translateY(-4px) scale(.98);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s cubic-bezier(.16,1,.3,1);
}
.ma-ai-menu.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.ma-ai-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 12px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text, #111);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.ma-ai-menu-item:hover,
.ma-ai-menu-item:focus-visible{
  background:rgba(37,99,235,.08);
  color:var(--brand-dd, var(--brand-dd));
  outline:none;
}
.ma-ai-menu-item svg{
  flex-shrink:0;
  color:var(--muted, #6b7280);
}
.ma-ai-menu-item:hover svg,
.ma-ai-menu-item:focus-visible svg{
  color:var(--brand-dd, var(--brand-dd));
}
.ma-ai-menu-item.danger{
  color:#dc2626;
}
.ma-ai-menu-item.danger svg{
  color:#dc2626;
}
.ma-ai-menu-item.danger:hover,
.ma-ai-menu-item.danger:focus-visible{
  background:rgba(220,38,38,.08);
  color:#b91c1c;
}
.ma-ai-menu-item.danger:hover svg,
.ma-ai-menu-item.danger:focus-visible svg{
  color:#b91c1c;
}
.ma-ai-menu-sep{
  height:1px;
  background:rgba(0,0,0,.06);
  margin:4px 6px;
}

/* Farewell (End Chat) bubble */
.ma-ai-farewell{
  align-self:center;
  padding:12px 18px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.02));
  border:1px solid rgba(37,99,235,.25);
  border-radius:14px;
  color:var(--brand-dd, var(--brand-dd));
  font-size:13px;
  font-weight:600;
  text-align:center;
  line-height:1.5;
  animation:ma-ai-fadein .35s cubic-bezier(.16,1,.3,1);
  max-width:80%;
}
@keyframes ma-ai-fadein{
  from{ opacity:0; transform:translateY(6px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

/* ─── Mobile fixes ────────────────────────────────────
   The v3.9.260 mobile block only covers width/height. On short devices,
   the hero (32px padding + 64px logo + suggestions + chips + input) can
   exceed the viewport, forcing awkward internal scroll. We tighten
   spacing, use dvh, and keep the input pinned above the safe area. */
@media (max-width: 640px){
  .ma-ai-panel-v2{
    /* Use dvh so it doesn't jump under mobile browser chrome */
    height:100dvh;
    max-height:100dvh;
    /* Fallback for browsers without dvh */
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-sizing:border-box;
  }
  .ma-ai-tabs{
    padding:10px 10px 6px;
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
    gap:6px;
  }
  .ma-ai-tab-list{ max-width:150px; }
  .ma-ai-tab{ padding:5px 10px; font-size:12.5px; }
  .ma-ai-icon-btn{ width:30px; height:30px; }
  .ma-ai-hero{
    padding:18px 20px 12px;
    gap:4px;
  }
  .ma-ai-logo{
    width:52px; height:52px;
    border-radius:14px;
    margin-bottom:4px;
  }
  .ma-ai-logo svg{ width:34px; height:34px; }
  .ma-ai-brand-name{ font-size:12px; }
  .ma-ai-greeting{ font-size:19px; margin-top:2px; }
  .ma-ai-subtitle{ font-size:13px; }
  .ma-ai-suggestions{ padding:2px 12px; }
  .ma-ai-suggestion{
    padding:11px 8px;
    font-size:13px;
    gap:10px;
  }
  .ma-ai-suggestion-icon{ width:20px; height:20px; }
  .ma-ai-chips-area{ padding:6px 0; }
  .ma-ai-categories{ padding:2px 12px 4px; }
  .ma-ai-cat{
    padding:5px 12px;
    font-size:12px;
  }
  .ma-ai-followup{
    padding:2px 12px 4px;
    max-height:88px;
  }
  .ma-ai-followup-chip{
    padding:5px 10px;
    font-size:11.5px;
  }
  .ma-ai-input-wrap{
    padding:6px 12px 10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ma-ai-input-box{
    padding:5px 6px 5px 14px;
  }
  .ma-ai-input-box input{
    font-size:16px; /* Prevent iOS zoom on focus */
  }
  .ma-ai-send{ width:32px; height:32px; }
  .ma-ai-disclaimer{
    font-size:10.5px;
    margin-top:6px;
  }
  .ma-ai-messages{
    padding:10px 12px 6px;
    gap:6px;
  }
  .ma-ai-msg{
    max-width:90%;
    font-size:13px;
    padding:9px 12px;
  }
  /* Menu dropdown on mobile — pull inward so it doesn't clip */
  .ma-ai-menu{
    min-width:200px;
    right:0;
  }
  /* Language picker — a touch smaller & scrollable */
  .ma-ai-lang-hero{ padding:18px 20px 10px; }
  .ma-ai-lang-title{ font-size:19px; }
  .ma-ai-lang-subtitle{ font-size:12.5px; }
  .ma-ai-lang-list{
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:6px 10px 14px;
  }
  .ma-ai-lang-item{
    padding:12px 14px;
    border-radius:10px;
  }
  .ma-ai-lang-native{ font-size:15px; }
  .ma-ai-lang-english{ font-size:11px; }
  /* History */
  .ma-ai-history-hdr{ padding:12px 14px 8px; font-size:12px; }
  .ma-ai-history-list{ padding:0 10px 14px; }
  .ma-ai-history-item{ padding:11px 12px; font-size:12.5px; }
}

/* Very narrow phones (≤360px) */
@media (max-width: 360px){
  .ma-ai-tab-list{ max-width:130px; }
  .ma-ai-tab{ padding:4px 8px; font-size:12px; }
  .ma-ai-icon-btn{ width:28px; height:28px; }
  .ma-ai-hero{ padding:14px 16px 10px; }
  .ma-ai-logo{ width:46px; height:46px; }
  .ma-ai-logo svg{ width:28px; height:28px; }
  .ma-ai-greeting{ font-size:17px; }
  .ma-ai-lang-list{ grid-template-columns:1fr; }
  .ma-ai-tab-actions{ gap:2px; }
}

/* Short viewports (landscape phones, small tablets) */
@media (max-width: 640px) and (max-height: 600px){
  .ma-ai-hero{ padding:10px 20px 6px; }
  .ma-ai-logo{ display:none; }
  .ma-ai-brand-name{ display:none; }
  .ma-ai-greeting{ font-size:17px; margin-top:0; }
  .ma-ai-lang-hero{ padding:10px 20px 6px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.262 — Layout switcher (Sidebar / Floating / Full page)
   ──────────────────────────────────────────────────────────────────────────
   Adds three panel presentations selectable from a small dropdown at the
   top-right of the chat panel:

     • Floating (default) — floating window in the bottom-right corner (the
       existing v3.9.260 behaviour).
     • Sidebar             — docked to the right edge, full viewport height,
       420px wide. Behind-content stays visible for reference.
     • Full page           — fills the entire viewport (like the mobile view
       already did).

   Uses !important to reliably override the base v3.9.260 positioning rules.
   On mobile (≤640px) the switcher is hidden and the panel is forced to
   full-screen regardless of the saved preference.
════════════════════════════════════════════════════════════════════════════════ */

/* Layout-switcher wrap (reuses .ma-ai-menu styling from v3.9.261) */
.ma-ai-layout-wrap{
  position:relative;
  display:inline-flex;
}
#ma-ai-layout-btn.on{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #111);
}

/* Layout dropdown — check mark on the selected option */
.ma-ai-menu-layout .ma-ai-menu-item{
  padding-left:36px;
  position:relative;
}
.ma-ai-menu-layout .ma-ai-layout-check-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--brand-dd, var(--brand-dd));
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.ma-ai-menu-layout .ma-ai-menu-item.on .ma-ai-layout-check-icon{
  opacity:1;
}
.ma-ai-menu-layout .ma-ai-menu-item.on .ma-ai-layout-label{
  color:var(--brand-dd, var(--brand-dd));
  font-weight:600;
}
.ma-ai-menu-layout .ma-ai-menu-item.on{
  background:rgba(37,99,235,.06);
}
.ma-ai-menu-layout .ma-ai-menu-item.on:hover,
.ma-ai-menu-layout .ma-ai-menu-item.on:focus-visible{
  background:rgba(37,99,235,.10);
}

/* Floating (default) — no-op class marker; base .ma-ai-panel-v2 rules apply.
   We still enumerate it so JS can add/remove a consistent set of classes. */
.ma-ai-panel-v2.layout-floating{
  /* Explicitly re-assert the defaults so switching BACK to floating from
     sidebar/fullpage cleanly restores the floating look. Without these,
     the removed !important overrides would leave residual layout state. */
  bottom:90px !important;
  right:22px !important;
  left:auto !important;
  top:auto !important;
  width:min(420px, calc(100vw - 32px)) !important;
  height:min(640px, calc(100vh - 130px)) !important;
  max-height:calc(100vh - 130px) !important;
  border-radius:20px !important;
  border:1px solid rgba(37,99,235,.12) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.16), 0 6px 20px rgba(37,99,235,.10) !important;
}

/* Sidebar — docked to the right edge, full viewport height */
.ma-ai-panel-v2.layout-sidebar{
  top:0 !important;
  bottom:0 !important;
  right:0 !important;
  left:auto !important;
  width:min(420px, 100vw) !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:100vh !important;
  border-radius:0 !important;
  border:none !important;
  border-left:1px solid rgba(37,99,235,.14) !important;
  box-shadow:-10px 0 30px rgba(0,0,0,.08), -2px 0 10px rgba(37,99,235,.08) !important;
}

/* Full page — fills the entire viewport */
.ma-ai-panel-v2.layout-fullpage{
  top:0 !important;
  bottom:0 !important;
  right:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:100vh !important;
  border-radius:0 !important;
  border:none !important;
  box-shadow:none !important;
}

/* Widen the language grid on full-page so it doesn't look cramped */
.ma-ai-panel-v2.layout-fullpage .ma-ai-lang-list{
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  max-width:900px;
  margin:0 auto;
}
.ma-ai-panel-v2.layout-fullpage .ma-ai-messages,
.ma-ai-panel-v2.layout-fullpage .ma-ai-suggestions,
.ma-ai-panel-v2.layout-fullpage .ma-ai-input-wrap,
.ma-ai-panel-v2.layout-fullpage .ma-ai-chips-area,
.ma-ai-panel-v2.layout-fullpage .ma-ai-hero{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.ma-ai-panel-v2.layout-fullpage .ma-ai-hero{
  padding-top:52px;
}

/* Mobile — always full-screen; hide the layout switcher regardless of pref */
@media (max-width: 640px){
  .ma-ai-layout-wrap{ display:none !important; }
  .ma-ai-panel-v2,
  .ma-ai-panel-v2.layout-sidebar,
  .ma-ai-panel-v2.layout-fullpage,
  .ma-ai-panel-v2.layout-floating{
    top:0 !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }
  .ma-ai-panel-v2.layout-fullpage .ma-ai-lang-list{
    grid-template-columns:repeat(2, 1fr);
    max-width:none;
  }
  .ma-ai-panel-v2.layout-fullpage .ma-ai-hero,
  .ma-ai-panel-v2.layout-fullpage .ma-ai-messages,
  .ma-ai-panel-v2.layout-fullpage .ma-ai-suggestions,
  .ma-ai-panel-v2.layout-fullpage .ma-ai-input-wrap,
  .ma-ai-panel-v2.layout-fullpage .ma-ai-chips-area{
    max-width:none;
  }
  .ma-ai-panel-v2.layout-fullpage .ma-ai-hero{ padding-top:18px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.263 — Billing Saathi Chat: polished FAB + branding + broader KB polish
   ──────────────────────────────────────────────────────────────────────────
   Adds:
     • Refined floating action button (FAB): layered icon, gradient sheen,
       continuous soft "breathe" animation, dual-ring pulse for attention.
     • First-visit greeting pill next to the FAB.
     • "Powered by Diginest Solution" footer on the chat + language-picker views.
     • Slightly larger, denser suggestions list to fit the expanded KB.
════════════════════════════════════════════════════════════════════════════════ */

/* Wrap holds the FAB + attention pulses + greeting pill together.
   Fixed-position on the same spot the original FAB used. */
.ma-ai-fab-wrap{
  position:fixed;
  /* v3.9.374 — Bumped from 22px → 88px so the FAB sits ABOVE the
     Save / Save & Print button row on invoice / purchase / quotation
     edit pages. Previously 22px placed the FAB right on top of the
     Save button, forcing the user to move the mouse around the FAB
     just to click Save. 88px gives ~66px vertical clearance — enough
     for the typical action-row height (48–56px plus padding) with
     room to spare. On dashboard / list pages the FAB simply sits a
     bit higher, which reads as more polished, not disruptive. */
  bottom:88px;
  right:22px;
  z-index:99998;
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction:row-reverse; /* Pill sits to the LEFT of the FAB */
}

/* v3.9.263 — Refined FAB.
   Overrides the v3.9.258 rule because we now sit inside .ma-ai-fab-wrap
   and no longer want position:fixed on the button itself. */
/* ══════════════════════════════════════════════════════════════════════════
   v3.9.328 — REDESIGNED AI FAB — white bubble with BS bot artwork
   • White circular background in light mode, dark navy in dark mode
   • Blue orbit ring rotating around the FAB (matches the video reference)
   • When the chat panel is open, the icon crossfades to a close-X so
     users can tap the same spot to dismiss the chatbot
   • Removed the old ripple pulses + orbit particles
════════════════════════════════════════════════════════════════════════════ */
.ma-ai-fab{
  position:relative !important;
  bottom:auto !important;
  right:auto !important;
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:var(--brand) !important;
  border:none !important;
  cursor:pointer;
  box-shadow:
    0 8px 22px rgba(37,99,235,.24),
    0 3px 8px rgba(15,23,42,.10) !important;
  z-index:2;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
  padding:0 !important;
}
.ma-ai-fab::after{ display:none !important; }
.ma-ai-fab:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 14px 32px rgba(37,99,235,.32),
    0 4px 10px rgba(15,23,42,.12) !important;
}
.ma-ai-fab:active{ transform:translateY(0) scale(.96); }

/* BS bot image — fills most of the button, sits on white bg */
.ma-ai-fab-icon-img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.ma-ai-fab-icon-fallback{
  position:relative;
  z-index:2;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

/* Close ✕ overlay — hidden by default, revealed when the panel is open */
.ma-ai-fab-close{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.6) rotate(-90deg);
  color:var(--brand);
  z-index:3;
  opacity:0;
  transition:opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
/* When the chatbot is open, swap: hide the BS artwork, show the close ✕ */
.ma-ai-fab.open .ma-ai-fab-icon-img,
.ma-ai-fab.open .ma-ai-fab-icon-fallback{
  opacity:0;
  transform:scale(.6) rotate(90deg);
}
.ma-ai-fab.open .ma-ai-fab-close{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
  pointer-events:auto;
}
.ma-ai-fab.open .ma-ai-fab-dot{ opacity:0; }

/* v3.9.329 — REDESIGNED FAB ANIMATION (matches video reference)
   • Soft PULSING RIPPLES emanating outward (radar/sonar pulse style)
     instead of the previous orbit ring + planet
   • When the chat panel opens, the FAB transforms into a filled
     colored circle with a white close ✕ (same footprint, big visible X)
   • Ripples pause automatically when the panel is open */
.ma-ai-fab-ring{
  position:absolute;
  top:50%; right:31px;                            /* Center on the FAB */
  width:62px; height:62px;
  transform:translate(50%,-50%);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
/* Three concentric pulses staggered in time */
.ma-ai-fab-ring::before,
.ma-ai-fab-ring::after,
.ma-ai-fab-ring-planet{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(37,99,235,.28);
  animation:ma-ai-fab-pulse 2.4s cubic-bezier(.2,.65,.4,1) infinite;
  pointer-events:none;
}
.ma-ai-fab-ring::after{
  animation-delay:.8s;
  background:rgba(37,99,235,.22);
}
.ma-ai-fab-ring-planet{
  animation-delay:1.6s;
  background:rgba(37,99,235,.16);
  /* Reset the planet dot styling that was there before */
  top:0; left:0; width:auto; height:auto;
  box-shadow:none;
  transform:none;
}
@keyframes ma-ai-fab-pulse{
  0%   { transform:scale(1);   opacity:.85; }
  70%  { transform:scale(1.9); opacity:0; }
  100% { transform:scale(1.9); opacity:0; }
}
/* Hide the pulse ripples when the panel is open — the red X takes over */
.ma-ai-fab-wrap:has(.ma-ai-fab.open) .ma-ai-fab-ring,
.ma-ai-fab-wrap.open-mode .ma-ai-fab-ring{
  opacity:0;
  transition:opacity .2s ease;
}

/* ── FAB OPEN STATE — filled circle + big close ✕ ────────────────
   When the chat panel is open, the entire button turns solid red-ish
   (danger red matching the palette) with a big white X, so tapping it
   feels like an unmistakable "close" action. */
.ma-ai-fab.open{
  background:#EF4444 !important;               /* danger red */
  box-shadow:
    0 8px 22px rgba(239,68,68,.35),
    0 3px 8px rgba(15,23,42,.12) !important;
}
.ma-ai-fab.open:hover{
  background:#DC2626 !important;
  box-shadow:
    0 14px 32px rgba(239,68,68,.45),
    0 4px 10px rgba(15,23,42,.14) !important;
}
.ma-ai-fab.open .ma-ai-fab-close{
  color:#ffffff !important;                     /* white X on red */
}

/* Online green dot (top-right of the badge) */
.ma-ai-fab-dot{
  position:absolute;
  top:2px; right:2px;
  width:14px; height:14px;
  background:#22C55E;
  border:2.5px solid #ffffff;
  border-radius:50%;
  z-index:3;
  box-shadow:0 0 0 2px rgba(34,197,94,.28);
  transition:opacity .18s ease;
}

/* ═════ DARK MODE ═════ */
html[data-theme="dark"] .ma-ai-fab{
  background:#1E293B !important;
  color:#93C5FD !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.3) !important;
}
html[data-theme="dark"] .ma-ai-fab:hover{
  box-shadow:
    0 14px 32px rgba(0,0,0,.6),
    0 4px 10px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .ma-ai-fab-close{ color:#ffffff; }
html[data-theme="dark"] .ma-ai-fab-dot{ border-color:#1E293B; }
/* Open state — red X — needs to win over the dark base bg too */
html[data-theme="dark"] .ma-ai-fab.open{
  background:#EF4444 !important;
  box-shadow:
    0 8px 22px rgba(239,68,68,.42),
    0 3px 8px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .ma-ai-fab.open:hover{
  background:#DC2626 !important;
}
/* Pulse ripples — brighter blue for dark bg */
html[data-theme="dark"] .ma-ai-fab-ring::before{ background:rgba(96,165,250,.36); }
html[data-theme="dark"] .ma-ai-fab-ring::after { background:rgba(96,165,250,.28); }
html[data-theme="dark"] .ma-ai-fab-ring-planet { background:rgba(96,165,250,.22); }

/* Reduced-motion — freeze the orbit */
@media (prefers-reduced-motion: reduce){
  .ma-ai-fab-ring,
  .ma-ai-fab-ring::before{ animation:none !important; }
}

/* Compact FAB on small screens */
@media(max-width:640px){
  .ma-ai-fab{ width:56px !important; height:56px !important; }
  .ma-ai-fab-icon-img{ width:46px; height:46px; }
  .ma-ai-fab-ring{ width:56px; height:56px; right:28px; }
}
/* ══════════ END v3.9.328 AI FAB redesign ══════════ */

/* First-visit greeting pill */
.ma-ai-fab-greet{
  display:none;   /* Toggled by JS */
  align-items:center;
  gap:8px;
  padding:9px 34px 9px 14px;   /* Room for the ✕ button */
  background:var(--surf, #fff);
  color:var(--text, #111);
  border:1px solid rgba(37,99,235,.28);
  border-radius:22px;
  box-shadow:0 10px 22px rgba(0,0,0,.10), 0 2px 6px rgba(37,99,235,.10);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  animation:ma-ai-greet-in .5s cubic-bezier(.16,1,.3,1);
  max-width:240px;
}
.ma-ai-fab-greet.show{ display:inline-flex; }
.ma-ai-fab-greet:hover{
  border-color:var(--brand, var(--brand));
  transform:translateY(-1px);
}
.ma-ai-fab-greet-text{
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-ai-fab-greet-close{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:20px; height:20px;
  border-radius:50%;
  background:var(--surf2, #f3f4f6);
  border:none;
  color:var(--muted, #6b7280);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-family:inherit;
  transition:background .12s, color .12s;
}
.ma-ai-fab-greet-close:hover{
  background:#e5e7eb;
  color:var(--text, #111);
}
@keyframes ma-ai-greet-in{
  from{ opacity:0; transform:translateX(10px) scale(.9); }
  to  { opacity:1; transform:translateX(0)     scale(1);  }
}

/* Notification dot on FAB — re-position for new wrap layout */
.ma-ai-fab-dot{
  top:6px !important;
  right:6px !important;
}

/* Powered-by branding — used in both chat + lang picker */
.ma-ai-powered-by{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 12px 10px;
  font-size:10.5px;
  color:var(--muted, #9ca3af);
  letter-spacing:.15px;
  user-select:none;
}
.ma-ai-powered-brand{
  color:var(--brand-dd, var(--brand-dd));
  font-weight:700;
  letter-spacing:.2px;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* In the lang picker, pin to bottom */
#ma-ai-powered-by-lang{
  margin-top:auto;
  padding-top:12px;
  padding-bottom:14px;
  border-top:1px solid rgba(0,0,0,.04);
  background:var(--surf, #fff);
}

/* Mobile — FAB smaller and repositioned above bottom nav */
@media (max-width: 640px){
  .ma-ai-fab-wrap{
    bottom:calc(66px + env(safe-area-inset-bottom, 0px));
    right:14px;
    gap:8px;
  }
  .ma-ai-fab{ width:52px !important; height:52px !important; }
  .ma-ai-fab-icon{ width:22px; height:22px; }
  .ma-ai-fab-pulse{
    width:52px; height:52px;
    right:24px;
  }
  .ma-ai-fab-greet{
    font-size:12px;
    padding:8px 30px 8px 12px;
    max-width:170px;
  }
  .ma-ai-fab-greet-close{ width:18px; height:18px; }
  .ma-ai-powered-by{ font-size:10px; padding:4px 10px 8px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.266 — Daily Expenses Report — page-specific overrides
   ──────────────────────────────────────────────────────────────────────────
   Reused the shared .sr-card / .sr-fg / .sr-btn etc. system; this block only
   adds what the reference screenshots need on top of it:
     • 5-column filter grid (Staff Name, Category, Title, From, To) with
       Payment Type wrapping onto row 2 by itself.
     • "Customize Report" toggled block: white search input on top,
       4-column checkbox grid below.
════════════════════════════════════════════════════════════════════════════════ */

/* 5 columns on wide screens, matching the reference layout.
   Row 2 starts naturally with "Payment Type" only. */
#pg-daily-expenses-report .der-fg-5col{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:16px 20px;
}
@media (max-width: 1100px){
  #pg-daily-expenses-report .der-fg-5col{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #pg-daily-expenses-report .der-fg-5col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  #pg-daily-expenses-report .der-fg-5col{ grid-template-columns:1fr; }
}

/* Customize Report block */
#pg-daily-expenses-report .der-cust-block{
  padding:14px 20px 18px;
  border-top:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
}
#pg-daily-expenses-report .der-cust-search{
  width:100%;
  height:42px;
  padding:8px 14px;
  border:1.5px solid var(--brand, var(--brand));
  border-radius:8px;
  font-size:14px;
  outline:none;
  margin-bottom:14px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  box-sizing:border-box;
}
#pg-daily-expenses-report .der-cust-search:focus{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}
#pg-daily-expenses-report .der-cust-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px 20px;
}
@media (max-width: 1100px){
  #pg-daily-expenses-report .der-cust-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #pg-daily-expenses-report .der-cust-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  #pg-daily-expenses-report .der-cust-grid{ grid-template-columns:1fr; }
}
#pg-daily-expenses-report .der-cust-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:14px;
  color:var(--text, #111);
  font-weight:500;
  cursor:pointer;
  user-select:none;
}
#pg-daily-expenses-report .der-cust-grid label input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
  accent-color:var(--brand, var(--brand));
  flex-shrink:0;
}
#pg-daily-expenses-report .der-cust-grid label span{
  line-height:1.3;
}

/* Ensure the active-state border on the header buttons is subtle (matches
   the reference: the buttons stay outlined even when the block is open). */
#pg-daily-expenses-report .sr-hdr-btn.is-active{
  background:rgba(37,99,235,.08);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.267 — Product Wise P&L Report — page-specific overrides
   ──────────────────────────────────────────────────────────────────────────
   4-column filter grid (Products / Product Group / From / To), no toggle
   buttons in the header (report is simpler), and the results table wants
   the classic "top rows in green, total row bold underlined" look.
════════════════════════════════════════════════════════════════════════════════ */

#pg-product-wise-pl .pwp-fg-4col{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px 20px;
}
@media (max-width: 1100px){
  #pg-product-wise-pl .pwp-fg-4col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #pg-product-wise-pl .pwp-fg-4col{ grid-template-columns:1fr; }
}

/* Chip field: allow it to grow tall so multiple picks wrap onto extra lines,
   like the reference (3 chips shown). */
#pg-product-wise-pl .sr-chip-field,
#pg-daily-expenses-report .sr-chip-field{
  min-height:44px;
  padding:6px 8px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
#pg-product-wise-pl .sr-chip-field input,
#pg-daily-expenses-report .sr-chip-field input{
  border:none !important;
  padding:2px 4px !important;
  flex:1 1 80px;
  min-width:80px;
  outline:none;
  background:transparent;
}
#pg-product-wise-pl .sr-chip-field:focus-within,
#pg-daily-expenses-report .sr-chip-field:focus-within{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}

/* Profit/Loss column colouring — green profit, red loss */
#pg-product-wise-pl .pwp-tbl .pwp-profit{ color:var(--brand); font-weight:600; }
#pg-product-wise-pl .pwp-tbl .pwp-loss  { color:#dc2626; font-weight:600; }

/* Total row */
#pg-product-wise-pl .pwp-tbl tfoot td{
  border-top:2px solid var(--text, #111);
  border-bottom:2px solid var(--text, #111);
  padding-top:14px;
  padding-bottom:14px;
  font-weight:700;
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.268 — FAB polish + calmer animation
   ──────────────────────────────────────────────────────────────────────────
   Fixes the v3.9.263 FAB visuals per user feedback:
     • The continuous dual pulse rings were visually noisy — replaced with
       a single, gentle ring that fires ONCE (on first appearance + when
       the greeting pill first shows) via the .attention class, not
       infinite loops.
     • FAB button gets a cleaner, richer gradient + softer shadow, plus a
       very subtle breathing animation (2px vertical drift over 5s).
     • Smooth reappearance animation when the chat panel closes.
     • Nicer greeting-pill slide-in from the right of the pill (visually
       "pointing at" the FAB).
════════════════════════════════════════════════════════════════════════════════ */

/* Turn OFF the old continuous pulse loop — hide by default */
.ma-ai-fab-pulse,
.ma-ai-fab-pulse-2{
  display:none !important;
}

/* Re-enable a single, softer ring ONLY when explicitly triggered.
   JS adds `.ma-ai-fab-wrap.attention` for the first ~4s after the FAB or
   the greeting pill appear. */
.ma-ai-fab-wrap.attention .ma-ai-fab-pulse{
  display:block !important;
  position:absolute;
  top:50%;
  right:29px;                 /* FAB is 58px wide, right:22 in wrap → center @ 22+29 */
  transform:translate(50%, -50%);
  width:58px; height:58px;
  border-radius:50%;
  background:var(--brand, var(--brand));
  opacity:0;
  pointer-events:none;
  z-index:1;
  animation:ma-ai-fab-pulse-once 1.8s cubic-bezier(.16,1,.3,1) forwards;
}
.ma-ai-fab-wrap.attention .ma-ai-fab-pulse-2{
  display:block !important;
  position:absolute;
  top:50%;
  right:29px;
  transform:translate(50%, -50%);
  width:58px; height:58px;
  border-radius:50%;
  background:var(--brand, var(--brand));
  opacity:0;
  pointer-events:none;
  z-index:1;
  animation:ma-ai-fab-pulse-once 1.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.9s;
}
@keyframes ma-ai-fab-pulse-once{
  0%   { opacity:.28; transform:translate(50%, -50%) scale(1);   }
  100% { opacity:0;   transform:translate(50%, -50%) scale(2);   }
}

/* v3.9.328 — Old blue-gradient background removed. The FAB now uses the
   white bubble defined earlier (with dark-navy in dark mode) so the BS
   bot artwork is visible on a proper backdrop. Kept the breathing motion
   and softer shadow. */
.ma-ai-fab{
  box-shadow:
    0 8px 22px rgba(37,99,235,.24),
    0 3px 8px rgba(15,23,42,.10) !important;
  animation:ma-ai-fab-breathe-soft 5s ease-in-out infinite !important;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .22s ease !important;
}
@keyframes ma-ai-fab-breathe-soft{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-1.5px); }
}
.ma-ai-fab::after{ display:none !important; }
.ma-ai-fab:hover{
  transform:translateY(-4px) scale(1.06) !important;
  box-shadow:
    0 14px 28px rgba(37,99,235,.32),
    0 4px 10px rgba(15,23,42,.12) !important;
  animation-play-state:paused;
}
.ma-ai-fab:active{
  transform:translateY(-1px) scale(.97) !important;
  transition-duration:.08s !important;
}

/* Smooth reappearance when the chat panel closes (or the FAB first mounts).
   JS adds `.reveal` for ~500ms on those transitions. */
.ma-ai-fab-wrap.reveal .ma-ai-fab{
  animation: ma-ai-fab-reveal .55s cubic-bezier(.34,1.56,.64,1) both,
             ma-ai-fab-breathe-soft 5s ease-in-out 0.55s infinite !important;
}
@keyframes ma-ai-fab-reveal{
  0%   { opacity:0; transform:translateY(24px) scale(.6); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.06); }
  100% { opacity:1; transform:translateY(0)  scale(1); }
}

/* Greeting pill — nicer slide-in from the right (pointing towards the FAB) */
.ma-ai-fab-greet{
  animation:ma-ai-greet-in-v2 .5s cubic-bezier(.34,1.56,.64,1) both !important;
  transform-origin:100% 50%;
}
@keyframes ma-ai-greet-in-v2{
  0%   { opacity:0; transform:translateX(20px) scale(.85); }
  70%  { opacity:1; transform:translateX(-2px) scale(1.02); }
  100% { opacity:1; transform:translateX(0)   scale(1); }
}
.ma-ai-fab-greet.hiding{
  animation:ma-ai-greet-out-v2 .28s ease-in both !important;
}
@keyframes ma-ai-greet-out-v2{
  0%   { opacity:1; transform:translateX(0) scale(1); }
  100% { opacity:0; transform:translateX(18px) scale(.9); }
}

/* Give the FAB icon a tiny wiggle when the pill first appears — draws
   the eye without being obnoxious. */
.ma-ai-fab-wrap.attention .ma-ai-fab-icon{
  animation:ma-ai-fab-icon-nudge .9s cubic-bezier(.36,.07,.19,.97) 1;
}
@keyframes ma-ai-fab-icon-nudge{
  0%, 100% { transform:rotate(0); }
  20%      { transform:rotate(-8deg); }
  40%      { transform:rotate(6deg); }
  60%      { transform:rotate(-4deg); }
  80%      { transform:rotate(2deg); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.269 — Daily Expenses & Expense Category list redesign
   ──────────────────────────────────────────────────────────────────────────
   Matches the reference screenshots:
     • Clean table with checkbox column + Action column trailing.
     • Action header has a small "columns" icon that opens a right-side
       drawer for selecting visible columns (with toggle switches).
     • Each row's Action cell: "View / Print" pill + "Edit" pill grouped
       with a caret button that opens a small dropdown menu (Delete etc.).
     • Green "Active" status text on the Category page.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Table shell ──────────────────────────────────────────────────── */
#pg-daily-expense .de-tbl-v269,
#pg-expense-category .ec-tbl-v269{
  width:100%;
  border-collapse:collapse;
  background:var(--surf, #fff);
  font-size:14px;
}
#pg-daily-expense .de-tbl-v269 thead th,
#pg-expense-category .ec-tbl-v269 thead th{
  padding:14px 16px;
  text-align:left;
  font-weight:700;
  font-size:13.5px;
  color:var(--text, #111);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:transparent;
  white-space:nowrap;
}
#pg-daily-expense .de-tbl-v269 tbody td,
#pg-expense-category .ec-tbl-v269 tbody td{
  padding:16px;
  border-bottom:1px solid var(--bdr, #f1f2f4);
  vertical-align:middle;
  color:var(--text, #111);
}
#pg-daily-expense .de-tbl-v269 tbody tr:last-child td,
#pg-expense-category .ec-tbl-v269 tbody tr:last-child td{
  border-bottom:none;
}
#pg-daily-expense .de-tbl-v269 tbody tr:hover td,
#pg-expense-category .ec-tbl-v269 tbody tr:hover td{
  background:rgba(37,99,235,.03);
}

/* Checkbox columns are narrow */
#pg-daily-expense .de-th-check,
#pg-daily-expense .de-td-check,
#pg-expense-category .ec-th-check,
#pg-expense-category .ec-td-check{
  width:36px;
  padding-left:20px;
  padding-right:8px;
}
#pg-daily-expense .de-tbl-v269 input[type="checkbox"],
#pg-expense-category .ec-tbl-v269 input[type="checkbox"]{
  width:15px; height:15px;
  cursor:pointer;
  accent-color:var(--brand, var(--brand));
}

/* Amount cell — right-aligned numeric feel (like reference) */
#pg-daily-expense .de-td-amt{
  font-weight:500;
  color:var(--text, #111);
}

/* Action column: header shows label + column-picker icon */
#pg-daily-expense .de-th-action,
#pg-expense-category .ec-th-action{
  text-align:right;
  padding-right:22px;
}
#pg-daily-expense .de-th-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
#pg-daily-expense .de-th-action-lbl{ flex:none; }
#pg-daily-expense .de-col-picker-btn{
  width:28px; height:28px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted, #6b7280);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, color .12s, border-color .12s;
}
#pg-daily-expense .de-col-picker-btn:hover{
  background:rgba(37,99,235,.08);
  color:var(--brand-dd, var(--brand-dd));
  border-color:rgba(37,99,235,.25);
}

/* Action-cell content: View/Print + [Edit ▾] button group */
#pg-daily-expense .de-td-action,
#pg-expense-category .ec-td-action{
  text-align:right;
  padding-right:20px;
}
#pg-daily-expense .de-row-actions,
#pg-expense-category .de-row-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#pg-daily-expense .de-btn-view{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
}
#pg-daily-expense .de-btn-view:hover{
  background:#f9fafb;
  border-color:#d1d5db;
}
#pg-daily-expense .de-btn-view svg{ flex:none; }

#pg-daily-expense .de-btn-group,
#pg-expense-category .de-btn-group{
  display:inline-flex;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  overflow:hidden;
}
#pg-daily-expense .de-btn-edit,
#pg-expense-category .de-btn-edit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-size:13px;
  font-weight:500;
  border:none;
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
}
#pg-daily-expense .de-btn-edit:hover,
#pg-expense-category .de-btn-edit:hover{ background:#f9fafb; }
#pg-daily-expense .de-btn-edit svg,
#pg-expense-category .de-btn-edit svg{ flex:none; }

#pg-daily-expense .de-btn-caret,
#pg-expense-category .de-btn-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  background:var(--surf, #fff);
  color:var(--muted, #6b7280);
  border:none;
  border-left:1px solid var(--bdr, #e5e7eb);
  cursor:pointer;
  transition:background .12s, color .12s;
}
#pg-daily-expense .de-btn-caret:hover,
#pg-expense-category .de-btn-caret:hover{
  background:#f9fafb;
  color:var(--text, #111);
}

/* Row-action popover (Delete etc.) */
.de-row-menu-pop{
  position:absolute;
  z-index:99999;
  min-width:140px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  padding:4px;
  animation:de-menu-pop-in .12s ease-out;
}
@keyframes de-menu-pop-in{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0);    }
}
.de-row-menu-pop button{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 12px;
  background:transparent;
  border:none;
  color:var(--text, #111);
  font-size:13.5px;
  cursor:pointer;
  border-radius:5px;
  transition:background .1s;
}
.de-row-menu-pop button:hover{ background:#f3f4f6; }
.de-row-menu-pop button.danger{ color:#dc2626; }
.de-row-menu-pop button.danger:hover{ background:#fef2f2; }

/* ── Expense Category: green "Active" text ────────────────────────── */
#pg-expense-category .ec-status-active{
  color:var(--brand);
  font-weight:500;
  font-size:14px;
}
#pg-expense-category .ec-status-inactive{
  color:#9ca3af;
  font-weight:500;
  font-size:14px;
}

/* ── Column-picker drawer ─────────────────────────────────────────── */
.de-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:99997;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.de-drawer-backdrop.show{
  opacity:1;
  visibility:visible;
}
.de-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(420px, 92vw);
  background:var(--surf, #fff);
  z-index:99998;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:-20px 0 40px rgba(0,0,0,.15);
}
.de-drawer.open{ transform:translateX(0); }
.de-drawer-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
}
.de-drawer-title{
  font-size:17px;
  font-weight:700;
  color:var(--text, #111);
}
.de-drawer-close{
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--muted, #6b7280);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, color .12s;
}
.de-drawer-close:hover{
  background:#f3f4f6;
  color:var(--text, #111);
}
.de-drawer-body{
  flex:1;
  overflow-y:auto;
  padding:10px 6px;
}
.de-drawer-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:10px;
  transition:background .12s;
}
.de-drawer-row:hover{ background:#f9fafb; }
.de-drawer-handle{
  color:var(--muted, #9ca3af);
  cursor:grab;
  flex:none;
  display:inline-flex;
}
.de-drawer-lbl{
  flex:1;
  font-size:14px;
  color:var(--text, #111);
  line-height:1.35;
}

/* Toggle switch */
.de-switch{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
  flex:none;
  cursor:pointer;
}
.de-switch input{ opacity:0; width:0; height:0; }
.de-switch-slider{
  position:absolute;
  inset:0;
  background:#e5e7eb;
  border-radius:24px;
  transition:background .18s;
}
.de-switch-slider::before{
  content:'';
  position:absolute;
  height:18px; width:18px;
  left:3px; top:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.de-switch input:checked + .de-switch-slider{ background:var(--brand, var(--brand)); }
.de-switch input:checked + .de-switch-slider::before{ transform:translateX(18px); }

.de-drawer-ftr{
  display:flex;
  gap:10px;
  padding:16px 22px;
  border-top:1px solid var(--bdr, #e5e7eb);
  justify-content:flex-end;
}
.de-drawer-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.de-drawer-close-btn{
  background:var(--surf, #fff);
  color:var(--text, #111);
  border-color:var(--bdr, #d1d5db);
}
.de-drawer-close-btn:hover{
  background:#f9fafb;
  border-color:#9ca3af;
}
.de-drawer-save-btn{
  background:var(--brand, var(--brand));
  color:#fff;
  border-color:var(--brand, var(--brand));
  box-shadow:0 2px 6px rgba(37,99,235,.24);
}
.de-drawer-save-btn:hover{
  background:var(--brand-dd, var(--brand-dd));
  border-color:var(--brand-dd, var(--brand-dd));
}

@media (max-width: 640px){
  #pg-daily-expense .de-tbl-v269 thead th,
  #pg-expense-category .ec-tbl-v269 thead th{
    padding:12px 10px;
    font-size:12.5px;
  }
  #pg-daily-expense .de-tbl-v269 tbody td,
  #pg-expense-category .ec-tbl-v269 tbody td{
    padding:12px 10px;
  }
  #pg-daily-expense .de-btn-view,
  #pg-daily-expense .de-btn-edit,
  #pg-expense-category .de-btn-edit{
    padding:6px 10px;
    font-size:12.5px;
  }
  .de-drawer{ width:100vw; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.270 — Daily Expenses list — pixel-level polish to match the reference
   ──────────────────────────────────────────────────────────────────────────
   Per-user feedback ("still not perfect"), overriding v3.9.269 details:
     • Row padding tighter — 14px vertical instead of 16px
     • Amount column: regular weight (reference is not bold)
     • ALL body-td text forced to var(--text) so nothing bleeds an accent color
     • View/Print + Edit buttons share equal min-width → right edges align
       cleanly regardless of label length
     • Vertical gap between stacked action buttons reduced (was 8px → 6px)
     • Column-picker icon slightly larger (18→20px), bolder strokes
     • Header padding tightened; font-size and weight refined
     • Button font-size bumped to 13.5px, radius bumped to 7px
════════════════════════════════════════════════════════════════════════════════ */

/* ── Tighter, cleaner rows ──────────────────────────────────────── */
#pg-daily-expense .de-tbl-v269 thead th{
  padding:14px 16px 12px !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:var(--text, #111) !important;
  letter-spacing:.1px;
}
#pg-daily-expense .de-tbl-v269 tbody td{
  padding:14px 16px !important;
  color:var(--text, #111) !important;
  font-size:13.5px !important;
  font-weight:400 !important;      /* undo the 500 that made Amount bold */
  vertical-align:middle !important;
}
#pg-daily-expense .de-tbl-v269 tbody td.de-td-amt{
  font-weight:400 !important;
}

/* ── Action column — equal-width, cleanly right-aligned buttons ── */
#pg-daily-expense .de-td-action{
  padding:12px 22px 12px 16px !important;
  min-width:180px;
  vertical-align:middle !important;
}
#pg-daily-expense .de-row-actions{
  display:flex !important;
  flex-direction:column !important;   /* stack: View/Print on top, Edit-group below */
  gap:6px !important;
  align-items:stretch !important;
  justify-content:center;
  width:100%;
  max-width:150px;
  margin-left:auto;                    /* right-align inside the cell */
  flex-wrap:nowrap !important;
}
#pg-daily-expense .de-btn-view{
  min-width:140px;
  justify-content:center;
  padding:8px 14px !important;
  border-radius:7px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  gap:8px !important;
}
#pg-daily-expense .de-btn-group{
  border-radius:7px !important;
  min-width:140px;
  align-self:stretch;
}
#pg-daily-expense .de-btn-edit{
  flex:1;
  justify-content:center;
  padding:8px 14px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  gap:8px !important;
}
#pg-daily-expense .de-btn-caret{
  width:32px;
  padding:0 !important;
}

/* ── Column-picker icon (Action header) — cleaner, more prominent ── */
#pg-daily-expense .de-th-action{
  padding:12px 22px 12px 8px !important;
  text-align:right;
}
#pg-daily-expense .de-th-action-lbl{
  font-weight:600 !important;
  font-size:13px !important;
}
#pg-daily-expense .de-col-picker-btn{
  width:30px !important;
  height:30px !important;
  border-radius:6px !important;
  color:var(--text, #111) !important;
}
#pg-daily-expense .de-col-picker-btn svg{
  width:20px;
  height:20px;
  stroke-width:1.75;
}

/* Hover: subtle, no colour shift */
#pg-daily-expense .de-tbl-v269 tbody tr:hover td{
  background:#fafbfc !important;
}

/* Header/first-column checkbox column: less padding to keep it compact */
#pg-daily-expense .de-th-check,
#pg-daily-expense .de-td-check{
  padding-left:22px !important;
  padding-right:6px !important;
  width:32px !important;
}

/* Same treatment for Expense Category rows (so both pages stay in sync) */
#pg-expense-category .ec-tbl-v269 thead th{
  padding:14px 16px 12px !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:var(--text, #111) !important;
}
#pg-expense-category .ec-tbl-v269 tbody td{
  padding:14px 16px !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  color:var(--text, #111) !important;
}
#pg-expense-category .ec-td-action{
  padding:12px 22px 12px 8px !important;
  min-width:140px;
  text-align:right;
}
#pg-expense-category .de-row-actions{
  display:flex !important;
  justify-content:flex-end;
  gap:0 !important;
}
#pg-expense-category .de-btn-group{
  min-width:110px;
  border-radius:7px !important;
}
#pg-expense-category .de-btn-edit{
  flex:1;
  justify-content:center;
  padding:8px 14px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
}
#pg-expense-category .de-btn-caret{
  width:32px;
}

/* Softer table shell — subtle border + rounded corners like a real card,
   so the list stops looking like raw table markup. */
#pg-daily-expense .ma-card,
#pg-expense-category .ma-card{
  border-radius:12px;
  overflow:hidden;
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.271 — Other Income Report — page-specific overrides
   ──────────────────────────────────────────────────────────────────────────
   Mirrors the v3.9.266 Daily Expenses Report layout: 5-column filter grid
   + toggled Customize/Advance blocks + the chip-field styling for the
   Category multi-select.
════════════════════════════════════════════════════════════════════════════════ */

#pg-other-income-report .oir-fg-5col{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:16px 20px;
}
@media (max-width: 1100px){
  #pg-other-income-report .oir-fg-5col{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #pg-other-income-report .oir-fg-5col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  #pg-other-income-report .oir-fg-5col{ grid-template-columns:1fr; }
}

/* Customize Report block */
#pg-other-income-report .oir-cust-block{
  padding:14px 20px 18px;
  border-top:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
}
#pg-other-income-report .oir-cust-search{
  width:100%;
  height:42px;
  padding:8px 14px;
  border:1.5px solid var(--brand, var(--brand));
  border-radius:8px;
  font-size:14px;
  outline:none;
  margin-bottom:14px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  box-sizing:border-box;
}
#pg-other-income-report .oir-cust-search:focus{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}
#pg-other-income-report .oir-cust-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px 20px;
}
@media (max-width: 1100px){
  #pg-other-income-report .oir-cust-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #pg-other-income-report .oir-cust-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  #pg-other-income-report .oir-cust-grid{ grid-template-columns:1fr; }
}
#pg-other-income-report .oir-cust-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:14px;
  color:var(--text, #111);
  font-weight:500;
  cursor:pointer;
  user-select:none;
}
#pg-other-income-report .oir-cust-grid label input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
  accent-color:var(--brand, var(--brand));
  flex-shrink:0;
}
#pg-other-income-report .oir-cust-grid label span{
  line-height:1.3;
}

/* Chip field styling — shares the DER/pwp look */
#pg-other-income-report .sr-chip-field{
  min-height:44px;
  padding:6px 8px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  background:var(--surf, #fff);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
#pg-other-income-report .sr-chip-field input{
  border:none !important;
  padding:2px 4px !important;
  flex:1 1 80px;
  min-width:80px;
  outline:none;
  background:transparent;
}
#pg-other-income-report .sr-chip-field:focus-within{
  border-color:var(--brand, var(--brand));
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}

/* Active state on toggle header buttons */
#pg-other-income-report .sr-hdr-btn.is-active{
  background:rgba(37,99,235,.08);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.272 — Daily Expenses list — locked-down styling to match the reference
   ──────────────────────────────────────────────────────────────────────────
   Uses dedicated .de-td-txt / .de-td-link classes so nothing from ma-tbl or
   any legacy .pill / global td rule can bleed in. Slightly tighter rows.
   The equal-width buttons + right-alignment from v3.9.270 stay in place.
════════════════════════════════════════════════════════════════════════════════ */

/* Neutralise the ma-tbl base so its default cell padding/borders don't
   override our tight de-tbl-v269 rules. */
#pg-daily-expense .ma-tbl.de-tbl-v269 td,
#pg-daily-expense .ma-tbl.de-tbl-v269 th{
  border:none !important;
  background:transparent !important;
}
#pg-daily-expense .de-tbl-v269{
  border-collapse:collapse !important;
  background:var(--surf, #fff) !important;
  width:100% !important;
}

/* Header row — a bit tighter than v3.9.270 */
#pg-daily-expense .de-tbl-v269 thead th{
  padding:12px 16px !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:var(--text, #111) !important;
  border-bottom:1px solid var(--bdr, #e5e7eb) !important;
  background:transparent !important;
  text-align:left;
  white-space:nowrap;
}

/* Body rows — 12px vertical padding, subtle bottom border only */
#pg-daily-expense .de-tbl-v269 tbody tr.de-row td{
  padding:12px 16px !important;
  color:var(--text, #111) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  border-bottom:1px solid var(--bdr, #f1f2f4) !important;
  vertical-align:middle !important;
  background:transparent !important;
}
#pg-daily-expense .de-tbl-v269 tbody tr.de-row:last-child td{
  border-bottom:none !important;
}
#pg-daily-expense .de-tbl-v269 tbody tr.de-row:hover td{
  background:#fafbfc !important;
}

/* Text cells — bare and consistent */
#pg-daily-expense .de-td-txt{
  color:var(--text, #111) !important;
  font-weight:400 !important;
  text-decoration:none !important;
}
/* Expense No + Title get the subtle brand-tinted link colour from the
   reference (they look "clickable"). No underline — clean like the ref. */
#pg-daily-expense .de-td-link{
  color:#e07b3b !important;   /* soft orange, matches the reference */
  font-weight:400 !important;
}

/* Checkbox column — tighter left padding */
#pg-daily-expense .de-th-check,
#pg-daily-expense .de-td-check{
  padding-left:22px !important;
  padding-right:6px !important;
  width:32px !important;
}
#pg-daily-expense .de-tbl-v269 input[type="checkbox"]{
  width:15px !important; height:15px !important;
  cursor:pointer;
  accent-color:var(--brand, var(--brand)) !important;
  margin:0 !important;
}

/* Action column — right-aligned, generous but not excessive */
#pg-daily-expense .de-th-action{
  padding:12px 22px 12px 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
#pg-daily-expense .de-th-action-lbl{
  flex:none !important;
  font-weight:600 !important;
  font-size:13px !important;
}
#pg-daily-expense .de-col-picker-btn{
  width:30px !important; height:30px !important;
  border-radius:6px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--text, #111) !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:background .12s, border-color .12s;
}
#pg-daily-expense .de-col-picker-btn svg{
  width:20px !important;
  height:20px !important;
  stroke-width:1.75 !important;
}
#pg-daily-expense .de-col-picker-btn:hover{
  background:rgba(37,99,235,.08) !important;
  border-color:rgba(37,99,235,.25) !important;
  color:var(--brand-dd, var(--brand-dd)) !important;
}

/* Action cell — equal-width buttons stacked with 4px gap */
#pg-daily-expense .de-td-action{
  padding:10px 22px 10px 8px !important;
  min-width:160px;
  text-align:right !important;
  vertical-align:middle !important;
}
#pg-daily-expense .de-row-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  align-items:stretch !important;
  width:150px !important;
  margin-left:auto !important;
}
#pg-daily-expense .de-btn-view,
#pg-daily-expense .de-btn-group{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
}
#pg-daily-expense .de-btn-view{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:7px 12px !important;
  border:1px solid var(--bdr, #e5e7eb) !important;
  border-radius:6px !important;
  background:var(--surf, #fff) !important;
  color:var(--text, #111) !important;
  font-size:13px !important;
  font-weight:500 !important;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
  box-sizing:border-box !important;
}
#pg-daily-expense .de-btn-view:hover{
  background:#f9fafb !important;
  border-color:#d1d5db !important;
}
#pg-daily-expense .de-btn-group{
  display:inline-flex !important;
  border:1px solid var(--bdr, #e5e7eb) !important;
  border-radius:6px !important;
  background:var(--surf, #fff) !important;
  overflow:hidden;
  box-sizing:border-box !important;
}
#pg-daily-expense .de-btn-edit{
  flex:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:7px 12px !important;
  background:var(--surf, #fff) !important;
  color:var(--text, #111) !important;
  font-size:13px !important;
  font-weight:500 !important;
  border:none !important;
  cursor:pointer;
  transition:background .12s;
  white-space:nowrap;
}
#pg-daily-expense .de-btn-edit:hover{ background:#f9fafb !important; }
#pg-daily-expense .de-btn-caret{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  padding:0 !important;
  background:var(--surf, #fff) !important;
  color:var(--muted, #6b7280) !important;
  border:none !important;
  border-left:1px solid var(--bdr, #e5e7eb) !important;
  cursor:pointer;
  transition:background .12s, color .12s;
}
#pg-daily-expense .de-btn-caret:hover{
  background:#f9fafb !important;
  color:var(--text, #111) !important;
}

/* Card corners on the list block */
#pg-daily-expense .ma-card{
  border-radius:12px;
  overflow:hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.273 — GSTR-1 REPORT specific styles
════════════════════════════════════════════════════════════════════════════════ */

/* Alert banner (warn) */
#pg-gstr1 .gstr1-alert{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:10px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  margin-bottom:14px;
}
#pg-gstr1 .gstr1-alert-warn{
  border-left:4px solid #f59e0b;
  background:var(--brand-bg);
}
#pg-gstr1 .gstr1-alert-warn .gstr1-alert-icon{
  color:#F59E0B;
}
#pg-gstr1 .gstr1-alert-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(220,38,38,.08);
}
#pg-gstr1 .gstr1-alert-warn .gstr1-alert-icon{
  background:rgba(245,158,11,.12);
}
#pg-gstr1 .gstr1-alert-body{
  flex:1;
  min-width:0;
}
#pg-gstr1 .gstr1-alert-title{
  font-size:14px;
  font-weight:700;
  color:var(--text, #1e293b);
  margin-bottom:2px;
}
#pg-gstr1 .gstr1-alert-text{
  font-size:13px;
  color:var(--muted, #6b7280);
  line-height:1.5;
}
#pg-gstr1 .gstr1-review-btn{
  flex-shrink:0;
  background:linear-gradient(135deg, #f59e0b, #ea580c);
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:transform .12s, box-shadow .12s;
}
#pg-gstr1 .gstr1-review-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(245,158,11,.35);
}

/* Required asterisk */
#pg-gstr1 .gstr1-req{
  color:#dc2626;
  margin-left:2px;
}

/* Other Options toggle button */
#pg-gstr1 .gstr1-other-opts-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
  color:var(--text, #374151);
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
#pg-gstr1 .gstr1-other-opts-btn:hover{
  background:rgba(37,99,235,.06);
  border-color:var(--brand, var(--brand));
}
#pg-gstr1 .gstr1-other-opts-btn.on{
  background:rgba(37,99,235,.10);
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}
#pg-gstr1 .gstr1-other-opts{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--bdr, #e5e7eb);
}

/* Tabs bar */
#pg-gstr1 .gstr1-tabs{
  display:flex;
  gap:2px;
  padding:0 4px;
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  scrollbar-width:none;
}
#pg-gstr1 .gstr1-tabs::-webkit-scrollbar{ display:none; }
#pg-gstr1 .gstr1-tab{
  background:transparent;
  border:none;
  padding:12px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--brand-dd, var(--brand-dd));
  cursor:pointer;
  font-family:inherit;
  border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
  white-space:nowrap;
  margin-bottom:-1px;
}
#pg-gstr1 .gstr1-tab:hover{ color:var(--text, #111); }
#pg-gstr1 .gstr1-tab.active{
  color:var(--text, #111);
  border-bottom-color:var(--text, #111);
}

/* Tab content — data table */
#pg-gstr1 .gstr1-tab-content{
  padding:16px;
  overflow-x:auto;
}
#pg-gstr1 .gstr1-data-tbl{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  font-size:12.5px;
}
#pg-gstr1 .gstr1-data-tbl thead th{
  padding:10px 12px;
  text-align:left;
  font-weight:600;
  color:var(--text, #374151);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  white-space:nowrap;
  background:var(--surf2, #f9fafb);
}
#pg-gstr1 .gstr1-data-tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  color:var(--text, #1f2937);
}
#pg-gstr1 .gstr1-data-tbl .num{ text-align:right; }
#pg-gstr1 .gstr1-data-tbl tfoot td{
  padding:12px;
  font-weight:700;
  border-top:2px solid var(--bdr, #d1d5db);
  color:var(--text, #111);
}
#pg-gstr1 .gstr1-data-tbl .empty-row td{
  text-align:center;
  padding:30px 20px;
  color:var(--muted, #9ca3af);
}

/* Action bar — 4 buttons (2 export blue, 2 email orange) */
#pg-gstr1 .gstr1-action-bar{ display:flex; }
#pg-gstr1 .gstr1-a-export{
  background:linear-gradient(135deg, #3b82f6, var(--brand)) !important;
  color:#fff !important;
}
#pg-gstr1 .gstr1-a-export:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand-d)) !important;
}
#pg-gstr1 .gstr1-a-email{
  background:linear-gradient(135deg, #f97316, #ea580c) !important;
  color:#fff !important;
}
#pg-gstr1 .gstr1-a-email:hover{
  background:linear-gradient(135deg, #ea580c, #c2410c) !important;
}

/* Mismatch review overlay (Image 3) */
#pg-gstr1 .gstr1-mismatch-view{
  margin-top:14px;
}
#pg-gstr1 .gstr1-mv-back-row{
  padding:10px 14px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
}
#pg-gstr1 .gstr1-mv-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--bdr, #d1d5db);
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
  color:var(--text, #374151);
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
#pg-gstr1 .gstr1-mv-back:hover{
  background:var(--surf2, #f3f4f6);
}
#pg-gstr1 .gstr1-mv-hdr{
  padding:18px 14px 12px;
  text-align:center;
}
#pg-gstr1 .gstr1-mv-title{
  font-size:16px;
  font-weight:700;
  color:var(--text, #111);
}
#pg-gstr1 .gstr1-mv-sub{
  font-size:14px;
  color:var(--text, #374151);
  margin-top:4px;
}
#pg-gstr1 .gstr1-mv-range{
  font-size:13px;
  color:var(--muted, #6b7280);
  margin-top:4px;
}
#pg-gstr1 .gstr1-mv-tbl{
  min-width:700px;
}
#pg-gstr1 .gstr1-mv-tbl thead th{
  padding:10px 14px;
  text-align:left;
  font-weight:600;
  color:var(--text, #374151);
  border-bottom:1px solid var(--bdr, #e5e7eb);
}
#pg-gstr1 .gstr1-mv-tbl tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  vertical-align:top;
}
#pg-gstr1 .gstr1-mv-view-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #d1d5db);
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
  color:var(--text, #374151);
  cursor:pointer;
  font-family:inherit;
  transition:background .12s, border-color .12s;
}
#pg-gstr1 .gstr1-mv-view-btn:hover{
  background:rgba(37,99,235,.06);
  border-color:var(--brand, var(--brand));
}

/* Mobile stacking */
@media (max-width: 640px){
  #pg-gstr1 .gstr1-alert{
    flex-wrap:wrap;
  }
  #pg-gstr1 .gstr1-review-btn{
    width:100%;
    margin-top:8px;
  }
  #pg-gstr1 .gstr1-tabs{
    padding:0;
  }
  #pg-gstr1 .gstr1-tab{
    padding:10px 12px;
    font-size:12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.274 — GSTR-2B REPORT specific styles
════════════════════════════════════════════════════════════════════════════════ */

/* Filter row — file, dates, generate all inline */
#pg-gstr2b .g2b-filter-row{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
#pg-gstr2b .g2b-fg{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}
#pg-gstr2b .g2b-file-fg{
  min-width:240px;
  flex:1 1 260px;
}
#pg-gstr2b .g2b-fg label{
  font-size:13px;
  font-weight:500;
  color:var(--text, #374151);
}
#pg-gstr2b .g2b-fg input[type="date"]{
  padding:9px 12px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  font-family:inherit;
  font-size:13px;
  color:var(--text, #111);
  min-width:180px;
}
#pg-gstr2b .g2b-fg input[type="file"]{
  padding:8px 0;
  font-family:inherit;
  font-size:13px;
  color:var(--text, #111);
}
#pg-gstr2b .g2b-req{
  color:#dc2626;
  margin-left:2px;
}
#pg-gstr2b .g2b-generate-wrap{
  margin-left:auto;
  min-width:auto;
}
#pg-gstr2b .g2b-generate-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  font-size:14px;
  font-weight:600;
}

/* Summary — 8 columns, label on top, big number below */
#pg-gstr2b .g2b-summary-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:20px;
  padding:8px 4px;
}
#pg-gstr2b .g2b-stat{
  text-align:center;
}
#pg-gstr2b .g2b-stat-lbl{
  font-size:13px;
  color:var(--text, #374151);
  font-weight:500;
  margin-bottom:8px;
  line-height:1.3;
}
#pg-gstr2b .g2b-stat-val{
  font-size:22px;
  font-weight:600;
  color:var(--text, #1f2937);
}

/* Filter chips — 7 chips with category-specific selected colours */
#pg-gstr2b .g2b-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:4px 0;
}
#pg-gstr2b .g2b-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 16px;
  background:var(--surf, #fff);
  border:1.5px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  color:var(--text, #374151);
  cursor:pointer;
  font-family:inherit;
  transition:all .12s ease;
  white-space:nowrap;
}
#pg-gstr2b .g2b-chip-count{
  opacity:.7;
  font-weight:400;
}
#pg-gstr2b .g2b-chip:hover{
  border-color:var(--brand, var(--brand));
  color:var(--brand-dd, var(--brand-dd));
}
/* Selected chip — uses category colour */
#pg-gstr2b .g2b-chip.active{
  color:#fff;
}
#pg-gstr2b .g2b-chip.active .g2b-chip-count{
  opacity:.85;
}
#pg-gstr2b .g2b-chip-all.active{
  background:var(--brand, var(--brand));
  border-color:var(--brand, var(--brand));
}
#pg-gstr2b .g2b-chip-red.active{
  background:#ef4444;
  border-color:#ef4444;
}
#pg-gstr2b .g2b-chip-orange.active{
  background:#f97316;
  border-color:#f97316;
}
#pg-gstr2b .g2b-chip-amber.active{
  background:#f59e0b;
  border-color:#f59e0b;
}
#pg-gstr2b .g2b-chip-green.active{
  background:var(--brand-d);
  border-color:var(--brand-d);
}
#pg-gstr2b .g2b-chip-green-dd.active{
  background:var(--brand-dd);
  border-color:var(--brand-dd);
}

/* Data table */
#pg-gstr2b .g2b-results-wrap{
  margin-top:20px;
  border-top:1px solid var(--bdr, #e5e7eb);
  padding-top:16px;
}
#pg-gstr2b .g2b-data-tbl{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  font-size:13px;
}
#pg-gstr2b .g2b-data-tbl thead th{
  padding:10px 12px;
  text-align:left;
  font-weight:600;
  color:var(--text, #374151);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:var(--surf2, #f9fafb);
  white-space:nowrap;
}
#pg-gstr2b .g2b-data-tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  color:var(--text, #1f2937);
}
#pg-gstr2b .g2b-data-tbl .empty-row td{
  text-align:center;
  padding:30px 20px;
  color:var(--muted, #9ca3af);
}
/* Status pills inside the table */
#pg-gstr2b .g2b-status-pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:12px;
  font-size:11.5px;
  font-weight:600;
}
#pg-gstr2b .g2b-status-notmatch{ background:#fee2e2; color:#991b1b; }
#pg-gstr2b .g2b-status-miss2b  { background:var(--brand-bg); color:#92400e; }
#pg-gstr2b .g2b-status-misspur { background:#fed7aa; color:#9a3412; }
#pg-gstr2b .g2b-status-partial { background:var(--brand-bg); color:#a16207; }
#pg-gstr2b .g2b-status-matched { background:var(--brand-bg2); color:var(--brand-dd); }
#pg-gstr2b .g2b-status-exact   { background:#7DD3FC; color:var(--brand-dd); }

/* Mobile — stack filter row + summary reflows to 2/4 cols */
@media (max-width: 900px){
  #pg-gstr2b .g2b-summary-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
  }
}
@media (max-width: 640px){
  #pg-gstr2b .g2b-filter-row{
    flex-direction:column;
    align-items:stretch;
  }
  #pg-gstr2b .g2b-fg{
    min-width:auto;
    width:100%;
  }
  #pg-gstr2b .g2b-generate-wrap{
    margin-left:0;
  }
  #pg-gstr2b .g2b-generate-btn{
    width:100%;
    justify-content:center;
  }
  #pg-gstr2b .g2b-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.275 — GSTR-3B REPORT specific styles (5 colour-coded government tables)
════════════════════════════════════════════════════════════════════════════════ */

#pg-gstr3b .g3b-tp-card{
  margin-bottom:14px;
}
#pg-gstr3b .g3b-req{
  color:#dc2626;
  margin-left:2px;
}
#pg-gstr3b .g3b-tables-wrap{
  padding:20px 16px;
  overflow-x:auto;
}
#pg-gstr3b .g3b-tbl{
  width:100%;
  border-collapse:collapse;
  margin-bottom:22px;
  font-size:12.5px;
  border:1px solid var(--bdr, #d1d5db);
}
#pg-gstr3b .g3b-tbl th,
#pg-gstr3b .g3b-tbl td{
  border:1px solid var(--bdr, #d1d5db);
  padding:8px 10px;
  vertical-align:middle;
  text-align:left;
}
#pg-gstr3b .g3b-tbl .num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
#pg-gstr3b .g3b-tbl .g3b-title{
  font-weight:600;
  text-align:center;
  font-size:13px;
}
#pg-gstr3b .g3b-tbl .g3b-cols{
  font-weight:600;
  text-align:center;
}
#pg-gstr3b .g3b-tbl .g3b-nums th{
  text-align:center;
  font-weight:500;
  font-size:12px;
  padding:5px;
}
#pg-gstr3b .g3b-tbl .g3b-total-row td{
  font-weight:700;
  border-top:2px solid #444;
}
#pg-gstr3b .g3b-tbl .g3b-na{
  background:repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0,0,0,.08) 6px, rgba(0,0,0,.08) 8px);
}
#pg-gstr3b .g3b-tbl .g3b-section td{
  padding:6px 10px;
  font-size:13px;
}
#pg-gstr3b .g3b-tbl .g3b-idx{
  display:inline-block;
  min-width:22px;
  color:var(--muted, #6b7280);
  margin-right:2px;
}

/* ── 3.1 ORANGE ── */
#pg-gstr3b .g3b-tbl-31 .g3b-title{ background:#f97316; color:#fff; }
#pg-gstr3b .g3b-tbl-31 .g3b-cols{ background:#fdba74; color:#7c2d12; }
#pg-gstr3b .g3b-tbl-31 .g3b-nums{ background:#fed7aa; color:#7c2d12; }
#pg-gstr3b .g3b-tbl-31 tbody tr{ background:#fff7ed; }
#pg-gstr3b .g3b-tbl-31 tbody tr:nth-child(even){ background:#ffedd5; }
#pg-gstr3b .g3b-tbl-31 .g3b-na{ background:#c2410c; }

/* ── 4 NAVY / LIGHT BLUE ── */
#pg-gstr3b .g3b-tbl-4 .g3b-title{ background:#1e293b; color:#fff; }
#pg-gstr3b .g3b-tbl-4 .g3b-cols{ background:var(--brand-dd); color:#fff; }
#pg-gstr3b .g3b-tbl-4 .g3b-nums{ background:#3b82f6; color:#fff; font-style:italic; }
#pg-gstr3b .g3b-tbl-4 tbody tr{ background:var(--brand-bg); }
#pg-gstr3b .g3b-tbl-4 tbody tr:nth-child(even){ background:var(--brand-bg2); }
#pg-gstr3b .g3b-tbl-4 .g3b-section td{ background:var(--brand-bg2); font-weight:700; }
#pg-gstr3b .g3b-tbl-4 .g3b-net-row td{ background:#c7d2fe; font-weight:700; }
#pg-gstr3b .g3b-tbl-4 .g3b-na{ background:#1e293b; }

/* ── 5 YELLOW ── */
#pg-gstr3b .g3b-tbl-5 .g3b-title{ background:#facc15; color:#78350f; }
#pg-gstr3b .g3b-tbl-5 .g3b-cols{ background:var(--brand-bg2); color:#78350f; }
#pg-gstr3b .g3b-tbl-5 .g3b-nums{ background:#a16207; color:#fff; font-style:italic; }
#pg-gstr3b .g3b-tbl-5 tbody tr{ background:var(--brand-bg); }
#pg-gstr3b .g3b-tbl-5 tbody tr:nth-child(even){ background:var(--brand-bg2); }

/* ── 5.1 PURPLE ── */
#pg-gstr3b .g3b-tbl-51 .g3b-title{ background:#9333ea; color:#fff; }
#pg-gstr3b .g3b-tbl-51 .g3b-cols{ background:#c084fc; color:#fff; }
#pg-gstr3b .g3b-tbl-51 .g3b-nums{ background:#a855f7; color:#fff; font-style:italic; }
#pg-gstr3b .g3b-tbl-51 tbody tr{ background:#faf5ff; }

/* ── 3.2 GREEN ── */
#pg-gstr3b .g3b-tbl-32 .g3b-title{ background:#0EA5E9; color:#fff; text-align:left; padding:8px 12px; }
#pg-gstr3b .g3b-tbl-32 .g3b-cols{ background:#7DD3FC; color:#075985; font-size:12px; }
#pg-gstr3b .g3b-tbl-32 .g3b-cols:nth-child(3) th{ font-style:italic; font-weight:500; font-size:11.5px; }
#pg-gstr3b .g3b-tbl-32 .g3b-nums{ background:#0EA5E9; color:#fff; font-style:italic; }
#pg-gstr3b .g3b-tbl-32 tbody tr{ background:#f0fdf4; height:22px; }
#pg-gstr3b .g3b-tbl-32 tbody tr:nth-child(even){ background:#E0F2FE; }
#pg-gstr3b .g3b-tbl-32 tfoot .g3b-total-row td{ background:#BAE6FD; }

/* Action bar override — 2 buttons only (Export blue, Email orange) */
#pg-gstr3b .g3b-action-bar{ display:flex; }
#pg-gstr3b .g3b-a-export{
  background:linear-gradient(135deg, #3b82f6, var(--brand)) !important;
  color:#fff !important;
}
#pg-gstr3b .g3b-a-export:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand-d)) !important;
}
#pg-gstr3b .g3b-a-email{
  background:linear-gradient(135deg, #f97316, #ea580c) !important;
  color:#fff !important;
}
#pg-gstr3b .g3b-a-email:hover{
  background:linear-gradient(135deg, #ea580c, #c2410c) !important;
}

/* Mobile */
@media (max-width: 900px){
  #pg-gstr3b .g3b-tables-wrap{ padding:12px 8px; }
  #pg-gstr3b .g3b-tbl{ font-size:11px; min-width:640px; }
  #pg-gstr3b .g3b-tbl th, #pg-gstr3b .g3b-tbl td{ padding:6px 5px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.277 — Notifications Full Page (bell popup ▸ View All)
════════════════════════════════════════════════════════════════════════════════ */
#pg-notifications .np-filter-card{
  margin-bottom:14px;
}
#pg-notifications .np-filter-row{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
#pg-notifications .np-fg{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:200px;
}
#pg-notifications .np-fg label{
  font-size:13px;
  font-weight:500;
  color:var(--text, #374151);
}
#pg-notifications .np-fg input[type="text"],
#pg-notifications .np-fg select{
  padding:9px 12px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  font-family:inherit;
  font-size:13px;
  color:var(--text, #111);
  background:var(--surf, #fff);
  cursor:pointer;
}
#pg-notifications .np-fg select{
  min-width:180px;
}
#pg-notifications .np-search-wrap{
  min-width:auto;
}

#pg-notifications .np-tbl-wrap{
  padding:0;
  overflow-x:auto;
}
#pg-notifications .np-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
#pg-notifications .np-tbl thead th{
  padding:14px 20px;
  text-align:left;
  font-weight:600;
  color:var(--text, #374151);
  border-bottom:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
}
#pg-notifications .np-tbl .np-col-date{ width:200px; }
#pg-notifications .np-tbl .np-col-action{ width:160px; text-align:right; }
#pg-notifications .np-tbl tbody td{
  padding:16px 20px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  color:var(--text, #1f2937);
  vertical-align:top;
}
#pg-notifications .np-tbl tbody tr:hover{
  background:rgba(37,99,235,.03);
}
#pg-notifications .np-tbl tbody tr.unread td{
  background:rgba(37,99,235,.04);
}
#pg-notifications .np-title{
  font-weight:600;
  color:var(--text, #111);
  margin-bottom:4px;
  line-height:1.3;
}
#pg-notifications .np-desc{
  font-size:13px;
  color:var(--muted, #6b7280);
  line-height:1.5;
}
#pg-notifications .np-date-cell{
  font-size:13px;
  color:var(--muted, #6b7280);
  white-space:nowrap;
}
#pg-notifications .np-action-btn{
  display:inline-block;
  padding:8px 20px;
  background:linear-gradient(135deg, var(--brand, var(--brand)), var(--brand-dd, var(--brand-dd)));
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:transform .12s, box-shadow .12s;
  white-space:nowrap;
}
#pg-notifications .np-action-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
#pg-notifications .np-action-btn.done{
  background:var(--surf2, #f3f4f6);
  color:var(--muted, #6b7280);
  cursor:default;
  pointer-events:none;
}
#pg-notifications .np-empty{
  text-align:center;
  padding:50px 20px;
  color:var(--muted, #9ca3af);
  font-size:13px;
}

@media (max-width: 640px){
  #pg-notifications .np-filter-row{
    flex-direction:column;
    align-items:stretch;
  }
  #pg-notifications .np-fg{
    min-width:auto;
    width:100%;
  }
  #pg-notifications .np-tbl .np-col-action{
    width:auto;
  }
  #pg-notifications .np-tbl tbody td{
    padding:12px 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.284 — Sales / Purchase Outstanding widgets: not-filterable indicator
   ────────────────────────────────────────────────────────────────
   Adds a hover/focus tooltip on the funnel-with-slash icon next to the
   widget title, explaining that the outstanding chart shows all-time
   data and does not change with the dashboard date filter.
════════════════════════════════════════════════════════════════════════════════ */
.ma-dash2-oc-nofilter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:var(--muted, #9ca3af);
  cursor:help;
  padding:2px;
  border-radius:4px;
  outline:none;
  transition:color .12s;
}
.ma-dash2-oc-nofilter:hover,
.ma-dash2-oc-nofilter:focus-visible{
  color:var(--text, #374151);
}
.ma-dash2-oc-nofilter::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 8px);
  right:-4px;
  background:#1e293b;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  white-space:normal;
  min-width:220px;
  max-width:280px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .12s, transform .12s, visibility 0s .12s;
  z-index:100;
  pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.ma-dash2-oc-nofilter:hover::after,
.ma-dash2-oc-nofilter:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .12s, transform .12s;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.285 — Dashboard hover tooltips: unclip + refine positioning
   ────────────────────────────────────────────────────────────────
   Root cause the user reported ("hover data cut off"):
     .ma-card has overflow:hidden. The three dashboard top cards
     (.ma-dash2-tc) and the Expense/Income card inherit that, so
     tooltips positioned inside their charts got clipped at the card
     boundary. Fix: override overflow to visible on these specific
     cards + all their internal wrappers.
════════════════════════════════════════════════════════════════════════════════ */

/* Let tooltips escape the card bounds */
.ma-card.ma-dash2-tc,
.ma-card.ma-dash2-oc,
.ma-dash2-topcards .ma-card{
  overflow:visible;
}
.ma-dash2-tc,
.ma-dash2-tc-body,
.ma-dash2-tc-chart,
.ma-dash2-ei-body,
.ma-dash2-ei-donut,
.ma-dash2-ei-bars{
  overflow:visible !important;
}

/* Lift tooltips above sibling cards + the date-picker overlay z-index */
.ma-dash2-tc-tip,
.ma-dash2-ei-tip{
  z-index:50 !important;
}

/* v3.9.285 — Bar-view tooltip refinements:
   • Slightly narrower so it fits inside the 240 px chart column
   • Allow wrapping if content overflows, no more clipped edges
   • Add a small pointer arrow */
.ma-dash2-ei-tip-bar{
  min-width:180px !important;
  max-width:240px !important;
  white-space:normal !important;
}
.ma-dash2-ei-tip-bar .ma-dash2-ei-tip-h,
.ma-dash2-ei-tip-r{
  white-space:nowrap;
}

/* v3.9.285 — Donut-view tooltip: keep as clean green pill, force text
   colour + shadow so it's clearly readable regardless of what's behind */
.ma-dash2-ei-tip-donut{
  background:var(--brand, var(--brand)) !important;
  color:#fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.22) !important;
  padding:9px 14px !important;
  font-size:13px !important;
  border-radius:8px !important;
}

/* v3.9.285 — Sale/Purchase bar-hover tooltip: match Image 6 layout.
   Force it to sit ABOVE the bar with a small offset, add pointer
   arrow, and cap width so it never spills off-card. */
.ma-dash2-tc-tip{
  min-width:200px !important;
  max-width:240px !important;
  white-space:normal !important;
}
.ma-dash2-tc-tip-h{
  font-size:12.5px !important;
}
.ma-dash2-tc-tip-r{
  font-size:11.5px !important;
  padding:3px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.286 — India map: 5 distinct tier colours + state borders + zoom buttons
════════════════════════════════════════════════════════════════════════════════ */

/* Ensure every state has a visible white border between it and its neighbours */
.ind-state{
  stroke:#ffffff;
  stroke-width:1;
  stroke-linejoin:round;
  transition:opacity .12s, filter .12s;
  cursor:pointer;
}
.ind-state:hover{
  filter:brightness(0.92);
  stroke:#0f172a;
  stroke-width:1.5;
}

/* Zoom controls (+/-) in the bottom-left corner, matching reference */
.ma-map-zoom{
  position:absolute;
  bottom:14px;
  left:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:5;
}
.ma-map-zoom-btn{
  width:28px;
  height:28px;
  background:#f3f4f6;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:16px;
  font-weight:600;
  color:#374151;
  cursor:pointer;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  transition:background .12s, border-color .12s;
}
.ma-map-zoom-btn:hover{
  background:#e5e7eb;
  border-color:#9ca3af;
}
.ma-map-zoom-btn:active{
  background:#d1d5db;
}

/* Top-list rank badges — bigger, circular per reference; forced white text */
.ma-map-toprow .rank{
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:12px !important;
}

/* Legend range colour-swatch: slightly rounder + a subtle border */
.ma-map-legend-ranged .sw{
  border-radius:3px;
  border:1px solid rgba(0,0,0,.06);
}

/* Map stage: give it a min-height so the map has room, and clip zoom overflow */
.ma-map-stage{
  min-height:420px;
  overflow:hidden;
  background:#f9fafb;
  border-radius:8px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.287 — Total-Sale map redesign to match reference image exactly
     • Map card spans full width (was cramped into half of a 2-col grid)
     • Map + sidebar sit SIDE-BY-SIDE (was stacked column-flex)
     • Sidebar split into two bordered panel boxes ("Sale" + "Top Sale State list")
     • Legend uses small circular colour dots (was rounded rectangles)
     • Top state list drops the ₹ amount column; state name is coloured to tier
════════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Map card takes full width; New-vs-Existing moved to its own row --- */
.ma-two.ma-two-map{
  display:block !important;    /* override .ma-two grid 1fr 1fr */
  grid-template-columns:none !important;
}
.ma-two.ma-two-map > .ma-mapcard{
  width:100%;
  margin-bottom:16px;
}
.ma-two.ma-two-nve{
  grid-template-columns:1fr !important;  /* full width for the analytics chart */
}

/* --- 2. Map + sidebar SIDE-BY-SIDE grid inside the card body --- */
.ma-mapcard .ma-map-wrap{
  display:grid !important;
  grid-template-columns:1fr 260px;
  gap:16px;
  align-items:stretch;
}
.ma-mapcard .ma-map-stage{
  min-height:460px;
  background:#ffffff;    /* reference has a clean white background */
  border-radius:8px;
}
.ma-mapcard .ma-map-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

/* --- 3. The two bordered sidebar panels ("Sale" and "Top Sale State list") --- */
.ma-map-panel{
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px 14px 10px;
  background:#ffffff;
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.ma-map-panel-h{
  font-size:13px;
  font-weight:700;
  color:#1f2937;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px dashed #d1d5db;   /* light dashed divider under title */
  letter-spacing:.1px;
}

/* --- 4. Legend inside the "Sale" panel: circular colour dots + range text --- */
.ma-map-panel .ma-map-legend-ranged{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}
.ma-map-panel .ma-map-legend-ranged .ma-lg-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:1px 0;
}
.ma-map-panel .ma-map-legend-ranged .sw.lg-dot{
  width:11px !important;
  height:11px !important;
  border-radius:50% !important;    /* circular, matching reference */
  border:none !important;
  flex-shrink:0;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
}
.ma-map-panel .ma-map-legend-ranged .rng{
  font-size:12.5px;
  color:#4b5563;
  font-weight:500;
  white-space:nowrap;
}

/* --- 5. Top-state list rows inside the second panel --- */
.ma-map-panel #ind-map-top{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ma-map-panel .ma-map-toprow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:none;   /* clean rows, no dividers between them */
}
.ma-map-panel .ma-map-toprow .rank{
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.ma-map-panel .ma-map-toprow .nm{
  font-size:13.5px;
  font-weight:600;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* colour is set inline per-row to match the tier */
}
.ma-map-panel .ma-map-toprow .amt{ display:none; }  /* legacy — hidden */

/* --- 6. Responsive: on narrow screens stack sidebar below map --- */
@media(max-width:900px){
  .ma-mapcard .ma-map-wrap{
    grid-template-columns:1fr !important;
  }
  .ma-mapcard .ma-map-side{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .ma-mapcard .ma-map-panel{
    flex:1 1 260px;
  }
}
@media(max-width:560px){
  .ma-mapcard .ma-map-side{ flex-direction:column; }
  .ma-mapcard .ma-map-stage{ min-height:340px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.288 — Restore 2-col layout (map + New-vs-Existing side by side) and
              redesign the New-vs-Existing Customer Sale chart to match reference
     • Undo v3.9.287 full-width override on .ma-two-map
     • Compact sidebar inside the map card (narrower because card now = half width)
     • New light "info-card" style tooltip for the chart
     • Bottom legend with small circular dots (matching reference)
════════════════════════════════════════════════════════════════════════════════ */

/* --- 1. Undo v3.9.287 outer overrides so .ma-two-map is a 2-col grid again --- */
.ma-two.ma-two-map{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px;
  align-items:stretch;
}
.ma-two.ma-two-map > .ma-mapcard{
  width:auto;
  margin-bottom:0;
}

/* --- 2. Map card internals — sidebar narrower since card now = half width --- */
.ma-mapcard .ma-map-wrap{
  display:grid !important;
  grid-template-columns:1fr 190px;   /* narrower sidebar than v3.9.287 (was 260) */
  gap:12px;
  align-items:stretch;
}
.ma-mapcard .ma-map-stage{
  min-height:420px;
}
/* v3.9.288 — tighter side-panel padding since space is smaller now */
.ma-mapcard .ma-map-panel{
  padding:10px 12px 8px;
}
.ma-mapcard .ma-map-panel-h{
  font-size:12.5px;
  padding-bottom:6px;
  margin-bottom:6px;
}
.ma-mapcard .ma-map-panel .ma-map-legend-ranged{ gap:6px; }
.ma-mapcard .ma-map-panel .ma-map-legend-ranged .rng{ font-size:11.5px; }
.ma-mapcard .ma-map-panel .ma-map-toprow{ padding:5px 0; }
.ma-mapcard .ma-map-panel .ma-map-toprow .nm{ font-size:12.5px; }
.ma-mapcard .ma-map-panel .ma-map-toprow .rank{
  width:20px !important; height:20px !important; font-size:11px !important;
}

/* --- 3. NVE card — bottom legend with circular colour dots --- */
.ma-nve-card .ma-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ma-nve-legend{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin-top:6px;
  padding-top:6px;
  font-size:12.5px;
  color:#334155;
  font-weight:600;
}
.ma-nve-lg-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.ma-nve-lg-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.ma-nve-graph{ min-height:280px; }
.ma-nve-svg rect{ transition:opacity .12s, filter .12s; }
.ma-nve-svg rect:hover{ filter:brightness(0.9); opacity:1; }

/* --- 4. Chart tooltip — light "info-card" style, matching reference Image 3 --- */
.ma-nve-card .ma-graph-tip,
.ma-nve-graph .ma-graph-tip{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:0 !important;
  min-width:200px;
  box-shadow:0 8px 22px rgba(15,23,42,0.14);
  overflow:hidden;
  font-size:13px;
  line-height:1.5;
}
.ma-nve-card .ma-graph-tip .ma-gt-h,
.ma-nve-graph .ma-graph-tip .ma-gt-h{
  background:#f3f4f6;
  color:#374151 !important;
  font-weight:600;
  padding:8px 14px;
  margin:0;
  font-size:13px;
  border-bottom:1px solid #e5e7eb;
  letter-spacing:0;
}
.ma-nve-card .ma-graph-tip .ma-gt-body,
.ma-nve-graph .ma-graph-tip .ma-gt-body{
  padding:10px 14px 12px;
  color:#1f2937;
}
.ma-nve-card .ma-graph-tip .ma-gt-line,
.ma-nve-graph .ma-graph-tip .ma-gt-line{
  padding:2px 0;
  font-size:13px;
  color:#1f2937;
}
.ma-nve-card .ma-graph-tip .ma-gt-line span,
.ma-nve-graph .ma-graph-tip .ma-gt-line span{
  color:#111827;
  font-weight:400;
}
.ma-nve-card .ma-graph-tip .ma-gt-line b,
.ma-nve-graph .ma-graph-tip .ma-gt-line b{
  color:#111827;
  font-weight:700;
}

/* --- 5. Responsive — stack cards on narrow screens --- */
@media(max-width:1024px){
  .ma-two.ma-two-map{ grid-template-columns:1fr !important; }
}
@media(max-width:900px){
  .ma-mapcard .ma-map-wrap{ grid-template-columns:1fr !important; }
  .ma-mapcard .ma-map-side{ flex-direction:row; flex-wrap:wrap; }
  .ma-mapcard .ma-map-panel{ flex:1 1 240px; }
  .ma-nve-legend{ gap:16px; }
}
@media(max-width:560px){
  .ma-mapcard .ma-map-side{ flex-direction:column; }
  .ma-mapcard .ma-map-stage{ min-height:320px; }
  .ma-nve-graph{ min-height:220px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.289 — Fixes
     • Map: exact rank colours (rank 1..5 → teal/orange/yellow/blue/coral)
       — CSS-side is unchanged; JS renderMap() now colours by rank.
     • NVE chart tooltip: harden the light "info-card" style so it wins
       against any earlier .ma-graph-tip rule and shows above all overlays.
════════════════════════════════════════════════════════════════════════════════ */

/* --- Chart tooltip: pin the light card design at global scope so it applies
       to the New-vs-Existing chart even if class chains are stripped by other
       plugins/themes. Selector is intentionally broad — ONLY the NVE chart
       uses these inner nodes (ma-gt-line + ma-gt-body), so this never
       affects other tooltips (count / amount charts still use the dark
       ma-gt-row style). ------------------------------------------------------ */
.ma-graph-tip:has(.ma-gt-body){
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d1d5db !important;
  border-radius:8px !important;
  padding:0 !important;
  min-width:210px;
  box-shadow:0 8px 22px rgba(15,23,42,0.14) !important;
  overflow:hidden !important;
  font-size:13px !important;
  line-height:1.5 !important;
  z-index:9999 !important;   /* pin above other overlays */
}
.ma-graph-tip:has(.ma-gt-body) .ma-gt-h{
  background:#f3f4f6 !important;
  color:#374151 !important;
  font-weight:600 !important;
  padding:8px 14px !important;
  margin:0 !important;
  font-size:13px !important;
  border-bottom:1px solid #e5e7eb !important;
  letter-spacing:0 !important;
}
.ma-graph-tip:has(.ma-gt-body) .ma-gt-body{
  padding:10px 14px 12px !important;
  color:#1f2937 !important;
}
.ma-graph-tip:has(.ma-gt-body) .ma-gt-line{
  padding:2px 0 !important;
  font-size:13px !important;
  color:#1f2937 !important;
}
.ma-graph-tip:has(.ma-gt-body) .ma-gt-line span{
  color:#111827 !important;
  font-weight:400 !important;
}
.ma-graph-tip:has(.ma-gt-body) .ma-gt-line b{
  color:#111827 !important;
  font-weight:700 !important;
}

/* --- Fallback for browsers without :has() support (very old Chromium/Safari):
       still apply the container styles via the class-based selectors from
       v3.9.288, but with even stronger specificity. ------------------------- */
.ma-nve-graph > .ma-graph-tip,
.ma-nve-card  .ma-graph-tip{
  z-index:9999 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.290 — Inward / Outward Payment cards (concentric-rings redesign)
     • 2-col row (was 3-col shared with Inventory)
     • Ring SVG on the left · Total + per-mode list on the right
     • Interactive: hover a colour arc → mode name + % appear in ring centre
════════════════════════════════════════════════════════════════════════════════ */

.ma-paymix-row{ margin-bottom:16px; }

/* v3.9.291 — 3-column paymix row is default; falls back to 2 then 1 column
   at narrower widths so cards don't get crushed. */
.ma-three.ma-paymix-row{ grid-template-columns:1fr 1fr 1fr; gap:16px; }

.ma-paymix .ma-card-body{ padding:16px 20px 20px; }

/* v3.9.292 — larger chart, wider meta column, matches target proportions */
.ma-paymix-body{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:22px;
  align-items:center;
  padding:6px 0 4px;
}

/* Ring SVG — sits on the left */
.ma-paymix-rings{
  width:170px;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ma-paymix-rings .paymix-svg{
  width:100%;
  height:100%;
  display:block;
}
.paymix-svg circle{ transition:opacity .15s, stroke-width .15s; }
.paymix-svg .paymix-arc{ cursor:pointer; }
.paymix-svg .paymix-arc:hover{ stroke-width:11; }
.paymix-svg .paymix-center-mode,
.paymix-svg .paymix-center-pct{
  pointer-events:none;
  font-family:inherit;
}

/* Right side: total + list of modes */
.ma-paymix-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ma-paymix-total-lbl{
  font-size:13px;
  font-weight:600;
  color:#334155;
  letter-spacing:0;
}
.ma-paymix-total-val{
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  margin-top:2px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-paymix-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:6px;
  min-width:0;
}
.paymix-item{
  display:grid;
  grid-template-columns:12px 1fr auto;
  align-items:center;
  gap:10px;
  padding:0;
  font-size:13px;
  min-width:0;
}
.paymix-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.paymix-mode{
  font-weight:600;
  color:#334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.3px;
  min-width:0;
}
.paymix-amt{
  font-weight:600;
  color:#334155;
  white-space:nowrap;
  font-size:13px;
}

/* v3.9.291 — Inventory card in 3-column row */
.ma-inv-card .ma-card-hdr{ position:relative; }
.ma-inv-info-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  color:var(--hint);
  cursor:help;
  margin-left:2px;
}
.ma-inv-info-wrap:hover{ color:var(--brand); }
.ma-inv-info-ico{ display:block; }
.ma-inv-info-tip{
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  background:#0f172a;
  color:#fff;
  font-size:12px;
  font-weight:500;
  padding:8px 12px;
  border-radius:6px;
  white-space:normal;
  width:240px;
  line-height:1.4;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  z-index:20;
}
.ma-inv-info-wrap:hover .ma-inv-info-tip,
.ma-inv-info-wrap:focus .ma-inv-info-tip,
.ma-inv-info-wrap:focus-within .ma-inv-info-tip{ opacity:1; }

.ma-inv-body{ padding:16px 20px 20px; }
.ma-inv-divider{
  height:1px;
  background:var(--surf3);
  margin:14px 0 16px;
}

/* Responsive: stack at narrow widths */
@media(max-width:1200px){
  .ma-three.ma-paymix-row{ grid-template-columns:1fr 1fr; }
  .ma-three.ma-paymix-row > :nth-child(3){ grid-column:1 / -1; }
}
@media(max-width:900px){
  .ma-three.ma-paymix-row{ grid-template-columns:1fr; }
  .ma-three.ma-paymix-row > :nth-child(3){ grid-column:auto; }
}
@media(max-width:640px){
  .ma-paymix-body{ grid-template-columns:1fr; gap:16px; }
  .ma-paymix-rings{ max-width:180px; margin:0 auto; }
  .ma-paymix-meta{ align-items:center; text-align:center; }
  .ma-paymix-list{ align-items:stretch; width:100%; max-width:260px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.296 — Product Leaderboard (Best · Least · Low Stock) clean redesign
     Matches the reference image: 2-col table with subtle borders. Overrides
     the v3.9.29x avatar / rank / pill design when `.ma-prodlead-clean` is on
     the wrapper (so older installs of the file still work if the wrapper is
     absent).
════════════════════════════════════════════════════════════════════════════════ */

/* Neutralise the accent gradient bar + hover-lift on the clean variant */
.ma-prodlead-clean .ma-pl-card{
  overflow:visible;                          /* filter menu escapes the card */
  transition:none;
}
.ma-prodlead-clean .ma-pl-card:hover{ transform:none; box-shadow:var(--shadow); }
.ma-prodlead-clean .ma-pl-card::before{ display:none; content:none; }

/* Header layout: title left · [filter icon (Low Stock only)] · View All right */
.ma-prodlead-clean .ma-pl-hdr{
  gap:8px;
  padding:16px 20px 12px;
  border-bottom:none;
  position:relative;
}
.ma-prodlead-clean .ma-pl-title{
  font-size:14.5px;
  font-weight:700;
  color:#1f2937;
  letter-spacing:.1px;
}

/* Green "View All" text-link (not a pill button) */
.ma-prodlead-clean .ma-pl-viewall-lnk{
  margin-left:auto;
  color:var(--brand);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  padding:2px 4px;
  border-radius:4px;
  transition:color .12s, background .12s;
}
.ma-prodlead-clean .ma-pl-viewall-lnk:hover{
  color:var(--brand-d);
  text-decoration:underline;
}

/* Card body — remove old padding, table-header underline */
.ma-prodlead-clean .ma-pl-body{ padding:0 20px 12px; }
.ma-prodlead-clean .ma-pl-thead{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:8px 0 10px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
  font-weight:700;
  color:#1f2937;
  text-transform:none;
  letter-spacing:0;
}
.ma-prodlead-clean .ma-pl-thead > span:last-child{ text-align:right; }
.ma-prodlead-clean .ma-pl-list{ display:flex; flex-direction:column; }

/* Row: no avatar / rank / pill — just name + qty with a thin separator */
.ma-prodlead-clean .ma-pl-trow{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #eef2f4;
  transition:background .12s;
}
.ma-prodlead-clean .ma-pl-trow:last-child{ border-bottom:none; }
.ma-prodlead-clean .ma-pl-trow:hover{ background:#f9fafb; }
.ma-prodlead-clean .ma-pl-tname{
  font-size:13.5px;
  font-weight:500;
  color:#111827;                             /* v3.9.297 — black text as requested */
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-prodlead-clean .ma-pl-tqty{
  font-size:13.5px;
  font-weight:500;
  color:#374151;
  white-space:nowrap;
  font-feature-settings:"tnum";
  text-align:right;
}

/* Low-Stock rows get a soft gray highlight (all rows there are "problem" rows) */
.ma-prodlead-clean .ma-pl-list-low .ma-pl-trow{ background:#f5f6f8; padding-left:8px; padding-right:8px; margin:0 -8px; border-radius:2px; }
.ma-prodlead-clean .ma-pl-list-low .ma-pl-trow:hover{ background:#eef1f4; }

/* Filter icon in Low Stock header */
.ma-prodlead-clean .ma-pl-filter-btn{
  background:transparent;
  border:none;
  padding:4px;
  cursor:pointer;
  color:#6b7280;
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:2px;
  position:relative;
  transition:color .12s, background .12s;
}
.ma-prodlead-clean .ma-pl-filter-btn:hover{ color:#111827; background:#f3f4f6; }
.ma-prodlead-clean .ma-pl-filter-btn.has-filter::after{
  content:"";
  position:absolute;
  top:2px; right:2px;
  width:6px; height:6px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 1.5px #fff;
}

/* Filter menu — small floating dropdown under the icon */
.ma-prodlead-clean .ma-pl-filter-menu{
  position:absolute;
  top:44px;
  right:70px;                                /* clear the "View All" link */
  min-width:160px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  padding:4px;
  z-index:30;
  display:none;
}
.ma-prodlead-clean .ma-pl-filter-menu.open{ display:block; }
.ma-prodlead-clean .ma-pl-filter-item{
  padding:8px 12px;
  font-size:13px;
  font-weight:500;
  color:#374151;
  border-radius:5px;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.ma-prodlead-clean .ma-pl-filter-item:hover{ background:#f3f4f6; color:#111827; }
.ma-prodlead-clean .ma-pl-filter-item.active{
  background:#e6f7f1;
  color:var(--brand);
  font-weight:600;
}

/* Responsive */
@media(max-width:1024px){
  .ma-prodlead-clean{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .ma-prodlead-clean .ma-pl-hdr{ padding:14px 16px 10px; }
  .ma-prodlead-clean .ma-pl-body{ padding:0 16px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.297 — Date-picker layout fix + polish
     The previous rule set `flex-direction:column` on .ma-dash2-dp, which
     stacked [side][cals][foot] vertically and made the picker look broken.
     Force a GRID layout so it matches the reference image:
        ┌───────┬────────────┐
        │       │   cals     │
        │ side  ├────────────┤
        │       │   foot     │
        └───────┴────────────┘
     Also tighten the calendar look-and-feel (rounded pill for start/end,
     light-green range highlight, muted dow labels).
════════════════════════════════════════════════════════════════════════════════ */

/* Force the correct 2-col grid layout — overrides the older flex:column rule */
.ma-dash2-dp{
  display:grid !important;
  grid-template-columns:170px 1fr;
  grid-template-rows:1fr auto;
  flex-direction:initial !important;
  min-width:740px;
  overflow:visible;                 /* let month/year pickers escape */
}
.ma-dash2-dp[style*="display: none"],
.ma-dash2-dp[style*="display:none"]{ display:none !important; }

.ma-dash2-dp-side{
  grid-column:1;
  grid-row:1 / span 2;
  border-right:1px solid #eef0f2;
  background:#ffffff;
  padding:12px 0;
  min-width:170px;
  max-height:none;
}
.ma-dash2-dp-preset{
  padding:10px 22px;
  font-size:13px;
  color:#374151;
  cursor:pointer;
  transition:background .12s, color .12s;
  font-weight:500;
  border-left:3px solid transparent;
}
.ma-dash2-dp-preset:hover{
  background:#f3f4f6;
  color:#111827;
}
.ma-dash2-dp-preset.active{
  background:var(--brand);
  color:#ffffff !important;
  font-weight:600;
  border-left-color:var(--brand);
}

.ma-dash2-dp-cals{
  grid-column:2;
  grid-row:1;
  display:flex;
  padding:16px 20px;
  gap:24px;
  min-width:0;
}
.ma-dash2-cal{ min-width:220px; flex:1; }

/* Calendar header */
.ma-dash2-cal-hdr{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:12px;
}
.ma-dash2-cal-nav{
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px 8px;
  border-radius:4px;
  color:#374151;
  font-size:18px;
  line-height:1;
  font-family:inherit;
}
.ma-dash2-cal-nav:hover{ background:#f3f4f6; }
.ma-dash2-cal-mon,
.ma-dash2-cal-yr{
  position:relative;
  font-size:14px;
  font-weight:600;
  padding:4px 20px 4px 10px;
  cursor:pointer;
  border-radius:4px;
  background:transparent;
  border:none;
  color:#111827;
  font-family:inherit;
}
.ma-dash2-cal-mon:hover,
.ma-dash2-cal-yr:hover{ background:#f3f4f6; }
.ma-dash2-cal-mon::after,
.ma-dash2-cal-yr::after{
  content:'▾';
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  font-size:9px;
  color:#6b7280;
}

/* Calendar grid */
.ma-dash2-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:2px;
}
.ma-dash2-cal-dow{
  text-align:center;
  font-size:11px;
  color:#9ca3af;
  font-weight:600;
  padding:6px 0;
  text-transform:none;
}
.ma-dash2-cal-day{
  text-align:center;
  padding:8px 0;
  font-size:12.5px;
  cursor:pointer;
  color:#374151;
  position:relative;
  transition:background .1s, color .1s;
  border-radius:0;                    /* rectangular so range fill joins */
  font-weight:500;
}
.ma-dash2-cal-day.empty{ visibility:hidden; cursor:default; }
.ma-dash2-cal-day:hover:not(.empty):not(.start):not(.end){
  background:#e6f7ef;
  color:var(--brand);
}
/* In-range days: light-green rectangular fill */
.ma-dash2-cal-day.in{
  background:#e6f7ef;
  color:var(--brand);
}
/* Start / End cells: circular pill in brand green */
.ma-dash2-cal-day.start,
.ma-dash2-cal-day.end{
  background:var(--brand);
  color:#ffffff !important;
  font-weight:700;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(37,99,235,.25);
}
.ma-dash2-cal-day.today:not(.start):not(.end):not(.in){
  outline:1px dashed var(--brand);
  outline-offset:-3px;
}

/* Month/Year inline picker dropdown */
.ma-dash2-cal-picker{
  position:absolute;
  top:100%;
  left:0;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  z-index:20;
  padding:6px;
  max-height:220px;
  overflow-y:auto;
  min-width:100px;
}
.ma-dash2-cal-picker-item{
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  border-radius:4px;
  color:#374151;
  font-weight:500;
}
.ma-dash2-cal-picker-item:hover{ background:#f3f4f6; }
.ma-dash2-cal-picker-item.active{
  background:#e6f7ef;
  color:var(--brand);
  font-weight:600;
}

/* Foot bar */
.ma-dash2-dp-foot{
  grid-column:2;
  grid-row:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  border-top:1px solid #eef0f2;
  gap:12px;
}
.ma-dash2-dp-sel{
  font-size:13px;
  color:#374151;
  font-weight:500;
}
.ma-dash2-dp-btns{ display:flex; gap:10px; }
.ma-dash2-dp-cancel{
  background:#ffffff;
  border:1px solid #d1d5db;
  color:#374151;
  border-radius:6px;
  padding:8px 20px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.ma-dash2-dp-cancel:hover{ background:#f3f4f6; }
.ma-dash2-dp-apply{
  background:var(--brand);
  border:none;
  color:#ffffff;
  border-radius:6px;
  padding:8px 22px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:filter .12s;
}
.ma-dash2-dp-apply:hover{ filter:brightness(1.05); }

/* Responsive — on narrow viewports the picker becomes single-column */
@media(max-width:820px){
  .ma-dash2-dp{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr auto !important;
    min-width:340px;
  }
  .ma-dash2-dp-side{
    grid-column:1;
    grid-row:1;
    border-right:none;
    border-bottom:1px solid #eef0f2;
    display:flex;
    flex-wrap:wrap;
    padding:6px;
    min-width:0;
  }
  .ma-dash2-dp-preset{ padding:6px 10px; font-size:12px; border-left:none; }
  .ma-dash2-dp-cals{ grid-column:1; grid-row:2; flex-direction:column; gap:16px; }
  .ma-dash2-dp-foot{ grid-column:1; grid-row:3; }
}

/* v3.9.302 — MOBILE (<=600px): full-viewport modal so the picker never
   overflows the screen. Previously the dropdown was anchored to the
   trigger button with position:absolute → on phones the whole popup
   went off-screen to the right. Now we detach it entirely: it fills
   the viewport with a backdrop scrim so the user can pick, apply, or
   cancel without any horizontal scroll. */
@media(max-width:600px){
  .ma-dash2-dp{
    /* Detach from the wrap — become a fixed overlay */
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    margin:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    min-width:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    z-index:9999 !important;
    background:#fff !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr auto !important;
    overflow-y:auto !important;
    /* Preserve inner scroll for calendars */
    -webkit-overflow-scrolling:touch;
  }
  /* Backdrop scrim under the picker */
  body:has(.ma-dash2-dp:not([style*="display: none"]):not([style*="display:none"])):before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.32);
    z-index:9998;
    animation:maDpFadeIn .18s ease-out;
  }
  @keyframes maDpFadeIn{ from{opacity:0} to{opacity:1} }

  .ma-dash2-dp-side{
    grid-column:1; grid-row:1;
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
    padding:10px 12px 12px;
    border-right:none;
    border-bottom:1px solid #eef0f2;
    min-width:0;
    max-height:none;
    background:#fff;
  }
  .ma-dash2-dp-preset{
    padding:9px 12px !important;
    font-size:12.5px !important;
    border-left:none !important;
    border-radius:6px;
    background:#f3f4f6;
    text-align:center;
  }
  .ma-dash2-dp-preset.active{
    background:var(--brand) !important;
    color:#fff !important;
  }
  .ma-dash2-dp-cals{
    grid-column:1; grid-row:2;
    flex-direction:column !important;
    gap:14px !important;
    padding:14px 12px !important;
    overflow-y:auto;
  }
  .ma-dash2-cal{ min-width:0 !important; width:100% !important; }
  .ma-dash2-cal-grid{ gap:2px; }
  .ma-dash2-cal-day{ padding:9px 0 !important; font-size:13px !important; }
  .ma-dash2-dp-foot{
    grid-column:1; grid-row:3;
    padding:12px 14px !important;
    background:#fff;
    border-top:1px solid #eef0f2;
    position:sticky;
    bottom:0;
    z-index:2;
  }
  .ma-dash2-dp-sel{ font-size:12px !important; }
  .ma-dash2-dp-cancel, .ma-dash2-dp-apply{ padding:10px 18px !important; font-size:13px !important; }

  /* Right-anchor the trigger's label — the popup is no longer positioned to
     the button. Keep the pill readable at narrow widths. */
  .ma-dash2-dr{ font-size:12.5px !important; padding:8px 12px !important; }
  .ma-dash2-refresh{ font-size:12.5px !important; padding:8px 12px !important; }
  .ma-dash2-hdr{ flex-wrap:wrap; gap:8px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.303 — TOP-NAV MEGA MENUS
   Progressive enhancement: when the JS marks a `.ma-subnav` as `.ma-mega`, we
   morph it from the plain vertical dropdown into a multi-column mega panel
   with per-item description, optional section headers, and an optional right-
   side promo card. The existing `.ma-tab.ma-has-sub:hover .ma-subnav{display:block}`
   rule still triggers open — this stylesheet only changes the *look* of what's
   shown.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────────────── */
.ma-subnav.ma-mega{
  display:none;
  padding:22px 22px 20px;
  min-width:520px;
  max-width:min(1080px, calc(100vw - 40px));
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-top:2.5px solid var(--brand, var(--brand));
  border-radius:0 0 14px 14px;
  box-shadow:0 24px 48px rgba(15,23,42,.14);
  z-index:200;
  animation:maSubIn .16s ease;
  /* Grid: main content + optional promo card on the right */
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
}
.ma-tab.ma-has-sub:hover .ma-subnav.ma-mega{ display:grid; }

/* When a promo card is present, add a second column for it */
.ma-subnav.ma-mega:has(.ma-mega-promo){
  grid-template-columns:1fr 220px;
}

/* Auto-fit width to content by removing global min for single-column menus */
.ma-subnav.ma-mega.ma-mega-c1{ min-width:360px; max-width:420px; }
.ma-subnav.ma-mega.ma-mega-c2{ min-width:520px; }
.ma-subnav.ma-mega.ma-mega-c3{ min-width:720px; }
.ma-subnav.ma-mega.ma-mega-c4{ min-width:920px; }
/* v3.9.773 — Reports is the only five-group menu, and `.ma-mega-c5` — the
   class the script has been adding since v3.9.304 — had no CSS whatsoever.
   With no width rule it kept the base 1080px cap, and with no column rule its
   grid fell back to repeat(auto-fit, minmax(220px,1fr)). Five 220px columns
   plus gaps need ~1204px but only ~1036px was usable, so auto-fit laid out
   FOUR and pushed "Inventory & Other" onto a second row. That second row made
   the panel taller than the window, fitMega() then capped it, and the result
   was the scrolling box with its first row cut off. */
.ma-subnav.ma-mega.ma-mega-c5{
  min-width:1180px;
  max-width:min(1300px, calc(100vw - 28px));
}

/* Push the right-most tabs' menu inward so it doesn't run off-screen */
.ma-tab.ma-sub-right .ma-subnav.ma-mega{ left:auto; right:0; }

/* ── Grid of items ─────────────────────────────────────────────────────── */
.ma-subnav.ma-mega .ma-mega-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px 26px;
}
.ma-subnav.ma-mega.ma-mega-c1 .ma-mega-grid{ grid-template-columns:1fr; }
.ma-subnav.ma-mega.ma-mega-c2 .ma-mega-grid{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
.ma-subnav.ma-mega.ma-mega-c3 .ma-mega-grid{ grid-template-columns:repeat(3, minmax(220px, 1fr)); }
.ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{ grid-template-columns:repeat(4, minmax(200px, 1fr)); }
/* v3.9.773 — minmax(0,1fr) rather than a px floor: the five columns then
   share whatever width there is and simply narrow on a smaller screen,
   instead of wrapping a column onto a second row. */
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px 18px;
}

/* The tallest Reports column carries nine items, so the rows are tightened a
   little here — smaller icon, less vertical padding — to keep the panel short
   enough to sit under the nav bar without scrolling on a laptop screen. */
.ma-subnav.ma-mega.ma-mega-c5 .ma-subnav-lnk{
  grid-template-columns:28px 1fr;
  gap:9px;
  padding:6px 9px;
  line-height:1.3;
}
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-ico{ width:28px; height:28px; border-radius:7px; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-ico svg{ width:15px; height:15px; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-title{ font-size:12.8px; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-desc{ font-size:10.8px; line-height:1.32; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-colhdr{ padding:0 9px 6px; font-size:10.5px; }

/* Below 1240px the 1180px panel no longer clears the window edge, so the menu
   drops to three columns and is allowed to scroll — still far better than a
   stray column stranded on its own row. */
@media (max-width:1239px){
  .ma-subnav.ma-mega.ma-mega-c5{ min-width:0; max-width:calc(100vw - 24px); }
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:820px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Flat grid (no groups) — items become the grid children directly, so
   grid-auto-flow keeps them evenly distributed */
.ma-subnav.ma-mega .ma-mega-grid.ma-mega-grid-flat{
  gap:6px 26px;
  grid-auto-flow:row;
}

/* ── Column with a heading ─────────────────────────────────────────────── */
.ma-mega-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-mega-colhdr{
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
  color:#6b7280;
  text-transform:uppercase;
  padding:0 12px 8px;
  margin-bottom:2px;
  border-bottom:1px solid #f1f3f5;
  margin-left:2px; margin-right:2px;
}

/* ── Menu item ─────────────────────────────────────────────────────────── */
.ma-subnav.ma-mega .ma-subnav-lnk{
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:start;
  gap:10px;
  padding:9px 12px;
  border-radius:8px;
  color:#111827;
  background:transparent;
  transition:background .12s, color .12s;
  cursor:pointer;
  white-space:normal;
  line-height:1.35;
}
.ma-subnav.ma-mega .ma-subnav-lnk:hover{
  background:#f3fbf7;
  color:var(--brand, var(--brand));
}
.ma-subnav.ma-mega .ma-subnav-lnk.on{
  background:#e6f7ef;
  color:var(--brand, var(--brand));
}

.ma-mega-ico{
  width:34px; height:34px;
  border-radius:8px;
  background:#f3f4f6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#6b7280;
  transition:background .12s, color .12s;
}
.ma-mega-ico svg{ width:17px; height:17px; }
.ma-subnav.ma-mega .ma-subnav-lnk:hover .ma-mega-ico,
.ma-subnav.ma-mega .ma-subnav-lnk.on   .ma-mega-ico{
  background:var(--brand-bg, #e6f7ef);
  color:var(--brand, var(--brand));
}

.ma-mega-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-mega-title{
  font-size:13.5px;
  font-weight:600;
  color:inherit;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-mega-desc{
  font-size:11.5px;
  color:#6b7280;
  font-weight:400;
  line-height:1.35;
  white-space:normal;
}
.ma-subnav.ma-mega .ma-subnav-lnk:hover .ma-mega-desc{ color:#4b5563; }

/* ── Right-side promo card ─────────────────────────────────────────────── */
/* v3.9.339 — Promo card now uses the plugin's BRAND-BLUE palette
   (was greenish #f3fbf7 → #e6f7ef which felt disconnected from the
   rest of the app), and the tag no longer takes flex:1 — that was
   stretching the description to fill the column height, dumping a
   massive gap between it and the "New Quotation" button. */
.ma-mega-promo{
  background:linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border:1px solid #BFDBFE;
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  align-self:start;                /* don't stretch to fill parent height */
}
.ma-mega-promo-ico{
  width:44px; height:44px;
  border-radius:10px;
  background:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--brand, #2563EB);
  box-shadow:0 2px 6px rgba(37,99,235,.15);
}
.ma-mega-promo-ico svg{ width:22px; height:22px; }
.ma-mega-promo-title{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  line-height:1.2;
  margin-top:2px;
}
.ma-mega-promo-tag{
  font-size:12px;
  color:#4b5563;
  line-height:1.4;
  /* No flex:1 — let the description keep its natural height so the
     button sits DIRECTLY below it instead of at the card's bottom edge. */
}
.ma-mega-promo-btn{
  background:var(--brand, #2563EB);
  color:#ffffff;
  border:none;
  border-radius:7px;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:filter .12s, transform .12s;
  margin-top:6px;                  /* small breathing room, was margin-top:auto */
  text-align:center;
}
.ma-mega-promo-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* ── Responsive: at ≤1024px the mega menu collapses to a taller 2-col
      layout without the promo card; below 900px it becomes 1-col to
      match the eventual mobile sidebar drawer style. ────────────────────── */
@media(max-width:1200px){
  .ma-subnav.ma-mega.ma-mega-c4{ min-width:760px; }
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{ grid-template-columns:repeat(3, minmax(200px, 1fr)); }
}
@media(max-width:1024px){
  .ma-subnav.ma-mega{ max-width:calc(100vw - 40px); }
  .ma-subnav.ma-mega:has(.ma-mega-promo){ grid-template-columns:1fr; }
  .ma-mega-promo{ display:none; }
  .ma-subnav.ma-mega.ma-mega-c3 .ma-mega-grid,
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
}
@media(max-width:900px){
  .ma-subnav.ma-mega{ min-width:auto; padding:16px; }
  .ma-subnav.ma-mega .ma-mega-grid{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.304 — Mega menu fixes for Reports (5-col) and Other Documents (4-col)
     • Add .ma-mega-c5 support (was capped at c4 → 6 groups wrapped to 2 rows)
     • Tighten column min-width and gaps for the larger menus so they fit
       within reasonable viewport widths without pushing off-screen
     • Ensure the max-width safety kicks in at all viewport sizes (not only
       at the earlier 1024px breakpoint)
════════════════════════════════════════════════════════════════════════════════ */

/* Base: hard cap on total width so a very wide menu never bleeds off-screen. */
.ma-subnav.ma-mega{
  max-width:min(1240px, calc(100vw - 32px)) !important;
}

/* 5-column variant for Reports — tighter columns, no promo card */
.ma-subnav.ma-mega.ma-mega-c5{
  min-width:1000px;
}
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{
  grid-template-columns:repeat(5, minmax(180px, 1fr));
  gap:14px 18px;
}
/* When the report menu opens, we don't want the "auto-fit" fallback to
   kick in on the outer grid — force a single main-content column. */
.ma-subnav.ma-mega.ma-mega-c5{
  grid-template-columns:1fr;
}
/* Tighter item padding for 5-col so long titles have room to breathe */
.ma-subnav.ma-mega.ma-mega-c5 .ma-subnav-lnk{
  grid-template-columns:28px 1fr;
  gap:8px;
  padding:7px 8px;
}
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-ico{
  width:28px; height:28px; border-radius:6px;
}
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-ico svg{ width:14px; height:14px; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-title{ font-size:12.5px; }
.ma-subnav.ma-mega.ma-mega-c5 .ma-mega-desc{ font-size:11px; line-height:1.3; }

/* 4-column variant with 2-col outer grid (main+promo) — Other Documents */
.ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo){
  min-width:1000px;
}
.ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{
  grid-template-columns:repeat(4, minmax(180px, 1fr));
  gap:16px 20px;
}

/* Responsive step-down: at narrower viewports drop columns proportionally */
@media(max-width:1300px){
  .ma-subnav.ma-mega.ma-mega-c5{ min-width:auto; }
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{
    grid-template-columns:repeat(4, minmax(180px, 1fr));
  }
}
@media(max-width:1100px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{
    grid-template-columns:repeat(3, minmax(200px, 1fr));
  }
  .ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo){
    min-width:auto;
  }
  .ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo){ grid-template-columns:1fr; }
  .ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo) .ma-mega-promo{ display:none; }
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{
    grid-template-columns:repeat(3, minmax(200px, 1fr));
  }
}
@media(max-width:900px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid,
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{
    grid-template-columns:repeat(2, minmax(180px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.305 — Fix: promo-card tagline overflowing the card boundary
     The parent `.ma-tab` sets `white-space:nowrap` (so the tab labels don't
     wrap), and that value is INHERITED by every descendant. The mega-menu
     item title/desc override it explicitly, but the promo card and its text
     did not — so the "Business Documents · Quotations, delivery challans…"
     tagline was rendering on a single line that ran past the card edge.
     Fix: force `white-space:normal` on the promo card subtree.
════════════════════════════════════════════════════════════════════════════════ */
.ma-mega-promo,
.ma-mega-promo-title,
.ma-mega-promo-tag{
  white-space:normal !important;
  overflow-wrap:break-word;
  word-break:normal;
}
/* Title still stays on one line but truncates gracefully if the card is narrow */
.ma-mega-promo-title{
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.306 — Sales / Purchase / Expense KPI cards — distinctive redesign
     Design goals:
       • Break from the generic "3 white cards with a number" pattern many
         Indian billing apps use (Vyapar / Zoho Books / Tally look-alike)
         which was the copyright-claim concern.
       • Each card has its own accent colour (emerald · indigo · amber) with
         a matching left border-bar, gradient icon-badge, subtle diagonal
         background wash, and a colour-tinted area sparkline at the bottom.
       • Trend chip in the top-right shows % change vs the previous period.
       • Bottom row shows a compact secondary metric (GST · invoice count).
════════════════════════════════════════════════════════════════════════════════ */

.ma-kpi3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-bottom:22px;
}
@media(max-width:1100px){ .ma-kpi3{ grid-template-columns:1fr; } }

/* v3.9.475 — When Sales is a full-width hero above, the remaining
   Purchase + Expense/Income cards use a 2-col grid instead of 3-col. */
.ma-kpi3.ma-kpi3-2col{ grid-template-columns:repeat(2, 1fr); }
@media(max-width:1100px){ .ma-kpi3.ma-kpi3-2col{ grid-template-columns:1fr; } }

/* v3.9.476 — Expense/Income row after both heros. */
.ma-kpi3.ma-kpi3-1col{ grid-template-columns:1fr; }

/* v3.9.476 — Wrapper row for the Sales + Purchase heros. On desktop
   they sit 50/50; on narrower screens they stack full-width. Individual
   hero body layouts inside adapt via their own responsive rules. */
.ma-shero-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:22px;
}
@media(max-width:1200px){
  .ma-shero-row{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.475 — SALES OVERVIEW HERO
   Full-width dashboard card that pairs a big KPI panel (Total Sales +
   GST Collected) with a large area chart, plus four period-comparison
   cards along the bottom. Design mirrors the reference image the user
   provided — clean white surface, green accent, light typography.
════════════════════════════════════════════════════════════════════ */
.ma-shero{
  background:#ffffff;
  border:1px solid #eef0f3;
  border-radius:16px;
  padding:24px 26px 22px;
  margin-bottom:22px;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
html[data-theme="dark"] .ma-shero{
  background:var(--surf, #1e293b);
  border-color:rgba(255,255,255,.08);
}

/* ── Header ── */
.ma-shero-hdr{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.ma-shero-hdr-l{ display:flex; align-items:center; gap:14px; min-width:0; }
.ma-shero-icon{
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:12px;
  background:#10B981;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(16,185,129,.24);
}
.ma-shero-hdr-txt{ min-width:0; }
.ma-shero-title{
  font-size:20px; font-weight:800; line-height:1.15;
  color:var(--text, #0F172A);
  letter-spacing:-0.4px;
}
.ma-shero-sub{
  font-size:13.5px; color:var(--muted, #6B7280);
  margin-top:2px;
}
.ma-shero-hdr-r{ text-align:right; flex-shrink:0; }
.ma-shero-trend{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:#D1FAE5;
  color:#059669;
  font-weight:700; font-size:13px;
  transition:background .15s, color .15s;
}
/* Down / flat states — _d2SetTrend adds .up / .down / .flat */
.ma-shero-trend.down{
  background:#FEE2E2; color:#DC2626;
}
.ma-shero-trend.down .ma-shero-trend-ico{ transform:rotate(180deg); }
.ma-shero-trend.flat{
  background:#F3F4F6; color:#6B7280;
}
.ma-shero-trend.flat .ma-shero-trend-ico{ display:none; }
.ma-shero-trend-sub{
  font-size:11.5px; color:var(--muted, #9CA3AF);
  margin-top:4px;
}

/* ── Body: two columns (KPI left · Chart right) ── */
.ma-shero-body{
  display:grid;
  grid-template-columns:minmax(220px, 300px) 1fr;
  gap:26px;
  align-items:stretch;
  padding:8px 0 20px;
}
@media(max-width:900px){
  .ma-shero-body{ grid-template-columns:1fr; gap:16px; }
}
.ma-shero-left{
  display:flex; flex-direction:column; justify-content:center;
  gap:0;
}
.ma-shero-kpi{ padding:6px 0; }
.ma-shero-lbl{
  font-size:11.5px; font-weight:700;
  color:var(--muted, #6B7280);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.ma-shero-amt{
  font-size:34px; font-weight:800; line-height:1.1;
  color:var(--text, #0F172A);
  letter-spacing:-0.6px;
  font-feature-settings:"tnum";
}
.ma-shero-amt-gst{
  color:#10B981;
  font-size:26px;
}
.ma-shero-amt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ma-shero-gst-ico{
  width:36px; height:36px; border-radius:10px;
  background:#D1FAE5; color:#10B981;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-shero-date{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--muted, #6B7280);
  margin-top:10px;
}
.ma-shero-date svg{ color:#10B981; flex-shrink:0; }
.ma-shero-sep{
  height:1px;
  background:linear-gradient(90deg, transparent, #E5E7EB 30%, #E5E7EB 70%, transparent);
  margin:16px 0;
}
html[data-theme="dark"] .ma-shero-sep{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent); }

/* ── Chart panel ── */
.ma-shero-right{
  min-width:0;   /* let the chart shrink inside the grid cell */
}
.ma-shero-chart{
  width:100%;
  height:260px;
  position:relative;
}
.ma-shero-chart svg{
  width:100%; height:100%;
  display:block;
}
@media(max-width:900px){
  .ma-shero-chart{ height:220px; }
}

/* ── Bottom comparison strip ── */
.ma-shero-cmp{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding:16px 8px 4px;
  margin-top:8px;
  border-radius:12px;
  border:1px solid #E5E7EB;
  background:#FAFBFC;
}
@media(max-width:900px){
  .ma-shero-cmp{ grid-template-columns:repeat(2, 1fr); gap:12px 0; padding:14px 6px; }
}
@media(max-width:480px){
  .ma-shero-cmp{ grid-template-columns:1fr; }
}
html[data-theme="dark"] .ma-shero-cmp{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.06);
}
.ma-shero-cmp-card{
  display:flex; align-items:center; gap:12px;
  padding:8px 14px;
  border-right:1px solid #EEF0F3;
  min-width:0;
}
.ma-shero-cmp-card:last-child{ border-right:none; }
@media(max-width:900px){
  .ma-shero-cmp-card:nth-child(2){ border-right:none; }
  .ma-shero-cmp-card:nth-child(1),
  .ma-shero-cmp-card:nth-child(2){ border-bottom:1px solid #EEF0F3; padding-bottom:14px; }
}
@media(max-width:480px){
  .ma-shero-cmp-card{ border-right:none; border-bottom:1px solid #EEF0F3; }
  .ma-shero-cmp-card:last-child{ border-bottom:none; }
}
html[data-theme="dark"] .ma-shero-cmp-card{ border-color:rgba(255,255,255,.06); }
.ma-shero-cmp-icon{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.ma-shero-cmp-body{ min-width:0; }
.ma-shero-cmp-lbl{
  font-size:10.5px; font-weight:700;
  color:var(--muted, #6B7280);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:2px;
}
.ma-shero-cmp-amt{
  font-size:15.5px; font-weight:800;
  color:var(--text, #0F172A);
  line-height:1.2;
  font-feature-settings:"tnum";
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-shero-cmp-pct{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:700;
  color:#059669;
  margin-top:2px;
}
.ma-shero-cmp-pct.is-down{ color:#DC2626; }

/* Icon tints per comparison card — matches the reference image */
.shero-icon-green  { background:#D1FAE5; color:#059669; }
.shero-icon-blue   { background:#DBEAFE; color:#2563EB; }
.shero-icon-purple { background:#EDE9FE; color:#7C3AED; }
.shero-icon-orange { background:#FED7AA; color:#EA580C; }
/* v3.9.476 — Indigo tint used by the Purchase hero's "This Week" card
   (mirrors the green tint on Sales' "This Week" card). */
.shero-icon-indigo { background:#E0E7FF; color:#4F46E5; }

/* v3.9.476 — PURCHASE variant colours. Sales uses green as the
   primary accent; Purchase uses indigo so the two cards are visually
   distinguishable at a glance. Icon, GST amount, GST badge and the
   line chart's colour scheme all follow the variant. */
.ma-shero-purchase .ma-shero-icon{
  background:#4F46E5;
  box-shadow:0 4px 10px rgba(79,70,229,.24);
}
.ma-shero-purchase .ma-shero-date svg{ color:#4F46E5; }
.ma-shero-amt-pur{ color:#4F46E5; font-size:26px; }
.ma-shero-gst-ico-pur{ background:#E0E7FF; color:#4F46E5; }

/* v3.9.476 — Since Sales + Purchase now sit side-by-side, each hero
   is roughly half the previous width. Tighten paddings + typography
   inside the hero body so nothing feels cramped, but only when we're
   actually inside a .ma-shero-row (full-width usage still gets the
   original spacious look). */
.ma-shero-row .ma-shero{ margin-bottom:0; padding:20px 22px 18px; }
.ma-shero-row .ma-shero-body{
  grid-template-columns:minmax(180px, 240px) 1fr;
  gap:20px;
  padding:6px 0 16px;
}
.ma-shero-row .ma-shero-amt{ font-size:28px; }
.ma-shero-row .ma-shero-amt-gst,
.ma-shero-row .ma-shero-amt-pur{ font-size:22px; }
.ma-shero-row .ma-shero-chart{ height:220px; }
.ma-shero-row .ma-shero-cmp{ padding:12px 4px 2px; }
.ma-shero-row .ma-shero-cmp-card{ padding:6px 10px; gap:10px; }
.ma-shero-row .ma-shero-cmp-icon{ width:38px; height:38px; }
.ma-shero-row .ma-shero-cmp-amt{ font-size:14px; }
.ma-shero-row .ma-shero-title{ font-size:18px; }
.ma-shero-row .ma-shero-sub{ font-size:12.5px; }

@media(max-width:900px){
  .ma-shero-row .ma-shero-body{ grid-template-columns:1fr; }
  .ma-shero-row .ma-shero-chart{ height:200px; }
}

/* v3.9.478 — Mobile polish for hero cards.
   At the phone breakpoint the previous rules left several rough
   edges: the header trend pill got squeezed to the right and pushed
   the title/subtitle text; the ₹ amount overflowed on narrow
   viewports; the comparison-strip border-rights showed as vertical
   lines in the middle of stacked cards; and SVG axis labels went
   near-invisible when the chart was stretched down. Fixed below. */
@media(max-width:640px){
  .ma-shero-row{ gap:14px; margin-bottom:16px; }

  /* Card — tighter padding + smaller radius on phones */
  .ma-shero-row .ma-shero{
    padding:14px 14px 12px;
    border-radius:12px;
  }

  /* Header — allow the trend pill to move to its own row if the title
     is long; icon shrinks, title stays legible. */
  .ma-shero-row .ma-shero-hdr{
    flex-wrap:wrap;
    gap:10px 12px;
    margin-bottom:10px;
  }
  .ma-shero-row .ma-shero-icon{
    width:40px; height:40px; border-radius:10px;
  }
  .ma-shero-row .ma-shero-icon svg{ width:22px; height:22px; }
  .ma-shero-row .ma-shero-title{ font-size:16px; }
  .ma-shero-row .ma-shero-sub{ font-size:12px; }
  .ma-shero-row .ma-shero-hdr-r{ text-align:right; }
  .ma-shero-row .ma-shero-trend{
    padding:4px 10px;
    font-size:12px;
    gap:5px;
  }
  .ma-shero-row .ma-shero-trend-sub{ font-size:10.5px; margin-top:2px; }

  /* Body — chart shorter, tighter gap */
  .ma-shero-row .ma-shero-body{
    gap:14px;
    padding:4px 0 12px;
  }
  .ma-shero-row .ma-shero-chart{ height:180px; }

  /* KPI amounts — smaller so they don't overflow at ₹4,70,59,213 length */
  .ma-shero-row .ma-shero-lbl{ font-size:10.5px; margin-bottom:4px; }
  .ma-shero-row .ma-shero-amt{ font-size:22px; letter-spacing:-0.3px; }
  .ma-shero-row .ma-shero-amt-gst,
  .ma-shero-row .ma-shero-amt-pur{ font-size:18px; }

  /* Date range pill — smaller + wraps to a new line if the range is long */
  .ma-shero-row .ma-shero-date{
    font-size:11.5px;
    margin-top:6px;
    flex-wrap:wrap;
    gap:4px 6px;
  }

  /* Separator — tighter vertical space */
  .ma-shero-row .ma-shero-sep{ margin:12px 0; }

  /* GST document badge — smaller, still touch-friendly */
  .ma-shero-row .ma-shero-gst-ico,
  .ma-shero-row .ma-shero-gst-ico-pur{
    width:30px; height:30px; border-radius:8px;
  }
  .ma-shero-row .ma-shero-gst-ico svg,
  .ma-shero-row .ma-shero-gst-ico-pur svg{ width:14px; height:14px; }

  /* Comparison strip: 2×2 on mobile with proper card borders (no
     leftover vertical border-rights bisecting cards after wrap). */
  .ma-shero-row .ma-shero-cmp{
    padding:8px 4px 2px;
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .ma-shero-row .ma-shero-cmp-card{
    padding:8px 10px;
    gap:8px;
    border-right:1px solid #EEF0F3;
    border-bottom:none;
  }
  .ma-shero-row .ma-shero-cmp-card:nth-child(2n){ border-right:none; }
  .ma-shero-row .ma-shero-cmp-card:nth-child(1),
  .ma-shero-row .ma-shero-cmp-card:nth-child(2){
    border-bottom:1px solid #EEF0F3;
    padding-bottom:12px;
  }
  html[data-theme="dark"] .ma-shero-row .ma-shero-cmp-card{
    border-color:rgba(255,255,255,.06);
  }
  .ma-shero-row .ma-shero-cmp-icon{
    width:34px; height:34px; border-radius:8px;
  }
  .ma-shero-row .ma-shero-cmp-icon svg{ width:16px; height:16px; }
  .ma-shero-row .ma-shero-cmp-lbl{ font-size:9.5px; margin-bottom:1px; }
  .ma-shero-row .ma-shero-cmp-amt{ font-size:13px; }
  .ma-shero-row .ma-shero-cmp-pct{ font-size:10.5px; }
}

/* Very narrow phones (≤ 400 px) — comparison strip becomes a single
   column so amounts are never truncated on iPhone-SE-class devices. */
@media(max-width:400px){
  .ma-shero-row .ma-shero-cmp{ grid-template-columns:1fr; }
  .ma-shero-row .ma-shero-cmp-card{
    border-right:none;
    border-bottom:1px solid #EEF0F3;
    padding:10px;
  }
  .ma-shero-row .ma-shero-cmp-card:last-child{ border-bottom:none; }
  .ma-shero-row .ma-shero-cmp-card:nth-child(1),
  .ma-shero-row .ma-shero-cmp-card:nth-child(2){ padding-bottom:10px; }
}

/* v3.9.478 — SVG text scaling.
   The chart uses preserveAspectRatio="none" so paths stretch to fill
   the container, but text stretches too — at font-size:11 in the
   720×260 viewBox, labels became ~6-7 CSS px tall when scaled down
   to a 380-wide phone viewport. Bumped to 14/13 so labels stay
   legible after non-uniform scaling. */
.ma-shero-chart .shero-axis-lbl{
  font-size:14px;
}
@media(max-width:640px){
  .ma-shero-chart .shero-axis-lbl{ font-size:16px; }
}

/* Big area chart — axis labels + grid lines */
.ma-shero-chart .shero-axis-lbl{
  font-size:11px; fill:#9CA3AF; font-family:inherit;
}
.ma-shero-chart .shero-grid{ stroke:#E5E7EB; stroke-dasharray:4 4; }
html[data-theme="dark"] .ma-shero-chart .shero-axis-lbl{ fill:#94A3B8; }
html[data-theme="dark"] .ma-shero-chart .shero-grid{ stroke:rgba(255,255,255,.08); }

/* v3.9.477 — Hero-chart interactive tooltip. Dark navy background
   with a small downward pointer arrow, exactly matching the reference
   image the user uploaded. Position is set inline by JS; the arrow's
   horizontal offset is set via --shero-tt-arrow so it always points
   at the hovered data dot. */
.ma-shero-chart{ position:relative; }
.shero-pt-dot{ transition:r .12s ease; pointer-events:none; }
.shero-tt{
  position:absolute;
  min-width:200px;
  max-width:280px;
  background:#0F172A;
  color:#F8FAFC;
  border-radius:10px;
  padding:12px 14px 10px;
  font-size:12.5px;
  box-shadow:0 10px 28px rgba(15,23,42,.28);
  pointer-events:none;
  z-index:20;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
  --shero-tt-arrow:50%;
}
.shero-tt.on{ opacity:1; transform:translateY(0); }
.shero-tt-h{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  color:#94A3B8;
  text-transform:uppercase;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.shero-tt-r{
  display:flex; align-items:center; gap:8px;
  padding:3px 0;
  font-size:12.5px;
  line-height:1.3;
}
.shero-tt-bull{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
}
.shero-tt-lbl{
  flex:1;
  color:#CBD5E1;
  font-weight:500;
}
.shero-tt-val{
  color:#ffffff;
  font-weight:700;
  font-feature-settings:"tnum";
  white-space:nowrap;
}
/* Downward pointer arrow (default: tooltip is ABOVE the point). */
.shero-tt::after{
  content:"";
  position:absolute;
  left:var(--shero-tt-arrow, 50%);
  transform:translateX(-50%);
  bottom:-6px;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid #0F172A;
}
/* When tooltip flips BELOW the point (e.g. hover on top row of the
   chart), point the arrow upward instead. */
.shero-tt.below::after{
  bottom:auto;
  top:-6px;
  border-top:none;
  border-bottom:6px solid #0F172A;
}
/* ═════════════ END v3.9.475 SALES HERO ═════════════ */

/* Base card — accent variables get set per-variant below */
.ma-kpi3-card{
  --kpi3-accent:var(--brand);
  --kpi3-accent-dark:var(--brand-d);
  --kpi3-tint:var(--brand-bg);
  position:relative;
  background:#ffffff;
  border:1px solid #eef0f3;
  border-radius:14px;
  padding:20px 22px 0;
  min-height:220px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .18s, box-shadow .18s;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.ma-kpi3-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}

/* Per-card accent colours */
.ma-kpi3-sale{
  --kpi3-accent:var(--brand);         /* emerald */
  --kpi3-accent-dark:var(--brand-d);
  --kpi3-tint:var(--brand-bg);
}
.ma-kpi3-purchase{
  --kpi3-accent:#6366f1;         /* indigo */
  --kpi3-accent-dark:#4f46e5;
  --kpi3-tint:#eef2ff;
}
.ma-kpi3-expense{
  --kpi3-accent:#f59e0b;         /* amber */
  --kpi3-accent-dark:#F59E0B;
  --kpi3-tint:var(--brand-bg);
}

/* Left border-accent — 4px vertical bar coloured by --kpi3-accent */
.ma-kpi3-accent{
  position:absolute;
  top:0; left:0; bottom:0;
  width:4px;
  background:var(--kpi3-accent);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}

/* Subtle diagonal wash from the accent colour to transparent — very light
   so text stays readable but the card doesn't look plain white */
.ma-kpi3-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--kpi3-accent) 6%, transparent) 0%, transparent 55%);
  pointer-events:none;
  border-radius:14px;
}
/* Fallback for browsers without color-mix — accepts opacity via rgba hack */
@supports not (background: color-mix(in srgb, red, blue)){
  .ma-kpi3-card::before{
    background:linear-gradient(135deg, var(--kpi3-tint) 0%, transparent 55%);
  }
}

/* Header row: icon-badge + label + trend chip */
.ma-kpi3-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  z-index:1;
}
.ma-kpi3-badge{
  width:40px; height:40px;
  border-radius:11px;
  background:linear-gradient(135deg, var(--kpi3-accent) 0%, var(--kpi3-accent-dark) 100%);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px color-mix(in srgb, var(--kpi3-accent) 30%, transparent);
  flex-shrink:0;
}
@supports not (background: color-mix(in srgb, red, blue)){
  .ma-kpi3-badge{ box-shadow:0 4px 10px rgba(0,0,0,.12); }
}
.ma-kpi3-label{
  font-size:11px;
  font-weight:700;
  color:#6b7280;
  letter-spacing:.85px;
  text-transform:uppercase;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Trend chip — pill with up/down arrow + percentage */
.ma-kpi3-trend{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  background:var(--brand-bg);
  color:var(--brand-d);
  white-space:nowrap;
  flex-shrink:0;
}
.ma-kpi3-trend.down{
  background:#fef2f2;
  color:#dc2626;
}
.ma-kpi3-trend.down .ma-kpi3-trend-ico{ transform:rotate(180deg); }
.ma-kpi3-trend.flat{
  background:#f3f4f6;
  color:#6b7280;
}
.ma-kpi3-trend.flat .ma-kpi3-trend-ico{ display:none; }
.ma-kpi3-trend-ico{ flex-shrink:0; }

/* Body: big amount + subtext */
.ma-kpi3-body{
  position:relative;
  z-index:1;
  flex:1;
}
.ma-kpi3-amt{
  font-size:28px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.5px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-kpi3-amt span{ color:inherit; font-weight:inherit; }
.ma-kpi3-sub{
  font-size:12px;
  color:#6b7280;
  margin-top:6px;
  font-weight:500;
}
.ma-kpi3-sub span{ color:inherit; }
.ma-kpi3-dot{
  margin:0 4px;
  color:#cbd5e1;
}

/* Secondary metrics row (GST etc) */
.ma-kpi3-metrics{
  position:relative;
  z-index:1;
  display:flex;
  gap:16px;
  padding:10px 0 0;
  margin-top:12px;
  border-top:1px dashed #eef0f3;
}
.ma-kpi3-metric{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-kpi3-metric-lbl{
  font-size:10.5px;
  color:#9ca3af;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.ma-kpi3-metric-val{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  white-space:nowrap;
}

/* Area sparkline (bottom of Sales & Purchase cards) */
.ma-kpi3-chart{
  position:relative;
  z-index:0;
  height:56px;
  margin:12px -22px 0;
  padding:0;
  pointer-events:auto;
}
.ma-kpi3-chart svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.ma-kpi3-chart-area{
  fill:url(#kpi3AreaGrad);
  opacity:.7;
}
.ma-kpi3-chart-line{
  fill:none;
  stroke:var(--kpi3-accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ma-kpi3-chart-dot{
  fill:var(--kpi3-accent);
  stroke:#ffffff;
  stroke-width:2;
}
.ma-kpi3-chart-tip{
  position:absolute;
  background:#0f172a;
  color:#ffffff;
  border-radius:6px;
  padding:6px 10px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
  transform:translate(-50%, -100%);
  margin-top:-6px;
  display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.ma-kpi3-chart-tip.on{ display:block; }
.ma-kpi3-chart-tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:8px; height:8px;
  background:#0f172a;
  transform:translateX(-50%) rotate(45deg);
}

/* Expense/Income specific — split view with two cols instead of a single amount */
.ma-kpi3-expense .ma-kpi3-body{
  flex:1;
  display:flex;
  align-items:center;
}
.ma-kpi3-eirow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:center;
  width:100%;
}
.ma-kpi3-eicol{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.ma-kpi3-eicol-inc{
  padding-left:16px;
  border-left:1px solid #eef0f3;
}
.ma-kpi3-eicol-lbl{
  font-size:10.5px;
  font-weight:700;
  color:#9ca3af;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.ma-kpi3-eicol-val{
  font-size:19px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-kpi3-eicol-exp .ma-kpi3-eicol-val{ color:#dc2626; }
.ma-kpi3-eicol-inc .ma-kpi3-eicol-val{ color:var(--brand-d); }
.ma-kpi3-eicol-sub{
  font-size:11px;
  color:#9ca3af;
  font-weight:500;
}

/* Chart area for Expense/Income — donut or bar (compact) */
.ma-kpi3-eichart{
  position:relative;
  height:80px;
  margin:8px -22px 0;
  padding:8px 22px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:0;
}
.ma-kpi3-eichart-donut{ position:relative; display:flex; justify-content:center; align-items:center; }
.ma-kpi3-eichart-donut svg{ width:80px; height:80px; overflow:visible; display:block; }
.ma-kpi3-eichart-bars{ position:relative; flex:1; display:flex; justify-content:center; align-items:flex-end; height:100%; }
.ma-kpi3-eichart-bars svg{ width:100%; max-width:240px; height:100%; display:block; overflow:visible; }

/* Chart-type toggle button (compact) */
.ma-kpi3-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#ffffff;
  color:#6b7280;
  cursor:pointer;
  padding:0;
  transition:all .15s;
  flex-shrink:0;
}
.ma-kpi3-toggle:hover{
  border-color:var(--kpi3-accent);
  color:var(--kpi3-accent);
  background:var(--kpi3-tint);
}

/* Responsive tweaks */
@media(max-width:640px){
  .ma-kpi3-card{ padding:16px 18px 0; min-height:190px; }
  .ma-kpi3-amt{ font-size:24px; }
  .ma-kpi3-eicol-val{ font-size:17px; }
  .ma-kpi3-badge{ width:36px; height:36px; }
  .ma-kpi3-chart, .ma-kpi3-eichart{ margin-left:-18px; margin-right:-18px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.308 — New vs Existing Customer Sale — redesigned header + bars
     • Rich header: title + period totals on the left, colour-dot legend
       on the right (was a plain bottom legend with just labels)
     • Emerald green for New, violet for Existing (was flat grey)
     • Font sizes tuned to match the redesigned KPI cards elsewhere
════════════════════════════════════════════════════════════════════════════════ */

/* Header layout */
.ma-nve-hdr{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px solid #eef0f3;
}
.ma-nve-hdr-l{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ma-nve-hdr-r{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}

/* Summary line: "3 new · 12 existing" — colour-dotted counts */
.ma-nve-summary{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:#64748b;
  font-weight:500;
}
.ma-nve-sum-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.ma-nve-sum-item b{
  color:#0f172a;
  font-weight:700;
  font-size:13px;
}
.ma-nve-sum-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
.ma-nve-sum-dot-new{   background:var(--brand); }
.ma-nve-sum-dot-exist{ background:#8b5cf6; }
.ma-nve-sum-sep{ color:#cbd5e1; }

/* Legend chips in the top-right */
.ma-nve-hdr-r .ma-nve-lg-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:#334155;
  font-weight:600;
}
.ma-nve-lg-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.ma-nve-lg-dot-new{   background:var(--brand); }
.ma-nve-lg-dot-exist{ background:#8b5cf6; }

/* Body: give the chart more vertical space to breathe */
.ma-nve-card .ma-card-body{
  padding-top:14px;
}
.ma-nve-graph{ min-height:300px; }

/* SVG-side polish — hover feedback on the rounded bars */
.ma-nve-svg rect{ transition:opacity .12s, filter .12s; }
.ma-nve-svg rect:hover{ filter:brightness(0.92); opacity:1; }

/* Responsive — stack the legend below the summary on small screens */
@media(max-width:600px){
  .ma-nve-hdr-r{ width:100%; justify-content:flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.312 — Five new dashboard sections
     Row 1 (2-col):  Sales vs Purchase Overview  |  Income vs Expense Overview
     Row 2 (3-col):  Top Customers | Payment Summary | Recent Activities
════════════════════════════════════════════════════════════════════════════════ */

.ma-dash-overview-row,
.ma-dash-detail-row{
  margin-bottom:16px;
}

/* Card header legend (chips of "● Sales · ● Purchase") — right-aligned */
.ma-dash-hdr-legend{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}
.ma-dash-lg-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:#334155;
  font-weight:600;
}
.ma-dash-lg-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}

/* ── SALES vs PURCHASE (grouped-bar chart) ────────────────────────────────── */
.ma-dash-svp-chart{ min-height:260px; }
.ma-dash-svp-chart svg{ width:100%; height:auto; display:block; }

/* ── INCOME vs EXPENSE (dual line/area chart) ─────────────────────────────── */
.ma-dash-ive-chart{ min-height:260px; }
.ma-dash-ive-chart svg{ width:100%; height:auto; display:block; }

/* Shared chart hover tooltip — dark card, arrow, matches KPI tooltip elsewhere */
.ma-dash-chart-tip{
  position:absolute;
  background:#0f172a;
  color:#ffffff;
  border-radius:6px;
  padding:8px 12px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  pointer-events:none;
  z-index:100;
  transform:translate(-50%, -100%);
  margin-top:-8px;
  display:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  min-width:110px;
}
.ma-dash-chart-tip.on{ display:block; }
.ma-dash-chart-tip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:8px; height:8px;
  background:#0f172a;
  transform:translateX(-50%) rotate(45deg);
}
.ma-dash-chart-tip .tip-title{
  font-size:11px;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:4px;
  font-weight:600;
}
.ma-dash-chart-tip .tip-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
}
.ma-dash-chart-tip .tip-row:last-child{ margin-bottom:0; }
.ma-dash-chart-tip .tip-dot{
  width:8px; height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.ma-dash-chart-tip .tip-key{ color:#cbd5e1; font-weight:500; }
.ma-dash-chart-tip .tip-val{ color:#ffffff; font-weight:700; margin-left:auto; }

/* Common wrapper so tooltips can be absolutely positioned inside a chart */
.ma-graph{ position:relative; }

/* ── TOP CUSTOMERS ───────────────────────────────────────────────────────── */
.ma-dash-topc .ma-card-body{ padding-top:8px; padding-bottom:12px; }
.ma-dash-topc-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.ma-dash-topc-row{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f1f3f5;
}
.ma-dash-topc-row:last-child{ border-bottom:none; }
.ma-dash-topc-ico{
  width:34px; height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef2ff;
  color:#4f46e5;
  flex-shrink:0;
}
.ma-dash-topc-ico svg{ width:16px; height:16px; }
.ma-dash-topc-name{
  font-size:13.5px;
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.ma-dash-topc-amt{
  font-size:13.5px;
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
}

/* Shared "View All →" link */
.ma-dash-viewall{
  display:block;
  text-align:center;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #f1f3f5;
  color:#3b82f6;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:color .12s;
}
.ma-dash-viewall:hover{ color:var(--brand-d); }
.ma-dash-arrow{ margin-left:4px; display:inline-block; transition:transform .12s; }
.ma-dash-viewall:hover .ma-dash-arrow{ transform:translateX(3px); }

/* ── PAYMENT SUMMARY (donut + legend) ────────────────────────────────────── */
.ma-dash-paysum .ma-card-body{ padding-top:14px; padding-bottom:14px; }
.ma-dash-paysum-body{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
}
.ma-dash-paysum-donut{
  width:130px; height:130px;
  position:relative;
  flex-shrink:0;
}
.ma-dash-paysum-donut svg{ width:100%; height:100%; overflow:visible; display:block; }
.ma-dash-paysum-legend{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.ma-dash-paysum-lgrow{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:8px;
  align-items:center;
  font-size:12.5px;
  color:#334155;
}
.ma-dash-paysum-lgdot{
  width:10px; height:10px;
  border-radius:50%;
  display:inline-block;
  margin-top:6px;
}
.ma-dash-paysum-lgcol{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-dash-paysum-lglbl{
  font-size:12.5px;
  color:#334155;
  font-weight:600;
}
.ma-dash-paysum-lgamt{
  font-size:12.5px;
  color:#64748b;
  font-weight:500;
}
.ma-dash-paysum-lgpct{
  font-size:13px;
  color:#0f172a;
  font-weight:700;
  align-self:flex-start;
}

/* Donut slice hover interactivity */
.ma-dash-paysum-donut path{
  transition:opacity .12s, filter .12s;
  cursor:pointer;
}
.ma-dash-paysum-donut path:hover{
  filter:brightness(0.9);
}

/* ── RECENT ACTIVITIES ───────────────────────────────────────────────────── */
.ma-dash-recact .ma-card-body{ padding-top:8px; padding-bottom:12px; }
.ma-dash-recact-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.ma-dash-recact-row{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f1f3f5;
}
.ma-dash-recact-row:last-child{ border-bottom:none; }
.ma-dash-recact-ico{
  width:34px; height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.ma-dash-recact-ico svg{ width:16px; height:16px; }
/* Kind-based colour palette matching the reference image */
.ma-dash-recact-ico-sale     { background:var(--brand-bg2); color:var(--brand); }
.ma-dash-recact-ico-payment  { background:#dcfce7; color:#16a34a; }
.ma-dash-recact-ico-purchase { background:#ffedd5; color:#ea580c; }
.ma-dash-recact-ico-expense  { background:#fee2e2; color:#dc2626; }
.ma-dash-recact-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-dash-recact-title{
  font-size:13px;
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-dash-recact-sub{
  font-size:12px;
  font-weight:500;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-dash-recact-time{
  font-size:11.5px;
  color:#94a3b8;
  font-weight:500;
  white-space:nowrap;
  margin-top:4px;
}

/* Responsive: on narrow viewports collapse to 1 column */
@media(max-width:1024px){
  .ma-dash-overview-row{ grid-template-columns:1fr; }
  .ma-dash-detail-row{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .ma-dash-paysum-body{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:left;
  }
  .ma-dash-paysum-donut{ width:110px; height:110px; }
  .ma-dash-paysum-legend{ width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.315 — Click-to-open mega menu with pill-shaped highlight
     Matches the reference video: clicking a tab opens the mega menu and
     paints a rounded green pill around the active tab label. Hover still
     previews as before — click "pins" the menu open with the highlight.
════════════════════════════════════════════════════════════════════════════════ */

/* v3.9.339 — Cleaner active-tab state. The old pill highlight
   (border-radius:999px + inset box-shadow ring) made the tab look
   like an odd oval. Now the pinned-open state uses a subtle brand-bg
   tint + a bottom underline, matching the plain :hover feel. */
.ma-tab.ma-has-sub.open > .ma-tab-main{
  background: var(--brand-bg, #EFF6FF);
  color: var(--brand, #2563EB) !important;
  border-radius: 0;
  box-shadow: none;
  padding-left: 8px;
  padding-right: 8px;
  transition: background .16s ease, color .16s ease;
}
.ma-tab.ma-has-sub.open{
  border-bottom-color: var(--brand, #2563EB);
}
.ma-tab.ma-has-sub.open > .ma-tab-main .ma-nav-icon,
.ma-tab.ma-has-sub.open > .ma-tab-main .ma-caret{
  color: var(--brand, #2563EB);
}
/* Rotate caret 180° when the tab is open (a gentle open indicator) */
.ma-tab.ma-has-sub .ma-caret{
  display: inline-block;
  transition: transform .18s ease;
}
.ma-tab.ma-has-sub.open .ma-caret{ transform: rotate(180deg); }

/* Smoother transition for the base tab-main so click state animates in */
.ma-tab.ma-has-sub > .ma-tab-main{
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-radius .16s ease;
}

/* Show the mega menu when the tab is pinned open (click state) */
.ma-tab.ma-has-sub.open .ma-subnav.ma-mega{
  display: grid;
  /* Small entrance animation matching the hover feel */
  animation: maMegaIn .18s ease;
}
@keyframes maMegaIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* When a tab is pinned open, suppress hover-open on OTHER tabs — otherwise
   moving the mouse across the nav would flip through mega menus in rapid
   succession. The pinned tab still shows its own menu. */
.ma-tabnav:has(.ma-tab.ma-has-sub.open) .ma-tab.ma-has-sub:not(.open):hover .ma-subnav.ma-mega{
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.316 — Multi-company switcher: trigger, dropdown, modal
════════════════════════════════════════════════════════════════════════════════ */

/* Trigger — the topbar-logo becomes clickable and shows an "Add Another" hint */
.ma-topbar-logo.ma-cs-trigger{
  cursor:pointer;
  position:relative;
  padding:6px 10px 6px 8px;
  border-radius:10px;
  transition:background .14s;
  gap:10px;
}
.ma-topbar-logo.ma-cs-trigger:hover{
  background:rgba(255,255,255,.10);
}
.ma-cs-info{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.ma-cs-info .ma-topbar-biz{
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}
.ma-cs-add-link{
  font-size:11.5px;
  color:rgba(255,255,255,.75);
  font-weight:500;
  margin-top:2px;
  white-space:nowrap;
}
.ma-cs-plus{ font-weight:700; margin-right:1px; }
.ma-cs-caret{
  color:rgba(255,255,255,.7);
  flex-shrink:0;
  transition:transform .14s;
}
.ma-topbar-logo.ma-cs-trigger.open .ma-cs-caret{ transform:rotate(180deg); }

/* Dropdown menu */
.ma-cs-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:320px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.18);
  padding:10px 10px 8px;
  z-index:900;
  display:none;
  animation:maCsIn .16s ease;
  cursor:default;
}
.ma-topbar-logo.ma-cs-trigger.open .ma-cs-menu{ display:block; }
@keyframes maCsIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

.ma-cs-item{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s;
  color:#0f172a;
}
.ma-cs-item:hover{ background:#f3f4f6; }
.ma-cs-item.active{
  background:#e6f7ef;
  border:1px solid #b6e6d0;
}
.ma-cs-item-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:#eef2ff;
  color:#4f46e5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:13px;
  position:relative;
  flex-shrink:0;
}
.ma-cs-item.active .ma-cs-item-avatar::after{
  content:"";
  position:absolute;
  right:-2px; bottom:-2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#10b981;
  border:2px solid #ffffff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;
  background-size:9px 9px;
  background-position:center;
}
.ma-cs-item-txt{ display:flex; flex-direction:column; min-width:0; }
.ma-cs-item-name{
  font-size:13.5px;
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-cs-item-sub{
  font-size:11.5px;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-cs-item.active .ma-cs-item-actions{ display:flex; }
.ma-cs-item-actions{
  display:none;
  gap:2px;
}
.ma-cs-item-btn{
  background:transparent;
  border:none;
  padding:4px 6px;
  border-radius:6px;
  color:#4b5563;
  cursor:pointer;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:inherit;
  transition:background .12s;
}
.ma-cs-item-btn:hover{ background:rgba(0,0,0,.06); }
.ma-cs-item-btn svg{ width:12px; height:12px; }

/* Divider between list and add button */
.ma-cs-add-row{
  margin-top:6px;
  padding:10px;
  border:1.5px dashed #cbd5e1;
  border-radius:8px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  color:#3b82f6;
  font-weight:600;
  font-size:13px;
}
.ma-cs-add-row:hover{
  background:var(--brand-bg);
  border-color:#3b82f6;
}
.ma-cs-add-row svg{ width:16px; height:16px; }

/* Modal ────────────────────────────────────────────────────────────── */
.ma-cs-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:2000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
}
.ma-cs-modal.open{ display:flex; }
.ma-cs-modal-panel{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 24px 60px rgba(15,23,42,.28);
  padding:24px 28px;
  max-width:640px;
  width:100%;
  animation:maCsSlideIn .22s ease;
}
@keyframes maCsSlideIn{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:translateY(0); }
}
.ma-cs-modal-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.ma-cs-modal-hdr h3{
  margin:0;
  font-size:17px;
  font-weight:700;
  color:#0f172a;
}
.ma-cs-modal-close{
  background:transparent;
  border:none;
  font-size:24px;
  color:#64748b;
  cursor:pointer;
  padding:0 8px;
  line-height:1;
  border-radius:6px;
  transition:background .12s;
}
.ma-cs-modal-close:hover{ background:#f3f4f6; color:#0f172a; }

/* Form fields */
.ma-cs-fld{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:12px;
  align-items:start;
  margin-bottom:14px;
}
.ma-cs-fld > label{
  padding-top:8px;
  font-size:13px;
  color:#374151;
  font-weight:500;
}
.ma-cs-req{ color:#ef4444; margin-right:2px; }
.ma-cs-opt{
  display:inline-block;
  background:#e5e7eb;
  color:#6b7280;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  padding:2px 6px;
  border-radius:4px;
  margin:0 4px;
  vertical-align:middle;
}
.ma-cs-input{
  width:100%;
  padding:8px 12px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  color:#0f172a;
  background:#ffffff;
  box-sizing:border-box;
  transition:border-color .12s, box-shadow .12s;
}
.ma-cs-input:focus{
  outline:none;
  border-color:#00ba8b;
  box-shadow:0 0 0 3px rgba(0,186,139,.15);
}
.ma-cs-input:disabled{
  background:#f9fafb;
  color:#9ca3af;
  cursor:not-allowed;
}

/* Logo drop-zone */
.ma-cs-logo-drop{
  width:110px;
  height:90px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fafbfc;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.ma-cs-logo-drop:hover{ border-color:#00ba8b; background:#f0fdf4; }
.ma-cs-logo-plus{ font-size:22px; color:#6b7280; font-weight:300; }
.ma-cs-logo-lbl{ font-size:12px; color:#6b7280; font-weight:500; }

/* Is-branch toggle */
.ma-cs-fld-inline > div{ display:flex; flex-direction:column; gap:6px; }
.ma-cs-toggle{
  position:relative;
  display:inline-block;
  width:38px;
  height:22px;
}
.ma-cs-toggle input{ opacity:0; width:0; height:0; }
.ma-cs-toggle-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#cbd5e1;
  border-radius:22px;
  transition:.15s;
}
.ma-cs-toggle-slider::before{
  content:"";
  position:absolute;
  height:16px; width:16px;
  left:3px; bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.15s;
}
.ma-cs-toggle input:checked + .ma-cs-toggle-slider{ background:#00ba8b; }
.ma-cs-toggle input:checked + .ma-cs-toggle-slider::before{ transform:translateX(16px); }
.ma-cs-hint{ font-size:12px; color:#6b7280; }

/* Phone with country code */
.ma-cs-phone{ display:grid; grid-template-columns:80px 1fr; gap:8px; }

/* GSTIN with fetch button */
.ma-cs-gstin-row{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.ma-cs-btn-fetch{
  padding:8px 14px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:6px;
  color:#374151;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .12s, background .12s;
}
.ma-cs-btn-fetch:hover{ border-color:#00ba8b; color:#00ba8b; background:#f0fdf4; }

/* Address grid */
.ma-cs-addr{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

.ma-cs-form-footer{ padding-top:8px; }
.ma-cs-btn-save{
  padding:9px 20px;
  background:#3b82f6;
  color:#ffffff;
  border:none;
  border-radius:6px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.ma-cs-btn-save:hover{ background:var(--brand); }
.ma-cs-btn-save:disabled{ background:#94a3b8; cursor:not-allowed; }

@media(max-width:640px){
  .ma-cs-fld{ grid-template-columns:1fr; }
  .ma-cs-fld > label{ padding-top:0; }
  .ma-cs-addr{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.318 — Mobile modal is a compact CENTERED POPUP (not a bottom-sheet
              and not a full-page section). The bottom-sheet in v3.9.317
              felt too much like a new page on real devices; this version
              gives it a small floating card look with rounded corners on
              all sides, visible backdrop around it, and clear popup shape.
              Also uses z-index: 2147483647 (max int) to guarantee it sits
              above every other sticky/fixed layer in the plugin.
════════════════════════════════════════════════════════════════════════════════ */

/* Bump the z-index to the max so nothing in the plugin can cover it */
.ma-cs-modal{
  /* v3.9.817 — was the maximum (2147483647), which put it above the alert
     boxes: a warning raised from this popup opened behind it. Still above
     every sidebar and editor, now just below alerts and toasts. */
  z-index: 2147483000 !important;
}

/* MOBILE overrides — undo the bottom-sheet from v3.9.317 and use a
   centered floating card instead. */
@media(max-width: 640px){
  .ma-cs-modal{
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
  }
  .ma-cs-modal-panel{
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 14px !important;    /* rounded on ALL corners */
    animation: maCsPopIn .22s cubic-bezier(.2,.9,.2,1) !important;
    box-shadow: 0 20px 40px rgba(15,23,42,.32) !important;
  }
  @keyframes maCsPopIn{
    from{ opacity: 0; transform: scale(.94) translateY(6px); }
    to  { opacity: 1; transform: scale(1) translateY(0); }
  }
  /* Kill the drag-handle from the bottom-sheet version */
  .ma-cs-modal-panel::before{
    display: none !important;
    content: none !important;
  }
  .ma-cs-modal-hdr{
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid #eef0f3;
  }
  .ma-cs-modal-hdr h3{ font-size: 15px; }
  .ma-cs-modal-panel form{
    padding: 14px 18px 20px !important;
  }
  .ma-cs-fld{
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 12px;
  }
  .ma-cs-fld > label{ padding-top: 0; font-size: 12.5px; }
  .ma-cs-addr{ grid-template-columns: 1fr 1fr; }
  .ma-cs-input{ padding: 9px 10px; font-size: 13px; }
  .ma-cs-btn-save{ width: 100%; padding: 11px 18px; }
  /* Tighter logo drop-zone */
  .ma-cs-logo-drop{ width: 90px; height: 75px; }
}

/* Modal must sit above everything — some parts of the plugin have very
   high z-indices on the sticky top-bar and nav. Use a very high value. */
.ma-cs-modal{
  z-index: 9999;
  /* Reinforce the fixed positioning in case any parent has transform */
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  align-items: center;   /* center on desktop (mobile overrides below) */
  background: rgba(15,23,42,.55);
}
.ma-cs-modal-panel{
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* internal scroll handled by the form */
  padding: 0;
  animation: maCsPanelIn .22s ease;
}
@keyframes maCsPanelIn{
  from{ opacity: 0; transform: scale(.96); }
  to  { opacity: 1; transform: scale(1); }
}
.ma-cs-modal-hdr{
  padding: 20px 24px 14px;
  margin: 0;
  border-bottom: 1px solid #eef0f3;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.ma-cs-modal-close{
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.ma-cs-modal-close:hover{ background: #f3f4f6; }
.ma-cs-modal-panel form{
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Logo drop-zone — now a real image preview when a file is picked */
.ma-cs-logo-drop{
  overflow: hidden;
  position: relative;
}
.ma-cs-logo-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}
.ma-cs-logo-preview{
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  border-radius: 8px;
}
.ma-cs-logo-file{ display: none; }

/* ── MOBILE (≤ 640 px) ─────────────────────────────────────────────────── */
@media(max-width: 640px){
  /* Header — compact trigger, hide the hint so the name never wraps */
  .ma-cs-add-link{ display: none; }
  .ma-topbar-logo.ma-cs-trigger{
    padding: 4px 8px;
    gap: 8px;
  }
  .ma-cs-info .ma-topbar-biz{
    font-size: 13px;
    max-width: 140px;
  }
  .ma-logo-box{ width: 28px !important; height: 28px !important; font-size: 12px !important; }

  /* Dropdown — full width with small side gutters. Uses position:fixed
     because the trigger element is narrower than the viewport, so absolute
     positioning would cap the dropdown at the trigger's width. */
  .ma-cs-menu{
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    min-width: unset;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Single-column form on mobile — labels stack above inputs */
  .ma-cs-fld{
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 14px;
  }
  .ma-cs-fld > label{ padding-top: 0; font-weight: 600; color: #0f172a; }
  .ma-cs-addr{ grid-template-columns: 1fr 1fr; }
  .ma-cs-form-footer{ padding-top: 12px; }
  .ma-cs-btn-save{
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.319 — Make Default Company card in Settings → Business Profile
════════════════════════════════════════════════════════════════════════════════ */

.ma-default-biz-card .ma-settings-card-hdr{
  display:flex;
  align-items:center;
  gap:12px;
}
.ma-default-biz-hdr-txt{ flex:1; min-width:0; }

/* Pill toggle (larger and greener than the modal's toggle for clarity) */
.ma-default-biz-switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex-shrink:0;
  cursor:pointer;
}
.ma-default-biz-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.ma-default-biz-slider{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:24px;
  transition:background .18s ease;
  cursor:pointer;
}
.ma-default-biz-slider::before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background:#ffffff;
  border-radius:50%;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.ma-default-biz-switch input:checked + .ma-default-biz-slider{
  background:var(--brand, #00ba8b);
}
.ma-default-biz-switch input:checked + .ma-default-biz-slider::before{
  transform:translateX(20px);
}
.ma-default-biz-switch input:focus + .ma-default-biz-slider{
  box-shadow:0 0 0 3px rgba(0,186,139,.18);
}
.ma-default-biz-switch input:disabled + .ma-default-biz-slider{
  opacity:.55;
  cursor:not-allowed;
}

/* Note strip under the toggle — soft yellow "info" band */
.ma-default-biz-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  padding:10px 12px;
  background:#fef9c3;
  border:1px solid #fde68a;
  border-radius:8px;
  color:#78350f;
  font-size:12.5px;
  line-height:1.4;
}
.ma-default-biz-note svg{
  color:#b45309;
  flex-shrink:0;
  margin-top:2px;
}
.ma-default-biz-note b{ font-weight:700; }

/* Highlight the whole card while it's the default (subtle green glow) */
.ma-default-biz-card.is-default{
  border-color:#b6e6d0;
  background:linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%);
}
.ma-default-biz-card.is-default .ma-settings-card-title::after{
  content:" · Active";
  color:var(--brand, #00ba8b);
  font-weight:600;
  font-size:12px;
}

@media(max-width:640px){
  .ma-default-biz-card .ma-settings-card-hdr{ gap:8px; }
  .ma-default-biz-note{ font-size:12px; padding:9px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.320 — Dark-mode fixes for all recently-added components
     • v3.9.306 KPI cards (Sales / Purchase / Expense)
     • v3.9.308 NVE header + summary text
     • v3.9.312 5 new dashboard sections
     • v3.9.316 Company switcher dropdown + Add New Company modal
     • v3.9.319 Make Default Company card
   All fixes appended at the end so specificity always wins over the
   original component CSS. Uses the existing --surf / --text / --muted
   variables from the top-of-file dark-mode block.
════════════════════════════════════════════════════════════════════════════════ */

/* ── v3.9.306  KPI cards ───────────────────────────────────────────────── */
html[data-theme="dark"] .ma-kpi3-card{
  background:var(--surf) !important;
  border-color:var(--bdr);
}
html[data-theme="dark"] .ma-kpi3-card::before{
  /* Slightly stronger wash on dark so the accent still shows through */
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--kpi3-accent) 14%, transparent) 0%,
    transparent 55%);
}
html[data-theme="dark"] .ma-kpi3-amt,
html[data-theme="dark"] .ma-kpi3-eicol-val,
html[data-theme="dark"] .ma-kpi3-metric-val{ color:var(--text); }
html[data-theme="dark"] .ma-kpi3-label,
html[data-theme="dark"] .ma-kpi3-sub,
html[data-theme="dark"] .ma-kpi3-metric-lbl,
html[data-theme="dark"] .ma-kpi3-eicol-lbl,
html[data-theme="dark"] .ma-kpi3-eicol-sub{ color:var(--muted); }
html[data-theme="dark"] .ma-kpi3-eicol-exp .ma-kpi3-eicol-val{ color:#f87171; }
html[data-theme="dark"] .ma-kpi3-eicol-inc .ma-kpi3-eicol-val{ color:#34d399; }
html[data-theme="dark"] .ma-kpi3-metrics{ border-top-color:var(--bdr); }
html[data-theme="dark"] .ma-kpi3-toggle{
  background:var(--surf3);
  border-color:var(--bdr);
  color:var(--muted);
}
html[data-theme="dark"] .ma-kpi3-toggle:hover{
  background:var(--surf);
  border-color:var(--kpi3-accent);
  color:var(--kpi3-accent);
}
html[data-theme="dark"] .ma-kpi3-trend{ background:rgba(16,185,129,.14); color:#34d399; }
html[data-theme="dark"] .ma-kpi3-trend.down{ background:rgba(239,68,68,.14); color:#f87171; }
html[data-theme="dark"] .ma-kpi3-trend.flat{ background:var(--surf3); color:var(--muted); }
html[data-theme="dark"] .ma-kpi3-eirow::before{ background:var(--bdr); }
html[data-theme="dark"] .ma-kpi3-eicol-inc{ border-left-color:var(--bdr); }
html[data-theme="dark"] .ma-kpi3-dot{ color:var(--hint); }

/* ── v3.9.308  NVE chart header + summary ────────────────────────────── */
html[data-theme="dark"] .ma-nve-hdr{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-nve-summary,
html[data-theme="dark"] .ma-nve-hdr-r .ma-nve-lg-item{ color:var(--muted); }
html[data-theme="dark"] .ma-nve-sum-item b{ color:var(--text); }
html[data-theme="dark"] .ma-nve-sum-sep{ color:var(--hint); }

/* ── v3.9.312  Five dashboard sections ────────────────────────────────── */
/* Card titles (also used elsewhere by the plugin — scope to these sections) */
html[data-theme="dark"] .ma-dash-overview-row .ma-card-title,
html[data-theme="dark"] .ma-dash-detail-row  .ma-card-title{ color:var(--text); }

/* Legend chips in card headers (Sales / Purchase / Income / Expenses) */
html[data-theme="dark"] .ma-dash-lg-item{ color:var(--text); }

/* Top Customers */
html[data-theme="dark"] .ma-dash-topc-row{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-dash-topc-name,
html[data-theme="dark"] .ma-dash-topc-amt{ color:var(--text); }
html[data-theme="dark"] .ma-dash-topc-ico{
  background:rgba(99,102,241,.18);   /* indigo tint for dark */
  color:#a5b4fc;
}

/* Payment Summary legend */
html[data-theme="dark"] .ma-dash-paysum-lglbl,
html[data-theme="dark"] .ma-dash-paysum-lgpct{ color:var(--text); }
html[data-theme="dark"] .ma-dash-paysum-lgamt{ color:var(--muted); }

/* Recent Activities */
html[data-theme="dark"] .ma-dash-recact-row{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-dash-recact-title{ color:var(--text); }
html[data-theme="dark"] .ma-dash-recact-sub{ color:var(--muted); }
html[data-theme="dark"] .ma-dash-recact-time{ color:var(--hint); }
/* Kind-tinted icons — deepen bg + brighten fg for dark */
html[data-theme="dark"] .ma-dash-recact-ico-sale    { background:rgba(37,99,235,.20);  color:#93c5fd; }
html[data-theme="dark"] .ma-dash-recact-ico-payment { background:rgba(22,163,74,.20);  color:#86efac; }
html[data-theme="dark"] .ma-dash-recact-ico-purchase{ background:rgba(234,88,12,.20);  color:#fdba74; }
html[data-theme="dark"] .ma-dash-recact-ico-expense { background:rgba(220,38,38,.20);  color:#fca5a5; }

/* "View All →" divider link */
html[data-theme="dark"] .ma-dash-viewall{ border-top-color:var(--bdr); }

/* Chart tooltip stays dark on both themes (already OK) — but ensure the
   arrow/border adapt to a subtle border when placed over an already-dark
   panel so it remains visible. */
html[data-theme="dark"] .ma-dash-chart-tip{
  box-shadow:0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}

/* ── v3.9.316  Company switcher dropdown ──────────────────────────────── */
html[data-theme="dark"] .ma-cs-menu{
  background:var(--surf) !important;
  border-color:var(--bdr);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ma-cs-item{ color:var(--text); }
html[data-theme="dark"] .ma-cs-item:hover{ background:var(--surf3); }
html[data-theme="dark"] .ma-cs-item.active{
  background:var(--brand-bg);
  border-color:rgba(0,186,139,.35);
}
html[data-theme="dark"] .ma-cs-item-avatar{
  background:rgba(99,102,241,.22);
  color:#a5b4fc;
}
html[data-theme="dark"] .ma-cs-item-name{ color:var(--text); }
html[data-theme="dark"] .ma-cs-item-sub{ color:var(--muted); }
html[data-theme="dark"] .ma-cs-item-btn{ color:var(--muted); }
html[data-theme="dark"] .ma-cs-item-btn:hover{ background:rgba(255,255,255,.08); color:var(--text); }
html[data-theme="dark"] .ma-cs-add-row{
  background:var(--surf3);
  border-color:var(--bdr);
  color:#60a5fa;
}
html[data-theme="dark"] .ma-cs-add-row:hover{
  background:rgba(59,130,246,.14);
  border-color:#60a5fa;
}

/* ── v3.9.316  Add New Company modal ──────────────────────────────────── */
html[data-theme="dark"] .ma-cs-modal{
  background:rgba(0,0,0,.65);   /* darker backdrop over dark UI */
}
html[data-theme="dark"] .ma-cs-modal-panel{
  background:var(--surf) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ma-cs-modal-hdr{
  border-bottom-color:var(--bdr);
  background:var(--surf);
}
html[data-theme="dark"] .ma-cs-modal-hdr h3{ color:var(--text); }
html[data-theme="dark"] .ma-cs-modal-close{ color:var(--muted); }
html[data-theme="dark"] .ma-cs-modal-close:hover{
  background:var(--surf3);
  color:var(--text);
}
html[data-theme="dark"] .ma-cs-fld > label{ color:var(--text); }
html[data-theme="dark"] .ma-cs-opt{
  background:var(--surf3);
  color:var(--muted);
}
html[data-theme="dark"] .ma-cs-input,
html[data-theme="dark"] select.ma-cs-input{
  background:var(--surf2) !important;
  color:var(--text) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-cs-input:focus{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(0,186,139,.22) !important;
}
html[data-theme="dark"] .ma-cs-input:disabled{
  background:var(--surf3) !important;
  color:var(--hint) !important;
}
html[data-theme="dark"] .ma-cs-input::placeholder{ color:var(--hint); }
html[data-theme="dark"] .ma-cs-logo-drop{
  background:var(--surf2);
  border-color:var(--bdr);
}
html[data-theme="dark"] .ma-cs-logo-drop:hover{
  background:rgba(0,186,139,.10);
  border-color:var(--brand);
}
html[data-theme="dark"] .ma-cs-logo-plus,
html[data-theme="dark"] .ma-cs-logo-lbl,
html[data-theme="dark"] .ma-cs-hint{ color:var(--muted); }
html[data-theme="dark"] .ma-cs-btn-fetch{
  background:var(--surf2);
  border-color:var(--bdr);
  color:var(--text);
}
html[data-theme="dark"] .ma-cs-btn-fetch:hover{
  background:rgba(0,186,139,.14);
  border-color:var(--brand);
  color:var(--brand);
}
html[data-theme="dark"] .ma-cs-toggle-slider{ background:#4b5563; }
html[data-theme="dark"] .ma-cs-toggle-slider::before{ background:#e5e7eb; }
html[data-theme="dark"] .ma-cs-toggle input:checked + .ma-cs-toggle-slider{ background:var(--brand); }

/* Header trigger in dark mode — better hover feedback */
html[data-theme="dark"] .ma-topbar-logo.ma-cs-trigger:hover{
  background:rgba(255,255,255,.12);
}

/* ── v3.9.319  Make Default Company card ──────────────────────────────── */
html[data-theme="dark"] .ma-default-biz-card{
  background:var(--surf) !important;
  border-color:var(--bdr);
}
html[data-theme="dark"] .ma-default-biz-card.is-default{
  background:linear-gradient(180deg, rgba(0,186,139,.10) 0%, var(--surf) 40%) !important;
  border-color:rgba(0,186,139,.35);
}
html[data-theme="dark"] .ma-default-biz-slider{ background:#4b5563; }
html[data-theme="dark"] .ma-default-biz-slider::before{ background:#e5e7eb; }
html[data-theme="dark"] .ma-default-biz-switch input:checked + .ma-default-biz-slider{
  background:var(--brand);
}
/* Yellow note strip on dark — deeper amber for contrast */
html[data-theme="dark"] .ma-default-biz-note{
  background:rgba(234,179,8,.14);
  border-color:rgba(234,179,8,.28);
  color:#fcd34d;
}
html[data-theme="dark"] .ma-default-biz-note svg{ color:#fbbf24; }

/* ── Generic settings & bill boxes — some component titles were dark ──── */
html[data-theme="dark"] .ma-settings-card-title,
html[data-theme="dark"] .ma-org-card-hdr,
html[data-theme="dark"] .ma-org-row > label{ color:var(--text); }
html[data-theme="dark"] .ma-settings-card-sub{ color:var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.321 — Dark-mode fixes for the remaining problem areas
     • Product leaderboards (Best / Least / Low Stock rows)
     • Inward / Outward Payment (paymix cards)
     • Sales / Purchase Outstanding bucket cells
     • State-wise map (sidebar list + legend)
     • Inventory summary card
     • Mega menu popovers (Sale Invoice, Purchase, etc.)
     • Mobile hamburger menu + drawer
   All fixes appended at end of file so specificity wins over the original
   hard-coded whites/darks. Uses existing --surf / --text / --muted vars.
════════════════════════════════════════════════════════════════════════════════ */

/* ── Product Leaderboards (v3.9.296 "clean" style) ────────────────────── */
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-title{ color:var(--text); }
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-viewall-lnk{ color:#60a5fa; }
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-viewall-lnk:hover{ color:#93c5fd; }
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-thead{
  color:var(--text);
  border-bottom-color:var(--bdr);
}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-trow{
  border-bottom-color:var(--bdr);
}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-trow:hover{
  background:var(--surf3);
}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-tname{ color:var(--text); }
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-tqty{ color:var(--text); }
/* Filter button on Low Stock card */
html[data-theme="dark"] .ma-pl-filter-btn{
  background:var(--surf3);
  border-color:var(--bdr);
  color:var(--muted);
}
html[data-theme="dark"] .ma-pl-filter-btn:hover,
html[data-theme="dark"] .ma-pl-filter-btn.on{
  background:var(--brand-bg);
  color:var(--brand);
}
html[data-theme="dark"] .ma-pl-filter-menu{
  background:var(--surf);
  border-color:var(--bdr);
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
html[data-theme="dark"] .ma-pl-filter-item{ color:var(--text); }
html[data-theme="dark"] .ma-pl-filter-item:hover{ background:var(--surf3); }
html[data-theme="dark"] .ma-pl-filter-item.on{
  background:var(--brand-bg);
  color:var(--brand);
}

/* Older leaderboard classes (rank + colored qty pills) still get muted labels */
html[data-theme="dark"] .ma-pl-empty,
html[data-theme="dark"] .ma-empty{ color:var(--hint); }

/* ── Inward / Outward Payment cards (paymix) ─────────────────────────── */
html[data-theme="dark"] .ma-paymix-total-lbl{ color:var(--muted); }
html[data-theme="dark"] .ma-paymix-total-val{ color:var(--text); }
html[data-theme="dark"] .paymix-mode,
html[data-theme="dark"] .paymix-amt{ color:var(--text); }
/* The center-hole of the concentric-ring donut is white by default */
html[data-theme="dark"] .ma-paymix-rings .paymix-hole,
html[data-theme="dark"] .paymix-hole{ fill:var(--surf) !important; }

/* ── Sales / Purchase Outstanding — bucket cells were hard-coded #f9fafb ─ */
html[data-theme="dark"] .ma-oc2-cell{
  background:var(--surf2);
}
html[data-theme="dark"] .ma-oc2-cell:hover{
  background:var(--surf3);
}
html[data-theme="dark"] .ma-oc2-cell-lbl{ color:var(--muted); }
html[data-theme="dark"] .ma-oc2-cell-amt{ color:var(--text); }
html[data-theme="dark"] .ma-oc2-cell-pct{ color:var(--muted); }
html[data-theme="dark"] .ma-oc2-title{ color:var(--text); }
html[data-theme="dark"] .ma-oc2-meta{ color:var(--muted); }
html[data-theme="dark"] .ma-oc2-meta span{ color:var(--text); }
html[data-theme="dark"] .ma-oc2-amt{ color:var(--text); }
html[data-theme="dark"] .ma-oc2-amt-lbl{ color:var(--muted); }
/* Icon backgrounds retain their brand tints — deepen for dark contrast */
html[data-theme="dark"] .ma-oc2-sale .ma-oc2-icon{
  background:rgba(96,165,250,.18);
  color:#93c5fd;
}
html[data-theme="dark"] .ma-oc2-pur  .ma-oc2-icon{
  background:rgba(167,139,250,.18);
  color:#c4b5fd;
}
/* Segmented aging bar: give the empty end a visible dark track */
html[data-theme="dark"] .ma-oc2-bar{
  background:var(--surf2);
}
html[data-theme="dark"] .ma-oc2-seg-empty{
  background:var(--surf2);
}
/* Status chips — the "ATTENTION" pill etc. — already use rgba so mostly OK,
   but bump text brightness for dark-bg readability */
html[data-theme="dark"] .ma-oc2-status.attention{ color:#fca5a5; }
html[data-theme="dark"] .ma-oc2-status.watch{     color:#fbbf24; }
html[data-theme="dark"] .ma-oc2-status.healthy{   color:#7dd3fc; }

/* ── State-wise Total Sale map ───────────────────────────────────────── */
/* Right sidebar (Sale / Top state list boxes) — main card uses .ma-card so
   the wrapper is already dark; fix the internal panels + text. */
html[data-theme="dark"] .ma-map-side{ color:var(--text); }
html[data-theme="dark"] .ma-map-side-h{ color:var(--muted); }
html[data-theme="dark"] .ma-map-toprow{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-map-toprow .nm,
html[data-theme="dark"] .ma-map-toprow .amt{ color:var(--text); }
html[data-theme="dark"] .ma-map-toprow .rank{
  background:rgba(37,99,235,.22);
  color:#93c5fd;
}
html[data-theme="dark"] .ma-map-legend,
html[data-theme="dark"] .ma-map-legend-ranged .rng{ color:var(--muted); }
/* Toggle: Sale / Purchase pills */
html[data-theme="dark"] .ma-map-toggle{ background:var(--surf3); }
html[data-theme="dark"] .ma-map-pill{ color:var(--muted); }
html[data-theme="dark"] .ma-map-pill.active{
  background:var(--brand);
  color:#fff;
}
/* Zoom buttons */
html[data-theme="dark"] .ma-map-zoom-btn{
  background:var(--surf3);
  border-color:var(--bdr);
  color:var(--text);
}
html[data-theme="dark"] .ma-map-zoom-btn:hover{
  background:var(--brand-bg);
  color:var(--brand);
  border-color:var(--brand);
}
/* Un-selected/no-data states in map keep a subtle dark fill */
html[data-theme="dark" ] .ma-map-stage .map-noSale{ fill:var(--surf2); }

/* ── Inventory summary card ───────────────────────────────────────────── */
html[data-theme="dark"] .ma-inv-summary-card .ma-card-title{ color:var(--text); }
html[data-theme="dark"] .ma-inv-summary-body{ color:var(--text); }
html[data-theme="dark"] .ma-inv-summary-body b,
html[data-theme="dark"] .ma-inv-summary-body strong{ color:var(--text); }

/* ── Mega menu popovers (Sale Invoice, Purchase, etc.) ─────────────────
   Currently hard-coded to white background. This is the main issue in
   Image 4 — the popover shows a white sheet inside a dark theme. */
html[data-theme="dark"] .ma-subnav.ma-mega{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
  box-shadow:0 24px 48px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .ma-mega-colhdr{
  color:var(--muted);
  border-bottom-color:var(--bdr);
}
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk{
  color:var(--text) !important;
  background:transparent;
}
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk:hover{
  background:var(--surf3) !important;
  color:var(--brand) !important;
}
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk.on{
  background:var(--brand-bg) !important;
  color:var(--brand) !important;
}
html[data-theme="dark"] .ma-mega-ico{
  background:var(--surf3);
  color:var(--muted);
}
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk:hover .ma-mega-ico,
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk.on   .ma-mega-ico{
  background:var(--brand-bg);
  color:var(--brand);
}
html[data-theme="dark"] .ma-mega-title{ color:inherit; }
html[data-theme="dark"] .ma-mega-desc{ color:var(--muted); }
html[data-theme="dark"] .ma-subnav.ma-mega .ma-subnav-lnk:hover .ma-mega-desc{ color:var(--text); }
/* Promo card on the right side of the mega menu — v3.9.339 blue-tinted */
html[data-theme="dark"] .ma-mega-promo{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 14%, transparent) 0%,
    color-mix(in srgb, var(--brand) 6%, transparent) 100%);
  border-color:rgba(59,130,246,.28);
}
html[data-theme="dark"] .ma-mega-promo-ico{
  background:var(--surf3);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
html[data-theme="dark"] .ma-mega-promo-title{ color:var(--text); }
html[data-theme="dark"] .ma-mega-promo-tag{ color:var(--muted); }
/* Fallback for browsers without color-mix() — brand-blue tint */
@supports not (background: color-mix(in srgb, red, blue)){
  html[data-theme="dark"] .ma-mega-promo{
    background:linear-gradient(135deg, rgba(59,130,246,.16) 0%, rgba(59,130,246,.06) 100%);
  }
}

/* ── Sub-nav classic (non-mega) popovers ──────────────────────────────── */
html[data-theme="dark"] .ma-subnav{
  background:var(--surf);
  border-color:var(--bdr);
}
html[data-theme="dark"] .ma-subnav-lnk{
  color:var(--text);
}
html[data-theme="dark"] .ma-subnav-lnk:hover,
html[data-theme="dark"] .ma-subnav-lnk.on{
  background:var(--brand-bg);
  color:var(--brand);
}
html[data-theme="dark"] .ma-subnav-lnk svg{ color:var(--muted); }

/* ── Mobile sidebar drawer (hamburger menu) ──────────────────────────── */
html[data-theme="dark"] .ma-msub-lnk{ color:var(--text); }
html[data-theme="dark"] .ma-msub-lnk:hover{
  background:var(--brand-bg);
  color:var(--brand);
}
html[data-theme="dark"] .ma-msub-bullet{ color:var(--muted); }

/* ── v3.9.322 — Low Stock rows had a hard-coded #f5f6f8 grey band ────── */
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-list-low .ma-pl-trow{
  background:var(--surf2);
}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-list-low .ma-pl-trow:hover{
  background:var(--surf3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.323 — Redesigned floating chatbot avatar
     • Bot-face SVG with a "BS" pill (was chat bubble + sparkle)
     • Blue brand palette (matches --brand var(--brand) used elsewhere)
     • Richer 3-ring pulse ripple animation with staggered timings
     • 3 small floating "particle" dots that orbit around the button
     • Green online-status dot in the top-right of the button
════════════════════════════════════════════════════════════════════════════════ */

/* Bump the FAB body: keep the round shape but slightly larger to fit the
   bot avatar SVG comfortably. */
.ma-ai-fab{
  width:62px !important;
  height:62px !important;
}
.ma-ai-fab-icon{ position:relative; z-index:2; }

/* Green online-status dot — top-right corner of the button (v3.9.328 palette) */
.ma-ai-fab-dot{
  display:block !important;   /* override the inline style="display:none" */
  position:absolute;
  top:3px;
  right:3px;
  width:12px;
  height:12px;
  background:#22C55E;
  border:2.5px solid #ffffff;
  border-radius:50%;
  z-index:3;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:ma-ai-fab-dot-pulse 2s ease-out infinite;
}
@keyframes ma-ai-fab-dot-pulse{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Third pulse ring (dashed larger halo) — hidden in v3.9.328 (orbit ring
   replaced the ripple pulses) */
.ma-ai-fab-pulse-3{
  display:none !important;
  animation-delay:0.65s !important;
  opacity:.22 !important;
}
/* Slightly larger reach for the third pulse to give a richer echo */
@keyframes ma-ai-fab-pulse-3{
  0%   { opacity:.22; transform:translate(50%, -50%) scale(1); }
  70%  { opacity:0;   transform:translate(50%, -50%) scale(2.6); }
  100% { opacity:0;   transform:translate(50%, -50%) scale(2.6); }
}
.ma-ai-fab-pulse-3{ animation:ma-ai-fab-pulse-3 3.2s cubic-bezier(.4,0,.2,1) infinite !important; }

/* ── Floating particle dots that orbit around the FAB ─────────────────── */
.ma-ai-fab-orbit{
  position:absolute;
  top:50%;
  right:24px;                      /* aligned with FAB center */
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand, var(--brand));
  pointer-events:none;
  z-index:1;
  opacity:0;
  transform:translate(50%, -50%);
  will-change:transform, opacity;
}
.ma-ai-fab-orbit-1{
  width:8px; height:8px;
  animation:ma-ai-fab-orbit-1 4.2s cubic-bezier(.4,0,.4,1) infinite;
  animation-delay:.4s;
  background:#3b82f6;
}
.ma-ai-fab-orbit-2{
  width:6px; height:6px;
  animation:ma-ai-fab-orbit-2 4.2s cubic-bezier(.4,0,.4,1) infinite;
  animation-delay:1.6s;
  background:#60a5fa;
}
.ma-ai-fab-orbit-3{
  width:5px; height:5px;
  animation:ma-ai-fab-orbit-3 4.2s cubic-bezier(.4,0,.4,1) infinite;
  animation-delay:2.8s;
  background:#93c5fd;
}
/* Each orbit follows a slightly different arc so it looks organic */
@keyframes ma-ai-fab-orbit-1{
  0%   { opacity:0; transform:translate(50%, -50%) translate(0, 0) scale(.6); }
  15%  { opacity:.85; }
  50%  { opacity:.75; transform:translate(50%, -50%) translate(-46px, -30px) scale(1); }
  80%  { opacity:.35; transform:translate(50%, -50%) translate(-60px, -6px) scale(.9); }
  100% { opacity:0;   transform:translate(50%, -50%) translate(-68px, 22px) scale(.6); }
}
@keyframes ma-ai-fab-orbit-2{
  0%   { opacity:0; transform:translate(50%, -50%) translate(0, 0) scale(.6); }
  15%  { opacity:.85; }
  50%  { opacity:.75; transform:translate(50%, -50%) translate(-30px, 40px) scale(1); }
  80%  { opacity:.35; transform:translate(50%, -50%) translate(-8px, 56px) scale(.9); }
  100% { opacity:0;   transform:translate(50%, -50%) translate(22px, 64px) scale(.6); }
}
@keyframes ma-ai-fab-orbit-3{
  0%   { opacity:0; transform:translate(50%, -50%) translate(0, 0) scale(.6); }
  15%  { opacity:.85; }
  50%  { opacity:.75; transform:translate(50%, -50%) translate(50px, -20px) scale(1); }
  80%  { opacity:.35; transform:translate(50%, -50%) translate(64px, -38px) scale(.9); }
  100% { opacity:0;   transform:translate(50%, -50%) translate(72px, -60px) scale(.6); }
}

/* Dark-mode adjustments: brighten the pulse rings + particles for contrast */
html[data-theme="dark"] .ma-ai-fab-pulse,
html[data-theme="dark"] .ma-ai-fab-pulse-2,
html[data-theme="dark"] .ma-ai-fab-pulse-3{
  background:#3b82f6 !important;
  opacity:.30 !important;
}
html[data-theme="dark"] .ma-ai-fab-dot{
  border-color:var(--surf);
}

/* Reduced motion: keep it calm — subtle static appearance, no orbit */
@media (prefers-reduced-motion: reduce){
  .ma-ai-fab-pulse,
  .ma-ai-fab-pulse-2,
  .ma-ai-fab-pulse-3,
  .ma-ai-fab-orbit-1,
  .ma-ai-fab-orbit-2,
  .ma-ai-fab-orbit-3,
  .ma-ai-fab-dot{
    animation:none !important;
  }
  .ma-ai-fab{ animation:none !important; }
}

/* Smaller screens: proportionally shrink the FAB but keep the pulse aligned */
@media(max-width:640px){
  .ma-ai-fab{ width:56px !important; height:56px !important; }
  .ma-ai-fab-icon{ width:30px; height:30px; }
  .ma-ai-fab-pulse,
  .ma-ai-fab-pulse-2,
  .ma-ai-fab-pulse-3{ width:56px; height:56px; }
  .ma-ai-fab-dot{ width:10px; height:10px; top:3px; right:3px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.327 — Mobile header + sidebar polish
   Three targeted fixes:
     1) Force-hide `.ma-msec-lock` everywhere — the padlock badge that used
        to sit on Report / Other Documents / Expense Income has been retired
        but any leftover markup or dynamic injection should still not paint.
     2) Guarantee the Notification menu row (the last item in the drawer) is
        visible on all screen heights. The previous drawer padding was
        clipping it behind the mobile bottom nav bar on smaller phones.
     3) Tighten the mobile top bar so the company name, Create button and
        avatar all fit without wrapping or overflow, even on 320px screens.
════════════════════════════════════════════════════════════════════════════ */

/* (1) Kill the padlock badge everywhere */
.ma-msec-lock,
.ma-sidebar .ma-msec-lock,
.ma-nav-lock{ display:none !important; }

@media (max-width:720px){
  /* (2) Ensure the drawer scrolls to the last item.
         The mobile bottom nav is ~62px tall — 90px of padding-bottom
         gives clear breathing room so the "Notification" row never sits
         behind the bar. */
  .ma-sidebar{
    padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Extra safety: make the last simple menu row (Notification) always
     have a visible bottom margin so it isn't visually clipped. */
  .ma-sidebar .ma-msec-list > .ma-msec:last-child{
    margin-bottom:16px !important;
  }
  /* Notification badge — positioned to the right of the label */
  .ma-sidebar .ma-msec-simple .ma-msec-hdr{
    position:relative;
  }
  .ma-sidebar .ma-msec-badge[hidden]{ display:none !important; }
  .ma-sidebar .ma-msec-badge:not([hidden]){
    display:inline-flex !important;
    margin-left:auto !important;
    background:#EF4444 !important;
    color:#ffffff !important;
    font-size:11px !important;
    font-weight:800 !important;
    min-width:20px !important;
    height:20px !important;
    padding:0 6px !important;
    border-radius:10px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* (3) Tighter mobile top-bar layout */
  .ma-topbar{
    gap:6px !important;
    padding:0 10px !important;
  }
  /* Company name — max 45% of viewport so it never crowds the buttons */
  .ma-topbar-logo{
    min-width:0 !important;
    max-width:45vw !important;
    overflow:hidden !important;
  }
  .ma-topbar-biz{
    font-size:13.5px !important;
    font-weight:700 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  /* Company-switcher caret — smaller on mobile */
  .ma-topbar-logo .ma-cs-caret{
    width:12px !important; height:12px !important;
    flex-shrink:0 !important;
  }
  /* Hide the "Add Another Company" link — too much text for the top bar */
  .ma-topbar-logo .ma-cs-add-link{ display:none !important; }
  /* Right cluster — keep tight */
  .ma-topbar-right{
    gap:6px !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
  }
  .ma-hd-avatar{
    width:32px !important; height:32px !important;
    font-size:11.5px !important;
    border:2px solid rgba(255,255,255,.4) !important;
    display:inline-flex !important;
  }
  /* Create — icon-only pill */
  .ma-hd-create{
    padding:7px 9px !important;
    min-width:34px !important;
    height:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* Belt-and-braces — hide everything that should not appear on mobile */
  .ma-topbar-search-wrap,
  .ma-topbar-search,
  .ma-ask-ai-btn,
  .ma-hd-fy,
  .ma-fy-wrap,
  .ma-hd-util-wrap,
  #ma-notif-btn,
  #ma-hd-shortcuts{
    display:none !important;
  }
  /* v3.9.341 — Keep the Light/Dark/Auto theme toggle visible on mobile */
  #ma-theme-btn{
    display:inline-flex !important;
    width:34px !important; height:34px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    border-radius:9px !important;
    color:#ffffff !important;
    padding:0 !important;
    flex-shrink:0 !important;
    cursor:pointer !important;
  }
  #ma-theme-btn:hover{ background:rgba(255,255,255,.22) !important; }
}

/* Extra-small phones (≤ 380 px) — tighten further so nothing overflows */
@media (max-width:380px){
  .ma-topbar{ padding:0 8px !important; gap:5px !important; }
  .ma-topbar-logo{ max-width:44vw !important; }
  .ma-topbar-biz{ font-size:12.5px !important; }
  .ma-logo-box{ width:28px !important; height:28px !important; font-size:12px !important; }
  .ma-hd-avatar{ width:30px !important; height:30px !important; font-size:11px !important; }
  .ma-hd-create{ padding:6px 8px !important; min-width:32px !important; height:32px !important; }
}
/* ══════════ END v3.9.327 mobile header + sidebar polish ══════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.334 — Dark-mode fixes for the global search bar in the top header
     Problem: the focused state used a hard-coded #ffffff background, so in
     dark mode the search bar became a stark white rectangle stuck on the
     brand-blue topbar. Also, other elements the user might interact with
     (autofill, clear button, hover state) had no dark-mode treatment.
     Fix: give the search bar a coherent dark treatment — dark surface with
     a subtle brand-tinted focus ring, light text/icons, muted placeholder.
════════════════════════════════════════════════════════════════════════════════ */

/* Base state — slightly stronger tint so it stands apart from the blue
   topbar (the light-mode 14%-white overlay was too subtle in dark). */
html[data-theme="dark"] .ma-topbar-search{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] .ma-topbar-search:hover{
  background:rgba(255,255,255,.16) !important;
}

/* Focus state — dark surface (was stark white) with brand-blue focus ring */
html[data-theme="dark"] .ma-topbar-search:focus-within{
  background:var(--surf2, #0f172a) !important;
  border-color:var(--brand, #3b82f6) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.28) !important;
}
html[data-theme="dark"] .ma-topbar-search:focus-within .ma-search-ico{
  color:#93c5fd !important;
}
html[data-theme="dark"] .ma-topbar-search:focus-within input{
  color:var(--text, #e6eaf1) !important;
}
html[data-theme="dark"] .ma-topbar-search:focus-within input::placeholder{
  color:var(--muted, #94a3b8) !important;
}

/* Input text + placeholder in normal (unfocused) state */
html[data-theme="dark"] .ma-topbar-search input{
  color:#ffffff !important;
  /* Kill any user-agent / autofill dark styling that made the inner area
     look different from the container. */
  background:transparent !important;
}
html[data-theme="dark"] .ma-topbar-search input::placeholder{
  color:rgba(255,255,255,.66) !important;
}
/* Chrome/Edge autofill leaves a yellow-tint or dark box behind the value.
   These overrides keep the input transparent and use the theme's text color. */
html[data-theme="dark"] .ma-topbar-search input:-webkit-autofill,
html[data-theme="dark"] .ma-topbar-search input:-webkit-autofill:hover,
html[data-theme="dark"] .ma-topbar-search input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text, #e6eaf1) !important;
  -webkit-box-shadow:0 0 0 100px transparent inset !important;
  transition:background-color 5000s ease-in-out 0s;
  caret-color:#ffffff;
}

/* Search icon — unfocused (over the blue topbar) */
html[data-theme="dark"] .ma-search-ico{
  color:rgba(255,255,255,.78) !important;
}

/* Clear (×) button */
html[data-theme="dark"] .ma-search-clear{
  color:var(--muted, #94a3b8) !important;
}
html[data-theme="dark"] .ma-search-clear:hover{
  background:rgba(255,255,255,.10) !important;
  color:var(--text, #e6eaf1) !important;
}
/* When the search bar is FOCUSED and the clear button is visible, its
   hover state should feel like the rest of the focused dark surface. */
html[data-theme="dark"] .ma-topbar-search:focus-within .ma-search-clear{
  color:var(--muted, #94a3b8) !important;
}
html[data-theme="dark"] .ma-topbar-search:focus-within .ma-search-clear:hover{
  background:var(--surf3, #1e293b) !important;
  color:var(--text, #e6eaf1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.336 — Layout Color settings section
   Colour-picker grid + 5 curated recommended palettes.
════════════════════════════════════════════════════════════════════════════ */
#set-sec-layoutcolor .ma-lc-pickers{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.ma-lc-picker{
  background:#F8FAFC;
  border:1px solid #E5E7EB;
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .12s;
}
.ma-lc-picker:hover{ border-color:#93C5FD; }
.ma-lc-picker label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#374151;
  margin-bottom:8px;
}
.ma-lc-picker-row{ display:flex; gap:8px; align-items:center; }
.ma-lc-picker input[type="color"]{
  width:42px; height:36px;
  border:1px solid #E5E7EB;
  border-radius:8px;
  padding:2px;
  cursor:pointer;
  background:#fff;
  flex-shrink:0;
}
.ma-lc-picker input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; border-radius:6px; }
.ma-lc-picker input[type="color"]::-webkit-color-swatch{ border:none; border-radius:6px; }
.ma-lc-hex{
  flex:1;
  padding:8px 10px;
  border:1px solid #E5E7EB;
  border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;
  color:#111827;
  background:#fff;
  text-transform:uppercase;
  min-width:0;
}
.ma-lc-hex:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.ma-lc-picker small{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#94A3B8;
  line-height:1.3;
}

/* Action buttons */
.ma-lc-actions{
  display:flex;
  gap:10px;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid #F3F4F6;
  flex-wrap:wrap;
}
.ma-lc-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border:1px solid #E5E7EB;
  background:#ffffff;
  color:#374151;
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .12s, background .12s, color .12s;
}
.ma-lc-btn:hover{ border-color:#94A3B8; color:#111827; }
.ma-lc-btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#ffffff;
}
.ma-lc-btn.primary:hover{ background:var(--brand-d); border-color:var(--brand-d); }

/* Recommended palettes */
.ma-lc-recos-hdr{ margin-bottom:14px; }
.ma-lc-recos-title{ font-size:14px; font-weight:800; color:#111827; }
.ma-lc-recos-sub{ font-size:12px; color:#6B7280; margin-top:3px; }
.ma-lc-recos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}
.ma-lc-reco{
  background:#ffffff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
  text-align:left;
  font-family:inherit;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ma-lc-reco:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.ma-lc-reco.active{
  border:2px solid var(--brand);
  padding:13px;
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
.ma-lc-reco-name{
  font-size:13px;
  font-weight:700;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ma-lc-reco.active .ma-lc-reco-name::after{
  content:"✓ In use";
  font-size:10.5px;
  font-weight:700;
  color:var(--brand);
  background:var(--brand-bg);
  padding:3px 8px;
  border-radius:10px;
  letter-spacing:.2px;
}
.ma-lc-reco-swatches{
  display:flex;
  gap:0;
  border-radius:6px;
  overflow:hidden;
  height:32px;
}
.ma-lc-reco-swatch{ flex:1; }
.ma-lc-reco-desc{
  font-size:11.5px;
  color:#6B7280;
  line-height:1.4;
}

/* Dark mode */
html[data-theme="dark"] .ma-lc-picker{
  background:rgba(255,255,255,.03) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-picker label{ color:var(--text) !important; }
html[data-theme="dark"] .ma-lc-picker small{ color:var(--hint) !important; }
html[data-theme="dark"] .ma-lc-hex{
  background:var(--surf) !important;
  color:var(--text) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-btn{
  background:var(--surf) !important;
  color:var(--text) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-reco{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-reco-name{ color:var(--text) !important; }
html[data-theme="dark"] .ma-lc-reco-desc{ color:var(--muted) !important; }
html[data-theme="dark"] .ma-lc-recos-title{ color:var(--text) !important; }
html[data-theme="dark"] .ma-lc-recos-sub{ color:var(--muted) !important; }

/* Mobile */
@media (max-width:640px){
  #set-sec-layoutcolor .ma-lc-pickers{ grid-template-columns:1fr; }
  .ma-lc-recos{ grid-template-columns:1fr 1fr; gap:10px; }
  .ma-lc-reco{ padding:12px; }
  .ma-lc-reco-swatches{ height:26px; }
}
/* ══════════ END v3.9.336 Layout Color ══════════ */

/* v3.9.337 — Layout Color chart sub-header + dark-mode polish */
.ma-lc-subhdr{
  margin:6px 0 10px;
  padding-top:6px;
}
.ma-lc-subhdr-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.1px;
}
.ma-lc-subhdr-sub{
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
}
/* Second recommended palette (Emerald Green) badge tweak — the ✓ In use pill
   should use the *active* brand tint rather than the hardcoded blue */
.ma-lc-reco.active .ma-lc-reco-name::after{
  color:var(--brand) !important;
  background:var(--brand-bg) !important;
}
/* Dark-mode polish — the picker cards + section on dark backgrounds */
html[data-theme="dark"] #set-sec-layoutcolor{ color:var(--text); }
html[data-theme="dark"] .ma-lc-picker input[type="color"]{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-actions{
  border-bottom-color:rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .ma-lc-reco.active{
  border-color:#60A5FA !important;
  box-shadow:0 4px 14px rgba(96,165,250,.25) !important;
}
html[data-theme="dark"] .ma-lc-reco:hover{
  border-color:#60A5FA !important;
  box-shadow:0 6px 18px rgba(0,0,0,.4) !important;
}
/* ══════════ END v3.9.337 chart pickers + dark polish ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.338 — Print Template panel — professional redesign
   The old .ma-ptmpl-v2 wrapper had no dedicated CSS, so the accordion
   content rendered as plain unformatted text stacked together. This block
   builds a polished two-section layout with a hero top-bar, numbered
   step markers, refined header-style cards and a cleaner gallery frame.
════════════════════════════════════════════════════════════════════════════ */
.ma-ptmpl-v2{
  display:flex;
  flex-direction:column;
  gap:22px;
}
/* Hero top bar */
.ma-ptmpl-v2-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  background:linear-gradient(135deg, var(--brand-bg) 0%, var(--surf) 100%);
  border:1px solid var(--brand-bg2);
  border-radius:14px;
  position:relative;
  overflow:hidden;
}
.ma-ptmpl-v2-topbar::before{
  content:"";
  position:absolute;
  top:-50%; right:-10%;
  width:180px; height:180px;
  background:radial-gradient(circle, var(--brand-bg2) 0%, transparent 70%);
  opacity:.5;
  pointer-events:none;
}
.ma-ptmpl-v2-topbar-l{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1;
  min-width:0;
  position:relative;
}
.ma-ptmpl-v2-topbar-l > svg{
  flex-shrink:0;
  width:38px !important;
  height:38px !important;
  padding:9px;
  background:var(--surf);
  border-radius:10px;
  color:var(--brand);
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.ma-ptmpl-v2-title{
  font-size:15.5px;
  font-weight:800;
  color:var(--heading);
  line-height:1.25;
  letter-spacing:-.2px;
}
.ma-ptmpl-v2-sub{
  font-size:12.5px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4;
  max-width:520px;
}
.ma-ptmpl-v2-editor{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:var(--surf);
  border:1px solid var(--brand-bg2);
  color:var(--brand-d);
  border-radius:8px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .12s;
  flex-shrink:0;
  position:relative;
}
.ma-ptmpl-v2-editor:hover{
  background:var(--brand);
  color:#ffffff;
  border-color:var(--brand);
  transform:translateY(-1px);
}

/* Numbered section header */
.ma-ptmpl-v2-sec{ display:flex; flex-direction:column; gap:14px; }
.ma-ptmpl-v2-sec-hdr{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:2px;
}
.ma-ptmpl-v2-sec-num{
  width:26px; height:26px;
  border-radius:8px;
  background:var(--brand);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(15,23,42,.10);
}
.ma-ptmpl-v2-sec-title{
  font-size:14px;
  font-weight:800;
  color:var(--heading);
  letter-spacing:-.1px;
}
.ma-ptmpl-v2-sec-hint{
  font-size:12px;
  color:var(--muted);
  margin-left:auto;
  font-weight:500;
}

/* Section divider between Header Style and Template */
.ma-ptmpl-v2-div{
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--bdr) 20%, var(--bdr) 80%, transparent 100%);
  margin:2px 0;
}

/* Refined Header Style grid inside v2 */
.ma-pthdr-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:640px){
  .ma-pthdr-grid-v2{ grid-template-columns:1fr; }
}
.ma-pthdr-grid-v2 .ma-pthdr-card{
  padding:12px;
  border-radius:12px;
  border:1.5px solid var(--bdr);
  background:var(--surf);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.ma-pthdr-grid-v2 .ma-pthdr-card:hover{
  border-color:var(--brand-bg2);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.ma-pthdr-grid-v2 .ma-pthdr-card.active{
  border:2px solid var(--brand);
  padding:11px;
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
.ma-pthdr-grid-v2 .ma-pthdr-thumb{
  aspect-ratio:5/3;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:10px;
  border:1px solid var(--bdr);
}
.ma-pthdr-grid-v2 .ma-pthdr-name{
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
}
.ma-pthdr-grid-v2 .ma-pthdr-card.active .ma-pthdr-name{ color:var(--brand); }

/* Loading state inside gallery */
.ma-ptpl-loading{
  padding:40px 20px;
  text-align:center;
  color:var(--hint);
  font-size:13px;
  background:var(--surf2);
  border:1px dashed var(--bdr);
  border-radius:12px;
}

/* Dark mode adjustments */
html[data-theme="dark"] .ma-ptmpl-v2-topbar{
  background:linear-gradient(135deg, rgba(37,99,235,.10) 0%, var(--surf) 100%) !important;
  border-color:rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .ma-ptmpl-v2-topbar-l > svg{
  background:var(--surf) !important;
  color:#93C5FD !important;
}
html[data-theme="dark"] .ma-ptmpl-v2-editor{
  background:var(--surf) !important;
  color:#93C5FD !important;
  border-color:rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .ma-ptmpl-v2-editor:hover{
  background:var(--brand) !important;
  color:#ffffff !important;
}
html[data-theme="dark"] .ma-ptmpl-v2-sec-num{ box-shadow:0 2px 6px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .ma-pthdr-grid-v2 .ma-pthdr-card{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-pthdr-grid-v2 .ma-pthdr-card:hover{
  border-color:rgba(147,197,253,.4) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .ma-pthdr-grid-v2 .ma-pthdr-thumb{ border-color:var(--bdr) !important; }
html[data-theme="dark"] .ma-pthdr-grid-v2 .ma-pthdr-name{ color:var(--text) !important; }
html[data-theme="dark"] .ma-ptpl-loading{
  background:rgba(255,255,255,.03) !important;
  border-color:var(--bdr) !important;
  color:var(--hint) !important;
}

/* Refine the outer accordion look so it feels premium */
.ma-ptmpl-acc{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--bdr);
  box-shadow:0 2px 6px rgba(15,23,42,.03);
}
.ma-ptmpl-acc .ma-acc-row{
  padding:15px 20px;
  font-size:13.5px;
  font-weight:600;
  transition:background .12s, color .12s;
}
.ma-ptmpl-acc .ma-acc-row:hover{ background:var(--brand-bg); }
.ma-ptmpl-acc .ma-acc-row.open{
  background:var(--brand-bg);
  color:var(--brand-dd);
}
.ma-ptmpl-acc .ma-acc-plus{
  width:24px; height:24px;
  border-radius:6px;
  background:var(--surf2);
  color:var(--muted);
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s, transform .25s;
}
.ma-ptmpl-acc .ma-acc-row.open .ma-acc-plus{
  background:var(--brand);
  color:#ffffff;
}
.ma-acc-panel.ma-ptmpl-panel{
  background:var(--surf2);
  padding:22px;
  border-top:1px solid var(--bdr);
}
html[data-theme="dark"] .ma-ptmpl-acc{
  border-color:var(--bdr) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.2) !important;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-row:hover,
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-row.open{
  background:rgba(37,99,235,.10) !important;
  color:#93C5FD !important;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-plus{
  background:rgba(255,255,255,.04) !important;
  color:var(--muted) !important;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-row.open .ma-acc-plus{
  background:var(--brand) !important;
  color:#ffffff !important;
}
html[data-theme="dark"] .ma-acc-panel.ma-ptmpl-panel{
  background:rgba(255,255,255,.02) !important;
  border-top-color:var(--bdr) !important;
}

/* Mobile — tighter spacing */
@media (max-width:640px){
  .ma-ptmpl-v2-topbar{ flex-direction:column; align-items:stretch; padding:14px; }
  .ma-ptmpl-v2-editor{ align-self:flex-start; }
  .ma-ptmpl-v2-sec-hint{ display:none; }
  .ma-acc-panel.ma-ptmpl-panel{ padding:16px; }
}
/* ══════════ END v3.9.338 print template professional redesign ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.339 — Contextual popup icons
   Every .ma-modal-title now gets a small circular icon badge before it. The
   colour + glyph is picked from the data-icon attribute set by the JS
   auto-classifier. Icons are inline SVG data URIs — zero extra requests.
════════════════════════════════════════════════════════════════════════════ */
.ma-modal-title{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bdr);
  margin-bottom:20px;
  font-size:17px;
  font-weight:800;
  color:var(--heading);
  line-height:1.3;
}
/* Guard — margin-bottom already existed in the base rule (18px) but this
   supersedes it so the layered padding + border feels intentional. */
.ma-modal-title[data-icon]::before{
  content:"";
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  background-color:var(--surf2);
}

/* ── Type-specific badge colouring + SVG glyph ───────────────────────── */
/* INFO / disclaimer — blue circle-i */
.ma-modal-title[data-icon="info"]::before{
  background-color:var(--brand-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
/* WARNING — amber triangle */
.ma-modal-title[data-icon="warning"]::before{
  background-color:#FEF3C7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
/* ERROR — red circle-x */
.ma-modal-title[data-icon="error"]::before{
  background-color:#FEE2E2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
}
/* SUCCESS — green check-circle */
.ma-modal-title[data-icon="success"]::before{
  background-color:#DCFCE7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
}
/* DELETE / TRASH — red trash can */
.ma-modal-title[data-icon="delete"]::before{
  background-color:#FEE2E2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6M14 11v6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
}
/* EDIT — blue pencil */
.ma-modal-title[data-icon="edit"]::before{
  background-color:var(--brand-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>");
}
/* CREATE / NEW — blue plus */
.ma-modal-title[data-icon="create"]::before{
  background-color:var(--brand-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
/* SUMMARY / DETAILS — purple document */
.ma-modal-title[data-icon="summary"]::before{
  background-color:#F5F3FF;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><polyline points='10 9 9 9 8 9'/></svg>");
}
/* REMINDER — amber bell */
.ma-modal-title[data-icon="reminder"]::before{
  background-color:#FEF3C7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>");
}
/* SETTINGS — cyan gear */
.ma-modal-title[data-icon="settings"]::before{
  background-color:#ECFEFF;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}
/* PICK / SELECT — blue check-list */
.ma-modal-title[data-icon="pick"]::before{
  background-color:var(--brand-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}
/* LOADING — spinning blue circle */
.ma-modal-title[data-icon="loading"]::before{
  background-color:var(--brand-bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'/></svg>");
  animation:ma-modal-icon-spin 1.1s linear infinite;
}
@keyframes ma-modal-icon-spin{ to { transform:rotate(360deg); } }

/* Dark-mode badge tints — softer backgrounds so the icons still read */
html[data-theme="dark"] .ma-modal-title[data-icon="info"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="edit"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="create"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="pick"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="loading"]::before{
  background-color:rgba(37,99,235,.18) !important;
}
html[data-theme="dark"] .ma-modal-title[data-icon="warning"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="reminder"]::before{
  background-color:rgba(245,158,11,.18) !important;
}
html[data-theme="dark"] .ma-modal-title[data-icon="error"]::before,
html[data-theme="dark"] .ma-modal-title[data-icon="delete"]::before{
  background-color:rgba(239,68,68,.18) !important;
}
html[data-theme="dark"] .ma-modal-title[data-icon="success"]::before{
  background-color:rgba(34,197,94,.18) !important;
}
html[data-theme="dark"] .ma-modal-title[data-icon="summary"]::before{
  background-color:rgba(124,58,237,.18) !important;
}
html[data-theme="dark"] .ma-modal-title[data-icon="settings"]::before{
  background-color:rgba(6,182,212,.18) !important;
}

/* Mobile — slightly smaller badge */
@media (max-width:640px){
  .ma-modal-title{ font-size:15.5px; gap:10px; padding-bottom:12px; margin-bottom:16px; }
  .ma-modal-title[data-icon]::before{ width:32px; height:32px; background-size:18px 18px; }
}
/* ══════════ END v3.9.339 contextual popup icons ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.341 — Font family cards + Theme Mode cards + Dark-palette overrides
════════════════════════════════════════════════════════════════════════════ */
/* Font family grid */
.ma-lc-fonts{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-bottom:22px;
}
.ma-lc-font{
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:11px;
  padding:14px 16px;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, transform .12s, box-shadow .15s;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ma-lc-font:hover{
  border-color:var(--brand);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.ma-lc-font.active{
  border:2px solid var(--brand);
  padding:13px 15px;
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
.ma-lc-font-name{
  font-size:14px;
  font-weight:700;
  color:var(--heading);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ma-lc-font.active .ma-lc-font-name::after{
  content:"✓ In use";
  font-size:10.5px;
  font-weight:700;
  color:var(--brand);
  background:var(--brand-bg);
  padding:3px 8px;
  border-radius:10px;
  letter-spacing:.2px;
}
.ma-lc-font-sample{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.3px;
}
.ma-lc-font-meta{
  font-size:11px;
  color:var(--muted);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}

/* Theme Mode grid (in General Options) */
.ma-theme-mode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  padding:6px 4px 4px;
}
.ma-theme-mode-card{
  background:var(--surf);
  border:1.5px solid var(--bdr);
  border-radius:11px;
  padding:16px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:border-color .15s, transform .12s, box-shadow .15s;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--text);
}
.ma-theme-mode-card:hover{
  border-color:var(--brand);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.ma-theme-mode-card svg{
  color:var(--brand);
  margin-bottom:2px;
}
.ma-theme-mode-card.active{
  border:2px solid var(--brand);
  padding:15px;
  background:var(--brand-bg);
  box-shadow:0 4px 14px rgba(37,99,235,.18);
}
.ma-theme-mode-name{
  font-size:14px;
  font-weight:800;
  color:var(--heading);
}
.ma-theme-mode-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
html[data-theme="dark"] .ma-theme-mode-card{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .ma-theme-mode-card:hover{
  border-color:#60A5FA !important;
}
html[data-theme="dark"] .ma-theme-mode-card.active{
  border-color:#60A5FA !important;
  background:rgba(96,165,250,.14) !important;
  box-shadow:0 4px 14px rgba(96,165,250,.20) !important;
}
html[data-theme="dark"] .ma-theme-mode-card svg{ color:#93C5FD !important; }

@media (max-width:640px){
  .ma-lc-fonts{ grid-template-columns:1fr 1fr; gap:10px; }
  .ma-theme-mode-grid{ grid-template-columns:1fr; }
}
/* ══════════ END v3.9.341 font + theme-mode cards ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.342 — Font dropdown + Mobile search overlay
════════════════════════════════════════════════════════════════════════════ */

/* ── Font dropdown (replaces the v3.9.341 card grid) ── */
.ma-lc-font-select{
  position:relative;
  max-width:520px;
  margin-bottom:24px;
}
.ma-lc-font-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--surf);
  border:1.5px solid var(--bdr);
  border-radius:11px;
  padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .12s, box-shadow .12s;
  text-align:left;
}
.ma-lc-font-trigger:hover{ border-color:var(--brand); }
.ma-lc-font-select.open .ma-lc-font-trigger{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg2);
}
.ma-lc-font-trigger-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.ma-lc-font-trigger-name{
  font-size:14px;
  font-weight:700;
  color:var(--heading);
  line-height:1.2;
}
.ma-lc-font-trigger-sample{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.3;
}
.ma-lc-font-caret{
  color:var(--muted);
  flex-shrink:0;
  transition:transform .18s ease;
}
.ma-lc-font-select.open .ma-lc-font-caret{ transform:rotate(180deg); }

.ma-lc-font-drop{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:11px;
  box-shadow:0 12px 34px rgba(15,23,42,.16);
  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease, max-height .14s ease;
  z-index:50;
  padding:0;
}
.ma-lc-font-select.open .ma-lc-font-drop{
  max-height:420px;
  opacity:1;
  pointer-events:auto;
  overflow-y:auto;
  padding:6px;
}
.ma-lc-font-opt{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:background .1s;
}
.ma-lc-font-opt:hover{ background:var(--brand-bg); }
.ma-lc-font-opt.active{ background:var(--brand-bg); }
.ma-lc-font-opt-name{
  font-size:13px;
  font-weight:700;
  color:var(--heading);
  min-width:120px;
}
.ma-lc-font-opt-sample{
  font-size:14px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ma-lc-font-opt-check{
  width:20px;
  height:20px;
  border-radius:6px;
  background:var(--brand);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  flex-shrink:0;
  transition:opacity .1s;
}
.ma-lc-font-opt.active .ma-lc-font-opt-check{ opacity:1; }

html[data-theme="dark"] .ma-lc-font-trigger,
html[data-theme="dark"] .ma-lc-font-drop{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-lc-font-drop{
  box-shadow:0 12px 34px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .ma-lc-font-opt:hover,
html[data-theme="dark"] .ma-lc-font-opt.active{
  background:rgba(96,165,250,.14) !important;
}
html[data-theme="dark"] .ma-lc-font-opt-check{
  background:#60A5FA !important;
}

/* ── Mobile search button in topbar ── */
.ma-mob-search-btn{
  display:none;                              /* shown only on mobile */
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:9px;
  color:#ffffff;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.ma-mob-search-btn:hover{ background:rgba(255,255,255,.22); }
@media (max-width:720px){
  .ma-mob-search-btn{ display:inline-flex; }
}

/* ── Mobile full-screen search overlay ── */
.ma-mob-search-overlay{
  position:fixed;
  inset:0;
  background:var(--surf2);
  z-index:9998;
  display:flex;
  flex-direction:column;
  transform:translateY(20px);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, transform .18s ease, visibility 0s linear .18s;
}
.ma-mob-search-overlay.on{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  transition:opacity .15s ease, transform .18s ease;
}
.ma-mob-search-hdr{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 12px calc(12px + env(safe-area-inset-top, 0px));
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  background:var(--surf);
  border-bottom:1px solid var(--bdr);
  flex-shrink:0;
}
.ma-mob-search-back{
  width:40px; height:40px;
  border:none;
  background:transparent;
  color:var(--text);
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
}
.ma-mob-search-back:hover{ background:var(--surf3); }
.ma-mob-search-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surf2);
  border:1px solid var(--bdr);
  border-radius:10px;
  padding:0 10px 0 12px;
  height:40px;
  color:var(--muted);
}
.ma-mob-search-field:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg2);
  background:var(--surf);
}
.ma-mob-search-field input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:inherit;
  font-size:14.5px;
  min-width:0;
  padding:0;
  height:100%;
}
.ma-mob-search-field input::placeholder{ color:var(--hint); }
.ma-mob-search-clear{
  background:none;
  border:none;
  color:var(--muted);
  padding:6px;
  cursor:pointer;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ma-mob-search-clear:hover{ background:var(--surf3); color:var(--text); }

.ma-mob-search-body{
  flex:1;
  overflow-y:auto;
  padding:8px 4px calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling:touch;
}
.ma-mob-search-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 24px 40px;
  text-align:center;
  gap:8px;
}
.ma-mob-search-empty-t{
  font-size:15px;
  font-weight:700;
  color:var(--heading);
  margin-top:8px;
}
.ma-mob-search-empty-s{
  font-size:13px;
  color:var(--muted);
  max-width:280px;
  line-height:1.4;
}
.ma-mob-search-loading{
  padding:14px 20px;
  color:var(--hint);
  font-size:13px;
  text-align:center;
}
.ma-mob-search-sec{ padding:6px 8px; }
.ma-mob-search-sec-h{
  font-size:11px;
  font-weight:800;
  color:var(--hint);
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:10px 12px 6px;
}
.ma-mob-search-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  cursor:pointer;
  border-radius:9px;
  color:var(--text);
  -webkit-tap-highlight-color:rgba(37,99,235,.15);
}
.ma-mob-search-item:active{ background:var(--brand-bg); }
.ma-mob-search-item-ico{
  width:36px; height:36px;
  border-radius:9px;
  background:var(--brand-bg);
  color:var(--brand);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ma-mob-search-item-txt{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ma-mob-search-item-name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ma-mob-search-item-meta{
  font-size:11.5px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ══════════ END v3.9.342 font dropdown + mobile search ══════════ */


/* ══════════════════════════════════════════════════════════════════════════
   v3.9.344 — Select Tab settings section
   List of the mobile bottom-nav tabs with a toggle-switch per row.
════════════════════════════════════════════════════════════════════════════ */
.ma-tabsel-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.ma-tabsel-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:10px;
  transition:border-color .12s, background .12s;
}
.ma-tabsel-item:hover{
  border-color:var(--brand);
  background:var(--brand-bg);
}
.ma-tabsel-item.disabled{ opacity:.55; }
.ma-tabsel-icon{
  width:36px; height:36px;
  border-radius:9px;
  background:var(--brand-bg);
  color:var(--brand);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ma-tabsel-text{ flex:1; min-width:0; }
.ma-tabsel-name{
  font-size:13.5px;
  font-weight:700;
  color:var(--heading);
  line-height:1.2;
}
.ma-tabsel-desc{
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.35;
}
.ma-tabsel-actions{
  display:flex;
  gap:10px;
  padding-top:10px;
  border-top:1px solid var(--bdr);
  flex-wrap:wrap;
}
/* Dark mode */
html[data-theme="dark"] .ma-tabsel-item{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .ma-tabsel-item:hover{
  border-color:#60A5FA !important;
  background:rgba(96,165,250,.10) !important;
}
html[data-theme="dark"] .ma-tabsel-icon{
  background:rgba(96,165,250,.14) !important;
  color:#93C5FD !important;
}
html[data-theme="dark"] .ma-tabsel-actions{ border-top-color:var(--bdr) !important; }
/* ══════════ END v3.9.344 Select Tab ══════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.336 — Customer / Vendor profile photo + social-media-style view
     • Photo uploader inside the Add/Edit form
     • Redesigned View sidebar header: cover banner + large circular avatar
       + quick-tap contact chips
════════════════════════════════════════════════════════════════════════════════ */

/* ── Photo uploader in Add/Edit form ───────────────────────────────────── */
.ma-cv-photo-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  background:var(--surf2, #f8fafc);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  margin-bottom:14px;
}
.ma-cv-photo-wrap{ position:relative; flex-shrink:0; }
.ma-cv-photo-preview{
  width:80px; height:80px;
  border-radius:50%;
  background:#ffffff;
  border:2px dashed var(--bdr, #d1d5db);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .16s, transform .12s;
  position:relative;
  overflow:hidden;
}
.ma-cv-photo-preview:hover{ border-color:var(--brand, #2563EB); }
.ma-cv-photo-preview:active{ transform:scale(.97); }
.ma-cv-photo-preview.has-photo{ border-style:solid; border-color:var(--brand, #2563EB); }
.ma-cv-photo-preview.has-photo .ma-cv-photo-placeholder{ display:none; }
.ma-cv-photo-placeholder{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#6b7280;
  font-size:10.5px;
  font-weight:600;
  text-align:center;
  padding:8px;
}
.ma-cv-photo-hover{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  gap:5px;
  background:rgba(0,0,0,.55);
  color:#ffffff;
  font-size:11px;
  font-weight:600;
  border-radius:50%;
}
.ma-cv-photo-preview.has-photo:hover .ma-cv-photo-hover{ display:flex; }
.ma-cv-photo-file{ display:none; }
.ma-cv-photo-info{ flex:1; min-width:0; }
.ma-cv-photo-title{ font-size:13.5px; font-weight:700; color:var(--text, #0f172a); margin-bottom:2px; }
.ma-cv-photo-hint{ font-size:11.5px; color:var(--muted, #6b7280); margin-bottom:6px; }
.ma-cv-photo-remove{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px;
  background:transparent;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:11.5px;
  color:#dc2626;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.ma-cv-photo-remove:hover{ background:#fef2f2; border-color:#fca5a5; }

/* Dark-mode overrides */
html[data-theme="dark"] .ma-cv-photo-row{ background:var(--surf3); border-color:var(--bdr); }
html[data-theme="dark"] .ma-cv-photo-preview{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-cv-photo-placeholder{ color:var(--muted); }
html[data-theme="dark"] .ma-cv-photo-title{ color:var(--text); }
html[data-theme="dark"] .ma-cv-photo-hint{ color:var(--muted); }
html[data-theme="dark"] .ma-cv-photo-remove{ background:transparent; color:#f87171; border-color:var(--bdr); }
html[data-theme="dark"] .ma-cv-photo-remove:hover{ background:rgba(220,38,38,.14); border-color:#fca5a5; }

/* ── Social-media-style profile card in the View sidebar ──────────────── */
.cv-profile-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  margin:-16px -16px 20px;   /* bleed to the sidebar's edges */
  background:var(--surf, #ffffff);
  border-bottom:1px solid var(--bdr, #e5e7eb);
}
.cv-profile-cover{
  height:110px;
  background:linear-gradient(135deg, #2563EB 0%, #7c3aed 50%, #ec4899 100%);
  position:relative;
}
.cv-profile-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.12) 0%, transparent 45%);
}
.cv-profile-avatar-wrap{
  position:relative;
  height:0;
  display:flex;
  justify-content:center;
}
.cv-profile-avatar{
  width:96px; height:96px;
  border-radius:50%;
  background:#e0e7ff;
  color:var(--brand, #2563EB);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:800;
  border:4px solid var(--surf, #ffffff);
  box-shadow:0 4px 16px rgba(15,23,42,.16);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin-top:-52px;
  position:relative;
  z-index:2;
}
.cv-profile-avatar.has-photo{ background-color:#f3f4f6; color:transparent; }
.cv-profile-body{
  padding:52px 20px 18px;    /* top-pad clears the 96px avatar's overhang */
  text-align:center;
}
.cv-profile-name-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.cv-profile-name{
  font-size:18px;
  font-weight:800;
  color:var(--text, #0f172a);
  line-height:1.25;
}
.cv-profile-sub{
  font-size:13px;
  color:var(--muted, #6b7280);
  margin-bottom:10px;
}
.cv-profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}
.cv-profile-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:999px;
  font-size:11.5px;
  font-weight:500;
  color:var(--text, #374151);
  text-decoration:none;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.cv-profile-chip:hover{
  background:var(--brand-bg, #eff6ff);
  color:var(--brand, #2563EB);
  border-color:var(--brand, #2563EB);
}
.cv-profile-chip svg{ flex-shrink:0; color:var(--muted, #6b7280); }
.cv-profile-chip:hover svg{ color:var(--brand, #2563EB); }

/* Dark-mode profile card */
html[data-theme="dark"] .cv-profile-card{
  background:var(--surf);
  border-bottom-color:var(--bdr);
}
html[data-theme="dark"] .cv-profile-avatar{
  border-color:var(--surf);
  background-color:rgba(37,99,235,.22);
  color:#93c5fd;
  box-shadow:0 4px 16px rgba(0,0,0,.42);
}
html[data-theme="dark"] .cv-profile-avatar.has-photo{ background-color:var(--surf2); }
html[data-theme="dark"] .cv-profile-name{ color:var(--text); }
html[data-theme="dark"] .cv-profile-sub{ color:var(--muted); }
html[data-theme="dark"] .cv-profile-chip{
  background:var(--surf2);
  border-color:var(--bdr);
  color:var(--text);
}
html[data-theme="dark"] .cv-profile-chip svg{ color:var(--muted); }
html[data-theme="dark"] .cv-profile-chip:hover{
  background:rgba(37,99,235,.22);
  border-color:#60a5fa;
  color:#93c5fd;
}
html[data-theme="dark"] .cv-profile-chip:hover svg{ color:#93c5fd; }

/* Hide the old .cv-side-hdr-row entirely — replaced by the profile card */
.cv-profile-card + .cv-side-sec{ margin-top:0; }

/* Mobile — slightly tighter proportions */
@media(max-width:640px){
  .cv-profile-cover{ height:90px; }
  .cv-profile-avatar{ width:80px; height:80px; font-size:28px; margin-top:-44px; border-width:3px; }
  .cv-profile-body{ padding-top:44px; }
  .cv-profile-name{ font-size:16px; }
  .cv-profile-chip{ max-width:150px; font-size:11px; }
  .ma-cv-photo-preview{ width:64px; height:64px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.337 — Product / Service sub-tabs + Categories/Attributes panels
════════════════════════════════════════════════════════════════════════════════ */
.ma-prod-subtabs{
  display:flex;
  gap:2px;
  padding:4px;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  margin-bottom:16px;
  width:fit-content;
}
.ma-prod-subtab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:transparent;
  border:0;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted, #6b7280);
  cursor:pointer;
  transition:background .12s, color .12s;
  font-family:inherit;
}
.ma-prod-subtab:hover{ color:var(--text, #111); }
.ma-prod-subtab.is-active{
  background:var(--surf, #ffffff);
  color:var(--brand, #2563EB);
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.ma-prod-subtab-panel{ display:none; }
.ma-prod-subtab-panel.is-active{ display:block; }

.ma-prod-sub-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:12px;
  flex-wrap:wrap;
}

/* Categories rows */
.ma-prod-cat-list{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  overflow:hidden;
}
.ma-prod-cat-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border-bottom:1px solid var(--bdr, #f1f5f9);
}
.ma-prod-cat-row:last-child{ border-bottom:0; }
.ma-prod-cat-row:hover{ background:var(--surf2, #f9fafb); }
.ma-prod-cat-info{ flex:1; min-width:0; }
.ma-prod-cat-name{ font-size:14px; font-weight:700; color:var(--text, #111); }
.ma-prod-cat-parent{ font-size:11.5px; color:var(--muted, #6b7280); margin-top:2px; }
.ma-prod-cat-desc{ font-size:12px; color:var(--muted, #6b7280); margin-top:4px; }
.ma-prod-cat-count{
  padding:3px 10px;
  background:var(--brand-bg, #eff6ff);
  color:var(--brand, #2563EB);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.ma-prod-cat-actions{ display:flex; gap:6px; flex-shrink:0; }

/* Attributes rows */
.ma-prod-attr-list{ display:flex; flex-direction:column; gap:12px; }
.ma-prod-attr-row{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:14px 18px;
}
.ma-prod-attr-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.ma-prod-attr-name{ font-size:14px; font-weight:700; color:var(--text, #111); }
.ma-prod-attr-slug{ font-size:11.5px; color:var(--muted, #6b7280); margin-top:2px; }
.ma-prod-attr-header-act{ display:flex; gap:6px; flex-shrink:0; }
.ma-prod-attr-values{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
  padding:8px 10px;
  background:var(--surf2, #f9fafb);
  border-radius:8px;
  min-height:32px;
}
.ma-prod-attr-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 4px 3px 10px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #d1d5db);
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  color:var(--text, #111);
}
.ma-prod-attr-chip-x{
  width:18px; height:18px;
  border:0;
  background:transparent;
  color:var(--muted, #9ca3af);
  cursor:pointer;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  padding:0;
  transition:background .12s, color .12s;
}
.ma-prod-attr-chip-x:hover{ background:#fee2e2; color:#dc2626; }
.ma-prod-attr-addval{
  display:flex;
  gap:6px;
  align-items:center;
}
.ma-prod-attr-addval input{
  flex:1;
  padding:6px 10px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  font-size:12.5px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-family:inherit;
}
.ma-prod-attr-addval input:focus{
  outline:none;
  border-color:var(--brand, #2563EB);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Item form additions — category select, product-type radios, variations */
.ma-cv-row.ma-cv-row-ptype .ma-cv-radios{ display:flex; gap:16px; margin-top:4px; }
.ma-variations-section{
  margin-top:12px;
  padding:14px;
  background:var(--surf2, #f9fafb);
  border:1px dashed var(--bdr, #d1d5db);
  border-radius:10px;
}
.ma-variations-title{ font-size:13px; font-weight:700; color:var(--text, #111); margin-bottom:8px; }
.ma-variations-hint{ font-size:12px; color:var(--muted, #6b7280); margin-bottom:12px; }
.ma-var-attr-picker{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ma-var-attr-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  border:1px solid var(--bdr, #d1d5db);
  background:var(--surf, #fff);
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  font-weight:500;
  color:var(--text, #374151);
}
.ma-var-attr-pill.is-selected{
  background:var(--brand, #2563EB);
  color:#fff;
  border-color:var(--brand, #2563EB);
}
.ma-var-generate{ margin-bottom:12px; }
.ma-variations-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}
.ma-variations-table th, .ma-variations-table td{
  border-bottom:1px solid var(--bdr, #e5e7eb);
  padding:6px 8px;
  text-align:left;
  vertical-align:middle;
}
.ma-variations-table th{ font-weight:700; color:var(--muted, #6b7280); background:var(--surf, #fff); }
.ma-variations-table input{
  padding:5px 8px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:5px;
  font-size:12px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  width:100%;
  box-sizing:border-box;
  font-family:inherit;
}
.ma-variations-empty{ text-align:center; padding:16px; color:var(--muted, #6b7280); font-size:12.5px; }

/* Dark mode */
html[data-theme="dark"] .ma-prod-subtabs{ background:var(--surf3); border-color:var(--bdr); }
html[data-theme="dark"] .ma-prod-subtab{ color:var(--muted); }
html[data-theme="dark"] .ma-prod-subtab:hover{ color:var(--text); }
html[data-theme="dark"] .ma-prod-subtab.is-active{
  background:var(--surf); color:#60a5fa; box-shadow:0 1px 3px rgba(0,0,0,.35);
}
html[data-theme="dark"] .ma-prod-cat-list,
html[data-theme="dark"] .ma-prod-attr-row{ background:var(--surf); border-color:var(--bdr); }
html[data-theme="dark"] .ma-prod-cat-row{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-prod-cat-row:hover{ background:var(--surf3); }
html[data-theme="dark"] .ma-prod-cat-name,
html[data-theme="dark"] .ma-prod-attr-name{ color:var(--text); }
html[data-theme="dark"] .ma-prod-cat-parent,
html[data-theme="dark"] .ma-prod-cat-desc,
html[data-theme="dark"] .ma-prod-attr-slug{ color:var(--muted); }
html[data-theme="dark"] .ma-prod-cat-count{ background:rgba(37,99,235,.22); color:#93c5fd; }
html[data-theme="dark"] .ma-prod-attr-values{ background:var(--surf3); }
html[data-theme="dark"] .ma-prod-attr-chip{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-prod-attr-chip-x{ color:var(--muted); }
html[data-theme="dark"] .ma-prod-attr-chip-x:hover{ background:rgba(220,38,38,.22); color:#f87171; }
html[data-theme="dark"] .ma-prod-attr-addval input,
html[data-theme="dark"] .ma-variations-table input{
  background:var(--surf2); border-color:var(--bdr); color:var(--text);
}
html[data-theme="dark"] .ma-variations-section{ background:var(--surf3); border-color:var(--bdr); }
html[data-theme="dark"] .ma-variations-title{ color:var(--text); }
html[data-theme="dark"] .ma-variations-hint,
html[data-theme="dark"] .ma-variations-empty{ color:var(--muted); }
html[data-theme="dark"] .ma-var-attr-pill{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-variations-table th{ color:var(--muted); background:var(--surf); }
html[data-theme="dark"] .ma-variations-table th, html[data-theme="dark"] .ma-variations-table td{ border-bottom-color:var(--bdr); }

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.338 — Mobile responsiveness for v3.9.337 Categories / Attributes /
   Variations panels + bulk-add UX polish
════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* Sub-tab pills — allow horizontal scroll so all three fit on narrow phones */
  .ma-prod-subtabs{
    width:100%;
    box-sizing:border-box;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                     /* Firefox */
  }
  .ma-prod-subtabs::-webkit-scrollbar{ display:none; }
  .ma-prod-subtab{
    padding:8px 12px;
    font-size:12.5px;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* Toolbar: stack title above the Add button so both are readable */
  .ma-prod-sub-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .ma-prod-sub-toolbar .ma-list-add{
    align-self:flex-start;
  }

  /* Category rows: name + description + parent stack vertically; item-count
     pill and Edit/Delete actions drop to a footer row. */
  .ma-prod-cat-row{
    flex-wrap:wrap;
    padding:12px 14px;
    gap:8px;
  }
  .ma-prod-cat-info{
    flex:1 1 100%;
    min-width:0;
  }
  .ma-prod-cat-count{
    order:2;
    align-self:flex-start;
  }
  .ma-prod-cat-actions{
    order:3;
    margin-left:auto;
  }

  /* Attribute cards: header buttons wrap onto a second line if the name is long */
  .ma-prod-attr-row{
    padding:12px 14px;
  }
  .ma-prod-attr-header{
    flex-wrap:wrap;
    gap:8px;
  }
  .ma-prod-attr-header-act{
    margin-left:auto;
  }

  /* Add-value row: stack input + button on very narrow screens so the button
     doesn't get squeezed and the placeholder is fully readable */
  .ma-prod-attr-addval{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .ma-prod-attr-addval input{ width:100%; box-sizing:border-box; }
  .ma-prod-attr-addval .ma-btn{ width:100%; }

  /* Item form: variations section fits better + table scrolls horizontally */
  .ma-variations-section{
    padding:12px;
  }
  .ma-var-attr-picker{
    gap:6px;
  }
  .ma-var-attr-pill{
    padding:6px 12px;                       /* larger tap target */
    font-size:12.5px;
  }
  /* Table with 6 cols can't fit — wrap in a horizontal scroller */
  #mi-variations-list{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -12px;                         /* bleed to the section edges */
    padding:0 12px;
  }
  .ma-variations-table{
    min-width:560px;                         /* forces scroll instead of squish */
  }
  .ma-variations-table input{
    min-width:80px;
  }
}

/* Sub-tab scroller hint — subtle fade on the right edge to show more tabs
   exist off-screen (only when overflowing). Non-intrusive. */
@media (max-width:640px){
  .ma-prod-subtabs{
    position:relative;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.343 (fix) — Line-item action column width
   The previous action column header had min-width:46px, which was too
   narrow to hold both the 30px green + button and the 26px red − button
   plus the 6px gap between them (30 + 6 + 26 = 62px minimum, plus 12px
   of cell padding = 74px needed). The − button was clipped off the right
   edge of the table on every create screen. This block:
     • Widens the action column comfortably (min-width 88px header, 88px
       cell) so both buttons sit inside the cell with room to breathe.
     • Standardises both buttons to 28×28 for visual balance.
     • Keeps the Unicode +/− glyphs (they were already rendering fine —
       the earlier attempt to swap them for SVGs was reverted).
     • Adds tight right-side padding so buttons don't touch the table edge.
     • Ensures nothing on any ancestor clips them.
   Applied to every create/edit screen with a line-item table: Sale
   Invoice, Multi-Currency Invoice, Purchase Bill, Job Work, Delivery
   Challan, Packing List, Proforma / Quotation.
════════════════════════════════════════════════════════════════════════════ */
#pg-bill .gst-items-tbl thead th.gst-c-act-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-act-h,
#pg-purchase .gst-items-tbl thead th.gst-c-act-h,
#pg-create-jobwork .gst-items-tbl thead th.gst-c-act-h,
#pg-create-delivery-challan .gst-items-tbl thead th.gst-c-act-h,
#pg-create-packing-list .gst-items-tbl thead th.gst-c-act-h,
#pg-create-proforma .gst-items-tbl thead th.gst-c-act-h{
  /* v3.9.343 (fix2) — pin to a fixed 76px so the column doesn't grow
     to fill leftover table space. 76px = 28 + 6 + 28 = 62 (two buttons +
     gap) + 12 padding, tight around the pair with no extra whitespace. */
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  padding:8px 6px 8px 4px !important;
}

#pg-bill .gst-items-tbl tbody td.gst-c-act,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act,
#pg-purchase .gst-items-tbl tbody td.gst-c-act,
#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act,
#pg-create-proforma .gst-items-tbl tbody td.gst-c-act{
  width:76px !important;
  min-width:76px !important;
  max-width:76px !important;
  padding:8px 6px 8px 4px !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* Standardise both buttons to 28×28 so they line up perfectly */
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn{
  width:28px !important;
  height:28px !important;
  font-size:20px !important;
  vertical-align:middle !important;
  background:#10B981 !important;                  /* emerald — matches earlier ref */
  box-shadow:0 2px 5px rgba(16,185,129,.30) !important;
}
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover,
#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn:hover{
  background:#059669 !important;
  transform:scale(1.08) !important;
}
#pg-bill .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-purchase .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-jobwork .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-packing-list .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn,
#pg-create-proforma .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{
  width:28px !important;
  height:28px !important;
  font-size:20px !important;
  margin-left:6px !important;
  vertical-align:middle !important;
}

/* Prevent any ancestor from clipping the buttons if the table has to scroll */
#pg-bill .gst-card-body,
#pg-mc-invoice .gst-card-body,
#pg-purchase .gst-card-body,
#pg-create-jobwork .gst-card-body,
#pg-create-delivery-challan .gst-card-body,
#pg-create-packing-list .gst-card-body,
#pg-create-proforma .gst-card-body{
  overflow:visible !important;
}
#pg-bill .gst-items-scroll,
#pg-mc-invoice .gst-items-scroll,
#pg-purchase .gst-items-scroll,
#pg-create-jobwork .gst-items-scroll,
#pg-create-delivery-challan .gst-items-scroll,
#pg-create-packing-list .gst-items-scroll,
#pg-create-proforma .gst-items-scroll{
  overflow-x:auto !important;
  overflow-y:visible !important;
}

/* Mobile — same tight fixed width */
@media (max-width:640px){
  #pg-bill .gst-items-tbl tbody td.gst-c-act,
  #pg-mc-invoice .gst-items-tbl tbody td.gst-c-act,
  #pg-purchase .gst-items-tbl tbody td.gst-c-act,
  #pg-create-jobwork .gst-items-tbl tbody td.gst-c-act,
  #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act,
  #pg-create-packing-list .gst-items-tbl tbody td.gst-c-act,
  #pg-create-proforma .gst-items-tbl tbody td.gst-c-act{
    padding:6px 5px 6px 2px !important;
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
  }
}
/* ══════════ END v3.9.343 (fix) ± button column width ══════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v3.9.344 — Bank Name dropdown + first-bank success animation
════════════════════════════════════════════════════════════════════════════ */

/* ── Bank dropdown ────────────────────────────────────────────────────── */
.ma-bnk-select{
  position:relative;
  width:100%;
}
.ma-bnk-input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--bdr);
  border-radius:9px;
  background:var(--surf);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
  box-sizing:border-box;
}
.ma-bnk-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg);
}

.ma-bnk-drop{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.14);
  max-height:340px;
  overflow-y:auto;
  z-index:200;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.ma-bnk-drop.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.ma-bnk-opt{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:9px 12px;
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  border-radius:0;
  transition:background .1s;
}
.ma-bnk-opt:hover,
.ma-bnk-opt:focus{
  background:var(--surf2);
  outline:none;
}
.ma-bnk-opt.ma-bnk-custom{
  background:var(--brand-bg);
  border-bottom:1px solid var(--bdr);
}
.ma-bnk-opt.ma-bnk-custom:hover{ background:var(--brand-bg2); }

.ma-bnk-ava{
  width:28px; height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#ffffff;
  font-weight:800;
  font-size:10px;
  letter-spacing:-.2px;
  overflow:hidden;
}
/* v3.9.347 — Real SVG logos: transparent background, subtle border ring so
   white-backed logos (SBI, Bank of Baroda, HSBC, etc.) sit cleanly inside
   the row without disappearing into it. */
.ma-bnk-ava-logo{
  background:transparent !important;
  border:1px solid var(--bdr);
  padding:0;
}
.ma-bnk-ava-logo svg{ display:block; }
html[data-theme="dark"] .ma-bnk-ava-logo{
  border-color:rgba(255,255,255,.12);
}
.ma-bnk-ava-custom{
  background:var(--brand) !important;
  color:#ffffff;
}
.ma-bnk-opt-tx{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ma-bnk-opt-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--heading);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ma-bnk-opt-hint{
  font-size:11px;
  color:var(--muted);
  line-height:1.2;
}
.ma-bnk-empty{
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Dark mode adjustments */
html[data-theme="dark"] .ma-bnk-drop{
  background:var(--surf) !important;
  border-color:var(--bdr) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .ma-bnk-opt:hover{ background:var(--surf3) !important; }
html[data-theme="dark"] .ma-bnk-opt.ma-bnk-custom{
  background:rgba(37,99,235,.14) !important;
  border-bottom-color:var(--bdr) !important;
}

/* ── First-bank success modal ─────────────────────────────────────────── */
.ma-bnk-success-scrim{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .22s ease;
}
.ma-bnk-success-scrim.open{ opacity:1; }

.ma-bnk-success{
  background:var(--surf);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
  width:100%;
  max-width:520px;
  padding:0;
  position:relative;
  transform:scale(.86) translateY(20px);
  transition:transform .28s cubic-bezier(.22, 1.2, .3, 1);
  overflow:hidden;
}
.ma-bnk-success-scrim.open .ma-bnk-success{
  transform:scale(1) translateY(0);
}

/* Top header bar with title + close button */
.ma-bnk-success-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--bdr);
}
.ma-bnk-success-header-title{
  font-size:16px;
  font-weight:800;
  color:var(--heading);
  line-height:1.4;
  flex:1;
}
.ma-bnk-success-close{
  width:30px; height:30px;
  border:none;
  background:transparent;
  color:var(--muted);
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s;
  flex-shrink:0;
  margin:-4px -6px 0 0;
}
.ma-bnk-success-close:hover{
  background:var(--surf2);
  color:var(--text);
}

/* Body area — padded, holds icon + subtitle + question + checkbox */
.ma-bnk-success-body{
  padding:26px 26px 4px;
}

.ma-bnk-success-icon-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  height:170px;
  margin-bottom:8px;
}
.ma-bnk-icon{ position:relative; z-index:2; }
.ma-bnk-icon .ma-bnk-p{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:ma-bnk-draw 1.4s ease-out forwards;
}
.ma-bnk-icon .ma-bnk-p:nth-child(1){ animation-delay:.05s; }   /* dot */
.ma-bnk-icon .ma-bnk-p:nth-child(2){ animation-delay:.12s; }   /* roof */
.ma-bnk-icon .ma-bnk-p:nth-child(3){ animation-delay:.30s; }   /* frieze */
.ma-bnk-icon .ma-bnk-p:nth-child(4){ animation-delay:.42s; }   /* col 1 */
.ma-bnk-icon .ma-bnk-p:nth-child(5){ animation-delay:.55s; }   /* col 2 */
.ma-bnk-icon .ma-bnk-p:nth-child(6){ animation-delay:.68s; }   /* col 3 */
.ma-bnk-icon .ma-bnk-p:nth-child(7){ animation-delay:.85s; }   /* base 1 */
.ma-bnk-icon .ma-bnk-p:nth-child(8){ animation-delay:.95s; }   /* base 2 */
.ma-bnk-icon .ma-bnk-p:nth-child(9){ animation-delay:1.05s; }  /* base 3 */
@keyframes ma-bnk-draw{
  to { stroke-dashoffset:0; }
}

.ma-bnk-confetti-burst{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:220px;
  height:170px;
  z-index:1;
  pointer-events:none;
}
.ma-bnk-confetti-burst circle{
  opacity:0;
  transform-origin:center;
  animation:ma-bnk-confetti 1.8s ease-out forwards;
  animation-delay:1.1s;
}
@keyframes ma-bnk-confetti{
  0%   { opacity:0; transform:translate(0,0) scale(.4); }
  25%  { opacity:1; transform:translate(0,0) scale(1);  }
  100% { opacity:0; transform:translate(var(--dx, 0), var(--dy, 30px)) scale(.8); }
}
.ma-bnk-confetti-burst circle:nth-child(1){ --dx:-30px; --dy:-30px; }
.ma-bnk-confetti-burst circle:nth-child(2){ --dx: 34px; --dy:-38px; }
.ma-bnk-confetti-burst circle:nth-child(3){ --dx:-42px; --dy: 18px; }
.ma-bnk-confetti-burst circle:nth-child(4){ --dx: 42px; --dy: 22px; }
.ma-bnk-confetti-burst circle:nth-child(5){ --dx:-18px; --dy:-46px; }
.ma-bnk-confetti-burst circle:nth-child(6){ --dx: 28px; --dy: 36px; }

/* Subtitle repeats the celebration line with emojis, sits below the icon */
.ma-bnk-success-subtitle{
  font-size:16px;
  font-weight:800;
  color:var(--heading);
  text-align:center;
  margin:8px 0 14px;
  line-height:1.4;
}
.ma-bnk-confetti-emoji{ margin-left:2px; }

.ma-bnk-success-q{
  font-size:14px;
  color:var(--text);
  line-height:1.55;
  margin-bottom:14px;
}
.ma-bnk-success-chk{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  background:var(--surf2);
  border:1px solid var(--bdr);
  border-radius:10px;
  cursor:pointer;
  font-size:13.5px;
  color:var(--text);
  line-height:1.5;
  transition:background .12s, border-color .12s;
}
.ma-bnk-success-chk:hover{
  background:var(--brand-bg);
  border-color:var(--brand-bg2);
}
.ma-bnk-success-chk input{
  margin-top:3px;
  flex-shrink:0;
  width:16px; height:16px;
  accent-color:var(--brand);
}

.ma-bnk-success-extra{
  margin-top:16px;
  animation:ma-bnk-slide-in .28s ease-out;
}
@keyframes ma-bnk-slide-in{
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.ma-bnk-success-extra-h{
  font-size:13px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:10px;
}
.ma-bnk-success-doc-tbl{
  border:1px solid var(--bdr);
  border-radius:9px;
  overflow:hidden;
  margin-bottom:10px;
}
.ma-bnk-success-doc-hdr{
  display:flex;
  justify-content:space-between;
  padding:8px 14px;
  background:var(--surf2);
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.ma-bnk-success-doc-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-top:1px solid var(--bdr);
  cursor:pointer;
  font-size:13.5px;
  color:var(--text);
  transition:background .12s;
}
.ma-bnk-success-doc-row:hover{ background:var(--brand-bg); }
.ma-bnk-success-doc-row input{ accent-color:var(--brand); }
.ma-bnk-success-doc-name{ flex:1; }
.ma-bnk-success-doc-count{
  font-weight:700;
  color:var(--heading);
}
.ma-bnk-success-note{
  font-size:12px;
  color:#DC2626;
  line-height:1.45;
}

.ma-bnk-success-actions{
  display:flex;
  justify-content:flex-end;
  padding:16px 22px 18px;
  background:var(--surf);
  border-top:1px solid var(--bdr);
  margin-top:14px;
}
.ma-bnk-success-btn{
  padding:10px 24px;
  border:none;
  border-radius:8px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s, transform .1s;
}
.ma-bnk-success-btn-primary{
  background:var(--brand);
  color:#ffffff;
}
.ma-bnk-success-btn-primary:hover{
  background:var(--brand-d);
  transform:translateY(-1px);
}

/* ── UPI Verify button + hint below any UPI field ──────────────────── */
.ma-upi-wrap{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.ma-upi-wrap input{ flex:1; min-width:0; }
.ma-upi-verify-btn{
  flex-shrink:0;
  padding:0 16px;
  background:var(--surf);
  border:1.5px solid var(--brand);
  color:var(--brand-d);
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s, color .12s;
  white-space:nowrap;
}
.ma-upi-verify-btn:hover{
  background:var(--brand);
  color:#ffffff;
}
.ma-upi-hint{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:12.5px;
  line-height:1.45;
  margin-top:6px;
}
.ma-upi-hint svg{ margin-top:2px; flex-shrink:0; }
.ma-upi-hint-ok{ color:#166534; }
.ma-upi-hint-error{ color:#B91C1C; }
html[data-theme="dark"] .ma-upi-hint-ok{ color:#86EFAC; }
html[data-theme="dark"] .ma-upi-hint-error{ color:#FCA5A5; }
html[data-theme="dark"] .ma-upi-verify-btn{
  background:var(--surf) !important;
  color:#93C5FD !important;
  border-color:#60A5FA !important;
}
html[data-theme="dark"] .ma-upi-verify-btn:hover{
  background:var(--brand) !important;
  color:#ffffff !important;
}

/* ── UPI QR modal ──────────────────────────────────────────────────── */
.ma-upi-qr{
  background:var(--surf);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.35);
  width:100%;
  max-width:400px;
  padding:22px 24px 20px;
  position:relative;
  transform:scale(.86) translateY(20px);
  transition:transform .28s cubic-bezier(.22, 1.2, .3, 1);
}
.ma-upi-qr-scrim.open .ma-upi-qr{ transform:scale(1) translateY(0); }
.ma-upi-qr .ma-bnk-success-close{ position:absolute; top:14px; right:14px; }
.ma-upi-qr-title{
  font-size:16px;
  font-weight:800;
  color:var(--heading);
  margin-bottom:6px;
  padding-right:32px;
}
.ma-upi-qr-sub{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:16px;
}
.ma-upi-qr-img{
  display:flex;
  justify-content:center;
  padding:14px;
  background:#ffffff;
  border-radius:12px;
  border:1px solid var(--bdr);
  margin-bottom:14px;
}
.ma-upi-qr-img img{ display:block; width:220px; height:220px; }
.ma-upi-qr-fallback{
  padding:80px 20px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.ma-upi-qr-details{
  background:var(--surf2);
  border-radius:9px;
  padding:10px 14px;
  margin-bottom:14px;
}
.ma-upi-qr-row{
  display:flex;
  justify-content:space-between;
  padding:5px 0;
  font-size:13px;
}
.ma-upi-qr-row span{ color:var(--muted); }
.ma-upi-qr-row b{ color:var(--heading); font-weight:700; }
.ma-upi-qr-actions{
  display:flex;
  justify-content:flex-end;
}
html[data-theme="dark"] .ma-upi-qr-img{ background:#ffffff !important; }

html[data-theme="dark"] .ma-bnk-success{
  background:var(--surf) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .ma-bnk-icon{ stroke:#60A5FA !important; }
html[data-theme="dark"] .ma-bnk-success-chk{ background:var(--surf3) !important; }
html[data-theme="dark"] .ma-bnk-success-doc-tbl{ border-color:var(--bdr) !important; }
html[data-theme="dark"] .ma-bnk-success-doc-hdr{ background:var(--surf3) !important; }
html[data-theme="dark"] .ma-bnk-success-doc-row{ border-top-color:var(--bdr) !important; }
html[data-theme="dark"] .ma-bnk-success-note{ color:#F87171 !important; }

@media (max-width:640px){
  .ma-bnk-success{
    max-width:100%;
    padding:22px 18px 18px;
    border-radius:14px;
  }
  .ma-bnk-success-title{ font-size:14.5px; padding-right:32px; }
  .ma-bnk-success-icon-wrap{ height:100px; margin-bottom:14px; }
  .ma-bnk-icon{ width:82px; height:82px; }
}
/* ══════════ END v3.9.344 bank dropdown + success animation ══════════ */

/* ══════════════════════════════════════════════════════════════════
   v3.9.356 — DOCUMENT PREVIEW OVERLAY
   Full-screen post-view/print modal — invoice/quotation/return/note.
   Left: dark PDF viewer area with iframe. Right: 320px action sidebar.
   Triggered from any list section's "View / Print" button.
════════════════════════════════════════════════════════════════════ */

.rb-prev-overlay{
  position:fixed;inset:0;z-index:9800;
  background:#f6f7f9;
  display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  animation:rb-prev-in .18s ease-out;
}
@keyframes rb-prev-in{ from{opacity:0} to{opacity:1} }

/* v3.9.359 — Close (×) now lives inside the dark viewer toolbar. */
.rb-prev-vt-close{
  font-size:22px;font-weight:400;padding:4px 12px !important;
  margin-right:4px;
}
.rb-prev-vt-close:hover{ background:#B91C1C !important;color:#fff !important }

/* v3.9.445 — New "Back" button replacing the tiny ×. Bordered pill so
   it visually pops out of the flat dark toolbar and first-time users
   spot it instantly. Same id (#rb-prev-close-btn) so the existing
   click / Esc / close-on-outside handlers keep working. */
.rb-prev-vt-back{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#f3f4f6;
  padding:6px 14px 6px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  margin-right:10px;
  line-height:1;
  transition:background .12s, border-color .12s, color .12s;
}
.rb-prev-vt-back:hover{
  background:#EF4444;
  border-color:#EF4444;
  color:#fff;
}
.rb-prev-vt-back:focus{
  outline:2px solid rgba(239,68,68,.55);
  outline-offset:2px;
}

/* Main body: viewer + sidebar */
.rb-prev-body{
  display:flex;flex:1;min-height:0;
}

/* Left viewer */
.rb-prev-main{
  flex:1;min-width:0;background:#3a3d42;
  display:flex;flex-direction:column;
}
.rb-prev-vtoolbar{
  height:44px;background:#323538;color:#e5e7eb;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  font-size:13.5px;flex-shrink:0;
}
.rb-prev-vtoolbar-title{
  font-weight:500;color:#f3f4f6;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rb-prev-vt-btn{
  background:none;border:none;color:#e5e7eb;cursor:pointer;
  padding:6px 8px;border-radius:4px;font-size:14px;line-height:1;
  display:inline-flex;align-items:center;gap:4px;
}
.rb-prev-vt-btn:hover{ background:rgba(255,255,255,.08) }
.rb-prev-vt-page{
  font-size:12.5px;background:rgba(0,0,0,.35);
  padding:4px 8px;border-radius:4px;color:#e5e7eb;
}
.rb-prev-iframe-wrap{
  flex:1;overflow:auto;
  display:flex;justify-content:center;align-items:flex-start;
  /* v3.9.444 — was padding:16px, which stole 32px of vertical space
     and shrank the visible iframe. Kept just enough horizontal
     breathing room; top/bottom padding trimmed so the full A4 page
     fits at 100% zoom on typical laptop viewports. */
  padding:4px 10px;
  background:#3a3d42;
}
.rb-prev-iframe{
  /* v3.9.444 — Preview was capped at max-width:820px and
     height:calc(100vh - 200px), which cropped the bottom half of the
     invoice at 100% zoom (an A4 page is 794×1123 px at 100%).
     Widened to 960 px and reclaimed ~140 px of vertical space by
     subtracting only what the dark viewer toolbar actually takes
     (44 px) plus a hair for the wrap padding. Also set a full-A4
     min-height so shorter viewports scroll the iframe (which the
     PDF renders correctly inside) instead of cropping. */
  width:100%;max-width:960px;
  height:calc(100vh - 56px);
  min-height:1160px;
  background:#fff;border:none;border-radius:2px;
  box-shadow:0 8px 32px rgba(0,0,0,.28);
}
.rb-prev-iframe-loading{
  color:#cbd5e1;font-size:13px;padding:60px 20px;text-align:center;
}

/* Right sidebar */
.rb-prev-side{
  width:460px;background:#fff;
  border-left:1px solid #e8ebef;
  display:flex;flex-direction:column;
  overflow-y:auto;flex-shrink:0;
}
.rb-prev-side-inner{ padding:26px 28px 30px }

.rb-prev-saved-title{
  font-size:18px;font-weight:700;color:#111827;
  margin:0 0 6px;line-height:1.3;
}
.rb-prev-saved-sub{
  font-size:12.5px;color:#6b7280;margin:0 0 18px;line-height:1.5;
}

.rb-prev-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;
}
.rb-prev-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid #e5e7eb;color:#374151;
  padding:6px 11px;border-radius:16px;font-size:11.5px;
  cursor:pointer;transition:all .12s;font-weight:500;
}
.rb-prev-chip:hover{ background:#f9fafb;border-color:#d1d5db }
.rb-prev-chip svg{ width:12px;height:12px }
.rb-prev-chip.ai{
  border-color:#c7d2fe;background:#eef2ff;color:#4338ca;
}
.rb-prev-chip.ai:hover{ background:#e0e7ff }

.rb-prev-sec-hdr{
  font-size:12px;color:#6b7280;font-weight:500;
  margin:0 0 10px;text-transform:none;
}

.rb-prev-send{
  display:flex;gap:10px;margin-bottom:22px;
}
.rb-prev-send-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:1px solid #e5e7eb;
  padding:8px 12px;border-radius:8px;font-size:12.5px;
  color:#374151;cursor:pointer;font-weight:500;transition:all .12s;
}
.rb-prev-send-btn:hover{ background:#f9fafb;border-color:#d1d5db }
.rb-prev-send-btn svg{ width:14px;height:14px;flex-shrink:0 }
.rb-prev-send-btn.email svg{ color:#ea4335 }
.rb-prev-send-btn.wa svg{ color:#25D366 }

.rb-prev-actions{
  display:flex;flex-direction:column;gap:2px;margin-bottom:20px;
}
.rb-prev-act{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:none;
  padding:9px 4px;border-radius:6px;
  font-size:13px;color:#374151;cursor:pointer;
  text-align:left;font-weight:500;transition:background .1s;
}
.rb-prev-act:hover{ background:#f6f7f9 }
.rb-prev-act svg{ width:14px;height:14px;flex-shrink:0;color:#6b7280 }
.rb-prev-act.danger{ color:#dc2626 }
.rb-prev-act.danger svg{ color:#dc2626 }
.rb-prev-act .lock{
  margin-left:auto;font-size:10px;color:#94a3b8;
}

.rb-prev-print-main{
  width:100%;background:#2563EB;color:#fff;border:none;
  padding:12px 18px;border-radius:8px;font-size:14px;
  font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .12s;margin-top:6px;
}
.rb-prev-print-main:hover{ background:#1D4ED8 }
.rb-prev-print-main svg{ width:15px;height:15px }

.rb-prev-goto{
  display:block;text-align:center;
  padding:10px;color:#6b7280;font-size:12.5px;
  cursor:pointer;background:none;border:none;width:100%;
  margin-top:2px;text-decoration:none;
}
.rb-prev-goto:hover{ color:#2563EB }

/* Convert dropdown menu */
.rb-prev-convert-menu{
  position:fixed;z-index:9900;background:#fff;
  border:1px solid #e5e7eb;border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.16);
  min-width:220px;max-height:340px;overflow-y:auto;
  padding:6px;
}
.rb-prev-convert-item{
  padding:8px 12px;font-size:12.5px;color:#374151;
  cursor:pointer;border-radius:6px;
}
.rb-prev-convert-item:hover{ background:#f3f4f6 }

/* Desktop: hide mobile-only elements entirely */
.rb-prev-mob-bar,
.rb-prev-mob-scrim{ display:none; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.369 — Mobile-first layout for the doc preview overlay
   ─────────────────────────────────────────────────────────────────
   On phones the desktop side-by-side layout crams every button into
   ~45vh which is bad UX. This block restructures the modal for touch:

   • Full-screen iframe (no side sidebar eating half the width)
   • Slim top toolbar with only essentials — close, title, download
   • Sticky bottom action bar with the 5 most-used actions as icons:
       Print · WhatsApp · Email · Download · More
   • "More" opens the full sidebar as a slide-up bottom sheet, so
     every action stays reachable without cluttering the main view.
   • Backdrop scrim tap or Esc closes the sheet.

   Desktop (≥769px) is entirely unaffected — the bottom bar/scrim
   stay `display: none` (see the rules above this block).
═══════════════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* Layout: viewer fills all space, sidebar becomes bottom-sheet */
  .rb-prev-overlay{ display:flex; flex-direction:column; }
  .rb-prev-body{ flex-direction:column; flex:1; min-height:0; }
  .rb-prev-main{ flex:1; min-height:0; padding-bottom:0; }

  /* Toolbar: shrink & hide the zoom / page-count controls (pinch-zoom is nicer) */
  .rb-prev-vtoolbar{ height:44px; padding:0 6px; gap:6px; }
  .rb-prev-vtoolbar-title{ font-size:12.5px; }
  .rb-prev-vt-page,
  #rb-prev-zoom-out,
  #rb-prev-zoom-in,
  #rb-prev-zoom-lbl,
  #rb-prev-print-toolbar{ display:none; }
  .rb-prev-vt-close{ padding:4px 10px !important; font-size:24px; }

  /* Iframe fills the whole main area with padding-safe scroll */
  .rb-prev-iframe-wrap{ padding:8px; background:#3a3d42; }
  .rb-prev-iframe{
    width:100%; max-width:none;
    height:100%; min-height:0;
    border-radius:2px;
  }

  /* Sidebar becomes a bottom-sheet: hidden by default, slides up on More */
  .rb-prev-side{
    position:fixed;
    left:0; right:0; bottom:0;
    width:100vw;
    max-height:80vh;
    height:auto;
    border-left:none;
    border-top:1px solid #e5e7eb;
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    box-shadow:0 -10px 40px rgba(15,23,42,.18);
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    z-index:9850;
    padding-bottom:8px;
  }
  .rb-prev-side.mob-open{ transform:translateY(0); }

  /* Grab handle at the top of the sheet */
  .rb-prev-side::before{
    content:"";
    display:block;
    width:44px; height:5px;
    background:#D1D5DB;
    border-radius:3px;
    margin:8px auto 4px;
  }
  .rb-prev-side-inner{ padding:14px 20px 20px; }
  .rb-prev-saved-title{ font-size:16px; margin-bottom:4px; }
  .rb-prev-saved-sub{ font-size:12px; margin-bottom:14px; }
  .rb-prev-chips{ margin-bottom:16px; }
  .rb-prev-sec-hdr{ margin-bottom:8px; }
  .rb-prev-send{ margin-bottom:16px; }
  .rb-prev-actions{ margin-bottom:14px; }

  /* Backdrop scrim behind the bottom sheet */
  .rb-prev-mob-scrim{
    display:block;
    position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    z-index:9840;
    opacity:0; visibility:hidden;
    transition:opacity .18s;
  }
  .rb-prev-mob-scrim.on{ opacity:1; visibility:visible; }

  /* Bottom action bar — 5 icon buttons, sticky to bottom */
  .rb-prev-mob-bar{
    display:flex;
    align-items:center;
    justify-content:space-around;
    height:62px;
    background:#fff;
    border-top:1px solid #E5E7EB;
    padding:4px 0;
    flex-shrink:0;
    z-index:20;
    /* Safe-area padding for iPhone notch/home indicator */
    padding-bottom:max(4px, env(safe-area-inset-bottom));
    height:calc(62px + env(safe-area-inset-bottom, 0px));
  }
  .rb-prev-mob-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:none;
    border:none;
    padding:6px 4px;
    color:#374151;
    font-size:10.5px;
    font-family:inherit;
    font-weight:500;
    cursor:pointer;
    min-width:56px;
    line-height:1.1;
    transition:opacity .1s;
  }
  .rb-prev-mob-btn:active{ opacity:.55; }
  .rb-prev-mob-btn svg{
    width:22px; height:22px;
    color:#374151;
    display:block;
    flex-shrink:0;
  }
  .rb-prev-mob-btn.primary{ color:#2563EB; }
  .rb-prev-mob-btn.primary svg{ color:#2563EB; }
  .rb-prev-mob-btn span{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    max-width:64px;
  }
}
/* ══════════ END v3.9.369 mobile-first preview layout ══════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.438 — Share via Email sidebar (opened from the View/Print overlay).
   Right-slide sheet matching the Swipe reference: readonly From chip,
   To / Cc / Bcc, Subject, rich-text body, and a bottom-anchored Send
   Email button. Sits at a higher z-index than the doc-preview overlay
   so it layers cleanly on top.
══════════════════════════════════════════════════════════════════════ */
.rb-se-wrap{
  position:fixed; inset:0;
  z-index:10800;
  pointer-events:none;
}
.rb-se-wrap.open{ pointer-events:auto; }
.rb-se-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  transition:opacity .22s ease;
}
.rb-se-wrap.open .rb-se-scrim{ opacity:1; }
.rb-se-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(760px, 96vw);
  background:#f5f6f8;
  box-shadow:-16px 0 40px rgba(0,0,0,.20);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  font-family:inherit;
}
.rb-se-wrap.open .rb-se-side{ transform:translateX(0); }

/* Header — X close on the left, title in the middle, Preview + Send on
   the right. Matches the Swipe layout exactly. */
.rb-se-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  flex-shrink:0;
}
.rb-se-x{
  width:32px; height:32px;
  border:none; background:transparent;
  font-size:26px; line-height:1;
  color:#6b7280;
  cursor:pointer;
  border-radius:6px;
  padding:0;
  display:flex; align-items:center; justify-content:center;
}
.rb-se-x:hover{ background:#f3f4f6; color:#111; }
.rb-se-title{
  font-size:15px; font-weight:600;
  color:#111;
  margin:0;
  flex:1;
}
.rb-se-head-actions{ display:flex; gap:8px; align-items:center; }
.rb-se-btn-ghost{
  padding:8px 16px;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-family:inherit; font-size:13px; font-weight:500;
  color:#374151;
  cursor:pointer;
  transition:background .12s;
}
.rb-se-btn-ghost:hover{ background:#f9fafb; }
.rb-se-btn-primary{
  padding:8px 18px;
  background:#2563eb;
  border:none;
  border-radius:6px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:background .12s;
}
.rb-se-btn-primary:hover{ background:#1d4ed8; }
.rb-se-btn-primary:disabled{ cursor:not-allowed; }

/* Scrollable body area */
.rb-se-body{
  padding:16px 18px 24px;
  overflow-y:auto;
  flex:1;
  display:flex; flex-direction:column;
  gap:14px;
}
.rb-se-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px 16px;
}

/* Field row: label above input (Swipe uses vertical labels) */
.rb-se-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
  border-bottom:1px solid #f3f4f6;
}
.rb-se-row:last-child{ border-bottom:none; }
.rb-se-lbl{
  /* v3.9.451 — Fixed width (not min-width) so every label column
     is exactly the same size regardless of label text length.
     Previously labels like "Designation" and "Join date" were wider
     than the 64px min-width, so each row's input started at a
     different X and the form looked staggered. */
  width:110px;
  min-width:110px;
  max-width:110px;
  font-size:13px;
  color:#4b5563;
  font-weight:500;
  flex-shrink:0;
  word-wrap:break-word;
}
.rb-se-inp{
  flex:1 1 auto;
  width:100%;
  padding:9px 12px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  font-family:inherit; font-size:13px;
  color:#111;
  background:#fff;
  outline:none;
  box-sizing:border-box;
  min-width:0;
  /* v3.9.451 — Force select + date/number/etc to honour flex:1 and
     stretch to fill the row. Some browsers give <select> and
     <input type="date"> a small intrinsic width instead of expanding. */
  max-width:100%;
}
/* v3.9.451 — Kill webkit's tiny inner controls on <input type="date">
   that made the date column visually shorter than text inputs. */
.rb-se-inp[type="date"],
.rb-se-inp[type="month"],
.rb-se-inp[type="number"]{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
select.rb-se-inp{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path fill='%236b7280' d='M6 7L0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.rb-se-inp:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}

/* From row: chip + Bcc toggle button on the right */
.rb-se-fld-wrap{
  display:flex; align-items:center; gap:8px;
  flex:1; min-width:0;
}
.rb-se-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px 5px 5px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:20px;
  font-size:12.5px;
  color:#166534;
}
.rb-se-chip-avatar{
  width:22px; height:22px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.rb-se-chip-txt{ font-weight:500; }
.rb-se-chip-lock{ font-size:11px; opacity:.75; }
.rb-se-bcc-toggle{
  margin-left:auto;
  padding:5px 12px;
  background:transparent;
  border:1px solid #d1d5db;
  border-radius:14px;
  font-family:inherit; font-size:12px; font-weight:500;
  color:#6b7280;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.rb-se-bcc-toggle:hover{ background:#f3f4f6; color:#111; }

/* Toolbar above the body editor */
.rb-se-toolbar{
  display:flex; align-items:center; gap:2px;
  padding:6px 4px;
  border-bottom:1px solid #f3f4f6;
  flex-wrap:wrap;
}
.rb-se-tb{
  min-width:28px; height:28px;
  padding:0 8px;
  background:transparent;
  border:none;
  border-radius:4px;
  font-family:inherit; font-size:13px;
  color:#374151;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .1s;
}
.rb-se-tb:hover{ background:#f3f4f6; }
.rb-se-tb-sep{
  width:1px; height:18px; background:#e5e7eb;
  margin:0 4px;
}

/* Body editor */
.rb-se-body-edit{
  min-height:180px;
  max-height:340px;
  overflow-y:auto;
  padding:12px 14px;
  font-family:inherit; font-size:13px;
  color:#111;
  line-height:1.55;
  outline:none;
}
.rb-se-body-edit:focus-visible{
  outline:2px solid rgba(37,99,235,.14);
  outline-offset:-1px;
}
.rb-se-body-edit p{ margin:0 0 10px; }

.rb-se-note{
  font-size:11.5px;
  color:#6b7280;
  font-style:italic;
  padding:4px 6px 0;
}

/* Mobile — fill the viewport, condense the header actions */
@media (max-width:640px){
  .rb-se-side{ width:100vw; }
  .rb-se-btn-ghost{ display:none; }
  .rb-se-head{ padding:12px 12px; gap:8px; }
  .rb-se-title{ font-size:14px; }
  .rb-se-body{ padding:12px 12px 20px; }
  .rb-se-row{ flex-direction:column; align-items:stretch; gap:6px; }
  /* v3.9.451 — Override desktop fixed width; mobile stacks vertically. */
  .rb-se-lbl{ width:auto; min-width:auto; max-width:none; }
  .rb-se-fld-wrap{ flex-wrap:wrap; }
  .rb-se-bcc-toggle{ margin-left:0; }
}

html[data-theme="dark"] .rb-se-side{ background:#0f172a; }
html[data-theme="dark"] .rb-se-head{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .rb-se-title{ color:#e2e8f0; }
html[data-theme="dark"] .rb-se-btn-ghost{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .rb-se-btn-ghost:hover{ background:#334155; }
html[data-theme="dark"] .rb-se-card{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .rb-se-lbl{ color:#94a3b8; }
html[data-theme="dark"] .rb-se-inp{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .rb-se-body-edit{ color:#e2e8f0; }
html[data-theme="dark"] .rb-se-row{ border-color:#334155; }
html[data-theme="dark"] .rb-se-toolbar{ border-color:#334155; }
html[data-theme="dark"] .rb-se-tb{ color:#cbd5e1; }
html[data-theme="dark"] .rb-se-tb:hover{ background:#334155; }
html[data-theme="dark"] .rb-se-tb-sep{ background:#334155; }
html[data-theme="dark"] .rb-se-note{ color:#94a3b8; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.368 — Mobile Settings: drill-down navigation
   On mobile screens, replace the awkward stacked/dropdown layout with
   a clean two-level drill-down:
     1. Tap Settings          → see the section menu list only
     2. Tap a section         → that section takes over the full screen,
                                with a Back bar sticky at the top
     3. Tap Back              → return to the menu list

   Desktop (≥ 769px) is entirely untouched — the mobile back bar is
   force-hidden and the two-column grid still applies.

   Implementation: a `data-view` attribute on `.ma-set2` switches which
   half is visible on mobile. No JS logic runs on desktop because the
   selectors below only match at ≤ 768px.
═══════════════════════════════════════════════════════════════════ */

/* Desktop / tablet — the back bar is a mobile-only element */
.ma-set2-mob-back{ display:none; }

@media (max-width:768px){
  /* Force a single-column stack so nav + body don't fight for space */
  .ma-set2{ grid-template-columns:1fr !important; gap:0 !important; }
  .ma-set2-nav{ position:static !important; padding:0 4px; }

  /* Menu view (default): show nav, hide body */
  .ma-set2:not([data-view="section"]) .ma-set2-body{ display:none !important; }

  /* Section view: hide nav, show body */
  .ma-set2[data-view="section"] .ma-set2-nav{ display:none !important; }
  .ma-set2[data-view="section"] .ma-set2-body{ display:block !important; }

  /* Back bar becomes visible only while a section is open */
  .ma-set2[data-view="section"] .ma-set2-mob-back{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:var(--surf, #fff);
    border-bottom:1px solid var(--bdr, #e5e7eb);
    position:sticky;
    top:0;
    z-index:5;
    margin-bottom:14px;
    box-shadow:0 1px 6px rgba(15,23,42,.05);
  }
  .ma-set2[data-view="section"] .ma-set2-mob-back button{
    background:none;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    color:var(--brand, #2563EB);
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:inherit;
    line-height:1;
  }
  .ma-set2[data-view="section"] .ma-set2-mob-back button:hover,
  .ma-set2[data-view="section"] .ma-set2-mob-back button:active{
    background:var(--surf2, #f3f4f6);
  }
  .ma-set2[data-view="section"] .ma-set2-mob-back button svg{
    display:block; flex-shrink:0;
  }
  .ma-set2[data-view="section"] .ma-set2-mob-back .lbl{
    font-size:16px;
    font-weight:700;
    color:var(--text, #111827);
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    padding-right:74px;  /* balance visual centre with the button width */
  }

  /* Menu link presentation on mobile — bigger tap targets, clean rows */
  .ma-set2-link{
    padding:14px 16px !important;
    font-size:14.5px !important;
    border-radius:10px !important;
  }
  .ma-set2-link.active::before{ display:none; }  /* remove desktop-only left rail */
  .ma-set2-link::after{
    content:"›";
    margin-left:auto;
    color:var(--muted, #9CA3AF);
    font-size:22px;
    line-height:1;
    font-weight:400;
  }
  .ma-set2-panel-hdr{
    padding:12px 16px !important;
    font-size:13px !important;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted, #6B7280) !important;
    background:transparent !important;
    border-bottom:none !important;
  }
  .ma-set2-panel{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    margin-bottom:8px;
  }
  .ma-set2-panel-body{ padding:2px !important; }
}
/* ══════════ END v3.9.368 mobile settings drill-down ══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.373 — Toast notifications
   Renders the success/error/warning card style shown in the reference
   design: coloured top strip + ringed icon + message text. Fixed to
   top-center of the viewport with a smooth slide-down entry.
═══════════════════════════════════════════════════════════════════ */

.rb-toast-host{
  position:fixed;
  top:20px; left:50%;
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;   /* let clicks pass through gaps between toasts */
  max-width:calc(100vw - 24px);
  width:auto;
}

.rb-toast{
  position:relative;
  min-width:340px;
  max-width:560px;
  background:#fff;
  border-radius:12px;
  box-shadow:
    0 10px 32px rgba(15,23,42,.16),
    0 2px 6px  rgba(15,23,42,.06);
  overflow:hidden;
  opacity:0;
  transform:translateY(-16px) scale(.98);
  transition:opacity .24s cubic-bezier(.2,.7,.2,1),
             transform .28s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;
  pointer-events:auto;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
.rb-toast.rb-toast-on{
  opacity:1;
  transform:translateY(0) scale(1);
}
.rb-toast.rb-toast-out{
  opacity:0;
  transform:translateY(-12px) scale(.98);
  transition-duration:.22s;
}

/* Coloured top strip — signals the message type at a glance */
.rb-toast-bar{
  height:4px;
  background:var(--rb-toast-color, #10B981);
  width:100%;
}

/* Body row: icon on the left, message on the right */
.rb-toast-body{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 24px 18px 20px;
}

/* Ringed icon — light tint background + coloured stroke on the check */
.rb-toast-ico{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--rb-toast-tint, #D1FAE5);
  border:2px solid var(--rb-toast-color, #10B981);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  opacity:.95;
}
.rb-toast-ico svg{ display:block; }

/* Message text */
.rb-toast-msg{
  font-size:15px;
  font-weight:500;
  color:#374151;
  line-height:1.4;
  word-break:break-word;
  flex:1;
  min-width:0;
}

/* Per-type accent — CSS custom properties are set inline on each toast,
   but keep these class-based fallbacks in case a browser drops the vars */
.rb-toast-ok   { --rb-toast-color:#10B981; --rb-toast-tint:#D1FAE5; }
.rb-toast-err  { --rb-toast-color:#EF4444; --rb-toast-tint:#FEE2E2; }
.rb-toast-warn { --rb-toast-color:#F59E0B; --rb-toast-tint:#FEF3C7; }
.rb-toast-info { --rb-toast-color:#3B82F6; --rb-toast-tint:#DBEAFE; }

/* Mobile: shrink minimum width so long messages don't force overflow */
@media (max-width:520px){
  .rb-toast-host{ top:12px; max-width:calc(100vw - 20px); }
  .rb-toast{ min-width:0; max-width:100%; }
  .rb-toast-body{ padding:14px 18px 14px 14px; gap:12px; }
  .rb-toast-ico{ width:38px; height:38px; }
  .rb-toast-ico svg{ width:24px; height:24px; }
  .rb-toast-msg{ font-size:14px; }
}
/* ══════════ END v3.9.373 toast notifications ══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.376 — Sticky save buttons (toggle in Settings › General)
   ─────────────────────────────────────────────────────────────────
   When body has the .rb-sticky-actions class, the Save / Save & Print
   button rows across every create/edit page get pinned to the bottom
   of the viewport. This means the primary action is always reachable
   without scrolling to the bottom of a long invoice / quotation /
   credit note / debit note form.

   The class is toggled from Settings › General Options › Sticky Save
   Buttons and persisted in localStorage + server ui_prefs.

   Targeted selectors:
     .ai-btn-row     — Sale/Purchase invoice bottom button row
     .gst-action-row — GST-family editors (credit/debit note, sale
                       return, purchase return, delivery challan, etc.)
════════════════════════════════════════════════════════════════════ */

body.rb-sticky-actions .ai-btn-row,
body.rb-sticky-actions .gst-action-row{
  position:fixed !important;
  left:0; right:0; bottom:0;
  margin:0 !important;
  padding:12px 100px 12px 24px !important;   /* right pad clears floating chatbot */
  background:var(--surf, #fff) !important;
  border-top:1px solid var(--bdr, #e5e7eb) !important;
  box-shadow:0 -6px 20px rgba(15,23,42,.08) !important;
  z-index:100;
  gap:12px;
  /* iOS safe-area bottom padding */
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Leave breathing room at the bottom of the page so content doesn't
   hide under the fixed bar */
body.rb-sticky-actions .ma-pg{
  padding-bottom:96px;
}

/* Sale invoice special case: `.ai-btn-row` is nested inside
   `.ai-bottom > .ai-bottom-inner` (right-column that also holds totals).
   When we lift `.ai-btn-row` out of flow with `position:fixed`, its
   parent no longer contributes padding — collapse the parent's own
   bottom padding to avoid an ugly gap where the button row used to sit. */
body.rb-sticky-actions .ai-bottom{
  padding-bottom:0;
}

/* When sticky is ON, the sticky bar itself keeps the Save button clear
   of the chatbot, so the FAB can return to its original bottom-right
   corner (22px) as it was before v3.9.374's clearance shim. */
body.rb-sticky-actions .ma-ai-fab-wrap{
  bottom:22px;
}

/* Mobile: full-width sticky bar with tighter side padding.
   Bottom bar sits ABOVE the mobile bottom nav (which is ~56–64px tall). */
@media (max-width:640px){
  body.rb-sticky-actions .ai-btn-row,
  body.rb-sticky-actions .gst-action-row{
    padding:10px 14px !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    bottom:calc(58px + env(safe-area-inset-bottom, 0px));  /* above bottom nav */
  }
  body.rb-sticky-actions .ma-pg{
    padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px));
  }
  /* Mobile chatbot stays at its offset above the bottom nav — same as
     before, no change needed since mobile bar sits on top of nav */
}
/* ══════════ END v3.9.376 sticky save buttons ══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.411 — Hide the browser's native <input type="number"> spin
   buttons (the tiny ▲▼ arrows the browser adds inside every number
   field). Users found them intrusive in every create/edit form's item
   Qty cell — they stole visible width, were easy to mis-tap on mobile,
   and clashed with the app's flat design language.

   Applied globally to every type="number" input, because the item Qty
   field appears in the tables of EVERY create page (Sale Invoice,
   Purchase Invoice, Sale Return, Purchase Return, Credit Note, Debit
   Note, Quotation, Sale Order, Purchase Order, Delivery Challan,
   Packing List, Manufacturing, Job Work, Service Request, etc.) — a
   selector list would be long and easy to forget for future doc types.

   Users can still type/tab into the field and use keyboard arrows or
   scroll wheel to increment as normal — only the visual buttons go.

   If any specific input ever needs the spinners back, add the
   `.rb-allow-spinners` class and the `:not(...)` guard skips it.
════════════════════════════════════════════════════════════════════ */

/* WebKit / Blink — Chrome, Safari, Edge, Brave, Opera, most mobile */
input[type="number"]:not(.rb-allow-spinners)::-webkit-outer-spin-button,
input[type="number"]:not(.rb-allow-spinners)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Firefox — needs a different property on the input itself */
input[type="number"]:not(.rb-allow-spinners) {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* ══════════ END v3.9.411 no-spinner number inputs ══════════ */

/* ═══════════════════════════════════════════════════════════════════════
   v3.9.415 — SALES REPORT REDESIGN  (#pg-sales-report only)
   ─────────────────────────────────────────────────────────────────────
   Scope: every rule below is prefixed with #pg-sales-report so the
   ~30 other report pages that share the .sr-* classes stay on the
   legacy visual. Same specificity as the shared rules (1 id + 1 class),
   later source order → these override.

   Design goals:
     · Warmer card surface with a brand-tinted top rail (identity mark)
     · Larger, calmer input rhythm — bigger paddings, refined labels,
       coloured focus ring using --brand
     · Reset / Search buttons re-proportioned so Search reads as the
       primary CTA even at a glance
     · Toggle buttons in the header show an "on" state via filled
       brand-bg tint (was: unstyled beige box that looked disabled)
     · Advance Filter / Customize Report blocks nested visually as a
       card-inside-card with a coloured left rail so their scope is
       obvious even after a page scroll
     · Fixed action bar redone as a wider floating card with clearer
       spacing between the four actions
     · Results table gets a sticky header + zebra rows for long
       registers, plus a right-aligned totals footer

   Zero markup changes: every id/class targeted below already exists
   in pg-sales-report. No JS impact. Removing this whole block reverts
   the Sales Report to its previous look with no side effects.
   ═══════════════════════════════════════════════════════════════════ */
/* ── 1) Filter CARD — elevated surface, no visible edges (v3.9.415-b: user
        asked us to drop the green top rail, the outer border, and the
        header/body divider — everything that looked like a "box wall".
        We keep only a soft floating shadow so the card still feels raised
        against the page background.) ──────────────────────────────────── */
#pg-day-wise-pl .sr-card,
#pg-sales-report .sr-card,
#pg-notifications .sr-card,
#pg-gstr3b .sr-card,
#pg-gstr2b .sr-card,
#pg-gstr1 .sr-card,
#pg-customer-wise-pl .sr-card,
#pg-bill-pl .sr-card,
#pg-daybook .sr-card,
#pg-stock-report .sr-card,
#pg-manufacture-report .sr-card,
#pg-product-report .sr-card,
#pg-company-outstanding-report .sr-card,
#pg-other-document-product-report .sr-card,
#pg-other-document-report .sr-card,
#pg-outward-payment-report .sr-card,
#pg-other-income-report .sr-card,
#pg-product-wise-pl .sr-card,
#pg-daily-expenses-report .sr-card,
#pg-inward-payment-report .sr-card,
#pg-purchase-product-report .sr-card,
#pg-sale-product-report .sr-card,
#pg-sale-outstanding .sr-card,
#pg-purchase-outstanding .sr-card,
#pg-purchase-report .pr-card{
  background:var(--surf,#fff);
  border:none;                                    /* was: 1px outer border */
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  overflow:hidden;
  margin-bottom:22px;
  position:relative;
}/* Green gradient top rail removed per user request ("looks to bad").
   Kept as an empty rule so future readers see the removal was deliberate. */
#pg-day-wise-pl .sr-card::before,
#pg-sales-report .sr-card::before,
#pg-notifications .sr-card::before,
#pg-gstr3b .sr-card::before,
#pg-gstr2b .sr-card::before,
#pg-gstr1 .sr-card::before,
#pg-customer-wise-pl .sr-card::before,
#pg-bill-pl .sr-card::before,
#pg-daybook .sr-card::before,
#pg-stock-report .sr-card::before,
#pg-manufacture-report .sr-card::before,
#pg-product-report .sr-card::before,
#pg-company-outstanding-report .sr-card::before,
#pg-other-document-product-report .sr-card::before,
#pg-other-document-report .sr-card::before,
#pg-outward-payment-report .sr-card::before,
#pg-other-income-report .sr-card::before,
#pg-product-wise-pl .sr-card::before,
#pg-daily-expenses-report .sr-card::before,
#pg-inward-payment-report .sr-card::before,
#pg-purchase-product-report .sr-card::before,
#pg-sale-product-report .sr-card::before,
#pg-sale-outstanding .sr-card::before,
#pg-purchase-outstanding .sr-card::before,
#pg-purchase-report .pr-card::before{ content:none; }/* ── 2) Header — bigger title, action buttons re-styled as pill toggles.
        v3.9.415-b: divider under the header removed too — the padding
        + background contrast still separates it from the body visually. */
#pg-day-wise-pl .sr-card-hdr,
#pg-sales-report .sr-card-hdr,
#pg-notifications .sr-card-hdr,
#pg-gstr3b .sr-card-hdr,
#pg-gstr2b .sr-card-hdr,
#pg-gstr1 .sr-card-hdr,
#pg-customer-wise-pl .sr-card-hdr,
#pg-bill-pl .sr-card-hdr,
#pg-daybook .sr-card-hdr,
#pg-stock-report .sr-card-hdr,
#pg-manufacture-report .sr-card-hdr,
#pg-product-report .sr-card-hdr,
#pg-company-outstanding-report .sr-card-hdr,
#pg-other-document-product-report .sr-card-hdr,
#pg-other-document-report .sr-card-hdr,
#pg-outward-payment-report .sr-card-hdr,
#pg-other-income-report .sr-card-hdr,
#pg-product-wise-pl .sr-card-hdr,
#pg-daily-expenses-report .sr-card-hdr,
#pg-inward-payment-report .sr-card-hdr,
#pg-purchase-product-report .sr-card-hdr,
#pg-sale-product-report .sr-card-hdr,
#pg-sale-outstanding .sr-card-hdr,
#pg-purchase-outstanding .sr-card-hdr,
#pg-purchase-report .pr-card-hdr{
  padding:18px 22px 16px;
  border-bottom:none;                             /* was: 1px inner divider */
  background:linear-gradient(180deg, rgba(0,0,0,.015) 0%, transparent 100%);
  gap:12px;
  align-items:center;
}#pg-day-wise-pl .sr-card-title,
#pg-sales-report .sr-card-title,
#pg-notifications .sr-card-title,
#pg-gstr3b .sr-card-title,
#pg-gstr2b .sr-card-title,
#pg-gstr1 .sr-card-title,
#pg-customer-wise-pl .sr-card-title,
#pg-bill-pl .sr-card-title,
#pg-daybook .sr-card-title,
#pg-stock-report .sr-card-title,
#pg-manufacture-report .sr-card-title,
#pg-product-report .sr-card-title,
#pg-company-outstanding-report .sr-card-title,
#pg-other-document-product-report .sr-card-title,
#pg-other-document-report .sr-card-title,
#pg-outward-payment-report .sr-card-title,
#pg-other-income-report .sr-card-title,
#pg-product-wise-pl .sr-card-title,
#pg-daily-expenses-report .sr-card-title,
#pg-inward-payment-report .sr-card-title,
#pg-purchase-product-report .sr-card-title,
#pg-sale-product-report .sr-card-title,
#pg-sale-outstanding .sr-card-title,
#pg-purchase-outstanding .sr-card-title,
#pg-purchase-report .pr-card-title{
  font-size:16px;
  font-weight:700;
  color:var(--text,#0f172a);
  letter-spacing:-0.01em;
  /* Small decorative bar prefix so the title feels intentional */
  padding-left:11px;
  position:relative;
}#pg-day-wise-pl .sr-card-title::before,
#pg-sales-report .sr-card-title::before,
#pg-notifications .sr-card-title::before,
#pg-gstr3b .sr-card-title::before,
#pg-gstr2b .sr-card-title::before,
#pg-gstr1 .sr-card-title::before,
#pg-customer-wise-pl .sr-card-title::before,
#pg-bill-pl .sr-card-title::before,
#pg-daybook .sr-card-title::before,
#pg-stock-report .sr-card-title::before,
#pg-manufacture-report .sr-card-title::before,
#pg-product-report .sr-card-title::before,
#pg-company-outstanding-report .sr-card-title::before,
#pg-other-document-product-report .sr-card-title::before,
#pg-other-document-report .sr-card-title::before,
#pg-outward-payment-report .sr-card-title::before,
#pg-other-income-report .sr-card-title::before,
#pg-product-wise-pl .sr-card-title::before,
#pg-daily-expenses-report .sr-card-title::before,
#pg-inward-payment-report .sr-card-title::before,
#pg-purchase-product-report .sr-card-title::before,
#pg-sale-product-report .sr-card-title::before,
#pg-sale-outstanding .sr-card-title::before,
#pg-purchase-outstanding .sr-card-title::before,
#pg-purchase-report .pr-card-title::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:16px;
  background:var(--brand,#16a34a);
  border-radius:2px;
}/* Header action buttons — pill shape, brand-tint on hover, clear "on" state */
#pg-day-wise-pl .sr-hdr-btn,
#pg-sales-report .sr-hdr-btn,
#pg-notifications .sr-hdr-btn,
#pg-gstr3b .sr-hdr-btn,
#pg-gstr2b .sr-hdr-btn,
#pg-gstr1 .sr-hdr-btn,
#pg-customer-wise-pl .sr-hdr-btn,
#pg-bill-pl .sr-hdr-btn,
#pg-daybook .sr-hdr-btn,
#pg-stock-report .sr-hdr-btn,
#pg-manufacture-report .sr-hdr-btn,
#pg-product-report .sr-hdr-btn,
#pg-company-outstanding-report .sr-hdr-btn,
#pg-other-document-product-report .sr-hdr-btn,
#pg-other-document-report .sr-hdr-btn,
#pg-outward-payment-report .sr-hdr-btn,
#pg-other-income-report .sr-hdr-btn,
#pg-product-wise-pl .sr-hdr-btn,
#pg-daily-expenses-report .sr-hdr-btn,
#pg-inward-payment-report .sr-hdr-btn,
#pg-purchase-product-report .sr-hdr-btn,
#pg-sale-product-report .sr-hdr-btn,
#pg-sale-outstanding .sr-hdr-btn,
#pg-purchase-outstanding .sr-hdr-btn,
#pg-purchase-report .pr-hdr-btn{
  padding:8px 14px;
  background:var(--surf,#fff);
  border:1px solid var(--bdr,#e5e7eb);
  border-radius:999px;                          /* full pill */
  color:var(--text,#0f172a);
  font-size:12.5px;
  font-weight:600;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}#pg-day-wise-pl .sr-hdr-btn:hover,
#pg-sales-report .sr-hdr-btn:hover,
#pg-notifications .sr-hdr-btn:hover,
#pg-gstr3b .sr-hdr-btn:hover,
#pg-gstr2b .sr-hdr-btn:hover,
#pg-gstr1 .sr-hdr-btn:hover,
#pg-customer-wise-pl .sr-hdr-btn:hover,
#pg-bill-pl .sr-hdr-btn:hover,
#pg-daybook .sr-hdr-btn:hover,
#pg-stock-report .sr-hdr-btn:hover,
#pg-manufacture-report .sr-hdr-btn:hover,
#pg-product-report .sr-hdr-btn:hover,
#pg-company-outstanding-report .sr-hdr-btn:hover,
#pg-other-document-product-report .sr-hdr-btn:hover,
#pg-other-document-report .sr-hdr-btn:hover,
#pg-outward-payment-report .sr-hdr-btn:hover,
#pg-other-income-report .sr-hdr-btn:hover,
#pg-product-wise-pl .sr-hdr-btn:hover,
#pg-daily-expenses-report .sr-hdr-btn:hover,
#pg-inward-payment-report .sr-hdr-btn:hover,
#pg-purchase-product-report .sr-hdr-btn:hover,
#pg-sale-product-report .sr-hdr-btn:hover,
#pg-sale-outstanding .sr-hdr-btn:hover,
#pg-purchase-outstanding .sr-hdr-btn:hover,
#pg-purchase-report .pr-hdr-btn:hover{
  background:var(--brand-bg,#f0fdf4);
  border-color:var(--brand,#16a34a);
  color:var(--brand-dd,#15803d);
}#pg-day-wise-pl .sr-hdr-btn.on,
#pg-sales-report .sr-hdr-btn.on,
#pg-notifications .sr-hdr-btn.on,
#pg-gstr3b .sr-hdr-btn.on,
#pg-gstr2b .sr-hdr-btn.on,
#pg-gstr1 .sr-hdr-btn.on,
#pg-customer-wise-pl .sr-hdr-btn.on,
#pg-bill-pl .sr-hdr-btn.on,
#pg-daybook .sr-hdr-btn.on,
#pg-stock-report .sr-hdr-btn.on,
#pg-manufacture-report .sr-hdr-btn.on,
#pg-product-report .sr-hdr-btn.on,
#pg-company-outstanding-report .sr-hdr-btn.on,
#pg-other-document-product-report .sr-hdr-btn.on,
#pg-other-document-report .sr-hdr-btn.on,
#pg-outward-payment-report .sr-hdr-btn.on,
#pg-other-income-report .sr-hdr-btn.on,
#pg-product-wise-pl .sr-hdr-btn.on,
#pg-daily-expenses-report .sr-hdr-btn.on,
#pg-inward-payment-report .sr-hdr-btn.on,
#pg-purchase-product-report .sr-hdr-btn.on,
#pg-sale-product-report .sr-hdr-btn.on,
#pg-sale-outstanding .sr-hdr-btn.on,
#pg-purchase-outstanding .sr-hdr-btn.on,
#pg-purchase-report .pr-hdr-btn.on{
  background:var(--brand,#16a34a);
  border-color:var(--brand,#16a34a);
  color:#fff;
  box-shadow:0 4px 10px rgba(22,163,74,.22);
}#pg-day-wise-pl .sr-hdr-btn.on svg,
#pg-sales-report .sr-hdr-btn.on svg,
#pg-notifications .sr-hdr-btn.on svg,
#pg-gstr3b .sr-hdr-btn.on svg,
#pg-gstr2b .sr-hdr-btn.on svg,
#pg-gstr1 .sr-hdr-btn.on svg,
#pg-customer-wise-pl .sr-hdr-btn.on svg,
#pg-bill-pl .sr-hdr-btn.on svg,
#pg-daybook .sr-hdr-btn.on svg,
#pg-stock-report .sr-hdr-btn.on svg,
#pg-manufacture-report .sr-hdr-btn.on svg,
#pg-product-report .sr-hdr-btn.on svg,
#pg-company-outstanding-report .sr-hdr-btn.on svg,
#pg-other-document-product-report .sr-hdr-btn.on svg,
#pg-other-document-report .sr-hdr-btn.on svg,
#pg-outward-payment-report .sr-hdr-btn.on svg,
#pg-other-income-report .sr-hdr-btn.on svg,
#pg-product-wise-pl .sr-hdr-btn.on svg,
#pg-daily-expenses-report .sr-hdr-btn.on svg,
#pg-inward-payment-report .sr-hdr-btn.on svg,
#pg-purchase-product-report .sr-hdr-btn.on svg,
#pg-sale-product-report .sr-hdr-btn.on svg,
#pg-sale-outstanding .sr-hdr-btn.on svg,
#pg-purchase-outstanding .sr-hdr-btn.on svg,
#pg-purchase-report .pr-hdr-btn.on svg{ color:#fff; }/* ── 3) Card body — a touch more room to breathe ─────────────────────── */
#pg-day-wise-pl .sr-card-body,
#pg-sales-report .sr-card-body,
#pg-notifications .sr-card-body,
#pg-gstr3b .sr-card-body,
#pg-gstr2b .sr-card-body,
#pg-gstr1 .sr-card-body,
#pg-customer-wise-pl .sr-card-body,
#pg-bill-pl .sr-card-body,
#pg-daybook .sr-card-body,
#pg-stock-report .sr-card-body,
#pg-manufacture-report .sr-card-body,
#pg-product-report .sr-card-body,
#pg-company-outstanding-report .sr-card-body,
#pg-other-document-product-report .sr-card-body,
#pg-other-document-report .sr-card-body,
#pg-outward-payment-report .sr-card-body,
#pg-other-income-report .sr-card-body,
#pg-product-wise-pl .sr-card-body,
#pg-daily-expenses-report .sr-card-body,
#pg-inward-payment-report .sr-card-body,
#pg-purchase-product-report .sr-card-body,
#pg-sale-product-report .sr-card-body,
#pg-sale-outstanding .sr-card-body,
#pg-purchase-outstanding .sr-card-body,
#pg-purchase-report .pr-card-body{
  padding:22px 22px 18px;
}/* ── 4) Filter GRID — same 5-col layout, but every field gets a stronger
        label + a bigger input with a proper focus ring.
        v3.9.415-b: CRITICAL — the input/select rules use the DIRECT-CHILD
        combinator (>) so they hit only plain inputs (dates, invoice no,
        staff, series) and NOT the inputs living inside .sr-chip-field
        or .sr-combo-wrap (Customer/Vendor, Products/Services, Product
        Group, Serial No, Transaction Type, Cust/Vendor Group). Those
        already have their own borderless-inside-a-wrapper styling in
        the shared .sr-chip-field / .sr-combo-wrap rules. Without ">"
        the redesign was giving the inner input a full border + 10px
        padding, which broke the multi-select visual entirely. ─────── */
#pg-day-wise-pl .sr-filter-grid,
#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px 20px;
  margin-bottom:18px;
}#pg-day-wise-pl .sr-fg,
#pg-sales-report .sr-fg,
#pg-notifications .sr-fg,
#pg-gstr3b .sr-fg,
#pg-gstr2b .sr-fg,
#pg-gstr1 .sr-fg,
#pg-customer-wise-pl .sr-fg,
#pg-bill-pl .sr-fg,
#pg-daybook .sr-fg,
#pg-stock-report .sr-fg,
#pg-manufacture-report .sr-fg,
#pg-product-report .sr-fg,
#pg-company-outstanding-report .sr-fg,
#pg-other-document-product-report .sr-fg,
#pg-other-document-report .sr-fg,
#pg-outward-payment-report .sr-fg,
#pg-other-income-report .sr-fg,
#pg-product-wise-pl .sr-fg,
#pg-daily-expenses-report .sr-fg,
#pg-inward-payment-report .sr-fg,
#pg-purchase-product-report .sr-fg,
#pg-sale-product-report .sr-fg,
#pg-sale-outstanding .sr-fg,
#pg-purchase-outstanding .sr-fg,
#pg-purchase-report .pr-fg{ gap:7px; }#pg-day-wise-pl .sr-fg > label,
#pg-sales-report .sr-fg > label,
#pg-notifications .sr-fg > label,
#pg-gstr3b .sr-fg > label,
#pg-gstr2b .sr-fg > label,
#pg-gstr1 .sr-fg > label,
#pg-customer-wise-pl .sr-fg > label,
#pg-bill-pl .sr-fg > label,
#pg-daybook .sr-fg > label,
#pg-stock-report .sr-fg > label,
#pg-manufacture-report .sr-fg > label,
#pg-product-report .sr-fg > label,
#pg-company-outstanding-report .sr-fg > label,
#pg-other-document-product-report .sr-fg > label,
#pg-other-document-report .sr-fg > label,
#pg-outward-payment-report .sr-fg > label,
#pg-other-income-report .sr-fg > label,
#pg-product-wise-pl .sr-fg > label,
#pg-daily-expenses-report .sr-fg > label,
#pg-inward-payment-report .sr-fg > label,
#pg-purchase-product-report .sr-fg > label,
#pg-sale-product-report .sr-fg > label,
#pg-sale-outstanding .sr-fg > label,
#pg-purchase-outstanding .sr-fg > label,
#pg-purchase-report .pr-fg > label{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted,#64748b);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.2;
}#pg-day-wise-pl .sr-fg > input,
#pg-sales-report .sr-fg > input,
#pg-notifications .sr-fg > input,
#pg-gstr3b .sr-fg > input,
#pg-gstr2b .sr-fg > input,
#pg-gstr1 .sr-fg > input,
#pg-customer-wise-pl .sr-fg > input,
#pg-bill-pl .sr-fg > input,
#pg-daybook .sr-fg > input,
#pg-stock-report .sr-fg > input,
#pg-manufacture-report .sr-fg > input,
#pg-product-report .sr-fg > input,
#pg-company-outstanding-report .sr-fg > input,
#pg-other-document-product-report .sr-fg > input,
#pg-other-document-report .sr-fg > input,
#pg-outward-payment-report .sr-fg > input,
#pg-other-income-report .sr-fg > input,
#pg-product-wise-pl .sr-fg > input,
#pg-daily-expenses-report .sr-fg > input,
#pg-inward-payment-report .sr-fg > input,
#pg-purchase-product-report .sr-fg > input,
#pg-sale-product-report .sr-fg > input,
#pg-sale-outstanding .sr-fg > input,
#pg-purchase-outstanding .sr-fg > input,
#pg-purchase-report .pr-fg > input,
#pg-day-wise-pl .sr-fg > select,
#pg-sales-report .sr-fg > select,
#pg-notifications .sr-fg > select,
#pg-gstr3b .sr-fg > select,
#pg-gstr2b .sr-fg > select,
#pg-gstr1 .sr-fg > select,
#pg-customer-wise-pl .sr-fg > select,
#pg-bill-pl .sr-fg > select,
#pg-daybook .sr-fg > select,
#pg-stock-report .sr-fg > select,
#pg-manufacture-report .sr-fg > select,
#pg-product-report .sr-fg > select,
#pg-company-outstanding-report .sr-fg > select,
#pg-other-document-product-report .sr-fg > select,
#pg-other-document-report .sr-fg > select,
#pg-outward-payment-report .sr-fg > select,
#pg-other-income-report .sr-fg > select,
#pg-product-wise-pl .sr-fg > select,
#pg-daily-expenses-report .sr-fg > select,
#pg-inward-payment-report .sr-fg > select,
#pg-purchase-product-report .sr-fg > select,
#pg-sale-product-report .sr-fg > select,
#pg-sale-outstanding .sr-fg > select,
#pg-purchase-outstanding .sr-fg > select,
#pg-purchase-report .pr-fg > select{
  padding:10px 12px;
  border:1px solid var(--bdr,#e2e8f0);
  border-radius:8px;
  font-size:13.5px;
  background:var(--surf,#fff);
  color:var(--text,#0f172a);
  transition:border-color .12s, box-shadow .12s, background .12s;
}#pg-day-wise-pl .sr-fg > input:hover,
#pg-sales-report .sr-fg > input:hover,
#pg-notifications .sr-fg > input:hover,
#pg-gstr3b .sr-fg > input:hover,
#pg-gstr2b .sr-fg > input:hover,
#pg-gstr1 .sr-fg > input:hover,
#pg-customer-wise-pl .sr-fg > input:hover,
#pg-bill-pl .sr-fg > input:hover,
#pg-daybook .sr-fg > input:hover,
#pg-stock-report .sr-fg > input:hover,
#pg-manufacture-report .sr-fg > input:hover,
#pg-product-report .sr-fg > input:hover,
#pg-company-outstanding-report .sr-fg > input:hover,
#pg-other-document-product-report .sr-fg > input:hover,
#pg-other-document-report .sr-fg > input:hover,
#pg-outward-payment-report .sr-fg > input:hover,
#pg-other-income-report .sr-fg > input:hover,
#pg-product-wise-pl .sr-fg > input:hover,
#pg-daily-expenses-report .sr-fg > input:hover,
#pg-inward-payment-report .sr-fg > input:hover,
#pg-purchase-product-report .sr-fg > input:hover,
#pg-sale-product-report .sr-fg > input:hover,
#pg-sale-outstanding .sr-fg > input:hover,
#pg-purchase-outstanding .sr-fg > input:hover,
#pg-purchase-report .pr-fg > input:hover,
#pg-day-wise-pl .sr-fg > select:hover,
#pg-sales-report .sr-fg > select:hover,
#pg-notifications .sr-fg > select:hover,
#pg-gstr3b .sr-fg > select:hover,
#pg-gstr2b .sr-fg > select:hover,
#pg-gstr1 .sr-fg > select:hover,
#pg-customer-wise-pl .sr-fg > select:hover,
#pg-bill-pl .sr-fg > select:hover,
#pg-daybook .sr-fg > select:hover,
#pg-stock-report .sr-fg > select:hover,
#pg-manufacture-report .sr-fg > select:hover,
#pg-product-report .sr-fg > select:hover,
#pg-company-outstanding-report .sr-fg > select:hover,
#pg-other-document-product-report .sr-fg > select:hover,
#pg-other-document-report .sr-fg > select:hover,
#pg-outward-payment-report .sr-fg > select:hover,
#pg-other-income-report .sr-fg > select:hover,
#pg-product-wise-pl .sr-fg > select:hover,
#pg-daily-expenses-report .sr-fg > select:hover,
#pg-inward-payment-report .sr-fg > select:hover,
#pg-purchase-product-report .sr-fg > select:hover,
#pg-sale-product-report .sr-fg > select:hover,
#pg-sale-outstanding .sr-fg > select:hover,
#pg-purchase-outstanding .sr-fg > select:hover,
#pg-purchase-report .pr-fg > select:hover{
  border-color:var(--muted,#94a3b8);
}#pg-day-wise-pl .sr-fg > input:focus,
#pg-sales-report .sr-fg > input:focus,
#pg-notifications .sr-fg > input:focus,
#pg-gstr3b .sr-fg > input:focus,
#pg-gstr2b .sr-fg > input:focus,
#pg-gstr1 .sr-fg > input:focus,
#pg-customer-wise-pl .sr-fg > input:focus,
#pg-bill-pl .sr-fg > input:focus,
#pg-daybook .sr-fg > input:focus,
#pg-stock-report .sr-fg > input:focus,
#pg-manufacture-report .sr-fg > input:focus,
#pg-product-report .sr-fg > input:focus,
#pg-company-outstanding-report .sr-fg > input:focus,
#pg-other-document-product-report .sr-fg > input:focus,
#pg-other-document-report .sr-fg > input:focus,
#pg-outward-payment-report .sr-fg > input:focus,
#pg-other-income-report .sr-fg > input:focus,
#pg-product-wise-pl .sr-fg > input:focus,
#pg-daily-expenses-report .sr-fg > input:focus,
#pg-inward-payment-report .sr-fg > input:focus,
#pg-purchase-product-report .sr-fg > input:focus,
#pg-sale-product-report .sr-fg > input:focus,
#pg-sale-outstanding .sr-fg > input:focus,
#pg-purchase-outstanding .sr-fg > input:focus,
#pg-purchase-report .pr-fg > input:focus,
#pg-day-wise-pl .sr-fg > select:focus,
#pg-sales-report .sr-fg > select:focus,
#pg-notifications .sr-fg > select:focus,
#pg-gstr3b .sr-fg > select:focus,
#pg-gstr2b .sr-fg > select:focus,
#pg-gstr1 .sr-fg > select:focus,
#pg-customer-wise-pl .sr-fg > select:focus,
#pg-bill-pl .sr-fg > select:focus,
#pg-daybook .sr-fg > select:focus,
#pg-stock-report .sr-fg > select:focus,
#pg-manufacture-report .sr-fg > select:focus,
#pg-product-report .sr-fg > select:focus,
#pg-company-outstanding-report .sr-fg > select:focus,
#pg-other-document-product-report .sr-fg > select:focus,
#pg-other-document-report .sr-fg > select:focus,
#pg-outward-payment-report .sr-fg > select:focus,
#pg-other-income-report .sr-fg > select:focus,
#pg-product-wise-pl .sr-fg > select:focus,
#pg-daily-expenses-report .sr-fg > select:focus,
#pg-inward-payment-report .sr-fg > select:focus,
#pg-purchase-product-report .sr-fg > select:focus,
#pg-sale-product-report .sr-fg > select:focus,
#pg-sale-outstanding .sr-fg > select:focus,
#pg-purchase-outstanding .sr-fg > select:focus,
#pg-purchase-report .pr-fg > select:focus{
  border-color:var(--brand,#16a34a);
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
  background:var(--surf,#fff);
}/* Chip fields (Customer/Vendor multi-select etc.) — match the input polish
   by re-styling the WRAPPER, not the inner input. The wrapper is a direct
   child of .sr-fg, so we can style it freely without hitting the inner
   <input> that must stay borderless (base .sr-chip-field input rule). */
#pg-day-wise-pl .sr-fg > .sr-chip-field,
#pg-sales-report .sr-fg > .sr-chip-field,
#pg-notifications .sr-fg > .sr-chip-field,
#pg-gstr3b .sr-fg > .sr-chip-field,
#pg-gstr2b .sr-fg > .sr-chip-field,
#pg-gstr1 .sr-fg > .sr-chip-field,
#pg-customer-wise-pl .sr-fg > .sr-chip-field,
#pg-bill-pl .sr-fg > .sr-chip-field,
#pg-daybook .sr-fg > .sr-chip-field,
#pg-stock-report .sr-fg > .sr-chip-field,
#pg-manufacture-report .sr-fg > .sr-chip-field,
#pg-product-report .sr-fg > .sr-chip-field,
#pg-company-outstanding-report .sr-fg > .sr-chip-field,
#pg-other-document-product-report .sr-fg > .sr-chip-field,
#pg-other-document-report .sr-fg > .sr-chip-field,
#pg-outward-payment-report .sr-fg > .sr-chip-field,
#pg-other-income-report .sr-fg > .sr-chip-field,
#pg-product-wise-pl .sr-fg > .sr-chip-field,
#pg-daily-expenses-report .sr-fg > .sr-chip-field,
#pg-inward-payment-report .sr-fg > .sr-chip-field,
#pg-purchase-product-report .sr-fg > .sr-chip-field,
#pg-sale-product-report .sr-fg > .sr-chip-field,
#pg-sale-outstanding .sr-fg > .sr-chip-field,
#pg-purchase-outstanding .sr-fg > .sr-chip-field,
#pg-purchase-report .pr-fg > .pr-chip-field,
#pg-day-wise-pl .sr-fg > .sr-combo-wrap,
#pg-sales-report .sr-fg > .sr-combo-wrap,
#pg-notifications .sr-fg > .sr-combo-wrap,
#pg-gstr3b .sr-fg > .sr-combo-wrap,
#pg-gstr2b .sr-fg > .sr-combo-wrap,
#pg-gstr1 .sr-fg > .sr-combo-wrap,
#pg-customer-wise-pl .sr-fg > .sr-combo-wrap,
#pg-bill-pl .sr-fg > .sr-combo-wrap,
#pg-daybook .sr-fg > .sr-combo-wrap,
#pg-stock-report .sr-fg > .sr-combo-wrap,
#pg-manufacture-report .sr-fg > .sr-combo-wrap,
#pg-product-report .sr-fg > .sr-combo-wrap,
#pg-company-outstanding-report .sr-fg > .sr-combo-wrap,
#pg-other-document-product-report .sr-fg > .sr-combo-wrap,
#pg-other-document-report .sr-fg > .sr-combo-wrap,
#pg-outward-payment-report .sr-fg > .sr-combo-wrap,
#pg-other-income-report .sr-fg > .sr-combo-wrap,
#pg-product-wise-pl .sr-fg > .sr-combo-wrap,
#pg-daily-expenses-report .sr-fg > .sr-combo-wrap,
#pg-inward-payment-report .sr-fg > .sr-combo-wrap,
#pg-purchase-product-report .sr-fg > .sr-combo-wrap,
#pg-sale-product-report .sr-fg > .sr-combo-wrap,
#pg-sale-outstanding .sr-fg > .sr-combo-wrap,
#pg-purchase-outstanding .sr-fg > .sr-combo-wrap,
#pg-purchase-report .pr-fg > .pr-combo-wrap{
  border-radius:8px;
  min-height:40px;                                /* match the > input height */
  transition:border-color .12s, box-shadow .12s;
}#pg-day-wise-pl .sr-fg > .sr-chip-field,
#pg-sales-report .sr-fg > .sr-chip-field,
#pg-notifications .sr-fg > .sr-chip-field,
#pg-gstr3b .sr-fg > .sr-chip-field,
#pg-gstr2b .sr-fg > .sr-chip-field,
#pg-gstr1 .sr-fg > .sr-chip-field,
#pg-customer-wise-pl .sr-fg > .sr-chip-field,
#pg-bill-pl .sr-fg > .sr-chip-field,
#pg-daybook .sr-fg > .sr-chip-field,
#pg-stock-report .sr-fg > .sr-chip-field,
#pg-manufacture-report .sr-fg > .sr-chip-field,
#pg-product-report .sr-fg > .sr-chip-field,
#pg-company-outstanding-report .sr-fg > .sr-chip-field,
#pg-other-document-product-report .sr-fg > .sr-chip-field,
#pg-other-document-report .sr-fg > .sr-chip-field,
#pg-outward-payment-report .sr-fg > .sr-chip-field,
#pg-other-income-report .sr-fg > .sr-chip-field,
#pg-product-wise-pl .sr-fg > .sr-chip-field,
#pg-daily-expenses-report .sr-fg > .sr-chip-field,
#pg-inward-payment-report .sr-fg > .sr-chip-field,
#pg-purchase-product-report .sr-fg > .sr-chip-field,
#pg-sale-product-report .sr-fg > .sr-chip-field,
#pg-sale-outstanding .sr-fg > .sr-chip-field,
#pg-purchase-outstanding .sr-fg > .sr-chip-field,
#pg-purchase-report .pr-fg > .pr-chip-field{
  border:1px solid var(--bdr,#e2e8f0);
  padding:5px 7px;
}#pg-day-wise-pl .sr-fg > .sr-chip-field:hover,
#pg-sales-report .sr-fg > .sr-chip-field:hover,
#pg-notifications .sr-fg > .sr-chip-field:hover,
#pg-gstr3b .sr-fg > .sr-chip-field:hover,
#pg-gstr2b .sr-fg > .sr-chip-field:hover,
#pg-gstr1 .sr-fg > .sr-chip-field:hover,
#pg-customer-wise-pl .sr-fg > .sr-chip-field:hover,
#pg-bill-pl .sr-fg > .sr-chip-field:hover,
#pg-daybook .sr-fg > .sr-chip-field:hover,
#pg-stock-report .sr-fg > .sr-chip-field:hover,
#pg-manufacture-report .sr-fg > .sr-chip-field:hover,
#pg-product-report .sr-fg > .sr-chip-field:hover,
#pg-company-outstanding-report .sr-fg > .sr-chip-field:hover,
#pg-other-document-product-report .sr-fg > .sr-chip-field:hover,
#pg-other-document-report .sr-fg > .sr-chip-field:hover,
#pg-outward-payment-report .sr-fg > .sr-chip-field:hover,
#pg-other-income-report .sr-fg > .sr-chip-field:hover,
#pg-product-wise-pl .sr-fg > .sr-chip-field:hover,
#pg-daily-expenses-report .sr-fg > .sr-chip-field:hover,
#pg-inward-payment-report .sr-fg > .sr-chip-field:hover,
#pg-purchase-product-report .sr-fg > .sr-chip-field:hover,
#pg-sale-product-report .sr-fg > .sr-chip-field:hover,
#pg-sale-outstanding .sr-fg > .sr-chip-field:hover,
#pg-purchase-outstanding .sr-fg > .sr-chip-field:hover,
#pg-purchase-report .pr-fg > .pr-chip-field:hover,
#pg-day-wise-pl .sr-fg > .sr-combo-wrap:hover,
#pg-sales-report .sr-fg > .sr-combo-wrap:hover,
#pg-notifications .sr-fg > .sr-combo-wrap:hover,
#pg-gstr3b .sr-fg > .sr-combo-wrap:hover,
#pg-gstr2b .sr-fg > .sr-combo-wrap:hover,
#pg-gstr1 .sr-fg > .sr-combo-wrap:hover,
#pg-customer-wise-pl .sr-fg > .sr-combo-wrap:hover,
#pg-bill-pl .sr-fg > .sr-combo-wrap:hover,
#pg-daybook .sr-fg > .sr-combo-wrap:hover,
#pg-stock-report .sr-fg > .sr-combo-wrap:hover,
#pg-manufacture-report .sr-fg > .sr-combo-wrap:hover,
#pg-product-report .sr-fg > .sr-combo-wrap:hover,
#pg-company-outstanding-report .sr-fg > .sr-combo-wrap:hover,
#pg-other-document-product-report .sr-fg > .sr-combo-wrap:hover,
#pg-other-document-report .sr-fg > .sr-combo-wrap:hover,
#pg-outward-payment-report .sr-fg > .sr-combo-wrap:hover,
#pg-other-income-report .sr-fg > .sr-combo-wrap:hover,
#pg-product-wise-pl .sr-fg > .sr-combo-wrap:hover,
#pg-daily-expenses-report .sr-fg > .sr-combo-wrap:hover,
#pg-inward-payment-report .sr-fg > .sr-combo-wrap:hover,
#pg-purchase-product-report .sr-fg > .sr-combo-wrap:hover,
#pg-sale-product-report .sr-fg > .sr-combo-wrap:hover,
#pg-sale-outstanding .sr-fg > .sr-combo-wrap:hover,
#pg-purchase-outstanding .sr-fg > .sr-combo-wrap:hover,
#pg-purchase-report .pr-fg > .pr-combo-wrap:hover{
  border-color:var(--muted,#94a3b8);
}#pg-day-wise-pl .sr-fg > .sr-chip-field:focus-within,
#pg-sales-report .sr-fg > .sr-chip-field:focus-within,
#pg-notifications .sr-fg > .sr-chip-field:focus-within,
#pg-gstr3b .sr-fg > .sr-chip-field:focus-within,
#pg-gstr2b .sr-fg > .sr-chip-field:focus-within,
#pg-gstr1 .sr-fg > .sr-chip-field:focus-within,
#pg-customer-wise-pl .sr-fg > .sr-chip-field:focus-within,
#pg-bill-pl .sr-fg > .sr-chip-field:focus-within,
#pg-daybook .sr-fg > .sr-chip-field:focus-within,
#pg-stock-report .sr-fg > .sr-chip-field:focus-within,
#pg-manufacture-report .sr-fg > .sr-chip-field:focus-within,
#pg-product-report .sr-fg > .sr-chip-field:focus-within,
#pg-company-outstanding-report .sr-fg > .sr-chip-field:focus-within,
#pg-other-document-product-report .sr-fg > .sr-chip-field:focus-within,
#pg-other-document-report .sr-fg > .sr-chip-field:focus-within,
#pg-outward-payment-report .sr-fg > .sr-chip-field:focus-within,
#pg-other-income-report .sr-fg > .sr-chip-field:focus-within,
#pg-product-wise-pl .sr-fg > .sr-chip-field:focus-within,
#pg-daily-expenses-report .sr-fg > .sr-chip-field:focus-within,
#pg-inward-payment-report .sr-fg > .sr-chip-field:focus-within,
#pg-purchase-product-report .sr-fg > .sr-chip-field:focus-within,
#pg-sale-product-report .sr-fg > .sr-chip-field:focus-within,
#pg-sale-outstanding .sr-fg > .sr-chip-field:focus-within,
#pg-purchase-outstanding .sr-fg > .sr-chip-field:focus-within,
#pg-purchase-report .pr-fg > .pr-chip-field:focus-within,
#pg-day-wise-pl .sr-fg > .sr-combo-wrap:focus-within,
#pg-sales-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-notifications .sr-fg > .sr-combo-wrap:focus-within,
#pg-gstr3b .sr-fg > .sr-combo-wrap:focus-within,
#pg-gstr2b .sr-fg > .sr-combo-wrap:focus-within,
#pg-gstr1 .sr-fg > .sr-combo-wrap:focus-within,
#pg-customer-wise-pl .sr-fg > .sr-combo-wrap:focus-within,
#pg-bill-pl .sr-fg > .sr-combo-wrap:focus-within,
#pg-daybook .sr-fg > .sr-combo-wrap:focus-within,
#pg-stock-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-manufacture-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-product-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-company-outstanding-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-other-document-product-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-other-document-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-outward-payment-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-other-income-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-product-wise-pl .sr-fg > .sr-combo-wrap:focus-within,
#pg-daily-expenses-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-inward-payment-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-purchase-product-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-sale-product-report .sr-fg > .sr-combo-wrap:focus-within,
#pg-sale-outstanding .sr-fg > .sr-combo-wrap:focus-within,
#pg-purchase-outstanding .sr-fg > .sr-combo-wrap:focus-within,
#pg-purchase-report .pr-fg > .pr-combo-wrap:focus-within{
  border-color:var(--brand,#16a34a);
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
}/* ── 5) Flag checkboxes — nicer alignment and hover affordance ───────── */
#pg-day-wise-pl .sr-flags,
#pg-sales-report .sr-flags,
#pg-notifications .sr-flags,
#pg-gstr3b .sr-flags,
#pg-gstr2b .sr-flags,
#pg-gstr1 .sr-flags,
#pg-customer-wise-pl .sr-flags,
#pg-bill-pl .sr-flags,
#pg-daybook .sr-flags,
#pg-stock-report .sr-flags,
#pg-manufacture-report .sr-flags,
#pg-product-report .sr-flags,
#pg-company-outstanding-report .sr-flags,
#pg-other-document-product-report .sr-flags,
#pg-other-document-report .sr-flags,
#pg-outward-payment-report .sr-flags,
#pg-other-income-report .sr-flags,
#pg-product-wise-pl .sr-flags,
#pg-daily-expenses-report .sr-flags,
#pg-inward-payment-report .sr-flags,
#pg-purchase-product-report .sr-flags,
#pg-sale-product-report .sr-flags,
#pg-sale-outstanding .sr-flags,
#pg-purchase-outstanding .sr-flags,
#pg-purchase-report .pr-flags{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  padding:14px 16px;
  background:var(--brand-bg,#f0fdf4);
  border:1px solid rgba(22,163,74,.18);
  border-radius:10px;
  margin-bottom:16px;
}#pg-day-wise-pl .sr-flags label,
#pg-sales-report .sr-flags label,
#pg-notifications .sr-flags label,
#pg-gstr3b .sr-flags label,
#pg-gstr2b .sr-flags label,
#pg-gstr1 .sr-flags label,
#pg-customer-wise-pl .sr-flags label,
#pg-bill-pl .sr-flags label,
#pg-daybook .sr-flags label,
#pg-stock-report .sr-flags label,
#pg-manufacture-report .sr-flags label,
#pg-product-report .sr-flags label,
#pg-company-outstanding-report .sr-flags label,
#pg-other-document-product-report .sr-flags label,
#pg-other-document-report .sr-flags label,
#pg-outward-payment-report .sr-flags label,
#pg-other-income-report .sr-flags label,
#pg-product-wise-pl .sr-flags label,
#pg-daily-expenses-report .sr-flags label,
#pg-inward-payment-report .sr-flags label,
#pg-purchase-product-report .sr-flags label,
#pg-sale-product-report .sr-flags label,
#pg-sale-outstanding .sr-flags label,
#pg-purchase-outstanding .sr-flags label,
#pg-purchase-report .pr-flags label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text,#0f172a);
  font-weight:500;
  cursor:pointer;
  padding:2px 0;
}#pg-day-wise-pl .sr-flags input[type="checkbox"],
#pg-sales-report .sr-flags input[type="checkbox"],
#pg-notifications .sr-flags input[type="checkbox"],
#pg-gstr3b .sr-flags input[type="checkbox"],
#pg-gstr2b .sr-flags input[type="checkbox"],
#pg-gstr1 .sr-flags input[type="checkbox"],
#pg-customer-wise-pl .sr-flags input[type="checkbox"],
#pg-bill-pl .sr-flags input[type="checkbox"],
#pg-daybook .sr-flags input[type="checkbox"],
#pg-stock-report .sr-flags input[type="checkbox"],
#pg-manufacture-report .sr-flags input[type="checkbox"],
#pg-product-report .sr-flags input[type="checkbox"],
#pg-company-outstanding-report .sr-flags input[type="checkbox"],
#pg-other-document-product-report .sr-flags input[type="checkbox"],
#pg-other-document-report .sr-flags input[type="checkbox"],
#pg-outward-payment-report .sr-flags input[type="checkbox"],
#pg-other-income-report .sr-flags input[type="checkbox"],
#pg-product-wise-pl .sr-flags input[type="checkbox"],
#pg-daily-expenses-report .sr-flags input[type="checkbox"],
#pg-inward-payment-report .sr-flags input[type="checkbox"],
#pg-purchase-product-report .sr-flags input[type="checkbox"],
#pg-sale-product-report .sr-flags input[type="checkbox"],
#pg-sale-outstanding .sr-flags input[type="checkbox"],
#pg-purchase-outstanding .sr-flags input[type="checkbox"],
#pg-purchase-report .pr-flags input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:var(--brand,#16a34a);
  cursor:pointer;
}/* ── 6) Advance Filter & Customize Report — nested block, no coloured
        edge (v3.9.415-c: user asked us to drop the green left rail — it
        was still showing up as a visible "box border color" per their
        screenshot). We keep only a subtle full 1px border and a soft
        brand-tinted background wash so the block still reads as a
        nested sub-panel without any coloured stripe. ─────────────── */
#pg-day-wise-pl .sr-adv-block,
#pg-sales-report .sr-adv-block,
#pg-notifications .sr-adv-block,
#pg-gstr3b .sr-adv-block,
#pg-gstr2b .sr-adv-block,
#pg-gstr1 .sr-adv-block,
#pg-customer-wise-pl .sr-adv-block,
#pg-bill-pl .sr-adv-block,
#pg-daybook .sr-adv-block,
#pg-stock-report .sr-adv-block,
#pg-manufacture-report .sr-adv-block,
#pg-product-report .sr-adv-block,
#pg-company-outstanding-report .sr-adv-block,
#pg-other-document-product-report .sr-adv-block,
#pg-other-document-report .sr-adv-block,
#pg-outward-payment-report .sr-adv-block,
#pg-other-income-report .sr-adv-block,
#pg-product-wise-pl .sr-adv-block,
#pg-daily-expenses-report .sr-adv-block,
#pg-inward-payment-report .sr-adv-block,
#pg-purchase-product-report .sr-adv-block,
#pg-sale-product-report .sr-adv-block,
#pg-sale-outstanding .sr-adv-block,
#pg-purchase-outstanding .sr-adv-block,
#pg-purchase-report .pr-adv-block,
#pg-day-wise-pl .sr-cust-block,
#pg-sales-report .sr-cust-block,
#pg-notifications .sr-cust-block,
#pg-gstr3b .sr-cust-block,
#pg-gstr2b .sr-cust-block,
#pg-gstr1 .sr-cust-block,
#pg-customer-wise-pl .sr-cust-block,
#pg-bill-pl .sr-cust-block,
#pg-daybook .sr-cust-block,
#pg-stock-report .sr-cust-block,
#pg-manufacture-report .sr-cust-block,
#pg-product-report .sr-cust-block,
#pg-company-outstanding-report .sr-cust-block,
#pg-other-document-product-report .sr-cust-block,
#pg-other-document-report .sr-cust-block,
#pg-outward-payment-report .sr-cust-block,
#pg-other-income-report .sr-cust-block,
#pg-product-wise-pl .sr-cust-block,
#pg-daily-expenses-report .sr-cust-block,
#pg-inward-payment-report .sr-cust-block,
#pg-purchase-product-report .sr-cust-block,
#pg-sale-product-report .sr-cust-block,
#pg-sale-outstanding .sr-cust-block,
#pg-purchase-outstanding .sr-cust-block,
#pg-purchase-report .pr-cust-block{
  margin-top:6px;
  margin-bottom:16px;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(22,163,74,.04) 0%, transparent 80%);
  border:1px solid var(--bdr,#e2e8f0);
  border-radius:10px;
  animation:srBlockIn .18s ease-out;
}
@keyframes srBlockIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}#pg-day-wise-pl .sr-adv-lbl,
#pg-sales-report .sr-adv-lbl,
#pg-notifications .sr-adv-lbl,
#pg-gstr3b .sr-adv-lbl,
#pg-gstr2b .sr-adv-lbl,
#pg-gstr1 .sr-adv-lbl,
#pg-customer-wise-pl .sr-adv-lbl,
#pg-bill-pl .sr-adv-lbl,
#pg-daybook .sr-adv-lbl,
#pg-stock-report .sr-adv-lbl,
#pg-manufacture-report .sr-adv-lbl,
#pg-product-report .sr-adv-lbl,
#pg-company-outstanding-report .sr-adv-lbl,
#pg-other-document-product-report .sr-adv-lbl,
#pg-other-document-report .sr-adv-lbl,
#pg-outward-payment-report .sr-adv-lbl,
#pg-other-income-report .sr-adv-lbl,
#pg-product-wise-pl .sr-adv-lbl,
#pg-daily-expenses-report .sr-adv-lbl,
#pg-inward-payment-report .sr-adv-lbl,
#pg-purchase-product-report .sr-adv-lbl,
#pg-sale-product-report .sr-adv-lbl,
#pg-sale-outstanding .sr-adv-lbl,
#pg-purchase-outstanding .sr-adv-lbl,
#pg-purchase-report .pr-adv-lbl,
#pg-day-wise-pl .sr-cust-hdr > label,
#pg-sales-report .sr-cust-hdr > label,
#pg-notifications .sr-cust-hdr > label,
#pg-gstr3b .sr-cust-hdr > label,
#pg-gstr2b .sr-cust-hdr > label,
#pg-gstr1 .sr-cust-hdr > label,
#pg-customer-wise-pl .sr-cust-hdr > label,
#pg-bill-pl .sr-cust-hdr > label,
#pg-daybook .sr-cust-hdr > label,
#pg-stock-report .sr-cust-hdr > label,
#pg-manufacture-report .sr-cust-hdr > label,
#pg-product-report .sr-cust-hdr > label,
#pg-company-outstanding-report .sr-cust-hdr > label,
#pg-other-document-product-report .sr-cust-hdr > label,
#pg-other-document-report .sr-cust-hdr > label,
#pg-outward-payment-report .sr-cust-hdr > label,
#pg-other-income-report .sr-cust-hdr > label,
#pg-product-wise-pl .sr-cust-hdr > label,
#pg-daily-expenses-report .sr-cust-hdr > label,
#pg-inward-payment-report .sr-cust-hdr > label,
#pg-purchase-product-report .sr-cust-hdr > label,
#pg-sale-product-report .sr-cust-hdr > label,
#pg-sale-outstanding .sr-cust-hdr > label,
#pg-purchase-outstanding .sr-cust-hdr > label,
#pg-purchase-report .pr-cust-hdr > label{
  font-size:13px;
  font-weight:700;
  color:var(--text,#0f172a);
  letter-spacing:-.005em;
}#pg-day-wise-pl .sr-cust-hdr,
#pg-sales-report .sr-cust-hdr,
#pg-notifications .sr-cust-hdr,
#pg-gstr3b .sr-cust-hdr,
#pg-gstr2b .sr-cust-hdr,
#pg-gstr1 .sr-cust-hdr,
#pg-customer-wise-pl .sr-cust-hdr,
#pg-bill-pl .sr-cust-hdr,
#pg-daybook .sr-cust-hdr,
#pg-stock-report .sr-cust-hdr,
#pg-manufacture-report .sr-cust-hdr,
#pg-product-report .sr-cust-hdr,
#pg-company-outstanding-report .sr-cust-hdr,
#pg-other-document-product-report .sr-cust-hdr,
#pg-other-document-report .sr-cust-hdr,
#pg-outward-payment-report .sr-cust-hdr,
#pg-other-income-report .sr-cust-hdr,
#pg-product-wise-pl .sr-cust-hdr,
#pg-daily-expenses-report .sr-cust-hdr,
#pg-inward-payment-report .sr-cust-hdr,
#pg-purchase-product-report .sr-cust-hdr,
#pg-sale-product-report .sr-cust-hdr,
#pg-sale-outstanding .sr-cust-hdr,
#pg-purchase-outstanding .sr-cust-hdr,
#pg-purchase-report .pr-cust-hdr{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}/* Select all / Deselect all / Reset — compact ghost buttons */
#pg-day-wise-pl .sr-cust-selall,
#pg-sales-report .sr-cust-selall,
#pg-notifications .sr-cust-selall,
#pg-gstr3b .sr-cust-selall,
#pg-gstr2b .sr-cust-selall,
#pg-gstr1 .sr-cust-selall,
#pg-customer-wise-pl .sr-cust-selall,
#pg-bill-pl .sr-cust-selall,
#pg-daybook .sr-cust-selall,
#pg-stock-report .sr-cust-selall,
#pg-manufacture-report .sr-cust-selall,
#pg-product-report .sr-cust-selall,
#pg-company-outstanding-report .sr-cust-selall,
#pg-other-document-product-report .sr-cust-selall,
#pg-other-document-report .sr-cust-selall,
#pg-outward-payment-report .sr-cust-selall,
#pg-other-income-report .sr-cust-selall,
#pg-product-wise-pl .sr-cust-selall,
#pg-daily-expenses-report .sr-cust-selall,
#pg-inward-payment-report .sr-cust-selall,
#pg-purchase-product-report .sr-cust-selall,
#pg-sale-product-report .sr-cust-selall,
#pg-sale-outstanding .sr-cust-selall,
#pg-purchase-outstanding .sr-cust-selall,
#pg-purchase-report .pr-cust-selall,
#pg-day-wise-pl .sr-cust-desall,
#pg-sales-report .sr-cust-desall,
#pg-notifications .sr-cust-desall,
#pg-gstr3b .sr-cust-desall,
#pg-gstr2b .sr-cust-desall,
#pg-gstr1 .sr-cust-desall,
#pg-customer-wise-pl .sr-cust-desall,
#pg-bill-pl .sr-cust-desall,
#pg-daybook .sr-cust-desall,
#pg-stock-report .sr-cust-desall,
#pg-manufacture-report .sr-cust-desall,
#pg-product-report .sr-cust-desall,
#pg-company-outstanding-report .sr-cust-desall,
#pg-other-document-product-report .sr-cust-desall,
#pg-other-document-report .sr-cust-desall,
#pg-outward-payment-report .sr-cust-desall,
#pg-other-income-report .sr-cust-desall,
#pg-product-wise-pl .sr-cust-desall,
#pg-daily-expenses-report .sr-cust-desall,
#pg-inward-payment-report .sr-cust-desall,
#pg-purchase-product-report .sr-cust-desall,
#pg-sale-product-report .sr-cust-desall,
#pg-sale-outstanding .sr-cust-desall,
#pg-purchase-outstanding .sr-cust-desall,
#pg-purchase-report .pr-cust-desall,
#pg-day-wise-pl .sr-cust-reset,
#pg-sales-report .sr-cust-reset,
#pg-notifications .sr-cust-reset,
#pg-gstr3b .sr-cust-reset,
#pg-gstr2b .sr-cust-reset,
#pg-gstr1 .sr-cust-reset,
#pg-customer-wise-pl .sr-cust-reset,
#pg-bill-pl .sr-cust-reset,
#pg-daybook .sr-cust-reset,
#pg-stock-report .sr-cust-reset,
#pg-manufacture-report .sr-cust-reset,
#pg-product-report .sr-cust-reset,
#pg-company-outstanding-report .sr-cust-reset,
#pg-other-document-product-report .sr-cust-reset,
#pg-other-document-report .sr-cust-reset,
#pg-outward-payment-report .sr-cust-reset,
#pg-other-income-report .sr-cust-reset,
#pg-product-wise-pl .sr-cust-reset,
#pg-daily-expenses-report .sr-cust-reset,
#pg-inward-payment-report .sr-cust-reset,
#pg-purchase-product-report .sr-cust-reset,
#pg-sale-product-report .sr-cust-reset,
#pg-sale-outstanding .sr-cust-reset,
#pg-purchase-outstanding .sr-cust-reset,
#pg-purchase-report .pr-cust-reset{
  padding:6px 12px;
  border:1px solid var(--bdr,#e2e8f0);
  background:var(--surf,#fff);
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  color:var(--text,#0f172a);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
  font-family:inherit;
}#pg-day-wise-pl .sr-cust-selall:hover,
#pg-sales-report .sr-cust-selall:hover,
#pg-notifications .sr-cust-selall:hover,
#pg-gstr3b .sr-cust-selall:hover,
#pg-gstr2b .sr-cust-selall:hover,
#pg-gstr1 .sr-cust-selall:hover,
#pg-customer-wise-pl .sr-cust-selall:hover,
#pg-bill-pl .sr-cust-selall:hover,
#pg-daybook .sr-cust-selall:hover,
#pg-stock-report .sr-cust-selall:hover,
#pg-manufacture-report .sr-cust-selall:hover,
#pg-product-report .sr-cust-selall:hover,
#pg-company-outstanding-report .sr-cust-selall:hover,
#pg-other-document-product-report .sr-cust-selall:hover,
#pg-other-document-report .sr-cust-selall:hover,
#pg-outward-payment-report .sr-cust-selall:hover,
#pg-other-income-report .sr-cust-selall:hover,
#pg-product-wise-pl .sr-cust-selall:hover,
#pg-daily-expenses-report .sr-cust-selall:hover,
#pg-inward-payment-report .sr-cust-selall:hover,
#pg-purchase-product-report .sr-cust-selall:hover,
#pg-sale-product-report .sr-cust-selall:hover,
#pg-sale-outstanding .sr-cust-selall:hover,
#pg-purchase-outstanding .sr-cust-selall:hover,
#pg-purchase-report .pr-cust-selall:hover,
#pg-day-wise-pl .sr-cust-desall:hover,
#pg-sales-report .sr-cust-desall:hover,
#pg-notifications .sr-cust-desall:hover,
#pg-gstr3b .sr-cust-desall:hover,
#pg-gstr2b .sr-cust-desall:hover,
#pg-gstr1 .sr-cust-desall:hover,
#pg-customer-wise-pl .sr-cust-desall:hover,
#pg-bill-pl .sr-cust-desall:hover,
#pg-daybook .sr-cust-desall:hover,
#pg-stock-report .sr-cust-desall:hover,
#pg-manufacture-report .sr-cust-desall:hover,
#pg-product-report .sr-cust-desall:hover,
#pg-company-outstanding-report .sr-cust-desall:hover,
#pg-other-document-product-report .sr-cust-desall:hover,
#pg-other-document-report .sr-cust-desall:hover,
#pg-outward-payment-report .sr-cust-desall:hover,
#pg-other-income-report .sr-cust-desall:hover,
#pg-product-wise-pl .sr-cust-desall:hover,
#pg-daily-expenses-report .sr-cust-desall:hover,
#pg-inward-payment-report .sr-cust-desall:hover,
#pg-purchase-product-report .sr-cust-desall:hover,
#pg-sale-product-report .sr-cust-desall:hover,
#pg-sale-outstanding .sr-cust-desall:hover,
#pg-purchase-outstanding .sr-cust-desall:hover,
#pg-purchase-report .pr-cust-desall:hover,
#pg-day-wise-pl .sr-cust-reset:hover,
#pg-sales-report .sr-cust-reset:hover,
#pg-notifications .sr-cust-reset:hover,
#pg-gstr3b .sr-cust-reset:hover,
#pg-gstr2b .sr-cust-reset:hover,
#pg-gstr1 .sr-cust-reset:hover,
#pg-customer-wise-pl .sr-cust-reset:hover,
#pg-bill-pl .sr-cust-reset:hover,
#pg-daybook .sr-cust-reset:hover,
#pg-stock-report .sr-cust-reset:hover,
#pg-manufacture-report .sr-cust-reset:hover,
#pg-product-report .sr-cust-reset:hover,
#pg-company-outstanding-report .sr-cust-reset:hover,
#pg-other-document-product-report .sr-cust-reset:hover,
#pg-other-document-report .sr-cust-reset:hover,
#pg-outward-payment-report .sr-cust-reset:hover,
#pg-other-income-report .sr-cust-reset:hover,
#pg-product-wise-pl .sr-cust-reset:hover,
#pg-daily-expenses-report .sr-cust-reset:hover,
#pg-inward-payment-report .sr-cust-reset:hover,
#pg-purchase-product-report .sr-cust-reset:hover,
#pg-sale-product-report .sr-cust-reset:hover,
#pg-sale-outstanding .sr-cust-reset:hover,
#pg-purchase-outstanding .sr-cust-reset:hover,
#pg-purchase-report .pr-cust-reset:hover{
  background:var(--brand-bg,#f0fdf4);
  border-color:var(--brand,#16a34a);
  color:var(--brand-dd,#15803d);
}/* Advance-filter row — inputs align nicely and the "+" is a brand FAB */
#pg-day-wise-pl .sr-adv-row,
#pg-sales-report .sr-adv-row,
#pg-notifications .sr-adv-row,
#pg-gstr3b .sr-adv-row,
#pg-gstr2b .sr-adv-row,
#pg-gstr1 .sr-adv-row,
#pg-customer-wise-pl .sr-adv-row,
#pg-bill-pl .sr-adv-row,
#pg-daybook .sr-adv-row,
#pg-stock-report .sr-adv-row,
#pg-manufacture-report .sr-adv-row,
#pg-product-report .sr-adv-row,
#pg-company-outstanding-report .sr-adv-row,
#pg-other-document-product-report .sr-adv-row,
#pg-other-document-report .sr-adv-row,
#pg-outward-payment-report .sr-adv-row,
#pg-other-income-report .sr-adv-row,
#pg-product-wise-pl .sr-adv-row,
#pg-daily-expenses-report .sr-adv-row,
#pg-inward-payment-report .sr-adv-row,
#pg-purchase-product-report .sr-adv-row,
#pg-sale-product-report .sr-adv-row,
#pg-sale-outstanding .sr-adv-row,
#pg-purchase-outstanding .sr-adv-row,
#pg-purchase-report .pr-adv-row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr 42px;
  gap:10px;
  align-items:stretch;
}#pg-day-wise-pl .sr-adv-row select,
#pg-sales-report .sr-adv-row select,
#pg-notifications .sr-adv-row select,
#pg-gstr3b .sr-adv-row select,
#pg-gstr2b .sr-adv-row select,
#pg-gstr1 .sr-adv-row select,
#pg-customer-wise-pl .sr-adv-row select,
#pg-bill-pl .sr-adv-row select,
#pg-daybook .sr-adv-row select,
#pg-stock-report .sr-adv-row select,
#pg-manufacture-report .sr-adv-row select,
#pg-product-report .sr-adv-row select,
#pg-company-outstanding-report .sr-adv-row select,
#pg-other-document-product-report .sr-adv-row select,
#pg-other-document-report .sr-adv-row select,
#pg-outward-payment-report .sr-adv-row select,
#pg-other-income-report .sr-adv-row select,
#pg-product-wise-pl .sr-adv-row select,
#pg-daily-expenses-report .sr-adv-row select,
#pg-inward-payment-report .sr-adv-row select,
#pg-purchase-product-report .sr-adv-row select,
#pg-sale-product-report .sr-adv-row select,
#pg-sale-outstanding .sr-adv-row select,
#pg-purchase-outstanding .sr-adv-row select,
#pg-purchase-report .pr-adv-row select,
#pg-day-wise-pl .sr-adv-row input,
#pg-sales-report .sr-adv-row input,
#pg-notifications .sr-adv-row input,
#pg-gstr3b .sr-adv-row input,
#pg-gstr2b .sr-adv-row input,
#pg-gstr1 .sr-adv-row input,
#pg-customer-wise-pl .sr-adv-row input,
#pg-bill-pl .sr-adv-row input,
#pg-daybook .sr-adv-row input,
#pg-stock-report .sr-adv-row input,
#pg-manufacture-report .sr-adv-row input,
#pg-product-report .sr-adv-row input,
#pg-company-outstanding-report .sr-adv-row input,
#pg-other-document-product-report .sr-adv-row input,
#pg-other-document-report .sr-adv-row input,
#pg-outward-payment-report .sr-adv-row input,
#pg-other-income-report .sr-adv-row input,
#pg-product-wise-pl .sr-adv-row input,
#pg-daily-expenses-report .sr-adv-row input,
#pg-inward-payment-report .sr-adv-row input,
#pg-purchase-product-report .sr-adv-row input,
#pg-sale-product-report .sr-adv-row input,
#pg-sale-outstanding .sr-adv-row input,
#pg-purchase-outstanding .sr-adv-row input,
#pg-purchase-report .pr-adv-row input{
  padding:10px 12px;
  border:1px solid var(--bdr,#e2e8f0);
  border-radius:8px;
  font-size:13px;
  background:var(--surf,#fff);
  color:var(--text,#0f172a);
  font-family:inherit;
  transition:border-color .12s, box-shadow .12s;
}#pg-day-wise-pl .sr-adv-row select:focus,
#pg-sales-report .sr-adv-row select:focus,
#pg-notifications .sr-adv-row select:focus,
#pg-gstr3b .sr-adv-row select:focus,
#pg-gstr2b .sr-adv-row select:focus,
#pg-gstr1 .sr-adv-row select:focus,
#pg-customer-wise-pl .sr-adv-row select:focus,
#pg-bill-pl .sr-adv-row select:focus,
#pg-daybook .sr-adv-row select:focus,
#pg-stock-report .sr-adv-row select:focus,
#pg-manufacture-report .sr-adv-row select:focus,
#pg-product-report .sr-adv-row select:focus,
#pg-company-outstanding-report .sr-adv-row select:focus,
#pg-other-document-product-report .sr-adv-row select:focus,
#pg-other-document-report .sr-adv-row select:focus,
#pg-outward-payment-report .sr-adv-row select:focus,
#pg-other-income-report .sr-adv-row select:focus,
#pg-product-wise-pl .sr-adv-row select:focus,
#pg-daily-expenses-report .sr-adv-row select:focus,
#pg-inward-payment-report .sr-adv-row select:focus,
#pg-purchase-product-report .sr-adv-row select:focus,
#pg-sale-product-report .sr-adv-row select:focus,
#pg-sale-outstanding .sr-adv-row select:focus,
#pg-purchase-outstanding .sr-adv-row select:focus,
#pg-purchase-report .pr-adv-row select:focus,
#pg-day-wise-pl .sr-adv-row input:focus,
#pg-sales-report .sr-adv-row input:focus,
#pg-notifications .sr-adv-row input:focus,
#pg-gstr3b .sr-adv-row input:focus,
#pg-gstr2b .sr-adv-row input:focus,
#pg-gstr1 .sr-adv-row input:focus,
#pg-customer-wise-pl .sr-adv-row input:focus,
#pg-bill-pl .sr-adv-row input:focus,
#pg-daybook .sr-adv-row input:focus,
#pg-stock-report .sr-adv-row input:focus,
#pg-manufacture-report .sr-adv-row input:focus,
#pg-product-report .sr-adv-row input:focus,
#pg-company-outstanding-report .sr-adv-row input:focus,
#pg-other-document-product-report .sr-adv-row input:focus,
#pg-other-document-report .sr-adv-row input:focus,
#pg-outward-payment-report .sr-adv-row input:focus,
#pg-other-income-report .sr-adv-row input:focus,
#pg-product-wise-pl .sr-adv-row input:focus,
#pg-daily-expenses-report .sr-adv-row input:focus,
#pg-inward-payment-report .sr-adv-row input:focus,
#pg-purchase-product-report .sr-adv-row input:focus,
#pg-sale-product-report .sr-adv-row input:focus,
#pg-sale-outstanding .sr-adv-row input:focus,
#pg-purchase-outstanding .sr-adv-row input:focus,
#pg-purchase-report .pr-adv-row input:focus{
  outline:none;
  border-color:var(--brand,#16a34a);
  box-shadow:0 0 0 3px rgba(22,163,74,.14);
}#pg-day-wise-pl .sr-adv-add,
#pg-sales-report .sr-adv-add,
#pg-notifications .sr-adv-add,
#pg-gstr3b .sr-adv-add,
#pg-gstr2b .sr-adv-add,
#pg-gstr1 .sr-adv-add,
#pg-customer-wise-pl .sr-adv-add,
#pg-bill-pl .sr-adv-add,
#pg-daybook .sr-adv-add,
#pg-stock-report .sr-adv-add,
#pg-manufacture-report .sr-adv-add,
#pg-product-report .sr-adv-add,
#pg-company-outstanding-report .sr-adv-add,
#pg-other-document-product-report .sr-adv-add,
#pg-other-document-report .sr-adv-add,
#pg-outward-payment-report .sr-adv-add,
#pg-other-income-report .sr-adv-add,
#pg-product-wise-pl .sr-adv-add,
#pg-daily-expenses-report .sr-adv-add,
#pg-inward-payment-report .sr-adv-add,
#pg-purchase-product-report .sr-adv-add,
#pg-sale-product-report .sr-adv-add,
#pg-sale-outstanding .sr-adv-add,
#pg-purchase-outstanding .sr-adv-add,
#pg-purchase-report .pr-adv-add{
  background:var(--brand,#16a34a);
  border:none;
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  transition:background .12s, transform .12s, box-shadow .12s;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(22,163,74,.22);
}#pg-day-wise-pl .sr-adv-add:hover,
#pg-sales-report .sr-adv-add:hover,
#pg-notifications .sr-adv-add:hover,
#pg-gstr3b .sr-adv-add:hover,
#pg-gstr2b .sr-adv-add:hover,
#pg-gstr1 .sr-adv-add:hover,
#pg-customer-wise-pl .sr-adv-add:hover,
#pg-bill-pl .sr-adv-add:hover,
#pg-daybook .sr-adv-add:hover,
#pg-stock-report .sr-adv-add:hover,
#pg-manufacture-report .sr-adv-add:hover,
#pg-product-report .sr-adv-add:hover,
#pg-company-outstanding-report .sr-adv-add:hover,
#pg-other-document-product-report .sr-adv-add:hover,
#pg-other-document-report .sr-adv-add:hover,
#pg-outward-payment-report .sr-adv-add:hover,
#pg-other-income-report .sr-adv-add:hover,
#pg-product-wise-pl .sr-adv-add:hover,
#pg-daily-expenses-report .sr-adv-add:hover,
#pg-inward-payment-report .sr-adv-add:hover,
#pg-purchase-product-report .sr-adv-add:hover,
#pg-sale-product-report .sr-adv-add:hover,
#pg-sale-outstanding .sr-adv-add:hover,
#pg-purchase-outstanding .sr-adv-add:hover,
#pg-purchase-report .pr-adv-add:hover{
  background:var(--brand-dd,#15803d);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(22,163,74,.28);
}/* ── 7) Actions row — Search stands out as primary CTA ───────────────── */
#pg-day-wise-pl .sr-actions,
#pg-sales-report .sr-actions,
#pg-notifications .sr-actions,
#pg-gstr3b .sr-actions,
#pg-gstr2b .sr-actions,
#pg-gstr1 .sr-actions,
#pg-customer-wise-pl .sr-actions,
#pg-bill-pl .sr-actions,
#pg-daybook .sr-actions,
#pg-stock-report .sr-actions,
#pg-manufacture-report .sr-actions,
#pg-product-report .sr-actions,
#pg-company-outstanding-report .sr-actions,
#pg-other-document-product-report .sr-actions,
#pg-other-document-report .sr-actions,
#pg-outward-payment-report .sr-actions,
#pg-other-income-report .sr-actions,
#pg-product-wise-pl .sr-actions,
#pg-daily-expenses-report .sr-actions,
#pg-inward-payment-report .sr-actions,
#pg-purchase-product-report .sr-actions,
#pg-sale-product-report .sr-actions,
#pg-sale-outstanding .sr-actions,
#pg-purchase-outstanding .sr-actions,
#pg-purchase-report .pr-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--bdr,#e5e7eb);
  margin-top:6px;
}#pg-day-wise-pl .sr-btn,
#pg-sales-report .sr-btn,
#pg-notifications .sr-btn,
#pg-gstr3b .sr-btn,
#pg-gstr2b .sr-btn,
#pg-gstr1 .sr-btn,
#pg-customer-wise-pl .sr-btn,
#pg-bill-pl .sr-btn,
#pg-daybook .sr-btn,
#pg-stock-report .sr-btn,
#pg-manufacture-report .sr-btn,
#pg-product-report .sr-btn,
#pg-company-outstanding-report .sr-btn,
#pg-other-document-product-report .sr-btn,
#pg-other-document-report .sr-btn,
#pg-outward-payment-report .sr-btn,
#pg-other-income-report .sr-btn,
#pg-product-wise-pl .sr-btn,
#pg-daily-expenses-report .sr-btn,
#pg-inward-payment-report .sr-btn,
#pg-purchase-product-report .sr-btn,
#pg-sale-product-report .sr-btn,
#pg-sale-outstanding .sr-btn,
#pg-purchase-outstanding .sr-btn,
#pg-purchase-report .pr-btn{
  padding:10px 22px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s;
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit;
  line-height:1.2;
}#pg-day-wise-pl .sr-btn-reset,
#pg-sales-report .sr-btn-reset,
#pg-notifications .sr-btn-reset,
#pg-gstr3b .sr-btn-reset,
#pg-gstr2b .sr-btn-reset,
#pg-gstr1 .sr-btn-reset,
#pg-customer-wise-pl .sr-btn-reset,
#pg-bill-pl .sr-btn-reset,
#pg-daybook .sr-btn-reset,
#pg-stock-report .sr-btn-reset,
#pg-manufacture-report .sr-btn-reset,
#pg-product-report .sr-btn-reset,
#pg-company-outstanding-report .sr-btn-reset,
#pg-other-document-product-report .sr-btn-reset,
#pg-other-document-report .sr-btn-reset,
#pg-outward-payment-report .sr-btn-reset,
#pg-other-income-report .sr-btn-reset,
#pg-product-wise-pl .sr-btn-reset,
#pg-daily-expenses-report .sr-btn-reset,
#pg-inward-payment-report .sr-btn-reset,
#pg-purchase-product-report .sr-btn-reset,
#pg-sale-product-report .sr-btn-reset,
#pg-sale-outstanding .sr-btn-reset,
#pg-purchase-outstanding .sr-btn-reset,
#pg-purchase-report .pr-btn-reset{
  background:var(--surf,#fff);
  color:var(--text,#0f172a);
  border:1px solid var(--bdr,#e2e8f0);
}#pg-day-wise-pl .sr-btn-reset:hover,
#pg-sales-report .sr-btn-reset:hover,
#pg-notifications .sr-btn-reset:hover,
#pg-gstr3b .sr-btn-reset:hover,
#pg-gstr2b .sr-btn-reset:hover,
#pg-gstr1 .sr-btn-reset:hover,
#pg-customer-wise-pl .sr-btn-reset:hover,
#pg-bill-pl .sr-btn-reset:hover,
#pg-daybook .sr-btn-reset:hover,
#pg-stock-report .sr-btn-reset:hover,
#pg-manufacture-report .sr-btn-reset:hover,
#pg-product-report .sr-btn-reset:hover,
#pg-company-outstanding-report .sr-btn-reset:hover,
#pg-other-document-product-report .sr-btn-reset:hover,
#pg-other-document-report .sr-btn-reset:hover,
#pg-outward-payment-report .sr-btn-reset:hover,
#pg-other-income-report .sr-btn-reset:hover,
#pg-product-wise-pl .sr-btn-reset:hover,
#pg-daily-expenses-report .sr-btn-reset:hover,
#pg-inward-payment-report .sr-btn-reset:hover,
#pg-purchase-product-report .sr-btn-reset:hover,
#pg-sale-product-report .sr-btn-reset:hover,
#pg-sale-outstanding .sr-btn-reset:hover,
#pg-purchase-outstanding .sr-btn-reset:hover,
#pg-purchase-report .pr-btn-reset:hover{
  background:var(--surf2,#f8fafc);
  border-color:var(--muted,#94a3b8);
}#pg-day-wise-pl .sr-btn-search,
#pg-sales-report .sr-btn-search,
#pg-notifications .sr-btn-search,
#pg-gstr3b .sr-btn-search,
#pg-gstr2b .sr-btn-search,
#pg-gstr1 .sr-btn-search,
#pg-customer-wise-pl .sr-btn-search,
#pg-bill-pl .sr-btn-search,
#pg-daybook .sr-btn-search,
#pg-stock-report .sr-btn-search,
#pg-manufacture-report .sr-btn-search,
#pg-product-report .sr-btn-search,
#pg-company-outstanding-report .sr-btn-search,
#pg-other-document-product-report .sr-btn-search,
#pg-other-document-report .sr-btn-search,
#pg-outward-payment-report .sr-btn-search,
#pg-other-income-report .sr-btn-search,
#pg-product-wise-pl .sr-btn-search,
#pg-daily-expenses-report .sr-btn-search,
#pg-inward-payment-report .sr-btn-search,
#pg-purchase-product-report .sr-btn-search,
#pg-sale-product-report .sr-btn-search,
#pg-sale-outstanding .sr-btn-search,
#pg-purchase-outstanding .sr-btn-search,
#pg-purchase-report .pr-btn-search{
  background:var(--brand,#16a34a);
  color:#fff;
  border:1px solid var(--brand,#16a34a);
  padding:10px 26px;
  box-shadow:0 4px 12px rgba(22,163,74,.24);
}#pg-day-wise-pl .sr-btn-search:hover,
#pg-sales-report .sr-btn-search:hover,
#pg-notifications .sr-btn-search:hover,
#pg-gstr3b .sr-btn-search:hover,
#pg-gstr2b .sr-btn-search:hover,
#pg-gstr1 .sr-btn-search:hover,
#pg-customer-wise-pl .sr-btn-search:hover,
#pg-bill-pl .sr-btn-search:hover,
#pg-daybook .sr-btn-search:hover,
#pg-stock-report .sr-btn-search:hover,
#pg-manufacture-report .sr-btn-search:hover,
#pg-product-report .sr-btn-search:hover,
#pg-company-outstanding-report .sr-btn-search:hover,
#pg-other-document-product-report .sr-btn-search:hover,
#pg-other-document-report .sr-btn-search:hover,
#pg-outward-payment-report .sr-btn-search:hover,
#pg-other-income-report .sr-btn-search:hover,
#pg-product-wise-pl .sr-btn-search:hover,
#pg-daily-expenses-report .sr-btn-search:hover,
#pg-inward-payment-report .sr-btn-search:hover,
#pg-purchase-product-report .sr-btn-search:hover,
#pg-sale-product-report .sr-btn-search:hover,
#pg-sale-outstanding .sr-btn-search:hover,
#pg-purchase-outstanding .sr-btn-search:hover,
#pg-purchase-report .pr-btn-search:hover{
  background:var(--brand-dd,#15803d);
  border-color:var(--brand-dd,#15803d);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(22,163,74,.30);
}/* Save-Customization button — appears only when column selection changed;
   styled as a subtle secondary action so it doesn't compete with Search. */
#pg-day-wise-pl .sr-save-cust,
#pg-sales-report .sr-save-cust,
#pg-notifications .sr-save-cust,
#pg-gstr3b .sr-save-cust,
#pg-gstr2b .sr-save-cust,
#pg-gstr1 .sr-save-cust,
#pg-customer-wise-pl .sr-save-cust,
#pg-bill-pl .sr-save-cust,
#pg-daybook .sr-save-cust,
#pg-stock-report .sr-save-cust,
#pg-manufacture-report .sr-save-cust,
#pg-product-report .sr-save-cust,
#pg-company-outstanding-report .sr-save-cust,
#pg-other-document-product-report .sr-save-cust,
#pg-other-document-report .sr-save-cust,
#pg-outward-payment-report .sr-save-cust,
#pg-other-income-report .sr-save-cust,
#pg-product-wise-pl .sr-save-cust,
#pg-daily-expenses-report .sr-save-cust,
#pg-inward-payment-report .sr-save-cust,
#pg-purchase-product-report .sr-save-cust,
#pg-sale-product-report .sr-save-cust,
#pg-sale-outstanding .sr-save-cust,
#pg-purchase-outstanding .sr-save-cust,
#pg-purchase-report .pr-save-cust{
  padding:9px 16px;
  border-radius:8px;
  background:var(--surf,#fff);
  border:1px dashed var(--brand,#16a34a);
  color:var(--brand-dd,#15803d);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit;
  transition:background .12s, border-style .12s;
  margin-right:auto;                    /* push everything else to the right */
}#pg-day-wise-pl .sr-save-cust:hover,
#pg-sales-report .sr-save-cust:hover,
#pg-notifications .sr-save-cust:hover,
#pg-gstr3b .sr-save-cust:hover,
#pg-gstr2b .sr-save-cust:hover,
#pg-gstr1 .sr-save-cust:hover,
#pg-customer-wise-pl .sr-save-cust:hover,
#pg-bill-pl .sr-save-cust:hover,
#pg-daybook .sr-save-cust:hover,
#pg-stock-report .sr-save-cust:hover,
#pg-manufacture-report .sr-save-cust:hover,
#pg-product-report .sr-save-cust:hover,
#pg-company-outstanding-report .sr-save-cust:hover,
#pg-other-document-product-report .sr-save-cust:hover,
#pg-other-document-report .sr-save-cust:hover,
#pg-outward-payment-report .sr-save-cust:hover,
#pg-other-income-report .sr-save-cust:hover,
#pg-product-wise-pl .sr-save-cust:hover,
#pg-daily-expenses-report .sr-save-cust:hover,
#pg-inward-payment-report .sr-save-cust:hover,
#pg-purchase-product-report .sr-save-cust:hover,
#pg-sale-product-report .sr-save-cust:hover,
#pg-sale-outstanding .sr-save-cust:hover,
#pg-purchase-outstanding .sr-save-cust:hover,
#pg-purchase-report .pr-save-cust:hover{
  background:var(--brand-bg,#f0fdf4);
  border-style:solid;
}/* ── 8) Mobile-only duplicate button row — match new pill styling ────── */
#pg-day-wise-pl .sr-mobile-btn,
#pg-sales-report .sr-mobile-btn,
#pg-notifications .sr-mobile-btn,
#pg-gstr3b .sr-mobile-btn,
#pg-gstr2b .sr-mobile-btn,
#pg-gstr1 .sr-mobile-btn,
#pg-customer-wise-pl .sr-mobile-btn,
#pg-bill-pl .sr-mobile-btn,
#pg-daybook .sr-mobile-btn,
#pg-stock-report .sr-mobile-btn,
#pg-manufacture-report .sr-mobile-btn,
#pg-product-report .sr-mobile-btn,
#pg-company-outstanding-report .sr-mobile-btn,
#pg-other-document-product-report .sr-mobile-btn,
#pg-other-document-report .sr-mobile-btn,
#pg-outward-payment-report .sr-mobile-btn,
#pg-other-income-report .sr-mobile-btn,
#pg-product-wise-pl .sr-mobile-btn,
#pg-daily-expenses-report .sr-mobile-btn,
#pg-inward-payment-report .sr-mobile-btn,
#pg-purchase-product-report .sr-mobile-btn,
#pg-sale-product-report .sr-mobile-btn,
#pg-sale-outstanding .sr-mobile-btn,
#pg-purchase-outstanding .sr-mobile-btn,
#pg-purchase-report .pr-mobile-btn{
  border-radius:999px;
  font-weight:600;
}/* ── 9) Results section — cleaner business header + polished table ───── */
#pg-day-wise-pl .sr-results,
#pg-sales-report .sr-results,
#pg-notifications .sr-results,
#pg-gstr3b .sr-results,
#pg-gstr2b .sr-results,
#pg-gstr1 .sr-results,
#pg-customer-wise-pl .sr-results,
#pg-bill-pl .sr-results,
#pg-daybook .sr-results,
#pg-stock-report .sr-results,
#pg-manufacture-report .sr-results,
#pg-product-report .sr-results,
#pg-company-outstanding-report .sr-results,
#pg-other-document-product-report .sr-results,
#pg-other-document-report .sr-results,
#pg-outward-payment-report .sr-results,
#pg-other-income-report .sr-results,
#pg-product-wise-pl .sr-results,
#pg-daily-expenses-report .sr-results,
#pg-inward-payment-report .sr-results,
#pg-purchase-product-report .sr-results,
#pg-sale-product-report .sr-results,
#pg-sale-outstanding .sr-results,
#pg-purchase-outstanding .sr-results,
#pg-purchase-report .pr-results{
  background:var(--surf,#fff);
  border:1px solid var(--bdr,#e5e7eb);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  padding:24px 22px 18px;
  margin-bottom:22px;
}#pg-day-wise-pl .sr-biz-hdr,
#pg-sales-report .sr-biz-hdr,
#pg-notifications .sr-biz-hdr,
#pg-gstr3b .sr-biz-hdr,
#pg-gstr2b .sr-biz-hdr,
#pg-gstr1 .sr-biz-hdr,
#pg-customer-wise-pl .sr-biz-hdr,
#pg-bill-pl .sr-biz-hdr,
#pg-daybook .sr-biz-hdr,
#pg-stock-report .sr-biz-hdr,
#pg-manufacture-report .sr-biz-hdr,
#pg-product-report .sr-biz-hdr,
#pg-company-outstanding-report .sr-biz-hdr,
#pg-other-document-product-report .sr-biz-hdr,
#pg-other-document-report .sr-biz-hdr,
#pg-outward-payment-report .sr-biz-hdr,
#pg-other-income-report .sr-biz-hdr,
#pg-product-wise-pl .sr-biz-hdr,
#pg-daily-expenses-report .sr-biz-hdr,
#pg-inward-payment-report .sr-biz-hdr,
#pg-purchase-product-report .sr-biz-hdr,
#pg-sale-product-report .sr-biz-hdr,
#pg-sale-outstanding .sr-biz-hdr,
#pg-purchase-outstanding .sr-biz-hdr,
#pg-purchase-report .pr-biz-hdr{
  text-align:center;
  padding-bottom:16px;
  border-bottom:2px solid var(--bdr,#e5e7eb);
  margin-bottom:16px;
}#pg-day-wise-pl .sr-biz-name,
#pg-sales-report .sr-biz-name,
#pg-notifications .sr-biz-name,
#pg-gstr3b .sr-biz-name,
#pg-gstr2b .sr-biz-name,
#pg-gstr1 .sr-biz-name,
#pg-customer-wise-pl .sr-biz-name,
#pg-bill-pl .sr-biz-name,
#pg-daybook .sr-biz-name,
#pg-stock-report .sr-biz-name,
#pg-manufacture-report .sr-biz-name,
#pg-product-report .sr-biz-name,
#pg-company-outstanding-report .sr-biz-name,
#pg-other-document-product-report .sr-biz-name,
#pg-other-document-report .sr-biz-name,
#pg-outward-payment-report .sr-biz-name,
#pg-other-income-report .sr-biz-name,
#pg-product-wise-pl .sr-biz-name,
#pg-daily-expenses-report .sr-biz-name,
#pg-inward-payment-report .sr-biz-name,
#pg-purchase-product-report .sr-biz-name,
#pg-sale-product-report .sr-biz-name,
#pg-sale-outstanding .sr-biz-name,
#pg-purchase-outstanding .sr-biz-name,
#pg-purchase-report .pr-biz-name{
  font-size:20px;
  font-weight:800;
  color:var(--text,#0f172a);
  letter-spacing:-0.02em;
  margin-bottom:2px;
}#pg-day-wise-pl .sr-biz-addr,
#pg-sales-report .sr-biz-addr,
#pg-notifications .sr-biz-addr,
#pg-gstr3b .sr-biz-addr,
#pg-gstr2b .sr-biz-addr,
#pg-gstr1 .sr-biz-addr,
#pg-customer-wise-pl .sr-biz-addr,
#pg-bill-pl .sr-biz-addr,
#pg-daybook .sr-biz-addr,
#pg-stock-report .sr-biz-addr,
#pg-manufacture-report .sr-biz-addr,
#pg-product-report .sr-biz-addr,
#pg-company-outstanding-report .sr-biz-addr,
#pg-other-document-product-report .sr-biz-addr,
#pg-other-document-report .sr-biz-addr,
#pg-outward-payment-report .sr-biz-addr,
#pg-other-income-report .sr-biz-addr,
#pg-product-wise-pl .sr-biz-addr,
#pg-daily-expenses-report .sr-biz-addr,
#pg-inward-payment-report .sr-biz-addr,
#pg-purchase-product-report .sr-biz-addr,
#pg-sale-product-report .sr-biz-addr,
#pg-sale-outstanding .sr-biz-addr,
#pg-purchase-outstanding .sr-biz-addr,
#pg-purchase-report .pr-biz-addr{
  font-size:12.5px;
  color:var(--muted,#64748b);
  line-height:1.5;
}#pg-day-wise-pl .sr-report-title,
#pg-sales-report .sr-report-title,
#pg-notifications .sr-report-title,
#pg-gstr3b .sr-report-title,
#pg-gstr2b .sr-report-title,
#pg-gstr1 .sr-report-title,
#pg-customer-wise-pl .sr-report-title,
#pg-bill-pl .sr-report-title,
#pg-daybook .sr-report-title,
#pg-stock-report .sr-report-title,
#pg-manufacture-report .sr-report-title,
#pg-product-report .sr-report-title,
#pg-company-outstanding-report .sr-report-title,
#pg-other-document-product-report .sr-report-title,
#pg-other-document-report .sr-report-title,
#pg-outward-payment-report .sr-report-title,
#pg-other-income-report .sr-report-title,
#pg-product-wise-pl .sr-report-title,
#pg-daily-expenses-report .sr-report-title,
#pg-inward-payment-report .sr-report-title,
#pg-purchase-product-report .sr-report-title,
#pg-sale-product-report .sr-report-title,
#pg-sale-outstanding .sr-report-title,
#pg-purchase-outstanding .sr-report-title,
#pg-purchase-report .pr-report-title{
  font-size:15px;
  font-weight:700;
  color:var(--brand-dd,#15803d);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:6px;
}#pg-day-wise-pl .sr-report-sub,
#pg-sales-report .sr-report-sub,
#pg-notifications .sr-report-sub,
#pg-gstr3b .sr-report-sub,
#pg-gstr2b .sr-report-sub,
#pg-gstr1 .sr-report-sub,
#pg-customer-wise-pl .sr-report-sub,
#pg-bill-pl .sr-report-sub,
#pg-daybook .sr-report-sub,
#pg-stock-report .sr-report-sub,
#pg-manufacture-report .sr-report-sub,
#pg-product-report .sr-report-sub,
#pg-company-outstanding-report .sr-report-sub,
#pg-other-document-product-report .sr-report-sub,
#pg-other-document-report .sr-report-sub,
#pg-outward-payment-report .sr-report-sub,
#pg-other-income-report .sr-report-sub,
#pg-product-wise-pl .sr-report-sub,
#pg-daily-expenses-report .sr-report-sub,
#pg-inward-payment-report .sr-report-sub,
#pg-purchase-product-report .sr-report-sub,
#pg-sale-product-report .sr-report-sub,
#pg-sale-outstanding .sr-report-sub,
#pg-purchase-outstanding .sr-report-sub,
#pg-purchase-report .pr-report-sub,
#pg-day-wise-pl .sr-report-daterange,
#pg-sales-report .sr-report-daterange,
#pg-notifications .sr-report-daterange,
#pg-gstr3b .sr-report-daterange,
#pg-gstr2b .sr-report-daterange,
#pg-gstr1 .sr-report-daterange,
#pg-customer-wise-pl .sr-report-daterange,
#pg-bill-pl .sr-report-daterange,
#pg-daybook .sr-report-daterange,
#pg-stock-report .sr-report-daterange,
#pg-manufacture-report .sr-report-daterange,
#pg-product-report .sr-report-daterange,
#pg-company-outstanding-report .sr-report-daterange,
#pg-other-document-product-report .sr-report-daterange,
#pg-other-document-report .sr-report-daterange,
#pg-outward-payment-report .sr-report-daterange,
#pg-other-income-report .sr-report-daterange,
#pg-product-wise-pl .sr-report-daterange,
#pg-daily-expenses-report .sr-report-daterange,
#pg-inward-payment-report .sr-report-daterange,
#pg-purchase-product-report .sr-report-daterange,
#pg-sale-product-report .sr-report-daterange,
#pg-sale-outstanding .sr-report-daterange,
#pg-purchase-outstanding .sr-report-daterange,
#pg-purchase-report .pr-report-daterange{
  font-size:12px;
  color:var(--muted,#64748b);
  margin-top:2px;
}/* Table: sticky header + zebra rows + right-aligned numeric columns */
#pg-day-wise-pl .sr-tbl-wrap,
#pg-sales-report .sr-tbl-wrap,
#pg-notifications .sr-tbl-wrap,
#pg-gstr3b .sr-tbl-wrap,
#pg-gstr2b .sr-tbl-wrap,
#pg-gstr1 .sr-tbl-wrap,
#pg-customer-wise-pl .sr-tbl-wrap,
#pg-bill-pl .sr-tbl-wrap,
#pg-daybook .sr-tbl-wrap,
#pg-stock-report .sr-tbl-wrap,
#pg-manufacture-report .sr-tbl-wrap,
#pg-product-report .sr-tbl-wrap,
#pg-company-outstanding-report .sr-tbl-wrap,
#pg-other-document-product-report .sr-tbl-wrap,
#pg-other-document-report .sr-tbl-wrap,
#pg-outward-payment-report .sr-tbl-wrap,
#pg-other-income-report .sr-tbl-wrap,
#pg-product-wise-pl .sr-tbl-wrap,
#pg-daily-expenses-report .sr-tbl-wrap,
#pg-inward-payment-report .sr-tbl-wrap,
#pg-purchase-product-report .sr-tbl-wrap,
#pg-sale-product-report .sr-tbl-wrap,
#pg-sale-outstanding .sr-tbl-wrap,
#pg-purchase-outstanding .sr-tbl-wrap,
#pg-purchase-report .pr-tbl-wrap{
  border:1px solid var(--bdr,#e5e7eb);
  border-radius:10px;
  overflow:auto;
  max-height:calc(100vh - 340px);
  min-height:200px;
}#pg-day-wise-pl .sr-tbl,
#pg-sales-report .sr-tbl,
#pg-notifications .sr-tbl,
#pg-gstr3b .sr-tbl,
#pg-gstr2b .sr-tbl,
#pg-gstr1 .sr-tbl,
#pg-customer-wise-pl .sr-tbl,
#pg-bill-pl .sr-tbl,
#pg-daybook .sr-tbl,
#pg-stock-report .sr-tbl,
#pg-manufacture-report .sr-tbl,
#pg-product-report .sr-tbl,
#pg-company-outstanding-report .sr-tbl,
#pg-other-document-product-report .sr-tbl,
#pg-other-document-report .sr-tbl,
#pg-outward-payment-report .sr-tbl,
#pg-other-income-report .sr-tbl,
#pg-product-wise-pl .sr-tbl,
#pg-daily-expenses-report .sr-tbl,
#pg-inward-payment-report .sr-tbl,
#pg-purchase-product-report .sr-tbl,
#pg-sale-product-report .sr-tbl,
#pg-sale-outstanding .sr-tbl,
#pg-purchase-outstanding .sr-tbl,
#pg-purchase-report .pr-tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}#pg-day-wise-pl .sr-tbl thead th,
#pg-sales-report .sr-tbl thead th,
#pg-notifications .sr-tbl thead th,
#pg-gstr3b .sr-tbl thead th,
#pg-gstr2b .sr-tbl thead th,
#pg-gstr1 .sr-tbl thead th,
#pg-customer-wise-pl .sr-tbl thead th,
#pg-bill-pl .sr-tbl thead th,
#pg-daybook .sr-tbl thead th,
#pg-stock-report .sr-tbl thead th,
#pg-manufacture-report .sr-tbl thead th,
#pg-product-report .sr-tbl thead th,
#pg-company-outstanding-report .sr-tbl thead th,
#pg-other-document-product-report .sr-tbl thead th,
#pg-other-document-report .sr-tbl thead th,
#pg-outward-payment-report .sr-tbl thead th,
#pg-other-income-report .sr-tbl thead th,
#pg-product-wise-pl .sr-tbl thead th,
#pg-daily-expenses-report .sr-tbl thead th,
#pg-inward-payment-report .sr-tbl thead th,
#pg-purchase-product-report .sr-tbl thead th,
#pg-sale-product-report .sr-tbl thead th,
#pg-sale-outstanding .sr-tbl thead th,
#pg-purchase-outstanding .sr-tbl thead th,
#pg-purchase-report .pr-tbl thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surf2,#f8fafc);
  color:var(--text,#0f172a);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:11px 12px;
  text-align:left;
  border-bottom:2px solid var(--bdr,#e5e7eb);
  white-space:nowrap;
}#pg-day-wise-pl .sr-tbl tbody td,
#pg-sales-report .sr-tbl tbody td,
#pg-notifications .sr-tbl tbody td,
#pg-gstr3b .sr-tbl tbody td,
#pg-gstr2b .sr-tbl tbody td,
#pg-gstr1 .sr-tbl tbody td,
#pg-customer-wise-pl .sr-tbl tbody td,
#pg-bill-pl .sr-tbl tbody td,
#pg-daybook .sr-tbl tbody td,
#pg-stock-report .sr-tbl tbody td,
#pg-manufacture-report .sr-tbl tbody td,
#pg-product-report .sr-tbl tbody td,
#pg-company-outstanding-report .sr-tbl tbody td,
#pg-other-document-product-report .sr-tbl tbody td,
#pg-other-document-report .sr-tbl tbody td,
#pg-outward-payment-report .sr-tbl tbody td,
#pg-other-income-report .sr-tbl tbody td,
#pg-product-wise-pl .sr-tbl tbody td,
#pg-daily-expenses-report .sr-tbl tbody td,
#pg-inward-payment-report .sr-tbl tbody td,
#pg-purchase-product-report .sr-tbl tbody td,
#pg-sale-product-report .sr-tbl tbody td,
#pg-sale-outstanding .sr-tbl tbody td,
#pg-purchase-outstanding .sr-tbl tbody td,
#pg-purchase-report .pr-tbl tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--bdr,#f1f5f9);
  color:var(--text,#0f172a);
  vertical-align:middle;
}#pg-day-wise-pl .sr-tbl tbody tr:nth-child(even) td,
#pg-sales-report .sr-tbl tbody tr:nth-child(even) td,
#pg-notifications .sr-tbl tbody tr:nth-child(even) td,
#pg-gstr3b .sr-tbl tbody tr:nth-child(even) td,
#pg-gstr2b .sr-tbl tbody tr:nth-child(even) td,
#pg-gstr1 .sr-tbl tbody tr:nth-child(even) td,
#pg-customer-wise-pl .sr-tbl tbody tr:nth-child(even) td,
#pg-bill-pl .sr-tbl tbody tr:nth-child(even) td,
#pg-daybook .sr-tbl tbody tr:nth-child(even) td,
#pg-stock-report .sr-tbl tbody tr:nth-child(even) td,
#pg-manufacture-report .sr-tbl tbody tr:nth-child(even) td,
#pg-product-report .sr-tbl tbody tr:nth-child(even) td,
#pg-company-outstanding-report .sr-tbl tbody tr:nth-child(even) td,
#pg-other-document-product-report .sr-tbl tbody tr:nth-child(even) td,
#pg-other-document-report .sr-tbl tbody tr:nth-child(even) td,
#pg-outward-payment-report .sr-tbl tbody tr:nth-child(even) td,
#pg-other-income-report .sr-tbl tbody tr:nth-child(even) td,
#pg-product-wise-pl .sr-tbl tbody tr:nth-child(even) td,
#pg-daily-expenses-report .sr-tbl tbody tr:nth-child(even) td,
#pg-inward-payment-report .sr-tbl tbody tr:nth-child(even) td,
#pg-purchase-product-report .sr-tbl tbody tr:nth-child(even) td,
#pg-sale-product-report .sr-tbl tbody tr:nth-child(even) td,
#pg-sale-outstanding .sr-tbl tbody tr:nth-child(even) td,
#pg-purchase-outstanding .sr-tbl tbody tr:nth-child(even) td,
#pg-purchase-report .pr-tbl tbody tr:nth-child(even) td{
  background:rgba(15,23,42,.015);
}#pg-day-wise-pl .sr-tbl tbody tr:hover td,
#pg-sales-report .sr-tbl tbody tr:hover td,
#pg-notifications .sr-tbl tbody tr:hover td,
#pg-gstr3b .sr-tbl tbody tr:hover td,
#pg-gstr2b .sr-tbl tbody tr:hover td,
#pg-gstr1 .sr-tbl tbody tr:hover td,
#pg-customer-wise-pl .sr-tbl tbody tr:hover td,
#pg-bill-pl .sr-tbl tbody tr:hover td,
#pg-daybook .sr-tbl tbody tr:hover td,
#pg-stock-report .sr-tbl tbody tr:hover td,
#pg-manufacture-report .sr-tbl tbody tr:hover td,
#pg-product-report .sr-tbl tbody tr:hover td,
#pg-company-outstanding-report .sr-tbl tbody tr:hover td,
#pg-other-document-product-report .sr-tbl tbody tr:hover td,
#pg-other-document-report .sr-tbl tbody tr:hover td,
#pg-outward-payment-report .sr-tbl tbody tr:hover td,
#pg-other-income-report .sr-tbl tbody tr:hover td,
#pg-product-wise-pl .sr-tbl tbody tr:hover td,
#pg-daily-expenses-report .sr-tbl tbody tr:hover td,
#pg-inward-payment-report .sr-tbl tbody tr:hover td,
#pg-purchase-product-report .sr-tbl tbody tr:hover td,
#pg-sale-product-report .sr-tbl tbody tr:hover td,
#pg-sale-outstanding .sr-tbl tbody tr:hover td,
#pg-purchase-outstanding .sr-tbl tbody tr:hover td,
#pg-purchase-report .pr-tbl tbody tr:hover td{
  background:var(--brand-bg,#f0fdf4);
}#pg-day-wise-pl .sr-tbl tfoot td,
#pg-sales-report .sr-tbl tfoot td,
#pg-notifications .sr-tbl tfoot td,
#pg-gstr3b .sr-tbl tfoot td,
#pg-gstr2b .sr-tbl tfoot td,
#pg-gstr1 .sr-tbl tfoot td,
#pg-customer-wise-pl .sr-tbl tfoot td,
#pg-bill-pl .sr-tbl tfoot td,
#pg-daybook .sr-tbl tfoot td,
#pg-stock-report .sr-tbl tfoot td,
#pg-manufacture-report .sr-tbl tfoot td,
#pg-product-report .sr-tbl tfoot td,
#pg-company-outstanding-report .sr-tbl tfoot td,
#pg-other-document-product-report .sr-tbl tfoot td,
#pg-other-document-report .sr-tbl tfoot td,
#pg-outward-payment-report .sr-tbl tfoot td,
#pg-other-income-report .sr-tbl tfoot td,
#pg-product-wise-pl .sr-tbl tfoot td,
#pg-daily-expenses-report .sr-tbl tfoot td,
#pg-inward-payment-report .sr-tbl tfoot td,
#pg-purchase-product-report .sr-tbl tfoot td,
#pg-sale-product-report .sr-tbl tfoot td,
#pg-sale-outstanding .sr-tbl tfoot td,
#pg-purchase-outstanding .sr-tbl tfoot td,
#pg-purchase-report .pr-tbl tfoot td{
  background:var(--surf2,#f8fafc);
  font-weight:700;
  padding:12px 12px;
  border-top:2px solid var(--bdr,#e5e7eb);
  color:var(--text,#0f172a);
}/* ── 10) Bottom action row (Print / E-Mail / Export / Download)
        ────────────────────────────────────────────────────────────
        v3.9.415-b: user asked us to drop the fixed floating dark-pill
        action bar and instead lay these buttons out inline at the
        bottom of the report — same rhythm as the Save / Discard /
        Save & Print row at the bottom of the Create Sale Invoice
        editor (.gst-action-row). No markup change; we just kill the
        `position:fixed` + dark background, restyle the buttons to
        match .gst-action-row's ghost / brand look, and let the bar
        flow naturally at the end of the page. ────────────────────── */
#pg-day-wise-pl .sr-action-bar,
#pg-sales-report .sr-action-bar,
#pg-notifications .sr-action-bar,
#pg-gstr3b .sr-action-bar,
#pg-gstr2b .sr-action-bar,
#pg-gstr1 .sr-action-bar,
#pg-customer-wise-pl .sr-action-bar,
#pg-bill-pl .sr-action-bar,
#pg-daybook .sr-action-bar,
#pg-stock-report .sr-action-bar,
#pg-manufacture-report .sr-action-bar,
#pg-product-report .sr-action-bar,
#pg-company-outstanding-report .sr-action-bar,
#pg-other-document-product-report .sr-action-bar,
#pg-other-document-report .sr-action-bar,
#pg-outward-payment-report .sr-action-bar,
#pg-other-income-report .sr-action-bar,
#pg-product-wise-pl .sr-action-bar,
#pg-daily-expenses-report .sr-action-bar,
#pg-inward-payment-report .sr-action-bar,
#pg-purchase-product-report .sr-action-bar,
#pg-sale-product-report .sr-action-bar,
#pg-sale-outstanding .sr-action-bar,
#pg-purchase-outstanding .sr-action-bar,
#pg-purchase-report .pr-action-bar{
  position:static;                                /* was: fixed floating */
  left:auto; right:auto; bottom:auto;
  transform:none;
  z-index:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  background:transparent;                         /* was: dark pill */
  padding:14px 0 4px;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  margin-top:14px;
}#pg-day-wise-pl .sr-action-btn,
#pg-sales-report .sr-action-btn,
#pg-notifications .sr-action-btn,
#pg-gstr3b .sr-action-btn,
#pg-gstr2b .sr-action-btn,
#pg-gstr1 .sr-action-btn,
#pg-customer-wise-pl .sr-action-btn,
#pg-bill-pl .sr-action-btn,
#pg-daybook .sr-action-btn,
#pg-stock-report .sr-action-btn,
#pg-manufacture-report .sr-action-btn,
#pg-product-report .sr-action-btn,
#pg-company-outstanding-report .sr-action-btn,
#pg-other-document-product-report .sr-action-btn,
#pg-other-document-report .sr-action-btn,
#pg-outward-payment-report .sr-action-btn,
#pg-other-income-report .sr-action-btn,
#pg-product-wise-pl .sr-action-btn,
#pg-daily-expenses-report .sr-action-btn,
#pg-inward-payment-report .sr-action-btn,
#pg-purchase-product-report .sr-action-btn,
#pg-sale-product-report .sr-action-btn,
#pg-sale-outstanding .sr-action-btn,
#pg-purchase-outstanding .sr-action-btn,
#pg-purchase-report .pr-action-btn{
  padding:9px 22px;
  border:1.5px solid var(--bdr,#e2e8f0);
  border-radius:7px;
  background:var(--surf,#fff);
  color:var(--text,#0f172a);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}#pg-day-wise-pl .sr-action-btn:hover,
#pg-sales-report .sr-action-btn:hover,
#pg-notifications .sr-action-btn:hover,
#pg-gstr3b .sr-action-btn:hover,
#pg-gstr2b .sr-action-btn:hover,
#pg-gstr1 .sr-action-btn:hover,
#pg-customer-wise-pl .sr-action-btn:hover,
#pg-bill-pl .sr-action-btn:hover,
#pg-daybook .sr-action-btn:hover,
#pg-stock-report .sr-action-btn:hover,
#pg-manufacture-report .sr-action-btn:hover,
#pg-product-report .sr-action-btn:hover,
#pg-company-outstanding-report .sr-action-btn:hover,
#pg-other-document-product-report .sr-action-btn:hover,
#pg-other-document-report .sr-action-btn:hover,
#pg-outward-payment-report .sr-action-btn:hover,
#pg-other-income-report .sr-action-btn:hover,
#pg-product-wise-pl .sr-action-btn:hover,
#pg-daily-expenses-report .sr-action-btn:hover,
#pg-inward-payment-report .sr-action-btn:hover,
#pg-purchase-product-report .sr-action-btn:hover,
#pg-sale-product-report .sr-action-btn:hover,
#pg-sale-outstanding .sr-action-btn:hover,
#pg-purchase-outstanding .sr-action-btn:hover,
#pg-purchase-report .pr-action-btn:hover{
  background:var(--surf2,#f8fafc);
  border-color:var(--muted,#94a3b8);
  transform:translateY(-1px);
}/* Print = primary CTA on the row (matches .gst-action-row button.save) */
#pg-day-wise-pl .sr-a-print,
#pg-sales-report .sr-a-print,
#pg-notifications .sr-a-print,
#pg-gstr3b .sr-a-print,
#pg-gstr2b .sr-a-print,
#pg-gstr1 .sr-a-print,
#pg-customer-wise-pl .sr-a-print,
#pg-bill-pl .sr-a-print,
#pg-daybook .sr-a-print,
#pg-stock-report .sr-a-print,
#pg-manufacture-report .sr-a-print,
#pg-product-report .sr-a-print,
#pg-company-outstanding-report .sr-a-print,
#pg-other-document-product-report .sr-a-print,
#pg-other-document-report .sr-a-print,
#pg-outward-payment-report .sr-a-print,
#pg-other-income-report .sr-a-print,
#pg-product-wise-pl .sr-a-print,
#pg-daily-expenses-report .sr-a-print,
#pg-inward-payment-report .sr-a-print,
#pg-purchase-product-report .sr-a-print,
#pg-sale-product-report .sr-a-print,
#pg-sale-outstanding .sr-a-print,
#pg-purchase-outstanding .sr-a-print,
#pg-purchase-report .pr-a-print{
  background:var(--brand,#16a34a);
  border-color:var(--brand,#16a34a);
  color:#fff;
  box-shadow:0 3px 8px rgba(22,163,74,.20);
}#pg-day-wise-pl .sr-a-print:hover,
#pg-sales-report .sr-a-print:hover,
#pg-notifications .sr-a-print:hover,
#pg-gstr3b .sr-a-print:hover,
#pg-gstr2b .sr-a-print:hover,
#pg-gstr1 .sr-a-print:hover,
#pg-customer-wise-pl .sr-a-print:hover,
#pg-bill-pl .sr-a-print:hover,
#pg-daybook .sr-a-print:hover,
#pg-stock-report .sr-a-print:hover,
#pg-manufacture-report .sr-a-print:hover,
#pg-product-report .sr-a-print:hover,
#pg-company-outstanding-report .sr-a-print:hover,
#pg-other-document-product-report .sr-a-print:hover,
#pg-other-document-report .sr-a-print:hover,
#pg-outward-payment-report .sr-a-print:hover,
#pg-other-income-report .sr-a-print:hover,
#pg-product-wise-pl .sr-a-print:hover,
#pg-daily-expenses-report .sr-a-print:hover,
#pg-inward-payment-report .sr-a-print:hover,
#pg-purchase-product-report .sr-a-print:hover,
#pg-sale-product-report .sr-a-print:hover,
#pg-sale-outstanding .sr-a-print:hover,
#pg-purchase-outstanding .sr-a-print:hover,
#pg-purchase-report .pr-a-print:hover{
  background:var(--brand-dd,#15803d);
  border-color:var(--brand-dd,#15803d);
  color:#fff;
  box-shadow:0 5px 12px rgba(22,163,74,.26);
}/* E-Mail = ghost brand outline (matches .gst-action-row button.save-print) */
#pg-day-wise-pl .sr-a-email,
#pg-sales-report .sr-a-email,
#pg-notifications .sr-a-email,
#pg-gstr3b .sr-a-email,
#pg-gstr2b .sr-a-email,
#pg-gstr1 .sr-a-email,
#pg-customer-wise-pl .sr-a-email,
#pg-bill-pl .sr-a-email,
#pg-daybook .sr-a-email,
#pg-stock-report .sr-a-email,
#pg-manufacture-report .sr-a-email,
#pg-product-report .sr-a-email,
#pg-company-outstanding-report .sr-a-email,
#pg-other-document-product-report .sr-a-email,
#pg-other-document-report .sr-a-email,
#pg-outward-payment-report .sr-a-email,
#pg-other-income-report .sr-a-email,
#pg-product-wise-pl .sr-a-email,
#pg-daily-expenses-report .sr-a-email,
#pg-inward-payment-report .sr-a-email,
#pg-purchase-product-report .sr-a-email,
#pg-sale-product-report .sr-a-email,
#pg-sale-outstanding .sr-a-email,
#pg-purchase-outstanding .sr-a-email,
#pg-purchase-report .pr-a-email{
  background:var(--surf,#fff);
  border-color:var(--brand,#16a34a);
  color:var(--brand-dd,#15803d);
}#pg-day-wise-pl .sr-a-email:hover,
#pg-sales-report .sr-a-email:hover,
#pg-notifications .sr-a-email:hover,
#pg-gstr3b .sr-a-email:hover,
#pg-gstr2b .sr-a-email:hover,
#pg-gstr1 .sr-a-email:hover,
#pg-customer-wise-pl .sr-a-email:hover,
#pg-bill-pl .sr-a-email:hover,
#pg-daybook .sr-a-email:hover,
#pg-stock-report .sr-a-email:hover,
#pg-manufacture-report .sr-a-email:hover,
#pg-product-report .sr-a-email:hover,
#pg-company-outstanding-report .sr-a-email:hover,
#pg-other-document-product-report .sr-a-email:hover,
#pg-other-document-report .sr-a-email:hover,
#pg-outward-payment-report .sr-a-email:hover,
#pg-other-income-report .sr-a-email:hover,
#pg-product-wise-pl .sr-a-email:hover,
#pg-daily-expenses-report .sr-a-email:hover,
#pg-inward-payment-report .sr-a-email:hover,
#pg-purchase-product-report .sr-a-email:hover,
#pg-sale-product-report .sr-a-email:hover,
#pg-sale-outstanding .sr-a-email:hover,
#pg-purchase-outstanding .sr-a-email:hover,
#pg-purchase-report .pr-a-email:hover{
  background:var(--brand-bg,#f0fdf4);
  border-color:var(--brand,#16a34a);
  color:var(--brand-dd,#15803d);
}/* Export / Download stay as neutral ghost buttons (the default rule above) */
/* v3.9.415-b: reclaim the 96px bottom padding that was reserved for the
   old floating action bar. That gap is now dead space at the end of the
   page since the action row flows inline with the results. */
#pg-day-wise-pl,
#pg-sales-report,
#pg-notifications,
#pg-gstr3b,
#pg-gstr2b,
#pg-gstr1,
#pg-customer-wise-pl,
#pg-bill-pl,
#pg-daybook,
#pg-stock-report,
#pg-manufacture-report,
#pg-product-report,
#pg-company-outstanding-report,
#pg-other-document-product-report,
#pg-other-document-report,
#pg-outward-payment-report,
#pg-other-income-report,
#pg-product-wise-pl,
#pg-daily-expenses-report,
#pg-inward-payment-report,
#pg-purchase-product-report,
#pg-sale-product-report,
#pg-sale-outstanding,
#pg-purchase-outstanding,
#pg-purchase-report{ padding-bottom:24px; }/* ── 11) Dark-mode refinements — the underlying vars mostly do the job,
        but a few surfaces need explicit tuning so contrast stays right ── */
html[data-theme="dark"] #pg-day-wise-pl .sr-card,
html[data-theme="dark"] #pg-sales-report .sr-card,
html[data-theme="dark"] #pg-notifications .sr-card,
html[data-theme="dark"] #pg-gstr3b .sr-card,
html[data-theme="dark"] #pg-gstr2b .sr-card,
html[data-theme="dark"] #pg-gstr1 .sr-card,
html[data-theme="dark"] #pg-customer-wise-pl .sr-card,
html[data-theme="dark"] #pg-bill-pl .sr-card,
html[data-theme="dark"] #pg-daybook .sr-card,
html[data-theme="dark"] #pg-stock-report .sr-card,
html[data-theme="dark"] #pg-manufacture-report .sr-card,
html[data-theme="dark"] #pg-product-report .sr-card,
html[data-theme="dark"] #pg-company-outstanding-report .sr-card,
html[data-theme="dark"] #pg-other-document-product-report .sr-card,
html[data-theme="dark"] #pg-other-document-report .sr-card,
html[data-theme="dark"] #pg-outward-payment-report .sr-card,
html[data-theme="dark"] #pg-other-income-report .sr-card,
html[data-theme="dark"] #pg-product-wise-pl .sr-card,
html[data-theme="dark"] #pg-daily-expenses-report .sr-card,
html[data-theme="dark"] #pg-inward-payment-report .sr-card,
html[data-theme="dark"] #pg-purchase-product-report .sr-card,
html[data-theme="dark"] #pg-sale-product-report .sr-card,
html[data-theme="dark"] #pg-sale-outstanding .sr-card,
html[data-theme="dark"] #pg-purchase-outstanding .sr-card,
html[data-theme="dark"] #pg-purchase-report .pr-card,
html[data-theme="dark"] #pg-day-wise-pl .sr-results,
html[data-theme="dark"] #pg-sales-report .sr-results,
html[data-theme="dark"] #pg-notifications .sr-results,
html[data-theme="dark"] #pg-gstr3b .sr-results,
html[data-theme="dark"] #pg-gstr2b .sr-results,
html[data-theme="dark"] #pg-gstr1 .sr-results,
html[data-theme="dark"] #pg-customer-wise-pl .sr-results,
html[data-theme="dark"] #pg-bill-pl .sr-results,
html[data-theme="dark"] #pg-daybook .sr-results,
html[data-theme="dark"] #pg-stock-report .sr-results,
html[data-theme="dark"] #pg-manufacture-report .sr-results,
html[data-theme="dark"] #pg-product-report .sr-results,
html[data-theme="dark"] #pg-company-outstanding-report .sr-results,
html[data-theme="dark"] #pg-other-document-product-report .sr-results,
html[data-theme="dark"] #pg-other-document-report .sr-results,
html[data-theme="dark"] #pg-outward-payment-report .sr-results,
html[data-theme="dark"] #pg-other-income-report .sr-results,
html[data-theme="dark"] #pg-product-wise-pl .sr-results,
html[data-theme="dark"] #pg-daily-expenses-report .sr-results,
html[data-theme="dark"] #pg-inward-payment-report .sr-results,
html[data-theme="dark"] #pg-purchase-product-report .sr-results,
html[data-theme="dark"] #pg-sale-product-report .sr-results,
html[data-theme="dark"] #pg-sale-outstanding .sr-results,
html[data-theme="dark"] #pg-purchase-outstanding .sr-results,
html[data-theme="dark"] #pg-purchase-report .pr-results{
  background:var(--surf);
  border-color:var(--bdr);
}html[data-theme="dark"] #pg-day-wise-pl .sr-card-hdr,
html[data-theme="dark"] #pg-sales-report .sr-card-hdr,
html[data-theme="dark"] #pg-notifications .sr-card-hdr,
html[data-theme="dark"] #pg-gstr3b .sr-card-hdr,
html[data-theme="dark"] #pg-gstr2b .sr-card-hdr,
html[data-theme="dark"] #pg-gstr1 .sr-card-hdr,
html[data-theme="dark"] #pg-customer-wise-pl .sr-card-hdr,
html[data-theme="dark"] #pg-bill-pl .sr-card-hdr,
html[data-theme="dark"] #pg-daybook .sr-card-hdr,
html[data-theme="dark"] #pg-stock-report .sr-card-hdr,
html[data-theme="dark"] #pg-manufacture-report .sr-card-hdr,
html[data-theme="dark"] #pg-product-report .sr-card-hdr,
html[data-theme="dark"] #pg-company-outstanding-report .sr-card-hdr,
html[data-theme="dark"] #pg-other-document-product-report .sr-card-hdr,
html[data-theme="dark"] #pg-other-document-report .sr-card-hdr,
html[data-theme="dark"] #pg-outward-payment-report .sr-card-hdr,
html[data-theme="dark"] #pg-other-income-report .sr-card-hdr,
html[data-theme="dark"] #pg-product-wise-pl .sr-card-hdr,
html[data-theme="dark"] #pg-daily-expenses-report .sr-card-hdr,
html[data-theme="dark"] #pg-inward-payment-report .sr-card-hdr,
html[data-theme="dark"] #pg-purchase-product-report .sr-card-hdr,
html[data-theme="dark"] #pg-sale-product-report .sr-card-hdr,
html[data-theme="dark"] #pg-sale-outstanding .sr-card-hdr,
html[data-theme="dark"] #pg-purchase-outstanding .sr-card-hdr,
html[data-theme="dark"] #pg-purchase-report .pr-card-hdr{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}html[data-theme="dark"] #pg-day-wise-pl .sr-flags,
html[data-theme="dark"] #pg-sales-report .sr-flags,
html[data-theme="dark"] #pg-notifications .sr-flags,
html[data-theme="dark"] #pg-gstr3b .sr-flags,
html[data-theme="dark"] #pg-gstr2b .sr-flags,
html[data-theme="dark"] #pg-gstr1 .sr-flags,
html[data-theme="dark"] #pg-customer-wise-pl .sr-flags,
html[data-theme="dark"] #pg-bill-pl .sr-flags,
html[data-theme="dark"] #pg-daybook .sr-flags,
html[data-theme="dark"] #pg-stock-report .sr-flags,
html[data-theme="dark"] #pg-manufacture-report .sr-flags,
html[data-theme="dark"] #pg-product-report .sr-flags,
html[data-theme="dark"] #pg-company-outstanding-report .sr-flags,
html[data-theme="dark"] #pg-other-document-product-report .sr-flags,
html[data-theme="dark"] #pg-other-document-report .sr-flags,
html[data-theme="dark"] #pg-outward-payment-report .sr-flags,
html[data-theme="dark"] #pg-other-income-report .sr-flags,
html[data-theme="dark"] #pg-product-wise-pl .sr-flags,
html[data-theme="dark"] #pg-daily-expenses-report .sr-flags,
html[data-theme="dark"] #pg-inward-payment-report .sr-flags,
html[data-theme="dark"] #pg-purchase-product-report .sr-flags,
html[data-theme="dark"] #pg-sale-product-report .sr-flags,
html[data-theme="dark"] #pg-sale-outstanding .sr-flags,
html[data-theme="dark"] #pg-purchase-outstanding .sr-flags,
html[data-theme="dark"] #pg-purchase-report .pr-flags{
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.24);
}html[data-theme="dark"] #pg-day-wise-pl .sr-adv-block,
html[data-theme="dark"] #pg-sales-report .sr-adv-block,
html[data-theme="dark"] #pg-notifications .sr-adv-block,
html[data-theme="dark"] #pg-gstr3b .sr-adv-block,
html[data-theme="dark"] #pg-gstr2b .sr-adv-block,
html[data-theme="dark"] #pg-gstr1 .sr-adv-block,
html[data-theme="dark"] #pg-customer-wise-pl .sr-adv-block,
html[data-theme="dark"] #pg-bill-pl .sr-adv-block,
html[data-theme="dark"] #pg-daybook .sr-adv-block,
html[data-theme="dark"] #pg-stock-report .sr-adv-block,
html[data-theme="dark"] #pg-manufacture-report .sr-adv-block,
html[data-theme="dark"] #pg-product-report .sr-adv-block,
html[data-theme="dark"] #pg-company-outstanding-report .sr-adv-block,
html[data-theme="dark"] #pg-other-document-product-report .sr-adv-block,
html[data-theme="dark"] #pg-other-document-report .sr-adv-block,
html[data-theme="dark"] #pg-outward-payment-report .sr-adv-block,
html[data-theme="dark"] #pg-other-income-report .sr-adv-block,
html[data-theme="dark"] #pg-product-wise-pl .sr-adv-block,
html[data-theme="dark"] #pg-daily-expenses-report .sr-adv-block,
html[data-theme="dark"] #pg-inward-payment-report .sr-adv-block,
html[data-theme="dark"] #pg-purchase-product-report .sr-adv-block,
html[data-theme="dark"] #pg-sale-product-report .sr-adv-block,
html[data-theme="dark"] #pg-sale-outstanding .sr-adv-block,
html[data-theme="dark"] #pg-purchase-outstanding .sr-adv-block,
html[data-theme="dark"] #pg-purchase-report .pr-adv-block,
html[data-theme="dark"] #pg-day-wise-pl .sr-cust-block,
html[data-theme="dark"] #pg-sales-report .sr-cust-block,
html[data-theme="dark"] #pg-notifications .sr-cust-block,
html[data-theme="dark"] #pg-gstr3b .sr-cust-block,
html[data-theme="dark"] #pg-gstr2b .sr-cust-block,
html[data-theme="dark"] #pg-gstr1 .sr-cust-block,
html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-block,
html[data-theme="dark"] #pg-bill-pl .sr-cust-block,
html[data-theme="dark"] #pg-daybook .sr-cust-block,
html[data-theme="dark"] #pg-stock-report .sr-cust-block,
html[data-theme="dark"] #pg-manufacture-report .sr-cust-block,
html[data-theme="dark"] #pg-product-report .sr-cust-block,
html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-block,
html[data-theme="dark"] #pg-other-document-product-report .sr-cust-block,
html[data-theme="dark"] #pg-other-document-report .sr-cust-block,
html[data-theme="dark"] #pg-outward-payment-report .sr-cust-block,
html[data-theme="dark"] #pg-other-income-report .sr-cust-block,
html[data-theme="dark"] #pg-product-wise-pl .sr-cust-block,
html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-block,
html[data-theme="dark"] #pg-inward-payment-report .sr-cust-block,
html[data-theme="dark"] #pg-purchase-product-report .sr-cust-block,
html[data-theme="dark"] #pg-sale-product-report .sr-cust-block,
html[data-theme="dark"] #pg-sale-outstanding .sr-cust-block,
html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-block,
html[data-theme="dark"] #pg-purchase-report .pr-cust-block{
  background:linear-gradient(180deg, rgba(22,163,74,.08) 0%, transparent 80%);
}html[data-theme="dark"] #pg-day-wise-pl .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-sales-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-notifications .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-gstr3b .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-gstr2b .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-gstr1 .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-customer-wise-pl .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-bill-pl .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-daybook .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-stock-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-manufacture-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-product-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-company-outstanding-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-other-document-product-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-other-document-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-outward-payment-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-other-income-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-product-wise-pl .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-daily-expenses-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-inward-payment-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-purchase-product-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-sale-product-report .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-sale-outstanding .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-purchase-outstanding .sr-tbl tbody tr:nth-child(even) td,
html[data-theme="dark"] #pg-purchase-report .pr-tbl tbody tr:nth-child(even) td{
  background:rgba(255,255,255,.02);
}html[data-theme="dark"] #pg-day-wise-pl .sr-tbl thead th,
html[data-theme="dark"] #pg-sales-report .sr-tbl thead th,
html[data-theme="dark"] #pg-notifications .sr-tbl thead th,
html[data-theme="dark"] #pg-gstr3b .sr-tbl thead th,
html[data-theme="dark"] #pg-gstr2b .sr-tbl thead th,
html[data-theme="dark"] #pg-gstr1 .sr-tbl thead th,
html[data-theme="dark"] #pg-customer-wise-pl .sr-tbl thead th,
html[data-theme="dark"] #pg-bill-pl .sr-tbl thead th,
html[data-theme="dark"] #pg-daybook .sr-tbl thead th,
html[data-theme="dark"] #pg-stock-report .sr-tbl thead th,
html[data-theme="dark"] #pg-manufacture-report .sr-tbl thead th,
html[data-theme="dark"] #pg-product-report .sr-tbl thead th,
html[data-theme="dark"] #pg-company-outstanding-report .sr-tbl thead th,
html[data-theme="dark"] #pg-other-document-product-report .sr-tbl thead th,
html[data-theme="dark"] #pg-other-document-report .sr-tbl thead th,
html[data-theme="dark"] #pg-outward-payment-report .sr-tbl thead th,
html[data-theme="dark"] #pg-other-income-report .sr-tbl thead th,
html[data-theme="dark"] #pg-product-wise-pl .sr-tbl thead th,
html[data-theme="dark"] #pg-daily-expenses-report .sr-tbl thead th,
html[data-theme="dark"] #pg-inward-payment-report .sr-tbl thead th,
html[data-theme="dark"] #pg-purchase-product-report .sr-tbl thead th,
html[data-theme="dark"] #pg-sale-product-report .sr-tbl thead th,
html[data-theme="dark"] #pg-sale-outstanding .sr-tbl thead th,
html[data-theme="dark"] #pg-purchase-outstanding .sr-tbl thead th,
html[data-theme="dark"] #pg-purchase-report .pr-tbl thead th,
html[data-theme="dark"] #pg-day-wise-pl .sr-tbl tfoot td,
html[data-theme="dark"] #pg-sales-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-notifications .sr-tbl tfoot td,
html[data-theme="dark"] #pg-gstr3b .sr-tbl tfoot td,
html[data-theme="dark"] #pg-gstr2b .sr-tbl tfoot td,
html[data-theme="dark"] #pg-gstr1 .sr-tbl tfoot td,
html[data-theme="dark"] #pg-customer-wise-pl .sr-tbl tfoot td,
html[data-theme="dark"] #pg-bill-pl .sr-tbl tfoot td,
html[data-theme="dark"] #pg-daybook .sr-tbl tfoot td,
html[data-theme="dark"] #pg-stock-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-manufacture-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-product-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-company-outstanding-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-other-document-product-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-other-document-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-outward-payment-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-other-income-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-product-wise-pl .sr-tbl tfoot td,
html[data-theme="dark"] #pg-daily-expenses-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-inward-payment-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-purchase-product-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-sale-product-report .sr-tbl tfoot td,
html[data-theme="dark"] #pg-sale-outstanding .sr-tbl tfoot td,
html[data-theme="dark"] #pg-purchase-outstanding .sr-tbl tfoot td,
html[data-theme="dark"] #pg-purchase-report .pr-tbl tfoot td{
  background:var(--surf2);
}

/* ── 12) Responsive overrides — mobile refinements ───────────────────── */
@media (max-width:1100px){#pg-day-wise-pl .sr-filter-grid,
#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:768px){#pg-day-wise-pl .sr-card,
#pg-sales-report .sr-card,
#pg-notifications .sr-card,
#pg-gstr3b .sr-card,
#pg-gstr2b .sr-card,
#pg-gstr1 .sr-card,
#pg-customer-wise-pl .sr-card,
#pg-bill-pl .sr-card,
#pg-daybook .sr-card,
#pg-stock-report .sr-card,
#pg-manufacture-report .sr-card,
#pg-product-report .sr-card,
#pg-company-outstanding-report .sr-card,
#pg-other-document-product-report .sr-card,
#pg-other-document-report .sr-card,
#pg-outward-payment-report .sr-card,
#pg-other-income-report .sr-card,
#pg-product-wise-pl .sr-card,
#pg-daily-expenses-report .sr-card,
#pg-inward-payment-report .sr-card,
#pg-purchase-product-report .sr-card,
#pg-sale-product-report .sr-card,
#pg-sale-outstanding .sr-card,
#pg-purchase-outstanding .sr-card,
#pg-purchase-report .pr-card{ border-radius:12px; }#pg-day-wise-pl .sr-card-body,
#pg-sales-report .sr-card-body,
#pg-notifications .sr-card-body,
#pg-gstr3b .sr-card-body,
#pg-gstr2b .sr-card-body,
#pg-gstr1 .sr-card-body,
#pg-customer-wise-pl .sr-card-body,
#pg-bill-pl .sr-card-body,
#pg-daybook .sr-card-body,
#pg-stock-report .sr-card-body,
#pg-manufacture-report .sr-card-body,
#pg-product-report .sr-card-body,
#pg-company-outstanding-report .sr-card-body,
#pg-other-document-product-report .sr-card-body,
#pg-other-document-report .sr-card-body,
#pg-outward-payment-report .sr-card-body,
#pg-other-income-report .sr-card-body,
#pg-product-wise-pl .sr-card-body,
#pg-daily-expenses-report .sr-card-body,
#pg-inward-payment-report .sr-card-body,
#pg-purchase-product-report .sr-card-body,
#pg-sale-product-report .sr-card-body,
#pg-sale-outstanding .sr-card-body,
#pg-purchase-outstanding .sr-card-body,
#pg-purchase-report .pr-card-body{ padding:16px 14px; }#pg-day-wise-pl .sr-card-hdr,
#pg-sales-report .sr-card-hdr,
#pg-notifications .sr-card-hdr,
#pg-gstr3b .sr-card-hdr,
#pg-gstr2b .sr-card-hdr,
#pg-gstr1 .sr-card-hdr,
#pg-customer-wise-pl .sr-card-hdr,
#pg-bill-pl .sr-card-hdr,
#pg-daybook .sr-card-hdr,
#pg-stock-report .sr-card-hdr,
#pg-manufacture-report .sr-card-hdr,
#pg-product-report .sr-card-hdr,
#pg-company-outstanding-report .sr-card-hdr,
#pg-other-document-product-report .sr-card-hdr,
#pg-other-document-report .sr-card-hdr,
#pg-outward-payment-report .sr-card-hdr,
#pg-other-income-report .sr-card-hdr,
#pg-product-wise-pl .sr-card-hdr,
#pg-daily-expenses-report .sr-card-hdr,
#pg-inward-payment-report .sr-card-hdr,
#pg-purchase-product-report .sr-card-hdr,
#pg-sale-product-report .sr-card-hdr,
#pg-sale-outstanding .sr-card-hdr,
#pg-purchase-outstanding .sr-card-hdr,
#pg-purchase-report .pr-card-hdr{ padding:14px 16px; }#pg-day-wise-pl .sr-filter-grid,
#pg-sales-report .sr-filter-grid,
#pg-notifications .sr-filter-grid,
#pg-gstr3b .sr-filter-grid,
#pg-gstr2b .sr-filter-grid,
#pg-gstr1 .sr-filter-grid,
#pg-customer-wise-pl .sr-filter-grid,
#pg-bill-pl .sr-filter-grid,
#pg-daybook .sr-filter-grid,
#pg-stock-report .sr-filter-grid,
#pg-manufacture-report .sr-filter-grid,
#pg-product-report .sr-filter-grid,
#pg-company-outstanding-report .sr-filter-grid,
#pg-other-document-product-report .sr-filter-grid,
#pg-other-document-report .sr-filter-grid,
#pg-outward-payment-report .sr-filter-grid,
#pg-other-income-report .sr-filter-grid,
#pg-product-wise-pl .sr-filter-grid,
#pg-daily-expenses-report .sr-filter-grid,
#pg-inward-payment-report .sr-filter-grid,
#pg-purchase-product-report .sr-filter-grid,
#pg-sale-product-report .sr-filter-grid,
#pg-sale-outstanding .sr-filter-grid,
#pg-purchase-outstanding .sr-filter-grid,
#pg-purchase-report .pr-filter-grid{
    grid-template-columns:1fr;
    gap:14px;
  }#pg-day-wise-pl .sr-adv-row,
#pg-sales-report .sr-adv-row,
#pg-notifications .sr-adv-row,
#pg-gstr3b .sr-adv-row,
#pg-gstr2b .sr-adv-row,
#pg-gstr1 .sr-adv-row,
#pg-customer-wise-pl .sr-adv-row,
#pg-bill-pl .sr-adv-row,
#pg-daybook .sr-adv-row,
#pg-stock-report .sr-adv-row,
#pg-manufacture-report .sr-adv-row,
#pg-product-report .sr-adv-row,
#pg-company-outstanding-report .sr-adv-row,
#pg-other-document-product-report .sr-adv-row,
#pg-other-document-report .sr-adv-row,
#pg-outward-payment-report .sr-adv-row,
#pg-other-income-report .sr-adv-row,
#pg-product-wise-pl .sr-adv-row,
#pg-daily-expenses-report .sr-adv-row,
#pg-inward-payment-report .sr-adv-row,
#pg-purchase-product-report .sr-adv-row,
#pg-sale-product-report .sr-adv-row,
#pg-sale-outstanding .sr-adv-row,
#pg-purchase-outstanding .sr-adv-row,
#pg-purchase-report .pr-adv-row{
    grid-template-columns:1fr;
    gap:8px;
  }#pg-day-wise-pl .sr-adv-add,
#pg-sales-report .sr-adv-add,
#pg-notifications .sr-adv-add,
#pg-gstr3b .sr-adv-add,
#pg-gstr2b .sr-adv-add,
#pg-gstr1 .sr-adv-add,
#pg-customer-wise-pl .sr-adv-add,
#pg-bill-pl .sr-adv-add,
#pg-daybook .sr-adv-add,
#pg-stock-report .sr-adv-add,
#pg-manufacture-report .sr-adv-add,
#pg-product-report .sr-adv-add,
#pg-company-outstanding-report .sr-adv-add,
#pg-other-document-product-report .sr-adv-add,
#pg-other-document-report .sr-adv-add,
#pg-outward-payment-report .sr-adv-add,
#pg-other-income-report .sr-adv-add,
#pg-product-wise-pl .sr-adv-add,
#pg-daily-expenses-report .sr-adv-add,
#pg-inward-payment-report .sr-adv-add,
#pg-purchase-product-report .sr-adv-add,
#pg-sale-product-report .sr-adv-add,
#pg-sale-outstanding .sr-adv-add,
#pg-purchase-outstanding .sr-adv-add,
#pg-purchase-report .pr-adv-add{ height:42px; }#pg-day-wise-pl .sr-actions,
#pg-sales-report .sr-actions,
#pg-notifications .sr-actions,
#pg-gstr3b .sr-actions,
#pg-gstr2b .sr-actions,
#pg-gstr1 .sr-actions,
#pg-customer-wise-pl .sr-actions,
#pg-bill-pl .sr-actions,
#pg-daybook .sr-actions,
#pg-stock-report .sr-actions,
#pg-manufacture-report .sr-actions,
#pg-product-report .sr-actions,
#pg-company-outstanding-report .sr-actions,
#pg-other-document-product-report .sr-actions,
#pg-other-document-report .sr-actions,
#pg-outward-payment-report .sr-actions,
#pg-other-income-report .sr-actions,
#pg-product-wise-pl .sr-actions,
#pg-daily-expenses-report .sr-actions,
#pg-inward-payment-report .sr-actions,
#pg-purchase-product-report .sr-actions,
#pg-sale-product-report .sr-actions,
#pg-sale-outstanding .sr-actions,
#pg-purchase-outstanding .sr-actions,
#pg-purchase-report .pr-actions{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:8px;
  }#pg-day-wise-pl .sr-btn,
#pg-sales-report .sr-btn,
#pg-notifications .sr-btn,
#pg-gstr3b .sr-btn,
#pg-gstr2b .sr-btn,
#pg-gstr1 .sr-btn,
#pg-customer-wise-pl .sr-btn,
#pg-bill-pl .sr-btn,
#pg-daybook .sr-btn,
#pg-stock-report .sr-btn,
#pg-manufacture-report .sr-btn,
#pg-product-report .sr-btn,
#pg-company-outstanding-report .sr-btn,
#pg-other-document-product-report .sr-btn,
#pg-other-document-report .sr-btn,
#pg-outward-payment-report .sr-btn,
#pg-other-income-report .sr-btn,
#pg-product-wise-pl .sr-btn,
#pg-daily-expenses-report .sr-btn,
#pg-inward-payment-report .sr-btn,
#pg-purchase-product-report .sr-btn,
#pg-sale-product-report .sr-btn,
#pg-sale-outstanding .sr-btn,
#pg-purchase-outstanding .sr-btn,
#pg-purchase-report .pr-btn,
#pg-day-wise-pl .sr-save-cust,
#pg-sales-report .sr-save-cust,
#pg-notifications .sr-save-cust,
#pg-gstr3b .sr-save-cust,
#pg-gstr2b .sr-save-cust,
#pg-gstr1 .sr-save-cust,
#pg-customer-wise-pl .sr-save-cust,
#pg-bill-pl .sr-save-cust,
#pg-daybook .sr-save-cust,
#pg-stock-report .sr-save-cust,
#pg-manufacture-report .sr-save-cust,
#pg-product-report .sr-save-cust,
#pg-company-outstanding-report .sr-save-cust,
#pg-other-document-product-report .sr-save-cust,
#pg-other-document-report .sr-save-cust,
#pg-outward-payment-report .sr-save-cust,
#pg-other-income-report .sr-save-cust,
#pg-product-wise-pl .sr-save-cust,
#pg-daily-expenses-report .sr-save-cust,
#pg-inward-payment-report .sr-save-cust,
#pg-purchase-product-report .sr-save-cust,
#pg-sale-product-report .sr-save-cust,
#pg-sale-outstanding .sr-save-cust,
#pg-purchase-outstanding .sr-save-cust,
#pg-purchase-report .pr-save-cust{
    justify-content:center;
    width:100%;
    margin-right:0;
  }#pg-day-wise-pl .sr-flags,
#pg-sales-report .sr-flags,
#pg-notifications .sr-flags,
#pg-gstr3b .sr-flags,
#pg-gstr2b .sr-flags,
#pg-gstr1 .sr-flags,
#pg-customer-wise-pl .sr-flags,
#pg-bill-pl .sr-flags,
#pg-daybook .sr-flags,
#pg-stock-report .sr-flags,
#pg-manufacture-report .sr-flags,
#pg-product-report .sr-flags,
#pg-company-outstanding-report .sr-flags,
#pg-other-document-product-report .sr-flags,
#pg-other-document-report .sr-flags,
#pg-outward-payment-report .sr-flags,
#pg-other-income-report .sr-flags,
#pg-product-wise-pl .sr-flags,
#pg-daily-expenses-report .sr-flags,
#pg-inward-payment-report .sr-flags,
#pg-purchase-product-report .sr-flags,
#pg-sale-product-report .sr-flags,
#pg-sale-outstanding .sr-flags,
#pg-purchase-outstanding .sr-flags,
#pg-purchase-report .pr-flags{
    flex-direction:column;
    gap:8px;
  }/* v3.9.415-b: action bar is now inline (not fixed) — on mobile the
     buttons stack vertically so each is easy to tap. */
#pg-day-wise-pl .sr-action-bar,
#pg-sales-report .sr-action-bar,
#pg-notifications .sr-action-bar,
#pg-gstr3b .sr-action-bar,
#pg-gstr2b .sr-action-bar,
#pg-gstr1 .sr-action-bar,
#pg-customer-wise-pl .sr-action-bar,
#pg-bill-pl .sr-action-bar,
#pg-daybook .sr-action-bar,
#pg-stock-report .sr-action-bar,
#pg-manufacture-report .sr-action-bar,
#pg-product-report .sr-action-bar,
#pg-company-outstanding-report .sr-action-bar,
#pg-other-document-product-report .sr-action-bar,
#pg-other-document-report .sr-action-bar,
#pg-outward-payment-report .sr-action-bar,
#pg-other-income-report .sr-action-bar,
#pg-product-wise-pl .sr-action-bar,
#pg-daily-expenses-report .sr-action-bar,
#pg-inward-payment-report .sr-action-bar,
#pg-purchase-product-report .sr-action-bar,
#pg-sale-product-report .sr-action-bar,
#pg-sale-outstanding .sr-action-bar,
#pg-purchase-outstanding .sr-action-bar,
#pg-purchase-report .pr-action-bar{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }#pg-day-wise-pl .sr-action-btn,
#pg-sales-report .sr-action-btn,
#pg-notifications .sr-action-btn,
#pg-gstr3b .sr-action-btn,
#pg-gstr2b .sr-action-btn,
#pg-gstr1 .sr-action-btn,
#pg-customer-wise-pl .sr-action-btn,
#pg-bill-pl .sr-action-btn,
#pg-daybook .sr-action-btn,
#pg-stock-report .sr-action-btn,
#pg-manufacture-report .sr-action-btn,
#pg-product-report .sr-action-btn,
#pg-company-outstanding-report .sr-action-btn,
#pg-other-document-product-report .sr-action-btn,
#pg-other-document-report .sr-action-btn,
#pg-outward-payment-report .sr-action-btn,
#pg-other-income-report .sr-action-btn,
#pg-product-wise-pl .sr-action-btn,
#pg-daily-expenses-report .sr-action-btn,
#pg-inward-payment-report .sr-action-btn,
#pg-purchase-product-report .sr-action-btn,
#pg-sale-product-report .sr-action-btn,
#pg-sale-outstanding .sr-action-btn,
#pg-purchase-outstanding .sr-action-btn,
#pg-purchase-report .pr-action-btn{
    justify-content:center;
    width:100%;
    padding:11px 14px;
    font-size:13px;
  }/* Header pill buttons hidden on mobile since duplicates live inside the
     card body under .sr-mobile-btns — keep only the collapse toggle. */
#pg-day-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-sales-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-notifications .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr3b .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr2b .sr-card-hdr-actions .sr-hdr-btn,
#pg-gstr1 .sr-card-hdr-actions .sr-hdr-btn,
#pg-customer-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-bill-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-daybook .sr-card-hdr-actions .sr-hdr-btn,
#pg-stock-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-manufacture-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-company-outstanding-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-document-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-document-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-outward-payment-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-other-income-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-product-wise-pl .sr-card-hdr-actions .sr-hdr-btn,
#pg-daily-expenses-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-inward-payment-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-sale-product-report .sr-card-hdr-actions .sr-hdr-btn,
#pg-sale-outstanding .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-outstanding .sr-card-hdr-actions .sr-hdr-btn,
#pg-purchase-report .pr-card-hdr-actions .pr-hdr-btn{ display:none; }
}
/* ══════════════════ END v3.9.415 Sales Report redesign ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.420 — Letters section redesign
   ─────────────────────────────────────────────────────────────────
   Matches the Go-GST-Bill reference:
     • White header card with title on the left + Search / Add New
       buttons on the right (list page).
     • Collapsible search row that toggles on the Search button.
     • Empty-state card with folder-face illustration and Add Letter.
     • Full-page "Create Letter" form: two info cards on top, six
       template tiles below, and a body editor that appears once a
       template is picked.
════════════════════════════════════════════════════════════════════ */

/* ── List page header ── */
.lt-hdr-card{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:14px 18px;
  margin:14px 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lt-hdr-title{
  font-size:15px;
  font-weight:600;
  color:var(--text, #111);
}
.lt-hdr-btns{
  display:flex;
  gap:10px;
  align-items:center;
}
.lt-btn-search,
.lt-btn-showall{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--surf2, #f3f4f6);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  font-size:13px; font-weight:500;
  color:var(--text, #111);
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.lt-btn-search:hover,
.lt-btn-showall:hover{ background:var(--surf3, #e5e7eb); }
.lt-btn-add,
.lt-btn-search-go,
.lt-btn-add-lg{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px;
  background:#00BA8B;
  border:1px solid #00BA8B;
  border-radius:8px;
  font-size:13px; font-weight:600;
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  transition:background .12s;
}
.lt-btn-add:hover,
.lt-btn-search-go:hover,
.lt-btn-add-lg:hover{ background:#00a67c; border-color:#00a67c; }
.lt-btn-add-lg{
  padding:9px 22px;
  font-size:13.5px;
  border-radius:6px;
}

/* ── Search filter card ── */
.lt-search-card{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:16px 18px;
  margin:0 0 12px;
}
.lt-search-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.lt-search-grid .fg{ margin:0; }
.lt-search-grid label{
  display:block;
  font-size:12px;
  color:var(--text, #111);
  font-weight:500;
  margin-bottom:6px;
}
.lt-search-grid input,
.lt-search-grid select{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  font-size:13px;
  color:var(--text, #111);
  background:var(--surf, #fff);
  font-family:inherit;
}
.lt-search-grid input:focus,
.lt-search-grid select:focus{
  outline:none;
  border-color:var(--brand, #2563EB);
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
.lt-search-btns{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}

/* ── Body card (empty state + table wrap) ── */
.lt-body-card{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:24px;
  min-height:340px;
}
.lt-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:70px 24px 60px;
  gap:18px;
}
.lt-empty-illu{ opacity:.85; }
.lt-empty-msg{
  color:#9CA3AF;
  font-size:16px;
  margin:6px 0 2px;
  font-weight:400;
}
.lt-tbl-wrap{
  overflow-x:auto;
}

/* ── Create Letter page ── */
#pg-create-letter{
  padding-bottom:32px;
}
.lt-cl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:14px 0;
}
.lt-cl-card{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  overflow:hidden;
}
.lt-cl-card-hdr{
  padding:12px 18px;
  border-bottom:1px solid var(--surf3, #f3f4f6);
}
.lt-cl-card-title{
  font-size:14px;
  font-weight:600;
  color:var(--text, #111);
}
.lt-cl-card-body{
  padding:18px;
}
.lt-cl-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.lt-cl-row:last-child{ margin-bottom:0; }
.lt-cl-row-2col{
  flex-wrap:wrap;
}
.lt-cl-row-body{
  align-items:flex-start;
}
.lt-cl-lbl{
  min-width:110px;
  font-size:13px;
  color:var(--text, #111);
  font-weight:500;
  flex-shrink:0;
}
.lt-cl-req{ color:#EF4444; }
.lt-cl-inp{
  flex:1;
  padding:8px 12px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  font-size:13px;
  color:var(--text, #111);
  background:var(--surf, #fff);
  font-family:inherit;
  min-width:0;
}
.lt-cl-inp:focus{
  outline:none;
  border-color:var(--brand, #2563EB);
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
.lt-cl-num-wrap{
  display:flex;
  gap:6px;
  flex:1;
  min-width:0;
}
.lt-cl-inp-pre,
.lt-cl-inp-post{
  flex:1 1 30%;
  background:var(--surf2, #f9fafb);
  color:var(--muted, #6b7280);
}
.lt-cl-inp-num{
  flex:1 1 40%;
  text-align:center;
  font-weight:600;
}
.lt-cl-inp-date{
  flex:1;
}
.lt-cl-inp-body{
  resize:vertical;
  min-height:360px;
  font-family:inherit;
  line-height:1.55;
}

/* ── Template picker ── */
.lt-tpl-card{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:24px;
  margin-top:0;
}
.lt-tpl-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:16px;
}
.lt-tpl-tile{
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-family:inherit;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.lt-tpl-tile:focus-visible .lt-tpl-thumb{
  outline:2px solid #00BA8B;
  outline-offset:2px;
}
.lt-tpl-thumb{
  width:100%;
  aspect-ratio:3/4;
  background:var(--surf2, #f9fafb);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
  position:relative;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.lt-tpl-tile:hover .lt-tpl-thumb,
.lt-tpl-tile.is-active .lt-tpl-thumb{
  border-color:#00BA8B;
  box-shadow:0 8px 24px rgba(0,186,139,.18), 0 0 0 2px rgba(0,186,139,.14);
  transform:translateY(-2px);
}
.lt-tpl-thumb-blank{ background:#F3F4F6; }

/* v3.9.441 — Real image thumbnails uploaded via WP media library.
   Fills the tile completely (object-fit:cover so no letterboxing),
   sits below the overlay + name label. */
.lt-tpl-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#fff;
}
.lt-tpl-plus{
  font-size:36px;
  color:#9CA3AF;
  font-weight:300;
  line-height:1;
}
.lt-tpl-name{
  font-size:13.5px;
  color:var(--text, #111);
  text-align:center;
  font-weight:500;
  letter-spacing:.1px;
  transition:color .12s;
}
.lt-tpl-tile:hover .lt-tpl-name{ color:#059669; }
.lt-tpl-tile.is-active .lt-tpl-name{
  color:#00BA8B;
  font-weight:600;
}
/* Mock document previews (CSS-drawn lines to hint at the template's look) */
.lt-tpl-mock{
  width:80%; height:80%;
  background:#fff;
  border:1px solid #E5E7EB;
  padding:6px 4px;
  position:relative;
  overflow:hidden;
}
.lt-tpl-mock::before,
.lt-tpl-mock::after{
  content:"";
  display:block;
  height:1.5px;
  background:#D1D5DB;
  margin-bottom:2px;
  border-radius:1px;
}
.lt-tpl-mock::before{ width:60%; height:2px; margin-bottom:4px; background:#9CA3AF; }
.lt-tpl-mock-loi{ background:#fff; }
.lt-tpl-mock-jw::after{ height:20px; background:linear-gradient(#f3f4f6 1px, transparent 1px) 0 0 / 100% 4px; }
.lt-tpl-mock-noc{ background:#fff; }
.lt-tpl-mock-qt::after{ height:14px; background:repeating-linear-gradient(#F3F4F6 0 3px, transparent 3px 5px); }
.lt-tpl-mock-sales{ background:#fff; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.423 — Internship Letter mock + hover overlay (Preview / Select)
   pattern applied to every template tile. Clicking the thumbnail still
   picks the template as a shortcut; the overlay buttons are the
   explicit path — Preview opens a full-letter modal, Select commits.
══════════════════════════════════════════════════════════════════════ */

/* v3.9.426 — Logo uploader UI for the Internship letter form.
   Left: preview box (56×56) that shows either the SVG placeholder
   or the uploaded logo. Right: Upload / Change / Remove buttons
   + a hint line. Wraps neatly on mobile. */
.lt-logo-uploader{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:6px 0;
}
.lt-logo-preview{
  width:64px;
  height:64px;
  flex-shrink:0;
  background:var(--surf2, #f9fafb);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  overflow:hidden;
}
.lt-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.lt-logo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex:1;
  min-width:0;
}
.lt-logo-hint{
  flex:1 0 100%;
  font-size:11.5px;
  color:var(--muted, #6b7280);
  line-height:1.4;
  margin-top:2px;
}
@media (max-width: 640px){
  .lt-logo-uploader{ flex-wrap:wrap; }
}

/* Internship Letter mini-preview — a professional navy+gold letter
   thumbnail matching the reference design (navy header with logo &
   org name & gold triangular accent, gold-flourished centered title,
   To/CC/Subject stubs, body lines, gold WELL DONE! seal, navy footer).
   All CSS-drawn so it renders instantly at any thumbnail size. */
.lt-tpl-mock-internship{
  padding:0;
  display:flex; flex-direction:column;
  background:#fff;
  overflow:hidden;
}
.lt-tpl-mock-internship::before,
.lt-tpl-mock-internship::after{ display:none; } /* override generic mock lines */

/* Navy header with gold accent triangle */
.inm-hdr{
  position:relative;
  background:#0E2A5C;
  padding:6px 6px 6px 5px;
  display:flex; align-items:center; gap:4px;
  overflow:hidden;
  flex-shrink:0;
}
.inm-hdr-gold{
  position:absolute;
  top:0; right:-4px;
  width:32%; height:100%;
  background:
    linear-gradient(115deg, transparent 0 40%, #C9A96E 40% 55%, transparent 55%),
    linear-gradient(155deg, transparent 0 55%, #C9A96E 55% 70%, transparent 70%);
  opacity:.9;
  pointer-events:none;
}
.inm-hdr-logo{
  width:12px; height:12px;
  background:#C9A96E;
  border-radius:1.5px;
  flex-shrink:0;
  position:relative; z-index:1;
}
.inm-hdr-org{
  display:flex; flex-direction:column; gap:1px;
  flex:1; min-width:0;
  position:relative; z-index:1;
}
.inm-hdr-name{
  height:2.5px; width:65%;
  background:#fff; border-radius:1px;
}
.inm-hdr-tag{
  height:1px; width:45%;
  background:#C9A96E; border-radius:1px;
}

/* Title with gold flourishes */
.inm-title-wrap{
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:5px 4px 2px;
}
.inm-flourish{
  width:6px; height:1.5px;
  background:#C9A96E;
  border-radius:1px;
}
.inm-title{
  height:2.5px; width:55%;
  background:#0E2A5C; border-radius:1px;
}

/* Meta stubs (To, CC, Subject) */
.inm-meta{
  padding:2px 8px 3px;
  display:flex; flex-direction:column; gap:1.5px;
}
.inm-meta-row{
  height:1.5px; width:40%;
  background:#9CA3AF; border-radius:1px;
}
.inm-meta-subj{ width:55%; background:#374151; }

/* Body paragraph lines */
.inm-body{
  padding:1px 8px 3px;
  display:flex; flex-direction:column; gap:1.5px;
  flex:1;
}
.inm-line{
  height:1.2px;
  background:#D1D5DB;
  border-radius:1px;
}
.inm-line-100{ width:100%; }
.inm-line-95 { width:95%; }
.inm-line-90 { width:90%; }
.inm-line-85 { width:85%; }

/* Signature + gold seal */
.inm-sig-wrap{
  padding:2px 8px 4px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:6px;
}
.inm-sig{
  display:flex; flex-direction:column; gap:1.5px;
  flex:1;
}
.inm-sig-line{
  height:1.2px;
  background:#6B7280;
  border-radius:1px;
}
.inm-sig-lead{ width:40%; background:#374151; margin-bottom:1.5px; }
.inm-sig-w60{ width:60%; }
.inm-sig-w70{ width:70%; }
.inm-sig-w40{ width:40%; }
.inm-seal{
  width:22px; height:22px;
  border-radius:50%;
  background:#0E2A5C;
  border:1.5px solid #C9A96E;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
}
.inm-seal-inner{
  width:14px; height:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
}
.inm-seal-star{
  width:0; height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-bottom:4px solid #F1B434;
  filter:drop-shadow(0 -1px 0 #F1B434);
}
.inm-seal-txt{
  height:1.5px; width:9px;
  background:#C9A96E; border-radius:1px;
}

/* Navy footer bar */
.inm-footer{
  background:#0E2A5C;
  padding:3px 8px;
  display:flex; align-items:center; justify-content:space-around;
  gap:4px;
  flex-shrink:0;
}
.inm-footer-dot{
  height:1.5px; width:22%;
  background:#C9A96E; border-radius:1px;
}

/* Hover overlay: dimmed background + two centred buttons. Hidden by
   default; revealed on tile hover. */
.lt-tpl-overlay{
  position:absolute; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
  border-radius:5px;
}
.lt-tpl-tile:hover .lt-tpl-overlay,
.lt-tpl-tile:focus-within .lt-tpl-overlay{
  opacity:1; pointer-events:auto;
}
.lt-tpl-overlay-btn{
  display:inline-flex; align-items:center; gap:6px;
  min-width:96px; justify-content:center;
  padding:8px 14px;
  border:none; border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer;
  transition:transform .1s, filter .12s, background .12s;
}
.lt-tpl-overlay-btn:hover{ filter:brightness(.95); }
.lt-tpl-overlay-btn:active{ transform:translateY(1px); }
.lt-tpl-overlay-btn.preview{ background:#ffffff; color:#111; }
.lt-tpl-overlay-btn.select { background:#00BA8B; color:#fff; }
.lt-tpl-overlay-btn.select:hover{ background:#059669; }

/* Preview modal — a paper-like letter card inside the modal so the user
   sees exactly how the letter will look before committing. */
.lt-prev-title{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.lt-prev-x{
  border:none; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color:var(--muted, #6B7280);
  padding:0 4px; border-radius:4px;
}
.lt-prev-x:hover{ background:var(--surf2, #f3f4f6); color:var(--text, #111); }
.lt-prev-scroll{
  max-height:60vh;
  overflow:auto;
  background:#f3f4f6;
  padding:20px;
  border-radius:6px;
  margin:12px 0;
}
.lt-prev-paper{
  background:#fff;
  max-width:640px;
  margin:0 auto;
  padding:40px 44px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border-radius:2px;
  font-family:Georgia,'Times New Roman',serif;
  color:#111;
  font-size:13px;
  line-height:1.6;
}
.lt-prev-letterhead{
  border-bottom:2px solid #00BA8B;
  padding-bottom:10px;
  margin-bottom:16px;
}
.lt-prev-biz{
  font-size:18px; font-weight:700; color:#111;
  letter-spacing:.2px;
}
.lt-prev-biz-sub{
  font-size:11px; color:#6b7280; margin-top:2px;
}
.lt-prev-date{
  text-align:right;
  font-size:12px; color:#374151;
  margin-bottom:14px;
}
.lt-prev-body{
  white-space:pre-wrap;
  word-wrap:break-word;
  font-family:inherit;
  font-size:13px;
  line-height:1.6;
  margin:0;
  color:#111;
}
/* v3.9.440 — HTML-body variant. Used for Quotation and any other
   template whose body function returns HTML (tables, lists, headings).
   We drop the pre-wrap so the browser renders the markup natively,
   and let inline styles on tables/cells (set by the template) take
   care of the visual style. */
.lt-prev-body-html{
  font-family:inherit;
  font-size:13px;
  line-height:1.55;
  color:#111;
}
.lt-prev-body-html p{ margin:0 0 10px; }
.lt-prev-body-html table{ border-collapse:collapse; margin:8px 0 14px; }
.lt-prev-body-html ul,
.lt-prev-body-html ol{ margin:6px 0 12px; padding-left:24px; }
.lt-prev-body-html li{ margin-bottom:4px; }
.lt-prev-body-html h1,
.lt-prev-body-html h2,
.lt-prev-body-html h3,
.lt-prev-body-html h4{ margin:14px 0 8px; font-weight:700; }
.lt-prev-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding-top:8px;
  border-top:1px solid var(--bdr, #e5e7eb);
}

html[data-theme="dark"] .lt-prev-scroll{ background:#0f172a; }
html[data-theme="dark"] .lt-prev-paper{ background:#1e293b; color:#e2e8f0; }
html[data-theme="dark"] .lt-prev-biz{ color:#f1f5f9; }
html[data-theme="dark"] .lt-prev-body{ color:#e2e8f0; }
html[data-theme="dark"] .lt-prev-body-html{ color:#e2e8f0; }

/* ── Responsive ── */
@media (max-width: 1200px){
  .lt-tpl-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width: 900px){
  .lt-search-grid{ grid-template-columns:repeat(2, 1fr); }
  .lt-tpl-grid{ grid-template-columns:repeat(3, 1fr); }
  .lt-cl-grid{ grid-template-columns:1fr; }
  .lt-cl-row-2col .lt-cl-lbl{ min-width:100%; margin-top:12px; }
}
@media (max-width: 600px){
  .lt-hdr-card{ flex-direction:column; align-items:stretch; }
  .lt-hdr-btns{ justify-content:flex-end; }
  .lt-search-grid{ grid-template-columns:1fr; }
  .lt-tpl-grid{ grid-template-columns:repeat(2, 1fr); }
  .lt-cl-lbl{ min-width:100%; }
  .lt-cl-row{ flex-direction:column; align-items:stretch; }
  .lt-cl-num-wrap{ flex-wrap:wrap; }
  /* On touch devices there's no hover — always show the overlay on
     small screens so Preview / Select are reachable with a tap. */
  .lt-tpl-overlay{ opacity:1; pointer-events:auto; background:rgba(15,23,42,.35); }
  .lt-tpl-overlay-btn{ padding:6px 10px; font-size:11px; min-width:78px; }
}
/* ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.422 — Letters LIST table (once at least one letter exists).
   Matches the Go-GST-Bill reference: bulk-select checkboxes on the
   left, orange Letters No, stacked "View / Print" + "Edit ▾" action
   pair with a small dropdown for Delete / Duplicate, column-picker
   button in the very top-right of the table header.
════════════════════════════════════════════════════════════════════ */

.lt-list-tbl{
  width:100%;
  border-collapse:collapse;
  background:var(--surf, #fff);
  table-layout:auto;
}
.lt-list-tbl thead th{
  padding:14px 16px;
  background:var(--surf, #fff);
  color:var(--text, #111);
  font-size:13px;
  font-weight:600;
  text-align:left;
  border-bottom:1px solid var(--surf3, #f3f4f6);
  white-space:nowrap;
  vertical-align:middle;
}
.lt-list-tbl tbody td{
  padding:16px;
  border-bottom:1px solid var(--surf3, #f3f4f6);
  vertical-align:middle;
  font-size:13.5px;
  color:var(--text, #111);
}
.lt-list-tbl tbody tr:last-child td{ border-bottom:none; }
.lt-list-tbl tbody tr:hover{ background:var(--surf2, #f9fafb); }

/* Checkbox column — narrow, centered */
.lt-th-cb,
.lt-td-cb{
  width:36px;
  text-align:center;
  padding-right:0;
}
.lt-list-tbl input[type="checkbox"]{
  width:16px; height:16px;
  cursor:pointer;
  accent-color:#00BA8B;
}

/* Letters No — orange link-style (matches image) */
.lt-th-no{ width:180px; }
.lt-no-link{
  color:#F97316;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  background:none;
  border:none;
  font-family:inherit;
  font-size:13.5px;
  padding:0;
}
.lt-no-link:hover{ text-decoration:underline; }
.lt-th-caret{
  color:var(--muted, #6b7280);
  font-size:11px;
  margin-left:2px;
}

/* Date column — right-margin so it sits comfortably before Action */
.lt-th-date{ width:140px; }

/* Action column — stacked two-row cluster */
.lt-th-act{
  width:180px;
  text-align:right;
}
.lt-td-act{
  text-align:right;
  padding:12px 16px;
}
.lt-act-stack{
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  min-width:170px;
}
.lt-btn-vp,
.lt-btn-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 14px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:12.5px;
  color:var(--text, #111);
  font-family:inherit;
  font-weight:500;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
}
.lt-btn-vp:hover,
.lt-btn-edit:hover{
  background:var(--surf2, #f3f4f6);
  border-color:var(--muted, #9ca3af);
}
.lt-btn-edit-wrap{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  overflow:hidden;
  background:var(--surf, #fff);
}
.lt-btn-edit-wrap .lt-btn-edit{
  border:none;
  border-radius:0;
  flex:1;
  padding:7px 14px;
}
.lt-btn-edit-caret{
  border:none;
  border-left:1px solid var(--bdr, #e5e7eb);
  background:var(--surf, #fff);
  padding:7px 10px;
  cursor:pointer;
  color:var(--muted, #6b7280);
  font-size:11px;
  transition:background .12s;
}
.lt-btn-edit-caret:hover{ background:var(--surf2, #f3f4f6); }

/* Row menu dropdown (Delete / Duplicate) */
.lt-row-menu{
  position:absolute;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.12);
  min-width:170px;
  padding:6px;
  z-index:60;
  right:12px;
  margin-top:2px;
}
.lt-row-menu-item{
  padding:9px 14px;
  font-size:13px;
  color:var(--text, #111);
  cursor:pointer;
  border-radius:5px;
  transition:background .1s;
}
.lt-row-menu-item:hover{
  background:var(--surf2, #f3f4f6);
}
.lt-row-menu-item.d:hover{
  background:#FEF2F2;
  color:#DC2626;
}

/* Column-picker button in the very top-right of the header */
.lt-th-cols{
  width:44px;
  text-align:right;
  padding-right:12px;
}
.lt-cols-btn{
  background:transparent;
  border:none;
  padding:6px;
  cursor:pointer;
  color:var(--muted, #6b7280);
  border-radius:4px;
  transition:background .1s;
}
.lt-cols-btn:hover{
  background:var(--surf2, #f3f4f6);
  color:var(--text, #111);
}

/* Row-position relative so the absolute-positioned menu anchors here */
.lt-list-tbl tbody tr{ position:relative; }

/* Mobile — collapse action cluster to compact spacing */
@media (max-width:640px){
  .lt-list-tbl thead th,
  .lt-list-tbl tbody td{ padding:10px 8px; }
  .lt-th-no,
  .lt-th-date,
  .lt-th-act{ width:auto; }
  .lt-act-stack{ min-width:130px; }
  .lt-btn-vp,
  .lt-btn-edit{ font-size:12px; padding:6px 10px; }
}
/* ══════════════════ END v3.9.422 letters list table ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.428 — Job Work form + Digital Signature
   ─────────────────────────────────────────────────────────────────
   Two new pieces on the Create Letter page:
     1. A structured Job Work FORM that appears in place of the plain
        Body textarea when the Job Work template is selected. Data is
        serialised into a JSON marker embedded in the letter body; the
        print pipeline re-hydrates it into a polished HTML table
        (deliberately cleaner than the reference: alternating rows,
        proper header band, brand-tinted signature area).
     2. A per-letter digital-signature picker that lets the user:
          • use the business-level signature saved in Settings, OR
          • upload a fresh image just for this letter.
        The image is stored inline as a data-URL marker so no DB
        schema change is needed.
════════════════════════════════════════════════════════════════════ */

/* ─── Digital signature uploader ─── */
.lt-sig-uploader{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
}
.lt-sig-preview{
  width:110px; height:52px;
  border:1px dashed var(--bdr, #d1d5db);
  border-radius:6px;
  background:#FAFAFB;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.lt-sig-preview img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  display:block;
}
.lt-sig-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.lt-sig-hint{
  width:100%;
  font-size:11.5px;
  color:var(--muted, #6b7280);
  margin-top:2px;
}

/* ─── Job Work form (in-page) ─── */
.lt-jw-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px 14px;
  margin-bottom:16px;
}
.lt-jw-fld label{
  display:block;
  font-size:12px;
  color:var(--text, #111);
  font-weight:500;
  margin-bottom:4px;
}
.lt-jw-fld input{
  width:100%;
  padding:7px 10px;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:5px;
  font-size:13px;
  color:var(--text, #111);
  background:var(--surf, #fff);
  font-family:inherit;
  box-sizing:border-box;
}
.lt-jw-fld input:focus{
  outline:none;
  border-color:#00BA8B;
  box-shadow:0 0 0 2px rgba(0,186,139,.15);
}
.lt-jw-tbl-wrap{
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  overflow:hidden;
  background:var(--surf, #fff);
}
.lt-jw-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.lt-jw-tbl thead th{
  padding:9px 12px;
  background:#F3F4F6;
  color:var(--text, #111);
  font-weight:600;
  text-align:left;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  font-size:12.5px;
}
.lt-jw-tbl tbody td,
.lt-jw-tbl tfoot td{
  padding:0;
  border-bottom:1px solid var(--surf3, #f3f4f6);
}
.lt-jw-tbl tbody tr:last-child td{ border-bottom:none; }
.lt-jw-col-lbl{
  width:34%;
  padding:9px 12px !important;
  color:var(--text, #111);
  font-size:12.5px;
  background:#FAFAFB;
  border-right:1px solid var(--surf3, #f3f4f6);
}
.lt-jw-col-num input{
  width:100%;
  padding:9px 12px;
  border:none;
  background:transparent;
  font-size:13px;
  color:var(--text, #111);
  font-family:inherit;
  font-feature-settings:"tnum";
  box-sizing:border-box;
  outline:none;
}
.lt-jw-col-num input:focus{
  background:#F0FDF4;
}
.lt-jw-tbl .lt-jw-total-row{
  background:#F9FAFB;
}
.lt-jw-tbl .lt-jw-total-row .lt-jw-col-lbl{
  font-weight:700;
  background:#F3F4F6;
}
.lt-jw-tbl .lt-jw-total-row input{
  font-weight:700;
  color:#111;
}
.lt-jw-tip{
  margin-top:10px;
  font-size:12px;
  color:var(--muted, #6b7280);
  font-style:italic;
}

@media (max-width:800px){
  .lt-jw-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .lt-jw-grid{ grid-template-columns:1fr; }
  .lt-sig-uploader{ flex-wrap:wrap; }
  .lt-jw-col-lbl{ width:42%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Job Work PRINT styling (inside the print iframe). These classes are
   applied to the printed page body via the print HTML string.
════════════════════════════════════════════════════════════════════ */
.prn-jw-band{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid #111;
}
.prn-jw-band .prn-jw-band-l{ font-size:20px; font-weight:800; letter-spacing:.5px; color:#111; }
.prn-jw-band .prn-jw-band-r{ font-size:13px; color:#111; }
.prn-jw-meta{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px 20px;
  margin:0 0 14px;
  font-size:13px;
}
.prn-jw-meta .k{ color:#475569; margin-right:6px; font-weight:500; }
.prn-jw-meta .v{ color:#111; font-weight:600; }
.prn-jw-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  margin:8px 0;
  border:1px solid #111;
}
.prn-jw-tbl thead th{
  background:#E5E7EB;
  padding:8px 10px;
  border:1px solid #111;
  text-align:left;
  font-weight:700;
  font-size:12.5px;
}
.prn-jw-tbl thead th.num{ text-align:right; }
.prn-jw-tbl tbody td{
  padding:7px 10px;
  border:1px solid #111;
  vertical-align:middle;
}
.prn-jw-tbl tbody tr:nth-child(even){ background:#FAFAFB; }
.prn-jw-tbl tbody td.lbl{ font-weight:600; color:#111; background:#F9FAFB; width:32%; }
.prn-jw-tbl tbody td.num{ text-align:right; font-feature-settings:"tnum"; }
.prn-jw-tbl tfoot td{
  padding:10px;
  border:1px solid #111;
  background:#F3F4F6;
  font-weight:800;
}
.prn-jw-tbl tfoot td.num{ text-align:right; font-feature-settings:"tnum"; }
.prn-jw-sig-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:36px;
  gap:24px;
}
.prn-jw-sig-block{ text-align:right; min-width:200px; }
.prn-jw-sig-img{ max-height:52px; margin-bottom:4px; }
.prn-jw-sig-line{ border-top:1px solid #111; padding-top:4px; font-size:12px; font-weight:600; }
/* ══════════════════ END v3.9.428 job work + signature ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.429 — Dynamic Job Work table + always-visible logo upload
   ─────────────────────────────────────────────────────────────────
   The JW table is now fully dynamic — users can add/remove rows and
   columns, and rename any label. Each row's remove-X sits inside the
   label cell on hover; each column's remove-X sits in the header.
════════════════════════════════════════════════════════════════════ */

/* Toolbar under the table (Add Row / Add Column / Reset) */
.lt-jw-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* Editable label / header cells — click to edit inline */
.lt-jw-tbl .lt-jw-lbl-edit,
.lt-jw-tbl .lt-jw-th-edit{
  background:transparent;
  border:1px dashed transparent;
  width:100%;
  padding:8px 10px;
  font-size:12.5px;
  color:var(--text, #111);
  font-family:inherit;
  outline:none;
  box-sizing:border-box;
}
.lt-jw-tbl .lt-jw-lbl-edit{ font-weight:600; }
.lt-jw-tbl .lt-jw-th-edit{ font-weight:700; }
.lt-jw-tbl .lt-jw-lbl-edit:hover,
.lt-jw-tbl .lt-jw-th-edit:hover{
  border-color:var(--bdr, #d1d5db);
}
.lt-jw-tbl .lt-jw-lbl-edit:focus,
.lt-jw-tbl .lt-jw-th-edit:focus{
  border-color:#00BA8B;
  background:#F0FDF4;
}

/* Remove-X buttons — hidden by default, appear on row/column hover */
.lt-jw-tbl .lt-jw-x{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--muted, #9ca3af);
  cursor:pointer;
  font-size:11px;
  line-height:1;
  padding:0;
  margin-left:6px;
  vertical-align:middle;
  opacity:0;
  transition:opacity .12s, background .12s, color .12s;
}
.lt-jw-tbl tr:hover .lt-jw-x,
.lt-jw-tbl th:hover .lt-jw-x{ opacity:1; }
.lt-jw-tbl .lt-jw-x:hover{
  background:#FEE2E2;
  color:#DC2626;
}

/* Row-label + header cells accommodate the X button on the right side */
.lt-jw-tbl .lt-jw-cell-lbl,
.lt-jw-tbl .lt-jw-cell-th{
  display:flex;
  align-items:center;
  gap:2px;
  padding-right:6px !important;
}
.lt-jw-tbl .lt-jw-cell-lbl .lt-jw-lbl-edit,
.lt-jw-tbl .lt-jw-cell-th .lt-jw-th-edit{
  flex:1; min-width:0;
}

/* Total row keeps a distinct look */
.lt-jw-tbl .lt-jw-total-row td{
  background:#F9FAFB;
  padding:9px 12px !important;
  font-weight:700;
}
.lt-jw-tbl .lt-jw-total-row td.lt-jw-col-num{
  text-align:right;
  font-feature-settings:"tnum";
}
/* ══════════════════ END v3.9.429 dynamic JW table ══════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.433 — Rich-text letter body editor + cell context menu
   ─────────────────────────────────────────────────────────────────
   Turns the letter Body from a plain textarea into a contenteditable
   div. The Quotation template ships with a real HTML table users can
   edit in place; clicking any cell pops a context menu with the 9
   modify actions (Insert Row/Column, Remove Row/Column, Cell Color,
   Align, Header Column, Merge Cells).
════════════════════════════════════════════════════════════════════ */
.lt-body-wrap{
  flex:1;
  min-width:0;
  border:1px solid var(--bdr, #d1d5db);
  border-radius:6px;
  overflow:hidden;
  background:var(--surf, #fff);
}
.lt-body-wrap:focus-within{
  border-color:#00BA8B;
  box-shadow:0 0 0 2px rgba(0,186,139,.15);
}
.lt-editor-toolbar{
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px 8px;
  border-bottom:1px solid var(--surf3, #f3f4f6);
  background:var(--surf2, #f9fafb);
  flex-wrap:wrap;
}
.lt-etb-btn{
  background:transparent;
  border:1px solid transparent;
  padding:5px 9px;
  min-width:28px;
  height:28px;
  font-size:13px;
  color:var(--text, #111);
  cursor:pointer;
  border-radius:4px;
  font-family:inherit;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .1s;
}
.lt-etb-btn:hover{ background:#fff; border-color:var(--bdr, #e5e7eb); }
.lt-etb-btn:active{ background:var(--surf3, #f3f4f6); }
.lt-etb-sep{
  display:inline-block;
  width:1px; height:18px;
  background:var(--bdr, #d1d5db);
  margin:0 6px;
}
.lt-etb-hint{
  margin-left:auto;
  font-size:11.5px;
  color:var(--muted, #9ca3af);
  padding-right:6px;
  font-style:italic;
}

.lt-editor{
  min-height:360px;
  padding:14px 16px;
  outline:none;
  overflow:auto;
  font-size:13px;
  line-height:1.6;
  color:var(--text, #111);
  background:var(--surf, #fff);
  font-family:inherit;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.lt-editor:empty:before{
  content:attr(data-placeholder);
  color:var(--muted, #9ca3af);
  pointer-events:none;
}
.lt-editor p{ margin:0 0 10px; }
.lt-editor h1, .lt-editor h2, .lt-editor h3, .lt-editor h4{
  margin:14px 0 8px;
  font-weight:700;
}
.lt-editor ul, .lt-editor ol{
  margin:6px 0 12px;
  padding-left:24px;
}
.lt-editor li{ margin-bottom:3px; }

/* Editable tables — visible borders + hover to hint edit-ability */
.lt-editor table{
  border-collapse:collapse;
  margin:10px 0;
  width:100%;
  font-size:13px;
}
.lt-editor table td,
.lt-editor table th{
  border:1px solid #9CA3AF;
  padding:7px 10px;
  vertical-align:middle;
  min-width:44px;
  min-height:22px;
  position:relative;
}
.lt-editor table th{
  background:#F3F4F6;
  font-weight:700;
  text-align:center;
}
.lt-editor table td:hover,
.lt-editor table th:hover{ background:rgba(0,186,139,.06); }
.lt-editor table td.lt-cell-active,
.lt-editor table th.lt-cell-active{
  background:rgba(0,186,139,.14) !important;
  outline:2px solid #00BA8B;
  outline-offset:-2px;
}

/* ─── Cell context menu ─── */
.lt-cell-menu{
  position:absolute;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  box-shadow:0 12px 32px rgba(15,23,42,.14);
  padding:6px;
  min-width:210px;
  z-index:1000;
  font-size:13px;
}
.lt-cm-item{
  padding:9px 14px;
  cursor:pointer;
  border-radius:5px;
  color:var(--text, #111);
  position:relative;
  transition:background .1s;
}
.lt-cm-item:hover{ background:var(--surf2, #f3f4f6); }
.lt-cm-item.d:hover{ background:#FEF2F2; color:#DC2626; }
.lt-cm-item.disabled{
  color:var(--muted, #9ca3af);
  cursor:not-allowed;
  opacity:.6;
}
.lt-cm-item.disabled:hover{ background:transparent; color:var(--muted, #9ca3af); }
.lt-cm-item .lt-cm-sub{
  display:none;
  position:absolute;
  left:calc(100% + 6px);
  top:-6px;
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  box-shadow:0 12px 32px rgba(15,23,42,.14);
  padding:8px;
  z-index:1001;
}
.lt-cm-item.is-open > .lt-cm-sub{ display:block; }
.lt-cm-swatches{
  display:grid;
  grid-template-columns:repeat(6, 22px);
  gap:6px;
  width:auto;
}
.lt-cm-swatch{
  width:22px;
  height:22px;
  border-radius:4px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.08);
  transition:transform .1s;
}
.lt-cm-swatch:hover{ transform:scale(1.12); }
.lt-cm-halign,
.lt-cm-valign{
  display:flex;
  gap:4px;
}
.lt-cm-align-btn{
  background:var(--surf, #fff);
  border:1px solid var(--bdr, #e5e7eb);
  padding:6px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  color:var(--text, #111);
  font-family:inherit;
}
.lt-cm-align-btn:hover{ background:var(--surf2, #f3f4f6); }
/* Menu placement wrapper — position:relative on the parent so absolute
   positioning of the menu is relative to the create-letter page. */
#pg-create-letter{ position:relative; }
/* ══════════════════ END v3.9.433 rich body editor ══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.446 — Salary module styles
   ──────────────────────────────────────────────────────────────────────
   Employees + Payroll tabs. Reuses the plugin's shared card/table/button
   look and only adds Salary-specific bits under .sal-* selectors.
════════════════════════════════════════════════════════════════════════ */

/* Topbar with title + tab switch */
.sal-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 4px 16px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  margin-bottom:16px;
}
.sal-topbar-title{
  display:flex; align-items:center; gap:10px;
  font-size:19px; font-weight:700; color:var(--text, #111);
}
.sal-topbar-title svg{ color:#4f46e5; }
.sal-tabs{
  display:inline-flex;
  background:var(--surf2, #f3f4f6);
  border-radius:10px;
  padding:4px;
  gap:2px;
}
.sal-tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px;
  background:transparent;
  border:none;
  border-radius:8px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#6b7280;
  cursor:pointer;
  transition:background .14s, color .14s;
}
.sal-tab:hover{ color:#111; }
.sal-tab.is-on{
  background:#fff;
  color:#4f46e5;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

/* Stat tiles */
.sal-stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.sal-stat{
  background:#fff;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
.sal-stat-lbl{ font-size:12px; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.sal-stat-val{ font-size:24px; font-weight:800; color:var(--text, #111); margin-top:4px; letter-spacing:-.5px; }
.sal-stat-sub{ font-size:11px; color:#9ca3af; margin-top:2px; }
.sal-stat-hero{
  background:linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-color:#c7d2fe;
}

/* Search + toolbar tweak */
.sal-search-inp{
  padding:8px 14px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  font-family:inherit; font-size:13px;
  min-width:240px;
  outline:none;
}
.sal-search-inp:focus{
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

/* Employee card grid */
.sal-emp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px;
  padding:14px;
}
.sal-emp-card{
  background:#fff;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:12px;
  padding:14px;
  transition:border-color .14s, box-shadow .14s, transform .14s;
  display:flex; flex-direction:column; gap:10px;
}
.sal-emp-card:hover{
  border-color:#c7d2fe;
  box-shadow:0 6px 18px rgba(79,70,229,.08);
  transform:translateY(-1px);
}
.sal-emp-hdr{
  display:flex; align-items:center; gap:10px;
}
.sal-emp-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  color:#fff;
  font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sal-emp-hdr-info{ flex:1; min-width:0; }
.sal-emp-name{ font-size:15px; font-weight:700; color:var(--text, #111); }
.sal-emp-des{ font-size:12px; color:#6b7280; }
.sal-emp-body{
  border-top:1px solid var(--bdr, #f3f4f6);
  padding-top:10px;
  display:flex; flex-direction:column; gap:5px;
}
.sal-emp-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px;
}
.sal-emp-row-lbl{ color:#6b7280; }
.sal-emp-row-val{ color:var(--text, #111); font-weight:600; }
.sal-emp-rates{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:6px;
}
.sal-chip{
  display:inline-flex; align-items:center;
  padding:3px 10px;
  border-radius:12px;
  font-size:11.5px; font-weight:600;
}
.sal-chip-day  { background:#fef3c7; color:#92400e; }
.sal-chip-night{ background:#e0e7ff; color:#3730a3; }
.sal-emp-foot{
  display:flex; gap:6px;
  border-top:1px solid var(--bdr, #f3f4f6);
  padding-top:10px;
}
.sal-emp-foot .ma-btn{ flex:1; font-size:12.5px; padding:6px 10px; }

/* Status badges */
.sal-badge{
  display:inline-flex;
  padding:3px 9px;
  border-radius:10px;
  font-size:11px; font-weight:600;
  letter-spacing:.2px;
}
.sal-badge-ok      { background:#d1fae5; color:#065f46; }
.sal-badge-off     { background:#f3f4f6; color:#6b7280; }
.sal-badge-paid    { background:#dbeafe; color:#1e40af; }
.sal-badge-pending { background:#fef3c7; color:#92400e; }
.sal-badge-mini    { background:#f3f4f6; color:#4b5563; padding:1px 7px; font-size:10px; }

/* ── Employee sidebar (add/edit) ── */
.sal-se-cardtitle{
  font-size:13px; font-weight:700;
  color:#4f46e5;
  text-transform:uppercase; letter-spacing:.6px;
  padding-bottom:8px; margin-bottom:8px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
}
.sal-pattern-pills{
  display:flex; gap:6px; flex-wrap:wrap;
  flex:1;
}
.sal-pill{
  padding:7px 14px;
  border:1.5px solid var(--bdr, #e5e7eb);
  background:#fff;
  border-radius:8px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:#6b7280;
  cursor:pointer;
  transition:all .14s;
}
.sal-pill:hover{ border-color:#c7d2fe; color:#4f46e5; }
.sal-pill.is-on{
  background:#4f46e5;
  border-color:#4f46e5;
  color:#fff;
}

/* ── Payroll toolbar ── */
.sal-payroll-toolbar{
  display:flex; gap:14px; align-items:flex-end;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:14px;
}
.sal-toolbar-block{ display:flex; flex-direction:column; gap:5px; min-width:150px; }
.sal-flex-1{ flex:1; }
.sal-toolbar-lbl{ font-size:11.5px; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.sal-month-inp{
  padding:8px 12px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:8px;
  font-family:inherit; font-size:13.5px;
  min-width:170px;
  outline:none;
}
.sal-month-inp:focus{ border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.sal-month-info{
  padding:8px 0;
  font-size:13px; color:#374151;
}

/* ── Payroll table ── */
.sal-payroll-scroll{ overflow-x:auto; }
.sal-pr-tbl{
  width:100%;
  min-width:1100px;
  border-collapse:collapse;
}
.sal-pr-tbl thead th{
  background:#f9fafb;
  padding:10px 8px;
  font-size:11.5px; font-weight:700;
  color:#4b5563;
  text-transform:uppercase; letter-spacing:.4px;
  text-align:left;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  white-space:nowrap;
}
.sal-pr-tbl tbody td{
  padding:10px 8px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  font-size:13px;
  vertical-align:middle;
}
.sal-pr-tbl tbody tr:hover td{ background:#fafafa; }
.sal-th-emp, .sal-td-emp{ min-width:200px; }
.sal-th-r,   .sal-td-r  { text-align:right; }
.sal-th-c,   .sal-td-c  { text-align:center; }
.sal-pr-empname{ font-size:14px; font-weight:700; color:var(--text, #111); }
.sal-pr-empdes { font-size:11.5px; color:#6b7280; margin-top:1px; }
.sal-pr-badges { display:flex; gap:4px; margin-top:5px; }
.sal-pr-inp{
  width:70px;
  padding:6px 8px;
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:6px;
  font-family:inherit; font-size:13px;
  text-align:right;
  outline:none;
}
.sal-pr-inp:focus{ border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.12); }
.sal-pr-inp-disabled{ background:#f9fafb; color:#9ca3af; }
.sal-pr-gross{ font-weight:600; color:#111; }
.sal-pr-net  { font-weight:700; color:#059669; font-size:14px; }
.sal-pr-actions{ display:flex; gap:5px; justify-content:center; white-space:nowrap; }
.ma-btn-sm{
  padding:5px 10px;
  font-size:12px;
  border-radius:6px;
}
.ma-btn-primary{
  background:#4f46e5;
  border-color:#4f46e5;
  color:#fff;
}
.ma-btn-primary:hover{ background:#4338ca; }

/* Pay summary in mark-paid sidebar */
.sal-pay-summary{
  background:#f9fafb;
  border-radius:10px;
  padding:12px 14px;
  margin-top:6px;
}
.sal-pay-row{
  display:flex; justify-content:space-between;
  padding:5px 0;
  font-size:13px; color:#4b5563;
}
.sal-pay-row-total{
  border-top:1px dashed #cbd5e1;
  margin-top:5px; padding-top:10px;
  font-size:15px; font-weight:700; color:#111;
}

/* Empty state extras */
.de-empty-sub{ font-size:13.5px; color:#6b7280; text-align:center; margin-top:6px; line-height:1.5; }

/* Mobile responsive tweaks */
/* v3.9.465 — Salary section mobile overhaul.
   Previous mobile block was minimal — tabs squeezed 5-across (76px
   each = icons overlapped labels), toolbars wrapped ugly, employee
   cards had cramped internals, and wide tables gave no hint they
   were horizontally scrollable. Rewritten below to a proper mobile
   layout with: horizontal-scroll tab strip · stacked toolbars ·
   compact stats · card-style rows on very narrow screens. */
@media (max-width:768px){

  /* ── Page header ── */
  #pg-salary{ padding:0 !important; }
  .sal-topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px !important;
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
  }
  .sal-topbar-title{ font-size:16px; }
  .sal-topbar-title svg{ width:20px; height:20px; }

  /* ── Tab strip — horizontal scroll instead of squeezing 5 across.
        This is the key fix: at 5 tabs × 76px, icons + labels
        overlapped and the tab bar was unusable. Now users can swipe
        left/right and the active tab is auto-scrolled into view. ── */
  .sal-tabs{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px;
    flex-wrap:nowrap !important;
    scrollbar-width:none;   /* Firefox */
  }
  .sal-tabs::-webkit-scrollbar{ display:none; }  /* Safari / Chrome */
  .sal-tab{
    flex:0 0 auto !important;
    scroll-snap-align:start;
    padding:8px 14px;
    font-size:12.5px;
    white-space:nowrap;
    gap:5px;
  }
  .sal-tab svg{ width:14px; height:14px; flex-shrink:0; }

  /* ── Stats — 2-column, hero spans full width ── */
  .sal-stats-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
    padding:0 12px;
  }
  .sal-stat{
    padding:10px 12px;
    border-radius:10px;
  }
  .sal-stat-lbl{ font-size:10.5px; letter-spacing:.3px; }
  .sal-stat-val{ font-size:20px; margin-top:2px; letter-spacing:-.3px; }
  .sal-stat-sub{ font-size:10.5px; }
  .sal-stat-hero{
    grid-column:1 / -1;   /* full width on mobile */
  }
  .sal-stat-hero .sal-stat-val{ font-size:24px; }

  /* ── Employees toolbar (title + search + Add button) ── */
  .de-toolbar{
    padding:10px 12px;
    gap:8px;
    margin:0 12px 12px;
  }
  .de-toolbar-title{
    font-size:14px;
    flex:1 1 100%;
    margin-bottom:2px;
  }
  .de-toolbar-actions{
    width:100%;
    flex-wrap:nowrap;
    gap:6px;
  }
  .sal-search-inp{
    flex:1 1 auto;
    min-width:0;
    padding:9px 12px;
    font-size:13.5px;
    min-height:38px;
  }
  .ma-list-add{
    flex-shrink:0;
    padding:8px 12px;
    font-size:13px;
    min-height:38px;
  }

  /* ── Employee grid — one column, tighter padding ── */
  #sal-emp-card{ margin:0 12px; }
  .sal-emp-grid{
    grid-template-columns:1fr !important;
    padding:10px;
    gap:10px;
  }
  .sal-emp-card{ padding:12px; }
  .sal-emp-name{ font-size:14.5px; }
  .sal-emp-des{ font-size:12px; }

  /* ── Payroll / Attendance / History toolbars — stack blocks vertically ── */
  .sal-payroll-toolbar{
    padding:10px 12px;
    gap:10px;
    margin:0 12px 12px;
    border-radius:10px;
  }
  .sal-toolbar-block{
    min-width:0;
    width:100%;
  }
  .sal-toolbar-block > label{
    font-size:10.5px;
    letter-spacing:.3px;
  }
  .sal-month-inp{
    width:100%;
    min-width:0;
    min-height:40px;
    font-size:14px;
    padding:9px 12px;
  }
  .sal-month-info{
    padding:4px 0;
    font-size:12.5px;
    color:#6b7280;
  }
  /* "Generate All" button spans full width on mobile */
  #sal-gen-all-btn,
  .sal-payroll-toolbar .ma-btn{
    width:100%;
    min-height:40px;
    justify-content:center;
    font-size:13.5px;
  }

  /* ── Wide tables (attendance + payroll + history) —
        Give the horizontal scroll a visible edge shadow so users
        realise they can swipe. Also frame it inside a card on the
        left/right margins. ── */
  .sal-att-scroll,
  .sal-payroll-scroll{
    margin:0 12px;
    border-radius:10px;
    position:relative;
    /* Right-edge shadow hints at "more content to the right" */
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,0)) left,
      linear-gradient(90deg, rgba(255,255,255,0), #fff) right,
      linear-gradient(90deg, rgba(0,0,0,.08), transparent 12px) left,
      linear-gradient(90deg, transparent, rgba(0,0,0,.08) calc(100% - 12px)) right,
      #fff;
    background-repeat:no-repeat;
    background-size:24px 100%, 24px 100%, 12px 100%, 12px 100%, 100% 100%;
    background-attachment:local, local, scroll, scroll, local;
  }
  .sal-att-tbl,
  .sal-pr-tbl{
    min-width:900px;   /* was 1000-1100; still requires scroll but tighter */
  }

  /* Attendance table — smaller day cells fit more without scrolling */
  .sal-att-day-th,
  .sal-att-cell-td{ min-width:32px !important; padding:6px 2px !important; }
  .sal-att-emp-th,
  .sal-att-emp-td{
    min-width:140px !important;
    padding-left:10px !important;
    padding-right:6px !important;
  }
  .sal-att-emp-td .sal-att-emp-name{ font-size:12.5px; }
  .sal-att-emp-td .sal-att-emp-shift{ font-size:10.5px; }
  .sal-att-cell{ width:26px; height:26px; font-size:11.5px; }

  /* Payroll table — trim column padding & compress input widths */
  .sal-pr-tbl thead th{ font-size:10.5px; padding:8px 6px; }
  .sal-pr-tbl tbody td{ font-size:12.5px; padding:8px 6px; }
  .sal-pr-inp{ width:58px; padding:5px 6px; font-size:12.5px; }
  .sal-th-emp,
  .sal-td-emp{ min-width:150px; }
  .sal-pr-empname{ font-size:12.5px; }
  .sal-pr-empdes{ font-size:10.5px; }

  /* Empty states inside cards — reduce their giant illustration */
  .de-empty-wrap svg{ width:80px !important; height:80px !important; }
  .de-empty-title{ font-size:15px !important; }
  .de-empty-sub{ font-size:12.5px !important; padding:0 12px; }

  /* Legend for attendance codes — wrap and shrink */
  .sal-att-legend{
    padding:8px 12px !important;
    gap:6px !important;
    flex-wrap:wrap;
    margin:0 12px 8px;
  }
  .sal-att-legend-item{
    font-size:11px !important;
    padding:2px 6px !important;
  }
  .sal-att-legend-tip{
    flex:1 1 100%;
    font-size:10.5px !important;
    margin-top:2px;
    text-align:center;
  }
}

/* Extra tight — very narrow phones (≤ 380 px) */
@media (max-width:380px){
  .sal-stats-row{ grid-template-columns:1fr; }
  .sal-tab{ padding:8px 10px; font-size:12px; }
  .sal-tab svg{ display:none; }   /* icons drop out — labels alone save room */
  .sal-emp-grid{ padding:6px; }
  .sal-emp-card{ padding:10px; }
}
/* END v3.9.465 salary mobile ═══════════════════════════════════════ */

/* The old @media (max-width:640px) block below is intentionally kept
   for anything the new 768px block doesn't cover, but the 768px
   rules win where they overlap (specificity is identical, later
   wins). */

/* Dark-mode support (inherits from plugin's data-theme system) */
html[data-theme="dark"] .sal-stat{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .sal-stat-val{ color:#f1f5f9; }
html[data-theme="dark"] .sal-stat-hero{ background:linear-gradient(135deg, #1e1b4b, #2e1065); border-color:#4c1d95; }
html[data-theme="dark"] .sal-emp-card{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .sal-emp-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-emp-row-val{ color:#e2e8f0; }
html[data-theme="dark"] .sal-emp-body,
html[data-theme="dark"] .sal-emp-foot{ border-color:#334155; }
html[data-theme="dark"] .sal-tabs{ background:#334155; }
html[data-theme="dark"] .sal-tab{ color:#94a3b8; }
html[data-theme="dark"] .sal-tab.is-on{ background:#0f172a; color:#a5b4fc; }
html[data-theme="dark"] .sal-payroll-toolbar{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .sal-pr-tbl thead th{ background:#0f172a; color:#94a3b8; border-color:#334155; }
html[data-theme="dark"] .sal-pr-tbl tbody td{ border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .sal-pr-tbl tbody tr:hover td{ background:#334155; }
html[data-theme="dark"] .sal-pr-inp{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .sal-pay-summary{ background:#0f172a; }
html[data-theme="dark"] .sal-pay-row-total{ color:#f1f5f9; border-color:#475569; }
html[data-theme="dark"] .sal-se-cardtitle{ color:#a5b4fc; border-color:#334155; }
html[data-theme="dark"] .sal-pill{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-pill.is-on{ background:#4f46e5; border-color:#4f46e5; color:#fff; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.447 — Salary module: multi-select off days + expanded pay types
   ──────────────────────────────────────────────────────────────────────
   Adds the 7-day toggle pill row for weekly off days (Sun-Sat), the
   derived days-per-week help line, and a small hint pill for the
   Custom pay type. Also styles the editable Gross input on the
   payroll table for Custom-pay-type rows.
════════════════════════════════════════════════════════════════════════ */

/* Row of 7 toggle pills for the weekly off days. Flex-wrap so they
   spill onto a second line on narrow screens. */
.sal-day-toggle-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
}
.sal-day-toggle{
  min-width:52px;
  padding:8px 10px;
  border:1.5px solid var(--bdr, #e5e7eb);
  background:#fff;
  border-radius:8px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:#6b7280;
  cursor:pointer;
  transition:all .14s;
  text-align:center;
}
.sal-day-toggle:hover{
  border-color:#c7d2fe;
  color:#4f46e5;
}
.sal-day-toggle.is-on{
  background:#4f46e5;
  border-color:#4f46e5;
  color:#fff;
  box-shadow:0 2px 6px rgba(79,70,229,.24);
}

/* Small help note below the off-day row + the Custom pay-type hint */
.sal-help-note{
  flex:1;
  padding:8px 12px;
  background:#eef2ff;
  border:1px solid #e0e7ff;
  border-radius:8px;
  font-size:12.5px;
  color:#3730a3;
  line-height:1.5;
}
.sal-help-note b{ font-weight:700; color:#312e81; }

/* Editable Gross input on payroll rows for Custom pay type — visually
   distinct from the number cells so the user knows they enter it here. */
.sal-pr-gross-inp{
  border-color:#c7d2fe !important;
  background:#f5f3ff !important;
  color:#4f46e5;
}
.sal-pr-gross-inp:focus{
  border-color:#4f46e5 !important;
  background:#fff !important;
  box-shadow:0 0 0 2px rgba(79,70,229,.16);
}

/* Mobile: shrink day toggles */
@media (max-width:640px){
  .sal-day-toggle{ min-width:44px; padding:7px 8px; font-size:11.5px; }
}

/* Dark-mode */
html[data-theme="dark"] .sal-day-toggle{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-day-toggle:hover{ border-color:#4f46e5; color:#a5b4fc; }
html[data-theme="dark"] .sal-day-toggle.is-on{ background:#4f46e5; border-color:#4f46e5; color:#fff; }
html[data-theme="dark"] .sal-help-note{ background:#1e1b4b; border-color:#312e81; color:#c7d2fe; }
html[data-theme="dark"] .sal-help-note b{ color:#e0e7ff; }
html[data-theme="dark"] .sal-pr-gross-inp{ background:#1e1b4b !important; border-color:#312e81 !important; color:#c7d2fe; }
html[data-theme="dark"] .sal-pr-gross-inp:focus{ background:#0f172a !important; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.448 — Salary: shift-type UI + night differential + attendance grid
════════════════════════════════════════════════════════════════════════ */

/* Shift-type pills in the employee sidebar (Day / Night / Rotating) */
.sal-shift-pills{
  display:flex; gap:6px; flex-wrap:wrap; flex:1;
}
.sal-shift-pill{
  padding:10px 14px;
  border:1.5px solid var(--bdr, #e5e7eb);
  background:#fff;
  border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#4b5563;
  cursor:pointer;
  transition:all .14s;
  display:inline-flex; align-items:center; gap:6px;
}
.sal-shift-pill:hover{ border-color:#c7d2fe; color:#4f46e5; }
.sal-shift-pill.is-on[data-shift="day"]{
  background:linear-gradient(135deg, #fef3c7, #fde68a);
  border-color:#f59e0b; color:#92400e;
  box-shadow:0 2px 6px rgba(245,158,11,.24);
}
.sal-shift-pill.is-on[data-shift="night"]{
  background:linear-gradient(135deg, #4338ca, #312e81);
  border-color:#312e81; color:#fff;
  box-shadow:0 2px 6px rgba(67,56,202,.32);
}
.sal-shift-pill.is-on[data-shift="rotating"]{
  background:linear-gradient(135deg, #10b981, #059669);
  border-color:#059669; color:#fff;
  box-shadow:0 2px 6px rgba(16,185,129,.32);
}
.sal-shift-emoji{ font-size:14px; line-height:1; }

/* Shift-type badges on employee card + payroll row */
.sal-badge-day  { background:#fef3c7; color:#92400e; }
.sal-badge-night{ background:#e0e7ff; color:#3730a3; }
.sal-badge-rot  { background:#d1fae5; color:#065f46; }

/* Employee card: badges wrap under name + designation */
.sal-emp-hdr-badges{
  display:flex; gap:5px; flex-wrap:wrap; margin-top:5px;
}
.sal-emp-hdr-badges .sal-badge{ font-size:10.5px; padding:2px 7px; }

/* Night-differential quick-set helper (in Pay Structure card) */
.sal-nightdiff-wrap{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1;
  padding:6px 0;
}
.sal-nightdiff-lbl{
  font-size:12px; color:#6b7280;
  margin-right:2px;
}
.sal-nightdiff-btn{
  padding:5px 12px;
  border:1px solid var(--bdr, #e5e7eb);
  background:#f9fafb;
  border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:600;
  color:#4b5563;
  cursor:pointer;
  transition:all .12s;
}
.sal-nightdiff-btn:hover{
  background:#eef2ff; border-color:#4f46e5; color:#4f46e5;
}

/* ══════════ Attendance grid ══════════ */

.sal-att-legend{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:14px;
  font-size:12.5px;
  color:#4b5563;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.sal-att-legend-item{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500;
}
.sal-att-legend-item .sal-att-cell{
  width:24px; height:24px;
  cursor:default;
  transform:none !important;
  box-shadow:none !important;
}
.sal-att-legend-tip{
  margin-left:auto;
  font-size:11.5px;
  color:#9ca3af;
  font-style:italic;
}

.sal-att-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
.sal-att-tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1000px;
  background:#fff;
}
.sal-att-tbl thead th{
  background:linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border-bottom:2px solid #e5e7eb;
  padding:8px 4px;
  font-size:11px; font-weight:700;
  color:#4b5563;
  text-align:center;
  white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
.sal-att-emp-th{
  min-width:200px;
  text-align:left !important;
  padding-left:16px !important;
  padding-right:8px !important;
  position:sticky; left:0; z-index:3;
  background:linear-gradient(90deg, #ffffff 0%, #f9fafb 100%) !important;
  border-right:2px solid #e5e7eb !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.sal-att-day-th{
  min-width:38px;
  padding:8px 3px !important;
  border-right:1px solid #f3f4f6;
}
.sal-att-day-th.sal-att-day-sun{
  background:linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%) !important;
  color:#991b1b;
}
.sal-att-day-th.sal-att-day-sun .sal-att-day-dow{ color:#dc2626 !important; font-weight:700; }
.sal-att-day-num{ font-weight:700; font-size:13px; line-height:1.2; color:#111827; }
.sal-att-day-dow{ font-size:9.5px; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.sal-att-tot-th{
  min-width:90px;
  text-align:center;
  background:linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
  border-left:2px solid #e5e7eb;
}

.sal-att-tbl tbody tr{ transition:background .12s; }
.sal-att-tbl tbody tr:nth-child(even) td{ background-color:#fafbfc; }
.sal-att-tbl tbody tr:nth-child(even) .sal-att-emp-td{ background:linear-gradient(90deg, #fafbfc 0%, #f9fafb 100%); }
.sal-att-tbl tbody tr:hover td:not(.sal-att-emp-td):not(.sal-att-tot-td){ background-color:#eef2ff; }
.sal-att-tbl tbody tr:hover .sal-att-emp-td{ background:linear-gradient(90deg, #eef2ff 0%, #e0e7ff 100%); }

.sal-att-tbl tbody td{
  border-bottom:1px solid #f3f4f6;
  padding:6px 3px;
  text-align:center;
  vertical-align:middle;
}
.sal-att-cell-td{ padding:6px 2px !important; }
.sal-att-emp-td{
  text-align:left !important;
  padding:10px 16px !important;
  position:sticky; left:0; z-index:1;
  background:#fff;
  border-right:2px solid #e5e7eb !important;
  min-width:200px;
}
.sal-att-emp-name{ font-size:13.5px; font-weight:700; color:var(--text, #111); line-height:1.3; }
.sal-att-emp-shift{
  font-size:11px; color:#6b7280; margin-top:3px;
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px;
  background:#f3f4f6;
  border-radius:8px;
  font-weight:600;
}
.sal-att-tot-td{
  border-left:2px solid #e5e7eb;
  padding:8px 12px !important;
  background:linear-gradient(90deg, #f9fafb 0%, #eef2ff 100%) !important;
}
.sal-att-tot{
  display:inline-block;
  font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums;
  padding:4px 10px;
  background:#fff;
  border-radius:8px;
  border:1px solid #e5e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.sal-att-tot-d{ color:#d97706; font-weight:800; }
.sal-att-tot-n{ color:#4f46e5; font-weight:800; }
.sal-att-tot-l{ color:#dc2626; font-weight:800; }

/* The clickable status cell — one per employee-day. */
.sal-att-cell{
  width:32px; height:32px;
  padding:0;
  border:1.5px solid #e5e7eb;
  background:#fafbfc;
  border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:800;
  color:#cbd5e1;
  cursor:pointer;
  transition:transform .1s, box-shadow .12s, background .12s, border-color .12s;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle;
  user-select:none;
}
.sal-att-cell:hover{
  transform:scale(1.18);
  box-shadow:0 3px 10px rgba(79,70,229,.25);
  z-index:2;
  border-color:#818cf8;
  color:#4f46e5;
}
.sal-att-cell:active{ transform:scale(1.05); }

/* Day shift — warm orange, high contrast */
.sal-att-cell.sal-att-d{
  background:linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-color:#f59e0b;
  color:#78350f;
  box-shadow:inset 0 -2px 0 rgba(245,158,11,.3);
}
/* Night shift — deep indigo */
.sal-att-cell.sal-att-n{
  background:linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
  border-color:#312e81;
  color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);
}
/* Leave — red */
.sal-att-cell.sal-att-l{
  background:linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  border-color:#dc2626;
  color:#7f1d1d;
  box-shadow:inset 0 -2px 0 rgba(220,38,38,.3);
}
/* Weekly-off — hatched pattern for clear "not expected to work" */
.sal-att-cell.sal-att-weekoff{
  background:repeating-linear-gradient(
    45deg,
    #f3f4f6 0px, #f3f4f6 4px,
    #e5e7eb 4px, #e5e7eb 6px
  );
  border-color:#d1d5db;
  opacity:.7;
}
.sal-att-cell.sal-att-weekoff:hover{ opacity:.95; }
/* Sunday column empty cells — soft red tint */
.sal-att-cell.sal-att-sun.sal-att--{
  background:#fef2f2;
  border-color:#fecaca;
}

/* Mobile: compress cells further so more of the month is visible */
@media (max-width:640px){
  .sal-att-cell{ width:26px; height:26px; font-size:11px; border-width:1px; border-radius:4px; }
  .sal-att-day-th{ min-width:28px; padding:6px 2px !important; }
  .sal-att-emp-th, .sal-att-emp-td{ min-width:140px; padding:6px 10px !important; }
  .sal-att-emp-name{ font-size:12px; }
  .sal-att-emp-shift{ font-size:10px; padding:1px 6px; }
  .sal-att-tot-td{ padding:6px 8px !important; }
  .sal-att-tot{ font-size:11px; padding:3px 6px; }
}

/* Dark-mode */
html[data-theme="dark"] .sal-shift-pill{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-nightdiff-btn{ background:#0f172a; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-nightdiff-btn:hover{ background:#1e293b; color:#a5b4fc; }
html[data-theme="dark"] .sal-nightdiff-lbl{ color:#94a3b8; }
html[data-theme="dark"] .sal-att-legend{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-att-tbl thead th{ background:#0f172a; color:#94a3b8; border-color:#334155; }
html[data-theme="dark"] .sal-att-emp-th{ background:#0f172a !important; }
html[data-theme="dark"] .sal-att-day-th.sal-att-day-sun{ background:#3f0808 !important; color:#fca5a5; }
html[data-theme="dark"] .sal-att-tbl tbody td{ border-color:#334155; }
html[data-theme="dark"] .sal-att-emp-td{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .sal-att-emp-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-att-tot-td{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .sal-att-cell{ background:#0f172a; border-color:#334155; color:#64748b; }
html[data-theme="dark"] .sal-att-cell.sal-att-weekoff{ background:#1e293b; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.449 — Advance Payments tab
════════════════════════════════════════════════════════════════════════ */

/* Per-employee balance grid at the top of the Advances tab */
.sal-adv-bal-hdr{
  padding:12px 17px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  font-size:13px; font-weight:700;
  color:var(--text, #111);
  background:var(--surf2, #f9fafb);
}
.sal-adv-bal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
  padding:14px 17px;
}
.sal-adv-bal-item{
  border:1px solid var(--bdr, #e5e7eb);
  border-radius:10px;
  padding:12px 14px;
  background:var(--surf, #fff);
  display:flex; flex-direction:column; gap:4px;
  transition:box-shadow .18s, border-color .18s;
}
.sal-adv-bal-item:hover{
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border-color:#c7d2fe;
}
.sal-adv-bal-name{
  font-size:13px; font-weight:700;
  color:var(--text, #111);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.sal-adv-bal-des{ font-size:11px; color:#6b7280; }
.sal-adv-bal-amt{
  font-size:20px; font-weight:800;
  color:#dc2626; margin-top:4px;
}
.sal-adv-bal-meta{ font-size:11px; color:#9ca3af; }
.sal-adv-bal-give{
  margin-top:6px;
  padding:6px 10px;
  font-size:11px; font-weight:600;
  background:#eef2ff; color:#4338ca;
  border:1px solid #c7d2fe;
  border-radius:6px;
  cursor:pointer;
  align-self:flex-start;
  transition:background .15s;
}
.sal-adv-bal-give:hover{ background:#c7d2fe; }
.sal-adv-bal-item.is-clear .sal-adv-bal-amt{ color:#059669; }
.sal-adv-bal-item.is-clear{ border-color:#d1fae5; background:#f0fdf4; }

/* Advance history table */
.sal-adv-tbl{ width:100%; border-collapse:collapse; }
.sal-adv-tbl th{
  background:var(--surf2, #f9fafb);
  padding:10px 12px;
  font-size:11px; font-weight:700;
  text-align:left;
  color:#6b7280;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--bdr, #e5e7eb);
}
.sal-adv-tbl td{
  padding:10px 12px;
  border-bottom:1px solid var(--bdr, #f3f4f6);
  font-size:13px;
  vertical-align:middle;
}
.sal-adv-tbl tbody tr:hover{ background:#fafafa; }
.sal-adv-tbl .sal-adv-emp-name{ font-weight:600; color:var(--text, #111); }
.sal-adv-tbl .sal-adv-emp-des{ font-size:11px; color:#9ca3af; }
.sal-adv-amount{ font-weight:700; color:#dc2626; }
.sal-adv-mode-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:10px;
  font-size:10px; font-weight:700;
  background:#eef2ff; color:#4338ca;
  text-transform:uppercase;
}
.sal-adv-status-adjusted{
  display:inline-block; padding:3px 10px; border-radius:10px;
  background:#d1fae5; color:#065f46; font-size:11px; font-weight:700;
}
.sal-adv-status-pending{
  display:inline-block; padding:3px 10px; border-radius:10px;
  background:#fef3c7; color:#92400e; font-size:11px; font-weight:700;
}
.sal-adv-notes{ color:#6b7280; font-size:12px; max-width:280px; }
.sal-adv-actions{ display:flex; gap:6px; }

/* Pay-salary sidebar (partial pay + advance auto-fill) */
.sal-pay-partial-note{
  font-size:12px; color:#92400e;
  background:#fef3c7; border:1px solid #fcd34d;
  padding:8px 12px; border-radius:8px;
  margin-top:8px;
}
.sal-pay-advance-note{
  font-size:12px; color:#065f46;
  background:#d1fae5; border:1px solid #6ee7b7;
  padding:8px 12px; border-radius:8px;
  margin-top:8px; display:flex; align-items:center; gap:8px;
}

/* Dark-mode overrides */
html[data-theme="dark"] .sal-adv-bal-hdr{ background:#0f172a; border-color:#334155; color:#f1f5f9; }
html[data-theme="dark"] .sal-adv-bal-item{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .sal-adv-bal-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-adv-bal-des{ color:#94a3b8; }
html[data-theme="dark"] .sal-adv-bal-item.is-clear{ background:#052e16; border-color:#065f46; }
html[data-theme="dark"] .sal-adv-bal-give{ background:#312e81; border-color:#4338ca; color:#c7d2fe; }
html[data-theme="dark"] .sal-adv-tbl th{ background:#0f172a; color:#94a3b8; border-color:#334155; }
html[data-theme="dark"] .sal-adv-tbl td{ border-color:#334155; }
html[data-theme="dark"] .sal-adv-tbl tbody tr:hover{ background:#1e293b; }
html[data-theme="dark"] .sal-adv-tbl .sal-adv-emp-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-adv-mode-pill{ background:#312e81; color:#c7d2fe; }
html[data-theme="dark"] .sal-adv-status-adjusted{ background:#065f46; color:#a7f3d0; }
html[data-theme="dark"] .sal-adv-status-pending{ background:#78350f; color:#fde68a; }
html[data-theme="dark"] .sal-adv-notes{ color:#94a3b8; }
html[data-theme="dark"] .sal-pay-partial-note{ background:#78350f; color:#fde68a; border-color:#b45309; }
html[data-theme="dark"] .sal-pay-advance-note{ background:#065f46; color:#a7f3d0; border-color:#059669; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.450 — Salary History Matrix
════════════════════════════════════════════════════════════════════════ */

.sal-hist-tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:800px;
  background:#fff;
}
.sal-hist-tbl thead th{
  background:linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border-bottom:2px solid #e5e7eb;
  padding:10px 6px;
  font-size:11px; font-weight:700;
  color:#4b5563;
  text-align:center;
  white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
.sal-hist-emp-th{
  min-width:200px;
  text-align:left !important;
  padding-left:16px !important;
  position:sticky; left:0; z-index:3;
  background:linear-gradient(90deg, #ffffff 0%, #f9fafb 100%) !important;
  border-right:2px solid #e5e7eb !important;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.sal-hist-mon-th{
  min-width:110px;
  padding:8px 6px !important;
  border-right:1px solid #f3f4f6;
}
.sal-hist-mon-name{ font-weight:800; font-size:13px; color:#111827; }
.sal-hist-mon-year{ font-size:10px; color:#9ca3af; margin-top:2px; }
.sal-hist-tot-th{
  min-width:110px;
  background:linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
  border-left:2px solid #e5e7eb;
  color:#4338ca !important;
}

.sal-hist-tbl tbody td{
  border-bottom:1px solid #f3f4f6;
  padding:8px 6px;
  text-align:center;
  vertical-align:middle;
}
.sal-hist-tbl tbody tr:nth-child(even) td{ background-color:#fafbfc; }
.sal-hist-tbl tbody tr:hover td:not(.sal-hist-emp-td){ background-color:#eef2ff; }
.sal-hist-emp-td{
  text-align:left !important;
  padding:10px 16px !important;
  position:sticky; left:0; z-index:1;
  background:#fff;
  border-right:2px solid #e5e7eb !important;
  min-width:200px;
}
.sal-hist-tbl tbody tr:nth-child(even) .sal-hist-emp-td{ background:#fafbfc; }
.sal-hist-emp-name{ font-size:13.5px; font-weight:700; color:var(--text, #111); line-height:1.3; }
.sal-hist-emp-des{ font-size:11px; color:#6b7280; margin-top:2px; }
.sal-hist-cell-td{ padding:6px 4px !important; }

.sal-hist-cell{
  width:100%;
  min-height:52px;
  padding:8px 6px;
  border:1.5px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  transition:transform .1s, box-shadow .12s, border-color .12s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.sal-hist-cell:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(79,70,229,.15);
  border-color:#818cf8;
  z-index:1;
}
.sal-hist-cell-amt{
  font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#111827;
  line-height:1.2;
}
.sal-hist-cell-status{
  font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px;
  padding:1px 6px; border-radius:8px;
}
.sal-hist-cell.is-paid{
  background:linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color:#86efac;
}
.sal-hist-cell.is-paid .sal-hist-cell-status{
  background:#059669; color:#fff;
}
.sal-hist-cell.is-paid .sal-hist-cell-amt{ color:#065f46; }
.sal-hist-cell.is-pending{
  background:linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-color:#fbbf24;
}
.sal-hist-cell.is-pending .sal-hist-cell-status{
  background:#d97706; color:#fff;
}
.sal-hist-cell.is-pending .sal-hist-cell-amt{ color:#78350f; }
.sal-hist-cell.sal-hist-cell-empty{
  background:#fafbfc;
  border-style:dashed;
  border-color:#d1d5db;
  min-height:52px;
}
.sal-hist-cell.sal-hist-cell-empty:hover{
  background:#eef2ff;
  border-color:#818cf8;
  border-style:solid;
}
.sal-hist-cell-empty-icon{
  font-size:20px; font-weight:400;
  color:#9ca3af;
  line-height:1;
}
.sal-hist-cell.sal-hist-cell-empty:hover .sal-hist-cell-empty-icon{ color:#4f46e5; }

.sal-hist-tot-td{
  border-left:2px solid #e5e7eb;
  background:linear-gradient(90deg, #f9fafb 0%, #eef2ff 100%) !important;
  font-weight:800;
  color:#4338ca;
  font-variant-numeric:tabular-nums;
  padding:10px 12px !important;
}
.sal-hist-mtot{
  font-weight:800;
  color:#111827;
  padding:12px 6px !important;
  border-top:2px solid #e5e7eb !important;
  background:linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}
.sal-hist-mtot-pending{
  font-size:10px; font-weight:600;
  color:#dc2626;
  margin-top:3px;
}
.sal-hist-tbl tbody tr.sal-hist-foot td{
  border-top:2px solid #e5e7eb;
  background:linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
  font-weight:800;
  border-bottom:none;
}
.sal-hist-tbl tbody tr.sal-hist-foot .sal-hist-emp-td{
  background:linear-gradient(90deg, #f9fafb 0%, #f3f4f6 100%);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:12px;
  color:#4b5563;
}
.sal-hist-grand{
  color:#4338ca !important;
  font-size:15px !important;
}

/* Mobile: shrink cells */
@media (max-width:640px){
  .sal-hist-mon-th{ min-width:80px; padding:6px 4px !important; }
  .sal-hist-cell{ min-height:44px; padding:6px 4px; }
  .sal-hist-cell-amt{ font-size:11px; }
  .sal-hist-cell-status{ font-size:8.5px; padding:1px 4px; }
  .sal-hist-emp-th, .sal-hist-emp-td{ min-width:140px; padding:8px 10px !important; }
  .sal-hist-emp-name{ font-size:12px; }
  .sal-hist-tot-th, .sal-hist-tot-td{ min-width:80px; }
}

/* Dark mode */
html[data-theme="dark"] .sal-hist-tbl{ background:#0f172a; }
html[data-theme="dark"] .sal-hist-tbl thead th{ background:#0f172a; color:#94a3b8; border-color:#334155; }
html[data-theme="dark"] .sal-hist-emp-th{ background:#0f172a !important; }
html[data-theme="dark"] .sal-hist-mon-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-hist-mon-year{ color:#94a3b8; }
html[data-theme="dark"] .sal-hist-tbl tbody td{ border-color:#334155; }
html[data-theme="dark"] .sal-hist-tbl tbody tr:nth-child(even) td{ background:#1e293b; }
html[data-theme="dark"] .sal-hist-tbl tbody tr:hover td:not(.sal-hist-emp-td){ background:#312e81; }
html[data-theme="dark"] .sal-hist-emp-td{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .sal-hist-tbl tbody tr:nth-child(even) .sal-hist-emp-td{ background:#1e293b; }
html[data-theme="dark"] .sal-hist-emp-name{ color:#f1f5f9; }
html[data-theme="dark"] .sal-hist-emp-des{ color:#94a3b8; }
html[data-theme="dark"] .sal-hist-cell{ background:#1e293b; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-hist-cell.is-paid{ background:#052e16; border-color:#059669; }
html[data-theme="dark"] .sal-hist-cell.is-paid .sal-hist-cell-amt{ color:#a7f3d0; }
html[data-theme="dark"] .sal-hist-cell.is-pending{ background:#451a03; border-color:#b45309; }
html[data-theme="dark"] .sal-hist-cell.is-pending .sal-hist-cell-amt{ color:#fde68a; }
html[data-theme="dark"] .sal-hist-cell.sal-hist-cell-empty{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .sal-hist-tot-td, html[data-theme="dark"] .sal-hist-mtot{ background:#0f172a !important; color:#c7d2fe; border-color:#334155 !important; }
html[data-theme="dark"] .sal-hist-tbl tbody tr.sal-hist-foot td{ background:#0f172a; border-color:#334155; color:#cbd5e1; }
html[data-theme="dark"] .sal-hist-tbl tbody tr.sal-hist-foot .sal-hist-emp-td{ background:#0f172a; color:#94a3b8; }
html[data-theme="dark"] .sal-hist-grand{ color:#c7d2fe !important; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.456 → v3.9.459 — Sale Invoice list: status filter tabs
   ──────────────────────────────────────────────────────────────────────
   Each tab has its own colour identity so users can spot the state at
   a glance: All=indigo, Pending=red, Partial=amber, Paid=green,
   Cancelled=grey, Drafts=blue. Active tab uses a soft coloured
   background + matching-colour underline + coloured count badge.
════════════════════════════════════════════════════════════════════════ */

.ma-inv-tabs{
  display:flex;
  gap:4px;
  align-items:stretch;
  border-bottom:1px solid var(--bdr, #e5e7eb);
  margin-bottom:14px;
  padding:2px 2px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.ma-inv-tabs::-webkit-scrollbar{ display:none; }

.ma-inv-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px 13px;
  border:none;
  background:transparent;
  border-bottom:3px solid transparent;
  color:#6b7280;
  font-family:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  margin-bottom:-1px;
  border-radius:8px 8px 0 0;
  transition:color .16s, border-color .16s, background .16s, transform .16s;
  position:relative;
}
.ma-inv-tab:hover{
  color:var(--text, #111);
  background:rgba(0,0,0,.03);
}
.ma-inv-tab:active{ transform:translateY(1px); }

/* v3.9.459 — Coloured icon dots next to each tab label. Simpler than
   inline SVG and never breaks the tab layout on narrow screens. */
.ma-inv-tab::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:#d1d5db;
  flex-shrink:0;
  transition:background .16s, box-shadow .16s;
}
.ma-inv-tab[data-tab="all"]::before      { background:#a5b4fc; }
.ma-inv-tab[data-tab="pending"]::before  { background:#fca5a5; }
.ma-inv-tab[data-tab="partial"]::before  { background:#fbbf24; }
.ma-inv-tab[data-tab="paid"]::before     { background:#6ee7b7; }
.ma-inv-tab[data-tab="cancelled"]::before{ background:#cbd5e1; }
.ma-inv-tab[data-tab="drafts"]::before   { background:#93c5fd; }

/* Active state — soft coloured background + bold coloured underline.
   Each tab uses its own colour so the strip acts as a legend. */
.ma-inv-tab.is-on{ font-weight:700; }
.ma-inv-tab.is-on[data-tab="all"]{
  color:#4338ca; background:#eef2ff; border-bottom-color:#4f46e5;
}
.ma-inv-tab.is-on[data-tab="all"]::before{
  background:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.18);
}
.ma-inv-tab.is-on[data-tab="pending"]{
  color:#b91c1c; background:#fef2f2; border-bottom-color:#dc2626;
}
.ma-inv-tab.is-on[data-tab="pending"]::before{
  background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.18);
}
.ma-inv-tab.is-on[data-tab="partial"]{
  color:#92400e; background:#fffbeb; border-bottom-color:#d97706;
}
.ma-inv-tab.is-on[data-tab="partial"]::before{
  background:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.18);
}
.ma-inv-tab.is-on[data-tab="paid"]{
  color:#047857; background:#ecfdf5; border-bottom-color:#059669;
}
.ma-inv-tab.is-on[data-tab="paid"]::before{
  background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.18);
}
.ma-inv-tab.is-on[data-tab="cancelled"]{
  color:#475569; background:#f8fafc; border-bottom-color:#64748b;
}
.ma-inv-tab.is-on[data-tab="cancelled"]::before{
  background:#64748b; box-shadow:0 0 0 3px rgba(100,116,139,.18);
}
.ma-inv-tab.is-on[data-tab="drafts"]{
  color:#1d4ed8; background:#eff6ff; border-bottom-color:#2563eb;
}
.ma-inv-tab.is-on[data-tab="drafts"]::before{
  background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

/* Count badge — larger, with more presence. Base grey; when the tab
   is active it inherits the tab's colour. */
.ma-inv-tab-count{
  display:inline-flex;
  min-width:24px; height:20px;
  padding:0 8px;
  border-radius:10px;
  background:#f3f4f6;
  color:#6b7280;
  font-size:11px; font-weight:700;
  align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
  transition:background .16s, color .16s;
}
.ma-inv-tab.is-on[data-tab="all"]      .ma-inv-tab-count{ background:#e0e7ff; color:#4f46e5; }
.ma-inv-tab.is-on[data-tab="pending"]  .ma-inv-tab-count{ background:#fee2e2; color:#b91c1c; }
.ma-inv-tab.is-on[data-tab="partial"]  .ma-inv-tab-count{ background:#fef3c7; color:#92400e; }
.ma-inv-tab.is-on[data-tab="paid"]     .ma-inv-tab-count{ background:#d1fae5; color:#065f46; }
.ma-inv-tab.is-on[data-tab="cancelled"].ma-inv-tab-count,
.ma-inv-tab.is-on[data-tab="cancelled"] .ma-inv-tab-count{ background:#e2e8f0; color:#334155; }
.ma-inv-tab.is-on[data-tab="drafts"]   .ma-inv-tab-count{ background:#dbeafe; color:#1e40af; }

/* Two-line date cell: date on top, time below in smaller muted grey */
.ma-list-date-cell{
  line-height:1.25;
}
.ma-list-date-main{
  font-size:13.5px;
  color:var(--text, #111);
}
.ma-list-date-time{
  font-size:11px;
  color:#9ca3af;
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}

/* Dark-mode */
html[data-theme="dark"] .ma-inv-tabs{ border-color:#334155; }
html[data-theme="dark"] .ma-inv-tab{ color:#94a3b8; }
html[data-theme="dark"] .ma-inv-tab:hover{ background:rgba(255,255,255,.04); color:#f1f5f9; }
html[data-theme="dark"] .ma-inv-tab-count{ background:#334155; color:#cbd5e1; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="all"]      { background:#1e1b4b; color:#c7d2fe; border-bottom-color:#a5b4fc; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="pending"]  { background:#450a0a; color:#fecaca; border-bottom-color:#fca5a5; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="partial"]  { background:#451a03; color:#fed7aa; border-bottom-color:#fbbf24; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="paid"]     { background:#064e3b; color:#a7f3d0; border-bottom-color:#6ee7b7; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="cancelled"]{ background:#1e293b; color:#cbd5e1; border-bottom-color:#94a3b8; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="drafts"]   { background:#172554; color:#bfdbfe; border-bottom-color:#60a5fa; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="all"]      .ma-inv-tab-count{ background:#312e81; color:#c7d2fe; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="pending"]  .ma-inv-tab-count{ background:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="partial"]  .ma-inv-tab-count{ background:#78350f; color:#fed7aa; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="paid"]     .ma-inv-tab-count{ background:#064e3b; color:#a7f3d0; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="cancelled"].ma-inv-tab-count,
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="cancelled"] .ma-inv-tab-count{ background:#334155; color:#cbd5e1; }
html[data-theme="dark"] .ma-inv-tab.is-on[data-tab="drafts"]   .ma-inv-tab-count{ background:#1e3a8a; color:#bfdbfe; }
html[data-theme="dark"] .ma-list-date-time{ color:#64748b; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.457 — Partial payment: distinct PARTIAL pill on the invoice list
   + live "Will save as" status pill on the bill create/edit page.
════════════════════════════════════════════════════════════════════════ */

/* PARTIAL pill on the Sale Invoice list — amber to distinguish from
   PAID (green), CREDIT (red), and CANCELLED (grey with strike). */
.ma-pay-pill.partial{
  background:#fef3c7;
  color:#92400e;
}
html[data-theme="dark"] .ma-pay-pill.partial{
  background:#78350f;
  color:#fed7aa;
}

/* Live "Will save as" status pill in the bill create/edit form —
   shown below the Balance row inside the Payment card. */
.gst-pmt-status-hint{
  padding:8px 10px;
  margin-top:6px;
  background:var(--surf2, #f9fafb);
  border:1px dashed var(--bdr, #e5e7eb);
  border-radius:6px;
  font-size:12px;
  color:#6b7280;
  display:flex; align-items:center; gap:8px;
}
.gst-pmt-status-pill{
  display:inline-flex; align-items:center;
  padding:2px 10px;
  border-radius:10px;
  font-size:11px; font-weight:700;
  letter-spacing:.3px;
}
.gst-pmt-status-pill.paid    { background:#d1fae5; color:#065f46; }
.gst-pmt-status-pill.partial { background:#fef3c7; color:#92400e; }
.gst-pmt-status-pill.pending { background:#fee2e2; color:#b91c1c; }

html[data-theme="dark"] .gst-pmt-status-hint{
  background:#1e293b; border-color:#334155; color:#94a3b8;
}
html[data-theme="dark"] .gst-pmt-status-pill.paid    { background:#064e3b; color:#a7f3d0; }
html[data-theme="dark"] .gst-pmt-status-pill.partial { background:#78350f; color:#fed7aa; }
html[data-theme="dark"] .gst-pmt-status-pill.pending { background:#7f1d1d; color:#fecaca; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.458 — Sale Invoice: "Add Payment" card (multi-row / split payment)
   ──────────────────────────────────────────────────────────────────────
   Matches the reference screenshot: pale-green tinted background,
   header with title + "Mark as fully paid" checkbox, table of
   payment rows (Notes | Amount | Date | Mode), + Split Payment button
   below to add more, and a summary block with Total / Balance / live
   Status pill.
════════════════════════════════════════════════════════════════════════ */

.ma-addpay-card{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:10px;
  padding:14px 14px 12px;
  margin-top:10px;
}
.ma-addpay-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.ma-addpay-title{
  font-size:13.5px; font-weight:700; color:#065f46;
}
.ma-addpay-title-sub{
  font-weight:500; color:#059669; font-size:12px;
}
.ma-addpay-fully{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:#065f46;
  cursor:pointer;
  user-select:none;
}
.ma-addpay-fully input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:#059669;
  cursor:pointer;
}

/* Column headers */
.ma-addpay-thead{
  display:grid;
  grid-template-columns:1.8fr 1fr 1.1fr 1.2fr 32px;
  gap:8px;
  padding:0 4px 4px;
  border-bottom:1px solid #a7f3d0;
  margin-bottom:6px;
}
.ma-addpay-th{
  font-size:11.5px; font-weight:700; color:#065f46;
  text-transform:none;
  letter-spacing:0;
}

/* Row layout — same grid as thead */
.ma-addpay-row{
  display:grid;
  grid-template-columns:1.8fr 1fr 1.1fr 1.2fr 32px;
  gap:8px;
  padding:6px 4px;
  align-items:start;
}
.ma-addpay-row + .ma-addpay-row{
  border-top:1px dashed #a7f3d0;
  margin-top:4px;
  padding-top:10px;
}

.ma-addpay-cell{ display:flex; }

.ma-addpay-inp{
  width:100%;
  padding:7px 10px;
  border:1px solid #d1fae5;
  border-radius:6px;
  background:#fff;
  font-family:inherit; font-size:13px;
  color:var(--text, #111);
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ma-addpay-inp:focus{
  border-color:#059669;
  box-shadow:0 0 0 2px rgba(5,150,105,.15);
}
.ma-addpay-notes{
  resize:vertical;
  min-height:44px;
  line-height:1.4;
}
.ma-addpay-amt{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.ma-addpay-mode{ cursor:pointer; }

/* Remove-row X button */
.ma-addpay-x{
  width:28px; height:28px;
  padding:0;
  border:1px solid #d1fae5;
  background:#fff;
  color:#6b7280;
  border-radius:6px;
  cursor:pointer;
  font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start;
  margin-top:2px;
}
.ma-addpay-x:hover{ background:#fee2e2; border-color:#fca5a5; color:#dc2626; }

/* + Split Payment button */
.ma-addpay-split{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px;
  padding:6px 12px;
  border:none;
  background:transparent;
  color:#059669;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  border-radius:6px;
}
.ma-addpay-split:hover{ background:#d1fae5; }
.ma-addpay-plus{
  display:inline-flex;
  width:18px; height:18px;
  border:1.5px solid #059669;
  border-radius:50%;
  align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  line-height:1;
}

/* Bottom summary block: total / balance / status */
.ma-addpay-summary{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #a7f3d0;
  display:flex; flex-direction:column; gap:4px;
}
.ma-addpay-sum-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  font-size:12.5px; color:#065f46;
}
.ma-addpay-sum-val{ font-weight:700; font-variant-numeric:tabular-nums; }
.ma-addpay-sum-bal.is-zero    { color:#059669; }
.ma-addpay-sum-bal.is-positive{ color:#dc2626; }

/* Responsive: stack columns on narrow screens */
@media (max-width:640px){
  .ma-addpay-thead{ display:none; }
  .ma-addpay-row{
    grid-template-columns:1fr;
    gap:6px;
    padding:8px;
    background:#fff;
    border-radius:8px;
  }
  .ma-addpay-row + .ma-addpay-row{
    margin-top:8px;
    border-top:none;
    padding-top:8px;
  }
  .ma-addpay-cell::before{
    content:attr(data-lbl);
    font-size:11px; font-weight:700; color:#065f46;
    text-transform:uppercase; letter-spacing:.3px;
    margin-right:6px;
  }
  .ma-addpay-x{ align-self:flex-end; margin-top:0; }
}

/* Dark-mode */
html[data-theme="dark"] .ma-addpay-card{
  background:#064e3b; border-color:#065f46;
}
html[data-theme="dark"] .ma-addpay-title,
html[data-theme="dark"] .ma-addpay-th,
html[data-theme="dark"] .ma-addpay-fully,
html[data-theme="dark"] .ma-addpay-sum-row{ color:#a7f3d0; }
html[data-theme="dark"] .ma-addpay-title-sub,
html[data-theme="dark"] .ma-addpay-split{ color:#6ee7b7; }
html[data-theme="dark"] .ma-addpay-inp{
  background:#0f172a; border-color:#065f46; color:#f1f5f9;
}
html[data-theme="dark"] .ma-addpay-x{
  background:#0f172a; border-color:#065f46; color:#94a3b8;
}
html[data-theme="dark"] .ma-addpay-thead,
html[data-theme="dark"] .ma-addpay-row + .ma-addpay-row,
html[data-theme="dark"] .ma-addpay-summary{ border-color:#065f46; }
html[data-theme="dark"] .ma-addpay-sum-bal.is-positive{ color:#fca5a5; }
html[data-theme="dark"] .ma-addpay-sum-bal.is-zero{ color:#6ee7b7; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.460 — Overpayment warning inside the Add Payment card
   ──────────────────────────────────────────────────────────────────────
   Shown when the sum of payment rows exceeds the invoice total. Has
   a warning icon on the left, a message + "Allow overpayment"
   checkbox on the right. The checkbox is required to save so users
   can't accidentally overpay (extra 0 typo), but genuine advances
   are still one click away.
════════════════════════════════════════════════════════════════════════ */

.ma-addpay-warn{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 12px;
  margin-top:8px;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
  color:#7f1d1d;
}
.ma-addpay-warn-icon{
  flex-shrink:0;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#dc2626;
  color:#fff;
  border-radius:50%;
  font-size:14px; font-weight:700;
}
.ma-addpay-warn-body{ flex:1; min-width:0; }
.ma-addpay-warn-title{
  font-size:13px; font-weight:700; color:#b91c1c;
  margin-bottom:3px;
}
.ma-addpay-warn-msg{
  font-size:12.5px; color:#7f1d1d;
  line-height:1.5;
}
.ma-addpay-warn-msg b{
  font-weight:700; color:#dc2626;
  font-variant-numeric:tabular-nums;
}
.ma-addpay-warn-chk{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px;
  font-size:12.5px; font-weight:600; color:#b91c1c;
  cursor:pointer;
  user-select:none;
}
.ma-addpay-warn-chk input[type="checkbox"]{
  width:16px; height:16px;
  accent-color:#dc2626;
  cursor:pointer;
}

/* Dark-mode */
html[data-theme="dark"] .ma-addpay-warn{ background:#450a0a; border-color:#7f1d1d; color:#fca5a5; }
html[data-theme="dark"] .ma-addpay-warn-title{ color:#fca5a5; }
html[data-theme="dark"] .ma-addpay-warn-msg{ color:#fecaca; }
html[data-theme="dark"] .ma-addpay-warn-msg b{ color:#fca5a5; }
html[data-theme="dark"] .ma-addpay-warn-chk{ color:#fca5a5; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.463 — Redesigned Payment-Type sidebar with multi-row Add
   Payment card. Mirrors the Create-Invoice add-payment UI so users
   see a familiar layout when editing a payment after the fact.
════════════════════════════════════════════════════════════════════ */

/* Reference chips at the top: Invoice Total / Previously Paid */
.ipt-ref-chips{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.ipt-chip{
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  border-radius:8px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ipt-chip-lbl{
  font-size:11px;
  color:#6B7280;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
}
.ipt-chip-val{
  font-size:15px;
  color:#111827;
  font-weight:700;
  font-feature-settings:"tnum";
}

/* Add Payment card (matches invoice-create layout) */
.ipt-addpay-card{
  background:#F0FDF4;
  border:1px solid #BBF7D0;
  border-radius:10px;
  padding:14px;
  margin-top:14px;
}
.ipt-addpay-title{
  font-size:14px;
  font-weight:600;
  color:#065F46;
  margin-bottom:12px;
}
.ipt-addpay-title-sub{
  font-weight:400;
  color:#047857;
  font-size:12px;
  margin-left:4px;
}
.ipt-addpay-head{
  display:grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr 32px;
  gap:8px;
  padding:0 4px 6px;
  font-size:11px;
  color:#065F46;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ipt-addpay-row{
  display:grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr 32px;
  gap:8px;
  margin-bottom:8px;
  align-items:start;
}
.ipt-cell{ min-width:0; }
.ipt-inp{
  width:100%;
  padding:7px 9px;
  border:1px solid #D1FAE5;
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  background:#fff;
  color:#111827;
  box-sizing:border-box;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ipt-inp:focus{
  border-color:#10B981;
  box-shadow:0 0 0 2px rgba(16,185,129,.18);
}
.ipt-notes{ resize:vertical; min-height:38px; }
.ipt-amt{ text-align:right; font-feature-settings:"tnum"; font-weight:600; }
.ipt-x-btn{
  width:28px;height:28px;
  border:1px solid #FCA5A5;
  background:#FEF2F2;
  color:#DC2626;
  border-radius:6px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
  margin-top:3px;
}
.ipt-x-btn:hover{ background:#DC2626; color:#fff; border-color:#DC2626; }

.ipt-addpay-actions{ margin:8px 0 4px; }
.ipt-addpay-add{
  background:transparent;
  border:1px dashed #10B981;
  color:#047857;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:500;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  transition:background .12s, border-style .12s;
}
.ipt-addpay-add:hover{
  background:#DCFCE7;
  border-style:solid;
}

/* Summary block */
.ipt-addpay-summary{
  margin-top:14px;
  padding:12px 4px 4px;
  border-top:1px dashed #BBF7D0;
}
.ipt-sum-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  font-size:13px;
  color:#065F46;
}
.ipt-sum-row > span:last-child{
  font-weight:700;
  font-feature-settings:"tnum";
  color:#111827;
}
.ipt-sum-row.ipt-sum-status{
  padding-top:10px;
  border-top:1px solid #BBF7D0;
  margin-top:4px;
}
#ipt-sum-balance.is-zero{ color:#047857; }
#ipt-sum-balance.is-positive{ color:#B45309; }
#ipt-sum-balance.is-negative{ color:#DC2626; }

.ipt-status-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
}
.ipt-status-pill.paid    { background:#D1FAE5; color:#047857; }
.ipt-status-pill.partial { background:#FEF3C7; color:#B45309; }
.ipt-status-pill.pending { background:#FEE2E2; color:#B91C1C; }

/* Widen the sidebar a bit to fit the 5-column add-pay grid */
.ip-side{ width:min(560px, 100vw) !important; }
/* v3.9.464 — Sidebar mobile redesign.
   The previous 4-column squeeze made Amount / Date / Mode inputs
   tiny and unusable on phones. New behaviour on ≤640 px:
     • Each payment row renders as a bordered CARD (stacked layout)
     • Field labels appear ABOVE each input so nothing is guess-work
     • Amount + Date share a 2-col mini-grid (they're both short)
     • Mode + Notes stack full-width
     • Remove ✕ moves to the card's top-right corner
     • All inputs get 40 px min-height for touch friendliness
     • Ref chips (Invoice Total / Previously Paid) collapse into a
       cleaner single column with tighter padding
     • Sidebar body padding trimmed so nothing hugs the viewport edge
     • Sticky footer with Save / Cancel so users don't have to
       scroll a long form to reach the CTA */
@media (max-width:640px){

  /* Sidebar body — tighter padding so real content has more room */
  .ip-side .ec-side-body{ padding:12px !important; }
  .ip-side .ec-side-head{ padding:12px 12px 10px !important; }
  .ip-side .ec-side-title{ font-size:15px; }

  /* Ref chips: keep 2-across but shrink type + padding */
  .ipt-ref-chips{ gap:8px; margin-bottom:12px; }
  .ipt-chip{ padding:8px 10px; }
  .ipt-chip-lbl{ font-size:10px; }
  .ipt-chip-val{ font-size:14px; }

  /* Default Payment Type dropdown — bigger tap target */
  .ip-fg select{ min-height:40px; font-size:14px; padding:8px 10px !important; }

  /* Add Payment card — a bit less internal padding on phones */
  .ipt-addpay-card{ padding:12px 10px; }
  .ipt-addpay-title{ font-size:13.5px; margin-bottom:10px; }
  .ipt-addpay-title-sub{ display:block; margin-left:0; margin-top:2px; }

  /* Hide the desktop header row entirely — each mobile row now
     carries its own labels inline. */
  .ipt-addpay-head{ display:none !important; }

  /* Each row becomes a bordered card, stacked vertically. */
  .ipt-addpay-row{
    display:block;
    background:#fff;
    border:1px solid #BBF7D0;
    border-radius:8px;
    padding:10px 10px 8px;
    margin-bottom:10px;
    position:relative;
    grid-template-columns:none;
    gap:0;
  }
  .ipt-addpay-row + .ipt-addpay-row{ margin-top:10px; }

  /* Every cell picks up a label from its data-f attribute (set via ::before) */
  .ipt-cell{ margin-bottom:10px; }
  .ipt-cell:last-child{ margin-bottom:0; }
  .ipt-cell::before{
    display:block;
    font-size:10.5px;
    font-weight:600;
    color:#065F46;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:4px;
    line-height:1;
  }
  .ipt-cell-amt::before   { content:"Amount"; }
  .ipt-cell-date::before  { content:"Date"; }
  .ipt-cell-mode::before  { content:"Mode"; }
  .ipt-cell-notes::before { content:"Notes"; }

  /* Amount + Date sit side-by-side in a mini grid; both are compact */
  .ipt-cell-amt,
  .ipt-cell-date{
    display:inline-block;
    width:calc(50% - 5px);
    vertical-align:top;
    margin-bottom:10px;
  }
  .ipt-cell-amt{ margin-right:10px; }
  .ipt-cell-mode,
  .ipt-cell-notes{ display:block; width:100%; }

  /* Bigger tap targets on inputs */
  .ipt-inp{
    min-height:40px;
    font-size:14px;
    padding:9px 10px;
  }
  .ipt-notes{ min-height:60px; }

  /* Remove ✕ pinned to the row's top-right corner. Give it its own
     dedicated cell so it doesn't compete with the fields. */
  .ipt-cell-x{
    position:absolute;
    top:8px;
    right:8px;
    margin:0;
  }
  .ipt-x-btn{
    width:32px; height:32px;
    font-size:18px;
    margin-top:0;
  }

  /* "Add another payment" — full-width so it's easy to tap */
  .ipt-addpay-actions{ margin:6px 0 2px; }
  .ipt-addpay-add{
    width:100%;
    justify-content:center;
    min-height:40px;
    font-size:13.5px;
  }

  /* Summary — cleaner spacing */
  .ipt-addpay-summary{ padding:12px 2px 4px; }
  .ipt-sum-row{ padding:8px 0; font-size:13.5px; }

  /* Footer — make the Save / Cancel buttons stick to the bottom edge
     and stretch full-width so users don't have to hunt for them */
  .ip-side .ec-side-foot{
    position:sticky;
    bottom:0;
    background:#fff;
    padding:10px 12px;
    display:flex;
    gap:8px;
    border-top:1px solid #E5E7EB;
    box-shadow:0 -4px 12px rgba(0,0,0,.04);
  }
  .ip-side .ec-side-foot .ma-btn{
    flex:1;
    min-height:44px;
    justify-content:center;
    font-size:14px;
    font-weight:600;
  }
}

/* v3.9.464 — Even narrower phones (≤380 px) — chips stack too so nothing overflows */
@media (max-width:380px){
  .ipt-ref-chips{ grid-template-columns:1fr; }
  .ipt-cell-amt,
  .ipt-cell-date{
    display:block;
    width:100%;
    margin-right:0;
  }
}
/* ═════════════════════════════════════════════════════════════════ */
/* ══════════════════ END v3.9.463 sidebar add-payment ══════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.466 — Packing List: mobile card layout for Product Items
   ──────────────────────────────────────────────────────────────────────
   Desktop keeps its rowspan table; mobile switches to stacked package
   cards matching the reference screenshots — each package has a
   header, a list of product mini-cards, a footer with Kind Of
   Package / Gross weight / Dimension, and −/+ action buttons.
════════════════════════════════════════════════════════════════════════ */

/* Default: hide the mobile container on desktop, show the desktop table */
.cpk-mobile-list{ display:none; }

@media (max-width:640px){
  /* Show mobile cards; hide the desktop table wrapper + tfoot totals row */
  .cpk-mobile-list{ display:block; }
  #pg-create-packing-list .cpk-desktop-wrap{ display:none; }

  .cpk-m-pkg{
    background:#fff;
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:10px;
    margin-bottom:14px;
    overflow:hidden;
  }
  .cpk-m-pkg-hdr{
    display:flex; align-items:center; gap:2px;
    padding:10px 14px;
    background:var(--surf2, #f3f4f6);
    border-bottom:1px solid var(--bdr, #e5e7eb);
    font-size:14px; font-weight:700;
    color:var(--text, #111);
  }
  .cpk-m-pkg-hdr-lbl{ color:var(--text, #111); }
  .cpk-m-pkg-hdr-inp{
    width:44px;
    padding:2px 4px;
    border:none;
    background:transparent;
    font-family:inherit; font-size:14px; font-weight:700;
    color:var(--text, #111);
    text-align:left;
    outline:none;
  }
  .cpk-m-pkg-hdr-inp:focus{
    border-bottom:1px dashed var(--brand, #10b981);
  }

  .cpk-m-prods{ padding:0 14px; }

  /* Each product mini-card */
  .cpk-m-prod{
    padding:14px 0 12px;
    border-bottom:1px solid var(--bdr, #e5e7eb);
  }
  .cpk-m-prod:last-child{ border-bottom:none; }

  .cpk-m-prod-hdr{
    display:flex; align-items:flex-start; gap:8px;
    margin-bottom:8px;
  }
  .cpk-m-sr{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; height:34px;
    padding:0 8px;
    background:var(--surf2, #f3f4f6);
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:6px;
    font-size:13px; font-weight:600;
    color:var(--text, #111);
    flex-shrink:0;
  }

  .cpk-m-inp{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:6px;
    font-family:inherit; font-size:13.5px;
    color:var(--text, #111);
    background:#fff;
    outline:none;
    box-sizing:border-box;
    transition:border-color .12s, box-shadow .12s;
  }
  .cpk-m-inp:focus{
    border-color:var(--brand, #10b981);
    box-shadow:0 0 0 2px rgba(16,185,129,.15);
  }
  .cpk-m-inp[data-fld="desc"]{
    resize:vertical;
    min-height:34px;
    line-height:1.4;
  }
  .cpk-m-note{
    margin-top:8px;
    min-height:52px;
    resize:vertical;
    line-height:1.4;
  }
  .cpk-m-inp[data-fld="qty"],
  .cpk-m-inp[data-fld="nopkg"],
  .cpk-m-inp[data-fld="netwt"],
  .cpk-m-inp[data-fld="gross"]{
    text-align:left;
    font-variant-numeric:tabular-nums;
  }

  /* Two-column rows for Qty+NoPkg / Kind+Gross */
  .cpk-m-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:8px;
  }
  /* Right-aligned single-input row: Net weight, Dimension */
  .cpk-m-row-right{
    grid-template-columns:1fr 1fr;
  }
  .cpk-m-row-right > .cpk-m-inp:only-child{ grid-column:2; }

  /* − delete / + add action buttons */
  .cpk-m-actions{
    display:flex; align-items:center; justify-content:flex-end;
    gap:10px;
    margin-top:10px;
  }
  .cpk-m-btn{
    width:32px; height:32px;
    border:none;
    border-radius:50%;
    color:#fff;
    font-size:18px; font-weight:700; line-height:1;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 1px 2px rgba(0,0,0,.1);
    transition:transform .1s, box-shadow .1s;
  }
  .cpk-m-btn:active{ transform:translateY(1px); box-shadow:none; }
  .cpk-m-btn-add{ background:var(--brand, #10b981); }
  .cpk-m-btn-add:hover{ background:var(--brand-dd, #059669); }
  .cpk-m-btn-del{ background:#ef4444; }
  .cpk-m-btn-del:hover{ background:#dc2626; }

  /* Package footer */
  .cpk-m-foot{
    padding:12px 14px 14px;
    background:var(--surf2, #f3f4f6);
    border-top:1px solid var(--bdr, #e5e7eb);
  }
  .cpk-m-foot .cpk-m-inp{
    background:#fff;
  }

  /* Combo picker dropdown positioning inside mobile cards */
  .cpk-m-prod .ma-combo-drop{
    left:0; right:0;
    top:calc(100% + 2px);
  }
}

/* Dark-mode */
html[data-theme="dark"] .cpk-m-pkg{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .cpk-m-pkg-hdr,
html[data-theme="dark"] .cpk-m-foot{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .cpk-m-pkg-hdr-lbl,
html[data-theme="dark"] .cpk-m-pkg-hdr-inp,
html[data-theme="dark"] .cpk-m-sr,
html[data-theme="dark"] .cpk-m-inp{ color:#f1f5f9; }
html[data-theme="dark"] .cpk-m-sr{ background:#334155; border-color:#475569; }
html[data-theme="dark"] .cpk-m-inp{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .cpk-m-foot .cpk-m-inp{ background:#1e293b; }
html[data-theme="dark"] .cpk-m-prod{ border-color:#334155; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.468 — Custom Field auto-render target
   ──────────────────────────────────────────────────────────────────────
   Container that holds custom fields rendered into every Invoice-
   Detail-style card (Sale Invoice, Purchase Invoice, Packing List,
   MC Invoice, etc.). Uses the existing .gst-fr styling so the fields
   look native.
════════════════════════════════════════════════════════════════════════ */

.bci-cf-target{
  display:contents;   /* let child rows participate in the card's grid */
}
.bci-cf-render-row{
  /* Native .gst-fr styling already applies — this class is here so we
     can later distinguish user-added fields from stock ones. */
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.470 — "since N days" indicator under the pending/partial pill
   on the Sale Invoice list. Small muted grey line, centered under the
   pill+bell row.
════════════════════════════════════════════════════════════════════════ */
.ma-pay-since{
  margin-top:4px;
  font-size:10.5px;
  color:#9ca3af;
  text-align:center;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  letter-spacing:.15px;
}
html[data-theme="dark"] .ma-pay-since{ color:#64748b; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.471 — Retitle the Delivery Challan Detail card on the reused
   CDC page based on which document mode is active. The mode classes
   (.cdc-form-qt-mode, .cdc-form-so-mode, etc.) are added to
   #pg-create-delivery-challan by JS in _applyXxxModeToDcForm; this
   CSS provides a bulletproof visual override that doesn't depend on
   JS textContent replacement succeeding. Uses :has() which is now
   supported in all modern browsers.
════════════════════════════════════════════════════════════════════════ */

/* Hide the original title text (only in the card that has .bci-cf-btn,
   which is the Detail card) when a mode class is active. */
#pg-create-delivery-challan.cdc-form-qt-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title,
#pg-create-delivery-challan.cdc-form-so-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title,
#pg-create-delivery-challan.cdc-form-po-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title,
#pg-create-delivery-challan.cdc-form-sr-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title,
#pg-create-delivery-challan.cdc-form-cn-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title,
#pg-create-delivery-challan.cdc-form-dn-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title{
  font-size:0;
  line-height:0;
  color:transparent;
}

/* Inject the mode-specific label via ::before. Font styling restored. */
#pg-create-delivery-challan.cdc-form-qt-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Quotation Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}
#pg-create-delivery-challan.cdc-form-so-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Sale Order Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}
#pg-create-delivery-challan.cdc-form-po-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Purchase Order Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}
#pg-create-delivery-challan.cdc-form-sr-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Service Request Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}
#pg-create-delivery-challan.cdc-form-cn-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Credit Note Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}
#pg-create-delivery-challan.cdc-form-dn-mode .gst-card-hdr:has(> .bci-cf-btn) > .gst-card-title::before{
  content:"Debit Note Detail";
  font-size:14px;
  line-height:1.4;
  color:var(--text, #111);
  font-weight:inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.480 — GLOBAL DASHBOARD CHART MOBILE POLISH (revised)
   ────────────────────────────────────────────────────────────────
   Previous v3.9.479 forced `min-height:220px` on .ma-graph which made
   the container taller than the SVG's natural 600:270 aspect ratio.
   With `preserveAspectRatio="xMidYMid meet"` the SVG then centred
   inside a shorter horizontal band, leaving big empty strips top &
   bottom (visible in user's screenshot as "chart shows upper side").
   Fix: let the SVG's own aspect drive container height. Also toned
   down the SVG text-size bump — 14px in viewBox units was overkill
   and caused the "Aug 20Sep 20..." label overlap. Now labels use
   the year-only-on-change format from NVE (see JS change).
════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Keep the SVG text visible but not so big it overlaps siblings. */
  .ma-graph-svg text{ font-size:11px !important; }

  /* Legacy .ma-graph containers — no min-height, so the SVG's natural
     aspect determines the visual height (no more empty strips). */
  .ma-graph{ min-height:0; }
  .ma-graph-empty{ min-height:160px; }

  /* Invoice Count / Amount Summary cards — tighter padding, smaller
     card titles, chart takes full width. Extra bottom padding to
     make room for rotated (-30°) X-axis labels that overflow the
     SVG viewBox slightly. */
  .ma-inv-summary-body{ padding:12px 12px 26px; }
  .ma-inv-summary-card .ma-card-hdr{ padding:12px 14px; }
  .ma-inv-summary-card .ma-card-title{ font-size:14px; }
  .ma-chart-legend{ font-size:11.5px; gap:12px; margin-top:14px; }

  /* NVE graph card — same bottom padding as Invoice cards */
  .ma-nve-graph{ padding-bottom:20px; }

  /* New-vs-Existing card — header legend wraps on narrow screens */
  .ma-nve-hdr-r{ flex-wrap:wrap; gap:6px 10px; font-size:11.5px; }

  /* Payment Summary donut — cap size so it doesn't overflow narrow
     mobile columns and centres cleanly. */
  .ma-dash-paysum-donut{ display:flex; justify-content:center; }
  .ma-dash-paysum-donut svg{ max-width:200px; width:100%; height:auto; }

  /* Expense / Income card body — donut/bars centred and sized to
     match the card padding. */
  .ma-kpi3-eichart-donut,
  .ma-kpi3-eichart-bars{
    min-height:200px;
    display:flex; align-items:center; justify-content:center;
    padding:6px 0 10px;
  }
  .ma-kpi3-eichart-donut svg{
    max-width:180px; width:100%; height:auto;
  }
  .ma-kpi3-eichart-bars svg{
    width:100%; height:auto; max-height:200px;
  }
  /* Bump the EI donut/bar SVG text on mobile */
  .ma-kpi3-eichart-donut text,
  .ma-kpi3-eichart-bars text{ font-size:11px !important; }

  /* Outstanding cards — full-width horizontal bars (already responsive) */
  .ma-oc2-bar{ min-height:8px; }

  /* Chart tooltips — ensure they render above SVG on touch devices */
  .ma-graph-tip{
    max-width:220px;
    font-size:12px;
    z-index:50;
    pointer-events:none;
  }
}

/* Extra-narrow phones — labels stay legible; container heights match. */
@media (max-width:400px){
  .ma-graph-svg text{ font-size:12px !important; }
  .ma-inv-summary-body{ padding:10px 8px 8px; }
  .ma-nve-hdr-r{ font-size:11px; }
}
/* ═══════════ END v3.9.480 dashboard chart mobile polish ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.483 — EXPENSE & INCOME HERO
   ────────────────────────────────────────────────────────────────
   Full-width dashboard card matching the reference image. Orange
   accent + red/green semantic colours for expense/income. Layout:
     • Header  — orange icon badge · title/subtitle · month pill · toggle
     • Body    — 3-column grid: KPIs left · Donut middle · Progress+Insight right
     • Footer  — Expense trend line chart
════════════════════════════════════════════════════════════════════ */
.ma-ei-hero{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:16px;
  padding:24px 26px 22px;
  margin-bottom:22px;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
html[data-theme="dark"] .ma-ei-hero{
  background:var(--surf, #1e293b);
  border-color:rgba(255,255,255,.08);
}

/* ── Header ── */
.ma-ei-hero-hdr{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.ma-ei-hero-hdr-l{ display:flex; align-items:center; gap:14px; min-width:0; }
.ma-ei-hero-hdr-r{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ma-ei-hero-icon{
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:12px;
  background:#F59E0B;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(245,158,11,.24);
}
.ma-ei-hero-hdr-txt{ min-width:0; }
.ma-ei-hero-title{
  font-size:20px; font-weight:800; line-height:1.15;
  color:var(--text, #0F172A);
  letter-spacing:-0.4px;
}
.ma-ei-hero-sub{
  font-size:13.5px; color:var(--muted, #6B7280);
  margin-top:2px;
}
.ma-ei-hero-date{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  font-size:13px; font-weight:600;
  color:var(--text, #0F172A);
  cursor:default; user-select:none;
}
.ma-ei-hero-date svg:first-child{ color:#F59E0B; }
.ma-ei-hero-toggle{
  width:38px; height:38px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  background:#fff;
  color:#6B7280;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ma-ei-hero-toggle:hover{ background:#F9FAFB; color:#4F46E5; border-color:#C7D2FE; }

/* ── Body: 3-column grid ── */
.ma-ei-hero-body{
  display:grid;
  grid-template-columns:minmax(220px, 260px) 1fr minmax(260px, 320px);
  gap:20px;
  align-items:stretch;
  padding:6px 0 16px;
}
@media(max-width:1200px){
  .ma-ei-hero-body{ grid-template-columns:1fr 1fr; }
  .ma-ei-hero-right{ grid-column:1 / -1; grid-template-columns:1fr 1fr 1fr; display:grid; gap:12px; }
}
@media(max-width:900px){
  .ma-ei-hero-body{ grid-template-columns:1fr; }
  .ma-ei-hero-right{ grid-template-columns:1fr; }
}

/* ── LEFT: KPIs + Net Balance ── */
.ma-ei-hero-left{ display:flex; flex-direction:column; gap:0; }
.ma-ei-kpi{ padding:4px 0; }
.ma-ei-kpi-lbl{
  font-size:11.5px; font-weight:700;
  color:var(--muted, #6B7280);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:6px;
}
.ma-ei-kpi-val{
  font-size:32px; font-weight:800; line-height:1.05;
  letter-spacing:-0.6px;
  font-feature-settings:"tnum";
}
.ma-ei-exp-val{ color:#EF4444; }
.ma-ei-inc-val{ color:#10B981; }
.ma-ei-kpi-trend{
  display:flex; align-items:center; gap:8px;
  margin-top:10px;
  font-size:12.5px;
  color:var(--muted, #6B7280);
}
.ma-ei-trend-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px;
  border-radius:999px;
  font-weight:700; font-size:11.5px;
}
.ma-ei-trend-pill.ma-ei-trend-up   { background:#D1FAE5; color:#059669; }
.ma-ei-trend-pill.ma-ei-trend-down { background:#FEE2E2; color:#DC2626; }
.ma-ei-trend-pill.ma-ei-trend-flat { background:#F3F4F6; color:#6B7280; }
.ma-ei-hero-sep{
  height:1px;
  background:linear-gradient(90deg, transparent, #E5E7EB 30%, #E5E7EB 70%, transparent);
  margin:16px 0;
}
html[data-theme="dark"] .ma-ei-hero-sep{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent); }

.ma-ei-netbal{
  margin-top:16px;
  display:flex; align-items:center; gap:12px;
  padding:14px 14px;
  background:#FEF2F2;
  border:1px solid #FEE2E2;
  border-radius:12px;
}
.ma-ei-netbal-ico{
  width:40px; height:40px; border-radius:10px;
  background:#FEE2E2; color:#DC2626;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ma-ei-netbal-body{ min-width:0; }
.ma-ei-netbal-lbl{
  font-size:10.5px; font-weight:700;
  color:var(--muted, #6B7280);
  text-transform:uppercase; letter-spacing:.06em;
}
.ma-ei-netbal-val{
  font-size:22px; font-weight:800; line-height:1.15;
  color:#DC2626;
  font-feature-settings:"tnum";
}
.ma-ei-netbal-val.ma-ei-netbal-positive{ color:#059669; }
.ma-ei-netbal-sub{ font-size:11.5px; color:var(--muted, #6B7280); margin-top:2px; }

/* ── MIDDLE: big donut + legend ── */
.ma-ei-hero-mid{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; min-width:0;
  padding:4px 0;
}
.ma-ei-hero-mid .ma-kpi3-eichart-donut,
.ma-ei-hero-mid .ma-kpi3-eichart-bars{
  width:100%; max-width:280px; margin:0; padding:0;
  display:flex; justify-content:center; align-items:center;
  min-height:220px;
}
.ma-ei-hero-mid .ma-kpi3-eichart-donut svg,
.ma-ei-hero-mid .ma-kpi3-eichart-bars svg{
  width:100%; height:auto; max-width:260px;
}
.ma-ei-hero-legend{
  display:flex; align-items:center; gap:20px;
  font-size:13.5px; color:var(--text, #0F172A);
}
.ma-ei-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.ma-ei-legend-dot{
  width:10px; height:10px; border-radius:50%; display:inline-block;
}
.ma-ei-dot-exp{ background:#EF4444; }
.ma-ei-dot-inc{ background:#10B981; }

/* ── RIGHT: progress cards + insight ── */
.ma-ei-hero-right{
  display:flex; flex-direction:column; gap:12px;
}
@media(max-width:1200px){
  .ma-ei-hero-right{ flex-direction:row; }
  .ma-ei-hero-right > *{ flex:1; }
}
@media(max-width:900px){
  .ma-ei-hero-right{ flex-direction:column; }
}
/* v3.9.484 — Wrapper for the two progress cards with a dotted
   vertical line connecting them (like a timeline). The two cards
   are direct children of .ma-ei-prog-wrap. */
.ma-ei-prog-wrap{
  position:relative;
  display:flex; flex-direction:column;
  gap:12px;
}
.ma-ei-prog-connector{
  position:absolute;
  left:22px;                 /* aligns with the centre of the circular icon badges */
  top:56px;                  /* below the first card's icon */
  bottom:56px;               /* above the second card's icon */
  width:0;
  border-left:2px dotted #E5E7EB;
  pointer-events:none;
}
html[data-theme="dark"] .ma-ei-prog-connector{ border-left-color:rgba(255,255,255,.14); }

.ma-ei-prog{
  display:flex; gap:14px;
  padding:14px;
  border-radius:12px;
  border:1px solid #EEF0F3;
  position:relative;         /* so it stacks above the connector line */
  background:#fff;
}
.ma-ei-prog-exp{ background:#FEF2F2; border-color:#FECACA; }
.ma-ei-prog-inc{ background:#ECFDF5; border-color:#A7F3D0; }

/* v3.9.484 — CIRCULAR icon badge (was rounded-square before). Matches
   the reference: pale-red / pale-green filled circle with the arrow
   icon centred inside. */
.ma-ei-prog-ico{
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-ei-prog-exp .ma-ei-prog-ico{ background:#FEE2E2; color:#DC2626; }
.ma-ei-prog-inc .ma-ei-prog-ico{ background:#D1FAE5; color:#059669; }
.ma-ei-prog-body{ flex:1; min-width:0; }
.ma-ei-prog-lbl{
  font-size:10.5px; font-weight:700;
  color:var(--muted, #6B7280);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:6px;
}
/* v3.9.484 — Amount + % pill on the SAME row (was stacked before). */
.ma-ei-prog-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.ma-ei-prog-amt{
  font-size:17px; font-weight:800;
  color:var(--text, #0F172A);
  line-height:1.1;
  font-feature-settings:"tnum";
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-ei-prog-pct{
  padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:700;
  flex-shrink:0;
}
.ma-ei-prog-exp .ma-ei-prog-pct{ background:#FEE2E2; color:#DC2626; }
.ma-ei-prog-inc .ma-ei-prog-pct{ background:#D1FAE5; color:#059669; }
.ma-ei-prog-bar-wrap{
  height:6px; background:rgba(255,255,255,.7);
  border-radius:999px; overflow:hidden;
  position:relative;
}
html[data-theme="dark"] .ma-ei-prog-bar-wrap{ background:rgba(0,0,0,.25); }
.ma-ei-prog-bar{
  height:100%; border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.ma-ei-prog-bar-exp{ background:linear-gradient(90deg, #F87171, #DC2626); }
.ma-ei-prog-bar-inc{ background:linear-gradient(90deg, #34D399, #059669); }
.ma-ei-prog-foot{
  font-size:10.5px; color:var(--muted, #6B7280);
  text-align:right; margin-top:4px; font-weight:600;
}

/* v3.9.484 — INSIGHT card: text on left, wallet illustration on right.
   Layout mirrors the reference — icon + label + text sit together on
   the left; decorative SVG floats right, hidden on very narrow screens. */
.ma-ei-insight{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg, #FEF3C7 0%, #FEF9E7 100%);
  border:1px solid #FDE68A;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.ma-ei-insight-l{
  display:flex; gap:12px; align-items:flex-start;
  flex:1; min-width:0;
}
.ma-ei-insight-ico{
  width:36px; height:36px; border-radius:9px;
  background:#F59E0B; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 2px 6px rgba(245,158,11,.28);
}
.ma-ei-insight-body{ flex:1; min-width:0; }
.ma-ei-insight-lbl{
  font-size:10.5px; font-weight:800;
  color:#B45309;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:2px;
}
.ma-ei-insight-txt{
  font-size:13px; line-height:1.45;
  color:#78350F;
}
.ma-ei-insight-illo{
  flex-shrink:0;
  width:80px; height:70px;
  display:flex; align-items:center; justify-content:center;
}
@media(max-width:480px){
  .ma-ei-insight-illo{ display:none; }
}

/* ── BOTTOM: Expense trend row ── */
.ma-ei-trend-row{
  display:grid;
  grid-template-columns:minmax(220px, 300px) 1fr;
  align-items:center;
  gap:24px;
  padding:16px 18px;
  background:#F9FAFB;
  border:1px solid #EEF0F3;
  border-radius:12px;
  margin-top:8px;
}
@media(max-width:768px){
  .ma-ei-trend-row{ grid-template-columns:1fr; gap:12px; padding:14px; }
}
html[data-theme="dark"] .ma-ei-trend-row{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.06);
}
.ma-ei-trend-left{ display:flex; align-items:center; gap:12px; }
.ma-ei-trend-ico{
  width:44px; height:44px; border-radius:11px;
  background:#EDE9FE; color:#7C3AED;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ma-ei-trend-lbl-hd{
  font-size:10.5px; font-weight:800;
  color:#7C3AED;
  text-transform:uppercase; letter-spacing:.08em;
}
.ma-ei-trend-title{
  font-size:15px; font-weight:800;
  color:var(--text, #0F172A);
  line-height:1.2; margin-top:2px;
}
.ma-ei-trend-sub{
  font-size:12px; color:var(--muted, #6B7280); margin-top:2px;
}
.ma-ei-trend-chart{
  width:100%; height:120px;
  min-width:0;
}
.ma-ei-trend-chart svg{ width:100%; height:100%; display:block; }

/* ── Big donut center label overlay ── */
.ma-ei-hero-mid .ma-kpi3-eichart-donut{ position:relative; }
.ma-ei-donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; pointer-events:none;
}
.ma-ei-donut-center-ico{
  width:32px; height:32px; border-radius:8px;
  background:#FEE2E2; color:#DC2626;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.ma-ei-donut-center.is-inc .ma-ei-donut-center-ico{ background:#D1FAE5; color:#059669; }
.ma-ei-donut-center-pct{
  font-size:26px; font-weight:800; color:var(--text, #0F172A);
  line-height:1; letter-spacing:-0.5px;
}
.ma-ei-donut-center-lbl{
  font-size:12px; color:var(--muted, #6B7280); margin-top:2px;
}
.ma-ei-donut-center-trend{
  margin-top:4px;
  padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:3px;
  background:#FEE2E2; color:#DC2626;
}
.ma-ei-donut-center.is-inc .ma-ei-donut-center-trend{ background:#D1FAE5; color:#059669; }

/* ── Mobile polish ≤ 640 px ── */
@media(max-width:640px){
  .ma-ei-hero{ padding:16px 14px 14px; border-radius:12px; }
  .ma-ei-hero-hdr{ flex-wrap:wrap; gap:10px 12px; margin-bottom:12px; }
  .ma-ei-hero-icon{ width:40px; height:40px; border-radius:10px; }
  .ma-ei-hero-icon svg{ width:22px; height:22px; }
  .ma-ei-hero-title{ font-size:16px; }
  .ma-ei-hero-sub{ font-size:12px; }
  .ma-ei-hero-date{ padding:6px 10px; font-size:12px; }
  .ma-ei-hero-toggle{ width:34px; height:34px; }
  .ma-ei-kpi-val{ font-size:24px; }
  .ma-ei-netbal-val{ font-size:18px; }
  .ma-ei-hero-mid .ma-kpi3-eichart-donut{ max-width:220px; min-height:200px; }
  .ma-ei-hero-mid .ma-kpi3-eichart-donut svg{ max-width:200px; }
  .ma-ei-donut-center-pct{ font-size:22px; }
  .ma-ei-prog-amt{ font-size:16px; }
  .ma-ei-trend-chart{ height:90px; }
  .ma-ei-trend-title{ font-size:14px; }
  .ma-ei-trend-ico{ width:36px; height:36px; }
}
/* ═════════════ END v3.9.483 Expense & Income hero ═════════════ */

/* v3.9.484 — Tooltip for the Expense Trend chart at the bottom of
   the Expense & Income hero. Dark-navy card, uppercase month
   header, red bullet + label + amount — matches the reference
   tooltip style used across the dashboard hero charts. */
.ma-ei-trend-chart{ position:relative; }
.ma-ei-trend-hit{ pointer-events:all; }
.ma-ei-trend-tip{
  position:absolute;
  left:0; top:0;
  min-width:150px;
  padding:8px 12px 9px;
  background:#0F172A;
  color:#F8FAFC;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(15,23,42,.25);
  font-size:12px;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
  z-index:20;
  --tt-arrow-left:50%;
}
.ma-ei-trend-tip.on{
  opacity:1;
  transform:translateY(0);
}
.ma-ei-trend-tip-h{
  font-size:10.5px;
  font-weight:700;
  color:#94A3B8;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.ma-ei-trend-tip-r{
  display:flex; align-items:center; gap:6px;
}
.ma-ei-trend-tip-bull{
  width:8px; height:8px; border-radius:50%;
  background:#EF4444;
  flex-shrink:0;
}
.ma-ei-trend-tip-lbl{
  color:#CBD5E1;
  font-weight:500;
}
.ma-ei-trend-tip-val{
  margin-left:auto;
  color:#FFFFFF;
  font-weight:700;
  font-feature-settings:"tnum";
}
/* Arrow at the bottom of the tooltip, pointing down at the dot */
.ma-ei-trend-tip::after{
  content:"";
  position:absolute;
  left:var(--tt-arrow-left);
  bottom:-4px;
  transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px;
  background:#0F172A;
  border-radius:1px;
}
/* When flipped below the dot, arrow moves to the top edge */
.ma-ei-trend-tip.below::after{
  bottom:auto;
  top:-4px;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.485 — PAYMENT SUMMARY HERO
   ────────────────────────────────────────────────────────────────
   Full-width dashboard card matching the uploaded reference. Layout:
     • Header  — purple wallet icon · title/subtitle · month pill · toggle
     • Body    — 2-col: donut (with centred total + trend + 3 legend cards)
                  on the left · 3 stacked progress cards on the right
     • Bottom  — 4 summary tiles (Total Received / Pending / Overdue /
                  Outstanding Amount + "View Details" button)
════════════════════════════════════════════════════════════════════ */
.ma-pay-hero{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:16px;
  padding:24px 26px 22px;
  margin-bottom:22px;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
html[data-theme="dark"] .ma-pay-hero{
  background:var(--surf, #1e293b);
  border-color:rgba(255,255,255,.08);
}

/* ── Header ── */
.ma-pay-hero-hdr{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.ma-pay-hero-hdr-l{ display:flex; align-items:center; gap:14px; min-width:0; }
.ma-pay-hero-hdr-r{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ma-pay-hero-icon{
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:12px;
  background:#7C3AED;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(124,58,237,.24);
}
.ma-pay-hero-hdr-txt{ min-width:0; }
.ma-pay-hero-title{
  font-size:20px; font-weight:800; line-height:1.15;
  color:var(--text, #0F172A);
  letter-spacing:-0.4px;
}
.ma-pay-hero-sub{
  font-size:13.5px; color:var(--muted, #6B7280);
  margin-top:2px;
}
.ma-pay-hero-date{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  font-size:13px; font-weight:600;
  color:var(--text, #0F172A);
  cursor:default; user-select:none;
}
.ma-pay-hero-date svg:first-child{ color:#7C3AED; }
.ma-pay-hero-toggle{
  width:38px; height:38px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  background:#fff;
  color:#6B7280;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ma-pay-hero-toggle:hover{ background:#F9FAFB; color:#7C3AED; border-color:#DDD6FE; }

/* ── Body: 2-column grid ── */
.ma-pay-hero-body{
  display:grid;
  grid-template-columns:minmax(320px, 420px) 1fr;
  gap:24px;
  align-items:start;
  padding:4px 0 16px;
}
@media(max-width:1024px){
  .ma-pay-hero-body{ grid-template-columns:1fr; }
}

/* ── LEFT: big donut + 3 legend cards ── */
.ma-pay-hero-left{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.ma-pay-donut-wrap{
  position:relative;
  width:100%; max-width:340px;
  aspect-ratio:1 / 1;
  display:flex; align-items:center; justify-content:center;
}
.ma-pay-donut-wrap .ma-dash-paysum-donut{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; min-height:0; max-width:none;
}
.ma-pay-donut-wrap .ma-dash-paysum-donut svg{
  width:100%; height:auto; max-width:340px; display:block;
}
.ma-pay-donut-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; pointer-events:none; text-align:center;
  padding:0 20%;
}
.ma-pay-donut-lbl{
  font-size:13px; color:var(--muted, #6B7280); font-weight:500;
}
.ma-pay-donut-amt{
  font-size:22px; font-weight:800; letter-spacing:-0.5px;
  color:var(--text, #0F172A);
  font-feature-settings:"tnum";
  line-height:1.15;
  margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
.ma-pay-donut-trend{
  display:flex; align-items:center; gap:6px;
  margin-top:8px;
  font-size:11.5px;
}
.ma-pay-donut-trend-ico{
  width:22px; height:22px; border-radius:6px;
  background:#EDE9FE; color:#7C3AED;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ma-pay-donut-trend-val{ font-weight:700; color:#059669; }
.ma-pay-donut-trend-val.is-down{ color:#DC2626; }
.ma-pay-donut-trend-val.is-flat{ color:#6B7280; }
.ma-pay-donut-trend-sub{ color:var(--muted, #6B7280); }

.ma-pay-legend{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  width:100%;
}
.ma-pay-lg-card{
  padding:10px 12px;
  border:1px solid #EEF0F3;
  border-radius:10px;
  display:flex; flex-direction:column; gap:2px;
  text-align:center;
  align-items:center;
}
html[data-theme="dark"] .ma-pay-lg-card{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.ma-pay-lg-head{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600;
  color:var(--text, #0F172A);
}
.ma-pay-lg-dot{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; flex-shrink:0;
}
.ma-pay-lg-pct{
  font-size:14px; font-weight:800;
  color:var(--text, #0F172A);
  letter-spacing:-0.3px;
  font-feature-settings:"tnum";
}

/* ── RIGHT: 3 stacked progress cards ── */
.ma-pay-hero-right{
  display:flex; flex-direction:column; gap:12px;
}
.ma-pay-prog{
  display:flex; gap:14px;
  padding:16px 18px;
  border-radius:12px;
  border:1px solid #EEF0F3;
  align-items:flex-start;
}
.ma-pay-prog-rec{ background:#EFF6FF; border-color:#BFDBFE; }
.ma-pay-prog-pen{ background:#FFFBEB; border-color:#FDE68A; }
.ma-pay-prog-ovd{ background:#FEF2F2; border-color:#FECACA; }
.ma-pay-prog-ico{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-pay-prog-rec .ma-pay-prog-ico{ background:#DBEAFE; color:#2563EB; }
.ma-pay-prog-pen .ma-pay-prog-ico{ background:#FEF3C7; color:#D97706; }
.ma-pay-prog-ovd .ma-pay-prog-ico{ background:#FEE2E2; color:#DC2626; }
.ma-pay-prog-body{ flex:1; min-width:0; }
.ma-pay-prog-hdr{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.ma-pay-prog-hdr-l{ min-width:0; flex:1; }
.ma-pay-prog-hdr-r{ text-align:right; flex-shrink:0; }
.ma-pay-prog-lbl{
  font-size:14px; font-weight:600;
  color:var(--text, #0F172A);
  margin-bottom:4px;
}
.ma-pay-prog-amt{
  font-size:22px; font-weight:800;
  letter-spacing:-0.5px;
  font-feature-settings:"tnum";
  line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-pay-prog-rec .ma-pay-prog-amt{ color:#2563EB; }
.ma-pay-prog-pen .ma-pay-prog-amt{ color:#D97706; }
.ma-pay-prog-ovd .ma-pay-prog-amt{ color:#DC2626; }
.ma-pay-prog-pct{
  font-size:16px; font-weight:800;
  letter-spacing:-0.3px;
  padding:4px 12px;
  border-radius:8px;
  display:inline-block;
}
.ma-pay-prog-rec .ma-pay-prog-pct{ background:#DBEAFE; color:#1E3A8A; }
.ma-pay-prog-pen .ma-pay-prog-pct{ background:#FEF3C7; color:#78350F; }
.ma-pay-prog-ovd .ma-pay-prog-pct{ background:#FEE2E2; color:#7F1D1D; }
.ma-pay-prog-pct-lbl{
  font-size:11px; color:var(--muted, #6B7280);
  margin-top:2px;
}
.ma-pay-prog-bar-wrap{
  height:6px; background:rgba(255,255,255,.7);
  border-radius:999px; overflow:hidden;
  position:relative;
}
html[data-theme="dark"] .ma-pay-prog-bar-wrap{ background:rgba(0,0,0,.25); }
.ma-pay-prog-bar{
  height:100%; border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.ma-pay-prog-bar-rec{ background:linear-gradient(90deg, #60A5FA, #2563EB); }
.ma-pay-prog-bar-pen{ background:linear-gradient(90deg, #FCD34D, #D97706); }
.ma-pay-prog-bar-ovd{ background:linear-gradient(90deg, #F87171, #DC2626); }
.ma-pay-prog-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  font-size:11.5px;
  margin-top:6px;
}
.ma-pay-prog-trend{ font-weight:700; }
.ma-pay-prog-trend.is-up   { color:#059669; }
.ma-pay-prog-trend.is-down { color:#DC2626; }
.ma-pay-prog-trend.is-flat { color:#6B7280; }
.ma-pay-prog-trend-sub{ color:var(--muted, #6B7280); }

/* ── BOTTOM: 4 summary tiles inside a gray-tinted wrapper ── */
.ma-pay-hero-bottom{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding:18px 20px;
  background:#F9FAFB;
  border:1px solid #EEF0F3;
  border-radius:12px;
  margin-top:8px;
}
@media(max-width:900px){
  .ma-pay-hero-bottom{ grid-template-columns:repeat(2, 1fr); gap:16px 0; }
}
/* v3.9.504 — Between 900px and 1280px the card is full-width but the
   4 tiles still need to share it. Compact the internals so the row
   stays on one line instead of overflowing. */
@media(min-width:901px) and (max-width:1280px){
  .ma-pay-hero-bottom{ padding:14px 16px; }
  .ma-pay-hero-bottom .ma-pay-sum-tile{ padding:0 10px; gap:9px; }
  .ma-pay-hero-bottom .ma-pay-sum-ico{ width:36px; height:36px; border-radius:9px; }
  .ma-pay-hero-bottom .ma-pay-sum-ico svg{ width:16px; height:16px; }
  .ma-pay-hero-bottom .ma-pay-sum-lbl{ font-size:11.5px; margin-bottom:3px; }
  .ma-pay-hero-bottom .ma-pay-sum-amt{ font-size:15px; letter-spacing:-0.3px; }
  .ma-pay-hero-bottom .ma-pay-sum-trend{ gap:5px; margin-top:5px; font-size:10.5px; }
  .ma-pay-hero-bottom .ma-pay-sum-trend-pill{ padding:2px 6px; }
  .ma-pay-hero-bottom .ma-pay-sum-view-btn{ font-size:11px; padding:5px 11px; margin-top:6px; }
}
@media(max-width:480px){
  .ma-pay-hero-bottom{ grid-template-columns:1fr; }
}
html[data-theme="dark"] .ma-pay-hero-bottom{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.06);
}
.ma-pay-sum-tile{
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
  border-right:1px solid #EEF0F3;
  min-width:0;
}
.ma-pay-sum-tile:first-child{ padding-left:0; }
.ma-pay-sum-tile:last-child{ border-right:none; padding-right:0; }
@media(max-width:900px){
  .ma-pay-sum-tile:nth-child(2n){ border-right:none; }
  .ma-pay-sum-tile:nth-child(1),
  .ma-pay-sum-tile:nth-child(2){ border-bottom:1px solid #EEF0F3; padding-bottom:14px; }
}
@media(max-width:480px){
  .ma-pay-sum-tile{ border-right:none; border-bottom:1px solid #EEF0F3; padding-bottom:14px; }
  .ma-pay-sum-tile:last-child{ border-bottom:none; padding-bottom:0; }
}
html[data-theme="dark"] .ma-pay-sum-tile{ border-color:rgba(255,255,255,.06); }
.ma-pay-sum-ico{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ma-pay-sum-ico-rec{ background:#EDE9FE; color:#7C3AED; }
.ma-pay-sum-ico-pen{ background:#FEF3C7; color:#D97706; }
.ma-pay-sum-ico-ovd{ background:#FEE2E2; color:#DC2626; }
.ma-pay-sum-body{ flex:1; min-width:0; }
.ma-pay-sum-lbl{
  font-size:12.5px; font-weight:600;
  color:var(--muted, #6B7280);
  margin-bottom:4px;
}
.ma-pay-sum-amt{
  font-size:18px; font-weight:800;
  color:var(--text, #0F172A);
  letter-spacing:-0.4px;
  line-height:1.15;
  font-feature-settings:"tnum";
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-pay-sum-amt-rec{ color:#059669; }
.ma-pay-sum-amt-pen{ color:#D97706; }
.ma-pay-sum-amt-ovd{ color:#DC2626; }
.ma-pay-sum-trend{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
  font-size:11.5px;
}
.ma-pay-sum-trend-pill{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:999px;
  font-weight:700;
  background:#F3F4F6; color:#6B7280;
}
.ma-pay-sum-trend-pill.is-up   { background:#D1FAE5; color:#059669; }
.ma-pay-sum-trend-pill.is-down { background:#FEE2E2; color:#DC2626; }
.ma-pay-sum-trend-sub{ color:var(--muted, #9CA3AF); }
.ma-pay-sum-tile-out .ma-pay-sum-amt{ color:var(--text, #0F172A); }
.ma-pay-sum-view-btn{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:8px;
  padding:6px 14px;
  background:#EDE9FE;
  color:#6D28D9;
  border-radius:8px;
  font-size:12px; font-weight:700;
  text-decoration:none;
  transition:background .12s, color .12s;
}
.ma-pay-sum-view-btn:hover{ background:#DDD6FE; color:#5B21B6; }

/* ── Mobile polish ≤ 640 px ── */
@media(max-width:640px){
  .ma-pay-hero{ padding:16px 14px 14px; border-radius:12px; }
  .ma-pay-hero-hdr{ flex-wrap:wrap; gap:10px 12px; margin-bottom:12px; }
  .ma-pay-hero-icon{ width:40px; height:40px; border-radius:10px; }
  .ma-pay-hero-icon svg{ width:22px; height:22px; }
  .ma-pay-hero-title{ font-size:16px; }
  .ma-pay-hero-sub{ font-size:12px; }
  .ma-pay-hero-date{ padding:6px 10px; font-size:12px; }
  .ma-pay-hero-toggle{ width:34px; height:34px; }
  .ma-pay-hero-body{ gap:16px; padding:2px 0 12px; }
  .ma-pay-donut-wrap{ max-width:280px; }
  .ma-pay-donut-amt{ font-size:18px; }
  .ma-pay-donut-lbl{ font-size:12px; }
  .ma-pay-lg-card{ padding:8px 6px; }
  .ma-pay-lg-head{ font-size:11px; gap:4px; }
  .ma-pay-lg-pct{ font-size:12.5px; }
  .ma-pay-prog{ padding:12px 14px; gap:12px; }
  .ma-pay-prog-ico{ width:38px; height:38px; }
  .ma-pay-prog-amt{ font-size:18px; }
  .ma-pay-prog-pct{ font-size:14px; padding:3px 10px; }
  .ma-pay-hero-bottom{ padding:14px 12px; }
  .ma-pay-sum-tile{ padding:0 10px; gap:10px; }
  .ma-pay-sum-ico{ width:38px; height:38px; }
  .ma-pay-sum-amt{ font-size:16px; }
}
/* ═════════════ END v3.9.485 Payment Summary hero ═════════════ */


/* ═══════════════════════════════════════════════════════════════════
   v3.9.489 — RECENT ACTIVITIES redesign + ACTIVITY LOG page
   ────────────────────────────────────────────────────────────────
   Rich per-row layout with colored icon badges, title, subtitle
   (ref number · party), amount pill, and relative timestamp. Used
   on both the dashboard card AND the full-page /activity-log view.
════════════════════════════════════════════════════════════════════ */
.ma-recact-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 4px;
  border-bottom:1px solid #F1F5F9;
  transition:background .12s;
}
.ma-recact-row:last-child{ border-bottom:none; }
.ma-recact-row:hover{ background:#F9FAFB; border-radius:8px; }
html[data-theme="dark"] .ma-recact-row{ border-bottom-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .ma-recact-row:hover{ background:rgba(255,255,255,.03); }

.ma-recact-ico{
  flex-shrink:0;
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.ma-recact-ico svg{ width:19px; height:19px; }
.ma-recact-body{ flex:1; min-width:0; }
.ma-recact-title{
  font-size:13.5px; font-weight:700;
  color:var(--text, #0F172A);
  line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-recact-sub{
  font-size:12px; color:var(--muted, #6B7280);
  margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-recact-ref{
  font-weight:700;
  color:var(--text, #0F172A);
  background:#F1F5F9;
  padding:1px 6px; border-radius:5px;
  font-size:11px;
  margin-right:4px;
}
html[data-theme="dark"] .ma-recact-ref{ background:rgba(255,255,255,.06); }
.ma-recact-sep{
  color:#CBD5E1; margin:0 6px;
}
.ma-recact-muted{ color:var(--muted, #9CA3AF); font-style:italic; }
.ma-recact-side{
  text-align:right; flex-shrink:0;
}
.ma-recact-amt{
  display:inline-block;
  font-size:13px; font-weight:800;
  color:var(--text, #0F172A);
  font-feature-settings:"tnum";
}
.ma-recact-time{
  font-size:11px; color:var(--muted, #9CA3AF);
  margin-top:2px;
}

/* Empty state — friendly, not just a "no data" text */
.ma-recact-empty{
  text-align:center;
  padding:32px 20px 24px;
  color:var(--muted, #6B7280);
}
.ma-recact-empty-ico{
  width:56px; height:56px; margin:0 auto 10px;
  border-radius:14px;
  background:#F1F5F9;
  color:#94A3B8;
  display:flex; align-items:center; justify-content:center;
}
.ma-recact-empty-t{
  font-size:14px; font-weight:700; color:var(--text, #0F172A);
}
.ma-recact-empty-s{ font-size:12.5px; margin-top:2px; max-width:280px; margin-left:auto; margin-right:auto; }

/* Icon tint utility classes for the activity feed — reuse the same
   `.shero-icon-*` palette that other dashboard sections use. Add a
   few extras for the new kinds. */
.shero-icon-red   { background:#FEE2E2; color:#DC2626; }
.shero-icon-rose  { background:#FFE4E6; color:#E11D48; }
.shero-icon-amber { background:#FEF3C7; color:#D97706; }
.shero-icon-teal  { background:#CCFBF1; color:#0D9488; }
.shero-icon-cyan  { background:#CFFAFE; color:#0891B2; }
.shero-icon-sky   { background:#E0F2FE; color:#0284C7; }
.shero-icon-slate { background:#E2E8F0; color:#475569; }

/* ── Full "Activity Log" page (pg-activity-log) ── */
.ma-actlog-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.ma-actlog-title{
  font-size:22px; font-weight:800;
  color:var(--text, #0F172A);
  letter-spacing:-0.4px;
}
.ma-actlog-toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:14px;
}
.ma-actlog-search,
.ma-actlog-filter,
.ma-actlog-date{
  padding:8px 12px;
  border:1px solid #E5E7EB;
  border-radius:9px;
  font-size:13px;
  background:#fff;
  min-height:36px;
}
.ma-actlog-search{ flex:1 1 220px; min-width:0; }
.ma-actlog-filter{ min-width:150px; }
.ma-actlog-date{ min-width:140px; }
html[data-theme="dark"] .ma-actlog-search,
html[data-theme="dark"] .ma-actlog-filter,
html[data-theme="dark"] .ma-actlog-date{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
  color:var(--text);
}
.ma-actlog-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:14px;
  padding:8px 18px;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
html[data-theme="dark"] .ma-actlog-card{
  background:var(--surf, #1e293b);
  border-color:rgba(255,255,255,.08);
}
.ma-actlog-list .ma-recact-row{
  padding:14px 6px;
}
.ma-actlog-pager{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 6px 8px;
  border-top:1px solid #F1F5F9;
  margin-top:6px;
  font-size:12.5px;
  color:var(--muted, #6B7280);
}
html[data-theme="dark"] .ma-actlog-pager{ border-top-color:rgba(255,255,255,.06); }
.ma-actlog-pager-btns{ display:flex; gap:8px; }
.ma-actlog-pager-btn{
  padding:6px 12px;
  border:1px solid #E5E7EB;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-size:12.5px; font-weight:600;
  color:var(--text, #0F172A);
}
.ma-actlog-pager-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.ma-actlog-pager-btn:not([disabled]):hover{ background:#F1F5F9; border-color:#CBD5E1; }
html[data-theme="dark"] .ma-actlog-pager-btn{
  background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); color:var(--text);
}

/* Mobile polish */
@media(max-width:640px){
  .ma-recact-row{ gap:10px; padding:10px 2px; }
  .ma-recact-ico{ width:34px; height:34px; border-radius:9px; }
  .ma-recact-ico svg{ width:17px; height:17px; }
  .ma-recact-title{ font-size:13px; }
  .ma-recact-sub{ font-size:11.5px; }
  .ma-recact-amt{ font-size:12px; }
  .ma-recact-time{ font-size:10.5px; }
  .ma-actlog-toolbar{ gap:8px; }
  .ma-actlog-search,
  .ma-actlog-filter,
  .ma-actlog-date{ flex:1 1 100%; }
}
/* ═══════════ END v3.9.489 activities ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.489 — ACTIVITY LOG page + Recent Activities polish
   ────────────────────────────────────────────────────────────────
   • Full-page browsable feed (#pg-activity-log)
   • Filter chip strip + search input + pagination
   • Row layout mirrors the dashboard's Recent Activities card so
     users see a familiar look on both.
════════════════════════════════════════════════════════════════════ */

/* ── Full-page Activity Log ────────────────────────────────────── */
.ma-actlog-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.03);
}
html[data-theme="dark"] .ma-actlog-card{
  background:var(--surf, #1e293b);
  border-color:rgba(255,255,255,.08);
}

/* Toolbar: search + filter chips */
.ma-actlog-toolbar{
  padding:14px 18px;
  border-bottom:1px solid #f1f5f9;
  display:flex; flex-direction:column; gap:12px;
}
html[data-theme="dark"] .ma-actlog-toolbar{ border-bottom-color:rgba(255,255,255,.06); }
.ma-actlog-search{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  background:#F9FAFB;
}
.ma-actlog-search svg{ color:#6B7280; flex-shrink:0; }
.ma-actlog-search input{
  flex:1; border:none; background:transparent;
  font-size:14px; color:var(--text, #0F172A);
  outline:none; min-width:0;
}
html[data-theme="dark"] .ma-actlog-search{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
.ma-actlog-filters{
  display:flex; flex-wrap:wrap; gap:6px;
}
.ma-actlog-chip{
  padding:6px 14px;
  border:1px solid #E5E7EB;
  background:#fff;
  color:var(--muted, #6B7280);
  font-size:12.5px; font-weight:600;
  border-radius:999px;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
  white-space:nowrap;
}
.ma-actlog-chip:hover{ border-color:#7C3AED; color:#7C3AED; }
.ma-actlog-chip.on{
  background:#7C3AED; color:#fff; border-color:#7C3AED;
}
html[data-theme="dark"] .ma-actlog-chip{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .ma-actlog-chip.on{ background:#7C3AED; color:#fff; }

/* Row list */
.ma-actlog-list{ padding:0; }
.ma-actlog-row{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid #f1f5f9;
  transition:background .12s;
}
.ma-actlog-row:last-child{ border-bottom:none; }
.ma-actlog-row:hover{ background:#F9FAFB; }
html[data-theme="dark"] .ma-actlog-row{ border-bottom-color:rgba(255,255,255,.06); }
html[data-theme="dark"] .ma-actlog-row:hover{ background:rgba(255,255,255,.03); }
.ma-actlog-ico{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-actlog-ico svg{ width:18px; height:18px; }
.ma-actlog-body{ flex:1; min-width:0; }
.ma-actlog-title{
  font-size:14px; font-weight:700;
  color:var(--text, #0F172A);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ma-actlog-badge{
  padding:1px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}
.ma-actlog-badge-created  { background:#D1FAE5; color:#059669; }
.ma-actlog-badge-updated  { background:#DBEAFE; color:#2563EB; }
.ma-actlog-badge-deleted  { background:#FEE2E2; color:#DC2626; }
.ma-actlog-badge-converted{ background:#EDE9FE; color:#7C3AED; }
.ma-actlog-badge-sent     { background:#FEF3C7; color:#B45309; }
.ma-actlog-sub{
  font-size:12.5px; color:var(--muted, #6B7280);
  margin-top:3px;
  overflow:hidden; text-overflow:ellipsis;
}
.ma-actlog-ref{
  font-weight:600; color:var(--text, #0F172A);
  font-feature-settings:"tnum";
}
.ma-actlog-sep{
  margin:0 6px; color:#CBD5E1;
}
.ma-actlog-muted{ font-style:italic; color:#94A3B8; }
.ma-actlog-side{
  text-align:right; flex-shrink:0;
}
.ma-actlog-amt{
  display:block;
  font-size:13.5px; font-weight:800;
  color:var(--text, #0F172A);
  font-feature-settings:"tnum";
  letter-spacing:-0.2px;
}
.ma-actlog-time{
  font-size:11.5px; color:var(--muted, #9CA3AF);
  margin-top:2px;
  white-space:nowrap;
}

/* Empty state */
.ma-actlog-empty{
  padding:60px 20px;
  text-align:center;
  color:var(--muted, #6B7280);
}
.ma-actlog-empty-ico{
  width:80px; height:80px; border-radius:50%;
  background:#F1F5F9;
  color:#94A3B8;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
html[data-theme="dark"] .ma-actlog-empty-ico{
  background:rgba(255,255,255,.04); color:#64748B;
}
.ma-actlog-empty-t{
  font-size:15px; font-weight:700;
  color:var(--text, #0F172A);
  margin-bottom:4px;
}
.ma-actlog-empty-s{ font-size:13px; }

/* Footer (count + pager) */
.ma-actlog-footer{
  padding:12px 18px;
  border-top:1px solid #f1f5f9;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
html[data-theme="dark"] .ma-actlog-footer{ border-top-color:rgba(255,255,255,.06); }
.ma-actlog-count{
  font-size:12.5px; color:var(--muted, #6B7280);
}
.ma-actlog-pager{
  display:flex; gap:8px;
}
.ma-actlog-pager-btn{
  padding:7px 14px;
  border:1px solid #E5E7EB;
  background:#fff;
  color:var(--text, #0F172A);
  font-size:12.5px; font-weight:600;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s, border-color .12s;
}
.ma-actlog-pager-btn:hover:not(:disabled){ background:#F9FAFB; border-color:#CBD5E1; }
.ma-actlog-pager-btn:disabled{
  color:#CBD5E1; cursor:not-allowed;
}
html[data-theme="dark"] .ma-actlog-pager-btn{
  background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08);
}

/* Mobile polish */
@media(max-width:640px){
  .ma-actlog-toolbar{ padding:12px 12px; }
  .ma-actlog-row{ padding:12px 12px; gap:10px; }
  .ma-actlog-ico{ width:34px; height:34px; }
  .ma-actlog-ico svg{ width:16px; height:16px; }
  .ma-actlog-title{ font-size:13px; }
  .ma-actlog-sub{ font-size:11.5px; }
  .ma-actlog-amt{ font-size:12.5px; }
  .ma-actlog-time{ font-size:10.5px; }
  .ma-actlog-footer{ padding:10px 12px; }
}
/* ═════════ END v3.9.489 activity log ═════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.493 → v3.9.500 — E&I + PAYMENT SUMMARY SIDE-BY-SIDE
   ────────────────────────────────────────────────────────────────
   v3.9.493 put both heros in .ma-dash2-outrow (1fr 1fr) and then
   force-collapsed their internal bodies to a single column so they'd
   fit at half-viewport. That flattened the carefully-designed
   3-column E&I body and 2-column Payment body — the layouts the
   reference screenshots actually show.

   v3.9.500 reverses that trade-off. The internal layouts are the
   priority; the side-by-side arrangement is applied only when the
   viewport is genuinely wide enough for both cards to render their
   native multi-column bodies at full fidelity.

     ≥ 1700px : side-by-side (1fr 1fr). Each card ≈ 830px, which fits
                E&I's 220 + donut + 260 three-column body and
                Payment's 320 + cards two-column body comfortably.
     < 1700px : cards stack full-width. Each one then has the entire
                viewport and shows its native layout exactly as in
                the reference images.

   No internal grid-template-columns are overridden here anymore —
   the heros' own responsive rules (already tuned at 1200/1024/900px)
   handle narrower widths on their own.
════════════════════════════════════════════════════════════════════ */
.ma-dash2-outrow > .ma-ei-hero,
.ma-dash2-outrow > .ma-pay-hero{
  margin-bottom:0;
  min-width:0;                 /* let grid children shrink */
}

/* Below 1700px: stack so each hero gets the full viewport width and
   renders its native multi-column body (matching the reference). */
@media(max-width:1699px){
  .ma-dash2-outrow:has(> .ma-ei-hero),
  .ma-dash2-outrow:has(> .ma-pay-hero){
    grid-template-columns:1fr;
  }
  /* Restore the vertical rhythm the outrow gap would otherwise give */
  .ma-dash2-outrow > .ma-ei-hero{ margin-bottom:0; }
}

/* At 1700px and up the two cards sit side-by-side. Only minimal
   nudges are needed — the native layouts already fit. */
@media(min-width:1700px){
  .ma-dash2-outrow .ma-ei-hero-body{
    /* Slightly tighter fixed columns so the donut keeps enough room */
    grid-template-columns:minmax(180px, 210px) 1fr minmax(230px, 270px);
    gap:16px;
  }
  .ma-dash2-outrow .ma-ei-hero-mid .ma-kpi3-eichart-donut{ max-width:280px; }
  .ma-dash2-outrow .ma-ei-hero-mid .ma-kpi3-eichart-donut svg{ max-width:280px; }

  .ma-dash2-outrow .ma-pay-hero-body{
    grid-template-columns:minmax(280px, 340px) 1fr;
    gap:18px;
  }
  .ma-dash2-outrow .ma-pay-donut-wrap{ max-width:320px; }
  .ma-dash2-outrow .ma-pay-donut-wrap .ma-dash-paysum-donut svg{ max-width:320px; }

  /* v3.9.504 — Bottom tiles stay 4-across in a single line (matches
     the reference). At this card width each tile is ~200px, so the
     internals are compacted — smaller icon, tighter gaps, smaller
     amount type — to keep long values like ₹5,00,88,310.78 readable
     on one line rather than wrapping to a 2x2 grid. */
  .ma-dash2-outrow .ma-pay-hero-bottom{
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    padding:14px 16px;
  }
  .ma-dash2-outrow .ma-pay-sum-tile{
    padding:0 10px;
    gap:9px;
    border-right:1px solid #EEF0F3;
    border-bottom:none;
  }
  .ma-dash2-outrow .ma-pay-sum-tile:first-child{ padding-left:0; }
  .ma-dash2-outrow .ma-pay-sum-tile:last-child{ border-right:none; padding-right:0; }
  html[data-theme="dark"] .ma-dash2-outrow .ma-pay-sum-tile{
    border-right-color:rgba(255,255,255,.06);
  }
  .ma-dash2-outrow .ma-pay-sum-ico{ width:36px; height:36px; border-radius:9px; }
  .ma-dash2-outrow .ma-pay-sum-ico svg{ width:16px; height:16px; }
  .ma-dash2-outrow .ma-pay-sum-lbl{ font-size:11.5px; margin-bottom:3px; }
  .ma-dash2-outrow .ma-pay-sum-amt{ font-size:15px; letter-spacing:-0.3px; }
  .ma-dash2-outrow .ma-pay-sum-trend{ gap:5px; margin-top:5px; font-size:10.5px; }
  .ma-dash2-outrow .ma-pay-sum-trend-pill{ padding:2px 6px; }
  .ma-dash2-outrow .ma-pay-sum-view-btn{ font-size:11px; padding:5px 11px; margin-top:6px; }
}
/* ═══════════ END v3.9.500 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.496 — DASHBOARD COLOUR CUSTOMISATION
   ────────────────────────────────────────────────────────────────
   Custom properties exposed at :root so users can override icon/
   accent/amount colours for each dashboard hero. The Settings →
   Colour & Asset → Dashboard Colours panel writes new values into
   these via document.documentElement.style.setProperty(); JS also
   persists them in localStorage and re-injects at page load.
════════════════════════════════════════════════════════════════════ */
:root{
  /* Sales Overview */
  --ds-sale-icon:      #10B981;
  --ds-sale-chart:     #10B981;
  --ds-sale-amount:    #059669;
  /* Purchase Overview */
  --ds-purchase-icon:  #4F46E5;
  --ds-purchase-chart: #4F46E5;
  --ds-purchase-amount:#4338CA;
  /* Expense & Income */
  --ds-ei-icon:        #F59E0B;
  --ds-ei-expense:     #2563EB;
  --ds-ei-income:      #10B981;
  /* Payment Summary */
  --ds-pay-icon:       #7C3AED;
  --ds-pay-received:   #2563EB;
  --ds-pay-pending:    #F59E0B;
  --ds-pay-overdue:    #DC2626;
}

/* Icon backgrounds — override the base hero icon rules */
.ma-shero-sale .ma-shero-icon        { background: var(--ds-sale-icon) !important; }
.ma-shero-purchase .ma-shero-icon    { background: var(--ds-purchase-icon) !important; }
.ma-ei-hero-icon                     { background: var(--ds-ei-icon) !important; }
.ma-pay-hero-icon                    { background: var(--ds-pay-icon) !important; }

/* v3.9.497 — Only override amount colours where the base design
   ALREADY had a coloured amount. Sales/Purchase amounts are black
   in the reference (color:var(--text)) — don't force them. E&I and
   Payment amounts were coloured red/green/blue/orange from day one,
   so those keep the customisable overrides. */
.ma-ei-exp-val                       { color: var(--ds-ei-expense) !important; }
.ma-ei-inc-val                       { color: var(--ds-ei-income) !important; }
.ma-pay-prog-rec .ma-pay-prog-amt    { color: var(--ds-pay-received) !important; }
.ma-pay-prog-pen .ma-pay-prog-amt    { color: var(--ds-pay-pending) !important; }
.ma-pay-prog-ovd .ma-pay-prog-amt    { color: var(--ds-pay-overdue) !important; }

/* ── Settings panel — colour picker rows ── */
.ma-dashcolor-grp{
  padding:16px 0;
  border-top:1px solid #f1f5f9;
}
.ma-dashcolor-grp:first-of-type{ border-top:none; padding-top:6px; }
html[data-theme="dark"] .ma-dashcolor-grp{ border-top-color:rgba(255,255,255,.06); }
.ma-dashcolor-grp-hdr{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:700;
  color:var(--text, #0F172A);
  margin-bottom:12px;
}
.ma-dashcolor-grp-dot{
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
}
.ma-dashcolor-rows{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px 14px;
}
.ma-dashcolor-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid #E5E7EB;
  border-radius:8px;
  background:#fafafa;
}
html[data-theme="dark"] .ma-dashcolor-row{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
.ma-dashcolor-swatch{
  width:34px; height:34px; border-radius:6px;
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  padding:0;
  overflow:hidden;
  flex-shrink:0;
}
.ma-dashcolor-swatch::-webkit-color-swatch-wrapper{ padding:0; }
.ma-dashcolor-swatch::-webkit-color-swatch{ border:none; border-radius:5px; }
.ma-dashcolor-lbl{
  flex:1; min-width:0;
  font-size:12.5px; font-weight:600;
  color:var(--text, #0F172A);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-dashcolor-hex{
  font-size:11px; color:var(--muted, #6B7280);
  font-family:monospace;
  text-transform:uppercase;
}
.ma-dashcolor-actions{
  display:flex; gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #f1f5f9;
}
html[data-theme="dark"] .ma-dashcolor-actions{ border-top-color:rgba(255,255,255,.06); }
.ma-dashcolor-reset{
  padding:8px 16px;
  background:transparent;
  border:1px solid #E5E7EB;
  color:var(--text, #0F172A);
  border-radius:8px;
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.ma-dashcolor-reset:hover{ background:#F9FAFB; border-color:#CBD5E1; }
html[data-theme="dark"] .ma-dashcolor-reset{
  border-color:rgba(255,255,255,.14);
}
.ma-dashcolor-note{
  font-size:12px; color:var(--muted, #6B7280);
  padding:12px 14px;
  background:#F9FAFB;
  border:1px solid #EEF0F3;
  border-radius:8px;
  margin-bottom:16px;
  display:flex; align-items:flex-start; gap:8px;
}
html[data-theme="dark"] .ma-dashcolor-note{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.ma-dashcolor-note-ico{
  color:#7C3AED; flex-shrink:0; margin-top:1px;
}
/* ═══════════ END v3.9.496 dashboard colours ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.501 — E&I + PAYMENT SUMMARY: COMPACT HEIGHT + BRAND PALETTE
   ────────────────────────────────────────────────────────────────
   Two problems this fixes:

   1. HEIGHT — the cards rendered far taller than the reference. The
      reference fits an entire card (header + 3-col body + trend
      strip) in ~594px. Padding, gaps, donut size and the trend chart
      were all oversized. Every vertical contributor is tightened
      here so the real thing matches the reference proportions.

   2. COLOUR — the E&I section was red-dominant (#EF4444 donut, red
      trend line, red progress card) which clashed with the app's
      blue chrome (--brand:#2563EB). Expense visuals now use the
      brand blue. Red is reserved for genuinely negative signals
      (net-balance-negative card, trend-down pills, overdue) where
      it carries real meaning.

   Because the layout is now compact, the side-by-side breakpoint
   drops from 1700px to 1280px — matching the reference, which shows
   both cards side-by-side.
════════════════════════════════════════════════════════════════════ */

/* ── 1. HEIGHT COMPRESSION ─────────────────────────────────────── */

.ma-ei-hero,
.ma-pay-hero{
  padding:18px 20px 16px;          /* was 24px 26px 22px */
  border-radius:14px;
}

.ma-ei-hero-hdr,
.ma-pay-hero-hdr{ padding-bottom:12px; }

/* Header icon + type scale trimmed to reference proportions */
.ma-ei-hero-icon,
.ma-pay-hero-icon{ width:42px; height:42px; border-radius:11px; }
.ma-ei-hero-icon svg,
.ma-pay-hero-icon svg{ width:22px; height:22px; }
.ma-ei-hero-title,
.ma-pay-hero-title{ font-size:18px; }
.ma-ei-hero-sub,
.ma-pay-hero-sub{ font-size:12.5px; }
.ma-ei-hero-date,
.ma-pay-hero-date{ padding:6px 10px; font-size:12.5px; }
.ma-ei-hero-toggle,
.ma-pay-hero-toggle{ width:34px; height:34px; }

/* Bodies: tighter padding + gaps */
.ma-ei-hero-body{ padding:2px 0 10px; gap:14px; }
.ma-pay-hero-body{ padding:2px 0 10px; gap:16px; }

/* Donuts: the single biggest height contributor */
.ma-ei-hero-mid{ gap:10px; padding:0; }
.ma-ei-hero-mid .ma-kpi3-eichart-donut,
.ma-ei-hero-mid .ma-kpi3-eichart-bars{
  max-width:230px;
  min-height:180px;                /* was 220px */
}
.ma-ei-hero-mid .ma-kpi3-eichart-donut svg,
.ma-ei-hero-mid .ma-kpi3-eichart-bars svg{ max-width:215px; }
.ma-pay-donut-wrap{ max-width:270px; }
.ma-pay-hero-left{ gap:12px; }

/* Left KPI column: tighter blocks */
.ma-ei-kpi{ padding:2px 0; }
.ma-ei-kpi-val{ font-size:26px; }
.ma-ei-hero-sep{ margin:8px 0; }
.ma-ei-netbal{ padding:10px 12px; margin-top:10px; }

/* Right progress cards */
.ma-ei-prog{ padding:10px 12px; }
.ma-ei-hero-right{ gap:10px; }
.ma-pay-hero-right{ gap:10px; }
.ma-pay-prog{ padding:11px 13px; }

/* Trend strip: shorter chart + tighter padding */
.ma-ei-trend-row{ padding:12px 14px; margin-top:6px; }
.ma-ei-trend-chart{ height:88px; }   /* was 120px */

/* Payment bottom tiles */
.ma-pay-hero-bottom{ padding:13px 15px; margin-top:6px; }

/* ── 2. SIDE-BY-SIDE FROM 1280px (layout now fits) ─────────────── */

@media(max-width:1279px){
  .ma-dash2-outrow:has(> .ma-ei-hero),
  .ma-dash2-outrow:has(> .ma-pay-hero){
    grid-template-columns:1fr;
  }
}
@media(min-width:1280px){
  .ma-dash2-outrow:has(> .ma-ei-hero),
  .ma-dash2-outrow:has(> .ma-pay-hero){
    grid-template-columns:1fr 1fr;
  }
  /* E&I keeps its 3 columns; fixed rails narrow so the donut breathes */
  .ma-dash2-outrow .ma-ei-hero-body{
    grid-template-columns:minmax(150px, 180px) 1fr minmax(190px, 230px);
    gap:12px;
  }
  .ma-dash2-outrow .ma-ei-hero-mid .ma-kpi3-eichart-donut{ max-width:200px; min-height:165px; }
  .ma-dash2-outrow .ma-ei-hero-mid .ma-kpi3-eichart-donut svg{ max-width:190px; }
  .ma-dash2-outrow .ma-ei-kpi-val{ font-size:22px; }

  /* Payment keeps its 2 columns */
  .ma-dash2-outrow .ma-pay-hero-body{
    grid-template-columns:minmax(230px, 275px) 1fr;
    gap:14px;
  }
  .ma-dash2-outrow .ma-pay-donut-wrap{ max-width:245px; }
  .ma-dash2-outrow .ma-pay-donut-wrap .ma-dash-paysum-donut svg{ max-width:245px; }
}

/* ── 3. BRAND PALETTE — expense visuals red → blue ─────────────── */

/* Total Expense amount + legend dot */
.ma-ei-exp-val{ color:var(--ds-ei-expense, #2563EB) !important; }
.ma-ei-dot-exp{ background:var(--ds-ei-expense, #2563EB) !important; }

/* EXPENSE progress card: blue-tinted instead of red-tinted */
.ma-ei-prog-exp{
  background:#EFF6FF !important;
  border-color:#BFDBFE !important;
}
.ma-ei-prog-exp .ma-ei-prog-ico{
  background:#DBEAFE !important;
  color:var(--ds-ei-expense, #2563EB) !important;
}
.ma-ei-prog-exp .ma-ei-prog-pct{
  background:#DBEAFE !important;
  color:#1D4ED8 !important;
}
.ma-ei-prog-bar-exp{
  background:linear-gradient(90deg, #60A5FA, var(--ds-ei-expense, #2563EB)) !important;
}

/* Donut centre arrow badge follows the same palette */
.ma-ei-donut-badge{
  background:#DBEAFE !important;
  color:var(--ds-ei-expense, #2563EB) !important;
}

/* Trend strip heading accent */
.ma-ei-trend-lbl-hd{ color:var(--ds-ei-expense, #2563EB) !important; }

/* Dark-mode equivalents */
html[data-theme="dark"] .ma-ei-prog-exp{
  background:rgba(37,99,235,.10) !important;
  border-color:rgba(37,99,235,.28) !important;
}
html[data-theme="dark"] .ma-ei-prog-exp .ma-ei-prog-ico,
html[data-theme="dark"] .ma-ei-prog-exp .ma-ei-prog-pct,
html[data-theme="dark"] .ma-ei-donut-badge{
  background:rgba(37,99,235,.20) !important;
  color:#93C5FD !important;
}
/* ═══════════ END v3.9.501 ═══════════ */

/* v3.9.501 — Donut centre badge/icon follow the brand palette too.
   The .is-inc (income-dominant) variant keeps its green, since that
   colour is semantically correct and already matches the system. */
.ma-ei-donut-center-ico,
.ma-ei-donut-center-trend{
  background:#DBEAFE;
  color:var(--ds-ei-expense, #2563EB);
}
.ma-ei-donut-center.is-inc .ma-ei-donut-center-ico,
.ma-ei-donut-center.is-inc .ma-ei-donut-center-trend{
  background:#D1FAE5; color:#059669;
}
html[data-theme="dark"] .ma-ei-donut-center-ico,
html[data-theme="dark"] .ma-ei-donut-center-trend{
  background:rgba(37,99,235,.20); color:#93C5FD;
}
html[data-theme="dark"] .ma-ei-donut-center.is-inc .ma-ei-donut-center-ico,
html[data-theme="dark"] .ma-ei-donut-center.is-inc .ma-ei-donut-center-trend{
  background:rgba(16,185,129,.20); color:#6EE7B7;
}
/* Compact donut centre type to match the reduced donut size */
.ma-ei-donut-center-ico{ width:28px; height:28px; border-radius:7px; }
.ma-ei-donut-center-pct{ font-size:23px; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.502 — DONUT CENTRE CONTENT FITTING + PAYMENT PALETTE
   ────────────────────────────────────────────────────────────────
   Two defects:

   1. The centre overlays did not fit inside the donut hole.
      • Payment: .ma-pay-donut-amt had white-space:nowrap +
        text-overflow:ellipsis, so "₹5,02,35,787.78" rendered as
        "₹5,02,35,7…". The trend row ("— 0% vs prev period") was
        laid out on one line and spilled past the ring.
      • E&I: the percentage badge sat flush against the inner edge
        with no breathing room.
      Fixed by letting the amount wrap and scale, tightening the
      safe-area padding, and stacking the trend row.

   2. The Payment donut read as one solid block of harsh red
      whenever Overdue dominated. Softened to a rose tone that sits
      with the blue chrome instead of fighting it.
════════════════════════════════════════════════════════════════════ */

/* ── Payment donut centre ───────────────────────────────────────── */
.ma-pay-donut-center{
  /* Hole is ~60% of the wrapper, so keep content inside ~56% */
  padding:0 21%;
  gap:1px;
}
.ma-pay-donut-lbl{ font-size:11.5px; }
.ma-pay-donut-amt{
  /* Was: nowrap + ellipsis → truncated long amounts.
     Now wraps and scales with the wrapper so the full figure shows. */
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  font-size:clamp(14px, 9.2cqw, 20px);
  line-height:1.1;
  margin-top:1px;
  word-break:normal;
  overflow-wrap:anywhere;
}
.ma-pay-donut-trend{
  /* Stack instead of one long line so it never spills past the ring */
  flex-direction:column;
  gap:2px;
  margin-top:5px;
  font-size:10px;
}
.ma-pay-donut-trend-ico{ width:18px; height:18px; border-radius:5px; }
.ma-pay-donut-trend-ico svg{ width:9px; height:9px; }
.ma-pay-donut-trend-sub{ font-size:9.5px; color:var(--muted, #6B7280); }

/* Enable cqw units above — the wrapper becomes the query container */
.ma-pay-donut-wrap{ container-type:inline-size; }

/* ── E&I donut centre ───────────────────────────────────────────── */
.ma-ei-donut-center{
  padding:0 22%;
  gap:1px;
  text-align:center;
}
.ma-ei-donut-center-pct{ font-size:clamp(16px, 10cqw, 23px); line-height:1.05; }
.ma-ei-donut-center-lbl{ font-size:11px; margin-top:1px; }
.ma-ei-donut-center-ico{ width:26px; height:26px; border-radius:7px; margin-bottom:2px; }
.ma-ei-donut-center-ico svg{ width:13px; height:13px; }
.ma-ei-donut-center-trend{
  margin-top:3px;
  padding:2px 7px;
  font-size:9.5px;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-ei-hero-mid .ma-kpi3-eichart-donut{ container-type:inline-size; }

/* ── Payment donut palette: soften the overdue red ──────────────── */
:root{
  /* Rose-500 rather than red-600 — still clearly "alert", but it
     harmonises with the blue chrome instead of clashing with it. */
  --ds-pay-overdue: #F43F5E;
}
.ma-pay-prog-ovd{
  background:#FFF1F2 !important;
  border-color:#FECDD3 !important;
}
.ma-pay-prog-ovd .ma-pay-prog-ico{
  background:#FFE4E6 !important;
  color:var(--ds-pay-overdue, #F43F5E) !important;
}
.ma-pay-prog-ovd .ma-pay-prog-pct{
  background:#FFE4E6 !important;
  color:#BE123C !important;
}
html[data-theme="dark"] .ma-pay-prog-ovd{
  background:rgba(244,63,94,.10) !important;
  border-color:rgba(244,63,94,.28) !important;
}
html[data-theme="dark"] .ma-pay-prog-ovd .ma-pay-prog-ico,
html[data-theme="dark"] .ma-pay-prog-ovd .ma-pay-prog-pct{
  background:rgba(244,63,94,.20) !important;
  color:#FDA4AF !important;
}
/* ═══════════ END v3.9.502 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.503 — E&I BODY: COLUMN PROPORTIONS + TEXT FITTING
   ────────────────────────────────────────────────────────────────
   v3.9.501 sized the side-by-side body as
     minmax(150px,180px)  1fr  minmax(190px,230px)
   which was backwards: the middle (donut) column took ALL the slack
   via 1fr while both rails were pinned narrow. Result — a big dead
   area under the donut, the Insight paragraph wrapping one word per
   line, and "₹23,01,922" truncating to "₹23,01,…".

   The donut is a fixed-size graphic, so the middle column should be
   sized to it and the LEFT/RIGHT rails should absorb the remaining
   width. Right gets the larger share because it holds the Insight
   paragraph and two progress cards.

   Also removes the ellipsis truncation on progress amounts and stops
   the small trend/label text from wrapping mid-phrase.
════════════════════════════════════════════════════════════════════ */

/* ── Column proportions ─────────────────────────────────────────── */

/* Full-width (stacked) — generous rails, donut sized to content */
.ma-ei-hero-body{
  grid-template-columns:minmax(0, 1fr) 250px minmax(0, 1.3fr);
  gap:18px;
}

/* Side-by-side — same principle, smaller donut rail */
@media(min-width:1280px){
  .ma-dash2-outrow .ma-ei-hero-body{
    grid-template-columns:minmax(0, 1fr) 195px minmax(0, 1.35fr);
    gap:14px;
  }
}

/* Below 1200px the base sheet drops to 2 columns with the right rail
   spanning full width — keep that, just make the donut column auto. */
@media(max-width:1199px){
  .ma-ei-hero-body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media(max-width:900px){
  .ma-ei-hero-body{ grid-template-columns:1fr; }
}

/* Donut column: align to top so it doesn't create dead space when the
   side rails are taller than the graphic. */
.ma-ei-hero-mid{
  justify-content:flex-start;
  padding-top:4px;
}

/* ── Text fitting ───────────────────────────────────────────────── */

/* Progress-card amount: was truncating with an ellipsis. Let it
   shrink and wrap instead so the full figure is always readable. */
.ma-ei-prog-amt{
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:16px;
}

/* Keep short labels on one line — "vs last period" was breaking
   after "vs last". */
.ma-ei-trend-lbl,
.ma-ei-netbal-sub,
.ma-pay-prog-trend-sub{ white-space:nowrap; }

/* Net Balance figure: allow it to sit on one line with the sign */
.ma-ei-netbal-val{
  font-size:20px;
  overflow-wrap:anywhere;
}
.ma-ei-netbal-body{ min-width:0; }

/* Insight paragraph: normal prose wrapping, not one-word-per-line.
   The illustration shrinks first when space is tight. */
.ma-ei-insight{ align-items:flex-start; gap:10px; padding:12px 14px; }
.ma-ei-insight-txt{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  line-height:1.45;
}
.ma-ei-insight-ico{ width:30px; height:30px; border-radius:8px; }
.ma-ei-insight-ico svg{ width:15px; height:15px; }
/* Hide the wallet illustration when the card is narrow — it steals
   width the paragraph needs. */
@media(min-width:1280px){
  .ma-dash2-outrow .ma-ei-insight-illo{ display:none; }
}

/* KPI trend pills: keep pill + label on one row */
.ma-ei-kpi-trend{
  display:flex; align-items:center; gap:6px;
  flex-wrap:nowrap; min-width:0;
}
.ma-ei-trend-pill{ flex-shrink:0; }
/* ═══════════ END v3.9.503 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.506 — DESIGN CUSTOM HEADER (canvas designer)
   ────────────────────────────────────────────────────────────────
   Elements live on a fixed 1000x260 "design surface" that is scaled
   with a CSS transform to fill the available width. Storing coords
   in design units (not percentages) keeps font sizes, borders and
   spacing proportional at any viewport, and lets the print layer
   replay the same numbers.
════════════════════════════════════════════════════════════════════ */
.ma-chd-body{ padding-top:4px; }

/* ── Dark tool strip ── */
.ma-chd-toolbar{
  display:flex; flex-wrap:wrap;
  background:#1F2430;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}
.ma-chd-tool{
  flex:1 1 0; min-width:150px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 10px;
  background:transparent;
  border:none;
  color:#E5E7EB;
  font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.ma-chd-tool:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ma-chd-tool.on{ background:rgba(255,255,255,.14); color:#fff; }
.ma-chd-tool svg{ flex-shrink:0; }
@media(max-width:760px){
  .ma-chd-tool{ min-width:50%; padding:12px 8px; font-size:11px; gap:6px; }
  .ma-chd-tool span{ white-space:nowrap; }
}

/* ── Drop-down panels ── */
.ma-chd-panel{
  display:none;
  padding:16px 18px;
  background:#F9FAFB;
  border:1px solid #E5E7EB;
  border-top:none;
}
.ma-chd-panel.on{ display:block; }
html[data-theme="dark"] .ma-chd-panel{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
.ma-chd-panel-hdr{
  font-size:12.5px; font-weight:700;
  color:var(--text, #0F172A);
  margin-bottom:12px;
}
.ma-chd-panel-hint{
  font-weight:500; color:var(--muted, #6B7280);
  margin-left:8px; font-size:11.5px;
}
/* ── Canvas stage ── */
.ma-chd-stage{
  position:relative;
  padding:18px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-top:none;
  border-radius:0 0 8px 8px;
}
html[data-theme="dark"] .ma-chd-stage{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.08);
}
.ma-chd-reset{
  position:absolute; top:12px; right:12px; z-index:6;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:6px;
  color:#6B7280;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.ma-chd-reset:hover{ background:#F3F4F6; color:#DC2626; }
html[data-theme="dark"] .ma-chd-reset{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
}
.ma-chd-canvas{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#fff;
  border:1px dashed #C7D2FE;
  border-radius:4px;
  user-select:none;
}
html[data-theme="dark"] .ma-chd-canvas{ background:#fff; }
/* Fixed design surface — scaled by JS via transform */
.ma-chd-surface{
  position:relative;
  width:1000px; height:260px;
  transform-origin:0 0;
}

/* ── Elements on the surface ── */
.ma-chd-el{
  position:absolute;
  box-sizing:border-box;
  cursor:move;
  outline:1px solid transparent;
}
.ma-chd-el.sel{ outline:1px dashed #6366F1; }
.ma-chd-el-text{
  display:flex; align-items:center;
  padding:2px 4px;
  line-height:1.25;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:hidden;
}
.ma-chd-el-text[data-align="center"]{ justify-content:center; text-align:center; }
.ma-chd-el-text[data-align="right"]{ justify-content:flex-end; text-align:right; }
.ma-chd-el-img{ display:block; }
.ma-chd-el-img img{
  width:100%; height:100%;
  object-fit:contain;
  display:block; pointer-events:none;
}
.ma-chd-el-rule{ background:#111827; }

/* Selection handles
   v3.9.517 — Two problems fixed here. They used to sit outside the
   element on negative offsets, so the canvas's overflow:hidden sliced
   them off for anything near an edge. And because they live inside the
   scaled surface they shrank with the zoom, ending up ~10px wide with
   5px icons. Now each handle anchors to its own corner and scales by
   the inverse of the canvas zoom, so it renders at a constant size and
   always sits inside the element's bounds. */
.ma-chd-h{
  position:absolute; z-index:6;
  width:24px; height:24px;
  background:#fff;
  border:1px solid #C3C9D4;
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:#475569;
  box-shadow:0 1px 4px rgba(15,23,42,.20);
  transform:scale(var(--chd-inv, 1));
}
.ma-chd-h svg{ width:13px; height:13px; }
.ma-chd-h-dup{ top:0; left:0;     transform-origin:top left;     cursor:copy; }
.ma-chd-h-del{ bottom:0; left:0;  transform-origin:bottom left;  cursor:pointer; color:#DC2626; }
.ma-chd-h-rot{ top:0; right:0;    transform-origin:top right;    cursor:grab; }
.ma-chd-h-res{ bottom:0; right:0; transform-origin:bottom right; cursor:nwse-resize; }
.ma-chd-h:hover{ border-color:#6366F1; color:#6366F1; }
.ma-chd-h-del:hover{ border-color:#DC2626; color:#DC2626; }

/* ── Floating context bar ── */
.ma-chd-ctx{
  display:flex; align-items:center; gap:4px;
  margin-top:12px;
  padding:7px 10px;
  background:#1F2430;
  border-radius:8px;
  width:max-content;
  max-width:100%;
  flex-wrap:wrap;
}
.ma-chd-ctx-btn{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:5px;
  color:#E5E7EB; cursor:pointer;
  transition:background .12s;
}
.ma-chd-ctx-btn:hover{ background:rgba(255,255,255,.14); }
.ma-chd-ctx-sep{
  width:1px; height:18px;
  background:rgba(255,255,255,.18);
  margin:0 4px;
}
.ma-chd-ctx-val{
  min-width:24px; text-align:center;
  font-size:12px; font-weight:700; color:#E5E7EB;
  font-feature-settings:"tnum";
}
.ma-chd-ctx-swatch{
  width:26px; height:26px; border-radius:5px;
  overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.24);
  display:inline-block;
}
.ma-chd-ctx-swatch input{
  width:200%; height:200%;
  margin:-25%; padding:0; border:none;
  background:none; cursor:pointer;
}

/* ── Options + actions ── */
.ma-chd-optbox{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #E5E7EB;
}
html[data-theme="dark"] .ma-chd-optbox{ border-top-color:rgba(255,255,255,.08); }
.ma-chd-optbox-hdr{
  font-size:13.5px; font-weight:700;
  color:var(--text, #0F172A);
  margin-bottom:12px;
}
.ma-chd-optrow{
  display:flex; align-items:center; gap:14px;
}
.ma-chd-optlbl{ font-size:13px; color:var(--text, #0F172A); }
.ma-chd-opthint{
  font-size:11.5px; color:var(--muted, #6B7280);
  margin-top:6px;
}
.ma-chd-switch{ display:inline-flex; cursor:pointer; }
.ma-chd-switch input{ display:none; }
.ma-chd-switch-track{
  width:42px; height:23px;
  background:#D1D5DB;
  border-radius:999px;
  position:relative;
  transition:background .16s;
  display:block;
}
.ma-chd-switch-knob{
  position:absolute; top:2px; left:2px;
  width:19px; height:19px;
  background:#fff; border-radius:50%;
  box-shadow:0 1px 3px rgba(15,23,42,.24);
  transition:transform .16s;
}
.ma-chd-switch input:checked + .ma-chd-switch-track{ background:#10B981; }
.ma-chd-switch input:checked + .ma-chd-switch-track .ma-chd-switch-knob{ transform:translateX(19px); }

.ma-chd-actions{
  display:flex; gap:10px;
  margin-top:20px;
}
.ma-chd-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px;
  border-radius:7px;
  font-size:13.5px; font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.ma-chd-btn-save{ background:#10B981; color:#fff; }
.ma-chd-btn-save:hover{ background:#059669; }
.ma-chd-btn-back{
  background:#fff; color:var(--text, #0F172A);
  border-color:#E5E7EB;
}
.ma-chd-btn-back:hover{ background:#F9FAFB; border-color:#CBD5E1; }
html[data-theme="dark"] .ma-chd-btn-back{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);
}

/* ── Layers list ── */
.ma-chd-layer-list{ display:flex; flex-direction:column; gap:6px; }
.ma-chd-layer{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:7px;
  cursor:pointer;
}
.ma-chd-layer:hover{ border-color:#C7D2FE; }
.ma-chd-layer.sel{ border-color:#6366F1; background:#EEF2FF; }
html[data-theme="dark"] .ma-chd-layer{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] .ma-chd-layer.sel{ background:rgba(99,102,241,.18); }
.ma-chd-layer-ico{
  width:26px; height:26px; border-radius:5px;
  background:#F3F4F6; color:#6B7280;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-chd-layer-name{
  flex:1; min-width:0;
  font-size:12.5px; color:var(--text, #0F172A);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-chd-layer-btn{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:4px;
  color:#6B7280; cursor:pointer;
}
.ma-chd-layer-btn:hover{ background:#F3F4F6; color:#111827; }
.ma-chd-layer-empty{
  padding:20px; text-align:center;
  font-size:12.5px; color:var(--muted, #6B7280);
}
/* ═══════════ END v3.9.506 custom header designer ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.507 — Custom Header: image size-rules dialog
   ────────────────────────────────────────────────────────────────
   Shown when an added image falls outside 100x100 – 1500x1500 px.
   Plain white card, close X top-right, message then the four rules
   on their own lines — matching the reference dialog.
════════════════════════════════════════════════════════════════════ */
.ma-chd-modal-scrim{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:chdFade .12s ease;
}
@keyframes chdFade{ from{ opacity:0 } to{ opacity:1 } }
.ma-chd-modal{
  position:relative;
  width:100%; max-width:450px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 12px 40px rgba(15,23,42,.28);
}
html[data-theme="dark"] .ma-chd-modal{ background:#1E293B; }
.ma-chd-modal-x{
  position:absolute; top:12px; right:12px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none;
  color:#111827; cursor:pointer;
  border-radius:5px;
}
.ma-chd-modal-x:hover{ background:#F3F4F6; }
html[data-theme="dark"] .ma-chd-modal-x{ color:#E5E7EB; }
html[data-theme="dark"] .ma-chd-modal-x:hover{ background:rgba(255,255,255,.10); }
.ma-chd-modal-body{ padding:44px 32px 32px; }
.ma-chd-modal-lead{
  margin:0 0 14px;
  font-size:14px; line-height:1.5;
  color:var(--text, #111827);
}
.ma-chd-modal-rule{
  margin:0 0 4px;
  font-size:14px; line-height:1.55;
  color:var(--text, #111827);
}
/* ═══════════ END v3.9.507 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.508 — Custom Header: floating tool windows
   ────────────────────────────────────────────────────────────────
   Replaces the inline dropdown panels. Each window floats over the
   canvas, has a dark title bar with a drag grip and close X, and
   remembers where the user dragged it.
════════════════════════════════════════════════════════════════════ */
.ma-chd-body{ position:relative; }

.ma-chd-win{
  display:none;
  position:absolute; z-index:40;
  top:96px; right:18px;
  width:350px;
  max-height:520px;
  background:#fff;
  border-radius:3px;
  box-shadow:0 8px 28px rgba(15,23,42,.26);
  overflow:hidden;
  flex-direction:column;
}
.ma-chd-win.on{ display:flex; }
html[data-theme="dark"] .ma-chd-win{ background:#1E293B; }

.ma-chd-win-hdr{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px;
  background:#242A35;
  color:#fff;
  cursor:move;
  user-select:none;
  flex-shrink:0;
}
.ma-chd-win-grip{ display:flex; opacity:.75; flex-shrink:0; }
.ma-chd-win-title{
  flex:1; min-width:0;
  font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}
.ma-chd-win-x{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:4px;
  color:#fff; cursor:pointer; opacity:.85;
  flex-shrink:0;
}
.ma-chd-win-x:hover{ background:rgba(255,255,255,.16); opacity:1; }
.ma-chd-win-body{
  padding:12px;
  overflow-y:auto;
  flex:1; min-height:0;
}

/* ── Choose from Designs: categories then shape grid ── */
.ma-chd-cat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  margin:-12px -12px 0;
}
.ma-chd-cat{
  height:96px;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:12px;
  background:#EDEFF2;
  border:none; cursor:pointer;
  font-size:11px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:#5B6472;
  transition:background .12s;
}
.ma-chd-cat:hover{ background:#E2E6EB; }
html[data-theme="dark"] .ma-chd-cat{ background:rgba(255,255,255,.05); color:#CBD5E1; }
.ma-chd-shape-bar{
  display:flex; align-items:center; gap:8px;
  margin:-12px -12px 12px;
  padding:8px 10px;
  border-bottom:1px solid #E5E7EB;
}
html[data-theme="dark"] .ma-chd-shape-bar{ border-bottom-color:rgba(255,255,255,.10); }
.ma-chd-shape-back{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:4px;
  color:#6B7280; cursor:pointer; flex-shrink:0;
}
.ma-chd-shape-back:hover{ background:#F3F4F6; color:#111827; }
.ma-chd-shape-search{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-size:12px; letter-spacing:.04em;
  color:var(--text, #111827);
  text-transform:uppercase;
}
.ma-chd-shape-search::placeholder{ color:#9AA3B2; }
.ma-chd-shape-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:6px;
}
/* v3.9.509 — With 100+ glyphs a 2-column grid scrolls forever, so the
   picker runs 3 across and the window is taller. */
.ma-chd-shape-count{
  font-size:10.5px; color:#9AA3B2;
  letter-spacing:.04em;
  flex-shrink:0;
}
.ma-chd-shape{
  aspect-ratio:1 / 1;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:6px;
  cursor:pointer; padding:10px;
  transition:background .12s;
}
.ma-chd-shape:hover{ background:#F3F4F6; }
html[data-theme="dark"] .ma-chd-shape:hover{ background:rgba(255,255,255,.07); }
.ma-chd-shape svg{ width:100%; height:100%; }
.ma-chd-shape-none{
  grid-column:1 / -1;
  padding:24px 8px; text-align:center;
  font-size:12.5px; color:var(--muted, #6B7280);
}

/* ── Select Layout thumbnails inside the floating window ── */
.ma-chd-win .ma-chd-layout-grid{
  grid-template-columns:1fr 1fr;
  gap:10px;
}
/* ═══════════ END v3.9.508 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════════
   v3.9.545 — Choose from Designs modal
   Centred modal (like Add Image / Add Text) with two views:
     1) A 2-column grid of colour-coded category cards, each with title,
        count pill, blurb, illustration and chevron.
     2) A search bar plus a 3-column tile grid of glyphs; each tile has
        a soft-colour background and a bubble around the icon, tinted to
        match the category selected on the previous screen.
   Everything is scoped to .ma-chd-dsgn* / .ma-chd-cat-cards / .ma-chd-icard
   classes so no other section is affected.
════════════════════════════════════════════════════════════════════════ */

.ma-chd-dsgnmodal{
  display:none;
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,23,42,.42);
  align-items:center; justify-content:center;
  padding:24px;
}
.ma-chd-dsgnmodal.on{ display:flex; }
.ma-chd-dsgnbox{
  width:100%; max-width:820px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:18px;
  box-shadow:0 22px 64px rgba(15,23,42,.30);
  overflow:hidden;
}
html[data-theme="dark"] .ma-chd-dsgnbox{ background:#1B2432; }
.ma-chd-dsgnbody{
  padding:6px 22px 22px;
  overflow-y:auto;
  flex:1; min-height:0;
}

/* Level 1 — category cards */
.ma-chd-cat-cards{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px;
  padding-top:8px;
}
.ma-chd-catcard{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px;
  min-height:172px;
  padding:18px 20px;
  border:none; border-radius:16px;
  cursor:pointer;
  text-align:left;
  transition:transform .14s ease, box-shadow .14s ease;
}
.ma-chd-catcard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.ma-chd-catcard-info{
  display:flex; flex-direction:column;
  gap:9px;
  min-width:0;
  padding-right:4px;
}
.ma-chd-catcard-title{
  font-size:17px; font-weight:800;
  letter-spacing:-.3px;
  color:#0F172A;
  line-height:1.2;
}
html[data-theme="dark"] .ma-chd-catcard-title{ color:#F1F5F9; }
.ma-chd-catcard-pill{
  align-self:flex-start;
  padding:5px 11px;
  border-radius:999px;
  font-size:11.5px; font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  white-space:nowrap;
}
.ma-chd-catcard-desc{
  font-size:12.5px;
  color:#4B5563;
  line-height:1.45;
  max-width:22ch;
}
html[data-theme="dark"] .ma-chd-catcard-desc{ color:#94A3B8; }
.ma-chd-catcard-art{
  display:flex; align-items:center; justify-content:center;
  width:112px; height:88px;
  flex-shrink:0;
  pointer-events:none;
}
.ma-chd-catcard-art svg{
  width:100%; height:100%;
  display:block;
}
.ma-chd-catcard-chev{
  position:absolute;
  right:14px; bottom:14px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(15,23,42,.10);
  transition:transform .14s ease;
}
.ma-chd-catcard:hover .ma-chd-catcard-chev{ transform:translateX(2px); }
html[data-theme="dark"] .ma-chd-catcard-chev{ background:#0F172A; }

/* Level 2 — search bar */
.ma-chd-srchbar{
  position:sticky; top:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  margin:6px 0 14px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  z-index:2;
}
html[data-theme="dark"] .ma-chd-srchbar{
  background:#1B2432;
  border-color:rgba(255,255,255,.10);
}
.ma-chd-srch-back{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px;
  color:#6B7280; cursor:pointer; flex-shrink:0;
  transition:background .12s, color .12s;
}
.ma-chd-srch-back:hover{ background:#F3F4F6; color:#111827; }
html[data-theme="dark"] .ma-chd-srch-back:hover{ background:rgba(255,255,255,.08); color:#F1F5F9; }
.ma-chd-srch-ico{
  display:flex; align-items:center; justify-content:center;
  color:#9AA3B2;
  flex-shrink:0;
}
.ma-chd-srch-input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-size:14px;
  color:var(--text, #111827);
  padding:4px 0;
}
html[data-theme="dark"] .ma-chd-srch-input{ color:#F1F5F9; }
.ma-chd-srch-input::placeholder{ color:#9AA3B2; }
.ma-chd-srch-count{
  flex-shrink:0;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px; font-weight:700;
  letter-spacing:.02em;
}

/* Level 2 — icon tile grid */
.ma-chd-icard-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.ma-chd-icard{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  aspect-ratio:1 / 1;
  padding:14px 8px;
  border:1px solid transparent;
  border-radius:14px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ma-chd-icard:hover{
  transform:translateY(-1px);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}
/* v3.9.546 — Bubble sizing rewritten. The earlier build used
   `padding:22%` on the bubble, but percentage padding resolves against
   the parent tile's width (~180px), which — combined with the bubble's
   own 80px max-width — collapsed the content box to zero and hid the
   SVG. The bubble is now a plain circle and the SVG sits inside it at
   a fixed proportion of the bubble's own size. */
.ma-chd-icard-bubble{
  width:56%; aspect-ratio:1 / 1;
  max-width:80px; min-width:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  box-sizing:border-box;
}
.ma-chd-icard-bubble svg{
  width:54%; height:54%;
  display:block;
  color:#101828;
  overflow:visible;
}
html[data-theme="dark"] .ma-chd-icard-bubble svg{ color:#0F172A; }
.ma-chd-icard-lbl{
  font-size:12.5px; font-weight:600;
  color:#374151;
  text-align:center;
  line-height:1.2;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[data-theme="dark"] .ma-chd-icard-lbl{ color:#CBD5E1; }

/* Narrow screens — single-column category cards + 2-column tiles.
   Breakpoint raised so titles like "Business & Finance" never wrap
   in the 2-column layout inside the ~780px modal. */
@media (max-width:720px){
  .ma-chd-cat-cards{ grid-template-columns:1fr; }
  .ma-chd-icard-grid{ grid-template-columns:repeat(2, 1fr); }
  .ma-chd-catcard-art{ width:104px; height:82px; }
}
/* ═══════════ END v3.9.545 ═══════════ */

/* v3.9.508 — shape elements on the canvas */
.ma-chd-el-shape{ display:block; }
.ma-chd-el-shape svg{
  width:100%; height:100%; display:block;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.510 — Custom Header: image library + redesigned layers
════════════════════════════════════════════════════════════════════ */

/* ── Manage Layers — redesigned rows (v3.9.547) ── */
.ma-chd-layer-list{
  display:flex; flex-direction:column; gap:8px;
}

/* Modal shell (mirrors ma-chd-dsgnmodal so both modals feel identical) */
.ma-chd-lyrmodal{
  display:none;
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,23,42,.42);
  align-items:center; justify-content:center;
  padding:24px;
}
.ma-chd-lyrmodal.on{ display:flex; }
.ma-chd-lyrbox{
  width:100%; max-width:920px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:18px;
  box-shadow:0 22px 64px rgba(15,23,42,.30);
  overflow:hidden;
}
html[data-theme="dark"] .ma-chd-lyrbox{ background:#1B2432; }
.ma-chd-lyrbody{
  padding:14px 20px 20px;
  overflow-y:auto;
  flex:1; min-height:0;
}

/* Row */
.ma-chd-lyr{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px;
  border:1.5px solid #EEF1F5;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
html[data-theme="dark"] .ma-chd-lyr{ background:transparent; border-color:rgba(255,255,255,.08); }
.ma-chd-lyr:hover{ border-color:#DEE2EA; background:#FCFDFE; }
html[data-theme="dark"] .ma-chd-lyr:hover{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14); }
.ma-chd-lyr.sel{
  background:linear-gradient(90deg,#EFFBF3,#FFFFFF 55%);
  border-color:#3AB268;
  box-shadow:0 0 0 1px #3AB268 inset;
}
html[data-theme="dark"] .ma-chd-lyr.sel{
  background:rgba(58,178,104,.10);
  border-color:#3AB268;
  box-shadow:0 0 0 1px #3AB268 inset;
}
.ma-chd-lyr.is-hidden{ opacity:.55; }
.ma-chd-lyr.dragging{ opacity:.4; }
.ma-chd-lyr.dropzone{ box-shadow:0 -2px 0 0 #3AB268, 0 0 0 1px #EEF1F5 inset; }

/* Drag grip */
.ma-chd-lyr-grip{
  width:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#C3C9D4; cursor:grab;
}
.ma-chd-lyr-grip svg{ width:14px; height:14px; }
.ma-chd-lyr:hover .ma-chd-lyr-grip{ color:#8A93A2; }

/* Thumbnail tile */
.ma-chd-lyr-thumb{
  width:56px; height:40px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  border:1.5px solid #EEF1F5;
  background:#fff;
  overflow:hidden;
}
html[data-theme="dark"] .ma-chd-lyr-thumb{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10);
}
.ma-chd-lyr-thumb img{ width:100%; height:100%; object-fit:contain; padding:2px; }
.ma-chd-lyr-tt{
  font-family:'Times New Roman', Georgia, serif;
  font-size:22px; font-weight:700; line-height:1;
  letter-spacing:-.5px;
  display:inline-flex; align-items:baseline;
}
.ma-chd-lyr-tt sub{ font-size:16px; margin-left:1px; }
.ma-chd-lyr-dash{
  font-size:24px; font-weight:700; line-height:1;
}
.ma-chd-lyr-shape svg{ width:20px; height:20px; }

/* Title + type badge */
.ma-chd-lyr-title{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:2px 0;
}
.ma-chd-lyr-name{
  font-size:14px; font-weight:700;
  color:#0F172A;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
html[data-theme="dark"] .ma-chd-lyr-name{ color:#F1F5F9; }
.ma-chd-lyr-badge{
  flex-shrink:0;
  padding:3px 9px;
  border-radius:6px;
  font-size:10.5px; font-weight:700;
  letter-spacing:.06em;
  background:#F1F5F9;
  color:#64748B;
}
.ma-chd-lyr-badge--image{ background:#E9F6EE; color:#1E7E4B; }
.ma-chd-lyr-badge--text { background:#F1F5F9; color:#64748B; }
.ma-chd-lyr-badge--rule { background:#F1F5F9; color:#64748B; }
.ma-chd-lyr-badge--shape{ background:#EEF2FF; color:#4F46E5; }
html[data-theme="dark"] .ma-chd-lyr-badge{ background:rgba(255,255,255,.08); color:#CBD5E1; }
html[data-theme="dark"] .ma-chd-lyr-badge--image{ background:rgba(58,178,104,.18); color:#7EE0A0; }

/* Inline rename input */
.ma-chd-lyr-edit{
  width:100%;
  padding:5px 8px;
  border:1.5px solid #3AB268;
  border-radius:7px;
  font-size:13.5px; font-weight:600; font-family:inherit;
  color:#0F172A;
  background:#fff;
  outline:none;
}
html[data-theme="dark"] .ma-chd-lyr-edit{
  background:rgba(0,0,0,.30); color:#F1F5F9;
}

/* Action cluster */
.ma-chd-lyr-acts{
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}

/* Colour swatch — the dark rounded square in the reference */
.ma-chd-lyr-sw{
  width:34px; height:34px;
  border-radius:9px;
  border:1.5px solid #E5E7EB;
  padding:0;
  overflow:hidden; cursor:pointer; flex-shrink:0;
  display:inline-block;
  position:relative;
}
.ma-chd-lyr-sw input[type="color"]{
  position:absolute; inset:-2px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  border:none; padding:0; background:transparent;
  cursor:pointer;
  opacity:0;
}
.ma-chd-lyr-sw::-webkit-color-swatch-wrapper{ padding:0; }
.ma-chd-lyr-sw::-webkit-color-swatch{ border:none; }
.ma-chd-lyr-sw--placeholder{
  background:#94A3B8;
  cursor:default;
}

/* Pill action buttons */
.ma-chd-lyr-btn{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:9px;
  padding:0; cursor:pointer;
  transition:background .12s, color .12s, transform .1s ease;
}
.ma-chd-lyr-btn:active{ transform:scale(.94); }
.ma-chd-lyr-btn svg{ width:16px; height:16px; }

.ma-chd-lyr-btn--eye{ background:#E5F7EC; color:#22A45D; }
.ma-chd-lyr-btn--eye:hover{ background:#D5F0DF; }
.ma-chd-lyr-btn--eye.is-off{ background:#F1F5F9; color:#94A3B8; }

.ma-chd-lyr-btn--lock{ background:#F1F5F9; color:#64748B; }
.ma-chd-lyr-btn--lock:hover{ background:#E2E8F0; }
.ma-chd-lyr-btn--lock.is-on{ background:#FEF3C7; color:#B45309; }

.ma-chd-lyr-btn--del{ background:#FEE2E2; color:#DC2626; }
.ma-chd-lyr-btn--del:hover{ background:#FECACA; }

.ma-chd-lyr-btn--more{
  background:transparent; color:#94A3B8;
  width:28px; height:34px; border-radius:8px;
}
.ma-chd-lyr-btn--more:hover{ background:#F1F5F9; color:#374151; }
.ma-chd-lyr-btn--more svg{ width:16px; height:16px; }

html[data-theme="dark"] .ma-chd-lyr-btn--eye{ background:rgba(34,164,93,.16); color:#7EE0A0; }
html[data-theme="dark"] .ma-chd-lyr-btn--lock{ background:rgba(255,255,255,.08); color:#CBD5E1; }
html[data-theme="dark"] .ma-chd-lyr-btn--del{ background:rgba(220,38,38,.16); color:#FCA5A5; }
html[data-theme="dark"] .ma-chd-lyr-btn--more:hover{ background:rgba(255,255,255,.08); color:#F1F5F9; }

.ma-chd-lyr-empty{
  padding:36px 12px; text-align:center;
  font-size:13.5px; color:#6B7280;
}
html[data-theme="dark"] .ma-chd-lyr-empty{ color:#9CA3AF; }

/* Overflow menu shown when the ⋮ button is clicked */
.ma-chd-lyr-menu{
  position:fixed; z-index:10001;
  min-width:180px;
  padding:6px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.18);
  display:flex; flex-direction:column;
  animation:chdLyrMenuIn .12s ease-out;
}
html[data-theme="dark"] .ma-chd-lyr-menu{
  background:#0F172A;
  border-color:rgba(255,255,255,.10);
}
@keyframes chdLyrMenuIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}
.ma-chd-lyr-menu button{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:transparent; border:none; border-radius:8px;
  font-size:13px; font-weight:500; color:#0F172A;
  text-align:left;
  cursor:pointer;
  transition:background .1s;
}
.ma-chd-lyr-menu button:hover{ background:#F3F4F6; }
html[data-theme="dark"] .ma-chd-lyr-menu button{ color:#F1F5F9; }
html[data-theme="dark"] .ma-chd-lyr-menu button:hover{ background:rgba(255,255,255,.06); }
.ma-chd-lyr-menu button svg{ width:16px; height:16px; color:#64748B; flex-shrink:0; }

/* Narrow screens — drop the colour swatch and label pill can shrink */
@media (max-width:560px){
  .ma-chd-lyr{ gap:10px; padding:10px 12px; }
  .ma-chd-lyr-thumb{ width:44px; height:34px; }
  .ma-chd-lyr-acts{ gap:6px; }
  .ma-chd-lyr-btn{ width:32px; height:32px; }
  .ma-chd-lyr-sw{ width:32px; height:32px; }
}
/* ═══════════ END v3.9.510 / v3.9.547 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.511 — Select Layout: live design thumbnails
   ────────────────────────────────────────────────────────────────
   Each card holds a real 1000x260 miniature of the design, scaled by
   JS to the card width, so what you see is what lands on the canvas.
════════════════════════════════════════════════════════════════════ */
.ma-chd-layout-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ma-chd-lay{
  display:block; width:100%;
  padding:0;
  background:#fff;
  border:1.5px solid #E3E6EB;
  border-radius:5px;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  transition:border-color .12s, box-shadow .12s;
}
.ma-chd-lay:hover{
  border-color:#6366F1;
  box-shadow:0 3px 12px rgba(99,102,241,.18);
}
html[data-theme="dark"] .ma-chd-lay{
  background:#fff;
  border-color:rgba(255,255,255,.16);
}
.ma-chd-lay-frame{
  display:block; position:relative;
  width:100%; overflow:hidden;
  background:#fff;
}
.ma-chd-lay-surface{
  display:block; position:relative;
  width:1000px; height:260px;
  transform-origin:0 0;
  pointer-events:none;
}
/* Miniatures are static — strip the canvas element affordances */
.ma-chd-lay-surface .ma-chd-el{
  cursor:default;
  outline:none !important;
}
.ma-chd-lay-name{
  display:block;
  padding:9px 12px 10px;
  border-top:1px solid #EDEFF2;
  font-size:12.5px; font-weight:600;
  color:#3F4854;
  letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[data-theme="dark"] .ma-chd-lay-name{
  border-top-color:rgba(0,0,0,.10); color:#4B5563;
}
/* The layout picker needs more width than the other windows so the
   miniatures stay readable. */
/* v3.9.516 — The layout picker is the one window whose whole job is
   showing artwork, so it runs much wider and taller than the others.
   At 780px the two-column grid gives ~360px thumbnails, roughly a
   third of real size, where names and colour blocking read clearly.
   It also anchors left so it can't push off the panel edge. */
#chd-panel-layout{
  width:780px;
  max-height:none;
  left:18px;
  right:auto;
}
#chd-panel-layout .ma-chd-win-body{
  max-height:640px;
  padding:14px 16px 16px;
}
@media(max-width:1180px){
  #chd-panel-layout{ width:calc(100% - 36px); }
}
@media(max-width:640px){
  #chd-panel-layout{ width:calc(100vw - 40px); left:8px; }
  #chd-panel-layout .ma-chd-win-body{ max-height:70vh; }
  .ma-chd-laygrid{ grid-template-columns:1fr; }
}
/* ═══════════ END v3.9.511 ═══════════ */

/* v3.9.512 — font picker in the element context bar */
.ma-chd-ctx-font{
  height:28px;
  max-width:150px;
  padding:0 6px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  color:#E5E7EB;
  font-size:11.5px;
  font-family:inherit;
  cursor:pointer;
  outline:none;
}
.ma-chd-ctx-font:disabled{ opacity:.4; cursor:not-allowed; }
.ma-chd-ctx-font option,
.ma-chd-ctx-font optgroup{ color:#111827; background:#fff; }
/* Text-only controls dim when an image or shape is selected */
.ma-chd-ctx.is-image .ma-chd-ctx-val{ opacity:.4; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.513 — "Use your own header" mode
   ────────────────────────────────────────────────────────────────
   With the toggle on, the designer collapses to a single upload slot
   and that image becomes the printed header.
════════════════════════════════════════════════════════════════════ */
.ma-chd-own{ display:none; }
.ma-chd-body.own-mode .ma-chd-own{
  display:flex; align-items:flex-start; gap:26px;
  margin-top:18px;
}
/* In own-mode the whole designer is irrelevant — hide it */
.ma-chd-body.own-mode .ma-chd-toolbar,
.ma-chd-body.own-mode .ma-chd-stage,
.ma-chd-body.own-mode .ma-chd-ctx,
.ma-chd-body.own-mode .ma-chd-win{
  display:none !important;
}
.ma-chd-body.own-mode .ma-chd-optbox{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.ma-chd-own-lbl{
  width:110px; flex-shrink:0;
  padding-top:8px;
  font-size:13px; line-height:1.35;
  color:var(--text, #111827);
}
.ma-chd-own-slots{
  display:flex; align-items:flex-start; gap:14px;
  flex-wrap:wrap;
}
.ma-chd-own-drop{
  width:172px; height:126px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  border:1.5px dashed #C9CFD8;
  border-radius:5px;
  color:#9AA3B2;
  cursor:pointer;
  transition:border-color .12s, background .12s, color .12s;
}
.ma-chd-own-drop:hover,
.ma-chd-own-drop.over{
  border-color:#10B981; background:#F0FDF9; color:#059669;
}
.ma-chd-own-drop.busy{ opacity:.55; pointer-events:none; }
html[data-theme="dark"] .ma-chd-own-drop{ border-color:rgba(255,255,255,.18); }
.ma-chd-own-drop-t{
  font-size:12.5px; font-weight:600;
  color:var(--text, #4B5563);
}
.ma-chd-own-drop-s{ font-size:11px; color:#9AA3B2; }

.ma-chd-own-pv{ display:flex; }
.ma-chd-own-card{
  position:relative;
  width:172px; height:126px;
  border:1.5px solid #10B981;
  border-radius:5px;
  background:#fff;
  padding:5px;
  overflow:hidden;
}
.ma-chd-own-card img{
  width:100%; height:100%;
  object-fit:contain; display:block;
}
.ma-chd-own-x{
  position:absolute; top:-9px; right:-9px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:#10B981; color:#fff;
  border:2px solid #fff;
  border-radius:50%;
  cursor:pointer; padding:0;
  box-shadow:0 1px 4px rgba(15,23,42,.22);
}
.ma-chd-own-x:hover{ background:#DC2626; }
/* ═══════════ END v3.9.513 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.514 — Add Text window + Download Designed Image
════════════════════════════════════════════════════════════════════ */
/* Download row */
.ma-chd-dlrow{
  display:flex; align-items:flex-start; gap:26px;
  margin-top:18px;
}
.ma-chd-body.own-mode .ma-chd-dlrow{ display:none; }
.ma-chd-dl-lbl{
  width:110px; flex-shrink:0;
  padding-top:7px;
  font-size:13px; line-height:1.35;
  color:var(--text, #111827);
}
.ma-chd-dlbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:#2E7CF6; color:#fff;
  border:none; border-radius:5px;
  font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .12s;
}
.ma-chd-dlbtn:hover{ background:#1D63D2; }
.ma-chd-dlbtn:disabled{ opacity:.6; cursor:wait; }
.ma-chd-dl-note{
  margin-top:8px;
  font-size:11.5px; font-style:italic;
  color:var(--muted, #6B7280);
}

/* v3.9.515 — Select Layout: industry category chips */
.ma-chd-laycats{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:-4px -2px 12px;
  padding-bottom:10px;
  border-bottom:1px solid #EDEFF2;
}
html[data-theme="dark"] .ma-chd-laycats{ border-bottom-color:rgba(255,255,255,.10); }
.ma-chd-laycat{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  border:1px solid #E3E6EB;
  background:#fff;
  color:#5B6472;
  border-radius:999px;
  font-size:11.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
}
.ma-chd-laycat:hover{ border-color:#6366F1; color:#4F46E5; }
.ma-chd-laycat.on{ background:#4F46E5; border-color:#4F46E5; color:#fff; }
html[data-theme="dark"] .ma-chd-laycat{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#CBD5E1;
}
html[data-theme="dark"] .ma-chd-laycat.on{ background:#4F46E5; border-color:#4F46E5; color:#fff; }
.ma-chd-laycat-n{
  font-size:10px; font-weight:700;
  opacity:.6;
}
.ma-chd-laygrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.518 — SELECT INVOICE HEADER LAYOUT (full-screen picker)
   ────────────────────────────────────────────────────────────────
   Dark navy title bar, left category rail with count badges, and a
   3-up preview grid where each card has its own "Use This" action.
════════════════════════════════════════════════════════════════════ */

body.ma-hlm-lock{ overflow:hidden; }

.ma-hlm-wrap{
  position:fixed; inset:0;
  z-index:100000;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
}
.ma-hlm-wrap.open{ display:flex; }

.ma-hlm-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(2px);
}

.ma-hlm-box{
  position:relative;
  width:100%; max-width:1500px;
  height:100%; max-height:900px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:maHlmIn .18s ease;
}
@keyframes maHlmIn{
  from{ opacity:0; transform:translateY(10px) scale(.99); }
  to  { opacity:1; transform:none; }
}

/* ── Title bar ── */
.ma-hlm-hdr{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px;
  background:#1E293B;
  color:#fff;
  flex-shrink:0;
}
.ma-hlm-hdr-ico{
  width:52px; height:52px;
  border-radius:12px;
  background:#fff; color:#2563EB;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ma-hlm-hdr-txt{ flex:1; min-width:0; }
.ma-hlm-title{
  font-size:21px; font-weight:800; letter-spacing:-0.3px;
  line-height:1.2;
}
.ma-hlm-sub{
  font-size:13px; color:#CBD5E1;
  margin-top:3px;
}
.ma-hlm-x{
  width:38px; height:38px;
  border:none; background:transparent;
  color:#fff; cursor:pointer;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .14s;
}
.ma-hlm-x:hover{ background:rgba(255,255,255,.12); }

/* ── Body: rail + main ── */
.ma-hlm-body{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:280px 1fr;
}

/* Left category rail */
.ma-hlm-rail{
  border-right:1px solid #E5E7EB;
  padding:18px 14px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  background:#fff;
}
.ma-hlm-rail::-webkit-scrollbar{ width:7px; }
.ma-hlm-rail::-webkit-scrollbar-thumb{ background:#E5E7EB; border-radius:4px; }

.ma-hlm-cat{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:13px 15px;
  border:1px solid #E5E7EB;
  background:#fff;
  border-radius:11px;
  cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:600;
  color:#334155;
  text-align:left;
  transition:background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.ma-hlm-cat:hover{
  border-color:#BFDBFE;
  background:#F8FAFF;
}
.ma-hlm-cat-ico{
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#2563EB;
}
.ma-hlm-cat-name{ flex:1; min-width:0; }
.ma-hlm-cat-n{
  min-width:26px; height:24px;
  padding:0 8px;
  border-radius:12px;
  background:#F1F5F9;
  color:#64748B;
  font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  transition:background .14s, color .14s;
}
/* Active category — solid brand fill, matching the reference */
.ma-hlm-cat.on{
  background:linear-gradient(135deg, #3B82F6, #2563EB);
  border-color:#2563EB;
  color:#fff;
  box-shadow:0 3px 10px rgba(37,99,235,.28);
}
.ma-hlm-cat.on .ma-hlm-cat-ico{ color:#fff; }
.ma-hlm-cat.on .ma-hlm-cat-n{
  background:rgba(255,255,255,.24);
  color:#fff;
}

/* Right main pane */
.ma-hlm-main{
  min-width:0;
  overflow-y:auto;
  padding:22px 26px 28px;
  background:#fff;
}
.ma-hlm-main::-webkit-scrollbar{ width:9px; }
.ma-hlm-main::-webkit-scrollbar-thumb{ background:#E5E7EB; border-radius:5px; }
.ma-hlm-main::-webkit-scrollbar-thumb:hover{ background:#CBD5E1; }

.ma-hlm-main-hdr{ margin-bottom:18px; }
.ma-hlm-main-title{
  margin:0;
  font-size:24px; font-weight:800; letter-spacing:-0.4px;
  color:#0F172A;
}
.ma-hlm-main-sub{
  margin:5px 0 0;
  font-size:14px; color:#64748B;
}

/* ── Card grid ── */
.ma-hlm-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media(max-width:1180px){ .ma-hlm-grid{ grid-template-columns:repeat(2, 1fr); } }

.ma-hlm-card{
  border:1px solid #E5E7EB;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.ma-hlm-card:hover{
  border-color:#93C5FD;
  box-shadow:0 6px 20px rgba(37,99,235,.14);
  transform:translateY(-2px);
}

.ma-hlm-card-preview{
  padding:0;
  background:#fff;
  overflow:hidden;
}
.ma-hlm-card-frame{
  position:relative;
  width:100%;
  overflow:hidden;
}
.ma-hlm-card-surface{
  position:relative;
  width:1000px; height:260px;
  transform-origin:0 0;
  background:#fff;
}

.ma-hlm-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#F8FAFC;
  border-top:1px solid #EEF2F6;
  margin-top:auto;
}
.ma-hlm-card-name{
  font-size:14.5px; font-weight:600; color:#334155;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-hlm-use{
  padding:8px 18px;
  border:1px solid #93C5FD;
  background:#fff;
  color:#2563EB;
  border-radius:8px;
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:background .14s, color .14s, border-color .14s;
}
.ma-hlm-use:hover{
  background:#2563EB; color:#fff; border-color:#2563EB;
}

/* ── Mobile ── */
@media(max-width:860px){
  .ma-hlm-wrap{ padding:0; }
  .ma-hlm-box{ max-height:none; border-radius:0; }
  .ma-hlm-body{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .ma-hlm-rail{
    flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    border-right:none; border-bottom:1px solid #E5E7EB;
    padding:12px;
  }
  .ma-hlm-cat{ white-space:nowrap; width:auto; flex-shrink:0; }
  .ma-hlm-grid{ grid-template-columns:1fr; }
  .ma-hlm-main{ padding:16px 14px 22px; }
  .ma-hlm-main-title{ font-size:19px; }
  .ma-hlm-hdr{ padding:14px 16px; gap:12px; }
  .ma-hlm-hdr-ico{ width:42px; height:42px; }
  .ma-hlm-title{ font-size:17px; }
  .ma-hlm-sub{ font-size:12px; }
}

/* ── Dark mode ── */
html[data-theme="dark"] .ma-hlm-box{ background:#0F172A; }
html[data-theme="dark"] .ma-hlm-rail,
html[data-theme="dark"] .ma-hlm-main{ background:#0F172A; }
html[data-theme="dark"] .ma-hlm-rail{ border-right-color:#1E293B; }
html[data-theme="dark"] .ma-hlm-cat{
  background:#1E293B; border-color:#334155; color:#CBD5E1;
}
html[data-theme="dark"] .ma-hlm-cat:hover{ background:#243449; border-color:#3B5470; }
html[data-theme="dark"] .ma-hlm-cat-n{ background:#334155; color:#94A3B8; }
html[data-theme="dark"] .ma-hlm-main-title{ color:#F1F5F9; }
html[data-theme="dark"] .ma-hlm-main-sub{ color:#94A3B8; }
html[data-theme="dark"] .ma-hlm-card{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .ma-hlm-card-foot{ background:#182234; border-top-color:#334155; }
html[data-theme="dark"] .ma-hlm-card-name{ color:#CBD5E1; }
html[data-theme="dark"] .ma-hlm-use{ background:#1E293B; border-color:#3B5470; color:#93C5FD; }
html[data-theme="dark"] .ma-hlm-use:hover{ background:#2563EB; color:#fff; border-color:#2563EB; }
/* Card previews stay light — the designs assume a white page */
html[data-theme="dark"] .ma-hlm-card-preview,
html[data-theme="dark"] .ma-hlm-card-surface{ background:#fff; }
/* ═══════════ END v3.9.518 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.519 — HEADER DESIGNER: hex colour, spacing controls,
              inline text editing
════════════════════════════════════════════════════════════════════ */

/* ── Hex colour box (sits beside the swatch) ───────────────────── */
.ma-chd-ctx-hexwrap{
  display:inline-flex; align-items:center;
  height:28px;
  padding:0 7px 0 6px;
  gap:1px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:rgba(255,255,255,.06);
  transition:border-color .14s, background .14s;
}
.ma-chd-ctx-hexwrap:focus-within{
  border-color:#60A5FA;
  background:rgba(96,165,250,.14);
}
.ma-chd-ctx-hexhash{
  font-size:12px; font-weight:700;
  color:rgba(255,255,255,.45);
  line-height:1;
}
.ma-chd-ctx-hex{
  width:62px;
  border:none; background:transparent; outline:none;
  color:#fff;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:0;
}
.ma-chd-ctx-hex::placeholder{ color:rgba(255,255,255,.3); letter-spacing:.5px; }

/* ── Spacing control groups ────────────────────────────────────── */
.ma-chd-ctx-group{
  display:inline-flex; align-items:center; gap:2px;
  transition:opacity .14s;
}
.ma-chd-ctx-gico{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  color:rgba(255,255,255,.5);
  flex-shrink:0;
}
/* Text-only groups fade + lock out when a non-text layer is selected */
.ma-chd-ctx-textonly.is-off{
  opacity:.32;
  pointer-events:none;
}

/* ── Inline text editing on the canvas ─────────────────────────── */
.ma-chd-el.is-editing{
  outline:2px solid #2563EB;
  outline-offset:1px;
  /* Let the caret and overflowing text stay visible while typing —
     the element clips again once editing commits. */
  overflow:visible;
  background:rgba(37,99,235,.06);
  cursor:text;
  user-select:text;
  -webkit-user-select:text;
  z-index:60;
}
.ma-chd-el.is-editing:focus{ outline-color:#1D4ED8; }
/* Caret stays visible on dark-coloured text */
.ma-chd-el.is-editing{ caret-color:#2563EB; }

/* Light-theme context bar variants (the bar is dark by default, but
   some themes render it light) */
html[data-theme="light"] .ma-chd-ctx-hexwrap{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.04);
}
html[data-theme="light"] .ma-chd-ctx-hexhash{ color:rgba(0,0,0,.4); }
html[data-theme="light"] .ma-chd-ctx-hex{ color:#0F172A; }
html[data-theme="light"] .ma-chd-ctx-hex::placeholder{ color:rgba(0,0,0,.28); }
html[data-theme="light"] .ma-chd-ctx-gico{ color:rgba(0,0,0,.42); }

/* Narrow screens: let the context bar wrap rather than overflow */
@media(max-width:900px){
  .ma-chd-ctx{ flex-wrap:wrap; row-gap:6px; }
  .ma-chd-ctx-hex{ width:54px; }
}
/* ═══════════ END v3.9.519 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.520 — Captioned spacing fields in the header context bar
   ────────────────────────────────────────────────────────────────
   Each spacing control is a small stack: a caption on top, the
   −/value/+ row beneath. The bar grows a little taller, so the
   plain buttons are nudged to stay optically centred beside them.
════════════════════════════════════════════════════════════════════ */

.ma-chd-ctx-field{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  transition:opacity .14s;
}
.ma-chd-ctx-cap{
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  line-height:1;
  white-space:nowrap;
  user-select:none;
}
/* The caption lives on the wrapper, so the disabled state moves here */
.ma-chd-ctx-field.ma-chd-ctx-textonly.is-off{
  opacity:.32;
  pointer-events:none;
}
/* Keep the value readable at the smaller stacked size */
.ma-chd-ctx-field .ma-chd-ctx-val{ min-width:30px; text-align:center; }

html[data-theme="light"] .ma-chd-ctx-cap{ color:rgba(0,0,0,.45); }

@media(max-width:900px){
  .ma-chd-ctx-cap{ font-size:8px; }
}
/* ═══════════ END v3.9.520 ═══════════ */

/* v3.9.531 — Header image requirement note */
.ma-chd-own-req{
  display:flex; align-items:flex-start; gap:7px;
  margin-top:12px;
  max-width:520px;
  font-size:11.5px; line-height:1.5;
  color:var(--muted, #6B7280);
}
.ma-chd-own-req svg{ flex-shrink:0; margin-top:2px; color:#2E7CF6; }
.ma-chd-own-req b{ color:var(--text, #111827); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.534 — TEMPLATE EDITOR
   Full-screen document editor opened from a template card's Edit button.
════════════════════════════════════════════════════════════════════════ */

/* Edit button on the template card — revealed on hover */
.ma-ptcard-edit{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px;
  border:1px solid var(--bdr, #E5E7EB);
  background:#fff; color:#334155;
  border-radius:7px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer;
  opacity:0; transform:translateY(2px);
  transition:opacity .14s, transform .14s, background .14s, border-color .14s, color .14s;
}
.ma-ptcard-tpl:hover .ma-ptcard-edit,
.ma-ptcard-edit:focus-visible{ opacity:1; transform:none; }
.ma-ptcard-edit:hover{ background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; }
@media (hover:none){ .ma-ptcard-edit{ opacity:1; transform:none; } }

body.ma-tple-lock{ overflow:hidden; }

.ma-tple-overlay{
  position:fixed; inset:0; z-index:100050;
  background:#F1F3F6;
  display:flex; flex-direction:column;
}
.ma-tple-top{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:#fff;
  border-bottom:1px solid #E5E7EB;
}
.ma-tple-top-title{ font-size:15px; font-weight:700; color:#0F172A; }
.ma-tple-x{
  width:34px; height:34px; border:none; background:transparent;
  color:#334155; cursor:pointer; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.ma-tple-x:hover{ background:#F1F5F9; }

.ma-tple-body{ flex:1; min-height:0; display:flex; position:relative; }

.ma-tple-stage{
  flex:1; min-width:0;
  overflow:auto;
  display:flex; justify-content:center;
  padding:22px;
  position:relative;
}
.ma-tple-frame{
  width:820px; max-width:100%;
  min-height:1000px;
  border:none;
  background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.14);
}
.ma-tple-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#64748B; font-size:14px;
}

/* Collapse handle between stage and panel */
.ma-tple-collapse{
  position:absolute; top:14px; right:322px;
  width:26px; height:26px;
  border:1px solid #E5E7EB; background:#fff;
  border-radius:6px; cursor:pointer;
  color:#475569; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition:right .2s;
}
.ma-tple-overlay.side-hidden .ma-tple-collapse{ right:14px; }
.ma-tple-overlay.side-hidden .ma-tple-side{ margin-right:-320px; }

/* Right panel */
.ma-tple-side{
  width:320px; flex-shrink:0;
  background:#fff;
  border-left:1px solid #E5E7EB;
  display:flex; flex-direction:column;
  transition:margin-right .2s;
}
.ma-tple-side-hd{ padding:16px 18px 12px; }
.ma-tple-side-t{ font-size:15px; font-weight:700; color:#0F172A; }
.ma-tple-side-s{ font-size:12px; color:#64748B; margin-top:3px; }

.ma-tple-colhead{
  display:grid; grid-template-columns:1fr 96px 52px;
  gap:8px; align-items:center;
  padding:8px 18px;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  color:#94A3B8;
  border-bottom:1px solid #F1F5F9;
}
.ma-tple-colhead span:nth-child(2),
.ma-tple-colhead span:nth-child(3){ text-align:center; }

.ma-tple-cols{ flex:1; overflow-y:auto; padding:6px 0; }
.ma-tple-col{
  display:grid; grid-template-columns:1fr 96px 52px;
  gap:8px; align-items:center;
  padding:10px 18px;
  transition:opacity .14s;
}
.ma-tple-col.is-off{ opacity:.45; }
.ma-tple-col-n{ font-size:13px; color:#334155; line-height:1.3; }
.ma-tple-col-w{ display:flex; align-items:center; gap:6px; }
.ma-tple-col-w input[type="range"]{
  flex:1; min-width:0; accent-color:#10B981; cursor:pointer;
}
.ma-tple-col-v{
  min-width:22px; text-align:center;
  font-size:11px; font-weight:700; color:#fff;
  background:#10B981; border-radius:5px; padding:2px 5px;
  font-variant-numeric:tabular-nums;
}
.ma-tple-col-t{ display:flex; justify-content:center; }

/* Visibility switch */
.ma-tple-sw{
  width:38px; height:21px; padding:0;
  border:none; border-radius:11px;
  background:#CBD5E1; cursor:pointer; position:relative;
  transition:background .16s;
}
.ma-tple-sw::after{
  content:''; position:absolute; top:3px; left:3px;
  width:15px; height:15px; border-radius:50%;
  background:#fff; transition:transform .16s;
}
.ma-tple-sw.on{ background:#10B981; }
.ma-tple-sw.on::after{ transform:translateX(17px); }

.ma-tple-side-ft{
  flex-shrink:0;
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 18px;
  border-top:1px solid #E5E7EB;
}
.ma-tple-reset,
.ma-tple-save{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:8px;
  font-family:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer;
}
.ma-tple-reset{ border:1px solid #E5E7EB; background:#fff; color:#334155; }
.ma-tple-reset:hover{ background:#F8FAFC; }
.ma-tple-save{ border:none; background:#10B981; color:#fff; }
.ma-tple-save:hover{ background:#059669; }
.ma-tple-save:disabled{ opacity:.6; cursor:default; }

/* Floating format toolbar */
.ma-tple-fmt{
  position:fixed; z-index:100060;
  display:flex; align-items:center; gap:8px;
  padding:7px 9px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.ma-tple-fmt-g{ display:inline-flex; align-items:center; gap:5px; }
.ma-tple-fmt-ico{ color:#475569; display:inline-flex; }
.ma-tple-fmt input[type="number"]{
  width:46px; padding:5px 6px;
  border:1px solid #E5E7EB; border-radius:7px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#0F172A; text-align:center; outline:none;
}
.ma-tple-fmt input[type="number"]:focus{ border-color:#93C5FD; }
.ma-tple-b{
  width:32px; height:30px; padding:0;
  border:1px solid #E5E7EB; border-radius:7px;
  background:#64748B; color:#fff;
  font-family:inherit; font-size:14px; font-weight:800;
  cursor:pointer;
}
.ma-tple-b.on{ background:#0F172A; }
.ma-tple-b:hover{ background:#475569; }

/* Narrow screens: panel becomes a bottom sheet */
@media (max-width:900px){
  .ma-tple-body{ flex-direction:column; }
  .ma-tple-side{
    width:auto; border-left:none; border-top:1px solid #E5E7EB;
    max-height:46vh;
  }
  .ma-tple-collapse{ display:none; }
  .ma-tple-frame{ min-height:640px; }
}

/* Dark mode */
html[data-theme="dark"] .ma-tple-overlay{ background:#0B1120; }
html[data-theme="dark"] .ma-tple-top,
html[data-theme="dark"] .ma-tple-side{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-tple-top-title,
html[data-theme="dark"] .ma-tple-side-t{ color:#F1F5F9; }
html[data-theme="dark"] .ma-tple-side-s,
html[data-theme="dark"] .ma-tple-col-n{ color:#94A3B8; }
html[data-theme="dark"] .ma-tple-colhead{ border-color:#1E293B; }
html[data-theme="dark"] .ma-tple-side-ft{ border-color:#1E293B; }
html[data-theme="dark"] .ma-tple-reset{ background:#1E293B; border-color:#334155; color:#CBD5E1; }
html[data-theme="dark"] .ma-tple-fmt{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .ma-tple-fmt input[type="number"]{ background:#0F172A; border-color:#334155; color:#F1F5F9; }
html[data-theme="dark"] .ma-ptcard-edit{ background:#1E293B; border-color:#334155; color:#CBD5E1; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.535 — Template editor: expanded toolbar (colour, font, clear)
════════════════════════════════════════════════════════════════════════ */
.ma-tple-hint{
  flex:1; text-align:center;
  font-size:12.5px; color:#64748B;
}
.ma-tple-fmt-lbl{
  max-width:150px;
  font-size:12px; font-weight:700; color:#0F172A;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ma-tple-fmt-sep{
  width:1px; height:22px; background:#E5E7EB; flex-shrink:0;
}
/* Colour swatch */
.ma-tple-cw{
  width:32px; height:30px;
  border:1px solid #E5E7EB; border-radius:7px;
  overflow:hidden; cursor:pointer; padding:0;
  display:inline-flex;
}
.ma-tple-cw input[type="color"]{
  width:150%; height:150%;
  margin:-25%; padding:0; border:none; background:none; cursor:pointer;
}
/* Font family picker */
.ma-tple-ff{
  height:30px; max-width:132px;
  padding:0 6px;
  border:1px solid #E5E7EB; border-radius:7px;
  background:#fff; color:#0F172A;
  font-family:inherit; font-size:12.5px;
  cursor:pointer; outline:none;
}
.ma-tple-ff:focus{ border-color:#93C5FD; }
/* Clear-styling button */
.ma-tple-clr{
  height:30px; padding:0 10px;
  border:1px solid #E5E7EB; border-radius:7px;
  background:#fff; color:#64748B;
  font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer;
}
.ma-tple-clr:hover{ background:#FEF2F2; border-color:#FCA5A5; color:#B91C1C; }

@media (max-width:900px){
  .ma-tple-hint{ display:none; }
  .ma-tple-fmt{ flex-wrap:wrap; max-width:calc(100vw - 24px); }
  .ma-tple-fmt-lbl{ max-width:110px; }
}

html[data-theme="dark"] .ma-tple-hint{ color:#94A3B8; }
html[data-theme="dark"] .ma-tple-fmt-lbl{ color:#F1F5F9; }
html[data-theme="dark"] .ma-tple-fmt-sep{ background:#334155; }
html[data-theme="dark"] .ma-tple-ff,
html[data-theme="dark"] .ma-tple-clr{ background:#0F172A; border-color:#334155; color:#CBD5E1; }
html[data-theme="dark"] .ma-tple-cw{ border-color:#334155; }

/* v3.9.536 — Editable column heading input in the editor panel */
.ma-tple-col-lbl{
  width:100%;
  padding:5px 7px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  font-family:inherit; font-size:13px; color:#334155;
  outline:none;
  transition:border-color .14s, background .14s;
}
.ma-tple-col-lbl:hover{ border-color:#E5E7EB; background:#F8FAFC; }
.ma-tple-col-lbl:focus{ border-color:#93C5FD; background:#fff; }
.ma-tple-col-lbl::placeholder{ color:#64748B; opacity:1; }
html[data-theme="dark"] .ma-tple-col-lbl{ color:#CBD5E1; }
html[data-theme="dark"] .ma-tple-col-lbl:hover{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .ma-tple-col-lbl:focus{ background:#0F172A; border-color:#3B5470; }
html[data-theme="dark"] .ma-tple-col-lbl::placeholder{ color:#94A3B8; }

/* v3.9.537 — placeholder while the editor reads the document's columns */
.ma-tple-empty{ padding:18px; font-size:13px; color:#64748B; text-align:center; }
html[data-theme="dark"] .ma-tple-empty{ color:#94A3B8; }

/* v3.9.538 — Editable text field in the format toolbar */
.ma-tple-fmt-txt{
  width:150px; height:30px;
  padding:0 8px;
  border:1px solid #E5E7EB; border-radius:7px;
  background:#fff; color:#0F172A;
  font-family:inherit; font-size:12.5px; font-weight:600;
  outline:none;
}
.ma-tple-fmt-txt:focus{ border-color:#93C5FD; }
.ma-tple-fmt-txt:disabled{ background:#F8FAFC; color:#94A3B8; cursor:not-allowed; }
html[data-theme="dark"] .ma-tple-fmt-txt{ background:#0F172A; border-color:#334155; color:#F1F5F9; }
html[data-theme="dark"] .ma-tple-fmt-txt:disabled{ background:#1E293B; color:#64748B; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.541 — DESIGN CUSTOM HEADER: modern restyle
   ──────────────────────────────────────────────────────────────────────
   The section worked but read as a flat dark strip stuck on top of a
   plain box. This pulls it together as one elevated editor surface:

     • a single rounded card with a soft shadow, so the toolbar, canvas
       and options read as one tool rather than three stacked blocks
     • a segmented toolbar with pill-shaped tools, a coloured active
       state and a small underline, instead of full-bleed uppercase
       buttons that all looked equally important
     • a canvas sitting on a subtle checkerboard so transparent artwork
       is readable, with a soft ring instead of a dashed border
     • quieter Options and Actions rows with clearer grouping

   Appended rather than edited in place so the original rules stay as
   the fallback if a browser skips these.
════════════════════════════════════════════════════════════════════════ */

/* ── Outer card ─────────────────────────────────────────────────── */
.ma-chd-body{
  padding-top:0;
  border:1px solid #E7EAF0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  overflow:visible;
}
html[data-theme="dark"] .ma-chd-body{
  background:#0F172A; border-color:#1E293B;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.ma-chd-toolbar{
  gap:4px;
  padding:10px 12px;
  background:linear-gradient(180deg,#1E293B 0%,#172033 100%);
  border-radius:14px 14px 0 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ma-chd-tool{
  flex:1 1 0; min-width:130px;
  gap:9px;
  padding:11px 12px;
  border-radius:9px;
  color:#AEB9CC;
  font-size:12px; font-weight:600;
  letter-spacing:.02em;
  text-transform:none;                 /* uppercase shouted at the user */
  position:relative;
  transition:background .16s, color .16s, transform .16s;
}
.ma-chd-tool svg{ opacity:.85; transition:opacity .16s; }
.ma-chd-tool:hover{
  background:rgba(255,255,255,.07); color:#F1F5F9; transform:translateY(-1px);
}
.ma-chd-tool:hover svg{ opacity:1; }
.ma-chd-tool.on{
  background:rgba(59,130,246,.16);
  color:#fff;
}
.ma-chd-tool.on svg{ opacity:1; color:#93C5FD; }
/* Small underline marks the active tool without shifting layout */
.ma-chd-tool.on::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:5px;
  height:2px; border-radius:2px;
  background:#60A5FA;
}

/* ── Stage + canvas ─────────────────────────────────────────────── */
.ma-chd-stage{
  padding:20px;
  border:none;
  border-radius:0;
  background:#F7F8FA;
}
html[data-theme="dark"] .ma-chd-stage{ background:#0B1120; }

.ma-chd-canvas{
  border:none;
  border-radius:10px;
  box-shadow:0 0 0 1px #E3E8EF, 0 6px 18px rgba(16,24,40,.08);
  /* Checkerboard shows through transparent logos */
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#F1F3F7 25%,transparent 25%,transparent 75%,#F1F3F7 75%),
    linear-gradient(45deg,#F1F3F7 25%,transparent 25%,transparent 75%,#F1F3F7 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
}
html[data-theme="dark"] .ma-chd-canvas{
  box-shadow:0 0 0 1px #1E293B, 0 6px 18px rgba(0,0,0,.4);
}
/* Keep the artwork itself on solid white above the checkerboard */
.ma-chd-surface{ background:#fff; }

.ma-chd-reset{
  top:32px; right:32px;
  width:32px; height:32px;
  border-radius:8px;
  border-color:#E3E8EF;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:background .14s, color .14s, border-color .14s;
}
.ma-chd-reset:hover{ background:#FEF2F2; border-color:#FCA5A5; color:#DC2626; }

/* ── Options / actions rows ─────────────────────────────────────── */
.ma-chd-optbox,
.ma-chd-own,
.ma-chd-dlrow,
.ma-chd-actions{
  padding-left:20px; padding-right:20px;
}
.ma-chd-optbox-hdr{
  font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:#8A94A6;
  padding-top:16px; padding-bottom:2px;
  border-top:1px solid #EEF1F6;
  margin-top:4px;
}
html[data-theme="dark"] .ma-chd-optbox-hdr{ color:#7A8699; border-color:#1E293B; }

.ma-chd-actions{
  padding-top:14px; padding-bottom:18px;
  border-top:1px solid #EEF1F6;
  margin-top:14px;
  gap:10px;
}
html[data-theme="dark"] .ma-chd-actions{ border-color:#1E293B; }

/* ── Floating tool windows ──────────────────────────────────────── */
.ma-chd-win{
  border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.18), 0 0 0 1px rgba(16,24,40,.06);
  overflow:hidden;
}
.ma-chd-win-hdr{
  background:linear-gradient(180deg,#1E293B 0%,#172033 100%);
  padding:11px 12px;
}
.ma-chd-win-title{ font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.ma-chd-win-x{ border-radius:6px; transition:background .14s; }
.ma-chd-win-x:hover{ background:rgba(255,255,255,.12); }

/* ── Context bar ────────────────────────────────────────────────── */
.ma-chd-ctx{
  border-radius:10px;
  box-shadow:0 8px 22px rgba(16,24,40,.16);
  padding:8px 10px;
}

@media (max-width:760px){
  .ma-chd-toolbar{ padding:8px; }
  .ma-chd-tool{ min-width:calc(50% - 4px); padding:10px 8px; font-size:11.5px; }
  .ma-chd-stage{ padding:12px; }
  .ma-chd-reset{ top:22px; right:22px; }
  .ma-chd-optbox,
  .ma-chd-own,
  .ma-chd-dlrow,
  .ma-chd-actions{ padding-left:14px; padding-right:14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.542 — TOOL WINDOWS: original layout
   ──────────────────────────────────────────────────────────────────────
   The floating panels followed a very common pattern — heavy dark title
   bar, big dashed rectangle, then a plain 2-up thumbnail grid. This
   reworks them into something of our own:

     • light header with a coloured accent rail, so the panel reads as
       part of this app rather than a generic modal
     • a compact horizontal upload bar instead of the oversized dashed
       box, freeing vertical space for the library itself
     • a 3-up tile grid with numbered slots, hover-revealed actions and
       a proper empty state

   Appended, so the earlier rules remain as a fallback.
════════════════════════════════════════════════════════════════════════ */

/* ── Panel shell ────────────────────────────────────────────────── */
.ma-chd-win{
  border-radius:14px;
  box-shadow:0 18px 44px rgba(16,24,40,.20), 0 0 0 1px rgba(16,24,40,.05);
  background:#fff;
}
html[data-theme="dark"] .ma-chd-win{ background:#0F172A; }

/* Light header with an accent rail down the left */
.ma-chd-win-hdr{
  position:relative;
  background:#fff;
  border-bottom:1px solid #EDF0F5;
  padding:13px 14px 13px 18px;
  color:#0F172A;
}
.ma-chd-win-hdr::before{
  content:'';
  position:absolute; left:0; top:11px; bottom:11px;
  width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#6366F1,#22D3EE);
}
html[data-theme="dark"] .ma-chd-win-hdr{
  background:#0F172A; border-color:#1E293B; color:#F1F5F9;
}
.ma-chd-win-title{
  font-size:13px; font-weight:700;
  letter-spacing:0; text-transform:none;   /* was shouting in caps */
  color:inherit;
}
.ma-chd-win-grip{ opacity:.35; color:#64748B; }
.ma-chd-win-x{ color:#8A94A6; }
.ma-chd-win-x:hover{ background:#F1F5F9; color:#0F172A; }
html[data-theme="dark"] .ma-chd-win-x:hover{ background:#1E293B; color:#F1F5F9; }

.ma-chd-win-body{ padding:14px; }

/* ── Upload bar (replaces the tall dashed box) ──────────────────── */
.ma-chd-drop{
  flex-direction:row;
  justify-content:flex-start;
  gap:11px;
  padding:12px 14px;
  border:1px solid #E3E8EF;
  border-radius:10px;
  background:#F8FAFC;
  color:#475569;
  font-size:12.5px;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
}
.ma-chd-drop svg{
  width:18px; height:18px;
  padding:7px;
  box-sizing:content-box;
  background:#EEF2FF;
  color:#4F46E5;
  border-radius:8px;
  flex-shrink:0;
}
.ma-chd-drop:hover,
.ma-chd-drop.over{
  border-color:#A5B4FC; background:#F5F6FF; color:#4338CA;
}
.ma-chd-drop.over{ border-style:dashed; }
html[data-theme="dark"] .ma-chd-drop{
  background:#131C2E; border-color:#1E293B; color:#94A3B8;
}
html[data-theme="dark"] .ma-chd-drop svg{ background:#1E1B4B; color:#A5B4FC; }

/* ── Library grid ───────────────────────────────────────────────── */
.ma-chd-lib{
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
  margin-top:14px;
}
.ma-chd-lib-item{
  aspect-ratio:1 / 1;
  border:1px solid #E7EAF0;
  border-radius:10px;
  padding:8px;
  background:
    linear-gradient(45deg,#F6F7FA 25%,transparent 25%,transparent 75%,#F6F7FA 75%),
    linear-gradient(45deg,#F6F7FA 25%,transparent 25%,transparent 75%,#F6F7FA 75%),
    #fff;
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.ma-chd-lib-item:hover{
  border-color:#A5B4FC;
  box-shadow:0 6px 16px rgba(79,70,229,.16);
  transform:translateY(-2px);
}
/* Slot number, so tiles read as a set rather than loose pictures */
.ma-chd-lib-item::before{
  counter-increment:chdlib;
  content:counter(chdlib);
  position:absolute; left:6px; top:6px; z-index:2;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:5px;
  background:rgba(15,23,42,.55);
  color:#fff;
  font-size:9.5px; font-weight:700; line-height:16px;
  text-align:center;
  opacity:0; transition:opacity .16s;
}
.ma-chd-lib{ counter-reset:chdlib; }
.ma-chd-lib-item:hover::before{ opacity:1; }

/* Remove button appears on hover instead of always sitting there */
.ma-chd-lib-x{
  top:5px; right:5px;
  width:19px; height:19px;
  border-radius:6px;
  background:rgba(15,23,42,.55);
  color:#fff;
  opacity:0;
  transition:opacity .16s, background .16s;
}
.ma-chd-lib-item:hover .ma-chd-lib-x{ opacity:1; }
.ma-chd-lib-x:hover{ background:#DC2626; }

html[data-theme="dark"] .ma-chd-lib-item{
  border-color:#1E293B;
  background:
    linear-gradient(45deg,#111A2B 25%,transparent 25%,transparent 75%,#111A2B 75%),
    linear-gradient(45deg,#111A2B 25%,transparent 25%,transparent 75%,#111A2B 75%),
    #0B1120;
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
}

/* Empty state */
.ma-chd-lib-empty{
  grid-column:1 / -1;
  padding:22px 14px;
  border:1px dashed #E3E8EF;
  border-radius:10px;
  background:#FCFDFE;
  color:#8A94A6;
  font-size:12px; line-height:1.5; text-align:center;
}
html[data-theme="dark"] .ma-chd-lib-empty{
  border-color:#1E293B; background:#0B1120; color:#7A8699;
}

@media (max-width:520px){
  .ma-chd-lib{ grid-template-columns:repeat(2, 1fr); }
}

/* v3.9.542 — Two-line label inside the upload bar */
.ma-chd-drop-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left; }
.ma-chd-drop-txt b{ font-size:12.5px; font-weight:650; color:#334155; }
.ma-chd-drop-txt i{ font-size:11px; font-style:normal; color:#94A3B8; }
.ma-chd-drop:hover .ma-chd-drop-txt b,
.ma-chd-drop.over  .ma-chd-drop-txt b{ color:#4338CA; }
html[data-theme="dark"] .ma-chd-drop-txt b{ color:#E2E8F0; }
html[data-theme="dark"] .ma-chd-drop-txt i{ color:#64748B; }

/* ═══════════════════════════════════════════════════════════════════
   v3.9.543 — Add Image modal
════════════════════════════════════════════════════════════════════ */
.ma-chd-imgmodal{
  display:none;
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,23,42,.42);
  align-items:center; justify-content:center;
  padding:24px;
}
.ma-chd-imgmodal.on{ display:flex; }
.ma-chd-imgbox{
  width:100%; max-width:660px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(15,23,42,.28);
  overflow:hidden;
}
html[data-theme="dark"] .ma-chd-imgbox{ background:#1B2432; }

/* Header */
.ma-chd-imgbox-hdr{
  display:flex; align-items:flex-start; gap:15px;
  padding:20px 22px 16px;
  flex-shrink:0;
}
.ma-chd-imgbox-ico{
  width:52px; height:52px; border-radius:13px;
  background:#E6F6EC; color:#1E9E5A;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
html[data-theme="dark"] .ma-chd-imgbox-ico{ background:rgba(30,158,90,.18); }
.ma-chd-imgbox-txt{ flex:1; min-width:0; padding-top:2px; }
.ma-chd-imgbox-txt b{
  display:block;
  font-size:22px; font-weight:800; letter-spacing:-.4px;
  color:var(--text, #101828);
}
.ma-chd-imgbox-txt i{
  display:block; font-style:normal;
  font-size:13.5px; color:var(--muted, #667085);
  margin-top:2px;
}
.ma-chd-imgbox-x{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px;
  color:#98A2B3; cursor:pointer; flex-shrink:0;
  transition:background .12s, color .12s;
}
.ma-chd-imgbox-x:hover{ background:#F2F4F7; color:#101828; }
html[data-theme="dark"] .ma-chd-imgbox-x:hover{ background:rgba(255,255,255,.10); color:#fff; }

/* Tabs */
.ma-chd-imgtabs{
  display:grid; grid-template-columns:1fr 1fr;
  margin:0 22px;
  border-bottom:1px solid #EAECF0;
  flex-shrink:0;
}
html[data-theme="dark"] .ma-chd-imgtabs{ border-bottom-color:rgba(255,255,255,.10); }
.ma-chd-imgtab{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 8px;
  background:transparent; border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  color:var(--muted, #667085);
  font-size:15px; font-weight:600;
  cursor:pointer;
  transition:color .12s, background .12s;
}
.ma-chd-imgtab:hover{ color:var(--text, #101828); }
.ma-chd-imgtab.on{
  color:#1E9E5A;
  border-bottom-color:#1E9E5A;
  background:linear-gradient(180deg, rgba(230,246,236,0) 0%, rgba(230,246,236,.75) 100%);
}
html[data-theme="dark"] .ma-chd-imgtab.on{ background:rgba(30,158,90,.12); }

/* Panes */
.ma-chd-imgbody{
  padding:20px 22px 22px;
  overflow-y:auto;
  flex:1; min-height:0;
}
.ma-chd-imgpane{ display:none; }
.ma-chd-imgpane.on{ display:block; }

/* Dropzone */
.ma-chd-drop{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 20px 30px;
  border:2px dashed #A8DCBC;
  border-radius:14px;
  background:linear-gradient(180deg, #F4FCF7 0%, #EDF9F1 100%);
  cursor:pointer;
  text-align:center;
  transition:border-color .14s, background .14s;
}
.ma-chd-drop:hover,
.ma-chd-drop.over{ border-color:#1E9E5A; background:#E9F8EF; }
.ma-chd-drop.busy{ opacity:.6; pointer-events:none; }
html[data-theme="dark"] .ma-chd-drop{
  background:rgba(30,158,90,.08); border-color:rgba(30,158,90,.45);
}
.ma-chd-drop-art{ display:block; width:190px; max-width:70%; }
.ma-chd-drop-art svg{ width:100%; height:auto; display:block; }
.ma-chd-drop-t{
  margin-top:6px;
  font-size:22px; font-weight:800; letter-spacing:-.3px;
  color:var(--text, #101828);
}
.ma-chd-drop-s{
  margin-top:5px;
  font-size:14.5px; color:var(--muted, #667085);
}
.ma-chd-drop-f{
  margin-top:12px;
  font-size:12.5px; color:#98A2B3;
}

/* Recent header */
.ma-chd-recent-hd{
  display:flex; align-items:center; justify-content:space-between;
  margin:24px 0 12px;
}
.ma-chd-recent-hd > span{
  font-size:18px; font-weight:800; letter-spacing:-.3px;
  color:var(--text, #101828);
}
.ma-chd-viewall{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:none;
  color:#1E9E5A;
  font-size:14px; font-weight:600;
  cursor:pointer; padding:4px 2px;
}
.ma-chd-viewall:hover{ color:#157945; }

/* Image grid, shared by both panes */
.ma-chd-lib{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media(max-width:560px){ .ma-chd-lib{ grid-template-columns:repeat(2, 1fr); } }
.ma-chd-lib-item{
  position:relative;
  aspect-ratio:4 / 3;
  border:1px solid #EAECF0;
  border-radius:11px;
  background:#F9FAFB;
  cursor:pointer;
  overflow:hidden;
  padding:8px;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.ma-chd-lib-item:hover{
  border-color:#1E9E5A;
  box-shadow:0 6px 18px rgba(30,158,90,.18);
  transform:translateY(-2px);
}
html[data-theme="dark"] .ma-chd-lib-item{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
}
.ma-chd-lib-item img{
  width:100%; height:100%;
  object-fit:contain; display:block;
}
.ma-chd-lib-x{
  position:absolute; top:6px; right:6px;
  width:24px; height:24px;
  display:none; align-items:center; justify-content:center;
  background:rgba(16,24,40,.78); color:#fff;
  border:none; border-radius:50%;
  cursor:pointer; padding:0;
}
.ma-chd-lib-item:hover .ma-chd-lib-x{ display:flex; }
.ma-chd-lib-x:hover{ background:#D92D20; }
.ma-chd-lib-empty{
  grid-column:1 / -1;
  padding:30px 12px; text-align:center;
  font-size:13.5px; color:var(--muted, #98A2B3);
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.544 — Add Text modal (shares the image modal's header styles)
════════════════════════════════════════════════════════════════════ */
.ma-chd-txtmodal{
  display:none;
  position:fixed; inset:0; z-index:9998;
  background:rgba(15,23,42,.42);
  align-items:center; justify-content:center;
  padding:24px;
}
.ma-chd-txtmodal.on{ display:flex; }
.ma-chd-txtbox{
  width:100%; max-width:660px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(15,23,42,.28);
  overflow:hidden;
}
html[data-theme="dark"] .ma-chd-txtbox{ background:#1B2432; }

.ma-chd-txtbody{
  padding:4px 22px 0;
  overflow-y:auto;
  flex:1; min-height:0;
}

/* Formatting strip */
.ma-chd-txttools{
  display:flex; align-items:center; gap:6px;
  padding:10px 12px;
  background:#F7F8FA;
  border:1px solid #EAECF0;
  border-radius:11px;
  flex-wrap:wrap;
}
html[data-theme="dark"] .ma-chd-txttools{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10);
}
.ma-chd-txtsel{
  min-width:170px;
  padding:10px 12px;
  border:1px solid #E4E7EC;
  border-radius:9px;
  background:#fff;
  font-size:15px; font-family:inherit;
  color:var(--text, #101828);
  cursor:pointer; outline:none;
}
.ma-chd-txtsel:focus{ border-color:#1E9E5A; }
html[data-theme="dark"] .ma-chd-txtsel{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#E6EDF5;
}
.ma-chd-txttools-sep{
  width:1px; align-self:stretch;
  background:#E4E7EC;
  margin:2px 8px;
}
html[data-theme="dark"] .ma-chd-txttools-sep{ background:rgba(255,255,255,.14); }
.ma-chd-txtbtn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:9px;
  color:var(--text, #101828); cursor:pointer;
  transition:background .12s, color .12s;
}
.ma-chd-txtbtn:hover{ background:#EAECF0; }
html[data-theme="dark"] .ma-chd-txtbtn:hover{ background:rgba(255,255,255,.10); }
.ma-chd-txtbtn.on{ background:#E6F6EC; color:#1E9E5A; }
html[data-theme="dark"] .ma-chd-txtbtn.on{ background:rgba(30,158,90,.22); color:#5FD494; }

/* Editor */
.ma-chd-txtarea{
  width:100%;
  min-height:190px;
  margin-top:16px;
  padding:16px 18px;
  border:1.5px solid #8FD3A8;
  border-radius:12px;
  background:#fff;
  font-size:17px; font-family:inherit; line-height:1.5;
  color:var(--text, #101828);
  outline:none; resize:vertical;
}
.ma-chd-txtarea::placeholder{ color:#98A2B3; }
.ma-chd-txtarea:focus{ border-color:#1E9E5A; box-shadow:0 0 0 4px rgba(30,158,90,.12); }
html[data-theme="dark"] .ma-chd-txtarea{
  background:rgba(255,255,255,.05); border-color:rgba(30,158,90,.5); color:#E6EDF5;
}
.ma-chd-txtcount{
  margin:9px 2px 0;
  font-size:13.5px; color:var(--muted, #98A2B3);
}

/* Footer */
.ma-chd-txtfoot{
  display:flex; justify-content:flex-end; gap:12px;
  padding:20px 22px 22px;
  flex-shrink:0;
}
.ma-chd-txtcancel{
  padding:13px 30px;
  background:#F2F4F7; color:var(--text, #101828);
  border:none; border-radius:11px;
  font-size:16px; font-weight:700;
  cursor:pointer; transition:background .12s;
}
.ma-chd-txtcancel:hover{ background:#E4E7EC; }
html[data-theme="dark"] .ma-chd-txtcancel{ background:rgba(255,255,255,.08); color:#E6EDF5; }
.ma-chd-txtadd{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 30px;
  background:#1E9E5A; color:#fff;
  border:none; border-radius:11px;
  font-size:16px; font-weight:700;
  cursor:pointer; transition:background .12s;
}
.ma-chd-txtadd:hover{ background:#17814A; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.548 — FULL-PAGE CHAT WORKSPACE   (v3.9.550: non-invasive layout)
   ──────────────────────────────────────────────────────────────────────
   Adds a topic rail to the full-page assistant WITHOUT touching the
   panel's DOM or its existing layout rules. The rail is absolutely
   positioned down the left edge and the panel is padded to make room,
   so every existing child keeps its position and styling.

   Two earlier approaches failed and are worth recording: flexing the
   panel's children made the tabs bar an equal-height flex item, and
   wrapping them in a column meant the chat module's own rules no longer
   matched. Padding avoids both.

   Scoped to .layout-fullpage so floating and sidebar are untouched.
════════════════════════════════════════════════════════════════════════ */

.ma-ai-panel-v2.layout-fullpage.rbai-has-rail{
  padding-left:272px !important;
  box-sizing:border-box !important;
}

/* v3.9.552 — Suggestions and chips are BACK.
   They were hidden in v3.9.548 on the assumption the rail replaced
   them; they're actually the quick-start row and belong on the
   welcome screen. What was meant to go were the composer's attach /
   Skills / microphone controls, which this build doesn't add. */

/* ── Rail ───────────────────────────────────────────────────────── */
.rbai-rail{
  position:absolute; left:0; top:0; bottom:0;
  width:272px;
  z-index:5;
  box-sizing:border-box;
  display:flex; flex-direction:column;
  gap:12px;
  padding:16px 12px;
  background:#FAFAFC;
  border-right:1px solid #ECEEF3;
}
html[data-theme="dark"] .rbai-rail{ background:#0B1120; border-color:#1E293B; }

.rbai-new{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:11px 14px;
  border:1px solid #DDD9FB;
  border-radius:11px;
  background:#F1EEFF;
  color:#4F46E5;
  font-family:inherit; font-size:14px; font-weight:650;
  cursor:pointer;
  transition:background .16s, border-color .16s, transform .16s;
}
.rbai-new svg{ width:16px; height:16px; }
.rbai-new:hover{ background:#E7E2FF; border-color:#C7BEF8; transform:translateY(-1px); }
html[data-theme="dark"] .rbai-new{ background:#1E1B4B; border-color:#312E81; color:#C7D2FE; }

.rbai-rail-scroll{ flex:1; min-height:0; overflow-y:auto; padding-right:2px; }
.rbai-rail-scroll::-webkit-scrollbar{ width:7px; }
.rbai-rail-scroll::-webkit-scrollbar-thumb{ background:#E2E6ED; border-radius:4px; }
html[data-theme="dark"] .rbai-rail-scroll::-webkit-scrollbar-thumb{ background:#1E293B; }

.rbai-sec-t{
  font-size:10.5px; font-weight:750;
  letter-spacing:.08em; text-transform:uppercase;
  color:#9AA3B2;
  padding:0 8px 6px;
}
.rbai-sec-t-gap{ margin-top:14px; }
html[data-theme="dark"] .rbai-sec-t{ color:#64748B; }

/* ── Topic rows ─────────────────────────────────────────────────── */
.rbai-topic + .rbai-topic{ margin-top:2px; }
.rbai-item{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 9px;
  border:none; background:transparent;
  border-radius:9px;
  color:#3F4756;
  font-family:inherit; font-size:13.5px; font-weight:550;
  text-align:left; cursor:pointer;
  transition:background .14s, color .14s;
}
.rbai-item:hover{ background:#F0F1F6; color:#111827; }
html[data-theme="dark"] .rbai-item{ color:#CBD5E1; }
html[data-theme="dark"] .rbai-item:hover{ background:#1E293B; color:#F1F5F9; }

.rbai-ico{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:#EEF0F6;
  color:#5B6474;
}
.rbai-ico svg{ width:15px; height:15px; }
.rbai-topic.on .rbai-ico{ background:#E7E2FF; color:#4F46E5; }
html[data-theme="dark"] .rbai-ico{ background:#1E293B; color:#94A3B8; }
html[data-theme="dark"] .rbai-topic.on .rbai-ico{ background:#312E81; color:#C7D2FE; }

.rbai-item-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbai-count{
  font-size:10.5px; font-weight:700;
  color:#9AA3B2; background:#F0F1F6;
  border-radius:20px; padding:2px 7px;
}
html[data-theme="dark"] .rbai-count{ background:#1E293B; color:#7A8699; }
.rbai-chev{
  width:13px; height:13px; flex-shrink:0; color:#B6BDC9;
  transition:transform .18s;
}
.rbai-topic.on .rbai-chev{ transform:rotate(90deg); color:#4F46E5; }

/* ── Question list ──────────────────────────────────────────────── */
.rbai-qs{
  display:flex; flex-direction:column; gap:1px;
  margin:3px 0 6px 22px;
  padding-left:12px;
  border-left:2px solid #E7E2FF;
  animation:rbaiSlide .16s ease;
}
@keyframes rbaiSlide{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
html[data-theme="dark"] .rbai-qs{ border-color:#312E81; }

.rbai-q{
  display:flex; align-items:flex-start; gap:8px;
  padding:7px 8px;
  border:none; background:transparent;
  border-radius:7px;
  color:#5B6474;
  font-family:inherit; font-size:12.8px; line-height:1.4;
  text-align:left; cursor:pointer;
  transition:background .14s, color .14s;
}
.rbai-q:hover{ background:#F5F3FF; color:#4338CA; }
.rbai-q-dot{
  width:5px; height:5px; margin-top:6px; flex-shrink:0;
  border-radius:50%; background:#C7BEF8;
}
.rbai-q:hover .rbai-q-dot{ background:#4F46E5; }
html[data-theme="dark"] .rbai-q{ color:#94A3B8; }
html[data-theme="dark"] .rbai-q:hover{ background:#1E1B4B; color:#C7D2FE; }

/* ── WhatsApp ───────────────────────────────────────────────────── */
.rbai-ico-wa{ background:#DCF8E8; color:#1FA855; }
.rbai-wa:hover .rbai-ico-wa{ background:#C6F2D8; }
html[data-theme="dark"] .rbai-ico-wa{ background:#0C3A20; color:#4ADE80; }

/* ── Recent ─────────────────────────────────────────────────────── */
.rbai-recent{ display:flex; flex-direction:column; gap:1px; }
.rbai-recent-i{
  display:block; width:100%;
  padding:8px 9px;
  border:none; background:transparent;
  border-radius:8px;
  color:#5B6474;
  font-family:inherit; font-size:12.8px;
  text-align:left; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .14s, color .14s;
}
.rbai-recent-i:hover{ background:#F0F1F6; color:#111827; }
html[data-theme="dark"] .rbai-recent-i{ color:#94A3B8; }
html[data-theme="dark"] .rbai-recent-i:hover{ background:#1E293B; color:#F1F5F9; }
.rbai-empty{
  padding:10px 9px; font-size:12px; line-height:1.5; color:#9AA3B2;
}
html[data-theme="dark"] .rbai-empty{ color:#64748B; }

/* ── Narrow screens: the rail would crowd the conversation ──────── */
/* Narrow screens: the rail becomes a scrollable strip across the top,
   and the panel is padded from the top rather than the left. */
@media (max-width:900px){
  .ma-ai-panel-v2.layout-fullpage.rbai-has-rail{
    padding-left:0 !important;
    padding-top:210px !important;
  }
  .rbai-rail{
    right:0; bottom:auto;
    width:auto; height:210px;
    border-right:none;
    border-bottom:1px solid #ECEEF3;
    padding:12px;
  }
  html[data-theme="dark"] .rbai-rail{ border-bottom-color:#1E293B; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.552 — FULL-PAGE CHAT: welcome screen fills the viewport
   ──────────────────────────────────────────────────────────────────────
   The conversation column was top-aligned, leaving a large dead band
   under the composer. It now behaves as a proper column: the greeting
   sits in the optical centre, the quick-start pills and suggestions
   stack directly above the composer, and the composer rests just above
   the disclaimer at the foot of the screen.

   Scoped to the full-page layout with the rail, so the floating and
   sidebar layouts keep their compact stacking.
════════════════════════════════════════════════════════════════════════ */

/* The panel itself becomes the column */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

/* Greeting takes the free space and centres within it, which keeps it
   optically centred whether or not suggestions are showing. */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-hero{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:0 !important;
  text-align:center;
}

/* Once a conversation starts, the transcript takes the space instead */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-bottom:8px;
}

/* Quick-start row sits just above the composer, not floating mid-page */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-chips-area,
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail #ma-ai-suggestions{
  flex:0 0 auto;
  margin-bottom:10px;
}

/* Composer pinned to the foot of the column */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-input-wrap{
  flex:0 0 auto;
  padding-bottom:14px;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-input-box{
  border-radius:16px;
  padding:6px 6px 6px 16px;
  box-shadow:0 2px 10px rgba(79,70,229,.07);
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-input-box:focus-within{
  box-shadow:0 4px 18px rgba(79,70,229,.14);
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail #ma-ai-input{
  padding:14px 0;
  font-size:15px;
}

/* Quick-start pills, matching the reference's outlined chips */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat{
  border:1px solid #E4E7EE;
  background:#fff;
  border-radius:999px;
  padding:8px 16px;
  font-size:13.5px; font-weight:600;
  color:#3F4756;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat:hover{
  border-color:#C7BEF8; color:#4338CA;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat.on{
  background:#F1EEFF; border-color:#C7BEF8; color:#4F46E5;
}

/* Suggestions as quiet list rows rather than cards */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions{
  display:flex; flex-direction:column; gap:0;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions > *{
  border:none !important;
  border-bottom:1px solid #F0F1F5 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:13px 4px !important;
  text-align:left;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions > *:last-child{
  border-bottom:none !important;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions > *:hover{
  background:#FAFAFD !important;
}

html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat{
  background:#0F172A; border-color:#1E293B; color:#CBD5E1;
}
html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat.on{
  background:#1E1B4B; border-color:#312E81; color:#C7D2FE;
}
html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions > *{
  border-bottom-color:#1E293B !important;
}
html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-suggestions > *:hover{
  background:#131C2E !important;
}

@media (max-width:900px){
  .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-hero{ flex:0 0 auto; padding:22px 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.553 — FULL-PAGE CHAT: scrollbar at the panel edge
   ──────────────────────────────────────────────────────────────────────
   The transcript was a centred 820px box with its own overflow, so its
   scrollbar was drawn at that box's right edge — floating in the middle
   of the screen. And because the panel itself could also scroll, a
   second bar appeared at the far right.

   The transcript is now full width and centres its content with padding
   instead of a max-width, which puts the one remaining scrollbar where
   it belongs: the right edge of the panel. The panel is stopped from
   scrolling so there can only ever be one.
════════════════════════════════════════════════════════════════════════ */

.ma-ai-panel-v2.layout-fullpage.rbai-has-rail{
  overflow:hidden !important;          /* only the transcript scrolls */
}

.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  /* Content stays on the same 820px measure, but the scroll container
     is the full width, so the bar sits at the panel edge. */
  padding-left:max(16px, calc((100% - 820px) / 2)) !important;
  padding-right:max(16px, calc((100% - 820px) / 2)) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* A slimmer bar so it reads as part of the panel rather than the OS */
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages::-webkit-scrollbar{
  width:10px;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages::-webkit-scrollbar-track{
  background:transparent;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages::-webkit-scrollbar-thumb{
  background:#D8DCE5;
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:6px;
}
.ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages::-webkit-scrollbar-thumb:hover{
  background:#BCC3CF; background-clip:padding-box;
}
html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-messages::-webkit-scrollbar-thumb{
  background:#26344A; background-clip:padding-box;
}

/* Clear-history action at the foot of the recent list */
.rbai-clear{
  display:block; width:100%;
  margin-top:6px; padding:7px 9px;
  border:none; background:transparent;
  border-radius:8px;
  color:#9AA3B2;
  font-family:inherit; font-size:12px; font-weight:600;
  text-align:left; cursor:pointer;
}
.rbai-clear:hover{ background:#FEF2F2; color:#DC2626; }
html[data-theme="dark"] .rbai-clear:hover{ background:#450A0A; color:#FCA5A5; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.555 — Recent chats as conversations
   Each row is one conversation: opening question as the title, with a
   count and timestamp beneath. Expanding a row lists its questions.
════════════════════════════════════════════════════════════════════════ */

.rbai-sess{ border-radius:9px; margin-bottom:2px; }
.rbai-sess:hover{ background:#F0F1F6; }
html[data-theme="dark"] .rbai-sess:hover{ background:#1E293B; }

.rbai-sess-hd{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 9px 2px;
  border:none; background:transparent;
  color:#3F4756;
  font-family:inherit; font-size:13px; font-weight:600;
  text-align:left; cursor:pointer;
}
.rbai-sess-t{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rbai-sess-chev{
  width:12px; height:12px; flex-shrink:0; color:#B6BDC9;
  transition:transform .18s;
}
.rbai-sess.on .rbai-sess-chev{ transform:rotate(90deg); color:#4F46E5; }
html[data-theme="dark"] .rbai-sess-hd{ color:#CBD5E1; }

.rbai-sess-m{
  padding:0 9px 8px 9px;
  font-size:11px; color:#9AA3B2;
}
html[data-theme="dark"] .rbai-sess-m{ color:#64748B; }

/* The conversation still in progress */
.rbai-sess.is-live{ background:#F5F3FF; }
.rbai-sess.is-live .rbai-sess-hd{ cursor:default; }
html[data-theme="dark"] .rbai-sess.is-live{ background:#1E1B4B; }
.rbai-live-dot{
  width:7px; height:7px; flex-shrink:0;
  border-radius:50%; background:#4F46E5;
  box-shadow:0 0 0 3px rgba(79,70,229,.18);
  animation:rbaiPulse 1.8s ease-in-out infinite;
}
@keyframes rbaiPulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.45; }
}

/* Questions inside an expanded conversation */
.rbai-sess-qs{
  display:flex; flex-direction:column; gap:1px;
  margin:0 0 8px 20px;
  padding-left:11px;
  border-left:2px solid #E7E2FF;
}
html[data-theme="dark"] .rbai-sess-qs{ border-color:#312E81; }
.rbai-sess-q{
  padding:6px 8px;
  border:none; background:transparent;
  border-radius:7px;
  color:#5B6474;
  font-family:inherit; font-size:12.4px; line-height:1.4;
  text-align:left; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rbai-sess-q:hover{ background:#F5F3FF; color:#4338CA; }
html[data-theme="dark"] .rbai-sess-q{ color:#94A3B8; }
html[data-theme="dark"] .rbai-sess-q:hover{ background:#1E1B4B; color:#C7D2FE; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.557 — Typing answers
   Buttons and links are held back until the reply finishes, so a
   half-typed answer can't be clicked, and a caret marks the position.
════════════════════════════════════════════════════════════════════════ */
.ma-ai-msg.is-typing a,
.ma-ai-msg.is-typing button{
  visibility:hidden;
}
.ma-ai-msg.is-typing::after{
  content:'';
  display:inline-block;
  width:2px; height:1em;
  margin-left:1px;
  vertical-align:text-bottom;
  background:currentColor;
  opacity:.65;
  animation:maAiCaret 1s steps(2) infinite;
}
@keyframes maAiCaret{ 0%,49%{opacity:.65} 50%,100%{opacity:0} }

/* Respect a reduced-motion preference — no caret, no blinking */
@media (prefers-reduced-motion: reduce){
  .ma-ai-msg.is-typing::after{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.558 — Create menu holds every document
   ──────────────────────────────────────────────────────────────────────
   With 15 entries the menu can now exceed the viewport, so it scrolls
   inside itself rather than running off the bottom of the screen. Rows
   are slightly tighter so more fits without feeling cramped.
════════════════════════════════════════════════════════════════════════ */
.ma-create-menu{
  max-height:min(560px, calc(100vh - 96px));
  overflow-y:auto;
  overscroll-behavior:contain;
  min-width:250px;
}
.ma-create-menu::-webkit-scrollbar{ width:8px; }
.ma-create-menu::-webkit-scrollbar-track{ background:transparent; }
.ma-create-menu::-webkit-scrollbar-thumb{
  background:#DDE2EA; border:2px solid transparent;
  background-clip:padding-box; border-radius:5px;
}
.ma-create-menu::-webkit-scrollbar-thumb:hover{
  background:#C3CAD6; background-clip:padding-box;
}
html[data-theme="dark"] .ma-create-menu::-webkit-scrollbar-thumb{
  background:#28344A; background-clip:padding-box;
}
/* The arrow is pinned to the menu's top edge, so it must not scroll */
.ma-create-menu::before{ position:sticky; top:0; margin-left:auto; }
.ma-create-item{ padding:9px 12px; }
.ma-create-sep{ margin:4px 10px; }

@media (max-height:700px){
  .ma-create-menu{ max-height:calc(100vh - 84px); }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.559 — Chat close button
   It was a muted grey right-arrow sitting among the other header icons,
   so it neither looked like "close" nor stood out. Given its own weight
   and a red hover, and pinned so it stays reachable in every layout.
════════════════════════════════════════════════════════════════════════ */
.ma-ai-close-btn{
  color:#64748B !important;
  flex-shrink:0;
  margin-left:2px;
  position:relative;
  z-index:2;
}
.ma-ai-close-btn:hover{
  background:#FEF2F2 !important;
  color:#DC2626 !important;
}
.ma-ai-close-btn:focus-visible{
  outline:2px solid #93C5FD;
  outline-offset:1px;
}
/* A hairline separates it from the other actions so it reads as the
   one destructive control rather than another tool. */
.ma-ai-close-btn::before{
  content:'';
  position:absolute; left:-3px; top:7px; bottom:7px;
  width:1px; background:var(--bdr, #E5E7EB);
}
html[data-theme="dark"] .ma-ai-close-btn{ color:#94A3B8 !important; }
html[data-theme="dark"] .ma-ai-close-btn:hover{
  background:#450A0A !important; color:#FCA5A5 !important;
}

/* The header must never be able to scroll out of reach */
.ma-ai-panel-v2 .ma-ai-tabs{
  position:sticky; top:0; z-index:6;
  background:var(--surf, #fff);
}
html[data-theme="dark"] .ma-ai-panel-v2 .ma-ai-tabs{ background:#0F172A; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.560 — Invoice Print Settings
   A tabbed panel under the template gallery in every document section,
   holding paper size and orientation.
════════════════════════════════════════════════════════════════════════ */
.ma-ptps-sec{ padding-top:4px; }

.ma-ptps-tab{
  display:inline-block;
  padding:10px 18px;
  background:#F1F3F6;
  border:1px solid #E4E7EE;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  font-size:14px; font-weight:650;
  color:#1F2937;
  position:relative; z-index:1;
  margin-bottom:-1px;
}
.ma-ptps-body{
  border-top:1px solid #E4E7EE;
  padding:22px 2px 8px;
  display:flex; flex-direction:column; gap:20px;
  align-items:flex-start;
}
.ma-ptps-field{ display:flex; flex-direction:column; gap:8px; }
.ma-ptps-lbl{ font-size:14px; color:#374151; }
.ma-ptps-sel{
  width:220px; max-width:100%;
  padding:9px 12px;
  border:1px solid #D5DAE2;
  border-radius:7px;
  background:#fff;
  font-family:inherit; font-size:14px; color:#111827;
  cursor:pointer; outline:none;
}
.ma-ptps-sel:hover{ border-color:#B9C1CD; }
.ma-ptps-sel:focus{ border-color:#93C5FD; box-shadow:0 0 0 3px rgba(147,197,253,.28); }
/* v3.9.800 — one line of explanation under a setting that needs it */
.ma-ptps-hint{
  font-size:12.5px; line-height:1.45; color:#6B7280;
  max-width:300px; margin-top:-2px;
}
html[data-theme="dark"] .ma-ptps-hint{ color:#94A3B8; }

html[data-theme="dark"] .ma-ptps-tab{
  background:#1E293B; border-color:#334155; color:#F1F5F9;
}
html[data-theme="dark"] .ma-ptps-body{ border-top-color:#334155; }
html[data-theme="dark"] .ma-ptps-lbl{ color:#CBD5E1; }
html[data-theme="dark"] .ma-ptps-sel{
  background:#0F172A; border-color:#334155; color:#F1F5F9;
}

@media (max-width:560px){
  .ma-ptps-sel{ width:100%; }
  .ma-ptps-body{ gap:16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.568 — Inline icons replacing emoji
   Emoji render differently on every OS and can't inherit colour. These
   sit on the text baseline and take the surrounding colour, so a button
   label and its icon always match.
════════════════════════════════════════════════════════════════════════ */
.ma-ico{
  display:inline-block;
  vertical-align:-0.18em;
  margin-right:6px;
  flex-shrink:0;
}
.ma-ico:last-child{ margin-right:0; margin-left:6px; }
/* Inside a flex row the margin is handled by the parent's gap */
.ma-btn > .ma-ico,
button > .ma-ico{ margin-right:6px; }
.chpw-rule-icon .ma-ico{ margin:0; vertical-align:middle; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.569 — Chat header: keep the close button inside the panel
   ──────────────────────────────────────────────────────────────────────
   In the floating layout the header row has little spare width. The
   separator and margin added in v3.9.559 pushed the actions group wider
   than the space available, so the ✕ slid under the panel's rounded
   corner and looked like it was behind the panel.

   The tab list is now allowed to shrink, the actions group is pinned so
   it can't be compressed, and the separator is dropped — it was costing
   width the row didn't have.
════════════════════════════════════════════════════════════════════════ */
.ma-ai-tabs{
  padding-right:10px;
  flex-wrap:nowrap;
}
/* The tabs may shrink; the buttons must not. */
.ma-ai-tab-list{
  min-width:0;
  overflow:hidden;
}
.ma-ai-tab-actions{
  flex-shrink:0;
  flex-wrap:nowrap;
}
.ma-ai-icon-btn{ flex-shrink:0; }

/* The hairline cost width the floating layout doesn't have. The close
   button already reads as distinct through its hover colour. */
.ma-ai-close-btn::before{ display:none; }
.ma-ai-close-btn{ margin-left:0; }

/* Floating panel is the tightest case: trim the tools a little so the
   ✕ always clears the rounded corner. */
.ma-ai-panel-v2.layout-floating .ma-ai-tabs{ gap:6px; padding-left:10px; }
.ma-ai-panel-v2.layout-floating .ma-ai-icon-btn{ width:29px; height:29px; }
.ma-ai-panel-v2.layout-floating .ma-ai-tab-actions{ gap:2px; }

/* ═══════════════════════════════════════════════════════════════════════
   v3.9.570 — Print Template section redesign
   Scoped entirely to .ma-ptmpl-v3 / .ma-ptv3-* (plus the header cards
   inside .ma-pthdr-grid-v3). Appended last so it wins over the older
   v2 rules without editing them — Print Options, Document Options and
   every other accordion section are untouched.
════════════════════════════════════════════════════════════════════════ */
.ma-ptmpl-v3{ display:flex; flex-direction:column; gap:14px; padding:2px 0 4px; }

/* ── Hero banner ── */
.ma-ptv3-hero{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px;
  background:linear-gradient(105deg,#F4F8FF 0%,#EDF3FE 55%,#E9F1FD 100%);
  border:1px solid #E4ECF8;
  border-radius:14px;
  overflow:hidden;
}
.ma-ptv3-hero-txt{ min-width:0; }
.ma-ptv3-hero-txt h3{
  margin:0 0 6px; font-size:22px; font-weight:800;
  letter-spacing:-.4px; color:#0B1B3A;
}
.ma-ptv3-hero-txt p{
  margin:0; font-size:12.5px; line-height:1.5; color:#5A6B85; max-width:46ch;
}
.ma-ptv3-hero-art{ flex-shrink:0; width:230px; height:106px; }
.ma-ptv3-hero-art svg{ width:100%; height:100%; display:block; }
html[data-theme="dark"] .ma-ptv3-hero{
  background:linear-gradient(105deg,#121C2E,#162034);
  border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .ma-ptv3-hero-txt h3{ color:#F1F5F9; }
html[data-theme="dark"] .ma-ptv3-hero-txt p{ color:#94A3B8; }

/* ── Generic card shell ── */
.ma-ptv3-card{
  background:#fff;
  border:1px solid #EAEEF4;
  border-radius:14px;
  padding:20px 22px 22px;
}
html[data-theme="dark"] .ma-ptv3-card{ background:#111A2B; border-color:rgba(255,255,255,.08); }
.ma-ptv3-card-hd{ margin-bottom:16px; }
.ma-ptv3-card-hd h4{
  margin:0 0 4px; font-size:17px; font-weight:800;
  letter-spacing:-.25px; color:#0B1B3A;
}
.ma-ptv3-card-hd p{ margin:0; font-size:12.5px; color:#6B7B93; }
html[data-theme="dark"] .ma-ptv3-card-hd h4{ color:#F1F5F9; }
html[data-theme="dark"] .ma-ptv3-card-hd p{ color:#94A3B8; }

/* Blue check badge shared by header cards + template tiles */
.ma-ptv3-tick{
  position:absolute; top:9px; right:9px;
  width:23px; height:23px;
  display:none; align-items:center; justify-content:center;
  background:#1F6FEB; color:#fff;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(31,111,235,.4);
}
.ma-ptv3-tick svg{ width:13px; height:13px; }
.ma-pthdr-grid-v3 .ma-pthdr-card.active .ma-ptv3-tick,
.ma-ptv3-tile.active .ma-ptv3-tick{ display:flex; }

/* ── Header Style cards ── */
.ma-pthdr-grid-v3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.ma-pthdr-grid-v3 .ma-pthdr-card{
  position:relative;
  padding:14px 14px 16px;
  background:#fff;
  border:1.8px solid #E7ECF3;
  border-radius:12px;
  cursor:pointer;
  text-align:center;
  transition:border-color .14s, box-shadow .14s, transform .12s;
}
.ma-pthdr-grid-v3 .ma-pthdr-card:hover{
  border-color:#C6D6EE; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.07);
}
.ma-pthdr-grid-v3 .ma-pthdr-card.active{
  border-color:#1F6FEB;
  background:#F7FAFF;
  box-shadow:0 0 0 3px rgba(31,111,235,.10);
}
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-card{ background:#162034; border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-card.active{ background:rgba(31,111,235,.12); border-color:#1F6FEB; }
.ma-pthdr-grid-v3 .ma-pthdr-thumb{
  height:74px; margin-bottom:12px;
  border-radius:8px;
  background:#EEF2F8;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:700; letter-spacing:.06em; color:#9AA9BF;
  overflow:hidden;
}
.ma-pthdr-grid-v3 .ma-pthdr-name{
  font-size:14px; font-weight:700; color:#16233C; margin-bottom:3px;
}
.ma-pthdr-grid-v3 .ma-pthdr-card.active .ma-pthdr-name{ color:#1F6FEB; }
.ma-pthdr-grid-v3 .ma-pthdr-desc{ font-size:11.5px; color:#7C8AA0; line-height:1.4; }
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-name{ color:#E2E8F0; }
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-desc{ color:#94A3B8; }

/* ── Featured template pane ── */
.ma-ptv3-feature{
  display:grid; grid-template-columns:minmax(0,260px) 1fr;
  gap:28px; align-items:center;
  padding:22px;
  background:#F7FAFE;
  border:1px solid #E8EEF7;
  border-radius:12px;
  margin-bottom:16px;
}
html[data-theme="dark"] .ma-ptv3-feature{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.ma-ptv3-feature-pv{
  background:#fff; border:1px solid #E3E9F2; border-radius:8px;
  padding:8px; cursor:pointer; overflow:hidden;
  box-shadow:0 4px 14px rgba(15,23,42,.07);
  aspect-ratio:1 / 1.32;
  display:flex; align-items:flex-start; justify-content:center;
  transition:box-shadow .15s;
}
.ma-ptv3-feature-pv:hover{ box-shadow:0 8px 22px rgba(15,23,42,.13); }
.ma-ptv3-feature-pv > *{ width:100%; transform-origin:top center; }
.ma-ptv3-feature-info{ min-width:0; }
.ma-ptv3-feature-name{
  font-size:17px; font-weight:800; color:#0B1B3A; margin-bottom:8px;
}
.ma-ptv3-feature-desc{
  font-size:12.5px; line-height:1.55; color:#5F6E86; margin-bottom:18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-theme="dark"] .ma-ptv3-feature-name{ color:#F1F5F9; }
html[data-theme="dark"] .ma-ptv3-feature-desc{ color:#94A3B8; }
.ma-ptv3-btn-inuse,
.ma-ptv3-btn-preview{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:280px;
  padding:11px 16px;
  border-radius:9px;
  font-size:14px; font-weight:700; font-family:inherit;
  cursor:pointer;
}
.ma-ptv3-btn-inuse svg,
.ma-ptv3-btn-preview svg{ width:16px; height:16px; }
.ma-ptv3-btn-inuse{
  background:#1F6FEB; color:#fff; border:1.6px solid #1F6FEB;
  margin-bottom:10px; cursor:default; opacity:1;
}
.ma-ptv3-btn-preview{
  background:#fff; color:#1F6FEB; border:1.6px solid #C9DBF6;
  transition:background .12s, border-color .12s;
}
.ma-ptv3-btn-preview:hover{ background:#F2F7FF; border-color:#1F6FEB; }
html[data-theme="dark"] .ma-ptv3-btn-preview{ background:transparent; }

/* ── Thumbnail strip ── */
.ma-ptv3-strip{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
}
.ma-ptv3-tile{
  position:relative;
  background:#fff;
  border:1.8px solid #E7ECF3;
  border-radius:10px;
  padding:7px 7px 0;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .14s, box-shadow .14s, transform .12s;
}
.ma-ptv3-tile:hover{
  border-color:#C6D6EE; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.ma-ptv3-tile.active{
  border-color:#1F6FEB;
  box-shadow:0 0 0 3px rgba(31,111,235,.10);
}
html[data-theme="dark"] .ma-ptv3-tile{ background:#162034; border-color:rgba(255,255,255,.10); }
.ma-ptv3-tile-thumb{
  height:96px; overflow:hidden; border-radius:5px; background:#fff;
  display:flex; align-items:flex-start; justify-content:center;
}
.ma-ptv3-tile-thumb > *{ width:100%; transform-origin:top center; }
.ma-ptv3-tile-lbl{
  padding:8px 4px 9px; text-align:center;
  font-size:11.5px; font-weight:700; color:#3B4A63;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ma-ptv3-tile.active .ma-ptv3-tile-lbl{ color:#1F6FEB; }
html[data-theme="dark"] .ma-ptv3-tile-lbl{ color:#CBD5E1; }
.ma-ptv3-tile-edit{
  position:absolute; left:7px; top:7px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:#5A6B85;
  border:1px solid #E3E9F2; border-radius:6px;
  padding:0; cursor:pointer; opacity:0;
  transition:opacity .12s, color .12s;
}
.ma-ptv3-tile-edit svg{ width:12px; height:12px; }
.ma-ptv3-tile:hover .ma-ptv3-tile-edit{ opacity:1; }
.ma-ptv3-tile-edit:hover{ color:#1F6FEB; border-color:#1F6FEB; }

/* ── Invoice Print Settings ── */
.ma-ptmpl-v3 .ma-ptps-body{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.ma-ptmpl-v3 .ma-ptps-lbl{
  font-size:12.5px; font-weight:500; color:#6B7B93; margin-bottom:7px; display:block;
}
.ma-ptmpl-v3 .ma-ptps-sel{
  width:100%; padding:11px 13px;
  border:1.5px solid #E4E9F1; border-radius:9px;
  font-size:14px; font-family:inherit; color:#16233C;
  background:#fff;
}
html[data-theme="dark"] .ma-ptmpl-v3 .ma-ptps-sel{ background:#162034; color:#E2E8F0; border-color:rgba(255,255,255,.12); }

/* ── Select Document Type lead-in + Save button ── */
.ma-ptv3-doclead{ margin:2px 0 14px; }
.ma-ptv3-doclead h4{
  margin:0 0 4px; font-size:17px; font-weight:800;
  letter-spacing:-.25px; color:#0B1B3A;
}
.ma-ptv3-doclead p{ margin:0; font-size:12.5px; color:#6B7B93; }
html[data-theme="dark"] .ma-ptv3-doclead h4{ color:#F1F5F9; }
html[data-theme="dark"] .ma-ptv3-doclead p{ color:#94A3B8; }

.ma-ptv3-savewrap{ display:flex; justify-content:center; padding:22px 0 6px; }
.ma-ptv3-save{
  display:flex; align-items:center; gap:9px;
  padding:13px 30px;
  background:#1F6FEB; color:#fff;
  border:none; border-radius:10px;
  font-size:15px; font-weight:700; font-family:inherit;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(31,111,235,.28);
  transition:background .14s, transform .1s;
}
.ma-ptv3-save:hover{ background:#1A5FCC; }
.ma-ptv3-save:active{ transform:scale(.98); }

/* ── Narrow screens ── */
@media (max-width:820px){
  .ma-ptv3-feature{ grid-template-columns:minmax(0,190px) 1fr; gap:20px; }
  .ma-ptv3-strip{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width:700px){
  .ma-ptv3-strip{ grid-template-columns:repeat(3, 1fr); }
  .ma-ptv3-feature{ grid-template-columns:1fr; gap:18px; }
  .ma-ptv3-feature-pv{ max-width:240px; margin:0 auto; }
  .ma-ptv3-btn-inuse, .ma-ptv3-btn-preview{ max-width:none; }
}
@media (max-width:640px){
  .ma-ptv3-hero{ padding:18px; }
  .ma-ptv3-hero-art{ display:none; }
  .ma-pthdr-grid-v3{ grid-template-columns:1fr; }
  .ma-ptv3-strip{ grid-template-columns:repeat(2, 1fr); }
  .ma-ptmpl-v3 .ma-ptps-body{ grid-template-columns:1fr; }
}
/* ═══════════ END v3.9.570 ═══════════ */

/* ═══ v3.9.571 — Header Style mini-previews ═══════════════════════════
   The three Header Style thumbnails now render a small mock of the
   actual document head instead of a flat grey block. Scoped under
   .ma-pthdr-grid-v3 so the older v2 grid (if anything still renders it)
   keeps its original look.
════════════════════════════════════════════════════════════════════════ */
.ma-pthdr-grid-v3 .ma-pthdr-card{ display:flex; flex-direction:column; }
.ma-pthdr-grid-v3 .ma-pthdr-thumb{
  position:relative;
  height:0; padding:0 0 56.25%;   /* locked 16:9 — content cannot stretch it */
  background:#EFF3F9;
  display:block;
  border-radius:9px;
  overflow:hidden;
}
.ma-pthdr-grid-v3 .ma-pthdr-thumb.t-designed,
.ma-pthdr-grid-v3 .ma-pthdr-thumb.t-letterpad{ font-size:0; letter-spacing:normal; }

.ma-hdrpv{
  position:absolute; inset:9px;
  background:#fff;
  border-radius:5px;
  padding:9px 10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.10);
  display:flex; flex-direction:column;
  text-align:left;
}
html[data-theme="dark"] .ma-hdrpv{ background:#F8FAFC; }

/* Top row: brand block + meta/contact block */
.ma-hdrpv-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.ma-hdrpv-brand{ display:flex; align-items:center; gap:6px; min-width:0; }
.ma-hdrpv-brand.col{ align-items:flex-end; gap:7px; }
.ma-hdrpv-logo{
  width:26px; height:26px; flex-shrink:0;
  border-radius:999px; background:#2B7BEE;
  color:#fff; font-size:6px; font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.ma-hdrpv-logotxt{
  font-size:11px; font-weight:800; color:#0B1B3A; letter-spacing:-.3px;
  line-height:1; padding-bottom:1px;
}
.ma-hdrpv-names{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ma-hdrpv-names b{
  font-size:8.5px; font-weight:800; color:#101B30; letter-spacing:.01em;
  white-space:nowrap;
}
.ma-hdrpv-names i{ font-size:6.5px; font-style:normal; color:#8794A8; white-space:nowrap; }

/* Default: Invoice No / Date / Due Date grid */
.ma-hdrpv-meta{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.ma-hdrpv-meta span{
  display:grid; grid-template-columns:38px 6px auto;
  gap:0 4px;
  align-items:center; font-size:6.2px; white-space:nowrap;
}
.ma-hdrpv-meta em{ font-style:normal; color:#8794A8; }
.ma-hdrpv-meta s{ text-decoration:none; color:#B4BECD; }
.ma-hdrpv-meta b{ font-weight:600; color:#243046; }

/* Designed: phone / mail / address rows */
.ma-hdrpv-contact{ display:flex; flex-direction:column; gap:3.5px; flex-shrink:0; }
.ma-hdrpv-contact span{
  display:flex; align-items:center; gap:4px;
  font-size:6.2px; color:#3B4A63; white-space:nowrap;
}
.ma-hdrpv-contact svg{ width:6.5px; height:6.5px; flex-shrink:0; color:#243046; }

.ma-hdrpv-rule{ height:1.2px; background:#46566E; opacity:.85; margin:9px 0 8px; border-radius:1px; }

/* Skeleton body lines */
.ma-hdrpv-body{ display:flex; gap:10px; align-items:flex-start; }
.ma-hdrpv-lines{ flex:1; display:flex; flex-direction:column; gap:3.5px; min-width:0; }
.ma-hdrpv-lines.r{ flex:0 0 24%; }
.ma-hdrpv-lines i{ display:block; height:4px; border-radius:2px; background:#DDE4EE; }

/* Designed: blue diagonal corner ribbon */
.ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:20px; gap:6px; }
.ma-hdrpv.has-corner .ma-hdrpv-brand{ min-width:0; overflow:hidden; }
.ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:9.5px; }
.ma-hdrpv.has-corner .ma-hdrpv-names b{ font-size:7.6px; }
.ma-hdrpv.has-corner .ma-hdrpv-names i{ font-size:6px; }
.ma-hdrpv-contact{ min-width:0; }
.ma-hdrpv-corner{
  position:absolute; top:0; left:0;
  width:40px; height:26px;
  background:linear-gradient(135deg,#1F6FEB 0%,#1F6FEB 46%,#7FB0F2 46%,#CFE0F8 72%,transparent 72%);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  pointer-events:none;
}

/* Letterpad: blank sheet with a folded top-right corner */
.ma-hdrpv.is-blank{
  background:#FCFDFE;
  border:1px solid #E8EDF4;
  box-shadow:none;
}
.ma-hdrpv-fold{
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-left:16px solid transparent;
  border-top:16px solid #E7EDF5;
  filter:drop-shadow(-1px 1px 1px rgba(15,23,42,.10));
}

/* Keep the mock legible when the grid narrows */
@media (max-width:820px){
  .ma-hdrpv{ padding:7px 8px; }
  .ma-hdrpv-meta span{ grid-template-columns:32px 5px auto; gap:0 3px; }
  .ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:17px; }
  .ma-hdrpv-contact span{ font-size:5.6px; }
}
/* ═══════════ END v3.9.571 ═══════════ */

/* ═══ v3.9.572 — Header Style: single tick + larger cards ═════════════
   1. The base stylesheet already paints a check badge via
      .ma-pthdr-card.active::before (top-LEFT). Combined with the
      .ma-ptv3-tick badge (top-RIGHT) that produced TWO ticks on the
      selected card. The legacy one is suppressed inside the v3 grid
      only, so any other screen still using .ma-pthdr-card keeps it.
   2. The three cards are scaled up to fill the row properly: roomier
      padding, a taller preview and larger mock typography.
════════════════════════════════════════════════════════════════════════ */
.ma-pthdr-grid-v3 .ma-pthdr-card.active::before{ content:none !important; display:none !important; }

/* Give the row all the width it can take */
.ma-ptmpl-v3 .ma-ptv3-card{ padding:24px 26px 26px; }
.ma-pthdr-grid-v3{ gap:20px; width:100%; }
.ma-pthdr-grid-v3 .ma-pthdr-card{ padding:18px 18px 20px; border-radius:14px; }

/* Taller preview so the mock has room to breathe */
.ma-pthdr-grid-v3 .ma-pthdr-thumb{ padding:0 0 52%; border-radius:11px; }
.ma-hdrpv{ inset:12px; border-radius:7px; padding:12px 14px; }

/* Scale the mock typography up ~35% so it reads at a glance */
.ma-hdrpv-logo{ width:34px; height:34px; font-size:7.6px; }
.ma-hdrpv-logotxt{ font-size:14px; }
.ma-hdrpv-names b{ font-size:11px; }
.ma-hdrpv-names i{ font-size:8.4px; }
.ma-hdrpv-meta span{ grid-template-columns:50px 7px auto; gap:0 5px; font-size:8.2px; }
.ma-hdrpv-meta{ gap:4.5px; }
.ma-hdrpv-contact span{ font-size:8.2px; gap:5px; }
.ma-hdrpv-contact svg{ width:8.6px; height:8.6px; }
.ma-hdrpv-contact{ gap:4.5px; }
.ma-hdrpv-rule{ height:1.4px; margin:12px 0 10px; }
.ma-hdrpv-lines i{ height:5.4px; border-radius:2.7px; }
.ma-hdrpv-lines{ gap:4.5px; }
.ma-hdrpv-corner{ width:54px; height:35px; }
.ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:26px; gap:10px; }
.ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:13px; }
.ma-hdrpv.has-corner .ma-hdrpv-names b{ font-size:10.2px; }
.ma-hdrpv.has-corner .ma-hdrpv-names i{ font-size:8px; }
.ma-hdrpv-fold{ border-left-width:22px; border-top-width:22px; }

/* Card caption */
.ma-pthdr-grid-v3 .ma-pthdr-name{ font-size:16px; margin-top:14px; margin-bottom:5px; }
.ma-pthdr-grid-v3 .ma-pthdr-desc{ font-size:13px; }
.ma-ptv3-tick{ top:12px; right:12px; width:27px; height:27px; }
.ma-ptv3-tick svg{ width:15px; height:15px; }

/* Below ~1000px the three-up row can't hold the larger mock, so step the
   type back down rather than letting it collide. */
@media (max-width:1000px){
  .ma-hdrpv{ inset:9px; padding:10px 11px; }
  .ma-hdrpv-logo{ width:27px; height:27px; font-size:6.2px; }
  .ma-hdrpv-logotxt{ font-size:11px; }
  .ma-hdrpv-names b{ font-size:8.8px; }
  .ma-hdrpv-names i{ font-size:6.8px; }
  .ma-hdrpv-meta span{ grid-template-columns:40px 6px auto; font-size:6.6px; }
  .ma-hdrpv-contact span{ font-size:6.6px; }
  .ma-hdrpv-contact svg{ width:7px; height:7px; }
  .ma-hdrpv-lines i{ height:4.4px; }
  .ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:21px; }
  .ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:10px; }
  .ma-hdrpv.has-corner .ma-hdrpv-names b{ font-size:8.2px; }
}
@media (max-width:640px){
  .ma-pthdr-grid-v3{ gap:14px; }
  .ma-pthdr-grid-v3 .ma-pthdr-thumb{ padding:0 0 46%; }
}
/* ═══════════ END v3.9.572 ═══════════ */

/* v3.9.573 — Designed mock: the corner indent + brand + three contact
   rows were still overrunning the box, clipping "YOUR COMPANY". Let the
   brand take the slack and hold the contact column to its content. */
.ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:22px; gap:8px; }
.ma-hdrpv.has-corner .ma-hdrpv-brand{ flex:1 1 auto; }
.ma-hdrpv.has-corner .ma-hdrpv-names b{ font-size:9.6px; }
.ma-hdrpv.has-corner .ma-hdrpv-names i{ font-size:7.4px; }
.ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:12px; }
.ma-hdrpv-contact{ flex:0 0 auto; }
.ma-hdrpv-contact span{ font-size:7.4px; gap:4px; }
.ma-hdrpv-contact svg{ width:7.8px; height:7.8px; }
@media (max-width:1000px){
  .ma-hdrpv.has-corner .ma-hdrpv-names b{ font-size:7.8px; }
  .ma-hdrpv.has-corner .ma-hdrpv-names i{ font-size:6.2px; }
  .ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:9.4px; }
  .ma-hdrpv-contact span{ font-size:6.2px; }
  .ma-hdrpv-contact svg{ width:6.6px; height:6.6px; }
}

/* v3.9.574 — Below ~1000px the Designed mock's brand column gets squeezed
   by the contact block. nowrap made it clip mid-word ("YOUR COMPA…"), so
   allow it to wrap onto a second line instead — the mock has spare
   vertical room, and a wrapped name reads better than a cut one. */
@media (max-width:1000px){
  .ma-hdrpv.has-corner .ma-hdrpv-names b{
    white-space:normal; line-height:1.15; overflow-wrap:anywhere;
  }
  .ma-hdrpv.has-corner .ma-hdrpv-names i{ white-space:normal; line-height:1.2; }
  .ma-hdrpv.has-corner .ma-hdrpv-brand{ align-items:flex-start; }
}

/* v3.9.574b — tightest tier: trim the contact column and corner indent so
   the Designed brand still fits on narrow settings panels. */
@media (max-width:900px){
  .ma-hdrpv.has-corner .ma-hdrpv-top{ padding-left:18px; gap:6px; }
  .ma-hdrpv-contact span{ font-size:5.6px; gap:3px; }
  .ma-hdrpv-contact svg{ width:6px; height:6px; }
  .ma-hdrpv.has-corner .ma-hdrpv-logotxt{ font-size:8.6px; }
  .ma-hdrpv-corner{ width:44px; height:29px; }
}

/* v3.9.574c — under ~800px drop the contact block's address line, which is
   the widest element in the Designed mock. It's a thumbnail, not a spec
   sheet, so phone + email still communicate the style. */
@media (max-width:800px){
  .ma-hdrpv-contact span:nth-child(3){ display:none; }
}

/* v3.9.574d — .ma-hdrpv-names is a flex child; without min-width:0 it
   refuses to shrink below its content, so the wrap rules above never got
   a chance to apply and the name still clipped by a few pixels. */
.ma-hdrpv-names{ min-width:0; }
.ma-hdrpv-names b, .ma-hdrpv-names i{ max-width:100%; }

/* v3.9.574e — Allow the Designed mock's company name to wrap at ANY width
   rather than only under 1000px. At wide sizes it still sits on one line,
   so this costs nothing and removes the last few pixels of clipping in
   the mid-range widths. */
.ma-hdrpv.has-corner .ma-hdrpv-names b{
  white-space:normal; overflow-wrap:anywhere; line-height:1.15;
}

/* v3.9.574f — ROOT CAUSE of the Designed mock clipping.
   .ma-hdrpv-contact was flex:0 0 auto (never shrink), so on narrow
   panels it consumed the whole row and collapsed the brand column to
   zero width — the name wasn't merely clipped, it had no box at all.
   Let both columns share the space: contact may shrink and ellipsise,
   and the brand keeps a floor width so it can never vanish. */
.ma-hdrpv-contact{ flex:0 1 auto; min-width:0; }
.ma-hdrpv-contact span{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ma-hdrpv.has-corner .ma-hdrpv-brand{ flex:1 1 auto; min-width:64px; }
.ma-hdrpv-brand{ min-width:64px; }

/* ═══ v3.9.575 — Header Style: real width + SVG mocks ═════════════════
   TWO root causes behind the squashed cards:

   1. .ma-pthdr-grid carries `max-width:560px` in the base stylesheet.
      The v3 rules set width:100% but that can't beat a max-width, so
      the three cards were crammed into 560px (~175px each) and left
      aligned, no matter how wide the panel was.

   2. The mock was HTML text tuned with VIEWPORT media queries, but the
      real constraint is CARD width. On a wide screen with narrow cards
      no breakpoint fired, so the text collided and clipped.

   The mocks are now inline SVG with a viewBox: one scalable unit that
   keeps its proportions at any card width, so no breakpoints are needed
   and text can never overlap. The old HTML mock nodes are left in the
   markup but hidden, and every viewport hack below is now inert.
════════════════════════════════════════════════════════════════════════ */
.ma-pthdr-grid-v3{
  max-width:none !important;
  width:100%;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}

/* Thumb frame holds the SVG; ratio matches the 320x150 viewBox plus padding */
.ma-pthdr-grid-v3 .ma-pthdr-thumb{
  position:relative;
  height:0; padding:0 0 50%;
  background:#EFF3F9;
  border:none;
  border-radius:11px;
  overflow:hidden;
  display:block;
}
.ma-pthdr-grid-v3 .ma-pthdr-thumb > svg{
  position:absolute;
  top:8%; left:5%;
  width:90%; height:84%;
  display:block;
  filter:drop-shadow(0 1px 3px rgba(15,23,42,.13));
}
/* The superseded HTML mock stays out of the way for good */
.ma-pthdr-grid-v3 .ma-hdrpv{ display:none !important; }

/* Card + caption sizing */
.ma-pthdr-grid-v3 .ma-pthdr-card{ padding:16px 16px 18px; border-radius:14px; }
.ma-pthdr-grid-v3 .ma-pthdr-name{ font-size:15.5px; margin-top:14px; margin-bottom:5px; }
.ma-pthdr-grid-v3 .ma-pthdr-desc{ font-size:12.5px; }

/* Two-up, then one-up, on genuinely small panels */
@media (max-width:760px){
  .ma-pthdr-grid-v3{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}
@media (max-width:520px){
  .ma-pthdr-grid-v3{ grid-template-columns:1fr; }
}
/* ═══════════ END v3.9.575 ═══════════ */

/* ═══ v3.9.576 — Print Template: 3-up card grid ══════════════════════
   Replaces the featured-pane + thumbnail-strip layout with a grid of
   equal cards, each carrying a hover-preview thumbnail, its name and
   Use this / Edit actions. Header gains a search field and a format
   filter. Scoped to .ma-ptg-* so nothing else is affected.
════════════════════════════════════════════════════════════════════════ */
.ma-ptg-card{ background:#F7F9FC; }
html[data-theme="dark"] .ma-ptg-card{ background:#0F1826; }

/* Header row: title left, search + filter right */
.ma-ptg-hd{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.ma-ptg-hd-txt h4{
  margin:0 0 4px; font-size:22px; font-weight:800;
  letter-spacing:-.4px; color:#0B1B3A;
}
.ma-ptg-hd-txt p{ margin:0; font-size:13px; color:#6B7B93; }
html[data-theme="dark"] .ma-ptg-hd-txt h4{ color:#F1F5F9; }
html[data-theme="dark"] .ma-ptg-hd-txt p{ color:#94A3B8; }

.ma-ptg-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ma-ptg-search{
  display:flex; align-items:center; gap:9px;
  padding:10px 14px;
  background:#fff; border:1.5px solid #E4EAF2; border-radius:10px;
  min-width:250px;
}
.ma-ptg-search svg{ width:17px; height:17px; color:#9AA7B8; flex-shrink:0; }
.ma-ptg-search input{
  border:none; outline:none; background:transparent;
  font-size:14px; font-family:inherit; color:#16233C;
  width:100%; min-width:0;
}
.ma-ptg-search input::placeholder{ color:#9AA7B8; }
.ma-ptg-filter{
  padding:10px 14px;
  background:#fff; border:1.5px solid #E4EAF2; border-radius:10px;
  font-size:14px; font-weight:600; font-family:inherit; color:#16233C;
  cursor:pointer; min-width:160px;
}
html[data-theme="dark"] .ma-ptg-search,
html[data-theme="dark"] .ma-ptg-filter{
  background:#162034; border-color:rgba(255,255,255,.12); color:#E2E8F0;
}
html[data-theme="dark"] .ma-ptg-search input{ color:#E2E8F0; }

/* Grid */
.ma-ptg-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  max-width:none !important;
}
.ma-ptg-item{
  background:#fff;
  border:1px solid #EAEEF4;
  border-radius:13px;
  padding:16px 16px 18px;
  display:flex; flex-direction:column;
  transition:box-shadow .15s, border-color .15s, transform .12s;
}
.ma-ptg-item:hover{
  border-color:#D4DFEE;
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  transform:translateY(-1px);
}
.ma-ptg-item.active{
  border-color:#1F6FEB;
  box-shadow:0 0 0 3px rgba(31,111,235,.10);
}
html[data-theme="dark"] .ma-ptg-item{ background:#131C2C; border-color:rgba(255,255,255,.08); }

/* Thumbnail with hover preview overlay */
.ma-ptg-pv{
  position:relative;
  border-radius:9px;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  aspect-ratio:198/232;
  border:1px solid #EDF1F6;
}
.ma-ptg-pv-inner{
  position:absolute; inset:0;
  overflow:hidden;
}
.ma-ptg-pv-inner > *{ width:100%; transform-origin:top center; }
.ma-ptg-pv-ov{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,41,59,.55);
  opacity:0; transition:opacity .16s ease;
}
.ma-ptg-pv:hover .ma-ptg-pv-ov{ opacity:1; }
.ma-ptg-pv-pill{
  display:flex; align-items:center; gap:8px;
  padding:11px 22px;
  background:#fff; border-radius:9px;
  font-size:14px; font-weight:700; color:#1F6FEB;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.ma-ptg-pv-pill svg{ width:17px; height:17px; }

/* Caption + actions */
.ma-ptg-name{
  text-align:center;
  font-size:15px; font-weight:700; color:#16233C;
  margin:14px 0 13px;
}
.ma-ptg-item.active .ma-ptg-name{ color:#1F6FEB; }
html[data-theme="dark"] .ma-ptg-name{ color:#E2E8F0; }

.ma-ptg-acts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; }
.ma-ptg-use,
.ma-ptg-edit{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px;
  border-radius:9px;
  font-size:14px; font-weight:700; font-family:inherit;
  cursor:pointer;
}
.ma-ptg-use svg, .ma-ptg-edit svg{ width:15px; height:15px; flex-shrink:0; }
.ma-ptg-use{ background:#1F6FEB; color:#fff; border:1.5px solid #1F6FEB; }
.ma-ptg-use:hover{ background:#1A5FCC; border-color:#1A5FCC; }
.ma-ptg-use.is-active{ background:#0F9D58; border-color:#0F9D58; cursor:default; }
.ma-ptg-edit{ background:#fff; color:#1F6FEB; border:1.5px solid #C9DBF6; }
.ma-ptg-edit:hover{ background:#F2F7FF; border-color:#1F6FEB; }
html[data-theme="dark"] .ma-ptg-edit{ background:transparent; }

.ma-ptg-none{
  grid-column:1 / -1;
  padding:34px 12px; text-align:center;
  font-size:13.5px; color:#7C8AA0;
}

@media (max-width:1000px){
  .ma-ptg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .ma-ptg-grid{ grid-template-columns:1fr; }
  .ma-ptg-tools{ width:100%; }
  .ma-ptg-search{ flex:1; min-width:0; }
  .ma-ptg-filter{ min-width:0; }
}
/* ═══════════ END v3.9.576 ═══════════ */

/* ═══ v3.9.577 — Print Template list: chevron instead of + / × ════════
   The base rule .ma-acc-row.open .ma-acc-plus{transform:rotate(45deg)}
   turns the "+" glyph into an "×". The Print Template rows now hold a
   chevron SVG instead, so that 45° rotation has to be cancelled and
   replaced with a 180° flip. Scoped to .ma-ptmpl-acc, so Print Options
   and Document Options keep their original +/× behaviour.
════════════════════════════════════════════════════════════════════════ */
.ma-ptmpl-acc .ma-acc-chev{
  width:26px; height:26px;
  border-radius:7px;
  background:transparent;
  color:#8A98AC;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0;                      /* no text glyph to show */
  transform:rotate(0deg);           /* override the base 45° rule */
  transition:transform .22s ease, background .15s, color .15s;
}
.ma-ptmpl-acc .ma-acc-chev svg{ width:16px; height:16px; display:block; }
.ma-ptmpl-acc .ma-acc-row:hover .ma-acc-chev{ background:#EEF2F8; color:#3B4A63; }

/* Open state: flip to point up. !important is needed because the base
   open-state rule sets rotate(45deg) with equal specificity but appears
   later in the cascade for some builds. */
.ma-ptmpl-acc .ma-acc-row.open .ma-acc-chev{
  transform:rotate(180deg) !important;
  background:var(--brand);
  color:#fff;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-chev{
  background:transparent !important; color:#94A3B8 !important;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-row:hover .ma-acc-chev{
  background:rgba(255,255,255,.07) !important; color:#E2E8F0 !important;
}
html[data-theme="dark"] .ma-ptmpl-acc .ma-acc-row.open .ma-acc-chev{
  background:var(--brand) !important; color:#fff !important;
}
/* ═══════════ END v3.9.577 ═══════════ */

/* ═══ v3.9.578 — Print Template list: drop the blue left strip ════════
   Two rules were drawing it:
     .ma-acc-panel{border-left:3px solid var(--brand)}      — the panel
     .ma-ptmpl-acc .ma-acc-row.open{border-left:3px ...}    — the open row
   Both are removed here for the Print Template accordion only. The open
   row's padding-left goes back to the base 18px (it had been 15px + 3px
   border) so open and closed rows stay aligned. Print Options and the
   other accordions keep their strip.
════════════════════════════════════════════════════════════════════════ */
.ma-ptmpl-acc .ma-acc-row.open{
  border-left:0 !important;
  padding-left:20px !important;   /* matches .ma-ptmpl-acc .ma-acc-row */
}
.ma-acc-panel.ma-ptmpl-panel,
.ma-ptmpl-acc .ma-acc-panel{
  border-left:0 !important;
}
/* ═══════════ END v3.9.578 ═══════════ */

/* ═══ v3.9.579 — Chevron + no side strip for ALL settings accordions ══
   v3.9.577/578 did this for the Print Template list only. Print Options,
   Document Options and Translation Options now carry the same chevron
   markup, so the styling is generalised to .ma-acc-chev rather than
   being scoped per list, and the blue left strips are dropped in all
   four places. Three rules were drawing those strips:
     .ma-acc-panel{border-left:3px solid var(--brand)}   — every panel
     .ma-ptmpl-acc .ma-acc-row.open{border-left:3px ...} — handled in 578
     .ma-popt-acc  .ma-acc-row.open{border-left:3px ...} — handled below
   Open rows also carried padding-left:15px purely to offset that 3px
   border, so each is restored to its list's normal padding to keep open
   and closed rows aligned.
════════════════════════════════════════════════════════════════════════ */

/* Chevron affordance — applies wherever the .ma-acc-chev span is used */
.ma-acc-chev{
  width:26px; height:26px;
  border-radius:7px;
  background:transparent;
  color:#8A98AC;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0;
  transform:rotate(0deg);
  transition:transform .22s ease, background .15s, color .15s;
}
.ma-acc-chev svg{ width:16px; height:16px; display:block; }
.ma-acc-row:hover .ma-acc-chev{ background:#EEF2F8; color:#3B4A63; }
.ma-acc-row.open .ma-acc-chev{
  transform:rotate(180deg) !important;   /* beats the base rotate(45deg) */
  background:var(--brand);
  color:#fff;
}
html[data-theme="dark"] .ma-acc-chev{ background:transparent !important; color:#94A3B8 !important; }
html[data-theme="dark"] .ma-acc-row:hover .ma-acc-chev{ background:rgba(255,255,255,.07) !important; color:#E2E8F0 !important; }
html[data-theme="dark"] .ma-acc-row.open .ma-acc-chev{ background:var(--brand) !important; color:#fff !important; }

/* Drop the blue left strip everywhere */
.ma-acc-panel{ border-left:0 !important; }
.ma-popt-acc .ma-acc-row.open{
  border-left:0 !important;
  padding-left:18px !important;   /* .ma-popt-acc rows use the base 18px */
}
/* ═══════════ END v3.9.579 ═══════════ */

/* ═══ v3.9.580 — Email Options ════════════════════════════════════════
   Three stacked cards: transport, notifications, log. Scoped to .ma-emo*
   so no other settings section is affected.
════════════════════════════════════════════════════════════════════════ */
.ma-emo{ display:flex; flex-direction:column; gap:16px; }

.ma-emo-card{
  background:#fff;
  border:1px solid #EAEEF4;
  border-radius:12px;
  overflow:hidden;
}
html[data-theme="dark"] .ma-emo-card{ background:#131C2C; border-color:rgba(255,255,255,.08); }
.ma-emo-card-hd{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px;
  border-bottom:1px solid #EFF2F6;
}
html[data-theme="dark"] .ma-emo-card-hd{ border-bottom-color:rgba(255,255,255,.07); }
.ma-emo-card:has(.ma-emo-card-body[style*="none"]) .ma-emo-card-hd{ border-bottom:none; }
.ma-emo-card-title{ font-size:15px; font-weight:700; color:#3A4A5F; }
html[data-theme="dark"] .ma-emo-card-title{ color:#E2E8F0; }
.ma-emo-card-body{ padding:18px 20px 20px; }

/* Rows: label left, control right */
.ma-emo-row{
  display:grid; grid-template-columns:170px minmax(0,1fr);
  align-items:center; gap:16px;
  margin-bottom:14px;
}
.ma-emo-row:last-child{ margin-bottom:0; }
.ma-emo-lbl{ font-size:13.5px; color:#4B5B70; }
html[data-theme="dark"] .ma-emo-lbl{ color:#94A3B8; }
.ma-emo-input{
  width:100%;
  padding:10px 13px;
  border:1px solid #DFE5EC; border-radius:7px;
  font-size:14px; font-family:inherit; color:#16233C;
  background:#fff;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ma-emo-input:focus{ border-color:#0FA968; box-shadow:0 0 0 3px rgba(15,169,104,.12); }
.ma-emo-input::placeholder{ color:#9AA7B8; }
.ma-emo-input:disabled{ background:#EFF2F6; color:#9AA7B8; cursor:not-allowed; }
html[data-theme="dark"] .ma-emo-input{ background:#162034; border-color:rgba(255,255,255,.12); color:#E2E8F0; }
html[data-theme="dark"] .ma-emo-input:disabled{ background:rgba(255,255,255,.04); }
select.ma-emo-input{ cursor:pointer; }

.ma-emo-note{
  grid-column:1 / -1;
  margin:-6px 0 14px 186px;
  font-size:12px; line-height:1.5; color:#7C8AA0;
}
.ma-emo-note:empty{ display:none; }
.ma-emo-row--btn{ margin-top:18px; }
.ma-emo-test{
  justify-self:start;
  padding:10px 20px;
  background:#0FA968; color:#fff;
  border:none; border-radius:7px;
  font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer;
}
.ma-emo-test:hover{ background:#0C8F58; }

/* Toggle switch */
.ma-emo-sw{ display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
.ma-emo-sw input{ position:absolute; opacity:0; width:0; height:0; }
.ma-emo-sw-track{
  width:46px; height:25px;
  background:#CBD2DB; border-radius:999px;
  display:inline-flex; align-items:center;
  padding:3px;
  transition:background .18s ease;
}
.ma-emo-sw-knob{
  width:19px; height:19px;
  background:#fff; border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .18s ease;
}
.ma-emo-sw input:checked + .ma-emo-sw-track{ background:#0FA968; }
.ma-emo-sw input:checked + .ma-emo-sw-track .ma-emo-sw-knob{ transform:translateX(21px); }
.ma-emo-sw input:focus-visible + .ma-emo-sw-track{ box-shadow:0 0 0 3px rgba(15,169,104,.25); }
.ma-emo-sw--sm .ma-emo-sw-track{ width:40px; height:22px; }
.ma-emo-sw--sm .ma-emo-sw-knob{ width:16px; height:16px; }
.ma-emo-sw--sm input:checked + .ma-emo-sw-track .ma-emo-sw-knob{ transform:translateX(18px); }

/* Tables */
.ma-emo-tbl{ width:100%; border-collapse:collapse; }
.ma-emo-tbl th{
  text-align:left; padding:0 12px 12px 0;
  font-size:13px; font-weight:600; color:#3A4A5F;
  border-bottom:1px solid #EFF2F6;
}
.ma-emo-tbl td{
  padding:14px 12px 14px 0;
  font-size:13.5px; color:#3A4A5F; vertical-align:middle;
  border-bottom:1px solid #F3F5F8;
}
.ma-emo-tbl tr:last-child td{ border-bottom:none; }
.ma-emo-tbl .ta-r{ text-align:right; padding-right:0; }
html[data-theme="dark"] .ma-emo-tbl th{ color:#CBD5E1; border-bottom-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .ma-emo-tbl td{ color:#CBD5E1; border-bottom-color:rgba(255,255,255,.05); }
.ma-emo-ev{ color:#B4762A; font-size:13.5px; }
.ma-emo-ev-sub{ color:#B4762A; font-size:11px; opacity:.85; margin-top:2px; }
.ma-emo-empty{
  text-align:center !important; padding:34px 12px !important;
  color:#B4762A; font-size:14px;
}
.ma-emo-badge{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.ma-emo-badge.ok{ background:#E5F7EC; color:#0B7A45; }
.ma-emo-badge.err{ background:#FEE2E2; color:#B91C1C; }

/* Log header tools */
.ma-emo-logtools{ display:flex; align-items:center; gap:10px; }
.ma-emo-logq{ width:230px; padding:9px 12px; }
.ma-emo-search{
  display:flex; align-items:center; gap:8px;
  padding:9px 18px;
  background:#fff; color:#3A4A5F;
  border:1px solid #DFE5EC; border-radius:7px;
  font-size:13.5px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
}
.ma-emo-search svg{ width:15px; height:15px; }
.ma-emo-search:hover{ background:#F5F7FA; border-color:#C6D0DC; }
html[data-theme="dark"] .ma-emo-search{ background:#162034; color:#E2E8F0; border-color:rgba(255,255,255,.12); }

@media (max-width:720px){
  .ma-emo-row{ grid-template-columns:1fr; gap:7px; }
  .ma-emo-note{ margin-left:0; }
  .ma-emo-logtools{ flex-wrap:wrap; }
  .ma-emo-logq{ width:100%; }
  .ma-emo-tbl thead{ display:none; }
  .ma-emo-tbl td{ display:block; padding:6px 0; border:none; }
  .ma-emo-tbl tr{ display:block; padding:12px 0; border-bottom:1px solid #F3F5F8; }
  .ma-emo-tbl .ta-r{ text-align:left; }
}
/* ═══════════ END v3.9.580 ═══════════ */

/* ═══ v3.9.583 — Email & WhatsApp Templates ══════════════════════════ */
.ma-tpl-lead{ margin:0 0 16px; font-size:12.5px; color:var(--muted,#6B7280); }
.ma-tpl-lead a{ color:#0F9D58; font-weight:600; text-decoration:none; }
.ma-tpl-lead a:hover{ text-decoration:underline; }

.ma-tpl-list{ display:flex; flex-direction:column; }
.ma-tpl-item{ border-bottom:1px solid var(--bdr,#E5E7EB); }
.ma-tpl-item:last-child{ border-bottom:none; }
.ma-tpl-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 4px 13px 14px;
  cursor:pointer; transition:background .12s;
}
.ma-tpl-row:hover{ background:#FAFBFC; }
html[data-theme="dark"] .ma-tpl-row:hover{ background:rgba(255,255,255,.04); }
.ma-tpl-name{ font-size:13.5px; font-weight:600; color:#0F9D58; }
.ma-tpl-item.open{ border-left:3px solid #0F9D58; }
.ma-tpl-item.open .ma-tpl-row{ padding-left:11px; }
.ma-tpl-sign{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  color:#64748B; flex-shrink:0;
}
.ma-tpl-sign svg{ width:15px; height:15px; }
.ma-tpl-item.open .ma-tpl-sign{ color:#0F9D58; }

.ma-tpl-panel{ padding:2px 14px 22px; }
.ma-tpl-hint{
  font-size:12px; color:var(--muted,#6B7280); margin-bottom:12px;
}
.ma-tpl-hint code,
.ma-tpl-tagtbl code{
  background:#E9EDF2; color:#334155; border-radius:4px;
  padding:2px 7px; font-size:11.5px;
}

.ma-tpl-tabs{ display:flex; gap:24px; border-bottom:1px solid var(--bdr,#E5E7EB); margin-bottom:18px; }
.ma-tpl-tab{
  display:flex; align-items:center; gap:7px;
  background:none; border:none; border-bottom:2px solid transparent;
  padding:9px 2px; margin-bottom:-1px;
  font-size:13.5px; font-family:inherit; color:#64748B; cursor:pointer;
}
.ma-tpl-tab svg{ width:16px; height:16px; }
.ma-tpl-tab.on{ color:#0F9D58; border-bottom-color:#0F9D58; font-weight:600; }

.ma-tpl-field{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; margin-bottom:16px; align-items:start; }
.ma-tpl-field>label{ padding-top:9px; font-size:13px; color:#475569; }
.ma-tpl-subject{
  width:100%; padding:9px 12px;
  border:1px solid var(--bdr,#E5E7EB); border-radius:6px;
  font-size:13.5px; font-family:inherit; color:var(--text,#111827); background:#fff;
}
html[data-theme="dark"] .ma-tpl-subject{ background:#0F172A; color:#F1F5F9; }

.ma-tpl-editor{ border:1px solid var(--bdr,#E5E7EB); border-radius:6px; overflow:hidden; background:#fff; }
html[data-theme="dark"] .ma-tpl-editor{ background:#0F172A; }
.ma-tpl-toolbar{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:6px 8px; border-bottom:1px solid var(--bdr,#E5E7EB); background:#fff;
}
html[data-theme="dark"] .ma-tpl-toolbar{ background:#131C2C; }
.ma-tpl-toolbar button{
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:4px; cursor:pointer;
  color:#334155; font-size:13px; font-family:Georgia,serif; padding:0;
}
.ma-tpl-toolbar button:hover{ background:#EEF2F7; }
html[data-theme="dark"] .ma-tpl-toolbar button{ color:#CBD5E1; }
html[data-theme="dark"] .ma-tpl-toolbar button:hover{ background:rgba(255,255,255,.08); }
.ma-tpl-toolbar button svg{ width:15px; height:15px; }
.ma-tpl-block{
  height:26px; border:none; background:none; font-size:12.5px;
  color:#334155; font-family:inherit; cursor:pointer; margin-right:6px;
}
.ma-tpl-body{
  min-height:190px; padding:14px 16px;
  font-size:13.5px; line-height:1.75; color:var(--text,#111827);
  outline:none; overflow-y:auto; max-height:420px;
}
html[data-theme="dark"] .ma-tpl-body{ color:#E2E8F0; }
.ma-tpl-body:focus{ background:#FCFDFE; }
html[data-theme="dark"] .ma-tpl-body:focus{ background:rgba(255,255,255,.02); }

.ma-tpl-wa{
  width:100%; padding:14px 16px;
  border:1px solid var(--bdr,#E5E7EB); border-radius:6px;
  font-size:13.5px; line-height:1.75; font-family:inherit;
  color:var(--text,#111827); background:#fff; resize:vertical;
}
html[data-theme="dark"] .ma-tpl-wa{ background:#0F172A; color:#E2E8F0; }

.ma-tpl-tagtbl{ width:100%; border-collapse:collapse; font-size:13px; }
.ma-tpl-tagtbl th{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--bdr,#E5E7EB); color:#475569; }
.ma-tpl-tagtbl td{ padding:7px 10px; border-bottom:1px solid #F1F5F9; }
.ma-tpl-taghint{ margin:12px 0 0; font-size:12.5px; color:var(--muted,#6B7280); }

@media (max-width:640px){
  .ma-tpl-field{ grid-template-columns:1fr; gap:7px; }
  .ma-tpl-field>label{ padding-top:0; }
}
/* ═══════════ END v3.9.583 ═══════════ */

/* ═══ v3.9.585 — Templates accordion matches the other settings lists ══
   Drops the green left strip and swaps the +/× glyph for the shared
   .ma-acc-chev arrow. The chevron's base look already comes from the
   v3.9.579 rules; only the open-state rotation needs mapping, because
   those rules key off .ma-acc-row.open and these rows are .ma-tpl-item.
════════════════════════════════════════════════════════════════════════ */
.ma-tpl-item.open{ border-left:0; }
.ma-tpl-item.open .ma-tpl-row{ padding-left:14px; }   /* was 11px to offset the strip */
.ma-tpl-item.open .ma-acc-chev{
  transform:rotate(180deg);
  background:var(--brand);
  color:#fff;
}
.ma-tpl-row:hover .ma-acc-chev{ background:#EEF2F8; color:#3B4A63; }
.ma-tpl-item.open .ma-tpl-row:hover .ma-acc-chev{ background:var(--brand); color:#fff; }
html[data-theme="dark"] .ma-tpl-item.open .ma-acc-chev{ background:var(--brand) !important; color:#fff !important; }
/* ═══════════ END v3.9.585 ═══════════ */

/* ═══ v3.9.586 — Export format picker ════════════════════════════════ */
.ma-expfmt-back{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.ma-expfmt-box{
  width:100%; max-width:560px; background:#fff;
  border-radius:16px; box-shadow:0 22px 64px rgba(15,23,42,.30); overflow:hidden;
}
html[data-theme="dark"] .ma-expfmt-box{ background:#1B2432; }
.ma-expfmt-hdr{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid #EEF1F5;
}
.ma-expfmt-hdr b{ display:block; font-size:17px; font-weight:800; color:#0B1B3A; }
.ma-expfmt-hdr i{ display:block; font-style:normal; font-size:12.5px; color:#6B7B93; margin-top:3px; }
html[data-theme="dark"] .ma-expfmt-hdr b{ color:#F1F5F9; }
.ma-expfmt-x{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px; color:#64748B; cursor:pointer; flex-shrink:0;
}
.ma-expfmt-x:hover{ background:#F1F5F9; color:#111827; }
.ma-expfmt-x svg{ width:19px; height:19px; }
.ma-expfmt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 22px 24px; }
.ma-expfmt-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:18px 12px; background:#fff;
  border:1.8px solid #E7ECF3; border-radius:12px; cursor:pointer;
  transition:border-color .14s, box-shadow .14s, transform .12s;
}
.ma-expfmt-card:hover{
  border-color:#1F6FEB; transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(31,111,235,.14);
}
html[data-theme="dark"] .ma-expfmt-card{ background:#162034; border-color:rgba(255,255,255,.10); }
.ma-expfmt-ico{
  width:42px; height:42px; border-radius:11px; background:#EEF4FF; color:#1F6FEB;
  display:flex; align-items:center; justify-content:center;
}
.ma-expfmt-ico svg{ width:21px; height:21px; }
.ma-expfmt-name{ font-size:14.5px; font-weight:700; color:#16233C; }
html[data-theme="dark"] .ma-expfmt-name{ color:#E2E8F0; }
.ma-expfmt-desc{ font-size:11.5px; color:#7C8AA0; line-height:1.45; }
@media (max-width:560px){ .ma-expfmt-grid{ grid-template-columns:1fr; } }
/* ═══════════ END v3.9.586 ═══════════ */

/* v3.9.591 — the conversation currently open is marked in the history list */
.ma-ai-history-item.on{
  background:var(--brand-bg,#EAF2FE);
  box-shadow:inset 2px 0 0 0 var(--brand,#1F6FEB);
}
html[data-theme="dark"] .ma-ai-history-item.on{ background:rgba(31,111,235,.16); }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.593 — Recent chats: rows that open a conversation
   One row per saved chat, the active one marked, with a "…" menu for
   deleting. Clicking a row restores that thread and continues it.
════════════════════════════════════════════════════════════════════════ */
.rbai-chat{
  position:relative;
  display:flex; align-items:center;
  border-radius:9px;
  margin-bottom:1px;
}
.rbai-chat:hover{ background:#F0F1F6; }
html[data-theme="dark"] .rbai-chat:hover{ background:#1E293B; }

.rbai-chat-b{
  flex:1; min-width:0;
  padding:9px 4px 9px 9px;
  border:none; background:transparent;
  color:#3F4756;
  font-family:inherit; font-size:13px;
  text-align:left; cursor:pointer;
}
.rbai-chat-t{
  display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
html[data-theme="dark"] .rbai-chat-b{ color:#CBD5E1; }

/* The conversation currently on screen */
.rbai-chat.on{ background:#EDEBFF; }
.rbai-chat.on .rbai-chat-b{ color:#4338CA; font-weight:600; }
html[data-theme="dark"] .rbai-chat.on{ background:#1E1B4B; }
html[data-theme="dark"] .rbai-chat.on .rbai-chat-b{ color:#C7D2FE; }

/* "…" appears on hover, and stays while its menu is open */
.rbai-chat-x{
  width:26px; height:26px; margin-right:5px;
  flex-shrink:0; padding:0;
  border:none; background:transparent;
  color:#8A94A6; border-radius:6px;
  cursor:pointer; opacity:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .14s, background .14s;
}
.rbai-chat-x svg{ width:15px; height:15px; }
.rbai-chat:hover .rbai-chat-x,
.rbai-chat:focus-within .rbai-chat-x{ opacity:1; }
.rbai-chat-x:hover{ background:#E2E5EC; color:#0F172A; }
html[data-theme="dark"] .rbai-chat-x:hover{ background:#334155; color:#F1F5F9; }

.rbai-chat-menu{
  position:absolute; right:6px; top:calc(100% - 4px);
  z-index:20;
  min-width:150px;
  padding:5px;
  background:#fff;
  border:1px solid #E7EAF0;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(16,24,40,.16);
}
.rbai-chat-menu button{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:8px 10px;
  border:none; background:transparent;
  border-radius:7px;
  color:#DC2626;
  font-family:inherit; font-size:13px; font-weight:600;
  text-align:left; cursor:pointer;
}
.rbai-chat-menu button svg{ width:15px; height:15px; flex-shrink:0; }
.rbai-chat-menu button:hover{ background:#FEF2F2; }
html[data-theme="dark"] .rbai-chat-menu{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .rbai-chat-menu button:hover{ background:#450A0A; }

/* v3.9.594 — Chat row menu: Rename / Download / Delete */
.rbai-chat-menu button{ color:#3F4756; }
.rbai-chat-menu button:hover{ background:#F0F1F6; }
.rbai-chat-menu button.is-danger{ color:#DC2626; }
.rbai-chat-menu button.is-danger:hover{ background:#FEF2F2; }
.rbai-chat-menu-sep{ height:1px; background:#EEF0F5; margin:4px 6px; }
html[data-theme="dark"] .rbai-chat-menu button{ color:#CBD5E1; }
html[data-theme="dark"] .rbai-chat-menu button:hover{ background:#243449; }
html[data-theme="dark"] .rbai-chat-menu button.is-danger{ color:#FCA5A5; }
html[data-theme="dark"] .rbai-chat-menu button.is-danger:hover{ background:#450A0A; }
html[data-theme="dark"] .rbai-chat-menu-sep{ background:#334155; }

/* v3.9.594 — Chat row menu: rename / download / delete */
.rbai-chat-menu{ min-width:196px; }
.rbai-chat-menu button{ color:#334155; }
.rbai-chat-menu button:hover{ background:#F1F3F7; }
.rbai-chat-menu button.is-danger{ color:#DC2626; }
.rbai-chat-menu button.is-danger:hover{ background:#FEF2F2; }
.rbai-chat-menu-sep{ height:1px; margin:4px 6px; background:#EDEFF3; }
html[data-theme="dark"] .rbai-chat-menu button{ color:#CBD5E1; }
html[data-theme="dark"] .rbai-chat-menu button:hover{ background:#243449; }
html[data-theme="dark"] .rbai-chat-menu button.is-danger{ color:#FCA5A5; }
html[data-theme="dark"] .rbai-chat-menu button.is-danger:hover{ background:#450A0A; }
html[data-theme="dark"] .rbai-chat-menu-sep{ background:#334155; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.596 — DESIGN CUSTOM HEADER: guided steps
   ──────────────────────────────────────────────────────────────────────
   The tools were a flat dark bar that gave no sense of order or of what
   each one does. They are now a connected strip of steps, each with its
   own colour, icon and one-line description, under a title row that
   carries Reset and View Full Size.
════════════════════════════════════════════════════════════════════════ */

/* Hide the plain section heading — the new title row replaces it */
#set-sec-customhdr > .ma-set2-sec-hdr{ display:none; }

.ma-chd-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:4px 2px 16px;
}
.ma-chd-head-t{
  margin:0; font-size:22px; font-weight:800;
  letter-spacing:-.02em; color:#0F172A;
}
.ma-chd-head-s{ margin:4px 0 0; font-size:14px; color:#8A94A6; }
.ma-chd-head-act{ display:flex; gap:10px; flex-shrink:0; }

.ma-chd-hbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border:1px solid #E4E7EE; border-radius:10px;
  background:#fff; color:#334155;
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
  transition:background .14s, border-color .14s, box-shadow .14s;
}
.ma-chd-hbtn:hover{ background:#F7F9FC; border-color:#CBD3DF; }
.ma-chd-hbtn.is-primary{
  background:#1F6FEB; border-color:#1F6FEB; color:#fff;
  box-shadow:0 2px 8px rgba(31,111,235,.28);
}
.ma-chd-hbtn.is-primary:hover{ background:#1A5FD0; border-color:#1A5FD0; }

/* ── Step strip ─────────────────────────────────────────────────── */
.ma-chd-steps{
  display:flex; align-items:stretch;
  gap:0;
  padding:14px;
  background:#fff;
  border:1px solid #EDF0F5;
  border-radius:16px;
  overflow-x:auto;
  scrollbar-width:none;
}
.ma-chd-steps::-webkit-scrollbar{ display:none; }

.ma-chd-step{
  flex:1 1 0; min-width:186px;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border:none; background:transparent;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  position:relative;
  transition:background .16s, transform .16s;
}
.ma-chd-step:hover{ transform:translateY(-1px); }
.ma-chd-step-ico{
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  transition:transform .16s;
}
.ma-chd-step:hover .ma-chd-step-ico{ transform:scale(1.05); }
.ma-chd-step-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ma-chd-step-txt b{
  font-size:15px; font-weight:700; color:#0F172A;
  white-space:nowrap;
}
.ma-chd-step-txt i{
  font-style:normal; font-size:12.5px; color:#94A3B8;
  white-space:nowrap;
}

/* Hairline joining one step to the next */
.ma-chd-step-link{
  align-self:center;
  width:26px; height:2px; flex-shrink:0;
  background:linear-gradient(90deg,#E7EBF2,#DDE3EC);
  border-radius:2px;
}

/* Per-step colour */
.ma-chd-step.tone-blue   .ma-chd-step-ico{ background:#E8F0FE; color:#1F6FEB; }
.ma-chd-step.tone-green  .ma-chd-step-ico{ background:#E6F7EE; color:#12A150; }
.ma-chd-step.tone-amber  .ma-chd-step-ico{ background:#FEF3E2; color:#E08700; }
.ma-chd-step.tone-violet .ma-chd-step-ico{ background:#F2ECFE; color:#7C3AED; }
.ma-chd-step.tone-cyan   .ma-chd-step-ico{ background:#E4F6FA; color:#0B96B8; }

.ma-chd-step.tone-blue:hover  { background:#F4F8FF; }
.ma-chd-step.tone-green:hover { background:#F3FBF7; }
.ma-chd-step.tone-amber:hover { background:#FFFAF2; }
.ma-chd-step.tone-violet:hover{ background:#F9F6FF; }
.ma-chd-step.tone-cyan:hover  { background:#F2FBFD; }

/* Active tool: tinted fill, solid icon, underline beneath */
.ma-chd-step.on .ma-chd-step-ico{ color:#fff; }
.ma-chd-step.tone-blue.on   { background:#EEF4FE; }
.ma-chd-step.tone-blue.on   .ma-chd-step-ico{ background:#1F6FEB; }
.ma-chd-step.tone-green.on  { background:#ECF9F2; }
.ma-chd-step.tone-green.on  .ma-chd-step-ico{ background:#12A150; }
.ma-chd-step.tone-amber.on  { background:#FEF6EA; }
.ma-chd-step.tone-amber.on  .ma-chd-step-ico{ background:#E08700; }
.ma-chd-step.tone-violet.on { background:#F4EFFE; }
.ma-chd-step.tone-violet.on .ma-chd-step-ico{ background:#7C3AED; }
.ma-chd-step.tone-cyan.on   { background:#EAF8FC; }
.ma-chd-step.tone-cyan.on   .ma-chd-step-ico{ background:#0B96B8; }
.ma-chd-step.on::after{
  content:''; position:absolute; left:16px; right:16px; bottom:4px;
  height:3px; border-radius:3px; background:currentColor; opacity:.9;
}
.ma-chd-step.tone-blue.on::after  { background:#1F6FEB; }
.ma-chd-step.tone-green.on::after { background:#12A150; }
.ma-chd-step.tone-amber.on::after { background:#E08700; }
.ma-chd-step.tone-violet.on::after{ background:#7C3AED; }
.ma-chd-step.tone-cyan.on::after  { background:#0B96B8; }

/* ── Full-size overlay ──────────────────────────────────────────── */
body.ma-chd-fs-lock{ overflow:hidden; }
.ma-chd-fs{
  position:fixed; inset:0; z-index:100040;
  background:#F4F6FA;
  display:flex; flex-direction:column;
}
.ma-chd-fs-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:#fff; border-bottom:1px solid #E7EAF0;
}
.ma-chd-fs-t{ font-size:15px; font-weight:700; color:#0F172A; }
.ma-chd-fs-x{
  width:36px; height:36px; border:none; background:transparent;
  color:#475569; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ma-chd-fs-x:hover{ background:#F1F5F9; }
.ma-chd-fs-body{
  flex:1; min-height:0; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
}
.ma-chd-fs-body .ma-chd-stage{ width:100%; max-width:1180px; }

@media (max-width:860px){
  .ma-chd-head-t{ font-size:19px; }
  .ma-chd-steps{ padding:10px; }
  .ma-chd-step{ min-width:168px; padding:12px; }
  .ma-chd-step-ico{ width:38px; height:38px; border-radius:11px; }
  .ma-chd-step-txt b{ font-size:14px; }
}

html[data-theme="dark"] .ma-chd-head-t{ color:#F1F5F9; }
html[data-theme="dark"] .ma-chd-head-s{ color:#7A8699; }
html[data-theme="dark"] .ma-chd-hbtn{ background:#1E293B; border-color:#334155; color:#CBD5E1; }
html[data-theme="dark"] .ma-chd-steps{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-chd-step-txt b{ color:#F1F5F9; }
html[data-theme="dark"] .ma-chd-step-txt i{ color:#7A8699; }
html[data-theme="dark"] .ma-chd-fs{ background:#0B1120; }
html[data-theme="dark"] .ma-chd-fs-bar{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-chd-fs-t{ color:#F1F5F9; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.597 — BANKS section
════════════════════════════════════════════════════════════════════════ */
.ma-bk-legacy{ display:none !important; }

.ma-bk-title{ margin:0 0 14px; font-size:22px; font-weight:800; color:#0F172A; letter-spacing:-.02em; }

.ma-bk-promo{
  padding:16px 18px; margin-bottom:16px;
  background:#F8FAFC; border:1px solid #EDF0F5; border-radius:12px;
}
.ma-bk-promo-t{ font-size:14.5px; font-weight:700; color:#0F172A; }
.ma-bk-promo p{ margin:8px 0 0; font-size:13.5px; color:#5B6474; }
.ma-bk-zero{ color:#12A150; font-weight:800; }

.ma-bk-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ma-bk-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border:none; border-radius:9px;
  background:#2563EB; color:#fff;
  font-family:inherit; font-size:14px; font-weight:650; cursor:pointer;
}
.ma-bk-btn:hover{ background:#1D4ED8; }

.ma-bk-list{ border:1px solid #EDF0F5; border-radius:12px; margin-bottom:16px; }
.ma-bk-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:#fff;
  border-bottom:1px solid #F1F3F7;
  position:relative;
}
.ma-bk-row:last-child{ border-bottom:none; }
.ma-bk-row.is-cash{ background:#F8FAFC; }
.ma-bk-ico{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #E7EAF0; border-radius:9px; color:#64748B; background:#fff;
}
.ma-bk-ico svg{ width:18px; height:18px; }
.ma-bk-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ma-bk-main b{ font-size:14.5px; font-weight:700; color:#0F172A; }
.ma-bk-main i{ font-style:normal; font-size:12.5px; color:#8A94A6; }
.ma-bk-upi{ color:#64748B !important; }
.ma-bk-def{
  padding:4px 10px; border-radius:6px; background:#EEF2F7;
  font-size:11.5px; font-weight:700; color:#475569; flex-shrink:0;
}
.ma-bk-acts{ display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; }
.ma-bk-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border:1px solid #E4E7EE; border-radius:8px;
  background:#fff; color:#334155;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.ma-bk-mini svg{ width:14px; height:14px; }
.ma-bk-mini:hover{ background:#F7F9FC; }
.ma-bk-dots{ padding:7px 10px; }
.ma-bk-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  min-width:196px; padding:6px;
  background:#fff; border:1px solid #E7EAF0; border-radius:10px;
  box-shadow:0 12px 28px rgba(16,24,40,.16);
  display:flex; flex-direction:column;
}
.ma-bk-menu button{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border:none; background:transparent; border-radius:7px;
  color:#334155; font-family:inherit; font-size:13.5px; font-weight:600;
  text-align:left; cursor:pointer;
}
.ma-bk-menu button svg{ width:15px; height:15px; flex-shrink:0; }
.ma-bk-menu button:hover{ background:#F1F3F7; }
.ma-bk-menu button.is-danger{ color:#DC2626; }
.ma-bk-menu button.is-danger:hover{ background:#FEF2F2; }
.ma-bk-empty{ padding:22px 16px; text-align:center; font-size:13.5px; color:#8A94A6; }

.ma-bk-note{ padding:16px 18px; background:#F8FAFC; border:1px solid #EDF0F5; border-radius:12px; }
.ma-bk-note-t{ font-size:14.5px; font-weight:700; color:#0F172A; margin-bottom:10px; }
.ma-bk-note ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ma-bk-note li{ display:flex; gap:9px; font-size:13px; color:#475569; line-height:1.5; }
.ma-bk-note li.is-warn{ color:#DC2626; }
.ma-bk-i{
  width:16px; height:16px; flex-shrink:0; margin-top:2px;
  border:1px solid #C7CEDA; border-radius:50%;
  font-size:10px; font-weight:700; color:#8A94A6;
  display:flex; align-items:center; justify-content:center;
}
.ma-bk-i.is-warn{ border-color:#FCA5A5; color:#DC2626; }

/* ── Sidebar ────────────────────────────────────────────────────── */
body.ma-bk-lock{ overflow:hidden; }
.ma-bk-side-wrap{ position:fixed; inset:0; z-index:100045; }
.ma-bk-scrim{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.ma-bk-side{
  position:absolute; right:0; top:0; bottom:0;
  width:min(620px, 100vw);
  background:#F4F6FA;
  display:flex; flex-direction:column;
  box-shadow:-8px 0 34px rgba(16,24,40,.18);
  animation:bkIn .2s ease;
}
@keyframes bkIn{ from{ transform:translateX(24px); opacity:.6 } to{ transform:none; opacity:1 } }
.ma-bk-side-hd{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; background:#fff; border-bottom:1px solid #E7EAF0;
}
.ma-bk-side-x{
  width:34px; height:34px; border:none; background:transparent;
  color:#334155; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ma-bk-side-x:hover{ background:#F1F5F9; }
.ma-bk-side-t{ flex:1; font-size:18px; font-weight:750; color:#0F172A; }
.ma-bk-save{
  padding:9px 18px; border:none; border-radius:8px;
  background:#2563EB; color:#fff;
  font-family:inherit; font-size:14px; font-weight:650; cursor:pointer;
}
.ma-bk-save:hover{ background:#1D4ED8; }
.ma-bk-side-body{ flex:1; min-height:0; overflow-y:auto; padding:18px; }
.ma-bk-side-ft{ padding:14px 18px; background:#fff; border-top:1px solid #E7EAF0; }

.ma-bk-card{
  background:#fff; border:1px solid #EDF0F5; border-radius:12px;
  padding:18px; margin-bottom:16px;
}
.ma-bk-card-t{ font-size:14px; font-weight:700; color:#0F172A; margin-bottom:10px; }
.ma-bk-l{ display:block; font-size:13.5px; color:#334155; margin:14px 0 6px; }
.ma-bk-l:first-child{ margin-top:0; }
.ma-bk-l.req::before{ content:'*'; color:#DC2626; margin-right:3px; }
.ma-bk-opt{
  margin-left:6px; padding:2px 6px; border-radius:4px;
  background:#EEF2F7; color:#64748B; font-size:10px; font-weight:700;
}
.ma-bk-in{
  width:100%; padding:11px 13px;
  border:1px solid #DCE1E9; border-radius:8px; background:#fff;
  font-family:inherit; font-size:14px; color:#0F172A; outline:none;
  box-sizing:border-box;
}
.ma-bk-in:focus{ border-color:#93C5FD; box-shadow:0 0 0 3px rgba(147,197,253,.25); }
.ma-bk-ta{ resize:vertical; min-height:78px; }
.ma-bk-join{ display:flex; }
.ma-bk-join .ma-bk-in{ border-radius:8px 0 0 8px; }
.ma-bk-join-b{
  flex-shrink:0; padding:0 14px;
  border:1px solid #DCE1E9; border-left:none; border-radius:0 8px 8px 0;
  background:#F7F9FC; color:#334155;
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.ma-bk-join-b:hover{ background:#EEF2F7; }
.ma-bk-hint{ margin:7px 0 0; font-size:12.5px; color:#8A94A6; line-height:1.5; }
.ma-bk-sw{
  width:46px; height:25px; padding:0; border:none; border-radius:13px;
  background:#CBD5E1; cursor:pointer; position:relative; display:block;
}
.ma-bk-sw::after{
  content:''; position:absolute; top:3px; left:3px;
  width:19px; height:19px; border-radius:50%; background:#fff;
  transition:transform .16s;
}
.ma-bk-sw.on{ background:#2563EB; }
.ma-bk-sw.on::after{ transform:translateX(21px); }
.ma-bk-swap{ display:flex; justify-content:center; margin:10px 0 -4px; }
.ma-bk-swap button{
  width:34px; height:34px; border:1px solid #E4E7EE; border-radius:50%;
  background:#fff; color:#475569; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ma-bk-swap button:hover{ background:#F1F5F9; }
.ma-bk-tx{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid #F1F3F7; font-size:13px;
}
.ma-bk-tx:last-child{ border-bottom:none; }
.ma-bk-tx-a{ flex:1; min-width:0; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-bk-tx-v{ font-weight:700; color:#0F172A; font-variant-numeric:tabular-nums; }
.ma-bk-tx-d{ font-size:11.5px; color:#94A3B8; }

@media (max-width:640px){
  .ma-bk-row{ flex-wrap:wrap; }
  .ma-bk-acts{ width:100%; justify-content:flex-end; }
  .ma-bk-side{ width:100vw; }
}
html[data-theme="dark"] .ma-bk-title,
html[data-theme="dark"] .ma-bk-main b,
html[data-theme="dark"] .ma-bk-side-t,
html[data-theme="dark"] .ma-bk-promo-t,
html[data-theme="dark"] .ma-bk-note-t{ color:#F1F5F9; }
html[data-theme="dark"] .ma-bk-promo,
html[data-theme="dark"] .ma-bk-note{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-bk-list{ border-color:#1E293B; }
html[data-theme="dark"] .ma-bk-row{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-bk-row.is-cash{ background:#131C2E; }
html[data-theme="dark"] .ma-bk-side{ background:#0B1120; }
html[data-theme="dark"] .ma-bk-side-hd,
html[data-theme="dark"] .ma-bk-side-ft,
html[data-theme="dark"] .ma-bk-card{ background:#0F172A; border-color:#1E293B; }
html[data-theme="dark"] .ma-bk-in{ background:#0B1120; border-color:#334155; color:#F1F5F9; }
html[data-theme="dark"] .ma-bk-mini,
html[data-theme="dark"] .ma-bk-menu{ background:#1E293B; border-color:#334155; color:#CBD5E1; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.598 — Bank name picker
   Searchable list of Indian banks. Each carries an initials badge on the
   bank's brand colour rather than a bitmap logo — bundling trademarked
   marks is a licensing problem, and hot-linking them would leak activity
   to a third party and fail offline.
════════════════════════════════════════════════════════════════════════ */
.ma-bk-pick{ position:relative; }
.ma-bk-pick .ma-bk-in{ padding-right:40px; width:100%; }
.ma-bk-pick-arrow{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; padding:0;
  border:none; background:transparent; color:#8A94A6;
  border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ma-bk-pick-arrow svg{ width:16px; height:16px; }
.ma-bk-pick-arrow:hover{ background:#F1F3F7; color:#0F172A; }

.ma-bk-pick-list{
  display:none;
  position:absolute; left:0; right:0; top:calc(100% + 5px);
  z-index:40;
  max-height:290px; overflow-y:auto;
  padding:5px;
  background:#fff;
  border:1px solid #E4E7EE;
  border-radius:11px;
  box-shadow:0 12px 30px rgba(16,24,40,.16);
}
.ma-bk-pick-list.on{ display:block; }
.ma-bk-pick-list::-webkit-scrollbar{ width:8px; }
.ma-bk-pick-list::-webkit-scrollbar-thumb{
  background:#DDE2EA; border:2px solid transparent;
  background-clip:padding-box; border-radius:5px;
}

.ma-bk-pick-i{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:8px 9px;
  border:none; background:transparent;
  border-radius:8px;
  font-family:inherit; font-size:13.5px; color:#1F2937;
  text-align:left; cursor:pointer;
}
.ma-bk-pick-i:hover{ background:#F3F6FB; }
.ma-bk-logo{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.02em;
}
.ma-bk-pick-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-bk-pick-none{ padding:14px 10px; font-size:12.5px; color:#8A94A6; text-align:center; }

/* UPI verify button confirms a passing format check */
#bk-upi-verify.ok{ border-color:#12A150; color:#12A150; }

html[data-theme="dark"] .ma-bk-pick-list{ background:#0F172A; border-color:#334155; }
html[data-theme="dark"] .ma-bk-pick-i{ color:#E2E8F0; }
html[data-theme="dark"] .ma-bk-pick-i:hover{ background:#1E293B; }
html[data-theme="dark"] .ma-bk-pick-arrow:hover{ background:#1E293B; color:#F1F5F9; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.599 — Bank row menu + UPI result
   ──────────────────────────────────────────────────────────────────────
   The row menu was being cut off: .ma-bk-list carried overflow:hidden
   (to round its corners), which clips an absolutely-positioned child no
   matter what z-index it has. The corners are now rounded on the first
   and last rows instead, so nothing needs clipping.
════════════════════════════════════════════════════════════════════════ */
.ma-bk-list > :first-child{ border-radius:12px 12px 0 0; }
.ma-bk-list > :last-child{ border-radius:0 0 12px 12px; }

/* A row with its menu open is lifted above the rows and cards below. */
.ma-bk-row{ position:relative; z-index:1; }
.ma-bk-row.menu-open{ z-index:60; }
.ma-bk-menu{ z-index:70; }
/* Nothing between the row and the page may clip or stack over it */
.ma-bk-list, .ma-bk-promo, .ma-bk-note{ overflow:visible; }
.ma-bk-note{ position:relative; z-index:0; }

/* ── UPI verification result ────────────────────────────────────── */
.ma-bk-upi-res{
  display:none;
  align-items:flex-start; gap:9px;
  margin:8px 0 0;
  padding:9px 11px;
  border-radius:9px;
  font-size:12.8px; line-height:1.45;
}
.ma-bk-upi-res.is-ok,
.ma-bk-upi-res.is-err,
.ma-bk-upi-res.is-info{ display:flex; }
.ma-bk-upi-ico{ flex-shrink:0; margin-top:1px; }
.ma-bk-upi-ico svg{ width:17px; height:17px; display:block; }
.ma-bk-upi-txt{ min-width:0; }
.ma-bk-upi-txt b{ display:block; font-weight:700; letter-spacing:.01em; }
.ma-bk-upi-txt i{ display:block; font-style:normal; margin-top:2px; color:#5B6474; }

.ma-bk-upi-res.is-ok  { background:#ECFAF1; color:#0E8A45; }
.ma-bk-upi-res.is-err { background:#FEF1F1; color:#C62828; }
.ma-bk-upi-res.is-info{ background:#F2F6FC; color:#33538A; }

html[data-theme="dark"] .ma-bk-upi-res.is-ok  { background:#0C2A18; color:#5FD99A; }
html[data-theme="dark"] .ma-bk-upi-res.is-err { background:#2E1111; color:#F79A9A; }
html[data-theme="dark"] .ma-bk-upi-res.is-info{ background:#141E33; color:#9DB8E8; }
html[data-theme="dark"] .ma-bk-upi-txt i{ color:#94A3B8; }

/* ═══ v3.9.605 — Bank delete confirmation dialog ═════════════════════ */
.ma-bkdel-back{
  position:fixed; inset:0; z-index:10000;
  background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.ma-bkdel-box{
  width:100%; max-width:660px; background:#fff;
  border-radius:14px; box-shadow:0 24px 60px rgba(15,23,42,.28); overflow:hidden;
}
html[data-theme="dark"] .ma-bkdel-box{ background:#1B2432; }
.ma-bkdel-hd{
  display:flex; align-items:center; gap:12px;
  padding:20px 22px 6px;
}
.ma-bkdel-ico{
  width:26px; height:26px; flex-shrink:0; border-radius:999px;
  background:#FDE7E7; color:#DC2626;
  display:flex; align-items:center; justify-content:center;
}
.ma-bkdel-ico svg{ width:15px; height:15px; }
.ma-bkdel-hd h3{
  flex:1; margin:0; font-size:19px; font-weight:700; letter-spacing:-.2px; color:#0F172A;
}
html[data-theme="dark"] .ma-bkdel-hd h3{ color:#F1F5F9; }
.ma-bkdel-x{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px;
  color:#64748B; cursor:pointer;
}
.ma-bkdel-x:hover{ background:#F1F5F9; color:#0F172A; }
.ma-bkdel-x svg{ width:19px; height:19px; }

.ma-bkdel-body{ padding:6px 22px 4px; }
.ma-bkdel-sub{ font-size:15px; font-weight:700; color:#0F172A; margin:6px 0 12px; }
html[data-theme="dark"] .ma-bkdel-sub{ color:#E2E8F0; }
.ma-bkdel-tbl{ border:1px solid #E5E7EB; border-radius:8px; overflow:hidden; }
html[data-theme="dark"] .ma-bkdel-tbl{ border-color:rgba(255,255,255,.12); }
.ma-bkdel-tr{ display:grid; grid-template-columns:42% 1fr; align-items:stretch; }
.ma-bkdel-tr + .ma-bkdel-tr{ border-top:1px solid #E5E7EB; }
html[data-theme="dark"] .ma-bkdel-tr + .ma-bkdel-tr{ border-top-color:rgba(255,255,255,.12); }
.ma-bkdel-tr span{
  padding:14px 16px; background:#F8FAFC; color:#64748B; font-size:14px;
  border-right:1px solid #E5E7EB;
}
html[data-theme="dark"] .ma-bkdel-tr span{ background:rgba(255,255,255,.04); border-right-color:rgba(255,255,255,.12); }
.ma-bkdel-tr b{ padding:14px 16px; color:#0F172A; font-size:14px; font-weight:600; word-break:break-all; }
html[data-theme="dark"] .ma-bkdel-tr b{ color:#F1F5F9; }

.ma-bkdel-warn{ list-style:none; margin:16px 0 4px; padding:0; }
.ma-bkdel-warn li{
  position:relative; padding-left:16px; margin-bottom:7px;
  color:#DC2626; font-size:13.5px; line-height:1.5;
}
.ma-bkdel-warn li::before{
  content:''; position:absolute; left:2px; top:8px;
  width:5px; height:5px; border-radius:999px; background:#DC2626;
}
.ma-bkdel-ft{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 22px 20px;
}
.ma-bkdel-cancel,
.ma-bkdel-go{
  padding:10px 22px; border-radius:7px;
  font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer;
}
.ma-bkdel-cancel{ background:#fff; color:#334155; border:1px solid #CBD5E1; }
.ma-bkdel-cancel:hover{ background:#F8FAFC; }
.ma-bkdel-go{ background:#E8232A; color:#fff; border:1px solid #E8232A; }
.ma-bkdel-go:hover{ background:#CC1B22; border-color:#CC1B22; }
html[data-theme="dark"] .ma-bkdel-cancel{ background:transparent; color:#CBD5E1; border-color:rgba(255,255,255,.20); }
@media (max-width:560px){
  .ma-bkdel-tr{ grid-template-columns:1fr; }
  .ma-bkdel-tr span{ border-right:none; border-bottom:1px solid #E5E7EB; padding-bottom:8px; }
  .ma-bkdel-ft{ flex-direction:column-reverse; }
  .ma-bkdel-cancel, .ma-bkdel-go{ width:100%; }
}
/* ═══════════ END v3.9.605 ═══════════ */

/* ═══ v3.9.606 — Toast notifications ═════════════════════════════════
   White card, coloured icon tile, title + subtitle, close button and a
   soft coloured glow. Supersedes the earlier strip-and-ring styling;
   the older .rb-toast-bar / -body / -msg rules are simply unused now.
════════════════════════════════════════════════════════════════════════ */
.rb-toast-host{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:2147483630; /* v3.9.817 — toasts too: just under the alerts, above every sidebar */ display:flex; flex-direction:column; gap:14px;
  width:min(440px, calc(100vw - 32px)); pointer-events:none;
}
.rb-toast{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:14px 14px 14px 16px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.07);
  pointer-events:auto;
  opacity:0; transform:translateY(-14px) scale(.97);
  transition:opacity .24s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
/* the coloured bloom under the card */
.rb-toast::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-9px; height:22px;
  background:var(--rb-toast-glow, rgba(52,211,153,.45));
  filter:blur(14px); border-radius:999px; z-index:-1; opacity:.9;
}
.rb-toast-on{ opacity:1; transform:translateY(0) scale(1); }
.rb-toast-out{ opacity:0; transform:translateY(-10px) scale(.97); }
html[data-theme="dark"] .rb-toast{ background:#1B2432; }

.rb-toast-ico{
  width:46px; height:46px; flex-shrink:0;
  border-radius:13px;
  background:var(--rb-toast-color, #34D399);
  display:flex; align-items:center; justify-content:center;
}
.rb-toast-ico svg{ width:24px; height:24px; display:block; }

.rb-toast-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rb-toast-txt b{
  font-size:16px; font-weight:700; letter-spacing:-.2px; color:#111827;
  line-height:1.25; overflow-wrap:anywhere;
}
.rb-toast-txt i{
  font-style:normal; font-size:14px; color:#7A8794; line-height:1.4;
  overflow-wrap:anywhere;
}
html[data-theme="dark"] .rb-toast-txt b{ color:#F1F5F9; }
html[data-theme="dark"] .rb-toast-txt i{ color:#94A3B8; }

.rb-toast-x{
  width:34px; height:34px; flex-shrink:0; align-self:center;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:9px;
  color:#9AA5B1; cursor:pointer; padding:0;
  transition:background .14s, color .14s;
}
.rb-toast-x svg{ width:19px; height:19px; }
.rb-toast-x:hover{ background:#EEF1F6; color:#374151; }
html[data-theme="dark"] .rb-toast-x:hover{ background:rgba(255,255,255,.08); color:#F1F5F9; }

@media (max-width:520px){
  .rb-toast-host{ top:12px; width:calc(100vw - 24px); }
  .rb-toast{ padding:12px; gap:12px; }
  .rb-toast-ico{ width:40px; height:40px; border-radius:11px; }
  .rb-toast-ico svg{ width:21px; height:21px; }
  .rb-toast-txt b{ font-size:15px; }
  .rb-toast-txt i{ font-size:13px; }
}
/* ═══════════ END v3.9.606 ═══════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.607 — TOASTS: pastel card, white circular icon
   ──────────────────────────────────────────────────────────────────────
   Replaces the white-card-with-coloured-tile look. The whole card now
   carries the pastel fill and the icon sits in a white circle, which is
   what makes the design read at a glance — the colour is the message.

   Appended so the earlier rules stay as a fallback; everything here is
   scoped to .rb-toast and overrides on order.
════════════════════════════════════════════════════════════════════════ */
.rb-toast{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  min-width:320px;
  max-width:440px;
  background:var(--rb-fill, #B6F2C6) !important;
  border:none !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(16,24,40,.12), 0 2px 5px rgba(16,24,40,.06) !important;
  color:var(--rb-text, #10361F);
}

/* The old left accent bar is redundant now the card is coloured */
.rb-toast-bar{ display:none !important; }

/* White circular badge holding the glyph */
.rb-toast-ico{
  width:46px; height:46px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff !important;
  border-radius:50% !important;
  color:var(--rb-ink, #0EA05A);
  box-shadow:0 1px 3px rgba(16,24,40,.10);
}
.rb-toast-ico svg{ width:24px; height:24px; }

.rb-toast-body,
.rb-toast-txt{
  display:flex; flex-direction:column; gap:3px;
  min-width:0; flex:1;
}
.rb-toast-txt b{
  font-size:16.5px;
  font-weight:750;
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--rb-text, #10361F);
}
.rb-toast-txt i{
  font-style:normal;
  font-size:13.5px;
  line-height:1.4;
  color:var(--rb-text, #10361F);
  opacity:.78;
}

/* Close button tinted from the card rather than plain grey */
.rb-toast-x{
  width:28px; height:28px;
  flex-shrink:0; align-self:flex-start;
  border:none; background:transparent;
  border-radius:8px; cursor:pointer;
  color:var(--rb-text, #10361F);
  opacity:.45;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .14s, background .14s;
}
.rb-toast-x:hover{ opacity:.9; background:rgba(255,255,255,.5); }
.rb-toast-x svg{ width:15px; height:15px; }

/* Dark mode keeps the pastel fills — they carry the meaning, and the
   text colours are already dark enough to stay legible on them. */
html[data-theme="dark"] .rb-toast{
  box-shadow:0 10px 28px rgba(0,0,0,.45) !important;
}

@media (max-width:560px){
  .rb-toast{
    min-width:0; max-width:none; width:100%;
    padding:14px; gap:13px; border-radius:15px !important;
  }
  .rb-toast-ico{ width:40px; height:40px; }
  .rb-toast-ico svg{ width:21px; height:21px; }
  .rb-toast-txt b{ font-size:15px; }
  .rb-toast-txt i{ font-size:12.8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.608 — Toast glow removed · account tick · bank marks
════════════════════════════════════════════════════════════════════════ */

/* The toast carried a blurred coloured glow via ::after, sized against
   --rb-toast-glow. That variable was renamed when the pastel design
   landed, so it fell back to a fixed green — and because the card sets
   overflow:hidden, the blur was clipped INSIDE the card and read as a
   dirty smudge along the bottom edge. The card has its own shadow, so
   the glow is simply dropped. */
.rb-toast::after{ display:none !important; content:none !important; }
.rb-toast{ overflow:visible !important; }

/* ── Account number validation ──────────────────────────────────── */
.ma-bk-vwrap{ position:relative; }
.ma-bk-vwrap .ma-bk-in{ width:100%; padding-right:38px; }
.ma-bk-vtick{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  display:none; align-items:center; justify-content:center;
}
.ma-bk-vtick.ok{ display:flex; color:#0EA05A; }
.ma-bk-vtick.bad{ display:flex; }
.ma-bk-vtick svg{ width:16px; height:16px; display:block; }
.ma-bk-vwrap:has(.ma-bk-vtick.ok) .ma-bk-in{ border-color:#8FD3A3; }
.ma-bk-vwrap:has(.ma-bk-vtick.bad) .ma-bk-in{ border-color:#F0A3A3; }

.ma-bk-hint.is-ok{ color:#0E8A45; }
.ma-bk-hint.is-bad{ color:#C62828; }

/* ── Bank marks in the picker ───────────────────────────────────── */
.ma-bk-logo.is-mark{
  background:transparent !important;
  display:flex; align-items:center; justify-content:center;
}
.ma-bk-logo.is-mark svg{ width:22px; height:22px; display:block; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.609 — Mobile list rows: one circle, and no clipped first letter
   ──────────────────────────────────────────────────────────────────────
   Two separate faults produced the double circle:

   1. The expand button holds BOTH a plus and a minus icon, and the rule
      hiding the minus was scoped to `#pg-stock`. On Products, Customers
      and every other list both icons rendered — two circles.

   2. `.ma-item-toggle` is also the class of an unrelated 42x24 toggle
      SWITCH (line ~1978). The round button inherited that width and
      slider styling, which is why the shapes looked wrong on narrow
      screens where the row has less space to absorb it.
════════════════════════════════════════════════════════════════════════ */

/* Show exactly one icon, on every page — plus when collapsed, minus
   when expanded. Scoped to the button that actually has the icons so
   the real toggle switch is untouched. */
.ma-item-toggle:has(.ma-item-toggle-plus) .ma-item-toggle-minus{ display:none; }
.ma-item-row.is-expanded .ma-item-toggle .ma-item-toggle-minus,
tr.is-expanded .ma-item-toggle .ma-item-toggle-minus{ display:block; }
.ma-item-row.is-expanded .ma-item-toggle .ma-item-toggle-plus,
tr.is-expanded .ma-item-toggle .ma-item-toggle-plus{ display:none; }

/* Undo the switch geometry for the round expand button */
.ma-item-toggle:has(.ma-item-toggle-plus){
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  border:1px solid var(--bdr, #E5E7EB);
  border-radius:50%;
  background:#fff;
  color:#64748B;
  cursor:pointer;
  flex-shrink:0;
  vertical-align:middle;
}
.ma-item-toggle:has(.ma-item-toggle-plus):hover{
  border-color:#93C5FD; color:#1D4ED8;
}
.ma-item-toggle:has(.ma-item-toggle-plus) svg{ width:15px; height:15px; display:block; }
html[data-theme="dark"] .ma-item-toggle:has(.ma-item-toggle-plus){
  background:#0F172A; border-color:#334155; color:#94A3B8;
}

/* ── Clipped first letter ───────────────────────────────────────── */
/* The name cell scrolls horizontally on narrow screens. Without any
   inline start padding the first glyph sat hard against the clipping
   edge, so tapping the row — which shifts focus and nudges the scroll
   position — sheared off the first character or two. */
@media (max-width:760px){
  .ma-list-tbl td.ma-list-invno,
  .ma-list-tbl td.ma-list-name,
  .ma-item-row td:first-child{
    padding-left:10px;
    text-indent:0;
  }
  .ma-list-tbl td.ma-list-invno > span,
  .ma-list-tbl td.ma-list-name > span{
    display:inline-block;
    max-width:100%;
    padding-left:1px;          /* keeps the glyph off the clip edge */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
  }
  /* Tapping must not scroll the cell and hide the start of the name */
  .ma-list-tbl td.ma-list-invno,
  .ma-list-tbl td.ma-list-name{
    overflow:hidden;
    scroll-padding-left:10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.610 — One circle, and the name stops being clipped
   ──────────────────────────────────────────────────────────────────────
   There was only ever ONE button in the row — I checked, it is emitted
   once. What looked like two circles was the browser's default focus
   ring sitting outside the button's own border: two concentric rings
   around a single plus. Replaced with an inset ring that reads as the
   same circle highlighted.

   The clipped name had the same root cause. Tapping moved focus, the
   browser scrolled the row into view, and the name cell — which can
   scroll horizontally — shifted, hiding its first characters. Focus is
   now taken with preventScroll, and the cell is pinned so it cannot
   scroll at all.
════════════════════════════════════════════════════════════════════════ */

/* One circle only — no outer ring */
.ma-item-toggle:has(.ma-item-toggle-plus):focus,
.ma-item-toggle:has(.ma-item-toggle-plus):focus-visible,
.ma-item-toggle:has(.ma-item-toggle-plus):active{
  outline:none !important;
  box-shadow:none !important;
  border-color:#1D4ED8;
  color:#1D4ED8;
  background:#EFF6FF;
}
/* Keyboard users still get a visible state, drawn INSIDE the circle */
.ma-item-toggle:has(.ma-item-toggle-plus):focus-visible{
  box-shadow:inset 0 0 0 2px rgba(29,78,216,.35) !important;
}
/* Safari/iOS add their own tap highlight ring */
.ma-item-toggle:has(.ma-item-toggle-plus){
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}

/* The name cell must never scroll — ellipsis instead of a shifted view */
.ma-list-tbl td.ma-list-invno,
.ma-list-tbl td.ma-list-name{
  overflow:hidden !important;
  overflow-x:hidden !important;
  text-overflow:ellipsis;
  scroll-behavior:auto;
}
.ma-item-row td{ scroll-margin-left:0; }
/* Rows are focus targets; stop them scrolling their own content */
.ma-item-row:focus,
.ma-item-row:focus-within{ scroll-snap-align:none; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.611 — TOAST MOTION
   ──────────────────────────────────────────────────────────────────────
   Entrance slides in from the right and settles with a small overshoot,
   the icon badge pops a beat later, and a countdown bar shows how long
   is left. Exit slides back out and collapses the gap so the stack
   closes up instead of jumping.

   Everything is driven by two custom properties set in JS: --rb-life
   (the toast's lifetime) and --rb-delay (stagger when several arrive
   at once).
════════════════════════════════════════════════════════════════════════ */

.rb-toast{
  /* Overridden below by the keyframes; kept so a toast is never
     visible before its animation starts. */
  opacity:0;
  will-change:transform, opacity;
}

@keyframes rbToastIn{
  0%   { opacity:0; transform:translate3d(120%,0,0) scale(.96); }
  60%  { opacity:1; transform:translate3d(-8px,0,0)  scale(1.01); }
  80%  {            transform:translate3d(3px,0,0)   scale(.998); }
  100% { opacity:1; transform:translate3d(0,0,0)     scale(1); }
}
@keyframes rbToastOut{
  0%   { opacity:1; transform:translate3d(0,0,0) scale(1);
         max-height:240px; margin-bottom:10px; }
  100% { opacity:0; transform:translate3d(120%,0,0) scale(.96);
         max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
}
@keyframes rbIcoPop{
  0%   { transform:scale(0) rotate(-30deg); opacity:0; }
  55%  { transform:scale(1.18) rotate(4deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes rbTxtUp{
  0%   { opacity:0; transform:translateY(6px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes rbCountdown{
  0%   { transform:scaleX(1); }
  100% { transform:scaleX(0); }
}

/* ── Entrance ───────────────────────────────────────────────────── */
.rb-toast.rb-toast-on{
  animation:rbToastIn .46s cubic-bezier(.22,1.2,.36,1) var(--rb-delay, 0ms) both;
}
.rb-toast.rb-toast-on .rb-toast-ico{
  animation:rbIcoPop .42s cubic-bezier(.34,1.56,.64,1)
            calc(var(--rb-delay, 0ms) + 140ms) both;
}
.rb-toast.rb-toast-on .rb-toast-txt b{
  animation:rbTxtUp .34s ease calc(var(--rb-delay, 0ms) + 180ms) both;
}
.rb-toast.rb-toast-on .rb-toast-txt i{
  animation:rbTxtUp .34s ease calc(var(--rb-delay, 0ms) + 240ms) both;
}

/* ── Exit ───────────────────────────────────────────────────────── */
.rb-toast.rb-toast-out{
  animation:rbToastOut .3s cubic-bezier(.4,0,1,.6) both !important;
  overflow:hidden !important;
  pointer-events:none;
}

/* ── Countdown bar ──────────────────────────────────────────────── */
.rb-toast-timed::before{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  border-radius:0 0 18px 18px;
  background:currentColor;
  opacity:.26;
  transform-origin:left center;
  animation:rbCountdown var(--rb-life, 3500ms) linear
            calc(var(--rb-delay, 0ms) + 120ms) both;
}
/* Hovering holds the toast open, so the bar holds too */
.rb-toast-hold::before{ animation-play-state:paused; }
.rb-toast-out::before{ display:none; }
.rb-toast{ position:relative; }

/* ── Respect a reduced-motion preference ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .rb-toast.rb-toast-on,
  .rb-toast.rb-toast-on .rb-toast-ico,
  .rb-toast.rb-toast-on .rb-toast-txt b,
  .rb-toast.rb-toast-on .rb-toast-txt i{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .rb-toast.rb-toast-out{ animation:none !important; opacity:0 !important; }
  .rb-toast-timed::before{ animation:none !important; transform:scaleX(0); }
}

/* Phones: come up from the bottom instead of in from the side */
@media (max-width:560px){
  @keyframes rbToastIn{
    0%   { opacity:0; transform:translate3d(0,-90%,0) scale(.96); }
    65%  { opacity:1; transform:translate3d(0,4px,0)  scale(1.01); }
    100% { opacity:1; transform:translate3d(0,0,0)    scale(1); }
  }
  @keyframes rbToastOut{
    0%   { opacity:1; transform:translate3d(0,0,0) scale(1); max-height:240px; }
    100% { opacity:0; transform:translate3d(0,-80%,0) scale(.96);
           max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.613 — Total Sale · State-wise in dark mode
   ──────────────────────────────────────────────────────────────────────
   The map had no dark-mode rules at all. Three things broke:

   1. States with no sales were filled #d4d4d4 from JS, so on the dark
      dashboard they glowed BRIGHTER than the states that had sales —
      the map read inverted. The colour now comes from --ma-map-empty
      below, so it follows the theme.

   2. The SVG's own paths carry fill="#e1ece9" as an attribute, which is
      what shows before the JS colours them and for any path the data
      doesn't cover.

   3. The state outlines were light, which on a dark card turned into a
      bright web of lines over the whole country.
════════════════════════════════════════════════════════════════════════ */
:root{ --ma-map-empty:#d4d4d4; }
html[data-theme="dark"]{ --ma-map-empty:#243041; }

/* Fallback fill on the raw SVG, before JS runs */
html[data-theme="dark"] #ind-map-svg path{
  fill:var(--ma-map-empty);
}
/* Outlines: dark enough to separate states without drawing attention */
html[data-theme="dark"] #ind-map-svg path{
  stroke:#0B1120;
  stroke-width:.6;
}
html[data-theme="dark"] #ind-map-svg path:hover{
  stroke:#93C5FD;
  stroke-width:1.1;
}

/* The stage sits directly on the card, so give it a subtle inset panel
   rather than leaving the map floating on the card colour. */
html[data-theme="dark"] .ma-map-stage{
  background:#0B1120;
  border:1px solid #1E293B;
  border-radius:12px;
  padding:10px 6px;
}

/* Tooltip: the light-mode green reads as a stray colour on dark */
html[data-theme="dark"] .ma-map-tip{
  background:#1E293B;
  color:#F1F5F9;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
html[data-theme="dark"] .ma-map-tip .v{ color:#7DD3FC; }

/* Zoom controls and mode pills */
html[data-theme="dark"] .ma-map-zoom{
  background:rgba(15,23,42,.82);
  border:1px solid #1E293B;
  border-radius:9px;
}
html[data-theme="dark"] .ma-map-zoom-btn{ color:#CBD5E1; }
html[data-theme="dark"] .ma-map-zoom-btn:hover{ background:#243041; color:#F1F5F9; }

/* Ranked list rows and legend */
html[data-theme="dark"] .ma-map-toprow{ border-bottom-color:#1E293B; }
html[data-theme="dark"] .ma-map-toprow .rank{ background:#1E293B; color:#93C5FD; }
html[data-theme="dark"] .ma-map-toprow .nm,
html[data-theme="dark"] .ma-map-toprow .amt{ color:#E2E8F0; }
html[data-theme="dark"] .ma-map-side-h{ color:#7A8699; }
html[data-theme="dark"] .ma-map-legend-ranged .rng{ color:#94A3B8; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.614 — State-wise side panels in dark mode
   ──────────────────────────────────────────────────────────────────────
   Last build styled the CONTENTS of the Sale legend and Top State list
   but not the cards holding them. `.ma-map-panel` hardcodes
   background:#ffffff with a light border, and `.ma-map-panel-h` a dark
   title and light dashed rule — so both cards stayed white with dark
   text while the dashboard around them was dark.

   These selectors are more specific than the originals and appear later,
   so they win without !important.
════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ma-map-panel{
  background:#0F172A;
  border-color:#1E293B;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
html[data-theme="dark"] .ma-map-panel-h{
  color:#F1F5F9;
  border-bottom-color:#2A3646;
}

/* Legend rows: dot keeps its data colour, the range text must lighten */
html[data-theme="dark"] .ma-map-panel .ma-map-legend-ranged .rng{
  color:#CBD5E1;
}
html[data-theme="dark"] .ma-map-panel .ma-map-legend-ranged .ma-lg-row{
  color:#CBD5E1;
}

/* Ranked list: numbered badge and row text */
html[data-theme="dark"] .ma-map-panel #ind-map-top,
html[data-theme="dark"] .ma-map-panel .ma-map-toprow{
  border-bottom-color:#1E293B;
}
html[data-theme="dark"] .ma-map-panel .ma-map-toprow .nm{ color:#E2E8F0; }
html[data-theme="dark"] .ma-map-panel .ma-map-toprow .amt{ color:#F1F5F9; }

/* "No data" text inside a panel */
html[data-theme="dark"] .ma-map-panel .ma-empty{ color:#7A8699; }

/* The side column itself, in case it carries its own fill */
html[data-theme="dark"] .ma-map-side{ background:transparent; }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.615 — Expense & Income / Payment Summary in dark mode
   ──────────────────────────────────────────────────────────────────────
   Both cards use the .ma-oc2 family. Most of it already had dark rules,
   but seven selectors still hardcoded light values — and one of them,
   .ma-oc2-cell, is the tile every figure sits in. With background
   #f9fafb it stayed near-white on the dark dashboard, so the cards
   looked like pale blocks with unreadable text.

   The status pill kept a light-blue tint with #0369a1 text, and the two
   segment colours were tuned for a white bar.
════════════════════════════════════════════════════════════════════════ */

/* The figure tiles — the main problem */
html[data-theme="dark"] .ma-oc2-cell{
  background:#131C2E;
  border:1px solid #1E293B;
}
html[data-theme="dark"] .ma-oc2-cell:hover{
  background:#18233A;
  border-color:#2A3A52;
}
html[data-theme="dark"] .ma-oc2-cell .ma-oc2-cell-k{ color:#8A97AB; }
html[data-theme="dark"] .ma-oc2-cell .ma-oc2-cell-v{ color:#F1F5F9; }

/* Status pill: keep the meaning, drop the light tint */
html[data-theme="dark"] .ma-oc2-status{
  background:rgba(148,163,184,.16);
  color:#CBD5E1;
}
html[data-theme="dark"] .ma-oc2-status.healthy{
  background:rgba(14,165,233,.20);
  color:#7DD3FC;
}
html[data-theme="dark"] .ma-oc2-status.watch{
  background:rgba(245,158,11,.20);
  color:#FCD34D;
}
html[data-theme="dark"] .ma-oc2-status.risk{
  background:rgba(244,63,94,.20);
  color:#FDA4AF;
}

/* Segmented bar: lift both tones so they separate on a dark track */
html[data-theme="dark"] .ma-oc2-seg-o1{ background:#FBBF24; }
html[data-theme="dark"] .ma-oc2-seg-o2{ background:#FB923C; }
html[data-theme="dark"] .ma-oc2-seg{ background:#1E293B; }

/* Card surface and header, in case the shared .ma-card rule is
   overridden by the more specific .ma-oc2 selectors */
html[data-theme="dark"] .ma-card.ma-oc2{
  background:#0F172A;
  border-color:#1E293B;
}
html[data-theme="dark"] .ma-oc2-hdr{ border-bottom-color:#1E293B; }
html[data-theme="dark"] .ma-oc2-title{ color:#F1F5F9; }
html[data-theme="dark"] .ma-oc2-sub{ color:#7A8699; }

/* Donut centre label and legend text */
html[data-theme="dark"] .ma-oc2-donut-amt{ color:#F1F5F9; }
html[data-theme="dark"] .ma-oc2-donut-lbl,
html[data-theme="dark"] .ma-oc2-legend{ color:#94A3B8; }

/* Tooltips shared with the trend charts */
html[data-theme="dark"] .ma-dash2-ei-tip-bar,
html[data-theme="dark"] .ma-dash2-tc-tip{
  background:#1E293B;
  border-color:#334155;
  color:#F1F5F9;
}
html[data-theme="dark"] .ma-dash2-tc-tip-h{
  border-bottom-color:#334155;
  color:#F1F5F9;
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.616 — E&I / Payment Summary: the pastel tiles
   ──────────────────────────────────────────────────────────────────────
   The cards themselves went dark in v3.9.615, but the tiles INSIDE them
   did not, which is why they still read as light blocks: Net Balance
   (#fef2f2), Income (#ecfdf5), Insight (#fffbeb), Received (#eff6ff),
   Pending (#fffbeb) and the icon/percentage chips.

   My previous audit missed these because it matched fills beginning
   with `f` — half of these start with `e` or `d`. Found this time by
   computing each fill's luminance instead of pattern-matching hex, and
   every selector below came out of that scan.

   Approach: each tile keeps its HUE so the colour coding still reads
   (red = expense, green = income, amber = pending), but as a low-alpha
   tint over the dark card rather than a pastel fill. Alpha is used
   rather than fixed hex so the tint sits correctly whatever the card
   colour behind it is.
════════════════════════════════════════════════════════════════════════ */

/* ── Expense & Income ───────────────────────────────────────────── */
html[data-theme="dark"] .ma-ei-netbal{
  background:rgba(244,63,94,.12);
  border-color:rgba(244,63,94,.28);
}
html[data-theme="dark"] .ma-ei-netbal-ico{ background:rgba(244,63,94,.20); }
html[data-theme="dark"] .ma-ei-netbal-v{ color:#FDA4AF; }
html[data-theme="dark"] .ma-ei-netbal-sub{ color:#94A3B8; }

html[data-theme="dark"] .ma-ei-prog-inc{
  background:rgba(16,185,129,.11);
  border-color:rgba(16,185,129,.26);
}
html[data-theme="dark"] .ma-ei-prog-exp{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.30);
}
/* Icon and percent chips: tint from the row's own accent */
html[data-theme="dark"] .ma-ei-prog-ico,
html[data-theme="dark"] .ma-ei-prog-pct{
  background:rgba(148,163,184,.18);
  color:#E2E8F0;
}
html[data-theme="dark"] .ma-ei-prog-inc .ma-ei-prog-ico,
html[data-theme="dark"] .ma-ei-prog-inc .ma-ei-prog-pct{
  background:rgba(16,185,129,.22); color:#6EE7B7;
}
html[data-theme="dark"] .ma-ei-prog-exp .ma-ei-prog-ico,
html[data-theme="dark"] .ma-ei-prog-exp .ma-ei-prog-pct{
  background:rgba(37,99,235,.26); color:#93C5FD;
}

html[data-theme="dark"] .ma-ei-trend-up{   background:rgba(16,185,129,.20); color:#6EE7B7; }
html[data-theme="dark"] .ma-ei-trend-down{ background:rgba(244,63,94,.20);  color:#FDA4AF; }
html[data-theme="dark"] .ma-ei-trend-flat{ background:rgba(148,163,184,.18); color:#CBD5E1; }
html[data-theme="dark"] .ma-ei-trend-ico{  background:rgba(139,92,246,.22); color:#C4B5FD; }
html[data-theme="dark"] .ma-ei-hero-toggle{
  background:#131C2E; border-color:#1E293B; color:#CBD5E1;
}

/* Insight strip */
html[data-theme="dark"] .ma-ei-insight,
html[data-theme="dark"] .ma-oc2-insight{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.28);
  color:#E2E8F0;
}
html[data-theme="dark"] .ma-ei-insight-ico,
html[data-theme="dark"] .ma-oc2-insight-ico{
  background:rgba(245,158,11,.24); color:#FCD34D;
}

/* ── Payment Summary ────────────────────────────────────────────── */
html[data-theme="dark"] .ma-pay-prog-rec{
  background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.30);
}
html[data-theme="dark"] .ma-pay-prog-pen{
  background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30);
}
html[data-theme="dark"] .ma-pay-prog-ovd{
  background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.30);
}
html[data-theme="dark"] .ma-pay-prog-ico,
html[data-theme="dark"] .ma-pay-prog-pct{
  background:rgba(148,163,184,.18); color:#E2E8F0;
}
html[data-theme="dark"] .ma-pay-prog-rec .ma-pay-prog-ico,
html[data-theme="dark"] .ma-pay-prog-rec .ma-pay-prog-pct{
  background:rgba(37,99,235,.26); color:#93C5FD;
}
html[data-theme="dark"] .ma-pay-prog-pen .ma-pay-prog-ico,
html[data-theme="dark"] .ma-pay-prog-pen .ma-pay-prog-pct{
  background:rgba(245,158,11,.24); color:#FCD34D;
}
html[data-theme="dark"] .ma-pay-prog-ovd .ma-pay-prog-ico,
html[data-theme="dark"] .ma-pay-prog-ovd .ma-pay-prog-pct{
  background:rgba(244,63,94,.24); color:#FDA4AF;
}
/* The amount inside a pending row was grey on pale yellow — unreadable */
html[data-theme="dark"] .ma-pay-prog-pen .ma-pay-prog-amt,
html[data-theme="dark"] .ma-pay-prog-pen .ma-pay-prog-lbl{ color:#FDE68A; }
html[data-theme="dark"] .ma-pay-prog-rec .ma-pay-prog-amt{ color:#BFDBFE; }
html[data-theme="dark"] .ma-pay-prog-ovd .ma-pay-prog-amt{ color:#FDA4AF; }

/* Bottom summary strip */
html[data-theme="dark"] .ma-pay-sum-ico-rec{ background:rgba(139,92,246,.22); color:#C4B5FD; }
html[data-theme="dark"] .ma-pay-sum-ico-pen{ background:rgba(245,158,11,.22); color:#FCD34D; }
html[data-theme="dark"] .ma-pay-sum-ico-ovd{ background:rgba(244,63,94,.22);  color:#FDA4AF; }
html[data-theme="dark"] .ma-pay-sum-trend-pill{
  background:rgba(148,163,184,.18); color:#CBD5E1;
}
html[data-theme="dark"] .ma-pay-sum-view-btn{
  background:rgba(139,92,246,.22); color:#C4B5FD; border-color:rgba(139,92,246,.36);
}
html[data-theme="dark"] .ma-pay-sum-view-btn:hover{ background:rgba(139,92,246,.32); }
html[data-theme="dark"] .ma-pay-donut-trend-ico{ background:rgba(139,92,246,.22); color:#C4B5FD; }
html[data-theme="dark"] .ma-pay-hero-toggle{
  background:#131C2E; border-color:#1E293B; color:#CBD5E1;
}

/* Progress tracks behind the bars */
html[data-theme="dark"] .ma-dash2-oc-bar,
html[data-theme="dark"] .ma-ei-prog-track,
html[data-theme="dark"] .ma-pay-prog-track{ background:rgba(148,163,184,.20); }

/* ══════════════════════════════════════════════════════════════════════
   v3.9.618 — Toasts in dark mode · Settings activity table
   ──────────────────────────────────────────────────────────────────────
   The pastel toast fills were designed against a white page. On the
   dark app they sat as pale washes with near-black text, and the app's
   own dark rules lighten inherited text — so the title ended up light
   on a light fill and almost vanished, which is what the screenshot
   shows.

   Dark mode now uses a deep tint of the same hue with light text, so
   the colour still identifies the type while the contrast is right.
════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .rb-toast{
  background:#141D2E !important;
  box-shadow:0 10px 30px rgba(0,0,0,.55) !important;
}
/* One tinted edge carries the type, instead of the whole card */
html[data-theme="dark"] .rb-toast{
  border-left:4px solid var(--rb-ink, #0EA05A) !important;
}
html[data-theme="dark"] .rb-toast-txt b{ color:#F4F7FB !important; }
html[data-theme="dark"] .rb-toast-txt i{ color:#A9B6C9 !important; opacity:1; }
html[data-theme="dark"] .rb-toast-x{ color:#A9B6C9 !important; opacity:.7; }
html[data-theme="dark"] .rb-toast-x:hover{
  opacity:1; background:rgba(255,255,255,.10) !important;
}
/* Icon circle: tinted disc rather than white, which glared */
html[data-theme="dark"] .rb-toast-ico{
  background:color-mix(in srgb, var(--rb-ink) 22%, #141D2E) !important;
  color:var(--rb-ink) !important;
  box-shadow:none !important;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  html[data-theme="dark"] .rb-toast-ico{ background:#1E293B !important; }
}
/* Countdown bar takes the type colour */
html[data-theme="dark"] .rb-toast-timed::before{
  background:var(--rb-ink, #0EA05A);
  opacity:.5;
}

/* ── Settings activity table ────────────────────────────────────── */
.ma-setact-tbl{ width:100%; }
.ma-setact-party{
  display:inline-block; margin-left:6px;
  font-size:11.5px; color:var(--muted);
}
.ma-setact-foot{ margin-top:10px; text-align:center; }
.ma-setact-more{
  padding:8px 18px;
  border:1px solid var(--bdr, #E5E7EB);
  border-radius:8px; background:#fff;
  font-family:inherit; font-size:13px; font-weight:600;
  color:#334155; cursor:pointer;
}
.ma-setact-more:hover{ background:#F8FAFC; }
html[data-theme="dark"] .ma-setact-more{
  background:#1E293B; border-color:#334155; color:#CBD5E1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.620 — MEGA MENU: never cut off at the bottom
   ────────────────────────────────────────────────────────────────────────────
   Cause: `body.ma-app-active #ma-shell` is `height:100vh; overflow:hidden`,
   and `.ma-subnav.ma-mega` is an absolutely-positioned child of the sticky tab
   bar with NO height cap. Two situations made the panel taller than the space
   left under the nav bar, so #ma-shell clipped its bottom edge and the last
   rows / promo button became unreachable:
     1. 1024–1300px widths — the 5-group Reports grid stepped down to 3–4
        columns, wrapping to 2 rows and nearly doubling the panel height.
     2. Short windows (small laptops, 125% browser zoom) — even a single-row
        panel ran past the viewport bottom.
   Fix, in three parts:
     • Cap the panel to the space actually available below the nav bar and let
       it scroll internally, so it can never be clipped again. The exact value
       lands in `--ma-mega-maxh` per-open from app.js (v3.9.620); the calc()
       fallback (58px topbar + 60px tab bar + 14px gap) covers pre-JS paint.
     • Hold the big menus on ONE row for as long as the width physically
       allows, so the wrap that caused the overflow stops happening.
     • Compact spacing on short viewports so most of the panel fits without
       needing the scroll at all.
   Colours, columns, icons, copy and open/close behaviour are untouched.
════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Height cap + internal scroll ──────────────────────────────────────── */
.ma-subnav.ma-mega{
  max-height: var(--ma-mega-maxh, calc(100vh - 132px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;      /* don't chain the scroll to the page */
  align-content: start;              /* keep rows packed at the top */
  scrollbar-gutter: stable;          /* reserve the track so text never shifts */
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
.ma-subnav.ma-mega::-webkit-scrollbar{ width:8px; }
.ma-subnav.ma-mega::-webkit-scrollbar-track{ background:transparent; }
.ma-subnav.ma-mega::-webkit-scrollbar-thumb{
  background:#CBD5E1; border-radius:4px;
  border:2px solid transparent; background-clip:padding-box;
}
.ma-subnav.ma-mega::-webkit-scrollbar-thumb:hover{
  background:#94A3B8; background-clip:padding-box;
}
html[data-theme="dark"] .ma-subnav.ma-mega{ scrollbar-color:#334155 transparent; }
html[data-theme="dark"] .ma-subnav.ma-mega::-webkit-scrollbar-thumb{
  background:#334155; background-clip:padding-box;
}
html[data-theme="dark"] .ma-subnav.ma-mega::-webkit-scrollbar-thumb:hover{
  background:#475569; background-clip:padding-box;
}

/* ── 2. Laptop widths: keep one row instead of wrapping to two ────────────── */
/* At 1025–1300px a 5-column grid still fits inside the panel's own width cap
   (5 × 160px + gaps + padding ≈ 900px), so there is no reason to step down to
   3–4 columns and pay for it with a second row's worth of height. */
@media (min-width:1025px) and (max-width:1300px){
  .ma-subnav.ma-mega.ma-mega-c5{ min-width:auto; }
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{
    grid-template-columns:repeat(5, minmax(160px, 1fr));
    gap:12px 14px;
  }
  .ma-subnav.ma-mega.ma-mega-c4{ min-width:auto; }
  .ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo){ grid-template-columns:1fr; }
  .ma-subnav.ma-mega.ma-mega-c4:has(.ma-mega-promo) .ma-mega-promo{ display:none; }
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{
    grid-template-columns:repeat(4, minmax(170px, 1fr));
    gap:14px 16px;
  }
  /* A long description in a 160px column wraps to 3–4 lines and is the other
     thing that inflates row height — hold it to two lines. */
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-desc,
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* ── 3. Short viewports: compact so the scroll is rarely needed ───────────── */
@media (max-height:780px){
  .ma-subnav.ma-mega{ padding:16px 18px 14px; gap:20px; }
  .ma-subnav.ma-mega .ma-mega-grid{ gap:12px 20px; }
  .ma-subnav.ma-mega .ma-subnav-lnk{ padding:7px 10px; }
  .ma-mega-colhdr{ padding-bottom:6px; margin-bottom:0; }
  .ma-subnav.ma-mega .ma-mega-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (max-height:640px){
  .ma-subnav.ma-mega{ padding:12px 14px; }
  .ma-subnav.ma-mega .ma-subnav-lnk{ padding:6px 9px; }
  .ma-subnav.ma-mega .ma-mega-desc{ -webkit-line-clamp:1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.620 — E-Way Bill feature switch
   `ma-ewb-off` is set on <html> by app.js from window.MA.ewaybill_enabled,
   which the admin controls at Billing Saathi -> E-Way Bill. One class hides
   every entry point, including the invoice action-menu items that are built
   in JS after page load.
════════════════════════════════════════════════════════════════════════════════ */
html.ma-ewb-off .ma-ewb-only,
html.ma-ewb-off #pg-ewaybill{ display:none !important; }


/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.620 — DARK MODE COVERAGE FOR THE REPORT PAGES
   ────────────────────────────────────────────────────────────────────────────
   The 27 report pages share one `sr-*` component vocabulary, but their rules
   are enumerated per page (`#pg-daybook .sr-card, #pg-ledger .sr-card, ...`),
   which scores (1,1,0). A plain `html[data-theme="dark"] .sr-card` scores
   (0,2,1) and loses, so the overrides below carry `!important` — the same
   approach the existing dark-theme layer already uses elsewhere in this file.

   Most report rules were already fine: `background:var(--surf, #fff)` themes
   correctly because the fallback is never reached. Only rules with BARE light
   values, or vars that are never defined, actually broke. Those are fixed here.
════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Variables used but never defined anywhere in the stylesheet ────────
      `var(--bg, #f9fafb)` etc. always fell through to the light fallback,
      even in dark mode. Defined for dark only; light keeps its fallbacks. */
html[data-theme="dark"]{
  --bg:#0F172A;
  --bg2:#1E293B;
  --border:#334155;
  --surface:#1E293B;
}

/* ── 2. Brand-dark used as TEXT ───────────────────────────────────────────
      --brand-dd (#1E40AF) is intentionally a dark BACKGROUND for other dark
      rules (.ma-pay-pill.cash etc), so it must not be redefined globally.
      Where it is used as a text colour it is unreadable on dark slate, so
      only those elements are lifted to a legible blue. */
html[data-theme="dark"] .sr-report-title,
html[data-theme="dark"] .sr-a-email,
html[data-theme="dark"] .sr-a-email svg,
html[data-theme="dark"] .gstr1-tab,
html[data-theme="dark"] .ma-clr-chk,
html[data-theme="dark"] .ma-hsn-c,
html[data-theme="dark"] .ma-hsn-td-c{
  color:#93C5FD !important;
}

/* ── 3. Form controls inside report cards ────────────────────────────────
      Native inputs default to black text; on a dark field that is invisible.
      The date picker's glyph is a browser-drawn black icon, so it needs
      inverting rather than recolouring. */
html[data-theme="dark"] .sr-card input,
html[data-theme="dark"] .sr-card select,
html[data-theme="dark"] .sr-card textarea,
html[data-theme="dark"] .sr-fg input,
html[data-theme="dark"] .sr-fg select,
html[data-theme="dark"] .sr-combo-inp-row input,
html[data-theme="dark"] .sr-chip-field input{
  color:var(--text) !important;
  background:var(--surf2) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] .sr-card input::placeholder,
html[data-theme="dark"] .sr-fg input::placeholder{ color:var(--hint) !important; }

/* ── 4. Panels and buttons that hard-coded a light grey fill ─────────────── */
html[data-theme="dark"] .sr-cust-chips,
html[data-theme="dark"] .sr-mobile-btn,
html[data-theme="dark"] .sr-hdr-btn,
html[data-theme="dark"] .sr-btn-reset,
html[data-theme="dark"] .sr-save-cust,
html[data-theme="dark"] .sr-cust-selall{
  background:var(--surf2) !important;
  border-color:var(--bdr) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .sr-mobile-btn:hover,
html[data-theme="dark"] .sr-hdr-btn:hover,
html[data-theme="dark"] .sr-btn-reset:hover,
html[data-theme="dark"] .sr-cust-selall:hover,
html[data-theme="dark"] .sr-cust-item:hover,
html[data-theme="dark"] .sr-prod-item:hover,
html[data-theme="dark"] .sr-txntype-item:hover{
  background:var(--surf3) !important;
}

/* ── 5. Stray light bits ─────────────────────────────────────────────────── */
html[data-theme="dark"] .str-sep{ background:var(--bdr) !important; }
html[data-theme="dark"] .str-flags-vertical label{ color:var(--text) !important; }
html[data-theme="dark"] .sr-cust-city{ color:var(--muted) !important; }
html[data-theme="dark"] .sr-st-deliv,
html[data-theme="dark"] .sr-pr-low{
  background:var(--surf3) !important;
  color:var(--muted) !important;
}
/* Buttons with no class fall back to the browser's light chrome */
html[data-theme="dark"] #pg-gstr2b button:not([class]),
html[data-theme="dark"] #pg-gstr1 button:not([class]){
  background:var(--surf3) !important;
  color:var(--text) !important;
  border:1px solid var(--bdr) !important;
}

/* ── 6. GSTR-3B colour-coded summary tables ──────────────────────────────
      These encode meaning by hue (3.1 orange, 4 navy, 5.1 purple, 3.2 green),
      so they are not flattened to grey. Each pastel fill is mapped to the
      same hue at ~20% lightness and each dark ink to ~78%, preserving the
      colour coding while making it legible on a dark page. */
html[data-theme="dark"] #pg-sales-report .sr-hdr-btn, html[data-theme="dark"] #pg-notifications .sr-hdr-btn, html[data-theme="dark"] #pg-gstr3b .sr-hdr-btn, html[data-theme="dark"] #pg-gstr2b .sr-hdr-btn, html[data-theme="dark"] #pg-gstr1 .sr-hdr-btn, html[data-theme="dark"] #pg-customer-wise-pl .sr-hdr-btn, html[data-theme="dark"] #pg-bill-pl .sr-hdr-btn, html[data-theme="dark"] #pg-day-wise-pl .sr-hdr-btn, html[data-theme="dark"] #pg-daybook .sr-hdr-btn, html[data-theme="dark"] #pg-stock-report .sr-hdr-btn, html[data-theme="dark"] #pg-manufacture-report .sr-hdr-btn, html[data-theme="dark"] #pg-product-report .sr-hdr-btn, html[data-theme="dark"] #pg-company-outstanding-report .sr-hdr-btn, html[data-theme="dark"] #pg-other-document-product-report .sr-hdr-btn, html[data-theme="dark"] #pg-other-document-report .sr-hdr-btn, html[data-theme="dark"] #pg-outward-payment-report .sr-hdr-btn, html[data-theme="dark"] #pg-other-income-report .sr-hdr-btn, html[data-theme="dark"] #pg-product-wise-pl .sr-hdr-btn, html[data-theme="dark"] #pg-daily-expenses-report .sr-hdr-btn, html[data-theme="dark"] #pg-inward-payment-report .sr-hdr-btn, html[data-theme="dark"] #pg-purchase-product-report .sr-hdr-btn, html[data-theme="dark"] #pg-sale-product-report .sr-hdr-btn, html[data-theme="dark"] #pg-sale-outstanding .sr-hdr-btn, html[data-theme="dark"] #pg-purchase-outstanding .sr-hdr-btn, html[data-theme="dark"] #pg-purchase-report .pr-hdr-btn{ background:#29333D; }
html[data-theme="dark"] #pg-sales-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-notifications .sr-hdr-btn:hover, html[data-theme="dark"] #pg-gstr3b .sr-hdr-btn:hover, html[data-theme="dark"] #pg-gstr2b .sr-hdr-btn:hover, html[data-theme="dark"] #pg-gstr1 .sr-hdr-btn:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-hdr-btn:hover, html[data-theme="dark"] #pg-bill-pl .sr-hdr-btn:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-hdr-btn:hover, html[data-theme="dark"] #pg-daybook .sr-hdr-btn:hover, html[data-theme="dark"] #pg-stock-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-manufacture-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-product-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-other-document-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-other-income-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-hdr-btn:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-sale-product-report .sr-hdr-btn:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-hdr-btn:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-hdr-btn:hover, html[data-theme="dark"] #pg-purchase-report .pr-hdr-btn:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-notifications .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr3b .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr2b .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr1 .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-bill-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daybook .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-stock-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-manufacture-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-income-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-report .pr-prod-drop .pr-prod-item:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-notifications .sr-cust-selall:hover, html[data-theme="dark"] #pg-gstr3b .sr-cust-selall:hover, html[data-theme="dark"] #pg-gstr2b .sr-cust-selall:hover, html[data-theme="dark"] #pg-gstr1 .sr-cust-selall:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-selall:hover, html[data-theme="dark"] #pg-bill-pl .sr-cust-selall:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-cust-selall:hover, html[data-theme="dark"] #pg-daybook .sr-cust-selall:hover, html[data-theme="dark"] #pg-stock-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-manufacture-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-product-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-other-document-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-other-income-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-selall:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-sale-product-report .sr-cust-selall:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-cust-selall:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-selall:hover, html[data-theme="dark"] #pg-purchase-report .pr-cust-selall:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-cust-chips, html[data-theme="dark"] #pg-notifications .sr-cust-chips, html[data-theme="dark"] #pg-gstr3b .sr-cust-chips, html[data-theme="dark"] #pg-gstr2b .sr-cust-chips, html[data-theme="dark"] #pg-gstr1 .sr-cust-chips, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-chips, html[data-theme="dark"] #pg-bill-pl .sr-cust-chips, html[data-theme="dark"] #pg-day-wise-pl .sr-cust-chips, html[data-theme="dark"] #pg-daybook .sr-cust-chips, html[data-theme="dark"] #pg-stock-report .sr-cust-chips, html[data-theme="dark"] #pg-manufacture-report .sr-cust-chips, html[data-theme="dark"] #pg-product-report .sr-cust-chips, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-chips, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-chips, html[data-theme="dark"] #pg-other-document-report .sr-cust-chips, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-chips, html[data-theme="dark"] #pg-other-income-report .sr-cust-chips, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-chips, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-chips, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-chips, html[data-theme="dark"] #pg-purchase-product-report .sr-cust-chips, html[data-theme="dark"] #pg-sale-product-report .sr-cust-chips, html[data-theme="dark"] #pg-sale-outstanding .sr-cust-chips, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-chips, html[data-theme="dark"] #pg-purchase-report .pr-cust-chips{ background:#29333D; }
html[data-theme="dark"] #pg-sales-report .sr-mobile-btn, html[data-theme="dark"] #pg-notifications .sr-mobile-btn, html[data-theme="dark"] #pg-gstr3b .sr-mobile-btn, html[data-theme="dark"] #pg-gstr2b .sr-mobile-btn, html[data-theme="dark"] #pg-gstr1 .sr-mobile-btn, html[data-theme="dark"] #pg-customer-wise-pl .sr-mobile-btn, html[data-theme="dark"] #pg-bill-pl .sr-mobile-btn, html[data-theme="dark"] #pg-day-wise-pl .sr-mobile-btn, html[data-theme="dark"] #pg-daybook .sr-mobile-btn, html[data-theme="dark"] #pg-stock-report .sr-mobile-btn, html[data-theme="dark"] #pg-manufacture-report .sr-mobile-btn, html[data-theme="dark"] #pg-product-report .sr-mobile-btn, html[data-theme="dark"] #pg-company-outstanding-report .sr-mobile-btn, html[data-theme="dark"] #pg-other-document-product-report .sr-mobile-btn, html[data-theme="dark"] #pg-other-document-report .sr-mobile-btn, html[data-theme="dark"] #pg-outward-payment-report .sr-mobile-btn, html[data-theme="dark"] #pg-other-income-report .sr-mobile-btn, html[data-theme="dark"] #pg-product-wise-pl .sr-mobile-btn, html[data-theme="dark"] #pg-daily-expenses-report .sr-mobile-btn, html[data-theme="dark"] #pg-inward-payment-report .sr-mobile-btn, html[data-theme="dark"] #pg-purchase-product-report .sr-mobile-btn, html[data-theme="dark"] #pg-sale-product-report .sr-mobile-btn, html[data-theme="dark"] #pg-sale-outstanding .sr-mobile-btn, html[data-theme="dark"] #pg-purchase-outstanding .sr-mobile-btn, html[data-theme="dark"] #pg-purchase-report .pr-mobile-btn{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-save-cust, html[data-theme="dark"] #pg-notifications .sr-save-cust, html[data-theme="dark"] #pg-gstr3b .sr-save-cust, html[data-theme="dark"] #pg-gstr2b .sr-save-cust, html[data-theme="dark"] #pg-gstr1 .sr-save-cust, html[data-theme="dark"] #pg-customer-wise-pl .sr-save-cust, html[data-theme="dark"] #pg-bill-pl .sr-save-cust, html[data-theme="dark"] #pg-day-wise-pl .sr-save-cust, html[data-theme="dark"] #pg-daybook .sr-save-cust, html[data-theme="dark"] #pg-stock-report .sr-save-cust, html[data-theme="dark"] #pg-manufacture-report .sr-save-cust, html[data-theme="dark"] #pg-product-report .sr-save-cust, html[data-theme="dark"] #pg-company-outstanding-report .sr-save-cust, html[data-theme="dark"] #pg-other-document-product-report .sr-save-cust, html[data-theme="dark"] #pg-other-document-report .sr-save-cust, html[data-theme="dark"] #pg-outward-payment-report .sr-save-cust, html[data-theme="dark"] #pg-other-income-report .sr-save-cust, html[data-theme="dark"] #pg-product-wise-pl .sr-save-cust, html[data-theme="dark"] #pg-daily-expenses-report .sr-save-cust, html[data-theme="dark"] #pg-inward-payment-report .sr-save-cust, html[data-theme="dark"] #pg-purchase-product-report .sr-save-cust, html[data-theme="dark"] #pg-sale-product-report .sr-save-cust, html[data-theme="dark"] #pg-sale-outstanding .sr-save-cust, html[data-theme="dark"] #pg-purchase-outstanding .sr-save-cust, html[data-theme="dark"] #pg-purchase-report .pr-save-cust{ background:#29333D; }
html[data-theme="dark"] #pg-sales-report .sr-btn-reset, html[data-theme="dark"] #pg-notifications .sr-btn-reset, html[data-theme="dark"] #pg-gstr3b .sr-btn-reset, html[data-theme="dark"] #pg-gstr2b .sr-btn-reset, html[data-theme="dark"] #pg-gstr1 .sr-btn-reset, html[data-theme="dark"] #pg-customer-wise-pl .sr-btn-reset, html[data-theme="dark"] #pg-bill-pl .sr-btn-reset, html[data-theme="dark"] #pg-day-wise-pl .sr-btn-reset, html[data-theme="dark"] #pg-daybook .sr-btn-reset, html[data-theme="dark"] #pg-stock-report .sr-btn-reset, html[data-theme="dark"] #pg-manufacture-report .sr-btn-reset, html[data-theme="dark"] #pg-product-report .sr-btn-reset, html[data-theme="dark"] #pg-company-outstanding-report .sr-btn-reset, html[data-theme="dark"] #pg-other-document-product-report .sr-btn-reset, html[data-theme="dark"] #pg-other-document-report .sr-btn-reset, html[data-theme="dark"] #pg-outward-payment-report .sr-btn-reset, html[data-theme="dark"] #pg-other-income-report .sr-btn-reset, html[data-theme="dark"] #pg-product-wise-pl .sr-btn-reset, html[data-theme="dark"] #pg-daily-expenses-report .sr-btn-reset, html[data-theme="dark"] #pg-inward-payment-report .sr-btn-reset, html[data-theme="dark"] #pg-purchase-product-report .sr-btn-reset, html[data-theme="dark"] #pg-sale-product-report .sr-btn-reset, html[data-theme="dark"] #pg-sale-outstanding .sr-btn-reset, html[data-theme="dark"] #pg-purchase-outstanding .sr-btn-reset, html[data-theme="dark"] #pg-purchase-report .pr-btn-reset{ background:#29333D; }
html[data-theme="dark"] #pg-sales-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-notifications .sr-btn-reset:hover, html[data-theme="dark"] #pg-gstr3b .sr-btn-reset:hover, html[data-theme="dark"] #pg-gstr2b .sr-btn-reset:hover, html[data-theme="dark"] #pg-gstr1 .sr-btn-reset:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-btn-reset:hover, html[data-theme="dark"] #pg-bill-pl .sr-btn-reset:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-btn-reset:hover, html[data-theme="dark"] #pg-daybook .sr-btn-reset:hover, html[data-theme="dark"] #pg-stock-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-manufacture-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-product-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-other-document-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-other-income-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-btn-reset:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-sale-product-report .sr-btn-reset:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-btn-reset:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-btn-reset:hover, html[data-theme="dark"] #pg-purchase-report .pr-btn-reset:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-notifications .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-gstr3b .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-gstr2b .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-gstr1 .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-bill-pl .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-daybook .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-stock-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-manufacture-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-product-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-other-document-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-other-income-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-sale-product-report .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-combo-drop .sr-cust-item:hover, html[data-theme="dark"] #pg-purchase-report .pr-combo-drop .pr-cust-item:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sales-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-notifications .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr3b .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr2b .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr1 .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-bill-pl .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daybook .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-stock-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-manufacture-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-income-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-product-report .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-combo-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-report .pr-combo-drop .pr-prod-item:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-notifications .sr-cust-reset:hover, html[data-theme="dark"] #pg-gstr3b .sr-cust-reset:hover, html[data-theme="dark"] #pg-gstr2b .sr-cust-reset:hover, html[data-theme="dark"] #pg-gstr1 .sr-cust-reset:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-reset:hover, html[data-theme="dark"] #pg-bill-pl .sr-cust-reset:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-cust-reset:hover, html[data-theme="dark"] #pg-daybook .sr-cust-reset:hover, html[data-theme="dark"] #pg-stock-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-manufacture-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-product-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-other-document-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-other-income-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-reset:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-sale-product-report .sr-cust-reset:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-cust-reset:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-reset:hover, html[data-theme="dark"] #pg-purchase-report .pr-cust-reset:hover{ background:#645102; }
html[data-theme="dark"] #pg-sales-report .sr-cust-reset:active, html[data-theme="dark"] #pg-notifications .sr-cust-reset:active, html[data-theme="dark"] #pg-gstr3b .sr-cust-reset:active, html[data-theme="dark"] #pg-gstr2b .sr-cust-reset:active, html[data-theme="dark"] #pg-gstr1 .sr-cust-reset:active, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-reset:active, html[data-theme="dark"] #pg-bill-pl .sr-cust-reset:active, html[data-theme="dark"] #pg-day-wise-pl .sr-cust-reset:active, html[data-theme="dark"] #pg-daybook .sr-cust-reset:active, html[data-theme="dark"] #pg-stock-report .sr-cust-reset:active, html[data-theme="dark"] #pg-manufacture-report .sr-cust-reset:active, html[data-theme="dark"] #pg-product-report .sr-cust-reset:active, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-reset:active, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-reset:active, html[data-theme="dark"] #pg-other-document-report .sr-cust-reset:active, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-reset:active, html[data-theme="dark"] #pg-other-income-report .sr-cust-reset:active, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-reset:active, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-reset:active, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-reset:active, html[data-theme="dark"] #pg-purchase-product-report .sr-cust-reset:active, html[data-theme="dark"] #pg-sale-product-report .sr-cust-reset:active, html[data-theme="dark"] #pg-sale-outstanding .sr-cust-reset:active, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-reset:active, html[data-theme="dark"] #pg-purchase-report .pr-cust-reset:active{ background:#644D02; }
html[data-theme="dark"] #pg-sales-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-notifications .sr-txntype-item:hover, html[data-theme="dark"] #pg-gstr3b .sr-txntype-item:hover, html[data-theme="dark"] #pg-gstr2b .sr-txntype-item:hover, html[data-theme="dark"] #pg-gstr1 .sr-txntype-item:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-txntype-item:hover, html[data-theme="dark"] #pg-bill-pl .sr-txntype-item:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-txntype-item:hover, html[data-theme="dark"] #pg-daybook .sr-txntype-item:hover, html[data-theme="dark"] #pg-stock-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-manufacture-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-product-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-other-document-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-other-income-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-txntype-item:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-sale-product-report .sr-txntype-item:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-txntype-item:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-txntype-item:hover, html[data-theme="dark"] #pg-purchase-report .pr-txntype-item:hover{ background:#2C313A; }
html[data-theme="dark"] #pg-sales-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-notifications .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr3b .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr2b .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-gstr1 .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-bill-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daybook .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-stock-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-manufacture-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-document-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-other-income-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-product-report .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-prod-drop .sr-prod-item:hover, html[data-theme="dark"] #pg-purchase-report .pr-prod-drop .pr-prod-item:hover{ background:#2C313A; }
html[data-theme="dark"] /* ── Deselect All button ──────────────────────────────── */ #pg-day-wise-pl .sr-cust-desall, html[data-theme="dark"] #pg-sales-report .sr-cust-desall, html[data-theme="dark"] #pg-notifications .sr-cust-desall, html[data-theme="dark"] #pg-gstr3b .sr-cust-desall, html[data-theme="dark"] #pg-gstr2b .sr-cust-desall, html[data-theme="dark"] #pg-gstr1 .sr-cust-desall, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-desall, html[data-theme="dark"] #pg-bill-pl .sr-cust-desall, html[data-theme="dark"] /* ── Deselect All button ──────────────────────────────── */ #pg-daybook .sr-cust-desall, html[data-theme="dark"] #pg-stock-report .sr-cust-desall, html[data-theme="dark"] #pg-manufacture-report .sr-cust-desall, html[data-theme="dark"] #pg-product-report .sr-cust-desall, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-desall, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-desall, html[data-theme="dark"] #pg-other-document-report .sr-cust-desall, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-desall, html[data-theme="dark"] #pg-other-income-report .sr-cust-desall, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-desall, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-desall, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-desall, html[data-theme="dark"] /* ── Deselect All button ──────────────────────────────── */ #pg-purchase-product-report .sr-cust-desall, html[data-theme="dark"] #pg-sale-product-report .sr-cust-desall, html[data-theme="dark"] /* ── Deselect All button ──────────────────────────────── */ #pg-sale-outstanding .sr-cust-desall, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-desall, html[data-theme="dark"] #pg-purchase-report .pr-cust-desall{ background:#5F0707; color:#EBA2A2; }
html[data-theme="dark"] #pg-sales-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-notifications .sr-cust-desall:hover, html[data-theme="dark"] #pg-gstr3b .sr-cust-desall:hover, html[data-theme="dark"] #pg-gstr2b .sr-cust-desall:hover, html[data-theme="dark"] #pg-gstr1 .sr-cust-desall:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-desall:hover, html[data-theme="dark"] #pg-bill-pl .sr-cust-desall:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-cust-desall:hover, html[data-theme="dark"] #pg-daybook .sr-cust-desall:hover, html[data-theme="dark"] #pg-stock-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-manufacture-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-product-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-other-document-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-other-income-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-cust-desall:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-sale-product-report .sr-cust-desall:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-cust-desall:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-desall:hover, html[data-theme="dark"] #pg-purchase-report .pr-cust-desall:hover{ background:#630303; }
html[data-theme="dark"] #pg-sales-report .sr-print-clone, html[data-theme="dark"] #pg-notifications .sr-print-clone, html[data-theme="dark"] #pg-gstr3b .sr-print-clone, html[data-theme="dark"] #pg-gstr2b .sr-print-clone, html[data-theme="dark"] #pg-gstr1 .sr-print-clone, html[data-theme="dark"] #pg-customer-wise-pl .sr-print-clone, html[data-theme="dark"] #pg-bill-pl .sr-print-clone, html[data-theme="dark"] #pg-day-wise-pl .sr-print-clone, html[data-theme="dark"] #pg-daybook .sr-print-clone, html[data-theme="dark"] #pg-stock-report .sr-print-clone, html[data-theme="dark"] #pg-manufacture-report .sr-print-clone, html[data-theme="dark"] #pg-product-report .sr-print-clone, html[data-theme="dark"] #pg-company-outstanding-report .sr-print-clone, html[data-theme="dark"] #pg-other-document-product-report .sr-print-clone, html[data-theme="dark"] #pg-other-document-report .sr-print-clone, html[data-theme="dark"] #pg-outward-payment-report .sr-print-clone, html[data-theme="dark"] #pg-other-income-report .sr-print-clone, html[data-theme="dark"] #pg-product-wise-pl .sr-print-clone, html[data-theme="dark"] #pg-daily-expenses-report .sr-print-clone, html[data-theme="dark"] #pg-inward-payment-report .sr-print-clone, html[data-theme="dark"] #pg-purchase-product-report .sr-print-clone, html[data-theme="dark"] #pg-sale-product-report .sr-print-clone, html[data-theme="dark"] #pg-sale-outstanding .sr-print-clone, html[data-theme="dark"] #pg-purchase-outstanding .sr-print-clone, html[data-theme="dark"] #pg-purchase-report .pr-print-clone{ color:#EBA2A2; }
html[data-theme="dark"] #pg-sales-report .sr-print-clone thead th, html[data-theme="dark"] #pg-notifications .sr-print-clone thead th, html[data-theme="dark"] #pg-gstr3b .sr-print-clone thead th, html[data-theme="dark"] #pg-gstr2b .sr-print-clone thead th, html[data-theme="dark"] #pg-gstr1 .sr-print-clone thead th, html[data-theme="dark"] #pg-customer-wise-pl .sr-print-clone thead th, html[data-theme="dark"] #pg-bill-pl .sr-print-clone thead th, html[data-theme="dark"] #pg-day-wise-pl .sr-print-clone thead th, html[data-theme="dark"] #pg-daybook .sr-print-clone thead th, html[data-theme="dark"] #pg-stock-report .sr-print-clone thead th, html[data-theme="dark"] #pg-manufacture-report .sr-print-clone thead th, html[data-theme="dark"] #pg-product-report .sr-print-clone thead th, html[data-theme="dark"] #pg-company-outstanding-report .sr-print-clone thead th, html[data-theme="dark"] #pg-other-document-product-report .sr-print-clone thead th, html[data-theme="dark"] #pg-other-document-report .sr-print-clone thead th, html[data-theme="dark"] #pg-outward-payment-report .sr-print-clone thead th, html[data-theme="dark"] #pg-other-income-report .sr-print-clone thead th, html[data-theme="dark"] #pg-product-wise-pl .sr-print-clone thead th, html[data-theme="dark"] #pg-daily-expenses-report .sr-print-clone thead th, html[data-theme="dark"] #pg-inward-payment-report .sr-print-clone thead th, html[data-theme="dark"] #pg-purchase-product-report .sr-print-clone thead th, html[data-theme="dark"] #pg-sale-product-report .sr-print-clone thead th, html[data-theme="dark"] #pg-sale-outstanding .sr-print-clone thead th, html[data-theme="dark"] #pg-purchase-outstanding .sr-print-clone thead th, html[data-theme="dark"] #pg-purchase-report .pr-print-clone thead th{ background:#333333; }
html[data-theme="dark"] #pg-sales-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-notifications .sr-mobile-btn:hover, html[data-theme="dark"] #pg-gstr3b .sr-mobile-btn:hover, html[data-theme="dark"] #pg-gstr2b .sr-mobile-btn:hover, html[data-theme="dark"] #pg-gstr1 .sr-mobile-btn:hover, html[data-theme="dark"] #pg-customer-wise-pl .sr-mobile-btn:hover, html[data-theme="dark"] #pg-bill-pl .sr-mobile-btn:hover, html[data-theme="dark"] #pg-day-wise-pl .sr-mobile-btn:hover, html[data-theme="dark"] #pg-daybook .sr-mobile-btn:hover, html[data-theme="dark"] #pg-stock-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-manufacture-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-product-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-company-outstanding-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-other-document-product-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-other-document-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-outward-payment-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-other-income-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-product-wise-pl .sr-mobile-btn:hover, html[data-theme="dark"] #pg-daily-expenses-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-inward-payment-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-purchase-product-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-sale-product-report .sr-mobile-btn:hover, html[data-theme="dark"] #pg-sale-outstanding .sr-mobile-btn:hover, html[data-theme="dark"] #pg-purchase-outstanding .sr-mobile-btn:hover, html[data-theme="dark"] #pg-purchase-report .pr-mobile-btn:hover{ background:#29333D; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-31 .g3b-cols{ background:#653401; color:#EBB5A2; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-31 .g3b-nums{ background:#653701; color:#EBB5A2; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-31 tbody tr{ background:#663900; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-31 tbody tr:nth-child(even){ background:#663A00; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-4 .g3b-net-row td{ background:#021564; }
html[data-theme="dark"] /* ── 5 YELLOW ── */ #pg-gstr3b .g3b-tbl-5 .g3b-title{ background:#645002; color:#EBBDA2; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-5 .g3b-cols{ color:#EBBDA2; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-51 tbody tr{ background:#330066; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-32 .g3b-cols{ background:#024464; color:#A2D2EB; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-32 tbody tr{ background:#0C5A24; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-32 tbody tr:nth-child(even){ background:#033D63; }
html[data-theme="dark"] #pg-gstr3b .g3b-tbl-32 tfoot .g3b-total-row td{ background:#034263; }

/* ── 7. Ledger uses its own `ma-clr-*` vocabulary, not the shared sr-* one,
      so its form controls need the same treatment separately. ───────────── */
html[data-theme="dark"] #pg-ledger input[type="text"],
html[data-theme="dark"] #pg-ledger input[type="date"],
html[data-theme="dark"] #pg-ledger input[type="number"],
html[data-theme="dark"] #pg-ledger select,
html[data-theme="dark"] .ma-clr-tag-typer,
html[data-theme="dark"] .ma-clr-tag-input{
  color:var(--text) !important;
  background:var(--surf2) !important;
  border-color:var(--bdr) !important;
}
html[data-theme="dark"] #pg-ledger input::placeholder{ color:var(--hint) !important; }

/* ── 8. Native control rendering ─────────────────────────────────────────
      Checkboxes, radios, selects, scrollbars and the date-picker glyph are
      painted by the browser, not by CSS colours — which is why the option
      checkboxes stayed white boxes on a dark card no matter what we set.
      `color-scheme` tells the browser to paint its own widgets dark. This
      replaces the manual icon-inversion hack, which would otherwise invert
      an already-light glyph back to black. */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"]{ accent-color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.620 — TOAST NOTIFICATION REFINEMENTS
   ────────────────────────────────────────────────────────────────────────────
   Three changes requested:
     1. Drop the coloured rule down the left edge. In dark mode the card was
        getting `border-left:4px solid var(--rb-ink)`; the type is already
        carried by the icon colour and the countdown bar, so the rule is
        redundant.
     2. Reduce the height — padding, icon, type sizes and line-heights all
        come down a notch. 93px -> ~68px for a two-line message.
     3. Keep the countdown bar inside the card. It is an absolutely
        positioned ::before at bottom:0, but `.rb-toast` was `overflow:visible`,
        so the bar drew as a flat rectangle straight across the rounded
        bottom corners and spilled past the card's silhouette. Clipping the
        card fixes it; the bar then needs no radius of its own (its own
        radius was being distorted by the scaleX() countdown animation).
════════════════════════════════════════════════════════════════════════════════ */
.rb-toast{
  overflow:hidden !important;        /* clips the countdown bar to the card */
  padding:12px 14px !important;
  gap:12px !important;
}

/* 1. no left rule */
html[data-theme="dark"] .rb-toast{ border-left:none !important; }

/* 2. tighter box */
.rb-toast-ico{ width:36px !important; height:36px !important; }
.rb-toast-ico svg{ width:19px !important; height:19px !important; }
.rb-toast-txt{ gap:1px !important; }
.rb-toast-txt b{ font-size:15px !important; line-height:1.2 !important; }
.rb-toast-txt i{ font-size:12.8px !important; line-height:1.35 !important; }
.rb-toast-x{ width:24px !important; height:24px !important; border-radius:7px !important; }
.rb-toast-x svg{ width:14px !important; height:14px !important; }

/* 3. bar sits flush inside the clipped card */
.rb-toast-timed::before{
  border-radius:0 !important;
  height:3px !important;
}

@media (max-width:560px){
  .rb-toast{ padding:11px 12px !important; gap:10px !important; }
  .rb-toast-ico{ width:32px !important; height:32px !important; }
  .rb-toast-ico svg{ width:17px !important; height:17px !important; }
  .rb-toast-txt b{ font-size:14.2px !important; }
  .rb-toast-txt i{ font-size:12.2px !important; }
}

/* ═══ v3.9.626 — Dark mode for the Add / Edit side-panel forms ════════
   .ma-form-modal-v2 (Add Product / Service, Add Customer / Vendor and the
   other side panels built on it) hardcoded #fff backgrounds, #d1d5db
   borders and #1f2937 text with no dark-mode counterpart, so selects,
   textareas, section cards and the footer buttons stayed light-on-light
   while the surrounding chrome went dark. Every hardcoded value in that
   block now has a dark equivalent.
════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-sec{
  background:var(--surf2, #161f2e) !important;
  border-color:rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-sec-h{
  background:rgba(255,255,255,.05) !important;
  color:var(--text, #e6edf6) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > label{
  color:#9fb0c4 !important;
}

/* Inputs, selects and textareas — the ones that stayed white */
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > input,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > select,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > textarea,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-input-act > input,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-input-act > select,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-bal > input,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-bal > select{
  background:var(--surf3, #1e2a3d) !important;
  color:var(--text, #e6edf6) !important;
  border-color:rgba(255,255,255,.14) !important;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > input::placeholder,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > textarea::placeholder,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-input-act > input::placeholder{
  color:#7b8ca3 !important;
}
/* native dropdown list items follow the control */
html[data-theme="dark"] .ma-form-modal-v2 select option{
  background:#1e2a3d; color:#e6edf6;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > input:disabled,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-row > input[readonly]{
  background:rgba(255,255,255,.04) !important; color:#8ea0b6 !important;
}

/* Radio / toggle knobs were painted white on white */
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-radio::before,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-enable::before{
  background:var(--surf3, #1e2a3d) !important;
  border-color:rgba(255,255,255,.25) !important;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-radios label,
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-radio{
  color:var(--text, #e6edf6) !important;
}

/* Inline action button (Find / Auto Fill) and the footer buttons */
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-input-act > .ma-btn,
html[data-theme="dark"] .ma-form-modal-v2 .ma-modal-actions .ma-btn{
  background:var(--surf3, #1e2a3d) !important;
  color:var(--text, #e6edf6) !important;
  border-color:rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-input-act > .ma-btn:hover,
html[data-theme="dark"] .ma-form-modal-v2 .ma-modal-actions .ma-btn:hover{
  background:rgba(255,255,255,.09) !important;
}
/* keep the primary Save button on its brand colour */
html[data-theme="dark"] .ma-form-modal-v2 .ma-modal-actions .ma-btn.p,
html[data-theme="dark"] .ma-form-modal-v2 .ma-modal-actions .ma-btn.p:hover{
  background:var(--brand, #2563eb) !important;
  border-color:var(--brand, #2563eb) !important;
  color:#fff !important;
}
/* ═══════════ END v3.9.626 ═══════════ */

/* ═══ v3.9.626b — Dark-mode safety net for form controls ═════════════
   An audit found 512 selectors that set a light background with no dark
   counterpart. Most are individual screens, and each one that styles an
   input also re-lights it in dark mode. Rather than patch them one at a
   time, this late rule makes every control inside the app shell follow
   the theme.

   Scoped to #ma-shell deliberately: printed invoices are rendered into a
   separate document, so they keep their white paper background. Colour,
   checkbox, radio and range inputs are excluded so their native
   appearance is left alone.
════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] #ma-shell input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html[data-theme="dark"] #ma-shell select,
html[data-theme="dark"] #ma-shell textarea{
  background:var(--surf3, #1e2a3d);
  color:var(--text, #e6edf6);
  border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] #ma-shell input::placeholder,
html[data-theme="dark"] #ma-shell textarea::placeholder{ color:#7b8ca3; }
html[data-theme="dark"] #ma-shell select option,
html[data-theme="dark"] #ma-shell select optgroup{ background:#1e2a3d; color:#e6edf6; }
html[data-theme="dark"] #ma-shell input:disabled,
html[data-theme="dark"] #ma-shell input[readonly],
html[data-theme="dark"] #ma-shell select:disabled,
html[data-theme="dark"] #ma-shell textarea[readonly]{
  background:rgba(255,255,255,.04); color:#8ea0b6;
}
/* date/time pickers render a black glyph that vanishes on dark */
html[data-theme="dark"] #ma-shell input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] #ma-shell input[type=time]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] #ma-shell input[type=month]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.75);
}
/* keep genuinely-white surfaces white: anything explicitly opted out,
   plus live print previews embedded in the page */
html[data-theme="dark"] #ma-shell .ma-keep-light input,
html[data-theme="dark"] #ma-shell .ma-keep-light select,
html[data-theme="dark"] #ma-shell .ma-keep-light textarea,
html[data-theme="dark"] #ma-shell .ma-print-preview input,
html[data-theme="dark"] #ma-shell .ma-print-preview select,
html[data-theme="dark"] #ma-shell .ma-print-preview textarea{
  background:#fff; color:#1f2937; border-color:#d1d5db;
}
/* ═══════════ END v3.9.626b ═══════════ */

/* ═══ v3.9.627 — Dark-mode completion pass ═══════════════════════════
   An audit found 363 rules setting dark text and 673 setting light
   backgrounds with no dark counterpart — the reason panels stayed white
   and text was unreadable across Settings and many screens.

   The overrides below are GENERATED from those exact selectors, so each
   one mirrors a rule that already exists rather than guessing at markup.
   Values map onto the existing theme variables by luminance: near-white
   backgrounds become --surf, subtle greys --surf3, dark text --text or
   --body, mid greys --muted, and light borders --bdr.

   Deliberately excluded: buttons, badges, pills, chips, tags, toasts and
   swatches (their colour is meaningful), and anything print-related, so
   invoice previews keep their white paper.
════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ma-stat-s .l{color:var(--body)}
html[data-theme="dark"] .ma-hd-create{background-color:var(--surf)}
html[data-theme="dark"] .ma-hd-avatar{background-color:var(--surf)}
html[data-theme="dark"] .ma-dash2-dp{background-color:var(--surf)}
html[data-theme="dark"] .ma-dash2-dp-side{background-color:var(--surf)}
html[data-theme="dark"] .ma-dash2-cal-nav:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-mon:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-yr:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-day:hover:not(.empty){background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-picker{background-color:var(--surf)}
html[data-theme="dark"] .ma-dash2-dp-cancel{background-color:var(--surf)}
html[data-theme="dark"] .ma-dash2-dp-cancel:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-org-row .req{color:var(--body)}
html[data-theme="dark"] .ma-warr-custom{background-color:var(--surf3)}
html[data-theme="dark"] .ma-imei-title{color:var(--text)}
html[data-theme="dark"] .ma-imei-input{background-color:var(--surf)}
html[data-theme="dark"] .ma-imei-select{background-color:var(--surf)}
html[data-theme="dark"] .ma-imei-combo-input-row{background-color:var(--surf)}
html[data-theme="dark"] .ma-pu-flags{border-color:var(--bdr)}
html[data-theme="dark"] .ma-pricing-trust span{color:var(--body)}
html[data-theme="dark"] .ma-shortcut-slider:before{background-color:var(--surf)}
html[data-theme="dark"] .ma-item-slider:before{background-color:var(--surf)}
html[data-theme="dark"] .rb-cs-av{color:var(--text)}
html[data-theme="dark"] .rb-cs-av-7{background-color:var(--surf3)}
html[data-theme="dark"] .ma-plan-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-plan-feats li{color:var(--text)}
html[data-theme="dark"] .ma-pricing-foot{background-color:var(--surf)}
html[data-theme="dark"] .ma-plan-card.v2:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-plan-card.v2.popular .ma-plan-name{color:var(--body)}
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-period{color:var(--body)}
html[data-theme="dark"] .ma-plan-card.v2 .ma-plan-feats{color:var(--text)}
html[data-theme="dark"] .ma-plan-tick{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-plan-card.v2.popular .ma-plan-tick{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-sub-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-sub-card.primary{border-color:var(--bdr)}
html[data-theme="dark"] .ma-sub-days-num.warn{color:var(--body)}
html[data-theme="dark"] .ma-sub-progress{background-color:var(--surf3)}
html[data-theme="dark"] .ma-sub-section-ttl{color:var(--body)}
html[data-theme="dark"] .ma-sub-history th{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-deep{background-color:var(--surf)}
html[data-theme="dark"] .ma-deep-text > p{color:var(--text)}
html[data-theme="dark"] .ma-deep-list li{color:var(--text)}
html[data-theme="dark"] .ma-deep-list li::before{color:var(--body)}
html[data-theme="dark"] .ma-mock-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-mock-line{color:var(--text)}
html[data-theme="dark"] .ma-mock-tot{color:var(--text)}
html[data-theme="dark"] .ma-mock-stock .bar{background-color:var(--surf3)}
html[data-theme="dark"] .ma-howto{background-color:var(--surf)}
html[data-theme="dark"] .ma-howto-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-howto-card p{color:var(--text)}
html[data-theme="dark"] .ma-faq-q{background-color:var(--surf)}
html[data-theme="dark"] .ma-faq-q p{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-graph-tip .ma-gt-h{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip .ma-gt-row{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip .ma-gt-row b{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip .ma-gt-kv span{color:var(--body)}
html[data-theme="dark"] .ma-graph-tip .ma-gt-kv b{color:var(--text)}
html[data-theme="dark"] .ma-pl-rank-best{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-pl-rank-least{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-pl-qty-best{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-pl-qty-least{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-pl-qty-low{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-pl-qty-zero{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-pl-qty-neg{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .tpl-mini .tm-body{background-color:var(--surf)}
html[data-theme="dark"] .tpl-mini .tm-line{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bc-sw{border-color:var(--bdr)}
html[data-theme="dark"] .bcp-logo{background-color:var(--surf3)}
html[data-theme="dark"] .bcp-bizaddr{color:var(--text)}
html[data-theme="dark"] .bcp-meta .k{color:var(--text)}
html[data-theme="dark"] .bcp-tbl th{background-color:var(--surf3)}
html[data-theme="dark"] .bcp-vch-party{color:var(--body)}
html[data-theme="dark"] .bcp-vch-notes{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .bcp-vch-sign .b{color:var(--body)}
html[data-theme="dark"] .bcp-vch-bottom{color:var(--body)}
html[data-theme="dark"] .ma-cv-b-cust{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-cv-b-vendor{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-req{color:var(--body)}
html[data-theme="dark"] .ma-form-modal-v2 .ma-modal-title{color:var(--text)}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-section{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-enable{color:var(--text)}
html[data-theme="dark"] .ma-form-modal-v2 .ma-cv-enable:has(input:checked)::after{border-color:var(--bdr)}
html[data-theme="dark"] .gst-fr label .req{color:var(--body)}
html[data-theme="dark"] .gst-toggle::after{background-color:var(--surf)}
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody td.gst-c-price .gst-price-info{color:var(--text)}
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-cell-blank{background-color:var(--surf3)}
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell{background-color:var(--surf3)}
html[data-theme="dark"] #pg-bill .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-purchase .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-create-jobwork .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-create-proforma .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-create-packing-list .gst-items-tbl tbody td.gst-c-qty .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-qty input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-nopkg input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-netwt input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-kind input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-grosswt input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-dim input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-pkgno .cpk-pkgno-input:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-items-tbl tbody td.cpk-c-desc textarea[data-fld="desc"]:focus{background-color:var(--surf)}
html[data-theme="dark"] #pg-create-packing-list .cpk-netwt-wrap > input:focus{background-color:var(--surf)}
html[data-theme="dark"] .gst-action-row button.disc{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .gst-extra-charge .rm{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .cdc-charge-combo-row .rm{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .gst-stock-hint.low{color:var(--body)}
html[data-theme="dark"] .ma-out-tile.purchase:hover{border-color:var(--bdr)}
html[data-theme="dark"] .gst-item-serial input::placeholder{color:var(--body)}
html[data-theme="dark"] .gst-item-batch input::placeholder{color:var(--text)}
html[data-theme="dark"] .ma-batch-del{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .gst-item-serial input[type="text"]::placeholder{color:var(--body)}
html[data-theme="dark"] .pr-fg > label .req{color:var(--body)}
html[data-theme="dark"] .req{color:var(--body)}
html[data-theme="dark"] .ma-export-tbl input[type="checkbox"]{background-color:var(--surf3)}
html[data-theme="dark"] .ma-export-tbl input[type="checkbox"]::after{background-color:var(--surf)}
html[data-theme="dark"] .ma-tog span::before{background-color:var(--surf)}
html[data-theme="dark"] .ma-ptpl-thumb{background-color:var(--surf)}
html[data-theme="dark"] .ma-pthdr-card:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-pthdr-thumb.t-default{background-color:var(--surf)}
html[data-theme="dark"] .ptpl-thumb-inner{color:var(--text)}
html[data-theme="dark"] .ptpl-t1 .ptpl-c-title{color:var(--text)}
html[data-theme="dark"] .ptpl-t1 .ptpl-c-meta>div:last-child{background-color:var(--surf3)}
html[data-theme="dark"] .ptpl-t1 .ptpl-c-tot{background-color:var(--surf)}
html[data-theme="dark"] .ptpl-t2 .ptpl-top{border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-strip{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-title{color:var(--body)}
html[data-theme="dark"] .ptpl-t2 .ptpl-trio{border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-tl{background-color:var(--surf3)}
html[data-theme="dark"] .ptpl-t2 .ptpl-thead{border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-rows{border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-rows>div:nth-child(odd){background-color:var(--surf)}
html[data-theme="dark"] .ptpl-t2 .ptpl-tot{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-hsn{border-color:var(--bdr)}
html[data-theme="dark"] .ptpl-t2 .ptpl-foot{border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-wiz-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-wiz-title{color:var(--text)}
html[data-theme="dark"] .ma-ewb-wiz-sub{color:var(--body)}
html[data-theme="dark"] .ma-ewb-wiz-step-title{color:var(--text)}
html[data-theme="dark"] .ma-ewb-req{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-ewb-opt{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-ewb-wiz-step-help{color:var(--body)}
html[data-theme="dark"] .ma-ewb-wiz-step-help code{background-color:var(--surf3)}
html[data-theme="dark"] .ma-ewb-wiz-help-box{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-wiz-input input{color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-wiz-grid2 label{color:var(--text)}
html[data-theme="dark"] .ma-ewb-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-card-lbl{color:var(--body)}
html[data-theme="dark"] .ma-ewb-card-val{color:var(--text)}
html[data-theme="dark"] .ma-ewb-api-banner-ico{color:var(--body)}
html[data-theme="dark"] .ma-ewb-api-banner-text{color:var(--text)}
html[data-theme="dark"] .ma-ewb-api-banner-text b{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-form{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-hint{color:var(--text)}
html[data-theme="dark"] .ma-ewb-mode-bar{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-mode-lbl{color:var(--text)}
html[data-theme="dark"] .ma-ewb-mode-hint{color:var(--body)}
html[data-theme="dark"] .ma-ewb-gov-section{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-sec-body{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-gov-field label{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-field input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-field select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-field textarea{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-field-row label{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-field-row input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-field-row select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-row-strip{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-gov-side-lbl{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-radio-line label{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-items-wrap{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-gov-items thead th{background-color:var(--surf3)}
html[data-theme="dark"] .ma-ewb-gov-items tbody td{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-items input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-items select{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-prod-sel{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-gov-totals{background-color:var(--surf3)}
html[data-theme="dark"] .ma-ewb-gov-totals input{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-gov-autopin{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-autopin .num{background-color:var(--surf3)}
html[data-theme="dark"] .ma-ewb-gov-partb{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-partb-row > label{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-partb-row input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-gov-ebn-h{color:var(--body)}
html[data-theme="dark"] .ma-ewb-gov-foot-note{color:var(--text)}
html[data-theme="dark"] .ma-ewb-gov-foot-note code{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-preview{color:var(--text)}
html[data-theme="dark"] .ma-ewb-preview-grid2{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-preview-addr{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-ewb-preview-items th{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-preview-items td{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-preview-totline{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-modal-bg.ma-modal-bg-full{background-color:var(--surf)}
html[data-theme="dark"] .ma-modal-bg .ma-modal.ma-modal-full{background-color:var(--surf)}
html[data-theme="dark"] .ma-ewb-row-act{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-row-act:hover{color:var(--text)}
html[data-theme="dark"] .ma-ewb-row-act.pdf:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-ewb-row-act.more{color:var(--body)}
html[data-theme="dark"] .ma-ewb-row-act.more:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-ewb-pick-trigger{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ewb-pick-trigger input{color:var(--text)}
html[data-theme="dark"] .ma-ewb-pick-drop{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-page{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-crumb{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-crumb svg{color:var(--body)}
html[data-theme="dark"] .ma-qt-v2-card{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-card-h{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-card-act:hover{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-row > label{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-req{color:var(--body)}
html[data-theme="dark"] .ma-qt-v2-row input[type="text"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-row input[type="number"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-row input[type="date"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-row select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-row textarea{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items-card{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-discount-lbl{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-disc-toggle{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-disc-toggle button{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-items thead th{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-section-title{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-add-notes{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-add-notes:hover{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-tot-row{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-tot-row > span:first-child{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-grand > span:first-child{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-grand > span:last-child{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-switch-knob{background-color:var(--surf)}
html[data-theme="dark"] .ma-qt-v2-suggest{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-suggest-h button{background-color:var(--surf)}
html[data-theme="dark"] .ma-qt-v2-suggest-body{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-share{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-items tbody td input[type="text"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items tbody td input[type="number"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items tbody td select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items tbody td.qt-cell-sr{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-items tbody td.qt-cell-total{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-items tbody td.qt-cell-del .ma-jw-del{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items tbody td.qt-cell-del .ma-jw-del:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-qt-v2-items .qt-item-combo .ma-combo-input-row{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-items .qt-item-combo .ma-combo-arrow{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-qt-v2-items .qt-item-combo .ma-combo-arrow:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .qt-v2-charge-row input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .qt-v2-charge-row select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .qt-v2-charge-row .qt-ch-del{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .qt-v2-charge-row .qt-ch-del:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-input-row{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-input-row input{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-input-row .ma-combo-arrow{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-input-row .ma-combo-arrow:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop{background-color:var(--surf)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-search{background-color:var(--surf)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-opt:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-opt.hi{background-color:var(--surf3)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-opt-name{color:var(--text)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-opt-sub{color:var(--body)}
html[data-theme="dark"] .ma-qt-v2-row .ma-combo-drop .ma-combo-empty{color:var(--body)}
html[data-theme="dark"] .ma-img-tile-toggle{color:var(--text)}
html[data-theme="dark"] .ma-img-tile-label{color:var(--text)}
html[data-theme="dark"] .ma-img-tile{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-img-tile:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-img-tile-empty{color:var(--body)}
html[data-theme="dark"] .ma-img-tile-cta{color:var(--text)}
html[data-theme="dark"] .ma-img-tile-meta{color:var(--body)}
html[data-theme="dark"] .ma-img-tile-meta:first-of-type{color:var(--body)}
html[data-theme="dark"] .ma-img-tile-remove{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-img-tile-remove:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-gen-tab-label{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-gen-check{color:var(--text)}
html[data-theme="dark"] .ma-gen-info:hover{color:var(--text)}
html[data-theme="dark"] .ma-gen-field-lbl{color:var(--text)}
html[data-theme="dark"] .ma-gen-select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-gen-input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-gen-textarea{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-gen-hint{color:var(--text)}
html[data-theme="dark"] .ma-gen-hint code{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-gen-hint-small{color:var(--body)}
html[data-theme="dark"] .ma-gen-subgroup{background-color:var(--surf)}
html[data-theme="dark"] .ma-batch-table{color:var(--text)}
html[data-theme="dark"] .ma-batch-table thead th{color:var(--text)}
html[data-theme="dark"] .ma-batch-input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-batch-type{color:var(--text)}
html[data-theme="dark"] .ma-batch-type-date{color:var(--text)}
html[data-theme="dark"] .ma-batch-select{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-batch-slider::before{background-color:var(--surf)}
html[data-theme="dark"] .ma-is-table .ma-is-type{color:var(--text)}
html[data-theme="dark"] .ma-is-table tbody td.ma-is-type{color:var(--text)}
html[data-theme="dark"] .ma-is-table input[readonly]{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-status-row{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-status-color-wrap{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-status-hex{color:var(--text)}
html[data-theme="dark"] .ma-status-hex:focus{background-color:var(--surf)}
html[data-theme="dark"] .ma-status-label{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-pmt-input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-trans-card .ma-trans-card-hdr{background-color:var(--surf)}
html[data-theme="dark"] .ma-trans-card .ma-trans-hdr-tiny{background-color:var(--surf)}
html[data-theme="dark"] .ma-trans-row label{color:var(--text)}
html[data-theme="dark"] .ma-trans-row input{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-form-card{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-form-card-hdr{color:var(--text)}
html[data-theme="dark"] .mfg-back-icon{color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-back-icon:hover{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .mfg-frow > label{color:var(--text)}
html[data-theme="dark"] .mfg-frow > label .req{color:var(--body)}
html[data-theme="dark"] .mfg-frow input[type="text"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-frow input[type="number"]{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-frow input:disabled{background-color:var(--surf3)}
html[data-theme="dark"] .mfg-frow textarea{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-ta-expand{color:var(--body)}
html[data-theme="dark"] .mfg-tbl thead th{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .mfg-tbl tbody input{color:var(--text)}
html[data-theme="dark"] .mfg-tbl tbody textarea{color:var(--text)}
html[data-theme="dark"] .mfg-tbl tfoot .mfg-tot-row td{color:var(--text)}
html[data-theme="dark"] .mfg-sum-row{color:var(--text)}
html[data-theme="dark"] .mfg-adj-row input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-adj-row select{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-sum-words-lbl{color:var(--text)}
html[data-theme="dark"] .mfg-sum-words-val{color:var(--body)}
html[data-theme="dark"] .mfg-f-item-cell .mfg-f-name{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .mfg-f-item-cell .mfg-f-note{color:var(--text)}
html[data-theme="dark"] .mfg-note-sep{background-color:var(--surf3)}
html[data-theme="dark"] .mfg-note-del{border-color:var(--bdr)}
html[data-theme="dark"] .mfg-note-del:hover{color:var(--body)}
html[data-theme="dark"] .mfg-tbl tbody tr.mfg-f-row{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-tbl tbody tr.mfg-f-row td:nth-child(3) input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-tbl tbody tr.mfg-f-row td:nth-child(4) input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-tbl tbody tr.mfg-f-row td:nth-child(5) input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-tbl tbody tr.mfg-f-row td:nth-child(6) input{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] #mfg-ms-drop{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] #mfg-ms-drop .ma-combo-search{border-color:var(--bdr)}
html[data-theme="dark"] #mfg-ms-drop .ma-combo-item:hover{background-color:var(--surf)}
html[data-theme="dark"] .mfg-note-block.drop-target{background-color:var(--surf3)}
html[data-theme="dark"] .mfg-note-drag{border-color:var(--bdr)}
html[data-theme="dark"] .mfg-note-drag:hover{color:var(--text)}
html[data-theme="dark"] .mfg-act-edit{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-act-edit:hover{background-color:var(--surf)}
html[data-theme="dark"] .mfg-act-edit-arr{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-act-edit-arr:hover{background-color:var(--surf)}
html[data-theme="dark"] .mfg-act-menu{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-act-menu-item{color:var(--text)}
html[data-theme="dark"] .mfg-act-menu-item:hover{background-color:var(--surf)}
html[data-theme="dark"] .mfg-act-menu-item.d{color:var(--body)}
html[data-theme="dark"] .mfg-item-combo-drop{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .mfg-item-combo-item:hover{background-color:var(--surf)}
html[data-theme="dark"] .gst-note-del:hover{background-color:var(--surf3);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .cc-tog span::before{background-color:var(--surf)}
html[data-theme="dark"] .staff-lbl .req{color:var(--body)}
html[data-theme="dark"] .staff-switch > span::before{background-color:var(--surf)}
html[data-theme="dark"] .staff-perms-grp-toggle{background-color:var(--surf3)}
html[data-theme="dark"] .ec-fg > label .req{color:var(--body)}
html[data-theme="dark"] .ax-fg > label .req{color:var(--body)}
html[data-theme="dark"] .ax-pay-row .l .req{color:var(--body)}
html[data-theme="dark"] .ma-alert-error .ma-alert-icon{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-alert-error .ma-alert-icon-halo{background-color:var(--surf3)}
html[data-theme="dark"] .ma-alert-warning .ma-alert-icon{background-color:var(--surf3)}
html[data-theme="dark"] .ma-alert-warning .ma-alert-icon-halo{background-color:var(--surf3)}
html[data-theme="dark"] .ma-alert-success .ma-alert-icon{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-alert-success .ma-alert-icon-halo{background-color:var(--surf3)}
html[data-theme="dark"] .ma-alert-question .ma-alert-icon{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-alert-question .ma-alert-icon-halo{background-color:var(--surf3)}
html[data-theme="dark"] .ip-side-body .ip-fg > label .req{color:var(--body)}
html[data-theme="dark"] .ic-side-body .ic-fg > label .req{color:var(--body)}
html[data-theme="dark"] .ai-page-title svg{color:var(--body)}
html[data-theme="dark"] .ai-field > label .req{color:var(--body)}
html[data-theme="dark"] .ai-td-sr{color:var(--body)}
html[data-theme="dark"] .ai-in-note{color:var(--text)}
html[data-theme="dark"] .ai-in-note::placeholder{color:var(--body)}
html[data-theme="dark"] .ai-line-lbl .req{color:var(--body)}
html[data-theme="dark"] #cv-view-sidebar-wrap .ec-side{background-color:var(--surf)}
html[data-theme="dark"] .cv-side-head .ec-side-x:hover{background-color:var(--surf3)}
html[data-theme="dark"] .cv-side-body{background-color:var(--surf)}
html[data-theme="dark"] #pg-customers{background-color:var(--surf3)}
html[data-theme="dark"] #pg-customers .ma-list-tbl thead th.ma-act-col .ma-col-pick{background-color:var(--surf3);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-customers .ma-list-tbl thead th.ma-act-col .ma-col-pick:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row td.ma-list-invno .ma-cust-toggle{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-list-invno{background-color:var(--surf)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-list-invno .ma-cust-toggle{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td[data-label]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{color:var(--text)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col::before{color:var(--text)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-more{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-customers .ma-list-tbl tr.ma-cust-row.is-expanded td.ma-act-col .ma-list-act-more:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-customers .oi-empty-title{color:var(--body)}
html[data-theme="dark"] .ic-toggle-track::before{background-color:var(--surf)}
html[data-theme="dark"] #pg-stock{background-color:var(--surf3)}
html[data-theme="dark"] #pg-stock .ma-list-tbl thead th.ma-act-col .ma-col-pick{background-color:var(--surf3);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-stock .ma-list-tbl thead th.ma-act-col .ma-col-pick:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row td.ma-list-invno .ma-item-toggle{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-list-invno{background-color:var(--surf)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-list-invno .ma-item-toggle{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td[data-label]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{color:var(--text)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col::before{color:var(--text)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-more{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-stock .ma-list-tbl tr.ma-item-row.is-expanded td.ma-act-col .ma-list-act-more:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-stock .oi-empty-title{color:var(--body)}
html[data-theme="dark"] #pv-view-sidebar-wrap .ec-side{background-color:var(--surf)}
html[data-theme="dark"] .cg-req{color:var(--body)}
html[data-theme="dark"] .cg-check-box::after{border-color:var(--bdr)}
html[data-theme="dark"] .cg-status-txt.off{color:var(--body)}
html[data-theme="dark"] #pg-customer-groups{background-color:var(--surf3)}
html[data-theme="dark"] #pg-customer-groups .ma-cg-toggle{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-list-invno{background-color:var(--surf)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded .ma-cg-toggle{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-cb-col):not(.ma-act-col)::before{color:var(--text)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col::before{color:var(--text)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-more{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-customer-groups .ma-list-tbl tr.ma-cg-row.is-expanded td.ma-act-col .ma-list-act-more:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ig-status-txt.off{color:var(--body)}
html[data-theme="dark"] #ig-add-sidebar-wrap .ig-req{color:var(--body)}
html[data-theme="dark"] #ig-add-sidebar-wrap .ig-check-box{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] #ig-add-sidebar-wrap .ig-check input[type="checkbox"]:checked + .ig-check-box::after{border-color:var(--bdr)}
html[data-theme="dark"] #pg-product-groups{background-color:var(--surf3)}
html[data-theme="dark"] #pg-product-groups .ma-ig-toggle{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td[data-col]:not(.ma-list-invno):not(.ma-act-col)::before{color:var(--text)}
html[data-theme="dark"] #pg-product-groups .ma-list-tbl tr.ma-ig-row.is-expanded td.ma-act-col .ma-list-act-more{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-msec{background-color:var(--surf3)}
html[data-theme="dark"] .ma-msec.open{background-color:var(--surf3)}
html[data-theme="dark"] .ma-msec-lock{background-color:var(--surf3)}
html[data-theme="dark"] .ma-msec-chev{color:var(--body)}
html[data-theme="dark"] .pl-status-txt.off{color:var(--body)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-req{color:var(--body)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-radio-dot{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-radio input[type="radio"]:checked + .pl-radio-dot::after{background-color:var(--surf)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-check-box{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-check input[type="checkbox"]:checked + .pl-check-box::after{border-color:var(--bdr)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-entry-card{background-color:var(--surf)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-entry-del{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] #pl-add-sidebar-wrap .pl-entry-del:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-price-lists{background-color:var(--surf3)}
html[data-theme="dark"] .bci-da-req{color:var(--body)}
html[data-theme="dark"] .bci-da-row input[type="text"]{background-color:var(--surf)}
html[data-theme="dark"] .bci-da-row input[type="tel"]{background-color:var(--surf)}
html[data-theme="dark"] .bci-da-row input[type="email"]{background-color:var(--surf)}
html[data-theme="dark"] .bci-da-row select{background-color:var(--surf)}
html[data-theme="dark"] .bci-da-err{color:var(--body)}
html[data-theme="dark"] .bci-cf-c.bci-cf-name input[type="text"]{background-color:var(--surf)}
html[data-theme="dark"] .bci-cf-optblk textarea{background-color:var(--surf)}
html[data-theme="dark"] .bci-dacf-c.bci-dacf-name input[type="text"]{background-color:var(--surf)}
html[data-theme="dark"] .bci-sw-track::after{background-color:var(--surf)}
html[data-theme="dark"] .jw-remaining-bar{background-color:var(--surf3)}
html[data-theme="dark"] #pg-sale-orders #so-trash-toggle.so-trash-active{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-purchase-orders #po-trash-toggle.po-trash-active{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-service-requests #sr-trash-toggle.sr-trash-active{background-color:var(--surf3);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-kebab{background-color:var(--surf)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-kebab:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-tbl thead th{background-color:var(--surf)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-a td input:hover{background-color:var(--surf)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-tbl tbody tr.mc-item-row-b td{background-color:var(--surf)}
html[data-theme="dark"] #pg-mc-invoice .mc-items-tbl tbody td.gst-c-act{background-color:var(--surf)}
html[data-theme="dark"] #pg-day-wise-pl .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-sales-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-notifications .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-gstr3b .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-gstr2b .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-gstr1 .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-customer-wise-pl .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-bill-pl .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-daybook .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-stock-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-manufacture-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-product-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-company-outstanding-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-other-document-product-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-other-document-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-outward-payment-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-other-income-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-product-wise-pl .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-daily-expenses-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-inward-payment-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-purchase-product-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-sale-product-report .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-sale-outstanding .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-purchase-outstanding .sr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-purchase-report .pr-cust-reset{color:var(--text)}
html[data-theme="dark"] #pg-purchase-report .sr-combo-drop .sr-cust-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-purchase-report .sr-combo-drop .sr-prod-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-purchase-report .pr-combo-drop .sr-cust-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-purchase-report .pr-combo-drop .sr-prod-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-purchase-report .pr-combo-drop .sr-cust-city{color:var(--body)}
html[data-theme="dark"] #pg-stock-report .str-sep{background-color:var(--surf3)}
html[data-theme="dark"] #pg-stock-report .str-flags-vertical label{color:var(--text)}
html[data-theme="dark"] .ma-notif-fullview-clear{color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-notif-fullview-clear:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-day-wise-pl .dwpl-profit-neg{color:var(--body)}
html[data-theme="dark"] #pg-customer-wise-pl .dwpl-profit-neg{color:var(--body)}
html[data-theme="dark"] #pg-bill-pl .dwpl-profit-neg{color:var(--body)}
html[data-theme="dark"] .ma-ai-menu-item.danger{color:var(--body)}
html[data-theme="dark"] .ma-ai-menu-item.danger svg{color:var(--body)}
html[data-theme="dark"] .ma-ai-menu-item.danger:hover{color:var(--text)}
html[data-theme="dark"] .ma-ai-menu-item.danger:focus-visible{color:var(--text)}
html[data-theme="dark"] .ma-ai-menu-item.danger:hover svg{color:var(--text)}
html[data-theme="dark"] .ma-ai-menu-item.danger:focus-visible svg{color:var(--text)}
html[data-theme="dark"] .ma-ai-fab-greet-close:hover{background-color:var(--surf3)}
html[data-theme="dark"] #pg-product-wise-pl .pwp-tbl .pwp-loss{color:var(--body)}
html[data-theme="dark"] .de-row-menu-pop button:hover{background-color:var(--surf3)}
html[data-theme="dark"] .de-row-menu-pop button.danger{color:var(--body)}
html[data-theme="dark"] .de-row-menu-pop button.danger:hover{background-color:var(--surf3)}
html[data-theme="dark"] .de-drawer-close:hover{background-color:var(--surf3)}
html[data-theme="dark"] .de-drawer-row:hover{background-color:var(--surf)}
html[data-theme="dark"] .de-switch-slider{background-color:var(--surf3)}
html[data-theme="dark"] .de-switch-slider::before{background-color:var(--surf)}
html[data-theme="dark"] #pg-daily-expense .de-tbl-v269 tbody tr:hover td{background-color:var(--surf)}
html[data-theme="dark"] #pg-daily-expense .de-tbl-v269 tbody tr.de-row:hover td{background-color:var(--surf)}
html[data-theme="dark"] #pg-daily-expense .de-td-link{color:var(--muted)}
html[data-theme="dark"] #pg-gstr1 .gstr1-req{color:var(--body)}
html[data-theme="dark"] #pg-gstr2b .g2b-req{color:var(--body)}
html[data-theme="dark"] #pg-gstr2b .g2b-status-notmatch{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] #pg-gstr2b .g2b-status-miss2b{color:var(--text)}
html[data-theme="dark"] #pg-gstr2b .g2b-status-misspur{color:var(--text)}
html[data-theme="dark"] #pg-gstr2b .g2b-status-partial{color:var(--body)}
html[data-theme="dark"] #pg-gstr3b .g3b-req{color:var(--body)}
html[data-theme="dark"] .ma-nve-legend{color:var(--text)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip .ma-gt-h{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip .ma-gt-h{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip .ma-gt-body{color:var(--text)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip .ma-gt-body{color:var(--text)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip .ma-gt-line{color:var(--text)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip .ma-gt-line{color:var(--text)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip .ma-gt-line span{color:var(--text)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip .ma-gt-line span{color:var(--text)}
html[data-theme="dark"] .ma-nve-card .ma-graph-tip .ma-gt-line b{color:var(--text)}
html[data-theme="dark"] .ma-nve-graph .ma-graph-tip .ma-gt-line b{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body){background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body) .ma-gt-h{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body) .ma-gt-body{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body) .ma-gt-line{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body) .ma-gt-line span{color:var(--text)}
html[data-theme="dark"] .ma-graph-tip:has(.ma-gt-body) .ma-gt-line b{color:var(--text)}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-filter-menu{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-filter-item{color:var(--text)}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-filter-item:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-prodlead-clean .ma-pl-filter-item.active{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-dp-preset{color:var(--text)}
html[data-theme="dark"] .ma-dash2-dp-preset:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-nav{color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-mon{color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-yr{color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-mon::after{color:var(--body)}
html[data-theme="dark"] .ma-dash2-cal-yr::after{color:var(--body)}
html[data-theme="dark"] .ma-dash2-cal-day{color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-day:hover:not(.empty):not(.start):not(.end){background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-day.in{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-picker-item{color:var(--text)}
html[data-theme="dark"] .ma-dash2-cal-picker-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-cal-picker-item.active{background-color:var(--surf3)}
html[data-theme="dark"] .ma-dash2-dp-sel{color:var(--text)}
html[data-theme="dark"] .ma-dash2-dp-foot{background-color:var(--surf)}
html[data-theme="dark"] .ma-shero-trend{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-shero-trend.down{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-shero-trend.flat{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-shero-amt-gst{color:var(--body)}
html[data-theme="dark"] .ma-shero-gst-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-shero-date svg{color:var(--body)}
html[data-theme="dark"] .ma-shero-cmp-pct{color:var(--body)}
html[data-theme="dark"] .ma-shero-cmp-pct.is-down{color:var(--body)}
html[data-theme="dark"] .shero-icon-green{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-blue{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-purple{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-orange{color:var(--body)}
html[data-theme="dark"] .shero-icon-indigo{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-shero-purchase .ma-shero-date svg{color:var(--body)}
html[data-theme="dark"] .ma-shero-amt-pur{color:var(--body)}
html[data-theme="dark"] .ma-shero-gst-ico-pur{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-dash-paysum-lgrow{color:var(--text)}
html[data-theme="dark"] .ma-cs-item.active .ma-cs-item-avatar::after{border-color:var(--bdr)}
html[data-theme="dark"] .ma-cs-req{color:var(--body)}
html[data-theme="dark"] .ma-cs-logo-preview{background-color:var(--surf)}
html[data-theme="dark"] .rb-prev-overlay{background-color:var(--surf)}
html[data-theme="dark"] .rb-prev-iframe{background-color:var(--surf)}
html[data-theme="dark"] .rb-prev-side{background-color:var(--surf)}
html[data-theme="dark"] .rb-prev-saved-title{color:var(--text)}
html[data-theme="dark"] .rb-prev-saved-sub{color:var(--body)}
html[data-theme="dark"] .rb-prev-sec-hdr{color:var(--body)}
html[data-theme="dark"] .rb-prev-act{color:var(--text)}
html[data-theme="dark"] .rb-prev-act:hover{background-color:var(--surf)}
html[data-theme="dark"] .rb-prev-act svg{color:var(--body)}
html[data-theme="dark"] .rb-prev-act.danger{color:var(--body)}
html[data-theme="dark"] .rb-prev-act.danger svg{color:var(--body)}
html[data-theme="dark"] .rb-prev-goto{color:var(--body)}
html[data-theme="dark"] .rb-prev-goto:hover{color:var(--body)}
html[data-theme="dark"] .rb-prev-convert-menu{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .rb-prev-convert-item{color:var(--text)}
html[data-theme="dark"] .rb-prev-convert-item:hover{background-color:var(--surf3)}
html[data-theme="dark"] .rb-prev-mob-bar{background-color:var(--surf)}
html[data-theme="dark"] .rb-se-x{color:var(--body)}
html[data-theme="dark"] .rb-se-x:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .rb-se-bcc-toggle{color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .rb-se-bcc-toggle:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .lt-cl-req{color:var(--body)}
html[data-theme="dark"] .lt-tpl-thumb-blank{background-color:var(--surf3)}
html[data-theme="dark"] .lt-tpl-img{background-color:var(--surf)}
html[data-theme="dark"] .lt-tpl-tile:hover .lt-tpl-name{color:var(--body)}
html[data-theme="dark"] .lt-tpl-tile.is-active .lt-tpl-name{color:var(--body)}
html[data-theme="dark"] .lt-tpl-mock{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .lt-tpl-mock-loi{background-color:var(--surf)}
html[data-theme="dark"] .lt-tpl-mock-noc{background-color:var(--surf)}
html[data-theme="dark"] .lt-tpl-mock-sales{background-color:var(--surf)}
html[data-theme="dark"] .lt-tpl-mock-internship{background-color:var(--surf)}
html[data-theme="dark"] .inm-hdr-name{background-color:var(--surf)}
html[data-theme="dark"] .lt-prev-biz-sub{color:var(--body)}
html[data-theme="dark"] .lt-prev-date{color:var(--text)}
html[data-theme="dark"] .lt-no-link{color:var(--muted)}
html[data-theme="dark"] .lt-row-menu-item.d:hover{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .lt-sig-preview{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-tbl thead th{background-color:var(--surf3)}
html[data-theme="dark"] .lt-jw-col-lbl{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-col-num input:focus{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-total-row{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-total-row .lt-jw-col-lbl{background-color:var(--surf3)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-total-row input{color:var(--text)}
html[data-theme="dark"] .prn-jw-band .prn-jw-band-l{color:var(--text)}
html[data-theme="dark"] .prn-jw-band .prn-jw-band-r{color:var(--text)}
html[data-theme="dark"] .prn-jw-meta .k{color:var(--text)}
html[data-theme="dark"] .prn-jw-meta .v{color:var(--text)}
html[data-theme="dark"] .prn-jw-tbl thead th{background-color:var(--surf3)}
html[data-theme="dark"] .prn-jw-tbl tbody tr:nth-child(even){background-color:var(--surf)}
html[data-theme="dark"] .prn-jw-tbl tbody td.lbl{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .prn-jw-tbl tfoot td{background-color:var(--surf3)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-lbl-edit:focus{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-th-edit:focus{background-color:var(--surf)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-x:hover{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .lt-jw-tbl .lt-jw-total-row td{background-color:var(--surf)}
html[data-theme="dark"] .lt-editor table th{background-color:var(--surf3)}
html[data-theme="dark"] .lt-cm-item.d:hover{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .sal-topbar-title svg{color:var(--body)}
html[data-theme="dark"] .sal-tab:hover{color:var(--text)}
html[data-theme="dark"] .sal-stat-lbl{color:var(--body)}
html[data-theme="dark"] .sal-emp-card:hover{border-color:var(--bdr)}
html[data-theme="dark"] .sal-emp-des{color:var(--body)}
html[data-theme="dark"] .sal-emp-row-lbl{color:var(--body)}
html[data-theme="dark"] .sal-toolbar-lbl{color:var(--body)}
html[data-theme="dark"] .sal-month-info{color:var(--text)}
html[data-theme="dark"] .sal-pr-empdes{color:var(--body)}
html[data-theme="dark"] .sal-pr-inp-disabled{background-color:var(--surf)}
html[data-theme="dark"] .sal-pr-gross{color:var(--text)}
html[data-theme="dark"] .sal-pr-net{color:var(--body)}
html[data-theme="dark"] .sal-pay-row{color:var(--text)}
html[data-theme="dark"] .de-empty-sub{color:var(--body)}
html[data-theme="dark"] .sal-att-tbl{background-color:var(--surf)}
html[data-theme="dark"] .sal-att-day-th.sal-att-day-sun .sal-att-day-dow{color:var(--body)}
html[data-theme="dark"] .sal-att-day-num{color:var(--text)}
html[data-theme="dark"] .sal-att-tbl tbody tr:nth-child(even) td{background-color:var(--surf)}
html[data-theme="dark"] .sal-att-tbl tbody tr:hover td:not(.sal-att-emp-td):not(.sal-att-tot-td){background-color:var(--surf3)}
html[data-theme="dark"] .sal-att-emp-shift{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .sal-att-tot{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .sal-att-tot-d{color:var(--muted)}
html[data-theme="dark"] .sal-att-tot-n{color:var(--body)}
html[data-theme="dark"] .sal-att-tot-l{color:var(--body)}
html[data-theme="dark"] .sal-att-cell:hover{color:var(--body)}
html[data-theme="dark"] .sal-att-cell.sal-att-d{color:var(--text)}
html[data-theme="dark"] .sal-att-cell.sal-att-l{color:var(--text)}
html[data-theme="dark"] .sal-att-cell.sal-att-sun.sal-att--{background-color:var(--surf3);border-color:var(--bdr)}
html[data-theme="dark"] .sal-adv-bal-item:hover{border-color:var(--bdr)}
html[data-theme="dark"] .sal-adv-bal-amt{color:var(--body)}
html[data-theme="dark"] .sal-adv-bal-item.is-clear .sal-adv-bal-amt{color:var(--body)}
html[data-theme="dark"] .sal-adv-amount{color:var(--body)}
html[data-theme="dark"] .sal-hist-tot-th{color:var(--text)}
html[data-theme="dark"] .sal-hist-cell-amt{color:var(--text)}
html[data-theme="dark"] .sal-hist-cell.sal-hist-cell-empty:hover{background-color:var(--surf3)}
html[data-theme="dark"] .sal-hist-cell.sal-hist-cell-empty:hover .sal-hist-cell-empty-icon{color:var(--body)}
html[data-theme="dark"] .sal-hist-mtot-pending{color:var(--body)}
html[data-theme="dark"] .ma-addpay-x:hover{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-addpay-split:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-addpay-row{background-color:var(--surf)}
html[data-theme="dark"] .ma-addpay-cell::before{color:var(--text)}
html[data-theme="dark"] .ipt-addpay-card{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ipt-addpay-title{color:var(--text)}
html[data-theme="dark"] .ipt-addpay-title-sub{color:var(--text)}
html[data-theme="dark"] .ipt-addpay-head{color:var(--text)}
html[data-theme="dark"] .ipt-inp{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ipt-addpay-add{color:var(--text)}
html[data-theme="dark"] .ipt-addpay-add:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ipt-sum-row{color:var(--text)}
html[data-theme="dark"] .ipt-sum-row > span:last-child{color:var(--text)}
html[data-theme="dark"] #ipt-sum-balance.is-zero{color:var(--text)}
html[data-theme="dark"] #ipt-sum-balance.is-positive{color:var(--body)}
html[data-theme="dark"] #ipt-sum-balance.is-negative{color:var(--body)}
html[data-theme="dark"] .ipt-addpay-row{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ipt-cell::before{color:var(--text)}
html[data-theme="dark"] .ip-side .ec-side-foot{background-color:var(--surf)}
html[data-theme="dark"] .ma-ei-hero-date{border-color:var(--bdr)}
html[data-theme="dark"] .ma-ei-hero-toggle:hover{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ei-exp-val{color:var(--body)}
html[data-theme="dark"] .ma-ei-inc-val{color:var(--body)}
html[data-theme="dark"] .ma-ei-netbal-val{color:var(--body)}
html[data-theme="dark"] .ma-ei-netbal-val.ma-ei-netbal-positive{color:var(--body)}
html[data-theme="dark"] .ma-ei-prog{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ei-insight-lbl{color:var(--body)}
html[data-theme="dark"] .ma-ei-insight-txt{color:var(--text)}
html[data-theme="dark"] .ma-ei-trend-lbl-hd{color:var(--body)}
html[data-theme="dark"] .ma-pay-hero-date{border-color:var(--bdr)}
html[data-theme="dark"] .ma-pay-hero-date svg:first-child{color:var(--body)}
html[data-theme="dark"] .ma-pay-hero-toggle:hover{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-pay-donut-trend-val{color:var(--body)}
html[data-theme="dark"] .ma-pay-donut-trend-val.is-down{color:var(--body)}
html[data-theme="dark"] .ma-pay-donut-trend-val.is-flat{color:var(--body)}
html[data-theme="dark"] .ma-pay-prog{border-color:var(--bdr)}
html[data-theme="dark"] .ma-pay-prog-trend.is-up{color:var(--body)}
html[data-theme="dark"] .ma-pay-prog-trend.is-down{color:var(--body)}
html[data-theme="dark"] .ma-pay-prog-trend.is-flat{color:var(--body)}
html[data-theme="dark"] .ma-pay-sum-amt-rec{color:var(--body)}
html[data-theme="dark"] .ma-pay-sum-amt-pen{color:var(--muted)}
html[data-theme="dark"] .ma-pay-sum-amt-ovd{color:var(--body)}
html[data-theme="dark"] .ma-recact-empty-ico{background-color:var(--surf3)}
html[data-theme="dark"] .shero-icon-red{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-rose{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-amber{background-color:var(--surf3);color:var(--muted)}
html[data-theme="dark"] .shero-icon-teal{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-cyan{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-sky{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .shero-icon-slate{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-actlog-search svg{color:var(--body)}
html[data-theme="dark"] .ma-dashcolor-reset:hover{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-dashcolor-note-ico{color:var(--body)}
html[data-theme="dark"] .ma-chd-reset:hover{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-h{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-chd-h-del{color:var(--body)}
html[data-theme="dark"] .ma-chd-h:hover{color:var(--body)}
html[data-theme="dark"] .ma-chd-h-del:hover{color:var(--body)}
html[data-theme="dark"] .ma-chd-switch-knob{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-layer:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-chd-layer-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-cat:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-chd-shape-back{color:var(--body)}
html[data-theme="dark"] .ma-chd-shape-back:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-chd-srch-back{color:var(--body)}
html[data-theme="dark"] .ma-chd-lyr:hover .ma-chd-lyr-grip{color:var(--muted)}
html[data-theme="dark"] .ma-chd-lyr-sw{border-color:var(--bdr)}
html[data-theme="dark"] .ma-chd-lyr-menu button svg{color:var(--body)}
html[data-theme="dark"] .ma-chd-lay-frame{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-ctx-font option{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-chd-ctx-font optgroup{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-chd-own-drop:hover{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-chd-own-drop.over{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-chd-own-card{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-own-x{border-color:var(--bdr)}
html[data-theme="dark"] .ma-chd-laycat:hover{color:var(--body)}
html[data-theme="dark"] .ma-hlm-hdr-ico{background-color:var(--surf);color:var(--body)}
html[data-theme="dark"] .ma-hlm-rail::-webkit-scrollbar-thumb{background-color:var(--surf3)}
html[data-theme="dark"] .ma-hlm-cat-ico{color:var(--body)}
html[data-theme="dark"] .ma-hlm-main::-webkit-scrollbar-thumb{background-color:var(--surf3)}
html[data-theme="dark"] .ma-chd-own-req svg{color:var(--body)}
html[data-theme="dark"] .ma-ptcard-edit:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-tple-x{color:var(--text)}
html[data-theme="dark"] .ma-tple-x:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-tple-frame{background-color:var(--surf)}
html[data-theme="dark"] .ma-tple-loading{color:var(--body)}
html[data-theme="dark"] .ma-tple-collapse{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-tple-sw::after{background-color:var(--surf)}
html[data-theme="dark"] .ma-tple-reset:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-tple-fmt-ico{color:var(--text)}
html[data-theme="dark"] .ma-tple-b{border-color:var(--bdr)}
html[data-theme="dark"] .ma-tple-clr:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-chd-surface{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-win-grip{color:var(--body)}
html[data-theme="dark"] .ma-chd-win-x{color:var(--muted)}
html[data-theme="dark"] .ma-chd-drop:hover{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-chd-drop.over{background-color:var(--surf);color:var(--text)}
html[data-theme="dark"] .ma-chd-drop:hover .ma-chd-drop-txt b{color:var(--text)}
html[data-theme="dark"] .ma-chd-drop.over .ma-chd-drop-txt b{color:var(--text)}
html[data-theme="dark"] .ma-chd-viewall{color:var(--body)}
html[data-theme="dark"] .ma-chd-viewall:hover{color:var(--text)}
html[data-theme="dark"] .ma-chd-txtcancel:hover{background-color:var(--surf3)}
html[data-theme="dark"] .rbai-new:hover{background-color:var(--surf3)}
html[data-theme="dark"] .rbai-wa:hover .rbai-ico-wa{background-color:var(--surf3)}
html[data-theme="dark"] .ma-ai-panel-v2.layout-fullpage.rbai-has-rail .ma-ai-cat:hover{color:var(--text)}
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-card:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-thumb{background-color:var(--surf3)}
html[data-theme="dark"] .ma-pthdr-grid-v3 .ma-pthdr-card.active .ma-pthdr-name{color:var(--body)}
html[data-theme="dark"] .ma-ptv3-feature-pv{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptv3-tile:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptv3-tile-thumb{background-color:var(--surf)}
html[data-theme="dark"] .ma-ptv3-tile.active .ma-ptv3-tile-lbl{color:var(--body)}
html[data-theme="dark"] .ma-ptv3-tile-edit{color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptv3-tile-edit:hover{color:var(--body)}
html[data-theme="dark"] .ma-ptmpl-v3 .ma-ptps-lbl{color:var(--body)}
html[data-theme="dark"] .ma-hdrpv-logotxt{color:var(--text)}
html[data-theme="dark"] .ma-hdrpv-names b{color:var(--text)}
html[data-theme="dark"] .ma-hdrpv-names i{color:var(--muted)}
html[data-theme="dark"] .ma-hdrpv-meta em{color:var(--muted)}
html[data-theme="dark"] .ma-hdrpv-meta b{color:var(--text)}
html[data-theme="dark"] .ma-hdrpv-contact span{color:var(--text)}
html[data-theme="dark"] .ma-hdrpv-contact svg{color:var(--text)}
html[data-theme="dark"] .ma-hdrpv-lines i{background-color:var(--surf3)}
html[data-theme="dark"] .ma-hdrpv.is-blank{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptg-item:hover{border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptg-pv{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-ptg-item.active .ma-ptg-name{color:var(--body)}
html[data-theme="dark"] .ma-ptg-edit:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-ptg-none{color:var(--muted)}
html[data-theme="dark"] .ma-emo-note{color:var(--muted)}
html[data-theme="dark"] .ma-emo-sw-knob{background-color:var(--surf)}
html[data-theme="dark"] .ma-emo-ev{color:var(--body)}
html[data-theme="dark"] .ma-emo-ev-sub{color:var(--body)}
html[data-theme="dark"] .ma-emo-empty{color:var(--body)}
html[data-theme="dark"] .ma-emo-search:hover{background-color:var(--surf);border-color:var(--bdr)}
html[data-theme="dark"] .ma-tpl-lead a{color:var(--body)}
html[data-theme="dark"] .ma-tpl-name{color:var(--body)}
html[data-theme="dark"] .ma-tpl-sign{color:var(--body)}
html[data-theme="dark"] .ma-tpl-item.open .ma-tpl-sign{color:var(--body)}
html[data-theme="dark"] .ma-tpl-hint code{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-tpl-tab{color:var(--body)}
html[data-theme="dark"] .ma-tpl-field>label{color:var(--text)}
html[data-theme="dark"] .ma-tpl-block{color:var(--text)}
html[data-theme="dark"] .ma-tpl-row:hover .ma-acc-chev{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-expfmt-hdr i{color:var(--body)}
html[data-theme="dark"] .ma-expfmt-x{color:var(--body)}
html[data-theme="dark"] .ma-expfmt-x:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-expfmt-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-expfmt-desc{color:var(--muted)}
html[data-theme="dark"] .rbai-chat-x{color:var(--muted)}
html[data-theme="dark"] .ma-chd-step.tone-blue .ma-chd-step-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-step.tone-green .ma-chd-step-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-step.tone-amber .ma-chd-step-ico{background-color:var(--surf3);color:var(--muted)}
html[data-theme="dark"] .ma-chd-step.tone-violet .ma-chd-step-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-step.tone-cyan .ma-chd-step-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-chd-step.tone-blue:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-step.tone-green:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-step.tone-amber:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-step.tone-violet:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-step.tone-cyan:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-chd-fs-x{color:var(--text)}
html[data-theme="dark"] .ma-chd-fs-x:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-promo p{color:var(--body)}
html[data-theme="dark"] .ma-bk-zero{color:var(--body)}
html[data-theme="dark"] .ma-bk-ico{background-color:var(--surf);color:var(--body);border-color:var(--bdr)}
html[data-theme="dark"] .ma-bk-main i{color:var(--muted)}
html[data-theme="dark"] .ma-bk-upi{color:var(--body)}
html[data-theme="dark"] .ma-bk-def{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-bk-mini:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-bk-menu button{color:var(--text)}
html[data-theme="dark"] .ma-bk-menu button:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-menu button.is-danger{color:var(--body)}
html[data-theme="dark"] .ma-bk-menu button.is-danger:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-empty{color:var(--muted)}
html[data-theme="dark"] .ma-bk-note li{color:var(--text)}
html[data-theme="dark"] .ma-bk-note li.is-warn{color:var(--body)}
html[data-theme="dark"] .ma-bk-i{color:var(--muted);border-color:var(--bdr)}
html[data-theme="dark"] .ma-bk-i.is-warn{color:var(--body)}
html[data-theme="dark"] .ma-bk-side-x{color:var(--text)}
html[data-theme="dark"] .ma-bk-side-x:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-card-t{color:var(--text)}
html[data-theme="dark"] .ma-bk-l{color:var(--text)}
html[data-theme="dark"] .ma-bk-l.req::before{color:var(--body)}
html[data-theme="dark"] .ma-bk-opt{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-bk-join-b{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-bk-join-b:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-hint{color:var(--muted)}
html[data-theme="dark"] .ma-bk-sw::after{background-color:var(--surf)}
html[data-theme="dark"] .ma-bk-swap button{background-color:var(--surf);color:var(--text);border-color:var(--bdr)}
html[data-theme="dark"] .ma-bk-swap button:hover{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-tx-a{color:var(--text)}
html[data-theme="dark"] .ma-bk-tx-v{color:var(--text)}
html[data-theme="dark"] .ma-bk-pick-arrow{color:var(--muted)}
html[data-theme="dark"] .ma-bk-pick-list::-webkit-scrollbar-thumb{background-color:var(--surf3)}
html[data-theme="dark"] .ma-bk-pick-none{color:var(--muted)}
html[data-theme="dark"] #bk-upi-verify.ok{color:var(--body)}
html[data-theme="dark"] .ma-bkdel-ico{background-color:var(--surf3);color:var(--body)}
html[data-theme="dark"] .ma-bkdel-x{color:var(--body)}
html[data-theme="dark"] .ma-bkdel-x:hover{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-bkdel-warn li{color:var(--body)}
html[data-theme="dark"] .ma-bkdel-cancel:hover{background-color:var(--surf)}
html[data-theme="dark"] .ma-bk-vtick.ok{color:var(--body)}
html[data-theme="dark"] .ma-bk-hint.is-ok{color:var(--body)}
html[data-theme="dark"] .ma-bk-hint.is-bad{color:var(--text)}
html[data-theme="dark"] .ma-item-toggle:has(.ma-item-toggle-plus):hover{color:var(--text)}
html[data-theme="dark"] .ma-item-toggle:has(.ma-item-toggle-plus):focus{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-item-toggle:has(.ma-item-toggle-plus):focus-visible{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-item-toggle:has(.ma-item-toggle-plus):active{background-color:var(--surf3);color:var(--text)}
html[data-theme="dark"] .ma-setact-more:hover{background-color:var(--surf)}
/* ═══════════ END v3.9.627 ═══════════ */

/* ═══ v3.9.647 — Pending Payments, aligned to the system theme ════════
   This page carried its badge colours as inline hex, so it ignored the
   active colour palette and its pale pills stayed light-on-light in dark
   mode. Everything now runs through classes with both light and dark
   values, matching the Sale Outstanding report it sits beside.
════════════════════════════════════════════════════════════════════════ */

/* Tinted danger summary card, same treatment as Sale Outstanding */
.ma-sc-danger{ background:linear-gradient(135deg,#fee2e2 0%,var(--surf) 100%); }
html[data-theme="dark"] .ma-sc-danger{
  background:linear-gradient(135deg,rgba(220,38,38,.20) 0%,var(--surf) 100%);
}
.ma-val-danger{ color:#dc2626; }
html[data-theme="dark"] .ma-val-danger{ color:#f87171; }

/* Row typography */
.ma-pp-name{ font-weight:700; }
.ma-pp-due{ font-weight:700; text-align:right; color:#dc2626; white-space:nowrap; }
html[data-theme="dark"] .ma-pp-due{ color:#f87171; }
.ma-pp-dash{ color:var(--muted); font-size:12px; }

/* Pending-bill count chip */
.ma-pp-count{
  display:inline-block; min-width:22px; padding:2px 9px;
  border-radius:12px; font-weight:700; font-size:12px;
  background:#FEF3C7; color:#92400E; border:1px solid #FDE68A;
}
html[data-theme="dark"] .ma-pp-count{
  background:rgba(245,158,11,.18); color:#FCD34D; border-color:rgba(245,158,11,.35);
}

/* Ageing badges */
.ma-pp-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-weight:700; font-size:12px; white-space:nowrap;
  border:1px solid transparent;
}
.ma-pp-ico{ width:12px; height:12px; flex-shrink:0; }
.ma-pp-badge.is-due { background:#EFF6FF; border-color:#BAE6FD; color:#0369A1; }
.ma-pp-badge.is-warn{ background:#FEF3C7; border-color:#FDE68A; color:#92400E; }
.ma-pp-badge.is-late{ background:#FFF7ED; border-color:#FED7AA; color:#C2410C; }
.ma-pp-badge.is-crit{ background:#FEF2F2; border-color:#FECACA; color:#DC2626; }
html[data-theme="dark"] .ma-pp-badge.is-due { background:rgba(3,105,161,.20);  border-color:rgba(3,105,161,.42);  color:#7DD3FC; }
html[data-theme="dark"] .ma-pp-badge.is-warn{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.38); color:#FCD34D; }
html[data-theme="dark"] .ma-pp-badge.is-late{ background:rgba(249,115,22,.18); border-color:rgba(249,115,22,.38); color:#FDBA74; }
html[data-theme="dark"] .ma-pp-badge.is-crit{ background:rgba(220,38,38,.18);  border-color:rgba(220,38,38,.40);  color:#FCA5A5; }

/* Customer / supplier tag */
.ma-pp-tag{
  display:inline-block; margin-left:6px; padding:2px 8px;
  border-radius:10px; font-weight:700; font-size:11px; letter-spacing:.02em;
  border:1px solid transparent; vertical-align:middle;
}
.ma-pp-tag.is-customer{ background:#DBEAFE; border-color:#93C5FD; color:#1E40AF; }
.ma-pp-tag.is-supplier{ background:#FEF3C7; border-color:#FDE68A; color:#92400E; }
html[data-theme="dark"] .ma-pp-tag.is-customer{ background:rgba(37,99,235,.20); border-color:rgba(37,99,235,.42); color:#93C5FD; }
html[data-theme="dark"] .ma-pp-tag.is-supplier{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.38); color:#FCD34D; }

@media (max-width:640px){
  .ma-pp-tag{ display:none; }          /* the column header already says which */
  .ma-pp-badge{ padding:3px 8px; font-size:11px; }
}
/* ═══════════ END v3.9.647 ═══════════ */

/* v3.9.649 — pending-payment heading icon (replaces the hourglass emoji) */
.ma-pp-hdr-ico{ width:16px; height:16px; flex-shrink:0; }
#pp-inv-cust-title{ display:inline-flex; align-items:center; gap:7px; }
.ma-empty .ei .ma-pp-hdr-ico{ width:30px; height:30px; opacity:.55; }

/* v3.9.651 — pending-payment search panel trimmings */
.oi-search-actions{
  display:flex; justify-content:flex-end; gap:10px;
  padding-top:14px; margin-top:4px;
}
.qt-adv-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surf3,#EEF2F7); color:var(--text,#111827);
  border:1px solid var(--bdr,#E5E7EB); border-radius:16px;
  padding:4px 6px 4px 12px; margin:6px 6px 0 0; font-size:12px;
}
.qt-adv-chip button{
  border:none; background:transparent; cursor:pointer;
  color:var(--muted,#6B7280); font-size:15px; line-height:1; padding:0 4px;
}
.qt-adv-chip button:hover{ color:#DC2626; }
.ma-inline-note{
  background:#FEF3C7; border:1px solid #FDE68A; color:#92400E;
  border-radius:8px; padding:9px 12px; font-size:12.5px; margin-bottom:12px;
}
html[data-theme="dark"] .ma-inline-note{
  background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.36); color:#FCD34D;
}

/* ═══ v3.9.653 — Pending Payments summary modal ══════════════════════ */
.ma-ppsum-hero{
  display:flex; gap:18px; flex-wrap:wrap;
  background:linear-gradient(135deg,#FEE2E2 0%,var(--surf) 62%);
  border:1px solid var(--bdr,#E5E7EB); border-radius:12px;
  padding:16px 18px; margin:10px 0 6px;
}
html[data-theme="dark"] .ma-ppsum-hero{
  background:linear-gradient(135deg,rgba(220,38,38,.20) 0%,var(--surf) 62%);
}
.ma-ppsum-hero-l{ flex:1; min-width:190px; }
.ma-ppsum-hero-l .k{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.ma-ppsum-hero-l .v{ font-size:27px; font-weight:800; color:#DC2626; line-height:1.2; margin-top:3px; }
html[data-theme="dark"] .ma-ppsum-hero-l .v{ color:#F87171; }
.ma-ppsum-hero-l .s{ font-size:12px; color:var(--muted); margin-top:3px; }
.ma-ppsum-hero-r{
  flex:1; min-width:210px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; align-content:center;
}
.ma-ppsum-hero-r > div{ display:flex; flex-direction:column; }
.ma-ppsum-hero-r .k{ font-size:10.5px; color:var(--muted); }
.ma-ppsum-hero-r .v{ font-size:14.5px; font-weight:700; color:var(--text,#111827); }

.ma-ppsum-h{ font-weight:700; font-size:13px; margin:16px 0 7px; color:var(--text,#111827); }
.ma-ppsum-bar{
  display:flex; height:12px; border-radius:7px; overflow:hidden;
  background:var(--surf3,#EEF2F7); margin-bottom:10px;
}
.ma-ppsum-seg{ min-width:3px; transition:flex .25s ease; }
.ma-ppsum-seg.is-empty{ background:var(--surf3,#EEF2F7); }
.ma-ppsum-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:8px; vertical-align:middle;
}
.ma-ppsum-tbl{ width:100%; font-size:13px; }
.ma-ppsum-tbl .r{ text-align:right; }
.ma-ppsum-pct{ color:var(--muted); }
@media (max-width:560px){
  .ma-ppsum-hero-r{ grid-template-columns:1fr; }
  .ma-ppsum-hero-l .v{ font-size:23px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.656 — Sale / Purchase Invoice search panel (.ma-docsrch)
   ───────────────────────────────────────────────────────────────────
   Builds on .oi-search-panel / .oi-search-grid / .qt-adv-* (Quotation)
   and only adds the reference-screenshot details, scoped to the Sale
   Invoice and Purchase Invoice list pages:
     • while the panel is open the title row and the panel read as one
       card, with an inset divider under the title row
     • the Search pill looks pressed while its panel is open
     • 14px labels, 34px controls, date boxes blank until a date is set
═══════════════════════════════════════════════════════════════════ */
#pg-invoices.ma-docsrch-open > .ma-list-hdr,
#pg-purchase-invoices.ma-docsrch-open > .ma-list-hdr{
  position:relative;
  margin-bottom:0;
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
}
#pg-invoices.ma-docsrch-open > .ma-list-hdr::after,
#pg-purchase-invoices.ma-docsrch-open > .ma-list-hdr::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:0;
  height:1px; background:var(--bdr);
  pointer-events:none;
}
#pg-invoices .ma-list-pill.is-on,
#pg-purchase-invoices .ma-list-pill.is-on{
  background:var(--surf3,#E9ECEF);
  border-color:var(--bdr);
}

.oi-search-panel.ma-docsrch{
  border-top:0;
  border-radius:0 0 10px 10px;
  box-shadow:var(--shadow);
  padding:20px 20px 24px;
  margin-bottom:24px;
}
.ma-docsrch .oi-search-grid{ gap:10px 11px; }
.ma-docsrch .oi-fg{ gap:5px; min-width:0; }
.ma-docsrch .oi-fg > label{
  font-size:14px; font-weight:400; line-height:17px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ma-docsrch .oi-fg > input,
.ma-docsrch .oi-fg > select,
.ma-docsrch .qt-adv-row > input,
.ma-docsrch .qt-adv-row > select{
  height:34px; padding:6px 12px; border-radius:5px;
  font-size:13px; line-height:20px;
}
.ma-docsrch .qt-adv-row > select{ padding-right:8px; }
/* Grid dropdowns get the reference's small grey caret; the Advance Filter
   dropdowns keep the native arrow, as in the reference */
.ma-docsrch .oi-fg > select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:8px 5px;
  padding-right:28px;
}

/* Date boxes: blank until a date is picked; a click anywhere opens the picker */
.ma-docsrch input[type="date"]{ position:relative; }
.ma-docsrch input[type="date"].is-empty:not(:focus)::-webkit-datetime-edit{ color:transparent; }
.ma-docsrch input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:auto; height:auto; margin:0; padding:0;
  opacity:0; cursor:pointer;
}

/* Advance Filter: no dashed rule; label and row spaced like the reference */
.ma-docsrch .qt-adv-block{ margin-top:30px; padding-top:0; border-top:0; }
.ma-docsrch .qt-adv-lbl{ font-size:14px; font-weight:600; margin:0 0 8px 7px; }
.ma-docsrch .qt-adv-add{ width:30px; height:30px; justify-self:center; }
@media (min-width:901px){ .ma-docsrch .qt-adv-row{ gap:11px; } }

.ma-docsrch .ma-inline-note{ margin:16px 0 0; }
.ma-docsrch .oi-search-actions{ margin-top:32px; padding-top:0; gap:6px; }
.ma-docsrch .oi-search-actions .ma-btn{ min-height:34px; padding:0 16px; font-size:14px; font-weight:600; }

@media (max-width:640px){
  .oi-search-panel.ma-docsrch{ padding:16px 14px 18px; margin-bottom:16px; }
  .ma-docsrch .qt-adv-block{ margin-top:20px; }
  .ma-docsrch .oi-search-actions{ margin-top:20px; }
  .ma-docsrch .oi-search-actions .ma-btn{ flex:1 1 0; justify-content:center; }
}
/* ═══════════ END v3.9.656 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.657 — multi-select dropdowns in the Sale / Purchase search panel
   v3.9.658 — the same component in every section's search panel, so the
   selectors are generic (.ma-ms-* is used by nothing else). The closed
   field matches the panel's other fields — on non-invoice panels app.js
   copies height / padding / radius / font from a sibling input — and the
   open list has a search box, Select All and a checkbox per value.
═══════════════════════════════════════════════════════════════════ */
.ma-ms{ position:relative; min-width:0; }
.ma-ms-btn{
  display:block; width:100%; margin:0; box-sizing:border-box;
  padding:8px 28px 8px 10px;
  border:1px solid var(--bdr); border-radius:6px;
  background-color:var(--surf); color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:8px 5px;
  font-family:inherit; font-size:13px; font-weight:400; line-height:1.25;
  text-align:left; text-transform:none; letter-spacing:normal;
  cursor:pointer; outline:none; box-shadow:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ma-ms-txt{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-ms-btn:focus,
.ma-ms.is-open .ma-ms-btn{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.ma-ms-pop{
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  width:100%; min-width:260px; max-width:420px; box-sizing:border-box;
  background:var(--surf); color:var(--text);
  border:1px solid var(--bdr); border-radius:8px;
  box-shadow:0 10px 28px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);
  padding:8px; text-align:left;
}
.ma-ms-pop[hidden]{ display:none; }
.ma-ms-search{ margin:0 0 6px; }
.ma-ms-q{
  display:block; width:100%; height:32px; margin:0; box-sizing:border-box;
  padding:5px 10px 5px 30px;
  border:1px solid var(--bdr); border-radius:5px;
  background-color:var(--surf); color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center; background-size:13px 13px;
  font-family:inherit; font-size:13px; outline:none;
}
.ma-ms-q:focus{ border-color:var(--brand); }
.ma-ms-list{ max-height:232px; overflow-y:auto; overscroll-behavior:contain; }
.ma-ms-opt{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:6px 8px; border-radius:5px;
  font-size:13px; font-weight:400; line-height:18px; color:var(--text);
  cursor:pointer; min-width:0; user-select:none;
}
.ma-ms-opt:hover{ background:var(--surf3); }
.ma-ms-opt input{
  flex:0 0 auto; width:15px; height:15px; margin:0; padding:0;
  accent-color:var(--brand); cursor:pointer;
}
/* the value keeps its full width; the grey hint takes what is left and shortens first */
.ma-ms-v{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-ms-sub{
  flex:1 1 0; min-width:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; color:var(--hint);
}
.ma-ms-all{
  font-weight:600; margin-bottom:4px; padding-bottom:8px;
  border-bottom:1px solid var(--bdr); border-radius:5px 5px 0 0;
}
.ma-ms-empty{ padding:10px 8px; font-size:12.5px; color:var(--muted); }
@media (max-width:640px){
  .ma-ms-pop{ max-width:none; }
  .ma-ms-list{ max-height:260px; }
  .ma-ms-opt{ padding:9px 8px; }
}
/* invoice panels keep the box tuned to the reference screenshot */
.ma-docsrch .ma-ms-btn{ height:34px; padding:6px 28px 6px 12px; border-radius:5px; line-height:20px; }
/* ═══════════ END v3.9.657 / v3.9.658 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.659 — "BS Agent" chatbot launcher (wp-admin › Billing Saathi ›
   Chatbot › BS Agent). A 38px tab docked to the side of the screen:
   sparkle icon, "BS Agent", drag grip. Colours follow the Layout &
   Colour theme — the same --header / --header-d pair as the top bar.
   Only present in the page when the admin chose BS Agent.
═══════════════════════════════════════════════════════════════════ */
.ma-agent-tab{
  position:fixed; top:calc(60% - 19px); right:0; left:auto; z-index:99998;
  display:flex; align-items:stretch; height:38px; box-sizing:border-box;
  margin:0; padding:0;
  background:var(--header, #2563EB);
  background:linear-gradient(180deg, var(--header, #2563EB) 0%, var(--header-d, #1D4ED8) 100%);
  color:#fff;
  border-radius:19px 0 0 19px;
  box-shadow:0 6px 18px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.12);
  font-family:inherit;
  touch-action:none; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease, transform .25s ease, box-shadow .2s ease, border-radius .2s ease, filter .15s ease;
}
.ma-agent-tab.is-left{ left:0; right:auto; border-radius:0 19px 19px 0; }
.ma-agent-tab:hover{ filter:brightness(.94); box-shadow:0 8px 22px rgba(15,23,42,.24), 0 1px 3px rgba(15,23,42,.12); }
.ma-agent-tab .ma-agent-open,
.ma-agent-tab .ma-agent-grip{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; height:auto; min-height:0; min-width:0; margin:0;
  background:transparent; border:0; border-radius:inherit; box-shadow:none;
  color:inherit; font:inherit; line-height:1; text-transform:none; cursor:pointer;
}
.ma-agent-tab .ma-agent-open{
  gap:9px; padding:0 4px 0 16px;
  font-size:14.5px; font-weight:600; letter-spacing:.1px; white-space:nowrap;
}
.ma-agent-tab .ma-agent-ico{ width:18px; height:18px; flex:0 0 auto; }
.ma-agent-tab .ma-agent-grip{ padding:0 12px 0 9px; cursor:grab; }
.ma-agent-tab .ma-agent-grip svg{ width:10px; height:16px; opacity:.85; flex:0 0 auto; }
/* docked on the left: the grip stays on the screen-edge side */
.ma-agent-tab.is-left .ma-agent-grip{ order:-1; padding:0 9px 0 12px; }
.ma-agent-tab.is-left .ma-agent-open{ padding:0 16px 0 4px; }
.ma-agent-tab .ma-agent-open:focus-visible,
.ma-agent-tab .ma-agent-grip:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:-5px; }
/* while dragged it floats free as a full pill, then glides to the nearer edge */
.ma-agent-tab.is-dragging{
  border-radius:19px; transition:none; transform:scale(1.04);
  box-shadow:0 16px 36px rgba(15,23,42,.30), 0 2px 6px rgba(15,23,42,.14);
}
.ma-agent-tab.is-dragging,
.ma-agent-tab.is-dragging .ma-agent-open,
.ma-agent-tab.is-dragging .ma-agent-grip{ cursor:grabbing; }
.ma-agent-tab.is-docking{
  transition:left .24s cubic-bezier(.2,.8,.2,1), top .24s cubic-bezier(.2,.8,.2,1),
             border-radius .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* while the chat is open the tab steps aside (the chat has its own close ✕) */
.ma-agent-tab.is-away{ opacity:0; pointer-events:none; transform:translateX(110%); }
.ma-agent-tab.is-left.is-away{ transform:translateX(-110%); }

/* v3.9.672 — which button shows (and where) is decided by classes on <html>;
   see the v3.9.672 block at the end of this file */
/* each user's own Settings › General show / hide switch covers BS Agent too */
body.rb-hide-chatbot-fab #ma-agent-tab{ display:none !important; }
@media (max-width:640px){
  .ma-agent-tab{ height:36px; border-radius:18px 0 0 18px; }
  .ma-agent-tab.is-left{ border-radius:0 18px 18px 0; }
  .ma-agent-tab .ma-agent-open{ gap:8px; padding-left:14px; font-size:13.5px; }
  .ma-agent-tab.is-left .ma-agent-open{ padding:0 14px 0 4px; }
  .ma-agent-tab .ma-agent-grip{ padding:0 10px 0 8px; }
  .ma-agent-tab.is-left .ma-agent-grip{ padding:0 8px 0 10px; }
}
@media print{ .ma-agent-tab{ display:none !important; } }
/* ═══════════ END v3.9.659 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.660 — Dark mode: header buttons + company switcher
   • Ask AI, Create and the account avatar keep their white light-mode
     face on the coloured header in dark mode. Earlier dark passes painted
     them near-black / dark slate (v3.9.3xx rule for .ma-ask-ai-inner and
     the generated block for .ma-hd-create / .ma-hd-avatar), which looked
     muddy on the header colour and left dark text on a dark fill.
   • Their text is a dark shade of the header colour — the same shade
     light mode uses (--brand-dd = brand darkened 32%).
   • Company switcher: the active row's tint now comes from the theme in
     dark mode (see _darkCSS in app.js); its border follows the theme too.
═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ma-ask-ai-inner{ background:#ffffff !important; color:#111827 !important; }
html[data-theme="dark"] .ma-hd-create,
html[data-theme="dark"] .ma-hd-avatar{
  background-color:#ffffff;
  color:var(--brand-dd);
  color:color-mix(in srgb, var(--header, #2563EB) 68%, #000);
}
html[data-theme="dark"] .ma-cs-item.active{
  border-color:rgba(0,186,139,.35);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent);
}
/* ═══════════ END v3.9.660 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.661 — Settings › Document Options › Payment Type
   White card with a 5px theme-colour bar, theme-colour title and a rule
   under it; 291px-wide 33px option boxes 6px apart (#CCC border, #555
   text), CREDIT fixed in grey, theme-colour border + soft ring on focus,
   and an "Add Option" button in the theme colour.
═══════════════════════════════════════════════════════════════════ */
.ma-pt-card{ background:var(--surf); border-radius:6px; overflow:hidden; }
.ma-pt-hd{
  position:relative; display:flex; align-items:center; height:46px; box-sizing:border-box;
  padding:0 16px; border-bottom:1px solid #E5E5E5;
  color:var(--brand); font-size:14.5px; font-weight:600; letter-spacing:.1px;
}
.ma-pt-hd::before{ content:""; position:absolute; left:0; top:4px; bottom:0; width:5px; background:var(--brand); border-radius:2px 2px 0 0; }
.ma-pt-body{ padding:19px 16px 22px 15px; }
.ma-pt-list{ display:flex; flex-direction:column; gap:6px; max-width:291px; margin:0; }
.ma-pt-card .ma-pt-row{ position:relative; display:block; }
.ma-pt-card .ma-pt-input{
  display:block; width:100%; height:33px; box-sizing:border-box; margin:0;
  padding:0 30px 0 17px; border:1px solid #CCCCCC; border-radius:6px;
  background:#fff; color:#555555; font-family:inherit; font-size:13px; font-weight:400;
  outline:none; box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
.ma-pt-card .ma-pt-input::placeholder{ color:#9CA3AF; }
.ma-pt-card .ma-pt-input:focus{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-bg); }
.ma-pt-card .ma-pt-row.is-fixed .ma-pt-input{ background:#EEEEEE; border-color:#EEEEEE; color:#555555; cursor:default; box-shadow:none; }
.ma-pt-card .ma-pt-rm{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; border:0; border-radius:4px; background:transparent;
  color:#9CA3AF; font-size:17px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s;
}
.ma-pt-card .ma-pt-row:hover .ma-pt-rm,
.ma-pt-card .ma-pt-rm:focus-visible{ opacity:1; }
@media (hover:none){ .ma-pt-card .ma-pt-rm{ opacity:.7; } }   /* phones: no hover, keep it reachable */
.ma-pt-card .ma-pt-rm:hover{ color:#DC2626; background:rgba(220,38,38,.08); }
.ma-pt-card .ma-pt-add{
  display:inline-flex; align-items:center; height:34px; margin:6px 0 0; padding:0 17px;
  border:0; border-radius:6px; background:var(--brand); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:background .15s;
}
.ma-pt-card .ma-pt-add:hover{ background:var(--brand-d); }
.ma-pt-card .ma-pt-add:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
html[data-theme="dark"] .ma-pt-hd{ border-bottom-color:var(--bdr); }
html[data-theme="dark"] .ma-pt-card .ma-pt-input{ background:var(--surf); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-pt-card .ma-pt-row.is-fixed .ma-pt-input{ background:var(--surf3); border-color:var(--surf3); color:var(--muted); }
@media (max-width:640px){ .ma-pt-list{ max-width:none; } }
/* ═══════════ END v3.9.661 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.662 — Settings › Bank Details follows the theme
   The Banks list and editor (v3.9.597) hard-coded blue (#2563EB) for the
   buttons, the default switch and focus rings, and fixed greys / navies
   for text, cards and borders, so a Layout & Colour palette — light or
   dark — never reached this section. Everything below reads the theme
   variables instead. Red (delete, warnings, required marks) and the
   green / red verify results keep their meaning. (The Backup feature's
   .ma-bk-info / -sched / -import / -preview classes are not touched.)
═══════════════════════════════════════════════════════════════════ */
/* theme colour: actions, switch, focus, icons, badges */
.ma-bk-btn, .ma-bk-save{ background:var(--brand); }
.ma-bk-btn:hover, .ma-bk-save:hover{ background:var(--brand-d); }
.ma-bk-save:disabled{ opacity:.6; cursor:progress; }
.ma-bk-sw.on{ background:var(--brand); }
.ma-bk-zero{ color:var(--brand); }
.ma-bk-ico{ background:var(--brand-bg); border-color:transparent; color:var(--brand); }
.ma-bk-def{ background:var(--brand-bg); color:var(--brand-dd); }
.ma-bk-i:not(.is-warn){ border-color:var(--brand); color:var(--brand); }
.ma-bk-in:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-bg); }
.ma-bk-mini:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }
.ma-bk-join-b{ color:var(--brand); }
.ma-bk-join-b:hover, .ma-bk-pick-i:hover, .ma-bk-menu button:not(.is-danger):hover{ background:var(--brand-bg); }
/* theme surfaces, borders and text */
.ma-bk-title, .ma-bk-promo-t, .ma-bk-note-t, .ma-bk-main b, .ma-bk-side-t, .ma-bk-card-t, .ma-bk-tx-v{ color:var(--heading, var(--text)); }
.ma-bk-promo p, .ma-bk-note li:not(.is-warn), .ma-bk-l, .ma-bk-mini, .ma-bk-menu button:not(.is-danger),
.ma-bk-side-x, .ma-bk-swap button, .ma-bk-tx-a, .ma-bk-pick-i{ color:var(--body, var(--text)); }
.ma-bk-main i, .ma-bk-upi, .ma-bk-empty, .ma-bk-hint:not(.is-ok):not(.is-bad), .ma-bk-tx-d,
.ma-bk-pick-arrow, .ma-bk-pick-none, .ma-bk-upi-txt i, .ma-bk-opt{ color:var(--muted); }
.ma-bk-promo, .ma-bk-note, .ma-bk-row.is-cash, .ma-bk-side, .ma-bk-opt{ background:var(--surf2); }
.ma-bk-list, .ma-bk-row, .ma-bk-card, .ma-bk-side-hd, .ma-bk-side-ft, .ma-bk-in, .ma-bk-mini, .ma-bk-menu, .ma-bk-pick-list{ background:var(--surf); }
.ma-bk-join-b{ background:var(--surf2); }
.ma-bk-promo, .ma-bk-note, .ma-bk-list, .ma-bk-row, .ma-bk-mini, .ma-bk-menu, .ma-bk-side-hd, .ma-bk-side-ft,
.ma-bk-card, .ma-bk-in, .ma-bk-join-b, .ma-bk-swap button, .ma-bk-tx, .ma-bk-pick-list{ border-color:var(--bdr); }
.ma-bk-side-x:hover, .ma-bk-swap button:hover, .ma-bk-pick-arrow:hover{ background:var(--surf3); color:var(--text); }
/* dark mode: the same variables (the old rules fixed #0F172A / #1E293B / #0B1120) */
html[data-theme="dark"] .ma-bk-title, html[data-theme="dark"] .ma-bk-promo-t, html[data-theme="dark"] .ma-bk-note-t{ color:var(--heading, var(--text)); }
html[data-theme="dark"] .ma-bk-promo, html[data-theme="dark"] .ma-bk-note{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-bk-list{ border-color:var(--bdr); }
html[data-theme="dark"] .ma-bk-row{ background:var(--surf); border-color:var(--bdr); }
html[data-theme="dark"] .ma-bk-row.is-cash{ background:var(--surf2); }
html[data-theme="dark"] .ma-bk-side{ background:var(--surf2); }
html[data-theme="dark"] .ma-bk-side-hd, html[data-theme="dark"] .ma-bk-side-ft,
html[data-theme="dark"] .ma-bk-card{ background:var(--surf); border-color:var(--bdr); }
html[data-theme="dark"] .ma-bk-in{ background:var(--surf); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-bk-mini, html[data-theme="dark"] .ma-bk-menu{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-bk-pick-list{ background:var(--surf); border-color:var(--bdr); }
html[data-theme="dark"] .ma-bk-pick-i{ color:var(--text); }
html[data-theme="dark"] .ma-bk-pick-i:hover{ background:var(--brand-bg); }
html[data-theme="dark"] .ma-bk-pick-arrow:hover{ background:var(--surf3); color:var(--text); }
html[data-theme="dark"] .ma-bk-def{ color:var(--brand); }
html[data-theme="dark"] .ma-bk-sw:not(.on){ background:var(--surf3); }
/* ═══════════ END v3.9.662 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.663 — Dashboard › Inward Payment (redesign, reference image)
   v3.9.664 — Outward Payment in the same design; three cards in one row
   v3.9.665 — Donut beside the list in the row (compact); no period picker
   Both payment cards use .ma-ipc and size themselves from their own width
   (container queries): under 380px the donut sits above the list; from
   380px it sits beside the list at compact sizes (the three-card row);
   from 760px the reference's full-size layout. Colours come from the
   theme: --brand for the icon tile, icons, bars and chevrons, tints of it
   for the donut, icon circles and row panels (color-mix, with plain
   fallbacks). The donut's centre text scales with the donut.
═══════════════════════════════════════════════════════════════════ */
.ma-three.ma-paymix-row > .ma-ipc{ min-width:0; }
.ma-ipc{ container:ipc / inline-size; padding:14px 16px 16px; border-radius:16px; }

/* header */
.ma-ipc-hd{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.ma-ipc-title{ flex:1 1 auto; min-width:0; margin:0; font-size:16px; font-weight:700; line-height:1.2; color:var(--heading, var(--text)); letter-spacing:-.1px; }

/* donut + list: stacked on a narrow card */
.ma-ipc-body{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-items:center; }
.ma-ipc.is-loading .ma-ipc-body{ opacity:.55; transition:opacity .2s; }
.ma-ipc-chart{ container:ipcchart / inline-size; position:relative; width:100%; max-width:220px; aspect-ratio:1 / 1; justify-self:center; }
.ma-ipc-donut{ display:block; width:100%; height:100%; }
.ma-ipc-donut circle{ transition:stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }
.ma-ipc-track{ stroke:#E8EDF5; }
.ma-ipc-center{ position:absolute; inset:9.7%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.ma-ipc-lbl{ margin:0 0 3px; font-size:12px; font-size:clamp(9px, 5.4cqi, 14.5px); color:var(--muted); }
.ma-ipc-total{ font-size:16px; font-size:clamp(10px, calc(7.8cqi * var(--k, 1)), 21px); font-weight:800; line-height:1.2; color:var(--heading, var(--text)); letter-spacing:-.2px; white-space:nowrap; }
.ma-ipc-trend{ display:inline-flex; align-items:center; gap:3px; min-height:1.3em; margin-top:6px; font-size:12px; font-size:clamp(9px, 5.4cqi, 14.5px); font-weight:500; }
.ma-ipc-trend svg{ width:1.1em; height:1.1em; }
.ma-ipc-trend.is-good{ color:var(--brand); }
.ma-ipc-trend.is-bad{ color:var(--secondary); }   /* v3.9.671 — theme, not red */
.ma-ipc-trend.is-flat{ color:var(--muted); }

/* mode rows */
.ma-ipc-list{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ma-ipc-row{
  display:flex; align-items:center; gap:12px; width:100%; min-height:54px; box-sizing:border-box; margin:0;
  padding:7px 12px 7px 10px; border:0; border-radius:12px; text-align:left; cursor:pointer;
  background:#F5F8FD; background:color-mix(in srgb, var(--brand) 3%, #F7F9FC);
  color:inherit; font-family:inherit; transition:background .15s;
}
.ma-ipc-row:hover{ background:var(--brand-bg); background:color-mix(in srgb, var(--brand) 7%, #F7F9FC); }
.ma-ipc-row:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.ma-ipc-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-bg2); background:color-mix(in srgb, var(--brand) 14%, #fff); color:var(--brand);
}
.ma-ipc-ico svg{ width:20px; height:20px; }
/* cut-outs in the filled glyphs take the icon circle's colour */
.ma-ipc-ico .ma-ipc-cut{ fill:color-mix(in srgb, var(--brand) 14%, #fff); }
.ma-ipc-ico .ma-ipc-cut-s{ stroke:color-mix(in srgb, var(--brand) 14%, #fff); }
.ma-ipc-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ma-ipc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ma-ipc-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:700; letter-spacing:.2px; text-transform:uppercase; color:var(--heading, var(--text)); }
.ma-ipc-amt{ flex:0 0 auto; font-size:14px; font-weight:800; white-space:nowrap; color:var(--heading, var(--text)); }
.ma-ipc-bot{ display:flex; align-items:center; gap:10px; }
.ma-ipc-bar{ flex:1 1 auto; height:6px; border-radius:4px; overflow:hidden; background:#E8EDF5; }
.ma-ipc-bar i{ display:block; height:100%; min-width:6px; max-width:100%; border-radius:4px; background:var(--brand); }
.ma-ipc-pct{ flex:0 0 auto; min-width:42px; text-align:right; font-size:11.5px; color:#5C6884; }
.ma-ipc-chev{ flex:0 0 auto; display:flex; color:var(--brand); }
.ma-ipc-chev svg{ width:16px; height:16px; }
.ma-ipc-empty{ padding:18px 10px; text-align:center; font-size:13px; color:var(--muted); }

/* the three-card row: donut beside the list, compact (like the mockup) */
@container ipc (min-width: 380px){
  .ma-ipc-body{ grid-template-columns:clamp(118px, 31cqi, 180px) minmax(0, 1fr); gap:clamp(12px, 3.4cqi, 22px); }
  .ma-ipc-chart{ max-width:none; }
  .ma-ipc-list{ gap:6px; }
  .ma-ipc-row{ min-height:46px; gap:10px; padding:6px 10px 6px 8px; border-radius:11px; }
  .ma-ipc-ico{ width:32px; height:32px; }
  .ma-ipc-ico svg{ width:18px; height:18px; }
  .ma-ipc-main{ gap:5px; }
  .ma-ipc-name{ font-size:11.5px; }
  .ma-ipc-amt{ font-size:12.5px; }
  .ma-ipc-bar{ height:5px; }
  .ma-ipc-bar i{ min-width:5px; }
  .ma-ipc-pct{ min-width:40px; font-size:10.5px; }
  .ma-ipc-chev svg{ width:14px; height:14px; }
}
/* a wide card: the reference's full-size layout */
@container ipc (min-width: 760px){
  .ma-ipc-hd{ gap:18px; margin-bottom:18px; }
  .ma-ipc-title{ font-size:20px; }
  .ma-ipc-body{ grid-template-columns:minmax(240px, 36%) minmax(0, 1fr); gap:36px; }
  .ma-ipc-chart{ max-width:300px; }
  .ma-ipc-list{ gap:8px; }
  .ma-ipc-row{ min-height:65px; gap:20px; padding:8px 22px 8px 17px; border-radius:14px; }
  .ma-ipc-ico{ width:48px; height:48px; }
  .ma-ipc-ico svg{ width:26px; height:26px; }
  .ma-ipc-main{ gap:9px; }
  .ma-ipc-name{ font-size:14.5px; }
  .ma-ipc-amt{ font-size:16.5px; }
  .ma-ipc-bot{ gap:18px; }
  .ma-ipc-bar{ height:9px; border-radius:5px; }
  .ma-ipc-bar i{ min-width:9px; border-radius:5px; }
  .ma-ipc-pct{ min-width:52px; font-size:13.5px; }
  .ma-ipc-chev svg{ width:20px; height:20px; }
}

html[data-theme="dark"] .ma-ipc-row{ background:var(--surf2); }
html[data-theme="dark"] .ma-ipc-row:hover{ background:var(--surf3); }
html[data-theme="dark"] .ma-ipc-ico{ background:color-mix(in srgb, var(--brand) 22%, var(--surf)); }
html[data-theme="dark"] .ma-ipc-ico .ma-ipc-cut{ fill:color-mix(in srgb, var(--brand) 22%, var(--surf)); }
html[data-theme="dark"] .ma-ipc-ico .ma-ipc-cut-s{ stroke:color-mix(in srgb, var(--brand) 22%, var(--surf)); }
html[data-theme="dark"] .ma-ipc-bar, html[data-theme="dark"] .ma-ipc-track{ background:var(--surf3); stroke:var(--surf3); }
html[data-theme="dark"] .ma-ipc-pct{ color:var(--muted); }
/* ═══════════ END v3.9.663 – v3.9.665 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.666 — Dashboard › Expense & Income (redesign, reference image)
   Header tile in the theme colour. Tiles and chart keep the reference's
   v3.9.669 — every colour comes from Settings › Colour & Font: expense =
   Main colour, income = Accent colour, net balance = Secondary colour; a
   change pill takes its tile's colour (the arrow shows the direction) and
   the net amount the net colour (the "-" and the note say which way). No date picker — the section
   follows the dashboard's date filter. Dark mode keeps the hues on the
   theme's dark surfaces. The card sizes itself from its own width
   (container queries): the reference layout from 880px; narrower, the
   tiles put the icon above the figures; under 560px they stack. The
   chart fills whatever height the dashboard row gives the card.
═══════════════════════════════════════════════════════════════════ */
.ma-eic{
  --eic-exp:var(--brand); --eic-inc:var(--accent); --eic-net:var(--secondary);
  container:eic / inline-size; display:flex; flex-direction:column; padding:18px 22px 22px; border-radius:16px; }
.ma-eic-hd{ display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.ma-eic-hd-txt{ min-width:0; }
.ma-eic-title{ margin:0; font-size:20px; font-weight:700; line-height:1.2; letter-spacing:-.1px; color:var(--heading, var(--text)); }
.ma-eic-sub{ margin-top:3px; font-size:14px; color:#64748B; }

.ma-eic-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0 0 16px; }
.ma-eic-kpi{ display:flex; align-items:center; gap:18px; min-width:0; padding:16px 18px; border-radius:14px; }
.ma-eic-kpi.is-exp{ background:#F4F8FE; background:color-mix(in srgb, var(--eic-exp) 5%, #fff); }
.ma-eic-kpi.is-inc{ background:#F2FBF7; background:color-mix(in srgb, var(--eic-inc) 6%, #fff); }
.ma-eic-kpi.is-net{ background:#F7F6FE; background:color-mix(in srgb, var(--eic-net) 5%, #fff); }
.ma-eic-ico{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ma-eic-ico svg{ width:24px; height:24px; }
.is-exp .ma-eic-ico{ background:#E4EDFD; background:color-mix(in srgb, var(--eic-exp) 13%, #fff); color:var(--eic-exp); }
.is-inc .ma-eic-ico{ background:#DCF5EA; background:color-mix(in srgb, var(--eic-inc) 15%, #fff); color:var(--eic-inc); }
.is-net .ma-eic-ico{ background:#E9E6FC; background:color-mix(in srgb, var(--eic-net) 13%, #fff); color:var(--eic-net); }
.ma-eic-kpi-txt{ min-width:0; }
.ma-eic-lbl{ font-size:14px; font-weight:600; color:#475569; }
.ma-eic-val{ margin:2px 0 6px; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--heading, var(--text)); }
.is-exp .ma-eic-val{ color:var(--eic-exp); }
.is-inc .ma-eic-val{ color:var(--eic-inc); }
.is-net .ma-eic-val{ color:var(--eic-net); }
.ma-eic-cmp{ display:flex; align-items:center; gap:10px; font-size:14px; color:#64748B; white-space:nowrap; }
.ma-eic-pill{ display:inline-flex; align-items:center; gap:4px; height:25px; padding:0 10px; border-radius:13px; font-size:13px; font-weight:600; background:#EEF1F5; color:#475569; }
.ma-eic-pill svg{ width:12px; height:12px; }
.is-exp .ma-eic-pill:not(.is-flat){ background:color-mix(in srgb, var(--eic-exp) 12%, #fff); color:var(--eic-exp); }
.is-inc .ma-eic-pill:not(.is-flat){ background:color-mix(in srgb, var(--eic-inc) 14%, #fff); color:var(--eic-inc); }
.ma-eic-note{ font-size:14px; color:#64748B; }

.ma-eic-box{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; padding:16px 18px 8px; border:1px solid #EDF0F5; border-radius:14px; background:#FBFCFE; }
.ma-eic-box-hd{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.ma-eic-box-title{ font-size:16px; font-weight:700; color:var(--heading, var(--text)); }
.ma-eic-box-sub{ margin-top:3px; font-size:13.5px; color:#64748B; }
.ma-eic-legend{ display:flex; align-items:center; gap:18px; padding-top:8px; font-size:14px; color:#475569; }
.ma-eic-legend span{ display:inline-flex; align-items:center; gap:8px; }
.ma-eic-legend i{ width:10px; height:10px; border-radius:50%; }
.ma-eic-legend i.is-exp{ background:var(--eic-exp); }
.ma-eic-legend i.is-inc{ background:var(--eic-inc); }
.ma-eic-chart{ flex:1 1 auto; position:relative; min-height:170px; margin-top:8px; touch-action:pan-y; }
.ma-eic-svg{ position:absolute; left:0; top:0; display:block; overflow:visible; }   /* sized to the chart box, so it never pushes the box taller */
.ma-eic-grid{ stroke:#E3E8EF; stroke-width:1; stroke-dasharray:4 5; }
.ma-eic-grid.is-base{ stroke:#EDF0F5; stroke-dasharray:none; }
.ma-eic-ax{ font-family:inherit; font-size:12px; fill:#7B8AA5; }
.ma-eic-dot{ stroke:#fff; stroke-width:2; }
.ma-eic-guide{ stroke:#CBD5E1; stroke-width:1; stroke-dasharray:3 4; }
.ma-eic-tip{
  position:absolute; top:6px; z-index:5; display:flex; flex-direction:column; gap:3px; padding:8px 11px;
  border-radius:9px; background:#0F172A; color:#fff; font-size:12px; line-height:1.35; white-space:nowrap;
  box-shadow:0 8px 20px rgba(15,23,42,.22); pointer-events:none;
}
.ma-eic-tip[hidden]{ display:none; }   /* the flex rule above would otherwise override [hidden] */
.ma-eic-tip b{ margin-bottom:1px; font-weight:700; }
.ma-eic-tip span{ display:flex; align-items:center; gap:6px; }
.ma-eic-tip i{ width:8px; height:8px; border-radius:50%; }
.ma-eic-tip em{ margin-left:auto; padding-left:10px; font-style:normal; font-weight:700; }
.ma-eic-emptynote{ position:absolute; left:0; right:0; top:34%; text-align:center; font-size:13px; color:#94A3B8; pointer-events:none; }

html[data-theme="dark"] .ma-eic-sub, html[data-theme="dark"] .ma-eic-box-sub,
html[data-theme="dark"] .ma-eic-cmp, html[data-theme="dark"] .ma-eic-note{ color:var(--muted); }
html[data-theme="dark"] .ma-eic-lbl, html[data-theme="dark"] .ma-eic-legend{ color:var(--text); }
html[data-theme="dark"] .ma-eic-kpi.is-exp{ background:color-mix(in srgb, var(--eic-exp) 12%, var(--surf)); }
html[data-theme="dark"] .ma-eic-kpi.is-inc{ background:color-mix(in srgb, var(--eic-inc) 11%, var(--surf)); }
html[data-theme="dark"] .ma-eic-kpi.is-net{ background:color-mix(in srgb, var(--eic-net) 12%, var(--surf)); }
html[data-theme="dark"] .is-exp .ma-eic-ico{ background:color-mix(in srgb, var(--eic-exp) 24%, var(--surf)); color:color-mix(in srgb, var(--eic-exp) 70%, #fff); }
html[data-theme="dark"] .is-inc .ma-eic-ico{ background:color-mix(in srgb, var(--eic-inc) 22%, var(--surf)); color:color-mix(in srgb, var(--eic-inc) 70%, #fff); }
html[data-theme="dark"] .is-net .ma-eic-ico{ background:color-mix(in srgb, var(--eic-net) 24%, var(--surf)); color:color-mix(in srgb, var(--eic-net) 70%, #fff); }
html[data-theme="dark"] .is-exp .ma-eic-val{ color:color-mix(in srgb, var(--eic-exp) 72%, #fff); }
html[data-theme="dark"] .is-inc .ma-eic-val{ color:color-mix(in srgb, var(--eic-inc) 72%, #fff); }
html[data-theme="dark"] .is-net .ma-eic-val{ color:color-mix(in srgb, var(--eic-net) 72%, #fff); }
html[data-theme="dark"] .ma-eic-pill{ background:var(--surf3); color:var(--text); }
html[data-theme="dark"] .is-exp .ma-eic-pill:not(.is-flat){ background:color-mix(in srgb, var(--eic-exp) 20%, var(--surf)); color:color-mix(in srgb, var(--eic-exp) 72%, #fff); }
html[data-theme="dark"] .is-inc .ma-eic-pill:not(.is-flat){ background:color-mix(in srgb, var(--eic-inc) 20%, var(--surf)); color:color-mix(in srgb, var(--eic-inc) 72%, #fff); }
html[data-theme="dark"] .ma-eic-box{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-eic-grid{ stroke:var(--bdr); }
html[data-theme="dark"] .ma-eic-ax{ fill:var(--muted); }
html[data-theme="dark"] .ma-eic-dot{ stroke:var(--surf2); }

/* a medium card (e.g. half of a 1440px dashboard): icon above the figures */
@container eic (max-width: 879px){
  .ma-eic-kpis{ gap:12px; }
  .ma-eic-kpi{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
  .ma-eic-ico{ width:38px; height:38px; }
  .ma-eic-ico svg{ width:20px; height:20px; }
  .ma-eic-lbl{ font-size:13px; }
  .ma-eic-val{ margin:1px 0 6px; font-size:20px; }
  .ma-eic-cmp{ flex-wrap:wrap; gap:6px 8px; font-size:13px; }
  .ma-eic-pill{ height:23px; padding:0 9px; font-size:12px; }
  .ma-eic-note{ font-size:13px; }
}
/* a narrow card: one tile per row, icon beside the figures again */
@container eic (max-width: 559px){
  .ma-eic-kpis{ grid-template-columns:1fr; gap:10px; }
  .ma-eic-kpi{ flex-direction:row; align-items:center; gap:14px; }
  .ma-eic-val{ font-size:21px; }
}
@media (max-width:640px){
  .ma-eic{ padding:16px; }
  .ma-eic-title{ font-size:18px; }
}
/* ═══════════ END v3.9.666 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.667 — Dashboard › Payment Summary (redesign, reference image)
   Header tile in the theme colour. v3.9.669 — every colour comes from
   Settings › Colour & Font: Received = Main colour, Pending = Accent
   colour, Overdue = Secondary colour (--psc-rec / --psc-pen / --psc-ovd);
   tiles, bars and the donut use them and tints of them. No date picker —
   the section follows the dashboard's date filter. Sized from its own
   width: the reference's side-by-side layout from 860px; narrower, the
   donut and legend sit above the three tiles.
═══════════════════════════════════════════════════════════════════ */
.ma-psc{ --psc-rec:var(--brand); --psc-pen:var(--accent); --psc-ovd:var(--secondary);
  container:psc / inline-size; display:flex; flex-direction:column; padding:18px 22px 22px; border-radius:16px; }
.ma-psc-hd{ display:flex; align-items:center; gap:16px; margin:0 0 16px; }
.ma-psc-hd-txt{ min-width:0; }
.ma-psc-title{ margin:0; font-size:20px; font-weight:700; line-height:1.2; letter-spacing:-.1px; color:var(--heading, var(--text)); }
.ma-psc-sub{ margin-top:3px; font-size:14px; color:#64748B; }

.ma-psc-body{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; align-content:center; }
.ma-psc-left{ display:flex; align-items:center; justify-content:center; gap:28px; }
.ma-psc-chart{ container:pscchart / inline-size; position:relative; flex:0 0 auto; width:200px; aspect-ratio:1 / 1; }
.ma-psc-donut{ display:block; width:100%; height:100%; }
.ma-psc-donut circle{ transition:stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }
.ma-psc-track{ stroke:#EEF1F5; }
.ma-psc-center{ position:absolute; inset:11%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.ma-psc-lbl{ margin:0 0 5px; font-size:13px; font-size:clamp(10px, 5.8cqi, 15px); color:#94A3B8; }
.ma-psc-total{ font-size:18px; font-size:clamp(11px, calc(8.2cqi * var(--k, 1)), 22px); font-weight:800; line-height:1.2; letter-spacing:-.2px; white-space:nowrap; color:var(--heading, var(--text)); }
.ma-psc-legend{ display:flex; flex-direction:column; gap:18px; min-width:180px; }
.ma-psc-leg{ display:grid; grid-template-columns:13px minmax(0, 1fr) auto; align-items:center; gap:12px; font-size:14.5px; }
.ma-psc-leg i{ width:13px; height:13px; border-radius:50%; }
.ma-psc-leg.is-rec i{ background:var(--psc-rec); }
.ma-psc-leg.is-pen i{ background:var(--psc-pen); }
.ma-psc-leg.is-ovd i{ background:var(--psc-ovd); }
.ma-psc-leg span{ font-weight:500; color:#1E293B; }
.ma-psc-leg b{ min-width:58px; text-align:right; font-size:14px; font-weight:500; color:#475569; }

.ma-psc-right{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.ma-psc-row{ display:flex; align-items:center; gap:16px; padding:12px 18px 12px 12px; border-radius:14px; }
.ma-psc-row.is-rec{ background:#F5F9FE; background:color-mix(in srgb, var(--psc-rec) 5%, #fff); }
.ma-psc-row.is-pen{ background:#FEFAF0; background:color-mix(in srgb, var(--psc-pen) 6%, #fff); }
.ma-psc-row.is-ovd{ background:#FEF5F7; background:color-mix(in srgb, var(--psc-ovd) 6%, #fff); }
.ma-psc-ico{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.ma-psc-ico svg{ width:24px; height:24px; }
.is-rec .ma-psc-ico{ background:#E3EDFD; background:color-mix(in srgb, var(--psc-rec) 13%, #fff); color:var(--psc-rec); }
.is-pen .ma-psc-ico{ background:#FFF3D6; background:color-mix(in srgb, var(--psc-pen) 16%, #fff); color:var(--psc-pen); }
.is-ovd .ma-psc-ico{ background:#FEE0E4; background:color-mix(in srgb, var(--psc-ovd) 14%, #fff); color:var(--psc-ovd); }
.ma-psc-row-main{ flex:1 1 auto; min-width:0; }
.ma-psc-row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ma-psc-row-lbl{ font-size:14px; color:#334155; }
.ma-psc-row-pct{ font-size:15px; font-weight:800; color:var(--heading, var(--text)); }
.ma-psc-row-amt{ margin:1px 0 7px; font-size:20px; font-weight:800; line-height:1.2; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.is-rec .ma-psc-row-amt{ color:var(--psc-rec); }
.is-pen .ma-psc-row-amt{ color:var(--psc-pen); }
.is-ovd .ma-psc-row-amt{ color:var(--psc-ovd); }
.ma-psc-bar{ height:7px; border-radius:4px; overflow:hidden; background:#E8EBEF; }
.ma-psc-bar i{ display:block; width:0; height:100%; max-width:100%; border-radius:4px; transition:width .35s ease; }
.ma-psc-bar i.has-v{ min-width:7px; }
.is-rec .ma-psc-bar i{ background:var(--psc-rec); }
.is-pen .ma-psc-bar i{ background:var(--psc-pen); }
.is-ovd .ma-psc-bar i{ background:var(--psc-ovd); }

/* a wide card: the reference's side-by-side layout with the divider */
@container psc (min-width: 860px){
  .ma-psc-body{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; }
  .ma-psc-left{ justify-content:flex-start; gap:clamp(22px, 3.4cqi, 44px); padding-right:26px; border-right:1px solid #EEF1F5; }
  .ma-psc-right{ padding-left:26px; }
  .ma-psc-chart{ width:clamp(180px, 25cqi, 240px); }
  .ma-psc-legend{ min-width:150px; flex:1 1 auto; }
}
/* a narrow card: legend under the donut */
@container psc (max-width: 459px){
  .ma-psc-left{ flex-direction:column; gap:16px; }
  .ma-psc-legend{ width:100%; min-width:0; gap:12px; }
  .ma-psc-row-amt{ font-size:18px; }
}
@media (max-width:640px){
  .ma-psc{ padding:16px; }
  .ma-psc-title{ font-size:18px; }
}

html[data-theme="dark"] .ma-psc-sub{ color:var(--muted); }
html[data-theme="dark"] .ma-psc-lbl, html[data-theme="dark"] .ma-psc-leg b{ color:var(--muted); }
html[data-theme="dark"] .ma-psc-leg span, html[data-theme="dark"] .ma-psc-row-lbl{ color:var(--text); }
html[data-theme="dark"] .ma-psc-track{ stroke:var(--surf3); }
html[data-theme="dark"] .ma-psc-left{ border-color:var(--bdr); }
html[data-theme="dark"] .ma-psc-row.is-rec{ background:color-mix(in srgb, var(--psc-rec) 11%, var(--surf)); }
html[data-theme="dark"] .ma-psc-row.is-pen{ background:color-mix(in srgb, var(--psc-pen) 10%, var(--surf)); }
html[data-theme="dark"] .ma-psc-row.is-ovd{ background:color-mix(in srgb, var(--psc-ovd) 10%, var(--surf)); }
html[data-theme="dark"] .is-rec .ma-psc-ico{ background:color-mix(in srgb, var(--psc-rec) 24%, var(--surf)); }
html[data-theme="dark"] .is-pen .ma-psc-ico{ background:color-mix(in srgb, var(--psc-pen) 22%, var(--surf)); }
html[data-theme="dark"] .is-ovd .ma-psc-ico{ background:color-mix(in srgb, var(--psc-ovd) 22%, var(--surf)); }
html[data-theme="dark"] .ma-psc-bar{ background:var(--surf3); }
/* ═══════════ END v3.9.667 ═══════════ */

/* v3.9.669 — Settings › Dashboard Colours: Expense & Income and Payment
   Summary now take their colours from Settings › Colour & Font */
.ma-dashcolor-follow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 12px; padding:12px 14px; border:1px dashed var(--bdr); border-radius:10px; background:var(--surf2); font-size:13px; color:var(--body, var(--text)); }
.ma-dashcolor-follow b{ color:var(--heading, var(--text)); }
.ma-dashcolor-follow button{ flex:0 0 auto; padding:6px 12px; border:1px solid var(--brand); border-radius:8px; background:transparent; color:var(--brand); font:inherit; font-weight:600; cursor:pointer; }
.ma-dashcolor-follow button:hover{ background:var(--brand-bg); }
/* ═══════════ END v3.9.669 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.671 — The whole dashboard follows Settings › Colour & Font
   (except Total Sale — State-wise, which keeps its own map colours).
   Roles: Sales = Main, Purchase = Secondary, GST / income / "second"
   accents = Accent; four-step scales (outstanding age, stock status)
   = Main → Accent → Secondary → dark Main. Light tints are mixed from
   the same colours. The old Settings › Dashboard Colours values point at
   the theme too (!important, so a saved override can't win), and script-
   drawn charts read the same colours through window._maThemeColor.
═══════════════════════════════════════════════════════════════════ */
:root{
  --ds-sale-icon:var(--brand) !important; --ds-sale-chart:var(--brand) !important; --ds-sale-amount:var(--brand-d) !important;
  --ds-purchase-icon:var(--secondary) !important; --ds-purchase-chart:var(--secondary) !important; --ds-purchase-amount:var(--secondary-d) !important;
  --ds-ei-icon:var(--brand) !important; --ds-ei-expense:var(--brand) !important; --ds-ei-income:var(--accent) !important;
  --ds-pay-icon:var(--brand) !important; --ds-pay-received:var(--brand) !important; --ds-pay-pending:var(--accent) !important; --ds-pay-overdue:var(--secondary) !important;
}
/* Sales / Purchase Overview — trend pills in the card's own colour (the arrow shows the way) */
#pg-home .ma-shero-sale .ma-shero-trend:not(.flat){ background:color-mix(in srgb, var(--brand) 14%, #fff); color:var(--brand-d); }
#pg-home .ma-shero-purchase .ma-shero-trend:not(.flat){ background:color-mix(in srgb, var(--secondary) 14%, #fff); color:var(--secondary-d); }
#pg-home .ma-shero-sale [class*="trend-val"], #pg-home .ma-shero-sale .ma-shero-cmp-pct{ color:var(--brand-d); }
#pg-home .ma-shero-purchase [class*="trend-val"], #pg-home .ma-shero-purchase .ma-shero-cmp-pct{ color:var(--secondary-d); }
#pg-home .ma-shero-gst-ico, #pg-home .ma-shero-gst-ico-pur{ background:color-mix(in srgb, var(--accent) 15%, #fff); color:var(--accent); }
#pg-home .shero-icon-green{  background:color-mix(in srgb, var(--brand) 14%, #fff);  color:var(--brand); }
#pg-home .shero-icon-blue{   background:color-mix(in srgb, var(--accent) 15%, #fff);  color:var(--accent); }
#pg-home .shero-icon-indigo{ background:color-mix(in srgb, var(--secondary) 14%, #fff);  color:var(--secondary); }
#pg-home .shero-icon-purple{ background:color-mix(in srgb, var(--secondary-d) 14%, #fff); color:var(--secondary-d); }
#pg-home .shero-icon-orange{ background:color-mix(in srgb, var(--accent-d) 15%, #fff); color:var(--accent-d); }
/* Sales / Purchase Outstanding — age buckets */
#pg-home .ma-oc2-seg-cur{ background:var(--brand); }
#pg-home .ma-oc2-seg-o1{ background:var(--accent); }
#pg-home .ma-oc2-seg-o2{ background:var(--secondary); }
#pg-home .ma-oc2-seg-o3{ background:var(--brand-dd); }
/* Inventory — stock status */
#pg-home .ma-inv-dot.d-in{ background:var(--brand); }
#pg-home .ma-inv-dot.d-zero{ background:var(--accent); }
#pg-home .ma-inv-dot.d-low{ background:var(--secondary); }
#pg-home .ma-inv-dot.d-neg{ background:var(--brand-dd); }
/* Best / Least Selling Products, Low Stock */
#pg-home .ma-pl-least::before{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); }
#pg-home .ma-pl-low::before{ background:linear-gradient(90deg, var(--secondary), color-mix(in srgb, var(--secondary) 70%, #fff)); }
#pg-home .ma-pl-icon-least{ background:linear-gradient(135deg, var(--accent), var(--accent-d)); }
#pg-home .ma-pl-icon-low{ background:linear-gradient(135deg, var(--secondary), var(--secondary-d)); }
#pg-home .ma-pl-rank-best, #pg-home .ma-pl-qty-best{ background:color-mix(in srgb, var(--brand) 12%, #fff); color:var(--brand-dd); }
#pg-home .ma-pl-rank-least, #pg-home .ma-pl-qty-least, #pg-home .ma-pl-qty-low{ background:color-mix(in srgb, var(--accent) 14%, #fff); color:var(--accent-d); }
#pg-home .ma-pl-qty-zero, #pg-home .ma-pl-qty-neg{ background:color-mix(in srgb, var(--secondary) 12%, #fff); color:var(--secondary-d); }
#pg-home .ma-prodlead-clean .ma-pl-filter-item.active{ background:var(--brand-bg); color:var(--brand); }
/* New vs Existing Customer Sale */
#pg-home .ma-nve-sum-dot-new, #pg-home .ma-nve-lg-dot-new{ background:var(--brand); }
#pg-home .ma-nve-sum-dot-exist, #pg-home .ma-nve-lg-dot-exist{ background:var(--secondary); }
/* links */
#pg-home .ma-dash-viewall{ color:var(--brand); }
/* dark mode: the same roles on the dark surfaces */
html[data-theme="dark"] #pg-home .ma-shero-sale .ma-shero-trend:not(.flat){ background:color-mix(in srgb, var(--brand) 22%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-purchase .ma-shero-trend:not(.flat){ background:color-mix(in srgb, var(--secondary) 22%, var(--surf)); color:color-mix(in srgb, var(--secondary) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-sale [class*="trend-val"], html[data-theme="dark"] #pg-home .ma-shero-sale .ma-shero-cmp-pct{ color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-purchase [class*="trend-val"], html[data-theme="dark"] #pg-home .ma-shero-purchase .ma-shero-cmp-pct{ color:color-mix(in srgb, var(--secondary) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-gst-ico, html[data-theme="dark"] #pg-home .ma-shero-gst-ico-pur{ background:color-mix(in srgb, var(--accent) 22%, var(--surf)); color:color-mix(in srgb, var(--accent) 75%, #fff); }
html[data-theme="dark"] #pg-home .shero-icon-green{  background-color:color-mix(in srgb, var(--brand) 22%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] #pg-home .shero-icon-blue{   background-color:color-mix(in srgb, var(--accent) 22%, var(--surf)); color:color-mix(in srgb, var(--accent) 75%, #fff); }
html[data-theme="dark"] #pg-home .shero-icon-indigo{ background-color:color-mix(in srgb, var(--secondary) 22%, var(--surf)); color:color-mix(in srgb, var(--secondary) 75%, #fff); }
html[data-theme="dark"] #pg-home .shero-icon-purple{ background-color:color-mix(in srgb, var(--secondary-d) 24%, var(--surf)); color:color-mix(in srgb, var(--secondary) 75%, #fff); }
html[data-theme="dark"] #pg-home .shero-icon-orange{ background-color:color-mix(in srgb, var(--accent-d) 24%, var(--surf)); color:color-mix(in srgb, var(--accent) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-oc2-seg-o1{ background:var(--accent); }
html[data-theme="dark"] #pg-home .ma-oc2-seg-o2{ background:var(--secondary); }
html[data-theme="dark"] #pg-home .ma-pl-rank-best, html[data-theme="dark"] #pg-home .ma-pl-qty-best{ background:color-mix(in srgb, var(--brand) 22%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-pl-rank-least, html[data-theme="dark"] #pg-home .ma-pl-qty-least, html[data-theme="dark"] #pg-home .ma-pl-qty-low{ background:color-mix(in srgb, var(--accent) 22%, var(--surf)); color:color-mix(in srgb, var(--accent) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-pl-qty-zero, html[data-theme="dark"] #pg-home .ma-pl-qty-neg{ background:color-mix(in srgb, var(--secondary) 22%, var(--surf)); color:color-mix(in srgb, var(--secondary) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-prodlead-clean .ma-pl-viewall-lnk, html[data-theme="dark"] #pg-home .ma-dash-viewall{ color:color-mix(in srgb, var(--brand) 75%, #fff); }
/* Sales / Purchase Overview — header icon, date icon and amounts */
#pg-home .ma-shero-icon{ background:var(--brand); box-shadow:0 4px 10px color-mix(in srgb, var(--brand) 24%, transparent); }
#pg-home .ma-shero-purchase .ma-shero-icon{ background:var(--secondary); box-shadow:0 4px 10px color-mix(in srgb, var(--secondary) 24%, transparent); }
#pg-home .ma-shero-date svg{ color:var(--brand); }
#pg-home .ma-shero-purchase .ma-shero-date svg{ color:var(--secondary); }
#pg-home .ma-shero-amt-gst{ color:var(--accent-d); }
#pg-home .ma-shero-amt-pur{ color:var(--secondary-d); }
/* Top Customers */
#pg-home .ma-dash-topc-ico{ background:color-mix(in srgb, var(--brand) 12%, #fff); color:var(--brand); }
html[data-theme="dark"] #pg-home .ma-dash-topc-ico{ background:color-mix(in srgb, var(--brand) 22%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-amt-gst{ color:color-mix(in srgb, var(--accent) 75%, #fff); }
html[data-theme="dark"] #pg-home .ma-shero-amt-pur{ color:color-mix(in srgb, var(--secondary) 75%, #fff); }
/* ═══════════ END v3.9.671 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.672 — Chatbot: where it shows and which desktop button
   Classes on <html> (set by app.php before the buttons render, kept current
   by app.js): ma-cb-agent = BS Agent is the desktop button; ma-cb-off-
   desktop / ma-cb-off-mobile = no chatbot there. Mobile (768px and
   narrower, the bottom-nav layout) always uses the round button.
═══════════════════════════════════════════════════════════════════ */
.ma-agent-tab{ display:none; }
@media (min-width:769px){
  html.ma-cb-agent .ma-agent-tab{ display:flex; }
  html.ma-cb-agent #ma-ai-fab-wrap, html.ma-cb-agent .ma-ai-fab-wrap{ display:none !important; }
  /* the floating chat can drop into the corner the round button kept free */
  html.ma-cb-agent #ma-ai-panel.layout-floating{
    bottom:22px !important; height:min(640px, calc(100vh - 62px)) !important; max-height:calc(100vh - 62px) !important;
  }
  html.ma-cb-off-desktop #ma-ai-fab-wrap, html.ma-cb-off-desktop .ma-ai-fab-wrap,
  html.ma-cb-off-desktop .ma-agent-tab{ display:none !important; }
}
@media (max-width:768px){
  html.ma-cb-off-mobile #ma-ai-fab-wrap, html.ma-cb-off-mobile .ma-ai-fab-wrap{ display:none !important; }
}
/* Settings › General › Chatbot Button Style */
.ma-cbs-card[hidden]{ display:none !important; }
.ma-cbs-opts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.ma-cbs-opt{ position:relative; display:flex; align-items:center; gap:14px; min-width:0; margin:0; padding:12px 14px; border:1.5px solid var(--bdr); border-radius:12px; background:var(--surf); cursor:pointer; transition:border-color .15s, background .15s; }
.ma-cbs-opt:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--bdr)); }
.ma-cbs-opt.is-on{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, var(--surf)); }
.ma-cbs-opt:focus-within{ outline:2px solid var(--brand); outline-offset:2px; }
.ma-cbs-opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.ma-cbs-prev{ position:relative; flex:0 0 auto; width:96px; height:58px; overflow:hidden; border-radius:9px; background:var(--surf2); border:1px solid var(--bdr); }
.ma-cbs-fab{ position:absolute; right:8px; bottom:7px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; box-shadow:0 3px 8px color-mix(in srgb, var(--brand) 35%, transparent); }
.ma-cbs-agent{ position:absolute; right:0; top:17px; height:24px; display:flex; align-items:center; gap:4px; padding:0 6px 0 9px; border-radius:12px 0 0 12px; background:linear-gradient(180deg, var(--header, var(--brand)) 0%, var(--header-d, var(--brand-d)) 100%); color:#fff; font-size:10.5px; font-weight:700; white-space:nowrap; }
.ma-cbs-txt{ min-width:0; }
.ma-cbs-txt b{ display:block; font-size:14px; font-weight:700; color:var(--heading, var(--text)); }
.ma-cbs-txt small{ display:block; margin-top:2px; font-size:12px; color:var(--muted); }
@media (max-width:640px){ .ma-cbs-opts{ grid-template-columns:1fr; } }
/* ═══════════ END v3.9.672 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.673 — Settings › Membership (redesign, reference image)
   Shown only when plans are on (Billing Mode = paid; the template leaves
   it out otherwise, and html.ma-plans-off hides it if a cached page still
   has it). Greens follow Settings › Colour & Font (--brand).
═══════════════════════════════════════════════════════════════════ */
html.ma-plans-off .ma-set2-link[data-sec="membership"], html.ma-plans-off #set-sec-membership,
html.ma-plans-off .ma-set2-link[data-sec="credits"], html.ma-plans-off #set-sec-credits{ display:none !important; }   /* v3.9.682 — Credits too */
.ma-mbx{ container:mbx / inline-size; position:relative; overflow:hidden; padding:26px 30px 34px; border:1px solid var(--bdr); border-radius:16px;
  background:linear-gradient(180deg, #FCFDFE 0%, #F7F9FC 100%); box-shadow:var(--shadow); }
.ma-mbx-blob{ position:absolute; right:-130px; top:-160px; width:440px; height:440px; border-radius:50%; pointer-events:none;
  background:color-mix(in srgb, var(--brand) 7%, #fff); }
.ma-mbx-plane{ position:absolute; left:2.4%; top:70px; width:150px; height:204px; pointer-events:none; color:color-mix(in srgb, var(--brand) 42%, #fff); }
.ma-mbx-best{ position:absolute; right:3.2%; top:84px; z-index:1; pointer-events:none; color:var(--brand-d);
  font-family:"Segoe Script", "Bradley Hand", "Comic Sans MS", cursive; font-size:20px; line-height:1.3; transform:rotate(-9deg); }
.ma-mbx-best svg{ display:block; margin:4px 0 0 118px; }
.ma-mbx-hd{ position:relative; z-index:1; max-width:820px; margin:0 auto 26px; text-align:center; }
.ma-mbx-pill{ display:inline-flex; align-items:center; gap:10px; padding:9px 24px; border-radius:999px; font-size:16px; font-weight:700;
  background:color-mix(in srgb, var(--brand) 9%, #fff); color:var(--brand-d); }
.ma-mbx-title{ margin:18px 0 12px; font-size:36px; font-size:clamp(24px, 3.3cqi, 38px); font-weight:800; line-height:1.15; letter-spacing:-.4px; color:var(--heading, #0F172A); }
.ma-mbx-sub{ margin:0; font-size:15.5px; line-height:1.55; color:#475569; }
.ma-mbx-dash{ display:flex; justify-content:center; gap:6px; margin-top:14px; }
.ma-mbx-dash i{ width:28px; height:4px; border-radius:2px; background:#E4EFF2; }
.ma-mbx-dash i:first-child{ background:var(--brand); }
.ma-mbx-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, .79fr) minmax(0, 1fr); gap:28px; align-items:stretch;
  max-width:1300px; margin:0 auto; }   /* centred with side margins on very wide screens, as in the design */
.ma-mbx-card{ position:relative; min-width:0; border-radius:18px; background:#fff; }
/* the check list */
.ma-mbx-list{ list-style:none; margin:0; padding:0; }
.ma-mbx-list li{ position:relative; padding:4px 0 4px 36px; font-size:15px; line-height:1.4; color:#334155; }
.ma-mbx-list li::before{ content:''; position:absolute; left:0; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 8'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
/* FREE */
.ma-mbx-free{ padding:12px 12px 18px; border:1px solid #E6EBF2; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.ma-mbx-free-top{ position:relative; padding:26px 26px 24px; border-radius:16px; background:#F6F8FC; }
.ma-mbx-dots{ position:absolute; right:24px; top:44px; width:80px; height:36px; opacity:.85;
  background-image:radial-gradient(#C9D6E8 2.3px, transparent 2.8px); background-size:16px 12px; }
.ma-mbx-free-row{ position:relative; display:flex; align-items:center; gap:22px; }
.ma-mbx-free-ico{ flex:0 0 auto; width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#E8F1FD; color:#5AA9F5; }
.ma-mbx-free-kicker{ font-size:14.5px; font-weight:500; letter-spacing:.04em; color:#64748B; }
.ma-mbx-free-name{ font-size:40px; font-weight:800; line-height:1.1; color:var(--heading, #0F172A); }
.ma-mbx-free-desc{ margin-top:10px; font-size:14.5px; color:#64748B; }
.ma-mbx-current{ display:block; width:min(214px, 100%); height:50px; margin:26px auto 0; border:1.5px solid #CBD5E1; border-radius:999px;
  background:transparent; color:#475569; font:inherit; font-size:16px; font-weight:600; cursor:default; opacity:1; }
.ma-mbx-list-lined{ margin:14px 14px 0; }
.ma-mbx-list-lined li{ padding:10px 0 10px 44px; border-bottom:1px solid #EEF1F5; }
.ma-mbx-list-lined li::before{ left:2px; width:22px; height:22px; margin-top:-11px; background-size:13px 13px; }
/* PREMIUM */
.ma-mbx-prem{ container:mbxprem / inline-size; display:flex; flex-direction:column; overflow:hidden; border:1.5px solid var(--brand);
  box-shadow:0 18px 40px color-mix(in srgb, var(--brand) 14%, transparent); }
.ma-mbx-prem-hd{ position:relative; display:flex; align-items:center; gap:16px; padding:26px 24px 42px; color:#fff;
  background:linear-gradient(100deg, var(--brand) 0%, var(--brand) 42%, color-mix(in srgb, var(--brand) 62%, #fff) 100%); }
.ma-mbx-prem-hd::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 88% 110%, rgba(255,255,255,.2), transparent 60%); }
.ma-mbx-crown{ position:relative; z-index:1; flex:0 0 auto; width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#FDF8E8; box-shadow:0 4px 14px rgba(0,0,0,.1); }
.ma-mbx-prem-txt{ position:relative; z-index:1; min-width:0; }
.ma-mbx-prem-name{ font-size:26px; font-weight:800; letter-spacing:.01em; }
.ma-mbx-prem-tag{ margin-top:6px; font-size:13px; opacity:.94; white-space:nowrap; }
.ma-mbx-term{ position:relative; z-index:1; margin-left:auto; display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.08); }
.ma-mbx-term button{ display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 18px; border:0; border-radius:999px; background:transparent;
  color:#0F172A; font:inherit; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; }
.ma-mbx-term button.is-on{ background:var(--brand); color:#fff; }
.ma-mbx-term button:focus-visible{ outline:2px solid var(--brand-d); outline-offset:2px; }
.ma-mbx-save{ padding:3px 9px; border-radius:999px; background:#FB3E12; color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; }
.ma-mbx-prem-body{ position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; margin-top:-18px; padding:26px 30px 22px;
  border-radius:18px 18px 0 0; background:#fff; }
.ma-mbx-buy{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; }
.ma-mbx-price b{ display:block; font-size:38px; font-weight:800; line-height:1.1; color:var(--heading, #0F172A); }
.ma-mbx-price small{ display:block; margin-top:10px; font-size:15px; color:#64748B; }
.ma-mbx-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.ma-mbx-upgrade{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:270px; height:52px; padding:0 28px; border:0; border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-d)); color:#fff; font:inherit; font-size:17px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent); transition:transform .15s, box-shadow .15s; }
.ma-mbx-upgrade:hover{ transform:translateY(-1px); box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 34%, transparent); }
.ma-mbx-cta small{ font-size:14px; color:#94A3B8; }
.ma-mbx-cols{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 30px; margin-top:22px; }
.ma-mbx-cols li{ padding:3.5px 0 3.5px 34px; }
.ma-mbx-cols li::before{ width:19px; height:19px; margin-top:-9.5px; background-size:11px 11px; }
.ma-mbx-terms{ display:flex; align-items:center; gap:14px; margin-top:auto; padding:13px 20px; border-radius:14px; font-size:14px; color:#334155;
  background:color-mix(in srgb, var(--brand) 8%, #fff); }
.ma-mbx-cols + .ma-mbx-terms{ margin-top:22px; }
.ma-mbx-lock{ flex:0 0 auto; display:flex; color:var(--heading, #0F172A); }
.ma-mbx-link{ color:var(--brand); font-weight:500; text-decoration:none; }
.ma-mbx-link:hover{ text-decoration:underline; }
.ma-mbx-link[aria-disabled="true"], a.ma-mbx-link[href=""]{ pointer-events:none; }
/* narrower */
@container mbx (max-width: 1080px){ .ma-mbx-plane, .ma-mbx-best{ display:none; } }
@container mbx (max-width: 940px){ .ma-mbx-grid{ grid-template-columns:minmax(0, 1fr); } }
@container mbx (max-width: 600px){
  .ma-mbx-prem-hd{ flex-wrap:wrap; }
  .ma-mbx-term{ margin-left:0; }
  .ma-mbx-cols{ grid-template-columns:minmax(0, 1fr); }
  .ma-mbx-cta, .ma-mbx-upgrade{ width:100%; min-width:0; }
}
@media (max-width:640px){
  .ma-mbx{ padding:20px 14px 22px; }
  .ma-mbx-prem-body{ padding:22px 18px 18px; }
  .ma-mbx-free-top{ padding:22px 18px 20px; }
  .ma-mbx-dots{ display:none; }
}
/* dark mode */
html[data-theme="dark"] .ma-mbx{ background:var(--surf); }
html[data-theme="dark"] .ma-mbx-blob{ background:color-mix(in srgb, var(--brand) 12%, var(--surf)); }
html[data-theme="dark"] .ma-mbx-pill{ background:color-mix(in srgb, var(--brand) 18%, var(--surf)); color:color-mix(in srgb, var(--brand) 70%, #fff); }
html[data-theme="dark"] .ma-mbx-sub, html[data-theme="dark"] .ma-mbx-free-kicker, html[data-theme="dark"] .ma-mbx-free-desc,
html[data-theme="dark"] .ma-mbx-price small, html[data-theme="dark"] .ma-mbx-cta small{ color:var(--muted); }
html[data-theme="dark"] .ma-mbx-card, html[data-theme="dark"] .ma-mbx-prem-body{ background:var(--surf); }
html[data-theme="dark"] .ma-mbx-free{ border-color:var(--bdr); }
html[data-theme="dark"] .ma-mbx-free-top{ background:var(--surf2); }
html[data-theme="dark"] .ma-mbx-free-ico{ background:rgba(90,169,245,.16); }
html[data-theme="dark"] .ma-mbx-list li, html[data-theme="dark"] .ma-mbx-terms{ color:var(--text); }
html[data-theme="dark"] .ma-mbx-list-lined li{ border-color:var(--bdr); }
html[data-theme="dark"] .ma-mbx-current{ border-color:var(--bdr); color:var(--muted); }
html[data-theme="dark"] .ma-mbx-terms{ background:color-mix(in srgb, var(--brand) 14%, var(--surf)); }
html[data-theme="dark"] .ma-mbx-lock{ color:var(--text); }
html[data-theme="dark"] .ma-mbx-dash i{ background:var(--surf3); }
html[data-theme="dark"] .ma-mbx-dash i:first-child{ background:var(--brand); }
/* a narrow PREMIUM card: the plan-length pill moves under the title */
@container mbxprem (max-width: 660px){
  .ma-mbx-prem-hd{ flex-wrap:wrap; row-gap:16px; }
  .ma-mbx-prem-txt{ flex:1 1 180px; }
  .ma-mbx-prem-tag{ white-space:normal; }
  .ma-mbx-term{ margin-left:0; }
}
/* ═══════════ END v3.9.673 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.674 — Upgrade (payment) popup, from the reference image.
   Opened by Settings › Membership › Upgrade Now. Greens follow Settings ›
   Colour & Font (--brand); the SAVE badge stays red as in the design.
═══════════════════════════════════════════════════════════════════ */
.ma-pay{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:24px; }
.ma-pay[hidden]{ display:none !important; }
body.ma-pay-open{ overflow:hidden; }
.ma-pay-back{ position:absolute; inset:0; background:rgba(15,23,42,.58); backdrop-filter:blur(2px); animation:maPayFade .18s ease; }
.ma-pay-dlg{ position:relative; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1fr); column-gap:44px; width:min(1060px, 100%);
  max-height:calc(100vh - 48px); overflow:auto; padding:44px 46px 26px; border-radius:26px;
  background:radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--brand) 7%, #fff) 0%, #fff 62%);
  box-shadow:0 30px 80px rgba(15,23,42,.35); animation:maPayIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes maPayFade{ from{ opacity:0; } }
@keyframes maPayIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.ma-pay-x{ position:absolute; right:22px; top:22px; z-index:2; width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:#F1F3F5; color:#334155; cursor:pointer; }
.ma-pay-x:hover{ background:#E5E8EC; }
/* left */
.ma-pay-left{ min-width:0; display:flex; flex-direction:column; }
/* v3.9.697 — scoped to the popup. "ma-pay-pill" is also the CASH / CREDIT badge
   in the Sale Invoice list, and this rule (being later in the file) was making
   those badges huge: 18px text in a 999px pill. */
.ma-pay .ma-pay-pill{ align-self:flex-start; display:inline-flex; align-items:center; gap:12px; padding:10px 26px 10px 18px; border-radius:999px; font-size:18px; font-weight:700;
  text-transform:none; letter-spacing:normal;
  background:color-mix(in srgb, var(--brand) 10%, #fff); color:var(--brand-d); border:1px solid color-mix(in srgb, var(--brand) 16%, #fff); }
.ma-pay .ma-pay-pill svg{ color:var(--brand); }
.ma-pay-title{ margin:26px 0 16px; font-size:42px; font-weight:800; line-height:1.08; letter-spacing:-1px; color:#0B1220; }
.ma-pay-title em{ font-style:normal; color:var(--brand); }
.ma-pay-lead{ margin:0; max-width:430px; font-size:18px; line-height:1.5; color:#475569; }
.ma-pay-art{ display:block; width:calc(100% + 24px); max-width:450px; margin:16px 0 0 -24px; }
.ma-pay-art-blob{ fill:color-mix(in srgb, var(--brand) 9%, #fff); }
.ma-pay-art-back{ fill:color-mix(in srgb, var(--brand) 42%, #fff); }
.ma-pay-art-tab{ fill:color-mix(in srgb, var(--brand) 62%, #fff); }
.ma-pay-art-doc, .ma-pay-art-card{ fill:#fff; filter:drop-shadow(0 8px 14px rgba(15,23,42,.10)); }
.ma-pay-art-doc2{ fill:#F4F7FA; filter:drop-shadow(0 6px 10px rgba(15,23,42,.06)); }
.ma-pay-art-line{ fill:#D5DBE3; }
.ma-pay-art-shine{ fill:none; stroke:#fff; stroke-opacity:.35; stroke-width:5; }
.ma-pay-art-txt{ font-size:14px; font-weight:500; fill:#1F2937; }
/* right */
.ma-pay-right{ min-width:0; display:flex; flex-direction:column; align-items:center; padding-top:40px; }
.ma-pay-term{ display:flex; align-items:center; gap:6px; width:100%; max-width:450px; padding:8px; border-radius:999px; background:#fff;
  border:1.5px solid #E5E9EE; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.ma-pay-term button{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:12px; height:58px; border:0; border-radius:999px;
  background:transparent; color:#0B1220; font:inherit; font-size:22px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; }
.ma-pay-term button.is-on{ background:var(--brand); color:#fff; }
.ma-pay-term button:focus-visible, .ma-pay-go:focus-visible, .ma-pay-x:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand) 45%, #fff); outline-offset:2px; }
.ma-pay-save{ padding:5px 12px; border-radius:999px; background:#F31D2C; color:#fff; font-size:14px; font-weight:800; letter-spacing:.01em; }
.ma-pay-save[hidden]{ display:none; }
.ma-pay-was{ margin-top:26px; min-height:1.25em; font-size:24px; font-weight:600; color:#6B7280; text-decoration:line-through; text-decoration-thickness:2px; }
.ma-pay-was.is-none{ visibility:hidden; }
.ma-pay-price{ margin-top:2px; font-size:64px; font-weight:800; line-height:1.05; letter-spacing:-1.5px; color:var(--brand-d); }
.ma-pay-gst{ margin-top:6px; font-size:22px; color:#4E5053; }
.ma-pay-deal{ display:flex; align-items:center; justify-content:center; gap:14px; width:100%; margin-top:20px; padding:12px 18px; border-radius:14px;
  background:color-mix(in srgb, var(--brand) 10%, #fff); color:var(--brand-d); font-size:19px; font-weight:700; text-align:center; }
.ma-pay-deal[hidden]{ display:none; }
.ma-pay-deal svg{ flex:0 0 auto; color:var(--brand-d); }
.ma-pay-go{ display:flex; align-items:center; justify-content:center; gap:16px; width:100%; height:66px; margin-top:22px; border:0; border-radius:999px;
  background:var(--brand); color:#fff; font:inherit; font-size:25px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent); transition:transform .15s, box-shadow .15s, opacity .15s; }
.ma-pay-go:hover{ transform:translateY(-1px); box-shadow:0 12px 28px color-mix(in srgb, var(--brand) 36%, transparent); }
.ma-pay-go[disabled]{ opacity:.75; cursor:progress; transform:none; }
.ma-pay-msg{ width:100%; margin-top:12px; padding:10px 14px; border-radius:10px; background:#FEF2F2; color:#B91C1C; font-size:14px; text-align:center; }
.ma-pay-msg[hidden]{ display:none; }
.ma-pay-msg.is-ok{ background:color-mix(in srgb, var(--brand) 10%, #fff); color:var(--brand-d); font-weight:600; }   /* v3.9.675 — paid */
html[data-theme="dark"] .ma-pay-msg.is-ok{ background:color-mix(in srgb, var(--brand) 18%, var(--surf)); color:color-mix(in srgb, var(--brand) 72%, #fff); }
.ma-pay-perks{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 18px; width:100%; margin:26px 0 0; padding:0 6px 24px; list-style:none;
  border-bottom:1px solid #E8EBEE; }
.ma-pay-perks li{ display:flex; align-items:center; gap:14px; margin:0; font-size:16.5px; font-weight:500; line-height:1.3; color:#1F2937; }
.ma-pay-perks li span{ flex:0 0 auto; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--brand) 9%, #fff); color:var(--brand-d); }
.ma-pay-secure{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.ma-pay-lock{ display:inline-flex; align-items:center; gap:10px; font-size:16px; color:#374151; }
.ma-pay-secure > i{ width:1px; height:24px; background:#D1D5DB; }
.ma-pay-methods{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ma-pay-methods b{ padding:5px 9px; border:1px solid #E5E7EB; border-radius:8px; background:#fff; font-size:13px; font-weight:700; color:#334155; }
.ma-pay-foot{ grid-column:1 / -1; margin:24px 0 0; text-align:center; font-size:16px; color:#64748B; }
.ma-pay-foot .ma-mbx-link{ font-weight:700; color:var(--brand); }
@media (max-width:900px){
  .ma-pay{ align-items:flex-start; padding:12px; }
  .ma-pay-dlg{ grid-template-columns:minmax(0, 1fr); max-height:calc(100vh - 24px); padding:30px 20px 20px; border-radius:20px; }
  .ma-pay-x{ right:12px; top:12px; width:42px; height:42px; }
  .ma-pay-title{ margin:18px 0 10px; font-size:30px; }
  .ma-pay-title br{ display:none; }
  .ma-pay-lead{ max-width:none; font-size:16px; }
  .ma-pay-art{ display:none; }
  .ma-pay-right{ padding-top:18px; }
  .ma-pay-term button{ height:50px; gap:8px; font-size:18px; }
  .ma-pay-save{ padding:4px 8px; font-size:11.5px; }
  .ma-pay-was{ margin-top:18px; font-size:20px; }
  .ma-pay-price{ font-size:48px; }
  .ma-pay-gst{ font-size:18px; }
  .ma-pay-deal{ font-size:16px; }
  .ma-pay-go{ height:58px; font-size:21px; }
}
@media (max-width:480px){
  .ma-pay-perks{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .ma-pay-perks li{ font-size:15.5px; }
  .ma-pay-perks li span{ width:44px; height:44px; }
  .ma-pay-foot{ font-size:14px; }
}
/* dark mode */
html[data-theme="dark"] .ma-pay-dlg{ background:radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--brand) 12%, var(--surf)) 0%, var(--surf) 62%); }
html[data-theme="dark"] .ma-pay-x{ background:var(--surf3); color:var(--text); }
html[data-theme="dark"] .ma-pay .ma-pay-pill{ background:color-mix(in srgb, var(--brand) 16%, var(--surf)); border-color:transparent; color:color-mix(in srgb, var(--brand) 70%, #fff); }
html[data-theme="dark"] .ma-pay-title{ color:var(--heading, #F1F5F9); }
html[data-theme="dark"] .ma-pay-lead, html[data-theme="dark"] .ma-pay-foot, html[data-theme="dark"] .ma-pay-was{ color:var(--muted); }
html[data-theme="dark"] .ma-pay-art-blob{ fill:color-mix(in srgb, var(--brand) 12%, var(--surf)); }
html[data-theme="dark"] .ma-pay-art-doc, html[data-theme="dark"] .ma-pay-art-card{ fill:var(--surf2); }
html[data-theme="dark"] .ma-pay-art-doc2{ fill:var(--surf3); }
html[data-theme="dark"] .ma-pay-art-txt{ fill:var(--text); }
html[data-theme="dark"] .ma-pay-art-line{ fill:var(--bdr); }
html[data-theme="dark"] .ma-pay-term{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-pay-term button{ color:var(--text); }
html[data-theme="dark"] .ma-pay-term button.is-on{ color:#fff; }
html[data-theme="dark"] .ma-pay-price{ color:color-mix(in srgb, var(--brand) 80%, #fff); }
html[data-theme="dark"] .ma-pay-gst, html[data-theme="dark"] .ma-pay-perks li, html[data-theme="dark"] .ma-pay-lock{ color:var(--text); }
html[data-theme="dark"] .ma-pay-deal{ background:color-mix(in srgb, var(--brand) 16%, var(--surf)); color:color-mix(in srgb, var(--brand) 72%, #fff); }
html[data-theme="dark"] .ma-pay-deal svg{ color:color-mix(in srgb, var(--brand) 72%, #fff); }
html[data-theme="dark"] .ma-pay-perks{ border-color:var(--bdr); }
html[data-theme="dark"] .ma-pay-perks li span{ background:color-mix(in srgb, var(--brand) 16%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] .ma-pay-methods b{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-pay-secure > i{ background:var(--bdr); }
/* ═══════════ END v3.9.674 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.676 — Premium features locked on the free plan: gold lock badges
   (html.ma-free-plan / .ma-prem-locked are set by app.js)
═══════════════════════════════════════════════════════════════════ */
/* v3.9.681 — the padlock (reference image): a small solid grey lock in the
   top-right corner of a locked tab, at the right of locked menu items and
   Settings links. Drawn as a mask so its colour can change (hover, dark). */
:root{ --ma-lock-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2.3 5.3V3.8a2.7 2.7 0 0 1 5.4 0v1.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='0.5' y='5' width='9' height='6.8' rx='1.3'/%3E%3C/svg%3E"); --ma-lock-c:#B2AFAA; --ma-lock-c-hover:#8E8A84; }
html[data-theme="dark"]{ --ma-lock-c:#7F8796; --ma-lock-c-hover:#A3AAB6; }
.ma-tab.ma-prem-locked::after, .ma-tab.ma-prem-locked .ma-subnav-lnk::after, .ma-set2-link.ma-prem-locked::after{
  content:''; pointer-events:none; background:var(--ma-lock-c); border-radius:0;
  -webkit-mask:var(--ma-lock-svg) center / contain no-repeat; mask:var(--ma-lock-svg) center / contain no-repeat;
  transition:background-color .15s ease; }
/* top tabs: corner of the tab */
.ma-tab.ma-prem-locked::after{ position:absolute; top:7px; right:8px; width:10px; height:12px; }
.ma-tab.ma-prem-locked:hover::after{ background:var(--ma-lock-c-hover); }
/* menu items: at the right edge (grid-menu cards: top-right corner) */
.ma-tab.ma-prem-locked .ma-subnav-lnk{ position:relative; padding-right:30px; }
.ma-tab.ma-prem-locked .ma-subnav-lnk::after{ position:absolute; top:50%; right:12px; width:9px; height:11px; margin-top:-5.5px; }
.ma-tab.ma-prem-locked .ma-subnav-lnk:hover::after{ background:var(--ma-lock-c-hover); }
.ma-tab.ma-prem-locked .ma-subnav-lnk:has(.ma-mega-ico){ padding-right:24px; }
.ma-tab.ma-prem-locked .ma-subnav-lnk:has(.ma-mega-ico)::after{ top:11px; right:9px; margin-top:0; }
/* Settings links: the lock takes the place of the "›" */
.ma-set2-link.ma-prem-locked{ display:flex; align-items:center; }
.ma-set2-link.ma-prem-locked::after{ flex:0 0 auto; width:9px; height:11px; margin-left:auto; }
.ma-set2-link.ma-prem-locked:hover::after{ background:var(--ma-lock-c-hover); }
.ma-pay-lockline{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:14px; padding:8px 14px; border-radius:10px;
  background:#FFF7DB; color:#8A5A00; font-size:14px; font-weight:600; line-height:1.35; }
.ma-pay-lockline[hidden]{ display:none; }
.ma-pay-lockline svg{ flex:0 0 auto; color:#F2B200; }
html[data-theme="dark"] .ma-pay-lockline{ background:rgba(242,178,0,.14); color:#F5CD5A; }
/* ═══════════ END v3.9.676 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.677 — Settings › Membership: Membership Details + Payment Details
═══════════════════════════════════════════════════════════════════ */
.ma-mbd-card{ margin-top:22px; padding:20px 22px 10px; border-radius:10px; background:var(--surf, #fff); box-shadow:0 1px 3px rgba(15,23,42,.06); }
.ma-mbd-title{ padding:4px 2px 18px; margin-bottom:6px; border-bottom:1px solid #EEF0F3; font-size:15px; font-weight:600; color:#4B5563; }
.ma-mbd-scroll{ overflow-x:auto; }
.ma-mbd-tbl{ width:100%; min-width:640px; border-collapse:collapse; }
.ma-mbd-tbl-3{ min-width:460px; table-layout:fixed; }
.ma-mbd-tbl th{ padding:16px 8px 8px; border-bottom:1px solid #E5E7EB; text-align:left; font-size:14px; font-weight:600; color:#1F2937; white-space:nowrap; }
.ma-mbd-tbl td{ padding:11px 8px; border-bottom:1px solid #F1F3F6; font-size:14px; color:#374151; vertical-align:top; }
.ma-mbd-tbl tbody tr:last-child td{ border-bottom:0; }
.ma-mbd-empty{ text-align:center; color:#374151; }
.ma-mbd-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.4; color:#fff; }
.ma-mbd-pill.is-free{ background:#F47C6D; }
.ma-mbd-pill.is-trial{ background:#F59E0B; }
.ma-mbd-pill.is-prem{ background:var(--brand); }
.ma-mbd-plan{ margin-left:8px; font-weight:600; color:#1F2937; }
.ma-mbd-cur{ display:block; margin-top:5px; font-size:12px; font-weight:600; color:var(--brand-d); }
.ma-mbd-sub{ display:block; margin-top:3px; font-size:12px; color:#6B7280; }
.ma-mbd-txn{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; }
.ma-mbd-tbl tr.is-current td{ background:color-mix(in srgb, var(--brand) 4%, transparent); }
html[data-theme="dark"] .ma-mbd-title{ color:var(--muted); border-color:var(--bdr); }
html[data-theme="dark"] .ma-mbd-tbl th{ color:var(--text); border-color:var(--bdr); }
html[data-theme="dark"] .ma-mbd-tbl td{ color:var(--text); border-color:var(--bdr); }
html[data-theme="dark"] .ma-mbd-plan{ color:var(--text); }
html[data-theme="dark"] .ma-mbd-sub{ color:var(--muted); }
html[data-theme="dark"] .ma-mbd-cur{ color:color-mix(in srgb, var(--brand) 72%, #fff); }
/* ═══════════ END v3.9.677 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.679 — Settings › Free Trial
═══════════════════════════════════════════════════════════════════ */
html.ma-plans-off .ma-set2-link[data-sec="freetrial"], html.ma-plans-off #set-sec-freetrial{ display:none !important; }
.ma-ftr{ max-width:860px; padding:30px 32px; border:1px solid var(--bdr); border-radius:16px; box-shadow:var(--shadow);
  background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 8%, #fff) 0%, #fff 60%); }
.ma-ftr-hd{ display:flex; align-items:center; gap:18px; }
.ma-ftr-ico{ flex:0 0 auto; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--brand) 12%, #fff); color:var(--brand); }
.ma-ftr-title{ margin:0; font-size:24px; font-weight:800; line-height:1.2; color:var(--heading, #0F172A); }
.ma-ftr-sub{ margin:6px 0 0; font-size:14.5px; line-height:1.5; color:#475569; }
.ma-ftr-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 24px; margin:24px 0 0; padding:0; list-style:none; }
.ma-ftr-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.45; color:#334155; }
.ma-ftr-list svg{ flex:0 0 auto; margin-top:1px; color:var(--brand); }
.ma-ftr-status{ margin-top:22px; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:600; }
.ma-ftr-status[hidden]{ display:none; }
.ma-ftr-status.is-ok{ background:color-mix(in srgb, var(--brand) 10%, #fff); color:var(--brand-d); }
.ma-ftr-status.is-muted{ background:#F1F5F9; color:#475569; }
.ma-ftr-status.is-err{ background:#FEF2F2; color:#B91C1C; }
.ma-ftr-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.ma-ftr-btn, .ma-ftr-btn2{ height:48px; padding:0 28px; border-radius:999px; font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
.ma-ftr-btn{ border:0; background:var(--brand); color:#fff; box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 28%, transparent); }
.ma-ftr-btn[disabled]{ opacity:.7; cursor:progress; }
.ma-ftr-btn2{ border:1.5px solid var(--brand); background:transparent; color:var(--brand); }
.ma-ftr-btn[hidden], .ma-ftr-btn2[hidden]{ display:none; }
@media (max-width:640px){ .ma-ftr{ padding:22px 18px; } .ma-ftr-list{ grid-template-columns:minmax(0, 1fr); } .ma-ftr-title{ font-size:20px; } }
html[data-theme="dark"] .ma-ftr{ background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--brand) 14%, var(--surf)) 0%, var(--surf) 60%); }
html[data-theme="dark"] .ma-ftr-ico{ background:color-mix(in srgb, var(--brand) 20%, var(--surf)); }
html[data-theme="dark"] .ma-ftr-sub, html[data-theme="dark"] .ma-ftr-list li{ color:var(--text); }
html[data-theme="dark"] .ma-ftr-status.is-ok{ background:color-mix(in srgb, var(--brand) 16%, var(--surf)); color:color-mix(in srgb, var(--brand) 72%, #fff); }
html[data-theme="dark"] .ma-ftr-status.is-muted{ background:var(--surf3); color:var(--text); }
/* ═══════════ END v3.9.679 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.683 — Settings › Design Custom Header: dark-mode step tabs, phones
═══════════════════════════════════════════════════════════════════ */
/* dark mode: hover and the selected step stay dark, tinted with the step's colour */
html[data-theme="dark"] .ma-chd-step.tone-blue:hover{ background-color:rgba(31,111,235,.12); }
html[data-theme="dark"] .ma-chd-step.tone-blue.on{ background-color:rgba(31,111,235,.2); }
html[data-theme="dark"] .ma-chd-step.tone-blue.on .ma-chd-step-ico{ background-color:#1F6FEB; color:#fff; }
html[data-theme="dark"] .ma-chd-step.tone-green:hover{ background-color:rgba(18,161,80,.12); }
html[data-theme="dark"] .ma-chd-step.tone-green.on{ background-color:rgba(18,161,80,.2); }
html[data-theme="dark"] .ma-chd-step.tone-green.on .ma-chd-step-ico{ background-color:#12A150; color:#fff; }
html[data-theme="dark"] .ma-chd-step.tone-amber:hover{ background-color:rgba(224,135,0,.12); }
html[data-theme="dark"] .ma-chd-step.tone-amber.on{ background-color:rgba(224,135,0,.2); }
html[data-theme="dark"] .ma-chd-step.tone-amber.on .ma-chd-step-ico{ background-color:#E08700; color:#fff; }
html[data-theme="dark"] .ma-chd-step.tone-violet:hover{ background-color:rgba(124,58,237,.12); }
html[data-theme="dark"] .ma-chd-step.tone-violet.on{ background-color:rgba(124,58,237,.2); }
html[data-theme="dark"] .ma-chd-step.tone-violet.on .ma-chd-step-ico{ background-color:#7C3AED; color:#fff; }
html[data-theme="dark"] .ma-chd-step.tone-cyan:hover{ background-color:rgba(11,150,184,.12); }
html[data-theme="dark"] .ma-chd-step.tone-cyan.on{ background-color:rgba(11,150,184,.2); }
html[data-theme="dark"] .ma-chd-step.tone-cyan.on .ma-chd-step-ico{ background-color:#0B96B8; color:#fff; }
html[data-theme="dark"] .ma-chd-step-txt b{ color:var(--text); }
html[data-theme="dark"] .ma-chd-step-txt i{ color:var(--muted); }
/* a narrow canvas keeps a readable zoom and scrolls sideways (app.js _chdFit) */
.ma-chd-canvas.is-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.ma-chd-canvas{ -webkit-touch-callout:none; }
@media (max-width:640px){
  /* the five steps: a 2-column grid with short labels */
  .ma-chd-steps{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:8px !important; overflow:visible !important; }
  .ma-chd-step{ min-width:0 !important; padding:10px !important; gap:10px !important; }
  .ma-chd-step:last-child{ grid-column:1 / -1; }
  .ma-chd-step-link{ display:none !important; }
  .ma-chd-step-txt i{ display:none !important; }
  .ma-chd-step-txt b{ font-size:13px; line-height:1.25; white-space:normal; }
  .ma-chd-step-ico{ width:34px !important; height:34px !important; flex:0 0 auto; }
  /* the panels open as a sheet at the bottom of the screen */
  .ma-chd-win{ position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:8px !important;
    width:auto !important; max-height:72vh !important; z-index:9990 !important; border-radius:14px !important; }
  .ma-chd-ctx{ width:100%; }
}
/* Manage Layers on a phone: the name gets the first line, the buttons the second */
@media (max-width:560px){
  .ma-chd-lyr{ flex-wrap:wrap; row-gap:8px; }
  .ma-chd-lyr-title{ flex:1 1 0; min-width:0; }
  .ma-chd-lyr-acts{ flex:1 0 100%; justify-content:flex-end; }
}
/* the floating chat button stays out of the way while a designer window is open */
body:has(.ma-chd-lyrmodal.on, .ma-chd-imgmodal.on, .ma-chd-dsgnmodal.on, .ma-chd-txtmodal.on) #ma-ai-fab-wrap,
body:has(.ma-chd-lyrmodal.on, .ma-chd-imgmodal.on, .ma-chd-dsgnmodal.on, .ma-chd-txtmodal.on) .ma-agent-tab{ display:none !important; }
/* ═══════════ END v3.9.683 ═══════════ */

/* v3.9.684 — Design Custom Header on touch screens: swipe scrolls, the selected item drags */
.ma-chd-canvas.is-scroll{ touch-action:pan-x pan-y; }
.ma-chd-canvas.is-scroll .ma-chd-el.sel, .ma-chd-canvas.is-scroll .ma-chd-h{ touch-action:none; }   /* the renderer marks the selected item with .sel */
.ma-chd-touch-hint{ margin:6px 0 0; font-size:12px; line-height:1.4; text-align:center; color:var(--muted, #64748B); }
.ma-chd-touch-hint[hidden]{ display:none; }
.ma-chd-sizer{ position:relative; overflow:hidden; }   /* the header at its visible size (app.js _chdFit) */
/* ═══════════ END v3.9.684 ═══════════ */

/* v3.9.685 — the Upgrade / free-trial popup: a gift icon in the theme colour */
.ma-alert-trial .ma-alert-icon{ background:color-mix(in srgb, var(--brand) 14%, #fff); color:var(--brand); }
.ma-alert-trial .ma-alert-icon-halo{ background:color-mix(in srgb, var(--brand) 14%, #fff); }
.ma-alert-trial .ma-alert-primary{ background:var(--brand); border-color:var(--brand); box-shadow:0 1px 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.ma-alert-trial .ma-alert-primary:hover{ background:var(--brand-d); border-color:var(--brand-d); }
html[data-theme="dark"] .ma-alert-trial .ma-alert-icon{ background-color:color-mix(in srgb, var(--brand) 22%, var(--surf)); color:color-mix(in srgb, var(--brand) 75%, #fff); }
html[data-theme="dark"] .ma-alert-trial .ma-alert-icon-halo{ background-color:color-mix(in srgb, var(--brand) 22%, var(--surf)); }
/* ═══════════ END v3.9.685 ═══════════ */

/* v3.9.686 — Keyboard Shortcuts popover: an on/off switch in its header */
.ma-kbd-sw{ display:inline-flex; align-items:center; gap:9px; }
.ma-kbd-sw-txt{ font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--brand); }
.ma-kbd-panel.is-off .ma-kbd-sw-txt{ color:var(--muted); }
.ma-kbd-off-hint{ padding:10px 16px; font-size:12.5px; line-height:1.4; color:var(--muted); background:var(--surf2); border-bottom:1px solid var(--bdr); }
.ma-kbd-off-hint[hidden]{ display:none; }
.ma-kbd-panel.is-off .ma-hd-popover-body{ opacity:.45; filter:grayscale(.55); pointer-events:none; }
/* ═══════════ END v3.9.686 ═══════════ */

/* v3.9.687 — a nav menu stays shut after a choice until the pointer leaves the tab */
.ma-tab.ma-has-sub.ma-nav-hushed:hover .ma-subnav,
.ma-tab.ma-has-sub.ma-nav-hushed:hover .ma-subnav.ma-mega{ display:none !important; }
/* ═══════════ END v3.9.687 ═══════════ */

/* v3.9.688 — profile drawer: no Membership tile when plans are off; the support card is clickable */
html.ma-plans-off .ma-pd-tile-membership{ display:none !important; }
html.ma-plans-off .ma-pd-grid{ grid-template-columns:1fr 1fr; }
html.ma-plans-off .ma-pd-stat-plan{ cursor:default; }
.ma-pd-support{ cursor:pointer; transition:background .15s ease; }
.ma-pd-support:hover{ background:var(--surf3); }
.ma-pd-support:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* ═══════════ END v3.9.688 ═══════════ */

/* v3.9.702 — gallery thumbnails are pictures of the printed templates */
.ma-ptg-pv-inner > img.ma-ptg-thumb-img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; background:#fff; }
.ma-ptg-pv-inner > .ma-ptg-thumb-drawn{ width:100%; }
/* ═══════════ END v3.9.702 ═══════════ */

/* v3.9.718 — the card-style preview was withdrawn; View / Print uses the
   original viewer again. The template gallery keeps its own card (v3.9.708). */
/* ═══════════════════════════════════════════════════════════════════
   v3.9.704 — Invoice preview: a clean card with the document in full
   Title on the left, Download PDF and Close on the right, no Print. The
   old viewer toolbar / action rail / mobile bar are still in the markup
   (their handlers rely on it) but never shown.
═══════════════════════════════════════════════════════════════════ */
.rb-prev-overlay.rb-prev-v2{ display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.rb-prev-v2 .rb-prev-card{ display:flex; flex-direction:column; width:min(1140px, 100%); max-height:calc(100vh - 44px);
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(15,23,42,.38); }
.rb-prev-v2 .rb-prev-hd{ display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:14px 18px; background:#fff; border-bottom:1px solid #E6EDF7; }
.rb-prev-v2 .rb-prev-hd-t{ margin-right:auto; font-size:19px; font-weight:800; color:#0F172A; letter-spacing:-.2px; }
.rb-prev-v2 .rb-prev-hd-btn{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px;
  border-radius:10px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; transition:background .15s, box-shadow .15s; }
.rb-prev-v2 .rb-prev-hd-btn.dl{ background:#fff; color:#0F172A; border:1px solid #D9E2F2; }
.rb-prev-v2 .rb-prev-hd-btn.dl:hover{ background:#F3F7FF; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.rb-prev-v2 .rb-prev-hd-btn.x{ background:#1F6FEB; color:#fff; border:1px solid #1F6FEB; }
.rb-prev-v2 .rb-prev-hd-btn.x:hover{ background:#175BCC; border-color:#175BCC; }
/* the document area */
.rb-prev-v2 .rb-prev-body{ flex:1 1 auto; min-height:0; display:block; padding:18px; background:#EEF4FF; overflow:auto; }
.rb-prev-v2 .rb-prev-main{ display:block; width:100%; height:auto; background:transparent !important; }
.rb-prev-v2 .rb-prev-iframe-wrap{ display:block; width:100%; height:auto; background:transparent !important; padding:0 !important; overflow:visible; }
.rb-prev-v2 .rb-prev-iframe{ display:block !important; width:100% !important; max-width:none !important; min-height:62vh; border:0; border-radius:12px;
  background:#fff; box-shadow:0 6px 24px rgba(15,23,42,.10); }
.rb-prev-v2 .rb-prev-iframe-loading{ padding:40px 0; text-align:center; color:#64748B; font-size:14px; }
/* everything the old design showed around the document */
.rb-prev-v2 .rb-prev-vtoolbar,
.rb-prev-v2 .rb-prev-side,
.rb-prev-v2 .rb-prev-mobbar,
.rb-prev-v2 .rb-prev-mob-bar,
.rb-prev-v2 [id^="rb-prev-mob-"]{ display:none !important; }
@media (max-width:640px){
  .rb-prev-overlay.rb-prev-v2{ padding:0; }
  .rb-prev-v2 .rb-prev-card{ width:100%; max-height:100vh; border-radius:0; }
  .rb-prev-v2 .rb-prev-hd{ padding:10px 12px; gap:8px; }
  .rb-prev-v2 .rb-prev-hd-t{ font-size:16px; }
  .rb-prev-v2 .rb-prev-hd-btn{ height:38px; padding:0 12px; font-size:13px; }
  .rb-prev-v2 .rb-prev-hd-btn span{ display:none; }
  .rb-prev-v2 .rb-prev-body{ padding:10px; }
}
html[data-theme="dark"] .rb-prev-v2 .rb-prev-card{ background:var(--surf); }
html[data-theme="dark"] .rb-prev-v2 .rb-prev-hd{ background:var(--surf); border-color:var(--bdr); }
html[data-theme="dark"] .rb-prev-v2 .rb-prev-hd-t{ color:var(--text); }
html[data-theme="dark"] .rb-prev-v2 .rb-prev-hd-btn.dl{ background:var(--surf2); color:var(--text); border-color:var(--bdr); }
html[data-theme="dark"] .rb-prev-v2 .rb-prev-body{ background:var(--surf2); }
/* ═══════════ END v3.9.704 ═══════════ */


/* v3.9.708 — the print-template preview uses the same card as the invoice preview */
.ptpl-pv .rb-prev-body{ display:flex; align-items:flex-start; justify-content:center; overflow:auto; }
.ptpl-pv-stage{ position:relative; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 24px rgba(15,23,42,.12); transition:width .2s ease, height .2s ease; }
.ptpl-pv-stage iframe{ display:block; border:0; background:#fff; width:100%; height:820px; }
.ptpl-pv-loader{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:#fff; z-index:1; color:#64748B; font-size:13px; }
.ptpl-pv-spin{ width:34px; height:34px; border:3.5px solid #E5E7EB; border-top-color:#2563EB; border-radius:50%; animation:ptplSpin .8s linear infinite; }
/* ═══════════ END v3.9.708 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.709 — Sign in / sign up: the split screen from the design
═══════════════════════════════════════════════════════════════════ */
.ma-a2{ position:fixed; inset:0; display:grid; grid-template-columns:50% 50%;   /* v3.9.711 — half and half */ background:#fff; z-index:60; overflow:hidden; font-family:'Segoe UI',system-ui,Arial,sans-serif; }
.ma-a2-left{ position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:54px 46px 0;
  background:linear-gradient(135deg,#F2FBF6 0%,#EAF7F1 42%,#E8F4FB 100%); overflow:hidden; }
.ma-a2-left::before{ content:''; position:absolute; right:-90px; top:-70px; width:340px; height:340px; border-radius:50%;
  background:rgba(16,163,116,.10); }
.ma-a2-left::after{ content:''; position:absolute; right:60px; top:180px; width:190px; height:190px; border-radius:50%;
  background:rgba(16,163,116,.08); }
.ma-a2-copy{ position:relative; z-index:2; max-width:640px; }
.ma-a2-h1{ margin:0; font-size:44px; line-height:1.16; font-weight:800; color:#12324F; letter-spacing:-.5px; }
.ma-a2-h1 .g{ color:#12A76B; }
.ma-a2-sub{ margin:18px 0 0; font-size:17px; line-height:1.6; color:#47606F; max-width:560px; }
.ma-a2-feats{ display:flex; gap:38px; margin-top:34px; flex-wrap:wrap; }
.ma-a2-feat{ text-align:center; width:112px; }
.ma-a2-feat-ico{ display:flex; align-items:center; justify-content:center; width:66px; height:66px; margin:0 auto 10px; border-radius:16px; }
.ma-a2-feat-t{ display:block; font-size:13.5px; font-weight:700; color:#23405A; line-height:1.35; }
.ma-a2-art{ position:relative; z-index:2; min-height:220px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 0 26px; }
.ma-a2-art img{ max-width:74%; max-height:46vh; object-fit:contain; border-radius:14px; }
.ma-a2-tag{ font-family:'Segoe Script','Bradley Hand',cursive; font-size:24px; color:#12324F; line-height:1.15; text-align:right; }
.ma-a2-tag span{ color:#12324F; }
.ma-a2-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:7px; }
.ma-a2-dots i{ width:9px; height:9px; border-radius:50%; background:#CBD8D2; display:block; }
.ma-a2-dots i.on{ width:26px; border-radius:6px; background:#12A76B; }
/* right side */
.ma-a2-right{ position:relative; display:flex; align-items:center; justify-content:center; padding:30px 46px; overflow-y:auto; }
.ma-a2-lang{ position:absolute; top:26px; right:36px; display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 16px;
  border:1px solid #E2E8F0; border-radius:12px; font-size:15px; font-weight:600; color:#1E293B; background:#fff; cursor:default; }
.ma-a2-lang .flag{ width:22px; height:16px; border-radius:3px; background:linear-gradient(#FF9933 33%,#fff 33% 66%,#138808 66%); box-shadow:0 0 0 1px #E2E8F0; }
.ma-a2-card{ width:100%; max-width:520px; }
.ma-a2-logo{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:26px; }
.ma-a2-logo-mark{ display:flex; }
.ma-a2-logo-txt b{ display:block; font-size:34px; font-weight:800; color:#12324F; line-height:1.1; letter-spacing:-.6px; }
.ma-a2-logo-txt b .g{ color:#12A76B; }
.ma-a2-logo-txt i{ display:block; font-style:normal; font-size:11.5px; color:#5B7183; letter-spacing:.2px; margin-top:2px; }
.ma-a2-title{ margin:0; text-align:center; font-size:29px; font-weight:800; color:#12324F; }
.ma-a2-lead{ margin:8px 0 26px; text-align:center; font-size:15px; color:#64798A; line-height:1.5; }
.ma-a2-lbl{ display:block; font-size:14.5px; font-weight:700; color:#1E293B; margin-bottom:8px; }
.ma-a2-field{ display:flex; align-items:center; gap:12px; height:58px; padding:0 16px; border:1px solid #DCE5EC; border-radius:12px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.ma-a2-field:focus-within{ border-color:#12A76B; box-shadow:0 0 0 3px rgba(18,167,107,.14); }
.ma-a2-field svg{ color:#94A3B8; flex:0 0 auto; }
.ma-a2-field input{ flex:1; border:0; outline:0; font:inherit; font-size:15.5px; color:#0F172A; background:transparent; min-width:0; }
.ma-a2-field input::placeholder{ color:#9AA8B5; }
.ma-a2-primary{ width:100%; height:58px; margin-top:18px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(90deg,#16B36B 0%,#0E9C7E 100%); color:#fff; font:inherit; font-size:17px; font-weight:700;
  box-shadow:0 8px 20px rgba(16,163,116,.28); transition:filter .15s; }
.ma-a2-primary:hover{ filter:brightness(1.05); }
.ma-a2-primary[disabled]{ opacity:.7; cursor:progress; }
.ma-a2-or{ position:relative; text-align:center; margin:22px 0; color:#8FA0AE; font-size:13.5px; font-weight:600; }
.ma-a2-or::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#E6ECF1; }
.ma-a2-or span{ position:relative; background:#fff; padding:0 14px; }
.ma-a2-google{ width:100%; height:58px; display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid #DCE5EC; border-radius:12px; background:#fff; cursor:pointer; font:inherit; font-size:16px; font-weight:700; color:#1E293B; }
.ma-a2-google:hover{ background:#F8FAFC; }
.ma-a2-google[hidden]{ display:none; }
.ma-a2-sent{ font-size:14.5px; color:#47606F; margin:0 0 18px; }
.ma-a2-link{ border:0; background:none; color:#12A76B; font:inherit; font-weight:700; cursor:pointer; padding:0 2px; }
.ma-a2-resend{ display:block; margin:14px auto 0; }
.ma-a2-switch{ margin-top:26px; padding:24px; text-align:center; background:#EFF9F4; border:1px solid #DCEFE6; border-radius:14px; }
.ma-a2-switch b{ display:block; font-size:19px; font-weight:800; color:#12324F; }
.ma-a2-switch span{ display:block; margin:6px 0 16px; font-size:14.5px; color:#5B7183; line-height:1.5; }
.ma-a2-switch-btn{ width:100%; height:52px; border:1.5px solid #12A76B; border-radius:12px; background:#fff; color:#12A76B;
  font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
.ma-a2-switch-btn:hover{ background:#12A76B; color:#fff; }
.ma-a2-note{ margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px; font-weight:600; }
.ma-a2-note.err{ background:#FEF2F2; color:#B91C1C; }
.ma-a2-note.ok{ background:#ECFDF5; color:#047857; }
@media (max-width:1024px){
  .ma-a2{ grid-template-columns:1fr; overflow-y:auto; }
  .ma-a2-left{ display:none; }
  .ma-a2-right{ padding:70px 20px 40px; align-items:flex-start; }
  .ma-a2-lang{ top:16px; right:16px; height:38px; font-size:14px; }
}
html[data-theme="dark"] .ma-a2{ background:var(--surf); }
html[data-theme="dark"] .ma-a2-right{ background:var(--surf); }
html[data-theme="dark"] .ma-a2-title, html[data-theme="dark"] .ma-a2-logo-txt b{ color:var(--text); }
html[data-theme="dark"] .ma-a2-field{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-a2-field input{ color:var(--text); }
html[data-theme="dark"] .ma-a2-switch{ background:var(--surf2); border-color:var(--bdr); }
/* ═══════════ END v3.9.709 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.710 — The one-time code step: six boxes, with movement
═══════════════════════════════════════════════════════════════════ */
#ma-a2-step-code{ animation:maOtpIn .28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes maOtpIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ma-a2-otp-sent{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; margin-bottom:22px;
  background:#EFF9F4; border:1px solid #DCEFE6; border-radius:12px; font-size:14.2px; color:#41606F; line-height:1.5; }
.ma-a2-otp-sent b{ color:#12324F; }
.ma-a2-otp-badge{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:9px; background:#12A76B; color:#fff; animation:maOtpPop .35s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes maOtpPop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.ma-a2-otp{ display:flex; align-items:center; gap:10px; }
.ma-a2-otp-dash{ width:12px; height:2px; border-radius:2px; background:#D7E2EA; flex:0 0 auto; }
.ma-a2-otp-cell{ flex:1 1 0; min-width:0; height:64px; text-align:center; font-size:26px; font-weight:800; color:#0F172A;
  border:1.6px solid #DCE5EC; border-radius:13px; background:#fff; outline:0; caret-color:#12A76B;
  transition:border-color .16s, box-shadow .16s, transform .16s, background .16s; }
.ma-a2-otp-cell::placeholder{ color:#CBD5E1; }
.ma-a2-otp-cell:hover{ border-color:#C6D4DF; }
.ma-a2-otp-cell:focus{ border-color:#12A76B; box-shadow:0 0 0 4px rgba(18,167,107,.15); transform:translateY(-2px); }
.ma-a2-otp-cell.filled{ border-color:#12A76B; background:#F3FBF7; animation:maOtpFill .22s ease-out; }
@keyframes maOtpFill{ 0%{ transform:scale(.88) } 60%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.ma-a2-otp.is-wrong{ animation:maOtpShake .42s cubic-bezier(.36,.07,.19,.97) both; }
.ma-a2-otp.is-wrong .ma-a2-otp-cell{ border-color:#EF4444; background:#FEF2F2; }
@keyframes maOtpShake{ 10%,90%{ transform:translateX(-2px) } 20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-7px) } 40%,60%{ transform:translateX(7px) } }
.ma-a2-otp.is-ok .ma-a2-otp-cell{ border-color:#12A76B; background:#ECFDF5; }
/* the button: label → spinner → tick */
.ma-a2-verify{ position:relative; }
.ma-a2-verify .ma-a2-spin, .ma-a2-verify .ma-a2-tick{ position:absolute; left:50%; top:50%; opacity:0; }
.ma-a2-spin{ width:22px; height:22px; margin:-11px 0 0 -11px; border:2.6px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; }
.ma-a2-tick{ width:26px; height:26px; margin:-13px 0 0 -13px; color:#fff; }
.ma-a2-verify.is-busy .t{ opacity:0; }
.ma-a2-verify.is-busy .ma-a2-spin{ opacity:1; animation:maOtpSpin .7s linear infinite; }
@keyframes maOtpSpin{ to{ transform:rotate(360deg) } }
.ma-a2-verify.is-done .t{ opacity:0; }
.ma-a2-verify.is-done{ background:linear-gradient(90deg,#12A76B,#0E9C7E); }
.ma-a2-verify.is-done .ma-a2-tick{ opacity:1; animation:maOtpTick .3s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes maOtpTick{ from{ transform:scale(.4) } to{ transform:scale(1) } }
.ma-a2-resend-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:14px; color:#7A8B98; }
.ma-a2-resend{ margin:0; }
.ma-a2-resend[disabled]{ color:#A8B6C1; cursor:default; }
.ma-a2-resend-row #ma-a2-timer[hidden]{ display:none; }
@media (max-width:520px){
  .ma-a2-otp{ gap:7px; } .ma-a2-otp-cell{ height:54px; font-size:21px; border-radius:11px; } .ma-a2-otp-dash{ width:7px; }
}
html[data-theme="dark"] .ma-a2-otp-cell{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-a2-otp-cell.filled{ background:color-mix(in srgb, #12A76B 14%, var(--surf2)); }
html[data-theme="dark"] .ma-a2-otp-sent{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
/* ═══════════ END v3.9.710 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.711 — Sign-in screen: the picture slider on the left half
═══════════════════════════════════════════════════════════════════ */
.ma-a2-art{ position:relative; min-height:260px; }
.ma-a2-slides{ position:relative; width:100%; height:min(46vh, 420px); }
.ma-a2-slides:empty{ display:none; }
.ma-a2-slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease, transform .7s ease; transform:scale(1.02); }
.ma-a2-slide.on{ opacity:1; transform:scale(1); }
.ma-a2-slide img{ width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block; }
.ma-a2-slide-cap{ position:absolute; left:0; right:0; bottom:-4px; text-align:center; font-size:14.5px; font-weight:600; color:#2F4E63; }
.ma-a2-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:7px; }
.ma-a2-dots i{ width:9px; height:9px; border-radius:50%; background:#CBD8D2; display:block; cursor:pointer; transition:width .25s, background .25s; }
.ma-a2-dots i.on{ width:26px; border-radius:6px; background:#12A76B; }
.ma-a2-dots:empty{ display:none; }
@media (max-width:1024px){ .ma-a2{ grid-template-columns:1fr; } }
/* ═══════════ END v3.9.711 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.715 — Translation Options on a phone
   The rows were built for a wide screen: a fixed 130px label beside the
   box left about 60px to type in, and the two-column block plus its 22px
   padding pushed the panel wider than the screen. On a phone the label
   now sits above a full-width box.
═══════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  #trans-opt-list .ma-acc-panel{ overflow-x:hidden; }
  .ma-trans-card{ margin-left:0; margin-right:0; border-radius:10px; }
  .ma-trans-card .ma-trans-card-hdr{ padding:10px 12px; font-size:12.5px; }
  .ma-trans-card .ma-trans-hdr-tiny{ padding:9px 12px; line-height:1.35; }
  .ma-trans-form, .ma-trans-cols{ padding:14px 12px 16px; gap:14px; }
  .ma-trans-cols{ grid-template-columns:1fr !important; }
  .ma-trans-row, .ma-trans-col .ma-trans-row{ flex-direction:column; align-items:stretch; gap:6px; max-width:none; }
  .ma-trans-row label, .ma-trans-col .ma-trans-row label{ flex:0 0 auto; width:auto; font-size:12px; font-weight:600; }
  .ma-trans-row input{ width:100%; height:44px; font-size:15px; padding:8px 12px; }
  #trans-opt-list .ma-acc-row{ padding:14px 12px; font-size:14.5px; }
}
@media (max-width:640px){
  /* four levels of padding (22+20+14+12 each side) left ~227px of a 390px
     screen to type in; trimmed so the boxes get the width instead */
  #set-sec-translation .ma-set2-sec-body{ padding:14px 10px; }
  #trans-opt-list .ma-acc-panel{ padding:12px 8px; }
  #trans-opt-list .ma-settings-card, #trans-opt-list .ma-bill-box{ padding:12px 8px 10px; }
  #trans-opt-list .ma-trans-form, #trans-opt-list .ma-trans-cols{ padding:12px 8px 14px; }
  #trans-opt-list .ma-trans-row input{ height:44px !important; min-height:44px; font-size:15px; }   /* a finger-sized box */
}
/* ═══════════ END v3.9.715 ═══════════ */

/* v3.9.716 — the buttons on the right keep their own room, and Ask AI never
   touches Create */
.ma-topbar-right{ flex:0 0 auto; }
.ma-topbar-search-wrap .ma-ask-ai-btn{ flex:0 0 auto; margin-right:2px; }
@media (max-width:1180px){
  .ma-topbar-search-wrap{ max-width:none; }
  .ma-topbar-search input{ min-width:0; }
}
@media (min-width:1025px){
  /* v3.9.717 — the two sides share whatever is left over, so the search and
     Ask AI sit in the middle of the bar when nothing else is competing (no
     GSTIN tag). Once the right-hand side grows, the middle gives way just
     enough and still never touches the Create button. */
  .ma-topbar-logo.ma-cs-trigger{ flex:1 1 0; min-width:0; justify-content:flex-start; }
  .ma-topbar-right{ flex:1 1 0; justify-content:flex-end; }
  .ma-topbar-search-wrap{ flex:0 1 560px; margin:0; }
}
/* ═══════════ END v3.9.716 ═══════════ */

/* v3.9.717 — a bank's own picture in the Bank Details dropdown */
.ma-bk-logo.is-img{ background:#fff !important; padding:0; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; }
.ma-bk-logo.is-img img{ width:100%; height:100%; object-fit:contain; display:block; }
/* ═══════════ END v3.9.717 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.721 — Mega menus on laptop screens
   Report packs five columns in, and each title was held to a single
   line with an ellipsis, so on a 1366-wide laptop names arrived as
   "Bill-wise Profit & L…" and "Customer Wise Pro…". Titles may now take
   a second line, and the columns step down as the screen narrows so
   each one keeps a readable width.
═══════════════════════════════════════════════════════════════════ */
.ma-subnav.ma-mega .ma-mega-title{
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-overflow:clip;
  word-break:break-word;
}
.ma-subnav.ma-mega .ma-subnav-lnk{ align-items:flex-start; }
@media (max-width:1560px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{ grid-template-columns:repeat(4, minmax(190px, 1fr)) !important; gap:14px 18px; }
}
@media (max-width:1280px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid{ grid-template-columns:repeat(3, minmax(190px, 1fr)) !important; }
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{ grid-template-columns:repeat(3, minmax(190px, 1fr)) !important; }
}
@media (max-width:1080px){
  .ma-subnav.ma-mega.ma-mega-c5 .ma-mega-grid,
  .ma-subnav.ma-mega.ma-mega-c4 .ma-mega-grid{ grid-template-columns:repeat(2, minmax(180px, 1fr)) !important; }
}
/* a menu never runs past the bottom of a short laptop window */
.ma-subnav.ma-mega{ max-height:var(--ma-mega-maxh, calc(100vh - 124px)); overflow-y:auto; }
/* the chat bubble stays out of the way while a menu is open */
body:has(.ma-tab.ma-has-sub:hover .ma-subnav.ma-mega) #ma-ai-fab-wrap,
body:has(.ma-tab.ma-has-sub.open .ma-subnav.ma-mega) #ma-ai-fab-wrap,
body:has(.ma-tab.ma-has-sub:hover .ma-subnav.ma-mega) .ma-agent-tab,
body:has(.ma-tab.ma-has-sub.open .ma-subnav.ma-mega) .ma-agent-tab{ display:none !important; }
/* ═══════════ END v3.9.721 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.722 — After the code is accepted: the boxes give way to a green
   tick that springs in behind a glow, and the panel says so.
═══════════════════════════════════════════════════════════════════ */
.ma-a2-otp.is-done{ animation:maOtpAway .34s ease forwards; pointer-events:none; }
@keyframes maOtpAway{ to{ opacity:0; transform:scale(.94); filter:blur(2px); } }
.ma-a2-done{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 4px; }
.ma-a2-done[hidden]{ display:none; }
.ma-a2-done-badge{ position:relative; width:86px; height:86px; border-radius:26px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#16B36B,#0E9C7E); color:#fff; box-shadow:0 14px 34px rgba(16,163,116,.42);
  animation:maDonePop .5s cubic-bezier(.17,1.5,.4,1) both; }
.ma-a2-done-badge svg{ width:42px; height:42px; stroke-dasharray:32; stroke-dashoffset:32; animation:maDoneTick .4s .18s ease forwards; }
.ma-a2-done-badge::after{ content:''; position:absolute; inset:-14px; border-radius:36px; border:2px solid rgba(18,167,107,.45);
  animation:maDoneRing 1.1s .12s ease-out infinite; }
@keyframes maDonePop{ from{ transform:scale(.3) rotate(-12deg); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes maDoneTick{ to{ stroke-dashoffset:0 } }
@keyframes maDoneRing{ 0%{ transform:scale(.86); opacity:.8 } 70%{ transform:scale(1.22); opacity:0 } 100%{ opacity:0 } }
.ma-a2-done-t{ margin-top:20px; font-size:21px; font-weight:800; color:#12324F; animation:maDoneUp .4s .18s both; }
.ma-a2-done-s{ margin-top:6px; font-size:14.5px; color:#5B7183; animation:maDoneUp .4s .26s both; }
@keyframes maDoneUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
html[data-theme="dark"] .ma-a2-done-t{ color:var(--text); }
/* the code boxes glow while being typed into, as in the design */
.ma-a2-otp-cell:focus{ box-shadow:0 0 0 4px rgba(18,167,107,.18), 0 6px 18px rgba(18,167,107,.25); }

/* v3.9.722 — the slider fills its half of the screen at full size */
.ma-a2-left{ position:relative; }
.ma-a2-left.has-slides{ padding:0; }
.ma-a2-left.has-slides .ma-a2-copy{ position:relative; z-index:2; padding:54px 46px 0; }
.ma-a2-left.has-slides .ma-a2-art{ position:absolute; inset:0; min-height:0; padding:0; display:block; }
.ma-a2-left.has-slides .ma-a2-slides{ position:absolute; inset:0; width:100%; height:100%; }
.ma-a2-left.has-slides .ma-a2-art img,
.ma-a2-left.has-slides .ma-a2-slide img{
  width:100%; height:100%; max-width:none; max-height:none;   /* the old caps (74% / 46vh) kept pictures small */
  object-fit:cover; object-position:center; border-radius:0;
}
.ma-a2-left.has-slides .ma-a2-slide-cap{ bottom:42px; color:#12324F; text-shadow:0 1px 10px rgba(255,255,255,.85); font-size:16px; }
.ma-a2-left.has-slides .ma-a2-tag{ display:none; }
.ma-a2-left.has-slides .ma-a2-dots{ z-index:3; }
/* with a picture behind it the headline keeps a readable backing */
.ma-a2-left.has-slides .ma-a2-copy::before{ content:''; position:absolute; inset:-54px -46px 0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%); }
/* ═══════════ END v3.9.722 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.723 — The moment the code is accepted, as in the clip: the
   boxes slide together into one rounded square, the square turns from
   the typing colour to green, the tick draws, and the wording follows.
═══════════════════════════════════════════════════════════════════ */
.ma-a2-otp{ position:relative; }
.ma-a2-otp.is-merging .ma-a2-otp-cell{ transition:transform .42s cubic-bezier(.6,-0.2,.3,1.4), opacity .3s ease, border-color .3s ease; }
.ma-a2-otp.is-merging .ma-a2-otp-dash{ opacity:0; transition:opacity .2s ease; }
.ma-a2-merge{ position:absolute; left:50%; top:50%; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:22px;
  background:#0F172A0D; border:2.5px solid var(--brand, #12A76B); opacity:0; transform:scale(.8);
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ma-a2-otp.is-merged .ma-a2-merge{ opacity:1; transform:scale(1);
  animation:maMergeIn .45s cubic-bezier(.2,1.5,.4,1) both, maMergeGlow 1.4s .4s ease-out infinite; }
/* v3.9.724 — the merged square turns into the green tick itself, so there is
   one badge on screen rather than this one plus a second in the panel below. */
.ma-a2-otp.is-merged .ma-a2-merge{
  width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:26px;
  background:linear-gradient(145deg,#16B36B,#0E9C7E); border-color:transparent; color:#fff;
  box-shadow:0 14px 34px rgba(16,163,116,.42);
}
.ma-a2-otp.is-merged .ma-a2-merge svg{ width:42px; height:42px; color:#fff; }
/* the panel under it carries only the wording */
.ma-a2-done.is-textonly .ma-a2-done-badge{ display:none; }
.ma-a2-done.is-textonly{ padding-top:0; }
.ma-a2-done.is-textonly .ma-a2-done-t{ margin-top:8px; }
/* room for the badge that now lives in the code row */
.ma-a2-otp.is-merged{ min-height:104px; }
.ma-a2-otp.is-merged .ma-a2-otp-cell{ opacity:0; transform:scale(.6); }
@keyframes maMergeIn{ 0%{ transform:scale(.55) rotate(-8deg); opacity:.2 } 100%{ transform:none; opacity:1 } }
@keyframes maMergeGlow{ 0%{ box-shadow:0 0 0 0 rgba(18,167,107,.45) } 70%{ box-shadow:0 0 0 18px rgba(18,167,107,0) } 100%{ box-shadow:0 0 0 0 rgba(18,167,107,0) } }
.ma-a2-merge svg{ width:34px; height:34px; color:var(--brand, #12A76B); stroke-dasharray:32; stroke-dashoffset:32; }
.ma-a2-otp.is-merged .ma-a2-merge svg{ animation:maDoneTick .38s .28s ease forwards; }
.ma-a2-otp.is-merged{ background:transparent; }

/* v3.9.723 — slider pictures sit in a neat square, so any upload fits */
.ma-a2-left.has-slides .ma-a2-art{ display:flex; align-items:center; justify-content:center; padding:0 0 46px; }
.ma-a2-left.has-slides .ma-a2-slides{ position:relative; inset:auto; width:min(520px, 62%); aspect-ratio:1 / 1; height:auto;
  border-radius:26px; overflow:hidden; box-shadow:0 26px 60px rgba(15,60,45,.18); background:#fff; }
.ma-a2-left.has-slides .ma-a2-art img,
.ma-a2-left.has-slides .ma-a2-slide img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; border-radius:0; }
.ma-a2-left.has-slides .ma-a2-slide-cap{ position:static; margin-top:14px; text-shadow:none; }
.ma-a2-left.has-slides .ma-a2-copy::before{ content:none; }
.ma-a2-left.has-slides .ma-a2-copy{ padding:54px 46px 0; }
.ma-a2-left.has-slides{ padding:0 0 18px; }
@media (max-width:1280px){ .ma-a2-left.has-slides .ma-a2-slides{ width:min(420px, 70%); } }
/* the logo set in the admin screen */
.ma-a2-logo-img{ max-height:58px; max-width:280px; object-fit:contain; display:block; }
/* ═══════════ END v3.9.723 ═══════════ */

/* v3.9.730 — an invisible link over each menu item, so the browser can open it
   in a new tab; it never changes how the item looks */
.ma-open-link{ position:absolute; inset:0; display:block; z-index:1; text-decoration:none; color:inherit;
  background:transparent; border-radius:inherit; }
.ma-subnav-lnk, .ma-tab-main, .ma-set2-link{ position:relative; }
/* ═══════════ END v3.9.730 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.735 — Proper icons in place of emoji
   Emoji stood in for icons all over the app and drew differently on
   every device. Each is now a drawn icon that takes the colour and
   size of the text beside it.
═══════════════════════════════════════════════════════════════════ */
i[class^="ma-ic-"], i[class*=" ma-ic-"], .ma-ic{ display:inline-block; width:1em; height:1em; vertical-align:-0.14em; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; flex:0 0 auto; }
.ma-ic-x{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M18 6 6 18M6 6l12 12%22/%3E%3C/svg%3E"); }
.ma-ic-check{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
.ma-ic-check-c{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8.5 12 2.5 2.5 4.5-5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8.5 12 2.5 2.5 4.5-5%22/%3E%3C/svg%3E"); }
.ma-ic-download{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3Cpath d=%22M12 15V3%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3Cpath d=%22M12 15V3%22/%3E%3C/svg%3E"); }
.ma-ic-lock{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%224%22 y=%2210.5%22 width=%2216%22 height=%2210%22 rx=%222.2%22/%3E%3Cpath d=%22M8 10.5V7a4 4 0 0 1 8 0v3.5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%224%22 y=%2210.5%22 width=%2216%22 height=%2210%22 rx=%222.2%22/%3E%3Cpath d=%22M8 10.5V7a4 4 0 0 1 8 0v3.5%22/%3E%3C/svg%3E"); }
.ma-ic-eye{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.6%22/%3E%3C/svg%3E"); }
.ma-ic-clipboard{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%226%22 y=%224%22 width=%2212%22 height=%2217%22 rx=%222%22/%3E%3Cpath d=%22M9 4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V6H9z%22/%3E%3Cpath d=%22M9 11h6M9 15h4%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%226%22 y=%224%22 width=%2212%22 height=%2217%22 rx=%222%22/%3E%3Cpath d=%22M9 4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V6H9z%22/%3E%3Cpath d=%22M9 11h6M9 15h4%22/%3E%3C/svg%3E"); }
.ma-ic-pencil{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z%22/%3E%3C/svg%3E"); }
.ma-ic-trash{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6%22/%3E%3Cpath d=%22M6 6v13a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6%22/%3E%3Cpath d=%22M10 11v6M14 11v6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 6h18M8 6V4.5A1.5 1.5 0 0 1 9.5 3h5A1.5 1.5 0 0 1 16 4.5V6%22/%3E%3Cpath d=%22M6 6v13a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6%22/%3E%3Cpath d=%22M10 11v6M14 11v6%22/%3E%3C/svg%3E"); }
.ma-ic-camera{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 8.5A2.5 2.5 0 0 1 5.5 6h2L9 4h6l1.5 2h2A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223.4%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 8.5A2.5 2.5 0 0 1 5.5 6h2L9 4h6l1.5 2h2A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223.4%22/%3E%3C/svg%3E"); }
.ma-ic-warn{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0z%22/%3E%3Cpath d=%22M12 9v4.5M12 17.2h.01%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0z%22/%3E%3Cpath d=%22M12 9v4.5M12 17.2h.01%22/%3E%3C/svg%3E"); }
.ma-ic-search{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-3.6-3.6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-3.6-3.6%22/%3E%3C/svg%3E"); }
.ma-ic-box{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 16V8l-9-5-9 5v8l9 5 9-5z%22/%3E%3Cpath d=%22M3.3 7.3 12 12l8.7-4.7M12 12v9%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 16V8l-9-5-9 5v8l9 5 9-5z%22/%3E%3Cpath d=%22M3.3 7.3 12 12l8.7-4.7M12 12v9%22/%3E%3C/svg%3E"); }
.ma-ic-tool{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M14.7 6.3a4 4 0 0 0 5.3 5.3l-8.6 8.6a2.4 2.4 0 0 1-3.4-3.4z%22/%3E%3Cpath d=%22M17.8 3.2 20.8 6.2%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M14.7 6.3a4 4 0 0 0 5.3 5.3l-8.6 8.6a2.4 2.4 0 0 1-3.4-3.4z%22/%3E%3Cpath d=%22M17.8 3.2 20.8 6.2%22/%3E%3C/svg%3E"); }
.ma-ic-phone{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2c1.2.4 2.4.6 3.6.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.3.2 2.5.6 3.6a1 1 0 0 1-.2 1z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2c1.2.4 2.4.6 3.6.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.3.2 2.5.6 3.6a1 1 0 0 1-.2 1z%22/%3E%3C/svg%3E"); }
.ma-ic-mobile{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%227%22 y=%222.5%22 width=%2210%22 height=%2219%22 rx=%222.4%22/%3E%3Cpath d=%22M11 18.6h2%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%227%22 y=%222.5%22 width=%2210%22 height=%2219%22 rx=%222.4%22/%3E%3Cpath d=%22M11 18.6h2%22/%3E%3C/svg%3E"); }
.ma-ic-store{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 9.5 5.2 5A2 2 0 0 1 7.1 3.5h9.8A2 2 0 0 1 18.8 5L20 9.5%22/%3E%3Cpath d=%22M4 9.5h16v2a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-4 0z%22/%3E%3Cpath d=%22M5 13v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 9.5 5.2 5A2 2 0 0 1 7.1 3.5h9.8A2 2 0 0 1 18.8 5L20 9.5%22/%3E%3Cpath d=%22M4 9.5h16v2a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-4 0z%22/%3E%3Cpath d=%22M5 13v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7%22/%3E%3C/svg%3E"); }
.ma-ic-clock{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5.3l3.3 2%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5.3l3.3 2%22/%3E%3C/svg%3E"); }
.ma-ic-calendar{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2216%22 rx=%222.4%22/%3E%3Cpath d=%22M8 3v4M16 3v4M3.5 10h17%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223.5%22 y=%225%22 width=%2217%22 height=%2216%22 rx=%222.4%22/%3E%3Cpath d=%22M8 3v4M16 3v4M3.5 10h17%22/%3E%3C/svg%3E"); }
.ma-ic-palette{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3a9 9 0 0 0 0 18 2.4 2.4 0 0 0 2.4-2.4c0-.6-.2-1.1-.6-1.5a2.4 2.4 0 0 1 1.7-4.1H18A3.5 3.5 0 0 0 21.5 9C21.2 5.6 17 3 12 3z%22/%3E%3Ccircle cx=%227.5%22 cy=%2211%22 r=%221.1%22/%3E%3Ccircle cx=%2210.5%22 cy=%227.5%22 r=%221.1%22/%3E%3Ccircle cx=%2215%22 cy=%228%22 r=%221.1%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3a9 9 0 0 0 0 18 2.4 2.4 0 0 0 2.4-2.4c0-.6-.2-1.1-.6-1.5a2.4 2.4 0 0 1 1.7-4.1H18A3.5 3.5 0 0 0 21.5 9C21.2 5.6 17 3 12 3z%22/%3E%3Ccircle cx=%227.5%22 cy=%2211%22 r=%221.1%22/%3E%3Ccircle cx=%2210.5%22 cy=%227.5%22 r=%221.1%22/%3E%3Ccircle cx=%2215%22 cy=%228%22 r=%221.1%22/%3E%3C/svg%3E"); }
.ma-ic-ban{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m5.6 5.6 12.8 12.8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m5.6 5.6 12.8 12.8%22/%3E%3C/svg%3E"); }
.ma-ic-scroll{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6 4h9a2 2 0 0 1 2 2v12a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9.5 8h5M9.5 12h5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6 4h9a2 2 0 0 1 2 2v12a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9.5 8h5M9.5 12h5%22/%3E%3C/svg%3E"); }
.ma-ic-link{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 13a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.3 1.3%22/%3E%3Cpath d=%22M14 11a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 19.7l1.3-1.3%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 13a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.3 1.3%22/%3E%3Cpath d=%22M14 11a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 19.7l1.3-1.3%22/%3E%3C/svg%3E"); }
.ma-ic-sun{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8%22/%3E%3C/svg%3E"); }
.ma-ic-moon{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z%22/%3E%3C/svg%3E"); }
.ma-ic-refresh{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 12a9 9 0 1 1-2.6-6.4%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M21 12a9 9 0 1 1-2.6-6.4%22/%3E%3Cpath d=%22M21 4v5h-5%22/%3E%3C/svg%3E"); }
.ma-ic-spark{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3l1.8 4.9L18.7 9.7 13.8 11.5 12 16.4l-1.8-4.9L5.3 9.7l4.9-1.8z%22/%3E%3Cpath d=%22M18.5 16.5l.8 2.1 2.1.8-2.1.8-.8 2.1-.8-2.1-2.1-.8 2.1-.8z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3l1.8 4.9L18.7 9.7 13.8 11.5 12 16.4l-1.8-4.9L5.3 9.7l4.9-1.8z%22/%3E%3Cpath d=%22M18.5 16.5l.8 2.1 2.1.8-2.1.8-.8 2.1-.8-2.1-2.1-.8 2.1-.8z%22/%3E%3C/svg%3E"); }
.ma-ic-tag{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20.6 12.6 12 21.2a2 2 0 0 1-2.8 0l-6.4-6.4a2 2 0 0 1 0-2.8L11.4 3.4a2 2 0 0 1 1.4-.6h5.4A2 2 0 0 1 20.6 5v5.4a2 2 0 0 1-.6 1.4z%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.4%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M20.6 12.6 12 21.2a2 2 0 0 1-2.8 0l-6.4-6.4a2 2 0 0 1 0-2.8L11.4 3.4a2 2 0 0 1 1.4-.6h5.4A2 2 0 0 1 20.6 5v5.4a2 2 0 0 1-.6 1.4z%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.4%22/%3E%3C/svg%3E"); }
.ma-ic-stamp{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6 21h12%22/%3E%3Cpath d=%22M8 18h8v-2.5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2z%22/%3E%3Cpath d=%22M10 13.5V9a2 2 0 1 1 4 0v4.5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M6 21h12%22/%3E%3Cpath d=%22M8 18h8v-2.5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2z%22/%3E%3Cpath d=%22M10 13.5V9a2 2 0 1 1 4 0v4.5%22/%3E%3C/svg%3E"); }
.ma-ic-user{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%223.6%22/%3E%3Cpath d=%22M4.8 20.5a7.2 7.2 0 0 1 14.4 0%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%228.5%22 r=%223.6%22/%3E%3Cpath d=%22M4.8 20.5a7.2 7.2 0 0 1 14.4 0%22/%3E%3C/svg%3E"); }
.ma-ic-image{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223.5%22 y=%224.5%22 width=%2217%22 height=%2215%22 rx=%222.4%22/%3E%3Ccircle cx=%229%22 cy=%2210%22 r=%221.7%22/%3E%3Cpath d=%22m4.5 17.5 4.7-4.3 3.6 3.2 2.6-2.2 4.1 3.6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223.5%22 y=%224.5%22 width=%2217%22 height=%2215%22 rx=%222.4%22/%3E%3Ccircle cx=%229%22 cy=%2210%22 r=%221.7%22/%3E%3Cpath d=%22m4.5 17.5 4.7-4.3 3.6 3.2 2.6-2.2 4.1 3.6%22/%3E%3C/svg%3E"); }
.ma-ic-menu{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E"); }
.ma-ic-party{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4.5 20.5 9 9l6 6-11.5 4.5a.8.8 0 0 1-1-1z%22/%3E%3Cpath d=%22M14 4.5v2M19.5 10h-2M17.6 6.4 16.2 7.8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4.5 20.5 9 9l6 6-11.5 4.5a.8.8 0 0 1-1-1z%22/%3E%3Cpath d=%22M14 4.5v2M19.5 10h-2M17.6 6.4 16.2 7.8%22/%3E%3C/svg%3E"); }
/* ═══════════ END v3.9.735 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.735 — Characters that were standing in for icons (↩ ↺ ↻ ▦ ＋)
   are drawn icons now, so they line up with the text and follow the
   colour around them instead of arriving as whatever glyph the font
   happened to have.
═══════════════════════════════════════════════════════════════════ */
.ma-ic{ width:1em; height:1em; vertical-align:-0.14em; margin-right:.42em; flex:0 0 auto; }
.ma-btn .ma-ic:last-child, .gst-items-menu-item .ma-ic:last-child{ margin-right:0; }
.ma-btn .ma-ic{ width:15px; height:15px; }
.gst-items-menu-item .ma-ic{ width:16px; height:16px; }
.ma-empty .ei .ma-ic{ width:34px; height:34px; margin:0; opacity:.5; }
/* the plus used for an "additional charge" row */
.ma-ic-plus{ display:inline-block; width:18px; height:18px; position:relative; }
.ma-ic-plus::before, .ma-ic-plus::after{ content:''; position:absolute; background:currentColor; border-radius:2px; }
.ma-ic-plus::before{ left:50%; top:2px; bottom:2px; width:2px; transform:translateX(-50%); }
.ma-ic-plus::after{ top:50%; left:2px; right:2px; height:2px; transform:translateY(-50%); }
/* ═══════════ END v3.9.735 ═══════════ */

/* v3.9.737 — a bank's own picture on the saved bank card */
.ma-bk-ico.has-img{ background:#fff; padding:0; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; }
.ma-bk-ico.has-img img{ width:100%; height:100%; object-fit:contain; display:block; }
/* ═══════════ END v3.9.737 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.738 — EMI Calculator, dressed like the rest of the app
═══════════════════════════════════════════════════════════════════ */
.emi-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:16px; margin-top:14px; align-items:start; }
.emi-card{ background:var(--surf,#fff); border:1px solid var(--bdr,#E6EDF7); border-radius:14px; padding:20px 22px;
  box-shadow:0 1px 2px rgba(15,23,42,.04); }
.emi-card + .emi-card, .emi-sched{ margin-top:16px; }
.emi-card-h{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:var(--text,#12324F); margin-bottom:16px; }
.emi-opt{ font-size:11.5px; font-weight:600; color:var(--muted,#7A8B98); background:var(--surf2,#F1F5F9); padding:2px 8px; border-radius:20px; }
.emi-f{ display:block; margin-bottom:18px; }
.emi-lbl{ display:block; font-size:13px; font-weight:700; color:var(--text,#1E293B); margin-bottom:7px; }
.emi-input{ display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border:1px solid var(--bdr,#DCE5EC);
  border-radius:10px; background:var(--surf,#fff); }
.emi-input:focus-within{ border-color:var(--brand,#2563EB); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.emi-input i{ font-style:normal; color:var(--muted,#8FA0AE); font-size:14px; }
.emi-input input, .emi-input select{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:15px; font-weight:600; color:var(--text,#0F172A); }
.emi-input select{ flex:0 0 96px; cursor:pointer; }
.emi-f input[type=range]{ width:100%; margin-top:10px; accent-color:var(--brand,#2563EB); }
.emi-hint{ display:block; margin-top:5px; font-size:12px; color:var(--muted,#7A8B98); }
.emi-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* the result panel */
.emi-out{ position:sticky; top:96px; }
.emi-emi{ text-align:center; padding:14px 0 18px; border-bottom:1px solid var(--bdr,#EEF2F7); }
.emi-emi span{ display:block; font-size:34px; font-weight:800; color:var(--brand,#2563EB); letter-spacing:-.5px; }
.emi-emi i{ font-style:normal; font-size:13px; color:var(--muted,#7A8B98); }
.emi-stats{ padding:14px 0 4px; }
.emi-stats > div{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13.5px; }
.emi-stats span{ color:var(--muted,#64798A); }
.emi-stats b{ font-weight:700; color:var(--text,#12324F); }
.emi-stats .is-total{ border-top:1px dashed var(--bdr,#E2E8F0); margin-top:6px; padding-top:12px; font-size:15px; }
.emi-stats .is-total b{ color:var(--brand,#2563EB); }
.emi-donut{ display:flex; align-items:center; gap:18px; margin-top:12px; }
.emi-donut svg{ width:104px; height:104px; flex:0 0 auto; }
.emi-ring-bg{ fill:none; stroke:#DBE7FA; stroke-width:14; }
.emi-ring-int{ fill:none; stroke:#F59E0B; stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset .45s ease; }
.emi-legend span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted,#64798A); padding:4px 0; }
.emi-legend b{ margin-left:auto; color:var(--text,#12324F); }
.emi-legend .dot{ width:10px; height:10px; border-radius:3px; }
.emi-legend .dot.p{ background:#DBE7FA; } .emi-legend .dot.i{ background:#F59E0B; }
.emi-note{ margin-top:14px; padding:11px 13px; border-radius:10px; background:#ECFDF5; color:#047857; font-size:13px; line-height:1.5; }
.emi-note[hidden]{ display:none; }
.emi-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.emi-meta > div{ background:var(--surf2,#F8FAFC); border-radius:10px; padding:10px 12px; }
.emi-meta span{ display:block; font-size:11.5px; color:var(--muted,#7A8B98); }
.emi-meta b{ font-size:14px; color:var(--text,#12324F); }
/* the schedule */
.emi-tabs{ margin-left:auto; display:inline-flex; background:var(--surf2,#F1F5F9); border-radius:9px; padding:3px; }
.emi-tab{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:700; color:var(--muted,#64798A);
  padding:6px 14px; border-radius:7px; cursor:pointer; }
.emi-tab.on{ background:var(--surf,#fff); color:var(--brand,#2563EB); box-shadow:0 1px 3px rgba(15,23,42,.10); }
.emi-table-wrap{ overflow-x:auto; }
.emi-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.emi-table th{ text-align:left; font-size:12px; font-weight:700; color:var(--muted,#64798A); text-transform:uppercase;
  letter-spacing:.3px; padding:10px 12px; border-bottom:1px solid var(--bdr,#E6EDF7); white-space:nowrap; }
.emi-table td{ padding:10px 12px; border-bottom:1px solid var(--bdr,#F1F5F9); color:var(--text,#1E293B); white-space:nowrap; }
.emi-table th.r, .emi-table td.r{ text-align:right; }
.emi-table tr:hover td{ background:var(--surf2,#F8FAFC); }
.emi-extra{ font-style:normal; font-size:11.5px; color:#047857; }
.emi-none{ padding:26px; text-align:center; color:var(--muted,#7A8B98); }
@media (max-width:1100px){ .emi-wrap{ grid-template-columns:1fr; } .emi-out{ position:static; } }
@media (max-width:560px){ .emi-two{ grid-template-columns:1fr; } .emi-card{ padding:16px 14px; } .emi-emi span{ font-size:28px; } }
@media print{ .oi-toolbar-actions, .ma-topbar, .ma-nav, .ma-mob-bar, #ma-ai-fab-wrap{ display:none !important; } .emi-wrap{ grid-template-columns:1fr 1fr; } }
/* ═══════════ END v3.9.738 ═══════════ */

/* v3.9.739 — TDS calculator: the explanation panel and wider labels */
.tds-why{ background:#EFF6FF; color:#1E40AF; }
#pg-tds-calculator .emi-input select{ flex:1; }
#pg-tds-calculator .emi-emi span{ font-size:30px; }
#tds-table td{ white-space:normal; }
/* ═══════════ END v3.9.739 ═══════════ */

/* v3.9.740 — Depreciation: the book-value bars, and the tools on a phone */
.dep-chart{ margin-top:16px; }
.dep-bars{ display:flex; align-items:flex-end; gap:3px; height:110px; padding:8px 6px; background:var(--surf2,#F8FAFC); border-radius:10px; }
.dep-bar{ display:flex; align-items:flex-end; justify-content:center; height:100%; }
.dep-bar i{ display:block; width:76%; min-width:5px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#60A5FA,#2563EB); transition:height .35s ease; }
.dep-bars-x{ display:flex; justify-content:space-between; margin-top:6px; font-size:11.5px; color:var(--muted,#7A8B98); }
@media (max-width:760px){
  /* the tool pages sit comfortably on a phone */
  #pg-emi-calculator .oi-toolbar, #pg-tds-calculator .oi-toolbar, #pg-depreciation .oi-toolbar{ flex-wrap:wrap; gap:10px; }
  #pg-emi-calculator .oi-toolbar-actions, #pg-tds-calculator .oi-toolbar-actions,
  #pg-depreciation .oi-toolbar-actions{ width:100%; display:flex; flex-wrap:wrap; gap:8px; }
  #pg-emi-calculator .ma-list-pill span, #pg-tds-calculator .ma-list-pill span, #pg-depreciation .ma-list-pill span{ font-size:12.5px; }
  .emi-wrap{ gap:12px; }
  .emi-card{ padding:15px 13px; border-radius:12px; }
  .emi-input{ height:46px; }
  .emi-input input, .emi-input select{ font-size:15px; }
  .emi-emi span{ font-size:26px; }
  .emi-donut{ flex-direction:column; align-items:flex-start; gap:10px; }
  .emi-donut svg{ width:92px; height:92px; align-self:center; }
  .emi-legend{ width:100%; }
  .emi-table{ font-size:12.5px; }
  .emi-table th, .emi-table td{ padding:8px 9px; }
  .emi-tabs{ width:100%; margin:10px 0 0; }
  .emi-tab{ flex:1; }
  .dep-bars{ height:88px; }
}
/* ═══════════ END v3.9.740 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.741 — Tool pages: hidden rows really hide, and a dropdown gets
   the whole field. ".emi-f{display:block}" was beating the [hidden]
   attribute, so rows meant to disappear stayed on screen, and selects
   were pinned to 96px, which cut their wording to "My own rat…".
═══════════════════════════════════════════════════════════════════ */
.emi-f[hidden], .emi-two[hidden], .emi-card [hidden]{ display:none !important; }
.emi-input select{ flex:1 1 auto; min-width:0; width:100%; text-overflow:ellipsis; }
.emi-input select.is-unit{ flex:0 0 104px; width:auto; }
.emi-input:has(> input) select{ flex:0 0 104px; width:auto; }
.emi-input > select:only-child{ flex:1 1 auto; width:100%; }
/* ═══════════ END v3.9.741 ═══════════ */

/* v3.9.741 — Advance tax: the status words in the plan */
.at-ok{ color:#047857; font-weight:700; } .at-due{ color:#1D4ED8; font-weight:700; } .at-late{ color:#B91C1C; font-weight:700; }
#pg-advance-tax .emi-stats > div{ font-size:13px; }
/* ═══════════ END v3.9.741b ═══════════ */

/* v3.9.742 — Margin & markup: the cost/profit bar and the target table */
.mg-split{ margin-top:16px; }
.mg-bar{ display:flex; height:34px; border-radius:9px; overflow:hidden; background:var(--surf2,#F1F5F9); }
.mg-seg{ display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; min-width:0;
  white-space:nowrap; overflow:hidden; transition:width .35s ease; }
.mg-seg.cost{ background:#64748B; } .mg-seg.profit{ background:linear-gradient(90deg,#16B36B,#0E9C7E); }
.mg-bar-x{ display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color:var(--muted,#7A8B98); }
.emi-table tr.mg-now td{ background:#EFF6FF; font-weight:700; }
html[data-theme="dark"] .emi-table tr.mg-now td{ background:var(--surf2); }
/* ═══════════ END v3.9.742 ═══════════ */

/* v3.9.743 — Late payment interest: the ready-made reminder */
.li-msg{ margin-top:16px; }
.li-msg-h{ font-size:12.5px; font-weight:700; color:var(--muted,#64798A); margin-bottom:7px; }
.li-msg textarea{ width:100%; border:1px solid var(--bdr,#DCE5EC); border-radius:10px; padding:11px 12px; resize:vertical;
  font:inherit; font-size:13px; line-height:1.55; color:var(--text,#1E293B); background:var(--surf2,#F8FAFC); box-sizing:border-box; }
@media (max-width:760px){ .li-msg textarea{ font-size:13.5px; } }
/* ═══════════ END v3.9.743 ═══════════ */



/* ═══════════════════════════════════════════════════════════════════
   v3.9.745 — Product Barcode: the panel from the design, in the app's
   own colours (every accent below comes from the theme variables, so it
   follows whatever is chosen in Settings › Colour / Font).
═══════════════════════════════════════════════════════════════════ */
.bc-card{ background:var(--surf,#fff); border:1px solid var(--bdr,#E6EDF7); border-radius:14px; padding:20px 22px;
  margin-top:14px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.bc-card-h{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:800; color:var(--text,#12324F);
  padding-bottom:14px; border-bottom:1px solid var(--bdr,#EEF2F7); margin-bottom:18px; }
.bc-cust-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px;
  border:1px solid var(--bdr,#DCE5EC); border-radius:9px; background:var(--surf,#fff); color:var(--text,#1E293B);
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.bc-cust-btn:hover{ background:var(--surf2,#F3F7FF); border-color:var(--brand,#2563EB); color:var(--brand,#2563EB); }
.bc-count-pill{ margin-left:auto; font-size:12px; font-weight:700; color:var(--brand,#2563EB);
  background:color-mix(in srgb, var(--brand,#2563EB) 10%, transparent); padding:4px 12px; border-radius:20px; }
/* choosing a product */
.bc-pick{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.bc-f{ display:block; }
.bc-grow{ flex:1 1 340px; min-width:0; }
.bc-lbl{ display:block; font-size:13px; font-weight:600; color:var(--text,#334155); margin-bottom:7px; }
.bc-tip{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  background:var(--text,#334155); color:var(--surf,#fff); font-size:10px; font-style:normal; font-weight:700; cursor:help; vertical-align:1px; }
.bc-input, .bc-chipbox{ display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px;
  border:1px solid var(--bdr,#DCE5EC); border-radius:8px; background:var(--surf,#fff); }
.bc-chipbox{ flex-wrap:wrap; padding:6px 10px; gap:6px; }
.bc-input:focus-within, .bc-chipbox:focus-within{ border-color:var(--brand,#2563EB); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,#2563EB) 14%, transparent); }
.bc-input select, .bc-input input, .bc-chipbox select{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
  font-size:14px; color:var(--text,#0F172A); height:40px; }
.bc-input i{ font-style:normal; font-size:12.5px; color:var(--muted,#8FA0AE); }
.bc-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; font-size:12.5px; font-weight:700;
  background:color-mix(in srgb, var(--brand,#2563EB) 12%, transparent); color:var(--brand,#2563EB); }
.bc-chip button{ border:0; background:none; color:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.bc-hint{ display:block; margin-top:6px; font-size:12px; color:var(--muted,#7A8B98); }
.bc-add{ height:42px; }
/* the customise panel */
.bc-custom{ margin-top:22px; padding-top:18px; border-top:1px solid var(--bdr,#EEF2F7); }
.bc-custom[hidden]{ display:none; }
.bc-custom-h{ display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; color:var(--text,#334155); margin-bottom:16px; }
.bc-default{ height:30px; padding:0 14px; border:1px solid var(--bdr,#DCE5EC); border-radius:7px; background:var(--surf2,#F8FAFC);
  font:inherit; font-size:12.5px; font-weight:700; color:var(--text,#334155); cursor:pointer; }
.bc-default:hover{ border-color:var(--brand,#2563EB); color:var(--brand,#2563EB); }
.bc-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px 18px; }
.bc-grid .bc-f{ min-width:0; }
.bc-grid .bc-input{ position:relative; }
.bc-tokens{ position:absolute; left:-1px; right:-1px; top:calc(100% + 3px); z-index:40; max-height:260px; overflow:auto;
  background:var(--surf,#fff); border:1px solid var(--bdr,#DCE5EC); border-radius:8px; box-shadow:0 12px 30px rgba(15,23,42,.14); padding:5px; }
.bc-tokens button{ display:block; width:100%; text-align:left; border:0; background:none; font:inherit; font-size:13px;
  color:var(--text,#1E293B); padding:7px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.bc-tokens button:hover{ background:color-mix(in srgb, var(--brand,#2563EB) 10%, transparent); color:var(--brand,#2563EB); }
.bc-checks{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.bc-checks label{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text,#334155); cursor:pointer; }
.bc-checks input{ width:17px; height:17px; accent-color:var(--brand,#2563EB); }
/* the queue */
.bc-queue{ margin-top:18px; display:grid; gap:8px; }
.bc-qrow{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surf2,#F8FAFC); border-radius:10px; }
.bc-qname{ font-weight:700; color:var(--text,#12324F); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-qcode{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--muted,#64798A); }
.bc-qn{ width:74px; height:36px; text-align:center; border:1px solid var(--bdr,#DCE5EC); border-radius:8px; font:inherit; font-weight:700;
  background:var(--surf,#fff); color:var(--text,#0F172A); }
.bc-qx{ width:32px; height:32px; border:0; border-radius:8px; background:#FEE2E2; color:#B91C1C; font-size:18px; line-height:1; cursor:pointer; }
/* the sheet */
.bc-sheet{ --bc-w:144px; --bc-h:80px; --bc-gx:8px; --bc-gy:2px; --bc-cols:5; --bc-pad:0px;
  --bc-fs-head:9px; --bc-fs-num:10px; --bc-lh-head:1.5; --bc-lh-line:1.5;
  display:grid; grid-template-columns:repeat(var(--bc-cols), var(--bc-w)); gap:var(--bc-gy) var(--bc-gx);
  justify-content:flex-start; padding:var(--bc-page-mt,10px) 0 0 var(--bc-page-ml,0px); overflow-x:auto; }
.bc-label{ width:var(--bc-w); height:var(--bc-h); padding:var(--bc-pad); background:#fff; color:#111;
  display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box; }
.bc-sheet.has-border .bc-label{ border:1px solid #111; }
.bc-line{ font-size:var(--bc-fs-head); line-height:var(--bc-lh-line); max-width:100%; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-align:center; }
.bc-head{ font-weight:700; line-height:var(--bc-lh-head); }
.bc-svg{ flex:0 0 auto; width:96%; display:flex; align-items:center; justify-content:center; }
.bc-bars{ width:100%; height:100%; }
.bc-num{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--bc-fs-num); letter-spacing:.5px; }
.bc-label.is-v .bc-svg{ transform:rotate(90deg); }
.bc-empty{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:54px 20px;
  color:var(--muted,#94A3B8); font-size:15px; }
.bc-empty svg{ width:80px; height:80px; opacity:.5; }
@media (max-width:1200px){ .bc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px){
  .bc-card{ padding:15px 13px; }
  .bc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .bc-pick{ gap:10px; } .bc-grow, .bc-pick .bc-f{ flex:1 1 100%; } .bc-add{ width:100%; }
  .bc-qrow{ flex-wrap:wrap; } .bc-qcode{ order:3; width:100%; }
  .bc-sheet{ justify-content:flex-start; }
}
@media (max-width:480px){ .bc-grid{ grid-template-columns:1fr; } }
@media print{
  .ma-topbar, .ma-nav, .ma-mob-bar, #ma-ai-fab-wrap, .oi-toolbar, .bc-card:first-of-type{ display:none !important; }
  .bc-sheet-card{ border:0; box-shadow:none; padding:0; margin:0; }
  .bc-sheet-card .bc-card-h{ display:none; }
  .bc-label{ page-break-inside:avoid; }
}
/* ═══════════ END v3.9.745 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.746 — Product Barcode: the multi-select, the queue table and
   the Generate / Download / Print row, in the app's theme colours.
═══════════════════════════════════════════════════════════════════ */
.bc-ms{ position:relative; }
.bc-ms-field{ display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 10px; border:1px solid var(--bdr,#DCE5EC);
  border-radius:8px; background:var(--surf,#fff); cursor:pointer; }
.bc-ms-field:hover{ border-color:var(--brand,#2563EB); }
.bc-ms-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.bc-ms-ph{ color:var(--muted,#94A3B8); font-size:14px; }
.bc-ms-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; font-size:12.5px; font-weight:700;
  background:color-mix(in srgb, var(--brand,#2563EB) 12%, transparent); color:var(--brand,#2563EB); }
.bc-ms-chip-x{ border:0; background:none; color:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.bc-ms-caret{ color:var(--muted,#94A3B8); flex:0 0 auto; }
.bc-ms-panel{ position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:50; background:var(--surf,#fff);
  border:1px solid var(--bdr,#DCE5EC); border-radius:10px; box-shadow:0 16px 40px rgba(15,23,42,.16); overflow:hidden; }
.bc-ms-panel[hidden]{ display:none; }
.bc-ms-search{ padding:10px; border-bottom:1px solid var(--bdr,#EEF2F7); }
.bc-ms-search input{ width:100%; height:38px; padding:0 12px; border:1px solid var(--bdr,#DCE5EC); border-radius:8px;
  font:inherit; font-size:14px; background:var(--surf,#fff); color:var(--text,#0F172A); box-sizing:border-box; }
.bc-ms-list{ max-height:260px; overflow:auto; padding:6px; }
.bc-ms-opt{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.bc-ms-opt:hover{ background:color-mix(in srgb, var(--brand,#2563EB) 8%, transparent); }
.bc-ms-opt input{ width:16px; height:16px; accent-color:var(--brand,#2563EB); }
.bc-ms-n{ flex:1 1 auto; font-size:13.5px; color:var(--text,#1E293B); }
.bc-ms-c{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--muted,#7A8B98); }
.bc-ms-none{ padding:18px; text-align:center; color:var(--muted,#94A3B8); font-size:13.5px; }
.bc-ms-foot{ display:flex; align-items:center; gap:14px; padding:9px 12px; border-top:1px solid var(--bdr,#EEF2F7);
  background:var(--surf2,#F8FAFC); font-size:12.5px; color:var(--muted,#64798A); }
.bc-ms-foot button{ border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--brand,#2563EB); cursor:pointer; padding:0; }
.bc-ms-foot span{ margin-left:auto; }
/* the queue */
.bc-tablewrap{ margin-top:20px; max-width:760px; }
.bc-tablewrap[hidden]{ display:none; }
.bc-table{ width:100%; border-collapse:collapse; }
.bc-table th{ text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted,#64798A); padding:9px 10px; border-bottom:1px solid var(--bdr,#E6EDF7); }
.bc-table td{ padding:10px; border-bottom:1px solid var(--bdr,#F1F5F9); font-size:14px; color:var(--text,#1E293B); }
.bc-table tfoot td{ border-bottom:0; padding-top:12px; }
.bc-td-name{ font-weight:600; }
.bc-table .bc-qn{ width:110px; height:34px; text-align:left; padding:0 10px; border:1px solid var(--bdr,#DCE5EC); border-radius:7px;
  font:inherit; background:var(--surf,#fff); color:var(--text,#0F172A); }
.bc-del{ width:28px; height:28px; border:0; border-radius:50%; background:#EF4444; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; }
.bc-del:hover{ background:#DC2626; }
.bc-actions{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.bc-gen, .bc-dl, .bc-pr{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px; border-radius:9px;
  font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; }
.bc-dl, .bc-pr{ border:1px solid var(--bdr,#DCE5EC); background:var(--surf,#fff); color:var(--text,#1E293B); }
.bc-dl:hover, .bc-pr:hover{ border-color:var(--brand,#2563EB); color:var(--brand,#2563EB); }
.bc-sheet-h{ border-bottom:0; margin-bottom:8px; }
@media (max-width:760px){
  .bc-tablewrap{ max-width:none; overflow-x:auto; }
  .bc-actions .bc-gen, .bc-actions .bc-dl, .bc-actions .bc-pr{ flex:1 1 44%; justify-content:center; }
}
/* ═══════════ END v3.9.746 ═══════════ */

/* v3.9.747 — the picker and the label count are the same size, as in the design,
   and the download / print row sits under the labels */
.bc-pick{ align-items:flex-end; gap:18px; }
.bc-pick .bc-grow{ flex:0 1 330px; }
.bc-pick > .bc-f:not(.bc-grow){ flex:0 1 330px; }
.bc-pick .bc-input{ min-width:0; }
.bc-out-actions{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; flex-wrap:wrap; }
.bc-out-actions[hidden]{ display:none; }
.bc-dl-wrap{ position:relative; }
.bc-dl-menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:30; min-width:210px; padding:6px;
  background:var(--surf,#fff); border:1px solid var(--bdr,#DCE5EC); border-radius:10px; box-shadow:0 14px 34px rgba(15,23,42,.16); }
.bc-dl-menu[hidden]{ display:none; }
.bc-dl-menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none;
  font:inherit; font-size:13.5px; color:var(--text,#1E293B); padding:9px 10px; border-radius:7px; cursor:pointer; }
.bc-dl-menu button:hover{ background:color-mix(in srgb, var(--brand,#2563EB) 10%, transparent); color:var(--brand,#2563EB); }
@media (max-width:760px){ .bc-pick .bc-grow, .bc-pick > .bc-f:not(.bc-grow){ flex:1 1 100%; } }
/* ═══════════ END v3.9.747 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.748 — the picker row as a grid: both labels on one line, both
   boxes on the next, and the hint underneath instead of nudging the
   fields out of line.
═══════════════════════════════════════════════════════════════════ */
.bc-pick{ display:grid; grid-template-columns:330px 330px auto; grid-template-rows:auto auto; gap:0 18px; align-items:start; }
.bc-pick .bc-grow, .bc-pick > .bc-f:not(.bc-grow){ flex:none; width:100%; min-width:0; grid-row:1; }
.bc-pick .bc-grow{ grid-column:1; }
.bc-pick > .bc-f:not(.bc-grow){ grid-column:2; }
.bc-pick .bc-add{ grid-column:3; grid-row:1; align-self:end; justify-self:start; width:auto; padding:0 22px; height:42px; }
.bc-pick .bc-hint{ grid-column:1 / -1; grid-row:2; margin-top:7px; }
.bc-pick .bc-lbl{ min-height:19px; }
.bc-pick .bc-input, .bc-pick .bc-ms-field{ height:42px; }
.bc-say{ font-size:13px; font-weight:600; color:var(--brand,#2563EB); }
.bc-say.warn{ color:#B45309; }
@media (max-width:760px){
  .bc-pick{ grid-template-columns:1fr; gap:12px; }
  .bc-pick .bc-grow, .bc-pick > .bc-f:not(.bc-grow), .bc-pick .bc-add{ grid-column:1; grid-row:auto; }
  .bc-pick .bc-hint{ grid-row:auto; }
  .bc-pick .bc-add{ width:100%; }
}
/* ═══════════ END v3.9.748 ═══════════ */

/* v3.9.749 — a row lights up for a moment when a scan lands in it */
.ma-scan-hit{ animation:maScanHit .7s ease; }
@keyframes maScanHit{
  0%{ box-shadow:0 0 0 0 rgba(22,179,107,.55); background:rgba(22,179,107,.16); }
  100%{ box-shadow:0 0 0 12px rgba(22,179,107,0); background:transparent; }
}
/* ═══════════ END v3.9.749 ═══════════ */

/* ═══ v3.9.752 — price list: choosing several products at once ═══ */
.pl-ms{ position:relative; }
.pl-ms-field{ display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 10px; border:1px solid var(--bdr,#DCE5EC);
  border-radius:8px; background:var(--surf,#fff); cursor:pointer; }
.pl-ms-field:hover{ border-color:var(--brand,#2563EB); }
.pl-ms-chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; }
.pl-ms-ph{ color:var(--muted,#94A3B8); font-size:14px; }
.pl-ms-chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:6px; font-size:12.5px; font-weight:700;
  background:color-mix(in srgb, var(--brand,#2563EB) 12%, transparent); color:var(--brand,#2563EB); }
.pl-ms-chip button{ border:0; background:none; color:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.pl-ms-caret{ color:var(--muted,#94A3B8); flex:0 0 auto; }
.pl-ms-panel{ position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:60; background:var(--surf,#fff);
  border:1px solid var(--bdr,#DCE5EC); border-radius:10px; box-shadow:0 16px 40px rgba(15,23,42,.18); overflow:hidden; }
.pl-ms-panel[hidden]{ display:none; }
.pl-ms-search{ padding:9px; border-bottom:1px solid var(--bdr,#EEF2F7); }
.pl-ms-search input{ width:100%; height:36px; padding:0 11px; border:1px solid var(--bdr,#DCE5EC); border-radius:8px;
  font:inherit; font-size:13.5px; background:var(--surf,#fff); color:var(--text,#0F172A); box-sizing:border-box; }
.pl-ms-list{ max-height:240px; overflow:auto; padding:5px; }
.pl-ms-opt{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:7px; cursor:pointer; }
.pl-ms-opt:hover{ background:color-mix(in srgb, var(--brand,#2563EB) 8%, transparent); }
.pl-ms-opt input{ width:16px; height:16px; accent-color:var(--brand,#2563EB); }
.pl-ms-n{ flex:1 1 auto; font-size:13.5px; color:var(--text,#1E293B); }
.pl-ms-r{ font-size:12.5px; color:var(--muted,#7A8B98); }
.pl-ms-none{ padding:16px; text-align:center; color:var(--muted,#94A3B8); font-size:13px; }
.pl-ms-foot{ display:flex; align-items:center; gap:14px; padding:8px 11px; border-top:1px solid var(--bdr,#EEF2F7);
  background:var(--surf2,#F8FAFC); font-size:12.5px; color:var(--muted,#64798A); }
.pl-ms-foot button{ border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--brand,#2563EB); cursor:pointer; padding:0; }
.pl-ms-foot span{ margin-left:auto; }
/* ═══════════ END v3.9.752 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.755 — Credit note / debit note / delivery challan item rows:
   a visible HSN field under the product name, and row buttons that are
   round and evenly sized instead of a red slab.
═══════════════════════════════════════════════════════════════════ */
#pg-create-delivery-challan .cdc-hsn-row{ display:flex; align-items:center; gap:7px; margin-top:6px; }
#pg-create-delivery-challan .cdc-hsn-lbl{ font-size:11px; font-weight:700; color:var(--muted,#7A8B98); white-space:nowrap; }
#pg-create-delivery-challan .cdc-hsn-inp{ flex:0 1 120px; height:30px; padding:0 9px; border:1px solid var(--bdr,#DCE5EC);
  border-radius:7px; font:inherit; font-size:13px; background:var(--surf,#fff); color:var(--text,#0F172A); }
#pg-create-delivery-challan .cdc-hsn-inp:focus{ outline:none; border-color:var(--brand,#2563EB);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,#2563EB) 14%, transparent); }
#pg-create-delivery-challan .gst-c-act{ white-space:nowrap; text-align:center; }
#pg-create-delivery-challan .gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-c-act .gst-del-row-btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:30px !important; height:30px !important; min-width:30px; max-width:30px; padding:0 !important;
  border:0; border-radius:50% !important; color:#fff; cursor:pointer; vertical-align:middle;
}
#pg-create-delivery-challan .gst-c-act .gst-add-row-btn svg,
#pg-create-delivery-challan .gst-c-act .gst-del-row-btn svg{ width:16px; height:16px; }
#pg-create-delivery-challan .gst-c-act .gst-add-row-btn{ background:var(--brand,#2563EB); box-shadow:0 1px 3px rgba(37,99,235,.35); }
#pg-create-delivery-challan .gst-c-act .gst-del-row-btn{ background:#DC2626; margin-left:6px; box-shadow:0 1px 3px rgba(220,38,38,.3); }
#pg-create-delivery-challan .gst-c-act .gst-add-row-btn:hover{ transform:scale(1.07); }
#pg-create-delivery-challan .gst-c-act .gst-del-row-btn:hover{ transform:scale(1.07); background:#B91C1C; }
@media (max-width:760px){
  #pg-create-delivery-challan .cdc-hsn-row{ margin-top:8px; }
  #pg-create-delivery-challan .cdc-hsn-inp{ flex:1 1 auto; height:34px; }
}
/* ═══════════ END v3.9.755 ═══════════ */

/* v3.9.755 — a stronger hand than the page-wide !important sizing rules, so
   both row buttons stay perfectly round on this screen */
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn{
  width:30px !important; height:30px !important; line-height:0 !important; font-size:0 !important;
  border-radius:50% !important; padding:0 !important;
}
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-add-row-btn svg,
#pg-create-delivery-challan .gst-items-tbl tbody td.gst-c-act .gst-del-row-btn svg{
  width:16px !important; height:16px !important; display:block; }
/* ═══════════ END v3.9.755b ═══════════ */

/* v3.9.757 — the sale invoice's HSN box, matching the credit-note one */
#pg-bill .bi-hsn-row{ display:flex; align-items:center; gap:7px; margin-top:6px; }
#pg-bill .bi-hsn-lbl{ font-size:11px; font-weight:700; color:var(--muted,#7A8B98); white-space:nowrap; }
#pg-bill .bi-hsn-inp{ flex:0 1 120px; height:30px; padding:0 9px; border:1px solid var(--bdr,#DCE5EC); border-radius:7px;
  font:inherit; font-size:13px; background:var(--surf,#fff); color:var(--text,#0F172A); }
#pg-bill .bi-hsn-inp:focus{ outline:none; border-color:var(--brand,#2563EB);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,#2563EB) 14%, transparent); }
@media (max-width:760px){ #pg-bill .bi-hsn-inp{ flex:1 1 auto; height:34px; } }
/* ═══════════ END v3.9.757 ═══════════ */

/* v3.9.765 — Daily Expense: the Amount heading sits over its figures, and the
   action buttons match the other lists */
#de-tbody td[data-col="amount"], .de-th-amt{ text-align:right !important; }
#de-tbody .ma-act-col{ white-space:nowrap; }
#de-tbody .ma-list-act-btn.del{ color:#B91C1C; }
#de-tbody .ma-list-act-btn.del:hover{ background:#FEE2E2; border-color:#FCA5A5; }
/* ═══════════ END v3.9.765 ═══════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.771 — Multi-Currency Invoice: HSN/SAC, CGST and SGST columns
   ──────────────────────────────────────────────────────────────────────
   The MC Product Items grid gained three columns. HSN/SAC is a normal
   editable cell; CGST and SGST are read-only, because every MC invoice
   type (Export / SEZ / Deemed Export) is an inter-state or zero-rated
   supply where the whole tax sits in IGST and these two are always nil.
   They are shown so the grid matches the standard tax layout instead of
   silently dropping two columns the reader expects to find.
══════════════════════════════════════════════════════════════════════ */
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-hsn{text-align:center}
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-hsn input{
  width:100%;border:none;background:transparent;font-size:12.5px;color:var(--text);
  text-align:center;outline:none;padding:4px 2px;font-family:inherit}
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-hsn input::placeholder{color:#a3a3a3}

#pg-mc-invoice .gst-items-tbl tbody td.gst-c-cgst,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-sgst{text-align:center}

/* Read-only rate box — visibly inert so nobody tries to type a rate that
   could not apply, matching the greyed cells in the reference layout. */
#pg-mc-invoice .gst-items-tbl .gst-rate-ro{
  width:100%;max-width:70px;border:1px solid var(--bdr);border-radius:5px;
  background:#f1f5f9;color:#94a3b8;font-size:12.5px;text-align:center;
  padding:5px 4px;cursor:not-allowed;font-family:inherit;outline:none}
#pg-mc-invoice .gst-items-tbl .gst-rate-ro::placeholder{color:#94a3b8}
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl .gst-rate-ro{
  background:#1e293b;border-color:#334155;color:#64748b}

/* Row-B per-row CGST / SGST amounts — same muted treatment as IGST. */
/* v3.9.786 — these two cells were given alignment but no background when the
   CGST / SGST columns were added, so they came out white while the IGST
   amount cell beside them is #f5f6f7. Three tax cells in a row, one of them a
   different colour. Same grey as IGST now, in both themes. */
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-cgst-amt-cell,
#pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-sgst-amt-cell{
  text-align:center;vertical-align:top;background:#f5f6f7}
/* The IGST cell is included here because #pg-mc-invoice was left out of the
   shared dark-theme rule above — only the light one lists it — so in dark mode
   that cell kept its light #f5f6f7 on a dark page. All three together now. */
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-cgst-amt-cell,
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-sgst-amt-cell,
html[data-theme="dark"] #pg-mc-invoice .gst-items-tbl tbody tr.gst-item-row-b td.gst-c-igst-amt-cell{
  background:#1e2530}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.772 — Multi-Currency Product Items: column widths
   ──────────────────────────────────────────────────────────────────────
   The grid went from 9 columns to 12, but Total was still claiming
   width:20% from the shared rule, so it hogged a fifth of the table and
   squeezed every data column either side of it. Total is cut back and
   the working columns get real room. Scoped to #pg-mc-invoice so Sale
   Invoice and Purchase keep their own proportions, and placed after the
   shared block so these win on source order at equal specificity.
══════════════════════════════════════════════════════════════════════ */
/* v3.9.774 — these were written with min-width alone, which did nothing:
   a global block at the top of this file sets an explicit `width` in px on
   .gst-items-tbl thead th.gst-c-qty-h and friends (qty/uom/igst 110px,
   price 130px, discount 100px, total 110px). A min-width *below* that width
   never shows. Worse, CGST and SGST are new classes with no entry in that
   global block, so they took the 76px min-width and ended up visibly
   narrower than the 110px IGST column beside them — which is what made the
   three tax columns look wrong. Every column below now declares `width`
   as well, and the three tax columns are given identical numbers. */
/* v3.9.783 — Product was the only column left on width:auto, so it soaked up
   every spare pixel in the table: on a wide screen it ran to roughly twice
   the width of anything else while the data columns stayed at their fixed
   sizes. Giving it a real width stops that, and the pixels it gives back pay
   for the wider columns below, so the table does not start scrolling
   sideways on a screen where it used to fit. */
/* No min-width here on purpose: the shared block above already pins this
   column with `min-width:180px !important`, so anything written here
   would be dead text. 180px stays the floor on a narrow screen. */
#pg-mc-invoice .gst-items-tbl thead th.gst-c-prod-h {width:240px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-hsn-h  {width:134px; min-width:134px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-qty-h  {width:130px; min-width:130px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-uom-h  {width:124px; min-width:124px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-price-h{width:150px; min-width:150px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-disc-h {width:124px; min-width:124px}
#pg-mc-invoice .gst-items-tbl thead th.gst-c-cgst-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-sgst-h,
#pg-mc-invoice .gst-items-tbl thead th.gst-c-igst-h {width:124px; min-width:124px}
/* Total shrinks, as asked — it was 110px from the global block. */
#pg-mc-invoice .gst-items-tbl thead th.gst-c-total-h{width:108px; min-width:108px}

/* The CGST / SGST boxes were a different shape from the IGST dropdown
   beside them — narrower, with their own padding — so the three tax cells
   did not line up. They now use the same box as .gst-igst-sel. */
#pg-mc-invoice .gst-items-tbl .gst-rate-ro{
  max-width:none;width:100%;padding:7px 8px;font-size:12px;margin-bottom:4px}
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-cgst,
#pg-mc-invoice .gst-items-tbl tbody td.gst-c-sgst{vertical-align:top}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.776 — the small menu behind the ▾ in the credit-note list, in the
   app's own colours, and a Delete that is a menu line rather than a red
   bar stretched across the row.
═══════════════════════════════════════════════════════════════════ */
.ma-list-menu{ z-index:2000; min-width:184px; padding:6px; border-radius:10px;
  background:var(--surf,#fff); border:1px solid var(--bdr,#DCE5EC); box-shadow:0 16px 38px rgba(15,23,42,.18); }
.ma-list-menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none;
  font:inherit; font-size:13.5px; color:var(--text,#1E293B); padding:9px 10px; border-radius:7px; cursor:pointer; }
.ma-list-menu button:hover{ background:color-mix(in srgb, var(--brand,#2563EB) 10%, transparent); color:var(--brand,#2563EB); }
.ma-list-menu button.danger{ color:#B91C1C; }
.ma-list-menu button.danger:hover{ background:#FEE2E2; color:#991B1B; }
/* ═══════════ END v3.9.776 ═══════════ */

/* ══════════════════════════════════════════════════════════════════════
   v3.9.781 — Packing List "Kind of Package" dropdown
   ──────────────────────────────────────────────────────────────────────
   Lives on <body> as position:fixed, because the packing-list table sits
   in an overflow-x:auto wrapper that would otherwise clip it. The high
   z-index keeps it over the sticky table header and the page toolbar.
══════════════════════════════════════════════════════════════════════ */
.cpk-kind-pop{
  position:fixed; z-index:99999; display:none;
  background:var(--card,#fff);
  border:1px solid var(--bdr,#e2e8f0);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(15,23,42,.16);
  overflow-y:auto; overscroll-behavior:contain;
  padding:4px 0; font-size:13px; line-height:1.35;
  -webkit-overflow-scrolling:touch;
}
.cpk-kind-pop.open{ display:block; }
.cpk-kind-opt{
  padding:8px 12px; cursor:pointer; color:var(--text,#0f172a);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cpk-kind-opt:hover,
.cpk-kind-opt.hi{ background:#10b981; color:#fff; }
.cpk-kind-empty{ padding:10px 12px; color:var(--muted,#94a3b8); font-size:12px; }

html[data-theme="dark"] .cpk-kind-pop{
  background:#0f172a; border-color:#334155;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
html[data-theme="dark"] .cpk-kind-opt{ color:#e2e8f0; }
html[data-theme="dark"] .cpk-kind-opt:hover,
html[data-theme="dark"] .cpk-kind-opt.hi{ background:#059669; color:#fff; }

/* Touch targets a little taller on phones. */
@media (max-width:640px){
  .cpk-kind-opt{ padding:11px 13px; font-size:14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.789 — Report filter grids: field widths
   ──────────────────────────────────────────────────────────────────────
   The base .sr-fg / .pr-fg rule is written for the two-column form
   layout (a 110px label column beside the field) and carries
   align-items:center. The report pages override `display` to a flex
   COLUMN but never reset align-items, and in a column flexbox
   align-items works on the horizontal axis — so every child shrank to
   its content and sat centred in the track.

   Date inputs and selects escaped it only because a later rule gives
   them width:100%; the chip-field <div>s (Customer/Vendor, Products,
   Groups) had no width of their own, so they collapsed to about half a
   column while the fields beside them stayed full width. Labels drifted
   to the centre for the same reason.

   Scoped to the filter grids, so the Sale and Purchase FORMS that
   legitimately use the 110px-label layout are untouched.
══════════════════════════════════════════════════════════════════════ */
.sr-filter-grid > .sr-fg,
.pr-filter-grid > .pr-fg{
  align-items:stretch;
}
.sr-filter-grid > .sr-fg > label,
.pr-filter-grid > .pr-fg > label{
  text-align:left;
}
/* Belt and braces: the chip fields state their own width, so they stay
   correct even if another align-items lands on the group later. */
.sr-filter-grid .sr-chip-field,
.pr-filter-grid .pr-chip-field,
.sr-filter-grid .sr-combo-wrap,
.pr-filter-grid .pr-combo-wrap{
  width:100%;
  box-sizing:border-box;
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.806 — Settings ▸ Login & Security
══════════════════════════════════════════════════════════════════════ */
.ma-sec-card{ padding:20px 22px }
.ma-sec-row{ display:grid; grid-template-columns:170px 1fr; align-items:center; gap:14px; margin-bottom:16px }
.ma-sec-row:last-child{ margin-bottom:0 }
.ma-sec-lbl{ font-size:13px; font-weight:600; color:var(--text); margin:0 }
.ma-sec-lbl .req{ color:#dc2626; margin-left:1px }
.ma-sec-val{ min-width:0 }
/* v3.9.807 — the box was rendering as a bare browser input because
   .ma-sec-val is not a .fg wrapper, so none of the app's field styling
   reached it. Same metrics as every other field in Settings. */
.ma-sec-val input{
  width:100%; max-width:400px;
  padding:9px 12px; border:1.5px solid var(--bdr); border-radius:8px;
  font-size:14px; color:var(--text); background:var(--surf);
  outline:none; font-family:inherit; transition:border-color .12s;
}
.ma-sec-val input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.ma-sec-val input::placeholder{ color:var(--hint) }
.ma-sec-val #chem-current{ font-size:13px; color:var(--brand); font-weight:600 }
.ma-sec-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:#dc2626; color:#fff;
  font-size:11px; font-weight:700; margin-left:6px; vertical-align:middle;
}
.ma-sec-hdr{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 12px }

.ma-sec-tbl{ width:100%; border-collapse:collapse; font-size:13px }
/* The shared .ma-tbl rule uppercases headers with wide tracking and a
   grey fill. The reference has plain sentence-case headings on white, so
   those three are reset here rather than globally. */
.ma-sec-tbl th{
  text-align:left; font-weight:600; font-size:12.5px; color:var(--text);
  padding:14px 16px; border-bottom:1px solid var(--bdr); white-space:nowrap;
  text-transform:none; letter-spacing:normal; background:transparent;
}
.ma-sec-tbl td{ background:transparent }
.ma-sec-tbl tbody tr:hover td{ background:var(--surf2) }
/* Action is the last column on the right in the reference. */
.ma-sec-tbl th:last-child, .ma-sec-tbl td:last-child{ text-align:right }
.ma-sec-tbl td.ma-sec-empty, .ma-sec-tbl td.ma-sec-empty:last-child{ text-align:center }
.ma-sec-tbl td{ padding:13px 16px; border-bottom:1px solid var(--bdr); color:var(--text); white-space:nowrap }
.ma-sec-tbl tbody tr:last-child td{ border-bottom:0 }
.ma-sec-link{ color:var(--brand); font-weight:500 }
.ma-sec-empty{ text-align:center; color:var(--muted); padding:22px 16px !important }
/* The current browser gets a label where the others get a button, so the
   column still lines up without offering a self-logout. */
.ma-sec-this{ font-size:11.5px; color:var(--muted); font-style:italic }

.ma-sec-pager{ display:flex; gap:6px; justify-content:center; align-items:center; padding:14px; flex-wrap:wrap }
.ma-sec-pg{
  min-width:34px; height:32px; padding:0 10px; border:1px solid var(--bdr);
  background:var(--card,#fff); color:var(--text); border-radius:7px;
  font-size:12.5px; cursor:pointer;
}
.ma-sec-pg:hover:not(:disabled){ border-color:var(--brand); color:var(--brand) }
.ma-sec-pg.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600 }
.ma-sec-pg:disabled{ opacity:.45; cursor:not-allowed }

@media (max-width:640px){
  .ma-sec-row{ grid-template-columns:1fr; gap:6px }
  .ma-sec-hdr{ flex-direction:column; align-items:stretch }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.823 — Products / Services list: arranged to fit (desktop and tablet)
   ──────────────────────────────────────────────────────────────────────────
   The list card hides anything wider than itself, and product names never
   wrapped. So a long name, or a few extra columns from "Select Columns to
   Display", pushed the table past the card and the columns on the right —
   the Action buttons (Edit / View / ▾) among them — were cut off with no way
   to reach them, while headers broke over two or three lines.
     • The table now scrolls sideways inside its own box (.ma-item-xscroll,
       around the table only, so the pagination below stays where it is).
     • Action is pinned to the right edge, so Edit / View are always on
       screen; a thin edge appears when there is more to see behind it.
     • Every header and value sits on one line; only the name and the
       product note wrap (the name keeps 240px so it is never squeezed).
     • The Product Image column is only as wide as its header.
     • Prices line up digit under digit.
   Screens 720px and narrower keep the mobile card view exactly as it was.
════════════════════════════════════════════════════════════════════════════════ */
@media (min-width:721px){
  #pg-stock .ma-item-xscroll{overflow-x:auto;overflow-y:hidden}
  #pg-stock .ma-item-xscroll .ma-list-tbl thead th{white-space:nowrap}
  #pg-stock .ma-item-xscroll .ma-list-tbl tbody td{white-space:nowrap}
  #pg-stock .ma-item-xscroll .ma-list-tbl tbody td[data-col="name"],
  #pg-stock .ma-item-xscroll .ma-list-tbl tbody td[data-col="note"]{white-space:normal}
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="name"] .ma-item-cell{min-width:240px}
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="name"] .ma-item-cell-name{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="note"]{min-width:160px;max-width:260px;overflow-wrap:anywhere;line-height:1.4}

  /* image column: as wide as its header, picture centred (beats the v3.9.259 56px lock) */
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="image"],
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="image"]{width:1% !important;min-width:0 !important;max-width:none !important;text-align:center}
  /* the "+" of an Additional Charge is drawn by two bars; the generic icon
     rule also painted the whole box, which showed as a solid square */
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="image"] .ma-item-thumb-x i.ma-ic-plus{background:none;-webkit-mask:none;mask:none}

  #pg-stock .ma-item-xscroll .ma-list-tbl tbody td.r{font-variant-numeric:tabular-nums}

  /* Action pinned right. Header cells already have their own solid colour
     (it differs in dark mode), so only body cells are given the card colour. */
  #pg-stock .ma-item-xscroll .ma-list-tbl th.ma-act-col,
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col{position:sticky;right:0;z-index:2}
  #pg-stock .ma-item-xscroll .ma-list-tbl th.ma-act-col{z-index:3}
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col{background:var(--surf)}
  #pg-stock .ma-item-xscroll .ma-list-tbl tbody tr:hover td.ma-act-col{background:#f8fafc}
  html[data-theme="dark"] #pg-stock .ma-item-xscroll .ma-list-tbl tbody tr:hover td.ma-act-col{background:#0f172a}
  /* the edge (a cell shadow is not drawn in a collapsed-border table, hence the pseudo-element) */
  #pg-stock .ma-item-xscroll .ma-list-tbl .ma-act-col::after{
    content:'';position:absolute;top:0;bottom:-1px;left:-14px;width:14px;pointer-events:none;
    opacity:0;transition:opacity .15s ease;
    background:linear-gradient(to left, rgba(15,23,42,.09), rgba(15,23,42,0));
    border-right:1px solid var(--bdr);
  }
  html[data-theme="dark"] #pg-stock .ma-item-xscroll .ma-list-tbl .ma-act-col::after{background:linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0))}
  #pg-stock .ma-item-xscroll.is-scroll:not(.is-end) .ma-list-tbl .ma-act-col::after{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════════════════
   v3.9.825 — Products / Services list: steady columns, compact rows
   ──────────────────────────────────────────────────────────────────────────
   On a wide screen the spare room was shared out between all the columns, so
   the row read "name ……… group ……… price … price HSN" with uneven gaps and
   the HSN code pressed against the sell price, and every row was two buttons
   tall (Edit above View ▾).
     • Every column except the name keeps a steady width; the spare room goes
       to the name, so the data columns sit evenly spaced on the right.
     • HSN and UOM codes are centred, clear of the price beside them.
     • Edit · View · ▾ sit on one line and the rows are compact (about 64px).
     • The ▾ of the row menu is drawn (the character showed as a small dash
       with some Windows fonts); phones keep the character.
   Screens 720px and narrower keep the mobile card view exactly as it was.
════════════════════════════════════════════════════════════════════════════════ */
#pg-stock .ma-list-act-more .ma-more-svg{display:none}
@media (min-width:721px){
  #pg-stock .ma-item-xscroll .ma-list-act-more .ma-more-txt{display:none}
  #pg-stock .ma-item-xscroll .ma-list-act-more .ma-more-svg{display:inline-block;vertical-align:middle}

  #pg-stock .ma-item-xscroll .ma-list-tbl tbody td{padding-top:12px;padding-bottom:12px}
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col .ma-list-act{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px}
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col .ma-list-act-btn{width:auto}
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col .ma-list-act-btn.edit{flex:none}
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col .ma-list-act-row{gap:6px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th.ma-act-col,
  #pg-stock .ma-item-xscroll .ma-list-tbl td.ma-act-col{width:1%;text-align:left}

  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="group"]{width:170px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="purchase"],
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="sell"]{width:140px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="purchase_tax"],
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="sell_tax"]{width:180px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="hsn"]{width:110px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="stock_type"]{width:130px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="note"]{width:200px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="uom"]{width:80px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="stock"]{width:120px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="updated"]{width:160px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="status"]{width:100px}
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="tax"]{width:100px}

  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="hsn"],
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="hsn"],
  #pg-stock .ma-item-xscroll .ma-list-tbl th[data-col="uom"],
  #pg-stock .ma-item-xscroll .ma-list-tbl td[data-col="uom"]{text-align:center}

  /* the dark theme stripes every second row (2% white over each cell); the
     pinned Action cell carries the same stripe so it does not show as a block */
  html[data-theme="dark"] #pg-stock .ma-item-xscroll .ma-list-tbl tbody tr:nth-child(even) td.ma-act-col{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),var(--surf)}
  html[data-theme="dark"] #pg-stock .ma-item-xscroll .ma-list-tbl tbody tr:nth-child(even):hover td.ma-act-col{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),#0f172a}
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.828 — Settings ▸ Login & Security: the two tables scroll sideways
   ──────────────────────────────────────────────────────────────────────
   "Logged in Devices" and "Login Log" are wider than a phone, and wider
   than the settings column on a tablet or a small laptop. Their boxes were
   built to scroll sideways (overflow-x:auto in the markup), but the
   site-wide `.ma-bill-box{overflow:visible!important}` overrode that, so
   the columns on the right (Platform, Last Log In, Location and the Logout
   button) were cut off, and the page itself never scrolls sideways on a
   phone. These two boxes (.ma-sec-scroll) scroll again; nothing else
   changes, and on a wide screen, where the tables fit, they look the same.
══════════════════════════════════════════════════════════════════════ */
#set-sec-security .ma-sec-scroll{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
/* the page buttons under the Login Log stay in view while the table moves */
#set-sec-security .ma-sec-scroll .ma-sec-pager{ position:sticky; left:0 }
@media (max-width:480px){
  /* the same "← Scroll →" hint the other tables show on a phone */
  #set-sec-security .ma-sec-scroll::before{
    content:'← Scroll →';
    display:block; position:sticky; left:0;
    font-size:10px; color:var(--hint);
    padding:5px 14px; text-align:center; letter-spacing:.5px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.829 — Daily Expense list scrolls sideways; Staff Account buttons
   ──────────────────────────────────────────────────────────────────────
   Daily Expense: the list card clips anything wider than itself
   (`#pg-daily-expense .ma-card{overflow:hidden}`, kept for its rounded
   corners), so on a phone or a tablet the columns on the right (Payment
   Type and the Action buttons) were cut off with no way to reach them,
   even though the "← Scroll →" hint showed. The table's own box now
   scrolls sideways inside the card. The same goes for its Manage
   Category list, which had the same rule and lost its Action column.
══════════════════════════════════════════════════════════════════════ */
#pg-daily-expense #de-table-wrap,
#pg-expense-category #ec-table-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
/* the page numbers under the list stay in view while the table moves */
#pg-daily-expense #de-table-wrap > .ma-pagination{ position:sticky; left:0 }
/* The Salary page's phone rule for its own toolbar (all on one line, no
   wrapping) also reached the Daily Expense toolbar, which shares its
   classes, and pushed Trash, Search and "+ Add New" off the screen. Here
   the buttons wrap onto more lines, as on the other lists. */
@media (max-width:768px){
  #pg-daily-expense .de-toolbar-actions{ flex-wrap:wrap }
}

/* Settings ▸ Staff Account
   • "+ Add Staff" sat on the header's bottom line on a computer; on a
     phone the rule that widens the settings Save button stretched it
     across the card, below the title and over the table. Title and
     button now share one row and the button keeps its own size.
   • On a phone the staff table scrolls sideways, so Edit and Remove can
     be reached (they were cut off).
   • Edit and Remove keep their own size (side by side where the column
     has room) instead of two full-width bars stacked in the Action column.
   • On a phone, Save and Back at the end of "Create Staff Account" can
     be scrolled clear of the round chat button. */
#set-sec-staff > .ma-set2-sec-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 12px; flex-wrap:wrap;
}
#set-sec-staff > .ma-set2-sec-hdr .ma-btn{
  float:none; width:auto; flex:0 0 auto; margin:0; justify-content:center;
}
/* the table runs edge to edge in its card, as the Login & Security tables
   do, so it has the card's full width (on a laptop it no longer pokes out
   past the card's right edge), and scrolls sideways when even that is not
   enough */
#set-sec-staff > .ma-set2-sec-body{
  padding:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
#staff-account-tbl th:first-child, #staff-account-tbl td:first-child{ padding-left:18px }
#staff-account-tbl th:last-child,  #staff-account-tbl td:last-child{ padding-right:18px }
#staff-account-tbl td.ma-empty{ padding-left:18px; padding-right:18px }
#staff-account-tbl .ma-list-act-btn{ width:auto; flex:none; vertical-align:middle; margin-top:2px; margin-bottom:2px }
@media (max-width:480px){
  /* the same "← Scroll →" hint the other tables show on a phone */
  #set-sec-staff > .ma-set2-sec-body::before{
    content:'← Scroll →';
    display:block; position:sticky; left:0;
    font-size:10px; color:var(--hint);
    padding:6px 14px; text-align:center; letter-spacing:.5px;
  }
}
@media (max-width:768px){
  #pg-staff-create{ padding-bottom:84px }
}

/* ══════════════════════════════════════════════════════════════════════
   v3.9.830 — Create Daily Expense on a phone, and the other screens that
   did not fit a phone (or a tablet held upright). Everything here is for
   small screens, except two things that were broken at every width, so
   their fix holds on a computer too: the four Vouchers buttons (H) and
   the Activity Log search box (N). The few rules that reach a little past
   tablet widths (up to 1100px) only change a layout whose content no
   longer fits; where it fits, nothing moves.
══════════════════════════════════════════════════════════════════════ */

/* ── A. Create Daily Expense (Daily Expense › + Add New) ────────────────
   On a phone the fields of "Expense Detail" ran past the card's right
   edge, the items table was squeezed into a 900px-wide strip of unlabeled
   boxes (the phone card style of Sale Invoice half-applied), the amounts
   on the right of the totals were cut off, ONLINE fell off the screen and
   the IGST box showed even with GST switched off. Now: labels above the
   boxes, one card per item like Sale Invoice on a phone, totals in full,
   and payment buttons sized to fit. */
@media (max-width:760px){
  #pg-add-expense{ padding-left:8px; padding-right:8px }

  /* Expense Detail: label above its box, boxes full width */
  #pg-add-expense .ax-detail-card .gst-card-body{ padding:14px 12px }
  #pg-add-expense .ax-detail-grid{ grid-template-columns:minmax(0,1fr); row-gap:12px }
  #pg-add-expense .ax-fg{ grid-template-columns:minmax(0,1fr); gap:5px }
  #pg-add-expense .ax-fg > label{ font-size:12px; color:var(--muted) }
  #pg-add-expense .ax-fg-gst{ display:flex; align-items:center; gap:12px }

  /* Expense Items: one card per item */
  #pg-add-expense .gst-items-tbl{
    display:block; width:100% !important; min-width:0 !important; table-layout:auto !important;
  }
  #pg-add-expense .gst-items-tbl thead,
  #pg-add-expense .gst-items-tbl tfoot{ display:none !important }
  #pg-add-expense .gst-items-tbl tbody{ display:block; padding:12px 10px 2px }
  /* top half of the card: the item's boxes */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-template-areas:none !important;
    gap:10px !important;
    position:relative !important;
    margin:0 !important;
    padding:12px !important;
    background:var(--surf) !important;
    border:1px solid var(--bdr) !important;
    border-bottom:0 !important;
    border-radius:10px 10px 0 0 !important;
  }
  /* bottom half: the item note (and the IGST / CESS amounts when GST is on) */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-template-areas:none !important;
    gap:8px 10px !important;
    position:relative !important;
    margin:0 0 12px !important;
    padding:0 12px 12px !important;
    background:var(--surf) !important;
    border:1px solid var(--bdr) !important;
    border-top:0 !important;
    border-radius:0 0 10px 10px !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr > td{
    display:block !important;
    grid-area:auto !important;
    grid-column:auto !important;
    position:static !important;
    float:none !important;
    width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    background:none !important;
    text-align:left !important;
    font-size:13px !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr > td::before,
  #pg-add-expense #ax-items-tbl tbody tr > td::after{ content:none !important }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td{ display:none !important }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.gst-c-prod-note{ display:block !important; grid-column:1 / -1 !important }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.ax-col-igst,
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.ax-col-cess{ display:block !important }

  /* item number: round badge left of the item name */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-sr{
    position:absolute !important; top:18px !important; left:12px !important;
    width:28px !important; height:28px !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:var(--surf2) !important; color:var(--brand) !important;
    font-size:13px !important; font-weight:700 !important; text-align:center !important;
  }
  /* item name: full width, clear of the badge and the + / − buttons */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-prod{
    grid-column:1 / -1 !important; padding:0 82px 0 38px !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a.gst-first-row > td.gst-c-prod{ padding-right:42px !important }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-total{ grid-column:1 / -1 !important }
  /* + / − : top right of the card, always shown (a phone has no hover) */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-act{
    position:absolute !important; top:15px !important; right:12px !important;
    display:flex !important; align-items:center !important; gap:6px !important;
    white-space:nowrap !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-act .gst-add-row-btn,
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-act .gst-del-row-btn{
    opacity:1 !important; pointer-events:auto !important;
    width:34px !important; height:34px !important; margin:0 !important;
    font-size:20px !important; line-height:1 !important; flex:0 0 auto !important;
  }

  /* the boxes inside the card */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td input,
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td select{
    display:block !important;
    width:100% !important; height:40px !important;
    margin:0 !important; padding:0 11px !important;
    border:1px solid var(--bdr) !important; border-radius:6px !important;
    background-color:var(--surf) !important; color:var(--text) !important;
    font-size:13.5px !important; text-align:left !important;
    box-sizing:border-box !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td select{
    padding-right:28px !important;
    -webkit-appearance:none !important; appearance:none !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
    background-repeat:no-repeat !important; background-position:right 11px center !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr > td input:focus,
  #pg-add-expense #ax-items-tbl tbody tr > td select:focus{
    border-color:var(--brand) !important; box-shadow:0 0 0 2px rgba(37,99,235,.14) !important; outline:none !important;
  }
  /* the item's total, in a box like the others ("Total" until there is one) */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-total .gst-total-cell{
    display:block !important; float:none !important;
    width:100% !important; height:40px !important; line-height:38px !important;
    padding:0 12px !important;
    border:1px solid var(--bdr) !important; border-radius:6px !important;
    background:var(--surf) !important;
    font-size:14px !important; font-weight:700 !important; color:var(--text) !important;
    text-align:right !important; box-sizing:border-box !important;
  }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-a > td.gst-c-total .gst-total-cell.is-placeholder{
    color:#94a3b8 !important; font-weight:400 !important;
  }
  /* the item note fills the card's width */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.gst-c-prod-note .gst-item-note{ margin:0 !important }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.gst-c-prod-note textarea{ min-height:40px; font-size:13px }
  /* the item's IGST and CESS amounts (GST on), each named */
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td .gst-igst-amt{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    margin:0; padding:7px 10px; border-radius:6px;
    background:var(--surf2); color:var(--text);
    font-size:12.5px; font-weight:600; text-align:left;
  }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.ax-col-igst .gst-igst-amt::before{ content:'IGST' }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td.ax-col-cess .gst-igst-amt::before{ content:'CESS' }
  #pg-add-expense #ax-items-tbl tbody tr.gst-item-row-b > td .gst-igst-amt::before{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; color:var(--muted);
  }
  /* a column that is switched off (GST off, or Manage Columns) stays hidden */
  #pg-add-expense #ax-items-tbl tbody tr[class] > td[class][style*="display: none"],
  #pg-add-expense #ax-items-tbl tbody tr[class] > td[class][style*="display:none"]{ display:none !important }

  /* totals: all amounts in view, payment buttons share the width */
  #pg-add-expense .ax-bottom-grid{ grid-template-columns:minmax(0,1fr); gap:0; padding:10px 0 4px }
  #pg-add-expense .ax-bottom-grid > div:empty{ display:none }
  #pg-add-expense .ax-amt-row{ gap:12px; padding:11px 4px }
  #pg-add-expense .ax-amt-row.grand{ margin:0; padding:12px 10px; border-radius:6px }
  #pg-add-expense .ax-pay-row{ flex-wrap:wrap; gap:10px; padding:14px 4px 4px }
  #pg-add-expense .ax-pay-row .l{ flex:1 1 100% }
  #pg-add-expense .ax-pay-pills{ flex:1 1 100%; gap:8px }
  #pg-add-expense .ax-pay-pill{ flex:1 1 0; min-width:0; padding:10px 4px; text-align:center }

  /* Save & Print and Save side by side, Back underneath */
  #pg-add-expense .ax-action-bar{ flex-wrap:wrap; gap:10px; padding:14px 0 8px }
  #pg-add-expense .ax-action-bar > div{ display:none }
  #pg-add-expense .ax-action-bar .ma-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 10px !important; white-space:nowrap;
  }
  #pg-add-expense .ax-action-bar .ax-saveprint-btn,
  #pg-add-expense .ax-action-bar .ax-save-btn{ flex:1 1 calc(50% - 5px) }
  #pg-add-expense .ax-action-bar .ax-back-btn{ order:3; flex:1 1 100% }
}

/* room under Save & Print / Save / Back, so at the end of the page they
   can be scrolled clear of the bottom bar and the round chat button */
@media (max-width:768px){
  #pg-add-expense{ padding-bottom:80px }
}

/* ── B. Add Income (Other Income › + Add New) ───────────────────────────
   The same trouble on a phone: Income No., Date and Category ran past the
   card, the price box was squeezed to a sliver beside the + / − buttons,
   and the totals column kept a 340px minimum so its amounts were cut. */
@media (max-width:1024px){
  #pg-add-income .ai-field{ grid-template-columns:75px minmax(0,1fr) }
}
@media (max-width:640px){
  #pg-add-income{ padding-left:8px; padding-right:8px }
  #pg-add-income .ai-card-body{ padding:14px 12px }
  #pg-add-income .ai-tbl thead th{ padding:10px 8px }
  #pg-add-income .ai-tbl tbody td{ padding:10px 8px }
  #pg-add-income .ai-td-price{ padding:10px 8px !important }
  #pg-add-income .ai-price-row{ flex-wrap:wrap; justify-content:flex-end; gap:8px }
  #pg-add-income .ai-price-row .ai-in-price{ flex:1 1 100% }
  #pg-add-income .ai-bottom-inner{ min-width:0 }
  #pg-add-income .ai-pay-pills{ width:100%; gap:8px }
  #pg-add-income .ai-pay-pill{ flex:1 1 0; min-width:0; padding:9px 4px; text-align:center }
}
@media (min-width:641px) and (max-width:900px){
  /* on a tablet the totals column is narrow: the payment buttons drop
     under "Payment Type" instead of running past the screen */
  #pg-add-income .ai-pay-row{ flex-wrap:wrap; gap:8px }
}

/* ── C. Import Other Income: the file box fits its card on a phone ───── */
@media (max-width:640px){
  #pg-import-income .ii-file-wrap input[type="file"]{ width:100%; max-width:100%; box-sizing:border-box }
}
@media (max-width:480px){
  /* nothing here scrolls sideways, so no "← Scroll →" hint */
  #pg-import-income .ii-card::before{ display:none }
}

/* ── D. Lists that could not be scrolled sideways ───────────────────────
   On a phone these list tables are wider than the screen, but their card
   clipped them (`.oi-list-card{overflow:hidden}`), so the columns on the
   right — and the Action buttons — could not be reached, even though the
   "← Scroll →" hint showed: Quotation, Delivery Challan, Packing List,
   Proforma, Sale Order, Purchase Order, Job Work, Price List, Credit
   Note, Debit Note, Multi-Currency Invoice, Service Request, Other Income
   and Income Category (and, on a tablet, 721–760px, Customer / Vendor
   Group and Product Group). On a tablet held upright (761–768px) the same happened to
   Sale Invoice and Purchase Invoice, and (721–900px, e.g. an iPad held
   upright) to Customer / Vendor.
   The card now scrolls sideways, like the other lists. */
@media (max-width:768px){
  .ma-card.oi-list-card,
  .ma-card.ma-list-card{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  /* "no records yet" stays in view instead of sitting in the middle of
     the wide table, partly off the screen */
  .ma-card.oi-list-card,
  .ma-card.ma-list-card{ container-type:inline-size }
  .ma-card.oi-list-card td.ma-empty > .ei,
  .ma-card.oi-list-card td.ma-empty > p,
  .ma-card.ma-list-card td.ma-empty > .ei,
  .ma-card.ma-list-card td.ma-empty > p{
    position:sticky; left:12px;
    width:calc(100cqw - 24px); max-width:100%;
    box-sizing:border-box;
  }
}
@media (min-width:721px) and (max-width:900px){
  #pg-customers .ma-card.oi-list-card.ma-cv-card{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
}

/* ── E. Settings tables that were cut off on a phone ────────────────────
   Credits › Credit Usage, WhatsApp Options › Whatsapp Log, Export Data
   (its Export buttons could not be reached at all) and Activity Log
   (Date and Reference). Each table now scrolls sideways in its own box. */
@media (max-width:768px){
  .ma-set-tbl-scroll,
  #set-sec-activity .ma-setact-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
}
@media (max-width:480px){
  .ma-set-tbl-scroll::before,
  #set-sec-activity .ma-setact-wrap::before{
    content:'← Scroll →';
    display:block; position:sticky; left:0;
    font-size:10px; color:var(--hint);
    padding:5px 14px; text-align:center; letter-spacing:.5px;
  }
}

/* ── F. The calculators (EMI, TDS, Depreciation, Advance Tax, Margin &
   Markup, Late Payment Interest): their form ran past the screen — on a
   phone for Depreciation (its long "Basis" choice set the width), and on
   a large phone / small tablet (561–700px) for all of them. The columns
   may now shrink to the screen; boxes and choices fit inside. ───────── */
@media (max-width:1100px){
  .emi-wrap{ grid-template-columns:minmax(0,1fr) }
  .emi-two{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:560px){
  .emi-two{ grid-template-columns:minmax(0,1fr) }
}

/* ── G. Create Packing List: Customer Information ran past the screen
   on a phone, and Invoice No. / Invoice Date kept a four-column row ─── */
@media (max-width:1100px){
  #pg-create-packing-list .gst-bill-grid{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px){
  #pg-create-packing-list .gst-invrow.gst-invrow--pair{ grid-template-columns:minmax(0,1fr); gap:6px }
  #pg-create-packing-list .gst-invrow.gst-invrow--pair > label.gst-invrow-secondary-lbl{ text-align:left; padding-right:0; margin-top:4px }
}

/* ── H. Vouchers: Receipt / Payment / Journal / Contra ──────────────────
   A later rule for the small three-dot "quick add" button (also named
   .ma-qa-btn) shrank these four buttons to 34×34px boxes, so their words
   spilled out over each other — on a computer as well as on a phone.
   They get their own size back. */
#pg-vouchers .ma-qa .ma-qa-btn{
  width:auto; height:auto;
  display:flex; align-items:center; justify-content:flex-start; gap:7px;
  padding:10px 16px;
  border:1.5px solid var(--bdr); border-radius:10px;
  background:var(--surf); color:var(--text);
  font-size:13px; font-weight:600;
}
#pg-vouchers .ma-qa .ma-qa-btn:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-bg) }
@media (max-width:768px){
  #pg-vouchers .ma-qa .ma-qa-btn{ justify-content:center; text-align:center; padding:10px 8px }
}
@media (max-width:480px){
  #pg-vouchers .ma-qa .ma-qa-btn{ font-size:12px; padding:9px 6px }
}

/* ── I. Cashbook ─────────────────────────────────────────────────────────
   The four totals were forced four across, so on a phone their amounts
   were cut ("₹ 56,56…"); they now sit two by two. The Apply / Today /
   This week / This month / Clear / Print buttons ran off the screen;
   they now wrap. */
@media (max-width:768px){
  #cb-summary.ma-jw-summary{ grid-template-columns:repeat(2, minmax(0,1fr)) !important }
  #cb-summary .ma-jw-card-n{ overflow-wrap:anywhere }
  #pg-cashbook > .ma-pg-hdr + .ma-card > .ma-card-body > div:last-child{ flex-wrap:wrap }
}
@media (max-width:480px){
  #cb-summary .ma-jw-card-n{ font-size:18px }
  #pg-cashbook > .ma-pg-hdr + .ma-card > .ma-card-body > div:last-child{ width:100% }
  #pg-cashbook > .ma-pg-hdr + .ma-card > .ma-card-body > div:last-child > .ma-btn{ flex:1 1 calc(33.333% - 6px); padding-left:6px; padding-right:6px }
  /* that card no longer scrolls sideways, so no "← Scroll →" hint */
  #pg-cashbook > .ma-pg-hdr + .ma-card::before{ display:none }
}

/* ── J. Product Barcode: on a tablet held upright the two 330px fields
   pushed "Add Product" off the screen ──────────────────────────────── */
@media (min-width:761px) and (max-width:1100px){
  #pg-product-barcode .bc-pick{ grid-template-columns:minmax(0,330px) minmax(0,330px) auto }
}

/* ── K. GSTR-2B: a 260px blank gap under "Select Downloaded GSTR2B File"
   on a phone (a width meant for the row became the box's height) ───── */
@media (max-width:640px){
  #pg-gstr2b .g2b-file-fg{ flex:0 0 auto }
}

/* ── L. Dashboard map: on a phone the "Sale" key and "Top Sale State
   list" boxes were 240px tall whatever they held (the same width-as-
   height mix-up), leaving big empty boxes ──────────────────────────── */
@media (max-width:560px){
  .ma-mapcard .ma-map-panel{ flex:0 0 auto }
}

/* ── M. Settings › Colour / Font: on a phone the font picker sat in half
   the width (a two-column grid left over from the old font cards), so
   its list hid each font's sample and the ✓ of the chosen font ──────── */
@media (max-width:640px){
  #set-sec-layoutcolor .ma-lc-fonts{ grid-template-columns:minmax(0,1fr) }
}

/* ── N. Activity Log page: from a tablet held upright up to a computer the
   search box was a 220px-tall empty block (a width meant for a row became
   its height in this one-column toolbar). It is now one line high again,
   as it already was on a phone. */
@media (min-width:641px){
  #pg-activity-log .ma-actlog-toolbar .ma-actlog-search{ flex:0 0 auto }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.9.831 — Vouchers page (#pg-vouchers) and Create / Edit Voucher
   (#pg-create-voucher). Both pages are built from the same classes as
   the Sale Invoice list and Create Proforma, so they look the same;
   this block only adds what is particular to vouchers, and every rule
   is scoped to these two pages (or to their own pop-ups).
═══════════════════════════════════════════════════════════════════ */

/* ── List: search panel open → title bar and panel read as one card
      (the same treatment as Sale / Purchase Invoice) ── */
#pg-vouchers.ma-docsrch-open > .ma-list-hdr{
  position:relative;
  margin-bottom:0;
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
}
#pg-vouchers.ma-docsrch-open > .ma-list-hdr::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:0;
  height:1px; background:var(--bdr);
  pointer-events:none;
}
#pg-vouchers .ma-list-pill.is-on{
  background:var(--surf3,#E9ECEF);
  border-color:var(--bdr);
}
/* Trash pill while the Trash view is showing */
#pg-vouchers #vch-trash-toggle.vch-trash-on{
  color:#b91c1c;
  border-color:#fecaca;
  background:#fee2e2;
}
#pg-vouchers #vch-trash-toggle.vch-trash-on svg{ color:#b91c1c; }
#pg-vouchers #vch-trash-toggle.vch-trash-on:hover{ background:#fecaca; }

/* ── Type tabs: Receipt = green, Payment = red, Journal = amber,
      Contra = blue (All keeps the shared indigo) ── */
#pg-vouchers .ma-inv-tab[data-tab="receipt"]::before{ background:#6ee7b7; }
#pg-vouchers .ma-inv-tab[data-tab="payment"]::before{ background:#fca5a5; }
#pg-vouchers .ma-inv-tab[data-tab="journal"]::before{ background:#fbbf24; }
#pg-vouchers .ma-inv-tab[data-tab="contra"]::before { background:#93c5fd; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="receipt"]{ color:#047857; background:#ecfdf5; border-bottom-color:#059669; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="payment"]{ color:#b91c1c; background:#fef2f2; border-bottom-color:#dc2626; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="journal"]{ color:#92400e; background:#fffbeb; border-bottom-color:#d97706; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="contra"] { color:#1d4ed8; background:#eff6ff; border-bottom-color:#2563eb; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="receipt"]::before{ background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.18); }
#pg-vouchers .ma-inv-tab.is-on[data-tab="payment"]::before{ background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); }
#pg-vouchers .ma-inv-tab.is-on[data-tab="journal"]::before{ background:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.18); }
#pg-vouchers .ma-inv-tab.is-on[data-tab="contra"]::before { background:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18); }
#pg-vouchers .ma-inv-tab.is-on[data-tab="receipt"] .ma-inv-tab-count{ background:#d1fae5; color:#065f46; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="payment"] .ma-inv-tab-count{ background:#fee2e2; color:#b91c1c; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="journal"] .ma-inv-tab-count{ background:#fef3c7; color:#92400e; }
#pg-vouchers .ma-inv-tab.is-on[data-tab="contra"]  .ma-inv-tab-count{ background:#dbeafe; color:#1e40af; }

/* ── Rows ── */
#pg-vouchers .ma-pay-pill.vch-tp{ white-space:nowrap; }
#pg-vouchers .ma-pay-pill.vch-tp-receipt{ background:#dcfce7; color:#15803d; }
#pg-vouchers .ma-pay-pill.vch-tp-payment{ background:#fee2e2; color:#b91c1c; }
#pg-vouchers .ma-pay-pill.vch-tp-journal{ background:#fef3c7; color:#92400e; }
#pg-vouchers .ma-pay-pill.vch-tp-contra { background:#dbeafe; color:#1d4ed8; }
#pg-vouchers .vch-flow{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:500; color:var(--text);
}
#pg-vouchers .vch-flow-ic{ color:var(--muted); flex-shrink:0; }
#pg-vouchers .vch-mode-pair{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
#pg-vouchers .vch-mode-pair .ma-pay-pill{ padding:5px 10px; }
#pg-vouchers .vch-rem-cell{ max-width:260px; }
#pg-vouchers .vch-rem{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:260px; color:var(--text);
}
#pg-vouchers .vch-ref{ font-size:11.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
#pg-vouchers .vch-muted{ color:var(--muted); }
#pg-vouchers th.vch-sorted{ color:var(--brand); }
#pg-vouchers th.vch-sorted .ma-sort-caret{ color:var(--brand); }

/* ── Row ▾ menu: Delete reads as a destructive action ── */
#vch-act-menu .ma-list-act-item.vch-act-del{ color:#dc2626; }
#vch-act-menu .ma-list-act-item.vch-act-del:hover{ background:#dc2626; color:#fff; }

/* ── Column picker (same sidebar as Proforma / Job Work) ── */
#vch-cols-wrap{
  position:fixed; inset:0;
  z-index:10600;
  pointer-events:none;
}
#vch-cols-wrap.open{ pointer-events:auto; }
#vch-cols-wrap .ec-scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0;
  transition:opacity .22s ease;
}
#vch-cols-wrap.open .ec-scrim{ opacity:1; }
#vch-cols-wrap .ec-side{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 94vw);
  background:var(--surf);
  box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  border-left:1px solid var(--bdr);
}
#vch-cols-wrap.open .ec-side{ transform:translateX(0); }
#vch-cols-wrap .ec-side-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--bdr);
}
#vch-cols-wrap .ec-side-title{ font-size:15px; font-weight:600; }
#vch-cols-wrap .ec-side-x{
  width:30px; height:30px;
  background:transparent; border:none; color:var(--muted);
  border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
#vch-cols-wrap .ec-side-x:hover{ background:var(--surf2); color:var(--text); }
#vch-cols-wrap .ec-side-body{ flex:1 1 auto; overflow-y:auto; padding:14px 8px; }
#vch-cols-wrap .ec-side-foot{
  padding:12px 20px;
  border-top:1px solid var(--bdr);
  display:flex; justify-content:space-between; gap:10px;
}

/* ── Summary pop-up ── */
.vch-sum-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 14px; }
.vch-sum-grid .ma-sc-val{ font-size:19px; }
.vch-sum-in{ color:#059669 !important; }
.vch-sum-out{ color:#dc2626 !important; }
.vch-sum-h{ font-weight:600; margin:12px 0 6px; }
.vch-sum-tbl{ width:100%; font-size:13px; }
.vch-sum-tbl th.r, .vch-sum-tbl td.r{ text-align:right; }

/* ── Create / Edit: contra "From → To" strip ── */
#pg-create-voucher .vchd-flow{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  margin:2px 0 14px;
}
#pg-create-voucher .vchd-flow-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:12px 10px;
  background:var(--surf2); border:1px solid var(--bdr); border-radius:9px;
  min-width:0;
}
#pg-create-voucher .vchd-flow-box .k{
  font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
}
#pg-create-voucher .vchd-flow-box b{ font-size:15px; color:var(--text); }
#pg-create-voucher .vchd-flow-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--brand-bg, #eff6ff); color:var(--brand);
}
#pg-create-voucher .vchd-warn{
  font-size:12px; font-weight:600; color:#dc2626;
  background:#fef2f2; border:1px solid #fecaca; border-radius:6px;
  padding:7px 10px; margin-top:2px;
}

/* ── Create / Edit: amount card ── */
#pg-create-voucher .vchd-amt-row .k{ font-size:13.5px; font-weight:600; color:var(--text); margin:0; }
#pg-create-voucher .vchd-amt-row .k .req{ color:#dc2626; font-weight:700; }
#pg-create-voucher .vchd-amt-row input{
  width:min(210px, 55%);
  padding:8px 12px;
  border:1px solid var(--bdr); border-radius:6px;
  background:var(--surf); color:var(--text);
  font-family:inherit; font-size:15px; font-weight:700; text-align:right;
  outline:none;
}
#pg-create-voucher .vchd-amt-row input:focus{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(26,86,219,.10); }
#pg-create-voucher #vchd-side-row .v{ font-weight:600; font-size:13.5px; }
#pg-create-voucher .gst-amt-words{ font-size:13px; font-weight:600; color:var(--text); padding:2px 0 4px; line-height:1.45; }
#pg-create-voucher select:disabled{ opacity:.75; cursor:not-allowed; }

/* a field the save stopped on */
#pg-create-voucher .vchd-err{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.14) !important;
}
#pg-create-voucher .gst-action-row button[disabled]{ opacity:.6; cursor:wait; }

@media (max-width:640px){
  .vch-sum-grid{ grid-template-columns:minmax(0,1fr); }
  #pg-create-voucher .vchd-amt-row{ flex-wrap:wrap; gap:6px; }
  #pg-create-voucher .vchd-amt-row input{ width:100%; }
}

/* ── Dark mode ── */
html[data-theme="dark"] #pg-vouchers #vch-trash-toggle.vch-trash-on{ background:#450a0a; border-color:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] #pg-vouchers #vch-trash-toggle.vch-trash-on svg{ color:#fecaca; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="receipt"]{ background:#064e3b; color:#a7f3d0; border-bottom-color:#6ee7b7; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="payment"]{ background:#450a0a; color:#fecaca; border-bottom-color:#fca5a5; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="journal"]{ background:#451a03; color:#fed7aa; border-bottom-color:#fbbf24; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="contra"] { background:#172554; color:#bfdbfe; border-bottom-color:#60a5fa; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="receipt"] .ma-inv-tab-count{ background:#065f46; color:#a7f3d0; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="payment"] .ma-inv-tab-count{ background:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="journal"] .ma-inv-tab-count{ background:#78350f; color:#fed7aa; }
html[data-theme="dark"] #pg-vouchers .ma-inv-tab.is-on[data-tab="contra"]  .ma-inv-tab-count{ background:#1e3a8a; color:#bfdbfe; }
html[data-theme="dark"] #pg-vouchers .ma-pay-pill.vch-tp-receipt{ background:#064e3b; color:#a7f3d0; }
html[data-theme="dark"] #pg-vouchers .ma-pay-pill.vch-tp-payment{ background:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] #pg-vouchers .ma-pay-pill.vch-tp-journal{ background:#78350f; color:#fed7aa; }
html[data-theme="dark"] #pg-vouchers .ma-pay-pill.vch-tp-contra { background:#1e3a8a; color:#bfdbfe; }
html[data-theme="dark"] #pg-vouchers #vch-bulk-bar{ background:#172554 !important; border-color:#1e3a8a !important; }
html[data-theme="dark"] #pg-vouchers #vch-bulk-count{ color:#bfdbfe !important; }
html[data-theme="dark"] .vch-sum-in{ color:#6ee7b7 !important; }
html[data-theme="dark"] .vch-sum-out{ color:#fca5a5 !important; }
html[data-theme="dark"] #pg-create-voucher .vchd-flow-arrow{ background:#172554; color:#93c5fd; }
html[data-theme="dark"] #pg-create-voucher .vchd-warn{ background:#450a0a; border-color:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] #pg-create-voucher .vchd-amt-row .k .req{ color:var(--body); }
html[data-theme="dark"] #vch-act-menu .ma-list-act-item.vch-act-del{ color:#fca5a5; }
html[data-theme="dark"] #vch-act-menu .ma-list-act-item.vch-act-del:hover{ background:#dc2626; color:#fff; }
/* ═══════════ END v3.9.831 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.832 — Sign-in screen: "Login with OTP" / "Login with Password",
   and the sign-up form (username, email, password with a strength
   meter, confirm password). Same green look as the v3.9.709 screen;
   every rule is scoped to the sign-in screen (.ma-a2 / .ma-a2-*).
═══════════════════════════════════════════════════════════════════ */

/* a form taller than the window (sign-up on a laptop) scrolls from its
   top instead of being cut off above the fold */
@media (min-width:1025px){
  .ma-a2-right{ align-items:flex-start; }
  .ma-a2-right > .ma-a2-card{ margin-top:auto; margin-bottom:auto; }
}

/* ── the two ways to log in ── */
.ma-a2-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; margin:-6px 0 22px;
  background:#F1F6F4; border:1px solid #E0ECE6; border-radius:14px; }
.ma-a2-tabs[hidden]{ display:none; }
.ma-a2-tab{ display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:46px; padding:0 10px;
  border:0; border-radius:10px; background:transparent; color:#5B7183; font:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:background .18s, color .18s, box-shadow .18s; }
.ma-a2-tab:hover{ color:#12324F; }
.ma-a2-tab.is-on{ background:#fff; color:#0E9C7E; box-shadow:0 1px 2px rgba(15,23,42,.06), 0 6px 16px rgba(16,163,116,.16); }
.ma-a2-tab:focus-visible{ outline:2px solid #12A76B; outline-offset:2px; }
.ma-a2-tab svg{ flex:0 0 auto; }
.ma-a2-tab span{ overflow:hidden; text-overflow:ellipsis; }

/* ── the forms ── */
#ma-a2-step-pass, #ma-a2-step-signup{ animation:maOtpIn .28s cubic-bezier(.2,.9,.3,1) both; }
.ma-a2-form{ margin:0; }
.ma-a2-form .ma-a2-lbl{ margin-top:16px; }
.ma-a2-form > .ma-a2-lbl:first-child{ margin-top:0; }
.ma-a2-lbl-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:16px; }
.ma-a2-lbl-row .ma-a2-lbl{ margin-top:0; }
.ma-a2-forgot{ font-size:13.5px; padding:0; }
.ma-a2-forgot:hover{ text-decoration:underline; text-underline-offset:3px; }
.ma-a2-field.is-err{ border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.ma-a2-field.is-err:focus-within{ border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.16); }
.ma-a2-field.is-shake{ animation:maOtpShake .42s cubic-bezier(.36,.07,.19,.97) both; }

/* show / hide password */
.ma-a2-eye{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-right:-9px;
  padding:0; border:0; border-radius:9px; background:transparent; color:#94A3B8; cursor:pointer; transition:background .15s, color .15s; }
.ma-a2-eye:hover{ color:#12324F; background:#F1F5F9; }
.ma-a2-eye:focus-visible{ outline:2px solid #12A76B; outline-offset:1px; }
.ma-a2-eye .ma-a2-eye-off{ display:none; }
.ma-a2-eye[aria-pressed="true"] .ma-a2-eye-on{ display:none; }
.ma-a2-eye[aria-pressed="true"] .ma-a2-eye-off{ display:block; }

/* the little state mark inside a field: checking… / free / taken */
.ma-a2-fstate{ flex:0 0 auto; width:22px; height:22px; display:none; align-items:center; justify-content:center; }
.ma-a2-fstate.is-busy, .ma-a2-fstate.is-ok, .ma-a2-fstate.is-bad{ display:flex; }
.ma-a2-fstate.is-busy::before{ content:''; width:16px; height:16px; box-sizing:border-box; border:2px solid #CFE3DA;
  border-top-color:#12A76B; border-radius:50%; animation:maOtpSpin .7s linear infinite; }
.ma-a2-fstate svg{ width:20px; height:20px; }
.ma-a2-field .ma-a2-fstate.is-ok svg{ color:#12A76B; animation:maOtpPop .3s cubic-bezier(.2,1.3,.4,1) both; }
.ma-a2-field .ma-a2-fstate.is-bad svg{ color:#EF4444; animation:maOtpPop .3s cubic-bezier(.2,1.3,.4,1) both; }

/* hint / error line under a field */
.ma-a2-hint{ margin-top:7px; font-size:13px; line-height:1.45; color:#6B7F8E; }
.ma-a2-hint[hidden]{ display:none; }
.ma-a2-hint.is-err{ color:#DC2626; }
.ma-a2-hint.is-ok{ color:#0E9C6B; }
.ma-a2-hint .ma-a2-link{ font-size:inherit; padding:0; text-decoration:underline; text-underline-offset:2px; }

/* password strength: three bars and a word */
.ma-a2-meter{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.ma-a2-meter-bars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; width:126px; flex:0 0 auto; }
.ma-a2-meter-bars i{ display:block; height:6px; border-radius:6px; background:#E3EAEF; transition:background .25s; }
.ma-a2-meter-lbl{ font-size:13px; color:#6B7F8E; line-height:1.35; }
.ma-a2-meter-lbl b{ font-weight:800; }
.ma-a2-meter[data-level="1"] .ma-a2-meter-bars i:nth-child(1){ background:#EF4444; }
.ma-a2-meter[data-level="2"] .ma-a2-meter-bars i:nth-child(-n+2){ background:#F59E0B; }
.ma-a2-meter[data-level="3"] .ma-a2-meter-bars i{ background:#12A76B; }
.ma-a2-meter[data-level="1"] .ma-a2-meter-lbl{ color:#DC2626; }
.ma-a2-meter[data-level="2"] .ma-a2-meter-lbl{ color:#B45309; }
.ma-a2-meter[data-level="3"] .ma-a2-meter-lbl{ color:#0E9C6B; }

/* the checklist under it */
.ma-a2-rules{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.ma-a2-rules li{ display:inline-flex; align-items:center; gap:5px; height:25px; padding:0 9px 0 6px; border-radius:20px;
  background:#F3F6F8; color:#6B7F8E; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s, color .2s; }
.ma-a2-rules li::before{ content:''; flex:0 0 auto; width:14px; height:14px; box-sizing:border-box; border-radius:50%;
  border:1.6px solid #B7C4CE; }
.ma-a2-rules li.is-ok{ background:#E8F7EF; color:#0E8A5F; }
.ma-a2-rules li.is-ok::before{ border:0; background:#12A76B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* OR + Google follow whichever first step is showing; no Google, no OR */
#ma-a2-alt[hidden], .ma-a2-or[hidden]{ display:none; }

/* a message with a smaller second line (what to do next) */
.ma-a2-note-sub{ display:block; margin-top:4px; font-size:13px; font-weight:500; line-height:1.45; opacity:.92; }
#ma-a2-notices .ma-a2-note{ margin:0 0 16px; }

/* phones */
@media (max-width:440px){
  .ma-a2-tab{ font-size:13.5px; gap:6px; padding:0 6px; }
  .ma-a2-tab svg{ display:none; }
  .ma-a2-meter{ align-items:flex-start; flex-direction:column; gap:7px; }
  .ma-a2-meter-bars{ width:100%; }
}

/* dark theme */
/* the app's dark rule for every input (higher specificity) painted a lighter
   box inside each field here; the field itself carries the colour */
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-field input,
html[data-theme="dark"] #ma-auth2 .ma-a2-field input{ background:transparent; border:0; }
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp-cell,
html[data-theme="dark"] #ma-auth2 .ma-a2-otp-cell{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp-cell:focus,
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp-cell.filled,
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp.is-ok .ma-a2-otp-cell{ border-color:#12A76B; }
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp-cell.filled{ background:color-mix(in srgb, #12A76B 14%, var(--surf2)); }
html[data-theme="dark"] #ma-shell #ma-auth2 .ma-a2-otp.is-wrong .ma-a2-otp-cell{ border-color:#EF4444; background:color-mix(in srgb, #EF4444 14%, var(--surf2)); }
html[data-theme="dark"] .ma-a2-lbl{ color:var(--text); }
html[data-theme="dark"] .ma-a2-lead{ color:var(--muted); }
html[data-theme="dark"] .ma-a2-or::before{ background:var(--bdr); }
html[data-theme="dark"] .ma-a2-or span{ background:var(--surf); }
html[data-theme="dark"] .ma-a2-google{ background:var(--surf2); border-color:var(--bdr); color:var(--text); }
html[data-theme="dark"] .ma-a2-google:hover{ background:var(--surf3); }
html[data-theme="dark"] .ma-a2-tabs{ background:var(--surf2); border-color:var(--bdr); }
html[data-theme="dark"] .ma-a2-tab{ color:var(--muted); }
html[data-theme="dark"] .ma-a2-tab:hover{ color:var(--text); }
html[data-theme="dark"] .ma-a2-tab.is-on{ background:var(--surf3); color:#34D399; box-shadow:0 1px 3px rgba(0,0,0,.35); }
html[data-theme="dark"] .ma-a2-eye:hover{ background:var(--surf3); color:var(--text); }
html[data-theme="dark"] .ma-a2-hint, html[data-theme="dark"] .ma-a2-meter-lbl{ color:var(--muted); }
html[data-theme="dark"] .ma-a2-hint.is-err, html[data-theme="dark"] .ma-a2-meter[data-level="1"] .ma-a2-meter-lbl{ color:#F87171; }
html[data-theme="dark"] .ma-a2-hint.is-ok, html[data-theme="dark"] .ma-a2-meter[data-level="3"] .ma-a2-meter-lbl{ color:#34D399; }
html[data-theme="dark"] .ma-a2-meter[data-level="2"] .ma-a2-meter-lbl{ color:#FBBF24; }
html[data-theme="dark"] .ma-a2-meter-bars i{ background:var(--bdr); }
html[data-theme="dark"] .ma-a2-rules li{ background:var(--surf2); color:var(--muted); }
html[data-theme="dark"] .ma-a2-rules li::before{ border-color:#475569; }
html[data-theme="dark"] .ma-a2-rules li.is-ok{ background:color-mix(in srgb, #12A76B 18%, var(--surf2)); color:#34D399; }
html[data-theme="dark"] .ma-a2-otp-sent b{ color:var(--text); }
html[data-theme="dark"] .ma-a2-note.err{ background:rgba(239,68,68,.14); color:#FCA5A5; }
html[data-theme="dark"] .ma-a2-note.ok{ background:rgba(18,167,107,.16); color:#6EE7B7; }
html[data-theme="dark"] .ma-a2-switch b{ color:var(--text); }
html[data-theme="dark"] .ma-a2-switch span{ color:var(--muted); }
html[data-theme="dark"] .ma-a2-switch-btn{ background:transparent; }
html[data-theme="dark"] .ma-a2-switch-btn:hover{ background:#12A76B; }
/* ═══════════ END v3.9.832 ═══════════ */


/* ═══════════════════════════════════════════════════════════════════
   v3.9.834 — Upload using AI (Sale Invoice + Purchase Invoice)
   The list-page button, the create-page button, the left "Upload …
   Invoice" panel with its drop zone and preview, the suggestion
   links under fields, and the "Please wait" cover. Everything is scoped
   to .ma-aiu-* classes or to a create page while its panel is open
   (.ma-aiu-split), so nothing else on the pages changes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── buttons ── */
.ma-list-pill.ma-aiu-pill .ma-aiu-i-ai{color:var(--brand)}
.ma-aiu-coin{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  border:1.5px solid #F59E0B;color:#F59E0B;background:#FFFBEB;margin-left:1px;flex:0 0 auto}
.ma-aiu-coin svg{width:8px;height:8px;color:#F59E0B !important}
.gst-pg-bar .ma-aiu-barbtn{display:inline-flex;align-items:center;gap:7px;margin-left:auto;margin-right:8px}
.gst-pg-bar .ma-aiu-barbtn .ma-aiu-i-ai{color:var(--brand)}
.ma-aiu-split .gst-pg-bar .ma-aiu-barbtn{display:none}
#pg-bill:has(> #edit-mode-banner) .gst-pg-bar .ma-aiu-barbtn,
#pg-purchase:has(> #pu-edit-mode-banner) .gst-pg-bar .ma-aiu-barbtn{display:none}

/* ── split page: panel on the left, the form on the right in one column ── */
.ma-pg.ma-aiu-split.on{display:grid;grid-template-columns:minmax(340px,40fr) minmax(0,60fr);column-gap:16px;align-items:start}
.ma-pg.ma-aiu-split > *{grid-column:2;min-width:0}
.ma-pg.ma-aiu-split > .ma-aiu-panel{grid-column:1;grid-row:1 / span 60}
.ma-pg.ma-aiu-split .gst-bill-grid,
.ma-pg.ma-aiu-split .gst-bottom-grid{grid-template-columns:minmax(0,1fr)}
.ma-pg.ma-aiu-split .gst-items-tbl{min-width:760px}

/* ── the panel ── */
.ma-aiu-panel{position:sticky;top:0;height:var(--aiu-h,640px);display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--bdr);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.ma-aiu-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid var(--bdr);flex:0 0 auto}
.ma-aiu-ttl{display:flex;align-items:center;gap:9px;min-width:0}
.ma-aiu-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-aiu-panel.has-file .ma-aiu-name{color:var(--muted);font-weight:500}
.ma-aiu-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ma-aiu-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.ma-aiu-ic:hover{background:var(--surf3);color:var(--text)}
.ma-aiu-ic[hidden]{display:none}
.ma-aiu-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:14px}
.ma-aiu-drop{flex:1 1 auto;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border:1.6px dashed #C3C7CE;border-radius:8px;background:var(--surf2);cursor:pointer;padding:24px 18px;text-align:center;
  transition:border-color .15s,background .15s}
.ma-aiu-drop:hover,.ma-aiu-drop:focus-visible{border-color:var(--brand);outline:none}
.ma-aiu-panel.is-over .ma-aiu-drop{border-color:var(--brand);background:var(--brand-bg)}
.ma-aiu-panel.is-over .ma-aiu-prev{outline:2px dashed var(--brand);outline-offset:-2px}
.ma-aiu-drop[hidden]{display:none}
.ma-aiu-doc{color:#5F6672;display:inline-flex}
.ma-aiu-doc .ma-aiu-doc-ln{stroke:var(--brand)}
.ma-aiu-drop-t{font-size:14px;font-weight:500;color:var(--text);max-width:380px;line-height:1.45}
.ma-aiu-prev{flex:1 1 auto;min-height:0;overflow:auto;border-radius:6px;background:var(--surf2);padding:0}
.ma-aiu-prev[hidden]{display:none}
.ma-aiu-img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--bdr);margin:0 0 10px}
.ma-aiu-img:last-child{margin-bottom:0}
.ma-aiu-pdfwait{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}

/* ── suggestions under a field ── */
.ma-aiu-sugg{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:12px;line-height:1.35}
.gst-fr > .ma-aiu-sugg{grid-column:-2 / -1}
.ma-aiu-sugg-t{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.ma-aiu-sugg-t svg{flex:0 0 auto;color:#D97706}
.ma-aiu-sugg-b{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--brand);border-radius:999px;
  background:var(--brand-bg);color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.2}
.ma-aiu-sugg-b:hover{background:var(--brand);color:#fff}
.ma-aiu-sugg-row{margin-top:7px}
.ma-aiu-sugg-row[data-aiu-tag="add"] .ma-aiu-sugg-t{display:none}
.ma-aiu-sugg-row .ma-aiu-sugg-b{font-size:11.5px;padding:3px 9px}
.ma-aiu-sugg-row.ma-aiu-note{font-size:11.5px}
.ma-aiu-note .ma-aiu-sugg-t{white-space:normal}
.ma-aiu-hint{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:-2px 0 10px;padding:7px 10px;border-radius:7px;
  background:var(--brand-bg);border:1px solid var(--brand-bg2);font-size:12px;color:var(--text)}
.ma-aiu-hint > span{display:inline-flex;align-items:center;gap:6px}
.ma-aiu-hint svg{color:var(--brand);flex:0 0 auto}
.ma-aiu-hint-b{border:none;background:none;padding:0;color:var(--brand);font-weight:700;font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}

/* ── "Please wait" cover ── */
.ma-aiu-ov{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.8)}
.ma-aiu-ov.on{display:flex}
.ma-aiu-ov-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px;max-width:520px}
.ma-aiu-spin{color:var(--brand);animation:ma-aiu-rot 1.1s linear infinite}
@keyframes ma-aiu-rot{to{transform:rotate(360deg)}}
.ma-aiu-ov-t{font-size:17px;font-weight:500;color:var(--brand)}
.ma-aiu-ov-s{font-size:13px;color:var(--muted);min-height:18px}
.ma-aiu-ov-cancel{margin-top:2px;border:none;background:none;color:var(--muted);font-size:12.5px;text-decoration:underline;cursor:pointer;font-family:inherit}
.ma-aiu-ov-cancel:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){.ma-aiu-spin{animation-duration:2.4s}}

/* ── dark theme ── */
html[data-theme="dark"] .ma-aiu-drop{border-color:#4B5563}
html[data-theme="dark"] .ma-aiu-doc{color:#9CA3AF}
html[data-theme="dark"] .ma-aiu-coin{background:#3A2A08}
html[data-theme="dark"] .ma-aiu-ov{background:rgba(15,23,42,.78)}
html[data-theme="dark"] .ma-aiu-img{background:#fff}

/* ── narrower screens: the panel sits above the form ── */
@media (max-width:1100px){
  .ma-pg.ma-aiu-split.on{display:block}
  .ma-aiu-panel{position:relative;height:auto;margin-bottom:14px}
  .ma-aiu-drop{min-height:190px}
  .ma-aiu-prev{max-height:62vh}
  .ma-pg.ma-aiu-split .gst-items-tbl{min-width:0}
}
@media (max-width:760px){
  .gst-pg-bar .ma-aiu-barbtn{margin:0;justify-content:center}
  .ma-aiu-drop-t{font-size:13px}
}
/* ═══════════ END v3.9.834 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.9.836 — Upload using AI: the panel's "Reset" button (removes the
   uploaded invoice and clears what it filled in)
   ═══════════════════════════════════════════════════════════════════ */
.ma-aiu-reset{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;margin-right:2px;border:1px solid var(--bdr);border-radius:7px;
  background:var(--surf);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.ma-aiu-reset svg{flex:0 0 auto}
.ma-aiu-reset:hover{border-color:#DC2626;color:#DC2626;background:#FEF2F2}
.ma-aiu-reset:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ma-aiu-reset[hidden]{display:none}
html[data-theme="dark"] .ma-aiu-reset:hover{background:rgba(220,38,38,.14)}

/* v3.9.836 — Invoice No.: "Reuse deleted invoice no:" sits under Pre / No. / Post
   across their full width (it was squeezed into the first of the three boxes), and
   the row's labels stay level with the boxes while it is shown */
.gst-invno > [id$="-gap-wrap"]{grid-column:1 / -1;min-width:0}
.gst-invno > [id$="-gap-wrap"] svg{vertical-align:-2px}
@media (min-width:761px){
  .gst-invrow:has(> .gst-invno > [id$="-gap-wrap"]){align-items:start}
  .gst-invrow:has(> .gst-invno > [id$="-gap-wrap"]) > label{padding-top:8px}
}
/* …and it can be read in dark mode (its colours were fixed to white: white text on white) */
html[data-theme="dark"] .ma-gap-dd-btn,
html[data-theme="dark"] .ma-gap-dd-panel{background:var(--surf)!important;border-color:var(--bdr)!important;color:var(--text)}
html[data-theme="dark"] .ma-gap-dd-panel input{background:var(--surf)!important;color:var(--text);border-bottom-color:var(--bdr)!important}
html[data-theme="dark"] .ma-gap-row{color:var(--text);border-bottom-color:var(--bdr)!important}
html[data-theme="dark"] .ma-gap-row[data-val=""]{background:var(--surf3)!important}
html[data-theme="dark"] .ma-gap-row:not([data-val=""]):hover{background:rgba(37,99,235,.18)!important}
/* ═══════════ END v3.9.836 ═══════════ */