/* ============================================================
   Recharge Admin — Premium Design System (2026)
   Own original design. Business logic unchanged.
   ============================================================ */
:root{
  --brand:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-soft:#eef2ff;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --bg:#f1f5f9; --surface:#ffffff; --line:#e8edf3; --line-2:#eef2f7;
  --success:#10b981; --success-soft:#e7f7f0; --warn:#f59e0b; --warn-soft:#fff5e6;
  --danger:#ef4444; --danger-soft:#fdecec; --info:#0ea5e9; --info-soft:#e6f6fe;
  --sky:#0ea5e9; --violet:#8b5cf6; --pink:#ec4899;
  --sidebar:#ffffff; --sidebar-2:#f6f8fc; --sidebar-ink:#5b6472; --sidebar-active:#f1f5f9;
  --radius:16px; --radius-sm:11px; --radius-xs:9px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-lg:0 12px 40px rgba(15,23,42,.12);
  --sb:264px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand-600);text-decoration:none}
::selection{background:var(--brand-soft)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:#f1f5f9;padding:2px 6px;border-radius:6px;color:var(--brand-700)}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
/* Sidebar is always visible (pinned) on desktop; the ☰ toggle only matters on
   small screens where it collapses off-canvas. */
.sidebar{width:264px;background:var(--sidebar);color:var(--sidebar-ink);position:fixed;inset:0 auto 0 0;
  display:flex;flex-direction:column;z-index:60;overflow-y:auto;border-right:1px solid var(--line);
  transform:none;transition:transform .25s ease}
.sidebar .logo{display:flex;align-items:center;gap:11px;padding:22px 22px 18px;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.02em;border-bottom:1px solid var(--line-2)}
.sidebar .logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--violet));
  display:grid;place-items:center;font-size:17px;color:#fff;box-shadow:0 6px 16px rgba(99,102,241,.4)}
.sidebar .nav{padding:10px 14px 20px;flex:1}
.sidebar .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin:18px 12px 8px;font-weight:700}
.sidebar .nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;color:var(--sidebar-ink);
  font-weight:500;font-size:14px;margin-bottom:3px;transition:.15s;position:relative}
.sidebar .nav a .ic{width:20px;text-align:center;font-size:16px;opacity:.75}
.sidebar .nav a:hover{background:var(--sidebar-active);color:var(--ink)}
.sidebar .nav a.active{background:linear-gradient(90deg,var(--brand-600),var(--brand));color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.32)}
.sidebar .nav a.active .ic{opacity:1}
.sidebar .nav a .tag{margin-left:auto;font-size:10.5px;background:var(--brand-soft);color:var(--brand-700);padding:2px 8px;border-radius:20px;font-weight:700}
.sidebar .nav a.active .tag{background:rgba(255,255,255,.2);color:#fff}
.sidebar .who{margin:8px 14px 16px;padding:12px;background:var(--sidebar-2);border:1px solid var(--line-2);border-radius:13px;display:flex;align-items:center;gap:11px}
.sidebar .who .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;color:#fff;font-weight:700}
.sidebar .who .nm{color:var(--ink);font-weight:600;font-size:13.5px;line-height:1.2}
.sidebar .who .rl{color:var(--muted);font-size:11.5px}

.content{flex:1;margin-left:264px;min-width:0;display:flex;flex-direction:column;transition:margin-left .25s ease}
.topbar{height:66px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:30}
.topbar .page-t{font-weight:700;font-size:16px;flex:0 0 auto;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--success);
  background:var(--success-soft);padding:6px 13px;border-radius:20px}
.topbar .status .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.topbar .chip{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-700);
  font-weight:700;padding:8px 14px;border-radius:12px;font-size:13px}
