/* ═══════════════════════════════════════════════════════════
   সূত্র Design System v4.0 — Mobile-First Complete
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}

/* ── TOKENS ─────────────────────────────────────────────── */
:root{
  /* Brand */
  --p:#3B82F6;--pd:#2563EB;--pl:#EFF6FF;--pg:rgba(59,130,246,.14);
  --green:#10B981;--red:#EF4444;--yellow:#F59E0B;--purple:#8B5CF6;
  --cyan:#06B6D4;--orange:#F97316;--pink:#EC4899;
  /* Semantic */
  --success:#10B981;--s-bg:#ECFDF5;--s-bd:#A7F3D0;
  --danger:#EF4444;--d-bg:#FEF2F2;--d-bd:#FECACA;
  --warning:#F59E0B;--w-bg:#FFFBEB;--w-bd:#FDE68A;
  --info:#3B82F6;--i-bg:#EFF6FF;--i-bd:#BFDBFE;
  /* Gray */
  --g50:#F8FAFC;--g100:#F1F5F9;--g200:#E2E8F0;--g300:#CBD5E1;
  --g400:#94A3B8;--g500:#64748B;--g600:#475569;--g700:#334155;
  --g800:#1E293B;--g900:#0F172A;
  /* Surface */
  --bg:#F0F4F8;--card:#FFFFFF;--input-bg:#F8FAFC;
  --border:#E2E8F0;--focus:#3B82F6;
  /* Text */
  --t1:#0F172A;--t2:#475569;--t3:#94A3B8;--t4:#CBD5E1;
  /* Sidebar */
  --sb:#0D1117;--sb-brd:rgba(255,255,255,.05);
  --sb-hov:rgba(255,255,255,.06);--sb-act:rgba(59,130,246,.15);
  --sb-act-bd:#3B82F6;--sb-txt:#8B9AB4;--sb-head:#3D4D6A;
  --sb-w:260px;--sb-mini:64px;
  /* Topbar */
  --tb-h:60px;
  /* Bottom Nav */
  --bn-h:60px;
  /* Radius */
  --r1:4px;--r2:8px;--r3:12px;--r4:16px;--r5:20px;--r6:24px;--rf:9999px;
  /* Shadow */
  --s1:0 1px 2px rgba(15,23,42,.04);
  --s2:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --s3:0 4px 6px rgba(15,23,42,.05),0 2px 4px rgba(15,23,42,.04);
  --s4:0 10px 15px rgba(15,23,42,.06),0 4px 6px rgba(15,23,42,.04);
  --s5:0 20px 25px rgba(15,23,42,.08),0 10px 10px rgba(15,23,42,.03);
  --s6:0 25px 50px rgba(15,23,42,.12);
  --glow:0 0 0 3px rgba(59,130,246,.12);
  --glow-g:0 4px 14px rgba(16,185,129,.28);
  --glow-b:0 4px 14px rgba(59,130,246,.28);
  --glow-r:0 4px 14px rgba(239,68,68,.28);
  /* Transition */
  --tf:120ms cubic-bezier(.4,0,.2,1);
  --tb:200ms cubic-bezier(.4,0,.2,1);
  --ts:300ms cubic-bezier(.4,0,.2,1);
  --tsp:350ms cubic-bezier(.34,1.56,.64,1)
}

/* ── BASE ─────────────────────────────────────────────────── */
body{font-family:'Hind Siliguri','Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--p);text-decoration:none;transition:color var(--tf)}
a:hover{color:var(--pd)}
hr{border:none;border-top:1px solid var(--border)}
img{max-width:100%;height:auto}
button{font-family:inherit}

/* ── LAYOUT ───────────────────────────────────────────────── */
.main-wrap{margin-left:var(--sb-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--ts)}
.main-wrap.mini{margin-left:var(--sb-mini)}
.page-content{padding:20px 24px;flex:1;padding-bottom:calc(20px + var(--bn-h))}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);
  background:var(--sb);display:flex;flex-direction:column;
  z-index:1000;transition:width var(--ts),transform var(--ts);
  overflow:hidden;border-right:1px solid var(--sb-brd);
}
.sidebar.mini{width:var(--sb-mini)}
.sidebar.mini .nav-text,.sidebar.mini .brand-name,.sidebar.mini .brand-tag,
.sidebar.mini .nav-section,.sidebar.mini .su-info{display:none!important}
.sidebar.mini .nav-link{justify-content:center;padding:10px}
.sidebar.mini .nav-link i{margin:0}
.sidebar.mini .sidebar-brand{justify-content:center;padding:16px 0}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 10px 10px;scrollbar-width:none}
.sb-scroll::-webkit-scrollbar{width:0}