.topbar .icobtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer}
/* Centred so the page stays balanced when the sidebar is hidden (no dead space on one side). */
.main{padding:26px;max-width:1480px;width:100%;margin:0 auto}
/* ---------- breadcrumbs ---------- */
.breadcrumbs{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:8px;flex-wrap:wrap}
.breadcrumbs a{color:var(--muted);font-weight:500;text-decoration:none}
.breadcrumbs a:hover{color:var(--brand-600)}
.breadcrumbs .sep{color:var(--muted-2);font-size:14px;line-height:1}
.breadcrumbs span{color:var(--ink-2);font-weight:600}
.breadcrumbs span:last-child{color:var(--ink)}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:3px}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:22px}
/* one-line dashboard: all 6 tiles in a single row */
.stats.oneline{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.stats.oneline .statc{padding:16px}
.stats.oneline .statc .val{font-size:22px}
.stats.oneline .statc .ic{width:38px;height:38px;font-size:17px;border-radius:11px}
@media(max-width:1150px){.stats.oneline{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stats.oneline{grid-template-columns:repeat(2,1fr)}}
.statc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:6px;transition:.2s}
.statc:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.statc .top{display:flex;align-items:center;justify-content:space-between}
.statc .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px}
.statc .lbl{color:var(--muted);font-size:13px;font-weight:600}
.statc .val{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.statc .sub{font-size:12.5px;color:var(--muted-2);font-weight:500}
.ic-purple{background:var(--brand-soft);color:var(--brand-600)} .ic-green{background:var(--success-soft);color:var(--success)}
.ic-amber{background:var(--warn-soft);color:var(--warn)} .ic-red{background:var(--danger-soft);color:var(--danger)}
.ic-sky{background:var(--info-soft);color:var(--info)} .ic-slate{background:#eef1f6;color:#475569}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden}
.card .card-h{padding:17px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card .card-h h2{font-size:15px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px}
.card .card-h .sub{color:var(--muted);font-size:12px;font-weight:500}
.card .card-b{padding:20px}
.card .card-b.flush{padding:0}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:13px 18px;background:#fafbfd;color:var(--muted);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-2);white-space:nowrap}
tbody td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.12s}
tbody tr:hover{background:#fafbff}
td strong{color:var(--ink);font-weight:600}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.success,.badge.enabled{background:var(--success-soft);color:#0f9d6a}
.badge.pending{background:var(--info-soft);color:#0284c7}
.badge.failure,.badge.fail,.badge.failed,.badge.disabled{background:var(--danger-soft);color:#dc2626}
.badge.refund,.badge.refunded{background:#f5f0ff;color:#7c3aed}
.badge.pending-timeout{background:var(--warn-soft);color:#d97706}
.badge.info{background:var(--info-soft);color:#0284c7}
.badge.off{background:var(--warn-soft);color:#d97706}
.pill{display:inline-block;background:#eef2f7;color:var(--ink-2);border-radius:20px;padding:3px 11px;font-size:12px;font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;background:var(--brand-600);color:#fff;
  padding:10px 18px;border-radius:11px;font-weight:600;font-size:14px;transition:.15s;box-shadow:0 4px 12px rgba(79,70,229,.28)}
.btn:hover{background:var(--brand-700);box-shadow:0 6px 16px rgba(79,70,229,.36)}
.btn.green{background:var(--success);box-shadow:0 4px 12px rgba(16,185,129,.3)}.btn.green:hover{background:#0d9f6e}
.btn.dark{background:var(--ink);box-shadow:none}
.btn.ghost{background:var(--brand-soft);color:var(--brand-700);box-shadow:none}.btn.ghost:hover{background:#e0e7ff}
.btn.soft{background:#f1f5f9;color:var(--ink-2);box-shadow:none}.btn.soft:hover{background:#e8edf3}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px;box-shadow:none}
.btn.danger{background:var(--danger);box-shadow:none}
.iconbtn{border:1px solid var(--line);cursor:pointer;background:#fff;width:34px;height:34px;border-radius:10px;
  font-size:14px;color:var(--muted);display:inline-grid;place-items:center;transition:.14s;margin:1px}
.iconbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.iconbtn.g:hover{border-color:var(--success);color:var(--success);background:var(--success-soft)}
.iconbtn.o:hover{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.iconbtn.b:hover{border-color:var(--info);color:var(--info);background:var(--info-soft)}

/* Actions cell — the buttons sit LEFT inside their own bordered box.
   Right-aligned and unboxed they drifted with the column width, so the same
   button landed in a different place on every row and none of them was where
   the eye had learned to look. A fixed box means the position is the same on
   every row whatever else the row contains. */
.acts-cell{white-space:nowrap;text-align:left;width:1%}
.acts-box{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;
  padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--sidebar-2)}
.acts-box form{display:inline;margin:0}
.acts-box .iconbtn{width:32px;height:32px;border-radius:9px;background:#fff}

/* ============================================================
   ACTION TOOLBAR (Accounts > Actions column) — presentation only.
   Modern icon toolbar. Every button keeps its original handler.
   Own classes (.act-*) so no other page's .iconbtn is affected.
   ============================================================ */
.act-tb{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap}
.act-btn{
  --c:var(--muted);--cs:var(--line-2);
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  background:var(--surface,#fff);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--c);cursor:pointer;padding:0;position:relative;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,background .16s,border-color .16s,color .16s}
.act-btn svg{width:19px;height:19px;stroke-width:2}
.act-btn:hover{background:var(--cs);border-color:var(--c);color:var(--c);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,23,42,.14)}
.act-btn:focus-visible{outline:none;border-color:var(--c);color:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.act-btn:active{transform:translateY(0)}
/* professional tooltip */
.act-btn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);background:#0f172a;color:#fff;font-size:11.5px;font-weight:600;
  line-height:1;white-space:nowrap;padding:7px 9px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:30;box-shadow:0 6px 18px rgba(15,23,42,.22)}
.act-btn::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(4px);border:5px solid transparent;border-top-color:#0f172a;
  opacity:0;transition:opacity .15s,transform .15s;z-index:30}
.act-btn:hover::after,.act-btn:focus-visible::after,.act-btn:hover::before,.act-btn:focus-visible::before{
  opacity:1;transform:translateX(-50%) translateY(0)}
/* per-action colour (icon at rest + hover fill) */
.c-refresh{--c:#3b82f6;--cs:#eff6ff}
.c-login{--c:#f59e0b;--cs:#fff7ed}
.c-wallet{--c:#10b981;--cs:#ecfdf5}
.c-wreport{--c:#8b5cf6;--cs:#f5f3ff}
.c-treport{--c:#06b6d4;--cs:#ecfeff}
.c-history{--c:#6366f1;--cs:#eef2ff}
.c-edit{--c:#64748b;--cs:#f1f5f9}
.c-power-on{--c:#10b981;--cs:#ecfdf5}
.c-power-off{--c:#f59e0b;--cs:#fff7ed}
.c-delete{--c:#ef4444;--cs:#fef2f2}
/* "More" menu — mobile only */
.act-more{position:relative;display:none}
.act-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:196px;background:var(--surface,#fff);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 34px rgba(15,23,42,.16);
  padding:6px;z-index:40;display:none}
.act-menu.open{display:block}
.act-menu form{margin:0}
.act-mi{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--ink);background:none;border:none;cursor:pointer;text-align:left;text-decoration:none}
.act-mi svg{width:18px;height:18px;stroke-width:2;flex:0 0 18px}
.act-mi:hover{background:var(--line-2)}
.act-mi.del{color:var(--danger)}
.act-mi.del svg{stroke:var(--danger)}
/* tablet: everything visible, tighter gap */
@media (max-width:1180px){.act-tb{gap:6px}}
/* mobile: first five inline, rest in the More menu */
@media (max-width:820px){
  .act-tb .am-hide{display:none}
  .act-more{display:inline-block}
}
/* dark mode: keep hover tints readable */
@media (prefers-color-scheme:dark){
  .act-btn{background:var(--surface,#111827)}
  .c-refresh{--cs:#132033}.c-login{--cs:#2a2113}.c-wallet{--cs:#0c2a20}.c-wreport{--cs:#211a35}
  .c-treport{--cs:#0a2830}.c-history{--cs:#1a1b33}.c-edit{--cs:#1c2430}
  .c-power-on{--cs:#0c2a20}.c-power-off{--cs:#2a2113}.c-delete{--cs:#33131a}
}

/* A balance that changed under you should say so, once. */
@keyframes balMoved{from{background:#fef9c3}to{background:transparent}}
.bal-moved{animation:balMoved 1.2s ease-out}

/* ---- Bulk selection on the Lapu list ---- */
.selcol{width:36px;text-align:center;padding-left:14px!important;padding-right:0!important}
.selcol input{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
tr.row-sel{background:var(--brand-soft)}
tr.row-sel td{border-bottom-color:#dfe3fb}

.bulkbar{margin-bottom:12px;border:1px solid var(--brand);background:var(--brand-soft)}
.bulkbar .card-b{padding:12px 16px}
.bulkbar-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bulk-count{font-size:13px;font-weight:600;color:var(--ink-2);margin-right:4px}
.bulk-count b{font-size:16px;color:var(--brand-700)}
.bulk-track{height:6px;border-radius:999px;background:#fff;overflow:hidden;border:1px solid var(--line)}
.bulk-fill{height:100%;width:0;background:var(--brand);transition:width .2s ease}

/* Low balance — said before it costs a recharge, not after. */
.low-banner{margin-bottom:12px;border:1px solid var(--warn);background:var(--warn-soft)}
.low-banner .card-b{padding:11px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
tr.row-low td{background:#fffaf0}
tr.row-low.row-sel td{background:var(--brand-soft)}
.low-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.6px;background:var(--danger-soft);color:#dc2626}

/* ---- Super Admin navigation ----
   Grouped cards rather than a single wrapping row of buttons. A row that
   reflows at every window width never puts the same item in the same place
   twice, so nothing is ever found by muscle memory. */
.sa-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-bottom:16px}
.sa-group{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sa-group-t{font-size:11px;letter-spacing:.8px;font-weight:800;color:var(--muted);
  text-transform:uppercase;margin-bottom:8px}
.sa-group a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none}
.sa-group a:hover{background:var(--brand-soft);color:var(--brand-700)}
.sa-group a .ic{width:20px;text-align:center;font-size:14px}

/* ---- Profile: two columns ----
   Four full-width cards made a page nobody could take in at once. The grid
   collapses to a single column below 1100px, in the same order, so a phone
   loses nothing. */
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pf-col{min-width:0}                 /* or a long API key stretches the column */
.pf-col .card{margin-bottom:16px}
.pf-col .card:last-child{margin-bottom:0}
@media (max-width:1100px){ .pf-cols{grid-template-columns:1fr} }
.iconbtn.r:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}

/* ---------- forms ---------- */
form.grid{display:grid;gap:17px}
form.grid.two{grid-template-columns:1fr 1fr}
form.grid.three{grid-template-columns:1fr 1fr 1fr}
label{font-size:13px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:7px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:14px;
  background:#fff;color:var(--ink);transition:.15s;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
input[readonly]{background:#f8fafc;color:var(--muted)}
.field-hint{font-size:12px;color:var(--muted-2);margin-top:5px}
.inputgrp{display:flex;gap:9px}
.filterbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.filterbar>div{flex:1;min-width:140px}.filterbar .go{flex:0 0 auto}

.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px;font-weight:500;display:flex;gap:9px;align-items:center}
.alert.ok{background:var(--success-soft);color:#0f9d6a}
.alert.err{background:var(--danger-soft);color:#dc2626}
.muted{color:var(--muted)}.right{text-align:right}.center{text-align:center}

/* ---------- plan cards ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.plan:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.plan .ph{padding:18px 20px;color:#fff}
.plan .pb{padding:20px}
.plan ul{list-style:none;padding:0;margin:14px 0}
.plan li{padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.plan li::before{content:'✓';color:var(--success);font-weight:800}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 600px at 10% -10%,rgba(99,102,241,.25),transparent),
  radial-gradient(900px 500px at 110% 110%,rgba(139,92,246,.22),transparent),#0b1220;padding:20px}
.login-card{background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:40px;width:390px}
.login-card .mark{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--brand),var(--violet));
  display:grid;place-items:center;font-size:26px;margin:0 auto 16px;box-shadow:0 10px 24px rgba(99,102,241,.4)}
.login-card h1{text-align:center;font-size:22px;font-weight:800;margin:0}
.login-card p{text-align:center;color:var(--muted);margin:4px 0 24px;font-size:13.5px}

/* ---------- toast notifications (side, sequenced) ---------- */
.toasts{position:fixed;top:80px;right:22px;z-index:200;display:flex;flex-direction:column;gap:12px;width:330px;max-width:calc(100vw - 32px)}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:13px;
  box-shadow:var(--shadow-lg);padding:14px 15px;display:flex;gap:12px;align-items:flex-start;
  animation:toastin .28s cubic-bezier(.2,.8,.2,1)}
.toast.warn{border-left-color:var(--warn)} .toast.err{border-left-color:var(--danger)} .toast.ok{border-left-color:var(--success)}
.toast .tic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:0 0 auto;background:var(--warn-soft);color:var(--warn)}
.toast.err .tic{background:var(--danger-soft);color:var(--danger)} .toast.ok .tic{background:var(--success-soft);color:var(--success)}
.toast .tx{flex:1;min-width:0}
.toast .tt{font-weight:700;font-size:13.5px;color:var(--ink)}
.toast .tm{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.toast .tbtn{margin-top:9px;display:inline-flex;gap:8px}
.toast .x{cursor:pointer;color:var(--muted-2);font-size:16px;line-height:1;padding:2px;flex:0 0 auto}
.toast .x:hover{color:var(--ink)}
@keyframes toastin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* ---------- modal / overlay ---------- */
body.modal-open{overflow:hidden}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:translateY(16px) scale(.98);transition:transform .25s ease,opacity .2s ease;margin:16px}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #eef2f7;position:sticky;top:0;background:#fff;z-index:1;border-radius:16px 16px 0 0}
.modal-h h2{margin:0;font-size:17px;color:#0f172a}
.modal-h h2 .modal-acc{font-size:13px;font-weight:600;color:var(--muted);margin-left:10px}
.modal-h .x{background:none;border:none;font-size:24px;cursor:pointer;color:#64748b;padding:4px 8px;line-height:1;border-radius:6px;transition:.15s}
.modal-h .x:hover{background:#f1f5f9;color:#0f172a}
.modal-b{padding:20px 22px 22px;background:#fff}
.modal-b label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin-bottom:6px;letter-spacing:.02em}
.modal-b .field{margin-bottom:18px}
.modal-b .field:last-child{margin-bottom:0}

/* Gateway list - grid layout for consistent alignment */
.modal-b .gw-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-b .gw-opt{display:flex;align-items:center;gap:9px;padding:12px 13px;border:1.5px solid var(--line-2);border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:600;transition:all .15s;background:var(--bg-1)}
.modal-b .gw-opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.modal-b .gw-opt.selected{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.modal-b .gw-opt input[type=radio]{flex:0 0 auto;width:17px;height:17px;margin:0;accent-color:var(--brand);cursor:pointer}
.modal-b .gw-opt .gw-upi{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--brand);background:#fff;border:1.5px solid var(--brand-soft);border-radius:7px;padding:4px 7px}
.modal-b .gw-opt.selected .gw-upi{border-color:var(--brand)}
.modal-b .gw-opt .gw-name{flex:1;min-width:0}
/* Denomination selector (fixed amounts — no typing) */
.modal-b .denom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.modal-b .denom{padding:11px 6px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--bg-1);cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit;transition:all .13s}
.modal-b .denom:hover{border-color:var(--brand);background:var(--brand-soft)}
.modal-b .denom.selected{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,.28)}
.modal-b input[type=number]{width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:10px;font-size:14px;background:var(--bg-1);color:var(--ink-1);outline:none;transition:border .15s;box-sizing:border-box}
.modal-b input[type=number]:focus{border-color:var(--brand)}
.modal-b .btn{gap:6px}

/* QR display */
.modal-b .qr-box{text-align:center;padding:8px 0}
.modal-b .qr-box .order-info{font-size:13px;color:var(--ink-2);margin-bottom:12px}
.modal-b .qr-box img{max-width:220px;width:100%;height:auto;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.modal-b .qr-box .upi-text{font-size:12px;word-break:break-all;padding:10px;background:var(--bg-1);border-radius:8px;color:var(--ink-2);margin:8px 0}
/* Reports summary — solid coloured bars (enterprise style, not large cards) */
.rpt-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.rpt-box{border-radius:8px;padding:9px 14px;color:#fff}
.rpt-box .t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;opacity:.97}
.rpt-box .a{font-size:16px;font-weight:800;margin-top:2px}
.rpt-box.b-success{background:#1fa565}
.rpt-box.b-pending{background:#e0a012}
.rpt-box.b-failed{background:#d84a3b}
.rpt-box.b-refund{background:#2f88cf}
@media(max-width:800px){.rpt-boxes{grid-template-columns:repeat(2,1fr)}}

/* Add-Lapu service picker — radio buttons instead of a dropdown */
.svc-radios{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.svc-radio{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-weight:600;font-size:13px;transition:.14s;user-select:none}
.svc-radio:hover{border-color:var(--brand)}
.svc-radio input{accent-color:var(--brand);width:16px;height:16px;margin:0}
.svc-radio:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-700)}

/* Compact reports grid (#txnTable) — every column visible, minimum whitespace */
#txnTable{font-size:12px}
#txnTable thead th{padding:7px 5px;font-size:10px;letter-spacing:.04em}
#txnTable tbody td{padding:6px 5px}
/* boxed grid: outer border + vertical divider between every column (reports + robotics) */
#txnTable,#accountsTable{border:1px solid var(--line)}
#txnTable th,#txnTable td,#accountsTable th,#accountsTable td{border-right:1px solid var(--line)}
#txnTable th:last-child,#txnTable td:last-child,
#accountsTable th:last-child,#accountsTable td:last-child{border-right:none}
#txnTable thead th,#accountsTable thead th{border-bottom:1px solid var(--line)}
#txnTable .sub{font-size:10px;color:var(--muted);line-height:1.25;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* small coloured value badges inside cells */
.vb{display:inline-block;padding:2px 7px;border-radius:6px;font-weight:700;font-size:11.5px;line-height:1.5;white-space:nowrap}
.vb-amt{background:#eef2ff;color:#4338ca}
.vb-bal{background:#f1f5f9;color:var(--ink-2);font-weight:600}
.vb-margin{background:var(--success-soft);color:#0f9d6a}
.vb-pos{background:var(--success-soft);color:#0f9d6a}
.vb-neg{background:var(--danger-soft);color:#dc2626}
.vb-zero{background:#eef2f7;color:var(--muted)}
/* A value the platform RECONSTRUCTED from the operator's statement rather than
   recorded at the time. Dashed underline + a leading ~ so it can never be read
   as a measured figure. */
.vb-drv{border:1px dashed currentColor;opacity:.85}
/* Status pill — same size for every status in the report grid */
.badge.st-badge{width:74px;min-width:74px;padding:3px 5px;font-size:10px;justify-content:center;text-transform:uppercase;letter-spacing:.2px;box-sizing:border-box}
/* Action — compact icon buttons in a single row */
#txnTable .iconbtn{width:20px;height:20px;font-size:9.5px;border-radius:5px;margin:0}
#txnTable td.acts{white-space:nowrap}
/* Reports one-line filter bar */
.rpt-filter{display:flex;gap:8px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.rpt-filter input,.rpt-filter select{padding:8px 10px;border:1.5px solid var(--line-2);border-radius:9px;font-family:inherit;font-size:13px;background:#fff;width:auto;box-sizing:border-box}
.rpt-filter .grow{flex:1 1 160px;min-width:140px}
.rpt-filter select{flex:0 0 auto;width:150px}
.rpt-filter input[type=date]{flex:0 0 auto;width:145px}
.rpt-filter input[name=amount]{flex:0 0 auto;width:95px}
.rpt-filter .btn{flex:0 0 auto}
.rpt-filter .lnk{font-size:13px;font-weight:700;color:var(--brand);padding:6px 4px;text-decoration:none;flex:0 0 auto}
.rpt-filter .lnk:hover{text-decoration:underline}
@media(max-width:1100px){ .rpt-filter .grow{flex:1 1 100%} }
/* Operator logo in the Lapu list (falls back to the operator name if the file is missing) */
.op-logo{height:34px;max-width:104px;width:auto;object-fit:contain;display:block}
.modal-b .payurl-row{display:flex;gap:7px;align-items:center;margin-top:9px}
.modal-b .payurl-input{flex:1;min-width:0;font-size:12px;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:9px;background:var(--bg-1);color:var(--ink-2);font-family:inherit}
.modal-b .payurl-row .btn.sm{flex:0 0 auto}

/* Modal status messages */
.modal-msg{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.modal-msg.err{background:rgba(220,38,38,.08);color:var(--danger);border:1px solid rgba(220,38,38,.15)}
.modal-msg.ok{background:rgba(15,157,106,.08);color:var(--green);border:1px solid rgba(15,157,106,.15)}
.modal-msg.warn{background:rgba(245,158,11,.08);color:#b45309;border:1px solid rgba(245,158,11,.15)}
.modal-b .spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}

@media(max-width:600px){
  .modal{margin:12px;max-width:100%;border-radius:14px;max-height:85vh}
  .modal-h{padding:14px 16px}
  .modal-h h2{font-size:15px}
  .modal-b{padding:16px}
  .modal-b .gw-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .modal-b .gw-opt{padding:8px 10px;font-size:12px}
}

/* ---------- stack form (legacy compatibility) ---------- */
form.stack{display:grid;gap:17px}
.err{color:var(--danger);font-size:13.5px}

/* ---------- responsive improvements ---------- */
#mtoggle{display:none} /* sidebar is pinned on desktop — toggle only on mobile */
@media(max-width:900px){
  :root{--sb:0px}
  #mtoggle{display:grid}
  .sidebar{transform:translateX(-100%);transition:.25s;width:264px}.sidebar.open{transform:none}
  .content{margin-left:0}
  form.grid.two,form.grid.three{grid-template-columns:1fr}
  .stats.oneline{grid-template-columns:repeat(3,1fr)}
  .main{padding:18px}
  .topbar{padding:0 16px;gap:10px}
  .topbar .chip{font-size:12px;padding:6px 11px}
  .topbar .status .dot{width:6px;height:6px}
  .topbar .page-t{font-size:14px}
  .filterbar>div{min-width:100px}
}
@media(max-width:600px){
  .stats.oneline{grid-template-columns:repeat(2,1fr)}
  .stats.oneline .statc{padding:13px}
  .stats.oneline .statc .val{font-size:18px}
  .tblwrap table{font-size:12px}
  thead th{padding:10px 12px;font-size:10px}
  tbody td{padding:10px 12px}
  .main{padding:14px}
  .card .card-h{padding:14px 16px}
  .card .card-b{padding:16px}
  .page-head h1{font-size:19px}
  .login-card{width:auto;margin:0 16px;padding:28px}
}

/* ---------- print styles ---------- */
@media print{
  .sidebar,.topbar,.topbar .chip,.topbar .status,.iconbtn,.btn{display:none!important}
  .content{margin-left:0!important}
  .card,.statc{box-shadow:none!important;border:1px solid #ddd;break-inside:avoid}
  .main{padding:0}
  body{background:#fff;font-size:11px}
  .stats.oneline{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   Phase 1 — New Dashboard Styles
   ============================================================ */

/* ---------- Gradient stat cards ---------- */
.statc.clickable{cursor:pointer;position:relative;overflow:hidden}
.statc.clickable:active{transform:translateY(0)}
.statc.gradient-purple{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff;border:none}
.statc.gradient-purple .lbl,.statc.gradient-purple .sub{color:rgba(255,255,255,.75)}
.statc.gradient-purple .val{color:#fff}
.statc.gradient-dark{background:linear-gradient(135deg,#34495e,#2c3e50);color:#fff;border:none}
.statc.gradient-dark .lbl,.statc.gradient-dark .sub{color:rgba(255,255,255,.7)}
.statc.gradient-dark .val{color:#fff}
.statc.gradient-green{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;border:none}
.statc.gradient-green .lbl,.statc.gradient-green .sub{color:rgba(255,255,255,.75)}
.statc.gradient-green .val{color:#fff}
.statc.gradient-yellow{background:linear-gradient(135deg,#f1c40f,#f39c12);color:#fff;border:none}
.statc.gradient-yellow .lbl,.statc.gradient-yellow .sub{color:rgba(255,255,255,.8)}
.statc.gradient-yellow .val{color:#fff}
.statc.gradient-red{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none}
.statc.gradient-red .lbl,.statc.gradient-red .sub{color:rgba(255,255,255,.75)}
.statc.gradient-red .val{color:#fff}
.statc.gradient-blue{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none}
.statc.gradient-blue .lbl,.statc.gradient-blue .sub{color:rgba(255,255,255,.75)}
.statc.gradient-blue .val{color:#fff}
.statc.clickable::after{content:'→';position:absolute;right:14px;bottom:10px;font-size:16px;opacity:0;transition:.2s}
.statc.clickable:hover::after{opacity:.5;right:12px}
.statc a{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px;height:100%}
.statc a:hover{color:inherit}

/* ---------- Sync status indicator ---------- */
.sync-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:500}
.sync-status .dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex:0 0 auto}
.sync-status .dot.pending{background:var(--warn);animation:pulse 1.2s infinite}
.sync-status .dot.err{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Operator grid ---------- */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:18px}
.op-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 16px;transition:.15s;cursor:pointer;text-decoration:none;color:var(--ink)}
.op-card:hover{box-shadow:var(--shadow);border-color:var(--brand);transform:translateY(-2px)}
.op-card .op-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;flex:0 0 auto}
.op-card .op-icon.crowd{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.op-card .op-icon.pay2earn{background:linear-gradient(135deg,#0ea5e9,#06b6d4)}
.op-card .op-icon.pay4u{background:linear-gradient(135deg,#10b981,#059669)}
.op-card .op-icon.icon{background:linear-gradient(135deg,#f59e0b,#d97706)}
.op-card .op-icon.dp4u{background:linear-gradient(135deg,#ec4899,#db2777)}
.op-card .op-info{flex:1;min-width:0}
.op-card .op-name{font-weight:700;font-size:14px;color:var(--ink)}
.op-card .op-meta{font-size:12px;color:var(--muted);margin-top:1px}
.op-card .op-bal{font-weight:700;font-size:15px;color:var(--success)}
.op-card .op-count{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-700);padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700}

/* ---------- Daywise table ---------- */
.daywise-table{font-size:13px}
.daywise-table thead th{font-size:10.5px;padding:11px 14px}
.daywise-table tbody td{padding:12px 14px}
.daywise-table .date-link{color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer}
.daywise-table .date-link:hover{color:var(--brand)}
.daywise-table .num{font-variant-numeric:tabular-nums;text-align:right}
.daywise-table .s{color:#0f9d6a;font-weight:600}
.daywise-table .p{color:#d97706;font-weight:600}
.daywise-table .f{color:#dc2626;font-weight:600}
.daywise-table .r{color:#7c3aed;font-weight:600}
.daywise-row{cursor:pointer;transition:.1s}
.daywise-row:hover{background:#f0f4ff!important}

/* ---------- Collapsible sidebar submenu ---------- */
.sidebar .nav .has-sub{position:relative}
.sidebar .nav .has-sub>.sub-toggle{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;color:var(--sidebar-ink);font-weight:500;font-size:14px;margin-bottom:2px;transition:.15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.sidebar .nav .has-sub>.sub-toggle:hover{background:var(--sidebar-active);color:var(--ink)}
.sidebar .nav .has-sub>.sub-toggle .arrow{margin-left:auto;font-size:10px;transition:.2s;opacity:.5}
.sidebar .nav .has-sub.open>.sub-toggle .arrow{transform:rotate(90deg)}
.sidebar .nav .sub-list{max-height:0;overflow:hidden;transition:max-height .25s ease;padding-left:8px}
.sidebar .nav .has-sub.open>.sub-list{max-height:400px}
.sidebar .nav .sub-list a{padding:8px 13px 8px 36px;font-size:13px;margin-bottom:1px;font-weight:500}
.sidebar .nav .sub-list a .ic{width:16px;font-size:13px}

/* ---------- Navbar dropdowns ---------- */
.topbar .dropdown{position:relative;display:inline-flex}
.topbar .dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);min-width:180px;padding:6px;display:none;z-index:100}
.topbar .dropdown.open .dropdown-menu{display:block}
.topbar .dropdown-menu a{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:9px;color:var(--ink-2);font-size:13px;font-weight:500;transition:.1s}
.topbar .dropdown-menu a:hover{background:var(--sidebar-active);color:var(--ink)}
.topbar .dropdown-menu .divider{height:1px;background:var(--line-2);margin:5px 8px}
.topbar .dropdown-menu .ic{width:18px;text-align:center;font-size:14px;opacity:.65}
.topbar .dropdown-trigger{background:none;border:none;cursor:pointer;padding:6px;border-radius:10px;display:grid;place-items:center;color:var(--muted);position:relative;transition:.14s}
.topbar .dropdown-trigger:hover{background:var(--sidebar-active);color:var(--ink)}
.topbar .dropdown-trigger .badge-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.topbar .avatar-trigger{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:none;font-family:inherit;font-size:13px;color:var(--ink-2);transition:.14s}
.topbar .avatar-trigger:hover{background:var(--sidebar-active);border-color:var(--brand)}
.topbar .avatar-trigger .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}

/* ---------- Marquee ---------- */
.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--success);background:var(--success-soft);padding:6px 13px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:pulse 2.4s infinite}

/* ---------- Chart card ---------- */
.chart-wrap{position:relative;height:260px}
.chart-wrap canvas{width:100%!important;height:100%!important}

/* ---------- Card header icon ---------- */
.card-h .h-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.card-h .h-icon.green{background:var(--success-soft);color:var(--success)}
.card-h .h-icon.blue{background:var(--info-soft);color:var(--info)}
.card-h .h-icon.purple{background:var(--brand-soft);color:var(--brand-600)}
.card-h .h-icon.amber{background:var(--warn-soft);color:var(--warn)}

/* ---------- Drill-down links in tables ---------- */
.drill-link{color:var(--brand-600);font-weight:500;text-decoration:none;border-bottom:1px dashed var(--brand-soft);transition:.1s}
.drill-link:hover{color:var(--brand-700);border-bottom-color:var(--brand-600)}

/* ---------- Session Health indicators ---------- */
.health-dot{display:inline-block;width:10px;height:10px;border-radius:50%;cursor:help}
.health-dot.healthy{background:#0f9d6a;box-shadow:0 0 6px rgba(15,157,106,.5)}
.health-dot.warning{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.5)}
.health-dot.critical{background:#dc2626;box-shadow:0 0 6px rgba(220,38,38,.5)}
.health-dot.offline{background:#94a3b8;box-shadow:0 0 6px rgba(148,163,184,.5)}
.health-summary{display:flex;gap:16px;flex-wrap:wrap}
.health-stat{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:10px;text-decoration:none;background:var(--bg);border:1px solid var(--line-2);transition:.15s;flex:1;min-width:120px}
.health-stat:hover{border-color:var(--ink-2)}
.health-stat .h-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.health-stat.healthy .h-dot{background:#0f9d6a}
.health-stat.warning .h-dot{background:#f59e0b}
.health-stat.critical .h-dot{background:#dc2626}
.health-stat.offline .h-dot{background:#94a3b8}
.health-stat .h-val{font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.health-stat .h-lbl{font-size:12px;color:var(--ink-2);margin-top:2px}

/* ---------- Responsive submenu ---------- */
@media(max-width:900px){
  .sidebar .nav .sub-list a{padding-left:44px}
  .status-pill{display:none}
}

/* ---------- Transaction Detail page ---------- */
.txn-detail .balance-flow{display:flex;align-items:center;gap:16px;padding:16px 0;flex-wrap:wrap}
.txn-detail .balance-flow .arrow{font-size:20px;color:var(--muted-2)}
@media(max-width:600px){
  .txn-detail .stats{grid-template-columns:repeat(2,1fr)!important}
  .txn-detail .stats .statc{padding:12px}
}

/* ---------- Txn Modal (wider variant) ---------- */
.txn-modal{max-width:700px!important}

/* ---------- Notification badge count ---------- */
.topbar .dropdown-trigger .badge-dot.count{width:auto;height:16px;min-width:16px;font-size:9px;line-height:16px;text-align:center;padding:0 4px;top:2px;right:2px;background:var(--danger);color:#fff;border:none;font-weight:700}
#notifDropdown .dropdown-menu{max-height:480px;overflow:hidden}
#notifList a:last-child{border-bottom:none!important}
.txn-modal .stats{grid-template-columns:repeat(4,1fr)!important;gap:10px}
.txn-modal .stats .statc{padding:12px;border-radius:11px}
.txn-modal .stats .statc .val{font-size:17px}
.txn-modal .stats .statc .lbl{font-size:10.5px}
@media(max-width:600px){
  .txn-modal .stats{grid-template-columns:repeat(2,1fr)!important}
  .txn-modal{max-width:100%!important;margin:8px;border-radius:12px;max-height:90vh}
  .txn-modal .modal-h{padding:12px 14px}
  .txn-modal .modal-b{padding:12px 14px 16px}
}

/* ---------- Timeline / Raw data ---------- */
details summary{outline:none;padding:4px 0}
details summary::-webkit-details-marker{display:none}
pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all;font-size:12px}
.card-b details[open] summary{margin-bottom:6px}

/* ---------- Wallet Ledger ---------- */
.stat-line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.stat-line:last-child{border-bottom:none}
.stat-line .lbl{color:var(--muted);font-weight:500}
.stat-line .val{font-weight:600;color:var(--ink);text-align:right}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--hover-bg)!important}
a.sort-link{color:var(--ink);text-decoration:none;font-weight:600;font-size:12px}
a.sort-link:hover{color:var(--accent)}

/* Recharge Routing grid — providers across, settings down.
   Four separate screens meant four page loads to answer "what is pay4u on?",
   and a provider you had not opened was one you had not checked. */
.rt-grid{width:100%;border-collapse:collapse;font-size:13px}
.rt-grid th,.rt-grid td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.rt-grid thead th{text-align:left;font-weight:600;background:var(--bg-2);white-space:nowrap}
.rt-grid thead th.rt-empty{opacity:.55}          /* a provider with no Lapus */
.rt-grid .rt-meta{font-weight:400;font-size:11px;opacity:.7;margin-top:2px}
.rt-grid .rt-lab{width:230px;min-width:190px;background:var(--bg-2);font-weight:500}
.rt-grid .rt-hint{font-weight:400;font-size:11px;opacity:.68;margin-top:3px;line-height:1.5}
.rt-grid input,.rt-grid select{width:100%;min-width:96px;box-sizing:border-box}
.rt-grid tr.rt-eff td{background:var(--bg-2);font-size:11.5px;line-height:1.65;opacity:.9}
.rt-grid tr.rt-eff .rt-lab{font-weight:600}
@media (max-width:900px){
  .rt-grid .rt-lab{width:150px;min-width:130px}
  .rt-grid .rt-hint{display:none}               /* the label alone still reads */
}

/* Finance colours. TWO different questions, one palette:
     .used-comm  — did we earn this Lapu's configured rate? (profit)
     .diff-val   — does the day's arithmetic reconcile?     (accounting)
   Never the same number wearing two meanings. Colour is paired with text in
   both places, so it is readable without relying on colour alone. */
.fin-good{color:#1b8a4b;font-weight:600}
.fin-warn{color:#b5820a;font-weight:600}
.fin-bad {color:#c0392b;font-weight:600}
.fin-none{color:var(--muted)}
.used-comm{display:inline-block;margin-top:2px}

/* ===========================================================================
   DASHBOARD REDESIGN (UPDATE30) — scoped under .dashx, PURE ADDITION.
   Reuses the app's own tokens so it matches every page in light and dark.
   Nothing above this is touched; nothing here leaks off the dashboard because
   every selector is .dashx-scoped.
   =========================================================================== */
.dashx{display:flex;flex-direction:column;gap:18px}
.dashx .card{border-radius:var(--radius);box-shadow:var(--shadow);margin:0}
.dashx .card-h h2{font-size:15px;font-weight:700;letter-spacing:-.01em}

/* KPI cards — real value + real vs-yesterday trend + real sparkline */
.dashx .dx-kpis{margin-bottom:0;gap:15px}
.dashx .dx-kpi{position:relative;overflow:hidden;min-height:150px;padding:16px 17px;border-radius:var(--radius);display:flex;flex-direction:column;gap:7px;transition:transform .18s,box-shadow .18s}
.dashx .dx-kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dashx .dx-kpi .val{font-size:26px}
.dashx .dx-trend{font-size:11.5px;font-weight:700;opacity:.95;z-index:1}
.dashx .dx-trend em{font-style:normal;font-weight:500;opacity:.82}
.dashx .dx-spark{position:absolute;left:0;right:0;bottom:0;height:42px;width:100%;opacity:.5;pointer-events:none}

/* Session Health */
.dashx .dx-sh{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:center}
.dashx .dx-shc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dashx .dx-shc{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);transition:transform .16s,box-shadow .16s}
.dashx .dx-shc:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.dashx .dx-shc-i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px;font-weight:700}
.dashx .dx-shc-n{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.dashx .dx-shc-l{font-size:12px;font-weight:600;color:var(--muted)}
.dashx .dx-shc.h{background:var(--success-soft)}
.dashx .dx-shc.h .dx-shc-i{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.dashx .dx-shc.w{background:var(--warn-soft)}
.dashx .dx-shc.w .dx-shc-i{background:color-mix(in srgb,var(--warn) 18%,transparent);color:#a56100}
.dashx .dx-shc.c{background:var(--danger-soft)}
.dashx .dx-shc.c .dx-shc-i{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.dashx .dx-shc.o{background:var(--sidebar-2)}
.dashx .dx-shc.o .dx-shc-i{background:color-mix(in srgb,var(--muted-2) 20%,transparent);color:var(--muted)}
.dashx .dx-shfoot{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.dashx .dx-shf{display:flex;flex-direction:column;gap:2px}
.dashx .dx-shf small{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.dashx .dx-shf b{font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums}
.dashx .dx-donut-wrap{display:flex;align-items:center;gap:18px}
.dashx .dx-donut{position:relative;width:150px;height:150px;flex:0 0 auto}
.dashx .dx-donut svg{transform:rotate(-90deg)}
.dashx .dx-donut-cen{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dashx .dx-donut-cen b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.dashx .dx-donut-cen small{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.dashx .dx-legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px;flex:1}
.dashx .dx-lg{display:flex;align-items:center;gap:8px}
.dashx .dx-lg .d{width:9px;height:9px;border-radius:3px}
.dashx .dx-lg .nm{color:var(--ink-2);font-weight:500}
.dashx .dx-lg .vv{margin-left:auto;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dashx .dx-lg .pc{color:var(--muted);font-size:11.5px;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:820px){.dashx .dx-sh{grid-template-columns:1fr}.dashx .dx-donut-wrap{justify-content:center}}
@media(max-width:560px){.dashx .dx-shc-row{grid-template-columns:1fr 1fr}.dashx .dx-shfoot{grid-template-columns:1fr 1fr}}

/* Operator Wise */
.dashx .dx-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.dashx .dx-op{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:12px;transition:transform .18s,box-shadow .18s,border-color .18s}
.dashx .dx-op:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.dashx .dx-op-r1{display:flex;align-items:center;gap:11px}
.dashx .dx-op-lg{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;flex:0 0 auto}
.dashx .dx-op-id{min-width:0}
.dashx .dx-op-nm{font-weight:650;font-size:13.5px}
.dashx .dx-op-bal{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--success)}
.dashx .dx-op-qa{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted-2);font-size:14px}
.dashx .dx-op:hover .dx-op-qa{color:var(--brand);border-color:var(--brand)}
.dashx .dx-op-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dashx .dx-op-cols2{grid-template-columns:1fr 1fr;padding-top:2px}
.dashx .dx-op-col{display:flex;flex-direction:column;gap:1px;min-width:0}
.dashx .dx-op-col small{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashx .dx-op-col b{font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.dashx .dx-op-col b.g{color:var(--success)}
.dashx .dx-op-col b.r{color:var(--danger)}
.dashx .dx-op-pbar{height:7px;border-radius:20px;background:var(--line);overflow:hidden}
.dashx .dx-op-pbar>i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--success),#4ade80)}
.dashx .dx-op-foot{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:1150px){.dashx .dx-ops{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dashx .dx-ops{grid-template-columns:1fr}}

/* bottom trio */
.dashx .dx-trio{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
@media(max-width:1150px){.dashx .dx-trio{grid-template-columns:1fr}}
.dashx .dx-clink{margin-left:auto;color:var(--brand-600);font-weight:600;font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:9px}
.dashx .dx-clink:hover{border-color:var(--brand)}
.dashx .dx-rtable{width:100%;border-collapse:collapse}
.dashx .dx-rtable th{text-align:left;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 14px 10px}
.dashx .dx-rtable th.num,.dashx .dx-rtable td.num{text-align:right}
.dashx .dx-rtable td{padding:11px 14px;border-top:1px solid var(--line);font-size:12.5px}
.dashx .dx-rtable tbody tr:hover{background:var(--sidebar-2)}
.dashx .dx-osq{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.dashx .dx-sq{width:22px;height:22px;border-radius:6px;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--brand)}
.dashx .dx-sq.pay2earn{background:#2563eb}
.dashx .dx-sq.pay4u{background:#16a34a}
.dashx .dx-sq.crowd{background:#6366f1}
.dashx .dx-sq.moon{background:#f59e0b}
.dashx .dx-sq.icon{background:#8b5cf6}
.dashx .dx-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:capitalize}
.dashx .dx-chip .d{width:6px;height:6px;border-radius:50%}
.dashx .dx-chip.s{color:var(--success);background:var(--success-soft)}
.dashx .dx-chip.s .d{background:var(--success)}
.dashx .dx-chip.p{color:#a56100;background:var(--warn-soft)}
.dashx .dx-chip.p .d{background:var(--warn)}
.dashx .dx-chip.f{color:var(--danger);background:var(--danger-soft)}
.dashx .dx-chip.f .d{background:var(--danger)}
.dashx .dx-chip.b{color:var(--info);background:var(--info-soft)}
.dashx .dx-chip.b .d{background:var(--info)}

.dashx .dx-feed{display:flex;flex-direction:column}
.dashx .dx-fi{display:flex;align-items:center;gap:11px;padding:10px 4px;border-top:1px solid var(--line-2);color:var(--ink)}
.dashx .dx-fi:first-child{border-top:0}
.dashx .dx-fi:hover{background:var(--sidebar-2)}
.dashx .dx-fi-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;font-size:14px;font-weight:700}
.dashx .dx-fi-ic.s{background:var(--success-soft);color:var(--success)}
.dashx .dx-fi-ic.f{background:var(--danger-soft);color:var(--danger)}
.dashx .dx-fi-ic.p{background:var(--warn-soft);color:#a56100}
.dashx .dx-fi-ic.b{background:var(--info-soft);color:var(--info)}
.dashx .dx-fi-b{min-width:0}
.dashx .dx-fi-t{font-size:12.5px;font-weight:600}
.dashx .dx-fi-m{color:var(--muted);font-size:11.5px;margin-top:1px;font-variant-numeric:tabular-nums}
.dashx .dx-fi-w{margin-left:auto;color:var(--muted-2);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}

.dashx .dx-perf{display:flex;flex-direction:column;gap:12px}
.dashx .dx-pc{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;background:var(--sidebar-2)}
.dashx .dx-pc-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dashx .dx-pt{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dashx .dx-pv{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dashx .dx-pmeta{font-size:11.5px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.dashx .dx-pbar{height:6px;border-radius:20px;background:var(--line);overflow:hidden;margin-top:10px}
.dashx .dx-pbar>i{display:block;height:100%;border-radius:20px}

.dashx .dx-qa{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.dashx .dx-qbtn{display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:12px;color:var(--ink-2);transition:transform .16s,box-shadow .16s,border-color .16s,color .16s}
.dashx .dx-qbtn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand);color:var(--brand-700)}
.dashx .dx-qi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--brand-soft);color:var(--brand-700)}
@media(max-width:1150px){.dashx .dx-qa{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.dashx .dx-qa{grid-template-columns:repeat(2,1fr)}}

@media (prefers-color-scheme:dark){
  .dashx .dx-shc.o,.dashx .dx-pc,.dashx .dx-qbtn,.dashx .dx-fi:hover,.dashx .dx-rtable tbody tr:hover{background:var(--surface,#111827)}
  .dashx .dx-shc-n,.dashx .dx-donut-cen b,.dashx .dx-op-col b{color:#e5e7eb}
}
/* === end DASHBOARD REDESIGN (UPDATE30) === */

/* ===========================================================================
   ACCOUNTS / LAPU LIST REDESIGN (UPDATE31) — scoped, PURE ADDITION.
   Only the accounts page (the one with .acctx) is touched, via :has() — no
   shared partial edited. Sticky chrome (summary + filters + table header stay);
   ONLY the table body scrolls. Every id/handler/onclick is unchanged.
   =========================================================================== */

/* Turn the accounts page into a non-scrolling shell; only the table scrolls. */
body:has(.acctx) .content{height:100vh;overflow:hidden}
body:has(.acctx) .main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:16px 22px}

.acctx{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;width:100%}
.acctx > *{flex:0 0 auto}                 /* stats, bulkbar, banners keep natural height */
.acctx > .acctx-tcard{flex:1 1 auto;min-height:0}

/* the one card that holds filters + table */
.acctx .acctx-tcard{display:flex;flex-direction:column;overflow:hidden;margin:0}
.acctx .acctx-filterb{flex:0 0 auto}
.acctx .acctx-tscroll{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;padding:0}
.acctx .acctx-tscroll .tblwrap{flex:1 1 auto;min-height:0;overflow:auto;width:100%}

/* sticky table header inside the scroll region */
.acctx #accountsTable thead th{position:sticky;top:0;z-index:3;background:var(--sidebar-2,#f6f8fc);
  box-shadow:inset 0 -1px 0 var(--line,#e8edf3)}

/* filter bar — one row, search grows, buttons sit at the end near it */
.acctx .filterbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:nowrap;overflow-x:auto}
.acctx .filterbar > div{flex:0 0 auto;min-width:0}
.acctx .filterbar .acctx-search{flex:1 1 auto;min-width:150px}
.acctx .filterbar .acctx-search input{width:100%;max-width:none}
.acctx .filterbar label{white-space:nowrap}
.acctx .acctx-btnrow{display:flex;gap:8px}
.acctx .acctx-btnrow .btn{white-space:nowrap}

/* summary cards — a touch of premium: hover lift, tighter, tabular numbers */
.acctx .lapu-stat{transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.06))}
.acctx .lapu-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow,0 8px 24px rgba(15,23,42,.08))}

/* compact, legible rows + clear hover */
.acctx #accountsTable tbody td{padding:11px 14px}
.acctx #accountsTable tbody tr{transition:background .12s}
.acctx #accountsTable tbody tr:hover{background:var(--sidebar-2,#f6f8fc)}
/* === end ACCOUNTS REDESIGN (UPDATE31) === */

/* --- UPDATE32: filter-row polish + calmer row colours (scoped, pure addition) --- */
/* Sample / Bulk as coloured icon-only buttons; Add Lapu keeps its plus + label. */
.acctx .acctx-ibtn{width:38px;height:38px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2,#f9fbfd);display:grid;place-items:center;cursor:pointer;font-size:16px;
  position:relative;text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s,color .14s,border-color .14s}
.acctx .acctx-ibtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.08))}
.acctx .acctx-ibtn[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%);background:var(--ink,#0f172a);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;
  border-radius:7px;white-space:nowrap;z-index:6}
.acctx .ib-sample{color:var(--success,#16a34a);border-color:color-mix(in srgb,var(--success,#16a34a) 35%,var(--line))}
.acctx .ib-sample:hover{background:var(--success,#16a34a);color:#fff;border-color:var(--success,#16a34a)}
.acctx .ib-bulk{color:var(--info,#0ea5e9);border-color:color-mix(in srgb,var(--info,#0ea5e9) 35%,var(--line))}
.acctx .ib-bulk:hover{background:var(--info,#0ea5e9);color:#fff;border-color:var(--info,#0ea5e9)}
.acctx .acctx-selby{min-width:130px}

/* LOW-BALANCE ROWS: a calm light blue instead of the old yellow. The red "LOW"
   tag still flags the balance; the row just no longer shouts. Overrides the
   frozen baseline by specificity — that stylesheet is not edited. */
.acctx #accountsTable tr.row-low td{background:var(--info-soft,#e6f6fe)}
.acctx #accountsTable tr.row-low.row-sel td{background:var(--brand-soft,#eef2ff)}

/* A BALANCE JUST ADDED flashes light GREEN (was yellow) — green reads as "money
   in". The class lands on the balance cell; here it flashes green and settles. */
.acctx #accountsTable td.bal-moved{animation:acctxBalAdded 1.3s ease-out}
@keyframes acctxBalAdded{from{background:var(--success-soft,#dcfce7)}to{background:transparent}}
/* === end UPDATE32 === */

/* --- UPDATE33: shorter filter row (uniform box + font), lighter low-blue,
       colour-coded action icons (scoped, pure addition) --- */

/* One short line. Labels are dropped (every control is self-describing via its
   placeholder / first option), and every control shares ONE height and font so
   the row reads as a single band instead of a tall form. */
.acctx .filterbar{align-items:center}
.acctx .filterbar label{display:none}
.acctx .filterbar > div{display:flex;align-items:center}
.acctx .filterbar .inp,
.acctx .filterbar input,
.acctx .filterbar select{height:38px;font-size:13px;border-radius:10px}
.acctx .filterbar .acctx-search input{height:38px}

/* LOW-BALANCE ROWS — even lighter blue than before (a whisper, not a wash). */
.acctx #accountsTable tr.row-low td{background:color-mix(in srgb,var(--info) 4%,var(--surface))}
.acctx #accountsTable tr.row-low.row-sel td{background:var(--brand-soft,#eef2ff)}

/* ACTION ICONS — a deliberate three-tone set, not three of the same button:
   Add Lapu is the primary CREATE action, so it is the only FILLED one and reads
   first. Sample (get the template) is green; Bulk (send many up) is sky. All the
   same 38px square as the inputs beside them, so the row stays one clean band. */
.acctx .acctx-ibtn{width:38px;height:38px;border-radius:10px}
.acctx .ib-sample{color:var(--success,#16a34a);border-color:color-mix(in srgb,var(--success,#16a34a) 30%,var(--line))}
.acctx .ib-sample:hover{background:var(--success,#16a34a);color:#fff;border-color:var(--success,#16a34a)}
.acctx .ib-bulk{color:var(--info,#0ea5e9);border-color:color-mix(in srgb,var(--info,#0ea5e9) 30%,var(--line))}
.acctx .ib-bulk:hover{background:var(--info,#0ea5e9);color:#fff;border-color:var(--info,#0ea5e9)}
.acctx .ib-add{background:linear-gradient(135deg,var(--brand,#6366f1),var(--violet,#8b5cf6));color:#fff;border:none;
  font-size:20px;line-height:1;box-shadow:0 6px 14px -6px var(--brand,#6366f1)}
.acctx .ib-add:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 10px 20px -8px var(--brand,#6366f1)}
/* === end UPDATE33 === */

/* --- UPDATE35: bulk Enable/Disable moved to filter row as green/red icons --- */
.acctx .ib-enable{color:var(--success,#16a34a);border-color:color-mix(in srgb,var(--success,#16a34a) 30%,var(--line))}
.acctx .ib-enable:hover{background:var(--success,#16a34a);color:#fff;border-color:var(--success,#16a34a)}
.acctx .ib-disable{color:var(--danger,#ef4444);border-color:color-mix(in srgb,var(--danger,#ef4444) 30%,var(--line))}
.acctx .ib-disable:hover{background:var(--danger,#ef4444);color:#fff;border-color:var(--danger,#ef4444)}
/* === end UPDATE35 === */

/* --- UPDATE35b: bulk Refresh + Login also as filter-row icons (info/amber) --- */
.acctx .ib-refresh{color:var(--info,#0ea5e9);border-color:color-mix(in srgb,var(--info,#0ea5e9) 30%,var(--line))}
.acctx .ib-refresh:hover{background:var(--info,#0ea5e9);color:#fff;border-color:var(--info,#0ea5e9)}
.acctx .ib-login{color:#c98a00;border-color:color-mix(in srgb,var(--warn,#f59e0b) 32%,var(--line))}
.acctx .ib-login:hover{background:var(--warn,#f59e0b);color:#fff;border-color:var(--warn,#f59e0b)}
.acctx .acctx-ibtn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* === end UPDATE35b === */

/* ── UPDATE39a: Transaction Report action toolbar — Lucide icons, premium ──
   PURE ADDITION. Own classes (.txnact) so no other page's buttons are touched.
   Every click handler, reqid and onclick attribute in reports.ejs is unchanged
   — this is presentation only. 40x40 button, 18px icon, radius 12, white bg,
   1px #E5E7EB, soft shadow, hover lift + icon-matched soft background, 8px gap,
   focus ring for keyboard use, native title tooltip on every button. */
.txnacts{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.txnact{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid #E5E7EB;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#64748b;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease,color .12s ease}
.txnact svg{width:18px;height:18px;display:block}
.txnact:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.14)}
.txnact:active{transform:translateY(0)}
.txnact:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.txnact.a-view{color:#4f46e5}      .txnact.a-view:hover{background:#eef2ff;border-color:#c7d2fe;color:#4f46e5}
.txnact.a-success{color:#16a34a}   .txnact.a-success:hover{background:#ecfdf5;border-color:#bbf7d0;color:#16a34a}
.txnact.a-fail{color:#dc2626}      .txnact.a-fail:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.txnact.a-refresh{color:#2563eb}   .txnact.a-refresh:hover{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}
.txnact.a-complaint{color:#ea580c} .txnact.a-complaint:hover{background:#fff7ed;border-color:#fed7aa;color:#ea580c}
.txnact.a-callback{color:#9333ea}  .txnact.a-callback:hover{background:#faf5ff;border-color:#e9d5ff;color:#9333ea}
.txnact.a-api{color:#0891b2}       .txnact.a-api:hover{background:#ecfeff;border-color:#a5f3fc;color:#0891b2}
/* === end UPDATE39a === */

/* ── UPDATE39b: hide the sidebar on desktop too ──
   The ☰ button already opened/closed the sidebar on narrow screens; on the
   wide layout it did nothing. Now on desktop it collapses the fixed sidebar and
   the content reflows to full width (choice remembered in localStorage). Mobile
   keeps its existing .open behaviour untouched. PURE ADDITION. */
.sidebar{transition:transform .25s ease}
body.sb-hidden .sidebar{transform:translateX(-100%)}
body.sb-hidden .content{margin-left:0}
/* === end UPDATE39b === */

/* ── UPDATE41: operator-notification AUDIT highlight on the number cell ──
   The number is tinted by what the operator's PUSH claimed — green=success,
   yellow=pending, red=failed/refund — so a human can eyeball push-vs-record for
   a few days before the push is ever trusted. Left bar so it reads even when the
   row is also selected/striped. PURE ADDITION, own classes. */
td.notif-g{background:rgba(22,163,74,.10);box-shadow:inset 3px 0 0 #16a34a}
td.notif-y{background:rgba(245,158,11,.13);box-shadow:inset 3px 0 0 #f59e0b}
td.notif-r{background:rgba(220,38,38,.10);box-shadow:inset 3px 0 0 #dc2626}
.notif-id{color:#0891b2;font-weight:600}
/* === end UPDATE41 === */

/* ── UPDATE42: Reports — fewer columns (Amt+Margin stacked, Op/Cl Bal stacked,
   Msg folded into the action toolbar) so the font can be bigger and the whole
   row reads without side-scrolling. PURE ADDITION, scoped to #txnTable. */
#txnTable{font-size:13.5px}
#txnTable td, #txnTable th{padding-top:9px;padding-bottom:9px}
#txnTable .vb-amt{font-size:15px}
#txnTable .vb-mini{font-size:11.5px;font-weight:600}
#txnTable .balcell div{line-height:1.35;white-space:nowrap}
#txnTable .balcell .bl-lbl{display:inline-block;width:14px;color:var(--muted-2,#9aa4b2);font-size:10px;font-weight:700}
.txnact.a-msg{color:#64748b}
.txnact.a-msg:hover{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
/* === end UPDATE42 === */

/* ═══ UPDATE49: Transaction Report — premium enterprise (scoped .rptx) ═══
   PURE ADDITION (first 701 lines byte-for-byte). Restyles the EXISTING markup —
   no id/class/handler/route changed. Sticky chrome (breadcrumb, KPI cards,
   filter, table header) + only the rows scroll; the page itself never scrolls. */

/* — sticky page shell (same mechanism as the accounts page) — */
body:has(.rptx) .content{height:100vh;overflow:hidden}
body:has(.rptx) .main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:16px 24px 18px;gap:0}
.rptx{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;width:100%}
.rptx > *{flex:0 0 auto}
.rptx > .rptx-tcard{flex:1 1 auto;min-height:0}
.rptx .rptx-tcard{display:flex;flex-direction:column;overflow:hidden;margin:0;border-radius:14px}
.rptx .rptx-tcard > .card-b{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;padding:0}
.rptx .rptx-tcard .tblwrap{flex:1 1 auto;min-height:0;overflow:auto;width:100%}
.rptx .rptx-tcard .pagination,.rptx .rptx-tcard > .pg-wrap{flex:0 0 auto}

/* — KPI cards: white, icon + progress carry the colour, amount stays neutral — */
.rptx .rpt-boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0}
.rptx .rpt-box{position:relative;background:var(--surface,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;
  padding:12px 15px 13px;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.rptx .rpt-box:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.10)}
.rptx .rptx-ctop{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rptx .rptx-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.rptx .rptx-ic svg{width:18px;height:18px}
.rptx .rpt-box .t{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);line-height:1.3;opacity:1}
.rptx .rpt-box .a{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.05;margin-top:0;color:var(--ink)}
.rptx .rpt-box .s{font-size:11.5px;font-weight:500;color:var(--muted-2,#94a3b8);margin-top:3px;letter-spacing:0;opacity:1}
.rptx .rptx-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--line-2,#eef2f7)}
.rptx .rptx-prog i{display:block;height:100%;border-radius:0 3px 3px 0}
.rptx .b-balance{background:var(--surface,#fff)}
.rptx .b-balance .rptx-ic{background:#eef2ff;color:#4f46e5} .rptx .b-balance .rptx-prog i{background:#4f46e5;width:60%;opacity:.85}
.rptx .b-success .rptx-ic{background:#ecfdf5;color:#16a34a} .rptx .b-success .rptx-prog i{background:#16a34a;width:80%;opacity:.68}
.rptx .b-pending .rptx-ic{background:#fff7ed;color:#f59e0b} .rptx .b-pending .rptx-prog i{background:#f59e0b;width:8%;opacity:.85}
.rptx .b-failed  .rptx-ic{background:#fef2f2;color:#dc2626} .rptx .b-failed  .rptx-prog i{background:#dc2626;width:14%;opacity:.85}
.rptx .b-refund  .rptx-ic{background:#eff6ff;color:#2563eb} .rptx .b-refund  .rptx-prog i{background:#2563eb;width:22%;opacity:.85}
.rptx .rpt-boxes.stale{opacity:.5;transition:opacity .2s}
@media(max-width:1150px){.rptx .rpt-boxes{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* — filter bar: single row, equal-height controls — */
.rptx .rptx-fcard{margin:0;border-radius:14px}
.rptx .rpt-filter{padding:11px 13px;gap:10px}
.rptx .rpt-filter input,.rptx .rpt-filter select{height:40px;border:1px solid var(--line,#e5e7eb);border-radius:10px;font-size:13px;padding:0 12px}
.rptx .rpt-filter .btn{height:40px;border-radius:10px;font-weight:600;padding:0 18px}
.rptx .rpt-filter .lnk{height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:var(--surface,#fff);font-weight:600;color:var(--ink);text-decoration:none}
.rptx .rpt-filter .lnk:hover{background:#f8fafc;border-color:#cbd5e1;text-decoration:none}

/* — table: aligned, roomy rows, sticky header, soft zebra + hover — */
.rptx #txnTable{font-size:13px}
.rptx #txnTable thead th{position:sticky;top:0;z-index:3;background:var(--sidebar-2,#f8fafc);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:13px 16px;border-bottom:1px solid var(--line,#e5e7eb);box-shadow:inset 0 -1px 0 var(--line,#e8edf3)}
.rptx #txnTable tbody td{padding:11px 16px;height:62px;vertical-align:middle;border-bottom:1px solid var(--line-2,#eef2f7)}
.rptx #txnTable tbody tr:nth-child(even){background:rgba(148,163,184,.032)}
.rptx #txnTable tbody tr:hover{background:rgba(99,102,241,.05)}
.rptx #txnTable tbody tr:last-child td{border-bottom:0}
.rptx #txnTable td .sub{color:var(--muted-2,#94a3b8);font-size:12px;margin-top:2px}
.rptx #txnTable td strong{font-weight:600}
.rptx #txnTable .vb-amt{font-size:15px;font-weight:700}
.rptx #txnTable .vb-mini{font-size:12px;font-weight:600}
/* right-align Amt/Margin (4th); Op/Cl Bal (6th) is left-aligned to match its pills */
.rptx #txnTable thead th:nth-child(4),.rptx #txnTable tbody td:nth-child(4){text-align:right}
/* Op/Cl balance — two COMPACT pills SIDE BY SIDE (O then C). Each hugs its
   content so the label and number are one space apart and the column stays
   narrow; a small gap separates the two pills. */
.rptx #txnTable .balcell{text-align:left;white-space:nowrap;line-height:1}
/* STACKED, NOT SIDE BY SIDE. Two 84px pills in a row made this the widest
   column on the page for two short numbers. Every other cell here already runs
   two lines (ID over Date, Amount over Margin, Lapu over its id), so stacking
   costs no height at all and gives the column back roughly half its width. */
.rptx #txnTable .balcell div{display:flex;align-items:center;justify-content:flex-start;gap:4px;
  width:fit-content;background:#f1f5f9;border:1px solid #e9eef5;border-radius:7px;padding:2px 7px;margin:0 0 3px;
  font-variant-numeric:tabular-nums}
.rptx #txnTable .balcell div:last-child{margin-bottom:0}
.rptx #txnTable .balcell .bl-lbl{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:4px;
  background:#fff;color:var(--muted-2,#94a3b8);font-size:9px;font-weight:700;flex:0 0 auto}
.rptx #txnTable .balcell .vb-bal,.rptx #txnTable .balcell .vb-mini{font-weight:600;font-size:12px;color:#334155;margin:0}
.rptx #txnTable .balcell .muted{color:#94a3b8;font-weight:600;font-size:12.5px}
/* Service — operator name (text) + code chip */
.rptx #txnTable .op-name{font-weight:600;font-size:12.5px;color:var(--ink);letter-spacing:.01em}
.rptx #txnTable .op-code{display:inline-block;font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f5f9;padding:1px 7px;border-radius:6px;margin-top:2px}
/* status pill — equal width */
.rptx #txnTable .st-badge{min-width:100px;justify-content:center;font-weight:600;font-size:12px;padding:5px 12px;border-radius:20px}
/* action toolbar spacing (buttons already .txnact from UPDATE40) */
.rptx #txnTable .txnacts{gap:8px}
/* Reports is a LIGHT design. Earlier partial dark-mode overrides here turned the
   header row and the Op/Cl balance pills dark whenever the OS was in dark mode,
   while every other element (light, no dark rule) stayed light — the mismatched
   "black strip" the owner reported. Removed so the report renders in one
   consistent light theme regardless of the OS setting. */
/* === end UPDATE49 === */

/* ============================================================
   Reports — readable sizes (owner: "proper visible nahi ho raha")
   PURE ADDITION. Everything below is scoped to #txnTable, .txn-modal
   or .txn-detail, so no other page changes. `!important` is used only
   where the size is written inline in txn-modal.js / txn_detail.ejs —
   a stylesheet cannot outrank an inline style any other way.
   ============================================================ */

/* ---- 1. the report grid ---- */
#txnTable{font-size:15px}
#txnTable thead th{font-size:12.5px;letter-spacing:.02em;padding:10px 7px}
#txnTable tbody td{padding:11px 7px}
#txnTable .vb-amt{font-size:17px}
#txnTable .vb-mini{font-size:13px}
#txnTable .balcell .bl-lbl{font-size:12px;width:16px}

/* The second line under a cell (operator name, ref, message) was clamped to
   118px and ellipsised, which is what "cut off" looked like. Let it breathe
   and wrap instead of being chopped. */
#txnTable .sub{font-size:12.5px;line-height:1.35;max-width:none;white-space:normal;
  overflow:visible;text-overflow:clip;word-break:break-word}

/* ---- 2. the quick-view popup (sizes are inline in txn-modal.js) ---- */
.modal.txn-modal{max-width:1080px!important;width:96vw}
.txn-modal .modal-b{font-size:14.5px}
.txn-modal .modal-b [style*="font-size:10.5px"]{font-size:12.5px!important}
.txn-modal .modal-b [style*="font-size:11px"]{font-size:13px!important}
.txn-modal .modal-b [style*="font-size:11.5px"]{font-size:13px!important}
.txn-modal .modal-b [style*="font-size:13px"]{font-size:14.5px!important}
.txn-modal .modal-b [style*="font-size:15px"]{font-size:17px!important}
.txn-modal .modal-b [style*="font-size:17px"]{font-size:20px!important}
.txn-modal .modal-h code{font-size:16px!important}
.txn-modal .statc .lbl{font-size:12.5px!important}
/* the two-column key/value grid goes single-column on a narrow screen so
   values are never squeezed into a sliver */
@media(max-width:820px){ .txn-modal .modal-b [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important} }

/* ---- 3. the full-detail page /txn/:reqid ---- */
.txn-detail{font-size:14.5px}
.txn-detail [style*="font-size:10.5px"]{font-size:12.5px!important}
.txn-detail [style*="font-size:11px"]{font-size:13px!important}
.txn-detail [style*="font-size:11.5px"]{font-size:13px!important}
.txn-detail [style*="font-size:12px"]{font-size:13.5px!important}
.txn-detail [style*="font-size:12.5px"]{font-size:14px!important}
.txn-detail [style*="font-size:13.5px"]{font-size:15px!important}
.txn-detail .lbl{font-size:12.5px}
.txn-detail .sub{font-size:13px}
.txn-detail pre,.txn-detail code{font-size:13px;white-space:pre-wrap;word-break:break-word}

/* ============================================================
   Reports grid — ONE size everywhere (owner: "Amount ka size sahi
   hai, sabhi ko isi size ka kijiye"), and O / C balance made
   exactly symmetric.
   PURE ADDITION, scoped to #txnTable.
   ============================================================ */

/* 17px — the Amount size — becomes the size of the whole grid. */
#txnTable{font-size:17px}
#txnTable tbody td{padding:12px 8px}
#txnTable thead th{font-size:13px;padding:11px 8px}

/* Every value pill and every second line now matches the amount. */
#txnTable .vb,
#txnTable .vb-amt,
#txnTable .vb-mini,
#txnTable .sub,
#txnTable .sub .vb-mini{font-size:17px}
#txnTable .vb{padding:2px 8px;line-height:1.45}

/* ---- O / C balance: perfectly symmetric ----
   The markup gives O the `vb` pill and C the smaller `vb-mini`, so the two
   lines never matched. Both are pinned to one size, one pill, one width, and
   the digits are tabular so the decimal points sit in a column. */
#txnTable .balcell{white-space:nowrap}
#txnTable .balcell div{display:flex;align-items:center;gap:6px;line-height:1.5}
#txnTable .balcell div + div{margin-top:4px}
#txnTable .balcell .bl-lbl{flex:0 0 auto;width:18px;text-align:center;
  font-size:13px;font-weight:700;color:var(--muted-2,#9aa4b2)}
#txnTable .balcell .vb-bal{flex:0 0 auto;min-width:96px;box-sizing:border-box;
  font-size:17px;font-weight:600;padding:2px 8px;text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* the "-" placeholder must occupy the same box as a real figure */
#txnTable .balcell .muted{display:inline-block;min-width:96px;text-align:right;font-size:17px}

/* ------------------------------------------------------------
   Reports KPI cards — kam unchai (owner: "upar wale box ka height
   chhota kar dijiye"). Sirf spacing/size; rang, id, progress line
   sab waise ke waise. PURE ADDITION, .rptx me scoped.
   ------------------------------------------------------------ */
.rptx .rpt-box{padding:10px 14px 12px}
.rptx .rptx-ctop{gap:8px;margin-bottom:4px}
.rptx .rptx-ic{width:26px;height:26px;border-radius:8px}
.rptx .rptx-ic svg{width:15px;height:15px}
.rptx .rpt-box .t{font-size:9.5px;line-height:1.2}
.rptx .rpt-box .a{font-size:18px;line-height:1}
.rptx .rpt-box .s{font-size:11px;margin-top:2px;line-height:1.2}
.rptx .rptx-prog{height:3px}
.rptx .rpt-boxes{gap:10px}

/* ------------------------------------------------------------
   LAPU popup — do list: operator ka app (default) aur hamara record.
   PURE ADDITION.
   ------------------------------------------------------------ */
.lh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.lh-tabs{display:inline-flex;background:var(--line-2,#eef2f7);border-radius:10px;padding:3px;gap:2px}
.lh-tab{border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--muted);padding:7px 14px;border-radius:8px;transition:.15s}
.lh-tab:hover{color:var(--ink-2)}
.lh-tab.is-on{background:var(--surface,#fff);color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.lh-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lh-dates{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.lh-dates .inp{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface,#fff);color:var(--ink);font:inherit;font-size:13px}
#lapuHistModal table{font-size:14.5px}
#lapuHistModal thead th{font-size:12px;letter-spacing:.02em}

/* LAPU popup — "Hamara Record" row ke teen action. Chhote isliye ki row ki
   unchai na bade; rang wahi jo report ke toolbar me hain. PURE ADDITION. */
#lapuHistModal .lh-acts{white-space:nowrap}
.lh-act-row{display:inline-flex;gap:5px}
.lh-act{width:28px;height:28px;border-radius:8px;border:1px solid var(--line,#e5e7eb);
  background:var(--surface,#fff);cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;padding:0;transition:.15s}
.lh-act:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(16,24,40,.12)}
.lh-act:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lh-act.a-ok{color:#16a34a}  .lh-act.a-ok:hover{background:#ecfdf5;border-color:#bbf7d0}
.lh-act.a-no{color:#dc2626}  .lh-act.a-no:hover{background:#fef2f2;border-color:#fecaca}
.lh-act.a-chk{color:#2563eb} .lh-act.a-chk:hover{background:#eff6ff;border-color:#bfdbfe}

/* ── Operator-notification TIMING chip (audit pilot). Pure addition, scoped to
   the report. Shows how much earlier the operator's FCM push arrived than our
   own poll-final. Inert unless the fcm-collector is feeding notif_probe. ── */
.rptx #txnTable td .np-chip{display:flex;width:max-content;max-width:100%;
  align-items:center;justify-content:center;gap:4px;margin:5px auto 0;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.rptx #txnTable td .np-chip svg{width:12px;height:12px;flex:0 0 auto}
.rptx #txnTable td .np-chip.np-ok{background:#e1f5ee;color:#0f6e56}
.rptx #txnTable td .np-chip.np-mid{background:#eef2f7;color:#475569}
.rptx #txnTable td .np-chip.np-flat{background:#f1f5f9;color:#94a3b8}
.rptx #txnTable td .np-chip.np-wait{background:#e6f1fb;color:#185fa5}


/* ============================================================
   SIDEBAR BRAND — the artwork replaces the ⚡ mark and the word "Robo".

   The image is a wide strip (about 6.6:1), so it is laid edge to edge across
   the sidebar and given a WIDTH only. `height:auto` is the whole point: the
   browser derives the height from the file, which means no CSS rule here can
   ever stretch or squash the artwork, whatever the sidebar's width turns out
   to be. `display:block` removes the inline-baseline gap that would otherwise
   leave a few pale pixels under it.

   The old .logo rule adds 22px of side padding and a flex row for the mark and
   the text. Neither applies to a single full-bleed image, so both are undone
   here rather than by editing the original rule.
   ============================================================ */
.sidebar .logo.brandimg{display:block;padding:0;gap:0}
.sidebar .logo.brandimg a{display:block;line-height:0}
.sidebar .logo.brandimg img{display:block;width:100%;height:auto}

/* ------------------------------------------------------------
   STOCK MANAGEMENT — one page, five tabs.
   Appended, never inserted: the first 701 lines of this file are
   frozen.

   EVERY SELECTOR HERE STARTS WITH .sk-, AND THAT IS NOT STYLE — IT
   IS THE FIX FOR A REAL REGRESSION. The first version of this block
   redefined three names the rest of the app already owns:

     .modal-overlay{display:none}  — the app shows a modal by adding
       .open, which only sets opacity and pointer-events. Overriding
       display to none made EVERY modal in the product invisible:
       bulk upload, add LAPU, transaction detail, add money.
     .chip   — used by addmoney, dashboard, notifications, plans,
       reports and superadmin_gateway.
     .legend — used by dashboard and statics.

   Appended CSS always wins on equal specificity, so a generic name
   here is a change to pages nobody was looking at. Hence the prefix
   on everything, with no exceptions.
   ------------------------------------------------------------ */

.sk-head{align-items:flex-start;gap:12px;flex-wrap:wrap}
.sk-actions{display:flex;gap:6px;flex-wrap:wrap}
.sk-actions .btn{white-space:nowrap}
.sk-flash{margin-bottom:12px}

/* Summary cards — seven fit a desktop row, two a phone. */
.sk-cards{display:grid;gap:8px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.sk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1px;min-width:0}
.sk-card .k{font-size:11px;font-weight:600;color:var(--muted-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sk-card .v{font-size:19px;font-weight:700;line-height:1.2;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sk-card .v.ok{color:var(--success)}
.sk-card .v.bad{color:var(--danger)}
.sk-card .v.warn{color:var(--warn)}

/* Tabs */
.sk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px;
  overflow-x:auto;scrollbar-width:none}
.sk-tabs::-webkit-scrollbar{display:none}
.sk-tabs button{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:9px 14px;cursor:pointer;
  white-space:nowrap;margin-bottom:-1px}
.sk-tabs button:hover{color:var(--ink-2)}
.sk-tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.sk-tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Stock ke tab ke andar ka chhota sirlekh. Panne ka apna <h1> upar hai, isliye
   yahan sirf us tab ka naam aur uski ek pankti ki vyakhya. */
.sk-sub-head { margin: 0 0 14px; }
.sk-sub-head h3 { margin: 0 0 4px; font-size: 16px; }
.sk-sub-head .muted { margin: 0; }

.sk-pane{display:none}
.sk-pane.on{display:block}

/* Filters */
.sk-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.sk-filters input,.sk-filters select{font-size:13px;padding:6px 9px;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:var(--surface);color:var(--ink);min-width:0}
.sk-filters #fq{flex:1 1 190px;min-width:150px}
.sk-filters select{max-width:172px}

/* Card-header tools sit right, and wrap underneath on a phone. */
.sk-tools{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sk-tools .sk-search,.sk-tools select{font-size:12.5px;padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:var(--surface);color:var(--ink);max-width:150px}

/* Tables. Compact by intent — more rows per screen. */
.sk-table{width:100%}
.sk-table th,.sk-table td{padding:7px 10px;font-size:13px}
.sk-table th.r,.sk-table td.r{text-align:right;font-variant-numeric:tabular-nums}
.sk-table td.r{white-space:nowrap}
.sk-table td.ok{color:var(--success);font-weight:600}
.sk-table th.w,.sk-table td.w{width:150px}
.sk-table tbody tr:hover{background:var(--line-2)}
.sk-table thead th[data-s]{user-select:none;white-space:nowrap}
.sk-table thead th[data-s]:hover{color:var(--ink)}
.sk-table thead th.sorted{color:var(--brand)}
.sk-table thead th.sorted::after{content:'▲';font-size:9px;margin-left:4px;opacity:.85}
.sk-table thead th.sorted[data-dir="desc"]::after{content:'▼'}
.sk-table tbody tr.clik{cursor:pointer}
.sk-table tbody tr.clik:hover{background:var(--brand-soft)}

.sk-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;
  padding:8px 14px;border-top:1px solid var(--line-2);font-size:12.5px}
.btn.sk-xs{padding:3px 9px;font-size:12px;border-radius:var(--radius-xs)}

/* A percentage that says how it feels, with the number still there. */
.sk-chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;
  font-weight:700;font-variant-numeric:tabular-nums}
.sk-chip.ok{background:var(--success-soft);color:#047857}
.sk-chip.warn{background:var(--warn-soft);color:#b45309}
.sk-chip.bad{background:var(--danger-soft);color:#b91c1c}

/* One bar per row: success, failed, refund, in proportion. */
.sk-mix{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-2);min-width:80px}
.sk-mix span{display:block;height:100%}
.sk-ok{background:var(--success)}
.sk-bad{background:var(--danger)}
.sk-warn{background:var(--warn)}

/* Day-by-day bars — scroll sideways rather than squeeze sixty days onto a phone. */
.sk-bars{display:flex;align-items:flex-end;gap:6px;height:120px;overflow-x:auto;
  padding-bottom:4px;scrollbar-width:thin}
.sk-bar{flex:0 0 32px;display:flex;flex-direction:column;align-items:center;
  height:100%;justify-content:flex-end}
.sk-bar .b{width:100%;min-height:2px;border-radius:6px 6px 2px 2px;overflow:hidden;
  display:flex;flex-direction:column-reverse;background:var(--line-2)}
.sk-bar .b span{display:block;width:100%}
.sk-bar .l{font-size:10.5px;color:var(--muted-2);margin-top:5px;white-space:nowrap}
.sk-bar .n{font-size:11.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Modal detail — label/value pairs that reflow. */
.sk-kv{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sk-kv>div{background:var(--line-2);border-radius:var(--radius-xs);padding:8px 10px;min-width:0}
.sk-kv span{display:block;font-size:11px;color:var(--muted-2);font-weight:600}
.sk-kv b{font-size:14px;color:var(--ink);word-break:break-word}
.sk-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line-2)}

/* Rule editor — stacked cards on a phone, so a limit can be set from one. */
.sk-rules .sk-new{background:var(--brand-soft)}
.sk-rules select,.sk-rules input{max-width:100%}
@media (max-width:860px){
  .sk-rules thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sk-rules,.sk-rules tbody,.sk-rules tr,.sk-rules td{display:block;width:100%}
  .sk-rules tr{border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:10px 12px;margin-bottom:10px;background:var(--surface)}
  .sk-rules td{display:flex;align-items:center;justify-content:space-between;
    gap:12px;border:0;padding:6px 0;text-align:left!important}
  .sk-rules td::before{content:attr(data-l);font-size:12px;font-weight:700;
    color:var(--muted-2);text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
  .sk-rules td input,.sk-rules td select{width:auto!important;flex:1 1 auto;
    text-align:left!important;min-width:0}
}

@media (max-width:720px){
  .sk-actions .btn{flex:1 1 auto;font-size:12px;padding:6px 8px}
  .sk-cards{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .sk-card .v{font-size:16px}
  .sk-filters select{flex:1 1 44%;max-width:none}
  .sk-tools{width:100%;margin-left:0}
  .sk-tools .sk-search{flex:1 1 auto;max-width:none}
  .sk-table th.w,.sk-table td.w{display:none}
}

@media (prefers-color-scheme:dark){
  .sk-chip.ok{background:rgba(16,185,129,.16);color:#6ee7b7}
  .sk-chip.warn{background:rgba(245,158,11,.16);color:#fcd34d}
  .sk-chip.bad{background:rgba(239,68,68,.16);color:#fca5a5}
  .sk-table tbody tr.clik:hover{background:rgba(99,102,241,.14)}
}

@media (prefers-reduced-motion:reduce){
  .sk-tabs button{transition:none}
}

/* Bulk actions appear only when something is selected — a row of dead buttons
   above an empty selection is noise on every other visit. */
/* The row checkbox. Given a size of its own because a 13px control in a 7px row
   is a target nobody hits on a phone. */
.sk-pick{width:15px;height:15px;cursor:pointer;accent-color:var(--brand)}

.sk-bulk{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;
  background:var(--brand-soft);border-radius:var(--radius-xs);padding:3px 8px}
.sk-bulk[hidden]{display:none}

/* Rule simulation */
.sk-sim{margin-top:10px}
.sk-sim table{margin-top:8px}
.sk-verdict{font-size:14px;padding:8px 10px;background:var(--line-2);
  border-radius:var(--radius-xs);display:inline-block}
.sk-table tr.sk-wins td{background:var(--success-soft)}

/* History event counters — a refusal leaves no transaction, so it needs its own
   place to be seen. */
.sk-events{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sk-ev{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--line-2);
  color:var(--muted);white-space:nowrap}
.sk-ev b{color:var(--ink);font-variant-numeric:tabular-nums}
.sk-ev.on{background:var(--warn-soft);color:#b45309}

@media (prefers-color-scheme:dark){
  .sk-table tr.sk-wins td{background:rgba(16,185,129,.12)}
  .sk-ev.on{background:rgba(245,158,11,.16);color:#fcd34d}
}

/* ------------------------------------------------------------
   .grid two / .grid three ON ANY ELEMENT, NOT ONLY ON A FORM.
   ------------------------------------------------------------
   The core defines `form.grid`, `form.grid.two` and `form.grid.three`
   — with the `form.` prefix. Eight views use `<div class="grid two">`
   for a pair of panels, and no rule ever matched them: the div was
   never a grid at all, so both halves fell one under the other. On
   Statics that put Success Rate by Operator above Status Distribution
   instead of beside it; the same on Add Money, Commissions, Config and
   the account forms.
   Same columns and the same gap the form rules use, so a pair looks the
   same whichever element it is on, and the same single-column fallback
   below 900px. Only elements ALREADY asking for two or three columns
   are affected — `class="grid"` on its own appears only on forms, which
   the core already styles.
   ------------------------------------------------------------ */
.grid{display:grid;gap:17px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}
/* A chart must be allowed to shrink. A grid item is min-content wide by
   default, and a canvas reports its drawing width as that minimum — so
   two charts in one row push the row wider than the page instead of
   sharing it. */
.grid>.chart-box{min-width:0}
.chart-box>.chart-container{position:relative;width:100%}

/* ── the palette's missing half ─────────────────────────────────────────────
   Every semantic hue was declared once, as the STRONG value used for a border,
   a dot or a fill. None had an INK value — one dark enough to READ as text on
   its own soft ground — so anybody writing coloured text had nothing to reach
   for, typed a hex, and typed a slightly different one next time. Nine reds in
   the Super Admin console came from this single gap.

   DECLARED HERE, NOT IN THE :root AT THE TOP. That block is frozen: five tests
   assert the original stylesheet is byte-for-byte intact, because every page in
   the app depends on it and "I only added a line" is how a frozen file stops
   being frozen. Custom properties merge across rules, so these are available
   everywhere exactly as if they had been declared up there.

   The values are not chosen freshly — they are the ones the console had already
   converged on by use: #b91c1c for danger text (7 places), #a16207 for warning
   text (5), #15803d for success text (4). Nothing changed colour. */
:root{
  --success-ink:#15803d; --warn-ink:#a16207; --danger-ink:#b91c1c; --info-ink:#0369a1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPER ADMIN CONSOLE
   ──────────────────────────────────────────────────────────────────────────
   The console had SIX css rules to the panel's several hundred, and made up
   the difference with 264 hand-written style="" attributes across fourteen
   views. Nothing matched anything, because nothing shared anything.

   Not one colour, radius or shadow below is new. They are the tokens declared
   at the top of this file — the console simply starts using the system the
   rest of the panel has had all along.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the rail ───────────────────────────────────────────────────────────── */
/* It carries .sidebar too, so the fixed column, the scroll, the mobile
   slide-over and the ☰ collapse all come from there and stay in step. */
.sa-rail{padding:0}
.sa-rail-top{padding:16px 16px 12px;border-bottom:1px solid var(--line-2)}
.sa-back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
  color:var(--muted);text-decoration:none;padding:4px 7px;margin:-4px 0 10px -7px;border-radius:var(--radius-xs)}
.sa-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sa-back:hover{background:var(--line-2);color:var(--ink-2)}
.sa-brand{display:flex;align-items:center;gap:10px}
.sa-mark{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--violet));color:#fff;font-weight:800;font-size:12.5px;
  box-shadow:0 6px 16px rgba(99,102,241,.35)}
.sa-brand-t{font-weight:750;color:var(--ink);letter-spacing:-.2px;line-height:1.2}
.sa-brand-s{font-size:11px;color:var(--muted)}

.sa-nav2{padding:8px 12px 22px;flex:1}
.sa-g{margin-top:12px}
.sa-g-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted-2);
  font-weight:700;margin:0 10px 6px}
.sa-l{display:flex;align-items:center;gap:10px;padding:7px 10px;margin-bottom:1px;
  border-radius:var(--radius-xs);color:var(--sidebar-ink);text-decoration:none;
  font-size:13.5px;font-weight:500;line-height:1.35}
.sa-l svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--muted-2);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sa-l:hover{background:var(--sidebar-active);color:var(--ink)}
.sa-l:hover svg{stroke:var(--ink-2)}
.sa-l.on{background:var(--brand-soft);color:var(--brand-700);font-weight:650}
.sa-l.on svg{stroke:var(--brand-700)}
.sa-l:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.sa-ext{color:var(--muted-2);font-size:11px}
/* A count on the link that leads to it, so the rail reports state and not
   only destinations — otherwise finding the page with the problem on it
   means opening all six. */
.sa-tag{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
  background:var(--line-2);color:var(--muted);font-variant-numeric:tabular-nums}
.sa-tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.sa-tag.dang{background:var(--danger-soft);color:var(--danger-ink)}
.sa-l.on .sa-tag{background:#fff;color:var(--brand-700)}

/* ── needs attention ────────────────────────────────────────────────────── */
/* Deviations only. A board that reports everything is fine twelve ways
   teaches you to stop reading it, and then the red line goes unread too. */
.sa-att{display:grid;gap:8px;margin-bottom:20px}
.sa-att-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--muted-2);
  border-radius:var(--radius-sm);padding:10px 14px;box-shadow:var(--shadow-sm)}
.sa-att-row.warn{border-left-color:var(--warn)}
.sa-att-row.danger{border-left-color:var(--danger)}
.sa-att-row.info{border-left-color:var(--info)}
.sa-att-w{font-weight:650;color:var(--ink)}
.sa-att-y{color:var(--muted);font-size:13px;flex:1 1 260px}
.sa-att-a{font-size:13px;font-weight:650;color:var(--brand-700);text-decoration:none;white-space:nowrap}
.sa-att-a:hover{text-decoration:underline}
.sa-clear{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--success);
  border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:20px;box-shadow:var(--shadow-sm)}

/* ── the figures ────────────────────────────────────────────────────────── */
.sa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.sa-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-sm)}
.sa-kpi-l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sa-kpi-v{font-size:25px;font-weight:750;letter-spacing:-.6px;margin-top:5px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sa-kpi-v small{font-size:15px;color:var(--muted);font-weight:600}
.sa-kpi-s{font-size:12px;color:var(--muted);margin-top:2px}

/* ── shared console pieces ──────────────────────────────────────────────── */
/* State as a shape as well as a word: a row needing attention is findable
   without reading every label in the column. */
.sa-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:2px 9px;border-radius:20px;background:var(--line-2);color:var(--muted);white-space:nowrap}
.sa-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.sa-pill.ok{background:var(--success-soft);color:var(--success-ink)}
.sa-pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
.sa-pill.off{background:var(--danger-soft);color:var(--danger-ink)}
.sa-pill.info{background:var(--info-soft);color:var(--info-ink)}

/* A switch that looks like a switch. These were plain buttons whose label you
   had to read to learn which way they were set. */
.sa-sw{width:38px;height:21px;border-radius:20px;background:var(--muted-2);position:relative;
  border:0;padding:0;cursor:pointer;flex:0 0 auto;vertical-align:middle}
.sa-sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:left .16s ease}
.sa-sw[aria-checked="true"]{background:var(--success)}
.sa-sw[aria-checked="true"]::after{left:19.5px}
.sa-sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sa-sw::after{transition:none}}

.sa-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--muted)}
.sa-num{font-variant-numeric:tabular-nums}
.sa-bar{height:6px;border-radius:20px;background:var(--line-2);overflow:hidden;width:110px}
.sa-bar>i{display:block;height:100%;border-radius:20px;background:var(--brand)}

@media (max-width:860px){
  .sa-att-row{align-items:flex-start}
  .sa-att-a{margin-left:0}
}

/* ── console utilities ──────────────────────────────────────────────────────
   EVERY ONE OF THESE WAS ALREADY IN THE CONSOLE, written out by hand between
   two and nineteen times. They are not an invented vocabulary; they are the
   repeated half of 264 style="" attributes, counted and named.

   A declaration used once is NOT here. A utility with one caller is a worse
   name for the same line, and the page that owns it keeps it.
   ───────────────────────────────────────────────────────────────────────── */

/* font-size:12px ×19, and the `class="muted" style="font-size:12px"` pairing
   ×17, which is one idea — a quiet note beside something — spelt two ways. */
.sa-sm{font-size:12px}
.sa-xs{font-size:11px}
.sa-hint{font-size:12px;color:var(--muted)}
/* font-size:11px;font-weight:700 ×3 — a column label, not prose. */
.sa-lbl{font-size:11px;font-weight:700;letter-spacing:.04em}

/* ONE SPACING STEP, NOT FOUR. margin-bottom appeared as 10, 12, 14 and 16px
   across thirty places, all doing the same job — separate this block from the
   next. Four hand-picked values for one idea is exactly what makes a console
   look unmanaged, so they collapse to the commonest of them. Nothing moves by
   more than four pixels. */
.sa-mb{margin-bottom:14px}
.sa-mt{margin-top:6px}
.sa-ml{margin-left:8px}

/* display:flex + align-items:center + a gap ×20-odd, with the gap picked
   afresh each time. */
.sa-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sa-row.tight{gap:6px}
.sa-row.loose{gap:16px}
.sa-row.between{justify-content:space-between}
.sa-grow{flex:1;min-width:260px}

.sa-w100{width:100%}
.sa-tl{text-align:left}
.sa-tc{text-align:center}
.sa-nowrap{white-space:nowrap}

/* width:100% + monospace + a small size ×5 — a field holding a key, a token or
   a JSON blob, which is most of what the Configuration page contains. */
.sa-code{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;word-break:break-all}

/* text-align:center;opacity:.6;padding:14px ×2 and padding:28px/36px ×6 — the
   "there is nothing here" cell, written differently every time. */
.sa-empty{text-align:center;color:var(--muted);padding:28px 14px}

/* background:#fff5f5 x3 — a danger tint typed as a literal in three places
   while --danger-soft sat in the token block doing nothing. */
.sa-danger-bg{background:var(--danger-soft)}