/* Brand */
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:17px 14px 14px;border-bottom:1px solid var(--sb-brd);flex-shrink:0;min-height:64px}
.brand-logo{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.4)}
.brand-name{font-size:17px;font-weight:800;color:#F1F5F9;letter-spacing:-.3px;white-space:nowrap}
.brand-tag{font-size:9px;color:var(--sb-head);font-family:'Inter',sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}

/* Nav */
.nav-section{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--sb-head);padding:16px 10px 5px;font-family:'Inter',sans-serif;white-space:nowrap}
.nav-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r2);color:var(--sb-txt);font-size:13.5px;font-weight:500;transition:all var(--tf);margin-bottom:1px;border-left:2px solid transparent;text-decoration:none;white-space:nowrap}
.nav-link i{width:16px;text-align:center;font-size:12.5px;opacity:.7;flex-shrink:0;transition:opacity var(--tf),transform var(--tf)}
.nav-link .nav-text{flex:1}
.nav-link:hover{background:var(--sb-hov);color:#C1CED9}
.nav-link:hover i{opacity:1;transform:translateX(1px)}
.nav-link.active{background:var(--sb-act);color:#93C5FD;border-left-color:var(--sb-act-bd);font-weight:600}
.nav-link.active i{opacity:1;color:#60A5FA}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;font-family:'Inter',sans-serif}

/* Footer */
.sb-footer{padding:10px;border-top:1px solid var(--sb-brd);flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:9px;padding:9px 10px;background:rgba(255,255,255,.04);border-radius:var(--r2);border:1px solid rgba(255,255,255,.05)}
.su-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3B82F6,#8B5CF6);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff}
.su-info{flex:1;min-width:0}
.su-name{font-size:13px;font-weight:600;color:#CBD5E1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-role{font-size:10px;color:var(--sb-head);font-family:'Inter',sans-serif}
.su-logout{color:var(--sb-head);padding:5px;border-radius:6px;background:none;border:none;cursor:pointer;font-size:12px;flex-shrink:0;transition:all var(--tf)}
.su-logout:hover{background:rgba(239,68,68,.12);color:#FCA5A5}
#sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999;backdrop-filter:blur(2px)}
#sb-overlay.show{display:block}

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:100;height:var(--tb-h);
  background:rgba(255,255,255,.92);border-bottom:1px solid rgba(226,232,240,.8);
  box-shadow:0 1px 0 rgba(0,0,0,.06);display:flex;align-items:center;
  padding:0 20px;gap:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.tb-toggle{width:36px;height:36px;border:none;background:none;border-radius:var(--r2);cursor:pointer;color:var(--t3);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--tf);flex-shrink:0}
.tb-toggle:hover{background:var(--g100);color:var(--t1)}
.tb-title{font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-btn{min-width:36px;height:36px;border-radius:var(--r2);background:none;border:none;cursor:pointer;color:var(--t3);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--tf);padding:0 8px}
.tb-btn:hover{background:var(--g100);color:var(--t1)}

/* Search bar */
.tb-search-wrap{flex:1;max-width:300px;position:relative}
.tb-search-inp{width:100%;padding:8px 13px 8px 36px;background:var(--g100);border:1.5px solid transparent;border-radius:var(--rf);font-size:13px;font-family:inherit;color:var(--t1);transition:all var(--tf);outline:none;-webkit-appearance:none}
.tb-search-inp:focus{background:#fff;border-color:var(--focus);box-shadow:var(--glow)}
.tb-search-inp::placeholder{color:var(--t3)}
.tb-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:12px;pointer-events:none}
.search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid var(--border);border-radius:var(--r4);box-shadow:var(--s5);z-index:500;overflow:hidden;display:none}
.search-drop.show{display:block}
.sd-item{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;transition:background var(--tf);text-decoration:none;color:var(--t1)}
.sd-item:hover{background:var(--g50)}
.sd-ic{width:32px;height:32px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sd-t{font-size:13.5px;font-weight:600;color:var(--t1)}
.sd-s{font-size:11.5px;color:var(--t3)}
.sd-all{padding:10px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--p);border-top:1px solid var(--border);cursor:pointer;display:block;text-decoration:none}
.sd-all:hover{background:var(--pl)}
.sd-empty{padding:24px;text-align:center;color:var(--t3);font-size:13px}

/* ── BOTTOM NAV (Mobile) ──────────────────────────────────── */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  height:var(--bn-h);background:rgba(255,255,255,.95);
  border-top:1px solid var(--border);z-index:900;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 -4px 20px rgba(15,23,42,.08);
}
.bn-inner{display:flex;align-items:center;height:100%;padding:0 4px}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;cursor:pointer;text-decoration:none;color:var(--t3);transition:all var(--tf);border-radius:var(--r2);margin:4px 2px;min-height:50px;-webkit-tap-highlight-color:transparent}
.bn-item:hover{color:var(--p)}
.bn-item.active{color:var(--p)}
.bn-item i{font-size:17px;transition:transform var(--tsp)}
.bn-item.active i{transform:scale(1.15)}
.bn-label{font-size:9.5px;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:.2px;white-space:nowrap}
.bn-item.active .bn-label{color:var(--p)}
/* Center FAB */
.bn-fab-wrap{flex:1;display:flex;align-items:center;justify-content:center}
.bn-fab{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#2563EB);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 4px 16px rgba(37,99,235,.4);transition:all var(--tsp);-webkit-tap-highlight-color:transparent;margin-bottom:10px}
.bn-fab:active{transform:scale(.92)}
/* FAB Menu */
.fab-menu{position:fixed;bottom:calc(var(--bn-h) + 10px);left:50%;transform:translateX(-50%);background:#fff;border-radius:var(--r4);box-shadow:var(--s5);border:1px solid var(--border);padding:8px;min-width:220px;z-index:901;display:none;animation:fabIn .25s var(--tsp)}
.fab-menu.show{display:block}
@keyframes fabIn{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.fab-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r3);text-decoration:none;color:var(--t1);transition:background var(--tf)}
.fab-item:hover{background:var(--g50)}
.fab-item i{width:32px;height:32px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.fab-item span{font-size:14px;font-weight:600}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.page-hdr-title{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.4px;line-height:1.2}
.page-hdr-sub{font-size:12.5px;color:var(--t3);margin-top:3px}
.page-hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── GRIDS ────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}

/* ── CARDS ────────────────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--r4);border:1px solid var(--border);box-shadow:var(--s2);overflow:hidden;transition:box-shadow var(--tb)}
.card:hover{box-shadow:var(--s3)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--g100);font-size:14px;font-weight:700;color:var(--t1);gap:10px}
.card-body{padding:18px}
.card-footer{padding:11px 18px;border-top:1px solid var(--g100);background:var(--g50)}
.card-icon{width:30px;height:30px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}

/* ── KPI STAT CARDS ──────────────────────────────────────── */
.kpi-card{background:var(--card);border-radius:var(--r4);border:1px solid var(--border);padding:16px;position:relative;overflow:hidden;transition:all var(--tb);cursor:default}
.kpi-card::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:.07;transform:translate(20px,-20px);pointer-events:none}
.kpi-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;opacity:0;transition:opacity var(--tb);border-radius:0 0 var(--r4) var(--r4)}
.kpi-card:hover{box-shadow:var(--s4);transform:translateY(-2px)}
.kpi-card:hover::after{opacity:1}
.kpi-card.green::before{background:var(--green)}.kpi-card.green::after{background:var(--green)}
.kpi-card.blue::before{background:var(--p)}.kpi-card.blue::after{background:var(--p)}
.kpi-card.red::before{background:var(--red)}.kpi-card.red::after{background:var(--red)}
.kpi-card.yellow::before{background:var(--yellow)}.kpi-card.yellow::after{background:var(--yellow)}
.kpi-card.purple::before{background:var(--purple)}.kpi-card.purple::after{background:var(--purple)}
.kpi-card.cyan::before{background:var(--cyan)}.kpi-card.cyan::after{background:var(--cyan)}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.kpi-icon{width:40px;height:40px;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.kpi-icon.green{background:#DCFCE7;color:#16A34A}
.kpi-icon.blue{background:#DBEAFE;color:#2563EB}
.kpi-icon.red{background:#FEE2E2;color:#DC2626}
.kpi-icon.yellow{background:#FEF9C3;color:#CA8A04}
.kpi-icon.purple{background:#F3E8FF;color:#9333EA}
.kpi-icon.cyan{background:#CFFAFE;color:#0891B2}
.kpi-icon.orange{background:#FFEDD5;color:#EA580C}
.kpi-trend{font-size:11px;font-weight:700;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:3px;padding:3px 7px;border-radius:var(--rf)}
.kpi-trend.up{background:#DCFCE7;color:#15803D}
.kpi-trend.down{background:#FEE2E2;color:#B91C1C}
.kpi-trend.flat{background:var(--g100);color:var(--t3)}
.kpi-label{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:4px;font-family:'Inter',sans-serif}
.kpi-value{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1.1;font-family:'Inter',sans-serif}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:4px}

/* ── PROFIT BANNER ───────────────────────────────────────── */
.profit-banner{background:linear-gradient(135deg,#0D1117,#1a2332 50%,#0D1117);border-radius:var(--r5);padding:22px 26px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.profit-banner::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);pointer-events:none}
.pb-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#3D4D6A;font-family:'Inter',sans-serif;margin-bottom:6px}
.pb-value{font-size:32px;font-weight:900;line-height:1;letter-spacing:-1.2px;font-family:'Inter',sans-serif}
.pb-value.pos{color:#34D399}.pb-value.neg{color:#F87171}
.pb-period{font-size:11px;color:#3D4D6A;margin-top:5px;font-family:'Inter',sans-serif}
.pb-right{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.pb-stat{text-align:center}
.pb-stat-label{font-size:9px;color:#3D4D6A;text-transform:uppercase;letter-spacing:.8px;font-family:'Inter',sans-serif;margin-bottom:4px}
.pb-stat-value{font-size:17px;font-weight:700;font-family:'Inter',sans-serif}
.pb-div{width:1px;background:rgba(255,255,255,.06);height:36px}

/* ── QUICK ACTIONS ───────────────────────────────────────── */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.qa-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r4);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;transition:all var(--tb);text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent}
.qa-card:active{transform:scale(.96)}
.qa-card:hover{border-color:var(--p);box-shadow:var(--s3),0 0 0 3px var(--pg);transform:translateY(-2px)}
.qa-icon{width:44px;height:44px;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform var(--tsp)}
.qa-card:hover .qa-icon{transform:scale(1.1)}
.qa-label{font-size:12px;font-weight:600;color:var(--t2)}

/* ── TABLES (Desktop + Mobile Card) ─────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.table-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:24px;background:linear-gradient(to left,rgba(255,255,255,.9),transparent);pointer-events:none;opacity:0;transition:opacity var(--tf)}
.table-wrap.scrollable::after{opacity:1}
.sutro-table{width:100%;border-collapse:collapse;font-size:13.5px}
.sutro-table thead th{padding:10px 14px;text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);background:var(--g50);border-bottom:1px solid var(--g200);white-space:nowrap;font-family:'Inter',sans-serif;position:sticky;top:0;z-index:1}
.sutro-table tbody tr{transition:background var(--tf);border-bottom:1px solid var(--g100)}
.sutro-table tbody tr:last-child{border-bottom:none}
.sutro-table tbody tr:hover td{background:var(--g50)}
.sutro-table tbody tr:nth-child(even) td{background:#FBFCFD}
.sutro-table tbody tr:nth-child(even):hover td{background:var(--g100)}
.sutro-table tbody td{padding:12px 14px;color:var(--t1);vertical-align:middle;transition:background var(--tf)}
.amount{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.text-right{text-align:right}.text-center{text-align:center}
.text-green{color:var(--green)!important}.text-red{color:var(--red)!important}
.text-muted-c{color:var(--t3)!important}.fw-700{font-weight:700}.fw-600{font-weight:600}

/* Mobile Card Table */
@media(max-width:640px){
  .mobile-cards thead{display:none}
  .mobile-cards tbody tr{
    display:block;background:#fff;border-radius:var(--r3);
    margin-bottom:10px;padding:14px 16px;
    box-shadow:var(--s2);border:1px solid var(--border);border-bottom:1px solid var(--border)!important;
  }
  .mobile-cards tbody tr:hover td{background:transparent}
  .mobile-cards tbody td{
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;border:none!important;background:transparent!important;
    font-size:13.5px;
  }
  .mobile-cards tbody td:first-child{font-weight:700;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--g100)!important;margin-bottom:4px}
  .mobile-cards tbody td::before{
    content:attr(data-label);
    font-size:10.5px;font-weight:700;color:var(--t3);
    text-transform:uppercase;letter-spacing:.5px;
    font-family:'Inter',sans-serif;margin-right:10px;flex-shrink:0;
  }
  .mobile-cards tbody td:first-child::before{display:none}
  .mobile-cards .amount{text-align:right}
  .mobile-cards .text-center{justify-content:flex-end}
}

/* Empty State */
.empty-state{text-align:center;padding:48px 20px}
.empty-icon{width:64px;height:64px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--t3);margin:0 auto 14px}
.empty-title{font-size:15px;font-weight:700;color:var(--t2);margin-bottom:5px}
.empty-msg{font-size:13px;color:var(--t3);margin-bottom:18px}

/* ── BADGES ──────────────────────────────────────────────── */
.sutro-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--rf);font-size:11px;font-weight:700;letter-spacing:.2px;font-family:'Inter',sans-serif;white-space:nowrap}
.badge-paid{background:#DCFCE7;color:#15803D}
.badge-partial{background:#FEF9C3;color:#A16207}
.badge-draft{background:var(--g100);color:var(--g500)}
.badge-cancelled{background:#FEE2E2;color:#B91C1C}
.badge-blue{background:#DBEAFE;color:#1D4ED8}
.badge-purple{background:#F3E8FF;color:#7E22CE}
.badge-orange{background:#FFEDD5;color:#C2410C}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 17px;border-radius:var(--r3);font-size:13.5px;font-weight:600;
  cursor:pointer;border:none;transition:all var(--tf);
  white-space:nowrap;text-decoration:none;font-family:'Hind Siliguri',sans-serif;
  line-height:1.4;vertical-align:middle;position:relative;
  -webkit-tap-highlight-color:transparent;min-height:38px;
  justify-content:center;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.6;pointer-events:none;cursor:not-allowed}
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading::before{content:'';width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-primary{background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;box-shadow:0 1px 3px rgba(37,99,235,.2)}
.btn-primary:hover{background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:var(--glow-b);color:#fff}
.btn-success{background:linear-gradient(135deg,#10B981,#059669);color:#fff}
.btn-success:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:var(--glow-g);color:#fff}
.btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff}
.btn-danger:hover{background:linear-gradient(135deg,#DC2626,#B91C1C);box-shadow:var(--glow-r);color:#fff}
.btn-warning{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff}
.btn-warning:hover{background:linear-gradient(135deg,#D97706,#B45309);color:#fff}
.btn-secondary{background:#fff;color:var(--t2);border:1.5px solid var(--border);box-shadow:var(--s1)}
.btn-secondary:hover{background:var(--g50);color:var(--t1);border-color:var(--g300)}
.btn-ghost{background:transparent;color:var(--t3);box-shadow:none;border:none}
.btn-ghost:hover{background:var(--g100);color:var(--t1)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:var(--r2);min-height:32px;gap:5px}
.btn-lg{padding:12px 24px;font-size:15px;border-radius:var(--r4);min-height:46px}
.btn-icon{padding:0;min-width:36px;width:36px;height:36px}
.btn-icon.btn-sm{min-width:30px;width:30px;height:30px}
.w-100{width:100%}

/* ── FORMS ────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--t1);margin-bottom:5px}
.req{color:var(--red);margin-left:2px}
.form-hint{font-size:11.5px;color:var(--t3);margin-top:4px}
.form-control{
  display:block;width:100%;padding:10px 13px;
  background:var(--input-bg);border:1.5px solid var(--border);
  border-radius:var(--r3);font-size:14px;color:var(--t1);
  font-family:inherit;transition:border-color var(--tf),box-shadow var(--tf),background var(--tf);
  -webkit-appearance:none;line-height:1.5;min-height:42px;
}
.form-control:focus{outline:none;border-color:var(--focus);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.form-control::placeholder{color:var(--t4)}
.form-control:disabled{opacity:.6;cursor:not-allowed;background:var(--g100)}
.form-control-sm{padding:7px 10px;font-size:13px;min-height:34px}
select.form-control{cursor:pointer;padding-right:32px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:18px}
textarea.form-control{resize:vertical;min-height:90px}
.form-control.err{border-color:var(--danger);background:var(--d-bg)}
.input-group{display:flex;align-items:stretch}
.input-group .form-control{flex:1;border-radius:0}
.input-group .form-control:first-child{border-radius:var(--r3) 0 0 var(--r3)}
.input-group .form-control:last-child{border-radius:0 var(--r3) var(--r3) 0}
.input-addon{display:flex;align-items:center;padding:0 12px;background:var(--g100);border:1.5px solid var(--border);color:var(--t3);font-size:13px;border-radius:var(--r3) 0 0 var(--r3);border-right:none;white-space:nowrap;font-family:'Inter',sans-serif;min-height:42px}
.frow{display:grid;gap:14px}
.frow-2{grid-template-columns:1fr 1fr}
.frow-3{grid-template-columns:1fr 1fr 1fr}
.frow-4{grid-template-columns:1fr 1fr 1fr 1fr}

/* ── TOAST ───────────────────────────────────────────────── */
.toast-container{position:fixed;top:70px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:360px;width:calc(100% - 32px)}
.toast{display:flex;align-items:flex-start;gap:11px;background:#fff;border-radius:var(--r4);padding:13px 15px 15px;box-shadow:var(--s6),0 0 0 1px rgba(0,0,0,.05);pointer-events:all;animation:tIn .3s var(--tsp) forwards;position:relative;overflow:hidden;min-width:280px}
.toast.out{animation:tOut .2s ease forwards}
@keyframes tIn{from{opacity:0;transform:translateX(36px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(36px)}}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.t-success::before{background:var(--success)}.t-danger::before{background:var(--danger)}
.t-warning::before{background:var(--warning)}.t-info::before{background:var(--p)}
.toast-icon{font-size:15px;flex-shrink:0;margin-top:2px}
.t-success .toast-icon{color:var(--success)}.t-danger .toast-icon{color:var(--danger)}
.t-warning .toast-icon{color:var(--warning)}.t-info .toast-icon{color:var(--p)}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:2px}
.toast-msg{font-size:12.5px;color:var(--t3);line-height:1.5;word-break:break-word}
.toast-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:16px;padding:0;flex-shrink:0;line-height:1;min-width:20px}
.toast-close:hover{color:var(--t1)}
.toast-bar{position:absolute;bottom:0;left:4px;right:0;height:3px;background:rgba(0,0,0,.04)}
.toast-bar-fill{height:100%;animation:tbFill linear forwards}
.t-success .toast-bar-fill{background:var(--success)}.t-danger .toast-bar-fill{background:var(--danger)}
.t-warning .toast-bar-fill{background:var(--warning)}.t-info .toast-bar-fill{background:var(--p)}
@keyframes tbFill{from{width:100%}to{width:0%}}

/* Legacy Flash */
.sutro-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-radius:var(--r3);font-size:13.5px;border:1px solid transparent;animation:sDown .2s ease;margin-bottom:14px}
@keyframes sDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sutro-alert i{margin-top:1px;flex-shrink:0}.sutro-alert span{flex:1}
.alert-close{background:none;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0 4px;font-size:16px}
.alert-close:hover{opacity:1}
.sutro-alert-success{background:var(--s-bg);border-color:var(--s-bd);color:#14532D}
.sutro-alert-danger{background:var(--d-bg);border-color:var(--d-bd);color:#7F1D1D}
.sutro-alert-warning{background:var(--w-bg);border-color:var(--w-bd);color:#78350F}
.sutro-alert-info{background:var(--i-bg);border-color:var(--i-bd);color:#1E3A8A}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);animation:fIn .2s ease}
@keyframes fIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:var(--r5);padding:24px;width:100%;max-width:520px;box-shadow:var(--s6);animation:scIn .25s var(--tsp);position:relative;max-height:90vh;overflow-y:auto}
@keyframes scIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.modal-title{font-size:17px;font-weight:800}
.modal-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:20px;padding:2px 6px;border-radius:var(--r2);transition:all var(--tf);line-height:1;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--g100);color:var(--t1)}
/* Mobile sheet modal */
@media(max-width:540px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{border-radius:var(--r5) var(--r5) 0 0;max-height:92vh;animation:sheetIn .3s var(--ts)}
  @keyframes sheetIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
}

/* Confirm */
.confirm-box{max-width:380px;text-align:center;padding:28px 24px}
.confirm-icon{width:68px;height:68px;border-radius:50%;background:var(--d-bg);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.confirm-title{font-size:18px;font-weight:800;margin-bottom:8px}
.confirm-msg{font-size:13.5px;color:var(--t3);margin-bottom:22px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:center}

/* ── LOGIN ───────────────────────────────────────────────── */
.login-page{min-height:100vh;display:flex;align-items:stretch}
.login-left{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0D1117 0%,#1a2332 40%,#0F172A 100%)}
.login-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 30% 20%,rgba(59,130,246,.12),transparent 60%),radial-gradient(ellipse 50% 50% at 70% 80%,rgba(16,185,129,.08),transparent 60%);pointer-events:none}
.ll-inner{position:relative;z-index:1;max-width:440px;width:100%}
.ll-brand{display:flex;align-items:center;gap:13px;margin-bottom:48px}
.ll-logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;box-shadow:0 8px 28px rgba(59,130,246,.4)}
.ll-name{font-size:24px;font-weight:900;color:#F1F5F9;letter-spacing:-.5px}
.ll-ver{font-size:9px;color:#3D4D6A;font-family:'Inter',sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.ll-headline{font-size:30px;font-weight:900;color:#F1F5F9;line-height:1.25;letter-spacing:-.7px;margin-bottom:12px}
.ll-headline em{color:#34D399;font-style:normal}
.ll-sub{font-size:14.5px;color:#4B5A71;line-height:1.7;margin-bottom:40px}
.ll-feats{display:flex;flex-direction:column;gap:14px}
.ll-feat{display:flex;align-items:center;gap:13px}
.ll-fi{width:34px;height:34px;border-radius:var(--r2);background:rgba(59,130,246,.1);display:flex;align-items:center;justify-content:center;font-size:14px;color:#60A5FA;flex-shrink:0}
.ll-ft{font-size:13.5px;color:#5A708A}
.ll-ft strong{color:#8BA1C0;font-weight:600}
.login-right{width:480px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;padding:48px 40px}
.lf-wrap{width:100%;max-width:360px}
.lf-title{font-size:25px;font-weight:900;color:var(--t1);letter-spacing:-.5px;margin-bottom:5px}
.lf-sub{font-size:13.5px;color:var(--t3);margin-bottom:28px}

/* ── FILTER BAR ──────────────────────────────────────────── */
.filter-bar{background:#fff;border-radius:var(--r4);border:1px solid var(--border);box-shadow:var(--s2);padding:12px 16px;margin-bottom:16px}

/* ── SUMMARY ─────────────────────────────────────────────── */
.summary-box{border-radius:var(--r4);padding:18px 20px;text-align:center;background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;box-shadow:var(--glow-b)}
.summary-box.green{background:linear-gradient(135deg,var(--green),#047857);box-shadow:var(--glow-g)}
.summary-box.red{background:linear-gradient(135deg,var(--red),#B91C1C);box-shadow:var(--glow-r)}
.summary-box.dark{background:linear-gradient(135deg,#1E293B,#0F172A);box-shadow:var(--s3)}
.summary-label{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.75;margin-bottom:7px;font-family:'Inter',sans-serif}
.summary-value{font-size:24px;font-weight:900;letter-spacing:-.5px;font-family:'Inter',sans-serif}
.summary-sub{font-size:11px;opacity:.65;margin-top:4px}

/* ── CHIPS ────────────────────────────────────────────────── */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{padding:6px 14px;border-radius:var(--rf);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--tf);border:1.5px solid var(--border);background:#fff;color:var(--t2);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.chip:hover{border-color:var(--p);color:var(--p)}
.chip.active{background:var(--p);color:#fff;border-color:var(--p)}

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:4px;justify-content:center;padding:14px;flex-wrap:wrap}
.pagination a,.pagination span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r3);font-size:13px;font-weight:600;transition:all var(--tf);text-decoration:none;color:var(--t2)}
.pagination a:hover{background:var(--g100);color:var(--t1)}
.pagination .active{background:var(--p);color:#fff;box-shadow:var(--glow-b)}
.pagination .disabled{opacity:.35;pointer-events:none}

/* ── INVOICE DOC ─────────────────────────────────────────── */
.invoice-doc{background:#fff;border-radius:var(--r5);border:1px solid var(--border);padding:40px;box-shadow:var(--s3)}
.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;gap:16px}
.inv-biz-name{font-size:21px;font-weight:900;color:var(--t1);letter-spacing:-.3px}
.inv-no-lbl{font-size:9.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t3)}
.inv-no-val{font-size:26px;font-weight:900;color:var(--t1);letter-spacing:-1px;margin-top:4px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:24px}
.inv-party-lbl{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.inv-party-name{font-size:16px;font-weight:800;color:var(--t1)}
.inv-items-tbl{width:100%;border-collapse:collapse;margin:20px 0}
.inv-items-tbl thead{background:var(--g50)}
.inv-items-tbl th{padding:9px 13px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);font-family:'Inter',sans-serif}
.inv-items-tbl td{padding:12px 13px;border-bottom:1px solid var(--g100);font-size:13.5px;vertical-align:top}
.inv-totals{margin-left:auto;min-width:260px}
.inv-total-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;border-bottom:1px dashed var(--g100)}
.inv-grand{background:var(--g50);border-radius:var(--r3);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-top:8px;border:1px solid var(--border)}
.inv-grand-lbl{font-size:13.5px;font-weight:700}
.inv-grand-val{font-size:21px;font-weight:900;font-family:'Inter',sans-serif;letter-spacing:-.5px}

/* ── ITEMS FORM TABLE ────────────────────────────────────── */
.items-wrap{border:1px solid var(--border);border-radius:var(--r3);overflow:hidden}
.items-wrap table{width:100%;border-collapse:collapse}
.items-wrap thead th{background:var(--g50);padding:9px 9px;font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.items-wrap tbody td{padding:7px 7px;border-bottom:1px solid var(--g100);vertical-align:middle}
.items-wrap tbody tr:last-child td{border-bottom:none}
.items-wrap tfoot td{padding:10px 9px;background:var(--g50);border-top:1px solid var(--border);font-size:13.5px}

/* ── PROGRESS ────────────────────────────────────────────── */
.progress-bar{height:6px;background:var(--g100);border-radius:var(--rf);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--rf);transition:width .6s ease}
.progress-fill.green{background:linear-gradient(90deg,#10B981,#34D399)}
.progress-fill.red{background:linear-gradient(90deg,#EF4444,#F87171)}
.progress-fill.blue{background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.progress-fill.yellow{background:linear-gradient(90deg,#F59E0B,#FCD34D)}

/* ── SKELETON ────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r2);display:inline-block}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── UTILS ────────────────────────────────────────────────── */
.d-flex{display:flex}.d-none{display:none!important}.d-block{display:block}.d-grid{display:grid}
.ai-center{align-items:center}.ai-start{align-items:flex-start}
.jc-between{justify-content:space-between}.jc-center{justify-content:center}.jc-end{justify-content:flex-end}
.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}
.p-16{padding:16px}.p-20{padding:20px}
.no-wrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.text-muted{color:var(--t3)!important}.text-success{color:var(--success)!important}.text-danger{color:var(--danger)!important}
.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.inter{font-family:'Inter',sans-serif}
.rounded{border-radius:var(--r3)}
.fade-in{animation:fadeIn .3s ease}
.slide-up{animation:slideUp .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── TOOLTIP ─────────────────────────────────────────────── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--g900);color:#fff;font-size:11.5px;padding:5px 10px;border-radius:var(--r2);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--tf);z-index:999;font-family:'Inter',sans-serif}
[data-tip]:hover::after{opacity:1}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--g400)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════ */

/* ── 1280px ── */
@media(max-width:1280px){
  .kpi{grid-template-columns:repeat(2,1fr)}
  .qa-grid{grid-template-columns:repeat(4,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}

/* ── 1024px ── */
@media(max-width:1024px){
  .g3{grid-template-columns:1fr 1fr}
  .frow-3,.frow-4{grid-template-columns:1fr 1fr}
}

/* ── 768px — Tablet ── */
@media(max-width:768px){
  .sidebar{transform:translateX(calc(-1 * var(--sb-w)))}
  .sidebar.open{transform:translateX(0)}
  .main-wrap,.main-wrap.mini{margin-left:0!important}
  .tb-toggle{display:flex}
  .topbar{padding:0 14px;gap:10px}
  .tb-search-wrap{max-width:none;flex:1}
  .page-content{padding:14px 14px;padding-bottom:calc(14px + var(--bn-h) + 8px)}
  .kpi{grid-template-columns:1fr 1fr;gap:10px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .frow-2,.frow-3,.frow-4{grid-template-columns:1fr}
  .page-header{flex-direction:column;gap:10px}
  .page-hdr-right{width:100%;flex-wrap:wrap}
  .page-hdr-right .btn{flex:1;min-width:140px}
  .inv-parties{grid-template-columns:1fr;gap:14px}
  .inv-header{flex-direction:column}
  .profit-banner{flex-direction:column}
  .pb-right{gap:16px}
  .sutro-table{min-width:560px}
  .bottom-nav{display:flex}
  .invoice-doc{padding:24px 18px}
  .inv-items-tbl{min-width:460px;display:block;overflow-x:auto}
  .modal-box{padding:20px}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── 540px — Mobile ── */
@media(max-width:540px){
  .kpi{grid-template-columns:1fr 1fr}
  .kpi-value{font-size:18px}
  .pb-value{font-size:26px}
  .page-hdr-title{font-size:19px}
  .btn-lg{padding:11px 20px;font-size:14.5px}
  .tb-search-wrap{display:none}
  .tb-title{font-size:14px}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .invoice-doc{padding:18px 14px}
  .summary-value{font-size:20px}
  .toast-container{max-width:calc(100% - 24px)}
  .frow-2{grid-template-columns:1fr}
}

/* ── 400px — Small phones ── */
@media(max-width:400px){
  .kpi{grid-template-columns:1fr}
  .kpi-value{font-size:20px}
  .bn-label{display:none}
  .bn-item{padding:4px 2px}
  .qa-grid{grid-template-columns:repeat(2,1fr);gap:8px}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.no-print,#sb-overlay,.toast-container,
  .bottom-nav,.fab-menu,.filter-bar,.pagination,
  .btn-primary,.btn-danger,.btn-success,.btn-secondary,
  .btn-warning,.btn-ghost,.qa-grid{display:none!important}
  .main-wrap{margin-left:0!important}
  .page-content{padding:0!important}
  .card,.invoice-doc{box-shadow:none!important;border:1px solid #ddd!important}
  body{background:#fff!important}
  .invoice-doc{padding:20px!important}
  .sutro-table{min-width:0!important}
  @page{margin:12mm}
}

/* Alias for backward compat */
.stat-card{background:var(--card);border-radius:var(--r4);border:1px solid var(--border);padding:16px;position:relative;overflow:hidden;transition:all var(--tb);cursor:default}
.stat-card::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:.07;transform:translate(20px,-20px);pointer-events:none}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;opacity:0;transition:opacity var(--tb);border-radius:0 0 var(--r4) var(--r4)}
.stat-card:hover{box-shadow:var(--s4);transform:translateY(-2px)}
.stat-card:hover::after{opacity:1}
.stat-card.green::before{background:var(--green)}.stat-card.green::after{background:var(--green)}
.stat-card.blue::before{background:var(--p)}.stat-card.blue::after{background:var(--p)}
.stat-card.red::before{background:var(--red)}.stat-card.red::after{background:var(--red)}
.stat-card.yellow::before{background:var(--yellow)}.stat-card.yellow::after{background:var(--yellow)}
.stat-card.purple::before{background:var(--purple)}.stat-card.purple::after{background:var(--purple)}
.stat-card.cyan::before{background:var(--cyan)}.stat-card.cyan::after{background:var(--cyan)}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.stat-icon{width:40px;height:40px;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.stat-icon.green{background:#DCFCE7;color:#16A34A}.stat-icon.blue{background:#DBEAFE;color:#2563EB}
.stat-icon.red{background:#FEE2E2;color:#DC2626}.stat-icon.yellow{background:#FEF9C3;color:#CA8A04}
.stat-icon.purple{background:#F3E8FF;color:#9333EA}.stat-icon.cyan{background:#CFFAFE;color:#0891B2}
.stat-icon.orange{background:#FFEDD5;color:#EA580C}
.stat-trend{font-size:11px;font-weight:700;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:3px;padding:3px 7px;border-radius:var(--rf)}
.stat-trend.up{background:#DCFCE7;color:#15803D}.stat-trend.down{background:#FEE2E2;color:#B91C1C}
.stat-trend.flat{background:var(--g100);color:var(--t3)}
.stat-label{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:4px;font-family:'Inter',sans-serif}
.stat-value{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.5px;line-height:1.1;font-family:'Inter',sans-serif}
.stat-sub{font-size:11px;color:var(--t3);margin-top:4px}


/* ── Gray scale aliases ── */
:root {
  --brand-blue:#3B82F6;--brand-green:#10B981;--brand-red:#EF4444;
  --brand-yellow:#F59E0B;--brand-purple:#8B5CF6;--brand-cyan:#06B6D4;
  --danger:var(--red);--success:var(--green);--warning:var(--yellow);
  --text-primary:var(--t1);--text-secondary:var(--t2);--text-muted:var(--t3);
  --bg-card:var(--card);--bg-app:var(--bg);--bg-input:var(--input-bg);
  --shadow-sm:var(--s2);--shadow-md:var(--s3);--shadow-lg:var(--s4);
  --shadow-xl:var(--s5);--shadow-2xl:var(--s6);
  --r-sm:var(--r2);--r-md:var(--r3);--r-lg:var(--r4);--r-xl:var(--r5);
  --r-2xl:var(--r6);--r-full:var(--rf);
  --gray-50:var(--g50);--gray-100:var(--g100);--gray-200:var(--g200);
  --gray-300:var(--g300);--gray-400:var(--g400);--gray-500:var(--g500);
  --gray-600:var(--g600);--gray-700:var(--g700);--gray-800:var(--g800);
  --gray-900:var(--g900);
  --t-fast:var(--tf);--t-base:var(--tb);--t-slow:var(--ts);--t-spring:var(--tsp);
}

/* FAB icon inside fab-item fix */
.fab-item i{width:32px;height:32px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}